/* =========================================================
   Visual-first layer for Home, Work, Leadership, Experience,
   About and Contact. Same primitives as the case studies:
   chapter head, stage, tab sequence, count-up.
   A stage plays when it scrolls into view (.on) and pauses
   when it leaves. Reduced motion shows the final state.
   ========================================================= */
body{--tint:rgba(31,79,209,.16);--tint-2:rgba(31,79,209,.08);}

/* ---------- hero ---------- */
.v-hero h1{max-width:16ch;}
.v-hero.wide h1{max-width:19ch;}
.v-hero .lede{max-width:56ch;}
.meta-line{font-family:var(--mono);font-size:12px;color:var(--ink-faint);letter-spacing:.04em;margin-top:26px;line-height:1.7;}
.hero-visual{border-top:none;padding-top:10px;}

/* ---------- chapter ---------- */
.ch{display:grid;gap:26px;}
.ch-eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.ch-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,4vw,40px);line-height:1.08;letter-spacing:-.015em;max-width:22ch;}
.ch-head p{font-size:18px;color:var(--ink-soft);line-height:1.6;max-width:60ch;margin-top:14px;}
.ch-head p strong{color:var(--ink);font-weight:600;}
.ch-head p a{color:var(--accent);}

/* ---------- stage ---------- */
.stage{position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,4.5vw,52px);overflow:hidden;}
.stage:not(.on), .stage:not(.on) *, .play:not(.on), .play:not(.on) *{animation-play-state:paused !important;}
.cap{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--ink-faint);margin-top:18px;}
.big{font-family:var(--serif);font-weight:600;font-size:clamp(56px,8vw,88px);line-height:.95;color:var(--accent-deep);letter-spacing:-.02em;}
.replay{all:unset;cursor:pointer;font-family:var(--mono);font-size:11px;color:var(--accent);margin-top:10px;display:inline-block;}
.replay:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px;}

.facts-strip{display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:34px;}
.facts-strip > div{background:var(--paper);padding:16px 18px;}
.facts-strip .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px;}
.facts-strip .v{font-size:14px;font-weight:500;color:var(--ink);line-height:1.35;}
@media(max-width:900px){.facts-strip{grid-template-columns:1fr 1fr;}.facts-strip > div:last-child:nth-child(odd){grid-column:1/-1;}}

/* ---------- wireframe kit ---------- */
.win{container-type:inline-size;position:relative;background:var(--paper);border:1.5px solid var(--ink);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 28px 50px -34px rgba(26,25,22,.55);}
.win > .bar{flex:0 0 auto;height:3.2cqw;min-height:8px;background:var(--ink);display:flex;align-items:center;gap:.9cqw;padding:0 1.6cqw;}
.win > .bar i{width:1cqw;height:1cqw;min-width:3px;min-height:3px;border-radius:50%;background:var(--paper);opacity:.55;}
.win > .b{position:relative;flex:1;display:flex;min-height:0;overflow:hidden;}
.ln{display:block;height:1.15cqw;min-height:2px;border-radius:1cqw;background:var(--line);margin:0 0 1.25cqw;}
.ln.d{background:var(--ink-faint);} .ln.k{background:var(--ink);} .ln.a{background:var(--accent);}

/* ---------- tab sequence (hero) ---------- */
.morph{position:relative;}
.canvas{container-type:inline-size;position:relative;max-width:980px;margin:0 auto;aspect-ratio:16/8.4;background:var(--paper);border:1.5px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:0 28px 50px -34px rgba(26,25,22,.55);}
.morph .state{position:absolute;inset:0;opacity:0;transform:scale(.985);transition:opacity .6s ease,transform .6s ease;pointer-events:none;}
.morph .state.cur{opacity:1;transform:none;pointer-events:auto;}
.tabs{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:10px;max-width:980px;margin:22px auto 0;}
.tab{all:unset;cursor:pointer;position:relative;padding:12px 14px 14px;border-radius:10px;border:1px solid var(--line);background:var(--paper);overflow:hidden;}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.tab .t1{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.tab .t2{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-top:3px;}
.tab .t3{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:2px;line-height:1.35;}
.tab.mine .t3{color:var(--accent);font-weight:500;}
.tab.cur{border-color:var(--ink);}
.tab.cur .t1{color:var(--accent);}
.tab .prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent);}
.tab.cur .prog{animation:v-prog var(--dur,4.2s) linear forwards;}
.morph.paused .tab.cur .prog{animation:none;width:100%;opacity:.35;}
@keyframes v-prog{to{width:100%}}
@media(max-width:700px){.tabs{grid-template-columns:1fr 1fr;}.tabs .tab:last-child:nth-child(odd){grid-column:1/-1;}.tab .t3{display:none;}}

/* =========================================================
   Shared mini visuals
   ========================================================= */

/* 20 button variants become 4 types (.b20) */
.b20{position:relative;width:100%;height:100%;min-height:96px;}
.b20 .pb{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:13px;border-radius:var(--r);background:var(--bg);border:1.5px var(--bs,solid) var(--bd);
  transition:left .7s cubic-bezier(.6,0,.2,1),top .7s cubic-bezier(.6,0,.2,1),width .7s cubic-bezier(.6,0,.2,1),height .7s cubic-bezier(.6,0,.2,1),opacity .45s ease,transform .45s ease,background .5s ease,border-color .5s ease,border-radius .5s ease;
  transition-delay:calc(.45s + var(--i,0) * .025s);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.b20 .pb b{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.02em;opacity:0;transition:opacity .4s ease 1.3s;white-space:nowrap;}
:is(.on,.cur) .b20 .pb{opacity:0;transform:scale(.4);}
:is(.on,.cur) .b20 .pb.k{opacity:1;transform:none;left:var(--ax);top:var(--ay);width:44%;height:24px;border-radius:6px;border-style:solid;}
:is(.on,.cur) .b20 .pb b{opacity:1;}
:is(.on,.cur) .b20 .k1{background:var(--accent);border-color:var(--accent);color:#fff;}
:is(.on,.cur) .b20 .k2{background:var(--paper);border-color:var(--accent);color:var(--accent);}
:is(.on,.cur) .b20 .k3{background:var(--paper-2);border-color:var(--line);color:var(--ink);}
:is(.on,.cur) .b20 .k4{background:transparent;border-color:transparent;color:var(--accent);}
.pf .b20 .pb.k{box-shadow:none;}

/* 10 team tiles light up (.t10) */
.t10{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%;max-width:220px;}
.t10 i{aspect-ratio:1;border-radius:7px;border:1.5px solid var(--line);background:var(--paper);position:relative;transition:background .35s ease,border-color .35s ease;transition-delay:calc(.3s + var(--k,0) * .22s);}
.t10 i::after{content:"";position:absolute;left:28%;right:28%;top:44%;height:12%;border-radius:4px;background:var(--line);transition:background .35s ease;transition-delay:inherit;}
.t10:not(.z) i:first-child{background:var(--tint);border-color:var(--accent);}
.t10:not(.z) i:first-child::after{background:var(--accent);}
:is(.on,.cur) .t10 i{background:var(--tint);border-color:var(--accent);}
:is(.on,.cur) .t10 i::after{background:var(--accent);}

/* load race, bar length = relative load time (.race) */
.race{display:grid;gap:12px;width:100%;}
.race .rr{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:10px;}
.race .rl{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);}
.race .rt{height:12px;border-radius:6px;background:var(--paper-2);position:relative;overflow:hidden;}
.race .rf{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:6px;background:var(--bg,var(--ink-faint));transform-origin:left;transform:scaleX(0);transition:transform var(--d,1s) linear .4s;}
:is(.on,.cur) .race .rf{transform:scaleX(1);}

/* 100 dots, n lit (.d100) */
.d100{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;width:118px;}
.d100 i{aspect-ratio:1;border-radius:50%;background:var(--line);transition:background .35s ease,transform .35s ease;transition-delay:calc(.35s + var(--k,0) * .14s);}
:is(.on,.cur) .d100 i.y{background:var(--accent);transform:scale(1.18);}

/* ticks: rounds before and after (.ticks) */
.ticks{display:grid;gap:10px;width:100%;}
.ticks .tr{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:8px;}
.ticks .tl{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);}
.ticks .tt{display:flex;gap:4px;}
.ticks .tt i{width:9px;height:18px;border-radius:3px;background:var(--line);transform:scaleY(.2);opacity:.4;transition:transform .3s ease,opacity .3s ease,background .3s ease;transition-delay:calc(.3s + var(--k,0) * .12s);}
.ticks .aft i{background:var(--accent);}
:is(.on,.cur) .ticks .tt i{transform:none;opacity:1;}
:is(.on,.cur) .ticks .bef i{background:var(--ink-faint);}

/* vote bars (.vbars) */
.vbars{display:grid;gap:12px;width:100%;}
.vbars .vr{display:grid;grid-template-columns:44px 1fr 34px;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);}
.vbars .vt{height:14px;border-radius:7px;background:var(--paper-2);overflow:hidden;}
.vbars .vf{display:block;height:100%;width:var(--w);border-radius:7px;background:var(--bg,var(--ink-faint));transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.3,0,.2,1) .35s;}
.vbars .vr b{font-weight:500;color:var(--ink);text-align:right;}
:is(.on,.cur) .vbars .vf{transform:scaleX(1);}

/* chat with a source (.aic) */
.aic{display:grid;gap:8px;width:100%;max-width:230px;}
.aic .u{justify-self:end;width:56%;background:var(--tint);border-radius:10px 10px 2px 10px;padding:8px 10px;opacity:0;transform:translateY(6px);transition:opacity .4s ease .3s,transform .4s ease .3s;}
.aic .a{width:84%;background:var(--paper);border:1px solid var(--line);border-radius:10px 10px 10px 2px;padding:9px 10px 7px;opacity:0;transform:translateY(6px);transition:opacity .4s ease .9s,transform .4s ease .9s;}
.aic .ln{height:5px;margin-bottom:5px;transform-origin:left;transform:scaleX(0);transition:transform .5s ease;}
.aic .u .ln{background:var(--accent);opacity:.5;}
.aic .a .ln:nth-child(1){transition-delay:1.2s}.aic .a .ln:nth-child(2){transition-delay:1.45s}.aic .a .ln:nth-child(3){transition-delay:1.7s}
.aic .src{display:inline-block;font-family:var(--mono);font-size:9px;color:var(--accent);border:1px solid var(--accent);border-radius:20px;padding:1px 7px;margin-top:2px;opacity:0;transition:opacity .4s ease 2.1s;}
:is(.on,.cur) .aic .u,:is(.on,.cur) .aic .a{opacity:1;transform:none;}
:is(.on,.cur) .aic .ln{transform:none;}
:is(.on,.cur) .aic .src{opacity:1;}

/* interns along a line (.grow5) */
.grow5{position:relative;width:100%;height:70px;}
.grow5::before{content:"";position:absolute;left:4%;right:4%;top:44px;height:2px;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform 1.4s ease .2s;}
.grow5 .av{position:absolute;left:var(--x);top:28px;width:28px;height:28px;margin-left:-14px;border-radius:50%;border:2px solid var(--accent);background:var(--paper);opacity:0;transform:scale(.6);transition:opacity .35s ease,transform .35s ease;transition-delay:calc(.4s + var(--k,0) * .25s);}
.grow5 .av::before{content:"";position:absolute;left:50%;top:5px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--accent);}
.grow5 .av::after{content:"";position:absolute;left:50%;bottom:4px;width:14px;height:6px;margin-left:-7px;border-radius:7px 7px 2px 2px;background:var(--accent);}
.grow5 .up{position:absolute;left:var(--x);top:0;transform:translate(-50%,4px);font-family:var(--mono);font-size:9px;color:#fff;background:var(--accent);border-radius:4px;padding:2px 6px;white-space:nowrap;opacity:0;transition:opacity .35s ease 2s,transform .35s ease 2s;}
:is(.on,.cur) .grow5::before{transform:none;}
:is(.on,.cur) .grow5 .av{opacity:1;transform:none;}
:is(.on,.cur) .grow5 .up{opacity:1;transform:translate(-50%,0);}

/* small glyphs (.gl) for habit tiles */
.gl{position:relative;width:64px;height:64px;margin-bottom:16px;}
.gl i{position:absolute;display:block;}
/* scattered dots form a grid */
.gl-grid i{width:9px;height:9px;border-radius:50%;background:var(--ink-faint);left:var(--sx);top:var(--sy);transition:left .8s cubic-bezier(.6,0,.2,1),top .8s cubic-bezier(.6,0,.2,1),background .4s ease .7s;transition-delay:calc(.2s + var(--k) * .05s);}
:is(.on,.cur) .gl-grid i{left:var(--gx);top:var(--gy);background:var(--accent);}
/* layers stack into a system */
.gl-stack i{left:6px;width:52px;height:12px;border-radius:4px;border:1.5px solid var(--ink-faint);background:var(--paper);transition:transform .7s cubic-bezier(.6,0,.2,1),border-color .4s ease,background .4s ease;transition-delay:calc(.2s + var(--k) * .15s);}
.gl-stack i:nth-child(1){top:8px;transform:translateX(-10px);}
.gl-stack i:nth-child(2){top:26px;transform:translateX(12px);}
.gl-stack i:nth-child(3){top:44px;transform:translateX(-6px);}
:is(.on,.cur) .gl-stack i{transform:none;border-color:var(--accent);}
:is(.on,.cur) .gl-stack i:nth-child(3){background:var(--accent);}
/* design and code lanes stay in sync */
.gl-lanes i.l{left:4px;right:4px;height:2px;background:var(--line);}
.gl-lanes i.l1{top:18px;}.gl-lanes i.l2{top:44px;}
.gl-lanes i.s{left:30px;top:18px;width:2px;height:28px;background:var(--accent);opacity:.35;}
.gl-lanes i.p{width:10px;height:10px;border-radius:50%;background:var(--accent);top:13px;left:4px;animation:gl-lane 3.6s ease-in-out infinite;}
@keyframes gl-lane{0%{left:0;top:13px}35%{left:26px;top:13px}55%{left:26px;top:39px}100%{left:52px;top:39px}}
/* one dot, then the team around it */
.gl-coach i{width:10px;height:10px;border-radius:50%;background:var(--line);left:var(--x);top:var(--y);transition:background .35s ease,transform .35s ease;transition-delay:calc(.4s + var(--k) * .2s);}
.gl-coach i.c{width:14px;height:14px;background:var(--accent);}
:is(.on,.cur) .gl-coach i{background:var(--accent);transform:scale(1.1);}
/* tangled path becomes a straight one */
.gl-path svg{width:64px;height:64px;overflow:visible;}
.gl-path .tg{fill:none;stroke:var(--ink-faint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .6s ease 1s;}
.gl-path .st{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset 1s ease 1.1s;}
.gl-path .dt{fill:var(--accent);opacity:0;transition:opacity .3s ease 2s;}
:is(.on,.cur) .gl-path .tg{opacity:.25;}
:is(.on,.cur) .gl-path .st{stroke-dashoffset:0;}
:is(.on,.cur) .gl-path .dt{opacity:1;}
/* evidence: bars rise, then a check */
.gl-ev i.b{bottom:8px;width:11px;border-radius:3px 3px 0 0;background:var(--line);height:var(--h);transform-origin:bottom;transform:scaleY(.15);transition:transform .6s ease,background .4s ease;transition-delay:calc(.2s + var(--k) * .18s);}
.gl-ev i.ck{right:2px;top:2px;width:20px;height:20px;border-radius:50%;background:var(--accent);opacity:0;transform:scale(.5);transition:opacity .3s ease 1.1s,transform .3s ease 1.1s;}
.gl-ev i.ck::after{content:"";position:absolute;left:6px;top:4px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
:is(.on,.cur) .gl-ev i.b{transform:none;background:var(--ink-faint);}
:is(.on,.cur) .gl-ev i.b:nth-child(3){background:var(--accent);}
:is(.on,.cur) .gl-ev i.ck{opacity:1;transform:none;}
/* two outcomes rise together */
.gl-two i{bottom:8px;width:20px;border-radius:4px 4px 0 0;height:46px;transform-origin:bottom;transform:scaleY(.2);transition:transform 1s cubic-bezier(.3,0,.2,1) .3s;}
.gl-two i:nth-child(1){left:10px;background:var(--accent);}
.gl-two i:nth-child(2){left:34px;background:var(--ink);}
.gl-two i.base{left:2px;right:2px;bottom:6px;height:2px;width:auto;background:var(--line);transform:none;}
:is(.on,.cur) .gl-two i{transform:none;}

/* habit tiles */
.habits{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.habits > div{background:var(--paper);padding:26px 24px 24px;}
.habits .n{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.08em;margin-bottom:6px;}
.habits h3{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.18;margin-bottom:8px;}
.habits p{font-size:14px;color:var(--ink-soft);line-height:1.5;}
@media(max-width:900px){.habits{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.habits{grid-template-columns:1fr;}}

/* =========================================================
   Home: proof tiles
   ========================================================= */
.proofs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:clamp(14px,2.2vw,24px);}
@media(max-width:900px){.proofs{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){
  .proofs{gap:10px;padding:10px;}
  .pf{padding:14px 12px 14px;}
  .pf .pv{height:96px;margin-bottom:12px;}
  .pf .d100{width:96px;gap:3px;}
  .pf .b20 .pb b{font-size:8px;}
  .pf .t10{gap:5px;}
  .pf .race .rr{grid-template-columns:28px 1fr;gap:6px;}
  .pf .pn{font-size:28px;}
  .pf .pl{font-size:9.5px;}
  .pf .pc{display:none;}
}
.pf{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px 20px 22px;display:flex;flex-direction:column;}
.pf .pv{height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;position:relative;}
.pf .pn{font-family:var(--serif);font-weight:600;font-size:clamp(34px,3.4vw,42px);line-height:1;color:var(--accent-deep);letter-spacing:-.02em;}
.pf .pn .from{color:var(--ink-faint);}
.pf .pl{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint);margin-top:10px;line-height:1.5;}
.pf .pc{font-family:var(--mono);font-size:10px;color:var(--ink-faint);margin-top:auto;padding-top:12px;}

/* =========================================================
   Work cards with a looping thumbnail
   ========================================================= */
.wcards{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media(max-width:760px){.wcards{grid-template-columns:1fr;}}
.wc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--paper);overflow:hidden;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s,box-shadow .2s;}
.wc:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 24px 46px -32px rgba(31,79,209,.36);}
.wc:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.wc .wt{padding:22px 24px 22px;display:flex;flex-direction:column;flex:1;}
.wc .we{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.wc h3{font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.14;margin-bottom:8px;letter-spacing:-.01em;}
.wc p{font-size:15px;color:var(--ink-soft);line-height:1.5;}
.wc .wm{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 18px;padding-top:14px;border-top:1px dotted var(--line);font-family:var(--mono);font-size:11px;color:var(--ink-faint);}
.wc .wm b{color:var(--accent-deep);font-weight:500;}
.wc .cgo{margin-top:auto;font-family:var(--mono);font-size:11.5px;color:var(--accent);letter-spacing:.03em;}

.th{container-type:inline-size;position:relative;aspect-ratio:16/10;background:var(--paper-2);border-bottom:1px solid var(--line);overflow:hidden;}
.th .lab{position:absolute;left:4%;top:5%;font-family:var(--mono);font-size:max(9px,2cqw);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}

/* thumb: UX function, seven people become a team, then link out */
.th-ux .box{position:absolute;left:26%;top:47%;width:38%;height:30%;border:1.5px solid var(--ink);border-radius:2cqw;background:var(--paper);animation:ux-box 9s ease infinite;}
.th-ux .box span{position:absolute;left:4%;top:7%;font-family:var(--mono);font-size:max(8px,1.8cqw);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.th-ux .td{position:absolute;left:var(--gx);top:65%;width:3.2cqw;height:3.2cqw;margin:-1.6cqw 0 0 -1.6cqw;border-radius:50%;background:var(--accent);animation:ux-dot 9s cubic-bezier(.6,0,.2,1) infinite;z-index:2;}
.th-ux .nd{position:absolute;padding:1.4cqw 2cqw;border:1.5px solid var(--ink);border-radius:1.6cqw;background:var(--paper);font-size:max(9px,2.3cqw);font-weight:600;line-height:1.1;text-align:center;}
.th-ux .nd small{display:block;font-family:var(--mono);font-weight:400;font-size:max(7px,1.5cqw);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.6cqw;}
.th-ux .nd-e{left:73%;top:62%;transform:translateY(-50%);animation:ux-ne 9s ease infinite;}
.th-ux .nd-p{left:45%;top:8%;transform:translateX(-50%);animation:ux-np 9s ease infinite;}
.th-ux .lk{position:absolute;background:var(--accent);}
.th-ux .lk-e{left:64%;top:62%;width:9%;height:2px;transform-origin:left;animation:ux-le 9s ease infinite;}
.th-ux .lk-p{left:45%;top:24%;width:2px;height:23%;transform-origin:bottom;animation:ux-lp 9s ease infinite;}
@keyframes ux-dot{0%,10%{left:var(--sx);top:var(--sy)}26%,90%{left:var(--gx);top:65%}100%{left:var(--sx);top:var(--sy)}}
@keyframes ux-box{0%,14%{opacity:0;transform:scale(.94)}24%,90%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes ux-le{0%,34%{transform:scaleX(0)}42%,90%{transform:scaleX(1)}98%,100%{transform:scaleX(0)}}
@keyframes ux-ne{0%,38%{opacity:0}46%,90%{opacity:1}98%,100%{opacity:0}}
@keyframes ux-lp{0%,52%{transform:scaleY(0)}60%,90%{transform:scaleY(1)}98%,100%{transform:scaleY(0)}}
@keyframes ux-np{0%,56%{opacity:0}64%,90%{opacity:1}98%,100%{opacity:0}}

/* thumb: design system, one configurable component */
.th-ds .dd{position:absolute;left:30%;top:52%;transform:translate(-50%,-50%);width:42cqw;height:7.6cqw;display:flex;align-items:center;gap:1.4cqw;padding:0 2cqw;border:1.5px solid var(--accent);border-radius:1.4cqw;background:var(--paper);box-shadow:0 0 0 .9cqw var(--tint-2);animation:ds-dd 9s ease infinite;}
.th-ds .dd .ic{flex:0 0 auto;width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--accent);animation:ds-ic 9s ease infinite;}
.th-ds .dd .ln{flex:1;margin:0;height:1.4cqw;background:var(--ink-faint);}
.th-ds .dd .cv{flex:0 0 auto;width:1.8cqw;height:1.8cqw;border:solid var(--ink);border-width:0 .45cqw .45cqw 0;transform:translateY(-25%) rotate(45deg);}
.th-ds .ddl{position:absolute;left:9%;top:34%;width:12cqw;height:1.2cqw;border-radius:1cqw;background:var(--ink-faint);}
.th-ds .pp{position:absolute;right:5%;top:16%;width:38%;background:var(--paper);border:1px solid var(--line);border-radius:2cqw;padding:2.4cqw 2.6cqw 1.4cqw;}
.th-ds .pp .ph{font-family:var(--mono);font-size:max(8px,1.8cqw);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.6cqw;}
.th-ds .pp .pr{margin-bottom:1.6cqw;}
.th-ds .pp .pk{font-size:max(8px,1.9cqw);font-weight:600;margin-bottom:.8cqw;}
.th-ds .pp .pc{display:flex;flex-wrap:wrap;gap:.8cqw;}
.th-ds .pp .pc span{font-family:var(--mono);font-size:max(7px,1.6cqw);padding:.4cqw 1.2cqw;border-radius:3cqw;border:1px solid var(--line);color:var(--ink-faint);background:var(--paper);}
.th-ds .pp .pc span.lit{background:var(--accent);border-color:var(--accent);color:#fff;}
.th-ds .pp .pc span.ca{animation:ds-a 9s ease infinite;}
.th-ds .pp .pc span.cb{animation:ds-b 9s ease infinite;}
.th-ds .pp .pc span.cc{animation:ds-c 9s ease infinite;}
.th-ds .pp .pc span.cbc{animation:ds-bc 9s ease infinite;}
@keyframes ds-dd{0%,30%{width:36cqw;height:6.4cqw;border-color:var(--ink-faint);box-shadow:none;opacity:1;background:var(--paper)}36%,63%{width:42cqw;height:7.6cqw;border-color:var(--accent);box-shadow:0 0 0 .9cqw var(--tint-2);opacity:1;background:var(--paper)}69%,97%{width:30cqw;height:5.2cqw;border-color:var(--ink-faint);box-shadow:none;opacity:.5;background:var(--paper-2)}100%{width:36cqw;height:6.4cqw;opacity:1;background:var(--paper)}}
@keyframes ds-ic{0%,30%{width:0;opacity:0}36%,97%{width:2.6cqw;opacity:1}100%{width:0;opacity:0}}
@keyframes ds-a{0%,30%{background:var(--accent);border-color:var(--accent);color:#fff}34%,97%{background:var(--paper);border-color:var(--line);color:var(--ink-faint)}100%{background:var(--accent);border-color:var(--accent);color:#fff}}
@keyframes ds-b{0%,32%{background:var(--paper);border-color:var(--line);color:var(--ink-faint)}36%,63%{background:var(--accent);border-color:var(--accent);color:#fff}67%,100%{background:var(--paper);border-color:var(--line);color:var(--ink-faint)}}
@keyframes ds-c{0%,65%{background:var(--paper);border-color:var(--line);color:var(--ink-faint)}69%,97%{background:var(--accent);border-color:var(--accent);color:#fff}100%{background:var(--paper);border-color:var(--line);color:var(--ink-faint)}}
@keyframes ds-bc{0%,32%{background:var(--paper);border-color:var(--line);color:var(--ink-faint)}36%,97%{background:var(--accent);border-color:var(--accent);color:#fff}100%{background:var(--paper);border-color:var(--line);color:var(--ink-faint)}}

/* thumb: client file, old list becomes the new file */
.th-kd .win{position:absolute;left:7%;right:7%;top:13%;bottom:-8%;border-radius:2cqw 2cqw 0 0;}
.th-kd .b > div{position:absolute;inset:0;}
.th-kd .kold{padding:3cqw 4cqw;overflow:hidden;animation:kd-old 10s ease infinite;opacity:0;}
.th-kd .kold .scr{animation:kd-scr 10s linear infinite;}
.th-kd .kold .row{display:flex;gap:2cqw;margin-bottom:.6cqw;}
.th-kd .kold .row .ln{height:1.3cqw;margin-bottom:.8cqw;}
.th-kd .knew{display:flex;flex-direction:column;animation:kd-new 10s ease infinite;}
.th-kd .knew .hd{display:flex;align-items:center;gap:2cqw;padding:2.4cqw 4cqw;border-bottom:1px solid var(--line);background:var(--paper);}
.th-kd .knew .hd .av{width:5cqw;height:5cqw;border-radius:50%;background:var(--tint);border:1.5px solid var(--accent);flex:0 0 auto;}
.th-kd .knew .hd .ttl{flex:1;}
.th-kd .knew .hd .ttl .ln{margin-bottom:.9cqw;}
.th-kd .knew .tb{display:flex;gap:1.2cqw;padding:1.4cqw 4cqw 0;}
.th-kd .knew .tb i{display:block;height:3.4cqw;width:11cqw;border-radius:1cqw 1cqw 0 0;background:var(--paper-2);}
.th-kd .knew .tb i.a{background:var(--tint);box-shadow:inset 0 -.5cqw 0 var(--accent);}
.th-kd .knew .bd{display:flex;flex:1;gap:3cqw;padding:2.4cqw 4cqw;}
.th-kd .knew .mn{width:20%;}
.th-kd .knew .mn i{display:block;height:3.2cqw;border-radius:.8cqw;margin-bottom:1cqw;background:var(--paper-2);}
.th-kd .knew .mn i.a{background:var(--tint);}
.th-kd .knew .ls{flex:1;}
.th-kd .knew .yr{font-family:var(--mono);font-size:max(7px,1.6cqw);color:var(--accent);margin:0 0 1cqw;letter-spacing:.06em;}
.th-kd .knew .it{display:flex;gap:2cqw;padding:1cqw 0;border-bottom:1px solid var(--line);}
.th-kd .knew .it .ln{margin:0;}
.th-kd .st{position:absolute;left:7%;top:4%;font-family:var(--mono);font-size:max(8px,1.8cqw);letter-spacing:.1em;text-transform:uppercase;}
.th-kd .st.o{color:var(--ink-faint);animation:kd-old 10s ease infinite;opacity:0;}
.th-kd .st.n{color:var(--accent);animation:kd-new 10s ease infinite;}
@keyframes kd-old{0%,40%{opacity:1}46%,94%{opacity:0}100%{opacity:1}}
@keyframes kd-new{0%,40%{opacity:0}46%,94%{opacity:1}100%{opacity:0}}
@keyframes kd-scr{0%{transform:translateY(0)}45%,100%{transform:translateY(-45%)}}

/* thumb: road-trip planner, a real screen pans */
.th-er .win{position:absolute;left:7%;right:7%;top:9%;bottom:-8%;border-radius:2cqw 2cqw 0 0;}
.th-er img{position:absolute;left:0;top:0;width:100%;height:auto;animation:er-pan 18s ease-in-out infinite alternate;}
@keyframes er-pan{0%,10%{transform:translateY(0)}90%,100%{transform:translateY(-36%)}}

/* thumb: AI assistant, three 3s states on a 9s loop: the law, your clients, your day.
   Base styles show state 3 (reduced motion), states 1 and 2 start hidden. */
.th-tex .win{position:absolute;left:7%;right:7%;top:13%;bottom:-8%;border-radius:2cqw 2cqw 0 0;}
.th-tex .st{position:absolute;left:7%;top:4%;font-family:var(--mono);font-size:max(8px,1.8cqw);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);opacity:0;}
.th-tex .st.l1{animation:tx-law 9s ease infinite;}
.th-tex .st.l2{animation:tx-clients 9s ease infinite;}
.th-tex .st.l3{opacity:1;animation:tx-day 9s ease infinite;}
.th-tex .sc{position:absolute;inset:0;opacity:0;}
.th-tex .sc.c1{animation:tx-law 9s ease infinite;}
.th-tex .sc.c2{animation:tx-clients 9s ease infinite;}
.th-tex .sc.c3{opacity:1;animation:tx-day 9s ease infinite;}
@keyframes tx-law{0%,28%{opacity:1}34%,100%{opacity:0}}
@keyframes tx-clients{0%,33%{opacity:0}37%,61%{opacity:1}67%,100%{opacity:0}}
@keyframes tx-day{0%,62%{opacity:0}68%,100%{opacity:1}}

/* state 1: user bubble, answer lines, source chips */
.th-tex .bub{position:absolute;right:6%;top:10%;width:44%;height:13%;border-radius:3cqw 3cqw .8cqw 3cqw;background:var(--ink);}
.th-tex .ans{position:absolute;left:6%;top:33%;width:62%;}
.th-tex .ans i{display:block;height:2cqw;border-radius:1cqw;background:var(--line);margin-bottom:2.4cqw;}
.th-tex .chips{position:absolute;left:6%;top:62%;display:flex;gap:2cqw;}
.th-tex .chips i{display:block;width:13cqw;height:4cqw;border-radius:1.4cqw;background:var(--tint);box-shadow:inset 0 0 0 1px var(--accent);}

/* state 2: query bar and a grid of dots, about one in eight turns accent */
.th-tex .qb{position:absolute;left:6%;right:6%;top:9%;height:10cqw;border:1.5px solid var(--accent);border-radius:2.4cqw;background:var(--paper);}
.th-tex .qb i{position:absolute;left:4cqw;top:50%;width:38%;height:1.6cqw;margin-top:-.8cqw;border-radius:1cqw;background:var(--line);}
.th-tex .dg{position:absolute;left:6%;right:6%;top:36%;display:grid;grid-template-columns:repeat(10,1fr);grid-auto-rows:3.6cqw;row-gap:2cqw;justify-items:center;}
.th-tex .dg i{width:3.6cqw;height:3.6cqw;border-radius:50%;background:var(--line);}
.th-tex .dg i.a{animation:tx-dot 9s ease infinite;}
@keyframes tx-dot{0%,36%{background:var(--line)}46%,61%{background:var(--accent)}67%,100%{background:var(--line)}}

/* state 3: three task rows, the first one active */
.th-tex .tl{position:absolute;left:6%;right:6%;top:12%;display:flex;flex-direction:column;gap:2.6cqw;}
.th-tex .tr{display:flex;align-items:center;gap:2.4cqw;height:10cqw;padding:0 3cqw;border:1px solid var(--line);border-radius:2cqw;background:var(--paper);}
.th-tex .tr.hot{border:1.5px solid var(--accent);}
.th-tex .tr .ck{flex:0 0 auto;width:3.6cqw;height:3.6cqw;border-radius:50%;border:1.5px solid var(--ink-faint);}
.th-tex .tr .ln{flex:1;height:1.6cqw;margin:0;}
.th-tex .tr .bt{flex:0 0 auto;width:11cqw;height:4.6cqw;border-radius:1.2cqw;background:var(--accent);}

/* =========================================================
   Leadership
   ========================================================= */
.lm .state{display:grid;grid-template-columns:.9fr 1.1fr;}
.lm .lt{padding:6cqw 3cqw 5cqw 6cqw;display:flex;flex-direction:column;}
.lm .lk{font-family:var(--mono);font-size:max(10px,1.25cqw);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);}
.lm h3{font-family:var(--serif);font-weight:600;font-size:max(20px,3cqw);line-height:1.1;letter-spacing:-.015em;margin-top:1.6cqw;}
.lm .ex{margin-top:auto;border-top:1px dotted var(--line);padding-top:1.8cqw;}
.lm .ex .lb{font-family:var(--mono);font-size:max(9.5px,1.1cqw);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.lm .ex p{font-size:max(13px,1.55cqw);color:var(--ink-soft);line-height:1.45;margin-top:.6cqw;}
.lm .ex a{display:inline-block;margin-top:1cqw;font-family:var(--mono);font-size:max(10.5px,1.2cqw);color:var(--accent);text-decoration:none;}
.lm .ex a:hover{text-decoration:underline;}
.lm .lv{position:relative;margin:4cqw 4cqw 4cqw 0;border-radius:2cqw;background:var(--paper-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:4cqw;}
.lm .lv .b20{height:22cqw;max-width:40cqw;}
.lm .b20 .pb{height:max(13px,2.2cqw);}
.lm .cur .b20 .pb.k{height:max(24px,4.4cqw);}
.lm .b20 .pb b{font-size:max(9.5px,1.25cqw);}
.lm .lv .t10{max-width:30cqw;}
.lm .vv{display:grid;gap:2cqw;justify-items:center;width:100%;}
.lm .vv .big{font-size:max(44px,7cqw);}
.lm .vv .lbl{font-family:var(--mono);font-size:max(10px,1.2cqw);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);text-align:center;}
@media(max-width:700px){
  .lm .canvas{aspect-ratio:auto;height:580px;}
  .lm .state{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
  .lm .lt{padding:24px 22px 12px;}
  .lm .ex{margin-top:16px;padding-top:12px;}
  .lm .lv{margin:8px 16px 16px;padding:18px;}
  .lm .lv .b20{height:150px;max-width:280px;}
  .lm .lv .t10{max-width:220px;}
}

/* step 1: two libraries drift apart */
.drift{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;width:100%;max-width:44cqw;}
.drift .col{display:grid;gap:1.2cqw;}
.drift .ch2{font-family:var(--mono);font-size:max(9px,1.15cqw);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.4cqw;}
.drift .it{position:relative;font-size:max(10.5px,1.35cqw);font-weight:500;padding:1cqw 1.4cqw;border:1.5px solid var(--ink-faint);border-radius:1cqw;background:var(--paper);transition:transform .8s cubic-bezier(.6,0,.2,1),border-color .5s ease;transition-delay:calc(.5s + var(--k) * .18s);}
.drift .it em{position:absolute;right:-.6cqw;top:-1.2cqw;font-style:normal;font-family:var(--mono);font-size:max(8px,.95cqw);color:var(--paper);background:var(--ink-soft);border-radius:.6cqw;padding:.1cqw .7cqw;opacity:0;transition:opacity .4s ease;transition-delay:calc(1.2s + var(--k) * .18s);}
.cur .drift .code .it{transform:translateX(calc(var(--k) * .9cqw + .6cqw)) rotate(calc(var(--k) * .6deg));border-style:dashed;}
.cur .drift .code .it em{opacity:1;}
@media(max-width:700px){.drift{max-width:320px;gap:16px}.drift .col{gap:8px}.cur .drift .code .it{transform:translateX(calc(var(--k) * 4px + 3px)) rotate(calc(var(--k) * .6deg));}}

/* step 3: research tracker */
.rsbar{display:flex;height:2.2cqw;min-height:12px;border-radius:1.2cqw;overflow:hidden;background:var(--paper);border:1px solid var(--line);width:100%;max-width:36cqw;}
.rsbar i{display:block;height:100%;transform-origin:left;transform:scaleX(0);transition:transform .9s ease;}
.rsbar .r1{width:70%;background:var(--accent);transition-delay:.4s;}
.rsbar .r2{width:14%;background:var(--tint);transition-delay:1.1s;}
.cur .rsbar i{transform:none;}
.keys{display:flex;flex-wrap:wrap;justify-content:center;gap:.6cqw 2.4cqw;font-family:var(--mono);font-size:max(9.5px,1.1cqw);color:var(--ink-faint);}
.keys span::before{content:"";display:inline-block;width:1.1cqw;height:1.1cqw;min-width:7px;min-height:7px;border-radius:2px;margin-right:.7cqw;background:var(--paper);border:1px solid var(--line);vertical-align:middle;}
.keys .k1::before{background:var(--accent);border-color:var(--accent);}
.keys .k2::before{background:var(--tint);border-color:var(--tint);}

/* step 5: three questions, then the drift count */
.qs{display:grid;gap:1.2cqw;width:100%;max-width:40cqw;}
.qs .q{display:flex;align-items:center;gap:1.4cqw;font-size:max(11px,1.4cqw);padding:1.1cqw 1.6cqw;border:1px solid var(--line);border-radius:1.2cqw;background:var(--paper);opacity:0;transform:translateY(.8cqw);transition:opacity .4s ease,transform .4s ease;transition-delay:calc(.3s + var(--k) * .45s);}
.qs .q b{font-family:var(--mono);font-size:max(9px,1.05cqw);font-weight:500;color:var(--accent);letter-spacing:.06em;}
.qs .res{display:flex;align-items:center;gap:2cqw;margin-top:1cqw;padding:1.4cqw 2cqw;border-radius:1.4cqw;background:var(--tint-2);border:1px solid var(--accent);opacity:0;transition:opacity .5s ease 1.8s;}
.qs .res .n{font-family:var(--serif);font-weight:600;font-size:max(30px,4.6cqw);line-height:1;color:var(--accent-deep);}
.qs .res .t{font-family:var(--mono);font-size:max(9.5px,1.1cqw);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);line-height:1.45;}
.cur .qs .q{opacity:1;transform:none;}
.cur .qs .res{opacity:1;}
@media(max-width:700px){.qs{max-width:320px;gap:8px}.qs .q{padding:8px 12px;gap:10px}.qs .res{padding:10px 14px;gap:14px}}

/* pillar tiles with a receipt */
.pt6{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:900px){.pt6{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.pt6{grid-template-columns:1fr;}}
.pt{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 22px 20px;display:flex;flex-direction:column;}
.pt .pv{height:104px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;background:var(--paper-2);border-radius:10px;padding:12px 14px;}
.pt .pv .b20{min-height:0;height:80px;max-width:210px;}
.pt .pnum{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.pt h3{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.15;margin:6px 0 12px;}
.pt .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.pt .chips span{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);padding:4px 9px;border-radius:4px;}
.pt .rc{margin-top:auto;padding-top:14px;border-top:1px dotted var(--line);display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline;}
.pt .rc .n{font-family:var(--serif);font-weight:600;font-size:28px;line-height:1;color:var(--accent-deep);letter-spacing:-.01em;}
.pt .rc .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint);line-height:1.45;}
.pt .rc a{grid-column:1/-1;font-family:var(--mono);font-size:11px;color:var(--accent);text-decoration:none;margin-top:6px;}
.pt .rc a:hover{text-decoration:underline;}
.pt.thru{background:var(--accent);border-color:var(--accent);color:#fff;justify-content:space-between;}
.pt.thru .pnum{color:rgba(255,255,255,.75);}
.pt.thru h3{color:#fff;font-size:26px;margin-bottom:16px;}
.pt.thru .q{font-family:var(--serif);font-size:18px;line-height:1.35;color:rgba(255,255,255,.95);}
.pt.thru .q + .q{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.22);}

/* influence without mandate */
.infl{display:grid;grid-template-columns:.8fr auto 1.6fr;align-items:center;gap:0;}
.infl .me{border:1.5px solid var(--ink);border-radius:14px;background:var(--paper);padding:18px 18px 16px;}
.infl .me .h{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.infl .me .t{font-weight:600;margin:4px 0 12px;}
.infl .me .ppl{display:flex;gap:6px;flex-wrap:wrap;}
.infl .me .ppl i{width:14px;height:14px;border-radius:50%;background:var(--ink);}
.infl .me .ppl i:first-child{background:var(--accent);}
.infl .bus{position:relative;width:56px;align-self:stretch;}
.infl .bus::before{content:"";position:absolute;left:0;width:28px;top:50%;height:2px;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform .4s ease .2s;}
.infl .bus::after{content:"";position:absolute;left:28px;top:8%;bottom:8%;width:2px;background:var(--accent);transform-origin:center;transform:scaleY(0);transition:transform .6s ease .55s;}
.infl .teams{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.infl .tm{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:13px;font-weight:500;color:var(--ink-faint);transition:border-color .35s ease,color .35s ease,background .35s ease;transition-delay:calc(1s + var(--k) * .16s);}
.infl .tm::before{content:"";position:absolute;right:100%;top:50%;width:28px;height:2px;background:var(--accent);transform-origin:right;transform:scaleX(0);transition:transform .3s ease;transition-delay:inherit;}
.infl .teams .tm:nth-child(2n)::before{display:none;}
.infl .tm .mk{margin-left:auto;display:flex;gap:4px;}
.infl .tm .mk span{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;padding:2px 6px;border-radius:3px;border:1px solid var(--line);color:var(--ink-faint);transition:all .35s ease;transition-delay:inherit;}
.on .infl .bus::before{transform:none;}
.on .infl .bus::after{transform:none;}
.on .infl .tm{border-color:var(--accent);color:var(--ink);background:var(--tint-2);}
.on .infl .tm::before{transform:none;}
.on .infl .tm .mk span{background:var(--accent);border-color:var(--accent);color:#fff;}
.infl-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-family:var(--mono);font-size:11px;color:var(--ink-faint);}
.infl-legend b{color:var(--ink-soft);font-weight:500;}
@media(max-width:760px){
  .infl{grid-template-columns:1fr;}
  .infl .bus{width:auto;height:30px;}
  .infl .bus::before{left:50%;top:0;width:2px;height:100%;transform-origin:top;}
  .infl .bus::after{display:none;}
  .infl .tm::before{display:none;}
  .infl .tm{padding:9px 10px;font-size:12px;}
  .infl .tm .mk span{font-size:8.5px;padding:1px 4px;}
}

/* =========================================================
   Experience: career line
   ========================================================= */
.career{display:grid;grid-template-columns:repeat(5,1fr);position:relative;}
.career::before{content:"";position:absolute;left:10%;right:10%;top:52px;height:2px;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform 2.2s cubic-bezier(.4,0,.2,1) .2s;}
.career .cn{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px;text-decoration:none;color:inherit;}
.career .cd{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);height:30px;}
.career .dot{width:18px;height:18px;margin:6px 0 16px;border-radius:50%;background:var(--paper);border:2px solid var(--accent);position:relative;z-index:1;transform:scale(.4);opacity:0;transition:transform .35s ease,opacity .35s ease,background .35s ease;transition-delay:calc(.3s + var(--k) * .42s);}
.career .cn.now .dot{background:var(--accent);}
.career .rt2{font-weight:600;font-size:15px;line-height:1.25;}
.career .co{font-size:13px;color:var(--ink-faint);margin-top:4px;line-height:1.35;min-height:36px;}
.career .sb{width:44%;height:120px;margin-top:18px;display:flex;align-items:flex-end;border-bottom:1px solid var(--line);}
.career .sb i{display:block;width:100%;height:var(--h);border-radius:6px 6px 0 0;background:var(--tint);border:1.5px solid var(--accent);border-bottom:none;transform-origin:bottom;transform:scaleY(0);transition:transform .6s cubic-bezier(.3,0,.2,1);transition-delay:calc(.5s + var(--k) * .42s);}
.career .cn.now .sb i{background:var(--accent);}
.career .sl{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);margin-top:10px;line-height:1.45;max-width:20ch;}
.career .cn:hover .rt2{color:var(--accent);}
.on .career::before{transform:none;}
.on .career .dot{transform:none;opacity:1;}
.on .career .sb i{transform:none;}
.career-cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
@media(max-width:760px){
  .career{grid-template-columns:1fr;gap:0;}
  .career::before{left:24px;right:auto;top:10px;bottom:10px;width:2px;height:auto;transform-origin:top;transform:scaleY(0);}
  .on .career::before{transform:none;}
  .career .cn{display:grid;grid-template-columns:48px 1fr;grid-template-areas:"dot cd" "dot rt" "dot co" "dot sb" "dot sl";align-items:start;text-align:left;padding:0 0 22px;}
  .career .cd{grid-area:cd;height:auto;margin-bottom:2px;}
  .career .dot{grid-area:dot;margin:2px 0 0 15px;}
  .career .rt2{grid-area:rt;}
  .career .co{grid-area:co;min-height:0;}
  .career .sb{grid-area:sb;width:100%;height:14px;margin-top:10px;border-bottom:none;background:var(--paper);border-radius:7px;overflow:hidden;}
  .career .sb i{width:var(--h);height:100%;border:none;border-radius:7px;transform-origin:left;transform:scaleX(0);}
  .on .career .sb i{transform:none;}
  .career .sl{grid-area:sl;max-width:none;margin-top:6px;}
}

/* experience: role blocks */
.role .rmeta .rt + .rd{margin-bottom:14px;}
.role .rmeta .rt.sub{font-size:16px;margin-top:4px;}
.role .rbody ul{margin-bottom:6px;}
.rlinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.rlinks a{font-family:var(--mono);font-size:11px;color:var(--accent);text-decoration:none;border:1px solid var(--line);background:var(--paper);border-radius:20px;padding:6px 12px;transition:border-color .2s,background .2s;}
.rlinks a:hover{border-color:var(--accent);background:var(--tint-2);}
.chipline{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.chipline > div{background:var(--paper);padding:18px 20px;}
.chipline h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;font-weight:500;}
.chipline .chips{display:flex;flex-wrap:wrap;gap:6px;}
.chipline .chips span{font-family:var(--mono);font-size:11px;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);padding:4px 9px;border-radius:4px;}
@media(max-width:900px){.chipline{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.chipline{grid-template-columns:1fr;}}

/* =========================================================
   About
   ========================================================= */
.about-hero{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:end;}
.about-hero .photo{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2);aspect-ratio:4/5;max-width:340px;justify-self:end;width:100%;}
.about-hero .photo img{width:100%;height:100%;object-fit:cover;}
.about-hero .photo[hidden]{display:none;}
.about-hero:has(.photo[hidden]){grid-template-columns:1fr;}
@media(max-width:820px){.about-hero{grid-template-columns:1fr;gap:28px;}.about-hero .photo{justify-self:start;max-width:280px;}}

/* floor plan, then wireframe, then components */
.am .blk{position:absolute;left:var(--x0);top:var(--y0);width:var(--w0);height:var(--h0);border:.5cqw solid var(--ink);background:transparent;border-radius:0;
  transition:left .9s cubic-bezier(.6,0,.2,1),top .9s cubic-bezier(.6,0,.2,1),width .9s cubic-bezier(.6,0,.2,1),height .9s cubic-bezier(.6,0,.2,1),border-width .6s ease,border-color .6s ease,background .6s ease,border-radius .6s ease;}
.am[data-s="1"] .blk{left:var(--x1);top:var(--y1);width:var(--w1);height:var(--h1);border-width:1.5px;border-color:var(--ink-faint);background:var(--paper);border-radius:1cqw;}
.am[data-s="2"] .blk{left:var(--x2);top:var(--y2);width:var(--w2);height:var(--h2);border-width:1.5px;border-color:var(--line);background:var(--paper);border-radius:1.2cqw;}
.am[data-s="2"] .blk.c-btn{background:var(--accent);border-color:var(--accent);}
.am[data-s="2"] .blk.c-inp{border-color:var(--ink-faint);}
.am[data-s="2"] .blk.c-tag{border-radius:4cqw;border-color:var(--accent);background:var(--tint-2);}
.am .blk > *{position:absolute;opacity:0;transition:opacity .4s ease;}
.am .rm{left:6%;top:6%;font-family:var(--mono);font-size:max(8px,1.3cqw);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.am[data-s="0"] .blk .rm{opacity:1;transition-delay:.7s;}
.am .door{width:6cqw;height:6cqw;border:1px solid var(--ink-faint);border-radius:0 100% 0 0;border-left:none;border-bottom:none;background:transparent;}
.am[data-s="0"] .blk .door{opacity:1;transition-delay:.7s;}
.am .wf{inset:10% 8%;}
.am .wf .ln{margin-bottom:1.1cqw;}
.am[data-s="1"] .blk .wf{opacity:1;transition-delay:.8s;}
.am .cl{left:0;top:calc(100% + .8cqw);font-family:var(--mono);font-size:max(8px,1.25cqw);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);white-space:nowrap;}
.am .cin{inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:max(8px,1.3cqw);}
.am .blk.c-btn .cin{color:#fff;}
.am .blk.c-inp .cin{justify-content:flex-start;padding-left:8%;color:var(--ink-faint);}
.am .blk.c-tag .cin{color:var(--accent);}
.am .cskel{inset:12% 9%;}
.am[data-s="2"] .blk .cl, .am[data-s="2"] .blk .cin, .am[data-s="2"] .blk .cskel{opacity:1;transition-delay:.85s;}
.am .scale{position:absolute;left:6%;bottom:5%;display:flex;align-items:center;gap:1cqw;font-family:var(--mono);font-size:max(8px,1.2cqw);color:var(--ink-faint);opacity:0;transition:opacity .4s ease;}
.am .scale i{display:block;width:10cqw;height:.9cqw;border:1px solid var(--ink-faint);border-top:none;}
.am[data-s="0"] .scale.s0, .am[data-s="1"] .scale.s1, .am[data-s="2"] .scale.s2{opacity:1;transition-delay:.7s;}
@media(max-width:700px){.am .canvas{aspect-ratio:16/11;}}

/* about: two columns of text and a glance card */
.about-grid .prose + .prose{margin-top:18px;}
.style5{--n:5;}
@media(max-width:1000px){.style5{grid-template-columns:repeat(3,1fr);}}
@media(max-width:700px){.style5{grid-template-columns:1fr 1fr;}}
@media(max-width:460px){.style5 > div{padding:20px 16px;}.style5 > div:last-child{grid-column:1/-1;}}
.style5 p{font-size:15px;color:var(--ink);font-weight:500;line-height:1.4;}
.away{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.away span{font-family:var(--mono);font-size:12px;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:7px 14px;}

/* =========================================================
   Contact
   ========================================================= */
.status{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:30px;padding:8px 16px;margin-top:26px;}
.status i{position:relative;width:9px;height:9px;border-radius:50%;background:var(--accent);}
.status i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:st-ping 2.4s ease-out infinite;}
@keyframes st-ping{0%{transform:scale(.4);opacity:.7}80%,100%{transform:scale(1.3);opacity:0}}
.clinks{display:grid;gap:12px;}
.clinks a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--paper);text-decoration:none;color:inherit;transition:border-color .2s,transform .2s,background .2s;}
.clinks a:hover{border-color:var(--accent);transform:translateY(-2px);}
.clinks .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:3px;}
.clinks .v{font-size:16px;font-weight:600;}
.clinks .go{font-family:var(--mono);color:var(--accent);font-size:16px;}
.cfacts{margin-top:18px;--n:2;}

/* =========================================================
   Reduced motion: final state, no movement
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .stage *, .stage, .play *, .morph *, .status i::after{animation:none !important;transition:none !important;}
  .morph .state{transition:none !important;}
}

/* =========================================================
   Contact: guided chat (no AI)
   ========================================================= */
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.chat{position:relative;display:flex;flex-direction:column;height:min(620px,80vh);min-height:460px;background:var(--paper);border:1.5px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:0 28px 50px -34px rgba(26,25,22,.55);}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--paper);}
.chat-head .av{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;letter-spacing:.04em;}
.chat-head .nm{font-weight:600;font-size:15px;line-height:1.2;}
.chat-head .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-faint);margin-top:2px;}
.chat-log > *{flex-shrink:0;}
.chat-log{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth;}
.chat .msg{max-width:82%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;animation:msg-in .22s ease both;}
.chat .msg.bot{align-self:flex-start;background:var(--paper-2);color:var(--ink);border-bottom-left-radius:4px;}
.chat .msg.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px;margin-top:4px;}
.chat .msg.me + .msg.bot{margin-top:6px;}
.chat .msg.typing{display:flex;gap:4px;padding:13px 14px;}
.chat .msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);animation:typing 1s ease-in-out infinite;}
.chat .msg.typing i:nth-child(2){animation-delay:.15s}.chat .msg.typing i:nth-child(3){animation-delay:.3s}
.chat .msg.card{max-width:94%;width:94%;background:var(--paper);border:1px solid var(--line);padding:6px 14px;white-space:normal;}
.chat .rv-row{display:grid;grid-template-columns:96px 1fr auto;gap:10px;align-items:start;padding:9px 0;border-bottom:1px dotted var(--line);}
.chat .rv-row:last-child{border-bottom:none;}
.chat .rv-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);padding-top:2px;}
.chat .rv-v{font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;}
.chat .rv-edit{all:unset;cursor:pointer;font-family:var(--mono);font-size:11px;color:var(--accent);padding-top:2px;}
.chat .rv-edit:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;}
.chat-bar{border-top:1px solid var(--line);padding:12px;background:var(--paper);min-height:66px;}
.chat-form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;}
.chat-form input,.chat-form textarea{flex:1 1 220px;min-width:0;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;resize:none;line-height:1.4;}
.chat-form textarea{flex-basis:100%;min-height:88px;}
.chat-form input:focus,.chat-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--tint-2);}
.chat-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-left:auto;}
.chat-send{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;border:none;border-radius:10px;background:var(--accent);color:#fff;padding:12px 18px;cursor:pointer;text-decoration:none;display:inline-block;}
.chat-send:hover{background:var(--accent-deep);}
.chat-send.big{padding:13px 22px;}
.chat-skip{font-family:var(--mono);font-size:12.5px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);padding:11px 16px;cursor:pointer;}
.chat-skip:hover{background:var(--paper-2);}
.chat-send:focus-visible,.chat-skip:focus-visible,.chat-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.chat-choices{display:flex;flex-wrap:wrap;gap:8px;}
.chat-chip{font-family:var(--sans);font-size:14px;font-weight:500;border:1.5px solid var(--accent);color:var(--accent);background:var(--paper);border-radius:20px;padding:9px 15px;cursor:pointer;}
.chat-chip:hover{background:var(--tint-2);}
.chat-err{flex-basis:100%;font-family:var(--mono);font-size:11.5px;color:#b3261e;margin:0;}
.chat-err:empty{display:none;}
.chat-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.chat-note{font-family:var(--mono);font-size:11px;color:var(--ink-faint);line-height:1.6;margin-top:12px;}
.chat-note a{color:var(--accent);}
@keyframes msg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes typing{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}
@media(max-width:520px){.chat{height:72vh;min-height:420px;}.chat .msg{max-width:90%;}.chat .rv-row{grid-template-columns:1fr auto;}.chat .rv-k{grid-column:1/-1;}}
@media (prefers-reduced-motion: reduce){.chat .msg,.chat .msg.typing i{animation:none !important;}.chat-log{scroll-behavior:auto;}}

/* =========================================================
   Three pages (24 Oct 2026): Home, How I work, About.
   Visual language from the staging redesign, copy from the
   live site. Tokens only, no new colours.
   ========================================================= */
section[id]{scroll-margin-top:64px;}
.ch-head h2 em{font-style:italic;font-weight:500;color:var(--accent-deep);}
.more{justify-self:start;font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--accent);text-decoration:none;}
.more:hover{text-decoration:underline;}
.more:focus-visible,.ev .evl:focus-visible,.ai3 a:focus-visible,.pbc:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px;}

/* ---------- home: compact case study cards ---------- */
.wcards.compact{gap:18px;}
.wcards.compact + .more{margin-top:28px;display:inline-block;}
.wc.h{flex-direction:row;border-radius:14px;}
.wc.h .tw{flex:0 0 40%;display:flex;align-items:center;background:var(--paper-2);border-right:1px solid var(--line);}
/* the thumbnail is drawn at its full card size, then scaled down, so nothing gets cut off */
.wc.h .tb{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;}
.wc.h .tb .th{position:absolute;left:0;top:0;width:250%;transform:scale(.4);transform-origin:0 0;border-bottom:none;}
.wc.h .wt{padding:18px 20px;}
.wc.h .we{font-size:10px;margin-bottom:8px;}
.wc.h h3{font-size:19px;line-height:1.18;margin-bottom:6px;}
.wc.h p{font-size:14px;line-height:1.45;}
.wc.h .wm{margin:12px 0;padding-top:10px;gap:4px 14px;font-size:10.5px;}
.wc.h .cgo{font-size:11px;}
@media(max-width:520px){
  .wc.h{flex-direction:column;}
  .wc.h .tw{flex:none;border-right:none;border-bottom:1px solid var(--line);}
  .wc.h .tb .th{width:200%;transform:scale(.5);}
}

/* ---------- how i work: pillars with the evidence always open ---------- */
.pe .pt .pv{height:132px;}
.pe .pt .chips{margin-bottom:18px;}
.ev{margin-top:auto;padding-top:14px;border-top:1px dotted var(--line);display:grid;gap:10px;}
.ev .evk{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.evn{display:grid;grid-template-columns:minmax(56px,auto) minmax(0,1fr);gap:2px 12px;align-items:baseline;}
.evn .n{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1;color:var(--accent-deep);letter-spacing:-.01em;white-space:nowrap;}
.evn .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint);line-height:1.45;}
.own{list-style:none;border-top:1px dotted var(--line);margin-top:2px;}
.own li{position:relative;font-size:13.5px;line-height:1.45;color:var(--ink-soft);padding:8px 0 8px 18px;border-bottom:1px dotted var(--line);}
.own li:last-child{border-bottom:none;}
.own li::before,.legend i{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;box-sizing:border-box;border:1.5px solid var(--accent);}
.own li::before{position:absolute;left:0;top:13px;}
.own li.m::before,.legend i.m{background:var(--accent);}
.ev .evl{font-family:var(--mono);font-size:11px;color:var(--accent);text-decoration:none;}
.ev .evl:hover{text-decoration:underline;}
.pe .pt.thru .q{font-size:17px;}
.legend{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--mono);font-size:11px;color:var(--ink-faint);}
.legend span{display:inline-flex;align-items:center;gap:8px;}

/* ---------- how i work: the sequence, on a rail ---------- */
.mth{list-style:none;position:relative;border-top:1px solid var(--line);}
.mth::before{content:"";position:absolute;left:19px;top:44px;bottom:44px;width:2px;background:var(--line);}
.ms{position:relative;display:grid;grid-template-columns:240px repeat(3,minmax(0,1fr));gap:12px 26px;padding:24px 0;border-bottom:1px solid var(--line);}
.ms .mh{display:flex;align-items:flex-start;gap:14px;}
.ms .mn{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--accent);background:var(--paper);position:relative;z-index:1;}
.ms h3{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.15;padding-top:7px;}
.ms .mk{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px;}
.ms .mc p{font-size:14.5px;line-height:1.5;color:var(--ink-soft);}
@media(max-width:1000px){.ms{grid-template-columns:200px repeat(3,minmax(0,1fr));gap:12px 20px;}}
@media(max-width:820px){
  .ms{grid-template-columns:40px minmax(0,1fr);gap:10px 16px;}
  .ms .mh{grid-column:1/-1;}
  .ms .mc{grid-column:2;}
}

/* ---------- how i work: where AI changes the work ---------- */
.ai,.pbk{display:grid;gap:18px;margin-top:22px;}
.sub h3{font-family:var(--serif);font-size:clamp(22px,2.6vw,26px);font-weight:600;line-height:1.15;letter-spacing:-.01em;}
.sub p{font-size:16px;line-height:1.55;color:var(--ink-soft);max-width:60ch;margin-top:8px;}
.aif{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,2fr);gap:22px;}
.aif .phs{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px;}
.aif .phs span{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-align:center;padding:11px 4px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink-soft);transition:border-color .35s ease,background .35s ease,color .35s ease;transition-delay:calc(.3s + var(--k) * .14s);}
.aif .brk{position:relative;margin-top:12px;padding-top:16px;font-size:14px;line-height:1.4;color:var(--ink-soft);}
.aif .brk::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;border:2px solid var(--accent);border-top:none;border-radius:0 0 8px 8px;transform:scaleX(0);transition:transform .6s ease 1.1s;}
.aif .r .brk::before{transition-delay:1.5s;}
.aif .brk b{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:2px;}
.aif.on .phs span{border-color:var(--accent);background:var(--tint-2);color:var(--ink);}
.aif.on .brk::before{transform:none;}
@media(max-width:760px){.aif{grid-template-columns:1fr;}.aif .l .phs{grid-template-columns:1fr 1fr;}}
.ai3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.ai3 > div{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px 22px;}
.ai3 .k,.pbc .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.ai3 h4{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.2;margin:6px 0 8px;}
.ai3 p{font-size:14.5px;line-height:1.5;color:var(--ink-soft);}
.ai3 a{margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:11px;color:var(--accent);text-decoration:none;}
.ai3 a:hover{text-decoration:underline;}
@media(max-width:860px){.ai3{grid-template-columns:1fr;}}

/* ---------- how i work: playbooks ---------- */
.pl3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.pbc{display:flex;flex-direction:column;gap:12px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--paper);text-decoration:none;color:inherit;transition:border-color .2s,transform .2s;}
.pbc:hover{border-color:var(--accent);transform:translateY(-2px);}
.pbc .sq{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.pbc .sq span{font-size:13.5px;font-weight:500;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:4px 10px;}
.pbc .sq i{font-style:normal;font-family:var(--mono);color:var(--accent);}
.pbc .go{margin-top:auto;font-family:var(--mono);font-size:11px;color:var(--accent);}
@media(max-width:860px){.pl3{grid-template-columns:1fr;}}

/* ---------- how i work: tools ---------- */
.tools{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:10px 22px;}
.tools .tr{display:grid;grid-template-columns:220px minmax(0,1fr);gap:2px 18px;padding:12px 0;border-bottom:1px dotted var(--line);}
.tools .tr:last-child{border-bottom:none;}
.tools .tk{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);padding-top:2px;}
.tools .tv{font-size:15px;color:var(--ink);}
@media(max-width:560px){.tools .tr{grid-template-columns:1fr;}}

/* ---------- about: photo, intro and the glance card ---------- */
.about-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);grid-template-areas:"head photo" "body photo" "body glance";column-gap:46px;align-items:start;}
.about-top .ah-head{grid-area:head;}
.about-top .ah-head h1{max-width:15ch;}
.about-top .ah-body{grid-area:body;padding-top:4px;}
.about-top .photo{grid-area:photo;justify-self:end;width:100%;max-width:340px;aspect-ratio:1/1;margin:0 0 20px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2);}
.about-top .photo img{width:100%;height:100%;object-fit:cover;}
.about-top .photo[hidden]{display:none;}
.about-top .about-side{grid-area:glance;justify-self:end;width:100%;max-width:340px;}
.about-side .row .v{max-width:62%;line-height:1.5;}
@media(max-width:820px){
  .about-top{grid-template-columns:1fr;grid-template-areas:"head" "photo" "body" "glance";}
  .about-top .photo{justify-self:start;max-width:300px;margin:6px 0 26px;}
  .about-top .about-side{justify-self:stretch;max-width:none;margin-top:30px;}
}

/* about: timeline without the scope bars */
.career.nb .sb,.career.nb .sl{display:none;}
.career.nb .cn{cursor:default;}
.career .cn:hover .rt2{color:inherit;}
#career .btns{margin-top:0;}
@media (prefers-reduced-motion: reduce){.aif .brk::before{transition:none !important;}}