/* ============================================================
   ARRAN MACDONALD — DESIGN SYSTEM v2 "THE WORKING PROOF"
   Workshop structure · printed soul · DIY character
   Token layer + components. One file, no libraries.

   BREAKPOINT TIERS (desktop-first, max-width):
     1100px  hide wide-only decorative art (#reach)
      860px  TABLET — nav→menu, multi-col grids→1, padding tightens,
             sticky CTA shows, decorative opacity drops, status hidden
      660px  footer columns → 1
      480px  PHONE — stat grid 2-col → 1
   Most fluidity is handled by clamp()/vw (type + section padding), so
   these four tiers only cover hard layout reflows.
   ============================================================ */

:root{
  /* colour — spot colour with a job description */
  --cream:#F7F5F0; --ink:#191308; --ink-2:#241B0E;
  --violet:#55356E; --violet-press:#46295C;
  --green:#76A767; --olive:#5C6B54; --sage:#EAEBE2;
  --hairline:#E4E2D6; --cream-dim:#D9D2C7; --alert:#8A2A2A;
  /* type — two voices */
  --font-voice:'Schibsted Grotesk',system-ui,sans-serif;
  --font-proof:'IBM Plex Mono',ui-monospace,monospace;
  /* layout */
  --maxw:1140px; --pad:28px;
  /* spacing (8px base) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  /* motion — two speeds */
  --settle:480ms cubic-bezier(.22,.61,.36,1);
  --snap:180ms cubic-bezier(.3,.7,.4,1);
  /* texture — one paper, three weights (CSS-noise fallback; swap tile via --tex-img later) */
  --tex-canvas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  --tex-feature:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
  --grid-dots:radial-gradient(circle, rgba(25,19,8,.12) 1px, transparent 1px);
}

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-voice);background:var(--cream);color:var(--ink);font-size:17px;line-height:1.6;background-image:var(--tex-canvas);overflow-x:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--font-proof)}
img{max-width:100%;display:block}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);padding:10px 16px;z-index:100}
.skip:focus{left:0}
::selection{background:var(--violet);color:#fff}
:focus-visible{outline:none;box-shadow:0 0 0 3px #55356e22,0 0 0 1.5px var(--violet)}

/* ---------- type ---------- */
h1{font-size:clamp(44px,7vw,92px);font-weight:800;letter-spacing:-0.03em;line-height:.98}
h2{font-size:clamp(26px,3.6vw,40px);font-weight:800;letter-spacing:-0.02em;line-height:1.05}
h3{font-size:19px;font-weight:600}
p{max-width:68ch}
.lead{font-size:clamp(17px,2.1vw,20px)}
.meta{font-size:14px;color:var(--olive)}
.caption{font-size:13px;color:var(--olive);border-left:2px solid var(--green);padding-left:10px;line-height:1.5;max-width:44ch}
.pullquote{font-size:clamp(24px,3.4vw,36px);font-weight:600;font-style:italic;line-height:1.22;max-width:26ch}

/* frame layer (mono, 11px, never a sentence) */
.tag{font-family:var(--font-proof);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--ink);padding:4px 10px;display:inline-block;background:var(--cream)}
.tag.sage{background:var(--sage)}
.readout{font-family:var(--font-proof);font-size:11px;color:var(--olive);letter-spacing:.06em;text-transform:uppercase}

/* ---------- DIY interventions ---------- */
.stamp{font-family:var(--font-proof);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border:2px solid var(--ink);padding:6px 12px;display:inline-block;background:var(--cream);transform:rotate(-1.6deg);box-shadow:2px 2px 0 rgba(25,19,8,.15)}
.stamp.r2{transform:rotate(1.2deg)}
.stamp.green{border-color:var(--green);color:var(--olive)}
.stamp.violet{border-color:var(--violet);color:var(--violet);transform:rotate(-2deg)}
.deckle-b{clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),97.5% 100%,95% calc(100% - 5px),92% calc(100% - 9px),89% calc(100% - 3px),86% calc(100% - 8px),83% calc(100% - 4px),80% calc(100% - 9px),77% calc(100% - 5px),74% calc(100% - 8px),71% calc(100% - 3px),68% calc(100% - 7px),65% calc(100% - 4px),62% calc(100% - 9px),59% calc(100% - 5px),56% calc(100% - 8px),53% calc(100% - 3px),50% calc(100% - 7px),47% calc(100% - 5px),44% calc(100% - 9px),41% calc(100% - 4px),38% calc(100% - 8px),35% calc(100% - 3px),32% calc(100% - 7px),29% calc(100% - 5px),26% calc(100% - 9px),23% calc(100% - 4px),20% calc(100% - 8px),17% calc(100% - 3px),14% calc(100% - 7px),11% calc(100% - 5px),8% calc(100% - 9px),5% calc(100% - 4px),2.5% calc(100% - 8px),0 calc(100% - 5px))}
.presshint{position:relative}
.presshint::after{content:"";position:absolute;top:0;bottom:0;left:58%;width:2px;background:linear-gradient(rgba(25,19,8,.06),rgba(25,19,8,.11),rgba(25,19,8,.05));pointer-events:none}
.suckertrail{display:inline-flex;gap:7px;align-items:center;vertical-align:middle}
.suckertrail i{width:9px;height:9px;border:2px solid var(--ink);border-radius:50%;display:inline-block}
.suckertrail i:nth-child(2){width:7px;height:7px;opacity:.8}
.suckertrail i:nth-child(3){width:6px;height:6px;opacity:.6}
.suckertrail i:nth-child(4){width:5px;height:5px;opacity:.4}
.suckertrail.rev{flex-direction:row-reverse}

/* ---------- toolbar nav ---------- */
.toolbar{position:sticky;top:0;z-index:60;background:rgba(247,245,240,.93);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border-bottom:1.5px solid var(--ink)}
.toolbar .wrap{display:flex;justify-content:space-between;align-items:center;height:56px;gap:12px}
.toolbar .brand{font-weight:700;font-size:16px;letter-spacing:-0.01em;color:var(--ink);text-decoration:none}
.toolbar .status{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-proof);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--olive)}
@media(max-width:860px){.toolbar .status{display:none}}
.status .dot{width:8px;height:8px;background:var(--green);border-radius:50%;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.toolbar nav{display:flex;align-items:center;gap:20px}
.toolbar nav a{font-family:var(--font-proof);font-size:12px;letter-spacing:.04em;color:var(--ink);text-decoration:none;text-transform:lowercase}
.toolbar nav a:hover{color:var(--violet)}
.toolbar nav a.cta{font-family:var(--font-voice);font-size:14px;font-weight:600;background:var(--violet);color:#fff;padding:9px 16px;text-transform:none;letter-spacing:0;transition:background var(--snap)}
.toolbar nav a.cta:hover{background:var(--violet-press)}
.nav-toggle{display:none;background:none;border:1.5px solid var(--ink);font-size:18px;padding:4px 10px;cursor:pointer;color:var(--ink);font-family:var(--font-proof)}
@media(max-width:860px){
  .toolbar nav{display:none;position:absolute;top:56px;left:0;right:0;background:var(--cream);border-bottom:1.5px solid var(--ink);flex-direction:column;align-items:flex-start;padding:18px var(--pad);gap:16px}
  .toolbar nav.open{display:flex}
  .toolbar nav a{font-size:14px}
  .nav-toggle{display:block}
}

/* ---------- bench & plates ---------- */
.bench{padding:var(--s6) 0}
.bench-row{margin:0 0 var(--s6);position:relative}
.plate{border:1.5px solid var(--ink);background:var(--cream);position:relative}
.plate-head{border-bottom:1.5px solid var(--ink);padding:9px 18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.plate-head .t{font-family:var(--font-proof);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.plate-body{padding:34px}
@media(max-width:860px){.plate-body{padding:22px}}
.plate-foot{border-top:1px solid var(--hairline);padding:12px 18px;font-size:14px;color:var(--olive);font-style:italic}
.plate-foot b{font-style:normal;font-family:var(--font-proof);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-right:8px}
.benchdots{background-image:var(--grid-dots);background-size:28px 28px}

/* ---------- poster (hero) ---------- */
.poster{position:relative;overflow:hidden;border-bottom:1.5px solid var(--ink);background-image:var(--tex-feature);--foot-h:calc(22px + 16px + 1.5px)} /* foot = 11px×2 padding + 16px line + border-top */
.poster .bench-grid{position:absolute;inset:0;background-image:var(--grid-dots);background-size:28px 28px;opacity:.5;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 35%,black 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 35%,black 80%,transparent 100%)}
.poster-tentacle{position:absolute;right:max(-30px,calc((100% - var(--maxw)) / 2 - 120px));top:-4%;height:112%;opacity:.8;pointer-events:none;will-change:transform}
.poster-tentacle img{height:100%;width:auto}
/* variant: tentacle anchored flush to the visible section line (the foot's top border).
   --foot-h is the single source of truth for the foot bar's height; if the foot wraps
   to two lines on narrow screens the art tucks slightly behind it — never floats above. */
.poster-tentacle.from-bottom{top:auto;bottom:var(--foot-h,0px);transform:none}
.poster-tentacle.from-bottom img{display:block}
.poster > .wrap{position:relative;z-index:2;padding-top:clamp(64px,10vw,128px);padding-bottom:clamp(64px,10vw,128px)}
.poster .tag-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px;align-items:center}
.poster .lead{max-width:46ch;margin:var(--s3) 0 var(--s4)}
.poster-foot{border-top:1.5px solid var(--ink);position:relative;z-index:2;background:var(--cream)}
.poster-foot .wrap{display:flex;justify-content:space-between;font-family:var(--font-proof);font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;padding-top:11px;padding-bottom:11px;color:var(--olive);flex-wrap:wrap;gap:8px}
@media(max-width:860px){.poster-tentacle{opacity:.4;right:-80px}}

/* ---------- buttons & links ---------- */
.btn{display:inline-block;background:var(--violet);color:#fff;padding:15px 26px;font-weight:600;font-size:16px;text-decoration:none;border:none;cursor:pointer;transition:background var(--snap),transform var(--snap);font-family:var(--font-voice)}
.btn:hover{background:var(--violet-press)}
.btn:active{transform:translateY(2px)}
.btn-cream{background:var(--cream);color:var(--ink)}
.btn-cream:hover{background:#fff}
.textlink{color:var(--ink);text-decoration:none;font-weight:600;background-image:linear-gradient(var(--green),var(--green));background-repeat:no-repeat;background-size:0% 2px;background-position:0 100%;transition:background-size .35s ease;padding-bottom:3px}
.textlink:hover{background-size:100% 2px}

/* ---------- strip ---------- */
.strip{background:var(--sage);padding:var(--s3) 0;position:relative}
.strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.strip .lab{font-family:var(--font-proof);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);font-weight:600}
.strip .names{font-weight:700;font-size:16px;display:flex;gap:26px;flex-wrap:wrap;list-style:none}
.strip .note{font-size:13px;color:var(--olive);font-style:italic}

/* ---------- interruptions ---------- */
.interrupt{padding:var(--s5) 0;position:relative}
.interrupt .src{font-family:var(--font-proof);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--olive);margin-top:14px}
.statement{font-size:clamp(26px,4vw,44px);font-weight:800;letter-spacing:-0.02em;line-height:1.08;max-width:24ch}

/* ---------- flood ---------- */
.flood{background:var(--ink);color:var(--cream);position:relative;overflow:hidden;border:1.5px solid var(--ink)}
.flood::after{content:"";position:absolute;inset:0;background-image:var(--tex-feature);mix-blend-mode:screen;opacity:.5;pointer-events:none}
.flood .inner{position:relative;z-index:2;padding:clamp(48px,7vw,80px) 40px}
@media(max-width:860px){.flood .inner{padding:40px 22px}}
.flood p{color:var(--cream-dim)}
.flood h2{color:var(--cream)}
.flood-tentacle{position:absolute;right:-60px;bottom:-40px;height:380px;opacity:.55;pointer-events:none;transform:rotate(0deg)}
.flood-tentacle img{height:100%}

/* ---------- stats / hold ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1.5px solid var(--ink)}
@media(max-width:860px){.stat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.stat-grid{grid-template-columns:1fr}}
.stat-cell{padding:var(--s3);border-right:1.5px solid var(--ink);background:var(--cream)}
.stat-cell:last-child{border-right:none}
@media(max-width:860px){.stat-cell:nth-child(2){border-right:none}.stat-cell:nth-child(-n+2){border-bottom:1.5px solid var(--ink)}}
@media(max-width:480px){.stat-cell{border-right:none;border-bottom:1.5px solid var(--ink)}.stat-cell:last-child{border-bottom:none}}
.stat-cell .num{font-size:clamp(34px,4vw,52px);font-weight:800;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.stat-cell .cap{font-family:var(--font-proof);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--olive);margin-top:6px;line-height:1.5}
.hold{position:relative}
/* arm: flush right edge pinned to the plate's left border (right:100%, meets but never overlaps);
   width grows to bridge the left margin and bleed off-screen; lifted to sit high against the
   stats section rather than hanging below it */
.hold .hold-tentacle{position:absolute;right:100%;top:50%;transform:translateY(-75%);width:clamp(360px,calc(50vw - 450px),540px);opacity:.45;pointer-events:none;z-index:1}
.hold .hold-tentacle img{width:100%;display:block}
/* mirrored twin reaching in from the right edge of a plate (Why me section) */
.right-tentacle{position:absolute;left:100%;top:50%;transform:translateY(-50%) scaleX(-1);width:clamp(360px,calc(50vw - 450px),540px);opacity:.45;pointer-events:none;z-index:1}
.right-tentacle img{width:100%;display:block}
@media(max-width:860px){.right-tentacle{opacity:.3}}
.hold .stat-grid{position:relative;z-index:2}
@media(max-width:860px){.hold .hold-tentacle{opacity:.3}}

/* ---------- rate card ---------- */
.rate-card{display:grid;grid-template-columns:1fr 1fr 1fr}
@media(max-width:860px){.rate-card{grid-template-columns:1fr}}
.rate-cell{padding:26px 22px;border-right:1.5px solid var(--ink);position:relative;transition:background var(--snap);display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none}
.rate-cell:last-child{border-right:none}
@media(max-width:860px){.rate-cell{border-right:none;border-bottom:1.5px solid var(--ink)}.rate-cell:last-child{border-bottom:none}}
.rate-cell:hover{background:var(--sage)}
.rate-cell .partno{font-family:var(--font-proof);font-size:11px;color:var(--olive);letter-spacing:.08em;text-transform:uppercase}
.rate-cell .price{font-size:30px;font-weight:800;letter-spacing:-0.02em}
.rate-cell .price small{font-size:13px;font-weight:500;color:var(--olive)}
.rate-cell p{font-size:15px}
.rate-cell .stamp{position:absolute;top:-13px;right:14px}

/* ---------- case files ---------- */
.case-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border:1.5px solid var(--ink)}
@media(max-width:860px){.case-grid{grid-template-columns:1fr}}
.case-cell{border-right:1.5px solid var(--ink);text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:background var(--snap)}
.case-cell:last-child{border-right:none}
@media(max-width:860px){.case-cell{border-right:none;border-bottom:1.5px solid var(--ink)}.case-cell:last-child{border-bottom:none}}
.case-cell:hover{background:var(--sage)}
.case-cell .file-head{border-bottom:1.5px solid var(--ink);padding:8px 14px;font-family:var(--font-proof);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}
.case-cell .file-head .ok{color:var(--olive)}
.case-cell .ph{background:linear-gradient(135deg,#dedacb,#cfc9b8);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:12px;color:#7a7361;font-family:var(--font-proof)}
.case-cell .body{padding:16px 14px 18px}
.case-cell .body strong{font-size:16px;font-weight:700;margin-right:8px}
.case-cell .res{font-size:14px;color:var(--olive);line-height:1.5}

/* ---------- split (photo) ---------- */
.split{display:grid;grid-template-columns:1fr 1.2fr;gap:0}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split .photo{border-right:1.5px solid var(--ink);min-height:300px;background:var(--sage)}
@media(max-width:860px){.split .photo{border-right:none;border-bottom:1.5px solid var(--ink)}}
.split .photo img{width:100%;height:100%;object-fit:cover}
.split .text{padding:34px}
@media(max-width:860px){.split .text{padding:22px}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step .n{font-family:var(--font-proof);font-size:11px;font-weight:600;letter-spacing:.08em;border:1.5px solid var(--ink);width:34px;height:34px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.step p{font-size:15px;margin-top:6px}

/* ---------- footer colophon ---------- */
.colophon{padding:50px 0 90px;background:var(--ink);color:#b9b1a6;font-size:14px;position:relative;overflow:hidden;margin-top:var(--s6)}
.colophon::after{content:"";position:absolute;inset:0;background-image:var(--tex-canvas);mix-blend-mode:screen;opacity:.6;pointer-events:none}
.colophon .wrap{position:relative;z-index:2}
.colophon .ghost{position:absolute;right:-40px;top:-60px;height:300px;opacity:.13;transform:rotate(195deg);pointer-events:none}
.colophon .ghost img{height:100%}
.colophon h4{font-family:var(--font-proof);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);margin-bottom:10px;font-weight:600}
.colophon ul{list-style:none}
.colophon li{padding:3px 0}
.colophon a{color:#b9b1a6;text-decoration:none}
.colophon a:hover{color:var(--cream);text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:3px}
.colophon .pos{color:var(--cream);font-weight:600;font-size:16px;max-width:46ch;margin-bottom:28px}
.foot-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px;margin-bottom:34px}
@media(max-width:660px){.foot-grid{grid-template-columns:1fr}}
.specline{border-top:1px solid rgba(247,245,240,.2);padding-top:16px;font-family:var(--font-proof);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9b9285;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.specline .live{display:inline-flex;align-items:center;gap:7px}
.specline a{text-transform:none}

/* ---------- proof system ---------- */
.evidence{margin:0}
.evidence img{width:100%;border:1.5px solid var(--ink);display:block}
.prov{font-family:var(--font-proof);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--olive);border:1.5px solid var(--ink);border-top:none;background:var(--cream);padding:6px 10px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.prov .k{color:var(--ink)}
.case-cell .evd{aspect-ratio:16/10;overflow:hidden;border-bottom:1.5px solid var(--ink);position:relative;background:var(--sage)}
.case-cell .evd img{width:100%;height:100%;object-fit:cover;object-position:top}

/* ---------- system-map schematic (case study) ---------- */
.sysmap-svg{margin:26px 0 0;border:1.5px solid var(--ink);background:var(--cream);background-image:var(--grid-dots);background-size:20px 20px;background-position:-1px -1px;padding:clamp(18px,3vw,32px);overflow-x:auto;-webkit-overflow-scrolling:touch}
.sysmap-svg svg{width:100%;min-width:560px;height:auto;display:block}

/* case-cell diagram thumbnail (GCG system map) */
.case-cell .evd.diagram{background:var(--cream)}
.case-cell .evd.diagram object,.case-cell .evd.diagram img{width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none;display:block}
.case-cell .evd .prov{position:absolute;bottom:0;left:0;right:0;border:none;border-top:1.5px solid var(--ink);justify-content:flex-start}
/* mini system map (case cards) + full system map (case studies) */
.sysmap{background-image:var(--grid-dots);background-size:28px 28px;background-color:var(--cream);padding:18px;display:flex;flex-direction:column;gap:0;justify-content:center;height:100%}
.sm-row{display:flex;align-items:center;gap:0}
.sm-node{font-family:var(--font-proof);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border:1.5px solid var(--ink);background:var(--cream);padding:6px 9px;white-space:nowrap}
.sm-node.dark{background:var(--ink);color:var(--cream)}
.sm-link{flex:1;min-width:14px;height:1.5px;background:var(--ink);position:relative}
.sm-link::after{content:"";position:absolute;right:0;top:-3px;border-left:6px solid var(--ink);border-top:4px solid transparent;border-bottom:4px solid transparent}
.sm-down{width:1.5px;height:16px;background:var(--ink);margin-left:40px}
.sysmap-full{border:1.5px solid var(--ink);background-image:var(--grid-dots);background-size:28px 28px;padding:clamp(22px,4vw,44px);position:relative}
.sysmap-full .sm-node{font-size:11px;padding:9px 13px}
.sysmap-full .sm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;align-items:center}
.blackbox{background:var(--ink);color:var(--cream);padding:22px;position:relative;overflow:hidden}
.blackbox::after{content:"";position:absolute;inset:0;background-image:var(--tex-canvas);mix-blend-mode:screen;opacity:.5;pointer-events:none}
.blackbox .t{font-family:var(--font-proof);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#a8b59e;margin-bottom:8px}
.blackbox p{color:var(--cream-dim);font-size:14px;position:relative;z-index:2}
.evidence-due{border:1.5px dashed var(--olive);padding:20px;font-family:var(--font-proof);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--olive);text-align:center}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--hairline)}
.faq details:last-child{border-bottom:none}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:var(--s2) 0;font-weight:600;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-proof);font-size:16px;color:var(--violet);font-weight:600}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 var(--s2);font-size:15px;max-width:60ch}

/* ---------- forms ---------- */
.form{max-width:640px}
.field{margin-bottom:18px}
.field>label{display:block;font-weight:600;font-size:15px;margin-bottom:7px}
.field input[type=text],.field input[type=email],.field select,.field textarea{width:100%;border:1.5px solid var(--ink);background:#fff;padding:13px 14px;font-family:var(--font-voice);font-size:16px;color:var(--ink)}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;box-shadow:0 0 0 3px #55356e22;border-color:var(--violet)}
.choices{display:flex;gap:10px;flex-wrap:wrap}
.choices label{border:1.5px solid var(--ink);padding:10px 16px;cursor:pointer;font-size:15px;display:inline-flex;align-items:center;gap:8px;background:var(--cream);transition:background var(--snap)}
.choices input{position:absolute;opacity:0;pointer-events:none}
.choices label:has(input:checked){background:var(--sage);font-weight:600}
.choices label:has(input:focus-visible){box-shadow:0 0 0 3px #55356e22,0 0 0 1.5px var(--violet)}
.hp{position:absolute;left:-9999px;top:auto}
.form-status{font-size:15px;margin-top:12px;color:var(--alert);min-height:1em}
.form-note{font-family:var(--font-proof);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--olive);margin-top:10px}
.body-figure{margin:26px 0}
.body-figure img{width:100%;border:1.5px solid var(--ink)}

/* ---------- mobile sticky CTA ---------- */
.sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:55;background:var(--violet);text-align:center;padding:14px;display:none;transform:translateY(100%);transition:transform var(--settle)}
.sticky-cta a{color:#fff;font-weight:600;font-size:16px;text-decoration:none;display:block}
.sticky-cta.show{transform:none}
@media(max-width:860px){.sticky-cta{display:block}}

/* ---------- motion ---------- */
.settle{opacity:0;transform:translateY(14px);transition:opacity var(--settle),transform var(--settle)}
.settle.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .settle{opacity:1;transform:none}
  .sticky-cta{transform:none}
}

/* ---------- extracted from repeated inline styles (single source of truth) ---------- */
.live-dot{width:7px;height:7px;background:var(--green);border-radius:50%;display:inline-block}
.hero-title{font-size:clamp(40px,6vw,76px)}      /* secondary-page hero (home keeps the larger global h1) */
.hero-title.sm{font-size:clamp(38px,5.5vw,68px)} /* case-study hero */
.poster.pad-lg > .wrap{padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(64px,9vw,120px)}
.poster.pad-md > .wrap{padding-top:clamp(48px,8vw,96px);padding-bottom:clamp(48px,8vw,96px)}
.poster.pad-sm > .wrap{padding-top:clamp(48px,7vw,80px);padding-bottom:clamp(48px,7vw,80px)}

/* ---------- page-level responsive overrides (moved from inline <style> blocks) ---------- */
@media(max-width:1100px){#reach{display:none}}
@media(max-width:860px){#about-hero,#rules-grid,#offclock,#work-grid,#lead-grid,#cap-grid{grid-template-columns:1fr!important}.split .text{border-right:none!important}.ev-left{border-right:none!important;border-bottom:1.5px solid var(--ink)}}
@media(max-width:860px){.bb-grid{grid-template-columns:1fr!important}#nwfd-stats{grid-template-columns:1fr!important}}