/* Tech Moves Fast · featured interactive case (home block, case page, transformation card)
   Breaks the navy/gold system on purpose: carbon, graphite, signal yellow, mint, cyan. Inter Tight + IBM Plex Mono, as in the live presentation. */
@font-face{font-family:"Inter Tight";src:url(fonts/inter-tight-var.woff2) format("woff2-variations"),url(fonts/inter-tight-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

.tm,.tmc,.case.tmf,.tsx{
  --t-carbon:#15161B;--t-graph:#272830;--t-white:#F1F0EA;--t-y:#FFE600;--t-mint:#43E1C1;--t-cyan:#70D7F3;
  --t-mute:rgba(241,240,234,.62);--t-dim:rgba(241,240,234,.38);--t-hair:rgba(241,240,234,.14);
  --t-sans:"Inter Tight","Satoshi","Helvetica Neue",Arial,sans-serif;--t-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --t-ease:cubic-bezier(.22,.8,.18,1)
}
.tm .y,.tmc .y{color:var(--t-y)}
.tm-sig{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--t-y);margin-right:12px;vertical-align:1px;box-shadow:0 0 12px rgba(255,230,0,.7)}

/* ================= HOME BLOCK ================= */
.tm{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-bottom:clamp(64px,8vw,128px);background:var(--t-carbon);color:var(--t-white);font-family:var(--t-sans);padding:clamp(40px,5vw,72px) 0 clamp(48px,6vw,88px);overflow:hidden}
.tm::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 78% 22%,rgba(67,225,193,.07),transparent 70%),radial-gradient(40% 40% at 12% 90%,rgba(255,230,0,.05),transparent 70%);pointer-events:none}
.tm-in{position:relative}
.tm-q{opacity:0;transform:translateY(28px);transition:opacity 1s var(--t-ease) var(--qd,0s),transform 1.2s var(--t-ease) var(--qd,0s)}
.tm-q.in{opacity:1;transform:none}
.tm-mast{display:flex;align-items:center;gap:20px;font:500 12px/1 var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--t-mute)}
.tm-rule{flex:1;height:1px;background:var(--t-hair)}
.tm-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(36px,4.5vw,64px);align-items:start}
.tm-copy{grid-column:1/6;grid-row:1;align-self:start;position:relative;z-index:2;padding-top:clamp(4px,1vw,16px)}
.tm-title{margin:0;font-weight:650;text-transform:uppercase;letter-spacing:-.045em;line-height:.88;font-size:clamp(44px,5.1vw,84px)}
.tm-title span{display:block}
.tm-title span+span{margin-top:.28em}
.tm-desc{margin:clamp(22px,2.4vw,36px) 0 0;max-width:30ch;font-size:clamp(17px,1.35vw,21px);line-height:1.35;color:var(--t-mute)}
.tm-f{position:relative;display:block}
.tm-f img{display:block;width:100%;height:auto;border-radius:3px;outline:1px solid var(--t-hair);outline-offset:-1px;background:var(--t-graph);transition:transform 1.2s var(--t-ease),outline-color .4s}
.tm-f:hover img{transform:translateY(-4px);outline-color:rgba(255,230,0,.5)}
.tm-cap{display:flex;gap:10px;align-items:center;padding-top:12px;font:500 11px/1 var(--t-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--t-mute)}
.tm-cap b{color:var(--t-y);font-weight:500}
.tm-cover{grid-column:6/13;grid-row:1/3;--qd:.1s}
.tm-cover img{box-shadow:0 50px 90px -40px rgba(0,0,0,.8)}
.tm-89{grid-column:4/8;grid-row:2;margin-top:clamp(20px,2.4vw,36px);z-index:3;--qd:.25s}
.tm-89 img{box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.tm-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto;gap:clamp(16px,2vw,28px);margin-top:clamp(48px,5vw,80px)}
.tm-split{grid-column:1;grid-row:1/3;align-self:start;--qd:.05s}
.tm-stack{grid-column:2;grid-row:1;--qd:.15s}
.tm-found{grid-column:2;grid-row:2;width:78%;justify-self:end;--qd:.25s}
.tm-eq{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:clamp(18px,2vw,26px) 0;border-block:1px solid var(--t-hair);font:500 clamp(18px,2.2vw,34px)/1 var(--t-sans);letter-spacing:-.02em;text-transform:uppercase}
.tm-eq i{display:inline-block;width:.5em;height:.5em;border-radius:50%;margin-right:.32em;vertical-align:.08em}
.tm-eq .m i{background:var(--t-mint)} .tm-eq .y i{background:var(--t-y)} .tm-eq .w i{background:var(--t-white)} .tm-eq .c i{border:2px solid var(--t-cyan);box-sizing:border-box}
.tm-eq .pl{color:var(--t-dim);font-weight:300}
.tm-low{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);margin-top:clamp(28px,3vw,44px);align-items:end}
.tm-body p{margin:0 0 14px;font-size:clamp(16px,1.2vw,19px);line-height:1.45;color:var(--t-mute);max-width:58ch}
.tm-body p:first-child{color:var(--t-white);font-size:clamp(19px,1.6vw,24px);line-height:1.3;font-weight:500;letter-spacing:-.01em}
.tm-five{display:flex;flex-wrap:wrap;gap:8px}
.tm-five span{font:500 12px/1 var(--t-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t-carbon);background:var(--t-y);padding:7px 10px}
.tm-act{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.tm-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 6px;padding:0}
.tm-tags li{font:500 11px/1 var(--t-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t-mute);border:1px solid var(--t-hair);border-radius:999px;padding:7px 11px}
.tm-go,.tm-live{display:inline-flex;align-items:center;gap:14px;font:600 14px/1 var(--t-sans);letter-spacing:.14em;text-transform:uppercase;padding:17px 22px;border-radius:2px;transition:background .3s,color .3s,border-color .3s}
.tm-go{color:var(--t-white);border:1px solid rgba(241,240,234,.45)}
.tm-go:hover{border-color:var(--t-white);background:rgba(241,240,234,.06)}
.tm-go i,.tm-live i{font-style:normal;transition:transform .4s var(--t-ease)}
.tm-go:hover i{transform:translateX(5px)}
.tm-live{color:var(--t-carbon);background:var(--t-y);border:1px solid var(--t-y)}
.tm-live:hover{background:var(--t-white);border-color:var(--t-white)}
.tm-live:hover i{transform:translate(3px,-3px)}
.tm-live.lg{padding:20px 26px;font-size:15px}
.tm-go:focus-visible,.tm-live:focus-visible,.tm-f:focus-visible,.tm-next:focus-visible{outline:2px solid var(--t-y);outline-offset:3px}
.tm-disc{margin:4px 0 0;font:400 12px/1.5 var(--t-mono);color:var(--t-dim)}
@media (max-width:900px){
  .tm-copy,.tm-cover{grid-column:1/-1}
  .tm-cover{grid-row:2}
  .tm-cover{grid-row:2}
  .tm-89{grid-column:5/13;grid-row:3;margin:-10% 0 0}
  .tm-row{grid-template-columns:1fr;margin-top:40px}
  .tm-split,.tm-stack{grid-column:1;grid-row:auto}
  .tm-found{grid-column:1;grid-row:auto;width:70%}
  .tm-low{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.tm-q{opacity:1;transform:none;transition:none}}

/* ================= CASE CHROME ================= */
.case.tmf{background:var(--t-carbon);color:var(--t-white)}
.case.tmf .cbar{background:rgba(21,22,27,.88);border-bottom-color:var(--t-hair)}
.case.tmf .cbar .wrap{font:500 12px/1 var(--t-mono);letter-spacing:.16em;text-transform:uppercase}
.case.tmf .cbar .ttl{color:var(--t-white)}
.case.tmf .cbar button{color:var(--t-mute)}
.case.tmf .cbar button:hover{color:var(--t-y)}
.case.tmf ::selection{background:var(--t-y);color:var(--t-carbon)}
.case.tmf :focus-visible{outline-color:var(--t-y)}

.tmc{font-family:var(--t-sans);color:var(--t-white);overflow-x:clip}
.tmc .wrap{position:relative}
.tc-k{display:flex;gap:14px;align-items:center;margin:0 0 clamp(24px,3vw,44px);font:500 12px/1 var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--t-mute)}
.tc-k span{color:var(--t-y)}
.tc-k::after{content:"";flex:1;height:1px;background:var(--t-hair)}
.tc-sec{padding:clamp(72px,9vw,150px) 0 0}
.tc-sec.tc-tight{padding-top:clamp(48px,5vw,80px)}
.tc-h2{margin:0;font-weight:560;font-size:clamp(30px,3.4vw,54px);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.tc-h2 span{color:var(--t-y)}
.tc-h2 i{font-style:normal;color:var(--t-mint)}
.tc-body p,.tc-p{margin:0 0 14px;font-size:clamp(17px,1.3vw,20px);line-height:1.45;color:var(--t-mute);max-width:56ch}
.tc-mk{margin:0 0 10px;font:500 12px/1 var(--t-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--t-mute)}
.tc-mk.y{color:var(--t-y)}
.tc-big{margin:0;font-weight:650;text-transform:uppercase;letter-spacing:-.045em;line-height:.88;font-size:clamp(48px,8vw,140px)}
.tc-big.sm{font-size:clamp(40px,6vw,104px)}
.tc-big span,.tc-big.y{color:var(--t-y)}

/* hero */
.tc-hero{padding:clamp(28px,4vw,56px) 0 0}
.tc-mast{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:500 12px/1 var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--t-mute);padding-bottom:16px;border-bottom:1px solid var(--t-hair)}
.tc-h{margin:clamp(36px,5vw,80px) 0 0;font-weight:650;text-transform:uppercase;letter-spacing:-.05em;line-height:.86;font-size:clamp(56px,11.4vw,196px)}
.tc-l{display:block;overflow:hidden;padding:.04em 0 .08em;margin:-.04em 0 -.08em}
.tc-l>span{display:inline-block;transform:translateY(112%);transition:transform 1.2s var(--t-ease)}
.tc-l.d2>span{transition-delay:.35s}.tc-l.d3>span{transition-delay:.47s}
.tc-l.d2{margin-top:.22em}
.case.ready .tc-l>span{transform:none}
.tc-hero-low{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:clamp(32px,4vw,56px)}
.tc-meta{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.tc-meta li{font:500 12px/1 var(--t-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t-white);border:1px solid var(--t-hair);padding:9px 12px;border-radius:999px}
.tc-cover{margin:clamp(40px,5vw,72px) 0 0}
.tc-cover img{display:block;width:100%;height:auto;border-radius:3px;outline:1px solid var(--t-hair);outline-offset:-1px;box-shadow:0 60px 120px -60px rgba(0,0,0,.9)}
.tc-cover figcaption,.tc-cap{margin-top:12px;font:400 12px/1.5 var(--t-mono);letter-spacing:.04em;color:var(--t-dim)}

/* positioning */
.tc-pos{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,96px);align-items:end}
.tc-flow{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:f}
.tc-flow li{position:relative;padding:22px 22px 26px 0;border-top:2px solid var(--t-mint);font-weight:560;font-size:clamp(17px,1.5vw,24px);line-height:1.12;letter-spacing:-.015em;text-transform:uppercase}
.tc-flow li::after{content:"→";position:absolute;right:12px;top:18px;font-weight:400;color:var(--t-dim)}
.tc-flow li:last-child::after{content:none}
.tc-flow li b{display:block;margin-bottom:12px;font:500 12px/1 var(--t-mono);letter-spacing:.14em;color:var(--t-mint)}
.tc-flow li.on{border-top-color:var(--t-y);color:var(--t-y)}
.tc-flow li.on b{color:var(--t-y)}
.tc-flow li:nth-child(3),.tc-flow li:nth-child(4){border-top-color:rgba(241,240,234,.5)}
.tc-flow li:nth-child(3) b,.tc-flow li:nth-child(4) b{color:var(--t-mute)}
.tc-idea{margin:clamp(40px,5vw,64px) 0 0;max-width:40ch;font-size:clamp(20px,1.9vw,30px);line-height:1.25;letter-spacing:-.015em;color:var(--t-mute)}
.tc-idea span{display:block;color:var(--t-white);font-weight:560;margin-top:6px}

/* statement */
.tc-state{margin-top:clamp(80px,10vw,170px);padding:clamp(72px,9vw,150px) 0;background:var(--t-graph);position:relative;overflow:hidden}
.tc-state::after{content:"";position:absolute;right:-8vw;top:50%;width:46vw;height:46vw;transform:translateY(-50%);border-radius:50%;border:1px solid rgba(255,230,0,.18);pointer-events:none}
.tc-state .tc-big{font-size:clamp(48px,9vw,156px)}
.tc-state .tc-big+.tc-big{margin-top:.18em}
.tc-sub{margin:clamp(28px,3vw,48px) 0 0;font:500 clamp(13px,1vw,15px)/1.4 var(--t-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--t-mint)}

/* role */
.tc-role{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,40px);margin:0;padding-top:24px;border-top:1px solid var(--t-hair)}
.tc-role dt{font:500 12px/1 var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--t-y);margin-bottom:14px}
.tc-role dd{margin:0;font-size:clamp(16px,1.25vw,19px);line-height:1.45;color:var(--t-white)}
.tc-role div:last-child dd{color:var(--t-mute);font-size:15px}

/* before / after slider */
.tb{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:3px;background:var(--t-graph);outline:1px solid var(--t-hair);outline-offset:-1px;user-select:none;touch-action:pan-y}
.tb-img{position:absolute;inset:0}
.tb-img img{display:block;width:100%;height:100%;object-fit:cover}
.tb-a{clip-path:inset(0 0 0 var(--x))}
.tb-h{position:absolute;top:0;bottom:0;left:var(--x);width:0;pointer-events:none}
.tb-h::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--t-y);box-shadow:0 0 18px rgba(255,230,0,.5)}
.tb-h i{position:absolute;top:50%;left:-22px;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:var(--t-y);box-shadow:0 6px 24px rgba(0,0,0,.5)}
.tb-h i::before,.tb-h i::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-4px;border:solid var(--t-carbon);border-width:0 0 2px 2px}
.tb-h i::before{left:11px;transform:rotate(45deg)}.tb-h i::after{right:11px;transform:rotate(-135deg)}
.tb input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.tb input:focus-visible~.tb-h i{outline:3px solid var(--t-white);outline-offset:3px}
.tb-tag{position:absolute;top:12px;padding:7px 10px;font:500 11px/1 var(--t-mono);letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.tb-tag.l{left:12px;background:rgba(21,22,27,.85);color:var(--t-white)}
.tb-tag.r{right:12px;background:var(--t-y);color:var(--t-carbon)}
.tb-hint{margin:10px 0 0;font:400 12px/1 var(--t-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--t-dim)}

.tc-bahero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center;padding-bottom:clamp(56px,7vw,110px);border-bottom:1px solid var(--t-hair)}
.tc-ab{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:clamp(28px,3vw,44px)}
.tc-ab-t{margin:0 0 12px;font-size:17px;line-height:1.3;color:var(--t-white)}
.tc-ab ul{margin:0;padding:0;list-style:none;font:400 13px/1.9 var(--t-mono);color:var(--t-mute)}
.tc-ab ul li::before{content:"· ";color:var(--t-dim)}
.tc-after{margin:0;font-weight:650;text-transform:uppercase;letter-spacing:-.04em;line-height:.92;font-size:clamp(26px,2.4vw,40px)}
.tc-after span{color:var(--t-y)}

.ts{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,72px);align-items:center;padding:clamp(56px,7vw,110px) 0;border-bottom:1px solid var(--t-hair)}
.ts.flip .ts-txt{order:2}
.ts-n{display:block;font:500 13px/1 var(--t-mono);letter-spacing:.14em;color:var(--t-y);margin-bottom:22px}
.ts dl{margin:0;display:grid;gap:18px}
.ts dt{font:500 11px/1 var(--t-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--t-dim);margin-bottom:8px}
.ts dd{margin:0;font-size:clamp(16px,1.2vw,18px);line-height:1.4;color:var(--t-mute)}
.ts dd.ts-after,.ts-after{margin:0;font-weight:650;text-transform:uppercase;letter-spacing:-.035em;line-height:.95;font-size:clamp(26px,2.5vw,42px);color:var(--t-white)}
.ts-after span{color:var(--t-y)}
.ts-tr{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:26px 0 0;font:500 12px/1 var(--t-mono);letter-spacing:.16em;text-transform:uppercase}
.ts-tr span{padding:8px 10px;border:1px solid var(--t-hair);color:var(--t-mute)}
.ts-tr span:last-child{border-color:var(--t-mint);color:var(--t-mint)}
.ts-tr i{font-style:normal;color:var(--t-y)}
.ts-why{margin:18px 0 0;font-size:16px;line-height:1.5;color:var(--t-mute);max-width:46ch}
.ts-gap{display:block;width:min(100%,520px);margin:22px 0 0;overflow:visible}
.ts-gap .g-tr{stroke:var(--t-hair);stroke-width:1.5}
.ts-gap .g-cn{stroke:var(--t-mint);stroke-width:3;stroke-dasharray:180;stroke-dashoffset:180;transition:stroke-dashoffset 1.6s var(--t-ease) .3s}
.ts-gap .g-now{fill:var(--t-white)}
.ts-gap .g-rd{fill:var(--t-carbon);stroke:var(--t-mint);stroke-width:3;transform:translateX(-178px);transition:transform 1.6s var(--t-ease) .3s}
.ts-gap .g-l{font:500 12px var(--t-mono);letter-spacing:.1em;fill:var(--t-white);text-anchor:middle}
.ts-gap .g-l.m{fill:var(--t-mint)}
.ts-gap .g-v{font:600 20px var(--t-sans);fill:var(--t-y);text-anchor:middle;opacity:0;transition:opacity .6s 1.6s}
.ts-gap .g-k{font:400 12px var(--t-mono);fill:var(--t-dim)}
.ts-gap.go .g-cn{stroke-dashoffset:0}.ts-gap.go .g-rd{transform:none}.ts-gap.go .g-v{opacity:1}

/* 04: the perception gap as a portfolio moment */
.ts-hero{display:block}
.ts-top{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.4fr);gap:clamp(20px,3vw,56px);align-items:end}
.ts-top .ts-n{margin:0}
.ts-bt{margin:0;font-size:17px;line-height:1.4;color:var(--t-mute)}
.pg{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;margin:clamp(36px,4vw,64px) 0 clamp(24px,3vw,40px)}
.pg-l,.pg-r{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,3vw,44px);transition:transform 2.4s var(--t-ease)}
.pg-l{background:var(--t-graph)}
.pg-r{background:var(--t-white);color:var(--t-carbon)}
.pg-who{font:500 12px/1 var(--t-mono);letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.pg b{font-weight:640;font-size:clamp(88px,14vw,240px);line-height:.8;letter-spacing:-.07em;font-variant-numeric:tabular-nums}
.pg-say{font-weight:600;font-size:clamp(20px,2vw,32px);text-transform:uppercase;letter-spacing:-.02em}
.pg-gap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:0;transition:width 2.4s var(--t-ease)}
.pg-gap i{flex:1;width:2px;background:var(--t-y);transform:scaleY(0);transition:transform 1.6s var(--t-ease) .9s}
.pg-gap span{writing-mode:vertical-rl;transform:rotate(180deg);font:500 12px/1 var(--t-mono);letter-spacing:.36em;text-transform:uppercase;color:var(--t-y);opacity:0;transition:opacity .8s 1.6s;white-space:nowrap}
.pg.go .pg-gap{width:clamp(56px,8vw,128px)}
.pg.go .pg-gap i{transform:none}.pg.go .pg-gap span{opacity:1}
.ts-wide{max-width:100%}
.ts-foot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,56px);align-items:start;margin-top:24px}
.ts-foot .ts-tr{margin:0}.ts-foot .ts-why{margin:0;max-width:70ch}

/* what changed */
.tc-wc{margin:0;border-top:1px solid var(--t-hair)}
.tc-wc div{display:grid;grid-template-columns:minmax(120px,2fr) minmax(0,8fr);gap:24px;align-items:baseline;padding:clamp(18px,2vw,28px) 0;border-bottom:1px solid var(--t-hair)}
.tc-wc dt{font:500 12px/1 var(--t-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--t-y)}
.tc-wc dd{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;font-size:clamp(20px,2.4vw,38px);letter-spacing:-.025em;color:var(--t-dim)}
.tc-wc dd i{font-style:normal;color:var(--t-mint)}
.tc-wc dd b{font-weight:600;color:var(--t-white);text-transform:uppercase}

/* live preview */
.tc-xp-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.tc-xp-head .tc-p{margin-bottom:22px}
.xp{background:#0E0F13;border-radius:4px;overflow:hidden;outline:1px solid var(--t-hair);box-shadow:0 60px 120px -60px rgba(0,0,0,.9)}
.xp-bar{display:flex;align-items:center;gap:16px;height:42px;padding:0 16px;font:400 12px/1 var(--t-mono);color:var(--t-mute)}
.xp-dots{display:flex;gap:7px}.xp-dots i{width:9px;height:9px;border-radius:50%;background:rgba(241,240,234,.18)}.xp-dots i:first-child{background:var(--t-y)}
.xp-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xp-bar a{display:inline-flex;gap:8px;font:500 11px/1 var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--t-white);white-space:nowrap}
.xp-bar a i{font-style:normal;color:var(--t-y)}
.xp-bar a:hover{color:var(--t-y)}
.xp-view{position:relative;aspect-ratio:16/9;background:var(--t-carbon)}
.xp-poster,.xp-view iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.xp-poster{object-fit:cover;transition:opacity .8s}
.xp-view iframe{opacity:0;pointer-events:none;transition:opacity .8s}
.xp.loaded iframe{opacity:1}.xp.loaded .xp-poster{opacity:0}
.xp.live iframe{pointer-events:auto}
.xp-shield{all:unset;position:absolute;inset:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding-top:clamp(16px,2vw,28px);transition:background .4s}
.xp-shield:hover{background:linear-gradient(rgba(21,22,27,.4),transparent 36%)}
.xp-cta{font:600 12px/1 var(--t-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--t-carbon);background:var(--t-y);padding:13px 18px}
.xp-shield small{font:400 12px/1 var(--t-mono);color:var(--t-white);opacity:0;transition:opacity .4s;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.xp-shield:hover small,.xp-shield:focus-visible small{opacity:.9}
.xp-shield:focus-visible{outline:2px solid var(--t-y);outline-offset:-2px}
.xp.live .xp-shield{display:none}
.xp-mob{display:none}
.xp.static .xp-shield{display:none}
.xp.static .xp-mob{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:6px;padding:18px;background:linear-gradient(transparent,rgba(21,22,27,.95));font:600 13px/1 var(--t-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--t-y)}
.xp.static .xp-mob small{font:400 11px/1 var(--t-mono);letter-spacing:.1em;color:var(--t-mute)}

/* built to respond: justified rows, every tile in a row shares one height */
.tr{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,36px);margin-top:clamp(32px,4vw,56px)}
.tr-row{display:flex;gap:clamp(12px,1.6vw,22px);align-items:flex-start}
.tr-i{margin:0;flex:var(--ar) 1 0;min-width:0;display:flex;flex-direction:column;gap:12px}
.tr-v{display:block;overflow:hidden;border-radius:3px;background:var(--t-graph);outline:1px solid var(--t-hair);outline-offset:-1px;aspect-ratio:var(--ar)}
.tr-v img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--t-ease)}
.tr-i:hover .tr-v img{transform:scale(1.03)}
.tr-i figcaption{font-size:14px;line-height:1.4;color:var(--t-mute)}
.tr-i figcaption b{display:block;color:var(--t-white);font-weight:600;font-size:16px}
.tr-lab{display:inline-block;margin-bottom:8px;font:500 11px/1 var(--t-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--t-y)}
.tr-i.ctl .tr-v{display:grid;place-items:center;padding:0 8%;background:radial-gradient(circle at 50% 50%,#25272E,var(--t-graph))}
.tr-i.ctl .tr-v img{width:100%;height:auto;object-fit:contain;border-radius:999px}

/* end */
.tc-end{position:relative;margin-top:clamp(96px,12vw,200px);padding:clamp(80px,10vw,170px) 0 clamp(64px,7vw,110px);overflow:hidden;border-top:1px solid var(--t-hair)}
.tc-end-bg{position:absolute;inset:0;opacity:.32;pointer-events:none}
.tc-end-bg img{width:100%;height:100%;object-fit:cover;object-position:right center}
.tc-end-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--t-carbon) 18%,rgba(21,22,27,.75) 55%,rgba(21,22,27,.2))}
.tc-end .tc-big{font-size:clamp(44px,7.4vw,128px)}
.tc-end .tc-big+.tc-big{margin-top:.32em}
.tc-end .tc-final{margin-top:.62em!important;font-size:clamp(52px,9vw,156px)}
.tc-small{margin:clamp(28px,3vw,44px) 0 0;font:500 12px/1 var(--t-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--t-mute)}
.tc-end-act{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:24px}
.tm-next{all:unset;cursor:pointer;display:inline-grid;grid-template-columns:auto auto;align-items:center;column-gap:14px;row-gap:6px;padding:17px 22px;border:1px solid rgba(241,240,234,.45);border-radius:2px;font:600 14px/1 var(--t-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--t-white);transition:border-color .3s,background .3s}
.tm-next small{grid-column:1/-1;font:400 11px/1 var(--t-mono);letter-spacing:.1em;color:var(--t-dim);text-transform:none}
.tm-next:hover{border-color:var(--t-white);background:rgba(241,240,234,.06)}
.tm-next i{font-style:normal;transition:transform .4s var(--t-ease)}
.tm-next:hover i{transform:translateX(5px)}
.tc-disc{margin:clamp(40px,5vw,72px) 0 0;max-width:70ch;font:400 12px/1.6 var(--t-mono);color:var(--t-dim)}

@media (max-width:1024px){
  .tc-flow{grid-template-columns:1fr 1fr}
  .tc-flow li::after{content:none}
  .tc-role{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .tc-pos,.tc-bahero,.ts,.tc-xp-head{grid-template-columns:1fr}
  .ts.flip .ts-txt{order:0}
  .ts-top{grid-template-columns:1fr}
  .ts-foot{grid-template-columns:1fr}
  .pg{grid-template-columns:1fr;gap:0}
  .pg-gap{width:auto!important;flex-direction:row;height:56px}
  .pg-gap i{height:2px;width:auto;flex:1}
  .pg-gap span{writing-mode:horizontal-tb;transform:none}
  .tr-row{flex-direction:column}
  .tr-i{flex:none;width:100%}
  .tc-wc div{grid-template-columns:1fr;gap:10px}
}
@media (max-width:560px){
  .tc-flow{grid-template-columns:1fr}
  .tc-role,.tc-ab{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .tc-l>span{transform:none;transition:none}
  .ts-gap .g-cn{stroke-dashoffset:0}.ts-gap .g-rd{transform:none}.ts-gap .g-v{opacity:1}
  .pg-gap{width:clamp(56px,8vw,128px)}.pg-gap i{transform:none}.pg-gap span{opacity:1}
}

/* ================= TRANSFORMATION STUDIES (home): series index + study 03 ================= */
.tsr{list-style:none;margin:0 0 clamp(36px,4vw,56px);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2);opacity:0;transform:translateY(20px);transition:opacity .9s var(--e),transform 1s var(--e)}
.tsr.in{opacity:1;transform:none}
.tsr li{border-bottom:1px solid var(--line-2)}
.tsr li+li{border-left:1px solid var(--line-2)}
.tsr a{display:block;padding:20px 20px 22px;height:100%;box-sizing:border-box;transition:background .3s}
.tsr a:hover{background:var(--navy-2)}
.tsr .n{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.tsr i{font-style:normal}
.tsr b{display:block;color:var(--fg);font-weight:500;font-size:clamp(17px,1.4vw,21px);line-height:1.2;letter-spacing:-.01em}
.tsr .x{display:block;margin-top:8px;font-size:14px;color:var(--fg-3)}
.tsr li:nth-child(2) .n{color:#B6F500}
.tsr li.t a{background:#15161B}
.tsr li.t .n{color:#FFE600;font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em}
.tsr li.t b{font-family:"Inter Tight","Satoshi",sans-serif;font-weight:640;text-transform:uppercase;letter-spacing:-.03em}
.tsr li.t b i{color:#43E1C1}
.tsr li.t a:hover{background:#1C1D23}

.tsx{margin-top:clamp(40px,5vw,72px);width:100vw;margin-left:calc(50% - 50vw);background:var(--t-carbon);color:var(--t-white);font-family:var(--t-sans);padding:clamp(40px,5vw,72px) max(var(--gut),calc((100vw - var(--max)) / 2 + var(--gut)));box-sizing:border-box;opacity:0;transform:translateY(24px);transition:opacity 1s var(--t-ease),transform 1.1s var(--t-ease)}
.tsx.in{opacity:1;transform:none}
.tsx .y{color:var(--t-y)}
.tsx-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--t-hair);font:500 12px/1.3 var(--t-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t-mute)}
.tsx-bar .k{color:var(--t-y)}
.tsx-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3em .4em;margin:clamp(28px,3vw,44px) 0;font-weight:650;text-transform:uppercase;letter-spacing:-.045em;line-height:.9;font-size:clamp(38px,5.6vw,92px)}
.tsx-line i{font-style:normal;color:var(--t-mint)}
.tsx-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:center}
.tsx-t{margin:0 0 12px;font-size:17px;line-height:1.3}
.tsx-before ul{margin:0 0 28px;padding:0;list-style:none;font:400 13px/1.9 var(--t-mono);color:var(--t-mute)}
.tsx-before ul li::before{content:"· ";color:var(--t-dim)}
.tsx-moves{list-style:none;margin:clamp(32px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.tsx-moves a{display:flex;flex-direction:column;gap:10px}
.tsx-moves .th{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:2px;outline:1px solid var(--t-hair);outline-offset:-1px}
.tsx-moves .th img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--t-ease)}
.tsx-moves a:hover .th img{transform:scale(1.05)}
.tsx-moves .mv{font:500 11px/1.45 var(--t-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t-mute)}
.tsx-moves .mv i{display:block;font-style:normal;color:var(--t-y);margin-bottom:4px}
.tsx-moves .mv em{font-style:normal;color:var(--t-y);margin:0 5px}
.tsx-moves .mv b{color:var(--t-mint);font-weight:500}
.tsx-moves li.hot .th{outline:2px solid var(--t-y)}
.tsx-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:clamp(32px,4vw,52px);padding-top:clamp(20px,2vw,28px);border-top:1px solid var(--t-hair)}
.tsx-foot .tm-disc{flex-basis:100%}
@media (max-width:1024px){.tsx-moves{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.tsr{grid-template-columns:1fr}.tsr li+li{border-left:0}.tsx-grid{grid-template-columns:1fr}}
@media (max-width:560px){.tsx-moves{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.tsr,.tsx{opacity:1;transform:none;transition:none}}