/* ===========================================================
   CAR AFFAIR — light studio · glass 3D · scroll-scrubbed hero
   Background matches the video's plain blue-grey studio wall.
   =========================================================== */

:root{
  /* Studio wall (sampled from the video) — cool blue-grey, matches the clip */
  --bg-center:#9eafbf;
  --bg-mid:   #8497aa;
  --bg-edge:  #6e8398;
  --wall:     #798da0;

  /* Ink + blue-tone lighting */
  --ink:      #0d1726;
  --ink-soft: #41506a;
  --ink-mute: #74839a;

  --blue:     #1466ff;   /* vivid electric blue   */
  --blue-deep:#0a36c8;   /* saturated core        */
  --blue-hi:  #3b86ff;   /* bright highlight      */
  --blue-soft:#7fb0ff;   /* soft tint             */
  --glow:     rgba(20,102,255,.45);

  --line:     rgba(22,46,88,.12);
  --line-2:   rgba(22,46,88,.24);

  /* Glass system */
  --glass:    rgba(255,255,255,.42);
  --glass-2:  rgba(255,255,255,.62);
  --glass-line:rgba(255,255,255,.85);
  --glass-edge:rgba(120,150,200,.30);
  --glass-shadow:0 14px 44px rgba(35,65,125,.16), inset 0 1px 0 rgba(255,255,255,.8);
  --blur:saturate(1.5) blur(16px);

  --font-display:"Clash Display","Satoshi",sans-serif;
  --font-body:   "Satoshi",system-ui,sans-serif;
  --font-mono:   "Space Mono",ui-monospace,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1500px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  line-height:1.45;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor:none;
  background:var(--wall);   /* only shows on overscroll; the studio video covers the viewport */
}
a{ color:inherit; text-decoration:none; }
img,video{ display:block; max-width:100%; }
.mono{ font-family:var(--font-mono); letter-spacing:.06em; }
em{ font-style:normal; color:var(--blue); }

@media (hover:none){ body{ cursor:auto; } .cursor{ display:none; } }

/* glass helper */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);
}

/* ===========================================================
   Studio — the fixed full-screen video that backs the whole page.
   It IS the background, so there is no seam between page & video.
   Scrubs during the hero, then holds its last frame for everything below.
   =========================================================== */
.studio{ position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--wall); }
.studio__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:72% 56%;       /* car nudged left & slightly down */
  filter:brightness(1.12) contrast(1.02) saturate(1.06);
}
/* uniform studio key-light + faint lift — identical everywhere, so no separation */
.studio__light{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 95% at 50% 24%, rgba(255,255,255,.20), transparent 58%),
    radial-gradient(70vw 70vw at 88% 4%, rgba(120,176,255,.16), transparent 60%);
}
.studio__veil{ position:absolute; inset:0; pointer-events:none; background:rgba(244,247,251,.10); }

/* all real content rides above the studio */
main{ position:relative; z-index:1; }
.nav{ z-index:7000; }

/* ===========================================================
   Atmosphere: grain, vignette, cursor
   =========================================================== */
.grain{
  position:fixed; inset:-50%; z-index:9000; pointer-events:none; opacity:.035; mix-blend-mode:multiply;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}10%{transform:translate(-4%,-4%)}30%{transform:translate(3%,-2%)}
  50%{transform:translate(-2%,4%)}70%{transform:translate(4%,2%)}90%{transform:translate(-3%,3%)}100%{transform:translate(0,0)}
}
.vignette{
  position:fixed; inset:0; z-index:8000; pointer-events:none;
  background:radial-gradient(125% 100% at 50% 35%, transparent 55%, rgba(95,120,160,.22) 100%);
  mix-blend-mode:multiply;
}

.cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; transform:translate(-50%,-50%); mix-blend-mode:normal; }
.cursor__dot{ position:absolute; left:0; top:0; width:6px; height:6px; border-radius:50%; background:var(--blue); transform:translate(-50%,-50%); }
.cursor__ring{
  position:absolute; left:0; top:0; width:38px; height:38px; border-radius:50%;
  border:1.5px solid var(--blue); transform:translate(-50%,-50%);
  transition:width .25s var(--ease),height .25s var(--ease),opacity .25s,background .25s;
  opacity:.7;
}
.cursor.is-hover .cursor__ring{ width:64px; height:64px; opacity:1; background:rgba(20,102,255,.08); }

/* ===========================================================
   Preloader — the muddy covered car plays beneath a warm cinematic
   grade; loading the site uncovers the build. Warm bone/amber type
   (the yellow tow-rope) over earth-toned mud.
   =========================================================== */
.loader{
  --bone:#f4ead9; --bone-soft:#e7d8c2; --amber:#e6a23a; --amber-hi:#ffce7e;
  position:fixed; inset:0; z-index:10000; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  padding:clamp(1.6rem,5vw,4.2rem);
  background:#14100a;
}
.loader__bg{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  filter:contrast(1.06) saturate(1.12) brightness(1.02);
  transform:scale(1.06); animation:loaderDrift 14s ease-in-out infinite alternate;
}
@keyframes loaderDrift{ from{ transform:scale(1.06) translate3d(0,0,0); } to{ transform:scale(1.12) translate3d(-1.5%,-1%,0); } }
/* warm key-light + bottom shade for legibility + vignette + film grain */
.loader__grade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(70% 60% at 78% 16%, rgba(255,178,86,.30), transparent 60%),
    radial-gradient(120% 90% at 20% 90%, rgba(120,70,24,.30), transparent 65%),
    linear-gradient(183deg, rgba(18,11,4,.10) 0%, rgba(14,9,4,.42) 52%, rgba(8,5,2,.9) 100%),
    radial-gradient(125% 110% at 50% 42%, transparent 52%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:normal;
}
.loader__grade::after{   /* fine grain for filmic texture */
  content:""; position:absolute; inset:0; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.loader__tag{
  position:absolute; top:clamp(1.5rem,4vw,2.6rem); left:clamp(1.6rem,5vw,4.2rem); z-index:2;
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.66rem; letter-spacing:.16em; color:rgba(244,234,217,.82);
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.loader__crop{ color:var(--amber); font-size:.9rem; }

.loader__inner{ position:relative; z-index:2; width:min(640px,88vw); text-align:left; color:var(--bone); }
.loader__kicker{
  font-size:.68rem; letter-spacing:.22em; color:var(--amber-hi); margin-bottom:1rem;
  text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.loader__mark{
  font-family:var(--font-display); font-weight:600; font-size:clamp(2.6rem,8vw,5rem);
  line-height:.86; letter-spacing:-.03em; color:var(--bone);
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.loader__mark span{ display:block; -webkit-text-stroke:1.3px var(--amber); color:transparent; }
.loader__line{
  margin-top:1.1rem; max-width:30ch;
  font-family:var(--font-display); font-weight:500; font-size:clamp(1.05rem,2.2vw,1.5rem);
  line-height:1.12; letter-spacing:-.01em; color:var(--bone-soft);
  text-shadow:0 1px 18px rgba(0,0,0,.6);
}
.loader__line em{ font-style:italic; color:var(--amber-hi); }
.loader__bar{
  margin:1.8rem 0 .85rem; height:2px; width:min(420px,72vw);
  background:rgba(244,234,217,.18); position:relative; overflow:hidden; border-radius:2px;
}
.loader__bar span{
  position:absolute; inset:0; width:0%;
  background:linear-gradient(90deg, var(--amber), var(--amber-hi));
  box-shadow:0 0 18px rgba(255,176,86,.55);
}
.loader__meta{
  display:flex; justify-content:space-between; width:min(420px,72vw);
  font-size:.68rem; letter-spacing:.08em; color:rgba(244,234,217,.72);
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.loader.is-done{ transform:translateY(-100%); transition:transform 1.05s var(--ease); }

/* on a return-to-top reload the loader is just a brief plain studio-toned
   cover (no muddy video) that whisks away quickly */
.loader.is-rtt{ background:radial-gradient(120% 85% at 50% 10%, var(--bg-center), var(--bg-edge)); }
.loader.is-rtt .loader__bg,
.loader.is-rtt .loader__grade,
.loader.is-rtt .loader__tag,
.loader.is-rtt .loader__inner{ display:none; }
.loader.is-rtt.is-done{ transition:transform .5s var(--ease); }

/* the type rises in on load — quick enough to be felt even on fast loads */
.loader__tag   { animation:loaderUp .9s var(--ease) both; }
.loader__kicker{ animation:loaderUp .9s var(--ease) .06s both; }
.loader__mark  { animation:loaderUp 1s  var(--ease) .14s both; }
.loader__line  { animation:loaderUp 1s  var(--ease) .26s both; }
.loader__bar   { animation:loaderUp 1s  var(--ease) .38s both; }
.loader__meta  { animation:loaderUp 1s  var(--ease) .46s both; }
@keyframes loaderUp{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }

@media(max-width:560px){ .loader__line br{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .loader__bg{ animation:none; }
  .loader__tag,.loader__kicker,.loader__mark,.loader__line,.loader__bar,.loader__meta{ animation:none; }
}

/* ===========================================================
   Return-to-top sign — a small glass disc that appears while the
   page glides back up on reload / brand-click.
   =========================================================== */
.relift{
  position:fixed; top:50%; left:50%; z-index:9500; transform:translate(-50%,-50%) scale(.82);
  display:grid; place-items:center; width:96px; height:96px; border-radius:50%;
  pointer-events:none; opacity:0; visibility:hidden;
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
  transition:opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.relift.is-on{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
.relift__ring{
  position:absolute; inset:9px; border-radius:50%;
  border:2px solid transparent; border-top-color:var(--blue); border-right-color:var(--blue-hi);
  filter:drop-shadow(0 0 6px var(--glow)); animation:reliftSpin .9s linear infinite;
}
.relift__core{
  font-size:1.25rem; color:var(--blue); line-height:1;
  filter:drop-shadow(0 0 10px var(--glow)); animation:reliftPulse 1.6s var(--ease) infinite;
}
.relift__label{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:.6rem; letter-spacing:.18em; color:var(--ink-soft);
  text-shadow:0 1px 10px rgba(246,249,253,.8);
}
@keyframes reliftSpin{ to{ transform:rotate(360deg); } }
@keyframes reliftPulse{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.18); opacity:1; } }
@media (prefers-reduced-motion:reduce){ .relift__ring,.relift__core{ animation:none; } }

/* ===========================================================
   Navigation (glass)
   =========================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:7000;
  display:flex; align-items:center; justify-content:space-between;
  margin:.9rem clamp(.8rem,3vw,1.8rem); padding:.7rem clamp(1rem,2.5vw,1.6rem);
  border-radius:18px;
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
  transition:transform .5s var(--ease);
}
.nav.is-hidden{ transform:translateY(-160%); }
.nav__brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:600; letter-spacing:.01em; color:var(--ink); }
.nav__logo{ color:var(--blue); animation:spin 8s linear infinite; display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.nav__name{ font-size:1.05rem; }
.nav__links{ display:flex; gap:1.8rem; font-size:.9rem; }
.nav__links a{ position:relative; color:var(--ink-soft); transition:color .3s; }
.nav__links a:hover{ color:var(--ink); }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-5px; width:0; height:1.5px; background:var(--blue); transition:width .35s var(--ease); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-mono); font-size:.76rem; color:var(--ink); border:1px solid var(--line-2); padding:.5rem .85rem; border-radius:999px; transition:background .3s,border-color .3s; }
.nav__cta:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
@media(max-width:760px){ .nav__links{ display:none; } }

/* ===========================================================
   HERO — tall section; inner stage is sticky over the studio.
   The studio video scrubs across this section's scroll, then holds.
   =========================================================== */
.hero{ position:relative; height:460vh; }
.hero__stage{
  position:sticky; top:0; height:100vh; width:100%; overflow:hidden;
  perspective:1400px;
}

/* registration tag, top-left */
.hero__tag{
  position:absolute; top:clamp(5.5rem,9vh,7rem); left:clamp(1.4rem,4vw,3.2rem);
  font-size:.72rem; color:var(--ink-soft); z-index:6; letter-spacing:.14em;
}
.hero__crop{ color:var(--blue); margin-right:.3rem; }

/* soft studio key-light behind the headline so dark type reads off the wall */
.hero__stage::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    radial-gradient(60% 70% at 82% 50%, rgba(247,250,254,.55), rgba(247,250,254,.18) 45%, transparent 70%),
    linear-gradient(270deg, rgba(247,250,254,.40) 0%, rgba(247,250,254,.10) 26%, transparent 46%);
}
/* right content / phases */
.hero__content{
  position:absolute; right:clamp(1.4rem,5vw,5rem); top:0; bottom:0;
  width:min(52vw,680px); display:flex; align-items:center; justify-content:flex-end;
  text-align:right; z-index:5; perspective:1100px;
}
.phases{ position:relative; width:100%; transform-style:preserve-3d; }
.phase{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:100%; opacity:0; visibility:hidden; will-change:transform,opacity;
  display:flex; flex-direction:column; align-items:flex-end;
}
.phase.is-active{ opacity:1; visibility:visible; }
.phase__kicker{ font-size:.78rem; color:var(--blue-deep); margin-bottom:1.2rem; font-weight:700; letter-spacing:.1em; }
.phase__title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(3.4rem,9.5vw,8.5rem); line-height:.82; letter-spacing:-.03em;
  text-transform:uppercase; margin-bottom:1.4rem;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .25s var(--ease);
}
.phase__title .line{ display:block; transform:translateZ(0); }
/* solid line — 3D extrusion + light halo so it reads on the studio wall */
.phase__title .line:not(.line--outline){
  color:var(--ink);
  text-shadow:
    0 1px 0 #aec0d2, 0 2px 0 #9fb2c6, 0 3px 0 #91a5bb,
    0 6px 18px rgba(10,24,48,.40), 0 0 14px rgba(244,248,252,.55);
}
.phase__title .line--outline{
  color:transparent; -webkit-text-stroke:1.7px var(--blue);
  filter:drop-shadow(0 6px 16px rgba(20,102,255,.35)) drop-shadow(0 0 10px rgba(244,248,252,.4));
}
.phase__sub{ font-size:clamp(.98rem,1.5vw,1.18rem); color:var(--ink); font-weight:500; max-width:46ch; text-shadow:0 1px 14px rgba(244,248,252,.6); }
.phase__sub em{ font-weight:700; }
.phase .btn{ align-self:flex-end; }

/* blueprint spec readout — glass, bottom-left */
.spec{
  position:absolute; left:clamp(1.4rem,4vw,3.2rem); bottom:clamp(1.6rem,5vh,3rem);
  width:min(340px,52vw); padding:1.1rem 1.25rem; border-radius:16px; z-index:6; color:var(--ink-soft);
}
.spec__row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; font-size:.76rem; padding:.42rem 0; border-bottom:1px solid var(--line); }
.spec__row:last-child{ border-bottom:0; padding-bottom:0; }
.spec__row b{ font-family:var(--font-display); font-weight:600; color:var(--ink); letter-spacing:.01em; }
.spec__row b span{ color:var(--blue); }
.spec__bar{ height:2px; background:var(--line-2); margin:.5rem 0; position:relative; overflow:hidden; border-radius:2px; }
.spec__bar i{ position:absolute; inset:0; width:0%; background:linear-gradient(90deg,var(--blue-deep),var(--blue-hi)); box-shadow:0 0 12px var(--glow); }
.spec__row--cue{ color:var(--ink-mute); }
.hero__arrow{ animation:bob 1.6s var(--ease) infinite; color:var(--blue); }
@keyframes bob{ 0%,100%{transform:translateY(0)}50%{transform:translateY(5px)} }

@media(max-width:880px){
  .hero__content{ width:min(88vw,640px); align-items:flex-end; }
  .spec{ display:none; }
}

/* shared button */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:1.8rem;
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--blue); padding:.9rem 1.6rem; border-radius:999px;
  position:relative; overflow:hidden; transition:transform .4s var(--ease),box-shadow .4s;
  box-shadow:0 10px 26px rgba(20,102,255,.35);
}
.btn span{ position:relative; z-index:2; }
.btn::before{ content:""; position:absolute; inset:0; background:var(--blue-deep); transform:translateX(-101%); transition:transform .5s var(--ease); }
.btn:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(20,102,255,.45); }
.btn:hover::before{ transform:translateX(0); }
.btn--lg{ padding:1.1rem 2rem; font-size:.85rem; }
.btn--ghost{
  background:var(--glass-2); color:var(--ink); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:var(--glass-shadow); padding:1.1rem 2rem;
}
.btn--ghost::before{ background:rgba(255,255,255,.5); }
.btn--ghost:hover{ color:var(--blue); }
.cta__actions{ display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; margin-top:2rem; }
.cta__actions .btn{ margin-top:0; }

/* ===========================================================
   Marquee (glass strip)
   =========================================================== */
.marquee{
  overflow:hidden; padding:1.3rem 0; position:relative; z-index:2;
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border-top:1px solid var(--glass-line); border-bottom:1px solid var(--line-2);
}
.marquee__track{ display:flex; gap:2.5rem; white-space:nowrap; width:max-content; animation:marquee 28s linear infinite; }
.marquee__track span{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.4rem,3.4vw,2.4rem); text-transform:uppercase; letter-spacing:-.01em; color:var(--ink); }
.marquee__track .dot{ color:var(--blue); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ===========================================================
   Sections — shared
   =========================================================== */
.section__index{ font-size:.74rem; color:var(--blue-deep); margin-bottom:1.4rem; font-weight:700; }

/* large headings ride over the live studio — give them a soft light halo */
.manifesto__title, .services__title, .gallery__title, .social__title{
  text-shadow:0 2px 22px rgba(246,249,253,.7), 0 1px 3px rgba(246,249,253,.9);
}
.manifesto__lede, .gallery__intro, .social__intro, .services__head .section__index{
  text-shadow:0 1px 14px rgba(246,249,253,.75);
}

/* ===========================================================
   Manifesto — an editorial credo with a spine label + creed cards
   =========================================================== */
.manifesto{ position:relative; max-width:var(--maxw); margin:0 auto; padding:clamp(6rem,13vw,11rem) clamp(1.2rem,5vw,5rem); }
.manifesto__rail{
  position:absolute; left:clamp(.4rem,2.2vw,2rem); top:clamp(6rem,13vw,11rem);
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:.7rem; letter-spacing:.42em; color:var(--blue-deep); opacity:.55;
}
.manifesto__head{ max-width:min(100%,800px); }
.manifesto__title{
  font-family:var(--font-display); font-weight:600; color:var(--ink); margin-top:.4rem;
  font-size:clamp(2.1rem,6vw,4.6rem); line-height:1; letter-spacing:-.03em;
}
.manifesto__title em{ font-style:normal; color:var(--blue); }
.manifesto__lede{
  margin-top:1.8rem; max-width:56ch; color:var(--ink-soft);
  font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.5;
}
.manifesto__lede em{ font-style:normal; color:var(--ink); font-weight:600; }
.manifesto__creed{
  list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
  margin-top:clamp(2.5rem,5vw,4rem);
}
.creed{
  position:relative; display:flex; flex-direction:column; gap:.55rem;
  padding:1.6rem 1.5rem 1.7rem; border-radius:16px;
  background:rgba(250,252,255,.88); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
  overflow:hidden;
}
.creed::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--blue),transparent); }
.creed__no{ font-size:.72rem; font-weight:700; color:var(--blue); letter-spacing:.1em; }
.creed__t{ font-family:var(--font-display); font-weight:600; font-size:1.25rem; letter-spacing:-.01em; color:var(--ink); }
.creed__d{ font-size:.92rem; color:var(--ink-soft); line-height:1.45; }
@media(max-width:760px){ .manifesto__creed{ grid-template-columns:1fr; } .manifesto__rail{ display:none; } }

/* Services — glass cards with 3D tilt */
.services{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.2rem,5vw,5rem) clamp(5rem,10vw,9rem); }
.services__head{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:3rem; }
.services__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.6rem,7vw,6rem); line-height:.9; letter-spacing:-.03em; text-transform:uppercase; color:var(--ink); }
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; perspective:1000px; }
.card{
  position:relative; padding:2rem 1.8rem 2.4rem; border-radius:18px;
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
  overflow:hidden; min-height:280px; display:flex; flex-direction:column;
  transform-style:preserve-3d;
  transform:translateY(var(--lift,0)) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));
  transition:transform .35s var(--ease), box-shadow .4s;
}
.card__no{ font-size:.8rem; color:var(--blue); margin-bottom:auto; font-weight:700; }
.card__title{ font-family:var(--font-display); font-weight:600; font-size:1.8rem; margin:1.6rem 0 .8rem; letter-spacing:-.01em; color:var(--ink); }
.card__body{ font-size:.95rem; color:var(--ink-soft); }
.card__glow{ position:absolute; inset:0; opacity:0; transition:opacity .5s; background:radial-gradient(360px 240px at var(--mx,50%) var(--my,0%), rgba(20,102,255,.18), transparent 70%); pointer-events:none; }
.card:hover{ --lift:-6px; box-shadow:0 26px 60px rgba(35,65,125,.24), inset 0 1px 0 rgba(255,255,255,.85); }
.card:hover .card__glow{ opacity:1; }

/* ===========================================================
   Gallery — editorial build sequence
   =========================================================== */
.gallery{ max-width:var(--maxw); margin:0 auto; padding:clamp(2rem,5vw,4rem) clamp(1.2rem,5vw,5rem) clamp(5rem,10vw,9rem); }
.gallery__head{ display:grid; grid-template-columns:1fr; gap:.4rem; margin-bottom:3rem; max-width:780px; }
.gallery__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.6rem,7vw,6rem); line-height:.9; letter-spacing:-.03em; text-transform:uppercase; color:var(--ink); }
.gallery__intro{ color:var(--ink-soft); max-width:54ch; margin-top:1rem; font-size:1.02rem; }

/* ----------------------------------------------------------
   The build spine — feathered studio plates.
   Each photo's studio walls dissolve (mask) into the page's own
   live studio background, so every car appears to float in the
   same continuous room. Stages zig-zag down a central blueprint line.
   ---------------------------------------------------------- */
.stage-track{
  position:relative; display:flex; flex-direction:column;
  gap:clamp(3.5rem,9vw,8rem); padding:1.5rem 0 1rem;
}

/* central build line the stages hang off — telemetry blueprint */
.stage-track__spine{
  position:absolute; top:1rem; bottom:1rem; left:50%; width:1px; transform:translateX(-50%);
  background:linear-gradient(180deg,transparent, rgba(20,102,255,.34) 9%, rgba(20,102,255,.34) 91%, transparent);
  opacity:.55; pointer-events:none; z-index:0;
}
.stage-track__spine::before, .stage-track__spine::after{
  content:""; position:absolute; left:50%; width:8px; height:8px; border-radius:50%;
  transform:translateX(-50%); background:var(--blue); box-shadow:0 0 18px var(--glow);
}
.stage-track__spine::before{ top:-3px; } .stage-track__spine::after{ bottom:-3px; }

.stage{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.04fr .96fr; align-items:center;
  gap:clamp(1rem,4vw,3rem); width:min(100%,1020px);
}
/* zig-zag: odd steps hug the left rail, even steps hug the right rail.
   The hero photo always rides the OUTER edge; the caption sits inner,
   reading toward the page's centre. */
.stage:nth-of-type(odd){ margin-right:auto; }   /* hug left  */
.stage:nth-of-type(even){ margin-left:auto; }    /* hug right */
.stage__media{ order:1; }
.stage__panel{ order:2; align-items:flex-start; text-align:left; }
.stage:nth-of-type(even) .stage__media{ order:2; }
.stage:nth-of-type(even) .stage__panel{ order:1; align-items:flex-end; text-align:right; }
.stage:nth-of-type(even) .stage__no{ flex-direction:row-reverse; }
.stage:nth-of-type(even) .stage__desc{ margin-left:auto; }

/* -------- feathered media plate -------- */
.stage__media{
  position:relative; aspect-ratio:16/10;
  transform:translateZ(0);   /* own compositing layer for crisp masks */
}
.stage__img{
  position:relative; z-index:3; width:100%; height:100%; object-fit:cover;
  /* feather the studio walls away — only the car + its pool of floor survive */
  -webkit-mask-image:
    radial-gradient(120% 86% at 50% 52%, #000 38%, rgba(0,0,0,.6) 60%, transparent 78%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 80%, transparent 100%);
  mask-image:
    radial-gradient(120% 86% at 50% 52%, #000 38%, rgba(0,0,0,.6) 60%, transparent 78%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 80%, transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  filter:contrast(1.05) saturate(1.07) brightness(1.02);
  transition:transform 1.2s var(--ease), filter 1.3s var(--ease), opacity 1s var(--ease);
}
.stage:hover .stage__img{ transform:scale(1.035); filter:contrast(1.07) saturate(1.14) brightness(1.03); }

/* ---- "materialize": each car condenses out of the studio haze as it
   scrolls into frame — canvas → creature, made literal. Gated so the
   no-gsap fallback and reduced-motion users always see the crisp car. ---- */
@media (prefers-reduced-motion:no-preference){
  html:not(.no-gsap) .stage:not(.is-built) .stage__img{
    opacity:0; transform:scale(1.07);
    filter:blur(20px) saturate(.4) brightness(1.22);
  }
}
.stage.is-built .stage__img{ opacity:1; transform:scale(1); filter:contrast(1.05) saturate(1.07) brightness(1.02); }

/* single bright scan-sweep that passes over the plate as it renders in */
.stage__media::before{
  content:""; position:absolute; left:0; right:0; top:0; height:20%; z-index:5;
  pointer-events:none; opacity:0; mix-blend-mode:screen;
  background:linear-gradient(180deg, transparent, rgba(123,176,255,.55) 45%, rgba(255,255,255,.5) 50%, rgba(123,176,255,.55) 55%, transparent);
}
.stage.is-built .stage__media::before{ animation:stageScan 1.25s var(--ease) .12s 1; }
@keyframes stageScan{
  0%{ opacity:0; transform:translateY(-40%); }
  18%{ opacity:.95; }
  100%{ opacity:0; transform:translateY(520%); }
}

/* soft studio-coloured pool behind the plate so the feather always lands
   on a controlled backdrop — guarantees a seamless dissolve over the video */
.stage__halo{
  position:absolute; z-index:1; inset:-14% -10%;
  background:
    radial-gradient(60% 56% at 50% 50%, rgba(176,191,206,.55), rgba(140,158,178,.26) 56%, transparent 76%),
    radial-gradient(46% 40% at 50% 30%, rgba(120,176,255,.16), transparent 70%);
  filter:blur(7px); pointer-events:none;
}

/* rotating dashed reticle — telemetry / scan motif, same blue HUD language */
.stage__reticle{
  position:absolute; z-index:2; top:50%; left:50%; width:54%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%;
  border:1px dashed rgba(20,102,255,.34);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 0 50px rgba(20,102,255,.08);
  opacity:.7; pointer-events:none; animation:reticleSpin 34s linear infinite;
}
.stage__reticle::before{
  content:""; position:absolute; inset:14%; border-radius:50%;
  border:1px solid rgba(20,102,255,.16);
}
@keyframes reticleSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* grounded contact shadow under the car */
.stage__contact{
  position:absolute; z-index:2; left:50%; bottom:9%; width:60%; height:9%;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(7,16,30,.46), transparent 70%);
  filter:blur(9px); pointer-events:none;
}

/* telemetry tick that rides the OUTER edge of each plate — a small
   build-timeline marker that alternates sides with the zig-zag */
.stage__node{
  position:absolute; z-index:4; top:50%; width:7px; height:7px; border-radius:50%;
  background:var(--blue); box-shadow:0 0 0 5px rgba(20,102,255,.12), 0 0 18px var(--glow);
  transform:translateY(-50%);
}
.stage:nth-of-type(odd) .stage__node{ left:-3.5%; }
.stage:nth-of-type(even) .stage__node{ right:-3.5%; }
.stage__node::before{
  content:""; position:absolute; top:50%; width:clamp(1.2rem,4vw,3rem); height:1px;
  background:linear-gradient(90deg, var(--blue), transparent);
  transform:translateY(-50%);
}
.stage:nth-of-type(odd) .stage__node::before{ right:100%; transform:translateY(-50%) scaleX(-1); }
.stage:nth-of-type(even) .stage__node::before{ left:100%; }

/* -------- glass caption card (3D tilt shared with .card/.soc via JS) -------- */
.stage__panel{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.45rem;
  padding:clamp(1.3rem,2.4vw,1.9rem) clamp(1.4rem,2.6vw,2rem); border-radius:20px;
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
  transform-style:preserve-3d;
  transform:translateY(var(--lift,0)) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));
  transition:transform .35s var(--ease), box-shadow .4s;
  overflow:hidden;
}
.stage__panel::after{   /* pointer spotlight, like the cards */
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s; pointer-events:none;
  background:radial-gradient(320px 220px at var(--mx,50%) var(--my,0%), rgba(20,102,255,.16), transparent 70%);
}
.stage__panel:hover{ --lift:-5px; box-shadow:0 26px 60px rgba(35,65,125,.24), inset 0 1px 0 rgba(255,255,255,.85); }
.stage__panel:hover::after{ opacity:1; }

/* editorial folio — oversized stroked step number with a "/ 04" denominator */
.stage__index{
  display:inline-flex; align-items:baseline; gap:.18em;
  font-family:var(--font-display); font-weight:700; line-height:.8; letter-spacing:-.04em;
  font-size:clamp(3.4rem,8.5vw,6.4rem); color:transparent;
  -webkit-text-stroke:1.4px rgba(20,102,255,.5); margin-bottom:.1rem;
  transform:translateZ(34px);
}
.stage:nth-of-type(even) .stage__index{ flex-direction:row-reverse; }
.stage__index::after{
  content:"/ 04"; font-size:.26em; font-weight:600; letter-spacing:.04em;
  -webkit-text-stroke:.8px rgba(20,102,255,.36); align-self:flex-end; transform:translateY(-.2em);
}
.stage__no{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; color:var(--blue-deep); letter-spacing:.13em; font-weight:700;
  transform:translateZ(26px);
}
.stage__dot{ width:6px; height:6px; border-radius:50%; background:var(--blue); box-shadow:0 0 10px var(--glow); }
.stage__cap{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; color:var(--ink);
  font-size:clamp(1.5rem,2.7vw,2.3rem); line-height:1.02; transform:translateZ(20px);
}
.stage__desc{ color:var(--ink-soft); font-size:.97rem; max-width:42ch; transform:translateZ(14px); }
.stage__tick{ margin-top:.5rem; font-size:.68rem; color:var(--ink-mute); letter-spacing:.12em; transform:translateZ(10px); }

/* -------- responsive: stack into a clean single column -------- */
@media(max-width:880px){
  .stage-track{ gap:clamp(3rem,12vw,5rem); }
  .stage-track__spine{ display:none; }
  .stage, .stage:nth-of-type(odd), .stage:nth-of-type(even){
    grid-template-columns:1fr; width:100%; margin:0; gap:1.2rem;
  }
  .stage__media, .stage:nth-of-type(even) .stage__media{ order:1; }
  .stage__panel, .stage:nth-of-type(even) .stage__panel{
    order:2; text-align:left; align-items:flex-start;
  }
  .stage:nth-of-type(even) .stage__no{ flex-direction:row; }
  .stage:nth-of-type(even) .stage__desc{ margin-left:0; }
  .stage__node{ display:none; }
}

/* ===========================================================
   Community / Socials — glass tiles with 3D tilt
   =========================================================== */
.social{ max-width:var(--maxw); margin:0 auto; padding:clamp(2rem,5vw,4rem) clamp(1.2rem,5vw,5rem) clamp(4rem,9vw,7rem); }
.social__head{ max-width:760px; margin-bottom:3rem; }
.social__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.6rem,7.5vw,6.2rem); line-height:.9; letter-spacing:-.03em; text-transform:uppercase; color:var(--ink); }
.social__intro{ color:var(--ink-soft); max-width:56ch; margin-top:1.1rem; font-size:1.05rem; }
.social__badge{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:1.6rem;
  font-size:.74rem; color:var(--blue-deep); font-weight:700;
  padding:.6rem 1rem; border-radius:999px;
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
}
.social__star{ color:var(--blue); }

.social__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; perspective:1000px; }
.soc{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.3rem;
  padding:1.6rem 1.5rem 1.5rem; border-radius:18px;
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
  min-height:230px; transform-style:preserve-3d;
  transform:translateY(var(--lift,0)) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));
  transition:transform .35s var(--ease), box-shadow .4s;
}
.soc::before{
  content:""; position:absolute; right:-30%; top:-30%; width:80%; height:80%; border-radius:50%;
  background:radial-gradient(circle,var(--soc-accent,var(--glow)),transparent 65%);
  opacity:.28; filter:blur(12px); transition:opacity .5s; pointer-events:none;
}
.soc:hover{ --lift:-6px; box-shadow:0 26px 60px rgba(35,65,125,.24), inset 0 1px 0 rgba(255,255,255,.85); }
.soc:hover::before{ opacity:.5; }
.soc__icon{ color:var(--soc-accent,var(--blue)); margin-bottom:auto; }
.soc__count{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.4rem,4.4vw,3.6rem); line-height:1; letter-spacing:-.03em; color:var(--ink); }
.soc__count b{ font-weight:600; }
.soc__count--cta{ color:transparent; -webkit-text-stroke:1.4px var(--soc-accent,var(--blue)); }
.soc__handle{ color:var(--ink-soft); font-size:.95rem; }
.soc__plat{ display:flex; align-items:center; gap:.4rem; font-size:.7rem; color:var(--ink-mute); margin-top:.3rem; font-weight:700; }
.soc__plat i{ font-style:normal; transition:transform .4s var(--ease); }
.soc:hover .soc__plat i{ transform:translate(3px,-3px); }

.soc--ig{ --soc-accent:#e1306c; }
.soc--fb{ --soc-accent:#1877f2; }
.soc--map{ --soc-accent:#1f9d6b; }

/* ---- Google Reviews tile (live-sliding) ---- */
.soc--gr{ --soc-accent:#4285F4; justify-content:flex-start; gap:.85rem; min-height:262px; }
.gr__head{ display:flex; align-items:flex-start; gap:.7rem; }
.gr__g{
  width:36px; height:36px; flex:none; display:grid; place-items:center;
  background:#fff; border-radius:10px; box-shadow:0 6px 16px rgba(20,40,80,.18);
}
.gr__rate{ display:flex; flex-direction:column; gap:.2rem; }
.gr__score{ display:flex; align-items:center; gap:.5rem; line-height:1; }
.gr__score b{ font-family:var(--font-display); font-weight:600; font-size:1.7rem; color:var(--ink); letter-spacing:-.01em; }
.gr__meta{ display:flex; align-items:center; gap:.4rem; font-size:.62rem; color:var(--ink-mute); letter-spacing:.07em; }
.gr__live{ width:7px; height:7px; border-radius:50%; background:#34A853; box-shadow:0 0 0 0 rgba(52,168,83,.7); animation:pulse 1.8s var(--ease) infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(52,168,83,.6)} 70%{box-shadow:0 0 0 7px rgba(52,168,83,0)} 100%{box-shadow:0 0 0 0 rgba(52,168,83,0)} }

/* aggregate star bar with fractional fill */
.gr__stars{ position:relative; display:inline-block; font-size:.82rem; letter-spacing:1px; color:rgba(22,46,88,.22); }
.gr__stars::before{ content:"★★★★★"; }
.gr__stars::after{ content:"★★★★★"; position:absolute; left:0; top:0; width:var(--fill,90%); overflow:hidden; white-space:nowrap; color:#f5a623; }

/* sliding reviews */
.gr__viewport{ position:relative; flex:1 1 auto; min-height:108px; }
.gr__review{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:.4rem;
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.gr__review.is-active{ opacity:1; transform:none; }
.gr__review.is-out{ opacity:0; transform:translateY(-16px); }
.gr__rstars{ color:#f5a623; font-size:.82rem; letter-spacing:2px; }
.gr__rstars--4 span{ color:rgba(22,46,88,.22); }
.gr__quote{
  font-size:.86rem; line-height:1.34; color:var(--ink); font-weight:500;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.gr__by{ font-size:.7rem; color:var(--ink-mute); margin-top:auto; }

.gr__bar{ display:block; height:2px; border-radius:2px; background:var(--line-2); overflow:hidden; }
.gr__bar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#4285F4,#34A853,#FBBC05); }

@media(max-width:920px){ .social__grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .social__grid{ grid-template-columns:1fr; } }

/* ===========================================================
   CTA — the "lights down" finale. The page dims from the light
   studio into a dark stage that flows straight into the footer,
   so the headline reads bright and crisp.
   =========================================================== */
.cta{
  position:relative; z-index:2; overflow:hidden;
  padding:clamp(6rem,15vw,13rem) clamp(1.2rem,5vw,5rem) clamp(5rem,10vw,9rem);
  text-align:center;
  background:linear-gradient(180deg,
    rgba(8,16,30,0) 0%,
    rgba(8,15,28,.78) 14%,
    #070e1c 40%,
    #060b16 100%);
}
.cta__glow{ content:""; position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); width:80vw; height:80vw; max-width:940px; max-height:940px; border-radius:50%; background:radial-gradient(circle,rgba(20,102,255,.32),transparent 62%); filter:blur(36px); pointer-events:none; z-index:0; }
.cta__inner{ position:relative; z-index:1; max-width:880px; margin:0 auto; }

/* live status badge */
.cta__status{
  display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.4rem;
  padding:.5rem .95rem; border-radius:999px;
  background:rgba(123,176,255,.08); border:1px solid rgba(123,176,255,.26);
  font-size:.66rem; letter-spacing:.14em; color:#cfe0f7;
}
.cta__live{ width:7px; height:7px; border-radius:50%; background:#37e0a0; box-shadow:0 0 10px rgba(55,224,160,.9); animation:ctaPulse 1.8s ease-in-out infinite; }
@keyframes ctaPulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.5; transform:scale(.7);} }
.cta .section__index{ color:var(--blue-hi); }
.cta__title{
  font-family:var(--font-display); font-weight:600; font-size:clamp(2.6rem,8vw,6.2rem);
  line-height:.94; letter-spacing:-.03em; text-transform:uppercase; color:#f2f7fd;
  text-shadow:0 0 44px rgba(20,102,255,.28), 0 3px 30px rgba(4,9,18,.7);
}
.cta__title em{ font-style:normal; color:var(--blue-hi); }
.cta__sub{ color:#b3c3da; max-width:48ch; margin:1.5rem auto 0; font-size:1.05rem; line-height:1.5; text-shadow:0 1px 16px rgba(4,9,18,.6); }

/* contact channels — a comms console instead of plain buttons */
.cta__channels{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; max-width:680px; margin:2.6rem auto 0; text-align:left; }
.cta__channel{
  position:relative; display:flex; align-items:center; gap:1rem; overflow:hidden;
  padding:1.1rem 1.2rem; border-radius:16px;
  background:rgba(123,176,255,.06); border:1px solid rgba(123,176,255,.22);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:#e8eef7; transition:transform .35s var(--ease), border-color .35s, background .35s, box-shadow .35s;
}
.cta__channel--primary{ background:linear-gradient(135deg, rgba(20,102,255,.9), rgba(10,54,200,.92)); border-color:transparent; box-shadow:0 14px 34px rgba(20,102,255,.4); color:#fff; }
.cta__ch-ic{ display:grid; place-items:center; width:42px; height:42px; flex:0 0 auto; border-radius:11px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:currentColor; }
.cta__channel:not(.cta__channel--primary) .cta__ch-ic{ background:rgba(123,176,255,.1); border-color:rgba(123,176,255,.26); color:var(--blue-hi); }
.cta__ch-txt{ display:flex; flex-direction:column; gap:.15rem; line-height:1.15; min-width:0; }
.cta__ch-txt b{ font-size:.98rem; font-weight:600; }
.cta__ch-txt i{ font-style:normal; font-size:.74rem; opacity:.72; font-family:var(--font-mono); letter-spacing:.02em; }
.cta__ch-go{ margin-left:auto; font-size:1.05rem; opacity:.8; transition:transform .35s var(--ease); }
.cta__channel:hover{ transform:translateY(-4px); }
.cta__channel--primary:hover{ box-shadow:0 22px 50px rgba(20,102,255,.55); }
.cta__channel:not(.cta__channel--primary):hover{ border-color:rgba(123,176,255,.5); background:rgba(123,176,255,.12); }
.cta__channel:hover .cta__ch-go{ transform:translate(3px,-3px); }
@media(max-width:600px){ .cta__channels{ grid-template-columns:1fr; } }

/* ===========================================================
   Footer — a dark studio slab that anchors the light page.
   High-contrast bone/blue type so everything is crisp & legible.
   =========================================================== */
.footer{
  position:relative; z-index:2; overflow:hidden; isolation:isolate;
  padding:clamp(2rem,4vw,3.5rem) clamp(1.2rem,5vw,5rem) clamp(1.4rem,3vw,2.4rem);
  background:
    radial-gradient(120% 80% at 14% 0%, rgba(28,52,92,.55) 0%, transparent 58%),
    linear-gradient(180deg, #060b16 0%, #050a13 60%, #04080f 100%);
  color:#dfe8f5;
  border-top:1px solid rgba(123,176,255,.16);
}
/* atmospheric blue glow + film grain */
.footer__glow{
  position:absolute; z-index:0; inset:auto 0 -30% 0; height:80%; pointer-events:none;
  background:radial-gradient(60% 100% at 80% 100%, rgba(20,102,255,.22), transparent 70%),
            radial-gradient(50% 100% at 10% 100%, rgba(59,134,255,.16), transparent 70%);
  filter:blur(10px);
}
.footer__grain{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.footer__inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; }

.footer__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap; margin-bottom:clamp(2.4rem,5vw,4rem); }
.footer__tag{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.7rem; letter-spacing:.16em; color:var(--blue-soft); margin-bottom:1.2rem;
}
.footer__dot{ width:7px; height:7px; border-radius:50%; background:var(--blue-hi); box-shadow:0 0 12px var(--glow); }
.footer__statement{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.03em; line-height:.9;
  font-size:clamp(2.4rem,6vw,4.6rem); text-transform:uppercase; color:#f2f6fc;
  text-shadow:0 2px 30px rgba(8,20,45,.6);
}
.footer__statement em{ font-style:normal; color:var(--blue-hi); }
.footer__say{ margin-top:1.1rem; max-width:46ch; color:#a9bcd6; font-size:.98rem; line-height:1.5; }
.footer__lead{ max-width:540px; }

/* back to top — glowing glass pill */
.footer__totop{
  display:inline-flex; align-items:center; gap:.7rem; cursor:pointer;
  padding:.7rem .9rem .7rem .7rem; border-radius:999px;
  background:rgba(123,176,255,.07); border:1px solid rgba(123,176,255,.28);
  color:#dfe8f5; font-size:.62rem; letter-spacing:.14em; line-height:1.05; text-align:left;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .35s var(--ease), border-color .35s, transform .35s var(--ease), box-shadow .35s;
}
.footer__totop-ring{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(123,176,255,.4); color:var(--blue-hi); transition:transform .4s var(--ease);
}
.footer__totop-arrow{ font-size:1rem; line-height:1; }
.footer__totop:hover{
  background:rgba(20,102,255,.16); border-color:rgba(123,176,255,.6);
  transform:translateY(-3px); box-shadow:0 14px 34px rgba(20,102,255,.28);
}
.footer__totop:hover .footer__totop-ring{ transform:translateY(-3px); }

.footer__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1.8rem 2rem;
  padding-bottom:clamp(2.4rem,5vw,3.6rem); border-bottom:1px solid rgba(123,176,255,.14);
}
.footer__col{ display:flex; flex-direction:column; gap:.7rem; }
.footer__label{ font-size:.68rem; letter-spacing:.16em; color:var(--blue-hi); font-weight:700; }
.footer__name{ color:#eaf1fb; font-size:1.05rem; font-weight:500; }
.footer__meta{ font-size:.66rem; letter-spacing:.12em; color:#6f86a8; margin-top:.15rem; }
.footer__socials{ display:flex; flex-direction:column; gap:.55rem; }
.footer__link{
  position:relative; width:max-content; color:#cdd9ec; font-size:1.02rem; font-weight:500;
  transition:color .3s; padding-bottom:2px;
}
.footer__link i{ font-style:normal; color:var(--blue-soft); transition:transform .3s var(--ease); display:inline-block; }
.footer__link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:linear-gradient(90deg,var(--blue-hi),var(--blue-soft));
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.footer__link:hover{ color:#fff; }
.footer__link:hover::after{ transform:scaleX(1); }
.footer__link:hover i{ transform:translate(3px,-3px); }

.footer__base{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  margin-top:1.6rem; font-size:.72rem; letter-spacing:.06em; color:#8aa0c0;
}
.footer__motto{ color:var(--blue-soft); }
.footer__star{ color:var(--blue-hi); }

/* giant signature wordmark — a glowing watermark behind the base */
.footer__big{
  position:relative; z-index:1; margin-top:clamp(1.5rem,4vw,3rem);
  font-family:var(--font-display); font-weight:700; text-align:center; white-space:nowrap;
  font-size:clamp(2.4rem,12.5vw,11rem); line-height:.8; letter-spacing:-.03em;
  color:transparent;
  background:linear-gradient(180deg, rgba(123,176,255,.5), rgba(20,102,255,.08) 70%, transparent);
  -webkit-background-clip:text; background-clip:text;
  text-shadow:0 0 60px rgba(20,102,255,.18);
  pointer-events:none; user-select:none;
}

/* ===========================================================
   Reveal helpers
   =========================================================== */
.reveal{ opacity:0; transform:translateY(40px); }
.reveal-lines .word{ display:inline-block; opacity:0; transform:translateY(110%); }
.reveal-lines{ overflow:hidden; }

@media(prefers-reduced-motion:reduce){ *{ animation-duration:.001s !important; } }

/* on small screens the studio drops behind a stronger veil for legibility */
@media(max-width:880px){
  .studio__veil{ background:rgba(244,247,251,.22); }
}