/* ==========================================================================
   1983CIVILRIGHTS.COM: VERSION 3 components, VERSION 5 palette "navy, brass and warm white" (2026-09-17)
   Mikhail: "I want the best redesign." Loaded LAST. It overrides tokens and
   components from cr.css, cr.extra.css and cr.design.css; retone.py never
   touches it. Pairs used here were checked with the same WCAG formula as
   tools/retone.py (see SOUL.md section 9 for the table).

   Mobbin references: Slash (near-black ground, gold, a light elegant serif at
   very large size); Voiceflow (inset charcoal closing card with a serif
   headline); MasterClass (faces behind the headline); Readymag (bento tiles);
   Codecademy and Turo (on-this-page navigation for long articles); Aboard
   (floating pill navigation).
   ========================================================================== */

:root{
  --night:#0F1F3D;            /* the ground of every hero and dark band       */
  --night-2:#16294D;
  --ivory:#FAF7F1;            /* cool paper. the warm ivory read as yellow    */
  --ivory-2:#F1ECE2;
  --line:#E5DFD3;
  --line-strong:#7F8290;      /* 3.5 on white, 3.2 on --ivory                 */
  --radius:20px; --radius-lg:30px; --radius-sm:14px;
  --maxw:1200px;
  --shadow-sm:0 1px 2px rgba(15,31,61,.05),0 8px 24px rgba(15,31,61,.06);
  --shadow:0 2px 4px rgba(15,31,61,.05),0 24px 60px rgba(15,31,61,.12);
  --shadow-lg:0 40px 100px rgba(15,31,61,.28);
  --ease:cubic-bezier(.2,.7,.2,1);
}
body{background:var(--ivory);font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased}
::selection{background:var(--gold);color:var(--night)}

/* ---- type ---------------------------------------------------------------- */
h1,h2,h3,h4{letter-spacing:-.022em}
h1{font-weight:500;font-size:clamp(2.5rem,5.6vw,4.4rem);line-height:1.02}
h2{font-weight:500;font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.06}
h3{font-weight:600}
.sec-head h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.05}
.sec-head{max-width:60ch;margin-bottom:var(--s-5)}
.sec-head p{font-size:1.12rem;line-height:1.6;color:var(--ink-soft)}
.eyebrow{font-size:.72rem;letter-spacing:.18em;font-weight:700}
.eyebrow::before{width:34px}
section{padding:clamp(64px,9vw,120px) 0}
.tight{padding:clamp(36px,5vw,64px) 0}
.alt{background:var(--ivory-2)}
.dark,.darker{background:var(--night)}
.dark h2,.dark h3{color:#fff}

/* ---- announcement + floating pill nav ------------------------------------ */
.annc{background:var(--night);border-bottom:0;font-size:.82rem;padding:8px 20px;color:#CDD3E0}
.annc b{color:var(--gold)}
header.nav{background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:10px 16px 0;pointer-events:none;margin-bottom:-82px}
.nav-in{pointer-events:auto;max-width:1240px;min-height:64px;padding:8px 10px 8px 20px;border-radius:999px;
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
  border:1px solid rgba(15,31,61,.08);box-shadow:0 10px 40px rgba(15,31,61,.14);transition:box-shadow .3s var(--ease),background .3s}
header.nav.scrolled .nav-in{background:rgba(255,255,255,.96);box-shadow:0 14px 50px rgba(15,31,61,.2)}
.nav-links a{font-weight:600;font-size:.88rem;color:var(--ink);padding:9px 12px;border-radius:999px;transition:background .2s,color .2s}
.nav-links a:hover{background:var(--ivory-2);text-decoration:none}
.nav-links a.active{background:var(--night);color:#fff}
.nav-links a.active::after{display:none}
.nav-links{gap:2px}
.nav-cta .btn{border-radius:999px}
.lang-btn{border-radius:999px}
main{padding-top:0}
main>.phero,main>.posthero,main>.hero{padding-top:96px}
@media(max-width:1180px){
  .nav-links.open{border-radius:24px;box-shadow:var(--shadow);border:1px solid var(--line);margin-top:10px;background:#fff}
  .nav-links.open a{border-radius:12px}
}

/* ---- buttons -------------------------------------------------------------- */
.btn{border-radius:999px;font-weight:650;letter-spacing:-.005em;padding-left:1.5em;padding-right:1.5em;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .2s}
.btn-gold{background:linear-gradient(180deg,#D9B968,var(--gold));box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 30px rgba(201,162,74,.28)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 16px 40px rgba(201,162,74,.4)}
.dark .btn-gold,.dark .btn-gold:hover,.darker .btn-gold,.posthero .btn-gold,.megacta .btn-gold{color:var(--night)}
.btn-indigo{background:var(--night)}
.btn-indigo:hover{background:var(--indigo)}
.btn-ghost{border-color:rgba(133,136,159,.7)}
.dark .btn-ghost,.hero .btn-ghost,.posthero .btn-ghost,.megacta .btn-ghost{border-color:rgba(255,255,255,.34);color:#fff}
.dark .btn-ghost:hover,.hero .btn-ghost:hover,.megacta .btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.btn .arr{transition:transform .25s var(--ease)}.btn:hover .arr{transform:translateX(4px)}

/* ---- cards: no brown borders, soft depth ---------------------------------- */
.card,.postcard,.feature,.statecard,details,.sibling,.intake,.reviewed,.lawchange,.dt-step{
  border:1px solid rgba(15,31,61,.07);box-shadow:var(--shadow-sm);border-radius:var(--radius)}
.card:hover,a.card:hover,.postcard:hover,.statecard:hover,.sibling:hover{border-color:rgba(15,31,61,.12);box-shadow:var(--shadow);transform:translateY(-4px)}
.card{padding:28px}
.dark .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1);box-shadow:none}
.dark .card p{color:#CDD3E0}
.framed{border:0;border-radius:var(--radius);box-shadow:var(--shadow-sm);background:var(--night-2)}
.more{font-weight:700;color:var(--gold-2)}
details{overflow:hidden}
details summary{padding:20px 24px;font-size:1.04rem}
details summary:hover{background:var(--ivory)}
.track-badge{border-color:rgba(15,31,61,.14);font-size:.7rem;letter-spacing:.08em}
.tablewrap{border-radius:var(--radius);border:1px solid rgba(15,31,61,.08);box-shadow:var(--shadow-sm);background:#fff}
table thead th{background:var(--night);color:#fff;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.deadline{background:#fff;border:1px solid rgba(15,31,61,.08);border-left:5px solid var(--gold-2);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);padding:22px 24px}
.callout{background:#fff;border:1px solid rgba(15,31,61,.08);border-left:5px solid var(--steel-2);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);padding:22px 24px}
.callout.ok{background:#fff;border-left-color:var(--ok)}
.prose{font-size:1.1rem;line-height:1.75}
.prose>p:first-child{font-size:1.24rem;line-height:1.6;color:var(--ink)}
.prose h2{font-size:clamp(1.7rem,3vw,2.35rem);margin-top:2.2em}
.prose h3{font-size:1.3rem}
.howlist li{border:1px solid rgba(15,31,61,.07);box-shadow:var(--shadow-sm);border-radius:var(--radius-sm);padding:20px 22px 20px 74px}
.howlist li::before{font-size:1.7rem;top:16px;left:22px;font-weight:500}
.moneyrow{grid-template-columns:260px 1fr;padding:30px 0}
.moneyrow .amt{font-weight:500;font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:-.03em}
.pull{font-weight:500;font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.25;border-left:0;padding:0;margin:2.6rem 0;position:relative}
.pull::before{content:"";display:block;width:54px;height:3px;background:var(--gold-2);margin-bottom:22px;border-radius:2px}

/* ---- heroes: night ground, very large light serif -------------------------- */
.hero.hero-photo{min-height:min(100vh,920px);background:var(--night)}
.hero-photo .hero-bg{background:var(--night)}
.hero-photo .hero-bg::after{background:
  radial-gradient(1200px 700px at 78% 30%,rgba(15,31,61,0) 0%,rgba(15,31,61,.55) 60%,rgba(15,31,61,.92) 100%),
  linear-gradient(90deg,rgba(15,31,61,.96) 0%,rgba(15,31,61,.86) 34%,rgba(15,31,61,.4) 66%,rgba(15,31,61,.25) 100%),
  linear-gradient(180deg,rgba(15,31,61,.6) 0%,rgba(15,31,61,0) 30%,rgba(15,31,61,.8) 100%)}
.hero-photo>.wrap{padding-top:140px;padding-bottom:72px;display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
@media(max-width:1020px){.hero-photo>.wrap{grid-template-columns:1fr;padding-top:120px}}
.hero-photo .hero-copy{max-width:none}
.hero-photo .hero-copy::before{display:none}
.hero-photo h1{font-weight:400;font-size:clamp(3rem,7.2vw,6.2rem);line-height:.98;letter-spacing:-.035em;max-width:11ch;text-shadow:none}
.hero-photo h1 em{font-style:italic;font-weight:400;color:var(--gold);white-space:normal}
.hero-photo .lede{font-size:1.16rem;line-height:1.65;color:#CDD3E0;max-width:50ch;margin-top:26px}
.hero-cred{background:rgba(15,31,61,.72);border-top:1px solid rgba(255,255,255,.1)}
.hero-cred li{border-left-color:rgba(255,255,255,.1)}
.hero-cred li b{font-weight:500;font-size:1.12rem}

/* the intake card in the hero */
.ask{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:28px;padding:28px;
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);box-shadow:var(--shadow-lg);color:#E6E7EF}
.ask h2{color:#fff;font-size:1.6rem;line-height:1.15;margin:0 0 6px;font-weight:500}
.ask p{font-size:.92rem;color:#B7BFD0;margin:0 0 18px}
.ask label{display:block;font:700 .68rem/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin:16px 0 8px}
.ask select,.ask input{width:100%;min-height:52px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(15,31,61,.55);
  color:#fff;font:500 1rem var(--font-ui);padding:0 16px;color-scheme:dark}
.ask select:focus-visible,.ask input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.ask .btn{width:100%;margin-top:20px;min-height:54px;font-size:1.02rem}
.ask small{display:block;margin-top:12px;font-size:.78rem;color:#98A2B8;line-height:1.5}

.posthero,.phero{background:var(--night);color:#fff;border-bottom:0;position:relative;overflow:hidden;isolation:isolate}
.phero{padding:150px 0 72px}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(900px 500px at 85% -10%,rgba(201,162,74,.16),transparent 60%),
  radial-gradient(700px 500px at 0% 110%,rgba(143,176,212,.12),transparent 60%)}
.phero h1{color:#fff;max-width:18ch}
.phero .lede{color:#CDD3E0;font-size:1.18rem;line-height:1.65;max-width:62ch}
.phero .eyebrow{color:var(--gold)}.phero .eyebrow::before{background:var(--gold)}
.phero .asof{color:#B3BBCC}
.phero .tracks-label,.posthero .tracks-label{color:#B3BBCC}
.phero .track-badge,.posthero .track-badge{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#F1E6CF}
.crumb,.crumb a{color:var(--muted)}
.phero .crumb,.phero .crumb a,.posthero .crumb,.posthero .crumb a{color:#B3BBCC}
.phero .crumb a:hover,.posthero .crumb a:hover{color:#fff}
.phero .crumb,.posthero .crumb{margin-bottom:22px;padding:0}
.posthero .wrap{padding-top:150px;padding-bottom:80px}
.posthero h1{font-weight:400;font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:1.02;max-width:17ch}
.posthero::after{background:
  linear-gradient(90deg,rgba(15,31,61,.96) 0%,rgba(15,31,61,.84) 46%,rgba(15,31,61,.5) 100%),
  linear-gradient(180deg,rgba(15,31,61,.5),rgba(15,31,61,.85))}
.posthero .ph-cat{background:transparent;border:1px solid var(--gold);color:var(--gold)}

/* ---- on this page: sticky chip rail built by cr.v3.js ---------------------- */
.onpage{position:sticky;top:84px;z-index:60;background:rgba(246,246,250,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.onpage .wrap{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;padding-top:10px;padding-bottom:10px}
.onpage .wrap::-webkit-scrollbar{display:none}
.onpage .op-label{flex:0 0 auto;font:700 .66rem/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:8px}
.onpage a{flex:0 0 auto;font:600 .84rem/1 var(--font-ui);color:var(--ink-soft);padding:10px 14px;border-radius:999px;text-decoration:none;white-space:nowrap;min-height:40px;display:inline-flex;align-items:center}
.onpage a:hover{background:var(--ivory-2);color:var(--ink);text-decoration:none}
.onpage a.on{background:var(--night);color:#fff}
.progress{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold-2),var(--gold));z-index:300;transition:width .1s linear}
[id]{scroll-margin-top:150px}

/* ---- bento: the abuse gallery --------------------------------------------- */
.tilegrid{gap:16px}
.tile{border:0;border-radius:24px;box-shadow:var(--shadow-sm);background:var(--night-2)}
.tile::after{background:linear-gradient(180deg,rgba(15,31,61,0) 0%,rgba(15,31,61,.2) 40%,rgba(15,31,61,.95) 100%)}
.tile h3{font-weight:500;font-size:1.34rem}
.tile .t-chip{background:rgba(15,31,61,.55);color:var(--gold);border:1px solid rgba(201,162,74,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tile p{max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s,margin .4s}
.tile:hover p,.tile:focus-visible p{max-height:8em;opacity:1;margin-top:6px}
@media(hover:none){.tile p{max-height:none;opacity:1}}
.tile.is-hidden{display:none}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:250px;gap:16px}
.bento .tile{aspect-ratio:auto;height:100%}
.bento .tile:nth-child(1){grid-column:span 2;grid-row:span 2}
.bento .tile:nth-child(1) h3{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.05}
.bento .tile:nth-child(1) p{max-height:none;opacity:1;margin-top:8px;font-size:1rem;max-width:44ch}
.bento .tile:nth-child(6){grid-column:span 2}
@media(max-width:1000px){.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px}.bento .tile:nth-child(6){grid-column:span 2}}
@media(max-width:560px){.bento{grid-template-columns:1fr;grid-auto-rows:240px}.bento .tile:nth-child(1),.bento .tile:nth-child(6){grid-column:auto;grid-row:auto}}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--s-4)}
.filters button{font:600 .86rem/1 var(--font-ui);padding:12px 16px;border-radius:999px;border:1px solid rgba(15,31,61,.12);background:#fff;color:var(--ink);cursor:pointer;min-height:44px;transition:all .2s}
.filters button:hover{border-color:var(--night)}
.filters button[aria-pressed=true]{background:var(--night);color:#fff;border-color:var(--night)}
.filters button i{font-style:normal;opacity:.55;margin-left:6px;font-weight:500}

/* ---- the ledger: public recoveries, moving slowly --------------------------- */
.ledger{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ledger .l-track{display:flex;gap:16px;width:max-content;animation:cr-ledger 90s linear infinite}
.ledger:hover .l-track,.ledger:focus-within .l-track{animation-play-state:paused}
@keyframes cr-ledger{to{transform:translateX(-50%)}}
.lcard{flex:0 0 340px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:26px;color:#CDD3E0;text-decoration:none;display:flex;flex-direction:column;min-height:230px;transition:background .3s,border-color .3s}
.lcard:hover{background:rgba(255,255,255,.09);border-color:rgba(201,162,74,.5);text-decoration:none}
.lcard .amt{font-family:var(--font-display);font-weight:400;font-size:2.6rem;line-height:1;letter-spacing:-.03em;color:#fff}
.lcard .who{font:700 .68rem/1.4 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:12px 0 12px}
.lcard p{font-size:.93rem;line-height:1.5;margin:0;color:#CDD3E0}
.lcard .src{margin-top:auto;padding-top:14px;font-size:.76rem;color:#98A2B8}
@media(prefers-reduced-motion:reduce){.ledger .l-track{animation:none;flex-wrap:wrap;width:auto}.ledger{-webkit-mask-image:none;mask-image:none}}

/* ---- stats: very large, light --------------------------------------------- */
.stats.band-stats .stat .n.big{font-weight:400;font-size:clamp(2.8rem,5.4vw,4.6rem);letter-spacing:-.04em;color:var(--ink)}
.dark .stats.band-stats .stat .n.big{color:#fff}
.stats{--stat-line:rgba(15,31,61,.1)}
.stat .n::after{background:var(--gold-2);width:40px;height:3px}

/* ---- state cards ------------------------------------------------------------ */
.statecard{padding:32px 26px 26px;border-radius:24px}
.statecard .abbr{font-weight:400;font-size:5rem;letter-spacing:-.05em}
.dark .statecard{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1)}
.dark .statecard:hover{background:rgba(255,255,255,.08);border-color:rgba(201,162,74,.5)}

/* ---- blog -------------------------------------------------------------------- */
.bloglead{border:0;border-radius:var(--radius-lg);background:var(--night);box-shadow:var(--shadow)}
.bloglead h2{font-weight:400;font-size:clamp(1.9rem,3.2vw,2.8rem)}
.postcard{border-radius:24px}
.postcard .p-media{border-bottom:0}
.postcard .p-body{padding:24px}
.postcard .p-chip{background:rgba(15,31,61,.6);color:var(--gold);border:1px solid rgba(201,162,74,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chips a,.chips span{border-color:rgba(15,31,61,.12)}
.chips .on{background:var(--night);border-color:var(--night)}
.lawchange{border-radius:24px;padding:28px}
.lawchange .date{color:var(--gold-2);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem}
.mosaic figure{border:0;border-radius:24px;box-shadow:var(--shadow-sm)}
.split figure{border:0;box-shadow:var(--shadow)}
.strip{background:var(--night);border-color:rgba(255,255,255,.08);padding:18px 0}
.strip span{font-weight:400;font-size:1.15rem;font-style:italic;color:#98A2B8}

/* ---- the closing card --------------------------------------------------------- */
.ctaband{display:none}
.megacta{margin:0 16px 16px;border-radius:36px;background:var(--night);color:#CDD3E0;position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(56px,9vw,120px) clamp(24px,6vw,96px)}
.megacta::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(800px 500px at 90% 0%,rgba(201,162,74,.2),transparent 60%),
  radial-gradient(700px 500px at 0% 100%,rgba(143,176,212,.14),transparent 60%)}
.megacta .eyebrow{color:var(--gold)}.megacta .eyebrow::before{background:var(--gold)}
.megacta h2{color:#fff;font-weight:400;font-size:clamp(2.4rem,6vw,5.2rem);line-height:1;letter-spacing:-.035em;max-width:14ch;margin:18px 0 22px}
.megacta h2 em{font-style:italic;color:var(--gold)}
.megacta p{max-width:58ch;font-size:1.1rem;line-height:1.65}
.megacta .tel{display:inline-block;font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,5vw,4rem);letter-spacing:-.03em;color:#fff;text-decoration:none;margin:26px 0 8px;border-bottom:2px solid rgba(201,162,74,.6);padding-bottom:4px}
.megacta .tel:hover{color:var(--gold);text-decoration:none}
.megacta .ctarow{margin-top:26px}
.megacta .fine{font-size:.84rem;color:#98A2B8;margin-top:22px;max-width:70ch}
section.megawrap{padding:clamp(40px,6vw,80px) 0 0;background:var(--ivory)}
footer.site{background:var(--night);margin-top:0}

/* ---- phone: bottom action bar instead of a lone button ------------------------ */
.call-fab{display:none!important}
.actionbar{display:none}
@media(max-width:760px){
  .actionbar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;position:fixed;left:10px;right:10px;bottom:10px;z-index:200;padding:8px;border-radius:22px;
    background:rgba(15,31,61,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow-lg)}
  .actionbar a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:14px;font:700 .82rem/1.1 var(--font-ui);color:#fff;text-decoration:none;text-align:center;padding:0 6px}
  .actionbar a.primary{background:var(--gold);color:var(--night)}
  body{padding-bottom:84px}
  header.nav{padding:8px 10px 0}
  .nav-in{min-height:58px;padding:6px 8px 6px 14px}
  .megacta{margin:0 8px 8px;border-radius:26px}
}

/* ---- tool ------------------------------------------------------------------- */
.dt-card{background:var(--night);border-radius:24px}
.dt-choice{border-color:rgba(15,31,61,.14);border-radius:14px}
.dt-choice:has(input:checked){background:#FBF6E8}

/* ---- motion ------------------------------------------------------------------ */
.reveal{transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
@media(prefers-reduced-motion:reduce){.reveal{transform:none;transition:none}.btn:hover,.card:hover{transform:none}}
@media print{header.nav,.actionbar,.onpage,.progress,.megacta{display:none}}

/* gold links on night grounds use the light gold, never gold-2 */
.dark .more,.dark .statecard .more,.megacta .more,.dark a.card .more{color:var(--gold)}
.dark .cite a,.dark p a{color:var(--gold-soft)}

/* ---- buttons inside prose never carry the link underline ---------------------- */
.prose a.btn,.prose a.btn:hover{text-decoration:none}

/* ---- the side card: fills the right column beside long articles (>=1280px) ------ */
.sidecard{position:fixed;top:168px;right:max(24px,calc((100vw - 1200px)/2 + 20px));width:300px;z-index:50;
  background:#fff;border:1px solid rgba(15,31,61,.08);border-radius:24px;box-shadow:var(--shadow);padding:24px;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.sidecard.on{opacity:1;transform:none;pointer-events:auto}
.sidecard .sc-who{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.sidecard .sc-who img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.sidecard .sc-who b{display:block;font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink);line-height:1.2}
.sidecard .sc-who small{display:block;font-size:.78rem;color:var(--muted);line-height:1.35;margin-top:2px}
.sidecard h2{font-size:1.35rem;line-height:1.15;margin:0 0 8px;font-weight:500}
.sidecard p{font-size:.9rem;line-height:1.5;color:var(--ink-soft);margin:0 0 16px}
.sidecard .sc-tel{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:500;color:var(--ink);text-decoration:none;letter-spacing:-.02em;margin-bottom:14px}
.sidecard .btn{width:100%;margin-bottom:8px;min-height:46px}
.sidecard .sc-fine{font-size:.74rem;color:var(--muted);margin:8px 0 0;line-height:1.45}
@media(max-width:1279px){.sidecard{display:none}}
@media print{.sidecard{display:none}}

/* a proper reading measure on wide screens; the side card lives in the freed column */
@media(min-width:1280px){.prose.wide,.prose{max-width:780px}.moneyrow{grid-template-columns:220px 1fr}}

/* ---- v4: the deadline tool preview, restyled to the night card language ---- */
.clocks{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:28px;padding:26px 28px;color:#CDD3E0;box-shadow:0 30px 80px rgba(0,0,0,.45);position:relative;overflow:hidden}
.clocks::before{content:"";position:absolute;left:28px;right:28px;top:0;height:2px;background:linear-gradient(90deg,var(--gold),rgba(201,162,74,0))}
.clocks .c-head{display:flex;justify-content:space-between;font:700 .68rem/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin:6px 0 16px}
.clocks .c-verdict{font-family:var(--font-display);font-weight:400;font-size:1.28rem;line-height:1.3;color:#fff;margin:0 0 18px}
.clocks .c-row{display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:center;padding:16px 0;border-top:1px solid rgba(255,255,255,.1)}
.clocks .c-n{font-family:var(--font-display);font-weight:400;font-size:2.3rem;line-height:1;letter-spacing:-.03em;color:#fff}
.clocks .c-n small{display:block;font:700 .62rem/1.2 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:6px}
.clocks .c-t{font-size:.9rem;line-height:1.45;color:#B7BFD0}
.clocks .c-t b{display:block;color:#fff;font-weight:600;margin-bottom:2px}
.clocks .c-tag{font:700 .62rem/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:#98A2B8;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 10px;white-space:nowrap}
.clocks .c-row:first-of-type .c-tag{color:var(--night);background:var(--gold);border-color:var(--gold)}
.clocks .c-foot{font-size:.76rem;color:#98A2B8;margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.tool-split h2 .gold-i{font-style:italic;color:var(--gold);font-weight:400}
@media(max-width:560px){.clocks{padding:22px 20px;border-radius:22px}.clocks .c-row{grid-template-columns:80px 1fr;gap:12px}.clocks .c-tag{display:none}.clocks .c-n{font-size:1.9rem}}

/* ---- v4: the home mosaic; .split figure's 4:3 aspect ratio was leaking into it ---- */
.split .mosaic{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:230px 230px;gap:12px}
.split .mosaic figure{aspect-ratio:auto;height:100%;border-radius:24px;box-shadow:var(--shadow-sm);border:0}
.split .mosaic figure:first-child{grid-row:span 2}
@media(max-width:860px){.split .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:200px 160px 160px}.split .mosaic figure:first-child{grid-row:auto;grid-column:span 2}}

/* 2026-09-17: on wide screens the deadline card sits at the right edge and the photo shifts so the attorneys' faces stay clear of it; bento titles share a baseline */
@media(min-width:1101px){
  .hero-photo>.wrap{max-width:none;padding-left:4vw;padding-right:4vw;grid-template-columns:minmax(0,560px) 400px;justify-content:space-between;column-gap:2vw}
  .hero-photo .hero-copy{max-width:560px}
  .hero-photo .hero-bg .shot,.hero-photo .hero-bg .hero-video{left:0;width:100%;object-position:74% 28%}
  .hero-photo .hero-bg::after{background:linear-gradient(90deg,rgba(15,31,61,.97) 0%,rgba(15,31,61,.92) 28%,rgba(15,31,61,.34) 46%,rgba(15,31,61,.16) 62%,rgba(15,31,61,.42) 100%),
             linear-gradient(180deg,rgba(15,31,61,.42) 0%,rgba(15,31,61,0) 28%,rgba(15,31,61,.62) 100%)}
}
.tilegrid.bento .tile h3{display:flex;align-items:flex-end;min-height:2.4em}

/* ---- v5 (2026-09-17): seamless hero. The picture fills the hero and dissolves into the
   navy on every side; no photo edge is visible at any width. */
.hero-photo .hero-bg .shot,.hero-photo .hero-bg .hero-video{left:0!important;width:100%!important;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,#000 34%,#000 82%,rgba(0,0,0,.55) 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,#000 34%,#000 82%,rgba(0,0,0,.55) 100%)}
.hero-photo .hero-bg::after{background:
  linear-gradient(90deg,rgba(15,31,61,.98) 0%,rgba(15,31,61,.9) 26%,rgba(15,31,61,.34) 48%,rgba(15,31,61,.12) 66%,rgba(15,31,61,.38) 100%),
  linear-gradient(180deg,rgba(15,31,61,.55) 0%,rgba(15,31,61,0) 30%,rgba(15,31,61,0) 62%,rgba(15,31,61,.97) 100%)!important}
@media(max-width:900px){.hero-photo .hero-bg .shot,.hero-photo .hero-bg .hero-video{-webkit-mask-image:none;mask-image:none;object-position:70% 30%}
  .hero-photo .hero-bg::after{background:linear-gradient(180deg,rgba(15,31,61,.86) 0%,rgba(15,31,61,.8) 55%,rgba(15,31,61,.97) 100%)!important}}
.hero-cred{border-top-color:rgba(238,223,176,.14);background:rgba(15,31,61,.5)}

/* ---- v5: motion. Mikhail: "where are my animations." Reveals now stagger and re-arm per
   page; the hero rises on load; the picture never stops its slow push-in. ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.reveal.in .eyebrow::before{animation:cr-line .9s var(--ease) both}
@keyframes cr-line{from{width:0}to{width:34px}}
@keyframes cr-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes cr-rise-x{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes cr-drop{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
.hero-photo .eyebrow{animation:cr-rise .8s var(--ease) both .1s}
.hero-photo h1{animation:cr-rise 1s var(--ease) both .22s}
.hero-photo .lede{animation:cr-rise .9s var(--ease) both .4s}
.hero-photo .ctarow{animation:cr-rise .9s var(--ease) both .54s}
.hero-photo .hero-note{animation:cr-rise .9s var(--ease) both .66s}
.hero-photo .ask{animation:cr-rise-x 1.1s var(--ease) both .5s}
.hero-cred li{animation:cr-rise .8s var(--ease) both}
.hero-cred li:nth-child(1){animation-delay:.8s}.hero-cred li:nth-child(2){animation-delay:.9s}
.hero-cred li:nth-child(3){animation-delay:1s}.hero-cred li:nth-child(4){animation-delay:1.1s}
header.nav .nav-in{animation:cr-drop .8s var(--ease) both .05s}
.posthero h1,.phero h1{animation:cr-rise .9s var(--ease) both .15s}
.posthero .lede,.phero .lede{animation:cr-rise .9s var(--ease) both .3s}
.posthero .crumb,.phero .crumb,.posthero .ph-cat,.phero .eyebrow{animation:cr-rise .8s var(--ease) both .05s}
.posthero .ph-bg{animation:cr-kenburns-loop 28s ease-in-out infinite alternate;transform-origin:50% 40%}
.hero-figure .shot,.hero-figure .hero-video{animation:cr-kenburns-loop 26s ease-in-out infinite alternate}
@keyframes cr-kenburns-loop{from{transform:scale(1)}to{transform:scale(1.07)}}
.tile img{transition:transform 1.2s var(--ease)}
.tile:hover img{transform:scale(1.07)}
.card,.lcard,.statecard,.postcard{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s,background .3s}
.btn-gold{position:relative;overflow:hidden}
.btn-gold::after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));transition:left .7s var(--ease)}
.btn-gold:hover::after{left:120%}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
  .hero-photo .eyebrow,.hero-photo h1,.hero-photo .lede,.hero-photo .ctarow,.hero-photo .hero-note,.hero-photo .ask,.hero-cred li,
  header.nav .nav-in,.posthero h1,.phero h1,.posthero .lede,.phero .lede,.posthero .crumb,.phero .crumb,.posthero .ph-cat,.phero .eyebrow,
  .posthero .ph-bg,.hero-figure .shot,.hero-figure .hero-video,.reveal.in .eyebrow::before{animation:none}
  .tile:hover img{transform:none}.btn-gold::after{display:none}}

/* ---- v6 (2026-09-17): the top logo and nav after Mikhail's reference: scales mark in a broken
   ring, wordmark with a tagline, chevron dropdowns, brass underline on the active item, a globe
   before the language code, an arrow on the call button. ---- */
.brand{gap:12px;margin-right:10px}
.brand .mark{width:46px;height:46px}
.brand .lockup{display:flex;flex-direction:column;gap:3px;line-height:1}
.brand .wordmark{font-size:1.42rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.brand .b0{font-weight:600;letter-spacing:0;margin-right:.22em}
.brand .b2{color:var(--gold-2)}
.brand .tagline{font:600 .56rem/1 var(--font-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.nav-in{min-height:72px;padding:10px 12px 10px 22px}
header.nav{margin-bottom:-92px}
.nav-links{gap:4px}
.nav-links>a,.nav-links>.nav-item>a{position:relative;font-weight:600;font-size:.9rem;color:var(--ink);padding:10px 12px;border-radius:999px;
  display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.nav-links>a:hover,.nav-links>.nav-item>a:hover{background:var(--ivory-2);color:var(--ink)}
.nav-links a.active{background:transparent;color:var(--ink);font-weight:650}
.nav-links a.active::after{display:block;content:"";position:absolute;left:12px;right:12px;bottom:-4px;height:3px;border-radius:2px;background:var(--gold)}
.nav-links .chev{color:var(--muted);transition:transform .25s var(--ease)}
.nav-item{position:relative}
.nav-item:hover>a .chev,.nav-item:focus-within>a .chev{transform:rotate(180deg);color:var(--gold-2)}
.menu{position:absolute;top:100%;left:0;padding-top:14px;min-width:280px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s;z-index:120}
.nav-item:hover .menu,.nav-item:focus-within .menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu-in{background:#fff;border:1px solid rgba(15,31,61,.08);border-radius:18px;box-shadow:0 24px 60px rgba(15,31,61,.18);padding:10px}
.menu-in a{display:block;padding:10px 14px;border-radius:12px;font-size:.9rem;font-weight:500;color:var(--ink);text-decoration:none}
.menu-in a:hover,.menu-in a:focus-visible{background:var(--ivory-2);color:var(--ink);text-decoration:none}
.menu-in a:last-child{margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;padding-top:12px;color:var(--gold-2);font-weight:650}
.nav-cta{gap:12px}
.nav-cta::before{content:"";width:1px;height:28px;background:var(--line);margin-right:2px}
.lang-btn{border:0;background:transparent;font-weight:600;gap:7px;padding:0 6px}
.lang-btn .globe{color:var(--ink-soft)}
.nav-cta .btn-gold{min-height:48px;padding:0 22px;font-size:.92rem}
@media(max-width:1180px){
  .nav-links{padding:8px}
  .nav-links>.nav-item{width:100%}
  .nav-links>a,.nav-links>.nav-item>a{width:100%;padding:12px 14px;border-radius:12px;font-size:1rem}
  .nav-links a.active::after{display:none}
  .nav-links a.active{color:var(--gold-2)}
  .menu{position:static;opacity:1;visibility:visible;transform:none;padding:0 0 6px 14px;min-width:0}
  .menu-in{border:0;box-shadow:none;padding:0;background:transparent}
  .menu-in a{padding:8px 14px;font-size:.92rem;color:var(--ink-soft)}
  .nav-cta::before{display:none}
  .lang-btn .globe{display:none}
}
@media(max-width:1300px) and (min-width:1181px){.brand .tagline{display:none}.brand .wordmark{font-size:1.25rem}.nav-links>a,.nav-links>.nav-item>a{padding:10px 9px;font-size:.86rem}}
@media(max-width:540px){.brand .lockup{display:none}.brand .mark{width:40px;height:40px}}
/* v6 fit: the link row never shrinks (the chevrons were collapsing); the pill widens on large
   screens and the tagline yields below 1400px */
.nav-links{flex:0 0 auto;min-width:0}
.nav-links>a,.nav-links>.nav-item>a{flex:0 0 auto;white-space:nowrap}
.nav-links .chev{flex:0 0 auto;width:10px;height:6px}
.brand .mark{width:48px;height:48px}
@media(min-width:1400px){.nav-in{max-width:1340px}}
@media(max-width:1399px) and (min-width:1181px){.brand .tagline{display:none}.brand .wordmark{font-size:1.3rem}.nav-links>a,.nav-links>.nav-item>a{padding:10px 9px;font-size:.87rem}.nav-cta .btn-gold{padding:0 18px}}
@media(max-width:1300px) and (min-width:1181px){.brand .wordmark{font-size:1.2rem}.nav-links>a,.nav-links>.nav-item>a{padding:10px 7px;font-size:.84rem}.nav-cta{gap:8px}}
.lang-btn .globe{width:16px;height:16px;flex:0 0 auto}

/* ---- v6: the closing card had a half-empty right side on wide screens (Mikhail, 2026-09-17).
   The copy keeps its measure on the left; a photograph fills the right and dissolves into the navy. */
.megacta{max-width:1400px;margin-left:auto;margin-right:auto;min-height:520px;display:grid;grid-template-columns:minmax(0,1fr)}
.megacta .mc-copy{position:relative;z-index:1;max-width:620px}
.megacta .mc-fig{display:none;margin:0}
@media(min-width:1000px){
  .megacta{grid-template-columns:minmax(0,56%) minmax(0,44%)}
  .megacta .mc-fig{display:block;position:absolute;top:0;right:0;bottom:0;width:52%;z-index:0}
  .megacta .mc-fig img{width:100%;height:100%;object-fit:cover;object-position:60% 30%;display:block;
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.85) 38%,#000 100%);
    mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.85) 38%,#000 100%);opacity:.9}
  .megacta .mc-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,31,61,.35),rgba(15,31,61,0) 40%,rgba(15,31,61,.6) 100%)}
}

/* ---- v6: the closing card had a half-empty right side on wide screens (Mikhail, 2026-09-17).
   The copy keeps its measure on the left; a photograph fills the right and dissolves into the navy. */
.megacta{max-width:1400px;margin-left:auto;margin-right:auto;min-height:520px;display:grid;grid-template-columns:minmax(0,1fr)}
.megacta .mc-copy{position:relative;z-index:1;max-width:620px}
.megacta .mc-fig{display:none;margin:0}
@media(min-width:1000px){
  .megacta{grid-template-columns:minmax(0,56%) minmax(0,44%)}
  .megacta .mc-fig{display:block;position:absolute;top:0;right:0;bottom:0;width:52%;z-index:0}
  .megacta .mc-fig img{width:100%;height:100%;object-fit:cover;object-position:60% 30%;display:block;
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.85) 38%,#000 100%);
    mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.85) 38%,#000 100%);opacity:.9}
  .megacta .mc-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,31,61,.35),rgba(15,31,61,0) 40%,rgba(15,31,61,.6) 100%)}
}

/* ---- v6: "Who this happens to", a slow strip of client portraits (Package C) ---- */
.faces-sec{padding-bottom:clamp(48px,7vw,96px)}
.faces{overflow:hidden;margin-top:8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.faces .f-track{display:flex;gap:18px;width:max-content;padding:6px 0 14px;animation:cr-faces 120s linear infinite}
.faces:hover .f-track,.faces:focus-within .f-track{animation-play-state:paused}
@keyframes cr-faces{to{transform:translateX(-50%)}}
.face{position:relative;flex:0 0 250px;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:var(--night-2);box-shadow:var(--shadow-sm);text-decoration:none;display:block;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.face:hover{transform:translateY(-6px);box-shadow:var(--shadow);text-decoration:none}
.face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform 1.2s var(--ease)}
.face:hover img{transform:scale(1.06)}
.face::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,31,61,0) 45%,rgba(15,31,61,.9) 100%)}
.face .f-cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;color:#fff;line-height:1.25}
.face .f-cap b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.face .f-cap i{display:inline-block;margin-top:7px;font:700 .62rem/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-style:normal}
@media(max-width:560px){.face{flex-basis:200px}}
@media(prefers-reduced-motion:reduce){.faces .f-track{animation:none;flex-wrap:wrap;width:auto}.faces{-webkit-mask-image:none;mask-image:none}}
.consult-mosaic{margin-top:8px}
.split .consult-mosaic,.consult-mosaic{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:200px 200px;gap:12px}
.consult-mosaic figure{margin:0;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-sm);background:var(--night-2)}
.consult-mosaic figure:first-child{grid-row:span 2}
.consult-mosaic img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:860px){.consult-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:180px 150px 150px}.consult-mosaic figure:first-child{grid-row:auto;grid-column:span 2}}
/* v6 fix: the client strip captions were hard to read over mid-tone photographs (Mikhail).
   Deeper gradient, and the caption sits on its own navy plate. */
.face::after{background:linear-gradient(180deg,rgba(15,31,61,0) 30%,rgba(15,31,61,.55) 62%,rgba(15,31,61,.96) 100%)}
.face .f-cap{left:12px;right:12px;bottom:12px;padding:12px 14px 13px;border-radius:14px;background:rgba(15,31,61,.82);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1)}
.face .f-cap b{font-size:1.06rem;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.face .f-cap i{margin-top:8px;color:var(--gold)}
.face .f-cap b{color:#fff}

/* v7: the ambient light loop (Higgsfield footage regraded to navy and brass) */
.ambient .amb-video{transition:opacity 1.6s ease;mix-blend-mode:screen}
.ambient.is-playing .amb-video{opacity:.34}
.ambient.is-playing::before{opacity:.5}

/* ---- v7: Higgsfield clips. Photo heroes and the home hero cross-fade from the still to the clip
   once it is really playing; the still is the clip's own first frame, so nothing jumps. ---- */
.posthero .ph-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:-2;opacity:0;transition:opacity 1.4s ease}
.posthero.is-playing .ph-vid{opacity:1}
.posthero.is-playing .ph-bg{animation-play-state:paused}
.posthero.no-video .ph-vid{display:none}
.hero-figure .hero-video{animation:none!important;transform:none!important}
.hero-figure.is-playing .shot{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.posthero .ph-vid,.hero-figure .hero-video{display:none}}
@media print{.posthero .ph-vid,.hero-figure .hero-video{display:none}}

/* v7: the closing card plays the courtroom clip on its right side; the still is the clip's first frame */
.megacta .mc-fig .mc-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:0;transition:opacity 1.4s ease;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.85) 38%,#000 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.85) 38%,#000 100%)}
.megacta .mc-fig.is-playing .mc-vid{opacity:.9}
.megacta .mc-fig img{object-position:50% 30%}
@media(prefers-reduced-motion:reduce){.megacta .mc-vid{display:none}}
@media(max-width:999px){.megacta .mc-vid{display:none}}

/* ---- v8 (2026-09-18): the deadline tool answers first ("too late or not"), then shows the clocks.
   Rows move from the v2 pastel cards to the night look; buttons on the navy card are legible. ---- */
.dt-verdict{background:#fff;color:var(--ink);border-radius:18px;padding:22px 24px 20px;margin:0 0 18px;border-left:6px solid var(--gold-2);box-shadow:0 18px 50px rgba(0,0,0,.3)}
.dt-verdict .v-k{display:block;font:700 .66rem/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.dt-verdict .v-h{font-family:var(--font-display);font-weight:500;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.12;letter-spacing:-.02em;margin:0 0 10px;color:var(--ink)}
.dt-verdict p{margin:0 0 8px;font-size:.98rem;line-height:1.55;color:var(--ink-soft)}
.dt-verdict p:last-child{margin-bottom:0}
.dt-verdict b{color:var(--ink)}
.dt-verdict.ok{border-left-color:#1F6B4A}.dt-verdict.ok .v-h{color:#17543A}
.dt-verdict.partial{border-left-color:var(--gold)}.dt-verdict.partial .v-h{color:#6B4F12}
.dt-verdict.late{border-left-color:#A8431F}.dt-verdict.late .v-h{color:#8A3516}
.dt-card .dt-detail{font:700 .68rem/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);margin:4px 0 12px}
.dt-card .dt-row{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-left:3px solid #98A2B8;color:#CDD3E0;border-radius:14px;padding:14px 16px}
.dt-card .dt-row b{color:#fff}
.dt-card .dt-row .when{color:#fff;font-weight:500}
.dt-card .dt-row .cite{color:#98A2B8;opacity:1}
.dt-card .dt-row .lvl{background:transparent}
.dt-card .dt-row.risk{border-left-color:#F0A58A}.dt-card .dt-row.risk .lvl{color:#F0A58A}
.dt-card .dt-row.warn{border-left-color:var(--gold)}.dt-card .dt-row.warn .lvl{color:var(--gold)}
.dt-card .dt-row.ok{border-left-color:#8FD3AE}.dt-card .dt-row.ok .lvl{color:#8FD3AE}
.dt-card .dt-row.info{border-left-color:#9DB9DA}.dt-card .dt-row.info .lvl{color:#9DB9DA}
.dt-card .dt-row.note .lvl{color:#B7BFD0}
.dt-card .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4);background:transparent}
.dt-card .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.dt-card .btn-gold{color:var(--night)}
.dt-card .btn-gold[disabled]{opacity:.45;cursor:not-allowed}
@media print{.dt-verdict{box-shadow:none;border:1px solid #000}.dt-card .dt-row{background:#fff;color:#000;border:1px solid #000}.dt-card .dt-row b,.dt-card .dt-row .when{color:#000}}

/* ---- v8: one color scheme for every picture tile (Mikhail: "same color scheme"). Stand-ins were navy
   duotone and real photographs full color, so the grid read as two sites. Every tile image is reduced
   to its luminance and tinted by one navy layer; whatever photo lands in a slot later matches. ---- */
.tile img,.face img{filter:grayscale(1) contrast(1.05) brightness(.96)}
.tile::before,.face::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:#25375F;mix-blend-mode:color}
.face{isolation:isolate}
.face img{z-index:-2}
.face::after{z-index:-1}
.face .f-cap{z-index:1}
.tile::after{z-index:-1}

/* v8: strip captions share one height, so names start and brass labels sit on the same lines */
.face .f-cap{display:flex;flex-direction:column;min-height:96px}
.face .f-cap b{min-height:2.4em;display:block}
.face .f-cap i{margin-top:auto}

/* ---- v9 (2026-09-18): tiles match up (Mikhail: "not lopsided"). Every title starts on the same line:
   a two-line title box, top aligned, so one-line and two-line titles share a first line and the
   "Read" links share a baseline. Hovering no longer slides a description in, which pushed one title
   above its neighbors; the description stays for screen readers and search, and is visible only on
   the large feature tile. ---- */
.tile h3,.tilegrid.bento .tile h3{display:block;min-height:2.4em;margin:0 0 8px}
.tile p,.tile:hover p,.tile:focus-visible p{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;max-height:none;opacity:1}
@media(hover:none){.tile p{max-height:none}}
.bento .tile:nth-child(1) h3{min-height:0}
.bento .tile:nth-child(1) p,.bento .tile:nth-child(1):hover p{position:static;width:auto;height:auto;margin:8px 0 0;overflow:visible;clip:auto;white-space:normal;font-size:1rem;max-width:44ch}
.tile .t-more{display:inline-block}
@media(max-width:560px){.bento .tile:nth-child(1) h3{min-height:0}}

/* ---- v9: no double exposure (Mikhail: "looks like a ghost, pick a lane"). A playing clip is fully
   opaque and the still under it is switched off once the fade has finished. ---- */
.megacta .mc-fig img{opacity:1}
.megacta .mc-fig.is-playing .mc-vid{opacity:1}
.megacta .mc-fig.is-playing img{opacity:0;transition:opacity .01s linear 1.5s}
.posthero.is-playing .ph-vid{opacity:1}
.posthero.is-playing .ph-bg{opacity:0;animation:none;transition:opacity .01s linear 1.5s}
.hero-figure.is-playing .hero-video{opacity:1}
.hero-figure.is-playing .shot{opacity:0;animation:none;transition:opacity .01s linear 1.5s}

/* v9: real-case cards are typographic. No photograph stands in for a real person. */
.face.case{aspect-ratio:auto;flex:0 0 280px;min-height:250px;background:var(--night);border:1px solid rgba(255,255,255,.08)}
.face.case::before,.face.case::after{display:none}
.face.case .f-cap{position:static;display:flex;flex-direction:column;min-height:250px;padding:24px 22px 22px;background:transparent;border:0;border-radius:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;left:auto;right:auto;bottom:auto}
.face.case .f-cap em{font:700 .68rem/1 var(--font-ui);letter-spacing:.16em;color:var(--gold);font-style:normal;margin-bottom:18px}
.face.case .f-cap em::after{content:"";display:block;width:34px;height:2px;background:var(--gold);margin-top:12px}
.face.case .f-cap b{font-family:var(--font-display);font-weight:500;font-size:1.5rem;line-height:1.1;letter-spacing:-.02em;color:#fff;min-height:2.2em;text-shadow:none}
.face.case .f-cap i{margin-top:10px;color:#B7BFD0;font:500 .9rem/1.4 var(--font-ui);letter-spacing:0;text-transform:none}
.face.case .c-more{margin-top:auto;padding-top:18px;font:700 .8rem/1 var(--font-ui);color:var(--gold)}
.face.case:hover{background:var(--night-2);border-color:rgba(201,162,74,.5)}

/* ---- v10 (2026-09-18): the home mosaic fits the photographs (Mikhail: "don't zoom in so much, show
   both of us or change the format"). A wide tile for the wide team photo, one tall tile for the one
   portrait photo, three landscape thumbnails. No wide photo is ever forced into a tall slot. ---- */
.split .mosaic{grid-template-columns:repeat(6,1fr);grid-template-rows:270px 150px;gap:12px}
.split .mosaic figure,.split .mosaic figure:first-child{grid-column:span 2;grid-row:auto}
.split .mosaic figure.wide{grid-column:span 4}
.split .mosaic figure.tall{grid-column:span 2}
@media(max-width:860px){.split .mosaic{grid-template-columns:repeat(6,1fr);grid-template-rows:210px 120px}
  .split .mosaic figure,.split .mosaic figure:first-child{grid-column:span 2;grid-row:auto}.split .mosaic figure.wide{grid-column:span 4}}
@media(max-width:480px){.split .mosaic{grid-template-rows:170px 96px;gap:8px}}

/* v11 (2026-09-18): something behind the words on the real-case cards: a tinted place photograph and a
   large brass line icon for the kind of case. Places and symbols only, never a person. */
.face.case{isolation:isolate;overflow:hidden}
.face.case .c-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;filter:grayscale(1) contrast(1.1) brightness(.9);opacity:.5;transition:transform 1.4s var(--ease),opacity .5s}
.face.case::before{display:block;content:"";position:absolute;inset:0;z-index:-2;background:#25375F;mix-blend-mode:color}
.face.case::after{display:block;content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,rgba(15,31,61,.9) 0%,rgba(15,31,61,.72) 45%,rgba(15,31,61,.9) 100%)}
.face.case .c-ico{position:absolute;right:-18px;bottom:-22px;width:170px;height:170px;z-index:-1;color:var(--gold);opacity:.2;transition:opacity .5s,transform .8s var(--ease)}
.face.case:hover .c-bg{transform:scale(1.06);opacity:.62}
.face.case:hover .c-ico{opacity:.34;transform:translate(-4px,-4px)}
.face.case .f-cap{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.face.case:hover .c-bg,.face.case:hover .c-ico{transform:none}}
/* v11 fix: the icon sits above the gradient (it was painted over), and the photograph reads a little more */
.face.case .c-ico{z-index:0;opacity:.3;width:180px;height:180px;right:-14px;bottom:-18px}
.face.case:hover .c-ico{opacity:.5}
.face.case::after{background:linear-gradient(160deg,rgba(15,31,61,.86) 0%,rgba(15,31,61,.58) 50%,rgba(15,31,61,.84) 100%)}
.face.case .c-bg{opacity:.62}
/* v11: lighter icons, tucked into the corner so they sit behind the words without fighting them */
.face.case .c-ico{width:128px;height:128px;right:-12px;bottom:-16px;opacity:.26}
.face.case .c-ico *{vector-effect:non-scaling-stroke;stroke-width:2px}
.face.case:hover .c-ico{opacity:.45}
.face.case .c-more{position:relative;z-index:1}
.face.case .c-ico{opacity:.5;color:#D9B968}
.face.case:hover .c-ico{opacity:.75}

/* v12 (2026-09-22): icons off the real-case cards; a state-and-year mark in the corner instead */
.face.case .c-ico{display:none}
.face.case .c-state{position:absolute;top:18px;right:18px;z-index:1;display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.face.case .c-state b{font-family:var(--font-display);font-weight:500;font-size:1.7rem;letter-spacing:-.02em;color:var(--gold)}
.face.case .c-state i{font:700 .66rem/1 var(--font-ui);letter-spacing:.14em;color:#B7BFD0;font-style:normal;margin-top:5px}
.face.case .f-cap em{padding-right:70px}

/* ---- v13 (2026-09-24): Cops Must Pay. The name stays in the header on every width. Below 540px the
   wordmark shrinks, the tagline goes, the call button reads "Call", and the language button moves into
   the menu so the name never collides with the buttons. ---- */
@media(max-width:540px){
  .brand .lockup{display:flex}
  .brand .tagline{display:none}
  .brand .wordmark{display:inline;font-size:1.12rem;letter-spacing:-.015em;white-space:nowrap}
  .brand .mark{width:34px;height:34px}
  .brand{gap:8px;margin-right:0;min-width:0}
  .nav-in{padding:8px 8px 8px 12px;min-height:60px}
  .nav-cta{gap:6px}
  .nav-cta .btn-gold{padding:0 14px;min-height:44px;font-size:.88rem}
  .nav-cta .cta-long{display:none}.nav-cta .cta-short{display:inline}
  .brand .wordmark span{display:inline}
  .lang-btn{padding:0 4px;gap:4px;min-height:44px}
  .nav-cta .btn-gold .arr{display:none}
  .nav-cta::before{display:none}
}
@media(max-width:360px){.brand .wordmark{font-size:1rem}.nav-cta .btn-gold .arr{display:none}}
.nav-cta .cta-short{display:none}
@media(max-width:540px){.nav-cta .cta-short{display:inline}}
@media(max-width:374px){.nav-cta .lang{display:none}.nav-in{padding-left:10px}.brand{gap:6px}}
/* v13: the announcement bar is one short line on phones (the long version wrapped to four lines and the hero cut off the link) */
.annc .annc-short{display:none}
@media(max-width:700px){.annc .annc-long{display:none}.annc .annc-short{display:inline}.annc{font-size:.8rem;line-height:1.45;padding:8px 14px}}
.annc{position:relative;z-index:101}
/* v14 (2026-09-25): the header reads "CopsMustPay.com", four letters longer. On phones up to 420px the
   language choices live at the foot of the menu (.menu-lang, built in cr.js), and below 360px the name
   and buttons tighten so the menu button stays inside the pill. */
.menu-lang{display:none}
@media(max-width:420px){
  .nav-cta .lang{display:none}
  .nav-links .menu-lang{display:flex;flex-wrap:wrap;gap:8px;padding:14px 4px 6px;margin-top:8px;border-top:1px solid rgba(15,31,61,.12)}
  .menu-lang button{font:600 .9rem/1 var(--font-ui);color:var(--ink);background:#fff;border:1px solid rgba(15,31,61,.18);border-radius:999px;padding:10px 14px;min-height:44px;cursor:pointer}
}
@media(max-width:359px){.brand .wordmark{font-size:.9rem}.brand .mark{width:30px;height:30px}.nav-cta .btn-gold{padding:0 11px}}