:root{--ink:#0A0A0A;--concrete:#161616;--rule:#2B2B2A;--graphite:#8C8C89;--paper:#F5F5F3;
--display:"Archivo","Helvetica Neue",Arial,sans-serif;--body:"Inter","Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,"IBM Plex Mono",Menlo,monospace;
--s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:72px;--ease:cubic-bezier(.2,.7,.1,1);color-scheme:dark;interpolate-size:allow-keywords}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--paper);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s3)}
header{position:sticky;top:0;z-index:10;background:rgba(10,10,10,.96);border-bottom:1px solid var(--rule)}
@supports(backdrop-filter:blur(8px)){header{background:rgba(10,10,10,.82);backdrop-filter:blur(8px)}}
header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:76px;flex-wrap:wrap;gap:0 var(--s3)}
[id]{scroll-margin-top:96px}
.progress{display:none;position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--paper);transform-origin:left;transform:scaleX(var(--p,0))}
nav a.cta{color:var(--ink);background:var(--paper);padding:6px 12px;font-weight:500}
nav a.cta:hover,nav a.cta:focus-visible{color:var(--paper);background:transparent;outline:1px solid var(--paper)}
nav a[aria-current="true"]{color:var(--paper);text-decoration:underline;text-underline-offset:6px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;font:600 19px var(--display);letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
.brand svg{width:26px;height:26px;flex:none}
nav{display:flex;gap:var(--s3);font:400 13px var(--mono)}
header nav{margin-left:auto}
.lang{font:400 13px var(--mono);color:var(--graphite);text-decoration:none;border:1px solid var(--rule);padding:6px 10px}.lang:hover,.lang:focus-visible{color:var(--paper);border-color:var(--paper)}
nav a{text-decoration:none;color:var(--graphite);white-space:nowrap}nav a:hover,nav a:focus-visible{color:var(--paper)}
.tag{font:400 13px var(--mono);color:var(--graphite);letter-spacing:.04em;margin:0 0 var(--s2)}
h1{font:600 clamp(40px,8vw,84px)/1.02 var(--display);font-stretch:100%;letter-spacing:.04em;text-transform:uppercase;text-wrap:balance;margin:0;max-width:14ch}
h2{font:700 clamp(26px,4vw,38px)/1.15 var(--display);letter-spacing:-.01em;margin:0 0 var(--s3)}
h3{font:700 19px/1.3 var(--display);margin:0 0 var(--s1)}
section{padding:var(--s5) 0;border-bottom:1px solid var(--rule)}
.lede{font-size:20px;max-width:56ch;color:var(--paper);margin:var(--s3) 0 var(--s4)}
.btn{display:inline-block;background:var(--paper);color:var(--ink);padding:14px 24px;text-decoration:none;font:600 15px var(--body);border:1px solid var(--paper)}
.btn::after{content:"\2192";display:inline-block;margin-left:10px}
.btn.ghost::after{content:none}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--paper)}
.btn.ghost{background:transparent;color:var(--paper);border-color:var(--rule);margin-left:var(--s1)}
.btn.ghost:hover{border-color:var(--paper)}
.small{font:400 13px var(--mono);color:var(--graphite)}

/* hero */
.hero{padding:var(--s4) 0 var(--s4)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;grid-template-areas:"text room" "cards cards";gap:var(--s4);align-items:center}
.htext{grid-area:text}.room{grid-area:room}.hcards{grid-area:cards}.hcards>.tag{margin-bottom:var(--s2)}
.fig{position:relative;overflow:hidden;background:#120000;margin:0}
.fig.studio{aspect-ratio:4/5}
.samples{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s4)}
.sample{border:1px solid var(--rule);background:var(--concrete);padding:var(--s3)}
.sample h3{margin:0 0 var(--s2)}
.sample .small{margin:var(--s2) 0 0}
.note{list-style:none;margin:0;padding:0}
.note li{font:400 13px/1.5 var(--mono);color:var(--paper);padding:10px 0;border-top:1px solid var(--rule)}
.note li b{color:var(--graphite);font-weight:400;margin-right:8px}
.vid{aspect-ratio:16/9;display:grid;place-items:center;border:1px solid var(--rule);background:#000;position:relative;font:400 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}

.sub{font:700 clamp(28px,4.4vw,48px)/1.1 var(--display);letter-spacing:-.01em;text-transform:none;max-width:none;margin:0 0 var(--s3)}
.prose p{max-width:60ch;margin:0 0 var(--s2);font-size:18px}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.quotes figure{margin:0;border-top:1px solid var(--paper);padding-top:var(--s2)}
.quotes blockquote{margin:0 0 var(--s1);font:500 20px/1.4 var(--display)}
.quotes figcaption{font:400 12px var(--mono);color:var(--graphite);letter-spacing:.06em;text-transform:uppercase}
.pcs{padding:var(--s4) 0}
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.pc{display:block;text-decoration:none;border-top:1px solid var(--paper);padding:var(--s2) 0 var(--s3)}
.pc b{display:block;font:400 12px var(--mono);color:var(--graphite);margin-bottom:var(--s1)}
.pc p{margin:0 0 var(--s2);color:var(--graphite);font-size:16px}
.pc .go{font:500 13px var(--mono);border-bottom:1px solid transparent}.pc:hover .go,.pc:focus-visible .go{border-color:var(--paper)}
.ab em{font-style:normal;color:var(--paper)}.ab .start{font:500 13px var(--mono);color:var(--paper)}
.fig.meter{aspect-ratio:1753/567;margin:var(--s4) 0 0;background:#000}
.fig.wide{aspect-ratio:16/10;margin:var(--s3) 0 var(--s2)}
.fig.wide img{object-position:50% 58%}
.hero h1{font-size:clamp(40px,5.4vw,68px);max-width:none}
.lockup{display:flex;align-items:flex-start;gap:clamp(14px,2.4vw,28px)}
.lockup svg{width:clamp(40px,5.4vw,68px);height:clamp(40px,5.4vw,68px);flex:none}
.motto{font:600 clamp(20px,2.6vw,30px)/1.2 var(--display);letter-spacing:.02em;margin:var(--s3) 0 0}
.hero .lede{margin-top:var(--s2)}
.room{position:relative;display:grid;align-items:center;aspect-ratio:1/1;border:4px solid var(--paper)}
.room .daw{grid-area:1/1;margin:0 -6% 0 13%}
.room .cap{position:absolute;left:16px;bottom:14px;margin:0;font:400 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.promises{list-style:none;margin:var(--s4) 0 0;padding:var(--s2) 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);counter-reset:p}
.promises li{counter-increment:p;font:500 15px/1.4 var(--body);color:var(--paper)}
.promises li::before{content:"0" counter(p);display:block;font:400 12px var(--mono);color:var(--graphite);margin-bottom:6px}
.par{position:absolute;inset:-8% 0}
.fig img{width:100%;height:100%;object-fit:cover}
.fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--s4) var(--s2) var(--s2);background:linear-gradient(transparent,rgba(10,10,10,.78));font:400 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between;gap:var(--s2)}

/* method */
.ab{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s3)}
.ab>div{border-top:1px solid var(--paper);padding:var(--s2) var(--s2) var(--s3)}
.ab b{font:500 13px var(--mono);display:block;margin-bottom:var(--s1)}
.ab p{margin:0;color:var(--graphite);font-size:16px}
.bars{display:flex;align-items:flex-end;gap:4px;height:64px;margin:0 0 var(--s3)}
.bars i{flex:1;height:calc(var(--h)*1%);background:var(--paper)}
.ab .a .bars i{background:var(--graphite)}
.bars i{--h:var(--b)}
.ab .a .bars i{--h:var(--a)}
.bars i:nth-child(1){--a:35;--b:60}.bars i:nth-child(2){--a:70;--b:62}.bars i:nth-child(3){--a:22;--b:58}.bars i:nth-child(4){--a:80;--b:64}
.bars i:nth-child(5){--a:40;--b:60}.bars i:nth-child(6){--a:28;--b:63}.bars i:nth-child(7){--a:66;--b:59}.bars i:nth-child(8){--a:50;--b:62}
.bars i:nth-child(9){--a:24;--b:60}.bars i:nth-child(10){--a:74;--b:64}.bars i:nth-child(11){--a:38;--b:58}.bars i:nth-child(12){--a:58;--b:61}

/* teacher */
.teach{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s4);align-items:center}
.daw{position:relative;overflow:hidden;border:1px solid var(--rule);background:var(--concrete);margin:var(--s3) 0 var(--s2)}
.daw img{width:100%;height:auto;image-rendering:auto}
.daw .bar{display:flex;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--rule);font:400 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.daw .track{position:absolute;left:0;right:0;top:0;bottom:41px;overflow:hidden;pointer-events:none}
.daw .head{position:absolute;inset:0;display:none;background:linear-gradient(90deg,rgba(245,245,243,0) 0,rgba(245,245,243,.14) calc(100% - 2px),var(--paper) calc(100% - 2px))}

ul.plain{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4);counter-reset:i}
ul.plain li{position:relative;padding:var(--s2) 0;border-top:1px solid var(--rule);counter-increment:i}
ul.plain li::before{content:"0" counter(i);display:block;font:400 12px var(--mono);color:var(--graphite);margin-bottom:4px}
ul.plain strong{display:block;font:600 17px var(--body)}
ul.plain span{color:var(--graphite);font-size:16px}
.ladder{width:100%;border-collapse:collapse;font-size:16px}
.ladder td{padding:var(--s2) 0;border-top:1px solid var(--rule);vertical-align:top}
.ladder td:last-child{text-align:right;font:500 15px var(--mono);white-space:nowrap;padding-left:var(--s2)}
.ladder td small{display:block;color:var(--graphite);font-size:15px}
details{border-top:1px solid var(--rule);padding:var(--s2) 0}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;font:600 17px var(--body);display:flex;justify-content:space-between;gap:var(--s2);list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 22px/1 var(--mono);color:var(--graphite)}
details[open] summary::after{content:"\2212"}
details p{color:var(--graphite);margin:var(--s1) 0 0;max-width:62ch}
footer{padding:var(--s4) 0 var(--s5);font:400 13px var(--mono);color:var(--graphite)}
footer a{color:var(--graphite)}footer a:hover{color:var(--paper)}
footer .row{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);justify-content:space-between}
a:focus-visible,summary:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

/* motion: only when JS adds .mo (no reduced motion, or ?motion=on) */
.mo .progress{display:block}
.mo header{animation:fade .8s var(--ease) both}
@keyframes fade{from{opacity:0}}
.mo [data-r],.mo [data-stagger]>*,.mo .ladder tr{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*80ms + var(--base,0ms))}
.mo [data-r].in,.mo [data-stagger].in>*,.mo .ladder.in tr{opacity:1;transform:none}
.mo .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.15em;margin-bottom:-.15em}
.mo .w>span{display:inline-block;transform:translateY(112%);transition:transform 1.05s var(--ease);transition-delay:calc(var(--i)*75ms + var(--base,0ms))}
.mo [data-split].in .w>span{transform:none}
.mo .rv{position:relative;overflow:hidden}
.mo .rv::after{content:"";position:absolute;inset:0;z-index:3;background:var(--ink);transform-origin:top;transition:transform 1.3s var(--ease);pointer-events:none}
.mo .rv.in::after{transform:scaleY(0)}
.mo .rv img{transform:scale(1.2);transition:transform 1.9s var(--ease)}
.mo .rv.in img{transform:none}
@supports(animation-timeline:view()){.mo .par{animation:par linear both;animation-timeline:view()}}
@keyframes par{from{transform:translateY(-7%)}to{transform:translateY(7%)}}
.mo .bars i{height:0;transition:height 1.1s var(--ease);transition-delay:calc(var(--n)*45ms)}
.mo .in .bars i{height:calc(var(--h)*1%)}
.mo .in .fix .bars i{animation:morph 3s var(--ease) both;animation-delay:calc(var(--n)*45ms)}
@keyframes morph{0%{height:0}35%{height:calc(var(--a)*1%)}60%{height:calc(var(--a)*1%)}100%{height:calc(var(--b)*1%)}}
.mo .daw .head{display:block;transform:translateX(-100%);animation:sweep 9s linear infinite}
.mo .daw.off .head{animation-play-state:paused}
@keyframes sweep{to{transform:none}}
@media(hover:hover){.mo ul.plain li::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--paper);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.mo ul.plain li:hover::after{transform:none}
.mo .ladder tr{transition:opacity .9s var(--ease),transform .9s var(--ease),background .4s}
.mo .ladder.in tr:hover{background:rgba(245,245,243,.035)}
.mo .ladder h3{transition:transform .5s var(--ease)}
.mo .ladder tr:hover h3{transform:translateX(10px)}}
.mo .btn,.mo nav a.cta{transition:background .35s,color .35s,border-color .35s,transform .25s var(--ease)}
.mo .btn::after{transition:transform .35s var(--ease)}
.mo .btn:hover::after{transform:translateX(5px)}
.mo details::details-content{block-size:0;overflow:clip;transition:block-size .5s var(--ease),content-visibility .5s allow-discrete}
.mo details[open]::details-content{block-size:auto}


/* header, menu sheet, dock */
.skip{position:absolute;left:-999px;top:8px}
.skip:focus{left:8px;z-index:100;background:var(--paper);color:var(--ink);padding:10px 14px;font:500 14px var(--mono)}
.menu,.dock{display:none}
.dnav{margin-left:auto}
.dnav+.lang{margin-left:var(--s3)}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1px solid var(--rule);font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.menu summary::-webkit-details-marker{display:none}
.menu summary i{display:block;width:14px;height:8px;border-top:2px solid var(--paper);border-bottom:2px solid var(--paper)}
.menu{border:0;padding:0}
.mo .menu::details-content,.menu::details-content{block-size:auto;overflow:visible;transition:none}
.menu[open] summary i{border:0;height:14px;position:relative}
.menu[open] summary i::before,.menu[open] summary i::after{content:"";position:absolute;left:-1px;right:-1px;top:6px;border-top:2px solid var(--paper)}
.menu[open] summary i::before{transform:rotate(45deg)}.menu[open] summary i::after{transform:rotate(-45deg)}
.menu[open] .o,.menu:not([open]) .c{display:none}
.mnav{position:fixed;left:0;right:0;top:65px;bottom:0;z-index:9;background:var(--ink);padding:var(--s2) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow-y:auto}
.mnav a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--rule);font:600 clamp(26px,8vw,38px)/1 var(--display);letter-spacing:.02em;text-transform:uppercase;text-decoration:none;color:var(--paper)}
.mnav a::after{content:"\2192";font:400 20px var(--mono);color:var(--graphite)}
.mnav a[aria-current]{color:var(--graphite)}
.mnav .btn{margin-top:auto;border:1px solid var(--paper);background:var(--paper);color:var(--ink);font:600 16px var(--body);letter-spacing:0;text-transform:none;justify-content:center;gap:10px;padding:16px}
.mnav .btn::after{color:var(--ink);font:inherit;margin:0}
.mnav .mlang{margin-top:var(--s2);border:0;padding:8px 0;font:400 13px var(--mono);letter-spacing:.04em;text-transform:none;color:var(--graphite)}
.mnav .mlang::after{content:none}
html.noscroll{overflow:hidden}
.dock{position:fixed;z-index:8;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));background:var(--paper);color:var(--ink);text-align:center;padding:16px;font:600 15px var(--body);text-decoration:none}
.js .dock{transform:translateY(calc(100% + 28px))}
.js .dock.in{transform:none}
@media(prefers-reduced-motion:no-preference){
.js .dock{transition:transform .5s var(--ease)}
.menu[open] .mnav{animation:sheet .4s var(--ease)}
.menu[open] .mnav>*{animation:rise .55s var(--ease) both;animation-delay:calc(var(--k,0)*55ms + 90ms)}
.mnav>:nth-child(1){--k:1}.mnav>:nth-child(2){--k:2}.mnav>:nth-child(3){--k:3}.mnav>:nth-child(4){--k:4}.mnav>:nth-child(5){--k:5}.mnav>:nth-child(6){--k:6}.mnav>:nth-child(7){--k:7}.mnav>:nth-child(8){--k:8}
@keyframes sheet{from{opacity:0;transform:translateY(-8px)}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
}
/* journey cues */
#paths .ab>div:target{background:rgba(245,245,243,.05);outline:1px solid var(--rule);outline-offset:12px}
.pc .go::after{content:"";}
@media(prefers-reduced-motion:no-preference){#paths .ab>div{transition:background .6s,outline-color .6s}.pc{transition:background .35s}}
@media(hover:hover){.pc:hover{background:rgba(245,245,243,.035)}}

@media(max-width:760px){
header{background:rgba(10,10,10,.98);-webkit-backdrop-filter:none;backdrop-filter:none}
header .wrap{min-height:64px;flex-wrap:nowrap}
.brand{font-size:13px;gap:8px}.brand svg{width:20px;height:20px}
.dnav,.lang{display:none}
.menu{display:block;margin-left:auto}
.dock{display:block}
[id]{scroll-margin-top:76px}
footer{padding-bottom:104px}
.hero{padding:var(--s4) 0}
.hero .wrap{grid-template-columns:1fr;grid-template-areas:"text" "cards" "room";gap:var(--s4)}
.hero .btn{display:block;text-align:center}
.btn.ghost{margin:var(--s1) 0 0}
.room{aspect-ratio:auto;padding:22px 0}
.room .daw{margin:0 -4% 0 10%}
.pcards{grid-template-columns:1fr;gap:0}
.pc{padding:var(--s2) 0}
.samples,.quotes,.teach,.ab,ul.plain{grid-template-columns:1fr}
.promises{grid-template-columns:1fr;gap:var(--s2)}
}