/* Layout: mobile-first single column, charcoal "stage" bands against off-white paper; the infinity mark is the one bold moment. */
:root{
  --paper:#F6F5F2; --ink:#171717; --card:#FFFFFF; --line:#DDDBD5; --mute:#5E5C57;
  --accent:#FF5A1F; --stage:#171717; --on-stage:#F6F5F2; --stage-mute:#A9A6A0; --stage-line:#34332F;
  --f-display:"Montserrat","Segoe UI",system-ui,sans-serif;
  --f-body:"Raleway","Segoe UI",system-ui,sans-serif;
  --f-mono:"DM Mono",ui-monospace,Menlo,monospace;
  --gut:max(16px,env(safe-area-inset-left,0px));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#101010;--ink:#F3F1EC;--card:#1A1A19;--line:#2F2E2B;--mute:#A4A19B;--stage:#1B1B1A;--stage-line:#34332F;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#101010;--ink:#F3F1EC;--card:#1A1A19;--line:#2F2E2B;--mute:#A4A19B;--stage:#1B1B1A;--stage-line:#34332F;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--f-body);overflow-x:hidden;-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--stage)}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{padding-left:var(--gut);padding-right:max(16px,env(safe-area-inset-right,0px));max-width:1240px;margin:0 auto}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.02em;line-height:1}
.eyebrow{font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 14px}
.stage .eyebrow{color:var(--stage-mute)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;border:2px solid var(--ink);background:transparent;color:var(--ink);font:600 16px var(--f-body);text-decoration:none;cursor:pointer;transition:transform .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#171717}
.stage .btn{border-color:var(--on-stage);color:var(--on-stage)}
.stage .btn.primary{border-color:var(--accent);color:#171717}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--stage);color:var(--on-stage)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font:800 22px var(--f-display);letter-spacing:.02em;text-decoration:none}
.logo svg{width:34px;height:20px}
.menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--stage-line);background:transparent;color:inherit;font:500 13px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
nav.links{display:none}
.sheet{position:fixed;inset:0;z-index:70;background:var(--stage);color:var(--on-stage);padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gut) calc(env(safe-area-inset-bottom,0px) + 24px);display:flex;flex-direction:column;transform:translateY(-100%);visibility:hidden;transition:transform .45s cubic-bezier(.7,0,.2,1),visibility 0s .45s}
.sheet.open{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.sheet-head{display:flex;justify-content:space-between;align-items:center;height:50px}
.sheet ul{list-style:none;margin:auto 0;padding:0;display:grid;gap:4px}
.sheet a.big{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--stage-line);font:800 clamp(34px,10vw,56px)/1.05 var(--f-display);letter-spacing:-.02em;text-decoration:none}
.sheet a.big small{font:400 12px var(--f-mono);color:var(--stage-mute);letter-spacing:.1em}
.sheet a.big:hover{color:var(--accent)}

/* hero */
.stage{background:var(--stage);color:var(--on-stage)}
.hero{padding-block:36px 0;overflow:hidden}
.hero h1{font-weight:800;font-size:clamp(46px,13.2vw,128px);letter-spacing:-.035em;line-height:.93;max-width:12ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p.lead{font-size:clamp(17px,4.4vw,21px);color:var(--stage-mute);max-width:46ch;margin:22px 0 28px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.cta-row .btn{flex:1 1 200px}
.canvas-box{position:relative;margin-top:26px;height:clamp(210px,52vw,360px)}
.canvas-box canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.canvas-hint{position:absolute;right:0;bottom:8px;font:400 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--stage-mute)}
.marquee{border-top:1px solid var(--stage-line);margin-top:6px;overflow:hidden;white-space:nowrap}
.marquee div{display:inline-flex;animation:slide 26s linear infinite;padding:16px 0}
.marquee span{font:800 clamp(22px,6vw,34px) var(--f-display);letter-spacing:-.01em;padding-right:34px}
.marquee span:nth-child(3n+2){color:var(--accent)}
@keyframes slide{to{transform:translateX(-50%)}}

/* manifesto */
.manifesto{padding-block:72px}
.manifesto p{font:700 clamp(26px,6.6vw,52px)/1.12 var(--f-display);letter-spacing:-.02em;margin:0;max-width:22ch;text-wrap:pretty}
.manifesto p b{font-weight:700;color:var(--accent)}
.manifesto .sub{font:400 17px/1.55 var(--f-body);letter-spacing:0;color:var(--mute);max-width:52ch;margin-top:24px}

/* router */
.router{padding-block:56px 64px;border-block:1px solid var(--line)}
.router h2{font-size:clamp(30px,8vw,56px);max-width:16ch}
.chips{display:grid;gap:10px;margin:26px 0;grid-template-columns:1fr}
.chip{text-align:left;min-height:60px;padding:14px 18px;border-radius:16px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:500 17px/1.3 var(--f-body);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:border-color .2s,transform .2s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#171717}
.answer{min-height:150px;border-radius:20px;background:var(--stage);color:var(--on-stage);padding:24px;display:grid;gap:12px;align-content:start}
.answer .tag{font:500 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.answer h3{font-size:clamp(28px,7vw,44px)}
.answer p{margin:0;color:var(--stage-mute);max-width:52ch}
.answer a{color:var(--accent);font-weight:600}

/* divisions */
.divs{padding-block:72px 40px}
.divs>.wrap>h2{font-size:clamp(36px,10vw,88px);max-width:13ch;margin-bottom:34px}
.div-grid{display:grid;gap:18px}
.div{position:relative;border-radius:24px;background:var(--card);border:1.5px solid var(--line);padding:26px 22px 24px;display:flex;flex-direction:column;gap:18px;min-width:0}
.div .mark{display:flex;justify-content:space-between;align-items:flex-start}
.div .glyph{width:58px;height:58px;border-radius:16px;background:var(--stage);display:grid;place-items:center}
.div .glyph svg{width:30px;height:30px}
.div .code{font:500 12px var(--f-mono);letter-spacing:.12em;color:var(--mute)}
.div h3{font-size:clamp(32px,8vw,46px)}
.div h3 span{color:var(--accent)}
.div .what{margin:0;color:var(--mute)}
.div ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.div li{font:500 13px var(--f-mono);padding:8px 12px;border-radius:999px;border:1.5px solid var(--line)}
.div .go{margin-top:auto;font:600 16px var(--f-body);text-decoration:none;display:inline-flex;gap:8px;align-items:center;min-height:44px}
.div .go:hover{color:var(--accent)}
.div:target{border-color:var(--accent)}

/* work */
.work{padding-block:64px 72px}
.work h2{font-size:clamp(32px,8vw,64px);max-width:15ch}
.work .note{color:var(--stage-mute);max-width:50ch;margin:16px 0 28px}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 18px;margin:0 calc(var(--gut)*-1);-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.proj{flex:0 0 min(82vw,360px);scroll-snap-align:start;border-radius:22px;border:1.5px solid var(--stage-line);overflow:hidden;background:#222220;display:flex;flex-direction:column}
.proj .art{height:200px;position:relative;overflow:hidden}
.proj .body{padding:18px 18px 22px;display:grid;gap:8px}
.proj .lab{font:500 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.proj h3{font-size:24px;line-height:1.1}
.proj p{margin:0;color:var(--stage-mute);font-size:15px}
.art svg{width:100%;height:100%;display:block}

/* approach */
.approach{padding-block:72px}
.approach h2{font-size:clamp(32px,8vw,64px);max-width:14ch;margin-bottom:34px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:56px 1fr;gap:6px 14px;padding:22px 0;border-top:1.5px solid var(--ink);counter-increment:s}
.steps li::before{content:counter(s);font:800 44px/1 var(--f-display);color:var(--accent)}
.steps h3{font-size:26px;margin-bottom:6px}
.steps p{margin:0;color:var(--mute);max-width:46ch}

/* learn */
.learn{padding-block:64px;background:var(--accent);color:#171717}
.learn .eyebrow{color:#171717;opacity:.75}
.learn h2{font-size:clamp(34px,9vw,76px);max-width:14ch}
.learn p.lead{max-width:50ch;margin:18px 0 28px;font-size:18px}
.sessions{display:grid;gap:12px}
.sess{background:#171717;color:#F6F5F2;border-radius:18px;padding:20px;display:grid;gap:6px}
.sess b{font:700 22px var(--f-display);letter-spacing:-.01em}
.sess span{color:#B9B6AF;font-size:15px}
.sess em{font:500 11px var(--f-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* contact */
.contact{padding-block:72px 56px}
.contact h2{font-size:clamp(38px,11vw,104px);max-width:11ch;font-weight:800}
.contact h2 em{font-style:normal;color:var(--accent)}
.contact p.lead{color:var(--stage-mute);max-width:46ch;margin:18px 0 30px}
form{display:grid;gap:16px;max-width:640px}
label{display:grid;gap:8px;font:500 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--stage-mute)}
input,select,textarea{width:100%;min-height:54px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--stage-line);background:#232321;color:var(--on-stage);font:400 17px var(--f-body);letter-spacing:0;text-transform:none}
textarea{min-height:130px;resize:vertical}
input::placeholder,textarea::placeholder{color:#7C7973}
.out{display:none;margin-top:22px;max-width:640px;border-radius:18px;background:#232321;border:1.5px solid var(--accent);padding:20px;gap:14px}
.out.show{display:grid}
.out pre{margin:0;white-space:pre-wrap;word-break:break-word;font:400 14px/1.6 var(--f-mono);color:var(--on-stage)}
.out small{color:var(--stage-mute)}
.err{color:#FF9A78;font-size:14px;min-height:0;margin:0}

footer{background:var(--stage);color:var(--on-stage);border-top:1px solid var(--stage-line);padding-block:36px calc(36px + env(safe-area-inset-bottom,0px))}
footer .cols{display:grid;gap:28px}
footer h4{font:500 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--stage-mute);margin:0 0 10px}
footer a{display:block;padding:7px 0;text-decoration:none}
footer a:hover{color:var(--accent)}
footer .fine{margin-top:32px;font:400 12px var(--f-mono);color:var(--stage-mute);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media(min-width:760px){
  body{font-size:18px}
  .chips{grid-template-columns:1fr 1fr}
  .div-grid{grid-template-columns:1fr 1fr}
  .sessions{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(4,1fr);gap:22px}
  .steps li{grid-template-columns:1fr;border-top:1.5px solid var(--ink)}
  .rail{padding:0 var(--gut);margin:0 calc(var(--gut)*-1)}
  .hero .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
  .canvas-box{margin-top:0;height:420px}
  .proj{flex-basis:340px}
}
@media(min-width:1000px){
  nav.links{display:flex;gap:28px}
  nav.links a{font:500 14px var(--f-body);text-decoration:none;padding:10px 0}
  nav.links a:hover{color:var(--accent)}
  header.top .wrap{height:72px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee div{animation:none}
  .sheet,.btn,.chip{transition:none}
}

:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
nav.links a[aria-current="page"]{color:var(--accent)}
.sheet a.big[aria-current="page"]{color:var(--accent)}
.phero{padding-block:44px 56px}
.phero h1{font-weight:800;font-size:clamp(46px,13vw,132px);letter-spacing:-.035em;line-height:.93}
.phero h1 em{font-style:normal;color:var(--accent)}
.phero .lead{font-size:clamp(18px,4.6vw,24px);color:var(--stage-mute);max-width:44ch;margin:22px 0 28px}
.crumb{font:500 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--stage-mute);margin:0 0 22px}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--accent)}
.sec{padding-block:64px}
.sec>.wrap>h2{font-size:clamp(30px,8vw,60px);max-width:16ch;margin-bottom:30px}
.offers{list-style:none;margin:0;padding:0;display:grid;gap:0}
.offers li{display:grid;gap:8px;padding:24px 0;border-top:1.5px solid var(--ink)}
.offers h3{font-size:clamp(24px,6vw,34px)}
.offers p{margin:0;color:var(--mute);max-width:52ch}
.offers .for{font:500 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.twocol{display:grid;gap:18px}
.linkcard{display:flex;flex-direction:column;gap:10px;text-decoration:none;border:1.5px solid var(--line);background:var(--card);border-radius:20px;padding:22px;min-height:150px;transition:border-color .2s,transform .2s}
.linkcard:hover{border-color:var(--accent);transform:translateY(-3px)}
.linkcard b{font:800 26px var(--f-display);letter-spacing:-.01em}
.linkcard span{color:var(--mute);font-size:15px}
.linkcard i{font-style:normal;margin-top:auto;font:600 15px var(--f-body);color:var(--accent)}
.band{padding-block:56px;background:var(--accent);color:#171717}
.band h2{font-size:clamp(30px,8vw,64px);max-width:14ch;margin-bottom:22px}
.band .btn{border-color:#171717;color:#171717}
.band .btn.dark{background:#171717;color:#F6F5F2}
.principles{display:grid;gap:0;list-style:none;margin:0;padding:0}
.principles li{padding:22px 0;border-top:1.5px solid var(--ink)}
.principles h3{font-size:26px;margin-bottom:6px}.principles p{margin:0;color:var(--mute);max-width:52ch}
.proj.wide{flex:initial}
.concept-grid{display:grid;gap:16px}
@media(min-width:760px){.twocol{grid-template-columns:1fr 1fr}.offers li{grid-template-columns:1fr 1.3fr;gap:24px;align-items:start}.concept-grid{grid-template-columns:1fr 1fr}.principles{grid-template-columns:1fr 1fr;column-gap:32px}}
@media(min-width:1000px){.twocol.three{grid-template-columns:repeat(3,1fr)}}

.aud{display:inline-flex;gap:6px;padding:5px;border-radius:999px;border:1.5px solid var(--ink);margin-bottom:22px}
.aud-btn{min-height:46px;padding:0 20px;border-radius:999px;border:0;background:transparent;color:var(--ink);font:600 16px var(--f-body);cursor:pointer}
.aud-btn[aria-pressed="true"]{background:var(--accent);color:#171717}
.orbit-wrap{position:relative;height:clamp(320px,92vw,540px);border-radius:26px;background:var(--stage);border:1.5px solid var(--stage-line);overflow:hidden}
.orbit-wrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.orbit-hint{position:absolute;left:16px;bottom:12px;font:400 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--stage-mute)}
.nogl-msg{display:none;position:absolute;inset:0;margin:0;padding:24px;color:var(--stage-mute);align-content:center}
.orbit-wrap.nogl .nogl-msg{display:grid}.orbit-wrap.nogl canvas,.orbit-wrap.nogl .orbit-hint{display:none}
.skill-panel{margin-top:16px;border-radius:22px;background:var(--card);border:1.5px solid var(--line);padding:22px;display:grid;gap:10px;justify-items:start}
.skill-panel .who{font:500 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.skill-panel h3{font-size:clamp(28px,7vw,40px)}.skill-panel p{margin:0;max-width:56ch;color:var(--mute)}
.skill-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.skill-btn{min-height:46px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:500 15px var(--f-body);cursor:pointer}
.skill-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.canvas-box{height:clamp(290px,82vw,440px)}
@media(min-width:760px){.canvas-box{height:460px}}

/* brand */
.logo{gap:12px}
.logo svg{width:auto;height:34px;aspect-ratio:54/49}
.logo .wm{font:700 17px var(--f-display);letter-spacing:.34em;margin-right:-.34em}
.logo .wm b{color:var(--accent);font-weight:700}
.foot-logo{width:min(230px,72%);margin-bottom:14px}
.foot-logo svg{width:100%;height:auto;display:block;aspect-ratio:auto}
.foot-contact{margin:0;color:var(--stage-mute);max-width:34ch;font-size:15px;line-height:1.7}
h1,h2,h3{letter-spacing:-.03em}
.hero h1{font-size:clamp(40px,11vw,112px);max-width:11ch}
.phero h1{font-size:clamp(40px,10.5vw,120px);overflow-wrap:anywhere}
.manifesto p{font-size:clamp(24px,6vw,48px)}
.contact h2{font-size:clamp(34px,9.5vw,96px)}
.divs>.wrap>h2{font-size:clamp(32px,9vw,80px)}
.marquee span{font-size:clamp(20px,5.4vw,32px)}
.btn,.chip,.skill-btn,.aud-btn{font-family:var(--f-body)}
.cc{margin:0 0 30px;max-width:640px;border-radius:22px;background:#232321;border:1.5px solid var(--stage-line);padding:22px;display:grid;gap:4px}
.cc .nm{font:700 clamp(26px,6vw,34px) var(--f-display);color:var(--accent);letter-spacing:-.02em}
.cc .rl{color:var(--stage-mute);margin-bottom:12px}
.cc .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--stage-line);min-width:0}
.cc .row span{min-width:0;overflow-wrap:anywhere}
.cc .row button{flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--stage-line);background:transparent;color:var(--on-stage);font:500 13px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.cc .row.addr button{display:none}

/* logo animation */
.lm-ring,.lm-dot,.lm-smile{transform-box:fill-box;transform-origin:center}
.logo .lm-ring{animation:lm-ring 1.1s cubic-bezier(.2,.8,.2,1) both}
.logo .lm-smile{animation:lm-grin .6s .75s cubic-bezier(.3,1.6,.5,1) both}
.logo .lm-dot,.foot-logo .lm-dot{animation:lm-pop .55s .45s cubic-bezier(.3,1.8,.5,1) both,lm-bob 3.4s 1.2s ease-in-out infinite}
.logo .lm-smile,.foot-logo .lm-smile{transition:transform .3s}
a.logo:hover .lm-smile,.foot-logo:hover .lm-smile{transform:scale(1.15,1.7) translateY(-2%)}
a.logo:hover .lm-dot,.foot-logo:hover .lm-dot{animation:lm-bob .5s ease-in-out infinite}
a.logo:hover .lm-ring{animation:lm-wiggle .6s ease}
.foot-logo.pre .lm-l,.foot-logo.pre .lm-ring,.foot-logo.pre .lm-dot,.foot-logo.pre .lm-smile{opacity:0}
.foot-logo.play .lm-l{animation:lm-rise .7s calc(var(--i)*.09s + .3s) cubic-bezier(.2,.8,.2,1) both}
.foot-logo.play .lm-ring{animation:lm-ring 1.1s cubic-bezier(.2,.8,.2,1) both}
.foot-logo.play .lm-smile{animation:lm-grin .6s .75s cubic-bezier(.3,1.6,.5,1) both}
.foot-logo.play .lm-dot{animation:lm-pop .55s .45s cubic-bezier(.3,1.8,.5,1) both,lm-bob 3.4s 1.2s ease-in-out infinite}
@keyframes lm-ring{from{opacity:0;transform:rotate(-140deg) scale(.55)}to{opacity:1;transform:none}}
@keyframes lm-pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes lm-grin{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}
@keyframes lm-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14%)}}
@keyframes lm-wiggle{0%,100%{transform:none}30%{transform:rotate(-14deg)}65%{transform:rotate(9deg)}}
@keyframes lm-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.logo *,.foot-logo *{animation:none!important;transition:none!important}.foot-logo.pre *{opacity:1!important}}

/* tagline + preloader + shared sequence */
.lm-t{transform-box:fill-box;transform-origin:center}
.foot-logo.pre .lm-t{opacity:0}
.foot-logo.play .lm-t{animation:lm-rise .6s calc(1.35s + var(--i)*.16s) cubic-bezier(.2,.8,.2,1) both}
.foot-logo{cursor:pointer}
html.pre-on{overflow:hidden}
html.pre-on body>*:not(#pre){visibility:hidden}
#pre{position:fixed;inset:0;z-index:200;background:var(--stage);color:var(--on-stage);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;visibility:visible;transition:transform .7s cubic-bezier(.7,0,.2,1)}
#pre.out{transform:translateY(-100%)}
#pre svg{width:min(340px,74vw);height:auto;display:block}
#pre .pre-bar{display:block;width:min(340px,74vw);height:3px;border-radius:3px;background:var(--stage-line);overflow:hidden}
#pre .pre-bar i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
#pre.play .pre-bar i{animation:pre-fill 2.5s cubic-bezier(.4,0,.2,1) both}
#pre .pre-skip{font:500 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--stage-mute)}
@keyframes pre-fill{to{transform:scaleX(1)}}
#pre .lm-ring,#pre .lm-dot,#pre .lm-smile,#pre .lm-l,#pre .lm-t{opacity:0}
#pre.play .lm-ring{animation:lm-ring 1.1s cubic-bezier(.2,.8,.2,1) both}
#pre.play .lm-smile{animation:lm-grin .6s .75s cubic-bezier(.3,1.6,.5,1) both}
#pre.play .lm-dot{animation:lm-pop .55s .45s cubic-bezier(.3,1.8,.5,1) both,lm-bob 3.4s 1.2s ease-in-out infinite}
#pre.play .lm-l{animation:lm-rise .7s calc(var(--i)*.09s + .3s) cubic-bezier(.2,.8,.2,1) both}
#pre.play .lm-t{animation:lm-rise .6s calc(1.35s + var(--i)*.16s) cubic-bezier(.2,.8,.2,1) both}
@media(prefers-reduced-motion:reduce){html.pre-on body>*:not(#pre){visibility:visible}#pre{display:none}}

/* ===== desktop fill: two-column sections and brand visuals ===== */
.two{display:block}
.two .cr{margin-top:36px}
.team-wrap{width:min(440px,100%);margin-inline:auto;color:var(--ink)}
.stage .team-wrap,.team-wrap.on-stage{color:var(--on-stage)}
.team{display:block;width:100%;height:auto;overflow:visible}
.t-ring{transform-origin:210px 210px;animation:t-spin 90s linear infinite}
.t-flow{animation:t-flow 2.6s linear infinite}
.t-mark .lm-dot{animation:lm-bob 3.4s ease-in-out infinite}
.t-mark .lm-ring,.t-mark .lm-dot,.t-mark .lm-smile{transform-box:fill-box;transform-origin:center}
.t-mark{color:var(--ink)}.stage .t-mark{color:var(--on-stage)}
.t-node{cursor:pointer;text-decoration:none}
.t-node rect{fill:var(--card);stroke:var(--line);stroke-width:1.5;transition:fill .25s,stroke .25s}
.t-node text{font:700 15px var(--f-display);fill:var(--ink);transition:fill .25s}
.t-node:hover rect,.t-node:focus-visible rect{fill:var(--accent);stroke:var(--accent)}
.t-node:hover text,.t-node:focus-visible text{fill:#171717}
.t-node:focus-visible{outline:none}.t-node:focus-visible rect{stroke:var(--ink);stroke-width:3}
.stage .t-node rect{fill:#232321;stroke:var(--stage-line)}.stage .t-node text{fill:var(--on-stage)}
.stage .t-node:hover rect{fill:var(--accent);stroke:var(--accent)}.stage .t-node:hover text{fill:#171717}
@keyframes t-spin{to{transform:rotate(360deg)}}
@keyframes t-flow{to{stroke-dashoffset:-64}}

.answer{position:relative;overflow:hidden}
.answer::after{content:"";position:absolute;right:-24px;bottom:-24px;width:220px;height:220px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='102 23 54 49' aria-hidden='true'%3E%3Cpath fill-rule='nonzero' fill='%23F6F5F2' fill-opacity='1' d='M 137.9375 44.511719 L 147.089844 44.476562 C 149.269531 44.46875 150.539062 46.21875 150.425781 48.261719 C 150.136719 53.566406 148.140625 58.429688 144.460938 62.292969 C 139.988281 66.988281 133.890625 69.640625 127.347656 69.464844 C 116.246094 69.167969 106.945312 60.671875 105.714844 49.625 C 104.25 36.507812 115.292969 24.070312 128.769531 25.253906 C 130.480469 25.40625 131.335938 27.296875 131.179688 28.578125 C 130.957031 30.445312 129.480469 31.308594 127.703125 31.269531 C 122.722656 31.164062 118.09375 33.636719 115.199219 37.339844 C 111.964844 41.476562 110.886719 46.738281 112.375 51.695312 C 114.554688 58.957031 121.273438 63.707031 128.726562 63.421875 C 136.011719 63.144531 142.445312 57.875 144.050781 50.550781 L 137.996094 50.515625 C 136.355469 50.507812 135.214844 49.15625 135.144531 47.667969 C 135.074219 46.121094 136.152344 44.515625 137.9375 44.511719 '/%3E%3Cpath fill-rule='nonzero' fill='%23FF5A1F' fill-opacity='1' d='M 147.296875 32.59375 C 147.296875 35.457031 144.976562 37.773438 142.117188 37.773438 C 139.257812 37.773438 136.9375 35.457031 136.9375 32.59375 C 136.9375 29.734375 139.257812 27.417969 142.117188 27.417969 C 144.976562 27.417969 147.296875 29.734375 147.296875 32.59375 '/%3E%3Cpath fill-rule='nonzero' fill='%23FF5A1F' fill-opacity='1' d='M 134.5625 53.25 C 135.082031 52.625 136.019531 53.085938 136.285156 53.464844 C 136.707031 54.054688 136.554688 54.664062 136.109375 55.265625 C 134.214844 57.84375 131.171875 59.175781 128.003906 59.140625 C 124.875 59.105469 121.84375 57.617188 119.992188 54.949219 C 119.539062 54.296875 119.832031 53.449219 120.433594 53.128906 C 121.132812 52.753906 121.652344 53.113281 122.175781 53.6875 C 125.53125 57.371094 131.367188 57.085938 134.5625 53.25 '/%3E%3C/svg%3E") center/contain no-repeat;opacity:.1;pointer-events:none}
.answer>*{position:relative;z-index:1}

/* orbit art (home teaser + division heroes) */
.art-orb,.teaser-link{display:none}
.band-in{display:flex;align-items:center;justify-content:space-between;gap:32px}
.band-in>div:first-child{min-width:0}
.band-mark{display:none;color:#171717}
.band-mark svg{height:clamp(140px,19vw,250px);width:auto;display:block}
.band-mark .lm-dot,.band-mark .lm-smile{fill:#F6F5F2}
.band-mark .lm-ring,.band-mark .lm-dot,.band-mark .lm-smile{transform-box:fill-box;transform-origin:center}
.band-mark .lm-dot{animation:lm-bob 3.4s ease-in-out infinite}
.band-mark:hover .lm-smile{animation:lm-grinx .7s ease}
.band-mark:hover .lm-ring{animation:lm-wiggle .7s ease}
@keyframes lm-grinx{50%{transform:scale(1.2,1.8)}}
.fan{display:none}

@media(min-width:760px){.band-mark{display:block}}
@media(min-width:1000px){
  .two{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
  .two.top{align-items:start}
  .two .cr{margin-top:0}
  .manifesto .two .cl p:first-child{max-width:20ch}
  .router .two .chips{grid-template-columns:1fr}
  .router .answer{min-height:420px;padding:36px;align-content:center;position:sticky;top:96px}
  .router .answer h3{font-size:clamp(34px,3.6vw,52px)}
  .router .answer p{font-size:19px}
  .contact .two .cr{position:sticky;top:96px}
  .phero{padding-block:72px 84px}
  .phero .two{align-items:center}
  .art-orb{display:block;position:relative;width:min(460px,100%);aspect-ratio:1;margin-inline:auto}
  .teaser-link{display:block;text-decoration:none;color:inherit}
  .teaser-link:hover .core{box-shadow:0 0 0 14px rgba(255,90,31,.18),0 0 80px rgba(255,90,31,.5)}
  .art-orb .ring{position:absolute;border-radius:50%;border:1.5px dashed var(--stage-line);animation:t-spin var(--d,40s) linear infinite}
  .art-orb .r1{inset:2%;--d:56s}.art-orb .r2{inset:17%;--d:38s;animation-direction:reverse}.art-orb .r3{inset:31%;--d:26s}
  .art-orb .ring i{position:absolute;top:-8px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--c)}
  .art-orb .core{position:absolute;inset:36%;border-radius:50%;background:#232321;display:grid;place-items:center;box-shadow:0 0 0 10px rgba(255,90,31,.12),0 0 60px rgba(255,90,31,.35);transition:box-shadow .4s}
  .art-orb .core>svg{width:52%;height:52%}
  .art-orb .pill{position:absolute;padding:10px 16px;border-radius:999px;background:#232321;border:1.5px solid var(--stage-line);color:var(--on-stage);font:600 14px var(--f-display);white-space:nowrap;animation:floaty 6s ease-in-out infinite}
  .art-orb .p1{top:6%;left:0}.art-orb .p2{top:20%;right:-2%;animation-delay:-1.5s}.art-orb .p3{bottom:20%;left:-3%;animation-delay:-3s}.art-orb .p4{bottom:5%;right:4%;animation-delay:-4.5s}
  .art-orb.light .ring{border-color:var(--line)}
  .art-orb.light .core{background:var(--accent);box-shadow:0 0 0 10px rgba(255,90,31,.14),0 20px 60px rgba(255,90,31,.35)}
  .art-orb.light .pill{background:var(--card);border-color:var(--line);color:var(--ink)}
  .core-mark{width:56%;color:#171717}.core-mark svg{width:100%;height:auto;display:block}
  .core-mark .lm-dot,.core-mark .lm-smile{fill:#F6F5F2}
  .core-mark .lm-dot{transform-box:fill-box;transform-origin:center;animation:lm-bob 3.4s ease-in-out infinite}
  .fan{display:block;position:relative;height:420px;width:min(540px,100%);margin-inline:auto;text-decoration:none;color:inherit}
  .fan-card{position:absolute;width:236px;border-radius:20px;overflow:hidden;background:#222220;border:1.5px solid var(--stage-line);box-shadow:0 24px 48px rgba(0,0,0,.4);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
  .fan-card .fa{display:block;height:150px}.fan-card .fa svg{width:100%;height:100%;display:block}
  .fan-card .fb{display:grid;gap:4px;padding:14px 16px 16px}
  .fan-card em{font:500 11px var(--f-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
  .fan-card b{font:700 17px/1.2 var(--f-display);color:var(--on-stage)}
  .fc1{left:0;top:96px;transform:rotate(-9deg);z-index:1}.fc2{left:96px;top:30px;transform:rotate(-3deg);z-index:2}
  .fc3{left:196px;top:100px;transform:rotate(4deg);z-index:3}.fc4{left:296px;top:34px;transform:rotate(9deg);z-index:4}
  .fan:hover .fc1,.fan:focus-visible .fc1{transform:translate(-18px,14px) rotate(-12deg)}
  .fan:hover .fc2,.fan:focus-visible .fc2{transform:translate(-6px,-14px) rotate(-5deg)}
  .fan:hover .fc3,.fan:focus-visible .fc3{transform:translate(6px,14px) rotate(6deg)}
  .fan:hover .fc4,.fan:focus-visible .fc4{transform:translate(18px,-14px) rotate(12deg)}
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.t-ring,.t-flow,.t-mark *,.art-orb *,.band-mark *,.core-mark *{animation:none!important}}

.t-node text{text-anchor:middle}
.t-hub{fill:var(--paper)}.stage .t-hub{fill:var(--stage)}
.two .cl h2{margin-bottom:22px}
.two .cl>p[style]{margin-top:0!important}
@media(min-width:1000px){
  .fan{height:520px;width:min(560px,100%)}
  .fan-card{width:250px}
  .fc1{left:0;top:10px;transform:rotate(-3deg)}.fc2{left:300px;top:50px;transform:rotate(3deg)}
  .fc3{left:16px;top:270px;transform:rotate(2deg)}.fc4{left:308px;top:300px;transform:rotate(-3deg)}
  .fan:hover .fc1,.fan:focus-visible .fc1{transform:translate(-8px,-8px) rotate(-5deg)}
  .fan:hover .fc2,.fan:focus-visible .fc2{transform:translate(8px,-8px) rotate(5deg)}
  .fan:hover .fc3,.fan:focus-visible .fc3{transform:translate(-8px,8px) rotate(4deg)}
  .fan:hover .fc4,.fan:focus-visible .fc4{transform:translate(8px,8px) rotate(-5deg)}
}

/* footer: logo | contact | divisions | explore */
footer .cols{display:grid;gap:30px;grid-template-columns:1fr}
@media(min-width:620px){footer .cols{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){footer .cols{grid-template-columns:1.25fr 1.35fr .8fr .8fr;gap:48px}}
footer .foot-logo{margin-bottom:0}
footer .foot-contact{max-width:none;font-size:16px}

/* seo pages */
.loc{font:500 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--stage-mute);margin:-6px 0 22px}
.loc::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:10px}
h1.long{font-weight:800;font-size:clamp(34px,8.6vw,84px);letter-spacing:-.03em;line-height:1;overflow-wrap:anywhere}
h1.long em{font-style:normal;color:var(--accent)}
.intro{color:var(--mute);max-width:56ch;margin:-8px 0 28px}
.faq{border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1.5px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;min-height:44px;font:700 clamp(18px,4.4vw,22px)/1.3 var(--f-display);display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:30px;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:0 0 22px;color:var(--mute);max-width:64ch}
.nap{display:grid;gap:6px;max-width:520px;border:1.5px solid var(--line);background:var(--card);border-radius:22px;padding:24px;overflow-wrap:anywhere}
.nap b{font:800 26px var(--f-display);color:var(--ink)}

/* scroll progress + whatsapp */
.sp{position:fixed;right:10px;top:50%;transform:translateY(-50%);height:90px;display:none;flex-direction:column;align-items:center;gap:8px;z-index:40;pointer-events:none;font:500 10px var(--f-mono);color:var(--mute)}
.sp i{display:block;width:2px;flex:1;background:var(--accent);transform-origin:top;transform:scaleY(0)}
@media(min-width:900px){.sp{display:flex}}
.wa{position:fixed;right:16px;bottom:16px;z-index:45;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border-radius:999px;background:#25D366;color:#0b2e17;font:700 14px var(--f-body);text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.wa span{display:none}
@media(min-width:700px){.wa span{display:inline}}
.wa:hover{transform:translateY(-2px)}
html.pre-on .wa,html.pre-on .sp{display:none}

/* portfolio */
.sh{font-weight:800;font-size:clamp(26px,6vw,44px);letter-spacing:-.02em;line-height:1.05;margin:0 0 12px;color:var(--on-stage)}
.shot-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:760px){.shot-grid{grid-template-columns:1fr 1fr;gap:24px}}
.shot{background:#232321;border:1px solid var(--stage-line);border-radius:22px;overflow:hidden;color:var(--on-stage);display:flex;flex-direction:column}
.shot-img{display:block;position:relative;background:#171717;text-decoration:none}
.shot-img .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#2c2b28;border-bottom:1px solid var(--stage-line)}
.shot-img .bar i{width:9px;height:9px;border-radius:50%;background:#55534e}
.shot-img .bar em{font:500 11px var(--f-mono);color:var(--stage-mute);margin-left:8px;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot-img img,.shot-img svg{display:block;width:100%;height:auto;transition:transform .5s}
.shot-img:hover img,.shot-img:hover svg{transform:scale(1.03)}
.shot-img{overflow:hidden}
.shot .body{padding:20px 22px 24px}
.shot .lab{font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.shot h3{margin:8px 0 8px;font:800 clamp(20px,5vw,26px) var(--f-display)}
.shot p{margin:0 0 12px;color:var(--stage-mute)}
.shot .visit{color:var(--accent);font-weight:700;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.shot-img img{aspect-ratio:2/1;object-fit:cover;object-position:top}
.shot-img svg{aspect-ratio:2/1}