/* 3B Studio — website v3
   Structure after koto.com. Type follows the 3B system:
   Heading = Codec Pro Heavy Italic, 1.3x the subheading
   Subheading = Codec Pro Bold Italic, 1.2x the body
   Body = Codec Pro News */
@font-face{font-family:Codec;src:url(fonts/Light.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Codec;src:url(fonts/News.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Codec;src:url(fonts/BoldItalic.woff2) format('woff2');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:Codec;src:url(fonts/ExtraBoldItalic.woff2) format('woff2');font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:Codec;src:url(fonts/HeavyItalic.woff2) format('woff2');font-weight:900;font-style:italic;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#0F0B1F;--card:#1A1433;--card2:#251C4A;--line:rgba(168,156,255,.16);
  --ink:#F4F2FB;--mute:#9A92C4;--lav:#A89CFF;--studio:#473189;--sig:#FC6321;
  --m:clamp(16px,2.2vw,32px);--gut:clamp(12px,1.4vw,22px);--r:clamp(10px,1vw,16px);
  --ease:cubic-bezier(.2,.7,.2,1);
  /* type system: body -> sub (x1.2) -> heading (x1.3) */
  --b:clamp(15px,1.05vw,17px);
  --s:calc(var(--b)*1.2);
  --h:calc(var(--s)*1.3);
  /* display tiers keep the same 1.3 heading:sub ratio */
  --d1:clamp(40px,5vw,86px);
  --d2:clamp(32px,3.6vw,60px);
  --d3:clamp(22px,2vw,34px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{font-family:Codec,system-ui,sans-serif;font-weight:400;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:var(--b);line-height:1.55}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--sig);outline-offset:3px}
h1,h2,h3,h4{font-weight:900;font-style:italic;text-wrap:balance}
p{text-wrap:pretty}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:300;background:var(--sig);color:#fff;padding:10px 16px;border-radius:6px;transition:top .2s}
.skip:focus{top:12px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
.sw,.sww{display:inline-block}.sww{white-space:nowrap}
[data-rise]{display:block}

/* ---- the type system ---- */
.H{font-weight:900;font-style:italic;letter-spacing:-.025em;line-height:.94;font-size:var(--h)}
.S{font-weight:700;font-style:italic;letter-spacing:-.012em;line-height:1.08;font-size:var(--s);color:var(--mute)}
.B{font-weight:400;font-size:var(--b);line-height:1.6}
.D1.H{font-size:var(--d1)}.D1.S,.D1 .S{font-size:calc(var(--d1)/1.3)}
.D2.H{font-size:var(--d2)}.D2.S,.D2 .S{font-size:calc(var(--d2)/1.3)}
.D3.H{font-size:var(--d3)}.D3.S,.D3 .S{font-size:calc(var(--d3)/1.3)}
.ink{color:var(--ink)}.sig{color:var(--sig)}.mute{color:var(--mute)}
.lbl{font-weight:400;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.lbl b{font-weight:400;color:var(--sig)}

/* header */
.hd{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;gap:14px;padding:var(--m);pointer-events:none;transition:translate .5s var(--ease),background-color .4s,padding .4s}
.hd.s{background:rgba(15,11,31,.9);backdrop-filter:blur(14px);padding-top:12px;padding-bottom:12px}
.hd>*{pointer-events:auto}
.hd.hide{translate:0 -130%}
.logo{display:flex;align-items:center;gap:10px;margin-right:auto}
.logo img{width:30px;height:auto}
.logo span{font-weight:900;font-style:italic;font-size:19px;letter-spacing:-.02em}
.logo span i{color:var(--sig)}
.navl{display:flex;gap:2px;background:rgba(15,11,31,.72);backdrop-filter:blur(14px);border-radius:8px;padding:4px}
.navl a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:12px 14px;border-radius:6px;color:var(--mute);transition:color .25s,background-color .25s}
.navl a:hover,.navl a.on{color:var(--ink);background:var(--card2)}
.mbtn{height:44px;padding:0 18px;border-radius:8px;background:var(--card2);font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:none;align-items:center}
.hello{height:44px;padding:0 18px;border-radius:8px;background:var(--ink);color:var(--bg);font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;transition:background-color .25s,color .25s;translate:var(--gx,0px) var(--gy,0px)}
.hello:hover{background:var(--sig);color:#fff}
.menu{position:fixed;inset:0;z-index:90;background:var(--bg);padding:100px var(--m) 40px;display:flex;flex-direction:column;justify-content:space-between;visibility:hidden;opacity:0;transition:opacity .4s,visibility .4s}
.menu-open .menu{visibility:visible;opacity:1}
.menu ul{list-style:none}
.menu li{border-top:1px solid var(--line)}
.menu li a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0}
.menu li a .H{font-size:clamp(36px,9vw,56px)}

/* ===== HOME ===== */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:clip;background:#0B0817}
.hero .glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.hero .g1{width:46vw;height:46vw;background:#473189;left:40%;top:4%;opacity:.6}
.hero .g2{width:20vw;height:20vw;background:#FC6321;left:72%;top:54%;opacity:.32}
.hero .swirl{position:absolute;left:68%;top:52%;width:min(34vw,540px);height:auto;filter:drop-shadow(0 60px 80px rgba(0,0,0,.55))}
.hero .streak{position:absolute;left:0;height:1px;width:80vw;background:linear-gradient(90deg,transparent,rgba(168,156,255,.8),transparent);opacity:0}
.hero .ttl{position:absolute;left:var(--m);bottom:clamp(30px,4.4vw,64px);z-index:3}
.hero .ttl .S{color:var(--mute);margin-top:.06em}
.hero .side{position:absolute;right:var(--m);bottom:clamp(30px,4.4vw,64px);z-index:3;text-align:right;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.hero .cue{display:flex;align-items:center;gap:10px}
.hero .cue i{display:block;width:1px;height:42px;background:var(--line);position:relative;overflow:hidden}
.hero .cue i:after{content:'';position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--sig);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{to{top:100%}}
.intro{padding:clamp(90px,10vw,170px) var(--m) clamp(100px,12vw,200px)}
.intro p{max-width:1250px;line-height:1.12}

.work{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:var(--gut);padding:0 var(--m)}
.work .stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:112px 0 var(--m)}
.work .now{display:block;overflow:hidden}
.work .count{margin-top:22px;font-variant-numeric:tabular-nums}
.work .desc{max-width:450px}
.mini{display:flex;gap:14px;align-items:center;margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.mini img{width:64px;height:64px;object-fit:cover;border-radius:6px}
.mini .t b{display:block;font-weight:700;font-style:italic}
.mini .ar{margin-left:auto;color:var(--sig);font-size:20px}
.cards{display:flex;flex-direction:column;gap:clamp(48px,6vw,96px);padding:112px 0 120px}
.card{display:block}
.card .m{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--card)}
.card .m img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;transition:scale 1.2s var(--ease)}
.card:hover .m img{scale:1.035}
.card .m .solid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.card .badge{position:absolute;left:14px;top:14px;z-index:2;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;border-radius:5px;background:rgba(15,11,31,.78);backdrop-filter:blur(8px)}
.card .badge.mfr{background:var(--sig);color:#fff}
.card .cap{display:flex;justify-content:space-between;gap:20px;margin-top:16px}
.card .cap .H{font-size:calc(var(--h)*1.05)}
.card .cap .S{font-size:calc(var(--s)*1.05);margin-top:4px}
.card .cap .ar{color:var(--mute);transition:color .25s,translate .3s var(--ease);white-space:nowrap}
.card:hover .cap .ar{color:var(--sig);translate:3px -3px}
.card .desc-m{display:none}
.all{display:flex;justify-content:space-between;align-items:center;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:color .25s}
.all:hover{color:var(--sig)}

/* method: pinned kinetic type */
.method{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:#0B0817;margin-top:clamp(60px,8vw,120px)}
.method .in{position:absolute;inset:0;padding:110px var(--m) var(--m);display:grid;grid-template-rows:auto 1fr auto}
.method .top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.method .stage{position:relative;display:flex;align-items:center}
.method .word{position:absolute;left:0;font-weight:900;font-style:italic;letter-spacing:-.045em;line-height:.85;font-size:clamp(90px,19vw,340px);white-space:nowrap}
.method .bot{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);border-top:1px solid var(--line);padding-top:18px}
.method .step{opacity:.42;transition:opacity .4s}
.method .step.on{opacity:1}
.method .step .S{color:var(--ink)}
.method .step .B{color:var(--mute);margin-top:8px;max-width:380px}
.method .bar{position:absolute;left:0;top:-1px;height:2px;background:var(--sig);width:0}
.vcg{margin:var(--gut) var(--m) 0;border-radius:var(--r);background:var(--sig);color:#0F0B1F;padding:clamp(28px,4vw,64px);display:grid;grid-template-columns:1.1fr 1fr;gap:var(--gut);align-items:end}
.vcg .S{color:rgba(15,11,31,.7)}

.sec{padding:clamp(100px,12vw,200px) var(--m) 0}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(32px,4vw,56px)}
.rows{border-top:1px solid var(--line)}
.rowc{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);padding:22px 0 46px;border-bottom:1px solid var(--line);position:relative}
.rowc .r{display:flex;flex-direction:column;gap:4px}
.rowc .r a,.rowc .r button{color:var(--mute);text-align:left;transition:color .25s,translate .3s var(--ease);font-weight:700;font-style:italic;font-size:var(--s)}
.rowc .r a:hover,.rowc .r button:hover{color:var(--ink);translate:6px 0}
.studio{margin:clamp(80px,9vw,140px) var(--m) 0;position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/8;min-height:440px;background:var(--studio)}
.studio img{position:absolute;inset:0;width:100%;height:110%;object-fit:cover;object-position:50% 72%}
.studio:after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(11,8,23,.88),rgba(11,8,23,0) 55%)}
.studio .tl,.studio .bl,.studio .br{position:absolute;z-index:2}
.studio .tl{left:clamp(16px,2vw,28px);top:clamp(16px,2vw,28px)}
.studio .bl{left:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px)}
.studio .br{right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);text-align:right}
.clock{font-weight:900;font-style:italic;font-size:clamp(46px,6vw,104px);line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.clock small{font-size:.4em;color:var(--sig)}
.ft{padding:clamp(100px,12vw,180px) var(--m) var(--m)}
.ft .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--gut);padding-top:22px;border-top:1px solid var(--line)}
.ft ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.ft ul a{color:var(--mute);transition:color .25s}.ft ul a:hover{color:var(--ink)}
.ft .mark{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:clamp(70px,9vw,140px)}
.ft .mark .H{font-size:clamp(64px,13vw,240px);letter-spacing:-.045em;line-height:.8}
.ft .mark img{width:clamp(70px,8vw,130px)}
.ft .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:22px;font-size:13px;color:var(--mute)}

/* ===== CASE STUDY ===== */
.cs{display:grid;grid-template-columns:minmax(230px,.3fr) minmax(0,1fr);gap:var(--gut);padding:0 var(--m)}
.aside{position:sticky;top:0;height:100vh;height:100svh;padding:104px 0 var(--m);display:flex;flex-direction:column;gap:0}
.aside h1{margin-bottom:4px}
.crumb{margin-bottom:22px}
.crumb a:hover{color:var(--ink)}
.aside .S{margin-top:6px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.tags span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:6px 9px;border-radius:5px;background:var(--card2);color:var(--lav)}
.tags span.mfr{background:var(--sig);color:#fff}
.toc{list-style:none;margin-top:clamp(24px,3.4vh,44px);display:flex;flex-direction:column;gap:0;position:relative}
.toc a{display:grid;grid-template-columns:30px 1fr;align-items:center;padding:5px 0 5px 10px;color:var(--mute);font-size:15px;border-left:2px solid var(--line);transition:color .25s,border-color .25s}
.toc .tn{font-size:11px;letter-spacing:.1em;font-variant-numeric:tabular-nums;color:var(--mute)}
.toc a.on{border-left-color:var(--sig)}.toc a.on .tn{color:var(--sig)}
.toc a.on{color:var(--ink)}
.toc a:hover{color:var(--ink)}
.aside .foot{margin-top:auto;font-size:13px;color:var(--mute)}
.aside .prog{height:2px;background:var(--line);margin-top:14px;border-radius:2px;overflow:hidden}
.aside .prog i{display:block;height:100%;width:100%;background:var(--sig);transform-origin:0 50%;transform:scaleX(0)}
.main{padding:96px 0 0;min-width:0}
.mc{border-radius:var(--r);overflow:hidden;background:var(--card);position:relative}
.mc img{width:100%;height:100%;object-fit:cover}
.panel{border-radius:var(--r);overflow:hidden;position:relative}
.blk{padding:clamp(80px,9vw,140px) 0 clamp(26px,3vw,40px)}
.blk>.lbl{display:flex;justify-content:space-between;margin-bottom:20px;padding-top:14px;border-top:1px solid var(--line)}
.tx{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut)}
.tx .S{margin-top:.1em}
.tx .b{display:flex;flex-direction:column;gap:14px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);margin-top:var(--gut)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);margin-top:var(--gut)}
.g2 .mc,.g3 .mc{aspect-ratio:4/5}
.wide{aspect-ratio:16/9;margin-top:var(--gut)}

/* opener — Hiiiiii GUYS */
.open{background:#F8B600;aspect-ratio:16/9;min-height:440px}
.open .pack{position:absolute;left:0;bottom:0;height:100%;width:auto;-webkit-mask-image:linear-gradient(90deg,#000 96%,transparent),linear-gradient(0deg,#000 80%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 96%,transparent),linear-gradient(0deg,#000 80%,transparent);mask-composite:intersect}
.open .pack img{display:block;height:100%;width:auto}
.open .hi{position:absolute;left:59%;top:50%;translate:0 -50%;font-size:clamp(46px,6vw,112px);rotate:-7deg;z-index:2}
.open .bar{position:absolute;left:-.14em;right:-60vw;top:.06em;height:.8em;background:#00DDB5;z-index:-1;transform-origin:100% 50%}
.open .w1,.open .w2{display:block;font-weight:900;font-style:italic;color:#3333CB;letter-spacing:-.035em;line-height:.92}
.open .w2{margin-left:.42em;margin-top:.04em}
.open .tagline{position:absolute;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,24px);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#160F2E;z-index:3}
.facts{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gut);margin-top:var(--gut);padding-top:16px;border-top:1px solid var(--line)}
.facts .H{font-size:var(--d3);font-variant-numeric:tabular-nums}
.facts .lbl{display:block;margin-top:6px}

/* pinned scenes */
.scene{position:relative;aspect-ratio:16/10;min-height:520px;max-height:90vh;border-radius:var(--r);overflow:hidden;margin-top:var(--gut)}
.newb{background:#3333CB}
.newb .wh{position:absolute;inset:0;background:#00DDB5;display:flex;align-items:center;justify-content:center;z-index:3}
.newb .wh span{position:relative;display:block;font-weight:900;font-style:italic;letter-spacing:-.04em;line-height:.8;color:#E44C10;transform:rotate(-6deg)}
.newb .wh .a{font-size:clamp(90px,15vw,260px)}
.newb .wh .b{font-size:clamp(56px,9vw,150px);margin-left:-.6em}
.newb .wh .blk1,.newb .wh .blk2{position:absolute;background:#FFC41D;z-index:-1}
.newb .pile{position:absolute;inset:0}
.newb .pile span{position:absolute;font-weight:900;font-style:italic;font-size:clamp(18px,2vw,34px);line-height:.9;color:#00DDB5;white-space:nowrap;text-shadow:2px 2px 0 #160F2E}
.newb .big{position:absolute;left:50%;top:50%;translate:-50% -50%;text-align:center;z-index:2;pointer-events:none}
.newb .big b{display:block;font-weight:900;font-style:italic;letter-spacing:-.04em;line-height:.8;color:#fff;font-size:clamp(70px,12vw,210px);text-shadow:6px 6px 0 #160F2E;transform:rotate(-6deg)}

/* tagline machine */
.tagm{border-radius:var(--r);background:#00DDB5;color:#160F2E;padding:clamp(28px,4vw,64px);margin-top:var(--gut);min-height:clamp(320px,30vw,480px);display:flex;flex-direction:column;justify-content:space-between;gap:30px;transition:background-color .6s var(--ease),color .6s}
.tagm .line{font-weight:900;font-style:italic;font-size:clamp(52px,7.4vw,136px);line-height:.88;letter-spacing:-.04em}
.tagm .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.12em .2em .16em .04em;margin:-.12em -.2em -.16em -.04em}
.tagm .w span{display:inline-block}
.tagm .ctrl{display:flex;flex-wrap:wrap;gap:6px}
.tagm .ctrl button{font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:10px 13px;border-radius:6px;background:rgba(22,15,46,.12);transition:background-color .25s,color .25s}
.tagm .ctrl button[aria-pressed=true]{background:#160F2E;color:#fff}
.tagm .tbar{height:3px;background:rgba(22,15,46,.15);border-radius:2px;overflow:hidden}
.tagm .tbar i{display:block;height:100%;background:#160F2E;transform-origin:0 50%;transform:scaleX(0)}
.locks{background:#fff;border-radius:var(--r);margin-top:var(--gut);padding:clamp(28px,4vw,64px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,40px);align-items:center}
.locks .main{grid-column:1/-1;display:flex;justify-content:center;padding-bottom:clamp(18px,2.4vw,40px)}
.locks .main img{width:min(70%,760px)}
.locks img{width:100%;height:auto}
/* voice */
.vband{overflow:hidden;margin-top:var(--gut);border-radius:var(--r);background:#E44C10;padding:clamp(14px,1.6vw,24px) 0;display:flex;flex-direction:column;gap:4px}
.vband .row{display:flex;gap:.6em;width:max-content;font-weight:900;font-style:italic;font-size:clamp(28px,3.6vw,62px);line-height:1;letter-spacing:-.03em;color:#fff;white-space:nowrap}
.vband .row:nth-child(even){color:#FFC41D}
.voice{border-radius:var(--r);background:var(--card);padding:clamp(24px,3vw,48px);margin-top:var(--gut)}
.voice table{width:100%;border-collapse:collapse}
.voice th{font-weight:400;text-align:left;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding:0 0 12px}
.voice td{padding:18px 0;border-top:1px solid var(--line);font-weight:700;font-style:italic;font-size:var(--s);vertical-align:top}
.voice td:first-child{color:var(--mute);width:46%;position:relative}
.voice td:first-child s{text-decoration:none;position:relative}
.voice td:first-child s{text-decoration:line-through;text-decoration-color:var(--sig);text-decoration-thickness:2px}
.voice .rules{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gut);margin-top:28px}
.voice .rules div{border-top:1px solid var(--line);padding-top:12px}
/* audience */
.aud{background:#3333CB;color:#fff;padding:clamp(28px,4vw,64px);margin-top:var(--gut);display:grid;grid-template-columns:1.2fr 1fr;gap:var(--gut);align-items:end}
.aud .chips{display:flex;flex-wrap:wrap;gap:8px}
.aud .chips span{font-weight:700;font-style:italic;font-size:var(--s);padding:10px 16px;border-radius:999px;background:#FFC41D;color:#160F2E}
.aud .chips span:nth-child(3n+2){background:#00DDB5}.aud .chips span:nth-child(3n){background:#FF96D3}
/* logo */
.tile{border-radius:var(--r);display:flex;align-items:center;justify-content:center;padding:clamp(28px,5vw,90px);position:relative;overflow:hidden}
.tile img{max-width:100%;height:auto}
.lg-main{background:#fff;aspect-ratio:16/8;margin-top:var(--gut)}
.lg-main .logo-w{position:relative;width:min(80%,940px)}
.lg-main svg{display:block;width:100%;height:auto;overflow:visible}
.lg-main svg rect,.lg-main svg path,.lg-main svg line{fill:none;stroke:#E44C10;stroke-width:1.2;vector-effect:non-scaling-stroke}
.lg-main svg .in{stroke-dasharray:6 6;stroke:rgba(228,76,16,.55)}
.lg-main svg .xq{fill:rgba(228,76,16,.08)}
.lg-main svg .ap{fill:#fff;stroke:#E44C10;stroke-width:1.5;vector-effect:non-scaling-stroke}
.lg-main svg text{fill:#E44C10;font-family:'Codec Pro',sans-serif;font-style:italic;font-weight:700}
.lg-main .cap{position:absolute;left:clamp(16px,2vw,28px);bottom:clamp(14px,2vw,22px);color:#160F2E}
.lg-main .cap.r{left:auto;right:clamp(16px,2vw,28px)}
.repro{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);margin-top:var(--gut)}
.repro .tile{aspect-ratio:1/1;padding:clamp(18px,2.4vw,36px);flex-direction:column;gap:14px;justify-content:space-between;align-items:stretch}
.repro .tile .ph{flex:1;display:flex;align-items:center;justify-content:center}
.repro .tile .lbl{color:inherit;opacity:.7}
.stripes{background:linear-gradient(180deg,#00DDB5 0 20%,#E44C10 20% 40%,#3333CB 40% 60%,#FF96D3 60% 80%,#FFC41D 80%)}
.mono-b{filter:brightness(0)}
.mono-w{filter:brightness(0) invert(1)}
/* colour */
.cass{background:#F6F3EC;margin-top:var(--gut);aspect-ratio:16/8;display:grid;grid-template-columns:1fr 1fr;align-items:center}
.cass .stack{position:relative;height:100%}
.cass .cs1{position:absolute;inset:6% 0 6% 6%;display:flex;align-items:center;justify-content:center}
.cass .cs1 img{max-height:100%;width:auto}
.cass .info{padding:clamp(20px,3vw,48px);color:#160F2E}
.cols5{display:grid;grid-template-columns:45fr 25fr 10fr 10fr 10fr;gap:4px;margin-top:var(--gut);border-radius:var(--r);overflow:hidden;min-height:clamp(260px,26vw,400px)}
.cols5 button{padding:clamp(12px,1.4vw,20px);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;color:#160F2E;font-size:13px;text-align:left;cursor:copy}
.cols5 button b{font-weight:900;font-style:italic;font-size:clamp(30px,3.2vw,56px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.cols5 .dk{color:#fff}
/* stickers + badges */
.board{position:relative;background:#F6F3EC;margin-top:var(--gut);height:86vh;height:86svh;overflow:hidden;touch-action:pan-y}
.board .stk{position:absolute;width:clamp(120px,12.5vw,220px);filter:drop-shadow(0 14px 18px rgba(30,20,60,.25));user-select:none;-webkit-user-drag:none}
.board .hint{position:absolute;left:clamp(16px,2vw,28px);bottom:clamp(14px,2vw,24px);color:#160F2E;opacity:.6}
.board .rule{position:absolute;right:clamp(16px,2vw,28px);bottom:clamp(14px,2vw,24px);color:#160F2E;opacity:.6;text-align:right}
.board .lg{position:absolute;left:50%;top:50%;width:min(42%,540px);transform:translate(-50%,-50%);pointer-events:none}
.spin{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);margin-top:var(--gut)}
.spin .tile{aspect-ratio:1/1}
.spin .rec{width:84%}
.belt{overflow:hidden;margin-top:var(--gut);border-radius:var(--r);background:#3333CB;padding:clamp(20px,2.4vw,36px) 0}
.belt .tr{display:flex;gap:clamp(16px,2vw,32px);width:max-content}
.belt img{width:clamp(130px,12vw,200px);flex:none}
.pat{overflow:hidden;margin-top:var(--gut);border-radius:var(--r);background:#F6F3EC;padding:clamp(18px,2vw,30px) 0;display:flex;flex-direction:column;gap:6px}
.pat .row{display:flex;gap:.5em;width:max-content;font-weight:900;font-style:italic;font-size:clamp(34px,5vw,86px);line-height:1;letter-spacing:-.035em;white-space:nowrap}
.pat .row span:nth-child(5n+1){color:#00DDB5}.pat .row span:nth-child(5n+2){color:#E44C10}.pat .row span:nth-child(5n+3){color:#3333CB}.pat .row span:nth-child(5n+4){color:#FF96D3}.pat .row span:nth-child(5n){color:#FFC41D}
/* experience: stacked panels */
.xstack{margin-top:var(--gut);display:flex;flex-direction:column;gap:var(--gut)}
.xp{position:sticky;top:clamp(70px,8vh,96px);height:min(78vh,760px);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;color:#160F2E;transform-origin:50% 0}
.xp .c{padding:clamp(20px,2.6vw,40px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.xp .ghost{display:none;position:absolute;right:-.06em;bottom:-.18em;font-weight:900;font-style:italic;font-size:clamp(120px,16vw,280px);line-height:.8;letter-spacing:-.05em;opacity:.12;pointer-events:none}
.xp h3{font-weight:900;font-style:italic;font-size:clamp(64px,8vw,150px);line-height:.82;letter-spacing:-.045em;position:relative}
.xp .S{color:inherit;opacity:.85}
.xp ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.xp li{font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;border-radius:5px;background:rgba(22,15,46,.12)}
.xp .mc{border-radius:0}
/* world gallery */
.hz{overflow:hidden;margin-top:var(--gut)}
.hz .tr{display:flex;gap:var(--gut);width:max-content}
.hz figure{flex:none;width:clamp(260px,26vw,440px)}
.hz figure .mc{aspect-ratio:4/5}
.hz figcaption{margin-top:10px}
/* closing */
.close{background:#E44C10;color:#fff;padding:clamp(40px,7vw,120px) clamp(24px,4vw,64px);margin-top:var(--gut)}
.close .H{font-size:var(--d2)}
.close .S{color:#FFC41D;font-size:calc(var(--d2)/1.3);margin-top:.12em}
.cred{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);padding-top:16px;border-top:1px solid var(--line);margin-top:var(--gut)}
.cred dd{margin-top:6px;font-weight:700;font-style:italic;font-size:var(--s)}
.nextp{display:block;margin-top:clamp(80px,9vw,140px)}
.nextp .mc{aspect-ratio:21/9}
.nextp .mc img{transition:scale 1.2s var(--ease)}
.nextp:hover .mc img{scale:1.03}

/* cursor */
.cur{position:fixed;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--sig);z-index:400;pointer-events:none;display:flex;align-items:center;justify-content:center;opacity:0;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),opacity .25s}
.cur b{font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .2s}
.cur.on{opacity:1}.cur.big{width:86px;height:86px;margin:-43px 0 0 -43px}.cur.big b{opacity:1}

@media (max-width:1000px){
  .navl{display:none}.mbtn{display:inline-flex}
  .hero .swirl{width:80vw;left:50%;top:38%}
  .hero .side{display:none}
  .work{grid-template-columns:1fr}
  .work .stick{position:relative;height:auto;padding:0 0 8px}
  .work .stick .desc,.work .stick .mini,.work .now,.work .count,.work .stick .made{display:none!important}
  .cards{padding:22px 0 60px}
  .card .desc-m{display:block;margin-top:10px;opacity:.85}
  .method .bot{grid-template-columns:1fr}.method .step{display:none}.method .step.on{display:block}
  .vcg{grid-template-columns:1fr}
  .rowc{grid-template-columns:1fr;gap:8px;padding:18px 0 28px}
  .studio{aspect-ratio:auto;height:112vw;min-height:0}
  .ft .cols{grid-template-columns:1fr 1fr}.ft .cols>div:first-child{grid-column:1/-1;margin-bottom:24px}
  .cs{grid-template-columns:1fr}
  .aside{position:relative;height:auto;padding:92px 0 10px}
  .toc{flex-direction:row;overflow-x:auto;gap:16px;scrollbar-width:none;margin-top:20px;padding:8px 0}
  .toc a{flex:none;font-size:14px}
  .aside .foot,.aside .prog{display:none}
  .tx,.g2,.spin,.aud,.cass{grid-template-columns:1fr}
  .cass{aspect-ratio:auto}.cass .stack{height:70vw}
  .g3{grid-template-columns:1fr 1fr}
  .open{aspect-ratio:auto;height:118vw;min-height:0}.open .pack{height:72%;top:auto}.open .hi{left:12%;top:20%;font-size:16vw}
  .facts{grid-template-columns:repeat(3,1fr);row-gap:20px}
  .repro{grid-template-columns:1fr 1fr}
  .locks{grid-template-columns:1fr 1fr}
  .cols5{grid-template-columns:1fr;min-height:0}.cols5 button{min-height:84px;flex-direction:row;align-items:flex-end;justify-content:space-between}
  .voice .rules{grid-template-columns:1fr 1fr}
  .xp{grid-template-columns:1fr;height:auto;position:relative;top:auto}.xp .mc{aspect-ratio:4/3}
  .pil .item{grid-template-columns:1fr}
  .cred{grid-template-columns:1fr 1fr;row-gap:18px}
  .board{height:124vw}
  .lg-main{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}}
/* VCG — signature service, full scene like the method */
.vcgs{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:var(--sig);color:#0F0B1F;margin-top:var(--gut)}
.vcgs .in{position:absolute;inset:0;padding:110px var(--m) var(--m);display:grid;grid-template-rows:auto 1fr auto}
.vcgs .top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.vcgs .lbl{color:rgba(15,11,31,.7)}
.vcgs .mark{font-weight:900;font-style:italic;letter-spacing:-.05em;line-height:.8;font-size:clamp(110px,22vw,400px);position:relative}
.vcgs .mark sup{font-size:.18em;vertical-align:top;letter-spacing:0}
.vcgs .exp{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.vcgs .exp span{display:block;font-weight:700;font-style:italic;font-size:calc(var(--d3)/1.3);line-height:1.05;opacity:.8}
.vcgs .exp span b{font-weight:900}
.vcgs .mid{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,70px);align-items:center}
.vcgs .rot{font-weight:900;font-style:italic;font-size:var(--d2);line-height:.95;letter-spacing:-.03em}
.vcgs .rot .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.12em .2em .16em .04em;margin:-.12em -.2em -.16em -.04em}
.vcgs .rot .w span{display:inline-block;color:#fff}
.vcgs .bot{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);border-top:1px solid rgba(15,11,31,.25);padding-top:18px;position:relative}
.vcgs .step{opacity:.4;transition:opacity .4s}
.vcgs .step.on{opacity:1}
.vcgs .step .S{color:#0F0B1F}
.vcgs .step .B{color:rgba(15,11,31,.75);margin-top:8px;max-width:380px}
.vcgs .bar{position:absolute;left:0;top:-1px;height:2px;background:#0F0B1F;width:0}
@media (max-width:1000px){.vcgs .mid{grid-template-columns:1fr}.vcgs .bot{grid-template-columns:1fr}.vcgs .step{display:none}.vcgs .step.on{display:block}}
/* team + studio (v3) */
.team{margin:var(--gut) var(--m) 0;border-radius:var(--r);background:#483189;overflow:hidden;display:grid;grid-template-columns:1fr 2.2fr;align-items:end}
.team .t{padding:clamp(24px,3vw,48px);align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.team .t .S{color:var(--lav)}
.team img{width:100%;height:auto;display:block}
.studio{aspect-ratio:16/8;background:radial-gradient(ellipse at 50% 60%,#5a40b0 0%,#473189 45%,#2e1f5e 100%)}
.studio img.vox{position:absolute;inset:auto;left:50%;top:50%;width:min(74%,1000px);height:auto;transform:translate(-50%,-50%);object-fit:contain;filter:drop-shadow(0 40px 60px rgba(10,5,30,.45))}
.studio:after{background:linear-gradient(to top,rgba(11,8,23,.6),rgba(11,8,23,0) 40%)}
@media (max-width:1000px){.team{grid-template-columns:1fr}.studio img.vox{width:88%;top:44%}}

/* pillars — plays like a story */
.pil{background:#00DDB5;color:#160F2E;margin-top:var(--gut);padding:clamp(20px,3vw,48px);display:flex;flex-direction:column;gap:clamp(24px,4vw,64px);min-height:clamp(480px,46vw,720px);transition:background-color .7s var(--ease),color .7s}
.pil .ptop{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,48px);align-items:center}
.pil .five{display:flex;align-items:center;gap:.25em}
.pil .five b{font-weight:900;font-style:italic;font-size:clamp(64px,7vw,120px);line-height:.8;color:#FFC41D;text-shadow:4px 4px 0 #160F2E}
.pil .five span{font-weight:900;font-style:italic;font-size:clamp(22px,2.2vw,38px);line-height:.85;color:#fff;text-shadow:2px 2px 0 #160F2E}
.pil .pnav{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pil .pnav button{display:flex;flex-direction:column;gap:8px;text-align:left;color:inherit}
.pil .pnav .lbl{color:inherit;opacity:.75}
.seg{display:block;height:3px;border-radius:2px;background:currentColor;opacity:1;position:relative;overflow:hidden}
.seg{background:rgba(22,15,46,.18)}
.seg i{position:absolute;inset:0;background:#160F2E;transform-origin:0 50%;transform:scaleX(0)}
.pil.lt .seg{background:rgba(255,255,255,.25)}.pil.lt .seg i{background:#fff}
.pil .pbody{flex:1;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,72px);align-items:stretch}
.pil .pl{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,40px);align-items:end}
.pil .pr{position:relative;min-height:clamp(280px,30vw,500px)}
.pil .ph{position:absolute;inset:0;border-radius:14px;overflow:hidden;background:rgba(22,15,46,.12)}
.pil .phi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pil .pr .stk2{position:absolute;left:clamp(-70px,-5vw,-30px);bottom:clamp(-30px,-2vw,-14px);z-index:2}
.pil .n{font-weight:900;font-style:italic;font-size:clamp(150px,20vw,340px);line-height:.72;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.pil .nm{font-weight:900;font-style:italic;font-size:var(--d2);line-height:.9;letter-spacing:-.035em}
.pil .tx2{font-weight:700;font-style:italic;font-size:calc(var(--d2)/1.3/1.6);line-height:1.25;max-width:560px;margin-top:16px}
.pil .stk2{width:clamp(130px,14vw,240px);height:auto;filter:drop-shadow(0 16px 20px rgba(22,15,46,.3))}
/* method + vcg tabs: autoplay like stories */
.method .bot,.vcgs .bot{border-top:0;padding-top:0}
.step{display:flex;flex-direction:column;gap:10px;text-align:left;color:inherit;cursor:pointer;opacity:.5;transition:opacity .4s}
.step.on{opacity:1}
.step .seg{background:rgba(244,242,251,.18)}.step .seg i{background:var(--sig)}
.vcgs .step .seg{background:rgba(15,11,31,.2)}.vcgs .step .seg i{background:#0F0B1F}
.step .st-n{color:inherit;opacity:.7}
.step .S{font-size:var(--s);color:inherit;transition:font-size .5s var(--ease)}
.step.on .S{font-size:calc(var(--d3)/1.3)}
.step .B{max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .5s;color:inherit}
.step.on .B{max-height:200px;opacity:.85;font-size:var(--b)}
.method .step .S{color:var(--ink)}.vcgs .step .S{color:#0F0B1F}
@media (max-width:1000px){
 .pil .ptop{grid-template-columns:1fr}.pil .pnav .lbl{display:none}
 .pil .pbody{grid-template-columns:1fr}.pil .pr{min-height:0;aspect-ratio:4/3;order:-1}.pil .pl{grid-template-columns:1fr}.pil .pr .stk2{left:auto;right:-8px;bottom:-18px;width:110px}
 .method .step,.vcgs .step{display:flex}.method .bot,.vcgs .bot{grid-template-columns:1fr}
 .step .B{display:block}
}

.studio{aspect-ratio:16/9;background:#34A2FC}
.studio img.vox{left:0;top:0;width:100%;height:100%;transform:none;object-fit:cover;object-position:50% 40%;filter:none}
.studio:after{background:linear-gradient(to top,rgba(11,8,23,.78),rgba(11,8,23,0) 42%),linear-gradient(to bottom,rgba(11,8,23,.35),rgba(11,8,23,0) 22%)}
@media (max-width:1000px){.studio{aspect-ratio:4/5;height:auto}.studio img.vox{width:100%;object-position:50% 40%}}

.aside .foot{display:none}
@media (max-width:1000px){.main{padding-top:0}}

.logo span,.hello,.mbtn{white-space:nowrap}
@media (max-width:1000px){
 .hello{height:40px;padding:0 14px;font-size:11px}.mbtn{height:40px;padding:0 14px;font-size:11px}
 .logo span{font-size:17px}
 .hero .swirl{width:72vw;left:50%;top:36%}
 .intro p.S{font-size:calc(var(--d2)/1.3*.82)}
}

/* explanation text: regular, readable — never bold */
.L{font-weight:400;font-style:normal;font-size:clamp(19px,1.5vw,26px);line-height:1.45;letter-spacing:-.005em}
.intro p.L{font-size:clamp(22px,2.1vw,34px);line-height:1.35;max-width:1100px}
.pil .tx2{font-weight:400;font-style:normal;font-size:clamp(17px,1.35vw,22px);line-height:1.5;max-width:520px}
.voice td{font-weight:400;font-style:normal;font-size:clamp(17px,1.3vw,21px)}
.rowc .r a,.rowc .r button{font-weight:400;font-style:normal;font-size:clamp(17px,1.3vw,21px)}
.step.on .B{font-size:var(--b);opacity:.8}
.xp .L{color:inherit;opacity:.9}
@media (max-width:1000px){.intro p.L{font-size:22px}.hero .swirl{width:58vw;top:38%}}

/* ===== v5: smaller type everywhere ===== */
.L{font-size:clamp(17px,1.25vw,21px)}
.intro p.L{font-size:clamp(19px,1.6vw,27px)}
.intro .intro-h{margin-bottom:clamp(24px,3vw,44px)}
.method .word{font-size:clamp(76px,14vw,240px)}
.vcgs .mark{font-size:clamp(84px,16vw,280px)}
.pil .n{font-size:clamp(120px,15vw,250px)}
.tagm .line{font-size:clamp(44px,5.6vw,100px)}
.clock{font-size:clamp(40px,4.6vw,80px)}
.ft .mark .H{font-size:clamp(56px,10vw,180px)}
.menu li a .H{font-size:clamp(32px,7vw,48px)}

/* masks: animated words live inside a clipped box */
.ln-mask{padding:.16em .24em .2em .06em;margin:-.16em -.24em -.2em -.06em}
.mk{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.12em .2em .16em .04em;margin:-.12em -.2em -.16em -.04em}
.mk>*{display:inline-block}
.method .stage{overflow:hidden}

/* hero = profile pages 2-3: "We build the part you can't see." */
.mf-hero{background:#473189;display:flex;align-items:center;justify-content:center}
.mf-hero:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(168,156,255,.18),rgba(71,49,137,0) 60%);pointer-events:none}
.mf{position:relative;display:grid;grid-template-columns:auto auto auto;column-gap:.32em;row-gap:0;align-items:baseline;font-weight:400;font-style:normal;color:#fff;font-size:clamp(22px,2.6vw,44px);line-height:1;letter-spacing:-.01em}
.mf .w{display:inline-block;overflow:hidden;padding:.06em .16em .1em 0;margin:-.06em -.16em -.1em 0;vertical-align:baseline}
.mf .w>span{display:inline-block}
.mf .H{font-size:1.75em;letter-spacing:-.03em;line-height:.9;color:#fff}
.mf .r1{grid-column:2/4;grid-row:1;display:flex;gap:.32em;align-items:baseline}
.mf .tp{grid-column:1;grid-row:2;text-align:right}
.mf .can{grid-column:2;grid-row:2;display:inline-flex;align-items:baseline;overflow:visible;padding:0;margin:0}
.mf .can>span:first-child{display:inline-block}
.mf .can .t{overflow:hidden}
.mf .see{grid-column:3;grid-row:2;position:relative;overflow:visible}
.mf .see>span{display:inline-block}
.mf .ring{position:absolute;left:-38%;top:-58%;width:190%;height:auto;overflow:visible;pointer-events:none;rotate:-12deg}
.mf .ring path{fill:none;stroke:#A89CFF;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hb-l,.hb-r{position:absolute;bottom:clamp(24px,3.4vw,48px);z-index:2}
.hb-l{left:var(--m)}.hb-r{right:var(--m);display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.hb-l .lbl,.hb-r .lbl{color:rgba(255,255,255,.7)}
.mf-hero .cue{display:flex;align-items:center;gap:10px}
.mf-hero .cue i{display:block;width:1px;height:42px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.mf-hero .cue i:after{content:'';position:absolute;left:0;top:-40%;width:1px;height:40%;background:#fff;animation:cue 1.8s var(--ease) infinite}

/* NEW brand: neat rows */
.newb .rows{position:absolute;inset:-4% -10%;display:flex;flex-direction:column;justify-content:space-between;rotate:-6deg}
.newb .nrow{display:flex;gap:.5em;width:max-content;font-weight:900;font-style:italic;font-size:clamp(26px,3vw,52px);line-height:1;letter-spacing:-.03em;color:#00DDB5;white-space:nowrap}
.newb .nrow span:nth-child(even){color:transparent;-webkit-text-stroke:1.5px #00DDB5}
.newb .big{display:flex;flex-direction:column;align-items:center}
.newb .big b{color:#fff;font-size:clamp(64px,10vw,180px);text-shadow:none;transform:none;display:inline-block}
.newb .big .mk{background:#3333CB;padding:0 .2em .04em;margin:0}
.newb .wh{background:#00DDB5}
.newb .whi{display:flex;flex-direction:column;align-items:flex-start;rotate:-6deg}
.newb .wh .a,.newb .wh .b{color:#E44C10;display:inline-block;transform:none}
.newb .wh .a{font-size:clamp(80px,13vw,230px)}.newb .wh .b{font-size:clamp(48px,7.6vw,130px);margin-left:.8em}

/* experience rooms: autoplay */
.xauto{margin-top:var(--gut);display:grid;grid-template-columns:1fr 1fr;min-height:clamp(460px,44vw,700px);background:#00DDB5;color:#160F2E;transition:background-color .7s var(--ease),color .7s}
.xauto .xa-l{padding:clamp(20px,2.6vw,40px);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.xauto .pnav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.xauto .pnav button{display:flex;flex-direction:column;gap:8px;text-align:left;color:inherit}
.xauto .pnav .lbl{color:inherit;opacity:.75}
.xauto.lt .seg{background:rgba(255,255,255,.25)}.xauto.lt .seg i{background:#fff}
.xauto .xa-w{display:block;overflow:hidden;font-weight:900;font-style:italic;font-size:clamp(60px,7vw,124px);line-height:.86;letter-spacing:-.045em;padding:0 .1em .06em 0}
.xauto .xa-w span{display:inline-block}
.xauto .xa-d{margin-top:16px;max-width:460px;color:inherit}
.xauto .xa-li{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.xauto .xa-li li{font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;border-radius:5px;background:rgba(22,15,46,.12)}
.xauto.lt .xa-li li{background:rgba(255,255,255,.16)}
.xauto .xa-r{position:relative;overflow:hidden}
.xauto .xa-r img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 100% 0)}
.xauto .xa-r img.on{clip-path:inset(0 0 0 0)}
@media (max-width:1000px){
 .mf{font-size:clamp(19px,5.6vw,28px)}
 .hb-l{left:var(--m);right:var(--m);bottom:22px}.hb-r{bottom:50px}.hb-r .cue{display:none}
 .xauto{grid-template-columns:1fr}.xauto .xa-r{aspect-ratio:4/3;order:-1}.xauto .pnav .lbl{display:none}
 .newb .wh .a{font-size:22vw}.newb .wh .b{font-size:13vw}
}

.made{display:flex;align-items:center;gap:12px;margin-top:18px}
.made .lbl{font-size:10px;color:var(--mute)}
.made img{height:30px;width:auto;display:block;opacity:.9}
.made[hidden]{display:none}
.card .made-m{display:none;margin-top:12px}
@media (max-width:1000px){.card .made-m{display:flex}}
.tagm .w,.vcgs .rot .w{white-space:nowrap}
.rlogo{position:relative;width:74%;aspect-ratio:920/445}
.rlogo img,.csc img{position:absolute;inset:0;width:100%;height:100%}
.csc{position:absolute;left:50%;top:50%;translate:-50% -50%;height:94%;aspect-ratio:1600/1413}
/* feeling to feeling (guideline p10, raw assets) */
.feel{position:relative;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(230px,22vw,380px);gap:var(--gut);margin-top:var(--gut)}
.fe{position:relative;border-radius:var(--r);overflow:hidden}
.fe .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fe .ov{position:relative;z-index:1;height:100%;padding:clamp(16px,2vw,30px);display:flex;flex-direction:column;justify-content:space-between;gap:12px;color:#fff;background:linear-gradient(90deg,rgba(15,11,31,.78),rgba(15,11,31,.12))}
.fe .ov p{font-size:clamp(13px,.95vw,15px);line-height:1.5;max-width:470px;font-style:italic}
.fe .ov b{color:#FF96D3;font-weight:700}
.fe.a{grid-column:1/8}.fe.b{grid-column:8/13}.fe.c{grid-column:1/3}.fe.d{grid-column:3/8}.fe.e{grid-column:8/13}
.fe.a .lgw{width:min(34%,220px);margin-left:28%}
.fe.b{overflow:visible;display:flex;flex-direction:column;justify-content:center}
.fe .band{position:relative;background:#00DDB5;box-shadow:12px 12px 0 #FFC41D;color:#fff;padding:clamp(16px,1.8vw,28px) clamp(18px,2vw,30px)}
.fe .band .sh{display:none}
.fe .band p{font-style:italic;font-size:clamp(13px,1vw,16px);line-height:1.5}.fe .band b{font-weight:800}
.ftype{position:relative;align-self:flex-end;margin-top:-.28em;font-weight:900;font-style:italic;letter-spacing:-.045em;line-height:.78;font-size:clamp(46px,5.6vw,104px);color:#E44C10}
.ftype span{display:block}.ftype .f2{margin-left:-.5em}.ftype .to{position:absolute;right:.62em;top:.42em;color:#FFC41D;font-size:.9em;mix-blend-mode:normal}
.fe.c{overflow:visible}.fe.c .sq{position:absolute;width:70%;aspect-ratio:1/1.05}
.fe.c .s1{left:0;top:0;background:#00DDB5}.fe.c .s2{left:10%;top:12%;background:#E44C10}.fe.c .s3{left:20%;top:24%;background:#FFC41D;display:flex;align-items:flex-end;justify-content:center;padding:10%}
.fe.c .s3 img{width:78%;filter:none}
.fe.d .lgw{position:absolute;left:50%;top:50%;width:min(44%,300px);translate:-50% -50%}
.fe.e .ov{padding-left:clamp(70px,8vw,140px);background:linear-gradient(270deg,rgba(15,11,31,.82),rgba(15,11,31,.2));align-items:flex-end;text-align:left}
.fe-badge{position:absolute;z-index:3;width:clamp(150px,14vw,250px);left:58.33%;top:50%;translate:-50% -50%;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}
@media (max-width:1000px){.feel{grid-template-columns:1fr 1fr;grid-auto-rows:auto}.fe.a,.fe.b,.fe.e,.fe.d{grid-column:1/-1}.fe.a,.fe.e{min-height:96vw}.fe.d{aspect-ratio:4/3}.fe.c{display:none}.fe.b{padding:10px 0 30px}.fe-badge{position:relative;left:auto;top:auto;translate:none;grid-column:1/-1;justify-self:center;width:46vw;order:2}}
/* burger + outline logo (guideline p41) */
.burg{position:relative;margin:calc(var(--gut) + 6vw) 0 calc(var(--gut) + 3vw);aspect-ratio:1906/515}
.burg .clip{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;background:#000}
.burg .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:80% 55%}
.burg .ol{position:absolute;left:20.5%;top:-1%;width:82%;height:auto;overflow:visible}
.burg .ol path{fill:none;stroke:#fff;stroke-width:1.4;vector-effect:non-scaling-stroke}
.burg .btl{position:absolute;left:0;top:-17%;bottom:0;width:23.1%;overflow:hidden;z-index:2}
.burg .btl img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.burg .bd{position:absolute;left:10.5%;top:61.6%;width:12.7%;z-index:3;filter:drop-shadow(0 18px 26px rgba(0,0,0,.45))}
/* chicken triptych (guideline) */
.tri{display:grid;grid-template-columns:1fr 3.2fr 1fr;gap:var(--gut);margin-top:var(--gut);height:clamp(240px,28vw,460px)}
.tri .t{position:relative;border-radius:var(--r);overflow:hidden;background:#00DDB5}
.tri img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tri .l img{transform-origin:46% 34%;scale:3.2}.tri .r img{transform-origin:60% 48%;scale:2.8}
@media (max-width:1000px){.burg{aspect-ratio:4/3;margin-top:22vw}.burg .ol{left:6%;width:120%;top:10%}.burg .btl{width:40%;top:-20%}.burg .bd{width:28%;left:22%;top:66%}.tri{grid-template-columns:1fr 1fr;height:auto}.tri .m{grid-column:1/-1;order:-1;aspect-ratio:16/10}.tri .l,.tri .r{aspect-ratio:3/4}}
/* UI/UX Pro Max audit pass */
.H,.S,h1,h2,h3{text-wrap:balance}
p,.B,.L{text-wrap:pretty}
a,button,[data-go]{touch-action:manipulation;cursor:pointer}
.clock,[data-count],.pil .n,.lbl b{font-variant-numeric:tabular-nums}
.made .lbl{font-size:11px}
.pnav button,.ctrl button,.toc a{min-height:24px}
@media (prefers-reduced-motion:reduce){.marquee,.belt .tr,[data-marquee]{transform:none!important}.fe-badge,.spin img{rotate:0deg!important}}
/* 21st · rectangular text reveal (ported to vanilla GSAP) */
[data-rect]{display:block}
.rtr-rect{position:absolute;pointer-events:none;will-change:transform}
/* 21st · project index (ported) */
.pindex-s{padding:clamp(60px,8vw,120px) var(--m) clamp(40px,6vw,90px)}
.pi-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px}
.pindex{position:relative}
.pi-row{display:grid;grid-template-columns:56px 1.2fr 1fr 70px 28px;align-items:baseline;gap:16px;padding:22px 0;border-top:1px solid var(--line);transition:color .25s}
.pi-row:last-of-type{border-bottom:1px solid var(--line)}
.pi-t{font-weight:700;font-style:italic;font-size:var(--s);transition:opacity .25s,translate .5s var(--ease)}
.pi-g{color:var(--mute);font-size:14px}
.pi-a{color:var(--mute);transition:translate .4s var(--ease),color .25s}
.pindex.on .pi-row:not(.on) .pi-t{opacity:.28}
.pi-row.on .pi-t{translate:10px 0}.pi-row.on .pi-a{translate:5px 0;color:var(--sig)}
.pi-row:focus-visible{outline-offset:-2px}
.pi-cover{position:absolute;left:0;top:0;width:clamp(220px,22vw,340px);aspect-ratio:4/3;border-radius:12px;overflow:hidden;pointer-events:none;opacity:0;scale:.9;z-index:5;box-shadow:0 30px 70px -14px rgba(0,0,0,.6);background:var(--card)}
.pi-cover img,.pi-cover .pi-solid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.pi-cover .pi-solid{background:#D7F21F}
.pi-cover .on{opacity:1}
@media (max-width:1000px){.pi-row{grid-template-columns:40px 1fr 54px;gap:10px}.pi-g,.pi-a{display:none}.pi-cover{display:none}}

/* feeling to feeling — laid out from the guideline page coordinates */
.feel2{position:relative;container-type:inline-size;aspect-ratio:1562/391;margin-top:var(--gut)}
.feel2 .f2{position:absolute}
.feel2 .ph{overflow:hidden;border-radius:6px}.feel2 .ph img{width:100%;height:100%;object-fit:cover}
.feel2 .ph.dk::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,11,31,.25),rgba(15,11,31,.75) 30%,rgba(15,11,31,.55))}
.feel2 .lg{object-fit:contain;z-index:2}
.feel2 .tx{z-index:2;color:#fff;font-style:italic;line-height:1.45;margin:0}
.feel2 .tx b{color:#fff;font-weight:800;text-decoration:line-through;text-decoration-color:#FF96D3;text-decoration-thickness:.32em;text-decoration-skip-ink:none}
.feel2 .sq.s3 img{position:absolute;left:12%;bottom:12%;width:76%}
.feel2 .band-y{background:#FFC41D}.feel2 .band{background:#00DDB5;display:flex;align-items:center;padding:0 3%}
.feel2 .band p{color:#fff;font-style:italic;line-height:1.5;margin:0}.feel2 .band b{font-weight:800}
.feel2 .fw{font-weight:900;font-style:italic;letter-spacing:-.04em;line-height:1;white-space:nowrap;color:#E44C10;z-index:3}
.feel2 .fw.to{color:#FFC41D;z-index:4}
.feel2 .blob svg{width:100%;height:100%;display:block}.feel2 .blob{z-index:3}
.feel2 .badge{z-index:5;filter:drop-shadow(0 14px 22px rgba(0,0,0,.35))}


/* guideline flip-through */
.flip{position:relative;margin-top:var(--gut);border-radius:var(--r);overflow:hidden;background:#fff;cursor:ew-resize}
.flip .fr{position:relative;aspect-ratio:1660/639}
.flip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.flip img.on{opacity:1}
.flip .lbl{position:absolute;bottom:14px;color:#160F2E;background:rgba(255,255,255,.85);padding:6px 10px;border-radius:5px;margin:0}
.flip .fl-l{left:14px}.flip .fl-r{right:14px;font-variant-numeric:tabular-nums}.flip .fl-r b{color:#E44C10}
.flip .fl-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(22,15,46,.08)}.flip .fl-bar i{display:block;height:100%;width:100%;background:#E44C10;transform-origin:0 50%;transform:scaleX(0)}
.board .hint,.board .rule{z-index:9999;background:rgba(246,243,236,.9);padding:6px 10px;border-radius:5px}

/* light hero: CSS-only aurora, no 3D logo */
.hero .aur{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero .aur i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;will-change:transform}
.hero .aur i:nth-child(1){width:52vw;height:52vw;left:38%;top:-12%;background:#473189;animation:aur1 16s ease-in-out infinite alternate}
.hero .aur i:nth-child(2){width:26vw;height:26vw;left:70%;top:48%;background:#FC6321;opacity:.28;animation:aur2 12s ease-in-out infinite alternate}
.hero .aur i:nth-child(3){width:30vw;height:30vw;left:12%;top:30%;background:#A89CFF;opacity:.16;animation:aur3 18s ease-in-out infinite alternate}
@keyframes aur1{to{transform:translate(-14%,18%) scale(1.12)}}
@keyframes aur2{to{transform:translate(-30%,-24%) scale(.9)}}
@keyframes aur3{to{transform:translate(40%,-10%) scale(1.2)}}
/* cursor: hide the system pointer, keep the orange dot; softer view circle */
@media (pointer:fine){html.has-cur,html.has-cur *{cursor:none!important}}
.cur.big{background:rgba(252,99,33,.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.made .msub{font-size:10px;color:var(--mute);letter-spacing:.12em}
.method .stage{overflow:hidden;padding:.12em .2em .14em 0;margin:-.12em -.2em -.14em 0}
.vcgs .rot .ln2{display:block;font-size:1.35em;line-height:1.05}

/* contact (from the profile closing page) */
.ct{position:relative;display:grid;grid-template-columns:1.1fr .9fr;align-items:end;gap:var(--gut);padding:clamp(80px,10vw,160px) var(--m) 0;background:transparent;overflow:hidden;border-top:1px solid var(--line)}
.ct-l{padding-bottom:clamp(60px,7vw,110px)}
.ct-k{font-style:italic;font-weight:700;color:#A89CFF;font-size:var(--b)}
.ct-h{margin:10px 0 22px;line-height:.92}
.ct-h .l1{display:block;font-weight:300;font-size:clamp(48px,6.6vw,118px);letter-spacing:-.02em;color:#fff}
.ct-h .l2{display:block;font-weight:900;font-style:italic;font-size:clamp(60px,8.6vw,154px);letter-spacing:-.045em;color:#fff}
.ct-h i{color:#FC6321;font-style:normal}
.ct-p{max-width:470px;color:rgba(255,255,255,.82)}.ct-p b{color:#fff;font-style:italic}
.ct-c{display:flex;flex-wrap:wrap;gap:22px 48px;margin-top:40px}
.ct-c .lbl{color:#A89CFF;margin-bottom:6px}.ct-c a{color:#fff;font-size:clamp(15px,1.1vw,18px);background:linear-gradient(#FC6321,#FC6321) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease)}
.ct-c a:hover{background-size:100% 1px}
.ct-c .cp{margin-left:10px;color:#A89CFF;font-size:10px}
.ct-img{width:100%;max-width:640px;justify-self:end;display:block;margin-bottom:-2px}
@media (max-width:1000px){.ct{grid-template-columns:1fr}.ct-img{max-width:86%}}
/* footer (official logo) */
.ft2{padding:clamp(60px,8vw,110px) var(--m) 28px;border-top:1px solid var(--line)}
.f-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.f-logo{display:flex;align-items:flex-end;gap:16px}.f-logo img{width:clamp(90px,8vw,120px);height:auto}.f-logo .lbl{color:var(--ink);line-height:1.5}
.f-cols{display:grid;grid-template-columns:repeat(3,minmax(120px,auto));gap:clamp(30px,5vw,90px)}
.f-cols .lbl{margin-bottom:14px}.f-cols ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--mute)}
.f-cols a{transition:color .25s}.f-cols a:hover{color:var(--ink)}
.f-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:clamp(50px,6vw,90px);padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--mute)}
.f-legal span:last-child{display:flex;gap:22px}.f-legal a:hover{color:var(--ink)}
@media (max-width:700px){.f-cols{grid-template-columns:1fr 1fr}}
.legal-p{min-height:70vh;padding-top:140px}
.bcov{position:absolute;inset:0;background:#111;overflow:hidden;display:flex;align-items:center;justify-content:center}
.bcov::before{content:'';position:absolute;left:50%;top:62%;width:150%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:#E3170A}
.bcov img{position:relative;width:46%;height:auto;margin-top:-6%;transition:scale 1.2s var(--ease)}
.card:hover .bcov img{scale:1.04}

/* opener rebuilt from the guideline cover layers */
.open2{position:relative;aspect-ratio:1660.44/638.589;overflow:hidden;background:#FDC50C}
.open2 .op-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.open2 .op-pack{position:absolute;left:-7.53%;top:-64.99%;width:59.08%;height:auto}
.open2 .op-tr{position:absolute;inset:0}.open2 .op-tr img{width:100%;height:100%;display:block}
.open2 .op-t{position:absolute;inset:0;width:100%;height:100%}

/* burger page at the guideline's exact proportions (panel 1057x285pt) */
.burg2{position:relative;aspect-ratio:1057/285;margin:calc(var(--gut) + 7vw) 0 calc(var(--gut) + 5vw)}
.burg2 .clip{position:absolute;inset:0;overflow:hidden;background:#000}
.burg2 .clip .bg{position:absolute;left:-.19%;top:-57.2%;width:100.4%;height:209.5%;object-fit:cover}
.burg2 .ov{position:absolute;left:0;right:0;top:-23.16%;height:123.16%;overflow:hidden}
.burg2 .ol{position:absolute;left:19.87%;top:2.85%;width:90.35%;height:auto;overflow:visible}
.burg2 .ol path{fill:none;stroke:#fff;stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.85}
.burg2 .btl{position:absolute;left:-11.16%;top:3.99%;width:34.63%;height:auto;z-index:2}
.burg2 .bd{position:absolute;left:10.5%;top:61.4%;width:12.68%;z-index:3;filter:drop-shadow(0 14px 22px rgba(0,0,0,.4))}
.method .stage .sw1,.method .stage .sw2{position:absolute;pointer-events:none;transform:scaleX(0)}
.method .stage .sw2{z-index:2}.method .stage .sw1{z-index:1}

.tags .mfr img{height:14px;width:auto;vertical-align:-2px;margin-right:6px}
.card .badge.mfr img{height:13px;width:auto;vertical-align:-2px;margin-right:6px}
/* next project, Koto-like: compact row that lifts on hover */
.nextp2{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:clamp(16px,3vw,48px);margin-top:clamp(70px,9vw,140px);padding:clamp(22px,3vw,40px) clamp(20px,3vw,44px);border-radius:var(--r);background:#FC6321;color:#fff;transition:background-color .4s var(--ease)}
.nextp2 .lbl{color:#fff;opacity:.85}
.nextp2 .np-t{display:flex;flex-direction:column}.nextp2 .S{color:#fff;opacity:.9}
.nextp2 .np-i{width:clamp(110px,12vw,190px);aspect-ratio:4/3;border-radius:10px;overflow:hidden}.nextp2 .np-i img{width:100%;height:100%;object-fit:cover;transition:scale .8s var(--ease)}
.nextp2 .np-a{font-size:clamp(28px,3vw,48px);transition:translate .5s var(--ease)}
.nextp2:hover{background:#473189}.nextp2:hover .np-i img{scale:1.08}.nextp2:hover .np-a{translate:8px 0}
@media (max-width:700px){.nextp2{grid-template-columns:1fr auto}.nextp2 .lbl,.nextp2 .np-i{grid-column:1/-1}.nextp2 .np-i{width:100%}}
.pil .n{line-height:.86;padding-right:.08em;overflow:visible}

/* the crowd: three heavy lines */
.crowd{margin-top:var(--gut);padding:clamp(30px,5vw,80px) 0;overflow:hidden}
.crowd .cr{font-weight:900;font-style:italic;letter-spacing:-.05em;line-height:.86;font-size:clamp(70px,13vw,230px);margin:0;overflow:hidden;padding:.06em .1em .08em 0}
.crowd .cr span{display:inline-block}
.crowd .cr1{color:#FFC41D}.crowd .cr2{color:#00DDB5;padding-left:12%}.crowd .cr3{color:#E44C10;text-align:right}
.crowd .cr-ch{margin-top:clamp(24px,3vw,40px)}

.spin2{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(24px,4vw,70px);margin-top:var(--gut);padding:clamp(20px,3vw,40px) 0}
.spin2 .rec{width:clamp(240px,34vw,520px);height:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.35))}
.spin2 .H{color:#FF96D3}.spin2 .S{color:#FFC41D}
@media (max-width:800px){.spin2{grid-template-columns:1fr}.spin2 .rec{width:78vw;justify-self:center}}
.belt{background:transparent!important}

.ct .soc{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.ct .soc a{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background-color .25s,translate .3s var(--ease)}
.ct .soc a:hover{background:#FC6321;translate:0 -3px}
.ct .soc svg{width:22px;height:22px;fill:#fff}
/* ping-pong player sits on the footer line; her hand crosses over it */
.ct{overflow:visible!important;position:relative;z-index:3}
.ct-img{margin-bottom:0!important;translate:0 10.45%;position:relative;z-index:3}
.ft2{position:relative;z-index:1}
.ct .soc a{position:relative}.soc-tip{position:absolute;left:50%;bottom:calc(100% + 10px);translate:-50% 0;white-space:nowrap;font-size:12px;padding:6px 10px;border-radius:6px;background:#fff;color:#160F2E}

/* Mind for rent: two lines beside the mark */
.mfr{display:inline-flex!important;align-items:center;gap:7px}.mfr{padding:6px 10px!important}.mfr img{margin:0!important;vertical-align:0!important;height:30px!important;width:auto}
.mfr i{font-style:inherit;line-height:.95;font-size:.82em;text-align:left;white-space:nowrap}
/* feel2 text */
.feel2 .fx{z-index:2;color:#fff;font-style:italic;line-height:1.45;margin:0}

/* crowd */
.crowd .cr{padding-bottom:.2em;margin-bottom:-.12em}
.crowd .cr-ch{display:flex;gap:clamp(20px,4vw,64px);align-items:flex-start;margin-top:clamp(28px,4vw,56px);padding-left:2px}
.crowd .cr-l{font-weight:700;font-style:italic;color:#E44C10;margin:0;white-space:nowrap}
.crowd .cr-ch ul{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(30px,5vw,90px)}
.crowd .cr-ch li{padding:2px 0 2px 14px;position:relative;opacity:.8;break-inside:avoid}
.crowd .cr-ch li::before{content:'';position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:currentColor}
/* pillars: positioning framework (guideline p.8) */
.pfw{position:relative;container-type:inline-size;aspect-ratio:2000/770;margin-top:var(--gut);background:#F4F3F6;border-radius:6px;overflow:hidden;color:#160F2E}
.pfw .pband{position:absolute;left:9.15%;top:35.2%;width:73.2%;height:28.8%;background:#DB82B4}
.pfw .pg{position:absolute;width:11.5cqw;height:1.75cqw;padding:0;border:0;background:none;cursor:pointer;z-index:2;transition:opacity .4s,filter .4s}
.pfw .pg .bar{position:absolute;inset:0;background:#3333CB}
.pfw .pg b,.pfw .pg span{position:absolute;font-weight:900;font-style:italic;line-height:.8;white-space:nowrap;letter-spacing:-.02em}
.pfw .nu{left:.6cqw;top:-2.5cqw;font-size:7.4cqw;color:#FFC41D;z-index:2}
.pfw .we{left:4.9cqw;top:-.45cqw;font-size:2cqw;color:#fff;z-index:3}
.pfw .hv{left:4.1cqw;top:1.05cqw;font-size:1.15cqw;color:#fff;z-index:3}
.pfw .wd{left:8.2cqw;top:-.85cqw;font-size:3.3cqw;color:#00DDB5;z-index:3}
.pfw .wd.two{line-height:.72}
.pfw .ps{position:absolute;font-weight:900;font-style:italic;font-size:4.75cqw;line-height:.8;color:#FFC41D;letter-spacing:-.02em;white-space:nowrap;z-index:1}
.pfw .pcap{position:absolute;left:3.1%;top:76%;width:45%}
.pfw .pcap p{margin:0;font-size:max(13px,.95cqw);line-height:1.45;font-style:italic}
.pfw .pcap .pk{font-weight:700;color:#DB82B4;margin-bottom:.3em}
.pfw .pg{transition:transform .5s cubic-bezier(.2,.9,.3,1.4)}.pfw .pg.on{transform:translateY(-.5cqw) scale(1.06)}.pfw .pg.on .bar{background:#E44C10}

/* crowd: traits as the original pills */
.crowd .cr-ch{align-items:center}
.crowd .cr-ch ul{columns:auto;display:flex;flex-wrap:wrap;gap:8px}
.crowd .cr-ch li{opacity:1;padding:10px 16px;border-radius:999px;font-weight:700;font-style:italic;font-size:var(--s);background:#FFC41D;color:#160F2E}
.crowd .cr-ch li::before{display:none}
.crowd .cr-ch li:nth-child(3n+2){background:#00DDB5}.crowd .cr-ch li:nth-child(3n){background:#FF96D3}
@media (max-width:700px){.crowd .cr-ch{flex-direction:column;align-items:flex-start;gap:14px}}
/* crowd: traits stacked, top right */
.crowd{position:relative}
.crowd .cr-ch{position:absolute;right:0;top:clamp(30px,5vw,80px);margin:0;flex-direction:column;align-items:flex-end;gap:12px;z-index:2}
.crowd .cr-ch ul{flex-direction:column;align-items:flex-end;flex-wrap:nowrap;gap:8px}
.crowd .cr-l{text-align:right}
@media (max-width:900px){.crowd .cr-ch{position:static;align-items:flex-start;margin-top:clamp(24px,4vw,40px)}.crowd .cr-ch ul{align-items:flex-start}.crowd .cr-l{text-align:left}}
/* crowd: traits scattered in the empty space (top right, bottom left) */
.crowd .cr-ch{position:absolute;inset:0;top:0;right:0;margin:0;padding:0;list-style:none;display:block;pointer-events:none}
.crowd .cr-ch li{position:absolute;left:var(--x);top:var(--y);rotate:var(--r);font-size:clamp(14px,1.35vw,22px);padding:.6em 1.1em;white-space:nowrap;box-shadow:0 10px 24px rgba(0,0,0,.28)}
@media (max-width:900px){.crowd .cr-ch{position:static;display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.crowd .cr-ch li{position:static;rotate:0deg;font-size:14px}}

.flip video.flv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#fff}
/* Mind for Rent mark: never inherit the card-cover image rules */
.card .badge.mfr{display:inline-flex!important;align-items:center;line-height:0;padding:6px 9px!important}
.card .m .badge.mfr img,.tags .mfr img{position:static!important;inset:auto!important;width:auto!important;height:28px!important;max-width:none!important;object-fit:contain!important;scale:1!important;transform:none!important;margin:0!important}
@media (max-width:700px){.card .m .badge.mfr img,.tags .mfr img{height:24px!important}}
/* case study on phones: the content column can never grow wider than the screen */
.cs>.main,.cs>.aside{min-width:0}
@media (max-width:1000px){.cs{grid-template-columns:minmax(0,1fr)!important;overflow-x:clip}.cs .main{max-width:100%;overflow-x:clip}
 .crowd .cr{font-size:clamp(54px,17vw,120px)}.tags{flex-wrap:wrap}}
/* phones: pillars framework keeps the file's proportions, caption sits under it; crowd traits wrap as a row */
@media (max-width:700px){.pfw{aspect-ratio:2000/770!important}.pfw .pcap{display:none}
 .crowd .cr-ch{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:8px}}
/* phones: concept + pillars compact (V6.20) */
@media (max-width:700px){
 /* positioning framework: zoom onto the five pillars, keep the file's layout */
 .pfw{width:190%;margin-left:-16%;margin-top:calc(var(--gut) - 13.9%);margin-bottom:-20.5%;clip-path:inset(19% 0 28% 8.4% round 6px)}
 .pfw .ps{display:none}
 /* pillar card */
 .pil{padding:16px;gap:16px;min-height:0}
 .pil .pr{aspect-ratio:16/10}
 .pil .pr .stk2{width:80px;right:-6px;bottom:-12px}
 .pil .pl{grid-template-columns:auto 1fr!important;align-items:center;gap:14px}
 .pil .n{font-size:64px!important;line-height:.9}
 .pil .nm{font-size:26px}
 .pil .tx2{font-size:15px;margin-top:6px}
}

/* phones: overlapping caption pairs, TOC, contact image (V6.21) */
@media (max-width:700px){
 .cap.r,.lbl.rule,.flip .fl-l{display:none!important}
 .lbl.cap,.lbl.hint{max-width:calc(100% - 28px);white-space:normal}
 .toc a{white-space:nowrap}
 .ct{grid-template-columns:minmax(0,1fr)!important}.ct>*{min-width:0}.ct-img{width:86%!important;max-width:86%!important;height:auto!important;justify-self:end}
}
/* concept: the explanation reads below the composition, in normal type (text kept apart from the visuals) — V6.22 */
.feel-tx{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,72px);margin-top:clamp(20px,2.4vw,36px)}
.feel-tx>div{display:flex;flex-direction:column;gap:14px}
.feel-tx p{margin:0;font-style:italic;color:var(--ink);opacity:.86;line-height:1.55;max-width:560px}
.feel-tx b{font-weight:700;opacity:1}
.pfw-cap{margin-top:clamp(14px,1.6vw,24px);max-width:640px}
.pfw-cap p{margin:0;font-style:italic;line-height:1.5}
.pfw-cap .pk{font-weight:700;color:#FF96D3;margin-bottom:4px}
@media (max-width:700px){.feel-tx{grid-template-columns:1fr;gap:14px}.feel-tx p{font-size:15px}.pfw-cap{margin-top:12px}}
/* concept in three stages: the file's composition kept whole, each stage a closer frame so the text inside reads (V6.23) */
.fstages{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,24px);margin-top:var(--gut)}
.fs{position:relative;overflow:hidden;border-radius:6px}
.fs .feel2{position:absolute!important;margin:0!important;aspect-ratio:1562/391}
@media (max-width:1000px){
 .fs2,.fs3{display:none}
 .fs1{aspect-ratio:auto!important;overflow:visible}
 .fs1 .feel2{position:relative!important;width:auto!important;left:auto!important;top:auto!important}
}
@media (min-width:1001px){
 .fs1 .badge,.fs1 .ph.dk,.fs1 .blob,.fs1 .band,.fs1 .band-y,.fs1 .fw{display:none}
 .fs2 .badge,.fs2 .ph{display:none}
 .fs3 .ph:not(.dk),.fs3 .sq,.fs3 .band,.fs3 .band-y,.fs3 .fw{display:none}
}
/* footer on phones: Studio / Channels / Method side by side (V6.24) */
@media (max-width:700px){.f-cols{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px}.f-cols ul{font-size:14px;gap:10px}.f-cols .lbl{font-size:10px;letter-spacing:.12em}}
/* Method + VCG steps: fixed layout, nothing resizes while it plays — only the progress line and the emphasis move (V6.25) */
.method .step,.vcgs .step{opacity:.5;transition:opacity .5s var(--ease)}
.method .step.on,.vcgs .step.on{opacity:1}
.step .S,.step.on .S{font-size:var(--s)!important;font-weight:700;font-style:italic;transition:none!important}
.step .B,.step.on .B{max-height:none!important;overflow:visible;display:block!important;font-size:var(--b)!important;margin-top:2px;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.step .B{opacity:.6!important;transform:translateY(0)}
.step.on .B{opacity:.95!important}
@media (max-width:1000px){
 .method,.vcgs{height:auto!important;min-height:100svh;overflow:hidden}
 .method .in,.vcgs .in{position:relative!important;inset:auto!important;min-height:100svh;padding:96px var(--m) 36px;gap:28px}
 .method .stage{min-height:clamp(110px,26vw,220px)}
 .method .step,.vcgs .step{display:flex!important}
 .method .bot,.vcgs .bot{grid-template-columns:1fr!important;gap:18px}
 .step .B,.step.on .B{max-width:none}
}
/* phones never inflate text on their own (iOS) — the concept keeps its exact proportions (V6.28) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.feel2 .band p{flex:1 1 auto;width:100%;min-width:0}
.feel2 .fw.f2w{z-index:5}
/* footer in studio lavender, logo in the studio's dark (V6.29) */
.ft2{background:#A89CFF;color:#0F0B1F;border-top:0}
.ft2 .lbl{color:rgba(15,11,31,.6)!important}
.ft2 .f-cols ul,.ft2 .f-cols a,.ft2 p,.ft2 a,.ft2 .f-logo .lbl{color:#0F0B1F!important}
.ft2 .f-cols a{opacity:.78;transition:opacity .25s}.ft2 .f-cols a:hover{opacity:1}
.ft2 hr,.ft2 .f-bot{border-color:rgba(15,11,31,.2)!important}
.ft2 .f-legal{border-top-color:rgba(15,11,31,.22)!important;color:#0F0B1F}.ft2 .f-legal *{color:#0F0B1F!important}
/* "Your move": one composition on every screen — scales as a whole, character smaller, still standing on the footer line (V6.30) */
.ct{container-type:inline-size;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;gap:2cqw!important;padding:7cqw var(--m) 0!important;align-items:end}
.ct>*{min-width:0}
.ct-l{padding-bottom:5.5cqw!important}
.ct-k{font-size:max(11px,1.15cqw)!important}
.ct-h{margin:.8cqw 0 1.8cqw!important}
.ct-h .l1{font-size:6.4cqw!important}
.ct-h .l2{font-size:8.4cqw!important}
.ct-p{font-size:max(11px,1.2cqw)!important;max-width:36cqw!important;line-height:1.5}
.ct .soc{gap:max(6px,.9cqw)!important;margin-top:max(14px,2.4cqw)!important}
.ct .soc a{width:max(30px,3.8cqw)!important;height:max(30px,3.8cqw)!important}
.ct .soc svg{width:max(14px,1.55cqw)!important;height:max(14px,1.55cqw)!important}
.ct-img{width:72%!important;max-width:none!important;height:auto!important;justify-self:end;align-self:end}
.ct-img{width:98%!important;justify-self:start!important;margin-left:-14%!important}
/* "Your move" scales as one picture: no minimum sizes, so phone = desktop, only smaller (V6.31) */
.ct{padding:7cqw 4.2cqw 0!important;gap:2cqw!important}
.ct-k{font-size:1.15cqw!important}
.ct-p{font-size:1.2cqw!important;max-width:36cqw!important}
.ct .soc{gap:.9cqw!important;margin-top:2.4cqw!important}
.ct .soc a{width:3.8cqw!important;height:3.8cqw!important}
.ct .soc svg{width:1.55cqw!important;height:1.55cqw!important}
/* footer scales as one picture too: same composition on every screen (V6.32) */
.ft2{container-type:inline-size;padding:7cqw 4.2cqw 2cqw!important}
.ft2 .f-top{display:flex!important;flex-wrap:nowrap!important;justify-content:space-between;align-items:flex-end;gap:3cqw}
.ft2 .f-logo{gap:1.1cqw}
.ft2 .f-logo img{width:8cqw!important}
.ft2 .f-logo .lbl{font-size:.85cqw!important;letter-spacing:.14em}
.ft2 .f-cols{grid-template-columns:repeat(3,auto)!important;gap:5cqw!important}
.ft2 .f-cols .lbl{font-size:.78cqw!important;margin-bottom:1cqw!important;letter-spacing:.14em}
.ft2 .f-cols ul{font-size:1.05cqw!important;gap:.55cqw!important}
.ft2 .f-legal{font-size:.9cqw!important;margin-top:5cqw!important;padding-top:1.4cqw!important;gap:1cqw}
.ft2 .f-legal span:last-child{gap:1.5cqw}