/* self-hosted fonts (Syne, Instrument Sans) */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/instrument-sans-latin-ext.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:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/instrument-sans-latin.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:'Syne';font-style:normal;font-weight:600 800;font-display:swap;src:url(../fonts/syne-latin-ext.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:'Syne';font-style:normal;font-weight:600 800;font-display:swap;src:url(../fonts/syne-latin.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}

/* ============================================================
   CACHE ME — tokens
   ============================================================ */
:root{
  --ink:#0A0616;
  --ink-2:#130B29;
  --violet:#5B00F7;
  --violet-2:#8B2FF5;
  --orchid:#C13FFF;
  --paper:#ECE6FB;
  --paper-ink:#1A0F35;
  --text:#F4F1FB;
  --muted:#B4AAD6;
  --line:rgba(255,255,255,.12);
  --grad:linear-gradient(120deg,var(--violet),var(--violet-2) 55%,var(--orchid));
  --display:'Syne','Instrument Sans',system-ui,sans-serif;
  --body:'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --ease:cubic-bezier(.16,.8,.24,1);
  --gutter:clamp(20px,4vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.02}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
img{display:block;max-width:100%}
.skip{position:absolute;left:16px;top:-64px;z-index:100;padding:12px 18px;border-radius:12px;background:#fff;color:var(--ink);font-weight:600;transition:top .2s}
.skip:focus{top:12px}
main{overflow-x:clip}
:focus-visible{outline:2px solid var(--orchid);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border:0;border-radius:100px;background:var(--grad);color:#fff;font-weight:600;font-size:16px;cursor:pointer;box-shadow:0 16px 40px -14px rgba(139,47,245,.7);transition:transform .35s var(--ease),box-shadow .35s}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn-line{background:transparent;box-shadow:none;border:1px solid var(--line)}
.btn-sm{padding:10px 18px;font-size:14px;box-shadow:none}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 24px);white-space:nowrap;padding:8px 8px 8px 22px;background:rgba(10,6,22,.65);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border:1px solid var(--line);border-radius:100px}
.brand{display:flex;align-items:center;min-height:44px}
.brand img{height:26px;width:auto}
.links{display:flex;gap:2px;margin:0 8px 0 18px}
.links a{padding:9px 14px;font-size:14.5px;font-weight:500;color:var(--muted);border-radius:100px;transition:color .2s,background .2s}
.toggle{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;position:relative;cursor:pointer}
.toggle i{position:absolute;left:15px;width:14px;height:1.5px;background:var(--text);transition:transform .3s}
.toggle i:nth-child(1){top:18px}.toggle i:nth-child(2){top:24px}
.nav.open .toggle i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav.open .toggle i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
@media (max-width:820px){
  .nav{left:14px;right:14px;top:12px;transform:none;justify-content:space-between;padding:8px 8px 8px 18px}
  .nav .btn-sm{display:none}
  .toggle{display:block}
  .links{position:fixed;top:72px;left:14px;right:14px;flex-direction:column;margin:0;padding:8px;background:rgba(19,11,41,.75);border:1px solid var(--line);border-radius:22px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility .25s}
  .nav.open .links{opacity:1;visibility:visible;transform:none}
  .links a{padding:14px 16px;font-size:17px}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:130px 0 90px;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;pointer-events:none}
.hero-bg .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse 70% 70% at 70% 40%,#000 20%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 70% 40%,#000 20%,transparent 80%)}
.hero-bg .glow{position:absolute;width:900px;height:900px;left:var(--gx,68%);top:var(--gy,38%);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(139,47,245,.42),transparent 62%);filter:blur(30px)}
.hero-inner{position:relative}
.hero-title{font-size:clamp(31px,6.3vw,104px);line-height:1;letter-spacing:-.04em;margin-bottom:34px}
.hero-title .ln{display:block;white-space:nowrap}
.ch{display:inline-block;white-space:pre;text-align:center;color:color-mix(in srgb,var(--orchid) calc(var(--h,0)*100%),#fff)}
.ch.miss{color:var(--violet-2);opacity:.7;clip-path:inset(-25% 0 -25% 0)}
.hero-sub{max-width:46ch;color:var(--muted);font-size:clamp(17px,1.5vw,20px);margin-bottom:38px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
.js .hero-intro{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .hero.ready .hero-intro{opacity:1;transform:none}
.js .hero.ready .hero-intro.d2{transition-delay:.12s}

/* the stack — the logo's three layers, blown up */
.stack-stage{--s:min(17vw,250px);position:absolute;right:-2vw;top:50%;width:min(44vw,640px);aspect-ratio:1;transform:translateY(-46%);display:grid;place-items:center;perspective:1500px;z-index:-1;pointer-events:none}
.stack-stage::before{content:'';position:absolute;width:calc(var(--s)*1.45);aspect-ratio:1;border:1px solid rgba(255,255,255,.08);border-radius:50%;background:radial-gradient(circle,rgba(139,47,245,.16),transparent 64%)}
.stack-orbit{position:absolute;width:calc(var(--s)*2.4);aspect-ratio:1;border:1px dashed rgba(255,255,255,.1);border-radius:50%;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stack-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--grad);top:-4.5px;left:50%;box-shadow:0 0 16px rgba(139,47,245,.7)}
.stack-dot.w{background:#fff;top:auto;bottom:-4.5px;box-shadow:0 0 14px rgba(255,255,255,.5)}
.stack-3d{position:relative;width:var(--s);height:var(--s);z-index:2;transform-style:preserve-3d;transform:rotateX(calc(58deg + var(--ty,0deg))) rotateZ(calc(45deg + var(--tx,0deg)));animation:float 7s ease-in-out infinite}
@keyframes float{50%{translate:0 calc(var(--s)*-.055)}}
.layer{position:absolute;inset:0;border-radius:calc(var(--s)*.085);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -20px rgba(20,0,50,.5);transform:translateZ(calc(var(--i)*var(--s)*var(--gk,0))) scale(var(--sc,1))}
.layer::after{content:'';position:absolute;inset:calc(var(--s)*.054);border-radius:calc(var(--s)*.054);border:1px solid rgba(255,255,255,.08)}
.l1{--i:0;--sc:1;background:linear-gradient(160deg,color-mix(in srgb,var(--violet) 35%,rgba(255,255,255,.075)),transparent)}
.l2{--i:1;--sc:.86;background:linear-gradient(160deg,color-mix(in srgb,var(--violet-2) 40%,rgba(255,255,255,.075)),transparent)}
.l3{--i:2;--sc:.7;background:linear-gradient(160deg,color-mix(in srgb,var(--orchid) 48%,rgba(255,255,255,.075)),transparent)}
@media (max-width:820px){.stack-stage{--s:40vw;width:120vw;right:-30vw;top:auto;bottom: -46px;vw;transform:none;opacity:.6}.stack-dot{display:none}}

/* ============================================================
   MARQUEE
   ============================================================ */
.band{background:var(--grad);color:#fff;overflow:hidden;padding:12px 0;transform:rotate(0deg);margin:-14px -20px 0;position:relative;z-index:2}
.band-track{display:flex;width:max-content;animation:slide 32s linear infinite}
.band-item{display:flex;align-items:center;gap:26px;padding-right:26px;font-family:var(--display);font-weight:800;font-size:clamp(22px,2.8vw,38px);letter-spacing:-.03em;white-space:nowrap}
.band-item img{width:.9em;height:.9em;filter:brightness(0) invert(1)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================================================
   SERVICES (light)
   ============================================================ */
.services{background:var(--paper);color:var(--paper-ink);padding:clamp(100px,12vw,170px) 0 clamp(90px,10vw,150px);margin-top:-14px}
.sec-head{max-width:900px;margin-bottom:clamp(44px,6vw,80px)}
.sec-head h2{font-size:clamp(30px,4.5vw,64px);line-height:1.05}
.sec-head p{margin-top:22px;max-width:52ch;font-size:19px;opacity:.75}
.svc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px);align-items:start}
.svc{border-top:1.5px solid rgba(26,15,53,.18)}
.svc:last-child{border-bottom:1.5px solid rgba(26,15,53,.18)}
.svc-head{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:26px 0;background:none;border:0;text-align:left;cursor:pointer}
.svc-title{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.6vw,64px);letter-spacing:-.03em;line-height:1;color:rgba(26,15,53,.55);transition:color .35s,transform .45s var(--ease)}
.svc-tags{font-size:15px;color:rgba(26,15,53,.7);text-align:right}
.svc.on .svc-title{color:var(--paper-ink)}
.svc.on .svc-title{transform:translateX(12px)}
.svc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.svc.on .svc-body{grid-template-rows:1fr}
.svc-body>div{overflow:hidden}
.svc-body p{padding:0 0 28px 12px;max-width:44ch;font-size:19px}
.panel{position:sticky;top:110px;aspect-ratio:1/1.05;border-radius:32px;background:radial-gradient(120% 90% at 20% 0%,#7a24f5 0%,#3a0ea0 45%,var(--ink) 100%);overflow:hidden;box-shadow:0 50px 90px -40px rgba(58,14,160,.8)}
.scene{position:absolute;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.scene.on{opacity:1;visibility:visible}
@media (max-width:900px){.svc-grid{grid-template-columns:1fr}#panel{display:none}.panel{position:relative;top:auto;aspect-ratio:4/3;margin-top:8px;border-radius:26px}.svc-body .panel.in-row{margin:2px 0 26px 12px;box-shadow:none}.svc-body p{padding-bottom:18px}.brandset{width:auto;height:66%}.fan{width:auto;height:72%}.svc-tags{display:none}}

/* scene: web */
.win{width:72%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:18px;overflow:hidden;backdrop-filter:blur(6px)}
.win .bar{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.16)}
.win .bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35)}
.win .pg{padding:22px;display:grid;gap:12px}
.win .pg b{display:block;height:12px;border-radius:6px;background:rgba(255,255,255,.75);width:0}
.win .pg b:nth-child(2){height:9px;background:rgba(255,255,255,.35)}
.win .pg b:nth-child(3){height:9px;background:rgba(255,255,255,.35)}
.win .tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.win .tiles i{height:78px;border-radius:12px;background:linear-gradient(135deg,var(--violet),var(--orchid));transform:scale(.6);opacity:0}
.scene.on .pg b:nth-child(1){animation:grow 1s var(--ease) .1s forwards;--w:78%}
.scene.on .pg b:nth-child(2){animation:grow 1s var(--ease) .3s forwards;--w:96%}
.scene.on .pg b:nth-child(3){animation:grow 1s var(--ease) .45s forwards;--w:62%}
.scene.on .tiles i{animation:pop .6s var(--ease) forwards}
.scene.on .tiles i:nth-child(1){animation-delay:.6s}.scene.on .tiles i:nth-child(2){animation-delay:.72s}
@keyframes grow{to{width:var(--w)}}
@keyframes pop{to{transform:none;opacity:1}}

/* scene: brand */
.brandset{position:relative;width:70%;aspect-ratio:1}
.brandset .sh{position:absolute;opacity:0;transform:scale(.4) rotate(-40deg)}
.brandset .c{left:6%;top:8%;width:46%;aspect-ratio:1;border-radius:50%;background:var(--grad)}
.brandset .q{right:4%;top:24%;width:40%;aspect-ratio:1;border-radius:26%;background:rgba(255,255,255,.9)}
.brandset .t{left:30%;bottom:6%;width:0;height:0;border-left:70px solid transparent;border-right:70px solid transparent;border-bottom:120px solid var(--orchid)}
.brandset .sw{position:absolute;left:0;right:0;bottom:-14%;display:flex;gap:10px;justify-content:center}
.brandset .sw i{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.5);opacity:0}
.brandset .sw i:nth-child(1){background:var(--violet)}.brandset .sw i:nth-child(2){background:var(--orchid)}.brandset .sw i:nth-child(3){background:var(--paper)}.brandset .sw i:nth-child(4){background:var(--ink)}
.scene.on .sh{animation:settle .9s var(--ease) forwards}
.scene.on .q{animation-delay:.12s}.scene.on .t{animation-delay:.24s}
.scene.on .sw i{animation:pop .5s var(--ease) forwards}
.scene.on .sw i:nth-child(1){animation-delay:.6s}.scene.on .sw i:nth-child(2){animation-delay:.68s}.scene.on .sw i:nth-child(3){animation-delay:.76s}.scene.on .sw i:nth-child(4){animation-delay:.84s}
@keyframes settle{to{opacity:1;transform:none}}

/* scene: social */
.fan{position:relative;width:52%;aspect-ratio:.72}
.post{position:absolute;inset:0;border-radius:22px;background:rgba(255,255,255,.94);color:var(--paper-ink);padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 30px 50px -20px rgba(0,0,0,.5);opacity:0;transform:translateY(40px)}
.post .av{display:flex;align-items:center;gap:8px}
.post .av i{width:24px;height:24px;border-radius:50%;background:var(--grad)}
.post .av b{height:8px;width:40%;border-radius:4px;background:rgba(26,15,53,.25)}
.post .im{flex:1;border-radius:14px;background:linear-gradient(160deg,var(--violet),var(--orchid))}
.post .ln2{height:8px;width:70%;border-radius:4px;background:rgba(26,15,53,.2)}
.scene.on .post{animation:fanin .8s var(--ease) forwards}
.post:nth-child(1){--r:-11deg;--x:-34%}.post:nth-child(2){--r:0deg;--x:0%;animation-delay:.12s!important}.post:nth-child(3){--r:11deg;--x:34%;animation-delay:.24s!important}
.post:nth-child(2) .im{background:linear-gradient(160deg,#1c0f4a,var(--violet-2))}
.post:nth-child(3) .im{background:linear-gradient(160deg,var(--orchid),#ffb3ff)}
@keyframes fanin{to{opacity:1;transform:translateX(var(--x)) rotate(var(--r))}}

/* scene: growth */
.chart{width:78%}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .ax{stroke:rgba(255,255,255,.18);stroke-width:1}
.chart .ln3{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.chart .ar{fill:url(#ar);opacity:0}
.chart .dt{fill:var(--orchid);stroke:#fff;stroke-width:3;opacity:0}
.scene.on .ln3{animation:draw 1.4s var(--ease) .1s forwards}
.scene.on .ar{animation:fadein .8s ease 1s forwards}
.scene.on .dt{animation:fadein .4s ease 1.3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}

/* Services -> Process "curtain" (desktop; sizes are set from main.js).
   The list and the card are pinned together as ONE block (.svc-grid is sticky). The list reserves its
   tallest height (every title + the biggest open row), and the card stretches to the full height of the
   list, so the two always line up, top and bottom, while one row opens at a time as you scroll.
   The block stays still while Process slides up over it. The ::after spacer is the extra scroll
   distance the block stays pinned for (a sticky element can't leave its parent's content box). */
@media (min-width:901px){
  .services.curtain{padding-bottom:0}
  .services.curtain > .wrap::after{content:'';display:block;height:var(--svc-hold,0px)}
  .services.curtain .svc-grid{position:sticky;top:var(--svc-top,110px);align-items:stretch}
  .services.curtain .svc-list{min-height:var(--svc-list-h,0px)}
  .services.curtain .panel{position:relative;top:auto;align-self:stretch;aspect-ratio:auto}
  .services.curtain + .process{margin-top:calc(var(--svc-cover,0px) * -1);z-index:2;box-shadow:0 -30px 60px -30px rgba(18,6,43,.45)}
}

/* ============================================================
   PROCESS (pinned horizontal)
   ============================================================ */
.process{position:relative;background:var(--ink-2)}
.pin{position:relative}
.process.pinned .pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.track{display:flex;gap:clamp(28px,4vw,64px);padding:0 max(var(--gutter),calc((100vw - 1320px)/2 + var(--gutter)));will-change:transform}
.p-intro{flex:none;width:min(520px,80vw);align-self:center}
.p-intro h2{font-size:clamp(32px,4.4vw,62px);line-height:1.05}
.p-intro p{margin-top:24px;color:var(--muted);font-size:19px;max-width:40ch}
.step{flex:none;width:min(440px,78vw);padding:34px 34px 40px;border-radius:30px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015))}
.step .n{display:block;font-family:var(--display);font-weight:800;font-size:clamp(110px,14vw,190px);line-height:1.15;letter-spacing:-.05em;color:transparent;margin-bottom:14px;padding-right:.16em;width:fit-content;cursor:default;--p:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6Q15 0 30 6T60 6V12H0Z' fill='%23C13FFF'/%3E%3C/svg%3E"),linear-gradient(var(--orchid),var(--orchid)),linear-gradient(rgba(193,63,255,.3),rgba(193,63,255,.3));background-repeat:repeat-x,no-repeat,no-repeat;background-size:.5em .1em,100% 100%,100% 100%;background-position-x:0,0,0;background-position-y:calc(1.18em - var(--p)*.91em),calc(1.18em - var(--p)*.91em + .09em),0;-webkit-background-clip:text;background-clip:text;transition:--p .65s cubic-bezier(.45,.05,.25,1);animation:wave 1.1s linear infinite}
.step.lit .n{--p:1}
@property --p{syntax:'<number>';inherits:false;initial-value:0}
@keyframes wave{to{background-position-x:-.5em,0,0}}
.step h3{font-size:clamp(26px,2.8vw,38px);margin-bottom:14px}
.step p{color:var(--muted);font-size:18px}
.p-bar{display:none;position:absolute;left:var(--gutter);right:var(--gutter);bottom:36px;height:2px;background:var(--line);border-radius:2px}
.p-bar i{display:block;height:100%;background:var(--grad);transform:scaleX(0);transform-origin:left}
.process.pinned .p-bar{display:block}
/* ---- process step cards: animated line icons + cursor spotlight and tilt ---- */
.step{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,border-color .3s}
.step>*{position:relative;z-index:1}
.step::before,.step::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s}
.step::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(193,63,255,.2),transparent 62%)}
.step::after{padding:1.5px;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(215,140,255,.95),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.step.hot::before,.step.hot::after{opacity:1}
.ico{position:absolute!important;top:30px;right:30px;width:54px;height:54px;color:var(--orchid);overflow:visible}
.ico *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease)}
.ico .dot{stroke-dasharray:none;stroke-dashoffset:0;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s var(--ease) .6s}
.step.lit .ico *{stroke-dashoffset:0}
.step.lit .ico .dot{transform:scale(1)}
.ico g,.ico .r1,.ico .s1,.ico .s2,.ico .s3,.ico .b1,.ico .b2,.ico .b3,.ico .b4{transform-box:fill-box;transform-origin:center}
.ico g{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
.step.lit .mag{animation:icoMag 3.6s ease-in-out .9s infinite}
@keyframes icoMag{0%,100%{transform:translate(0,0)}25%{transform:translate(4px,-3px)}50%{transform:translate(-1px,4px)}75%{transform:translate(-4px,-1px)}}
.step.lit .r1{animation:icoPulse 2.8s ease-in-out .9s infinite}
@keyframes icoPulse{0%,100%{transform:scale(1)}50%{transform:scale(.86)}}
.step.lit .s1{animation:icoSnap1 3.4s var(--ease) .9s infinite}
.step.lit .s2{animation:icoSnap2 3.4s var(--ease) .9s infinite}
.step.lit .s3{animation:icoSnap3 3.4s var(--ease) .9s infinite}
@keyframes icoSnap1{0%,12%{transform:translate(-5px,-3px) rotate(-14deg)}30%,88%{transform:none}100%{transform:translate(-5px,-3px) rotate(-14deg)}}
@keyframes icoSnap2{0%,12%{transform:translate(6px,-2px)}30%,88%{transform:none}100%{transform:translate(6px,-2px)}}
@keyframes icoSnap3{0%,12%{transform:translate(0,6px) rotate(10deg)}30%,88%{transform:none}100%{transform:translate(0,6px) rotate(10deg)}}
.step.lit .b1{animation:icoDrop 3.2s var(--ease) .9s infinite}
.step.lit .b2{animation:icoDrop 3.2s var(--ease) 1.1s infinite}
.step.lit .b3{animation:icoDrop 3.2s var(--ease) 1.3s infinite}
.step.lit .b4{animation:icoDrop 3.2s var(--ease) 1.5s infinite}
@keyframes icoDrop{0%{transform:translateY(-12px);opacity:0}16%,84%{transform:none;opacity:1}100%{transform:translateY(-12px);opacity:0}}
.step.lit .rocket{animation:icoLift 2.2s ease-in-out .9s infinite}
@keyframes icoLift{0%,100%{transform:translateY(2px)}50%{transform:translateY(-4px)}}
.step.lit .flame{animation:icoFlame .35s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:top}
@keyframes icoFlame{from{transform:scaleY(.7)}to{transform:scaleY(1.15)}}
@media (prefers-reduced-motion:reduce){.ico *{stroke-dashoffset:0!important;transition:none!important;animation:none!important}.ico .dot{transform:scale(1)!important}.step{transform:none!important}}

.process:not(.pinned){padding:clamp(90px,10vw,140px) 0}
.process:not(.pinned) .track{flex-direction:column;padding:0 var(--gutter)}
.process:not(.pinned) .p-intro,.process:not(.pinned) .step{width:100%;max-width:640px}
.process:not(.pinned) .p-intro{margin-bottom:12px;align-self:flex-start}
@media (min-width:900px){
  .process:not(.pinned) .track{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1320px;margin:0 auto}
  .process:not(.pinned) .p-intro{grid-column:1/-1;max-width:640px}
  .process:not(.pinned) .step{max-width:none}
}
@media (min-width:1200px){.process:not(.pinned) .track{grid-template-columns:repeat(3,1fr)}}

/* ============================================================
   WHY US — bento, then about
   ============================================================ */
.why{padding:clamp(100px,12vw,170px) 0 clamp(80px,9vw,130px);background:var(--ink)}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
/* tile sizes: compact base (from the client's version); big desktop screens refine these in the WHY US block at the end */
.tile{position:relative;overflow:hidden;border-radius:24px;padding:clamp(20px,2.2vw,30px)}
.t-big{padding:clamp(26px,3vw,40px)}
.tile h3{font-size:clamp(20px,1.9vw,27px);margin-bottom:10px}
.tile p{max-width:38ch;font-size:16px}
.t-big{grid-column:span 7;grid-row:span 2;min-height:400px;border-radius:34px;background:var(--grad);display:flex;flex-direction:column;justify-content:flex-start}
.t-big h3{font-size:clamp(34px,4vw,56px);margin-bottom:14px}
.t-big p{font-size:18px}
.t-big p{color:rgba(255,255,255,.88)}
/* senior eyes: the handoff comparison (typical agency vs Cache Me) */
.hops{--nd:14px;position:relative;flex:1;width:100%;display:grid;grid-template-rows:1fr 1fr;gap:14px;margin-top:clamp(22px,2.6vw,34px)}
.hop{display:flex;flex-direction:column;justify-content:center;padding:clamp(16px,1.8vw,24px) clamp(18px,2vw,28px);border:1px solid rgba(255,255,255,.28);border-radius:20px;background:rgba(255,255,255,.07)}
.hop-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px;font-size:17px;color:rgba(255,255,255,.7)}
.hop-head em{font-style:normal;font-size:14px;opacity:.75}
.hop.us .hop-head{color:#fff;font-weight:600}
.hop-track{position:relative;display:flex;justify-content:space-between;align-items:center;height:var(--nd)}
.hop-track::before{content:'';position:absolute;left:calc(var(--nd)/2);right:calc(var(--nd)/2);top:50%;border-top:1.5px dashed rgba(255,255,255,.32)}
.hop.us .hop-track::before{border-top:2px solid rgba(255,255,255,.9)}
.nd{position:relative;z-index:1;width:var(--nd);height:var(--nd);border-radius:50%;border:1.5px solid rgba(255,255,255,.6);background:rgba(90,20,200,.9)}
.hop.us .nd{background:#fff;border-color:#fff}
.rail{position:absolute;left:calc(var(--nd)/2);right:calc(var(--nd)/2);top:0;bottom:0;z-index:2}
.dot{position:absolute;top:50%;left:0;width:calc(var(--nd)*.85);height:calc(var(--nd)*.85);margin:calc(var(--nd)*-.425) 0 0 calc(var(--nd)*-.425);border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 12px 3px rgba(255,255,255,.55);animation:hops-slow 7s infinite paused}
.dot.fast{box-shadow:0 0 16px 4px rgba(255,255,255,.85);animation:hops-fast 7s infinite paused}
.arrive{position:absolute;top:50%;right:0;width:var(--nd);height:var(--nd);margin:calc(var(--nd)*-.5) calc(var(--nd)*-.5) 0 0;border-radius:50%;border:2px solid #fff;opacity:0;animation:hops-ring 7s infinite paused}
.t-big.seen .dot,.t-big.seen .arrive{animation-play-state:running}
@keyframes hops-slow{
  0%{left:0;opacity:0}
  3%{left:0;opacity:1}
  16%,24%{left:25%;opacity:.8}
  38%,46%{left:50%;opacity:.6}
  60%,68%{left:75%;opacity:.42}
  82%,86%{left:100%;opacity:.28}
  92%,100%{left:100%;opacity:0}
  0%,16%,24%,38%,46%,60%,68%,82%{animation-timing-function:cubic-bezier(.65,0,.3,1)}
}
@keyframes hops-fast{
  0%{left:0;opacity:0;transform:scale(.6)}
  3%{left:0;opacity:1;transform:none}
  11%{left:100%;opacity:1}
  86%{left:100%;opacity:1}
  92%,100%{left:100%;opacity:0}
  3%{animation-timing-function:cubic-bezier(.2,.8,.2,1)}
}
@keyframes hops-ring{
  0%,10%{opacity:0;transform:scale(1)}
  11%{opacity:.9;transform:scale(1)}
  30%,100%{opacity:0;transform:scale(3)}
}
.t-clear{grid-column:span 5;background:var(--paper);color:var(--paper-ink)}
.t-scale{grid-column:span 5;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.t-scale p{color:var(--muted)}
.bars{display:flex;align-items:flex-end;gap:8px;height:90px;margin-top:16px}
.bars i{flex:1;border-radius:6px 6px 2px 2px;background:var(--grad);opacity:.9;transform-origin:bottom;transform:scaleY(0);transition:transform .35s ease-in}
.bars i:nth-child(1){height:24%}.bars i:nth-child(2){height:38%}.bars i:nth-child(3){height:52%}.bars i:nth-child(4){height:70%}.bars i:nth-child(5){height:100%}
.t-fric{grid-column:span 12;display:grid;grid-template-columns:1fr 1.4fr;gap:30px;align-items:center;padding-bottom:clamp(24px,2.6vw,34px);background:var(--ink-2);border:1px solid var(--line)}
.t-fric p{color:var(--muted);max-width:60ch}
@media (max-width:900px){.t-big,.t-clear,.t-scale{grid-column:span 12}.t-big{min-height:0}.t-fric{grid-template-columns:1fr;padding-bottom:56px}}


/* ---- bento motion ---- */
@property --gk{syntax:'<number>';inherits:true;initial-value:0}
@property --tx{syntax:'<angle>';inherits:true;initial-value:0deg}
@property --ty{syntax:'<angle>';inherits:true;initial-value:0deg}
.js .bento .tile{opacity:0;transform:translateY(30px) scale(.97);transition:opacity .8s var(--ease),transform .95s var(--ease)}
.js .bento .tile.shown{opacity:1;transform:none}
@media (min-width:901px){
  .js .bento .tile.shown:nth-child(2){transition-delay:.12s}
  .js .bento .tile.shown:nth-child(3){transition-delay:.24s}
  .js .bento .tile.shown:nth-child(4){transition-delay:.36s}
}

/* clear direction: blur resolves to sharp while one line settles into an arrow */
.js .t-clear h3,.js .t-clear p{filter:blur(7px);transition:filter 1.1s var(--ease) .35s}
.js .t-clear.seen h3,.js .t-clear.seen p{filter:none}
@keyframes focus{from{filter:blur(5px)}to{filter:blur(0)}}
.route{display:block;width:min(100%,330px);margin-top:18px;overflow:visible}
.route path{stroke:var(--violet);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.route-tip{opacity:0}

/* built for scale: bars climb in whenever the tile scrolls into view */
.t-scale.seen .bars i{transform:none;transition:transform 1.15s cubic-bezier(.3,1.5,.5,1)}
.t-scale.seen .bars i:nth-child(1){transition-delay:.25s}.t-scale.seen .bars i:nth-child(2){transition-delay:.38s}.t-scale.seen .bars i:nth-child(3){transition-delay:.51s}.t-scale.seen .bars i:nth-child(4){transition-delay:.64s}.t-scale.seen .bars i:nth-child(5){transition-delay:.77s}
@keyframes barwave{40%{transform:scaleY(.45)}75%{transform:scaleY(1.08)}}

/* less friction: a light glides the track with nothing in the way */
.glide{position:absolute;left:clamp(20px,2.2vw,30px);right:clamp(20px,2.2vw,30px);bottom:16px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,.04))}
.glide i{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 14px 2px var(--orchid),0 0 30px 8px rgba(193,63,255,.35);animation:glide 2s cubic-bezier(.25,.8,.75,.2) infinite alternate}
@keyframes glide{from{left:0}to{left:calc(100% - 10px)}}

.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);margin-top:clamp(90px,11vw,160px);align-items:start}
.about h2{font-size:clamp(28px,3.3vw,48px);line-height:1.08}
.rise .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .14em;margin:0 -.05em -.14em}
.rise .w>span{display:inline-block;transform:translateY(118%);transition:transform 1s var(--ease)}
.rise.seen .w>span{transform:none}
.about-copy{display:grid;gap:22px;color:var(--muted);font-size:19px;max-width:56ch}
@media (max-width:900px){.about{grid-template-columns:1fr}}
/* ---- ABOUT extras: cursor glow, phrase highlights, scrolling word band ---- */
.about{position:relative}
.about::before{content:"";position:absolute;left:var(--mx,30%);top:var(--my,40%);width:620px;height:620px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(139,47,245,.28),transparent 62%);filter:blur(20px);opacity:0;transition:opacity .6s;pointer-events:none;z-index:-1}
.about.live::before{opacity:1}
.hl{background:linear-gradient(90deg,var(--violet-2),var(--orchid)) no-repeat 0 100%/0% .14em;color:var(--text);padding-bottom:.08em;transition:background-size 1.1s var(--ease) .5s}
.about.seen .hl{background-size:100% .14em}
.about.seen .hl+*,.about.seen p .hl:nth-of-type(2){transition-delay:.9s}
@media (prefers-reduced-motion:reduce){.hl{background-size:100% .14em;transition:none}.about::before{display:none}}


/* ============================================================
   CONTACT
   ============================================================ */
.contact{position:relative;z-index:2;background:var(--grad);padding:clamp(90px,11vw,150px) 0;box-shadow:0 -40px 80px -30px rgba(0,0,0,.55)}
/* "Why us" stays put while Contact slides up over it; its top offset is set from main.js */
.why.pinned-under{position:sticky;z-index:1}
/* a pause: Why us holds still for a bit of scrolling before Contact starts to come up (raise the vh value for a longer pause) */
/* ---- contact: big ambient background (drifting light + slow orbit rings) ---- */
.contact{overflow:hidden}
.contact-grid{position:relative;z-index:1}
.contact-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.contact-bg .blob{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.contact-bg .b1{width:62vmax;height:62vmax;left:-18vmax;top:-26vmax;background:radial-gradient(circle,rgba(255,150,255,.55),transparent 66%);animation:cbA 22s ease-in-out infinite alternate}
.contact-bg .b2{width:54vmax;height:54vmax;right:-16vmax;bottom:-24vmax;background:radial-gradient(circle,rgba(40,0,160,.7),transparent 66%);animation:cbB 26s ease-in-out infinite alternate}
.contact-bg .b3{width:40vmax;height:40vmax;left:38%;top:12%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 66%);animation:cbC 30s ease-in-out infinite alternate}
@keyframes cbA{to{transform:translate3d(16vmax,10vmax,0) scale(1.15)}}
@keyframes cbB{to{transform:translate3d(-14vmax,-12vmax,0) scale(1.2)}}
@keyframes cbC{to{transform:translate3d(-18vmax,14vmax,0) scale(.85)}}
.orbits{position:absolute;right:-16vmax;top:50%;width:min(112vmax,1500px);height:auto;aspect-ratio:1;transform:translateY(-50%) translate3d(var(--px,0px),var(--py,0px),0);transition:transform .6s var(--ease)}
.orbits .o{transform-box:view-box;transform-origin:50% 50%}
.o1{animation:spin 90s linear infinite}
.o2{animation:spin 70s linear infinite reverse}
.o3{animation:spin 50s linear infinite}
.o4{animation:spin 38s linear infinite reverse}
.orbits .core{transform-box:fill-box;transform-origin:center;animation:corePulse 6s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes corePulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.5);opacity:.35}}
.contact-bg.paused *{animation-play-state:paused!important}
@media (max-width:900px){.orbits{right:-40vmax;opacity:.7}}
@media (prefers-reduced-motion:reduce){.contact-bg *{animation:none!important}}
.why.pinned-under + .contact{margin-top:clamp(160px,34vh,380px)}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:start}
.contact h2{font-size:clamp(38px,6vw,92px);color:#fff}
.contact-side p{margin-top:24px;max-width:36ch;font-size:19px;color:rgba(255,255,255,.9)}
.contact-side a.mail{display:inline-block;margin-top:16px;font-family:var(--display);font-weight:700;font-size:clamp(20px,2.2vw,28px);border-bottom:2px solid rgba(255,255,255,.6);padding:10px 0 2px}
.form-card{background:rgba(10,6,22,.65);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:32px;padding:clamp(24px,3.4vw,44px);box-shadow:0 50px 90px -40px rgba(10,6,22,.9)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:grid;gap:8px}.field.full{grid-column:1/-1}
.field label,.field .lbl{font-size:14.5px;color:var(--muted)}
.field input,.field textarea{width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);transition:border-color .2s,background .2s}
.field input::placeholder,.field textarea::placeholder{color:#8f85b2}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--orchid);background:rgba(255,255,255,.07);box-shadow:0 0 0 3px rgba(193,63,255,.4)}
.field textarea{resize:vertical;min-height:120px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:10px 18px;border-radius:100px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:15px;transition:background .2s,border-color .2s}
.chip[aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#fff}
.hp{position:absolute;left:-9999px}
.next{margin:34px 0 0;padding:0;list-style:none;display:grid;gap:16px;counter-reset:n;max-width:40ch}
.next li{counter-increment:n;display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:center;font-size:17px;color:rgba(255,255,255,.94)}
.next li::before{content:counter(n);width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:15px}
.form-note{margin-top:14px;font-size:14px;color:var(--muted)}
.submit-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px}
.form-status{margin-top:16px;font-size:15px;min-height:1.4em}
.form-status.ok{color:#9be7b0}.form-status.err{color:#ff9db0}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink);padding:70px 0 0;overflow:hidden}
.f-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:15px}
.f-social{display:flex;gap:10px}
.f-social a{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .25s,border-color .25s}
.f-social svg{width:19px;height:19px}
.f-social a.pending{cursor:default}
.mark{display:block;width:100%;height:auto;margin:40px 0 0;-webkit-mask-image:linear-gradient(#000 35%,transparent 96%);mask-image:linear-gradient(#000 35%,transparent 96%);user-select:none}
.mark text{font-family:var(--display);font-weight:800}

/* ============================================================
   MOBILE HARDENING
   ============================================================ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,li,a{overflow-wrap:break-word}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
@media (max-width:820px){
  /* headline is sized from the screen width so the widest line (10.7em) always fits */
  .hero-title{font-size:min(calc((100vw - 2*var(--gutter))/10.9),60px)}
  .contact-side a.mail{font-size:min(calc((100vw - 2*var(--gutter))/14.9),28px)}
  .nav{left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));width:auto;max-width:none}
  .hero-bg .glow{width:520px;height:520px;filter:blur(20px)}
  .mark{-webkit-mask-image:linear-gradient(#000 62%,rgba(0,0,0,.3));mask-image:linear-gradient(#000 62%,rgba(0,0,0,.3))}
}
/* short landscape phones: less chrome, no sideways pin (see main.js) */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding-top:96px;padding-bottom:56px}
  .services,.why,.contact{padding-top:72px;padding-bottom:72px}
}
@media (max-width:820px){
  .nav{transition:transform .35s var(--ease)}
  .nav.away{transform:translateY(-140%)}
}
.btn:active{transform:scale(.97)}
.chip:active,.svc-head:active{opacity:.8}

/* hover effects only where a real hover exists, so taps don't leave them stuck on */
@media (hover:hover){
  .band:hover .band-track{animation-play-state:paused}
  .btn:hover{transform:translateY(-3px);box-shadow:0 22px 44px -14px rgba(139,47,245,.85)}
  .btn:hover svg{transform:translate(3px,-3px)}
  .btn-line:hover{background:rgba(255,255,255,.06);box-shadow:none}
  .links a:hover{color:var(--text);background:rgba(255,255,255,.07)}
  .chip:hover{border-color:rgba(255,255,255,.35)}
  .f-social a:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
  .t-clear:hover h3,.t-clear:hover p{animation:focus .8s var(--ease)}
  .t-scale.seen:hover .bars i{animation:barwave .9s var(--ease) both}
  .t-scale.seen:hover .bars i:nth-child(2){animation-delay:.07s}.t-scale.seen:hover .bars i:nth-child(3){animation-delay:.14s}.t-scale.seen:hover .bars i:nth-child(4){animation-delay:.21s}.t-scale.seen:hover .bars i:nth-child(5){animation-delay:.28s}
  .svc-head:hover .svc-title{color:var(--paper-ink)}
  .step:hover .n{--p:1}
}

/* ============================================================
   WHY US (desktop): fixed, roomy spacing. Sizes depend on screen WIDTH only,
   never on screen height, so a short laptop window can't squash the tiles.
   ============================================================ */
@media (min-width:1200px){
  .why .sec-head{margin-bottom:clamp(48px,4.4vw,72px)}
  .why .sec-head h2{font-size:clamp(36px,4.4vw,72px);white-space:nowrap}
  .why .bento{gap:clamp(20px,1.9vw,30px)}
  .why .tile{padding:clamp(32px,3vw,46px);border-radius:28px}
  .why .tile h3{font-size:clamp(24px,2vw,31px);margin-bottom:18px}
  .why .tile p{font-size:clamp(16px,1.15vw,18px);line-height:1.6}
  .why .t-big{padding:clamp(38px,3.6vw,58px);border-radius:36px;min-height:0}
  .why .t-big h3{font-size:clamp(40px,4vw,60px);margin-bottom:22px}
  .why .t-big p{font-size:clamp(18px,1.45vw,22px);line-height:1.45;margin-bottom:clamp(40px,3.8vw,60px)}
  .why .hops{gap:clamp(18px,1.6vw,26px);margin-top:0}
  .why .hop{padding:clamp(24px,2.2vw,34px) clamp(24px,2.4vw,36px);border-radius:24px}
  .why .hop-head{margin-bottom:clamp(20px,2vw,30px)}
  .why .route{margin-top:clamp(26px,2.4vw,38px);width:min(100%,320px)}
  .why .t-scale{display:flex;flex-direction:column}
  .why .bars{flex:1;height:auto;min-height:clamp(110px,10vw,150px);margin-top:clamp(26px,2.4vw,38px)}
  .why .t-fric{padding-bottom:clamp(72px,6vw,92px);gap:clamp(30px,4vw,64px)}
  .why .t-fric h3{margin-bottom:0}
  .why .glide{left:clamp(32px,3vw,46px);right:clamp(32px,3vw,46px);bottom:clamp(30px,2.6vw,40px)}
}


/* Services: a small step readout under the list (aligned to the list's left edge), a "Scroll" hint that goes
   away after the first change, and a hover cue on closed titles. Desktop pinned mode only (.curtain is set from main.js). */
.svc-prog{display:none}
.services.curtain .svc-grid{row-gap:0}
.services.curtain .svc-prog{grid-column:1 / -1;display:flex;align-items:center;gap:14px;margin-top:4px;color:rgba(26,15,53,.6);font-size:13px;letter-spacing:.04em;pointer-events:none}
.svc-count{font-variant-numeric:tabular-nums;white-space:nowrap}
.svc-count b{font-weight:600;color:var(--paper-ink)}
.svc-bar{display:flex;gap:5px}
.svc-bar i{width:34px;height:2px;border-radius:2px;background:rgba(26,15,53,.16);transition:background .4s}
.svc-bar i.on{background:var(--violet)}
.svc-hint{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:opacity .5s}
.svc-hint::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);animation:svcNudge 1.5s ease-in-out infinite}
.svc-prog.seen .svc-hint{opacity:0}
@keyframes svcNudge{0%,100%{transform:rotate(45deg) translate(-2px,-2px)}50%{transform:rotate(45deg) translate(1px,1px)}}
.svc-tags::after{content:'+';display:inline-block;width:0;margin-left:0;overflow:hidden;opacity:0;vertical-align:middle;font-size:20px;line-height:1;color:var(--violet-2);transition:width .3s var(--ease),margin-left .3s var(--ease),opacity .3s}
@media (hover:hover){
  .svc:not(.on) .svc-head:hover .svc-tags::after{width:14px;margin-left:10px;opacity:1}
  .svc:not(.on) .svc-head:hover .svc-title{transform:translateX(8px)}
}

/* used briefly by main.js so Services rows open instantly before a link scroll starts */
.services.no-anim *{transition:none!important}

/* phones: a more compact browser-window drawing so the Web picture fits its card on the narrowest screens */
@media (max-width:900px){
  .win{width:64%}
  .win .bar{padding:9px 12px}
  .win .pg{padding:14px;gap:8px}
  .win .tiles{gap:8px;margin-top:2px}
  .win .tiles i{height:clamp(30px,9vw,52px)}
}

/* ---- Lenis smooth scrolling (recommended rules) ---- */
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:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ============================================================
   EXTRAS: page-load intro, cursor-reactive headline, magnetic buttons,
   service shimmer, tilting tiles, word-by-word About, form success
   ============================================================ */

/* ---- page-load intro: a "cache fill" ---- */
.loader{display:none}
.js .loader{display:block;position:fixed;inset:0;z-index:300;pointer-events:all}
html.loading{overflow:hidden}
.ld-a,.ld-b{position:absolute;left:0;right:0;background:var(--ink);transition:transform .95s cubic-bezier(.76,0,.24,1)}
.ld-a{top:0;height:50.5%}.ld-b{bottom:0;height:50.5%}
.ld-a{background:radial-gradient(120% 90% at 50% 100%,rgba(91,0,247,.22),transparent 60%),var(--ink)}
.ld-b{background:radial-gradient(120% 90% at 50% 0%,rgba(91,0,247,.22),transparent 60%),var(--ink)}
.ld-a::after,.ld-b::after{content:"";position:absolute;left:0;right:0;height:1px;opacity:0;transition:opacity .2s;background:linear-gradient(90deg,transparent,rgba(193,63,255,.9),transparent)}
.ld-a::after{bottom:0}.ld-b::after{top:0}
.loader.go .ld-a::after,.loader.go .ld-b::after{opacity:1}
.ld-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.4vh,20px);padding:0 24px;transition:opacity .35s,transform .5s var(--ease)}
.ld-mark{position:relative;width:76px;height:76px;display:grid;place-items:center;margin-bottom:clamp(2px,1vh,10px)}
.ld-mark::before{content:"";position:absolute;inset:-70%;border-radius:50%;background:radial-gradient(closest-side,rgba(193,63,255,.5),rgba(91,0,247,.18) 55%,transparent);animation:ldGlow 2.4s ease-in-out infinite}
.ld-mark img{position:relative;width:64px;height:64px;animation:ldPop .9s var(--ease) both}
@keyframes ldPop{from{opacity:0;transform:translateX(-14px) scale(.7)}to{opacity:1;transform:none}}
@keyframes ldGlow{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
.ld-count{position:relative;display:flex;justify-content:center;font-family:var(--display);font-weight:800;line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ld-count span{min-width:2.4ch;text-align:center;font-size:clamp(96px,21vw,210px);color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(to top,#C13FFF 0,#8B2FF5 calc(var(--ld,0)*100%),rgba(255,255,255,.1) calc(var(--ld,0)*100%));filter:drop-shadow(0 0 28px rgba(193,63,255,.35))}
.ld-count i{position:absolute;left:100%;bottom:.12em;font-style:normal;font-size:clamp(28px,6vw,56px);margin-left:6px;color:var(--muted);opacity:.7}
.ld-cells{display:flex;gap:4px;margin-top:clamp(6px,1.6vh,16px)}
.ld-cells b{width:clamp(5px,1.1vw,9px);height:clamp(14px,2.6vw,22px);border-radius:2px;background:rgba(255,255,255,.1);transition:background .18s,box-shadow .18s,transform .18s}
.ld-cells b.on{background:#C13FFF;box-shadow:0 0 12px rgba(193,63,255,.75)}
.ld-cells b.hot{background:#fff;transform:scaleY(1.25)}
.ld-status{margin:0;font-size:15px;color:var(--muted);letter-spacing:.02em;min-height:1.4em;transition:color .3s}
.ld-status.hit{color:#fff}
.loader.go .ld-core{opacity:0;transform:scale(1.12)}
.loader.go .ld-a{transform:translateY(-101%)}
.loader.go .ld-b{transform:translateY(101%)}
@media (prefers-reduced-motion:reduce){.js .loader{display:none}}

/* ---- hero headline: letters near the cursor lift, swell and glow ---- */
.ch{transform:translateY(calc(var(--h,0)*-10px)) scale(calc(1 + var(--h,0)*.07));text-shadow:0 0 calc(var(--h,0)*26px) rgba(193,63,255,calc(var(--h,0)*.75))}
.ch.miss{transform:none;text-shadow:none}

/* ---- hero buttons: magnetic pull ---- */
.hero .btn{translate:var(--mgx,0px) var(--mgy,0px);transition:transform .35s var(--ease),box-shadow .35s,translate .25s ease-out}
.hero .btn.mag-rest{transition:transform .35s var(--ease),box-shadow .35s,translate .7s var(--ease)}

/* ---- services: shimmer sweeps across a row title on hover ---- */
.svc-title{--sc:rgba(26,15,53,.55)}
.svc.on .svc-title{--sc:var(--paper-ink)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .svc-head:hover .svc-title{--sc:var(--paper-ink);color:transparent;-webkit-background-clip:text;background-clip:text;
    background-image:linear-gradient(100deg,var(--sc) 38%,#C13FFF 48%,#ff9bf0 52%,var(--sc) 62%);background-size:300% 100%;background-repeat:no-repeat;
    animation:svcShim 1.15s var(--ease) 1 both}
}
@keyframes svcShim{from{background-position:100% 0}to{background-position:0 0}}

/* ---- why us tiles: spotlight + tilt ---- */
.why .tile::before,.why .tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;z-index:2}
.why .tile::before{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 62%)}
.why .tile::after{padding:1.5px;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(220,150,255,.95),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.why .tile.hot::before,.why .tile.hot::after{opacity:1}
.js .why .bento .tile.shown.tilt-on{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,opacity .3s;transition-delay:0s}

/* ---- about: words brighten as you scroll ---- */
.about-copy .rw{opacity:calc(.2 + var(--r,0)*.8);transition:opacity .18s linear}
@media (prefers-reduced-motion:reduce){.about-copy .rw{opacity:1;transition:none}}

/* ---- footer wordmark: fades in when scrolled into view ---- */
.js .mark{opacity:0;transform:translateY(24px);transition:opacity 1.4s ease,transform 1.4s var(--ease)}
.js .mark.seen{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .mark{opacity:1;transform:none;transition:none}}

/* ---- mobile menu: blurred glass dropdown ---- */
@media (max-width:820px){
  .nav{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:100px;background:rgba(10,6,22,.86);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}
  .links{top:84px;background:rgba(19,11,41,.78);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
}

/* ---- hero headline: scrambled letters no longer get clipped at the sides ---- */
.ch.miss{clip-path:none;display:inline-flex;justify-content:center}

/* ---- mobile menu: bigger links, dividers, staggered entrance, dimmed page ---- */
@media (max-width:820px){
  .nav::after{content:"";position:fixed;inset:0;z-index:-2;background:rgba(10,6,22,.8);opacity:0;pointer-events:none;transition:opacity .3s}
  .nav.open::after{opacity:1}
  .links{padding:6px 14px;border-radius:26px}
  .links a{display:flex;align-items:center;justify-content:space-between;padding:16px 6px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.09);font-family:var(--display);font-weight:700;font-size:25px;letter-spacing:-.01em;color:#fff;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s var(--ease),color .2s}
  .links a:last-child{border-bottom:0}
  .links a:active{color:#C13FFF}
  .nav.open .links a{opacity:1;transform:none}
  .nav.open .links a:nth-child(1){transition-delay:.05s}
  .nav.open .links a:nth-child(2){transition-delay:.1s}
  .nav.open .links a:nth-child(3){transition-delay:.15s}
  .nav.open .links a:nth-child(4){transition-delay:.2s}
}

/* ---- contact form: success moment ---- */
.form-card{position:relative;overflow:hidden}
.form-card form{transition:opacity .4s,filter .4s}
.form-card.is-sent form{opacity:0;filter:blur(6px);visibility:hidden}
.sent{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:32px;background:rgba(10,6,22,.6);border-radius:inherit}
.form-card.is-sent .sent{display:flex;animation:sentIn .5s var(--ease) both}
@keyframes sentIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.sent-ico{width:104px;height:104px;margin-bottom:8px}
.sent-ico circle{fill:none;stroke:#C13FFF;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.sent-ico path{fill:none;stroke:#fff;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.form-card.is-sent .sent-ico circle{animation:sentDraw .8s var(--ease) .1s forwards;filter:drop-shadow(0 0 10px rgba(193,63,255,.8))}
.form-card.is-sent .sent-ico path{animation:sentDraw .55s var(--ease) .7s forwards}
@keyframes sentDraw{to{stroke-dashoffset:0}}
.sent h3{font-size:clamp(26px,3vw,38px)}
.sent p{color:var(--muted);max-width:34ch;font-size:17px}
.sent .btn{margin-top:10px}
.confetti{position:absolute;left:50%;top:38%;width:0;height:0;pointer-events:none}
.confetti i{position:absolute;left:0;top:0;width:var(--s,8px);height:calc(var(--s,8px)*1.6);background:var(--c);border-radius:2px;opacity:0;animation:conf 1.5s cubic-bezier(.12,.7,.3,1) var(--d,.55s) forwards}
@keyframes conf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){.form-card.is-sent .sent-ico circle,.form-card.is-sent .sent-ico path{animation:none;stroke-dashoffset:0}.confetti{display:none}.form-card.is-sent .sent{animation:none}}