/* ============================================================
   City Group Legal — global.css
   Design system: ink + ivory + antique brass. Newsreader / Inter.
   ============================================================ */

:root{
  --ink:      #0C0F14;   /* near-black, cool */
  --ink-2:    #12171F;
  --ink-3:    #1C2430;
  --ink-line: rgba(244,240,230,.12);
  --bone:     #F4F0E6;   /* warm ivory (page bg) */
  --bone-2:   #FBFAF5;
  --paper:    #FFFFFF;
  --gold:     #B0894F;   /* antique brass accent */
  --gold-2:   #C7A467;
  --gold-soft:rgba(176,137,79,.14);
  --oxblood:  #7C2B2B;   /* reserved: urgent */
  --ink-soft: #3A424E;   /* body text on light */
  --ink-mute: #6C7480;   /* muted on light */
  --bone-mute:#9AA2AE;   /* muted on dark */
  --rule:     rgba(12,15,20,.12);
  --rule-2:   rgba(12,15,20,.07);
  --shadow:   0 24px 60px -24px rgba(12,15,20,.35);
  --shadow-sm:0 10px 30px -18px rgba(12,15,20,.4);
  --maxw:     1180px;
  --gutter:   clamp(20px, 5vw, 64px);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.08; letter-spacing:-.01em; margin:0; text-wrap:balance; }
p{ margin:0 0 1.1em; }
.prose p,.prose li{ text-wrap:pretty; }

/* ---- Focus & selection ---- */
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:1px; }
::selection{ background:var(--gold); color:#1a1305; }
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--gold); color:#1a1305;
  font-family:var(--sans); font-weight:600; font-size:14px; padding:12px 20px; }
.skip:focus{ left:0; }

/* ---- Layout primitives ---- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:820px; margin-inline:auto; padding-inline:var(--gutter); }
section{ position:relative; }
.pad{ padding-block:clamp(64px,9vw,128px); }
.pad-sm{ padding-block:clamp(44px,6vw,80px); }
.dark{ background:var(--ink); color:var(--bone); }
.dark h1,.dark h2,.dark h3{ color:var(--bone); }
.ink-2{ background:var(--ink-2); color:var(--bone); }

.eyebrow{
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin:0 0 18px; display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--gold); opacity:.7; }
.dark .eyebrow{ color:var(--gold-2); }
.center .eyebrow{ justify-content:center; }
.center .eyebrow::before{ display:none; }

.h-xl{ font-size:clamp(2.6rem,6.4vw,5.2rem); }
.h-lg{ font-size:clamp(2rem,4.2vw,3.4rem); }
.h-md{ font-size:clamp(1.5rem,2.6vw,2.2rem); }
.lede{ font-size:clamp(1.12rem,1.7vw,1.34rem); line-height:1.6; color:var(--ink-soft); }
.dark .lede,.hero .lede,.ink-2 .lede{ color:#D9D3C6; }
.muted{ color:var(--ink-mute); }
.dark .muted,.hero .muted,.ink-2 .muted{ color:var(--bone-mute); }
.hero .link-arrow{ color:var(--gold-2); }

/* ---- Buttons ---- */
.btn{
  --bg:var(--gold); --fg:#1a1305;
  display:inline-flex; align-items:center; gap:10px; font-family:var(--sans);
  font-weight:600; font-size:15px; letter-spacing:.01em; padding:15px 26px;
  background:var(--bg); color:var(--fg); border:1px solid var(--bg); cursor:pointer;
  transition:transform .35s var(--ease), background .3s, color .3s, box-shadow .3s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn svg{ width:16px; height:16px; }
.btn-ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--rule); }
.dark .btn-ghost,.hero .btn-ghost,.ink-2 .btn-ghost,.site-foot .btn-ghost{ --fg:var(--bone); border-color:var(--ink-line); }
.hero .btn-ghost:hover,.ink-2 .btn-ghost:hover,.site-foot .btn-ghost:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.btn-ghost:hover{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.dark .btn-ghost:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.btn-lg{ padding:18px 34px; font-size:16px; }
.link-arrow{ font-family:var(--sans); font-weight:600; font-size:14.5px; letter-spacing:.02em; color:var(--gold);
  display:inline-flex; align-items:center; gap:8px; }
.link-arrow svg{ width:15px; height:15px; transition:transform .35s var(--ease); }
.link-arrow:hover svg{ transform:translateX(5px); }

/* ---- Top urgent bar ---- */
.topbar{
  background:var(--ink-2); color:var(--bone); font-size:13.5px; letter-spacing:.01em;
  border-bottom:1px solid var(--ink-line);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; }
.topbar a{ color:var(--bone); display:inline-flex; align-items:center; gap:8px; }
.topbar .tb-urgent{ color:var(--gold-2); font-weight:600; }
.topbar svg{ width:14px; height:14px; }
.topbar .tb-right{ display:flex; gap:26px; }
@media (max-width:720px){ .topbar .tb-right span{ display:none; } .topbar{ font-size:12.5px; } }
@media (max-width:480px){ .topbar .tb-right{ display:none; } .topbar .tb-urgent{ white-space:nowrap; font-size:12px; } }

/* ---- Header / nav ---- */
.site-head{ position:sticky; top:0; z-index:60; background:rgba(244,240,230,.9);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--rule-2); }
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:24px; }
.brand{ font-family:var(--serif); font-weight:600; font-size:24px; letter-spacing:.16em; color:var(--ink); }
.brand small{ display:block; font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:.34em;
  color:var(--gold); margin-top:2px; }
.nav{ display:flex; align-items:center; gap:30px; }
.nav a{ font-family:var(--sans); font-size:14.5px; font-weight:500; color:var(--ink-soft); letter-spacing:.01em;
  position:relative; padding:6px 0; }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.nav a[aria-current]{ color:var(--ink); }
.nav a[aria-current]::after{ transform:scaleX(1); }
@media (hover:hover){
  .nav a:hover{ color:var(--ink); }
  .nav a:hover::after{ transform:scaleX(1); }
}
.nav .btn{ padding:11px 20px; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.3s; }
@media (max-width:1240px){
  .nav{ position:fixed; inset:0 0 0 auto; width:min(84vw,360px); background:var(--ink); color:var(--bone);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:26px; padding:40px;
    transform:translateX(100%); transition:transform .4s var(--ease); z-index:70; }
  .nav.open{ transform:translateX(0); }
  .nav a{ color:var(--bone); font-size:20px; }
  .nav-toggle{ display:block; z-index:75; }
  body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ---- Hero ---- */
.hero{ position:relative; background:var(--ink); color:var(--bone); overflow:hidden; }
.hero::before{ /* subtle vignette + brass glow */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(176,137,79,.16), transparent 55%),
    radial-gradient(100% 80% at 12% 90%, rgba(28,36,48,.9), transparent 60%);
  pointer-events:none;
}
.hero-inner{ position:relative; padding-block:clamp(90px,15vh,180px); }
@media (max-width:760px){ .hero-inner{ padding-block:56px 68px; } }
.hero .kicker{ font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-2); margin-bottom:26px; }
.hero h1{ font-size:clamp(2.9rem,7.5vw,6rem); line-height:.98; letter-spacing:-.02em; max-width:15ch; }
.hero h1 em{ font-style:italic; color:var(--gold-2); }
.hero .lede{ max-width:52ch; margin-top:28px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:46px; padding-top:30px;
  border-top:1px solid var(--ink-line); }
.hero-meta div{ font-size:13.5px; color:var(--bone-mute); }
.hero-meta b{ display:block; font-family:var(--serif); font-size:22px; color:var(--bone); font-weight:500; }

/* ---- award ribbon (unused) ---- */
.awards{ border-block:1px solid var(--rule-2); background:var(--bone-2); }
.awards .wrap{ display:flex; align-items:center; gap:clamp(24px,5vw,60px); flex-wrap:wrap; justify-content:center;
  padding-block:26px; }
.awards .aw-label{ font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mute); }
.aw-item{ text-align:center; }
.aw-item b{ font-family:var(--serif); font-size:26px; color:var(--gold); font-weight:600; display:block; }
.aw-item span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }

/* ---- Stat row ---- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ink-line); border:1px solid var(--ink-line); }
.stat{ background:var(--ink); padding:34px 26px; text-align:center; }
.stat b{ font-family:var(--serif); font-size:clamp(2.4rem,4vw,3.4rem); color:var(--gold-2); font-weight:500; display:block; line-height:1; font-variant-numeric:tabular-nums; }
.stat span{ font-size:13px; letter-spacing:.03em; color:var(--bone-mute); margin-top:10px; display:block; }
@media (max-width:720px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* ---- Section header ---- */
.sec-head{ max-width:720px; margin-bottom:clamp(36px,5vw,60px); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head p{ margin-top:18px; }

/* ---- Practice-area grid ---- */
.pa-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); }
.pa-card{ background:var(--bone-2); padding:34px 32px; display:flex; flex-direction:column; gap:14px;
  transition:background .35s, transform .35s var(--ease); min-height:230px; color:var(--ink-soft); }
.pa-card h3{ color:var(--ink); }
.pa-card:hover{ background:var(--paper); }
.pa-card .pa-group{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.pa-card h3{ font-size:1.5rem; }
.pa-card p{ color:var(--ink-mute); font-size:15.5px; margin:0; flex:1; }
.pa-card .link-arrow{ margin-top:6px; }

/* ---- Results ---- */
.res-filter{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:38px; }
.res-filter button{ font-family:var(--sans); font-size:13.5px; font-weight:500; padding:12px 18px; cursor:pointer;
  background:transparent; border:1px solid var(--rule); color:var(--ink-soft); transition:.25s; }
.res-filter button:hover{ border-color:var(--ink); }
.res-filter button.active{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.res-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:22px; }
.res-card{ background:var(--bone-2); border:1px solid var(--rule); padding:30px 30px 26px; display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s; color:var(--ink-soft); }
.res-card h3{ color:var(--ink); }
.res-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.res-tag{ align-self:flex-start; font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; padding:6px 12px; border:1px solid var(--gold); color:var(--gold);
  background:var(--gold-soft); margin-bottom:18px; }
.res-card h3{ font-size:1.34rem; line-height:1.18; margin-bottom:10px; }
.res-card .res-charge{ font-size:14.5px; color:var(--ink); font-weight:500; margin-bottom:4px; }
.res-card .res-court{ font-size:13px; color:var(--ink-mute); margin-bottom:14px; }
.res-card p{ font-size:14.5px; color:var(--ink-soft); margin:0; }
.res-card .res-cite{ font-size:12.5px; color:var(--ink-mute); font-style:italic; margin-top:14px; padding-top:14px;
  border-top:1px solid var(--rule-2); }

/* ---- Split feature ---- */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,80px); align-items:center; }
.split.rev>*:first-child{ order:2; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } .split.rev>*:first-child{ order:0; } }
.figure{ position:relative; background:var(--ink-2); aspect-ratio:4/5; overflow:hidden; }
.figure img{ width:100%; height:100%; object-fit:cover; }
.figure-cap{ position:absolute; left:0; bottom:0; right:0; padding:22px 26px; color:var(--bone);
  background:linear-gradient(transparent, rgba(12,15,20,.85)); font-size:13px; letter-spacing:.02em; }
.placeholder-figure{ display:flex; align-items:center; justify-content:center; color:var(--bone-mute);
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; text-align:center; padding:20px; }

/* ---- Prose (article/practice pages) ---- */
.prose{ max-width:760px; }
.prose h2{ font-size:clamp(1.6rem,2.6vw,2.1rem); margin:1.8em 0 .5em; }
.prose h3{ font-size:1.32rem; margin:1.6em 0 .4em; }
.prose p,.prose li{ color:var(--ink-soft); }
.prose ul{ padding-left:0; list-style:none; margin:0 0 1.4em; }
.prose ul li{ position:relative; padding-left:26px; margin-bottom:10px; }
.prose ul li::before{ content:""; position:absolute; left:2px; top:11px; width:9px; height:1px; background:var(--gold); }
.callout{ background:var(--ink); color:var(--bone); padding:30px 32px; margin:2em 0; border:1px solid rgba(176,137,79,.5); }
.callout p{ color:#DCD6C9; margin:0; }
.callout b{ color:var(--gold-2); font-family:var(--serif); font-weight:500; }

/* ---- FAQ ---- */
.faq{ border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{ cursor:pointer; list-style:none; padding:24px 40px 24px 0; position:relative; font-family:var(--serif);
  font-size:1.24rem; color:var(--ink); font-weight:500; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:6px; top:22px; font-size:1.5rem; color:var(--gold);
  font-family:var(--sans); font-weight:300; transition:transform .3s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 40px 26px 0; color:var(--ink-soft); margin:0; }
@media (prefers-reduced-motion:no-preference){
  .faq details[open] p{ animation:faqIn .4s var(--ease) both; }
}
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ---- Quote ---- */
.pullquote{ font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.35; font-style:italic;
  color:var(--bone); max-width:22ch; }
.pullquote-cite{ font-family:var(--sans); font-style:normal; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-2); margin-top:26px; display:block; }

/* ---- Contact / form ---- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-grid .full{ grid-column:1/-1; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
label{ display:block; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bone-mute); margin-bottom:8px; }
.field input,.field textarea,.field select{ width:100%; padding:14px 16px; background:var(--ink-2); border:1px solid var(--ink-line);
  color:var(--bone); font-family:var(--sans); font-size:15.5px; transition:border .25s; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--gold); }
.field textarea{ min-height:140px; resize:vertical; }
.hp{ position:absolute; left:-9999px; opacity:0; }
.form-note{ font-size:13px; color:var(--bone-mute); margin-top:14px; }
.form-status{ margin-top:16px; padding:14px 18px; font-size:14.5px; display:none; }
.form-status.ok{ display:block; background:var(--gold-soft); color:var(--gold-2); border:1px solid var(--gold); }
.form-status.err{ display:block; background:rgba(124,43,43,.2); color:#e2a1a1; border:1px solid var(--oxblood); }

/* ---- Contact detail cards ---- */
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:var(--ink-line);
  border:1px solid var(--ink-line); margin-top:8px; }
.contact-cell{ background:var(--ink); padding:26px; }
.contact-cell .cc-l{ font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-2); margin-bottom:10px; }
.contact-cell a,.contact-cell p{ color:var(--bone); font-size:15.5px; margin:0; }

/* ---- Footer ---- */
.site-foot{ background:var(--ink); color:var(--bone-mute); border-top:1px solid var(--ink-line); }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-block:clamp(50px,7vw,84px); }
@media (max-width:860px){ .foot-top{ grid-template-columns:1fr 1fr; gap:34px; } }
@media (max-width:520px){ .foot-top{ grid-template-columns:1fr; } }
.foot-brand{ font-family:var(--serif); font-size:26px; letter-spacing:.14em; color:var(--bone); }
.foot-brand small{ display:block; font-family:var(--sans); font-size:9.5px; letter-spacing:.32em; color:var(--gold); margin-top:4px; }
.site-foot h4{ font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone);
  margin-bottom:18px; font-weight:600; }
.site-foot ul{ list-style:none; padding:0; margin:0; }
.site-foot li{ margin-bottom:11px; font-size:14.5px; }
.site-foot a:hover{ color:var(--gold-2); }
.foot-bottom{ border-top:1px solid var(--ink-line); padding-block:24px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:12px; font-size:12.5px; }
.foot-disc{ font-size:12px; color:var(--bone-mute); max-width:70ch; margin-top:14px; line-height:1.6; }

/* ---- Sticky mobile call bar ---- */
.callbar{ position:fixed; left:0; right:0; bottom:0; z-index:80; display:none; background:var(--ink-2);
  border-top:1px solid var(--gold); }
.callbar a{ flex:1; text-align:center; padding:15px; font-family:var(--sans); font-weight:600; font-size:15px;
  color:var(--bone); display:flex; align-items:center; justify-content:center; gap:9px; }
.callbar a.primary{ background:var(--gold); color:#1a1305; }
.callbar svg{ width:17px; height:17px; }
/* .callbar retired 2026-07-16 (sticky mobile bar → header CTA). The body{padding-bottom:54px}
   that reserved its space is removed with it — left behind it would render as a 54px light
   strip under the footer, the very artifact we just fixed. */

/* ---- Breadcrumb ---- */
.crumb{ font-size:13px; letter-spacing:.02em; color:var(--ink-mute); padding-block:20px; }
.crumb a:hover{ color:var(--gold); }
.crumb span{ margin:0 8px; opacity:.5; }

/* ---- Reveal: content is always visible (class retained as a styling hook) ---- */
.reveal{ opacity:1; }

/* ---- Penalty table ---- */
.pen-table{ width:100%; border-collapse:collapse; font-size:15px; margin:8px 0 14px; }
.pen-table th{ font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute); text-align:left; padding:10px 14px 10px 0; border-bottom:1px solid var(--rule); }
.pen-table td{ padding:13px 14px 13px 0; border-bottom:1px solid var(--rule-2); vertical-align:top; color:var(--ink-soft); }
.pen-table td:first-child{ font-weight:500; color:var(--ink); width:44%; }

/* ---- Court pills ---- */
.court-pills{ display:flex; flex-wrap:wrap; gap:12px; }
.court-pill{ font-family:var(--sans); font-size:15px; font-weight:500; color:var(--bone); padding:12px 22px;
  border:1px solid var(--ink-line); transition:.3s; }
.court-pill:hover{ border-color:var(--gold); color:var(--gold-2); }
.court-pills.light .court-pill{ color:var(--ink-soft); border-color:var(--rule); font-size:13.5px; padding:9px 15px; }
.court-pills.light .court-pill:hover{ color:var(--gold); border-color:var(--gold); }

/* ---- Image quote band ---- */
.quote-band{ background-size:cover; background-position:center; }

/* ---- Related strip ---- */
.related{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.rel-card{ border:1px solid var(--rule); padding:24px; background:var(--bone-2); transition:.35s; color:var(--ink-soft); }
.rel-card:hover{ background:var(--paper); transform:translateY(-3px); }
.rel-card h4,.rel-card h3{ font-family:var(--serif); font-size:1.15rem; margin-bottom:8px; color:var(--ink); }
.rel-card p{ font-size:14px; color:var(--ink-mute); margin:0; }

/* ============================================================
   v2 ELEVATION — cinematic layer (palette depth, motion, prestige)
   Motion invariants:
   · critical content is NEVER opacity-gated on JS/timers
   · hero entrance = @starting-style transform-only (worst case: offset, still visible)
   · scroll reveals = animation-timeline:view() — geometry-driven, @supports-gated
   ============================================================ */
:root{
  --ink:#090C10; --ink-2:#10151D; --ink-3:#1A222D;
  --gold-3:#E3CA92;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
}

/* ---- Cinematic hero ---- */
.hero{ isolation:isolate; }
.hero-media{ position:absolute; inset:0; z-index:-1; overflow:hidden; background:var(--ink); }
.hero-media video,.hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.hero-media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,12,16,.88) 0%, rgba(9,12,16,.46) 46%, rgba(9,12,16,.94) 100%),
             radial-gradient(90% 70% at 76% 16%, rgba(176,137,79,.22), transparent 62%); }
.hero::before{ background:none; } /* replaced by hero-media scrim on cine heroes */
.hero:not(.hero-cine)::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 90% at 78% 12%, rgba(176,137,79,.17), transparent 55%),
             radial-gradient(100% 80% at 12% 90%, rgba(26,34,45,.9), transparent 60%); }
/* film grain */
.hero-grain::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); }

/* hero entrance — transform-only staggered rise (never hides text) */
@media (prefers-reduced-motion:no-preference){
  .hero-stage{ transition:transform 1s var(--ease-out); }
  .hero-stage:nth-child(2){ transition-delay:.08s; }
  .hero-stage:nth-child(3){ transition-delay:.16s; }
  .hero-stage:nth-child(4){ transition-delay:.24s; }
  .hero-stage:nth-child(5){ transition-delay:.32s; }
  @starting-style{ .hero-stage{ transform:translateY(30px); } }
}

/* ---- marquee (unused) ---- */
.marquee{ overflow:hidden; background:var(--ink-2); border-block:1px solid var(--ink-line); position:relative; }
.marquee::before,.marquee::after{ content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none; }
.marquee::before{ left:0; background:linear-gradient(90deg,var(--ink-2),transparent); }
.marquee::after{ right:0; background:linear-gradient(-90deg,var(--ink-2),transparent); }
.marquee-track{ display:flex; align-items:center; gap:52px; width:max-content; padding:20px 0; }
@media (prefers-reduced-motion:no-preference){
  .marquee-track{ animation:marq 46s linear infinite; }
  .marquee:hover .marquee-track{ animation-play-state:paused; }
}
@keyframes marq{ to{ transform:translateX(-50%); } }
.mq-item{ display:flex; align-items:baseline; gap:13px; white-space:nowrap; }
.mq-item b{ font-family:var(--serif); font-weight:600; font-size:25px; color:var(--gold-2); }
.mq-item span{ font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-mute); }
.mq-dot{ width:5px; height:5px; transform:rotate(45deg); background:var(--gold); opacity:.55; flex:none; }

/* ---- Scroll reveals (geometry-driven; default = fully visible) ---- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{ animation:riseIn both var(--ease-out); animation-timeline:view(); animation-range:entry 5% entry 70%; }
    .sec-head{ animation:riseIn both var(--ease-out); animation-timeline:view(); animation-range:entry 0% entry 55%; }
    .figure img,.photo-band .band-img{ }
  }
}
@keyframes riseIn{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }

/* ---- Full-bleed photo band (parallax drift) ---- */
.photo-band{ position:relative; overflow:hidden; min-height:56vh; display:flex; align-items:center; isolation:isolate;
  background:var(--ink); color:var(--bone); }
.photo-band .band-img{ position:absolute; left:0; right:0; top:-10%; height:120%; width:100%; object-fit:cover; z-index:-1; }
.photo-band::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(9,12,16,.82), rgba(9,12,16,.55) 50%, rgba(9,12,16,.85)); }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .photo-band .band-img{ animation:bandDrift both linear; animation-timeline:view(); animation-range:cover; }
  }
}
@keyframes bandDrift{ from{ transform:translateY(-3.5%);} to{ transform:translateY(3.5%);} }

/* ---- Buttons: press feedback + sheen ---- */
.btn{ position:relative; overflow:hidden; transition:transform .16s var(--ease-out), background .3s, color .3s, box-shadow .3s; }
.btn:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){
  .btn::before{ content:""; position:absolute; top:0; bottom:0; left:-45%; width:38%; pointer-events:none;
    background:linear-gradient(100deg, transparent, rgba(255,252,242,.32), transparent);
    transform:skewX(-18deg) translateX(-140%); transition:transform .05s; }
  .btn:hover::before{ transform:skewX(-18deg) translateX(400%); transition:transform .7s var(--ease-out); }
  .btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -16px rgba(176,137,79,.45); }
}

/* ---- Cards: lift + gold hairline draw ---- */
.pa-card,.rel-card{ position:relative; }
.pa-card::after,.rel-card::after{ content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--gold), var(--gold-3)); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .pa-card:hover::after,.rel-card:hover::after{ transform:scaleX(1); }
  .pa-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
  .res-card:hover .res-tag{ transform:rotate(0deg); }
}

/* ---- Verdict stamp ---- */
.res-tag{ transform:rotate(-2deg); border-width:1.5px; box-shadow:inset 0 0 0 1.5px rgba(176,137,79,.0), 0 0 0 3px var(--gold-soft);
  transition:transform .3s var(--ease-out); font-weight:700; }

/* ---- Portrait treatments ---- */
.figure{ background:radial-gradient(130% 110% at 50% 0%, var(--ink-3), var(--ink)); }
.figure img{ transition:transform .8s var(--ease-io); }
@media (hover:hover) and (pointer:fine){ .figure:hover img{ transform:scale(1.035); } }
.portrait-cut{ display:flex; align-items:flex-end; justify-content:center; padding-top:34px; }
.portrait-cut img{ width:82%; max-width:420px; height:auto; object-fit:contain; filter:drop-shadow(0 30px 44px rgba(0,0,0,.55)); }
.figure-frame{ position:relative; }
.figure-frame::after{ content:""; position:absolute; inset:14px; border:1px solid rgba(199,164,103,.35); pointer-events:none; }

/* ---- Editorial details ---- */
.dropcap::first-letter{ font-family:var(--serif); font-weight:500; font-size:3.3em; float:left; line-height:.82;
  padding:8px 14px 0 0; color:var(--gold); }
.gold-rule{ height:1px; border:0; margin:0; background:linear-gradient(90deg, var(--gold), transparent 70%); opacity:.6; }
.stat b{ letter-spacing:-.01em; }
.hero-meta b{ color:var(--gold-3); }
.dark .eyebrow,.ink-2 .eyebrow{ color:var(--gold-2); }
.site-foot{ border-top:1px solid rgba(176,137,79,.28); }

/* ---- Nav CTA refinement ---- */
.nav .btn{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }

/* ---- Reduced motion: strip movement, keep content ---- */
@media (prefers-reduced-motion:reduce){
  .marquee-track{ animation:none; }
  .hero-stage{ transition:none; }
}

/* ---- Award plaques & accreditations ---- */
.award-wall{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px; }
.plaque{ position:relative; background:radial-gradient(120% 100% at 50% 0%, var(--ink-3), var(--ink-2));
  border:1px solid rgba(176,137,79,.32); padding:34px 22px 26px; text-align:center; color:var(--bone);
  transition:transform .4s var(--ease-out), box-shadow .4s, border-color .4s; }
.plaque::after{ content:""; position:absolute; inset:9px; border:1px solid rgba(199,164,103,.22); pointer-events:none; }
@media (hover:hover) and (pointer:fine){
  .plaque:hover{ transform:translateY(-5px); border-color:rgba(199,164,103,.65);
    box-shadow:0 22px 44px -20px rgba(176,137,79,.35); }
}
.plaque .seal{ width:104px; height:104px; margin:0 auto 14px; display:block; }
.plaque .seal .yr{ font-family:var(--serif); font-weight:600; font-size:30px; fill:var(--bone); }
.plaque .seal .arc-t{ font-family:var(--sans); font-weight:600; font-size:8.6px; letter-spacing:.24em; fill:var(--gold-2); }
.plaque .rank{ font-family:var(--serif); font-size:1.18rem; font-weight:500; color:var(--gold-3); line-height:1.2; }
.plaque .who{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-mute); margin-top:7px; }
.plaque-featured{ grid-column:span 1; }
.award-wall.featured{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); max-width:920px; margin-inline:auto; }

.accred-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.accred{ display:flex; align-items:center; gap:16px; border:1px solid var(--ink-line); padding:18px 20px;
  background:var(--ink-2); color:var(--bone); transition:border-color .35s; }
@media (hover:hover) and (pointer:fine){ .accred:hover{ border-color:rgba(199,164,103,.5); } }
.accred svg{ width:34px; height:34px; flex:none; color:var(--gold-2); }
.accred b{ font-family:var(--serif); font-weight:500; font-size:1.05rem; display:block; }
.accred span{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-mute); }
.light-panel .accred{ background:var(--bone-2); color:var(--ink); border-color:var(--rule); }
.light-panel .accred span{ color:var(--ink-mute); }

/* ============================================================
   v3 REDESIGN — palette system, button hierarchy, client journey
   (appended → wins the cascade; consolidate on next refactor)
   ============================================================ */
:root{
  /* Ink — deep, cool, rich */
  --ink:#07090D; --ink-2:#0C1016; --ink-3:#141A23; --ink-4:#1F2731;
  --ink-line:rgba(233,226,214,.13);
  /* Paper — refined, cooler (escapes the sand/cream tell) */
  --bone:#F0EEE9; --bone-2:#F8F7F3; --paper:#FFFFFF;
  --parchment:#E7E3DA;             /* mid warm layer */
  /* Brass — authority accent */
  --gold:#B0894F; --gold-2:#CBA968; --gold-3:#E7D2A2;
  --gold-soft:rgba(176,137,79,.13);
  /* Oxblood — humanity / urgency accent */
  --oxblood:#7A2E2E; --oxblood-2:#B15A54; --oxblood-soft:rgba(122,46,46,.16);
  /* Text on light */
  --ink-soft:#343B45; --ink-mute:#636B76;
  --bone-mute:#9AA2AE;
  --rule:rgba(10,12,16,.13); --rule-2:rgba(10,12,16,.07);
  --shadow:0 30px 70px -30px rgba(5,7,10,.55);
  --shadow-sm:0 14px 34px -18px rgba(5,7,10,.5);
}

/* ---- Button hierarchy (redesigned) ---- */
.btn{
  --bg:var(--gold); --fg:#1c1406;
  border-radius:2px; letter-spacing:.015em; font-weight:600;
  padding:16px 28px; border:1px solid transparent;
  background-color:var(--gold);
  background:linear-gradient(177deg, var(--gold-2), var(--gold) 60%, #9c7841);
  color:var(--fg); box-shadow:inset 0 1px 0 rgba(255,246,224,.4), 0 10px 26px -14px rgba(176,137,79,.5);
}
.btn-lg{ padding:19px 36px; font-size:15.5px; }
.btn:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,246,224,.5), 0 20px 40px -16px rgba(176,137,79,.6); }
.btn:active{ transform:translateY(0) scale(.985); }
/* Secondary — refined outline */
.btn-ghost{ --fg:var(--ink); background:transparent; border:1px solid var(--rule);
  box-shadow:none; font-weight:600; }
.dark .btn-ghost,.hero .btn-ghost,.ink-2 .btn-ghost,.site-foot .btn-ghost,.reassure .btn-ghost{
  --fg:var(--bone); border-color:rgba(233,226,214,.28); }
.btn-ghost:hover{ background:rgba(176,137,79,.08); border-color:var(--gold); box-shadow:none; }
.dark .btn-ghost:hover,.hero .btn-ghost:hover,.reassure .btn-ghost:hover{ background:rgba(233,226,214,.06); border-color:var(--gold-2); color:var(--bone); }
/* Live pulse dot — signals "answered now" on urgent calls */
.btn .live{ width:8px; height:8px; border-radius:50%; background:#4ea36b; position:relative; flex:none; }
.btn .live::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid #4ea36b; }
@media (prefers-reduced-motion:no-preference){ .btn .live::after{ animation:pulseRing 2s var(--ease-out) infinite; } }
@keyframes pulseRing{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(1.9); opacity:0; } }

/* ---- Refined section rhythm ---- */
body{ background:var(--bone); }
.eyebrow{ color:var(--gold); }
.eyebrow.ox{ color:var(--oxblood); }
.dark .eyebrow.ox,.reassure .eyebrow.ox{ color:var(--oxblood-2); }

/* ---- Hero scroll cue ---- */
.scroll-cue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:9px; color:var(--bone-mute);
  font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; }
.scroll-cue .line{ width:1px; height:44px; background:linear-gradient(var(--gold-2), transparent); position:relative; overflow:hidden; }
@media (prefers-reduced-motion:no-preference){
  .scroll-cue .line::after{ content:""; position:absolute; top:-14px; left:0; width:1px; height:14px; background:var(--gold-3);
    animation:cueRun 2.2s var(--ease-io) infinite; }
}
@keyframes cueRun{ 0%{ top:-14px; opacity:0; } 30%{ opacity:1; } 100%{ top:44px; opacity:0; } }
@media (max-width:760px){ .scroll-cue{ display:none; } }

/* ---- Reassurance strip (oxblood — the human moment) ---- */
.reassure{ background-color:var(--ink); background:
    radial-gradient(80% 140% at 18% 0%, rgba(122,46,46,.34), transparent 60%),
    linear-gradient(180deg, var(--ink), var(--ink-2));
  color:var(--bone); border-block:1px solid var(--ink-line); }
.reassure-in{ padding-block:clamp(40px,6vw,68px); display:grid; grid-template-columns:1.35fr auto; gap:34px 56px; align-items:center; }
.reassure-eye{ font-size:11.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--oxblood-2); margin-bottom:14px; display:flex; align-items:center; gap:11px; }
.reassure-eye::before{ content:""; width:26px; height:1px; background:var(--oxblood-2); }
.reassure-lead{ font-family:var(--serif); font-size:clamp(1.3rem,2.4vw,1.85rem); line-height:1.3; color:var(--bone); max-width:24ch; margin:0; font-weight:400; }
.reassure-lead em{ font-style:italic; color:var(--gold-3); }
.reassure-meta{ display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:20px; }
.reassure-meta span{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:#D9D3C6; }
.reassure-meta svg{ width:16px; height:16px; color:var(--gold-2); flex:none; }
.reassure-cta{ display:flex; flex-direction:column; gap:12px; align-items:stretch; }
.reassure-cta .fine{ font-size:12px; color:var(--bone-mute); text-align:center; letter-spacing:.02em; }
@media (max-width:820px){ .reassure-in{ grid-template-columns:1fr; gap:26px; } .reassure-cta{ align-items:flex-start; } }

/* ---- Process — "what happens when you call" ---- */
.process{ background-color:var(--ink-2); background:linear-gradient(180deg, var(--ink-2), var(--ink)); color:var(--bone); }
.proc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:14px; counter-reset:step; }
.proc-step{ position:relative; padding:30px 26px 26px; border-top:1px solid var(--ink-line); }
.proc-step::before{ counter-increment:step; content:"0" counter(step); position:absolute; top:-20px; left:24px;
  font-family:var(--serif); font-size:2.6rem; color:transparent; -webkit-text-stroke:1px rgba(203,169,104,.55); }
.proc-step .node{ position:absolute; top:-6px; left:26px; width:11px; height:11px; transform:rotate(45deg);
  background:var(--gold); box-shadow:0 0 0 4px var(--ink-2); }
.proc-step h3{ font-size:1.24rem; color:var(--gold-3); margin:22px 0 9px; }
.proc-step p{ font-size:14.5px; color:#CBD0D8; margin:0; }
@media (max-width:900px){ .proc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .proc-grid{ grid-template-columns:1fr; } .proc-step{ padding-left:30px; } }

/* ---- Portrait: promote the intro figure ---- */
.figure-cap{ letter-spacing:.02em; }
.intro-person .figure{ box-shadow:var(--shadow); }

/* Solid background-color fallbacks — declared AFTER the gradient shorthands so they
   are not reset to transparent (gradient image persists; color reads correctly). */
.btn:not(.btn-ghost){ background-color:var(--gold); }
.btn-ghost{ background-color:transparent; }
.reassure{ background-color:var(--ink); }
.process{ background-color:var(--ink-2); }

/* ---- Accent legibility system (AA): darker brass on light, brighter tints on dark ---- */
:root{ --gold-link:#7d5f30; --oxblood-2:#C7726A; }
.eyebrow{ color:var(--gold-link); }
.dark .eyebrow,.ink-2 .eyebrow,.hero .eyebrow,.process .eyebrow,.reassure .eyebrow,.photo-band .eyebrow{ color:var(--gold-2); }
.eyebrow.ox{ color:var(--oxblood); }
.dark .eyebrow.ox,.process .eyebrow.ox,.reassure .eyebrow.ox{ color:var(--oxblood-2); }
.link-arrow{ color:var(--gold-link); }
.dark .link-arrow,.hero .link-arrow,.ink-2 .link-arrow,.process .link-arrow,.photo-band .link-arrow{ color:var(--gold-2); }
/* dark-section body text on the new journey sections (not tagged .dark) */
.process .lede,.reassure .lede{ color:#D9D3C6; }
.process .muted,.reassure .muted{ color:var(--bone-mute); }
.process h2,.reassure h2{ color:var(--bone); }
/* nav CTA keeps intended dark-on-brass text (was inheriting .nav a colour) */
.nav a.btn{ color:#1c1406; }
/* in-prose gold links get the darker readable brass */
.prose a{ color:var(--gold-link); }

/* ============================================================
   COUNSEL — light, minimal, deep forest green. (final layer, wins cascade)
   Approved direction: light-dominant, single green accent, airy serif,
   pill buttons, soft rounded cards. Two dark anchors: CTA + footer.
   ============================================================ */
:root{
  --paper:#FBFBF8; --bone:#FBFBF8; --bone-2:#FFFFFF;
  --stone:#F1EFE9; --stone-2:#E8E5DC;
  --ink:#191C1A; --ink-soft:#3E423F; --ink-mute:#71766F;
  --green:#1E3A31; --green-2:#2C5446; --green-3:#5C7A6C; --green-soft:rgba(30,58,49,.07);
  --cream:#F3F2EB; --forest-deep:#12211B;
  --line:rgba(25,28,26,.13); --rule:rgba(25,28,26,.13); --rule-2:rgba(25,28,26,.07);
  --shadow-sm:0 18px 42px -24px rgba(20,35,26,.32); --shadow:0 30px 66px -30px rgba(20,35,26,.35);
  /* remap legacy accent tokens → green so all existing usages recolour */
  --gold:var(--green); --gold-2:var(--green-2); --gold-3:var(--green-3);
  --gold-soft:var(--green-soft); --gold-link:var(--green);
  --oxblood:var(--green); --oxblood-2:var(--green-3);
  --ink-line:rgba(25,28,26,.13); --bone-mute:#AEC0B3;
}
body{ background:var(--paper); color:var(--ink); }
h1,h2,h3,h4{ font-weight:400; letter-spacing:-.016em; }
.hero h1,.h-xl,.h-lg{ font-weight:300; }

/* Flip every dark-assuming section to light */
.dark,.ink-2,.hero,.process,.reassure{ background:var(--paper); color:var(--ink); }
.ink-2,.process,.reassure{ background:var(--stone); }
.dark h1,.dark h2,.dark h3,.ink-2 h1,.ink-2 h2,.ink-2 h3,
.process h2,.reassure h2,.hero h1{ color:var(--ink); }
.dark .lede,.hero .lede,.ink-2 .lede,.process .lede,.reassure .lede,.hero .muted{ color:var(--ink-soft); }
.dark .muted,.hero .muted,.ink-2 .muted,.process .muted,.reassure .muted{ color:var(--ink-mute); }
.eyebrow,.dark .eyebrow,.ink-2 .eyebrow,.hero .eyebrow,.process .eyebrow,.reassure .eyebrow,
.eyebrow.ox,.dark .eyebrow.ox,.process .eyebrow.ox,.reassure .eyebrow.ox,.hero .kicker{ color:var(--green-2); }
.eyebrow::before{ background:var(--green-2); }

/* Hero → light, drop dark media/grain */
.hero-media{ display:none; } .hero::before{ display:none; } .hero-grain::after{ display:none; }
.hero-meta{ border-color:var(--line); } .hero-meta b{ color:var(--green); } .hero-meta div{ color:var(--ink-mute); }
.hero .link-arrow{ color:var(--green); }
.scroll-cue{ color:var(--ink-mute); } .scroll-cue .line{ background:linear-gradient(var(--green-2),transparent); }
.scroll-cue .line::after{ background:var(--green); }

/* Buttons → pill, green */
.btn{ border-radius:100px; background:var(--green); color:var(--cream); border:1px solid var(--green);
  box-shadow:none; font-weight:600; }
.btn::before{ display:none; }
.btn:not(.btn-ghost){ background-color:var(--green); }
.btn:hover{ transform:translateY(-1px); background:var(--green-2); background-color:var(--green-2); box-shadow:var(--shadow-sm); }
.btn-ghost{ border-radius:100px; background:transparent; background-color:transparent; color:var(--ink); border:1px solid var(--line); }
.dark .btn-ghost,.hero .btn-ghost,.ink-2 .btn-ghost,.reassure .btn-ghost,.process .btn-ghost,.site-foot .btn-ghost{ color:var(--ink); border-color:var(--line); }
.btn-ghost:hover,.hero .btn-ghost:hover,.ink-2 .btn-ghost:hover,.reassure .btn-ghost:hover{ background:var(--green-soft); border-color:var(--green); color:var(--green); }
.btn .live{ background:#4ea36b; }

/* Header / nav / topbar → light */
.site-head{ background:rgba(251,251,248,.88); border-color:var(--line); }
.brand{ color:var(--ink); } .brand small{ color:var(--green-2); }
.nav a{ color:var(--ink-soft); } .nav a::after{ background:var(--green); }
.nav a.btn{ color:var(--cream); }
.topbar{ background:var(--stone); color:var(--ink-soft); border-color:var(--line); }
.topbar a{ color:var(--ink-soft); } .topbar .tb-urgent{ color:var(--green); }

/* Cards → rounded, soft, light */
.pa-grid{ background:transparent; border:0; gap:16px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.pa-card,.res-card,.rel-card{ border-radius:14px; border:1px solid var(--line); background:var(--bone-2); color:var(--ink-soft); }
.pa-card::after,.rel-card::after{ display:none; }
.pa-card:hover,.res-card:hover,.rel-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--green-3); background:var(--bone-2); }
.pa-card h3,.res-card h3,.rel-card h4,.rel-card h3{ color:var(--ink); }
.pa-card .pa-group,.res-card .res-charge{ color:var(--ink); } .pa-card .pa-group{ color:var(--green-2); }
.res-card .res-court{ color:var(--ink-mute); } .res-card p{ color:var(--ink-soft); }
.res-tag{ border-radius:100px; background:var(--green-soft); color:var(--green); border:1px solid transparent; transform:none; box-shadow:none; font-weight:600; }
.res-card .res-cite{ color:var(--ink-mute); }
.res-filter button{ border-radius:100px; border-color:var(--line); color:var(--ink-soft); }
.res-filter button.active{ background:var(--green); border-color:var(--green); color:var(--cream); }

/* Stats → light */
.stats{ background:var(--line); border-color:var(--line); } .stat{ background:var(--bone-2); }
.stat b{ color:var(--green); } .stat span{ color:var(--ink-mute); }

/* Marquee → light */
.marquee{ background:var(--stone); border-color:var(--line); }
.marquee::before{ background:linear-gradient(90deg,var(--stone),transparent); }
.marquee::after{ background:linear-gradient(-90deg,var(--stone),transparent); }
.mq-item b{ color:var(--green); } .mq-item span{ color:var(--ink-mute); } .mq-dot{ background:var(--green-3); }

/* Plaques + accreditations → light with green seals */
.plaque{ background:var(--bone-2); border:1px solid var(--line); color:var(--ink); border-radius:12px; }
.plaque::after{ border-color:var(--green-soft); }
.plaque .seal circle{ stroke:var(--green-2); } .plaque .seal rect{ fill:var(--green-2); }
.plaque .seal path{ stroke:var(--green-2); } .plaque .seal .yr{ fill:var(--ink); } .plaque .seal .arc-t{ fill:var(--green-2); }
.plaque .rank{ color:var(--green); } .plaque .who{ color:var(--ink-mute); }
.plaque:hover{ border-color:var(--green-3); box-shadow:var(--shadow-sm); }
.accred{ background:var(--bone-2); border:1px solid var(--line); color:var(--ink); border-radius:10px; }
.accred svg{ color:var(--green-2); } .accred b{ color:var(--ink); } .accred span{ color:var(--ink-mute); }
.light-panel .accred{ background:var(--bone-2); }

/* Reassurance → light stone */
.reassure{ background:var(--stone); color:var(--ink); }
.reassure-eye{ color:var(--green-2); } .reassure-eye::before{ background:var(--green-2); }
.reassure-lead{ color:var(--ink); } .reassure-lead em{ color:var(--green); }
.reassure-meta span{ color:var(--ink-soft); } .reassure-meta svg{ color:var(--green-2); }
.reassure-cta .fine{ color:var(--ink-mute); }

/* Process → light */
.process{ background:var(--stone); color:var(--ink); } .process h2{ color:var(--ink); }
.proc-step{ border-color:var(--line); } .proc-step::before{ -webkit-text-stroke:1px rgba(30,58,49,.5); }
.proc-step .node{ background:var(--green); box-shadow:0 0 0 4px var(--stone); }
.proc-step h3{ color:var(--green); } .proc-step p{ color:var(--ink-soft); }

/* Figures → light stone panel */
.figure{ background:var(--stone); } .figure-frame::after{ border-color:var(--green-soft); }

/* Photo band (courtroom image) → keep as green-scrim image moment */
.photo-band{ background:var(--green); color:var(--cream); }
.photo-band::after{ background:linear-gradient(180deg,rgba(18,33,27,.72),rgba(18,33,27,.5) 50%,rgba(18,33,27,.82)); }
.pullquote{ color:var(--cream); } .pullquote-cite{ color:var(--sage); }

/* Prose + callouts + FAQ + pills + tables */
.prose a{ color:var(--green); }
.callout{ background:var(--stone-2); color:var(--ink); border:1px solid var(--line); }
.callout p{ color:var(--ink-soft); } .callout b{ color:var(--green); }
.faq summary{ color:var(--ink); } .faq summary::after{ color:var(--green); } .faq details p{ color:var(--ink-soft); }
.court-pill{ color:var(--ink-soft); border:1px solid var(--line); border-radius:100px; }
.court-pill:hover{ border-color:var(--green); color:var(--green); }
.court-pills.light .court-pill{ color:var(--ink-soft); border-color:var(--line); }
.pen-table td:first-child{ color:var(--ink); } .crumb a:hover{ color:var(--green); }

/* Contact form (was dark) → light */
.field input,.field textarea,.field select{ background:var(--bone-2); border:1px solid var(--line); color:var(--ink); border-radius:9px; }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--green); }
label{ color:var(--ink-mute); } .form-note{ color:var(--ink-mute); }
.contact-grid{ background:var(--line); border-color:var(--line); }
.contact-cell{ background:var(--bone-2); } .contact-cell .cc-l{ color:var(--green-2); }
.contact-cell a,.contact-cell p{ color:var(--ink); }

/* Two dark anchors: CTA + footer → deep green */
.cta-final{ background:var(--green); color:var(--cream); }
.cta-final .band-img{ display:none; }
.cta-final .eyebrow{ color:var(--sage); } .cta-final h2{ color:var(--cream); } .cta-final .lede{ color:#CFDAD0; }
.cta-final .btn-ghost{ color:var(--cream); border-color:rgba(243,242,235,.32); }
.cta-final .btn-ghost:hover{ background:rgba(243,242,235,.1); border-color:var(--cream); color:var(--cream); }
.site-foot{ background:var(--forest-deep); color:var(--bone-mute); border-top:1px solid var(--green); }
.foot-brand,.site-foot h4{ color:var(--cream); } .site-foot a:hover{ color:var(--sage); }
.foot-disc{ color:#7d8a80; }

/* mobile call bar → green */
.callbar{ background:var(--forest-deep); border-top:1px solid var(--green); }
.callbar a.primary{ background:var(--green); color:var(--cream); } .callbar a{ color:var(--cream); }

/* selection / focus */
::selection{ background:var(--green); color:var(--cream); } :focus-visible{ outline-color:var(--green); }

/* AA tuning: darker muted for small text on stone; skip-link legible */
:root{ --ink-mute:#61665D; }
.skip{ color:var(--cream); }
.scroll-cue{ color:var(--ink-soft); }

/* Accent text on the deep-green anchors (green-3 too dark on green) */
.cta-final .eyebrow,.photo-band .eyebrow{ color:var(--sage); }
.pullquote-cite{ color:var(--sage); }
.site-foot .btn-ghost{ color:var(--cream); border-color:rgba(243,242,235,.3); }
.site-foot .btn-ghost:hover{ background:rgba(243,242,235,.1); border-color:var(--cream); color:var(--cream); }
.site-foot li,.site-foot .foot-bottom span{ color:var(--bone-mute); }

/* ---- Guide PDF downloads ---- */
.dl-bar{ display:flex; align-items:center; justify-content:space-between; gap:22px;
  background:var(--stone); border:1px solid var(--line); border-radius:12px; padding:16px 22px; }
.dl-bar>div{ display:flex; align-items:center; gap:14px; }
.dl-bar svg{ width:22px; height:22px; color:var(--green-2); flex:none; }
.dl-bar span{ font-size:14.5px; color:var(--ink-soft); }
.dl-bar b{ color:var(--ink); font-weight:600; }
@media (max-width:620px){ .dl-bar{ flex-direction:column; align-items:flex-start; } }

.dl-feature{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  margin-top:24px; background:var(--green); color:var(--cream); border-radius:16px; padding:34px 36px; }
.dl-feature>div{ display:flex; align-items:flex-start; gap:18px; max-width:70ch; }
.dl-feature>div>svg{ width:30px; height:30px; color:var(--green-3); flex:none; margin-top:4px; }
.dl-feature .eyebrow{ color:var(--sage); }
.dl-feature h3{ font-family:var(--serif); font-weight:400; font-size:1.5rem; color:var(--cream); }
.dl-feature .muted{ color:#CFDAD0; }
.dl-feature .btn{ background:var(--cream); color:var(--green); border-color:var(--cream); flex:none; }
.dl-feature .btn:hover{ background:#fff; color:var(--green); }

/* ============================================================
   v4 — conservative tone, redesigned mobile menu, responsive
   ============================================================ */
/* Topbar: calm (no urgent line) */
.topbar .tb-urgent{ display:none; }
.tb-left{ color:var(--ink-mute); font-size:13px; }
.topbar .tb-right{ display:flex; gap:24px; align-items:center; }
.topbar .tb-right a[href^="/contact"]{ color:var(--green); font-weight:600; }
@media (max-width:720px){ .topbar .tb-right span{ display:none; } }
@media (max-width:520px){ .tb-left{ display:none; } .topbar .wrap{ justify-content:flex-end; } }

/* ---- Grid overflow guard (never exceed container on small phones) ---- */
.pa-grid{ grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); }
.res-grid{ grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)); }
.related{ grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); }
.award-wall{ grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); }
.accred-row{ grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.contact-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); }

/* ---- Redesigned mobile menu (Counsel: forest panel, large targets, contact) ---- */
.nav-toggle span{ background:var(--ink); }
.nav-backdrop{ position:fixed; inset:0; background:rgba(10,14,11,.45); z-index:65;
  opacity:0; transition:opacity .35s var(--ease-out); }
body.nav-open .nav-backdrop{ opacity:1; }
.nav-foot{ display:none; }
@media (max-width:1240px){
  .nav{ inset:0 0 0 auto; width:min(90vw,400px); background:var(--forest-deep); color:var(--cream);
    padding:88px 34px 34px; gap:4px; box-shadow:-30px 0 80px -30px rgba(0,0,0,.6);
    overflow-y:auto; justify-content:flex-start; }
  .nav a{ color:var(--cream); font-size:20px; font-family:var(--serif); font-weight:400; letter-spacing:-.01em;
    padding:15px 0; width:100%; border-bottom:1px solid rgba(243,242,235,.1); }
  .nav a::after{ display:none; }
  .nav a[aria-current]{ color:var(--sage); }
  .nav a.nav-cta{ border:0; background:var(--cream); color:var(--green); text-align:center; justify-content:center;
    font-family:var(--sans); font-size:15px; font-weight:600; border-radius:100px; padding:16px; margin:22px 0 6px; }
  .nav-foot{ display:flex; flex-direction:column; gap:14px; margin-top:26px; padding-top:22px;
    border-top:1px solid rgba(243,242,235,.14); }
  .nav-foot a{ color:var(--cream); font-size:15px; font-family:var(--sans); display:flex; align-items:center; gap:11px;
    padding:0; border:0; width:auto; }
  .nav-foot a svg{ width:17px; height:17px; color:var(--sage); flex:none; }
  .nav-foot span{ color:var(--bone-mute); font-size:13px; line-height:1.5; }
  .nav-toggle span{ background:var(--ink); }
  body.nav-open .nav-toggle{ position:fixed; right:calc(var(--gutter) - 4px); top:16px; z-index:80; }
  body.nav-open .nav-toggle span{ background:var(--cream); }
}
@media (min-width:1241px){ .nav-backdrop{ display:none; } }

/* ---- Responsive polish ---- */
@media (max-width:1024px){ :root{ --maxw:960px; } }
@media (max-width:640px){
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ justify-content:center; }
  .reassure-cta .btn{ justify-content:center; }
}
@media (max-width:560px){
  .btn-lg{ padding:16px 24px; font-size:15px; }
  .dl-feature{ padding:26px 22px; } .dl-feature .btn{ width:100%; justify-content:center; }
  .proc-step::before{ font-size:2.2rem; }
}
/* prevent any horizontal scroll */
html,body{ overflow-x:clip; }

/* FIX: backdrop-filter on .site-head creates a containing block that traps the
   position:fixed mobile nav inside the header. Disable it on mobile so the panel
   is full-viewport-height. (Known gotcha: never backdrop-filter an ancestor of a fixed panel.) */
@media (max-width:1240px){
  /* fully opaque: without the blur, any alpha lets page text ghost through the header */
  .site-head{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--bone); }
}

/* ============================================================
   v5 FLAGSHIP — bespoke art direction: home + results ("The Record")
   ============================================================ */
/* ---- Editorial hero (home): asymmetric grid + standing card ---- */
.hero-flag .hero-inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(40px,6vw,96px); align-items:center;
  padding-block:clamp(72px,11vh,140px); }
.hero-flag h1{ font-size:clamp(46px,6.6vw,92px); }
.standing{ background:var(--bone-2); border:1px solid var(--line); border-radius:18px; padding:30px 32px 26px;
  box-shadow:var(--shadow-sm); max-width:420px; justify-self:end; width:100%; }
.standing .st-hd{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:6px; }
.standing .st-hd b{ font-family:var(--serif); font-weight:400; font-size:1.25rem; color:var(--ink); }
.standing .st-hd span{ font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); }
.st-row{ display:flex; align-items:baseline; gap:16px; padding:8.5px 0; border-bottom:1px solid var(--rule-2); }
.st-row:last-of-type{ border-bottom:0; }
.st-row .yr{ font-family:var(--serif); font-size:1.05rem; color:var(--green); min-width:46px; }
.st-row .rk{ font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.st-row .rk.lead{ color:var(--ink-mute); }
.standing .st-ft{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-mute); font-style:italic; font-family:var(--serif); }
@media (max-width:900px){
  .hero-flag .hero-inner{ grid-template-columns:1fr; }
  .standing{ justify-self:start; max-width:520px; }
}

/* ---- The Record: header numbers strip ---- */
.rec-nums{ display:flex; flex-wrap:wrap; gap:10px 34px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.rec-nums span{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }
.rec-nums b{ font-family:var(--serif); font-weight:400; font-size:1.3rem; color:var(--green); margin-right:7px; letter-spacing:0; }

/* ---- The Record: ledger ---- */
.ledger{ border-top:2px solid var(--ink); }
.lg-row{ border-bottom:1px solid var(--rule); }
.lg-row summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:150px 1fr 30px; gap:22px;
  align-items:baseline; padding:20px 4px; transition:background .25s; }
.lg-row summary::-webkit-details-marker{ display:none; }
@media (hover:hover){ .lg-row summary:hover{ background:var(--green-soft); } }
.lg-verdict{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green); }
.lg-main b{ font-family:var(--serif); font-weight:500; font-size:1.22rem; color:var(--ink); display:block; line-height:1.25; }
.lg-main small{ display:block; font-size:13px; color:var(--ink-mute); margin-top:4px; }
.lg-plus{ position:relative; width:22px; height:22px; align-self:center; }
.lg-plus::before,.lg-plus::after{ content:""; position:absolute; inset:0; margin:auto; background:var(--green); transition:transform .3s var(--ease-out); }
.lg-plus::before{ width:14px; height:1.5px; } .lg-plus::after{ width:1.5px; height:14px; }
.lg-row[open] .lg-plus::after{ transform:rotate(90deg); }
.lg-body{ padding:2px 4px 26px; max-width:76ch; }
.lg-body .lead{ font-family:var(--serif); font-size:1.15rem; color:var(--ink); margin-bottom:8px; }
.lg-body p{ font-size:15px; color:var(--ink-soft); }
.lg-body .cite{ font-size:13px; color:var(--ink-mute); font-style:italic; }
.lg-year{ display:grid; grid-template-columns:150px 1fr; gap:22px; }
.lg-yearlabel{ font-family:var(--serif); font-weight:300; font-size:clamp(2rem,3.4vw,2.9rem); color:var(--green-3); padding-top:22px; }
.lg-year .lg-rows{ min-width:0; }
@media (max-width:760px){
  .lg-year{ grid-template-columns:1fr; gap:0; }
  .lg-yearlabel{ padding:26px 0 4px; border-bottom:2px solid var(--ink); font-size:1.7rem; }
  .lg-row summary{ grid-template-columns:1fr 26px; grid-template-areas:"v p" "m m"; row-gap:8px; }
  /* scoped to summary — .lgr (home rows) defines no named areas; bare grid-area there
     sends verdict+charge into the same implicit cell (overlapping text on mobile) */
  .lg-row summary .lg-verdict{ grid-area:v; } .lg-row summary .lg-main{ grid-area:m; } .lg-row summary .lg-plus{ grid-area:p; }
}

/* home record rows (compact, link out) */
.rec-link{ text-decoration:none; display:block; }
.rec-link .lg-main b{ transition:color .25s; }
@media (hover:hover){ .rec-link:hover .lg-main b{ color:var(--green); } }

/* ---- Results masthead ---- */
.masthead-flag{ padding:clamp(64px,10vh,120px) 0 34px; border-bottom:2px solid var(--ink); }
.masthead-flag h1{ font-family:var(--serif); font-weight:300; font-size:clamp(56px,9vw,124px); letter-spacing:-.02em; line-height:.95; }
.masthead-flag .sub{ display:flex; flex-wrap:wrap; gap:8px 30px; margin-top:22px; align-items:baseline; }
.masthead-flag .sub p{ font-size:clamp(16px,1.5vw,19px); color:var(--ink-soft); max-width:60ch; margin:0; }

/* flagship companions */
.rec-link{ border-bottom:1px solid var(--rule); }
.rec-link .lgr{ display:grid; grid-template-columns:150px 1fr 30px; gap:22px; align-items:baseline; padding:20px 4px; transition:background .25s; }
@media (hover:hover){ .rec-link:hover .lgr{ background:var(--green-soft); } }
@media (max-width:760px){ .rec-link .lgr{ grid-template-columns:1fr; gap:8px; } .rec-link .lg-plus{ display:none; } }
.masthead-flag .kicker{ font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--green-2); margin-bottom:18px; }
.res-ledger{ border-top:2px solid var(--ink); margin-top:26px; }
.res-ledger .lg-year:first-child .lg-yearlabel{ }
.foot-brand small{ color:var(--sage); }

/* ---- Profile masthead ---- */
.profile-hero{ padding:clamp(56px,9vh,110px) 0 clamp(30px,4vw,54px); }
.profile-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,6vw,90px); align-items:center; }
.profile-hero .kicker{ font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--green-2); margin-bottom:20px; }
.profile-hero h1{ font-family:var(--serif); font-weight:300; font-size:clamp(46px,7vw,96px); line-height:.98; letter-spacing:-.02em; }
.profile-grid .figure{ border-radius:18px; overflow:hidden; box-shadow:var(--shadow); max-width:440px; justify-self:end; width:100%; }
.profile-grid .figure img{ width:100%; height:auto; }
.profile-hero .rec-nums{ margin-top:24px; }
@media (max-width:900px){
  .profile-grid{ grid-template-columns:1fr; }
  .profile-grid .figure{ justify-self:start; max-width:420px; order:-1; }
}

/* ============================================================
   v6 — team portrait cards, site search, inner-hero unification
   ============================================================ */
/* Team index portrait cards */
.team-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:18px; }
.team-card{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--bone-2);
  display:flex; flex-direction:column; transition:transform .35s var(--ease-out), box-shadow .35s, border-color .35s; }
@media (hover:hover){ .team-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:var(--green-3); }
  .team-card:hover .tc-img img{ transform:scale(1.04); } }
.tc-img{ aspect-ratio:4/4.6; overflow:hidden; background:var(--stone); }
.tc-img img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .7s var(--ease-io); }
.tc-cut{ display:flex; align-items:flex-end; justify-content:center; }
.tc-cut img{ object-fit:contain; width:86%; height:auto; margin-top:auto; }
.tc-empty{ display:flex; align-items:center; justify-content:center; }
.tc-empty span{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.tc-body{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:7px; }
.tc-body h3{ font-family:var(--serif); font-weight:500; font-size:1.35rem; color:var(--ink); }

/* Site search results */
.search-results{ margin-top:26px; }
.sr-item{ display:block; padding:16px 4px; border-bottom:1px solid var(--rule); text-decoration:none; }
.sr-item b{ font-family:var(--serif); font-weight:500; font-size:1.15rem; color:var(--ink); display:block; }
.sr-item span{ font-size:13.5px; color:var(--ink-mute); display:block; margin-top:3px; }
@media (hover:hover){ .sr-item:hover b{ color:var(--green); } }
#site-search{ font-size:18px; padding:18px 20px; border-radius:12px; }

/* Inner heroes → masthead grammar (unifies ~300 systematic pages with the flagships) */
.hero:not(.hero-flag){ border-bottom:2px solid var(--ink); }
.hero:not(.hero-flag) .hero-inner{ padding-block:clamp(56px,9vh,110px) clamp(30px,4vw,50px) !important; }
.hero:not(.hero-flag) h1{ font-weight:300 !important; font-size:clamp(40px,6.4vw,84px) !important;
  letter-spacing:-.02em; line-height:.98; }
.hero:not(.hero-flag) .lede{ max-width:62ch; }
.hero:not(.hero-flag) .hero-meta{ border-top:0; padding-top:6px; margin-top:26px; }

/* desktop nav density (7 items + CTA inside 1180 container) */
@media (min-width:1081px){
  .nav{ gap:clamp(14px,1.5vw,24px); }
  .nav a{ white-space:nowrap; font-size:14px; }
  .nav .btn{ padding:11px 18px; font-size:13.5px; white-space:nowrap; }
}
/* cutout portraits fill their card frame, bottom-aligned */
.tc-cut img{ height:100%; width:auto; max-width:92%; object-fit:contain; object-position:bottom; }

/* ============================================================
   v7 — deployed-review fixes (2026-07-16, Jake's staging pass)
   ============================================================ */

/* Mobile menu: brand wordmark at the top of the panel */
.nav-brand{ display:none; }
@media (max-width:1240px){
  .nav-brand{ display:block; font-family:var(--serif); font-size:21px; letter-spacing:.16em;
    color:var(--cream); margin-bottom:14px; }
  .nav-brand small{ display:block; font-family:var(--sans); font-size:8.5px; font-weight:600;
    letter-spacing:.32em; color:var(--green-3); margin-top:4px; }
}

/* Home hero: quiet stone-to-paper wash so the type-forward hero reads composed,
   not unpainted — no imagery, per the Counsel concept (the standing card is the visual). */
.page-home .hero-flag{ background:linear-gradient(180deg, var(--stone) 0%, var(--paper) 72%); }

/* Header brand: sub-line must never wrap (was breaking to two lines on wide screens) */
.brand small{ white-space:nowrap; }

/* White line under the footer: .foot-disc's inherited p margin-bottom collapsed through
   the footer's zero bottom padding, pushing the document past the dark background and
   exposing the light body bg. Contain the margin AND pad the page edge.
   No html{background} here: that would paint the iOS top rubber-band dark above a
   light header, trading one artifact for another. */
.site-foot .foot-disc{ margin-bottom:0; }
.site-foot{ padding-bottom:26px; }

/* Header CTA (mobile/tablet only — desktop nav already carries "Request a consultation").
   Replaces the retired sticky .callbar: one calm, always-reachable action in the header
   instead of a permanent bar shouting from the bottom of every screen. */
.head-cta{ display:none; }
@media (max-width:1240px){
  .head-cta{ display:inline-flex; margin-left:auto; margin-right:14px; padding:12px 18px;
    font-size:14px; border-radius:100px; white-space:nowrap; }
  /* burger sits hard right; brand keeps the left. */
  .site-head .wrap{ gap:12px; }
  body.nav-open .head-cta{ opacity:0; pointer-events:none; }
}
@media (max-width:380px){ .head-cta{ padding:9px 14px; font-size:13px; margin-right:8px; } }

/* Header row at phone widths: the wordmark was consuming the row and clipping the CTA
   ("Enq…"). Pill never shrinks; brand scales down to make room. */
@media (max-width:1240px){ .head-cta{ flex:none; } .brand{ flex:0 1 auto; min-width:0; } }
@media (max-width:560px){
  .brand{ font-size:19px; letter-spacing:.11em; }
  .brand small{ font-size:8px; letter-spacing:.2em; }
}
@media (max-width:400px){
  .brand{ font-size:17px; letter-spacing:.08em; }
  .brand small{ font-size:7.5px; letter-spacing:.16em; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8 — DEPTH. Diagnosis (measured, 2026-07-17): 82% of the homepage was two
   near-identical off-whites, every drop of green sat in the bottom 17%, and
   two adjacent same-colour sections merged into a single 5,204px slab. The
   page wasn't monochrome so much as MATERIAL-less. Nothing here changes the
   Counsel identity: same tokens, same fonts, no new hues. It gives the system
   the tonal range and the anchors it always implied.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Seal colours, now reachable by the cascade (were inline brass) ──── */
.s-ring{ fill:none; stroke:var(--green-2); stroke-width:1.5; opacity:.9; }
.s-ring-2{ stroke:var(--green); stroke-width:.75; opacity:.45; }
.s-dot{ fill:var(--green-2); }
.s-rule{ stroke:var(--green-2); stroke-width:1; opacity:.7; }

/* ── 2. Recognition becomes the third anchor ─────────────────────────────
   It was <section class="pad dark"> yet computed to #FBFBF8 — the LIGHTEST
   band on the page — because the Counsel flip neutralised .dark wholesale.
   A decade of peer-awarded rankings is the most earned claim on the site; it
   should carry the page's gravity, not read as a gap. Forest, not ink+gold:
   the anchor is the brand's own hue. */
#recognition{ background:var(--forest-deep); color:var(--cream); }
#recognition h2, #recognition h3{ color:var(--cream); }
#recognition .lede{ color:#CFDAD0; }
#recognition .eyebrow{ color:var(--sage); }
#recognition .eyebrow::before{ background:var(--sage); }
#recognition .plaque{ background:rgba(243,242,235,.05); border-color:rgba(243,242,235,.16); }
#recognition .plaque .rank{ color:var(--cream); }
#recognition .plaque .who,
#recognition .accred span{ color:var(--sage); }
#recognition .accred{ background:rgba(243,242,235,.05); border-color:rgba(243,242,235,.16); }
#recognition .accred b{ color:var(--cream); }
#recognition .link-arrow{ color:var(--sage); }
/* seals on the dark ground */
#recognition .s-ring{ stroke:var(--sage); opacity:.9; }
#recognition .s-ring-2{ stroke:var(--sage); opacity:.4; }
#recognition .s-dot{ fill:var(--sage); }
#recognition .s-rule{ stroke:var(--sage); opacity:.7; }
#recognition .arc-t{ fill:var(--sage); }
#recognition .yr{ fill:var(--cream); }

/* ── 3. Tokens the system used but never declared ────────────────────────
   --sage was used as a LITERAL (var(--sage)) in three earlier places and never
   became a token, so `var(--sage)` resolved to nothing and text silently fell
   back to its inherited dark colour — invisible on a forest ground. Declare it.
   --ground: paper and stone differ by ~10/channel, which is to say they don't
   differ. A third, deeper ground lets bands read as separate without a new hue. */
:root{ --sage:#A7C1AC; --ground:#E8E5DC; }
.band-ground{ background:var(--ground); }

/* ── 4. Grain. The single cheapest source of "life" on a flat light page:
   it makes the ground read as paper rather than as #FBFBF8. Invisible until
   it's absent. Fixed attachment so it doesn't swim while scrolling. */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
}
/* keep the grain off the dark anchors — multiply on forest just muddies it */
.site-foot, .cta-final, #recognition{ position:relative; z-index:2; }

/* the second photo band sits between two stone sections; a shorter crop keeps it a
   punctuation mark rather than a second hero. The image is portrait, so bias the focal
   point to the arched windows rather than the sky. */
.photo-band-sm .band-img{ object-position:center 62%; }
.photo-band-sm .pullquote{ font-size:clamp(1.6rem,3.2vw,2.5rem); }

/* The record sits on its own ground. It was the same #FBFBF8 as the section above it, so
   the page's single most valuable asset — the acquittals — merged into 4,957px of identical
   paper with the firm's origin story. A deeper stock separates it and gives it weight, with
   no new hue: it reads as a different page in the same book. */
#record{ background:var(--ground); }
#record .ledger{ border-top-color:var(--ink); }

/* ── P0: the 2am call path ────────────────────────────────────────────────
   Retiring the sticky .callbar removed the bar but never rehoused the CALL. On a phone the
   only tel: above the fold became a 21px topbar link (half the 44px minimum), while the 41px
   pill said "Enquire" and led to a form. PRODUCT.md's primary user is a person who has just
   been arrested; they do not fill in forms. This restores a real call target without
   reinstating a bar that shouts: a 44px outlined glyph, chambers-quiet, beside the pill.
   Desktop already carries the number in the topbar, so it's mobile/tablet only. */
.head-tel{ display:none; }
@media (max-width:1240px){
  .head-tel{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:44px; height:44px; margin-left:auto; margin-right:10px;
    border:1px solid var(--green); border-radius:100px; color:var(--green);
    transition:background .25s var(--ease-out), color .25s var(--ease-out);
  }
  .head-tel svg{ width:19px; height:19px; }
  .head-tel:active{ background:var(--green); color:var(--cream); }
  /* the pill no longer needs to claim the free space — the glyph does */
  .head-cta{ margin-left:0; }
  body.nav-open .head-tel{ opacity:0; pointer-events:none; }
}
@media (hover:hover) and (max-width:1240px){
  .head-tel:hover{ background:var(--green); color:var(--cream); }
}
/* the topbar number is a real target too, not 12.5px of decoration */
@media (max-width:1080px){
  .topbar a[href^="tel:"]{ font-size:14px; padding-block:10px; font-weight:600; }
}

/* The brand sub-line is nowrap, so its INK overflows its own box rather than widening it —
   getBoundingClientRect() reports the box and shows no collision while the letters visibly
   run under the phone glyph. Size it to actually fit the space it has. */
@media (max-width:420px){
  .brand small{ font-size:6.8px; letter-spacing:.07em; }
}
@media (max-width:340px){
  .brand small{ display:none; }   /* below this, the wordmark alone carries it */
}

/* ── The record: give the verdict the weight ──────────────────────────────
   The ledger borrows a court list's grammar, which is why it works. But the emphasis was
   inverted: the CHARGE rendered at 19.5px serif while the VERDICT — the entire product, the
   only thing a competitor cannot copy — sat at 11.5px tracked caps, i.e. the same treatment
   as a section eyebrow. Blur the page and "Murder" won over "Not Guilty".
   Now the left column scans as a column of green outcomes, and each row reads as an argument:
   Not guilty — of murder — in the Supreme Court. The grammar is untouched; the stress moves. */
.rec-link .lgr, .lg-row summary{ grid-template-columns:196px 1fr 30px; align-items:baseline; }
.lg-verdict{
  font-family:var(--serif); font-weight:500; font-size:1.32rem; line-height:1.2;
  letter-spacing:-.01em; text-transform:none; color:var(--green);
}
.lg-main b{ font-size:1.06rem; font-weight:400; color:var(--ink-soft); }
.lg-main small{ font-size:12.5px; }
/* the strongest wins earn a touch more presence than a licence appeal */
.rec-link .lg-verdict{ font-size:1.42rem; }
@media (max-width:760px){
  .rec-link .lgr, .lg-row summary{ grid-template-columns:1fr; gap:6px; }
  .lg-verdict, .rec-link .lg-verdict{ font-size:1.28rem; }
  .lg-main b{ font-size:1rem; }
}

/* Long verdicts ("3-year sentence (life max)", "Not Guilty (all counts) + bail") wrap in the
   verdict column; balance the break so it never orphans a word or splits a parenthetical
   badly, and give the column enough room that two lines is the worst case. */
.rec-link .lgr, .lg-row summary{ grid-template-columns:224px 1fr 30px; }
.lg-verdict{ text-wrap:balance; }
@media (max-width:1080px){ .rec-link .lgr, .lg-row summary{ grid-template-columns:200px 1fr 30px; } }
@media (max-width:760px){ .rec-link .lgr, .lg-row summary{ grid-template-columns:1fr; } }

/* Proof above the fold on a phone. The .standing card carries the standing panel on desktop,
   but at 375px it sits below the hero — so the one persona who most needs a reason to stay
   (someone comparing three firms on a phone) scrolled past the differentiator entirely. One
   line under the lede states it. Hidden ≥1081px where the card already does the job properly. */
.hero-proof{
  /* NOT flex: as a flex container each text node became its own wrapping item, so the line
     broke into fragments and a stray "·" started a line. It's a sentence; let it flow. */
  margin-top:20px; font-size:13.5px; letter-spacing:.01em; color:var(--ink-mute);
  line-height:1.65; max-width:40ch; text-wrap:pretty;
}
.hero-proof b{ color:var(--green); font-weight:600; }
.hero-proof::before{
  content:""; display:inline-block; width:24px; height:1px; background:var(--green);
  vertical-align:middle; margin-right:10px; margin-bottom:2px;
}
@media (min-width:1081px){ .hero-proof{ display:none; } }

/* Two fixes the compositing contrast audit surfaced:
   1. .nav-brand small used --green-3 on the forest mobile-menu panel = 3.54:1, a real AA
      fail that only shows with the menu open. Sage is the one accent that clears on forest.
   2. .figure-cap's scrim was linear-gradient(transparent, rgba(12,15,20,.85)) — the RETIRED
      ink, in rgba form, which is why the hex-based guard never saw it. Same job, brand hue.
      (The audit "failed" this caption at 1.11:1 only because it composites background-color
      and cannot see a gradient; the caption is cream on an 85% scrim and reads fine.) */
@media (max-width:1080px){
  .nav-brand small{ color:var(--sage); }
}
.figure-cap{ background:linear-gradient(transparent, rgba(18,33,27,.86)); }

/* ── Hero variant D (chosen from the A/B/C/D demo, 2026-07-17) ────────────
   The real COURT ROOM №1 sign as a ghost behind the hero type. Desaturated, then buried
   under a paper gradient so it reads as texture in the stone, not as a photograph. The
   scrim runs lighter on the left where the headline sits, opens slightly right where the
   standing card (which carries its own solid ground) covers most of it anyway.
   Mobile: text spans the full width, so the scrim goes near-solid — the ghost survives
   only as a whisper at the right edge. */
.hero-flag{ position:relative; overflow:hidden; }
.hero-ghost{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-ghost img{ width:100%; height:100%; object-fit:cover; object-position:center 38%;
  filter:grayscale(1) contrast(.9); }
.hero-ghost::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(92deg, rgba(251,251,248,.985) 42%, rgba(251,251,248,.9) 62%, rgba(241,239,233,.78) 100%); }
.hero-flag .hero-inner{ position:relative; z-index:1; }
@media (max-width:900px){
  .hero-ghost::after{ background:linear-gradient(180deg, rgba(251,251,248,.985) 55%, rgba(241,239,233,.88) 100%); }
}
@media (prefers-reduced-motion:no-preference){
  .hero-ghost img{ transform:scale(1.03); transition:transform 1.2s var(--ease-out); }
}

/* ── Hero C2: the aerial, dark (final pick, 2026-07-17) ───────────────────
   Real Sydney CBD aerial (from the firm's own site) under a forest scrim. Replaces the
   short-lived D ghost. Rules that made it work in the demo, kept here:
   · solid forest-deep on the SECTION — image-loading fallback + honest ground for audits
   · scrim heaviest (95%) on the left where the type lives, opens to 50% at right
   · the standing card stays the LIGHT solid card — proof floats on the city
   · drift is transform-only and starts visible (static-safe); reduced-motion = still
   · mobile: text spans full width, so the scrim goes near-solid top-to-bottom */
.hero-flag.hero-dark{ background:var(--forest-deep); color:var(--cream); }
.hero-dark .hero-aerial{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-dark .hero-aerial img{ width:100%; height:100%; object-fit:cover; object-position:center 30%;
  filter:saturate(.35) contrast(1.02); transform-origin:center 30%; }
@media (prefers-reduced-motion:no-preference){
  .hero-dark .hero-aerial img{ animation:aerialDrift 36s ease-in-out infinite alternate; }
}
@keyframes aerialDrift{ from{ transform:scale(1); } to{ transform:scale(1.09); } }
.hero-dark .hero-aerial::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(18,33,27,.95) 30%, rgba(18,33,27,.72) 62%, rgba(18,33,27,.5) 100%); }
.hero-dark .hero-inner{ position:relative; z-index:1; }
.hero-dark h1{ color:var(--cream); }
.hero-dark h1 em{ color:var(--sage); }
.hero-dark .kicker{ color:var(--sage); }
.hero-dark .lede{ color:#CFDAD0; }
.hero-dark .hero-proof{ color:#AFC0B4; }
.hero-dark .hero-proof b{ color:var(--sage); }
.hero-dark .hero-proof::before{ background:var(--sage); }
.hero-dark .btn-ghost{ color:var(--cream); border-color:rgba(243,242,235,.38); background:transparent; }
@media (hover:hover){ .hero-dark .btn-ghost:hover{ background:rgba(243,242,235,.1); border-color:var(--cream); color:var(--cream); } }
.hero-dark .scroll-cue{ color:#AFC0B4; }
@media (max-width:900px){
  .hero-dark .hero-aerial::after{ background:linear-gradient(180deg, rgba(18,33,27,.94) 0%, rgba(18,33,27,.9) 70%, rgba(18,33,27,.82) 100%); }
}
/* grain multiplies to mud on forest — hero joins the dark-anchor exclusion */
.hero-dark{ position:relative; z-index:2; }

/* ── Quote band: retire the last ink scrim ────────────────────────────────
   .photo-band::after still graded to rgba(9,12,16,.85) — the RETIRED deep ink (#090C10)
   hiding in rgba form, which the hex guard cannot see. Its heavy bottom stop crushed the
   courtroom sign into dead black before the next section, reading as "cut off". Forest
   scrim, gentler bottom, and the sign's disc anchored so its arc isn't sliced. */
.photo-band::after{
  background:linear-gradient(180deg, rgba(18,33,27,.8), rgba(18,33,27,.52) 50%, rgba(18,33,27,.74));
}
.photo-band:not(.photo-band-sm) .band-img{ object-position:center 32%; }
/* the cite sits over light granite at some widths — soft forest halo keeps it legible
   wherever the stone happens to fall behind it */
.photo-band .pullquote, .photo-band .pullquote-cite{ text-shadow:0 1px 18px rgba(18,33,27,.6); }

/* ── Contact grid: the email had nowhere to break ─────────────────────────
   a long email address is unbroken (no spaces), so it cannot wrap.
   Between ~500–700px the auto-fit grid gives each cell ~194px of content width while the
   address needs 234px, so it simply ran out of its cell and clipped mid-word ("…com.a").
   Two fixes, because either alone is fragile:
   1. overflow-wrap:anywhere — lets a long unbroken string break rather than escape.
   2. text-wrap:pretty + a slightly smaller size on the email specifically, so the break
      lands cleanly instead of orphaning ".au".
   Also raises the grid's min column so cells stop getting narrower than their contents. */
.contact-cell a, .contact-cell p{ overflow-wrap:anywhere; text-wrap:pretty; }
.contact-cell a[href^="mailto:"]{ font-size:14.5px; letter-spacing:-.005em; }
@media (max-width:1080px){
  .contact-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr)); }
}
/* the footer carries the same address; give it the same protection */
.site-foot a[href^="mailto:"]{ overflow-wrap:anywhere; }
/* the topbar phone wrapped to two lines between ~520–660px, where tb-left still shows but
   the row has run out of room. Drop the descriptor earlier and keep the number unbroken. */
.topbar a[href^="tel:"]{ white-space:nowrap; }
@media (max-width:660px){ .tb-left{ display:none; } .topbar .wrap{ justify-content:flex-end; } }
/* every surface that prints an address: the <wbr> gives the seam, this is the safety net */
a[href^="mailto:"]{ overflow-wrap:anywhere; }

/* ── Brand lockup: tighter, with a rule between wordmark and descriptor ───
   The descriptor sat 2px under the wordmark with nothing tying them together, so they read
   as two unrelated lines. Pulled closer and separated by a short hairline — the same
   grammar as the section eyebrows, so the lockup belongs to the system. */
.brand{ line-height:1; }
.brand small{
  margin-top:6px; padding-top:6px; position:relative;
  /* display:inline-block was WRONG and only ever looked right by luck. The markup is
     <a class="brand">CITY GROUP<small>…</small></a> — an inline-block <small> is inline-level,
     so it sits on the SAME LINE as the wordmark whenever the box is wide enough. It appeared
     stacked only because the desktop nav squeezed .brand until the descriptor wrapped. Once
     the burger freed that space (breakpoint 1080→1240), the lockup collapsed onto one row.
     block  → always its own line (what a lockup requires)
     fit-content → still shrink-wraps, so ::before spans the descriptor, not the whole box.
     Both properties are needed; that was the point the original rule was trying to buy. */
  display:block;
  width:fit-content;
}
.brand small::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--green-2); opacity:.45;
}
/* Re-assert the narrow-phone hide: the .brand small rule above is unconditional and sits
   later in the file, so it was silently overriding the @media (max-width:340px) display:none
   declared earlier — the descriptor reappeared on the narrowest phones, where it never fits. */
@media (max-width:340px){ .brand small{ display:none; } }

/* the scroll cue is retired — keep the rule so any stale markup can't reappear */
.scroll-cue{ display:none !important; }

/* ── Header: more air above the wordmark ─────────────────────────────────
   The lockup sat dead-centre with 12px top and bottom, which read as cramped against the
   topbar. Asymmetric now — ~20px above, ~12px below — so the mark has room to breathe and
   sits optically level rather than mathematically centred. */
.site-head .wrap{ min-height:92px; padding-top:16px; }
@media (max-width:1240px){ .site-head .wrap{ min-height:84px; padding-top:12px; } }

/* ── Topbar: a utility strip, not a second nav ────────────────────────────
   Reduced to phone + search (the only two things with nowhere else to live on desktop).
   With two items it right-aligns; the icons make them read as tools rather than links,
   and the phone gets a real touch target. */
.topbar .tb-right{ margin-left:auto; display:flex; align-items:center; gap:clamp(16px,2vw,28px); }
.topbar .tb-right a{ display:inline-flex; align-items:center; gap:7px; padding-block:11px; }
.topbar .tb-right a svg{ width:15px; height:15px; opacity:.75; flex:none; }
.topbar a[href^="tel:"]{ font-weight:600; color:var(--ink); }
@media (hover:hover){ .topbar .tb-right a:hover{ color:var(--green); } .topbar .tb-right a:hover svg{ opacity:1; } }
/* (retired with the topbar) */

/* ── The record reel (/results overture) ──────────────────────────────────
   Autoplays, loops, no chrome. The toggle is invisible until hover/focus — the page reads
   as a silent film, but a pause mechanism exists (WCAG 2.2.2 is Level A and applies to any
   auto-starting motion over five seconds; "no visible controls" is a style, "no mechanism"
   is a failure). */
.reel-band{ padding-top:0; }
.reel{ margin:0; position:relative; }
.reel-v{
  display:block; width:100%; height:auto; aspect-ratio:16/9;
  background:var(--forest-deep); border-radius:14px; overflow:hidden;
  border:1px solid var(--line); pointer-events:none;   /* no accidental scrub/pause on tap */
}
.reel-toggle{
  position:absolute; right:14px; bottom:14px; z-index:2;
  width:40px; height:40px; border-radius:100px; border:1px solid rgba(18,33,27,.18);
  background:rgba(251,251,248,.86); backdrop-filter:blur(6px); color:var(--forest);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; transform:translateY(4px);
  transition:opacity .28s var(--ease-out), transform .28s var(--ease-out), background .2s;
}
.reel-toggle svg{ width:17px; height:17px; }
.reel-toggle .ic-play{ display:none; }
.reel.is-paused .reel-toggle .ic-play{ display:block; }
.reel.is-paused .reel-toggle .ic-pause{ display:none; }
/* reveal on hover, on keyboard focus, and whenever paused (so it can be restarted) */
.reel:hover .reel-toggle,
.reel-toggle:focus-visible,
.reel.is-paused .reel-toggle{ opacity:1; transform:none; }
.reel-toggle:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
@media (hover:hover){ .reel-toggle:hover{ background:var(--paper); } }
/* touch: no hover, so keep it quietly present */
@media (hover:none){ .reel-toggle{ opacity:.9; transform:none; } }

/* Mobile: break the reel out of the wrap, edge to edge.
   Why not crop/zoom instead: the reel is a LEFT-ALIGNED editorial layout with marks in all
   four corners (wordmark top-left, a label bottom-right). A
   centred object-fit:cover crop severs the wordmark and cuts the label in half, verified
   against real frames. So it stays 16:9 and uncropped, and we buy back width instead: 375px
   full-bleed vs 343px inset. The 100vw/50% technique escapes the wrap without a wrapper div;
   calc uses vw (viewport, ignores scrollbar) — safe here because the page never scrolls x. */
@media (max-width:760px){
  .reel{
    width:100vw; max-width:100vw;
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  }
  .reel-v{ border-radius:0; border-left:0; border-right:0; }
  .reel-toggle{ right:12px; bottom:12px; }
}

/* ── iOS overscroll: match each end of the page ───────────────────────────
   Past the footer, Safari's rubber-band reveals the ROOT background — which was paper, so
   the page appeared to end in a white void under a forest footer (Jake's screenshot).
   Painting the root solid dark was rejected earlier for the opposite artifact: a dark void
   ABOVE the light header when you overscroll the top. The split gradient serves both ends:
   top overscroll shows stone (the topbar's own ground), bottom shows forest-deep (the
   footer's). The body's own background covers everything in between. */
html{ background:linear-gradient(to bottom, var(--stone) 0%, var(--stone) 50%, var(--forest-deep) 50%, var(--forest-deep) 100%); }

/* ── Scroll parallax on framed figures ────────────────────────────────────
   The photo-bands already drift (bandDrift) and the hero aerial zooms; the framed figures
   were the only imagery that sat dead on the page. A slight counter-scroll float gives them
   depth against their ground. Applied to the FRAME, not the img — the images inside carry
   hover transforms (zoom) and two writers on one transform property fight.
   Same invariants as every motion here: transform-only, starts visible (frozen renderer =
   slightly offset, never hidden), geometry-driven via view(), and absent for reduced-motion
   and browsers without scroll timelines. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .figure-frame{
      animation: figureFloat both linear;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes figureFloat{
  from{ transform: translateY(18px); }
  to{   transform: translateY(-18px); }
}

/* ── Header icons after the topbar removal (2026-07-17) ───────────────────
   The topbar carried the desktop phone number and the only link to /search. Jake removed the
   bar; those two jobs moved into the header, so they must now work at EVERY width — .head-tel
   was previously ≤1080px only, which would have left desktop with no visible call path (the
   exact P0 we fixed on mobile, re-created on the other side).
   Icon-only on desktop keeps the row quiet: the nav is the loud thing, these are utilities.
   44px targets throughout (WCAG 2.5.8). Both sit before the pill; margin-left:auto on the
   first one pushes the whole cluster right. */
.head-ic{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:44px; height:44px;
  border:1px solid var(--line); border-radius:100px; color:var(--ink-soft);
  transition:background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.head-ic svg{ width:18px; height:18px; }
.head-search{ margin-left:auto; margin-right:8px; }
.head-tel{ display:inline-flex; margin-right:12px; border-color:var(--green); color:var(--green); }
.head-ic:active{ background:var(--green); border-color:var(--green); color:var(--cream); }
@media (hover:hover){
  .head-ic:hover{ background:var(--green); border-color:var(--green); color:var(--cream); }
}
body.nav-open .head-ic{ opacity:0; pointer-events:none; }
/* The desktop row is budgeted: CLAUDE.md records the 6-item nav needing 1071px with only
   72px of slack at 1081px. These two glyphs cost ~156px, so at 1090px the header overflowed
   and the nav wrapped to three rows (measured). They can't simply be hidden in the 1081–1240
   band either — with the topbar gone that would leave those widths no visible phone at all,
   which is the P0 this whole change exists to avoid. So the burger breakpoint moved 1080→1240
   instead: below 1240 the nav is a drawer and the row is never crammed. Raising it is the
   safe direction (CLAUDE.md forbids LOWERING it without shrinking type). */
@media (max-width:400px){
  .head-search{ display:none; }
  .head-tel{ margin-left:auto; }
}
/* Topbar RESTORED 2026-07-17 — desktop only. Below the burger breakpoint the drawer already
   carries the phone and Search, so the bar would be noise on the width with least room. */
.topbar{ display:block; }
@media (max-width:1240px){ .topbar{ display:none; } }

/* The wrap is justify-content:space-between, which was correct when it held two things
   (brand | nav). With the topbar's glyphs moved in it holds four, and space-between spread
   them evenly — leaving the search/phone circles marooned in dead space mid-header.
   Switch to flex-start and let the auto margin on the first glyph do the pushing: brand
   stays left, and search+phone+nav travel together as one right-hand cluster. */
.site-head .wrap{ justify-content:flex-start; }

/* At >=1241 the wrap hits its 1180px max-width and the nav stops shrinking to fit, so it
   reaches its natural 729px — 12px more than the row can hold (measured at 1600px, where
   the overflow appears; below 1280 flex-shrink hid it). Tighten the gaps between the four
   header children only. The nav's own internal gap is untouched — the links keep their air. */
@media (min-width:1241px){
  .site-head .wrap{ gap:16px; }
  .head-search{ margin-right:4px; }
  .head-tel{ margin-right:8px; }
}

/* ── Mobile header: the glyphs go, the row breathes (2026-07-17) ──────────
   Shipping two 44px glyphs into a row that already held brand + Enquire + burger overran
   390px badly — the search circle printed ON TOP of the wordmark. Jake called it, and asked
   for the call button off the mobile bar too.
   So below the 1240 burger breakpoint the header is: wordmark · Enquire · burger. Nothing
   is lost — the drawer carries BOTH the phone number (in .nav-foot, tel: linked) and Search
   (new .nav-search), and Enquire is still one tap. Desktop keeps both glyphs; it has room. */
@media (max-width:1240px){
  .head-ic{ display:none !important; }
}
.nav-search{ display:none; }
@media (max-width:1240px){
  .nav-search{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--sans); font-size:15px; color:var(--green-3);
    padding:6px 0; min-height:44px;
  }
  .nav-search svg{ width:17px; height:17px; }
}

/* ── Practice-area masthead texture (2026-07-17) ──────────────────────────
   The 14 practice-detail pages are the highest-intent pages on the site and had no imagery at
   all. A decorative masthead photograph, ghosted and masked to fade in from the right,
   gives them air without competing with the type or claiming anything.
   Kept honest: pointer-events:none, aria-hidden, empty alt — it is atmosphere, not information.
   The mask does the work; opacity alone leaves a hard photo edge against the paper. */
.hero-tex{ position:relative; overflow:hidden; isolation:isolate; }
.hero-tex-img{
  position:absolute; inset:0 0 0 auto; width:min(52%,660px); z-index:-1; pointer-events:none;
}
.hero-tex-img img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  filter:grayscale(1) contrast(1.04);
  opacity:.17;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 62%);
          mask-image:linear-gradient(to right, transparent 0%, #000 62%);
}
/* A slow drift, same family as the photo-bands. Transform-only and geometry-driven, so a frozen
   renderer shows it slightly offset rather than missing. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .hero-tex-img{ animation:texDrift both linear; animation-timeline:view(); animation-range:entry 0% exit 100%; }
  }
}
/* ±14px measured only 12.3px of real travel: the masthead sits at the TOP of the page, so it's
   already mid-way through its view() range on load and only ever plays the back half. Roughly
   double the amplitude to land ~30px on screen. scale 1.04 → 1.16 because the translate must
   stay inside the overhang: at 1.16 a 538px box overhangs ~43px a side, comfortably over ±34. */
@keyframes texDrift{ from{ transform:translate3d(0,-34px,0) scale(1.16); } to{ transform:translate3d(0,34px,0) scale(1.16); } }
/* Phones: the type needs the full width, so the texture retreats to a faint top-right corner. */
@media (max-width:760px){
  .hero-tex-img{ width:72%; }
  .hero-tex-img img{ opacity:.10; -webkit-mask-image:linear-gradient(to bottom right, transparent 30%, #000 100%); mask-image:linear-gradient(to bottom right, transparent 30%, #000 100%); }
}

/* ── Mobile drawer: full page (2026-07-17) ────────────────────────────────
   The drawer was width:min(84vw,360px), so on a 390px phone a 62px strip of the page stayed
   visible down the left — which is what read as "cut off": the panel looked like a fragment
   sitting over the page rather than a place you'd gone to. On phones it now takes the whole
   viewport, so the wordmark and nav own the screen top to bottom. Tablets keep the side panel,
   where there's room for it to read as deliberate. */
@media (max-width:600px){
  .nav{ width:100vw; max-width:100vw; }
  /* the backdrop can't be seen behind a full-bleed panel — don't pay for its paint */
  body.nav-open .nav-backdrop{ opacity:0; }
}

/* ── The "bottom green area" (2026-07-17) ─────────────────────────────────
   Measured on a 390px phone: the dark region ran 1,961px — a 477px CTA band plus a 1,484px
   footer, 2.3 screens of unbroken green. That's what reads as a separate, endless zone rather
   than the end of a page.
   Cause: .foot-top collapsed to ONE column below 520px, stacking all four blocks (247+310+
   275+171). Tablets got two columns; phones — the narrowest screens, where height hurts most —
   got the tallest possible footer. Backwards.
   Fix: keep two columns on phones. The link lists are short and sit happily in ~175px. The
   brand and the address block still span the full width; they need it. No links are removed. */
@media (max-width:520px){
  .foot-top{ grid-template-columns:1fr 1fr; gap:30px 18px; padding-block:44px; }
  .foot-top > div:first-child{ grid-column:1 / -1; }
  .foot-top > div:last-child{ grid-column:1 / -1; }
}

/* ── Making the motion actually perceptible (2026-07-17) ──────────────────
   Jake, on a real phone: "you cannot tell the ken burns or the movement in the background".
   Three causes, all measured, none of them "the animation is broken":
     1. The mobile scrim ran .94 → .90 → .82 opaque. The photograph was 82–94% COVERED. You
        cannot perceive motion in an image you cannot see. This was the main one.
     2. 36s for a 9% scale = 0.25%/sec. Across the ~8s a hero is actually looked at, it moved
        ~2% — under the perceptual threshold. Slow ≠ subtle; slow = absent.
     3. Scale alone reads as "nothing happening" at small amplitude. A little vertical travel
        gives the eye an edge to track.
   The scrim now stays heavy at the top (where the h1 and lede sit) and opens up toward the
   bottom, so the city is visible where no text needs protecting. Contrast verified by pixel
   sampling, not by eye. */
@media (max-width:760px){
  /* Lightened for the courthouse hero (2026-07-18): the dusk sandstone is already dark, so the
     old top-heavy scrim erased the columns on mobile — the building read as a green field. Text
     had 13.6:1 headroom over the footage (needs 3.0), so the scrim can breathe. The top opens up
     to show the columns; it only firms behind the headline band (~30-75%). Re-sampled after:
     all text still clears AA over every frame of the loop. */
  .hero-dark .hero-aerial::after{
    background:linear-gradient(180deg,
      rgba(18,33,27,.62) 0%,
      rgba(18,33,27,.74) 34%,
      rgba(18,33,27,.72) 68%,
      rgba(18,33,27,.5) 100%);
  }
}
/* Third pass, and this time measured properly rather than guessed. WebKit sampling showed the
   22s ease-in-out drift moving **0.19% per second** at the start of its cycle — ease-in-out
   spends the whole opening of each cycle nearly still, so across the ~8s anyone looks at a hero
   it moved ~1.5%. Invisible. Slow wasn't subtle; it was nothing.
   14s roughly triples the mid-cycle velocity, and a diagonal pan is added because pure scale
   from the centre barely moves the pixels a viewer is actually looking at — the eye tracks
   translation far more readily than dilation.
   Base scale is 1.06, never 1.0: the pan translates ±1.2%, and at 1.06 the image overhangs its
   box by 3% a side, so an edge can never appear. That's the constraint the amplitude is tuned
   against, not taste. */
@media (prefers-reduced-motion:no-preference){
  .hero-dark .hero-aerial img{ animation:aerialDrift 14s ease-in-out infinite alternate; }
}
@keyframes aerialDrift{
  from{ transform:scale(1.06) translate3d(-1.2%, 1.2%, 0); }
  to{   transform:scale(1.20) translate3d(1.2%, -1.2%, 0); }
}
/* The photo-bands drifted ±3.5% — about ±20px over a whole scroll-through, i.e. invisible on a
   phone. The image overhangs by 10% (top:-10%; height:120%), so ±7% still never reveals an edge. */
@keyframes bandDrift{ from{ transform:translateY(-7%);} to{ transform:translateY(7%);} }

/* ── Breadcrumbs at the foot (2026-07-17) ─────────────────────────────────
   Moved from under the hero to just above the footer. It now sits between the dark CTA band and
   the dark footer, so left on the paper background it would read as a bright seam between two
   dark blocks. Given forest-deep instead, it becomes the footer's top rail — the trail is still
   there for anyone who wants it, and it stops competing with the headline for the first screen. */
.crumb-foot{
  background:transparent; color:var(--sage); padding-block:22px;
  border-top:1px solid rgba(243,242,235,.10);
}
.crumb-foot a{ color:var(--sage); }
@media (hover:hover){ .crumb-foot a:hover{ color:var(--cream); } }
.crumb-foot span{ color:var(--sage); opacity:.45; }
/* The strip sits inside <main> (paper), so the dark has to be painted behind it. Two separate
   jobs, and conflating them broke it once already: the BACKGROUND must be full-bleed, but the
   TEXT must keep .wrap's gutter and max-width — zeroing padding-inline to get the bleed ran the
   trail flush to the screen edge. So the element keeps its wrap geometry and a pseudo-element
   does the bleeding. width:100vw ignores the scrollbar, which is safe: the page never scrolls x. */
main > .crumb-foot{ position:relative; isolation:isolate; }
main > .crumb-foot::before{
  content:""; position:absolute; top:0; bottom:0;
  left:50%; transform:translateX(-50%); width:100vw;
  background:var(--forest-deep); z-index:-1;
}

/* ── Mobile header: push the actions back to the right (2026-07-17) ───────
   77px of dead space appeared to the right of the burger. Three changes colliding:
     · .head-cta had `margin-left:0` inside the ≤1240 block — correct WHEN the phone glyph
       carried `margin-left:auto` ("the pill no longer needs to claim the free space").
     · I then hid both .head-ic glyphs below 1240 — so nothing carried the auto margin.
     · And the wrap is justify-content:flex-start — so with no auto margin, everything packed
       left and the row simply ended early.
   The pill reclaims the job the glyph used to do. Declared last so it beats the older rule. */
@media (max-width:1240px){
  .head-cta{ margin-left:auto; }
}

/* ── /search is a tool, not a marketing page (2026-07-17) ─────────────────
   Measured at 390×844: the hero took 275px, the search box got 203px, and the closing green
   CTA band started at 562px — 67% down the FIRST screen — followed by a 1,179px footer. The
   page's entire reason to exist owned a third of the screen before the marketing took over.
   That's what read as "cut off with the green box".
   The search section now grows to fill whatever the viewport has left, so the CTA sits below
   the fold and the results have somewhere to land as you type.
   svh, not vh: on iOS `100vh` is the viewport WITHOUT the browser chrome, so a 100vh block is
   taller than what you can actually see and its bottom hides behind the toolbar — the classic
   "why is my page cut off". svh is the small (chrome-visible) viewport, which is what we want. */
/* The min-height has to sit on the SEARCH SECTION, not on #main. Putting it on #main did
   nothing: main's natural height (275 hero + 203 search + 477 CTA = 954) already exceeded the
   759 target, so flex had no free space to hand to .search-sec and the CTA never moved.
   Sizing the search band directly is what actually pushes the green below the fold — and the
   space isn't empty, it's where results land as you type. */
body.page-search .search-sec{ min-height:66svh; }
@supports not (height: 100svh){
  body.page-search .search-sec{ min-height:66vh; }
}

/* ── Enquire pill: one honest 44px target (2026-07-17) ────────────────────
   Jake's read was right, and measuring found the rule cuts both ways:
     · ≥390px it rendered 91×49 — TALLER than the burger (42) and occupying ~1.0× the
       wordmark's area, so it shouted over the brand it sits beside.
     · ≤380px the shrink rule took it to 79×41 — BELOW Apple's 44pt minimum, on precisely the
       phones with the least room to hit it. "Make it smaller" would have made that worse.
   So: pin the height to exactly 44px at every width (Apple HIG floor, comfortably over WCAG
   2.5.8's 24px) and take the weight out of the padding and type instead. Smaller where Jake
   saw it shouting, bigger where it was failing, one consistent target everywhere.
   min-height + inline-flex rather than vertical padding: padding makes the height a function
   of the font size, which is exactly how it drifted to 49 and 41 in the first place. */
@media (max-width:1240px){
  .head-cta{
    min-height:44px; height:44px;
    padding:0 17px; font-size:13.5px;
    display:inline-flex; align-items:center; justify-content:center;
  }
}
@media (max-width:380px){
  .head-cta{ padding:0 13px; font-size:13px; min-height:44px; height:44px; }
}

/* ── The parallax that never ran (2026-07-17) ─────────────────────────────
   Measured in WebKit: .photo-band .band-img and .hero-tex-img had **0px of travel** across a
   whole page scroll. Not too subtle — completely frozen, stuck at exactly 50% progress. Both
   animations were attached and reported playState "running", which is why this survived every
   previous look.
   CAUSE: `overflow:hidden` makes an element a SCROLL CONTAINER. `animation-timeline: view()`
   resolves the subject's progress against its **nearest scrollport ancestor** — which was the
   band itself, not the page. A box that never scrolls yields a timeline that never advances.
   figureFloat worked purely because .figure-frame has no clipping ancestor.
   FIX: `overflow: clip` clips identically but is NOT a scroll container, so view() walks up to
   the document. Proven: hidden 0px → clip 79.4px, with the -10%/120% overhang still hidden.
   The `hidden` line stays first as the fallback: where `clip` is unsupported it's dropped and
   hidden still clips (parallax stays frozen there, which is the current behaviour anyway —
   degrading to "no parallax" is right, degrading to "image spills out" is not). */
.photo-band{ overflow:hidden; overflow:clip; }
.hero-tex{ overflow:hidden; overflow:clip; }

/* ── Cross-document view transitions (2026-07-17) ─────────────────────────
   Pages cross-fade instead of blinking white. ~15 lines, pure progressive enhancement: a
   browser without support simply navigates as it always did — there is no JS, no polyfill and
   no failure mode. It is the cheapest thing on this site that makes it feel expensive.
   Same-origin navigations only, which is all we have.
   Deliberately restrained: 220ms and opacity-only. A criminal defence site should feel calm,
   not theatrical — and morphing headline elements between pages would draw the eye to the
   chrome rather than the content. The header/footer are excluded from the fade so the frame
   stays put and only the page beneath it changes, which is what makes it read as one document
   rather than a slideshow. */
@view-transition{ navigation: auto; }

/* Jake's "weird highlight shadow over the whole screen on every link tap" (iOS): the fade-out
   ran 160ms but the fade-in 220ms, so for the last 60ms the old page was gone while the new one
   was still semi-transparent — and what showed through was the ROOT CANVAS, i.e. the split
   overscroll gradient whose lower half is forest-deep. A dark wash over the screen on every
   navigation. Fix: equal durations so the cross-fade never opens a gap, and a paper backdrop on
   ::view-transition itself so even a mid-fade dip lands on paper, never on the dark gradient.
   (Headless WebKit doesn't run cross-document transitions, which is why every mid-flight frame
   capture looked clean while real iPhones showed it.) */
::view-transition{ background: var(--paper); }
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation: vtOut 200ms var(--ease-out) both; }
  ::view-transition-new(root){ animation: vtIn 200ms var(--ease-out) both; }
}
/* Honour the setting: an instant swap, no cross-fade. */
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation: none; mix-blend-mode: normal; }
}
@keyframes vtOut{ from{ opacity:1; } to{ opacity:0; } }
@keyframes vtIn{ from{ opacity:0; } to{ opacity:1; } }

/* The frame is continuous across navigations — give it its own transition name so it doesn't
   fade with the page body. */
.site-head{ view-transition-name: site-head; }
.site-foot{ view-transition-name: site-foot; }
::view-transition-old(site-head), ::view-transition-new(site-head),
::view-transition-old(site-foot), ::view-transition-new(site-foot){ animation: none; }

/* ── The header is brand · CTA · burger, and nothing else (2026-07-17) ────
   The .head-ic glyphs are retired: with the topbar back they're redundant on desktop, and on
   mobile they were overlapping the wordmark. Rules kept as a tombstone so stale markup can't
   resurrect them. */
.head-ic{ display:none !important; }

/* iOS paints a grey box over any tapped link — that's the dark rectangle behind the wordmark
   when Jake taps it. Kill the default highlight on our own interactive elements; the button
   :active states and :focus-visible outlines already give better, on-brand feedback, so this
   removes noise without removing the affordance. */
a, button, .btn, summary, [role="button"]{ -webkit-tap-highlight-color: transparent; }
/* The brand is a link with a block child, so iOS draws the box around the whole lockup. */
.brand{ -webkit-tap-highlight-color: transparent; }

/* ── Hero: real footage (2026-07-17) ──────────────────────────────────────
   Three CSS passes failed to convince Jake there was any movement, and he was right each time:
   the Ken Burns was measured at 0.19%/sec, then 1.36%/sec — real, but a scale on a static
   photograph is simply not what a person reads as "moving". So the hero now carries actual
   drone footage, generated from HIS OWN chosen aerial (Higgsfield kling3_0_turbo, start_image =
   sydney-aerial.jpg) — the C2 decision is intact, the photograph is just alive now.
   1.04MB / 10s ping-pong loop, per the G Class recipe: an iPhone hero fails on SIZE, not format.
   The poster is the video's own first frame, so there is no flash of a different image. */
.hero-dark .hero-aerial{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:clip; }
.hero-dark .hero-v{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  filter:saturate(.35) contrast(1.02); display:block;
}
/* The footage moves on its own — the CSS drift would fight it. */
.hero-dark .hero-v{ animation:none !important; }

/* WCAG 2.2.2 (Level A): motion that starts automatically and runs over 5s needs a pause
   mechanism. The reel already sets this pattern, so reuse it rather than invent a second one:
   invisible until hover or keyboard focus, and permanently visible once paused so it can be
   restarted. Sits bottom-right, clear of the hero CTAs. */
.hero-pause{
  position:absolute; right:18px; bottom:18px; z-index:3; pointer-events:auto;
  width:40px; height:40px; border-radius:100px; border:1px solid rgba(243,242,235,.28);
  background:rgba(18,33,27,.55); color:var(--cream);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; transition:opacity .28s var(--ease-out), background .2s;
}
.hero-pause svg{ width:16px; height:16px; }
.hero-pause .ic-play{ display:none; }
.hero-aerial.is-paused .hero-pause .ic-play{ display:block; }
.hero-aerial.is-paused .hero-pause .ic-pause{ display:none; }
.hero:hover .hero-pause,
.hero-pause:focus-visible,
.hero-aerial.is-paused .hero-pause{ opacity:1; }
.hero-pause:focus-visible{ outline:2px solid var(--sage); outline-offset:3px; }
@media (hover:none){ .hero-pause{ opacity:.75; } }
@media (max-width:520px){ .hero-pause{ right:12px; bottom:12px; width:36px; height:36px; } }

/* ── Touch: the drawer must never colour a link into the background ───────
   Belt and braces for the bug above. Inside the dark drawer the links are cream; any rule that
   sets them to --ink (near-black) makes them invisible on forest. On a touch device there is no
   hover state worth having, so pin the colour and give taps a visible, on-brand response
   instead — a light wash, never a colour change that can lose the text. */
@media (hover:none){
  .nav a:not(.btn){ color:var(--cream); }
  .nav a:not(.btn):active{ color:var(--sage); }
}
@media (max-width:1240px){
  .nav a[aria-current]:not(.btn){ color:var(--green-3); }
}

/* ── Reel control: invisible to a mouse, reachable by keyboard ────────────
   Jake asked for the play/pause button gone. Deleting it outright fails WCAG 2.2.2 (Level A) —
   auto-starting motion over 5 seconds needs a pause mechanism, and the reel runs 27.5s. So it
   uses the skip-link pattern instead: clipped out of the layout entirely (never rendered for a
   mouse or a touch, so Jake never sees it), but focusable by Tab, at which point it appears.
   The mechanism exists for anyone who needs it; nobody else ever knows it's there.
   Overrides the earlier hover/touch reveals — declared later, so it wins. */
.reel-toggle{
  position:absolute; width:1px; height:1px; padding:0; margin:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  opacity:0 !important; transform:none !important; pointer-events:none;
}
.reel:hover .reel-toggle,
.reel.is-paused .reel-toggle{ opacity:0 !important; }
/* keyboard focus brings it back, full size, in the corner */
.reel-toggle:focus-visible{
  width:40px; height:40px; clip-path:none; overflow:visible;
  right:14px; bottom:14px; left:auto; top:auto;
  opacity:1 !important; pointer-events:auto;
  outline:2px solid var(--green); outline-offset:3px;
}

/* These tiles now wrap to two lines, and `align-items:center` floated the icon to the middle of
   the block. Pin it to the first line, where it reads as a marker rather than a decoration.
   Scoped to the direct child so any future inline markup inside the text can't become a flex
   item of its own — which is exactly what broke this tile. */
.reassure-meta > span{ align-items:flex-start; }
.reassure-meta > span > svg{ margin-top:3px; }

/* ── Closing CTA: give the primary button a body (impeccable P1, 2026-07-18)
   Verified: on .cta-final the "Request a consultation" button rendered rgb(30,58,49) on a
   rgb(30,58,49) band — a 1.00:1 primary at the single most important conversion moment. It
   inherited the base .btn green, which is invisible on a green ground. Reuse the treatment the
   guides download button already uses correctly on green: cream fill, forest text. The ghost
   "Call our office" stays the secondary, so the hierarchy is unambiguous. */
.cta-final .btn:not(.btn-ghost){
  background:var(--cream); color:var(--green); border-color:var(--cream);
}
@media (hover:hover){
  .cta-final .btn:not(.btn-ghost):hover{ background:#fff; color:var(--forest-deep); border-color:#fff; }
}

/* ── Triage row: the crisis front door (impeccable P2, 2026-07-18) ────────
   Deliberately NOT the practice/guide card grid — the critique flagged identical card grids as
   a slop tell, so this reads as a different object: a horizontal list of routes, each a line of
   type with a rule between, not a boxed card. Question-led ("Where are you right now?") because
   the user is thinking in their situation, not the firm's service taxonomy. */
.triage{ background:var(--stone); }
.triage-head{ margin-bottom:22px; }
.triage-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:clip;
}
.triage-card{
  display:flex; flex-direction:column; gap:6px; padding:24px 26px;
  background:var(--paper); position:relative; transition:background .25s var(--ease-out);
}
.triage-card h3{
  font-family:var(--serif); font-weight:500; font-size:1.18rem; color:var(--ink); letter-spacing:-.01em;
}
.triage-card p{ font-size:14px; color:var(--ink-soft); line-height:1.5; max-width:34ch; }
.triage-go{
  margin-top:4px; color:var(--green); display:inline-flex;
  transform:translateX(0); transition:transform .25s var(--ease-out);
}
.triage-go svg{ width:20px; height:20px; }
@media (hover:hover){
  .triage-card:hover{ background:var(--ground); }
  .triage-card:hover .triage-go{ transform:translateX(5px); }
}
.triage-card:active{ background:var(--ground); }
@media (max-width:640px){
  .triage-grid{ grid-template-columns:1fr; }
  .triage-card{ padding:20px 22px; }
}

/* ── Case-study expansion on The Record (impeccable, 2026-07-18) ──────────
   The critique's biggest elevation: each matter was "a data row + one paragraph". The firm's own
   summaries already carry the full arc (allegation → strategy → outcome); the fix is to PRESENT
   them as studies. Expanded, a matter is now a two-column study: the narrative in reading measure,
   a labelled meta rail alongside (charge / court / heard / outcome). No content invented — every
   field already existed on the record. */
.lg-body.cs{ display:grid; grid-template-columns:1fr 220px; gap:34px; align-items:start; max-width:none; padding-bottom:30px; }
.cs-narrative{ max-width:70ch; }
.cs-narrative p{ text-wrap:pretty; }
.cs-meta{ margin:0; display:flex; flex-direction:column; gap:14px;
  border-left:1px solid var(--line); padding-left:22px; }
.cs-meta div{ display:flex; flex-direction:column; gap:2px; }
.cs-meta dt{ font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); }
.cs-meta dd{ margin:0; font-size:14px; color:var(--ink-soft); line-height:1.4; }
.cs-meta .cs-out{ font-family:var(--serif); font-size:1.05rem; color:var(--green); font-weight:500; }
@media (max-width:720px){
  .lg-body.cs{ grid-template-columns:1fr; gap:22px; }
  .cs-meta{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:18px;
    flex-direction:row; flex-wrap:wrap; gap:18px 30px; }
}

/* ── Office map (2026-07-18) ──────────────────────────────────────────────
   A self-hosted, brand-tinted static map — no Google iframe, so the /privacy "no third-party
   trackers" claim stays true. The whole frame is a link to Google Maps directions; nothing
   loads from Google until the visitor taps it. */
.office-map{
  display:block; position:relative; border-radius:14px; overflow:clip;
  border:1px solid var(--line); background:var(--stone);
}
.office-map img{ display:block; width:100%; height:auto; }
.map-pin-label{
  position:absolute; left:18px; top:16px;
  background:var(--paper); color:var(--ink); font-size:13px; font-weight:600;
  padding:7px 13px; border-radius:100px; border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(18,33,27,.08);
}
.map-cta{
  position:absolute; right:16px; bottom:16px;
  display:inline-flex; align-items:center; gap:7px;
  background:var(--green); color:var(--cream); font-size:13.5px; font-weight:600;
  padding:9px 15px; border-radius:100px;
  transition:background .25s var(--ease-out), transform .25s var(--ease-out);
}
.map-cta svg{ width:15px; height:15px; }
@media (hover:hover){
  .office-map:hover .map-cta{ background:var(--green-2); transform:translateY(-1px); }
}
.office-map:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
@media (max-width:520px){
  .map-pin-label{ left:12px; top:12px; font-size:12px; padding:6px 11px; }
  .map-cta{ right:12px; bottom:12px; }
}

/* ── Hero pause control: invisible, keyboard-reachable (2026-07-18) ───────
   Jake asked for the bottom-right button gone. Deleting it outright would fail WCAG 2.2.2
   (Level A) — the hero video auto-starts and loops well past 5s, so a pause mechanism is
   required. Same solution as the reel: the skip-link pattern. Clipped out of the layout so it
   never renders for a mouse or a touch (Jake never sees it), but :focus-visible restores it
   full-size for anyone tabbing through. Declared after the original rules so it wins. */
.hero-pause{
  position:absolute; width:1px; height:1px; padding:0; margin:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  opacity:0 !important; pointer-events:none; border:0;
}
.hero:hover .hero-pause,
.hero-aerial.is-paused .hero-pause{ opacity:0 !important; }
.hero-pause:focus-visible{
  width:40px; height:40px; clip-path:none; overflow:visible;
  right:18px; bottom:18px; left:auto; top:auto;
  opacity:1 !important; pointer-events:auto;
  border:1px solid rgba(243,242,235,.28); padding:0;
  outline:2px solid var(--sage); outline-offset:3px;
}
@media (hover:none){ .hero-pause{ opacity:0 !important; } }

/* The mobile reel is a 4:5 portrait re-render, not a crop — so the box has to change ratio
   with it, or the browser letterboxes a 4:5 file into a 16:9 frame. */
@media (max-width:760px){
  .reel-v.reel-v-tall{ aspect-ratio:4/5; }
}

/* ── Stacked .split: cap the portrait (2026-07-19) ────────────────────────
   Below 860px .split collapses to one column, and the figure had no width cap — so a 1122×1402
   portrait filled the full column and its height exploded: measured 823px tall at a 820px
   viewport, 91% of the screen. One image was eating a whole scroll.
   Cap it and centre it. 380px keeps it a portrait you read past, not a wall you scroll through
   (~475px tall = about half a phone screen, in proportion with the type beside it). */
@media (max-width:860px){
  .split .figure-frame,
  .split > figure{
    max-width:380px; margin-inline:auto; width:100%;
  }
}
@media (max-width:420px){
  .split .figure-frame,
  .split > figure{ max-width:300px; }
}

/* ── Reassurance band: rebalanced after the trio came out (2026-07-19) ────
   With the three tiles removed the band went thin: measured 276px of text sitting in a 630px
   container at 700px wide — 389px of dead space to the right. Three causes compounding:
     · .reassure-lead is capped at 24ch, and
     · its font clamps to the 1.3rem MINIMUM everywhere below ~867px (2.4vw never reaches it),
       so the type was at its smallest exactly where the container was widest, and
     · the CTAs stack in a column, leaving the right half empty again.
   So in the stacked band: let the type grow with the viewport, widen the measure, and set the
   two buttons side by side so they read as a pair and hold the width. Phones keep the stack —
   two pills don't fit on one row at 390px. */
@media (max-width:820px){
  .reassure-lead{
    font-size:clamp(1.35rem, 3.6vw, 1.85rem);
    max-width:30ch;
  }
  .reassure-cta{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px 14px; }
  .reassure-cta .btn{ flex:0 0 auto; }
}
@media (max-width:520px){
  .reassure-cta{ flex-direction:column; align-items:stretch; }
  .reassure-cta .btn{ width:100%; justify-content:center; }
}

/* ================= CITY GROUP — "STATEMENT" BRAND LAYER (final cascade) =================
   Chosen direction (2026-07): warm sand ground + petrol-teal accent + Newsreader serif display.
   The Counsel layer routes the gold and oxblood tokens through --green, so overriding the
   sand / ink / green families here restyles the whole site. Warm, editorial, premium, and
   deliberately distinct from the previous forest-green theme and the dark+gold cliche. */
:root{
  /* warm sand grounds */
  --bone:#F1EBDE; --bone-2:#F8F3E9; --paper:#FAF6EE;
  --stone:#EAE3D3; --stone-2:#E0D7C3; --cream:#F1EBDE;
  /* warm ink */
  --ink:#211C15; --ink-soft:#463F31; --ink-mute:#6E6455;
  /* petrol-teal accent (routed through the green family so all usages recolour) */
  --green:#16716A; --green-2:#125E58; --green-3:#4E8F87; --green-soft:rgba(22,113,106,.08);
  --forest-deep:#123A35;           /* deep teal ground for footer + closing CTA */
  --sage:#A9CFC8;                  /* accent text on dark grounds (eyebrows/cites) */
  --bone-mute:#AFC5C0;
  --accent:#16716A; --accent-2:#4E8F87;
  --line:rgba(33,28,21,.14); --rule:rgba(33,28,21,.14); --rule-2:rgba(33,28,21,.07);
  --ink-line:rgba(33,28,21,.14);
  --shadow-sm:0 18px 42px -24px rgba(40,34,20,.28); --shadow:0 30px 66px -30px rgba(40,34,20,.32);
}
/* Statement hero is LIGHT (sand ground, serif ink headline), not a dark hero */
.hero.hero-dark{ background:transparent !important; }
.hero.hero-light-cg{ background:transparent; padding-top:clamp(48px,7vw,84px); }
/* Client testimonials (real, from the firm's site) */
.tstmnl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:10px; }
.tstmnl{ background:var(--bone-2); border:1px solid var(--line); border-radius:5px;
  padding:28px 26px; margin:0; display:flex; flex-direction:column; gap:15px; }
.tstmnl .t-stars{ color:var(--accent); letter-spacing:.14em; font-size:14px; }
.tstmnl blockquote{ font-family:'Newsreader',Georgia,serif; font-weight:400; font-size:17.5px;
  line-height:1.5; color:var(--ink); margin:0; }
.tstmnl figcaption{ font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-mute); margin-top:auto; }
@media(max-width:820px){ .tstmnl-grid{ grid-template-columns:1fr; } }


/* ============ CINEMATIC HERO + BRAND LOGO + MOTION CRAFT (final layer) ============ */
/* Logo lockups replace the text wordmark. Height-constrained; width auto keeps ratio. */
.brand.brand-img{ display:flex; align-items:center; padding:0; border:0; }
.brand.brand-img img{ height:clamp(30px,3.4vw,40px); width:auto; display:block; }
.foot-logo{ height:38px; width:auto; display:block; }

/* --- Cinematic hero --- */
.hero.hero-cine{ position:relative; isolation:isolate; overflow:hidden; min-height:clamp(560px,84svh,860px);
  display:flex; align-items:center; background:var(--forest-deep); }
.hero-cine .hero-bg{ position:absolute; inset:0; z-index:-2; display:block; }
.hero-cine .hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:72% 50%; }
.hero.hero-cine::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(98deg, rgba(8,20,19,.94) 0%, rgba(10,34,31,.80) 34%,
                                    rgba(12,42,38,.34) 62%, rgba(12,42,38,.06) 100%); }
.hero-grain{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.34; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.hero-cine-in{ position:relative; padding-block:clamp(64px,9vh,110px); }
.hero-cine .eyebrow{ color:var(--sage); }
.hero-cine .eyebrow::before{ background:var(--sage); }
.hero-cine h1{ font-family:var(--serif); font-weight:300; color:#F7F2EB; max-width:16ch;
  font-size:clamp(2.5rem,6.2vw,5.2rem); line-height:.99; letter-spacing:-.02em;
  text-shadow:0 2px 44px rgba(0,0,0,.42); }
.hero-cine h1 em{ font-style:italic; color:var(--sage); }
.hero-cine .lede{ color:rgba(244,239,234,.86); max-width:54ch; margin-top:24px; }
.hero-cine .hero-proof{ color:rgba(244,239,234,.74); margin-top:26px; }
.hero-cine .hero-proof b{ color:var(--cream); }
.hero-cine .btn{ background:var(--sage); color:var(--forest-deep); border-color:var(--sage); }
.hero-cine .btn-ghost{ background:transparent; color:var(--cream); border:1.5px solid rgba(244,239,234,.34); }
@media (hover:hover){ .hero-cine .btn:hover{ transform:translateY(-2px); }
  .hero-cine .btn-ghost:hover{ border-color:var(--cream); background:rgba(244,239,234,.08); } }
@media (max-width:700px){ .hero-cine .hero-bg img{ object-position:78% 50%; }
  .hero.hero-cine::after{ background:linear-gradient(178deg, rgba(8,20,19,.90) 0%, rgba(10,34,31,.80) 46%, rgba(12,42,38,.62) 100%); } }

/* --- Motion craft: magnetic buttons, link draw, card lift (all hover-gated + rm-safe) --- */
@media (hover:hover){
  .btn{ transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .3s, background .3s, color .3s, border-color .3s; }
  .btn:not(.btn-ghost):hover{ transform:translateY(-2px); box-shadow:0 20px 40px -18px rgba(18,58,53,.55); }
  .link-arrow{ transition:color .25s; }
  .link-arrow svg{ transition:transform .28s cubic-bezier(.2,.7,.2,1); }
  .link-arrow:hover svg{ transform:translateX(5px); }
  .pa-card,.triage-card,.team-card,.tstmnl{ transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; }
  .pa-card:hover,.triage-card:hover,.team-card:hover{ transform:translateY(-3px); }
}
@media (prefers-reduced-motion:reduce){
  .btn,.pa-card,.triage-card,.team-card,.tstmnl,.link-arrow svg{ transition:none !important; transform:none !important; }
  .hero-grain{ display:none; }
}

/* ============ TONAL LADDER + DEPTH (audit fix: 2 flat tones -> layered rhythm) ============ */
/* Grounds. Each carries a faint radial so no fill is dead-flat. */
.ground-sand{ background:var(--bone);
  background-image:radial-gradient(80% 60% at 18% 0%, rgba(255,252,246,.85), transparent 62%); }
.ground-stone{ background:var(--stone);
  background-image:radial-gradient(70% 55% at 82% 4%, rgba(250,246,238,.6), transparent 60%); }
.ground-deep{ position:relative; background:var(--forest-deep); color:var(--cream); isolation:isolate;
  background-image:
    radial-gradient(60% 50% at 16% 6%, rgba(35,110,100,.42), transparent 62%),
    radial-gradient(52% 46% at 88% 92%, rgba(169,207,200,.13), transparent 64%); }
.ground-deep::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.28;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
/* type + components inside a dark ground */
.ground-deep h2,.ground-deep h3,.ground-deep .h-lg,.ground-deep .h-md{ color:#F7F2EB; }
.ground-deep p,.ground-deep .lede{ color:rgba(244,239,234,.84); }
.ground-deep .eyebrow{ color:var(--sage); }
.ground-deep .eyebrow::before{ background:var(--sage); }
.ground-deep .muted{ color:rgba(244,239,234,.62); }
.ground-deep .stat b{ color:var(--sage); }
.ground-deep .stat span{ color:rgba(244,239,234,.72); }
.ground-deep .stats{ border-color:rgba(244,239,234,.16); }
.ground-deep .stat{ border-color:rgba(244,239,234,.16); }
/* testimonials on dark */
.ground-deep .tstmnl{ background:rgba(244,239,234,.055); border-color:rgba(244,239,234,.16);
  backdrop-filter:none; box-shadow:0 22px 50px -34px rgba(0,0,0,.7); }
.ground-deep .tstmnl blockquote{ color:#F4EFEA; }
.ground-deep .tstmnl figcaption{ color:rgba(244,239,234,.62); }
.ground-deep .t-stars{ color:var(--sage); }

/* Stats band: give the numbers real presence on the dark ground */
.stats-band .stat b{ font-family:var(--serif); font-weight:300; letter-spacing:-.01em; }

/* --- Photo band: full-bleed image + scrim + centred call --- */
.photo-band-cg{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center;
  min-height:clamp(360px,46svh,520px); background:var(--forest-deep); text-align:center; }
.photo-band-cg .pb-bg{ position:absolute; inset:0; z-index:-2; display:block; }
.photo-band-cg .pb-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 62%; }
.photo-band-cg::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,20,19,.82) 0%, rgba(10,30,28,.62) 44%, rgba(8,20,19,.86) 100%); }
.pb-in{ position:relative; padding-block:clamp(48px,7vh,84px); }
.pb-quote{ font-family:var(--serif); font-weight:300; color:#F7F2EB; letter-spacing:-.015em;
  font-size:clamp(1.9rem,3.6vw,3.1rem); line-height:1.1; max-width:20ch; margin-inline:auto; }
.pb-sub{ color:rgba(244,239,234,.8); max-width:52ch; margin:16px auto 26px; font-size:15.5px; line-height:1.6; }
.photo-band-cg .btn{ background:var(--sage); color:var(--forest-deep); border-color:var(--sage); }

/* --- Depth: real elevation on light cards, hairline separation between grounds --- */
.pa-card,.triage-card,.team-card{ box-shadow:0 1px 2px rgba(33,28,21,.04), 0 10px 26px -18px rgba(40,34,20,.30); }
@media (hover:hover){
  .pa-card:hover,.triage-card:hover,.team-card:hover{
    box-shadow:0 2px 4px rgba(33,28,21,.05), 0 26px 54px -26px rgba(40,34,20,.42); }
}
.ground-deep + section:not(.ground-deep), section:not(.ground-deep) + .ground-deep{ position:relative; }

/* ============ MOTION LAYER (never gates visibility) ============ */
/* riseIn previously animated opacity 0 -> 1 on a scroll timeline, so any element below the
   fold rendered INVISIBLE in print, in screenshots, and any time the timeline failed to
   advance. Content must never depend on animation. Transform-only keeps the movement and
   guarantees the text is always there. */
@keyframes riseIn{ from{ transform:translateY(26px); } to{ transform:none; } }
@keyframes riseFade{ from{ transform:translateY(22px); } to{ transform:none; } }
.reveal{ opacity:1 !important; }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    /* staggered entrance for grids: each child trails the last */
    .pa-grid > *, .proc-grid > *, .tstmnl-grid > *, .team-grid > *, .triage-grid > *{
      animation:riseFade both cubic-bezier(.2,.7,.2,1);
      animation-timeline:view(); animation-range:entry 2% entry 46%; }
    /* parallax drift on full-bleed imagery */
    .photo-band-cg .pb-bg img{ animation:pbDrift both linear;
      animation-timeline:view(); animation-range:cover; will-change:transform; }
    @keyframes pbDrift{ from{ transform:scale(1.12) translateY(-2.2%); } to{ transform:scale(1.12) translateY(2.2%); } }
    /* hero image settles slowly after load (transform only) */
    .hero-cine .hero-bg img{ animation:heroSettle 2.4s cubic-bezier(.16,.8,.24,1) both; }
    @keyframes heroSettle{ from{ transform:scale(1.06); } to{ transform:scale(1); } }
    /* section headings draw in */
    .sec-head .eyebrow::before{ animation:ruleDraw .9s cubic-bezier(.2,.7,.2,1) both;
      animation-timeline:view(); animation-range:entry 0% entry 40%; transform-origin:left; }
    @keyframes ruleDraw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
  }
}
/* Hero entrance: transform-only stagger, fires on load (not scroll) */
@media (prefers-reduced-motion:no-preference){
  .hero-cine .hero-stage{ animation:riseIn .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero-cine .hero-stage:nth-child(1){ animation-delay:.04s }
  .hero-cine .hero-stage:nth-child(2){ animation-delay:.13s }
  .hero-cine .hero-stage:nth-child(3){ animation-delay:.22s }
  .hero-cine .hero-stage:nth-child(4){ animation-delay:.31s }
  .hero-cine .hero-stage:nth-child(5){ animation-delay:.40s }
}
@media print{ .reveal,.hero-stage,.pa-grid>*,.proc-grid>*,.tstmnl-grid>*,.team-grid>*,.triage-grid>*{
  opacity:1 !important; transform:none !important; animation:none !important; } }
@media (prefers-reduced-motion:reduce){
  .pa-grid>*,.proc-grid>*,.tstmnl-grid>*,.team-grid>*,.triage-grid>*,
  .hero-cine .hero-stage,.hero-cine .hero-bg img,.photo-band-cg .pb-bg img,.sec-head .eyebrow::before{
    animation:none !important; transform:none !important; } }

/* ============ OFFICE CARDS + MAPS (self-hosted OSM, no third-party tracker) ============ */
.office-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:8px; }
.office-card{ background:var(--bone-2); border:1px solid var(--line); border-radius:6px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 1px 2px rgba(33,28,21,.04), 0 14px 34px -22px rgba(40,34,20,.34); }
.office-map{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--stone); }
.office-map img{ width:100%; height:100%; object-fit:cover; display:block; }
.office-pinlabel{ position:absolute; left:14px; bottom:32px; display:inline-flex; align-items:center; gap:7px;
  background:var(--forest-deep); color:var(--cream); font-size:12.5px; font-weight:600; letter-spacing:.02em;
  padding:9px 15px; border-radius:100px; box-shadow:0 10px 24px -12px rgba(0,0,0,.6); }
.office-pinlabel svg{ width:14px; height:14px; }
.office-body{ padding:24px 26px 26px; }
.office-body h3{ font-family:var(--serif); font-weight:400; font-size:21px; line-height:1.3; color:var(--ink); margin:6px 0 10px; }
.office-body .muted{ font-size:14px; }
.office-links{ margin-top:14px; }
@media (hover:hover){
  .office-card{ transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
  .office-card:hover{ transform:translateY(-3px); box-shadow:0 2px 5px rgba(33,28,21,.05), 0 30px 60px -28px rgba(40,34,20,.45); }
  .office-map img{ transition:transform .6s cubic-bezier(.2,.7,.2,1); }
  .office-card:hover .office-map img{ transform:scale(1.045); }
}
@media (max-width:820px){ .office-grid{ grid-template-columns:1fr; } }

/* ============ FIND YOUR CHARGE (replaces the generic site search) ============ */
.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; }
.fc-search{ margin-top:30px; max-width:640px; }
.fc-search input{ width:100%; font-family:var(--sans); font-size:16.5px; color:var(--ink);
  background:var(--bone-2); border:1.5px solid var(--line); border-radius:100px;
  padding:17px 26px; transition:border-color .25s, box-shadow .25s, background .25s; }
.fc-search input::placeholder{ color:var(--ink-mute); }
.fc-search input:focus{ outline:none; border-color:var(--green);
  box-shadow:0 0 0 4px rgba(22,113,106,.13); background:#fff; }
.fc-count{ margin-top:10px; font-size:13px; color:var(--ink-mute); letter-spacing:.02em; }
.fc-list{ border-top:1px solid var(--line); }
.fc-item{ border-bottom:1px solid var(--line); }
.fc-item > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px;
  padding:20px 4px; transition:color .22s; }
.fc-item > summary::-webkit-details-marker{ display:none; }
.fc-charge{ font-family:var(--serif); font-weight:400; font-size:clamp(1.12rem,1.7vw,1.42rem);
  color:var(--ink); line-height:1.25; flex:1; }
.fc-tag{ font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green); background:var(--green-soft); border-radius:100px; padding:6px 12px; white-space:nowrap; }
.fc-plus{ position:relative; width:15px; height:15px; flex:none; }
.fc-plus::before,.fc-plus::after{ content:""; position:absolute; inset:0; margin:auto;
  background:var(--green); transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.fc-plus::before{ width:15px; height:1.5px; }
.fc-plus::after{ width:1.5px; height:15px; }
.fc-item[open] .fc-plus::after{ transform:scaleY(0); }
.fc-body{ padding:2px 4px 28px; max-width:78ch; }
.fc-lead{ font-family:var(--serif); font-style:italic; font-size:1.06rem; color:var(--ink-soft); margin-bottom:18px; }
.fc-cols{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.fc-cols p:not(.eyebrow){ font-size:14.6px; line-height:1.62; }
.fc-act{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:22px; }
@media (hover:hover){ .fc-item > summary:hover .fc-charge{ color:var(--green); } }
@media (max-width:760px){ .fc-cols{ grid-template-columns:1fr; gap:18px; }
  .fc-tag{ display:none; } }
@media (prefers-reduced-motion:reduce){ .fc-plus::before,.fc-plus::after{ transition:none; } }