/* ==========================================================================
   ODIN — commercial VR & motion simulators
   --------------------------------------------------------------------------
   Dark-only by design. The photography is all low-key neon shot against black,
   so a light theme would mean either washed-out images or two sets of art; the
   page commits to one look and paints every surface explicitly rather than
   inheriting anything from the browser.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Ground up: --bg is the page, --s1 cards, --s2 the raised things on cards. */
  --bg: #07080b;
  --s1: #0e1015;
  --s2: #14171f;
  --s3: #1c2029;

  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);

  --tx: #e9ebf0;
  --tx-2: #a2a9b8;
  --tx-3: #6e7686;

  /* One accent, used sparingly. Everything interactive is cyan; nothing else
     is, which is what keeps a dark page legible without borders everywhere. */
  --ac: #19e3ff;
  --ac-dim: #0fb6cc;
  --ac-glow: rgba(25, 227, 255, 0.16);
  --vi: #8b5cf6;

  --ok: #4ade80;
  --warn: #fbbf24;

  --ff-d: "Space Grotesk", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --ff-b: "Inter", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 20px;

  --wrap: 1200px;
  --gut: clamp(20px, 5vw, 48px);

  /* Height of the sticky bar. Seeded here so the hero is the right size on the
     very first paint, then measured and rewritten by initHeader() -- font
     loading and the mobile breakpoint both change it by a few pixels, and the
     hero panel is sized by subtracting it from the viewport. */
  --hdr-h: 77px;

  /* Vertical rhythm for section padding, one knob for the whole page. */
  --sec-y: clamp(72px, 10vw, 140px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Anchors land below the fixed header instead of under it. */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--ff-b);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

::selection {
  background: var(--ac);
  color: #04252b;
}

.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--ac);
  color: #04252b;
  border-radius: var(--r-s);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip:focus {
  transform: none;
}

/* --------------------------------------------------------------------------
   TYPE
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--ff-d);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
}

h2 {
  font-size: clamp(28px, 4.1vw, 47px);
}

h3 {
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.eyebrow {
  font-family: var(--ff-d);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: 18px;
}

.lede {
  font-size: clamp(16px, 1.55vw, 18.5px);
  color: var(--tx-2);
  max-width: 62ch;
  margin-top: 20px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.wrap-narrow {
  max-width: 860px;
}

.sec {
  padding-block: var(--sec-y);
  position: relative;
}

.sec-alt {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.022) 18%, rgba(255, 255, 255, 0.022) 82%, transparent);
}

.sec-hd {
  margin-bottom: clamp(40px, 5.5vw, 68px);
  max-width: 780px;
}

.placeholder-flag {
  color: var(--warn);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--tx);
  --btn-bd: var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 100px;
  font-family: var(--ff-d);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease),
    border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}

.btn-primary {
  --btn-bg: var(--ac);
  --btn-fg: #04252b;
  --btn-bd: var(--ac);
  box-shadow: 0 6px 30px -10px var(--ac-glow);
}
.btn-primary:hover {
  --btn-bg: #4feaff;
  --btn-bd: #4feaff;
  box-shadow: 0 10px 38px -10px rgba(25, 227, 255, 0.4);
}

.btn-ghost {
  --btn-bg: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  --btn-bg: rgba(255, 255, 255, 0.11);
  --btn-bd: rgba(255, 255, 255, 0.3);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 14px;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
/* sticky, not fixed: the bar takes its own space in the flow so the simulator
   panel starts cleanly beneath it. Fixed would put chrome back on top of the
   picture, which is the thing this layout exists to avoid. */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 8, 11, 0.88);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s var(--ease);
}

.hdr.is-stuck {
  border-bottom-color: var(--line-2);
}

.hdr-in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 16px var(--gut);
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand-mk {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--tx-3);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brand-mk-a {
  stroke: var(--ac);
  stroke-width: 2.4;
}

.brand-tx {
  font-family: var(--ff-d);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-indent: 0.19em;
}

.nav {
  display: flex;
  gap: 30px;
  margin-left: auto;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--tx-2);
}

.nav a {
  position: relative;
  padding-block: 4px;
  transition: color 0.18s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ac);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.24s var(--ease);
}
.nav a:hover {
  color: var(--tx);
}
.nav a:hover::after,
.nav a.is-here::after {
  transform: scaleX(1);
}
.nav a.is-here {
  color: var(--tx);
}

.hdr-cta {
  flex-shrink: 0;
}

.burger {
  display: none;
  width: 42px;
  height: 42px;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--tx);
  transform: translateX(-50%);
  transition: transform 0.26s var(--ease), opacity 0.2s linear;
}
.burger span:nth-child(1) {
  top: 17px;
}
.burger span:nth-child(2) {
  top: 23px;
}
.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateX(-50%) translateY(3px) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2) {
  transform: translateX(-50%) translateY(-3px) rotate(-45deg);
}

/* Reading-progress hairline. Width is driven by a transform so it rides the
   compositor and never fights the scroll it is reporting on. */
.hdr-prog {
  height: 1.5px;
  background: linear-gradient(90deg, var(--ac), var(--vi));
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity 0.3s linear;
}
.hdr.is-stuck .hdr-prog {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   HERO

   The simulator panel carries nothing on top of it -- no scrim, no headline,
   no scroll cue. Its height is capped rather than filling the viewport, so the
   headline underneath still lands above the fold on a laptop: the demo sells
   the product, but only once the visitor knows what the product is.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: #000;
}

.hero-stage {
  position: relative;
  /* Fills the screen below the sticky bar exactly. svh rather than vh so the
     panel is sized against the *smallest* viewport -- with vh, mobile browser
     chrome would overlap the bottom of the simulator on first paint. */
  height: calc(100svh - var(--hdr-h));
  min-height: 360px;
  overflow: hidden;
  /* Pure black on purpose: it is the exact ground the simulator's own loading
     screen paints on, so the empty panel and the arriving loader are the same
     surface and there is no flash between them. */
  background: #000;
  border-bottom: 1px solid var(--line);
}

/* The only thing in the panel. No holding image to sit above or below it, so
   no stacking order to get wrong. */
.hero-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hero-intro {
  padding-block: clamp(34px, 4.6vw, 62px) clamp(44px, 6vw, 78px);
  background: radial-gradient(88% 120% at 12% 0%, rgba(25, 227, 255, 0.06), transparent 62%),
    var(--bg);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
}

.hero-copy {
  /* Wide enough that the second line of the headline does not break again --
     at the top of the clamp the phrase needs ~740px, and splitting it into
     "pay for / themselves." cuts the sentence in the wrong place. */
  max-width: 780px;
}

.hero-h1 {
  font-size: clamp(36px, 6.1vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-wrap: balance;
}

.hero-sub {
  margin-top: 20px;
  font-size: clamp(15.5px, 1.6vw, 18.5px);
  color: var(--tx-2);
  max-width: 54ch;
}

.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero-live {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 250px;
  padding: 14px 18px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tx-2);
}

.hero-live strong {
  display: block;
  color: var(--tx);
  font-weight: 600;
}

.hero-live .dot {
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: pulse 2.4s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 9px rgba(74, 222, 128, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
  }
}

/* --------------------------------------------------------------------------
   TRUST STRIP
   -------------------------------------------------------------------------- */
.trust {
  border-bottom: 1px solid var(--line);
  background: var(--s1);
  padding-block: 44px;
}

.trust .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 36px;
}

.stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: clamp(24px, 4vw, 56px);
}

.stats li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stats .num {
  font-family: var(--ff-d);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.stats span {
  font-size: 12.5px;
  color: var(--tx-3);
  letter-spacing: 0.01em;
}

.certs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.certs li {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--ff-d);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--tx-3);
}

/* --------------------------------------------------------------------------
   MACHINE CARDS
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
}

.card {
  position: relative;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.32s var(--ease), border-color 0.32s var(--ease),
    box-shadow 0.32s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.9);
}

.card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--s2);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.4s var(--ease);
  filter: saturate(1.02);
}

.card:hover .card-media img {
  transform: scale(1.045);
}

.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(14, 16, 21, 0.9) 100%);
}

.card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 5px 11px;
  border-radius: 100px;
  background: rgba(7, 8, 11, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-2);
  font-family: var(--ff-d);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ac);
}

.card-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}

.card-name {
  font-family: var(--ff-d);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.018em;
}

.card-desc {
  font-size: 14.5px;
  color: var(--tx-2);
  flex: 1;
}

.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.chips li {
  padding: 5px 10px;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  font-size: 11.5px;
  color: var(--tx-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chips b {
  color: var(--tx);
  font-weight: 600;
}

.cards-note {
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--tx-3);
}
.cards-note a {
  color: var(--ac);
  transition: opacity 0.18s var(--ease);
}
.cards-note a:hover {
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   SPLIT FEATURE
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5.5vw, 78px);
  /* stretch, not center: centring a short image against a tall copy column
     leaves a band of dead space above and below it. Letting the media fill
     the row and crop instead keeps the two columns reading as one block. */
  align-items: stretch;
}

.split-rev .split-media {
  order: 2;
}

.split-rev .split-media img {
  filter: saturate(0.85) brightness(0.8) contrast(1.05);
}

.split-media {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex;
  min-height: 420px;
}

.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-badge {
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 16px 20px;
  background: rgba(7, 8, 11, 0.78);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-m);
  text-align: right;
}
.split-badge b {
  display: block;
  font-family: var(--ff-d);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ac);
  line-height: 1;
}
.split-badge span {
  font-size: 11.5px;
  color: var(--tx-2);
  line-height: 1.35;
  display: block;
  margin-top: 6px;
}

.feats {
  list-style: none;
  margin-top: 34px;
  display: grid;
  gap: 22px;
}

.feats-2 {
  grid-template-columns: 1fr 1fr;
  gap: 24px 30px;
}

.feats li {
  padding-left: 18px;
  border-left: 2px solid var(--line);
  transition: border-color 0.25s var(--ease);
}
.feats li:hover {
  border-left-color: var(--ac);
}

.feats h3 {
  margin-bottom: 5px;
}

.feats p {
  font-size: 14.5px;
  color: var(--tx-2);
}

.split-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 34px;
}

.split-strip img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-s);
  border: 1px solid var(--line);
  filter: grayscale(0.35);
  transition: filter 0.35s var(--ease);
}
.split-strip img:hover {
  filter: grayscale(0);
}

/* --------------------------------------------------------------------------
   ROI CALCULATOR
   -------------------------------------------------------------------------- */
.calc {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 0;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
}

.calc-inputs {
  padding: clamp(24px, 3.2vw, 38px);
  display: grid;
  gap: 22px;
  align-content: start;
}

.calc-row {
  display: grid;
  gap: 10px;
}

.calc-row label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--tx-2);
}

.calc-row label b {
  font-family: var(--ff-d);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ac);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc-row-cur {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.sel {
  width: 100%;
  padding: 11px 14px;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  font-size: 14.5px;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tx-3) 50%),
    linear-gradient(135deg, var(--tx-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color 0.18s var(--ease);
}
.sel:hover {
  border-color: var(--line-2);
}

/* Range inputs get styled per-engine; there is no shared shadow DOM to target,
   so the track and thumb rules are duplicated for WebKit and Gecko. */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: var(--s3);
}
input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: var(--s3);
}
input[type="range"]::-moz-range-progress {
  height: 3px;
  border-radius: 3px;
  background: var(--ac);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6.5px;
  border-radius: 50%;
  background: var(--ac);
  border: 3px solid var(--s1);
  box-shadow: 0 0 0 1px var(--ac), 0 2px 10px rgba(25, 227, 255, 0.4);
  transition: transform 0.14s var(--ease);
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ac);
  border: 3px solid var(--s1);
  box-shadow: 0 0 0 1px var(--ac), 0 2px 10px rgba(25, 227, 255, 0.4);
  transition: transform 0.14s var(--ease);
}

input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.18);
}
input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:active::-moz-range-thumb {
  transform: scale(1.18);
}

/* WebKit has no ::-moz-range-progress equivalent, so the filled portion is
   painted onto the track with a gradient whose stop JS keeps in sync. */
input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(
    90deg,
    var(--ac) 0%,
    var(--ac) var(--fill, 0%),
    var(--s3) var(--fill, 0%),
    var(--s3) 100%
  );
}

.calc-out {
  padding: clamp(24px, 3.2vw, 38px);
  background: linear-gradient(180deg, rgba(25, 227, 255, 0.05), transparent 55%), var(--s2);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.calc-lbl {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-3);
  font-family: var(--ff-d);
  font-weight: 600;
}

.calc-big {
  font-family: var(--ff-d);
  font-size: clamp(40px, 5.6vw, 62px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-top: 8px;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
}

.calc-big.is-never {
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--warn);
  line-height: 1.2;
}

.calc-bar {
  position: relative;
  height: 5px;
  margin-top: 18px;
  border-radius: 4px;
  background: var(--s3);
  overflow: visible;
}

.calc-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--ac), var(--vi));
  transition: width 0.45s var(--ease);
}

.calc-bar-cap {
  position: absolute;
  right: 0;
  top: 11px;
  font-size: 11px;
  color: var(--tx-3);
}

.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
}

.calc-grid > div {
  background: var(--s1);
  padding: 15px 17px;
}

.calc-grid dt {
  font-size: 11.5px;
  color: var(--tx-3);
  letter-spacing: 0.02em;
}

.calc-grid dd {
  font-family: var(--ff-d);
  font-size: 19px;
  font-weight: 600;
  margin-top: 4px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.calc-fine {
  font-size: 12.5px;
  color: var(--tx-3);
  line-height: 1.55;
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   FULL-BLEED BAND
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  min-height: clamp(340px, 46vw, 520px);
  display: grid;
  align-items: center;
  overflow: hidden;
}

.band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 8, 11, 0.94) 0%, rgba(7, 8, 11, 0.72) 45%, rgba(7, 8, 11, 0.35) 100%);
}

.band-in {
  position: relative;
  z-index: 1;
  padding-block: 60px;
}

.band-q {
  font-family: var(--ff-d);
  font-size: clamp(23px, 3.5vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.028em;
  font-weight: 500;
  max-width: 20ch;
  text-wrap: balance;
}

.band-q em {
  font-style: normal;
  color: var(--ac);
}

/* --------------------------------------------------------------------------
   PROCESS
   -------------------------------------------------------------------------- */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
}

.steps li {
  background: var(--s1);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: background-color 0.28s var(--ease);
}
.steps li:hover {
  background: var(--s2);
}

.step-n {
  font-family: var(--ff-d);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ac);
}

.steps p {
  font-size: 14px;
  color: var(--tx-2);
  flex: 1;
}

.step-when {
  font-size: 11.5px !important;
  color: var(--tx-3) !important;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  flex: 0 !important;
  letter-spacing: 0.04em;
}

.proc-media {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 32px;
}

.proc-media figure {
  border-radius: var(--r-m);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--s1);
}

.proc-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* Factory and freight stock is shot in daylight and sits several stops
     brighter than the neon photography around it. Knocking it back keeps the
     page one temperature instead of two. */
  filter: saturate(0.82) brightness(0.78) contrast(1.06);
  transition: filter 0.4s var(--ease);
}

.proc-media figure:hover img {
  filter: saturate(1) brightness(0.95) contrast(1);
}

.proc-media figcaption {
  padding: 13px 16px;
  font-size: 13px;
  color: var(--tx-3);
}

/* --------------------------------------------------------------------------
   QUOTES
   -------------------------------------------------------------------------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.quotes figure {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

.quotes figure::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  right: 20px;
  font-family: var(--ff-d);
  font-size: 72px;
  line-height: 1;
  color: var(--line-2);
}

.quotes blockquote {
  font-size: 16px;
  line-height: 1.55;
  color: var(--tx);
  flex: 1;
}

.quotes figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.quotes figcaption b {
  font-family: var(--ff-d);
  font-size: 14.5px;
  font-weight: 600;
}
.quotes figcaption span {
  font-size: 12.5px;
  color: var(--tx-3);
}

.venue-shots {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 14px;
  margin-top: 24px;
}

.venue-shots img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-m);
  border: 1px solid var(--line);
  filter: saturate(0.9) brightness(0.86);
  transition: filter 0.4s var(--ease);
}
.venue-shots img:hover {
  filter: none;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--ff-d);
  font-size: clamp(16px, 1.9vw, 19px);
  font-weight: 500;
  letter-spacing: -0.012em;
  transition: color 0.18s var(--ease);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  color: var(--ac);
}

/* Plus that becomes a minus. Two spans would be markup for a decoration, so
   it is drawn with the pseudo-elements the summary already has. */
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  background: var(--tx-2);
  transition: transform 0.3s var(--ease), background-color 0.2s var(--ease);
}
.faq summary::before {
  width: 15px;
  height: 1.5px;
  transform: translateY(-50%);
}
.faq summary::after {
  width: 1.5px;
  height: 15px;
  right: 12.75px;
  transform: translateY(-50%);
}
.faq details[open] summary::after {
  transform: translateY(-50%) rotate(90deg);
  opacity: 0;
}
.faq details[open] summary::before {
  background: var(--ac);
}

/* details has no animatable height, so the body is wrapped and the grid-rows
   trick animates it without hard-coding a max-height guess.

   minmax(0, …) is load-bearing: a bare `0fr` track still takes an automatic
   minimum of min-content, so the panel sits at full height and never collapses.
   Forcing the floor to 0 is what makes the closed state actually closed. */
.faq-body {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 0.34s var(--ease);
}
.faq details[open] .faq-body {
  grid-template-rows: minmax(0, 1fr);
}
.faq-body > p {
  overflow: hidden;
  font-size: 15px;
  color: var(--tx-2);
  max-width: 68ch;
}
.faq details[open] .faq-body > p {
  padding-bottom: 24px;
}

/* --------------------------------------------------------------------------
   QUOTE FORM
   -------------------------------------------------------------------------- */
.quote-sec {
  background: radial-gradient(90% 70% at 15% 0%, rgba(25, 227, 255, 0.07), transparent 60%),
    var(--bg);
  border-top: 1px solid var(--line);
}

.quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.quote-list {
  list-style: none;
  margin-top: 28px;
  display: grid;
  gap: 11px;
}

.quote-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--tx-2);
}

.quote-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ac);
  box-shadow: 0 0 0 4px rgba(25, 227, 255, 0.12);
}

.quote-direct {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.quote-direct p {
  font-size: 14px;
  color: var(--tx-3);
  width: 100%;
  margin-bottom: 4px;
}

.chip-link {
  padding: 9px 18px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.chip-link:hover {
  border-color: var(--ac);
  color: var(--ac);
}

.qform {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(24px, 3vw, 34px);
  display: grid;
  gap: 17px;
}

.qf-row {
  display: grid;
  gap: 7px;
}

.qf-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}

.qform label,
.qf-fs legend {
  font-size: 13px;
  color: var(--tx-2);
  font-weight: 500;
}

.qform label span {
  color: var(--ac);
}

.qform input,
.qform textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  font-size: 15px;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.qform input:hover,
.qform textarea:hover {
  border-color: var(--line-2);
}

.qform input:focus,
.qform textarea:focus,
.sel:focus {
  outline: none;
  border-color: var(--ac);
  background: var(--s3);
}

.qform textarea {
  resize: vertical;
  min-height: 96px;
  font-family: inherit;
}

.qform input.is-bad {
  border-color: #f87171;
}

.qf-fs {
  border: 0;
  display: grid;
  gap: 10px;
}

.qf-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* Checkbox rendered as a pill. The input and its label are siblings rather
   than nested, so the checked state is carried by `input:checked + label` --
   which has worked everywhere for two decades. An earlier version wrapped the
   input and leaned on :has(); the selector matched but the style never
   applied, and there is no reason to spend a fragile new feature on something
   the adjacent combinator does perfectly. */
.qf-checks input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.qf-checks label {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--s2);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease),
    color 0.18s var(--ease);
}

.qf-checks label:hover {
  border-color: var(--line-2);
}

.qf-checks input:checked + label {
  border-color: var(--ac);
  background: rgba(25, 227, 255, 0.12);
  color: var(--ac);
}

.qf-checks input:focus-visible + label {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}

.qf-note {
  font-size: 13px;
  color: var(--tx-3);
  min-height: 20px;
  text-align: center;
}
.qf-note.is-bad {
  color: #f87171;
}
.qf-note.is-ok {
  color: var(--ok);
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.ftr {
  border-top: 1px solid var(--line);
  background: var(--s1);
  padding-block: 56px 32px;
}

.ftr-top {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.ftr-brand p {
  margin-top: 16px;
  font-size: 14px;
  color: var(--tx-3);
  max-width: 34ch;
}

.ftr-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.ftr-nav h4 {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-3);
  margin-bottom: 14px;
  font-weight: 600;
}

.ftr-nav ul {
  list-style: none;
  display: grid;
  gap: 9px;
}

.ftr-nav a {
  font-size: 14px;
  color: var(--tx-2);
  transition: color 0.18s var(--ease);
}
.ftr-nav a:hover {
  color: var(--ac);
}

.ftr-btm {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  color: var(--tx-3);
}

.ftr-fine {
  max-width: 62ch;
}

.ftr-fine code {
  font-size: 12px;
  padding: 1px 5px;
  background: var(--s2);
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   STICKY MOBILE CTA
   -------------------------------------------------------------------------- */
.mcta {
  display: none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  padding: 15px;
  text-align: center;
  background: var(--ac);
  color: #04252b;
  border-radius: 100px;
  font-family: var(--ff-d);
  font-weight: 600;
  box-shadow: 0 10px 34px -8px rgba(0, 0, 0, 0.8);
  transform: translateY(140%);
  transition: transform 0.34s var(--ease);
}

.mcta.is-on {
  transform: none;
}

/* --------------------------------------------------------------------------
   REVEAL ON SCROLL
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.66s var(--ease), transform 0.66s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .calc {
    grid-template-columns: 1fr;
  }
  .calc-out {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
  .venue-shots {
    grid-template-columns: 1fr 1fr;
  }
  .venue-shots img:first-child {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .nav,
  .hdr-cta {
    display: none;
  }

  .burger {
    display: block;
    margin-left: auto;
  }

  /* Mobile nav: a panel under the bar rather than a full-screen takeover, so
     the hero stays visible behind it and the page never loses its place. */
  .nav.is-open {
    display: grid;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 14px var(--gut) 22px;
    gap: 2px;
    background: rgba(7, 8, 11, 0.96);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    font-size: 16px;
  }
  .nav.is-open a {
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open a::after {
    display: none;
  }

  .split,
  .quote-grid {
    grid-template-columns: 1fr;
  }
  /* Stacked, there is no sibling column to match, so the media needs its own
     proportions back. */
  .split-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .split-rev .split-media {
    order: 0;
  }
  .feats-2 {
    grid-template-columns: 1fr;
  }
  .quotes {
    grid-template-columns: 1fr;
  }
  .proc-media {
    grid-template-columns: 1fr;
  }
  .ftr-top {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-live {
    max-width: none;
  }
  .mcta {
    display: block;
  }
  .ftr {
    padding-bottom: 92px;
  }
}

@media (max-width: 720px) {
  html {
    scroll-padding-top: 72px;
  }

  .hero-h1 {
    font-size: clamp(31px, 8.4vw, 44px);
  }

  .hero-sub {
    font-size: 15px;
    margin-top: 16px;
  }

  .hero-btns {
    margin-top: 24px;
  }

  .hero-btns .btn {
    flex: 1;
    min-width: 0;
    padding-inline: 16px;
  }

  .trust .wrap {
    gap: 26px;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 22px 20px;
    width: 100%;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .calc-grid {
    grid-template-columns: 1fr;
  }

  .qf-2 {
    grid-template-columns: 1fr;
  }

  .venue-shots {
    grid-template-columns: 1fr;
  }
  .venue-shots img:first-child {
    grid-column: auto;
  }

  .split-strip {
    gap: 7px;
  }

  .ftr-nav {
    grid-template-columns: 1fr 1fr;
  }

  .ftr-btm {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 420px) {
  .hero-btns {
    flex-direction: column;
  }
  .hero-btns .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   Transitions that only decorate are dropped. The reveal animation cannot
   simply be disabled -- its resting state is invisible -- so it is forced to
   its finished state instead.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .hdr,
  .mcta,
  .band img {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
}