/* ============================================================
   CodeSpark Clubs — redesign
   Palette logic: BMW Individual "Frozen Black". Matte paint scatters
   light instead of returning it, so nothing here is pure #000 and
   nothing carries a specular highlight — the ground is a family of
   low-sheen graphites, the only bright material is brushed aluminium
   trim, and one hot ember appears the way a brake caliper does:
   rarely, and small.
   ============================================================ */

:root {
  /* matte body panels — faintly cool, never black-black */
  --void: #0b0c0d;
  --graphite: #121416;
  --carbon: #191b1e;
  --edge: #2c3034;
  --edge-soft: #202327;
  --steel: #9ba1a9;
  --steel-dim: #666c74;
  --paper: #f1f2f4;

  /* brushed aluminium trim — the accent, and the only thing that shines */
  --trim: #c3c9d1;
  --trim-hi: #eef0f3;
  --trim-lo: #79808a;
  --grad-trim: linear-gradient(100deg, var(--trim-hi), var(--trim) 45%, var(--trim-lo));

  /* Two coloured accents against the matte ground. Ember is the warm one —
     a caliper behind a matte wheel; plasma is the cold LED inside the
     machine's head, so it only ever appears on things that are "live". */
  --ember: #e04a2c;
  --ember-hi: #ff8a45;
  --grad-ember: linear-gradient(100deg, var(--ember-hi), var(--ember));
  --plasma: #7fe9ff;

  /* matte finish: a fixed grain sheet + an edge vignette. Together they
     kill the flat-screen gloss that makes dark sites look like plastic. */
  --grain: 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='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  --gutter: clamp(1.25rem, 5vw, 6rem);
  --rail-w: 1px;

  /* Typeface logic: nothing off the default startup shelf — no Inter, no
     Space Grotesk, no Instrument Sans — and, after three tries, no fourth
     flavour of bold geometric sans either. That category was the problem: a
     wide bold sans over a neutral sans is the templated pairing, and swapping
     between them changes nothing.

     The pairing here is built on contrast instead. Big Shoulders Display is
     tall industrial condensed — machine signage, race livery, the lettering
     stencilled on a chassis — and it holds the brushed-metal gradient across
     its long vertical strokes. Martian Mono, run wide, is its opposite in
     every axis: squat where the display is tall, wide where it is narrow,
     plotted where it is drawn. Familjen Grotesk sits between them and stays
     out of the way so a paragraph is still a paragraph.

     Condensed also buys headroom: the same word takes far less width, so the
     headings can run much larger than any of the previous faces allowed. */
  --font-display: "Big Shoulders Display", "Haettenschweiler", Impact, sans-serif;
  --font-body: "Familjen Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --mono-wide: 100%;

  /* One easing family across the whole page — half of what "flow" means. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--void);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ---------- matte finish ----------
   Two fixed sheets over everything: a fine grain that scatters the light
   the way matte paint does, and a soft edge vignette so the panel reads as
   a curved surface rather than a flat black rectangle. Both are inert to
   the pointer and sit under the cursor layer. */

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
body::before {
  z-index: 148;
  background: radial-gradient(130% 105% at 50% 40%, transparent 42%, rgba(0, 0, 0, 0.42) 100%);
}
body::after {
  z-index: 149;
  background-image: var(--grain);
  background-size: 160px 160px;
  opacity: 0.055;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce) { body::after { opacity: 0.035; } }


a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--ember); color: var(--void); }

/* ---------- shared primitives ---------- */

.mono {
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
}

.eyebrow {
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel-dim);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 2rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg,
    var(--ember) 0%, var(--ember) 34%,
    var(--ember-hi) 46%, #ffe2d4 50%, var(--ember-hi) 54%,
    var(--ember) 66%, var(--ember) 100%);
  background-size: 280% 100%;
  background-position: 140% 0;
  flex: none;
  animation: charge 6s var(--ease-inout) infinite;
}
/* the bright node is off the rule at both ends of the cycle, so the reset
   at 100% never reads as a jump */
@keyframes charge {
  0%, 55% { background-position: 140% 0; }
  100%    { background-position: -40% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow::before { animation: none; background: var(--grad-ember); }
}

.display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0;
}

.section {
  position: relative;
  /* Always write the side gutter explicitly — a `padding: Xrem 0` shorthand
     silently zeroes it and crowds the text against the viewport edge. */
  padding: clamp(5rem, 11vh, 9rem) var(--gutter);
}

.section__inner { max-width: 1440px; margin: 0 auto; width: 100%; }

.hr {
  height: 1px;
  border: 0;
  background: var(--edge-soft);
  margin: 0;
}

/* ---------- fail-safe reveal states ----------
   Everything hidden for animation is gated behind `html.js`, which the
   script adds as its very first act. If the JS never runs — a blocked CDN,
   a syntax error, a sandboxed preview — the page still renders in full
   instead of showing a blank screen. */

html.js [data-reveal] { opacity: 0; }
html.js .split-line { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1 !important; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- preloader: "Cold Boot" ---------- */

.boot { display: none; }
html.js .boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--void);
  display: grid;
  place-items: center;
  padding: var(--gutter);
}
.boot__inner { width: min(460px, 100%); }
.boot__log {
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--steel-dim);
  min-height: 6.5em;
  margin: 0 0 1.5rem;
}
.boot__log b { color: var(--trim); font-weight: 400; }
.boot__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.boot__label {
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel-dim);
}
.boot__count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.boot__bar {
  margin-top: 1rem;
  height: 2px;
  background: var(--edge);
  position: relative;
  overflow: hidden;
}
.boot__bar i {
  position: absolute;
  inset: 0;
  background: var(--grad-trim);
  transform: scaleX(0);
  transform-origin: left;
  display: block;
}

/* ---------- aperture cursor ---------- */

.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border: 1px solid var(--paper);
  border-radius: 50%;
  pointer-events: none;
  z-index: 190;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width 0.32s var(--ease-out), height 0.32s var(--ease-out), opacity 0.3s;
  display: none;
}
.cursor.is-live { display: block; }
.cursor.is-link { width: 46px; height: 46px; }
.cursor.is-aperture { width: 96px; height: 96px; }

/* ---------- through-line rail: "Trace Charge" ---------- */

.rail {
  position: fixed;
  left: calc(var(--gutter) / 2.6);
  top: 0;
  bottom: 0;
  width: var(--rail-w);
  background: var(--edge-soft);
  z-index: 60;
  pointer-events: none;
}
.rail i {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--trim), var(--ember));
  display: block;
}
.rail i::after {
  content: "";
  position: absolute;
  bottom: -3px; left: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ember);
  transform: translateX(-50%);
  box-shadow: 0 0 var(--glow, 8px) var(--ember);
}
@media (max-width: 900px) { .rail { display: none; } }

/* ---------- ambient canvas: "Spark Field" ----------
   Named .spark-field, not .field: the form uses .field for its input
   groups, and the collision was making every form field position:fixed. */

.spark-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem var(--gutter);
  background: rgba(11, 12, 13, 0.72);
  backdrop-filter: saturate(120%) blur(14px);
  -webkit-backdrop-filter: saturate(120%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s, background 0.4s;
}
.nav.is-stuck { border-bottom-color: var(--edge-soft); }

.brand { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.brand__mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--grad-trim);
  position: relative;
  flex: none;
}
.brand__mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--void);
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nav__links { display: flex; gap: 2rem; align-items: center; }
.nav__link {
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  position: relative;
  padding: 0.35rem 0;
  transition: color 0.3s;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--grad-ember);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.nav__link:hover { color: var(--paper); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__cta {
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--paper);
  padding: 0.65rem 1.15rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex: none;
}
.nav__cta span { position: relative; z-index: 1; transition: color 0.35s; }
.nav__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-trim);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
}
.nav__cta:hover::before { transform: translateY(0); }
.nav__cta:hover span { color: var(--void); }

@media (max-width: 860px) { .nav__links { display: none; } }

/* ---------- hero ----------
   Lando-Norris logic: one subject, centred, at full height, with the
   wordmark crossing it. Everything else is pushed to the frame edges so
   the machine owns the middle of the screen. */

.hero {
  position: relative;
  /* an explicit height, not min-height: the 1fr stage row has to be a
     definite track or the figure's percentage heights fall back to the
     image's intrinsic 1024px and blow through the fold */
  height: 100svh;
  min-height: 560px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(0.75rem, 2.5vh, 1.75rem);
  padding: clamp(4.75rem, 11vh, 6.5rem) var(--gutter) clamp(1.25rem, 3.5vh, 2.25rem);
  z-index: 1;
}
/* pulled out of the grid so the machine gets the whole middle row */
.hero__eyebrow {
  position: absolute;
  top: clamp(5.25rem, 12vh, 7rem);
  left: var(--gutter);
  margin: 0;
  z-index: 4;
}

.hero__stage {
  position: relative;
  display: grid;
  /* an explicit 1fr track, not the implicit auto one: an auto row takes its
     height from the 1024px image and overflows the fold instead of being
     capped by the stage */
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  min-height: 0;
}

/* both copies of the wordmark share every metric — they only differ in
   depth and finish, so any change here has to stay in one rule */
.hero__word {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: 100%;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(2.4rem, 11.6vw, 11rem);
  line-height: 0.8;
  letter-spacing: -0.045em;
  pointer-events: none;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__word em { font-style: normal; }

/* behind the machine: brushed gunmetal, lit from above */
.hero__word--back {
  z-index: 1;
  background-image: linear-gradient(180deg, #363b41 0%, #23272c 46%, #14161a 100%);
}
/* in front of the chest: the same letters in trim, clipped at the crossing */
.hero__word--front {
  z-index: 3;
  background-image: var(--grad-trim);
  clip-path: inset(50% 0 0 0);
}

.hero__figure {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  /* one drop shadow on the group seats the cutout on the matte ground —
     without it the robot floats like a sticker */
  filter: drop-shadow(0 34px 55px rgba(0, 0, 0, 0.72));
}
/* a diffuse pool of light behind the head, the only sheen on the page */
.hero__figure::before {
  content: "";
  position: absolute;
  top: 40%;
  left: 50%;
  width: min(78%, 720px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(127, 233, 255, 0.10), rgba(195, 201, 209, 0.07) 38%, transparent 64%);
  z-index: -1;
  pointer-events: none;
}

/* The box fills its cell and the images letterbox inside it with
   object-fit. Sizing the box off the square image instead (width:auto +
   aspect-ratio) makes its min-content width equal to the stage height,
   which on a phone is wider than the screen and drags the whole hero grid
   out past the viewport. Both layers contain identically, so the aperture
   still lands where the pointer is. */
.robot-reveal--cutout {
  background: transparent;
  border-radius: 0;
  max-width: none;
  width: 100%;
  height: 110%;
  margin: 0;
  overflow: visible;
}
.robot-reveal--cutout .robot-reveal__img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

.hero__hint {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--steel-dim);
}
.hero__hint b { color: var(--trim); font-weight: 400; }

.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
  border-top: 1px solid var(--edge-soft);
  padding-top: clamp(1rem, 2.5vh, 1.75rem);
}
.hero__sub {
  max-width: 42ch;
  color: var(--steel);
  font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.15rem);
  margin: 0 0 1.5rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

.hero__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 3rem);
}
.hero__meta div { min-width: 0; }
.hero__meta dt {
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel-dim);
  margin-bottom: 0.4rem;
}
.hero__meta dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}

@media (max-width: 980px) {
  .hero { height: auto; min-height: 0; gap: 1.5rem; }
  /* the image letterboxes to the narrower axis, so cap the stage near
     its own width or the machine floats in a band of empty ground */
  .hero__stage { height: min(58svh, 96vw); min-height: 0; }
  .hero__eyebrow { position: static; margin-bottom: 0.5rem; }
  .hero__word { top: 56%; }
  .hero__foot { grid-template-columns: 1fr; }
  /* no room beside the machine at this width, so the hint becomes a
     caption sitting on a scrim across its base */
  .hero__hint {
    left: 0;
    right: 0;
    text-align: center;
    padding: 2.5rem 0 0.35rem;
    background: linear-gradient(to top, var(--void) 30%, transparent);
  }
}
@media (max-width: 620px) {
  .hero__word--front { clip-path: inset(54% 0 0 0); }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1.05rem 1.9rem;
  border: 1px solid var(--edge);
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  color: var(--paper);
}
.btn span { position: relative; z-index: 1; transition: color 0.35s; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-trim);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease-out);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover span { color: var(--void); }
.btn--solid { border-color: transparent; }
.btn--solid::before { transform: translateY(0); }
.btn--solid span { color: var(--void); }
.btn--solid:hover::before { transform: translateY(-101%); }
.btn--solid:hover span { color: var(--paper); }
.btn--solid { outline: 1px solid var(--edge); outline-offset: -1px; }

/* ---------- section transitions ----------
   Ten boundaries, ten different mechanics — a shutter, a blade, a split,
   a fanned deck, an iris, a rack, a tilt, a shear, a warp, a drawer. The
   one thing they share is the seam: a single trim line that draws across
   every boundary as you cross it, so ten different moves still read as one
   page. Every element in here is injected by JS and purely decorative —
   with no JS there is simply nothing to hide behind. */

.seam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--grad-trim);
  transform: scaleX(0);
  z-index: 8;
  pointer-events: none;
}

/* T2 — the blade that wipes the manifesto in */
.blade {
  position: absolute;
  top: -4%;
  bottom: -4%;
  left: -30%;
  width: 60%;
  z-index: 9;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, var(--carbon) 22%, var(--graphite) 78%, transparent);
  border-right: 1px solid var(--trim-lo);
  transform: skewX(-11deg);
  will-change: transform;
}

/* T10 — the slot the footer wordmark rises out of */
.footer .drawer { overflow: hidden; margin: 0 0 clamp(2.5rem, 6vh, 4rem); }
.footer .drawer .footer__word { margin: 0; }

/* ---------- rolling labels ----------
   The label rolls out through the top while its copy rolls in from below.
   The real text stays in the DOM — for screen readers, and because it is
   what sizes the button — and is only made invisible; the two pseudo copies
   do the moving, and they inherit the colour the fill is already driving. */

.btn > span,
.nav__cta > span {
  display: block;
  position: relative;
  overflow: hidden;
  line-height: 1.2;
  white-space: nowrap;
  visibility: hidden;
}
.btn > span::before,
.btn > span::after,
.nav__cta > span::before,
.nav__cta > span::after {
  content: attr(data-label);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  visibility: visible;
  transition: transform 0.62s var(--ease-out), color 0.5s;
}
.btn > span::after,
.nav__cta > span::after { transform: translateY(110%); }

.btn:hover > span::before,
.btn:focus-visible > span::before,
.nav__cta:hover > span::before,
.nav__cta:focus-visible > span::before { transform: translateY(-110%); }

.btn:hover > span::after,
.btn:focus-visible > span::after,
.nav__cta:hover > span::after,
.nav__cta:focus-visible > span::after { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .btn > span::before, .btn > span::after,
  .nav__cta > span::before, .nav__cta > span::after { transition-duration: 0.001ms; }
}

/* ---------- marquee ---------- */

.marquee {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--edge-soft);
  border-bottom: 1px solid var(--edge-soft);
  overflow: hidden;
  padding: 1.15rem 0;
  background: var(--graphite);
}
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__item {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.85rem, 1.6vw, 1.15rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  color: var(--steel);
  white-space: nowrap;
}
.marquee__item::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ember);
  flex: none;
}

/* ---------- manifesto ---------- */

.manifesto { background: var(--void); z-index: 1; overflow: hidden; }
.manifesto__text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 4.6vw, 3.6rem);
  line-height: 1.16;
  letter-spacing: -0.03em;
  max-width: 20ch;
  margin: 0;
}
.manifesto__text .w { color: var(--steel-dim); transition: color 0.3s linear; }
.manifesto__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}
.manifesto__aside { color: var(--steel); max-width: 40ch; }
.manifesto__aside p { margin: 0 0 1.2rem; }
.manifesto__sig {
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-dim);
  border-top: 1px solid var(--edge-soft);
  padding-top: 1rem;
  margin-top: 2rem;
}
@media (max-width: 900px) { .manifesto__grid { grid-template-columns: 1fr; } }

/* ---------- stats ---------- */

.stats { background: var(--graphite); z-index: 1; }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--edge-soft);
  border: 1px solid var(--edge-soft);
}
.stat {
  background: var(--graphite);
  padding: clamp(1.75rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.05em;
  display: block;
}
.stat__plus {
  font-size: 0.5em;
  font-weight: 500;
  color: var(--ember);
  margin-left: 0.02em;
  /* sits off the baseline, or against a 5rem numeral it reads as a subscript */
  vertical-align: 0.42em;
}
.stat__num sup {
  font-size: 0.32em;
  vertical-align: super;
  /* solid, not the trim gradient: across two small glyphs the gradient's
     dark end reads as a rendering fault rather than as metal */
  color: var(--trim);
  margin-left: 0.15em;
}
.stat__label {
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-dim);
  margin-top: 1rem;
  display: block;
}
.stat__line {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--trim), var(--ember));
  transform: scaleX(0);
  transform-origin: left;
}
@media (max-width: 860px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- gallery ---------- */

.gallery { z-index: 1; }
.gallery__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.gallery__title { font-size: clamp(2.2rem, 7.4vw, 7.6rem); }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.shot {
  position: relative;
  overflow: hidden;
  background: var(--carbon);
}
.shot img {
  position: relative;
  width: 100%;
  /* oversized and offset: the plate drifts inside this headroom and never
     exposes an edge. See Drift Plates in site.js. */
  height: 118%; top: -9%;
  object-fit: cover;
  transition: scale 0.9s var(--ease-out), filter 0.6s;
  filter: grayscale(0.7) contrast(1.08) brightness(0.74);
}
.shot:hover img { scale: 1.05; filter: grayscale(0) contrast(1.06) brightness(0.92); }
.shot::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,12,13,0.78), transparent 45%);
  pointer-events: none;
}
.shot__tag {
  position: absolute;
  left: 0.9rem; bottom: 0.75rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.shot__tag::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--ember);
  border-radius: 50%;
  flex: none;
}
/* deliberately uneven grid — not a tidy 3-up of equal squares */
.shot--a { grid-column: span 5; aspect-ratio: 4/3; }
.shot--b { grid-column: span 4; aspect-ratio: 3/4; align-self: end; }
.shot--c { grid-column: span 3; aspect-ratio: 3/4; }
.shot--d { grid-column: span 4; aspect-ratio: 1/1; }
.shot--e { grid-column: span 5; aspect-ratio: 16/10; }
.shot--f { grid-column: span 3; aspect-ratio: 3/4; align-self: start; }
.shot--g { grid-column: span 6; aspect-ratio: 16/9; }
.shot--h { grid-column: span 6; aspect-ratio: 16/9; }
@media (max-width: 780px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .shot { grid-column: span 1 !important; aspect-ratio: 1/1 !important; }
}

/* ---------- split: two doors ---------- */

.split { z-index: 1; padding-left: 0; padding-right: 0; }
.split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--edge-soft);
  border-bottom: 1px solid var(--edge-soft);
}
.door {
  position: relative;
  padding: clamp(3rem, 9vh, 7rem) var(--gutter);
  overflow: hidden;
  min-height: clamp(340px, 52vh, 560px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}
.door + .door { border-left: 1px solid var(--edge-soft); }
.door__bg {
  position: absolute; inset: 0;
  z-index: -1;
}
.door__bg img {
  position: relative;
  width: 100%;
  height: 118%; top: -9%;
  object-fit: cover;
  filter: grayscale(0.85) brightness(0.3) contrast(1.12);
  transition: scale 1s var(--ease-out), filter 0.7s;
}
.door:hover .door__bg img { scale: 1.07; filter: grayscale(0.55) brightness(0.42) contrast(1.05); }
.door__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--void), rgba(11,12,13,0.45));
}
.door__title {
  font-size: clamp(2.05rem, 6.4vw, 6.2rem);
  margin-bottom: 1rem;
}
.door__copy { color: var(--steel); max-width: 34ch; margin: 0 0 1.75rem; }
.door__go {
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ember);
}
.door__go i {
  width: 24px; height: 1px;
  background: var(--ember);
  display: block;
  transition: width 0.4s var(--ease-out);
}
.door:hover .door__go i { width: 46px; }
@media (max-width: 820px) {
  .split__grid { grid-template-columns: 1fr; }
  .door + .door { border-left: 0; border-top: 1px solid var(--edge-soft); }
}

/* ---------- the kit: aperture cards ---------- */

.kit { background: var(--graphite); z-index: 1; overflow: hidden; }
.kit__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
}
.module { position: relative; }
.module__frame {
  position: relative;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--edge-soft);
  transition: border-color 0.4s;
  cursor: none;
}
.module:hover .module__frame { border-color: var(--edge); }
.module .robot-reveal { max-width: none; border-radius: 0; aspect-ratio: 4/3; }
.module .robot-reveal__img { aspect-ratio: 4/3; }
.module .robot-reveal__img--base { filter: grayscale(1) brightness(0.42); transition: filter 0.6s; }
.module:hover .robot-reveal__img--base { filter: grayscale(0.85) brightness(0.5); }
.module__idx {
  position: absolute;
  top: 0.75rem; right: 0.9rem;
  z-index: 5;
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--steel-dim);
  pointer-events: none;
}
.module__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0 0;
  border-top: 1px solid transparent;
}
.module__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  letter-spacing: 0.015em;
  text-transform: uppercase;
  margin: 0;
}
.module__meta {
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-dim);
  flex: none;
}
.kit__hint {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.kit__hint i {
  width: 26px; height: 26px;
  border: 1px solid var(--plasma);
  border-radius: 50%;
  display: block;
  flex: none;
  animation: pulse 2.6s var(--ease-inout) infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.45; }
}
@media (max-width: 900px) { .kit__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kit__grid { grid-template-columns: 1fr; } }

/* ---------- how it works: horizontal ---------- */

.how { position: relative; z-index: 1; background: var(--void); }
.how__wrap { position: relative; height: 100svh; overflow: hidden; perspective: 1400px; }
.how__head {
  position: absolute;
  top: clamp(5.5rem, 13vh, 8rem);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
.how__title { font-size: clamp(1.95rem, 5.9vw, 5.8rem); }
.how__track {
  display: flex;
  align-items: center;
  height: 100%;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: 0 var(--gutter);
  width: max-content;
  will-change: transform;
}
.step {
  width: clamp(260px, 34vw, 420px);
  flex: none;
  border-top: 1px solid var(--edge);
  padding-top: 1.5rem;
  position: relative;
}
.step__idx {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 9vw, 7rem);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px var(--edge);
  display: block;
  margin-bottom: 1.25rem;
  transition: color 0.5s, -webkit-text-stroke-color 0.5s;
}
.step.is-live .step__idx {
  -webkit-text-stroke-color: transparent;
  background: linear-gradient(100deg, var(--trim-hi), var(--trim) 40%, var(--ember));
  -webkit-background-clip: text;
  background-clip: text;
}
.step__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  letter-spacing: 0.015em;
  text-transform: uppercase;
  margin: 0 0 0.85rem;
}
.step__copy { color: var(--steel); margin: 0; max-width: 34ch; }
/* Stacked fallback (reduced motion, or narrow screens): the head can no
   longer float over a pinned frame or it lands on top of the steps. */
.how__wrap.is-stacked {
  height: auto;
  overflow: visible;
  padding: clamp(6rem, 14vh, 9rem) 0 clamp(3rem, 8vh, 5rem);
}
.how__wrap.is-stacked .how__head {
  position: static;
  padding: 0 var(--gutter);
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.how__wrap.is-stacked .how__hint { display: none; }
.how__wrap.is-stacked .how__track { width: auto; }

.step__bar {
  position: absolute;
  top: -1px; left: 0;
  height: 1px;
  width: 100%;
  background: var(--grad-trim);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.step.is-live .step__bar { transform: scaleX(1); }

/* ---------- story / founders ---------- */

.story { z-index: 1; background: var(--graphite); }
.story__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.story__title { font-size: clamp(2.05rem, 6.6vw, 6.8rem); margin-bottom: 1.75rem; }
.story__copy { color: var(--steel); }
.story__copy p { margin: 0 0 1.25rem; max-width: 46ch; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.5rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--edge-soft);
  align-items: baseline;
}
.timeline li:last-child { border-bottom: 1px solid var(--edge-soft); }
.timeline__k {
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
}
.timeline__v { margin: 0; color: var(--steel); }
.timeline__v b { color: var(--paper); font-weight: 500; }

.founders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--edge-soft);
  border: 1px solid var(--edge-soft);
  margin-top: clamp(3rem, 8vh, 5rem);
}
.founder {
  background: var(--graphite);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  position: relative;
  overflow: hidden;
}
.founder__initials {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px var(--steel-dim);
  transition: color 0.5s, -webkit-text-stroke-color 0.5s;
}
.founder:hover .founder__initials {
  -webkit-text-stroke-color: transparent;
  background: var(--grad-trim);
  -webkit-background-clip: text;
  background-clip: text;
}
.founder__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.015em;
  margin: 1.5rem 0 0.4rem;
}
.founder__role {
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-dim);
  margin: 0;
}
@media (max-width: 880px) {
  .story__grid { grid-template-columns: 1fr; }
  .founders { grid-template-columns: 1fr; }
}

/* ---------- CTA / request form ---------- */

.cta { position: relative; z-index: 1; overflow: hidden; }
.cta__bg { position: absolute; inset: 0; z-index: -1; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.22); }
.cta__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 20% 0%, rgba(224,74,44,0.17), transparent 62%), var(--void);
  opacity: 0.94;
}
.cta__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.cta__title { font-size: clamp(2.35rem, 8.2vw, 9rem); margin-bottom: 1.5rem; }
.cta__copy { color: var(--steel); max-width: 40ch; }

.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.5rem; }
.field label {
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-dim);
}
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 0.95rem;
  color: var(--paper);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--edge);
  padding: 0.7rem 0;
  outline: none;
  transition: border-color 0.35s;
  border-radius: 0;
}
.field textarea { resize: vertical; min-height: 4.5rem; }
.field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field input::placeholder { color: var(--steel-dim); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--ember); }
.field select option { background: var(--carbon); color: var(--paper); }
.field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form__note {
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-dim);
  margin: 0;
}
.form__status {
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 0;
  min-height: 1.2em;
  transition: color 0.3s;
}
.form__status.is-ok { color: var(--plasma); }
.form { position: relative; }
.form button[disabled] { opacity: 0.5; pointer-events: none;
}
@media (max-width: 880px) {
  .cta__grid { grid-template-columns: 1fr; }
  .field__row { grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */

.footer {
  position: relative;
  z-index: 1;
  background: var(--void);
  border-top: 1px solid var(--edge-soft);
  padding: clamp(3.5rem, 8vh, 6rem) var(--gutter) 2rem;
}
.footer__inner { max-width: 1440px; margin: 0 auto; }
.footer__word {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 10vw, 8.5rem);
  line-height: 0.82;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--edge);
  margin: 0 0 clamp(2.5rem, 6vh, 4rem);
  white-space: nowrap;
  /* shrink to the glyphs so the hover area is the word, not the whole row */
  width: max-content;
  max-width: 100%;
}

/* Hover fills the outline in, left to right. It is a second copy of the same
   text sitting exactly on top - a gradient fill can't be transitioned, but
   the clip that uncovers it can, and a wipe reads better than a hard swap on
   type this large. */
.footer__word::after {
  content: attr(data-word);
  position: absolute;
  inset: 0;
  background-image: var(--grad-trim);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke-width: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.85s var(--ease-out);
  pointer-events: none;
}
.footer__word:hover::after { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .footer__word::after { transition-duration: 0.001ms; }
}
.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--edge-soft);
}
.footer__tag { color: var(--steel); max-width: 30ch; margin: 1rem 0 0; }
.footer h4 {
  font-family: var(--font-mono);
  font-stretch: var(--mono-wide);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel-dim);
  margin: 0 0 1.25rem;
  font-weight: 400;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.footer ul a { color: var(--steel); transition: color 0.3s; font-size: 0.9rem; }
.footer ul a:hover { color: var(--ember); }
.footer__base {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.75rem;
}
@media (max-width: 880px) { .footer__cols { grid-template-columns: 1fr 1fr; } }


/* ---------- the light-version offer ----------
   Injected by JS only when the hardware looks unequal to the full page, so
   there is no markup and no cost for everybody else. */

.lite-offer {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 1.25rem;
  z-index: 60;
  margin: 0 auto;
  max-width: 640px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1rem;
  padding: 0.95rem 1.15rem;
  background: var(--carbon);
  border: 1px solid var(--edge);
  color: var(--steel);
  font-size: 0.85rem;
  line-height: 1.45;
}
.lite-offer span { flex: 1 1 15rem; }
.lite-offer__go,
.lite-offer__no {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.lite-offer__go { background: var(--trim); color: var(--void); border-color: var(--trim); font-weight: 600; }
.lite-offer__no { color: var(--steel-dim); }
.lite-offer__no:hover { color: var(--paper); }