:root {
  --ink: #13294f;
  --navy: #18367c;
  --gold: #7a5e22;
  --line: #e2dccf;
  --paper: #f6f4ef;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: #1b1d21; }
a { color: var(--gold); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid #a77719; outline-offset: 4px; }
[id] { scroll-margin-top: 16px; }
.skip-link { position: absolute; left: 16px; top: 16px; z-index: 2; background: white; padding: 10px 16px; }
.skip-link:not(:focus) { clip-path: inset(50%); }
.wordmark { font: 600 42px/.95 Georgia, serif; color: var(--ink); letter-spacing: .12em; text-decoration: none; }
.wordmark span { display: block; margin-top: 7px; font: 700 10px/1.2 system-ui, sans-serif; letter-spacing: .36em; text-align: center; }
.lawyer-mark { display: grid; place-items: center; flex: 0 1 280px; width: 100%; aspect-ratio: 4 / 5; background: var(--paper); border: 1px solid var(--line); color: var(--navy); }
.lawyer-mark span { display: grid; place-items: center; width: 104px; height: 104px; border: 1px solid #b8913f; border-radius: 50%; font: 500 46px/1 Georgia, serif; letter-spacing: .06em; }
.contact-panel { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.contact-panel :is(input, select, textarea) { min-width: 0; width: 100%; }
.contact-panel :is(button, a) { max-width: 100%; }
.contact-panel :is(button, input, textarea, select, a):focus-visible { outline-color: #f2ca6d; }
.contact-panel button:disabled { opacity: .72; cursor: wait; }
.extra-field { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.form-status { grid-column: 1 / -1; margin: 0; padding: 12px; border: 1px solid #c9a85c; color: #fff; }
.footer-link { color: #ede8dc; }
.preview-banner { padding: 10px 20px; background: #fff2cb; color: #422d08; text-align: center; font: 600 14px/1.5 system-ui, sans-serif; }

.secondary { font: 16px/1.65 system-ui, sans-serif; }
.page-header { display: flex; flex-direction: column; gap: 20px; align-items: center; padding: 24px; border-bottom: 1px solid var(--line); }
.page-header nav, .page-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; }
.page-header nav a { color: var(--navy); }
.page-content { width: min(100%, 790px); margin: auto; padding: 60px 24px 84px; }
.page-content h1 { margin-top: 0; color: var(--navy); font: 500 clamp(40px, 6vw, 56px)/1.1 Georgia, serif; }
.page-content h2 { margin-top: 32px; color: var(--navy); font-size: 20px; }
.page-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; padding: 30px 24px; background: #0e1f3d; color: #ede8dc; font-size: 14px; }
.page-footer a { color: #e4c47e; }

@media (max-width: 620px) {
  main > section { padding: 60px 20px !important; }
  main > section > div { gap: 28px !important; }
  .contact-panel { padding: 20px; }
  .lawyer-mark { flex-basis: 128px; aspect-ratio: 1; }
  .lawyer-mark span { width: 82px; height: 82px; font-size: 34px; }
}
@media (max-width: 360px) {
  main > section { padding-inline: 16px !important; }
}
#lawyer h3 { overflow-wrap: anywhere; }