/* ============================================================
   AVIRA PRODUCTIONS — design system
   Palette from logo: bronze #8A5A1C → gold #D4A03A → hot gold #ECC35C
   on warm near-black. Type: Archivo (variable width) + IBM Plex Mono.
   ============================================================ */

:root {
  --bg0: #050403;          /* page void */
  --bg1: #0b0906;          /* raised panel */
  --bg2: #120f0a;          /* hover panel */
  --ink: #f2ede2;          /* warm white */
  --muted: #98907f;        /* warm gray */
  --gold: #d4a03a;
  --gold-hi: #eec765;
  --bronze: #8a5a1c;
  --line: rgba(212, 160, 58, 0.16);
  --line-soft: rgba(212, 160, 58, 0.08);
  --glow: rgba(212, 160, 58, 0.35);

  --font-d: "Archivo", "Arial Narrow", sans-serif;
  --font-m: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1200px;
  --nav-h: 64px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }
body {
  background: var(--bg0);
  color: var(--ink);
  font-family: var(--font-d);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Second lock on the same door. `overflow-x: hidden` on body clips what is
   PAINTED but does not stop the layout viewport widening to fit an overflowing
   element — and when that happens every position:fixed element (nav, intro,
   spec sheet) sizes to the wider box and the page renders with a dead band
   down one side. `clip` on the root prevents that outright, and unlike
   `hidden` it never turns the page into a scroll container. */
html { overflow-x: clip; }
body.preload *, body.preload *::before, body.preload *::after { transition: none !important; }
body.menu-open { overflow: hidden; }

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--gold); color: #0b0906; }

:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 2px; }

/* ---------- scrollbar: corner brackets, not a bar ----------
   The thumb is transparent with four short gold corner marks, the way the rest
   of the site notches its corners rather than rounding them. Built from four
   linear-gradients because a pseudo-element on ::-webkit-scrollbar-thumb is not
   allowed - gradients are the only paint you get.

   Firefox has no corner styling at all: scrollbar-color and scrollbar-width are
   the whole API. It gets a restrained gold-on-transparent instead of being left
   with the OS default, which would look unrelated to everything around it. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background:
    /* each gradient paints one 5px arm of an L, clipped to its own corner */
    linear-gradient(var(--gold), var(--gold)) 2px 2px / 5px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 2px 2px / 1px 5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right 2px top 2px / 5px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right 2px top 2px / 1px 5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left 2px bottom 2px / 5px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left 2px bottom 2px / 1px 5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right 2px bottom 2px / 5px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right 2px bottom 2px / 1px 5px no-repeat;
  /* keeps the brackets a sensible length instead of stretching with the thumb */
  min-height: 44px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(212, 160, 58, 0.10);
}
html { scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }

.wrap { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; }

/* ---------- shared type ---------- */
.eyebrow {
  font-family: var(--font-m);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
h2 {
  font-weight: 800;
  font-stretch: 118%;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin-top: 18px;
  text-wrap: balance;
}
.section { padding: clamp(90px, 12vh, 150px) 0; position: relative; }
.section__head { max-width: 640px; margin-bottom: clamp(40px, 6vh, 72px); position: relative; }
.section__lede { color: var(--muted); margin-top: 18px; max-width: 54ch; }

/* signature beam scanline under each section head */
.section__head::after {
  content: "";
  position: absolute;
  left: 0; bottom: -22px;
  height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--gold-hi), var(--gold) 30%, transparent 80%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease) 0.25s;
  opacity: 0.55;
}
.section__head.in::after { transform: scaleX(1); }

.gold { color: var(--gold-hi); text-shadow: 0 0 24px var(--glow); }
.tick { width: 6px; height: 6px; background: var(--gold); display: inline-block; box-shadow: 0 0 10px var(--glow); }

/* ============================================================
   GLASS SHARDS — the Avira mark cast in optical glass, dropped
   into the dead space of individual sections.

   Each shard is ANCHORED to its section: it scrolls with the page
   and never moves relative to its neighbours. It sits behind the
   content column and turns slowly in place (the clip is a 360°
   spin), so quiet, text-only stretches of the page still have
   something alive in them. On wide monitors they land in the
   gutters either side of the 1200px column — exactly the space
   that otherwise reads as empty.

   All the positional variety is per-instance custom properties:
     --sw    box size          --srot  static tilt
     --sflip 1 | -1 (mirror)   --sop   resting opacity
   The clip is shot on black, so `screen` blending drops the plate and
   leaves only the glass. Position, blend and opacity all live on ONE
   element — an ancestor with opacity or a transform would isolate the
   blend group and the black plate would come back.

   NO `filter` here, deliberately. A CSS drop-shadow is built from the
   alpha channel and a <video> has none: the whole 720×720 box is opaque,
   so the "chromatic aberration" rendered as a solid coloured RECTANGLE
   offset behind the clip — the stray diagonal lines that used to sit
   around each shard. The dispersion is baked into the render itself,
   where it belongs, and dropping the filter removes the only per-frame
   raster cost the shards had.
   ============================================================ */
.shard {
  position: absolute;
  z-index: 0;                  /* under .wrap (z-index 1), over the section bg */
  display: block;
  pointer-events: none;
  width: var(--sw, 320px);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transform: rotate(var(--srot, 0deg)) scaleX(var(--sflip, 1));
  mix-blend-mode: screen;      /* the black plate falls away */
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  will-change: opacity;
}
.shard.in { opacity: var(--sop, 0.5); }

/* copy always paints over the glass, never under it */
.has-shards > .wrap { position: relative; z-index: 1; }

/* ---- placements (alternate sides so you meet a new one each scroll) ----

   Horizontal offsets are measured from the CONTENT COLUMN, not the viewport,
   so the overlap reads the same on a 13" laptop and a 34" ultrawide:

     --gutter  half the empty space beside the 1200px column
     --ov      how far the shard may reach into the column — nothing when
               there is no gutter to fill, up to 80px on a wide monitor

   left/right: gutter + ov − sw·--edge puts the shard's inner edge exactly --ov
   inside the column edge. On a narrow window that lands off-screen and the
   shard simply isn't there; widen the window and it slides into the gutter.  */
.shard {
  --gutter: calc((100vw - min(var(--wrap), 100vw - 48px)) / 2);
  --ov: clamp(0px, calc(var(--gutter) * 0.25), 80px);
  /* The clip carries an 11% transparent margin on every side so its glow can
     fade out inside the frame instead of being sliced by it. That margin is
     part of the box but not of the picture, so the offsets discount it —
     otherwise every shard would sit 11% further into the copy than intended. */
  --edge: 0.89;
}

/* off the right shoulder of the one-line manifesto.
   top stays at 0: a negative value pushes the mark up past the section
   boundary and it shows through at the bottom of the hero. */
.shard--statement {
  --sw: clamp(295px, 33vw, 565px); --srot: -12deg; --sop: 0.40;
  top: 0; right: calc(var(--gutter) + var(--ov) - var(--sw) * var(--edge));
}
/* the big one: low on the left of SERVICES, half out of frame */
.shard--services-a {
  --sw: clamp(333px, 40vw, 690px); --srot: 16deg; --sflip: -1; --sop: 0.34;
  top: 10%; left: calc(var(--gutter) + var(--ov) - var(--sw) * var(--edge));
}
/* small counterweight, bottom-right of the same section */
.shard--services-b {
  --sw: clamp(192px, 20vw, 333px); --srot: -28deg; --sop: 0.27;
  bottom: 2%; right: calc(var(--gutter) + var(--ov) - var(--sw) * var(--edge));
}
/* beside the stat grid, bleeding down into CONTACT */
.shard--about {
  --sw: clamp(282px, 32vw, 538px); --srot: 8deg; --sflip: -1; --sop: 0.32;
  bottom: -10%; left: calc(var(--gutter) + var(--ov) - var(--sw) * var(--edge));
}
/* up and right of the contact form, clear of the input fields */
.shard--contact {
  --sw: clamp(307px, 35vw, 576px); --srot: -18deg; --sop: 0.29;
  top: -8%; right: calc(var(--gutter) + var(--ov) - var(--sw) * var(--edge));
}

/* Decoration only, and it costs a video decode each — below this width
   the gutters are gone and there is nothing left to fill. */
@media (max-width: 1023px) {
  .shard { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .shard { display: none; }
}

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }
.reveal[data-delay="5"] { transition-delay: 0.5s; }

/* ============================================================
   INTRO — house lights down
   ============================================================ */
.intro {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg0);
  display: grid; place-items: center;
  transition: opacity 0.8s ease 0.1s, visibility 0s linear 1s;
}
.intro__lockup { display: grid; justify-items: center; gap: 18px; }
.intro__mark {
  width: clamp(90px, 14vw, 150px);
  opacity: 0;
  filter: drop-shadow(0 0 0 rgba(212, 160, 58, 0));
}
.intro.is-strike .intro__mark { animation: strike 1s steps(1, end) forwards, markGlow 1.3s ease 0.55s forwards; }
@keyframes strike {
  0% { opacity: 0; } 8% { opacity: 0.5; } 14% { opacity: 0.08; }
  26% { opacity: 0.75; } 34% { opacity: 0.2; } 48% { opacity: 0.9; }
  58% { opacity: 0.55; } 70%, 100% { opacity: 1; }
}
@keyframes markGlow {
  from { filter: drop-shadow(0 0 0 rgba(212, 160, 58, 0)); }
  60%  { filter: drop-shadow(0 0 34px rgba(212, 160, 58, 0.55)); }
  to   { filter: drop-shadow(0 0 18px rgba(212, 160, 58, 0.4)); }
}
.intro__word { display: flex; gap: 0.04em; font-weight: 900; font-stretch: 122%; font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: 0.06em; line-height: 1; }
.intro__word span { opacity: 0; transform: translateY(0.5em); }
.intro.is-word .intro__word span { animation: rise 0.6s var(--ease) forwards; }
.intro.is-word .intro__word span:nth-child(1) { animation-delay: 0.00s; }
.intro.is-word .intro__word span:nth-child(2) { animation-delay: 0.06s; }
.intro.is-word .intro__word span:nth-child(3) { animation-delay: 0.12s; }
.intro.is-word .intro__word span:nth-child(4) { animation-delay: 0.18s; }
.intro.is-word .intro__word span:nth-child(5) { animation-delay: 0.24s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.intro__sub {
  font-family: var(--font-m); font-size: 0.7rem; letter-spacing: 0.6em; text-indent: 0.6em;
  color: var(--gold); opacity: 0;
}
.intro.is-word .intro__sub { animation: rise 0.7s var(--ease) 0.45s forwards; }
.intro__skip {
  position: absolute; bottom: 28px; right: 32px;
  font-family: var(--font-m); font-size: 0.68rem; letter-spacing: 0.2em;
  color: var(--muted); padding: 8px 4px;
  opacity: 0; animation: rise 0.5s ease 1.2s forwards;
}
.intro__skip:hover { color: var(--gold-hi); }
body.intro-done .intro { opacity: 0; visibility: hidden; pointer-events: none; }

/* ============================================================
   NAV — hanging notched plate
   ============================================================ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: flex; justify-content: center; pointer-events: none; }
.nav__plate {
  position: relative;
  pointer-events: auto;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  height: var(--nav-h);
  padding: 0 10px 0 22px;
  background: rgba(9, 7, 5, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px));
  transform: translateY(-110%);
  transition: transform 0.7s var(--ease), background 0.4s ease, box-shadow 0.5s ease;
}
body.intro-done .nav__plate { transform: translateY(0); }

/* Scrolled state.
   This used to go DARKER on scroll — rgba(7,5,4,.94) against a resting
   rgba(9,7,5,.82) — which is why the bar sank into the page exactly when it was
   most needed. It now lifts instead: a warmer ground, a gold hairline traced
   round the chamfer, and a soft outer glow. Deliberately quiet; the plate should
   read as lit, not as a highlighted element. */
body.scrolled .nav__plate {
  /* Darker inside than at rest — the plate should sit UNDER the page, not
     compete with it. All the definition comes from the outline, not from
     lifting the fill. */
  background: rgba(10, 8, 6, 0.90);
  box-shadow:
    inset 0 1px 0 rgba(238, 199, 101, 0.10),      /* top edge catches the light */
    inset 0 0 0 1px rgba(212, 160, 58, 0.13),     /* hairline around the shape */
    0 12px 34px rgba(0, 0, 0, 0.46),              /* lifts it off the page */
    0 0 26px rgba(212, 160, 58, 0.07);            /* barely-there halo */
}

/* ---- interactive grid -----------------------------------------------------
   The same language as the component spec windows: a fine gold grid that only
   exists near the pointer. It is drawn across the whole plate and then MASKED
   to a circle at the cursor, so moving the mouse reveals the grid locally
   rather than animating anything — nothing moves on its own.

   The parent's clip-path crops both layers, so they follow the chamfered
   corners for free. --mx/--my are set in js/main.js, and default off-plate so
   nothing shows until the pointer actually arrives. */
.nav__plate::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg,  rgba(212, 160, 58, 0.20) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(212, 160, 58, 0.20) 0 1px, transparent 1px 22px);
  -webkit-mask-image: radial-gradient(140px circle at var(--mx, -200px) var(--my, 50%),
                      #000 0%, rgba(0, 0, 0, 0.45) 45%, transparent 72%);
          mask-image: radial-gradient(140px circle at var(--mx, -200px) var(--my, 50%),
                      #000 0%, rgba(0, 0, 0, 0.45) 45%, transparent 72%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
/* a warm pool under the cursor, so the grid reads as lit rather than drawn on */
.nav__plate::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(170px circle at var(--mx, -200px) var(--my, 50%),
              rgba(238, 199, 101, 0.09), transparent 68%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.nav__plate:hover::before,
.nav__plate:hover::after { opacity: 1; }

/* Keep the bar's own content above both layers — ::after would otherwise wash
   over the links, the same reason .rigwin__head is lifted out of its effects. */
.nav__plate > * { position: relative; z-index: 1; }

/* Touch devices have no hover and no cursor to follow; the grid would either
   never appear or stick where the last tap landed. */
@media (hover: none) {
  .nav__plate::before, .nav__plate::after { display: none; }
}

.nav__brand { display: flex; align-items: center; gap: 10px; padding-right: 6px; }
.nav__mark { width: 26px; filter: drop-shadow(0 0 8px rgba(212, 160, 58, 0.35)); }
.nav__word { font-weight: 900; font-stretch: 120%; letter-spacing: 0.08em; font-size: 1.05rem; }

.nav__links { display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); }

/* Divides "sections of this page" from "other pages". Without it the two page
   links read as sections that simply never light up while scrolling. */
.nav__sep {
  width: 1px; height: 16px; flex: none;
  background: linear-gradient(180deg, transparent, rgba(212, 160, 58, 0.38), transparent);
  margin: 0 clamp(2px, 0.6vw, 8px);
}

/* Page links: same family, quieter, and they carry a small mark so it is clear
   the click leaves this page rather than scrolling it. */
.nav__page { color: #b3aa9a; }
.nav__page::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 4px; height: 4px; margin-right: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.5;
  transition: opacity 0.25s ease, transform 0.25s var(--ease);
}
.nav__page:hover::before { opacity: 1; transform: rotate(45deg) translate(1px, -2px); }
.nav__links a {
  position: relative;
  font-size: 0.88rem; font-weight: 500;
  color: #cfc8ba;
  padding: 8px 2px;
  transition: color 0.25s ease;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px;
  background: var(--gold-hi); box-shadow: 0 0 8px var(--glow);
  transition: right 0.35s var(--ease);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); }
.nav__links a:hover::after, .nav__links a.is-active::after { right: 0; }

.nav__cta {
  display: flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 0.88rem; color: #0b0906;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 60%, #b9871f);
  padding: 11px 20px 11px 16px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  box-shadow: 0 0 22px rgba(212, 160, 58, 0.25);
  transition: box-shadow 0.3s ease, filter 0.3s ease;
}
.nav__cta:hover { box-shadow: 0 0 34px rgba(238, 199, 101, 0.5); filter: brightness(1.06); }
.nav__cta-dot { width: 6px; height: 6px; background: #0b0906; animation: pulse 2.2s ease infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.nav__burger { display: none; width: 44px; height: 44px; position: relative; }
.nav__burger span {
  position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ink);
  transition: transform 0.35s var(--ease), top 0.35s var(--ease);
}
.nav__burger span:nth-child(1) { top: 17px; }
.nav__burger span:nth-child(2) { top: 25px; }
body.menu-open .nav__burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* mobile menu */
.mmenu {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(5, 4, 3, 0.97);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
body.menu-open .mmenu { opacity: 1; visibility: visible; transition-delay: 0s; }
.mmenu__links { display: grid; gap: 8px; }
.mmenu__links a {
  display: flex; align-items: baseline; gap: 16px;
  font-weight: 800; font-stretch: 115%; font-size: clamp(1.8rem, 8vw, 2.6rem);
  padding: 8px 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.25s;
}
.mmenu__links a em { font-family: var(--font-m); font-style: normal; font-size: 0.7rem; color: var(--gold); letter-spacing: 0.2em; }
.mmenu__links a:hover { color: var(--gold-hi); }
/* Same split as the desktop bar: sections above, separate pages below. */
.mmenu__sep { display: block; height: 1px; margin: 12px 0 4px;
  background: linear-gradient(90deg, rgba(212, 160, 58, 0.35), transparent); }
.mmenu__page { color: #b3aa9a; }
.mmenu__page::after { content: "→"; margin-left: 10px; opacity: 0.45; font-size: 0.8em; }
body.menu-open .mmenu__links a { opacity: 1; transform: none; }
body.menu-open .mmenu__links a:nth-child(1) { transition-delay: 0.05s; }
body.menu-open .mmenu__links a:nth-child(2) { transition-delay: 0.1s; }
body.menu-open .mmenu__links a:nth-child(3) { transition-delay: 0.15s; }
body.menu-open .mmenu__links a:nth-child(4) { transition-delay: 0.2s; }
body.menu-open .mmenu__links a:nth-child(5) { transition-delay: 0.25s; }

/* section rail */
.rail {
  position: fixed; left: 26px; top: 50%; transform: translateY(-50%);
  z-index: 60; display: grid; gap: 14px;
  opacity: 0; transition: opacity 0.6s ease 0.3s;
}
body.intro-done .rail { opacity: 1; }
.rail a {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-m); font-size: 0.62rem; letter-spacing: 0.22em;
  color: #6d6656; text-transform: uppercase;
  transition: color 0.3s ease;
  /* The rail floats over whatever is behind it — a glass shard, the carousel,
     the 3D viewport — so the inactive labels get a soft dark halo to hold
     their contrast instead of dissolving into a bright patch. */
  text-shadow: 0 0 8px var(--bg0), 0 0 3px var(--bg0);
}
.rail a i { width: 14px; height: 1px; background: #3a3223; transition: background 0.3s, box-shadow 0.3s, width 0.3s; }
.rail a.is-active { color: var(--gold-hi); }
.rail a.is-active i { width: 24px; background: var(--gold); box-shadow: 0 0 8px var(--glow); }
.rail a:hover { color: var(--ink); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;   /* fallback for browsers without svh units */
  min-height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
}
.hero__beams { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}
/* once the video is actually playing, it takes over from the canvas beams */
body.video-bg .hero__video { opacity: 1; }
body.video-bg .hero__beams { display: none; }
.hero__truss {
  position: absolute; inset: 0 0 auto 0; height: 140px;
  background: linear-gradient(180deg, rgba(5, 4, 3, 0.92), transparent);
  pointer-events: none;
}
.hero__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 110%, transparent 40%, rgba(5, 4, 3, 0.8) 100%),
    linear-gradient(180deg, transparent 65%, var(--bg0) 98%);
}
.hero__content { position: relative; z-index: 2; text-align: center; padding: 0 24px; max-width: 980px; }
.hero__eyebrow {
  font-family: var(--font-m); font-size: 0.7rem; letter-spacing: 0.34em;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 26px;
}
.hero__title {
  font-weight: 850;
  font-stretch: 122%;
  font-size: clamp(2.6rem, 7.2vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero__accent {
  background: linear-gradient(115deg, var(--gold-hi), var(--gold) 55%, var(--bronze));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(212, 160, 58, 0.35));
}
.hero__sub {
  display: block;
  color: #b6ae9d; max-width: 56ch; margin: 26px auto 0;
  font-size: clamp(0.95rem, 1.4vw, 1.08rem);
  /* it lives inside the h1 now so the heading's weight, width, tracking and
     leading all have to be reset or it renders as a second headline */
  font-weight: 400; font-stretch: 100%;
  letter-spacing: 0; line-height: 1.6; text-wrap: pretty;
}

.hero__scroll {
  /* centered via auto margins, NOT translateX — the [data-intro] reveal
     overrides `transform`, which would undo a transform-based centering */
  position: absolute; bottom: 30px; left: 0; right: 0;
  width: max-content; margin-inline: auto;
  z-index: 2; display: grid; justify-items: center; gap: 10px;
}
.hero__scroll-line { width: 1px; height: 44px; background: linear-gradient(180deg, transparent, var(--gold)); position: relative; overflow: hidden; }
.hero__scroll-line::after {
  content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%;
  background: var(--gold-hi); box-shadow: 0 0 8px var(--glow);
  animation: drip 2s ease-in-out infinite;
}
@keyframes drip { to { top: 110%; } }
.hero__scroll-label { font-family: var(--font-m); font-size: 0.6rem; letter-spacing: 0.34em; color: var(--muted); }

/* intro-gated hero items */
[data-intro] { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
body.intro-done [data-intro] { opacity: 1; transform: none; }
body.intro-done [data-intro="1"] { transition-delay: 0.25s; }
body.intro-done [data-intro="2"] { transition-delay: 0.4s; }
body.intro-done [data-intro="3"] { transition-delay: 0.6s; }
body.intro-done [data-intro="4"] { transition-delay: 0.85s; }

/* ============================================================
   STATEMENT
   ============================================================ */
.statement { padding: clamp(80px, 14vh, 160px) 0 clamp(40px, 6vh, 80px); position: relative; }
.statement__text {
  margin-top: 26px;
  font-weight: 700; font-stretch: 112%;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.25;
  max-width: 24em;
}

/* ============================================================
   SERVICES
   ============================================================ */
.services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.card {
  --mx: 50%; --my: 50%;
  position: relative;
  padding: 30px 28px 26px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  background: linear-gradient(155deg, rgba(212, 160, 58, 0.28), rgba(212, 160, 58, 0.06) 55%);
  isolation: isolate;
}
.card::before {
  content: ""; position: absolute; inset: 1px; z-index: -2;
  clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 17px 100%, 0 calc(100% - 17px));
  background: linear-gradient(165deg, #0d0b07, #080605 70%);
}
.card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(212, 160, 58, 0.12), transparent 65%);
  opacity: 0; transition: opacity 0.4s ease;
}
.card:hover::after { opacity: 1; }
/* The icons are gone — the headings carry these cards now. Without an icon
   block setting a common top offset, the four cards only line up if their own
   top padding does, so nothing else here may add space above the h3. */
.card h3 { font-weight: 700; font-stretch: 112%; font-size: 1.25rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.95rem; max-width: 46ch; }
.card__chip {
  display: inline-block; margin-top: 20px;
  font-family: var(--font-m); font-size: 0.62rem; letter-spacing: 0.22em;
  color: var(--gold); border: 1px solid var(--line);
  padding: 7px 12px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
/* Two children now, not three — the icon used to hold the left edge with
   `flex: 0 0 40px`. The body takes the space and the link stays at its natural
   width, so the row still reads as text-then-action. */
.card--wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 30px; }
.card--wide__body { flex: 1; min-width: 0; }
.card--wide__body p { max-width: 72ch; }
.card__link {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 0.92rem; color: var(--gold-hi);
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  transition: gap 0.3s var(--ease), border-color 0.3s;
}
.card__link:hover { gap: 16px; border-color: var(--gold); }

/* ============================================================
   VISUALIZER
   ============================================================ */
.viz { background: linear-gradient(180deg, var(--bg0), #070503 30%, #070503 70%, var(--bg0)); }
.viz__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 74vh;
  width: 100%;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
  background:
    linear-gradient(155deg, rgba(212, 160, 58, 0.3), rgba(212, 160, 58, 0.05) 50%) border-box,
    radial-gradient(80% 90% at 50% 20%, #14100a, #060504 75%);
  border: 1px solid var(--line);
}
.viz__frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.viz__loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-m); font-size: 0.7rem; letter-spacing: 0.3em; color: var(--gold);
  background: transparent; pointer-events: none;
  transition: opacity 0.6s ease;
}
.viz__loading.is-hidden { opacity: 0; }
.viz__loading .tick { animation: pulse 1.2s ease infinite; }
.viz__corner {
  position: absolute; z-index: 2;
  font-family: var(--font-m); font-size: 0.6rem; letter-spacing: 0.26em; color: #7d7460;
  pointer-events: none;
}
/* --tl held a "REALTIME PREVIEW" label; removed as noise. --br stays — it is a
   genuine affordance hint, and the only thing telling anyone the rig is draggable. */
.viz__corner--br { bottom: 14px; right: 20px; }
/* Hidden on a phone: the string is long, it is absolutely positioned over the
   canvas with nothing reserving space for it, and a touch user discovers the
   drag by touching. Desktop keeps it - there it is the only thing telling
   anyone the rig moves at all. */
@media (max-width: 700px) { .viz__corner { display: none; } }
.viz__controls {
  display: flex; flex-wrap: wrap; gap: 20px 40px;
  margin-top: 22px;
  justify-content: space-between;
}
.viz__group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.viz__group-label { font-family: var(--font-m); font-size: 0.62rem; letter-spacing: 0.26em; color: var(--muted); margin-right: 6px; }
.chip {
  font-family: var(--font-m); font-size: 0.7rem; letter-spacing: 0.12em;
  color: #b7ad97;
  border: 1px solid rgba(212, 160, 58, 0.22);
  padding: 9px 16px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: color 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.chip:hover { color: var(--ink); border-color: var(--gold); }
.chip.is-active {
  color: #0b0906;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold));
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(212, 160, 58, 0.28);
}

/* ============================================================
   WORK
   ============================================================ */
/* ---------- reel carousel (coverflow of project videos) ---------- */
.reel { position: relative; margin-top: 8px; }
.reel__viewport {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  perspective: 1300px;                       /* deeper = stronger 3D */
  /* The coverflow fans the side cards outwards with transforms, and on a phone
     they reach well past the screen. Without this the DOCUMENT grows to fit
     them, and because every position:fixed element sizes to the viewport, the
     nav, the intro overlay and the hero all end up laid out at that wider
     width — which is what left a black band down the side of the page.
     `clip` rather than `hidden`: it doesn't create a scroll container, and it
     lets the stage glow and card shadows still bleed vertically. */
  overflow-x: clip;
  overflow-y: visible;
}
/* soft stage glow behind the active card for depth */
.reel__viewport::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 78%; height: 70%; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 50%, rgba(212, 160, 58, 0.14), transparent 72%);
  filter: blur(24px);
}
.reel__stage {
  position: relative;
  width: 100%;
  /* Tall stage: the real clips are shot vertically on a phone (9:16), so the
     reel is built around PORTRAIT cards instead of cropping them into a
     letterbox. Big and cinematic — nearly fills the viewport height.

     The cap used to be 880px, which left a 34" ultrawide mostly empty: portrait
     cards are height-driven, so on a short-and-wide screen they cannot grow
     sideways on their own. Raising the ceiling lets the work fill the room it
     is given. JS widens the coverflow fan to match — see spread() in main.js. */
  height: clamp(460px, 82vh, 1180px);
  transform-style: preserve-3d;
}

/* each slide is absolutely centred; JS transforms it by its distance
   from the active slide to make the coverflow fan */
.reel__slide {
  position: absolute; top: 50%; left: 50%;
  /* height-driven so cards always fill the tall stage; width follows 9:16 */
  height: 100%;
  width: auto;
  aspect-ratio: 9 / 16;
  margin: 0;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;               /* lets the media tilt in 3D on hover */
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease), filter 0.6s var(--ease);
  will-change: transform, opacity;
  cursor: pointer;
}
.reel__slide[data-off="0"] { cursor: default; }

.reel__media {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.4s ease, outline-color 0.4s ease;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(212, 160, 58, 0.12), transparent 55%),
    linear-gradient(160deg, #120e08, #070504 75%);
  outline: 1px solid var(--line);
  outline-offset: -1px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.reel__slide[data-off="0"] .reel__media {
  outline-color: rgba(212, 160, 58, 0.5);
  box-shadow: 0 0 0 1px rgba(212, 160, 58, 0.25), 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 60px -10px var(--glow);
}
.reel__media video, .reel__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* placeholder shown until a real video is supplied */
.reel__ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background:
    repeating-linear-gradient(135deg, rgba(212,160,58,0.03) 0 2px, transparent 2px 9px),
    radial-gradient(80% 80% at 50% 45%, rgba(138, 90, 28, 0.18), transparent 70%);
}
.reel__ph::after {   /* slow shimmer sweep */
  content: ""; position: absolute; top: 0; left: -60%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(238, 199, 101, 0.07), transparent);
  transform: skewX(-18deg); animation: reel-shimmer 5.5s ease-in-out infinite;
}
@keyframes reel-shimmer { 0% { left: -60%; } 55%, 100% { left: 130%; } }
.reel__play {
  width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center;
  background: rgba(5, 4, 3, 0.5); position: relative; z-index: 1;
}
.reel__play::before {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 17px solid var(--gold); border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.reel__ph-num {
  font-family: var(--font-m); font-size: 0.62rem; letter-spacing: 0.34em;
  color: var(--muted); position: relative; z-index: 1;
}

/* corner ticks (HUD) */
.reel__corners i { position: absolute; width: 14px; height: 14px; border: 1px solid rgba(212,160,58,0.55); opacity: 0; transition: opacity 0.5s; }
.reel__corners i:nth-child(1) { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.reel__corners i:nth-child(2) { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.reel__corners i:nth-child(3) { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.reel__corners i:nth-child(4) { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.reel__slide[data-off="0"] .reel__corners i { opacity: 1; }

/* caption overlay */
.reel__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 46px 26px 22px;
  display: flex; flex-direction: column; gap: 5px;
  background: linear-gradient(to top, rgba(4, 3, 2, 0.9), rgba(4, 3, 2, 0.5) 55%, transparent);
  opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease) 0.1s, transform 0.5s var(--ease) 0.1s;
}
.reel__slide[data-off="0"] .reel__cap { opacity: 1; transform: none; }
.reel__tag { font-family: var(--font-m); font-size: 0.6rem; letter-spacing: 0.26em; color: var(--gold); }
.reel__name { font-weight: 700; font-stretch: 112%; font-size: clamp(1.05rem, 2.4vw, 1.5rem); line-height: 1.15; }
.reel__meta { color: var(--muted); font-size: 0.82rem; }

/* nav arrows */
.reel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: rgba(11, 9, 6, 0.72); color: var(--gold);
  border: 1px solid var(--line); cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  transition: color 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.25s;
  backdrop-filter: blur(4px);
}
.reel__nav:hover { color: #0b0906; background: var(--gold); border-color: var(--gold-hi); box-shadow: 0 0 24px -4px var(--glow); }
.reel__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reel__nav--prev { left: 4px; }
.reel__nav--next { right: 4px; }

/* HUD row: counter + progress bar + dots */
/* The autoplay progress line is gone — it animated every frame, it told you
   nothing you couldn't see from the dots, and the owner found it distracting.
   The dots carry position on their own. */
.reel__hud { display: flex; align-items: center; gap: 20px; margin-top: 22px; }
.reel__count { font-family: var(--font-m); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--muted); white-space: nowrap; }
.reel__count b { color: var(--gold-hi); }
.reel__count-sep { margin: 0 6px; opacity: 0.5; }
.reel__dots { display: flex; gap: 9px; margin-left: auto; }
.reel__dots button {
  width: 8px; height: 8px; padding: 0; border: 0; cursor: pointer; border-radius: 50%;
  background: #3a352c; transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.reel__dots button:hover { background: var(--gold); }
.reel__dots button[aria-selected="true"] { background: var(--gold-hi); transform: scale(1.3); box-shadow: 0 0 10px var(--glow); }

.work__note { margin-top: 20px; font-size: 0.8rem; color: #6d6656; }
.work__note a { color: var(--gold-hi); font-weight: 600; }
.work__note a:hover { color: var(--gold); }

/* ---------- holographic event globe ---------- */
.globe { position: relative; margin-top: clamp(40px, 6vw, 80px); }
.globe__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin-bottom: 6px;
}
.globe__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-m); font-size: 0.62rem; letter-spacing: 0.32em; color: var(--gold);
}
.globe__meta { font-family: var(--font-m); font-size: 0.58rem; letter-spacing: 0.24em; color: var(--muted); }
.globe__stage {
  position: relative;
  height: clamp(320px, 52vw, 620px);
  display: grid; place-items: center;
  overflow: hidden;
}
/* atmosphere glow behind the sphere */
.globe__stage::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(80%, 620px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 160, 58, 0.12), rgba(138, 90, 28, 0.05) 55%, transparent 70%);
  filter: blur(20px); pointer-events: none;
}
#globeCanvas { position: relative; z-index: 1; width: 100%; height: 100%; display: block; cursor: grab; }
#globeCanvas:active { cursor: grabbing; }

/* the marker card that appears on click */
.globe__card {
  position: absolute; z-index: 3; left: 50%; bottom: clamp(6px, 3vw, 26px);
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 22px; min-width: 220px;
  background: rgba(6, 4, 2, 0.82);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8), 0 0 40px -12px var(--glow);
  animation: globeCardIn 0.35s var(--ease) both;
}
.globe__card[hidden] { display: none; }
@keyframes globeCardIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.globe__card-city { font-family: var(--font-m); font-size: 0.6rem; letter-spacing: 0.24em; color: var(--gold); }
.globe__card-name { font-weight: 700; font-stretch: 112%; font-size: 1.05rem; }
.globe__card-hint { font-family: var(--font-m); font-size: 0.55rem; letter-spacing: 0.2em; color: rgba(238, 199, 101, 0.55); margin-top: 4px; }

@media (max-width: 720px) {
  /* portrait cards: cap by width so the card never runs off a phone screen */
  .reel__stage { height: min(76vh, 128vw); }
  .reel__nav { width: 40px; height: 40px; }
  .reel__cap { padding: 34px 16px 16px; }
  .reel__name { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reel__slide, .reel__cap, .reel__media { transition: none; }
  .reel__ph::after { animation: none; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about { background: linear-gradient(180deg, transparent, rgba(212, 160, 58, 0.03) 50%, transparent); }
.about__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.about__copy p:not(.eyebrow) { color: var(--muted); margin-top: 18px; max-width: 54ch; }
.about__copy h2 { margin-bottom: 8px; }
.about__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.stat {
  padding: 28px 24px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  background: linear-gradient(165deg, #0d0b07, #080605);
  outline: 1px solid var(--line-soft); outline-offset: -1px;
}
.stat__num {
  display: block;
  font-weight: 850; font-stretch: 122%;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1;
  background: linear-gradient(115deg, var(--gold-hi), var(--gold) 60%, var(--bronze));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__label { display: block; margin-top: 10px; font-family: var(--font-m); font-size: 0.62rem; letter-spacing: 0.24em; color: var(--muted); text-transform: uppercase; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 90px); }
.contact__intro p:not(.eyebrow) { color: var(--muted); margin-top: 18px; max-width: 44ch; }
.contact__direct { display: grid; gap: 12px; margin-top: 34px; }
.contact__direct a {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-m); font-size: 0.85rem; color: var(--ink);
  transition: color 0.25s;
}
.contact__direct a:hover { color: var(--gold-hi); }

.form { display: grid; gap: 22px; align-content: start; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
/* align-content: start is load-bearing.
   `.form__row` is a 2-column grid, so both fields stretch to equal height. When
   one of them gains an error line, the OTHER is stretched to match — and with
   the default `align-content: stretch` it shares that extra height out across
   its own rows, growing the label gap and the input. The result was the
   untouched input sliding down while the errored one appeared to jump up.
   Collecting the slack at the bottom instead keeps both inputs on one line. */
.field { display: grid; gap: 8px; align-content: start; }
.field label { font-family: var(--font-m); font-size: 0.64rem; letter-spacing: 0.24em; color: var(--muted); text-transform: uppercase; }
.field__opt { color: #57503f; }
.field input, .field textarea {
  font: inherit; color: var(--ink);
  background: #0a0805;
  border: 1px solid rgba(212, 160, 58, 0.14);
  border-left: 2px solid rgba(212, 160, 58, 0.3);
  padding: 13px 16px;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  resize: vertical;
  min-width: 0;
}
.field input::placeholder, .field textarea::placeholder { color: #57503f; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(212, 160, 58, 0.25), 0 0 24px rgba(212, 160, 58, 0.08);
  background: #0c0a06;
}
/* display:none (not off-screen): Chrome autofill skips non-rendered fields,
   so a real visitor's autofill can never populate the honeypot */
.form__hp { display: none; }
.form__send {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 0.95rem; color: #0b0906;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 60%, #b9871f);
  padding: 15px 34px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  box-shadow: 0 0 26px rgba(212, 160, 58, 0.22);
  transition: box-shadow 0.3s, filter 0.3s, opacity 0.3s;
}
.form__send:hover { box-shadow: 0 0 40px rgba(238, 199, 101, 0.45); filter: brightness(1.06); }
.form__send:disabled { opacity: 0.55; cursor: wait; }
.form__status { font-family: var(--font-m); font-size: 0.75rem; letter-spacing: 0.08em; min-height: 1.2em; }
.form__status.ok { color: #9fd27a; }
.form__status.err { color: #e08a6a; }

/* ---------- per-field validation ----------
   The message sits under its own input rather than in one line at the bottom,
   so on a six-field form you can see at a glance which one needs attention.
   The left border is the loudest signal — it reads at a glance without
   relying on colour alone. */
.field input.is-invalid, .field textarea.is-invalid {
  border-color: rgba(224, 138, 106, 0.5);
  border-left-color: #e08a6a;
}
.field input.is-invalid:focus, .field textarea.is-invalid:focus {
  border-color: #e08a6a;
  box-shadow: 0 0 0 1px rgba(224, 138, 106, 0.28), 0 0 24px rgba(224, 138, 106, 0.08);
}
.field__err {
  margin: 0;
  font-family: var(--font-m);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: #e08a6a;
}
.field__err:empty { display: none; }   /* no gap when there's nothing to say */

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line-soft); padding: 40px 0 26px; background: #040302; }
.footer__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer__brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-stretch: 118%; letter-spacing: 0.06em; }
.footer__brand em { font-family: var(--font-m); font-style: normal; font-weight: 400; font-size: 0.6rem; letter-spacing: 0.3em; color: var(--gold); }
.footer__mark { width: 22px; }
.footer__links { display: flex; gap: 22px; font-size: 0.85rem; color: var(--muted); }
.footer__links a:hover { color: var(--ink); }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  font-family: var(--font-m); font-size: 0.68rem; letter-spacing: 0.1em;
  color: var(--muted);
  border: 1px solid var(--line-soft);
  padding: 8px 11px;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
  transition: color 0.25s, border-color 0.25s;
}
.footer__social a:hover { color: var(--gold-hi); border-color: var(--gold); }
.footer__legal {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 30px; padding-top: 18px;
  border-top: 1px solid rgba(212, 160, 58, 0.05);
  font-size: 0.75rem; color: #57503f;
}
.footer__tag { font-family: var(--font-m); font-size: 0.6rem; letter-spacing: 0.3em; color: #57503f; }

/* ============================================================
   RIG SELECT — package configurator shell
   ============================================================ */
/* Stacked so the 3D viewport gets the full column width — the menu is a bar
   above it and the specs are a horizontal band below, rather than two side
   columns squeezing the viewport and stretching the manifest into a tall list. */
.rig { display: grid; gap: 14px; }

/* ---------- package menu (horizontal bar) ---------- */
.rig__menu { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }

.rig__item {
  position: relative;
  flex: 1 1 150px; max-width: 230px;
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: 10px; text-align: left;
  padding: 10px 14px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  background: linear-gradient(120deg, rgba(212, 160, 58, 0.05), transparent 70%), #0a0805;
  outline: 1px solid var(--line-soft); outline-offset: -1px;
  transition: background 0.3s ease, outline-color 0.3s ease, transform 0.3s var(--ease);
}
.rig__item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--gold-hi); box-shadow: 0 0 10px var(--glow);
  transform: scaleY(0); transform-origin: center;
  transition: transform 0.35s var(--ease);
}
.rig__item:hover { background: linear-gradient(120deg, rgba(212, 160, 58, 0.1), transparent 70%), #0d0a06; transform: translateX(3px); }
.rig__item[aria-current="true"] {
  outline-color: var(--line);
  background: linear-gradient(120deg, rgba(212, 160, 58, 0.16), transparent 75%), #0e0b07;
}
.rig__item[aria-current="true"]::before { transform: scaleY(1); }
.rig__item-tier {
  font-family: var(--font-m); font-size: 0.62rem; letter-spacing: 0.14em;
  color: var(--gold); opacity: 0.75;
}
.rig__item-name {
  font-weight: 800; font-stretch: 112%; font-size: 1rem; letter-spacing: 0.02em;
  color: #cfc8ba; transition: color 0.25s;
}
.rig__item[aria-current="true"] .rig__item-name { color: var(--ink); }
.rig__item-sub {
  grid-column: 2; font-family: var(--font-m); font-size: 0.58rem;
  letter-spacing: 0.16em; color: var(--muted);
}

/* ---------- viewport badge ---------- */
.rig__view { display: grid; gap: 0; }
.rig__badge {
  position: absolute; top: 14px; right: 20px; z-index: 3;
  font-family: var(--font-m); font-size: 0.6rem; letter-spacing: 0.24em;
  color: var(--gold-hi);
  background: rgba(6, 4, 3, 0.6);
  border: 1px solid var(--line);
  padding: 6px 10px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  pointer-events: none;
}

/* ---------- specs band (sits under the viewport, stays shallow) ---------- */
.rig__panel {
  padding: 16px 18px 14px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  background: linear-gradient(165deg, #0c0a06, #070504 75%);
  outline: 1px solid var(--line-soft); outline-offset: -1px;
}
.rig__lede { font-size: 0.85rem; color: var(--muted); margin-bottom: 18px; max-width: 78ch; }

/* ---- key figures ----------------------------------------------------------
   Reads as a spec sheet, not a loadout screen: the number carries the weight,
   the unit sits quietly beside it, the label sits underneath. The earlier
   segmented "charging" meters were dropped — they implied a rating out of ten
   that these figures never had, and made an equipment list look like a game. */
.rig__stats {
  /* Five, not six — LOAD-IN was removed from every package. This count is
     hardcoded rather than auto-fit so the columns keep the same width as you
     switch packages; a package with fewer stats would otherwise reflow the
     whole band. */
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 18px;
}
.rig__stat {
  padding: 13px 20px 12px;
  border-left: 1px solid var(--line-soft);
  min-width: 0;
}
.rig__stat:first-child { border-left: 0; padding-left: 0; }
.rig__stat-num {
  display: block;
  font-family: var(--font-d);
  font-size: clamp(1.1rem, 1.45vw, 1.45rem);
  font-weight: 700; font-stretch: 108%;
  line-height: 1.05; color: var(--ink);
  font-variant-numeric: tabular-nums;   /* figures line up column to column */
  white-space: nowrap;
}
.rig__stat-unit {
  font-size: 0.58em; font-weight: 500;
  color: var(--muted); margin-left: 4px; letter-spacing: 0.02em;
}
.rig__stat-label {
  display: block; margin-top: 7px;
  font-family: var(--font-m); font-size: 0.55rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* schedule + CTA share one row; the CTA sits on the last line of the
   schedule rather than floating against its middle */
.rig__foot {
  /* start, not flex-end: the CTA used to be bottom-aligned to the equipment
     list, so it jumped vertically every time you switched between a two-item
     package and a nine-item one. */
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-top: 4px;
}
.rig__mf-block { flex: 1 1 420px; min-width: 0; }
.rig__manifest-head {
  display: block; margin-bottom: 4px;
  font-family: var(--font-m); font-size: 0.55rem; letter-spacing: 0.26em;
  color: var(--muted); white-space: nowrap;
}

/* ---- equipment schedule ---------------------------------------------------
   Laid out like a line-item list on a real quote: quantity right-aligned in its
   own column so the numbers stack, item name beside it, hairline between rows.
   Columns wrap so a nine-item package never becomes a tall stack. Each row is
   still a button — it opens that component's spec window. */
.rig__manifest {
  list-style: none;
  display: grid;
  /* auto-FIT, not auto-fill. auto-fill keeps the empty tracks it created, so
     TRADESHOW — which has two items — rendered them in the left half and left
     the right half blank. auto-fit collapses the unused tracks, and the items
     spread across the full width whatever the package holds. */
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  column-gap: 32px;
  /* Rows were separated only by each row's own hairline, so when a name wrapped
     in one column its neighbour's rule sat at a different height. */
  row-gap: 2px;
}
.rig__manifest li { border-top: 1px solid rgba(212, 160, 58, 0.09); }
.rig__manifest button {
  width: 100%;
  display: grid; grid-template-columns: 2.1rem 1fr auto;
  align-items: baseline; gap: 10px;
  padding: 8px 6px 8px 2px;
  background: none; border: 0; text-align: left; cursor: pointer;
  transition: background 0.25s ease;
}
.rig__manifest button:hover,
.rig__manifest button:focus-visible { background: rgba(212, 160, 58, 0.05); }
.rig__mf-qty {
  font-family: var(--font-m); font-size: 0.72rem; color: var(--gold-hi);
  font-variant-numeric: tabular-nums; text-align: right;
}
.rig__mf-name {
  font-family: var(--font-m); font-size: 0.62rem; letter-spacing: 0.07em;
  color: #b5ada0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rig__manifest button:hover .rig__mf-name,
.rig__manifest button:focus-visible .rig__mf-name { color: var(--ink); }
/* "specs" hint appears on hover instead of a permanent chevron on every row */
.rig__mf-go {
  font-family: var(--font-m); font-size: 0.5rem; letter-spacing: 0.16em;
  color: var(--gold); opacity: 0; transition: opacity 0.25s ease;
}
.rig__manifest button:hover .rig__mf-go,
.rig__manifest button:focus-visible .rig__mf-go { opacity: 0.75; }

.rig__cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 14px;
  font-weight: 700; font-size: 0.8rem; color: #0b0906;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 60%, #b9871f);
  padding: 12px 20px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  box-shadow: 0 0 22px rgba(212, 160, 58, 0.2);
  transition: box-shadow 0.3s, filter 0.3s;
}
.rig__cta:hover { box-shadow: 0 0 34px rgba(238, 199, 101, 0.45); filter: brightness(1.06); }

/* ---------- promo ticker (auto-removes when the offer expires) ---------- */
.promo {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin: 54px 0 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* Neon wants darkness. The band is now darker than the page around it so the
     glow has something to bloom into — a lit sign reads by contrast, not by
     brightness alone. */
  background:
    radial-gradient(140% 300% at 50% 50%, rgba(212, 160, 58, 0.09), transparent 72%),
    #040302;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}
.promo[hidden] { display: none; }

/* the scrolling band */
.promo__marquee { width: 100%; overflow: hidden; padding: 18px 0; }
.promo__track {
  display: flex; width: max-content;
  animation: promo-run 38s linear infinite;
  will-change: transform;
}

/* ---- NEON ----
   A real neon sign is a hot near-white core inside coloured bloom, so the glow
   is layered from tight-and-pale out to wide-and-saturated rather than one
   fuzzy shadow. Alternating lit/unlit tubes give the band its rhythm — the same
   cadence as before, but now it reads as signage instead of outlined type. */
.promo__track span {
  display: inline-flex; align-items: center; gap: 26px;
  padding-right: 26px; white-space: nowrap;
  font-family: var(--font-d);
  font-weight: 800; font-size: clamp(1.6rem, 4.2vw, 2.6rem);
  letter-spacing: 0.05em; text-transform: uppercase;
  color: #fff6e0;                       /* the hot core */
  -webkit-text-stroke: 0;
  text-shadow:
    0 0 4px  #ffeec2,
    0 0 11px var(--gold-hi),
    0 0 26px var(--gold),
    0 0 52px rgba(212, 160, 58, 0.75),
    0 0 96px rgba(212, 160, 58, 0.40);
  animation: neon-breathe 4.5s ease-in-out infinite;
}
/* the unlit tube between them — glass catching the light of its neighbours */
.promo__track span:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(238, 199, 101, 0.85);
  text-shadow: 0 0 14px rgba(212, 160, 58, 0.55), 0 0 38px rgba(212, 160, 58, 0.3);
  animation: none;
}
.promo__track span i {
  font-style: normal; color: var(--gold-hi);
  font-size: 0.5em; -webkit-text-stroke: 0;
  text-shadow: 0 0 10px var(--gold), 0 0 24px rgba(212, 160, 58, 0.7);
}
/* Slow breathe, not a strobe. Real neon has a faint mains hum to its
   brightness; a hard flicker would read as broken rather than alive. */
@keyframes neon-breathe {
  0%, 100% { opacity: 1; }
  47%      { opacity: 0.92; }
  50%      { opacity: 0.99; }
}
@keyframes promo-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* track holds 2 identical halves */
}

/* the countdown, floating over the band */
.promo__badge {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 22px;
  background: rgba(5, 4, 3, 0.86);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
}
.promo__badge-label {
  font-family: var(--font-m); font-size: 0.56rem;
  letter-spacing: 0.28em; color: var(--muted);
}
.promo__clock {
  font-family: var(--font-m); font-size: 0.98rem; font-weight: 600;
  letter-spacing: 0.12em; color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px var(--glow);
}

@media (max-width: 700px) {
  .promo { margin-top: 38px; }
  .promo__marquee { padding: 22px 0; }
  .promo__clock { font-size: 0.86rem; }
}
@media (prefers-reduced-motion: reduce) {
  .promo__track { animation: none; transform: translateX(-12%); }
  .promo__track span { animation: none; }   /* the glow stays, the breathing stops */
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  /* The dividing rule belongs between columns, never at the start of a row —
     so which cell loses its left border has to follow the column count. */
  .rig__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rig__stat:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .rig__stat:nth-child(n + 4) { border-top: 1px solid var(--line-soft); }
  .rig__item { flex: 1 1 120px; max-width: none; }
  .rig__item-sub { display: none; }
}
@media (max-width: 560px) {
  .rig__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rig__stat:nth-child(n) { border-left: 1px solid var(--line-soft); padding-left: 16px; }
  .rig__stat:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .rig__stat:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }

  /* The panel had NO mobile rules of its own, so on a phone it stacked a lede,
     five stats and the whole equipment list at desktop spacing directly under
     the viewport — the single biggest space cost on the page. */
  .rig__lede { font-size: 0.8rem; margin-bottom: 14px; }
  .rig__stat { padding: 10px 12px 9px; }
  .rig__mf-block { flex: 1 1 100%; }
  .rig__manifest { grid-template-columns: 1fr; column-gap: 0; row-gap: 0; }
  .rig__manifest button { padding: 7px 4px 7px 2px; }
  .rig__foot { gap: 16px; }
  .rig__panel { padding: 14px 12px; }
  .rig__cta { width: 100%; justify-content: space-between; }
}

/* ============================================================
   RIG SPEC WINDOW — blueprint style (variant C)
   strict palette: blacks, golds, warm white — no greys
   ============================================================ */
.rigwin {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
body.rigwin-open .rigwin { opacity: 1; visibility: visible; transition-delay: 0s; }
body.rigwin-open { overflow: hidden; }

.rigwin__backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 70% at 50% 45%, rgba(212, 160, 58, 0.10), transparent 70%),
    rgba(4, 3, 2, 0.6);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.rigwin__panel {
  position: relative;
  width: min(940px, 100%);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  background: linear-gradient(160deg, rgba(238, 199, 101, 0.55), rgba(212, 160, 58, 0.14) 55%);
  isolation: isolate;
  padding: 1px;
  box-shadow: 0 0 80px rgba(212, 160, 58, 0.18);
}
body.rigwin-open .rigwin__panel { animation: rigIn 0.4s var(--ease) both, rigFloat 7s ease-in-out 0.6s infinite; }
@keyframes rigIn {
  0% { opacity: 0; transform: scale(0.95) translateY(14px); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes rigFloat {
  0%, 100% { transform: none; }
  50% { transform: translateY(-4px); }
}
/* translucent holo-glass fill — the dimmed 3D scene glows through */
.rigwin__panel::before {
  content: ""; position: absolute; inset: 1px; z-index: -1;
  clip-path: polygon(0 0, calc(100% - 21px) 0, 100% 21px, 100% 100%, 21px 100%, 0 calc(100% - 21px));
  background: linear-gradient(165deg, rgba(16, 12, 6, 0.72), rgba(6, 4, 2, 0.6) 70%);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
}
/* ambient hologram layers */
.rigwin__fx {
  position: absolute; inset: 1px; z-index: 0;
  clip-path: polygon(0 0, calc(100% - 21px) 0, 100% 21px, 100% 100%, 21px 100%, 0 calc(100% - 21px));
  overflow: hidden; pointer-events: none;
}
.rigwin__fx i { position: absolute; display: block; }
.rigwin__grid {
  inset: -60px;
  background:
    repeating-linear-gradient(0deg, rgba(212, 160, 58, 0.06) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(212, 160, 58, 0.06) 0 1px, transparent 1px 44px);
  animation: rigGridDrift 11s linear infinite;
}
@keyframes rigGridDrift { to { transform: translate3d(44px, 44px, 0); } }
.rigwin__lines {
  inset: -60px;
  background: repeating-linear-gradient(0deg, rgba(238, 199, 101, 0.026) 0 1px, transparent 1px 3px);
  animation: rigLinesDrift 13s linear infinite;
}
@keyframes rigLinesDrift { to { transform: translate3d(0, 60px, 0); } }
.rigwin__sweep {
  top: -60%; bottom: -60%; left: -45%; width: 34%;
  background: linear-gradient(105deg, transparent, rgba(238, 199, 101, 0.05) 45%, rgba(238, 199, 101, 0.09) 50%, rgba(238, 199, 101, 0.05) 55%, transparent);
  animation: rigSweep 7.5s ease-in-out infinite;
}
@keyframes rigSweep {
  0%, 50% { transform: translateX(0) rotate(14deg); }
  100% { transform: translateX(560%) rotate(14deg); }
}
/* cursor spotlight — follows the pointer over the panel */
.rigwin__spot {
  inset: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 35%), rgba(238, 199, 101, 0.12), transparent 62%);
  opacity: 0; transition: opacity 0.4s ease;
}
.rigwin__panel:hover .rigwin__spot { opacity: 1; }
.rigwin__head, .rigwin__body, .rigwin__foot { position: relative; z-index: 1; }
/* one-shot boot scanline */
.rigwin__panel::after {
  content: ""; position: absolute; left: 0; right: 0; top: -20%; height: 70px;
  background: linear-gradient(180deg, transparent, rgba(238, 199, 101, 0.08), transparent);
  pointer-events: none; opacity: 0;
}
body.rigwin-open .rigwin__panel::after { animation: rigScan 0.9s ease 0.2s 1 both; }
@keyframes rigScan { 0% { top: -20%; opacity: 1; } 100% { top: 115%; opacity: 0; } }

.rigwin__head {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 18px 15px 24px;
  border-bottom: 1px solid rgba(212, 160, 58, 0.25);
}
.rigwin__title {
  flex: 1;
  font-family: var(--font-m); font-size: 0.78rem; letter-spacing: 0.28em;
  color: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rigwin__barcode {
  width: 72px; height: 15px; flex: 0 0 auto;
  background: repeating-linear-gradient(90deg, var(--gold) 0 2px, transparent 2px 4px, var(--gold) 4px 5px, transparent 5px 9px);
  animation: rigBarFlick 6s linear infinite;
}
@keyframes rigBarFlick {
  0%, 91%, 100% { opacity: 0.65; }
  93% { opacity: 0.2; }
  95% { opacity: 0.8; }
  97% { opacity: 0.35; }
}
.rigwin__close {
  flex: 0 0 auto;
  font-family: var(--font-m); font-size: 0.8rem;
  color: var(--gold);
  border: 1px solid rgba(212, 160, 58, 0.35);
  padding: 8px 12px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  transition: color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.3s var(--ease);
}
.rigwin__close:hover { color: var(--gold-hi); border-color: var(--gold); box-shadow: 0 0 16px rgba(212, 160, 58, 0.3); transform: rotate(90deg); }

.rigwin__body {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(22px, 3.5vw, 38px);
}
.rigwin__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  outline: 1px solid rgba(212, 160, 58, 0.2); outline-offset: -1px;
  background: radial-gradient(70% 45% at 50% 92%, rgba(212, 160, 58, 0.14), transparent 70%), #050302;
}
.rigwin__icon {
  width: 96px; color: var(--gold);
  filter: drop-shadow(0 0 22px rgba(212, 160, 58, 0.45));
  animation: rigLevitate 5s ease-in-out infinite;
}
.rigwin__icon svg { width: 100%; transition: transform 0.15s linear; }
@keyframes rigLevitate {
  0%, 100% { transform: none; }
  50% { transform: translateY(-6px); }
}
.rigwin__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  transition: transform 0.15s linear;
}
/* the global `img { display:block }` reset would defeat the hidden attribute,
   leaving a broken-image glyph while no photo exists */
.rigwin__img[hidden] { display: none; }
.rigwin__vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
}
.rigwin__vid[hidden] { display: none; }
.rigwin__pending {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-m); font-size: 0.58rem; letter-spacing: 0.24em; white-space: nowrap;
  color: rgba(238, 199, 101, 0.75);
  border: 1px solid rgba(212, 160, 58, 0.25);
  padding: 6px 10px;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
.rigwin__pending::after { content: "▮"; margin-left: 7px; animation: pulse 1.1s steps(2, start) infinite; }

.rigwin__specs { list-style: none; align-self: center; display: grid; gap: 0; }
.rigwin__specs li {
  display: grid; grid-template-columns: 34px 1fr auto;
  align-items: baseline; gap: 14px;
  padding: 13px 6px 13px 0;
  border-bottom: 1px solid rgba(212, 160, 58, 0.12);
  opacity: 0; transform: translateX(-10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: calc(var(--i) * 70ms + 150ms);
}
body.rigwin-open .rigwin__specs li { opacity: 1; transform: none; }
/* soft full-width hover wash — fades in/out instead of snapping */
.rigwin__specs li { position: relative; }
.rigwin__specs li::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(212, 160, 58, 0.07), rgba(212, 160, 58, 0.025) 45%, rgba(212, 160, 58, 0.05));
  opacity: 0;
  transition: opacity 0.45s ease;
}
.rigwin__specs li:hover::after { opacity: 1; }
/* blueprint callout stub: line + endpoint dot
   (per-property transition delays: the reveal stagger applies to transform
   only, so hover feedback on width/glow is instant) */
.rigwin__specs li::before {
  content: "";
  width: 26px; height: 1px; align-self: center;
  background: linear-gradient(90deg, rgba(212, 160, 58, 0.9), rgba(212, 160, 58, 0.3));
  box-shadow: -2px 0 0 1px var(--gold-hi), 0 0 8px rgba(212, 160, 58, 0.5);
  transform-origin: left;
  transform: scaleX(0);
  transition:
    transform 0.5s var(--ease) calc(var(--i) * 70ms + 100ms),
    width 0.2s ease 0s,
    box-shadow 0.2s ease 0s;
}
body.rigwin-open .rigwin__specs li::before { transform: scaleX(1); }
.rigwin__specs li:hover::before {
  width: 34px;
  box-shadow: -2px 0 0 1px var(--gold-hi), 0 0 12px rgba(238, 199, 101, 0.5);
}
.rigwin__spec-label {
  font-family: var(--font-m); font-size: 0.66rem; letter-spacing: 0.26em; color: var(--gold);
  transition: color 0.35s ease, text-shadow 0.35s ease;
}
.rigwin__spec-value { font-family: var(--font-m); font-size: 0.95rem; color: var(--ink); text-align: right; }
.rigwin__specs li:hover .rigwin__spec-label { color: var(--gold-hi); text-shadow: 0 0 14px rgba(238, 199, 101, 0.35); }

.rigwin__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 24px 15px;
  border-top: 1px solid rgba(212, 160, 58, 0.18);
}
.rigwin__brand { font-family: var(--font-m); font-size: 0.66rem; letter-spacing: 0.34em; color: var(--gold); }
.rigwin__note { font-family: var(--font-m); font-size: 0.58rem; letter-spacing: 0.2em; color: rgba(238, 199, 101, 0.55); text-align: right; }

@media (max-width: 700px) {
  /* Full-screen sheet on phones: the panel fills the whole screen, the
     close button sits fixed at the top, and the specs scroll beneath it —
     so nothing gets clipped off-screen the way a centred panel did. */
  .rigwin { padding: 0; }
  .rigwin__panel {
    position: absolute; inset: 0;      /* fill the fixed overlay = the whole screen */
    width: auto; max-width: none;
    padding: 1px;
    clip-path: none;
    box-shadow: none;
    display: flex; flex-direction: column;
  }
  /* no floating drift on a full-screen panel — it would leave an edge gap */
  body.rigwin-open .rigwin__panel { animation: rigIn 0.3s var(--ease) both; }
  .rigwin__panel::before, .rigwin__fx { clip-path: none; }

  .rigwin__head { flex: 0 0 auto; padding: 16px 14px 16px 18px; }
  .rigwin__barcode { display: none; }               /* free the row for title + close */
  .rigwin__close {
    width: 44px; height: 44px; padding: 0;           /* comfortable tap target */
    display: grid; place-items: center; font-size: 1.05rem;
  }

  .rigwin__body {
    grid-template-columns: 1fr;
    flex: 1 1 auto; min-height: 0;                   /* min-height:0 lets it scroll in a flex column */
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    align-content: start;
    gap: 22px; padding: 22px 16px 28px;
  }
  .rigwin__visual { width: 100%; max-width: min(340px, 74vw); margin-inline: auto; }
  .rigwin__specs { align-self: stretch; }
  .rigwin__specs li { grid-template-columns: 22px 1fr auto; }
  .rigwin__specs li::before { width: 14px; }

  .rigwin__foot { flex: 0 0 auto; padding: 12px 16px 14px; }
}

/* ============================================================
   CURSOR GLOW (desktop, non-touch)
   ============================================================ */
.cursor-glow {
  position: fixed; left: 0; top: 0; z-index: 5;
  width: 340px; height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 160, 58, 0.07), transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
body.has-cursor .cursor-glow { opacity: 1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* The rail is fixed in the left margin, so it only has room once the margin
   is wider than the rail itself. Full rail ≈115px wide needs ~1520px of
   viewport; below that collapse to ticks only (~24px), then hide entirely.
   Without this it overlapped the centred content by ~100px. */
@media (max-width: 1519px) {
  .rail a { font-size: 0; gap: 0; }
}
@media (max-width: 1339px) {
  .rail { display: none; }
}
@media (max-width: 940px) {
  .nav { justify-content: stretch; }
  .nav__plate { width: 100%; justify-content: space-between; padding-right: 8px; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .services__grid { grid-template-columns: 1fr; }
  .card--wide { flex-direction: column; align-items: flex-start; gap: 18px; }
  .work__grid { grid-template-columns: 1fr 1fr; }
  .about__grid, .contact__grid { grid-template-columns: 1fr; }
  .viz__frame { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 36px); }
  .work__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(2.2rem, 11vw, 3rem); }
  .viz__controls { flex-direction: column; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, [data-intro] { opacity: 1 !important; transform: none !important; }
  .cursor-glow { display: none; }
}

/* ============================================================
   CONSENT CHECKBOX — express consent, on every enquiry form
   ============================================================ */
/* Deliberately NOT built on .field or .ts-field. Those three wrappers disagree
   with each other — .field is a grid with uppercase labels, .ts-field is
   display:block on the tradeshow page and a grid with `input { width:100% }` on
   weddings and dj-shows, which stretches a raw checkbox across the column. One
   self-contained class is the only thing that renders identically in all four. */
.consent-check {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 4px 0 2px;
  cursor: pointer;
  /* The row is a click target, so give it its own hit area rather than relying
     on the 13px box. */
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  background: rgba(212, 160, 58, 0.015);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  transition: border-color 0.25s, background 0.25s;
}
.consent-check:hover { border-color: var(--line); background: rgba(212, 160, 58, 0.04); }

/* The native input stays in the DOM and in the accessibility tree — it is what
   FormData reads and what a screen reader announces. Only its appearance is
   replaced. `appearance:none` alone still leaves a UA-drawn box on some
   platforms, hence taking it out of flow instead. */
.consent-check input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}
.consent-check__box {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  margin-top: 1px;
  border: 1px solid rgba(212, 160, 58, 0.4);
  background: transparent;
  position: relative;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
/* The tick is drawn, not typed: a ✓ glyph renders differently on every platform
   and would not inherit the gold cleanly. */
.consent-check__box::after {
  content: "";
  position: absolute; left: 4px; top: 0.5px;
  width: 4px; height: 8px;
  border: solid var(--bg0);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(42deg) scale(0.4);
  opacity: 0;
  transition: opacity 0.16s, transform 0.16s var(--ease);
}
.consent-check input:checked + .consent-check__box {
  background: var(--gold);
  border-color: var(--gold-hi);
  box-shadow: 0 0 10px var(--glow);
}
.consent-check input:checked + .consent-check__box::after {
  opacity: 1; transform: rotate(42deg) scale(1);
}
/* Keyboard users lose the focus ring when the real input is hidden, so put it
   back on the thing they can actually see. */
.consent-check input:focus-visible + .consent-check__box {
  outline: 2px solid var(--gold-hi); outline-offset: 2px;
}
.consent-check__text {
  font-size: 0.82rem; line-height: 1.45;
  color: var(--muted);
  letter-spacing: 0.01em;
  text-transform: none;   /* .field labels are uppercase; this must not be */
}
.consent-check:hover .consent-check__text { color: #b6ad99; }
.consent-check__text em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 0.7rem;
  color: #6d6555;
}
@media (prefers-reduced-motion: reduce) {
  .consent-check__box::after { transition: none; }
}

/* ============================================================
   SOCIAL ICONS — footer + contact page
   ============================================================ */
/* .footer__social a is display:inline with a 7px chamfer sized by its old mono
   text. An SVG child collapses that box, so anything carrying an icon has to
   become a flex box with explicit dimensions or the chamfer clips the corner
   off the icon instead of off the button. */
.footer__social a.social-ico,
.social-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  padding: 0;
  color: var(--muted);
  border: 1px solid var(--line-soft);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.social-ico svg { width: 17px; height: 17px; display: block; }
.footer__social a.social-ico:hover,
a.social-ico:hover {
  color: var(--gold-hi); border-color: var(--gold);
  background: rgba(212, 160, 58, 0.05);
}
/* No URL yet. A dimmed span rather than a dead link — a link that goes nowhere
   is worse than an obvious placeholder, and it is a <span>, so it is not
   focusable and not announced as a link. */
.social-ico--soon {
  color: #4a4437;
  border-color: rgba(212, 160, 58, 0.05);
  cursor: default;
}
.social-ico--soon:hover { color: #4a4437; border-color: rgba(212, 160, 58, 0.05); background: none; }