/* Self-hosted fonts (formerly Google Fonts). Variable woff2, latin + latin-ext,
   display:swap. Files in /fonts/. Mirrored in index.html inline critical CSS. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/fraunces-latinext-v3.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/fraunces-latin-v3.woff2) format('woff2');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:'Hanken Grotesk';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/hankengrotesk-latinext-v3.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/hankengrotesk-latin-v3.woff2) format('woff2');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}
/* Metric-matched fallback for the body font. Arial is 0.5% narrower than Hanken
   Grotesk over this site's copy, and that was enough to wrap the hero paragraph to
   4 lines pre-swap vs 5 lines after, moving the photo 29px and costing ~0.08 CLS at
   the 412px viewport PSI emulates. size-adjust makes the pre-swap text occupy the
   same space, so nothing moves when the real font lands. Measured 2026-08-16: the
   hero shift goes to 0 at 320-480px (was 58px at 375, 29px at 412) and no width
   regresses. It only affects the paint BEFORE Hanken loads — once loaded, Hanken
   wins the stack and rendering is unchanged. If local() resolves to nothing the
   face just fails and the stack falls through, which is today's behaviour. */
@font-face{font-family:'Hanken Fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica'),local('Liberation Sans'),local('Roboto');size-adjust:100.5%}
/* Lines 1–301 (through the end of the max-width:320px block) mirror the inline
   critical CSS in index.html verbatim, for homepage first paint. KEEP THE TWO IN
   SYNC — edit both with identical values, and update this line range if the
   mirrored region grows. Last re-derived from this file 2026-07-26; they had
   drifted in four places, including a .links a padding that put the nav links
   back under 44px at first paint. Range corrected 2026-08-05 (it read 258 while
   the region actually ended at 292 — the count had drifted on its own). */
*{box-sizing:border-box;margin:0;padding:0}
:root{
--navy:#0c1f4a;
--navy-dark:#0f264e;
--navy-mid:#132d64;
--navy-darker:#0a1838;
--gold:#e7b94e;
--gold-light:#f0c55e;
--gold-dark:#946a16;
--gold-hover:#c79a3a;
--text-body:#2a4370;
--text-secondary:#5f6a7d;
--text-muted:#c2cce4;
--text-footer:#9fabcb;
--ink:#1e2733;
--surface-card:#f8f9fb;
--white:#fff;
--border:#e5e8ed;
--border-light:#d8dce5;
}
html{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
body{font-family:'Hanken Grotesk','Hanken Fallback',-apple-system,sans-serif;background:var(--white);color:var(--ink);font-weight:400;line-height:1.65;min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}
/* Fraunces display type — family + optical-axis fix shared by all headings + display numerals */
h1,h2,h3,.brand,.cap .nm,.stat-slide .num,.stats-lead .lead-statement{font-family:'Fraunces',Georgia,serif;font-optical-sizing:auto;font-variation-settings:'SOFT' 0,'WONK' 0;text-wrap:balance}
/* Shared gold-underline inline links (prose / bio / closing) */
.prose a,.bio-text a,.closing a.inline{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:1px}
.prose a:hover,.bio-text a:hover,.closing a.inline:hover{color:var(--navy-darker)}
/* Focus rings: navy on light backgrounds, gold only on navy. Gold measures
   1.83:1 on white and 1.74:1 on --surface-card, both under WCAG 1.4.11's 3:1 for
   a non-text state indicator; --navy-mid measures 13.2:1. The outline-offset
   below leaves a light gap, so the ring reads as two-tone against the component.
   Gold rings are correct and MUST STAY where the backdrop is navy (.brand a,
   .links a, .pay-card-featured .pay-btn, .lb-close — all 8.74:1). */
.prose a:focus-visible,.bio-text a:focus-visible,.closing a.inline:focus-visible{outline:2px solid var(--navy-mid);outline-offset:3px;border-radius:2px}
.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:absolute;top:-100px;left:16px;z-index:1000;background:var(--gold);color:var(--navy);padding:12px 20px;border-radius:6px;font-weight:600;font-size:16px;text-decoration:none}
.skip-link:focus{top:16px;outline:2px solid var(--navy);outline-offset:2px}

/* INPUT MODE — touch sizing.
   .footer .ph and .svc-link were measured at 21px and 25px on a phone: both clear
   WCAG 2.2's 24x24 floor (.ph via the in-sentence exemption) but both sat under
   the 44px this project sets for itself everywhere else. .footer .ph is the
   persistent call CTA on all eight pages, so it is the one that mattered. */
@media(pointer:coarse){
  .links a,.links .cta,.btn,.phone,.footer .ph,.svc-link{min-height:44px;display:inline-flex;align-items:center}
  .stats-dashes button,.stats-toggle{min-width:44px;min-height:44px}
}

/* NAV */
.nav{background:var(--navy);padding:16px 28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.brand{font-size:20px;font-weight:400;color:var(--white);letter-spacing:-.2px}
.brand span{color:var(--gold)}
.brand small{display:block;font-size:11px;letter-spacing:1.6px;color:var(--text-footer);margin-top:3px;font-family:'Hanken Grotesk','Hanken Fallback',sans-serif;font-weight:500}
.brand a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.links{font-size:16px;color:var(--text-muted);letter-spacing:.3px}
/* 12px vertical, not 10px: 16px * 1.35 line-height + 20px padding measured 41.6px,
   under the 44px minimum this project targets. 12px lands at 45.6px and matches the
   .cta below exactly, so the row stays optically level.
   Scope note: this is the pointer:fine case only. Real touch devices were already
   covered by the @media(pointer:coarse) block above, which forces min-height:44px.
   The narrower padding in the max-width 375/320 blocks below is therefore fine as-is
   — it only ever applies to a mouse in a narrow window; don't "fix" those to 12px or
   the nav wraps badly at 320px. */
.links a{color:var(--text-muted);text-decoration:none;padding:12px;border-radius:6px;transition:background .15s,color .15s;display:inline-block;font-weight:500;line-height:1.35;cursor:pointer;touch-action:manipulation}
.links a:hover{background:rgba(255,255,255,.08);color:var(--white)}
.links a:not(.cta)[aria-current="page"]{color:var(--gold);text-decoration:underline var(--gold);text-underline-offset:6px;text-decoration-thickness:2px;background:transparent}
.links a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.links .cta{color:var(--navy);font-weight:600;background:var(--gold);padding:12px 20px;border-radius:6px;margin-left:6px;transition:background .15s,transform .1s;display:inline-block;letter-spacing:.1px;cursor:pointer;touch-action:manipulation}
.links .cta:hover{background:var(--gold-light);transform:translateY(-1px)}
.links .cta:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.links .cta:active{transform:translateY(0)}

/* HERO */
.hero{display:flex;align-items:center;gap:36px;padding:60px 28px 44px;max-width:1080px;margin:0 auto;position:relative;overflow:hidden}
/* Georgia map motif. Sized to fit INSIDE the hero (height:96%) so the state
   silhouette reads whole — at the old 142% the outline was cropped away and only
   interior county lines showed, which read as noise rather than as Georgia. The
   single horizontal mask keeps the copy side faint so the H1 stays clean; the old
   vertical gradient was there to hide the crop and would now clip south Georgia.
   Stroke colours live in the asset (subro-images/ga-map.svg), not here.
   The 84%/45%/38% figures are load-bearing, not taste: they keep the map's box
   clear of the .cap caption. --gold-dark on .cap .ti measures only 2.60:1 against
   the silhouette stroke at this opacity, so any overlap there is a WCAG 1.4.3
   failure. Enlarge or re-centre the map and you must re-check that.
   left is 38%, not 50%: the hero's content is asymmetric (copy left, photo right),
   so centring the map on the SECTION pushed 24% of it behind the portrait and cut
   off Georgia's Atlantic coast. 38% clears .frame's left edge. Note this is an
   x-axis-only correction — height and top are untouched, so the caption clearance
   is unchanged in y, and reducing horizontal overlap makes the contrast risk
   strictly safer, never worse. */
.hero-map{position:absolute;left:38%;top:45%;transform:translate(-50%,-50%);height:84%;z-index:0;pointer-events:none;opacity:.82;-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.28) 0%,rgba(0,0,0,.28) 26%,#000 54%,#000 100%);mask-image:linear-gradient(to right,rgba(0,0,0,.28) 0%,rgba(0,0,0,.28) 26%,#000 54%,#000 100%)}
/* Selector is img, not svg: the markup references the file, it is not inlined. */
.hero-map img{display:block;height:100%;width:auto;aspect-ratio:600/660}
.hero .copy,.hero .photo{position:relative;z-index:1}
.copy{flex:1.25;margin-bottom:64px} /* offsets the portrait caption's height so flex centering aligns the copy with the photo, not photo+caption */
.eyebrow{font-size:13px;font-weight:600;color:var(--gold-dark);letter-spacing:.08em;margin-bottom:14px}
h1{font-size:clamp(28px,5vw,40px);font-weight:400;color:var(--navy-dark);line-height:1.12;margin-bottom:16px;letter-spacing:-.5px;text-wrap:balance}
.sub{font-size:17px;color:var(--text-body);line-height:1.7;max-width:60ch}
.actions{display:flex;gap:16px;margin-top:28px;align-items:center;flex-wrap:wrap}
.btn{background:var(--navy);color:var(--white);font-size:16px;font-weight:600;padding:14px 28px;border-radius:7px;text-decoration:none;transition:background .15s,transform .1s;letter-spacing:.2px}
.btn:hover{background:var(--navy-mid);transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--navy-mid);outline-offset:3px}
.btn:active{transform:translateY(0)}
.phone{color:var(--navy-dark);font-size:16px;font-weight:600;text-decoration:none;padding:8px 4px;transition:color .15s}
.phone:hover{color:var(--navy);text-decoration:underline}
.phone:focus-visible{outline:2px solid var(--navy-mid);outline-offset:3px;border-radius:4px}
.photo{flex:.8;min-width:210px}
.frame{border:6px solid var(--white);outline:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 6px 22px rgba(12,31,74,.16)}
.frame img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover}
.cap{text-align:center;margin-top:14px}
.cap .nm{font-size:17px;font-weight:500;color:var(--navy-dark);letter-spacing:-.2px}
.cap .ti{font-size:13px;color:var(--gold-dark);letter-spacing:.5px;font-weight:600}

/* STAT ROTATOR */
.stats{max-width:1080px;margin:0 auto;padding:8px 28px 32px}
/* Proof bar: the lead box carries a fixed positioning statement (the firm replaced
   the old pinned recovery total on 2026-06-29); supporting stats rotate alongside */
.stats-proof{border:1px solid var(--border);border-radius:10px;display:flex;align-items:stretch;overflow:hidden}
.stats-lead{flex:0 0 44%;background:var(--surface-card);border-right:1px solid var(--border);padding:32px 34px;display:flex;flex-direction:column;justify-content:center}
.stats-lead .lead-statement{font-size:clamp(19px,2vw,23px);font-weight:400;color:var(--navy-dark);line-height:1.4;letter-spacing:-.1px}
.stats-rotator{flex:1;min-width:0;padding:32px 28px 26px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.stat-slide .num{font-size:clamp(26px,3vw,38px);font-weight:400;color:var(--navy-dark);line-height:1.05;letter-spacing:-.02em}
.stat-slide .lbl{font-size:15px;color:var(--text-body);line-height:1.5;margin-top:8px}
.stats-dashes{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:22px}
.stats-dashes button{width:26px;height:24px;padding:0;border:0;background:transparent;cursor:pointer;position:relative;line-height:0}
/* Carousel state indicator. Measured on white: the old pair was --border-light
   1.37:1 inactive / --gold 1.83:1 active, with only 1.34:1 between the two — so
   neither the control nor its state cleared WCAG 1.4.11's 3:1.
   Colour alone cannot fix both ends: darkening the inactive dash enough to be
   identifiable (#8b94a5, 3.05:1) necessarily closes the gap to the active one
   (1.59:1). So the state is carried by THICKNESS — 4px vs 2px — and colour only
   reinforces it. --gold-dark (4.85:1) is the accessible member of the gold
   family, the same token the FAQ :target ring uses for the same reason.
   The ::after is absolutely positioned inside a fixed 26x24 button, so changing
   its height cannot reflow siblings — no layout shift on the 3.5s auto-advance.
   Height deliberately snaps rather than transitions; only background animates. */
.stats-dashes button::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26px;height:2px;background:#8b94a5;transition:background .3s}
.stats-dashes button.on::after{background:var(--gold-dark);height:4px}
.stats-dashes button:hover::after{background:var(--text-secondary)}
.stats-dashes button:focus-visible{outline:2px solid var(--navy-mid);outline-offset:3px;border-radius:2px}
.stats-toggle{width:26px;height:24px;padding:0;margin-left:4px;border:0;background:transparent;color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .15s}
.stats-toggle svg{width:14px;height:14px;display:block}
.stats-toggle:hover{color:var(--navy-dark)}
.stats-toggle:focus-visible{outline:2px solid var(--navy-mid);outline-offset:2px;border-radius:2px}
/* no-JS / reduced-motion fallback: all slides visible in a row */
.stats-rotator.static{flex-direction:row;align-items:stretch;text-align:left;padding:0;gap:0}
.stats-rotator.static .stat-slide{flex:1;padding:24px 26px;display:flex;flex-direction:column;justify-content:center}
.stats-rotator.static .stat-slide+.stat-slide{border-left:1px solid var(--border)}
.stats-rotator.static .stat-slide .num{font-size:30px}
.stats-rotator.static .stats-dashes{display:none}
/* JS rotator mode. The incoming slide RISES rather than fades — do not put
   opacity back in this keyframe. axe-core (and therefore Lighthouse/PageSpeed)
   flattens ancestor opacity into the foreground colour before measuring, so an
   opacity:0->1 fade made .num/.lbl measure as low as 1:1 for the first ~300ms of
   every 3.5s auto-advance; the contrast audit failed whenever it happened to
   sample the DOM inside that window, naming whichever slide was mid-fade. The
   colours are fine on their own (.lbl is 9.8:1 on white). Transform never
   touches computed colour, so contrast holds for the whole transition, and
   transform-only motion is excluded from CLS. Reduced motion is already handled
   by the global animation-duration killswitch below. */
.stats-rotator.live .stat-slide{display:none}
.stats-rotator.live .stat-slide.on{display:block;animation:statrise .45s ease}
@keyframes statrise{from{transform:translateY(6px)}to{transform:translateY(0)}}

/* SERVICES */
.services{max-width:1080px;margin:0 auto;padding:0 28px 8px}
.services h2{font-size:30px;font-weight:500;color:var(--navy-dark);margin-bottom:6px;letter-spacing:-.3px}
.services .lead{font-size:16px;color:var(--text-body);margin-bottom:28px;max-width:60ch}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.card{background:var(--surface-card);border-radius:10px;padding:28px 26px;display:flex;flex-direction:column}
.card h3{font-size:22px;font-weight:500;color:var(--navy-dark);margin-bottom:12px;line-height:1.2}
.card p{font-size:16px;color:var(--text-body);line-height:1.65;flex:1;margin-bottom:20px;text-wrap:pretty}
.card-featured{background:var(--surface-card);border-radius:10px;padding:32px 30px;display:flex;flex-direction:column;grid-column:1/-1}
.card-featured h3{font-size:26px;font-weight:500;color:var(--navy-dark);margin-bottom:12px;line-height:1.15;letter-spacing:-.3px}
.card-featured p{font-size:16px;color:var(--text-body);line-height:1.7;max-width:62ch;margin-bottom:20px;text-wrap:pretty}
/* "More on…" card / closing links (shared across .card, .card-featured, .closing) */
.svc-link{font-size:15px;font-weight:600;color:var(--navy);text-decoration:none;letter-spacing:.2px}
.svc-link span{border-bottom:2px solid var(--gold);padding-bottom:3px}
.svc-link:hover{color:var(--navy-darker)}
.svc-link:focus-visible{outline:2px solid var(--navy-mid);outline-offset:3px;border-radius:2px}

/* CLOSING TEXT */
.closing{max-width:1080px;margin:0 auto;padding:44px 28px 52px}
.closing-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:center}
.closing p{font-size:16px;color:var(--text-body);line-height:1.75;max-width:56ch;margin-bottom:18px;text-wrap:pretty}
.closing-links{display:flex;flex-wrap:wrap;gap:28px;align-items:center}
.partners{background:var(--navy);border-radius:10px;padding:30px 32px}
.partners .partners-h{font-size:18px;font-weight:500;color:var(--white);margin-bottom:10px;line-height:1.3}
.partners p{font-size:15px;color:var(--text-muted);line-height:1.65}

/* FOOTER */
.footer{background:var(--navy);color:var(--text-footer);padding:28px;text-align:center;font-size:14px;letter-spacing:.3px}
.footer .lic{display:block;margin-bottom:10px;font-weight:500}
.footer .ph{color:var(--gold);font-weight:600;text-decoration:none;font-size:16px}
.footer .ph:hover{text-decoration:underline}
.footer .ph:focus-visible{outline:2px solid var(--white);outline-offset:3px;border-radius:4px}

/* REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* Anchor jumps glide instead of teleporting, so an in-page jump reads as
   scrolling rather than a page load. Opt-in only, so reduced motion is honoured. */
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
:target{scroll-margin-top:24px}

/* RESPONSIVE */
@media(min-width:1440px){
  .hero,.services,.closing{max-width:1200px}
  .sub{font-size:18px}
}
@media(max-width:768px){
  .hero{flex-direction:column;gap:28px;padding:44px 20px 36px}
  /* Mobile: the stacked hero leaves no clear area — the portrait is opaque from
     ~45% down and text runs the rest — so the map becomes a watermark behind the
     copy instead of a fragment buried under the CTA. Constrained by WIDTH (height
     sizing overflowed the viewport and cropped both coasts) and top-anchored so
     the whole silhouette clears the photo. Mask removed: it cropped the shape,
     and a partial Georgia reads as smudges rather than as a state.
     max-width is load-bearing: a pure percentage grows with the breakpoint, and
     at 768px 68% produced a 522x574 map whose top 82px was cut off by
     .hero{overflow:hidden}. The px cap stops the map outgrowing the hero as the
     viewport widens toward the breakpoint; it is inert at 390 and below. */
  .hero-map{left:50%;top:26%;height:auto;width:68%;max-width:300px;opacity:.38;-webkit-mask-image:none;mask-image:none}
  .hero-map img{width:100%;height:auto}
  .copy{text-align:center;margin-bottom:0}
  .actions{justify-content:center}
  .photo{max-width:280px}
  .services,.closing{padding:0 20px 36px}
  .stats{padding:0 20px 28px}
  .stats-proof{flex-direction:column}
  .stats-lead{flex:none;border-right:0;border-bottom:1px solid var(--border);padding:24px 22px;text-align:center;align-items:center}
  /* min-height pins the rotator to its tallest slide. Stacking .stats-proof into
     a column removes the .stats-lead height governor that keeps desktop stable, so
     slide 3's label (which wraps to an extra line) made the rotator 150px -> 172px
     and jogged every section below it 23px on each 3.5s auto-advance. 172px is the
     measured ceiling: all three slides are 172 at 320, and slide 3 is the only one
     that reaches it at 390. Re-measure if any slide's label text changes. */
  .stats-rotator{padding:26px 20px 20px;min-height:172px}
  .stats-rotator.static{flex-direction:column}
  .stats-rotator.static .stat-slide{padding:18px 22px}
  .stats-rotator.static .stat-slide+.stat-slide{border-left:0;border-top:1px solid var(--border)}
  .services h2{font-size:24px}
  .services-grid{grid-template-columns:1fr;gap:16px}
  .closing-grid{grid-template-columns:1fr;gap:28px}
  .card{padding:24px 22px}
  .card h3{font-size:20px}
  .nav{gap:12px}
  .links{font-size:15px}
  .links a{padding:9px 10px}
  .links .cta{padding:10px 16px}
}
@media(max-width:375px){
  .nav{flex-direction:column;align-items:flex-start;padding:14px 16px}
  .brand{font-size:17px}
  .links{font-size:14px;display:flex;flex-wrap:wrap;gap:4px;letter-spacing:.1px}
  .links a{padding:10px 10px}
  .links .cta{padding:12px 16px;margin-left:0;margin-top:4px}
  h1{font-size:24px;letter-spacing:-.3px}
  .sub{font-size:15px}
  .btn{font-size:15px;padding:12px 22px}
  .services,.closing{padding:0 14px 32px}
  .services h2{font-size:22px}
  .card{padding:20px 18px}
  .card h3{font-size:19px}
}
@media(max-width:320px){
  .nav{padding:12px 14px}
  .brand{font-size:15px}
  .links a{padding:10px 8px;font-size:13px}
  .links .cta{padding:11px 14px;font-size:13px}
  h1{font-size:22px}
  .hero{padding:32px 14px 24px}
  .btn{padding:12px 18px;font-size:14px}
  .phone{font-size:14px}
  .services,.closing{padding:0 12px 28px}
  .services h2{font-size:20px}
  .card{padding:18px 16px}
  .card h3{font-size:18px}
  .card p{font-size:14px}
  .card-featured{padding:20px 16px}
  .card-featured h3{font-size:20px}
  .card-featured p{font-size:14px}
  .partners{padding:22px 18px}
  .footer{font-size:13px;padding:22px 16px}
}

/* ===== INTERIOR PAGES ===== */
/* Attorney bio photo + education (bio photo uses the shared .frame styles) */
.bio-photo{width:240px;max-width:100%}
.bio-photo .cap{text-align:center;margin-top:12px}
.bio-photo .cap .nm{font-size:16px;font-weight:500;color:var(--navy-dark)}
.bio-photo .cap .ti{font-size:12px;color:var(--gold-dark);letter-spacing:.5px;font-weight:600;margin-top:2px}
/* Attorney bio grids (about page) */
.bio{max-width:1080px;margin:0 auto;padding:8px 28px 44px}
.bio-outer{display:grid;grid-template-columns:1.7fr 1fr;gap:44px;align-items:start}
.bio-grid{display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:start}
.bio-text{max-width:62ch}
.bio-text h2{font-size:24px;font-weight:500;color:var(--navy-dark);margin:0 0 16px;letter-spacing:-.3px}
.bio-text p{font-size:16px;color:var(--text-body);line-height:1.75;margin-bottom:18px;text-wrap:pretty}
.bio-text p:last-child{margin-bottom:0}
.bio-outer .sidecard{position:sticky;top:20px}
.edu{background:var(--surface-card);border-radius:10px;padding:22px 26px;margin:24px 0 8px}
.edu h3{font-size:15px;font-weight:500;color:var(--navy-dark);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.edu-item{margin-bottom:14px}
.edu-item:last-child{margin-bottom:0}
.edu-item .deg{font-size:15px;font-weight:600;color:var(--navy-dark);line-height:1.4}
.edu-item .sch{font-size:14px;color:var(--text-body);line-height:1.5;margin-top:2px}
.edu-item .note{font-size:13px;color:var(--text-secondary);font-style:italic;margin-top:2px}
.trust-banner{max-width:1080px;margin:0 auto;padding:0 28px 24px}
.trust-banner .inner{background:var(--navy);border-radius:10px;padding:20px 26px;display:flex;align-items:center;gap:14px}
.trust-banner svg{flex-shrink:0}
.trust-banner p{font-size:16px;color:var(--text-muted);line-height:1.5;margin:0;max-width:65ch}
.trust-banner strong{color:var(--white);font-weight:600}
.trust-shield{color:var(--gold)}
.page-hero{max-width:1080px;margin:0 auto;padding:52px 28px 16px}
.page-hero .eyebrow{font-size:13px;font-weight:600;color:var(--gold-dark);letter-spacing:1.6px;margin-bottom:14px}
.page-hero .sub{margin-top:14px}
.page-hero h1{font-size:clamp(28px,5vw,40px);font-weight:400;color:var(--navy-dark);line-height:1.12;letter-spacing:-.5px;text-wrap:balance}
.content{max-width:1080px;margin:0 auto;padding:24px 28px 52px}
.content-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:start}
.prose p{font-size:16px;color:var(--text-body);line-height:1.75;margin-bottom:18px;max-width:62ch;text-wrap:pretty}
.prose ul{font-size:16px;color:var(--text-body);line-height:1.75;margin:0 0 18px;padding-left:22px;max-width:62ch}
.prose ul li{margin-bottom:8px}
.prose ul li:last-child{margin-bottom:0}
.prose ul li strong{color:var(--navy-dark)}
.prose h2{font-size:24px;font-weight:500;color:var(--navy-dark);margin:8px 0 16px;letter-spacing:-.3px}
.sidecard{background:var(--navy);border-radius:10px;padding:30px 32px;color:var(--text-muted)}
.sidecard h2{font-size:18px;font-weight:500;color:var(--white);margin-bottom:12px;line-height:1.3}
.sidecard p{font-size:15px;line-height:1.65;margin-bottom:14px}
.sidecard a{color:var(--gold);font-weight:600;text-decoration:none;display:inline-flex;flex-direction:column;align-items:flex-start;min-height:44px;padding:0 4px}
.sidecard a:hover{text-decoration:underline}
.sidecard a:focus-visible{outline:2px solid var(--white);outline-offset:3px;border-radius:4px}
/* Inline variant: a gold text link inside a sentence (not a stacked label+value) */
.sidecard a.inline{display:inline;min-height:0;padding:0}
.sidecard .big{display:block;font-size:18px;color:var(--white);font-weight:600;margin-top:4px}

/* ===== SERVICES PAGE ===== */
/* Georgia map motif — a quiet brand backdrop in the hero, echoing the homepage
   hero map and tying the page to the firm's statewide story. Decorative only.
   Shared by five pages (services, fees, clients, faq, about) — about overrides
   the position in its own <style> block, so keep page-specific tweaks scoped. */
.svc-hero{position:relative;overflow:hidden}
.svc-hero h1,.svc-hero .sub{position:relative;z-index:1}
.svc-hero-map{position:absolute;z-index:0;top:50%;right:-6px;transform:translateY(-50%);height:398px;width:auto;opacity:.85;pointer-events:none;user-select:none}
@media(max-width:900px){.svc-hero-map{height:398px;right:-44px;opacity:.42}}
@media(max-width:560px){.svc-hero-map{height:230px;right:-20px;opacity:.22}}

/* Services only (.svc-hero-tuck on the hero): the map runs on into the record
   card below instead of stopping at a hard overflow cut with a 28px band of
   white under it. Two parts:
   1. padding-bottom + a matching negative margin stretch the hero's clip box
      58px past the section start. Layout is unchanged — the margin cancels the
      padding — but overflow:hidden now cuts 30px BELOW the card's top edge.
   2. the map hangs from that stretched bottom edge (not centred), so the seam
      stays put at every hero height and at both map heights, and a bottom mask
      dissolves the last of the ink right where the card begins.
   The mask stops are measured in px FROM THE BOTTOM, not in %, so they track
   the seam at both map heights (398px / 230px). The map's bottom edge sits 30px
   below the card's top edge — 58px of added padding (74 - 16) minus the 28px
   padding-top on .svc-section — so alpha hits 0 at 30px and the ink ends exactly
   on the card's border. That last 30px is also what would otherwise dangle in
   the 34px of map that overhangs the card's right edge, where the card cannot
   cover it. .svc-section carries z-index:1 to cover the rest. */
.svc-hero-tuck{padding-bottom:74px;margin-bottom:-58px}
.svc-hero-tuck .svc-hero-map{top:auto;bottom:0;transform:none;-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 30px,#000 124px);mask-image:linear-gradient(to top,rgba(0,0,0,0) 30px,#000 124px)}

/* Two-column shell: services in the main column, a sticky record + contact rail
   on the right so the column stays full instead of trailing into dead space. */
/* z-index:1 keeps the section above the map's tail from .svc-hero-tuck, which
   now overlaps it: at >900px the sticky rail would cover it anyway, but at
   <=900px the rail is static and its card background would paint under the
   positioned map. */
.svc-section{position:relative;z-index:1;padding-top:28px}
.svc-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:48px;align-items:start}
.svc-main{min-width:0}
.svc-intro{margin-bottom:40px}
.svc-intro h2{margin-top:0}
.svc-intro p:last-child{margin-bottom:0}

/* Section heading above the practice-area cards (Fraunces via h2) */
.svc-areas-h{font-size:24px;font-weight:500;color:var(--navy-dark);margin:0 0 18px;letter-spacing:-.3px}

/* One featured card + two standard cards — deliberately uneven, not a 3-up grid */
.svc-areas{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.svc-areas .card-featured{grid-column:1/-1}
.svc-areas .card p:last-child,.svc-card-collections p:last-child{margin-bottom:0}
.svc-card-collections>p:first-of-type{margin-bottom:14px;max-width:none}

/* Collections remedies — 2×2 term/description pairs, no icons, no stripes */
.svc-remedies{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;margin:0 0 18px}
.svc-remedy dt{font-size:15px;font-weight:600;color:var(--navy-dark);line-height:1.3;margin-bottom:3px}
.svc-remedy dd{font-size:14.5px;color:var(--text-body);line-height:1.55;margin:0}
.svc-card-collections .svc-card-note{font-size:15px;color:var(--text-secondary);margin:0;max-width:none}

/* Closing */
.svc-closing{margin-top:36px;padding-top:30px;border-top:1px solid var(--border)}
.svc-closing p{font-size:16px;color:var(--text-body);line-height:1.75;max-width:58ch;margin:0 0 20px}
.svc-closing-actions{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}

/* Sticky right rail: record block + contact card */
.svc-rail{position:sticky;top:20px;display:flex;flex-direction:column;gap:20px}
.svc-proof{background:var(--surface-card);border:1px solid var(--border);border-radius:12px;padding:26px 28px}
.svc-proof-h{font-size:18px;font-weight:500;color:var(--navy-dark);margin:0 0 6px;line-height:1.25;letter-spacing:-.2px}
.svc-stats{margin:0}
.svc-stat{padding:16px 0;border-top:1px solid var(--border-light)}
.svc-stat:first-of-type{padding-top:18px}
.svc-stat dt{font-family:'Fraunces',Georgia,serif;font-optical-sizing:auto;font-variation-settings:'SOFT' 0,'WONK' 0;font-size:30px;font-weight:400;color:var(--navy-dark);line-height:1.1;letter-spacing:-.02em}
.svc-stat dd{font-size:14px;color:var(--text-body);line-height:1.5;margin:6px 0 0}
.svc-proof-foot{font-size:13px;color:var(--text-secondary);line-height:1.55;margin:16px 0 0;padding-top:16px;border-top:1px solid var(--border-light)}

@media(max-width:900px){
  .svc-grid{grid-template-columns:1fr;gap:30px}
  /* Rail leads on small screens: record + tap-to-call before the long detail */
  .svc-rail{position:static;order:-1;gap:16px}
}
@media(max-width:768px){
  .svc-areas{grid-template-columns:1fr}
  .svc-remedies{grid-template-columns:1fr;gap:14px}
  .svc-intro{margin-bottom:32px}
  .svc-areas-h{font-size:22px}
}
@media(max-width:375px){
  .svc-proof{padding:22px 20px}
  .svc-stat dt{font-size:27px}
  .svc-closing-actions{gap:14px}
}

/* ===== ABOUT PAGE ===== */
/* Firm record strip — the services rail's proof component (.svc-proof/.svc-stats)
   laid out horizontally so the people page carries the same hard numbers. This
   block must sit after the services rules: equal-specificity ties resolve in
   source order, and these overrides need to win. */
.record{max-width:1080px;margin:0 auto;padding:8px 28px 32px}
.record-h{font-size:24px;font-weight:500;color:var(--navy-dark);margin:0 0 18px;letter-spacing:-.3px}
.record .svc-stats{display:grid;grid-template-columns:repeat(3,1fr)}
.record .svc-stat{border-top:0;padding:0 26px}
.record .svc-stat:first-of-type{padding-top:0}
.record .svc-stat+.svc-stat{border-left:1px solid var(--border-light)}
@media(max-width:900px){
  .record .svc-stats{grid-template-columns:1fr}
  .record .svc-stat{padding:14px 0}
  .record .svc-stat:first-of-type{padding-top:14px}
  .record .svc-stat+.svc-stat{border-left:0;border-top:1px solid var(--border-light)}
}
@media(max-width:768px){
  .record{padding:4px 20px 28px}
  .record-h{font-size:22px}
}
@media(max-width:375px){
  .record{padding-left:14px;padding-right:14px}
}

/* ===== PAY PAGE ===== */
/* Two-step lead-in: only rendered while the gate is actually active (JS adds
   .gate-locked before first paint), so it never nags a visitor who is through. */
.pay-gate-lead{display:none}
.gate-locked .pay-gate-lead{display:block;font-size:15px;line-height:1.6;color:var(--text-body);margin:0 0 16px;max-width:70ch}
.pay-gate-lead strong{color:var(--navy-dark);font-weight:600}
.pay-notice{background:#fbf6ea;border:4px solid var(--gold);border-radius:8px;margin-bottom:36px;overflow:hidden}
.pay-notice--pulse{animation:payAgreePulse 1.1s ease}
.pay-notice summary{font-size:15px;color:#4a4233;padding:18px 24px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;user-select:none;transition:background .15s}
.pay-notice-head{flex:1 1 12ch;min-width:0}
/* Spells out that the row is a control, and which way it will move */
.pay-notice-cta{flex-shrink:0;margin-left:auto;padding:6px 14px;border-radius:999px;background:var(--navy);color:var(--white);font-size:12.5px;font-weight:600;line-height:1.5;white-space:nowrap}
.pay-notice-cta::after{content:"Read the terms"}
.pay-notice[open] .pay-notice-cta{background:transparent;color:var(--navy-dark);border:1.5px solid #d8b259;padding:4.5px 12.5px}
.pay-notice[open] .pay-notice-cta::after{content:"Hide the terms"}
.pay-notice summary:hover .pay-notice-cta{background:var(--navy-mid);color:var(--white);border-color:var(--navy-mid)}
.pay-notice summary::-webkit-details-marker{display:none}
.pay-notice summary::before{content:"›";flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;color:#b8862e;line-height:1;transition:transform .2s ease;border:1.5px solid #d8b259;border-radius:4px}
.pay-notice[open] summary::before{transform:rotate(90deg)}
.pay-notice summary:hover{background:rgba(231,185,78,.1)}
.pay-notice summary strong{color:var(--navy-dark);font-weight:600}
.pay-notice[open] summary{border-bottom:1px solid var(--gold)}
.pay-notice-body{padding:18px 24px 22px}
.pay-notice-body p{font-size:14px;color:#4a4233;line-height:1.6;margin-bottom:12px;max-width:68ch}
.pay-notice-body p:last-child{margin-bottom:0}
.pay-notice-body strong{color:var(--navy-dark)}
/* Plain-language summary at the top of the terms notice */
.pay-notice-summary{list-style:none;margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid #e6d7ad;display:flex;flex-direction:column;gap:9px;max-width:68ch}
.pay-notice-summary li{position:relative;padding-left:22px;font-size:14.5px;color:#4a4233;line-height:1.55}
.pay-notice-summary li::before{content:"";position:absolute;left:2px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.pay-notice-summary strong{color:var(--navy-dark)}
.pay-notice-sub{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--navy-dark);margin:0 0 8px!important}

/* Payment-terms agreement gate */
.pay-gate{margin:0 0 32px}
.pay-agree{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;background:var(--white);border:1.5px solid var(--border-light);border-radius:8px;transition:border-color .15s}
.pay-agree:focus-within{border-color:var(--gold)}
.pay-agree-check{flex-shrink:0;width:28px;height:28px;margin:0;accent-color:var(--navy);cursor:pointer}
.pay-agree-check:focus-visible{outline:2px solid var(--navy-mid);outline-offset:2px}
.pay-agree label{font-size:15px;font-weight:600;color:var(--navy-dark);line-height:1.45;cursor:pointer;user-select:none}
/* Opens the notice above; same inline-link idiom as .prose a (gold underline) */
.pay-terms-link{color:inherit;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:1px;cursor:pointer}
.pay-terms-link:hover{border-bottom-color:var(--navy-dark)}
.pay-terms-link:focus-visible{outline:2px solid var(--navy-mid);outline-offset:2px;border-radius:2px}
.pay-agree--pulse{animation:payAgreePulse 1.1s ease}
@keyframes payAgreePulse{0%,100%{box-shadow:0 0 0 0 rgba(231,185,78,0)}30%{box-shadow:0 0 0 5px rgba(231,185,78,.6)}}
.pay-agree-hint{font-size:13.5px;font-weight:500;color:var(--text-secondary);margin:10px 0 0;padding-left:2px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;line-height:1.5}
.pay-agree-hint[hidden]{display:none} /* class display beats the UA [hidden] rule */
/* Final state: both steps cleared, so confirm it and point at what's next */
/* The Hanken Grotesk variable font only carries 400-600, so 700 would clamp to
   600 and read identically — the emphasis here comes from weight 500 vs 600. */
.pay-agree-hint--done{color:#1f5136;font-weight:500;background:#eef7f1;border:1px solid #cfe6d9;border-radius:8px;padding:10px 13px;margin-top:12px}
.pay-agree-hint--done strong{color:#17402a;font-weight:600}
.pay-agree-hint strong{font-weight:600}
/* Tick glyph drawn in CSS so the hint needs no image or icon font */
.pay-hint-tick{display:inline-block;width:18px;height:18px;position:relative;vertical-align:-4px;margin-right:5px}
.pay-hint-tick::before{content:"";position:absolute;left:6px;top:2px;width:5px;height:11px;border:solid #2f6b45;border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}
.pay-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}
/* Locked state: <html> gets .gate-locked via JS until the box is checked */
.gate-locked .pay-card-featured .pay-btn,
.gate-locked .pay-inline-link,
.gate-locked .pay-plans a{opacity:.6;cursor:not-allowed}
.gate-locked .pay-card-featured .pay-btn:hover{transform:none;background:var(--gold);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.gate-locked .pay-plans a:hover{border-color:var(--border-light);background:transparent;color:var(--navy)}
/* Read-locked state: <html> gets .read-locked via JS until the notice above is
   opened once. The row stays clickable on purpose — a click anywhere on it opens
   the terms, so the greyed-out checkbox is a signpost, not a dead end. */
.read-locked .pay-agree{opacity:.7;cursor:pointer;border-style:dashed}
.read-locked .pay-agree:hover{border-color:var(--gold);opacity:.85}
.read-locked .pay-agree-check{pointer-events:none} /* let the click reach the row */
.read-locked .pay-agree label{cursor:pointer}
@media (prefers-reduced-motion:reduce){
  .pay-agree--pulse,.pay-notice--pulse{animation:none}
  .pay-agree--pulse{background:#f3e4ba}
  .pay-notice--pulse{background:#f6ecd2}
}

/* Featured CTA card — full width, prominent */
.pay-card-featured{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);border-radius:12px;padding:36px 36px;grid-column:1/-1;display:flex;align-items:center;gap:32px;justify-content:space-between}
.pay-featured-body{flex:1}
.pay-card-featured h2{font-size:22px;font-weight:500;color:var(--white);margin-bottom:10px;line-height:1.25;letter-spacing:-.3px}
.pay-card-featured p{font-size:15px;color:var(--text-muted);line-height:1.65;margin:0;max-width:54ch}
/* The site's primary money CTA. It used to ask for font-weight:700, which the
   Hanken Grotesk variable axis (400-600) silently clamps to 600 — leaving it the
   exact same weight as .btn and .links .cta, so one of the three signals meant to
   mark it as primary simply wasn't rendering. Weight can't carry the difference
   here, so size and letter-spacing do: 18px against .btn's 16px is a clear step,
   and the extra tracking reads as deliberate at that size.
   Checked before changing: .pay-btn is the 6th-largest element in the viewport
   (17,888px2) against the h1 at 45,872px2, so it is not the LCP element and a
   size step cannot make it one. */
.pay-card-featured .pay-btn{flex-shrink:0;display:inline-flex;align-items:center;background:var(--gold);color:var(--navy);font-size:18px;font-weight:600;padding:17px 36px;border-radius:8px;text-decoration:none;letter-spacing:.3px;box-shadow:0 8px 20px rgba(0,0,0,.25);transition:background .15s,transform .12s,box-shadow .15s;white-space:nowrap}
.pay-card-featured .pay-btn:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.32)}
.pay-card-featured .pay-btn:active{transform:translateY(0);box-shadow:0 4px 12px rgba(0,0,0,.25)}
.pay-card-featured .pay-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* Pay grid */
.pay-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:24px;align-items:start}
.pay-col{display:flex;flex-direction:column;gap:24px;min-width:0}

/* Standard card */
.pay-card{background:var(--surface-card);border-radius:10px;padding:32px 32px}
.pay-card h2{font-size:20px;font-weight:500;color:var(--navy-dark);margin-bottom:14px;line-height:1.25;letter-spacing:-.25px}
.pay-card p{font-size:15px;color:var(--text-body);line-height:1.65;margin-bottom:14px}
.pay-card p:last-child{margin-bottom:0}

/* Plan tiers */
.pay-tiers{display:flex;flex-direction:column;gap:16px;margin-top:18px}
.pay-tier{border:1px solid var(--border);border-radius:8px;padding:16px 20px}
.pay-tier-h{font-size:13px;font-weight:600;color:var(--gold-dark);letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
.pay-plans{list-style:none;margin:0!important;padding:0!important;display:flex;flex-wrap:wrap;gap:4px 6px}
.pay-plans li{margin:0!important}
.pay-plans a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:var(--navy);text-decoration:none;padding:8px 14px;border:1.5px solid var(--border-light);border-radius:6px;transition:border-color .15s,background .15s;line-height:1.35}
.pay-plans a:hover{border-color:var(--gold);background:var(--white);color:var(--navy-darker)}
.pay-plans a:focus-visible{outline:2px solid var(--navy-mid);outline-offset:3px;border-radius:4px}

/* Sidebar card (mail) */
.pay-card-sidebar{background:var(--surface-card);border-radius:10px;padding:28px 28px}
.pay-card-sidebar h2{font-size:18px;font-weight:500;color:var(--navy-dark);margin-bottom:14px;line-height:1.25;letter-spacing:-.2px}
.pay-card-sidebar p{font-size:15px;color:var(--text-body);line-height:1.6;margin-bottom:8px}
.pay-card-sidebar p:last-child{margin-bottom:0}
.pay-card-sidebar .pay-label{font-size:12px;font-weight:600;color:var(--gold-dark);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px!important}
.pay-card-sidebar p:not(.pay-label) + .pay-label{margin-top:16px}

/* Secondary cards (security, privacy) */
.pay-card-secondary{background:var(--surface-card);border-radius:8px;padding:24px 26px}
.pay-card-secondary h2{font-size:16px;font-weight:600;color:var(--navy-dark);margin-bottom:10px;line-height:1.3;letter-spacing:-.1px}
.pay-card-secondary p{font-size:14px;color:var(--text-secondary);line-height:1.65;margin:0}

/* Privacy — collapsible */
.pay-privacy{border:1px solid var(--border);padding:0;background:var(--white)}
.pay-privacy summary{font-size:15px;font-weight:600;color:var(--navy-dark);padding:16px 20px;cursor:pointer;list-style:none;user-select:none;transition:background .15s;border-radius:7px;display:flex;align-items:center;gap:10px}
.pay-privacy summary::-webkit-details-marker{display:none}
.pay-privacy summary::before{content:"›";flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;color:var(--navy);line-height:1;transition:transform .2s ease;border:1.5px solid #c8cdd8;border-radius:4px}
.pay-privacy[open] summary::before{transform:rotate(90deg)}
.pay-privacy summary:hover{background:#f0f2f5}
.pay-privacy[open] summary{border-bottom:1px solid var(--border);border-radius:7px 7px 0 0}
.pay-privacy-body{padding:16px 20px 20px}
.pay-privacy-body p{font-size:14px;color:var(--text-secondary);line-height:1.65;margin-bottom:12px}
.pay-privacy-body p:last-child{margin-bottom:0}
.pay-privacy-body h3{font-size:14px;font-weight:600;color:var(--navy-dark);margin:14px 0 6px;line-height:1.3}
.pay-privacy-body ul{margin:0 0 0 16px;padding:0}
.pay-privacy-body ul li{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:6px}

/* Tablet/landscape: collapse the bio's OUTER grid (bio column + sidecard) to one
   column before the nested photo+text grid is forced active too. Above this the
   two grids stack and crush the reading column to ~180px; below it the bio-grid
   keeps full width and the sidecard drops underneath. */
@media(max-width:1024px){
  .bio-outer{grid-template-columns:1fr;gap:32px}
  .bio-outer .sidecard{position:static}
}
@media(max-width:768px){
  .page-hero,.content,.bio{padding-left:20px;padding-right:20px}
  .bio-outer{grid-template-columns:1fr;gap:28px}
  .bio-grid{grid-template-columns:1fr;gap:20px}
  .bio-photo{margin:0 auto}
  .bio-outer .sidecard{position:static}
  .bio-text h2{font-size:22px}
  .trust-banner{padding-left:20px;padding-right:20px}
  .trust-banner .inner{align-items:flex-start;gap:12px;padding:18px 20px}
  .pay-grid{grid-template-columns:1fr;gap:20px}
  .pay-card{padding:24px 22px}
  .pay-card-featured{flex-direction:column;align-items:flex-start;gap:20px;padding:28px 24px}
  .pay-card-featured .pay-btn{white-space:normal;width:100%;justify-content:center}
  .pay-card-sidebar{padding:24px 22px}
  .pay-card-secondary{padding:20px 22px}
  .pay-agree{padding:14px 16px}
  .pay-gate-lead{font-size:14.5px}
  /* Let the headline and the "Read the terms" pill stack instead of squeezing
     the headline to a couple of words. */
  .pay-notice summary{padding:14px 18px;font-size:14px;flex-wrap:wrap;row-gap:12px}
  /* Chevron + headline keep row 1 (the 12ch basis is narrow enough to fit
     beside the chevron, then grows); the pill takes row 2 as a full-width
     button rather than floating above the text it labels. */
  .pay-notice-cta{order:1;flex:0 0 100%;margin-left:0;text-align:center}
  .pay-notice-body{padding:14px 18px 18px}
  .pay-tier{padding:14px 16px}
  .content-grid{grid-template-columns:1fr;gap:28px}
  .content-grid>.sidecard{order:1}
  .prose h2{font-size:22px}
}
@media(max-width:375px){
  .page-hero,.content,.bio{padding-left:14px;padding-right:14px}
  .sidecard{padding:22px 18px}
}

/* CONTACT FORM (subrogation_contact_form.php) */
.contact-form{max-width:600px}
.form-hint{font-size:14px;color:var(--text-secondary);margin-bottom:22px}
.form-hint span{color:var(--gold-dark);font-weight:600}
.contact-form .field{margin-bottom:20px}
.contact-form label{display:block;font-size:13px;font-weight:600;color:var(--gold-dark);letter-spacing:.6px;text-transform:uppercase;margin-bottom:7px}
.contact-form .req{color:var(--gold-dark)}
.contact-form input[type=text],.contact-form input[type=email],.contact-form textarea{width:100%;font-family:inherit;font-size:16px;color:var(--navy-dark);background:var(--white);border:1.5px solid var(--border-light);border-radius:7px;padding:12px 14px;line-height:1.5;transition:border-color .15s,box-shadow .15s}
.contact-form input[type=text],.contact-form input[type=email]{min-height:48px}
.contact-form textarea{min-height:168px;resize:vertical}
.contact-form input:hover,.contact-form textarea:hover{border-color:#c2c9d6}
/* A real outline, not just the gold border+glow that used to stand in for one.
   Measured: gold border 1.74:1 against the card, the 28% glow 1.17:1, and the
   focused border only 1.34:1 different from its own resting colour — so the old
   treatment failed WCAG 1.4.11 three ways and was near-invisible even to a
   sighted user. The border and glow stay as secondary emphasis; the outline is
   what actually carries the state. */
.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:2px solid var(--navy-mid);outline-offset:2px;border-color:var(--gold);box-shadow:0 0 0 3px rgba(231,185,78,.28)}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#737d8c}
.contact-form [aria-invalid=true]{border-color:#b3261e}
.contact-form [aria-invalid=true]:focus-visible{border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.22)}
.field-error{margin-top:7px;font-size:14px;font-weight:500;color:#b3261e}
.btn-submit{border:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-height:48px;margin-top:4px}
.btn-submit:hover{background:var(--navy-mid);transform:translateY(-1px)}
.btn-submit:focus-visible{outline:3px solid var(--navy-mid);outline-offset:3px}
.form-error-summary{max-width:600px;margin:0 0 26px;padding:16px 18px;background:#fdecea;border:1px solid #f3b4ad;border-radius:8px;color:#8a1c14}
.form-error-summary h2{font-size:16px;font-weight:600;color:#8a1c14;margin-bottom:8px}
.form-error-summary ul{margin:0;padding-left:20px}
.form-error-summary li{font-size:14px;line-height:1.65}
.form-success{max-width:600px;background:var(--surface-card);border:1px solid var(--border);border-radius:10px;padding:28px 30px}
.form-success h2{font-size:22px;font-weight:500;color:var(--navy-dark);margin-bottom:10px;letter-spacing:-.3px;line-height:1.25}
.form-success p{font-size:16px;color:var(--text-body);line-height:1.7}
.form-success a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:1px}
.form-success a:hover{color:var(--navy-darker)}
.form-success a:focus-visible{outline:2px solid var(--navy-mid);outline-offset:3px;border-radius:2px}
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* ===== IMAGE LIGHTBOX (hero + bio portrait zoom, js/lightbox.js) =====
   The interactive treatment (cursor, hover icon, focus ring) is gated behind
   .zoom-ready, which the script adds once it has wired up tabindex/keyboard
   handling — so a photo never looks clickable when nothing will happen. */
[data-zoom]{position:relative}
[data-zoom].zoom-ready{cursor:zoom-in}
[data-zoom].zoom-ready:focus-visible{outline:3px solid var(--navy-mid);outline-offset:3px}
[data-zoom].zoom-ready::after{content:"";position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:50%;background:rgba(12,31,74,.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='21' y1='21' x2='15.5' y2='15.5'/%3E%3C/svg%3E") no-repeat center/18px 18px;box-shadow:0 2px 8px rgba(0,0,0,.28);opacity:0;transform:scale(.85);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
[data-zoom].zoom-ready:hover::after,[data-zoom].zoom-ready:focus-visible::after{opacity:1;transform:scale(1)}
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(10,24,56,.82);padding:5vmin;animation:lb-fade .18s ease}
@keyframes lb-fade{from{opacity:0}to{opacity:1}}
.lb-fig{margin:0;max-width:min(92vw,820px);display:flex;flex-direction:column;align-items:center}
.lb-img{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:8px;box-shadow:0 18px 50px rgba(0,0,0,.5);background:var(--navy-dark)}
.lb-cap{margin-top:14px;color:var(--surface-card);font-size:.95rem;text-align:center;letter-spacing:.02em}
.lb-close{position:absolute;top:18px;right:22px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:var(--white);font-size:1.9rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.lb-close:hover{background:rgba(255,255,255,.22)}
.lb-close:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.lb{animation:none}[data-zoom].zoom-ready::after{transition:none}}