/* Smartunex sketch-g: shared styles for subpages (work hub, cases, later industries/services).
   Tokens, header, buttons, eyebrow, hex bullets and footer are copied from index.html so the
   subpages match the home page without loading its scroll-scene code. */
:root{
  --bg:#03100D;
  --ink:#EEF8F4;
  --muted:#A9C4BA;
  --mint:#6FF2C8;
  --emerald:#14B487;
  --gold:#E8D49E;
  --line:rgba(160,240,210,.16);
  --panel:rgba(8,36,28,.35);
  --display:"Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --hex:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  --gutter:clamp(16px,6vw,96px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
body{background:var(--bg);overflow-x:clip;min-height:100vh}
a{color:inherit}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
main a:focus-visible,.foot a:focus-visible{outline-offset:4px;border-radius:4px}
p,li{text-wrap:pretty}

/* ---------- header (always in its "scrolled" state on subpages) ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:13px clamp(16px,4vw,56px);background:rgba(3,16,13,.9);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em}
.brand svg{width:30px;height:auto}
.nav{display:flex;align-items:center;gap:28px;font-size:15px}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav .pill{color:var(--bg);background:var(--ink);padding:10px 18px;border-radius:999px;font-weight:600}
.nav .pill:hover{color:var(--bg);background:var(--mint)}

/* ---------- type, buttons, eyebrow ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--mint);font-weight:600}
.eyebrow i{display:inline-block;width:10px;height:11px;background:currentColor;clip-path:var(--hex)}
h1{font-family:var(--display);font-weight:600;font-size:clamp(38px,4.4vw,66px);line-height:1.02;letter-spacing:-.035em;margin:18px 0 0;max-width:20ch;text-wrap:balance}
h1 em{font-style:normal;color:var(--mint)}
h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,3.3vw,48px);line-height:1.05;letter-spacing:-.03em;margin:14px 0 0;text-wrap:balance}
h3{font-family:var(--display);font-weight:600;letter-spacing:-.015em}
.lede{margin-top:18px;font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--muted);max-width:56ch}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:16px;padding:16px 26px;border-radius:999px;transition:transform .2s, background .2s}
.btn-primary{background:linear-gradient(135deg,#8CF7D6,#22C99A);color:#022018;box-shadow:0 10px 40px rgba(34,201,154,.3), inset 0 1px 0 rgba(255,255,255,.6)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{color:var(--ink);border:1px solid rgba(238,248,244,.28);background:rgba(3,16,13,.45)}
.btn-ghost:hover{border-color:var(--mint)}
.btn svg{width:16px;height:16px}
.reply{margin-top:14px;font-size:14.5px;color:var(--muted)}
.tlink{color:var(--mint);text-decoration:none;border-bottom:1px solid rgba(111,242,200,.35);padding-bottom:2px}
.tlink:hover{border-color:var(--mint)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* hex bullets (the home ".trust" list) */
.hexlist{list-style:none;display:grid;gap:12px;font-size:16.5px;line-height:1.5}
.hexlist li{display:flex;gap:12px;align-items:baseline}
.hexlist li::before{content:"";flex:none;width:9px;height:10px;background:var(--mint);clip-path:var(--hex);transform:translateY(1px)}
.hexlist.gold li::before{background:var(--gold)}

/* ---------- layout ---------- */
.sec{padding:clamp(64px,8vw,120px) var(--gutter);border-top:1px solid var(--line)}
.wrap{max-width:1180px;margin:0 auto}
.split{display:grid;gap:28px}
.split > .head h2{max-width:14ch}
@media (min-width:960px){ .split{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,6vw,96px)} .split > .head{align-self:start;position:sticky;top:96px} }
.body-copy p{font-size:17px;line-height:1.65;color:var(--muted);max-width:62ch}
.body-copy p + p{margin-top:14px}
.body-copy p b,.body-copy li b{color:var(--ink);font-weight:600}
.body-copy .hexlist{margin-top:20px;color:var(--ink)}
.body-copy .hexlist + p{margin-top:20px}

/* ---------- page hero ---------- */
.phero{position:relative;overflow:hidden;padding:clamp(28px,4vw,48px) var(--gutter) clamp(56px,7vw,96px);
  background:radial-gradient(50% 70% at 88% 20%,rgba(20,180,135,.14),rgba(3,16,13,0) 70%),var(--bg)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px 0;font-size:14px;color:var(--muted)}
.crumbs li{display:flex;align-items:center}
.crumbs li + li::before{content:"";width:6px;height:7px;margin:0 12px;background:rgba(169,196,186,.5);clip-path:var(--hex)}
.crumbs a{text-decoration:none;border-bottom:1px solid rgba(169,196,186,.3)}
.crumbs a:hover{color:var(--ink);border-color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}
.phero .eyebrow{margin-top:clamp(36px,5vw,64px)}
.answer{margin-top:30px;max-width:760px;padding:24px 26px;border:1px solid var(--line);border-left:3px solid var(--mint);border-radius:4px 18px 18px 4px;background:var(--panel)}
.answer b.k{display:block;font:600 12.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--mint);margin-bottom:12px}
.answer p{font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--ink)}
.status{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-size:15px;color:var(--muted)}
.status i{width:10px;height:11px;clip-path:var(--hex);background:var(--gold)}
.status.live i{background:var(--mint);box-shadow:0 0 12px var(--mint)}
.status b{color:var(--ink);font-weight:600}

/* facts row */
.facts{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts li{padding:22px 18px 22px 0;display:grid;gap:8px;align-content:start}
.facts li:nth-child(n+3){border-top:1px solid var(--line)}
.facts b{font-family:var(--display);font-weight:600;font-size:clamp(30px,3.4vw,48px);line-height:1;letter-spacing:-.03em;color:var(--gold)}
.facts span{font-size:14.5px;line-height:1.4;color:var(--muted)}
@media (min-width:900px){
  .facts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .facts li{padding:26px 24px 26px 0}
  .facts li:nth-child(n+3){border-top:0}
  .facts li + li{padding-left:24px;border-left:1px solid var(--line)}
}

/* ---------- "what we built" rows ---------- */
.built{list-style:none;border-bottom:1px solid var(--line);margin-top:8px}
.built li{display:grid;grid-template-columns:22px 1fr;gap:6px 18px;padding:24px 0;border-top:1px solid var(--line)}
.built li::before{content:"";grid-row:1 / span 2;width:14px;height:16px;margin-top:6px;background:var(--emerald);clip-path:var(--hex)}
.built h3{font-size:clamp(20px,1.8vw,24px);line-height:1.2}
.built p{font-size:16.5px;line-height:1.6;color:var(--muted);max-width:60ch}
.stack{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-top:28px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.stack b{font:600 12.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}

/* ---------- system map ---------- */
.map{margin-top:clamp(36px,5vw,56px);padding:clamp(18px,3vw,36px);border:1px solid var(--line);border-radius:22px;
  background:radial-gradient(70% 90% at 50% 40%,rgba(20,180,135,.09),rgba(3,16,13,0) 75%),rgba(8,36,28,.25)}
.map svg{display:block;width:100%;height:auto}
.map .tall{display:none;max-width:420px;margin:0 auto}
.map figcaption{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.5;color:var(--muted)}
@media (max-width:719px){ .map .wide{display:none} .map .tall{display:block} }
.m-edge{fill:none;stroke:rgba(111,242,200,.42);stroke-width:1.6}
.m-edge.dash{stroke-dasharray:5 6}
.m-edge.gold{stroke:rgba(232,212,158,.6)}
.m-hex{stroke-width:1.4}
.m-hex.t-core{fill:var(--gold);stroke:var(--gold)}
.m-hex.t-in{fill:#0A3127;stroke:rgba(111,242,200,.55)}
.m-hex.t-out{fill:#0F6B50;stroke:#38D29E}
.m-hex.t-run{fill:#05211A;stroke:rgba(232,212,158,.55)}
.m-lab{font-family:var(--body);font-weight:600;font-size:15px;fill:var(--ink);text-anchor:middle}
.m-sub{font-family:var(--body);font-weight:500;font-size:12.5px;fill:var(--muted);text-anchor:middle}
.m-glyph{font-family:var(--display);font-weight:700;font-size:15px;text-anchor:middle;fill:var(--mint)}
.m-glyph.on-core{fill:#1E1806}
.m-legend{font-family:var(--body);font-size:12.5px;fill:var(--muted)}

/* mid-page CTA card */
.nudge{display:grid;gap:18px;align-items:center;margin-top:clamp(40px,5vw,64px);padding:clamp(24px,3vw,36px);border:1px solid rgba(111,242,200,.28);border-radius:22px;
  background:radial-gradient(80% 120% at 100% 0%,rgba(20,180,135,.14),rgba(3,16,13,0) 70%),var(--panel)}
.nudge h3{font-size:clamp(22px,2vw,28px);line-height:1.15}
.nudge p{margin-top:6px;font-size:16px;line-height:1.55;color:var(--muted)}
.nudge .btn{justify-self:start}
@media (min-width:900px){ .nudge{grid-template-columns:1fr auto} }

/* honesty block */
.limits{display:grid;gap:24px;padding:clamp(26px,4vw,44px);border:1px dashed rgba(232,212,158,.35);border-radius:22px;background:rgba(20,16,4,.25)}
.limits h2{font-size:clamp(26px,2.6vw,38px);color:var(--ink)}
.limits .hexlist{color:var(--ink)}
.limits .hexlist span{color:var(--muted)}
@media (min-width:900px){ .limits{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(32px,5vw,72px)} }

/* related links: typed boxes */
.related{display:grid;gap:18px;margin-top:clamp(32px,4vw,48px)}
.rbox{padding:24px;border:1px solid var(--line);border-radius:18px}
.rbox h3{font:600 12.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--mint);margin-bottom:6px}
.rbox ul{list-style:none}
.rbox li{border-top:1px solid var(--line)}
.rbox li:first-child{border-top:0}
.rbox a{display:block;padding:14px 0;text-decoration:none}
.rbox a strong{display:block;font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em;line-height:1.2;transition:color .2s}
.rbox a span{display:block;margin-top:4px;font-size:14.5px;line-height:1.45;color:var(--muted)}
.rbox a:hover strong{color:var(--mint)}
@media (min-width:900px){ .related{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ---------- hub ---------- */
.cmp{width:100%;margin-top:clamp(32px,4vw,48px);border-collapse:collapse;font-size:15px;line-height:1.45}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:16px 16px 16px 0;border-top:1px solid var(--line)}
.cmp thead th{font:600 12.5px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-top:0;padding-bottom:12px}
.cmp tbody th{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em}
.cmp tbody th a{text-decoration:none;border-bottom:1px solid rgba(238,248,244,.25)}
.cmp tbody th a:hover{color:var(--mint);border-color:var(--mint)}
.cmp td{color:var(--muted)}
.cmp td.st{color:var(--ink);white-space:nowrap}
@media (max-width:899px){
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block}
  .cmp tr{padding:18px 0;border-top:1px solid var(--line)}
  .cmp th,.cmp td{border:0;padding:4px 0}
  .cmp tbody th{font-size:20px;margin-bottom:6px}
  .cmp td{display:grid;grid-template-columns:110px 1fr;gap:12px}
  .cmp td::before{content:attr(data-l);font:600 11.5px/1.6 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .cmp td.st{white-space:normal}
}

.cases{list-style:none;display:grid;gap:22px;margin-top:clamp(32px,4vw,48px)}
.case{display:grid;gap:22px;padding:clamp(24px,3.4vw,40px);border:1px solid var(--line);border-radius:22px;background:var(--panel)}
.case .tag{display:inline-flex;align-items:center;gap:10px;font:600 12.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.case .tag i{width:9px;height:10px;background:currentColor;clip-path:var(--hex)}
.case h3{margin-top:12px;font-size:clamp(24px,2.4vw,34px);line-height:1.1;letter-spacing:-.02em}
.case h3 a{text-decoration:none}
.case h3 a:hover{color:var(--mint)}
.case .who{margin-top:10px;font-size:16px;line-height:1.55;color:var(--muted)}
.case .hexlist{font-size:16px}
.case .links{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:22px;font-size:15px}
.case .links .btn{padding:12px 20px;font-size:15px}
.case .links a:not(.btn){color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(169,196,186,.3)}
.case .links a:not(.btn):hover{color:var(--ink)}
@media (min-width:960px){ .case{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(32px,5vw,72px);align-items:start} .case .hexlist{padding-top:34px} }

.prods{list-style:none;display:grid;gap:18px}
.prods a{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;padding:26px 26px 28px;border:1px solid var(--line);border-radius:18px;text-decoration:none;color:inherit;transition:border-color .2s,background .2s}
.prods a:hover{border-color:rgba(111,242,200,.45);background:rgba(8,36,28,.4)}
.prods .mk{grid-row:1 / span 3;width:22px;height:25px;margin-top:4px;background:var(--gold);clip-path:var(--hex)}
.prods li:nth-child(2) .mk{background:var(--mint)}
.prods h3{font-size:clamp(24px,2.2vw,30px);letter-spacing:-.02em;line-height:1.1}
.prods p{font-size:16px;line-height:1.55;color:var(--muted)}
.prods .url{font-size:14.5px;color:var(--mint)}

.faq{border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-family:var(--display);font-weight:600;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.01em;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;color:var(--mint);font-weight:500}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding:0 0 22px;font-size:16.5px;line-height:1.6;color:var(--muted);max-width:62ch}

/* ---------- final CTA ---------- */
.final{position:relative;overflow:hidden;background:radial-gradient(60% 90% at 85% 40%,rgba(20,180,135,.16),rgba(3,16,13,0) 70%),var(--bg)}
.final h2{font-size:clamp(38px,5vw,76px);max-width:13ch}
.final .lede{max-width:46ch}
.final .ctas{margin-top:32px}
.final .reply{margin-top:18px;font-size:15px}
.hexes{position:absolute;right:clamp(-60px,4vw,80px);top:50%;width:min(380px,40vw);aspect-ratio:1;transform:translateY(-50%);pointer-events:none}
.hexes i{position:absolute;width:var(--s);height:calc(var(--s) * 1.12);left:var(--x);top:var(--y);clip-path:var(--hex);background:var(--c);opacity:var(--o)}

/* ---------- footer ---------- */
.foot{position:relative;display:grid;gap:28px;padding:48px var(--gutter) calc(40px + env(safe-area-inset-bottom));border-top:1px solid var(--line);color:var(--muted);font-size:14px;background:var(--bg)}
.foot-in{max-width:1180px;width:100%;margin:0 auto;display:grid;gap:28px}
.foot-top{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:flex-start}
.foot .brand{font-size:18px;color:var(--ink)}
.foot .brand svg{width:24px}
.foot ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot-bot{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.6}
.foot address{font-style:normal}

/* ---------- small screens ---------- */
@media (max-width:860px){
  .nav a:not(.pill){display:none}
  .nav .pill{padding:8px 12px;font-size:13px;white-space:nowrap}
  .brand{font-size:18px;gap:9px}
  .brand svg{width:26px}
}
/* very narrow phones (320-359 px): tighten the header so brand + brief pill fit without clipping */
@media (max-width:359px){
  .top{padding-left:14px;padding-right:14px}
  .brand{font-size:16px;gap:8px}
  .brand svg{width:23px}
  .top .nav .pill{padding:8px 11px;font-size:12.5px}
}
@media (max-width:767px){
  .top{padding-top:12px;padding-bottom:12px}
  .eyebrow{font-size:12.5px}
  h1{font-size:clamp(32px,9vw,44px)}
  h2{font-size:clamp(27px,7.6vw,38px)}
  .answer{padding:20px 18px}
  .btn{padding:14px 20px;font-size:15px}
  .ctas{gap:10px}
  .split > .head h2{max-width:none}
  .final h2{max-width:11ch}
  .hexes{right:-70px;top:18px;transform:none;width:190px;opacity:.4}
}
@media (prefers-reduced-motion: reduce){ .btn,.prods a,.rbox a strong{transition:none} }

/* ===== H6: subpage hero hex motif (static, CSS only; the home scene's language without WebGL) ===== */
.phero > .wrap{position:relative;z-index:1}
@media (min-width:1100px){
  .phero::before{content:"";position:absolute;z-index:0;pointer-events:none;
    right:max(calc(var(--gutter) - 40px),calc((100% - 1180px) / 2 - 60px));top:50%;width:clamp(340px,30vw,470px);aspect-ratio:540/520;transform:translateY(-46%);
    background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 540 520%22%3E%3Cpolygon points=%22260.0,179.0 321.5,214.5 321.5,285.5 260.0,321.0 198.5,285.5 198.5,214.5%22 fill=%22%23E8D49E%22 opacity=%22.10%22/%3E%3Cpolygon points=%22260.0,193.0 309.4,221.5 309.4,278.5 260.0,307.0 210.6,278.5 210.6,221.5%22 fill=%22%23E8D49E%22 fill-opacity=%22.9%22 stroke=%22%23E8D49E%22 stroke-width=%221.5%22/%3E%3Cpolygon points=%22260.0,205.0 299.0,227.5 299.0,272.5 260.0,295.0 221.0,272.5 221.0,227.5%22 fill=%22none%22 stroke=%22%231E1806%22 stroke-opacity=%22.3%22 stroke-width=%221.2%22/%3E%3Cpolygon points=%22367.4,193.0 416.8,221.5 416.8,278.5 367.4,307.0 318.0,278.5 318.0,221.5%22 fill=%22%2314B487%22 fill-opacity=%22.38%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.7%22 stroke-width=%221.4%22/%3E%3Cpolygon points=%22367.4,241.0 375.2,245.5 375.2,254.5 367.4,259.0 359.6,254.5 359.6,245.5%22 fill=%22%236FF2C8%22 opacity=%22.9%22/%3E%3Cpolygon points=%22152.6,193.0 202.0,221.5 202.0,278.5 152.6,307.0 103.2,278.5 103.2,221.5%22 fill=%22%230A3127%22 fill-opacity=%22.8%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.45%22 stroke-width=%221.2%22/%3E%3Cpolygon points=%22313.7,100.0 363.1,128.5 363.1,185.5 313.7,214.0 264.3,185.5 264.3,128.5%22 fill=%22%2314B487%22 fill-opacity=%22.38%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.7%22 stroke-width=%221.4%22/%3E%3Cpolygon points=%22313.7,148.0 321.5,152.5 321.5,161.5 313.7,166.0 305.9,161.5 305.9,152.5%22 fill=%22%236FF2C8%22 opacity=%22.9%22/%3E%3Cpolygon points=%22206.3,100.0 255.7,128.5 255.7,185.5 206.3,214.0 156.9,185.5 156.9,128.5%22 fill=%22%230A3127%22 fill-opacity=%22.8%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.45%22 stroke-width=%221.2%22/%3E%3Cpolygon points=%22313.7,286.0 363.1,314.5 363.1,371.5 313.7,400.0 264.3,371.5 264.3,314.5%22 fill=%22%2314B487%22 fill-opacity=%22.38%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.7%22 stroke-width=%221.4%22/%3E%3Cpolygon points=%22313.7,334.0 321.5,338.5 321.5,347.5 313.7,352.0 305.9,347.5 305.9,338.5%22 fill=%22%236FF2C8%22 opacity=%22.9%22/%3E%3Cpolygon points=%22206.3,286.0 255.7,314.5 255.7,371.5 206.3,400.0 156.9,371.5 156.9,314.5%22 fill=%22%230A3127%22 fill-opacity=%22.8%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.45%22 stroke-width=%221.2%22/%3E%3Cpolygon points=%22421.1,100.0 470.4,128.5 470.4,185.5 421.1,214.0 371.7,185.5 371.7,128.5%22 fill=%22none%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.28%22 stroke-width=%221.2%22 stroke-dasharray=%224 6%22/%3E%3Cpolygon points=%22367.4,7.0 416.8,35.5 416.8,92.5 367.4,121.0 318.0,92.5 318.0,35.5%22 fill=%22none%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.28%22 stroke-width=%221.2%22 stroke-dasharray=%224 6%22/%3E%3Cpolygon points=%22152.6,379.0 202.0,407.5 202.0,464.5 152.6,493.0 103.2,464.5 103.2,407.5%22 fill=%22none%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.28%22 stroke-width=%221.2%22 stroke-dasharray=%224 6%22/%3E%3Cpolygon points=%22421.1,286.0 470.4,314.5 470.4,371.5 421.1,400.0 371.7,371.5 371.7,314.5%22 fill=%22none%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.28%22 stroke-width=%221.2%22 stroke-dasharray=%224 6%22/%3E%3Cpolygon points=%22474.8,193.0 524.1,221.5 524.1,278.5 474.8,307.0 425.4,278.5 425.4,221.5%22 fill=%22none%22 stroke=%22%236FF2C8%22 stroke-opacity=%22.28%22 stroke-width=%221.2%22 stroke-dasharray=%224 6%22/%3E%3Cpolygon points=%22470.0,74.0 483.9,82.0 483.9,98.0 470.0,106.0 456.1,98.0 456.1,82.0%22 fill=%22%23E8D49E%22 opacity=%220.7%22/%3E%3Cpolygon points=%2270.0,418.0 80.4,424.0 80.4,436.0 70.0,442.0 59.6,436.0 59.6,424.0%22 fill=%22%236FF2C8%22 opacity=%220.6%22/%3E%3Cpolygon points=%22480.0,418.0 499.1,429.0 499.1,451.0 480.0,462.0 460.9,451.0 460.9,429.0%22 fill=%22%236FF2C8%22 opacity=%220.25%22/%3E%3Cpolygon points=%2260.0,101.0 67.8,105.5 67.8,114.5 60.0,119.0 52.2,114.5 52.2,105.5%22 fill=%22%23E8D49E%22 opacity=%220.5%22/%3E%3C/svg%3E") center/contain no-repeat;opacity:.5;
    -webkit-mask:radial-gradient(closest-side,#000 62%,transparent);mask:radial-gradient(closest-side,#000 62%,transparent)}
  .phero.case-hero::before{content:none}
  .phero:not(.case-hero) h1{max-width:min(20ch,calc(100% - 420px))}
  .phero:not(.case-hero) .lede{max-width:min(56ch,calc(100% - 440px))}
  .phero:not(.case-hero) .answer{max-width:min(760px,calc(100% - 400px))}
}

/* ===== H6: case hero with the live screenshot ===== */
.phero-shot{margin:clamp(32px,5vw,48px) 0 0;min-width:0}
.phero-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:left top;
  border:1px solid rgba(111,242,200,.3);border-radius:16px;background:var(--panel);
  box-shadow:0 0 0 6px rgba(111,242,200,.04),0 28px 80px -24px rgba(20,180,135,.45),0 0 70px -10px rgba(111,242,200,.16)}
.phero-shot figcaption{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.phero-shot figcaption i{flex:none;width:8px;height:9px;background:var(--mint);clip-path:var(--hex)}
@media (min-width:1000px){
  .phero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,4.5vw,72px);align-items:center}
  .phero-shot{margin-top:clamp(36px,5vw,64px)}
  .case-hero h1{font-size:clamp(36px,3.5vw,54px);max-width:none}
  .case-hero .answer p{font-size:17px}
}

/* ===== H6: section rhythm, alternate content sections sit on a panel tone ===== */
main > section.sec:not(.final):nth-of-type(odd){background:linear-gradient(rgba(8,36,28,.42),rgba(8,36,28,.42)),var(--bg);border-top-color:transparent}
main > section.sec:not(.final):nth-of-type(odd) + section.sec{border-top-color:transparent}
main > section.sec:not(.final):nth-of-type(odd) .answer,main > section.sec:not(.final):nth-of-type(odd) .nudge{background:rgba(3,16,13,.45)}
.sec.tight{padding-block:clamp(48px,5vw,80px)}

/* ===== H6: phone sticky CTA bar (injected by subpage.js; absent without JS) ===== */
.sbar{display:none}
@media (max-width:767px){
  .sbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -18px 24px rgba(3,16,13,.85);
    transform:translateY(110%);visibility:hidden;transition:transform .3s,visibility 0s .3s}
  .sbar.on{transform:none;visibility:visible;transition:transform .3s,visibility 0s}
  .sbar .btn{display:flex;justify-content:center;width:100%;padding:14px 20px}
  .nav .pill{transition:opacity .25s,visibility 0s}
  .sbar-on .nav .pill{opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
}
.sbar a:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
@media (prefers-reduced-motion: reduce){ .sbar,.nav .pill{transition:none} }
/* H6: give the logo room in the mid-width header */
@media (min-width:861px) and (max-width:1023px){ .nav{gap:20px;font-size:14.5px;margin-left:24px} }

/* ===== H7: hero proof. A phone over the desktop frame, and a fanned stack of the three cases ===== */
.phero-frame{position:relative}
.phero-shot .phero-frame .ph{position:absolute;right:-6px;bottom:-18px;width:23%;aspect-ratio:390/700;object-fit:cover;object-position:top center;
  border:3px solid #22302B;border-radius:18px;box-shadow:0 24px 50px -12px rgba(0,0,0,.75),0 0 0 1px rgba(111,242,200,.25)}
.phero-shot.duo figcaption{margin-top:30px}
.phero-fan{position:relative;aspect-ratio:100/66}
.phero-shot .phero-fan img{position:absolute;width:80%;transform-origin:50% 50%}
.phero-fan img:nth-child(1){left:0;top:0;transform:rotate(-3.5deg);filter:brightness(.7)}
.phero-fan img:nth-child(2){left:10%;top:7%;transform:rotate(-1deg);filter:brightness(.85)}
.phero-fan img:nth-child(3){left:20%;top:14%;transform:rotate(1.5deg)}
.phero-fan + figcaption{margin-top:18px}
/* H7: below the two-column width the screenshot follows the headline, so it is on the first screen */
@media (max-width:999px){
  .phero-grid{display:flex;flex-direction:column}
  .phero-copy{display:contents}
  .phero-grid > .phero-shot{order:1;margin:24px 0 4px}
  .phero-copy > :not(.eyebrow):not(h1){order:2}
}
@media (min-width:600px) and (max-width:999px){ .phero-grid > .phero-shot{max-width:620px} }

/* ===== H7 review fixes ===== */
/* 320 px: brand and brief pill touched (0 px gap); leave at least 8 px between them */
@media (max-width:359px){
  .top{gap:8px}
  .brand{font-size:15px;gap:7px}
  .brand svg{width:22px}
  .top .nav .pill{padding:8px 10px;font-size:12px}
}
/* status line: inline-flex trimmed the space in "Built · launching" */
.status{display:inline-block}
.status i{display:inline-block;margin-right:10px;vertical-align:0}
/* brief page: the header pill pointed at the page you are already on */
.nav .pill[href="/brief/?src=brief"]{display:none}

/* ===== H9/H10: header menu below 1024px, phones included (button and panel injected by subpage.js, so no-JS keeps the links) ===== */
.menu-btn,.menu-panel{display:none}
@media (max-width:1023px){
  .has-menu .nav{gap:12px;margin-left:0}
  .has-menu .nav a:not(.pill){display:none}
  .has-menu .nav .pill{padding:9px 15px;font-size:14px;white-space:nowrap}
  .has-menu .menu-btn{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 15px;border:1px solid rgba(238,248,244,.28);border-radius:999px;
    background:rgba(3,16,13,.45);color:var(--ink);font:600 14.5px/1 var(--body);cursor:pointer;transition:border-color .2s}
  .menu-btn:hover,.menu-btn[aria-expanded="true"]{border-color:var(--mint)}
  .menu-ic{position:relative;display:block;width:16px;height:12px}
  .menu-ic i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
  .menu-ic i:nth-child(1){top:0}
  .menu-ic i:nth-child(2){top:5px}
  .menu-ic i:nth-child(3){top:10px}
  .menu-btn[aria-expanded="true"] .menu-ic i:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] .menu-ic i:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] .menu-ic i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  .has-menu .menu-panel:not([hidden]){display:block;position:absolute;z-index:1;top:calc(100% + 8px);right:clamp(16px,4vw,56px);width:min(300px,calc(100vw - 32px));
    padding:8px;border:1px solid var(--line);border-radius:18px;background:#03100D;box-shadow:0 24px 60px rgba(0,0,0,.5)}
  .menu-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
  .menu-panel a{display:block;padding:13px 14px;border-radius:12px;color:var(--ink);text-decoration:none;font-size:16px}
  .menu-panel a:hover{background:rgba(111,242,200,.08);color:var(--mint)}
  .menu-panel a[aria-current]{color:var(--mint)}
  .menu-panel a:focus-visible{outline-offset:-2px}
}
@media (prefers-reduced-motion: reduce){ .menu-btn,.menu-ic i{transition:none} }
/* H13 D2 narrow phones: the full pill doesn't fit beside brand + menu, so it shrinks to a visible "Brief" (accessible name keeps the full text) */
.menu-cta{display:none}
@media (max-width:519px){
  .has-menu .nav .pill{font-size:0;padding:9px 14px;line-height:1}
  .has-menu .nav .pill::before{content:"Brief";content:"Brief" / "Brief, ";font-size:14px;line-height:1}
}

/* ===== H9: per-page hero motif (industries without a case, About). Replaces the shared hex motif;
   every label in the SVG is taken from that page's own copy. Mirrors .svc-art in services.css. ===== */
.page-art{display:none}
.page-art svg{display:block;width:100%;height:auto;overflow:visible}
.page-art text{font-family:var(--body);font-weight:500;letter-spacing:.005em}
.page-art .h{font:600 19px var(--display);fill:var(--ink)}
.page-art .l{font-size:14px;fill:var(--ink)}
.page-art .m{font-size:13px;fill:var(--muted)}
.page-art .g{font:600 14px var(--display);fill:#1E1806}
.page-art .g.big{font-size:17px}
.page-art .k{font-size:11px;font-weight:600;fill:var(--mint);letter-spacing:.06em}
@media (min-width:1100px){
  .phero:has(> .page-art)::before{content:none}
  .page-art{display:block;position:absolute;z-index:0;pointer-events:none;
    right:max(calc(var(--gutter) - 24px),calc((100% - 1180px) / 2 - 40px));top:50%;width:clamp(360px,31vw,480px);transform:translateY(-46%)}
}
@media (min-width:700px) and (max-width:1099px){
  .phero:has(> .page-art){display:flex;flex-direction:column}
  .phero:has(> .page-art) > .wrap{width:100%}
  .page-art{display:block;order:1;width:min(400px,60%);margin:clamp(32px,5vw,48px) 0 0 max(0px,calc((100% - 1180px) / 2));pointer-events:none}
}

/* "Built to be found" number tiles on case pages */
.found{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:28px 0 32px}
.found > div{position:relative;display:grid;gap:10px;align-content:start;padding:22px 18px 20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,rgba(232,212,158,.11),rgba(232,212,158,.02) 62%);overflow:hidden;transition:border-color .3s,transform .3s}
.found > div::after{content:"";position:absolute;right:-35%;bottom:-55%;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(232,212,158,.2),transparent 70%);pointer-events:none}
.found > div:hover{border-color:rgba(232,212,158,.45);transform:translateY(-3px)}
.found b{font-family:var(--display);font-weight:600;font-size:clamp(32px,3.4vw,50px);line-height:1;letter-spacing:-.03em;color:var(--gold)}
.found span{position:relative;font-size:14px;line-height:1.4;color:var(--muted)}
@media (prefers-reduced-motion: reduce){.found > div{transition:none}.found > div:hover{transform:none}}
@media (min-width:600px){.found:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.found{grid-template-columns:repeat(4,minmax(0,1fr))}.found:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:599px){.found > :nth-child(3):last-child{grid-column:1/-1}}
/* Logo v48: mark and wordmark are one svg; height sets the size */
.brand svg{width:auto;height:34px;flex:none}
.foot .brand svg{width:auto;height:30px}
@media (max-width:860px){.brand svg{height:30px}}
@media (max-width:359px){.brand svg,.foot .brand svg{height:26px}}