:root{
  --paper:#f6f6f4;--ink:#0c0c0c;--hair:rgba(12,12,12,.09);--mute:rgba(12,12,12,.55);
  --accent:#0c0c0c;--gut:24px;
}
*{box-sizing:border-box;border-radius:0!important;margin:0}
html{scroll-behavior:auto}
body{background:var(--paper);color:var(--ink);font-family:'Heebo',system-ui,sans-serif;font-size:18px;font-weight:300;line-height:1.8;letter-spacing:.005em;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden;height:100vh}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:300;letter-spacing:.14em;text-transform:uppercase}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);max-width:1440px;margin:0 auto;padding:0 40px}
.guides{position:fixed;inset:0;pointer-events:none;z-index:0}
.guides .grid{height:100%}
.guides span{border-inline:.5px solid var(--hair);opacity:.6}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:.5px solid var(--ink);cursor:pointer}
.hidden{display:none!important}

/* header */
#hud{position:fixed;top:0;inset-inline:0;z-index:20;background:var(--paper);border-bottom:.5px solid rgba(12,12,12,.3);height:48px;transform:translateY(-100%);transition:transform .4s}
body.started #hud{transform:none}
#hud .grid{height:48px;align-items:center}
#hud .l{grid-column:1/6}#hud .m{grid-column:6/9;text-align:center}#hud .r{grid-column:9/13;display:flex;justify-content:flex-end;gap:16px;align-items:center}
#mini{height:36px;width:20px;cursor:pointer}
#rail{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:15;display:flex;flex-direction:column;gap:6px}
#rail i{display:block;width:10px;height:10px;border:.5px solid var(--ink);cursor:pointer}
#rail i.on{background:var(--accent)}
body:not(.started) #rail{display:none}

/* choose */
#choose{min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}
#choose .top{display:flex;justify-content:space-between;padding:20px 40px;border-bottom:.5px solid rgba(12,12,12,.3)}
#choose h1{font-size:clamp(34px,6.2vw,104px);font-weight:100;line-height:.98;letter-spacing:-.04em;padding:6vh 40px 4vh;max-width:1440px;margin:0 auto;width:100%}
#choose .opts{margin-top:auto;border-top:.5px solid rgba(12,12,12,.3)}
.opt{grid-column:span 4;padding:0;border:0;border-inline-start:.5px solid rgba(12,12,12,.3);text-align:start;display:flex;flex-direction:column;height:44vh;min-height:300px;background:transparent;transition:background .15s,color .15s}
.opt:last-child{border-inline-end:.5px solid rgba(12,12,12,.3)}
.opt .lab{display:flex;justify-content:space-between;padding:14px 16px;border-bottom:.5px solid rgba(12,12,12,.2)}
.opt .nm{font-size:28px;font-weight:200;letter-spacing:-.01em;line-height:1;padding:12px 16px 16px;margin-top:auto}
.opt svg{flex:1;min-height:0;width:100%;padding:12px}
.opt:hover,.opt:focus-visible{background:var(--ink);color:var(--paper);outline:0}
.opt:hover svg .ink,.opt:focus-visible svg .ink{stroke:var(--paper)}
.opt:hover .lab{border-color:var(--paper)}

/* pour */
#pour{height:420vh;position:relative;z-index:1}
#stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;padding-top:48px}
#stage svg{height:calc(100vh - 80px);max-width:100%}
.hint{position:absolute;bottom:24px;inset-inline:0;text-align:center}

/* svg classes */
svg .ink{fill:none;stroke:var(--ink);stroke-width:1}
.s{fill:none;stroke:var(--ink);stroke-width:.6}
.h{fill:none;stroke:var(--hair);stroke-width:.5}
.hs{fill:none;stroke:rgba(12,12,12,.3);stroke-width:.5}
.f{fill:var(--ink)}.a{fill:var(--accent)}.p{fill:var(--paper)}
.sa{fill:none;stroke:var(--accent);stroke-width:1.2}
  .t{font:300 10px 'JetBrains Mono',monospace;fill:var(--ink);letter-spacing:.03em}
.tm{font:300 9px 'JetBrains Mono',monospace;fill:var(--mute);letter-spacing:.03em}
.th{font:300 15px 'Heebo',sans-serif;fill:var(--ink);direction:rtl;unicode-bidi:plaintext}
.tb{font:200 34px 'Heebo',sans-serif;fill:var(--ink)}

/* chapters */
.chapter{position:relative;z-index:1;border-top:.5px solid rgba(12,12,12,.25)}
.ch-head{padding-top:48px;padding-bottom:32px;align-items:end}
.ch-num{grid-column:1/3}
.ch-q{grid-column:3/13;font-size:clamp(34px,4.6vw,68px);font-weight:100;line-height:1.08;letter-spacing:-.035em}
.ch-body{align-items:start}
.ch-text{grid-column:1/7;padding-bottom:30vh;min-height:140vh;background:var(--paper)}
.ch-text p{margin:0 0 1.1em;max-width:32em}
.ch-text strong{font-weight:400}
.ch-ex{grid-column:7/13;position:sticky;top:64px}
.ex{border:.5px solid rgba(12,12,12,.35);background:var(--paper)}
.ex-bar{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:.5px solid rgba(12,12,12,.2)}
.ex-bar .ro{color:var(--mute);direction:ltr}
.ex svg{display:block;width:100%;height:auto;max-height:calc(100vh - 140px)}
.pull{font-size:clamp(24px,2.4vw,36px);font-weight:200;line-height:1.2;letter-spacing:-.02em;border-top:.5px solid var(--accent);padding-top:16px;margin:1.2em 0 1.4em}
.ledger{border:0;border-top:.5px solid var(--ink);margin:1.4em 0;max-width:34em}
.ledger .r{display:grid;grid-template-columns:2.6em 1fr;border-bottom:.5px solid var(--hair)}
.ledger .r:first-child{border-top:0}
.ledger .r>*{padding:8px 12px}
.ledger .r b{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:300;color:var(--mute);letter-spacing:.1em}
.tbl{border:0;border-top:.5px solid var(--ink);margin:1.4em 0;font-size:16px;line-height:1.5}
.tbl .r{display:grid;grid-template-columns:1fr 1fr;border-bottom:.5px solid var(--hair);transition:background .2s}
.tbl .r:first-child{border-top:0}
.tbl .r.hd{color:var(--mute);font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:300;text-transform:uppercase;letter-spacing:.14em}
.tbl .r>div{padding:10px 12px}
.tbl .r>div+div{border-inline-start:.5px solid var(--hair)}
.tbl .r.on{background:var(--accent);color:var(--paper)}
.tbl .r.on>div+div{border-color:rgba(246,246,244,.4)}
.chat{border:.5px solid rgba(12,12,12,.35);margin:1.2em 0;max-width:34em}
.chat div{padding:12px 14px;border-top:.5px solid var(--hair);font-size:16px;line-height:1.55}
.chat div:first-child{border-top:0}
.chat b{display:block;font:300 9px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.chat .ai{background:var(--ink);color:var(--paper)}.chat .ai b{color:rgba(246,246,244,.6)}
sup a{font-family:'JetBrains Mono',monospace;font-weight:300;font-size:9px;text-decoration:none;border:.5px solid var(--ink);padding:0 3px;margin-inline-start:2px}
.en{direction:ltr;unicode-bidi:isolate;display:inline-block}
hr.sep{border:0;border-top:.5px solid var(--ink);margin:2em 0;max-width:6em}

/* finale */
#finale{position:relative;z-index:1;background:var(--ink);color:var(--paper)}
#finale .grid{padding-top:12vh;padding-bottom:12vh}
#finale .ch-num{color:rgba(246,246,244,.6)}
#finale h2{grid-column:3/13;font-size:clamp(34px,4.6vw,68px);font-weight:100;line-height:1.08;letter-spacing:-.035em;margin-bottom:8vh}
#fin{grid-column:3/12;font-size:clamp(18px,1.9vw,27px);font-weight:200;line-height:1.55}
#fin p{margin:0 0 1.2em;opacity:.12;transition:opacity .5s}
#fin p.on{opacity:1}
#fin p.big{font-size:clamp(30px,4vw,62px);font-weight:100;line-height:1.1;letter-spacing:-.035em;border-top:.5px solid var(--paper);padding-top:.4em;margin-top:1.2em}
#fin p.he{font-size:clamp(18px,1.6vw,24px);opacity:.12}
#fin p.he.on{opacity:.75}
#src{position:relative;z-index:1;border-top:.5px solid rgba(12,12,12,.25);background:var(--paper)}
#src .grid{padding-top:32px;padding-bottom:48px}
#src ol{grid-column:3/13;list-style:none;padding:0;direction:ltr;text-align:left;font:300 10px 'JetBrains Mono',monospace}
#src li{padding:6px 0;border-top:.5px solid var(--hair)}
#src .ch-num{grid-column:1/3}

@media(max-width:900px){
  .grid{padding:0 18px}
  .ch-num{grid-column:1/13;margin-bottom:8px}.ch-q{grid-column:1/13}
  .ch-text{grid-column:1/13;min-height:0;padding-bottom:10vh;order:2}
  .ch-ex{grid-column:1/13;position:sticky;top:48px;z-index:3;order:1;margin-bottom:16px}
  .ex svg{max-height:42vh}
  .ch-body{display:flex;flex-direction:column}
  .ch-ex,.ch-text{width:100%}
  .ch-ex{background:var(--paper)}
  .opt svg{max-width:70px;height:70px}
  .opt{grid-column:span 12;height:auto;min-height:0;flex-direction:row;border-inline:0;border-bottom:1px solid var(--ink)}
  .opt svg{max-width:90px;flex:none;height:90px}.opt .nm{margin:auto 0}.opt .lab{display:none}
  #choose .opts.grid{display:block;padding:0}
  #finale h2,#fin,#src ol{grid-column:1/13}
  #rail{display:none}
  #hud .m{display:none}#hud .l{grid-column:1/8}#hud .r{grid-column:8/13}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.ex svg,#stage-svg,#mini{direction:ltr}

#intro{margin-top:auto;border-top:.5px solid rgba(12,12,12,.3);padding-top:28px;padding-bottom:40px;align-items:end;row-gap:24px}
#intro .meta{grid-column:1/7;display:flex;flex-direction:column;gap:6px;color:var(--mute)}
#intro #go{grid-column:11/13;justify-self:end;padding:14px 22px;background:transparent;font-weight:300;letter-spacing:.14em}
#intro #go:hover{background:var(--ink);color:var(--paper)}
@media(max-width:900px){#intro .meta,#intro #go{grid-column:1/13;justify-self:start}}

@media(max-width:900px){
  .panel{display:none}
  #stage svg{height:auto;width:100%;max-height:calc(100vh - 100px)}
  #hud .l{white-space:nowrap;font-size:9px}
  .ex-bar{flex-wrap:wrap;padding:6px 10px}
  .ch-head{padding-top:32px;padding-bottom:20px}
  .ch-q{font-size:clamp(28px,8vw,44px)}
  body{font-size:17px}
  .pull{font-size:22px}
  #choose .top{padding:16px 18px}
  #choose h1{padding:5vh 18px 3vh}
}

#disc{padding-top:20px;padding-bottom:28px;row-gap:12px;align-items:start}
#disc .dl{grid-column:1/3;color:var(--mute);padding-top:6px}
#disc .dt{grid-column:3/9;font-size:16px;font-weight:300;line-height:1.75;color:rgba(12,12,12,.78)}
#disc .dt p{margin:0 0 .6em;max-width:34em}
#disc .dsig{grid-column:3/9;color:var(--mute)}
@media(max-width:900px){#disc .dl,#disc .dt,#disc .dsig{grid-column:1/13}#disc .dt{font-size:15px}}

#pre,#post{max-width:1440px;margin:0 auto;width:100%;padding:0 40px;font-size:16px;font-weight:300;line-height:1.75;color:rgba(12,12,12,.72)}
#pre{padding-top:5vh}
#pre:not(.hidden)+h1{padding-top:2vh;padding-bottom:2vh}
#pre,#post{display:block}
#pre.hidden,#post.hidden{display:none}
#post{max-width:1440px;padding-bottom:4vh}
#pre,#post{text-wrap:pretty}
@media(min-width:901px){#pre,#post{padding-inline-end:calc(40px + 33%)}}
@media(max-width:900px){#pre,#post{padding:0 18px;font-size:15px}#pre{padding-top:4vh}#post{padding-bottom:3vh}}

/* hero */
#hero{min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}
#hero .top{display:flex;justify-content:space-between;padding:20px 40px;border-bottom:.5px solid rgba(12,12,12,.3)}
#hero .hmain{margin:auto 0;width:100%;row-gap:0;align-items:start;padding-top:8vh;padding-bottom:8vh}
.cred{grid-column:11/13;grid-row:1/3;margin:0;padding-top:1.6vw;display:flex;flex-direction:column;gap:10px}
.cred div{display:flex;justify-content:space-between;gap:12px;border-bottom:.5px solid var(--hair);padding-bottom:8px}
.cred dt{color:var(--mute)}.cred dd{margin:0}
.hq1{grid-column:1/11;font-size:clamp(64px,12vw,220px);font-weight:100;line-height:.92;letter-spacing:-.05em}
.ans{grid-column:1/10;margin-top:4vh;font-size:clamp(22px,2.6vw,40px);font-weight:200;line-height:1.3;letter-spacing:-.015em;min-height:2.6em}
#caret{display:inline-block;width:.42em;height:.08em;background:var(--ink);margin-inline-start:.12em;vertical-align:baseline;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
#hero .hfoot{border-top:.5px solid rgba(12,12,12,.3);padding-top:18px;padding-bottom:18px;align-items:center;width:100%}
#hero .k3{grid-column:3/10;font-size:14px;font-weight:300;color:rgba(12,12,12,.65)}
#down{grid-column:12/13;justify-self:end;border:0;background:transparent;width:24px;height:64px;padding:0}
#down svg{width:20px;height:60px;display:block}
@media(max-width:900px){
  #hero .top{padding:16px 18px}
  .cred{grid-column:1/13;grid-row:auto;order:3;margin-top:6vh;padding-top:0}
  .hq1,.ans{grid-column:1/13}
  #hero .k3{grid-column:1/11}#down{grid-column:11/13}
}
/* choose v2 */
#choose{border-top:.5px solid rgba(12,12,12,.3)}
#choose .cwrap{padding-top:6vh;row-gap:12px;width:100%}
#choose .dl{grid-column:1/3;color:var(--mute);padding-top:6px}
#choose .dt{grid-column:3/10;font-size:16px;font-weight:300;line-height:1.75;color:rgba(12,12,12,.75)}
#choose .dt p{margin:0 0 .6em;max-width:36em}
#choose .dt .hq2{font-size:clamp(20px,1.8vw,26px);font-weight:200;color:var(--ink);line-height:1.4;margin-bottom:.8em}
#choose h1#hq{padding-top:5vh;padding-bottom:1.5vh}
#post{display:block!important;padding-bottom:4vh}
#choose .opts{margin-top:auto}
.opt{height:38vh;min-height:260px}
@media(max-width:900px){
  #hero .top{padding:16px 18px}
  #hero .k2,#hero .k3{grid-column:1/13}
  #down{grid-column:1/13;justify-self:start;margin-top:12px}
  #choose .dl,#choose .dt{grid-column:1/13}
}

.qm{font-weight:100;margin-inline-end:.05em;color:var(--mute)}
.src{grid-column:1/10;margin-top:18px;color:var(--mute);opacity:0;transition:opacity .8s}
.src.on{opacity:1}
#choose{min-height:100vh;display:flex;flex-direction:column}
#choose .cwrap{padding-top:9vh;row-gap:14px}
#choose .dl{grid-column:1/13;color:var(--mute);padding-top:0}
#choose p.dt{grid-column:1/7;font-size:clamp(17px,1.4vw,20px);font-weight:200;line-height:1.65;color:rgba(12,12,12,.8);max-width:30em;margin:0}
#choose h1#hq{padding-top:7vh;padding-bottom:0}
@media(max-width:900px){#choose p.dt{grid-column:1/13}.src{grid-column:1/13}}

/* project links + floating card */
a.proj{text-decoration:none;border-bottom:.5px solid var(--accent);padding-bottom:1px;transition:background .2s}
a.proj::after{content:"↗";font-family:'JetBrains Mono',monospace;font-size:.62em;margin-inline-start:.2em;vertical-align:.35em;color:var(--mute)}
a.proj:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
#tip{position:fixed;left:0;top:0;z-index:50;width:300px;background:var(--paper);border:.5px solid var(--ink);padding:16px 18px 14px;pointer-events:none;opacity:0;transition:opacity .18s;box-shadow:0 18px 40px -24px rgba(12,12,12,.35)}
#tip.on{opacity:1}
#tip .tk{display:flex;justify-content:space-between;color:var(--mute);border-bottom:.5px solid var(--hair);padding-bottom:8px;margin-bottom:12px}
#tip .tn{font-size:34px;font-weight:100;letter-spacing:-.03em;line-height:1;margin-bottom:10px}
#tip p{font-size:14px;line-height:1.6;font-weight:300;margin:0 0 12px}
#tip .tm2{color:var(--mute);margin-bottom:12px;line-height:1.6}
#tip .tg{border-top:.5px solid var(--hair);padding-top:8px;color:var(--accent)}
@media(hover:none){#tip{display:none}}
/* language switch */
.lang{text-decoration:none;border:.5px solid rgba(12,12,12,.35);padding:3px 7px;margin-inline-start:14px}
.lang:hover{background:var(--ink);color:var(--paper)}
#hero .top .tr{display:flex;align-items:center}
/* case-study pages */
body[data-page=case] #hud{transform:none}
.cs-hero{position:relative;z-index:1;padding-top:96px}
.cs-hero .grid{padding-top:8vh;padding-bottom:6vh;row-gap:24px;align-items:end}
.cs-k{grid-column:1/13;color:var(--mute)}
.cs-t{grid-column:1/9;font-size:clamp(72px,14vw,240px);font-weight:100;letter-spacing:-.06em;line-height:.88}
.cs-lead{grid-column:1/8;font-size:clamp(20px,2vw,30px);font-weight:200;line-height:1.45}
.cs-meta{grid-column:9/13;grid-row:2/4;margin:0;display:flex;flex-direction:column;gap:10px;align-self:end}
.cs-meta div{display:flex;justify-content:space-between;gap:12px;border-bottom:.5px solid var(--hair);padding-bottom:8px}
.cs-meta dt{color:var(--mute)}.cs-meta dd{margin:0;text-align:end}
.cs-sec .ch-text{min-height:110vh}
.cs-sec h3{font-size:clamp(26px,2.6vw,40px);font-weight:200;letter-spacing:-.02em;line-height:1.15;margin:0 0 .8em}
.cs-next{position:relative;z-index:1;border-top:.5px solid rgba(12,12,12,.25)}
.cs-next .grid{padding-top:10vh;padding-bottom:12vh;row-gap:16px}
.cs-next .mono{grid-column:1/13;color:var(--mute)}
.cs-next a{grid-column:1/13;font-size:clamp(48px,8vw,140px);font-weight:100;letter-spacing:-.05em;line-height:1;text-decoration:none}
.cs-next a:hover{color:var(--accent)}
.back{text-decoration:none}
@media(max-width:900px){.cs-t,.cs-lead,.cs-meta{grid-column:1/13;grid-row:auto}}
/* ltr */
html[dir=ltr] #rail{left:auto;right:14px}
html[dir=ltr] .ch-q,html[dir=ltr] .hq1,html[dir=ltr] #choose h1{letter-spacing:-.04em}

/* headings flush to the reading edge, no numbering */
.ch-q{grid-column:1/13}
#finale h2{grid-column:1/13}
#fin{grid-column:1/11}
.ch-head{padding-top:56px}
/* expandable quote */
.xp{margin:1.2em 0 1.4em;max-width:34em}
.xpt{all:unset;cursor:pointer;display:block;width:100%;box-sizing:border-box}
.xp .pull{margin:0}
.xpt:focus-visible{outline:.5px solid var(--accent);outline-offset:6px}
.xpi{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:var(--mute);font-size:10px}
.xpi i{font-style:normal}
.xpi b{font-weight:200;font-size:18px;line-height:1;transition:transform .35s;color:var(--ink)}
.xpt:hover .xpi i{color:var(--accent)}
.xp.open .xpi b{transform:rotate(45deg)}
.xpb{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.xp.open .xpb{grid-template-rows:1fr}
.xpc{overflow:hidden;min-height:0}
.xpc>:first-child{margin-top:22px}
.xpc p{font-size:17px}
.xpl{color:var(--mute);margin-bottom:10px}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 1.4em;font-size:10px}
.chain span{border:.5px solid rgba(12,12,12,.35);padding:6px 9px}
.chain span:last-child{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.chain i{font-style:normal;color:var(--mute)}

.xpt .pull{display:block}
.xpi{border-top:.5px solid var(--hair);padding-top:10px}

/* hero v3: calmer scale + live interview */
.hq1{font-size:clamp(44px,6.4vw,112px);line-height:1;letter-spacing:-.04em}
.ans{font-size:clamp(20px,2vw,30px);margin-top:3vh;min-height:2.4em}
.rec{grid-column:1/10;display:flex;align-items:center;gap:12px;color:var(--mute);margin-bottom:22px}
.rec i{width:7px;height:7px;background:var(--accent);animation:blink 1.4s steps(1) infinite}
.rec #tc{color:var(--ink);letter-spacing:.08em}
#wave{grid-column:1/10;width:100%;height:64px;margin-top:4vh;display:block}
#wave line{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
#wave line.hot{stroke:var(--accent)}
#hero .hfoot{grid-template-columns:repeat(12,1fr)}
.tick{grid-column:1/12;overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);color:var(--mute)}
.tk-in{display:inline-flex;animation:tick 90s linear infinite}
.tick span{padding-inline-end:44px;font-family:'Heebo',sans-serif;text-transform:none;letter-spacing:0;font-size:13px;font-weight:300;color:rgba(12,12,12,.6)}
.tick b{font:300 9px 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--mute);margin-inline-end:10px}
html[dir=rtl] .tk-in{animation-name:tickr}
@keyframes tick{to{transform:translateX(-50%)}}
@keyframes tickr{to{transform:translateX(50%)}}
.tick:hover .tk-in{animation-play-state:paused}
#down{grid-column:12/13}
@media(max-width:900px){.rec,#wave{grid-column:1/13}.tick{grid-column:1/11}#down{grid-column:11/13}}
@media(prefers-reduced-motion:reduce){.tk-in{animation:none}}

/* hero v4: chat */
.hmain .msg{grid-column:1/10;padding:18px 0;border-top:.5px solid var(--hair)}
.msg .who{display:flex;gap:14px;color:var(--mute);margin-bottom:10px}
.msg .st{color:var(--accent);opacity:0;transition:opacity .4s}
.msg .st.on,#think:not(:empty){opacity:1}
.msg.ai{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.msg.ai.on{opacity:1;transform:none}
.msg .ans{margin-top:0}
.msg .src{margin-top:12px}
.hq1{font-size:clamp(40px,5.4vw,92px)}
.cc{display:inline-block;width:.06em;min-width:1px;height:.82em;background:var(--ink);margin-inline-start:.06em;vertical-align:-.06em;animation:blink 1s steps(1) infinite}
.rec{margin-bottom:6px}
.composer{grid-column:1/12;display:flex;align-items:center;gap:12px;border:.5px solid rgba(12,12,12,.3);padding:12px 16px;font-size:15px;font-weight:300;color:rgba(12,12,12,.7);min-height:46px}
.composer .pr{color:var(--accent);font-size:13px}
.composer #ctype{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer .cc{height:1em}
.composer .send{margin-inline-start:auto;color:var(--mute);border:.5px solid var(--hair);padding:3px 7px}
@media(max-width:900px){.hmain .msg{grid-column:1/13}.composer{grid-column:1/11;font-size:13px}}

/* drinks: higher, softer, precise */
svg .ink{vector-effect:non-scaling-stroke;stroke-width:1}
#choose{min-height:0}
#choose h1#hq{padding-top:4vh}
#choose .opts{margin-top:5vh}
.opt{height:46vh;min-height:300px}
.opt:hover,.opt:focus-visible{background:rgba(12,12,12,.025);color:var(--ink)}
.opt:hover svg .ink,.opt:focus-visible svg .ink{stroke:var(--ink)}
.opt:hover .lab,.opt:focus-visible .lab{border-color:rgba(12,12,12,.2)}
.opt:hover .lab span:first-child,.opt:focus-visible .lab span:first-child{color:var(--ink)}
.opt .lab span:first-child{transition:color .2s}
.opt[data-k=coffee]:hover .nm{color:#3b2314}.opt[data-k=water]:hover .nm{color:#2f7bff}.opt[data-k=juice]:hover .nm{color:#ff8a00}
.opt .nm{transition:color .25s}

/* one grid, edge to edge: every row spans the same 12 columns */
#hero>.grid,#choose>.grid,#choose .opts{width:100%}
#choose h1#hq{width:100%;max-width:1440px;margin:0 auto}
#choose .opts{border-top:0;row-gap:24px}
.opt,.opt:last-child{border:.5px solid rgba(12,12,12,.3)}
/* chapter progress lives in the header, not floating at the edge */
#rail{position:static;transform:none;flex-direction:row;gap:5px;left:auto;right:auto}
#rail i{width:8px;height:8px}
html[dir=ltr] #rail{right:auto}
#hud .m{display:flex;justify-content:center;align-items:center}
#hud-q{display:none}
@media(max-width:900px){#hud .m{display:none}}
#hero .top{padding-inline:max(40px,calc((100vw - 1440px)/2 + 40px))}
@media(max-width:900px){#hero .top{padding-inline:18px}}

/* typed headings: an invisible copy holds the exact layout, the typed copy sits on top */
.tw{position:relative}
.tw .gh{visibility:hidden}
.tw .ty{position:absolute;inset:0}
.tw.done .gh{visibility:visible}.tw.done .ty{display:none}
.ch-q .cc{height:.78em}
.ch-text p .cc{height:1em}
.ch-head .who{grid-column:1/13;display:flex;gap:14px;color:var(--mute);margin-bottom:12px}
.ai-who{display:flex;gap:14px;color:var(--mute);margin-bottom:12px;opacity:0;transition:opacity .4s}
.ai-who.on{opacity:1}
.who .st{color:var(--accent);opacity:0;transition:opacity .4s}
.who .st.on,.who .st:not(:empty){opacity:1}
@media(prefers-reduced-motion:reduce){.ai-who{opacity:1}}

/* choose screen: equal air above and below, one viewport */
#choose{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:8vh 0}
#choose .cwrap{padding-top:0}
#choose .opts{margin-top:5vh}
.opt{height:auto;min-height:0;aspect-ratio:4/4.2;max-height:46vh}
/* figure starts on the first line of the answer, not above it */
.ch-ex{margin-top:31px}
.ai-who{height:19px;margin-bottom:12px;line-height:19px}
@media(max-width:900px){.ch-ex{margin-top:0}#choose{min-height:0;padding:6vh 0}.opt{aspect-ratio:auto;max-height:none}}

/* figures never touch the section divider */
.ch-body{padding-bottom:72px}
/* contact */
#contact{position:relative;z-index:1;border-top:.5px solid rgba(12,12,12,.25);background:var(--paper)}
#contact .grid{padding-top:12vh;padding-bottom:12vh;row-gap:0}
#contact .ck{grid-column:1/13;color:var(--mute);margin-bottom:18px}
#contact .ch-q{margin-bottom:6vh}
.clist{grid-column:1/9;border-top:.5px solid var(--ink)}
.crow{display:grid;grid-template-columns:8em 1fr auto;align-items:baseline;gap:16px;padding:18px 0;border-bottom:.5px solid var(--hair);text-decoration:none;transition:padding .25s,color .2s}
.crow .mono{color:var(--mute)}
.crow .cv{font-size:clamp(20px,2vw,30px);font-weight:200;letter-spacing:-.01em;direction:ltr;text-align:start;unicode-bidi:isolate}
html[dir=rtl] .crow .cv{text-align:right}
.crow:hover{padding-inline-start:12px}.crow:hover .cv,.crow:hover .ca{color:var(--accent)}
@media(max-width:900px){.clist{grid-column:1/13}.crow{grid-template-columns:5.5em 1fr auto}}

/* ask the AI */
.ask{grid-column:1/9;margin-bottom:9vh}
.alog{max-height:52vh;overflow:auto;border-top:.5px solid var(--ink)}
.alog:empty{display:none}
.amsg{padding:16px 0;border-bottom:.5px solid var(--hair)}
.amsg .who{display:flex;gap:14px;color:var(--mute);margin-bottom:8px}
.amsg .st{color:var(--accent)}
.amsg p{margin:0;font-size:18px;line-height:1.75;white-space:pre-wrap;max-width:36em}
.amsg.me p{font-weight:200;font-size:clamp(20px,1.8vw,26px);line-height:1.4}
.amsg.err p{color:var(--mute)}
.asug{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 12px}
.chip{border:.5px solid rgba(12,12,12,.3);background:transparent;padding:7px 12px;font:300 14px 'Heebo',sans-serif;color:rgba(12,12,12,.75);cursor:pointer;transition:border-color .2s,color .2s}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.acomp{width:100%;grid-column:auto}
.acomp input{flex:1;border:0;background:transparent;font:300 16px 'Heebo',sans-serif;color:var(--ink);outline:0;min-width:0}
.acomp input::placeholder{color:rgba(12,12,12,.4)}
.acomp:focus-within{border-color:var(--ink)}
.acomp .send{cursor:pointer;background:transparent}
.acomp.busy{opacity:.55;pointer-events:none}
.anote{color:var(--mute);margin-top:10px}
#contact .ck2{margin-bottom:12px}
.askbtn{margin-inline-start:14px}
@media(max-width:900px){.ask{grid-column:1/13}#hud .askbtn{display:none}}

.fit-out{position:relative;z-index:1;border-top:.5px solid rgba(12,12,12,.25)}
.fit-out .grid{padding-top:7vh;padding-bottom:3vh;align-items:start;row-gap:28px}
.fo-lab{color:var(--mute);margin-bottom:14px;border-bottom:.5px solid var(--hair);padding-bottom:8px}
.fo-cup{grid-column:1/4;position:relative}
.fo-cup svg{width:100%;max-height:340px;display:block}
.fo-score{display:flex;align-items:baseline;gap:6px;justify-content:center;margin-top:8px}
.fo-score span{font-size:72px;font-weight:100;letter-spacing:-.04em;line-height:1}
.fo-score i{font:300 11px 'JetBrains Mono',monospace;color:var(--mute);font-style:normal}
.fo-head{grid-column:4/13;align-self:center}
.fo-k{color:var(--mute);margin-bottom:14px}
.fo-verdict{font-size:clamp(26px,3vw,46px);font-weight:100;line-height:1.2;letter-spacing:-.02em;margin:0}
.fo-radar{grid-column:1/6}
.fo-radar svg{width:100%;max-width:440px;display:block;margin:0 auto}
.fo-radar .rl.on text{fill:var(--accent)}
.fo-note{font-size:15px;font-weight:300;line-height:1.6;min-height:3.2em;margin:8px 0 0}
.fo-note b{font-weight:400}
.fo-req{grid-column:6/13}
.fo-filt{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.fo-filt .chip b{font-weight:300;font-size:10px;margin-inline-start:6px;color:var(--mute)}
.fo-filt .chip.on{border-color:var(--ink);color:var(--ink)}
.fo-reqs{list-style:none;padding:0;margin:0}
.fo-reqs li{border-bottom:.5px solid var(--hair)}
.rq{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:14px 1fr auto;gap:12px;align-items:center;padding:12px 0;cursor:pointer;font-size:16px;font-weight:300}
.rq em{font-style:normal;color:var(--mute)}
.fo-reqs p{display:none;margin:0 0 12px;padding-inline-start:26px;font-size:15px;line-height:1.6;color:rgba(12,12,12,.7)}
.fo-reqs li.open p{display:block}
.mk{display:inline-block;width:12px;height:12px;border:.5px solid var(--ink)}
.mk.strong{background:var(--accent);border-color:var(--accent)}
.mk.partial{background:linear-gradient(90deg,var(--accent) 50%,transparent 50%);border-color:var(--accent)}
.mk.gap{background:transparent}
.fo-sig{grid-column:1/5}.fo-cf{grid-column:5/13}
.fo-sig ol,.fo-col ol,.fo-src ol{list-style:none;padding:0;margin:0}
.fo-sig li,.fo-col li{padding:10px 0;border-bottom:.5px solid var(--hair);font-size:16px;font-weight:300;line-height:1.55}
.cf{display:grid;grid-template-columns:14px 10em auto 1fr;gap:12px;align-items:baseline;padding:12px 0;border-bottom:.5px solid var(--hair)}
.cf b{font-weight:400}.cf em{font-style:normal;color:var(--mute)}
.cf.tension em{color:#b23a2a}
.cf p{margin:0;font-size:15px;font-weight:300;line-height:1.55;color:rgba(12,12,12,.75)}
.fo-col{grid-column:span 4}
.fo-q li{display:flex;gap:10px;justify-content:space-between;align-items:baseline}
.cp{background:transparent;border:.5px solid var(--hair);padding:2px 7px;cursor:pointer;color:var(--mute)}
.cp:hover{color:var(--accent);border-color:var(--accent)}
.fo-src{padding-bottom:10vh!important}.fo-src .fo-lab,.fo-src ol{grid-column:1/13}
.fo-src li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:.5px solid var(--hair);font-size:14px;font-weight:300}
.fo-src a{color:inherit}.fo-src .mono{color:var(--mute)}
.fitbtn{margin-inline-start:14px}
@media(max-width:900px){.fitform,.flog,.fo-cup,.fo-head,.fo-radar,.fo-req,.fo-sig,.fo-cf,.fo-col{grid-column:1/13}.cf{grid-template-columns:14px 1fr auto}.cf p{grid-column:2/4}.frow{flex-direction:column}#hud .fitbtn{display:none}}



/* ───────── job fit v2: one grid, one instrument ───────── */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fit-hero{position:relative;z-index:1;padding-top:48px}
.fit-hero .grid{padding-top:9vh;padding-bottom:7vh;row-gap:0;align-items:end}
.fk{grid-column:1/13;color:var(--mute);margin-bottom:22px}
.fit-hero .ch-q{grid-column:1/9;font-size:clamp(40px,5.2vw,84px)}
.fkey{grid-column:9/13;margin:0;display:flex;flex-direction:column;gap:14px;padding-bottom:10px}
.fkey div{border-top:.5px solid var(--ink);padding-top:10px}
.fkey dt{color:var(--mute);margin-bottom:4px}
.fkey dd{margin:0;font-size:16px;font-weight:300;line-height:1.5}
.fs{grid-column:span 4;margin-top:8vh;border-top:.5px solid var(--hair);padding-top:12px;display:flex;gap:14px;align-items:baseline}
.fs .mono{color:var(--accent)}
.fs p{margin:0;font-size:16px;font-weight:300}
.fit-in{position:relative;z-index:1}
.fit-in .grid{padding-bottom:10vh;row-gap:24px}
.fitform{grid-column:1/13;border:.5px solid var(--ink);background:var(--paper)}
.fbar,.fbot{display:flex;align-items:center;gap:12px;padding:10px 12px}
.fbar{justify-content:space-between;border-bottom:.5px solid var(--hair)}
.fbot{border-top:.5px solid var(--hair);padding:0}
.fcnt{color:var(--mute)}
.fwho{display:flex}
.seg{border:.5px solid rgba(12,12,12,.3);background:transparent;padding:6px 12px;font:300 14px 'Heebo',sans-serif;cursor:pointer;color:rgba(12,12,12,.7)}
.seg+.seg{border-inline-start:0}
.seg.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.fitform textarea{display:block;width:100%;border:0;background:transparent;padding:20px;resize:vertical;min-height:200px;font:300 17px/1.7 'Heebo',sans-serif;color:var(--ink);outline:0}
.fitform textarea::placeholder,.fbot input::placeholder{color:rgba(12,12,12,.4)}
.fbot input{flex:1;min-width:0;border:0;background:transparent;padding:16px 20px;font:300 15px 'Heebo',sans-serif;color:var(--ink);outline:0}
.fdemo{color:var(--mute);text-decoration:none;padding:0 16px;border-inline-start:.5px solid var(--hair);align-self:stretch;display:flex;align-items:center}
.fdemo:hover{color:var(--accent)}
.fgo{align-self:stretch;padding:0 28px;background:var(--ink);color:var(--paper);border:0;cursor:pointer;letter-spacing:.12em}
.fgo:hover{background:var(--accent)}
.fitform:focus-within{box-shadow:0 0 0 .5px var(--ink)}
.fitform.busy{opacity:.55;pointer-events:none}
.flog{grid-column:1/13;border:.5px solid rgba(12,12,12,.35)}
.flh{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:.5px solid var(--hair);color:var(--mute)}
#flist{list-style:none;margin:0;padding:4px 14px;max-height:260px;overflow:auto}
#flist li{display:grid;grid-template-columns:4em 1fr;gap:12px;padding:8px 0;border-bottom:.5px solid var(--hair);font-size:15px;line-height:1.5;font-weight:300}
#flist li:last-child{border-bottom:0}
#flist li b{font-weight:300;color:var(--mute);font-size:10px;padding-top:4px;font-family:'JetBrains Mono',monospace}
#flist li.live span::after{content:"";display:inline-block;width:6px;height:6px;background:var(--accent);margin-inline-start:8px;animation:blink 1s steps(1) infinite}
#flist li.err span{color:#b23a2a}#flist li.ok span{color:var(--accent)}
#flist q{font-style:normal}#flist q::before,#flist q::after{content:'"'}
#flist a{color:inherit;font-family:'JetBrains Mono',monospace;font-size:11px}
@media(max-width:900px){.fit-hero .ch-q,.fkey{grid-column:1/13}.fkey{margin-top:24px}.fs{grid-column:1/13;margin-top:12px}.fs:first-of-type{margin-top:6vh}.fbot{flex-wrap:wrap}.fbot input{flex-basis:100%;border-bottom:.5px solid var(--hair)}.fgo{padding:14px 20px;margin-inline-start:auto}.fbar{flex-wrap:wrap}}
.fo-tabs{display:flex;margin-bottom:18px}
.fo-tabs .chip{margin:0}.fo-tabs .chip+.chip{border-inline-start:0}
.fo-tabs .chip.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
#fitout[data-view=recruiter] .v-me,#fitout[data-view=marina] .v-rec{display:none}
.fo-wide{grid-column:span 6}
@media(max-width:900px){.fo-wide{grid-column:1/13}}
.pnote{opacity:.7;text-transform:none;letter-spacing:.02em}
.fo-save{float:inline-end;margin-top:-52px}
@media print{#hud,.guides,.fit-hero,.fit-in,#contact,#src,.fo-tabs,.fo-save,.fo-filt{display:none!important}#fitout[data-view] .v-me,#fitout[data-view] .v-rec{display:block!important}.fo-reqs p{display:block!important}body{background:#fff}}

.pathbtn{margin-inline-start:14px}
@media(max-width:900px){#hud .pathbtn{display:none}}
/* header: buttons never wrap */
.lang{white-space:nowrap}
#hud .l{grid-column:1/4}#hud .m{grid-column:4/7}#hud .r{grid-column:7/13;gap:0}
#hud .r .lang{margin-inline-start:8px}
#hud .r #hud-pct{margin-inline-end:6px}

/* ───────── v2 · what is your problem? ───────── */
.pq{position:relative;z-index:1;padding-top:48px}
.pq .grid{padding-top:9vh;padding-bottom:8vh;row-gap:0}
.pq .fk{grid-column:1/13;color:var(--mute);margin-bottom:22px}
.pq-q{grid-column:1/13;font-size:clamp(48px,7vw,124px)}
.pq-sub{grid-column:1/8;margin:22px 0 7vh;font-size:clamp(18px,1.5vw,22px);font-weight:200;line-height:1.55}
.pq-tiles{grid-column:1/13;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pb{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:10px;min-height:190px;padding:16px 18px;border:.5px solid rgba(12,12,12,.3);background:var(--paper);transition:border-color .2s,background .2s}
.pb .mono{color:var(--mute)}
.pb b{font-size:clamp(22px,2vw,30px);font-weight:200;letter-spacing:-.02em;line-height:1.15}
.pb em{font-style:normal;font-size:15px;font-weight:300;color:rgba(12,12,12,.62);line-height:1.5}
.pb-go{margin-top:auto;color:var(--mute);border-top:.5px solid var(--hair);padding-top:10px;font-style:normal}
.pb:hover{border-color:var(--ink)}.pb:hover .pb-go{color:var(--accent)}
.pb.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.pb.on .mono,.pb.on em,.pb.on .pb-go{color:rgba(246,246,244,.7)}.pb.on .pb-go{border-color:rgba(246,246,244,.25)}
.pb:focus-visible{outline:.5px solid var(--accent);outline-offset:4px}
.pp{position:relative;z-index:1;border-top:.5px solid rgba(12,12,12,.25)}
.pp .grid{padding-top:8vh;padding-bottom:10vh;row-gap:48px;align-items:start}
.pp-k{grid-column:1/13;color:var(--mute);margin-bottom:-28px}
.pp-a{grid-column:1/10;margin:0;font-size:clamp(34px,4.4vw,72px);font-weight:100;letter-spacing:-.035em;line-height:1.08;min-height:1.1em}
.pp-col{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s}
.pp.in .pp-col{opacity:1;transform:none}
.pp.in .pp-proof{transition-delay:.12s}.pp.in .pp-skills{transition-delay:.24s}.pp.in .pp-honest{transition-delay:.36s}
.pl{color:var(--mute);border-bottom:.5px solid var(--ink);padding-bottom:8px;margin-bottom:4px}
.pp-steps{grid-column:1/7}.pp-proof{grid-column:7/13}
.pp-steps ol{list-style:none;margin:0;padding:0}
.pp-steps li{display:grid;grid-template-columns:2.6em 1fr;gap:10px;padding:14px 0;border-bottom:.5px solid var(--hair);font-size:18px;font-weight:300;line-height:1.55}
.pp-steps li .mono{color:var(--accent);padding-top:5px}
.pf{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:14px 0;border-bottom:.5px solid var(--hair)}
.pf-o{font-size:24px;font-weight:200;letter-spacing:-.02em}
.pf-y{color:var(--mute);align-self:center}
.pf p{grid-column:1/3;margin:0;font-size:16px;font-weight:300;line-height:1.55;color:rgba(12,12,12,.75)}
.pp-skills{grid-column:1/7}.pp-honest{grid-column:7/13}
.pp-chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px}
.pp-chips span{border:.5px solid rgba(12,12,12,.3);padding:7px 12px;font-size:15px;font-weight:300}
.pp-honest p{margin:12px 0 0;font-size:clamp(20px,1.8vw,26px);font-weight:200;line-height:1.4;border-inline-start:.5px solid var(--accent);padding-inline-start:16px}
.pp-cta{grid-column:1/13;display:flex;gap:16px;align-items:center;border-top:.5px solid var(--hair);padding-top:20px}
.pp-ask{border:0;background:var(--ink);color:var(--paper);padding:14px 22px;cursor:pointer;letter-spacing:.12em}
.pp-ask:hover{background:var(--accent)}
.pp-fit{color:var(--mute);text-decoration:none}.pp-fit:hover{color:var(--accent)}
@media(max-width:900px){.pq-sub{grid-column:1/13}.pq-tiles{grid-template-columns:1fr;gap:12px}.pb{min-height:0}.pp-a,.pp-steps,.pp-proof,.pp-skills,.pp-honest{grid-column:1/13}.pp-cta{flex-direction:column;align-items:flex-start}}
/* v2: featured builder tile + drinks */
.pb-feat{grid-column:1/-1;min-height:0;flex-direction:row;align-items:baseline;gap:24px;padding:22px 20px;border-color:var(--ink)}
.pb-feat b{font-size:clamp(28px,3vw,46px);font-weight:100;flex:0 1 auto}
.pb-feat em{flex:1}
.pb-feat .pb-go{margin-top:0;border-top:0;padding-top:0}
.pq-sub{grid-column:1/8}
.pq-drink{grid-column:9/13;grid-row:3;align-self:end;margin-bottom:7vh}
.pq-cups{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:10px}
.cup{all:unset;box-sizing:border-box;cursor:pointer;border:.5px solid rgba(12,12,12,.3);display:flex;flex-direction:column;align-items:center;padding:8px 6px 10px;gap:4px;transition:border-color .2s}
.cup svg{width:100%;height:86px}
.cup span{font-size:13px;font-weight:300}
.cup:hover,.cup.on{border-color:var(--ink)}
.cup.on span{color:var(--accent)}
@media(max-width:900px){.pq-drink{grid-column:1/13;grid-row:auto;margin:0 0 5vh}.pb-feat{flex-direction:column;gap:10px}}

/* v2 · lava hover / click */
.pbw{position:relative;display:flex}
.pbw .pb{flex:1}
.pb-feat-w{grid-column:1/-1}
.pb,.pp-ask,.mix-go,.cup{position:relative;overflow:hidden;isolation:isolate}
.pb::before,.pp-ask::before,.mix-go::before,.cup::before{content:"";position:absolute;width:160%;aspect-ratio:1;left:var(--mx,50%);top:var(--my,50%);translate:-50% -50%;
  background:radial-gradient(closest-side,#f4ffc2 0%,#c6ff3d 32%,#4be38a 60%,rgba(75,227,138,0) 80%);filter:blur(16px);opacity:0;scale:.25;transition:opacity .35s,scale .55s cubic-bezier(.2,.8,.2,1);z-index:-1;pointer-events:none}
.pb:hover::before,.cup:hover::before{opacity:.38;scale:.7}
.pp-ask:hover::before,.mix-go:hover::before{opacity:.9;scale:1.2}
.pb.on{background:var(--paper);color:var(--ink);border-color:#2f9e5b}
.pb.on::before{opacity:1;scale:2.6;animation:lava 7s ease-in-out infinite alternate}
.pb.on .mono,.pb.on em{color:rgba(12,12,12,.72)}
.pb.splash::after,.cup.splash::after{content:"";position:absolute;left:var(--mx,50%);top:var(--my,50%);width:30px;aspect-ratio:1;translate:-50% -50%;background:radial-gradient(closest-side,#f4ffc2,#9cf04a 55%,transparent 72%);border-radius:50%;animation:splash .7s ease-out forwards;z-index:-1;pointer-events:none}
@keyframes splash{to{width:260%;opacity:0}}
@keyframes lava{0%{filter:blur(16px) hue-rotate(0deg);translate:-50% -50%}50%{filter:blur(22px) hue-rotate(14deg);translate:-44% -56%}100%{filter:blur(18px) hue-rotate(-8deg);translate:-56% -46%}}
.pb-tick{font-style:normal;margin-inline-start:10px;opacity:0;transition:opacity .2s}
.pb.on .pb-tick{opacity:1}
.pb-open{position:absolute;inset-inline-end:14px;bottom:12px;background:transparent;border:0;color:var(--mute);cursor:pointer;padding:4px;z-index:2}
.pb-open:hover{color:#2f9e5b}
.pb{padding-bottom:40px}
.pb-feat{padding-bottom:22px}.pb-feat-w .pb-open{bottom:auto;top:50%;translate:0 -50%}
.pq-hint{grid-column:1/13;color:var(--mute);margin:0 0 12px}
.mixbar{grid-column:1/13;position:sticky;bottom:16px;z-index:5;margin-top:24px;display:flex;align-items:center;gap:12px;background:var(--paper);border:.5px solid var(--ink);padding:10px 12px;box-shadow:0 14px 30px -22px rgba(12,12,12,.5)}
.mixbar .mono:first-child{color:var(--mute);margin-inline-end:auto}
.mix-go{border:0;background:var(--ink);color:var(--paper);padding:12px 20px;cursor:pointer;letter-spacing:.12em}
.mix-clear{border:0;background:transparent;color:var(--mute);cursor:pointer}
.mix{position:relative;z-index:1;border-top:.5px solid rgba(12,12,12,.25)}
.mix .grid{padding-top:8vh;padding-bottom:10vh;row-gap:48px;align-items:start}
.mix-text{grid-column:1/8}.mix-skills{grid-column:8/13;grid-row:3/5}.mix-proof{grid-column:1/8}
.mix.in .pp-col{opacity:1;transform:none}
.mix-t p{font-size:19px;font-weight:300;line-height:1.75;margin:14px 0 0;max-width:34em}
.mix-wait{color:var(--mute)}
.mx{display:grid;grid-template-columns:1fr 34% 3em;gap:10px;align-items:center;padding:9px 0;border-bottom:.5px solid var(--hair);font-size:15px;font-weight:300}
.mx i{height:7px;background:linear-gradient(90deg,#c6ff3d,#4be38a);width:var(--w)}
.mx b{font-weight:300;font-size:10px;color:var(--mute);text-align:end}
@media(max-width:900px){.mix-text,.mix-skills,.mix-proof{grid-column:1/13;grid-row:auto}.mixbar{flex-wrap:wrap}}

/* drink prompt: readable */
.pq-dq{font-size:clamp(18px,1.4vw,22px);font-weight:300;border-top:.5px solid var(--ink);padding-top:10px}
/* cookie: quiet, one hairline */
.cookie{position:fixed;z-index:60;inset-inline-start:24px;bottom:24px;width:min(360px,calc(100vw - 32px));display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;background:var(--paper);border:.5px solid rgba(12,12,12,.35);padding:14px 16px;box-shadow:0 16px 36px -28px rgba(12,12,12,.4);opacity:0;translate:0 12px;transition:opacity .35s,translate .35s}
.cookie.on{opacity:1;translate:0 0}
.ck-svg{width:40px;height:40px;overflow:visible}
.ck-body{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.ck-chip{fill:var(--ink)}
.ck-crumb{fill:var(--ink);opacity:.45}
.cookie:hover .ck-chip{fill:var(--accent)}
.ck-k{font-size:12px;font-weight:300;color:var(--mute);margin-bottom:4px}
.cookie b{display:block;font-size:17px;font-weight:300;line-height:1.3;margin-bottom:6px}
.cookie p{margin:0 0 12px;font-size:14px;font-weight:300;line-height:1.55;color:rgba(12,12,12,.72)}
.ck-b{display:flex;gap:8px}
.ck-yes,.ck-no{font:300 14px 'Heebo',sans-serif;padding:7px 14px;cursor:pointer}
.ck-yes{border:.5px solid var(--ink);background:var(--ink);color:var(--paper)}
.ck-yes:hover{background:var(--accent);border-color:var(--accent)}
.ck-no{border:.5px solid rgba(12,12,12,.3);background:transparent;color:rgba(12,12,12,.75)}
.ck-no:hover{border-color:var(--ink)}
@media print{.cookie{display:none}}

.mixbar[hidden],.mix[hidden],.pp[hidden]{display:none!important}

/* Hebrew labels: the mono font has no Hebrew, so wide tracking made them unreadable */
html[lang=he] .mono{font-family:'JetBrains Mono','Heebo',monospace;letter-spacing:.02em;font-size:12px}
html[lang=he] .tm,html[lang=he] .t{letter-spacing:0}
html[lang=he] #flist li b,html[lang=he] .xpi{font-size:11px}
.v2-choose{padding-top:48px}
[data-v2] .pq{padding-top:0;border-top:.5px solid rgba(12,12,12,.25)}

/* brew: pour while the AI thinks */
.brew{position:relative;z-index:1;border-top:.5px solid rgba(12,12,12,.25)}
.brew .grid{padding-top:7vh;padding-bottom:6vh;row-gap:28px;align-items:start}
.brew .pp-a{grid-column:1/11}
.brew-opts{grid-column:1/13;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;transition:opacity .4s}
.brew-opts .cup svg{height:150px}
.brew-opts .cup span{font-size:20px;font-weight:200}
.brew-opts.chosen{display:none}
.brew-pour{display:none;height:340vh;position:relative}
.brew.pouring .brew-pour{display:block}
.brew.served .brew-pour{height:100vh}
.brew.served .hint{display:none}
.brew-foot{grid-column:1/13;display:flex;justify-content:space-between;align-items:center;border-top:.5px solid var(--hair);padding-top:12px}
.brew-foot .mono{color:var(--mute)}
@media(max-width:900px){.brew-opts{grid-template-columns:repeat(3,1fr);gap:8px}.brew-opts .cup svg{height:90px}}

/* drink tiles: always exactly 4 columns wide; only the height is fixed */
.opt{aspect-ratio:auto!important;max-height:none!important;height:clamp(260px,44vh,480px);width:100%}
@media(max-width:900px){.opt{height:auto}}

/* no shadows anywhere */
*,*::before,*::after{box-shadow:none!important}

/* skills: a strict two-column list on the grid, no floating boxes */
.pp-chips{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;padding-top:0}
.pp-chips span{border:0;border-bottom:.5px solid var(--hair);padding:12px 0;font-size:17px;font-weight:300;display:flex;align-items:baseline;gap:10px}
.pp-chips span::before{content:"";width:6px;height:6px;background:var(--ink);flex:none;transform:translateY(-2px)}
@media(max-width:900px){.pp-chips{grid-template-columns:1fr}}

/* phone: the top bar wraps instead of pushing the page sideways */
html,body{overflow-x:clip}
@media(max-width:900px){
  #hero .top{flex-wrap:wrap;gap:10px;align-items:center}
  #hero .top .tr{flex-wrap:wrap;gap:6px;width:100%;justify-content:flex-start}
  #hero .top .lang{margin:0;font-size:12px;padding:6px 9px}
  #hud .l{font-size:9px}
  #hud .r .lang{padding:4px 7px}
  .cred{margin-top:4vh}
  .hq1{font-size:clamp(40px,12vw,64px)}
}
@media(max-width:900px){
  #choose .opts.grid{display:flex!important;flex-direction:column;gap:10px;padding:0 18px!important}
  .opt{border:.5px solid rgba(12,12,12,.3)!important;height:auto}
}

/* drink tiles: the drawing gives way to the real cup, with a stain of the drink's colour */
.opt-art{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.opt-art svg{position:relative;z-index:1;transition:opacity .45s}
.opt-art .real{position:absolute;z-index:2;height:86%;width:auto;max-width:80%;object-fit:contain;opacity:0;transform:translateY(6px) scale(.98);transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.opt-art .stain{position:absolute;z-index:0;width:62%;aspect-ratio:1;border-radius:46% 54% 58% 42%/52% 44% 56% 48%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 55%,transparent),color-mix(in srgb,var(--c) 18%,transparent) 62%,transparent 74%);filter:blur(6px);opacity:0;transform:scale(.6) rotate(-8deg);transition:opacity .5s,transform .8s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.opt:hover .stain,.opt:focus-visible .stain{opacity:1;transform:scale(1) rotate(0)}
.opt.has-real:hover svg,.opt.has-real:focus-visible svg{opacity:0}
.opt.has-real:hover .real,.opt.has-real:focus-visible .real{opacity:1;transform:none}
.opt .opt-art svg{height:100%;width:100%;padding:12px}
.opt-art .stain{width:82%;filter:blur(1.5px);background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 78%,transparent),color-mix(in srgb,var(--c) 46%,transparent) 58%,transparent 71%);transform:scale(.5) translate(4%,6%)}
.opt:hover .stain,.opt:focus-visible .stain,.opt.force .stain{transform:scale(1) translate(4%,6%)}
/* stage labels: legible in both scripts */
#stage-svg .tm{font:300 12px 'JetBrains Mono',monospace;fill:rgba(12,12,12,.62)}
html[lang=he] #stage-svg .tm{font:300 13px 'Heebo',sans-serif;fill:rgba(12,12,12,.62);letter-spacing:0}
html[lang=he] #stage-svg .th{font-size:16px}
.tile-steam{opacity:0;transition:opacity .5s}.opt.steam .tile-steam{opacity:.9}
.opt-art svg{position:relative;z-index:1}
/* taste profile: one quiet row per trait */
#stage-svg .ph{font:300 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;fill:rgba(12,12,12,.55)}
#stage-svg .pn{font:300 10px 'JetBrains Mono',monospace;letter-spacing:.08em;fill:rgba(12,12,12,.4)}
#stage-svg .pv{font:300 15px 'Heebo',sans-serif;fill:var(--ink)}
#stage-svg .pt{font:300 10px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;fill:rgba(12,12,12,.45)}
html[lang=he] #stage-svg .ph{font:300 13px 'Heebo',sans-serif;letter-spacing:0;text-transform:none}
html[lang=he] #stage-svg .pt{font:200 13px 'Heebo',sans-serif;letter-spacing:0;text-transform:none;fill:rgba(12,12,12,.5)}

/* taste profile on the page grid */
#stage{position:sticky}
#stage .tp{position:absolute;inset:0;top:calc(48px + 6vh);bottom:auto;width:100%;pointer-events:none;align-items:start}
.tp-in{grid-column:1/5;display:grid;grid-template-columns:subgrid}
html[lang=he] .tp-in{grid-column:-5/-1}
.tp-h{grid-column:1/-1;font:300 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(12,12,12,.55);padding-bottom:12px;border-bottom:.5px solid var(--ink)}
.tp-r{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:baseline;padding:11px 0 10px;border-bottom:.5px solid var(--hair);opacity:0;transition:opacity .6s}
.tp-v{grid-column:1/4;font:300 17px/1.2 'Heebo',sans-serif;color:var(--ink)}
.tp-k{grid-column:4/5;font:300 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(12,12,12,.45);white-space:nowrap}
html[lang=he] .tp-h{font:300 14px 'Heebo',sans-serif;letter-spacing:0;text-transform:none}
html[lang=he] .tp-k{font:200 14px 'Heebo',sans-serif;letter-spacing:0;text-transform:none;color:rgba(12,12,12,.5)}
@media(max-width:900px){#stage .tp{display:none}}
/* Hebrew profile sits on the left of the stage, so it reads flush-left */
html[lang=he] .tp-in{direction:ltr}
html[lang=he] .tp-h,html[lang=he] .tp-v,html[lang=he] .tp-k{direction:rtl;text-align:left}
#stage .tp{grid-template-columns:repeat(12,minmax(0,1fr))}
.tp-v{grid-column:1/3}.tp-k{grid-column:3/5}
.tp-k{text-align:right!important}
#stage-svg .ck-prop{cursor:pointer;outline:none}
#stage-svg .ck-prop:hover path{stroke-width:1.4}
/* ── ALTA case study ── */
.al-hero{padding:14vh 0 10vh;border-bottom:.5px solid var(--hair)}
.al-hero .grid,.al-part .grid,.al-close .grid{row-gap:0}
.al-t{grid-column:1/-1;font-weight:100;font-size:clamp(72px,12vw,200px);letter-spacing:-.05em;line-height:.9;margin:18px 0 28px}
.al-anchor{grid-column:1/10;font-weight:200;font-size:clamp(26px,3vw,46px);line-height:1.18;letter-spacing:-.02em;margin:0 0 26px}
.al-lead{grid-column:1/8;font-weight:300;font-size:19px;line-height:1.65;margin:0 0 40px;color:rgba(12,12,12,.78)}
.al-hero .cs-meta{grid-column:1/-1}
.al-part{padding:12vh 0 8vh;border-bottom:.5px solid var(--hair)}
.al-k{grid-column:1/-1;display:flex;gap:18px;color:var(--mute);margin-bottom:18px}
.al-k span:first-child{color:var(--ink)}
.al-h{grid-column:1/10;font-weight:100;font-size:clamp(34px,4.4vw,70px);letter-spacing:-.035em;line-height:1.05;margin:0 0 30px}
.al-body{grid-column:1/8}
.al-body p{font-weight:300;font-size:18px;line-height:1.7;margin:0 0 18px}
.al-rows,.al-stat{grid-column:1/-1;margin-top:20px;border-top:.5px solid var(--ink)}
.al-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:20px 0;border-bottom:.5px solid var(--hair)}
.al-row h3{grid-column:1/6;margin:0;font-weight:300;font-size:22px;letter-spacing:-.01em;line-height:1.3}
.al-row p{grid-column:6/13;margin:0;font-weight:300;font-size:17px;line-height:1.65;color:rgba(12,12,12,.78)}
.al-st{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:16px 0;border-bottom:.5px solid var(--hair)}
.al-st span{grid-column:1/4;color:var(--ink);padding-top:4px}.al-st p{grid-column:4/13;margin:0;font-weight:300;font-size:17px;line-height:1.6}
.al-q{grid-column:1/10;margin:48px 0 40px;font-weight:200;font-size:clamp(24px,2.6vw,40px);line-height:1.25;letter-spacing:-.02em}
.al-q::before{content:'';display:block;width:48px;border-top:1px solid var(--ink);margin-bottom:20px}
.al-close{padding:16vh 0 14vh}
@media(max-width:900px){.al-anchor,.al-lead,.al-h,.al-body,.al-q{grid-column:1/-1}.al-row h3,.al-row p,.al-st span,.al-st p{grid-column:1/-1}.al-row p,.al-st p{margin-top:8px}}

/* signature: the interface adapts, the system holds */
.sg{grid-column:1/-1;margin:36px 0 8px;border-top:.5px solid var(--ink);padding-top:22px}
.sg-sw{display:inline-flex;border:.5px solid var(--ink)}
.sg-sw button{all:unset;cursor:pointer;padding:10px 18px;font:300 15px 'Heebo',sans-serif}
.sg-sw button[aria-checked=true]{background:var(--ink);color:var(--paper)}
.sg-sw button:focus-visible{outline:.5px solid var(--ink);outline-offset:3px}
.sg-stage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:28px;align-items:start}
.sg-phone{grid-column:4/8;justify-self:center;width:100%;max-width:340px;height:600px;border:1px solid var(--ink);background:#fbfbf9;display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s}
.sg-bar{display:flex;justify-content:space-between;padding:10px 16px;border-bottom:.5px solid var(--hair);color:var(--mute)}
.sg-scr{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;font-weight:300;position:relative}
.sg-side{grid-column:9/13;display:flex;flex-direction:column;gap:8px;padding-top:6px;min-height:120px}
.sg-sl{color:var(--mute);margin-bottom:4px;line-height:1.6;text-transform:none;letter-spacing:.02em}
.sg-try{all:unset;cursor:pointer;align-self:flex-start;border:.5px solid var(--ink);padding:8px 12px;font:300 15px 'Heebo',sans-serif;transition:background .2s}
.sg-try:hover,.sg-try:focus-visible{background:#c6ff3d}
.sg-causes{margin:0 0 10px;padding-inline-start:18px;font-weight:300;font-size:15px;line-height:1.6}
.blk.in{animation:sgin .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes sgin{from{opacity:0;transform:translateY(8px)}}
.sg-h span{display:block;color:var(--mute)}.sg-h b{font-weight:200;font-size:26px;letter-spacing:-.02em}
.sg-sec{color:var(--mute);margin-top:6px}
.sg-card{all:unset;box-sizing:border-box;display:grid;gap:2px;width:100%;padding:12px 14px;border:.5px solid rgba(12,12,12,.35);background:var(--paper);position:relative}
button.sg-card{cursor:pointer}button.sg-card:hover,button.sg-card:focus-visible{border-color:var(--ink);background:#fff}
.sg-card span.mono{color:var(--mute)}.sg-card b{font-weight:400;font-size:15px}.sg-card .tm{font-size:20px;font-weight:200}
.sg-card s,.sg-prev s{color:rgba(12,12,12,.4)}.sg-card em{font-style:normal;font-size:13px;color:#b23a2a;margin-inline-start:6px}
.sg-card.x::after{content:'';position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - .5px),#b23a2a calc(50% - .5px),#b23a2a calc(50% + .5px),transparent calc(50% + .5px));opacity:.7}
.sg-nav{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);border-top:.5px solid var(--hair);padding-top:8px}
.sg-nav button{all:unset;text-align:center;font:300 13px 'Heebo',sans-serif;padding:8px 0;cursor:pointer;color:var(--mute)}.sg-nav button.on{color:var(--ink)}.sg-nav button:disabled{opacity:.4;cursor:default}
.sg-top{display:flex;align-items:baseline;gap:10px;padding-bottom:6px;border-bottom:.5px solid var(--hair)}.sg-top b{font-weight:400}.sg-top .mono{margin-inline-start:auto;color:var(--mute)}
.sg-back{all:unset;cursor:pointer;padding:0 6px}
.sg-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.sg-acts button,.sg-chips button{all:unset;cursor:pointer;border:.5px solid var(--ink);padding:8px 12px;font:300 14px 'Heebo',sans-serif}
.sg-acts button.pri{background:var(--ink);color:var(--paper)}.sg-acts button:disabled{opacity:.3;cursor:default}
.sg-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.sg-chips button.on{background:var(--ink);color:var(--paper)}
.sg-chips.sm button{padding:5px 9px;font-size:13px}.sg-chips.sm .mono{color:var(--mute);width:100%}
.hint{background:linear-gradient(#c6ff3d,#c6ff3d) 0 100%/100% 2px no-repeat}
.sg-perm{color:var(--mute)}
.sg-scope label{display:flex;gap:8px;align-items:center;font-size:14px;padding:4px 0}.sg-scope label.off{color:var(--mute)}.sg-scope .mono{font-size:9px}
.sg-aud{font-size:14px;color:var(--mute)}.sg-aud .on,.sg-aud.on{color:var(--ink)}
.sg-ask{display:grid;gap:10px;padding:10px 0 4px}.sg-ask .mono{color:var(--mute)}
.sg-ask form{display:flex;border-bottom:1px solid var(--ink)}.sg-ask input{all:unset;flex:1;font:200 22px 'Heebo',sans-serif;padding:6px 0}.sg-ask form button{all:unset;cursor:pointer;padding:0 6px;font-size:18px}
.sg-sugs{display:flex;flex-direction:column;gap:6px}.sg-sugs button{all:unset;cursor:pointer;border:.5px solid rgba(12,12,12,.35);padding:10px 12px;font:300 15px 'Heebo',sans-serif}.sg-sugs button:hover,.sg-sugs button:focus-visible{border-color:var(--ink);background:#fff}
.sg-note{color:var(--mute);margin-top:auto}
.sg-said{font-weight:200;font-size:19px;color:rgba(12,12,12,.6)}
.sg-msg{font-size:15px;line-height:1.5}.sg-msg.ok{padding-inline-start:10px;border-inline-start:2px solid #c6ff3d}
.sg-prev{display:grid;gap:4px;padding:14px;border:1px solid var(--ink);background:#fff}.sg-prev span.mono{color:var(--mute)}.sg-prev b{font-weight:400}.sg-prev .tm{font-size:22px;font-weight:200}.sg-prev p{margin:0;font-size:13px}
.sg-prev.rep{opacity:.45;border-style:dashed;background:transparent}.sg-prev.rep .mono{color:#b23a2a}
.sg-week{display:grid;border-top:.5px solid var(--ink)}.sg-week div{display:grid;grid-template-columns:3.2em 1fr auto;gap:8px;padding:8px 0;border-bottom:.5px solid var(--hair);font-size:14px}.sg-week .tm{font-weight:300}
.sg-chat{display:flex;flex-direction:column;gap:8px}.sg-bub{margin:0;max-width:80%;padding:8px 12px;background:#ececE8;font-size:14px;align-self:flex-end;animation:sgin .3s both}.sg-bub.ai{align-self:flex-start;background:#fff;border:.5px solid rgba(12,12,12,.3)}
.sg-floor{display:grid;grid-template-columns:repeat(5,1fr);margin-top:26px;border-top:.5px solid var(--ink);transition:margin .45s}
.sg-tile{padding:12px 12px 14px;border-inline-start:.5px solid var(--hair);transition:background .5s}.sg-tile:first-child{border-inline-start:0;padding-inline-start:0}
.sg-tile b{display:block;font-weight:300;font-size:15px}.sg-tile span{display:block;color:var(--mute);margin-top:4px}
.sg-tile.on{animation:sgon 1s ease-out}
@keyframes sgon{0%{background:#c6ff3d}100%{background:transparent}}
.sg-tr{display:none;margin-top:14px;gap:6px;flex-direction:column}.sg-tr em{display:block;height:6px;background:rgba(12,12,12,.08)}
.sg-tile.u-a .sg-tr em.a{background:var(--ink)}.sg-tile.u-b .sg-tr em.b{background:#c6ff3d;outline:.5px solid #6aa51b}
.sg-legend{display:none;gap:20px;margin-top:10px;color:var(--mute)}.sg-legend span::before{content:'';display:inline-block;width:18px;height:6px;margin-inline-end:8px;vertical-align:middle;background:var(--ink)}.sg-legend .b::before{background:#c6ff3d;outline:.5px solid #6aa51b}
.sg.under .sg-phone{transform:translateY(-14px);opacity:.28}
.sg.under .sg-tr,.sg.under .sg-legend{display:flex}
.sg.under .sg-floor{margin-top:10px}
.sg-foot{display:flex;align-items:baseline;gap:24px;margin-top:22px;flex-wrap:wrap}
.sg-under{all:unset;cursor:pointer;border-bottom:.5px solid var(--ink);padding-bottom:2px}
.sg-cap{margin:0;font-weight:200;font-size:clamp(20px,2vw,30px);letter-spacing:-.015em;opacity:0;transition:opacity .5s}
.sg.under .sg-cap{opacity:1}
.sg-honest{margin:26px 0 0;color:var(--ink);text-transform:none;letter-spacing:.02em;max-width:72ch;line-height:1.7}
.sg-disc{margin:6px 0 0;color:var(--mute);text-transform:none;letter-spacing:.02em}
@media(max-width:900px){.sg-phone,.sg-side{grid-column:1/-1}.sg-phone{height:560px}.sg-side{margin-top:16px}.sg-floor{grid-template-columns:1fr 1fr}.sg-tile:nth-child(odd){border-inline-start:0;padding-inline-start:0}}
@media(prefers-reduced-motion:reduce){.blk.in,.sg-bub{animation:none}.sg-phone{transition:none}.sg-tile.on{animation:none;background:rgba(198,255,61,.35)}}
.sg-tile{display:flex;flex-direction:column}.sg.under .sg-tr{display:flex;margin-top:auto;padding-top:14px}
/* Seamless UI canvas: persistent training objects, recomposed per request */
.sg-scr.ai{padding:14px 14px 0;gap:8px;overflow:hidden}
.sg-intent{min-height:44px}
.sg-form{display:flex;border-bottom:1px solid var(--ink)}.sg-form input{all:unset;flex:1;font:200 20px 'Heebo',sans-serif;padding:6px 0}.sg-form button{all:unset;cursor:pointer;padding:0 6px;font-size:18px}
.sg-said{display:flex;align-items:baseline;gap:8px;font:200 18px/1.3 'Heebo',sans-serif;color:rgba(12,12,12,.62);border-bottom:.5px solid var(--hair);padding:4px 0 8px;animation:sgin .3s both}
.sg-said span{flex:1}.sg-said button{all:unset;cursor:pointer;color:var(--mute);font-size:18px;padding:0 4px}
.sg-sugs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.sg-sugs button{all:unset;cursor:pointer;border:.5px solid rgba(12,12,12,.35);padding:7px 10px;font:300 13px 'Heebo',sans-serif;background:#fff}
.sg-sugs button:hover,.sg-sugs button:focus-visible{border-color:var(--ink);background:#c6ff3d}
.sg-lab{color:var(--mute);min-height:14px;text-transform:none;letter-spacing:.02em}
.sg-cv{position:relative;flex:1;margin:0 0 4px}
.sg-axis{position:absolute;left:0;right:0;top:0;height:100%;opacity:0;transition:opacity .35s,height .45s cubic-bezier(.2,.8,.2,1)}
.sg-axis i{position:absolute;left:0;right:0;top:calc(var(--y)*100%);border-top:.5px solid var(--hair)}
.sg-axis span{position:absolute;top:-7px;left:0;font:300 9px 'JetBrains Mono',monospace;color:var(--mute);background:#fbfbf9;padding-right:4px}
.sg-days{position:absolute;top:-16px;left:34px;right:0;height:12px;opacity:0;transition:opacity .35s}
.sg-days span{position:absolute;left:calc(var(--i)*20%);width:20%;text-align:center;font-size:9px;color:var(--mute)}
.sg-scr[data-lay=week] .sg-axis,.sg-scr[data-lay=day] .sg-axis,.sg-scr[data-lay=week] .sg-days{opacity:1}
.sg-blk{all:unset;box-sizing:border-box;position:absolute;left:0;top:0;padding:8px 10px;background:var(--paper);border:.5px solid rgba(12,12,12,.4);overflow:hidden;display:grid;align-content:start;gap:1px;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),width .55s cubic-bezier(.2,.8,.2,1),height .55s cubic-bezier(.2,.8,.2,1),opacity .35s,background .3s,border-color .3s}
.sg-blk b{font-weight:400;font-size:14px;white-space:nowrap}.sg-blk .mono{color:var(--mute);font-size:9px}.sg-blk .tm{font:200 18px 'Heebo',sans-serif}.sg-blk .tm s{color:rgba(12,12,12,.4);margin-right:4px}
.sg-blk .sh{display:none}
.sg-scr[data-lay=week] .sg-blk{padding:4px 5px}.sg-scr[data-lay=week] .sg-blk b,.sg-scr[data-lay=week] .sg-blk>.mono:not(.sh){display:none}
.sg-scr[data-lay=week] .sg-blk .sh{display:block;color:var(--ink);font-size:9px}.sg-scr[data-lay=week] .sg-blk .tm{font-size:11px;font-weight:300}
.sg-scr[data-lay=week] .sg-blk .tm s{display:block;margin:0}
.sg-blk.pick{cursor:pointer;border-color:var(--ink)}.sg-blk.pick:hover,.sg-blk.pick:focus-visible{background:#c6ff3d}
.sg-blk.sel{border:1px solid var(--ink);background:#fff;z-index:2}
.sg-blk.x{color:rgba(12,12,12,.45)}
.sg-blk::after{content:'';position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - .6px),#b23a2a calc(50% - .6px),#b23a2a calc(50% + .6px),transparent calc(50% + .6px));clip-path:inset(0 100% 0 0);transition:clip-path .7s cubic-bezier(.2,.8,.2,1)}
.sg-blk.striking::after{clip-path:inset(0 0 0 0);opacity:.5}.sg-blk.x::after{clip-path:inset(0 0 0 0);opacity:.75}
.sg-blk.flash{animation:sgon 1s ease-out}
.sg-slot{all:unset;box-sizing:border-box;position:absolute;left:0;top:0;border:1px dashed rgba(12,12,12,.45);cursor:pointer;transition:opacity .3s,transform .55s cubic-bezier(.2,.8,.2,1);display:flex;align-items:center;padding:0 10px}
.sg-slot span{color:var(--mute)}.sg-slot:hover,.sg-slot:focus-visible{background:rgba(198,255,61,.45);border-style:solid}
.sg-orig{position:absolute;left:0;top:0;border:.5px dashed rgba(12,12,12,.35);opacity:0;transition:opacity .35s;padding:6px 10px;pointer-events:none}
.sg-orig span{color:rgba(12,12,12,.4);text-decoration:line-through}
.sg-sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--ink);padding:14px 16px 16px;transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);display:grid;gap:6px;z-index:5}
.sg-sheet.up{transform:none}
.sg-sheet p{margin:0;font-size:13px;line-height:1.45}.sg-fam{font-size:15px!important}.sg-ok{font-size:15px!important;padding-left:10px;border-left:2px solid #c6ff3d}
.sg-diff{display:flex;align-items:baseline;gap:10px;font:200 26px 'Heebo',sans-serif}.sg-diff s{color:rgba(12,12,12,.4)}.sg-diff span{font-size:16px;color:var(--mute)}.sg-diff b{font-weight:300}
.sg-rep{color:#b23a2a;font-size:10px!important;animation:sgin .3s both}
.sg-phone{position:relative;overflow:hidden}
@media(prefers-reduced-motion:reduce){.sg-blk,.sg-slot,.sg-sheet,.sg-axis,.sg-days{transition:none}.sg-blk::after{transition:none}}
.sg-cv{margin-top:16px}
.sg-blk.tight{display:flex;align-items:center;gap:8px;padding:0 10px}.sg-blk.tight>.mono:not(.sh){display:none}.sg-blk.tight .tm{margin-left:auto;font-size:15px}.sg-blk.tight b{font-size:13px}
.sg-orig{display:flex;align-items:center}
.sg-blk.pv{background:#fff;border-color:var(--ink)}.sg-blk.pv .tm{font-weight:400}

/* ALTA · one change, three people */
.x3{grid-column:1/-1;margin:34px 0 0;border-top:.5px solid var(--ink);padding-top:18px}
.x3-ev{color:var(--mute);margin:0 0 18px}
.x3-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.x3-ph{border:1px solid var(--ink);background:#fbfbf9;min-height:400px;display:flex;flex-direction:column}
.x3-ph header{display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px;border-bottom:.5px solid var(--hair)}.x3-ph header b{font-weight:400}.x3-ph header .mono{color:var(--mute)}
.x3-scr{padding:14px;display:flex;flex-direction:column;gap:10px;flex:1}
.x3-scr.hit{animation:sgon 1s ease-out}
.x3-card{display:grid;gap:2px;padding:12px 14px;border:.5px solid rgba(12,12,12,.35);background:var(--paper)}.x3-card .mono{color:var(--mute)}.x3-card b{font-weight:400;font-size:15px}.x3-card .tm{font:200 22px 'Heebo',sans-serif}.x3-card s{color:rgba(12,12,12,.4)}
.x3-card.upd{border-color:var(--ink)}
.x3-opt{display:flex;justify-content:space-between;align-items:baseline;border-bottom:.5px solid var(--hair);padding:6px 0}.x3-opt .mono{color:var(--mute)}.x3-opt b{font-weight:400}
.x3-line{margin:0;font-weight:300;font-size:14px;line-height:1.5;color:rgba(12,12,12,.72)}.x3-line.strong{color:var(--ink)}.x3-line.quiet{color:var(--mute)}
.x3-sec{color:var(--mute);margin:0}
.x3-btn{all:unset;cursor:pointer;margin-top:auto;align-self:flex-start;background:var(--ink);color:var(--paper);padding:10px 14px;font:300 14px 'Heebo',sans-serif}.x3-btn.ghost{background:none;color:var(--mute);border-bottom:.5px solid var(--mute);padding:4px 0}
.x3-btn:focus-visible,.x3-ans button:focus-visible{outline:.5px solid var(--ink);outline-offset:3px}
.x3-push{padding:10px 12px;background:#fff;border:1px solid var(--ink);display:grid;gap:2px;animation:sgin .4s both}.x3-push .mono{color:var(--mute)}.x3-push b{font-weight:400;font-size:14px}
.x3-ans{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.x3-ans button{all:unset;cursor:pointer;text-align:center;border:.5px solid var(--ink);padding:9px 0;font:300 13px 'Heebo',sans-serif}.x3-ans button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.x3-roster{margin-top:auto;display:grid;gap:3px;border-top:.5px solid var(--hair);padding-top:10px}.x3-roster .mono{color:var(--mute)}.x3-roster b{font-weight:400}
.x3-end{margin:26px 0 0;font-weight:200;font-size:clamp(20px,2.2vw,32px);letter-spacing:-.015em;line-height:1.3;max-width:34ch}
@media(max-width:900px){.x3-row{grid-template-columns:repeat(3,82%);overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:6px}.x3-ph{scroll-snap-align:start;min-height:380px}}

/* ALTA · your call */
.xs{grid-column:1/-1;margin:34px 0 0;border-top:.5px solid var(--ink);padding-top:18px}
.xs-intro{max-width:62ch;font-weight:300;font-size:18px;line-height:1.6;margin:0 0 24px}
.xs-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.xs-c{border:.5px solid rgba(12,12,12,.35);padding:16px;display:flex;flex-direction:column;gap:14px;background:#fbfbf9;transition:border-color .3s}
.xs-c.decided{border-color:var(--ink)}
.xs-h{display:grid;gap:6px}.xs-h .mono{color:var(--mute)}.xs-h b{font-weight:300;font-size:22px;letter-spacing:-.01em;line-height:1.2}
.xs-sig{list-style:none;margin:0;padding:0;display:grid;gap:4px}.xs-sig li{font:300 11px 'JetBrains Mono',monospace;letter-spacing:.04em}.xs-sig li::before{content:'✓ ';color:#1a9a52}
.xs-c.looked .xs-sig li{color:var(--mute)}
.xs-act{display:flex;flex-wrap:wrap;gap:6px}.xs-act button{all:unset;cursor:pointer;border:.5px solid var(--ink);padding:8px 11px;font:300 14px 'Heebo',sans-serif}.xs-act button[data-x=look]{border-style:dashed}
.xs-act button:disabled{opacity:.3;cursor:default}.xs-act button:focus-visible{outline:.5px solid var(--ink);outline-offset:3px}
.xs-out{display:grid;gap:10px;animation:sgin .35s both}.xs-out p{margin:0}
.xs-closer{font-weight:300;font-size:16px;line-height:1.55}
.xs-you{color:var(--mute);text-transform:none;letter-spacing:.02em}.xs-c.shipped .xs-you{color:#b23a2a}
.xs-did{font-weight:300;font-size:15px;display:grid;gap:2px}.xs-did .mono{color:var(--mute)}
.xs-rule{font-weight:200;font-size:22px;letter-spacing:-.01em;line-height:1.25;background:linear-gradient(transparent 60%,#c6ff3d 60%);justify-self:start}
.xs-end{margin:28px 0 0;font-weight:200;font-size:clamp(20px,2.2vw,32px);letter-spacing:-.015em;opacity:.25;transition:opacity .5s}.xs-end.on{opacity:1}
@media(max-width:900px){.xs-list{grid-template-columns:1fr}}

/* ALTA · the People screen, round by round (real anatomy when shipped; earlier stops illustrate the documented critiques) */
.pe{grid-column:1/-1;margin:10px 0 34px;border-top:.5px solid var(--ink);padding-top:18px}
.pe-tabs{display:flex;flex-wrap:wrap;border-bottom:.5px solid var(--hair)}
.pe-tabs button{all:unset;cursor:pointer;padding:10px 16px 10px 0;margin-inline-end:16px;font:300 15px 'Heebo',sans-serif;color:var(--mute);border-bottom:1px solid transparent;margin-bottom:-.5px}
.pe-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink)}.pe-tabs button:focus-visible{outline:.5px solid var(--ink);outline-offset:3px}
.pe-stage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:24px;align-items:start}
.pe-ph{grid-column:1/6;border:1px solid var(--ink);padding:14px;position:relative;min-height:520px;overflow:hidden}
.pe-txt{grid-column:7/13;padding-top:6px}
.pe-note{margin:0 0 20px;font-weight:200;font-size:clamp(24px,2.6vw,40px);line-height:1.2;letter-spacing:-.02em;min-height:1.2em}.pe-note.q{font-weight:300}.pe-note.in{animation:sgin .35s both}
.pe-cut{display:grid;gap:4px;margin:0 0 20px;font-weight:300;font-size:17px;line-height:1.55}.pe-cut .mono{color:var(--mute)}
.pe-rule{margin:0;font-weight:200;font-size:22px;opacity:0;transition:opacity .4s;background:linear-gradient(transparent 60%,#c6ff3d 60%);display:inline}
.pe[data-s="3"] .pe-rule,.pe[data-s="4"] .pe-rule{opacity:1}
/* phone content, real tokens */
.pe-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}.pe-head div{flex:1;display:grid}.pe-head b{font:300 22px/1.15 'Heebo'}.pe-head div span{font:400 13px 'Assistant';color:var(--mut)}
.pe-assign{font:600 13px 'Assistant';border:1px solid var(--tape);background:#fff;padding:6px 10px;border-radius:999px!important}
.pe-plus{font-style:normal;width:32px;height:32px;border-radius:50%!important;background:var(--ink);color:var(--chalk);display:grid;place-items:center;font-size:18px;transition:opacity .4s}
.pe-bar{display:grid;gap:8px;margin-bottom:10px;transition:opacity .4s}
.pe-search{height:36px;border-bottom:1px solid rgba(220,217,208,.6);font:400 15px 'Assistant';color:var(--mut);display:flex;align-items:center}
.pe-tracks{display:grid;grid-template-columns:repeat(3,1fr)}.pe-tracks span{font:600 12px 'Assistant';padding:6px 0;text-align:center;color:var(--mut);border-bottom:2px solid transparent}.pe-tracks span.on{color:var(--ink);border-bottom-color:var(--c)}
.pe-tog{display:flex;gap:14px;font:500 13px 'Assistant';color:var(--mut)}.pe-tog b{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.pe-list{background:#fff;border:1px solid rgba(220,217,208,.7);border-radius:14px!important;overflow:hidden;transition:all .45s}
.pe-r{display:flex;align-items:center;gap:12px;padding:12px;border-top:1px solid rgba(220,217,208,.5);transition:all .45s cubic-bezier(.2,.8,.2,1)}.pe-r:first-child{border-top:0}
.pe-av{width:40px;height:40px;flex:none;border-radius:50%!important;background:var(--mat-s);color:var(--mat);display:grid;place-items:center;font:600 15px 'Assistant';transition:all .4s}
.pe-main{flex:1;min-width:0;display:grid;gap:2px}
.pe-l1{display:flex;gap:8px;align-items:baseline}.pe-l1 b{font:600 16px 'Assistant'}.pe-l1 span{font:400 14px 'Assistant';color:var(--mut)}
.pe-l2{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font:400 13px 'Assistant';color:var(--mut)}.pe-l2>b{color:var(--mat);font-weight:600}
.pe-trk{font:400 12px 'Assistant';background:#EEEDEA;color:#5C5850;padding:1px 7px;border-radius:6px!important;letter-spacing:.02em}
.pe-meta{display:none;width:100%;font-size:12px}
.pe-fl{display:none;font:600 13px 'Assistant';color:var(--warn)}
.pe-ctl{display:none;gap:5px;align-items:center}.pe-ctl i{font-style:normal;display:grid;place-items:center;height:22px;border:1.5px solid var(--ink);font:600 10px 'Assistant';border-radius:4px!important}
.pe-ctl .sw{width:30px;border-radius:999px!important}.pe-ctl .dd{width:26px}.pe-ctl .cb{width:18px}.pe-ctl .sv{padding:0 6px;background:var(--ink);color:#fff}.pe-ctl .ok{border:0;color:var(--ok);font-size:14px}
.pe-chev{color:rgba(91,91,99,.5);font-size:18px}
.pe-fab{position:absolute;right:20px;bottom:20px;font-style:normal;width:56px;height:56px;border-radius:50%!important;background:var(--ink);color:var(--chalk);display:grid;place-items:center;font-size:30px;transition:all .45s cubic-bezier(.2,.8,.2,1)}
/* first version: four kinds of controls and a confirmation on every row, heavy cards, details everywhere */
.pe[data-s="0"] .pe-ctl,.pe[data-s="1"] .pe-ctl,.pe[data-s="2"] .pe-ctl,.pe[data-s="3"] .pe-ctl{display:flex}
.pe[data-s="0"] .pe-meta,.pe[data-s="1"] .pe-meta{display:block}
.pe[data-s="0"] .pe-bar,.pe[data-s="1"] .pe-bar,.pe[data-s="2"] .pe-bar,.pe[data-s="3"] .pe-bar,.pe[data-s="0"] .pe-plus,.pe[data-s="1"] .pe-plus,.pe[data-s="2"] .pe-plus,.pe[data-s="3"] .pe-plus,.pe[data-s="4"] .pe-fab{opacity:0;pointer-events:none}
.pe[data-s="0"] .pe-bar,.pe[data-s="1"] .pe-bar,.pe[data-s="2"] .pe-bar,.pe[data-s="3"] .pe-bar{height:0;margin:0;overflow:hidden}
.pe[data-s="0"] .pe-list{background:none;border:0;display:grid;gap:8px}.pe[data-s="0"] .pe-r{background:#fff;border:2px solid var(--ink);border-radius:8px!important;padding:8px}
.pe[data-s="0"] .pe-av{background:var(--ink);color:#fff;border-radius:6px!important}.pe[data-s="0"] .pe-l1 b{font-weight:700}
.pe[data-s="0"] .pe-r,.pe[data-s="1"] .pe-r{padding-top:7px;padding-bottom:7px}
.pe[data-s="3"] .pe-fab{width:36px;height:36px;font-size:20px}
.pe[data-s="4"] .pe-r.flag .pe-fl{display:block}.pe[data-s="4"] .pe-r{padding:14px 12px}
@media(max-width:900px){.pe-ph,.pe-txt{grid-column:1/-1}.pe-txt{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.pe-r,.pe-fab,.pe-list,.pe-av{transition:none}}

/* ALTA product skin: real ALTA design (origin/main tokens) inside the phones only. The page stays in the portfolio language. */
.ak{--ink:#17171C;--mut:#5B5B63;--chalk:#F2F0EA;--tape:#DCD9D0;--adr:#E63946;--adr-s:#FBE7E9;--warn:#B9770E;--warn-s:#FBF0DC;--ok:#178A5C;--mat:#2B4C7E;--mat-s:#EAF0F7;--maroon:#7C1626;
  background:var(--chalk)!important;color:var(--ink);font:400 16px/1.5 'Assistant','Heebo',sans-serif;font-variant-numeric:tabular-nums}
.ak .mono{font-family:'Assistant',sans-serif;letter-spacing:0;text-transform:none}
.ak-head{display:flex;align-items:center;gap:8px;padding:2px 0 6px}.ak-tile{width:28px;height:28px;border-radius:6px;background:var(--ink);color:#fff;font:700 9px 'Assistant';display:grid;place-items:center}.ak-head b{font:600 14px 'Assistant'}
.ak-hi{font:300 22px/1.15 'Heebo';margin:2px 0 4px}
.ak-eye{font:600 13px 'Assistant';color:var(--mut)}
.ak-card{all:unset;box-sizing:border-box;display:block;width:100%;background:#fff;border:1px solid rgba(220,217,208,.7);border-radius:14px;padding:16px;position:relative;overflow:hidden;text-align:start}
button.ak-card{cursor:pointer}button.ak-card:hover,button.ak-card:focus-visible{border-color:var(--ink)}
.ak-ban{margin:-16px -16px 12px;padding:8px 16px;background:#fff;border-bottom:1px solid rgba(220,217,208,.7);font:600 14px 'Assistant';color:var(--maroon)}
.ak-top{display:flex;align-items:center;gap:8px}.ak-lvl{font:600 12px 'Assistant';padding:2px 8px;border-radius:6px;background:#E4F2EC;color:#1F6B57}
.ak-pill{margin-inline-start:auto;font:300 13px 'Heebo';padding:3px 8px;border-radius:999px}.ak-pill.mv{background:var(--warn-s);color:var(--warn)}.ak-pill.x{background:var(--adr-s);color:var(--adr)}
.ak-hrs{display:flex;align-items:baseline;gap:6px;margin-top:8px;direction:ltr}.ak-hrs b{font:300 30.4px/1 'Heebo'}.ak-hrs i{font:300 20.8px 'Heebo';color:rgba(91,91,99,.4);font-style:normal}.ak-hrs span{font:300 30.4px/1 'Heebo';color:var(--mut)}
.ak-ven{margin-inline-start:auto;font:400 14px 'Assistant'!important;color:var(--mut)!important;display:flex;align-items:center;gap:4px}.ak-ven svg{width:15px;height:15px}
.ak-card.x{background:rgba(220,217,208,.2)}.ak-card.x .ak-hrs b,.ak-card.x .ak-hrs span{color:var(--mut);text-decoration:line-through;text-decoration-color:rgba(91,91,99,.5);text-decoration-thickness:1px}
.ak-btn{all:unset;box-sizing:border-box;cursor:pointer;height:44px;padding:0 18px;border-radius:10px;background:var(--ink);color:var(--chalk);font:600 15px 'Assistant';display:inline-flex;align-items:center;justify-content:center}
.ak-btn.block{width:100%;border-radius:999px}.ak-btn.sec{background:rgba(23,23,28,.08);color:var(--ink)}.ak-btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--tape)}.ak-btn.danger{background:#fff;color:var(--adr);border:1px solid rgba(230,57,70,.4)}
.ak-btn:disabled{opacity:.35;cursor:default}.ak-btn:focus-visible,.ak-chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ak-chip{all:unset;box-sizing:border-box;cursor:pointer;min-height:36px;padding:6px 12px;border-radius:999px;border:1px solid var(--tape);background:#fff;font:600 14px 'Assistant';display:inline-flex;align-items:center}
.ak-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ak-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(220,217,208,.5);padding:12px 2px;font:600 16px 'Assistant'}.ak-row span{color:var(--mut)}
.ak-tabbar{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:4px;padding:6px;border-radius:999px;border:1px solid rgba(220,217,208,.6);background:rgba(255,255,255,.85);z-index:4}
.ak-tabbar button{all:unset;cursor:pointer;min-width:52px;padding:6px 10px;border-radius:999px;display:grid;justify-items:center;gap:2px;font:600 11.5px 'Assistant';color:var(--mut)}.ak-tabbar button.on{color:var(--adr)}.ak-tabbar svg{width:21px;height:21px}
.ak-tabbar button.hint{background:rgba(212,255,63,.55)}
.ak-sheet-h{display:flex;justify-content:space-between;align-items:center}.ak-sheet-h b{font:300 22px 'Heebo'}
.ak-grab{width:40px;height:4px;border-radius:4px;background:var(--tape);margin:0 auto 10px}
.ak-impact{list-style:none;margin:0;padding:0;display:grid;gap:4px;font:400 14px 'Assistant'}.ak-impact li::before{content:'✓ ';color:var(--mat)}
.ak-lead{font:300 22px 'Heebo';direction:ltr;text-align:start}
.ak-diff{display:grid;gap:4px;border:1px solid rgba(220,217,208,.7);border-radius:8px;padding:8px 12px;margin:0}.ak-diff div{display:flex;align-items:baseline;gap:10px}.ak-diff dt{width:40px;font:400 14px 'Assistant';color:var(--mut)}.ak-diff dd{margin:0;font:600 16px 'Assistant'}.ak-diff dd span{font:400 14px 'Assistant';color:var(--mut);margin-inline-start:6px}
.ak-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:10px;background:rgba(220,217,208,.4)}
.ak-seg button{all:unset;cursor:pointer;text-align:center;padding:8px 0;border-radius:6px;font:600 14px 'Assistant';color:var(--mut)}.ak-seg button[aria-pressed=true]{background:#fff;color:var(--warn)}.ak-seg button[data-a=Coming][aria-pressed=true]{color:var(--ink)}
.ak-push{background:rgba(255,255,255,.92);border:1px solid rgba(220,217,208,.7);border-radius:14px;padding:10px 12px;display:grid;gap:2px;animation:sgin .4s both}.ak-push span{font:600 12px 'Assistant';color:var(--mut)}.ak-push b{font:600 14px 'Assistant'}
.ak-toast{font:600 13px 'Assistant';color:var(--ok)}
.ak-att{font:700 13px 'Assistant';color:var(--ink);border-top:1px solid rgba(220,217,208,.6);padding-top:10px;margin-top:10px}.ak-att .w{color:var(--warn)}.ak-link{font:700 13px 'Assistant';color:var(--mat)}
.ak-note{font:400 13px 'Assistant';color:var(--mut)}
/* real Seamless UI panel */
.sg-scr.ak{padding:12px 14px 14px;gap:10px;overflow-y:auto;overflow-x:hidden;position:relative}
.sg-scr.ak .blk.in{animation:sgin .3s cubic-bezier(.2,.8,.2,1) both}
.ak-thread{display:flex;flex-direction:column;gap:10px;flex:1}
.ak-me{align-self:flex-end;max-width:80%;background:var(--ink);color:#fff;border-radius:16px 6px 16px 16px;padding:8px 12px;font:400 15px/1.4 'Assistant';animation:sgin .3s both}
.ak-alta{display:flex;gap:8px;align-items:flex-start;animation:sgin .3s both}
.ak-av{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);position:relative}
.ak-av::after{content:'✳';position:absolute;inset:0;display:grid;place-items:center;color:#F5EEF0;font-size:13px}
.ak-bub{flex:1;min-width:0;background:#fff;border:1px solid rgba(220,217,208,.7);border-radius:6px 16px 16px 16px;padding:10px 12px;display:grid;gap:8px;font:400 15px/1.45 'Assistant'}
.ak-bub p{margin:0}.ak-bub .ak-card{padding:12px}.ak-bub .ak-card .ak-hrs b,.ak-bub .ak-card .ak-hrs span{font-size:24px}.ak-bub .ak-ban{margin:-12px -12px 10px;padding:6px 12px;font-size:13px}
.ak-dots span{font:600 13px 'Assistant';color:var(--mut);padding-top:5px;animation:sgdot 1s ease-in-out infinite}
@keyframes sgdot{50%{opacity:.35}}
.ak-alta.replaced{opacity:.42}.ak-alta.replaced .ak-bub::before{content:'Replaced';font:600 11px 'Assistant';color:var(--adr)}
.ak-choices{display:grid;gap:8px}
.ak-list{display:grid;border-top:1px solid rgba(220,217,208,.6)}.ak-list div{display:grid;grid-template-columns:2.6em 1fr auto;gap:8px;padding:6px 0;border-bottom:1px solid rgba(220,217,208,.5);font-size:14px}.ak-list span:first-child{color:var(--mut);font-weight:600}.ak-list b{font-weight:600}.ak-list s{color:var(--mut);font-weight:400}.ak-list .x{color:var(--mut)}
.ak-bar{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid rgba(220,217,208,.7);border-radius:999px;padding:8px 8px 8px 10px;margin-top:auto}
.ak-ci{width:32px;height:32px;border-radius:50%;background:rgba(220,217,208,.5);display:grid;place-items:center;color:var(--mut);flex:none}.ak-ci svg{width:18px;height:18px}
.ak-bar input{all:unset;flex:1;min-width:0;font:400 16px 'Assistant'}.ak-bar input::placeholder{color:var(--mut)}
.ak-bar button{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none}.ak-bar button svg{width:18px;height:18px}
.ak-sugs{display:flex;flex-wrap:wrap;gap:6px}
.sg-col{display:grid;gap:8px}
.ak-sheet{background:var(--chalk);border-top:1px solid var(--tape);border-radius:18px 18px 0 0;margin:6px -14px -14px;padding:12px 16px 18px;display:grid;gap:12px}
.sg-scr.ak .sg-back{all:unset;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;color:var(--mut);font-size:18px}
.sg-scr.ak .ak-head .sg-back{margin-inline-start:-8px}
.ak s{text-decoration-thickness:1px}
.sg-phone{background:var(--chalk,#F2F0EA)}
.sg-phone .sg-bar{background:#F2F0EA;color:#5B5B63;border-bottom-color:rgba(220,217,208,.6)}
@media(prefers-reduced-motion:reduce){.ak-me,.ak-alta,.ak-dots span{animation:none}}
/* inside the phones the product keeps its real radii (the portfolio itself stays square) */
.ak .ak-card{border-radius:14px!important}.ak .ak-btn{border-radius:10px!important}.ak .ak-btn.block,.ak .ak-chip,.ak .ak-bar,.ak .ak-pill,.ak .ak-tabbar,.ak .ak-tabbar button{border-radius:999px!important}
.ak .ak-me{border-radius:16px 6px 16px 16px!important}.ak .ak-bub{border-radius:6px 16px 16px 16px!important}.ak .ak-av,.ak .ak-ci,.ak .ak-bar button{border-radius:50%!important}
.ak .ak-lvl,.ak .ak-tile{border-radius:6px!important}.ak .ak-diff{border-radius:8px!important}.ak .ak-sheet{border-radius:18px 18px 0 0!important}.ak .ak-grab{border-radius:4px!important}
.ak .ak-seg{border-radius:10px!important}.ak .ak-seg button{border-radius:6px!important}.ak .ak-push{border-radius:14px!important}.ak .ak-list-box{border-radius:14px!important}
.ak-bub .ak-hrs{flex-wrap:wrap}.ak-bub .ak-ven{flex-basis:100%;margin:6px 0 0;}
.x3-ph{background:#F2F0EA}.x3-ph header{background:#fbfbf9}
.x3-scr.ak{background:#F2F0EA!important;padding:14px;gap:10px}
.x3-scr.ak .ak-sheet{margin:auto -14px -14px}
.x3-scr.ak .ak-btn.ghost{align-self:flex-start;margin-top:auto}

/* ═══ ALTA case study: ALTA's own brand language (altaos.app/welcome), independent of the portfolio look ═══ */
body.al{--a-night:#0E0E12;--a-card:#17171C;--a-paper:#F7F6F2;--a-ink:#17171C;--a-mut:#5B5B63;--a-tape:#DCD9D0;--a-stone:#B9B7B0;--a-lime:#D4FF3F;--a-line:#2E2E36;
  background:var(--a-paper);color:var(--a-ink);font-family:'Hanken Grotesk','IBM Plex Sans Hebrew',system-ui,sans-serif}
body.al .guides{display:none}
body.al section .mono{font-family:'Hanken Grotesk',sans-serif;font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
/* hero, on night */
body.al .al-hero{background:var(--a-night);color:var(--a-paper);border:0;padding:15vh 0 12vh}
.al-brand{grid-column:1/-1;display:flex;align-items:center;gap:14px;color:var(--a-paper);margin-bottom:12vh}
.al-logo svg{width:30px;height:28px;display:block}.al-word{font:300 15px 'Hanken Grotesk';letter-spacing:.42em}
.al-pill{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(247,246,242,.22);border-radius:999px!important;padding:8px 16px;font:400 13px 'Hanken Grotesk';color:rgba(247,246,242,.82)}
.al-pill i{width:7px;height:7px;border-radius:50%!important;background:var(--a-lime)}
body.al .al-t{font:200 clamp(80px,13vw,210px)/.86 'Hanken Grotesk';letter-spacing:-.055em;margin:26px 0 30px;color:var(--a-paper)}
body.al .al-anchor{font:200 clamp(26px,3.1vw,48px)/1.16 'Hanken Grotesk';letter-spacing:-.025em}
body.al .al-hero .al-lead{color:rgba(247,246,242,.62);font:300 18px/1.65 'IBM Plex Sans Hebrew','Hanken Grotesk'}
body.al .al-hero .cs-meta{border-top:1px solid rgba(247,246,242,.14);color:rgba(247,246,242,.55)}
body.al .al-hero .cs-meta dt{color:rgba(247,246,242,.45)}body.al .al-hero .cs-meta dd{color:var(--a-paper);font:300 15px 'Hanken Grotesk';letter-spacing:0;text-transform:none}
/* parts, on paper */
body.al .al-part{border-bottom:1px solid var(--a-tape);padding:14vh 0 10vh}
body.al .al-k{color:var(--a-mut);gap:22px}body.al .al-k span:first-child{color:var(--a-ink)}
body.al .al-h{font:200 clamp(36px,4.6vw,74px)/1.04 'Hanken Grotesk';letter-spacing:-.04em}
body.al .al-body p,body.al .al-row p,body.al .al-st p,body.al .xs-intro,body.al .pe-cut,body.al .xs-closer{font-family:'IBM Plex Sans Hebrew','Hanken Grotesk',sans-serif;font-weight:300;color:#3A3A44}
body.al .al-rows,body.al .al-stat{border-top:1px solid var(--a-ink)}
body.al .al-row,body.al .al-st{border-bottom:1px solid var(--a-tape)}
body.al .al-row h3{font:300 22px/1.3 'Hanken Grotesk';letter-spacing:-.015em}
body.al .al-q{font:200 clamp(24px,2.8vw,42px)/1.22 'Hanken Grotesk';letter-spacing:-.025em}
body.al .al-q::before{width:9px;height:9px;border:0;border-radius:50%!important;background:var(--a-lime);outline:1px solid #9DBF2A;margin-bottom:22px}
/* the signature, on night */
body.al #al-4{background:var(--a-night);color:var(--a-paper);border:0}
body.al #al-4 .al-k{color:rgba(247,246,242,.45)}body.al #al-4 .al-k span:first-child{color:var(--a-paper)}
body.al #al-4 .al-body p{color:rgba(247,246,242,.72)}
body.al #al-4 .al-q::before{outline:0}
body.al .sg{border-top:1px solid var(--a-line)}
body.al .sg-sw{border:1px solid rgba(247,246,242,.22);border-radius:999px!important;padding:4px;gap:4px}
body.al .sg-sw button{border-radius:999px!important;padding:9px 18px;font:400 14px 'Hanken Grotesk';color:rgba(247,246,242,.75)}
body.al .sg-sw button[aria-checked=true]{background:var(--a-paper);color:var(--a-ink)}
body.al .sg-phone{border:1px solid var(--a-line);border-radius:34px!important;overflow:hidden;height:640px}
body.al .sg-phone .sg-bar{padding:14px 22px 8px;border:0;font:500 12px 'Hanken Grotesk';letter-spacing:.04em;text-transform:none}
body.al .sg-sl{color:rgba(247,246,242,.55);font:400 13px/1.6 'Hanken Grotesk';letter-spacing:0;text-transform:none}
body.al .sg-try{border:1px solid rgba(247,246,242,.24);border-radius:999px!important;padding:9px 16px;font:400 14px 'Hanken Grotesk';color:var(--a-paper)}
body.al .sg-try:hover,body.al .sg-try:focus-visible{background:var(--a-lime);color:var(--a-ink);border-color:var(--a-lime)}
body.al .sg-causes{color:rgba(247,246,242,.8);font-family:'Hanken Grotesk'}
body.al .sg-floor{border-top:1px solid var(--a-line)}
body.al .sg-tile{border-inline-start:1px solid var(--a-line)}body.al .sg-tile b{font:300 16px 'Hanken Grotesk';color:var(--a-paper)}body.al .sg-tile span{color:rgba(247,246,242,.42)}
body.al .sg-tile.on{animation:alon 1s ease-out}
@keyframes alon{0%{background:rgba(212,255,63,.28)}100%{background:transparent}}
body.al .sg-tr em{background:rgba(247,246,242,.08);border-radius:999px!important}body.al .sg-tile.u-a .sg-tr em.a{background:var(--a-paper)}body.al .sg-tile.u-b .sg-tr em.b{background:var(--a-lime);outline:0}
body.al .sg-legend{color:rgba(247,246,242,.5)}body.al .sg-legend span::before{background:var(--a-paper);border-radius:999px!important}body.al .sg-legend .b::before{background:var(--a-lime);outline:0}
body.al .sg-under{border-bottom:1px solid rgba(247,246,242,.5);color:var(--a-paper)}
body.al .sg-cap{font:200 clamp(20px,2.2vw,32px) 'Hanken Grotesk';color:var(--a-paper)}
body.al .sg-honest{color:rgba(247,246,242,.82);font:400 14px/1.7 'Hanken Grotesk';letter-spacing:0;text-transform:none}
body.al .sg-disc{color:rgba(247,246,242,.42);font:400 12px 'Hanken Grotesk';letter-spacing:0;text-transform:none}
body.al .sg.under .sg-phone{opacity:.22}
/* one change, three people */
body.al .x3,body.al .xs,body.al .pe{border-top:1px solid var(--a-ink)}
body.al .x3-ev{font:400 13px 'Hanken Grotesk';letter-spacing:.04em;text-transform:none;color:var(--a-mut)}
body.al .x3-ph{border:1px solid var(--a-tape);border-radius:30px!important;overflow:hidden;background:#F2F0EA}
body.al .x3-ph header{background:#fff;border-bottom:1px solid var(--a-tape);padding:14px 18px}body.al .x3-ph header b{font:400 15px 'Hanken Grotesk'}body.al .x3-ph header .mono{font-size:10px}
body.al .x3-end,body.al .xs-end{font:200 clamp(22px,2.4vw,34px)/1.25 'Hanken Grotesk';letter-spacing:-.02em}
body.al .x3 .sg-disc,body.al .pe .sg-disc{color:var(--a-mut)}
/* your call */
body.al .xs-c{background:#fff;border:1px solid var(--a-tape);border-radius:22px!important;padding:22px}
body.al .xs-c.decided{border-color:var(--a-ink)}
body.al .xs-h b{font:300 24px/1.2 'Hanken Grotesk';letter-spacing:-.02em}
body.al .xs-sig li{font:400 13px 'Hanken Grotesk';letter-spacing:0;text-transform:none;display:flex;align-items:center;gap:8px}
body.al .xs-sig li::before{content:'';width:7px;height:7px;border-radius:50%!important;background:var(--a-lime);outline:1px solid #9DBF2A}
body.al .xs-act button{border:1px solid var(--a-tape);border-radius:999px!important;padding:9px 15px;font:400 14px 'Hanken Grotesk'}
body.al .xs-act button[data-x=look]{border-style:dashed}body.al .xs-act button[data-x=back]{background:var(--a-ink);color:var(--a-paper);border-color:var(--a-ink)}
body.al .xs-act button:hover:not(:disabled){border-color:var(--a-ink)}
body.al .xs-rule,body.al .pe-rule{font:300 22px/1.25 'Hanken Grotesk';background:linear-gradient(transparent 58%,var(--a-lime) 58%)}
body.al .xs-you,body.al .xs-did .mono,body.al .pe-cut .mono{letter-spacing:.14em}
/* people screen */
body.al .pe-tabs{border-bottom:1px solid var(--a-tape)}
body.al .pe-tabs button{font:400 15px 'Hanken Grotesk'}
body.al .pe-ph{border:1px solid var(--a-tape);border-radius:30px!important;background:#F2F0EA;padding:18px 16px}
body.al .pe-note{font:200 clamp(26px,2.8vw,42px)/1.18 'Hanken Grotesk';letter-spacing:-.025em}body.al .pe-note.q{font-weight:300}
/* close */
body.al .al-close{background:var(--a-night);color:var(--a-paper)}body.al .al-close .al-lead{color:rgba(247,246,242,.62)}
body.al .cs-next{border-top:1px solid var(--a-tape)}
body.al .al-hero .cs-meta{grid-row:auto!important;grid-column:1/-1!important;order:99;margin-top:56px}
body.al .al-brand{margin-bottom:10vh}
body.al section .ak .mono{font-family:'Assistant',sans-serif;letter-spacing:0;text-transform:none;font-size:inherit;font-weight:inherit}
body.al .al-hero .cs-meta{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-top:18px}body.al .al-hero .cs-meta div{display:grid;gap:6px;border:0;padding:0}@media(max-width:900px){body.al .al-hero .cs-meta{grid-template-columns:1fr 1fr}}
body.al .al-hero .cs-meta dd{text-align:start!important;margin:0}
.ak-hrs{flex-wrap:wrap;row-gap:6px}.ak-ven{white-space:nowrap}
body.al section .sg-sl{font:400 13px/1.6 'Hanken Grotesk';letter-spacing:0;text-transform:none;color:rgba(247,246,242,.55)}
body.al section .sg-honest{font:400 14px/1.7 'Hanken Grotesk';letter-spacing:0;text-transform:none}
body.al section .sg-disc,body.al section .x3-ev{font:400 12px/1.6 'Hanken Grotesk';letter-spacing:.02em;text-transform:none}
body.al .x3 .sg-disc,body.al .pe .sg-disc{color:var(--a-mut)}
.xs-out[hidden],.xs-out p[hidden]{display:none!important}
body.al .pe-ph{height:600px;min-height:0}

/* ═══ ALTA v4 · scroll story ═══ */
body.al .st{position:relative;height:1500vh;background:var(--a-night);color:var(--a-paper)}
.st-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;padding:64px 40px 32px;column-gap:40px;max-width:1440px;margin:0 auto}
.st-top{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;font:500 11px 'Hanken Grotesk';letter-spacing:.18em;text-transform:uppercase;color:rgba(247,246,242,.6);padding-bottom:10px}
.st-me{display:flex;align-items:center;gap:12px}.st-me .al-logo svg{width:20px;height:19px}
.st-meter{display:flex;align-items:center;gap:12px}.st-meter i{display:block;width:180px;height:1px;background:rgba(247,246,242,.2);position:relative}.st-meter b{position:absolute;inset:0 auto 0 0;background:var(--a-paper)}
.st-meter em{font-style:normal;color:var(--a-paper);min-width:3.2em;text-align:end}
.st-text{position:relative;align-self:center}
.st-t{position:absolute;left:0;right:0;top:50%;transform:translateY(-40%);opacity:0;transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.st-t.on{opacity:1;transform:translateY(-50%)}
.st-k{font:500 11px 'Hanken Grotesk';letter-spacing:.22em;text-transform:uppercase;color:var(--a-lime);margin-bottom:18px}
.st-h{font:200 clamp(34px,4.2vw,66px)/1.05 'Hanken Grotesk';letter-spacing:-.04em;margin:0 0 20px}
.st-t[data-i="0"] .st-h{font-size:clamp(30px,3.4vw,52px);line-height:1.12}
.st-l{font:300 18px/1.55 'IBM Plex Sans Hebrew','Hanken Grotesk';color:rgba(247,246,242,.62);margin:0;max-width:34ch}
.st-vis{position:relative;min-height:0}
.st-cv{position:absolute;left:0;top:0;width:720px;height:620px;transform-origin:0 0}
.st-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:500 10px 'Hanken Grotesk';letter-spacing:.3em;text-transform:uppercase;color:rgba(247,246,242,.5)}
.st-floor{position:absolute;inset:0;width:100%;height:100%}.st-floor line{stroke:rgba(247,246,242,.16);stroke-width:1;stroke-dasharray:1;vector-effect:non-scaling-stroke}
/* fragments */
.st-fr{position:absolute;left:0;top:0;white-space:nowrap;font:400 14px 'IBM Plex Sans Hebrew','Hanken Grotesk';will-change:transform}
.st-fr.bub span{display:block;background:#fff;color:#17171C;padding:9px 13px;border-radius:14px 14px 14px 4px!important}
.st-fr.file span{display:flex;align-items:center;gap:8px;background:#26262E;color:#F7F6F2;border:1px solid #3A3A44;padding:8px 12px;border-radius:10px!important;font-size:13px}
.st-fr.file span::before{content:'';width:12px;height:15px;border:1px solid rgba(247,246,242,.6);border-radius:2px!important}
.st-fr.note span{display:block;background:#D4FF3F;color:#17171C;padding:10px 12px;font-size:13px;transform:rotate(-3deg)}
/* tree */
.st-graph{position:absolute;inset:0;width:100%;height:100%}.st-graph line{stroke:rgba(247,246,242,.35);stroke-width:1;stroke-dasharray:1;vector-effect:non-scaling-stroke}
.st-node{position:absolute;padding:8px 14px;border:1px solid rgba(247,246,242,.35);border-radius:999px!important;background:var(--a-night);font:400 14px 'Hanken Grotesk';white-space:nowrap;opacity:0}
/* phones */
.st-ph{position:absolute;background:#F2F0EA;border:1px solid #2E2E36;border-radius:30px!important;overflow:hidden;display:flex;flex-direction:column;opacity:0;transition:none}
.st-ph .sg-bar{background:#F2F0EA;color:#5B5B63;border:0;padding:12px 18px 4px;display:flex;justify-content:space-between;font:500 11px 'Hanken Grotesk';letter-spacing:.04em}
.st-scr{flex:1;overflow:hidden;padding:10px 12px 14px;display:flex;flex-direction:column;gap:9px}
.st-ph.side .st-scr{padding:8px 10px;gap:8px}.st-ph.side .ak-card{padding:12px}.st-ph.side .ak-hrs b,.st-ph.side .ak-hrs span{font-size:22px}.st-ph.side .ak-ban{margin:-12px -12px 8px;padding:6px 12px;font-size:12px}
.st-ph .ak-sheet{margin:auto -12px -14px}
.st-ph .ak-bar{margin-top:auto}
.st-scr .blk.in{animation:sgin .35s cubic-bezier(.2,.8,.2,1) both}
.st-failed{display:flex;flex-direction:column;gap:8px;transition:opacity .4s}.st-failed.x{opacity:.35}
.st-fix{margin-top:auto;align-self:center;background:#17171C;color:#F7F6F2;padding:10px 16px;border-radius:999px!important;font:600 14px 'Assistant'}
.st-pe{margin:0!important;padding:0!important;border:0!important;position:relative;flex:1}.st-pe .pe-fab{right:6px;bottom:6px}
.st-quote{position:absolute;left:-210px;top:120px;width:190px;font:300 20px/1.3 'Hanken Grotesk';color:#F7F6F2}.st-quote span{display:block;margin-top:10px;font:500 10px 'Hanken Grotesk';letter-spacing:.2em;text-transform:uppercase;color:rgba(247,246,242,.5)}
.st-ph.main{overflow:visible}.st-ph.main .st-scr{overflow:hidden;border-radius:0 0 30px 30px!important}
/* team */
.st-agsv{position:absolute;inset:0;width:100%;height:100%;opacity:0}.st-agsv line{stroke:rgba(247,246,242,.3);stroke-width:1;stroke-dasharray:1;vector-effect:non-scaling-stroke}
.st-ag{position:absolute;display:grid;gap:2px;text-align:center;padding:14px 20px;border:1px solid rgba(247,246,242,.3);border-radius:18px!important;background:var(--a-night);opacity:0;white-space:nowrap}
.st-ag b{font:300 22px 'Hanken Grotesk'}.st-ag span{font:400 13px 'Hanken Grotesk';color:rgba(247,246,242,.55)}
.st-ag.me{background:#F7F6F2;color:#17171C;border-color:#F7F6F2}.st-ag.me span{color:#5B5B63}
.st-tok{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%!important;background:var(--a-lime);opacity:0}
.st-gate{position:absolute;transform:translate(-50%,0);display:flex;align-items:center;gap:8px;font:500 12px 'Hanken Grotesk';letter-spacing:.14em;text-transform:uppercase;color:rgba(247,246,242,.6);opacity:0;white-space:nowrap}
.st-gate i{width:9px;height:9px;border-radius:50%!important;border:1px solid var(--a-lime)}.st-gate.lit i{background:var(--a-lime)}.st-gate.lit{color:var(--a-paper)}
/* restraint */
.st-card{position:absolute;left:360px;top:300px;width:400px;background:#F7F6F2;color:#17171C;border-radius:22px!important;padding:26px;opacity:0}
.st-card-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #DCD9D0;padding-bottom:12px;margin-bottom:12px}.st-card-h b{font:300 26px 'Hanken Grotesk'}.st-card-h span{font:400 13px 'Hanken Grotesk';color:#5B5B63}
.st-card ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px;font:400 15px 'IBM Plex Sans Hebrew','Hanken Grotesk'}.st-card li::before{content:'✓ ';color:#178A5C}
.st-card p{margin:14px 0 0;font:300 18px 'Hanken Grotesk'}
.st-stamp{position:absolute;right:22px;top:70px;font:600 22px 'Hanken Grotesk';letter-spacing:.18em;text-transform:uppercase;color:#C81E33;border:2px solid #C81E33;padding:6px 14px;border-radius:8px!important;transform:rotate(-8deg) scale(1.6);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .2s}
.st-card.stamped .st-stamp{opacity:1;transform:rotate(-8deg) scale(1)}
/* today */
.st-mods{position:absolute;left:40px;top:70px;width:640px;display:grid;grid-template-columns:1fr 1fr;gap:10px;opacity:0}
.st-mods span{display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid rgba(247,246,242,.18);border-radius:14px!important;font:300 16px 'Hanken Grotesk'}
.st-mods i{width:8px;height:8px;border-radius:50%!important;flex:none}.st-mods em{margin-left:auto;font:500 10px 'Hanken Grotesk';letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:rgba(247,246,242,.5)}
.st-mods .live i{background:var(--a-lime)}.st-mods .dep i{border:1px solid var(--a-lime)}.st-mods .pilot i{background:#B9770E}.st-mods .prog i{border:1px solid rgba(247,246,242,.6)}.st-mods .plan i{border:1px dashed rgba(247,246,242,.4)}
/* after the story */
body.al .al-try{background:var(--a-paper);padding:16vh 0 12vh}
body.al .al-try .st-k{color:#5B5B63}body.al .al-try .st-h{grid-column:1/-1;color:var(--a-ink)}
body.al .al-try .sg{border-top:1px solid #DCD9D0}
body.al .al-try .sg-sw{border-color:#DCD9D0}body.al .al-try .sg-sw button{color:#5B5B63}body.al .al-try .sg-sw button[aria-checked=true]{background:#17171C;color:#F7F6F2}
body.al .al-try .sg-phone{border-color:#DCD9D0}
body.al .al-try section .sg-sl,body.al .al-try .sg-sl{color:#5B5B63}
body.al .al-try .sg-try{color:#17171C;border-color:#DCD9D0}
body.al .al-try .sg-floor{border-top-color:#17171C}body.al .al-try .sg-tile{border-inline-start-color:#DCD9D0}body.al .al-try .sg-tile b{color:#17171C}body.al .al-try .sg-tile span{color:#5B5B63}
body.al .al-try .sg-tile.u-a .sg-tr em.a{background:#17171C}body.al .al-try .sg-tr em{background:rgba(23,23,28,.08)}
body.al .al-try .sg-legend{color:#5B5B63}body.al .al-try .sg-legend span::before{background:#17171C}body.al .al-try .sg-legend .b::before{background:var(--a-lime)}
body.al .al-try .sg-under{color:#17171C;border-bottom-color:#17171C}body.al .al-try .sg-cap{color:#17171C}
body.al .al-try .sg-honest{color:#3A3A44}body.al .al-try .sg-disc{color:#5B5B63}body.al .al-try .sg-causes{color:#3A3A44}
body.al .al-close{padding:18vh 0}
@media(max-width:900px){
  .st-pin{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;padding:58px 18px 18px;row-gap:8px}
  .st-meter i{width:70px}.st-me{font-size:9px;letter-spacing:.12em}
  .st-text{height:190px}.st-t{top:0;transform:translateY(8px)}.st-t.on{transform:none}
  .st-h{font-size:30px;margin-bottom:10px}.st-t[data-i="0"] .st-h{font-size:24px}.st-l{font-size:15px}.st-k{margin-bottom:10px}
  .st-quote{left:0;top:auto;bottom:-6px;width:100%;font-size:16px;background:rgba(14,14,18,.85);padding:8px}
}
@media(prefers-reduced-motion:reduce){.st-t{transition:none}}
.st-pin{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.st-thr{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:9px;justify-content:flex-end}
.st-thr.x{opacity:.35;transition:opacity .4s}
.st-thr .ak-me,.st-thr .ak-alta{flex:none}
.st-pe .pe-r{flex-wrap:wrap;row-gap:6px}.st-pe .pe-ctl{width:100%;padding-left:52px}
.st-mods .park i{border:1px dashed rgba(247,246,242,.4)}

/* ═══ ALTA hero v8 · the system is the subject; role surfaces sit on it (Build), then the interaction changes (Use) ═══ */
body.al .hm{position:relative;background:var(--a-night);color:var(--a-paper)}
.hm-mo{position:relative;max-width:1440px;margin:0 auto;padding:56px 32px 64px;display:grid;grid-template-columns:minmax(0,1fr);row-gap:36px}
.hm:not(.pin) #mo-build{padding-top:96px}
.hm-cue{display:none}
.hm-k{display:flex;align-items:center;gap:12px;font:500 11px 'Hanken Grotesk';letter-spacing:.24em;text-transform:uppercase;color:rgba(247,246,242,.55)}.hm-k svg{width:20px;height:19px;display:block}
.hm-h{margin:26px 0 26px;font:200 60px/1 'Hanken Grotesk';letter-spacing:-.045em;color:var(--a-paper)}
.hm-h2 .pre{display:block;font-size:28px;letter-spacing:-.02em;color:rgba(247,246,242,.42);margin-bottom:20px;line-height:1.2}
.hm-h2 .lime{display:block;color:var(--a-lime)}
.hm-lead{font:300 19px/1.6 'Hanken Grotesk';color:rgba(247,246,242,.74);max-width:40ch;margin:0}
.hm-q{font:300 30px/1.3 'Hanken Grotesk';letter-spacing:-.015em;color:var(--a-paper);max-width:20ch;margin:0 0 24px}
.hm-st{display:flex;gap:10px;align-items:baseline;font:300 15px/1.5 'Hanken Grotesk';color:rgba(247,246,242,.6);max-width:42ch;margin:0}
.hm-st i{flex:none;width:8px;height:8px;border-radius:50%!important;background:var(--a-lime);transform:translateY(-1px)}.hm-st b{font-weight:500;color:var(--a-paper)}
/* stage */
.hm-stage{position:relative;display:grid;gap:44px;align-content:center}
/* role surfaces: frameless windows onto the same system */
.hm-sfs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start;position:relative;z-index:2}
.hm-sf{background:#F2F0EA;color:#17171C;border-radius:16px!important;padding:12px;display:grid;gap:8px;font-family:'Assistant';min-height:186px;align-content:start}
.hm-sf-k{display:flex;align-items:baseline;gap:8px;font:400 12px 'Assistant';color:#5B5B63}.hm-sf-k b{font:700 13px 'Assistant';color:#17171C}
.hm-sf.ai{background:#fff}
.hm-cd{background:#fff;border:1px solid rgba(220,217,208,.8);border-radius:12px!important;padding:9px 11px;overflow:hidden}
.hm-top{display:flex;align-items:center;gap:6px;font:400 12.5px 'Assistant';color:#5B5B63;white-space:nowrap}
.hm-lvl{font:600 11px 'Assistant';color:#178A5C;background:rgba(23,138,92,.1);padding:0 7px;border-radius:999px!important}.hm-lvl.b{color:#2B4C7E;background:rgba(43,76,126,.1)}
.hm-pill{margin-left:auto;font:600 11px 'Assistant';padding:1px 8px;border-radius:999px!important;color:#B9770E;background:rgba(185,119,14,.12)}
.hm-hrs{display:flex;align-items:baseline;gap:6px;margin-top:3px}.hm-hrs b,.hm-hrs span{font:300 24px 'Heebo'}.hm-hrs i{font-style:normal;color:#DCD9D0}.hm-hrs em{margin-left:auto;font:400 12px 'Assistant';color:#5B5B63;font-style:normal}
.hm-ban{margin:-9px -11px 8px;padding:5px 11px;background:rgba(124,22,38,.08);color:#7C1626;font:600 11.5px/1.35 'Assistant'}
.hm-mini{display:flex;justify-content:space-between;align-items:baseline;background:#fff;border:1px solid rgba(220,217,208,.8);border-radius:12px!important;padding:8px 11px;font:400 12.5px 'Assistant';color:#5B5B63}.hm-mini b{font:400 15px 'Heebo';color:#17171C}
.hm-att{font:600 12.5px 'Assistant';color:#178A5C}
.hm-rsvp{display:flex;gap:6px}.hm-rsvp span{flex:1;text-align:center;font:600 12.5px 'Assistant';padding:5px 0;border-radius:999px!important;border:1px solid #DCD9D0;background:#fff}.hm-rsvp span.on{background:#17171C;color:#fff;border-color:#17171C}
.hm-me{justify-self:end;max-width:95%;background:#17171C;color:#F2F0EA;border-radius:14px 5px 14px 14px!important;padding:7px 11px;font:400 13.5px 'Assistant'}
.hm-bub{display:grid;gap:7px}
.hm-diff{display:grid;border:1px solid rgba(220,217,208,.8);border-radius:8px!important;padding:6px 10px;margin:0}.hm-diff div{display:flex;gap:8px;align-items:baseline}.hm-diff dt{color:#5B5B63;font-size:13px}.hm-diff dd{margin:0;font-weight:600;font-size:14px}.hm-diff dd span{font-weight:400;color:#5B5B63;margin-left:5px;font-size:12.5px}
.hm-note{font:400 12px 'Assistant';color:#5B5B63}
.hm-btn{height:34px;border-radius:9px!important;background:#17171C;color:#F2F0EA;font:600 13.5px 'Assistant';display:grid;place-items:center;transition:background .3s}
/* before/after pairs: stacked in one cell; the stacked layout shows the after state */
.hm .x{display:grid}.hm span.x{display:inline-grid}.hm .x>.a,.hm .x>.b{grid-area:1/1;transition:opacity .45s}.hm .x>.a{opacity:0}
.hm-pair{align-items:end}
.hm .grow{display:inline-block;vertical-align:bottom;white-space:nowrap;overflow:hidden;max-width:220px}
/* the system */
.hm-sys{display:grid;gap:12px;position:relative}
.hm-sk{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:500 10px 'Hanken Grotesk';letter-spacing:.24em;text-transform:uppercase;color:rgba(247,246,242,.55)}
.hm-sk em{font-style:normal;color:var(--a-lime)}#mo-build .hm-sk em{visibility:hidden}
.hm-ly{position:relative;background:#17171C;border:1px solid #2E2E36;border-radius:16px!important;padding:12px 16px 14px;display:grid;gap:9px;align-content:start}
.hm-ly>b{font:500 10px 'Hanken Grotesk';letter-spacing:.2em;text-transform:uppercase;color:rgba(247,246,242,.55);line-height:1.6}
.hm-ly>b small{display:inline;margin-left:10px;font:300 13px 'Hanken Grotesk';letter-spacing:0;text-transform:none;color:rgba(247,246,242,.42)}
.hm-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hm-tree{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:400 14px 'Hanken Grotesk'}
.hm-tree span{padding:4px 11px;border:1px solid rgba(247,246,242,.3);border-radius:999px!important}.hm-tree i{color:rgba(247,246,242,.35);font-style:normal}.hm-tree span.l{border-color:var(--a-lime);color:var(--a-lime)}
.hm-wk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.hm-wk div{display:grid;gap:5px;align-content:start}.hm-wk u{text-decoration:none;font:500 11px 'Hanken Grotesk';color:rgba(247,246,242,.45);text-align:center}
.hm-wk s{text-decoration:none;display:block;background:#26262E;border:1px solid #3A3A44;border-radius:7px!important;padding:5px 8px;font:400 12px 'Hanken Grotesk';color:rgba(247,246,242,.85)}
.hm-wk s.t{border-color:var(--a-lime);min-height:44px}.hm-wk s.mv{background:rgba(212,255,63,.15)}
.hm-wk s small{display:block;font-size:11px;color:rgba(247,246,242,.5)}.hm-wk s del{color:rgba(247,246,242,.45)}
.hm .hm-wk s.x>span{white-space:normal;min-width:0}
.hm-ppl{display:flex;flex-wrap:wrap;gap:6px;font:400 13px 'Hanken Grotesk'}
.hm-ppl>span{padding:4px 10px;border-radius:999px!important;background:#26262E;white-space:nowrap}.hm-ppl>span.ok{background:transparent;border:1px solid var(--a-lime);color:var(--a-lime)}
.hm-aud{display:flex;align-items:center;gap:8px;font:400 13px 'Hanken Grotesk'}
.hm-aud>span{white-space:nowrap;padding:4px 10px;border-radius:999px!important;border:1px solid rgba(247,246,242,.3)}.hm-aud strong{font-weight:400;color:var(--a-lime);white-space:nowrap}
.hm-th{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
.hm-th path{fill:none;stroke:var(--a-lime);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:0}
.hm-th circle{fill:var(--a-lime)}
/* ── pinned (wide, tall screens): one stage revealed in steps r1…r8 ── */
.hm.pin{height:520vh}
.hm.pin .hm-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.hm.pin .hm-mo{position:absolute;inset:0;margin:0 auto;height:100vh;padding:56px 64px 0;grid-template-columns:minmax(0,440px) minmax(0,1fr);column-gap:72px;align-items:center}
.hm.pin .hm-h{font-size:72px;margin:28px 0}
.hm.pin .hm-h2 .pre{font-size:28px;margin-bottom:22px}
.hm.pin .hm-copy{transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.hm.pin .hm-sf{height:208px;overflow:hidden}.hm.pin .hm-stage{align-content:center}
.hm.pin.is-use #mo-build .hm-sys{visibility:hidden}
/* Build · the system first, one layer at a time (r0 schedule, r1 structure, r2 people & audience) */
.hm.pin .hm-sk,.hm.pin .hm-ly,.hm.pin .hm-sf{transition:opacity .55s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.hm.pin #mo-build .hm-ly{opacity:0;transform:translateY(24px)}
.hm.pin #mo-build [data-ly=wk]{opacity:1;transform:none}
.hm.pin.r1 #mo-build [data-ly=tree],.hm.pin.r2 #mo-build [data-ly=ppl],.hm.pin.r2 #mo-build [data-ly=aud]{opacity:1;transform:none}
.hm.pin.r2 #mo-build [data-ly=aud]{transition-delay:.12s}
/* then the people it serves: three surfaces on the same system (r3) */
.hm.pin #mo-build .hm-sf{opacity:0;transform:translateY(-22px)}
.hm.pin.r3 #mo-build .hm-sf{opacity:1;transform:none}
.hm.pin.r3 #mo-build .hm-sf[data-a=c]{transition-delay:.1s}.hm.pin.r3 #mo-build .hm-sf[data-a=p]{transition-delay:.2s}
.hm.pin .hm-th g path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s .35s cubic-bezier(.4,0,.2,1)}
.hm.pin .hm-th g circle{opacity:0;transition:opacity .3s .5s}
.hm.pin.r3 #mo-build .hm-th g path{stroke-dashoffset:0}.hm.pin.r3 #mo-build .hm-th g circle{opacity:1}
/* Use · the copy changes, the system stays exactly where it is */
.hm.pin #mo-use{pointer-events:none}
.hm.pin #mo-use .hm-copy{opacity:0;transform:translateY(18px)}
.hm.pin #mo-use .hm-stage{opacity:0}
.hm.pin.is-use #mo-use{pointer-events:auto}
.hm.pin.is-use #mo-use .hm-copy{opacity:1;transform:none;transition-delay:.22s}
.hm.pin.is-use #mo-use .hm-stage{opacity:1}
.hm.pin.is-use #mo-build .hm-copy{opacity:0;transform:translateY(-18px);transition-duration:.3s}
.hm.pin.is-use #mo-build .hm-sfs,.hm.pin.is-use #mo-build .hm-th{opacity:0}
/* the manager's surface becomes a request (r5) → a decision (r6) → the action (r7) */
.hm.pin [data-u]{transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.hm.pin [data-u=req]{opacity:0;transform:translateY(10px)}.hm.pin.r5 [data-u=req]{opacity:1;transform:none;transition-delay:.35s}
.hm.pin [data-u=dec]{opacity:0;transform:translateY(10px)}.hm.pin.r6 [data-u=dec]{opacity:1;transform:none}
.hm.pin.r7 .hm-btn{background:#3A3A44}
/* the change goes down into the system, then up to the coach and the parent */
.hm.pin #mo-use .hm-th g path{stroke-dashoffset:1}
.hm.pin.r7 #mo-use .hm-th g path{stroke-dashoffset:0}
.hm.pin.r7 #mo-use .hm-th g[data-k=c] path,.hm.pin.r7 #mo-use .hm-th g[data-k=p] path{transition-delay:1.2s}
.hm.pin.r7 #mo-use .hm-th g circle{opacity:1}.hm.pin.r7 #mo-use .hm-th g[data-k=c] circle,.hm.pin.r7 #mo-use .hm-th g[data-k=p] circle{transition-delay:1.7s}
.hm.pin #mo-use .x>.a{opacity:1}.hm.pin #mo-use .x>.b{opacity:0}
.hm.pin.r7 #mo-use .hm-sys .x>.a{opacity:0;transition-delay:.9s}.hm.pin.r7 #mo-use .hm-sys .x>.b{opacity:1;transition-delay:.9s}
.hm.pin.r7 #mo-use .hm-sfs .x>.a{opacity:0;transition-delay:1.8s}.hm.pin.r7 #mo-use .hm-sfs .x>.b{opacity:1;transition-delay:1.8s}
.hm.pin #mo-use .hm-wk s.mv{background:#26262E;transition:background .5s .9s}.hm.pin.r7 #mo-use .hm-wk s.mv{background:rgba(212,255,63,.15)}
.hm.pin #mo-use .grow{max-width:0;transition:max-width .6s 1s cubic-bezier(.2,.8,.2,1)}.hm.pin.r7 #mo-use .grow{max-width:220px}
.hm.pin #mo-use .hm-sk em{opacity:0;transition:opacity .5s 2s}.hm.pin.r7 #mo-use .hm-sk em{opacity:1}
.hm.pin .hm-cue{display:block;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:500 10px 'Hanken Grotesk';letter-spacing:.3em;text-transform:uppercase;color:rgba(247,246,242,.45);transition:opacity .4s}
.hm.pin.r1 .hm-cue{opacity:0}
@media(prefers-reduced-motion:reduce){.hm.pin *{transition-duration:.01s!important;transition-delay:0s!important}}
/* mobile: each moment reads top to bottom */
@media(max-width:700px){
  .hm-mo{padding:28px 20px 34px;row-gap:22px}.hm:not(.pin) #mo-build{padding-top:76px}
  #mo-use{border-top:1px solid #2E2E36}
  .hm-h{font-size:40px;margin:16px 0 14px}.hm-h2 .pre{font-size:18px;margin-bottom:10px}
  .hm-lead{font-size:16px}.hm-q{font-size:22px;margin-bottom:14px}.hm-st{font-size:13.5px}
  .hm-stage{gap:24px}
  .hm-sfs{grid-template-columns:1fr;gap:10px}.hm-sf{min-height:0}
  .hm-row{grid-template-columns:1fr}.hm-ly>b small{display:block;margin:3px 0 0}
  .hm-wk{gap:4px}.hm-wk s{padding:4px 5px;font-size:11px}.hm-tree{font-size:13px}
  .hm-th{display:none}
}
/* hero v8 · the caption says what you are looking at; the rest steps back */
.hm-cap{display:none}
.hm.pin .hm-cap{display:block;position:absolute;left:0;top:0;width:760px;height:30px;z-index:4;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hm.pin .hm-cap p{position:absolute;inset:0;margin:0;display:flex;align-items:baseline;gap:14px;font:300 21px/1.3 'Hanken Grotesk';color:var(--a-paper);white-space:nowrap;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1)}
.hm.pin .hm-cap p b{font:500 11px 'Hanken Grotesk';letter-spacing:.2em;color:var(--a-lime)}
.hm.pin .hm-cap p.on{opacity:1;transform:none;transition-delay:.15s}
.hm.pin .hm-ly,.hm.pin .hm-sf{transition:opacity .55s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.hm.pin .dim{filter:brightness(.5) saturate(.6)}
.hm.pin .hm-mo{padding-top:96px}
/* hero v8 · a smaller, quieter stage beside the copy */
.hm.pin .hm-mo{grid-template-columns:minmax(0,460px) minmax(0,620px);justify-content:space-between}
.hm.pin .hm-stage{gap:34px}
.hm.pin .hm-sfs{gap:10px}
.hm.pin .hm-sf{height:176px;padding:10px;gap:6px;border-radius:14px!important}
.hm.pin .hm-sf-k{font-size:11px}.hm.pin .hm-sf-k b{font-size:12px}
.hm.pin .hm-cd{padding:7px 9px}.hm.pin .hm-top{font-size:11px}.hm.pin .hm-hrs b,.hm.pin .hm-hrs span{font-size:19px}.hm.pin .hm-hrs em{font-size:10.5px}
.hm.pin .hm-ban{margin:-7px -9px 6px;padding:4px 9px;font-size:10px}
.hm.pin .hm-mini,.hm.pin .hm-att,.hm.pin .hm-rsvp span{font-size:11px}.hm.pin .hm-mini{padding:6px 9px}.hm.pin .hm-mini b{font-size:13px}.hm.pin .hm-rsvp span{padding:4px 0}
.hm.pin .hm-me{font-size:12px;padding:6px 10px}.hm.pin .hm-diff dd{font-size:12.5px}.hm.pin .hm-diff dt,.hm.pin .hm-diff dd span{font-size:11px}.hm.pin .hm-note{font-size:10.5px}.hm.pin .hm-btn{height:28px;font-size:12px}
.hm.pin .hm-sys{gap:9px}.hm.pin .hm-ly{padding:10px 13px 11px;gap:7px;border-radius:13px!important}
.hm.pin .hm-ly>b{font-size:9px}.hm.pin .hm-ly>b small{font-size:11.5px}
.hm.pin .hm-wk{gap:5px}.hm.pin .hm-wk s{font-size:10.5px;padding:4px 6px}.hm.pin .hm-wk s small{font-size:9.5px}.hm.pin .hm-wk u{font-size:10px}.hm.pin .hm-wk s.t{min-height:38px}
.hm.pin .hm-tree,.hm.pin .hm-ppl,.hm.pin .hm-aud{font-size:11.5px}.hm.pin .hm-tree span,.hm.pin .hm-ppl>span,.hm.pin .hm-aud>span{padding:3px 9px}
.hm.pin .hm-cap{width:620px}.hm.pin .hm-cap p{font-size:18px}
.hm.pin .hm-sf .hm-hrs em{display:none}.hm.pin .hm-sf>*{min-width:0}.hm.pin .hm-top{white-space:normal;flex-wrap:wrap;row-gap:2px}
/* ALTA opening: quiet, boutique, paper. The product's name, one line, one link. */
body.al .ai-x{background:#F7F6F2;color:#17171C;min-height:100vh;display:flex}
.ai-in{width:100%;max-width:1440px;margin:0 auto;padding:96px 40px 48px;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr auto;min-height:100vh}
.ai-top{display:flex;justify-content:space-between;font:400 11px 'Hanken Grotesk';letter-spacing:.26em;text-transform:uppercase;color:#8A8A90}
.ai-mid{align-self:center;display:grid;justify-items:center;text-align:center;padding:40px 0}
.ai-brand{display:flex;align-items:center;gap:12px;margin-bottom:44px;font:400 13px 'Hanken Grotesk';letter-spacing:.32em;color:#17171C}
.ai-logo{display:block;color:#17171C}.ai-logo svg{width:24px;height:22px;display:block}
.ai-name{margin:0;font:200 clamp(56px,7.4vw,118px)/1 'Hanken Grotesk';letter-spacing:-.045em;color:#17171C}.ai-name span{display:block}.ai-name span+span{color:#8A8A90}
.ai-tag{margin:40px 0 0;font:300 clamp(17px,1.4vw,20px)/1.6 'Hanken Grotesk';letter-spacing:.01em;color:#5B5B63}.ai-tag span{display:block}
.ai-site{margin-top:26px;font:400 12px 'Hanken Grotesk';letter-spacing:.24em;text-transform:uppercase;color:#17171C;text-decoration:none;padding-bottom:5px;border-bottom:1px solid #17171C;transition:opacity .2s}
.ai-site:hover{opacity:.6}.ai-site:focus-visible{outline:1px solid #17171C;outline-offset:6px}
.ai-facts{margin:0;display:flex;justify-content:center;gap:0}
.ai-facts div{display:flex;gap:10px;align-items:baseline;padding:0 34px;border-left:1px solid #DCD9D0}.ai-facts div:first-child{border-left:0}
.ai-facts dt{font:400 10px 'Hanken Grotesk';letter-spacing:.24em;text-transform:uppercase;color:#8A8A90}
.ai-facts dd{margin:0;font:300 14px 'Hanken Grotesk';color:#17171C}
/* the tools behind it: a quiet colophon */
.ai-foot{display:grid;gap:18px;justify-items:center}
.ai-stack{margin:0;display:grid;gap:8px;justify-items:center;padding-top:18px;border-top:1px solid #E4E2DB;width:min(900px,100%)}
.ai-stack div{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 12px}
.ai-stack dt{font:400 10px 'Hanken Grotesk';letter-spacing:.24em;text-transform:uppercase;color:#8A8A90;margin-right:4px}
.ai-stack dd{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font:300 13.5px 'Hanken Grotesk';color:#3A3A44}
.ai-stack dd span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.ai-stack dd svg{width:14px;height:14px;flex:none;color:#17171C;opacity:.85}
@media(max-width:700px){
  .ai-stack div{flex-direction:column;align-items:center;gap:6px}.ai-stack dd{font-size:13px}
  .ai-in{padding:84px 16px 34px}.ai-tag span{display:inline}.ai-tag{max-width:30ch}.ai-top{font-size:9.5px;letter-spacing:.2em}
  .ai-brand{margin-bottom:30px}.ai-name{font-size:35px}.ai-tag{font-size:17px;margin-top:24px;max-width:22ch}
  .ai-facts{flex-direction:column;align-items:center;gap:10px}.ai-facts div{border:0;padding:0}
}
.hm.pin .hm-h{font-size:64px;margin:22px 0 24px}
/* the hall behind the opening: fine lines, soft blue, slow light */
body.al .ai-x{position:relative;overflow:hidden}
.ai-hall{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.ai-x .ai-in{position:relative;z-index:1}
.ai-hall .ln{fill:none;stroke:#17171C;stroke-opacity:.16;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.ai-hall .ln.f{stroke-opacity:.09}.ai-hall .ln.b{stroke:#2B4C7E;stroke-opacity:.35}
.ai-hall .mat{fill:#2B4C7E;fill-opacity:0;stroke:none}.ai-hall .crp{fill:#FBFAF7;fill-opacity:0;stroke:none}
.ai-hall.on .ln{stroke-dashoffset:0;transition:stroke-dashoffset 2.8s cubic-bezier(.4,0,.2,1) calc(var(--d)*1.8)}
.ai-hall.on .mat{fill-opacity:.17;transition:fill-opacity 2.2s ease calc(var(--d)*1.8 + 1.4s)}.ai-hall.on .crp{fill-opacity:1;transition:fill-opacity 2.2s ease calc(var(--d)*1.8 + 1.4s)}
.ai-hall .sun{opacity:0;mix-blend-mode:screen}.ai-hall.on .sun{animation:aisun 12s ease-in-out 5s infinite alternate}
@keyframes aisun{from{opacity:.25;transform:translateX(-14px)}to{opacity:.6;transform:translateX(14px)}}
.ai-hall .trail{fill:none;stroke:#2B4C7E;stroke-opacity:.18;stroke-width:1;stroke-dasharray:2 5}
.ai-hall .gym{fill:#2B4C7E;fill-opacity:.55}
@media(prefers-reduced-motion:reduce){.ai-hall.on .ln,.ai-hall.on .mat,.ai-hall.on .crp{transition:none}.ai-hall .sun{animation:none;opacity:.4}.ai-hall .gym{display:none}}
.ai-mid{position:relative}.ai-mid::before{content:'';position:absolute;left:50%;top:50%;width:min(1100px,110%);height:130%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(247,246,242,.92),rgba(247,246,242,.6) 55%,rgba(247,246,242,0));z-index:-1;pointer-events:none}
.ai-foot{position:relative}.ai-foot::before{content:'';position:absolute;inset:-14px -40px;background:rgba(247,246,242,.82);filter:blur(10px);z-index:-1}
@media(max-width:700px){.ai-hall{opacity:.55}.ai-foot::before{inset:-10px -16px;filter:blur(14px)}}
/* first the hall draws itself, then the words arrive */
@keyframes aiup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes aifade{from{opacity:0}to{opacity:1}}
.ai-x .ai-top,.ai-x .ai-brand,.ai-x .ai-name span,.ai-x .ai-tag,.ai-x .ai-site,.ai-x .ai-foot{opacity:0;animation:aiup 1.6s cubic-bezier(.2,.8,.2,1) forwards}
.ai-x .ai-brand{animation-delay:4.4s}.ai-x .ai-name span:first-child{animation-delay:4.9s}.ai-x .ai-name span+span{animation-delay:5.4s}
.ai-x .ai-tag{animation-delay:6.1s}.ai-x .ai-site{animation-delay:6.6s}.ai-x .ai-foot{animation-delay:7.1s}.ai-x .ai-top{animation-delay:7.1s}
.ai-x .ai-mid::before,.ai-x .ai-foot::before{opacity:0;animation:aifade 2s ease 4s forwards}
.ai-x .ai-name span{display:block}
@media(prefers-reduced-motion:reduce){.ai-x .ai-top,.ai-x .ai-brand,.ai-x .ai-name span,.ai-x .ai-tag,.ai-x .ai-site,.ai-x .ai-foot,.ai-x .ai-mid::before,.ai-x .ai-foot::before{animation:none;opacity:1}}
/* a neon touch: ALTA lime instead of the mat blue */
.ai-hall .mat{fill:#D4FF3F}.ai-hall.on .mat{fill-opacity:.42}
.ai-hall .ln.b{stroke:#8DB80A;stroke-opacity:.7}
.ai-hall .trail{stroke:#8DB80A;stroke-opacity:.5}
.ai-hall .gym{fill:#D4FF3F;fill-opacity:1;stroke:#17171C;stroke-opacity:.35;stroke-width:1}
/* the hall: clear first, then it becomes its model */
.ai-hall .ln{stroke-opacity:.3}.ai-hall .ln.f{stroke-opacity:.17}
.ai-hall.on .ln{transition:stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1) calc(var(--d)*1.2),stroke-opacity 1.6s ease}
.ai-hall.on .mat,.ai-hall.on .crp{transition:fill-opacity 2s ease calc(var(--d)*1.2 + 1s)}
.ai-hall.code .ln{stroke-opacity:.15}.ai-hall.code .ln.f{stroke-opacity:.08}.ai-hall.code .ln.b{stroke-opacity:.45}
.ai-hall.code .mat{fill-opacity:.26;transition:fill-opacity 1.6s ease}
.ai-hall .code{opacity:0;transition:opacity .8s}.ai-hall.code .code{opacity:1}
.ai-hall .tag circle{fill:#D4FF3F;stroke:#17171C;stroke-opacity:.5;stroke-width:1}
.ai-hall .tag text{font:500 13px ui-monospace,'SF Mono',Menlo,monospace;fill:#3A3A44;letter-spacing:.01em}
.ai-x .ai-brand{animation-delay:5s}.ai-x .ai-name span:first-child{animation-delay:5.4s}.ai-x .ai-name span+span{animation-delay:5.8s}
.ai-x .ai-tag{animation-delay:6.4s}.ai-x .ai-site{animation-delay:6.8s}.ai-x .ai-foot,.ai-x .ai-top{animation-delay:7.2s}
.ai-x .ai-mid::before,.ai-x .ai-foot::before{animation-delay:4.6s}
@media(max-width:700px){.ai-hall .tag text{font-size:15px}}
.ai-name{font-size:clamp(44px,5vw,80px)}
@media(max-width:700px){.ai-name{font-size:32px}}
/* opening headline: thinner, words rise into place, a neon marker under "differently" */
.ai-name{font-weight:100}
.ai-x .ai-name span{opacity:1;animation:none}
.ai-name .l{display:block}.ai-name .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.ai-name .w i{display:inline-block;font-style:normal;transform:translateY(110%);animation:aiword 1.5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(5.1s + var(--k)*.14s)}
@keyframes aiword{to{transform:none}}
.ai-name .u{position:relative;z-index:0}
.ai-name .u::after{content:'';position:absolute;left:-.04em;right:-.04em;bottom:.1em;height:.2em;background:#D4FF3F;z-index:-1;transform:scaleX(0);transform-origin:0 50%;animation:aimark 1.1s cubic-bezier(.6,0,.2,1) 6.6s forwards}
@keyframes aimark{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.ai-name .w i{transform:none;animation:none}.ai-name .u::after{transform:none;animation:none}}

/* the scroll section joins the opening: paper, ink, light layers */
body.al .hm{background:#F7F6F2;color:#17171C}
body.al .ai-x{border-bottom:0}
.hm-k{color:#8A8A90}.hm-h{color:#17171C}.hm-h2 .pre{color:#9A9AA0}
.hm-h2 .lime{color:#17171C;position:relative;display:inline-block;z-index:0}
.hm-h2 .lime::after{content:'';position:absolute;left:-.03em;right:-.03em;bottom:.08em;height:.2em;background:#D4FF3F;z-index:-1}
.hm-lead{color:#5B5B63}.hm-q{color:#17171C}.hm-st{color:#5B5B63}.hm-st b{color:#17171C}.hm-st i{background:#8DB80A}
.hm-sf{background:#fff;border:1px solid #E4E2DB}.hm-sf.ai{background:#fff;border-color:#C9E36B}
.hm-cd,.hm-mini{border-color:#E9E7E0}
.hm-sk{color:#8A8A90}.hm-sk em{color:#5E7D00}
.hm-ly{background:#fff;border-color:#E4E2DB}
.hm-ly>b{color:#8A8A90}.hm-ly>b small{color:#A3A3A8}
.hm-tree span{border-color:rgba(23,23,28,.2);color:#17171C}.hm-tree i{color:#B9B7B0}.hm-tree span.l{border-color:#8DB80A;color:#3F5600;background:rgba(212,255,63,.35)}
.hm-wk u{color:#8A8A90}.hm-wk s{background:#F7F6F2;border-color:#E4E2DB;color:#17171C}.hm-wk s small{color:#8A8A90}.hm-wk s del{color:#8A8A90}
.hm-wk s.t{border-color:#8DB80A}.hm-wk s.mv{background:rgba(212,255,63,.5)}
.hm-ppl>span{background:#F2F0EA;color:#17171C}.hm-ppl>span.ok{background:rgba(212,255,63,.45);border-color:#8DB80A;color:#3F5600}
.hm-aud>span{border-color:rgba(23,23,28,.2);color:#17171C}.hm-aud strong{color:#3F5600}
.hm-th path{stroke:#8DB80A}.hm-th circle{fill:#8DB80A}
.hm.pin .hm-cap p{color:#17171C}.hm.pin .hm-cap p b{color:#6E8F00}
.hm.pin .dim{filter:opacity(.32)}
.hm.pin .hm-cue{color:#8A8A90}
.hm.pin #mo-use .hm-wk s.mv{background:#F7F6F2}.hm.pin.r7 #mo-use .hm-wk s.mv{background:rgba(212,255,63,.5)}
.hm.pin #mo-use .hm-ppl>.ok{border-color:transparent;background:#F2F0EA;color:#17171C}.hm.pin.r7 #mo-use .hm-ppl>.ok{border-color:#8DB80A;background:rgba(212,255,63,.45);color:#3F5600}
@media(max-width:700px){#mo-use{border-top-color:#E4E2DB}}
.ai-x .ai-name .l{display:block}.ai-x .ai-name .w{display:inline-block}
.ai-name .u::after{display:none}
.hm-h2 .lime::after{display:none}.hm-h2 .lime{display:block}
.hm.pin .hm-h{font-size:56px;font-weight:100}.hm-h{font-weight:100}
.ai-name .l .w{color:inherit}.ai-name .l{color:#17171C}.ai-name .l+.l{color:#8A8A90}
.hm.pin .dim{filter:opacity(.42)}
/* our neon, not olive: lime fills, lime threads with a fine ink edge */
.hm-th path{stroke:#D4FF3F;stroke-width:3;paint-order:stroke;filter:drop-shadow(0 0 .5px rgba(23,23,28,.55))}
.hm-th circle{fill:#D4FF3F;stroke:#17171C;stroke-width:1}
.hm-tree span.l,.hm-ppl>span.ok,.hm.pin.r7 #mo-use .hm-ppl>.ok{background:#D4FF3F;border-color:#D4FF3F;color:#17171C}
.hm-wk s.t{border-color:#17171C;border-width:1.5px}.hm-wk s.mv,.hm.pin.r7 #mo-use .hm-wk s.mv{background:#D4FF3F;border-color:#17171C;color:#17171C}
.hm-wk s.mv small,.hm-wk s.mv del{color:#3A3A44}
.hm-aud strong{color:#17171C;background:#D4FF3F;padding:2px 8px;border-radius:999px!important}
.hm-sk em{color:#17171C;background:#D4FF3F;padding:3px 8px;border-radius:999px!important}
.hm-sf.ai{border-color:#17171C}
.hm-st i{background:#D4FF3F;outline:1px solid #17171C}
/* the caption explains: a title and one line of detail */
.hm.pin .hm-cap{height:62px}
.hm.pin .hm-cap p b{background:#D4FF3F;color:#17171C;padding:3px 6px;border-radius:5px!important;letter-spacing:.12em}
.hm.pin .hm-cap p span{display:grid;gap:4px;white-space:normal}
.hm.pin .hm-cap p small{font:300 14px/1.4 'Hanken Grotesk';color:#6B6B72}
/* a label over the role surfaces, like the one over the system */
.hm.pin .hm-sfs{margin-top:22px}
.hm.pin .hm-sfs::before{content:attr(data-k);position:absolute;left:0;top:-22px;font:500 10px 'Hanken Grotesk';letter-spacing:.24em;text-transform:uppercase;color:#8A8A90}
.hm.pin #mo-build .hm-sfs::before{opacity:0;transition:opacity .5s}.hm.pin.r3 #mo-build .hm-sfs::before{opacity:1}
/* phone note: best on desktop */
.al-dtip{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;background:#17171C;color:#F7F6F2;border-radius:14px!important;font:400 13.5px/1.4 'Hanken Grotesk';box-shadow:0 10px 30px -10px rgba(0,0,0,.35);transform:translateY(130%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.al-dtip.on{transform:none}.al-dtip span{flex:1}.al-dtip span::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%!important;background:#D4FF3F;margin-right:9px;vertical-align:1px}
.al-dtip button{all:unset;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;border-radius:50%!important;color:rgba(247,246,242,.7);font-size:13px}.al-dtip button:focus-visible{outline:1px solid #D4FF3F}
.al-dtip[hidden]{display:none!important}
@media(max-width:700px){
  .ai-tag{max-width:none;font-size:15px;line-height:1.55;margin-top:22px;padding:0 4px}
  .ai-stack{gap:18px;padding-top:22px}.ai-stack div{gap:10px}.ai-stack dd{gap:10px 16px;line-height:1.5}
  .ai-foot{gap:24px}
}
/* "Built differently." in our neon: lime fill with a fine ink edge so it reads on paper */
.ai-name .l+.l{color:#D4FF3F;-webkit-text-stroke:1px rgba(23,23,28,.6);paint-order:stroke fill;font-weight:300}
/* neon without an outline: a deeper lime that still reads on paper; more air between the lines */
.ai-name .l+.l{color:#9CCB00;-webkit-text-stroke:0;font-weight:300}
.ai-name{line-height:1.16}.ai-name .w{padding-bottom:.12em;margin-bottom:-.12em}
/* ═══ ALTA · three moments: Build, Question, Exploration ═══ */
body.al .tm{position:relative;height:330vh;background:#F7F6F2;color:#17171C}
.tm-pin{position:sticky;top:0;height:100vh;height:100svh;max-width:1440px;margin:0 auto;padding:72px 40px 32px;box-sizing:border-box;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;overflow:hidden}
.tm-copies{grid-column:1/6;display:grid;align-content:center}
.tm-copy{grid-area:1/1;align-self:center;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.tm.m0 .tm-copy[data-m="0"],.tm.m1 .tm-copy[data-m="1"],.tm.m2 .tm-copy[data-m="2"]{opacity:1;transform:none;transition-delay:.18s;pointer-events:auto}
.tm-k{display:flex;gap:14px;font:500 11px 'Hanken Grotesk';letter-spacing:.24em;text-transform:uppercase;color:#8A8A90}.tm-k b{font-weight:500;color:#17171C}
.tm-h{margin:24px 0;font:100 clamp(44px,4.4vw,64px)/1.04 'Hanken Grotesk';letter-spacing:-.04em}
.tm-copy[data-m="1"] .tm-h{font-size:clamp(56px,6vw,88px)}
.tm-lead{margin:0;font:300 19px/1.6 'Hanken Grotesk';color:#5B5B63;max-width:40ch}
.tm-q{margin:28px 0 0;font:200 clamp(28px,2.7vw,40px)/1.25 'Hanken Grotesk';letter-spacing:-.02em;max-width:22ch}
.tm-note{margin:28px 0 0;display:flex;align-items:center;gap:10px;font:400 13px 'Hanken Grotesk';color:#5B5B63}.tm-note i{width:8px;height:8px;border-radius:50%!important;background:#D4FF3F;outline:1px solid #17171C}
.tm-skip{grid-area:2/1;margin-top:40px;justify-self:start;font:500 11px 'Hanken Grotesk';letter-spacing:.2em;text-transform:uppercase;color:#17171C;text-decoration:none;border-bottom:1px solid #17171C;padding-bottom:4px}
.tm-skip:focus-visible{outline:2px solid #17171C;outline-offset:4px}
.tm-dots{position:absolute;left:40px;bottom:28px;margin:0;padding:0;list-style:none;display:flex;gap:18px;font:500 10px 'Hanken Grotesk';letter-spacing:.22em;text-transform:uppercase;color:#B9B7B0}
.tm-dots li{display:flex;align-items:center;gap:8px;transition:color .4s}.tm-dots li::before{content:'';width:18px;height:1px;background:currentColor}
.tm.m0 .tm-dots li:nth-child(1),.tm.m1 .tm-dots li:nth-child(2),.tm.m2 .tm-dots li:nth-child(3){color:#17171C}
/* stage: one canvas, fitted */
.tm-stage{grid-column:6/13;position:relative;height:100%;min-height:0}
.tm-cv{position:absolute;left:0;top:0;width:788px;height:760px;transform-origin:0 0}
/* the real product, at a readable size */
.tm-scr{position:absolute;box-sizing:border-box;background:#F2F0EA;border:1px solid #DCD9D0;border-radius:28px!important;padding:18px 16px 0;display:flex;flex-direction:column;gap:11px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(23,23,28,.18);font-family:'Assistant';color:#17171C;
  transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s ease,filter .6s ease}
.tm-scr>*{flex-shrink:0}
.tm-hd{display:flex;align-items:center;gap:10px}.tm-tile{width:30px;height:30px;border-radius:9px!important;background:#17171C;color:#F2F0EA;display:grid;place-items:center;font:700 12px 'Assistant'}.tm-hd b{font:700 16px 'Assistant'}
.tm-hi{font:700 24px 'Assistant';margin:2px 0 0}.tm-sub{font:400 14px 'Assistant';color:#5B5B63;margin:-8px 0 0}
.tm-lab{font:600 12.5px 'Assistant';color:#5B5B63}
.tm-card,.tm-upd{background:#fff;border:1px solid rgba(220,217,208,.8);border-radius:14px!important;padding:11px 13px;overflow:hidden}
.tm-top{display:flex;align-items:center;gap:8px;font:400 13.5px 'Assistant';color:#5B5B63;flex-wrap:wrap}
.tm-lvl{font:600 12px 'Assistant';padding:1px 8px;border-radius:999px!important;color:#2B4C7E;background:rgba(43,76,126,.1)}.tm-lvl.green{color:#178A5C;background:rgba(23,138,92,.1)}
.tm-pill{margin-left:auto;font:600 12px 'Assistant';padding:2px 9px;border-radius:999px!important;color:#B9770E;background:rgba(185,119,14,.12)}
.tm-hrs{display:flex;align-items:baseline;gap:7px;margin-top:3px}.tm-hrs b,.tm-hrs span{font:300 24px 'Heebo'}.tm-hrs i{font-style:normal;color:#DCD9D0}.tm-hrs em{margin-left:auto;font:400 12.5px 'Assistant';color:#5B5B63;font-style:normal}
.tm-ban{margin:-11px -13px 9px;padding:6px 13px;background:rgba(124,22,38,.08);color:#7C1626;font:600 12.5px/1.35 'Assistant'}
.tm-ann{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid rgba(220,217,208,.8);border-radius:14px!important;padding:10px 13px;font:400 13.5px/1.4 'Assistant'}.tm-ann i{width:8px;height:8px;border-radius:50%!important;background:#E63946;flex:none;margin-top:6px}
.tm-tabs{margin:auto -16px 0;display:flex;justify-content:space-around;padding:12px 6px 16px;background:#fff;border-top:1px solid #DCD9D0;font:600 11px 'Assistant';color:#5B5B63}.tm-tabs .on{color:#17171C}
.tm-rsvp{display:flex;gap:8px}.tm-rsvp span{flex:1;text-align:center;font:600 13.5px 'Assistant';padding:8px 0;border-radius:999px!important;border:1px solid #DCD9D0;background:#fff}.tm-rsvp .on{background:#17171C;color:#fff;border-color:#17171C}
.tm-row{display:flex;gap:6px;margin-top:8px}.tm-chip{flex:1;background:#fff;border:1px solid rgba(220,217,208,.8);border-radius:12px!important;padding:8px;font:600 12px 'Assistant'}.tm-chip small{display:block;font:400 11.5px 'Assistant';color:#5B5B63}
.tm-wk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.tm-wk div{display:grid;gap:5px;align-content:start}
.tm-wk u{text-decoration:none;font:600 11.5px 'Assistant';color:#5B5B63;text-align:center}
.tm-wk s{text-decoration:none;background:#fff;border:1px solid rgba(220,217,208,.9);border-radius:9px!important;padding:5px;font:600 11px/1.25 'Assistant';display:grid;transition:background .5s,border-color .5s}.tm-wk s small{display:block;font:400 11px 'Heebo';color:#5B5B63}
.tm-wk .tue{border:1.5px solid #17171C}.tm-wk .tue>span{grid-area:1/1;transition:opacity .4s}.tm-wk .tue .b{opacity:0}.tm-wk del{color:#5B5B63}
.tm-upd{display:none}
/* Seamless UI */
.tm-ask{background:#FBFAF7;border-color:#17171C;gap:12px}
.tm-me{align-self:flex-end;max-width:90%;background:#17171C;color:#F2F0EA;border-radius:18px 6px 18px 18px!important;padding:11px 15px;font:400 16.5px/1.4 'Assistant'}
.tm-av{display:flex;gap:10px;align-items:flex-start}.tm-av>i{width:26px;height:26px;border-radius:50%!important;background:#17171C;flex:none;display:grid;place-items:center;margin-top:4px}.tm-av>i::after{content:'';width:9px;height:9px;border-radius:50%!important;background:#D4FF3F}
.tm-bub{flex:1;background:#fff;border:1px solid rgba(220,217,208,.8);border-radius:6px 18px 18px 18px!important;padding:14px 16px;display:grid;gap:12px;font:400 15.5px/1.45 'Assistant'}
.tm-ctx{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(220,217,208,.9);border-radius:12px!important;font:600 15px 'Assistant'}.tm-ctx small{display:block;font:400 13px 'Assistant';color:#5B5B63}.tm-ctx .ok{margin-left:auto;width:22px;height:22px;border-radius:50%!important;background:#17171C;color:#fff;display:grid;place-items:center;font-size:12px}
.tm-diff{display:grid;gap:6px;border:1px solid rgba(220,217,208,.9);border-radius:10px!important;padding:10px 14px;margin:0}.tm-diff div{display:flex;gap:14px;align-items:baseline}.tm-diff dt{width:52px;flex:none;color:#5B5B63;font-size:14px}.tm-diff dd{margin:0;font:600 16.5px 'Assistant'}.tm-diff dd span{font-weight:400;color:#5B5B63;margin-left:8px;font-size:13.5px}.tm-diff dd del{font-weight:400}
.tm-fine{font:400 14px/1.45 'Assistant';color:#5B5B63}
.tm-acts{display:flex;gap:8px}.tm-btn{flex:1;height:44px;border-radius:12px!important;background:#17171C;color:#F2F0EA;font:600 15.5px 'Assistant';display:grid;place-items:center;transition:transform .15s,background .3s}.tm-btn.ghost{flex:.6;background:#fff;color:#17171C;border:1px solid #DCD9D0}
.tm-done{display:none;align-items:center;gap:8px;font:600 14px 'Assistant';color:#17171C;background:#D4FF3F;border-radius:10px!important;padding:9px 12px}
.tm-bar{margin-top:auto;margin-bottom:16px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(220,217,208,.8);border-radius:999px!important;padding:8px 8px 8px 16px;font:400 15.5px 'Assistant';color:#5B5B63}.tm-bar span{flex:1}.tm-bar i{font-style:normal;width:34px;height:34px;border-radius:50%!important;background:#17171C;color:#fff;display:grid;place-items:center}
.tm-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .5s}
.tm-path path{fill:none;stroke:#17171C;stroke-opacity:.35;stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .3s}
.tm-path circle{fill:#F7F6F2;stroke:#17171C;stroke-opacity:.5;opacity:0;transition:opacity .4s 1.2s}
.tm-route{display:none}
.tm-tag{position:absolute;left:430px;top:92px;display:flex;align-items:center;gap:8px;font:500 10px 'Hanken Grotesk';letter-spacing:.22em;text-transform:uppercase;color:#17171C;opacity:0;transition:opacity .5s .5s}
.tm-tag i{width:8px;height:8px;border-radius:50%!important;background:#D4FF3F;outline:1px solid #17171C}

/* ── wide: positions per moment ── */
.tm [data-s=home]{left:0;top:70px;width:252px;height:600px;z-index:3}
.tm [data-s=week]{left:268px;top:10px;width:252px;height:600px;z-index:2}
.tm [data-s=parent]{left:536px;top:120px;width:252px;height:600px;z-index:1}
.tm [data-s=ask]{left:10px;top:60px;width:430px;height:640px;z-index:4;opacity:0;transform:translateY(40px);pointer-events:none}
/* 02 · the product steps back, the question takes the stage */
.tm.m1 [data-s=home],.tm.m1 [data-s=week],.tm.m1 [data-s=parent]{opacity:.24;filter:blur(1.4px) grayscale(.3);box-shadow:none}
.tm.m1 [data-s=home]{transform:translate(60px,30px) scale(.86) rotate(-2deg)}.tm.m1 [data-s=week]{transform:translate(40px,40px) scale(.86)}.tm.m1 [data-s=parent]{transform:translate(20px,40px) scale(.86) rotate(2deg)}
.tm.m1 .tm-path{opacity:1}.tm.m1 .tm-path path{stroke-dashoffset:0}.tm.m1 .tm-path circle{opacity:1}
/* 03 · the request in front, the same schedule underneath */
.tm.m2 [data-s=home],.tm.m2 [data-s=parent]{opacity:0;transform:translateY(30px) scale(.95)}
.tm.m2 [data-s=week]{transform:translate(200px,110px);height:560px}
.tm.m2 [data-s=ask]{opacity:1;transform:none}
.tm.m2 .tm-tag{opacity:1}
.tm.m2 [data-s=week] .tm-teams{display:none}.tm.m2 [data-s=week] .tm-upd{display:block;opacity:0;transition:opacity .5s}
/* inside 03, by time: the decision, then the change */
.tm [data-s=ask] .tm-av{opacity:0;transform:translateY(10px);transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1)}
.tm.e1 [data-s=ask] .tm-av{opacity:1;transform:none}
.tm.e2 .tm-btn:not(.ghost){background:#3A3A44}
.tm.e3 .tm-acts{display:none}.tm.e3 .tm-done{display:flex}
.tm.e3 .tm-wk .tue{background:#D4FF3F}.tm.e3 .tm-wk .tue .a{opacity:0}.tm.e3 .tm-wk .tue .b{opacity:1}
.tm.e3 [data-s=week] .tm-upd{opacity:1}
@media(prefers-reduced-motion:reduce){.tm *{transition-duration:.01s!important;transition-delay:0s!important}}

/* ── narrow (tablet, phone): copy on top, one focal point below, readable ── */
@media(max-width:1100px){
  body.al .tm{height:320vh}
  .tm-pin{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);padding:68px 16px 18px;row-gap:16px;align-items:start}
  .tm-copies,.tm-stage{grid-column:1}
  .tm-h{font-size:34px;margin:12px 0 10px}.tm-copy[data-m="1"] .tm-h{font-size:42px}
  .tm-lead{font-size:15px;line-height:1.5}.tm-q{font-size:22px;margin-top:12px}.tm-note{margin-top:12px;font-size:12px}
  .tm-skip{margin-top:14px;font-size:10px}
  .tm-dots{display:none}
  .tm-stage{width:100%;max-width:440px;justify-self:center}
  .tm-cv{position:absolute;inset:0;width:auto;height:auto;transform:none!important}
  .tm [data-s]{left:0!important;width:100%!important;height:100%!important}
  .tm [data-s=home]{top:24px}.tm [data-s=week]{top:12px;transform:scale(.95);transform-origin:50% 0}.tm [data-s=parent]{top:0;transform:scale(.9);transform-origin:50% 0}
  .tm [data-s=week]>*,.tm [data-s=parent]>*{visibility:hidden}
  .tm [data-s=home]{-webkit-mask:linear-gradient(#000 80%,transparent);mask:linear-gradient(#000 80%,transparent)}
  .tm [data-s=home] .tm-tabs{display:none}
  .tm [data-s=ask]{top:0;height:auto!important;max-height:100%;padding-bottom:14px}
  .tm [data-s=ask] .tm-hd,.tm [data-s=ask] .tm-bar,.tm [data-s=ask] .tm-av>i{display:none}
  .tm-me{font-size:15px;padding:10px 13px}.tm-bub{padding:12px;gap:10px;font-size:14.5px}.tm-diff dd{font-size:15px}.tm-btn{height:42px;font-size:15px}
  .tm.m1 [data-s=home],.tm.m1 [data-s=week],.tm.m1 [data-s=parent]{opacity:.12;transform:none}
  .tm.m1 [data-s=week]{transform:scale(.95)}.tm.m1 [data-s=parent]{transform:scale(.9)}
  .tm-path{display:none}
  .tm-route{display:flex;position:absolute;left:0;right:0;top:8px;flex-wrap:wrap;gap:8px 6px;list-style:none;margin:0;padding:0;counter-reset:t;opacity:0;transform:translateY(10px);transition:opacity .5s .3s,transform .6s .3s}
  .tm-route li{counter-increment:t;display:flex;align-items:center;gap:7px;font:400 13.5px 'Assistant';background:#fff;border:1px solid #E4E2DB;border-radius:999px!important;padding:6px 11px 6px 7px}
  .tm-route li::before{content:counter(t);width:18px;height:18px;border-radius:50%!important;background:#F2F0EA;display:grid;place-items:center;font:600 10px 'Hanken Grotesk';color:#5B5B63}
  .tm-route li:last-child{background:#17171C;color:#fff;border-color:#17171C}.tm-route li:last-child::before{background:#3A3A44;color:#fff}
  .tm.m1 .tm-route{opacity:1;transform:none}
  .tm.m2 [data-s=week]{transform:none;opacity:0}
  .tm-tag{display:none}
}
.tm.m1 .tm-route li{box-shadow:0 2px 0 rgba(247,246,242,1)}.tm.m1 .tm-route{z-index:5}
/* "Built differently." back to a deep grey */
.ai-name .l+.l{color:#5B5B63;font-weight:200}
/* ── Build: one phone, moving through the real product by role ── */
.tm [data-s=home],.tm [data-s=parent]{display:none}
.tm-tour{position:absolute;left:194px;top:0;width:400px;height:760px;display:flex;flex-direction:column;align-items:center;gap:16px;transition:opacity .6s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .6s}
.tm-roles{display:flex;align-items:center;gap:6px;font:500 13px 'Hanken Grotesk'}
.tm-roles span{padding:7px 14px;border-radius:999px!important;border:1px solid #DCD9D0;color:#8A8A90;transition:all .35s}
.tm-roles span.on{background:#17171C;border-color:#17171C;color:#F7F6F2}
.tm-cur{font-style:normal;margin-left:10px;font:400 13px 'Hanken Grotesk';color:#5B5B63;min-width:110px}
.tm-ph{position:relative;width:360px;height:660px;background:#F2F0EA;border:1px solid #DCD9D0;border-radius:34px!important;overflow:hidden;box-shadow:0 40px 80px -40px rgba(23,23,28,.25);font-family:'Assistant';color:#17171C}
.tm-pg{position:absolute;inset:0;padding:22px 18px 0;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateX(30px);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.tm-pg>*{flex-shrink:0}.tm-pg.on{opacity:1;transform:none}.tm-pg.was{opacity:0;transform:translateX(-30px)}
.tm-pg .tm-tabs{margin:auto -18px 0}
.tm-pg .tm-hrs b,.tm-pg .tm-hrs span{font-size:28px}.tm-pg .tm-hi{font-size:26px}
.tm-pg .tm-wk s{font-size:12px;padding:6px}.tm-pg .tm-wk s small{font-size:12px}
.tm-att{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tm-att span{background:#fff;border:1px solid rgba(220,217,208,.8);border-radius:12px!important;padding:10px;font:400 13px 'Assistant';color:#5B5B63;display:grid;gap:2px}.tm-att b{font:300 26px 'Heebo';color:#17171C}
.tm-cta{display:grid;place-items:center;height:46px;border-radius:12px!important;background:#17171C;color:#F2F0EA;font:600 15px 'Assistant'}
.tm-prog{display:flex;gap:6px}.tm-prog i{width:22px;height:3px;border-radius:2px!important;background:#DCD9D0;transition:background .3s}.tm-prog i.on{background:#17171C}
/* Question: the phone steps back; the route a person has to learn takes the stage */
.tm.m1 .tm-tour{opacity:.18;filter:blur(1.6px) grayscale(.4);transform:scale(.86)}
.tm-path{display:none!important}
.tm-route{display:flex;position:absolute;left:84px;right:84px;top:300px;flex-wrap:wrap;justify-content:center;gap:10px 8px;list-style:none;margin:0;padding:0;counter-reset:t;opacity:0;transform:translateY(12px);transition:opacity .5s .3s,transform .7s .3s;z-index:5}
.tm-route li{counter-increment:t;display:flex;align-items:center;gap:8px;font:400 16px 'Assistant';background:#fff;border:1px solid #E4E2DB;border-radius:999px!important;padding:8px 14px 8px 8px}
.tm-route li::before{content:counter(t);width:22px;height:22px;border-radius:50%!important;background:#F2F0EA;display:grid;place-items:center;font:600 11px 'Hanken Grotesk';color:#5B5B63}
.tm-route li:last-child{background:#17171C;color:#fff;border-color:#17171C}.tm-route li:last-child::before{background:#3A3A44;color:#fff}
.tm.m1 .tm-route{opacity:1;transform:none}
/* Exploration: the tour gives way to the request and the schedule underneath */
.tm [data-s=week]{opacity:0;transform:translate(200px,140px)}
.tm.m2 .tm-tour{opacity:0;transform:scale(.94);pointer-events:none}
.tm.m2 [data-s=week]{opacity:1;transform:translate(200px,110px)}
@media(max-width:1100px){
  .tm-tour{position:absolute;left:0;right:0;top:0;width:auto;height:100%;gap:10px}
  .tm-roles{font-size:12px}.tm-roles span{padding:6px 11px}.tm-cur{display:none}
  .tm-ph{width:100%;height:auto;flex:1;min-height:0;border-radius:26px!important}
  .tm-pg{padding:16px 14px 0}.tm-pg .tm-tabs{margin:auto -14px 0}
  .tm-prog{display:none}
  .tm.m1 .tm-tour{transform:none}
  .tm-route{left:0;right:0;top:40px}.tm-route li{font-size:13.5px;padding:6px 11px 6px 7px}.tm-route li::before{width:18px;height:18px;font-size:10px}
  .tm [data-s=week],.tm.m2 [data-s=week]{opacity:0!important}
}
/* ── Problem: the club, as it ran before ── */
body.al .tm{height:430vh}
.tm.mp .tm-copy[data-m="p"]{opacity:1;transform:none;transition-delay:.18s;pointer-events:auto}
.tm-q-s{font-size:clamp(22px,2vw,28px)}
.tm-dots li:nth-child(n){color:#B9B7B0}
.tm.mp .tm-dots li:nth-child(1),.tm.m0 .tm-dots li:nth-child(2),.tm.m1 .tm-dots li:nth-child(3),.tm.m2 .tm-dots li:nth-child(4){color:#17171C}
.tm-chat{position:absolute;left:194px;top:0;width:400px;height:760px;display:flex;flex-direction:column;align-items:center;gap:16px;opacity:0;transform:translateY(20px);transition:opacity .6s,transform .9s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.tm.mp .tm-chat{opacity:1;transform:none}
.tm.mp .tm-tour{opacity:0;transform:translateY(20px)}
.tm-groups{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:400px}
.tm-groups span{display:flex;align-items:center;gap:7px;padding:6px 8px 6px 12px;border-radius:999px!important;border:1px solid #DCD9D0;background:#fff;font:400 12.5px 'Assistant';color:#17171C}
.tm-groups b{min-width:22px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:999px!important;background:#E63946;color:#fff;font:600 11px 'Assistant';display:grid;place-items:center}
.tm-thread{background:#EDEBE4;padding:0 14px 14px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.tm-th-hd{position:absolute;left:0;right:0;top:0;padding:16px 18px 12px;background:#fff;border-bottom:1px solid #DCD9D0;display:grid;gap:2px}.tm-th-hd b{font:700 15px 'Assistant'}.tm-th-hd small{font:400 12px 'Assistant';color:#5B5B63}
.tm-msg{align-self:flex-start;max-width:78%;background:#fff;border-radius:4px 16px 16px 16px!important;padding:8px 12px;font:400 15px/1.35 'Assistant';color:#17171C;opacity:0;transform:translateY(10px)}
.tm-msg small{display:block;font:600 11.5px 'Assistant';color:#8A8A90;margin-bottom:2px}
.tm-msg.me{align-self:flex-end;background:#F7F6F2;border-radius:16px 4px 16px 16px!important}
.tm.mp .tm-msg{animation:tmmsg .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.4s + var(--i)*.55s)}
@keyframes tmmsg{to{opacity:1;transform:none}}
.tm-unread{align-self:center;margin-top:4px;font:600 12px 'Assistant';color:#fff;background:#17171C;border-radius:999px!important;padding:5px 12px;opacity:0}
.tm.mp .tm-unread{animation:tmmsg .5s ease forwards 4s}
@media(prefers-reduced-motion:reduce){.tm.mp .tm-msg,.tm.mp .tm-unread{animation:none;opacity:1;transform:none}}
@media(max-width:1100px){.tm-chat{left:0;right:0;width:auto;height:100%;gap:10px}.tm-groups span{font-size:12px}.tm-thread{width:100%;flex:1;height:auto;min-height:0}.tm-msg{font-size:14px}}
.tm-th-hd{z-index:2}.tm-thread{overflow:hidden}
@media(max-width:1100px){.tm-copy[data-m="p"] .tm-lead{font-size:14px}.tm-copy[data-m="p"] .tm-q-s{font-size:18px;margin-top:10px}.tm-copy[data-m="p"] .tm-h{font-size:30px}.tm-groups span:nth-child(n+3){display:none}}
/* the problem: chats, files, forms, portals, notices, all at once */
.tm-chat .tm-thread{width:340px;height:600px}
.tm-frags{position:absolute;inset:0;pointer-events:none;z-index:3}
.tm-frag{position:absolute;display:flex;align-items:center;gap:10px;width:250px;box-sizing:border-box;padding:10px 12px;background:#fff;border:1px solid #DCD9D0;border-radius:12px!important;box-shadow:0 14px 30px -18px rgba(23,23,28,.35);font-family:'Assistant';opacity:0;transform:translateY(12px) rotate(var(--r,0deg)) scale(.96)}
.tm-frag b{display:block;font:600 13px/1.3 'Assistant';color:#17171C}.tm-frag small{display:block;font:400 12px 'Assistant';color:#8A8A90}
.tm-fi{flex:none;width:32px;height:32px;border-radius:8px!important;display:grid;place-items:center;font:700 11px 'Hanken Grotesk';color:#fff;background:#5B5B63}
.k-sheet .tm-fi{background:#1E7A46}.k-pdf .tm-fi{background:#C81E33}.k-mail .tm-fi{background:#2B4C7E}.k-web .tm-fi{background:#8A8A90}.k-form .tm-fi{background:#6B3FA0}.k-cal .tm-fi{background:#B9770E}.k-doc .tm-fi{background:#3A6EA5}.k-note .tm-fi{background:#E3B505;color:#17171C}.k-pay .tm-fi{background:#17171C}
.k-web{width:270px;padding-top:30px}.k-web::before{content:'';position:absolute;left:0;right:0;top:0;height:20px;border-bottom:1px solid #E4E2DB;border-radius:12px 12px 0 0!important;background:#F2F0EA linear-gradient(90deg,#E63946 0 6px,transparent 6px 12px,#E3B505 12px 18px,transparent 18px 24px,#1E7A46 24px 30px,transparent 30px) 10px 7px/30px 6px no-repeat}
.k-note{background:#FFF7C2;border-color:#EAD98A}
.tm-frag:nth-child(1){left:-20px;top:30px;--r:-4deg}
.tm-frag:nth-child(2){left:560px;top:70px;--r:3deg}
.tm-frag:nth-child(3){left:-40px;top:250px;--r:2deg}
.tm-frag:nth-child(4){left:540px;top:250px;--r:-2deg}
.tm-frag:nth-child(5){left:10px;top:450px;--r:-3deg}
.tm-frag:nth-child(6){left:570px;top:430px;--r:4deg}
.tm-frag:nth-child(7){left:-30px;top:620px;--r:1deg}
.tm-frag:nth-child(8){left:540px;top:600px;--r:-5deg}
.tm-frag:nth-child(9){left:280px;top:690px;--r:2deg}
.tm.mp .tm-frag{animation:tmfrag .6s cubic-bezier(.2,.8,.2,1) forwards,tmfloat 6s ease-in-out infinite alternate;animation-delay:calc(.5s + var(--i)*.32s),calc(1.5s + var(--i)*.4s)}
@keyframes tmfrag{to{opacity:1;transform:translateY(0) rotate(var(--r,0deg)) scale(1)}}
@keyframes tmfloat{from{translate:0 0}to{translate:0 -6px}}
@media(prefers-reduced-motion:reduce){.tm.mp .tm-frag{animation:none;opacity:1;transform:rotate(var(--r,0deg))}}
@media(max-width:1100px){
  .tm-chat .tm-thread{width:100%;height:auto}
  .tm-frag{width:190px;padding:7px 9px;gap:8px}.tm-frag b{font-size:11.5px}.tm-frag small{font-size:10.5px}.tm-fi{width:24px;height:24px;font-size:9px}.k-web{width:200px;padding-top:24px}.k-web::before{height:16px;background-position:8px 5px}
  .tm-frag:nth-child(1){left:-6px;top:58px}.tm-frag:nth-child(2){left:auto;right:-6px;top:96px}.tm-frag:nth-child(3){left:-10px;top:150px}.tm-frag:nth-child(4){left:auto;right:-10px;top:200px}
  .tm-frag:nth-child(5){left:6px;top:250px}.tm-frag:nth-child(6){left:auto;right:4px;top:300px}
  .tm-frag:nth-child(n+7){display:none}
}
.tm-frags{left:-194px;right:auto;width:788px}
@media(max-width:1100px){.tm-frags{left:0;width:auto;right:0}}
/* tidier left column, smaller stage on the right */
@media(min-width:1101px){
  .tm-copies{grid-column:1/6}.tm-stage{grid-column:7/13}
  .tm-h{font-size:clamp(40px,3.6vw,54px);line-height:1.06;margin:20px 0 22px}
  .tm-copy[data-m="1"] .tm-h{font-size:clamp(52px,5vw,72px)}
  .tm-lead{font-size:17px;line-height:1.65;max-width:38ch}
  .tm-q,.tm-q-s{font-size:clamp(20px,1.7vw,24px);line-height:1.4;max-width:30ch;margin-top:26px;padding-top:20px;border-top:1px solid #E4E2DB}
  .tm-note{margin-top:22px}
  .tm-skip{margin-top:32px}
}
.tm .tm-dots li{color:#B9B7B0!important}
.tm.mp .tm-dots li:nth-child(1),.tm.m0 .tm-dots li:nth-child(2),.tm.m1 .tm-dots li:nth-child(3),.tm.m2 .tm-dots li:nth-child(4){color:#17171C!important}
/* problem: scroll-driven build-up, quiet and smooth */
body.al .tm{height:520vh}
.tm.mp .tm-frag,.tm.mp .tm-msg,.tm.mp .tm-unread{animation:none}
.tm-frag{transition:opacity .7s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.tm-frag.in{opacity:1;transform:translateY(0) rotate(var(--r,0deg)) scale(1)}
.tm.mp .tm-frag.in{animation:tmfloat 6s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.7s)}
.tm-msg{transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1)}.tm-msg.in{opacity:1;transform:none}
.tm-msg:not(.in){position:absolute;visibility:hidden}
.tm-unread{transition:opacity .5s}.tm-unread.in{opacity:1}
.tm-groups b{font-variant-numeric:tabular-nums}
/* more of the load: professional management and paperwork */
.k-prog .tm-fi{background:#178A5C}.k-team .tm-fi{background:#2B4C7E}.k-plan .tm-fi{background:#5B5B63}.k-comp .tm-fi{background:#B9770E}.k-coach .tm-fi{background:#6B3FA0}.k-judge .tm-fi{background:#7C1626}
.tm-frag:nth-child(10){left:30px;top:140px;--r:3deg}
.tm-frag:nth-child(11){left:575px;top:165px;--r:-3deg}
.tm-frag:nth-child(12){left:-10px;top:355px;--r:-2deg}
.tm-frag:nth-child(13){left:565px;top:345px;--r:2deg}
.tm-frag:nth-child(14){left:40px;top:540px;--r:2deg}
.tm-frag:nth-child(15){left:560px;top:520px;--r:-3deg}
/* paper documents behind it all */
.tm-pages{position:absolute;left:-194px;top:0;width:788px;height:760px;z-index:0;pointer-events:none}
.tm-chat .tm-thread{position:relative;z-index:1}
.tm-page{position:absolute;width:150px;height:200px;box-sizing:border-box;padding:16px 14px;background:#fff;border:1px solid #E4E2DB;box-shadow:0 18px 30px -22px rgba(23,23,28,.35);display:flex;flex-direction:column;gap:7px;opacity:0;transform:translateY(16px) rotate(var(--r,0deg));transition:opacity .8s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.tm-page b{font:700 10.5px/1.3 'Assistant';color:#17171C;margin-bottom:4px}
.tm-page i{display:block;height:4px;border-radius:2px!important;background:#ECEAE3}.tm-page i.s{width:60%}
.tm-page span{margin-top:auto;width:46px;height:16px;border-bottom:1px solid #8A8A90;align-self:flex-end}
.tm-page.in{opacity:1;transform:rotate(var(--r,0deg))}
.tm-page:nth-child(1){left:150px;top:40px;--r:-7deg}
.tm-page:nth-child(2){left:500px;top:60px;--r:6deg}
.tm-page:nth-child(3){left:130px;top:470px;--r:5deg}
.tm-page:nth-child(4){left:520px;top:440px;--r:-6deg}
.tm-page:nth-child(5){left:330px;top:560px;--r:3deg}
@media(max-width:1100px){.tm-pages{left:0;width:100%}.tm-page{width:110px;height:150px;padding:10px}.tm-page:nth-child(1){left:-10px;top:40px}.tm-page:nth-child(2){left:auto;right:-10px;top:60px}.tm-page:nth-child(n+3){display:none}}
.tm-page:nth-child(1){left:-120px;top:-20px}.tm-page:nth-child(2){left:780px;top:-10px}.tm-page:nth-child(3){left:-130px;top:560px}.tm-page:nth-child(4){left:790px;top:560px}.tm-page:nth-child(5){left:-110px;top:270px}
@media(max-width:1100px){.tm-page:nth-child(1){left:-10px;top:40px}.tm-page:nth-child(2){left:auto;right:-10px;top:60px}}
/* skip the opening animation (for the second and third visit) */
.ai-skipi{all:unset;cursor:pointer;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;font:500 10px 'Hanken Grotesk';letter-spacing:.24em;text-transform:uppercase;color:#8A8A90;padding:8px 14px;border-radius:999px!important;transition:color .2s,opacity .4s}
.ai-skipi:hover{color:#17171C}.ai-skipi:focus-visible{outline:1px solid #17171C}
.ai-x.done .ai-skipi{opacity:0;pointer-events:none}
.ai-x.done *,.ai-x.done *::before,.ai-x.done *::after{animation-delay:0s!important;animation-duration:.01s!important;transition-delay:0s!important;transition-duration:.25s!important}
.ai-x.done .ai-hall .gym{display:none}
@media(prefers-reduced-motion:reduce){.ai-skipi{display:none}}
.ai-skipi{position:fixed;bottom:20px;z-index:40;background:rgba(247,246,242,.85)}
/* ── problem, organised: loaded but ordered. Two neat columns around the chat, no rotation ── */
@media(min-width:1101px){
  .tm-chat{left:0;width:788px;height:760px;justify-content:center}
  .tm-chat .tm-thread{width:300px;height:560px}
  .tm-groups{max-width:300px}
  .tm-frags{left:0;width:788px;top:0;height:760px;display:grid;grid-template-columns:224px 1fr 224px;grid-auto-rows:min-content;row-gap:8px;align-content:center}
  .tm-frag{position:relative!important;left:auto!important;top:auto!important;right:auto!important;width:auto!important;--r:0deg;padding:9px 11px;gap:9px}
  .tm-frag b{font-size:12px}.tm-frag small{font-size:11px}.tm-fi{width:28px;height:28px;font-size:10px}
  .tm-frag.k-web{padding-top:26px}.tm-frag.k-web::before{height:17px;background-position:9px 6px}
  .tm-frag.k-sheet,.tm-frag.k-form,.tm-frag.k-doc,.tm-frag.k-prog,.tm-frag.k-team,.tm-frag.k-judge,.tm-frag.k-pdf{grid-column:1}
  .tm-frag.k-mail,.tm-frag.k-web,.tm-frag.k-cal,.tm-frag.k-note,.tm-frag.k-pay,.tm-frag.k-plan,.tm-frag.k-comp,.tm-frag.k-coach{grid-column:3}
  .tm.mp .tm-frag.in{animation:none}
  /* the paperwork, as one neat stack under the left column */
  .tm-pages{left:0;top:0;width:224px;height:760px}
  .tm-page{width:120px;height:150px;padding:12px 11px;--r:0deg;left:auto!important;right:auto!important}
  .tm-page:nth-child(1){left:0!important;top:612px!important}.tm-page:nth-child(2){left:16px!important;top:606px!important}.tm-page:nth-child(3){left:32px!important;top:600px!important}.tm-page:nth-child(4){left:48px!important;top:594px!important}.tm-page:nth-child(5){left:64px!important;top:588px!important}
  .tm-pages::after{content:'Forms to print, sign, scan';position:absolute;left:196px;top:690px;width:120px;font:500 10px/1.4 'Hanken Grotesk';letter-spacing:.14em;text-transform:uppercase;color:#8A8A90}
  .tm-frags{padding-bottom:150px;box-sizing:border-box}
}
@media(max-width:1100px){
  .tm-frag{--r:0deg}.tm.mp .tm-frag.in{animation:none}
}
@media(min-width:1101px){
  .tm-frag,.tm-page{--r:0deg!important}
  .tm-frags{grid-auto-flow:row dense;align-content:start;padding-top:96px}
  .tm-pages::after{left:0;top:770px;width:224px}
  .tm-page:nth-child(1){top:622px!important}.tm-page:nth-child(2){top:616px!important}.tm-page:nth-child(3){top:610px!important}.tm-page:nth-child(4){top:604px!important}.tm-page:nth-child(5){top:598px!important}
}
/* ── the problem, illustrated: a tangle around one phone ── */
.tm-chat{left:0!important;width:788px!important;height:760px!important}
.tm-web{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.w-ln{fill:none;stroke:#17171C;stroke-opacity:.22;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1)}
.w-ln.x{stroke-opacity:.12;stroke-dasharray:1;stroke-width:.8}
.w-ln.in{stroke-dashoffset:0}
.w-ph>rect:first-child{fill:#fff;stroke:#17171C;stroke-width:1.2}
.w-scr{fill:#EDEBE4}.w-notch{stroke:#17171C;stroke-width:3;stroke-linecap:round}
.w-msg{fill:#fff;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}.w-msg.me{fill:#D9D6CC}.w-msg.in{opacity:1;transform:none}
.w-badge rect{fill:#E63946}.w-badge text{font:600 11px 'Assistant';fill:#fff;font-variant-numeric:tabular-nums}
.w-it{opacity:0;transition:opacity .6s ease}.w-it.in{opacity:1}
.w-bob{transform:translateY(10px) scale(.9);transition:transform .8s cubic-bezier(.2,.8,.2,1)}.w-it.in .w-bob{transform:none;animation:wbob 5s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.6s)}
@keyframes wbob{from{translate:0 -2px}to{translate:0 3px}}
.w-tile{fill:#fff;stroke:#DCD9D0;filter:drop-shadow(0 8px 12px rgba(23,23,28,.10))}
.w-gly{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.k-note .w-tile{fill:#FFF7C2;stroke:#EAD98A}.k-page .w-tile{fill:#FBFAF7}
.w-lab{font:400 11px 'Assistant';fill:#5B5B63}
@media(prefers-reduced-motion:reduce){.w-ln,.w-it,.w-bob,.w-msg{transition:none!important;animation:none!important}}
@media(max-width:1100px){.tm-chat{width:auto!important;height:100%!important;right:0}.w-lab{font-size:13px}}
.tm-q-s{max-width:32ch}
@media(max-width:1100px){.tm-copy[data-m="p"] .tm-q-s{max-width:none}}
.w-lab{font-size:13px;fill:#3A3A44}
/* the coach, the thin phone, drawn objects */
.w-coach path,.w-coach circle{fill:none;stroke:#17171C;stroke-opacity:.55;stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
.w-coach .w-body{fill:#F7F6F2}
.w-coach .w-whistle{fill:#D4FF3F;stroke-opacity:.8}
.w-ph .w-frame{fill:#fff;stroke:#17171C;stroke-width:1}
.w-ph>rect:first-child{stroke-width:1}
.w-scr{fill:#EDEBE4}.w-notch{stroke:#17171C;stroke-width:1.6;stroke-linecap:round}
.w-badge text{font-size:10px}
.w-draw path,.w-draw circle{fill:none;stroke:#17171C;stroke-width:1.3;stroke-linejoin:miter;stroke-linecap:square}
.w-draw .w-ac{stroke:none}
.w-draw .w-back{fill:#F7F6F2}.w-draw .w-coin{fill:#F3DDB6}.w-draw .w-pin{fill:#E63946;stroke:none}
.w-draw .w-n{font:600 15px 'Heebo';fill:#17171C;stroke:none}
.w-tile{display:none}
.w-img{mix-blend-mode:multiply}
.w-ln.a{stroke-opacity:.3}
.w-neon{fill:#D4FF3F;stroke:none}
/* parents' messages around her head */
.w-pb{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1)}.w-pb.in{opacity:1;transform:none}
.w-pbb{fill:#fff;stroke:#17171C;stroke-width:1.1;stroke-linejoin:miter}
.w-pb:nth-child(odd) .w-pbb{fill:#F2FFC2}
.w-pb text{font:500 12px 'Assistant';fill:#17171C}
.w-pi{fill:none;stroke:#E63946;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.w-pb text{font-size:11px}
.w-pk{font:500 10px 'Hanken Grotesk';letter-spacing:.22em;text-transform:uppercase;fill:#8A8A90}
.w-pb .w-ln.pl{stroke-opacity:.28}
.w-draw path,.w-draw circle{stroke-width:.9}
/* parents: minimal iOS-style notifications, square */
.w-nt{fill:#fff;stroke:#E4E2DB;stroke-width:1}
.w-nf{font:600 10.5px -apple-system,'SF Pro Text','Assistant',sans-serif;fill:#17171C}
.w-ntm{font:400 9.5px -apple-system,'SF Pro Text','Assistant',sans-serif;fill:#8E8E93}
.w-nx{font:400 11px -apple-system,'SF Pro Text','Assistant',sans-serif;fill:#3A3A3C}.w-nx.red{fill:#FF3B30}
.w-pb:nth-child(odd) .w-pbb{fill:#fff}
/* notifications in the page's own palette: ink outline glyphs, muted text */
.w-ni{fill:none;stroke:#17171C;stroke-width:1;stroke-linejoin:round;stroke-linecap:round}.w-ni.f{fill:#17171C;stroke:none}
.w-nt{fill:#FBFAF7;stroke:#DCD9D0}
.w-nf{font:600 10.5px 'Assistant',sans-serif;fill:#17171C}.w-ntm{font:400 9.5px 'Assistant',sans-serif;fill:#8A8A90}
.w-nx{font:400 11px 'Assistant',sans-serif;fill:#5B5B63}.w-nx.red{fill:#C81E33}
/* the coach's three states: a quiet crossfade */
.w-st{opacity:0;transition:opacity .6s ease}.w-st.on{opacity:1}
.w-pb .w-ln.pl{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1)}.w-pb.in .w-ln.pl{stroke-dashoffset:0}
/* the problem copy: one clear hierarchy (kicker → headline → body → conclusion → action) on an 8px rhythm */
@media(min-width:1101px){
  .tm-copy[data-m="p"]{max-width:30rem}
  .tm-copy[data-m="p"] .tm-k{margin-bottom:0}
  .tm-copy[data-m="p"] .tm-h{margin:24px 0 32px;font-size:clamp(40px,3.4vw,52px);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
  .tm-copy[data-m="p"] .tm-h span{display:block}
  .tm-copy[data-m="p"] .tm-h .tm-h2{color:#8A8A90;margin-top:.1em}
  .tm-copy[data-m="p"] .tm-lead{font-size:17px;line-height:1.6;max-width:42ch;color:#5B5B63;text-wrap:pretty}
  .tm-copy[data-m="p"] .tm-q-s{margin-top:32px;padding-top:0;border-top:0;font:400 18px/1.5 'Hanken Grotesk';letter-spacing:-.005em;color:#17171C;max-width:38ch;text-wrap:pretty;position:relative;padding-left:20px}
  .tm-copy[data-m="p"] .tm-q-s::before{content:'';position:absolute;left:0;top:.3em;bottom:.3em;width:2px;background:#D4FF3F;outline:0}
}
.tm-copy[data-m="p"]~.tm-skip,.tm-skip{margin-top:40px}
@media(max-width:1100px){.tm-copy[data-m="p"] .tm-h span{display:block}.tm-copy[data-m="p"] .tm-h .tm-h2{color:#8A8A90}.tm-copy[data-m="p"] .tm-q-s{border-left:2px solid #D4FF3F;padding-left:12px}}
@media(min-width:1101px){.tm-copy[data-m="p"] .tm-q-s{font-weight:300;font-size:19px}}
/* no skip link here; "The system wasn't." arrives once the load has built up */
.tm-skip{display:none!important}
.tm-copy[data-m="p"] .tm-h .tm-h2{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.tm.wasnt .tm-copy[data-m="p"] .tm-h .tm-h2{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.tm-copy[data-m="p"] .tm-h .tm-h2{opacity:1;transform:none}}
.tm-copy[data-m="p"] .tm-h .tm-h2{font-weight:300}
.w-pk{opacity:0;transition:opacity .5s}.tm-web.pk .w-pk{opacity:1}
.w-knot{fill:none;stroke:#17171C;stroke-opacity:.55;stroke-width:1;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s linear}
/* 02 · the platform film: takes the whole stage while its moment is on */
.tm-film{position:absolute;left:40px;right:40px;top:64px;bottom:56px;opacity:0;pointer-events:none;transition:opacity .6s ease;z-index:6}
.tm.m0 .tm-film{opacity:1;pointer-events:auto}
.tm-film video{width:100%;height:100%;object-fit:contain;background:#F7F6F2;display:block}
.tm.m0 .tm-copy[data-m="0"],.tm.m0 .tm-tour{opacity:0!important}
.tm-snd{all:unset;cursor:pointer;position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:9px;padding:9px 16px;border:1px solid #17171C;border-radius:999px!important;background:#F7F6F2;font:500 11px 'Hanken Grotesk';letter-spacing:.2em;text-transform:uppercase;color:#17171C}
.tm-snd i{width:8px;height:8px;border-radius:50%!important;background:#D4FF3F;outline:1px solid #17171C}
.tm-snd[aria-pressed=true] i{background:#17171C}
.tm-snd:focus-visible{outline:2px solid #17171C;outline-offset:3px}
@media(max-width:1100px){.tm-film{left:12px;right:12px;top:60px;bottom:16px}.tm-snd{right:4px;bottom:4px}}
/* 01 · hear the story: the narration plays the scroll animation by itself */
.tm-hear{all:unset;cursor:pointer;margin-top:14px;display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 14px;border:1px solid #17171C;border-radius:999px!important;font:500 11px 'Hanken Grotesk';letter-spacing:.2em;text-transform:uppercase;color:#17171C;background:#F7F6F2}
.tm-hear i{width:0;height:0;border-left:8px solid #17171C;border-top:5px solid transparent;border-bottom:5px solid transparent}
.tm-hear[aria-pressed=true] i{width:8px;height:10px;border:0;border-left:3px solid #17171C;border-right:3px solid #17171C;box-sizing:border-box}
.tm-hear em{font-style:normal;letter-spacing:.06em;color:#8A8A90}
.tm-hear:focus-visible{outline:2px solid #17171C;outline-offset:3px}
.tm-hear .bar{position:absolute}
.tm-next{all:unset;cursor:pointer;margin:32px 0 0 18px;display:inline-flex;align-items:center;gap:8px;font:500 11px 'Hanken Grotesk';letter-spacing:.2em;text-transform:uppercase;color:#5B5B63;padding:10px 4px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.tm-next:hover,.tm-next.ready{color:#17171C;border-bottom-color:#17171C}.tm-next.ready span{animation:tmnx 1.2s ease-in-out infinite}
@keyframes tmnx{50%{transform:translateX(4px)}}.tm-next span{display:inline-block}
.tm-next:focus-visible{outline:2px solid #17171C;outline-offset:3px}
@media(max-width:1100px){.tm-hear,.tm-next{margin-top:16px}}
/* subtitles + the hidden playback pill */
.tm-cc{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:8;max-width:min(860px,calc(100% - 48px));margin:0;padding:8px 16px;background:rgba(247,246,242,.92);font:300 19px/1.45 'Hanken Grotesk';color:#17171C;text-align:center;opacity:0;transition:opacity .25s;pointer-events:none;text-wrap:balance}
.tm-cc.on{opacity:1}
.tm-ctl{position:absolute;right:40px;bottom:22px;z-index:9;display:flex;gap:4px;padding:4px;border:1px solid #DCD9D0;border-radius:999px!important;background:rgba(247,246,242,.94);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;pointer-events:none}
.tm-ctl.vis,.tm-ctl:focus-within{opacity:1;transform:none;pointer-events:auto}
.tm-ctl button{all:unset;cursor:pointer;width:34px;height:34px;display:grid;place-items:center;border-radius:50%!important;color:#17171C;font:600 10px 'Hanken Grotesk';letter-spacing:.06em}
.tm-ctl button:hover{background:#ECEAE3}.tm-ctl button:focus-visible{outline:2px solid #17171C}
.tm-ctl svg{width:16px;height:16px;fill:#17171C;stroke:#17171C;stroke-width:0}
.tm-ctl svg .w,.tm-ctl svg .x{fill:none;stroke-width:1.4;stroke-linecap:round}
.tm-ctl .pa{display:none}.tm-ctl.playing .pa{display:block}.tm-ctl.playing .pl{display:none}
.tm-ctl [data-c=snd] .x{display:none}.tm-ctl [data-c=snd][aria-pressed=false] .x{display:block}.tm-ctl [data-c=snd][aria-pressed=false] .w{display:none}
.tm-ctl [data-c=snd]{display:none}.tm-ctl.film [data-c=snd]{display:grid}
.tm-ctl [data-c=cc][aria-pressed=true]{background:#17171C;color:#F7F6F2}
.tm-snd{display:none!important}
@media(max-width:1100px){.tm-cc{bottom:56px;font-size:15px}.tm-ctl{right:14px;bottom:12px}}
/* the closing question that leads to the platform */
.tm-quest{margin:28px 0 0;font:300 22px/1.4 'Hanken Grotesk';letter-spacing:-.01em;color:#17171C;max-width:30ch;opacity:0;transform:translateY(10px);transition:opacity .7s,transform .9s cubic-bezier(.2,.8,.2,1)}
.tm.quest .tm-quest{opacity:1;transform:none}
@media(max-width:1100px){.tm-quest{font-size:18px;margin-top:14px}}
/* film: waits for the visitor */
.tm-watch{all:unset;cursor:pointer;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;padding:16px 26px 16px 20px;background:#17171C;color:#F7F6F2;border-radius:999px!important;font:500 12px 'Hanken Grotesk';letter-spacing:.22em;text-transform:uppercase;transition:opacity .3s,transform .3s}
.tm-watch i{width:0;height:0;border-left:10px solid #D4FF3F;border-top:6px solid transparent;border-bottom:6px solid transparent}
.tm-watch em{font-style:normal;letter-spacing:.06em;color:rgba(247,246,242,.6)}
.tm-watch:hover{transform:translate(-50%,-50%) scale(1.03)}.tm-watch:focus-visible{outline:2px solid #D4FF3F;outline-offset:4px}
.tm.filming .tm-watch{opacity:0;pointer-events:none}
.tm-film video{transition:filter .4s}.tm:not(.filming) .tm-film video{filter:saturate(.7) opacity(.55)}
.tm-fin{all:unset;cursor:pointer;position:absolute;left:50%;bottom:24px;transform:translateX(-50%);font:500 11px 'Hanken Grotesk';letter-spacing:.2em;text-transform:uppercase;color:#17171C;border-bottom:1px solid #17171C;padding-bottom:4px;opacity:0;pointer-events:none;transition:opacity .4s}
.tm.filmed .tm-fin{opacity:1;pointer-events:auto}
.tm.filmed .tm-watch span{font-size:0}.tm.filmed .tm-watch span::after{content:'Watch again';font-size:12px}
/* the hint when someone tries to scroll during a story */
.tm-hint{display:none;align-self:center;padding:0 10px 0 12px;font:500 10px 'Hanken Grotesk';letter-spacing:.16em;text-transform:uppercase;color:#5B5B63;white-space:nowrap}
.alta-locked .tm-hint{display:block}
.tm-ctl.nudge{animation:tmnudge .5s ease}@keyframes tmnudge{30%{transform:translateY(-4px)}}
/* the gate hint: a hand-drawn arrow to Hear the problem */
.tm-cue{position:absolute;display:inline-flex;align-items:flex-end;gap:6px;margin:-6px 0 0 -128px;transform:translateY(-34px);font:400 15px 'Hanken Grotesk';font-style:italic;color:#17171C;opacity:0;transition:opacity .5s;pointer-events:none}
.tm-cue svg{width:96px;height:48px;order:2;margin-left:-2px;overflow:visible}.tm-cue svg path{fill:none;stroke:#17171C;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.tm.gated .tm-cue{opacity:1}
.tm-copy[data-m="p"]{position:relative}
.tm.gated .tm-hear{box-shadow:0 0 0 0 rgba(212,255,63,.9);animation:tmpulse 2s ease-out infinite}
@keyframes tmpulse{0%{box-shadow:0 0 0 0 rgba(212,255,63,.9)}100%{box-shadow:0 0 0 14px rgba(212,255,63,0)}}
.tm.nudge .tm-hear{animation:tmshake .45s ease,tmpulse 2s ease-out .45s infinite}
@keyframes tmshake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* story buttons: square, like the rest of the page (header pills, chips) */
.tm-hear,.tm-watch,.tm-ctl,.tm-ctl button,.tm-cc{border-radius:0!important}
.tm-hear{padding:11px 16px 11px 14px;border:1px solid #17171C;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:400;font-size:11px;letter-spacing:.14em}
.tm-hear:hover{background:#17171C;color:#F7F6F2}.tm-hear:hover i{border-left-color:#D4FF3F}.tm-hear:hover em{color:#B9B7B0}
.tm-hear[aria-pressed=true]:hover i{border-left-color:#D4FF3F;border-right-color:#D4FF3F}
.tm-next{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:400;letter-spacing:.14em}
.tm-watch{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:400;letter-spacing:.14em;padding:15px 22px 15px 18px}
.tm-fin{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:400;letter-spacing:.14em}
.tm-ctl{padding:3px;gap:2px}.tm-ctl button{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:400}
.tm-ctl [data-c=cc][aria-pressed=true]{background:#17171C}
/* pulse becomes a square halo */
@keyframes tmpulse{0%{box-shadow:0 0 0 0 rgba(212,255,63,.95)}100%{box-shadow:0 0 0 12px rgba(212,255,63,0)}}
/* the cue sits above the button, inside the column */
.tm-cue{position:relative;display:flex;align-items:flex-start;gap:8px;margin:26px 0 -6px 4px;transform:none;font:400 15px 'Hanken Grotesk';font-style:italic}
.tm-cue svg{order:2;width:70px;height:40px;margin-top:6px}
.tm-quest{max-height:0;margin-top:0!important;overflow:hidden;transition:opacity .7s,transform .9s cubic-bezier(.2,.8,.2,1),max-height .7s,margin .7s}
.tm.quest .tm-quest{max-height:5em;margin-top:28px!important}
/* subtitles: white on black, a thin neon edge so they read over anything */
.tm-cc{background:#17171C;color:#F7F6F2;font-weight:400;padding:9px 18px;box-shadow:inset 3px 0 0 #D4FF3F}
.tm-cc{border-left:3px solid #D4FF3F}

.tm-cc{bottom:20px}@media(max-width:1100px){.tm-cc{bottom:12px}}
/* subtitles: the black hugs each line, no empty bars at the sides */
.tm-cc{background:none!important;border-left:0!important;box-shadow:none!important;padding:0!important;line-height:1.75}
.tm-cc span{background:#17171C;color:#F7F6F2;padding:5px 12px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* the play/pause button stays quiet: no black fill on hover */
.tm-hear:hover{background:#ECEAE3;color:#17171C}.tm-hear:hover i{border-left-color:#17171C}.tm-hear:hover em{color:#8A8A90}
.tm-hear[aria-pressed=true]:hover i{border-left-color:#17171C;border-right-color:#17171C}
.tm-cc{bottom:52px}@media(max-width:1100px){.tm-cc{bottom:40px;font-size:14px;line-height:1.85;max-width:calc(100% - 32px)}.tm-cc span{padding:4px 9px}}
.tm-cc{left:24px!important;right:24px;transform:none!important;max-width:none!important;margin:0 auto}@media(max-width:1100px){.tm-cc{left:10px!important;right:10px;bottom:10px}}
/* 02 · the film lives in the stage column, the copy keeps the same shape as 01 */
.tm-stage .tm-film{position:absolute;inset:0;left:0;right:0;top:0;bottom:0;opacity:0;pointer-events:none;transition:opacity .6s;z-index:4}
.tm.m0 .tm-stage .tm-film{opacity:1;pointer-events:auto}
.tm.m0 .tm-cv{opacity:0;transition:opacity .4s}
.tm-stage .tm-film video{width:100%;height:100%;object-fit:contain;background:transparent;filter:none!important}
.tm:not(.filming) .tm-stage .tm-film video{opacity:.92}
.tm-copy[data-m="0"]{position:relative}.tm-copy[data-m="0"] .tm-h{transition:opacity .35s}
.tm-copy[data-m="0"] .tm-h.swap{opacity:0}
.tm.m0.gated .tm-copy[data-m="0"] .tm-cue{opacity:1}
.tm.m0.gated .tm-watch{animation:tmpulse 2s ease-out infinite}
.tm.m0.nudge .tm-watch{animation:tmshake .45s ease,tmpulse 2s ease-out .45s infinite}
.tm-copy[data-m="0"] .tm-cue{opacity:0}
.tm.filmed .tm-copy[data-m="0"] .tm-next{color:#17171C;border-bottom-color:#17171C}
.tm.m0 .tm-copy[data-m="0"]{opacity:1!important}
/* Watch sits in the copy column like Hear, and stays visible while playing */
.tm-copy .tm-watch{position:static!important;transform:none!important;display:inline-flex;margin-top:14px;padding:11px 16px 11px 14px;background:#F7F6F2;color:#17171C;border:1px solid #17171C;font:400 11px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;gap:10px;opacity:1!important;pointer-events:inherit!important}
.tm-copy .tm-watch i{border-left:8px solid #17171C;border-top:5px solid transparent;border-bottom:5px solid transparent}
.tm-copy .tm-watch[aria-pressed=true] i{width:8px;height:10px;border:0;border-left:3px solid #17171C;border-right:3px solid #17171C;box-sizing:border-box}
.tm-copy .tm-watch em{color:#8A8A90}.tm-copy .tm-watch:hover{transform:none!important}
.tm.filmed .tm-copy .tm-watch span{font-size:inherit}.tm.filmed .tm-copy .tm-watch span::after{content:none}
.tm:not(.filming) .tm-stage .tm-film video{opacity:1}
/* subtitles live in the copy column: under the buttons, above the progress */
@media(min-width:1101px){.tm-cc{left:max(40px,calc((100% - 1440px)/2 + 40px))!important;right:auto!important;width:min(520px,36vw);margin:0;text-align:left;bottom:74px;font-size:17px;line-height:1.8}}
.tm-stage .tm-film video{mix-blend-mode:darken}
/* only the visible moment's copy takes clicks */
.tm-copy:not([style*="x"]) *{pointer-events:inherit}
.tm.mp .tm-copy[data-m="0"],.tm.m1 .tm-copy[data-m="0"],.tm.m2 .tm-copy[data-m="0"]{visibility:hidden}
.tm.m0 .tm-copy[data-m="p"]{visibility:hidden}
/* subtitles: centred under the stage, a little higher */
@media(min-width:1101px){.tm-cc{left:24px!important;right:24px!important;width:auto;margin:0 auto;text-align:center;bottom:96px}}
@media(min-width:1101px){.tm-cc{max-width:780px!important}}
/* ── 03 · the builder moment ── */
body.al .tm{height:650vh}
.tm.mb .tm-copy[data-m="b"]{opacity:1;transform:none;transition-delay:.18s;pointer-events:auto}
.tm:not(.mb) .tm-copy[data-m="b"]{visibility:hidden}
.tm.mb .tm-copy[data-m="0"],.tm.mb .tm-copy[data-m="p"]{visibility:hidden}
.tm-copy[data-m="b"]{position:relative}.tm-copy[data-m="b"] .tm-h{transition:opacity .35s}.tm-copy[data-m="b"] .tm-h.swap{opacity:0}
.tm-copy[data-m="b"] .tm-cue{opacity:0}.tm.mb.gated .tm-copy[data-m="b"] .tm-cue{opacity:1}
.tm.mb.gated #tm-watch2{animation:tmpulse 2s ease-out infinite}.tm.mb.nudge #tm-watch2{animation:tmshake .45s ease,tmpulse 2s ease-out .45s infinite}
.tm.m0 .tm-stage #tm-film2{opacity:0!important;pointer-events:none!important}
.tm.mb .tm-stage #tm-film2{opacity:1;pointer-events:auto}
.tm.mb .tm-cv{opacity:0;transition:opacity .4s}
.tm.mb .tm-copy[data-m="0"] .tm-cue{opacity:0}
/* five stops in the progress */
.tm .tm-dots li{color:#B9B7B0!important}
.tm.mp .tm-dots li:nth-child(1),.tm.m0 .tm-dots li:nth-child(2),.tm.mb .tm-dots li:nth-child(3),.tm.m1 .tm-dots li:nth-child(4),.tm.m2 .tm-dots li:nth-child(5){color:#17171C!important}

/* playback speed toggle: beside each play button, and in the control pill */
.tm-spd{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:48px;margin:32px 0 0 6px;padding:0 10px;box-sizing:border-box;border:1px solid #17171C;font:400 12px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.04em;color:#17171C;vertical-align:top;transition:background .2s}
.tm-spd:hover{background:#E9E7E0}.tm-spd:focus-visible{outline:2px solid #8DB80A;outline-offset:2px}
@media(max-width:1100px){.tm-spd{margin-top:16px}}
.tm-ctl .tm-spd{margin:0;height:auto;min-width:0;border:0;padding:0 8px;color:inherit;font-size:11px}
.tm-ctl .tm-spd:hover{background:transparent;opacity:.7}
.tm-copy .tm-hear{white-space:nowrap}
.tm-copy .tm-spd{height:auto;min-width:0;margin:14px 0 0 6px;padding:11px 12px;font-size:11px;letter-spacing:.06em;vertical-align:baseline}
@media(max-width:1100px){.tm-copy .tm-spd{margin-top:16px}}
/* speed appears only while the story is playing, and sits exactly on the play button's line */
.tm-copy .tm-hear,.tm-copy .tm-spd{box-sizing:border-box;height:40px;padding-top:0;padding-bottom:0;vertical-align:top;margin-top:14px}
.tm-copy .tm-spd{display:none;margin-left:6px}
.tm-copy .tm-hear[aria-pressed=true]+.tm-spd{display:inline-flex;animation:tmspd .25s ease}
@keyframes tmspd{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.tm-copy .tm-hear,.tm-copy .tm-spd{margin-top:16px}}
.tm-ctl .tm-spd{display:none}.tm-ctl.playing .tm-spd{display:inline-flex}
.tm-copy .tm-next{box-sizing:border-box;height:40px;padding-top:0;padding-bottom:0;vertical-align:top;margin-top:14px}
@media(max-width:1100px){.tm-copy .tm-next{margin-top:16px}}
/* ── 04 · the next interface ── */
body.al .tm{height:540vh}
.tm.mn .tm-copy[data-m="n"]{opacity:1;transform:none;transition-delay:.18s;pointer-events:auto}
.tm:not(.mn) .tm-copy[data-m="n"]{visibility:hidden}
.tm.mn .tm-copy[data-m="0"],.tm.mn .tm-copy[data-m="p"],.tm.mn .tm-copy[data-m="b"]{visibility:hidden}
.tm-copy[data-m="n"]{position:relative}.tm-copy[data-m="n"] .tm-h{transition:opacity .35s}.tm-copy[data-m="n"] .tm-h.swap{opacity:0}
.tm-copy[data-m="n"] .tm-cue{opacity:0}.tm.mn.gated .tm-copy[data-m="n"] .tm-cue{opacity:1}
.tm.mn.gated #tm-watch3{animation:tmpulse 2s ease-out infinite}.tm.mn.nudge #tm-watch3{animation:tmshake .45s ease,tmpulse 2s ease-out .45s infinite}
.tm.m0 .tm-stage #tm-film3,.tm.mb .tm-stage #tm-film3{opacity:0!important;pointer-events:none!important}
.tm.mn .tm-stage #tm-film3{opacity:1;pointer-events:auto}
.tm.mn .tm-cv{opacity:0;transition:opacity .4s}
.tm.mn .tm-dots li:nth-child(4){color:#17171C!important}
.tm.filmed .tm-copy[data-m="n"] #tm-fin3{color:#17171C;border-bottom-color:#17171C}
/* the demo, opened from the film */
.al-try-lead{max-width:560px;margin:-8px 0 28px;color:#5B5B63;font:300 18px/1.5 'Hanken Grotesk'}
/* closing: the opening line, now earned */
.al-fin{padding:160px 0 140px}
.al-fin-h{margin:0;font:200 clamp(40px,6vw,84px)/1.06 'Hanken Grotesk';letter-spacing:-.03em;color:#17171C}
.al-fin-h span{color:#5B5B63}
.al-fin-p{max-width:620px;margin:32px 0 0;color:#5B5B63;font:300 19px/1.55 'Hanken Grotesk'}
body.al .al-fin{background:#F7F6F2;color:#17171C}
.al-try .st-k,.al-try .st-h,.al-try-lead,.al-fin-h,.al-fin-p{grid-column:1/-1}
.al-try .st-k{white-space:nowrap}

/* idle stage: a silent loop of the film's strongest moments, until the visitor plays it */
.tm-stage .tm-film .tm-tease{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:darken;opacity:0;transition:opacity .5s;cursor:pointer;z-index:2}
.tm-stage .tm-film.teasing .tm-tease{opacity:1}
.tm-stage .tm-film.teasing>video:not(.tm-tease){opacity:0!important}
.tm-play{position:absolute;left:50%;bottom:18px;transform:translate(-50%,8px);z-index:3;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;background:#17171C;color:#F7F6F2;font:400 11px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;cursor:pointer}
.tm-play i{width:0;height:0;border-left:8px solid #D4FF3F;border-top:5px solid transparent;border-bottom:5px solid transparent}
.tm-stage .tm-film.teasing .tm-play{opacity:.92;transform:translate(-50%,0);pointer-events:auto}
.tm-stage .tm-film.teasing:hover .tm-play{opacity:1;background:#000}
@media(hover:hover){.tm-stage .tm-film.teasing .tm-play{opacity:0}.tm-stage .tm-film.teasing:hover .tm-play{opacity:1}}
/* ── 05 · measuring impact: one screen, on the 12-column grid ── */
body.al .im{background:var(--a-paper);color:var(--a-ink);padding:120px 0;border-top:1px solid var(--a-tape)}
.im-kk{grid-column:1/-1;color:var(--a-ink)!important;margin-bottom:20px}
.im-h{grid-column:1/span 8;margin:0 0 56px;font:200 clamp(32px,3.6vw,52px)/1.08 'Hanken Grotesk';letter-spacing:-.03em}
.im-band{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);border-top:1px solid var(--a-ink);margin:0;padding:24px 0 0;list-style:none}
.im-stats{padding-bottom:40px}
.im-shift{grid-column:1/span 4;display:grid;grid-template-columns:1fr auto 1fr;column-gap:var(--gut);align-items:start}
.im-s{grid-column:span 2;display:flex;flex-direction:column;gap:10px}
.im-shift .im-s{grid-column:auto}
.im-n{display:block;font:200 clamp(48px,5vw,76px)/.9 'Hanken Grotesk';letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.im-s span{font:400 14px/1.35 'Hanken Grotesk';color:var(--a-mut);max-width:16ch}
.im-was .im-n{color:var(--a-stone)}
.im-now .im-n{background:linear-gradient(var(--a-lime),var(--a-lime)) 0 88%/100% .16em no-repeat;width:max-content}
.im-arrow{font-style:normal;font:200 32px/1 'Hanken Grotesk';padding-top:clamp(8px,1.2vw,18px)}
.im-pairs li{grid-column:span 3;display:flex;flex-direction:column;gap:4px;font:400 16px/1.35 'Hanken Grotesk';padding-bottom:40px}
.im-pairs s{color:var(--a-stone);text-decoration-thickness:1px}
.im-pairs i{font-style:normal;color:var(--a-mut);font-size:14px}
.im-foot{grid-column:1/-1;margin:0;padding:20px 0;border-top:1px solid var(--a-tape);display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--a-mut)}
.im-foot i{width:8px;height:8px;border-radius:50%!important;background:var(--a-lime);outline:1px solid var(--a-ink)}
.im-end{grid-column:1/span 10;margin:32px 0 0;font:200 clamp(24px,2.4vw,34px)/1.25 'Hanken Grotesk';letter-spacing:-.015em}
.im-end span{color:var(--a-mut)}
.im .im-s,.im .im-pairs li,.im .im-arrow{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.im .im-band.in .im-s,.im .im-band.in li,.im .im-band.in .im-arrow{opacity:1;transform:none}
.im .im-band.in>:nth-child(2),.im .im-band.in li:nth-child(2){transition-delay:.06s}.im .im-band.in>:nth-child(3),.im .im-band.in li:nth-child(3){transition-delay:.12s}
.im .im-band.in>:nth-child(4),.im .im-band.in li:nth-child(4){transition-delay:.18s}.im .im-band.in>:nth-child(5){transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.im .im-s,.im .im-pairs li,.im .im-arrow{opacity:1;transform:none;transition:none}}
@media(max-width:1100px){body.al .im{padding:80px 0}.im-h,.im-end{grid-column:1/-1}.im-shift{grid-column:1/-1;margin-bottom:28px}.im-s{grid-column:span 6;margin-bottom:24px}.im-pairs li{grid-column:span 6;padding-bottom:24px}}
@media(max-width:600px){.im-pairs li{grid-column:1/-1}}

/* interactive: each number explains itself; each change plays from → to */
.im-s{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:10px;position:relative;padding-bottom:14px}
.im-s::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--a-ink);transition:width .25s ease}
.im-s:hover::after,.im-s:focus-visible::after,.im-s.on::after{width:100%}
.im-s.on .im-n,.im-s:hover .im-n{color:var(--a-ink)}
.im-s:focus-visible{outline:2px solid #8DB80A;outline-offset:4px}
.im-was.on .im-n,.im-was:hover .im-n{color:var(--a-mut)}
.im-d{grid-column:1/-1;margin:20px 0 0;min-height:1.5em;font:300 18px/1.5 'Hanken Grotesk';color:var(--a-ink);transition:opacity .15s}
.im-d.sw{opacity:0}
.im-pairs li{cursor:default;position:relative;outline:none}
.im-pairs s{transition:color .2s}
.im-pairs span{font-size:18px;transform-origin:left;transition:transform .3s ease}
.im-pairs em{font-style:normal;font:300 14px/1.45 'Hanken Grotesk';color:var(--a-mut);max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .2s ease}
.im-pairs li:hover em,.im-pairs li:focus em,.im-pairs li.on em{max-height:5em;opacity:1}
.im-pairs li:hover span,.im-pairs li:focus span{transform:translateX(4px)}
.im-pairs s{background:linear-gradient(var(--a-stone),var(--a-stone)) 0 55%/0 1px no-repeat;text-decoration:none;transition:background-size .35s ease .1s}
.im .im-band.in s{background-size:100% 1px}
.im .im-s,.im .im-pairs li,.im .im-arrow{transition:opacity .35s ease,transform .35s ease}
.im .im-band.in>:nth-child(2),.im .im-band.in li:nth-child(2){transition-delay:.04s}.im .im-band.in>:nth-child(3),.im .im-band.in li:nth-child(3){transition-delay:.08s}
.im .im-band.in>:nth-child(4),.im .im-band.in li:nth-child(4){transition-delay:.12s}.im .im-band.in>:nth-child(5){transition-delay:.16s}
@media(hover:none){.im-pairs em{max-height:5em;opacity:1}}
.im-stats>.im-s{grid-column:span 2}.im-shift>.im-s{grid-column:auto}
.im-pairs s,.im-pairs span{align-self:flex-start}
@media(max-width:1100px){.im-stats>.im-s{grid-column:span 6}}

/* ───────── home · a portfolio worth exploring ───────── */
body.h2{background:#F7F6F2;color:#17171C}
.h2 .guides{display:none}
.h2-top{position:sticky;top:0;z-index:20;background:rgba(247,246,242,.92);backdrop-filter:blur(8px);border-bottom:1px solid #DCD9D0}
.h2-top .grid{height:52px;align-items:center}
.h2-me{grid-column:1/span 6;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#17171C;text-decoration:none}
.h2-nav{grid-column:7/-1;justify-self:end;display:flex;gap:28px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.h2-nav a{color:#5B5B63;text-decoration:none}.h2-nav a:hover{color:#17171C}
.h2-hero{min-height:calc(100svh - 53px);display:flex;align-items:center;padding:72px 0}
.h2-hero .grid{width:100%}
.h2-role{grid-column:1/-1;display:flex;gap:24px;margin:0 0 40px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#5B5B63}
.h2-role span:first-child{color:#17171C}
.h2-h{grid-column:1/span 11;margin:0;font:200 clamp(44px,6.6vw,104px)/1.02 'Hanken Grotesk';letter-spacing:-.045em}
.h2-h>span{display:block;overflow:hidden;padding-bottom:.06em}
.h2-h>span:last-child{color:#5B5B63}
.h2-h i{display:block;font-style:normal;animation:h2up .8s cubic-bezier(.2,.7,.2,1) both}
.h2-h>span:last-child i{animation-delay:.12s}
@keyframes h2up{from{transform:translateY(105%)}to{transform:none}}
.h2-sub{grid-column:1/span 6;margin:40px 0 0;font:300 20px/1.5 'Hanken Grotesk';color:#5B5B63;animation:h2fade .6s ease .35s both}
@keyframes h2fade{from{opacity:0}to{opacity:1}}
.h2-cta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:40px;animation:h2fade .6s ease .45s both}
.h2-btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border:1px solid #17171C;color:#17171C;text-decoration:none;font:400 11px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s}
.h2-btn.k{background:#17171C;color:#F7F6F2}
.h2-btn:hover{background:#E9E7E0}.h2-btn.k:hover{background:#000}
@media(prefers-reduced-motion:reduce){.h2-h i,.h2-sub,.h2-cta{animation:none}}
/* work */
.h2-work{padding:24px 0 120px}
.h2-k{grid-column:1/-1;padding:20px 0;border-top:1px solid #17171C;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#5B5B63}
.wk{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:stretch;padding:40px 0;border-top:1px solid #DCD9D0;color:inherit;text-decoration:none}
.h2-k+.wk{border-top:0;padding-top:16px}
.wk-t{grid-column:1/span 5;display:flex;flex-direction:column;padding-right:24px}
.wk-n{display:flex;gap:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#5B5B63;margin-bottom:28px}.wk-n b{font-weight:400;color:#17171C}
.wk-t h2{margin:0;font:200 clamp(30px,3vw,44px)/1.1 'Hanken Grotesk';letter-spacing:-.025em}
.wk-t p{margin:20px 0 0;max-width:40ch;font:300 17px/1.55 'Hanken Grotesk';color:#5B5B63}
.wk-go{margin-top:auto;padding-top:32px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#17171C;display:inline-flex;gap:8px}
.wk-go span{transition:transform .25s}
.wk:hover .wk-go span,.wk:focus-visible .wk-go span{transform:translateX(6px)}
.wk-v{grid-column:6/-1;position:relative;aspect-ratio:1040/760;border:1px solid #DCD9D0;background:#F7F6F2;overflow:hidden;transition:border-color .25s}
.wk:hover .wk-v{border-color:#17171C}
.wk-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;mix-blend-mode:darken}
.wk-v .ex{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.wk-v .ex .ex-bar{display:none}
.wk-v .ex svg{width:auto;height:100%;max-width:100%}
.wk:focus-visible{outline:2px solid #8DB80A;outline-offset:6px}
/* ask */
.h2-ask{padding:0 0 120px}
.h2-ah{grid-column:1/span 9;margin:40px 0 0;font:200 clamp(40px,5vw,76px)/1.04 'Hanken Grotesk';letter-spacing:-.04em}
.h2-al{grid-column:1/span 6;margin:24px 0 0;font:300 20px/1.5 'Hanken Grotesk';color:#5B5B63}
.h2-box{grid-column:1/span 8;margin-top:40px}
.h2-box .asug{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.h2-box .chip{all:unset;cursor:pointer;padding:10px 14px;border:1px solid #17171C;font:400 15px 'Hanken Grotesk';transition:background .2s}
.h2-box .chip:hover{background:#D4FF3F}
.h2-box .alog:empty{display:none}
.h2-box .alog{max-height:420px;overflow:auto;border-top:1px solid #DCD9D0;margin-bottom:16px}
.h2-box .composer{display:flex;align-items:center;gap:12px;height:52px;padding:0 16px;border:1px solid #17171C;background:#fff}
.h2-box .composer input{flex:1;border:0;outline:0;background:transparent;font:300 17px 'Hanken Grotesk';color:#17171C}
.h2-box .send{all:unset;cursor:pointer;font-size:14px}
.h2-box .anote{margin:12px 0 0;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8A8A90}
/* footer */
.h2-foot{border-top:1px solid #17171C;padding:24px 0 48px}
.h2-foot .clist{grid-column:1/span 8}
.h2-more{grid-column:9/-1;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.h2-more a{color:#5B5B63;text-decoration:none}.h2-more a:hover{color:#17171C}
@media(max-width:900px){
  .h2-h{grid-column:1/-1}.h2-sub,.h2-al,.h2-ah,.h2-box{grid-column:1/-1}
  .wk-t,.wk-v{grid-column:1/-1}.wk-t{padding:0 0 24px}.wk-go{padding-top:20px}
  .h2-nav{gap:18px}.h2-foot .clist,.h2-more{grid-column:1/-1}.h2-more{justify-self:start;align-items:flex-start;margin-top:24px}
}
body.h2{font-family:'Hanken Grotesk',system-ui,sans-serif}
.h2 .mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.h2-h{grid-column:1/-1;font-size:clamp(40px,5.6vw,88px)}
.wk-v{aspect-ratio:1040/860}
.wk-v video{object-fit:contain;object-position:50% 50%}
.h2-sub{grid-column:1/span 8}
@media(max-width:900px){.h2-role{flex-direction:column;gap:6px}}

/* home · drinks, then four projects in a grid */
.h2-hero{min-height:0;padding:96px 0 72px}
.h2-drink{padding:0 0 24px}
.h2 .opts{margin-top:8px}
.h2 .opt.chosen{outline:2px solid var(--accent,#17171C);outline-offset:-2px}
.h2-work{padding:24px 0 120px}
.wk-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gut);row-gap:48px}
.h2 .wk{grid-column:auto;display:flex;flex-direction:column;padding:0;border-top:0}
.h2 .wk-v{grid-column:auto;aspect-ratio:4/3;width:100%}
.h2 .wk-t{grid-column:auto;padding:20px 0 0}
.h2 .wk-n{margin-bottom:14px}
.h2 .wk-t h2{font-size:clamp(20px,1.7vw,26px);line-height:1.2}
.h2 .wk-t p{margin-top:10px;font-size:15px}
.h2 .wk-go{padding-top:16px;margin-top:0}
.wk-tbd .wk-v{border-style:dashed;background:transparent}
.wk-tbd .wk-t{color:#8A8A90}.wk-tbd .wk-t h2{color:#B9B7B0}
@media(max-width:1100px){.wk-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.wk-grid{grid-template-columns:1fr}}
.h2 .opt{height:200px;min-height:0}
.h2 .opt .nm{font-size:22px}
.h2-hero{padding:72px 0 56px}
.h2-hero{padding:48px 0 40px}.h2-role{margin-bottom:28px}.h2-sub{margin-top:24px}.h2-cta{margin-top:28px}
.h2 .opt{height:160px}
.h2 .wk-t{flex:1;display:flex;flex-direction:column}.h2 .wk-go{margin-top:auto}
/* no colour stain behind the drinks on hover */
.opt-art .stain{display:none!important}
/* mobile: the three drinks in one compact row, so the work is close */
@media(max-width:900px){.h2 .opts{grid-template-columns:repeat(3,1fr)}.h2 .opt{grid-column:span 1;height:132px}.h2 .opt .lab span:last-child{display:none}.h2 .opt .nm{font-size:16px;padding:8px 10px 10px}.h2 .opt svg{max-width:none;height:auto;padding:6px}.h2 .opt .opt-art{flex:1;min-height:0}}

/* home · the pour, shorter, with small talk instead of a tasting profile */
.h2 #pour{height:260vh}
.h2 #stage .tp{display:none}
.h2 #stage{justify-content:flex-end}
.h2-talk{position:absolute;inset:0;align-content:center;pointer-events:none;z-index:2}
.h2-talk p{grid-column:1/span 5;margin:0 0 20px;font:200 clamp(26px,2.6vw,40px)/1.2 'Hanken Grotesk';letter-spacing:-.02em;color:#17171C;opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}
.h2-talk p:nth-child(2){color:#5B5B63}
.h2-talk p.on{opacity:1;transform:none}
.h2-talk a{grid-column:1/span 3;justify-self:start;margin-top:12px;opacity:0;pointer-events:none;transition:opacity .3s}
.h2-talk a.on{opacity:1;pointer-events:auto}
@media(min-width:901px){.h2 #stage svg{margin-right:4vw}}
@media(max-width:900px){.h2 #pour{height:220vh}.h2-talk{align-content:start;padding-top:96px}.h2-talk p{grid-column:1/-1;font-size:24px}.h2 #stage{justify-content:center;align-items:flex-end}.h2 #stage svg{max-height:52vh}}
/* drinks at their original size: big cups, the moment before the work */
.h2 .opt{height:44vh;min-height:300px}
.h2 .opt .nm{font-size:28px}
.h2-talk p{font-size:clamp(30px,3.2vw,48px)}
@media(max-width:900px){.h2 .opt{height:240px;min-height:0}.h2 .opt svg{height:100%;padding:10px}.h2 .opt .nm{font-size:18px}}
@media(max-width:900px){
  .h2 .opt{flex-direction:column!important;align-items:stretch!important;height:260px}
  .h2 .opt .opt-art{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;width:100%}
  .h2 .opt .opt-art svg{max-width:none!important;width:100%!important;height:100%!important;padding:8px}
  .h2 .opt .nm{margin-top:0;padding:8px 10px 12px;text-align:start}
}

/* home · contact in the top bar */
.h2-nav{align-items:center}
.h2-sep{width:1px;height:14px;background:#DCD9D0}
.h2-ic{display:inline-flex;align-items:center;gap:7px}
.h2-ic svg{width:13px;height:13px;fill:currentColor}
.h2-ic svg path[fill=none]{fill:none}
.h2-in{display:inline-grid;place-items:center;width:13px;height:13px;border:1.2px solid currentColor;font:600 8px/1 'Hanken Grotesk';text-transform:none;letter-spacing:0}
@media(max-width:900px){.h2-me{grid-column:1/span 4}.h2-nav{grid-column:5/-1;gap:16px}.h2-ic span{display:none}.h2-ic svg,.h2-in{width:16px;height:16px}.h2-in{font-size:10px}}
@media(max-width:900px){.h2-me{white-space:nowrap;grid-column:1/span 5}.h2-nav{grid-column:6/-1;gap:14px}.h2-sep{display:none}}@media(max-width:420px){.h2-nav a[href="#work"],.h2-nav a[href="#ask"]{display:none}}

/* contact icons: identical squares on one grid */
.h2-icons{display:grid;grid-template-columns:repeat(3,28px);gap:6px}
.h2 .h2-ic{display:grid;place-items:center;width:28px;height:28px;border:1px solid #DCD9D0;color:#5B5B63;transition:border-color .2s,color .2s}
.h2 .h2-ic:hover,.h2 .h2-ic:focus-visible{border-color:#17171C;color:#17171C}
.h2 .h2-ic svg{width:14px;height:14px;padding:0}
.h2 .h2-in{width:14px;height:14px;border:0;display:grid;place-items:center;font:700 13px/1 'Hanken Grotesk';letter-spacing:-.02em}
@media(max-width:900px){.h2-icons{grid-template-columns:repeat(3,32px);gap:6px}.h2 .h2-ic{width:32px;height:32px}.h2 .h2-ic svg,.h2 .h2-in{width:16px;height:16px}.h2 .h2-in{font-size:14px}}

/* home · sneak peek window */
.pk{grid-column:1/-1;border:1px solid #17171C;background:#F7F6F2;margin:0 0 32px}
.pk-bar{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:20px;height:40px;padding:0 16px;border-bottom:1px solid #DCD9D0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5B5B63}
.pk-dots{display:flex;gap:6px}.pk-dots i{width:9px;height:9px;border:1px solid #B9B7B0;border-radius:50%!important}
#pk-name{color:#17171C}
#pk-part{color:#8A8A90}
#pk-go{color:#17171C;text-decoration:none}#pk-go:hover{text-decoration:underline}
.pk-win{position:relative;aspect-ratio:16/8;overflow:hidden}
.pk-l{position:absolute;inset:0;opacity:0;transform:scale(1.015);transition:opacity .7s ease,transform 1.2s ease;display:flex;align-items:center;justify-content:center}
.pk-l.on{opacity:1;transform:none}
.pk-l video{width:100%;height:100%;object-fit:contain;mix-blend-mode:darken}
.pk-l .ex{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pk-l .ex .ex-bar{display:none}
.pk-l .ex svg{height:92%;width:auto;max-width:100%}
/* cards: text with a progress line, no duplicate visual */
.h2 .wk{position:relative;padding-top:0}
.wk-bar{display:block;height:2px;background:#DCD9D0;margin-bottom:20px}
.wk-bar b{display:block;height:100%;background:#17171C;transform-origin:left;transform:scaleX(0)}
.h2 .wk.cur .wk-n,.h2 .wk.cur h2{color:#17171C}
.h2 .wk:not(.cur):not(.wk-tbd) h2{color:#5B5B63}
.wk-tbd .wk-bar{background:repeating-linear-gradient(90deg,#DCD9D0 0 4px,transparent 4px 8px)}
@media(max-width:900px){.pk-win{aspect-ratio:1040/860}.pk-bar{grid-template-columns:auto 1fr auto}#pk-part{display:none}}

/* sneak peek: smaller, in the films' proportion, with the projects as a list beside it */
.pk-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:start}
.pk{grid-column:1/span 7;margin:0}
.pk-win{aspect-ratio:1040/860}
.pk-row .wk-grid{grid-column:8/-1;grid-template-columns:1fr;row-gap:28px}
.pk-row .wk-t h2{font-size:clamp(18px,1.5vw,22px)}
.pk-row .wk-t p{font-size:14px;margin-top:6px}
.pk-row .wk-n{margin-bottom:8px}.pk-row .wk-bar{margin-bottom:14px}.pk-row .wk-t{padding-top:0}.pk-row .wk-go{padding-top:10px}
@media(max-width:1100px){.pk,.pk-row .wk-grid{grid-column:1/-1}.pk{margin-bottom:28px}.pk-row .wk-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.pk-row .wk-grid{grid-template-columns:1fr}}

/* home · one tile per project, 2×2 */
.h2 .wk-grid{grid-column:1/-1;grid-template-columns:repeat(2,1fr);column-gap:var(--gut);row-gap:var(--gut)}
.h2 .wk{display:flex;flex-direction:column;border:1px solid #DCD9D0;background:#F7F6F2;transition:border-color .25s}
.h2 .wk:hover,.h2 .wk:focus-visible{border-color:#17171C}
.wk-top{display:flex;justify-content:space-between;align-items:center;height:40px;padding:0 16px;border-bottom:1px solid #DCD9D0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5B5B63}
.wk-top b{font-weight:400;color:#17171C;margin-right:12px}
.wk-top span:last-child{transition:transform .25s}
.h2 .wk:hover .wk-top span:last-child{transform:translateX(-4px);color:#17171C}
.h2 .wk-v{aspect-ratio:1040/860;width:100%;border:0;border-bottom:1px solid #DCD9D0;position:relative;overflow:hidden;background:#F7F6F2}
.h2 .wk-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:darken}
.h2 .wk-v .ex{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.h2 .wk-v .ex svg{height:88%;width:auto;max-width:92%}
.h2 .wk-t{padding:20px 16px 24px}
.h2 .wk-t h2{color:#17171C;font-size:clamp(20px,1.8vw,26px)}
.h2 .wk-t p{font-size:15px;margin-top:8px}
.h2 .wk-tbd{border-style:dashed}.h2 .wk-tbd .wk-v{background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(23,23,28,.03) 10px 11px)}
@media(max-width:700px){.h2 .wk-grid{grid-template-columns:1fr}}
.h2 .wk-v .ex{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important}.h2 .wk:hover .wk-v{border-color:#DCD9D0}

/* ALTA tile: the case study's own opening, live */
.h2 .wk-v .wk-if{position:absolute;left:0;top:0;width:1440px;height:1191px;border:0;transform-origin:0 0;pointer-events:none;background:#F7F6F2}
html.peek,html.peek body{overflow:hidden!important}
html.peek #hud,html.peek .ai-skipi,html.peek #consent,html.peek .consent,html.peek body>section:not(#alta),html.peek body>footer,html.peek #tip{display:none!important}
html.peek #alta{min-height:100vh}
/* hero: small, centred, boutique; plenty of air before the drinks */
.h2-hero{padding:20vh 0 22vh;text-align:center}
.h2-hero .grid{justify-items:center}
.h2-role{grid-column:1/-1;justify-content:center;gap:14px;margin:0 0 36px;font-size:10px;letter-spacing:.24em}
.h2-role span+span::before{content:"·";margin-right:14px;color:#B9B7B0}
.h2-h{grid-column:3/span 8;font-size:clamp(26px,2.6vw,40px);line-height:1.18;letter-spacing:-.02em;font-weight:200}
.h2-h>span{padding-bottom:.02em}
.h2-sub{grid-column:4/span 6;margin:28px auto 0;font-size:15px;line-height:1.6;max-width:36ch;color:#8A8A90}
.h2-cta{justify-content:center;margin-top:36px}
.h2-cta .h2-btn{height:auto;padding:0 0 6px;border:0;border-bottom:1px solid #17171C;font-size:10px;letter-spacing:.24em;background:none}
.h2-cta .h2-btn:hover{background:none;border-color:#8DB80A}
.h2-cta .h2-btn span{display:inline-block;transition:transform .25s}.h2-cta .h2-btn:hover span{transform:translateX(4px)}
@media(max-width:900px){.h2-hero{padding:16vh 0 18vh}.h2-h,.h2-sub{grid-column:1/-1}.h2-role{flex-direction:row;flex-wrap:wrap}}
.h2-h>span,.h2-sub{text-wrap:balance}
@media(max-width:900px){.h2-role{flex-direction:column;gap:8px}.h2-role span+span::before{content:none}.h2-h{font-size:24px}}

.h2-me{display:flex;align-items:baseline;gap:14px;white-space:nowrap}
.h2-me span{color:#8A8A90}
@media(max-width:900px){.h2-me{flex-direction:column;gap:3px;font-size:10px}.h2-me span{font-size:9px}}
.h2-role span{color:#5B5B63!important}

/* hero: larger, the supporting line darker */
.h2-h{grid-column:2/span 10;font-size:clamp(34px,4vw,60px);line-height:1.12;letter-spacing:-.03em}
.h2-sub{grid-column:3/span 8;font-size:18px;max-width:44ch;color:#3A3A42;margin-top:32px}
.h2-role{font-size:11px;margin-bottom:40px}
.h2-cta{margin-top:44px}
.h2-cta .h2-btn{font-size:11px}
@media(max-width:900px){.h2-h{grid-column:1/-1;font-size:30px}.h2-sub{grid-column:1/-1;font-size:16px}}

/* ───────── Monto · hero: the scope of ownership, then the work ───────── */
body.mo{background:#F7F6F2;color:#17171C;font-family:'Hanken Grotesk',system-ui,sans-serif}
.mo .guides{display:none}
.mo-hero{padding:88px 0 0}
.mo-hero .grid{row-gap:0;align-items:center}
.mo-l{grid-column:1/span 5}
.mo-k{font-size:11px;letter-spacing:.2em;color:#5B5B63;margin-bottom:28px}.mo-k span{color:#B9B7B0;margin:0 6px}
.mo-h{margin:0;font:200 clamp(40px,4.4vw,68px)/1.04 'Hanken Grotesk';letter-spacing:-.035em}
.mo-h em{font-style:italic;font-weight:200;color:#7B59FF}
.mo-p{margin:28px 0 0;max-width:38ch;font:300 18px/1.55 'Hanken Grotesk';color:#3A3A42}
.mo-r{grid-column:7/-1;position:relative;aspect-ratio:1/.82}
.mo-f{position:absolute;margin:0;background:#fff;border:1px solid #17171C;overflow:hidden;box-shadow:0 30px 60px -36px rgba(23,23,28,.35);animation:moin .9s cubic-bezier(.2,.7,.2,1) both}
.mo-f figcaption{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-bottom:1px solid #DCD9D0;font-size:9px;letter-spacing:.16em;color:#5B5B63;background:#F7F6F2}
.mo-f figcaption i{width:6px;height:6px;border:1px solid #B9B7B0;border-radius:50%!important}
.mo-f figcaption span{margin-left:8px}
.mo-f img{display:block;width:100%;height:auto}
.mo-f.f1{left:0;top:0;width:78%;z-index:1}
.mo-f.f2{right:0;top:30%;width:66%;z-index:2;animation-delay:.12s}
.mo-f.f3{left:6%;bottom:0;width:44%;z-index:3;animation-delay:.24s}
.mo-f.f3 img{height:150px;object-fit:cover;object-position:30% 18%}
@keyframes moin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.mo-own{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);margin-top:96px;padding-top:28px;border-top:1px solid #17171C}
.mo-st{grid-column:1/span 7;margin:0;font:200 clamp(34px,3.6vw,56px)/1.06 'Hanken Grotesk';letter-spacing:-.03em}
.mo-own-r{grid-column:8/-1}
.mo-own-r p{margin:0;font:300 17px/1.6 'Hanken Grotesk';color:#3A3A42}
.mo-m{list-style:none;margin:24px 0 0;padding:0;font-size:10px;letter-spacing:.16em;color:#17171C}
.mo-m li{padding:10px 0;border-top:1px solid #DCD9D0}.mo-m li:last-child{border-bottom:1px solid #DCD9D0}
.mo-cta{display:inline-flex;gap:8px;margin-top:28px;padding-bottom:6px;border-bottom:1px solid #17171C;color:#17171C;text-decoration:none;font-size:11px;letter-spacing:.2em}
.mo-cta:hover{border-color:#7B59FF}
.mo-strip{margin:72px 0 0;padding:28px 0;border-top:1px solid #DCD9D0;border-bottom:1px solid #DCD9D0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mo-track{display:flex;gap:16px;width:max-content;animation:mostrip 48s linear infinite}
.mo-track img{height:220px;width:auto;border:1px solid #DCD9D0;background:#fff}
.mo-strip:hover .mo-track{animation-play-state:paused}
@keyframes mostrip{to{transform:translateX(calc(-50% - 8px))}}
@media(prefers-reduced-motion:reduce){.mo-track{animation:none}.mo-f{animation:none}}
@media(max-width:1000px){.mo-l,.mo-r,.mo-st,.mo-own-r{grid-column:1/-1}.mo-r{margin-top:48px}.mo-own-r{margin-top:24px}.mo-hero{padding-top:56px}.mo-track img{height:150px}}

/* ───────── CV · interactive ───────── */
.cv-hero{padding:96px 0 56px}
.cv-k{grid-column:1/-1;margin:0 0 20px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#5B5B63}
.cv-name{grid-column:1/span 8;margin:0;font:300 clamp(32px,3.4vw,52px)/1.05 'Hanken Grotesk';letter-spacing:-.03em}
.cv-title{grid-column:1/-1;margin:14px 0 0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#7B59FF}
.cv-sum{grid-column:1/span 7;margin-top:28px}
.cv-sum p{margin:0 0 10px;font:300 16px/1.6 'Hanken Grotesk';color:#3A3A42}
.cv-contact{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:24px;margin:24px 0 0;font-size:11px;letter-spacing:.12em}
.cv-contact a{color:#17171C;text-decoration:none;border-bottom:1px solid #DCD9D0;padding-bottom:3px}.cv-contact a:hover{border-color:#17171C}
.cv-body{padding:0 0 160px}
.cv-main{grid-column:1/span 8}
.cv-side{grid-column:10/-1;align-self:start;position:sticky;top:76px}
.cv-filters{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:20px;border-bottom:1px solid #17171C}
.cv-f{all:unset;cursor:pointer;padding:7px 11px;border:1px solid #DCD9D0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#5B5B63;transition:border-color .2s,color .2s,background .2s}
.cv-f:hover{border-color:#17171C;color:#17171C}
.cv-f.on{background:#17171C;border-color:#17171C;color:#F7F6F2}
.cv-role{border-bottom:1px solid #DCD9D0;transition:opacity .3s}
.cv-role.dim{opacity:.28}
.cv-h{all:unset;cursor:pointer;box-sizing:border-box;width:100%;display:grid;grid-template-columns:150px 1fr 20px;column-gap:16px;align-items:baseline;padding:18px 0}
.cv-when{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8A8A90}
.cv-t b{display:block;font:400 17px/1.3 'Hanken Grotesk';color:#17171C}
.cv-t span{display:block;margin-top:2px;font:300 14px 'Hanken Grotesk';color:#5B5B63}
.cv-h i{position:relative;width:12px;height:12px;align-self:center}
.cv-h i::before,.cv-h i::after{content:"";position:absolute;left:0;top:50%;width:12px;height:1px;background:#17171C;transition:transform .25s}
.cv-h i::after{transform:rotate(90deg)}
.cv-role.open .cv-h i::after{transform:rotate(0)}
.cv-h:hover b{color:#7B59FF}
.cv-h:focus-visible{outline:2px solid #8DB80A;outline-offset:4px}
.cv-pts{list-style:none;margin:0;padding:0 0 0 166px;display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .35s ease,padding .35s ease}
.cv-pts>li{min-height:0}
.cv-role .cv-pts{display:block;max-height:0;transition:max-height .4s ease,padding .4s ease}
.cv-role.open .cv-pts{max-height:900px;padding-bottom:20px}
.cv-pts li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:7px 0;border-top:1px dashed #E6E3DB;font:300 15px/1.55 'Hanken Grotesk';color:#3A3A42}
.cv-pts li:first-child{border-top:0}
.cv-q{all:unset;cursor:pointer;flex:none;font-size:10px;letter-spacing:.12em;color:#8A8A90;opacity:0;transition:opacity .2s,color .2s}
.cv-pts li:hover .cv-q,.cv-q:focus-visible{opacity:1}.cv-q:hover{color:#7B59FF}
@media(hover:none){.cv-q{opacity:1}}
.cv-blk{padding:0 0 28px;margin-bottom:28px;border-bottom:1px solid #DCD9D0}
.cv-blk .cv-k{margin-bottom:12px}
.cv-list{list-style:none;margin:0;padding:0}.cv-list li{padding:5px 0;font:300 14px/1.45 'Hanken Grotesk';color:#17171C}
.cv-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.cv-chips li{padding:4px 8px;border:1px solid #DCD9D0;font:400 12px 'Hanken Grotesk'}
.cv-edu{list-style:none;margin:0;padding:0}.cv-edu li{display:grid;gap:2px;padding:6px 0}.cv-edu b{font:400 14px 'Hanken Grotesk'}.cv-edu span{font:300 13px 'Hanken Grotesk';color:#5B5B63}.cv-edu em{font-style:normal;font-size:10px;letter-spacing:.12em;color:#8A8A90}
.cv-int{margin:0;font:300 14px 'Hanken Grotesk'}
/* the question bar: slim, fixed, grows with the conversation */
.cv-ask{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(247,246,242,.96);backdrop-filter:blur(8px);border-top:1px solid #17171C}
.cv-ask-in{max-width:1440px;margin:0 auto;padding:12px 40px}
.cv-ask .alog:empty{display:none}
.cv-ask .alog{max-height:42vh;overflow:auto;padding:8px 0 12px;border-bottom:1px solid #DCD9D0;margin-bottom:10px}
.cv-ask .asug{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.cv-ask .chip{all:unset;cursor:pointer;padding:5px 10px;border:1px solid #DCD9D0;font:400 12px 'Hanken Grotesk';color:#3A3A42}.cv-ask .chip:hover{border-color:#17171C}
.cv-ask .composer{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border:1px solid #17171C;background:#fff}
.cv-ask .composer input{flex:1;border:0;outline:0;background:transparent;font:300 15px 'Hanken Grotesk';color:#17171C}
.cv-ask .send{all:unset;cursor:pointer}
.cv-ask.has .asug{display:none}
@media(max-width:900px){.cv-name,.cv-sum,.cv-main,.cv-side{grid-column:1/-1}.cv-side{position:static;margin-top:48px}.cv-h{grid-template-columns:1fr 20px}.cv-when{grid-column:1/-1;margin-bottom:4px}.cv-pts{padding-left:0}.cv-ask-in{padding:10px 20px}}
.cv .cv-ask{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:auto!important;margin:0!important;grid-column:auto}
@media(max-width:600px){.h2-nav>a:not([hreflang]):not([href*="cv"]){display:none}.cv-ask .asug{display:none}}

/* the answers panel: closable, and readable at body size */
.cv-ask-in{position:relative}
.cv-x{all:unset;cursor:pointer;display:none;position:absolute;right:40px;top:12px;z-index:2;font-size:10px;letter-spacing:.14em;color:#5B5B63;padding:6px 0}
.cv-x:hover{color:#17171C}
.cv-ask.has .cv-x{display:block}
.cv-ask.min .alog{display:none}
.cv-ask.min .cv-x{display:none}
.cv-ask .alog{padding-top:36px}
.cv-ask .amsg{padding:10px 0;border-top:1px solid #E6E3DB}
.cv-ask .amsg:first-child{border-top:0}
.cv-ask .amsg .who{font-size:10px;letter-spacing:.14em;color:#8A8A90;margin-bottom:4px}
.cv-ask .amsg p{margin:0;max-width:72ch;font:300 15px/1.6 'Hanken Grotesk';color:#17171C}
.cv-ask .amsg.me p{font-weight:400;color:#5B5B63}
@media(max-width:900px){.cv-x{right:20px}}

/* ───────── CV page · editorial (cvp) ───────── */
body.cvp{background:#F7F6F2;color:#17171C;font-family:'Hanken Grotesk',system-ui,sans-serif}
.cvp .guides{display:none}
.cvp-main{padding-bottom:120px}
.cvp-head{padding:96px 0 72px}
.cvp-head .grid{align-items:start}
.cvp-id{grid-column:1/span 4}
.cvp-name{margin:0;font:300 clamp(32px,3vw,44px)/1.08 'Hanken Grotesk';letter-spacing:-.025em}
.cvp-hl{margin:16px 0 0;max-width:30ch;font:400 15px/1.5 'Hanken Grotesk';color:#3A3A42}
.cvp-links{display:flex;flex-direction:column;gap:8px;margin:28px 0 0;font-size:11px;letter-spacing:.12em}
.cvp-links a{color:#17171C;text-decoration:none;align-self:flex-start;border-bottom:1px solid #DCD9D0;padding-bottom:2px}
.cvp-links a:hover{border-color:#17171C}
.cvp-about{grid-column:6/-1}
.cvp-about p{margin:0 0 18px;max-width:58ch;font:300 clamp(18px,1.45vw,21px)/1.55 'Hanken Grotesk';color:#17171C}
.cvp-about p:last-child{margin-bottom:0}
.cvp-sec{padding:0 0 64px}
.cvp-k{grid-column:1/-1;margin:0 0 36px;padding-top:16px;border-top:1px solid #17171C;font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:#17171C}
/* a role: meta on columns 1–3, the text on 6–12 (lined up with the About) */
.cvp-role{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding:0 0 48px;margin-bottom:48px;border-bottom:1px solid #DCD9D0}
.cvp-role:last-of-type{border-bottom:0;margin-bottom:0}
.cvp-meta{grid-column:1/span 4;display:flex;flex-direction:column;gap:6px;padding-top:6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#5B5B63}
.cvp-meta span:first-child{color:#17171C}
.cvp-body{grid-column:6/-1}
.cvp-rt{margin:0;font:400 22px/1.3 'Hanken Grotesk';letter-spacing:-.01em}
.cvp-rt span{color:#5B5B63;font-weight:300}
.cvp-intro{margin:10px 0 0;max-width:62ch;font:300 16px/1.6 'Hanken Grotesk';color:#3A3A42}
.cvp-pts{list-style:none;margin:20px 0 0;padding:0}
.cvp-pt{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 56px;column-gap:16px;align-items:baseline;padding:9px 0}
.cvp-pt p{position:relative;margin:0;max-width:66ch;padding-left:18px;font:300 16px/1.6 'Hanken Grotesk';color:#17171C}
.cvp-pt p::before{content:"";position:absolute;left:0;top:.8em;width:8px;height:1px;background:#8A8A90}
/* Ask: quiet, never competing with the text */
.cvp-la,.cvp-ra{all:unset;cursor:pointer;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#5B5B63}
.cvp-la{justify-self:end;padding:4px 0;opacity:0;transition:opacity .15s}
.cvp-pt:hover .cvp-la,.cvp-la:focus-visible,.cvp-pt.on .cvp-la{opacity:1}
.cvp-la:hover,.cvp-ra:hover{color:#17171C}
.cvp-ra{display:inline-flex;gap:6px;margin-top:20px;padding:4px 0;border-bottom:1px solid #DCD9D0}
.cvp-ra:hover{border-color:#17171C}
.cvp-la:focus-visible,.cvp-ra:focus-visible{outline:2px solid #8DB80A;outline-offset:3px;opacity:1}
/* the answer: opens in place, under its question */
.cvp-ans{grid-column:1/-1;margin:6px 0 10px 18px;padding:14px 18px 16px;border-left:1px solid #17171C;background:rgba(23,23,28,.035)}
.cvp-ra+.cvp-ans,.cvp-rows-ask .cvp-ans{margin-left:0;margin-top:12px}
.cvp-ans-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:8px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#5B5B63}
.cvp-ans-x{all:unset;cursor:pointer;font-size:10px;letter-spacing:.14em;color:#5B5B63}.cvp-ans-x:hover{color:#17171C}
.cvp-ans-x:focus-visible{outline:2px solid #8DB80A;outline-offset:3px}
.cvp-ans-t{margin:0;max-width:66ch;font:300 15px/1.65 'Hanken Grotesk';color:#17171C;white-space:pre-wrap}
.cvp-ans-t.wait{color:#8A8A90}
.cvp-ans-f{display:flex;gap:8px;margin-top:12px;max-width:66ch}
.cvp-ans-f input{flex:1;min-width:0;height:34px;padding:0 10px;border:1px solid #DCD9D0;background:#fff;font:300 14px 'Hanken Grotesk';color:#17171C;outline:0}
.cvp-ans-f input:focus{border-color:#17171C}
.cvp-ans-f button{all:unset;cursor:pointer;padding:0 10px;font-size:12px}
/* earlier and teaching: compact rows on the same grid */
.cvp-rows{grid-column:1/-1;list-style:none;margin:0;padding:0}
.cvp-rows li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding:12px 0;border-bottom:1px solid #E6E3DB;align-items:baseline}
.cvp-rows li:first-child{padding-top:0}
.cvp-ew{grid-column:1/span 4;font-size:11px;letter-spacing:.1em;color:#5B5B63}
.cvp-et{grid-column:6/span 3;font:300 15px/1.45 'Hanken Grotesk';color:#5B5B63}.cvp-et b{font-weight:400;color:#17171C}
.cvp-ed{grid-column:9/-1;font:300 15px/1.5 'Hanken Grotesk';color:#3A3A42}
.cvp-rows-ask{grid-column:6/-1}
.cvp-last .cvp-k{margin-bottom:16px}
.cvp-col{grid-column:span 4}
.cvp-col p{margin:0;font:300 15px/1.6 'Hanken Grotesk';color:#17171C}
.cvp-last .grid{row-gap:0}
@media(max-width:1100px){.cvp-id{grid-column:1/span 5}.cvp-about{grid-column:6/-1}}
@media(max-width:900px){
  .cvp-head{padding:56px 0 48px}
  .cvp-id,.cvp-about,.cvp-meta,.cvp-body,.cvp-ew,.cvp-et,.cvp-ed,.cvp-rows-ask,.cvp-col{grid-column:1/-1}
  .cvp-about{margin-top:32px}
  .cvp-meta{flex-direction:row;flex-wrap:wrap;gap:4px 12px;margin-bottom:10px;padding-top:0}
  .cvp-rt{font-size:20px}
  .cvp-pt{grid-template-columns:minmax(0,1fr)}
  .cvp-la{justify-self:start;margin:6px 0 0 18px;padding:8px 12px;border:1px solid #DCD9D0;display:none;opacity:1}
  .cvp-pt.on .cvp-la{display:inline-flex}
  .cvp-ra{padding:10px 0}
  .cvp-ans{margin-left:0}
  .cvp-ed{margin-top:4px}.cvp-et{margin-top:2px}
  .cvp-col{margin-bottom:24px}
}
@media(max-width:600px){.h2-me{font-size:10px;letter-spacing:.08em}.h2-nav{gap:12px}.h2-icons{gap:4px;grid-template-columns:repeat(3,30px)}.h2 .h2-ic{width:30px;height:30px}}
/* CV page · hierarchy pass */
.cvp-about .cvp-lead{margin:0 0 28px;max-width:24ch;font:300 clamp(26px,2.5vw,36px)/1.22 'Hanken Grotesk';letter-spacing:-.02em;color:#17171C}
.cvp-org{margin:0;font:400 26px/1.15 'Hanken Grotesk';letter-spacing:-.02em;color:#17171C}
.cvp-body .cvp-rt{margin:6px 0 0;font:400 16px/1.4 'Hanken Grotesk';letter-spacing:0;color:#17171C}
.cvp-meta{padding-top:9px}
.cvp-general{grid-column:6/-1}
.cvp-general:empty{display:none}
.cvp-general .cvp-ans{margin:32px 0 0}
/* touch: every line shows a small, quiet marker with a full-size tap target */
@media(hover:none),(max-width:900px){
  .cvp-pt{grid-template-columns:minmax(0,1fr) 44px;column-gap:4px}
  .cvp-la{display:inline-flex!important;justify-self:end;align-self:start;align-items:center;justify-content:center;width:44px;height:44px;margin:-8px 0 0;padding:0;border:0;opacity:1;font-size:13px;letter-spacing:0;color:#8A8A90}
  .cvp-la .cvp-lt{display:none}
}
@media(max-width:900px){.cvp-general{grid-column:1/-1}.cvp-org{font-size:24px}}
@media(max-width:600px){body.cvp .h2-nav>a[href*="cv"]{display:none}body.cvp .h2-nav>a[href$="#ask"]{display:inline}}

/* ───────── CV page · hybrid: read → discover → explore → ask ───────── */
/* glance index */
.cvp-ix{padding:0 0 80px}
.cvp-ix .cvp-k{margin-bottom:8px}
.ix{grid-column:1/-1;list-style:none;margin:0;padding:0}
.ix a{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:baseline;padding:13px 0;border-bottom:1px solid #E6E3DB;color:#17171C;text-decoration:none}
.ix a:hover .ix-o{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ix a:focus-visible{outline:2px solid #8DB80A;outline-offset:2px}
.ix-w{grid-column:1/span 4;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#5B5B63}
.ix-o{grid-column:6/span 2;font:400 19px/1.3 'Hanken Grotesk';letter-spacing:-.01em}
.ix-r{grid-column:8/span 3;font:300 15px/1.45 'Hanken Grotesk';color:#3A3A42}
.ix-c{grid-column:11/-1;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#8A8A90;text-align:right}
.ix-f{grid-column:6/-1;margin:18px 0 0;font:300 15px/1.6 'Hanken Grotesk';color:#3A3A42}
.ix-f .mono{display:inline-block;margin-right:14px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#5B5B63}
/* experience header with the one invitation */
.cvp-k.cvp-k2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:baseline}
.cvp-k2 h2{grid-column:1/span 4;margin:0;font:inherit;letter-spacing:inherit}
.cvp-inv{grid-column:6/-1;margin:0;font-size:11px;letter-spacing:.06em;text-transform:none;color:#17171C}
/* role meta + its specimen */
.cvp-role .cvp-meta{display:block;padding-top:9px;font-size:inherit;letter-spacing:0;text-transform:none}
.cvp-when{display:flex;flex-direction:column;gap:6px;margin:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#5B5B63}
.cvp-when span:first-child{color:#17171C}

/* explore layer: native details, full width under the role */
/* Monto: the five moments, all readable; one is shown */
/* Monto stage */


/* answer patterns (drawn from the agent's optional [[pattern]] block; plain text if anything fails) */
.ap{margin:12px 0 2px;max-width:66ch;border-top:1px solid #DCD9D0;font:300 14.5px/1.5 'Hanken Grotesk';color:#17171C}
.ap-r{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:7px 0;border-bottom:1px solid #E6E3DB}
.ap-r b{font:400 10px/1.7 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#5B5B63}
.ap-ba{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #E6E3DB}
.ap-ba>div{padding:8px 12px 8px 0}.ap-ba>div+div{padding-left:12px;border-left:1px solid #17171C}
.ap-ba b{display:block;font:400 10px/1.7 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#5B5B63}
.ap-fit{display:grid;grid-template-columns:1fr 1.3fr 70px;gap:10px;padding:7px 0;border-bottom:1px solid #E6E3DB}
.ap-fit i{font:400 10px/1.7 'JetBrains Mono',monospace;font-style:normal;letter-spacing:.08em;text-transform:uppercase;text-align:right}
.ap-fit i.gap{color:#8A8A90}
.ap-art{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:start;padding:10px 0;border-bottom:1px solid #E6E3DB}
.ap-art img{width:140px;border:1px solid #DCD9D0}
.ap-art span{font-size:13.5px;color:#3A3A42}

/* tools + education, now two columns */
.cvp-last .cvp-col:first-child{grid-column:1/span 4}.cvp-last .cvp-col:last-child{grid-column:6/-1}

@media(max-width:1100px){.ix-r{grid-column:8/span 4}.ix-c{display:none}}
@media(max-width:900px){
  .cvp-ix{padding-bottom:56px}
  .ix a{grid-template-columns:1fr auto;row-gap:2px}
  .ix-w{grid-column:1/-1;order:-1}.ix-o{grid-column:1}.ix-r{grid-column:1/-1;font-size:14px}.ix-c{display:none}
  .ix-f{grid-column:1/-1}
  .cvp-k2 h2,.cvp-inv{grid-column:1/-1}.cvp-inv{margin-top:8px}
  .cvp-role .cvp-meta{margin-bottom:12px}
  .cvp-when{flex-direction:row;flex-wrap:wrap;gap:4px 12px}
  .ap-r,.ap-art{grid-template-columns:1fr;gap:2px}.ap-fit{grid-template-columns:1fr 1fr}.ap-fit i{grid-column:1/-1;text-align:left}
  .cvp-last .cvp-col:first-child,.cvp-last .cvp-col:last-child{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .cvp *,.cvp *::before,.cvp *::after{transition:none!important;animation:none!important}
}
@media print{.cvp-la,.cvp-ra,.cvp-cs,.cvp-ix{display:none!important}}


/* actions under a role: Ask, and the case study */
.cvp-acts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:20px 0 0}
.cvp-acts:empty{display:none}
.cvp-acts .cvp-ra{margin-top:0}
.cvp-cs{display:inline-flex;gap:6px;padding:4px 0;border-bottom:1px solid #17171C;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#17171C;text-decoration:none}
.cvp-cs:hover{border-bottom-width:2px}
.cvp-cs:focus-visible{outline:2px solid #8DB80A;outline-offset:3px}
@media(max-width:900px){.cvp-acts{gap:4px 20px}.cvp-cs{padding:10px 0}}

/* ───────── CV · the Ask panel (side panel on desktop, bottom sheet on mobile) ───────── */
html.cq-lock{overflow:hidden}
.cq{position:fixed;z-index:60;top:53px;right:0;bottom:0;width:min(440px,100vw);display:flex;flex-direction:column;background:#F7F6F2;border-left:1px solid #17171C;box-shadow:-24px 0 48px -32px rgba(23,23,28,.35);transform:translateX(24px);opacity:0;transition:transform .26s cubic-bezier(.2,.7,.2,1),opacity .2s}
.cq.on{transform:none;opacity:1}
.cq[hidden]{display:none}
.cq-scrim{position:fixed;inset:0;z-index:59;background:rgba(23,23,28,.28);opacity:0;transition:opacity .2s}
.cq-scrim.on{opacity:1}
.cq-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 28px 14px;border-bottom:1px solid #DCD9D0}
.cq-ctx{margin:0;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#17171C}
.cq-x{all:unset;cursor:pointer;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#5B5B63;padding:6px 0}
.cq-x:hover{color:#17171C}
.cq-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:22px 28px 28px;outline:0}
.cq-line{margin:0 0 22px;padding:2px 0 2px 14px;border-left:1px solid #17171C;font:300 14.5px/1.55 'Hanken Grotesk';color:#3A3A42}
.cq-lede{margin:4px 0 14px;font:300 24px/1.2 'Hanken Grotesk';letter-spacing:-.02em;color:#17171C}
.cq-th{list-style:none;margin:0;padding:0;border-top:1px solid #DCD9D0}
.cq-th li{border-bottom:1px solid #DCD9D0}
.cq-t{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:1fr 16px;column-gap:12px;row-gap:3px;width:100%;padding:14px 0}
.cq-tt{font:400 17px/1.3 'Hanken Grotesk';letter-spacing:-.01em;color:#17171C}
.cq-td{grid-column:1;font:300 14px/1.45 'Hanken Grotesk';color:#5B5B63}
.cq-go{grid-column:2;grid-row:1/3;align-self:center;font-size:13px;color:#8A8A90;transition:transform .2s,color .2s}
.cq-t:hover .cq-tt{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cq-t:hover .cq-go{color:#17171C;transform:translate(2px,-2px)}
.cq-item{padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid #E6E3DB}
.cq-item:last-child{border-bottom:0;margin-bottom:0}
.cq-q{margin:0 0 8px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#5B5B63}
.cq-a{font:300 16px/1.62 'Hanken Grotesk';color:#17171C;white-space:pre-wrap}
.cq-a.wait{color:#8A8A90}
.cq-a .ap{white-space:normal}
.cq-foot{padding:14px 28px 18px;border-top:1px solid #DCD9D0;background:#F7F6F2}
.cq-k{margin:0 0 8px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#8A8A90}
.cq-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.cq-pill{all:unset;cursor:pointer;padding:6px 10px;border:1px solid #DCD9D0;font:300 13px/1.2 'Hanken Grotesk';color:#3A3A42}
.cq-pill:hover{border-color:#17171C;color:#17171C}
.cq-f{display:flex;align-items:center;gap:10px;border-bottom:1px solid #17171C}
.cq-f input{flex:1;min-width:0;height:40px;padding:0;border:0;background:transparent;font:300 15px 'Hanken Grotesk';color:#17171C;outline:0}
.cq-f input::placeholder{color:#8A8A90}
.cq-f button{all:unset;cursor:pointer;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#17171C;padding:10px 0}
.cq-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cq :focus-visible{outline:2px solid #8DB80A;outline-offset:2px}
.cvp-ra[aria-expanded="true"],.cvp-la[aria-expanded="true"]{color:#17171C!important;opacity:1!important}
@media(max-width:900px){
  .cq{top:auto;left:0;right:0;width:auto;max-height:86dvh;border-left:0;border-top:1px solid #17171C;box-shadow:0 -16px 40px -20px rgba(23,23,28,.35);transform:translateY(24px)}
  .cq::before{content:"";display:block;width:36px;height:3px;margin:9px auto 0;background:#DCD9D0}
  .cq-top{padding:10px 20px 12px}.cq-body{padding:18px 20px 22px}.cq-foot{padding:12px 20px calc(14px + env(safe-area-inset-bottom))}
  .cq-lede{font-size:21px}.cq-t{padding:13px 0}
  .cq-f input{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.cq,.cq-scrim{transition:none}}
/* fit report, evidence-based (no scores) */
.fo-head2{grid-column:1/-1}
.fo-assess{margin:10px 0 18px;font:300 clamp(30px,3.4vw,52px)/1.08 'Hanken Grotesk',sans-serif;letter-spacing:-.025em}
.fo-cap{grid-column:1/-1}
.cf.unknown em{color:var(--mute)}
/* Ask panel: follow-ups and the collapsed topics */
.cq-a.fade{animation:akf .35s ease both}@keyframes akf{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.cq-nx{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:12px}
.cq-nx:empty{display:none}
.cq-n{all:unset;cursor:pointer;padding:5px 0;font:400 14.5px/1.35 'Hanken Grotesk';color:#17171C;border-bottom:1px solid transparent}
.cq-n span{color:#8A8A90;transition:transform .2s;display:inline-block}
.cq-n:hover{border-bottom-color:#17171C}.cq-n:hover span{color:#17171C;transform:translateX(2px)}
.cq-mt{all:unset;cursor:pointer;margin-bottom:10px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#8A8A90}
.cq-mt:hover{color:#17171C}.cq-mt::after{content:" ↓"}.cq-mt[aria-expanded="true"]::after{content:" ↑"}
.cq-pills[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.cq-a.fade{animation:none}}
.cq-hd{min-width:0}
.cq-from{margin:4px 0 0;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#8A8A90}
.cq-back{all:unset;cursor:pointer;color:#5B5B63;border-bottom:1px solid #DCD9D0}
.cq-back:hover{color:#17171C;border-color:#17171C}
.cq-x{white-space:nowrap;flex:none}
.cq-item:focus{outline:0}.cq-item:focus-visible{outline:2px solid #8DB80A;outline-offset:4px}
.cq-a a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ───────── Ask panel · white surface and micro-interactions ───────── */
.cq{background:#fff;border-left-color:#E6E3DB;box-shadow:-30px 0 60px -30px rgba(23,23,28,.22)}
.cq-top,.cq-foot{background:#fff}
.cq-top{border-bottom-color:#EFEDE8}.cq-foot{border-top-color:#EFEDE8}
.cq-scrim{background:rgba(23,23,28,.22)}
@media(max-width:900px){.cq{border-top:1px solid #E6E3DB;box-shadow:0 -20px 50px -20px rgba(23,23,28,.28)}}
/* open: content arrives a beat after the surface */
.cq.on .cq-top,.cq.on .cq-body,.cq.on .cq-foot{animation:akIn .38s cubic-bezier(.2,.7,.2,1) both}
.cq.on .cq-body{animation-delay:.05s}.cq.on .cq-foot{animation-delay:.1s}
@keyframes akIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cq-hint{margin:-6px 0 16px;font:300 14px/1.5 'Hanken Grotesk';color:#8A8A90}
/* topics: hover lifts, press settles, the chosen one stays marked while the list closes */
.cq-th li{animation:akIn .4s cubic-bezier(.2,.7,.2,1) both}
.cq-th li:nth-child(2){animation-delay:.04s}.cq-th li:nth-child(3){animation-delay:.08s}.cq-th li:nth-child(4){animation-delay:.12s}.cq-th li:nth-child(5){animation-delay:.16s}
.cq-t{position:relative;transition:background .2s,padding .2s}
.cq-t::before{content:"";position:absolute;left:-14px;top:14px;bottom:14px;width:2px;background:#17171C;transform:scaleY(0);transform-origin:top;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.cq-t:hover::before,.cq-t:focus-visible::before,.cq-t.picked::before{transform:scaleY(1)}
.cq-t:hover{padding-left:4px}
.cq-t:active{transform:scale(.99)}
.cq-t.picked .cq-tt{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cq-t.picked .cq-go{color:#17171C;transform:translate(3px,-3px)}
.cq-intro.leaving .cq-th li:not(:has(.picked)),.cq-intro.leaving .cq-lede,.cq-intro.leaving .cq-hint{opacity:0;transform:translateY(-4px);transition:opacity .22s,transform .22s}
/* an answer arrives: a gentle rise, a soft rule */
.cq-item{animation:akIn .35s cubic-bezier(.2,.7,.2,1) both}
.cq-q{transition:color .2s}
/* waiting: three quiet dots instead of words */
.cq-dots{display:inline-flex;gap:5px;padding:8px 0}
.cq-dots i{width:6px;height:6px;border-radius:50%;background:#8A8A90;animation:akDot 1.1s ease-in-out infinite}
.cq-dots i:nth-child(2){animation-delay:.15s}.cq-dots i:nth-child(3){animation-delay:.3s}
@keyframes akDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
/* follow-ups: arrive one after the other, nudge on hover, settle on press */
.cq-n{animation:akIn .35s cubic-bezier(.2,.7,.2,1) both;transition:border-color .2s,color .2s}
.cq-n:nth-child(2){animation-delay:.08s}
.cq-n:active{transform:translateX(2px)}
.cq-pill{transition:border-color .2s,color .2s,background .2s,transform .15s}
.cq-pill:hover{background:#F7F6F2}.cq-pill:active{transform:scale(.97)}
.cq-pills:not([hidden]) .cq-pill{animation:akIn .3s cubic-bezier(.2,.7,.2,1) both}
.cq-pills:not([hidden]) .cq-pill:nth-child(2){animation-delay:.04s}.cq-pills:not([hidden]) .cq-pill:nth-child(3){animation-delay:.08s}.cq-pills:not([hidden]) .cq-pill:nth-child(4){animation-delay:.12s}
/* heading: a soft swap when the subject changes */
.cq-ctx.swap{animation:akSwap .4s ease both}
@keyframes akSwap{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
/* the input: the line thickens as you type, the button answers, and waits while an answer is being written */
.cq-f{transition:border-color .2s;box-shadow:0 1px 0 0 transparent}
.cq-f:focus-within{box-shadow:0 1px 0 0 #17171C}
.cq-f button{transition:transform .2s,opacity .2s}
.cq-f button:hover{transform:translate(2px,-2px)}
.cq-f.busy button{opacity:.35;pointer-events:none}
.cq-x{transition:color .2s}.cq-x span{display:inline-block;transition:transform .25s}.cq-x:hover span{transform:rotate(90deg)}
.cvp-ra,.cvp-la{transition:color .2s,border-color .2s,opacity .15s}
.cvp-ra:active,.cvp-la:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){.cq *,.cq{animation:none!important;transition:none!important}}

/* ───────── site background: white ───────── */
:root{--paper:#fff}
body.h2,body.mo,body.cvp{background:#fff}
.h2-top{background:rgba(255,255,255,.92)}
/* ALTA keeps its own warm paper (its illustrations and film frames are drawn on it) */

/* ───────── orientation and calm motion ───────── */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.cvp-role,.cvp-sec,.cvp-ix,[id^="cvp-"]{scroll-margin-top:84px}
/* the line or role the panel is talking about stays marked on the page */
.cvp-pt{transition:background .3s}
.cvp-pt.cq-src{background:linear-gradient(90deg,rgba(212,255,63,.28),rgba(212,255,63,0) 85%)}
.cvp-pt.cq-src p::before{background:#17171C;width:12px;transition:width .3s}
.cvp-role.cq-src .cvp-org{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:#D4FF3F}
/* desktop panel: the same gentle slide in and out */
.cq{transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .25s}
/* mobile sheet: slides all the way up from the bottom, and back down */
@media(max-width:900px){
  .cq{transform:translateY(100%);opacity:1;transition:transform .34s cubic-bezier(.2,.8,.2,1)}
  .cq.on{transform:none}
  .cq.on .cq-top,.cq.on .cq-body,.cq.on .cq-foot{animation:none}
}
@media (prefers-reduced-motion:reduce){.cq,.cvp-pt{transition:none}}
.cq-dots i{border-radius:50%!important}

/* ───────── Ask, made visible: neon marker + bolder type ───────── */
/* role-level Ask: a neon marker under bold mono text, fills on hover */
.cvp-ra{color:#17171C!important;font-weight:500;border-bottom:0!important;padding:4px 6px!important;margin-left:-6px;background:linear-gradient(#D4FF3F,#D4FF3F) 0 85%/100% 45% no-repeat;transition:background-size .25s cubic-bezier(.2,.7,.2,1),color .2s}
.cvp-ra:hover,.cvp-ra:focus-visible,.cvp-ra[aria-expanded="true"]{background-size:100% 100%}
.cvp-acts{align-items:center}
/* line-level Ask: a small neon chip when revealed */
.cvp-la{color:#17171C!important;font-weight:500}
@media(hover:hover) and (min-width:901px){
  .cvp-la{padding:3px 7px!important;background:#D4FF3F;transition:opacity .15s,transform .2s}
  .cvp-la:hover{transform:translate(1px,-1px)}
}
/* touch: the ↗ marker sits on a neon dot so it reads as tappable */
@media(hover:none),(max-width:900px){
  .cvp-la{color:#17171C!important;font-size:14px!important}
  .cvp-la span[aria-hidden]{display:grid;place-items:center;width:26px;height:26px;border-radius:50%!important;background:#D4FF3F}
}
/* nav Ask and the panel's Ask button */
.h2-nav a[href$="#ask"]{color:#17171C;font-weight:500;box-shadow:inset 0 -5px 0 #D4FF3F}
.cq-f button{background:#D4FF3F;padding:8px 12px!important;font-weight:500}
.cq-f button:hover{transform:none;background:#C6F21F}
/* the invitation line under Experience gets the same accent */
.cvp-inv{font-weight:500}
.h2 .h2-nav>a[href$="#ask"]{color:#17171C;font-weight:500;padding:3px 6px;margin:-3px -6px;background:linear-gradient(#D4FF3F,#D4FF3F) 0 85%/100% 45% no-repeat;transition:background-size .25s}
.h2 .h2-nav>a[href$="#ask"]:hover{background-size:100% 100%}
/* role logos: official files, in ink, above the dates */
.cvp-logo{display:block;margin:0 0 18px;filter:brightness(0);opacity:.88}
.cvp-logo-monto{height:20px;width:auto}
.cvp-logo-alta{height:30px;width:auto}
@media(max-width:900px){.cvp-logo{margin-bottom:12px}.cvp-logo-monto{height:17px}.cvp-logo-alta{height:26px}}
/* no frame around the input, no vertical line beside topics */
.cq-f input:focus,.cq-f input:focus-visible{outline:none!important;box-shadow:none!important}
.cq-f:focus-within{box-shadow:0 1px 0 0 #17171C}
.cq-t::before{display:none!important}
.cq-t:hover{padding-left:0}
.h2 .wk,.h2 .wk-v,.h2 .wk-v .wk-if,.wk-v,.pk{background:#fff}
/* header: one contact icon; the contact area at the end of the page */
.h2-icons{grid-template-columns:auto!important}
.h2-contact{background:#D4FF3F;border-color:#D4FF3F!important;color:#17171C}
.h2-contact:hover{background:#17171C;color:#fff;border-color:#17171C!important}
.h2-foot{padding:72px 0 64px;scroll-margin-top:60px}
.h2-ck{grid-column:1/-1;margin-bottom:10px}
.h2-ch{grid-column:1/-1;margin:0 0 28px;font:300 clamp(34px,4vw,56px)/1.05 'Hanken Grotesk',sans-serif;letter-spacing:-.03em;color:#17171C}
/* the contact icon looks the same on every page, with or without .h2 on the body */
.h2-top .h2-icons{display:grid;grid-template-columns:auto!important;gap:0}
.h2-top .h2-ic.h2-contact{display:grid;place-items:center;width:30px;height:30px;border:1px solid #D4FF3F;background:#D4FF3F;color:#17171C;transition:background .2s,color .2s,border-color .2s}
.h2-top .h2-ic.h2-contact svg{width:15px;height:15px}
.h2-top .h2-ic.h2-contact:hover,.h2-top .h2-ic.h2-contact:focus-visible{background:#17171C;border-color:#17171C;color:#fff}
@media(max-width:900px){.h2-top .h2-ic.h2-contact{width:34px;height:34px}.h2-top .h2-ic.h2-contact svg{width:17px;height:17px}}

/* ───────── the drink scene: no stray line, a calmer drawing, a lighter button ───────── */
.h2 .hint{background:none}
.cof .ink{stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.cof .hs{stroke:rgba(23,23,28,.26);stroke-width:.8;stroke-linecap:round}
.h2-talk a.h2-next{border:0;background:linear-gradient(#D4FF3F,#D4FF3F) 0 88%/100% 42% no-repeat;color:#17171C;padding:6px 8px;margin-left:-8px;font-weight:500;transition:background-size .25s cubic-bezier(.2,.7,.2,1),opacity .3s}
.h2-talk a.h2-next:hover,.h2-talk a.h2-next:focus-visible{background-size:100% 100%}

/* ───────── career index: years · company · role and context; every row goes to its role ───────── */
.ix2{border-top:1px solid #E6E3DB}
.ix2 .ix-a{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:baseline;padding:22px 0 20px;border-bottom:1px solid #E6E3DB;color:#17171C;text-decoration:none;transition:background .2s}
.ix2 .ix-y{grid-column:1/span 2;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#5B5B63;white-space:nowrap}
.ix2 .ix-o{grid-column:3/span 3;font:300 clamp(26px,2.3vw,34px)/1.05 'Hanken Grotesk';letter-spacing:-.025em;color:#17171C}
.ix2 .ix-rc{grid-column:6/span 6;display:flex;flex-direction:column;gap:4px}
.ix2 .ix-r{font:400 17px/1.35 'Hanken Grotesk';color:#17171C}
.ix2 .ix-c{font:300 14.5px/1.45 'Hanken Grotesk';color:#5B5B63}
.ix2 .ix-go{grid-column:12;justify-self:end;align-self:center;font-size:14px;color:#B9B7B0;transition:transform .25s cubic-bezier(.2,.7,.2,1),color .2s}
.ix2 .ix-a:hover .ix-o,.ix2 .ix-a:focus-visible .ix-o{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.ix2 .ix-a:hover .ix-go,.ix2 .ix-a:focus-visible .ix-go{color:#17171C;transform:translateY(3px)}
.ix2 .ix-a:focus-visible{outline:2px solid #8DB80A;outline-offset:4px}
@media(max-width:1100px){.ix2 .ix-y{grid-column:1/span 2}.ix2 .ix-o{grid-column:3/span 4}.ix2 .ix-rc{grid-column:7/span 5}}
@media(max-width:900px){
  .ix2 .ix-a{grid-template-columns:1fr auto;row-gap:6px;padding:20px 0 18px}
  .ix2 .ix-y{grid-column:1;grid-row:1}
  .ix2 .ix-o{grid-column:1;grid-row:2;font-size:28px}
  .ix2 .ix-rc{grid-column:1/-1;grid-row:3;gap:3px}
  .ix2 .ix-r{font-size:16px}.ix2 .ix-c{font-size:14px}
  .ix2 .ix-go{grid-column:2;grid-row:2}
}

/* ───────── real cookies in the consent banner, served with a small pop ───────── */
.cookie{grid-template-columns:68px 1fr!important}
.ck-img{width:68px;height:68px;object-fit:cover;mix-blend-mode:multiply;transform-origin:50% 80%}
.cookie.on .ck-img{animation:ckServe .7s cubic-bezier(.2,1.4,.4,1) .15s both}
@keyframes ckServe{0%{opacity:0;transform:translateY(10px) scale(.7) rotate(-14deg)}60%{opacity:1;transform:translateY(-3px) scale(1.06) rotate(4deg)}100%{transform:none}}
.cookie:hover .ck-img{transform:rotate(-6deg) scale(1.04);transition:transform .3s cubic-bezier(.2,.7,.2,1)}

/* ───────── drinks: a small true thing about Marina, on hover, focus or tap ───────── */
.opt{position:relative}
.opt-fact{position:absolute;left:16px;right:16px;bottom:14px;display:block;padding:12px 14px;background:#fff;border:1px solid #17171C;font:300 14px/1.45 'Hanken Grotesk',sans-serif;color:#17171C;text-align:start;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .3s cubic-bezier(.2,.7,.2,1);pointer-events:none;z-index:2}
.opt-fact .mono{display:block;margin-bottom:5px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#5B5B63}
@media(hover:hover){.opt:hover .opt-fact,.opt:focus-visible .opt-fact{opacity:1;transform:none}}
@media(hover:none){.opt-fact{position:static;opacity:1;transform:none;margin:0 14px 14px;padding:0;border:0;font-size:13px;color:#5B5B63}.opt-fact .mono{display:inline;margin:0 6px 0 0}}
@media (prefers-reduced-motion:reduce){.opt-fact,.cookie.on .ck-img{transition:none;animation:none}}

/* ───────── the hero title's note ───────── */
.h2-h{cursor:help;outline:none}
.h2-h:focus-visible{outline:2px solid #8DB80A;outline-offset:8px}
.h2-note{position:fixed;left:0;top:0;z-index:70;width:280px;padding:14px 16px 12px;background:#fff;border:1px solid #17171C;box-shadow:0 18px 40px -24px rgba(23,23,28,.45);pointer-events:none;opacity:0;scale:.96;transition:opacity .18s,scale .25s cubic-bezier(.2,1.3,.4,1)}
.h2-note.on{opacity:1;scale:1}
.h2-note .mono{display:inline-block;margin-bottom:8px;padding:2px 6px;background:#D4FF3F;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#17171C}
.h2-note p{margin:0;font:300 15px/1.45 'Hanken Grotesk',sans-serif;color:#17171C}
.h2-note p+p{margin-top:6px;font-weight:400}
@media (prefers-reduced-motion:reduce){.h2-note{transition:none}}
/* the opening: two ways in; anchors land below the top bar */
.h2-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 28px}
.h2-btn2{color:#5B5B63!important;border-bottom-color:#DCD9D0!important}
.h2-btn2:hover{color:#17171C!important;border-bottom-color:#17171C!important}
#work,#cv,#contact,#top{scroll-margin-top:56px}
/* illustrated cookies */
.ck-img{display:block;width:68px;height:auto;mix-blend-mode:normal}
.ck-img .ck-ill{display:block;width:100%;height:auto;overflow:visible}
/* career index: the context line sits under the role, in sentence case */
.ix2 .ix-c{display:block!important;grid-column:auto!important;text-align:start!important;text-transform:none!important;letter-spacing:0!important;font-family:'Hanken Grotesk',sans-serif!important;font-size:14.5px;color:#5B5B63}
/* a closer, deliberate step from the CV into the case studies */
body.h2 #cv .cvp-sec.cvp-last{padding-bottom:24px}
body.h2 #cv{padding-bottom:40px}
body.h2 .h2-work{padding-top:48px}
/* the clichés, for one second: dots and a lava lamp behind the title, then switched off */
.h2-hero{position:relative;overflow:hidden}
.h2-hero>.grid{position:relative;z-index:1}
.h2-h:focus,.h2-h:focus-visible{outline:none}
.h2-cliche{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .35s ease}
.h2-cliche .dots{position:absolute;inset:-20px;background:radial-gradient(circle,#17171C 1.2px,transparent 1.6px) 0 0/22px 22px;opacity:.22;transform:scale(1.04);transition:transform 1.1s ease}
.h2-cliche .blob{position:absolute;border-radius:50%!important;filter:blur(38px);opacity:.85;mix-blend-mode:multiply}
.h2-cliche .b1{width:340px;height:340px;left:22%;top:18%;background:#D4FF3F}
.h2-cliche .b2{width:300px;height:300px;left:48%;top:30%;background:#FF7AC6}
.h2-cliche .b3{width:260px;height:260px;left:36%;top:46%;background:#8A7CFF}
.h2-hero.cliche .h2-cliche{opacity:1}
.h2-hero.cliche .dots{transform:scale(1)}
.h2-hero.cliche .b1{animation:lava1 1.2s ease-in-out both}
.h2-hero.cliche .b2{animation:lava2 1.2s ease-in-out both}
.h2-hero.cliche .b3{animation:lava3 1.2s ease-in-out both}
@keyframes lava1{0%{transform:translate(-40px,30px) scale(.6)}100%{transform:translate(30px,-20px) scale(1.15)}}
@keyframes lava2{0%{transform:translate(50px,-30px) scale(.7)}100%{transform:translate(-30px,25px) scale(1.2)}}
@keyframes lava3{0%{transform:translate(0,50px) scale(.5)}100%{transform:translate(20px,-35px) scale(1.25)}}
/* switched off: a quick, flat cut, like someone pulled the plug */
.h2-hero.cliche-off .h2-cliche{opacity:0;transition:opacity .12s steps(2)}
/* the note's little box of clichés: a dotted field and a lava lamp, only inside the popup */
.h2-cliche{display:none!important}
.h2-hero{overflow:visible}
.h2-note{width:300px;padding:0 0 14px;overflow:hidden}
.h2-note .mono,.h2-note p{margin-left:16px;margin-right:16px}
.h2-note .mono{margin-top:12px}
.nv{position:relative;height:118px;overflow:hidden;border-bottom:1px solid #17171C;background:#fff}
.nv .dots{position:absolute;inset:0;background:radial-gradient(circle,#17171C 1px,transparent 1.4px) 0 0/12px 12px;opacity:.28;animation:nvDots 6s linear infinite}
@keyframes nvDots{to{background-position:12px 12px}}
.nv .lamp{position:absolute;inset:0;filter:blur(10px) contrast(18);background:#fff;mix-blend-mode:multiply}
.nv .blob{position:absolute;display:block;border-radius:50%!important;background:#17171C}
.nv .b1{width:54px;height:54px;left:22%;top:70%;animation:lv1 4.2s ease-in-out infinite}
.nv .b2{width:40px;height:40px;left:46%;top:76%;animation:lv2 5.1s ease-in-out infinite}
.nv .b3{width:34px;height:34px;left:62%;top:-20%;animation:lv3 4.6s ease-in-out infinite}
.nv .b4{width:70px;height:26px;left:-4%;top:96%;border-radius:40%!important;width:110%;animation:none}
@keyframes lv1{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-70px) scale(.8,1.15)}}
@keyframes lv2{0%,100%{transform:translateY(0)}50%{transform:translateY(-84px) scale(1.15,.9)}}
@keyframes lv3{0%,100%{transform:translateY(0)}50%{transform:translateY(96px) scale(.9,1.2)}}
.nv::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#D4FF3F 0%,#FF7AC6 55%,#8A7CFF 100%);mix-blend-mode:screen;pointer-events:none}
@media (prefers-reduced-motion:reduce){.nv .dots,.nv .blob{animation:none}}
.ck-img{width:84px!important;align-self:center}
/* inside a case study: a clear way back to all the work */
.h2-left{display:flex;align-items:baseline;gap:22px;grid-column:1/span 6;min-width:0}
.h2-back{display:inline-flex;gap:6px;padding:3px 0;border-bottom:1px solid #DCD9D0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#17171C;text-decoration:none;transition:border-color .2s}
.h2-back:hover,.h2-back:focus-visible{border-bottom-color:#17171C}
.h2-back span{display:inline-block;transition:transform .2s}.h2-back:hover span{transform:translateX(-3px)}
@media(max-width:900px){.h2-left{grid-column:1/span 8;gap:14px}.h2-left:has(.h2-back) .h2-me{display:none}.h2-back{font-size:11px}}
/* mobile top bar: always one clean row, on every page */
@media(max-width:900px){
  .h2-top .grid{display:flex!important;justify-content:space-between;align-items:center;gap:12px}
  .h2-top .h2-left{flex:0 1 auto}
  .h2-top .h2-nav{display:flex;align-items:center;gap:14px;flex:none}
  .h2-top .h2-nav>a:not([href$="#ask"]){display:none}
  .h2-top .h2-sep{display:none}
}
@media(max-width:900px){.h2-top .h2-nav>a[href$="#ask"]{display:inline!important}}
.h2-top .h2-nav>a[href$="#ask"]{color:#17171C;font-weight:500;padding:3px 6px;margin:-3px -6px;background:linear-gradient(#D4FF3F,#D4FF3F) 0 85%/100% 45% no-repeat}

/* the scene's cookie cue: handwritten, like ALTA's "Start here" */
.ck-cue text{font:italic 400 15px 'Hanken Grotesk',sans-serif;fill:#17171C}
.ck-cue path{fill:none;stroke:#17171C;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ck-prop{cursor:pointer}
.ck-prop .ck-cue{opacity:0;transition:opacity .5s .5s}
.ck-prop[opacity="1"] .ck-cue{opacity:1}
.ck-prop:hover .ck-cue path:last-child,.ck-prop:focus-visible .ck-cue path:last-child{transform:translateY(2px)}

/* the cookie banner, on a clear grid: cookie top-left, text and buttons in one column */
.cookie{grid-template-columns:52px 1fr!important;column-gap:16px!important;row-gap:0;align-items:start!important;padding:18px 20px 18px 18px!important;width:min(380px,calc(100vw - 32px))!important;background:#fff!important;border:1px solid #17171C!important;box-shadow:0 18px 40px -26px rgba(23,23,28,.45)}
.cookie .ck-img{width:52px!important;grid-row:1/3;align-self:start;margin-top:2px}
.ck-top{display:block;width:52px;height:52px;overflow:visible}
.cookie .ck-k{font:400 10px/1.4 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#5B5B63;margin-bottom:6px}
.cookie b{font:400 18px/1.3 'Hanken Grotesk',sans-serif!important;letter-spacing:-.01em;color:#17171C;margin-bottom:8px}
.cookie p{font:300 14px/1.55 'Hanken Grotesk',sans-serif!important;color:#3A3A42!important;margin-bottom:14px}
.cookie .ck-b{gap:8px}
.cookie .ck-yes{background:#17171C;color:#fff;border:1px solid #17171C;font:400 13px 'Hanken Grotesk',sans-serif;padding:8px 16px}
.cookie .ck-no{background:#fff;color:#17171C;border:1px solid #DCD9D0;font:400 13px 'Hanken Grotesk',sans-serif;padding:8px 14px}
.cookie .ck-no:hover{border-color:#17171C}
.cookie.on .ck-img{animation:ckServe .7s cubic-bezier(.2,1.4,.4,1) .15s both}

/* Monto card: a deck of real screens */
.mx-deck{position:absolute;inset:0;overflow:hidden;background:#fff}
.mx-card{position:absolute;left:9%;top:20%;width:78%;margin:0;border:1px solid #CFCBC1;background:#fff;box-shadow:0 24px 48px -30px rgba(23,23,28,.4);transition:transform .9s cubic-bezier(.2,.75,.2,1),opacity .9s ease,filter .9s;transform-origin:50% 0}
.mx-card figcaption{display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-bottom:1px solid #E6E3DB;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#5B5B63;background:#fff}
.mx-card figcaption i{width:6px;height:6px;border-radius:50%!important;background:#E6E3DB}
.mx-card figcaption span{margin-left:8px}
.mx-shot{position:relative;aspect-ratio:16/9;overflow:hidden}
.mx-shot img{display:block;width:100%;height:auto;transform:translateY(0)}
.mx-card.front .mx-shot img{animation:mxPan 3.2s ease-in-out both}
@keyframes mxPan{0%,15%{transform:translateY(0)}100%{transform:translateY(-9%)}}
.mx-card[data-pos="0"]{transform:none;opacity:1;z-index:4}
.mx-card[data-pos="1"]{transform:translate(5%,-9%) scale(.93);opacity:.85;z-index:3;filter:saturate(.7)}
.mx-card[data-pos="2"]{transform:translate(10%,-17%) scale(.86);opacity:.55;z-index:2;filter:saturate(.5)}
.mx-card[data-pos="3"]{transform:translate(15%,-24%) scale(.8);opacity:0;z-index:1}
.mx-card[data-pos="x"]{transform:translate(-6%,12%) scale(1.02);opacity:0;z-index:5}
.mx-note{position:absolute;left:9%;bottom:6%;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#8A8A90}
@media (prefers-reduced-motion:reduce){.mx-card,.mx-card.front .mx-shot img{transition:none;animation:none}}
.mx-card{left:6%;top:22%;width:84%}.mx-note{left:6%}
/* drink fact: no box. On hover the fact quietly takes the place of the drink name */
.opt-fact{left:16px;right:16px;bottom:16px;padding:0;background:transparent;border:0;font:300 15px/1.45 'Hanken Grotesk',sans-serif;color:#17171C}
@media(hover:hover){.opt:hover .nm,.opt:focus-visible .nm{opacity:0;transition:opacity .2s}.opt .nm{transition:opacity .2s}}
.ck-cue text{font-size:12px!important}

/* work cards: small logos in the card bar */
.wk-top>span:first-child{display:inline-flex;align-items:center}
.wk-logo{display:inline-block;width:auto;filter:brightness(0);opacity:.85;margin-right:8px}
.wk-logo-monto{height:13px;margin-right:0}
.wk-logo-monto+.wk-nm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wk-logo-alta{height:16px}
/* two projects in progress, stacked in one cell */
.wk-stack{display:grid;grid-template-rows:1fr 1fr;gap:var(--gut);min-width:0}
.h2 .wk-stack .wk{height:100%;border-style:dashed;background:#fff}
.h2 .wk-stack .wk .wk-t{margin-top:auto}
.h2 .wk-stack .wk-top>span:last-child{display:inline-flex;align-items:center;gap:7px;color:#17171C}
.h2 .wk-stack .wk-top>span:last-child::before{content:"";width:7px;height:7px;border-radius:50%!important;background:#D4FF3F;outline:1px solid #17171C;animation:wkPulse 2.2s ease-in-out infinite}
@keyframes wkPulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.h2 .wk-stack .wk-top>span:last-child::before{animation:none}}
@media(max-width:700px){.wk-stack{grid-template-rows:auto auto}}
@media(hover:hover){.opt:hover .nm,.opt:focus-visible .nm{opacity:1!important}}
/* the two in-progress projects: their own row, side by side, compact */
.h2 .wk-grid>.wk.wk-tbd{border-style:dashed;background:#fff;min-height:220px}
.h2 .wk-grid>.wk.wk-tbd .wk-top>span:last-child{display:inline-flex;align-items:center;gap:7px;color:#17171C}
.h2 .wk-grid>.wk.wk-tbd .wk-top>span:last-child::before{content:"";width:7px;height:7px;border-radius:50%!important;background:#D4FF3F;outline:1px solid #17171C;animation:wkPulse 2.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.h2 .wk-grid>.wk.wk-tbd .wk-top>span:last-child::before{animation:none}}
.cvp-orglogo{display:block;height:28px;width:auto;filter:grayscale(1) brightness(.2);opacity:.9}
/* the College of Management logo: its own colours kept (the black block carries the name), sized to sit quietly in the row */
.cvp-orglogo{filter:none!important;opacity:1!important;height:46px!important;mix-blend-mode:multiply}
.cvp-orglogo{height:76px!important;margin:-6px 0 -8px}@media(max-width:900px){.cvp-orglogo{height:64px!important;margin:4px 0 8px}}
.cvp-rows li:has(.cvp-orglogo){align-items:center}

/* fewer lines: one rule per section; rows separated by space, not hairlines */
.cvp-ix .cvp-k{margin-bottom:6px}
.ix2{border-top:0}
.ix2 .ix-a{border-bottom:0;padding:18px 0}
.ix2 li+li .ix-a{border-top:0}
/* tools and education: one shared rule instead of two */
.cvp-last .cvp-k{border-top:0!important;padding-top:0}
.cvp-last>.grid{border-top:1px solid #17171C;padding-top:16px}
/* the tools/education rule stays inside the page margins */
.cvp-last>.grid{border-top:0;padding-top:0}
.cvp-last>.grid::before{content:"";grid-column:1/-1;border-top:1px solid #17171C;margin-bottom:16px}
/* earlier and lecturer: rows separated by space, not lines */
.cvp-rows li{border-bottom:0!important;padding:10px 0!important}

/* in-progress cards: no names yet, just a quiet pulse — something being made */
.wk-pulse{flex:1;display:flex;align-items:center;padding:24px 22px 28px;min-height:140px}
.wk-pulse svg{width:100%;height:96px;overflow:visible}
.wk-pulse path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.wk-pulse .pl-base{stroke:#E6E3DB;stroke-width:1}
.wk-pulse .pl-run{stroke:#17171C;stroke-width:1.25;stroke-dasharray:180 1000;stroke-dashoffset:180;animation:plRun 3.6s cubic-bezier(.45,0,.25,1) infinite}
.wk-tbd+.wk-tbd .pl-run{animation-delay:-1.5s;animation-duration:4.2s}
@keyframes plRun{0%{stroke-dashoffset:180;opacity:0}8%{opacity:1}85%{opacity:1}100%{stroke-dashoffset:-1000;opacity:0}}
@media (prefers-reduced-motion:reduce){.wk-pulse .pl-run{animation:none;stroke-dasharray:none;stroke-dashoffset:0}}

/* ONE CASING RULE: sentence case everywhere, no all-caps. Labels are told apart by size, mono and grey, not by capitals. */
.h2 *,.cvp *,.h2-top *,.cq *,.cookie *{text-transform:none!important}
.h2 .mono,.cvp .mono,.h2-top .mono,.cq .mono,.cookie .mono,
.h2-me,.h2-nav,.h2-role,.h2-btn,.h2-k,.wk-n,.wk-go,.wk-top,.h2-box .anote,.h2-more,.h2-back,.h2-note .mono,
.cvp-k,.cvp-meta,.cvp-la,.cvp-ra,.cvp-ans-h,.cvp-when,.cvp-cs,.cvp-inv,
.ix-w,.ix-c,.ix-f .mono,.ix2 .ix-y,
.cq-ctx,.cq-x,.cq-q,.cq-k,.cq-f button,.cq-mt,.cq-from,.cookie .ck-k{letter-spacing:.01em!important;font-size:12px}
.h2-me{font-size:13px}

/* four drinks (coffee · water · juice · milk): three columns each on the 12-column grid, two by two on mobile */
@media(min-width:901px){#opts .opt{grid-column:span 3}}
@media(max-width:900px){.h2 .opts{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:10px}.h2 .opts .opt{grid-column:span 1;height:228px}}