:root{
  --cobalt:#324E48; --cobalt-d:#2B4641; --ink:#121D1A; --bone:#E4DCCA; --bone-2:#D8CFBC; --acc:#121D1A;--on-acc:#EFE7DA;--cream:#EFE7DA;--foot:#121D1A;--sage-l:#46675F;--f:'Switzer',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* the side gutter; above ~1890px it grows so the site content stays within a centred 1800px (30 Sep 2026 sweep) */
  --pad:max(clamp(16px,2.8vw,44px),calc((100vw - 1800px) / 2));
  --vh:100svh; --navh:84px;
  /* L: light first. --fg/--fgc: text on the current ground; --ground: the ground; dark contexts redefine them */
  --fg:#324E48; --fgc:50,78,72; --ground:#EFE7DA;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* overflow-x:clip (not hidden): "hidden" on html+body turns <body> into a scroll container and breaks position:sticky */
html,body{margin:0;overflow-x:clip}
body{background:var(--ground);color:var(--fg);font-family:var(--f);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--acc);color:var(--on-acc)}
.mono{font-family:var(--f);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.disp{font-family:var(--f);font-weight:600;letter-spacing:-.035em;line-height:.9}
canvas{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.cta{display:inline-flex;align-items:center;gap:14px;text-decoration:none;background:var(--acc);color:var(--on-acc);padding:14px 20px 14px 22px;font-family:var(--f);font-weight:600;font-size:15px;letter-spacing:-.01em;border:0;border-radius:0;position:relative;box-shadow:6px 6px 0 var(--ink);transition:box-shadow .2s, translate .2s;cursor:pointer;white-space:nowrap}
.cta:hover{box-shadow:2px 2px 0 var(--ink);translate:4px 4px}
.cta svg{width:14px;height:14px;flex:none}
.ln{text-decoration:none;border-bottom:1.5px solid var(--acc);padding-bottom:1px;white-space:nowrap}
.ln:hover{color:var(--acc)}
.dot{width:8px;height:8px;background:var(--acc);display:inline-block;flex:none;animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.sq{width:10px;height:10px;background:var(--acc);display:inline-block;flex:none}

/* ---------- THE DRAWING: sticky stage + scrolling steps ---------- */
.track{position:relative;background:var(--ground)}
.stage{position:sticky;top:0;height:var(--vh);overflow:hidden;z-index:1}
#stage{position:absolute;inset:0;width:100%;height:100%}
.steps{position:relative;z-index:2;margin-top:calc(-1 * var(--vh));pointer-events:none}
.steps a,.steps button,.steps .panel{pointer-events:auto}
.nav{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--navh);padding:0 var(--pad);pointer-events:auto}
/* the breakdown cards: one per piece of the mark, a single link each, placed beside the mark by the script (below it on phones) */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img.m{height:30px}
.brand img.w{height:15px}
.links{display:flex;gap:30px}
.links a{text-decoration:none;opacity:.88}
.links a:hover{opacity:1;color:#fff}
.nav .cta{padding:11px 16px;font-size:14px;box-shadow:4px 4px 0 var(--ink)}
.step{min-height:calc(var(--vh) * .62)}
.step-end{min-height:calc(var(--vh) * .7)}
.panel{width:min(500px,37vw);position:relative}
/* hero: only the mark, the huge headline across the bottom and one button, set on the headline's last line */
.step.hero{display:block;position:relative;height:var(--vh);min-height:600px;padding:0}
.steps .hero-panel{position:absolute;inset:0;width:auto;pointer-events:none}
.hero-foot{position:absolute;left:calc(var(--pad) - 6px);right:var(--pad);bottom:34px;font-family:var(--f);font-size:clamp(52px,8.1vw,150px);line-height:.9}
.hero-title{display:inline;margin:0;font-size:1em}
.hero-title .p{color:var(--acc)}
.hero-spacer{display:none}
.prods{list-style:none;margin:0;padding:0;border-top:2px solid var(--fg)}
.prods li{padding:14px 0 15px;border-bottom:1px solid rgba(var(--fgc),.35)}
.prods b{display:block;font-weight:600;font-size:19px;letter-spacing:-.01em;margin-bottom:4px}
.prods p{margin:0 0 8px;font-size:15px;line-height:1.42;text-wrap:pretty}
.prods .lk{display:flex;gap:22px;flex-wrap:wrap;font-size:15px}
.say{font-size:16.5px;line-height:1.45;margin:0 0 18px;text-wrap:pretty}
.aside{font-family:var(--f);font-size:11.5px;letter-spacing:.03em;line-height:1.7;margin:0 0 26px;padding-left:14px;border-left:3px solid var(--acc)}

/* ---------- DIVIDERS ---------- */
.divider{display:block;width:100%;height:230px;position:relative;z-index:3;margin:-2px 0}
/* B's fades: the hero world sinks into flat colour before the divider, and the contact world rises out of it */

/* ---------- BONE SECTIONS ---------- */
.bone{background:var(--bone);color:#324E48}
.wrap{padding:0 var(--pad)}
.sec-head{margin-bottom:60px}
.sec-head h2{margin:0;font-size:clamp(42px,6.2vw,100px);text-wrap:balance}
/* the statement: the first thing to read after the hero. Centred, large, in the site's own display face */
.lab-statement{padding:clamp(90px,9vw,170px) 0 clamp(80px,8vw,150px);text-align:center}
.statement{margin:0 auto;font-family:var(--f);font-weight:600;font-size:clamp(34px,3.7vw,64px);line-height:1.13;letter-spacing:-.028em;max-width:19.5em;text-wrap:balance}
.statement u{text-decoration:none;background:linear-gradient(var(--acc),var(--acc)) 0 96%/100% .09em no-repeat;padding-bottom:.03em}
.beliefs{padding:40px 0 120px}
.belief-list{list-style:none;margin:0;padding:0;border-bottom:2px solid var(--ink)}
.belief{display:grid;grid-template-columns:60px 150px 1.25fr 1fr;gap:34px;align-items:center;border-top:2px solid var(--ink);padding:22px 0;position:relative;isolation:isolate}
.belief .n{font-family:var(--f);font-size:11px;letter-spacing:.08em}
.belief canvas{width:150px;height:118px}
.belief h3{margin:0;font-size:clamp(26px,3.1vw,50px);font-weight:600;letter-spacing:-.03em;line-height:.98}
.belief p{margin:0;font-size:17.5px;max-width:440px;text-wrap:pretty}
/* hover: a faint warm band behind the row. The text keeps its ink colour.
   (Before: the row turned its text bone and relied on a cobalt ::before at z-index:-1 to sit behind it. Without its own
   stacking context that layer painted underneath the section's bone background, so the text went bone-on-bone and vanished.
   isolation:isolate keeps the band inside the row, between the row and its text.) */
.belief::before{content:"";position:absolute;inset:0 calc(-1 * var(--pad));background:var(--bone-2);border-left:4px solid var(--acc);opacity:0;transition:opacity .2s;z-index:-1}
.belief:hover::before,.belief.is-hover::before{opacity:1}

/* outputs */
.outputs{padding:30px 0 0}
.out{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center;padding:40px var(--pad) 100px}
.out.flip .out-vis{order:-1}
.out.flip{grid-template-columns:1fr 1.2fr}
.out-vis canvas{width:100%;height:clamp(500px,34vw,680px)}
/* the quiz: "Which one fits you?" */
.quiz{display:grid;grid-template-columns:minmax(220px,.56fr) 2.22fr;gap:0;align-items:start;margin:0 0 70px}
.quiz-head{padding-right:28px}
.quiz-head h4{margin:0;font-size:clamp(28px,2.6vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.02}
.quiz-head p{margin:10px 0 0;font-size:18px;font-weight:500}
.qz{border:2px solid var(--ink);background:var(--bone-2);box-shadow:8px 8px 0 var(--ink);position:relative}
.qz-bar{height:5px;background:rgba(18,29,26,.12)}
.qz-bar i{display:block;height:100%;width:0;background:var(--acc);transition:width .3s}
#qz-body{padding:clamp(20px,2.2vw,34px)}
.qz-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px;min-height:28px}
.qz-count{font-weight:600;font-size:14.5px}
.qz-q{margin:0 0 18px;font-size:clamp(22px,1.8vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.12}
.qz-q:focus{outline:none}
.qz-hint{margin:-10px 0 16px;font-size:15.5px}
.qz-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.qz-opts.multi,.qz-opts.wide{grid-template-columns:repeat(2,minmax(0,1fr))}
.qz-opts.wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.qz-opt small{display:block;font-size:13.5px;font-weight:500;opacity:.78;margin-top:3px}
.qz-opt{font:inherit;font-weight:600;font-size:16.5px;line-height:1.28;text-align:left;color:#324E48;background:var(--bone);border:2px solid var(--ink);border-radius:0;padding:14px 16px;min-height:60px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:background .15s,box-shadow .15s,translate .15s}
.qz-opt svg{width:15px;height:15px;flex:none;opacity:.45;transition:transform .15s,opacity .15s}
.qz-opt .bx{width:20px;height:20px;flex:none;border:2px solid var(--ink);background:var(--bone);position:relative}
.qz-opt.sel .bx::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.qz-opt:hover{background:#fff8ec;box-shadow:4px 4px 0 var(--ink);translate:-2px -2px}
.qz-opt:hover svg,.qz-opt:focus-visible svg{opacity:1;transform:translateX(3px)}
.qz-opt.sel{background:var(--acc)}
.qz-go{margin-top:18px}
.qz-go:disabled{opacity:.4;cursor:not-allowed;translate:none}
.qz-back{font:inherit;font-size:15px;font-weight:600;background:none;border:0;padding:4px 0;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--acc);text-decoration-thickness:2px}
.qz-back:hover{color:#324E48}
.qz-done{margin:0;font-size:18px;font-weight:600}
/* the result, on the table */
.fit:empty{display:none}
.fit{display:grid;gap:18px;margin:0 0 34px}
.fit-audit{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;background:var(--ink);color:var(--fg);padding:22px 26px;border-left:6px solid var(--acc)}
.fit-audit p{margin:0;font-size:18px;line-height:1.42;max-width:44em}
.fit-line{display:grid;grid-template-columns:1fr auto;gap:10px 40px;align-items:end;border-top:2px solid var(--ink);padding-top:18px}
.fit-s{margin:0;font-size:clamp(22px,1.9vw,32px);font-weight:600;letter-spacing:-.02em;line-height:1.18;text-wrap:balance}
.fit-s:focus{outline:none}
.fit-notes{display:grid;gap:4px;justify-items:end;text-align:right}
.fit-notes p{margin:0;font-size:16px}
.fit-notes a{font-weight:600;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:4px}
.cmp-figs,.cmp-r{transition:grid-template-columns .45s}
.cmp .su,.cmp .tm,.cmp-fig{transition:opacity .35s,box-shadow .35s,transform .45s}
.cmp.rec-S{--cols:minmax(150px,.5fr) 1.3fr 1fr}
.cmp.rec-T{--cols:minmax(150px,.5fr) 1fr 1.4fr}
.cmp.rec-S .tm,.cmp.rec-S .cmp-fig.team,.cmp.rec-T .su,.cmp.rec-T .cmp-fig.suite{opacity:.5}
.cmp.rec-S .su,.cmp.rec-T .tm{box-shadow:inset 3px 0 0 var(--acc),inset -3px 0 0 var(--acc)}
.cmp.rec-S .cmp-fig.suite,.cmp.rec-T .cmp-fig.team{box-shadow:inset 3px 0 0 var(--acc),inset -3px 0 0 var(--acc),inset 0 3px 0 var(--acc)}
.cmp.rec-S .cmp-f .su,.cmp.rec-T .cmp-f .tm{box-shadow:inset 3px 0 0 var(--acc),inset -3px 0 0 var(--acc),inset 0 -3px 0 var(--acc)}
.cmp.rec-S .cmp-r>.su,.cmp.rec-T .cmp-r>.tm{font-weight:600}
.why{display:block;margin-top:6px;font-size:14.5px;font-weight:600;color:#324E48;line-height:1.3}
.cmp-h>.tm .why{color:var(--acc)}
.incl{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-weight:600;font-size:14px;line-height:1.2}
.incl::before{content:"";width:8px;height:8px;background:var(--acc);flex:none}
.badge{display:inline-block;margin:0 0 8px;background:var(--acc);color:var(--on-acc);font-weight:600;font-size:13.5px;line-height:1;padding:6px 9px 7px}
.alt{display:block;margin:0 0 6px;font-weight:600;font-size:13.5px}
.btn.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--ink);translate:0 0;background:rgba(18,29,26,.06)}
/* AI products: the drawing beside two full-height product cards */
.out-p{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,3.4vw,64px);align-items:stretch;padding:10px var(--pad) 100px}
.out-p h3{grid-column:1/-1;margin:0 0 10px;font-size:clamp(38px,4.6vw,76px)}
.out-p .out-vis canvas{height:100%;min-height:clamp(460px,34vw,700px)}
.pcol{display:grid;grid-template-rows:1fr 1fr;gap:22px}
.pk{display:flex;flex-direction:column;justify-content:space-between;gap:26px;border:1.5px solid rgba(var(--fgc),.4);padding:clamp(24px,2.4vw,40px);background:rgba(4,6,26,.12)}
.pk h4{margin:0 0 12px;font-weight:600;font-size:clamp(28px,2.5vw,42px);letter-spacing:-.02em;line-height:1}
.pk p{margin:0;font-size:clamp(18px,1.3vw,21px);line-height:1.42;max-width:28em;text-wrap:pretty}
.pk .lk{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
/* AI Audit: the text and three steps beside a larger drawing */
.out-c2{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,3.4vw,64px);align-items:center;padding:40px var(--pad) 100px}
.out-c2 h3{margin:0 0 20px;font-size:clamp(38px,4.6vw,76px)}
.out-c2 .say{font-size:19px;line-height:1.42;max-width:620px;margin:0 0 26px}
.au-steps{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);border-bottom:1px solid rgba(18,29,26,.3)}
.au-steps li{padding:16px 16px 18px 0;font-size:16px;line-height:1.35;font-weight:600;}
.au-steps li+li{padding-left:16px;border-left:1px solid rgba(18,29,26,.3)}
.au-steps b{display:block;font-family:var(--f);font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--acc);margin-bottom:8px;filter:brightness(.8)}
.out-c2 .out-vis canvas{height:clamp(520px,38vw,780px)}
.out-vis canvas.office{height:clamp(600px,42vw,820px)}
.out h3{margin:0 0 20px;font-size:clamp(38px,4.6vw,76px)}
.out .say{font-size:19px;line-height:1.42;max-width:600px;margin:0 0 30px}
.out .prods{border-top:2px solid currentColor}
.out .prods li{padding:18px 0 19px;border-bottom:1px solid rgba(18,29,26,.3)}
.band .out .prods li{border-bottom-color:rgba(var(--fgc),.35)}
.out .prods b{font-size:22px;margin-bottom:6px}
.out .prods p{font-size:16.5px;line-height:1.45;margin:0 0 8px;max-width:680px}
.out .aside{font-size:12px;margin:-10px 0 30px}
.band{background:var(--ground);color:var(--fg)}
[id^="out-"],#lab,#beliefs{scroll-margin-top:24px}
.out-a{padding:20px var(--pad) 110px}
.out-a h3{margin:0 0 44px;font-size:clamp(38px,4.6vw,76px)}
/* buttons: a solid block with an arrow, the site's hard offset shadow, and a clear hover */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;font-family:var(--f);font-weight:600;font-size:16px;letter-spacing:-.01em;line-height:1;
  padding:16px 22px 16px 24px;border:0;border-radius:0;cursor:pointer;white-space:nowrap;background:var(--ink);color:var(--fg);box-shadow:5px 5px 0 var(--acc);transition:box-shadow .18s,translate .18s,background .18s}
.btn svg{width:15px;height:15px;flex:none;transition:transform .18s}
.btn:hover{translate:3px 3px;box-shadow:2px 2px 0 var(--acc)}
.btn:hover svg,.btn:focus-visible svg{transform:translateX(4px)}
.btn-o{background:var(--acc);color:var(--on-acc);box-shadow:5px 5px 0 var(--ink)}
.btn-o:hover{box-shadow:2px 2px 0 var(--ink)}
.band .btn{background:var(--bone);color:var(--ink);box-shadow:5px 5px 0 rgba(4,6,26,.6)}
.band .btn:hover{box-shadow:2px 2px 0 rgba(4,6,26,.6)}
.band .btn-o{background:var(--acc);color:var(--on-acc)}
/* ADROSUITE vs ADROTEAM: the two drawings above one comparison table (same three columns) */
.cmp{--cols:minmax(170px,.56fr) 1fr 1.22fr}
.cmp-figs{display:grid;grid-template-columns:var(--cols);column-gap:0;align-items:end}
.cmp-lede{margin:0 0 26px;padding-right:28px;font-size:clamp(19px,1.4vw,23px);line-height:1.36;font-weight:500;text-wrap:pretty;align-self:end}
.cmp-fig{margin:0;padding:0 clamp(12px,1.4vw,26px)}
.cmp-fig canvas{width:100%;height:clamp(300px,24vw,470px)}
.cmp-fig.team{background:var(--bone-2)}
.cmp-fig figcaption{display:none}
.cmp-t{border-bottom:2px solid var(--ink)}
.cmp-r{display:grid;grid-template-columns:var(--cols);border-top:1px solid rgba(18,29,26,.22)}
.cmp-r>*{padding:15px clamp(12px,1.4vw,26px) 16px;font-size:16.5px;line-height:1.4;text-wrap:pretty}
.cmp-r>:first-child{padding-left:0}
.cmp-r>.tm{background:var(--bone-2)}
.cmp-r [role=rowheader]{font-weight:600;font-size:15px;letter-spacing:-.005em;padding-top:17px}
.cmp-r .no{opacity:.88}
.cmp-h{position:sticky;top:0;z-index:3;background:var(--bone);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.cmp-h>*{padding-top:16px;padding-bottom:16px}
.cmp-h .nm{display:block;font-weight:600;font-size:clamp(22px,1.8vw,30px);letter-spacing:-.015em;line-height:1}
.cmp-h .ol{display:block;font-size:15px;line-height:1.35;margin-top:6px;font-weight:500}
.cmp-h>.tm{background:var(--ink);color:var(--fg)}
.cmp-h>.tm .nm::after{content:"";display:inline-block;width:.34em;height:.34em;background:var(--acc);margin-left:.14em}
.cmp-f{border-top:1px solid rgba(18,29,26,.22)}
.cmp-f>*{padding-top:24px;padding-bottom:28px}

/* lab floor */
.floor{background:var(--ground);color:var(--fg);position:relative;min-height:820px;overflow:hidden}
#floor{position:absolute;inset:0;width:100%;height:100%}
.floor-head{position:relative;z-index:2;padding:80px var(--pad) 0;max-width:min(680px,38vw);pointer-events:none}
.floor-head h2{margin:0 0 22px;font-size:clamp(38px,4.3vw,70px)}
.floor-head p{margin:0;font-size:18px;max-width:400px;line-height:1.45}
.floor .cap{position:absolute;left:0;right:0;bottom:26px;z-index:2;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:0 var(--pad);opacity:.85}

/* notes */
.notes{padding:90px 0 120px}
.note-list{list-style:none;margin:0;padding:0}
.note-list a{display:grid;grid-template-columns:150px 1fr 80px;gap:40px;align-items:center;padding:32px 0;border-top:2px solid var(--ink);text-decoration:none;transition:padding .25s}
.note-list li:last-child a{border-bottom:2px solid var(--ink)}
.note-list .t{font-size:clamp(23px,2.7vw,40px);font-weight:600;letter-spacing:-.025em;line-height:1.06}
.note-list .arr{justify-self:end;width:56px;height:56px;border:2px solid var(--ink);display:grid;place-items:center;transition:background .2s}
.note-list a:hover .arr{background:var(--acc)}
.note-list a:hover{padding-left:14px}
.note-list .k{display:flex;gap:10px;align-items:center}
.iso-b{width:18px;height:20px;flex:none}
.news{display:grid;grid-template-columns:minmax(200px,1fr) 2.2fr;gap:40px;align-items:center;margin-top:60px}
.news-lab{font-weight:600;font-size:19px;letter-spacing:-.01em;line-height:1.25}
.news-row{display:flex;gap:18px;align-items:stretch}
.news input{flex:1;min-width:0;font:inherit;font-size:20px;color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--ink);border-radius:0;padding:10px 2px;outline:none}
.news input::placeholder{color:rgba(18,29,26,.42)}
.news input:focus{border-bottom-color:var(--acc)}
.news input:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.news-ok{grid-column:2;margin:-24px 0 0;min-height:1em;font-weight:600;}
.news-ok:empty{display:none}

/* contact */
.contact{position:relative;background:var(--ground);color:var(--fg);overflow:hidden;min-height:780px}
#world2{position:absolute;inset:0;width:100%;height:100%}
.contact .inner{position:relative;z-index:2;padding:120px var(--pad) 110px;pointer-events:none;max-width:980px}
.contact .inner a{pointer-events:auto}
.contact h2{margin:0 0 44px;font-size:clamp(50px,8.4vw,160px);line-height:.92}
.contact h2>span{display:block;white-space:nowrap}
.mail{display:inline-block;font-size:clamp(26px,3.4vw,54px);font-weight:600;letter-spacing:-.025em;text-decoration:none;border-bottom:4px solid var(--acc);margin-bottom:38px}
.mail:hover{color:var(--acc)}
.addr{display:flex;gap:56px;flex-wrap:wrap;line-height:1.9;margin-bottom:40px}

footer{background:var(--ink);color:var(--fg);padding:56px var(--pad) 40px}
.foot{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}
.foot img.w{height:22px;display:block;margin-bottom:24px}
.foot .ents{display:flex;flex-wrap:wrap;gap:8px 28px;opacity:.85}
.social{display:flex;gap:12px;margin-top:26px}
.social a{width:42px;height:42px;display:grid;place-items:center;border:1.5px solid rgba(var(--fgc),.45);transition:background .2s,color .2s,border-color .2s}
.social a:hover,.social a:focus-visible{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.social svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
.foot .ents a{text-decoration:none;border-bottom:1px solid var(--acc)}
.foot .supp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px;max-width:760px}
.foot .supp .sp{display:flex;flex-direction:column;gap:7px;min-width:0}
.foot .supp .cap{font-size:9px;line-height:11px;height:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.foot .supp .tile{display:flex;align-items:center;justify-content:center;height:88px;padding:0 6px;border:0;border-radius:10px;background:#EFE7DA;text-decoration:none;opacity:.92;transition:opacity .2s}
.foot .supp .tile:hover,.foot .supp .tile:focus-visible{opacity:1}
.foot .supp img{display:block;width:auto;max-width:100%}
.foot .supp img.nv{height:84px}.foot .supp img.difc{height:24px}.foot .supp img.gc{height:18px}.foot .supp img.el{height:15px}
.foot .supp-legal{font-size:10px;line-height:1.55;opacity:.6;margin:22px 0 0;max-width:760px}
@media(max-width:700px){.foot .supp{grid-template-columns:repeat(2,minmax(0,1fr))}}
.support{padding:clamp(70px,6vw,110px) 0 0}
.support-in{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,90px);align-items:start;border-top:2px solid var(--ink);padding-top:40px}
.support h2{margin:0 0 22px;font-size:clamp(34px,3.8vw,64px)}
.support-l p{margin:0 0 14px;font-size:clamp(17px,1.3vw,21px);line-height:1.5;max-width:30em;text-wrap:pretty}
.support .sup-list{list-style:none;margin:0;padding:0}
.support .sup-row{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;min-height:74px;padding:14px 0;border-top:1px solid rgba(18,29,26,.16)}
.support .sup-row:first-child{border-top:0;padding-top:0}
.support .sup-mk{display:flex;align-items:center;height:46px}
.support .sup-mk img{display:block;width:auto}
.support .sup-mk img.nv{height:44px}.support .sup-mk img.difc{height:24px}.support .sup-mk img.gc{height:18px}.support .sup-mk img.el{height:15px}
.support .sup-tx{font-size:clamp(15px,1.3vw,18px);line-height:1.4}
@media(max-width:800px){.support-in{grid-template-columns:1fr;gap:26px;padding-top:30px}}
@media(max-width:600px){.support .sup-row{grid-template-columns:1fr;gap:8px}}

/* =====================================================================
   CONCEPT H additions: a multi-page site built on G.
   ===================================================================== */
/* ---------- nav: six page links (the current one underlined), a menu button on narrow screens ---------- */
.links{gap:clamp(18px,1.6vw,30px)}
.links a[aria-current="page"]{opacity:1;text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:7px}
.nav-r{display:flex;align-items:center;gap:12px}
.burger{display:none;width:44px;height:44px;border:1.5px solid rgba(var(--fgc),.5);background:transparent;color:var(--fg);cursor:pointer;padding:0;place-items:center;border-radius:0}
.burger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
.burger .x,.burger[aria-expanded="true"] .m{display:none}
.burger[aria-expanded="true"] .x{display:block}
.burger:hover{border-color:var(--acc)}
.menu{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--ink);border-top:1.5px solid rgba(var(--fgc),.18);border-bottom:4px solid var(--acc);padding:6px var(--pad) 24px;box-shadow:0 22px 40px rgba(18,29,26,.35)}
.menu[hidden]{display:none}
.menu .mi{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid rgba(var(--fgc),.16);text-decoration:none;font-weight:600;font-size:22px;letter-spacing:-.015em;line-height:1.15}
.menu .mi svg{width:16px;height:16px;color:var(--acc);flex:none}
.menu .mi[aria-current="page"]{color:var(--acc)}
.menu .cta{margin-top:22px}

/* ---------- landing: one pinned track, as G. The hero is its first step: the headline fades as the mark moves to the
   centre and breaks apart; then the pieces, the big mark, and the last screen ---------- */
.step{min-height:calc(var(--vh) * .7)}
.step.s0{min-height:var(--vh)}
.step.sb{min-height:calc(var(--vh) * .62)}
.step.s-big{min-height:calc(var(--vh) * 1.3)}
.step.fin{min-height:var(--vh);display:flex;align-items:center;padding:56px var(--pad) 56px}
.steps .fin-in{pointer-events:auto;width:min(47vw,800px)}
.fin h2{margin:0 0 34px;font-size:clamp(50px,6.3vw,132px);line-height:.92}
.fin h2>span{display:block;white-space:nowrap}
.fin .mail{font-size:clamp(24px,2.5vw,46px);margin-bottom:28px}
.fin-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin:0 0 42px}
.fin .news{grid-template-columns:1fr;gap:12px;margin:0 0 34px;max-width:560px}
.fin .news-lab{font-size:18px}
.fin .news input{color:var(--fg);border-bottom-color:rgba(var(--fgc),.75);font-size:19px}
.fin .news input::placeholder{color:rgba(var(--fgc),.55)}
.fin .news input:focus{border-bottom-color:var(--acc)}
.fin .news-ok{grid-column:1;margin:0}
.fin .social{margin-top:0}

/* the pieces' labels: always shown beside their piece during the breakdown; the active one grows into the card.
   --a (0 label .. 1 card) is set by the script from the scroll position. */
.pcards{position:absolute;inset:0;z-index:4;pointer-events:none}
.pcard{--a:0;position:absolute;left:0;top:0;display:block;box-sizing:border-box;text-decoration:none;color:var(--fg);background:var(--ink);
  border:1.5px solid rgba(var(--fgc),.32);border-left:4px solid var(--acc);
  padding:calc(9px + 11px*var(--a)) calc(13px + 9px*var(--a)) calc(9px + 9px*var(--a)) calc(13px + 9px*var(--a));
  box-shadow:calc(3px + 5px*var(--a)) calc(3px + 5px*var(--a)) 0 rgba(4,6,26,.5);
  opacity:0;cursor:pointer;pointer-events:none;overflow:hidden;transition:background .18s,border-color .18s}
.pcard.live{pointer-events:auto}
.pcard:hover,.pcard.hot{background:#1A2B27;border-color:rgba(var(--fgc),.75);border-left-color:var(--acc)}
.pcard:focus-visible{outline:3px solid var(--acc);outline-offset:3px;opacity:1!important;pointer-events:auto}
.pc-sec{display:flex;align-items:center;justify-content:space-between;gap:12px;white-space:nowrap;font-weight:600;font-size:calc(15.5px + 8.5px*var(--a));line-height:1.08;letter-spacing:-.015em}
.pc-la{width:14px;height:14px;flex:none;color:var(--acc);opacity:calc(1 - var(--a) * 1.6);transition:transform .18s}
.pcard:hover .pc-la,.pcard:focus-visible .pc-la{transform:translateX(3px)}
.pc-body{display:block;height:0;overflow:hidden}
.pc-in{display:block;padding-top:14px;opacity:var(--a)}
.pc-list{display:block;margin:0;padding:0;border-top:1px solid rgba(var(--fgc),.22)}
.pc-it{display:block;padding:9px 0 10px;border-bottom:1px solid rgba(var(--fgc),.22);white-space:normal}
.pc-it b{display:block;font-weight:600;font-size:16px;letter-spacing:-.005em;line-height:1.2;margin-bottom:3px}
.pc-it span{display:block;font-size:14.5px;line-height:1.36;opacity:.88;text-wrap:pretty}
.pc-it.t{font-weight:600;font-size:15.5px;line-height:1.25;padding:7px 0 8px}
.pc-one{display:block;font-size:16px;line-height:1.42;margin:0;padding:11px 0 12px;border-top:1px solid rgba(var(--fgc),.22);border-bottom:1px solid rgba(var(--fgc),.22);text-wrap:pretty;white-space:normal}
.pc-open{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding:8px 8px 8px 15px;border:1.5px solid var(--acc);color:var(--fg);font-weight:600;font-size:16px;letter-spacing:-.005em;transition:background .18s,color .18s}
.pc-arr{width:32px;height:32px;display:grid;place-items:center;background:var(--acc);color:var(--on-acc);flex:none;transition:background .18s,color .18s}
.pc-arr svg{width:16px;height:16px}
.pcard.on .pc-arr svg{animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,50%,100%{transform:translateX(0)}22%{transform:translateX(4px)}}
.pcard:hover .pc-open,.pcard:focus-visible .pc-open,.pcard.hot .pc-open{background:var(--acc);color:var(--on-acc)}
.pcard:hover .pc-arr,.pcard:focus-visible .pc-arr,.pcard.hot .pc-arr{background:var(--ink);color:var(--acc)}

/* ---------- the pages: a short hero with the page's piece of the mark ---------- */
.phero{position:relative;background:var(--ground);height:clamp(440px,56vh,600px)}
.phero>canvas{position:absolute;inset:0;width:100%;height:100%}
.phero-in{position:absolute;left:var(--pad);bottom:clamp(34px,5.4vh,64px);z-index:2;width:min(52vw,900px);pointer-events:none}
.phero h1{margin:0 0 18px;font-size:clamp(50px,6vw,116px)}
.phero h1 .p{color:var(--acc)}
.phero .lede{margin:0;font-size:clamp(18px,1.45vw,25px);line-height:1.4;max-width:29em;font-weight:500;text-wrap:pretty}

/* the end of every page: the next page, then a compact "Bring us a problem." band */
.nextp{padding:clamp(20px,3vw,40px) var(--pad) clamp(70px,7vw,110px)}
.nextp a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;border-top:2px solid currentColor;border-bottom:2px solid currentColor;text-decoration:none}
.nextp .t{font-size:clamp(26px,2.9vw,48px);font-weight:600;letter-spacing:-.025em;line-height:1.05}
.nextp .t span{font-weight:500;}
.nextp .arr{width:58px;height:58px;border:2px solid currentColor;display:grid;place-items:center;flex:none;transition:background .2s,color .2s,border-color .2s}
.nextp .arr svg{width:22px;height:22px;transition:transform .2s}
.nextp a:hover .arr,.nextp a:focus-visible .arr{background:var(--acc);border-color:var(--acc);color:var(--ink)}
.nextp a:hover .arr svg{transform:translateX(3px)}
.band .nextp{padding-top:10px}
.cband{background:var(--ground);color:var(--fg);padding:clamp(64px,6vw,110px) var(--pad) clamp(70px,7vw,110px)}
.cband h2{margin:0 0 30px;font-size:clamp(44px,6vw,112px)}
.cband h2 .p{color:var(--acc)}
.cband-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px 44px}
.cband .mail{margin:0;font-size:clamp(24px,2.6vw,44px)}
.fpages{display:flex;flex-wrap:wrap;gap:8px 26px;margin:0 0 24px;font-weight:600;font-size:16px}
.fpages a{text-decoration:none;opacity:.92}
.fpages a:hover{color:var(--acc);opacity:1}

/* ---------- about ---------- */
.tested{padding:0 0 clamp(90px,8vw,140px)}
.tested-in{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,5vw,90px);align-items:start;border-top:2px solid var(--ink);padding-top:40px}
.tested h2{margin:0;font-size:clamp(40px,4.6vw,80px)}
.tested-p p{margin:0 0 14px;font-size:clamp(19px,1.45vw,24px);line-height:1.42;max-width:30em;text-wrap:pretty}
.tested-p p:last-child{margin:0}
.where{padding:clamp(80px,7vw,120px) 0 20px}
.where h2{margin:0 0 40px;font-size:clamp(40px,4.6vw,80px)}
.where-g{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.where-g>div{padding:26px 26px 30px 0}
.where-g>div+div{padding-left:clamp(20px,3vw,44px);border-left:1px solid rgba(18,29,26,.3)}
.where-g h3{margin:0 0 12px;font-size:clamp(26px,2.3vw,38px);font-weight:600;letter-spacing:-.02em;line-height:1}
.where-g p{margin:0;font-size:18px;line-height:1.5}

/* ---------- rules ---------- */
.beliefs{padding:clamp(40px,4vw,70px) 0 clamp(80px,7vw,120px)}

/* ---------- agentic systems: one centred column, about 1120px wide ---------- */
.out-a{max-width:calc(1120px + 2 * var(--pad));margin:0 auto;padding:clamp(50px,5vw,84px) var(--pad) 70px}
.quiz{grid-template-columns:1fr;gap:20px;margin:0 0 76px}
.quiz-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 24px;padding:0}
.quiz-head h2{margin:0;font-size:clamp(30px,2.7vw,46px);font-weight:600;letter-spacing:-.03em;line-height:1.02}
.quiz-head p{margin:0;font-size:17px;font-weight:500}
.cmp{--cols:150px minmax(0,1fr) minmax(0,1.3fr)}
.cmp.rec-S{--cols:150px minmax(0,1.3fr) minmax(0,1fr)}
.cmp.rec-T{--cols:150px minmax(0,1fr) minmax(0,1.45fr)}
.cmp-fig{padding:0 clamp(10px,1.2vw,20px)}
.cmp-fig canvas{height:clamp(290px,23vw,390px)}
.cmp-r>*{padding:14px clamp(12px,1.3vw,20px) 15px}
.cmp-r [role=rowheader]{font-size:14.5px}
.cmp-h .nm{font-size:clamp(22px,1.7vw,28px)}
.cmp-h>.tm .big{display:block;margin-top:9px;font-size:13.5px;font-weight:600;opacity:.8}
.as-audit{margin:44px 0 0;padding:22px 26px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 30px;background:var(--bone-2);border-left:5px solid var(--acc)}
.as-audit p{margin:0;font-size:18px;line-height:1.4}
/* the quiz: tactile answer tiles */
.qz-opts{gap:12px}
.qz-opt{display:flex;align-items:center;gap:12px;min-height:62px;padding:10px 14px 10px 10px;background:#F3EDE2;border:1.5px solid rgba(18,29,26,.6);box-shadow:0 2px 0 rgba(18,29,26,.22);font-weight:600;font-size:16px;line-height:1.24;
  transition:background .15s,box-shadow .15s,translate .15s,border-color .15s}
.qz-l{flex:1;min-width:0}
.qz-ic{width:38px;height:38px;flex:none;display:grid;place-items:center;background:var(--bone);border:1.5px solid rgba(18,29,26,.28);color:var(--ink);transition:background .15s,color .15s,border-color .15s}
.qz-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:1}
.qz-end{flex:none;display:grid;place-items:center;width:22px;height:22px}
.qz-end svg{width:15px;height:15px;opacity:.55;transition:transform .15s,opacity .15s}
.qz-end .ck{display:none}
.qz-opt:hover{background:#FBF7EF;border-color:var(--acc);box-shadow:4px 5px 0 var(--ink);translate:-2px -3px}
.qz-opt:hover .qz-ic{border-color:var(--acc)}
.qz-opt:hover .qz-end svg,.qz-opt:focus-visible .qz-end svg{opacity:1;transform:translateX(3px)}
.qz-opt:active{translate:1px 1px;box-shadow:0 0 0 var(--ink);background:#E4DCCA}
.qz-opt:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.qz-opt.sel{background:var(--acc);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink);translate:0 0}
.qz-opt.sel .qz-ic{background:var(--ink);color:var(--fg);border-color:var(--ink)}
.qz-opt.sel:focus-visible{outline-color:var(--ink)}
.qz-opt.sel .qz-end .ar{display:none}
.qz-opt.sel .qz-end .ck{display:block;opacity:1;width:18px;height:18px}
.qz-opt .bx{width:22px;height:22px}
.qz-opt.sel .bx{background:var(--ink)}
.qz-opt.sel .bx::after{border-color:var(--fg)}
.qz.nudge .qz-opt:nth-child(-n+3){animation:qzn 1s cubic-bezier(.3,.7,.3,1) both}
.qz.nudge .qz-opt:nth-child(2){animation-delay:.14s}
.qz.nudge .qz-opt:nth-child(3){animation-delay:.28s}
@keyframes qzn{0%{translate:0 0}35%{translate:-2px -6px;box-shadow:4px 8px 0 var(--ink);border-color:var(--acc)}100%{translate:0 0}}

/* ---------- AI Audit ---------- */
.out-c2{padding-top:clamp(50px,5vw,84px)}
.out-c2 h2{margin:0 0 26px;font-size:clamp(34px,3.6vw,60px)}

/* ---------- lab notes ---------- */
.notes{padding:clamp(60px,6vw,100px) 0 clamp(80px,7vw,120px)}
.qz-opt:hover .qz-ic svg,.qz-opt:focus-visible .qz-ic svg{transform:none}
.phero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;z-index:1;pointer-events:none;background:linear-gradient(#EFE7DA00,#EFE7DA)}
/* ---------- AI products ---------- */
.band .out-p{padding-top:clamp(30px,3.4vw,56px)}
.pk h2{margin:0 0 12px;font-weight:600;font-size:clamp(28px,2.5vw,42px);letter-spacing:-.02em;line-height:1}
.belief h2{margin:0;font-size:clamp(26px,3.1vw,50px);font-weight:600;letter-spacing:-.03em;line-height:.98}
/* the two offices (17 Oct 2026): Dubai (the licence block word for word, then the Gate Avenue office) and the United States, side by side as equals */
.offices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px clamp(28px,4vw,64px)}
.offices address{font-style:normal;line-height:1.6}
.offices address b{font-weight:600}
.offices a{color:inherit;text-decoration:none;border-bottom:1px solid var(--acc)}
.offices .office-2{display:block;margin-top:10px}
.offices .office-lab{margin:0 0 10px;font-size:10px;line-height:1;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
a[href^="tel:"]{white-space:nowrap}
.foot-off{max-width:820px;margin:6px 0 24px;padding:24px 0;border-top:1px solid rgba(var(--fgc),.22);border-bottom:1px solid rgba(var(--fgc),.22);font-size:14px;opacity:.92}
.where-off{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:28px 0 32px;gap:28px 0}
.where-off .office+.office{padding-left:clamp(20px,3vw,44px);border-left:1px solid rgba(18,29,26,.3)}
.where-off h3{margin:0 0 14px;font-size:clamp(26px,2.3vw,38px);font-weight:600;letter-spacing:-.02em;line-height:1}
.where-off address{font-size:18px;line-height:1.55}
.page-off{margin:8px 0 28px}
.page-off h3{margin:0 0 10px;font-size:19px;font-weight:600}
.legal-in .page-off address{font-size:17px;line-height:1.65}
@media (max-width:700px){.offices{grid-template-columns:1fr}.where-off .office+.office{padding-left:0;border-left:0;border-top:1px solid rgba(18,29,26,.3);padding-top:24px}}
.legal-in .page-off{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:28px 40px}@media (max-width:700px){.legal-in .page-off{grid-template-columns:1fr}}
.as-rules{margin:36px 0 28px}
/* ---------- MOBILE ---------- */
@media (max-width:900px){
  .belief{grid-template-columns:110px 1fr;gap:12px 22px}
  .belief .n{display:none}
  .belief canvas{width:110px;height:90px;grid-row:span 2}
  .sec-head{grid-template-columns:1fr;gap:14px;margin-bottom:40px}
  .out,.out.flip{grid-template-columns:1fr;gap:20px;padding-bottom:70px}
  .out.flip .out-vis{order:0}
  .out-vis canvas{height:400px}
  .out-p,.out-c2{grid-template-columns:1fr;gap:24px;padding-bottom:70px}
  .out-p .out-vis canvas{min-height:0;height:400px}
  .out-c2 .out-vis canvas{height:420px}
}
@media (max-width:760px){
  .nav{padding:14px var(--pad)}
  .brand img.w{display:none}
  .nav .cta{padding:10px 14px;font-size:13.5px;box-shadow:3px 3px 0 var(--ink)}
  :root{--navh:64px}
  .panel{width:100%}
  .step.hero{height:auto;min-height:var(--vh);padding:0 var(--pad) 30px}
  .steps .hero-panel{position:relative;inset:auto;display:flex;flex-direction:column}
  .hero-spacer{display:block;height:min(58svh,500px);flex:none}
  .hero-foot{position:relative;left:-3px;right:auto;bottom:auto;font-size:12.6vw}
  .hero-title{display:block}
  .lab-statement{padding:64px 0 68px}
  .statement{font-size:29px;line-height:1.16;letter-spacing:-.022em;max-width:none}
  /* the comparison: the two drawings stacked, then two narrow columns with each row's label above it */
  .cmp{--cols:1fr 1fr}
  .cmp-figs{grid-template-columns:1fr}
  .cmp-lede{padding-right:0;margin-bottom:18px}
  .cmp-fig{padding:0 10px}
  .cmp-fig figcaption{display:block;font-weight:600;font-size:19px;padding:12px 0 2px}
  .cmp-fig.team{margin-top:14px;padding-bottom:6px}
  .cmp-fig canvas{height:auto;aspect-ratio:1/.7}
  .cmp-r [role=rowheader]{grid-column:1/-1;padding:13px 0 2px;font-size:13.5px}
  .cmp-r>*{padding:6px 12px 13px;font-size:15px;line-height:1.36}
  .cmp-r>:nth-child(2){padding-left:0}
  .cmp-h>:first-child{display:none}
  .cmp-h>*{padding:12px 12px}
  .cmp-h>:nth-child(2){padding-left:0}
  .cmp-h .nm{font-size:18px}
  .cmp-h .ol{font-size:13px}
  .cmp-f>*{padding:20px 0 6px}
  .cmp-f>:first-child{display:none}
  .cmp-f{grid-template-columns:1fr;row-gap:4px}
  .cmp-f>.tm{background:none}
  .btn{font-size:15px;padding:15px 18px 15px 20px;white-space:normal;text-align:left}
  .quiz{grid-template-columns:1fr;gap:16px;margin-bottom:50px}
  .quiz-head{padding:0}
  .qz{box-shadow:5px 5px 0 var(--ink)}
  #qz-body{padding:18px 16px 20px}
  .qz-opts,.qz-opts.multi,.qz-opts.wide{grid-template-columns:1fr;gap:8px}
  .qz-opt{min-height:56px;font-size:16px;padding:12px 14px}
  .fit-line{grid-template-columns:1fr}
  .fit-notes{justify-items:start;text-align:left}
  .fit-audit{padding:18px 18px}
  .fit-audit p{font-size:16px}
  .cmp.rec-S{--cols:1.5fr 1fr}
  .cmp.rec-T{--cols:1fr 1.5fr}
  .cmp.rec-S .cmp-r>.tm,.cmp.rec-T .cmp-r>.su{font-size:13px;line-height:1.3}
  .cmp.rec-S .cmp-h>.tm .ol,.cmp.rec-T .cmp-h>.su .ol{display:none}
  .cmp.rec-S .cmp-h>.tm .nm,.cmp.rec-T .cmp-h>.su .nm{font-size:15px}
  .cmp.rec-S .cmp-f,.cmp.rec-T .cmp-f{grid-template-columns:1fr}
  .cmp-f>.su,.cmp-f>.tm{box-shadow:none!important;opacity:1!important}
  .why{font-size:13.5px}
  .cmp.rec-S .cmp-r>.su,.cmp.rec-S .cmp-h>.su{padding-left:12px}
  .cmp.rec-S .cmp-f>.su{padding-left:0}
  .pk h4{font-size:28px}
  .pk p{font-size:17px}
  .au-steps{grid-template-columns:1fr}
  .au-steps li,.au-steps li+li{padding:12px 0;border-left:0}
  .au-steps li+li{border-top:1px solid rgba(18,29,26,.3)}
  .out-vis canvas{height:340px}
  .out-vis canvas.office{height:clamp(400px,118vw,520px)}
  .out .say{font-size:17px}
  .out .prods b{font-size:19px}
  .out .prods p{font-size:15.5px}
  .prods li{padding:10px 0 11px}
  .prods b{font-size:17px}
  .prods p{font-size:14.5px}
  .say{font-size:15px}
  .divider{height:150px}
  .beliefs{padding:50px 0 80px}
  .belief p{font-size:15.5px}
  .floor{min-height:0;padding-bottom:70px}
  #floor{position:relative;height:320px;margin-top:0}
  .floor-head{padding-top:40px;max-width:none}
  .floor .cap{bottom:22px;font-size:9.5px}
  .note-list a{grid-template-columns:1fr 48px;gap:16px;padding:22px 0}
  .note-list .k{grid-column:1/-1}
  .note-list .arr{width:44px;height:44px}
  .contact{min-height:720px}
  .contact .inner{padding:84px var(--pad) 330px}
  .contact h2{font-size:clamp(44px,13.4vw,64px)}
  .addr{gap:16px;flex-direction:column}
  .foot{grid-template-columns:1fr}
  .news{grid-template-columns:1fr;gap:16px;margin-top:44px}
  .news-row{flex-direction:column;align-items:flex-start}
  .news input{width:100%;font-size:18px}
  .news-ok{grid-column:1;margin:0}
}
@media (prefers-reduced-motion:reduce){ .dot{animation:none} html{scroll-behavior:auto} }

/* ---------- H: narrow screens ---------- */
@media (max-width:1119px){
  .links{display:none}
  .burger{display:grid}
}
@media (max-width:1023px){
  /* the labels become one compact list under the pieces; the active one opens in place */
  .pcards{inset:auto var(--pad) 14px var(--pad);display:flex;flex-direction:column;gap:6px;max-width:640px;margin:0 auto}
  .pcard{position:relative;transform:none!important;width:auto!important;padding:calc(9px + 5px*var(--a)) 14px calc(9px + 5px*var(--a)) 14px;box-shadow:3px 3px 0 rgba(4,6,26,.5)}
  .pc-sec{font-size:calc(15px + 4px*var(--a))}
  .pc-la{opacity:1}
  .pc-in{padding-top:9px}
  .pc-it{padding:6px 0 7px}
  .pc-it b{font-size:15px;margin-bottom:1px}
  .pc-it span{font-size:13.5px;line-height:1.32}
  .pc-it.t{font-size:14px;padding:4px 0 5px}
  .pc-one{font-size:14.5px;padding:8px 0 9px}
  .pc-open{margin-top:10px;padding:5px 5px 5px 12px;font-size:15px}
  .pc-arr{width:28px;height:28px}
}
@media (max-width:900px){
  .tested-in{grid-template-columns:1fr;gap:22px;padding-top:30px}
  .where-g{grid-template-columns:1fr}
  .where-g>div+div{padding-left:0;border-left:0;border-top:1px solid rgba(18,29,26,.3)}
}
@media (max-width:760px){
  .nav{padding:0 var(--pad)}
  .nav .cta{padding:10px 13px}
  .menu{padding:4px var(--pad) 20px}
  /* the last screen: the small mark on top, the contact below it */
  .step.fin{display:block;padding:calc(var(--mkh,190px) + 44px) var(--pad) 44px}
  .steps .fin-in{width:auto}
  .fin h2{font-size:clamp(44px,13.2vw,64px);margin-bottom:22px}
  .fin .mail{font-size:clamp(21px,6.2vw,26px);margin-bottom:20px}
  .fin-row{margin-bottom:30px}
  .fin .news{margin-bottom:28px}
  .fin .news-row{flex-direction:column;align-items:stretch}
  .fin .news .cta{justify-content:center}
  /* page heroes: the piece on top, the title below */
  .phero{height:auto;padding:calc(var(--navh) + min(58vw,220px) + 34px) var(--pad) 34px}
  .phero-in{position:relative;left:auto;bottom:auto;width:auto}
  .phero h1{font-size:clamp(40px,12vw,58px);margin-bottom:12px}
  .phero .lede{font-size:17px}
  .nextp a{padding:18px 0}
  .nextp .t{font-size:24px}
  .nextp .arr{width:46px;height:46px}
  .cband h2{font-size:clamp(40px,11.5vw,56px);margin-bottom:22px}
  .cband .mail{font-size:22px}
  .quiz-head p{font-size:16px}
  .qz-opts{gap:9px}
  .qz-opt{min-height:58px}
  .as-audit{padding:18px 18px}
  .as-audit p{font-size:16px}
  .out-c2 h2{font-size:34px}
  .where-g p{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){
  .pcard.on .pc-arr svg,.qz.nudge .qz-opt{animation:none!important}
  .qz-opt,.qz-opt:hover,.qz-opt:active{transition:none}
}
@media (max-width:760px){ .pk h2{font-size:28px} }

/* ======================================================================================
   CONCEPT I: the chat. The landing page is one screen with a big chat box; on every other page the chat lives on
   as a small live preview in the corner (a slim bar on phones). Highlights: a highlighter-pen mark behind text,
   and a gently pulsing tint on blocks.
   ====================================================================================== */
:root{--sand:#E4DCCA;--hl:50,78,72}

/* ---------- the landing ---------- */
body.landing{overflow:hidden;height:100svh;background:var(--ground)}
.land{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--ground)}
.land>canvas{position:absolute;inset:0;width:100%;height:100%}
.land::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 60% 58% at 50% 55%,rgba(38,62,56,.55),rgba(38,62,56,0) 70%)}
.land .nav{z-index:6}
.land-in{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--navh) - 4px) var(--pad) clamp(22px,3.4vh,40px);gap:0;text-align:center}
.land-mark{position:relative;flex:none;width:100%;height:clamp(96px,17vh,230px);margin-bottom:clamp(8px,2vh,22px);transition:height .45s cubic-bezier(.3,.7,.2,1),margin .45s}
.lm-img{position:absolute;left:50%;top:0;height:100%;width:auto;transform:translateX(-50%);opacity:0;transition:opacity .5s ease .12s;pointer-events:none}
.land.talking .lm-img{opacity:1}
.land-h{margin:0;font-size:clamp(40px,5.1vw,112px);color:var(--fg);text-wrap:balance;transition:font-size .45s cubic-bezier(.3,.7,.2,1)}
.land-h .p{color:var(--acc)}
.land-sub{margin:clamp(10px,1.6vh,18px) 0 0;font-size:clamp(17px,1.35vw,22px);color:rgba(var(--fgc),.86);transition:opacity .3s}
/* the box */
/* the thread and the box are one unit: before the conversation only the sand box shows; once it starts, one ink panel
   holds the history on top and the box docked at its bottom edge (a sand field inset), with one border and one shadow */
.convo{width:min(clamp(860px,48vw,1000px),100%);min-height:0;flex:0 1 auto;display:flex;flex-direction:column;margin-top:clamp(22px,4vh,44px);
  border:2px solid transparent;transition:box-shadow .2s,background-color .3s}
.ask{position:relative;width:100%;background:var(--bone);color:#324E48;
  border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);text-align:left;transition:box-shadow .2s,translate .2s}
.ask:focus-within{box-shadow:8px 8px 0 var(--acc)}
.ask-field{position:relative}
.ask textarea{display:block;width:100%;min-height:clamp(72px,9vh,104px);max-height:34vh;resize:none;border:0;outline:0;background:transparent;color:#324E48;
  font:500 clamp(19px,1.35vw,26px)/1.38 var(--f);letter-spacing:-.01em;padding:clamp(18px,2.2vh,24px) clamp(18px,1.6vw,26px) 4px}
.ask-ph{position:absolute;left:clamp(18px,1.6vw,26px);right:26px;top:clamp(18px,2.2vh,24px);pointer-events:none;
  font:500 clamp(19px,1.35vw,26px)/1.38 var(--f);letter-spacing:-.01em;color:rgba(18,29,26,.46);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ask-ph-t{display:inline-block;transition:opacity .35s,transform .35s}
.ask-ph-t.ph-out{opacity:0;transform:translateY(-8px)}
.ask-ph-t.ph-in{opacity:0;transform:translateY(8px);transition:none}
.ask.has-text .ask-ph{display:none}
.ask-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 10px clamp(18px,1.6vw,26px)}
.ask-hint{font-family:var(--f);font-size:10.5px;letter-spacing:.04em;color:rgba(18,29,26,.55)}
.ask-send{flex:none;width:52px;height:52px;display:grid;place-items:center;background:var(--acc);color:var(--on-acc);border:2px solid var(--ink);cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);transition:translate .15s,box-shadow .15s}
.ask-send svg{width:22px;height:22px}
.ask-send:hover{translate:2px 2px;box-shadow:1px 1px 0 var(--ink)}
.ask-send:disabled{opacity:.45;cursor:default}
.land-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(18px,3vh,30px);max-width:900px}
.chip{font:600 14.5px/1.2 var(--f);letter-spacing:-.005em;color:var(--fg);background:rgba(18,29,26,.34);
  border:1.5px solid rgba(var(--fgc),.42);padding:10px 15px;cursor:pointer;text-align:left;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  transition:background .15s,color .15s,border-color .15s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.chip:hover{background:var(--bone);color:var(--ink);border-color:var(--fg)}
.chip svg{width:12px;height:12px;flex:none}
.land-note{margin:clamp(14px,2.4vh,26px) 0 0;font-family:var(--f);font-size:10.5px;letter-spacing:.03em;color:rgba(var(--fgc),.62)}

/* the conversation on the landing, once they start typing */
.land-thread{width:100%;min-height:0;flex:0 1 auto;display:flex;flex-direction:column;text-align:left}
.land-thread[hidden]{display:none}
.lt-top{display:flex;justify-content:flex-end;padding:8px 10px 0}
.lt-new{font:500 12px var(--f);letter-spacing:.06em;text-transform:uppercase;color:rgba(var(--fgc),.7);background:none;border:0;cursor:pointer;padding:6px 8px}
.lt-new:hover{color:var(--acc)}
.lt-log{overflow:auto;padding:4px clamp(16px,1.6vw,24px) 18px;scrollbar-width:thin;scrollbar-color:rgba(var(--fgc),.3) transparent}
.land.talking .land-in{justify-content:flex-end}
.land.talking .land-mark{height:clamp(44px,6.5vh,72px);margin-bottom:clamp(14px,2vh,22px)}
.land.talking .land-h{font-size:clamp(28px,2.6vw,44px)}
.land.talking .land-sub,.land.talking .land-chips{display:none}
.land.talking .convo{margin-top:clamp(14px,2vh,20px);background:rgba(18,29,26,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-color:var(--ink);box-shadow:8px 8px 0 var(--ink)}
.land.talking .convo:focus-within{box-shadow:8px 8px 0 var(--acc)}
.land.talking .ask{display:flex;align-items:stretch;gap:10px;background:none;border:0;border-top:1px solid rgba(var(--fgc),.14);box-shadow:none;padding:12px}
.land.talking .ask-field{flex:1;min-width:0;background:var(--bone)}
.land.talking .ask textarea{min-height:52px;padding:13px 16px;font-size:clamp(17px,1.15vw,20px)}
.land.talking .ask-ph{top:13px;left:16px;right:16px;font-size:clamp(17px,1.15vw,20px)}
.land.talking .ask-bar{padding:0;align-items:stretch}
.land.talking .ask-hint{display:none}
.land.talking .ask-send{width:56px;height:auto;min-height:52px;border:0;box-shadow:none}
.land.talking .ask-send:hover{translate:none;box-shadow:none;filter:brightness(1.07)}
.land.talking .land-note{margin-top:14px}

/* ---------- messages (shared by the landing thread and the corner chat) ---------- */
.chat-log{display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.45}
.msg{max-width:88%}
.msg.u{align-self:flex-end;background:var(--bone);color:#324E48;padding:9px 13px 10px;font-weight:500}
.msg.a{align-self:flex-start;color:var(--fg)}
.msg.a .t{margin:0;text-wrap:pretty}
.msg a{color:inherit;text-decoration:none;border-bottom:1.5px solid var(--acc)}
.msg a:hover{color:var(--acc)}
.msg .nv{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font:600 13px/1.2 var(--f);color:#EFE7DA;border:0}
.msg .nv svg{width:11px;height:11px}
.msg .w{opacity:0;animation:wIn .22s ease-out forwards}
/* 8 Oct 2026: a plain fade. The old blur(2px) start got stuck on some words in Safari (iPhones), leaving them blurry. */
@keyframes wIn{from{opacity:0}to{opacity:1}}
.typing{align-self:flex-start;display:inline-flex;gap:5px;padding:8px 0}
.typing i{width:7px;height:7px;background:var(--acc);animation:tdot 1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips .chip{font-size:13.5px;padding:8px 12px;background:rgba(var(--fgc),.06);-webkit-backdrop-filter:none;backdrop-filter:none}
.chips .chip[aria-pressed="true"]{background:var(--bone);color:var(--ink);border-color:var(--fg)}
.chips .chip[aria-pressed="true"]::before{content:"✓";font-weight:600}
.chips .chip.go{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.chips .chip.go:disabled{opacity:.4;cursor:default}
/* grouped chips (the offerings list, 30 Sep 2026): one row per group, its name in small sage caps above it (L's palette:
   sage labels, the usual chips) */
.chips.grouped{flex-direction:column;align-items:flex-start;gap:12px}
.chips .chip-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chips .chip-g{flex-basis:100%;font:600 12px/1.2 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin-bottom:-2px}
/* the booking card */
.bk{margin-top:12px;background:var(--bone);color:#324E48;border-left:6px solid var(--acc);padding:16px 18px 14px;max-width:420px}
.bk h3{margin:0 0 10px;display:flex;align-items:center;gap:9px;font:600 18px/1.1 var(--f);letter-spacing:-.02em}
.bk h3 svg{width:20px;height:20px;flex:none}
.bk dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14.5px}
.bk dt{font:500 12px/1.9 var(--f);letter-spacing:.05em;text-transform:uppercase;color:rgba(18,29,26,.6)}
.bk dd{margin:0;overflow-wrap:anywhere}
.bk .pv{margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(18,29,26,.2);font-size:12.5px;line-height:1.4;color:rgba(18,29,26,.72)}
.bk .pv.ok{color:#121D1A;font-weight:600}.bk .pv.bad{color:#121D1A}.bk .pv a{color:inherit;text-decoration:underline;text-decoration-color:#121D1A;text-underline-offset:2px}

/* ---------- the corner chat: a live preview, never just an icon ---------- */
.dock{position:fixed;right:clamp(14px,1.6vw,26px);bottom:clamp(14px,1.6vw,26px);z-index:40;width:min(380px,calc(100vw - 28px));
  background:var(--ink);color:var(--fg);border:1px solid rgba(var(--fgc),.16);box-shadow:0 20px 50px rgba(18,29,26,.34),6px 6px 0 rgba(50,78,72,.95);
  display:flex;flex-direction:column;font-size:15px;transition:width .3s cubic-bezier(.3,.7,.2,1),height .3s,opacity .25s,transform .25s}
.dock.in{animation:dockIn .45s cubic-bezier(.3,.7,.2,1)}
@keyframes dockIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.dk-head{display:flex;align-items:center;gap:9px;padding:10px 8px 10px 14px;border-bottom:1px solid rgba(var(--fgc),.12)}
.dk-head img{height:20px;width:auto}
.dk-title{font:600 14px/1 var(--f);letter-spacing:-.005em;flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.dk-title .live{width:7px;height:7px;background:#7FD1A6;box-shadow:0 0 0 3px rgba(127,209,166,.18);flex:none}
.dk-b{flex:none;width:32px;height:32px;display:grid;place-items:center;background:none;border:0;color:rgba(var(--fgc),.8);cursor:pointer}
.dk-b:hover{color:var(--acc);background:rgba(var(--fgc),.06)}
.dk-b svg{width:16px;height:16px}
.dk-new{display:none}
.dk-log{padding:14px 14px 4px;max-height:min(300px,42vh);overflow:hidden;font-size:15px;
  -webkit-mask-image:linear-gradient(transparent,#121D1A 22px);mask-image:linear-gradient(transparent,#121D1A 22px)}
.dk-log .msg.old{display:none}
.dk-log .msg{max-width:94%}
.dk-log .msg.u{padding:7px 11px 8px}
.dk-log .chips .chip{font-size:13px;padding:7px 10px}
.dk-form{display:flex;gap:8px;padding:10px 10px 10px 12px;border-top:1px solid rgba(var(--fgc),.12)}
.dk-form input{flex:1;min-width:0;background:var(--bone);border:1.5px solid var(--fg);color:var(--ink);font:500 15px var(--f);padding:10px 12px;outline:0}
.dk-form input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.dk-form input::placeholder{color:rgba(18,29,26,.5)}
.dk-form input:focus{border-color:var(--acc)}
.dk-send{flex:none;width:42px;display:grid;place-items:center;background:var(--acc);color:var(--on-acc);border:0;cursor:pointer}
.dk-send svg{width:18px;height:18px}
.dk-peek{display:none}
/* expanded: the full chat with history */
.dock[data-ui="open"]{width:min(460px,calc(100vw - 28px));height:min(760px,calc(100svh - 40px))}
.dock[data-ui="open"] .dk-log{flex:1;max-height:none;overflow:auto;-webkit-mask-image:none;mask-image:none;padding-bottom:14px}
.dock[data-ui="open"] .dk-log .msg.old{display:block}
.dock[data-ui="open"] .dk-log .chips{flex-wrap:wrap;overflow:visible}
.dock[data-ui="open"] .dk-new{display:grid}
/* minimised: a slimmer preview that still shows the last message */
.dock[data-ui="min"]{width:min(340px,calc(100vw - 28px))}
.dock[data-ui="min"] .dk-log,.dock[data-ui="min"] .dk-form{display:none}
.dock[data-ui="min"] .dk-head{border-bottom:0}
.dock[data-ui="min"] .dk-title{display:none}
.dock[data-ui="min"] .dk-peek{display:block;flex:1;min-width:0;background:none;border:0;color:var(--fg);text-align:left;cursor:pointer;font:500 14px/1.35 var(--f);padding:2px 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock[data-ui="min"] .dk-peek:hover{color:#fff}
.dock .ic-col{display:none}.dock[data-ui="open"] .ic-col{display:block}.dock[data-ui="open"] .ic-exp{display:none}
body.page{padding-bottom:0}
body.leaving main,body.leaving>section,body.leaving>div,body.leaving>footer{transition:opacity .2s;opacity:.35}

/* ---------- highlights: a highlighter pen on text, a gently pulsing tint on blocks ---------- */
.hl-ink{background-image:linear-gradient(100deg,rgba(var(--hl),0) 0,rgba(var(--hl),.34) .35em,rgba(var(--hl),.30) 48%,rgba(var(--hl),.38) calc(100% - .35em),rgba(var(--hl),0) 100%);
  background-repeat:no-repeat;background-position:0 70%;background-size:0% 72%;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:0 .14em;margin:0 -.14em;color:inherit}
.hl-on .hl-ink,.hl-on.hl-ink{background-size:100% 72%;animation:hlSweep 1.1s cubic-bezier(.3,.7,.2,1) .2s backwards}
html.hl-now .hl-on .hl-ink,html.hl-now .hl-on.hl-ink,html.hl-now .hl-on::after{animation:none;transition:none}
@keyframes hlSweep{from{background-size:0% 72%}to{background-size:100% 72%}}
.band .hl-ink,.cmp-h .tm .hl-ink{background-image:linear-gradient(100deg,rgba(var(--hl),0) 0,rgba(var(--hl),.55) .35em,rgba(var(--hl),.5) 50%,rgba(var(--hl),.58) calc(100% - .35em),rgba(var(--hl),0) 100%)}
.hl-tint,.hl-cell{position:relative}
.hl-tint::after,.hl-cell::after{content:"";position:absolute;pointer-events:none;z-index:0;opacity:0;transition:opacity .5s}
.hl-tint::after{inset:-10px -12px;background:rgba(var(--hl),.12);box-shadow:inset 0 0 0 2px rgba(var(--hl),.6)}
.hl-cell::after{inset:0;background:rgba(var(--hl),.13)}
.hl-cell[role="columnheader"]::after{box-shadow:inset 0 4px 0 var(--acc)}
.hl-on.hl-tint::after,.hl-on.hl-cell::after{opacity:1;animation:hlPulse 2.4s ease-in-out .6s 3}
@keyframes hlPulse{0%,100%{opacity:1}50%{opacity:.45}}
.hl-tint>*,.hl-cell>*:not(.sr){position:relative;z-index:1}
.band .hl-tint::after{background:rgba(var(--hl),.16)}

/* ---------- phones: the corner chat becomes a slim bar at the bottom; tapping it opens the full-screen chat ---------- */
@media (max-width:760px){
  .land-in{padding:calc(var(--navh) - 10px) 16px 18px;justify-content:center}
  .land-mark{height:clamp(84px,15svh,130px);margin-bottom:10px}
  .land-h{font-size:clamp(34px,10.4vw,46px);line-height:.96}
  .land-sub{font-size:17px;margin-top:10px}
  .convo{margin-top:22px}
  .ask{box-shadow:6px 6px 0 var(--ink)}
  .ask:focus-within{box-shadow:6px 6px 0 var(--acc)}
  .ask textarea{min-height:84px;font-size:18px;padding:16px 16px 4px}
  .ask-ph{font-size:18px;left:16px;top:16px;white-space:normal;right:16px}
  .ask-hint{display:none}
  .ask-bar{justify-content:flex-end;padding:6px 8px 8px}
  .ask-send{width:46px;height:46px}
  .land-chips{gap:8px;margin-top:20px}
  .land-chips .chip{font-size:13.5px;padding:9px 12px}
  .land-note{font-size:9.5px;line-height:1.5;max-width:30em}
  .land.talking .land-mark{height:0;margin:0}
  .land.talking .land-h{font-size:24px}
  .land.talking .lm-img{display:none}
  .land.talking .convo{margin-top:14px;box-shadow:6px 6px 0 var(--ink)}
  .land.talking .convo:focus-within{box-shadow:6px 6px 0 var(--acc)}
  .land.talking .ask{padding:10px;gap:8px}
  .land.talking .ask textarea{min-height:48px;font-size:17px;padding:12px 14px}
  .land.talking .ask-ph{font-size:17px;top:12px;left:14px;white-space:nowrap}
  .land.talking .ask-ph-t{display:inline}
  .land.talking .ask-send{width:50px;min-height:48px}
  .land.talking .land-note{display:none}
  .chat-log{font-size:15.5px}
  .dock{left:10px;right:10px;bottom:10px;width:auto;box-shadow:0 14px 40px rgba(18,29,26,.4),4px 4px 0 rgba(50,78,72,.95)}
  .dock .dk-head{display:none}
  .dock .dk-log{max-height:none;padding:11px 13px 2px;cursor:pointer;-webkit-mask-image:none;mask-image:none}
  .dock .dk-log .msg{display:none}
  .dock .dk-log .msg.last{display:block;max-width:100%}
  .dock .dk-log .msg.last .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;line-height:1.38}
  .dock .dk-log .msg.last .nv{display:none}
  .dock .dk-log .bk{display:none}
  .dock:not([data-ui="open"]) .dk-log .chips{display:none}
  .dock .dk-form{border-top:0;padding:8px 8px 8px 10px}
  .dock[data-ui="min"] .dk-log{display:block}
  .dock[data-ui="min"] .dk-form{display:none}
  .dock[data-ui="min"],.dock[data-ui="preview"]{width:auto}
  .dock[data-ui="open"]{inset:0;width:auto;height:100%;height:100dvh;border:0;box-shadow:none}
  .dock[data-ui="open"] .dk-head{display:flex;padding-top:max(10px,env(safe-area-inset-top))}
  .dock[data-ui="open"] .dk-log{cursor:auto}
  .dock[data-ui="open"] .dk-log .msg{display:block}
  .dock[data-ui="open"] .dk-log .msg.u{align-self:flex-end}
  .dock[data-ui="open"] .dk-log .msg.last .t{display:block;-webkit-line-clamp:unset;font-size:15.5px;line-height:1.45}
  .dock[data-ui="open"] .dk-log .msg.last .nv,.dock[data-ui="open"] .dk-log .bk{display:inline-flex}
  .dock[data-ui="open"] .dk-log .bk{display:block}
  .dock[data-ui="open"] .dk-form{padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .dock[data-ui="open"] .dk-title{display:flex}
  body.page{padding-bottom:124px}
  body.chat-open{overflow:hidden}
  .hl-tint::after{inset:-8px -8px}
}
@media (max-height:640px) and (min-width:761px){.land-mark{height:70px}.land-note{display:none}}
@media (prefers-reduced-motion:reduce){
  .msg .w{animation:none;opacity:1}
  .typing i{animation:none;opacity:.7}
  .hl-on .hl-ink,.hl-on.hl-ink{animation:none}
  .hl-on.hl-tint::after,.hl-on.hl-cell::after{animation:none}
  .dock,.dock.in{animation:none;transition:none}
  .land-mark,.land-h,.lm-img,.convo{transition:none}
  .ask-ph-t{transition:none}
}

/* ======================================================================================
   CONCEPT J: I's chat screen first, then H's journey underneath, on one page.
   ====================================================================================== */
body.jland{background:var(--ground)}
/* the chat screen: room at the bottom for the quiet cue */
.jland .land-in{padding-bottom:calc(clamp(22px,3.4vh,40px) + 30px)}
.land-cue{position:absolute;left:50%;bottom:clamp(12px,1.8vh,20px);z-index:4;transform:translateX(-50%);display:inline-flex;align-items:center;gap:9px;
  font:500 12px/1 var(--f);letter-spacing:.05em;color:rgba(var(--fgc),.46);text-decoration:none;white-space:nowrap;padding:8px 10px;
  transition:color .2s,opacity .3s}
.land-cue svg{width:10px;height:14px;flex:none;animation:cueBob 2.4s ease-in-out infinite}
.land-cue:hover,.land-cue:focus-visible{color:rgba(var(--fgc),.9)}
.land-cue:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@keyframes cueBob{0%,55%,100%{transform:translateY(0)}25%{transform:translateY(4px)}}
.land.talking .land-cue{color:rgba(var(--fgc),.36)}

/* the journey's own nav: it shows once the stage is pinned, so there is only ever one nav on screen */
.jland .stage .nav{opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s linear .35s}
.jland .stage .nav.shown{opacity:1;visibility:visible;transition:opacity .35s}
/* the mark is whole at the start of the journey: a short first step, then the pieces */
.jland .step.s0{min-height:calc(var(--vh) * .9)}

/* the corner chat on the J landing: hidden on the chat screen (the full chat is there), shown once they scroll down */
.dock.j-off{opacity:0;visibility:hidden;transform:translateY(18px);pointer-events:none;transition:opacity .25s,transform .25s,visibility 0s linear .25s}
.dock.j-left{right:auto;left:clamp(14px,1.6vw,26px)}
/* tucked: the slim one-line preview, while the breakdown cards or the contact screen need the room */
@media (min-width:761px){
  .dock.j-tuck:not([data-ui="open"]){width:min(340px,calc(100vw - 28px))}
  .dock.j-tuck:not([data-ui="open"]) .dk-log,.dock.j-tuck:not([data-ui="open"]) .dk-form{display:none}
  .dock.j-tuck:not([data-ui="open"]) .dk-head{border-bottom:0}
  .dock.j-tuck:not([data-ui="open"]) .dk-title{display:none}
  .dock.j-tuck:not([data-ui="open"]) .dk-peek{display:block;flex:1;min-width:0;background:none;border:0;color:var(--fg);text-align:left;cursor:pointer;font:500 14px/1.35 var(--f);padding:2px 0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* phones: the breakdown's label list sits above the chat bar */
@media (max-width:1023px){.jland .pcards{bottom:calc(14px + var(--jpadb,0px))}}
@media (prefers-reduced-motion:reduce){
  .land-cue svg{animation:none}
  .dock.j-off{transition:none}
  .jland .stage .nav,.jland .stage .nav.shown{transition:none}
}
.dock.j-hide{opacity:0;visibility:hidden;transform:translateY(18px);pointer-events:none;transition:opacity .2s,transform .2s,visibility 0s linear .2s}
@media (prefers-reduced-motion:reduce){.dock.j-hide{transition:none}}
/* phones: once there is a conversation, the page's end scrolls clear of the chat bar */
@media (max-width:760px){body.jland{padding-bottom:var(--jpadb,0px)}}

/* ---------- J, phones only (<=760px): mobile formatting pass, 29 Sep 2026. Nothing here reaches wider screens. ---------- */
@media (max-width:760px){
  /* the box and the chat panel: the 6px offset shadow counts as part of the width, so the drawn box sits
     between equal side margins (16px left edge, shadow ends 16px from the right) and never runs past the screen */
  .jland .convo{width:calc(100% - 6px);margin-right:6px;max-width:none}
  /* the rotating placeholder: readable (about 4.6:1 on sand) */
  .jland .ask-ph{color:rgba(18,29,26,.68)}
  /* the headline in the talking state: a little air at the sides on narrow phones */
  .jland .land.talking .land-h{font-size:clamp(21px,6.2vw,26px);padding:0 6px}
  /* the slim chat bar: the same side margins as the page (its 4px shadow inside the right margin) */
  .jland .dock{left:16px;right:20px;bottom:max(12px,env(safe-area-inset-bottom))}
  .jland .dock[data-ui="open"]{inset:0}
  /* the breakdown labels: taller tap targets, and the list's shadow inside the right margin */
  .jland .pcards{right:calc(var(--pad) + 3px)}
  .jland .pcard{padding-top:calc(11px + 3px*var(--a));padding-bottom:calc(11px + 3px*var(--a))}
}

/* ---------- J, all screens: the footer on a deep sage-black (#121D1A), not the ink of the panels ---------- */
footer{background:#121D1A}
/* ---------- J, all screens: links to other sites (they open in a new tab) carry a small north-east arrow ---------- */
a.ext::after{content:"\2197";display:inline-block;margin-left:.22em;font-size:.82em;line-height:1;text-decoration:none;transform:translateY(-.06em)}

/* ======================================================================================
   J, final QA pass (29 Sep 2026)
   ====================================================================================== */
/* the screen-reader-only live region kept its paragraph margin and pushed an 18px strip of page colour below the footer */
.sr{margin:0;padding:0;border:0}
/* the email in the footer reads as an address, not in capitals */
.foot .ents a{text-transform:none}
/* the big headlines: no single word left alone on the last line */
h1.disp,h2.disp,.land-h{text-wrap:balance}
.statement{text-wrap:pretty}
/* wide screens: the footer's last line (the tagline) sits clear of the corner chat, which floats over the bottom right */
@media (min-width:761px){
  footer{padding-bottom:max(40px,calc(clamp(14px,1.6vw,26px) + 76px))}
}
/* touch sizes (tablets and phones): every control at least 44px tall, without moving the drawn lines */
@media (max-width:1119px){
  .brand{min-height:44px;min-width:44px;padding:7px 8px;margin:-7px -8px}
  .nav .cta{min-height:44px}
  .chip{min-height:44px}
  .land-cue{min-height:44px}
  .jland .land-in{padding-bottom:calc(clamp(12px,1.8vh,20px) + 52px)}
  .lt-new{min-height:44px;padding:6px 10px}
  .mail{padding-top:8px}
  .social a{width:44px;height:44px}
  .fpages{gap:0 22px}
  .fpages a{display:inline-block;padding:10px 0}
  .foot .ents a,.ln{border-bottom:0;text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:1.5px;text-underline-offset:5px}
  .foot .ents a{display:inline-block;padding:14px 0;margin:-14px 0}
  .ln{display:inline-block;padding:10px 0;margin:-8px 0}
  .dk-b{width:44px;height:44px}
  .dk-send{width:46px;min-height:44px}
  .dock[data-ui="min"] .dk-peek,.dock.j-tuck:not([data-ui="open"]) .dk-peek{min-height:44px}
}
@media (max-width:1023px){
  .pcard{padding-top:calc(13px + 3px*var(--a));padding-bottom:calc(13px + 3px*var(--a))}
}
/* phones: body text at 16px, the fine print readable, and no zoom-on-focus in the chat inputs (iOS zooms under 16px) */
@media (max-width:760px){
  .jland .pcard{padding-top:calc(13px + 3px*var(--a));padding-bottom:calc(13px + 3px*var(--a))}
  .belief p{font-size:16px}
  .aside{font-size:13px}
  .land-note{font-size:11.5px}
  .chips .chip,.dk-log .chips .chip{font-size:14.5px;min-height:44px}
  .pc-one{font-size:16px}
  .pc-it span{font-size:15px}
  .pc-it.t{font-size:15px;text-wrap:balance}
  .dk-form input{font-size:16px}
}
/* tablets in landscape (the breakdown labels still float beside the pieces): the closed labels at 44px, open ones unchanged */
@media (min-width:1024px) and (max-width:1119px){
  .pcard{padding-top:calc(13px + 7px*var(--a));padding-bottom:calc(13px + 5px*var(--a))}
}
/* short phones (iPhone SE and the like): a smaller mark, so the fine print never touches the scroll cue */
@media (max-width:760px) and (max-height:700px){.jland .land-mark{height:clamp(56px,11svh,84px)}}

/* ---------- PRIORITY FIX, founder's iPhone (Safari, 390pt), 29 Sep 2026: the suggestion chips sat on top of the ask box.
   Cause: on a short screen (Safari's toolbars leave ~660pt of 100svh) the landing is a fixed-height column, and the box's
   wrapper (.convo, min-height:0) was allowed to shrink below its content, so the box spilled over the chips under it. And the
   rotating example was absolutely positioned, so a 2- or 3-line example did not make the box any taller.
   Now: before the conversation starts the landing grows with its content (at least one screen tall), nothing in it
   shrinks, and the example shares the text field's grid cell, so the box always grows around it. ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.jland .land:not(.talking){height:auto;min-height:max(520px,100svh)}
.jland .land:not(.talking) .land-in{height:auto;min-height:max(520px,100svh)}
.jland .land:not(.talking) .land-in>*,.jland .land:not(.talking) .ask{flex-shrink:0}
.jland .land.talking .ask{flex-shrink:0}
.jland .ask-field{display:grid}
.jland .ask-field>textarea,.jland .ask-field>.ask-ph{grid-area:1/1;min-width:0}
.jland .ask-ph{position:relative;left:auto!important;right:auto!important;top:auto!important;padding:clamp(18px,2.2vh,24px) 26px 4px clamp(18px,1.6vw,26px)}
.jland .land.talking .ask-ph{padding:13px 16px}
/* 30 Sep 2026, "the chat box keeps lagging and growing bigger and smaller": the box took the height of whichever example was
   showing (1 to 3 lines on a phone), so it resized every 3.4 s and the chips, the fine print and the cue jumped with it. Now
   every example sits invisibly in the same cell (.ask-ph-g), so the box is always as tall as the longest one at this width,
   and the visible one just fades in its place. Typing hides the examples but keeps their room. */
.jland .ask-ph{display:grid;align-content:start;align-items:start}
.jland .ask-ph>span{grid-area:1/1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.jland .ask-ph-g{visibility:hidden}
.jland .ask.has-text .ask-ph{display:grid;visibility:hidden}
.jland .land.talking .ask-ph-g{display:none}
@media (max-width:760px){
  .jland .ask-ph{padding:16px 16px 4px}
  .jland .land.talking .ask-ph{padding:12px 14px}
}
/* ?static (the reduced-motion helper) also stops the CSS loops, like the real setting does */
.rm .land-cue svg,.rm .pcard.on .pc-arr svg,.rm .dot{animation:none!important}
/* contrast (WCAG AA 4.5:1 for small text): the rotating example, the hints and the fine print on the landing, and the audit
   step numbers (now dark sage on sand).  */
.jland .ask-ph{color:rgba(18,29,26,.68)}
.jland .ask-hint{color:rgba(18,29,26,.74)}
.jland .land-note{color:rgba(var(--fgc),.8)}
.land-cue{color:rgba(var(--fgc),.84)}
.land.talking .land-cue{color:rgba(var(--fgc),.6)}
.au-steps b{color:#324E48;filter:none}
/* phones: the room kept free for the chat bar at the end of the page is part of the footer (#121D1A), not a strip of page colour */
@media (max-width:760px){
  body.page{padding-bottom:0}
  body.page footer{padding-bottom:calc(40px + 124px)}
  body.jland{padding-bottom:0}
  body.jland footer{padding-bottom:calc(40px + var(--jpadb,0px))}
}
/* newsletter (29 Sep 2026: now really subscribes, via /api/subscribe): the honeypot, the busy button, the error link */
.news .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.news .cta:disabled{opacity:.6;cursor:progress}
.news-ok a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* launch build: the privacy and terms pages, and the 404 (29 Sep 2026) */
.legal .wrap{padding-top:clamp(48px,6vw,96px);padding-bottom:clamp(56px,7vw,112px)}
.legal-in{max-width:760px}
.legal-in h2{font-weight:600;font-size:clamp(21px,2vw,26px);line-height:1.2;letter-spacing:-.015em;margin:48px 0 14px}
.legal-in p,.legal-in li{font-size:17px;line-height:1.65;margin:0 0 14px}
.legal-in ul{margin:0 0 14px;padding-left:1.2em}
.legal-in li::marker{color:var(--acc)}
.legal-in b{font-weight:600}
.legal-in a,.legal.nf p a{color:inherit;text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:1.5px;text-underline-offset:4px}
.legal-in .legal-date{font-size:16px;letter-spacing:.02em;opacity:.88;margin-bottom:28px}
.nf h2{font-size:clamp(28px,3.4vw,44px);margin:0 0 24px}
.nf-list{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 32px;max-width:900px}
.nf-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-bottom:1.5px solid rgba(18,29,26,.25);text-decoration:none;font-weight:600;font-size:19px}
.nf-list a:hover{color:var(--acc)}
.nf-list svg{width:16px;height:16px;flex:none}
.nf p{font-size:17px}
.news .hp{font-size:16px}
@media (max-width:1119px){.foot .ents a{min-width:44px;text-align:center}}
/* lab notes (30 Sep 2026): the list with dates and one-line summaries, and the article pages */
.note-list .tt{display:block;min-width:0}
.note-list .t{display:block}
.note-list .s{display:block;margin-top:12px;font-size:17px;line-height:1.5;font-weight:500;max-width:62ch;text-wrap:pretty}
.note-list .k time{white-space:nowrap}
/* the reading pages (articles, privacy, terms, 404), 30 Sep 2026: one centred container, shared by the hero text and the body,
   so nothing hugs the left of a wide screen. Below 1180px it is the ~68ch reading column; from 1180px it also holds a narrow
   sticky rail (meta, "On this page", back link) to the left of that column. The hero is laid out in the flow (not absolute),
   so the breadcrumb and title always keep their room below the nav, however long the title. */
:root{--docmax:740px}
@media (min-width:1180px){:root{--docmax:1100px}}
@media (min-width:761px){
  .doc-hero{height:auto;min-height:clamp(460px,58vh,640px);display:flex;flex-direction:column;justify-content:flex-end;
    padding:calc(var(--navh) + clamp(44px,7vh,96px)) 0 clamp(44px,6.5vh,76px)}
  .doc-hero .phero-in{position:relative;left:auto;bottom:auto;width:min(var(--docmax),calc(100% - 2 * var(--pad)));margin:0 auto}
  .doc-hero .phero-in>*{max-width:62%}
  .doc-hero h1{font-size:clamp(46px,5.4vw,96px)}
  .art-hero h1{font-size:clamp(36px,3.2vw,56px)}
  .art-hero .phero-in>*{max-width:64%}
}
.art-hero h1{line-height:1.03;margin:0 0 20px;text-wrap:balance}
.doc-hero .phero-in a{pointer-events:auto;color:inherit;text-decoration:underline;text-decoration-color:var(--acc);text-underline-offset:4px}
.art-k{margin:0 0 18px;font-size:12px}
.art-meta{margin:0;font-size:12px;opacity:.85}
.doc-grid{max-width:var(--docmax);margin:0 auto}
.doc-solo .doc-main{min-width:0}
.doc-rail{display:none}
.doc h2[id]{scroll-margin-top:28px}
@media (min-width:1180px){
  .doc-grid{display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:clamp(56px,5vw,88px)}
  .doc-grid.doc-solo{display:block}
  .doc-rail{display:block;min-width:0}
  .rail-in{position:sticky;top:28px;max-height:calc(100vh - 56px);overflow-y:auto;overscroll-behavior:contain;padding:4px 4px 12px 0}
  .rail-meta>*{display:block}
  .rail-meta{margin:0 0 28px;padding-bottom:18px;border-bottom:2px solid var(--ink);font-size:12px;line-height:1.8}
  .rail-h{margin:0 0 10px;font-size:12px;opacity:.88}
  .rail-toc ol{list-style:none;margin:0 0 28px;padding:0}
  .rail-toc a{display:block;padding:7px 0 7px 14px;border-left:2px solid rgba(18,29,26,.2);font-size:14.5px;line-height:1.3;font-weight:600;text-decoration:none;color:inherit;opacity:.88;transition:opacity .15s,border-color .15s}
  .rail-toc a:hover{opacity:1;border-left-color:var(--ink)}
  .rail-toc a[aria-current="true"]{opacity:1;font-weight:600;border-left-color:var(--acc)}
  .rail-back{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;text-decoration:none;border-bottom:2px solid var(--acc);padding-bottom:3px}
  .rail-back svg{width:14px;height:14px}
}
.art .wrap{padding-top:clamp(48px,6vw,96px);padding-bottom:clamp(56px,7vw,112px)}
.art-in{max-width:68ch;font-size:19px;line-height:1.65}
.art-in p{margin:0 0 1.05em;text-wrap:pretty}
.art-in h2{font-weight:600;font-size:clamp(23px,2vw,28px);line-height:1.2;letter-spacing:-.015em;margin:1.9em 0 .6em}
.art-in a{color:inherit;text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:1.5px;text-underline-offset:4px;overflow-wrap:anywhere}
.art-tw{margin:1.4em 0 1.4em;overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.art-tw:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.art-t{border-collapse:collapse;width:100%;min-width:560px;font-size:16px;line-height:1.35;font-variant-numeric:tabular-nums}
.art-t th,.art-t td{text-align:left;padding:11px 16px;border-bottom:1px solid rgba(18,29,26,.22);vertical-align:top}
.art-t tbody tr:last-child th,.art-t tbody tr:last-child td{border-bottom:0}
.art-t thead th{font-weight:600;font-size:15px}
.art-t tbody th{font-weight:600;width:38%}
.art-t td:nth-child(3),.art-t th:nth-child(3){background:rgba(50,78,72,.12);padding-left:16px;padding-right:16px}
.art-t th:first-child,.art-t td:first-child{padding-left:0}
.art-t td:nth-child(4),.art-t th:nth-child(4){padding-left:20px}
.art-src{margin-top:2.6em;padding-top:1.2em;border-top:2px solid var(--ink)}
.art-src h2{margin-top:0;font-size:clamp(20px,1.7vw,24px)}
.art-src ol{margin:0;padding-left:1.4em;font-size:16px;line-height:1.5}
.art-src li{margin:0 0 .5em}
.art-src li::marker{color:var(--acc);font-weight:600}
.art-back{margin:2.4em 0 0}
.art-back a{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;border-bottom:2px solid var(--acc);padding-bottom:4px}
.art-back svg{width:16px;height:16px}
.art .news{margin-top:clamp(56px,6vw,96px)}
@media (max-width:760px){
  .art-hero h1{font-size:clamp(30px,8.6vw,40px)}
  .art-in{font-size:17px;line-height:1.62}
  .art-t{font-size:15px}
  .note-list .s{font-size:16px;margin-top:8px}
}
.art-hint{display:none}
.art-t td,.art-t thead th{white-space:nowrap}
.art-tw{background:linear-gradient(to left,var(--bone) 40%,rgba(var(--fgc),0)) right center/36px 100% no-repeat local,
  radial-gradient(farthest-side at 100% 50%,rgba(18,29,26,.2),rgba(18,29,26,0)) right center/12px 100% no-repeat scroll}
@media (max-width:760px){
  .art-hint{display:flex;align-items:center;gap:8px;margin:1.2em 0 -.5em;font-size:12px;opacity:.88}
  .art-hint::after{content:"\2192";font-family:var(--f);font-size:15px;color:var(--acc);font-weight:600}
  .art-t{min-width:0;width:max-content}
  .art-t th:first-child,.art-t td:first-child{position:sticky;left:0;z-index:1;background:var(--bone);width:auto;min-width:132px;max-width:150px;white-space:normal;padding-right:14px;box-shadow:inset -1px 0 0 rgba(18,29,26,.22)}
  .art-t th,.art-t td{padding:10px 12px}
  .art-t td:nth-child(4),.art-t th:nth-child(4){padding-left:14px}
}

/* 30 Sep 2026: Safari (iPhone and Mac) wraps text-wrap:pretty paragraphs far too early, leaving a ragged empty band on the
   right of every paragraph. hanging-punctuation is Safari-only, so this switches Safari back to normal wrapping; Chrome keeps pretty. */
@supports (hanging-punctuation: first) {
  p, li, .statement, .say, .msg .t, .pc-it span, .note-list .s, .art-in p { text-wrap: wrap !important; }
}

/* 30 Sep 2026: the Jev vs GPT-6 Luna benchmark card, drawn in HTML so it stays sharp and readable on every screen */
.bench{margin:1.6em 0 1.8em;background:var(--ground);color:var(--fg);padding:clamp(22px,3vw,36px);box-shadow:8px 8px 0 var(--ink);font-size:16px;line-height:1.4}
.bench p{margin:0}
.bench-k{font-family:var(--f);font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.bench-t{margin-top:10px!important;font-weight:600;font-size:clamp(28px,3.2vw,40px);line-height:1.05;letter-spacing:-.02em}
.bench-t .bench-dot{color:var(--acc)}
.bench-s{margin-top:10px!important;opacity:.85}
.bench-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0 8px;padding-top:20px;border-top:1px solid rgba(var(--fgc),.25)}
.bench-stats>div{border-left:3px solid var(--acc);padding-left:14px}
.bench-n{display:block;font-weight:600;font-size:clamp(34px,4.4vw,56px);line-height:1;letter-spacing:-.03em}
.bench-l{display:block;margin-top:6px;opacity:.9}
.bench-chart{margin-top:22px;padding-top:18px;border-top:1px solid rgba(var(--fgc),.25)}
.bench-h{font-weight:600;font-size:18px;margin-bottom:12px!important}
.bench-row{display:grid;grid-template-columns:128px 1fr 88px;align-items:center;gap:12px;margin:10px 0}
.bench-m{font-weight:600;line-height:1.2}
.bench-m small{display:block;font-weight:400;font-size:12.5px;opacity:.75}
.bench-bar{height:22px;background:rgba(var(--fgc),.10);position:relative}
.bench-bar i{position:absolute;inset:0 auto 0 0;background:var(--bone-2)}
.bench-bar i.j{background:var(--acc)}
.bench-v{font-family:var(--f);font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.bench figcaption{margin-top:20px;padding-top:14px;border-top:1px solid rgba(var(--fgc),.25);font-size:14.5px;opacity:.85}
@media (max-width:760px){
  .bench{box-shadow:6px 6px 0 var(--ink);margin-right:6px}
  .bench-stats{grid-template-columns:1fr 1fr;gap:14px}
  .bench-row{grid-template-columns:1fr 84px;row-gap:6px}
  .bench-m{grid-column:1 / -1}
  .bench-v{font-size:13px}
}

/* 30 Sep 2026, responsiveness sweep: no text below 12px on any screen (the mono labels, captions, hints and notes were 9.5 to 11.5px) */
.belief .n,.au-steps b,.aside,.ask-hint,.land-note,.land-cue{font-size:12px}
@media (max-width:760px){.land-note{font-size:12px}.floor .cap{font-size:12px}}
.doc-solo .nf-list{max-width:none}
/* the side gutter grows on very wide screens, so boxes whose max-width includes it get that growth back */
@media (min-width:761px){.floor-head{max-width:calc(min(680px,38vw) - 88px + 2 * var(--pad))}.contact .inner{max-width:calc(980px - 88px + 2 * var(--pad))}}

/* ======================================================================================
   WEBSITE L (30 Sep 2026). Founders' decisions:
   - colours from the booking-confirmation email: warm cream/sand grounds FIRST, dark sage (#324E48) only as a secondary
     accent band (the About lab floor, the closing band, the benchmark card), green-ink text (#121D1A), the deep green footer
     (#121D1A). No warm accent colour anywhere. --fg/--fgc are the text colour on the current ground, --acc the accent (ink on cream,
     cream on sage), --ground the ground.
   - one typeface: Switzer (headings 500-600, body 400, small calm uppercase labels at 12px or more).
   ====================================================================================== */
/* round 3 (30 Sep 2026): NO BLACK. The founder's two greens: SAGE #324E48 (buttons, highlights, active states) and DARK GREEN
   #121D1A (text, hover/pressed, footer). --acc-h: the button colour on hover and press. */
:root{--fg:#324E48;--fgc:50,78,72;--ground:#EFE7DA;--acc:#324E48;--acc-h:#121D1A;--on-acc:#EFE7DA}
.cband,.floor,.contact,.bench,.fit-audit,.menu,footer,.cmp-h>.tm{--fg:#E4DCCA;--fgc:228,220,202;--ground:#324E48;--acc:#EFE7DA;--acc-h:#FBF8F2;--on-acc:#121D1A}
.menu,.fit-audit,.cmp-h>.tm{--ground:#121D1A}
.bench{background:#324E48}
body{background:#EFE7DA;color:#324E48;font-family:var(--f);font-weight:400}   /* 3 Oct 2026, founder: titles and text in the brand dark green, not near-black */
/* full stops after headlines: the headline's own colour */
.p,.hero-title .p,.phero h1 .p,.cband h2 .p,.land-h .p{color:inherit!important}
/* type: measured, not shouty. Normal width, modest tracking, sentence case */
.disp{font-weight:500;letter-spacing:-.022em;line-height:1.04}
.mono{font-family:var(--f);font-weight:500;letter-spacing:.07em;text-transform:uppercase;font-size:12px}
b,strong{font-weight:600}
.land-h{font-size:clamp(40px,4.6vw,96px)}
.phero h1{font-size:clamp(46px,5.2vw,100px);line-height:1.02}
.cband h2{font-size:clamp(40px,5vw,92px)}
.statement{font-weight:500;letter-spacing:-.02em;line-height:1.16}
/* the nav on the cream heroes */
.links a:hover{color:#324E48;opacity:1}
.burger{color:var(--fg);border-color:rgba(var(--fgc),.4)}
/* buttons: sage with cream text on cream (dark green on hover and press, with a dark green offset), cream with dark green
   text on sage */
.cta,.btn{font-weight:500;letter-spacing:0}
.cta{box-shadow:5px 5px 0 #121D1A;transition:box-shadow .2s,translate .2s,background-color .2s}
.cta:hover,.cta:active{background:var(--acc-h);box-shadow:2px 2px 0 #121D1A}
.nav .cta{box-shadow:3px 3px 0 #121D1A}
.nav .cta:hover{box-shadow:1px 1px 0 #121D1A}
.cband .cta{box-shadow:5px 5px 0 #121D1A}
.btn,.btn-o,.bone .btn-o,.band .btn,.band .btn-o{background:#324E48;color:#EFE7DA;box-shadow:5px 5px 0 #121D1A}
.btn:hover,.btn-o:hover,.btn:active,.btn-o:active{background:#121D1A;box-shadow:2px 2px 0 #121D1A}
/* focus rings: 2px, sage on cream, cream on sage */
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.pcard:focus-visible,.qz-opt:focus-visible{outline-width:2px}
/* the landing: a cream plate under the headline and the box (the world's grid fades out there) */
.land::after{background:radial-gradient(ellipse 52% 40% at 50% 66%,rgba(239,231,218,.72),rgba(239,231,218,0) 72%)}
.ask{background:#F7F2E9;box-shadow:8px 8px 0 #324E48}
.ask:focus-within,.land.talking .convo:focus-within{box-shadow:8px 8px 0 #121D1A;border-color:#324E48}
@media (max-width:760px){.ask{box-shadow:6px 6px 0 #324E48}.ask:focus-within,.land.talking .convo:focus-within{box-shadow:6px 6px 0 #121D1A}}
.ask-send{background:#324E48;color:#EFE7DA;border-color:#324E48;box-shadow:3px 3px 0 #121D1A}
.ask-send:hover,.ask-send:active{background:#121D1A;border-color:#121D1A}
.chip{background:rgba(247,242,233,.78);color:#324E48;border-color:rgba(18,29,26,.4)}
.chip:hover{background:#324E48;color:#EFE7DA;border-color:#324E48}
/* the conversation panel on the landing: cream, with a sage frame and a dark green offset */
.land.talking .convo{background:rgba(247,242,233,.97);border-color:#324E48;box-shadow:8px 8px 0 #121D1A}
.land.talking .ask{border-top-color:rgba(18,29,26,.16)}
.land.talking .ask-field{background:#EFE7DA;border:1.5px solid rgba(18,29,26,.3)}
.msg.u{background:#324E48;color:#EFE7DA}
.msg .nv{color:#324E48;text-decoration:underline;text-underline-offset:3px}
/* the corner chat: a cream panel in a sage frame with a sage header (like the booking email), a dark green offset */
.dock{background:#F7F2E9;color:#324E48;--fg:#324E48;--fgc:50,78,72;--acc:#324E48;--acc-h:#121D1A;--on-acc:#EFE7DA;border:1.5px solid #324E48;box-shadow:0 18px 44px rgba(18,29,26,.18),6px 6px 0 #121D1A}
@media (max-width:760px){.dock{box-shadow:0 14px 40px rgba(18,29,26,.2),4px 4px 0 #121D1A}}
.dk-send:hover,.dk-send:active{background:#121D1A}
.dk-head{background:#324E48;color:#EFE7DA;--fgc:239,231,218;--acc:#EFE7DA;border-bottom:0}
.dk-title .live{background:#CFE0D6;box-shadow:0 0 0 3px rgba(207,224,214,.25)}
.dk-form input{background:#EFE7DA;border-color:rgba(18,29,26,.35)}
.dk-form input:focus{border-color:#324E48}
.dock .dk-head .dk-peek{color:#EFE7DA!important}
/* the breakdown labels and cards: cream panels, a light green frame and a sage left edge; the active one opens with a dark green edge */
.pcard{background:rgba(247,242,233,.97);color:#324E48;border:1.5px solid rgba(18,29,26,.4);border-left:4px solid #324E48;
  box-shadow:calc(3px + 3px*var(--a)) calc(3px + 3px*var(--a)) 0 rgba(18,29,26,.16)}
.pcard:hover,.pcard.hot{background:#FBF8F2;border-color:#121D1A;border-left-color:#121D1A}
.pcard.on{border-left-color:#EE6A33}   /* 1 Oct 2026: the card of the chosen (orange) piece */
.pcard.on:hover,.pcard.on.hot{border-left-color:#EE6A33}
.pc-la{color:#324E48}
.pc-open{border-color:#324E48;color:#324E48}
.pc-arr{background:#324E48;color:#EFE7DA}
.pcard:hover .pc-open,.pcard:focus-visible .pc-open,.pcard.hot .pc-open{background:#324E48;border-color:#324E48;color:#EFE7DA}
.pcard:hover .pc-arr,.pcard:focus-visible .pc-arr,.pcard.hot .pc-arr{background:#EFE7DA;color:#121D1A}
/* the quiz: the selected tile in dark sage with cream text; hover a heavier ink stroke */
.qz-opt:hover{border-color:#324E48}
.qz-opt:active{background:#E4DCCA}
.qz-opt.sel{background:#324E48;color:#EFE7DA;border-color:#121D1A}
.qz-opt.sel .qz-ic,.qz-opt.sel .bx{background:#EFE7DA;color:#121D1A;border-color:#EFE7DA}
/* the comparison table's recommended column and the chat's page highlights: sage */
.cmp.rec-S .su,.cmp.rec-T .tm{box-shadow:inset 3px 0 0 #324E48,inset -3px 0 0 #324E48}
.cmp.rec-S .cmp-fig.suite,.cmp.rec-T .cmp-fig.team{box-shadow:inset 3px 0 0 #324E48,inset -3px 0 0 #324E48,inset 0 3px 0 #324E48}
.cmp.rec-S .cmp-f .su,.cmp.rec-T .cmp-f .tm{box-shadow:inset 3px 0 0 #324E48,inset -3px 0 0 #324E48,inset 0 -3px 0 #324E48}
.cmp-h>.tm .nm::after,.incl::before{background:#EFE7DA}
.badge{background:#324E48;color:#EFE7DA}
.cmp-h>.tm{color:#E4DCCA}
.cmp-h>.tm .hl-ink{--hl:239,231,218}
.hl-ink,.hl-tint,.hl-cell{--hl:50,78,72}
.cmp-h>.tm .hl-ink,.cband .hl-ink,.floor .hl-ink{--hl:239,231,218}
/* the benchmark card: the lab's bar in cream, the others in a muted sand */
.bench-bar i{background:rgba(228,220,202,.42)}
.bench-bar i.j{background:#EFE7DA}
.bench-stats>div{border-left-color:rgba(239,231,218,.7)}
/* the statement's underlines: dark sage, a little heavier */
.statement u{background-image:linear-gradient(#324E48,#324E48);background-size:100% .1em}
/* lab notes list: the arrow box goes sage on hover */
.note-list a:hover .arr{background:#324E48}
.note-list a:hover .arr path{stroke:#EFE7DA}
/* footer: the deep green of the email's footer */
footer{background:#121D1A;color:#E4DCCA}

/* ---------- R8 (1 Oct 2026), founder: A BIGGER TOP MENU BAR. A taller bar (84 -> 92px desktop, 64 -> 76px phones), the page
   names at 14.5px (still uppercase, tracked a little less so they stay one row), a bigger mark and wordmark, a bigger "Talk to
   the lab". It still switches to the menu button below 1120px (the six names + logo + button need about 1060px at 14.5px). */
:root{--navh:92px}
.brand{gap:14px}
.brand img.m{height:40px}
.brand img.w{height:19px}
.nav .links.mono{font-size:14.5px;letter-spacing:.06em}
.links{gap:clamp(20px,1.7vw,34px)}
.links a{padding:12px 0;white-space:nowrap}
.links a[aria-current="page"]{text-underline-offset:9px}
.nav .cta{padding:14px 22px;font-size:16px;min-height:50px}
.burger{width:50px;height:50px}
.burger svg{width:24px;height:24px}
@media (min-width:1120px) and (max-width:1279px){.nav{gap:18px}.links{gap:18px}.nav .links.mono{font-size:14px;letter-spacing:.05em}.brand img.w{height:17px}.brand img.m{height:36px}.nav .cta{padding:13px 18px;font-size:15px}}
@media (max-width:760px){
  :root{--navh:76px}
  .brand img.m{height:38px}
  .nav .cta{padding:12px 18px;font-size:15.5px;min-height:48px}
  .burger{width:48px;height:48px}
}
@media (max-width:359px){.nav .cta{padding:11px 13px;font-size:14.5px}.brand img.m{height:34px}}

/* ---------- R8 (1 Oct 2026), founder: NARROWER DIVIDERS. The cube band is about 37% shorter (230 -> 145px, phones 150 -> 95px);
   the fades are fractions of the height in drawDivider, so they scale with it, and the cubes keep their size. */
/* 1 Oct 2026: the dividers' cubes are the world's size now, so the band is taller, with room for a long soft fade */
.divider{height:clamp(230px,20vw,330px)}
@media (max-width:760px){.divider{height:170px}}
/* the bottom of each page's hero sinks into the cream over a longer, eased fade (was 80px, linear) */
.phero::after{height:170px;background:linear-gradient(rgba(239,231,218,0),rgba(239,231,218,.03) 15%,rgba(239,231,218,.12) 30%,rgba(239,231,218,.3) 45%,rgba(239,231,218,.55) 60%,rgba(239,231,218,.8) 76%,rgba(239,231,218,.95) 90%,#EFE7DA)}


/* ---------- R9 (1 Oct 2026), founder: CENTRED LOCATIONS. On About's "Where we are.", each location block (heading + lines) is
   centred horizontally in its own box, with equal top and bottom padding so it sits in the middle; the divider between the
   boxes and the rules above and below stay. Phones (stacked, <=900px) are centred the same way. */
.where-g>div{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px clamp(20px,3vw,44px)}
.where-g>div+div{padding-left:clamp(20px,3vw,44px)}
@media (max-width:900px){.where-g>div,.where-g>div+div{padding:26px 16px}}
.belief h2{text-wrap:balance}

/* 1 Oct 2026, founder: the product boxes read grey (a blue-black tint on cream). Now a warm beige tint and a warm border,
   so they sit in the cream/sand palette on either ground */
.pk{background:rgba(160,128,72,.1);border-color:rgba(98,80,52,.32)}

/* 1 Oct 2026: the footer logo is the full lockup (icon + wordmark) in beige, like the header's */
.foot .flogo{display:inline-flex;align-items:center;gap:16px;margin-bottom:24px;text-decoration:none}
.foot .flogo img.m{height:44px;display:block}
.foot .flogo img.w{height:22px;margin:0}

/* 1 Oct 2026, founder: the full stop at the end of the big titles (and the footer's "Where intelligence begins") is a small
   orange square. The "." stays in the text for screen readers and copy, drawn transparent inside the square. */
.p,.hero-title .p,.phero h1 .p,.cband h2 .p,.land-h .p,.foot .tl .p{display:inline-block;width:max(.15em,5px);height:max(.15em,5px);margin-left:.07em;
  background:#EE6A33;color:transparent!important;overflow:hidden;line-height:0;vertical-align:0}
/* 1 Oct 2026: the phone menu's links inherited the nav's dark ink on the dark panel (only the current page showed) */
.menu .mi{color:var(--fg)}
.menu .mi[aria-current="page"]{color:var(--acc)}

/* 1 Oct 2026: the landing's reference swarm, in the band between the nav and the headline (placed by p2b-ref.js) */
.land-swarm{position:absolute;left:0;width:100%;z-index:2;pointer-events:none;transition:opacity .4s ease;
  /* 1 Oct 2026, founder: the swarm must not look cut off in a box; its edges fade into the page */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%),linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%),linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);mask-composite:intersect}
.land.talking .land-swarm{opacity:0}
/* 1 Oct 2026, founder: before the chat opens the swarm writes "Where intelligence begins.", so the headline is hidden (still read
   by search engines and screen readers); once the chat opens and the swarm goes, it comes back exactly as before */
.land:not(.talking) .land-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0}

/* 2 Oct 2026, founder: the site is always shown as designed; browsers that force-darken pages (Samsung Internet, Chrome's auto dark) are told not to */
:root{color-scheme:only light}

/* 3 Oct 2026: green text release */

/* 7 Oct 2026: the decision APIs lab note. A wider value column for the benchmark card (median with the p95 under it),
   an untinted comparison table, the two-column "where we would start" table, and the state -> decision figure */
.bench.wide .bench-row{grid-template-columns:150px 1fr 108px}
.bench-v small{display:block;margin-top:2px;font-size:12px;opacity:.75}
.bench-bar.none{height:0;background:none;border-top:1px dashed rgba(var(--fgc),.45)}
.art-t.even td:nth-child(3),.art-t.even th:nth-child(3){background:none}
.art-t.pick{min-width:0}
.art-t.pick tbody th{font-weight:400;width:64%;white-space:normal}
.art-t.pick td{font-weight:600}
.flow{margin:1.6em 0 1.8em}
.flow-g{display:grid;grid-template-columns:1fr clamp(28px,5vw,64px) 1fr;align-items:stretch}
.flow-b{background:#324E48;color:#E4DCCA;padding:clamp(18px,2.4vw,26px);font-size:16px;line-height:1.4}
.flow-b.flow-o{background:none;color:#324E48;box-shadow:inset 0 0 0 2px #324E48}
.art-in .flow p{margin:0}
.flow-k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.art-in .flow .flow-t{margin:8px 0 10px;font-weight:600;font-size:clamp(21px,2.2vw,27px);line-height:1.12;letter-spacing:-.015em}
.flow-s{font-size:15px;opacity:.9}
.flow-a{align-self:center;height:2px;background:#324E48;position:relative}
.flow-a::after{content:"";position:absolute;right:0;top:50%;width:9px;height:9px;border-top:2px solid #324E48;border-right:2px solid #324E48;transform:translateY(-50%) rotate(45deg)}
.flow figcaption{margin-top:12px;font-size:14.5px;opacity:.85}
@media (max-width:760px){
  .bench.wide .bench-row{grid-template-columns:1fr 100px}
  .art-t.pick{width:100%}
  .art-t.pick th:first-child{position:static;max-width:none;min-width:0;box-shadow:none;width:60%}
  .flow-g{grid-template-columns:1fr;grid-template-rows:auto 34px auto}
  .flow-a{justify-self:center;width:2px;height:100%}
  .flow-a::after{right:auto;left:50%;top:auto;bottom:0;transform:translateX(-50%) rotate(135deg)}
}

/* 8 Oct 2026, phones: the breakdown's label list was ~465px tall, which left the broken-apart mark about 80px wide on an
   iPhone (Safari's toolbars leave ~660px) and nothing at all on a short phone. A tighter list, so the mark gets the room:
   slimmer closed labels, name and description on one flowing line, a smaller "Open page" row. */
@media (max-width:760px){
  .jland .pcards{gap:4px;bottom:calc(10px + var(--jpadb,0px))}
  .jland .pcard{padding-top:calc(9px + 4px*var(--a));padding-bottom:calc(9px + 4px*var(--a))}
  .jland .pc-sec{font-size:calc(15px + 2px*var(--a))}
  .jland .pc-in{padding-top:7px}
  .jland .pc-it{padding:5px 0 6px;font-size:15px;line-height:1.32}
  .jland .pc-it b{display:inline;font-size:15px;margin:0}
  .jland .pc-it b::after{content:": "}
  .jland .pc-it span{display:inline;font-size:15px}
  .jland .pc-it.t{padding:3px 0 4px}
  .jland .pc-one{padding:6px 0 7px;line-height:1.36}
  .jland .pc-open{margin-top:8px;padding:3px 3px 3px 11px}
  .jland .pc-arr{width:26px;height:26px}
}
/* 16 Oct 2026 (Babak): phones skip the journey (the mark breaking into the pages). Under the chat screen comes only the
   contact screen, as a plain section; the "scroll to explore" cue goes too. p5-boot.js doesn't start the journey's stage there */
@media (max-width:760px){
  .jland .track .stage,.jland .track .step:not(.fin),.jland .land-cue{display:none!important}
  /* the steps normally ride up one screen over the pinned stage; with the stage gone that pulled the contact screen up over
     the chat screen (seen in laptop phone views, 16 Oct 2026), so they sit in the normal flow here */
  .jland .track .steps{margin-top:0}
  .jland .track .step.fin{min-height:0;padding:64px var(--pad) 56px}
  .jland .track .fin-in{opacity:1!important}
}

/* 17 Oct 2026: the ElevenLabs partner note. .ptn = the partner banner (official ADROLAB mark + wordmark, a moving voice
   wave, the official ElevenLabs logo) on the footer's dark green; .takes = the four-version listening test, 4th picked */
.ptn{margin:0 0 2em;background:#121D1A;color:#E4DCCA;padding:clamp(26px,4.4vw,52px) clamp(22px,4vw,48px) clamp(18px,2.4vw,24px);box-shadow:8px 8px 0 #324E48}
.ptn-g{display:grid;grid-template-columns:auto minmax(60px,1fr) auto;align-items:center;gap:clamp(16px,3vw,36px)}
.ptn-a{display:flex;align-items:center;gap:14px}
.ptn-m{height:clamp(34px,4.2vw,48px);width:auto;display:block}
.ptn-w{height:clamp(16px,2vw,23px);width:auto;display:block}
.ptn-el{height:clamp(17px,2.1vw,24px);width:auto;display:block;color:#E4DCCA}
.ptn-wave{display:flex;align-items:center;justify-content:space-between;height:clamp(40px,5vw,60px);gap:3px}
.ptn-wave i{flex:1 1 0;max-width:5px;min-width:2px;height:100%;background:#B3C3BA;border-radius:2px;transform:scaleY(var(--h));transform-origin:center;animation:ptnw 1.3s ease-in-out var(--d) infinite alternate}
@keyframes ptnw{0%{transform:scaleY(calc(var(--h)*.35))}100%{transform:scaleY(var(--h))}}
.ptn figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:clamp(22px,3vw,34px);padding-top:14px;border-top:1px solid rgba(228,220,202,.25);font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
@media (prefers-reduced-motion:reduce){.ptn-wave i{animation:none}}
@media (max-width:640px){
  .ptn-g{grid-template-columns:1fr;justify-items:center;gap:20px}
  .ptn-wave{width:72%;height:44px}
}
.takes{margin:1.6em 0 1.8em;background:#324E48;color:#E4DCCA;padding:clamp(22px,3vw,36px);box-shadow:8px 8px 0 #121D1A;font-size:16px;line-height:1.4}
.takes p{margin:0}
.takes-k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.takes-t{margin-top:10px!important;font-weight:600;font-size:clamp(26px,3vw,36px);line-height:1.08;letter-spacing:-.02em}
.takes-l{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px}
.takes-l li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:14px;padding:12px 14px;border:1px solid rgba(228,220,202,.28)}
.takes-l b{display:block;font-weight:600;font-size:17px}
.takes-l li > span:nth-child(2){font-size:15px;opacity:.92}
.takes-n{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(228,220,202,.5);font-weight:600}
.takes-l li.pick{background:#E4DCCA;color:#121D1A;border-color:#E4DCCA}
.takes-l li.pick .takes-n{background:#121D1A;color:#E4DCCA;border-color:#121D1A}
.takes-l em{font-style:normal;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:5px 9px;background:#121D1A;color:#E4DCCA}
.takes figcaption{margin-top:20px;padding-top:14px;border-top:1px solid rgba(228,220,202,.25);font-size:14.5px;opacity:.85}
@media (max-width:520px){.takes-l li{grid-template-columns:30px 1fr;row-gap:8px}.takes-n{width:30px;height:30px}.takes-l em{grid-column:2;justify-self:start}}


/* 21 Oct 2026: the NVIDIA Inception note. .nvb = the member banner (our mark + wordmark, a line drawing across, NVIDIA's
   badge exactly as supplied and smaller than our logo, with clear space); .nvf = where NVIDIA fits in the lab, a pulse per link */
.nvb-line{height:2px;background:rgba(228,220,202,.18);position:relative;overflow:hidden}
.nvb-line i{position:absolute;inset:0;background:#E4DCCA;transform-origin:left;animation:nvl 1.6s cubic-bezier(.6,0,.2,1) .3s both}
@keyframes nvl{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.nvb-b{padding:8px}
.nvb-b img{height:clamp(50px,6vw,68px);width:auto;display:block}
.tm{margin-top:2.2em!important;font-size:13px;line-height:1.5;opacity:.7}
.nvf{margin:1.6em 0 1.8em;background:#121D1A;color:#E4DCCA;padding:clamp(22px,3vw,36px);box-shadow:8px 8px 0 #324E48;font-size:16px;line-height:1.35}
.nvf p{margin:0}
.nvf .bench-dot{color:#EE6A33}
.nvf-l{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.nvf-l li{display:grid;grid-template-columns:minmax(0,1fr) clamp(56px,10vw,120px) minmax(0,1fr);align-items:stretch}
.nvf-a,.nvf-b{padding:14px 16px;font-size:14.5px;opacity:.95}
.nvf-a{border:1px solid rgba(228,220,202,.35)}
.nvf-b{background:#E4DCCA;color:#121D1A}
.nvf-l b{display:block;font-weight:600;font-size:17px;margin-bottom:2px;letter-spacing:-.01em}
.nvf-k{position:relative;align-self:center;height:2px;background:rgba(228,220,202,.25);overflow:hidden}
.nvf-k i{position:absolute;top:-3px;left:0;width:8px;height:8px;background:#EE6A33;animation:nvp 2.4s cubic-bezier(.5,0,.5,1) calc(var(--i)*.5s) infinite}
@keyframes nvp{0%{transform:translateX(-10px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(clamp(56px,10vw,120px));opacity:0}}
@media (max-width:640px){
  .nvf-l{gap:22px}
  .nvf-l li{grid-template-columns:1fr}
  .nvf-k{width:2px;height:22px;justify-self:start;margin-left:22px}
  .nvf-k i{left:-3px;top:0;animation-name:nvpv}
  @keyframes nvpv{0%{transform:translateY(-10px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(24px);opacity:0}}
}
@media (prefers-reduced-motion:reduce){.nvb-line i,.nvf-k i{animation:none}}
@media (max-width:640px){
  .nvb-line{width:60%;margin:0 auto}
}

/* 21 Oct 2026: the Google for Startups Cloud Program note. .gcb-n = the programme's name in type (no Google logo until
   Google confirms members may use it); .gcf = a field of isometric cubes rising in a wave (no stack details) */
.gcb-n{margin:0;font-weight:600;font-size:clamp(18px,2.1vw,24px);line-height:1.1;letter-spacing:-.01em;text-align:right;color:#E4DCCA}
.gcb-n span{display:block;font-weight:400;font-size:.62em;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;opacity:.8}
.gcf{margin:1.6em 0 1.8em;background:#121D1A;color:#E4DCCA;padding:clamp(22px,3vw,36px) clamp(22px,3vw,36px) 0;box-shadow:8px 8px 0 #324E48;overflow:hidden}
.gcf p{margin:0}
.gcf .bench-dot{color:#EE6A33}
.gcf-c{display:block;width:100%;height:auto;margin-top:clamp(18px,3vw,30px)}
.gcf-c .cb{animation:gcr 4.6s ease-in-out var(--d) infinite}
.gcf-c .t{fill:#324E48}.gcf-c .l{fill:#1E312D}.gcf-c .r{fill:#284039}
.gcf-c path{stroke:#121D1A;stroke-width:1;stroke-linejoin:round}
.gcf-c .slot{animation:none}.gcf-c .slot path{fill:#0D1513}
.gcf-c .on{animation:gcu 4.6s ease-in-out infinite}
.gcf-c .on .t{fill:#EE6A33}.gcf-c .on .l{fill:#B84E22}.gcf-c .on .r{fill:#D45C2A}
@keyframes gcr{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes gcu{0%,100%{transform:translateY(-34px)}50%{transform:translateY(-52px)}}
@media (prefers-reduced-motion:reduce){.gcf-c .cb{animation:none}.gcf-c .on{transform:translateY(-40px)}}
@media (max-width:640px){
  .gcb-n{text-align:center}
}