/* ==========================================================================
   Law Office of Vatche D. Tashjian
   Plain CSS. No framework, no build step: edit this file directly.

   1. Reset
   2. Design tokens and base typography
   3. Components, in page order
   4. Dialog, slide-out menu, and accordion
   5. Responsive rules, print, and accessibility preferences
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Webfonts
   Both faces are bundled in assets/fonts/ under the SIL Open Font License
   (see assets/fonts/LICENSE.txt). They are served from this domain, so the
   font-src 'self' policy covers them and no third party sees a visitor.
   Latin subsets only; the weight axis is instanced to the range the site
   actually uses, which is why the two files together are under 75 KB.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter Variable";
  src: url("fonts/inter-latin-var.woff2") format("woff2-variations"),
       url("fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-latin.woff2") format("woff2-variations"),
       url("fonts/source-serif-4-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after, ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
ol, ul, menu { list-style: none; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, select, optgroup, textarea { font: inherit; letter-spacing: inherit; color: inherit; background-color: transparent; border-radius: 0; opacity: 1; }
button, input[type="button"], input[type="reset"], input[type="submit"] { appearance: button; }
button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; }
::placeholder { color: #6b7671; opacity: 1; }
textarea { resize: vertical; }
:-moz-focusring { outline: auto; }
summary { display: list-item; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
/* Closed dialogs, menus, and accordion panels rely on this, so it has to win
   over the display values set further down. */
[hidden] { display: none !important; }

:root {
  --ink: #092e26;
  --muted: #4f5d57;
  --paper: #f6f5f0;
  --surface: #f6f5f0;
  --card: #ffffff;
  --field: #fbfaf7;
  --line: #d8d2c5;
  --line-strong: #7a8077;
  --deep: #092e26;
  --deep-2: #041e19;
  --deep-3: #16483c;
  --cool-silver: #d2cec5;
  --teal: var(--deep);
  --gold: #c3a56a;
  --gold-soft: #ddc995;
  --accent-strong: #795b24;
  --accent-ink: #092e26;
  --focus: #684c18;
  --focus-halo: var(--paper);
  /* One sans for the interface, one serif for the identity voice. Both are
     bundled above; the system names stay as a fallback for the swap window
     and for anyone blocking webfonts. */
  --font-sans: "Inter Variable", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --radius-lg: 2rem;
  --radius-md: 1.35rem;
  --shadow: 0 22px 60px rgba(9, 46, 38, 0.14);
  --shadow-card: 0 26px 60px -34px rgba(9, 46, 38, 0.55);

  /* One shared page edge. Every section, full-bleed panel, and footer starts
     on this line, so the whole page aligns on a single vertical rhythm.
     Viewport units are used instead of percentages because the value is also
     consumed inside grid items, where a percentage would resolve against the
     column instead of the page. */
  --container: 1460px;
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --edge: max(var(--gutter), calc((100vw - var(--container)) / 2));

  /* Real heights of the sticky chrome and the fixed call bar. */
  --utility-h: 2.25rem;
  --sticky-h: 5.7rem;
  --trust-h: 8.6rem;
  --call-bar-h: 0rem;
}

/* Dark surfaces need the inverse focus ring: a bronze outline on forest green
   is not distinguishable (WCAG 2.4.7 visible focus / 1.4.11). */
.utility-bar,
.hero-panel,
.attorney-panel,
.process-panel,
.faq-panel,
.site-footer,
.inner-hero,
.policy-hero,
.notfound-panel,
.mobile-sheet,
.consultation-dialog-intro,
.practice-card:nth-child(2) { background-color: #092e26;
  --focus: #f8f7f3;
  --focus-halo: rgba(4, 30, 25, 0.92);
}
/* …but the two light cards inside the dark process panel are light again. */
.process-steps li:nth-child(1),
.process-steps li:nth-child(4) {
  --focus: #684c18;
  --focus-halo: var(--paper);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sticky-h) + 1rem);
  overflow-x: visible;
}
body {
  margin: 0;
  padding-bottom: calc(var(--call-bar-h) + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body, main, section, div, article, form, nav { min-width: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, blockquote { margin-top: 0; }
h1, h2, h3 {
  text-wrap: balance;
  overflow: visible;
  padding-block: 0.035em 0.08em;
  /* Display sizes are large; a single long word has to wrap rather than
     overflow or be clipped by a panel with overflow: hidden. */
  overflow-wrap: break-word;
}
h1, h2 {
  font-weight: 700;
  letter-spacing: -0.048em;
  line-height: 1.04;
}
h1 em, h2 em { color: var(--gold); font-style: normal; font-weight: inherit; }
/* Two tiers, not one. Section headings introduce a section; the dark
   statement panels carry the page's display voice. When every heading was
   the display size the page had no hierarchy and headings ran 4-5 lines. */
h2 { font-size: clamp(2.05rem, 3.3vw, 3.35rem); letter-spacing: -0.036em; line-height: 1.08; }
.attorney-content h2, .process-intro h2, .faq-intro h2 { font-size: clamp(2.45rem, 4.1vw, 4.15rem); letter-spacing: -0.046em; line-height: 1.05; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--focus-halo);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-color: var(--deep);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--paper);
}
::selection { background: var(--gold-soft); color: var(--deep-2); }

.site-width { width: 100%; margin-inline: 0; padding-inline: var(--edge); }
.section { padding-block: clamp(5.5rem, 9vw, 9rem); }
[id] { scroll-margin-top: calc(var(--sticky-h) + 1rem); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 200;
  left: 1rem;
  top: 1rem;
  transform: translateY(-250%);
  background: white;
  color: var(--deep-2);
  padding: 0.85rem 1.1rem;
  border-radius: 0.7rem;
  font-weight: 800;
  box-shadow: 0 18px 40px rgba(9, 46, 38, 0.35);
}
.skip-link:focus { transform: translateY(0); }

.eyebrow {
  margin-bottom: 1.25rem;
  color: #4c5660;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
}
.eyebrow-light { color: #ced6df; }
.eyebrow > span { display: inline-block; width: 2.25rem; height: 1px; margin: 0 0.75rem 0.2rem 0; background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 20%, transparent)); }

.button {
  min-height: 3.6rem;
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 0.45rem 0.55rem 0.45rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.015em;
  line-height: 1.2;
  transition: transform 160ms cubic-bezier(0.22, 0.61, 0.36, 1), background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.button-gold { background-color: #c3a56a;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.34), transparent 46%),
    linear-gradient(135deg, color-mix(in srgb, var(--gold-soft) 62%, white 38%) 0%, var(--gold) 54%, color-mix(in srgb, var(--gold) 82%, var(--deep) 18%) 100%);
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--gold) 62%, white 38%);
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--deep) 22%, transparent),
    0 2px 6px color-mix(in srgb, var(--deep) 16%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.62);
}
/* Pressing should feel like pressing: the button drops onto the page and its
   shadow collapses, on every pointer type. */
.button:active {
  transform: translateY(2px) scale(0.985);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--deep) 20%, transparent), inset 0 1px 0 rgba(255,255,255,0.4);
  transition-duration: 60ms;
}
.text-link:active, .card-link:active, .menu-trigger:active, .faq-trigger:active, .contact-methods a:active { transform: translateY(1px); }
.text-link, .card-link, .menu-trigger, .faq-trigger, .contact-methods a { transition: transform 120ms ease, color 180ms ease; }
.mobile-call-bar:active { transform: translateY(1px); filter: brightness(0.96); }
.arrow-badge { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: white; color: var(--accent-strong); transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.text-link { min-height: 3rem; display: inline-flex; align-items: center; gap: 0.65rem; font-size: 1.0625rem; font-weight: 750; }
.text-link-light { color: white; }
button.header-phone, button.text-link { padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }

/* Hover effects are gated so they never stick on touch devices. */
@media (hover: hover) {
  .button:hover { transform: translateY(-2px); }
  .button:hover .arrow-badge { transform: translate(2px, 2px); }
  .button-gold:hover {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.42), transparent 46%),
      linear-gradient(135deg, color-mix(in srgb, var(--gold-soft) 44%, white 56%), var(--gold) 62%);
    box-shadow:
      0 20px 40px color-mix(in srgb, var(--deep) 26%, transparent),
      0 0 0 4px color-mix(in srgb, var(--gold) 16%, transparent),
      inset 0 1px 0 rgba(255,255,255,0.7);
  }
  .desktop-nav a { position: relative; }
  .desktop-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.45rem; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1); }
  .desktop-nav a:hover::after { transform: scaleX(1); }
  .text-link:hover { color: var(--gold-soft); }
  .utility-bar a:hover { color: white; }
  .desktop-nav a:hover { color: var(--accent-strong); }
  .footer-grid a:hover { color: white; }
  .contact-methods a:hover { color: var(--accent-strong); }
  .contact-form input:hover, .contact-form select:hover, .contact-form textarea:hover { border-color: #59636d; }
  .practice-card:hover { transform: translateY(-4px); box-shadow: 0 34px 70px -34px rgba(9, 46, 38, 0.6); border-color: var(--line-strong); }
  .practice-card:nth-child(2):hover { border-color: var(--gold); }
  .card-link:hover { text-decoration: underline; text-underline-offset: 0.35em; }
  .card-link:hover svg { transform: translateX(0.25rem); }
  .notfound-links a:hover { color: var(--gold-soft); }
}

/* The utility strip and the main bar sit in one banner landmark; the negative
   offset lets the strip scroll away while the main bar stays pinned. */
.site-top { position: sticky; z-index: 40; top: calc(-1 * var(--utility-h)); }
.utility-bar { background: linear-gradient(90deg, var(--deep-2), var(--deep), var(--deep-2)); color: #d8dfd8; font-size: 0.9375rem; }
.utility-inner { min-height: var(--utility-h); display: flex; align-items: center; justify-content: space-between; gap: 2rem; letter-spacing: 0.04em; }
.utility-details { display: flex; align-items: center; gap: 2rem; }
.utility-bar a { min-height: 2rem; display: inline-flex; align-items: center; }

.site-header { background-color: #f6f5f0;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--deep) 11%, transparent);
}
/* Safari below 18 only supports the prefixed property; browsers with neither
   get an opaque bar instead of translucent text over content. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--paper); }
}
.header-inner { min-height: var(--sticky-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.brand { width: max-content; max-width: 100%; min-height: 3.5rem; display: inline-flex; align-items: center; gap: 0.85rem; }
.brand-logo-frame { width: 3.55rem; height: 3.55rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 0.85rem; overflow: hidden; background: #fff; border: 1px solid color-mix(in srgb, var(--deep) 12%, transparent); }
.brand-logo-frame img { width: 100%; height: 100%; object-fit: contain; }
.brand-type { display: flex; flex-direction: column; line-height: 1.12; }
.brand-type strong { font-family: var(--font-serif); font-size: clamp(1rem, 3.4vw, 1.2rem); letter-spacing: 0.035em; }
.brand-type small { margin-top: 0.25rem; color: #566069; font-size: clamp(0.875rem, 2.6vw, 0.9375rem); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.brand-light .brand-type { color: white; }
.brand-light .brand-type small { color: #c4ccd5; }
.desktop-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.1vw, 2.6rem); }
.desktop-nav a { min-height: 2.8rem; display: inline-flex; align-items: center; font-size: 1rem; font-weight: 800; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 0.75rem; }
.header-phone { min-height: 2.8rem; display: inline-flex; align-items: center; gap: 0.55rem; font-size: 1rem; font-weight: 800; white-space: nowrap; }
.header-cta { min-height: 3.1rem; padding-left: 1.1rem; font-size: 0.9375rem; }
.header-cta .arrow-badge { width: 2.15rem; height: 2.15rem; }
.menu-trigger { width: 3rem; height: 3rem; display: none; place-items: center; border: 1px solid #c8cfca; border-radius: 50%; background: transparent; color: var(--deep); cursor: pointer; }

.mobile-sheet { background-color: #092e26; width: min(100%, 27rem); max-width: none; padding: 2rem; gap: 1.5rem; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--gold) 18%, transparent), transparent 34%), linear-gradient(145deg, var(--deep), var(--deep-2)); color: white; border-left: 0; overflow-y: auto; }
.mobile-sheet .sheet-close { min-width: 3rem; min-height: 3rem; display: grid; place-items: center; color: white; border-radius: 50%; opacity: 1; }
/* The primitives ship with `outline-hidden`, which would remove the ring. */
.mobile-sheet .sheet-close:focus-visible,
.modal-close:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.mobile-nav { display: flex; flex-direction: column; margin-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.16); }
.mobile-nav a { min-height: 4.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,0.16); font-size: 1.25rem; font-weight: 700; }
.mobile-sheet-contact { margin-top: auto; padding-top: 1.5rem; }
.mobile-sheet-contact .sheet-email { min-height: 2.75rem; display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 0.85rem; color: #ced6df; font-size: 1.0625rem; font-weight: 700; text-decoration: underline; text-underline-offset: 0.22em; overflow-wrap: anywhere; }
.mobile-sheet-contact .sheet-email svg { flex: 0 0 auto; color: var(--gold-soft); }
@media (hover: hover) { .mobile-sheet-contact .sheet-email:hover { color: #fff; } }
.mobile-sheet-contact .button { width: 100%; }
.mobile-sheet-contact p { margin: 0.75rem 0 0; color: #c4ccd5; font-size: 1rem; }

.hero-panel { background-color: #092e26;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(24rem, 0.92fr);
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: 0;
  overflow: hidden;
  border-radius: 0;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 78% 6%, color-mix(in srgb, var(--gold) 13%, transparent), transparent 62%),
    radial-gradient(85% 70% at 8% 96%, color-mix(in srgb, var(--deep-3) 78%, transparent), transparent 66%),
    linear-gradient(152deg, var(--deep-2) 0%, var(--deep) 46%, color-mix(in srgb, var(--deep-3) 82%, var(--deep-2)) 100%);
  color: white;
  box-shadow: none;
}
/* One wide, soft key light. It drifts slowly enough that nothing appears to
   move; it only keeps the surface from looking printed. */
.hero-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -28% -12% auto 38%;
  height: 132%;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--deep-3) 58%, transparent), transparent 72%);
  filter: blur(12px);
}
.hero-panel::after,
.attorney-panel::after,
.process-panel::after,
.faq-panel::after,
.site-footer::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
.attorney-panel, .process-panel, .faq-panel, .site-footer { background-color: #092e26; position: relative; isolation: isolate; }

.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(4.75rem, 8vw, 8rem) clamp(4rem, 6vw, 6rem); padding-inline: var(--edge) clamp(2.1rem, 5vw, 6.8rem); }
.hero-copy h1 { max-width: 13ch; margin-bottom: 1.8rem; font-size: clamp(3.6rem, 6.2vw, 6.8rem); }
.hero-lead { max-width: 42rem; margin-bottom: 0; color: #dae1e8; font-size: clamp(1.18rem, 1.4vw, 1.4rem); line-height: 1.7; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem 1.8rem; margin-top: 2.4rem; }
.hero-location { max-width: 42rem; margin: 2rem 0 0; color: var(--cool-silver); font-size: 1.0625rem; }
.hero-visual { position: relative; min-height: 42rem; background: #d8d6c9; overflow: hidden; }
.hero-visual img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 51% 24%; }
.hero-photo-shade { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--deep-2) 70%, transparent) 0, transparent 35%), linear-gradient(0deg, color-mix(in srgb, var(--deep-3) 68%, transparent) 0, transparent 38%); }
.hero-identity { position: absolute; z-index: 2; left: 2rem; bottom: 2rem; display: flex; flex-direction: column; }
.hero-identity span { font-family: var(--font-serif); font-size: 1.35rem; }
.hero-identity small { margin-top: 0.25rem; color: #dae1e8; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.bar-card { background-color: #041e19; position: absolute; z-index: 3; top: 2rem; right: 2rem; max-width: 20rem; display: flex; align-items: center; gap: 0.8rem; padding: 1rem; border: 1px solid rgba(255,255,255,0.3); border-radius: 1rem; background: color-mix(in srgb, var(--deep-2) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.bar-card svg { flex: 0 0 auto; color: var(--gold-soft); }
.bar-card span, .bar-card small { display: block; }
.bar-card strong { font-size: 1.0625rem; }
.bar-card small { margin-top: 0.12rem; color: #cdd5de; font-size: 0.9375rem; line-height: 1.5; }
.hero-trust { position: relative; z-index: 4; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; background: color-mix(in srgb, var(--deep-2) 74%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-trust::before { content: ""; position: absolute; top: 0; left: var(--edge); right: var(--edge); height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22) 12%, rgba(255,255,255,0.22) 88%, transparent); }
.hero-trust > li { position: relative; min-height: var(--trust-h); display: flex; align-items: center; gap: 1rem; padding: 1.35rem 2rem; }
.hero-trust > li + li::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.2), transparent); }
.hero-trust > li:first-child { padding-left: var(--edge); }
.hero-trust > li:last-child { padding-right: var(--edge); border-right: 0; }
.hero-trust svg { width: 1.6rem; flex: 0 0 auto; color: var(--gold-soft); }
.hero-trust strong, .hero-trust small { display: block; }
.hero-trust strong { font-size: 1.45rem; line-height: 1.25; }
.hero-trust small { margin-top: 0.22rem; color: #c9d1da; font-size: 1rem; line-height: 1.45; }

.section-heading h2 { margin-bottom: 0; }
.split-heading { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(18rem, 0.62fr); align-items: end; gap: clamp(3rem, 8vw, 9rem); margin-bottom: 3.6rem; }
.split-heading h2 { max-width: 17ch; }
.split-heading > p { margin: 0 0 0.55rem; color: var(--muted); font-size: 1.2rem; line-height: 1.75; }
.compact-heading { max-width: 57rem; margin-bottom: 3.5rem; }
.compact-heading h2 { max-width: 15ch; }
.practice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.practice-card { display: flex; flex-direction: column; padding: clamp(1.5rem, 2.7vw, 2.7rem); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-card); transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.practice-card:nth-child(2) { background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 35%), linear-gradient(150deg, var(--deep-2), var(--deep) 58%, var(--deep-3)); color: white; border-color: var(--deep); box-shadow: 0 24px 55px color-mix(in srgb, var(--deep) 20%, transparent); }
.practice-card-top { display: flex; align-items: center; justify-content: space-between; color: var(--accent-strong); }
.practice-card-top span { color: #545f6a; font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.14em; }
/* Dark bronze on the dark card was effectively invisible. */
.practice-card:nth-child(2) .practice-card-top { color: var(--gold-soft); }
.practice-card:nth-child(2) .practice-card-top span { color: #b7c0ca; }
.practice-card h3 { margin: 0 0 1rem; font-size: clamp(1.6rem, 2.05vw, 2.1rem); line-height: 1.08; letter-spacing: -0.03em; }
.practice-card > p { margin-bottom: 1.5rem; color: var(--muted); font-size: 1.15rem; line-height: 1.7; }
.practice-card:nth-child(2) > p { color: #cbd3dc; }
.practice-card ul { margin: 0; padding: 1.3rem 0 0; border-top: 1px solid var(--line); list-style: none; }
.practice-card:nth-child(2) ul { border-color: rgba(255,255,255,0.16); }
.practice-card li { position: relative; padding: 0.45rem 0 0.45rem 1rem; font-size: 1.0625rem; line-height: 1.5; }
.practice-card li::before { content: ""; position: absolute; left: 0; top: 1.03rem; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--gold); }
.card-link { min-height: 3rem; display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.4rem; color: var(--accent-strong); font-size: 1.0625rem; font-weight: 800; }
.card-link svg { flex: 0 0 auto; transition: transform 180ms ease; }
.practice-card:nth-child(2) .card-link { color: var(--gold-soft); }
/* Subgrid keeps the number, title, summary, list and link on shared
   baselines across all three cards. Without it each card distributed its
   own leftover space and nothing lined up. Flex fallback below. */
@supports not (grid-template-rows: subgrid) {
  .practice-card { min-height: 33rem; }
  .practice-card h3 { margin-top: auto; }
}
@supports (grid-template-rows: subgrid) {
  .practice-grid { grid-template-rows: auto auto auto 1fr auto; }
  .practice-card { grid-row: span 5; display: grid; grid-template-rows: subgrid; min-height: 0; }
  .practice-card ul { align-self: start; }
}
.section-footnote { margin: 1.35rem 0 0; color: #566069; font-size: 1rem; }

.attorney-panel { background-color: #092e26; width: 100%; max-width: none; display: grid; grid-template-columns: minmax(22rem, 0.9fr) minmax(0, 1.1fr); margin: 0; padding-inline: 0; overflow: hidden; border-radius: 0; background: radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--gold) 15%, transparent), transparent 33%), linear-gradient(138deg, var(--deep-2), var(--deep) 60%, var(--deep-3)); color: white; box-shadow: none; }
.attorney-photo { position: relative; min-height: 50rem; overflow: hidden; background: #d9d7c9; }
.attorney-photo img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 50% 36%; }
.attorney-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--deep-2) 88%, transparent), transparent 43%); }
.attorney-photo-caption { position: absolute; z-index: 2; left: 2rem; right: 2rem; bottom: 2rem; display: flex; flex-direction: column; }
.attorney-photo-caption span { font-family: var(--font-serif); font-size: 1.45rem; }
.attorney-photo-caption small { margin-top: 0.3rem; color: #cdd5de; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.attorney-content { display: flex; flex-direction: column; justify-content: center; padding-block: clamp(3rem, 6vw, 7.2rem); padding-inline: clamp(3rem, 6vw, 7.2rem) var(--edge); }
.attorney-content h2 { max-width: 11ch; margin-bottom: 1.8rem; }
.attorney-lead { max-width: 48rem; color: #d7dee6; font-size: 1.2rem; line-height: 1.8; }
.attorney-content blockquote { max-width: 43rem; margin: 1.2rem 0 2.4rem; padding-left: 1.4rem; border-left: 3px solid var(--gold); color: white; font-family: var(--font-serif); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.55; }
.credential-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid rgba(255,255,255,0.16); border-left: 1px solid rgba(255,255,255,0.16); }
.credential-grid > div { min-height: 8.5rem; display: flex; flex-direction: column; padding: 1.25rem; border-right: 1px solid rgba(255,255,255,0.16); border-bottom: 1px solid rgba(255,255,255,0.16); }
.credential-grid dt { color: var(--gold-soft); font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.credential-grid dd { margin: auto 0 0; }
.credential-grid strong { display: block; font-size: 1.15rem; }
.credential-grid small { display: block; margin-top: 0.15rem; color: #bdc6d0; font-size: 0.9375rem; line-height: 1.45; }

.memberships-section { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(3rem, 8vw, 8rem); }
.membership-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.membership-list > li { min-height: 5rem; display: grid; grid-template-columns: 3rem minmax(0, 1fr) 2rem; align-items: center; gap: 1rem; border-bottom: 1px solid var(--line); }
.membership-list span { color: var(--accent-strong); font-size: 0.9375rem; font-weight: 800; }
.membership-list p { margin: 0; font-size: clamp(1.08rem, 1.3vw, 1.22rem); line-height: 1.5; }
.membership-list svg { color: var(--accent-strong); }

.process-panel { background-color: #092e26; width: 100%; max-width: none; display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(3rem, 7vw, 7rem); margin: 0; padding-block: clamp(4.5rem, 7vw, 7rem); padding-inline: var(--edge); border-radius: 0; background: radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 34%), linear-gradient(135deg, var(--deep-2), var(--deep) 52%, var(--deep-3)); color: white; box-shadow: none; }
.process-intro h2 { max-width: 13ch; margin-bottom: 1.5rem; }
.process-intro > p:not(.eyebrow) { max-width: 31rem; color: #d4dbe3; font-size: 1.18rem; line-height: 1.72; }
.process-intro .button { margin-top: 1.3rem; }
.process-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.process-steps li { min-height: 14rem; display: flex; flex-direction: column; padding: 1.65rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 1.2rem; background: rgba(255,255,255,0.06); }
.process-steps li:nth-child(1), .process-steps li:nth-child(4) { background: white; color: var(--ink); border-color: transparent; }
.step-number { color: var(--gold-soft); font-size: 0.9375rem; font-weight: 900; letter-spacing: 0.1em; }
/* Soft bronze on a white card is 1.6:1 — the light cards need the deep bronze. */
.process-steps li:nth-child(1) .step-number, .process-steps li:nth-child(4) .step-number { color: var(--accent-strong); }
.process-steps li > div { margin-top: auto; }
.process-steps h3 { max-width: none; margin-bottom: 0.75rem; font-size: clamp(1.35rem, 1.7vw, 1.7rem); line-height: 1.15; }
.process-steps p { margin: 0; color: #cdd5de; font-size: 1.1rem; line-height: 1.65; }
.process-steps li:nth-child(1) p, .process-steps li:nth-child(4) p { color: var(--muted); }

.service-area { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: end; gap: clamp(3rem, 8vw, 8rem); }
.service-area h2 { max-width: 15ch; margin-bottom: 0; }
.county-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.county-grid li { min-height: 6.25rem; display: flex; align-items: center; gap: 0.8rem; padding: 1rem 1.3rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-weight: 760; }
.county-grid svg { flex: 0 0 auto; color: var(--accent-strong); }

.faq-panel { background-color: #092e26; width: 100%; max-width: none; display: grid; grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr); gap: clamp(3rem, 7vw, 7rem); margin: 0; padding-block: clamp(4.5rem, 7vw, 7rem); padding-inline: var(--edge); border-radius: 0; background: radial-gradient(circle at 12% 92%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 36%), linear-gradient(140deg, var(--deep-2), var(--deep) 55%, var(--deep-3)); color: white; box-shadow: none; }
.faq-intro h2 { max-width: 12ch; margin-bottom: 1.4rem; }
.faq-intro > p:not(.eyebrow) { max-width: 27rem; color: #cdd5de; font-size: 1.18rem; line-height: 1.7; }
.faq-list { border-top: 1px solid rgba(255,255,255,0.2); }
.faq-item { border-color: rgba(255,255,255,0.2); }
.faq-trigger { min-height: 5.5rem; padding: 1.2rem 0; color: white; font-size: clamp(1.15rem, 1.45vw, 1.4rem); font-weight: 760; line-height: 1.45; text-decoration: none; }
.faq-trigger svg { width: 1.85rem; height: 1.85rem; padding: 0.35rem; border-radius: 50%; background: white; color: var(--deep-2); }
.faq-answer { padding-bottom: 1.6rem; color: #d8dfe6; font-size: 1.1rem; }
.faq-answer p { max-width: 48rem; margin: 0; line-height: 1.7; }

.contact-section { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.contact-intro h2 { max-width: 14ch; }
.contact-intro > p:not(.eyebrow) { max-width: 31rem; color: var(--muted); font-size: 1.18rem; line-height: 1.7; }
.contact-methods { margin: 2.6rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.contact-methods a { min-height: 5.4rem; display: grid; grid-template-columns: 2rem minmax(0, 1fr) 1.5rem; align-items: center; gap: 1rem; border-bottom: 1px solid var(--line); }
.contact-methods a > svg:first-child { color: var(--accent-strong); }
.contact-methods a > svg:last-child { justify-self: end; }
.contact-methods span { overflow-wrap: anywhere; font-size: 1.15rem; font-weight: 720; line-height: 1.5; }
.contact-methods small { display: block; margin-bottom: 0.18rem; color: #545f6a; font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.contact-form { display: flex; flex-direction: column; gap: 1.15rem; padding: clamp(1.5rem, 3.2vw, 3.3rem); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-card); }
.form-legend { margin: 0; color: #545f6a; font-size: 1rem; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form label:not(.consent-row) { display: flex; flex-direction: column; gap: 0.5rem; color: var(--deep); font-size: 1rem; font-weight: 800; }
.label-text { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.required-mark { color: var(--accent-strong); font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.04em; }
.contact-form input:not([type="checkbox"]), .contact-form select, .contact-form textarea { width: 100%; min-height: 3.6rem; padding: 0.85rem 1rem; border: 1px solid var(--line-strong); border-radius: 0.65rem; background: var(--field); color: var(--ink); font-size: 1.0625rem; font-weight: 450; }
.contact-form textarea { min-height: 8.5rem; resize: vertical; }
.form-help { margin: -0.45rem 0 0; color: #545f6a; font-size: 0.9375rem; }
.consent-row { min-height: 3rem; display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.5rem 0; color: #3b434a; font-size: 1rem; font-weight: 550; line-height: 1.55; cursor: pointer; }
.consent-row input { width: 1.5rem; height: 1.5rem; margin: 0.15rem 0 0; flex: 0 0 auto; accent-color: var(--deep); }
.contact-form .button { margin-top: 0.25rem; }
.form-status { min-height: 1.6rem; margin: 0; color: #124455; font-size: 1rem; font-weight: 700; }

.modal-overlay { background-color: rgba(4,30,25,.82); background: color-mix(in srgb, var(--deep-2) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.consultation-dialog {
  width: min(72rem, calc(100% - 2rem));
  max-width: 72rem;
  max-height: min(92dvh, 56rem);
  grid-template-columns: minmax(22rem, 0.92fr) minmax(0, 1.08fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 1.75rem;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 38px 100px color-mix(in srgb, var(--deep-2) 48%, transparent), 0 0 0 1px color-mix(in srgb, var(--gold) 20%, transparent);
}
.modal-close { top: 1rem; right: 1rem; z-index: 3; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.94); color: var(--deep-2); opacity: 1; }
.modal-close svg { width: 1.15rem; height: 1.15rem; }
.consultation-dialog-intro { background-color: #092e26; display: flex; flex-direction: column; padding: clamp(2rem, 3.2vw, 3rem); background: radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 34%), linear-gradient(145deg, var(--deep-2), var(--deep) 58%, var(--deep-3) 130%); color: white; }
.consultation-dialog .modal-header { text-align: left; }
.consultation-dialog .eyebrow { margin-bottom: 1rem; }
.consultation-dialog .modal-title { max-width: 100%; padding-bottom: 0.12em; overflow: visible; overflow-wrap: break-word; color: white; font-family: var(--font-serif); font-size: clamp(2.35rem, 4vw, 3.8rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1.08; text-wrap: balance; }
.consultation-dialog .modal-description { max-width: 31rem; margin-top: 1.2rem; color: #d7dee6; font-size: 1.1rem; line-height: 1.7; }
.consultation-phone { min-height: 5.6rem; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) 1.5rem; align-items: center; gap: 0.9rem; margin-top: auto; padding-top: 2rem; color: white; border-top: 1px solid rgba(255,255,255,0.18); }
.consultation-phone span, .consultation-phone small, .consultation-phone strong { display: block; }
.consultation-phone .consultation-phone-icon { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; align-self: center; border-radius: 50%; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: var(--accent-ink); line-height: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.48); }
.consultation-phone-icon svg { width: 1.25rem; height: 1.25rem; display: block; }
.consultation-phone > svg { justify-self: end; }
.consultation-phone small { color: #c9d1da; font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.consultation-phone strong { margin-top: 0.15rem; font-size: 1.2rem; overflow-wrap: anywhere; }
.consultation-notes { display: flex; flex-direction: column; gap: 0.55rem; margin: 1.25rem 0 0; padding: 0; list-style: none; color: #cdd5de; font-size: 1rem; }
.consultation-notes li { display: flex; align-items: center; gap: 0.55rem; }
.consultation-dialog .contact-form { justify-content: center; min-height: 100%; max-height: min(92dvh, 56rem); padding: clamp(2rem, 4vw, 3.5rem); overflow-y: auto; border: 0; border-radius: 0; background: var(--card); box-shadow: none; }
.consultation-dialog .contact-form textarea { min-height: 6.5rem; }

.site-footer { width: 100%; max-width: none; margin: 0; padding-block: clamp(4rem, 6vw, 6rem) 1.8rem; padding-inline: var(--edge); overflow: hidden; border-radius: 0; background: radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--gold) 13%, transparent), transparent 34%), linear-gradient(140deg, var(--deep-2), var(--deep) 60%, var(--deep-3)); color: #d2dad4; }
.footer-grid { display: grid; grid-template-columns: 1.35fr repeat(3, 0.72fr); gap: clamp(2rem, 5vw, 5rem); }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.footer-grid h2 { margin: 0 0 0.75rem; padding: 0; color: white; font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.footer-grid a:not(.brand) { min-height: 2.4rem; display: inline-flex; align-items: center; font-size: 1.0625rem; line-height: 1.6; }
.footer-brand p { max-width: 19rem; margin: 1.4rem 0 0; color: #bcc4ce; font-family: var(--font-serif); font-size: 1.18rem; line-height: 1.65; }
.breakable { overflow-wrap: anywhere; }
.footer-word { margin-top: clamp(4rem, 8vw, 8rem); color: white; font-size: min(13.5vw, 12rem); font-weight: 900; letter-spacing: -0.075em; line-height: 0.78; white-space: nowrap; opacity: 0.92; }
.footer-bottom { display: flex; justify-content: space-between; gap: 2rem; margin-top: 2.3rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,0.14); color: color-mix(in srgb, var(--paper) 78%, transparent); font-size: 0.9375rem; line-height: 1.55; }
.mobile-call-bar { display: none; }

.inner-hero, .policy-hero, .notfound-panel { background-color: #092e26; position: relative; width: 100%; max-width: none; min-height: 37rem; display: grid; grid-template-columns: minmax(0, 1fr) 20rem; align-items: center; gap: 5rem; margin: 0; padding-block: clamp(4rem, 7vw, 7rem); padding-inline: var(--edge); overflow: hidden; border-radius: 0; background: radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 34%), linear-gradient(135deg, var(--deep-2), var(--deep) 56%, var(--deep-3)); color: white; box-shadow: none; }
.inner-hero::before, .policy-hero::before, .notfound-panel::before { content: ""; position: absolute; width: 35rem; height: 35rem; right: -8rem; top: -9rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; box-shadow: 0 0 0 6rem rgba(255,255,255,0.025), 0 0 0 12rem rgba(255,255,255,0.015); }
.inner-hero > div, .policy-hero > *, .notfound-panel > * { position: relative; z-index: 1; }
/* Breadcrumb. The primary nav only points at home-page sections, so an inner
   page had no visible route back to the section it belongs to. Colours are
   measured against the dark panel: #b9c4cf on #092e26 is 8.29:1. */
.breadcrumb { margin-bottom: 1.5rem; font-size: 0.9375rem; font-weight: 700; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: flex; align-items: center; gap: 0.6rem; color: #b9c4cf; }
.breadcrumb li + li::before { content: "/"; color: #7d8b97; }
.breadcrumb a { min-height: 2.25rem; display: inline-flex; align-items: center; color: #b9c4cf; text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, #b9c4cf 45%, transparent); }
.breadcrumb [aria-current="page"] { color: var(--gold-soft); }
@media (hover: hover) { .breadcrumb a:hover { color: #fff; text-decoration-color: currentColor; } }

/* The footer link for the page the visitor is already on. */
.footer-grid a[aria-current="page"] { color: var(--gold-soft); font-weight: 800; }

.inner-hero h1, .policy-hero h1, .notfound-panel h1 { max-width: 14ch; margin-bottom: 1.4rem; font-size: clamp(3rem, 5.6vw, 5.8rem); }
.inner-hero > div > p:not(.eyebrow), .policy-hero > p:not(.eyebrow), .notfound-panel > p:not(.eyebrow) { max-width: 48rem; color: #d7dee6; font-size: clamp(1.15rem, 1.4vw, 1.35rem); line-height: 1.75; }
.inner-icon { width: 17rem; height: 17rem; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--gold) 70%, transparent); border-radius: 50%; }
.inner-icon svg { width: 6rem; height: 6rem; color: var(--gold-soft); stroke-width: 1.25; }
.practice-detail { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(3rem, 8vw, 8rem); }
.practice-detail > div h2 { max-width: 14ch; }
.practice-detail > div > p:not(.eyebrow) { max-width: 34rem; color: var(--muted); font-size: 1.15rem; line-height: 1.78; }
.practice-detail ul { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.practice-detail li { min-height: 4.9rem; display: grid; grid-template-columns: 3rem minmax(0,1fr) 2rem; align-items: center; gap: 1rem; border-bottom: 1px solid var(--line); }
.practice-detail li span { color: var(--accent-strong); font-size: 0.9375rem; font-weight: 800; }
.practice-detail li strong { font-size: 1.15rem; line-height: 1.5; }
.practice-detail li svg { color: var(--accent-strong); }

/* These two stack their children directly in the grid, so the 5rem gap
   meant for the two-column inner hero was opening 80px between the label,
   the heading and the paragraph. Spacing here comes from the elements. */
.policy-hero, .notfound-panel { grid-template-columns: 1fr; min-height: 31rem; row-gap: 0; align-content: center; justify-items: start; }
.policy-hero > *, .notfound-panel > * { width: 100%; }
.policy-hero h1 { margin-bottom: 1.3rem; font-size: clamp(2.8rem, 5vw, 5rem); }
.policy-body > article, .policy-body > p { max-width: 68rem; }
.policy-body article { padding: 0 0 2.4rem; margin-bottom: 2.4rem; border-bottom: 1px solid var(--line); }
.policy-body h2 { margin-bottom: 0.9rem; padding: 0; font-size: clamp(1.6rem, 2.5vw, 2.2rem); letter-spacing: -0.035em; }
.policy-body p { margin: 0; color: var(--muted); font-size: 1.18rem; line-height: 1.8; }
.policy-updated { font-size: 1rem; }

.notfound-panel { min-height: 34rem; align-content: center; }
.notfound-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem 1.8rem; margin-top: 2.4rem; }
.notfound-links { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin: 2.6rem 0 0; padding: 2rem 0 0; list-style: none; border-top: 1px solid rgba(255,255,255,0.18); }
.notfound-links a { min-height: 2.6rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.0625rem; font-weight: 750; }
.notfound-links svg { color: var(--gold-soft); }

/* The primary navigation has to survive on real laptops. It used to collapse
   to a hamburger at 1408px, so every 1280 and 1366 screen - the two most
   common laptop widths - got the phone navigation on a desktop. The header
   now tightens in two steps and only collapses when it genuinely runs out
   of room. */
@media (max-width: 1300px) {
  .header-inner { gap: 1.15rem; }
  .desktop-nav { gap: 1.4rem; }
  .desktop-nav a { font-size: 0.9375rem; }
  .header-phone { font-size: 0.9375rem; }
  .header-cta { padding-left: 1rem; font-size: 0.875rem; }
  .header-cta .arrow-badge { width: 1.95rem; height: 1.95rem; }
}
@media (max-width: 1240px) {
  .header-inner { gap: 0.9rem; }
  .desktop-nav { gap: 1.05rem; }
  .desktop-nav a { font-size: 0.9rem; }
  .site-header .brand-logo-frame { width: 3rem; }
  /* The number keeps its accessible name; only the visible label folds away. */
  .header-phone .header-phone-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .header-phone { gap: 0; padding-inline: 0.35rem; }
}
@media (max-width: 1023px) {
  .header-inner { grid-template-columns: 1fr auto; }
  .desktop-nav, .header-phone { display: none; }
  .menu-trigger { display: grid; }
}

@media (max-width: 1180px) {
  .hero-panel { grid-template-columns: minmax(0, 1fr) minmax(21rem, 0.78fr); }
  .hero-trust > li { padding-inline: 1.4rem; }
  .hero-trust > li:first-child { padding-left: var(--edge); }
  .hero-trust > li:last-child { padding-right: var(--edge); }
}

@media (max-width: 900px) {
  :root { --call-bar-h: 4.5rem; }
  .utility-bar a { display: none; }
  .header-cta { display: none; }
  .hero-panel, .attorney-panel, .process-panel, .faq-panel, .site-footer, .inner-hero, .policy-hero, .notfound-panel { width: 100%; max-width: none; margin-inline: 0; border-radius: 0; }
  .hero-panel { grid-template-columns: 1fr; }
  .hero-panel::before { inset: 26% -22% auto 12%; height: 62%; }
  .hero-copy { min-height: 39rem; padding-inline: var(--edge); }
  .hero-copy h1 { max-width: 12ch; font-size: clamp(3.4rem, 10.5vw, 5.6rem); }
  .hero-visual { min-height: 42rem; }
  .hero-trust { grid-template-columns: 1fr 1fr; }
  .hero-trust > li, .hero-trust > li:first-child, .hero-trust > li:last-child { padding: 1.35rem var(--edge); }
  .hero-trust > li:nth-child(2) { border-right: 0; }
  .hero-trust > li:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.14); }
  .split-heading, .memberships-section, .service-area, .contact-section, .practice-detail { grid-template-columns: 1fr; gap: 3rem; }
  .split-heading { align-items: start; }
  .practice-grid { grid-template-columns: 1fr; }
  .practice-card > p { min-height: 0; }
  .attorney-panel { grid-template-columns: 1fr; }
  .attorney-photo { min-height: 44rem; }
  .attorney-content { padding-inline: var(--edge); }
  .process-panel, .faq-panel { grid-template-columns: 1fr; }
  .process-intro h2, .faq-intro h2 { max-width: 13ch; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .inner-hero { grid-template-columns: 1fr; min-height: 34rem; }
  .inner-icon { display: none; }
  /* The header CTA is hidden below this width, so the persistent call bar
     becomes the primary conversion path on tablets and phones. */
  .mobile-call-bar {
    position: fixed;
    z-index: 35;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    min-height: var(--call-bar-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
    background: linear-gradient(180deg, var(--deep), var(--deep-2));
    color: var(--gold-soft);
    box-shadow: 0 -10px 28px color-mix(in srgb, var(--deep) 34%, transparent);
    cursor: pointer;
    font-size: 1.0625rem;
    font-weight: 850;
    letter-spacing: 0.02em;
  }
  /* Two dialog columns cannot hold a usable form below this width. */
  .consultation-dialog {
    width: calc(100% - 1.5rem);
    max-width: calc(100% - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    grid-template-columns: 1fr;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 1.25rem;
  }
  .consultation-dialog-intro { padding: 3.6rem clamp(1.4rem, 4vw, 2.5rem) 2rem; }
  .consultation-dialog .modal-title { font-size: clamp(2.2rem, 7vw, 3.1rem); line-height: 1.1; }
  .consultation-phone { margin-top: 2rem; }
  .consultation-dialog .contact-form { min-height: auto; max-height: none; padding: clamp(1.4rem, 4vw, 2.5rem); overflow: visible; }
}

@media (max-width: 580px) {
  :root { --utility-h: 2.5rem; --sticky-h: 4.9rem; --trust-h: 7rem; }
  body { font-size: 1.0625rem; }
  .section { padding-block: 4.6rem; }
  .utility-inner > span:first-child { display: none; }
  .eyebrow > span { display: none; }
  .utility-details { width: 100%; justify-content: center; }
  .utility-details > span { font-size: 0.875rem; }
  .brand-logo-frame { width: 3.1rem; height: 3.1rem; }
  .hero-copy { min-height: 35rem; padding-block: 3.7rem 3rem; }
  .hero-copy h1 { max-width: 100%; font-size: clamp(2.85rem, 13.6vw, 4.1rem); line-height: 1.05; }
  .hero-lead { font-size: 1.125rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-visual { min-height: 31rem; }
  .hero-identity { left: 1.25rem; bottom: 1.25rem; }
  .bar-card { left: 1rem; right: 1rem; top: 1rem; max-width: none; }
  .hero-trust { grid-template-columns: 1fr; }
  .hero-trust > li, .hero-trust > li:nth-child(-n+2) { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
  .hero-trust > li:last-child { border-bottom: 0; }
  .split-heading { margin-bottom: 2.4rem; }
  .practice-card { padding: 1.5rem; }
  .attorney-photo { min-height: 34rem; }
  .attorney-content { padding-block: 3.8rem; }
  .attorney-content h2 { max-width: 100%; font-size: clamp(2.7rem, 12.4vw, 3.5rem); }
  .credential-grid { grid-template-columns: 1fr; }
  .credential-grid > div { min-height: 7.4rem; }
  .membership-list > li { grid-template-columns: 2.2rem minmax(0, 1fr) 1.5rem; gap: 0.7rem; }
  .process-panel, .faq-panel { padding-block: 3.6rem; }
  .process-steps { grid-template-columns: 1fr; }
  .process-steps li { min-height: 0; padding: 1.5rem; }
  .county-grid { grid-template-columns: 1fr; }
  .faq-trigger { min-height: 4.8rem; }
  .field-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-word { font-size: 14.3vw; letter-spacing: -0.08em; }
  .footer-bottom { flex-direction: column; gap: 0.7rem; }
  .inner-hero, .policy-hero, .notfound-panel { padding-block: 4rem; }
  .inner-hero h1, .policy-hero h1, .notfound-panel h1 { max-width: 100%; font-size: clamp(2.9rem, 13vw, 4.4rem); }
  .practice-detail li { grid-template-columns: 2.2rem minmax(0, 1fr) 1.5rem; gap: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; scroll-behavior: auto; }
  .button:hover, .practice-card:hover { transform: none; }
}

@media (forced-colors: active) {
  .button, .practice-card, .contact-form, .bar-card, .credential-grid, .county-grid, .consultation-dialog { border: 1px solid CanvasText; }
  .eyebrow > span, .practice-card li::before { background: CanvasText; }
  :focus-visible { outline: 3px solid Highlight; }
}

@media print {
  .utility-bar, .site-header, .mobile-call-bar, .contact-form, .hero-actions, .process-intro .button, .skip-link, .modal-overlay, .consultation-dialog { display: none; }
  body { background: white; color: black; padding-bottom: 0; font-size: 11pt; }
  .site-top { position: static; }
  .hero-panel, .attorney-panel, .process-panel, .faq-panel, .inner-hero, .policy-hero, .notfound-panel, .site-footer { color: black; background: white; box-shadow: none; border: 1px solid #777; }
}


/* --------------------------------------------------------------------------
   4. Dialog, slide-out menu, and accordion
   These were supplied by a component library in the earlier build and are
   written out in full here so the page needs nothing but this file.
   -------------------------------------------------------------------------- */

.modal-overlay, .sheet-overlay { background-color: rgba(4,30,25,.72); position: fixed; inset: 0; z-index: 50; }
.sheet-overlay { background: color-mix(in srgb, var(--deep-2) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.is-locked { overflow: hidden; }

.consultation-dialog { position: fixed; top: 50%; left: 50%; z-index: 51; display: grid; transform: translate(-50%, -50%); }
.mobile-sheet { position: fixed; top: 0; right: 0; bottom: 0; z-index: 51; display: flex; flex-direction: column; }

.modal-close, .sheet-close { position: absolute; cursor: pointer; }
.sheet-close { top: 1rem; right: 1rem; }

.faq-item { border-bottom-width: 1px; border-bottom-style: solid; }
.faq-item:last-child { border-bottom-width: 0; }
.faq-trigger { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; text-align: left; }
.faq-trigger svg { flex: 0 0 auto; margin-top: 0.15rem; transition: transform 0.2s ease; }
.faq-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: no-preference) {
  .consultation-dialog { animation: dialog-in 0.18s ease-out; }
  .mobile-sheet { animation: sheet-in 0.2s ease-out; }
  .modal-overlay, .sheet-overlay { animation: fade-in 0.18s ease-out; }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes dialog-in { from { opacity: 0; transform: translate(-50%, -47%); } }
@keyframes sheet-in { from { opacity: 0; transform: translateX(12%); } }


/* --------------------------------------------------------------------------
   6. Motion
   Brief entrance transitions only; content stays visible if scripts fail.
   All motion respects the visitor's reduced-motion preference.
   -------------------------------------------------------------------------- */

.site-header { transition: box-shadow 260ms ease, background-color 260ms ease; }
body.is-scrolled .site-header { box-shadow: 0 14px 34px -22px rgba(9, 46, 38, 0.55); }

/* Content stays visible when scripts fail, during keyboard use and in print.
   The hidden starting state is applied only under .reveal-ready, a class the
   script adds after it has confirmed both an IntersectionObserver and the
   visitor's motion preference - so no script, an old browser, or reduced
   motion all leave the page fully visible with nothing to un-hide. */
[data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
  }
  .reveal-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* The eyebrow and the headline are deliberately left out of the entrance.
     Largest Contentful Paint ignores anything still at opacity 0, so fading
     the h1 in over 820ms after a 140ms delay pushed the measured LCP on a
     phone from first paint to ~1.0s - a second of delay bought nothing, since
     nobody has scrolled yet and there is no reveal to earn. Everything below
     the headline still arrives in sequence. */
  .hero-copy > *:nth-child(n+3) { animation: rise 700ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards; }
  .hero-copy > *:nth-child(3) { animation-delay: 90ms; }
  .hero-copy > *:nth-child(4) { animation-delay: 170ms; }
  .hero-copy > *:nth-child(5) { animation-delay: 250ms; }

  .hero-visual .bar-card, .hero-visual .hero-identity { animation: rise 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 380ms backwards; }
  .hero-trust > li { animation: rise 600ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards; }
  .hero-trust > li:nth-child(1) { animation-delay: 420ms; }
  .hero-trust > li:nth-child(2) { animation-delay: 490ms; }
  .hero-trust > li:nth-child(3) { animation-delay: 560ms; }
  .hero-trust > li:nth-child(4) { animation-delay: 630ms; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* Production QA: preserve the palette and composition while allowing reflow. */
html { scroll-padding-top: calc(var(--header-offset, var(--sticky-h)) + 1rem); scroll-padding-bottom: calc(var(--bottom-offset, var(--call-bar-h)) + 1rem); }
body { padding-bottom: calc(var(--bottom-offset, var(--call-bar-h)) + env(safe-area-inset-bottom, 0px)); overflow-wrap: break-word; }
[id], a, button, input, select, textarea, summary { scroll-margin-top: calc(var(--header-offset, var(--sticky-h)) + 1rem); scroll-margin-bottom: calc(var(--bottom-offset, var(--call-bar-h)) + 1rem); }
label, input, select, textarea, .brand-type, .header-actions, .label-text { min-width: 0; }
button, .button, .text-link, .mobile-call-bar { white-space: normal; overflow-wrap: break-word; }
.button { text-align: center; }
.button > svg, .text-link > svg, .mobile-call-bar > svg, .card-link > svg, .mobile-nav svg { flex-shrink: 0; }
.brand-type { overflow-wrap: break-word; }
.field-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.contact-form .email-help { margin: 0; }
.form-unavailable, .email-fallback { padding-block: 1rem; }
.form-unavailable a, .email-fallback a, .policy-body a { text-decoration: underline; text-underline-offset: 0.18em; }
.email-fallback summary { min-height: 2.75rem; padding-block: 0.5rem; cursor: pointer; font-weight: 750; }
.email-fallback .form-help { margin-block: 0.75rem; }
.contact-form .email-draft { min-height: 14rem; font-size: 1rem; }
.faq-trigger:disabled { cursor: default; }
.faq-trigger:disabled svg { display: none; }
.consultation-dialog { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); overflow-y: auto; overscroll-behavior: contain; align-items: stretch; scroll-padding-block: 4.5rem 1.5rem; }
.consultation-dialog .contact-form { justify-content: flex-start; min-height: 0; max-height: none; overflow: visible; padding-top: 4rem; }
.consultation-dialog-intro { min-height: 0; }
.consultation-dialog .modal-close { position: sticky; grid-column: 1 / -1; top: 0.75rem; margin: 0.75rem 0.75rem -3.5rem auto; right: auto; }
.consultation-phone { margin-top: 2rem; }
.mobile-sheet { padding-top: 5rem; padding-bottom: max(2rem, env(safe-area-inset-bottom)); max-height: 100vh; max-height: 100dvh; overscroll-behavior: contain; }
.mobile-sheet > * { flex-shrink: 0; }
.mobile-sheet .brand { padding-right: 0; }
body.is-locked { position: fixed; width: 100%; overflow: hidden; }
.hero-identity { right: 1.25rem; }
.hero-identity, .attorney-photo-caption { text-shadow: 0 2px 6px rgba(0,0,0,.7); }
/* Opaque caption surfaces guarantee contrast independently of photograph crop. */
.hero-identity { width: fit-content; max-width: calc(100% - 2.5rem); padding: .65rem 1rem; border-radius: .5rem; background: rgba(4,30,25,.92); }
.attorney-photo-caption { padding: .65rem 1rem; border-radius: .5rem; background: rgba(4,30,25,.92); }
@media (max-width: 1023px) { .header-inner { grid-template-columns: minmax(0,1fr) auto; } }
@media (max-width: 900px) { .consultation-dialog { grid-template-columns: minmax(0,1fr); } .consultation-dialog .contact-form { padding-top: 2rem; } }
/* Short windows and enlarged text must retain usable content space. */
@media (max-height: 500px) { .site-top { position: relative; top: 0; } html { --header-offset: 0px !important; } .mobile-call-bar { position: static; } body { padding-bottom: 0; } }
@media (forced-colors: active) {
  .contact-form input, .contact-form select, .contact-form textarea, .modal-close, .sheet-close, .menu-trigger, .mobile-call-bar { border: 1px solid ButtonText; }
  .hero-identity, .attorney-photo-caption { background: Canvas; color: CanvasText; text-shadow: none; }
}
@media print {
  .mobile-sheet, .sheet-overlay, .modal-overlay, .consultation-dialog, .mobile-call-bar, [data-form-fallback], .email-fallback { display: none !important; }
  body.is-locked { position: static; overflow: visible; }
  [inert] { visibility: visible; }
  main, .site-footer { display: block !important; }
  .faq-answer[hidden], [data-reveal] { display: block !important; opacity: 1 !important; transform: none !important; }
  main *, .site-footer * { color: #000 !important; text-shadow: none !important; box-shadow: none !important; }
  main section, main article, .hero-trust, .hero-identity, .attorney-photo-caption, .site-footer { background: #fff !important; }
  .footer-word, .hero-panel::before, .inner-hero::before, .policy-hero::before { display: none; }
  a[href] { text-decoration: underline; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Intrinsic sizes must never force grid tracks wider than the available space. */
ul, ol, li, dd, dt { min-width: 0; }
.process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-grid a:not(.brand) { max-width: 100%; }
.site-header .brand-logo-frame { width: min(3.55rem, 14vw); height: auto; aspect-ratio: 1; }
.site-header .brand { gap: clamp(.4rem, 2vw, .85rem); }
.consultation-phone { grid-template-columns: min(2.8rem, 12vw) minmax(0, 1fr) min(1.5rem, 7vw); gap: clamp(.35rem, 2vw, .9rem); }
.consultation-phone .consultation-phone-icon { width: min(2.8rem, 12vw); height: min(2.8rem, 12vw); }
.header-tall .site-top { position: relative; top: 0; }
.header-tall { --header-offset: 0px !important; }
@media (max-width: 580px) { .process-steps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 360px) { .header-inner { column-gap: .5rem; } }
h1, h2, h3 { overflow-wrap: break-word; }
/* Only the narrowest phones need mid-word breaking; above that it just
   fractures ordinary words. Verified against the 320px overflow sweep. */
@media (max-width: 480px) { h1, h2, h3, body { overflow-wrap: anywhere; } }
.button { column-gap: min(.9rem, 3vw); padding-inline: min(1.35rem, 5vw) min(.55rem, 3vw); }
.button .arrow-badge { width: min(2.5rem, 10vw); height: min(2.5rem, 10vw); }