/* ==========================================================================
   Taft Trial Law v5 — design system. Single stylesheet, no build step.
   Layers: tokens → reset → typography → buttons → forms → header → footer →
   mobile bar → shared components → page blocks → a11y. See _build/DESIGN-BRIEF.md.
   ========================================================================== */

/* == tokens == */
:root{
  --navy-950:#010220; --navy-900:#00033c; --navy-800:#0a114e; --navy-700:#1b2464;
  --navy-600:#333e7d; --navy-200:#c9cfe8; --navy-100:#e3e6f4;
  /* v5 accent: sky on navy, steel-blue on light (gold retired) */
  --accent:#7db4f5; --accent-dark:#2a5298; --accent-light:#b7d1f7; --accent-pale:#e6eefb;
  /* v2 red — now the single CTA color: every primary button and "call now" action */
  --urgent:#c0392b; --urgent-dark:#9c2c1f;
  --header-h:88px;
  --ivory:#f4efe4; --paper:#faf8f2; --white:#ffffff;
  --ink:#131c26; --ink-soft:#4e5c6a; --success:#1e7a4c; --border:#e5dfd0;
  /* form-field outline: 3:1 against white (WCAG 1.4.11) */
  --border-field:#8a93a0;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --sect-pad:7rem; --maxw:1200px; --maxw-narrow:780px;
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --shadow-sm:0 2px 8px rgba(0,3,60,.08);
  --shadow-md:0 10px 32px rgba(0,3,60,.12);
  --shadow-lg:0 24px 64px rgba(0,3,60,.24);
  --hair-accent:1px solid rgba(100,146,205,.45);
  --hair-dark:1px solid rgba(255,255,255,.14);
  --t-display-xl:clamp(2.75rem,6.5vw,5.25rem);
  --t-display:clamp(2.25rem,4.5vw,3.5rem);
  --t-h2:clamp(1.875rem,3.5vw,2.75rem);
  --t-numeral:clamp(3rem,5vw,4.5rem);
  --font-display:"DM Serif Display","DMSerif-fallback",Georgia,serif;
  --font-ui:"Archivo","Archivo-fallback",-apple-system,"Segoe UI",sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (max-width:760px){ :root{ --sect-pad:4rem; } }

/* == reset/base == */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
body{
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.65;
  color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased;
}
/* in-page anchors clear the sticky header (header is static at <=760px) */
html{ scroll-padding-top:calc(var(--header-h) + var(--s-4)); }
@media (max-width:760px){ html{ scroll-padding-top:var(--s-4); } }
img,svg,picture{ display:block; max-width:100%; }
img{ height:auto; }
ul[class],ol[class]{ list-style:none; }
a{ color:var(--navy-700); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--accent-dark); }
button{ font:inherit; cursor:pointer; }

/* == typography == */
@font-face{ font-family:"DM Serif Display"; src:url("../fonts/dmserif-display-latin.woff2") format("woff2");
  font-weight:400; font-display:swap; }
@font-face{ font-family:"Archivo"; src:url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight:500 800; font-display:swap; }
@font-face{ font-family:"DMSerif-fallback"; src:local("Georgia");
  size-adjust:106%; ascent-override:88%; descent-override:24%; line-gap-override:0%; }
@font-face{ font-family:"Archivo-fallback"; src:local("Arial");
  size-adjust:98%; ascent-override:97%; descent-override:25%; line-gap-override:0%; }

h1,h2{ font-family:var(--font-display); font-weight:400; color:var(--navy-900); text-wrap:balance; }
h3{ font-family:var(--font-ui); font-weight:700; font-size:1.375rem; line-height:1.25;
  letter-spacing:-.01em; color:var(--navy-900); }
h4{ font-family:var(--font-ui); font-weight:700; font-size:1.125rem; line-height:1.3; color:var(--navy-900); }
.display-xl{ font-size:var(--t-display-xl); line-height:1.02; }
.display{ font-size:var(--t-display); line-height:1.05; }
h2,.t-h2{ font-size:var(--t-h2); line-height:1.1; }
.lede{ font-size:1.25rem; line-height:1.6; color:var(--ink-soft); }
.t-small{ font-size:.9375rem; line-height:1.6; }
.t-legal{ font-size:.8125rem; line-height:1.55; color:var(--ink-soft); }
.eyebrow{
  display:block; font-family:var(--font-ui); font-weight:600; font-size:.8125rem;
  line-height:1; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-dark);
  margin-bottom:var(--s-4);
}
.numeral{ font-family:var(--font-display); font-size:var(--t-numeral); line-height:1; color:var(--accent-dark); }
/* two-tone split headline: line 1 inherits, .tone gets the accent */
.tone{ color:var(--accent-dark); }
.bg-navy h2,.bg-navy .display,.bg-navy .display-xl{ color:var(--white); }
.bg-navy .tone{ color:var(--accent); }
.bg-navy .eyebrow{ color:var(--accent); }
.bg-navy,.bg-navy p{ color:var(--navy-200); }
.bg-navy .lede{ color:var(--navy-200); }
.bg-navy a:not([class]){ color:var(--accent-light); }
.bg-navy h3,.bg-navy h4{ color:var(--white); }

/* == buttons (exactly four) == */
.btn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; font-family:var(--font-ui); font-weight:700; font-size:1rem; line-height:1.15;
  padding:.85rem 1.5rem; border-radius:var(--r-sm); border:0; text-decoration:none;
  text-align:center; transition:background-color .15s ease,color .15s ease,transform .12s ease,border-color .15s ease;
}
.btn-lg{ font-size:1.0625rem; padding:1.05rem 1.9rem; min-height:52px; }
.btn-block{ width:100%; }
.btn-primary{ background:var(--urgent); color:var(--white); }
.btn-primary:hover{ background:var(--urgent-dark); color:var(--white); transform:translateY(-1px); }
.btn-urgent{ background:var(--urgent); color:var(--white); }
.btn-urgent:hover{ background:var(--urgent-dark); color:var(--white); transform:translateY(-1px); }
.btn-sub{ display:block; font-size:.75rem; font-weight:600; letter-spacing:.02em; opacity:.96; }
.btn-ghost{ background:transparent; color:var(--navy-800); border:1.5px solid var(--navy-800); }
.btn-ghost:hover{ background:var(--navy-800); color:var(--white); }
.bg-navy .btn-ghost,.hero .btn-ghost{ color:var(--white); border-color:rgba(255,255,255,.55); }
.bg-navy .btn-ghost:hover,.hero .btn-ghost:hover{ background:var(--white); color:var(--navy-900); }
.btn-quiet{
  display:inline-block; font-family:var(--font-ui); font-weight:700; font-size:1rem;
  color:var(--navy-800); text-decoration:none;
}
.btn-quiet::after{ content:" \2192"; color:var(--accent-dark); }
.btn-quiet:hover{ color:var(--accent-dark); }
.bg-navy .btn-quiet{ color:var(--white); }
.bg-navy .btn-quiet::after{ color:var(--accent); }
.bg-navy .btn-quiet:hover{ color:var(--accent-light); }
/* in-copy phone link: accent text + glyph, never a button */
.phone-link{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-ui);
  font-weight:700; color:var(--accent-dark); text-decoration:none; }
.phone-link:hover{ color:var(--navy-800); }
.bg-navy .phone-link,.hero .phone-link{ color:var(--accent); }
.bg-navy .phone-link:hover,.hero .phone-link:hover{ color:var(--accent-light); }
.phone-link svg{ width:18px; height:18px; }
/* inline-phone: plain inline tel link for running/centered prose — wraps with the
   sentence (the flex .phone-link cannot). No svg. Number kept unbroken. */
.phone-inline{ font-family:var(--font-ui); font-weight:700; color:var(--accent-dark);
  white-space:nowrap; text-decoration-thickness:1px; text-underline-offset:3px; }
.phone-inline:hover{ color:var(--navy-800); }
.bg-navy .phone-inline{ color:var(--accent); }
.bg-navy .phone-inline:hover{ color:var(--accent-light); }

/* == forms (always-visible labels) == */
.form-card{
  background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:var(--s-6); color:var(--ink);
}
.form-card-head{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s-3); margin-bottom:var(--s-5); flex-wrap:wrap; }
.form-card h2,.form-card h3{ font-family:var(--font-ui); font-weight:700; font-size:1.375rem;
  color:var(--navy-900); line-height:1.2; }
.pill-avail{
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-ui);
  font-weight:600; font-size:.8125rem; line-height:1; color:var(--success);
  background:#e7f2ec; border-radius:var(--r-pill); padding:.45rem .8rem; white-space:nowrap;
}
.pill-avail::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--success); }
.field{ margin-bottom:var(--s-4); min-width:0; }
.field-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-4); }
.field input,.field select,.field textarea{ min-width:0; }
.field label{
  display:block; font-family:var(--font-ui); font-weight:600; font-size:.8125rem;
  letter-spacing:.02em; color:var(--navy-800); margin-bottom:.35rem;
}
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--ink); background:var(--white);
  border:1px solid var(--border-field); border-radius:var(--r-sm); padding:.7rem .85rem; min-height:44px;
}
.field textarea{ min-height:90px; resize:vertical; }
/* narrow screens: the v2 placeholder runs 4–5 lines — never clip it mid-sentence */
@media (max-width:640px){ .field textarea{ min-height:150px; } }
.field select{
  appearance:none; -webkit-appearance:none; padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234e5c6a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent-dark); }
.consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.8125rem;
  line-height:1.5; color:var(--ink-soft); margin-bottom:var(--s-4); }
.consent input{ margin-top:.2rem; width:16px; height:16px; min-width:16px; accent-color:var(--navy-800); }
.form-status{ font-family:var(--font-ui); font-weight:600; font-size:.9375rem; color:var(--navy-800); }
.form-status:not(:empty){ margin-top:var(--s-3); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* == header / nav == */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--navy-900);
  color:var(--white); padding:.75rem 1.25rem; }
.skip-link:focus{ left:0; }
.site-header{
  position:sticky; top:0; z-index:60; background:var(--navy-900);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{ display:flex; align-items:center; gap:var(--s-5); min-height:var(--header-h); }
.logo{ display:block; flex-shrink:0; }
/* v5: larger lockup (white/sky variant) — 316×54 desktop, see breakpoints below */
.logo img{ width:316px; height:54px; }
.nav-toggle{ display:none; background:none; border:0; color:var(--white); padding:.5rem; }
.nav-toggle svg{ width:26px; height:26px; }
.site-header nav{ margin-left:auto; }
.nav-links{ display:flex; align-items:center; gap:var(--s-5); }
.nav-links a{
  font-family:var(--font-ui); font-weight:600; font-size:.9375rem; color:var(--white);
  text-decoration:none; padding:.4rem 0;
}
.nav-links a:hover{ color:var(--accent-light); }
.nav-links a[aria-current="page"]{ color:var(--accent); box-shadow:0 2px 0 var(--accent); }
.header-cta{ display:flex; align-items:center; gap:var(--s-5); margin-left:var(--s-2); }
.header-phone{ text-decoration:none; text-align:right; line-height:1.15; }
.header-phone-note{ display:block; font-family:var(--font-ui); font-weight:600; font-size:.6875rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--navy-200); }
.header-phone-num{ display:block; font-family:var(--font-ui); font-weight:800; font-size:1.25rem;
  color:var(--white); white-space:nowrap; }
.header-phone:hover .header-phone-num{ color:var(--accent-light); }
.header-cta .btn-primary{ padding:.75rem 1.3rem; font-size:.9375rem; }
/* v5 header steps (the lockup is larger than v4's, so every step moved up):
   >=1220  316px lockup + links + phone + button
   940-1219  280px lockup + links + phone (the hero carries the button)
   761-939   280px lockup + phone + burger sheet (links no longer fit on one row)
   406-760   176px lockup + phone + burger sheet, header not sticky
   <=405     176px lockup + burger sheet (the fixed call bar below carries the phone) */
@media (max-width:1219px){
  .logo img{ width:280px; height:48px; }
  .nav-links{ gap:var(--s-4); }
  .nav-links a{ font-size:.875rem; }
  .header-cta .btn-primary{ display:none; }
}
@media (max-width:939px){
  .nav-toggle{ display:block; order:3; flex-shrink:0; margin-right:-8px; }
  /* empty in-flow shell (links are the fixed sheet) — remove from the row */
  .site-header nav{ position:absolute; margin-left:0; }
  .header-cta{ margin-left:auto; }
  /* burger sheet — driven by aria-expanded (JS-synced) */
  .nav-links{
    display:none; position:fixed; inset:0; z-index:100; background:var(--navy-900);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:var(--s-5); padding:var(--s-6);
    padding-bottom:calc(64px + env(safe-area-inset-bottom));
  }
  /* open state: pin the toggle exactly where it sat closed; draw an X */
  .nav-toggle[aria-expanded="true"]{ position:fixed; top:23px; right:32px; z-index:110; }
  .nav-toggle[aria-expanded="true"] svg{ display:none; }
  .nav-toggle[aria-expanded="true"]::before{ content:"\2715"; display:block; width:26px;
    font-size:1.5rem; line-height:26px; text-align:center; }
  .nav-toggle[aria-expanded="true"] + nav .nav-links{ display:flex; }
  .nav-links a{ font-size:1.75rem; font-weight:700; }
  body.nav-open{ overflow:hidden; }
}
@media (max-width:760px){
  .site-header{ position:static; }
  .nav{ min-height:64px; gap:var(--s-3); }
  .logo img{ width:176px; height:30px; }
  .header-cta{ gap:0; }
  .header-phone-note{ display:none; }
  .header-phone-num{ font-size:1rem; }
  .nav-toggle[aria-expanded="true"]{ top:11px; right:24px; }
}
@media (max-width:405px){
  .header-cta{ display:none; }
  .nav-toggle{ margin-left:auto; }
}

/* == footer == */
.site-footer{ background:var(--navy-950); color:var(--navy-200); border-top:var(--hair-accent);
  padding:var(--s-8) 0 var(--s-6); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1.2fr 1fr 1fr; gap:var(--s-7);
  padding-bottom:var(--s-7); border-bottom:var(--hair-dark); }
.site-footer ul{ list-style:none; }
.site-footer h3{ color:var(--white); font-size:.9375rem; letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:var(--s-4); }
.site-footer ul li{ margin-bottom:var(--s-2); }
.site-footer a{ color:var(--navy-200); text-decoration:none; }
.site-footer a:hover{ color:var(--accent-light); }
.footer-brand-col img{ margin-bottom:var(--s-4); }
.footer-brand-col p{ font-size:.9375rem; line-height:1.8; }
.footer-disclaimer{ padding-top:var(--s-5); }
.footer-disclaimer p{ font-size:.8125rem; line-height:1.55; color:var(--navy-200);
  max-width:900px; margin-bottom:var(--s-3); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--s-6); } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* == mobile call bar (static; body reserves space ≤760px) == */
.mobile-cta-bar{ display:none; }
@media (max-width:760px){
  /* reserve exactly the bar's height — the fixed bar covers this strip 1:1.
     Every band paints its own bg, so navy here keeps the strip invisible. */
  body{ padding-bottom:calc(52px + env(safe-area-inset-bottom)); background:var(--navy-950); }
  .mobile-cta-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:105;
    min-height:52px; padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -2px 12px rgba(0,3,60,.25);
  }
  .mobile-cta-bar a{
    flex:1; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-ui); font-weight:700; font-size:.9375rem;
    text-decoration:none; min-height:52px; padding:0 var(--s-3); text-align:center;
  }
  .mcb-call{ background:var(--urgent); color:var(--white); }
  .mcb-review{ background:var(--accent); color:var(--navy-900); }
}

/* == shared components == */
.container{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s-6); }
.container-narrow{ max-width:var(--maxw-narrow); margin-inline:auto; padding-inline:var(--s-6); }
@media (max-width:760px){ .container,.container-narrow{ padding-inline:var(--s-5); } }
.section{ padding-block:var(--sect-pad); }
.bg-white{ background:var(--white); }
.bg-paper{ background:var(--paper); }
.bg-ivory{ background:var(--ivory); }
.bg-navy{ background:var(--navy-900); }
.section-head{ max-width:var(--maxw-narrow); margin-bottom:var(--s-8); }
.section-head.centered{ margin-inline:auto; text-align:center; }
.section-head .lede{ margin-top:var(--s-4); }
.section-head .t-small{ margin-top:var(--s-4); }
.section-cta{ margin-top:var(--s-8); text-align:center; }
@media (max-width:760px){
  .section-head{ margin-bottom:var(--s-6); }
  .section-cta{ margin-top:var(--s-6); }
}

/* cards */
.card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--s-6); text-decoration:none; color:var(--ink); display:block;
  transition:box-shadow .15s ease,transform .12s ease;
}
a.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); color:var(--ink); }
/* equal-height card rows: pin the "Learn more" arrow to the card bottom */
a.card{ display:flex; flex-direction:column; }
a.card .btn-quiet{ margin-top:auto; }
.card h3{ margin-bottom:var(--s-3); }
.card p{ color:var(--ink-soft); font-size:1rem; margin-bottom:var(--s-4); }
.card .btn-quiet{ font-size:.9375rem; }
.card-featured{ border-top:3px solid var(--accent-dark); padding-top:calc(var(--s-6) + 2px); }
.card-tag{ display:inline-block; font-family:var(--font-ui); font-weight:600; font-size:.6875rem;
  line-height:1; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-dark);
  margin-bottom:var(--s-4); }
.card-icon{ color:var(--navy-900); padding-bottom:var(--s-4); margin-bottom:var(--s-4);
  position:relative; }
.card-icon::after{ content:""; position:absolute; left:0; bottom:0; width:44px;
  border-top:var(--hair-accent); }
.card-icon svg{ width:38px; height:38px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); }
@media (max-width:980px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .grid-3,.grid-2{ grid-template-columns:1fr; } }
/* mobile: tighter link-card padding — no dead space after "Learn more" at 390px */
@media (max-width:640px){
  a.card{ padding:var(--s-5); }
  a.card-featured{ padding-top:calc(var(--s-5) + 2px); }
}
/* icons: on navy, lift primary + swap the light-tuned accent-dark stroke */
.bg-navy .icon{ color:var(--navy-200); }
.bg-navy .icon [stroke="#2a5298"]{ stroke:var(--accent-light); }

/* checklist: accent check markers (prose lists, sidebar cards) */
.checklist li{ position:relative; padding-left:1.6em; }
.checklist li + li{ margin-top:var(--s-3); }
.checklist li::before{ content:"\2713"; position:absolute; left:0; top:0;
  font-family:var(--font-ui); font-weight:700; color:var(--accent-dark); }

/* spec-table: label-left / bold-value-right, accent hairline rules */
.spec-table{ border-top:var(--hair-accent); }
.spec-row{ display:grid; grid-template-columns:230px 1fr; gap:var(--s-5);
  padding:var(--s-5) 0; border-bottom:var(--hair-accent); }
.spec-label{ font-family:var(--font-ui); font-weight:700; font-size:1.0625rem;
  color:var(--navy-900); line-height:1.35; }
.spec-label .icon{ width:26px; height:26px; margin-bottom:var(--s-2); color:var(--navy-900); }
.spec-value{ color:var(--ink-soft); font-size:1rem; }
.spec-value strong{ color:var(--ink); }
@media (max-width:640px){ .spec-row{ grid-template-columns:1fr; gap:var(--s-2); } }
/* spec-table on navy bands (banding rhythm — e.g. process "we handle / you do") */
.bg-navy .spec-table .spec-label{ color:var(--white); }
.bg-navy .spec-table .spec-value{ color:var(--navy-200); }
.bg-navy .spec-table .spec-value strong{ color:var(--white); }
.bg-navy .spec-label .icon{ color:var(--navy-200); }

/* steps (numbered, navy band) */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); position:relative;
  counter-reset:step; }
.steps::before{ content:""; position:absolute; top:84px; left:8%; right:8%;
  border-top:var(--hair-accent); }
.step{ background:var(--navy-800); border-radius:var(--r-md); padding:var(--s-6);
  position:relative; z-index:1; }
.step-num{ font-family:var(--font-display); font-size:var(--t-numeral); line-height:1;
  color:var(--accent); display:block; margin-bottom:var(--s-4); }
.step h3{ color:var(--white); margin-bottom:var(--s-3); }
.step p{ color:var(--navy-200); font-size:1rem; }
@media (max-width:900px){
  .steps{ grid-template-columns:1fr; }
  .steps::before{ display:none; }
}

/* skyline line-art trim on navy bands */
.has-skyline{ position:relative; overflow:hidden; }
.skyline{ position:absolute; left:0; right:0; bottom:0; width:100%; height:auto;
  opacity:.25; pointer-events:none; }
.has-skyline > .container{ position:relative; z-index:1; }

/* faq (native details) */
.faq-item{ border-bottom:var(--hair-accent); }
.faq-item summary{
  list-style:none; display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s-4); cursor:pointer; padding:var(--s-5) 0;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary h3{ font-size:1.125rem; }
.faq-item summary::after{ content:"+"; font-family:var(--font-display); font-size:1.75rem;
  line-height:1; color:var(--accent-dark); flex-shrink:0; }
.faq-item[open] summary::after{ content:"\2013"; }
.faq-body{ padding:0 0 var(--s-5); color:var(--ink-soft); max-width:64ch; }
.faq-body > * + *{ margin-top:var(--s-3); }
.faq-list li{ position:relative; padding-left:1.1em; }
.faq-list li + li{ margin-top:var(--s-2); }
.faq-list li::before{ content:"\2022"; position:absolute; left:0; color:var(--accent-dark); }

/* breadcrumbs */
.breadcrumbs{ margin-bottom:var(--s-5); }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; gap:var(--s-2); font-family:var(--font-ui);
  font-weight:600; font-size:.8125rem; letter-spacing:.04em; }
.breadcrumbs li:not(:last-child)::after{ content:"/"; margin-left:var(--s-2); color:var(--accent); }
.breadcrumbs a{ color:var(--navy-200); text-decoration:none; }
.breadcrumbs a:hover{ color:var(--accent-light); }
.breadcrumbs [aria-current="page"]{ color:var(--white); }

/* interior hero (all interior pages) — capped ≤~55vh desktop per DESIGN-BRIEF §5:
   content must crest the 1440×900 fold */
.interior-hero{ background:linear-gradient(180deg,var(--navy-800),var(--navy-900));
  padding:var(--s-7) 0 var(--s-8); position:relative; overflow:hidden; }
.interior-hero .eyebrow{ color:var(--accent); }
/* wide measure so H1 sentences break only at authored <br> points at 1440 */
.interior-hero h1{ color:var(--white); font-size:var(--t-display); line-height:1.05;
  max-width:30ch; }
.interior-hero h1 .tone{ color:var(--accent); }
.interior-hero .lede{ color:var(--navy-200); max-width:56ch; margin-top:var(--s-4); }
.interior-hero .cta-row{ display:flex; align-items:center; gap:var(--s-5); flex-wrap:wrap;
  margin-top:var(--s-6); }
@media (max-width:760px){
  .interior-hero{ padding:var(--s-6) 0 var(--s-7); }
  .interior-hero .cta-row{ margin-top:var(--s-5); }
}
/* ≤400px: keep the hero eyebrow to one line (no lone-word wrap) */
@media (max-width:400px){
  .interior-hero .eyebrow{ font-size:.75rem; letter-spacing:.13em; }
}

/* prose: long-form article rhythm (practice pages, about) */
.prose > * + *{ margin-top:var(--s-5); }
.prose .section-head:not(:first-child){ margin-top:var(--s-8); }
.prose > h2{ font-size:clamp(1.6rem,2.6vw,2.125rem); line-height:1.15; margin-top:var(--s-7); }
.prose > .eyebrow{ margin-top:var(--s-7); margin-bottom:0; }
.prose > .eyebrow + h2{ margin-top:var(--s-3); }
.byline{ font-family:var(--font-ui); font-weight:600; font-size:.8125rem; color:var(--ink-soft);
  padding-bottom:var(--s-4); border-bottom:var(--hair-accent); }
.note{ border-left:3px solid var(--accent-dark); }

/* practice article: prose + sticky sidebar intake */
.article-grid{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:var(--s-8);
  align-items:start; }
.article-grid .prose{ max-width:68ch; }
.article-aside{ align-self:start; position:sticky; top:calc(var(--header-h) + var(--s-5));
  display:grid; gap:var(--s-5); }
.aside-phone{ display:block; margin-block:var(--s-4); }
.side-urgency{ text-align:center; }
@media (max-width:980px){
  .article-grid{ grid-template-columns:1fr; gap:var(--s-6); }
  .article-aside{ position:static; }
}

/* mid-article cta: compact band */
.mid-cta{ padding-block:5rem; }
.mid-cta .section-head{ margin-bottom:var(--s-5); }
.mid-cta .section-cta{ margin-top:var(--s-2); }

/* map band set-piece */
.map-grid{ display:grid; grid-template-columns:minmax(280px,420px) 1fr; gap:var(--s-8);
  align-items:center; }
.map-grid img{ width:100%; }
.chips{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-5); }
.chips li{
  font-family:var(--font-ui); font-weight:600; font-size:.875rem; color:var(--navy-200);
  border:var(--hair-accent); border-radius:var(--r-pill); padding:.45rem .9rem; line-height:1;
}
/* linked chips (faq jump-nav): the anchor fills the chip; 44px hit target */
.chips li:has(> a){ padding:0; }
.chips li a{ display:flex; align-items:center; min-height:44px; padding:0 .9rem;
  color:inherit; text-decoration:none; border-radius:var(--r-pill); }
.chips li a:hover{ color:var(--accent-light); }
@media (max-width:860px){ .map-grid{ grid-template-columns:1fr; gap:var(--s-6); }
  .map-grid img{ max-width:340px; margin-inline:auto; } }

/* attorney monogram placeholder cards */
.attorney-card{ background:var(--navy-800); border-radius:var(--r-md); padding:var(--s-4);
  box-shadow:var(--shadow-lg); }
.portrait{ aspect-ratio:4/5; border:1px solid rgba(100,146,205,.6); border-radius:calc(var(--r-md) - 6px);
  display:flex; align-items:center; justify-content:center; position:relative; }
.portrait::after{ content:""; position:absolute; inset:8px; border:var(--hair-accent);
  border-radius:calc(var(--r-md) - 10px); }
.monogram{ font-family:var(--font-display); font-size:3.5rem; color:var(--accent); letter-spacing:.04em; }
/* real headshots (v5): photo fills the 4:5 frame; the inset hairline frame is dropped */
.portrait.has-photo{ border:0; overflow:hidden; background:var(--navy-700); }
.portrait.has-photo::after{ display:none; }
.portrait.has-photo picture,.portrait.has-photo img{ width:100%; height:100%; }
.portrait.has-photo img{ object-fit:cover; object-position:center top; }
.attorney-card h3{ color:var(--white); margin:var(--s-4) 0 2px; font-size:1.25rem; }
.attorney-role{ font-family:var(--font-ui); font-weight:600; font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.attorney-bio{ font-size:.875rem; color:var(--navy-200); margin-top:var(--s-3); }

/* == page: home == */
/* hero */
.hero{ position:relative; background:var(--navy-900); }
.hero-media{ position:absolute; inset:0; overflow:hidden; }
.hero-media picture{ height:100%; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
/* v5: the photo ships at its natural brightness — there is NO scrim over the image.
   Legibility comes from a navy glass panel behind the copy (white text stays above
   10:1, the sky accent above 5:1, whatever the photo does behind it). The form card
   is already opaque. */
.hero .container{ position:relative; z-index:2; display:grid;
  grid-template-columns:58fr 42fr; gap:var(--s-7); align-items:center;
  padding-top:var(--s-8); padding-bottom:var(--s-8); }
.hero-copy{ background:rgba(0,3,60,.8); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:clamp(1.5rem,3.2vw,3rem);
  -webkit-backdrop-filter:blur(10px) saturate(1.15); backdrop-filter:blur(10px) saturate(1.15); }
/* the H1 is the keyword line, set as the eyebrow; the tagline is the visual headline */
.hero h1.eyebrow{ font-size:.8125rem; line-height:1.6; letter-spacing:.18em; text-wrap:initial;
  color:var(--accent); margin-bottom:var(--s-4); }
.hero .eyebrow .eyebrow-sep{ display:none; }
.hero .eyebrow .eyebrow-seg{ display:block; }
.hero .hero-headline{ font-family:var(--font-display); font-weight:400; color:var(--white);
  font-size:clamp(1.8rem,4vw,3.3rem); line-height:1.04; text-wrap:balance; }
.hero .hero-headline .tone{ color:var(--accent); }
.hero .lede{ color:var(--navy-200); margin-top:var(--s-5); max-width:48ch; }
.hero-points{ margin-top:var(--s-6); display:grid; gap:var(--s-3); }
.hero-points li{ display:flex; align-items:center; gap:var(--s-3); color:var(--white);
  font-family:var(--font-ui); font-weight:600; font-size:1rem; }
.hero-points svg{ width:20px; height:20px; color:var(--accent); flex-shrink:0; }
.hero-phone{ margin-top:var(--s-6); }
.hero-phone .phone-link{ color:var(--white); font-weight:600; }
.hero-phone .phone-link:hover{ color:var(--navy-200); }
.hero-phone .phone-link svg{ color:var(--accent); }
.hero-phone .num{ color:var(--accent); font-weight:800; }
.hero-form{ position:relative; z-index:5; }
/* seam-straddle: card overhangs into the credential bar on desktop */
@media (min-width:981px){
  .hero .container{ padding-bottom:0; align-items:start; }
  .hero-copy{ margin-bottom:var(--s-8); }
  .hero-form{ align-self:end; margin-bottom:-3rem; }
}
@media (max-width:980px){
  .hero .container{ grid-template-columns:1fr; gap:var(--s-6);
    padding-top:var(--s-7); padding-bottom:var(--s-7); }
}

/* credential bar */
.cred-bar{ background:var(--white); border-top:var(--hair-accent); border-bottom:var(--hair-accent);
  padding:var(--s-5) 0; }
/* clearance for the hero form card overhanging the seam */
@media (min-width:981px){ .cred-bar{ padding-top:7rem; } }
.cred-bar ul{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s-3) var(--s-7); }
.cred-bar li{ font-family:var(--font-ui); font-weight:600; font-size:.8125rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--navy-600); text-align:center; }

/* practice inline links row */
.also-links{ text-align:center; margin-top:var(--s-7); color:var(--ink-soft); }

/* ivory promise set-piece: ONE axis — every element centered in the narrow container */
.promise .container-narrow{ text-align:center; }
.promise .display{ margin:0 auto var(--s-5); max-width:16ch; }
.promise p{ max-width:60ch; margin-inline:auto; }
.promise p + p{ margin-top:var(--s-4); }
.promise .btn-primary{ margin-top:var(--s-6); }

/* why-taft split */
.why-grid{ display:grid; grid-template-columns:minmax(0,44fr) 56fr; gap:var(--s-8);
  align-items:center; }
.why-grid > picture img{ border-radius:var(--r-lg); box-shadow:var(--shadow-md); width:100%; }
.why-grid .section-head{ margin-bottom:var(--s-6); }
@media (max-width:900px){ .why-grid{ grid-template-columns:1fr; gap:var(--s-6); } }

/* process band: extra room below for the attorney duo pull-up */
.sect-process{ padding-bottom:calc(var(--sect-pad) + 3.5rem); }

/* attorneys: duo straddles the navy→paper seam above */
.attorneys-grid{ display:grid; grid-template-columns:52fr 48fr; gap:var(--s-8); align-items:start; }
.attorneys-grid .section-head{ margin-bottom:var(--s-6); }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); }
/* softer lift for the cards straddling the navy half of the seam */
.duo .attorney-card{ box-shadow:0 16px 44px rgba(0,3,60,.18); }
@media (min-width:901px){ .duo{ margin-top:calc(-1 * (var(--sect-pad) + 6.5rem)); } }
@media (max-width:900px){
  .attorneys-grid{ grid-template-columns:1fr; gap:var(--s-6); }
  .sect-process{ padding-bottom:var(--sect-pad); }
}
@media (max-width:480px){
  .duo{ grid-template-columns:1fr; }
  /* cap the monogram cards — full-width 4:5 portraits were ~800px of empty navy */
  .duo .portrait:not(.has-photo){ aspect-ratio:auto; height:270px; }
}

/* faq teaser + urgency strip */
.urgency{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-6); align-items:center;
  margin-top:var(--s-8); padding-top:var(--s-7); border-top:var(--hair-accent); }
.urgency-stat{ align-self:start; text-align:center; background:var(--white);
  border:var(--hair-accent); border-radius:var(--r-md); padding:var(--s-5) var(--s-6); }
.urgency-stat .numeral{ display:block; font-size:clamp(3.75rem,6vw,5rem); }
.urgency-unit{ display:block; font-family:var(--font-ui); font-weight:600; font-size:.75rem;
  line-height:1; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  margin-top:var(--s-3); white-space:nowrap; }
.urgency h3{ margin-bottom:var(--s-2); }
.urgency p{ color:var(--ink-soft); font-size:1rem; }
.urgency .t-legal{ margin-top:var(--s-2); }
@media (max-width:640px){ .urgency{ grid-template-columns:1fr; gap:var(--s-5); }
  .urgency-stat{ justify-self:center; min-width:180px; } }

/* final CTA bookend */
.final-cta .section-head{ margin-bottom:var(--s-6); }
.final-cta .form-card{ max-width:560px; margin-inline:auto; text-align:left; }
.final-cta .alt-phone{ margin-top:var(--s-6); text-align:center; }
.final-cta .alt-phone .btn-ghost{ display:inline-flex; }

/* == page: practice-areas == */
.pa-featured{ margin-bottom:var(--s-5); }
.pa-rest{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .pa-rest{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .pa-rest{ grid-template-columns:1fr; } }

/* == page: process == */
/* vertical timeline (§5.5): continuous 1px accent hairline spine, DM Serif accent
   numerals anchored ON the spine (bg gap breaks the line behind each), content in
   bordered+shadowed cards. ≥900px: spine centered, cards alternate left/right.
   Below: spine inset left, single column. Use on a .section.bg-paper band —
   .tl-num's background matches --paper.
   Markup: <ol class="timeline"><li class="tl-step"><span class="tl-num"
   aria-hidden="true">1</span><div class="tl-card"><h3>…</h3><p>…</p></div></li>… */
.timeline{ position:relative; max-width:1000px; margin-inline:auto; }
.timeline::before{ content:""; position:absolute; top:0; bottom:0; left:27px; width:1px;
  background:rgba(100,146,205,.45); }
.tl-step{ position:relative; padding:0 0 var(--s-6) 72px; }
.tl-step:last-child{ padding-bottom:0; }
.tl-num{ position:absolute; left:27px; top:0; transform:translateX(-50%); z-index:1;
  font-family:var(--font-display); font-size:2.25rem; line-height:1; color:var(--accent-dark);
  background:var(--paper); padding:var(--s-2) var(--s-2) var(--s-3); text-align:center;
  min-width:40px; }
.tl-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--s-6); box-shadow:var(--shadow-sm); }
.tl-card h3{ margin-bottom:var(--s-3); }
.tl-card p{ color:var(--ink-soft); font-size:1rem; }
.tl-card > * + *{ margin-top:var(--s-3); }
@media (min-width:900px){
  .timeline::before{ left:50%; }
  .tl-step{ width:calc(50% - 60px); padding:0 0 var(--s-7); }
  .tl-step:last-child{ padding-bottom:0; }
  .tl-step:nth-child(odd){ margin-right:auto; }
  .tl-step:nth-child(even){ margin-left:auto; }
  .tl-num{ font-size:clamp(2.5rem,3.5vw,3.25rem); min-width:52px; }
  .tl-step:nth-child(odd) .tl-num{ left:calc(100% + 60px); }
  .tl-step:nth-child(even) .tl-num{ left:-60px; }
}

/* == page: about == */
.pullquote{ margin-block:var(--s-7); }
.pullquote blockquote p{ font-family:var(--font-display); }
.pullquote figcaption{ margin-top:var(--s-4); }
.profile-body .lede{ margin-bottom:var(--s-5); }
.profile-body > p:not(.lede){ color:var(--ink-soft); font-size:1rem; margin-bottom:var(--s-4); }
.profile-body > p.t-legal{ font-size:.8125rem; }
.profile-body > .spec-table{ margin-top:var(--s-5); }
/* team photograph — opens the firm-story band (v5) */
.team-photo{ margin-bottom:var(--s-8); }
.team-photo img{ width:100%; border-radius:var(--r-lg); box-shadow:var(--shadow-md); }
.team-photo figcaption{ margin-top:var(--s-3); font-family:var(--font-ui); font-weight:600; font-size:.8125rem;
  letter-spacing:.04em; color:var(--ink-soft); text-align:center; }
/* paralegal profile row + the remaining compact card beneath it */
.team-grid-more{ margin-top:var(--s-7); }
.attorney-card h3 a{ color:inherit; text-decoration:underline; text-decoration-thickness:1px;
  text-decoration-color:rgba(255,255,255,.45); text-underline-offset:4px; }
.attorney-card h3 a:hover{ color:var(--accent-light); text-decoration-color:currentColor; }
.profiles .spec-row{ grid-template-columns:260px minmax(0,1fr); }
.profile-body .spec-row{ grid-template-columns:160px minmax(0,1fr); }
@media (max-width:900px){ .profile-body .spec-row{ grid-template-columns:1fr; gap:var(--s-2); } }
/* nested credentials table: drop its last hairline — the outer .profiles row
   already rules the junction (kills the phantom double-hairline row) */
.profile .spec-table .spec-row:last-child{ border-bottom:0; padding-bottom:0; }
@media (max-width:640px){
  .profiles .spec-row{ grid-template-columns:1fr; }
  .profile .portrait:not(.has-photo){ aspect-ratio:auto; height:270px; }
}
.values{ grid-template-columns:repeat(3,1fr); }
.values h3{ font-family:var(--font-display); font-weight:400; font-size:var(--t-h2); line-height:1.1; letter-spacing:0; }
.values li p{ margin-top:var(--s-3); }
@media (max-width:640px){ .values{ grid-template-columns:1fr; } }
/* support-team cards (paralegals) — compact centered pair */
.team-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,300px));
  justify-content:center; gap:var(--s-5); }
@media (max-width:640px){ .team-grid{ grid-template-columns:minmax(0,320px); } }
@media (max-width:480px){ .team-grid .portrait:not(.has-photo){ aspect-ratio:auto; height:270px; } }

/* == page: contact == */
.contact-grid{ grid-template-columns:minmax(0,60fr) minmax(0,40fr); gap:var(--s-8);
  align-items:start; }
.contact-grid .spec-row{ grid-template-columns:1fr; gap:var(--s-2); }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:var(--s-6); } }
.contact-reach p + p{ margin-top:var(--s-4); }
/* desktop: form card rides sticky beside the longer rail — no dead zone where the
   left column ends early (column stretches so sticky has room to travel) */
@media (min-width:901px){
  .contact-grid > div:first-child{ align-self:stretch; }
  .contact-grid .form-card{ position:sticky; top:calc(var(--header-h) + var(--s-5)); }
}

/* == page: 404 == */
.err-hero{ min-height:calc(100svh - var(--header-h)); display:grid; align-content:center; }

/* == a11y / motion == */
/* two-tone focus ring: steel blue on light bands, light sky on navy bands */
:focus-visible{ outline:3px solid var(--accent-dark); outline-offset:2px; }
.bg-navy :focus-visible,.hero :focus-visible,.interior-hero :focus-visible,.site-header :focus-visible,
.site-footer :focus-visible,.attorney-card :focus-visible,
.nav-links :focus-visible{ outline-color:var(--accent-light); }
.form-card :focus-visible{ outline-color:var(--accent-dark); }
/* edge-to-edge call bar: draw the ring inside each half */
.mobile-cta-bar a:focus-visible{ outline:3px solid var(--white); outline-offset:-6px; }
.mobile-cta-bar .mcb-review:focus-visible{ outline-color:var(--navy-900); }
.skip-link:focus-visible{ outline-color:var(--accent-light); outline-offset:-4px; }
.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; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}

/* == v5 refinements == */
/* profile rows: the portrait card hugs its content and rides beside the long bio */
.profile > .attorney-card{ align-self:start; }
@media (min-width:761px) and (min-height:540px){ .profile > .attorney-card{ position:sticky; top:calc(var(--header-h) + var(--s-5)); } }
/* interior heroes are navy whether or not the section also carries .bg-navy */
.interior-hero .phone-link{ color:var(--accent); }
.interior-hero .phone-link:hover{ color:var(--accent-light); }
/* contact page keeps its white sentence with only the number in the accent */
.interior-hero .hero-phone .phone-link{ color:var(--white); }
.interior-hero .hero-phone .phone-link:hover{ color:var(--navy-200); }
/* phones: keep each hero eyebrow segment on one line */
@media (max-width:480px){ .hero h1.eyebrow{ font-size:.6875rem; letter-spacing:.12em; } }
/* phones: breathing room between a portrait card and the bio that follows it */
@media (max-width:640px){ .profiles .spec-row.profile{ gap:var(--s-5); } }
/* phones: the hero call button fills the panel so its label stays on one line */
@media (max-width:480px){ .hero-phone .btn{ display:flex; width:100%; padding-inline:1rem; } }
@media (max-width:349px){ .hero h1.eyebrow{ letter-spacing:.02em; } }
/* a single remaining support-team card sits centred (revert when a second card joins it) */
.team-grid.team-grid-more{ grid-template-columns:minmax(0,300px); }
@media (max-width:640px){ .team-grid.team-grid-more{ grid-template-columns:minmax(0,320px); } }