/* ============================================================
   EGO Studio — shared stylesheet
   ============================================================ */

:root{
  --ink:#000000;
  --surface:#0A0C0E;
  --surface-2:#10141A;
  --surface-3:#171C24;
  --line:#1D232B;
  --line-2:#2B333D;
  --white:#FFFFFF;
  --grey:#97A0AB;
  --grey-2:#636B76;
  --amber:#FFA836;
  --amber-2:#FFC271;
  --amber-dim:#8A5A16;
  --glow:rgba(255,168,54,.16);

  --f:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --m:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --wrap:1240px;
  --gut:28px;
  --r:18px;
  --ease:cubic-bezier(.22,.7,.28,1);
}

*{box-sizing:border-box}
/* overflow-x:clip, not hidden — hidden makes the root a scroll container,
   which silently disables position:sticky for every descendant */
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:90px}
body{
  margin:0;max-width:100%;overflow-x:clip;
  background:var(--ink);color:var(--white);
  font-family:var(--f);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.035em;line-height:.98;text-wrap:balance}
p{margin:0}
button{font-family:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.eyebrow{
  font-family:var(--m);font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--amber);display:inline-block;
}

/* ---------- scroll progress ---------- */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--amber);z-index:200;transition:width .1s linear}

/* ---------- page transition veil ---------- */
/* invisible unless we are deliberately leaving the page — content never
   depends on an animation or a JS class to become visible */
#veil{
  position:fixed;inset:0;background:var(--ink);z-index:300;
  opacity:0;pointer-events:none;
}
body.leaving #veil{opacity:1;pointer-events:all;transition:opacity .32s var(--ease)}

/* ---------- reveals ---------- */
.w{display:inline-block;will-change:transform,filter,opacity}
[data-anim] .w{opacity:0;filter:blur(14px);transform:translateY(10px)}
[data-anim] .w.in{opacity:1;filter:blur(0);transform:none;
  transition:opacity .6s var(--ease),filter .6s var(--ease),transform .7s var(--ease)}
[data-anim] .rise{opacity:0;transform:translateY(26px)}
[data-anim] .rise.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .8s var(--ease)}
[data-anim] .fade{opacity:0}
[data-anim] .fade.in{opacity:1;transition:opacity .9s var(--ease)}

/* ============================================================
   NAV
   ============================================================ */
nav.site{
  position:sticky;top:0;z-index:120;
  background:rgba(0,0,0,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
nav.site .bar{display:flex;align-items:center;gap:10px;padding:15px 0}

/* Contact page: the bar floats over the aurora rather than capping it, and
   only takes on its dark fill once the aurora has scrolled past — otherwise
   the links sit on plain content and stop being readable. */
body.ct nav.site{
  position:fixed;left:0;right:0;top:0;
  /* a dark tinted band rather than nothing: the aurora still reads through
     it, but the bar has an edge so the links aren't floating in space */
  background:rgba(0,0,0,.46);
  backdrop-filter:blur(9px) saturate(1.05);-webkit-backdrop-filter:blur(9px) saturate(1.05);
  border-bottom-color:rgba(255,255,255,.08);
  transition:background .35s var(--ease),border-color .35s var(--ease),
             backdrop-filter .35s var(--ease)}
body.ct.navsolid nav.site{
  background:rgba(0,0,0,.8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line)}
/* they are already on the contact page — the button has nowhere to send them */
body.ct nav.site .btn{display:none}
body.ct .hero.aur{padding-top:calc(58px + var(--navh,70px))}
.mark{font-weight:800;font-size:20px;line-height:.82;letter-spacing:-.05em;text-transform:lowercase;flex:none}
.mark b{display:block;font-size:22px;letter-spacing:-.06em;text-transform:uppercase}
.mark i{font-style:normal;color:var(--amber)}
.navsep{width:1px;height:30px;background:var(--line);margin:0 18px}
.navlinks{display:flex;gap:2px}
.navlinks a{
  font-size:15px;font-weight:500;color:var(--grey);padding:9px 15px;border-radius:999px;
  transition:color .2s,background .2s;position:relative;
}
.navlinks a:hover{color:var(--white);background:rgba(255,168,54,.1)}
.navlinks a.on{color:var(--amber)}
nav.site .sp{flex:1}
nav.site .navcal{font-family:var(--m);font-size:13.5px;color:var(--grey);margin-right:16px;white-space:nowrap}
nav.site .navcal:hover{color:var(--white)}

.burger{display:none;width:42px;height:42px;border:1px solid var(--line-2);border-radius:12px;background:transparent;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--white);transition:transform .3s var(--ease),opacity .2s}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){bottom:15px}
body.menu .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu .burger span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}

#menu{
  position:fixed;inset:0;z-index:110;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
body.menu #menu{opacity:1;pointer-events:all}
#menu a{font-size:clamp(38px,11vw,64px);font-weight:800;letter-spacing:-.04em;padding:11px 0;color:var(--white);
  opacity:0;transform:translateY(20px);transition:opacity .4s var(--ease),transform .4s var(--ease),color .2s}
body.menu #menu a{opacity:1;transform:none}
#menu a:nth-child(1){transition-delay:.05s}
#menu a:nth-child(2){transition-delay:.1s}
#menu a:nth-child(3){transition-delay:.15s}
#menu a:nth-child(4){transition-delay:.2s}
#menu a:nth-child(5){transition-delay:.25s}
#menu a:hover,#menu a.on{color:var(--amber)}
#menu .mfoot{margin-top:40px;font-family:var(--m);font-size:13px;color:var(--grey-2);line-height:2}
#menu .mfoot a{color:var(--grey);text-decoration:none}
#menu .mfoot a:hover{color:var(--amber)}

@media (max-width:940px){
  .navsep,.navlinks,nav.site .navcal{display:none}
  .burger{display:block}
  nav.site .sp{flex:1}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:15px;letter-spacing:-.01em;white-space:nowrap;
  background:var(--amber);color:#150E04;padding:13px 24px;border-radius:999px;border:none;cursor:pointer;
  transition:box-shadow .3s,background .25s,transform .12s var(--ease);
}
.btn:hover{background:var(--amber-2);box-shadow:0 0 40px rgba(255,168,54,.45)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.btn.ghost{background:transparent;color:var(--white);border:1px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--amber);color:var(--amber);box-shadow:none;background:transparent}
.btn.dark{background:#0B0D10;color:#fff}
.btn.dark:hover{background:#1A1E24;box-shadow:none}
.btn.lg{font-size:16.5px;padding:17px 32px}

/* ============================================================
   GLOW
   ============================================================ */
.glow{position:relative}
.glow::before{
  content:"";position:absolute;top:-200px;left:50%;transform:translateX(-50%);
  width:min(1100px,100%);height:560px;pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,var(--glow),transparent 70%);
}
.glow>*{position:relative;z-index:1}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:96px 0 84px;position:relative}
/* capability rail — hairline-ruled row of what we actually sell.
   Replaces the old pill cluster: rules instead of bubbles, and an amber
   underline that wipes in on hover rather than five competing outlines. */
.hero .caps{display:flex;flex-wrap:wrap;align-items:stretch;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  width:max-content;max-width:100%;margin-bottom:34px}
.hero .caps span{position:relative;padding:14px 26px;white-space:nowrap;
  font-family:var(--m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);transition:color .35s var(--ease)}
.hero .caps span:first-child{padding-left:0}
.hero .caps span+span{border-left:1px solid var(--line)}
.hero .caps span::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease)}
.hero .caps span:hover{color:var(--amber-2)}
.hero .caps span:hover::before{transform:scaleX(1)}

/* narrow: drop the vertical rules so a wrapped row doesn't start with a stray
   divider — the two horizontal rules still bracket the group */
@media (max-width:760px){
  .hero .caps{width:100%;gap:0 22px;padding:10px 0}
  .hero .caps span{padding:5px 0;font-size:10px;letter-spacing:.12em}
  .hero .caps span+span{border-left:0}
  .hero .caps span::before{display:none}
}
.hero h1{font-size:clamp(42px,7.6vw,104px);letter-spacing:-.045em;line-height:1.3}
.hero h1 .am{color:var(--amber)}
.hero-lower{display:grid;grid-template-columns:1.25fr .78fr;gap:56px;align-items:start;margin-top:40px}
.hero-lower p{font-size:clamp(17px,1.5vw,20px);color:var(--grey);max-width:46ch;line-height:1.55}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero .note{font-family:var(--m);font-size:12.5px;color:var(--grey-2);margin-top:22px}

/* overlapping media */
.hero-media{position:relative;margin-top:-118px;justify-self:end;width:100%;max-width:292px}
@media (max-width:1000px){
  .hero-lower{grid-template-columns:1fr;gap:38px}
  .hero-media{margin-top:0;justify-self:start;max-width:260px}
}

/* 9:16 frame */
.frame{
  position:relative;aspect-ratio:9/16;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(130% 60% at 50% 0%,rgba(255,168,54,.12),transparent 62%)}
.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.frame .ph{position:absolute;inset:0;display:grid;place-content:center;gap:14px;justify-items:center;
  font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2);text-align:center;padding:0 22px;line-height:1.8}
.frame .ph .dot{width:52px;height:52px;border:1.5px solid var(--amber-dim);border-radius:50%;display:grid;place-content:center}
.frame .ph .dot::after{content:"";width:0;height:0;margin-left:3px;
  border-left:12px solid var(--amber-dim);border-top:8px solid transparent;border-bottom:8px solid transparent}

/* ============================================================
   MARQUEE
   ============================================================ */
.marq{
  padding:21px 0;overflow:hidden;position:relative;background:var(--surface)}
.marq::before,.marq::after{content:"";position:absolute;top:0;bottom:0;width:140px;z-index:2;pointer-events:none}
.marq::before{left:0;background:linear-gradient(90deg,var(--surface),transparent)}
.marq::after{right:0;background:linear-gradient(270deg,var(--surface),transparent)}
.marq .track{display:flex;width:max-content;animation:slide 38s linear infinite}
.marq span{font-family:var(--m);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey-2);padding:0 28px;white-space:nowrap}
.marq span::after{content:"◆";color:var(--amber-dim);margin-left:28px;font-size:8px;vertical-align:middle}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:620px){.marq::before,.marq::after{width:56px}}

/* ============================================================
   SECTION SHELL
   ============================================================ */
section{padding:112px 0;position:relative}
/* no rule between sections — the page should read as one continuous
   scroll rather than a stack of separate panels */
section.bd{border-bottom:none}
.head{max-width:60ch;margin-bottom:58px}
.head.mid{margin-left:auto;margin-right:auto;text-align:center}
.head h2{font-size:clamp(34px,5.6vw,68px);margin-top:18px}
.head p{color:var(--grey);font-size:18.5px;margin-top:24px;line-height:1.6}

/* huge ghost numeral behind headings */
.ghostnum{
  position:absolute;top:-30px;right:0;font-size:clamp(140px,24vw,320px);font-weight:800;
  letter-spacing:-.06em;line-height:.8;color:var(--white);opacity:.028;pointer-events:none;z-index:0;user-select:none;
}

/* ============================================================
   CARDS
   ============================================================ */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media (max-width:920px){.g3,.g2{grid-template-columns:1fr}}

.card{
  position:relative;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);padding:34px 32px;overflow:hidden;
  transition:border-color .3s,transform .4s var(--ease),background .3s;
}
.card::before{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,var(--amber),transparent);opacity:.55}
.card:hover{border-color:var(--line-2);transform:translateY(-6px);background:var(--surface-3)}
.card h3{font-size:21px;letter-spacing:-.025em;margin-bottom:14px}
.card p{color:var(--grey);font-size:15.5px;line-height:1.65}
.card .num{font-family:var(--m);font-size:12px;color:var(--amber);letter-spacing:.16em;display:block;margin-bottom:22px}
.card .ico{width:46px;height:46px;border-radius:50%;display:grid;place-content:center;
  font-family:var(--m);font-size:13px;font-weight:500;color:var(--amber);
  background:rgba(255,168,54,.1);border:1px solid rgba(255,168,54,.26);margin-bottom:24px}

.lightcard{background:var(--white);color:#080A0C;border-radius:var(--r);padding:36px 32px;
  display:flex;flex-direction:column;justify-content:center;gap:20px}
.lightcard h3{font-size:27px;color:#080A0C;letter-spacing:-.035em}
.lightcard p{color:#4C545E;font-size:15.5px;line-height:1.6}
.lightcard .btn{align-self:flex-start}

/* ============================================================
   STATS
   ============================================================ */
.stats{padding:84px 0}
.stats .g{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{text-align:center;padding:0 20px;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat .n{font-size:clamp(42px,5.6vw,66px);font-weight:800;color:var(--amber);
  letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.stat .c{color:var(--grey);font-size:14.5px;margin-top:15px;line-height:1.5}
@media (max-width:860px){
  .stats .g{grid-template-columns:repeat(2,1fr);gap:48px 0}
  .stat:nth-child(2n){border-right:none}
}

/* ============================================================
   STICKY PROCESS
   ============================================================ */
.sticky-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}
.sticky-left{position:sticky;top:120px}
.sticky-left h2{font-size:clamp(34px,4.6vw,58px);margin-top:18px}
.sticky-left p{color:var(--grey);margin-top:22px;font-size:17px;line-height:1.6}
.sticky-left .bar{height:3px;background:var(--line);margin-top:34px;border-radius:2px;overflow:hidden}
.sticky-left .bar i{display:block;height:100%;width:0;background:var(--amber);transition:width .45s var(--ease)}
.sticky-left h2 .arw{color:var(--amber);font-weight:700}
.sticky-left .barhint{font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey-2);margin-top:12px;display:block}
.steps{display:flex;flex-direction:column;gap:20px}

.step{cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);padding:32px 30px;background:var(--surface-2);
  transition:border-color .35s,background .35s,transform .4s var(--ease);
}
.step.act{border-color:rgba(255,168,54,.45);background:var(--surface-3)}
.step .t{display:flex;align-items:baseline;gap:16px;margin-bottom:14px}
.step .t .k{font-family:var(--m);font-size:12.5px;color:var(--amber);letter-spacing:.16em}
.step h3{font-size:23px;letter-spacing:-.03em}
.step p{color:var(--grey);font-size:15.5px;line-height:1.65}
/* Scroll-stacked process. Each row pins one header-height lower than the
   row before it, so as the next row rides up it covers everything but the
   number and title of the one beneath — the rows collapse into a list of
   headers. The CTA card pins one header down from the top and so engulfs
   every row but the first. Scoped to .stack: the About page timeline uses
   the same .step markup and keeps its hover behaviour. */
/* this section sits higher than the rest so the stacking starts sooner */
section.proc{padding-top:60px;padding-bottom:40px}
section.proc .sticky-left{top:100px}

.steps.stack{
  display:block;
  --stick:100px;      /* where the first row parks, clear of the nav */
  --hdr:108px;        /* the strip left visible when a row is covered */
}
.steps.stack .step,
.steps.stack .ctacard{
  position:sticky;
  border-radius:var(--r);
  /* the gap is the scroll distance each row gets before the next covers it;
     small enough that all three still read as one list on arrival */
  margin-bottom:76px;
  box-shadow:0 -16px 32px rgba(0,0,0,.45);
}
.steps.stack .step{
  padding:0 clamp(22px,2.4vw,34px) 30px;
  border:1px solid var(--line);
  background:var(--surface-2);
  cursor:default;
}
.steps.stack .step:nth-child(1){top:var(--stick);z-index:1}
.steps.stack .step:nth-child(2){top:calc(var(--stick) + var(--hdr));z-index:2}
.steps.stack .step:nth-child(3){top:calc(var(--stick) + var(--hdr) * 2);z-index:3}

/* the header strip: big bold numeral, title beside it */
.steps.stack .step .t{
  display:flex;align-items:center;gap:clamp(18px,3vw,52px);
  height:var(--hdr);margin:0;
}
.steps.stack .step .t .k{
  font-family:var(--f);font-weight:800;color:var(--white);
  font-size:clamp(30px,3.4vw,52px);letter-spacing:-.045em;
  min-width:2.05em;
}
.steps.stack .step .t h3{
  font-size:clamp(21px,2.6vw,38px);font-weight:800;
  letter-spacing:-.035em;color:var(--white);line-height:1.05;
}
.steps.stack .step p{color:var(--grey);font-size:15.5px;line-height:1.65;max-width:54ch}
/* no .act highlight here: a half-covered row shows only part of its
   outline, which reads as a glitch. The progress bar carries the state. */

/* the closing card, which rides up over the rows */
.steps.stack .ctacard{
  top:var(--stick);z-index:4;   /* level with the heading, over all rows */
  margin-top:90px;   /* arrives after row 03 has collapsed, not alongside it */
  margin-bottom:0;   /* bottom margin would eat into its sticky range */
  background:#E9EAEC;color:#0B0E12;
  padding:clamp(28px,3vw,40px) clamp(22px,2.4vw,34px);
  min-height:360px;display:flex;flex-direction:column;justify-content:center;
}
.steps.stack .ctacard h3{
  font-size:clamp(27px,3.1vw,43px);font-weight:800;letter-spacing:-.04em;
  line-height:1.08;color:#0B0E12;max-width:13ch;
}
.steps.stack .ctacard .btn{
  margin-top:clamp(24px,2.6vw,34px);width:100%;justify-content:center;
}

/* A sticky element is constrained by its parent's CONTENT box, not its
   padding box — so padding-bottom buys the closing card no sticky range at
   all, and a bottom margin cancels out on both sides of the sum. Only real
   content below it works, hence this spacer: its height is how long the card
   stays parked before the section scrolls away. */
.steps.stack .stackend{height:12vh;pointer-events:none}

/* measurement pass: natural layout, no sticky shift, no reveal offset */
.steps.stack.measuring .step,
.steps.stack.measuring .ctacard{position:static;transform:none}

@media (max-width:980px){
  section.proc{padding-top:44px;padding-bottom:28px}
  .steps.stack{--stick:80px;--hdr:84px}
  .steps.stack .step{margin-bottom:56px}
  .steps.stack .ctacard{margin-top:66px}
  .steps.stack .ctacard{min-height:300px}
}
@media (prefers-reduced-motion:reduce){
  .steps.stack .step,
  .steps.stack .ctacard{position:static;box-shadow:none}
}

@media (max-width:980px){
  .sticky-wrap{grid-template-columns:1fr;gap:40px}
  .sticky-left{position:static}
}

/* ============================================================
   CAROUSEL
   ============================================================ */
.carou{position:relative}
.carou-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.carou-nav{display:flex;gap:10px}
.cbtn{width:50px;height:50px;border-radius:50%;border:1px solid var(--line-2);background:transparent;
  color:var(--white);cursor:pointer;display:grid;place-content:center;transition:border-color .25s,color .25s,background .25s}
.cbtn:hover{border-color:var(--amber);color:var(--amber)}
.cbtn:disabled{opacity:.3;cursor:default;border-color:var(--line)}
.cbtn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

.rail{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:6px;cursor:grab;
}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.slide{flex:0 0 clamp(230px,26vw,300px);scroll-snap-align:start}
.slide figcaption{font-family:var(--m);font-size:12px;color:var(--grey-2);margin-top:16px;letter-spacing:.06em}
.slide .tag{color:var(--amber)}
.railbar{height:2px;background:var(--line);margin-top:30px;border-radius:2px;overflow:hidden}
.railbar i{display:block;height:100%;width:20%;background:var(--amber);border-radius:2px;transition:transform .15s linear}

/* ============================================================
   OVERLAP SHOWCASE
   ============================================================ */
.overlap{position:relative;padding:40px 0}
.overlap .big{
  font-size:clamp(54px,12vw,164px);font-weight:800;letter-spacing:-.05em;line-height:1.14;
  position:relative;z-index:2;pointer-events:none;
}
.overlap .big .am{color:var(--amber)}
.overlap .big .dim{color:var(--grey-2)}
.overlap .media{
  position:absolute;top:50%;right:4%;transform:translateY(-50%) rotate(3deg);
  width:clamp(170px,22vw,262px);z-index:1;
}
@media (max-width:820px){
  .overlap .media{position:relative;top:auto;right:auto;transform:none;margin:30px 0 0;width:210px}
}

/* ============================================================
   PRICING
   ============================================================ */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
@media (max-width:920px){.plans{grid-template-columns:1fr}}
.plan{position:relative;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);padding:38px 34px;display:flex;flex-direction:column;
  transition:border-color .3s,transform .4s var(--ease)}
.plan:hover{transform:translateY(-6px)}
.plan.feat{border-color:rgba(255,168,54,.4)}
.plan.feat::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--amber),transparent)}
.plan .top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.plan h3{font-size:24px;letter-spacing:-.03em}
.plan .amt{font-size:46px;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--white)}
.plan .amt span{font-size:15px;font-weight:500;color:var(--grey-2);letter-spacing:0}
.plan.feat .amt{color:var(--amber)}
.plan .tag{color:var(--grey);font-size:15px;margin:8px 0 26px;line-height:1.5}
.plan ul{list-style:none;margin:0 0 30px;padding:0;flex:1}
.plan li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5}
.plan li:first-child{border-top:1px solid var(--line)}
.plan li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--amber);margin-top:9px}
.plan .fine{font-size:13.5px;color:var(--grey-2);margin:0 0 26px;line-height:1.65}
.plan .btn{align-self:flex-start}

/* ============================================================
   BANNER / CTA
   ============================================================ */
.banner{background:var(--white);color:#080A0C;border-radius:26px;padding:52px 48px;
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
@media (max-width:860px){.banner{grid-template-columns:1fr;padding:36px 30px;gap:28px}}
.banner .eyebrow{color:#9A6413}
.banner h2{font-size:clamp(28px,4vw,46px);color:#080A0C;margin-top:16px;max-width:22ch}
.banner p{color:#535B65;font-size:15.5px;margin-top:20px;max-width:58ch;line-height:1.65}

.bigcta{padding:130px 0;text-align:center;position:relative;overflow:hidden}
.bigcta h2{font-size:clamp(40px,8vw,96px);max-width:15ch;margin:0 auto;letter-spacing:-.05em}
.bigcta p{color:var(--grey);font-size:19px;margin:28px auto 0;max-width:48ch}
.bigcta .ctas{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:42px}
.bigcta .direct{font-family:var(--m);font-size:13.5px;color:var(--grey);margin-top:34px}
.bigcta .direct a{color:var(--amber)}
.bigcta .direct a:hover{text-decoration:underline}

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{position:relative;border-top:1px solid var(--line);overflow:hidden}
/* warm glow washing in from the bottom-left corner, on every page —
   anchored under the logo so it lifts the brand mark rather than
   sitting as a symmetrical halo under the middle of the footer */
footer.site::before{content:"";position:absolute;left:-18%;bottom:-58%;
  width:min(1150px,105%);height:820px;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side at 50% 50%,
    rgba(255,168,54,.36) 0%,rgba(255,168,54,.15) 44%,transparent 74%)}
@media (max-width:760px){
  footer.site::before{left:-42%;bottom:-48%;width:150%;height:560px}
}
footer.site > *{position:relative;z-index:1}
.fmain{position:relative;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px;padding:72px 0 52px}
@media (max-width:860px){.fmain{grid-template-columns:1fr 1fr;gap:40px 24px}}
.fbrand .mark{font-size:28px}
.fbrand .mark b{font-size:31px}
.fbrand .hr{height:1px;background:var(--line-2);margin:24px 0 20px;max-width:210px}
.fbrand p{color:var(--grey-2);font-size:13.5px;line-height:1.7;max-width:32ch}
.fcol h4{font-size:15px;font-weight:700;margin:0 0 18px;letter-spacing:-.01em}
.fcol a{display:block;color:var(--grey);font-size:14.5px;padding:6px 0;transition:color .2s}
.fcol a:hover{color:var(--amber)}
.fbar{position:relative;border-top:1px solid var(--line);padding:22px 0 44px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--m);font-size:12px;color:var(--grey-2)}

/* ============================================================
   FORM
   ============================================================ */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.formgrid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:9px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2)}
.field input,.field textarea,.field select{
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:15px 17px;color:var(--white);font-family:var(--f);font-size:16px;
  transition:border-color .25s,background .25s;width:100%;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--amber);background:var(--surface-3)}
.field input::placeholder,.field textarea::placeholder{color:var(--grey-2)}

/* ============================================================
   MULTI-STEP FORM
   Steps are stacked absolutely and the viewport's height is driven from
   script, so one step can cross-fade into the next without the page
   jumping. Without script every step simply stays in flow and visible.
   ============================================================ */
/* --- aurora backdrop -------------------------------------------------
   One colour — the brand amber — in three blurred ribbons that sweep the
   full width on long, differently-timed loops. Each starts and ends fully
   off screen, so the loop never pops, and the negative delays mean there
   is always light on the page without them travelling in formation. */
.hero.aur{position:relative;overflow:hidden;padding:76px 0 92px;isolation:isolate}
.aurora{position:absolute;inset:-38% -12%;z-index:0;pointer-events:none;filter:blur(66px)}
.aurora i{position:absolute;display:block;border-radius:50%;
  mix-blend-mode:screen;will-change:transform}

.aurora i:nth-child(1){
  width:96vw;height:60vw;top:-18%;left:-104vw;opacity:1;
  background:radial-gradient(ellipse at center,rgba(255,168,54,1),rgba(255,168,54,.42) 48%,transparent 74%);
  animation:sweepA 26s linear infinite}
.aurora i:nth-child(2){
  width:78vw;height:52vw;top:10%;left:-90vw;opacity:.92;
  background:radial-gradient(ellipse at center,rgba(255,168,54,.92),rgba(255,168,54,.34) 48%,transparent 74%);
  animation:sweepB 34s linear infinite;animation-delay:-13s}
.aurora i:nth-child(3){
  width:112vw;height:66vw;bottom:-26%;left:-120vw;opacity:.85;
  background:radial-gradient(ellipse at center,rgba(255,168,54,.85),rgba(255,168,54,.28) 48%,transparent 74%);
  animation:sweepC 44s linear infinite;animation-delay:-27s}

.aurora i:nth-child(4){
  width:70vw;height:46vw;top:44%;left:-84vw;opacity:.8;
  background:radial-gradient(ellipse at center,rgba(255,168,54,.88),rgba(255,168,54,.30) 48%,transparent 74%);
  animation:sweepB 30s linear infinite;animation-delay:-22s}

@keyframes sweepA{
  0%{transform:translate3d(0,0,0) scale(1)}
  25%{transform:translate3d(55vw,5vh,0) scale(1.14)}
  50%{transform:translate3d(110vw,-4vh,0) scale(.94)}
  75%{transform:translate3d(165vw,6vh,0) scale(1.1)}
  100%{transform:translate3d(220vw,0,0) scale(1)}}
@keyframes sweepB{
  0%{transform:translate3d(0,0,0) scale(1.05)}
  30%{transform:translate3d(66vw,-6vh,0) scale(.92)}
  65%{transform:translate3d(143vw,7vh,0) scale(1.18)}
  100%{transform:translate3d(220vw,0,0) scale(1.05)}}
@keyframes sweepC{
  0%{transform:translate3d(0,0,0) scale(.98)}
  35%{transform:translate3d(82vw,6vh,0) scale(1.16)}
  70%{transform:translate3d(164vw,-5vh,0) scale(.95)}
  100%{transform:translate3d(235vw,0,0) scale(.98)}}

.hero.aur > .wrap{position:relative;z-index:1}

.chead{max-width:880px;margin:0 auto 48px;text-align:center}
.chead h1{font-size:clamp(34px,5.2vw,68px);letter-spacing:-.045em;line-height:1.08}
.chead p{color:var(--grey);font-size:clamp(16px,1.5vw,19px);line-height:1.6;
  max-width:62ch;margin:22px auto 0}

/* --- the glass card ------------------------------------------------- */
.wiz{max-width:720px;margin:0 auto;
  background:rgba(10,12,16,.55);
  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;
  padding:clamp(26px,3vw,40px);
  box-shadow:0 30px 80px rgba(0,0,0,.45)}
@supports (backdrop-filter:blur(20px)){
  .wiz{background:rgba(10,12,16,.42);backdrop-filter:blur(22px) saturate(1.2)}
}
/* inside the glass the inputs sit lighter than the card, not darker */
.wiz .field input,.wiz .field textarea,.wiz .field select,
.wiz .chip span{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.11)}
.wiz .field input:focus,.wiz .field textarea:focus,.wiz .field select:focus{
  background:rgba(255,255,255,.075);border-color:var(--amber)}
.wiz .chip:hover span{background:rgba(255,255,255,.08)}
.wiz .chip input:checked + span{background:rgba(255,168,54,.16);border-color:var(--amber)}

/* the blobs are sized in vw, so on a phone they'd shrink to nothing —
   scale them well past the viewport so the light still reads */
@media (max-width:760px){
  .aurora{filter:blur(48px)}
  .aurora i:nth-child(1){width:150vw;height:95vw;top:-16%}
  .aurora i:nth-child(2){width:130vw;height:85vw;top:20%}
  .aurora i:nth-child(3){width:170vw;height:105vw;bottom:-20%}
}

@media (prefers-reduced-motion:reduce){
  .aurora i{animation:none}
}
.wiztitle{font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1.1}

.wizbar{margin:0 0 30px}
.wizmeta{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey-2);margin-bottom:12px}
.wizmeta #wizpct{color:var(--amber)}
.wiztrack{height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.wiztrack i{display:block;height:100%;width:25%;border-radius:2px;
  background:linear-gradient(90deg,var(--amber),var(--amber-2));
  transition:width .5s var(--ease)}

.wizview{position:relative}
.wiz.on .wizview{transition:height .45s var(--ease)}
.wiz.on .wstep{
  position:absolute;top:0;left:0;width:100%;
  opacity:0;visibility:hidden;transform:translateX(34px);
  transition:opacity .34s var(--ease),transform .46s var(--ease),visibility .46s;
}
.wiz.on .wstep.is-on{opacity:1;visibility:visible;transform:none}
.wiz.on .wstep.is-back{transform:translateX(-34px)}
.wstep + .wstep{margin-top:44px}            /* no-script fallback spacing */
.wiz.on .wstep + .wstep{margin-top:0}

.wstep{padding:0}   /* these are <section> tags: drop the sitewide section padding */
.wstep h3{font-size:clamp(21px,2.2vw,27px);font-weight:800;letter-spacing:-.03em}
.wstep .wsub{color:var(--grey);margin:10px 0 26px;font-size:16px}

.field .hint{font-family:var(--m);font-size:11.5px;color:var(--grey-2);line-height:1.5}
.field .hint-top{margin-top:-4px;margin-bottom:2px}
.field label .opt{font-style:normal;text-transform:none;letter-spacing:0;
  font-size:11px;color:var(--grey-2);opacity:.8}

/* country code + number */
.phonerow{display:grid;grid-template-columns:210px 1fr;gap:12px}
@media (max-width:620px){.phonerow{grid-template-columns:1fr}}

/* multi-select chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.field .chip{font-family:var(--f);font-size:14.5px;letter-spacing:normal;
  text-transform:none;color:inherit}
.chip span{display:block;padding:11px 17px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface-2);
  font-size:14.5px;color:var(--grey);
  transition:border-color .25s,background .25s,color .25s}
.chip:hover span{border-color:var(--line-2);color:var(--white)}
.chip input:checked + span{
  border-color:var(--amber);background:rgba(255,168,54,.12);color:var(--amber-2)}
.chip input:focus-visible + span{outline:2px solid var(--amber);outline-offset:2px}

/* validation */
.field.err input,.field.err select,.field.err textarea{border-color:#E5484D}
.field.err .chip span{border-color:rgba(229,72,77,.6)}
.errmsg{display:none;font-family:var(--m);font-size:11.5px;color:#FF8A8D}
.field.err .errmsg{display:block}

.senderr{font-family:var(--m);font-size:12.5px;color:#FF8A8D;margin-top:16px}
.wnav{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.wnav .btn{min-width:150px;justify-content:center}
@media (max-width:520px){.wnav{flex-direction:column}.wnav .btn{width:100%}}

/* ============================================================
   MISC
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
/* form column gets the room; collapses with .split at the same breakpoint */
.split.wide{grid-template-columns:1.35fr .65fr}
@media (max-width:920px){.split,.split.wide{grid-template-columns:1fr;gap:40px}}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{display:flex;gap:16px;align-items:flex-start;padding:17px 0;border-bottom:1px solid var(--line);font-size:16.5px}
.ticks li:first-child{border-top:1px solid var(--line)}
.ticks li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--amber);margin-top:10px}
.quote{border-left:2px solid var(--amber);padding:6px 0 6px 28px;margin:34px 0}
.quote p{font-size:clamp(20px,2.4vw,27px);line-height:1.45;letter-spacing:-.025em}
.quote .who{font-family:var(--m);font-size:12.5px;color:var(--grey-2);margin-top:18px;letter-spacing:.06em}

.faqitem{border-bottom:1px solid var(--line)}
.faqq{width:100%;background:none;border:none;color:var(--white);text-align:left;cursor:pointer;
  padding:26px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:19px;font-weight:700;letter-spacing:-.02em;font-family:var(--f)}
.faqq .pm{flex:none;width:26px;height:26px;position:relative}
.faqq .pm::before,.faqq .pm::after{content:"";position:absolute;background:var(--amber);border-radius:2px;
  top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .3s var(--ease)}
.faqq .pm::before{width:14px;height:1.5px}
.faqq .pm::after{width:1.5px;height:14px}
.faqitem.open .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faqa{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faqa p{color:var(--grey);font-size:16px;line-height:1.7;padding-bottom:28px;max-width:70ch}

@media (max-width:620px){
  :root{--gut:20px}
  section{padding:76px 0}
  .head{margin-bottom:38px}
  .hero{padding:58px 0 56px}
  .stats{padding:56px 0}
  .bigcta{padding:84px 0}
  .card{padding:28px 24px}
  .plan{padding:30px 26px}
  .step{padding:26px 24px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marq .track{animation:none}
  *{transition:none!important;animation:none!important}
}


/* ============================================================
   AMBIENT MOTION — always running, never scroll-dependent
   ============================================================ */

/* --- rotating word in the hero --- */
/* the mask height must equal the line-height and sit on the line box bottom,
   otherwise an overflow:hidden inline-block rides above the baseline */
.rot{--step:1.3em;display:inline-block;overflow:hidden;height:var(--step);
     line-height:var(--step);vertical-align:bottom;
     /* max-content stops the box shrinking to the leftover line space and
        clipping the wider words; it also keeps the width stable as they cycle */
     width:max-content}
.rot .rotin{display:block;animation:rotcycle 13s infinite}
.rot .rotin b{display:block;height:var(--step);line-height:var(--step);
     font-weight:800;color:var(--amber);white-space:nowrap}
@keyframes rotcycle{
  0%,13%   {transform:translateY(0)}
  17%,30%  {transform:translateY(calc(var(--step) * -1))}
  34%,47%  {transform:translateY(calc(var(--step) * -2))}
  51%,64%  {transform:translateY(calc(var(--step) * -3))}
  68%,81%  {transform:translateY(calc(var(--step) * -4))}
  85%,100% {transform:translateY(calc(var(--step) * -5))}
}

/* --- reverse marquee --- */
.marq.rev{background:var(--ink);border-top:none}
.marq.rev::before{background:linear-gradient(90deg,var(--ink),transparent)}
.marq.rev::after{background:linear-gradient(270deg,var(--ink),transparent)}
.marq.rev .track{animation:slideback 44s linear infinite}
.marq.rev span{color:var(--grey-2)}
.marq.rev span::after{color:var(--line-2)}
@keyframes slideback{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* --- drifting ambient glow --- */
.glow::before{animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{
  from{transform:translateX(-52%) translateY(0) scale(1)}
  to  {transform:translateX(-48%) translateY(26px) scale(1.07)}
}

/* --- shimmer across card top edges --- */
.card::before,.plan.feat::before{
  background:linear-gradient(90deg,transparent,var(--amber),transparent);
  background-size:220% 100%;animation:shimmer 6s linear infinite;
}
.plan.feat::before{animation-duration:4.5s}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}

/* --- live pulse badge --- */
.live{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line-2);
  border-radius:999px;padding:9px 18px 9px 14px;font-family:var(--m);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.live .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);position:relative;flex:none}
.live .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--amber);
  animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(2.8);opacity:0}}

/* --- hero frame slow float --- */
.hero-media .frame{animation:float 9s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-14px)}}

/* --- rotating conic border on the featured plan --- */
.plan.feat{isolation:isolate}
.plan.feat::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;padding:1px;
  background:conic-gradient(from var(--a,0deg),transparent 0 62%,rgba(255,168,54,.85) 78%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin 7s linear infinite;
}
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spin{to{--a:360deg}}

/* --- arrow nudge on buttons --- */
.btn .ar{animation:nudge 2.6s ease-in-out infinite}
.btn:hover .ar{animation:none}
@keyframes nudge{0%,88%,100%{transform:translateX(0)}94%{transform:translateX(4px)}}

/* --- underline sweep on footer + nav links --- */
.fcol a{position:relative}
.fcol a::after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:0;
  background:var(--amber);transition:width .35s var(--ease)}
.fcol a:hover::after{width:100%}

/* --- slow pan on the ghost numerals --- */
.ghostnum{animation:ghostdrift 26s ease-in-out infinite alternate}
@keyframes ghostdrift{from{transform:translateY(0)}to{transform:translateY(-26px)}}

@media (prefers-reduced-motion:reduce){
  .rot .rotin,.marq.rev .track,.glow::before,.card::before,.plan.feat::before,
  .plan.feat::after,.live .dot::after,.hero-media .frame,.ghostnum{animation:none!important}
  .rot{height:auto}
  .rot .rotin{transform:none!important}
  .rot .rotin b:not(:first-child){display:none}
}


/* ============================================================
   CURSOR — leading dot, trailing ring
   The dot tracks the pointer exactly. The ring eases after it,
   and once the dot pushes past the ring's edge it drags the
   ring along, so fast movement flicks the ring behind you.
   ============================================================ */
/* off by default — only the gated block below turns them on, so a desktop
   window dragged narrow drops the cursor instead of leaving it stranded */
#cur-ring,#cur-dot{display:none}

@media (pointer:fine) and (hover:hover) and (min-width:901px){
  html.cursor-on,
  html.cursor-on a,
  html.cursor-on button,
  html.cursor-on .rail{cursor:none}
  /* typing must still feel normal */
  html.cursor-on input,
  html.cursor-on textarea,
  html.cursor-on select{cursor:auto}

  #cur-ring,#cur-dot{
    display:block;
    position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
    border-radius:50%;opacity:0;transition:opacity .25s ease;
    will-change:transform;
  }
  html.cursor-ready #cur-ring,
  html.cursor-ready #cur-dot{opacity:1}

  #cur-ring{
    width:36px;height:36px;margin:-18px 0 0 -18px;
    border:1.5px solid rgba(255,168,54,.55);
    background:radial-gradient(circle,rgba(255,168,54,.10) 0%,transparent 70%);
    transition:opacity .25s ease,width .28s var(--ease),height .28s var(--ease),
               margin .28s var(--ease),border-color .28s var(--ease),
               background .28s var(--ease);
  }
  #cur-dot{
    width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
    background:var(--amber);
    box-shadow:0 0 12px rgba(255,168,54,.75);
    transition:opacity .25s ease,width .22s var(--ease),height .22s var(--ease),
               margin .22s var(--ease),background .22s var(--ease);
  }

  /* over something clickable: ring opens up, dot swells */
  html.cur-hot #cur-ring{
    width:58px;height:58px;margin:-29px 0 0 -29px;
    border-color:rgba(255,194,113,.9);
    background:radial-gradient(circle,rgba(255,168,54,.18) 0%,transparent 70%);
  }
  html.cur-hot #cur-dot{
    width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--amber-2);
  }

  /* pressed */
  html.cur-down #cur-ring{width:28px;height:28px;margin:-14px 0 0 -14px}
}

@media (prefers-reduced-motion:reduce){
  #cur-ring,#cur-dot{display:none}
  html.cursor-on,html.cursor-on a,html.cursor-on button{cursor:auto}
}

/* ============================================================
   3D RING CAROUSEL — work page
   ============================================================ */
.ring3d{--tw:250px;position:relative;margin-top:34px;overflow:hidden;padding:30px 0 10px}
@media (max-width:720px){.ring3d{--tw:168px}}
.ring3d-stage{perspective:2600px;perspective-origin:50% 45%;height:calc(var(--tw) * 16 / 9 + 40px);
  display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ring3d-stage.drag{cursor:grabbing}
.ring3d-ring{position:relative;width:var(--tw);height:calc(var(--tw) * 16 / 9);transform-style:preserve-3d;will-change:transform}
.ring3d-item{position:absolute;inset:0;margin:0;border-radius:18px;overflow:hidden;background:#0d0d0d;
  border:1px solid rgba(255,255,255,.09);box-shadow:0 40px 70px -30px rgba(0,0,0,.9);
  }
.ring3d-item video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ring3d-nav{display:flex;gap:10px;justify-content:center;margin-top:22px}
/* decorative play button — purely visual, clicks pass straight through */
.ring3d-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 8px 30px rgba(0,0,0,.35);pointer-events:none}
.ring3d-play::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;margin:-11px 0 0 -6px;
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent rgba(255,255,255,.92)}
@media (max-width:720px){.ring3d-play{width:50px;height:50px;margin:-25px 0 0 -25px}.ring3d-play::after{margin:-9px 0 0 -5px;border-width:9px 0 9px 15px}}