:root{
  --chalk:#f1f0e9;--ink:#171b1e;--night:#0e1113;--blue:#344c65;--blue-hi:#46668a;--steel:#a7afb5;--signal:#dce766;
  --pad:clamp(20px,3vw,44px);--radius:20px;--ease:cubic-bezier(.2,.7,.1,1);
  --display:Anton,'Arial Narrow',Impact,sans-serif;--sans:'Hanken Grotesk',system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--chalk);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%}
[hidden]{display:none!important}
/* Lenis smooth scrolling */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
::selection{background:var(--signal);color:var(--ink)}
:focus-visible{outline:2px solid var(--signal);outline-offset:4px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;top:12px;left:12px;z-index:90;background:var(--signal);color:var(--ink);padding:10px 16px;border-radius:999px;transform:translateY(-200%)}
.skip-link:focus{transform:none}
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.005em;line-height:.92}
.kicker{font-size:18px;font-weight:500;margin-bottom:22px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 24px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;transition:transform .3s var(--ease),background-color .25s,color .25s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-ink{background:var(--ink);color:var(--chalk)}
.btn-ink:hover{background:#000}
.btn-chalk{background:var(--chalk);color:var(--ink)}
.btn-signal{background:var(--signal);color:var(--ink)}
.btn-signal:hover{background:#e8f28a}
.btn-outline{border:1.5px solid var(--chalk);color:var(--chalk)}
.btn-outline:hover{background:var(--chalk);color:var(--ink)}
.btn-lg{min-height:56px;padding:0 34px;font-size:16px}

/* Chrome */
.progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:80;background:var(--signal);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.site-header{position:fixed;inset:0 0 auto;z-index:70;height:78px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;transition:transform .5s var(--ease),opacity .4s}
.site-header.is-hidden{transform:translateY(-110%);opacity:0}
.site-header.is-solid{background:rgba(14,17,19,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.brand svg{display:block;height:19px;width:auto;aspect-ratio:882/100;fill:var(--chalk)}
.nav{display:flex;align-items:center;gap:34px;font-size:15px;font-weight:500}
.nav a{position:relative;padding:6px 0;opacity:.85;transition:opacity .2s}
.nav a:hover{opacity:1}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.lang{display:inline-flex;align-items:center;gap:8px;margin-left:12px}
.lang svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.menu-toggle{display:none;flex-direction:column;gap:6px;padding:12px 4px}
.menu-toggle span{display:block;width:26px;height:2px;border-radius:2px;background:var(--chalk);transition:transform .3s}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:65;background:var(--night);padding:110px var(--pad) 40px;display:flex;flex-direction:column;gap:6px}
.mobile-menu a{font-family:var(--display);font-size:clamp(44px,12vw,72px);text-transform:uppercase;line-height:1.05}
.talk-pill{position:fixed;right:var(--pad);bottom:24px;z-index:60;background:var(--chalk);color:var(--ink);padding:16px 26px;border-radius:999px;font-size:14px;font-weight:600;box-shadow:0 12px 30px -12px rgba(0,0,0,.6);transition:background-color .25s}
.talk-pill:hover{background:var(--signal)}

/* Gradient zone: night → blue */
/* One continuous gradient (no seam under the hero), with extra stops so it eases instead of banding. */
.grad-top{background:linear-gradient(180deg,#07090a 0,#0d1217 25vh,#151f29 50vh,#1f2f3f 75vh,#2a3f55 100vh,#314862 125vh,var(--blue) 150vh,#3b5776 65%,var(--blue-hi) 100%)}

/* Hero */
.hero{position:relative;height:100svh;min-height:560px;display:grid;place-items:center;padding:90px var(--pad) 60px}
.hero-stage{position:relative;width:min(1100px,100%);text-align:center}
.hero-rotator{font-family:var(--display);text-transform:uppercase;font-size:clamp(58px,10vw,184px);line-height:1.02;min-height:2.1em;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;column-gap:.22em}
.hero-rotator .w{display:inline-flex;white-space:nowrap}
.js .hero-rotator:not(.is-ready){visibility:hidden}
.hero-rotator .c{display:inline-block;clip-path:inset(-.5em -.6em -.12em);padding-bottom:.12em;margin-bottom:-.12em;vertical-align:top}
.hero-rotator .c>span{display:inline-block;transform-origin:50% 100%;will-change:transform,opacity;backface-visibility:hidden}
.hero-icon{will-change:transform,opacity}
.hero-icon{position:absolute;left:0;top:0;width:clamp(70px,8vw,130px);height:auto;opacity:0;pointer-events:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.hero-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}

/* Reel */
.reel-wrap{position:relative;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.reel{position:relative;width:calc(100% - 2*var(--pad));aspect-ratio:1312/508;border-radius:var(--radius);overflow:hidden;background:var(--ink)}
.reel-media{position:absolute;inset:0;will-change:transform}
.reel-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:transform,opacity;backface-visibility:hidden}
/* Desktop: the reel always fills the screen; GSAP opens a clip window instead of resizing it (no layout per frame). */
@media (min-width:1024px){
  .reel{position:absolute;inset:0;width:auto;aspect-ratio:auto;border-radius:0;will-change:clip-path}
  .js .reel{clip-path:inset(30% 30% 30% 30% round 20px)}
}
.reel-img.is-on{opacity:1}
.reel-chip{position:absolute;left:20px;bottom:20px;background:rgba(14,17,19,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:9px 16px;border-radius:999px;font-size:12px;font-weight:500}

/* Intro */
.intro{max-width:1400px;margin:0 auto;padding:14vh var(--pad) 16vh;display:grid;grid-template-columns:1.25fr .75fr;gap:6vw;align-items:center}
.intro-text{font-size:clamp(24px,2.6vw,40px);line-height:1.25;font-weight:500;letter-spacing:-.01em}
.intro-text .word{display:inline-block}
.intro-art{position:relative;aspect-ratio:1;max-width:380px;justify-self:center;width:100%}
.sheet{position:absolute;border-radius:18px;border:5px solid var(--ink)}
.s1{inset:14% 22% 22% 8%;background:var(--steel);transform:rotate(-12deg)}
.s2{inset:10% 12% 26% 16%;background:var(--signal);transform:rotate(6deg)}
.s3{inset:20% 8% 12% 22%;background:var(--chalk);transform:rotate(-3deg)}
.s3 .br{position:absolute;inset:18%;background:
  linear-gradient(var(--ink),var(--ink)) top left/26px 5px,linear-gradient(var(--ink),var(--ink)) top left/5px 26px,
  linear-gradient(var(--ink),var(--ink)) top right/26px 5px,linear-gradient(var(--ink),var(--ink)) top right/5px 26px,
  linear-gradient(var(--ink),var(--ink)) bottom left/26px 5px,linear-gradient(var(--ink),var(--ink)) bottom left/5px 26px,
  linear-gradient(var(--ink),var(--ink)) bottom right/26px 5px,linear-gradient(var(--ink),var(--ink)) bottom right/5px 26px;background-repeat:no-repeat}
.s3 .sq{position:absolute;left:calc(50% - 14px);top:calc(50% - 14px);width:28px;height:28px;border-radius:5px;background:var(--signal);border:4px solid var(--ink)}
.intro-st{position:absolute;right:-4%;top:-6%;width:30%;filter:drop-shadow(0 8px 14px rgba(0,0,0,.3))}

/* Services accordion */
.services{max-width:1500px;margin:0 auto;padding:0 var(--pad) 18vh}
.acc{display:flex;gap:10px;height:560px;align-items:center}
.acc-item{position:relative;flex:0 0 auto;width:95px;height:468px;border-radius:999px;background:var(--bg);color:var(--fg);overflow:hidden}
.acc-item[data-open]{width:calc(100% - 3*105px);height:560px;border-radius:var(--radius)}
.acc-trigger{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;color:inherit;transition:opacity .3s}
.acc-item[data-open] .acc-trigger{opacity:0;pointer-events:none}
.acc-item:not([data-open]) .acc-reveal{opacity:0}
.acc-tab{font-family:var(--display);font-size:34px;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.acc-panel{position:absolute;inset:0}
.acc-body{position:absolute;inset:0 auto 0 0;display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:30px}
.acc-copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding:10px 4px}
.acc-copy .display{font-size:clamp(64px,6.2vw,104px)}
.acc-copy p{font-size:17px;line-height:1.5;max-width:34ch}
.acc-cta{margin-top:auto}
.acc-media{border-radius:14px;overflow:hidden;background:rgba(0,0,0,.12)}
.acc-media img{width:100%;height:100%;object-fit:cover}
.ai-media{display:grid;place-items:center;background:var(--ink)}
.ai-card{width:min(86%,340px);display:grid;gap:10px}
.ai-row{display:flex;align-items:center;gap:12px;background:#22282d;color:var(--chalk);border-radius:12px;padding:14px 16px;font-size:14px}
.ai-row .dot{width:10px;height:10px;border-radius:50%;background:var(--steel);flex:0 0 auto}
.ai-row.is-wait .dot{background:transparent;border:2px solid var(--signal)}
.ai-row.is-ok{background:var(--signal);color:var(--ink)}
.ai-row.is-ok .dot{background:var(--ink)}

/* Giant heading */
.big-head{padding:6vh var(--pad) 10vh;overflow:hidden}
.giant{font-size:clamp(64px,13.4vw,250px);text-align:center;white-space:nowrap;line-height:.9}
.split .ch{display:inline-block;will-change:transform}
.split .cw{display:inline-block;white-space:nowrap;overflow:hidden;padding:.16em .02em .04em;margin:-.16em -.02em -.04em;vertical-align:top}

/* Cases */
.cases{background:linear-gradient(180deg,var(--blue-hi) 0%,#2b4259 22%,#141c24 55%,var(--night) 80%);padding:4vh var(--pad) 18vh;display:grid;grid-template-columns:.8fr 2.2fr;gap:4vw;max-width:none}
.cases-side p{position:sticky;top:120px;font-size:20px;font-weight:500;line-height:1.35}
.cases-side span{display:block;font-size:15px;font-weight:400;opacity:.65;margin-top:6px}
.cases-list{display:grid;gap:64px;max-width:1100px}
.case{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center}
.case-art{position:relative;aspect-ratio:16/10;border-radius:var(--radius);background:var(--bg);color:var(--fg);overflow:hidden}
.case-word{position:absolute;left:-2%;bottom:-12%;font-family:var(--display);text-transform:uppercase;font-size:clamp(90px,11vw,200px);line-height:1;will-change:transform}
.case-art .br{transition:transform .7s var(--ease)}
.case:hover .case-art .br,.scen:hover .case-art .br{transform:scale(1.12) rotate(4deg)}
.case-art .br{position:absolute;right:8%;top:12%;width:26%;aspect-ratio:1;background:
  linear-gradient(currentColor,currentColor) top left/22px 3px,linear-gradient(currentColor,currentColor) top left/3px 22px,
  linear-gradient(currentColor,currentColor) top right/22px 3px,linear-gradient(currentColor,currentColor) top right/3px 22px,
  linear-gradient(currentColor,currentColor) bottom left/22px 3px,linear-gradient(currentColor,currentColor) bottom left/3px 22px,
  linear-gradient(currentColor,currentColor) bottom right/22px 3px,linear-gradient(currentColor,currentColor) bottom right/3px 22px;background-repeat:no-repeat}
.case-art .br::after{content:'';position:absolute;left:calc(50% - 7px);top:calc(50% - 7px);width:14px;height:14px;border-radius:3px;background:var(--signal);box-shadow:0 0 0 2px var(--ink)}
.case-n{font-size:22px;opacity:.6;margin-bottom:18px}
.case-n b{font-weight:500}
.case h3{font-size:26px;font-weight:600;margin-bottom:14px}
.case-copy>p:not(.case-n){font-size:16px;opacity:.85;max-width:38ch}
.case-stat{display:flex;align-items:center;gap:16px;margin-top:26px}
.case-stat b{font-family:var(--display);font-weight:400;font-size:28px;background:var(--chalk);color:var(--ink);border-radius:10px;padding:8px 14px;line-height:1}
.case-stat span{font-size:16px;max-width:20ch;line-height:1.3}
.cases-list>.btn{justify-self:start;margin-left:calc(55% + 18px)}

/* Ink zone */
.ink-zone{background:var(--night)}
.offers{max-width:1500px;margin:0 auto;padding:8vh var(--pad) 14vh}
.offers-lead{font-size:clamp(24px,2.4vw,38px);font-weight:500;line-height:1.25;max-width:30ch;margin-bottom:48px;letter-spacing:-.01em}
.offer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.offer{position:relative;background:#e4e5e1;color:var(--ink);border-radius:var(--radius);padding:30px 26px;display:flex;flex-direction:column}
.offer h3{font-size:26px;font-weight:600}
.offer-sub{font-size:16px;opacity:.75;margin-top:8px;min-height:3em}
.offer-price{font-size:clamp(40px,3.4vw,56px);margin-top:22px;padding-top:22px;border-top:2px solid rgba(23,27,30,.25)}
.offer-note{font-size:14px;opacity:.7;margin-top:6px}
.offer ul{margin:24px 0 32px;display:grid;gap:12px;font-size:15px}
.offer li{display:flex;gap:10px}
.offer li::before{content:'';flex:0 0 auto;width:14px;height:8px;margin-top:6px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg)}
.offer .btn{margin-top:auto;align-self:center}
.offer-badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--signal);color:var(--ink);font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;white-space:nowrap}
.offer-dark{background:var(--night);color:var(--chalk);box-shadow:inset 0 0 0 1.5px rgba(241,240,233,.35)}
.offer-dark h3{font-size:clamp(48px,4vw,68px);font-weight:400}
.offer-dark .offer-sub{opacity:.85;min-height:0;margin-top:20px}
.offer-dark ul.plain li::before{border:0;width:8px;height:8px;border-radius:2px;background:var(--signal);transform:none;margin-top:7px}
.offers-foot{font-size:14px;opacity:.6;margin-top:28px}

.faq{max-width:1500px;margin:0 auto;padding:6vh var(--pad) 18vh;display:grid;grid-template-columns:.8fr 1.4fr;gap:6vw;align-items:start}
.faq-side{position:sticky;top:110px;display:grid;gap:22px;justify-items:start}
.faq-side figure{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;width:100%}
.faq-side img{width:100%;height:100%;object-fit:cover}
.faq-side p{font-size:17px}
.faq-title{font-size:clamp(64px,7.6vw,132px);margin-bottom:40px}
.qa{border-top:1.5px solid rgba(241,240,233,.25)}
.qa:last-child{border-bottom:1.5px solid rgba(241,240,233,.25)}
.q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-size:clamp(18px,1.5vw,22px);font-weight:500;text-align:left}
.q i{position:relative;flex:0 0 auto;width:22px;height:22px}
.q i::before,.q i::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:currentColor;transition:transform .4s var(--ease)}
.q i::after{transform:rotate(90deg)}
.q[aria-expanded=true] i::after{transform:rotate(0)}
.a{height:0;overflow:hidden}
.a p{padding:0 0 26px;font-size:17px;opacity:.8;max-width:60ch}

.statement{padding:16vh var(--pad) 12vh;text-align:center}
.statement-title{font-size:clamp(64px,10.4vw,190px)}
.sw{display:inline-block}
.statement-st{display:inline-block;width:.95em;height:auto;vertical-align:-.1em;margin:0 .04em}
.statement-sub{max-width:46ch;margin:34px auto 0;font-size:18px;opacity:.85}

.promises{padding:8vh 0 16vh;overflow:hidden}
.promises-head{max-width:1500px;margin:0 auto;padding:0 var(--pad);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:60px}
.promises-head .display{font-size:clamp(56px,6.6vw,116px)}
.fan{display:flex;justify-content:center;padding:30px 0}
.card{flex:0 0 auto;width:250px;height:310px;margin:0 -26px;border-radius:var(--radius);background:var(--bg);color:var(--fg);padding:24px 22px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 20px 40px -20px rgba(0,0,0,.7);position:relative}
.card p{font-size:19px;font-weight:600;line-height:1.3}
.card footer{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;border-top:1.5px solid currentColor;padding-top:14px;opacity:.85}
.card footer i{width:26px;height:26px;border-radius:50%;background:currentColor;opacity:.25}

.notes{max-width:1500px;margin:0 auto;padding:4vh var(--pad) 16vh}
.notes-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
.notes-head .display{font-size:clamp(56px,6.6vw,116px)}
.notes-soon{font-size:14px;opacity:.7}
.notes-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:16px}
.note-art{aspect-ratio:1;border-radius:var(--radius);background:var(--bg);display:grid;place-items:center;overflow:hidden}
.note-xl .note-art{aspect-ratio:auto;height:calc(100% - 92px);min-height:260px}
.note-art svg{width:42%;transition:transform .6s var(--ease)}
.note:hover .note-art svg{transform:scale(1.12) rotate(-8deg)}
.note h3{font-size:17px;font-weight:600;line-height:1.3;margin-top:14px}
.note p{font-size:13px;opacity:.6;margin-top:6px}

/* Contact */
.contact{background:linear-gradient(180deg,var(--night) 0%,#1b2733 30%,var(--blue) 70%,var(--blue-hi) 100%);padding:16vh var(--pad) 14vh}
.madlib{max-width:1200px;margin:0 auto;text-align:center}
.madlib>p:first-child{font-size:clamp(26px,3.3vw,52px);line-height:1.5;font-weight:500;letter-spacing:-.01em}
.blank{position:relative;display:inline-flex;margin:0 .12em;padding:0 .5em;vertical-align:baseline}
.blank::before,.blank::after{content:'';position:absolute;top:-.05em;bottom:-.1em;width:.32em;border:3px solid var(--signal);transition:border-color .2s}
.blank::before{left:0;border-right:0}
.blank::after{right:0;border-left:0}
.blank input{background:none;border:0;outline:none;font-size:max(16px,.42em);color:var(--signal);text-align:center;width:var(--w,12ch);min-width:8ch;padding:.35em 0}
.blank input::placeholder{color:var(--signal);opacity:.75}
.blank:focus-within::before,.blank:focus-within::after{border-color:var(--chalk)}
.blank.is-error::before,.blank.is-error::after{border-color:#ff8a7a}
.madlib-note{max-width:52ch;margin:40px auto 30px;font-size:17px;opacity:.85}
.madlib-status{margin-top:18px;font-size:15px;min-height:1.5em}

/* Footer */
.site-footer{background:var(--night);padding:60px var(--pad) 32px;border-top:1px solid rgba(241,240,233,.12)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;max-width:1500px;margin:0 auto}
.foot-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.6;margin-bottom:14px}
.foot-grid p,.foot-grid a{font-size:15px;display:block;line-height:1.8}
.foot-intro p{max-width:46ch;line-height:1.5}
.foot-pdf{margin-top:18px;color:var(--signal)}
.foot-grid a:hover{color:var(--signal)}
.foot-copy{max-width:1500px;margin:60px auto 0;font-size:clamp(32px,4vw,56px);opacity:.75}

/* ================= Inner pages ================= */
.nav a[aria-current=page]{opacity:1}
.nav a[aria-current=page]::after{transform:scaleX(1)}
.page-hero{position:relative;padding:24vh var(--pad) 12vh;text-align:center;max-width:1500px;margin:0 auto}
.page-hero .kicker{opacity:.7}
.page-title{font-size:clamp(72px,12vw,220px)}
.page-lead{max-width:46ch;margin:36px auto 0;font-size:clamp(17px,1.4vw,21px);opacity:.85}
.page-sticker{position:absolute;right:max(var(--pad),12vw);top:20vh;width:clamp(80px,9vw,140px);filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.big-para{font-size:clamp(28px,3.6vw,58px);line-height:1.18;font-weight:500;letter-spacing:-.02em;max-width:24ch;margin:0 auto}
.scrub-text .word{display:inline-block}

/* Light theme (Expertises) */
body.light{background:var(--chalk);color:var(--ink);color-scheme:light}
.light .brand svg{fill:var(--ink)}
.light .menu-toggle span{background:var(--ink)}
.light.menu-open .menu-toggle span{background:var(--chalk)}
.light.menu-open .brand svg{fill:var(--chalk)}
.light .site-header.is-solid{background:rgba(241,240,233,.82)}
.light .talk-pill{background:var(--ink);color:var(--chalk);box-shadow:0 0 0 1.5px rgba(241,240,233,.35),0 12px 30px -12px rgba(0,0,0,.6)}
.light .talk-pill:hover{background:var(--blue)}
.light :focus-visible{outline-color:var(--blue)}
.light-hero{padding-bottom:16vh;border-bottom:1.5px solid rgba(23,27,30,.14)}

.xp-groups{max-width:1500px;margin:0 auto;padding:0 var(--pad)}
.xp-group{display:grid;grid-template-columns:.9fr 1.6fr;gap:6vw;padding:12vh 0;border-bottom:1.5px solid rgba(23,27,30,.14);scroll-margin-top:80px}
.xp-label{position:sticky;top:110px;align-self:start}
.xp-label .display{font-size:clamp(56px,6vw,108px)}
.xp-label>p{font-size:16px;opacity:.65;margin:10px 0 28px}
.xp-media{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;max-width:420px}
.xp-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.xp-group:hover .xp-media img{transform:scale(1.05)}
.xp-intro{font-size:clamp(20px,1.7vw,26px);line-height:1.4;max-width:34ch;margin-bottom:34px}
.xp-links li{border-top:1.5px solid rgba(23,27,30,.2)}
.xp-links li:last-child{border-bottom:1.5px solid rgba(23,27,30,.2)}
.xp-links a{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:clamp(18px,1.6vw,24px);font-weight:500;transition:padding .35s var(--ease),color .2s}
.xp-links a span{transition:transform .35s var(--ease)}
.xp-links a:hover{padding-left:14px;color:var(--blue)}
.xp-links a:hover span{transform:translateX(6px)}
.xp-foot{margin-top:24px;font-size:14px;opacity:.6}

.process{height:100svh;display:grid;place-items:center;padding:0 var(--pad);text-align:center}
.process-inner{width:min(1300px,100%)}
.process .kicker{opacity:.7}
.process-lead{font-size:clamp(20px,1.8vw,28px);max-width:30ch;margin:0 auto 9vh;line-height:1.35}
.steps-row{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.steps-row li{display:grid;justify-items:center;gap:8px;transition:color .35s}
.steps-row b{font-size:clamp(56px,6vw,104px);color:#c9cccb;transition:color .35s,transform .45s var(--ease)}
.steps-row span{font-size:16px;font-weight:600;color:#8d9396;transition:color .35s}
.steps-row small{font-size:13px;max-width:18ch;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;color:var(--ink)}
.steps-row li.is-done b,.steps-row li.is-done span{color:var(--ink)}
.steps-row li.is-on b{color:var(--blue);transform:translateY(-6px)}
.steps-row li.is-on span{color:var(--blue)}
.steps-row li.is-on small,.steps-row li.is-done small{opacity:1;transform:none}
.process-line{display:block;width:100%;height:60px;margin-top:-10px}
.process-line path{stroke:var(--blue)}

.marquees{padding:10vh 0;overflow:hidden}
.mq{overflow:hidden;white-space:nowrap;padding:18px 0}
.mq-track{display:inline-flex;align-items:center;gap:26px;will-change:transform}
.mq-track span{font-family:var(--display);text-transform:uppercase;font-size:clamp(34px,4vw,64px);line-height:1}
.mq-track i{font-style:normal;font-size:clamp(20px,2vw,30px)}
.mq-dup{display:contents}
.mq-no{background:var(--signal);color:var(--ink);transform:rotate(-1.5deg) scale(1.03)}
.mq-yes{background:var(--blue);color:var(--chalk);transform:rotate(2deg) scale(1.03);margin-top:-6px}
.mq-yes i{color:var(--signal)}

.cta-band{position:relative;background:var(--night);color:var(--chalk);text-align:center;padding:18vh var(--pad);overflow:hidden}
.cta-band .display{font-size:clamp(64px,10vw,180px)}
.cta-band p{max-width:44ch;margin:30px auto 36px;font-size:18px;opacity:.85}
.cta-st{position:absolute;left:max(var(--pad),14vw);top:14vh;width:clamp(70px,8vw,120px);transform:rotate(-12deg)}

/* Scénarios */
.scen-wrap{max-width:1500px;margin:0 auto;padding:0 var(--pad) 16vh}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:48px}
.filter{min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid rgba(241,240,233,.35);font-size:14px;font-weight:600;transition:background-color .25s,color .25s,border-color .25s}
.filter:hover{border-color:var(--chalk)}
.filter[aria-pressed=true]{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.filter-count{margin-left:auto;font-size:14px;opacity:.6}
.scen-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px 40px}
.scen .case-art{margin-bottom:24px}
.chips{display:flex;gap:8px;margin-bottom:14px}
.chip{font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;background:rgba(241,240,233,.12)}
.scen h3{font-size:26px;font-weight:600;margin-bottom:12px}
.scen-copy>p{font-size:16px;opacity:.85;max-width:46ch}
.scen-copy>p+p{margin-top:6px}
.scen-copy b{font-weight:600}

/* Studio */
.photo-strip{overflow:hidden;padding:2vh 0 12vh}
.strip-track{display:flex;gap:16px;width:max-content}
.strip-track figure{width:clamp(300px,36vw,620px);aspect-ratio:3/2;border-radius:var(--radius);overflow:hidden;flex:0 0 auto}
.strip-track figure:nth-child(even){margin-top:6vh}
.strip-track img{width:100%;height:100%;object-fit:cover}
.facts{max-width:1500px;margin:0 auto;padding:0 var(--pad) 12vh;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.facts p{display:grid;gap:4px;padding:26px 10px;border-top:1.5px solid rgba(241,240,233,.25)}
.facts b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,2.4vw,38px)}
.facts span{font-size:15px;opacity:.7}
.why{max-width:1500px;margin:0 auto;padding:6vh var(--pad) 10vh;display:grid;grid-template-columns:.6fr 1.4fr;gap:6vw}
.why-copy .big-para{margin:0 0 40px;max-width:22ch}
.why-copy p.reveal{font-size:18px;opacity:.85;max-width:52ch;margin-top:16px}
.values{max-width:1500px;margin:0 auto;padding:6vh var(--pad) 12vh;display:grid;grid-template-columns:.6fr 1.4fr;gap:6vw}
.values-side>p:last-child{font-size:16px;opacity:.7;max-width:28ch}
.values-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 40px}
.value{padding:26px 0 34px;border-top:1.5px solid rgba(241,240,233,.25)}
.value-n{font-size:14px;opacity:.55;margin-bottom:18px}
.value h3{font-size:24px;font-weight:600;margin-bottom:10px}
.value p:last-child{font-size:16px;opacity:.8;max-width:40ch}

/* Contact page */
.contact-page{min-height:100svh;padding-top:22vh;background:linear-gradient(180deg,#07090a 0%,#16212c 30%,#2a3f55 65%,var(--blue) 100%)}
.contact-kicker{max-width:1200px;margin:0 auto 30px;opacity:.7}
.madlib-left{text-align:left}
.madlib-left>p:first-child{line-height:1.75}
.madlib-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px;margin-top:50px}
.madlib-left .madlib-note{margin:0;max-width:40ch;font-size:15px}
.coords{max-width:1500px;margin:0 auto;padding:12vh var(--pad) 6vh}
.coords-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0}
.coords-grid div{padding:22px 0;border-top:1.5px solid rgba(241,240,233,.25)}
.coords-grid dt{font-size:13px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:8px}
.coords-grid dd{margin:0;font-size:19px;font-weight:500}
.coords-grid a{color:var(--signal)}
.next{max-width:1500px;margin:0 auto;padding:10vh var(--pad) 16vh}
.next .display{font-size:clamp(64px,9vw,160px);margin-bottom:60px}
.next-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.next-steps li{padding-top:24px;border-top:1.5px solid rgba(241,240,233,.25)}
.next-steps b{font-size:56px;color:var(--signal);display:block;margin-bottom:14px}
.next-steps h3{font-size:22px;font-weight:600;margin-bottom:10px}
.next-steps p{font-size:16px;opacity:.8;max-width:34ch}

@media (max-width:1100px){
  .offer-grid{grid-template-columns:1fr 1fr;row-gap:30px}
  .notes-row{grid-template-columns:1fr 1fr}
  .note-xl .note-art{aspect-ratio:1;height:auto}
}
@media (max-width:1023px){
  .nav{display:none}
  .menu-toggle{display:flex;z-index:71}
  .intro{grid-template-columns:1fr;gap:50px}
  .intro-art{max-width:300px}
  .acc{flex-direction:column;height:auto;gap:10px}
  .acc-item,.acc-item[data-open]{width:100%;height:76px;border-radius:999px}
  .acc-item[data-open]{height:auto;border-radius:var(--radius)}
  .acc-tab{writing-mode:horizontal-tb;transform:none;font-size:30px}
  .acc-panel{position:relative;inset:auto}
  .acc-item:not([data-open]) .acc-panel{display:none}
  .acc-body{position:relative;grid-template-columns:1fr;padding:24px;width:auto!important}
  .acc-media{aspect-ratio:16/10}
  .cases{grid-template-columns:1fr}
  .cases-side p{position:static}
  .case{grid-template-columns:1fr;gap:20px}
  .cases-list>.btn{margin-left:0}
  .faq{grid-template-columns:1fr}
  .faq-side{position:static;order:2}
  .card{width:220px;height:280px;margin:0 -40px}
  .xp-group{grid-template-columns:1fr;gap:30px;padding:9vh 0}
  .xp-label{position:static}
  .steps-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .steps-row small{display:none}
  .scen-grid{grid-template-columns:1fr}
  .why,.values{grid-template-columns:1fr;gap:30px}
  .coords-grid{grid-template-columns:1fr 1fr}
  .next-steps{grid-template-columns:1fr}
  .page-sticker{top:13vh;right:var(--pad)}
}
@media (max-width:640px){
  .hero-rotator{font-size:clamp(46px,13.5vw,80px)}
  .reel{aspect-ratio:4/5}
  .offer-grid{grid-template-columns:1fr}
  .promises-head,.notes-head{flex-direction:column;align-items:flex-start}
  .fan{justify-content:flex-start;overflow-x:auto;padding:30px 50px;scroll-snap-type:x mandatory}
  .card{scroll-snap-align:center}
  .notes-row{grid-template-columns:1fr 1fr}
  .note-xl{grid-column:1/-1}
  .foot-grid{grid-template-columns:1fr}
  .talk-pill{padding:13px 20px}
  .giant{white-space:normal;font-size:clamp(40px,12.5vw,72px);line-height:1.08}
  .page-hero{padding-top:18vh}
  .blank{max-width:100%}
  .blank input{max-width:calc(100vw - 2*var(--pad) - 40px)}
  .process{height:auto;min-height:100svh;padding:12vh var(--pad)}
  .process-lead{margin-bottom:6vh}
  .steps-row{grid-template-columns:1fr;gap:0;text-align:left}
  .steps-row li{grid-template-columns:64px 1fr;grid-template-rows:auto auto;justify-items:start;align-items:baseline;column-gap:14px;row-gap:2px;padding:14px 0;border-top:1.5px solid rgba(23,27,30,.14)}
  .steps-row b{grid-row:1/3;font-size:44px}
  .steps-row span{font-size:17px}
  .steps-row small{display:block;font-size:14px;max-width:none}
  .process-line{display:none}
  .cta-band{padding-top:22vh}
  .cta-st{top:6vh;left:var(--pad);width:64px}
  .values-grid,.facts{grid-template-columns:1fr}
  .coords-grid{grid-template-columns:1fr}
  .filter-count{width:100%;margin-left:0}
  .madlib-left>p:first-child br{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
