/* NetNivaran — design system. Brand Identity System v1.0 · 2026.
   Fonts are self-hosted: no third-party request on any page. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/noto-sans-devanagari-devanagari-400-normal.woff2') format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/noto-sans-devanagari-devanagari-500-normal.woff2') format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/noto-sans-devanagari-devanagari-600-normal.woff2') format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}

/* ═══════════════════════════════════════════════════════════
   NETNIVARAN — BRAND SYSTEM BUILD
   Follows Brand Identity System v1.0 · 2026
   70 field / 20 authority / 10 signal · one accent per section
   Inter · 8px spacing · 12-col grid · Indigo primary actions
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Core palette — §09 */
  --black:#000000;
  --graphite:#3D4450;
  --slate:#5A6270;
  --indigo:#2E2D7A;
  --indigo-lift:#413FA8;
  --white:#FFFFFF;
  --mist:#F4F6F8;
  --line:#E3E8EF;
  --line-soft:#EDF1F5;

  --green:#83BC40;
  --orange:#EC5B24;
  --magenta:#CD1B6C;
  --blue:#217FB3;

  --accent:var(--indigo);

  --sans:'Inter',Arial,Helvetica,sans-serif;
  --deva:'Noto Sans Devanagari','Inter',sans-serif;

  /* 8-point spacing — §15 */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --gut:clamp(20px,5vw,96px);
  --measure:68ch;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--black);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;font-feature-settings:'cv11','ss01'}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:4px}

.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gut)}
section{padding:clamp(56px,8vw,var(--s7)) 0;position:relative}
section.mist{background:var(--mist)}
section.ink{background:var(--black);color:var(--white)}
section.ink p,section.ink .lead{color:rgba(255,255,255,.72)}
section.ink h1,section.ink h2,section.ink h3{color:#fff}

/* ── Type — §12/§13. Sentence case. Left aligned. ── */
h1,h2,h3{margin:0 0 var(--s2);letter-spacing:-.032em;line-height:1.08;font-weight:700}
h1{font-size:clamp(34px,5.2vw,58px);font-weight:800;line-height:1.05}
h2{font-size:clamp(27px,3.7vw,42px);font-weight:700;line-height:1.12}
h3{font-size:clamp(19px,1.8vw,22px);font-weight:600;line-height:1.3;letter-spacing:-.018em;
  margin-bottom:var(--s1)}
h1 b,h2 b{font-weight:inherit;color:var(--accent)}
p{margin:0 0 var(--s2);max-width:var(--measure)}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--slate);max-width:60ch;
  margin-bottom:var(--s3)}
.small{font-size:15px}
.cap{font-size:14px;font-weight:500;color:var(--slate)}
.quiet{color:var(--slate)}
.deva{font-family:var(--deva);font-weight:500}
strong{font-weight:600}
a{color:var(--indigo);text-decoration:none;border-bottom:1px solid rgba(46,45,122,.25);
  transition:border-color .2s ease,color .2s ease}
a:hover{border-bottom-color:var(--indigo)}
section.ink a{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
ul{padding-left:0;list-style:none;max-width:var(--measure)}
ul li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--slate)}
ul li::before{content:'';position:absolute;left:0;top:9px;width:9px;height:10px;
  background:var(--accent);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
section.ink ul li{color:rgba(255,255,255,.72)}

/* ── Section label — a tag, §23 ── */
.seclabel{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  padding:6px 12px;border-radius:999px;margin:0 0 var(--s3);max-width:none;line-height:1}
.seclabel i{font-style:normal;width:8px;height:9px;background:var(--accent);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
section.ink .seclabel{background:rgba(255,255,255,.1);color:#fff}
section.ink .seclabel i{background:#fff}

/* ── One accent per section — §08/§21 ── */
section:nth-of-type(5n+1){--accent:var(--indigo)}
section:nth-of-type(5n+2){--accent:var(--orange)}
section:nth-of-type(5n+3){--accent:var(--magenta)}
section:nth-of-type(5n+4){--accent:var(--blue)}
section:nth-of-type(5n+5){--accent:var(--indigo)}

/* ── Header — §21: compact, 5-6 items, one CTA ── */
header.site{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.site .bar{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:12px 0}
.brand{border:0;display:inline-flex;align-items:center;line-height:0}
.brand img{height:40px;width:auto;display:block}
@media(max-width:520px){.brand img{height:34px}}
nav.main{display:flex;align-items:center;gap:26px}
nav.main a{border:0;color:var(--graphite);font-size:15px;font-weight:500;letter-spacing:-.008em}
nav.main a:hover,nav.main a[aria-current]{color:var(--indigo)}
.navcta{background:var(--indigo);color:#fff!important;padding:10px 18px;border-radius:8px;
  font-size:14px;font-weight:600;transition:background .2s ease}
.navcta:hover{background:var(--indigo-lift)}
@media(max-width:1020px){nav.main{display:none}}
.menubtn{display:none;background:var(--mist);border:1px solid var(--line);color:var(--black);
  font:inherit;font-size:14px;font-weight:600;padding:9px 16px;border-radius:8px;cursor:pointer}
@media(max-width:1020px){.menubtn{display:block}}
#drawer{display:none;border-top:1px solid var(--line);padding:8px 0 20px}
#drawer.open{display:block}
#drawer a{display:block;padding:12px 0;border-bottom:1px solid var(--line-soft);
  color:var(--black);border-left:0;border-right:0;border-top:0;font-size:17px;font-weight:500}
.utility{display:none}

/* ── Buttons — §23: indigo fill, 44-48px, 8-10px radius ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 22px;border:1px solid var(--indigo);border-radius:9px;
  background:var(--indigo);color:#fff;font-family:var(--sans);font-size:15px;font-weight:600;
  letter-spacing:-.008em;cursor:pointer;transition:background .22s ease,border-color .22s ease}
.btn:hover{background:var(--indigo-lift);border-color:var(--indigo-lift)}
.btn.ghost{background:transparent;color:var(--indigo)}
.btn.ghost:hover{background:rgba(46,45,122,.06)}
section.ink .btn{background:#fff;border-color:#fff;color:var(--black)}
section.ink .btn:hover{background:rgba(255,255,255,.88)}
section.ink .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--s4)}
.undercta{font-size:14px;color:var(--slate);margin:14px 0 0;max-width:none}

/* ═══ HERO — §22: one problem, one promise, one action ═══ */
.hero{padding:clamp(40px,6vw,80px) 0 clamp(48px,7vw,88px);overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 60% at 82% 14%, rgba(46,45,122,.07), transparent 70%),
    radial-gradient(48% 48% at 96% 52%, rgba(236,91,36,.05), transparent 70%);}
.hero .wrap{position:relative;z-index:1}
.audience{display:flex;align-items:center;gap:14px;margin:0 0 var(--s5);max-width:none;
  flex-wrap:wrap}
.audience b{font-size:clamp(15px,1.4vw,18px);font-weight:700;letter-spacing:-.01em;
  color:var(--black);background:rgba(46,45,122,.07);padding:7px 15px;border-radius:999px}
.audience span{font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--slate)}

/* 61.8 / 38.2 hero split — §15 */
.herogrid{display:grid;grid-template-columns:61.8fr 38.2fr;gap:clamp(32px,4vw,64px);
  align-items:center}
@media(max-width:940px){.herogrid{grid-template-columns:1fr;gap:var(--s4)}}

.neg{font-size:clamp(21px,2.7vw,34px);font-weight:300;line-height:1.16;letter-spacing:-.035em;
  margin:0 0 6px;max-width:none;color:var(--graphite);transition:opacity .5s ease}
.neg .x{position:relative;background-image:linear-gradient(var(--orange),var(--orange));
  background-repeat:no-repeat;background-position:0 55%;background-size:100% 2px;
  font-weight:600;color:var(--black)}
.js .neg .x{background-size:0% 2px;transition:background-size .5s cubic-bezier(.22,.61,.36,1)}
.js .neg.struck .x{background-size:100% 2px}
.js [data-beat]{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.js [data-beat].in{opacity:1;transform:none}
.js [data-beat].spent{opacity:.42}
.negcol .ans{font-size:16px;color:var(--slate);margin:0 0 4px;max-width:52ch}
.negcol .ans.lead{font-size:clamp(18px,1.7vw,21px);color:var(--black);font-weight:500;
  margin:var(--s4) 0 var(--s5)}
.beat{margin:0 0 var(--s4)}

/* Sticky question panel — hexagon field, §14 */
.askcol{position:relative}
.asksticky{position:sticky;top:120px;background:var(--mist);border:1px solid var(--line);
  border-radius:14px;padding:clamp(24px,3vw,36px)}
.asksticky::after{content:'';position:absolute;right:20px;top:20px;width:64px;height:72px;
  background:var(--indigo);opacity:.05;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.bigq{font-size:clamp(28px,3vw,38px);font-weight:700;line-height:1.08;letter-spacing:-.035em;
  color:var(--indigo);margin:0 0 var(--s3);max-width:none;position:relative}
.dots{display:flex;gap:7px;margin:0 0 12px}
.dots i{width:11px;height:12px;background:var(--line);display:block;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  transition:background .3s ease}
.dots i.on{background:var(--indigo)}
.dotlabel{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate);margin:0}

.final{margin-top:clamp(40px,5vw,72px);padding-top:clamp(32px,4vw,56px);
  border-top:1px solid var(--line)}
.pivot{font-size:clamp(16px,1.5vw,19px);font-weight:500;color:var(--slate);margin:0 0 12px}
.final h1{margin-bottom:var(--s4);max-width:18ch}

/* ── Cards — §22: only for comparable choices ── */
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:var(--s3);
  margin-top:var(--s5);max-width:none}
.qgrid > div{background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:28px 24px 30px;position:relative;overflow:hidden;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease}
.qgrid > div::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--accent)}
.qgrid > div:hover{border-color:#CFD8E3;box-shadow:0 6px 24px rgba(16,24,40,.07);
  transform:translateY(-2px)}
.qgrid > div:nth-child(1){--accent:var(--indigo)}
.qgrid > div:nth-child(2){--accent:var(--orange)}
.qgrid > div:nth-child(3){--accent:var(--magenta)}
.qgrid > div:nth-child(4){--accent:var(--blue)}
.qgrid span{display:block;font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.qgrid p{margin:0;font-size:15px;color:var(--slate)}
.mist .qgrid > div{background:var(--white)}
@media(prefers-reduced-motion:reduce){.qgrid > div:hover{transform:none}}

/* ── Steps ── */
.steps{margin-top:var(--s5);max-width:none;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:16% 84% 1fr;gap:var(--s3);align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--line);transition:background .2s ease}
.step:hover{background:rgba(46,45,122,.025)}
.step em{font-style:normal;font-size:13px;font-weight:700;color:var(--accent);
  letter-spacing:.06em}
.step b{font-size:clamp(18px,1.8vw,22px);font-weight:600;letter-spacing:-.02em}
.step p{margin:0;color:var(--slate);font-size:16px;max-width:56ch}
@media(max-width:780px){.step{grid-template-columns:44px 1fr;gap:6px 16px}
  .step p{grid-column:2}}

/* ── Statistics ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s3);
  margin:var(--s5) 0;max-width:none}
.stats .stat{background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:28px 24px}
.mist .stats .stat{background:var(--white)}
.stat b{display:block;font-size:clamp(34px,4.4vw,52px);font-weight:800;letter-spacing:-.045em;
  line-height:1}
.stat span{display:block;font-size:13px;font-weight:600;color:var(--slate);margin-top:12px;
  letter-spacing:.02em}
.stat.hi b{color:var(--indigo)}

/* ── Quotes, cases, logos ── */
blockquote{margin:var(--s4) 0;padding:20px 24px;background:var(--mist);
  border-left:3px solid var(--accent);border-radius:0 10px 10px 0;
  font-size:clamp(18px,1.8vw,22px);line-height:1.4;font-weight:500;letter-spacing:-.02em;
  max-width:64ch}
.case{border:1px solid var(--line);border-radius:12px;padding:28px 26px;margin:0 0 var(--s3);
  max-width:none;background:var(--white)}
.case .years{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin:0 0 10px}
.case h3{margin-bottom:12px;max-width:44ch}
.case dl{display:grid;grid-template-columns:150px 1fr;gap:10px var(--s3);margin:var(--s3) 0 0;
  font-size:15px;max-width:none;padding-top:var(--s2);border-top:1px solid var(--line-soft)}
.case dt{color:var(--slate);font-weight:600;font-size:12px;letter-spacing:.07em;
  text-transform:uppercase;padding-top:2px}
.case dd{margin:0;color:var(--graphite)}
@media(max-width:680px){.case dl{grid-template-columns:1fr;gap:2px}.case dt{margin-top:14px}}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s3);
  margin-top:var(--s4);max-width:none}
.quotes figure{margin:0;background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:26px 24px}
.quotes blockquote{margin:0 0 18px;padding:0;background:none;border:0;border-radius:0;
  font-size:16px;line-height:1.55;font-weight:400;letter-spacing:-.01em;color:var(--black)}
.quotes figcaption{font-size:14px;color:var(--slate);line-height:1.5}
.quotes figcaption b{display:block;color:var(--black);font-weight:600;margin-bottom:2px}
.logowall{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  margin-top:var(--s4);max-width:none}
.logowall div{background:var(--white);aspect-ratio:5/2;display:grid;place-items:center;
  padding:14px;filter:grayscale(1);opacity:.6;transition:opacity .2s ease,filter .2s ease}
.logowall div:hover{opacity:1;filter:none}
.logonote{font-size:14px;color:var(--slate);margin-top:14px}

/* ── Product rows ── */
.prod{display:grid;grid-template-columns:44px 1fr auto;gap:var(--s3);align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line);max-width:none}
.prod:first-of-type{border-top:1px solid var(--line)}
.prod i{font-style:normal;font-size:13px;font-weight:700;color:var(--accent)}
.prod h3{margin:0 0 5px;font-size:18px}
.prod p{margin:0;color:var(--slate);font-size:15px;max-width:60ch}
.prod a{font-size:14px;font-weight:600;white-space:nowrap;border:0}
@media(max-width:700px){.prod{grid-template-columns:36px 1fr}.prod a{grid-column:2;margin-top:8px}}

/* ── Assessment ── */
.assess{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s2);
  margin-top:var(--s4);max-width:none}
.assess div{background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:18px 18px 20px}
.mist .assess div{background:var(--white)}
.assess b{display:block;font-size:12px;font-weight:700;letter-spacing:.09em;color:var(--accent);
  margin-bottom:8px}
.assess span{font-size:15px;color:var(--graphite)}

/* ── Portrait & diagrams ── */
.portraitgrid{display:grid;grid-template-columns:61.8fr 38.2fr;gap:clamp(32px,4vw,64px);
  align-items:center}
@media(max-width:860px){.portraitgrid{grid-template-columns:1fr}}
.portrait{margin:0}
.portrait img{width:100%;border-radius:14px;display:block}
@media(max-width:860px){.portrait{max-width:280px}}
.quoteh1{font-weight:800}
.mugshot{margin:0 0 var(--s3);max-width:120px}
.mugshot img{width:100%;border-radius:10px;display:block}
.mugshot figcaption{font-size:14px;color:var(--slate);margin-top:8px}
.diagram{margin:var(--s5) 0 0;max-width:none;overflow-x:auto}
.diagram svg{width:100%;min-width:560px;height:auto;display:block}
.diagram figcaption{font-size:14px;color:var(--slate);margin-top:14px}
.dg-cap{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;fill:var(--slate)}
.dg-lbl{font-family:var(--sans);font-size:14px;font-weight:500;text-anchor:middle;
  dominant-baseline:middle;fill:var(--black)}
.dg-note{font-family:var(--sans);font-size:13px;fill:var(--slate)}
.dg-fade{fill:var(--slate)}
.dg-line{fill:none;stroke-width:1.5}
.dg-thick{stroke-width:2.5}
.dg-dash{stroke-dasharray:4 5}
.dg-fragile rect{fill:var(--mist);stroke:var(--line);stroke-width:1}
.dg-fragile .dg-ghost{fill:none;stroke-dasharray:4 4}
.dg-fragile .dg-line{stroke:#C7D0DB}
.dg-solid rect{fill:var(--white);stroke:var(--graphite);stroke-width:1}
.dg-solid .dg-line{stroke:var(--graphite)}
.dg-solid .dg-fill{fill:var(--indigo);stroke:var(--indigo)}
.dg-on{fill:#fff;font-weight:600}
.dg-rule{stroke:var(--line);stroke-width:1}
.dg-node{fill:var(--white);stroke:var(--indigo);stroke-width:1.5}

/* ── FAQ ── */
.faq{margin-top:var(--s4);max-width:760px}
.faq details{border:1px solid var(--line);border-radius:10px;padding:16px 20px;
  margin-bottom:10px;background:var(--white)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--accent);font-weight:600}
.faq details[open] summary::after{content:'–'}
.faq p{margin:12px 0 0;color:var(--slate);font-size:15px}

/* ── Forms — §23: visible labels, clear errors ── */
form{max-width:480px;margin-top:var(--s4)}
label{display:block;font-size:14px;font-weight:600;color:var(--graphite);margin:var(--s3) 0 7px}
label .opt{font-weight:400;color:var(--slate)}
input,textarea,select{width:100%;font:inherit;font-size:16px;padding:12px 14px;
  background:var(--white);color:var(--black);border:1px solid #CFD8E3;border-radius:9px;
  min-height:46px;transition:border-color .18s ease,box-shadow .18s ease}
input:focus,textarea:focus,select:focus{border-color:var(--indigo);outline:none;
  box-shadow:0 0 0 3px rgba(46,45,122,.12)}
textarea{min-height:130px;resize:vertical}
.consent{font-size:14px;color:var(--slate);margin:var(--s3) 0 var(--s2)}
.err{color:#B3261E;font-size:14px;margin:8px 0 0;font-weight:500}
.note{background:var(--mist);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0;padding:18px 22px;margin:var(--s4) 0;max-width:760px;font-size:15px;
  color:var(--graphite)}
.note strong{color:var(--black)}
.note p:last-child{margin-bottom:0}
.placeholder{display:none}
.dev .placeholder{display:block;border:1px dashed #C7D0DB;border-radius:10px;padding:18px 20px;
  color:var(--slate);font-size:14px;margin:var(--s3) 0;max-width:760px;background:var(--mist)}
.devbar{position:fixed;bottom:0;left:0;right:0;background:var(--indigo);color:#fff;
  font-size:13px;font-weight:600;padding:9px;text-align:center;z-index:300;display:none}
.dev .devbar{display:block}

/* ── Self Enquiry ── */
.q{max-width:720px}
.qmeta{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--indigo);margin:0 0 var(--s3)}
.q h2{margin-bottom:var(--s5)}
.opts{list-style:none;margin:0;padding:0;max-width:720px}
.opts li{margin:0 0 12px;padding:0}
.opts li::before{display:none}
.opt-btn{display:block;width:100%;text-align:left;font:inherit;font-size:16px;line-height:1.5;
  background:var(--white);color:var(--black);border:1px solid #CFD8E3;border-radius:11px;
  padding:18px 20px 18px 52px;cursor:pointer;position:relative;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.opt-btn::before{content:'';position:absolute;left:20px;top:21px;width:14px;height:15px;
  background:#D7DEE7;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  transition:background .18s ease}
.opt-btn:hover{border-color:var(--indigo);box-shadow:0 4px 16px rgba(16,24,40,.06)}
.opt-btn[aria-pressed="true"]{border-color:var(--indigo);background:rgba(46,45,122,.05)}
.opt-btn[aria-pressed="true"]::before{background:var(--indigo)}
.progress{height:4px;background:var(--line);border-radius:999px;margin:0 0 var(--s6);
  max-width:720px;overflow:hidden}
.progress i{display:block;height:4px;width:0;background:var(--indigo);
  transition:width .3s ease}
.qnav{margin-top:var(--s4)}
.linkbtn{background:none;border:0;font:inherit;font-size:14px;font-weight:600;
  color:var(--slate);cursor:pointer}
.linkbtn:hover{color:var(--indigo)}
hr{border:0;border-top:1px solid var(--line);margin:var(--s6) 0;max-width:none}

/* ── Footer ── */
footer.site{border-top:1px solid var(--line);background:var(--mist);
  padding:clamp(48px,6vw,var(--s7)) 0 var(--s4)}
footer.site .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:var(--s5)}
footer.site b{display:block;font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--slate);margin-bottom:14px}
footer.site a{display:block;border:0;padding:5px 0;font-size:15px;color:var(--graphite)}
footer.site a:hover{color:var(--indigo)}
.fbase{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;
  color:var(--slate)}
.sr,.skiplink{position:absolute;left:-9999px}
.skiplink:focus{left:0;top:0;background:var(--indigo);color:#fff;padding:12px 20px;z-index:400}
#scrollbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:90;background:var(--indigo)}
#readout{position:fixed;right:var(--gut);bottom:22px;z-index:70;font-size:11px;font-weight:700;
  letter-spacing:.14em;color:#9AA4B2;font-variant-numeric:tabular-nums;pointer-events:none}
.page.enter{animation:pin .28s ease both}
@keyframes pin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .js [data-beat]{opacity:1;transform:none}
  .js .neg .x{background-size:100% 2px}
}

/* ══════════ MOBILE — §22: message order before composition ══════════ */
@media(max-width:940px){
  .askcol{display:none}
  .neg{font-size:clamp(22px,5.6vw,32px)}
}
@media(max-width:700px){
  section{padding:48px 0}
  .hero{padding:28px 0 44px}
  .audience{margin-bottom:var(--s4);font-size:11px}
  .qgrid{gap:var(--s2);margin-top:var(--s4)}
  .qgrid > div{padding:22px 20px 24px}
  .stats{gap:var(--s2);margin:var(--s4) 0}
  .stats .stat{padding:20px}
  .case{padding:22px 20px}
  .quotes figure{padding:20px}
  .steps{margin-top:var(--s4)}
  .step{padding:20px 0}
  .final{margin-top:var(--s5);padding-top:var(--s4)}
  .negcol .ans.lead{margin:var(--s3) 0 var(--s4)}
  .beat{margin-bottom:var(--s3)}
  blockquote{padding:16px 18px;font-size:17px}
  .logowall{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  #readout{display:none}
  form{max-width:none}
  .fbase{font-size:13px}
}

/* ═══════════════════════════════════════════════════════════
   NETNIVARAN — GEOMETRIC SYSTEM
   §14: the identity moves from fragments to a governed system.
   Loose triangles (ungoverned) assemble into the hexagon
   (governed, connected, continuous). Used as sequence and
   structure — never as confetti.
   ═══════════════════════════════════════════════════════════ */

/* ── 1 · The hero signature: fragments becoming a system ── */
.heroart{position:relative;width:100%;max-width:440px;margin:0 auto;aspect-ratio:1/1}
.heroart svg{width:100%;height:100%;overflow:visible}

.frag{transform-box:fill-box;transform-origin:center}
.js .frag{opacity:0}
.js .heroart.run .frag{animation:settle 1.15s cubic-bezier(.34,1.2,.44,1) forwards}
@keyframes settle{
  0%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.55)}
  55%{opacity:1}
  100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}
}
.js .heroart.run .frag:nth-child(1){animation-delay:.05s}
.js .heroart.run .frag:nth-child(2){animation-delay:.14s}
.js .heroart.run .frag:nth-child(3){animation-delay:.23s}
.js .heroart.run .frag:nth-child(4){animation-delay:.32s}
.js .heroart.run .frag:nth-child(5){animation-delay:.41s}
.js .heroart.run .frag:nth-child(6){animation-delay:.50s}
.js .heroart.run .frag:nth-child(7){animation-delay:.59s}
.js .heroart.run .frag:nth-child(8){animation-delay:.68s}
.js .heroart.run .frag:nth-child(9){animation-delay:.77s}
.js .heroart.run .frag:nth-child(10){animation-delay:.86s}
.js .heroart.run .frag:nth-child(11){animation-delay:.95s}
.js .heroart.run .frag:nth-child(12){animation-delay:1.04s}

/* the three signals that stay outside — §14 allows max three clusters */
.signal{transform-box:fill-box;transform-origin:center}
.js .signal{opacity:0}
.js .heroart.run .signal{animation:drift 3.4s ease-in-out infinite}
.js .heroart.run .signal:nth-of-type(1){animation-delay:1.2s}
.js .heroart.run .signal:nth-of-type(2){animation-delay:1.45s}
.js .heroart.run .signal:nth-of-type(3){animation-delay:1.7s}
@keyframes drift{
  0%{opacity:0;transform:translate(0,0)}
  18%{opacity:1}
  50%{opacity:1;transform:translate(3px,-7px)}
  82%{opacity:1}
  100%{opacity:1;transform:translate(0,0)}
}
.heroart .core{transform-box:fill-box;transform-origin:center}
.js .heroart .core{opacity:0}
.js .heroart.run .core{animation:coreIn .7s ease 1.05s forwards}
@keyframes coreIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

.heroart figcaption{position:absolute;left:0;right:0;bottom:-34px;text-align:center;
  font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:#9AA4B2}

@media(prefers-reduced-motion:reduce){
  .js .frag,.js .signal,.js .heroart .core{opacity:1!important;animation:none!important;
    transform:none!important}
}

/* ── 2 · Angled section edges, cut on the hexagon's 30° ── */
.edge-top{position:relative}
.edge-top::before{content:'';position:absolute;left:0;right:0;top:-1px;height:52px;
  background:inherit;clip-path:polygon(0 100%,100% 0,100% 100%)}
@media(max-width:700px){.edge-top::before{height:28px}}

/* ── 3 · Faceted field: low-opacity triangles framing empty space ── */
.facet-field{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.facet-field svg{position:absolute;right:-6%;top:-10%;width:58%;height:auto;opacity:.5}
@media(max-width:940px){.facet-field{display:none}}
section > .wrap{position:relative;z-index:1}

/* ── 4 · SETU as the hexagon: four facets, in order ── */
.setu{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;margin-top:var(--s5)}
@media(max-width:860px){.setu{grid-template-columns:1fr}.setuart{max-width:230px;margin:0 auto}}
.setuart svg{width:100%;height:auto;display:block}
.setuart .fct{fill:#E3E8EF;transition:fill .35s ease}
.setuart .fct.on{fill:var(--c)}
.setuart .fct:nth-child(1){--c:var(--indigo)}
.setuart .fct:nth-child(2){--c:var(--blue)}
.setuart .fct:nth-child(3){--c:var(--green)}
.setuart .fct:nth-child(4){--c:var(--orange)}
.setuart .hub{fill:#fff;stroke:#E3E8EF;stroke-width:1.5}
.setulist{border-top:1px solid var(--line)}
.setustep{display:grid;grid-template-columns:44px 1fr;gap:var(--s2) var(--s3);
  padding:20px 0;border-bottom:1px solid var(--line);cursor:default;
  transition:padding-left .25s ease}
.setustep:hover,.setustep.on{padding-left:10px}
.setustep em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.08em;
  color:#9AA4B2;transition:color .25s ease;padding-top:5px}
.setustep.on em{color:var(--sc)}
.setustep b{display:block;font-size:clamp(18px,1.8vw,22px);font-weight:600;letter-spacing:-.02em;
  margin-bottom:4px}
.setustep p{margin:0;font-size:15px;color:var(--slate);max-width:52ch}
.setustep:nth-child(1){--sc:var(--indigo)}
.setustep:nth-child(2){--sc:var(--blue)}
.setustep:nth-child(3){--sc:var(--green)}
.setustep:nth-child(4){--sc:var(--orange)}
@media(prefers-reduced-motion:reduce){.setustep:hover,.setustep.on{padding-left:0}}

/* ── 5 · The Self Enquiry hexagon: seven questions, seven facets ── */
.enqhex{width:132px;height:auto;display:block;margin:0 0 var(--s4)}
.enqhex .fct{fill:#E9EDF2;transition:fill .4s ease,opacity .4s ease}
.enqhex .fct.on{fill:var(--indigo)}
.enqhex .hub{fill:#E9EDF2;transition:fill .4s ease}
.enqhex .hub.on{fill:var(--indigo)}
.enqwrap{display:flex;gap:var(--s5);align-items:flex-start}
.enqwrap .q{flex:1;min-width:0}
@media(max-width:820px){.enqwrap{display:block}.enqhex{width:96px;margin-bottom:var(--s3)}}

/* ── 6 · Cards: a triangle signal that advances on hover ── */
.qgrid > div{padding-bottom:52px}
.qgrid > div::after{content:'';position:absolute;left:24px;bottom:24px;width:11px;height:12px;
  background:var(--accent);opacity:.3;
  clip-path:polygon(0 0,100% 50%,0 100%);
  transition:transform .28s cubic-bezier(.34,1.2,.44,1),opacity .28s ease}
.qgrid > div:hover::after{transform:translateX(7px);opacity:1}
@media(prefers-reduced-motion:reduce){.qgrid > div:hover::after{transform:none}}

/* ── 7 · Section navigation rail, long pages ── */
.railnav{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:10px}
@media(max-width:1340px){.railnav{display:none}}
.railnav a{display:block;width:11px;height:12px;background:#D7DEE7;border:0;padding:0;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  transition:background .25s ease,transform .25s ease}
.railnav a:hover{background:#9AA4B2;transform:scale(1.25)}
.railnav a.on{background:var(--indigo);transform:scale(1.25)}

/* ── 8 · Statistics: faceted corner ── */
.stats .stat{position:relative;overflow:hidden}
.stats .stat::after{content:'';position:absolute;right:-14px;top:-14px;width:54px;height:60px;
  background:var(--indigo);opacity:.05;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* ── 9 · Buttons: the signal triangle ── */
.btn::after{content:'';width:8px;height:9px;background:currentColor;
  clip-path:polygon(0 0,100% 50%,0 100%);
  transition:transform .25s cubic-bezier(.34,1.2,.44,1)}
.btn:hover::after{transform:translateX(3px)}
.btn.plain::after{display:none}
@media(prefers-reduced-motion:reduce){.btn:hover::after{transform:none}}

/* ═══════════ DEPTH, PRODUCT UI, SECTION RHYTHM ═══════════ */

/* Elevation scale — three real levels, not one flat plane */
:root{
  --e1:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --e2:0 4px 8px -2px rgba(16,24,40,.08), 0 2px 4px -2px rgba(16,24,40,.05);
  --e3:0 12px 24px -6px rgba(16,24,40,.12), 0 6px 12px -6px rgba(16,24,40,.08);
  --e4:0 32px 64px -12px rgba(16,24,40,.20), 0 12px 24px -8px rgba(16,24,40,.10);
}
.qgrid > div{box-shadow:var(--e1)}
.qgrid > div:hover{box-shadow:var(--e3)}
.stats .stat,.case,.quotes figure,.assess div,.faq details{box-shadow:var(--e1)}
.asksticky{box-shadow:var(--e2)}
.navcta{box-shadow:var(--e1)}

/* ── Hero: a layered stage rather than a floating icon ── */
.hero{background:
  radial-gradient(90% 70% at 88% 4%, rgba(46,45,122,.10), transparent 62%),
  radial-gradient(60% 55% at 102% 48%, rgba(236,91,36,.07), transparent 66%),
  radial-gradient(52% 48% at 70% 96%, rgba(33,127,179,.06), transparent 68%),
  var(--white)}
.hero::before{display:none}
.stage3d{position:relative;min-height:440px;perspective:1400px}
@media(max-width:940px){.stage3d{min-height:0;display:flex;flex-direction:column;gap:20px;
  align-items:center;perspective:none}}

.stage3d .heroart{position:absolute;right:-6%;top:-6%;width:230px;margin:0;opacity:.9;z-index:0}
@media(max-width:940px){.stage3d .heroart{position:static;width:140px;order:-1}}

/* ── Product interface ── */
.ui{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  font-size:13px;line-height:1.45;color:var(--black);text-align:left}
.ui-bar{display:flex;align-items:center;gap:6px;padding:9px 14px;background:var(--mist);
  border-bottom:1px solid var(--line)}
.ui-bar span{width:9px;height:9px;border-radius:50%;background:#D7DEE7}
.ui-bar em{font-style:normal;margin-left:10px;font-size:11px;color:#9AA4B2;letter-spacing:.02em}
.ui-body{padding:16px 18px 18px}
.ui-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.ui-head b{font-size:15px;font-weight:700;letter-spacing:-.02em}
.ui-pill{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green);background:rgba(131,188,64,.14);
  padding:4px 9px;border-radius:999px}
.ui-pill.amber{color:#B4530F;background:rgba(236,91,36,.13)}
.ui-rows{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:9px;overflow:hidden}
.ui-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:10px 12px;background:#fff}
.ui-row b{display:block;font-size:12.5px;font-weight:600}
.ui-row em{font-style:normal;font-size:11px;color:#9AA4B2}
.ui-row i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--green)}
.ui-row i.warn{color:#B4530F}
.ui-dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.ui-dot.o{background:var(--orange)}
.ui-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line-soft);font-size:11.5px;color:#9AA4B2}
.ui-foot b{color:var(--indigo);font-weight:600}
.ui-gauge{height:7px;background:var(--line);border-radius:999px;overflow:hidden;margin-bottom:9px}
.ui-gauge i{display:block;height:7px;background:linear-gradient(90deg,var(--orange),#F2A03C)}
.ui-legend{display:flex;justify-content:space-between;font-size:11.5px;color:#9AA4B2;
  margin-bottom:14px}
.ui-legend b{color:var(--black);font-weight:700}
.ui-checks{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ui-checks li{position:relative;padding-left:20px;font-size:12px;color:var(--graphite);margin:0}
.ui-checks li::before{content:'';position:absolute;left:0;top:4px;width:11px;height:11px;
  border-radius:3px;background:rgba(236,91,36,.15);border:1px solid rgba(236,91,36,.4)}
.ui-checks li.yes::before{background:rgba(131,188,64,.2);border-color:rgba(131,188,64,.55)}
.ui-q{font-size:14px;font-weight:600;margin:0 0 12px;letter-spacing:-.015em;max-width:none}
.ui-opt{border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin-bottom:7px;
  font-size:12px;color:var(--graphite)}
.ui-opt.on{border-color:var(--indigo);background:rgba(46,45,122,.05);color:var(--black);
  font-weight:500}
.ui-note{font-size:11px;color:#9AA4B2;margin-top:12px}

/* placement: overlapping, with depth */
.ui-desk{position:absolute;left:0;top:26px;width:88%;box-shadow:var(--e4);z-index:2;
  transform:rotateY(-7deg) rotateX(2deg)}
.ui-score{position:absolute;right:-4%;bottom:0;width:60%;box-shadow:var(--e4);z-index:3;
  transform:rotateY(-7deg) rotateX(2deg)}
@media(max-width:940px){
  .ui-desk,.ui-score{position:static;width:100%;max-width:420px;transform:none;
    box-shadow:var(--e3)}
}
@media(prefers-reduced-motion:reduce){.ui-desk,.ui-score{transform:none}}

/* ── Showcase: a dark band breaks the white monotony ── */
.showcase{background:#0E0E1C;color:#fff;
  background-image:radial-gradient(70% 90% at 12% 0%, rgba(46,45,122,.55), transparent 62%),
    radial-gradient(60% 80% at 92% 100%, rgba(205,27,108,.25), transparent 60%)}
.showcase h2,.showcase h3{color:#fff}
.showcase .lead,.showcase p{color:rgba(255,255,255,.7)}
.showcase .seclabel{background:rgba(255,255,255,.1);color:#fff}
.showcase .seclabel i{background:#fff}
.showcase .btn{background:#fff;border-color:#fff;color:#0E0E1C}
.showcase .btn:hover{background:rgba(255,255,255,.88);border-color:rgba(255,255,255,.88)}
.showcase .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.showcase .btn.ghost:hover{background:rgba(255,255,255,.08)}
.showgrid{display:grid;grid-template-columns:38.2fr 61.8fr;gap:clamp(28px,4vw,64px);
  align-items:center;margin-top:var(--s5)}
@media(max-width:860px){.showgrid{grid-template-columns:1fr}}
.showgrid .ui{box-shadow:var(--e4)}
.edge-top::before{background:#0E0E1C}

/* Product UI keeps its own colours inside inverted sections */
.showcase .ui,.showcase .ui *,section.ink .ui,section.ink .ui *{color:var(--black)}
.showcase .ui .ui-q{color:var(--black)}
.showcase .ui em,.showcase .ui .ui-note,.showcase .ui .ui-legend,
.showcase .ui .ui-foot{color:#9AA4B2}
.showcase .ui .ui-opt{color:var(--graphite)}
.showcase .ui .ui-pill{color:var(--green)}
.showcase .ui .ui-foot b{color:var(--indigo)}
.showcase .ui-row i{color:var(--green)}
/* the angled edge must not leave a sliver */
.edge-top{margin-top:-1px}
.edge-top::before{top:-40px;height:64px;clip-path:polygon(0 100%,100% 24px,100% 100%)}
@media(max-width:700px){.edge-top::before{top:-22px;height:36px;clip-path:polygon(0 100%,100% 14px,100% 100%)}}

.final h1{max-width:15ch;text-wrap:balance}
@media(max-width:700px){.final h1{max-width:none}}

/* Self Enquiry — reassurance beside the question, not before it */
.enqwrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(28px,4vw,64px);
  align-items:start}
.enqside{margin:0;position:sticky;top:110px}
.enqside .enqhex{width:110px;margin-bottom:14px}
.enqside figcaption{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate);margin-bottom:18px}
.enqnote{font-size:13px;line-height:1.5;color:var(--slate);margin:0 0 12px;max-width:none}
@media(max-width:860px){
  .enqwrap{grid-template-columns:1fr;gap:18px}
  .enqside{position:static;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .enqside .enqhex{width:54px;margin:0}
  .enqside figcaption{margin:0}
  .enqnote{font-size:12px;flex:1 1 100%;margin:0}
  .enqnote:last-of-type{display:none}
}

.enqh1{font-size:clamp(20px,2.2vw,27px);font-weight:700;letter-spacing:-.025em;
  margin:0 0 var(--s5);color:var(--graphite)}
@media(max-width:860px){.enqh1{margin-bottom:var(--s3)}}

/* ═══════════════════════════════════════════════════════════
   THE QUESTION SYSTEM
   Every section is one question. The mark sits outlined — an
   open loop. When the section is read, the mark fills: the
   question has been answered. A thread runs down the page
   joining one question to the next; it fills as you go.
   Open → answered → the next one opens. That is the momentum.
   ═══════════════════════════════════════════════════════════ */

.qs{padding:clamp(64px,9vw,120px) 0;border-top:1px solid var(--line-soft)}
.qs-grid{display:grid;grid-template-columns:clamp(84px,9vw,128px) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);align-items:start}

/* the rail */
.qs-rail{position:sticky;top:96px;display:flex;flex-direction:column;align-items:flex-start;
  height:calc(100% - 20px)}
.qs-mark{font-size:clamp(76px,8.4vw,124px);font-weight:800;line-height:.82;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:2px var(--accent);
  transition:color .6s ease,-webkit-text-stroke-color .6s ease,transform .6s cubic-bezier(.34,1.3,.44,1);
  display:block;user-select:none}
.qs.answered .qs-mark{color:var(--accent);transform:rotate(-4deg)}
.qs-num{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent);
  margin:14px 0 0 4px}
.qs-line{display:block;width:2px;flex:1;min-height:60px;margin:18px 0 0 6px;
  background:linear-gradient(var(--accent),var(--accent)) no-repeat top/100% var(--fill,0%),
             var(--line);border-radius:2px}

/* the question is the headline */
.qs-q{font-size:clamp(30px,4.4vw,54px);font-weight:800;letter-spacing:-.04em;line-height:1.05;
  max-width:18ch;margin:0 0 var(--s4);color:var(--black)}
.qs-body .lead{margin-bottom:var(--s3)}
.qs-sub{font-size:clamp(18px,1.8vw,22px);font-weight:600;letter-spacing:-.02em;
  color:var(--accent);margin:var(--s4) 0 var(--s2);max-width:34ch;line-height:1.35}

/* the hand-off to the next question — the loop reopens */
.qs-next{display:inline-flex;flex-direction:column;gap:6px;margin-top:var(--s6);
  padding:18px 22px 20px 20px;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0;background:var(--white);box-shadow:var(--e1);
  text-decoration:none;max-width:100%;
  transition:transform .25s cubic-bezier(.34,1.2,.44,1),box-shadow .25s ease}
.qs-next:hover{transform:translateX(6px);box-shadow:var(--e3);border-bottom-color:var(--line)}
.qs-next span{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate)}
.qs-next b{font-size:clamp(18px,1.9vw,23px);font-weight:700;letter-spacing:-.025em;
  color:var(--black);display:flex;align-items:center;gap:10px}
.qs-next b::after{content:'?';font-size:1.15em;font-weight:800;color:var(--accent);
  transition:transform .25s ease}
.qs-next:hover b::after{transform:rotate(-12deg) scale(1.15)}

/* Q4 is the inverted band */
.qs.showcase{border-top:0}
.qs.showcase .qs-q{color:#fff}
.qs.showcase .qs-mark{-webkit-text-stroke-color:rgba(255,255,255,.8)}
.qs.showcase.answered .qs-mark{color:#fff}
.qs.showcase .qs-num{color:rgba(255,255,255,.7)}
.qs.showcase .qs-line{background:linear-gradient(#fff,#fff) no-repeat top/100% var(--fill,0%),
  rgba(255,255,255,.15)}
.qs.showcase .qs-next{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);
  border-left-color:#fff;box-shadow:none}
.qs.showcase .qs-next span{color:rgba(255,255,255,.6)}
.qs.showcase .qs-next b{color:#fff}
.qs.showcase .qs-next b::after{color:#fff}
.qs.showcase .showgrid{grid-template-columns:61.8fr 38.2fr;margin-top:var(--s4)}
@media(max-width:860px){.qs.showcase .showgrid{grid-template-columns:1fr}}

/* the final question — the only one that is left open, deliberately */
.qs-final{background:var(--mist);border-top:0}
.qs-final .qs-mark{-webkit-text-stroke-width:3px}
.qs-final.answered .qs-mark{color:transparent;transform:none}
.qs-final .qs-line{display:none}
.qs-final .qs-q{max-width:16ch}
.qs-final .pivot{font-size:clamp(17px,1.6vw,20px);font-weight:600;color:var(--indigo);margin-bottom:12px}

/* hero hand-off */
.hero-jump{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:var(--s5);
  padding-top:var(--s4);border-top:1px solid var(--line)}
.hero-jump span{font-size:14px;color:var(--slate)}
.jumplink{font-size:15px;font-weight:600;border:0;display:inline-flex;align-items:center;gap:8px}
.jumplink::after{content:'?';font-weight:800;color:var(--orange)}

/* stats and grids inside the question body */
.qs .qgrid,.qs .stats{margin-top:var(--s4)}
.qs .diagram{margin-top:var(--s5)}
.qs .setu{margin-top:var(--s4)}

@media(prefers-reduced-motion:reduce){
  .qs-mark,.qs-next,.qs-next b::after{transition:none}
  .qs.answered .qs-mark{transform:none}
}

/* ── mobile: the rail folds into a marker above the question ── */
@media(max-width:780px){
  .qs{padding:56px 0}
  .qs-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .qs-rail{position:static;flex-direction:row;align-items:center;gap:12px;height:auto;
    margin-bottom:var(--s2)}
  .qs-mark{font-size:56px}
  .qs-num{margin:0}
  .qs-line{display:none}
  .qs-q{font-size:clamp(28px,7.6vw,36px);max-width:none}
  .qs-next{margin-top:var(--s5);width:100%}
  .hero-jump{flex-direction:column;align-items:flex-start;gap:8px}
}

.qs-body{min-width:0}
.qs .diagram{max-width:100%}

/* ═══════════ THE FLYWHEEL ═══════════
   Six facets, six stages. Multi-colour is allowed here and only here:
   each colour codes a stage (Brand System §10, §14). */
.qs-mist{background:var(--mist)}
.fw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);
  align-items:center;margin:var(--s5) 0 var(--s4)}
@media(max-width:900px){.fw{grid-template-columns:1fr}}
.fw-wheel{position:relative;aspect-ratio:1/1;width:100%;max-width:440px;margin:0 auto;
  cursor:grab;touch-action:pan-y;user-select:none}
.fw-wheel:active{cursor:grabbing}
.fw-wheel svg{width:100%;height:100%;overflow:visible;display:block}
.fw-hub{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;pointer-events:none;text-align:center}
.fw-hub em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--slate)}
.fw-hub b{font-size:clamp(19px,2.3vw,26px);font-weight:800;letter-spacing:-.03em;margin-top:3px}
.fw-num{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin:0 0 10px}
.fw-name{font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.04em;line-height:1.05;
  margin:0 0 12px}
.fw-text{font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:var(--graphite);max-width:44ch;
  margin:0 0 22px;min-height:5.2em}
.fw-chips{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:0 0 22px}
@media(max-width:560px){.fw-chips{grid-template-columns:repeat(3,1fr)}}
.fw-chips div{padding:9px 8px 10px;border-radius:9px;border:1px solid var(--line);background:#fff;
  font-size:12px;font-weight:600;color:var(--slate);line-height:1.3;
  transition:none}
.fw-chips div b{display:block;font-size:10px;letter-spacing:.08em;opacity:.75;margin-bottom:2px}
.fw-chips div.on{color:#fff;border-color:transparent}
.fw-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fw-meter{display:block;width:130px;height:5px;background:var(--line);border-radius:999px;overflow:hidden}
.fw-meter i{display:block;height:5px;width:0;background:var(--indigo);border-radius:999px}
.fw-close{max-width:62ch;color:var(--graphite);margin-top:var(--s4)}
.fw-close b{color:var(--black)}
@media(max-width:900px){.fw-wheel{max-width:320px}.fw-text{min-height:0}}

/* ── Hero: the question, with the dual-colour wheel beside it ── */
.askwheel{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(12px,1.6vw,24px);
  align-items:center;padding:clamp(24px,2.6vw,34px)}
.askwheel::after{display:none}
.askwheel .bigq{margin-bottom:14px}
.herowheel{position:relative;aspect-ratio:1/1;width:100%;max-width:280px;margin-left:auto;
  cursor:grab;touch-action:pan-y;user-select:none}
.herowheel:active{cursor:grabbing}
.herowheel svg{width:100%;height:100%;overflow:visible;display:block}
.herowheel .hf{transition:fill .45s ease}

.nw{white-space:nowrap}
.askwheel .bigq{font-size:clamp(26px,2.6vw,36px)}
.askwheel .dotlabel{white-space:nowrap;font-size:11px}

/* ═══════════ FOLD DETAILS ═══════════ */

/* Q1 — Design. Govern. Grow., in manual-coded colour (§10) */
.brandline{font-weight:700;color:var(--black);white-space:nowrap}
.dgg{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin:var(--s4) 0 var(--s3)}
@media(max-width:820px){.dgg{grid-template-columns:1fr;gap:var(--s2)}}
.dgg-col{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:22px 22px 20px;box-shadow:var(--e1);outline:none;
  transition:opacity .25s ease,transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.dgg-col::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;
  background:var(--c);border-radius:12px 12px 0 0}
.dgg:hover .dgg-col,.dgg:focus-within .dgg-col{opacity:.5}
.dgg .dgg-col:hover,.dgg .dgg-col:focus{opacity:1;transform:translateY(-3px);box-shadow:var(--e3);
  border-color:color-mix(in srgb,var(--c) 45%,var(--line))}
.dgg-h{display:flex;align-items:center;gap:9px;font-size:clamp(20px,2vw,24px);font-weight:800;
  letter-spacing:-.03em}
.dgg-h i{width:13px;height:14px;background:var(--c);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.dgg-sub{font-size:13px;font-weight:600;color:var(--slate);margin:6px 0 14px}
.dgg-col ul{margin:0;padding:0}
.dgg-col li{padding-left:18px;margin-bottom:8px;font-size:15px;color:var(--graphite)}
.dgg-col li::before{width:6px;height:7px;top:9px;background:var(--c)}
.dgg-foot{color:var(--slate)}
@media(prefers-reduced-motion:reduce){.dgg .dgg-col:hover,.dgg .dgg-col:focus{transform:none}}

/* Q2 — the enquiry that travels */
.dg-dot{stroke:#fff;stroke-width:2.5}
.dg-dot.lost{fill:var(--orange)}
.dg-dot.kept{fill:var(--green)}
@media(prefers-reduced-motion:reduce){.dg-dot{display:none}}

/* Q5 — count your own records */
.calc{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--e2);
  padding:clamp(20px,2.4vw,30px);margin:var(--s4) 0;max-width:760px;
  border-top:4px solid var(--indigo)}
.calc-h{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--indigo);margin:0 0 18px}
.calc-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) 76px;gap:16px;
  align-items:center;margin:0 0 16px;font-size:15px;font-weight:500;color:var(--graphite);cursor:pointer}
.calc-row output{font-weight:700;color:var(--black);text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:620px){.calc-row{grid-template-columns:1fr 70px;gap:6px 12px}
  .calc-row span{grid-column:1/-1}}
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;
  border-radius:999px;background:var(--line);outline:none;margin:0;min-height:0;padding:0;border:0}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;
  border-radius:50%;background:var(--magenta);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
.calc input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;
  background:var(--magenta);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
.calc input[type=range]:focus-visible{outline:2px solid var(--magenta);outline-offset:6px}
.calc-total{display:flex;flex-direction:column;gap:4px;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--line)}
.calc-total span{font-size:13px;font-weight:600;color:var(--slate)}
.calc-total b{font-size:clamp(38px,5vw,56px);font-weight:800;letter-spacing:-.045em;line-height:1;
  color:var(--indigo);font-variant-numeric:tabular-nums}
.calc-total small{font-size:12px;color:var(--slate)}

/* Q6 — the gap, made visible */
.gapbar{margin:var(--s4) 0;max-width:760px}
.gb-track{height:14px;border-radius:999px;background:repeating-linear-gradient(-45deg,
  #EEF1F5 0 6px,#E3E8EF 6px 12px);overflow:hidden}
.gb-fill{height:100%;width:0;background:var(--blue);border-radius:999px;
  transition:width 1.4s cubic-bezier(.22,.61,.36,1)}
.gapbar.in .gb-fill{width:48.3%}
.gb-labels{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:14px;
  color:var(--slate);flex-wrap:wrap}
.gb-labels b{color:var(--black);font-weight:700}
.gb-labels span:first-child b{color:var(--blue)}
@media(prefers-reduced-motion:reduce){.gb-fill{transition:none}.gapbar .gb-fill{width:48.3%}}

/* Q7 — the seven facets, waiting */
.q7grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);
  align-items:center}
@media(max-width:820px){.q7grid{grid-template-columns:1fr}.q7fig{order:-1}}
.q7fig{margin:0;text-align:center}
.q7fig .enqhex{width:clamp(120px,14vw,170px);height:auto;margin:0 auto 12px}
.q7fig .enqhex .fct,.q7fig .enqhex .hub{fill:#E3E8EF;stroke:#F4F6F8;stroke-width:3;
  transition:fill .3s ease}
.q7fig .enqhex .fct.on,.q7fig .enqhex .hub.on{fill:var(--indigo)}
.q7fig figcaption{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
@media(max-width:820px){.q7fig .enqhex{width:96px}}

/* Four gaps sit two by two inside the question column — never three and one */
.qs .qgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:620px){.qs .qgrid{grid-template-columns:1fr}}
/* the clipped corner hexagon read as a rendering fault — removed */
.stats .stat::after{display:none}

/* ═══════════ FOLD DETAILS · second pass ═══════════ */

/* Colour stays behind once a question is answered — a faint wash of its accent */
.qs{isolation:isolate}
.qs::before{content:'';position:absolute;left:0;top:0;width:min(62vw,900px);height:420px;
  z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s ease;
  background:radial-gradient(60% 70% at 8% 12%,
    color-mix(in srgb,var(--accent) 11%,transparent),transparent 70%)}
.qs.answered::before{opacity:1}
.qs.showcase::before,.qs-final::before{display:none}

@media(prefers-reduced-motion:reduce){
  .qs::before{transition:none}
}
/* Native SVG animation ignores the OS motion setting, so honour it here */
@media(prefers-reduced-motion:reduce){ .dg-dot{display:none} }

/* ═══════════ INNER PAGES — the question as the page title ═══════════ */
.qs-hero{padding-top:clamp(48px,6vw,88px);border-top:0}
.qs-hero .qs-h1{font-size:clamp(36px,5.4vw,66px);max-width:17ch;margin-bottom:var(--s4)}
.qs-hero .seclabel{margin-bottom:var(--s3)}
.qs-hero .qs-mark{font-size:clamp(92px,10vw,148px)}
.founder-quote{font-size:clamp(20px,2.2vw,28px);font-weight:600;letter-spacing:-.025em;line-height:1.3;
  color:var(--black);max-width:30ch;margin:0 0 var(--s3)}
.qs-body > .portraitgrid{margin-top:var(--s2)}
@media(max-width:780px){
  .qs-hero{padding-top:36px}
  .qs-hero .qs-h1{font-size:clamp(32px,8.6vw,42px)}
  .qs-hero .qs-mark{font-size:62px}
}

/* ═══════════ THE HEXAGON SYSTEM ═══════════ */
.hx{display:block;margin:var(--s4) 0}
.hx svg{display:block;width:100%;height:auto;overflow:visible}
.hxf{transition:opacity .22s ease,transform .22s ease;transform-box:fill-box;transform-origin:center}
.hxf.fade{opacity:.18}
.hxf[tabindex]{cursor:pointer;outline:none}
.hxf[tabindex]:focus-visible{stroke:var(--black);stroke-width:3}
.hx-lbl{font:700 15px Inter,Arial,sans-serif;letter-spacing:-.01em;fill:var(--black)}
.hx-lbl.dim{fill:#B8C0CB}
.hx-core{font:800 17px Inter,Arial,sans-serif;fill:var(--black);letter-spacing:-.02em}
.hx-num{font:700 13px Inter,Arial,sans-serif;fill:#fff;pointer-events:none}

/* What we do: hexagon beside a line of instruction */
.hx-row{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:var(--s5);align-items:center;
  margin:var(--s4) 0 var(--s5)}
.hx-row .hx{margin:0}
.hx-row p{color:var(--slate);max-width:40ch;margin:0}
@media(max-width:760px){.hx-row{grid-template-columns:1fr}.hx-row .hx{max-width:240px}}
.dgg-col{transition:opacity .22s ease,box-shadow .22s ease,transform .22s ease}
.dgg-col.hl{box-shadow:var(--e3);transform:translateY(-3px)}

/* Service pages: a small "where this sits" hexagon in the opening */
.qs-hero .qs-body{position:relative}
.hx-sits{position:absolute;right:0;top:4px;width:220px;margin:0;text-align:center}
.hx-sits .hx{margin:0}
.hx-sits figcaption{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-top:6px}
.hx-sits figcaption b{color:var(--accent)}
.qs-hero .qs-body:has(.hx-sits) .qs-h1,.qs-hero .qs-body:has(.hx-sits) .lead{max-width:min(17ch,calc(100% - 250px))}
.qs-hero .qs-body:has(.hx-sits) .lead{max-width:calc(100% - 260px)}
@media(max-width:980px){.hx-sits{position:static;width:180px;margin:0 0 var(--s3)}
  .qs-hero .qs-body:has(.hx-sits) .qs-h1,.qs-hero .qs-body:has(.hx-sits) .lead{max-width:none}}

/* Desk + team: hexagon with a live panel */
.hx-deskgrid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--s5);align-items:center}
@media(max-width:760px){.hx-deskgrid{grid-template-columns:1fr}.hx-fig{max-width:260px}}
.hx-panel{min-height:9.5em;border-left:3px solid var(--accent);padding:4px 0 4px 22px}
.hx-kind{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--indigo);margin:0 0 6px}
.hx-kind.product{color:var(--orange)}
.hx-kind.service{color:var(--indigo)}
.hx-name{font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.03em;margin:0 0 8px;color:var(--black)}
.hx-desc{font-size:16px;line-height:1.55;color:var(--graphite);margin:0;max-width:44ch}

/* DPDP: seven-facet hexagon beside the section tiles */
.hx-split{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:var(--s5);align-items:center;margin-top:var(--s4)}
.hx-split .hx{margin:0}
.hx-split .assess{margin-top:0}
@media(max-width:860px){.hx-split{grid-template-columns:1fr}.hx-split .hx{max-width:220px}}
.assess > div{transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;cursor:default}
.assess > div.hl{border-color:var(--magenta);box-shadow:var(--e3);transform:translateY(-2px)}
.assess > div:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}

/* Proof: tenure hexagon on each testimonial */
.hx-ten{display:inline-block;width:34px;height:34px;vertical-align:middle;margin:0 0 14px}
.hx-ten svg{width:100%;height:100%}

/* Founder: the journey */
.hx-journey{list-style:none;padding:0;margin:var(--s5) 0 0;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
  position:relative;max-width:none}
.hx-journey::before{content:'';position:absolute;left:8%;right:8%;top:25px;height:2px;background:var(--line);z-index:0}
.hx-journey li{position:relative;z-index:1;text-align:center;padding:0;margin:0;cursor:default;outline:none}
.hx-journey li::before{display:none}
.hx-journey svg{width:52px;height:52px;margin:0 auto 8px;display:block;transition:transform .22s cubic-bezier(.34,1.3,.44,1)}
.hx-journey li.on svg,.hx-journey li:focus-visible svg{transform:scale(1.18)}
.hx-journey li:focus-visible span{outline:2px solid var(--indigo);outline-offset:2px}
.hx-journey span{font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:var(--graphite);line-height:1.3;display:block}
.hx-journey li.on span{color:var(--black)}
.hx-jcap{margin:var(--s3) 0 0;font-size:17px;line-height:1.55;color:var(--graphite);min-height:1.6em;max-width:60ch}
@media(max-width:700px){.hx-journey{grid-template-columns:repeat(3,1fr);row-gap:22px}.hx-journey::before{display:none}}

/* 404: the fallen facet */
.hx-broken{max-width:260px;margin:var(--s4) 0}
.hxf.fallen{animation:fall 3.6s ease-in-out infinite}
@keyframes fall{0%,100%{transform:translate(18px,-14px) rotate(12deg)}50%{transform:translate(24px,-24px) rotate(18deg)}}

/* Every inner page's opening: a faint hexagon in the page's accent */
.qs-hero{overflow:hidden}
.qs-hero::after{content:'';position:absolute;right:-90px;top:-70px;width:440px;height:500px;pointer-events:none;z-index:-1;
  background:var(--accent);opacity:.06;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-110 -110 220 220'%3E%3Cpolygon points='0,-100 86.6,-50 86.6,50 0,100 -86.6,50 -86.6,-50' fill='none' stroke='black' stroke-width='22'/%3E%3Cpolygon points='0,-52 45,-26 45,26 0,52 -45,26 -45,-26' fill='none' stroke='black' stroke-width='10'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-110 -110 220 220'%3E%3Cpolygon points='0,-100 86.6,-50 86.6,50 0,100 -86.6,50 -86.6,-50' fill='none' stroke='black' stroke-width='22'/%3E%3Cpolygon points='0,-52 45,-26 45,26 0,52 -45,26 -45,-26' fill='none' stroke='black' stroke-width='10'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:780px){.qs-hero::after{width:260px;height:300px;right:-80px;top:-40px}}

@media(prefers-reduced-motion:reduce){.hxf.fallen{animation:none;transform:translate(20px,-18px) rotate(14deg)}
  .hxf,.dgg-col,.assess > div,.hx-journey svg{transition:none}}
/* The background hexagon steps aside wherever the opening carries its own */
.qs-hero:has(.hx-sits)::after{display:none}
.qs-hero::after{opacity:.045}

/* ═══════════ HERO — EMPTY THE CENTRE ═══════════ */
.stage{position:relative;width:100%;max-width:440px;margin:0 auto;aspect-ratio:1/1;touch-action:none;user-select:none}
.stage svg{width:100%;height:100%;overflow:visible;display:block}
.hfacet{transition:fill .5s ease,opacity .25s ease}
.track{stroke:var(--line);stroke-width:2;stroke-dasharray:3 6}
.weight{cursor:grab;outline:none}
.weight:active{cursor:grabbing}
.weight circle{filter:drop-shadow(0 6px 14px rgba(16,24,40,.28))}
.weight:focus-visible circle{stroke:var(--orange);stroke-width:4}
.weight text{font:700 12px var(--sans);fill:#fff;text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.hint{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);background:#fff;padding:5px 12px;
  border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate);white-space:nowrap;pointer-events:none;box-shadow:var(--e1);margin:0}
.fwpanel{margin-top:26px;max-width:440px;margin-left:auto;margin-right:auto}
.rowline{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.rowline b{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--slate);width:92px;flex:none}
.rowline em{font-style:italic}
.meter{flex:1;height:6px;background:var(--line);border-radius:999px;overflow:hidden}
.meter i{display:block;height:6px;width:0;background:var(--indigo);border-radius:999px;transition:width .12s linear}
.meter.inertia i{background:var(--orange)}
.val{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;width:56px;text-align:right}
.fwstate{font-size:15px;line-height:1.5;color:var(--slate);margin:14px 0 0;min-height:4.4em;max-width:42ch}
.fwstate b{color:var(--black)}
.fwcontrols{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px}
.fwslider{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate)}
.fwslider input{accent-color:var(--indigo);width:120px}
.turn .kicker-nn{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin:0 0 14px}
.bigline{font-size:clamp(32px,4.6vw,58px);font-weight:800;letter-spacing:-.04em;line-height:1.05;
  margin:0 0 var(--s3);max-width:20ch}
.bigline b{font-weight:inherit;color:var(--orange)}
.turn{border-top:1px solid var(--line);padding-top:clamp(28px,4vw,44px);margin-top:clamp(28px,4vw,48px)}
@media(max-width:940px){
  .askcol{display:block}
  .stage{max-width:300px}
  .fwpanel{max-width:none}
}

/* Q4 — the six weights, named */
.wgrid{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(24px,4vw,56px);
  align-items:center;margin:var(--s5) 0 var(--s4)}
@media(max-width:760px){.wgrid{grid-template-columns:1fr}.wfig{max-width:240px;margin:0 auto}}
.wfig svg{width:100%;height:auto;display:block;overflow:visible}
.wlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:none}
@media(max-width:560px){.wlist{grid-template-columns:1fr}}
.wlist li{margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;
  position:relative;outline:none;transition:box-shadow .2s ease,transform .2s ease}
.wlist li::before{display:none}
.wlist li:hover,.wlist li:focus-visible{box-shadow:var(--e3);transform:translateY(-2px)}
.wlist i{display:inline-block;width:9px;height:10px;margin-right:8px;vertical-align:middle;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.wlist b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.wlist span{display:block;font-size:13px;color:var(--slate);margin-top:2px}

/* Logo — core lockup in the header, full signature in the footer (Brand System §04) */
.brand img{height:44px;width:auto}
@media(max-width:520px){.brand img{height:36px}}
.fsig{display:block;height:74px;width:auto;margin:0 0 var(--s4)}
@media(max-width:600px){.fsig{height:58px}}


/* ── Staging only: feedback button ── */
.fb{position:fixed;left:20px;bottom:20px;z-index:500;font-family:var(--sans)}
.fb-open{background:var(--black);color:#fff;border:0;border-radius:999px;padding:11px 18px;
  font:600 14px var(--sans);cursor:pointer;box-shadow:var(--e3)}
.fb-open:hover{background:var(--indigo)}
.fb-panel{position:absolute;left:0;bottom:54px;width:min(360px,calc(100vw - 40px));background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:20px 20px 18px;box-shadow:var(--e4);margin:0;max-width:none}
.fb-title{font-weight:800;font-size:17px;letter-spacing:-.02em;margin:0 0 4px}
.fb-hint{font-size:13px;color:var(--slate);margin:0 0 10px;line-height:1.45}
.fb-panel label{margin-top:12px}
.fb-panel textarea{min-height:96px}
.fb-panel .btnrow{margin-top:14px}
@media(max-width:600px){.fb{left:12px;bottom:12px}.fb-open{padding:10px 15px;font-size:13px}}


/* ═══════════ V4 register ═══════════ */
.v4-h1{font-size:clamp(34px,5vw,58px);font-weight:800;letter-spacing:-.042em;line-height:1.05;
  max-width:19ch;margin:0 0 var(--s3)}
.v4-h2{font-size:clamp(26px,3.2vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1.12;
  max-width:24ch;margin:0 0 var(--s3)}
.qs{padding:clamp(48px,6.5vw,92px) 0;border-top:1px solid var(--line-soft)}
.qs::before{display:none}
.qs-hero{border-top:0}
.qs-final{background:var(--mist)}
.signoff{border-top:1px solid var(--line);padding:clamp(48px,6vw,80px) 0;background:#fff}
.signoff p{font-size:clamp(19px,2.2vw,28px);font-weight:300;line-height:1.35;letter-spacing:-.03em;
  color:var(--black);max-width:32ch;margin:0}
.signoff p s{color:var(--slate);text-decoration-color:var(--orange);text-decoration-thickness:2px}
.signoff .then{font-size:15px;font-weight:400;color:var(--slate);margin:var(--s3) 0 0;max-width:48ch;letter-spacing:0}

/* ═══════════════════════════════════════════════════════════
   V4 — the reference register.
   Plain claims, every one linked to its proof. The wall of
   clients is the argument. The signature line moves to the foot.
   ═══════════════════════════════════════════════════════════ */

/* Hero: one claim, said plainly */
.v4hero{padding:clamp(56px,8vw,110px) 0 clamp(40px,5vw,64px)}
.v4hero h1{font-size:clamp(34px,5vw,62px);font-weight:800;letter-spacing:-.042em;line-height:1.04;
  max-width:19ch;margin:0 0 var(--s3)}
.v4hero .sub{font-size:clamp(17px,1.7vw,22px);line-height:1.5;color:var(--slate);max-width:58ch;margin:0 0 var(--s4)}
.v4hero .since{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin:0 0 var(--s5)}
.v4hero .since i{width:9px;height:10px;background:var(--indigo);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* Three claims, each a door to its evidence */
.claims{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:none}
.claims a{display:block;background:#fff;padding:26px 24px 28px;border:0;text-decoration:none;
  transition:background .2s ease}
.claims a:hover{background:var(--mist)}
.claims b{display:block;font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-.04em;
  line-height:1;color:var(--black);margin-bottom:10px}
.claims span{display:block;font-size:15px;color:var(--graphite);margin-bottom:12px;line-height:1.45}
.claims em{font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--indigo)}
.claims a:hover em{text-decoration:underline}

/* Section headers, plain */
.v4head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-bottom:var(--s4)}
.v4head h2{font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.035em;margin:0;max-width:22ch}
.v4head p{margin:0;font-size:15px;color:var(--slate);max-width:44ch}

/* The wall — the argument of the page */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;max-width:none}
.wall article{background:#fff;padding:22px 22px 24px;display:flex;flex-direction:column;
  transition:background .2s ease}
.wall article:hover{background:#FCFDFE}
.wall .tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;margin-bottom:14px;align-self:flex-start}
.wall .tag.cn-tenure{background:rgba(46,45,122,.09);color:var(--indigo)}
.wall .tag.cn-built{background:rgba(236,91,36,.1);color:#B4530F}
.wall .tag.cn-identity{background:rgba(205,27,108,.09);color:var(--magenta)}
.wall .tag.cn-scale{background:rgba(33,127,179,.1);color:#1A6694}
.wall .metric{font-size:clamp(20px,2.2vw,26px);font-weight:800;letter-spacing:-.03em;line-height:1.15;
  margin:0 0 8px;color:var(--black);overflow-wrap:anywhere;hyphens:auto}
.wall h3{font-size:15px;font-weight:700;letter-spacing:-.01em;margin:0 0 3px}
.wall .sector{font-size:12.5px;color:var(--slate);margin:0 0 14px}
.wall .did{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--line-soft);font-size:13px;
  color:var(--slate);line-height:1.5}
.wall .pend{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:#B4530F;margin-top:8px}
.wallfoot{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:var(--s3);font-size:14px;
  color:var(--slate)}

/* How we do it — three doors */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s3);max-width:none}
.doors a{display:block;background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0;padding:24px 24px 26px;text-decoration:none;box-shadow:var(--e1);
  transition:transform .2s ease,box-shadow .2s ease}
.doors a:hover{transform:translateY(-2px);box-shadow:var(--e3)}
.doors b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--black);margin-bottom:6px}
.doors p{margin:0 0 12px;font-size:14.5px;color:var(--slate);line-height:1.55}
.doors em{font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--indigo)}
.doors a:nth-child(1){--accent:var(--indigo)}
.doors a:nth-child(2){--accent:var(--orange)}
.doors a:nth-child(3){--accent:var(--magenta)}

/* Voices — all of them, not a curated three */
.voices{columns:3;column-gap:var(--s3);max-width:none}
@media(max-width:980px){.voices{columns:2}}
@media(max-width:620px){.voices{columns:1}}
.voices figure{break-inside:avoid;margin:0 0 var(--s3);background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:22px 22px 20px;box-shadow:var(--e1)}
.voices blockquote{margin:0 0 14px;padding:0;border:0;background:none;font-size:15.5px;line-height:1.6;
  color:var(--black);font-weight:400}
.voices figcaption{font-size:13px;color:var(--slate);line-height:1.5}
.voices figcaption b{display:block;color:var(--black);font-weight:700;margin-bottom:2px}
.voices figcaption .yrs{display:block;margin-top:10px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--indigo)}

/* What we're saying — the founder, unedited */
.saying{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s3);max-width:none}
.saying a{display:block;background:var(--mist);border:1px solid var(--line);border-radius:12px;padding:22px 22px 20px;
  text-decoration:none;transition:background .2s ease}
.saying a:hover{background:#EEF1F5}
.saying .kicker{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);
  margin:0 0 10px}
.saying p{margin:0 0 12px;font-size:15.5px;line-height:1.6;color:var(--black)}
.saying .who{font-size:12.5px;color:var(--slate)}

/* The signature, kept for the foot of the page */
.signoff{border-top:1px solid var(--line);padding:clamp(48px,6vw,80px) 0}
.signoff p{font-size:clamp(20px,2.4vw,30px);font-weight:300;line-height:1.35;letter-spacing:-.03em;
  color:var(--black);max-width:30ch;margin:0 0 10px}
.signoff p s{color:var(--slate);text-decoration-color:var(--orange);text-decoration-thickness:2px}
.signoff .then{font-size:15px;color:var(--slate);margin:var(--s3) 0 0;max-width:46ch}

.pending{border:1px dashed #C7D0DB;border-radius:10px;padding:14px 18px;margin:var(--s4) 0 0;
  font-size:13.5px;color:var(--slate);background:#FFFDF7;max-width:none}
.pending b{color:#B4530F}


/* V4 · the logo needs air above and below */
header.site .bar{padding:22px 0}
.brand img{height:44px}
@media(max-width:700px){header.site .bar{padding:16px 0}.brand img{height:36px}}

/* Keep Walking cards — the writing has its own rhythm */
.saying a{display:flex;flex-direction:column}
.saying .kicker{font-size:12px;letter-spacing:.07em;color:var(--indigo)}
.saying p{font-size:15px;line-height:1.65;margin:0 0 10px}
.saying .close{font-weight:600;color:var(--black);margin-top:2px}
.saying .who{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px}

/* ═══════════ Clients, named ═══════════ */
.clientnames{list-style:none;margin:var(--s4) 0 var(--s3);padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;max-width:none}
.cn{background:#fff;padding:18px 20px;margin:0;position:relative;display:block;line-height:1.5;transition:background .2s ease}
.cn::before{display:none}
.cn::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.cn:hover{background:#FCFDFE}
.cn b{display:block!important;line-height:1.3;font-size:15px;font-weight:700;letter-spacing:-.015em;color:var(--black);margin-bottom:3px}
.cn span{font-size:12.5px;color:var(--slate)}
.cn.cn-tenure{--c:var(--indigo)} .cn.cn-built{--c:var(--orange)}
.cn.cn-identity{--c:var(--magenta)} .cn.cn-scale{--c:var(--blue)}
.cn-more{font-size:15px;color:var(--slate);max-width:62ch}
.cn-more b{color:var(--black)}
.logowall[hidden]{display:none}

/* Colour, used where it carries meaning */
.claims a:nth-child(1) b{color:var(--indigo)}
.claims a:nth-child(2) b{color:var(--indigo)}
.claims a:nth-child(3) b{color:var(--indigo)}
.v4hero{background:
  radial-gradient(70% 60% at 88% 0%, rgba(46,45,122,.07), transparent 60%),
  radial-gradient(50% 50% at 100% 55%, rgba(236,91,36,.05), transparent 65%), #fff}
.wall .metric{color:var(--black)}
.wall article:nth-child(4n+1) .metric{color:var(--indigo)}
.wall article:nth-child(4n+2) .metric{color:var(--indigo)}
.wall article:nth-child(4n+3) .metric{color:var(--indigo)}
.wall article:nth-child(4n) .metric{color:var(--indigo)}

/* The founder, beside his writing */
.sayhead{display:flex;align-items:center;gap:18px;margin-bottom:var(--s4)}
.sayhead img{width:68px;height:68px;border-radius:50%;object-fit:cover;flex:none}
.sayhead b{display:block;font-size:16px;font-weight:700;color:var(--black)}
.sayhead span{font-size:14px;color:var(--slate)}