/* Zeste motion direction — transform-led, responsive, and optional. */
:root{--mint:#8fd8bd;--motion-ease:cubic-bezier(.16,1,.3,1)}
html,body{overflow-x:clip}.ambient-grid{position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:radial-gradient(#05070618 .6px,transparent .6px);background-size:18px 18px}
header{background:#f3faf7ed;backdrop-filter:blur(18px);border-bottom:1px solid #05070615}.nav-wordmark{height:48px;width:115px;overflow:visible}.scroll-progress{background:var(--mint);height:4px;z-index:90}
.hero{position:relative;isolation:isolate;min-height:790px;align-items:center;grid-template-columns:1.08fr 1fr;gap:3%;padding:65px 5% 80px;background:var(--mint)}
.hero:before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#05070607 1px,transparent 1px),linear-gradient(90deg,#05070607 1px,transparent 1px);background-size:65px 65px;mask-image:linear-gradient(90deg,transparent,#000)}
.hero:after{content:'';position:absolute;width:45vw;height:45vw;right:-10%;top:-25%;border:1px solid #05070615;border-radius:50%;z-index:-1;box-shadow:0 0 0 80px #05070604,0 0 0 160px #05070603}
.hero-copy{position:relative;z-index:2}.hero-wordmark{width:100%;max-width:670px;height:auto;margin:20px 0 33px;display:block;transform-origin:center;overflow:visible}.hero-wordmark path{transform-box:fill-box;transform-origin:50% 100%}
.hero h1{font-family:'DM Sans',Arial,sans-serif;font-size:clamp(39px,4.1vw,64px);font-weight:700;letter-spacing:-.065em;line-height:1.04}.hero h1 em{font-style:normal;color:#24644f}.hero .eyebrow{font-size:10px;letter-spacing:.16em}.hero .intro{font-size:18px}.hero-detail{max-width:460px}.hero-signature{border-top:1px solid #05070630;padding-top:18px;margin-top:30px;max-width:450px}.hero-art{min-height:620px;perspective:1200px;display:flex;align-items:center;justify-content:center}
.engine{width:100%;aspect-ratio:1;position:relative;transform:rotateX(var(--engine-x,0deg)) rotateY(var(--engine-y,0deg));transition:transform .65s var(--motion-ease);isolation:isolate}
.engine-halo{position:absolute;inset:9%;border-radius:50%;background:radial-gradient(circle,#f3faf7 0%,#c8efdf 45%,transparent 72%);filter:blur(12px);opacity:.75}
.engine-orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:#050706}.engine-orbit .orbit-dashed{fill:none;stroke:#05070642;stroke-dasharray:1 10;stroke-width:2}.orbit-track{fill:none;stroke:#05070624;stroke-width:1}.orbit-spin{transform-origin:300px 300px;animation:engine-orbit 22s linear infinite}.orbit-spin.reverse{animation-direction:reverse;animation-duration:30s}.orbit-spin path{fill:none;stroke:#050706;stroke-width:2;stroke-linecap:round}
.engine-center{position:absolute;inset:24%;border-radius:50%;background:#050706;color:var(--mint);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 24px 55px #05070630,inset 0 0 0 1px #ffffff20;overflow:hidden;transform:translateZ(30px)}
.engine-overline{font-size:8px;letter-spacing:.15em;position:absolute;top:11%;z-index:2}.engine-center .photo-frame{position:absolute;inset:15% 0 30%;height:auto;width:100%;border-radius:0;transform:none!important;box-shadow:none;background:transparent}.engine-center .burger{width:100%;height:100%;opacity:.94}.engine-center strong{position:absolute;bottom:10%;font:700 clamp(22px,2.4vw,38px)/.95 'DM Sans',sans-serif;letter-spacing:-.06em;text-align:center}
.engine-chip{position:absolute;background:#f3faf7;border:1px solid #05070617;border-radius:14px;box-shadow:0 15px 35px #05070617;display:flex;align-items:center;gap:12px;padding:17px 19px;animation:chip-hover 6s ease-in-out infinite;z-index:3;will-change:transform}.engine-chip small{font-size:8px;letter-spacing:.12em;display:block;color:#24644f;margin-bottom:3px}.engine-chip b{font-size:13px;letter-spacing:-.02em;white-space:nowrap}.chip-icon{display:grid;place-items:center;width:34px;height:34px;background:var(--mint);border-radius:50%;font-size:25px}.chip-menu{left:-3%;top:16%;transform:rotate(-6deg)}.chip-margin{right:-6%;bottom:11%;animation-delay:-2s}.chip-margin svg{width:54px;height:35px;fill:none;stroke:#24644f;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chip-ops{left:9%;bottom:4%;animation-delay:-4s;background:#050706;color:var(--mint)}.chip-ops small{color:#8fd8bd99}.activity-light{width:8px;height:8px;background:var(--mint);border-radius:50%;box-shadow:0 0 0 7px #8fd8bd15;animation:signal-breathe 2.8s ease-in-out infinite}.engine-caption{position:absolute;top:0;right:9%;font-size:9px;letter-spacing:.15em;transform:rotate(7deg)}
.motion-band{background:#050706;color:var(--mint);border:0;padding:14px 0;transform:rotate(-1.2deg) scale(1.015);position:relative;z-index:3}.ticker{background:transparent!important;color:var(--mint)!important}.ticker i{color:var(--mint)}.motion-control{position:fixed;bottom:22px;right:22px;z-index:80;border:1px solid #8fd8bd80;background:#050706;color:var(--mint);box-shadow:0 6px 25px #05070630;width:44px;height:44px;border-radius:50%;font-size:15px}.platforms{padding-top:37px;padding-bottom:37px}
.agency{background:#050706;overflow:clip;min-height:610px}.agency-visual{position:relative;background:#050706;padding:60px 5%;perspective:1100px;display:flex;flex-direction:column;justify-content:center;isolation:isolate}.agency-visual:before{content:'';position:absolute;inset:10%;z-index:-1;border:1px solid #8fd8bd25;border-radius:50%;box-shadow:0 0 0 45px #8fd8bd08,0 0 0 90px #8fd8bd04}.agency-copy{background:#050706;color:#f3faf7;padding:65px 9% 65px 6%;align-self:center}.agency-copy .eyebrow,.agency-copy h2 em,.agency-copy .initials b{color:var(--mint)}.agency-copy h2{font-family:'DM Sans',sans-serif;font-weight:700;letter-spacing:-.065em}.agency-copy h2 em{font-style:normal}.agency-copy .initials{border-color:#8fd8bd40}.agency-visual>p{color:#8fd8bd90;font-size:9px;margin-top:35px;text-align:center}.card-stage{position:relative;transform-style:preserve-3d;transform:rotateX(var(--card-x,6deg)) rotateY(var(--card-y,-12deg)) rotateZ(var(--card-z,-6deg));transition:transform .65s var(--motion-ease);will-change:transform}.card-stage>svg{width:100%;height:auto;display:block;transform:none!important;filter:drop-shadow(0 35px 25px #0008);position:relative;z-index:2}.card-shadow{position:absolute;inset:12% 5%;background:#8fd8bd30;border:1px solid #8fd8bd50;border-radius:20px;transform:translate(18px,20px) translateZ(-35px)}.card-glint{position:absolute;inset:7.5% 7.5% 9% 6%;z-index:3;border-radius:22px;pointer-events:none;background:linear-gradient(115deg,transparent 20%,#ffffff60 46%,#ffffff08 53%,transparent 70%);background-size:250% 100%;background-position:var(--glint,100%) 0;mix-blend-mode:soft-light;opacity:.65}
.pillars{background:#f3faf7}.section-head h2{font-family:'DM Sans',sans-serif;font-weight:700;letter-spacing:-.065em}.section-head h2 em{font-style:normal}.approach-trio p{transition:transform .4s var(--motion-ease),background .4s}.approach-trio p:hover{transform:translateY(-6px);background:#8fd8bd24}.expert-tab{transition:background .25s,transform .25s}.expert-tab:hover{transform:translateX(5px)}.expert-panel:not([hidden]){animation:panel-enter .55s var(--motion-ease) both}.chart-card{border-radius:18px;overflow:hidden;box-shadow:0 20px 70px #0002;transition:transform .5s var(--motion-ease)}.chart-card:hover{transform:translateY(-7px)}.pricing article{transition:transform .4s var(--motion-ease),box-shadow .4s}.pricing article:hover{transform:translateY(-8px);box-shadow:0 25px 60px #05070612}.button{transition:transform .3s var(--motion-ease),box-shadow .3s,background .3s;position:relative;overflow:hidden}.button:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#ffffff25 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}.button:hover:after{transform:translateX(120%)}.button:hover{box-shadow:0 10px 30px #05070625}.button span{transition:transform .3s}
@keyframes engine-orbit{to{transform:rotate(360deg)}}@keyframes chip-hover{0%,100%{translate:0 0}50%{translate:0 -13px}}@keyframes signal-breathe{50%{box-shadow:0 0 0 12px #8fd8bd00}}@keyframes panel-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes chart-dot{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@media(max-width:1050px){.hero{min-height:680px;padding-top:40px}.hero-art{min-height:470px}.engine-chip{padding:12px;gap:8px}.engine-chip b{font-size:11px}.chip-margin svg{display:none}.agency{min-height:500px}}
@media(max-width:760px){.hero{display:flex;flex-direction:column;gap:10px;min-height:0;padding:35px 6% 40px}.hero-copy{width:100%}.hero-wordmark{max-width:100%;width:100%;margin:22px 0 26px}.hero h1{font-size:clamp(36px,9vw,54px)}.hero-art{min-height:0;width:100%;max-width:440px;padding:20px 0}.engine{width:95%}.engine-center strong{font-size:26px}.engine-chip{padding:11px;border-radius:10px;gap:7px}.engine-chip b{font-size:10px}.engine-chip small{font-size:7px}.chip-icon{width:27px;height:27px;font-size:20px}.chip-menu{left:-2%;top:15%}.chip-margin{right:-2%;bottom:9%}.chip-ops{left:5%;bottom:0}.engine-caption{font-size:7px;top:2%}.engine-overline{font-size:6px}.agency{display:flex;flex-direction:column;min-height:0}.agency-visual{padding:45px 6% 15px}.agency-copy{padding:28px 7% 50px;width:100%}.card-stage{max-width:530px;margin:auto}.agency-visual>p{margin:22px 0 0}.motion-control{bottom:14px;right:14px;width:40px;height:40px}.section-head h2{font-size:42px}.platforms{padding-top:27px;padding-bottom:27px}.chart-card:hover,.pricing article:hover{transform:none}}

/* ===== Motion v2 — every hidden or initial state is scoped to html.motion-ready ===== */
:root{--ease-io:cubic-bezier(.76,0,.24,1)}
html.intro-lock{overflow:hidden}
.zeste-intro{position:fixed;inset:0;z-index:300;background:#050706;color:var(--mint);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:0 16px}
.intro-meta{display:flex;justify-content:space-between;gap:16px;width:min(78vw,640px);font-size:10px;letter-spacing:.18em;font-weight:600}.intro-count{font-variant-numeric:tabular-nums;font-weight:700}

/* Hero: entrance choreography, then a parallax exit on scroll. */
.hero-copy .eyebrow,.hero .intro,.hero-detail,.hero-actions,.hero-signature{transition:opacity .9s var(--motion-ease),transform 1.1s var(--motion-ease)}
.hero .intro{transition-delay:.75s}.hero-detail{transition-delay:.85s}.hero-actions{transition-delay:.95s}.hero-signature{transition-delay:1.05s}
.motion-ready .hero:not(.in) :is(.hero-copy .eyebrow,.intro,.hero-detail,.hero-actions,.hero-signature){opacity:0;transform:translateY(34px)}
.engine{transition:transform .65s var(--motion-ease),scale 1.6s var(--motion-ease) .2s,rotate 1.6s var(--motion-ease) .2s,opacity 1s ease .2s}
.motion-ready .hero:not(.in) .engine{scale:.55;rotate:-35deg;opacity:0}
.engine-chip{transition:scale .9s cubic-bezier(.34,1.56,.64,1),transform .7s var(--motion-ease)}.chip-menu{--rot:-6deg;transition-delay:1.1s,0s}.chip-margin{transition-delay:1.25s,0s}.chip-ops{transition-delay:1.4s,0s}
.motion-ready .engine-chip{transform:translate3d(var(--px,0px),var(--py,0px),40px) rotate(var(--rot,0deg))}
.motion-ready .hero:not(.in) .engine-chip{scale:0}
.motion-ready .engine-center{translate:var(--px,0px) var(--py,0px);transition:translate .7s var(--motion-ease)}
.motion-ready .engine-caption{translate:var(--px,0px) var(--py,0px)}
.motion-ready .hero-copy{transform:translateY(calc(var(--hx,0)*-90px));opacity:calc(1 - var(--hx,0)*.7)}
.motion-ready .hero-art{transform:translateY(calc(var(--hx,0)*160px)) rotate(calc(var(--hx,0)*18deg)) scale(calc(1 - var(--hx,0)*.22))}
.motion-ready .engine-orbit{rotate:calc(var(--hx,0)*200deg)}

/* Split titles: words rise out of a mask. */
.split .w{display:inline-block;overflow:clip;overflow-clip-margin:.14em;vertical-align:bottom;padding:0 .05em .1em;margin:0 -.05em -.1em}
.split .w>span{display:inline-block;transform-origin:0 100%;transition:transform 1.15s var(--motion-ease) calc(var(--i,0)*55ms + var(--d0,0ms))}
.hero h1{--d0:420ms}
.motion-ready .split:not(.in) .w>span{transform:translateY(118%) rotate(7deg)}

/* Scroll-filled paragraphs. */
.fill .fw{transition:opacity .35s ease}
.motion-ready .fill .fw:not(.lit){opacity:.16}

/* Generic reveals. The long staggered transition only lives until .settled, so hovers stay snappy. */
[data-reveal].in:not(.settled){transition:opacity 1s var(--motion-ease) calc(var(--i,0)*110ms),transform 1.2s var(--motion-ease) calc(var(--i,0)*110ms)}
.motion-ready [data-reveal=up]:not(.in){opacity:0;transform:translateY(32px)}
.motion-ready [data-reveal=pop]:not(.in){opacity:0;transform:translateY(70%) scale(.8)}
.motion-ready [data-reveal=flip]:not(.in){opacity:0;transform:perspective(800px) rotateX(-70deg) translateY(40px);transform-origin:50% 0}
.motion-ready [data-reveal=rise]:not(.in){opacity:0;transform:translateY(110px) rotate(-3deg) scale(.94)}
.motion-ready [data-reveal=rise]:nth-child(even):not(.in){transform:translateY(110px) rotate(3deg) scale(.94)}

/* Dark sections open from a rounded card into full bleed as they arrive. */
.motion-ready :is(.agency,.performance,.contact){clip-path:inset(0 calc((1 - var(--enter,1))*5%) round calc((1 - var(--enter,1))*64px) calc((1 - var(--enter,1))*64px) 0 0)}

/* Agency card swings in, then keeps the pointer tilt. */
.motion-ready .card-stage{rotate:calc(max(0,.5 - var(--card-scroll,.5))*80deg);translate:0 calc(max(0,.5 - var(--card-scroll,.5))*260px);scale:calc(1 - max(0,.5 - var(--card-scroll,.5))*.6)}

/* Ticker: a black band crossed by a mint one, driven by scroll velocity. */
.motion-band{background:transparent;padding:30px 0;transform:none;border:0}
.motion-band>.ticker:not(.ticker-cross){background:#050706!important;padding:14px 0;transform:rotate(-1.6deg) scale(1.03)}
.ticker-cross{position:absolute;left:0;right:0;top:50%;translate:0 -50%;transform:rotate(2.2deg) scale(1.05);background:var(--mint)!important;color:#050706!important;padding:11px 0;z-index:-1;border-block:2px solid #050706}
.ticker-cross i{color:#050706!important}
.motion-ready .ticker-track{animation:none;will-change:transform}

/* Charts draw with the scroll; donut slices sweep in. */
.motion-ready .line-chart polyline{stroke-dasharray:100px 200px;stroke-dashoffset:calc((1 - var(--draw,1))*100px)}
.line-chart circle{transform-box:fill-box;transform-origin:center;transition:opacity .3s,scale .5s cubic-bezier(.34,1.56,.64,1)}
.motion-ready .line-chart circle:not(.on){opacity:0;scale:.2}
.donut-wrap circle{transition:stroke-dasharray 1.2s var(--motion-ease) calc(var(--i,0)*.15s + .25s)}
.motion-ready .chart-card:not(.in) .donut-wrap circle{stroke-dasharray:0 100}
.motion-ready .chart-card.in .donut-wrap circle{stroke-dasharray:var(--d)}
.donut-wrap svg text{font-variant-numeric:tabular-nums}

/* Spotlight that follows the pointer on cards. */
.price-card,.chart-card,.approach-trio p{position:relative;isolation:isolate}
.price-card:after,.chart-card:after,.approach-trio p:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(380px circle at var(--sx,-999px) var(--sy,-999px),#8fd8bd55,transparent 62%);opacity:0;transition:opacity .4s}
.price-digital:after{background:radial-gradient(380px circle at var(--sx,-999px) var(--sy,-999px),#8fd8bd30,transparent 62%)}
.price-card:hover:after,.chart-card:hover:after,.approach-trio p:hover:after{opacity:1}
.price-amount{font-variant-numeric:tabular-nums}

/* Magnetic controls. */
.button.magnetic{transition:translate .45s var(--motion-ease),transform .3s var(--motion-ease),box-shadow .3s,background .3s}
header nav a.magnetic,.motion-control.magnetic{transition:translate .45s var(--motion-ease)}

/* Contact spark turns with the scroll. */
.contact-spark{width:max-content}
.motion-ready .contact-spark{rotate:var(--spin,0deg);transition:rotate .2s linear}

/* Giant footer wordmark. */
footer{position:relative;overflow:hidden}.footer-bottom{order:11}
.footer-giant{order:10;width:100%;margin-top:40px;color:var(--mint);line-height:0}
.footer-giant-mark{width:100%;height:auto;display:block;overflow:hidden}
.footer-giant-mark path{transform-box:fill-box;transform-origin:50% 100%}
.motion-ready .footer-giant-mark path{transform:translateY(calc(max(0,1 - var(--enter,1)*1.5 + var(--i,0)*.1)*125%)) rotate(calc(max(0,1 - var(--enter,1)*1.5 + var(--i,0)*.1)*10deg))}

/* Cursor follower (fine pointers only; the native cursor stays). */
.cursor{position:fixed;inset:0;pointer-events:none;z-index:250;mix-blend-mode:difference;display:none}
@media(hover:hover) and (pointer:fine){.motion-ready .cursor.on{display:block}}
.cursor i,.cursor span{position:absolute;left:0;top:0;border-radius:50%}
.cursor i{width:8px;height:8px;margin:-4px;background:#fff;transform:translate3d(var(--x),var(--y),0)}
.cursor span{width:42px;height:42px;margin:-21px;border:1.5px solid #fff;transform:translate3d(var(--rx),var(--ry),0);transition:scale .35s var(--motion-ease),background .25s}
.cursor.hover span{scale:1.75;background:#fff}.cursor.hover i{opacity:0}.cursor.text span{scale:.45}.cursor.down span{scale:.8}

@keyframes engine-orbit{to{transform:rotate(360deg)}}@keyframes chip-hover{0%,100%{translate:0 0}50%{translate:0 -13px}}@keyframes signal-breathe{50%{box-shadow:0 0 0 12px #8fd8bd00}}@keyframes panel-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media(max-width:760px){.motion-band{padding:22px 0}.motion-ready :is(.agency,.performance,.contact){clip-path:inset(0 calc((1 - var(--enter,1))*3%) round calc((1 - var(--enter,1))*36px) calc((1 - var(--enter,1))*36px) 0 0)}.motion-ready .hero-art{transform:translateY(calc(var(--hx,0)*60px)) scale(calc(1 - var(--hx,0)*.12))}.motion-ready .card-stage{rotate:calc(max(0,.5 - var(--card-scroll,.5))*40deg);translate:0 calc(max(0,.5 - var(--card-scroll,.5))*120px)}.footer-giant{margin-top:28px}}

.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}.motion-paused .engine,.motion-paused .card-stage{transform:none!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.engine,.card-stage{transform:none!important}}

/* Intro progress bar */
.intro-bar{display:block;width:min(78vw,640px);height:2px;background:var(--mint);transform:scaleX(0);transform-origin:left}
/* Hero letters: squash anchored on the baseline (local y-min, the group is flipped). */
.hero-wordmark path{transform-origin:50% 0%}
/* Delivery run of the "e" */
.ride{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:6}
.ride-trail{fill:none;stroke:#050706;stroke-linecap:round;stroke-linejoin:round}
.ride-rider{fill:#050706}
.ride-box{fill:#050706;stroke:var(--mint);stroke-width:2;transform-box:fill-box;transform-origin:50% 100%;scale:0;transition:scale .45s cubic-bezier(.34,1.56,.64,1)}
.ride-rider.loaded .ride-box{scale:1}
.ride-puff{fill:#f3faf7;transform-box:fill-box;transform-origin:center}
.ride-tag{position:absolute;z-index:7;pointer-events:none;white-space:nowrap;background:#050706;color:var(--mint);font-size:12px;font-weight:700;letter-spacing:-.01em;padding:7px 12px;border-radius:999px;box-shadow:0 10px 25px #05070630}
.zeste-intro{will-change:transform}.intro-inner{display:flex;flex-direction:column;align-items:center;gap:26px}
/* Hero photo fills the whole disc, fades into black for the overline and the tagline, and drifts slowly. */
.engine-center .photo-frame{inset:8% 0 27%}
.engine-center .photo-frame:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#050706 0%,#05070600 22%,#05070600 72%,#050706 100%),linear-gradient(90deg,#050706 0%,#05070600 14%,#05070600 86%,#050706 100%);pointer-events:none}
.engine-center .burger{width:100%;height:100%;object-fit:cover;object-position:50% 55%;opacity:1;transform-origin:50% 55%;animation:burger-drift 16s ease-in-out infinite alternate}
.engine-center .engine-overline,.engine-center strong{z-index:2}
@keyframes burger-drift{from{transform:scale(1.02)}to{transform:scale(1.09) translate(-1.5%,1%)}}
@media(max-width:760px){.engine-center .photo-frame{inset:6% 0 34%}.engine-center strong{font-size:22px;bottom:9%}}