/* Kayvo website. One light ground, one accent, room between things. The kit's palette exactly;
   only the footer is dark. Dale, 7 September: no dark mode, ever. */
:root {
  --bg:#f5f5f3; --card:#fff; --ink:#23272c; --soft:#4a5158; --muted:#646e7a;
  --line:#d6d9de; --line-soft:#e9eaec;
  --blue:#0042e4; --blue-hover:#0037bd; --blue-text:#0042e4; --tint:#e7f1ff;
  --dark:#14161c; --dark-ink:#e9ebef; --dark-soft:#c3c8d0; --dark-muted:#9199a5; --dark-line:#2f343e;
  --clip:9px 9px 9px 3px; --gutter:clamp(22px,5vw,80px); --max:1320px; --header:82px;
  --section:clamp(104px,13vw,176px); --head-gap:clamp(44px,5vw,72px);
  --display:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}


*,*::before,*::after{box-sizing:border-box}
/* THE GROUND HAS A GRAIN. Dale, 7 September: the dot field read as "scattered random AI dots" and fought the
   ring; plain white "doesn't slide". So the whole page sits on paper: one fixed layer of fractal noise, dark
   only, multiplied over everything at low strength. Texture, not a pattern; nothing to look at, something
   to feel. No gradients, no colour, no motion. */
body::after{content:'';position:fixed;inset:0;z-index:1000;pointer-events:none;opacity:.14;mix-blend-mode:multiply;background-repeat:repeat;background-size:220px 220px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .42 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html{scroll-padding-top:calc(var(--header) + 24px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--soft);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
h1,h2,h3{margin:0;font-family:var(--display);color:var(--ink);text-wrap:balance}
h1{font-size:clamp(38px,4.4vw,60px);line-height:1.05;letter-spacing:-.026em;font-weight:600}
h1 strong{font-weight:600;color:var(--blue)}
h2{font-size:clamp(30px,3.6vw,52px);line-height:1.06;letter-spacing:-.024em;font-weight:600}
h3{font-size:clamp(19px,1.6vw,22px);line-height:1.3;letter-spacing:-.012em;font-weight:600}
p{margin:0}
p + p{margin-top:1em}
a{color:inherit}
ol,ul{margin:0;padding:0;list-style:none}
figure{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}

.wrap{width:100%;max-width:var(--max);padding-inline:var(--gutter);margin-inline:auto}
.section{padding-block:var(--section)}
/* Riangle: one section per screen. Each major section fills the viewport and centres what it holds. */
@media(min-width:901px){.section{min-height:calc(100svh - var(--header));display:flex;flex-direction:column;justify-content:center;padding-block:clamp(56px,7vw,96px)}
  /* the speed argument follows the client rail directly; it is not its own screen */
  .speed{min-height:0;justify-content:flex-start;padding-top:clamp(72px,9vw,128px)}
  /* how, about and book flow into each other rather than each taking a screen */
  .how,.about,.book{min-height:0;padding-block:calc(var(--section) * .85)}}
.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.skip{position:fixed;left:20px;top:-100px;z-index:60;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:var(--clip)}
.skip:focus{top:16px}
.num{font:500 13px/1 var(--mono);color:var(--muted);letter-spacing:0;padding-top:.45em}

/* The one heading + one line every section opens with. The gap under it is the point. */
.section-head{max-width:62ch;margin-bottom:var(--head-gap)}
.section-head p{margin-top:18px;font-size:19px;max-width:52ch}

.text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);text-decoration:none;font-weight:500}
.text-link .icon{width:18px;height:18px;transition:transform .2s var(--ease)}
.text-link:hover{color:var(--blue-text)}
.text-link:hover .icon{transform:translateX(4px)}

.button{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:54px;padding:14px 20px;background:var(--blue);border:1px solid var(--blue);color:#fff;text-decoration:none;font-size:15px;font-weight:600;line-height:1.25;border-radius:var(--clip);transition:background .2s}
.button:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
.button .icon{transition:transform .25s var(--ease)}
.button:hover .icon{transform:translateX(3px)}
.button-small{min-height:44px;font-size:14px;padding:11px 16px}
.button-small .icon{width:17px;height:17px}
/* One blue on the first screen. The header action is outlined while the hero's own button is in view
   and takes the fill once the page has scrolled. */
.button-quiet{background:transparent;color:var(--ink);border-color:var(--line)}
.button-quiet:hover{background:var(--card);border-color:var(--ink);color:var(--ink)}
.site-header.is-scrolled .button-quiet{background:var(--blue);border-color:var(--blue);color:#fff}
.site-header.is-scrolled .button-quiet:hover{background:var(--blue-hover);border-color:var(--blue-hover)}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.header-inner{height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.brand-mark{width:31px;height:31px;margin-bottom:6px}
.brand-word{width:99px;height:34px;object-fit:contain}
.site-header nav{display:flex;align-items:center;gap:28px}
.site-header nav>a:not(.button){font-size:14px;font-weight:500;color:var(--soft);text-decoration:none;min-height:44px;display:flex;align-items:center}
.site-header nav>a:not(.button):hover{color:var(--ink)}
.header-cta-short{display:none}

/* ---- 1. hero ---- */
.hero{position:relative;overflow:hidden;min-height:calc(100svh - var(--header));display:flex;align-items:center;padding-block:clamp(40px,6vw,80px)}
.hero-grid{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:center}
.hero-copy{max-width:640px}
.hero-lede{margin-top:clamp(22px,2.4vw,32px);font-size:clamp(18px,1.5vw,22px);color:var(--soft);max-width:44ch}
.hero .button{margin-top:clamp(28px,3vw,44px)}
.hero-visual{position:relative;aspect-ratio:1;min-height:320px;max-height:640px}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-pause{position:absolute;right:0;bottom:0}

/* ---- 2. clients ---- */
.client-rail{padding-block:clamp(56px,7vw,96px);border-top:1px solid var(--line-soft)}
.rail-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:clamp(28px,3vw,40px)}
.rail-head h2{font:500 15px/1.4 var(--body);color:var(--soft);letter-spacing:0}
.filter-definitions{position:absolute;width:0;height:0;overflow:hidden}
.motion-control{display:none;background:none;border:0;padding:8px 0;min-height:44px;font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:4px;border-radius:var(--clip)}
.js .motion-control{display:inline-flex;align-items:center}
.motion-control:hover{color:var(--ink)}
.marquee-window{overflow:hidden}
.marquee{display:flex;width:max-content;animation:marquee 44s linear infinite}
.marquee-track{display:flex;flex:none;align-items:center}
.marquee-track li{width:clamp(170px,15vw,220px);height:76px;display:flex;align-items:center;justify-content:center;padding-inline:30px}
.client-logo{height:42px;width:138px;overflow:visible}
.logo-school{height:57px;width:78px}
.logo-napp{width:114px;height:54px}
.logo-enivo{width:120px;height:54px}
.logo-outdoor{width:142px;height:46px}
.logo-kiwibots{width:138px;height:42px;filter:grayscale(1)}
.logo-nzmca{width:145px;height:53px}
.logo-charger{width:150px;height:32px}
@keyframes marquee{to{transform:translateX(-50%)}}
.is-paused .marquee{animation-play-state:paused}
html:not(.js) .marquee-window{overflow-x:auto}
html:not(.js) .marquee{animation:none}
html:not(.js) .marquee-track[aria-hidden]{display:none}

/* ---- shared two-column argument layout (speed, brain) ---- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:center}
.split-copy p{margin-top:22px;font-size:19px;max-width:46ch}
.split-copy h2 + p{margin-top:24px}
.speed h2{font-size:clamp(30px,3.3vw,48px);max-width:17ch}

/* ---- 3. speed: the alphabet. A and B fill in ink first, the way testing used to work; then the other
   twenty-four fill in blue, one after another. Will, 8 September: A/B testing becomes A-to-Z testing. ---- */
.az{display:grid;gap:22px}
.az-grid{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:clamp(4px,.5vw,7px)}
.az-grid span{aspect-ratio:1;display:grid;place-items:center;font:500 clamp(11px,1vw,14px)/1 var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:4px;background:transparent;transition:background .55s var(--ease),color .55s var(--ease),border-color .55s var(--ease);transition-delay:calc(var(--i,0) * 45ms + 550ms)}
.az-grid span:nth-child(-n+2){transition-delay:150ms}
.js [data-az].in .az-grid span{background:var(--blue);border-color:var(--blue);color:#fff}
.js [data-az].in .az-grid span:nth-child(-n+2){background:var(--ink);border-color:var(--ink)}
.az figcaption{font-size:15px;line-height:1.5;color:var(--muted);max-width:52ch}
.az figcaption strong{color:var(--ink);font-weight:600}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:var(--section);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.facts strong{display:block;font-family:var(--display);font-weight:600;font-size:clamp(30px,3vw,44px);letter-spacing:-.02em;color:var(--ink);line-height:1.05;font-variant-numeric:tabular-nums}
.facts span{display:block;margin-top:8px;font-size:15px;color:var(--muted)}

/* ---- 4. capabilities: the Riangle rows, at Riangle's proportions. ----
   Dale, 7 September, with the two screenshots side by side: ours was "one long ugly list, no personality,
   no whitespace". Theirs: rows about 100px tall, the title big, the line short and in a narrow column,
   an arrow, and a hover state you can feel. So: four columns, a title at display size, one line of copy
   capped at two, a white wash with a blue rule on hover, and a window that follows the cursor. */
.cap-head{max-width:none;margin-bottom:clamp(36px,4vw,56px)}
.cap-head h2{font-size:clamp(28px,3vw,44px);white-space:nowrap}
/* Will, 8 September: the rows open again (native details, one at a time), the window that follows the cursor stays. */
.cap-list li{border-top:1px solid var(--line);position:relative}
.cap-list li:last-child{border-bottom:1px solid var(--line)}
.cap{position:relative;display:block}
.cap summary{list-style:none;display:grid;grid-template-columns:56px minmax(0,1fr) 32px;gap:0 32px;align-items:center;padding:clamp(20px,2vw,28px) 0;cursor:pointer;transition:background .25s var(--ease),padding .25s var(--ease)}
.cap summary::-webkit-details-marker{display:none}
.cap-list .num{padding-top:0;color:var(--blue-text);transition:color .25s}
.cap-list h3{font-size:clamp(22px,2.1vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.1;transition:transform .35s var(--ease),color .2s}
.plus{position:relative;width:28px;height:28px;color:var(--muted);justify-self:end;transition:color .2s}
.plus::before,.plus::after{content:'';position:absolute;width:14px;height:1.5px;left:7px;top:13px;background:currentColor}
.plus::after{transform:rotate(90deg);transition:transform .3s var(--ease)}
.cap[open] .plus{color:var(--blue-text)}
.cap[open] .plus::after{transform:rotate(0)}
/* one blue rule down the whole open row, body included; nothing else draws a vertical line */
.cap::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--blue);transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.cap[open]::after{transform:scaleY(1)}
.cap[open] summary{padding-left:24px}
.cap-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px clamp(32px,4vw,64px);align-items:start;padding:2px 0 clamp(26px,2.6vw,40px) 112px}
.cap-text{font-size:16px;line-height:1.55;color:var(--soft);max-width:56ch}
.cap-text .promise{font-weight:600;color:var(--ink);font-size:18px}
.cap-text p + p{margin-top:10px}
.cap-text .text-link{margin-top:14px;font-size:15px;color:var(--blue-text)}
.cap-points{display:grid;gap:9px;margin-top:16px}
.cap-points li{position:relative;padding-left:16px;font-size:15px;line-height:1.45;color:var(--soft)}
.cap-points li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pills li{font-size:13px;line-height:1.2;color:var(--ink);padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.cap-visual{position:relative;height:236px;border:1px solid var(--line);border-radius:var(--clip);overflow:hidden;background:var(--card)}
.cap-visual .cap-panel{height:100%}
.cap-panel{position:relative}
.cp-tag{position:absolute;top:12px;left:14px;font:500 10.5px/1 var(--mono);color:var(--muted);letter-spacing:0;z-index:1}
.cap-panel-photo .cp-tag{color:#fff;background:rgba(20,22,28,.55);padding:5px 7px;border-radius:4px}
.cap-panel-ui .cp-tag,.cap-panel-chat .cp-tag{position:static;margin-bottom:2px}
.cap-panel-ui{padding-top:14px}
/* the roadmap: a route with four stops, the first ninety days in blue */
.cap-panel-map{padding:0;background:var(--card)}
.roadmap{position:absolute;inset:0;width:100%;height:100%}
.rm-route{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:4 6;stroke-linecap:round}
.rm-first{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round}
.rm-now{fill:var(--blue)}
.rm-stop{fill:var(--card);stroke:var(--ink);stroke-width:2}
.rm-end{fill:var(--ink)}
.rm-l{font:500 11px var(--body);fill:var(--soft)}
.rm-blue{fill:var(--blue-text)}
@media(hover:hover){
  .cap summary:hover{background:var(--card);padding-left:24px;padding-right:8px}
  .cap summary:hover h3{color:var(--ink);transform:translateX(6px)}
  .cap summary:hover .plus{color:var(--blue-text)}
}
/* the window. 320 by 230, follows the cursor with a lag (the JS sets --fx/--fy), opens from nothing
   with a hard ease, and slides its stack to the row underneath. Mechanic from the 21st.dev "Services with
   Animated Hover Modal" (cnippet-dev), rebuilt in plain CSS and 40 lines of JS. */
.cap-follow{display:none}
@media(hover:hover) and (min-width:901px){
  .js .cap-follow{display:block;position:fixed;left:0;top:0;width:340px;height:236px;z-index:30;pointer-events:none;transform:translate3d(calc(var(--fx,0px) + 28px),calc(var(--fy,0px) - 250px),0);will-change:transform}
  /* it sits up and to the right of the pointer so the row under the hand stays readable */
}
.cap-shell{position:absolute;inset:0;border-radius:var(--clip);overflow:hidden;background:var(--card);border:1px solid var(--line);transform:scale(0);transform-origin:left bottom;transition:transform .4s cubic-bezier(.32,0,.67,0)}
.cap-follow.on .cap-shell{transform:scale(1);transition:transform .4s cubic-bezier(.76,0,.24,1)}
.cap-stack{position:absolute;inset:0;display:grid;grid-auto-rows:100%;transform:translateY(calc(var(--fi,0) * -100%));transition:transform .5s cubic-bezier(.76,0,.24,1)}
.cap-panel{height:100%;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:28px 30px;background:var(--card)}
.cap-panel-photo{padding:0}
.cap-panel-photo img{width:100%;height:100%;object-fit:cover}
.cap-panel-type .cp-l{font:500 clamp(18px,1.4vw,22px)/1.2 var(--display);color:var(--ink);letter-spacing:-.015em}
.cap-panel-rows .cp-l{padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.cap-panel-rows .cp-l:last-child{border-bottom:0;padding-bottom:0}
.cp-blue{color:var(--blue-text)!important}
.cap-panel-chat{gap:10px;justify-content:center}
.cp-a strong{font-weight:700}
.cp-q{align-self:flex-end;max-width:85%;padding:9px 13px;border:1px solid var(--line);border-radius:var(--clip);font-size:13.5px;color:var(--soft)}
.cp-a{align-self:flex-start;max-width:92%;padding:10px 14px;background:var(--tint);color:var(--ink);border-radius:9px 9px 9px 3px;font-size:13.5px;line-height:1.4}
/* the brain, small: the same picture the section below draws, still */
.cap-panel-brain{flex-direction:row;align-items:center;gap:22px;padding:22px 26px}
.mini-brain{width:150px;height:150px;flex:none}
.mini-brain .hex circle{fill:var(--ink)}
.mini-brain .src{fill:var(--soft)}
.mini-brain .core{fill:var(--blue)}
.cp-cap{font-size:14px;line-height:1.45;color:var(--soft)}
.cp-cap strong{color:var(--ink);font-weight:600}
/* mock screens: one card, three rows, a status each. Ink, one blue, nothing else. */
.cap-panel-ui{justify-content:flex-start;gap:11px;padding:18px 20px;min-width:0;overflow:hidden}
.ui-head{display:flex;justify-content:space-between;align-items:baseline;font:600 14px/1.2 var(--body);color:var(--ink);padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.ui-live{font:500 11px/1 var(--mono);color:var(--blue-text)}
.ui-rows{display:grid;gap:9px}
.ui-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;font-size:12.5px;color:var(--muted)}
.ui-rows li>span:first-child{color:var(--ink);font-weight:500}
.ui-rows li>span:nth-child(2){grid-column:1;grid-row:2}
.ui-rows li em{grid-column:2;grid-row:1 / span 2;font:500 10.5px/1 var(--mono);font-style:normal;padding:5px 7px;border:1px solid var(--line);border-radius:4px;color:var(--soft);white-space:nowrap}
.ui-rows li em.blue{color:#fff;background:var(--blue);border-color:var(--blue)}
.ui-rows li em.warn{color:var(--ink)}
.cp-app{font:500 11px/1 var(--mono);color:var(--muted)}
/* Volt 13: the inventory screen as it is, a table with one true number and its proof. */
.cap-panel-volt{justify-content:flex-start;gap:8px;padding:14px 16px;min-width:0;overflow:hidden}
.volt-top{display:flex;align-items:baseline;gap:12px;padding-bottom:7px;border-bottom:1px solid var(--line-soft)}
.volt-top strong{font-family:var(--display);font-size:13px;color:var(--ink);white-space:nowrap}
.volt-top nav{display:flex;gap:9px;font-size:10.5px;color:var(--muted);white-space:nowrap}
.volt-top nav .on{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--blue)}
.volt-table{width:100%;border-collapse:collapse;font-size:11px;color:var(--soft);table-layout:auto}
.volt-table th{text-align:left;font:500 9.5px/1 var(--mono);color:var(--muted);padding:0 6px 5px 0;letter-spacing:0;white-space:nowrap}
.volt-table td{padding:5px 6px 5px 0;border-top:1px solid var(--line-soft);white-space:nowrap}
.volt-table td:first-child{color:var(--ink);font-weight:500}
.volt-table .n{text-align:right;font-variant-numeric:tabular-nums;padding-right:10px}
.volt-table em{font:500 10px/1 var(--mono);font-style:normal;color:var(--muted)}
.volt-table em.blue{color:var(--blue-text)}
.volt-foot{font-size:11px;line-height:1.35;color:var(--muted)}

/* ---- 7. how: two columns, and the three steps as a line that draws itself and a blue runner that moves
   with the scroll (the JS sets --tp). Forty percent shorter than the rows it replaces. ---- */
.how-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(40px,6vw,96px);align-items:center}
.how-copy p{margin-top:18px;font-size:19px;max-width:38ch}
.how-copy .button{margin-top:28px}
.timeline{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding-top:44px;--tp:0}
.timeline::before{content:'';position:absolute;left:8px;right:8px;top:8px;height:1px;background:var(--line)}
.timeline::after{content:'';position:absolute;left:8px;top:8px;height:1px;width:calc(100% - 16px);background:var(--blue);transform:scaleX(var(--tp));transform-origin:left;transition:transform .1s linear}
.timeline li{position:relative;display:grid;gap:8px;align-content:start;font-size:15px;line-height:1.5;color:var(--soft)}
.timeline li::before{content:'';position:absolute;left:0;top:-44px;width:17px;height:17px;border-radius:50%;background:var(--bg);border:1px solid var(--line);transition:background .3s,border-color .3s}
.timeline li.lit::before{background:var(--blue);border-color:var(--blue)}
.timeline .tl-when{font:500 13px/1 var(--mono);color:var(--muted)}
.timeline strong{font-family:var(--display);font-size:clamp(19px,1.6vw,23px);font-weight:600;color:var(--ink);letter-spacing:-.012em}
.tl-runner{position:absolute;top:8px;left:calc(8px + var(--tp) * (100% - 16px));width:11px;height:11px;border-radius:50%;background:var(--blue);transform:translate(-50%,-50%)}

/* ---- 5. brain: convergence. Six sources on the mark's spokes send facts into the centre, where they pack into
   a hexagon of ink around one still dot. From the Brain Hero Concepts artifact, concept D. ---- */
.brain-lockup{display:flex;gap:7px;align-items:center;margin-bottom:26px}
.brain-lockup>img:first-child{width:28px;height:28px;margin-bottom:5px}
.brain-lockup>img:nth-child(2){width:87px;height:30px}
.brain-lockup>span{font-size:15px;font-weight:600;color:var(--blue-text);margin-left:5px}
.split-copy p strong{color:var(--ink);font-weight:600}
/* the systems a brain is built around: the marks themselves, in ink, small. Will, 8 September. */
.brain-tools-row{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.split-copy .brain-tools{margin-top:0;color:var(--muted);font-size:14px;max-width:none}
.tool-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:18px;filter:grayscale(1);opacity:.78}
.tool-row li{display:flex;align-items:center;min-height:32px}
.tool-row img{width:92px;max-height:28px;object-fit:contain}
.platform-logo{width:70px;height:22px}
.tool-row .platform-microsoft{width:132px;max-height:48px}
.tool-row .platform-google{width:150px;max-height:20px}
.tool-row .platform-plaud{width:84px;max-height:18px}
.platform-slack{display:flex;gap:6px;align-items:center;font-size:17px;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.tool-row .platform-slack img{width:22px;height:22px}
.more-word{font-size:14px;color:var(--muted)}
.brain-visual{display:grid;gap:22px}
.brain-stage{position:relative;aspect-ratio:1;width:100%;max-width:640px;justify-self:center}
.brain-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the connector: one line out of the brain, one plug, every model on the other side. Will, 8 September:
   "One connection. Any harness." A dot runs along each half of the line. */
.brain-foot{display:grid;gap:18px;justify-items:center}
.brain-connector{display:flex;align-items:center;gap:16px;width:100%;padding-inline:8px}
.connection-line{position:relative;flex:1;height:1px;background:var(--line);overflow:hidden}
.connection-line::after{content:'';position:absolute;top:-2px;left:-6px;width:5px;height:5px;border-radius:50%;background:var(--blue);animation:travel 2.6s linear infinite}
.connection-line + .connection-label + .connection-line::after{animation-direction:reverse}
@keyframes travel{to{transform:translateX(calc(100vw))}}
.connection-label{display:flex;align-items:center;gap:8px;font:600 15px/1 var(--display);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.connection-label .icon{width:19px;height:19px;color:var(--blue-text)}
.brain-mcp{font-size:14px;line-height:1.5;color:var(--muted);text-align:center;max-width:58ch}
.brain-mcp strong{color:var(--ink);font-weight:600}
.model-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;font-size:14px;color:var(--soft)}
.model-list li{display:inline-flex;align-items:center;gap:8px}
.model-list img{width:18px;height:18px;filter:brightness(0) saturate(0) opacity(.78)}
.model-icon{width:18px;height:18px;fill:none;stroke:var(--soft);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.model-more{color:var(--muted)}

/* ---- 6. proof ---- */
/* the case: one client at a time. The product on the left in our blue, the words and the numbers on the right.
   Riangle's studio block was the reference; ours is one accent and no glow. */
.case{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);background:var(--card);border:1px solid var(--line);border-radius:var(--clip);overflow:hidden}
/* the photograph as it is (Will, 8 September: no blue tint) */
.case-media{position:relative;min-height:440px;overflow:hidden;background:var(--line-soft)}
.case-media img{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover}
.case-body{padding:clamp(28px,3.4vw,52px);display:grid;align-content:center;gap:28px}
.case-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.case-top .client-logo{width:118px;height:38px;flex:none}
.case-meta{font-size:14px;color:var(--muted)}
.case blockquote{margin:0;display:grid;gap:14px}
.case blockquote p{font-family:var(--display);font-weight:500;font-size:clamp(20px,1.8vw,27px);line-height:1.28;letter-spacing:-.016em;color:var(--ink);text-wrap:balance}
.case blockquote footer{font-size:15px;color:var(--muted)}
.case blockquote footer strong{color:var(--soft);font-weight:600}
.case-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-top:26px;border-top:1px solid var(--line)}
.case-stats-six{gap:30px 20px;border-top:0;padding-top:0}
.case-stats-six li:nth-child(n+4){padding-top:26px;border-top:1px solid var(--line)}
.case-stats strong{display:block;font-family:var(--display);font-weight:600;font-size:clamp(34px,3.4vw,52px);letter-spacing:-.025em;line-height:1;color:var(--ink);font-variant-numeric:lining-nums}
.case-stats span{display:block;margin-top:8px;font-size:14px;color:var(--ink);font-weight:500}
.case-stats small{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
.case-tags{display:flex;flex-wrap:wrap;gap:8px}
.case-tags li{font-size:13px;color:var(--soft);padding:6px 10px;border:1px solid var(--line);border-radius:5px}
/* two more voices under the case. Reserved until the words are approved (dashed). */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.quote{display:grid;gap:20px;align-content:space-between;padding:clamp(22px,2.4vw,32px);background:var(--card);border:1px solid var(--line);border-radius:var(--clip)}
.quote.ph{border-style:dashed}
.quote blockquote{margin:0}
.quote blockquote p{font-family:var(--display);font-weight:500;font-size:clamp(17px,1.35vw,20px);line-height:1.38;letter-spacing:-.012em;color:var(--ink);text-wrap:pretty}
.quote blockquote em{display:block;margin-top:10px;font:400 13px/1.45 var(--body);color:var(--muted)}
.quote figcaption{display:flex;align-items:center;gap:16px;font-size:14px;color:var(--muted)}
.quote figcaption strong{color:var(--soft);font-weight:600}
.quote figcaption span{line-height:1.45}
.quote .client-logo{width:84px;height:32px;flex:none}
.quote .logo-school{width:36px;height:34px}
.proof-title{margin-bottom:var(--head-gap)}
.photo-row{display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:auto auto;gap:20px 24px}
.photo{display:flex;flex-direction:column}
.photo-wide{grid-row:1 / span 2}
.photo-frame{position:relative;overflow:hidden;border-radius:var(--clip)}
.photo-wide .photo-frame{flex:1;min-height:clamp(380px,36vw,520px)}
.photo img,.photo .ph-brief{width:100%;height:clamp(170px,15.5vw,224px);object-fit:cover;border-radius:var(--clip)}
.photo-wide img{height:100%;position:absolute;inset:0}
.photo-note{position:absolute;left:14px;right:14px;bottom:14px;margin:0;padding:12px 14px;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.4;border-radius:var(--clip);opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none}
.photo:hover .photo-note,.photo:focus-within .photo-note{opacity:1;transform:none}
.photo-wide img{object-position:52% 40%}
.photo figcaption{margin-top:14px;display:grid;gap:2px;font-size:14px;color:var(--muted)}
.photo figcaption strong{color:var(--soft);font-weight:600;font-size:15px}

/* Placeholders are visible on purpose (AGENTS.md rule 4). A dashed hairline says "reserved". */
.ph .ph-brief{display:grid;place-items:center;border:1px dashed var(--line);color:var(--muted);font-size:14px;background:var(--card)}

/* ---- 7. how ---- */
.steps li>div{grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr)}

/* ---- 8. about ---- */
.founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,72px)}
.founder{display:grid;grid-template-columns:104px minmax(0,1fr);gap:24px;align-items:start}
.founder img{width:104px;height:104px;border-radius:50%;object-fit:cover}
.founder .role{margin-top:4px;font-size:14px;color:var(--muted)}
.founder .role + p{margin-top:14px;font-size:16px}

/* ---- 9. book: Will's layout (8 September). The heading across the top, the calendar the full width beneath. ---- */
.book{border-top:1px solid var(--line-soft)}
.book-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:34px}
.book-head h2{max-width:22ch}
.book-head p{margin-top:18px;font-size:19px}
.calendar-help{font-size:13px;text-align:right;color:var(--muted);margin-bottom:12px}
.calendar-help a{color:var(--muted)}
.calendar-shell{background:var(--card);border:1px solid var(--line);border-radius:var(--clip);overflow:hidden}
.calendar-shell iframe{width:100%;height:800px;display:block;border:0}

/* ---- footer ---- */
.site-footer{background:var(--dark);color:var(--dark-muted);padding-block:clamp(48px,6vw,80px) 32px;font-size:14px}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--dark-line)}
.footer-title{max-width:34ch;color:var(--dark-soft)}
.footer-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding-block:40px}
.footer-cols div{display:grid;gap:10px;align-content:start}
.footer-cols strong{color:var(--dark-soft);font-weight:600}
.footer-cols a{text-decoration:none}
.footer-cols a:hover{color:var(--dark-ink)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:24px;border-top:1px solid var(--dark-line)}
.footer-bottom a{text-decoration:none}

/* ---- responsive ---- */
@media(max-width:900px){
  .hero{min-height:0}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-copy{max-width:none}
  .hero-visual{aspect-ratio:auto;height:300px;min-height:0}
  .split{grid-template-columns:1fr;gap:48px}
  .how-grid{grid-template-columns:1fr;gap:40px}
  .book-head{display:block}
  .book-head .text-link{margin-top:12px}
  .calendar-help{text-align:left}
  .calendar-shell iframe{height:820px}
  .tool-row{gap:16px 24px}
  .case{grid-template-columns:1fr}
  .case-media{min-height:240px}
  .case-stats{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr}
  .connection-label{font-size:13px}
  .cap-head h2{white-space:normal}
  .cap-head{grid-template-columns:1fr}
  .cap summary{grid-template-columns:44px minmax(0,1fr) 24px;gap:0 20px;padding-left:14px;transition:padding .3s var(--ease)}
  .cap-list li.focus summary{padding-left:22px}
  .plus{width:24px}
  .plus::before,.plus::after{left:5px}
  .cap-body{grid-template-columns:1fr;padding-left:14px;padding-right:14px;gap:22px}
  .cap-visual{height:220px;max-width:420px}
  .photo-row{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .photo-wide{grid-column:1 / -1;grid-row:1}
  .photo-wide .photo-frame{min-height:0;height:clamp(240px,42vw,380px);flex:none}
  .photo img,.photo .ph-brief{height:clamp(150px,22vw,200px)}
  .founders{grid-template-columns:1fr}
  .header-cta-long{display:none}.header-cta-short{display:inline}
  .site-header nav>a:not(.button){display:none}
}
@media(max-width:600px){
  h1{font-size:clamp(34px,10vw,44px)}
  .timeline{grid-template-columns:1fr;gap:22px;padding-top:0;padding-left:36px}
  .timeline::before,.timeline::after,.tl-runner{position:absolute;top:8px;left:calc(8px + var(--tp) * (100% - 16px));width:11px;height:11px;border-radius:50%;background:var(--blue);transform:translate(-50%,-50%)}
  .timeline li::before{left:-36px;top:4px}
  .photo-row{grid-template-columns:1fr}
  .photo img,.photo .ph-brief{height:200px}
  .facts{grid-template-columns:1fr;gap:28px}
  .founder{grid-template-columns:78px minmax(0,1fr)}
  .founder img{width:78px;height:78px}
  .footer-cols{grid-template-columns:1fr}
  .footer-bottom{flex-wrap:wrap}
  .az-grid span{font-size:10px;border-radius:3px}
  .book-head h2 br{display:none}
}

/* ---- motion: one vocabulary ----
   Dale, 7 September: "it's all static, feels very unalive... always something moving with the scroll."
   Riangle's answer, inspected: no motion library, just entrance reveals on almost every element, one
   bold hero object, counters, a progress line. So: one easing, one distance, one duration, one stagger,
   and the hairlines draw themselves in. Photographs drift on scroll; nothing else does. Reduced motion
   switches all of it off and shows everything in place. */
.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal].in{opacity:1;transform:none}
/* headings arrive a word at a time, each rising out of its own line box. A heading that carries its own
   [data-reveal] hands the whole entrance to the words; one inside a revealed block rides the block's fade.
   Cut from the 21st.dev "Vertical Cut Reveal" mechanic; built here in CSS. */
.js .words[data-reveal]{opacity:1;transform:none}
.js .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.js .w>span{display:inline-block;transform:translateY(112%);transition:transform .9s var(--ease);transition-delay:var(--wd,0ms)}
.js .in .w>span,.js .words.in .w>span{transform:none}
/* rows: the hairline draws left to right as the row arrives */
.js .cap-list li,.js .steps li{border-top-color:transparent;position:relative}
.js .cap-list li::before,.js .steps li::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease);transition-delay:var(--d,0ms)}
.js .cap-list li.in::before,.js .steps li.in::before{transform:scaleX(1)}
.js .steps li:last-child{border-bottom-color:transparent}
.js .steps li:last-child::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .2s}
.js .steps li:last-child.in::after{transform:scaleX(1)}
/* photographs drift a little against the scroll; the JS sets --py */
[data-parallax]{transform:translateY(var(--py,0px));will-change:transform}
.photo img{transform:translateY(var(--py,0px)) scale(1.08)}
/* the hero ring recedes as it leaves */
.hero-visual{transform:translateY(var(--hy,0px)) scale(var(--hs,1));transform-origin:center}
/* progress line: the one thing that is always moving with the scroll */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none}
.progress span{display:block;height:100%;width:100%;background:var(--blue);transform:scaleX(var(--p,0));transform-origin:left}
html:not(.js) .progress{display:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .w>span{transform:none}
  .cap-follow{display:none!important}
  .js .cap-list li,.js .steps li{border-top-color:var(--line)}
  .js .steps li:last-child{border-bottom-color:var(--line)}
  .js .cap-list li::before,.js .steps li::before,.js .steps li:last-child::after{display:none}
  .js [data-az] .az-grid span{background:var(--blue);border-color:var(--blue);color:#fff}
  .js [data-az] .az-grid span:nth-child(-n+2){background:var(--ink);border-color:var(--ink)}
  [data-parallax],.photo img,.hero-visual{transform:none!important}
  .progress{display:none}
  .travelling-fact{display:none}.js .motion-control{display:none}
  .marquee-window{overflow-x:auto}.marquee-track[aria-hidden]{display:none}
}