/* ==========================================================================
   Kalstech design system
   Theme lock: dark only (the brand is a dark brand).
   Accent lock: magenta. The violet-to-magenta gradient is the one brand device.
   Radius rule: media and cards 20px, chips and inputs 12px, buttons full pill.
   ========================================================================== */

:root{
  /* surfaces */
  --ink:#08010F;
  --base:#140921;
  --raise:#1B0B2C;
  --raise-2:#25113B;
  --plum:#3D0F41;

  /* brand */
  --violet:#7C3BCB;
  --magenta:#D91FA8;
  --hot:#F553BC;          /* brighter tint of the accent, for small type on dark */
  --accent:var(--magenta);
  --grad:linear-gradient(112deg,var(--violet) 0%,var(--magenta) 100%);
  --grad-hot:linear-gradient(112deg,#9B5BE0 0%,#F553BC 100%);
  --grad-soft:linear-gradient(112deg,rgba(124,59,203,.26) 0%,rgba(217,31,168,.26) 100%);

  /* ink */
  --text:#F6F1FA;
  --muted:#C0B2CE;
  --dim:#9585A8;

  /* lines */
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.2);

  /* shape */
  --r-lg:20px;
  --r-sm:12px;
  --shell:1440px;
  --gut:clamp(20px,4vw,56px);

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.32,.72,0,1);
  --t:.6s var(--ease);

  /* type */
  --display:'Clash Display','Satoshi',system-ui,sans-serif;
  --body:'Satoshi',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--base)}
/* One fixed light layer under everything, so the page reads as lit rather
   than as a flat dark rectangle. Fixed and pointer-events none, so it costs
   one composited layer and nothing else. */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58vw 58vw at 84% 2%,rgba(217,31,168,.20),transparent 62%),
    radial-gradient(52vw 52vw at 4% 34%,rgba(124,59,203,.20),transparent 64%),
    radial-gradient(46vw 46vw at 74% 66%,rgba(124,59,203,.15),transparent 62%),
    radial-gradient(44vw 44vw at 14% 92%,rgba(217,31,168,.13),transparent 64%);
}
body{
  margin:0;
  background:transparent;
  color:var(--text);
  font-family:var(--body);
  font-size:clamp(15px,.42vw + 14px,17px);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip; /* clip, not hidden: hidden breaks position:sticky and GSAP pin */
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;line-height:1.02;letter-spacing:-.025em}
p{margin:0}

::selection{background:var(--magenta);color:#fff}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;background:var(--magenta);color:#fff;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* fixed film grain, never on a scrolling container */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- layout primitives ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.sec{position:relative;padding-block:clamp(58px,6vw,96px)}
.sec--tight{padding-block:clamp(42px,4vw,64px)}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--hot);margin:0 0 16px;
}
.eyebrow::before{content:'';width:22px;height:2px;border-radius:2px;background:var(--grad-hot)}
.lead{color:var(--muted);max-width:62ch;font-size:1.03rem}

.h-xl{font-size:clamp(2.6rem,7.2vw,6rem)}
.h-lg{font-size:clamp(2.1rem,4.6vw,3.9rem)}
.h-md{font-size:clamp(1.5rem,2.4vw,2.1rem)}

.grad-text{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--grad);
  display:inline-flex;align-items:center;gap:14px;
  padding:13px 13px 13px 26px;border-radius:999px;
  background:var(--bg);color:#fff;font-weight:700;font-size:.94rem;
  white-space:nowrap;line-height:1;
  transition:transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft),filter .35s var(--ease-soft);
  box-shadow:0 10px 30px -12px rgba(201,33,158,.65),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn:hover{transform:translateY(-2px);filter:saturate(1.12)}
.btn:active{transform:scale(.98)}
.btn__dot{
  display:grid;place-items:center;width:30px;height:30px;border-radius:999px;
  background:rgba(255,255,255,.16);
  transition:transform .35s var(--ease-soft),background .35s var(--ease-soft);
}
.btn:hover .btn__dot{transform:translate(3px,-2px) scale(1.06);background:rgba(255,255,255,.26)}
.btn--sm{padding:9px 9px 9px 20px;font-size:.86rem}
.btn--sm .btn__dot{width:26px;height:26px}
.btn--ghost{
  --bg:transparent;border:1px solid var(--line-2);
  box-shadow:none;color:var(--text);
}
.btn--ghost:hover{border-color:var(--magenta);background:rgba(201,33,158,.08)}
.btn--ghost .btn__dot{background:rgba(255,255,255,.08)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:16px 0 auto;z-index:80;pointer-events:none}
.nav__shell{
  pointer-events:auto;
  width:min(var(--shell) - 24px,calc(100% - 32px));margin-inline:auto;
  display:flex;align-items:center;gap:28px;
  height:66px;padding:0 12px 0 22px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(20,9,33,.55);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 50px -30px #000;
  transition:height .4s var(--ease-soft),background .4s var(--ease-soft);
}
body.scrolled .nav__shell{height:58px;background:rgba(11,3,20,.82)}
.nav__brand{display:flex;align-items:center}
.nav__brand img{width:auto;height:30px;opacity:.98}
.nav__links{display:flex;gap:6px;margin-left:auto;font-size:.9rem;font-weight:500}
.nav__links a{position:relative;padding:8px 14px;border-radius:999px;color:var(--muted);transition:color .3s var(--ease)}
.nav__links a:hover{color:var(--text)}
.nav__links a[aria-current]{color:var(--text)}
.nav__links a[aria-current]::after{
  content:'';position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;background:var(--grad);
}
/* both bars are absolutely centred, so the open state only has to drop the
   offset and rotate. As grid items they sat in two rows 22px apart and the
   nudge that was meant to close the gap was nowhere near big enough. */
.burger{display:none;position:relative;width:44px;height:44px;border-radius:999px;border:1px solid var(--line)}
.burger span{
  position:absolute;left:50%;top:50%;width:17px;height:1.6px;
  background:var(--text);border-radius:2px;
  transition:transform .4s var(--ease-soft);
}
.burger span:first-child{transform:translate(-50%,-50%) translateY(-3.5px)}
.burger span:last-child{transform:translate(-50%,-50%) translateY(3.5px)}
body.menu-open .burger span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
body.menu-open .burger span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:70;display:grid;align-content:center;gap:8px;
  padding:120px var(--gut) 60px;
  background:rgba(8,1,15,.9);
  backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  opacity:0;pointer-events:none;transition:opacity .45s var(--ease-soft);
}
/* the author display:grid above beats the hidden attribute's UA display:none,
   so state it here: closed means gone, not an invisible full screen click trap */
.menu[hidden]{display:none}
body.menu-open .menu{opacity:1;pointer-events:auto}
.menu__links{display:grid;gap:2px}
.menu__links a{
  font-family:var(--display);font-size:clamp(2rem,9vw,3.2rem);font-weight:600;letter-spacing:-.03em;
  padding:6px 0;opacity:0;transform:translateY(28px);
  transition:opacity .5s var(--ease) calc(var(--i) * .05s),transform .5s var(--ease) calc(var(--i) * .05s);
}
.menu__foot{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;color:var(--muted);font-size:.95rem;
  opacity:0;transform:translateY(28px);
  transition:opacity .5s var(--ease) calc(var(--i) * .05s),transform .5s var(--ease) calc(var(--i) * .05s);
}
body.menu-open .menu__links a,body.menu-open .menu__foot{opacity:1;transform:none}

/* ==========================================================================
   Hero: asymmetric split, kinetic display type
   ========================================================================== */
.hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;padding-top:120px;padding-bottom:clamp(40px,6vw,80px);overflow:hidden}

.hero__grid{
  position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(16px,2vw,32px);align-items:center;width:100%;
}
/* the visual is allowed to reach under the copy column, so the copy paints
   above it and the clip's left edge fades out before it reaches the text */
.hero__copy{position:relative;z-index:2;display:grid;gap:0;align-content:center}
/* capped so "empire digitally" always holds on one line inside the copy
   column. A 3 line hero headline is a font size error, not a copy problem. */
.hero__title{font-size:clamp(2.5rem,5.5vw,5.1rem);line-height:.94;letter-spacing:-.045em;font-weight:600}
.hero__title .w{display:inline-block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero__title .w>span{display:inline-block}
.js .hero__title .w>span{transform:translateY(105%)}
.hero__rule{height:1px;background:linear-gradient(90deg,var(--line-2),transparent);margin:clamp(22px,3vw,34px) 0 22px;max-width:340px}
.hero__copy>p{color:var(--muted);max-width:42ch;font-size:1.05rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.hero__visual{
  position:relative;justify-self:end;
  width:min(134%,880px);margin-right:clamp(-96px,-6vw,0px);
  /* also capped by viewport height, or a short laptop screen pushes the
     hero CTAs below the fold. 1.19 is the visual's own aspect ratio. */
  max-width:min(calc((100dvh - 250px) * 1.19),54vw);
}

/* ==========================================================================
   Insignia banner: the brand mark drawn stroke by stroke
   ========================================================================== */
.hero--ins{
  position:relative;overflow:hidden;border-top:1px solid var(--line);
  background:#050109;
}
.hero--ins>.shell{position:relative;z-index:1}
.hero--ins .hero__visual{width:min(112%,640px);margin-right:0;justify-self:center}

/* receding grid. Tipping one plane in CSS perspective gives real depth for the
   cost of two pseudo-elements, where a WebGL floor would cost a renderer. */
.ins__floor{
  position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:200%;height:min(48%,360px);pointer-events:none;
  perspective:340px;perspective-origin:50% 0;overflow:hidden;
}
.ins__floor>i{
  position:absolute;left:-40%;right:-40%;top:0;height:320%;display:block;
  transform:rotateX(74deg);transform-origin:50% 0;
  background-image:
    linear-gradient(90deg,rgba(216,150,255,.17) 1px,transparent 1px),
    linear-gradient(rgba(216,150,255,.17) 1px,transparent 1px);
  background-size:64px 64px;
  /* the top of the plane is the horizon, the bottom is under the viewer, so
     fade both ends or the near cells read as fat stripes across the copy */
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,rgba(0,0,0,.28) 28%,transparent 48%);
  mask-image:linear-gradient(180deg,transparent,#000 10%,rgba(0,0,0,.28) 28%,transparent 48%);
}
/* haze on the horizon line, so the grid arrives out of the dark */
.ins__floor::after{
  content:'';position:absolute;left:50%;top:0;translate:-50% -54%;
  width:80%;height:170px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(217,31,168,.22),rgba(124,59,203,.09) 48%,transparent 74%);
}

/* no frame: the mark sits on the page the way the astronaut does. A border
   here just drew a box around a logo. */
.ins__stage{perspective:900px}
.ins__plinth{position:relative;aspect-ratio:1;isolation:isolate;transform-style:preserve-3d}
/* the glow the brain sits in. Static: a pulsing backdrop competes with the
   pulses running along the traces. */
.ins__core{
  position:absolute;inset:14% 16%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(217,31,168,.34),transparent 66%);
  filter:blur(46px);
}
.ins{position:relative;z-index:1;display:block;width:100%;height:auto;overflow:visible}
.ins g{fill:none;stroke:url(#insGrad);stroke-linecap:round;stroke-linejoin:round}
.ins__brain{stroke-width:1.35}
.ins__traces{stroke-width:1.5}
/* no transform-box/transform-origin here on purpose: GSAP resolves SVG
   transform origins itself, and a CSS fill-box origin made it bake a stale
   translate that left every node parked off its trace. */
.ins__nodes{stroke-width:1.6}
/* the travelling signal: one short dash per trace, drawn over the trace it
   follows and brighter than it */
.ins__pulses{stroke:var(--hot);stroke-width:2.4;opacity:.9;filter:url(#insGlow)}
.ins__pulses path{stroke-dasharray:7 999}

/* start state for the draw-on. Only applied once JS has confirmed it can run,
   so a script failure leaves the insignia fully drawn instead of invisible. */
.js .ins--wait .ins__brain path,
.js .ins--wait .ins__traces path{stroke-dasharray:var(--l);stroke-dashoffset:var(--l)}
/* opacity only. The scale start state comes from the GSAP fromTo, so there is
   no CSS transform for it to reconcile against. */
.js .ins--wait .ins__nodes circle{opacity:0}
.js .ins--wait .ins__pulses path{opacity:0}

@media (prefers-reduced-motion:reduce){
  .ins__pulses{display:none}
}

/* ==========================================================================
   Inner page hero: one big centred word set over the dotted grid
   ========================================================================== */
.pgh{
  position:relative;overflow:hidden;isolation:isolate;text-align:center;
  padding-block:clamp(146px,17vh,208px) clamp(60px,7vw,104px);
}
/* bloom behind the word, so the type sits in light rather than on flat dark */
.pgh::before{
  content:'';position:absolute;z-index:-2;pointer-events:none;
  left:50%;top:46%;translate:-50% -50%;width:min(880px,92%);aspect-ratio:2.1;
  background:radial-gradient(ellipse at center,rgba(217,31,168,.30),rgba(124,59,203,.14) 46%,transparent 72%);
  filter:blur(30px);
}
/* dotted grid, faded to nothing before it reaches the edges */
.pgh::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.26) 1px,transparent 1.5px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:30px 30px,120px 120px,120px 120px;
  background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 82% 74% at 50% 46%,#000 8%,rgba(0,0,0,.45) 48%,transparent 80%);
  mask-image:radial-gradient(ellipse 82% 74% at 50% 46%,#000 8%,rgba(0,0,0,.45) 48%,transparent 80%);
}
.pgh__crumb{
  display:flex;justify-content:center;gap:10px;align-items:center;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-bottom:clamp(20px,2.4vw,30px);
}
.pgh__crumb a:hover{color:var(--text)}
.pgh__crumb [aria-current]{color:var(--hot)}
.pgh__title{
  font-size:clamp(3.2rem,10.4vw,8.4rem);line-height:.88;letter-spacing:-.05em;font-weight:600;
}
.pgh__title .w{display:inline-block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.pgh__title .w>span{display:inline-block}
.js .pgh__title .w>span{transform:translateY(105%)}
.pgh__sub{
  font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.1;
  font-size:clamp(1.25rem,2.3vw,1.95rem);max-width:24ch;margin:clamp(22px,2.6vw,34px) auto 0;
}
.pgh__lead{color:var(--muted);max-width:66ch;margin:18px auto 0;font-size:1.02rem}
.pgh__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(26px,3vw,38px)}

/* 404: the number carries the page, so it runs bigger than a page title */
.pgh--404 .pgh__title{font-size:clamp(5.5rem,20vw,15rem);letter-spacing:-.06em}
.nf__links{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-top:clamp(34px,4vw,52px);padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--line);
}
.nf__links a{
  padding:9px 18px;border-radius:999px;border:1px solid var(--line);
  color:var(--muted);font-size:.9rem;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.nf__links a:hover{color:var(--text);border-color:var(--magenta);background:rgba(201,33,158,.08)}

/* ==========================================================================
   Services page: one editorial row per service, sides alternating
   ========================================================================== */
/* the gap goes on the shell, not the section: the rows are the shell's
   children, so a gap on .srv only ever spaced the shell against nothing */
.srv>.shell{display:grid;gap:clamp(64px,8vw,132px)}
.srv__row{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(30px,5vw,84px);align-items:center;
  scroll-margin-top:120px; /* the nav is fixed, so anchors need clearance */
}
.srv__row:nth-child(even) .srv__media{order:2}

.srv__media{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.srv__media img{
  width:100%;height:auto;display:block;
  transition:transform 1.1s var(--ease-soft);
}
.srv__row:hover .srv__media img{transform:scale(1.035)}
/* same tint the about photo uses, so stock shots join the palette */
.srv__media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(124,59,203,.34),rgba(9,1,11,.5) 72%);
  mix-blend-mode:multiply;
}
/* a hairline that draws itself along the top edge on hover */
.srv__media::before{
  content:'';position:absolute;left:0;top:0;height:2px;width:100%;z-index:2;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease);
}
.srv__row:hover .srv__media::before{transform:scaleX(1)}

.srv__copy{display:grid;gap:16px;justify-items:start}
.srv__n{
  font-family:var(--display);font-size:.85rem;letter-spacing:.14em;color:var(--hot);
  padding-bottom:12px;border-bottom:1px solid var(--line);width:100%;
}
.srv__t{font-size:clamp(1.7rem,3.1vw,2.7rem);line-height:1.02;letter-spacing:-.03em}
.srv__lead{color:var(--text);font-size:1.06rem;max-width:46ch}
.srv__body{color:var(--muted);font-size:.97rem;max-width:58ch}
.srv__copy .btn{margin-top:6px}

/* ==========================================================================
   Studio block: photo, badge and the facts rail
   ========================================================================== */
/* the dotted grid and centre bloom come from the .cap rule above, so an inner
   page never opens on flat dark and never invents a second backdrop */
/* no backdrop of its own: the page hero above already carries the dotted grid,
   and running it again here made the two blocks blur into one */
.phero{position:relative}
.phero__grid{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(30px,4vw,72px);align-items:center;
}
.phero__copy{display:grid;gap:16px;align-content:center;justify-items:start}
.phero__copy .eyebrow{margin-bottom:0}
.phero__copy .lead{font-size:1rem;max-width:54ch}
.phero__title{font-size:clamp(2.2rem,4.4vw,4rem);line-height:.98;letter-spacing:-.04em;font-weight:600;max-width:16ch}
.phero__title .w{display:inline-block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.phero__title .w>span{display:inline-block}
.js .phero__title .w>span{transform:translateY(105%)}
.phero__copy .lead{max-width:52ch}
.phero__copy .about__points{margin-top:6px}
.phero__copy .phero__meta{margin-top:14px}

.phero__media{position:relative;border-radius:var(--r-lg);overflow:visible}
.phero__media img{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--line)}
/* a daylight stock photo sits outside the palette at this size. multiply pulls
   it into the brand's dark violet without washing the subject out. */
.phero__media::after{
  content:'';position:absolute;inset:0;z-index:1;border-radius:var(--r-lg);pointer-events:none;
  background:linear-gradient(200deg,rgba(124,59,203,.34),rgba(9,1,11,.52) 72%);
  mix-blend-mode:multiply;
}
/* the badge sits over the tint, not under it, or the number goes unreadable */
.phero__media .about__badge{z-index:2}

/* the studio facts, as a rail under the opener */
/* two by two inside the copy column: four across would squeeze the address
   onto five lines */
.phero__copy .phero__meta{grid-template-columns:repeat(2,1fr)}
.phero__meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(38px,5vw,68px);background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.phero__meta>div{background:rgba(20,9,33,.72);padding:22px 24px;display:grid;gap:7px}
.phero__meta dt{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--hot)}
.phero__meta dd{color:var(--muted);font-size:.94rem;line-height:1.5}
.phero__meta a:hover{color:var(--text)}

/* ==========================================================================
   Clients marquee (the only marquee on the page)
   ========================================================================== */
.marq{
  position:relative;border-block:1px solid var(--line);background:rgba(255,255,255,.04);
  padding-block:34px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marq__track{display:flex;gap:0;width:max-content;animation:slide 42s linear infinite}
.marq:hover .marq__track{animation-play-state:paused}
.marq__row{display:flex;align-items:center;gap:clamp(48px,6vw,92px);padding-right:clamp(48px,6vw,92px)}
.marq img{height:40px;width:auto;opacity:.62;transition:opacity .4s var(--ease)}
.marq img:hover{opacity:1}
@keyframes slide{to{transform:translateX(-50%)}}

/* ==========================================================================
   About: split text and image (used exactly once on this page)
   ========================================================================== */
.about__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(32px,5vw,84px);align-items:center}
.about__copy{display:grid;gap:22px;align-content:start}
.about__points{display:grid;gap:14px;margin-top:6px}
.about__points li{display:grid;grid-template-columns:22px 1fr;gap:14px;color:var(--muted)}
.about__points i{
  margin-top:9px;width:8px;height:8px;border-radius:999px;background:var(--grad);
}
.about__media{position:relative}
.about__media img{width:100%;border-radius:var(--r-lg);border:1px solid var(--line-2);box-shadow:0 40px 80px -50px rgba(217,31,168,.7)}
.about__badge{
  position:absolute;left:-18px;bottom:-18px;padding:20px 24px;border-radius:var(--r-lg);
  background:rgba(27,11,44,.8);border:1px solid var(--line-2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.about__badge strong{display:block;font-family:var(--display);font-size:2.4rem;line-height:1}
.about__badge span{font-size:.82rem;color:var(--muted)}

/* ==========================================================================
   Capability rail: numbers, no card boxes
   ========================================================================== */
/* Dotted grid over a centre bloom, so the numbers sit on something instead of
   floating on flat dark. Two pseudo-elements, no images, no blur filter: the
   gradients are already soft, so this costs nothing to paint. */
.cap,.cta{position:relative;border-top:1px solid var(--line);overflow:hidden;isolation:isolate}
/* near black base with a tight centre bloom, faded top and bottom so it
   joins the neighbouring sections instead of banding against them */
.cap::before,.cta::before{
  content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 42% 44% at 50% 50%,rgba(196,58,214,.30),transparent 70%),
    radial-gradient(ellipse 74% 66% at 50% 50%,rgba(110,48,186,.16),transparent 72%),
    #0A0315;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
}
.cap::after,.cta::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.30) 1px,transparent 1.5px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:30px 30px,120px 120px,120px 120px;
  background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 88% 80% at 50% 50%,#000 12%,rgba(0,0,0,.5) 52%,transparent 82%);
  mask-image:radial-gradient(ellipse 88% 80% at 50% 50%,#000 12%,rgba(0,0,0,.5) 52%,transparent 82%);
}
.cap>.shell,.cta>.shell{position:relative;z-index:1}
.cap__head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);
  align-items:end;margin-bottom:clamp(34px,4vw,60px);
}
.cap__head .lead{max-width:74ch}
.cap__body{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
.cap__media{position:relative}
.cap__media img{
  width:100%;border-radius:var(--r-lg);border:1px solid var(--line-2);
  box-shadow:0 40px 80px -50px rgba(217,31,168,.7);
}
/* same tint as the about opener: a daylight photo left untreated reads as a
   foreign object on a dark violet page */
.cap__media::after{
  content:'';position:absolute;inset:0;border-radius:var(--r-lg);pointer-events:none;
  background:linear-gradient(200deg,rgba(124,59,203,.34),rgba(9,1,11,.52) 72%);
  mix-blend-mode:multiply;
}
.cap__row{display:grid}
/* grid areas, so the flat markup (value, bar, title, note) can lay out as a
   big number on the left with the copy stacked beside it */
.cap__item{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"val title" "val bar" "val note";
  column-gap:clamp(20px,2.6vw,34px);align-items:center;
  padding-block:clamp(20px,2.4vw,28px);border-top:1px solid var(--line);
}
.cap__item:last-child{border-bottom:1px solid var(--line)}
.cap__val{
  grid-area:val;align-self:center;min-width:3.1ch;
  font-family:var(--display);font-size:clamp(2.4rem,4.2vw,3.6rem);
  line-height:.92;letter-spacing:-.04em;
}
.cap__val sup{font-size:.4em;vertical-align:super;color:var(--hot)}
.cap__item h3{grid-area:title;font-size:1.1rem}
.cap__item p{grid-area:note;color:var(--muted);font-size:.92rem;max-width:56ch}
.cap__bar{grid-area:bar;height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin-block:10px}
.cap__bar i{display:block;height:100%;width:0;background:var(--grad);border-radius:2px}

/* ==========================================================================
   Process: split intro with a numbered rail, over a receding particle floor
   ========================================================================== */
.proc__head{display:grid;gap:14px;max-width:54ch;margin-bottom:clamp(24px,2.8vw,38px)}

/* bottom padding is always larger than the floor's max height, so content can
   never land inside the particle plane whatever the column heights do */
.proc{overflow:hidden;padding-bottom:clamp(212px,24vh,290px)}
/* a dot plane tipped away from the viewer, so it reads as a horizon rather
   than a flat pattern. Pure CSS, one transformed pseudo-element. */
.proc__floor{
  position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:200%;height:clamp(140px,18%,200px);pointer-events:none;
  perspective:300px;perspective-origin:50% 0;
  overflow:hidden; /* clips the tipped plane to the floor strip, not the section */
}
/* Two custom properties rather than one transform keyframe, so the drift and
   the sway can run on different clocks and feed the same transform. Their
   periods do not divide into each other, so the plane never repeats a pose. */
@property --pf-y{syntax:'<length>';inherits:false;initial-value:0px}
@property --pf-x{syntax:'<length>';inherits:false;initial-value:0px}
@keyframes pfDrift{from{--pf-y:0px}to{--pf-y:-42px}}   /* exactly two tiles, so it loops seamlessly */
@keyframes pfSway{from{--pf-x:-22px}to{--pf-x:22px}}

/* the top of the tipped plane is the far distance, the bottom is nearest the
   viewer, so the mask fades out downwards to kill the huge foreground dots */
.proc__floor::before{
  content:'';position:absolute;left:-30%;right:-30%;top:0;height:340%;
  transform:rotateX(70deg) translate(var(--pf-x),var(--pf-y));transform-origin:50% 0;
  background-image:radial-gradient(circle,rgba(245,83,188,.62) 1.1px,transparent 1.6px);
  background-size:21px 21px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 7%,rgba(0,0,0,.4) 26%,transparent 56%);
  mask-image:linear-gradient(180deg,transparent,#000 7%,rgba(0,0,0,.4) 26%,transparent 56%);
  /* the translate happens inside the tipped plane, so it reads as the field
     flowing over the floor and swaying, not as a flat pattern sliding */
  animation:pfDrift 11s linear infinite,pfSway 17s ease-in-out infinite alternate;
}
/* glow sitting on the horizon line, where the plane recedes */
.proc__floor::after{
  content:'';position:absolute;left:50%;top:0;translate:-50% -46%;
  width:70%;height:150px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(217,31,168,.5),rgba(124,59,203,.18) 46%,transparent 72%);
  animation:pfBreath 9s ease-in-out infinite alternate;
}
@keyframes pfBreath{from{opacity:.72}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .proc__floor::before,.proc__floor::after{animation:none}
}

.proc__grid{
  position:relative;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(32px,5vw,88px);align-items:start;
}
.proc__intro{display:grid;gap:18px;justify-items:start;max-width:46ch}
.proc__intro .lead{font-size:.98rem}
.proc__mark{width:clamp(78px,7vw,116px);height:auto;color:var(--hot);margin:8px 0 4px}

.proc__list{display:grid;counter-reset:none}
.proc__row{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(20px,2.6vw,38px);align-items:center;
  padding-block:clamp(20px,2.6vw,30px);border-top:1px solid var(--line);
}
.proc__row:last-child{border-bottom:1px solid var(--line)}
.proc__n{
  display:grid;place-items:center;width:clamp(44px,3.6vw,54px);aspect-ratio:1;
  border-radius:999px;border:1px solid var(--line-2);
  font-family:var(--display);font-size:.94rem;font-weight:600;letter-spacing:.02em;
  color:var(--muted);
  transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease);
}
.proc__row:hover .proc__n{border-color:transparent;background:var(--grad);color:#fff}
.proc__row h3{font-size:clamp(1.2rem,1.9vw,1.7rem);font-weight:500}
/* third column only appears when a step actually has body copy */
.proc__row:has(p){grid-template-columns:auto minmax(0,.9fr) minmax(0,1.1fr)}
.proc__row p{color:var(--muted);font-size:.92rem;max-width:46ch}

/* ==========================================================================
   Work: asymmetric masonry grid with filters
   ========================================================================== */
.work__top{display:grid;gap:20px;margin-bottom:clamp(22px,2.6vw,34px)}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{
  padding:9px 18px;border-radius:999px;border:1px solid var(--line);
  font-size:.85rem;font-weight:500;color:var(--muted);
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.filters button:hover{color:var(--text);border-color:var(--line-2)}
.filters button[aria-pressed="true"]{color:#fff;border-color:transparent;background:var(--grad);box-shadow:0 10px 26px -14px rgba(217,31,168,.9)}

/* Masonry columns, not a fixed row grid: every tile keeps the artwork's own
   proportions, so nothing is cropped whatever shape the source is. */
.work__grid{columns:4;column-gap:16px}
.work__item{
  break-inside:avoid;margin:0 0 16px;
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--raise);
  box-shadow:0 24px 50px -40px #000;
  transition:border-color .45s var(--ease),transform .45s var(--ease-soft),box-shadow .45s var(--ease);
}
.work__item:hover{border-color:rgba(245,83,188,.55);transform:translateY(-3px);box-shadow:0 30px 60px -38px rgba(217,31,168,.7)}
.work__open{
  display:block;position:relative;width:100%;padding:0;border-radius:inherit;
  overflow:hidden;cursor:zoom-in;background:none;
}
.work__item img{width:100%;height:auto;display:block;transition:transform .9s var(--ease-soft)}
.work__item:hover img{transform:scale(1.04)}
.work__cap{
  position:absolute;inset:auto 0 0;padding:52px 18px 16px;text-align:left;
  background:linear-gradient(to top,rgba(8,1,15,.94) 20%,transparent);
  transform:translateY(12px);opacity:0;transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.work__item:hover .work__cap,.work__open:focus-visible .work__cap{transform:none;opacity:1}
.work__cap strong{display:block;font-family:var(--display);font-size:1rem;font-weight:600;color:var(--text)}
.work__cap span{font-size:.76rem;color:var(--hot);letter-spacing:.08em;text-transform:uppercase}
.work__item.is-hidden{display:none}

/* ---------- lightbox (native <dialog>: Esc and backdrop come free) ---------- */
.lb{
  border:0;padding:0;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;
  background:transparent;color:var(--text);overflow:hidden;
}
.lb::backdrop{background:rgba(6,1,12,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lb[open]{display:grid;place-items:center}
.lb__fig{margin:0;display:grid;gap:14px;justify-items:center;padding:76px clamp(56px,8vw,120px)}
.lb__fig img{
  max-width:min(1200px,86vw);max-height:74dvh;width:auto;height:auto;
  border-radius:var(--r-lg);border:1px solid var(--line-2);
  box-shadow:0 50px 120px -50px #000;
}
.lb__fig figcaption{display:grid;gap:3px;text-align:center}
.lb__fig strong{font-family:var(--display);font-size:1.15rem;font-weight:600}
.lb__fig span{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hot)}
.lb__close,.lb__arrow{
  position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(20,9,33,.7);color:var(--text);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease-soft);
}
.lb__close:hover,.lb__arrow:hover{background:var(--grad);border-color:transparent;transform:scale(1.06)}
.lb__close{top:22px;right:22px}
.lb__arrow--prev{left:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
.lb__arrow--next{right:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
.lb__arrow--prev:hover,.lb__arrow--next:hover{transform:translateY(-50%) scale(1.06)}
body.lb-open{overflow:hidden}

/* ==========================================================================
   Testimonials: one big quote
   ========================================================================== */
.quotes{position:relative;border-block:1px solid var(--line)}
.quotes__inner{display:grid;gap:34px;max-width:70ch}
.quotes__q{
  font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:1.16;
  font-size:clamp(1.5rem,3.4vw,2.9rem);
}
.quotes__meta{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.quotes__meta strong{font-weight:700}
.quotes__meta span{color:var(--muted);font-size:.92rem}
.quotes__nav{display:flex;gap:10px;margin-left:auto}
.quotes__nav button{
  width:46px;height:46px;display:grid;place-items:center;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);
  transition:border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease-soft);
}
.quotes__nav button:hover{border-color:var(--magenta);color:var(--text);transform:translateY(-2px)}
.quotes__slide{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.quotes__slide.is-out{opacity:0;transform:translateY(10px)}

/* ==========================================================================
   Partners: plain logo grid, no labels
   ========================================================================== */
.partners{border-top:1px solid var(--line)}
.partners__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.partners__cell{display:grid;place-items:center;padding:30px 18px;background:rgba(27,11,44,.65);transition:background .4s var(--ease)}
.partners__cell:hover{background:rgba(46,20,74,.9)}
.partners__cell img{height:34px;width:auto;opacity:.62;transition:opacity .4s var(--ease)}
.partners__cell:hover img{opacity:1}

/* ==========================================================================
   Packages: one panel, three columns, hairlines between
   ========================================================================== */
.pk{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
}
.pk__col{
  display:grid;align-content:start;gap:18px;
  padding:clamp(28px,2.6vw,40px);
  background:linear-gradient(180deg,rgba(27,11,44,.86),rgba(20,9,33,.86));
  transition:background .5s var(--ease);
}
.pk__col:hover{background:linear-gradient(180deg,rgba(37,17,59,.92),rgba(24,11,40,.92))}
/* the chosen tier is a wash and a badge, not a box that pops out of the panel */
.pk__col--hot{
  background:linear-gradient(180deg,rgba(124,59,203,.30),rgba(217,31,168,.10) 62%,rgba(20,9,33,.9));
}
.pk__col--hot:hover{background:linear-gradient(180deg,rgba(134,69,213,.36),rgba(217,31,168,.14) 62%,rgba(24,11,40,.92))}

.pk__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pk__head h3{font-size:1.5rem;letter-spacing:-.02em}
.pk__tag{
  padding:5px 12px;border-radius:999px;background:var(--grad);
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;
}
.pk__blurb{color:var(--muted);font-size:.95rem;min-height:4.5em}

.pk__buy{display:grid;gap:14px;justify-items:start;margin-top:6px}
.pk__from{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.pk__price{
  font-family:var(--display);font-size:clamp(2.8rem,4.4vw,3.9rem);line-height:.9;
  letter-spacing:-.045em;font-weight:600;
}
.pk__price sup{font-size:.36em;vertical-align:super;color:var(--hot);margin-right:.06em}
.pk__buy .btn{width:100%;justify-content:space-between}

.pk__label{
  font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);
  padding-top:20px;border-top:1px solid var(--line);
}
.pk__items{display:grid;gap:11px;font-size:.94rem;color:var(--muted)}
.pk__items li{display:flex;gap:11px;align-items:flex-start}
.pk__items svg{flex:none;margin-top:3px;color:var(--hot)}

/* ==========================================================================
   Mid page CTA band: the astronaut, reused
   ========================================================================== */
.band{position:relative;padding-block:clamp(30px,4vw,56px)}
.band__inner{
  position:relative;isolation:isolate;overflow:hidden;
  max-width:var(--shell);margin-inline:auto;
  border-radius:clamp(20px,2.4vw,32px);border:1px solid var(--line);
  background:#09010B;
  padding:clamp(38px,4.6vw,72px);
  min-height:clamp(360px,32vw,520px);
  display:grid;align-items:center;
}
/* The clip is the panel's background now, not a figure beside the copy.
   contain, not cover: the source is 1.19 wide and the panel is nearly 3, so
   cover cropped the astronaut's head off. Anchored right, and the panel colour
   is sampled from the clip's own corners (#09010B) so the seam disappears. */
.band__video{
  position:absolute;top:0;bottom:0;right:0;left:auto;z-index:0;
  height:100%;width:auto;max-width:none;
  /* the element is sized to the rendered frame, not the panel, so this mask
     lands on the clip's own left edge and dissolves the seam. Top, bottom and
     right meet the panel border, which needs no fade. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);
  mask-image:linear-gradient(90deg,transparent,#000 30%);
}
/* scrim, so the copy keeps its contrast over the clip. Weighted to the left:
   the right side stays clear for the astronaut. */
.band__inner::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(9,1,11,.9) 26%,rgba(9,1,11,.5) 48%,transparent 70%),
    radial-gradient(ellipse 70% 120% at 12% 50%,rgba(124,59,203,.22),transparent 68%);
}
.band__copy{position:relative;z-index:2;display:grid;gap:16px;justify-items:start;max-width:46ch}
.band__title{font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.03;letter-spacing:-.03em;font-weight:600}
.band__copy>p{color:var(--muted);font-size:1rem}
.band__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq__grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.faq__list{display:grid}
.faq__row{border-top:1px solid var(--line)}
.faq__row:last-child{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;align-items:center;gap:22px;text-align:left;
  padding:26px 0;font-family:var(--display);font-size:clamp(1.05rem,1.7vw,1.3rem);font-weight:500;
  transition:color .3s var(--ease);
}
.faq__q:hover{color:var(--hot)}
.faq__sign{
  margin-left:auto;flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;
  border-radius:999px;border:1px solid var(--line);position:relative;
  transition:background .4s var(--ease-soft),border-color .4s var(--ease-soft),transform .4s var(--ease-soft);
}
.faq__sign::before,.faq__sign::after{content:'';position:absolute;background:currentColor;border-radius:2px}
.faq__sign::before{width:12px;height:1.6px}
.faq__sign::after{width:1.6px;height:12px;transition:transform .4s var(--ease-soft)}
.faq__row.is-open .faq__sign{background:var(--grad);border-color:transparent;transform:rotate(90deg)}
.faq__row.is-open .faq__sign::after{transform:scaleY(0)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-soft)}
.faq__row.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{color:var(--muted);padding-bottom:26px;max-width:62ch}

/* ==========================================================================
   Contact / closing CTA
   ========================================================================== */
/* base + dotted grid galaxy shared with .cap, see the block above */
.cta__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(34px,5vw,80px);align-items:start}
.cta__copy{display:grid;gap:24px;align-content:start}
.cta__contacts{display:grid;gap:16px;margin-top:12px}
.cta__contacts a,.cta__contacts p{display:flex;gap:14px;align-items:baseline;color:var(--muted)}
.cta__contacts b{color:var(--text);font-weight:500;min-width:78px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.cta__contacts a:hover{color:var(--text)}

.form{
  display:grid;gap:16px;padding:clamp(26px,3vw,38px);border-radius:var(--r-lg);
  border:1px solid var(--line-2);background:rgba(27,11,44,.6);
}
.form__row{display:grid;gap:8px}
.form label{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text);font-weight:500}
.form input,.form textarea,.form select{
  width:100%;padding:14px 16px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:rgba(8,1,15,.5);color:var(--text);
  font:inherit;font-size:.96rem;transition:border-color .3s var(--ease),background .3s var(--ease);
}
.form input::placeholder,.form textarea::placeholder{color:var(--dim)}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--magenta);background:rgba(8,1,15,.75)}
.form textarea{resize:vertical;min-height:120px}
.form__two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form__err{color:#FF9BC8;font-size:.84rem;min-height:0}
.form__note{color:var(--dim);font-size:.82rem}
/* off screen, not display:none: some bots skip hidden inputs, and this one
   is meant to be found and filled */
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form.is-busy button[type=submit]{opacity:.6;cursor:progress}
.form.is-sent .form__two,.form.is-sent .form__row,
.form.is-sent button[type=submit],.form.is-sent .form__note{display:none}
.form__ok{
  display:none;padding:16px 18px;border-radius:var(--r-sm);
  background:rgba(116,54,187,.18);border:1px solid rgba(201,33,158,.4);font-size:.94rem;
}
.form.is-sent .form__ok{display:block}
.form button[type=submit]{justify-self:start}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot{border-top:1px solid var(--line);padding-block:clamp(52px,6vw,84px) 34px;background:var(--ink)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.8fr));gap:clamp(28px,4vw,56px)}
.foot__brand img{height:36px;width:auto;margin-bottom:20px}
.foot__brand p{color:var(--muted);max-width:38ch;font-size:.94rem}
.foot__social{display:flex;gap:20px;margin-top:22px;font-size:.9rem}
.foot__social a{color:var(--muted);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.foot__social a:hover{color:var(--text);border-color:var(--magenta)}
.foot__col h2{font-family:var(--body);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-weight:700;margin-bottom:18px}
.foot__col li{margin-bottom:11px;font-size:.94rem;color:var(--muted)}
.foot__col a:hover{color:var(--text)}
.foot__base{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--line);color:var(--dim);font-size:.86rem}
.foot__top:hover{color:var(--text)}

/* ==========================================================================
   Scroll reveal (GSAP sets .is-in; CSS holds the start state)
   ========================================================================== */
/* Content is visible by default. Only a page that has confirmed working JS
   hides it first, so a CDN or script failure can never blank the page. */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.is-in,.js-off .rv{opacity:1;transform:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .work__grid{columns:3}
  .foot__grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:1024px){
  .about__grid,.cta__grid,.faq__grid{grid-template-columns:1fr}
  .phero__grid{grid-template-columns:1fr;gap:34px}
  /* the media always leads on a stacked layout, whatever side it took on
     desktop, so the rows stay consistent as you scroll */
  .srv__row{grid-template-columns:1fr;gap:26px}
  .srv__row:nth-child(even) .srv__media{order:0}
  .phero__title{max-width:none}
  .phero__meta{grid-template-columns:repeat(2,1fr)}
  /* the clip keeps to the right edge and drops right back, so the copy has a
     clean ground and the astronaut only suggests itself behind it */
  .band__copy{max-width:none}
  .band__video{object-position:right center;opacity:.5}
  .band__inner::after{
    background:
      linear-gradient(90deg,#09010B 26%,rgba(9,1,11,.86) 58%,rgba(9,1,11,.55)),
      linear-gradient(180deg,rgba(9,1,11,.5),rgba(9,1,11,.86) 74%,#09010B),
      radial-gradient(ellipse 90% 80% at 26% 40%,rgba(124,59,203,.22),transparent 70%);
  }

  /* 4. pricing: hairlines alone run the tiers together once they stack, so
     each one becomes its own plate with air between */
  .pk{background:transparent;border:0;border-radius:0;gap:16px;overflow:visible}
  .pk__col{border:1px solid var(--line);border-radius:var(--r-lg)}
  .pk__col--hot{border-color:rgba(245,83,188,.45)}
  .partners__grid{grid-template-columns:repeat(3,1fr)}
  .pk{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .pk__blurb{min-height:0}
}
/* stacked hero: portrait tablets and every phone. A landscape tablet is wide
   enough to keep the two-column hero, and stacking there costs the fold. */
@media (max-width:1024px) and (orientation:portrait),(max-width:900px){
  /* keep the hero CTAs above the fold on a phone: the visual is sized off the
     viewport height, not just its width */
  .hero{min-height:auto;align-items:center;padding-top:98px;padding-bottom:clamp(24px,4vw,48px)}
  .hero__grid{grid-template-columns:1fr;gap:4px;align-items:start}
  /* .hero--ins repeated so the insignia's own width does not out-specify the
     stacked layout on a portrait tablet */
  .hero__visual,.hero--ins .hero__visual{
    justify-self:center;margin-right:0;order:-1;
    width:min(430px,78vw,calc((100dvh - 460px) * 1.19));max-width:none;
  }
  .hero__title{font-size:clamp(2.2rem,7.6vw,3.3rem)}
  .hero__rule{margin:16px 0 14px}
  .hero__actions{margin-top:20px}
  .hero__actions .btn{padding:11px 11px 11px 20px;font-size:.88rem;gap:10px}
  .hero__actions .btn__dot{width:26px;height:26px}
}
/* short phones (iPhone SE, older Android): trim the fixed costs so the hero
   CTAs still land above the fold */
@media (max-width:900px) and (max-height:700px){
  .hero{padding-top:86px}
  .hero__visual,.hero--ins .hero__visual{width:min(430px,78vw,calc((100dvh - 470px) * 1.19))}
  .hero__title{font-size:clamp(1.95rem,6.4vw,2.5rem)}
  .hero__copy>p{font-size:.94rem}
  .hero__rule{margin:12px 0 10px}
  .hero__actions{margin-top:16px}
}
@media (max-width:900px){
  /* the insignia is a desktop moment. On a phone it costs a screenful of
     scrolling before the headline, so the hero is type only. */
  .hero--ins .hero__visual{display:none}
  .hero--ins{min-height:auto;padding-block:clamp(120px,20vh,150px) clamp(48px,9vw,80px)}
  .nav__links{display:none}
  .nav .btn{display:none}
  .burger{display:grid;margin-left:auto}
  .nav__shell{padding-right:8px}
  .cap__head{grid-template-columns:1fr;align-items:start;gap:26px}
  .cap__body{grid-template-columns:1fr;gap:32px}
  .cap__item{grid-template-columns:1fr;grid-template-areas:"val" "title" "bar" "note";row-gap:6px}
  .cap__val{margin-bottom:2px}
  .proc__grid{grid-template-columns:1fr;gap:36px}
  .proc__intro{max-width:none}
  .proc__mark{display:none}
  .proc__row:has(p){grid-template-columns:auto minmax(0,1fr)}
  .proc__row p{grid-column:2;margin-top:6px}
  /* the rail's desktop indent leaves the numbers stranded once the column is
     full width, and the floor no longer needs a 212px runway */
  .proc__list{padding-left:0}
  .proc{padding-bottom:clamp(120px,20vh,170px)}
  .proc__floor{height:clamp(96px,14%,140px)}
}
@media (max-width:768px){
  .work__grid{columns:2;column-gap:12px}
  .work__item{margin-bottom:12px}
  .work__cap{opacity:1;transform:none;padding-top:40px}
  .lb__fig{padding:70px 16px 90px}
  .lb__arrow{top:auto;bottom:20px;transform:none}
  .lb__arrow--prev{left:calc(50% - 58px)}
  .lb__arrow--next{right:calc(50% - 58px)}
  .lb__arrow--prev:hover,.lb__arrow--next:hover{transform:scale(1.06)}
  .about__badge{position:static;margin-top:16px;display:inline-block}
  .form__two{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr;gap:34px}
}
@media (max-width:560px){
  /* five badges in two columns leaves one cell empty, so the last one runs
     the full width instead of showing a hole */
  .partners__grid{grid-template-columns:repeat(2,1fr)}
  .partners__cell:last-child{grid-column:1 / -1}
  .quotes__nav{margin-left:0;width:100%}
  .phero__meta{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .marq__track{animation:none}
  .rv{opacity:1 !important;transform:none !important}
  .hero__title .w>span,.phero__title .w>span{transform:none !important}
  .proc__card{position:static}
}

/* ==========================================================================
   Services, hover reveal variant (service-hover.php)
   Hover a row: the row lifts into a gradient pill and the image eases in on
   the right, following the pointer down the list.
   ========================================================================== */
.svch{
  /* one source of truth for the panel's lane: the panel is this wide, and the
     rows reserve exactly that much on the right so copy never runs under it */
  --panel-w:clamp(260px,26vw,380px);
  --panel-gap:clamp(20px,2.6vw,48px);
}
.svch__head{display:grid;gap:14px;max-width:52ch;margin-bottom:clamp(28px,3.4vw,48px)}
.svch__wrap{position:relative}
.svch__list{display:grid}

.svch__row{border-top:1px solid var(--line)}
.svch__row:last-child{border-bottom:1px solid var(--line)}
.svch__link{
  position:relative;display:grid;
  grid-template-columns:clamp(46px,4vw,62px) minmax(0,auto) minmax(0,1fr);
  align-items:center;column-gap:clamp(16px,2vw,30px);
  padding:clamp(20px,2.4vw,28px) clamp(14px,1.6vw,22px);
  padding-right:calc(var(--panel-w) + var(--panel-gap));
  border-radius:var(--r-lg);
  transition:background .55s var(--ease-soft),padding-left .55s var(--ease-soft),color .4s var(--ease);
}
.svch__n{
  font-family:var(--body);font-size:.76rem;letter-spacing:.14em;color:var(--dim);
  transition:color .4s var(--ease);
}
.svch__t{
  font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1;
  font-size:clamp(1.5rem,3.4vw,2.9rem);
  transition:transform .55s var(--ease-soft),color .4s var(--ease);
}
.svch__lead{
  font-size:.86rem;color:var(--dim);max-width:38ch;justify-self:start;
  opacity:0;transform:translateX(-8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease-soft);
}
.svch__thumb{display:none}

/* dim the rest of the list while one row is hovered, so the eye has one target */
.svch__wrap.is-live .svch__row:not(.is-on) .svch__t{color:var(--dim)}
.svch__row.is-on .svch__link{
  background:var(--grad);
  padding-left:clamp(20px,2.4vw,32px);
  box-shadow:0 26px 60px -34px rgba(217,31,168,.85);
}
.svch__row.is-on .svch__n{color:rgba(255,255,255,.7)}
.svch__row.is-on .svch__t{color:#fff;transform:translateX(6px)}
.svch__row.is-on .svch__lead{opacity:.85;color:#fff;transform:none}

.svch__panel{
  position:absolute;right:0;top:0;
  width:var(--panel-w);aspect-ratio:4/3;
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-2);background:var(--raise);
  box-shadow:0 40px 90px -50px #000;
  opacity:0;visibility:hidden;pointer-events:none;z-index:3;
  will-change:transform;
}
.svch__panel img{width:100%;height:100%;object-fit:cover}

@media (max-width:900px){
  /* the list stacks here, so there is no lane to reserve and no room to float
     a panel: rows fall back to their own thumbnails */
  .svch__panel{display:none}
  .svch__link{grid-template-columns:auto minmax(0,1fr);row-gap:12px;align-items:start;padding-right:clamp(14px,1.6vw,22px)}
  .svch__row.is-on .svch__link{padding-right:clamp(14px,1.6vw,22px)}
  .svch__thumb{
    display:block;grid-column:1/-1;width:100%;height:auto;aspect-ratio:16/10;
    object-fit:cover;border-radius:var(--r-sm);margin-top:14px;border:1px solid var(--line);
  }
  .svch__n{align-self:center}
  .svch__lead{grid-column:2;opacity:1;transform:none;color:var(--muted)}
  .svch__t{font-size:clamp(1.35rem,6vw,1.9rem)}
}
/* no hover pointer: the panel can never fire, so every row carries its own
   thumbnail instead of hiding the imagery entirely */
@media (hover:none){
  .svch__panel{display:none}
  .svch__thumb{
    display:block;grid-column:1/-1;width:100%;height:auto;aspect-ratio:16/10;
    object-fit:cover;border-radius:var(--r-sm);margin-top:14px;border:1px solid var(--line);
  }
}