/* ============================================================
   Xclusive Auto
   Single stylesheet. Mobile-first. Dark performance.
   Palette: ice blue accent, neutral white text, Helvetica.
   ============================================================ */

:root {
  /* Surfaces — blue-black, not neutral black */
  --ink:        #05080f;
  --ink-2:      #090f1a;
  --panel:      #101d31;
  --panel-2:    #182a44;
  --line:       rgba(150, 200, 245, 0.22);
  --line-soft:  rgba(150, 200, 245, 0.12);

  /* Type */
  --text:       #e9eaed;
  --text-dim:   #a2a8b4;
  --text-mute:  #6f7684;

  /* Accent — ice blue */
  --accent:     #68b6f0;
  --accent-hi:  #9ad2fa;
  --accent-dim: rgba(104, 182, 240, 0.14);
  --btn-fg:     #0a0a0a;   /* text on a filled accent button */

  /* Type scale */
  --f-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body:    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Layout */
  --wrap:      1240px;
  --gut:       20px;
  --radius:    3px;
}

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

/* .ph and a few others set display, which beats the browser's own
   [hidden] rule. Without this the gallery filters cannot hide a tile. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 8.5vw, 5.25rem); font-weight: 800; }
h2 { font-size: clamp(1.85rem, 5.2vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.45rem); letter-spacing: -0.02em; }
h4 { font-size: 1rem; letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

ul { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: 0.45em; }

/* ---------- Utility ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.lede {
  font-size: clamp(1.02rem, 2.1vw, 1.2rem);
  color: var(--text-dim);
  max-width: 60ch;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

.dim { color: var(--text-dim); }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #000;
  padding: 12px 18px;
  z-index: 999;
  font-weight: 700;
}
.skip:focus { left: 8px; top: 8px; }

/* Visible focus for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Header ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 8, 15, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.34rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand span { color: var(--accent); }
.brand small {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  color: var(--text-mute);
  font-weight: 400;
  display: none;
}
/* The separators sit small and low in a mono face. Size them up and lift
   them onto the optical centre of the line. */
.brand small .dot {
  font-size: 1.7em;
  line-height: 0;
  vertical-align: -0.06em;
  color: var(--accent);
  opacity: 0.8;
  margin: 0 0.1em;
  letter-spacing: 0;
}

.nav-toggle {
  background: none;
  border: 1px solid var(--line);
  color: var(--text);
  width: 42px;
  height: 38px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.nav-toggle svg { width: 18px; height: 18px; }
.nav-toggle .x { display: none; }
.nav-toggle[aria-expanded="true"] .x { display: block; }
.nav-toggle[aria-expanded="true"] .bars { display: none; }

.nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
  padding: 8px var(--gut) 22px;
}
.nav[data-open="true"] { display: block; }

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav li { margin: 0; border-bottom: 1px solid var(--line-soft); }

.nav a {
  display: block;
  padding: 13px 2px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-dim);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }

/* The nav CTA is a button, not a nav link. Restate its colour at matching
   specificity so the .nav a rules above cannot grey it out, including on
   hover and on the page it points at. */
.nav a.btn-primary,
.nav a.btn-primary:hover,
.nav a.btn-primary:focus,
.nav a.btn-primary[aria-current="page"] {
  color: var(--btn-fg, #0a0a0a);
}

.nav .btn { margin-top: 18px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-family: var(--f-display);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: var(--btn-fg, #0a0a0a);
}
.btn-primary:hover { background: var(--accent-hi); }

.btn-ghost {
  border-color: var(--line);
  color: var(--text);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-hi); }

.btn-block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* ---------- Sections ---------- */
section { position: relative; }

.sec {
  padding: 72px 0;
  border-top: 1px solid var(--line-soft);
}
.sec-flush { border-top: none; }
.sec-alt {
  background:
    radial-gradient(1100px 560px at 82% 0%, rgba(90, 165, 235, 0.15), transparent 64%),
    radial-gradient(800px 420px at 8% 100%, rgba(70, 130, 200, 0.10), transparent 68%),
    var(--ink-2);
}

.sec-head { max-width: 62ch; margin-bottom: 42px; }
.sec-head.center { margin-left: auto; margin-right: auto; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 64px 0 68px;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1000px 520px at 76% 6%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 68%),
    radial-gradient(860px 580px at 2% 98%, rgba(90, 160, 235, 0.30), transparent 72%);
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero h1 { margin-bottom: 22px; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(96deg,
    var(--accent-hi) 0%,
    var(--accent) 42%,
    color-mix(in srgb, var(--accent) 58%, #000) 78%,
    var(--accent-hi) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-media { margin-top: 44px; }

/* ---------- Full-bleed hero background video ---------- */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;          /* under the glow and under the copy */
  overflow: hidden;
  pointer-events: none;
}
.hero-bg video,
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Push it back so white type stays readable over it */
  filter: brightness(0.72) saturate(1.35) contrast(1.08) hue-rotate(-6deg);
}
/* Scrim: dark at the edges, darkest where the copy sits */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* light blue wash so the footage still belongs to the palette */
    linear-gradient(rgba(38, 104, 180, 0.16), rgba(38, 104, 180, 0.16)),
    /* dark only where the copy sits, then clears fast so the car reads */
    linear-gradient(100deg,
      var(--ink) 2%,
      rgba(6, 14, 28, 0.74) 26%,
      rgba(6, 14, 28, 0.30) 52%,
      rgba(6, 14, 28, 0.04) 76%),
    linear-gradient(180deg, rgba(5, 8, 15, 0.52) 0%, transparent 30%, rgba(5, 8, 15, 0.78) 100%);
}

/* The hero has a video behind it, so it needs height and a floor of its own */
.hero-cinema {
  padding: 44px 0 40px;
  border-bottom: 1px solid var(--line-soft);
}
.hero-cinema .wrap { position: relative; z-index: 2; }
/* The scrim is lighter now, so the copy carries its own soft shadow. */
.hero-cinema h1,
.hero-cinema .lede,
.hero-cinema .eyebrow { text-shadow: 0 2px 22px rgba(0, 0, 0, 0.65); }
.hero-cinema::after { z-index: 1; }

@media (min-width: 900px) {
  .hero-cinema {
    padding: 58px 0 54px;
    min-height: 46vh;
    display: flex;
    align-items: center;
  }
  /* The headline drives most of the hero height, so ease it back
     here rather than shrinking it everywhere. */
  .hero-cinema h1 { font-size: clamp(2.4rem, 4.4vw, 3.5rem); margin-bottom: 0.34em; }
  .hero-cinema .btn-row { margin-top: 22px; }
}

/* Hero variant for interior pages */
.hero-sm { padding: 52px 0 44px; }
.hero-sm h1 { font-size: clamp(2.1rem, 6.5vw, 3.9rem); }

/* ---------- Photo placeholders ---------- */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.022) 0 12px,
      transparent 12px 24px
    ),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  overflow: hidden;
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.045), transparent 62%);
  pointer-events: none;
}
.ph span {
  font-family: var(--f-mono);
  font-size: 0.63rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: rgba(8,9,11,0.72);
  border: 1px solid var(--line-soft);
  padding: 6px 9px;
  border-radius: 2px;
  position: relative;
  z-index: 1;
  max-width: 100%;
}

/* Real media dropped into a .ph frame fills it and hides the placeholder styling */
.ph img,
.ph video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.ph:has(img),
.ph:has(video) { padding: 0; background: var(--panel); }
.ph:has(img)::before,
.ph:has(video)::before { display: none; }

/* Optional caption that sits over real media */
.ph figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 34px 16px 14px;
  background: linear-gradient(transparent, rgba(8, 9, 11, 0.88));
  font-family: var(--f-mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Media credit line */
.media-note {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 12px;
}

.ph-hero   { aspect-ratio: 16 / 10; }
.ph-wide   { aspect-ratio: 16 / 9; }
.ph-square { aspect-ratio: 1 / 1; }
.ph-tall   { aspect-ratio: 4 / 5; }

/* ---------- Trust strip ---------- */
.strip {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background:
    linear-gradient(180deg, rgba(95, 170, 240, 0.20), transparent),
    var(--ink-2);
  padding: 26px 0;
}
.strip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 18px;
}
.strip-item {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  line-height: 1.5;
}
.strip-item b {
  display: block;
  font-family: var(--f-display);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--text);
  font-weight: 700;
  margin-bottom: 3px;
}

/* ---------- Card grids ---------- */
.grid {
  display: grid;
  gap: 18px;
}
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

.card {
  background:
    linear-gradient(180deg, rgba(120, 185, 245, 0.06), transparent 55%),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, background .2s ease;
}
a.card { text-decoration: none; }
a.card:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--panel-2); }

.card .num {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 16px;
}
.card p { color: var(--text-dim); font-size: 0.95rem; }
.card .more {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Service card with photo slot */
.svc { padding: 0; overflow: hidden; }
.svc .ph { border: none; border-bottom: 1px solid var(--line); border-radius: 0; }
.svc-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }

/* ---------- Split ---------- */
.split {
  display: grid;
  gap: 34px;
  align-items: center;
}
/* When one column is much taller than the other, centring drops the short
   one down the page and the two stop looking related. Top-align those. */
.split-top { align-items: start; }
/* Both columns open with an eyebrow, so strip inherited top margin and let
   the grid line them up. Matching the eyebrow height keeps the headings
   below them on the same baseline too. */
.split-top > div > h2:first-child,
.split-top > div > h3:first-child,
.split-top > div > .eyebrow:first-child { margin-top: 0; }
.split-media { order: -1; }

/* ---------- Spec list ---------- */
.specs {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.specs li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
}
.specs dt, .specs .k {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.specs .v { color: var(--text); font-size: 0.96rem; }

/* Checkmark list */
.checks { list-style: none; padding: 0; margin: 22px 0 0; }
.checks li {
  position: relative;
  padding-left: 26px;
  color: var(--text-dim);
  font-size: 0.96rem;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- Process steps ---------- */
.steps { counter-reset: step; display: grid; gap: 0; margin-top: 8px; }
.step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 26px 0;
  border-top: 1px solid var(--line-soft);
}
.step:last-child { border-bottom: 1px solid var(--line-soft); }
.step .n {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  padding-top: 5px;
}
.step h3 { margin-bottom: 6px; }
.step p { color: var(--text-dim); font-size: 0.95rem; margin: 0; }

/* ---------- Gallery ---------- */
.gal {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.gal .ph { aspect-ratio: 4 / 3; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.filters button {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  padding: 9px 15px;
  border-radius: 2px;
  cursor: pointer;
  transition: all .18s ease;
}
.filters button:hover { border-color: var(--accent); color: var(--text); }
.filters button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
}

/* ---------- Quote / testimonial ---------- */
.quote {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 24px;
  max-width: 62ch;
}
.quote p {
  font-size: clamp(1.15rem, 2.8vw, 1.55rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  font-family: var(--f-display);
  font-weight: 500;
}
.quote cite {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); max-width: 74ch; }
.faq details {
  border-bottom: 1px solid var(--line-soft);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  position: relative;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > div {
  padding: 0 0 22px;
  color: var(--text-dim);
  font-size: 0.96rem;
  max-width: 66ch;
}

/* ---------- CTA band ---------- */
.cta {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 65%),
    var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 68px 0;
  text-align: center;
}
.cta .btn-row { justify-content: center; }

/* ---------- Form ---------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.field .hint { font-size: 0.78rem; color: var(--text-mute); letter-spacing: 0; text-transform: none; font-family: var(--f-body); }

input, select, textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 0.98rem;
  padding: 13px 14px;
  transition: border-color .18s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-mute); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { min-height: 128px; resize: vertical; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 19px) 22px, calc(100% - 14px) 22px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.form-note {
  font-size: 0.82rem;
  color: var(--text-mute);
  line-height: 1.6;
}

.form-status {
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  background: var(--accent-dim);
  color: var(--accent-hi);
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 0.9rem;
}

/* ---------- Contact blocks ---------- */
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
}
.contact-list .k {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 5px;
}
.contact-list a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-list a:hover { color: var(--accent-hi); border-color: var(--accent); }

/* Unconfirmed-info token */
.tbd {
  color: var(--accent-hi);
  background: var(--accent-dim);
  border: 1px dashed color-mix(in srgb, var(--accent) 48%, transparent);
  padding: 1px 6px;
  border-radius: 2px;
  font-family: var(--f-mono);
  font-size: 0.85em;
  letter-spacing: 0.04em;
}

/* ---------- Footer ---------- */
.site-foot {
  background:
    radial-gradient(1000px 460px at 50% 100%, rgba(90, 165, 235, 0.16), transparent 72%),
    var(--ink);
  padding: 54px 0 34px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.9rem;
}
.foot-grid { display: grid; gap: 34px; }
.foot-grid h4 {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 400;
  margin-bottom: 14px;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: 9px; }
.foot-grid a { color: var(--text-dim); text-decoration: none; }
.foot-grid a:hover { color: var(--accent-hi); }

.foot-bottom {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ============================================================
   Breakpoints
   ============================================================ */

@media (min-width: 620px) {
  .strip-grid { grid-template-columns: repeat(4, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .gal { grid-template-columns: repeat(2, 1fr); }
  .specs li { grid-template-columns: 190px 1fr; gap: 16px; align-items: baseline; }
  .foot-bottom { grid-template-columns: 1fr auto; align-items: center; }
  .brand small { display: inline; }
}

@media (min-width: 900px) {
  :root { --gut: 32px; }

  .sec { padding: 104px 0; }
  .hero { padding: 92px 0 96px; }
  .hero-sm { padding: 74px 0 62px; }

  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .gal { grid-template-columns: repeat(3, 1fr); gap: 18px; }

  .split { grid-template-columns: 1fr 1fr; gap: 64px; }
  .split-media { order: 0; }
  .split-media-first .split-media { order: -1; }

  .steps { grid-template-columns: repeat(2, 1fr); column-gap: 48px; }
  .step:nth-child(2) { border-top: 1px solid var(--line-soft); }
  .step:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-soft); }

  .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }

  .hero-media { margin-top: 62px; }
}

/* Desktop navigation. Held back to 1140px so eight items plus the larger
   wordmark never crowd each other. */
@media (min-width: 1140px) {
  .nav-toggle { display: none; }
  .nav {
    display: block;
    position: static;
    background: none;
    border: none;
    padding: 0;
  }
  .nav ul { display: flex; align-items: center; gap: 2px; }
  .nav li { border: none; }
  .nav a {
    padding: 8px 11px;
    font-size: 0.84rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .nav a[aria-current="page"] { color: var(--accent-hi); }
  .nav .btn { margin: 0 0 0 12px; padding: 11px 18px; font-size: 0.72rem; }
}

@media (min-width: 1100px) {
  .nav ul { gap: 4px; }
  .nav a { padding: 8px 13px; font-size: 0.86rem; }
  .hero-lead {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 56px;
    align-items: end;
  }
  /* The two columns are bottom-aligned. The h1's own bottom margin was
     hanging below its last line, so the right column sat low by that much.
     Zero it here and let the grid do the aligning. */
  .hero-lead h1 { margin-bottom: 0; }
  /* Nudge for the descender on the last line, so the button row and the
     headline read as sitting on the same baseline rather than measuring
     to the glyph box. */
  .hero-lead > div:last-child { padding-bottom: 0.14em; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Print ---------- */
@media print {
  .site-head, .cta, .site-foot { display: none; }
  body { background: #fff; color: #000; }
}