/* ================= tokens (same palette as reference) ================= */
:root{
  --brand:#FF2500; --brand-600:#E02100;
  --g100:#FFFFFF; --g200:#F9F9FA; --g300:#C9CDD0; --g500:#DFE3E6; --g550:#B9BDC0; --g600:#9A9C9E;
  --g750:#707273; --g800:#555657; --g850:#434445; --g900:#1B1B1C; --g950:#171717;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --cube-size:700px; --face-w:var(--cube-size); --face-h:calc(var(--cube-size) * 9 / 16);
  --ease:cubic-bezier(.16,1,.3,1);
}
/* themes: body switches between these as sections scroll in */
.theme-brand{--dark-lift:rgba(0,0,0,.08);--bg:var(--brand);--title:var(--g500);--body:var(--g500);--support:var(--g500);--surface-support:#FF6A4D;--oncolor:var(--brand);--border:#FF7A5E;--chip:var(--g500);--chip-text:var(--brand);--btn:var(--g500);--btn-text:var(--g900)}
.theme-dark{--dark-lift:#232324;--bg:var(--g900);--title:var(--g500);--body:var(--g300);--support:var(--g750);--surface-support:var(--g750);--oncolor:var(--g900);--border:var(--g850);--chip:var(--g750);--chip-text:var(--g900);--btn:var(--g500);--btn-text:var(--g900)}
.theme-light{--dark-lift:rgba(0,0,0,.04);--bg:var(--g500);--title:var(--g900);--body:var(--g800);--support:var(--g750);--surface-support:var(--g550);--oncolor:var(--g500);--border:var(--g550);--chip:var(--g550);--chip-text:var(--g900);--btn:var(--g900);--btn-text:var(--g500)}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--body);font-family:var(--sans);font-weight:300;font-size:18px;line-height:1.44;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .6s ease,color .6s ease}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
body.locked{overflow:hidden}

/* ================= typography ================= */
.hero-t{font-weight:700;font-size:clamp(120px,10vw,200px);line-height:.88;letter-spacing:-1.5px;color:var(--title)}
.overline{font-family:var(--mono);font-size:12px;line-height:1;letter-spacing:.5px;text-transform:uppercase}
.overline-l{font-family:var(--mono);font-size:14px;line-height:1.2;letter-spacing:1px;text-transform:uppercase}
.title2{font-weight:700;font-size:48px;line-height:1.1;color:var(--title)}
.title4{font-size:24px;line-height:1.33}
.title5{font-size:20px;line-height:1.4}
.title6{font-size:18px;line-height:1.44}
.label{font-size:16px;line-height:1.5}
.small-title{color:var(--support);margin-bottom:24px}
.w{display:inline-block;opacity:.1;will-change:opacity}
.name-chip{font-family:var(--mono);font-size:14px;letter-spacing:1px;text-transform:uppercase;background:var(--surface-support);color:var(--title);padding:3px 6px 2px;border-radius:6px;vertical-align:2px}
.theme-brand .name-chip{background:rgba(0,0,0,.18)}

/* ================= layout ================= */
.container{max-width:1800px;margin:0 24px}
@media (min-width:1848px){.container{margin:0 auto}}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.s10{grid-column:span 10}.s8{grid-column:3 / span 8}.s10o{grid-column:2 / span 10}
.section{position:relative;padding:96px 0}
.gap-top{margin-top:48px}

/* ================= loader ================= */
.cover{position:fixed;inset:0;z-index:999999;background:var(--g950);display:flex;align-items:flex-end;justify-content:flex-end;padding:16px 32px;transition:transform 1s cubic-bezier(.76,0,.24,1)}
.cover.out{transform:translateY(-100%)}
.cover .num{font-weight:700;font-size:clamp(80px,10vw,200px);line-height:.88;letter-spacing:-1.5px;color:var(--g850);font-variant-numeric:tabular-nums}
.cover-progress{position:fixed;top:0;left:0;width:100%;height:4px;background:var(--brand);transform:scaleX(0);transform-origin:0 50%;z-index:9999999;pointer-events:none;transition:opacity .4s}

/* ================= fixed chrome ================= */
.header{position:fixed;top:0;left:0;width:100vw;z-index:999;padding:32px 40px 0 0;display:flex;justify-content:flex-end;align-items:center;pointer-events:none}
.header>*{pointer-events:auto}
.logo{position:absolute;left:0;top:0;width:64px;height:36px;overflow:hidden;opacity:0;transform:translateY(-100%);transition:opacity .5s,transform .6s var(--ease)}
.logo.on{opacity:1;transform:none}
.logo svg{width:100%;height:100%;display:block}
.logo svg text{fill:var(--brand)}
.theme-brand .logo svg text{fill:var(--g500)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:8px 16px;border-radius:9999px;background:var(--btn);color:var(--btn-text);font-size:16px;font-weight:300;white-space:nowrap;transition:background-color .3s,color .3s,transform .3s var(--ease);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:16px;height:16px}
.foot-l{position:fixed;left:0;bottom:0;z-index:999;padding:0 0 32px 40px}
.foot-r{position:fixed;right:0;bottom:0;z-index:999;padding:0 40px 32px 0}
.navigation{position:fixed;top:50%;left:16px;z-index:1000;transform:translateY(-50%);display:flex;flex-direction:column;opacity:0;transition:opacity .5s}
.navigation.on{opacity:1}
.nav-group a{display:flex;align-items:center;gap:8px;padding:5px 0}
.nav-line{width:8px;height:1px;background:var(--title);opacity:.25;transition:width .4s var(--ease),opacity .4s}
.nav-label{opacity:0;transform:translateX(-20%);transition:opacity .3s,transform .4s var(--ease);color:var(--title)}
.navigation:hover .nav-label{opacity:.5;transform:none}
.nav-group.active .nav-line{width:24px;opacity:1}
.navigation:hover .nav-group.active .nav-label{opacity:1}
@media (max-width:1200px){.navigation{display:none}}

/* ================= hero cube ================= */
.hero-pin{position:relative}
.section-hero{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;cursor:default}
.cube-container{position:absolute;top:50%;left:50%;width:var(--cube-size);height:var(--cube-size);transform:translate(-50%,-50%)}
.cube-scale{width:100%;height:100%;perspective:660px;transform-origin:50% 50%}
.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;will-change:transform;transition:transform .6s cubic-bezier(0,0,0,1.25);transform:rotateX(0deg) rotateY(-90deg) scale3d(.6,.6,.6)}
.face{position:absolute;left:0;top:21.875%;width:var(--face-w);height:var(--face-h);background:var(--bg);overflow:hidden;will-change:transform,opacity;transition:background-color .6s ease}
.face svg{display:block;width:100%;height:100%}
.face svg text{fill:var(--g500)}
.face.right{transform:rotateY(90deg) translateZ(calc(var(--cube-size) / 2 - 1.5px))}
.face.left{transform:rotateY(-90deg) translateZ(calc(var(--cube-size) / 2 - 1.5px));opacity:0}
@media (max-width:1440px){.cube-scale{transform:scale(.8)}}
@media (max-width:1200px){.cube-scale{transform:scale(.6)}}
@media (max-width:480px){.cube-scale{transform:scale(.4)}}
.badge-follow{position:absolute;left:0;top:0;border:1px solid var(--g500);color:var(--g500);border-radius:8px;padding:4px 8px 3px;pointer-events:none;will-change:transform;z-index:5}

/* ================= intro ================= */
.intro p{color:var(--body)}
.intro p+p{margin-top:24px}

/* ================= work (draggable) ================= */
.section-draggable{padding:0 0 80px}
.drag-outer{width:100vw;overflow:hidden;touch-action:pan-y;user-select:none;cursor:grab}
.drag-outer.dragging{cursor:grabbing}
.drag-inner{display:flex;gap:24px;padding:0 32px 0 24px;will-change:transform;width:max-content}
.project{display:flex;flex-direction:column;gap:40px;width:min(720px,48vw)}
.project-image{position:relative;aspect-ratio:1400/933;border-radius:8px;overflow:hidden}
.project-image .art{position:absolute;inset:0;transition:opacity .5s var(--ease)}
.project-image:hover .art{opacity:.6}
.overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);transition:transform .5s var(--ease);padding:16px 24px;border-radius:9999px;background:rgba(255,255,255,.85);color:var(--g950);backdrop-filter:blur(4px);white-space:nowrap;z-index:2;pointer-events:none}
.project-image:hover .overlay{transform:translate(-50%,-50%) scale(1)}
.project-content{display:grid;grid-template-columns:1fr 2fr;gap:16px}
.project-tab{display:flex;flex-direction:column;gap:16px}
.project-tab .overline-l{color:var(--support)}
.project-tab .val{color:var(--title);font-size:18px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.badge{padding:4px 6px 3px;border-radius:6px;background:var(--chip);color:var(--chip-text);transition:background-color .35s ease-out}
.project:hover .badge,.client-card:hover .badge,.note:hover .badge{background:var(--g500)}

/* project art (pure CSS, replace with images later) */
.a1{background:radial-gradient(120% 90% at 30% 20%,#4b4b4c,#121213)}
.a1 .scr{position:absolute;inset:12% 14% 18%;background:#0c0c0c;border-radius:6px;border:6px solid #2a2a2b;display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:6px;padding:6px}
.a1 .scr i{border-radius:3px;background:linear-gradient(135deg,#FF2500,#ff9a5c)}
.a1 .scr i:nth-child(1){grid-row:span 2;background:linear-gradient(160deg,#DFE3E6,#707273)}
.a1 .scr i:nth-child(3){background:linear-gradient(135deg,#f3b33d,#ffe3a1)}
.a1 .stand{position:absolute;left:50%;bottom:9%;width:18%;height:4%;background:#2a2a2b;transform:translateX(-50%);border-radius:3px}
.a2{background:#DFE3E6}
.a2 .box{position:absolute;left:14%;top:22%;width:30%;height:58%;background:var(--brand);border-radius:4px;box-shadow:18px 18px 0 #c41d00}
.a2 .box b{position:absolute;left:12%;top:10%;font:700 clamp(18px,3vw,34px)/.9 var(--sans);color:#DFE3E6;letter-spacing:-.03em}
.a2 .bag{position:absolute;right:14%;top:14%;width:28%;height:70%;background:#1B1B1C;border-radius:4px 4px 8px 8px}
.a2 .bag:before{content:"";position:absolute;left:30%;top:-12%;width:40%;height:18%;border:4px solid #1B1B1C;border-bottom:0;border-radius:40px 40px 0 0}
.a2 .bag b{position:absolute;inset:0;display:grid;place-items:center;font:700 clamp(16px,2.6vw,28px) var(--sans);color:var(--brand);letter-spacing:-.03em}
.a3{background:#6f8a9a}
.a3 .sky{position:absolute;inset:0;background:linear-gradient(#9fb5c2,#dfe3e6)}
.a3 .board{position:absolute;left:10%;right:10%;top:14%;height:48%;background:var(--brand);border:6px solid #1B1B1C;display:flex;align-items:center;padding:0 6%}
.a3 .board b{font:700 clamp(20px,4vw,48px)/.9 var(--sans);color:#DFE3E6;letter-spacing:-.03em}
.a3 .leg{position:absolute;top:62%;width:3%;height:38%;background:#1B1B1C}
.a4{background:#151516}
.a4 .reel{position:absolute;top:10%;height:80%;aspect-ratio:9/16;border-radius:10px;overflow:hidden}
.a4 .reel:nth-child(1){left:14%;background:linear-gradient(160deg,#FF2500,#6b0f00)}
.a4 .reel:nth-child(2){left:40%;background:linear-gradient(160deg,#DFE3E6,#707273);transform:translateY(-4%)}
.a4 .reel:nth-child(3){left:66%;background:linear-gradient(160deg,#f3b33d,#7a4c00)}
.a4 .reel i{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.85);transform:translate(-50%,-50%)}
.a4 .reel i:after{content:"";position:absolute;left:40%;top:30%;border-left:12px solid #1B1B1C;border-top:8px solid transparent;border-bottom:8px solid transparent}
.a5{background:#2a2a2b}
.a5 .sheet{position:absolute;top:10%;height:80%;aspect-ratio:297/420;background:#f5f2ec;border-radius:2px;box-shadow:0 12px 30px rgba(0,0,0,.35);padding:5%}
.a5 .sheet:nth-child(1){left:18%;transform:rotate(-6deg)}
.a5 .sheet:nth-child(2){left:42%;transform:rotate(3deg)}
.a5 .sheet b{display:block;font:700 clamp(18px,3vw,34px)/.9 var(--sans);color:var(--brand);letter-spacing:-.03em;margin-bottom:12%}
.a5 .sheet i{display:block;height:5px;background:#cfc8bc;border-radius:2px;margin-bottom:7px}
.a6{background:linear-gradient(135deg,#f0e6d8,#e2cfb4)}
.a6 .phone{position:absolute;left:50%;top:8%;width:28%;height:84%;transform:translateX(-50%);background:#1B1B1C;border-radius:22px;padding:7px}
.a6 .phone div{height:100%;background:#fbf7f1;border-radius:16px;padding:14% 10%;overflow:hidden}
.a6 .phone b{display:block;height:10px;width:55%;background:#FF2500;border-radius:3px;margin-bottom:16px}
.a6 .phone p{display:flex;justify-content:space-between;margin-bottom:11px}
.a6 .phone p i{height:6px;width:58%;background:#d8c9b5;border-radius:3px}
.a6 .phone p u{height:6px;width:18%;background:#1B1B1C;border-radius:3px}

/* work header bar */
.work-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:32px!important;padding-top:24px;border-top:1px solid var(--g850)}
.work-bar .overline-l{color:var(--title);display:flex;align-items:center;gap:10px;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--brand);display:inline-block;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.work-nav{display:flex;align-items:center;gap:8px}
.drag-hint{color:var(--support)!important;margin-right:8px}
.round{width:44px;height:44px;border-radius:50%;background:var(--g500);color:var(--g900);font-size:18px;display:grid;place-items:center;transition:opacity .3s,transform .3s var(--ease)}
.round:hover{transform:scale(1.06)}
.round:disabled{opacity:.3;cursor:default;transform:none}
.project-title{font-weight:700;font-size:clamp(28px,2.4vw,40px);line-height:1;letter-spacing:-.5px;color:var(--title);display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:-16px 0 -8px}
.project-title span{white-space:nowrap;font:400 14px var(--mono);letter-spacing:1px;color:var(--brand)}
.project-image{box-shadow:0 0 0 1px var(--g850)}
.project-image:after{content:"";position:absolute;inset:0;border-radius:8px;box-shadow:inset 0 0 0 0 var(--brand);transition:box-shadow .4s var(--ease);pointer-events:none}
.project:hover .project-image:after{box-shadow:inset 0 0 0 3px var(--brand)}

/* services grid */
@media (max-width:800px){.work-bar .overline-l{font-size:12px}.round{width:38px;height:38px;font-size:15px}.drag-hint{display:none}}

/* ================= clients (sticky stack) ================= */
.clients-sticky{display:flex;flex-direction:column;gap:16px}
.client-card{position:sticky;top:15vh;background:var(--bg);border:1px solid var(--g850);border-radius:6px;padding:24px;display:flex;gap:24px;align-items:center;transform-origin:50% 0;will-change:transform,opacity;transition:background-color .6s ease}
.client-logo{flex:0 0 220px;height:80px;border-radius:6px;background:var(--g500);color:var(--g900);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:24px;letter-spacing:-.5px}
.client-body{flex:1;display:grid;grid-template-columns:1fr 1fr 2fr;gap:24px;align-items:start}
.client-info{display:flex;flex-direction:column;gap:8px}
.client-info .overline-l{color:var(--g750)}
.client-info .val{color:var(--title);font-size:18px}

/* ================= notes (testimonial style) ================= */
.marquee{overflow:hidden;padding:0 0 8px}
.marquee-track{display:flex;gap:24px;width:max-content;will-change:transform}
.note{flex:0 0 458px;min-height:458px;padding:48px;border:1px solid var(--border);border-radius:8px;display:flex;align-items:flex-end;gap:24px}
.note-av{flex:0 0 64px;height:64px;border-radius:50%;background:var(--brand);color:var(--g500);display:grid;place-items:center;font-weight:700;font-size:22px;letter-spacing:-.5px}
.note-content{display:flex;flex-direction:column;gap:32px;align-items:flex-start;width:calc(100% - 88px)}
.note-content p{color:var(--title)}
.note-by{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.note-by .overline-l{color:var(--title)}

/* ================= toolkit ================= */
.toolkit{display:grid;gap:16px}
.toolkit-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tool{position:relative;min-height:320px;padding:96px 128px 16px 16px;border-radius:6px;background:var(--g500);color:var(--g900);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:48px;overflow:hidden}
.tool-logos{position:absolute;top:16px;right:16px;display:flex;gap:8px}
.tool .label{color:var(--g800);margin-top:-32px}
.tool .tags .b2{padding:4px 8px 3px;border-radius:6px;background:#000;color:var(--g500)}
.fx{opacity:0;transform:translateY(20%);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.fx.in{opacity:1;transform:none}
.fx .fx-i{opacity:0;transform:translateY(50%);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.fx.in .fx-i{opacity:1;transform:none}
.fx.in .fx-i:nth-child(2){transition-delay:.08s}.fx.in .fx-i:nth-child(3){transition-delay:.16s}.fx.in .fx-i:nth-child(4){transition-delay:.24s}

/* ================= services marquee ================= */
.services{padding:0;overflow:hidden}
.svc-row{display:flex;gap:16px;width:max-content;will-change:transform;margin-bottom:16px}
.svc{flex:0 0 360px;min-height:180px;padding:24px;border:1px solid var(--border);border-radius:6px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.svc .title4{color:var(--title)}
.svc .label{color:var(--support)}
.svc .overline{color:var(--brand)}

/* ================= compare ================= */
.compare-intro{color:var(--title)}
.cmp{display:grid;grid-template-columns:1fr 2fr 2fr 2fr;gap:16px;margin-top:96px}
.cmp .h{color:var(--title);padding:0 0 8px}
.cmp .h.dim{color:var(--g750)}
.cmp .rk{color:var(--g750);padding-top:16px}
.cmp .c{border-radius:6px;padding:16px;min-height:120px;background:var(--g750);color:var(--g900)}
.cmp .c.me{background:var(--g500)}

/* ================= how ================= */
.how-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:96px}
.how-item{border-top:1px solid var(--g850);padding-top:24px;display:flex;flex-direction:column;gap:16px}
.how-item .overline-l{color:var(--brand)}
.how-item .title2{font-size:clamp(36px,3.4vw,48px)}
.how-item p{color:var(--body)}

/* ================= contact + footer (light) ================= */
.footer .grid .overline-l{color:var(--g900);line-height:1.9}
.footer a.overline-l{text-decoration:underline;text-underline-offset:3px}
.socials{display:flex;gap:12px;margin-top:24px}
.socials a{width:24px;height:24px;display:grid;place-items:center;color:var(--g900)}
.socials svg{width:18px;height:18px}


/* ================= about ================= */
.role-pill{display:inline-flex;align-items:center;gap:10px;margin-top:32px;padding:10px 20px;border:1px solid var(--g500);border-radius:9999px;color:var(--title);font-size:20px}
.role-pill svg{width:18px;height:18px;color:var(--brand)}
.xp{margin-top:96px}
.xp-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.xp-head .overline-l{color:var(--support)}
.xp-row{display:grid;grid-template-columns:180px 1.2fr 1.6fr;gap:24px;padding:28px 0;border-top:1px solid var(--g850);align-items:start;transition:background-color .35s}
.xp-row:last-child{border-bottom:1px solid var(--g850)}
.xp-row .when{font:400 14px/1.4 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--support);padding-top:6px}
.xp-row h4{font-weight:700;font-size:24px;line-height:1.15;color:var(--title)}
.xp-row .co{display:block;margin-top:6px;font-size:18px;color:var(--body)}
.xp-row p{font-size:16px;color:var(--body)}
.now{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:3px 8px 2px;border-radius:6px;background:var(--brand);color:var(--g500);font:400 11px var(--mono);letter-spacing:1px;text-transform:uppercase;vertical-align:4px}
.now:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--g500);animation:pulse 1.6s ease-in-out infinite}

/* ================= tools (logo wall) ================= */
.tool-logos .lgo{width:32px;height:32px;padding:4px;border-radius:6px;background:var(--g900);display:grid;place-items:center;color:var(--g500)}
.tool-logos .lgo svg{width:100%;height:100%}

/* ================= contact (professional) ================= */
.req{color:var(--brand)}

/* ================= footer ================= */
.f-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:24px;font:400 12px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--g800)}
.to-top{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:9999px;border:1px solid var(--g900);color:var(--g900);font:400 12px var(--mono);letter-spacing:1px;text-transform:uppercase;transition:background-color .3s,color .3s}
.to-top:hover{background:var(--g900);color:var(--g500)}

@media (max-width:1200px){
  .xp-row{grid-template-columns:150px 1fr}
  .xp-row p{grid-column:2}
}
@media (max-width:1024px){
}
@media (max-width:800px){
  .xp{margin-top:64px}
  .xp-row{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .xp-row p{grid-column:auto}
  .xp-row h4{font-size:21px}
  .role-pill{font-size:17px}
}


/* ================= services: 4 visual groups ================= */
.svc-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:96px}
.sg{position:relative;display:flex;flex-direction:column;border-radius:8px;background:var(--dark-lift);border:1px solid var(--g850);overflow:hidden;text-align:left;cursor:pointer;transition:border-color .4s var(--ease),transform .6s var(--ease)}
.sg:hover{border-color:var(--brand)}
.sg-art{position:relative;aspect-ratio:16/9;overflow:hidden}
.sg-art>div{position:absolute;inset:0;transition:transform 1s var(--ease)}
.sg:hover .sg-art>div{transform:scale(1.045)}
.sg-body{padding:28px 28px 26px;display:flex;flex-direction:column;gap:14px}
.sg-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.sg-top .n{font:400 14px var(--mono);letter-spacing:1px;color:var(--brand)}
.sg h3{font-weight:700;font-size:clamp(30px,2.8vw,44px);line-height:1;letter-spacing:-1px;color:var(--title)}
.sg .line{font-size:18px;color:var(--body)}
.sg .pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sg .pills span{padding:7px 12px;border-radius:9999px;border:1px solid var(--g750);color:var(--title);font-size:14px;transition:background-color .3s,border-color .3s,color .3s}
.sg:hover .pills span{border-color:var(--g500)}
.sg .go{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font:400 13px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--title)}
.sg .go i{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--brand);color:var(--g500);font-style:normal;transition:transform .5s var(--ease)}
.sg:hover .go i{transform:translateX(4px) rotate(-45deg)}
/* group art */
.art-brand{background:#DFE3E6}
.art-brand .mark{position:absolute;left:12%;top:18%;width:24%;aspect-ratio:1;border-radius:50%;background:var(--brand);display:grid;place-items:center;font:700 clamp(22px,3.4vw,52px)/1 var(--sans);color:#DFE3E6;letter-spacing:-2px;box-shadow:0 20px 40px rgba(255,37,0,.25)}
.art-brand .card{position:absolute;right:10%;top:16%;width:40%;aspect-ratio:1.75;border-radius:6px;background:#1B1B1C;transform:rotate(-8deg);box-shadow:0 20px 40px rgba(0,0,0,.25);padding:5%}
.art-brand .card b{display:block;font:700 clamp(12px,1.4vw,20px) var(--sans);color:#DFE3E6}
.art-brand .card i{display:block;width:40%;height:4px;background:var(--brand);margin-top:10%;border-radius:2px}
.art-brand .box{position:absolute;right:22%;bottom:-8%;width:26%;height:44%;background:#fff;border-radius:4px;box-shadow:0 16px 30px rgba(0,0,0,.12);transform:rotate(6deg)}
.art-brand .box:after{content:"";position:absolute;left:0;right:0;top:22%;height:14%;background:var(--brand)}
.art-print{background:linear-gradient(#9fb5c2,#DFE3E6 70%)}
.art-print .board{position:absolute;left:8%;top:12%;width:58%;height:52%;background:var(--brand);border:5px solid #1B1B1C;display:flex;flex-direction:column;justify-content:center;padding:0 5%}
.art-print .board b{font:700 clamp(18px,3vw,46px)/.9 var(--sans);letter-spacing:-1.5px;color:#DFE3E6}
.art-print .board small{font:400 clamp(9px,.9vw,13px) var(--mono);letter-spacing:1px;color:#1B1B1C;margin-top:6%}
.art-print .leg{position:absolute;top:64%;width:2.4%;height:36%;background:#1B1B1C}
.art-print .paper{position:absolute;right:7%;top:20%;width:26%;height:72%;background:#f5f2ec;transform:rotate(5deg);box-shadow:0 14px 30px rgba(0,0,0,.2);padding:4%}
.art-print .paper b{display:block;height:12%;background:#1B1B1C;margin-bottom:8%}
.art-print .paper i{display:block;height:4px;background:#cfc8bc;margin-bottom:6px;border-radius:2px}
.art-print .paper em{display:block;height:28%;background:var(--brand);margin:10% 0}
.art-motion{background:#101011}
.art-motion .ph{position:absolute;top:8%;height:84%;aspect-ratio:9/16;border-radius:14px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.art-motion .ph.a{left:16%;background:linear-gradient(160deg,#FF2500,#5a0d00);transform:rotate(-6deg)}
.art-motion .ph.b{left:40%;background:linear-gradient(160deg,#DFE3E6,#707273);z-index:1}
.art-motion .ph.c{left:64%;background:linear-gradient(160deg,#8f7bff,#231a5c);transform:rotate(6deg)}
.art-motion .play{position:absolute;left:50%;top:44%;width:30%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.9);transform:translate(-50%,-50%)}
.art-motion .play:after{content:"";position:absolute;left:40%;top:30%;border-left:12px solid #1B1B1C;border-top:8px solid transparent;border-bottom:8px solid transparent}
.art-motion .bar{position:absolute;left:10%;right:10%;bottom:8%;height:4px;border-radius:2px;background:rgba(255,255,255,.3)}
.art-motion .bar:after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:#fff;border-radius:2px;animation:reel 3.2s linear infinite}
@keyframes reel{to{width:100%}}
.art-motion .spark{position:absolute;color:#DFE3E6;font-size:clamp(16px,2vw,28px);animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.2;transform:scale(.7)}}
.art-digital{background:#DFE3E6}
.art-digital .win{position:absolute;left:8%;top:12%;width:66%;height:80%;background:#fff;border-radius:8px;box-shadow:0 20px 40px rgba(0,0,0,.12);overflow:hidden}
.art-digital .win .tb{height:10%;background:#1B1B1C;display:flex;align-items:center;gap:5px;padding:0 3%}
.art-digital .win .tb i{width:7px;height:7px;border-radius:50%;background:#707273}
.art-digital .win .hero{margin:6% 6% 0;height:34%;border-radius:4px;background:var(--brand);display:flex;align-items:center;padding:0 5%}
.art-digital .win .hero b{font:700 clamp(14px,2vw,30px)/.9 var(--sans);color:#DFE3E6;letter-spacing:-1px}
.art-digital .win .row{display:flex;gap:4%;margin:5% 6% 0}
.art-digital .win .row i{flex:1;height:36px;border-radius:4px;background:#e6e8ea}
.art-digital .mob{position:absolute;right:9%;top:22%;width:21%;height:70%;background:#1B1B1C;border-radius:16px;padding:5px;box-shadow:0 20px 40px rgba(0,0,0,.2)}
.art-digital .mob div{height:100%;border-radius:11px;background:#fff;padding:14% 10%}
.art-digital .mob b{display:block;height:24%;border-radius:4px;background:var(--brand);margin-bottom:12%}
.art-digital .mob i{display:block;height:5px;border-radius:3px;background:#d4d6da;margin-bottom:8px}
@media (max-width:800px){.svc-groups{grid-template-columns:1fr;margin-top:56px}.sg-body{padding:22px 18px}.sg .line{font-size:16px}}

/* ================= tools (minimal) ================= */
.tm{margin-top:80px;border-top:1px solid var(--g850)}
.tm-row{display:grid;grid-template-columns:160px 1fr;gap:24px;align-items:center;padding:32px 0;border-bottom:1px solid var(--g850)}
.tm-row>.overline-l{color:var(--support)}
.tm-design{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.tm-d{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0;text-align:center}
.tm-d .ic{width:48px;height:48px;transition:transform .5s var(--ease)}
.tm-d .ic svg{width:100%;height:100%;display:block}
.tm-d span{font-size:15px;color:var(--title)}
.tm-d:hover .ic{transform:translateY(-4px)}
.tm-ai{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tm-track{display:flex;gap:10px;width:max-content;animation:slide 60s linear infinite}
.tm-track.rev{animation-direction:reverse;margin-top:10px}
.tm-ai:hover .tm-track{animation-play-state:paused}
.tm-a{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 12px;border-radius:9999px;border:1px solid var(--g850);color:var(--title);font-size:15px;white-space:nowrap;transition:border-color .3s,background-color .3s}
.tm-a .ic{width:24px;height:24px;color:var(--g500);filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.tm-a .ic svg{width:100%;height:100%;display:block}
.tm-a:hover{border-color:var(--g750);background:var(--dark-lift)}
.tm-a:hover .ic{filter:none;opacity:1}
@media (max-width:800px){.tm{margin-top:56px}.tm-row{grid-template-columns:1fr;gap:18px;padding:24px 0}.tm-design{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 8px}.tm-d .ic{width:40px;height:40px}.tm-d span{font-size:13px}}

.mail-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:64px;padding:40px 48px;border-radius:9999px;background:var(--brand);color:var(--g500);font-weight:700;font-size:clamp(28px,4vw,56px);letter-spacing:-1px;transition:background-color .3s,transform .5s var(--ease)}
.mail-cta i{font-style:normal;display:grid;place-items:center;width:clamp(56px,6vw,88px);aspect-ratio:1;border-radius:50%;background:var(--g500);color:var(--brand);transition:transform .5s var(--ease)}
.mail-cta:hover{background:var(--brand-600);transform:scale(1.01)}
.mail-cta:hover i{transform:rotate(-45deg)}
@media (max-width:800px){.mail-cta{margin-top:40px;padding:22px 22px 22px 28px}}

/* ================= footer (simple) + fan wordmark ================= */
.footer{position:relative}
.foot-stage{position:sticky;top:var(--stage-top,0px);overflow:hidden;display:flex;flex-direction:column;gap:56px;padding-top:96px}
.foot-info{will-change:opacity}
.f-simple{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-simple .overline-l{color:var(--g900);line-height:1.9}
.f-simple a.overline-l{text-decoration:underline;text-underline-offset:3px}
.f-simple .r{display:flex;flex-direction:column;align-items:flex-end;gap:12px;text-align:right}
.fan{display:flex;justify-content:center;align-items:flex-end;padding:0 8px;line-height:.8;user-select:none;white-space:nowrap}
.fan span{display:inline-block;font-weight:900;letter-spacing:0;margin-right:-.05em;color:var(--g900);transform-origin:50% 100%;will-change:transform}
.fan .sp{width:.2em}
.fan.custom span{font-family:var(--fan-font);font-weight:var(--fan-weight);margin-right:0}
.fan-in{display:flex;align-items:flex-end}
.foot-l,.foot-r{transition:opacity .4s,transform .4s var(--ease)}
body.at-end .foot-l,body.at-end .foot-r{opacity:0;transform:translateY(20px);pointer-events:none}
body.at-end .navigation{opacity:0;pointer-events:none}
@media (max-width:800px){.f-simple{grid-template-columns:1fr}.f-simple .r{align-items:flex-start;text-align:left}.foot-stage{padding-top:72px;gap:40px}}

/* ================= project form (slide-in) ================= */
.form-wrap{position:fixed;inset:0;z-index:99999;pointer-events:none;overflow:hidden}
.form-wrap.open{pointer-events:auto}
.form-bg{position:absolute;inset:0;background:rgba(0,0,0,.25);opacity:0;transition:opacity .4s}
.form-wrap.open .form-bg{opacity:1}
.form-panel{position:absolute;top:8px;right:8px;bottom:8px;width:min(560px,calc(100vw - 16px));background:var(--g200);color:var(--g900);border-radius:20px;padding:40px;overflow-y:auto;transform:translateX(calc(100% + 16px));transition:transform .6s var(--ease)}
.form-wrap.open .form-panel{transform:none}
.form-panel .title2{color:var(--g900);font-size:40px}
.form-panel .sub{color:var(--g800);margin:8px 0 40px}
.fg{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
.fg>.overline-l{color:var(--g750)}
.fg input[type=text],.fg input[type=tel],.fg input[type=email],.fg textarea{border:0;border-bottom:1px solid var(--g550);background:transparent;padding:10px 0;font-size:18px;outline:none;border-radius:0}
.fg input:focus,.fg textarea:focus,.fg input:focus-visible,.fg textarea:focus-visible{outline:none;border-color:var(--g900)}
.fg textarea{resize:vertical;min-height:80px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{cursor:pointer}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts span{display:inline-block;padding:8px 14px;border-radius:9999px;border:1px solid var(--g550);font-size:15px;transition:background-color .2s,color .2s,border-color .2s}
.opts input:checked+span{background:var(--brand);border-color:var(--brand);color:#fff}
.opts input:focus-visible+span{outline:2px solid var(--g900);outline-offset:2px}
.form-actions{display:flex;gap:8px;flex-wrap:wrap}
.form-actions .btn{background:var(--g900);color:var(--g500)}
.form-actions .btn.alt{background:transparent;color:var(--g900);outline:1px solid var(--g900)}
.form-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:1px solid var(--g550);display:grid;place-items:center;font-size:18px}

.tags .badge,.note-by .badge{color:var(--chip-text)}

/* ================= responsive ================= */
@media (max-width:1200px){
  .hero-t{font-size:clamp(80px,10vw,120px)}
  .project{width:min(560px,70vw)}
  .client-body{grid-template-columns:1fr 1fr}
  .client-body .details{grid-column:1/-1}
  .tool{padding:64px 64px 16px 16px}
}
@media (max-width:1024px){
  .s8,.s10,.s10o{grid-column:1/-1}
  .toolkit-row{grid-template-columns:1fr}
  .how-list{grid-template-columns:1fr}
  .note{flex-basis:420px;min-height:420px}
}
@media (max-width:800px){
  .hero-t{font-size:clamp(56px,13vw,80px);letter-spacing:-1px}
  .section{padding:80px 0}
  .container{margin:0 16px}
  .project{width:min(380px,82vw);gap:24px}
  .project-content{grid-template-columns:1fr;gap:24px}
  .project-group{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .client-card{flex-direction:column;align-items:flex-start;top:12vh}
  .client-logo{flex-basis:auto;width:220px}
  .note{flex-basis:min(340px,84vw);min-height:360px;padding:28px}
  .svc{flex-basis:280px}
  .cmp{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:64px}
  .cmp .h:first-child{display:none}
  .cmp .rk{grid-column:1/-1}
  .cmp .c{font-size:14px;padding:12px;min-height:0}
  .cmp .h{font-size:11px}
  .title2{font-size:36px}
  .header{padding:16px 16px 0 0}
  .foot-l{padding:0 0 calc(16px + env(safe-area-inset-bottom)) 16px}
  .foot-r{padding:0 16px calc(16px + env(safe-area-inset-bottom)) 0}
  .btn{height:40px;font-size:15px;padding:8px 14px}
  .drag-inner{padding:0 16px}
  .form-panel{padding:28px 20px}
}
@media (prefers-reduced-motion:reduce){
  .cube{transition:none}
  .w{opacity:1}
  .fx,.fx .fx-i{opacity:1;transform:none;transition:none}
}

/* ================= content-driven images (admin uploads) ================= */
.art.has-img{background:#111}
.sg-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* whole image always visible: contained image over a soft blurred copy of itself */
.art.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;z-index:1}
.fit-bg{position:absolute;inset:-8%;background-size:cover;background-position:center;filter:blur(28px) saturate(1.15) brightness(.6);transform:scale(1.05)}
.sg-img{position:absolute;inset:0}
a.project{color:inherit;cursor:pointer}
a.project .project-image img{pointer-events:none;user-select:none}

.s12{grid-column:1/-1}
[data-fit]{white-space:nowrap}

/* beliefs cards: size to content (no empty top), quote mark on top */
.note,.note:where(*){min-height:0}
.note{align-items:flex-start;padding:36px}
.note-content{gap:28px}
.note-content>p:before{content:"“";display:block;font:700 72px/.55 var(--sans);color:var(--brand);margin-bottom:20px}
@media (max-width:800px){.note{min-height:0;padding:24px}}

/* brands strip (social proof) */
.brands{margin-top:72px;padding-top:32px;border-top:1px solid var(--g850)}
.brands .overline-l{color:var(--support);margin-bottom:22px}
.brands-marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.brands-track{display:flex;align-items:center;gap:28px;width:max-content;animation:slide 45s linear infinite}
.brands-track span{font-weight:700;font-size:clamp(26px,3vw,44px);letter-spacing:-1px;color:var(--title);white-space:nowrap}
.brands-track i{font-style:normal;color:var(--brand);font-size:20px}
.brands:hover .brands-track{animation-play-state:paused}

/* project cards: 16:9 and the cover fills the whole card */
.project-image{aspect-ratio:16/9}
.art.has-img img{object-fit:cover}
.art.has-img .fit-bg{display:none}

/* ===== premium industry cards: fanned project shots + linked brands ===== */
.client-card{align-items:center;gap:40px;padding:28px 36px 28px 28px;border-radius:14px;background:linear-gradient(135deg,#232324 0%,#1B1B1C 60%);border-color:var(--g850);overflow:hidden}
.client-card:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 0% 50%,rgba(255,37,0,.14),transparent 60%);pointer-events:none}
.client-visual{position:relative;flex:0 0 300px;height:200px}
.client-visual .shot{position:absolute;top:50%;left:50%;width:210px;aspect-ratio:16/10;border-radius:10px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);transition:transform .7s var(--ease)}
.client-visual .shot img{width:100%;height:100%;object-fit:cover;display:block}
.client-visual .s0{transform:translate(-50%,-50%) rotate(-8deg) translate(-34px,6px);z-index:1}
.client-visual .s1{transform:translate(-50%,-50%) rotate(5deg) translate(30px,-4px);z-index:2}
.client-visual .s2{transform:translate(-50%,-50%) rotate(-1deg) translate(0,14px);z-index:3}
.client-card:hover .s0{transform:translate(-50%,-50%) rotate(-14deg) translate(-70px,10px)}
.client-card:hover .s1{transform:translate(-50%,-50%) rotate(10deg) translate(66px,-8px)}
.client-card:hover .s2{transform:translate(-50%,-50%) rotate(0) translate(0,4px) scale(1.04)}
.client-main{flex:1;display:flex;flex-direction:column;gap:14px;position:relative}
.client-top{display:flex;align-items:baseline;gap:16px}
.client-n{font:400 14px var(--mono);letter-spacing:1px;color:var(--brand)}
.client-title{font-weight:700;font-size:clamp(30px,3.4vw,52px);line-height:1;letter-spacing:-1px;color:var(--title)}
.client-sub{font-size:18px;color:var(--body)}
.client-sub span{color:var(--support)}
.client-brands{display:flex;flex-wrap:wrap;gap:8px 18px}
.client-brands a{color:var(--title);font-size:16px;border-bottom:1px solid var(--g750);padding-bottom:2px;transition:color .3s,border-color .3s}
.client-brands a i{font-style:normal;color:var(--brand);font-size:12px}
.client-brands a:hover{color:var(--brand);border-color:var(--brand)}
@media (max-width:800px){
  .client-card{flex-direction:column;align-items:stretch;gap:20px;padding:20px}
  .client-visual{flex-basis:auto;height:170px}
  .client-visual .shot{width:170px}
  .client-sub{font-size:16px}
}