/* ==========================================================================
   DNA TOOLS LTD — The Independent Alternative
   Design system: "Machined"
   Ground        : near-black graphite with a warm cast, so it reads lit, not off
   Accent        : copper sampled from the logo gradient
   Display type  : Archivo variable (wdth + wght axes) — expanded + black
   Micro type    : JetBrains Mono — spec-sheet labels, indices, counts
   Motifs        : hairline rules, crop-mark corners, measurement ticks,
                   hazard diagonals, knockout numerals
   ========================================================================== */

/* --------------------------------------------------------- reset + tokens */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* surface */
  --void:      #0a0b0e;
  --graphite:  #0f1116;
  --panel:     #14171d;
  --panel-2:   #1a1e26;
  --plate:     #0c0e12;

  /* hairlines */
  --line:      rgba(255,255,255,.075);
  --line-2:    rgba(255,255,255,.14);
  --line-hot:  rgba(217,122,53,.30);

  /* brand — stops sampled off the DNA Tools wordmark, which runs a top-lit
     vertical gradient rather than a flat fill */
  --copper:    #d97a35;
  --flare:     #ff9d5c;
  --ember:     #a85222;
  --logo-1:    #cb6e31;
  --logo-4:    #a85222;
  --wash:      rgba(217,122,53,.10);

  /* text */
  --paper:     #f6f3ed;
  --text:      #d9d5cd;
  --muted:     #96918a;
  --faint:     #6e6a63;

  /* type */
  --display:   'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --sans:      'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* rhythm */
  --gut:       clamp(1.25rem, 5vw, 5rem);
  --max:       1320px;
  --sec-y:     clamp(4.5rem, 11vw, 9.5rem);
  --r:         3px;
  --r-lg:      6px;

  /* motion */
  --ease:      cubic-bezier(.22,.68,.28,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--void);
  color: var(--text);
  font-family: var(--sans);
  font-variation-settings: 'wdth' 100, 'wght' 400;
  font-size: clamp(15.5px, .35vw + 14.4px, 17.5px);
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* film grain — above everything, ignores the pointer */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--copper); color: #140c05; }

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

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; top: 0; left: 50%; transform: translate(-50%,-140%);
  z-index: 2000; background: var(--copper); color: #140c05;
  padding: .8rem 1.4rem; font-family: var(--mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; border-radius: 0 0 var(--r) var(--r);
  transition: transform .25s var(--ease);
}
.skip:focus { transform: translate(-50%,0); }

/* --------------------------------------------------------- shared type */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(10.5px, .28vw + 9.6px, 12px);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--copper); line-height: 1;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55;
}
.eyebrow--plain::before { display: none; }

.lede {
  font-size: clamp(1.02rem, .38vw + .93rem, 1.24rem);
  line-height: 1.6;
  color: var(--text);
  max-width: 62ch;
  text-wrap: pretty;
}

/* copper-weighted emphasis inside headlines */
.hl { color: var(--copper); }
.hl-2 {
  background: linear-gradient(180deg, var(--flare), var(--logo-1) 55%, var(--logo-4));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --------------------------------------------------------- section frame */
.sec { padding-block: var(--sec-y); padding-inline: var(--gut); position: relative; }
.sec--tight { padding-block: clamp(3rem, 7vw, 6rem); }

.sec__head { max-width: 68ch; margin-bottom: clamp(2.5rem, 5vw, 4.25rem); }
.sec__title {
  font-family: var(--display);
  font-variation-settings: 'wdth' 110, 'wght' 800;
  text-transform: uppercase;
  font-size: clamp(1.95rem, 4.3vw, 3.35rem);
  line-height: .96; letter-spacing: -.022em;
  color: var(--paper);
  margin: 1.15rem 0 0; text-wrap: balance;
}
.sec__sub { margin-top: 1.15rem; color: var(--muted); max-width: 58ch; text-wrap: pretty; }

/* measurement tick rail — a nod to the precision brands on the truck */
.ticks {
  height: 15px;
  background-image:
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(90deg, var(--line-hot) 0 1px, transparent 1px 65px);
  background-size: 100% 6px, 100% 12px;
  background-position: 0 0, 0 0;
  background-repeat: repeat-x;
  opacity: .75;
}

/* --------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(11.5px, .2vw + 11px, 13px);
  letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer; border: 0; border-radius: var(--r);
  padding: 1.05rem 1.7rem; min-height: 52px;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease),
              color .28s var(--ease), border-color .28s var(--ease),
              background-color .28s var(--ease);
}
.btn svg { flex: none; }

.btn--solid {
  background: linear-gradient(140deg, var(--flare) 0%, var(--copper) 48%, var(--ember) 100%);
  color: #150c04;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 10px 26px -16px rgba(255,157,92,.7);
}
/* shine sweep */
.btn--solid::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease-out);
}
.btn--solid:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 18px 40px -16px rgba(255,157,92,.62); }
.btn--solid:hover::after { transform: translateX(120%); }
.btn--solid:active { transform: translateY(0); }

.btn--ghost {
  border: 1px solid var(--line-2); color: var(--paper);
  background: rgba(255,255,255,.022);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--copper); background: var(--wash); transform: translateY(-2px); }

.btn--sm { padding: .72rem 1.15rem; min-height: 42px; font-size: 11.5px; letter-spacing: .14em; }

/* --------------------------------------------------------- nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.4rem);
  padding: 1.1rem var(--gut);
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease),
              border-color .4s var(--ease), padding .4s var(--ease);
}
.nav.stuck {
  background: rgba(10,11,14,.78);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: var(--line);
  padding-block: .68rem;
}
.nav__logo { flex: 0 1 auto; display: block; min-width: 0; }
/* The wordmark is ~15:1, so height alone lets it run to 400px on a phone and
   shove the CTA off the screen. Width is the binding constraint here.
   max-width must be 100%, not a vw figure: .nav__logo is the only shrinkable
   item in the header, so a fixed 44vw cap (165px at 375px wide) let the image
   overflow its own shrunk parent and slide under the Get a quote button. A
   percentage tracks whatever width flexbox actually leaves, at every size. */
.nav__logo img {
  height: clamp(15px, 1.55vw, 24px); width: auto; max-width: min(100%, 300px);
  object-fit: contain; object-position: left center;
  transition: opacity .3s var(--ease);
}
.nav__logo:hover img { opacity: .82; }

.nav__links { display: flex; gap: clamp(1.1rem, 2vw, 2.1rem); list-style: none; margin-left: auto; }
.nav__links a {
  font-family: var(--mono); font-weight: 500;
  font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); position: relative; padding-block: .5rem;
  transition: color .25s var(--ease);
  white-space: nowrap;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--copper); transform: scaleX(0); transform-origin: right;
  transition: transform .38s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--paper); }
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }

.nav__actions { display: flex; align-items: center; gap: .75rem; flex: none; }
.nav__tel {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .08em; color: var(--paper);
  padding: .55rem .2rem; white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav__tel svg { color: var(--copper); }
.nav__tel:hover { color: var(--copper); }

.burger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  padding: 10px 6px; background: none; border: 0; flex: none;
}
.burger span { display: block; width: 22px; height: 1.5px; background: var(--copper); transition: transform .32s var(--ease), opacity .22s var(--ease); }
.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(10,11,14,.975);
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  display: flex; flex-direction: column; justify-content: center;
  gap: .1rem; padding: 6rem var(--gut) 3rem;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .38s var(--ease), transform .38s var(--ease), visibility .38s;
  overflow-y: auto;
}
.drawer.open { opacity: 1; visibility: visible; transform: none; }
.drawer a {
  font-family: var(--display);
  font-variation-settings: 'wdth' 108, 'wght' 800;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 8.5vw, 2.9rem); line-height: 1.14;
  color: var(--text); padding-block: .1rem;
  display: flex; align-items: baseline; gap: .8rem;
  transition: color .25s var(--ease), transform .35s var(--ease);
}
.drawer a .ix { font-family: var(--mono); font-size: 11px; font-variation-settings: normal; font-weight: 500; color: var(--copper); opacity: .75; }
.drawer a:hover { color: var(--paper); transform: translateX(8px); }
.drawer__foot { margin-top: 2.2rem; display: grid; gap: .8rem; }
/* the drawer CTAs sit at full width — tracking has to come back in or they wrap */
.drawer__foot .btn { letter-spacing: .1em; font-size: 12px; padding-inline: 1rem; }

/* --------------------------------------------------------- reveal */
.rv { opacity: 0; transform: translateY(24px); }
.rv.in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* --------------------------------------------------------- hero */
.hero {
  position: relative; min-height: min(100svh, 900px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(7rem, 14vh, 10rem) var(--gut) 0;
  overflow: hidden; isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%;
  transform: scale(1.06);
  will-change: transform;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 78% 62%, rgba(217,122,53,.20) 0%, transparent 55%),
    linear-gradient(180deg, rgba(10,11,14,.90) 0%, rgba(10,11,14,.55) 26%, rgba(10,11,14,.72) 62%, var(--void) 96%),
    linear-gradient(90deg, rgba(10,11,14,.94) 0%, rgba(10,11,14,.68) 42%, rgba(10,11,14,.30) 100%);
}

.hero__inner { max-width: 1180px; padding-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.hero h1 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 106, 'wght' 800;
  text-transform: uppercase;
  /* deliberately restrained: the CTA and the trust row have to clear the fold
     on a 900px-tall laptop, and an oversized H1 is what pushes them under */
  font-size: clamp(2.05rem, 4.75vw, 4rem);
  line-height: .95; letter-spacing: -.028em;
  color: var(--paper); margin: 1.15rem 0 0;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0,0,0,.55);
}
.hero__lede { margin-top: 1.25rem; max-width: 58ch; color: #e2ded7; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

.hero__trust {
  display: flex; flex-wrap: wrap; gap: .6rem 1.9rem;
  margin-top: 1.9rem; padding-top: 1.4rem; border-top: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.hero__trust li { list-style: none; display: flex; align-items: center; gap: .55rem; }
.hero__trust svg { color: var(--copper); flex: none; }

.hero__scroll {
  position: absolute; right: var(--gut); bottom: 2rem; z-index: 2;
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--faint);
  writing-mode: vertical-rl;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 54px;
  background: linear-gradient(180deg, var(--copper), transparent);
  animation: drip 2.4s var(--ease) infinite;
}
@keyframes drip {
  0%   { transform: scaleY(.2); transform-origin: top; }
  55%  { transform: scaleY(1);  transform-origin: top; }
  56%  { transform: scaleY(1);  transform-origin: bottom; }
  100% { transform: scaleY(0);  transform-origin: bottom; }
}

/* --------------------------------------------------------- marquee */
.marq {
  position: relative; overflow: hidden;
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, var(--graphite), var(--void));
  padding-block: clamp(1.4rem, 2.6vw, 2.1rem);
}
.marq__track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.marq:hover .marq__track, .marq:focus-within .marq__track { animation-play-state: paused; }
.marq__group { display: flex; align-items: center; gap: clamp(1.6rem, 3.2vw, 3.2rem); padding-inline: clamp(.8rem, 1.6vw, 1.6rem); }
/* Logos are balanced by AREA, not by a fixed box.
   A fixed slot plus object-fit normalises the bounding box, which is the wrong
   thing: wide wordmarks fill the width while square marks get capped by the far
   smaller height, so Crescent and Shinano ended up a third of Stahlwille's
   optical weight. `--k` is computed per logo in site.js from its real aspect
   ratio, so every mark ends up covering roughly the same number of pixels.
   --marq-h is the height a 4:1 wordmark gets; everything else scales off it. */
.marq { --marq-h: clamp(17px, 1.9vw, 26px); }
.marq__group img {
  height: calc(var(--marq-h) * var(--k, 1)); width: auto; max-width: none;
  filter: grayscale(1) brightness(2.1); opacity: .62; mix-blend-mode: lighten;
  transition: opacity .35s var(--ease), filter .35s var(--ease);
}
.marq__group img:hover { opacity: 1; filter: none; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marq::before, .marq::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(50px, 9vw, 150px); z-index: 2; pointer-events: none;
}
.marq::before { left: 0; background: linear-gradient(90deg, var(--void), transparent); }
.marq::after  { right: 0; background: linear-gradient(270deg, var(--void), transparent); }

/* --------------------------------------------------------- stats */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: clamp(1.9rem, 4vw, 3.1rem) clamp(1rem, 2.2vw, 2rem);
  border-right: 1px solid var(--line);
  position: relative;
}
.stat:last-child { border-right: 0; }
.stat::before {
  content: ""; position: absolute; left: 0; top: 0; width: 0; height: 2px;
  background: linear-gradient(90deg, var(--flare), var(--ember));
  transition: width .9s var(--ease-out) var(--d, 0ms);
}
.stat.in::before { width: 100%; }
.stat__n {
  font-family: var(--display);
  font-variation-settings: 'wdth' 96, 'wght' 800;
  font-size: clamp(2.4rem, 5.6vw, 4.2rem); line-height: .88;
  color: var(--paper); letter-spacing: -.035em;
  display: flex; align-items: baseline; gap: .04em;
}
.stat__n .u { font-size: .42em; color: var(--copper); font-variation-settings: 'wdth' 100, 'wght' 700; letter-spacing: 0; }
.stat__l {
  margin-top: .85rem; font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); line-height: 1.5;
}

/* --------------------------------------------------------- card system */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--graphite);
  padding: clamp(1.7rem, 3.1vw, 2.9rem);
  position: relative; isolation: isolate;
  transition: background .4s var(--ease);
}
/* pointer-tracked copper wash — set from JS, degrades to nothing */
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(217,122,53,.10), transparent 62%);
  transition: opacity .45s var(--ease);
}
.card:hover { background: var(--panel); }
.card:hover::before { opacity: 1; }

/* crop-mark corner */
.card::after {
  content: ""; position: absolute; left: 12px; top: 12px; width: 13px; height: 13px;
  border-left: 1px solid var(--copper); border-top: 1px solid var(--copper);
  opacity: 0; transform: translate(4px,4px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.card:hover::after { opacity: .85; transform: none; }

.card__idx {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .18em; color: var(--copper); display: block; margin-bottom: 1.15rem;
}
.card__ico {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line-hot); border-radius: var(--r);
  background: var(--wash); color: var(--copper); margin-bottom: 1.35rem;
}
.card__t {
  font-family: var(--display);
  font-variation-settings: 'wdth' 104, 'wght' 700;
  font-size: clamp(1.16rem, 1.5vw, 1.4rem); line-height: 1.2;
  color: var(--paper); letter-spacing: -.012em; margin-bottom: .8rem;
  text-wrap: balance;
}
.card__b { color: var(--muted); font-size: .965rem; line-height: 1.66; text-wrap: pretty; }
.card__b strong { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------- sectors */
.sector { display: flex; flex-direction: column; height: 100%; }
.sector .card__b { flex: 1; }
.sector__tag {
  margin-top: 1.35rem; padding-top: 1.1rem; border-top: 1px dashed var(--line-2);
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); line-height: 1.7;
}

/* --------------------------------------------------------- brands */
.brands {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
}
.brand {
  background: var(--graphite); display: flex; flex-direction: column;
  padding: 0; position: relative; isolation: isolate;
  transition: background .38s var(--ease);
}
.brand:hover { background: var(--panel); }
.brand__plate {
  background: var(--plate); height: clamp(112px, 12vw, 140px);
  border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
/* Sized off the plate, which has a definite height — two traps avoided here:
   1. A percentage height against an auto-sized grid/flex row is circular, so
      the browser falls back to `auto`; the image then gets sized by width and
      its aspect ratio drives the height straight past the plate.
   2. An <img> is a replaced element, so `width: auto` on an absolutely
      positioned one resolves to its INTRINSIC width — insets alone are ignored.
   Absolute positioning plus explicit 100%/100% resolves against the plate's
   padding box, which is definite. Padding (with the global border-box) gives
   the breathing room, and object-fit letterboxes inside the content box.
   Without this the square marks — Knipex, Crescent, Shinano — were cropped
   through the middle and read as blank plates. */
.brand__plate img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; padding: 1.15rem 1.5rem;
  object-fit: contain; object-position: center;
  filter: grayscale(1) brightness(1.85); opacity: .62; mix-blend-mode: lighten;
  transition: filter .4s var(--ease), opacity .4s var(--ease), transform .5s var(--ease-out);
}
.brand:hover .brand__plate img,
.brand:focus-within .brand__plate img { filter: none; opacity: 1; transform: scale(1.045); }

.brand__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.brand__n {
  font-family: var(--display); font-variation-settings: 'wdth' 104, 'wght' 700;
  font-size: 1.02rem; text-transform: uppercase; letter-spacing: .01em; color: var(--paper);
}
.brand__d { font-size: .875rem; color: var(--muted); line-height: 1.58; flex: 1; text-wrap: pretty; }
.brand__go {
  margin-top: .7rem; display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .15em;
  text-transform: uppercase; color: var(--copper);
}
.brand__go svg { transition: transform .35s var(--ease); }
.brand:hover .brand__go svg { transform: translate(3px,-3px); }
/* the whole card becomes the link target */
.brand__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.brands__note {
  margin-top: 1.6rem; font-family: var(--mono); font-size: 12px; letter-spacing: .05em;
  color: var(--faint); line-height: 1.7;
}
.brands__note a { color: var(--copper); border-bottom: 1px solid var(--line-hot); }
.brands__note a:hover { border-bottom-color: var(--copper); }

/* --------------------------------------------------------- process */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 3rem); }
.step { position: relative; padding-top: 2.6rem; }
.step::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2);
}
.step::after {
  content: ""; position: absolute; left: 0; top: 0; width: 0; height: 1px; background: var(--copper);
  transition: width 1s var(--ease-out) var(--d, 0ms);
}
.step.in::after { width: 100%; }
.step__n {
  font-family: var(--display); font-variation-settings: 'wdth' 90, 'wght' 800;
  font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--line-hot);
  letter-spacing: -.04em; margin-bottom: .9rem;
  transition: color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease);
}
.step:hover .step__n { color: var(--wash); -webkit-text-stroke-color: var(--copper); }
.step__t {
  font-family: var(--display); font-variation-settings: 'wdth' 104, 'wght' 700;
  text-transform: uppercase; font-size: 1.1rem; letter-spacing: .005em;
  color: var(--paper); margin-bottom: .7rem;
}
.step__b { color: var(--muted); font-size: .95rem; line-height: 1.66; text-wrap: pretty; }

/* --------------------------------------------------------- split feature */
.split {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.split__media { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.split__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.split__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, transparent 45%, rgba(10,11,14,.55) 100%),
              radial-gradient(90% 70% at 20% 15%, rgba(217,122,53,.16), transparent 60%);
}
.split__badge {
  position: absolute; z-index: 2; left: 1.15rem; bottom: 1.15rem;
  display: flex; align-items: center; gap: .65rem;
  background: rgba(10,11,14,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-hot); border-radius: var(--r);
  padding: .7rem 1rem;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--paper);
}
.split__badge svg { color: var(--copper); flex: none; }

.checks { list-style: none; margin-top: 1.9rem; display: grid; gap: .95rem; }
.checks li { display: flex; gap: .9rem; align-items: flex-start; color: var(--text); font-size: .98rem; line-height: 1.6; }
.checks svg { color: var(--copper); flex: none; margin-top: .35em; }
.checks strong { color: var(--paper); font-weight: 600; }
/* --------------------------------------------------------- video carousel */
/* Coverflow, not a grid. The point is one large stage: the clip has to be worth
   watching HERE, because the moment someone taps through to YouTube they are
   gone into the recommendation feed. */
.vcar {
  position: relative; overflow: hidden;
  padding-block: clamp(.5rem, 2vw, 1.5rem);
}
.vcar__stage {
  position: relative; width: min(100%, 900px); margin-inline: auto;
  aspect-ratio: 16 / 9; perspective: 1700px;
}
.vslide {
  position: absolute; inset: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--plate);
  cursor: pointer; padding: 0; text-align: left; width: 100%;
  transform-origin: center center;
  transition: transform .62s var(--ease-out), opacity .55s var(--ease), border-color .4s var(--ease);
}
/* No blanket `will-change` / `backface-visibility` here on purpose: with nine
   slides that promotes nine GPU layers permanently and keeps the compositor
   busy even when the carousel is idle and off-screen. Promote only the two
   cards actually moving, and only while they move. */
.vslide.is-active, .vslide.is-near { will-change: transform, opacity; }
.vslide.is-active { border-color: var(--line-hot); box-shadow: 0 34px 80px -40px rgba(0,0,0,.95); }
.vslide > img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity .45s var(--ease); }
.vslide.is-active > img { opacity: 1; }

.vslide__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,11,14,.2) 0%, transparent 32%, rgba(10,11,14,.9) 100%);
}
.vslide__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: clamp(58px, 7vw, 84px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(10,11,14,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-2);
  display: grid; place-items: center; pointer-events: none;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .4s var(--ease);
}
.vslide__play::before {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: clamp(16px, 1.7vw, 22px) solid var(--paper);
  border-top: clamp(10px, 1.05vw, 14px) solid transparent;
  border-bottom: clamp(10px, 1.05vw, 14px) solid transparent;
  transition: border-left-color .35s var(--ease);
}
.vslide.is-active:hover .vslide__play { background: var(--copper); border-color: var(--copper); transform: translate(-50%,-50%) scale(1.07); }
.vslide.is-active:hover .vslide__play::before { border-left-color: #140c05; }
.vslide:not(.is-active) .vslide__play { opacity: 0; }

.vslide__meta { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(.9rem, 1.8vw, 1.5rem); pointer-events: none; display: block; }
.vslide__brand { display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--copper); }
.vslide__t { display: block; font-family: var(--display); font-variation-settings: 'wdth' 102, 'wght' 600; font-size: clamp(.95rem, 1.4vw, 1.2rem); color: var(--paper); margin-top: .3rem; line-height: 1.25; }
.vslide:not(.is-active) .vslide__meta { opacity: 0; }

/* the player fills the slide once it mounts */
.vslide__mount { position: absolute; inset: 0; z-index: 5; }
.vslide__mount iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vslide.is-playing { cursor: default; }
.vslide.is-playing > img,
.vslide.is-playing .vslide__scrim,
.vslide.is-playing .vslide__play,
.vslide.is-playing .vslide__meta { opacity: 0; pointer-events: none; }

/* local-file notice — never bounce someone to youtube.com to watch */
.vslide__note {
  position: absolute; inset: auto 8% 12% 8%; z-index: 6;
  background: rgba(10,11,14,.92); border: 1px solid var(--line-hot); border-radius: var(--r);
  padding: .85rem 1rem; font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
  color: var(--text); text-align: center;
}

.vcar__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: clamp(40px, 4vw, 52px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(10,11,14,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-2); color: var(--paper);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.vcar__arrow:hover { background: var(--copper); border-color: var(--copper); color: #140c05; }
.vcar__arrow--prev { left: clamp(.4rem, 1.5vw, 1.5rem); }
.vcar__arrow--next { right: clamp(.4rem, 1.5vw, 1.5rem); }
.vcar__arrow:hover.vcar__arrow--prev { transform: translateY(-50%) translateX(-2px); }
.vcar__arrow:hover.vcar__arrow--next { transform: translateY(-50%) translateX(2px); }

.vcar__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  margin-top: clamp(1.4rem, 2.5vw, 2rem); flex-wrap: wrap;
}
.vcar__brand { display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--copper); }
.vcar__title {
  display: block; margin-top: .45rem;
  font-family: var(--display); font-variation-settings: 'wdth' 106, 'wght' 700;
  text-transform: uppercase; font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--paper); letter-spacing: -.01em; line-height: 1.1;
}

.vcar__rail { display: flex; align-items: center; gap: 1.25rem; margin-top: clamp(1.2rem, 2vw, 1.75rem); }
.vcar__bar { flex: 1; height: 1px; background: var(--line-2); position: relative; overflow: hidden; }
.vcar__bar span {
  position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--flare), var(--ember));
  transition: transform .55s var(--ease-out);
}
.vcar__count { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .16em; color: var(--faint); flex: none; }

@media (max-width: 720px) {
  .vcar__meta { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .vcar__meta .btn { width: 100%; }
}

/* --------------------------------------------------------- faq */
.faq { border-top: 1px solid var(--line); max-width: 1000px; }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.2rem, 2.2vw, 1.7rem) 0;
  text-align: left;
  font-family: var(--display); font-variation-settings: 'wdth' 104, 'wght' 600;
  font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.35; color: var(--paper);
  transition: color .28s var(--ease);
}
.faq__q:hover { color: var(--copper); }
.faq__sign { flex: none; width: 22px; height: 22px; position: relative; margin-top: .22em; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--copper);
  transition: transform .38s var(--ease), opacity .28s var(--ease);
}
.faq__sign::before { width: 14px; height: 1.5px; transform: translate(-50%,-50%); }
.faq__sign::after  { width: 1.5px; height: 14px; transform: translate(-50%,-50%); }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq__i.open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { color: var(--muted); padding-bottom: clamp(1.2rem, 2.2vw, 1.7rem); max-width: 72ch; line-height: 1.68; text-wrap: pretty; }
.faq__a a { color: var(--copper); border-bottom: 1px solid var(--line-hot); }

/* --------------------------------------------------------- final CTA + form */
.close { position: relative; overflow: hidden; isolation: isolate; }
.close::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(80% 120% at 12% 0%, rgba(217,122,53,.16), transparent 58%),
    linear-gradient(180deg, var(--graphite), var(--void));
}
/* hazard diagonal, very low key */
.close::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(217,122,53,.05) 0 2px, transparent 2px 15px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 70%);
}

/* -------------------------------------------------- signature band: the bike */
/* Full-bleed and on its own, immediately before the closing CTA. Ghosting this
   behind the CTA didn't work: the form panel is opaque and covers the right
   half, leaving almost no canvas. Here nothing sits on top of it, so it can be
   an actual photograph rather than faint texture — an emotional beat right
   before the ask. */
.bike {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(340px, 46vw, 580px);
  display: flex; align-items: center;
  padding: clamp(3rem, 7vw, 5rem) var(--gut);
  border-block: 1px solid var(--line);
}
/* The source is square. In a wide band `cover` scales to the width, so there is
   NO horizontal crop room — the rider stays centre-left wherever you put
   object-position, and only the vertical crop is adjustable. So the copy goes
   right, over the empty tarmac, and the rider gets the left of the frame. */
.bike__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%;
  filter: grayscale(.15) contrast(1.06);
}
/* Only as dark as the copy needs: heavy on the right, clear over the rider. */
.bike__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(10,11,14,.12) 30%, rgba(10,11,14,.62) 56%, rgba(10,11,14,.93) 82%),
    linear-gradient(180deg, rgba(10,11,14,.42) 0%, transparent 34%, rgba(10,11,14,.6) 100%),
    radial-gradient(55% 70% at 18% 70%, rgba(217,122,53,.16), transparent 66%);
}
/* .shell centres and caps the width; this pushes the copy to the right edge of
   it, clear of the rider. margin-right must be 0 — .shell sets margin-inline to
   auto, which would otherwise re-centre the block straight over the bike. */
.bike__in { max-width: 38ch; position: relative; margin-left: auto; margin-right: 0; }
.bike__t {
  display: flex; align-items: baseline; gap: .8rem;
  margin-top: 1.1rem;
  font-family: var(--display); font-variation-settings: 'wdth' 106, 'wght' 800;
  text-transform: uppercase; font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  line-height: 1; letter-spacing: -.02em; color: var(--paper);
  text-shadow: 0 2px 26px rgba(0,0,0,.7);
}
.bike__n {
  font-variation-settings: 'wdth' 88, 'wght' 900;
  font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: .82; flex: none;
  color: var(--copper); letter-spacing: -.045em;
}
.bike__b {
  margin-top: 1.1rem; color: var(--text); font-size: clamp(.95rem, 1.3vw, 1.06rem);
  line-height: 1.65; text-wrap: pretty; text-shadow: 0 1px 18px rgba(0,0,0,.8);
}

@media (max-width: 860px) {
  /* Narrow band: there is no clear side to put copy in, so the rider takes the
     top of the frame and the copy sits under him against a bottom scrim. */
  .bike {
    align-items: flex-end;
    /* tall enough that the rider still reads above the copy block */
    min-height: clamp(520px, 132vw, 700px);
    padding-block: clamp(2.5rem, 8vw, 4rem);
  }
  .bike__in { margin-left: 0; margin-right: 0; max-width: 100%; }
  .bike__img { object-position: 50% 34%; }
  .bike__scrim {
    background:
      linear-gradient(180deg, rgba(10,11,14,.45) 0%, transparent 22%, rgba(10,11,14,.82) 55%, rgba(10,11,14,.96) 100%),
      radial-gradient(80% 50% at 60% 18%, rgba(217,122,53,.16), transparent 66%);
  }
}

.contact { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(2.4rem, 5vw, 5.5rem); align-items: start; }

.cinfo { display: grid; gap: 1rem; margin-top: 2.2rem; }
.cinfo__row {
  display: flex; gap: 1.05rem; align-items: center;
  padding: 1.05rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r);
  background: rgba(255,255,255,.015);
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.cinfo__row:hover { border-color: var(--line-hot); background: var(--wash); }
.cinfo__ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 1px solid var(--line-hot); border-radius: var(--r); color: var(--copper); }
.cinfo__k { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.cinfo__v { font-size: 1rem; color: var(--paper); margin-top: .18rem; font-weight: 500; word-break: break-word; }
.cinfo__v a:hover { color: var(--copper); }

.pay { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.pay__note { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin-bottom: 1rem; }
.pay__row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
/* Uniform chips rather than the supplied logo banners — those are full-bleed
   marketing artwork and turn to mush at badge size. Swap in official SVG marks
   from the Afterpay / Gem partner kits and these become <img> slots. */
.pay__chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: .6rem .85rem; line-height: 1;
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
a.pay__chip { color: var(--text); }
a.pay__chip:hover { border-color: var(--copper); color: var(--copper); background: var(--wash); }
a.pay__chip svg { opacity: .55; }
a.pay__chip:hover svg { opacity: 1; }

/* form */
.form {
  background: var(--graphite); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3.2vw, 2.9rem);
  position: relative;
}
.form::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  background: linear-gradient(90deg, var(--flare), var(--copper) 45%, transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.form__t {
  font-family: var(--display); font-variation-settings: 'wdth' 106, 'wght' 800;
  text-transform: uppercase; font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  line-height: 1.02; letter-spacing: -.018em; color: var(--paper);
}
.form__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .95rem; }
.form__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--copper); border: 1px solid var(--line-hot); background: var(--wash);
  border-radius: 999px; padding: .4rem .8rem;
}
.form__sub { margin-top: 1.05rem; color: var(--muted); font-size: .95rem; }
.form form { margin-top: 1.9rem; display: grid; gap: 1.05rem; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
.fld { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.fld label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: .45rem;
}
.fld label .opt { color: var(--faint); letter-spacing: .08em; text-transform: none; font-size: 10px; }
.fld input, .fld select, .fld textarea {
  background: var(--void); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: .92rem 1rem; color: var(--paper); font-size: .97rem; font-family: var(--sans);
  width: 100%; min-width: 0;
  transition: border-color .28s var(--ease), background .28s var(--ease), box-shadow .28s var(--ease);
}
.fld textarea { resize: vertical; min-height: 118px; }
.fld input::placeholder, .fld textarea::placeholder { color: #5c5851; }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: none; border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(217,122,53,.13);
  background: #0d0f13;
}
.fld select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23d97a35' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.fld select option { background: var(--panel); color: var(--paper); }
.fld[data-err] input, .fld[data-err] select, .fld[data-err] textarea { border-color: #e0603f; }
.fld .err { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: #f08165; display: none; }
.fld[data-err] .err { display: block; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }
.form__fine { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--faint); line-height: 1.75; text-align: center; }
.form__status { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; color: #f08165; }
.form__status:empty { display: none; }

/* --------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--line); background: var(--void); padding: clamp(3rem, 6vw, 5rem) var(--gut) 2rem; }
.foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); }
.foot__logo img { height: clamp(20px, 2vw, 26px); width: auto; opacity: .9; }
.foot__tag { margin-top: 1.2rem; color: var(--muted); font-size: .92rem; max-width: 36ch; line-height: 1.65; }
.foot__h { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); margin-bottom: 1.15rem; }
.foot__l { list-style: none; display: grid; gap: .65rem; }
.foot__l a { color: var(--muted); font-size: .92rem; transition: color .25s var(--ease); }
.foot__l a:hover { color: var(--copper); }
.foot__social { display: flex; gap: .6rem; margin-top: 1.4rem; }
.foot__social a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: var(--r); color: var(--muted);
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.foot__social a:hover { border-color: var(--copper); color: var(--copper); background: var(--wash); }
.foot__base {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em; color: var(--faint);
}

/* --------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: 1fr 1fr; }

  .vcar__stage { width: min(100%, 720px); }
}

@media (max-width: 960px) {
  .nav__links, .nav__tel { display: none; }
  .nav { gap: .8rem; }
  .nav__actions { margin-left: auto; }
  .burger { display: flex; }
  .contact { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { padding-block: 1.9rem 2.2rem; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 76px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .vcar__stage { width: min(100%, 100%); }
  .fgrid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .hero { min-height: auto; padding-top: 7.5rem; }
  .hero__bg img { object-position: 68% 50%; }
  .hero__scrim {
    background:
      radial-gradient(140% 60% at 75% 78%, rgba(217,122,53,.20) 0%, transparent 58%),
      linear-gradient(180deg, rgba(10,11,14,.92) 0%, rgba(10,11,14,.74) 30%, rgba(10,11,14,.90) 70%, var(--void) 97%);
  }
  .hero__scroll { display: none; }
  .hero__trust { gap: .55rem 1.2rem; font-size: 11px; }
  .hero__cta .btn { width: 100%; }
  .foot__base { flex-direction: column; gap: .5rem; }
}

/* Stats stay 2×2 all the way down — a single column turns four numbers into
   600px of scrolling for no extra meaning. */
@media (max-width: 720px) {
  .stat { padding: 1.5rem 1.1rem; }
  .stat__n { font-size: clamp(2.1rem, 12vw, 2.9rem); }
  .stat__l { margin-top: .6rem; font-size: 10.5px; letter-spacing: .13em; }
}

/* ------------------------------------------------- sticky mobile actions */
/* Techs read this on a phone in a workshop. Keep call + quote permanently
   in thumb reach once the hero CTA has scrolled away. */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: none; gap: .55rem; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(10,11,14,.93);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-top: 1px solid var(--line-hot);
  transform: translateY(110%);
  transition: transform .38s var(--ease);
}
.dock.up { transform: none; }
.dock .btn { flex: 1; min-height: 48px; padding: .8rem .5rem; font-size: 11.5px; letter-spacing: .12em; }
@media (max-width: 720px) {
  .dock { display: flex; }
  /* clear the dock so the footer's last line is never trapped underneath */
  .foot { padding-bottom: 6rem; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .dock { transition: none; }
}

/* Small phones: the header CTA and burger are fixed width, so every pixel the
   button gives back is a pixel the wordmark keeps. Tightening the padding below
   400px keeps the logo legible on a 320px screen instead of squeezing it to a
   sliver. */
@media (max-width: 400px) {
  .nav .btn--sm { padding-inline: .8rem; letter-spacing: .1em; }
}

/* --------------------------------------------------------- motion safety */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1 !important; transform: none !important; }
  .marq__track { animation: none !important; }
  .stat::before, .step::after { width: 100% !important; }
}

/* --------------------------------------------------------- print */
@media print {
  body { background: #fff; color: #000; }
  .nav, .drawer, .hero__bg, .hero__scrim, .marq, .vcar, .hero__scroll, body::after { display: none !important; }
  .sec { padding-block: 1.5rem; }
}