/* Black Knight AI home page, round 13 (13 Oct 2026). site-src/index.html, written by tools/make_home.py.
   The lit stage and the story on it. Materials carry meaning and are never used outside their role:
   lacquer is the stage, gold is ink (the lines of the organization and the path of the work),
   bone is people, jade is AI. Paper is where you read.
   Without script every word and both pictures are on the page; home.js adds the motion. */

:root{color-scheme:light;--floor:128px}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--s-lq);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--s-paper);color:var(--s-ink);font-family:var(--s-text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,figure,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3{font-family:var(--s-display);font-weight:500;font-optical-sizing:auto;text-wrap:balance}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--s-ink);outline-offset:4px}
.stage :focus-visible,.way-process :focus-visible,.method :focus-visible{outline-color:var(--s-gold)}
main:focus{outline:none}

/* ---------- The stage ---------- */
.stage{position:relative;background:var(--s-lq);color:var(--s-bone)}
.hero,.scene{position:relative;isolation:isolate;background:var(--s-lq)}
.hero{height:100vh;height:100svh;min-height:620px;overflow:hidden}
/* darkness at the edges, and grain: lacquer is never perfectly flat, and it keeps the dark gradients from banding */
.hero::before,.scene::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(130% 100% at 34% 42%,transparent 52%,rgba(0,0,0,.55) 100%)}
.hero::after,.scene::after,.method::after,html.pin .pin::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:var(--s-grain)}
.hero-in{position:relative;height:100%}
.hero-in::before{content:'';position:absolute;left:0;right:0;bottom:var(--floor);height:1px;z-index:1;background:linear-gradient(90deg,transparent 3%,rgba(239,233,220,.15) 30%,rgba(239,233,220,.15) 95%,transparent)}

/* The promise */
.hero-copy{position:absolute;left:var(--gut);bottom:calc(var(--floor) + 84px);width:calc(var(--u) * .65);z-index:3}
.hero h1{font-size:clamp(44px,min(var(--u) * .0787,12.4vh),118px);line-height:.96;letter-spacing:-.027em;color:var(--s-bone)}
.hero h1 span{display:block}
.hero h1 .h1-b{margin-top:.26em;font-style:italic;font-weight:400;font-size:.5em;line-height:1.08;letter-spacing:-.018em;color:var(--s-gold)}
.hero .lead{margin-top:30px;max-width:35.5em;font-size:19px;line-height:1.6;color:var(--s-soft);letter-spacing:-.006em;text-wrap:balance}
.acts{display:flex;align-items:center;gap:30px;margin-top:36px}
.acts .lnk{color:var(--s-bone);white-space:nowrap}

/* The object, and the room's answer to it: a pool of light, a contact shadow, a short reflection, the board.
   Nothing is applied to the horse itself. */
.set{position:absolute;right:calc(var(--gut) + var(--u) * .036);bottom:var(--floor);height:min(73vh,var(--u) * .53);aspect-ratio:684/1174;z-index:2;isolation:isolate}
.set::before{content:'';position:absolute;left:50%;top:44%;width:96vw;height:124vh;margin:-62vh 0 0 -48vw;z-index:-2;pointer-events:none;
  background:radial-gradient(22% 25% at 50% 52%,rgba(214,219,222,.13),transparent 100%),radial-gradient(46% 49% at 50% 51%,rgba(201,208,211,.15),rgba(201,208,211,.05) 50%,transparent 78%),radial-gradient(29% 25% at 54% 25%,rgba(211,173,104,.085),transparent 72%)}
.set::after{content:'';position:absolute;left:50%;top:100%;width:64vw;height:var(--floor);margin-left:-32vw;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(239,233,220,.3) 50%,transparent) 0 0/100% 1px no-repeat,radial-gradient(48% 92% at 50% 0%,rgba(239,233,220,.13),transparent 72%)}
.knight{position:absolute;inset:0}
.knight picture{display:block;height:100%}
.knight-obj{position:relative;z-index:2;width:100%;height:100%;filter:drop-shadow(0 26px 30px rgba(0,0,0,.5))}
.knight::after{content:'';position:absolute;left:-2%;right:-2%;bottom:-13px;height:26px;border-radius:50%;z-index:1;background:radial-gradient(ellipse at center,rgba(0,0,0,.9),rgba(0,0,0,0) 68%)}
.knight .refl{position:absolute;left:0;top:100%;width:100%;height:100%;z-index:0;transform:scaleY(-1);opacity:.5;filter:blur(.8px) brightness(.72) saturate(.9);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.25) 9%,transparent 19%);mask-image:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.25) 9%,transparent 19%)}
/* The board: under the Knight it lies in perspective as the floor, seen from just above the horizon. When the stage is
   pinned, next.js tilts this same plane up to plan view and lays it under the drawing. */
.board-view{position:absolute;left:50%;top:100%;width:0;height:0;z-index:-1;pointer-events:none;perspective:var(--bp,520px);perspective-origin:0 -52px}
.board{position:absolute;left:calc(var(--bw,880px) / -2);top:0;width:var(--bw,880px);height:var(--bh,720px);
  transform-origin:50% 0;transform:rotateX(var(--br,74deg));opacity:var(--bo,1);
  background:repeating-conic-gradient(rgba(239,233,220,.07) 0 25%,transparent 0 50%) var(--bx,37px) 0/var(--bc,148px) var(--bc,148px);
  -webkit-mask-image:radial-gradient(62% 62% at 50% 52%,#000,rgba(0,0,0,.7) 55%,transparent);mask-image:radial-gradient(62% 62% at 50% 52%,#000,rgba(0,0,0,.7) 55%,transparent)}

.fact{position:absolute;left:var(--gut);right:var(--gut);bottom:0;height:var(--floor);z-index:3;display:flex;align-items:center;flex-wrap:wrap;align-content:center;gap:6px 30px;font-size:13.5px;color:var(--s-muted)}
.fact b{font-weight:500}
.fact span{font-family:var(--s-display);font-size:19px;letter-spacing:-.008em;color:var(--s-soft);white-space:nowrap}
.fact small{font-family:var(--s-text);font-size:12.5px;color:var(--s-muted);margin-left:5px;letter-spacing:0}

/* ---------- The organization, redrawn ---------- */
.scene{padding:calc(var(--bar) + 16px) 0 72px;overflow:hidden}
.scene::before{background:radial-gradient(34vw 46vh at 68% 54%,rgba(201,208,211,.085),transparent 100%),radial-gradient(30vw 30vh at 8% 8%,rgba(211,173,104,.07),transparent 72%),radial-gradient(130% 100% at 50% 46%,transparent 50%,rgba(0,0,0,.5) 100%)}
.scene-in{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);grid-template-rows:1fr auto;grid-template-areas:"say drawing" "rail drawing";align-content:center;min-height:min(84vh,820px)}
.say{grid-area:say;align-self:start;padding-top:min(6vh,54px);min-width:0}
.beat h3{font-size:clamp(32px,min(4vw,7vh),58px);line-height:1.02;letter-spacing:-.026em;color:var(--s-bone)}
.beat p{margin-top:22px;max-width:23em;font-size:18.5px;line-height:1.6;color:var(--s-soft);letter-spacing:-.005em}
.beat+.beat{margin-top:34px}
html.js .beats{display:grid}
html.js .beat{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .5s var(--s-ease-out),transform .5s var(--s-ease-out),visibility 0s .5s}
html.js .beat.is-on{opacity:1;visibility:visible;transform:none;transition-delay:.12s,.12s,0s}

/* One request, followed line by line. Shown only when the film is running it. */
.log{display:none}
html.js .log{display:grid;margin-top:40px;max-width:23em}
.log-set{grid-area:1/1;opacity:0;transition:opacity .45s}
.log-set.is-on{opacity:1}
.log b{display:block;font-size:14px;font-weight:550;color:var(--s-muted)}
.log ol{position:relative;margin-top:14px}
.log li{position:relative;display:flex;align-items:center;gap:14px;padding:5.5px 0;font-size:15.5px;line-height:1.4;color:var(--s-muted);opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s var(--s-ease-out),color .3s}
.log li.is-in{opacity:1;transform:none}
.log li+li::before{content:'';position:absolute;left:5.5px;top:calc(-50% + 7px);height:calc(100% - 14px);width:1px;background:var(--s-hair-2)}
.log li i{position:relative;flex:none;width:12px;height:12px;border-radius:50%;background:var(--s-lq);box-shadow:inset 0 0 0 1.5px rgba(239,233,220,.36)}
.log li.is-now{color:var(--s-bone);font-weight:600}
.log-a li.is-now i{box-shadow:inset 0 0 0 1.6px rgba(239,233,220,.22)}
.log-a li.is-now i::after{content:'';position:absolute;inset:0;border-radius:50%;border:1.6px solid transparent;border-top-color:var(--s-gold);border-right-color:var(--s-gold)}
.log-b li.is-in i{background:var(--s-gold) var(--s-tick) center/11px no-repeat;box-shadow:none}
.log-b li.is-now i{box-shadow:0 0 0 4px rgba(211,173,104,.18)}

.drawing{grid-area:drawing;justify-self:end;align-self:center;min-width:0}
.plan{width:auto;height:min(76vh,calc((var(--u) - 430px) * .818));aspect-ratio:880/720;overflow:visible}
.plan text{font-family:var(--s-text)}
.pl-sq rect{fill:rgba(239,233,220,.034)}
.pl-row{font-size:13.5px;font-weight:550;fill:#7d888e;letter-spacing:.01em}
.pl-role{font-size:14.5px;font-weight:600;fill:var(--s-soft);letter-spacing:-.003em}
.pl-sys{font-size:14px;font-weight:600;fill:#aab4b9}
/* People are bone: dim while they carry the handoffs, lit when they lead. Natural state: lit. */
.pl-disc{fill:#1c2328;stroke:var(--s-gold);stroke-width:1.5}
.pl-g{fill:var(--s-bone)}
.pl-halo{fill:url(#pl-halo)}
.pl-sh{fill:url(#pl-shadow)}
.pl-bar{fill:rgba(239,233,220,.58)}
.pl-badge{opacity:0}
.pl-p[data-i="3"] .pl-badge{opacity:1}
.pl-badge circle{fill:var(--s-gold)}
.pl-badge path{fill:none;stroke:#0b1014;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
/* Gold is ink */
.pl-org{fill:none;stroke:rgba(211,173,104,.7);stroke-width:1.2}
.pl-tangle{fill:none;stroke:rgba(158,168,174,.36);stroke-width:1.15}
.pl-scan{fill:url(#pl-scang)}
.pl-rank circle{fill:var(--s-gold)}
.pl-rank text{font-size:12px;font-weight:800;fill:#0b1014}
.pl-own{fill:none;stroke:rgba(211,173,104,.75);stroke-width:1.4;stroke-dasharray:1.5 5.5;stroke-linecap:round}
.pl-flow{fill:none;stroke:var(--s-gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pl-head{stroke-width:1.9}
.pl-trail circle{fill:var(--s-gold)}
.pl-env rect{fill:var(--s-gold)}
.pl-env path{fill:none;stroke:#0b1014;stroke-width:1.6;stroke-linejoin:round}
.pl-mp{fill:none;stroke:none}
/* Jade is AI */
.pl-abus,.pl-aline{fill:none;stroke:#3d9b8b;stroke-width:1.5}
.pl-tile-a{fill:url(#pl-jade);stroke:rgba(239,233,220,.2);stroke-width:1}
.pl-jglow{fill:url(#pl-jglow)}
.pl-star{fill:var(--s-bone)}
.pl-tile{fill:#10181e;stroke:rgba(239,233,220,.24);stroke-width:1.2}
.pl-ic{fill:none;stroke:#d5dadc;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.pl-chip rect{fill:#131b21;stroke:rgba(239,233,220,.2);stroke-width:1}
.pl-chip text{font-size:12.8px;font-weight:600;fill:var(--s-bone)}
.pl-spin-t{fill:none;stroke:rgba(239,233,220,.25);stroke-width:1.6}
.pl-spin{fill:none;stroke:var(--s-gold);stroke-width:1.6;stroke-linecap:round;transform-box:fill-box;transform-origin:0% 100%}
.pl-ok{fill:var(--s-gold)}
.pl-okc{fill:none;stroke:#0b1014;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pl-agent,.pl-jglow,.pl-badge,.pl-bar{transform-box:fill-box;transform-origin:center}
/* Natural state (no script): the finished picture. Today's parts are out of it. */
#pl-tangle,#pl-scan,#pl-ranks,#pl-stacks,#pl-trail,#pl-env,#pl-chip-lead,#pl-chip-fin{opacity:0}
html.motion .pl-spin,html.motion .log-a li.is-now i::after{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Where you are in the four steps. A real sequence, so it is shown as one. */
.rail{grid-area:rail;align-self:end;display:none;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:10px;align-items:start;margin-top:36px}
html.js .rail{display:grid}
.rail-step{position:relative;min-height:44px;padding:14px 0 6px;background:none;border:0;text-align:left;font-size:14px;font-weight:550;white-space:nowrap;color:var(--s-dim);transition:color .25s}
.rail-step i{position:absolute;left:0;right:0;top:0;height:2px;background:var(--s-hair-2);overflow:hidden}
.rail-step i::after{content:'';position:absolute;inset:0;background:var(--s-gold);transform-origin:0 50%;transform:scaleX(var(--f,0))}
.rail-step:hover{color:var(--s-soft)}
.rail-step[aria-current=step]{color:var(--s-bone)}
.rail-step.is-done{color:var(--s-muted)}
.rail-play{display:inline-flex;align-items:center;gap:8px;min-width:92px;min-height:44px;margin:0 0 0 8px;padding:8px 0 0 12px;background:none;border:0;font-size:13.5px;font-weight:600;color:var(--s-muted);transition:color .2s}
.rail-play:hover{color:var(--s-bone)}
.rp-ico{position:relative;width:12px;height:12px;flex:none}
.rp-ico::before,.rp-ico::after{content:'';position:absolute;top:1px;bottom:1px;width:3.5px;background:currentColor}
.rp-ico::before{left:1.5px}.rp-ico::after{right:1.5px}
.rail-play[data-state=play] .rp-ico::before{left:2px;top:0;bottom:0;width:0;height:0;background:none;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.rail-play[data-state=play] .rp-ico::after{display:none}
.rail-play[data-state=replay] .rp-ico::before{left:0;top:0;width:12px;height:12px;background:none;border:1.6px solid currentColor;border-left-color:transparent;border-radius:50%}
.rail-play[data-state=replay] .rp-ico::after{left:-1px;top:-1.5px;right:auto;bottom:auto;width:0;height:0;background:none;border-right:5px solid currentColor;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;transform:rotate(-38deg)}

/* Pinned (set by next.js on wide screens with motion on): the hero and the scene share one viewport.
   Scroll moves the camera from the Knight to the board; the story then plays on time. */
html.pin .stage{height:calc(100vh + var(--run,120vh))}
html.pin .pin{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--s-lq)}
html.pin .hero,html.pin .scene{position:absolute;inset:0;height:auto;min-height:0;padding:0;overflow:visible;background:none;isolation:auto}
html.pin .hero::after,html.pin .scene::after{display:none}
html.pin .hero{z-index:2}
html.pin .scene{z-index:1}
html.pin .hero::before{opacity:calc(1 - var(--bd,0))}
html.pin .scene::before{opacity:var(--bd,0)}
html.pin .hero-copy{opacity:calc(1 - var(--hc,0));transform:translate3d(0,calc(var(--hc,0) * -46px),0)}
html.pin .fact,html.pin .hero-in::before{opacity:calc(1 - var(--hc,0) * 1.5)}
html.pin .knight{opacity:calc(1 - var(--kn,0));transform:translate3d(0,calc(var(--kn,0) * -5vh),0)}
html.pin .set::before{opacity:calc(1 - var(--bd,0))}
html.pin .set::after{opacity:calc(1 - var(--hc,0) * 1.5)}
html.pin .hero.is-gone .hero-copy,html.pin .hero.is-gone .fact{visibility:hidden}
html.pin .hero.is-gone{pointer-events:none}
html.pin .scene-in{height:100%;min-height:0;padding-top:var(--bar);padding-bottom:clamp(28px,5.4vh,54px)}
html.pin .say,html.pin .rail{opacity:var(--sc,0);transform:translate3d(0,calc((1 - var(--sc,0)) * 26px),0)}
html.pin .plan{opacity:var(--sc,0)}
html.pin .pl-sq{display:none}
html.pin .scene:not(.is-live){pointer-events:none}
html.pin .board,html.pin .board-view{will-change:transform}

/* ---------- Two ways to get there: the seam where the stage hands over to the paper ---------- */
.ways{position:relative;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.seam-head{position:absolute;left:0;right:0;top:clamp(64px,10vh,104px);z-index:3;display:grid;grid-template-columns:1fr 1fr;font-size:clamp(40px,5.8vw,86px);line-height:1.1;letter-spacing:-.028em;white-space:nowrap;pointer-events:none}
.seam-head .on-l{color:var(--s-bone);text-align:right;padding-right:.115em}
.seam-head .on-r{color:var(--s-ink);text-align:left;padding-left:.115em}
.way{position:relative;isolation:isolate;padding:clamp(196px,calc(10vh + 9vw),262px) 0 clamp(64px,8vw,104px);display:flex}
.way-process{background:var(--s-lq);color:var(--s-bone);justify-content:flex-end}
.way-process::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 30% 18%,rgba(211,173,104,.09),transparent 70%),radial-gradient(70% 60% at 60% 80%,rgba(74,169,152,.07),transparent 70%)}
.way-process::after{content:'';position:absolute;inset:0;z-index:-1;background:repeating-conic-gradient(rgba(239,233,220,.02) 0 25%,transparent 0 50%) 0 0/120px 120px;-webkit-mask-image:radial-gradient(70% 60% at 100% 100%,#000,transparent 80%);mask-image:radial-gradient(70% 60% at 100% 100%,#000,transparent 80%)}
.way-leaders{background:var(--s-paper);color:var(--s-ink)}
.way-in{display:flex;flex-direction:column;align-items:flex-start;width:min(100%,calc(var(--wrap) / 2))}
.way-process .way-in{padding:0 clamp(28px,5vw,74px) 0 var(--gut)}
.way-leaders .way-in{padding:0 var(--gut) 0 clamp(28px,6.2vw,92px)}
.way-say{font-family:var(--s-display);font-style:italic;font-size:clamp(19px,1.65vw,24px);line-height:1.3;letter-spacing:-.01em}
.way-process .way-say{color:var(--s-soft)}
.way-leaders .way-say{color:var(--s-ink-2)}
.mini{width:min(272px,70%);height:auto;margin:34px 0 28px;overflow:visible}
.mini .disc{stroke-width:1.3}
.mini .own{fill:none;stroke-width:1.3;stroke-dasharray:1.2 4.2;stroke-linecap:round}
.mini .star{fill:var(--s-bone)}
.mini-process .p .disc{fill:#1c2328;stroke:var(--s-gold)}
.mini-process .p .g{fill:var(--s-bone)}
.mini-process .own{stroke:rgba(211,173,104,.8)}
.mini-process .tile{fill:#10181e;stroke:rgba(239,233,220,.3);stroke-width:1.1}
.mini-process .bus,.mini-process .aline{fill:none;stroke:#3d9b8b;stroke-width:1.4}
.mini-process .flow{fill:none;stroke:var(--s-gold);stroke-width:1.8;stroke-linecap:round}
.mini-process .agent{fill:#46ad9b}
.mini-process .dot{fill:var(--s-bone);opacity:0}
.mini-leaders .p .disc{fill:var(--s-ink);stroke:var(--s-gold-deep)}
.mini-leaders .p .g{fill:var(--s-bone)}
.mini-leaders .own{stroke:var(--s-gold-deep)}
.mini-leaders .agent{fill:var(--s-jade-deep)}
.mini-leaders .work{fill:none;stroke:rgba(20,35,46,.34);stroke-width:1.6;stroke-linecap:round}
.mini-leaders .p.next .disc{fill:none;stroke:rgba(20,35,46,.3);stroke-dasharray:2.5 3.5;transition:fill .5s,stroke .5s}
.mini-leaders .p.next .g{fill:rgba(20,35,46,.2);transition:fill .5s}
.mini-leaders .agent.next{fill:none;stroke:rgba(20,35,46,.3);stroke-width:1.3;stroke-dasharray:2.5 3.5;transition:fill .5s .15s,stroke .5s .15s}
.mini-leaders .next-one .star{opacity:0;transition:opacity .4s .2s}
.mini-leaders .own.next{stroke:rgba(20,35,46,.3);transition:stroke .5s}
/* The pictures answer when you point at their side: the work runs along the agents; the next person is set up. */
@media(hover:hover){
  html.motion .way-process:hover .dot{opacity:1;animation:run 1.6s var(--s-ease-io) both}
  .way-leaders:hover .p.next .disc{fill:var(--s-ink);stroke:var(--s-gold-deep);stroke-dasharray:none}
  .way-leaders:hover .p.next .g{fill:var(--s-bone)}
  .way-leaders:hover .agent.next{fill:var(--s-jade-deep);stroke:var(--s-jade-deep);stroke-dasharray:none}
  .way-leaders:hover .next-one .star{opacity:1}
  .way-leaders:hover .own.next{stroke:var(--s-gold-deep)}
}
@keyframes run{0%{transform:translateX(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(240px);opacity:0}}
.way-k{display:flex;align-items:baseline;gap:12px;font-size:14.5px;line-height:1.4}
.way-k b{font-weight:700}
.way-k span{position:relative;padding-left:13px;font-weight:500}
.way-k span::before{content:'';position:absolute;left:0;top:.2em;bottom:.2em;width:1px;background:currentColor;opacity:.4}
.way-process .way-k{color:var(--s-gold)}
.way-leaders .way-k{color:var(--s-gold-ink)}
.way h3{margin-top:12px;font-size:clamp(30px,3.6vw,52px);line-height:1.03;letter-spacing:-.027em}
.way-body{margin-top:22px;max-width:30em;font-size:17.5px;line-height:1.62}
.way-process .way-body{color:var(--s-soft)}
.way-leaders .way-body{color:var(--s-ink-2)}
.way-points{margin-top:18px;width:100%;max-width:33em}
.way-points li{position:relative;padding:11px 0 11px 22px;font-size:15px;line-height:1.45;font-weight:500}
.way-points li::before{content:'';position:absolute;left:1px;top:1.22em;width:7px;height:7px;border-radius:50%}
.way-process .way-points li{box-shadow:inset 0 1px 0 var(--s-hair)}
.way-process .way-points li::before{background:var(--s-jade)}
.way-leaders .way-points li{box-shadow:inset 0 1px 0 var(--s-rule)}
.way-leaders .way-points li::before{background:var(--s-gold-deep)}
.way .lnk{margin-top:18px}
.way-foot{margin-top:auto;width:100%;max-width:33em;min-height:calc(60px + 3.1em);font-size:14.5px;line-height:1.55}
.way-foot::before{content:'';display:block;height:1px;margin:44px 0 15px}
.way-process .way-foot{color:var(--s-muted)}
.way-process .way-foot::before{background:var(--s-hair-2)}
.way-leaders .way-foot{color:var(--s-ink-3)}
.way-leaders .way-foot::before{background:var(--s-rule-2)}

/* ---------- Industry workflows: the Transformation showcase, set on the paper (round 16, 14 Oct 2026) ----------
   Six illustrative workflows from data/workflows.json, four in full and two in brief. Each card reads top to bottom:
   the industry, the outcome, the event that starts it, four stages on one rule (jade dots where AI does the step,
   a gold dot where a person decides), what it draws on, who approves, what you would measure, the link to /workflows. */
.flows{padding:clamp(88px,11vw,152px) 0 clamp(80px,9vw,128px)}
.people-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px clamp(32px,6vw,96px);align-items:end}
.people-head h2{white-space:nowrap}
.people-head h2,.answers-head h2,.method h2,.flows-head h2{font-size:clamp(38px,5.4vw,80px);line-height:1;letter-spacing:-.028em}
.people-head p{justify-self:end;max-width:31em;font-size:18.5px;line-height:1.6;color:var(--s-ink-2);padding-bottom:.5em}
/* the showcase head stands alone: the heading at the home page's full size, the intro under it */
.flows-head>p{margin-top:26px;max-width:34em;font-size:18.5px;line-height:1.6;color:var(--s-ink-2)}
.flows-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:20px;font-size:14.5px;line-height:1.4;color:var(--s-gold-ink)}
.flows-k b{font-weight:700}
.flows-k span{position:relative;padding-left:13px;font-weight:500}
.flows-k span::before{content:'';position:absolute;left:0;top:.2em;bottom:.2em;width:1px;background:currentColor;opacity:.4}
.flows-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:52px clamp(32px,4.4vw,72px);margin-top:clamp(40px,5vw,68px)}
.flow{display:flex;flex-direction:column;align-items:flex-start;padding-top:20px;box-shadow:inset 0 2px 0 var(--s-ink)}
.flow-ind{font-size:13.5px;font-weight:700;line-height:1.4;color:var(--s-gold-ink)}
.flow h3{margin-top:8px;max-width:15em;font-size:clamp(26px,2.3vw,33px);line-height:1.1;letter-spacing:-.022em}
.flow-when{margin-top:10px;font-family:var(--s-display);font-style:italic;font-size:17.5px;line-height:1.45;color:var(--s-ink-2)}
.flow-rail{width:100%;margin-top:26px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.flow-rail li{position:relative;padding:15px 12px 0 0;font-size:14px;font-weight:600;line-height:1.3;color:var(--s-ink);box-shadow:inset 0 1.5px 0 var(--s-rule-2)}
.flow-rail li::before{content:'';position:absolute;z-index:1;left:0;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--s-jade-deep);box-shadow:0 0 0 3px var(--s-paper)}
.flow-rail li:last-child{color:var(--s-gold-ink)}
.flow-rail li:last-child::before{background:var(--s-gold-deep)}
.flow-draws{margin-top:22px;font-size:13.5px;font-weight:700;line-height:1.4;color:var(--s-ink-3)}
.flow-chips{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.flow-chips li{padding:5px 9px;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--s-ink-2);box-shadow:inset 0 0 0 1px var(--s-rule-2)}
.flow-check{margin-top:20px;padding:2px 0 2px 14px;border-left:2px solid var(--s-gold-deep);font-size:14.5px;line-height:1.5;color:var(--s-ink)}
.flow-measure{margin-top:14px;font-size:14px;line-height:1.5;color:var(--s-ink-3)}
.flow-measure b{color:var(--s-ink-2);font-weight:650}
.flow .lnk{margin-top:20px}
/* the two in brief */
.flows-grid.brief{margin-top:52px;gap:40px clamp(32px,4.4vw,72px)}
.flow-sum{margin-top:12px;max-width:34em;font-size:15.5px;line-height:1.6;color:var(--s-ink-2)}
.flows-note{margin-top:clamp(36px,4vw,52px);max-width:60em;font-size:14px;line-height:1.55;color:var(--s-ink-3)}
.flows-note b{font-weight:700;color:var(--s-gold-ink)}
.flows-acts{display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px;margin-top:28px}

/* ---------- How we work: four squares of the board, seen from the front. The Knight stands on the step you point at. ---------- */
.method{position:relative;isolation:isolate;background:var(--s-lq);color:var(--s-bone);padding:clamp(88px,11vw,152px) 0 clamp(80px,9vw,128px);overflow:hidden}
.method::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(36% 30% at 10% 4%,rgba(211,173,104,.07),transparent 72%),radial-gradient(130% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.45) 100%)}
.method-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px clamp(32px,6vw,96px);align-items:end}
.method-head h2{white-space:nowrap}
.method-lead{justify-self:end;max-width:27em;font-size:18.5px;line-height:1.6;color:var(--s-soft);padding-bottom:.5em}
.method-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 48px;margin-top:clamp(40px,4.6vw,66px);padding-top:22px;box-shadow:inset 0 1px 0 var(--s-hair)}
.method-note{max-width:46em;font-size:14.5px;line-height:1.6;color:var(--s-muted)}
.method .lnk{color:var(--s-bone)}

/* ---------- Leadership ---------- */
.people{padding:clamp(88px,11vw,152px) 0 clamp(72px,8vw,112px)}
.leaders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px clamp(20px,2.6vw,40px);margin-top:clamp(44px,5.5vw,76px)}
.leader figure{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--s-paper-2)}
.leader img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);mix-blend-mode:multiply}
.leader h3{margin-top:22px;font-size:clamp(26px,2.4vw,34px);line-height:1.1;letter-spacing:-.022em}
.leader .role{margin-top:6px;font-size:14.5px;font-weight:650;color:var(--s-gold-ink)}
.leader .bio{margin-top:12px;max-width:27em;font-size:15.5px;line-height:1.6;color:var(--s-ink-2)}
.people .lnk{margin-top:40px}

/* ---------- Answers ---------- */
.answers{padding:0 0 clamp(88px,11vw,152px)}
.answers-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px clamp(32px,6vw,96px);align-items:start;padding-top:clamp(56px,6vw,84px);box-shadow:inset 0 1px 0 var(--s-rule)}
.answers-in.wrap{box-shadow:none;position:relative}
.answers-in.wrap::before{content:'';position:absolute;left:var(--gut);right:var(--gut);top:0;height:1px;background:var(--s-rule)}
.answers-head{position:sticky;top:104px}
.answers-head .lnk{margin-top:30px}
.answers-list{box-shadow:inset 0 -1px 0 var(--s-rule)}
.answers details{box-shadow:inset 0 1px 0 var(--s-rule)}
.answers summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px;padding:20px 0;list-style:none;cursor:pointer;font-family:var(--s-display);font-size:clamp(21px,1.9vw,27px);line-height:1.25;letter-spacing:-.015em}
.answers summary::-webkit-details-marker{display:none}
.answers summary::after{content:'';flex:none;width:15px;height:15px;background:linear-gradient(var(--s-ink),var(--s-ink)) 50% 50%/100% 1.5px no-repeat,linear-gradient(var(--s-ink),var(--s-ink)) 50% 50%/1.5px 100% no-repeat;transition:transform .3s var(--s-ease-out)}
.answers details[open] summary::after{transform:rotate(135deg)}
.answers summary:hover span{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
.answers details p{max-width:38em;padding:0 0 28px;font-size:16.5px;line-height:1.65;color:var(--s-ink-2)}
/* an answer opens rather than appears, where the browser can do it */
@supports selector(::details-content){
  html{interpolate-size:allow-keywords}
  .answers details::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--s-ease-out),content-visibility .4s allow-discrete}
  .answers details[open]::details-content{block-size:auto}
}

/* ---------- The lights come up (one orchestrated moment, once) ---------- */
html.motion:not(.hero-done) .hero .h1-a,html.motion:not(.hero-done) .hero .h1-b,html.motion:not(.hero-done) .hero .lead,html.motion:not(.hero-done) .hero .acts,
html.motion:not(.hero-done) .hero .fact,html.motion:not(.hero-done) .knight,html.motion:not(.hero-done) .set::before,html.motion:not(.hero-done) .set::after,
html.motion:not(.hero-done) .board,html.motion:not(.hero-done) .site-header{opacity:0}
html.motion.hero-go:not(.hero-done) .set::before{animation:lights 1.6s ease-out both}
html.motion.hero-go:not(.hero-done) .set::after,html.motion.hero-go:not(.hero-done) .board{animation:lights 1.4s ease-out .5s both}
html.motion.hero-go:not(.hero-done) .knight{animation:lights 1.5s ease-out .1s both}
html.motion.hero-go:not(.hero-done) .knight picture{animation:settle 1.6s var(--s-ease-out) .1s both}
html.motion.hero-go:not(.hero-done) .hero .h1-a{animation:rise .95s var(--s-ease-out) .35s both}
html.motion.hero-go:not(.hero-done) .hero .h1-b{animation:rise .95s var(--s-ease-out) .5s both}
html.motion.hero-go:not(.hero-done) .hero .lead{animation:rise .95s var(--s-ease-out) .66s both}
html.motion.hero-go:not(.hero-done) .hero .acts{animation:rise .95s var(--s-ease-out) .78s both}
html.motion.hero-go:not(.hero-done) .hero .fact{animation:lights 1.1s ease-out 1.1s both}
html.motion.hero-go:not(.hero-done) .site-header{animation:lights 1s ease-out .7s both}
@keyframes lights{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes settle{from{transform:translate3d(0,14px,0) scale(.985)}to{transform:none}}

/* ---------- Responsive ---------- */
@media(max-height:780px) and (min-width:901px){
  :root{--floor:104px}
  .hero-copy{bottom:calc(var(--floor) + 52px)}
  .hero .lead{margin-top:22px;font-size:17.5px}
  .acts{margin-top:26px}
  .beat p{margin-top:16px;font-size:17px}
  html.js .log{margin-top:26px}
  .log li{padding:4px 0;font-size:14.5px}
  .rail{margin-top:22px}
}
@media(max-width:1180px) and (min-width:901px){
  .scene-in{grid-template-columns:minmax(0,360px) minmax(0,1fr)}
  .plan{height:min(76vh,calc((var(--u) - 360px) * .818))}
  .fact span{font-size:17px}
  .way-say{min-height:2.6em}
}
@media(max-width:900px){
  :root{--floor:62px}
  html:not(.js) .hero-in{padding-top:20px}
  .hero{height:auto;min-height:100vh;min-height:100svh}
  .hero-in{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding-top:calc(var(--bar) + 24px)}
  .hero-in::before{display:none}
  .hero-copy{position:relative;left:auto;bottom:auto;width:auto}
  .hero h1{font-size:clamp(40px,11.9vw,76px);line-height:.98}
  .hero h1 .h1-b{font-size:.56em;margin-top:.34em;line-height:1.1}
  .hero .lead{margin-top:20px;font-size:16.5px;line-height:1.55;max-width:34em;text-wrap:pretty}
  .acts{margin-top:24px;gap:22px}
  .acts .btn{min-height:54px;padding:0 24px}
  .acts .lnk{margin-right:6px}
  .set{position:relative;right:auto;bottom:auto;flex:1;min-height:min(46vh,92vw);height:auto;aspect-ratio:auto;margin:14px 0 var(--floor);align-self:stretch}
  .knight{left:50%;right:auto;top:auto;bottom:0;height:min(100%,82vw);aspect-ratio:684/1174;transform:translateX(-36%)}
  .set::before{left:60%;top:60%}
  .set::after,.board-view{left:60%}
  .knight-obj{filter:drop-shadow(0 16px 20px rgba(0,0,0,.5))}
  .board-view{--bp:300px}
  .board{--bc:96px;--bx:24px}
  .fact{position:relative;left:auto;right:auto;height:auto;padding:0 0 26px;gap:4px 18px;margin-top:-34px}
  .fact b{flex-basis:100%}
  .fact span{font-size:16.5px}

  .scene{padding:64px 0 60px}
  .scene-in{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"beats" "drawing" "log" "rail";min-height:0}
  .say{display:contents}
  .beats{grid-area:beats}
  .beat h3{font-size:clamp(32px,8.6vw,54px)}
  .beat p{margin-top:14px;font-size:16.5px}
  .drawing{grid-area:drawing;justify-self:stretch;margin:26px calc(var(--gut) * -.45) 0}
  .plan{width:100%;height:auto}
  .pl-row,.pl-chip{display:none}
  .pl-role{font-size:25px}
  .pl-sys{font-size:22px}
  html.js .log{grid-area:log;margin-top:22px;min-height:214px}
  .rail{grid-area:rail;margin-top:20px}

  .ways{grid-template-columns:minmax(0,1fr)}
  .seam-head{position:relative;top:auto;display:block;padding:72px var(--gut) 0;background:var(--s-lq);white-space:normal;font-size:clamp(40px,11vw,72px);line-height:1.02}
  .seam-head .on-l,.seam-head .on-r{display:inline;padding:0;color:var(--s-bone)}
  .way{padding:40px 0 60px}
  .way-leaders{padding-top:64px}
  .way-process .way-in,.way-leaders .way-in{padding:0 var(--gut);width:100%}
  .way-foot::before{margin-top:36px}

  .people-head{grid-template-columns:minmax(0,1fr)}
  .people-head h2{white-space:normal}
  .flows-head h2{font-size:clamp(34px,9.4vw,64px)}
  .flows-head>p{margin-top:20px;font-size:17px}
  .people-head p{justify-self:start}
  .flows-grid,.flows-grid.brief{grid-template-columns:minmax(0,1fr);gap:40px}

  .method-head{grid-template-columns:minmax(0,1fr)}
  .method-head h2{white-space:normal}
  .method-lead{justify-self:start}
  .m-board{margin-top:26px}

  .leaders{grid-template-columns:repeat(2,minmax(0,1fr))}
  .answers-in{grid-template-columns:minmax(0,1fr)}
  .answers-head{position:static}
}
@media(max-width:900px) and (min-width:641px){
  .pl-role{font-size:19px}
  .pl-sys{font-size:17.5px}
}
@media(max-width:760px){
  .method-foot{margin-top:0}
}
@media(max-width:640px){
  body{font-size:16.5px}
  .rail{gap:8px}
  .rail-play{min-width:44px;margin-left:0;padding-left:8px;justify-content:flex-end}
  .rail-play .rp-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .acts .btn{flex:1 1 auto;max-width:340px}
  /* the rail stands on end: a line down the left, the four stages in a column */
  .flow-rail{grid-template-columns:minmax(0,1fr);margin-top:22px}
  .flow-rail li{padding:7px 0 7px 24px;box-shadow:none}
  .flow-rail li::before{top:9px;box-shadow:none}
  .flow-rail li::after{content:'';position:absolute;left:5px;top:0;bottom:0;width:1.5px;background:var(--s-rule-2)}
  .flow-rail li:first-child::after{top:9px}
  .flow-rail li:last-child::after{bottom:auto;height:9px}
  .leaders{grid-template-columns:minmax(0,1fr);gap:44px}
  .leader figure{aspect-ratio:1/1}
}
@media(max-width:360px){
  .acts{gap:16px}
  .acts .btn{padding:0 14px}
  .rail{gap:6px}
  .rail-step{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}