@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/geist-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/geist-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/geist-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/geist-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/geist-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/geist-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-tight-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-tight-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-tight-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-tight-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-tight-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-tight-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-tight-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-tight-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#F2F2F0;--ink:rgba(17,17,17,.92);--ink-2:rgba(17,17,17,.6);--ink-3:rgba(17,17,17,.4);
  --line:rgba(17,17,17,.1);--surface:#E7E7E4;--surface-2:#FBFBFA;
  --accent:#146CFF;--on-accent:#fff;--danger:#C5221F;
  --dock:0px;--pad:clamp(16px,3.4vw,48px);
  --expo:cubic-bezier(.19,1,.22,1);--quint:cubic-bezier(.23,1,.32,1);
  --r-lg:16px;--r-md:12px;--r-sm:8px;--font-display:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;--font:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#141413;--ink:rgba(242,242,240,.92);--ink-2:rgba(242,242,240,.62);--ink-3:rgba(242,242,240,.4);--line:rgba(242,242,240,.12);--surface:#20201F;--surface-2:#272726;--danger:#FF7A6E;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#141413;--ink:rgba(242,242,240,.92);--ink-2:rgba(242,242,240,.62);--ink-3:rgba(242,242,240,.4);--line:rgba(242,242,240,.12);--surface:#20201F;--surface-2:#272726;--danger:#FF7A6E;color-scheme:dark}

*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;transition:background-color .4s,color .4s;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--accent);color:#fff;padding:10px 14px;border-radius:var(--r-md);text-decoration:none}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}

.btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;font-weight:500;font-size:14px;text-decoration:none;white-space:nowrap;transition:background .2s var(--quint),color .2s}
.btn svg{width:16px;height:16px;transition:transform .22s var(--expo)}
.btn:hover svg.arr{transform:translateX(3px)}
.btn-accent{background:var(--accent);color:var(--on-accent)}
.btn-accent:hover{background:#0058E6}
.btn-ghost{border:1px solid var(--line)}
.btn-ghost:hover{background:var(--surface)}

.dock{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:6px;padding:6px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);
  opacity:0;transform:translate(-50%,16px);pointer-events:none;transition:opacity .6s var(--expo),transform .9s var(--expo)}
.dock.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.dock-mark{display:flex;align-items:center;padding:0 2px;text-decoration:none;border-radius:var(--r-md)}
.dock-mark .glyph{width:40px;height:40px;border-radius:var(--r-md);background:var(--ink);color:var(--bg);display:grid;place-items:center;font-weight:600;font-size:15px;letter-spacing:-.03em}
.dock-mark small{display:none}
.dock nav{display:flex;align-items:center;gap:2px}
.dk{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:64px;padding:7px 10px 6px;border-radius:var(--r-md);font-size:11px;line-height:1.1;color:var(--ink-2);text-decoration:none;text-align:center;white-space:nowrap;transition:color .18s,background .18s}
.dk svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s var(--expo)}
.dk:hover{color:var(--ink)}
.dk:hover svg{transform:translateY(-2px)}
.dk[aria-current="true"]{color:var(--ink);background:var(--surface)}
.dk-theme{margin-left:4px;box-shadow:inset 1px 0 0 var(--line);border-radius:0 12px 12px 0}
.dock-foot{display:flex;align-items:center;align-self:stretch;padding:0 10px 0 12px;margin-left:2px;border-left:1px solid var(--line);font-size:11px;color:var(--ink-3)}
.dock-foot a{text-decoration:none}
.dock-foot a:hover{color:var(--ink)}
.lang b{color:var(--ink);font-weight:500}

.intro{position:relative;height:260vh}
.stage{position:sticky;top:env(safe-area-inset-top,0px);height:100vh;height:100dvh;overflow:hidden}
.wall{position:absolute;top:-10vh;left:-2vw;right:-2vw;display:grid;grid-template-columns:repeat(var(--cols,7),1fr);gap:var(--g,12px);padding:0 var(--g,12px)}
.col{display:flex;flex-direction:column;gap:var(--g,12px);will-change:transform,opacity}
.tile{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.veil{position:absolute;inset:0;background:var(--bg);opacity:0;pointer-events:none}
.reel{position:absolute;left:50%;top:calc(50% - var(--dy,0px));transform:translate(-50%,-50%);overflow:hidden;will-change:clip-path;background:#111}
.reel-inner{position:absolute;inset:0;will-change:transform}
.reel-layer{position:absolute;inset:0;opacity:0;animation:reelcycle 12s infinite}
.reel-layer:nth-child(1){animation-delay:0s}.reel-layer:nth-child(2){animation-delay:3s}.reel-layer:nth-child(3){animation-delay:6s}.reel-layer:nth-child(4){animation-delay:9s}
@keyframes reelcycle{0%{opacity:0;transform:scale(1.06)}4%{opacity:1}25%{opacity:1}30%{opacity:0;transform:scale(1)}100%{opacity:0}}
.reel-tc{position:absolute;left:16px;bottom:14px;font-size:12px;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;mix-blend-mode:difference}
.chip{position:absolute;left:var(--pad);top:var(--pad);z-index:5;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--bg);font-size:13px}
.chip .glyph{width:28px;height:28px;border-radius:var(--r-sm);background:var(--ink);color:var(--bg);display:grid;place-items:center;font-weight:600;font-size:12px}
.chip span{color:var(--ink-2)}
.reveal{position:absolute;left:50%;top:calc(50% - var(--dy,0px));transform:translate(-50%,-50%);width:var(--rw);height:calc(var(--rh) + 2*var(--band));display:flex;flex-direction:column;justify-content:space-between;opacity:0;pointer-events:none;z-index:4}
.reveal.live{pointer-events:auto}
.rv-top,.rv-bot{height:var(--band);display:flex;align-items:center;justify-content:space-between;gap:16px}
.rv-top h1{margin:0;font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:-.035em;line-height:1}
.rv-top h1 span{display:block;font-size:13px;font-weight:400;letter-spacing:0;color:var(--ink-2);margin-top:6px}
.rv-top p{margin:0;font-size:13px;color:var(--ink-2);text-align:right}
.rv-bot p{margin:0;font-size:13px;color:var(--ink-2);max-width:40ch}
.play{width:18px;height:18px;border-radius:50%;background:#fff;color:var(--accent);display:grid;place-items:center}
.play svg{width:8px;height:8px;fill:currentColor;transform:translateX(1px)}
.hint{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--ink-2);pointer-events:none}
.hint svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;animation:nudge 1.8s var(--quint) infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

.pz{position:absolute;inset:0;container-type:size;overflow:hidden}
.pz-cap{position:absolute;left:5cqmin;bottom:4.5cqmin;font:500 max(9px,3.6cqmin)/1 var(--font);letter-spacing:-.01em;opacity:.8}
.pz-web{background:var(--c)}
.pz-web .bar{display:flex;align-items:center;gap:1.5cqmin;height:9cqmin;padding:0 3.5cqmin;border-bottom:1px solid rgba(0,0,0,.08)}
.pz-web .bar i{width:1.9cqmin;height:1.9cqmin;border-radius:50%;background:rgba(0,0,0,.2)}
.pz-web .bar span{margin-left:2cqmin;font-size:max(7px,2.8cqmin);color:rgba(0,0,0,.45)}
.pz-web .hero{padding:7cqmin 6cqmin 0}
.pz-web .hero b{display:block;font-weight:600;font-size:min(16cqw,24cqh);letter-spacing:-.05em;line-height:.9;color:var(--a)}
.pz-web .hero em{display:block;margin-top:5cqmin;height:36cqh;border-radius:2.5cqmin;background:var(--b)}
.pz-web .rows{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5cqmin;padding:4cqmin 6cqmin}
.pz-web .rows i{height:2.4cqmin;border-radius:2cqmin;background:var(--a);opacity:.25}
.pz-brand{background:var(--a);color:var(--b);display:grid;place-items:center}
.pz-brand b{font-weight:600;font-size:min(78cqw,70cqh);letter-spacing:-.08em;line-height:1}
.pz-brand .ring{position:absolute;right:6cqmin;top:6cqmin;width:13cqmin;height:13cqmin;border-radius:50%;border:.9cqmin solid var(--b)}
.pz-photo{background:radial-gradient(60% 55% at 32% 30%,var(--b),transparent 70%),radial-gradient(70% 60% at 78% 78%,var(--a),transparent 72%),var(--c);color:#fff}
.pz-photo .subj{position:absolute;left:38%;bottom:-8%;width:34%;height:62%;border-radius:50% 50% 12% 12%;background:var(--a);filter:blur(1.4cqmin);opacity:.85}
.pz-photo::after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 20% 30%,rgba(255,255,255,.07) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.pz-ui{background:var(--a);display:grid;place-items:center}
.pz-ui .ph{width:44cqmin;height:84cqmin;border-radius:7cqmin;background:var(--c);border:1.3cqmin solid #111;overflow:hidden;display:flex;flex-direction:column;gap:2.4cqmin;padding:0 0 4cqmin}
.pz-ui .ph .top{height:34%;background:var(--b);display:flex;align-items:flex-end;padding:3cqmin;font:600 max(8px,5cqmin)/1 var(--font);color:var(--c);letter-spacing:-.03em}
.pz-ui .ph i{display:block;height:3.4cqmin;margin:0 3cqmin;border-radius:2cqmin;background:var(--b);opacity:.35}
.pz-ui .ph i:nth-child(odd){width:60%}
.pz-type{background:var(--c);color:var(--a)}
.pz-type b{position:absolute;left:5cqmin;bottom:9cqmin;font-weight:600;font-size:min(34cqw,62cqh);letter-spacing:-.06em;line-height:.82}
.pz-type .rule{position:absolute;left:5cqmin;right:5cqmin;top:7cqmin;height:.8cqmin;background:var(--b)}
.pz-motion{background:var(--c)}
.pz-motion .bl{position:absolute;width:62cqmin;height:62cqmin;border-radius:50%;mix-blend-mode:multiply;animation:drift 9s var(--quint) infinite alternate}
.pz-motion .bl1{background:var(--a);left:6%;top:12%}
.pz-motion .bl2{background:var(--b);right:4%;bottom:6%;animation-delay:-4s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(12%,-10%) scale(1.12)}}
.pz-res{background:#111;color:#F2F2F0;padding:8cqmin;display:flex;flex-direction:column;justify-content:space-between}
.pz-res h4{margin:0;font-weight:500;font-size:max(10px,4.4cqmin);color:rgba(242,242,240,.6)}
.pz-res ul{list-style:none;margin:0;padding:0;display:grid;gap:3cqmin}
.pz-res li{display:flex;align-items:baseline;gap:3cqmin;border-top:1px solid rgba(242,242,240,.14);padding-top:3cqmin;font-size:max(9px,3.6cqmin)}
.pz-res li b{font-size:max(16px,9cqmin);font-weight:500;letter-spacing:-.04em;min-width:34%}

.content{padding-bottom:0}
.sec{padding:clamp(96px,13vw,200px) var(--pad)}
.sec.tight{padding-top:0}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px)}
.h2{margin:0;font-weight:500;font-size:clamp(32px,4vw,60px);line-height:1.02;letter-spacing:-.035em}
.lede{color:var(--ink-2);max-width:52ch;margin:18px 0 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vw,56px)}

.logos{margin-top:clamp(72px,10vw,140px)}
.logos-k{margin:0 0 18px;font-size:13px;color:var(--ink-2)}
.marquee{overflow:hidden;margin:0 calc(-1*var(--pad));-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{list-style:none;margin:0;padding:0;display:flex;width:max-content;animation:mq 70s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track li{flex:none;width:clamp(140px,12.5vw,196px);height:clamp(79px,7vw,110px)}
.mq-track img{display:block;width:100%;height:100%;object-fit:contain;filter:brightness(0);opacity:.72;transition:opacity .2s}
.mq-track li:hover img{opacity:1}
:root[data-theme="dark"] .mq-track img{filter:brightness(0) invert(1)}
@keyframes mq{to{transform:translateX(-50%)}}
html.rm .mq-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
html.rm .mq-track li[aria-hidden]{display:none}
.pos-l{grid-column:1/span 4;font-size:13px;color:var(--ink-2);padding-top:.6em}
.pos-l b{display:block;color:var(--ink);font-weight:500}
.pos-r{grid-column:5/span 8}
.pos-r .big{margin:0;font-weight:400;font-size:clamp(34px,4.6vw,76px);line-height:1;letter-spacing:-.045em;max-width:16ch}
.pos-r p{font-size:clamp(16px,1.3vw,19px);color:var(--ink-2);max-width:46ch;margin:28px 0 0}

.orbit{position:relative;height:clamp(380px,44vw,600px);margin-top:clamp(24px,4vw,56px);overflow:hidden;--r:min(38vw,430px)}
.orbit .arc{position:absolute;left:50%;top:84%;width:calc(var(--r)*2);height:calc(var(--r)*2);border:1px dashed var(--line);border-radius:50%;transform:translate(-50%,-50%)}
.orbit .center{position:absolute;left:50%;top:84%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.orbit .center p{margin:0;font-size:13px;color:var(--ink-2)}
.mates{list-style:none;margin:0;padding:0}
.mate{position:absolute;left:50%;top:84%;width:76px;height:76px;margin:-38px 0 0 -38px;transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(-1*var(--a)))}
.mate .av{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;font-weight:500;font-size:20px;letter-spacing:-.02em;color:#111;transition:transform .22s var(--expo)}
.mate .cap{position:absolute;left:50%;top:calc(100% + 8px);transform:translate(-50%,4px);white-space:nowrap;font-size:12px;opacity:0;transition:opacity .18s,transform .22s var(--expo);pointer-events:none}
.mate .cap span{color:var(--ink-2)}
.mate:hover .av,.mate:focus-visible .av{transform:scale(1.06)}
.mate:hover .cap,.mate:focus-visible .cap{opacity:1;transform:translate(-50%,0)}
.disc{margin:28px auto 0;text-align:center;color:var(--ink-2);max-width:60ch;font-size:14px}

.svcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.svc{position:relative;height:clamp(250px,20vw,320px);border-radius:var(--r-lg);padding:clamp(18px,1.8vw,26px);display:flex;flex-direction:column;justify-content:space-between;color:#111;overflow:hidden;outline-offset:4px}
.svc h3{margin:0;font-weight:500;font-size:clamp(21px,1.75vw,28px);line-height:1.08;letter-spacing:-.03em;max-width:17ch;text-wrap:balance}
.svc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;transform:translateY(8px);opacity:0;transition:opacity .22s,transform .4s var(--expo)}
.svc li{font-size:12px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.55)}
.svc:hover ul,.svc:focus-within ul,.svc:focus ul{opacity:1;transform:none}
@media (hover:none){.svc ul{opacity:1;transform:none}}
.svc-cta{background:var(--surface);color:var(--ink)}
.svc-cta p{margin:0;color:var(--ink-2);font-size:14px;max-width:30ch}

.pc{display:block;text-decoration:none;border-radius:var(--r-lg)}
.pc-media{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.pc-media .pz-wrap{position:absolute;inset:0;transition:transform .5s var(--expo)}
.pc:hover .pz-wrap{transform:scale(1.025)}
.pc-meta{display:flex;align-items:center;gap:10px;padding:12px 2px 0}
.fav{flex:none;width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;font-weight:600;font-size:13px}
.pc-txt{display:flex;flex-direction:column;line-height:1.25;font-size:13px}
.pc-txt b{font-weight:500;font-size:14px}
.pc-txt span{color:var(--ink-2)}
.works{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,40px) 12px}
.works .pc:nth-child(1){grid-column:span 7}.works .pc:nth-child(1) .pc-media{aspect-ratio:16/10}
.works .pc:nth-child(2){grid-column:span 5}.works .pc:nth-child(2) .pc-media{aspect-ratio:4/5}
.works .pc:nth-child(n+3){grid-column:span 4}.works .pc:nth-child(n+3) .pc-media{aspect-ratio:4/3}


.perf .h2{font-size:clamp(40px,6vw,100px);font-weight:400;letter-spacing:-.05em;line-height:.96}
.perf .h2 span{display:block;color:var(--ink-3)}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(40px,6vw,88px)}
.metric{border-top:1px solid var(--line);padding-top:16px}
.metric b{display:block;font-weight:400;font-size:clamp(40px,5vw,80px);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.metric span{display:block;margin-top:8px;color:var(--ink-2);font-size:14px}
.foot-note{margin-top:20px;font-size:12px;color:var(--ink-3)}

.exp{padding:clamp(60px,8vw,120px) 0 clamp(80px,10vw,140px);overflow:hidden;touch-action:pan-y}
.word{display:flex;justify-content:center;font-weight:600;font-size:clamp(64px,17.6vw,340px);line-height:.86;letter-spacing:-.055em;user-select:none;-webkit-user-select:none;padding:0 var(--pad)}
.lt{display:inline-block;color:var(--ink);background-size:260% 260%;background-position:calc(var(--mx,.5)*100%) calc(var(--my,.5)*100%);transition:transform .45s var(--expo)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .lt{-webkit-background-clip:text;background-clip:text;color:transparent}
}
.lt.hot{transform:translateY(-3%) scale(1.02)}
.exp-cap{display:flex;justify-content:space-between;gap:16px;padding:22px var(--pad) 0;font-size:13px;color:var(--ink-2)}
.exp-cap b{color:var(--ink);font-weight:500}

.collab{position:relative;height:330vh}
.collab-pin{position:sticky;top:env(safe-area-inset-top,0px);height:100vh;height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,5vh,64px) var(--pad) calc(112px + env(safe-area-inset-bottom,0px));overflow:hidden}
.collab .sec-head{margin-bottom:clamp(24px,5vh,56px)}
.collab-hint{font-size:13px;color:var(--ink-2);transition:opacity .4s}
.steps-wrap{position:relative;border-bottom:1px solid var(--line)}
.steps-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform-origin:left center;transform:scaleX(0);will-change:transform}
.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;scrollbar-width:none}
.step{text-align:left;padding:14px 4px 16px;font-size:14px;color:var(--ink-3);transition:color .3s var(--expo)}
.step span{display:block;font-size:12px;color:var(--ink-3);margin-bottom:4px;font-variant-numeric:tabular-nums}
.step[aria-selected="true"]{color:var(--ink)}
.step[aria-selected="true"] span{color:var(--accent)}
.step:hover{color:var(--ink)}
.panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);align-items:center;padding-top:clamp(32px,6vh,72px)}
.panel-txt{grid-column:1/span 5;padding-right:clamp(0px,2vw,32px)}
.p-count{display:block;margin-bottom:14px;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.p-count b{color:var(--accent);font-weight:500}
.panel-txt h3{margin:0;font-weight:500;font-size:clamp(26px,2.6vw,40px);letter-spacing:-.035em}
.panel-txt p{color:var(--ink-2);max-width:38ch;font-size:clamp(16px,1.2vw,18px);line-height:1.6;margin:16px 0 0}
.panel-vis{grid-column:7/span 6;aspect-ratio:16/10;max-height:calc(100dvh - 400px);border-radius:var(--r-lg);background:var(--surface);position:relative;overflow:hidden}
.panel-vis i{position:absolute;border-radius:var(--r-md);opacity:0;transition:left .8s var(--expo),top .8s var(--expo),width .8s var(--expo),height .8s var(--expo),background-color .6s,opacity .4s}
.slide-r{animation:inR .55s var(--expo)}
.slide-l{animation:inL .55s var(--expo)}
@keyframes inR{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes inL{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}

.sheet{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2)}
.sheet-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.sheet-bar b{color:var(--ink);font-weight:500}
.sheet dl{margin:0;display:grid;grid-template-columns:minmax(140px,1fr) 3fr}
.sheet dt,.sheet dd{margin:0;padding:14px 18px;border-bottom:1px solid var(--line);font-size:14px}
.sheet dt{color:var(--ink-2)}
.sheet dd{font-variant-numeric:tabular-nums}
.sheet dl > :nth-last-child(-n+2){border-bottom:0}
.ph{color:var(--ink-3)}
.leads{display:flex;flex-wrap:wrap;gap:18px}
.lead{display:flex;align-items:center;gap:10px}
.lead i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:500;color:#111}
.lead span{color:var(--ink-2)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#1DB954;margin-right:8px;vertical-align:1px}

.clients{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.client{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);transition:padding .35s var(--expo),color .2s}
.client b{grid-column:1/span 4;font-weight:400;font-size:clamp(22px,2.4vw,36px);letter-spacing:-.035em;line-height:1.1}
.client span{grid-column:span 3;font-size:13px;color:var(--ink-2);opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .35s var(--expo)}
.clients:hover .client{color:var(--ink-3)}
.client.has-case{cursor:pointer}
.client.has-case b a{text-decoration:none;border-radius:var(--r-sm)}
.client .cl-line{grid-column:span 3;opacity:1;transform:none;font-size:14px}
.cl-tags{grid-column:span 5;justify-self:end}
.clients .vc-tags{margin:0;justify-content:flex-end}
.clients .vc-tag{color:var(--ink);border-color:var(--line)}
.clients .vc-tag:hover{color:#fff;border-color:var(--accent)}
.clients .client:hover{color:var(--ink);padding-left:12px}
.client:hover span{opacity:1;transform:none}
@media (hover:none){.client span{opacity:1;transform:none}}
.cl-thumb{position:fixed;left:0;top:0;width:220px;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;pointer-events:none;z-index:30;opacity:0;transition:opacity .2s}

.contact .big{margin:0;font-weight:400;font-size:clamp(40px,4.6vw,76px);line-height:.98;letter-spacing:-.045em;max-width:11ch}
.ct-l{grid-column:1/span 5}
.ct-r{grid-column:7/span 6}
.ct-kicker{margin:0 0 18px;font-size:13px;color:var(--ink-2)}
.ct-sub{margin:20px 0 0;font-size:18px;color:var(--ink-2)}
.ct-direct{margin-top:44px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.ct-direct span{color:var(--ink-2)}
.ct-direct a{text-decoration:none}
.ct-direct a:hover{text-decoration:underline}
.form{display:grid;gap:22px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:flex;flex-direction:column;gap:8px;border:0;margin:0;padding:0;min-width:0}
.fld label,.fld legend{font-size:14px;font-weight:500;padding:0}
.fld legend{margin-bottom:8px}
.help{margin:-2px 0 4px;font-size:13px;color:var(--ink-2);max-width:56ch}
.inp{font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid transparent;border-radius:var(--r-md);padding:12px 14px;min-height:48px;width:100%;transition:border-color .2s,background .2s}
.inp:hover{border-color:var(--line)}
.inp:focus{outline:none;border-color:var(--accent);background:var(--surface-2)}
textarea.inp{min-height:150px;resize:vertical;line-height:1.5}
.inp[aria-invalid="true"]{border-color:var(--danger)}
.err{margin:0;font-size:12px;color:var(--danger)}
.bud{display:flex;flex-wrap:wrap;gap:8px}
.bud label{position:relative;font-weight:400}
.bud input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.bud span{display:inline-flex;align-items:center;height:42px;padding:0 15px;border-radius:999px;border:1px solid var(--line);font-size:13px;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.bud label:hover span{border-color:var(--ink-3)}
.bud input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}
.bud input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
.f-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.f-status{margin:0;font-size:13px;color:var(--ink-2)}
.f-legal{margin:-8px 0 0;font-size:12px;color:var(--ink-3)}
.ct-r .seg{margin-bottom:28px}

.xps{border-bottom:1px solid var(--line)}
.xpage-head{padding-top:clamp(80px,10vw,160px)}
.crumb2{margin:0 0 22px;font-size:13px;color:var(--ink-2)}
.crumb2 a{text-decoration:none;color:var(--ink)}
.crumb2 a:hover{text-decoration:underline}
.xpage-h1{margin:0;font-weight:400;font-size:clamp(64px,10vw,180px);letter-spacing:-.065em;line-height:.88}
.xpage-lede{margin:28px 0 0;font-size:clamp(18px,1.5vw,22px);color:var(--ink-2);max-width:44ch}
.xidx{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.xidx button{width:100%;min-height:112px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;text-align:left;padding:16px;border-radius:var(--r-lg);background:var(--surface);font-size:15px;line-height:1.25;transition:background .2s}
.xidx button:hover{background:var(--surface-2)}
.xidx svg{width:16px;height:16px;color:var(--ink-2);transition:transform .22s var(--expo)}
.xidx button:hover svg{transform:translateY(3px)}
.xpage-end .big{margin:0;font-weight:400;font-size:clamp(40px,5vw,84px);line-height:.98;letter-spacing:-.045em;max-width:13ch}
.xpage-end .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.cs-hero{padding-top:clamp(80px,10vw,150px);padding-bottom:clamp(40px,5vw,72px)}
.cs-crumb{font:inherit;color:var(--ink)}
.cs-crumb:hover{text-decoration:underline}
.cs-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);align-items:end}
.cs-title{grid-column:1/span 7}
.cs-title h1{margin:0;font-weight:400;font-size:clamp(48px,8vw,150px);overflow-wrap:anywhere;letter-spacing:-.065em;line-height:.88}
.cs-tagline{margin:18px 0 0;font-size:clamp(18px,1.6vw,24px);color:var(--ink-2)}
.cs-intro{grid-column:8/span 5}
.cs-intro p.cs-soon{color:var(--ink-2)}
.cs-intro p{margin:0;font-size:clamp(18px,1.45vw,22px);line-height:1.45;letter-spacing:-.01em}
.cs-meta{margin:clamp(40px,5vw,64px) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;border-top:1px solid var(--line);padding-top:16px}
.cs-meta div{display:flex;flex-direction:column;gap:6px}
.cs-meta dt{font-size:13px;color:var(--ink-2)}
.cs-meta dd{margin:0;font-size:15px}
.cs-meta dd a{color:inherit}
.cpage .vc-tags{margin-top:0}
.cs-meta .vc-tags{flex-direction:row;flex-wrap:wrap;gap:6px}
.cpage .vc-tag{color:var(--ink);border-color:var(--line)}
.cpage .vc-tag:hover{color:#fff;border-color:var(--accent)}
.cs-media{padding:0 var(--pad)}
.cs-vid{margin:0}
.cs-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#000}
.cs-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.cs-vid figcaption{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;padding:14px 2px 0;font-size:14px}
.cs-vid figcaption .n{color:var(--accent);font-variant-numeric:tabular-nums}
.cs-vid figcaption b{font-weight:500}
.cs-vid figcaption em{font-style:normal;font-size:13px;color:var(--ink-3)}
.cs-vid figcaption a{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);text-decoration:none}
.cs-vid figcaption a:hover{color:var(--ink)}
.cs-vid figcaption a svg{width:10px;height:10px}
.cs-body{padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(56px,7vw,110px)}
.cs-sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);padding:clamp(28px,3vw,44px) 0;border-top:1px solid var(--line)}
.cs-body .cs-sec:first-child{border-top:0;padding-top:0}
.cs-h{grid-column:1/span 4;margin:0;font-weight:500;font-size:clamp(22px,2vw,30px);letter-spacing:-.03em}
.cs-txt{grid-column:5/span 7}
.cs-txt p{margin:0 0 16px;font-size:clamp(16px,1.25vw,19px);line-height:1.65;color:var(--ink-2);max-width:62ch}
.cs-txt p:first-child{color:var(--ink)}
.cs-txt p:last-child{margin-bottom:0}
.cs-kpis{padding-top:0}
.cs-kpi-h{margin:0 0 20px;font-size:13px;font-weight:500;color:var(--ink-2)}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kpi{border-top:1px solid var(--line);padding-top:18px}
.kpi b{display:block;font-weight:400;font-size:clamp(44px,5.4vw,88px);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.kpi span{display:block;margin-top:12px;font-size:15px;font-weight:500}
.kpi p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2);max-width:32ch}
.cpage:not([hidden]){display:grid;grid-template-columns:clamp(290px,23vw,370px) minmax(0,1fr);align-items:start}
.cs-side{position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;border-right:1px solid var(--line);padding:calc(22px + env(safe-area-inset-top,0px)) 16px 120px;background:var(--bg);scrollbar-width:thin}
.cs-side-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cs-side-head h2{margin:0;font-size:17px;font-weight:500;letter-spacing:-.02em}
.cs-all{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2);padding:6px 8px;border-radius:var(--r-sm)}
.cs-all:hover{color:var(--ink);background:var(--surface)}
.cs-all svg{width:14px;height:14px}
.cs-side-tabs{display:flex;gap:2px;padding:3px;border-radius:var(--r-md);background:var(--surface);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.cs-side-tabs button{flex:1 1 auto;height:32px;padding:0 7px;border-radius:var(--r-sm);font-size:12px;color:var(--ink-2);white-space:nowrap;transition:background .2s,color .2s}
.cs-side-tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.cs-side-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}
.pc-s .pc-media{aspect-ratio:1/1;border-radius:var(--r-md);outline:2px solid transparent;outline-offset:2px;transition:outline-color .2s}
.pc-s[aria-current="page"] .pc-media{outline-color:var(--accent)}
.pc-s .pc-meta{gap:8px;padding-top:8px}
.pc-s .fav{width:24px;height:24px;border-radius:var(--r-sm);font-size:11px}
.pc-s .pc-txt{min-width:0}
.pc-s .pc-txt b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-s .pc-txt span{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-main{min-width:0}
.cs-gal{padding:0 var(--pad) clamp(24px,3vw,40px)}
.g-stage{position:relative;height:clamp(420px,78vh,860px);border-radius:var(--r-lg);overflow:hidden;background:#0E0E0D}
.g-scroll{position:absolute;inset:0 84px 0 0;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y proximity;overscroll-behavior:auto;scrollbar-width:none;outline-offset:-3px}
.g-scroll::-webkit-scrollbar{display:none}
.g-slide{position:relative;height:100%;scroll-snap-align:start;padding:5%;overflow:hidden}
.g-slide figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r-md);background:#1A1A19}
.g-slide figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g-full{display:grid}
.g-one{width:100%;height:100%}
.g-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px}
.g-grid .g-cell:first-child{grid-row:span 2}
.g-trio{display:grid;place-items:center}
.g-bg{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(48px) brightness(.6) saturate(1.2)}
.g-cards{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3%;width:88%;max-height:100%}
.g-card{aspect-ratio:4/5}
.g-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:rgba(242,242,240,.42);font-size:12px;border:1px dashed rgba(242,242,240,.14);border-radius:var(--r-md)}
.g-ph b{font-size:20px;font-weight:400;color:rgba(242,242,240,.6)}
.g-rail{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;max-height:88%;overflow-y:auto;padding:2px 12px;scrollbar-width:none}
.g-th{position:relative;flex:none;width:44px;height:30px;border-radius:var(--r-sm);overflow:visible;background:#262625;opacity:.5;transition:opacity .2s}
.g-th img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-sm)}
.g-th:hover{opacity:.85}
.g-th[aria-current="true"]{opacity:1}
.g-th[aria-current="true"]::after{content:"";position:absolute;left:-12px;right:-12px;top:50%;height:2px;margin-top:-1px;background:#F2F2F0;border-radius:2px}
.g-count{position:absolute;left:16px;bottom:14px;font-size:12px;color:rgba(242,242,240,.55);font-variant-numeric:tabular-nums;pointer-events:none}
.g-count b{color:#F2F2F0;font-weight:500}
@media (max-width:1100px){
  .cpage:not([hidden]){display:block}
  .cs-side{display:none}
}
@media (max-width:820px){
  .g-stage{height:68vh}
  .g-scroll{inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory}
  .g-slide{flex:0 0 100%;padding:4%}
  .g-rail{display:none}
  .g-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,minmax(0,1fr))}
  .g-grid .g-cell:first-child{grid-row:auto}
  .g-cards{width:96%;gap:2%}
}
.page-in{animation:pagein .6s var(--expo)}
@keyframes pagein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.xp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);padding:clamp(48px,6vw,96px) 0;border-top:1px solid var(--line)}
.xp-l{grid-column:1/span 5;position:sticky;top:calc(28px + env(safe-area-inset-top,0px));align-self:start}
.xp-t{margin:0 0 24px;font-weight:500;font-size:clamp(30px,3.1vw,50px);line-height:1.02;letter-spacing:-.04em;max-width:14ch}
.xp-t a{text-decoration:none}
.xp-t a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
.xp-vis{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.xp-r{grid-column:7/span 6}
.xp-lead{margin:0;font-size:clamp(22px,2vw,30px);line-height:1.18;letter-spacing:-.025em;font-weight:500;max-width:24ch}
.xp-body{margin:24px 0 0;font-size:17px;line-height:1.95;color:var(--ink-2);max-width:58ch}
.kw{display:inline-flex;align-items:center;gap:5px;padding:0 10px;border-radius:999px;background:var(--surface);color:var(--ink);font-size:.92em;line-height:1.75;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
a.kw{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
a.kw:hover{background:var(--accent);color:#fff;box-shadow:none}
.kw svg{width:10px;height:10px}
.xp-h{margin:44px 0 10px;font-size:13px;font-weight:500;color:var(--ink-2)}
.qs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.q{width:100%;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;text-align:left;padding:16px 4px;border-bottom:1px solid var(--line);font-size:16px;transition:padding .35s var(--expo)}
.q em{font-style:normal;font-size:13px;color:var(--ink-2);transition:color .2s}
.q svg{width:16px;height:16px;transition:transform .22s var(--expo)}
.q:hover{padding-left:12px}
.q:hover em{color:var(--accent)}
.q:hover svg{transform:translateX(3px)}
.xp-more{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-size:14px;font-weight:500;text-decoration:none}
.xp-more svg{width:16px;height:16px;transition:transform .22s var(--expo)}
.xp-more:hover svg{transform:translateX(3px)}
.contact .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:28px var(--pad) calc(108px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font-size:13px}
.foot div{display:flex;flex-direction:column;gap:4px}
.foot span{color:var(--ink-2)}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}

.scrim{position:fixed;inset:0;background:rgba(17,17,17,.28);opacity:0;pointer-events:none;transition:opacity .4s var(--expo);z-index:50}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;left:50%;bottom:0;width:min(1240px,calc(100vw - 32px));height:88vh;height:min(88dvh,calc(100dvh - 32px));z-index:55;background:var(--bg);
  border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0;
  transform:translate(-50%,104%);transition:transform .7s var(--expo),visibility 0s .7s;display:flex;flex-direction:column;padding:10px 28px calc(20px + env(safe-area-inset-bottom,0px));visibility:hidden}
.drawer.on{transform:translate(-50%,0);visibility:visible;transition:transform .7s var(--expo)}
.grab{align-self:center;width:44px;height:5px;border-radius:3px;background:var(--line);margin:2px 0 12px;flex:none}
@media (min-width:1280px){.dr-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dr-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.dr-head h2{margin:0;font-weight:500;font-size:22px;letter-spacing:-.03em}
.x{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center}
.x:hover{background:var(--surface)}
.x svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none}
.seg{position:relative;display:inline-flex;align-self:flex-start;padding:4px;border-radius:var(--r-md);background:var(--surface);margin-bottom:22px;max-width:100%;overflow-x:auto}
.seg button{position:relative;z-index:1;height:34px;padding:0 14px;border-radius:var(--r-sm);font-size:13px;color:var(--ink-2);white-space:nowrap;transition:color .2s}
.seg button[aria-selected="true"]{color:var(--ink)}
.seg .ind{position:absolute;top:4px;bottom:4px;left:0;border-radius:var(--r-sm);background:var(--surface-2);transition:transform .45s var(--expo),width .45s var(--expo)}
.dr-body{flex:1;overflow-y:auto;overflow-x:hidden;margin:0 -8px;padding:0 8px}
.dr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 12px;transition:transform .32s var(--expo),opacity .22s}
.dr-grid .pc-media{aspect-ratio:4/3}

.viewer{position:fixed;inset:0;z-index:70;background:#0C0C0C;color:#F2F2F0;display:grid;grid-template-columns:minmax(0,1fr) 128px;grid-template-rows:auto minmax(0,1fr) auto;
  padding:calc(14px + env(safe-area-inset-top,0px)) 20px calc(14px + env(safe-area-inset-bottom,0px));gap:14px 20px;opacity:0;visibility:hidden;transition:opacity .4s var(--expo),visibility 0s .4s;overflow:hidden}
.viewer.on{opacity:1;visibility:visible;transition:opacity .4s var(--expo)}
.amb{position:absolute;inset:-12%;filter:blur(70px) saturate(1.2) brightness(.55);transition:opacity 1s var(--expo);pointer-events:none}
.v-top,.v-stage,.v-rail,.v-bot{position:relative;z-index:1}
.v-top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px}
.crumb{margin:0;font-size:13px;color:rgba(242,242,240,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb b{color:#F2F2F0;font-weight:500}
.v-top .x:hover{background:rgba(255,255,255,.1)}
.v-stage{position:relative;min-height:0;transform:scale(.97);transition:transform .6s var(--expo)}
.viewer.on .v-stage{transform:none}
.slide{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .42s var(--expo),transform .5s var(--expo);pointer-events:none}
.slide.cur{opacity:1;transform:none;pointer-events:auto}
.slide .frame{position:relative;width:min(100%,calc((100dvh - 190px)*16/10));aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.v-rail{display:flex;flex-direction:column;gap:10px;overflow-y:auto;padding:4px}
.th{flex:none;display:flex;flex-direction:column;gap:5px;text-align:left;font-size:11px;color:rgba(242,242,240,.55);border-radius:var(--r-md)}
.th .mini{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--r-sm);overflow:hidden;opacity:.5;outline:2px solid transparent;outline-offset:2px;transition:opacity .2s,outline-color .2s}
.th[aria-current="true"]{color:#F2F2F0}
.th[aria-current="true"] .mini{opacity:1;outline-color:#F2F2F0}
.th:hover .mini{opacity:.85}
.pz-feat{background:#14110D}
.pz-name{background:var(--surface);color:var(--ink);display:flex;flex-direction:column;justify-content:flex-end;padding:8%}
.pz-name b{font-weight:500;font-size:min(10cqw,18cqh);letter-spacing:-.04em;line-height:.98}
.pz-name span{margin-top:2.5cqmin;font-size:max(9px,3.4cqmin);color:var(--ink-2)}
.pz-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--expo)}
.pz-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.pz-video{background:linear-gradient(180deg,var(--a) 0%,#2A241C 100%);color:var(--c);display:flex;flex-direction:column;justify-content:center;padding:0 8%}
.pz-video .lb{position:absolute;left:0;right:0;height:9%;background:#000;opacity:.55}
.pz-video .lb1{top:0}.pz-video .lb2{bottom:0}
.pz-video .pz-k{font-size:max(8px,3.4cqmin);letter-spacing:.24em;text-transform:uppercase;color:var(--b);margin-bottom:3cqmin}
.pz-video b{font-weight:400;font-size:min(13cqw,22cqh);letter-spacing:-.045em;line-height:.95;max-width:9ch}
.pz-video .pz-play{position:absolute;right:7cqmin;bottom:13cqmin;width:13cqmin;height:13cqmin;min-width:22px;min-height:22px;border-radius:50%;border:1px solid var(--b);display:grid;place-items:center;color:var(--b)}
.pz-video .pz-play svg{width:34%;height:34%;fill:currentColor}
.slide .frame.f169{aspect-ratio:16/9;width:min(100%,calc((100dvh - 190px)*16/9));background:#000}
.vid{position:absolute;inset:0}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-play{position:absolute;left:50%;top:50%;z-index:3;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;transition:transform .25s var(--expo)}
.vid-play:hover{transform:scale(1.06)}
.vid-play svg{width:22px;height:22px;fill:currentColor;transform:translateX(2px)}
.vid-yt{position:absolute;right:14px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;text-decoration:none}
.vid-yt:hover{background:rgba(0,0,0,.85)}
.vid-yt svg{width:10px;height:10px}
.btn-ghost-d{border:1px solid rgba(242,242,240,.22);color:#F2F2F0}
.btn-ghost-d:hover,.btn-ghost-d[aria-expanded="true"]{background:rgba(255,255,255,.1)}
.v-case{position:relative;z-index:2;grid-column:3;grid-row:1/-1;overflow-y:auto;background:rgba(20,20,19,.86);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:22px 24px 32px;animation:caseIn .5s var(--expo)}
@keyframes caseIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.viewer.case-open{grid-template-columns:minmax(0,1fr) 112px min(440px,34vw)}
.viewer.case-open .v-top,.viewer.case-open .v-bot{grid-column:1/3}
.vc-x{position:absolute;right:10px;top:10px;color:#F2F2F0}
.vc-x:hover{background:rgba(255,255,255,.1)}
.v-case h2{margin:0;font-weight:500;font-size:clamp(30px,2.6vw,42px);letter-spacing:-.04em;line-height:1}
.vc-tagline{margin:8px 0 0;font-size:15px;color:#C9AE82}
.vc-intro{margin:20px 0 0;font-size:17px;line-height:1.5;color:#F2F2F0}
.vc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.vc-tag{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;border:1px solid rgba(242,242,240,.22);color:#F2F2F0;font-size:12px;text-decoration:none;transition:background .2s,border-color .2s}
.vc-tag:hover{background:var(--accent);border-color:var(--accent)}
.v-meta .vc-tags{margin-top:2px;flex-direction:row;flex-wrap:nowrap}
.v-meta .vc-tag{height:26px}
.vid .pz-play{display:none}
.v-case dl{margin:24px 0 0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14px;padding:16px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.v-case dt{color:rgba(242,242,240,.55)}
.v-case dd{margin:0}
.v-case dd a{color:#F2F2F0}
.v-case h3{margin:28px 0 8px;font-size:13px;font-weight:500;color:#C9AE82}
.v-case p.vc-p{margin:0 0 12px;font-size:15px;line-height:1.65;color:rgba(242,242,240,.82)}
.v-bot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:13px}
.v-meta{display:flex;gap:28px;flex-wrap:wrap}
.v-meta div{display:flex;flex-direction:column}
.v-meta span{color:rgba(242,242,240,.55);font-size:12px}
.v-nav{display:flex;gap:6px;align-items:center}
.v-nav .x{color:#F2F2F0}
.v-nav .x:hover{background:rgba(255,255,255,.1)}

@media (max-width:1100px){
  .v-case{position:fixed;left:12px;right:12px;bottom:12px;top:calc(56px + env(safe-area-inset-top,0px));z-index:5;background:#141413}
  .viewer.case-open{grid-template-columns:minmax(0,1fr) 112px}
  .svcs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .dr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .dock{left:0;right:0;bottom:0;border-radius:0;border-width:1px 0 0;justify-content:center;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));transform:translateY(12px)}
  .dock.on{transform:none}
  .dock-mark,.dock-foot,.dk-hide{display:none}
  .dock nav{width:100%;justify-content:space-around;gap:0}
  .dk{min-width:56px;padding:7px 6px;font-size:10px}
  .dk-theme{margin-left:0;box-shadow:none;border-radius:var(--r-md)}
  .foot{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .collab-pin{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .collab-hint{display:none}
  .panel-vis{max-height:30vh}
  .panel{padding-top:24px;min-height:0}
  .pos-l,.pos-r{grid-column:1/-1}
  .pos-l{margin-bottom:20px}
  .orbit{--r:min(40vw,190px);height:380px}
  .mate{width:56px;height:56px;margin:-28px 0 0 -28px}
  .mate .av{font-size:15px}
  .mate .cap{opacity:1;transform:translate(-50%,0);font-size:11px}
  .mate .cap span{display:none}
  .svcs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--pad));padding:0 var(--pad) 8px}
  .svc{flex:none;width:76vw;scroll-snap-align:start}
  .works .pc:nth-child(n){grid-column:1/-1}
  .works .pc:nth-child(n) .pc-media{aspect-ratio:4/3}
  .steps{grid-template-columns:repeat(6,auto);overflow-x:auto}
  .step{min-width:96px}
  .panel-txt,.panel-vis{grid-column:1/-1}
  .panel-vis{margin-top:20px}
  .sheet dl{grid-template-columns:1fr}
  .sheet dt{border-bottom:0;padding-bottom:0;font-size:12px}
  .client b{grid-column:1/-1}
  .ct-l,.ct-r{grid-column:1/-1}
  .ct-r{margin-top:40px}
  .f-row{grid-template-columns:1fr}
  .xidx{grid-template-columns:1fr 1fr}
  .cs-title,.cs-intro,.cs-h,.cs-txt{grid-column:1/-1}
  .cs-intro{margin-top:24px}
  .cs-meta{grid-template-columns:1fr 1fr;row-gap:20px}
  .cs-txt{margin-top:14px}
  .cs-frame{border-radius:var(--r-md)}
  .kpis{grid-template-columns:1fr;row-gap:28px}
  .xp-l,.xp-r{grid-column:1/-1}
  .xp-l{position:static;margin-bottom:28px}
  .q{grid-template-columns:1fr auto}
  .q em{display:none}
  .client span{grid-column:span 6}
  .client .cl-line,.cl-tags{grid-column:1/-1;justify-self:start}
  .clients .vc-tags{justify-content:flex-start}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .drawer{left:0;width:100%;height:calc(100dvh - 24px);transform:translateY(104%);padding-left:16px;padding-right:16px}
  .drawer.on{transform:none}
  .dr-grid{grid-template-columns:1fr}
  .viewer{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;padding-left:12px;padding-right:12px}
  .v-rail{flex-direction:row;overflow-x:auto;overflow-y:hidden}
  .th{width:96px}
  .slide .frame{width:100%}
  .v-bot{flex-direction:column;align-items:flex-start}
  .v-meta{gap:16px}
  .viewer.case-open{grid-template-columns:minmax(0,1fr)}
  .viewer.case-open .v-top,.viewer.case-open .v-bot{grid-column:1/-1}
  .rv-top p{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reel-layer:first-child{opacity:1}
}
html.rm .intro{height:auto}
html.rm .stage{position:relative;height:100vh;height:100dvh}
a.svc{text-decoration:none;cursor:pointer;transition:transform .5s var(--expo)}
@media (hover:hover){a.svc:hover{transform:translateY(-4px)}}
a.svc:focus-visible ul{opacity:1;transform:none}
.svc h3{padding-right:44px}
.svc .go{position:absolute;right:clamp(16px,1.6vw,22px);top:clamp(16px,1.6vw,22px);width:40px;height:40px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.85) rotate(-45deg);transition:opacity .2s,transform .4s var(--expo)}
.svc .go svg{width:16px;height:16px}
a.svc:hover .go,a.svc:focus-visible .go{opacity:1;transform:none}
@media (hover:none){.svc .go{opacity:1;transform:none}}
.svc-cta .btn{margin-top:16px}
.lang{display:inline-flex;gap:2px;align-items:center}
.lang button{font:inherit;color:var(--ink-3);padding:4px 3px;border-radius:4px}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{color:var(--ink);font-weight:500}
.foot b{font-weight:400;color:var(--ink)}
/* ---------- Hero motion reel ---------- */
.reel-inner{container-type:size;background:#0E0E0D;color:#F2F2F0}
.sc{position:absolute;inset:0;overflow:hidden;visibility:hidden}
.sc.on{visibility:visible;animation:scIn .8s var(--expo) both}
.sc[data-in="circle"].on{animation-name:scCircle}
.sc[data-in="wipe"].on{animation-name:scWipe}
.sc[data-in="up"].on{animation-name:scUp}
.sc[data-in="zoom"].on{animation-name:scZoom}
@keyframes scIn{from{opacity:0}to{opacity:1}}
@keyframes scCircle{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(80% at 50% 50%)}}
@keyframes scWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes scUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes scZoom{from{transform:scale(1.2);opacity:0}to{transform:none;opacity:1}}
.sc .rx{opacity:0;transform:var(--r,none)}
.sc.on .rx{animation:var(--an,aUp) var(--du,.9s) var(--expo) var(--d,0s) both}
@keyframes aUp{from{opacity:0;transform:var(--r,) translateY(40%)}to{opacity:1;transform:var(--r,none)}}
@keyframes aMask{from{opacity:1;clip-path:inset(0 0 100% 0);transform:var(--r,) translateY(35%)}to{opacity:1;clip-path:inset(0);transform:var(--r,none)}}
@keyframes aPop{from{opacity:0;transform:var(--r,) scale(.4)}to{opacity:1;transform:var(--r,none)}}
@keyframes aLeft{from{opacity:0;transform:var(--r,) translateX(-35%)}to{opacity:1;transform:var(--r,none)}}
@keyframes aRight{from{opacity:0;transform:var(--r,) translateX(35%)}to{opacity:1;transform:var(--r,none)}}
@keyframes aTilt{from{opacity:0;transform:var(--r,) perspective(1400px) translateY(28%) rotateX(32deg) scale(.9)}to{opacity:1;transform:var(--r,none)}}
@keyframes aZoom{from{opacity:0;transform:var(--r,) scale(1.45)}to{opacity:1;transform:var(--r,none)}}
.fl{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
.sc.on .fl{animation:flash var(--fd,.3s) linear var(--d,0s) 1 none}
.sc.on .fl.last{animation-fill-mode:forwards}
@keyframes flash{0%,100%{opacity:1}}
.rl-split{display:inline-flex}
.rl-split .rx{display:inline-block}
.rl-card{position:absolute;margin:0;border-radius:1.3cqw;overflow:hidden;box-shadow:0 2cqw 5cqw rgba(0,0,0,.35)}
.rl-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rl-card figcaption{position:absolute;left:1.3cqw;bottom:1.1cqw;font-size:1.25cqw;font-weight:500;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.rl-play{position:absolute;left:50%;top:50%;width:6cqw;height:6cqw;margin:-3cqw 0 0 -3cqw;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.rl-play::after{content:"";margin-left:.5cqw;border-left:1.8cqw solid #111;border-top:1.1cqw solid transparent;border-bottom:1.1cqw solid transparent}
.rl-logo{position:absolute}
.rl-logo.w{filter:brightness(0) invert(1)}
.rl-logo.k{filter:brightness(0)}
.rl-kpi{position:absolute;background:#fff;color:#2A1F1A;border-radius:1.3cqw;padding:1.5cqw 1.9cqw;box-shadow:0 1.6cqw 4cqw rgba(60,30,10,.18);min-width:17cqw}
.rl-kpi b{display:block;font-size:4.8cqw;font-weight:500;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.rl-kpi span{display:block;margin-top:.6cqw;font-size:1.35cqw;color:rgba(42,31,26,.65)}
.rl-chip{display:inline-flex;align-items:center;height:2.6cqw;padding:0 1.2cqw;border-radius:999px;font-size:1.2cqw;font-weight:500;border:1px solid currentColor}
/* intro + end */
.s0-wrap{position:absolute;left:50%;top:46%;display:flex;align-items:center;gap:2.6cqw;transform:translate(-50%,-50%)}
.s0-glyph{width:13cqw;height:13cqw;border-radius:3.4cqw;display:grid;place-items:center;font-weight:600;font-size:6cqw;letter-spacing:-.04em}
.s0-word{font-weight:600;font-size:11.5cqw;letter-spacing:-.055em;line-height:1}
.s0-tag{position:absolute;left:0;right:0;top:66%;margin:0;text-align:center;font-size:2.1cqw}
.s0-badge{position:absolute;right:7cqw;top:11cqh;padding:.9cqw 1.7cqw;border:2px solid currentColor;border-radius:999px;font-size:1.7cqw;font-weight:500}
.fl span{font-weight:600;font-size:15cqw;letter-spacing:-.06em;line-height:1}
/* Richemont */
.s1-logo{left:50%;top:9%;width:34cqw;--r:translateX(-50%)}
.s1-main{left:50%;top:56%;width:44cqw;aspect-ratio:16/10;--r:translate(-50%,-50%)}
.s1-side{top:58%;width:22cqw;aspect-ratio:4/5}
.s1-l{left:15%;--r:translate(-50%,-50%) rotate(-9deg)}
.s1-r{left:85%;--r:translate(-50%,-50%) rotate(8deg)}
.s1-tag{position:absolute;left:0;right:0;bottom:6%;margin:0;text-align:center;font-size:2cqw;letter-spacing:.32em;text-transform:uppercase;color:#C9A46A}
/* LeFloris */
.mq3{position:absolute;inset:-10%;display:flex;flex-direction:column;justify-content:center;gap:1.2cqw;transform:rotate(-7deg)}
.mrow{white-space:nowrap;font-weight:600;font-size:9cqw;letter-spacing:-.045em;line-height:1;color:#E6D4BE}
.sc.on .mrow{animation:mqX 10s linear both}
.sc.on .mrow.rev{animation-direction:reverse}
@keyframes mqX{from{transform:translateX(0)}to{transform:translateX(-38%)}}
.rl-phone{position:absolute;width:21cqw;height:42cqw;border-radius:3.2cqw;border:.7cqw solid #1A1512;background:#fff;color:#1F1F1F;overflow:hidden;box-shadow:0 2cqw 6cqw rgba(60,30,10,.28)}
.s2-phone{left:50%;top:53%;--r:translate(-50%,-50%)}
.ph-search{margin:3.2cqw 1.4cqw 1.6cqw;height:3cqw;border-radius:999px;background:#F1F1F0;display:flex;align-items:center;padding:0 1.2cqw;font-size:1.15cqw;color:#555}
.ph-ad{margin:0 1.4cqw;padding:1.3cqw;border-radius:1cqw;background:#FBF6F0;border:1px solid #EFE3D5}
.ph-ad small{display:block;font-size:.95cqw;color:#7a6a5c}
.ph-ad b{display:block;margin-top:.5cqw;font-size:1.45cqw;line-height:1.2;color:#1A4FB4;font-weight:500}
.ph-ad p{margin:.6cqw 0 0;font-size:1.05cqw;line-height:1.35;color:#555}
.ph-btn{display:inline-block;margin-top:1cqw;padding:.6cqw 1.2cqw;border-radius:999px;background:#B5643C;color:#fff;font-size:1.05cqw}
.ph-line{margin:1.2cqw 1.4cqw 0;height:.9cqw;border-radius:999px;background:#EEE}
.ph-line.s{width:55%}
.s2-logo{left:5%;top:7%;width:15cqw;--r:none}
.s2-k1{left:63%;top:16%}
.s2-k2{left:8%;top:52%}
.s2-k3{left:66%;top:62%}
/* Cars & Arts */
.s4-logo{left:50%;top:6%;width:30cqw;--r:translateX(-50%)}
.rl-browser{position:absolute;border-radius:1.2cqw;overflow:hidden;background:#0B0B0C;box-shadow:0 2.4cqw 6cqw rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08)}
.rl-bar{height:2.2cqw;display:flex;align-items:center;gap:.6cqw;padding:0 1.1cqw;background:#1B1B1D}
.rl-bar i{width:.8cqw;height:.8cqw;border-radius:50%;background:#3A3A3C}
.s4-site{left:52%;top:60%;width:60cqw;height:33cqw;--r:translate(-50%,-50%)}
.s4-nav{display:flex;justify-content:space-between;align-items:center;padding:1.6cqw 2.4cqw;font-size:1.1cqw;color:#bbb}
.s4-nav span{display:flex;gap:1.6cqw}
.s4-hero{padding:1.2cqw 2.4cqw}
.s4-hero b{display:block;font-size:4.2cqw;font-weight:500;letter-spacing:-.04em;line-height:1.02;color:#fff;max-width:30cqw}
.s4-hero em{display:block;width:8cqw;height:.4cqw;margin-top:1.4cqw;background:#C9332B}
.s4-row{position:absolute;left:2.4cqw;right:2.4cqw;bottom:2cqw;display:grid;grid-template-columns:repeat(4,1fr);gap:1cqw}
.s4-row i{height:8cqw;border-radius:.8cqw;background:linear-gradient(160deg,#2C2C30,#151517)}
.s4-row i:nth-child(2){background:linear-gradient(160deg,#5A1D1A,#1A0D0C)}
.s4-spec{position:absolute;left:4%;top:62%;width:17cqw;padding:1.6cqw;border-radius:1.2cqw;background:#F2F1EE;color:#121214;--r:rotate(-7deg);box-shadow:0 2cqw 5cqw rgba(0,0,0,.45)}
.s4-spec b{display:block;font-size:6cqw;font-weight:500;letter-spacing:-.05em;line-height:1}
.s4-sw{display:flex;gap:.6cqw;margin-top:1.2cqw}
.s4-sw i{width:2.6cqw;height:2.6cqw;border-radius:50%}
/* Emerald Stay */
.s5-logo{left:6%;top:8%;width:14cqw;--r:none}
.s5-k{position:absolute;left:7%}
.s5-k b{display:block;font-weight:400;font-size:7.4cqw;letter-spacing:-.05em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.s5-k span{display:block;margin-top:.4cqw;font-size:1.4cqw;color:#9FD3BC}
.s5-print{position:absolute;width:19cqw;aspect-ratio:3/4;border-radius:1cqw;padding:2cqw;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 2cqw 5cqw rgba(0,0,0,.4)}
.s5-print b{font-size:2.2cqw;font-weight:500;letter-spacing:-.03em;line-height:1}
.s5-print span{font-size:1.2cqw}
.s5-p1{left:64%;top:52%;background:#F1F4F1;color:#0F3B33;--r:translate(-50%,-50%) rotate(-6deg)}
.s5-p2{left:80%;top:47%;background:#1E6B57;color:#F1F4F1;--r:translate(-50%,-50%) rotate(7deg)}
.s5-bc{position:absolute;left:73%;top:80%;width:13cqw;aspect-ratio:85/55;border-radius:.7cqw;background:#fff;color:#0F3B33;display:grid;place-items:center;font-weight:600;font-size:2.2cqw;letter-spacing:-.04em;--r:translate(-50%,-50%) rotate(-12deg);box-shadow:0 1.4cqw 3cqw rgba(0,0,0,.35)}
/* next bank */
.s7-logo{left:6%;top:9%;width:16cqw;--r:none}
.s7-h{position:absolute;left:6%;top:30%;margin:0;max-width:38cqw;font-size:4.6cqw;font-weight:500;letter-spacing:-.04em;line-height:1.02;color:#00453D}
.s7-chips{position:absolute;left:6%;top:66%;display:flex;gap:.8cqw;color:#00594F}
.s7-v{position:absolute;top:52%;width:13cqw;aspect-ratio:9/16;border-radius:1.4cqw;overflow:hidden;box-shadow:0 2cqw 4cqw rgba(0,60,50,.3)}
.s7-v::before{content:"";position:absolute;left:50%;top:28%;width:5cqw;height:5cqw;margin-left:-2.5cqw;border-radius:50%;background:rgba(255,255,255,.35)}
.s7-v::after{content:"";position:absolute;left:50%;top:44%;width:9cqw;height:14cqw;margin-left:-4.5cqw;border-radius:4.5cqw 4.5cqw 0 0;background:rgba(255,255,255,.25)}
.s7-v span{position:absolute;left:1cqw;right:1cqw;bottom:1.4cqw;z-index:1;padding:.6cqw .8cqw;border-radius:.6cqw;background:rgba(0,0,0,.55);color:#fff;font-size:1.1cqw;text-align:center}
.s7-v em{position:absolute;right:.8cqw;top:.8cqw;z-index:1;font-style:normal;font-size:.95cqw;font-weight:600;padding:.3cqw .6cqw;border-radius:999px;background:#fff;color:#00594F}
.s7-v1{left:57%;background:linear-gradient(170deg,#3FB39E,#00594F);--r:translate(-50%,-50%) rotate(-5deg)}
.s7-v2{left:72%;background:linear-gradient(170deg,#F2B544,#C9572B);--r:translate(-50%,-56%)}
.s7-v3{left:87%;background:linear-gradient(170deg,#6CC5B0,#1E6B57);--r:translate(-50%,-50%) rotate(5deg)}
/* Mandarin Oriental */
.s8-logo{left:50%;top:3%;width:26cqw;--r:translateX(-50%)}
.s8-menu{position:absolute;left:34%;top:58%;width:19cqw;aspect-ratio:2/3;border-radius:.8cqw;background:#F5F0E8;color:#2B2420;padding:2.2cqw 2cqw;text-align:center;box-shadow:0 2cqw 5cqw rgba(0,0,0,.5);--r:translate(-50%,-50%) rotate(-5deg)}
.s8-menu b{display:block;font-size:2.4cqw;font-weight:500;letter-spacing:.3em}
.s8-menu small{display:block;margin-top:.6cqw;font-size:1cqw;letter-spacing:.2em;text-transform:uppercase;color:#8A6A44}
.s8-menu i{display:block;height:.35cqw;margin:1.5cqw auto 0;border-radius:999px;background:#D9CDBA;width:70%}
.s8-menu i:nth-of-type(odd){width:50%}
.s8-film{left:66%;top:58%;width:34cqw;aspect-ratio:16/9;background:radial-gradient(30% 40% at 30% 40%,rgba(255,214,150,.75),transparent 70%),radial-gradient(25% 35% at 72% 60%,rgba(255,190,120,.5),transparent 70%),linear-gradient(160deg,#6B4A33,#24170F);--r:translate(-50%,-50%)}
/* Piguet Galland */
.s9-logo{left:4%;top:4%;width:22cqw;--r:none}
.s9-card{position:absolute;top:57%;width:23cqw;aspect-ratio:4/5;border-radius:1.2cqw;padding:2cqw;background:#fff;color:#1D2B3A;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 2cqw 5cqw rgba(29,43,58,.18)}
.s9-card small{font-size:1.05cqw;letter-spacing:.14em;text-transform:uppercase;color:#6E8399}
.s9-card b{font-size:2.5cqw;font-weight:500;letter-spacing:-.03em;line-height:1.08}
.s9-bars{display:flex;align-items:flex-end;gap:.8cqw;height:9cqw}
.s9-bars i{flex:1;border-radius:.4cqw .4cqw 0 0;background:#9DB4C8}
.s9-bars i:last-child{background:#1D2B3A}
.s9-c1{left:28%;--r:translate(-50%,-50%) rotate(-5deg)}
.s9-c2{left:50%;background:#1D2B3A;color:#F3F2EE;--r:translate(-50%,-53%)}
.s9-c2 small{color:#9DB4C8}
.s9-c3{left:72%;--r:translate(-50%,-50%) rotate(5deg)}
/* logos */
.fl img{width:34cqw;height:auto;max-height:22cqh;object-fit:contain;filter:brightness(0) invert(1)}
.s10-k{position:absolute;left:0;right:0;bottom:8%;margin:0;text-align:center;font-size:1.6cqw;color:rgba(242,242,240,.6)}
.reel-inner.still .rx,.reel-inner.still .fl.last{opacity:1}

.reel-inner.paused *{animation-play-state:paused!important}

.collab-list{display:none}
/* ---------- Mobile structure ---------- */
@media (max-width:820px){
  /* team: tidy grid instead of the arc */
  .orbit{height:auto;overflow:visible;margin-top:32px}
  .orbit .arc{display:none}
  .mates{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 10px}
  .mate{position:static;width:76px;height:auto;margin:0;transform:none;display:flex;flex-direction:column;align-items:center;gap:8px}
  .mate .av{width:58px;height:58px;font-size:16px}
  .mate .cap{position:static;transform:none;opacity:1;font-size:13px;text-align:center;white-space:normal;line-height:1.25}
  .mate .cap span{display:block;font-size:12px;color:var(--ink-2)}
  .orbit .center{position:static;transform:none;margin-top:36px}
  .disc{margin-top:28px;font-size:15px;text-align:left}
  /* collaboration: readable vertical list, no pinned scroll */
  .collab{height:auto}
  .collab-pin{position:static;height:auto;display:block;padding:clamp(72px,18vw,96px) var(--pad) 8px}
  .collab .steps-wrap,.collab .panel,.collab-hint{display:none}
  .collab-list{display:block;list-style:none;margin:0;padding:0 var(--pad) 24px}
  .collab-list li{display:grid;grid-template-columns:40px 1fr;column-gap:12px;padding:20px 0;border-top:1px solid var(--line)}
  .collab-list li:last-child{border-bottom:1px solid var(--line)}
  .collab-list span{grid-row:span 2;font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums;padding-top:5px}
  .collab-list h3{margin:0;font-size:22px;font-weight:500;letter-spacing:-.03em}
  .collab-list p{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2)}
  /* problem cards: shorter cards, smaller arrow, visible peek */
  .svc{width:80vw;height:auto;min-height:320px;gap:24px}
  .svc h3{font-size:24px}
  .svc .go{width:40px;height:40px}
  .svcs{scroll-padding-left:var(--pad)}
  /* general rhythm */
  .sec{padding-top:72px;padding-bottom:72px}
  .sec.tight{padding-top:0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:28px}
  .h2{font-size:clamp(30px,8.4vw,40px)}
  .lede{font-size:15px}
  .pos-r .big{font-size:clamp(32px,9vw,44px)}
  .perf .h2{font-size:clamp(36px,10vw,52px)}
  .contact .big,.xpage-end .big{font-size:clamp(34px,9.5vw,48px)}
  .client{padding:16px 0}
  .client b{font-size:24px}
  .cs-hero{padding-top:56px}
  .cs-title h1{font-size:clamp(40px,12vw,64px)}
  .cs-meta{margin-top:28px}
  .cs-body{padding-top:48px;padding-bottom:48px}
  .kpi b{font-size:44px}
  .metric b{font-size:40px}
  .exp-cap{flex-direction:column;gap:4px}
  .logos{margin-top:56px}
  .foot{gap:20px 16px}
}

/* ---------- Service pages ---------- */
.sv-hero{padding-top:clamp(80px,10vw,150px)}
.sv-h1{margin:0;font-weight:400;font-size:clamp(40px,5.6vw,92px);line-height:.98;letter-spacing:-.05em;max-width:15ch}
.sv-kicker{margin:28px 0 0;font-size:clamp(20px,1.8vw,28px);letter-spacing:-.02em}
.sv-intro{margin:16px 0 0;max-width:62ch;font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:var(--ink-2)}
.sv-hero .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.in-l{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .2s}
.in-l:hover{color:var(--accent)}
.sv-man{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px)}
.sv-man .h2{grid-column:1/span 5;font-size:clamp(28px,2.8vw,44px)}
.sv-man-txt{grid-column:7/span 6}
.sv-man-txt p{margin:0 0 18px;font-size:clamp(16px,1.25vw,19px);line-height:1.65;color:var(--ink-2)}
.sv-man-txt p:first-child{color:var(--ink)}
.sv-quote{text-align:center}
.sv-quote p{margin:0;font-size:clamp(34px,4.6vw,76px);font-weight:400;letter-spacing:-.045em;line-height:1.02}
.sv-quote p span{display:block}
.sv-quote p span:last-child{color:var(--accent)}
.sv-quote em{display:block;margin-top:20px;font-style:normal;font-size:clamp(16px,1.3vw,20px);color:var(--ink-2)}
.sv-offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sv-offer{display:flex;flex-direction:column;padding:clamp(22px,2vw,30px);border-radius:var(--r-lg);background:var(--surface)}
.sv-n{font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums}
.sv-offer h3{margin:14px 0 0;font-size:clamp(24px,2vw,32px);font-weight:500;letter-spacing:-.035em}
.sv-p{margin:10px 0 0;font-size:16px;font-weight:500;line-height:1.4}
.sv-d{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.sv-cta{margin-top:auto;align-self:flex-start}
.sv-offer .sv-d{margin-bottom:24px}
.sv-tools{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;border-top:1px solid var(--line)}
.sv-tools li{display:flex;flex-direction:column;gap:6px;padding:20px 0;border-bottom:1px solid var(--line)}
.sv-tools b{font-size:20px;font-weight:500;letter-spacing:-.02em}
.sv-tools span{font-size:14px;line-height:1.5;color:var(--ink-2)}
.sv-case{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);align-items:center;text-decoration:none}
.sv-case-vis{grid-column:1/span 6;position:relative;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.sv-case-vis .pz{transition:transform .6s var(--expo)}
.sv-case:hover .sv-case-vis .pz{transform:scale(1.02)}
.sv-case-txt{grid-column:8/span 5}
.sv-case-txt>span:first-child{font-size:13px;color:var(--ink-2)}
.sv-case-txt h3{margin:8px 0 0;font-size:clamp(30px,3vw,48px);font-weight:500;letter-spacing:-.04em}
.sv-more{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:14px;font-weight:500;color:var(--accent)}
.sv-more svg{width:16px;height:16px;transition:transform .22s var(--expo)}
.sv-case:hover .sv-more svg{transform:translateX(3px)}
.sv-faq{border-top:1px solid var(--line);max-width:900px}
.sv-faq details{border-bottom:1px solid var(--line)}
.sv-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:clamp(17px,1.4vw,21px);font-weight:500;letter-spacing:-.015em}
.sv-faq summary::-webkit-details-marker{display:none}
.sv-faq summary::after{content:"+";font-size:24px;font-weight:300;color:var(--ink-2);transition:transform .3s var(--expo)}
.sv-faq details[open] summary::after{transform:rotate(45deg)}
.sv-faq details p{margin:0 0 22px;max-width:70ch;font-size:16px;line-height:1.65;color:var(--ink-2)}
.sv-others{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sv-other{position:relative;display:flex;flex-direction:column;gap:10px;min-height:200px;padding:22px;border-radius:var(--r-lg);background:var(--surface);text-decoration:none;transition:background .2s}
.sv-other:hover{background:var(--surface-2)}
.sv-other span{font-size:13px;color:var(--accent)}
.sv-other b{font-size:21px;font-weight:500;letter-spacing:-.025em;line-height:1.15;max-width:18ch}
.sv-other em{font-style:normal;font-size:14px;line-height:1.5;color:var(--ink-2);max-width:32ch}
.sv-other svg{position:absolute;right:20px;bottom:20px;width:18px;height:18px;transition:transform .22s var(--expo)}
.sv-other:hover svg{transform:translateX(3px)}
@media (max-width:1100px){.sv-offers,.sv-others{grid-template-columns:1fr}.sv-tools{grid-template-columns:1fr 1fr}}
@media (max-width:820px){
  .sv-hero{padding-top:56px}
  .sv-h1{font-size:clamp(34px,9.4vw,48px)}
  .sv-man .h2,.sv-man-txt,.sv-case-vis,.sv-case-txt{grid-column:1/-1}
  .sv-man-txt{margin-top:20px}
  .sv-case-txt{margin-top:18px}
  .sv-tools{grid-template-columns:1fr}
  .sv-quote p{font-size:clamp(30px,8.6vw,42px)}
  .sv-other{min-height:0;padding-bottom:52px}
}

.sv-offers.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sv-kpi{display:flex;flex-direction:column;padding-top:18px;border-top:1px solid var(--line);text-decoration:none}
.sv-kpi b{font-weight:400;font-size:clamp(44px,5.4vw,88px);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.sv-kpi span{margin-top:10px;font-size:15px;color:var(--ink-2)}
.sv-kpi em{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-style:normal;font-size:14px;font-weight:500;color:var(--accent)}
.sv-kpi em svg{width:14px;height:14px;transition:transform .22s var(--expo)}
.sv-kpi:hover em svg{transform:translateX(3px)}
@media (max-width:1100px){.sv-offers.n4{grid-template-columns:1fr}}
@media (max-width:820px){.sv-kpis{grid-template-columns:1fr;row-gap:24px}.sv-kpi b{font-size:48px}}

.sv-works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 12px}
.sv-works .pc-media{aspect-ratio:4/3}
@media (max-width:820px){.sv-works{grid-template-columns:1fr}}

.sv-others{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.sv-testi blockquote{margin:0;padding:clamp(28px,4vw,56px);border-radius:var(--r-lg);background:var(--surface)}
.sv-testi p{margin:0;font-size:clamp(20px,2vw,30px);line-height:1.3;letter-spacing:-.02em;max-width:44ch}
.sv-testi cite{display:block;margin-top:18px;font-style:normal;font-size:14px;color:var(--ink-2)}
.xp-also{margin:14px 0 0;font-size:15px;color:var(--ink-2);max-width:60ch}
.xp-sub{margin-left:18px;color:var(--ink-2)}
@media (max-width:820px){.xp-sub{display:flex;margin-left:0;margin-top:12px}}

.svc-main{color:inherit;text-decoration:none}
.svc-main::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.svc-main:focus-visible{outline:none}
.svc:has(.svc-main:focus-visible){outline:2px solid var(--accent);outline-offset:4px}
.svc-bot{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.svc-ct{position:relative;z-index:2;display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;background:rgba(17,17,17,.88);color:#fff;font-size:12px;font-weight:500;text-decoration:none;opacity:0;transform:translateY(6px);transition:opacity .22s,transform .4s var(--expo)}
.svc:hover .svc-ct,.svc:focus-within .svc-ct{opacity:1;transform:none}
@media (hover:none){.svc-ct{opacity:1;transform:none}}
a.metric{text-decoration:none;color:inherit}
a.metric em{display:block;margin-top:6px;font-style:normal;font-size:13px;font-weight:500;color:var(--accent)}
a.metric:hover b{color:var(--accent)}
.svc .go{z-index:2;pointer-events:none}

.ctpage .contact{padding-top:clamp(80px,10vw,140px)}
.ct-crumb{margin-bottom:28px}
.home-cta{text-align:left}
.home-cta .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.home-cta .ct-sub{margin:14px 0 0;color:var(--ink-2);font-size:clamp(16px,1.3vw,19px)}
.sv-team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:24px 12px}
.sv-team li{display:flex;flex-direction:column;gap:4px}
.sv-team .av{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-weight:600;color:#111;margin-bottom:10px}
.sv-team b{font-size:17px;font-weight:500}
.sv-team span:last-child{font-size:14px;color:var(--ink-2)}
.sv-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:820px){.sv-facts{grid-template-columns:1fr 1fr}}

.foot .ft-k{margin-top:12px}
.foot .ft-cert{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.foot .ft-cert svg{width:15px;height:15px;color:var(--accent)}

/* Static client logo wall (no marquee) */
.logo-grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;row-gap:clamp(20px,3vw,44px)}
.logo-grid li{flex:0 0 20%;height:clamp(64px,6.4vw,104px);display:grid;place-items:center}
.logo-grid img{display:block;width:72%;max-width:220px;height:100%;object-fit:contain;filter:brightness(0);opacity:.5;transition:opacity .2s}
.logo-grid li:hover img{opacity:.85}
:root[data-theme="dark"] .logo-grid img{filter:brightness(0) invert(1);opacity:.6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-grid img{filter:brightness(0) invert(1);opacity:.6}}
@media (max-width:820px){.logo-grid li{flex-basis:33.333%;height:64px}.logo-grid img{width:80%}}

.logos-sec .logos{margin-top:0}
.logo-grid{row-gap:clamp(14px,2vw,28px)}
.logo-grid li{flex-basis:16.666%;height:clamp(40px,4vw,64px)}
.logo-grid img{width:62%;max-width:150px}
@media (max-width:820px){.logo-grid li{flex-basis:33.333%;height:46px}.logo-grid img{width:66%}}

.logo-grid li{flex-basis:14.285%}
.logos-sec{padding-bottom:clamp(24px,3vw,48px)}
@media (max-width:820px){.logo-grid li{flex-basis:25%;height:42px}.logo-grid img{width:76%}}

/* Agency photo mosaic */
.sv-photos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px) clamp(10px,1.2vw,16px)}
.sv-ph{margin:0;display:flex;flex-direction:column;gap:10px}
.sv-ph-img{overflow:hidden;border-radius:var(--r-lg);background:var(--surface)}
.sv-ph-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--expo)}
.sv-ph:hover .sv-ph-img img{transform:scale(1.025)}
.sv-ph figcaption{font-size:13px;line-height:1.45;color:var(--ink-2);max-width:48ch}
.ph-a{grid-column:1/span 7}.ph-a .sv-ph-img{aspect-ratio:1024/552}
.ph-b{grid-column:8/span 5;align-self:end}.ph-b .sv-ph-img{aspect-ratio:1024/680}
.ph-c{grid-column:1/span 4}.ph-c .sv-ph-img,.ph-e .sv-ph-img{aspect-ratio:4/3.4}
.ph-d{grid-column:5/span 4}.ph-d .sv-ph-img{aspect-ratio:4/4.6}
.ph-e{grid-column:9/span 4}
.ph-c,.ph-e{align-self:start}
@media (max-width:820px){
  .sv-photos{grid-template-columns:1fr 1fr}
  .ph-a{grid-column:1/-1}.ph-b{grid-column:1/-1}
  .ph-c,.ph-d,.ph-e{grid-column:auto}.ph-e{grid-column:1/-1}
  .ph-c .sv-ph-img,.ph-d .sv-ph-img{aspect-ratio:3/4}
}

/* Testimonials */
.testi-grid{columns:3 300px;column-gap:12px}
.testi{break-inside:avoid;margin:0 0 12px;padding:clamp(20px,2vw,28px);border-radius:var(--r-lg);background:var(--surface);display:flex;flex-direction:column;gap:20px}
.testi blockquote{margin:0;font-size:16px;line-height:1.55;letter-spacing:-.005em}
.testi figcaption{display:flex;align-items:center;gap:12px;font-size:13px}
.testi figcaption b{display:block;font-weight:500;font-size:14px}
.testi figcaption span span{color:var(--ink-2)}
.testi-av{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--bg);font-weight:600;font-size:12px;color:var(--ink)}
.testi-3{columns:3 260px}
#testiNote:empty{display:none}

.testi-nav{display:flex;gap:8px}
.testi-nav .x{width:40px;height:40px;border-radius:50%;background:var(--surface);color:var(--ink);border:0}
.testi-nav .x:disabled{opacity:.35;cursor:default}
.testi-nav .x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.testi-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);margin:0 calc(-1*var(--pad));padding:0 var(--pad) 4px;scrollbar-width:none;overscroll-behavior-x:contain}
.testi-track::-webkit-scrollbar{display:none}
.testi-track .testi{flex:0 0 clamp(280px,30vw,420px);margin:0;scroll-snap-align:start}
.testi-track:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.xp-cards{margin-top:clamp(28px,4vw,48px)}
@media (max-width:820px){.testi-track .testi{flex-basis:84vw}.testi-nav{display:none}}
.testi-track .testi{justify-content:space-between}

/* Expertise H1: keyword-rich, still editorial */
.xp-h1{font-size:clamp(40px,6.2vw,104px);line-height:.96;letter-spacing:-.05em;max-width:13ch}
/* Breadcrumbs: comfortable click targets */
.crumb2{display:flex;flex-wrap:wrap;align-items:center;column-gap:2px;margin-left:-10px}
.crumb2 a{display:inline-flex;align-items:center;min-height:36px;padding:0 10px;border-radius:999px;transition:background .18s}
.crumb2 a:hover{text-decoration:none;background:var(--surface)}
.crumb2 a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.crumb2 > span:not(:has(a)), .crumb2{line-height:36px}

.foot .ft-addr{font-style:normal;color:var(--ink-2);line-height:1.5;margin-top:6px}
.swiss-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:6px 12px 6px 14px;border:1.5px solid var(--ink);border-radius:999px;color:var(--ink)!important;font-size:13px;font-weight:500;white-space:nowrap}
.swiss-pill .ch-flag{width:15px;height:15px;flex:none}

/* Swiss Made pill as a button */
button.swiss-pill{background:none;font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s,color .2s}
button.swiss-pill:hover{background:var(--ink);color:var(--bg)!important}
button.swiss-pill:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Story of the name: simple reading modal */
.sw{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;background:rgba(17,17,17,.42);opacity:0;transition:opacity .3s ease}
.sw.on{opacity:1}
.sw-card{position:relative;width:min(640px,100%);max-height:min(86dvh,860px);overflow-y:auto;overscroll-behavior:contain;padding:clamp(28px,4vw,48px);border-radius:20px;background:var(--bg);color:var(--ink);box-shadow:0 24px 70px rgba(0,0,0,.22);transform:translateY(14px);transition:transform .45s var(--expo)}
.sw.on .sw-card{transform:none}
.sw-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:0;background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.sw-close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.sw-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sw-intro{margin:0;font-size:13px;color:var(--ink-2)}
.sw-crawl h2{margin:8px 0 22px;font-size:clamp(28px,3.4vw,40px);font-weight:500;letter-spacing:-.035em;line-height:1.05;padding-right:40px}
.sw-crawl p{margin:0 0 16px;font-size:16px;line-height:1.7;color:var(--ink-2)}
.sw-crawl p:first-of-type{color:var(--ink)}
.sw-end{margin-top:24px}
.sw-end .btn{margin-top:0}
@media (max-width:820px){.sw{padding:12px;align-items:end}.sw-card{max-height:88dvh;border-radius:20px 20px 16px 16px}}
.foot .ft-milk{max-width:34ch;line-height:1.5}

/* Swiss Made pill: same outline as the ghost buttons */
.foot .swiss-pill{border:1px solid var(--line);padding:0 18px;height:44px;font-size:14px;gap:10px;color:var(--ink)!important}
button.swiss-pill:hover{background:var(--surface);color:var(--ink)!important}
/* Footer links: clickable only on the words themselves */
.foot div{align-items:flex-start}
.foot a,.foot button{width:auto;max-width:max-content}

/* Legal pages */
.lg{max-width:860px;padding-top:clamp(80px,10vw,140px)}
.lg-h1{margin:0;font-weight:400;font-size:clamp(40px,5.4vw,80px);letter-spacing:-.045em;line-height:1}
.lg-upd{margin:14px 0 0;font-size:13px;color:var(--ink-2)}
.lg-lead{margin:28px 0 0;font-size:clamp(17px,1.4vw,20px);line-height:1.6}
.lg-sec{margin-top:clamp(36px,4vw,52px);padding-top:24px;border-top:1px solid var(--line)}
.lg-sec h2{margin:0 0 14px;font-size:clamp(20px,1.7vw,24px);font-weight:500;letter-spacing:-.02em}
.lg-body{font-size:16px;line-height:1.65;color:var(--ink-2)}
.lg-body p{margin:0 0 12px}
.lg-body ul{margin:0;padding-left:1.1em}
.lg-body li{margin:0 0 10px}
.lg-body b{color:var(--ink);font-weight:500}
.lg-body a{color:var(--ink)}
.lg-dl{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:10px 24px;margin:0}
.lg-dl dt{color:var(--ink-2)}
.lg-dl dd{margin:0;color:var(--ink)}
.lg-table{overflow-x:auto;margin-top:12px}
.lg-table table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.lg-table th,.lg-table td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-bottom:1px solid var(--line)}
.lg-table th{color:var(--ink);font-weight:500}
.lg-link,.ft-cc{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.foot .ft-cc{text-decoration:none;font-size:13px;text-align:left}
.foot .ft-cc:hover{text-decoration:underline}
.lg-other{margin-top:48px}
@media (max-width:820px){.lg-dl{grid-template-columns:1fr;gap:2px}.lg-dl dd{margin-bottom:12px}}
/* Cookie banner */
.cc{position:fixed;left:16px;bottom:calc(100px + env(safe-area-inset-bottom,0px));z-index:80;width:min(420px,calc(100vw - 32px));padding:20px;border-radius:var(--r-lg);background:var(--bg);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.14);opacity:0;transform:translateY(12px);transition:opacity .3s,transform .4s var(--expo)}
.cc.on{opacity:1;transform:none}
.cc-h{margin:0;font-weight:500;font-size:16px}
.cc-p{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.cc-opts{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.cc-opt{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 12px;border-radius:var(--r-md);background:var(--surface);font-size:14px;cursor:pointer}
.cc-opt span{display:flex;flex-direction:column;gap:2px}
.cc-opt em{font-style:normal;font-size:12px;color:var(--ink-2)}
.cc-opt input{width:18px;height:18px;accent-color:var(--accent)}
.cc-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cc-btns .btn{margin-top:0;height:40px;padding:0 14px;font-size:13px}
@media (max-width:820px){.cc{left:12px;right:12px;width:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px))}.cc-btns .btn{flex:1 1 auto;justify-content:center}}

/* Footer email: highlighted */
.foot .ft-mail{font-weight:500;padding:1px 4px;margin-left:-4px;border-radius:4px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--ink)}
.foot .ft-mail:hover{text-decoration:none;background:color-mix(in srgb,var(--accent) 26%,transparent)}
/* Footer on mobile: two columns, status full width, legal row at the bottom, smaller pill */
@media (max-width:820px){
  .foot{grid-template-columns:1fr 1fr;gap:28px 16px}
  .foot > div:nth-child(3){grid-column:1/-1}
  .foot > div:nth-child(4){grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 16px;padding-top:18px;border-top:1px solid var(--line)}
  .foot > div:nth-child(4) > span:first-child{flex-basis:100%}
  .foot .ft-milk{max-width:42ch}
  .foot .swiss-pill{height:34px;padding:0 12px;font-size:12px;gap:7px;margin-top:10px}
  .foot .swiss-pill .ch-flag{width:13px;height:13px}
}

/* Footer: status highlighted, email simply underlined */
.foot .ft-status{font-weight:500;padding:1px 4px;margin-left:-4px;border-radius:4px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--ink)}
.foot .ft-mail{font-weight:400;padding:0;margin-left:0;border-radius:0;background:none;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.foot .ft-mail:hover{background:none;text-decoration-thickness:2px}
.foot .ft-status-row{display:inline-flex;align-items:center;color:var(--ink)}
.foot .ft-status-row .dot{margin-right:8px;vertical-align:0}
.foot .ft-status{margin-left:0}

.home-cta .big{max-width:16ch}
.end-sub{margin:18px 0 0;max-width:46ch;font-size:clamp(16px,1.3vw,20px);line-height:1.5;color:var(--ink-2)}
.xpage-end .big{max-width:18ch}

/* Collaboration panel: no underline or focus marks on the step text */
.panel-txt,.panel-txt *{text-decoration:none!important;-webkit-text-decoration:none!important}
#panel:focus{outline:none}
#panel:focus-visible{outline:2px solid var(--accent);outline-offset:8px;border-radius:var(--r-md)}
.swiss-plus{display:inline-grid;place-items:center;width:1.05em;height:1.05em;margin:0 .04em;border-radius:.14em;background:#DA291C;color:#fff;font-weight:600;line-height:1;vertical-align:-.12em}
.swiss-plus{display:inline-block;width:.86em;height:.86em;margin:0 .06em 0 .1em;vertical-align:-.06em;background:none;border-radius:0}
.swiss-plus svg{display:block;width:100%;height:100%}
.rv-cta{margin-top:0;flex:none}
.chip{padding:9px 16px}
.chip-logo{display:block;height:15px;width:auto}
:root[data-theme="dark"] .chip-logo{filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip-logo{filter:invert(1)}}
.h1-logo{display:block;height:clamp(24px,2.3vw,32px);width:auto}
:root[data-theme="dark"] .h1-logo{filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .h1-logo{filter:invert(1)}}
.rv-top h1 .h1-logo + span{margin-top:12px}

/* Latest projects: 6 featured cards, 3 per row */
.works{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.works .pc:nth-child(n){grid-column:auto!important}
.works .pc:nth-child(n) .pc-media{aspect-ratio:4/3!important}
@media (max-width:1100px){.works{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:620px){.works{grid-template-columns:1fr!important}}

/* Latest projects: vertical 9:16 cards, grid shifted to the right */
.works{margin-left:clamp(0px,26vw,460px);gap:clamp(28px,3vw,44px) clamp(16px,2.2vw,36px)!important}
.works .pc:nth-child(n) .pc-media{aspect-ratio:9/16!important}
#work .sec-head{margin-bottom:clamp(24px,3vw,40px)}
@media (max-width:1100px){.works{margin-left:clamp(0px,12vw,160px)}}
@media (max-width:620px){.works{margin-left:0;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px 12px!important}}

.pc-tags{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:4px}
.pc-tags i{font-style:normal;font-size:12px;line-height:1;padding:5px 9px;border-radius:999px;background:var(--surface);color:var(--ink-2)}
@media (max-width:620px){.works{grid-template-columns:1fr!important}}
.reel-tc{display:none!important}
@media (hover:hover){.svc:hover .go,.svc:focus-within .go{opacity:1;transform:none}}

/* Latest projects: editorial list */
.plist{border-top:1px solid var(--line)}
.pl-row{position:relative;display:grid;grid-template-columns:48px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.25fr) 40px;align-items:center;gap:clamp(16px,2vw,32px);padding:clamp(22px,2.4vw,34px) 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:opacity .35s ease}
.pl-n{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pl-thumb{display:none}
.pl-name{margin:0;font-weight:400;font-size:clamp(28px,3.4vw,54px);letter-spacing:-.04em;line-height:1;transition:transform .5s var(--expo)}
.pl-meta{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--ink-2)}
.pl-meta b{font-weight:500;color:var(--ink)}
.pl-res{display:flex;align-items:baseline;gap:10px;font-size:15px;line-height:1.4;color:var(--ink-2)}
.pl-res b{flex:none;font-weight:400;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.04em;line-height:1;color:var(--accent)}
.pl-go{justify-self:end;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface);transition:background .25s,color .25s,transform .4s var(--expo)}
.pl-go svg{width:16px;height:16px}
.pl-row:hover .pl-go,.pl-row:focus-visible .pl-go{background:var(--ink);color:var(--bg);transform:rotate(-45deg)}
.pl-row:hover .pl-name{transform:translateX(10px)}
.plist.hovering .pl-row:not(.hot){opacity:.32}
.pl-pv{position:fixed;left:0;top:0;z-index:40;width:clamp(220px,19vw,300px);aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;pointer-events:none;opacity:0;scale:.86;transition:opacity .3s ease,scale .45s var(--expo);box-shadow:0 24px 60px rgba(0,0,0,.18)}
.pl-pv.on{opacity:1;scale:1}
.pl-pv-in,.pl-pv-in .pz-wrap{position:absolute;inset:0}
@media (max-width:900px){
  .pl-row{grid-template-columns:72px minmax(0,1fr) 32px;grid-template-areas:"thumb name go" "thumb meta go" "thumb res go";gap:6px 16px;padding:18px 0}
  .pl-n{display:none}
  .pl-thumb{grid-area:thumb;display:block;position:relative;width:72px;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;align-self:start}
  .pl-thumb .pz-wrap{position:absolute;inset:0}
  .pl-name{grid-area:name;font-size:clamp(24px,6.4vw,32px)}
  .pl-meta{grid-area:meta;flex-direction:row;flex-wrap:wrap;gap:2px 8px;font-size:13px}
  .pl-res{grid-area:res;font-size:13px}
  .pl-res b{font-size:22px}
  .pl-go{grid-area:go;width:32px;height:32px;align-self:center}
  .pl-pv{display:none}
}
html.rm .pl-pv{display:none}

/* YouTube as a moving visual: cover the frame, fade in once loaded */
.yt-bg{position:absolute;inset:0;z-index:2;overflow:hidden;container-type:size;pointer-events:none;opacity:0;transition:opacity .8s ease .6s;background:transparent}
.yt-bg.ready{opacity:1}
.yt-bg iframe{position:absolute;top:50%;left:50%;width:max(100cqw,calc(100cqh * 16 / 9));height:max(100cqh,calc(100cqw * 9 / 16));transform:translate(-50%,-50%) scale(1.02);border:0;pointer-events:none}
.tile-vid{position:relative}
.pl-pv-in .pz-wrap[hidden]{display:none}

/* Latest projects: collection cards */
.pcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(14px,1.6vw,24px)}
.pcc{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--ink)}
.pcc-card{position:relative;display:block;aspect-ratio:2/3;border-radius:var(--r-lg);overflow:hidden;transition:transform .6s var(--expo)}
.pcc:hover .pcc-card{transform:translateY(-6px)}
.pcc-lab{position:absolute;left:0;right:0;top:clamp(14px,1.4vw,22px);display:flex;flex-direction:column;align-items:center;font-size:clamp(9px,.72vw,11px);line-height:1.25;letter-spacing:.02em;opacity:.92}
.pcc-lab b{font-weight:700}
.pcc-t{position:absolute;left:8%;right:8%;top:20%;text-align:center;font-size:clamp(20px,2vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1.08}
.pcc-vis{position:absolute;left:50%;bottom:7%;width:64%;aspect-ratio:4/5;transform:translateX(-50%);border-radius:var(--r-md);overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.28);transition:transform .7s var(--expo)}
.pcc:hover .pcc-vis{transform:translateX(-50%) scale(1.05) rotate(-1.5deg)}
.pcc-vis .pz-wrap{position:absolute;inset:0}
.pcc-name{font-size:clamp(17px,1.4vw,21px);letter-spacing:-.015em;color:var(--ink)}
.pcc-plus{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);width:42%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.22);font-size:clamp(48px,5vw,84px);font-weight:300;line-height:1;transition:transform .6s var(--expo)}
.pcc-cta:hover .pcc-plus{transform:translateX(-50%) rotate(90deg)}
.pcc-cta .pcc-name{color:var(--accent)}
@media (max-width:1100px){.pcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .pcards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(-1*var(--pad));padding:0 var(--pad) 6px;scrollbar-width:none}
  .pcards::-webkit-scrollbar{display:none}
  .pcc{flex:0 0 74vw;scroll-snap-align:start}
  .pcc-t{font-size:24px}
}

.pcards{grid-template-columns:repeat(3,minmax(0,1fr))}
.pcc-card{aspect-ratio:3/4}
.pcc-t{top:17%;font-size:clamp(22px,2.4vw,38px)}
.pcc-vis{width:52%;bottom:8%}
@media (max-width:1100px){.pcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.pcc-card{aspect-ratio:2/3}.pcc-vis{width:62%}}

/* Latest projects: 6 cards, 3 per row, client name only */
.works.wk2{margin-left:0!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(28px,3vw,40px) clamp(12px,1.2vw,18px)!important}
.works.wk2 .pc:nth-child(n){grid-column:auto!important}
.works.wk2 .pc:nth-child(n) .pc-media{aspect-ratio:4/3!important}
.works.wk2 .pc-txt b{font-weight:500}
@media (max-width:1100px){.works.wk2{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:620px){.works.wk2{grid-template-columns:1fr!important}}

/* Signature typography: Inter Tight for every heading and display figure, Geist for reading text */
h1,h2,h3,.big,.h2,.xpage-h1,.sv-h1,.lg-h1,.xp-h1,.sv-quote p,.metric b,.kpi b,.sv-kpi b,.svc h3,.pcc-t,.sv-offer h3,.sv-case-txt h3,.sv-other b,.xp-t,.cs-title h1,.sw-crawl h2,.pl-name,.sv-faq summary,.lt{font-family:var(--font-display);font-feature-settings:"ss01","cv11"}
.big,.xpage-h1,.sv-h1,.lg-h1,.xp-h1,.sv-quote p,.h2{letter-spacing:-.035em}
.metric b,.kpi b,.sv-kpi b{letter-spacing:-.04em}

/* ---------- Priority 3: interactions ---------- */
/* Page transitions */
::view-transition-old(root){animation:.32s cubic-bezier(.4,0,1,1) both vtOut}
::view-transition-new(root){animation:.55s cubic-bezier(.16,1,.3,1) both vtIn}
::view-transition-group(proj-title){animation-duration:.6s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
@keyframes vtOut{to{opacity:0;transform:translateY(-12px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(18px)}}
html.rm::view-transition-old(root),html.rm::view-transition-new(root){animation:none}
/* Clients + logos merged */
.cl-logos{margin-bottom:clamp(28px,4vw,56px)}
/* Projects page */
.pj{padding-top:clamp(80px,10vw,140px)}
.pj-h1{margin:18px 0 0}
.pj .xpage-lede{margin-bottom:28px}
.pj-seg{margin-bottom:clamp(24px,3vw,36px);flex-wrap:wrap}
.pj-seg button[aria-selected="true"]{background:var(--surface-2);color:var(--ink)}
/* 404 */
.nf{min-height:72vh;padding-top:clamp(80px,10vw,140px)}
.nf-glass{position:relative;width:96px;color:var(--ink);margin-bottom:12px;transform:rotate(-14deg);transform-origin:50% 90%;animation:nfTip 2.6s var(--expo) .3s both}
.nf-glass svg{display:block;width:100%}
.nf-milk{color:#fff;fill:var(--surface-2);stroke:var(--line)}
.nf-drop{position:absolute;left:4px;top:30px;width:10px;height:14px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--surface-2);box-shadow:0 0 0 1px var(--line);animation:nfDrop 1.6s ease-in 1.2s infinite}
@keyframes nfTip{from{transform:rotate(0)}to{transform:rotate(-24deg)}}
@keyframes nfDrop{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(80px)}}
.nf-code{margin:0;font-family:var(--font-display);font-size:14px;letter-spacing:.2em;color:var(--accent)}
.nf .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
html.rm .nf-glass,html.rm .nf-drop{animation:none}
/* Cursor follower */
.cur{position:fixed;left:0;top:0;z-index:95;pointer-events:none;width:0;height:0}
.cur::before{content:"";position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--accent);transition:transform .35s var(--expo),opacity .25s}
.cur-l{position:absolute;left:-36px;top:-36px;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--bg);font-size:13px;font-weight:500;transform:scale(0);transition:transform .45s var(--expo)}
.cur.is-link::before{transform:scale(2.6);opacity:.25}
.cur.is-card::before{opacity:0}
.cur.is-card .cur-l{transform:scale(1)}
.cur.out{opacity:0}
/* Loader */
.loader{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:var(--bg);transition:clip-path .7s cubic-bezier(.76,0,.24,1);clip-path:inset(0 0 0 0)}
.loader.out{clip-path:inset(0 0 100% 0)}
.loader-in{display:flex;flex-direction:column;align-items:center;gap:14px}
.loader-in img{height:28px;width:auto}
:root[data-theme="dark"] .loader-in img{filter:invert(1)}
.loader-bar{width:140px;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.loader-bar i{display:block;height:100%;width:100%;background:var(--accent);transform:translateX(-100%);animation:ldBar .95s cubic-bezier(.65,0,.35,1) forwards}
.loader-in em{font-style:normal;font-size:12px;color:var(--ink-2)}
@keyframes ldBar{to{transform:none}}

/* Next project */
.cs-next{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(200px,26vw,380px) 56px;align-items:center;gap:clamp(20px,3vw,48px);margin:0 var(--pad) clamp(40px,5vw,72px);padding:clamp(24px,3vw,40px);border-radius:var(--r-lg);background:var(--surface);text-decoration:none;color:var(--ink);overflow:hidden;transition:background .3s}
.cs-next:hover{background:var(--surface-2)}
.cs-next-txt{display:flex;flex-direction:column;gap:10px}
.cs-next-k{font-size:13px;color:var(--ink-2);letter-spacing:.02em}
.cs-next-n{font-family:var(--font-display);font-weight:500;font-size:clamp(40px,6vw,96px);letter-spacing:-.045em;line-height:.95}
.cs-next-s{font-size:14px;color:var(--ink-2)}
.cs-next-vis{position:relative;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;transition:transform .7s var(--expo)}
.cs-next-vis .pz-wrap{position:absolute;inset:0}
.cs-next:hover .cs-next-vis{transform:scale(1.04) rotate(-1deg)}
.cs-next-go{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--bg);transition:transform .45s var(--expo)}
.cs-next-go svg{width:20px;height:20px}
.cs-next:hover .cs-next-go{transform:translateX(6px)}
@media (max-width:820px){
  .cs-next{grid-template-columns:1fr 44px;grid-template-areas:"vis vis" "txt go";gap:16px}
  .cs-next-vis{grid-area:vis}.cs-next-txt{grid-area:txt}.cs-next-go{grid-area:go;width:44px;height:44px}
  .cs-next-n{font-size:clamp(34px,10vw,48px)}
}
/* Shorter home on mobile */
@media (max-width:820px){
  .intro{height:190vh}
  .sheet.is-folded dl > :nth-child(n+13){display:none}
  .sheet-more{display:inline-flex}
}
.sheet-more{display:none;align-items:center;height:40px;margin:14px 0 4px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:none;font:inherit;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer}

/* SEO pass: case side title, service testimonials, contact page */
.cs-side-t{margin:0;font-size:17px;font-weight:500;letter-spacing:-.02em}
.testi-svc{columns:2 320px}
.ct-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ct-steps li{padding:clamp(20px,2vw,28px);border-radius:var(--r-lg);background:var(--surface)}
.ct-steps span{font-size:13px;color:var(--accent)}
.ct-steps h3{margin:12px 0 8px;font-size:clamp(19px,1.6vw,23px);font-weight:500;letter-spacing:-.02em}
.ct-steps p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.ct-visit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.ct-visit address{font-style:normal;margin:16px 0 18px;font-size:17px;line-height:1.6}
.ct-links{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
@media (max-width:820px){.ct-steps,.ct-visit{grid-template-columns:1fr}}

.pz-loop{opacity:0;transition:opacity .6s ease}
.pz-loop.on{opacity:1}
.g-vid{position:relative;background:#000}
.g-vid video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.g-vid figcaption{position:absolute;left:14px;top:12px;font-size:12px;color:#fff;opacity:.85;pointer-events:none}
/* Home portfolio: client name only, no initial badge */
.works.wk2 .pc-meta .fav{display:none}
.works.wk2 .pc-meta{gap:0}
.tile-vid{position:relative}
.tile-tag{position:absolute;left:10px;bottom:9px;z-index:3;font-size:11px;font-weight:500;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5);pointer-events:none}

/* Editorial collage tiles (hero wall) */
.pz-col{position:absolute;inset:0;overflow:hidden;container-type:size;background:color-mix(in srgb,var(--acc) 26%,#F7F4EE)}
.pz-col .cl-s{position:absolute;object-fit:cover;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.pz-col .cl-s1{left:-8%;top:4%;width:40%;height:30%}
.pz-col .cl-s2{right:-8%;top:34%;width:38%;height:28%}
.pz-col .cl-s3{left:-6%;bottom:5%;width:36%;height:26%}
.pz-col .cl-card{position:absolute;left:50%;top:50%;width:64%;height:80%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4cqh;padding:5cqh 5cqw;border-radius:8px;background:color-mix(in srgb,var(--acc) 12%,#FBF9F5);box-shadow:0 14px 34px rgba(0,0,0,.16)}
.pz-col .cl-name{font-family:var(--font-display);font-weight:600;font-size:max(10px,7cqw);letter-spacing:-.02em;line-height:1;color:var(--ink);text-align:center}
.pz-col .cl-main{position:relative;flex:1;width:100%;border-radius:4px;overflow:hidden}
.pz-col .cl-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pz-col .cl-tag{font-size:max(8px,3.6cqw);line-height:1.2;color:var(--ink);opacity:.75;text-align:center;max-width:90%}
/* Hero wall: no project names on the tiles */
#wall .tile-tag,#wall .pz-cap,#wall .pz-k,#wall .cl-name{display:none}
#wall .pz-col .cl-card{padding-top:4cqh}

/* ================= Showreel v2 ================= */
.r2{position:absolute;inset:0;container-type:size;overflow:hidden;font-family:var(--font-display);color:#111}
.r2 .sc{perspective:110cqw}
.r2-dark{color:#F2F2F0}
.r2 img,.r2 video{display:block;width:100%;height:100%;object-fit:cover}
.r2-bg{position:absolute;inset:-2%;z-index:0}
.r2-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.15) 100%)}
.sc.on .kb{animation:kb 5s linear both}
.sc.on .kbx{animation:kbx 5s linear both}
.r2-pos{position:absolute;z-index:5;perspective:90cqw}
.drift{perspective:90cqw}
.sc.on .drift{animation:drift 5s linear both}
.cd{position:relative;border-radius:1cqw;overflow:hidden;background:#222;box-shadow:0 3cqw 6cqw rgba(0,0,0,.35)}
.bw{border-radius:1cqw;overflow:hidden;background:#fff;box-shadow:0 3.5cqw 7cqw rgba(0,0,0,.35)}
.bw-bar{display:flex;align-items:center;gap:.5cqw;height:3.2cqh;padding:0 1cqw;background:#F4F3F0;border-bottom:1px solid rgba(0,0,0,.06)}
.bw-bar i{width:.7cqw;height:.7cqw;border-radius:50%;background:#D7D5D0}
.bw-bar span{margin-left:1cqw;font-family:var(--font);font-size:.9cqw;color:#8A8883}
.bw-in{aspect-ratio:16/10;overflow:hidden}
.ph{border-radius:2.6cqw;padding:.55cqw;background:#111;box-shadow:0 3.5cqw 7cqw rgba(0,0,0,.4)}
.ph-in{aspect-ratio:9/19;border-radius:2.1cqw;overflow:hidden;background:#000}
.mk{display:block;overflow:hidden;padding-bottom:.08em}
.mk > .rx{display:block}
.r2-cap{position:absolute;left:5cqw;bottom:7cqh;z-index:20}
.r2-cap.lt{color:#fff}
.r2-cn{font-size:4.4cqw;font-weight:600;letter-spacing:-.04em;line-height:1}
.r2-cs{margin-top:.8cqh;font-family:var(--font);font-size:1.45cqw;opacity:.78}
.r2-xl{font-size:7.4cqw;font-weight:600;letter-spacing:-.045em;line-height:.95}
.r2-it{font-weight:300}
.r2-mq{position:absolute;left:0;white-space:nowrap;z-index:2;pointer-events:none;line-height:.9;font-weight:700;letter-spacing:-.03em}
.r2-mq span{display:inline-block}
.sc.on .r2-mq span{animation:mq2 14s linear both}
.sc.on .r2-mq.rev span{animation-direction:reverse}
.r2-mq-ol{top:30cqh;font-size:22cqw;color:transparent;-webkit-text-stroke:.18cqw rgba(255,255,255,.45)}
.r2-mq-gold{top:58cqh;font-size:14cqw;color:transparent;-webkit-text-stroke:.16cqw rgba(176,138,85,.55)}
.r2-kin{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:1cqh}
.r2-kin .r2-mq{position:relative;font-size:12.5cqw}
.r2-k1{color:#F2F2F0}
.r2-k2{color:transparent;-webkit-text-stroke:.16cqw #F2F2F0}
.r2-k3{color:#146CFF}
.r2-fan{position:absolute;left:39cqw;top:16cqh;width:22cqw;height:62cqh;z-index:5;perspective:90cqw}
.r2-fan .cd{position:absolute;inset:0}
.r2-kpi{position:absolute;right:6cqw;top:26cqh;z-index:6;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.r2-kpi b{font-size:13cqw;font-weight:600;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.r2-kpi span{font-family:var(--font);font-size:1.6cqw;max-width:22cqw}
.r2-kpi-r{top:18cqh}
.r2-kpi-r b{font-size:20cqw}
.r2-nb-title{position:absolute;left:5cqw;top:10cqh;z-index:6}
.r2-slogan{position:absolute;left:5cqw;top:14cqh;z-index:6;color:#fff}
.r2-dot{position:absolute;width:4cqw;height:4cqw;border-radius:50%;z-index:7}
.r2-dot.sm{width:2.2cqw;height:2.2cqw}
.r2-logo{position:absolute;left:50%;top:42%;z-index:6;width:44cqw;translate:-50% -50%}
.r2-logo-img{width:100%;height:auto!important;object-fit:contain!important;filter:brightness(0) invert(1)}
.r2-logo.dark .r2-logo-img{filter:brightness(0)}
.r2-s0-sub{position:absolute;left:0;right:0;top:58%;z-index:6;text-align:center;color:#fff;font-family:var(--font);font-size:1.8cqw}
.r2-end-sub{position:absolute;left:0;right:0;top:58%;text-align:center;font-family:var(--font);font-size:1.7cqw;color:#555}
.r2-pill{position:absolute;left:50%;top:70%;z-index:6;translate:-50% 0;rotate:-5deg;padding:1cqh 1.8cqw;border-radius:999px;background:#fff;color:#146CFF;font-family:var(--font);font-weight:600;font-size:1.5cqw;white-space:nowrap}
.r2-pill.blue{background:#146CFF;color:#fff}
.r2-flash{position:absolute;inset:0;z-index:3;opacity:0}
.sc.on .r2-flash{animation:flashSeq .72s steps(4,end) 1.85s both}
.r2-wall{position:absolute;left:50%;top:50%;width:150cqw;display:grid;grid-template-columns:repeat(8,1fr);gap:1.1cqw;transform-origin:50% 50%}
.r2-wall .cd{aspect-ratio:4/3;opacity:0}
.sc.on .r2-wall{animation:wallZoom 3.8s cubic-bezier(.16,1,.3,1) both}
.sc.on .r2-wall .cd{animation:tileIn .6s ease calc(var(--i) * .03s) both}
.r2-wall::after{content:"";position:fixed}
.r2-wall-t{position:absolute;left:5cqw;bottom:9cqh;z-index:6;color:#fff;text-shadow:0 .4cqw 2cqw rgba(0,0,0,.6)}
.sc.on .r2-wall-t::before{content:"";position:absolute;left:-10cqw;right:-60cqw;bottom:-12cqh;height:70cqh;z-index:-1;background:linear-gradient(0deg,rgba(20,16,22,.92),transparent);animation:fadeIn .8s ease 1.4s both}
@keyframes k3d{from{opacity:0;transform:var(--t0)}to{opacity:1;transform:var(--t1)}}
@keyframes mUp{from{opacity:1;transform:translateY(110%)}to{opacity:1;transform:none}}
@keyframes drift{from{translate:0 0}to{translate:var(--dx,0) var(--dy,-3cqh)}}
@keyframes kb{from{scale:1.16}to{scale:1.02}}
@keyframes kbx{from{scale:1.14;translate:2cqw 0}to{scale:1.14;translate:-4cqw 0}}
@keyframes mq2{from{transform:translateX(0)}to{transform:translateX(-35%)}}
@keyframes logoIn{from{opacity:0;clip-path:inset(0 100% 0 0);transform:scale(1.12)}to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
@keyframes zIn{from{opacity:0;transform:scale(.3) rotate(-10deg)}to{opacity:1;transform:none}}
@keyframes flashSeq{0%{opacity:1;background:#FF8FB1}25%{opacity:1;background:#8EF0C6}50%{opacity:1;background:#F2D21B}75%{opacity:1;background:#111}100%{opacity:0}}
@keyframes wallZoom{from{transform:translate(-50%,-50%) scale(2.5) rotateX(28deg) rotateZ(-10deg)}to{transform:translate(-50%,-50%) scale(1) rotateX(10deg) rotateZ(-5deg)}}
@keyframes tileIn{from{opacity:0}to{opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.r2-nb-title .r2-xl{font-size:5.6cqw}
.r2-fan{left:17cqw;width:20cqw;height:58cqh;top:18cqh}
.r2-kpi{right:5cqw}
/* ================= Case study v2 ================= */
.cv2-prog{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}
.cv2-prog i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.cv2-back{position:fixed;left:clamp(14px,2vw,28px);top:calc(14px + env(safe-area-inset-top,0px));z-index:55;padding:9px 14px;border-radius:999px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--ink);text-decoration:none}
.cv2-back:hover{background:var(--bg)}
.cv2-hero{position:relative;height:min(88vh,920px);min-height:520px;display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.cv2-hero-bg{position:absolute;inset:0}
.cv2-hero-bg img{width:100%;height:100%;object-fit:cover;animation:cv2Kb 9s cubic-bezier(.16,1,.3,1) both}
.cv2-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.18) 45%,rgba(0,0,0,.05) 70%,rgba(0,0,0,.25) 100%)}
.cv2-hero-in{position:relative;z-index:2;padding:0 var(--pad) clamp(40px,6vw,80px);max-width:1400px}
.cv2-crumb,.cv2-crumb a{color:rgba(255,255,255,.85)!important}
.cv2-hero h1{margin:14px 0 0;font-family:var(--font-display);font-weight:500;font-size:clamp(56px,10vw,168px);letter-spacing:-.05em;line-height:.9}
.cv2-tag{margin:16px 0 0;font-size:clamp(17px,1.6vw,24px);opacity:.92}
.cv2-cue{position:absolute;right:var(--pad);bottom:clamp(40px,6vw,80px);z-index:2;font-size:13px;opacity:.85;animation:cv2Cue 2.4s ease-in-out infinite}
.cv2-intro{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:clamp(32px,6vw,96px);align-items:start;padding-top:clamp(64px,8vw,120px)}
.cv2-lead{margin:0;font-family:var(--font-display);font-size:clamp(24px,2.6vw,40px);line-height:1.25;letter-spacing:-.025em}
.cv2-meta{margin:0;display:grid;gap:18px;padding:22px;border-radius:var(--r-lg);background:var(--surface)}
.cv2-meta dt{font-size:12px;color:var(--ink-2);margin-bottom:4px}
.cv2-meta dd{margin:0;font-size:15px}
.cv2-meta dd a{color:var(--ink)}
.cv2-meta .vc-tags{margin:0}
.cv2-ch{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start;padding-top:clamp(72px,9vw,140px)}
.cv2-sticky{position:sticky;top:96px}
.cv2-k{display:inline-block;font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums;margin-bottom:12px}
.cv2-ch h2,.cv2-res h2{margin:0 0 18px;font-family:var(--font-display);font-weight:500;font-size:clamp(32px,3.6vw,56px);letter-spacing:-.04em;line-height:1}
.cv2-ch p{margin:0 0 14px;font-size:17px;line-height:1.65;color:var(--ink-2)}
.cv2-ch-vis{display:grid;gap:clamp(18px,2vw,28px)}
.cv2-fig{margin:0}
.cv2-zoom{display:block;width:100%;padding:0;border:0;background:var(--surface);border-radius:var(--r-lg);overflow:hidden;cursor:zoom-in}
.cv2-zoom img{display:block;width:100%;height:auto;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.cv2-zoom:hover img{transform:scale(1.03)}
.cv2-fig figcaption{margin-top:10px;font-size:13px;color:var(--ink-2)}
.cv2-wide{padding:clamp(72px,9vw,140px) var(--pad) 0}
.cv2-fig-wide .cv2-zoom{border-radius:var(--r-lg)}
.cv2-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.cv2-trio .cv2-fig:nth-child(2){margin-top:clamp(28px,4vw,64px)}
.cv2-res{margin-top:clamp(72px,9vw,140px);padding:clamp(56px,7vw,110px) 0;background:var(--ink2);color:#fff}
.cv2-res .cv2-k{color:var(--acc)}
.cv2-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin:clamp(28px,3vw,44px) 0}
.cv2-kpi{padding-top:18px;border-top:1px solid rgba(255,255,255,.2)}
.cv2-kpi b{display:block;font-family:var(--font-display);font-weight:500;font-size:clamp(52px,7vw,112px);letter-spacing:-.05em;line-height:.95;color:var(--acc);font-variant-numeric:tabular-nums}
.cv2-kpi span{display:block;margin-top:10px;font-size:17px;font-weight:500}
.cv2-kpi p{margin:4px 0 0;font-size:14px;opacity:.7}
.cv2-res-txt{max-width:70ch}
.cv2-res-txt p{margin:0 0 12px;font-size:17px;line-height:1.65;opacity:.85}
.cv2-mosaic{padding-top:clamp(72px,9vw,140px)}
.cv2-count{font-size:13px;color:var(--ink-2)}
.cv2-grid{columns:3 280px;column-gap:14px}
.cv2-g{break-inside:avoid;margin-bottom:22px}
.cv2-did{padding-top:clamp(56px,7vw,100px)}
.cv2-did-list{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.cv2-did-list a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-family:var(--font-display);font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;transition:padding .35s var(--expo)}
.cv2-did-list a:hover{padding-left:10px}
.cv2-did-list svg{width:20px;height:20px}
.rv2{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.rv2.in{opacity:1;transform:none}
.cv2-lb{position:fixed;inset:0;z-index:100;display:grid;grid-template-columns:64px 1fr 64px;align-items:center;background:rgba(10,10,10,.94);opacity:0;transition:opacity .25s}
.cv2-lb.on{opacity:1}
.cv2-lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-height:92vh}
.cv2-lb img{max-width:100%;max-height:84vh;object-fit:contain;border-radius:8px}
.cv2-lb figcaption{color:#ddd;font-size:14px;text-align:center}
.cv2-lb-a,.cv2-lb-x{width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:20px;cursor:pointer;justify-self:center}
.cv2-lb-a:hover,.cv2-lb-x:hover{background:rgba(255,255,255,.2)}
.cv2-lb-x{position:absolute;top:16px;right:16px}
.cv2-lb-n{position:absolute;left:20px;top:26px;color:#aaa;font-size:13px}
@keyframes cv2Kb{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes cv2Cue{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (max-width:900px){
  .cv2-intro,.cv2-ch{grid-template-columns:1fr}
  .cv2-sticky{position:static}
  .cv2-trio{grid-template-columns:1fr 1fr}.cv2-trio .cv2-fig:nth-child(2){margin-top:0}.cv2-trio .cv2-fig:nth-child(3){grid-column:1/-1}
  .cv2-kpis{grid-template-columns:1fr}
  .cv2-hero{height:78vh;min-height:460px}
  .cv2-cue{display:none}
  .cv2-lb{grid-template-columns:1fr}.cv2-lb-a{display:none}
}
html.rm .cv2-hero-bg img,html.rm .cv2-cue{animation:none}
html.rm .rv2{opacity:1;transform:none;transition:none}
.cpage.is-v2:not([hidden]){display:block!important;grid-template-columns:none!important}
.cpage.is-v2 > *{grid-column:auto}
.cv2-meta dd a svg{width:11px;height:11px;vertical-align:1px}

.cv2-media{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#111}
.cv2-media img,.cv2-media video{display:block;width:100%;height:auto}
.cv2-media video[data-loop]{position:absolute;inset:0;height:100%;object-fit:cover}
.cv2-player video{position:static}
.cv2-media.cs-frame{aspect-ratio:16/9}
.cv2-media.cs-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cv2-hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cv2-trio{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.cv2-trio:not([style*="--n:3"]) .cv2-fig:nth-child(2){margin-top:0}
.cv2-ch-solo{grid-template-columns:minmax(0,1fr)}
.cv2-ch-solo .cv2-ch-txt{max-width:70ch}
.cv2-kpis{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.cv2-yt{padding-top:clamp(72px,9vw,140px)}
.cv2-yt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:18px}
@media (max-width:900px){.cv2-trio{grid-template-columns:1fr 1fr}.cv2-kpis{grid-template-columns:1fr}.cv2-yt-grid{grid-template-columns:1fr}}

/* Expertise visuals: real work */
.xp-real .xpl{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .9s ease}
.xp-real .xpl.on{opacity:1;pointer-events:auto}
.xp-real .xpl img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 4.5s linear}
.xp-real .xpl.on img{transform:scale(1)}
.xpl-chip{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.92);color:#111;font-size:12.5px;font-weight:500;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.xpl-chip svg{width:12px;height:12px}
.xpl-chip:hover{background:#fff}
.xpl-kpi{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;align-items:flex-end;padding:10px 14px;border-radius:14px;background:rgba(17,17,17,.82);color:#fff;font-size:12px}
.xpl-kpi b{font-family:var(--font-display);font-size:28px;font-weight:500;letter-spacing:-.03em;line-height:1}
/* Service pages: project cards without the initial badge, services as tags */
.sv-works .pc-meta .fav{display:none}
.sv-works .pc-meta{gap:0}

/* Project cards: bigger client name, clickable service tags */
.works.wk2 .pc-txt b,.sv-works .pc-txt b,.pj-grid .pc-txt b{font-size:clamp(17px,1.35vw,20px);font-weight:500;letter-spacing:-.015em}
.works.wk2 .pc-tags,.sv-works .pc-tags,.pj-grid .pc-tags{margin-top:10px}
.pc-tags i[data-tagfilter]{cursor:pointer;transition:background .2s,color .2s}
.pc-tags i[data-tagfilter]:hover,.pc-tags i[data-tagfilter]:focus-visible{background:var(--ink);color:var(--bg);outline:none}
.pj-grid .pc-meta .fav{display:none}
.pj-grid .pc-meta{gap:0}
.pj-active{margin:-8px 0 24px;font-size:15px;color:var(--ink-2)}
.pj-active b{color:var(--ink);font-weight:500}
.pj-active button{margin-left:8px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:none;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
/* Home portfolio: 2 projects per row */
#works.works.wk2{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(32px,4vw,56px) clamp(14px,1.6vw,24px)!important}
@media (max-width:620px){#works.works.wk2{grid-template-columns:1fr!important}}

/* Site-wide margins aligned on the reference: ~5% side margins, ~2% gutters */
:root{--pad:clamp(18px,5vw,120px);--gut:clamp(14px,2vw,48px)}
#works.works.wk2,.works.wk2,.sv-works,.pj-grid{column-gap:var(--gut)!important}
#works.works.wk2{row-gap:clamp(32px,3.6vw,72px)!important}
.cv2-grid{column-gap:var(--gut)}
.cv2-trio,.cv2-ch-vis,.cv2-yt-grid{gap:var(--gut)}

/* Project cards: 3:2 format (reference) */
#works.works.wk2 .pc:nth-child(n) .pc-media,.works.wk2 .pc:nth-child(n) .pc-media,.sv-works .pc .pc-media,.pj-grid .pc:nth-child(n) .pc-media{aspect-ratio:3/2!important}
/* no cursor follower over service tags */
.cur.hide{opacity:0!important}
/* ================= Motion system ================= */
:root{--mo-ease:cubic-bezier(.16,1,.3,1);--mo-d:.9s}
[data-mo="b"]{opacity:0;translate:0 26px;transition:opacity var(--mo-d) ease calc(var(--si,0) * 70ms),translate 1.1s var(--mo-ease) calc(var(--si,0) * 70ms)}
[data-mo="b"].mo-in{opacity:1;translate:0 0}
[data-mo="i"]{clip-path:inset(12% 6% 0 6% round var(--r-lg));opacity:.001;transition:clip-path 1.2s var(--mo-ease),opacity .6s ease}
[data-mo="i"].mo-in{clip-path:inset(0 0 0 0 round var(--r-lg));opacity:1}
[data-mo="i"] img{scale:1.08;transition:scale 1.6s var(--mo-ease)}
[data-mo="i"].mo-in img{scale:1}
.mo-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.mo-w > span{display:inline-block;translate:0 105%;transition:translate 1s var(--mo-ease) calc(var(--wi,0) * 38ms)}
[data-mo="h"].mo-in .mo-w > span{translate:0 0}
html.rm [data-mo]{opacity:1!important;translate:none!important;clip-path:none!important}
html.rm .mo-w > span,html.rm [data-mo] img{translate:none!important;scale:none!important}
.mo-w,.mo-w > span{display:inline-block!important;color:inherit!important;font:inherit!important;letter-spacing:inherit!important;margin-top:0!important}

/* Services grouped by pillar */
.sg-host{display:block!important;grid-template-columns:none!important}
.sg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut);align-items:start}
.sg-k{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;font-weight:500;color:var(--ink)}
.sg-k span{color:var(--accent);font-variant-numeric:tabular-nums}
.sg-main{position:relative;display:flex;flex-direction:column;gap:10px;min-height:clamp(190px,15vw,240px);padding:clamp(20px,1.8vw,28px);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);text-decoration:none;transition:background .25s}
.sg-main:hover{background:var(--surface-2)}
.sg-main b{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,1.6vw,26px);letter-spacing:-.03em;line-height:1.1}
.sg-main em{font-style:normal;font-size:15px;line-height:1.5;color:var(--ink-2);padding-right:28px}
.sg-go{position:absolute;right:clamp(20px,1.8vw,28px);bottom:clamp(20px,1.8vw,28px);transition:transform .35s var(--expo)}
.sg-go svg{width:18px;height:18px}
.sg-main:hover .sg-go{transform:translateX(4px)}
.sg-subs{list-style:none;margin:10px 0 0;padding:0}
.sg-subs a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:padding .3s var(--expo)}
.sg-subs li:first-child a{border-top:1px solid var(--line)}
.sg-subs a:hover{padding-left:10px}
.sg-subs a > span{display:flex;flex-direction:column;gap:2px}
.sg-subs b{font-weight:500;font-size:16px;letter-spacing:-.01em}
.sg-subs em{font-style:normal;font-size:13px;color:var(--ink-2)}
.sg-subs svg{flex:none;width:16px;height:16px}
@media (max-width:1100px){.sg{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(32px,4vw,48px)}}
@media (max-width:620px){.sg{grid-template-columns:1fr}.sg-main{min-height:0}}

.sg-sec{margin-top:clamp(36px,4vw,56px)}
.sg-sec-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.sg-sec-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 52px 20px 22px;border-radius:var(--r-lg);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:background .25s,border-color .25s}
.sg-sec-card:hover{background:var(--surface);border-color:transparent}
.sg-sec-card b{font-family:var(--font-display);font-weight:500;font-size:19px;letter-spacing:-.02em}
.sg-sec-card em{font-style:normal;font-size:14px;color:var(--ink-2)}
.sg-sec-card svg{position:absolute;right:20px;top:50%;width:16px;height:16px;translate:0 -50%}
@media (max-width:820px){.sg-sec-list{grid-template-columns:1fr}}
.pj-h2{margin:clamp(8px,1.5vw,20px) 0 18px;font-family:var(--font-display);font-weight:500;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em}

/* Home results: 8 figures */
.metrics.metrics-8{grid-template-columns:repeat(4,minmax(0,1fr))!important;row-gap:clamp(28px,3vw,44px)!important}
@media (max-width:1100px){.metrics.metrics-8{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.metrics-8 .metric b{font-size:clamp(40px,4.2vw,72px)}
.perf-lede{max-width:62ch;margin:clamp(16px,2vw,24px) 0 clamp(28px,3vw,44px);font-size:17px;line-height:1.6;color:var(--ink-2)}
/* ================= Milk moment ================= */
.milk{position:relative;height:300vh;background:#146CFF}
.milk-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.milk-svg{position:absolute;inset:0;width:100%;height:100%}
.milk-pin::after{content:"";position:absolute;inset:0;background:var(--bg);opacity:var(--milk-end,0);pointer-events:none}
.milk-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--pad);opacity:0;z-index:2}
.milk-k{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#146CFF}
.milk-t{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(46px,8.5vw,140px);line-height:.95;letter-spacing:-.05em;color:#0E1A33}
@media (max-width:700px){.milk{height:230vh}}
html.rm .milk{height:100vh}
/* ================= Wow pass ================= */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-clip:cubic-bezier(.22,1,.36,1);--ease-pop:cubic-bezier(.34,1.56,.64,1);--ease-io:cubic-bezier(.76,0,.24,1)}
[data-mo="i"]{transition-timing-function:var(--ease-clip),ease!important}
.btn{transition:transform .55s var(--ease-pop),background-color .25s,color .25s,border-color .25s}
.btn:hover{transform:translateY(-2px)}
.btn .arr,.btn svg{transition:transform .5s var(--ease-pop)}
.btn:hover .arr,.btn:hover svg{transform:translateX(3px)}
.pc-tags i[data-tagfilter]{transition:background .2s,color .2s,transform .45s var(--ease-pop)}
.pc-tags i[data-tagfilter]:hover{transform:translateY(-1px)}
details summary{transition:color .3s var(--ease-io)}
/* manifesto */
#pos-h .mw{display:inline;transition:opacity .25s linear,color .6s var(--ease-out),text-shadow .6s var(--ease-out)}
#pos-h .mw-k.on{color:var(--accent);text-shadow:0 0 28px rgba(20,108,255,.35)}
#studio .pos-r p{transition:opacity .2s linear}
/* FRESHMILK mask */
.fmx{position:relative;height:190vh;background:#0E0E0D;color:#F2F2F0}
.fmx-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.fmx-word{position:relative;z-index:2;font-family:var(--font-display);font-weight:700;font-size:18vw;line-height:.86;letter-spacing:-.045em;white-space:nowrap;color:transparent;-webkit-text-fill-color:transparent;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px rgba(255,255,255,.16);will-change:transform,background-position}
.fmx-pin{flex-direction:column;gap:clamp(18px,3vh,36px)}
.fmx-k{position:relative;margin:0;z-index:3;text-align:center;font-family:var(--font-display);font-weight:500;font-size:clamp(24px,3.2vw,52px);letter-spacing:-.035em;line-height:1;color:#F2F2F0;opacity:0}
.fmx-k span{color:#146CFF}
.fmx-full{position:absolute;inset:0;z-index:1;overflow:hidden;opacity:0;clip-path:inset(34% 30% round 28px)}
.fmx-full img{width:100%;height:100%;object-fit:cover;will-change:transform}
.fmx-full::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 55%)}
.fmx-cta{position:absolute;left:50%;bottom:clamp(90px,14vh,140px);z-index:4;display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;background:#F2F2F0;color:#111;font-weight:500;font-size:16px;text-decoration:none;opacity:0;transform:translate(-50%,20px);transition:background .25s}
.fmx-cta svg{width:16px;height:16px;transition:transform .5s var(--ease-pop)}
.fmx-cta:hover svg{transform:translateX(4px)}
@media (max-width:700px){.fmx{height:160vh}.fmx-word{font-size:17.5vw}}
html.rm .fmx{height:100vh}
/* film grain on dark & coloured moments */
.milk-pin::before,.fmx-pin::before,.cv2-hero::before,.cv2-res::before{content:"";position:absolute;inset:-60%;z-index:5;pointer-events:none;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1s steps(6) infinite}
.cv2-res{position:relative;overflow:hidden}
.cv2-hero::before{z-index:1}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-5%,4%)}33%{transform:translate(4%,-6%)}50%{transform:translate(-3%,-2%)}67%{transform:translate(6%,3%)}83%{transform:translate(-4%,6%)}100%{transform:translate(0,0)}}
html.rm .milk-pin::before,html.rm .fmx-pin::before,html.rm .cv2-hero::before,html.rm .cv2-res::before{animation:none}
/* footer reveal */
footer.foot{overflow:hidden}
footer.foot > *{will-change:transform}
/* milk moment: tighter */

html.rm .milk{height:100vh}
/* ================= Portfolio: stacked cards ================= */
#works.stk{display:block!important;margin-left:0!important;padding-bottom:6vh}
.stk-i{position:sticky;top:calc(9vh + var(--i) * 14px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,48px);height:min(78vh,720px);margin-bottom:9vh;padding:clamp(22px,2.6vw,40px);border-radius:var(--r-lg);background:var(--bg);color:var(--fg);text-decoration:none;transform-origin:50% 0;box-shadow:0 -18px 50px rgba(0,0,0,.12);will-change:transform}
.stk-i:last-child{margin-bottom:0}
.stk-txt{display:flex;flex-direction:column;min-width:0}
.stk-n{font-size:13px;font-variant-numeric:tabular-nums;color:var(--ac)}
.stk-n i{font-style:normal;opacity:.55;color:var(--fg)}
.stk-name{margin:auto 0 0;font-family:var(--font-display);font-weight:500;font-size:clamp(38px,5.2vw,88px);line-height:.95;letter-spacing:-.045em}
.stk-tag{margin:14px 0 0;font-size:clamp(16px,1.3vw,19px);opacity:.75}
.stk-kpi{display:flex;align-items:baseline;gap:12px;margin:22px 0 0;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--fg) 18%,transparent)}
.stk-kpi b{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,3vw,48px);letter-spacing:-.04em;color:var(--ac)}
.stk-kpi span{font-size:14px;opacity:.75}
.stk-tags{margin-top:18px!important}
.stk-tags i{background:color-mix(in srgb,var(--fg) 10%,transparent)!important;color:var(--fg)!important}
.stk-tags i:hover{background:var(--fg)!important;color:var(--bg)!important}
.stk-go{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:500;font-size:15px}
.stk-go svg{width:16px;height:16px;transition:transform .5s var(--ease-pop)}
.stk-i:hover .stk-go svg{transform:translateX(5px)}
.stk-media{position:relative;border-radius:calc(var(--r-lg) - 4px);overflow:hidden;min-height:0}
.stk-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.stk-i:hover .stk-media img{transform:scale(1.04)}
@media (max-width:820px){
  .stk-i{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:min(82vh,680px);top:calc(7vh + var(--i) * 10px)}
  .stk-media{order:-1;height:38vh;min-height:220px}
  .stk-name{margin-top:14px}
  .stk-kpi{margin-top:14px}
}
html.rm .stk-i{position:relative;top:auto}

/* word reveal mask: give glyphs room (negative tracking, descenders) so letters are never cut */
.mo-w{padding:.06em .12em .2em!important;margin:-.06em -.12em -.2em!important}

.fmx-pin::after{content:"";position:absolute;inset:0;z-index:6;background:var(--bg);opacity:var(--fmx-end,0);pointer-events:none}
/* ================= Service pages wow ================= */
.sv-hero.has-vis{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center}
.sv-hero-vis{position:relative;height:clamp(380px,40vw,560px)}
.svv{position:absolute;display:block;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.18);background:var(--surface);animation:svFloat 7s ease-in-out infinite alternate;text-decoration:none}
.svv img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.svv:hover img{transform:scale(1.05)}
.svv span{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:#111;font-size:11.5px;font-weight:500}
.svv0{left:4%;top:6%;width:56%;height:56%;z-index:2}
.svv1{right:0;top:0;width:38%;height:44%;animation-delay:-2s;animation-duration:8s}
.svv2{right:6%;bottom:2%;width:46%;height:42%;z-index:3;animation-delay:-4s;animation-duration:9s}
.svv3{left:0;bottom:0;width:30%;height:30%;animation-delay:-1s;animation-duration:6.5s}
@keyframes svFloat{from{transform:translateY(-8px) rotate(-.6deg)}to{transform:translateY(10px) rotate(.6deg)}}
@media (max-width:900px){.sv-hero.has-vis{grid-template-columns:1fr}.sv-hero-vis{height:300px;margin-top:24px}}
html.rm .svv{animation:none}
#svm-h .mw{transition:opacity .25s linear,color .6s var(--ease-out),text-shadow .6s var(--ease-out)}
#svm-h .mw-k.on{color:var(--accent);text-shadow:0 0 28px rgba(20,108,255,.3)}
.sv-man-txt p{transition:opacity .2s linear}
/* stacked offers (desktop) */
@media (min-width:821px){
  .sv-offers.stack{display:block!important}
  .sv-offers.stack .sv-offer{position:sticky;top:calc(12vh + var(--oi,0) * 16px);display:grid;grid-template-columns:minmax(0,.35fr) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:clamp(24px,4vw,64px);min-height:min(52vh,460px);margin-bottom:8vh;padding:clamp(28px,3vw,48px);transform-origin:50% 0;box-shadow:0 -14px 40px rgba(0,0,0,.08);will-change:transform}
  .sv-offers.stack .sv-offer:last-child{margin-bottom:0}
  .sv-offers.stack .sv-n{grid-column:1;grid-row:1/-1;color:inherit!important;font-family:var(--font-display);font-size:clamp(80px,9vw,150px);font-weight:500;letter-spacing:-.05em;line-height:.85;opacity:.9}
  .sv-offers.stack .sv-offer > :not(.sv-n){grid-column:2}
  .sv-offers.stack .sv-offer h3{margin:0;font-size:clamp(30px,3vw,48px)}
  .sv-offers.stack .sv-p{font-size:clamp(17px,1.4vw,21px);margin-top:10px}
  .sv-offers.stack .sv-d{max-width:58ch;font-size:16px;line-height:1.65}
  .sv-offers.stack .sv-cta{justify-self:start;align-self:end}
  .sv-offers.stack .sv-offer:nth-child(4n+1){background:#0E1A33;color:#F2F2F0}
  .sv-offers.stack .sv-offer:nth-child(4n+2){background:#146CFF;color:#fff}
  .sv-offers.stack .sv-offer:nth-child(4n+3){background:var(--surface);color:var(--ink)}
  .sv-offers.stack .sv-offer:nth-child(4n+4){background:#141414;color:#F2F2F0}
  .sv-offers.stack .sv-offer:nth-child(4n+1) .sv-d,.sv-offers.stack .sv-offer:nth-child(4n+2) .sv-d,.sv-offers.stack .sv-offer:nth-child(4n+4) .sv-d{color:inherit;opacity:.78}
  .sv-offers.stack .sv-offer:nth-child(4n+1) .sv-cta,.sv-offers.stack .sv-offer:nth-child(4n+2) .sv-cta,.sv-offers.stack .sv-offer:nth-child(4n+4) .sv-cta{color:inherit;border-color:rgba(255,255,255,.35)}
  .sv-offers.stack .sv-offer .in-l{color:inherit}
}
/* KPI band */
.sv-kband{position:relative;overflow:hidden;background:#0E1A33;color:#F2F2F0;margin:clamp(40px,6vw,96px) 0;padding-top:clamp(64px,8vw,120px)!important;padding-bottom:clamp(64px,8vw,120px)!important}
.sv-kband .sv-kpi{color:#F2F2F0}
.sv-kband .h2{color:#F2F2F0}
.sv-kband .sv-kpi{border-top-color:rgba(255,255,255,.18)}
.sv-kband .sv-kpi b{color:#7FB2FF}
.sv-kband .sv-kpi span{color:rgba(242,242,240,.75)}
.sv-kband .sv-kpi em{color:#F2F2F0}
.sv-kband::before{content:"";position:absolute;inset:-60%;z-index:0;pointer-events:none;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1s steps(6) infinite}
.sv-kband > *{position:relative;z-index:1}
/* agency hero: two real studio photos, editorial offset */
.ag-vis{height:clamp(420px,42vw,600px)}
.ag-f{position:absolute;margin:0;overflow:hidden;border-radius:var(--r-lg);background:var(--surface);clip-path:inset(100% 0 0 0 round var(--r-lg));transition:clip-path 1.4s var(--ease-clip)}
.ag-f img{display:block;width:100%;height:100%;object-fit:cover;scale:1.18;transition:scale 2.2s var(--ease-out)}
.ag-f1{right:0;top:0;width:82%;height:72%}
.ag-f2{left:0;bottom:0;width:38%;height:52%;box-shadow:0 30px 70px rgba(0,0,0,.18);transition-delay:.25s}
.ag-f2 img{transition-delay:.25s}
.ag-in .ag-f{clip-path:inset(0 0 0 0 round var(--r-lg))}
.ag-in .ag-f img{scale:1}
.ag-in .ag-f1 img{animation:agKen 18s ease-in-out 2.2s infinite alternate}
@keyframes agKen{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-2%,-1.5%)}}
.ag-cap{position:absolute;right:0;bottom:6%;margin:0;display:flex;gap:18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);opacity:0;transition:opacity 1s .9s}
.ag-cap span+span::before{content:"";display:inline-block;width:28px;height:1px;background:currentColor;vertical-align:middle;margin-right:18px;opacity:.5}
.ag-in .ag-cap{opacity:1}
@media (max-width:900px){.ag-vis{height:360px}}
html.rm .ag-f{clip-path:none}html.rm .ag-f img{scale:1;animation:none}html.rm .ag-cap{opacity:1}
/* the plus in the manifesto pops when the reading reaches it */
#svm-h .mw .swiss-plus{display:inline-block;transition:transform .9s var(--ease-pop)}
#svm-h .mw.on .swiss-plus{transform:rotate(90deg) scale(1.25)}
/* team: avatars react */
.sv-team .av{transition:transform .6s var(--ease-pop),box-shadow .4s}
.sv-team li:hover .av{transform:scale(1.15) rotate(-8deg);box-shadow:0 10px 24px rgba(0,0,0,.12)}
/* project hover film */
.pc-media{position:relative}
.pc-vp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease-out);pointer-events:none;border-radius:inherit}
.pc-vp.on{opacity:1}
.pj-cnt{display:inline-block;font-size:.5em;vertical-align:.7em;margin-left:.3em;font-variant-numeric:tabular-nums;color:var(--accent);font-weight:500;letter-spacing:0}
html.pj-vt::view-transition-old(root){animation:pjOut .25s ease both}
html.pj-vt::view-transition-new(root){animation:pjIn .55s var(--ease-out) both}
@keyframes pjOut{to{opacity:0}}
@keyframes pjIn{from{opacity:0;transform:translateY(14px)}}
/* mobile problem cards: horizontal row stays perfectly level while swiping */
@media (max-width:820px){
  .svcs{overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;align-items:stretch}
  .svcs > .svc,.svcs > [data-mo="b"]{translate:none!important;opacity:1!important;transform:none!important;transition:none!important}
}
#pos-h{text-wrap:balance}
/* ================= Cinema carousel (home portfolio) ================= */
#works.cine{position:relative;display:block!important;margin:0 calc(-1 * var(--pad))!important;--cw:min(70vw,1080px)}
.cine-track{display:flex;gap:clamp(12px,1.6vw,24px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding:48px calc((100% - var(--cw)) / 2) 56px;margin:-40px 0 -44px;cursor:grab;outline:none;overscroll-behavior-x:contain;-webkit-user-select:none;user-select:none}
.cine-track::-webkit-scrollbar{display:none}
.cine-track.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.cine-track.drag a{pointer-events:none}
.cine-s{flex:none;width:var(--cw);scroll-snap-align:center}
.cine-card{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#111;color:#fff;text-decoration:none;transform-origin:50% 60%;will-change:transform,filter;box-shadow:0 30px 80px -30px rgba(0,0,0,.45)}
.cine-media{position:absolute;inset:0;overflow:hidden}
.cine-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.2);will-change:transform;-webkit-user-drag:none}
.cine-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 46%,rgba(0,0,0,.78) 100%);pointer-events:none}
.cine-ov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,3vw,44px)}
.cine-cl{display:flex;align-items:center;gap:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.cine-cl i{font-style:normal;padding:4px 8px;border:1px solid rgba(255,255,255,.5);border-radius:999px}
.cine-tl{margin:0;max-width:16ch;font-family:var(--font-display);font-size:clamp(34px,4.6vw,76px);font-weight:500;letter-spacing:-.04em;line-height:.98}
.cine-k{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,32px)}
.cine-k li{display:flex;flex-direction:column;gap:6px;text-align:center}
.cine-k b{font-family:var(--font-display);font-size:clamp(30px,4vw,64px);font-weight:500;letter-spacing:-.04em;line-height:1}
.cine-k span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(10.5px,.9vw,13px);letter-spacing:.04em;opacity:.85;line-height:1.35}
.cine-meta{padding:clamp(14px,1.6vw,22px) 4px 0;will-change:opacity,transform}
.cine-meta h3{margin:0;font-size:clamp(20px,1.9vw,28px);font-weight:500;letter-spacing:-.02em}
.cine-meta h3 a{color:inherit;text-decoration:none}
.cine-meta p{margin:6px 0 12px;max-width:72ch;color:var(--ink-2);font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cine-btn{position:absolute;top:calc(8px + var(--cw) * 9 / 32);translate:0 -50%;z-index:5;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;transition:background .3s,opacity .3s,scale .4s var(--ease-pop)}
.cine-btn svg{width:22px;height:22px}
.cine-btn:hover{background:rgba(255,255,255,.28);scale:1.08}
.cine-btn:disabled{opacity:0;pointer-events:none}
.cine-prev{left:calc((100% - var(--cw)) / 2 + 20px)}
.cine-next{right:calc((100% - var(--cw)) / 2 + 20px)}
.cine-bar{display:flex;align-items:center;gap:18px;width:var(--cw);margin:clamp(18px,2vw,28px) auto 0;font-size:13px;color:var(--ink-2)}
.cine-cnt{font-variant-numeric:tabular-nums;letter-spacing:.06em}.cine-cnt b{color:var(--ink);font-weight:500}
.cine-prog{flex:1;height:2px;background:var(--line,rgba(0,0,0,.1));border-radius:2px;overflow:hidden}
.cine-prog i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(.1);transition:transform .25s linear}
.cine-hint{opacity:.7}
@media (max-width:820px){
  #works.cine{--cw:86vw}
  .cine-tl{font-size:38px}
  .cine-card{aspect-ratio:4/4.5}
  .cine-ov{padding:20px}
  .cine-k{grid-template-columns:1fr;gap:14px}.cine-k li{text-align:left}
  .cine-k b{font-size:34px}
  .cine-btn{display:none}
  .cine-hint{display:none}
}
@media (hover:none){.cine-btn{display:none}}
html.rm .cine-media img{transform:none}
#clients[hidden]{display:none!important}
.rv-brand{display:flex;align-items:center}
.rv-bot{flex-direction:column;justify-content:center;gap:8px;text-align:center;padding-top:14px}
.rv-h1{margin:0;font-family:var(--font-display);font-size:clamp(26px,2.9vw,44px);font-weight:500;letter-spacing:-.035em;line-height:1.05;color:var(--ink)}
.rv-h1 .rv-h1-t{display:inline;font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit;margin:0}
.rv-bot .rv-loc{margin:0;max-width:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:820px){.rv-h1{font-size:clamp(19px,5.6vw,26px);text-wrap:balance}.rv-bot .rv-loc{display:none}}
[data-i="team.h"]{text-wrap:balance}
.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0b0b0b}
/* ===== hero: la brique ===== */
.ct-hero{position:absolute;inset:0;z-index:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 30%,#2F7DFF 0%,#146CFF 45%,#0A4FD8 100%);touch-action:pan-y}
.ct-bgword{position:absolute;left:0;top:50%;margin-top:-.55em;white-space:nowrap;font-family:var(--font-display);font-weight:700;font-size:min(22vw,300px);letter-spacing:-.04em;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.22);pointer-events:none}
.ct-shadow{position:absolute;left:0;top:0;width:340px;height:60px;margin:-30px 0 0 -170px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,20,90,.55),rgba(0,20,90,0));pointer-events:none}
.ct-pour{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ct-stream{fill:none;stroke:#fff;stroke-width:22;stroke-linecap:round;filter:drop-shadow(0 6px 14px rgba(0,25,100,.35))}
.ct-wrap{position:absolute;left:0;top:0;width:0;height:0;perspective:1600px;cursor:grab}
.ct-wrap:active{cursor:grabbing}
.ct{position:absolute;left:0;top:0;transform-style:preserve-3d}
.ct-f{position:absolute;overflow:hidden;background:#FBFBF8;backface-visibility:hidden;font-family:var(--font);color:#111}
.ct-sh{position:absolute;inset:0;background:#00123d;opacity:0;pointer-events:none}
.ct-roof,.ct-gab{background:#146CFF}
.ct-gab{clip-path:polygon(0 100%,100% 100%,50% 0)}
.ct-fin{background:#F2F2EE;border-radius:3px 3px 0 0}
.ct-bt{background:#e9e9e4}
.ct-rl{position:absolute;left:18px;right:18px;top:50%;height:2px;background:rgba(255,255,255,.35)}
.ct-front{position:absolute;inset:0;padding:22px 20px;display:flex;flex-direction:column}
.ct-logo{width:150px;height:auto}
.ct-kick{margin:8px 0 0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#146CFF;font-weight:600}
.ct-big{margin-top:auto;font-family:var(--font-display);font-size:58px;line-height:.9;font-weight:600;letter-spacing:-.045em;color:#111;position:relative;z-index:2}
.ct-vol{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;margin:12px 0 4px;font-size:11px;color:#fff;font-weight:500}
.ct-vol b{font-family:var(--font-display);font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:.8}
.ct-wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:96px}
.ct-wave path{fill:#146CFF}
.ct-side{position:absolute;inset:0;padding:22px 18px;display:flex;flex-direction:column;gap:8px}
.ct-lab{margin:0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#146CFF;font-weight:600}
.ct-shots{position:relative;height:200px;border-radius:12px;overflow:hidden;background:#ddd}
.ct-shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.ct-shots img.on{opacity:1}
.ct-name{margin:4px 0 0;font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.05}
.ct-small{margin:auto 0 0;font-size:10.5px;line-height:1.4;color:#555}
.ct-nut .ct-nh{margin:0;font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.02em;border-bottom:6px solid #111;padding-bottom:6px}
.ct-ns{margin:0;font-size:10px;color:#555}
.ct-nut table{width:100%;border-collapse:collapse;font-size:12px}
.ct-nut td{padding:5px 0;border-bottom:1px solid #111}
.ct-nut td:last-child{text-align:right;font-weight:700}
.ct-back{position:absolute;inset:0;padding:22px 20px;display:flex;flex-direction:column}
.ct-never{font-family:var(--font-display);font-size:62px;font-weight:600;letter-spacing:-.05em;line-height:.9;color:#146CFF;margin:4px 0 18px}
.ct-back dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 10px;font-size:10.5px}
.ct-back dt{color:#777}.ct-back dd{margin:0;font-weight:500}
.ct-bar{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.ct-bar i{display:block;width:120px;height:46px;background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px,#111 4px 5px,transparent 5px 8px,#111 8px 11px,transparent 11px 12px)}
.ct-bar span{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.12em}
.hero-splash .wall{display:none}
.hero-splash .hint{color:#fff}
.ct-hero ~ .chip{background:#fff}



/* ===== hero = one milk story ===== */
.milk{height:240vh}
@media (max-width:700px){.milk{height:200vh}}
.milk-pin .ct-wrap{z-index:1}
.milk-svg{z-index:2}
.milk-txt{z-index:3}
.milk-head{position:absolute;left:var(--pad);right:var(--pad);top:var(--pad);z-index:6;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.milk-head > *{pointer-events:auto}
.milk-chip{position:static!important;background:#fff!important;opacity:1!important}
.milk-cta{margin:0}
.milk-hint{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:#fff;pointer-events:none}
.milk-hint svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.st-milk .wall,.st-milk .chip,.st-milk .hint{display:none}
.stage.st-milk{background:var(--bg)}
.intro:has(.st-milk){height:190vh}
@media (max-width:700px){.intro:has(.st-milk){height:160vh}}

/* ===== hero polish (awwwards pass) ===== */
.milk-svg,.milk-txt{pointer-events:none}
.milk-pin .ct-wrap{cursor:grab}
.milk-pin .ct-wrap.grab{cursor:grabbing}
.milk-pin .ct-f{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.milk-brand{display:inline-flex;align-items:center}
.milk-logo{height:clamp(26px,2.3vw,34px);width:auto;filter:brightness(0) invert(1)}
.milk-cta{background:#fff!important;color:#0E1A33!important;box-shadow:0 10px 30px -10px rgba(0,20,80,.45)}
.milk-cta:hover{background:#0E1A33!important;color:#fff!important}
.ct-tip{position:absolute;left:0;top:0;z-index:4;margin:0;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:12px;letter-spacing:.04em;pointer-events:none;opacity:0;transition:opacity .4s}
.reel-sound{position:absolute;right:16px;bottom:16px;z-index:6;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border-radius:999px;background:rgba(255,255,255,.92);color:#0E1A33;font-size:13px;font-weight:500;cursor:pointer;border:0;transition:transform .3s var(--ease-pop),background .3s}
.reel-sound svg{width:16px;height:16px;fill:currentColor}
.reel-sound:hover{transform:scale(1.05);background:#fff}
.sr-lb{position:fixed;inset:0;z-index:200;background:rgba(5,8,20,.92);display:grid;place-items:center;opacity:0;transition:opacity .35s}
.sr-lb.on{opacity:1}
.sr-lb video{width:min(92vw,1600px);max-height:86vh;border-radius:14px;background:#000}
.sr-x{position:absolute;top:18px;right:22px;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:#111;font-size:26px;line-height:1;cursor:pointer}
.intro:has(.st-milk){height:300vh}
@media (max-width:700px){.intro:has(.st-milk){height:240vh}.reel-sound{right:10px;bottom:10px;height:34px;font-size:12px}}

.reveal.live{pointer-events:none!important}
.reveal.live .rv-top > *,.reveal.live .rv-bot > *{pointer-events:auto}
.ag-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ag-steps li{padding:28px 26px 30px;border-radius:var(--r-lg);background:var(--surface);display:flex;flex-direction:column;gap:10px;min-height:240px}
.ag-steps span{font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums;font-weight:500}
.ag-steps h3{margin:auto 0 0;font-family:var(--font-display);font-size:clamp(24px,2vw,32px);font-weight:500;letter-spacing:-.03em}
.ag-steps p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
@media (max-width:900px){.ag-steps{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.ag-steps{grid-template-columns:1fr}.ag-steps li{min-height:0}}

/* carton: quieter, more refined type */
.ct-front{padding:26px 22px 20px}
.ct-logo{width:112px}
.ct-kick,.ct-lab{font-size:8.5px;font-weight:500;letter-spacing:.2em}
.ct-big{font-size:40px;font-weight:400;letter-spacing:-.035em;line-height:.98;margin-bottom:26px}
.ct-vol{font-size:10px;font-weight:400;letter-spacing:.04em}
.ct-vol b{font-size:21px;font-weight:400}
.ct-name{font-size:17px;font-weight:400;letter-spacing:-.02em}
.ct-small,.ct-ns,.ct-back dl{font-size:9.5px}
.ct-nut .ct-nh{font-size:17px;font-weight:500;border-bottom-width:3px}
.ct-nut table{font-size:11px}
.ct-nut td:last-child{font-weight:500}
.ct-never{font-size:40px;font-weight:400;letter-spacing:-.035em;line-height:.98}
.ct-back dd{font-weight:400}

/* hero: deep night-blue stage so the blue carton and white milk stand out */
.milk{background:#0E1A33}
.milk-pin{background:radial-gradient(ellipse 70% 60% at 50% 42%,#1D3260 0%,#12224A 45%,#0E1A33 75%,#0A1428 100%)}
.milk-cta:hover{background:#146CFF!important;color:#fff!important}
.ct-tip{background:rgba(255,255,255,.12)}

/* ===== Final polish pass (Awwwards) ===== */
:root{--ink-2:rgba(17,17,17,.68);--ink-3:rgba(17,17,17,.6);--accent-ink:#0B5BE0}
:root[data-theme="dark"]{--ink-3:rgba(242,242,240,.55);--accent-ink:#6AA5FF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink-3:rgba(242,242,240,.55);--accent-ink:#6AA5FF}}
.ag-steps li>span,.ct-steps li>span,.sg-k span,.pj-cnt,.cv2-k,.metric em,.st span,[id^="st"]>span,.foot-note a,.in-l,.p-count b{color:var(--accent-ink)!important}
.in-l{padding-block:3px}
.mo-w{padding:.08em 0 .16em;margin:-.08em 0 -.16em}
.h2,.h1,h2,h3{text-wrap:balance}
.lede,p{text-wrap:pretty}
.logo-grid img{opacity:.72}
.foot a,.foot button,.lang button,.ft-mail,.ft-cert,.ft-cc,.xp-more,figcaption a,.ct-direct a,dd a{min-height:24px;display:inline-flex;align-items:center}
.lang button{min-width:28px;justify-content:center}
.lg-table:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media (max-width:700px){.intro:has(.st-milk){height:200vh}}

.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form.sent .f-status{color:var(--accent-ink);font-weight:500}

@media (max-width:400px){.milk-logo{height:22px}.milk-head{gap:12px}.milk-cta{padding-inline:14px!important;font-size:14px}}