@property --sc{syntax:"<number>";inherits:false;initial-value:1}
@property --par{syntax:"<length>";inherits:false;initial-value:0px}
@property --p{syntax:"<number>";inherits:true;initial-value:0}
@property --q{syntax:"<number>";inherits:true;initial-value:0}

/* ——— Motion hero ——— */
.mhero{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;gap:64px;padding:180px var(--gutter) 56px;position:relative;background:var(--surface);overflow:hidden}
.mhero--sub{min-height:72vh;padding-bottom:64px;gap:48px}
.mhero__inner{max-width:var(--max);margin:0 auto;width:100%;position:relative;z-index:2}
.hdots{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;opacity:.8}
.hdots canvas{display:block}
.mhero__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:40px;animation:fadeUp .8s cubic-bezier(.16,1,.3,1) both}
.mhero__eyebrow .bar{display:block;width:56px;height:1px;background:var(--ink);transform-origin:left;animation:barIn .9s cubic-bezier(.16,1,.3,1) .15s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.hl{font-family:"Manrope",sans-serif;font-weight:700;font-size:clamp(40px,7.4vw,132px);line-height:.94;letter-spacing:-0.045em;margin:0;color:var(--ink)}
.hl--sm{font-size:clamp(36px,5.6vw,96px)}
.hl-line{display:block;overflow:hidden;padding:0 .14em .32em;margin:0 -.14em -.28em}
.hl-in{display:block;animation:lineUp 1.15s cubic-bezier(.16,1,.3,1) both}
.hl-line:nth-child(1) .hl-in{animation-delay:.05s}
.hl-line:nth-child(2) .hl-in{animation-delay:.14s}
.hl-line:nth-child(3) .hl-in{animation-delay:.23s}
.hl-line:nth-child(4) .hl-in{animation-delay:.32s}
@keyframes lineUp{from{transform:translateY(115%)}to{transform:none}}
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block;--cx:-9999px;--cy:-9999px;padding:.28em .1em .34em;margin:-.28em -.1em -.34em;will-change:transform;transition:transform .5s cubic-bezier(.2,.9,.25,1)}
.c--sp{display:inline-block;box-sizing:content-box;width:.26em}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .c{
    background-image:
      radial-gradient(circle 80px at var(--cx) var(--cy), #FFC93F 0 99%, transparent 99%),
      radial-gradient(circle 190px at var(--cx) var(--cy), #735ACB 0 99%, transparent 99%),
      linear-gradient(var(--ink),var(--ink));
    background-repeat:no-repeat;background-origin:border-box;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
}
.hl .muted{color:var(--muted)}
.hl .accent{color:var(--accent-ink)}
.roll{display:inline-block;overflow:hidden;height:1.4em;margin-top:-.55em;vertical-align:baseline;position:relative;top:.32em}
.roll__list{display:flex;flex-direction:column;transition:transform .95s cubic-bezier(.16,1,.3,1)}
.roll__list>span{display:block;height:1.4em;line-height:1.4;color:var(--accent-ink);white-space:nowrap}
.mhero__foot{position:relative;z-index:2;max-width:var(--max);margin:0 auto;width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.mhero__lede{max-width:520px;margin:0;font-size:18px;line-height:1.5;color:var(--muted);animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .5s both}
.mcue{display:inline-flex;align-items:center;gap:10px;color:var(--muted);animation:fadeIn .9s ease .68s both}
.mcue .ico{animation:cuebob 2.1s ease-in-out infinite}
@keyframes cuebob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ——— Velocity marquee ——— */
.vmarquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg);padding:22px 0}
.vmarquee__track{display:flex;gap:56px;width:max-content;will-change:transform}
.vmarquee__track span{font-family:"Manrope",sans-serif;font-size:clamp(28px,4.6vw,58px);font-weight:400;letter-spacing:-0.035em;white-space:nowrap;color:var(--ink)}
.vmarquee__track .dot{width:11px;height:11px;border-radius:50%;background:var(--accent-ink);align-self:center;flex-shrink:0}

/* ——— Scroll reveals ——— */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv-mask{display:block;overflow:hidden}
.rv-mask>*{display:block;transform:translateY(105%);transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.rv-mask.in>*{transform:none}

/* ——— Logos ——— */
.logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.logos img{box-sizing:border-box;width:100%;height:78px;padding:22px 24px;background:var(--white);border-radius:var(--radius-card);box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 34px -14px rgba(0,0,0,.14);object-fit:contain;filter:grayscale(1);transition:filter .25s,box-shadow .3s,transform .3s cubic-bezier(.16,1,.3,1)}
.logos img:hover{filter:grayscale(0);transform:translateY(-3px);box-shadow:0 1px 2px rgba(0,0,0,.05),0 20px 40px -14px rgba(0,0,0,.2)}
.trusted-lbl{text-align:center;color:var(--muted);margin-bottom:24px}

/* ——— Staggered work grid ——— */
.mwork{display:grid;grid-template-columns:repeat(2,1fr);gap:56px;align-items:start}
.mwork__col{display:flex;flex-direction:column;gap:56px}
.mwork__col:nth-child(2){margin-top:72px}
.mcard{display:flex;flex-direction:column;gap:22px;text-decoration:none;color:inherit}
.mcard__wrap{position:relative;display:block;overflow:hidden;border-radius:var(--radius-card);background:var(--surface);aspect-ratio:4/3}
.mcard--tall .mcard__wrap{aspect-ratio:3/4}
.mcard__img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;will-change:transform;--par:0px;--sc:1;transform:translateY(var(--par)) scale(var(--sc));transition:transform .9s cubic-bezier(.16,1,.3,1)}
.mcard:hover .mcard__img{--sc:1.06}
.mcard__meta{display:flex;flex-direction:column;gap:8px;padding-right:24px}
.mcard__num{font-family:"Roboto Flex",monospace;font-size:12px;color:var(--muted);letter-spacing:.02em}
.mcard__title{font-family:"Manrope",sans-serif;font-size:34px;line-height:1.1;letter-spacing:-0.03em;color:var(--ink);display:flex;align-items:center;gap:12px}
.mcard__title .ico{opacity:0;transform:translateX(-8px);transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.mcard:hover .mcard__title .ico{opacity:1;transform:none}
.mcard__desc{font-size:15px;line-height:1.5;color:var(--muted);max-width:420px}

/* ——— Dark slab + lockup marquee ——— */
.about-slab{position:relative;background:var(--ink);color:var(--white);border-radius:var(--radius-hero);padding:72px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:40px;min-height:620px}
.about-slab__vec{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;display:flex;align-items:center;opacity:.5}
.vec-track{display:flex;align-items:center;height:100%;width:max-content;animation:vecMarquee 30s linear infinite}
.vec-group{display:flex;align-items:center;height:100%;padding-right:clamp(40px,6vw,90px)}
.vec-group img{display:block;height:84%;width:auto;max-width:none}
@keyframes vecMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.about-slab__body{display:flex;flex-direction:column;justify-content:space-between;gap:40px;position:relative;z-index:2;grid-column:1}
.about-slab h2{color:var(--white);font-family:"Manrope";font-size:60px;line-height:1.05;letter-spacing:-0.03em;margin:0 0 24px}
.about-slab p{color:rgba(255,255,255,.8);font-size:20px;line-height:1.3;margin:0 0 32px;font-family:"Manrope";letter-spacing:-0.02em}

/* ——— Scroll-scrubbed service cards ——— */
.svc-wrap{display:block}
.svc-left{display:flex;flex-direction:column;gap:24px;padding-top:60px}
.svc-acc{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.svc-item{--p:0;--q:0;position:relative;border-radius:var(--radius-card);background:var(--surface);overflow:hidden;color:color-mix(in srgb,var(--ink),var(--white) calc(var(--q)*100%))}
.svc-item::before{content:"";position:absolute;inset:0;background:var(--ink);opacity:var(--q);z-index:0}
.svc-item__bg{position:absolute;inset:0;z-index:0;opacity:var(--p);overflow:hidden;pointer-events:none}
.svc-item__bg img{position:absolute;right:-2px;top:-1px;height:calc(100% + 3px);width:auto;max-width:none;transform:translateX(calc((1 - var(--p))*28px))}
.svc-item.has-img .svc-item__inner,.svc-item.has-img .svc-item__head{padding-right:calc(var(--svc-open)*var(--ar,1.1) + 24px)}
.svc-item{--svc-closed:88px;--svc-open:380px;min-height:calc(var(--svc-closed) + var(--p)*(var(--svc-open) - var(--svc-closed)))}
@media (max-width:900px){.svc-item{--svc-closed:80px;--svc-open:300px}.svc-item.has-img .svc-item__head{padding-right:24px}.svc-item.has-img .svc-item__inner{padding-right:24px;padding-bottom:28px}.svc-item__bg img{top:-1px;bottom:auto;height:calc(100% + 3px);right:-2px;opacity:.55}}
@media (max-width:640px){.svc-item{--svc-closed:76px;--svc-open:350px}.svc-item.has-img .svc-item__head{padding-right:18px}.svc-item.has-img .svc-item__inner{padding-right:18px;padding-bottom:24px}}
.svc-item__head{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:48px 1fr;gap:20px;align-items:center;padding:26px 24px;background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:default}
.svc-item__num{font-family:"Roboto Flex",monospace;font-size:12px;color:inherit;opacity:calc(.2 + var(--q)*.3)}
.svc-item__title h3{margin:0;font-family:"Manrope",sans-serif;font-weight:700;font-size:clamp(24px,2.2vw,32px);line-height:1.05;letter-spacing:-0.03em}
.svc-item__acc{position:relative;z-index:1;display:grid;grid-template-rows:0fr}
.svc-item__content{overflow:hidden;opacity:var(--p)}
.svc-item__inner{padding:0 24px 28px 92px;max-width:820px}
.svc-item__inner p{margin:0;font-family:"Manrope",sans-serif;font-size:20px;line-height:1.3;letter-spacing:-0.02em;color:inherit;opacity:.8}
@media (max-width:900px){.svc-item__inner p{font-size:17px}}
.svc-acc.is-manual .svc-item{transition:--p .5s cubic-bezier(.16,1,.3,1),--q .4s ease}
.svc-acc.is-manual .svc-item__acc{transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1)}
.svc-acc.is-manual .svc-item__head{cursor:pointer}
.svc-acc.is-manual .svc-item.is-open{--p:1;--q:1}
.svc-acc.is-manual .svc-item.is-open .svc-item__acc{grid-template-rows:1fr}

/* ——— CTA ——— */
.cta-band{max-width:960px;margin:0 auto;text-align:center;padding:100px 40px;display:flex;flex-direction:column;gap:32px;align-items:center}
.mag{will-change:transform}

@media (max-width:1100px){
  .mwork{gap:40px 32px}.mwork__col{gap:40px}.mwork__col:nth-child(2){margin-top:48px}
  .about-slab{grid-template-columns:1fr;padding:40px}
}
@media (max-width:640px){
  .mwork{grid-template-columns:1fr;gap:48px}.mwork__col{gap:48px}.mwork__col:nth-child(2){margin-top:0}
  .mcard__title{font-size:28px}.mhero{padding-top:140px}
  .svc-item__head{grid-template-columns:38px 1fr;gap:14px;padding:22px 18px}
  .svc-item__inner{padding:0 18px 24px 18px}
}
/* ——— Brand: full lockup retracts into the mark on scroll ——— */
.brand-standalone{--bh:48px;position:relative;width:calc(var(--bh)*175/70);min-width:0;height:var(--bh);justify-content:flex-start;overflow:visible;border-radius:0;color:var(--ink);transition:width .7s cubic-bezier(.76,0,.24,1) .05s,transform .2s ease}
.is-scrolled .brand-standalone{width:calc(var(--bh)*42/70 + 2px);transition:width .6s cubic-bezier(.76,0,.24,1) .12s,transform .2s ease}
.bl{display:block;height:var(--bh);width:calc(var(--bh)*175/70);flex:none;overflow:visible}
.bl-mark{transform-box:fill-box;transform-origin:50% 100%;animation:blMarkB .7s cubic-bezier(.16,1,.3,1)}
.is-scrolled .bl-mark{animation:blMarkA .7s cubic-bezier(.16,1,.3,1) .25s}
@keyframes blMarkA{0%{transform:none}35%{transform:scale(1.12,.9)}65%{transform:scale(.95,1.06) translateY(-3px)}100%{transform:none}}
@keyframes blMarkB{0%{transform:none}35%{transform:scale(1.08,.94)}100%{transform:none}}
.bl-word path{transform-box:fill-box;transform-origin:0 50%;transition:opacity .4s ease,transform .6s cubic-bezier(.16,1,.3,1);transition-delay:calc(.15s + var(--i)*55ms + var(--r)*35ms)}
.is-scrolled .bl-word path{opacity:0;transform:translateX(calc(-10px - var(--i)*7px)) scaleX(.6);transition-delay:calc((4 - var(--i))*40ms + var(--r)*25ms)}
.mnav-open .brand-standalone{color:var(--white)}
.site-footer__logo{display:block;height:56px;width:auto;max-width:none;flex:none}
.ft-br{display:none}
@media (max-width:640px){.ft-br{display:inline}.ft-sep{display:none}}

/* ——— Mobile menu ——— */
.nav-burger{display:none;pointer-events:auto;position:relative;width:48px;height:48px;border:0;border-radius:50%;background:var(--ink);cursor:pointer;flex:none;z-index:2}
.nav-burger span{position:absolute;left:15px;right:15px;height:2px;border-radius:2px;background:var(--white);transition:transform .4s cubic-bezier(.16,1,.3,1),top .4s cubic-bezier(.16,1,.3,1)}
.nav-burger span:nth-child(1){top:19px}
.nav-burger span:nth-child(2){top:27px}
.mnav-open .nav-burger span:nth-child(1){top:23px;transform:rotate(45deg)}
.mnav-open .nav-burger span:nth-child(2){top:23px;transform:rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:49;background:var(--ink);color:var(--white);display:flex;flex-direction:column;justify-content:space-between;padding:110px var(--gutter) 32px;clip-path:circle(0 at calc(100% - 42px) 40px);visibility:hidden;transition:clip-path .7s cubic-bezier(.76,0,.24,1),visibility 0s linear .7s}
.mnav-open .mnav{clip-path:circle(150% at calc(100% - 42px) 40px);visibility:visible;transition:clip-path .7s cubic-bezier(.76,0,.24,1),visibility 0s}
.mnav__links{display:flex;flex-direction:column}
.mnav__links a{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);font-family:"Manrope",sans-serif;font-weight:700;font-size:clamp(40px,12vw,56px);line-height:1;letter-spacing:-0.04em;color:var(--white);opacity:0;transform:translateY(24px);transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1),color .2s}
.mnav__links a span{font-family:"Roboto Flex",monospace;font-weight:500;font-size:12px;letter-spacing:.02em;color:rgba(255,255,255,.45)}
.mnav__links a.active{color:#C6B6F2}
.mnav-open .mnav__links a{opacity:1;transform:none}
.mnav-open .mnav__links a:nth-child(1){transition-delay:.25s}
.mnav-open .mnav__links a:nth-child(2){transition-delay:.31s}
.mnav-open .mnav__links a:nth-child(3){transition-delay:.37s}
.mnav-open .mnav__links a:nth-child(4){transition-delay:.43s}
.mnav__foot{display:flex;flex-direction:column;align-items:flex-start;gap:20px;opacity:0;transition:opacity .4s ease}
.mnav-open .mnav__foot{opacity:1;transition-delay:.5s}
.mnav__status{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.75)}


/* ——— Desktop header: one box, logo left, links right (matches mobile) ——— */
@media (min-width:641px){
  .topbar{top:16px;left:var(--gutter);right:var(--gutter);padding:8px 8px 8px 24px;border-radius:var(--radius-pill);background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(30px) saturate(1.1);backdrop-filter:blur(30px) saturate(1.1);border:1px solid rgba(34,34,34,.06);box-shadow:0 8px 30px -12px rgba(0,0,0,.15);pointer-events:auto}
  .navpill{padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .brand-standalone{--bh:40px}
}

/* ——— Responsive: shared shell ——— */
.cta-h{font-size:clamp(32px,5vw,60px)}
.cta-band .rv:last-child{flex-wrap:wrap;justify-content:center}
@media (max-width:1100px){
  .section-head{grid-template-columns:1fr;gap:24px;margin-bottom:48px}
}
@media (max-width:900px){
  :root{--gutter:24px}
  .section{padding:72px 0}
  .section--tight{padding:48px 0}
  .display{font-size:clamp(34px,7vw,60px)}
  .nav-cta__status,.nav-cta__sep{display:none}
  .nav-cta{padding:6px 6px 6px 14px;gap:10px}
  .mhero{padding-top:140px;gap:48px}
  .mhero__eyebrow{margin-bottom:28px}
  .about-slab{min-height:520px}
  .about-slab h2{font-size:clamp(36px,6vw,60px)}
  .cta-band{padding:64px 0}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .logos img{height:68px;padding:18px 20px}
  .site-footer__row{gap:24px}
  .site-footer nav{gap:14px 22px}
}
@media (max-width:640px){
  :root{--gutter:18px}
  .topbar{top:8px;left:8px;right:8px;gap:8px;padding:6px 6px 6px 22px;border-radius:var(--radius-pill);background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(30px) saturate(1.1);backdrop-filter:blur(30px) saturate(1.1);border:1px solid rgba(34,34,34,.06);box-shadow:0 8px 30px -12px rgba(0,0,0,.15);pointer-events:auto;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
  .mnav-open .topbar{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:transparent;box-shadow:none}
  .brand-standalone{--bh:38px}
  .navpill,.nav-cta{display:none}
  .nav-burger{display:block}
  .hl{font-size:clamp(30px,8.6vw,44px)}
  .hl--sm{font-size:clamp(30px,8.6vw,44px)}
  .mhero{padding-top:112px;padding-bottom:40px;min-height:88vh}
  .mhero__lede{font-size:16px}
  .mcue{display:none}
  .about-slab{padding:28px;min-height:460px;border-radius:20px}
  .about-slab p{font-size:17px}
  .svc-left{padding-top:0}
  .section:has(.about-slab){padding-bottom:24px}
  #services{padding-top:24px}
  .cta-band{padding:40px 0;gap:24px}
  .logos{gap:12px}
  .logos img{height:56px;padding:14px 14px}
  .site-footer__brand span{font-size:11px;line-height:1.5}
  .site-footer__logo{height:44px}
}
@media (prefers-reduced-motion:reduce){
  .hl-in,.rv,.rv-mask>*{transform:none!important;opacity:1!important;transition:none!important;animation:none!important}
  .mhero__eyebrow,.mhero__eyebrow .bar,.mhero__lede,.mcue{animation:none!important;opacity:1!important;transform:none!important}
  .about-slab__vec .vec-track{animation:none!important}
  .c{transition:none!important}
  .mcue .ico{animation:none}
  .mnav,.mnav__links a,.mnav__foot,.nav-burger span{transition:none!important}
  .brand-standalone,.bl-word path{transition-duration:.01s!important;transition-delay:0s!important}
  .bl-mark{animation:none!important}
  .svc-item{--p:1;--q:1}.svc-item__acc{grid-template-rows:1fr}
}