/* ─────────────────────────────────────────────────────────────────────────
   Law Office of Aaron P. McAllister — screen design system
   Shared by the homepage and every pillar / charge page.
   Tokens and rules follow 05-Web-Design/DIGITAL-BRAND.md; the print system
   in 02-Brand-and-Design/Round-4-Griffin/BRAND.md is unchanged; the mark is the
   Round-5 lion (02-Brand-and-Design/Round-5-Lion/production/BRAND-LION-ADDENDUM.md).
   Paths inside url() are relative to THIS file — keep it beside index.html.
   ───────────────────────────────────────────────────────────────────────── */
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-var.woff2') format('woff2-variations');font-weight:400 650;font-display:swap}
@font-face{font-family:'PlexSans';src:url('fonts/plexsans-var.woff2') format('woff2-variations');font-weight:400 600;font-display:swap}
@font-face{font-family:'PlexMono';src:url('fonts/plexmono-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  /* Vellum White / Mist Grey — neutrals biased to the navy */
  --stone:#EDEEF1; --stone2:#E1E4E9; --paper:#FAFAFB; --wash:#E4E7ED;
  --ink:#141C26; --ink2:#4B5665; --ink3:#7A8694;
  --crimson:#6D0B18; --oxblood:#4F0B18;
  /* Sovereign navy — lifted and bluer than the old near-black */
  --navy:#182842; --navy2:#101B2E; --slate:#31435C; --char:#1C2E4A; --char2:#16253C;
  /* lifted crimson — brand red is unreadable on near-black, this is the on-dark tint */
  --crimson-lift:#CE3945; --red-on-navy:#E85D66;
  --champagne:#C0975C; --gold-lt:#D6B282;
  --foil:linear-gradient(112deg,#6B5228 0%,#B08A4E 26%,#DCBE85 45%,#9C7A42 62%,#CFA96A 80%,#6B5228 100%);
  --hair:rgba(19,28,37,.13); --hair2:rgba(19,28,37,.22);
  --hairL:rgba(192,151,92,.2); --hairL2:rgba(192,151,92,.38);
  --r-img:18px; --r-card:26px; --r-chip:999px;
  --t-hero:clamp(1.85rem,4vw,3.35rem);
  --t-h2:clamp(1.9rem,3.7vw,3.1rem);
  --t-h3:clamp(1.35rem,2.4vw,1.95rem);
  --sec:clamp(56px,6.4vw,98px);
  --fd:'Newsreader',Georgia,serif; --fs:'PlexSans',system-ui,sans-serif; --fc:'PlexSans',system-ui,sans-serif; --fm:'PlexMono',ui-monospace,monospace;
  --e:cubic-bezier(.22,.61,.21,1); --eo:cubic-bezier(.19,1,.22,1);
  --shadow:0 34px 80px -46px rgba(19,28,37,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--stone);color:var(--ink);font-family:var(--fs);font-weight:430;font-size:16px;line-height:1.72;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--crimson);color:#fff}
:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
.dark :focus-visible{outline-color:var(--champagne)}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}

/* ───────── intro curtain ───────── */
#veil{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--navy2);transition:opacity .7s var(--e),visibility .7s}
#veil img{width:min(46vw,230px);opacity:0;transform:translateY(14px);transition:opacity .7s var(--e),transform .7s var(--e)}
#veil.on img{opacity:1;transform:none}
#veil.off{opacity:0;visibility:hidden}
html.static #veil{display:none}

/* ───────── type ───────── */
.eyebrow{font-family:var(--fc);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--slate);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;flex:none}
.eyebrow.c{justify-content:center}
.eyebrow.lt{color:var(--champagne)}
.h{font-family:var(--fd);font-variation-settings:'opsz' 28;font-weight:580;line-height:1.05;letter-spacing:-.022em;text-wrap:balance}
.h b{font-weight:580;color:var(--slate)}
.dark .h{color:#fff}
.dark .h b{color:var(--champagne)}
.h .foil{background:var(--foil);background-size:190% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.h .rd{color:var(--red-on-navy)}
.dark .h .rd,.hero .h .rd{color:var(--red-on-navy)}
.sub{color:var(--ink2);max-width:56ch}
.dark .sub{color:rgba(239,240,242,.64)}
/* masked line reveal */
.lw{display:block;overflow:hidden}
.lw>span{display:block;transform:translateY(115%);transition:transform 1.15s var(--eo)}
.in .lw:nth-child(1)>span{transition-delay:.05s}
.in .lw:nth-child(2)>span{transition-delay:.16s}
.in .lw:nth-child(3)>span{transition-delay:.27s}
.in .lw>span{transform:none}
/* generic rise */
.r{opacity:0;transform:translateY(26px);transition:opacity 1s var(--eo),transform 1s var(--eo)}
.in .r,.r.in{opacity:1;transform:none}
.r2{transition-delay:.1s}.r3{transition-delay:.2s}.r4{transition-delay:.3s}
/* plate aperture reveal */
.plate{position:relative;overflow:hidden;border-radius:var(--r-img);background:#0B1117;clip-path:inset(10% 7% 10% 7% round var(--r-img));transition:clip-path 1.25s var(--eo)}
.plate>img{width:100%;height:100%;object-fit:cover;filter:brightness(.85) saturate(.86) contrast(1.04);transform:scale(1.16);transition:transform 1.5s var(--eo),filter .8s var(--e)}
.plate::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,13,18,.44),transparent 46%),linear-gradient(rgba(19,28,37,.16),transparent 30%);pointer-events:none}
.in .plate,.plate.in{clip-path:inset(0 0 0 0 round var(--r-img))}
.in .plate>img,.plate.in>img{transform:scale(1.001)}
.plate:hover>img{filter:brightness(.97) saturate(1);transform:scale(1.05)}
.plate figcaption{position:absolute;left:16px;bottom:12px;z-index:2;font-family:var(--fc);font-size:8px;letter-spacing:.24em;text-transform:uppercase;color:rgba(239,240,242,.42)}
.in .g2 .plate{transition-delay:.12s}.in .g2 .plate>img{transition-delay:.12s}
.in .g3 .plate{transition-delay:.24s}.in .g3 .plate>img{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .lw>span,.r{transform:none;opacity:1;transition:none}
  .plate{clip-path:inset(0 round var(--r-img))!important}
  .plate>img{transform:none!important}
}
html.static .lw>span{transform:none!important;transition:none}
html.static .r{opacity:1!important;transform:none!important;transition:none}
html.static .plate{clip-path:inset(0 round var(--r-img))!important}
html.static .plate>img{transform:none!important}
html.static .sealwrap{opacity:.9!important}
html.static .rule span{transform:none!important}

/* ───────── pill CTA ───────── */
.pill{display:inline-flex;align-items:center;gap:16px;font-family:var(--fc);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;text-decoration:none;padding:9px 9px 9px 28px;border-radius:var(--r-chip);border:1px solid transparent;transition:.5s var(--e)}
.pill i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;font-style:normal;font-size:14px;position:relative;overflow:hidden}
.pill i b{font-weight:400;position:absolute;transition:transform .45s var(--eo)}
.pill i b+b{transform:translateX(-190%)}
.pill:hover i b{transform:translateX(190%)}
.pill:hover i b+b{transform:none}
.pill--crimson{background:var(--crimson);color:#fff}
.pill--crimson i{background:var(--champagne);color:var(--oxblood)}
.pill--crimson:hover{background:var(--oxblood)}
.pill--foil{background:var(--foil);background-size:170% 100%;color:var(--oxblood);transition:background-position .8s var(--e)}
.pill--foil i{background:var(--oxblood);color:var(--champagne)}
.pill--foil:hover{background-position:90% 0}
.pill--ghost{border-color:var(--hair2);color:var(--ink)}
.pill--ghost i{background:var(--navy);color:var(--champagne)}
.pill--ghost:hover{border-color:var(--navy);color:var(--navy)}
.tlink{display:inline-flex;align-items:center;gap:10px;font-family:var(--fc);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--champagne);position:relative;padding-bottom:4px}
.tlink::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .5s var(--e)}
.tlink:hover::after{right:0}
.tlink i{font-style:normal;transition:transform .45s var(--eo)}
.tlink:hover i{transform:translateX(5px)}
.dark .tlink{color:var(--champagne)}
.tel{font-size:14.5px;color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--hair2);padding-bottom:2px;transition:.4s}
.tel:hover{color:var(--navy);border-color:var(--navy)}
.tel strong{color:var(--ink);font-weight:580}
.dark .tel{color:rgba(239,240,242,.7);border-color:var(--hairL2)}
.dark .tel strong{color:var(--champagne)}
.dark .tel:hover{color:var(--champagne);border-color:var(--champagne)}

/* ───────── chrome ───────── */
#bar{position:fixed;left:0;top:0;height:2px;background:var(--champagne);z-index:120;width:0}
.util{background:var(--navy2);color:rgba(239,240,242,.6)}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px clamp(20px,4vw,56px);font-family:var(--fc);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase}
.util a{color:var(--champagne);text-decoration:none}
.util .ubred{color:var(--crimson-lift);font-weight:700;letter-spacing:.22em}
.util .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--champagne);margin-right:9px;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
header{position:absolute;top:37px;left:0;right:0;z-index:90;transition:.5s var(--e)}
header.stuck{position:fixed;top:0;background:rgba(24,40,66,.92);backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2);border-bottom:1px solid rgba(192,151,92,.26);box-shadow:0 16px 40px -34px rgba(19,28,37,.6)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px clamp(20px,4vw,56px);max-width:1280px;margin:0 auto}
.nav .lk{flex:0 1 auto;min-width:0;color:inherit;text-decoration:none}
.nav .lk img{width:clamp(148px,16vw,190px);transition:width .5s var(--e)}
.nav .lk .lt{display:none}
header.stuck .lk .dk{display:none}header.stuck .lk .lt{display:block}
.nav menu{display:flex;gap:clamp(14px,2vw,30px);list-style:none;align-items:center;background:none;border:none;padding:0}
.nav menu a{font-family:var(--fc);font-size:10px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:rgba(239,240,242,.86);padding:6px 0;position:relative;transition:color .4s var(--e);white-space:nowrap}
.nav menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--champagne);transition:right .45s var(--e)}
.nav menu a:hover{color:var(--champagne)}
.nav menu a:hover::after,.nav menu a.on::after{right:0}
.nav menu a.on{color:var(--champagne)}
header.stuck .nav menu a{color:var(--gold-lt)}
header.stuck .nav menu a::after{background:var(--champagne)}
header.stuck .nav menu a:hover,header.stuck .nav menu a.on{color:#F2E6D2}
.nav .pill{flex:none}
/* line CTA on the light stuck header */
header.stuck .pill--line{color:var(--red-on-navy)}
header.stuck .pill--line i{color:var(--champagne)}
header.stuck .pill--line:hover{color:var(--champagne)}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--hairL2);position:relative;flex:none}
.burger span{position:absolute;left:13px;right:13px;height:1.5px;background:var(--champagne);transition:.4s var(--e)}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){bottom:17px}
header.stuck .burger{border-color:rgba(192,151,92,.45)}
header.stuck .burger span{background:var(--champagne)}
body.menu-open .burger span:nth-child(1){top:21px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){bottom:21px;transform:rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:85;background:var(--navy2);display:flex;flex-direction:column;justify-content:flex-start;gap:2px;
  padding:104px clamp(28px,9vw,54px) calc(40px + env(safe-area-inset-bottom));
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  opacity:0;pointer-events:none;transition:opacity .5s var(--e)}
/* the drawer covers the viewport, but stop the page behind scrolling anyway */
html:has(body.menu-open){overflow:hidden}
/* Drawer items scroll beneath the header, which is transparent until stuck and
   sits below the util bar — so list rows both collided with the logo and peeked
   through the band above it. While the menu is open, pin the header flush to the
   top on its own ground; the drawer's top padding then only has to clear 84px. */
body.menu-open header{position:fixed;top:0;left:0;right:0;background:var(--navy2);backdrop-filter:none}
body.menu-open .drawer{opacity:1;pointer-events:auto}
.drawer a{font-family:var(--fs);font-weight:500;font-size:clamp(1rem,4.2vw,1.25rem);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);text-decoration:none;padding:15px 0;border-bottom:1px solid var(--hairL)}
.drawer a:last-of-type{border-bottom:none}
.drawer .pill{margin-top:24px;align-self:flex-start}
/* the Practice item in the inline header menu carries a real dropdown.
   Hover opens it on desktop; :focus-within keeps it keyboard-reachable. The
   panel is navy glass so it reads over both dark and bright heroes. */
.mitem{position:relative}
.mitem>a{display:inline-flex;align-items:center;gap:5px}
.mcaret{font-style:normal;font-size:8px;opacity:.7;transform:translateY(-1px);transition:transform .35s var(--e)}
.mitem:hover .mcaret,.mitem:focus-within .mcaret{transform:translateY(0) rotate(180deg)}
.mpanel{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,6px);min-width:252px;
  display:flex;flex-direction:column;padding:10px;border-radius:14px;z-index:60;
  background:rgba(13,20,32,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(192,151,92,.3);box-shadow:0 26px 60px -28px rgba(0,0,0,.75);
  opacity:0;visibility:hidden;transition:.35s var(--e)}
.mpanel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.mitem:hover .mpanel,.mitem:focus-within .mpanel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mpanel a{font-family:var(--fc);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(237,238,241,.78);padding:11px 14px;border-radius:9px;white-space:nowrap;
  transition:background .3s var(--e),color .3s var(--e)}
.mpanel a:hover{background:rgba(192,151,92,.14);color:var(--champagne)}

/* practice-page links inside the drawer: a quieter tier under "Practice" */
.drawer-sub{display:flex;flex-direction:column;gap:2px;margin:-6px 0 10px;padding-left:clamp(18px,3vw,30px);
  border-left:1px solid rgba(192,151,92,.28)}
.drawer-sub a{font-family:var(--fs);font-size:clamp(13px,1.6vw,15.5px);font-weight:450;letter-spacing:.01em;
  color:rgba(237,238,241,.62);padding:7px 0;transition:color .35s var(--e),padding-left .35s var(--e)}
.drawer-sub a:hover{color:var(--champagne);padding-left:6px}


/* ───────── hero ───────── */
/* hero always fills the viewport — never capped, never shortened */
.hero{position:relative;min-height:calc(100vh - var(--util-h,0px));min-height:calc(100svh - var(--util-h,0px));display:grid;align-items:end;justify-items:stretch;text-align:left;overflow:hidden;background:var(--navy2);padding:clamp(130px,15vw,168px) 0 clamp(28px,2.6vw,36px)}
/* short/laptop viewports: pull the chrome in so the content still breathes */
@media (max-height:820px){.hero{padding-top:clamp(120px,15vh,160px);padding-bottom:clamp(36px,5vh,56px)}}
@media (max-height:660px){.hero{padding-top:112px;padding-bottom:28px}}
.hero .bg{position:absolute;inset:-16% 0;will-change:transform}
.hero .bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.82) contrast(1.05)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(88% 62% at 50% 40%,transparent,rgba(11,17,23,.5) 80%),linear-gradient(to bottom,rgba(11,17,23,.78),rgba(11,17,23,.18) 32%,rgba(11,17,23,.14) 62%,rgba(16,27,46,.62) 88%,rgba(16,27,46,.9))}
.hero .sealwrap{position:absolute;left:50%;top:39.5%;width:min(52vw,640px,51vh);aspect-ratio:1;transform:translate(-50%,-50%);z-index:1;will-change:transform;opacity:0;transition:opacity 1.6s var(--e);filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 0 7px rgba(214,178,130,.22))}
/* warm bloom sitting behind the seal so it reads as lit metal, not flat line-art */
.hero .sealwrap::before{content:"";position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.34),rgba(0,0,0,.16) 52%,transparent 72%);pointer-events:none}
.hero .sealwrap.in{opacity:.9}
.hero .sealwrap img{position:absolute;inset:0;margin:auto;width:100%}
.hero .sealwrap .ring{animation:ferris 120s linear infinite;transform-origin:50% 50%}
.hero .sealwrap .griff{width:44%;height:44%;object-fit:contain}
@keyframes ferris{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hero .sealwrap .ring{animation:none}}
html.static .hero .sealwrap .ring{animation:none}
.hero .wrap{position:relative;z-index:3;width:100%;max-width:1280px}
.hero h1{font-size:var(--t-hero);letter-spacing:-.022em;line-height:1.14;margin-top:0;max-width:26ch}
.hero .lede{color:rgba(239,240,242,.8);font-size:clamp(15.5px,1.3vw,18px);max-width:50ch;margin-top:26px}
/* hero foot: numbers left, CTA in the right corner */
.herofoot{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(26px,4vw,60px);flex-wrap:wrap;margin-top:clamp(20px,1.8vw,26px);padding-top:clamp(20px,2vw,26px);border-top:1px solid var(--hairL)}
.hstats{display:flex;align-items:flex-end;gap:clamp(24px,4.4vw,72px);flex-wrap:wrap}
.hstats>div{min-width:74px}
.hstats b{font-family:var(--fd);font-variation-settings:'opsz' 28;font-weight:600;font-size:clamp(1.6rem,2.7vw,2.35rem);line-height:1;letter-spacing:-.022em;color:#fff;display:flex;align-items:baseline}
.hstats b i{font-style:normal;color:var(--champagne)}
.hstats>div>span{font-family:var(--fc);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(239,240,242,.92);display:block;margin-top:12px}
.pill--sm{padding:6px 6px 6px 22px;font-size:10px;letter-spacing:.16em;gap:12px}
.pill--sm i{width:32px;height:32px;font-size:12px}
/* line CTA — transparent, red label, gold arrow only */
.pill--line{background:none;border-color:transparent;color:var(--gold-lt);padding:8px 0;gap:13px;font-size:11px;letter-spacing:.2em;transition:color .45s var(--e)}
.pill--line i{background:none;color:var(--red-on-navy);width:auto;height:auto;font-size:16px;overflow:visible;transition:color .45s var(--e)}
.pill--line i b+b{display:none}
.pill--line:hover{background:none;color:var(--red-on-navy)}
.pill--line:hover i{color:var(--champagne)}
.pill--line:hover i b{transform:translateX(6px)}
.contact .pill--line,.faq .pill--line{color:var(--slate)}
.contact .pill--line i,.faq .pill--line i{color:var(--champagne)}
.hero .cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3;font-family:var(--fc);font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(239,240,242,.4);display:flex;flex-direction:column;align-items:center;gap:10px}
.hero .cue i{width:1px;height:40px;background:linear-gradient(rgba(192,151,92,.7),transparent);animation:drop 2.6s var(--e) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.hero .cue i{animation:none}}

/* ───────── stat band ───────── */
.statband{position:relative;z-index:6;margin-top:calc(-1*clamp(56px,6vw,84px))}
.statband .bandcard{background:var(--navy);border:1px solid var(--hairL);border-radius:var(--r-card);padding:clamp(30px,3.6vw,54px) clamp(20px,2.6vw,48px);box-shadow:0 44px 96px -50px rgba(0,0,0,.8);display:grid;grid-template-columns:repeat(4,1fr);position:relative;overflow:hidden}
.statband .bandcard::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 130% at 10% 0%,rgba(192,151,92,.08),transparent 58%);pointer-events:none}
.statband .st{position:relative;padding:0 clamp(16px,2.2vw,34px);border-left:1px solid var(--hairL)}
.statband .st:first-child{border-left:none}
.statband .st b{font-family:var(--fd);font-variation-settings:'opsz' 28;font-weight:615;font-size:clamp(2rem,3.7vw,3.4rem);line-height:1;letter-spacing:-.022em;color:#fff;display:flex;align-items:baseline;gap:2px}
.statband .st b i{font-style:normal;color:var(--champagne)}
.statband .st .l{font-family:var(--fc);font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(239,240,242,.55);display:block;margin-top:13px}
@media (max-width:900px){
  .statband .bandcard{grid-template-columns:1fr 1fr;row-gap:30px}
  .statband .st:nth-child(3){border-left:none}
}
@media (max-width:480px){
  .statband .bandcard{grid-template-columns:1fr 1fr}
  .statband .st{padding:0 14px}
}

/* ───────── attorney credentials ───────── */
.creds{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.2vw,16px);margin-top:clamp(30px,3.4vw,42px)}
/* attorney section runs on the navy ground; cards are glass over it */
.atty{background:var(--navy);color:rgba(239,240,242,.66);position:relative;overflow:hidden}
.attybg{position:absolute;inset:0;z-index:0;pointer-events:none}
.attybg img{width:100%;height:100%;object-fit:cover;object-position:94% center;filter:saturate(1.25) contrast(1.06) brightness(1.06)}
.attybg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 26%,rgba(24,40,66,.9) 48%,rgba(24,40,66,.5) 74%,rgba(24,40,66,.18) 100%)}
@media (max-width:1080px){.attybg img{object-position:88% center}.attybg::after{background:linear-gradient(180deg,rgba(24,40,66,.9),rgba(24,40,66,.8))}}
.atty .creds>div{background:rgba(11,17,23,.55);border:1px solid rgba(192,151,92,.24);backdrop-filter:blur(16px) saturate(1.1)}
.atty .creds>div:hover{border-color:rgba(192,151,92,.5);background:rgba(11,17,23,.6);box-shadow:0 26px 54px -32px rgba(0,0,0,.75)}
.atty .creds dt{color:rgba(192,151,92,.9)}
.atty .creds dd{color:#fff}
/* icon chip carries a photograph behind the gold glyph */
.atty .ci{position:relative;width:54px;height:54px;border-radius:14px;overflow:hidden;background:var(--navy2);border:1px solid rgba(192,151,92,.28);color:var(--champagne)}
.atty .ci img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.46) saturate(.72);transition:filter .6s var(--e),transform .8s var(--eo)}
.atty .creds>div:hover .ci img{filter:brightness(.62) saturate(.9);transform:scale(1.08)}
.atty .creds>div:hover .ci{background:var(--navy2);color:var(--champagne)}
.atty .ci svg{position:relative;z-index:2;width:24px;height:24px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
/* navy CTA — replaces the crimson one */
.pill--navy{background:linear-gradient(135deg,#24395F,#14233C);color:#fff;border:1px solid rgba(192,151,92,.38);padding:8px 8px 8px 30px;position:relative;overflow:hidden;box-shadow:0 20px 44px -24px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.1)}
.pill--navy::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.14) 47%,transparent 63%);transform:translateX(-125%);transition:transform .95s var(--e);pointer-events:none}
.pill--navy:hover::before{transform:translateX(125%)}
.pill--navy i{background:var(--foil);background-size:180% 100%;color:var(--navy2);width:40px;height:40px;z-index:2}
.pill--navy:hover{background:linear-gradient(135deg,#2B4471,#182844);border-color:var(--champagne);transform:translateY(-2px)}
.creds>div{display:flex;align-items:flex-start;gap:16px;padding:clamp(18px,1.9vw,24px);background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-img);transition:transform .55s var(--eo),border-color .5s var(--e),box-shadow .55s var(--e)}
.creds>div:hover{transform:translateY(-4px);border-color:rgba(24,40,66,.32);box-shadow:0 26px 54px -34px rgba(19,28,37,.4)}
.ci{width:46px;height:46px;border-radius:13px;background:rgba(19,28,37,.07);display:grid;place-items:center;color:var(--navy);flex:none;transition:background .5s var(--e),color .5s var(--e)}
.creds>div:hover .ci{background:var(--navy);color:var(--champagne)}
.ci svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.creds dt{font-family:var(--fc);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink3);margin-bottom:7px}
.creds dd{margin:0;font-size:14.5px;font-weight:520;color:var(--ink);line-height:1.45}
@media (max-width:560px){.creds{grid-template-columns:1fr}}


/* seal CTA — weighted, foil chip, sheen sweep */
.pill--seal{background:linear-gradient(135deg,#7E0F1E,#560913);color:#fff;border:none;padding:8px 8px 8px 30px;position:relative;overflow:hidden;box-shadow:0 20px 44px -24px rgba(109,11,24,.8),inset 0 1px 0 rgba(255,255,255,.15)}
.pill--seal::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.17) 47%,transparent 63%);transform:translateX(-125%);transition:transform .95s var(--e);pointer-events:none}
.pill--seal:hover::before{transform:translateX(125%)}
.pill--seal i{background:var(--foil);background-size:180% 100%;color:var(--oxblood);width:40px;height:40px;z-index:2}
.pill--seal:hover{background:linear-gradient(135deg,#8A1122,#5E0A15);transform:translateY(-2px);box-shadow:0 28px 54px -24px rgba(109,11,24,.9),inset 0 1px 0 rgba(255,255,255,.2)}

/* ───────── marquee ───────── */
.mq{background:var(--paper);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);position:relative;overflow:hidden;padding:19px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq .run{display:flex;width:max-content;animation:run 48s linear infinite}
.mq:hover .run,.mq.paused .run{animation-play-state:paused}
@keyframes run{to{transform:translateX(-50%)}}
.mq .run>span{font-family:var(--fc);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink2);padding:0 30px;display:flex;align-items:center;gap:30px;white-space:nowrap}
.mq .run>span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--champagne);opacity:.6}
.mqplay{position:absolute;left:clamp(20px,4vw,56px);top:50%;transform:translateY(-50%);z-index:3;display:flex;align-items:center;gap:10px;background:var(--paper);padding-right:14px}
.mqplay button{width:32px;height:32px;border-radius:50%;background:var(--crimson);color:#fff;display:grid;place-items:center;font-size:9px}
.mqplay img{width:24px}
/* accolades rail — same marquee mechanics, ~20% taller, badge plates */
.aclband{position:relative;background:var(--paper);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.aclband .mq.accolades{background:none;border:none;padding:clamp(24px,2.8vw,34px) 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq.accolades .run{animation-duration:66s}
.mq.accolades .run .acl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;white-space:nowrap;padding:0 clamp(28px,3.4vw,52px);border-left:1px solid var(--hair);height:clamp(104px,10.5vw,132px)}
.mq.accolades .run .acl:first-child{border-left:none}
.mq.accolades .run .acl::after{display:none}
.acl .org{font-family:var(--fc);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--slate)}
.acl .dist{font-family:var(--fd);font-variation-settings:'opsz' 38;font-weight:590;font-size:clamp(17px,1.6vw,21px);letter-spacing:-.014em;color:var(--ink);line-height:1.15}
.acl .yr{font-family:var(--fm);font-size:9px;letter-spacing:.04em;text-transform:none;color:var(--navy);opacity:.6}
.acl .seal{width:26px;opacity:.5;margin-bottom:2px}
.mq.pills{background:var(--stone2);border:none;padding:24px 0}
.mq.pills .run{animation-duration:62s;animation-direction:reverse}
.mq.pills .run>span{font-family:var(--fd);font-variation-settings:'opsz' 34;font-weight:555;font-size:clamp(16px,1.7vw,21px);letter-spacing:-.005em;text-transform:none;color:var(--ink);border:1px solid var(--hair2);border-radius:var(--r-chip);padding:11px 28px;margin:0 7px;transition:.4s var(--e)}
.mq.pills .run>span:hover{border-color:var(--slate);color:var(--slate)}
.mq.pills .run>span::after{display:none}
html.static .mq .run{animation:none}

/* ───────── sections ───────── */
section{padding:var(--sec) 0;position:relative;overflow-x:clip}
.dark{background:var(--navy);color:rgba(237,238,241,.68)}
#practice{position:relative;overflow:hidden}
#practice>section{position:relative;z-index:2}
.shead{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:end;margin-bottom:clamp(26px,3.2vw,44px)}
.shead .no{font-family:var(--fm);font-size:12px;font-weight:500;color:var(--navy);padding-bottom:11px;letter-spacing:.06em}
.dark .shead .no{color:var(--champagne)}
.shead h2{font-size:var(--t-h2)}
.shead .note{font-family:var(--fc);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);padding-bottom:10px;text-align:right;max-width:220px;line-height:1.9}
.dark .shead .note{color:rgba(239,240,242,.4)}
.center{text-align:center;max-width:680px;margin:0 auto clamp(28px,3.4vw,46px)}
.center h2{font-size:var(--t-h2);margin:18px 0 18px}
.center .sub{margin:0 auto}
.wm{position:absolute;pointer-events:none;opacity:.05;z-index:0;will-change:transform}

/* ── the glyph as atmosphere: enormous, tonal, barely-there ── */
.glyphbg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(168%,2100px);max-width:none;opacity:.055;pointer-events:none;z-index:0;will-change:transform}
.glyphbg.right{left:auto;right:-32%;transform:translateY(-50%)}
/* the same watermark on a LIGHT band: the antique mark at .055 disappears on
   vellum, so the light variant runs warmer and heavier, and the band needs
   its own stacking context or the mark floats over the content. */
.pband{position:relative;overflow:hidden}
.pband>.wrap{position:relative;z-index:2}
.glyphbg--light{opacity:.085;width:min(120%,1500px)}
.pband.dark .glyphbg--light{opacity:.05}

/* ── the name, repeated: identity as a supergraphic ── */
.namestack{position:relative;background:var(--navy2);overflow:hidden;padding:clamp(44px,5.2vw,74px) 0;text-align:center}
.namestack .rowset{display:flex;flex-direction:column;align-items:center;gap:clamp(2px,.6vw,8px)}
.namestack span{display:block;font-family:var(--fd);font-variation-settings:'opsz' 60;font-weight:600;font-size:clamp(1.85rem,6.9vw,5.5rem);line-height:.94;letter-spacing:-.03em;white-space:nowrap;color:rgba(192,151,92,.09);transition:color 1.1s var(--e)}
/* the ghosted rows carry more gold the closer they sit to the lit centre */
.namestack .rowset span:nth-child(1),
.namestack .rowset span:nth-child(5){color:rgba(198,158,98,.15)}
.namestack .rowset span:nth-child(2),
.namestack .rowset span:nth-child(4){color:rgba(198,158,98,.28)}

/* The centre row ticks, after the Elementor rotate headline on letshibachi.com:
   a one-row window with overflow hidden, and a column that steps down so each
   row drops in from above. It holds, snaps, holds — the hold is what makes it
   read as ticking rather than as a scroll.
   The word never changes; only the colour does. Every row is McALLISTER, and
   the column alternates antique gold / crimson, so what the eye reads is the
   name turning over between the two brand colours on each tick. Because the
   text is identical throughout, the loop point is invisible. */
/* line-height:.94 makes each row's ink taller than its own box, so a .94em
   window let the neighbouring row bleed through the edges mid-tick. The roll
   rows get slack (1.34em) to contain their own ink, the window is pulled back
   into the stack's rhythm with a negative margin, and the top and bottom edges
   fade so a row entering or leaving dissolves instead of showing a hard sliver.
   Caps occupy roughly 24–76% of each row box, so the 14%/86% mask stops never
   touch the glyphs. */
.namestack span.lead{display:block;height:1.34em;line-height:1.34;margin:-.2em 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%)}
.namestack .wordroll{display:block;animation:wordtick 12s var(--e) infinite}
.namestack .wordroll b{display:block;font-weight:inherit;height:1.34em;line-height:1.34}
.namestack .wordroll b:nth-child(odd){color:var(--champagne)}
.namestack .wordroll b:nth-child(even){color:var(--red-on-navy)}
@keyframes wordtick{
  0%,20%   {transform:translateY(-80%)}
  25%,45%  {transform:translateY(-60%)}
  50%,70%  {transform:translateY(-40%)}
  75%,95%  {transform:translateY(-20%)}
  100%     {transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){.namestack .wordroll{animation:none;transform:translateY(-80%)}}
html.static .namestack .wordroll{animation:none;transform:translateY(-80%)}
.namestack .cap{margin-top:clamp(18px,2.2vw,28px);font-family:var(--fc);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:rgba(237,238,241,.44)}
.namestack .seal{width:clamp(46px,5vw,62px);margin:0 auto clamp(15px,1.9vw,24px);opacity:.9}
@media (max-width:720px){.namestack span{font-size:clamp(1.5rem,11vw,3rem)}}

/* ───────── attorney ───────── */
.atty .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(34px,5.5vw,88px);align-items:center;position:relative;z-index:2}
.port{position:relative;border-radius:var(--r-card);overflow:hidden;background:radial-gradient(90% 70% at 50% 20%,#26313E,#131C25 55%,#080D12);aspect-ratio:4/5;clip-path:inset(10% 7% 10% 7% round var(--r-card));transition:clip-path 1.25s var(--eo)}
.in .port{clip-path:inset(0 round var(--r-card))}
html.static .port{clip-path:inset(0 round var(--r-card))!important}
.port .sealbg{position:absolute;left:50%;top:40%;width:66%;transform:translate(-50%,-50%);opacity:.15;z-index:0;pointer-events:none}
.port img.p{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 10%;filter:saturate(.88) contrast(1.05) brightness(.96)}
.port .fallback{position:absolute;inset:0;z-index:1;display:grid;place-items:center;align-content:center;gap:16px;text-align:center}
.port .fallback img{width:100px;opacity:.45;margin:0 auto}
.port .fallback span{font-family:var(--fc);font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(239,240,242,.45)}
.port .nameplate{position:absolute;left:0;right:0;bottom:0;padding:30px 30px 24px;background:linear-gradient(to top,rgba(8,13,18,.94),transparent);display:flex;align-items:flex-end;justify-content:space-between;gap:16px;z-index:2}
.port .nameplate b{font-family:var(--fd);font-variation-settings:'opsz' 28;font-weight:600;font-size:20px;color:#fff;display:block;letter-spacing:-.01em}
.port .nameplate span{font-family:var(--fc);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(192,151,92,.8)}
.port .nameplate img{width:34px;opacity:.9}
.atty h2{font-size:var(--t-h2);margin:20px 0 20px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:40px;border-top:1px solid var(--hair)}
.stats>div{padding:26px 6px 0}
.stats b{font-family:var(--fd);font-variation-settings:'opsz' 28;font-weight:600;font-size:clamp(1.8rem,2.9vw,2.5rem);display:block;line-height:1;letter-spacing:-.02em}
.stats b i{font-style:normal;color:var(--crimson)}
.stats span{font-family:var(--fc);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink3);display:block;margin-top:11px}
.atty .sig{margin-top:38px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}

/* ───────── steps ───────── */
/* ── process stage ──────────────────────────────────────────────────────────
   Vellum ground with the corridor rising out of the foot of the section, an
   antique-gold ribbon climbing left→right, and each card pinned by a stem to
   its own node on that ribbon. The ribbon starts at a cap and ENDS in card 04
   — it is a journey with two ends, not a line running off the page.
   Nodes are crimson and throb on the same 2.6s pulse as the .stdot markers in
   the closing band, so the two live-signal devices read as one family. This is
   a deliberate exception to the four-use red ration in DIGITAL-BRAND.md,
   directed by Ron on 28 Jul 2026.
   ───────────────────────────────────────────────────────────────────────── */
.steps-sec{position:relative;overflow:hidden;
  background:radial-gradient(122% 94% at 18% 6%,#FCFAF5 0%,#F5F2EB 40%,#EEEFF2 100%)}
.steps-sec::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(44% 40% at 82% 12%,rgba(192,151,92,.22),transparent 66%),
             radial-gradient(46% 42% at 6% 62%,rgba(24,40,66,.055),transparent 72%)}
/* the corridor supplies image volume at the foot and dissolves upward into vellum */
.stfoot{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:0;pointer-events:none;overflow:hidden}
.stfoot img{width:100%;height:100%;object-fit:cover;object-position:50% 44%;
  filter:sepia(.26) saturate(.72) brightness(1.16);opacity:.42;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.72) 24%,rgba(0,0,0,.26) 54%,transparent 84%);
          mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.72) 24%,rgba(0,0,0,.26) 54%,transparent 84%)}
.stfoot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(244,241,234,.5) 0%,rgba(244,241,234,.72) 42%,rgba(244,241,234,.93) 74%,#F4F1EA 100%)}
.steps-sec .wrap{position:relative;z-index:2}
/* the stage is taller than the reference's 1911×1144 on purpose: type does not
   scale with the frame, so at a 1168px content width the intro and the cards
   need real vertical room or they collide. */
.stage{position:relative;aspect-ratio:1911/1320}

.stveins{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2}
.vein{fill:none;stroke:url(#rg);stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1600;stroke-dashoffset:1600;transition:stroke-dashoffset 2.9s var(--eo) .25s}
.vline{stroke-width:2.6}
.vtrace{stroke-width:1;opacity:.55;transition-delay:.45s}
.vglow{stroke-width:9;filter:url(#rglow);opacity:.4}
.in .vein{stroke-dashoffset:0}
html.static .vein{stroke-dashoffset:0}

.stnode{position:absolute;left:var(--x);top:var(--y);width:17px;height:17px;margin:-8.5px 0 0 -8.5px;
  border-radius:50%;background:radial-gradient(circle at 36% 30%,#C8283A,#6D0B18 74%);z-index:5;
  box-shadow:0 0 0 5px rgba(252,250,245,.94),0 0 0 6px rgba(109,11,24,.2),
             0 0 16px 3px rgba(160,20,35,.36),0 7px 16px -5px rgba(109,11,24,.55);
  transform:scale(0);transition:transform .7s var(--eo);transition-delay:calc(.5s + var(--i)*.34s)}
.stnode.term{width:24px;height:24px;margin:-12px 0 0 -12px;
  box-shadow:0 0 0 6px rgba(252,250,245,.94),0 0 0 7px rgba(109,11,24,.34),
             0 0 30px 4px rgba(160,20,35,.44),0 8px 20px -6px rgba(109,11,24,.6)}
/* the stem that ties each node to the card beneath it */
.stnode::before{content:"";position:absolute;left:50%;top:calc(100% + 4px);width:1px;
  height:clamp(8px,1.35vw,20px);margin-left:-.5px;
  background:linear-gradient(to bottom,rgba(192,151,92,.8),rgba(192,151,92,0))}
.stnode::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(109,11,24,.42);
  animation:nodepulse 2.6s var(--e) infinite;animation-delay:calc(var(--i)*.34s)}
.in .stnode{transform:scale(1)}
html.static .stnode{transform:scale(1)}
@keyframes nodepulse{0%{transform:scale(.85);opacity:.85}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.stnode::after{animation:none}}
html.static .stnode::after{animation:none}

.stintro{position:absolute;left:5%;top:2%;width:34%;z-index:4}
.stintro::before{content:"";position:absolute;inset:-10% -16% -12% -16%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(56% 54% at 36% 48%,rgba(250,248,243,.95) 0%,rgba(250,248,243,.78) 50%,transparent 76%)}
.stpill{display:inline-block;font-family:var(--fc);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--navy);border:1px solid rgba(24,40,66,.2);background:rgba(252,250,245,.6);
  border-radius:var(--r-chip);padding:8px 18px;margin-bottom:16px}
.stintro h2{font-size:var(--t-h2);margin-bottom:14px}
.stintro .sub{font-size:14.5px;margin-bottom:26px;max-width:32ch}

/* the wrapper is a no-op on the stage; below 1080px it becomes the timeline rail */
.ststeps{display:contents}
.stcard{position:absolute;left:var(--x);top:var(--y);width:20.5%;z-index:4;
  background:linear-gradient(168deg,var(--char) 0%,var(--char2) 100%);
  border:1px solid rgba(192,151,92,.2);border-radius:var(--r-card);
  padding:clamp(16px,1.5vw,24px);overflow:hidden;
  box-shadow:0 40px 72px -44px rgba(19,28,37,.8);
  opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--eo),transform .9s var(--eo),box-shadow .55s var(--e),border-color .5s var(--e);
  transition-delay:calc(.55s + var(--i)*.34s)}
.in .stcard{opacity:1;transform:none}
html.static .stcard{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){.stcard{opacity:1;transform:none;transition:none}}
/* 04 is the terminus — wider, gold-edged, with the ribbon ending in it */
.stcard.term{width:23%;border-color:rgba(192,151,92,.52);
  background:linear-gradient(168deg,#1E3252 0%,#16253C 100%);
  box-shadow:0 46px 84px -44px rgba(19,28,37,.86),0 0 0 1px rgba(192,151,92,.14),inset 0 0 44px rgba(192,151,92,.07)}
.stcard.term .stnum{font-size:clamp(1.9rem,3.1vw,2.9rem)}
.stcard.term h3{font-size:clamp(16px,1.55vw,22px)}
.stcard:hover{transform:translateY(-8px);border-color:rgba(192,151,92,.58);
  box-shadow:0 54px 94px -44px rgba(19,28,37,.88)}
.stcard.photo .stimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 38%;opacity:.62;filter:saturate(.82);z-index:0;transition:transform 1.3s var(--eo)}
.stcard.photo:hover .stimg{transform:scale(1.05)}
/* the Themis plates are high-key, so under the old scrim they turned to milk at
   the card head. The wash now starts nearly clear and only closes over the lower
   half, where the body copy actually sits. */
.stcard.photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(177deg,rgba(24,40,66,.06) 0%,rgba(21,34,56,.62) 34%,rgba(16,25,42,.95) 66%)}
.stcard>*{position:relative;z-index:2}
.sthd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:clamp(16px,1.7vw,26px)}
.stnum{font-family:var(--fd);font-variation-settings:'opsz' 60;font-weight:620;font-size:clamp(1.6rem,2.7vw,2.5rem);
  line-height:1;letter-spacing:-.035em;background:var(--foil);background-size:150% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stico{width:clamp(30px,2.5vw,40px);height:clamp(30px,2.5vw,40px);border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(192,151,92,.1);border:1px solid rgba(192,151,92,.34);color:var(--gold-lt);transition:.5s var(--e)}
.stcard:hover .stico{background:var(--champagne);color:var(--navy2);border-color:var(--champagne)}
.stico svg{width:clamp(15px,1.2vw,19px);height:clamp(15px,1.2vw,19px);fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.stcard h3{font-family:var(--fd);font-variation-settings:'opsz' 34;font-weight:575;
  font-size:clamp(15px,1.42vw,20.5px);color:#fff;letter-spacing:-.014em;margin-bottom:9px;line-height:1.18}
.stcard p{font-size:clamp(11.5px,.95vw,13.5px);line-height:1.58;color:rgba(239,240,242,.66)}
/* one plain line of proof per card, on a gold hairline */
.stmeta{margin-top:clamp(12px,1.2vw,17px);padding-top:clamp(10px,1vw,14px);border-top:1px solid rgba(192,151,92,.22);
  font-family:var(--fm);font-size:clamp(8.5px,.68vw,9.8px);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt);opacity:.86}

/* the section closes on three reassurances, then the action. Each blurb is an
   icon and a live red dot over a gold hairline — the dot reuses the process
   node's pulse so the two devices read as one family. */
.stclose{position:relative;z-index:3;margin-top:clamp(26px,3.2vw,48px);padding-top:clamp(24px,2.8vw,38px);
  border-top:1px solid rgba(192,151,92,.42)}
.strail{display:flex;flex-wrap:wrap;gap:clamp(20px,2.8vw,48px);margin-bottom:clamp(26px,3vw,42px)}
.strail>div{flex:1 1 210px;min-width:0}
.stfx{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:clamp(11px,1.1vw,15px);margin-bottom:clamp(12px,1.2vw,16px);
  border-bottom:1px solid rgba(192,151,92,.55)}
.sticon{width:clamp(30px,2.4vw,38px);height:clamp(30px,2.4vw,38px);border-radius:50%;flex:none;
  display:grid;place-items:center;color:var(--champagne);background:rgba(192,151,92,.08);
  border:1px solid rgba(192,151,92,.42);transition:.5s var(--e)}
.sticon svg{width:clamp(15px,1.15vw,18px);height:clamp(15px,1.15vw,18px);fill:none;stroke:currentColor;
  stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.strail>div:hover .sticon{background:var(--navy);border-color:var(--navy);color:var(--champagne)}
.stdot{position:relative;width:9px;height:9px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 36% 32%,#B8202F,#6D0B18 72%);
  box-shadow:0 0 0 3px rgba(252,250,245,.9),0 0 12px 2px rgba(160,20,35,.35)}
.stdot::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(109,11,24,.42);animation:nodepulse 2.6s var(--e) infinite}
@media (prefers-reduced-motion:reduce){.stdot::after{animation:none}}
html.static .stdot::after{animation:none}
.strail b{display:block;font-family:var(--fd);font-variation-settings:'opsz' 34;font-weight:575;
  font-size:clamp(14px,1.15vw,17px);color:var(--navy);letter-spacing:-.012em;line-height:1.25}
.strail p{font-size:clamp(11.5px,.9vw,13px);line-height:1.55;color:var(--ink2);margin-top:6px}
/* .strail span would otherwise flatten .stfx, .sticon and .stdot to display:block */

/* below the staged breakpoint the composition unwinds into a vertical timeline */
@media (max-width:1080px){
  .stage{aspect-ratio:auto;display:block}
  .stveins,.stnode{display:none}
  .stfoot{height:34%}
  .stintro{position:static;width:100%;margin-bottom:clamp(28px,5vw,40px)}
  .stintro .sub{max-width:52ch}
  .ststeps{display:block;position:relative;padding-left:38px}
  .ststeps::before{content:"";position:absolute;left:10px;top:26px;bottom:26px;width:2px;border-radius:2px;
    background:linear-gradient(to bottom,#B08A4E,#DCBE85 42%,#B08A4E)}
  /* relative, not static: .stimg and the scrim are inset:0 and would otherwise
     resolve against .stage and smear the photo across the whole stack */
  .stcard{position:relative;left:auto;top:auto;width:100%!important;margin-bottom:16px;transition-delay:0s}
  .stcard:last-child{margin-bottom:0}
  .stcard:hover{transform:none}
  .stcard p{font-size:13.5px}
  .stcard h3{font-size:19px}
  .stnum{font-size:2rem}
  .strail{gap:24px}
  .strail>div{flex:1 1 220px}
}

.collage{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.collage .plate:nth-child(1){grid-column:1/-1;height:clamp(210px,25vw,305px)}
.collage .plate:nth-child(2),.collage .plate:nth-child(3){height:clamp(150px,17vw,210px)}
.slist{list-style:none;counter-reset:s}
.slist li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;gap:22px;padding:24px 0;border-top:1px solid var(--hair);transition:padding-left .5s var(--e),background .5s var(--e)}
.slist li:hover{padding-left:12px}
.slist li::before{content:"0" counter(s);font-family:var(--fm);font-size:12px;font-weight:500;color:var(--navy);padding-top:6px;letter-spacing:.06em}
.slist h3{font-family:var(--fd);font-variation-settings:'opsz' 34;font-weight:575;font-size:clamp(17px,1.6vw,20.5px);margin-bottom:6px;letter-spacing:-.01em}
.slist p{font-size:14.5px;color:var(--ink2)}

/* ───────── practice cards ───────── */
.pcard{border-radius:var(--r-card);padding:clamp(18px,2vw,27px);margin-bottom:clamp(10px,1.2vw,16px);position:relative;overflow:hidden;transition:transform .6s var(--eo),box-shadow .6s var(--e)}
.pcard:hover{transform:translateY(-5px);box-shadow:0 40px 90px -50px rgba(0,0,0,.8)}
.pcard.a{background:var(--char)}
.pcard.b{background:var(--char2)}
.pcard .ghost{position:absolute;right:clamp(10px,2vw,30px);top:-14px;font-family:var(--fd);font-weight:640;font-size:clamp(90px,11vw,150px);line-height:1;color:rgba(192,151,92,.05);pointer-events:none;transition:color .6s var(--e)}
.pcard:hover .ghost{color:rgba(192,151,92,.09)}
.pchead{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--hairL);margin-bottom:clamp(22px,2.8vw,34px);position:relative;z-index:2}
.pchead img{width:30px;opacity:.85}
.pchead span{font-family:var(--fc);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:rgba(192,151,92,.6)}
.pcbody{display:grid;gap:clamp(18px,2.2vw,30px);align-items:center;position:relative;z-index:2}
.pcard.a .pcbody{grid-template-columns:1.05fr 1.25fr .7fr}
.pcard.b .pcbody{grid-template-columns:.7fr 1.25fr 1.05fr}
.pcard.b .pctext{order:2}.pcard.b .pcbig{order:3}.pcard.b .pcsm{order:1}
.pcbig{height:clamp(152px,15.5vw,200px)}
.pcsm{height:clamp(106px,11vw,140px)}
.pctext h3{font-family:var(--fd);font-variation-settings:'opsz' 48;font-weight:585;font-size:var(--t-h3);color:#fff;letter-spacing:-.016em;margin-bottom:9px}
.pctext p{font-size:14.5px;color:rgba(239,240,242,.62);margin-bottom:14px}
.cites{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:15px}
.cites span{font-family:var(--fm);font-size:9.5px;letter-spacing:.04em;text-transform:none;color:rgba(239,240,242,.6);border:1px solid var(--hairL2);border-radius:var(--r-chip);padding:6px 13px;transition:.4s var(--e)}
.cites span:hover{border-color:var(--champagne);color:var(--champagne)}

/* ───────── pillar landing chrome ─────────
   The fact band reuses the homepage statband card flat under the hero, and
   deck--one narrows the case-file deck to the single relevant matter. */
.pblock .reffoot{margin-top:14px}

/* pillar hero with a generated photograph: the image reads (unlike the .34
   ghost treatment) and a two-way navy scrim keeps the left column, where the
   headline sits, at text contrast while the taillight curve stays visible. */
/* full-bleed like the homepage hero: the photograph owns the viewport and the
   copy settles to the lower left, same grammar as index. justify-items:stretch
   pins the wrap to the standard grid — without it the wrap shrink-wraps and
   the copy drifts off the site's left edge. The photograph runs near-full
   opacity with a NEUTRAL near-black foot fade for text contrast: no navy in
   the scrim, so the image keeps its own color instead of a blue cast. */
.phero.phero--img{min-height:calc(100vh - var(--util-h,0px));min-height:calc(100svh - var(--util-h,0px));
  display:grid;grid-template-columns:100%;align-items:end;justify-items:stretch;
  padding:clamp(130px,15vw,168px) 0 clamp(44px,4.6vw,64px)}
.phero.phero--img .wrap{width:100%;margin:0 auto}
.phero.phero--img .bg img{opacity:.94;filter:saturate(.96)}
.phero.phero--img .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,9,12,.84) 0%,rgba(7,9,12,.34) 40%,transparent 66%),
             linear-gradient(to bottom,rgba(11,17,23,.82) 0%,rgba(11,17,23,.5) 10%,rgba(11,17,23,.18) 19%,transparent 26%)}

/* ───────── pillar landing bands ─────────
   Full-width alternating bands replace the article pgrid: no side rail, no
   audience switcher — one audience, one goal. .pblock keeps the typography;
   .pband sets the band rhythm over it. The dark band reuses the navy ground
   and re-inks the notecards. */
.pband{padding:clamp(44px,5vw,70px) 0}
.pblock.pband h2{font-size:var(--t-h2);font-variation-settings:'opsz' 34;letter-spacing:-.022em;line-height:1.08;margin-bottom:18px}
.pband.dark{background:var(--navy2);border-top:none}
.pband.dark+.pband{border-top:none}
.pband.dark .eyebrow{color:var(--champagne)}
.pband.dark h2{color:#fff}
.pband.dark>.wrap>p{color:rgba(239,240,242,.66)}
/* First hours: six cards in a strict 2×3 lattice, over the night courthouse.
   The photograph sits in a ::before layer under the wrap (which is z-index:2),
   washed navy so the warn cards and white text keep their contrast. */
#mistakes{position:relative}
#mistakes::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(rgba(16,27,46,.86),rgba(16,27,46,.94)),
             url("img/mistakes-night.jpg") center 38%/cover no-repeat}
#mistakes .notegrid{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){#mistakes .notegrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){#mistakes .notegrid{grid-template-columns:1fr}}
.pband.dark .notecard{background:rgba(255,255,255,.045);border-color:var(--hairL)}
.pband.dark .notecard b{color:#fff}
.pband.dark .notecard span{color:rgba(239,240,242,.62)}

/* ───────── problem → response: bento (pillar landing pages) ─────────
   Five worries, five boxes, three sizes. Each card is a photograph washed to
   navy with the words on top — the imagery is deliberately faceless (backs,
   silhouettes, hands) because the visitor is reading about their own trouble
   and a stock model's face invites them to decide it is someone else's.
   Row one: two wide boxes. Row two: three narrower. On the 6-col grid that is
   3+3 then 2+2+2, so nothing is ever orphaned on a half-empty row. */
.psbento{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.3vw,18px);
  margin-top:clamp(22px,2.6vw,34px)}
.pscard{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-card);
  min-height:clamp(230px,21vw,290px);display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--navy);box-shadow:0 24px 54px -38px rgba(8,13,18,.6);
  transition:transform .55s var(--eo),box-shadow .55s var(--e)}
.pscard:hover{transform:translateY(-6px);box-shadow:0 40px 76px -40px rgba(8,13,18,.72)}
.pscard:nth-child(1),.pscard:nth-child(2){grid-column:span 3;min-height:clamp(250px,23vw,320px)}
.pscard:nth-child(3),.pscard:nth-child(4),.pscard:nth-child(5){grid-column:span 2}
.psimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:saturate(.86);transition:transform 1.3s var(--eo)}
.pscard:hover .psimg{transform:scale(1.05)}
/* the title sits well above the card foot, so the wash has to be solid to ~55%
   height — anything lighter and the headline lands on the bright part of the
   photograph. The top third stays open so the image still reads. */
.pscard::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(10,16,25,.97) 0%,rgba(10,16,25,.94) 42%,rgba(12,20,32,.74) 62%,rgba(14,24,40,.34) 82%,rgba(16,27,46,.2) 100%)}
.psbody{position:relative;z-index:2;padding:clamp(18px,1.9vw,26px)}
.pscard .psbody h3{font-family:var(--fd);font-variation-settings:'opsz' 34;font-weight:590;text-shadow:0 1px 12px rgba(6,10,16,.5);
  font-size:clamp(1rem,1.35vw,1.28rem);line-height:1.24;letter-spacing:-.014em;color:#fff;
  margin-bottom:9px;position:relative;padding-left:14px}
/* the crimson tick that marked the worry in the old two-column layout */
.pscard .psbody h3::before{content:"";position:absolute;left:0;top:.28em;width:3px;height:1.05em;
  border-radius:2px;background:linear-gradient(180deg,#C8283A,#6D0B18)}
.pscard .psbody p{font-size:clamp(12px,.92vw,13.2px);line-height:1.6;color:rgba(238,239,242,.8);max-width:52ch}
.psfoot{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,26px);margin-top:clamp(22px,2.6vw,34px)}
.pstel{font-size:12.5px;color:var(--ink3)}
.pstel a{color:var(--navy);font-weight:500}
@media (max-width:900px){
  .psbento{grid-template-columns:repeat(2,1fr)}
  .pscard:nth-child(n){grid-column:span 1}
  .pscard:nth-child(1){grid-column:span 2}
}
@media (max-width:560px){
  .psbento{grid-template-columns:1fr}
  .pscard:nth-child(n){grid-column:span 1;min-height:220px}
}

/* ───────── deck ───────── */
/* the three matters sit side by side and are all legible; the stacked deck they
   replace buried two of the three under the front card at 50% opacity */
/* the deck is a rotating rail: a clipped viewport, a flex track moved by
   transform, arrows + counter below. 3-up desktop, 2-up tablet, 1-up phone. */
.deckvp{overflow:hidden;padding-bottom:8px}
.deck{--dg:clamp(16px,1.9vw,26px);display:flex;gap:var(--dg);align-items:stretch;
  transition:transform .75s var(--eo)}
.deck .dcard{flex:0 0 calc((100% - 2*var(--dg))/3);min-width:0}
@media (max-width:1040px){.deck .dcard{flex-basis:calc((100% - var(--dg))/2)}}
@media (max-width:640px){.deck .dcard{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.deck{transition:none}}
/* Case-study cards after the client's reference: the photograph IS the card,
   washed navy from the foot; chips top-left, a gold badge top-right, a
   two-tone serif title (roman outcome, italic case label), and a white pill.
   Sepia reference re-keyed to the house navy/gold. */
.dcard{position:relative;overflow:hidden;border-radius:var(--r-card);min-height:clamp(460px,40vw,560px);
  display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:var(--navy);
  box-shadow:0 34px 70px -44px rgba(8,13,18,.7);
  transition:transform .6s var(--eo),box-shadow .6s var(--e)}
.dcard:hover{transform:translateY(-8px);box-shadow:0 50px 90px -46px rgba(8,13,18,.8)}
.dcard .csbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:saturate(.96);transition:transform 1.4s var(--eo)}
.dcard:hover .csbg{transform:scale(1.05)}
/* the photographs are high-key by design — the wash only rises far enough to
   carry the type, and the top two-thirds of the card stays bright */
/* the abstract plates are dark, so the wash can ride higher without costing
   the artwork — it now holds under the title line, not just the body copy */
.dcard::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(9,14,20,.94) 0%,rgba(9,14,20,.86) 34%,rgba(9,14,20,.5) 56%,rgba(9,14,20,.14) 78%,transparent 100%)}
.cschips{position:absolute;z-index:3;left:16px;top:16px;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.cschips span{display:inline-flex;align-items:center;gap:7px;font-family:var(--fc);font-size:8.5px;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;padding:7px 13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.44);background:rgba(9,14,20,.36);backdrop-filter:blur(6px)}
.cschips span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--champagne)}
.csbadge{position:absolute;z-index:3;right:16px;top:16px;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#D8B577,#B08A4E 55%,#7E6222)}
.csbadge svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.csbody{position:relative;z-index:2;padding:clamp(20px,2.2vw,30px)}
.dcard .csbody h3{color:#fff;font-family:var(--fd);font-variation-settings:'opsz' 40;font-weight:590;
  font-size:clamp(1.3rem,1.8vw,1.62rem);line-height:1.16;letter-spacing:-.016em;margin-bottom:10px}
.dcard .csbody h3 em{display:block;font-style:italic;font-weight:500;color:rgba(255,255,255,.85)}
.dcard .csbody p{color:rgba(240,240,242,.78);font-size:13.4px;line-height:1.6;margin-bottom:18px;max-width:46ch}
.cspill{display:inline-flex;align-items:center;gap:11px;background:#fff;color:var(--navy);
  border-radius:999px;padding:7px 22px 7px 7px;font-family:var(--fc);font-size:12.5px;font-weight:600;
  transition:.45s var(--e)}
.cspill i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  color:#fff;background:linear-gradient(135deg,#C8283A,#8E1024 60%,#6D0B18);transition:transform .45s var(--e)}
.cspill:hover{transform:translateY(-2px)}
.cspill:hover i{transform:rotate(45deg)}
.arrows{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(38px,4.5vw,56px)}
.arrows button{width:50px;height:50px;border-radius:50%;border:1px solid var(--hair2);display:grid;place-items:center;font-family:var(--fd);font-size:15px;transition:.45s var(--e)}
.arrows button:hover{background:var(--navy);border-color:var(--navy);color:var(--champagne);transform:translateY(-2px)}
.arrows .fwd{background:var(--navy);border-color:var(--navy);color:var(--champagne)}
.arrows .fwd:hover{background:var(--slate)}
.arrows .ct{font-family:var(--fc);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink2);min-width:66px;text-align:center;font-variant-numeric:tabular-nums}

/* ───────── defend ───────── */
/* The words sit ON the picture, in a frosted panel, and the media column
   stretches to the accordion's height — which is what removes the dead space
   the old two-row left column left beside the list.
   The figure is a crimson duotone: the photograph is flattened to greyscale and
   re-tinted through mix-blend-mode:color, so the marble keeps every value of
   its modelling and only the hue is replaced. isolation:isolate keeps the blend
   inside the figure instead of reaching the section behind it. */
.defend{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(24px,3.2vw,52px);align-items:stretch}
.dfmedia{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-card);
  background:var(--navy);min-height:clamp(430px,42vw,560px)}
.dfmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%;
  filter:grayscale(1) contrast(1.16) brightness(.92);transform:scale(1.02);
  transition:transform 1.5s var(--eo)}
.dfmedia:hover img{transform:scale(1.06)}
.dfmedia::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(162deg,#C42133 0%,#8E1024 42%,#4A0912 78%,#22060B 100%);
  mix-blend-mode:color}
.dfmedia::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(14,6,9,.86) 0%,rgba(14,6,9,.28) 42%,rgba(14,6,9,.1) 70%,rgba(30,8,12,.34) 100%)}
.dfpanel{position:absolute;z-index:3;left:clamp(14px,1.5vw,22px);right:clamp(14px,1.5vw,22px);bottom:clamp(14px,1.5vw,22px);
  padding:clamp(20px,2.1vw,30px) clamp(20px,2.1vw,30px) clamp(22px,2.3vw,32px);
  border-radius:var(--r-img);border:1px solid rgba(255,255,255,.16);
  background:rgba(16,10,14,.34);-webkit-backdrop-filter:blur(20px) saturate(1.25);backdrop-filter:blur(20px) saturate(1.25);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.dfpanel .no{display:block;font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:.16em;
  color:var(--champagne);margin-bottom:11px}
.dfpanel h2{font-size:clamp(1.5rem,2.5vw,2.3rem);color:#fff}
.dfpanel h2 b{color:rgba(255,255,255,.62)}
.dflede{margin:clamp(11px,1.2vw,15px) 0 0;color:rgba(240,238,240,.8);font-size:13.6px;line-height:1.6;max-width:46ch}
.acc details{border-top:1px solid var(--hair)}
.acc details:last-child{border-bottom:1px solid var(--hair)}
.acc summary{list-style:none;cursor:pointer;padding:19px 60px 19px 52px;position:relative;font-family:var(--fd);font-variation-settings:'opsz' 42;font-weight:565;font-size:clamp(1.05rem,1.9vw,1.45rem);letter-spacing:-.013em;transition:color .4s,padding-left .45s var(--e)}
.acc summary::-webkit-details-marker{display:none}
.acc summary .n{position:absolute;left:0;top:26px;font-family:var(--fm);font-size:11px;font-weight:500;color:var(--slate)}
.acc summary:hover{color:var(--navy);padding-left:62px}
.acc .chip{position:absolute;right:0;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:10px;background:var(--stone2);display:grid;place-items:center;transition:.5s var(--e)}
.acc .chip::before,.acc .chip::after{content:"";position:absolute;background:var(--ink);transition:.5s var(--e)}
.acc .chip::before{width:12px;height:1.5px}
.acc .chip::after{width:1.5px;height:12px}
.acc details[open] .chip{background:var(--navy);transform:translateY(-50%) rotate(90deg)}
.acc details[open] .chip::before,.acc details[open] .chip::after{background:#fff}
.acc details[open] .chip::after{transform:scaleY(0)}
.acc details[open] summary{color:var(--navy)}
.acc .a{padding:0 60px 22px 52px;color:var(--ink2);font-size:14.5px;animation:fin .55s var(--eo)}
@keyframes fin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.acc .a .cites{margin-top:15px;margin-bottom:0}
.acc .a .cites span{color:var(--ink2);border-color:var(--hair2)}
.acc .a .cites span:hover{color:var(--navy);border-color:var(--navy)}

/* ───────── testimonials ───────── */
.washsec{background:var(--stone2);border-top:1px solid var(--hair)}
.tq{overflow:hidden;margin-right:calc(-1 * clamp(20px,4vw,56px));cursor:grab}
.tq:active{cursor:grabbing}
.tqt{display:flex;gap:clamp(14px,2vw,24px);transition:transform .9s var(--eo);will-change:transform}
.tqc{flex:0 0 clamp(280px,31%,400px);background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-card);padding:clamp(26px,2.8vw,36px);display:flex;flex-direction:column;transition:transform .6s var(--eo),box-shadow .6s var(--e);user-select:none}
.tqc:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.tqc .mk{font-family:var(--fd);font-weight:700;font-size:46px;color:var(--champagne);line-height:.55;opacity:.24}
.tqc blockquote{font-family:var(--fd);font-variation-settings:'opsz' 28;font-weight:475;font-size:clamp(15px,1.35vw,17px);line-height:1.6;margin:18px 0 22px;flex:1;letter-spacing:-.005em}
.tqc .who{display:flex;align-items:center;gap:11px;padding-top:17px;border-top:1px solid var(--hair)}
.tqc .who img{width:22px}
.tqc .who b{font-size:13px;font-weight:600;display:block}
.tqc .who span{font-family:var(--fc);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}

/* ───────── faq ───────── */
.faq .wrap{display:grid;grid-template-columns:375px 1fr;gap:clamp(30px,5.5vw,80px);align-items:start}
.faq h2{font-size:clamp(1.7rem,2.9vw,2.35rem);margin:18px 0 16px}
.faq .ask{margin-top:30px;background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-img);padding:28px}
.faq .ask p{font-size:14px;margin-bottom:18px;color:var(--ink2)}
.faq .acc summary{padding:18px 52px 18px 0;font-size:clamp(15px,1.4vw,17.5px);font-variation-settings:'opsz' 28}
.faq .acc summary:hover{padding-left:6px}
.faq .acc .a{padding:0 52px 20px 0}

/* ───────── contact ───────── */
.contact{background:var(--stone2)}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px);align-items:stretch;position:relative;z-index:2}
.cinfo{background:var(--navy);border-radius:var(--r-card);padding:clamp(30px,3.6vw,50px);position:relative;overflow:hidden;display:flex;flex-direction:column;color:rgba(239,240,242,.66)}
.cinfo .bgi{position:absolute;inset:0;opacity:.14}
.cinfo .bgi img{width:100%;height:100%;object-fit:cover;filter:brightness(.6)}
.cinfo::after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(19,28,37,.88),rgba(11,17,23,.97))}
.cinfo>*{position:relative;z-index:2}
.cinfo .seal{width:58px;margin-bottom:20px}
.cinfo h2{font-size:clamp(1.6rem,2.9vw,2.3rem);margin:16px 0 14px}
.cinfo dl{margin-top:auto;padding-top:34px}
.cinfo dl>div{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:15px 0;border-top:1px solid var(--hairL)}
.cinfo .ico{width:36px;height:36px;border-radius:10px;background:rgba(192,151,92,.12);display:grid;place-items:center;font-size:13px;color:var(--champagne)}
.cinfo dt{font-family:var(--fc);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(192,151,92,.75)}
.cinfo dd{font-size:14.5px;color:#fff;margin-top:2px}
.cinfo dd a{color:var(--champagne);text-decoration:none}
form.card{background:var(--paper);border-radius:var(--r-card);padding:clamp(28px,3.2vw,46px);box-shadow:var(--shadow)}
form.card .fh{display:flex;align-items:center;gap:14px;padding-bottom:21px;border-bottom:1px solid var(--hair);margin-bottom:26px}
form.card .fh img{width:36px}
form.card .fh b{font-family:var(--fd);font-variation-settings:'opsz' 28;font-weight:600;font-size:19px;display:block;line-height:1.2}
form.card .fh span{font-family:var(--fc);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink2)}
.f{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;position:relative}
.f label{font-family:var(--fc);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.f input,.f textarea{font-family:var(--fs);font-weight:450;font-size:15px;color:var(--ink);background:transparent;border:none;border-bottom:1px solid var(--hair2);border-radius:0;padding:11px 2px;width:100%;min-width:0}
.f textarea{min-height:78px;resize:vertical}
.f input:focus,.f textarea:focus{outline:none}
.f .fl{position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--crimson);transition:right .5s var(--eo)}
.f:focus-within .fl{right:0}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips button{font-family:var(--fc);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:10px 15px;border:1px solid var(--hair2);border-radius:var(--r-chip);color:var(--ink2);transition:.4s var(--e)}
.chips button:hover{border-color:var(--crimson);color:var(--crimson)}
.chips button.sel{background:var(--crimson);border-color:var(--crimson);color:#fff}
form.card .pill{width:100%;justify-content:space-between;margin-top:12px}
.fine{font-size:11.5px;line-height:1.6;color:var(--ink3);margin-top:15px}
.fine b{color:var(--ink2);font-weight:580}

/* ───────── footer ───────── */
footer{position:relative;background:var(--navy2);color:rgba(239,240,242,.62);overflow:hidden;padding-top:clamp(40px,4.6vw,62px)}
footer .bgf{position:absolute;inset:0}
footer .bgf img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;filter:brightness(.9) saturate(.95)}
footer::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(11,17,23,.88) 0%,rgba(11,17,23,.3) 26%,rgba(11,17,23,.22) 52%,rgba(11,17,23,.55) 78%,rgba(6,10,14,.94) 100%)}
footer .wrap{position:relative;z-index:2}
.fsoc{display:flex;justify-content:center;flex-wrap:wrap;margin-bottom:clamp(34px,4.5vw,52px)}
.fsoc a{font-family:var(--fc);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne);text-decoration:none;padding:2px 22px;border-left:1px solid rgba(192,151,92,.28);transition:.4s}
.fsoc a:first-child{border-left:none}
.fsoc a:hover{color:#FBEEC0}
.fcta{text-align:center;padding-bottom:clamp(30px,3.6vw,46px)}
.fmark{display:flex;align-items:center;justify-content:center;gap:clamp(20px,2.6vw,34px);margin-bottom:clamp(28px,3.5vw,40px)}
.fmark .wline{width:clamp(300px,42vw,560px);flex:none}
.fmark .fr{flex:0 0 clamp(54px,8vw,140px);height:1px;background:linear-gradient(90deg,transparent,rgba(192,151,92,.55));margin-top:6px}
.fmark .fr:last-child{background:linear-gradient(90deg,rgba(192,151,92,.55),transparent)}
.fcta .row{display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap}
.fdisc{text-align:center;font-size:10.5px;line-height:1.8;color:rgba(239,240,242,.52);padding-top:20px;max-width:74ch;margin:0 auto;text-shadow:0 1px 14px rgba(0,0,0,.75)}
.fbot span{text-shadow:0 1px 12px rgba(0,0,0,.7)}
.fgrid{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(28px,5.5vw,84px);padding:clamp(26px,3vw,40px) clamp(26px,3.4vw,52px);border:1px solid rgba(192,151,92,.18);border-radius:var(--r-card);background:rgba(11,17,23,.62);backdrop-filter:blur(14px)}
.fgrid h4{font-family:var(--fc);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--champagne);margin-bottom:18px}
.fgrid ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.fgrid ul.two{display:block;columns:2;column-gap:clamp(28px,4vw,56px)}
.fgrid ul.two li{padding:5.5px 0;break-inside:avoid}
.fgrid a{color:rgba(239,240,242,.72);text-decoration:none;font-size:13.5px;transition:.4s}
.fgrid a:hover{color:var(--champagne)}
.fcon div{display:flex;align-items:flex-start;gap:12px;padding:7px 0;font-size:13.5px;color:rgba(239,240,242,.72)}
.fcon i{font-style:normal;color:var(--champagne);width:18px;text-align:center;flex:none;font-size:12px;padding-top:1px}
.fcon a{color:rgba(239,240,242,.72)}
.fbot{border-top:1px solid rgba(192,151,92,.16);margin-top:18px;padding:16px 0 24px;font-size:11px;line-height:1.8;color:rgba(239,240,242,.42);display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap}
.fbot a{color:var(--champagne);text-decoration:none;transition:.4s}
.fbot a:hover{color:#FBEEC0}


@media (max-width:1080px){
  .nav menu{display:none}
  .nav .pill{display:none}
  .burger{display:block}
  .atty .wrap{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .pcard.a .pcbody,.pcard.b .pcbody{grid-template-columns:1fr 1fr}
  .pctext{grid-column:1/-1;order:0!important}
  .pcbig,.pcsm{height:clamp(132px,18vw,168px)}
  .defend{grid-template-columns:1fr}
  .dfmedia{min-height:clamp(380px,86vw,470px)}
  .faq .wrap{grid-template-columns:1fr}
  .contact .wrap{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .util .rs{display:none}
  .util .wrap{justify-content:center}
  /* hero on phones: seal lifted into the empty space above the headline,
     stats pinned to a 2-up grid so the CTA stays above the fold */
  .hero{padding-top:76px;padding-bottom:20px}
  .hero .sealwrap{top:33%;width:min(80vw,360px,37vh)}
  .hero .sealwrap.in{opacity:.62}
  .hero h1{max-width:15ch;line-height:1.1}
  .herofoot{margin-top:16px;padding-top:15px;gap:12px;align-items:stretch}
  .hstats{display:grid;grid-template-columns:1fr 1fr;gap:11px 18px;width:100%}
  .hstats>div{min-width:0}
  .hstats b{font-size:1.75rem}
  .hstats>div>span{font-size:9px;letter-spacing:.16em;margin-top:6px}
  .herofoot>.pill--line{align-self:flex-start;padding-top:2px}
  .shead{grid-template-columns:auto 1fr}
  .shead .note{display:none}
  .stats{grid-template-columns:1fr;gap:0}
  .stats>div{padding:18px 0;border-top:1px solid var(--hair)}
  .stats>div:first-child{border-top:none}
  .pcard.a .pcbody,.pcard.b .pcbody{grid-template-columns:1fr}
  .collage{grid-template-columns:1fr 1fr}
  .tqc{flex:0 0 84%}
  .f2{grid-template-columns:1fr}
  .cinfo dl>div{grid-template-columns:36px 1fr;gap:12px}
  .fgrid{grid-template-columns:1fr}
  .fbot{flex-direction:column;gap:8px}
}

/* ── seal sizing overrides — must stay last: same specificity as the
   base rules above, so source order decides the winner ── */
@media (max-width:720px) and (min-height:790px){.hero .sealwrap{top:35%;width:min(88vw,400px,42vh)}}
@media (max-width:720px) and (max-height:700px){.hero .sealwrap{top:30%;width:min(70vw,300px,31vh)}}
@media (min-width:721px) and (max-height:820px){.hero .sealwrap{top:37.5%;width:min(52vw,640px,43vh)}}

/* ═══════════════════════════════════════════════════════════════════════════
   PILLAR / CHARGE PAGE COMPONENTS
   Reusable across every practice-area hub and charge page. Structure follows
   the two sample pages Aaron supplied on 23 Jul 2026: audience switch, case
   reference table, early mistakes, mitigation packet, the law for counsel,
   defenses, FAQs, and a dated verification footer.
   ═══════════════════════════════════════════════════════════════════════════ */

.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}

/* ── pillar hero ─────────────────────────────────────────────────────────── */
.phero{position:relative;overflow:hidden;background:var(--navy2);color:rgba(237,238,241,.72);
  padding:calc(var(--util-h,34px) + clamp(96px,11vw,150px)) 0 clamp(54px,6vw,84px)}
.phero .bg{position:absolute;inset:-12% 0;z-index:0}
.phero .bg img{width:100%;height:100%;object-fit:cover;opacity:.34;filter:saturate(.72)}
.phero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(104deg,rgba(16,27,46,.96) 26%,rgba(16,27,46,.72) 62%,rgba(16,27,46,.9) 100%),
             radial-gradient(64% 90% at 88% 8%,rgba(192,151,92,.16),transparent 66%)}
/* the photographic hero keeps the image's own color — the navy wash and gold
   bloom are for the old text-only pillar hero, not this one */
.phero.phero--img::after{content:none}
.phero .wrap{position:relative;z-index:2}
.phero .inner{max-width:790px}

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-family:var(--fm);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt);opacity:.78;margin-bottom:clamp(20px,2.4vw,30px)}
.crumb a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:.35s var(--e)}
.crumb a:hover{border-bottom-color:currentColor}
.crumb i{font-style:normal;opacity:.5}
.crumb b{font-weight:400;color:#fff;opacity:.9}

.phero h1{font-family:var(--fd);font-variation-settings:'opsz' 60;font-weight:600;color:#fff;
  font-size:clamp(1.9rem,4.1vw,3.2rem);line-height:1.05;letter-spacing:-.025em;margin-bottom:16px}
.phero h1 .foil{background:var(--foil);background-size:150% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.statline{font-family:var(--fm);font-size:clamp(10.5px,.95vw,12.5px);letter-spacing:.04em;
  color:var(--gold-lt);margin-bottom:clamp(20px,2.3vw,28px)}
.phero .lede{font-size:clamp(14.5px,1.22vw,16.5px);line-height:1.7;color:rgba(237,238,241,.78);max-width:62ch}
.pherofoot{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.2vw,30px);margin-top:clamp(26px,3.2vw,40px)}
.pherofoot .tel{font-family:var(--fc);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt)}
.pherofoot .tel a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(192,151,92,.5)}
.pherofoot .tel a:hover{color:var(--champagne)}

/* ── alert chips: the one or two things that matter in the first hours ───── */
.alerts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(18px,2vw,26px)}
.alerts span{display:inline-flex;align-items:center;gap:9px;font-family:var(--fc);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;padding:8px 16px;border-radius:var(--r-chip);
  border:1px solid rgba(232,93,102,.44);background:rgba(232,93,102,.1)}
.alerts span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red-on-navy);flex:none}

/* ── audience switch ─────────────────────────────────────────────────────── */
.audbar{position:sticky;top:var(--hdr-h,104px);z-index:60;background:rgba(250,250,251,.92);backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid var(--hair)}
.audbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-top:11px;padding-bottom:11px;flex-wrap:wrap}
.audsw{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--hair2);border-radius:var(--r-chip);background:var(--paper)}
.audsw button{font-family:var(--fc);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink2);padding:8px 17px;border-radius:var(--r-chip);transition:.4s var(--e);white-space:nowrap}
.audsw button:hover{color:var(--navy)}
.audsw button.sel{background:var(--navy);color:var(--champagne)}
.audbar .hint{font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
/* mode visibility — .for-client and .for-counsel blocks appear only in their mode */
body.aud-client .for-counsel,body.aud-counsel .for-client{display:none}
body.aud-client .onpage a.for-counsel,body.aud-counsel .onpage a.for-client{display:none}

/* ── page body: sticky contents rail + column ────────────────────────────── */
.pgrid{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(30px,4.4vw,72px);align-items:start}
.pbody{min-width:0}
.onpage{position:sticky;top:calc(var(--hdr-h,104px) + var(--aud-h,63px) + 26px);display:flex;flex-direction:column;gap:2px}
.onpage .lab{font-family:var(--fc);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink3);padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--hair)}
.onpage a{font-size:12.6px;line-height:1.35;color:var(--ink2);text-decoration:none;padding:9px 0 9px 15px;
  border-left:2px solid transparent;transition:.35s var(--e)}
.onpage a:hover{color:var(--navy)}
.onpage a.on{color:var(--navy);border-left-color:var(--champagne);font-weight:500}

.pblock{scroll-margin-top:calc(var(--hdr-h,104px) + var(--aud-h,63px) + 22px);padding-bottom:clamp(38px,4.4vw,62px)}
.pblock+.pblock{padding-top:clamp(38px,4.4vw,62px);border-top:1px solid var(--hair)}
.pblock>.eyebrow{margin-bottom:14px}
.pblock h2{font-family:var(--fd);font-variation-settings:'opsz' 42;font-weight:590;
  font-size:clamp(1.45rem,2.5vw,2.05rem);letter-spacing:-.02em;line-height:1.14;margin-bottom:16px;color:var(--ink)}
.pblock h3{font-family:var(--fd);font-variation-settings:'opsz' 34;font-weight:585;
  font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.012em;margin:clamp(24px,2.6vw,34px) 0 10px;color:var(--ink)}
.pblock p{font-size:clamp(14px,1.1vw,15.4px);line-height:1.72;color:var(--ink2);margin-bottom:15px;max-width:70ch}
.pblock p:last-child{margin-bottom:0}
.pblock a:not(.pill){color:var(--navy);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(192,151,92,.6);text-decoration-thickness:1px}
.pblock a:not(.pill):hover{text-decoration-color:var(--navy)}
.plist{list-style:none;margin:4px 0 15px;max-width:70ch}
.plist li{position:relative;padding:0 0 0 24px;margin-bottom:11px;font-size:clamp(14px,1.1vw,15.4px);
  line-height:1.66;color:var(--ink2)}
.plist li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;
  border:1px solid var(--champagne);transform:rotate(45deg)}
.plist li b,.plist li strong{color:var(--ink);font-weight:600}
.plist.num{counter-reset:pl}
.plist.num li{counter-increment:pl;padding-left:38px}
.plist.num li::before{content:"0" counter(pl);border:none;transform:none;top:.05em;left:0;width:auto;height:auto;
  font-family:var(--fm);font-size:11px;color:var(--champagne);letter-spacing:.04em}

/* ── case reference table ────────────────────────────────────────────────── */
.reftable{margin:6px 0 4px}
.reftable .scroll{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r-img);background:var(--paper)}
.reftable table{width:100%;border-collapse:collapse;min-width:440px}
.reftable th,.reftable td{text-align:left;padding:13px clamp(14px,1.5vw,20px);border-bottom:1px solid var(--hair);vertical-align:top}
.reftable thead th{background:var(--navy);color:var(--champagne);font-family:var(--fc);font-size:9px;
  letter-spacing:.22em;text-transform:uppercase;border-bottom:none;white-space:nowrap}
.reftable thead th:first-child{color:rgba(237,238,241,.6)}
.reftable tbody th{font-family:var(--fc);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink3);font-weight:400;white-space:nowrap;width:1%}
.reftable tbody td{font-size:13.6px;line-height:1.5;color:var(--ink);font-weight:500}
.reftable tbody tr:last-child th,.reftable tbody tr:last-child td{border-bottom:none}
.reftable tbody tr:nth-child(even){background:rgba(24,40,66,.022)}
.reffoot{margin-top:14px;font-size:12.4px;line-height:1.6;color:var(--ink3);max-width:70ch}
.reffoot b{color:var(--ink2);font-weight:500}

/* ── note cards: early mistakes, mitigation packet ───────────────────────── */
.notegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:clamp(12px,1.4vw,18px);margin-top:6px}
.notecard{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-img);
  padding:clamp(17px,1.8vw,24px);transition:.45s var(--e)}
.notecard:hover{border-color:var(--hairL2);transform:translateY(-4px)}
.notecard b{display:block;font-family:var(--fd);font-variation-settings:'opsz' 28;font-weight:600;
  font-size:15.2px;line-height:1.28;color:var(--ink);margin-bottom:7px}
.notecard span{display:block;font-size:13.2px;line-height:1.6;color:var(--ink2)}
.notecard.warn{border-color:rgba(109,11,24,.18);background:rgba(109,11,24,.028)}
.notecard.warn b{color:var(--crimson)}
/* the warn icon: crimson on the light band, and on the dark band it has to be
   lifted — var(--crimson) is a print-weight red that goes muddy on navy */
.notecard .noteico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;margin-bottom:13px;
  background:rgba(200,40,58,.1);border:1px solid rgba(200,40,58,.34);color:var(--crimson);
  transition:.45s var(--e)}
.noteico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.notecard:hover .noteico{background:rgba(200,40,58,.18);border-color:rgba(200,40,58,.6)}
.pband.dark .notecard .noteico{background:rgba(232,93,102,.13);border-color:rgba(232,93,102,.38);color:#E85D66}
.pband.dark .notecard:hover .noteico, .pband.dark .notecard .noteico:hover{background:rgba(232,93,102,.22);border-color:rgba(232,93,102,.62)}

/* the section closes on the one mistake that cannot be undone */
.noteclose{margin-top:clamp(22px,2.6vw,34px);padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--hair)}
.pband.dark .noteclose{border-top-color:var(--hairL)}
.noteclose>p{font-size:clamp(13.5px,1.05vw,15px);line-height:1.6;margin:0 0 clamp(14px,1.6vw,20px);max-width:62ch}
.noterow{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,26px)}
.notetel{font-size:12.5px;color:var(--ink3)}
.notetel a{color:var(--navy);font-weight:500}
.pband.dark .notetel{color:rgba(239,240,242,.6)}
.pband.dark .notetel a{color:var(--champagne)}

/* ── counsel blocks ──────────────────────────────────────────────────────── */
.lawcard{background:var(--navy);color:rgba(237,238,241,.72);border-radius:var(--r-card);
  padding:clamp(22px,2.5vw,34px);margin:6px 0 18px;border:1px solid rgba(192,151,92,.18)}
.lawcard h3{color:#fff;margin-top:0}
.lawcard h3:first-child{margin-top:0}
.lawcard .code{font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;color:var(--gold-lt);margin-bottom:14px}
.lawcard p{color:rgba(237,238,241,.72)}
.lawcard .plist li{color:rgba(237,238,241,.72)}
.lawcard .plist li b{color:#fff}
.lawcard .plist li::before{border-color:rgba(192,151,92,.7)}
.lawcard+.lawcard{margin-top:0}

/* ── charges within this practice area ───────────────────────────────────── */
/* ── where cases turn: full-width rows ──
   After the client's reference: numeral, name, category chip, one-line lead
   and a circular arrow, each row a rounded outline that fills to solid on the
   open one. Built on <details>, so the arrow is not decoration — it rotates and
   the row expands to the detail beneath. One row opens by default, which is
   what gives the stack its highlighted "active" row. */
.turnhead{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3vw,56px);align-items:end;
  margin-bottom:clamp(22px,2.6vw,34px)}
.turnaside{max-width:44ch;text-align:right}
.turnaside p{font-size:13.4px;line-height:1.6;color:var(--ink2);margin:0 0 14px}
.turnlist{display:flex;flex-direction:column;gap:clamp(8px,.9vw,12px)}
.turnrow{border:1px solid var(--hair2);border-radius:999px;background:rgba(255,255,255,.5);
  transition:background .45s var(--e),border-color .45s var(--e),box-shadow .45s var(--e)}
.turnrow:hover{border-color:var(--hairL2);background:#fff}
.turnrow[open]{background:#fff;border-color:transparent;border-radius:clamp(22px,2vw,30px);
  box-shadow:0 26px 60px -44px rgba(19,28,37,.55)}
.turnrow>summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:auto minmax(140px,1.15fr) auto 1.5fr auto;
  align-items:center;gap:clamp(12px,1.8vw,28px);
  padding:clamp(13px,1.35vw,19px) clamp(13px,1.35vw,19px) clamp(13px,1.35vw,19px) clamp(20px,2.2vw,34px)}
.turnrow>summary::-webkit-details-marker{display:none}
.tnum{font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--slate)}
.tname{font-family:var(--fd);font-variation-settings:'opsz' 32;font-weight:590;
  font-size:clamp(15px,1.3vw,19px);color:var(--navy);letter-spacing:-.015em;line-height:1.2}
.tchip{display:inline-flex;align-items:center;gap:8px;justify-self:start;white-space:nowrap;
  font-family:var(--fc);font-size:8.5px;letter-spacing:.2em;color:var(--ink2);
  border:1px solid var(--hair2);border-radius:999px;padding:6px 13px 6px 9px}
.tchip::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 36% 32%,#E0C48F,#B08A4E 70%)}
.turnrow[open] .tchip{border-color:transparent;background:rgba(192,151,92,.18);color:var(--navy)}
.tlead{font-size:12.6px;line-height:1.5;color:var(--ink2)}
.tarrow{display:grid;place-items:center;width:clamp(38px,3.2vw,48px);height:clamp(38px,3.2vw,48px);
  border-radius:50%;flex:none;font-style:normal;font-size:15px;
  background:var(--stone2);color:var(--navy);transition:.45s var(--e)}
.turnrow:hover .tarrow{background:var(--navy);color:var(--champagne)}
.turnrow[open] .tarrow{background:linear-gradient(135deg,#D8B577,#B08A4E 55%,#7E6222);color:#fff;
  transform:rotate(90deg)}
.tbody{padding:0 clamp(20px,2.4vw,38px) clamp(18px,1.9vw,26px) clamp(60px,5.2vw,86px)}
.tbody p{font-size:13.2px;line-height:1.68;color:var(--ink2);max-width:76ch;margin:0}
.turnsub{margin-top:clamp(30px,3.4vw,46px)}
@media (max-width:1040px){
  .turnrow>summary{grid-template-columns:auto 1fr auto;row-gap:8px}
  .tchip{grid-column:2;justify-self:start}
  .tlead{grid-column:1/-1;padding-left:clamp(28px,3vw,42px)}
  .tarrow{grid-row:1;grid-column:3}
}
@media (max-width:720px){
  .turnhead{grid-template-columns:1fr}
  .turnaside{text-align:left;max-width:none}
  .turnrow,.turnrow[open]{border-radius:clamp(18px,3vw,24px)}
  .tbody{padding-left:clamp(20px,4vw,34px)}
}

/* ── stage flow: the serpentine infographic ──
   Rows auto-size to their content — the earlier fixed row height left the rail
   floating in dead air, which read as unfinished. The rail is now a 6px gold
   band with rounded caps, the nodes are gold spheres on white plates, and the
   U-turn is anchored to row two with top/bottom offsets (gap + rail offset),
   so the geometry holds at any content height without a script.
   Row two is written 06 05 04 in source so the path reads boustrophedon;
   stacked below 820px it restores true order. */
.flow{--g:clamp(30px,3.4vw,48px);--railpad:clamp(30px,3.6vw,58px);
  position:relative;margin-top:clamp(24px,2.8vw,38px);padding-right:var(--railpad)}
.flowrow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.4vw,44px);padding-bottom:58px}
.flowrow+.flowrow{margin-top:var(--g)}
/* the rail: 6px gold band, capped, from the first node's column to the turn */
.flowrow::before{content:"";position:absolute;left:16.66%;right:0;bottom:10px;height:6px;
  border-radius:3px;background:linear-gradient(90deg,#8A6B2C,#DCBE85 40%,#B08A4E 78%,#C9A25F);
  box-shadow:0 1px 10px rgba(176,138,78,.35)}
.flowturn{position:absolute;right:calc(-1*var(--railpad));width:var(--railpad);
  top:calc(-1*(var(--g) + 16px));bottom:10px;
  border:6px solid #B99055;border-left:0;border-radius:0 999px 999px 0;
  box-shadow:1px 0 10px rgba(176,138,78,.3),inset -1px 0 6px rgba(176,138,78,.22);
  pointer-events:none}
.flowstep{position:relative;display:flex;flex-direction:column;text-align:center;align-items:center}
.flowico{display:grid;place-items:center;width:clamp(44px,3.8vw,58px);height:clamp(44px,3.8vw,58px);
  border-radius:15px;margin-bottom:clamp(12px,1.4vw,18px);
  background:rgba(192,151,92,.1);border:1px solid rgba(192,151,92,.32);color:var(--champagne);
  transition:.45s var(--e)}
.flowico svg{width:clamp(21px,1.8vw,26px);height:clamp(21px,1.8vw,26px);fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.flowstep:hover .flowico{background:var(--navy);border-color:var(--navy);color:var(--champagne);transform:translateY(-3px)}
.flow .flowstep b{display:block;font-family:var(--fd);font-variation-settings:'opsz' 30;font-weight:590;
  font-size:clamp(15px,1.2vw,17.5px);color:var(--navy);letter-spacing:-.014em;line-height:1.24;margin-bottom:8px}
.flow .flowstep b i{display:block;font-style:normal;font-family:var(--fm);font-size:11px;font-weight:500;
  letter-spacing:.14em;color:var(--champagne);margin-bottom:5px}
.flow .flowtxt{display:block;font-size:12.6px;line-height:1.58;color:var(--ink2);max-width:34ch;margin:0 auto}
/* gold sphere on a white plate, centred on the rail */
/* the node lives inside .flowstep, whose box ends where the row's 58px rail
   padding begins — the negative offset drops it down onto the rail itself */
.flownode{position:absolute;left:50%;bottom:-55px;transform:translateX(-50%);
  width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#F4DFAC,#C9A25F 46%,#8A6B2C 90%);
  box-shadow:0 0 0 7px #FDFDFD,0 0 0 8px rgba(192,151,92,.35),0 8px 16px -6px rgba(110,80,30,.55)}
@media (max-width:820px){
  .flow{padding-right:0}
  .flowturn{display:none}
  .flowrow{grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,30px);padding-bottom:8px}
  .flowrow+.flowrow{margin-top:clamp(18px,3vw,30px)}
  .flowrow::before{display:none}
  .flownode{display:none}
  .flowrow:last-of-type{direction:rtl}
  .flowrow:last-of-type>.flowstep{direction:ltr}
}
@media (max-width:520px){.flowrow{grid-template-columns:1fr}}

/* the penalties table, folded — it is reference data, not the story */
.reffold{margin-top:clamp(24px,2.8vw,38px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.reffold summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:clamp(15px,1.5vw,20px) 0;font-family:var(--fd);font-variation-settings:'opsz' 30;
  font-weight:585;font-size:clamp(14.5px,1.15vw,17px);color:var(--navy);letter-spacing:-.012em}
.reffold summary::-webkit-details-marker{display:none}
.reffoldbody{padding-bottom:clamp(14px,1.6vw,22px)}

/* ── charges: three featured with imagery, three as compact rows ──
   Six identical "page in preparation" cards read as a broken section. Ranking
   them says something true instead — these three carry the traffic and the
   consequence, the rest are listed. The pending state is a quiet chip rather
   than a dimmed card, so the section reads as a roadmap, not as dead links. */
.chfeats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px)}
.chfeat{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--hair);
  border-radius:var(--r-img);overflow:hidden;
  transition:transform .5s var(--eo),box-shadow .5s var(--e),border-color .45s var(--e)}
.chfeat:hover{transform:translateY(-5px);border-color:var(--hairL2);box-shadow:0 30px 60px -44px rgba(19,28,37,.5)}
.chmedia{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy)}
.chmedia img{width:100%;height:100%;object-fit:cover;filter:saturate(.88);transition:transform 1.2s var(--eo)}
.chfeat:hover .chmedia img{transform:scale(1.05)}
.chmedia::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(16,27,46,.34),transparent 58%)}
.chbody{padding:clamp(15px,1.6vw,22px);display:flex;flex-direction:column;flex:1}
.chfeat .code{font-family:var(--fm);font-size:9.5px;letter-spacing:.12em;color:var(--slate);margin-bottom:9px}
.chfeat b{display:block;font-family:var(--fd);font-variation-settings:'opsz' 28;font-weight:600;
  font-size:clamp(15px,1.2vw,17.5px);color:var(--navy);letter-spacing:-.014em;margin-bottom:7px}
.chfeat>.chbody>span{display:block;font-size:12.8px;line-height:1.55;color:var(--ink2);flex:1}

.chsoon{display:inline-block;align-self:flex-start;margin-top:12px;font-style:normal;
  font-family:var(--fc);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink3);border:1px solid var(--hair2);border-radius:999px;padding:5px 11px;white-space:nowrap}
@media (max-width:900px){.chfeats{grid-template-columns:1fr 1fr}
  .chfeat:nth-child(3){grid-column:span 2}
  .chfeat:nth-child(3) .chmedia{aspect-ratio:21/9}}
@media (max-width:600px){.chfeats{grid-template-columns:1fr}
  .chfeat:nth-child(3){grid-column:span 1}
  .chfeat:nth-child(3) .chmedia{aspect-ratio:16/9}
}

/* ── how we help ─────────────────────────────────────────────────────────── */
.helpband{background:var(--navy2);color:rgba(237,238,241,.72);border-radius:var(--r-card);overflow:hidden;
  position:relative;padding:clamp(30px,3.6vw,52px);margin-top:clamp(30px,3.6vw,48px)}
.helpband::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(56% 120% at 88% 0%,rgba(192,151,92,.14),transparent 62%)}
.helpband>*{position:relative;z-index:2}
.helpband h2{font-family:var(--fd);font-variation-settings:'opsz' 42;font-weight:590;color:#fff;
  font-size:clamp(1.4rem,2.3vw,1.95rem);letter-spacing:-.02em;line-height:1.14;margin-bottom:12px}
.helpband p{color:rgba(237,238,241,.72);font-size:clamp(14px,1.1vw,15.4px);line-height:1.7;max-width:58ch;margin-bottom:24px}
.helpband .row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.2vw,28px)}
.helpband .tel{font-family:var(--fc);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt)}
.helpband .tel a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(192,151,92,.5)}

/* ── dated verification footer ───────────────────────────────────────────── */
.verify{margin-top:clamp(30px,3.6vw,46px);padding-top:22px;border-top:1px solid var(--hair);
  font-family:var(--fm);font-size:11px;line-height:1.75;color:var(--ink3);max-width:82ch}
.verify b{color:var(--ink2);font-weight:500}
.verify .flag{display:inline-block;margin-bottom:10px;padding:5px 12px;border-radius:var(--r-chip);
  border:1px solid rgba(109,11,24,.28);color:var(--crimson);font-size:9px;letter-spacing:.2em;text-transform:uppercase}

@media (max-width:1000px){
  .pgrid{grid-template-columns:minmax(0,1fr);gap:0}
  .onpage{position:static;flex-direction:row;flex-wrap:wrap;gap:0 6px;margin-bottom:clamp(28px,4vw,40px);
    padding-bottom:18px;border-bottom:1px solid var(--hair)}
  .onpage .lab{width:100%;border-bottom:none;padding-bottom:6px;margin-bottom:2px}
  .onpage a{padding:7px 13px;border-left:none;border:1px solid var(--hair);border-radius:var(--r-chip);font-size:11.5px}
  .onpage a.on{border-color:var(--navy);background:var(--navy);color:var(--champagne)}
}
@media (max-width:720px){
  .audbar .wrap{justify-content:center}
  .audbar .hint{display:none}
  .audsw{width:100%;justify-content:center}
  .audsw button{flex:1;padding:9px 6px;font-size:9px;letter-spacing:.12em}
}


/* ───────── blog posts ─────────
   The article runs on the site chrome: pale ground, serif display, 66ch
   measure, the accordion and pill components reused as-is. */
.post{padding:calc(var(--util-h,36px) + clamp(96px,10vw,140px)) 0 clamp(48px,5vw,72px);background:var(--stone)}
.post .wrap{max-width:768px}
.postcrumb{position:static;margin-bottom:clamp(18px,2vw,26px);font-family:var(--fc);font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);display:flex;gap:10px;align-items:center}
.postcrumb a{color:var(--ink2)}
.postcrumb a:hover{color:var(--navy)}
.posthero{border-radius:var(--r-card);overflow:hidden;margin-bottom:clamp(22px,2.6vw,34px);
  box-shadow:0 34px 80px -48px rgba(19,28,37,.55)}
.posthero img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.post h1{font-family:var(--fd);font-variation-settings:'opsz' 44;font-weight:600;font-size:clamp(1.7rem,3.4vw,2.7rem);
  line-height:1.1;letter-spacing:-.022em;color:var(--ink);margin:10px 0 14px;text-wrap:balance}
.postdek{font-size:clamp(15px,1.25vw,17.5px);line-height:1.6;color:var(--ink2);
  padding-bottom:clamp(20px,2.4vw,30px);border-bottom:1px solid var(--hair);margin-bottom:clamp(24px,2.8vw,36px)}
.postbody{max-width:100%}
.postbody h2{font-family:var(--fd);font-variation-settings:'opsz' 36;font-weight:590;font-size:clamp(1.25rem,1.9vw,1.6rem);
  letter-spacing:-.016em;color:var(--navy);margin:clamp(26px,3vw,38px) 0 12px}
.postbody>p{font-size:clamp(15.5px,1.15vw,17px);line-height:1.75;color:var(--ink2);margin-bottom:18px}
.postbody b{color:var(--ink);font-weight:600}
.postcall{display:flex;flex-direction:column;gap:6px;margin:clamp(24px,2.8vw,34px) 0;
  padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px);border-left:3px solid var(--crimson);
  background:rgba(109,11,24,.04);border-radius:0 var(--r-img) var(--r-img) 0}
.postcall b{font-family:var(--fd);font-variation-settings:'opsz' 30;font-weight:600;font-size:15.5px;color:var(--crimson)}
.postcall span{font-size:13.6px;line-height:1.6;color:var(--ink2)}
.postrel{margin-top:clamp(20px,2.4vw,28px);font-size:13.5px;color:var(--ink3)}
.postrel a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.postcta{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap;
  margin-top:clamp(30px,3.4vw,44px);padding:clamp(24px,2.8vw,36px) clamp(22px,2.6vw,36px);
  border-radius:var(--r-card);background:var(--navy2);color:rgba(239,240,242,.72)}
.postcta b{display:block;font-family:var(--fd);font-variation-settings:'opsz' 34;font-weight:590;
  font-size:clamp(1.1rem,1.6vw,1.4rem);color:#fff;margin-bottom:5px}
.postcta span{font-size:13.5px;line-height:1.55}
.post .verify{margin-top:clamp(22px,2.6vw,32px)}
/* two-up variant of the charge cards for the 'From the desk' bands */
.chfeats--two{grid-template-columns:repeat(2,1fr)}
.chlink{cursor:pointer}
.chlink .chgo{display:inline-block;margin-top:12px;font-style:normal;font-family:var(--fc);font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--navy);transition:.35s var(--e)}
.chlink:hover .chgo{color:var(--crimson);transform:translateX(3px)}
@media (max-width:900px){.chfeats--two{grid-template-columns:1fr}}


/* ───────── homepage "also handling" strip ─────────
   The four featured practice cards keep the alternating full-width device;
   the remaining four dockets ride beneath as a compact 4-up so the homepage
   states the whole offering without doubling the section's height. */
.alsogrid{margin-top:clamp(20px,2.4vw,32px);padding-top:clamp(20px,2.2vw,30px);
  border-top:1px solid var(--hairL)}
.alsohead{font-family:var(--fc);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(239,240,242,.5);margin-bottom:clamp(14px,1.6vw,20px)}
.alsorow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,20px)}
.alsorow a{display:block;padding:clamp(16px,1.7vw,22px);border-radius:var(--r-img);
  border:1px solid var(--hairL);background:rgba(255,255,255,.035);color:inherit;text-decoration:none;
  transition:background .45s var(--e),border-color .45s var(--e),transform .45s var(--eo)}
.alsorow a:hover{background:rgba(192,151,92,.1);border-color:rgba(192,151,92,.42);transform:translateY(-3px)}
.alsorow b{display:block;font-family:var(--fd);font-variation-settings:'opsz' 30;font-weight:585;
  font-size:clamp(14px,1.1vw,16.5px);color:#fff;margin-bottom:7px;letter-spacing:-.012em}
.alsorow span{display:block;font-size:12.2px;line-height:1.55;color:rgba(239,240,242,.6)}
@media (max-width:900px){.alsorow{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.alsorow{grid-template-columns:1fr}}


/* ───────── contact page ─────────
   Short hero (no full-viewport takeover on a utility page), the map as a
   clickable plate beside a stack of fact blocks. The map is a static
   OpenStreetMap composite tinted to the brand — no third-party embed, so it
   survives both the live site and the artifact's strict CSP. */
.phero.phero--short{min-height:0}
.phero.phero--short .inner{max-width:720px}
.cmap{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,2.6vw,40px);
  align-items:start;margin-top:clamp(22px,2.6vw,34px)}
.cmapfig{position:relative;display:block;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--hair);box-shadow:0 34px 76px -46px rgba(19,28,37,.5);
  transition:transform .55s var(--eo),box-shadow .55s var(--e)}
.cmapfig img{display:block;width:100%;aspect-ratio:5/3;object-fit:cover}
.cmapfig:hover{transform:translateY(-4px);box-shadow:0 46px 92px -46px rgba(19,28,37,.6)}
.cmapgo{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;background:rgba(11,17,23,.82);color:var(--champagne);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:var(--fc);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid rgba(192,151,92,.4)}
.cmapside{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px)}
.cblock{padding:clamp(16px,1.8vw,22px);border:1px solid var(--hair);border-radius:var(--r-img);
  background:var(--paper)}
.cico{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;margin-bottom:11px;
  background:rgba(192,151,92,.1);border:1px solid rgba(192,151,92,.36);color:var(--champagne)}
.cico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.cblock b{display:block;font-family:var(--fd);font-variation-settings:'opsz' 30;font-weight:585;
  font-size:clamp(14px,1.1vw,16px);color:var(--navy);margin-bottom:6px;letter-spacing:-.012em}
.cblock address,.cblock p{font-style:normal;font-size:13.4px;line-height:1.6;color:var(--ink2);margin:0}
.cblock p a{color:var(--navy);font-weight:600;text-decoration:none}
.cnote{display:block;margin-top:8px;font-size:12px;line-height:1.55;color:var(--ink3)}
.clink{display:inline-block;margin-top:10px;font-family:var(--fc);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--navy);transition:.35s var(--e)}
.clink:hover{color:var(--crimson);transform:translateX(2px)}
#expect .notecard{background:rgba(255,255,255,.045);border-color:var(--hairL)}
#expect .notegrid{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.cmap{grid-template-columns:1fr}}
@media (max-width:900px){#expect .notegrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){#expect .notegrid{grid-template-columns:1fr}}
/* the Insights panel carries longer titles than the practice one */
.mpanel--wide{min-width:290px}
.mpanel--wide a{white-space:normal;line-height:1.35}
.drawer-blog{border-bottom:none!important;padding-bottom:6px!important}


/* ───────── practice-areas hub ─────────
   An index that has to work for two readers: a worried visitor scanning for
   their charge, and the team using it as a map of what exists. The filter
   serves both — it answers "which docket owns this?" in one keystroke. */
.dkbar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(16px,2.4vw,36px);margin-bottom:clamp(22px,2.6vw,34px)}
.dksearch{position:relative;flex:1 1 320px;max-width:420px}
.dksearch input{width:100%;padding:14px 18px;border-radius:999px;
  border:1px solid var(--hair2);background:var(--paper);color:var(--ink);
  font-family:var(--fs);font-size:14.5px;transition:border-color .35s var(--e),box-shadow .35s var(--e)}
.dksearch input::placeholder{color:var(--ink3)}
.dksearch input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(24,40,66,.1)}
.dkcount{display:block;margin-top:9px;padding-left:4px;font-family:var(--fm);font-size:11px;
  letter-spacing:.06em;color:var(--ink3);font-variant-numeric:tabular-nums}
.dkgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px)}
.dkcard{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:var(--r-card);
  overflow:hidden;background:var(--paper);
  transition:transform .5s var(--eo),box-shadow .5s var(--e),border-color .4s var(--e)}
.dkcard:hover{transform:translateY(-4px);border-color:var(--hairL2);
  box-shadow:0 34px 74px -48px rgba(19,28,37,.5)}
.dkcard[hidden]{display:none}
.dkmedia{position:relative;display:block;aspect-ratio:21/9;overflow:hidden;background:var(--navy)}
.dkmedia img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform 1.2s var(--eo)}
.dkcard:hover .dkmedia img{transform:scale(1.05)}
.dknum{position:absolute;left:14px;top:12px;font-family:var(--fd);font-variation-settings:'opsz' 40;
  font-weight:640;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1;color:rgba(252,250,245,.92);
  text-shadow:0 2px 18px rgba(0,0,0,.6)}
.dkbody{display:flex;flex-direction:column;flex:1;padding:clamp(18px,2vw,26px)}
.dkhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.dkhead h3{font-family:var(--fd);font-variation-settings:'opsz' 34;font-weight:590;
  font-size:clamp(1.05rem,1.5vw,1.35rem);letter-spacing:-.016em;line-height:1.2}
.dkhead h3 a{color:var(--navy)}
.dkhead h3 a:hover{color:var(--crimson)}
.dkstatus{flex:none;font-family:var(--fc);font-size:8px;letter-spacing:.18em;text-transform:uppercase;
  color:#2E6B4F;padding:5px 10px;border-radius:999px;border:1px solid rgba(46,107,79,.34);
  background:rgba(46,107,79,.08)}
.dkblurb{font-size:13.2px;line-height:1.6;color:var(--ink2);margin-bottom:9px}
.dkkw{font-family:var(--fm);font-size:10px;letter-spacing:.04em;color:var(--ink3);margin-bottom:14px}
.dkfold{border-top:1px solid var(--hair);padding-top:12px}
.dkfold summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:10px;font-family:var(--fc);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate);padding-bottom:10px}
.dkfold summary::-webkit-details-marker{display:none}
.dkfold summary .chip{position:static;transform:none;width:22px;height:22px;border-radius:7px}
.dkfold summary .chip::before{width:8px}.dkfold summary .chip::after{height:8px}
.dkfold[open] summary .chip{transform:rotate(90deg)}
.dkareas{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px;padding:0;list-style:none}
.dkareas li{font-size:11.5px;line-height:1.4;color:var(--ink2);padding:5px 11px;border-radius:999px;
  border:1px solid var(--hairL2);background:rgba(24,40,66,.03);transition:.3s var(--e)}
.dkareas li.hit{background:rgba(200,40,58,.1);border-color:rgba(200,40,58,.42);color:var(--crimson);font-weight:600}
.dkposts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--hair)}
.dkposts span{font-family:var(--fc);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.dkposts a{font-size:12px;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.dkposts a:hover{color:var(--crimson)}
.dkgo{margin-top:auto;padding-top:16px;font-family:var(--fc);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--navy);transition:.35s var(--e)}
.dkcard:hover .dkgo{color:var(--crimson)}
.dknone{margin-top:clamp(20px,2.4vw,30px);padding:clamp(18px,2vw,24px);border-radius:var(--r-img);
  border:1px dashed var(--hair2);font-size:13.5px;line-height:1.65;color:var(--ink2)}
@media (max-width:900px){.dkgrid{grid-template-columns:1fr}}

.mpanel-all{border-bottom:1px solid rgba(192,151,92,.24);margin-bottom:5px;padding-bottom:12px!important;
  color:var(--champagne)!important;font-weight:600}

/* ── Insights archive ──────────────────────────────────────────────────
   Reuses the docket card system (.dkcard family) wholesale; only the
   filter bar, the category chips and the featured lead card are new. */
.arbar{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(16px,3vw,40px);
  flex-wrap:wrap;margin-bottom:clamp(22px,2.6vw,34px)}
.archips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(20px,2.4vw,30px)}
.archip{font-family:var(--fc);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate);background:transparent;padding:9px 15px;border-radius:var(--r-chip);
  border:1px solid var(--hair2);cursor:pointer;transition:.35s var(--e)}
.archip:hover{border-color:var(--navy);color:var(--navy)}
.archip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--gold-lt)}
.arcount{font-family:var(--fm);font-size:10px;letter-spacing:.04em;color:var(--ink3);white-space:nowrap}

/* Featured lead — the newest post, image beside copy, full grid width */
.arfeat{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--hair);
  border-radius:var(--r-card);overflow:hidden;background:var(--paper);
  margin-bottom:clamp(16px,2vw,28px);
  transition:transform .5s var(--eo),box-shadow .5s var(--e),border-color .4s var(--e)}
.arfeat:hover{transform:translateY(-4px);border-color:var(--hairL2);box-shadow:var(--shadow)}
.arfeat .dkmedia{aspect-ratio:auto;height:100%;min-height:clamp(230px,26vw,340px)}
.arfeatbody{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(22px,2.8vw,40px)}
.arfeatbody h2{font-size:var(--t-h3);line-height:1.2;margin:6px 0 10px}
.arfeatbody h2 a{color:var(--navy)}
.arfeat:hover .arfeatbody h2 a{color:var(--crimson)}
.arfeatbody .dkblurb{font-size:14px}
.arlead{font-family:var(--fc);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--champagne)}
@media (max-width:900px){
  .arfeat{grid-template-columns:1fr}
  .arfeat .dkmedia{aspect-ratio:21/9;min-height:0}
}

/* Category tag on an article card. Deliberately NOT .dkstatus — that chip is
   green because green means "page live" in the dockets hub; reusing it for a
   category would overload the one colour that carries build status. Slate on
   a hairline reads as a label, and it links through to the docket. */
.arcat{flex:none;font-family:var(--fc);font-size:8px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate);padding:5px 10px;border-radius:var(--r-chip);border:1px solid var(--hair2);
  background:transparent;transition:.35s var(--e)}
.arcat:hover{color:var(--navy);border-color:var(--navy)}

/* Common-questions rail on the guides hub. The archive itself has no head
   term worth chasing, so this block is the page's real search contribution:
   query-shaped anchor text pointing at each article. Two columns of quiet
   navy links, gold rule above, so it reads as a way in rather than as a CTA. */
.arqs{border-top:1px solid var(--hairL2);padding-top:clamp(18px,2vw,26px);
  margin-bottom:clamp(26px,3vw,40px)}
.arqs ul{display:grid;grid-template-columns:repeat(2,1fr);gap:2px clamp(20px,3vw,48px);
  list-style:none;margin-top:6px}
.arqs li{border-bottom:1px solid var(--hair)}
.arqs a{display:block;padding:11px 0;font-size:14.5px;line-height:1.45;color:var(--navy);
  transition:.3s var(--e)}
.arqs a::after{content:'\2192';margin-left:9px;color:var(--champagne);opacity:0;
  transition:.3s var(--e)}
.arqs a:hover{color:var(--crimson)}
.arqs a:hover::after{opacity:1;margin-left:13px}
@media (max-width:760px){.arqs ul{grid-template-columns:1fr}}

/* ── Interior pages that open on a light ground ───────────────────────
   The nav's resting colour is near-white because it is designed to sit over
   the dark hero photograph. Article pages have no hero — .post opens on
   --stone — so at the top of every blog post the menu rendered white on
   #EDEEF1: about 1:1 contrast, i.e. entirely invisible, while the gold logo
   and CTA stayed faintly legible, which is why it read as "menu missing"
   rather than "menu broken".

   Rather than invent a light-ground nav palette, these pages are marked
   body.tl and given the same navy-glass treatment the scrolled state
   already uses — the measured, approved combination (mark 4.41:1, links
   5.94:1, hover 9.59:1 per DIGITAL-BRAND.md).

   Position is deliberately NOT copied from .stuck: the bar stays in its
   absolute resting place until the scroll handler promotes it, so entering
   the sticky state is visually a no-op instead of a colour flash. */
body.tl header{background:rgba(24,40,66,.92);
  backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2);
  border-bottom:1px solid rgba(192,151,92,.26);
  box-shadow:0 16px 40px -34px rgba(19,28,37,.6)}
body.tl header .lk .dk{display:none}
body.tl header .lk .lt{display:block}
body.tl header .nav menu a{color:var(--gold-lt)}
body.tl header .nav menu a::after{background:var(--champagne)}
body.tl header .nav menu a:hover,body.tl header .nav menu a.on{color:#F2E6D2}
body.tl header .pill--line{color:var(--red-on-navy)}
body.tl header .pill--line i{color:var(--champagne)}
body.tl header .pill--line:hover{color:var(--champagne)}
body.tl header .burger{border-color:rgba(192,151,92,.45)}
body.tl header .burger span{background:var(--champagne)}

/* ── "Where to go next" — end-of-article link module ──────────────────
   Replaces .postrel, which offered a single sibling link. The guides exist
   to support the practice pages, so the primary slot is the practice page
   itself with a descriptive anchor; secondary is three related guides and
   the hub. Sits above .postcta so the sequence is explore → convert. */
.postnext{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,2.6vw,38px);
  margin-top:clamp(30px,3.4vw,44px);padding-top:clamp(24px,2.8vw,34px);
  border-top:1px solid var(--hairL2)}
.postnext .eyebrow{margin-bottom:12px}

.pncard{display:block;padding:clamp(18px,2vw,24px);border:1px solid var(--hair);
  border-radius:var(--r-card);background:var(--paper);
  transition:transform .5s var(--eo),border-color .4s var(--e),box-shadow .5s var(--e)}
.pncard:hover{transform:translateY(-3px);border-color:var(--hairL2);
  box-shadow:0 26px 56px -42px rgba(19,28,37,.5)}
.pncard b{display:block;font-family:var(--fd);font-variation-settings:'opsz' 34;font-weight:590;
  font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.25;color:var(--navy);margin-bottom:7px}
.pncard span{display:block;font-size:13.2px;line-height:1.6;color:var(--ink2)}
.pncard .pngo{margin-top:13px;font-family:var(--fc);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--navy);transition:.35s var(--e)}
.pncard:hover .pngo{color:var(--crimson)}
.pnalt{display:inline-block;margin-top:13px;font-size:13px;color:var(--navy);
  text-decoration:underline;text-underline-offset:3px}
.pnalt:hover{color:var(--crimson)}

.pnlist{list-style:none}
.pnlist li{border-bottom:1px solid var(--hair)}
.pnlist a{display:flex;gap:14px;justify-content:space-between;align-items:baseline;
  padding:11px 0;font-size:14px;line-height:1.45;color:var(--navy);transition:.3s var(--e)}
.pnlist a:hover{color:var(--crimson)}
.pnlist em{flex:none;font-style:normal;font-family:var(--fm);font-size:10px;color:var(--ink3)}
.pnall{display:inline-block;margin-top:14px;font-family:var(--fc);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--navy);transition:.35s var(--e)}
.pnall:hover{color:var(--crimson)}
@media (max-width:820px){.postnext{grid-template-columns:1fr;gap:26px}}

/* in-prose contextual link into the practice page — underlined in gold so it
   reads as a route out, not as emphasis */
.postbody a.xref{color:var(--navy);text-decoration:underline;text-decoration-color:var(--champagne);
  text-underline-offset:3px;text-decoration-thickness:1.5px;transition:.3s var(--e)}
.postbody a.xref:hover{color:var(--crimson);text-decoration-color:var(--crimson)}

/* ── In-article conversion points ─────────────────────────────────────
   Modelled on the rhythm that works on the LetsHibachi service pages:
   an offer visible before the reader commits to scrolling, one inline
   prompt partway down while intent is highest, then the end module.
   Speed claims here describe SERVICE ("answered 24/7", "same day"), never
   outcome — B&P 6157.2 bars the latter. */

/* the strip under the dek — the "there is a way to act on this" line */
.ledecta{display:flex;align-items:center;gap:clamp(12px,2vw,22px);flex-wrap:wrap;
  margin-top:clamp(16px,1.8vw,22px);padding-top:clamp(14px,1.6vw,20px);
  border-top:1px solid var(--hair)}
.ledecta .pill{flex:none}
.ledecta a.tel{font-family:var(--fm);font-size:13px;color:var(--navy);
  text-decoration:underline;text-underline-offset:3px}
.ledecta a.tel:hover{color:var(--crimson)}
.ledecta span.avail{font-family:var(--fc);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink3)}

/* the mid-article prompt */
.midcta{display:grid;grid-template-columns:1fr auto;gap:clamp(16px,2.4vw,32px);align-items:center;
  margin:clamp(28px,3.2vw,42px) 0;padding:clamp(20px,2.4vw,30px);
  border-radius:var(--r-card);background:var(--navy2);color:rgba(239,240,242,.74);
  position:relative;overflow:hidden}
.midcta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--foil)}
.midcta b{display:block;font-family:var(--fd);font-variation-settings:'opsz' 34;font-weight:590;
  font-size:clamp(1.05rem,1.5vw,1.32rem);line-height:1.28;color:#fff;margin-bottom:6px}
.midcta span.sub{display:block;font-size:13.5px;line-height:1.6}
.midcta .act{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.midcta a.tel{font-family:var(--fm);font-size:12.5px;color:var(--gold-lt);
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.midcta a.tel:hover{color:#F2E6D2}
@media (max-width:720px){
  .midcta{grid-template-columns:1fr}
  .midcta .act{align-items:stretch}
}

/* ── Article + sticky rail ────────────────────────────────────────────
   Why the margin was empty, and why the fix isn't "make the text wider":
   reading measure is a hard constraint. Long-form legal copy set much past
   ~80 characters per line is measurably harder to read, and these pages are
   read by someone frightened at 2am. So the body stays at its measure and
   the reclaimed margin carries the things a reader actually wants next —
   the practice area, related questions, and a CTA that stays in view. */
.post .wrap{max-width:1180px}
.postgrid{display:grid;grid-template-columns:minmax(0,768px) minmax(0,320px);
  gap:clamp(28px,4vw,64px);justify-content:center;align-items:start}
.postmain{min-width:0}

.postside{position:sticky;top:calc(var(--hdr-h,84px) + 20px);display:flex;
  flex-direction:column;gap:clamp(18px,2vw,26px)}
.sbblock .eyebrow{margin-bottom:11px}

/* practice-area card — image over label */
.sbcard{display:block;border:1px solid var(--hair);border-radius:var(--r-card);
  overflow:hidden;background:var(--paper);
  transition:transform .5s var(--eo),border-color .4s var(--e),box-shadow .5s var(--e)}
.sbcard:hover{transform:translateY(-3px);border-color:var(--hairL2);
  box-shadow:0 26px 56px -42px rgba(19,28,37,.5)}
.sbcard .sbfig{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--navy)}
.sbcard .sbfig img{width:100%;height:100%;object-fit:cover;opacity:.92;
  transition:transform 1.2s var(--eo)}
.sbcard:hover .sbfig img{transform:scale(1.05)}
.sbcard .sbbody{padding:15px 16px 17px}
.sbcard b{display:block;font-family:var(--fd);font-variation-settings:'opsz' 32;
  font-weight:590;font-size:1.05rem;line-height:1.25;color:var(--navy);margin-bottom:6px}
.sbcard span{display:block;font-size:12.6px;line-height:1.55;color:var(--ink2)}
.sbcard .sbgo{margin-top:11px;font-family:var(--fc);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--navy);transition:.35s var(--e)}
.sbcard:hover .sbgo{color:var(--crimson)}

/* related questions — thumbnail beside the question people actually type */
.sbq{list-style:none;display:flex;flex-direction:column}
.sbq li{border-bottom:1px solid var(--hair)}
.sbq a{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;
  padding:11px 0;color:var(--navy);transition:.3s var(--e)}
.sbq a:hover{color:var(--crimson)}
.sbq img{width:56px;height:44px;object-fit:cover;border-radius:9px;background:var(--stone2)}
.sbq em{font-style:normal;font-size:13px;line-height:1.4}
.sball{margin-top:13px;font-family:var(--fc);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--navy);transition:.35s var(--e)}
.sball:hover{color:var(--crimson)}

/* the rail's own CTA */
.sbcta{padding:17px 17px 19px;border-radius:var(--r-card);background:var(--navy2);
  color:rgba(239,240,242,.72);position:relative;overflow:hidden}
.sbcta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--foil)}
.sbcta b{display:block;font-family:var(--fd);font-variation-settings:'opsz' 32;font-weight:590;
  font-size:1.02rem;line-height:1.25;color:#fff;margin-bottom:5px}
.sbcta span.sub{display:block;font-size:12.4px;line-height:1.55;margin-bottom:13px}
.sbcta .pill{width:100%;justify-content:center}
.sbcta a.tel{display:block;margin-top:10px;font-family:var(--fm);font-size:12px;
  color:var(--gold-lt);text-decoration:underline;text-underline-offset:3px;text-align:center}
.sbcta a.tel:hover{color:#F2E6D2}

/* below the breakpoint the rail becomes the end-of-article module it replaced */
@media (max-width:1080px){
  .post .wrap{max-width:768px}
  .postgrid{grid-template-columns:1fr;gap:clamp(30px,4vw,44px)}
  .postside{position:static;display:grid;grid-template-columns:repeat(2,1fr);
    gap:clamp(18px,2.4vw,28px);align-items:start;
    padding-top:clamp(24px,3vw,34px);border-top:1px solid var(--hairL2)}
}
@media (max-width:640px){.postside{grid-template-columns:1fr}}

/* three-up variant of the guide cards, for the homepage strip */
.dkgrid--three{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.dkgrid--three{grid-template-columns:1fr}}

/* ───────── team ───────── */
/* Used by attorneys.html and by the homepage "Our Team" rail.
   The staff portraits are graded to dissolve into brand navy at their edges
   (prep_team.py), so the card underneath them has to BE navy — on a light card
   the feather reads as a grey halo instead of a fade. .port is reused verbatim
   for the figure, so these frames reveal and seal exactly like Aaron's plate. */
.tmgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px)}
@media (max-width:980px){.tmgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.tmgrid{grid-template-columns:1fr}}

/* text-decoration:none because the homepage rail makes the whole card an <a>
   and this stylesheet has no base anchor reset — every component clears it
   itself. Without it the browser default underlines the bio copy. */
.tmcard{display:flex;flex-direction:column;background:var(--navy);color:rgba(239,240,242,.72);
  border:1px solid rgba(192,151,92,.22);border-radius:var(--r-card);overflow:hidden;
  text-decoration:none;
  box-shadow:0 30px 64px -44px rgba(8,13,18,.7);
  transition:transform .6s var(--eo),border-color .6s var(--e),box-shadow .6s var(--e)}
.tmcard:hover{transform:translateY(-6px);border-color:rgba(192,151,92,.5);
  box-shadow:0 46px 86px -46px rgba(8,13,18,.85)}
/* the card already clips to --r-card; a second radius on the figure leaves a
   navy crescent in each top corner */
.tmcard .port{border-radius:0;flex:none;clip-path:inset(6% 4% 6% 4%)}
.in .tmcard .port,html.static .tmcard .port{clip-path:inset(0)}
.tmbody{padding:clamp(20px,2.1vw,28px);display:flex;flex-direction:column;gap:11px;flex:1}
.tmbody p{font-size:13.6px;line-height:1.66;color:rgba(239,240,242,.7)}
.tmname{font-family:var(--fd);font-variation-settings:'opsz' 32;font-weight:590;font-size:1.32rem;
  line-height:1.14;letter-spacing:-.016em;color:#fff}
.tmnote{margin-top:auto;padding-top:13px;border-top:1px solid rgba(192,151,92,.2);
  font-family:var(--fc);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(214,178,130,.86)}

/* draft flag — this text is written by us, not by the firm, and must be
   impossible to mistake for signed-off copy while it is still on the page */
.tmflag{display:flex;gap:15px;align-items:flex-start;margin-bottom:clamp(28px,3vw,44px);
  padding:17px 21px;border:1px dashed rgba(192,151,92,.55);border-radius:var(--r-img);
  background:rgba(192,151,92,.07)}
.tmflag i{font-style:normal;color:var(--champagne);flex:none;font-size:15px;line-height:1.5}
.tmflag p{font-size:13.4px;line-height:1.62;color:var(--ink2)}
.pband.dark .tmflag p{color:rgba(239,240,242,.72)}
.tmflag b{color:var(--ink);font-weight:600}
.pband.dark .tmflag b{color:#fff}

/* the rail on the homepage borrows the matters-deck mechanics wholesale */
.deck .tmcard{flex:0 0 calc((100% - 2*var(--dg))/3);min-width:0}
@media (max-width:1040px){.deck .tmcard{flex-basis:calc((100% - var(--dg))/2)}}
@media (max-width:640px){.deck .tmcard{flex-basis:100%}}

/* ───────── team profiles ───────── */
/* attorneys.html stacks four .atty blocks. Alternating which side the portrait
   sits on is what stops four identical sections reading as a template dump —
   .atty--rev flips the grid AND has to flip the backdrop with it, or the
   artwork ends up behind the photograph instead of beside it. */
.atty--rev .wrap{grid-template-columns:1.08fr .92fr}
.atty--rev .port{order:2}
.atty--rev .attybg img{object-position:6% center}
.atty--rev .attybg::after{background:linear-gradient(270deg,var(--navy) 0%,var(--navy) 26%,rgba(24,40,66,.9) 48%,rgba(24,40,66,.5) 74%,rgba(24,40,66,.18) 100%)}
@media (max-width:1080px){
  .atty--rev .wrap{grid-template-columns:1fr}
  .atty--rev .port{order:0}                 /* face first on a phone, always */
  .atty--rev .attybg img{object-position:12% center}
}
/* consecutive navy blocks need a seam or they read as one endless section */
.atty+.atty{border-top:1px solid rgba(192,151,92,.16)}
/* the staff blocks carry a draft chip where Aaron carries none */
.attydraft{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:8px 16px;
  border:1px dashed rgba(192,151,92,.55);border-radius:var(--r-chip);background:rgba(192,151,92,.08);
  font-family:var(--fc);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(214,178,130,.92)}
.attydraft::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--champagne)}

/* Bianca's block keeps the base backdrop placement despite being reversed, so
   the courthouse sits behind the PORTRAIT rather than behind the text. The
   plate is bright marble; over type it would be unreadable, and .attybg is a
   text-side device everywhere else. */