/* ===== Motion system ===== */
:root{--out:cubic-bezier(.16,1,.3,1);--io:cubic-bezier(.77,0,.18,1)}

/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
html{scroll-behavior:auto}
html.is-loading,html.is-loading body{overflow:hidden}

/* ---------- Intro curtain ---------- */
.curtain{position:fixed;inset:0;z-index:1000;pointer-events:none;display:none}
.js .curtain{display:block;pointer-events:auto}
.is-ready .curtain{display:none}
.curtain-panel{position:absolute;inset:0;will-change:transform}
.curtain-panel::after{content:"";position:absolute;left:-15%;right:-15%;top:calc(100% - 1px);height:22vh;background:inherit;border-radius:0 0 50% 50%;transform-origin:50% 0;transform:scaleY(0)}
.cp-red{background:var(--red)}
.cp-dark{background:#0b0b0b;display:flex;align-items:center;justify-content:center}
.is-leaving .cp-dark{animation:lift 1.25s var(--io) forwards}
.is-leaving .cp-dark::after{animation:bulge 1.25s var(--io) forwards}
.is-leaving .cp-red{animation:lift 1.25s var(--io) .14s forwards}
.is-leaving .cp-red::after{animation:bulge 1.25s var(--io) .14s forwards}
@keyframes lift{to{transform:translateY(-125%)}}
@keyframes bulge{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(.15)}}

/* ---------- Hero reveal ---------- */
.hero-media{position:absolute;inset:0;will-change:transform}
.hero-bg{will-change:transform}
.js .hero-bg{transform:scale(1.28)}
.is-revealed .hero-bg{transform:scale(1);transition:transform 2.6s var(--out)}
.line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.line>span{display:inline-block;will-change:transform}
.js .hero .line>span,.js .cta .line>span{transform:translateY(115%) rotate(4deg);transform-origin:0 0}
.is-revealed .hero .line>span{transform:none;transition:transform 1.5s var(--out)}
.is-revealed .hero h1 .line:nth-child(1)>span{transition-delay:.35s}
.is-revealed .hero h1 .line:nth-child(2)>span{transition-delay:.48s}
.is-revealed .hero .sub .line>span{transition-delay:.68s}
.js .intro-nav{opacity:0;transform:translateY(-18px)}
.is-revealed .intro-nav{opacity:1;transform:none;transition:opacity 1s var(--out),transform 1s var(--out)}
.js .tagline,.js .hero-fade,.js .scroll-hint{opacity:0}
.is-revealed .tagline,.is-revealed .hero-fade,.is-revealed .scroll-hint{opacity:1;transition:opacity 1.4s ease .9s}
.hero-title{will-change:transform,opacity}

.scroll-hint{position:absolute;right:var(--pad);bottom:22px;width:1px;height:56px;background:rgba(255,255,255,.25);overflow:hidden}
.scroll-hint i{position:absolute;left:0;top:0;width:1px;height:40%;background:#fff;animation:hint 2s var(--io) infinite}
@keyframes hint{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}

/* ---------- Scroll reveals ---------- */
.js [data-reveal]{opacity:0;transform:translateY(60px);transition:opacity 1.2s var(--out),transform 1.2s var(--out)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal=clip]{transform:none;clip-path:inset(22% 0 0 0 round 15px);transition:clip-path 1.6s var(--out),opacity .9s ease}
.js [data-reveal=clip].in{clip-path:inset(0 0 0 0 round 15px)}
.para{will-change:translate,scale}
.js [data-reveal=clip] .para{scale:1.22;transition:scale 2s var(--out)}
.js [data-reveal=clip].in .para{scale:1}
.js .cta-bg{scale:1.25;transition:scale 2.4s var(--out)}
.js .cta.in .cta-bg{scale:1}
.cta.in .line>span{transform:none!important;transition:transform 1.4s var(--out)}
.cta.in .line:nth-child(1)>span{transition-delay:.25s}
.cta.in .line:nth-child(2)>span{transition-delay:.38s}
.js .cta .btn{opacity:0;transform:translateY(20px)}
.js .cta.in .btn{opacity:1;transform:none;transition:opacity 1s ease .6s,transform 1s var(--out) .6s,translate .5s var(--out)}

/* staggered children in service text */
.js .text[data-reveal]{transform:none;opacity:1}
.js .text[data-reveal]>*{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--out),transform 1.1s var(--out),translate .5s var(--out)}
.js .text[data-reveal].in>*{opacity:1;transform:none}
.text.in>*:nth-child(2){transition-delay:.08s,.08s,0s}
.text.in>*:nth-child(3){transition-delay:.16s,.16s,0s}
.text.in>*:nth-child(4){transition-delay:.24s,.24s,0s}

/* scroll-scrubbed words */
.words .w{opacity:.14;transition:opacity .25s linear}

/* ---------- Tabs pill ---------- */
.tabs{position:relative}
.tab{position:relative;z-index:1;transition:color .4s var(--out)}
.js .tab.active{background:none}
.tab-pill{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:27px;background:#2f2f2f;transition:transform .7s var(--out),width .7s var(--out)}
.no-js .tab-pill,html:not(.js) .tab-pill{display:none}

/* ---------- Buttons ---------- */
.magnetic{transition:translate .5s var(--out),transform .15s,filter .15s}
.btn img{transition:transform .5s var(--out)}
.btn:hover img{transform:translate(3px,-3px)}

/* ---------- Custom cursor ---------- */
/* invert effect: the whole cursor layer blends with the page (children must not create their own layer) */
.cursor{display:none;position:fixed;left:0;top:0;width:0;height:0;z-index:1100;mix-blend-mode:difference;pointer-events:none}
.has-cursor .cursor{display:block}
.has-cursor,.has-cursor *{cursor:none!important}
.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;pointer-events:none;border-radius:50%}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff}
.cursor-ring{width:38px;height:38px;margin:-19px 0 0 -19px}
.cursor-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid #fff;transition:transform .45s var(--out),background .3s,border-color .3s}
.cursor.is-hover .cursor-ring::before{transform:scale(1.35);border-color:#fff}

/* Images: not selectable, not draggable, no long-press menu */
img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.cursor.is-down .cursor-ring::before{transform:scale(.8)}
.cursor.is-hidden{opacity:0}

/* ---------- Footer ---------- */
.f-word{overflow:hidden;padding-bottom:.04em}
.f-word .ch{display:inline-block;will-change:transform}
.f-word .sp{display:inline-block;width:.24em}
.js .footer .f-word .ch{transform:translateY(110%)}
.footer.in .f-word .ch{transform:none;transition:transform 1.4s var(--out);transition-delay:calc(var(--i) * 45ms + .15s)}
.js .footer .f-row,.js .footer .f-legal{opacity:0;transform:translateY(30px)}
.footer.in .f-row,.footer.in .f-legal{opacity:1;transform:none;transition:opacity 1.2s var(--out),transform 1.2s var(--out)}
.footer.in .f-legal{transition-delay:.6s}
.f-bg{will-change:transform;transform:scale(1.15);transition:transform 2.4s var(--out)}
.footer.in .f-bg{transform:scale(1)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .curtain{display:none!important}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js [data-reveal],.js .text[data-reveal]>*,.js .intro-nav,.js .tagline,.js .hero-fade,.js .footer .f-row,.js .footer .f-legal,.js .cta .btn{opacity:1!important;transform:none!important;clip-path:none!important}
  .js .hero .line>span,.js .cta .line>span,.js .footer .f-word .ch,.js .hero-bg{transform:none!important}
  .para,.cta-bg{scale:1!important}
  .words .w{opacity:1!important}
}

/* ---------- Works page header reveal ---------- */
.js .page-head .line>span{transform:translateY(115%) rotate(4deg);transform-origin:0 0}
.is-revealed .page-head .line>span{transform:none;transition:transform 1.5s var(--out)}
.is-revealed .page-head h1 .line:nth-child(1)>span{transition-delay:.35s}
.is-revealed .page-head h1 .line:nth-child(2)>span{transition-delay:.48s}
.is-revealed .page-head .sub .line>span{transition-delay:.68s}

/* ---------- Page exit curtain ---------- */
.page-exit{position:fixed;inset:0;z-index:1200;pointer-events:all}
.page-exit i{position:absolute;inset:0;transform:translateY(100%);transition:transform .85s var(--io)}
.page-exit .pe-red{background:var(--red)}
.page-exit .pe-dark{background:#0b0b0b;transition-delay:.1s}
.page-exit.on i{transform:none}
@media (prefers-reduced-motion:reduce){.page-exit{display:none}}
/* ---------- Visitor counter (hero, bottom-left) ---------- */
.visits{position:absolute;left:clamp(18px,2.2vw,36px);bottom:clamp(18px,2.2vw,32px);z-index:2;color:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:2px;pointer-events:none;text-shadow:0 1px 14px rgba(0,0,0,.25);opacity:0;transform:translateY(14px);transition:opacity 1.1s var(--out),transform 1.1s var(--out)}
.visits.show{opacity:1;transform:none}
.v-num{font-family:'Petit Formal Script',cursive;font-weight:400;font-size:clamp(28px,2.3vw,42px);line-height:1.25;letter-spacing:0}
.v-label{font-family:'Manrope',sans-serif;font-size:14px;font-weight:500;letter-spacing:0;opacity:.85}
@media (max-width:760px){
  .hero-inner{padding-bottom:70px}
  .visits{left:18px;bottom:18px}
  .v-num{font-size:26px}
}
@media (prefers-reduced-motion:reduce){.visits{opacity:1;transform:none}}