/* ════════════════════════════════════════════════════════════════════
   COLLISION BUREAU | design system · editorial
   Linked by every page. Fonts loaded per-page in <head>.

   The luxury register, arrived at by subtraction. The previous pass
   stacked effects (orbs, grain, grid fields, letter glow, gradient
   text) on a monochrome navy world, and the result read as generated.
   This system is the opposite move: bone paper as the dominant field,
   Fraunces as the display voice, deep navy as ink, and the logo's
   electric blue reserved for one signature gesture per view, the road
   line. Dark surfaces exist only where they frame: the nav, the
   provider band, the overlay, and the footer.

   Motion kept from the last pass: spring reveals with cascade stagger,
   count-ups, the glass nav, the board scan, the overlay. Everything
   else was decoration and is gone.
═════════════════════════════════════════════════════════════════════ */
:root{
  /* The platform register: one deep navy field lit from the edges,
     light text, pill geometry, and the logo blue as the only accent.
     Token names are kept from earlier passes; --lt* now mean the dark
     grounds and --lk* the text scale, and the light islands below
     re-scope both for paper surfaces. */
  --lt:#0A0714; --lt2:#0E0A1C; --lt3:#161028; --paper:#161028;
  --lk:#F2F0FA; --lk2:#C4BDD8; --lk3:#978FB0; --lk4:#6B6487;

  --ink:#0C0918; --ink-2:#120D22; --ink-3:#191331; --ink-4:#241B45;
  --tx:#F2F0FA; --tx-d2:rgba(242,240,250,.74); --tx-d3:rgba(242,240,250,.56); --tx-d4:rgba(242,240,250,.38);

  --navy:#7C5CFC; --navy-press:#6847E8;
  --steel:#7C5CFC; --steel-2:#A78BFF;
  --brass:#7C5CFC; --brass-2:#A78BFF; --brass-press:#6847E8; --brass-tint:rgba(124,92,252,.14);

  --signal:#F0805F; --signal-2:#F0805F;
  --rule:rgba(242,240,250,.09); --rule-2:rgba(242,240,250,.18); --rule-d:rgba(242,240,250,.14); --rule-d2:rgba(242,240,250,.07);
  --tint:rgba(124,92,252,.16);
  --warn:#F0805F; --warn-bg:rgba(240,128,95,.12);

  --focus:#A78BFF; --focus-on-dark:#A78BFF;
  --ease:cubic-bezier(.22,1,.36,1);
  --r:18px; --rp:999px;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,monospace;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --disp:'Manrope','Inter',system-ui,sans-serif;
}

/* Light islands: paper objects on the dark field. They re-scope the
   theme so every component written against the tokens just works. */
.panel,.card,.formcard,.doc{
  --lk:#17141F; --lk2:#453F56; --lk3:#6A6382; --lk4:#938CA8;
  --rule:#E9E6F1; --rule-2:#CFCADF;
  --lt2:#F4F2F9; --lt3:#EBE8F3;
  --paper:#FFFFFF; --tint:#EEE9FD; --brass-tint:#EEE9FD;
  --warn:#B0472E; --warn-bg:#F9ECE6; --signal:#B0472E;
  --steel:#6847E8; --navy:#5B3FD6; --navy-press:#4A30B8; --focus:#5B3FD6;
  color:var(--lk);
}

/* ── ACCESSIBILITY LAYER (WCAG 2.2 AA) ─────────────────────────────────
   Contrast spot checks: --lk on --lt ~14.6:1; --lk3 on --lt ~5.7:1;
   --tx on --ink ~16.4:1; --brass-2 on --ink ~9.2:1; --brass on --lt
   ~4.9:1 (large/bold use only on paper); white on --navy ~10.9:1;
   --signal on --lt ~6.2:1.
═════════════════════════════════════════════════════════════════════ */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip-link{position:fixed;top:8px;left:8px;z-index:200;transform:translateY(-200%);background:var(--paper);color:var(--lk);font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:14px;padding:11px 18px;border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .18s var(--ease)}
.skip-link:focus{transform:translateY(0);outline:3px solid var(--focus);outline-offset:2px}

:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
.nav :focus-visible,.ctaband :focus-visible,footer :focus-visible,
.darksec :focus-visible,.record :focus-visible,.board :focus-visible,
.overlay :focus-visible{outline-color:var(--focus-on-dark)}
.formcard input:focus-visible,.formcard select:focus-visible,.formcard textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media (pointer: coarse){
  a[href],button,[role="button"],
  input[type="submit"],input[type="button"],input[type="checkbox"],input[type="radio"],
  label,select,summary{min-height:44px;min-width:44px}
  .consent input[type="checkbox"],.opt input[type="radio"],.need input[type="checkbox"]{min-height:0;min-width:0}
  .textlink{display:inline-flex;align-items:center;border-bottom:0;padding-bottom:0;text-decoration:underline;text-underline-offset:4px}
  .navlinks a + a{margin-left:4px}
  .record *,.board *{min-height:0;min-width:0}
}

/* ── BASE ──────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--lt);color:var(--lk);font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:16.5px;line-height:1.64;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(1000px 560px at 85% -5%, rgba(124,92,252,.34), transparent 64%),
  radial-gradient(820px 520px at -8% 12%, rgba(53,40,104,.75), transparent 62%),
  radial-gradient(1000px 700px at 110% 78%, rgba(124,92,252,.20), transparent 62%),
  radial-gradient(700px 460px at 12% 108%, rgba(236,72,153,.12), transparent 64%)}
h1,h2{font-family:var(--disp);font-weight:330;letter-spacing:-.018em;line-height:1.1;margin:0}
h3,h4{font-family:var(--disp);font-weight:600;letter-spacing:-.014em;line-height:1.14;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:#7C5CFC;color:#fff}

.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
@media(max-width:860px){.wrap{padding:0 28px}}
@media(max-width:620px){.wrap{padding:0 20px}}

.seal{display:none}

/* Reveal rhythm: rise, settle, unblur, staggered per group by JS.
   Opt-in (html.rv), reduced-motion safe, nothing hidden without JS. */
@media (prefers-reduced-motion: no-preference){
  html.rv .reveal{opacity:0;transform:translateY(22px);filter:blur(4px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .55s ease}
  html.rv .reveal.in{opacity:1;transform:none;filter:none}
  main{animation:pageIn .5s var(--ease) both}
  @keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* ── THE ROAD ──────────────────────────────────────────────────────
   The one signature gesture: the swoosh from the mark, drawn as a
   hairline across the hero. Stroke lengths are set inline on the
   path; .in starts the draw. */
.road{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.road path{stroke:var(--steel);stroke-width:2;fill:none;opacity:.9}
@media (prefers-reduced-motion: no-preference){
  .road path{stroke-dasharray:var(--len,2400);stroke-dashoffset:var(--len,2400);transition:stroke-dashoffset 2.4s cubic-bezier(.6,.05,.2,1) .3s}
  .road.in path{stroke-dashoffset:0}
}

/* ── NAV MID + VSTACK ──────────────────────────────────────────────
   The reference's remaining anatomy: a centered links pill in the nav
   (injected by app.js, desktop only) and the floating product-chip
   stack it uses to narrate features. */
.navmid{display:none}
@media(min-width:941px){
  .navmid{display:flex;align-items:center;gap:4px;position:absolute;left:50%;transform:translateX(-50%);background:rgba(22,16,40,.6);border:1px solid var(--rule);border-radius:var(--rp);padding:6px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .navmid a{color:var(--tx-d2);text-decoration:none;font-size:14px;font-family:var(--disp);font-weight:500;padding:9px 18px;border-radius:var(--rp);transition:background .15s,color .15s}
  .navmid a.on{color:var(--tx);background:rgba(242,240,250,.09)}
  .navmid a:hover{color:var(--tx);background:rgba(242,240,250,.07)}
  .nav .wrap{position:relative}
  .navlinks .nav-secondary{display:none}
}

.vlabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-d3);margin:0 0 14px}
.vstack{display:grid;gap:0;justify-items:start;align-content:center}
.vchip{display:flex;align-items:center;gap:13px;background:linear-gradient(180deg,#1B1536,#140F28);border:1px solid var(--rule-2);border-radius:14px;padding:13px 18px 13px 13px;box-shadow:0 18px 50px rgba(5,3,12,.5)}
.vchip + .vchip{margin-top:-6px}
.vchip:nth-child(2){margin-left:34px}
.vchip:nth-child(3){margin-left:10px}
.vchip:nth-child(4){margin-left:44px}
.vchip .ic{width:38px;height:38px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(124,92,252,.16);border:1px solid rgba(167,139,255,.3);color:var(--brass-2);font-family:var(--mono);font-size:13px}
.vchip .tt{font-size:11.5px;color:var(--tx-d3);display:block;margin-bottom:2px}
.vchip .tv{font-family:var(--disp);font-weight:600;font-size:14.5px;color:var(--tx);display:block}
.vchip .ok{margin-left:14px;color:#7BD88F;font-size:15px}
@media(max-width:620px){.vchip:nth-child(n){margin-left:0}}

/* ── CHIP ──────────────────────────────────────────────────────────
   The pill label that opens every section, as the reference does it. */
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:500;font-size:13.5px;letter-spacing:.01em;color:var(--brass-2);background:rgba(124,92,252,.12);border:1px solid rgba(167,139,255,.32);border-radius:var(--rp);padding:8px 18px;margin-bottom:22px}
.panel .chip,.card .chip{color:var(--steel);background:var(--brass-tint);border-color:rgba(104,71,232,.3)}

/* ── LABELS ────────────────────────────────────────────────────────── */
.shead{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:18px;border-top:1px solid var(--rule-2);padding-top:14px;margin-bottom:40px}
.shead .idx{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--lk4);font-variant-numeric:tabular-nums}
.shead .name{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lk3)}
.darksec .shead,.ctaband .shead{border-top-color:var(--rule-d)}
.darksec .shead .idx,.ctaband .shead .idx{color:var(--tx-d4)}
.darksec .shead .name,.ctaband .shead .name{color:var(--tx-d3)}

.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lk3);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--steel);flex:none}
.darksec .eyebrow{color:var(--tx-d3)}
.darksec.partner .eyebrow{color:var(--brass-2)}

.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lk3)}

/* ── CONTROLS ──────────────────────────────────────────────────────
   Understated: small caps Inter, square, solid navy or hairline. No
   lift, no sheen, no pull. The restraint is the point. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:0;padding:14px 26px;border-radius:var(--rp);cursor:pointer;border:1px solid transparent;text-decoration:none;white-space:nowrap;transition:background .18s,color .18s,border-color .18s,box-shadow .18s}
.btn-navy,.btn-brass{background:linear-gradient(180deg,#8B6CFF,#6E4FF0);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 10px 28px rgba(124,92,252,.35)}
.btn-navy:hover,.btn-brass:hover{background:linear-gradient(180deg,#9A7EFF,#7C5CFC)}
@media (prefers-reduced-motion: no-preference){
  .btn-navy,.btn-brass{animation:btnbreathe 5s ease-in-out infinite}
  @keyframes btnbreathe{0%,100%{box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 10px 28px rgba(124,92,252,.35)}50%{box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 10px 44px rgba(124,92,252,.6)}}
}
.btn-light,.btn-bone{background:#F2F0FA;color:#17141F;box-shadow:0 0 26px rgba(167,139,255,.45),0 8px 24px rgba(5,3,12,.4)}
.btn-light:hover,.btn-bone:hover{background:#fff;box-shadow:0 0 44px rgba(167,139,255,.7),0 8px 24px rgba(5,3,12,.4)}
@media (prefers-reduced-motion: no-preference){
  .btn-light,.btn-bone{animation:bonebreathe 5s ease-in-out infinite}
  @keyframes bonebreathe{0%,100%{box-shadow:0 0 22px rgba(167,139,255,.4),0 8px 24px rgba(5,3,12,.4)}50%{box-shadow:0 0 42px rgba(167,139,255,.65),0 8px 24px rgba(5,3,12,.4)}}
}
.btn-dark{background:var(--ink-3);color:var(--tx);border-color:var(--rule)}.btn-dark:hover{border-color:var(--rule-2)}
.btn-line,.btn-glass,.btn-ghost{background:rgba(242,240,250,.04);color:var(--tx);border-color:var(--rule-2)}
.btn-line:hover,.btn-glass:hover,.btn-ghost:hover{border-color:rgba(242,240,250,.45);background:rgba(242,240,250,.08)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.panel .btn-line,.card .btn-line,.formcard .btn-line,.doc .btn-line{background:transparent;color:var(--lk);border-color:var(--rule-2)}

.textlink{font-size:14.5px;color:var(--lk2);text-decoration:none;border-bottom:1px solid var(--rule-2);padding-bottom:2px;transition:color .18s,border-color .18s}
.textlink:hover{color:var(--lk);border-color:var(--steel)}
.darksec .textlink{color:var(--tx-d2);border-color:var(--rule-d)}
.darksec .textlink:hover{color:var(--tx);border-color:var(--brass-2)}

/* ── NAV ───────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:transparent;transition:background .25s}
.nav.scrolled{background:rgba(10,7,20,.74);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.navlinks{display:flex;align-items:center;gap:12px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--tx);white-space:nowrap}
.brand img.lg-h{height:30px;width:auto;display:block}
.brand img.lg-m{display:none;height:52px;width:auto}
.brand .wordmark{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.015em}
.navlinks{display:flex;align-items:center;gap:26px}
.navlinks a{color:var(--tx-d2);text-decoration:none;font-size:14.5px}
.navlinks a:hover{color:var(--tx)}
.navlinks .btn{padding:12px 20px;font-size:11.5px;letter-spacing:.12em}
.navlinks a.btn-bone,.navlinks a.btn-light{color:#17141F}
@media(max-width:560px){
  .navlinks .nav-secondary{display:none}
  .brand .wordmark{display:none}
  .navlinks{gap:10px}
  .navlinks .btn{padding:11px 13px;font-size:10px;letter-spacing:.08em}
  .menu-btn{padding:10px 12px;font-size:10px}
}

.menu-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:600;font-size:13.5px;letter-spacing:0;color:var(--tx);background:rgba(242,240,250,.05);border:1px solid var(--rule-2);padding:11px 18px;border-radius:var(--rp);cursor:pointer;transition:border-color .16s,background .16s}
.menu-btn:hover{background:rgba(239,243,250,.09)}
.menu-btn:hover{border-color:var(--tx)}
.menu-btn .bars{display:inline-flex;flex-direction:column;gap:4px;width:18px}
.menu-btn .bars span{height:1.5px;background:var(--tx);transition:transform .25s var(--ease),opacity .2s}
.menu-btn[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ── MENU OVERLAY ──────────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;z-index:120;background:var(--ink);color:var(--tx);overflow:auto;display:grid;align-content:space-between;gap:30px;padding:110px 40px 44px;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.overlay.open{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.overlay{transition:none}}
.overlay .cols{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;max-width:1280px;margin:0 auto;width:100%}
.overlay nav{display:grid;gap:8px;justify-items:start}
.overlay nav a{font-family:var(--disp);font-weight:300;font-size:clamp(30px,4.4vw,54px);letter-spacing:-.016em;color:var(--tx);text-decoration:none;line-height:1.16;transition:color .15s}
.overlay nav a:hover{color:var(--brass-2)}
.overlay nav a .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--tx-d4);vertical-align:super;margin-right:12px}
.overlay .side{display:grid;gap:26px;align-content:start}
.overlay .side .h{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-d4);margin-bottom:8px}
.overlay .side p{font-size:15px;color:var(--tx-d2);line-height:1.6}
.overlay .side a{color:var(--tx)}
.overlay .om{height:132px;width:auto;opacity:.95;justify-self:start}
.overlay .oclose{position:absolute;top:26px;right:30px;width:48px;height:48px;border-radius:50%;border:1px solid var(--rule-2);background:rgba(242,240,250,.05);color:var(--tx);cursor:pointer;transition:border-color .16s,background .16s,transform .25s var(--ease)}
.overlay .oclose:hover{border-color:var(--tx);background:rgba(242,240,250,.1)}
.overlay .oclose::before,.overlay .oclose::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:1.6px;background:currentColor;border-radius:2px}
.overlay .oclose::before{transform:translate(-50%,-50%) rotate(45deg)}
.overlay .oclose::after{transform:translate(-50%,-50%) rotate(-45deg)}
@media(max-width:620px){.overlay .oclose{top:16px;right:16px}}
.overlay .obottom{max-width:1280px;margin:0 auto;width:100%;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-d4)}
@media(max-width:760px){.overlay{padding:96px 24px 32px}.overlay .cols{grid-template-columns:1fr}}
body.menu-open{overflow:hidden}

/* ── THE SPLIT ─────────────────────────────────────────────────────
   The original front door, restored: two audiences, two doors, no
   interstitial. Paper for the person who was just hit, navy for the
   buyer. Asymmetric at 56/44 because the hurt person on a phone is the
   one the page has to work hardest for. */
.split{display:grid;grid-template-columns:56fr 44fr;gap:18px;padding:26px 20px 8px}
@media (pointer:fine) and (prefers-reduced-motion: no-preference){
  .split{transition:grid-template-columns .6s var(--ease)}
  /* The victim door already holds the larger share at rest; only the
     attorney door grows toward parity on hover. */
  .split:has(.door.attorney:hover){grid-template-columns:50fr 50fr}
}

.door{padding:92px 0 96px;position:relative;display:flex;align-items:center;border-radius:26px;overflow:hidden;border:1px solid var(--rule);box-shadow:0 30px 90px rgba(4,2,10,.5),inset 0 1px 0 rgba(242,240,250,.08);transition:border-color .3s}
.door:hover{border-color:rgba(167,139,255,.45)}
@media (prefers-reduced-motion: no-preference){
  .door{animation:doorIn .8s var(--ease) both}
  .door.attorney{animation-delay:.14s}
  @keyframes doorIn{from{opacity:0;transform:translateY(20px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
}
.door .inner{max-width:650px;margin-left:auto;width:100%;padding:0 56px 0 40px;position:relative}
.door.attorney .inner{margin-left:0;margin-right:auto;max-width:640px;padding:0 40px 0 56px}
@media(max-width:1180px){.door .inner{padding-right:40px}.door.attorney .inner{padding-left:40px}}
@media(max-width:940px){.door{padding:64px 0 68px}.door .inner,.door.attorney .inner{margin:0;max-width:none;padding:0 28px}}
@media(max-width:620px){.door .inner,.door.attorney .inner{padding:0 20px}}
.door.victim{background:var(--lt);overflow:hidden}
.door.attorney{background:var(--ink);color:var(--tx)}

.door.victim .road{opacity:.55}
.door h1{font-size:clamp(42px,5vw,70px);margin:20px 0 22px;max-width:15ch;text-wrap:balance}
.door.attorney h2{color:var(--tx);font-size:clamp(28px,3.3vw,40px);margin:20px 0 20px;max-width:17ch;letter-spacing:-.014em;line-height:1.08;text-wrap:balance}
.door p{font-size:17px;color:var(--lk2);line-height:1.68;max-width:47ch}
.door .d-mobile{display:none}
.door.attorney p{color:var(--tx-d2);font-size:15.5px;max-width:50ch}
.door .actions{display:flex;align-items:center;gap:24px;margin-top:34px;flex-wrap:wrap}
.door.attorney .eyebrow{color:var(--brass-2)}
.door.attorney .eyebrow::before{background:var(--brass-2)}
.door.attorney :focus-visible{outline-color:var(--focus-on-dark)}
.door.attorney .btn-navy{background:var(--steel)}
.door.attorney .btn-navy:hover{background:var(--brass-press)}

/* ── THE PHOTO DOOR ────────────────────────────────────────────────
   The Carpmaels register for the person who was just hit: a navy
   duotone photograph, dimmed under a directional scrim, one quiet
   line in light-weight Fraunces, a ghost secondary. The duotone is
   baked into the asset (tools-duotone.py ramp), so the brand world
   holds whatever the source photo was. */
.door.photo{background:var(--ink);color:var(--tx)}
.door.photo::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center 68%}
.door.victim.photo::before{background-image:url("../img/photos/door-road.webp")}
.door.attorney.photo::before{background-image:url("../img/photos/door-road-alt.webp");background-position:center 40%}
@media(max-width:940px){
  .door.victim.photo::before{background-image:url("../img/photos/door-road-m.webp")}
  .door.attorney.photo::before{background-image:url("../img/photos/door-road-alt-m.webp")}
}
.door.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,7,20,.88) 0%,rgba(10,7,20,.64) 52%,rgba(10,7,20,.38) 100%)}
@media(max-width:940px){.door.photo::after{background:linear-gradient(180deg,rgba(10,7,20,.86) 0%,rgba(10,7,20,.58) 100%)}}
.door.photo .inner{position:relative;z-index:1}
.door .chip{margin-bottom:4px;background:rgba(10,7,20,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.door.photo h1,.door.photo h2{font-weight:300;letter-spacing:-.016em;background:linear-gradient(180deg,#FFFFFF 18%,#C7CBE6 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
.door.photo::before{transition:filter .5s ease,transform 6s var(--ease)}
.door.photo:hover::before{filter:brightness(1.18) saturate(1.05)}
.door.attorney.photo h2{font-size:clamp(42px,5vw,70px);max-width:13ch;line-height:1.1;margin:20px 0 22px;text-wrap:balance}
.door.photo p{color:rgba(242,240,250,.88)}
.door.photo .textlink{color:var(--tx-d2);border-color:var(--rule-d)}
.door.photo .textlink:hover{color:var(--tx);border-color:var(--tx)}
.door.photo :focus-visible{outline-color:var(--focus-on-dark)}

/* ── HERO ──────────────────────────────────────────────────────────── */
.hero{position:relative;padding:118px 0 96px;overflow:hidden}
.hero h1{font-size:clamp(46px,7vw,104px);max-width:14ch;margin:22px 0 0;text-wrap:balance}
.hero h1 .accent{color:var(--navy);font-style:italic;font-variation-settings:"opsz" 110}
.hero .lede{margin-top:28px}
.hero .actions{display:flex;align-items:center;gap:26px;margin-top:38px;flex-wrap:wrap}
.hero .wrap{position:relative}
@media(max-width:620px){.hero{padding:72px 0 64px}}

.proofline{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--lk4);margin-top:44px;padding-top:18px;border-top:1px solid var(--rule);display:flex;gap:12px;flex-wrap:wrap}
.proofline span{white-space:nowrap}
.proofline span + span::before{content:"/";margin-right:12px;color:var(--rule-2)}

/* ── HERO PANEL ────────────────────────────────────────────────────
   The door treatment for single-audience heroes: one floating glass
   panel, duotone photo, crown light, gradient-sheen display type. */
.heropanel{position:relative;margin:26px 20px 8px;padding:86px 0 90px;border-radius:26px;overflow:hidden;border:1px solid var(--rule);box-shadow:0 30px 90px rgba(4,2,10,.5),inset 0 1px 0 rgba(242,240,250,.08);color:var(--tx);transition:border-color .3s}
.heropanel:hover{border-color:rgba(167,139,255,.45)}
.heropanel .wrap{position:relative;z-index:1}
.heropanel .lede{color:var(--tx-d2)}
.heropanel.photo::before{content:"";position:absolute;inset:0;background-image:url("../img/photos/door-road-alt.webp");background-size:cover;background-position:var(--hp-pos,center 34%);transition:filter .5s ease}
@media(max-width:940px){.heropanel.photo::before{background-image:url("../img/photos/door-road-alt-m.webp")}}
.heropanel.photo:hover::before{filter:brightness(1.15) saturate(1.05)}
.heropanel.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,7,20,.86) 0%,rgba(10,7,20,.6) 60%,rgba(10,7,20,.72) 100%)}
.heropanel.photo h1,.heropanel.photo h2{background:linear-gradient(180deg,#FFFFFF 18%,#C7CBE6 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
.heropanel .dlight{position:absolute;border-radius:50%;pointer-events:none;width:560px;height:320px;right:12%;top:-180px;background:radial-gradient(closest-side,rgba(124,92,252,.5),transparent 72%);filter:blur(36px)}
@media (prefers-reduced-motion: no-preference){
  .heropanel{animation:doorIn .8s var(--ease) both}
  .heropanel .dlight{animation:dlight 14s ease-in-out infinite}
}
@media(max-width:620px){.heropanel{margin:14px 10px 4px;padding:60px 0 64px;border-radius:20px}}
.heropanel.slim{padding:62px 0 66px}
@media(max-width:620px){.heropanel.slim{padding:46px 0 50px}}

/* Door lights and floaters. */
.door .dlight{position:absolute;border-radius:50%;pointer-events:none}
.door.victim .dlight{width:460px;height:460px;right:-140px;bottom:-200px;background:radial-gradient(circle,rgba(255,255,255,.5) 0%,rgba(173,205,255,.3) 18%,rgba(124,92,252,.26) 45%,transparent 70%);filter:blur(30px);opacity:.75}
.door.attorney .dlight{width:520px;height:300px;left:18%;top:-170px;background:radial-gradient(closest-side,rgba(124,92,252,.5),transparent 72%);filter:blur(36px)}
@media (prefers-reduced-motion: no-preference){
  .door .dlight{animation:dlight 14s ease-in-out infinite}
  @keyframes dlight{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-26px,20px) scale(1.1)}}
}

.doorproof{display:flex;gap:9px;flex-wrap:wrap;margin-top:30px}
.doorproof i{font-style:normal;font-family:var(--disp);font-weight:500;font-size:12.5px;color:var(--tx-d2);background:rgba(16,11,30,.5);border:1px solid var(--rule);border-radius:var(--rp);padding:8px 15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}


/* ── THE ASK ───────────────────────────────────────────────────────
   The first intake question as a quiet instrument on paper. */
.askband{background:transparent;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.askband .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;padding-top:56px;padding-bottom:56px}
.askband .q{font-family:var(--disp);font-weight:300;font-size:clamp(24px,2.8vw,34px);letter-spacing:-.016em;line-height:1.18;color:var(--tx)}
.askband .q .k{display:block;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-d3);margin-bottom:12px}
.askband .opts3{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1180px){.askband .opts3{grid-template-columns:1fr 1fr}}
.askband .opts3 > a{display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--disp);font-weight:600;font-size:15px;text-decoration:none;color:var(--tx);border:1px solid var(--rule-2);background:rgba(22,16,40,.55);padding:20px 12px;border-radius:14px;transition:background .16s,border-color .16s,color .16s;line-height:1.3}
.askband .opts3 > a:hover{background:linear-gradient(180deg,#8B6CFF,#6E4FF0);border-color:transparent;color:#fff}
.askband .skip{grid-column:1/-1;font-size:13.5px;color:var(--lk3);margin-top:4px}
.askband .skip a{color:var(--tx-d2);text-decoration:underline;text-underline-offset:3px}
@media(max-width:940px){.askband .wrap{grid-template-columns:1fr;gap:24px}}
@media(max-width:620px){.askband .opts3{grid-template-columns:1fr!important}}

/* ── DOORS ─────────────────────────────────────────────────────────── */
.doors{list-style:none;margin:0;padding:0}
.doors a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;text-decoration:none;color:var(--lk);border-top:1px solid var(--rule);padding:46px 0;transition:background .2s}
.doors li:last-child a{border-bottom:1px solid var(--rule)}
.doors .big{font-family:var(--disp);font-weight:300;font-size:clamp(26px,3.6vw,46px);letter-spacing:-.016em;line-height:1.1}
.doors .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lk3);display:block;margin-bottom:12px}
.doors .arr{font-family:var(--disp);font-weight:200;font-size:clamp(22px,3vw,38px);color:var(--lk4);transition:color .2s,transform .3s var(--ease)}
.doors a:hover{background:var(--lt2)}
.doors a:hover .arr{color:var(--steel);transform:translateX(8px)}
.doors a:hover .big{color:var(--navy)}
@media(prefers-reduced-motion:reduce){.doors a:hover .arr{transform:none}}

/* ── STATS ─────────────────────────────────────────────────────────── */
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.stats li{padding:30px 28px 32px;min-width:0;background:linear-gradient(180deg,rgba(36,27,69,.42),rgba(22,16,40,.6));border:1px solid var(--rule);border-radius:var(--r)}
.stats .n{font-family:var(--disp);font-weight:220;font-size:clamp(52px,5.6vw,84px);letter-spacing:-.02em;line-height:1;color:var(--tx);font-variant-numeric:tabular-nums}
.stats .n .u{color:var(--brass-2);font-weight:260}
.stats .l{display:block;margin-top:12px;font-size:14px;color:var(--lk3);line-height:1.5}
@media(max-width:620px){.stats li{padding:24px 20px 26px}}

/* ── SECTIONS ──────────────────────────────────────────────────────── */
.sec{padding:112px 0}
.sec.tight{padding:80px 0}
.sec.alt{position:relative;overflow:hidden;margin:0 18px;border-radius:30px;border:1px solid var(--rule);background:
  radial-gradient(760px 420px at 50% -8%, rgba(124,92,252,.18), transparent 68%),
  linear-gradient(180deg,rgba(36,27,69,.42),rgba(14,10,28,.55))}
.sec.alt > .wrap{position:relative;z-index:1}
.sec.alt::after{content:"";position:absolute;right:-220px;top:24%;width:640px;height:640px;border-radius:50%;pointer-events:none;background:
  radial-gradient(circle,rgba(255,255,255,.75) 0%,rgba(173,205,255,.38) 14%,rgba(124,92,252,.30) 38%,rgba(236,72,153,.12) 58%,transparent 74%);filter:blur(26px);opacity:.8}
@media (prefers-reduced-motion: no-preference){
  .sec.alt::after{animation:edgelight 16s ease-in-out infinite}
  @keyframes edgelight{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,46px) scale(1.12)}}
}
@media(max-width:620px){.sec.alt{margin:0 8px;border-radius:20px}.sec.alt::after{right:-320px}}
.darksec{background:transparent;color:var(--tx);padding:112px 0}
.darksec h1,.darksec h2,.darksec h3{color:var(--tx)}
.sec h2,.darksec h2{font-size:clamp(34px,4.4vw,58px);margin:0 0 18px;text-wrap:balance}
.lede{font-size:18px;color:var(--lk2);max-width:58ch;line-height:1.7}
.darksec .lede{color:var(--tx-d2)}

.cols2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:start}
@media(max-width:940px){.cols2{grid-template-columns:1fr;gap:40px}}
.cols2.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}

/* ── RULE ROWS ─────────────────────────────────────────────────────── */
.rows{list-style:none;margin:0;padding:0;counter-reset:row}
.rows > li{counter-increment:row;display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 24px;padding:28px 0;border-top:1px solid var(--rule);align-items:start}
.rows > li:last-child{border-bottom:1px solid var(--rule)}
.rows > li::before{content:counter(row,decimal-leading-zero);grid-column:1;grid-row:1;font-family:var(--mono);font-size:11.5px;color:var(--steel);letter-spacing:.06em;padding-top:5px;font-variant-numeric:tabular-nums}
.rows > li > *{grid-column:2}
.rows h3{font-size:20px;margin:0 0 8px}
.rows p{font-size:15.5px;color:var(--lk3);line-height:1.7;max-width:62ch}
.rows > li:not(:has(h3)){padding:14px 0}
.rows > li > p:only-child{font-size:15.5px;color:var(--lk2)}
.darksec .rows > li{border-top-color:var(--rule-d)}
.darksec .rows > li:last-child{border-bottom-color:var(--rule-d)}
.darksec .rows > li::before{color:var(--brass-2)}
.darksec .rows p{color:var(--tx-d2)}
@media(max-width:620px){.rows > li{grid-template-columns:36px minmax(0,1fr);gap:0 14px;padding:22px 0}.rows h3{font-size:18px}}
.rows.plain{counter-reset:none}
.rows.plain > li{grid-template-columns:minmax(0,1fr)}
.rows.plain > li::before{content:none}
.rows.plain > li > *{grid-column:1}

/* ── THE TIMELINE ──────────────────────────────────────────────────── */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:118px;top:0;bottom:0;width:1px;background:var(--rule-2)}
.tl > li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 48px;padding:32px 0;position:relative}
.tl .t{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--lk3);text-align:right;padding-top:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tl > li::after{content:"";position:absolute;left:114px;top:41px;width:9px;height:9px;border-radius:50%;background:var(--lt);border:2px solid var(--lk3)}
.tl h3{font-size:21px;margin:0 0 8px}
.tl p{font-size:15.5px;color:var(--lk3);line-height:1.7;max-width:60ch}
.tl .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);display:block;margin-bottom:7px}
.tl > li.terminal .t{color:var(--signal);font-weight:700}
.tl > li.terminal::after{background:var(--signal);border-color:var(--signal)}
.tl > li.terminal h3{color:var(--signal)}
.tl > li.terminal p{color:var(--lk2)}
@media(max-width:680px){
  .tl::before{left:8px}
  .tl > li{grid-template-columns:minmax(0,1fr);gap:0;padding-left:34px}
  .tl .t{text-align:left;padding-top:0;margin-bottom:6px}
  .tl > li::after{left:4px;top:6px}
}

/* ── CATEGORY REGISTER ─────────────────────────────────────────────── */
.lead-cat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;border-top:2px solid var(--lk);padding:30px 0 34px;margin-bottom:0}
.lead-cat .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-bottom:14px;display:block}
.lead-cat h3{font-family:var(--disp);font-weight:300;font-size:clamp(30px,3.4vw,42px);margin:0 0 14px;letter-spacing:-.016em}
.lead-cat p{font-size:16.5px;color:var(--lk2);line-height:1.7;max-width:54ch}
@media(max-width:860px){.lead-cat{grid-template-columns:1fr;gap:22px;align-items:start}}

.cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:0}
.cats > li,.cat{border-top:1px solid var(--rule);padding:24px 28px 26px 0;min-width:0}
.cats .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--lk4);display:block;margin-bottom:10px;font-variant-numeric:tabular-nums}
.cat h3{font-size:17px;margin:0 0 7px}
.cat p{font-size:14.5px;color:var(--lk3);line-height:1.62;margin:0;max-width:34ch}
.darksec .cats > li,.darksec .cat{border-top-color:var(--rule-d)}
.darksec .cat h3{color:var(--tx)}
.darksec .cat p{color:var(--tx-d2)}
.darksec .cats .k{color:var(--tx-d4)}

/* ── PULL STATEMENT ────────────────────────────────────────────────── */
.pull{font-family:var(--disp);font-weight:280;font-size:clamp(25px,3vw,36px);line-height:1.24;letter-spacing:-.016em;color:var(--tx);max-width:22ch;border-left:2px solid var(--steel-2);padding-left:28px}

@media(max-width:620px){.pull{padding-left:18px}}

/* ── CARD + PANEL ──────────────────────────────────────────────────── */
.card{background:var(--paper);border:1px solid #E6E3DA;border-radius:var(--r);padding:28px 30px}
.card.solo{margin-left:auto;margin-right:auto}
.sec.alt .card{background:var(--paper)}
.panel{background:var(--paper);border:1px solid #E6E3DA;border-radius:22px;padding:44px 44px 48px;box-shadow:0 30px 80px rgba(2,6,14,.45)}
.panel h2,.panel h3{color:var(--lk)}
.panel .lede{color:var(--lk2)}
@media(max-width:620px){.panel{padding:26px 20px 30px}}

/* ── LONG FORM DOCUMENTS ───────────────────────────────────────────── */
.doc{max-width:760px;background:#fff;border:1px solid #E6E3DA;border-radius:22px;padding:52px 56px 56px;box-shadow:0 30px 80px rgba(2,6,14,.45)}
@media(max-width:620px){.doc{padding:28px 22px 32px;border-radius:16px}}
.doc h1{font-size:clamp(36px,4.6vw,54px);margin:0 0 12px}
.doc h2{font-weight:450;font-size:24px;margin:46px 0 12px;letter-spacing:-.014em;padding-top:16px;border-top:1px solid var(--rule-2)}
.doc h3{font-size:17.5px;margin:28px 0 8px}
.doc p{font-size:16.5px;line-height:1.78;color:var(--lk2);margin:0 0 15px}
.doc p a{color:var(--navy);text-underline-offset:3px}
.doc strong{color:var(--lk);font-weight:600}
.doc ul{margin:0 0 17px;padding-left:20px;display:grid;gap:9px;font-size:16.5px;line-height:1.7;color:var(--lk2)}
.updated{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--lk4);margin:0 0 32px}
.callout{background:var(--lt2);border-left:2px solid var(--navy);padding:20px 24px;margin:0 0 36px}
.callout p{margin:0;color:var(--lk)}

/* ── NEEDS + DERIVED ───────────────────────────────────────────────── */
.needs{display:grid;gap:0}
.need{display:flex;align-items:flex-start;gap:14px;padding:15px 14px;border:1px solid transparent;border-top-color:var(--rule);cursor:pointer;transition:background .15s,border-color .15s}
.need:last-of-type{border-bottom-color:var(--rule)}
.need:hover{background:var(--lt2)}
.need.on{border-color:var(--navy);background:var(--tint)}
.need input{margin-top:3px;accent-color:var(--navy);flex:none}
.need .t{font-size:15.5px;font-weight:600;display:block;margin-bottom:2px}
.need .d{font-size:13.5px;color:var(--lk3);line-height:1.52;display:block}
.need.urgent .t::after{content:"Time critical";margin-left:9px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);background:var(--warn-bg);padding:3px 8px;vertical-align:1px}

.derived{background:var(--lt2);border-left:2px solid var(--navy);padding:17px 20px;margin:0 0 22px}
.derived h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:400;color:var(--lk3);margin:0 0 10px}
.derived ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:15px;color:var(--lk);line-height:1.55}
.derived .none{margin:0;font-size:14.5px;color:var(--lk3)}

/* ── TIERS ─────────────────────────────────────────────────────────── */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(222px,1fr));gap:0}
.tier{border-top:1px solid var(--rule);border-left:1px solid var(--rule);padding:26px 24px 30px;display:flex;flex-direction:column;min-width:0}
.tier:first-child{border-left:0;padding-left:0}
.tier.feat{border-top:2px solid var(--navy)}
.tier .badge{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:12px;align-self:flex-start}
.tier .name{font-family:var(--disp);font-weight:400;font-size:23px;letter-spacing:-.014em;margin:0 0 6px}
.tier .for{font-size:13px;color:var(--lk3);margin:0 0 14px;line-height:1.5;min-height:36px}
.tier .price{font-family:var(--disp);margin:0 0 16px;color:var(--lk)}
.tier .price .n{font-weight:250;font-size:34px;letter-spacing:-.02em}
.tier .price .per{font-size:13px;color:var(--lk3);margin-left:4px}
.tier .price .note{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--lk4);margin-top:6px}
.tier ul{margin:0;padding-left:0;list-style:none;display:grid;gap:9px;font-size:13.5px;color:var(--lk2);line-height:1.5}
.tier ul li{padding-left:15px;position:relative}
.tier ul li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:1px;background:var(--steel)}
@media(max-width:620px){.tier{border-left:0;padding-left:0}.tier .for{min-height:0}}

/* ── TABLE ─────────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;margin:26px 0 10px}
table.rates{width:100%;border-collapse:collapse;font-size:14.5px;min-width:700px}
table.rates th,table.rates td{padding:13px 10px;border-bottom:1px solid var(--rule)}
table.rates thead th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:400;color:var(--lk3);border-bottom:1px solid var(--lk);text-align:right;padding-bottom:10px}
table.rates thead th:first-child,table.rates tbody th{text-align:left}
table.rates tbody th{font-weight:400;color:var(--lk)}
table.rates tbody tr.lead th{font-weight:600}
table.rates tbody tr.lead{background:var(--brass-tint)}
table.rates td{text-align:right;font-variant-numeric:tabular-nums}
table.rates td.key{font-weight:600}
table.rates td.na{color:var(--lk4)}
caption.note{caption-side:bottom;text-align:left;font-size:12.5px;color:var(--lk3);padding-top:12px;line-height:1.6}

/* ── FORM ──────────────────────────────────────────────────────────── */
.formcard{border:1px solid var(--rule);border-top:2px solid var(--navy);border-radius:0;background:var(--paper);padding:34px 32px 36px}
.formcard legend{font-family:var(--disp);font-weight:500;font-size:25px;letter-spacing:-.016em;padding:0;margin:0 0 22px}
.formcard fieldset{border:0;padding:0;margin:0}
.field{margin-bottom:22px}
.field > label,.grouplabel{display:block;font-size:14.5px;font-weight:600;margin-bottom:8px}
.hint{font-size:13.5px;color:var(--lk3);line-height:1.6;margin:0 0 8px}
input[type=text],input[type=tel],input[type=email],input[type=date],select{width:100%;font:inherit;font-size:16px;padding:13px 14px;border-radius:var(--r);border:1px solid var(--rule-2);background:var(--paper);color:var(--lk)}
input::placeholder{color:var(--lk4)}
.opts{display:grid;gap:0}
.opt{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid transparent;border-top-color:var(--rule);cursor:pointer;font-size:15.5px;transition:background .15s,border-color .15s}
.opt:last-of-type{border-bottom-color:var(--rule)}
.opt:hover{background:var(--lt2)}
.opt.on{border-color:var(--navy);background:var(--tint)}
.opt input{accent-color:var(--navy);flex:none}
.err{color:var(--warn);font-size:13.5px;margin:8px 0 0}

.progress{margin-bottom:24px}
.progress .meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--lk3);margin-bottom:9px}
.progress .track{height:2px;background:var(--rule)}
.progress .bar{height:100%;background:var(--navy);transition:width .25s var(--ease)}

.consent{border:1px solid var(--rule-2);border-left:2px solid var(--lk);background:var(--lt2);border-radius:0;padding:19px 21px}
.consent.bad{border-color:var(--warn);border-left-color:var(--warn);background:var(--warn-bg)}
.consent label{display:flex;gap:13px;align-items:flex-start;cursor:pointer}
.consent input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--navy)}
.consent .copy{font-size:15.5px;line-height:1.62;color:var(--lk)}
.consent .meta{margin-top:14px;padding-left:31px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.consent .meta a{color:var(--navy)}
.consent .meta .ver{color:var(--lk4)}
.consent .err{padding-left:31px}

.formnav{display:flex;gap:12px;margin-top:26px;align-items:center}

/* ── INSTRUMENTS: RECORD + BOARD ───────────────────────────────────
   The two product artifacts stay dark. On paper they read as objects,
   which is the point: the thing we sell, photographed. */
.record{border-radius:16px;background:linear-gradient(180deg,#191331,#110C22);border:1px solid var(--rule-2);font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--tx-d2);margin-top:34px;box-shadow:0 24px 60px rgba(19,26,40,.18)}
.record .rhead{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--rule-d);color:var(--tx-d3);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.record .rhead .live{display:inline-flex;align-items:center;gap:7px;color:var(--brass-2)}
.record .rhead .live::before{content:"";width:5px;height:5px;background:var(--brass-2);border-radius:50%;flex:none}
@media (prefers-reduced-motion: no-preference){
  .record .rhead .live::before{animation:livedot 2.2s ease-in-out infinite}
  @keyframes livedot{0%,100%{box-shadow:0 0 0 0 rgba(167,139,255,.5)}50%{box-shadow:0 0 0 5px rgba(167,139,255,0)}}
}
.record dl{margin:0;padding:14px 16px 16px;display:grid;grid-template-columns:auto 1fr;gap:7px 18px}
.record dt{color:var(--tx-d4);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding-top:1px}
.record dd{margin:0;color:var(--tx);font-size:12.5px}
.record dd .hl{color:var(--brass-2)}
.record .rfoot{border-top:1px solid var(--rule-d);padding:10px 16px;color:var(--tx-d4);font-size:10.5px;letter-spacing:.05em;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(max-width:420px){.record dl{grid-template-columns:1fr;gap:3px 0}.record dt{padding-top:7px}}

.board{border-radius:16px;background:linear-gradient(180deg,#191331,#110C22);border:1px solid var(--rule-2);font-family:var(--mono);font-size:12px;color:var(--tx-d2);margin-top:32px;box-shadow:0 24px 60px rgba(19,26,40,.18)}
.board .bhead{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--rule-d);color:var(--tx-d3);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.board .bhead .live{color:var(--brass-2)}
.board .row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:3px 14px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--rule-d2);transition:background .5s ease}
.board .row:last-of-type{border-bottom:0}
.board .row.scan{background:rgba(124,92,252,.10)}
.board .what{grid-column:1;grid-row:1;color:var(--tx);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board .where{grid-column:1;grid-row:2;color:var(--tx-d3)}
.board .price{grid-column:2;grid-row:1/span 2;color:var(--tx);font-variant-numeric:tabular-nums;text-align:right;align-self:center}
.board .st{grid-column:3;grid-row:1/span 2;align-self:center;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--rule-d);color:var(--tx-d3);text-align:center}
.board .st.open{color:var(--brass-2);border-color:rgba(167,139,255,.4)}
.board .st.gone{color:var(--tx-d4)}
.board .bfoot{border-top:1px solid var(--rule-d);padding:10px 16px;color:var(--tx-d4);font-size:10.5px;letter-spacing:.05em;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ── THE CONSOLE ───────────────────────────────────────────────────
   The product as the proof object, the reference's dashboard move:
   the buyer console drawn in HTML inside a rounded frame. Specimen
   data, stamped as illustrative, same rule as the board. */
.console{background:linear-gradient(180deg,#191331,#110C22);border:1px solid var(--rule-2);border-radius:20px;box-shadow:0 0 120px rgba(124,92,252,.30),0 50px 120px rgba(2,6,14,.6),0 1px 0 rgba(242,240,250,.08) inset;overflow:hidden;font-family:var(--disp)}
.console .cbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 18px;border-bottom:1px solid var(--rule);font-size:12.5px;color:var(--tx-d3)}
.console .cbar .dot{display:inline-flex;gap:6px}
.console .cbar .dot i{width:9px;height:9px;border-radius:50%;background:var(--ink-4);display:block}
.console .cbar .crumb{font-weight:600;color:var(--tx-d2)}
.console .cbar .tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-2);border:1px solid rgba(167,139,255,.3);border-radius:var(--rp);padding:4px 10px}
.console .cbody{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0}
.console .cmain{padding:18px;border-right:1px solid var(--rule);min-width:0}
.console .cside{padding:18px;display:grid;gap:12px;align-content:start}
.console .board{margin:0;border:1px solid var(--rule);border-radius:12px;background:rgba(7,12,22,.5);box-shadow:none}
.console .stile{background:rgba(36,27,69,.4);border:1px solid var(--rule);border-radius:12px;padding:14px 16px}
.console .stile .sl{font-size:11.5px;color:var(--tx-d3);margin-bottom:6px}
.console .stile .sv{font-family:var(--disp);font-weight:260;font-size:30px;line-height:1;color:var(--tx)}
.console .stile .sv .u{color:var(--brass-2)}
.console .spark{width:100%;height:46px;margin-top:10px}
.console .spark path{fill:none;stroke:var(--brass-2);stroke-width:1.6}
.console .spark .area{fill:rgba(124,92,252,.18);stroke:none}
@media(max-width:860px){.console .cbody{grid-template-columns:1fr}.console .cmain{border-right:0;border-bottom:1px solid var(--rule)}}

/* ── ACCORDION ─────────────────────────────────────────────────────── */
.qa{display:grid;gap:0;margin:0;padding:0}
.qa details{border-top:1px solid var(--rule)}
.qa details:last-of-type{border-bottom:1px solid var(--rule)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:0 24px;align-items:baseline;padding:26px 0;font-family:var(--disp);font-weight:400;font-size:21px;letter-spacing:-.012em;color:var(--lk)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .n{font-family:var(--mono);font-size:11.5px;font-weight:400;color:var(--steel);letter-spacing:.06em}

.qa .body p{color:var(--lk2)}
.qa summary .arr{font-family:var(--mono);font-size:18px;font-weight:400;color:var(--lk4);transition:transform .25s var(--ease)}
.qa details[open] summary .arr{transform:rotate(45deg);color:var(--steel)}
.qa .body{padding:0 0 28px 76px;max-width:66ch}
.qa .body p{font-size:15.5px;line-height:1.72;color:var(--lk2)}
.qa summary:hover{color:var(--navy)}
@media(max-width:620px){.qa summary{grid-template-columns:36px minmax(0,1fr) auto;gap:0 14px;font-size:18.5px}.qa .body{padding-left:50px}}

/* ── CTA BAND + FOOTER ─────────────────────────────────────────────── */
.ctaband{padding:60px 0 90px}
.ctaband .wrap > *{position:relative}
.ctaband .inner-panel,.bigcta{position:relative;text-align:center;background:
  radial-gradient(640px 300px at 50% -10%, rgba(124,92,252,.25), transparent 70%),
  linear-gradient(180deg,rgba(36,27,69,.4),rgba(18,13,34,.65));
  border:1px solid var(--rule);border-radius:26px;padding:84px 40px 88px}
.ctaband h2{font-size:clamp(32px,4vw,54px);margin:0 0 16px;color:var(--tx)}
.ctaband p{color:var(--tx-d2);max-width:52ch;font-size:17px;margin:0 auto}
.ctaband .actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center}
.ctaband .shead{display:none}

.footwrap{background:transparent;padding:0}
footer{background:linear-gradient(180deg,rgba(36,27,69,.34),rgba(18,13,34,.7));color:var(--tx-d2);padding:64px 0 60px;font-size:14px;margin:0 20px 20px;border:1px solid var(--rule);border-radius:26px}
@media(max-width:620px){footer{margin:0 8px 8px}}
footer .cols{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;margin-bottom:38px}
footer nav{display:flex;flex-wrap:wrap;gap:46px}
footer nav div{display:grid;gap:11px;align-content:start}
footer nav .h{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-d4)}
footer a{color:var(--tx-d2);text-decoration:none}
footer a:hover{color:var(--tx)}
footer .brand{margin-bottom:14px}
footer .brand img.lg-h{height:34px;width:auto}
footer .tag{font-family:var(--disp);font-weight:300;font-size:16px;color:var(--tx-d2);margin:10px 0 14px}
footer .addr{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--tx-d4);line-height:1.7}
footer .legal{border-top:1px solid var(--rule-d2);padding-top:26px;display:grid;gap:12px;font-size:12.5px;color:var(--tx-d3);line-height:1.68;max-width:88ch}

/* retired in the platform register */
.bigmark{display:none;font-family:var(--disp);font-weight:300;letter-spacing:-.02em;line-height:.95;font-size:clamp(42px,9.8vw,158px);color:var(--tx);white-space:nowrap;overflow:hidden;margin:4px 0 52px;text-align:center}
.bigmark .b2{font-style:italic;color:var(--brass-2)}
html.rv .bigmark{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.rv .bigmark.in{opacity:1;transform:none}

/* ════════════════════════════════════════════════════════════════════
   PLATFORM MOTION LAYER
   The reference's /platform behaviours, shared across every page:
   drifting orbs over the aurora, titles that surface from dimness on
   scroll, and the scroll-spy that lights the active entry of a long
   list. All of it dies under reduced motion.
═════════════════════════════════════════════════════════════════════ */

/* Orbs: three lights drifting the viewport, injected by app.js. */
.orbfield{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;will-change:transform}
.orb.a{width:680px;height:680px;filter:blur(80px);background:radial-gradient(circle,rgba(124,92,252,.45),transparent 66%);top:-14%;left:-10%}
.orb.b{width:560px;height:560px;filter:blur(75px);background:radial-gradient(circle,rgba(167,139,255,.30),transparent 66%);bottom:-16%;right:-10%}
.orb.c{width:420px;height:420px;filter:blur(70px);background:radial-gradient(circle,rgba(236,72,153,.18),transparent 66%);top:38%;left:58%}
@media (prefers-reduced-motion: no-preference){
  .orb.a{animation:orbA 22s ease-in-out infinite}
  .orb.b{animation:orbB 28s ease-in-out infinite}
  .orb.c{animation:orbC 34s ease-in-out infinite}
  @keyframes orbA{0%,100%{transform:translate(0,0)}50%{transform:translate(22vw,18vh)}}
  @keyframes orbB{0%,100%{transform:translate(0,0)}50%{transform:translate(-20vw,-14vh)}}
  @keyframes orbC{0%,100%{transform:translate(0,0)}33%{transform:translate(-12vw,10vh)}66%{transform:translate(8vw,-12vh)}}
}

/* Titles surfacing from dimness. app.js writes --fp (0..1) from the
   intersection ratio; without JS or with reduced motion nothing dims. */
html.fadeon .fade-title{opacity:calc(.1 + .9*var(--fp,0));transform:translateY(calc((1 - var(--fp,0))*22px));transition:opacity .25s linear,transform .25s linear}

/* Scroll spy: the entry in the viewport's focus band is lit, the rest
   recede. Applied to the timeline and any .rows.spy list. */
html.spyon .tl > li,html.spyon .rows.spy > li{opacity:.32;transition:opacity .45s var(--ease)}
html.spyon .tl > li.live-entry,html.spyon .rows.spy > li.live-entry{opacity:1}
html.spyon .tl > li.live-entry .k{color:var(--brass-2)}
html.spyon .tl > li.live-entry::after{box-shadow:0 0 0 5px rgba(124,92,252,.25)}

/* The console and board get the reference's row hover. */
.board .row:hover{background:rgba(124,92,252,.07)}

/* The verification chips idle like the reference's product cards. */
@media (prefers-reduced-motion: no-preference) and (pointer:fine){
  .vchip{animation:vfloat 7s ease-in-out infinite}
  .vchip:nth-child(2){animation-delay:-2.2s}
  .vchip:nth-child(3){animation-delay:-4.1s}
  .vchip:nth-child(4){animation-delay:-5.6s}
  @keyframes vfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
}

/* ── THE DESK ──────────────────────────────────────────────────────
   The reference's dense platform table, translated to the buyer desk:
   a full inventory grid with rail, verification chips, freshness
   badges, and tier pricing. Specimen data, stamped as such, priced
   consistently with the published rate card. */
.console.wide .cbody2{display:grid;grid-template-columns:56px minmax(0,1fr)}
.crail{border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:10px;align-items:center;padding:16px 0}
.crail i{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;font-style:normal;color:var(--tx-d3);background:rgba(242,240,250,.04);border:1px solid var(--rule)}
.crail i.on{color:var(--brass-2);background:rgba(124,92,252,.16);border-color:rgba(167,139,255,.35)}
.desk{font-family:var(--disp);font-size:13px;color:var(--tx-d2);min-width:0}
.desk .dhead,.desk .drow{display:grid;grid-template-columns:minmax(0,2fr) 104px 82px 72px 118px 104px 64px 70px;gap:0 14px;align-items:center;padding:11px 18px}
.desk .dhead{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--tx-d4);border-bottom:1px solid var(--rule)}
.desk .drow{border-bottom:1px solid var(--rule-d2);transition:background .2s}
.desk .drow:last-child{border-bottom:0}
.desk .drow:hover{background:rgba(124,92,252,.07)}
.desk .pn{color:var(--tx);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.desk .pv{display:block;color:var(--tx-d3);font-weight:400;font-size:12px}
.desk .ptier{font-family:var(--mono);font-size:10.5px;color:var(--tx-d2);white-space:nowrap}
.desk .ts{font-family:var(--mono);font-size:10.5px;color:var(--tx-d3);white-space:nowrap;font-variant-numeric:tabular-nums}
.desk .bdg{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;border-radius:var(--rp);padding:4px 10px;text-align:center;white-space:nowrap;justify-self:start}
.desk .b-fresh{color:#7BD88F;background:rgba(123,216,143,.10);border:1px solid rgba(123,216,143,.3)}
.desk .b-today{color:var(--brass-2);background:rgba(124,92,252,.12);border:1px solid rgba(167,139,255,.32)}
.desk .b-48{color:#E8B45F;background:rgba(232,180,95,.10);border:1px solid rgba(232,180,95,.3)}
.desk .b-age{color:#F0805F;background:rgba(240,128,95,.10);border:1px solid rgba(240,128,95,.3)}
.desk .vics{display:inline-flex;gap:6px}
.desk .vics i{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;font-style:normal;color:var(--brass-2);background:rgba(124,92,252,.14);border:1px solid rgba(167,139,255,.3)}
.desk .vics i.off{color:var(--tx-d4);background:rgba(242,240,250,.03);border-color:var(--rule)}
.desk .pid{font-family:var(--mono);font-size:10px;color:var(--tx-d4);white-space:nowrap}
.desk .pr{font-variant-numeric:tabular-nums;color:var(--tx);text-align:right;font-weight:600}
.desk .st{justify-self:end}
@media(max-width:1100px){
  .desk .dhead,.desk .drow{grid-template-columns:minmax(0,2fr) 100px 84px 64px 72px}
  .desk .hide-mid{display:none}
}
@media(max-width:720px){
  .console.wide .cbody2{grid-template-columns:1fr}
  .crail{display:none}
  .desk .dhead{display:none}
  .desk .drow{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:13px 16px}
  .desk .hide-sm{display:none}
  .desk .pr{grid-row:1;grid-column:2}
  .desk .st{grid-row:2;grid-column:2}
}

/* ── INSTRUMENT KIT ────────────────────────────────────────────────
   The product-UI illustration system: every page's imagery is a drawn
   instrument in the console language, never stock art. Animation
   rides the existing reveal pipeline, so reduced motion gets finished
   stills. */

/* Sparklines draw themselves when their tile reveals. */
.spark path:not(.area){stroke-dasharray:600;stroke-dashoffset:0}
@media (prefers-reduced-motion: no-preference){
  html.rv .stile.reveal .spark path:not(.area){stroke-dashoffset:600}
  html.rv .stile.reveal.in .spark path:not(.area){stroke-dashoffset:0;transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) .25s}
  html.rv .stile.reveal .spark .area{opacity:0}
  html.rv .stile.reveal.in .spark .area{opacity:1;transition:opacity .9s ease 1.2s}
}

/* Small console: an instrument without the two-pane body. */
.console.mini{max-width:460px}
.console.mini .cwrap{padding:16px;display:grid;gap:12px}

/* The record assembles line by line (dl children are reveal targets). */
.record dl dt,.record dl dd{min-width:0}

/* Routing chips on an instrument's footer. */
.routline{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-top:1px solid var(--rule-d)}
.routline i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--brass-2);background:rgba(124,92,252,.13);border:1px solid rgba(167,139,255,.3);border-radius:var(--rp);padding:5px 11px}
.routline i.dim{color:var(--tx-d4);background:rgba(242,240,250,.03);border-color:var(--rule)}

/* Verification run rows. */
.vrun{display:grid}
.vrun .vrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--rule-d2);font-family:var(--disp);font-size:13.5px;color:var(--tx-d2)}
.vrun .vrow:last-child{border-bottom:0}
.vrun .vrow .vn{color:var(--tx);font-weight:600;display:block}
.vrun .vrow .vd{font-family:var(--mono);font-size:10.5px;color:var(--tx-d3)}
.vrun .pass{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#7BD88F;background:rgba(123,216,143,.1);border:1px solid rgba(123,216,143,.3);border-radius:var(--rp);padding:4px 10px}
.vrun .info{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-2);background:rgba(124,92,252,.12);border:1px solid rgba(167,139,255,.3);border-radius:var(--rp);padding:4px 10px}

/* ── THE HORIZON BEAM ──────────────────────────────────────────────
   The reference's light ridge: a bright line on a dark horizon with
   a pink-to-violet-to-cyan wash rising off it. Pure CSS, used as a
   section divider. */
.beam{position:relative;height:200px;overflow:hidden;pointer-events:none}
.beam::before{content:"";position:absolute;left:4%;right:4%;top:52%;height:120px;transform:translateY(-100%);background:linear-gradient(90deg,rgba(236,72,153,.55) 4%,rgba(167,139,255,.6) 38%,rgba(124,92,252,.5) 60%,rgba(94,210,230,.45) 88%);filter:blur(44px);border-radius:50%}
.beam::after{content:"";position:absolute;left:6%;right:6%;top:52%;height:2px;background:linear-gradient(90deg,transparent 0%,rgba(255,214,235,.9) 14%,#FFFFFF 42%,rgba(214,240,255,.95) 70%,transparent 100%);box-shadow:0 0 18px rgba(214,222,255,.9),0 0 60px rgba(167,139,255,.7)}
.beam i{display:none}
@media (prefers-reduced-motion: no-preference){
  .beam::before{animation:beambreathe 9s ease-in-out infinite}
  @keyframes beambreathe{0%,100%{opacity:.75}50%{opacity:1}}
}
@media(max-width:620px){.beam{height:130px}.beam::before{height:80px;filter:blur(30px)}}

/* ── GLOW-BADGE FEATURE CARDS ──────────────────────────────────────
   Rounded cards with a ringed icon badge and the lead phrase carrying
   the accent, body carrying the white. */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1000px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.fgrid{grid-template-columns:1fr}}
.fcard{display:flex;flex-direction:column;gap:46px;justify-content:space-between;background:linear-gradient(180deg,rgba(36,27,69,.4),rgba(18,13,34,.6));border:1px solid var(--rule);border-radius:22px;padding:24px 24px 26px;min-height:210px}
.fcard .fic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:var(--brass-2);background:radial-gradient(circle at 50% 30%,rgba(124,92,252,.35),rgba(124,92,252,.08));border:1px solid rgba(167,139,255,.45);box-shadow:0 0 24px rgba(124,92,252,.35)}
.fcard p{font-size:15.5px;line-height:1.6;color:var(--tx);margin:0}
.fcard p .lead{font-style:normal;color:var(--brass-2)}

/* ── START PAGE RAIL ───────────────────────────────────────────────
   The intake gets the instrument treatment: the live record on the
   right assembles from the person's own answers as they type, and the
   trust cards carry the promises. Form stays the white island. */
.startgrid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:start}
.startgrid .rail{position:sticky;top:96px;display:grid;gap:16px}
@media(max-width:1100px){.startgrid{grid-template-columns:1fr}.startgrid .rail{position:static;order:2;max-width:560px}}
.record dd.empty{color:var(--tx-d4)}
.fcard.slim{min-height:0;gap:16px;flex-direction:row;align-items:center;padding:16px 18px;border-radius:16px}
.fcard.slim .fic{width:42px;height:42px;font-size:11px;flex:none}
.fcard.slim p{font-size:14px;line-height:1.5}

/* ── CONTENT CARDS ─────────────────────────────────────────────────
   The reference's resource-card architecture with our own art: each
   card's media panel is drawn from an instrument motif, never a stock
   photo. Pill tag, title, read-more arrow. */
.cardsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1000px){.cardsgrid{grid-template-columns:1fr}}
.ccard{display:block;text-decoration:none;color:var(--tx);background:linear-gradient(180deg,rgba(36,27,69,.4),rgba(18,13,34,.6));border:1px solid var(--rule);border-radius:22px;overflow:hidden;transition:border-color .2s,transform .3s var(--ease)}
.ccard:hover{border-color:rgba(167,139,255,.5)}
@media (prefers-reduced-motion: no-preference){.ccard:hover{transform:translateY(-4px)}}
.ccard .art{display:block;position:relative;height:150px;border-bottom:1px solid var(--rule);background:
  radial-gradient(360px 180px at 70% 0%, rgba(124,92,252,.3), transparent 70%),
  linear-gradient(180deg,#1B1536,#120D24);overflow:hidden}
.ccard .body{display:block;padding:20px 22px 22px}
.ccard .pill{display:inline-flex;vertical-align:top;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brass-2);border:1px solid rgba(167,139,255,.35);border-radius:var(--rp);padding:4px 11px;margin-bottom:12px}
.ccard h3{font-size:19px;font-weight:600;letter-spacing:-.014em;line-height:1.25;margin:0 0 16px}
.ccard .more{font-family:var(--disp);font-weight:600;font-size:13.5px;color:var(--brass-2)}
.ccard:hover .more{color:#C9B4FF}

/* Card art motifs. */
.art-beam::after{content:"";position:absolute;left:8%;right:8%;top:58%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,220,240,.9) 30%,#fff 55%,rgba(200,235,255,.9) 75%,transparent);box-shadow:0 0 14px rgba(214,222,255,.9),0 0 44px rgba(167,139,255,.7)}
.art-beam::before{content:"";position:absolute;left:14%;right:14%;top:58%;height:60px;transform:translateY(-100%);background:linear-gradient(90deg,rgba(236,72,153,.5),rgba(124,92,252,.55) 55%,rgba(94,210,230,.45));filter:blur(22px);border-radius:50%}
.art-rows i{position:absolute;left:12%;right:12%;height:22px;border-radius:7px;background:rgba(242,240,250,.05);border:1px solid var(--rule)}
.art-rows i:nth-child(1){top:22px}.art-rows i:nth-child(2){top:54px;right:26%}.art-rows i:nth-child(3){top:86px;right:40%}
.art-rows i::after{content:"";position:absolute;right:8px;top:6px;width:34px;height:9px;border-radius:999px;background:rgba(124,92,252,.5)}
.art-pass i{position:absolute;font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#7BD88F;background:rgba(123,216,143,.12);border:1px solid rgba(123,216,143,.35);border-radius:999px;padding:5px 12px}
.art-pass i:nth-child(1){top:26px;left:14%}.art-pass i:nth-child(2){top:62px;left:34%}.art-pass i:nth-child(3){top:98px;left:20%}

/* Mobile: the split survives as a split. Two half-viewport panels,
   both doors fully on screen before any scroll, content compressed
   to the essentials. */
@media(max-width:940px){
  .split{grid-template-columns:1fr!important;grid-template-rows:1fr 1fr;padding:12px 10px 4px;gap:10px;min-height:calc(100vh - 86px);min-height:calc(100dvh - 86px)}
  .door{padding:20px 0;min-height:0}
  .door .inner,.door.attorney .inner{padding:0 20px}
  .door h1{font-size:clamp(25px,7vw,33px);margin:10px 0 10px}
  .door.attorney.photo h2{font-size:clamp(22px,6.2vw,29px);margin:10px 0 10px}
  .door p{font-size:14px;line-height:1.5}
  .door .d-full{display:none}
  .door .d-mobile{display:block}
  .door .chip{margin-bottom:0;padding:6px 14px;font-size:12px}
  .door .actions{margin-top:14px;gap:14px}
  .door .actions .btn{padding:11px 20px;font-size:13.5px}
  .doorproof{display:none}
  .door .dlight{display:none}
}

/* ── MOBILE NAV ORDER ──────────────────────────────────────────────
   Phone layout per Frederick: menu left, logo centred, primary action
   right. The links pill is already desktop-only; display:contents
   lifts the right cluster's children into the grid so the three
   pieces can be placed independently. */
@media(max-width:760px){
  .nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .navlinks{display:contents}
  .navlinks .nav-secondary{display:none}
  .menu-btn{grid-column:1;grid-row:1;justify-self:start}
  .brand{grid-column:2;grid-row:1;justify-self:center}
  .brand img.lg-h{display:none}
  .brand img.lg-m{display:block}
  .navlinks a.btn{grid-column:3;grid-row:1;justify-self:end}
  .navlinks .btn .nfull{display:none}
}