/* ==========================================================================
   Iriscoat Auto Studio — styles.css  (Level 2: dark showroom + readout panels)
   Fictional demo site. Plain CSS, no build step.

   Look: a near-black showroom with a faint blue measuring grid. Content sits on
   "readout" panels: see-through, ice-blue tinted glass that seems to hang in the
   air (soft blur behind, faint border, bright corner brackets, a top edge that
   fades out at both ends, faint scanlines, a soft blue glow cast downward).
   One accent colour: ice blue. The holographic rainbow survives only as a tiny
   accent (the logo mark and the underline under a few key words).

   Contents
   1.  Design tokens
   2.  Base and reset
   3.  Layout: container + 12-column grid
   4.  The readout panel
   5.  Shared pieces: labels, holo word, icons, numbers, placeholders
   6.  Buttons and links
   7.  Header and mobile menu
   8.  Hero
   9.  Products we apply (maker logos)
   10. Section heads
   11. Services (one compact readout)
   12. Reviews
   13. How it works
   14. About us
   15. Contact us
   17. Quote form
   19. Footer
   20. Mobile sticky bar
   21. Scroll reveals
   22. Reduced motion
   ========================================================================== */


/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
  color-scheme: dark;

  /* Colour: surfaces */
  --ink-0: #05080C;          /* page base: near-black, a touch of blue */
  --ink-1: #08101A;          /* raised base (header, menus, bars) */
  --glass-top: rgba(143, 217, 255, 0.08);   /* readout glass, top of the gradient */
  --glass-bottom: rgba(143, 217, 255, 0.025);
  --glass-line: rgba(143, 217, 255, 0.16);  /* faint panel border */
  --glass-line-hi: rgba(143, 217, 255, 0.34);
  --grid-line: rgba(143, 217, 255, 0.04);   /* page measuring grid */
  --rule: rgba(143, 217, 255, 0.12);        /* hairlines inside content */

  /* Colour: ink (all checked against --ink-0 and the glass) */
  --text: #EAF3FA;           /* headings and strong text (17:1) */
  --text-2: #D7E8F4;         /* body text: bright ice-white (Level 5, Chaz: no grey) */
  --text-3: #A9C0D2;         /* hints and fine print */

  /* Colour: the one accent */
  --ice: #8FD9FF;            /* light futuristic blue */
  --ice-soft: rgba(143, 217, 255, 0.55);
  --ice-ink: #03121C;        /* text on solid ice (13:1) */
  --ice-glow: rgba(79, 179, 255, 0.22);

  --focus: var(--ice);
  --error: #FF9A90;          /* error text on dark (8.9:1) */
  --error-tint: rgba(255, 154, 144, 0.08);

  /* Colour: holographic stops (tiny accent only, never behind text) */
  --holo-aqua: #9EE7F0;
  --holo-lilac: #B9A8F5;
  --holo-pink: #F5B8D9;
  --holo-champagne: #F9E3A3;
  --holo-mint: #A8F0C8;

  /* Sheen state: updated by script.js (pointer + scroll), static otherwise */
  --holo-angle: 120deg;
  --holo-x: 30%;
  --holo-y: 50%;
  --holo-size: 300% 300%;
  --holo-gradient: linear-gradient(
    var(--holo-angle),
    var(--holo-aqua) 0%,
    var(--holo-lilac) 22%,
    var(--holo-pink) 44%,
    var(--holo-champagne) 66%,
    var(--holo-mint) 86%,
    var(--holo-aqua) 100%
  );

  /* Type */
  --font-sans: "Manrope", "Segoe UI", system-ui, sans-serif;            /* copy */
  --font-display: "Michroma", "Manrope", "Segoe UI", sans-serif;         /* h1, h2 + wordmark (one weight: 400) */
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --text-body: 1rem;                                        /* 16px phone */
  --text-small: 0.875rem;
  --text-label: 0.75rem;
  --text-lede: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  --text-display: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
  --text-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.375rem);
  --text-h3: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  --leading-body: 1.6;
  --leading-tight: 1.22;   /* Michroma is wide and tall: needs air */
  --tracking-tight: -0.01em;
  --tracking-label: 0.16em;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;
  --section-pad: clamp(4.5rem, 3rem + 6vw, 9rem);

  /* Layout */
  --container: 1200px;      /* the one content width: header, hero and every section */
  --gutter: 1rem;
  --grid-gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);
  --header-h: 64px;
  --mobile-bar-h: 68px;

  /* Radii: readouts are nearly square; pills only for small controls */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-pill: 999px;

  /* Depth: light from the panel falls downward onto the page */
  --glow-rest: 0 24px 60px -28px var(--ice-glow);
  --glow-hover: 0 30px 70px -24px rgba(79, 179, 255, 0.36);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur: 280ms;
  --dur-reveal: 760ms;
}

@media (min-width: 600px) {
  :root {
    --text-body: 1.0625rem;  /* 17px */
    --gutter: 1.5rem;
  }
}

@media (min-width: 1080px) {
  :root {
    --header-h: 76px;
    --gutter: 2.5rem;
  }
}

@media (min-width: 1280px) {
  :root { --text-body: 1.0625rem; } /* Sora runs large: 17px */
}



/* ==========================================================================
   2. Base and reset
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ink-0);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  position: relative;
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The showroom: a faint blue measuring grid, brightest near the top of the
   screen and fading out toward the edges, plus one soft cold light overhead.
   Fixed, so content glides over it. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body::before {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  -webkit-mask: radial-gradient(ellipse 85% 75% at 50% 30%, #000 30%, transparent 100%);
  mask: radial-gradient(ellipse 85% 75% at 50% 30%, #000 30%, transparent 100%);
}
body::after {
  background: radial-gradient(ellipse 60% 45% at 65% -10%, rgba(79, 179, 255, 0.09), transparent 70%);
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;   /* Michroma has one weight; never fake-bold it */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: balance;
}

h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-h3);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--text); font-weight: 600; }

a { color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

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

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

/* Browser surfaces carry the palette too */
::selection { background: rgba(143, 217, 255, 0.28); color: var(--text); }
html { scrollbar-color: rgba(143, 217, 255, 0.28) var(--ink-0); }
input, textarea { caret-color: var(--ice); }

/* Focus: always visible for keyboard users */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

main:focus { outline: none; }

/* Anchored sections clear the fixed header */
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

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

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--ice);
  color: var(--ice-ink);
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus-visible {
  transform: none;
  outline-color: var(--text);
}


/* ==========================================================================
   3. Layout: container + 12-column grid
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}
/* Mobile-first: every grid child spans the full width */
.grid-12 > * { grid-column: 1 / -1; }

.section { padding-block: var(--section-pad); }
/* Alternate sections: a barely-there band of cold light, so the grid still shows */
.section--alt {
  background: linear-gradient(180deg, transparent, rgba(143, 217, 255, 0.022) 18%, rgba(143, 217, 255, 0.022) 82%, transparent);
}


/* ==========================================================================
   4. The readout panel
   Used sparingly, only where a box earns it: the hero panel, the services
   readout, the reviews readout, the quote form, the mobile menu and bar.

   Layers:
   - element:   tinted glass gradient + faint scanlines, blur of what's behind,
                1px faint border, downward blue glow
   - ::before:  four bright corner brackets
   - ::after:   bright top edge that fades out at both ends
   ========================================================================== */
.hero-panel,
.strip,
.svc-panel,
.reviews-panel,
.quote-card,
.contact-panel,
.mobile-menu,
.mobile-bar {
  --bracket: var(--ice-soft);
  --bracket-len: 14px;
  --bracket-inset: 6px;
  position: relative;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(0deg, rgba(143, 217, 255, 0.028) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  box-shadow: var(--glow-rest);
}

/* Corner brackets: eight short strokes, one L in each corner */
.hero-panel::before,
.strip::before,
.svc-panel::before,
.reviews-panel::before,
.quote-card::before,
.contact-panel::before {
  content: "";
  position: absolute;
  inset: var(--bracket-inset);
  pointer-events: none;
  background:
    linear-gradient(var(--bracket), var(--bracket)) left top / var(--bracket-len) 1px,
    linear-gradient(var(--bracket), var(--bracket)) left top / 1px var(--bracket-len),
    linear-gradient(var(--bracket), var(--bracket)) right top / var(--bracket-len) 1px,
    linear-gradient(var(--bracket), var(--bracket)) right top / 1px var(--bracket-len),
    linear-gradient(var(--bracket), var(--bracket)) left bottom / var(--bracket-len) 1px,
    linear-gradient(var(--bracket), var(--bracket)) left bottom / 1px var(--bracket-len),
    linear-gradient(var(--bracket), var(--bracket)) right bottom / var(--bracket-len) 1px,
    linear-gradient(var(--bracket), var(--bracket)) right bottom / 1px var(--bracket-len);
  background-repeat: no-repeat;
  transition: inset var(--dur) var(--ease-out), opacity var(--dur) var(--ease);
}

/* Bright top edge, fading out toward both corners */
.hero-panel::after,
.strip::after,
.svc-panel::after,
.reviews-panel::after,
.quote-card::after,
.contact-panel::after,
.mobile-menu::after,
.mobile-bar::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(200, 238, 255, 0.95) 35%, rgba(200, 238, 255, 0.95) 65%, transparent);
  opacity: 0.75;
  transition: opacity var(--dur) var(--ease), left var(--dur) var(--ease-out), right var(--dur) var(--ease-out);
}

/* Browsers without backdrop blur get a slightly denser glass so text stays easy to read */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-panel,
  .svc-panel,
  .reviews-panel,
  .quote-card,
  .mobile-menu,
  .mobile-bar { background-color: rgba(8, 16, 26, 0.92); }
}


/* ==========================================================================
   5. Shared pieces
   ========================================================================== */

/* Small readout label (Geist Mono) with an ice tick */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ice);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1px;
  background: var(--ice);
}

/* Holographic underline under key headline words (the tiny holo accent).
   The gradient sits in the bottom padding, below the descenders. */
.holo-word {
  padding-bottom: 0.08em;
  background-image: var(--holo-gradient);
  background-repeat: no-repeat;
  background-size: 300% 2px;
  background-position: var(--holo-x) 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Phone numbers and other figures: Geist Mono, tabular */
.num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Line icons (inline SVG) */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--lg { width: 1.75rem; height: 1.75rem; stroke-width: 1.3; color: var(--ice); }
/* Phosphor icons (MIT) are filled outlines: colour comes from fill, not stroke */
.icon.ph { fill: currentColor; stroke: none; }
.icon--lg.ph { width: 2rem; height: 2rem; }

/* ==========================================================================
   6. Buttons and links
   ========================================================================== */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 48px;
  padding: 0 1.4em;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--sm { min-height: 40px; padding: 0 1.05em; font-size: 0.9375rem; }
.btn--lg { min-height: 54px; padding: 0 1.6em; font-size: 1.0625rem; }

/* Primary: solid ice with dark ink; the glow below brightens on hover */
.btn--primary,
.btn--light {
  background: var(--ice);
  color: var(--ice-ink);
  box-shadow: 0 10px 30px -12px rgba(79, 179, 255, 0.55);
}
.btn--primary:hover,
.btn--light:hover,
.btn--primary:focus-visible,
.btn--light:focus-visible {
  background: #B4E6FF;
  box-shadow: 0 16px 40px -12px rgba(79, 179, 255, 0.75);
}

/* Ghost: glass outline */
.btn--ghost,
.btn--ghost-light {
  color: var(--text);
  background: rgba(143, 217, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(143, 217, 255, 0.38);
}
.btn--ghost:hover,
.btn--ghost-light:hover,
.btn--ghost:focus-visible,
.btn--ghost-light:focus-visible {
  background: rgba(143, 217, 255, 0.1);
  box-shadow: inset 0 0 0 1px var(--ice), 0 12px 30px -14px rgba(79, 179, 255, 0.5);
}

/* Text link with arrow */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--ice);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  text-decoration-color: rgba(143, 217, 255, 0.35);
  transition: text-decoration-color var(--dur) var(--ease);
}
.text-link .icon { transition: transform var(--dur) var(--ease-out); }
.text-link:hover { text-decoration-color: var(--ice); }
.text-link:hover .icon { transform: translateX(3px); }

/* Inline links in running text */
.section-intro a,
.area-note a,
.faq-a a,
.quote-intro a,
.footer-contact a {
  color: var(--ice);
  font-weight: 500;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: rgba(143, 217, 255, 0.4);
}
.section-intro a:hover,
.area-note a:hover,
.faq-a a:hover,
.quote-intro a:hover,
.footer-contact a:hover { text-decoration-color: var(--ice); }


/* ==========================================================================
   7. Header and mobile menu
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  color: var(--text);
}

/* Dark glass layer that fades in after scrolling */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 12, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  border-bottom: 1px solid var(--glass-line);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.site-header[data-state="solid"]::before,
.site-header[data-menu="open"]::before { opacity: 1; }

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 100%;
}

/* Wordmark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
/* Iris aperture: a ring, six blade edges and a small holographic opening */
.brand-mark {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: var(--ice);
  stroke-width: 1.3;
  stroke-linecap: round;
  overflow: visible;
  transition: transform 900ms var(--ease-out);
}
.brand:hover .brand-mark { transform: rotate(60deg); }
.brand-word {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  margin-right: -0.18em;   /* trailing tracking */
}

/* Desktop nav */
.primary-nav { display: none; margin-left: auto; }
.nav-list { display: flex; gap: var(--space-6); }
.nav-list a {
  position: relative;
  display: block;
  padding: var(--space-2) 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--ice);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav-list a:hover { color: var(--text); }
.nav-list a:hover::after { transform: scaleX(1); }
/* Level 3: the link for the section you are reading stays underlined */
.nav-list a[aria-current="true"] { color: var(--text); }
.nav-list a[aria-current="true"]::after { transform: scaleX(1); box-shadow: 0 0 10px 1px rgba(143, 217, 255, 0.55); }
.mobile-nav-list a[aria-current="true"] { color: var(--ice); }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}
.header-phone {
  display: none;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9375rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
}
.header-phone .icon { color: var(--ice); }
.header-phone:hover { color: var(--ice); }

/* Hamburger */
.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(143, 217, 255, 0.05);
  color: inherit;
  box-shadow: inset 0 0 0 1px rgba(143, 217, 255, 0.38);
  cursor: pointer;
}
.menu-toggle .icon { width: 1.35rem; height: 1.35rem; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 359px) {
  .header-cta { display: none; }
}
@media (max-width: 420px) {
  .header-actions { gap: var(--space-2); }
  .brand { gap: 0.45rem; }
  .brand-word { font-size: 0.8125rem; letter-spacing: 0.14em; }
}

@media (min-width: 1080px) {
  .primary-nav { display: block; }
  .header-actions { margin-left: var(--space-6); gap: var(--space-5); }
  .menu-toggle { display: none; }
}

@media (min-width: 1200px) {
  .header-phone { display: inline-flex; }
}

/* Mobile menu panel: a readout dropping from the header */
.mobile-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 6px;
  right: 6px;
  max-height: calc(100vh - var(--header-h) - 12px);
  max-height: calc(100svh - var(--header-h) - 12px);
  overflow-y: auto;
  padding: var(--space-2) var(--space-5) var(--space-6);
  background-color: rgba(8, 16, 26, 0.86);
  color: var(--text);
}
.mobile-menu[hidden] { display: none; }
.mobile-nav-list a {
  display: block;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.mobile-menu-actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
@media (min-width: 1080px) {
  .mobile-menu { display: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .mobile-menu:not([hidden]) { animation: menu-in var(--dur) var(--ease-out); }
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-8px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}


/* ==========================================================================
   8. Hero — full-bleed car on a dark showroom floor (the draft-1 hero, back in
      iteration 2), nothing layered over the car

   Image: images/hero-car-cut-*.webp|png, 3648 x 1520: the car re-shot in a dark
   showroom with a real shadow and floor reflection (images/reshoot/), its dark
   background fading out at the left, top and bottom (../level2-tools/fit-reshoot-to-hero.py).
   In that frame the car fills 42.8%–96.6% of the width and 31%–77% of the
   height; everything left of 42.8% and above 31% is open space.

   Layouts:
   - phone (< 700px): cropped to 7:5 around the car, panel below it;
   - tablet (700–1279px): 2.2:1, panel below it;
   - laptop and desktop (1280px+): the image is right-anchored at the hero's
     height H, so the car begins 1.3728 x H in from the right edge. The panel
     starts where the logo starts (the content edge) and H is chosen so the car
     always begins a 2.5rem gap after the panel ends:
       H = (screen width - panel right edge - 2.5rem) / 1.3728,
     capped at the screen height and 980px.
   ========================================================================== */
.hero {
  --hero-ratio: 7 / 5;
  --hero-focus: 97% 50%;   /* object-position that centres the whole car in frame */

  position: relative;
  isolation: isolate;
  width: 100%;
}

.hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--hero-ratio);
  overflow: hidden;
  /* the showroom behind the car: a cold overhead light falling to black */
  background: radial-gradient(ellipse 70% 80% at 70% 35%, rgba(79, 179, 255, 0.10), transparent 70%);
}
.hero-media picture { display: contents; }

.hero-photo,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus);
}

/* The car settles into place once, on load */
@media (prefers-reduced-motion: no-preference) {
  .hero-photo { animation: car-in 1400ms var(--ease-out) both; }
}
@keyframes car-in {
  from { opacity: 0; filter: blur(6px) brightness(0.6); transform: translateX(1.5%); }
  to   { opacity: 1; filter: none; transform: none; }
}

.hero-content {
  position: relative;
  padding-top: var(--space-5);
  padding-bottom: var(--space-8);
}

/* All hero text sits on this readout */
.hero-panel {
  max-width: 50rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 1rem + 3vw, 3.25rem);
  color: var(--text);
  text-align: center;
  --bracket: var(--ice);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-panel { animation: panel-in 1100ms 250ms var(--ease-out) both; }
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

.hero-panel .eyebrow { justify-content: center; }

/* Level 3: a small pill badge above the headline (location first) */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 var(--space-4);
  padding: 0.35rem 0.85rem 0.35rem 0.65rem;
  border: 1px solid rgba(143, 217, 255, 0.35);
  border-radius: var(--radius-pill);
  background: rgba(143, 217, 255, 0.08);
  box-shadow: 0 8px 22px -12px rgba(79, 179, 255, 0.6);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ice);
}
.hero-badge .icon { width: 0.95rem; height: 0.95rem; }
.hero-panel h1 {
  font-size: var(--text-display);
  line-height: 1.28;   /* room for the holo underline when the headline wraps */
  margin-bottom: var(--space-5);
}
.hero-lede {
  max-width: 38ch;
  margin: 0 auto var(--space-6);
  font-size: var(--text-lede);
  color: var(--text-2);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

@media (max-width: 599px) {
  .hero-actions .btn { width: 100%; }
}

/* Tablet: wider crop, panel still below the car */
@media (min-width: 700px) {
  .hero {
    --hero-ratio: 2.2 / 1;
    --hero-focus: 100% 50%;
  }
  .hero-content { padding-top: var(--space-6); padding-bottom: var(--space-10); }
}

/* Laptop and desktop: car right-anchored, panel on the left at the logo's edge */
@media (min-width: 1280px) {
  .hero {
    --panel-w: 29rem;   /* Level 3: room for the two buttons on one row */
    /* the content edge (where the logo starts), then the panel's right edge */
    --content-left: max(var(--gutter), (100vw - var(--container)) / 2);
    --panel-right: calc(var(--content-left) + var(--panel-w));
  }
  /* how far the service strip rises into the hero; on :root because the strip is the hero's sibling */
  :root { --strip-overlap: 0rem; }   /* Level 5: the service strip is gone */
  .hero-media {
    aspect-ratio: auto;
    height: min(100svh, 980px, calc((100vw - var(--panel-right) - 2.5rem) / 1.3728));
  }
  .hero-photo,
  .hero-video {
    left: auto;
    right: 0;
    width: auto;
    max-width: none;
    height: 100%;
    object-fit: fill;   /* the frame's own 2.4:1 shape at the hero height */
  }
  .hero-content {
    position: absolute;
    inset: var(--header-h) 0 var(--strip-overlap) 0;
    display: flex;
    align-items: center;
    padding-block: var(--space-4);
  }
  .hero-panel {
    width: var(--panel-w);
    max-width: none;
    margin: 0;
    padding: var(--space-6) 1.5rem;
    text-align: left;
  }
  .hero-panel .eyebrow { justify-content: flex-start; margin-bottom: var(--space-3); }
  .hero-badge { margin-bottom: var(--space-4); }
  .hero-panel h1 { font-size: clamp(1.75rem, 0.9rem + 1.2vw, 2.25rem); margin-bottom: var(--space-4); }
  .hero-lede { margin: 0 0 var(--space-5); font-size: 1rem; }
  /* Level 3: the two buttons sit side by side, filled + outlined */
  .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: var(--space-2); }
  .hero-actions .btn--lg { flex: 1 1 auto; min-height: 50px; padding: 0 1.05em; font-size: 1rem; }
}


/* ==========================================================================
   8b. Service strip (Level 3) — four core services in one glass readout across
   the bottom edge of the hero. On laptops and desktops it rises into the hero by
   --strip-overlap, which only ever covers the floor glow below the car.
   ========================================================================== */
.hero-strip {
  position: relative;
  z-index: 2;
  padding-bottom: var(--space-8);
}
.strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.strip li + li { border-top: 1px solid var(--rule); }
.strip-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-4);
  row-gap: 0.15rem;
  align-items: center;
  height: 100%;
  padding: var(--space-5);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.strip-icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(143, 217, 255, 0.4);
  border-radius: 50%;
  background: rgba(143, 217, 255, 0.08);
  color: var(--ice);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.strip-item strong {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}
.strip-item span:last-child { font-size: 0.875rem; line-height: 1.45; color: var(--text-2); }
.strip-item:hover,
.strip-item:focus-visible { background: rgba(143, 217, 255, 0.05); }
.strip-item:hover strong { color: var(--ice); }
.strip-item:hover .strip-icon,
.strip-item:focus-visible .strip-icon {
  background: rgba(143, 217, 255, 0.16);
  box-shadow: 0 10px 24px -10px rgba(79, 179, 255, 0.7);
}

@media (min-width: 640px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip li + li { border-top: 0; }
  .strip li:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .strip li:nth-child(2n) { border-left: 1px solid var(--rule); }
}
@media (min-width: 1080px) {
  .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .strip li:nth-child(n + 3) { border-top: 0; }
  .strip li + li { border-left: 1px solid var(--rule); }
  .strip-item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    row-gap: 0.35rem;
    align-content: start;
    padding: var(--space-6) var(--space-5);
  }
  .strip-icon { grid-row: auto; margin-bottom: var(--space-3); }
}
@media (min-width: 1280px) {
  .hero-strip { margin-top: calc(-1 * var(--strip-overlap)); }
}


/* ==========================================================================
   9. Products we apply — a quiet row of maker logos (fictional brands)
   ========================================================================== */
.makers {
  padding-block: var(--space-8);
  border-block: 1px solid var(--rule);
}
.makers-inner {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
.makers-title {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ice);
}
.maker-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-6);
}
.maker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-3);
  line-height: 1;
  transition: color var(--dur) var(--ease);
}
.maker:hover { color: var(--text); }
.maker svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.maker-name { font-size: 1.125rem; color: inherit; }
.maker-kind {
  align-self: flex-end;
  margin-bottom: 0.1rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.8;
}
/* each maker gets its own lettering, so the row reads as five brands */
.maker--kyrell .maker-name  { font-weight: 700; letter-spacing: 0.3em; font-size: 1rem; }
.maker--ostrand .maker-name { font-weight: 500; letter-spacing: -0.045em; font-size: 1.375rem; }
.maker--velmira .maker-name { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.22em; font-size: 0.9375rem; }
.maker--quillon .maker-name { font-weight: 600; letter-spacing: -0.02em; font-size: 1.25rem; }
.maker--brask .maker-name   { display: inline-block; font-weight: 700; letter-spacing: 0.04em; font-size: 1.1875rem; transform: skewX(-8deg); }

.makers-note {
  font-size: var(--text-small);
  color: var(--text-3);
}
@media (min-width: 1080px) {
  .makers-inner { grid-template-columns: auto 1fr; column-gap: var(--space-8); }
  .makers-note { grid-column: 2; margin-top: calc(-1 * var(--space-2)); text-align: right; font-size: var(--text-label); }
}


/* ==========================================================================
   10. Section heads
   ========================================================================== */
.section-head {
  row-gap: var(--space-4);
  align-items: end;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.section-head h2 { font-size: var(--text-h2); }
.section-intro {
  max-width: 44ch;
  font-size: var(--text-lede);
}

@media (min-width: 900px) {
  .section-head-title { grid-column: 1 / span 7; }
  .section-intro { grid-column: 8 / -1; }
}


/* ==========================================================================
   11. Services — one compact readout, six rows (two columns on wider screens)
   Each row is a link that pre-ticks that service in the quote form.
   ========================================================================== */
.svc-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-2);
}
.svc-panel li + li { border-top: 1px solid var(--rule); }
.svc-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) clamp(0.75rem, 0.4rem + 1.2vw, 1.5rem);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.svc-text { display: grid; gap: 0.15rem; }
.svc-text strong {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  transition: color var(--dur) var(--ease);
}
.svc-text span { font-size: 0.9375rem; color: var(--text-2); }
.svc-arrow {
  color: var(--ice);
  opacity: 0.5;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease);
}
.svc-row:hover,
.svc-row:focus-visible { background: rgba(143, 217, 255, 0.05); }
.svc-row:hover strong { color: var(--ice); }
.svc-row:hover .svc-arrow,
.svc-row:focus-visible .svc-arrow { opacity: 1; transform: translateX(4px); }
.service-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--glass-line-hi);
  border-radius: var(--radius-sm);
  background: rgba(143, 217, 255, 0.06);
  color: var(--ice);
}

@media (min-width: 800px) {
  .svc-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
  .svc-panel li + li { border-top: 0; }
  .svc-panel li:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}


/* ==========================================================================
   12. Reviews — one readout, three quotes side by side
   ========================================================================== */
.reviews-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.review {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
.review + .review { border-top: 1px solid var(--rule); }
.review blockquote { margin: 0; }
.review blockquote p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
}
.review figcaption {
  display: grid;
  gap: 0.2rem;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}
.review figcaption strong { font-weight: 600; }
.review figcaption span {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  color: var(--text-3);
}
@media (min-width: 900px) {
  .reviews-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .review + .review { border-top: 0; border-left: 1px solid var(--rule); }
}


/* ==========================================================================
   13. How it works
   ========================================================================== */
.steps { row-gap: var(--space-8); counter-reset: none; }
.step {
  position: relative;
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}
/* A short ice segment on each step's top rule */
.step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3.5rem;
  height: 1px;
  background: var(--ice);
  box-shadow: 0 0 12px 1px rgba(143, 217, 255, 0.45);
}
.step-num {
  display: block;
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ice);
}
.step .icon { margin-bottom: var(--space-4); }
.step h3 { margin-bottom: var(--space-2); }

@media (min-width: 640px) {
  .steps > li { grid-column: span 6; }
}
@media (min-width: 1080px) {
  .steps > li { grid-column: span 3; }
}


/* ==========================================================================
   14. About us — heading on the left, a short story and three plain promises
   ========================================================================== */
.about { row-gap: var(--space-6); align-items: start; }
.about-head h2 { font-size: var(--text-h2); }
.about-body { max-width: 62ch; }
.about-body > p { font-size: var(--text-lede); }
.about-points {
  display: grid;
  gap: 0;
  margin-top: var(--space-6);
  border-top: 1px solid var(--rule);
}
.about-points li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
  color: var(--text);
}
.about-points li::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1px;
  background: var(--ice);
  box-shadow: 0 0 10px 1px rgba(143, 217, 255, 0.5);
}
@media (min-width: 960px) {
  .about-head { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  .about-body { grid-column: 7 / -1; }
}


/* ==========================================================================
   15. Contact us — one readout, three facts (no invented address or hours)
   ========================================================================== */
.contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}
.contact-item {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
.contact-item + .contact-item { border-top: 1px solid var(--rule); }
.contact-item dt {
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ice);
}
.contact-item dd { margin: 0; color: var(--text); }
.contact-big {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  color: var(--text);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.contact-big:hover { color: var(--ice); }
@media (min-width: 900px) {
  .contact-panel { grid-template-columns: 1.1fr 1fr 1fr; }
  .contact-item + .contact-item { border-top: 0; border-left: 1px solid var(--rule); }
}


/* ==========================================================================
   17. Quote form
   ========================================================================== */
.quote { row-gap: var(--space-6); align-items: start; }
#quote { padding-bottom: calc(var(--section-pad) + var(--space-6)); }
.quote-intro h2 { font-size: var(--text-h2); margin-bottom: var(--space-5); }
.quote-intro p { max-width: 40ch; }
.quote-intro em { color: var(--text); font-style: normal; font-family: var(--font-mono); font-size: 0.9em; }
.quote-call { font-size: var(--text-lede); }

@media (min-width: 1080px) {
  .quote-intro { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  .quote-card { grid-column: 6 / -1; }
}

.quote-card { padding: clamp(1.25rem, 0.8rem + 2vw, 2.75rem); }

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
@media (min-width: 700px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field label:not(.choice),
.field legend {
  display: block;
  margin-bottom: 0.45rem;
  padding: 0;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--text);
}
.optional {
  margin-left: 0.4rem;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.optional[hidden] { display: none; }

.hint {
  margin: 0.4rem 0 0;
  font-size: var(--text-small);
  color: var(--text-3);
}

.control { position: relative; border-radius: var(--radius-sm); }

.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(143, 217, 255, 0.3);   /* 3:1+ against the glass */
  border-radius: var(--radius-sm);
  background: rgba(3, 8, 14, 0.55);
  color: var(--text);
  font-size: 1rem;   /* 16px stops iOS zooming on focus */
  line-height: 1.4;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(143, 217, 255, 0.5); }
.field textarea { min-height: 120px; resize: vertical; }
.field select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FD9FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.15rem;
  cursor: pointer;
}
.field select option { background: var(--ink-1); color: var(--text); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--ice);
  outline: none;
  background-color: rgba(3, 8, 14, 0.75);
  box-shadow: 0 0 0 3px rgba(143, 217, 255, 0.25);
}
.field [aria-invalid="true"] { border-color: var(--error) !important; }

/* Checkbox and radio tiles */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  gap: var(--space-2);
}
.choice-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.7rem 0.95rem;
  border: 1px solid rgba(143, 217, 255, 0.3);
  border-radius: var(--radius-sm);
  background: rgba(3, 8, 14, 0.4);
  font-weight: 400;
  line-height: 1.3;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.choice:hover { border-color: rgba(143, 217, 255, 0.5); }
.choice input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--ice);
  cursor: pointer;
}
.choice:has(input:checked) {
  border-color: var(--ice);
  background: rgba(143, 217, 255, 0.1);
  box-shadow: inset 0 0 0 1px var(--ice);
}
.choice:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(143, 217, 255, 0.25); }
.choice input:focus-visible { outline-offset: 2px; }
fieldset[aria-invalid="true"] .choice { border-color: var(--error); }

/* Inline errors */
.field-error {
  margin: 0.45rem 0 0;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--error);
}
.field-error:empty { display: none; }
.field-error:not(:empty)::before { content: "! "; }

/* Error summary (kept in the accessibility tree even when empty) */
.form-summary {
  margin-bottom: 0;
  border-radius: var(--radius-sm);
}
.form-summary:not(:empty) {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid rgba(255, 154, 144, 0.4);
  background: var(--error-tint);
}
.form-summary h3 {
  margin-bottom: var(--space-2);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--error);
}
.form-summary ul { list-style: disc; padding-left: 1.2rem; }
.form-summary li { margin-top: 0.2rem; }
.form-summary a {
  color: var(--error);
  font-weight: 500;
  text-underline-offset: 0.2em;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.form-fineprint {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.04em;
  color: var(--text-3);
}
@media (max-width: 479px) {
  .form-actions .btn { width: 100%; }
}

/* Demo confirmation */
.form-success {
  position: relative;
  padding-top: var(--space-5);
}
.form-success::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4rem;
  height: 1px;
  background: var(--ice);
  box-shadow: 0 0 12px 1px rgba(143, 217, 255, 0.5);
}
.form-success-title { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); margin-bottom: var(--space-4); }
.form-success p { max-width: 52ch; }
.form-success .btn { margin-top: var(--space-4); }


/* ==========================================================================
   19. Footer
   ========================================================================== */
.site-footer {
  padding-block: var(--space-10) var(--space-8);
  background: rgba(3, 6, 10, 0.7);
  border-top: 1px solid var(--rule);
  font-size: 0.9688em;
}
.footer-grid { row-gap: var(--space-6); }
.footer-brand .brand { color: var(--text); }
.footer-brand p { margin-top: var(--space-3); max-width: 30ch; }
.footer-title {
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ice);
}
.footer-nav li,
.footer-cities li { margin-bottom: var(--space-2); }
.footer-nav a {
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.footer-nav a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--ice); }
.footer-note {
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  font-size: var(--text-small);
  color: var(--text-3);
}

@media (min-width: 640px) {
  .footer-brand { grid-column: 1 / -1; }
  .footer-nav,
  .footer-contact,
  .footer-cities { grid-column: span 4; }
}
@media (min-width: 1080px) {
  .footer-brand { grid-column: 1 / span 4; }
  .footer-nav { grid-column: 6 / span 2; }
  .footer-contact { grid-column: 8 / span 2; }
  .footer-cities { grid-column: 10 / span 3; }
}
.footer-note { grid-column: 1 / -1; }


/* ==========================================================================
   20. Mobile sticky bar (phones and small tablets only)
   ========================================================================== */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-2);
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  border-width: 1px 0 0;
  border-radius: 0;
  background-color: rgba(5, 8, 12, 0.82);
  box-shadow: 0 -18px 40px -24px rgba(79, 179, 255, 0.35);
  transform: translateY(110%);
  opacity: 0;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease);
}
.mobile-bar .btn { min-height: 46px; }
.mobile-bar.is-visible { transform: none; opacity: 1; }

@media (max-width: 899px) {
  /* Keep the footer clear of the bar */
  body { padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom)); }
}
@media (min-width: 900px) {
  .mobile-bar { display: none; }
}


/* ==========================================================================
   21. Scroll reveals (only when JS runs and motion is allowed)
   Readouts "power on": they rise a little and come into focus from a soft blur.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    filter: blur(6px);
    transition:
      opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
      transform var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
      filter var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms);
  }
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
  }
}


/* ==========================================================================
   Level 3 iteration 2 — the hero title sits straight on the page (Chaz: no
   borders around it). The readout box, brackets and top edge are switched off
   for the hero only; every other readout keeps them.
   ========================================================================== */
.hero-panel {
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.hero-panel::before,
.hero-panel::after { display: none; }
@media (min-width: 1280px) {
  .hero-panel { padding-left: 0; padding-right: 0; }
  .hero-panel h1 { font-size: clamp(1.9rem, 0.9rem + 1.35vw, 2.4rem); }
}


/* ==========================================================================
   Level 4: hero video, Services screen, About photo, colour preview
   ========================================================================== */

/* Hero video: only shown at 1280px+ when motion is allowed. It sits over the re-shot car's part of the
   3648x1520 frame (right 2688/3648, full height) with the same fades as the still, via a mask. */
.hero-video { display: none; }
@media (min-width: 1280px) and (prefers-reduced-motion: no-preference) {
  .hero-media .hero-video {
    display: block;
    left: auto;
    right: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 2688 / 1520;
    object-fit: cover;
    opacity: 0;
    transition: opacity 900ms var(--ease);
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, rgba(0,0,0,.16) 4.8%, rgba(0,0,0,.5) 9.7%, rgba(0,0,0,.84) 14.5%, #000 19.3%),
      linear-gradient(180deg, transparent 0, rgba(0,0,0,.5) 12.5%, #000 25%, #000 84.9%, rgba(0,0,0,.5) 92.4%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0, rgba(0,0,0,.16) 4.8%, rgba(0,0,0,.5) 9.7%, rgba(0,0,0,.84) 14.5%, #000 19.3%),
      linear-gradient(180deg, transparent 0, rgba(0,0,0,.5) 12.5%, #000 25%, #000 84.9%, rgba(0,0,0,.5) 92.4%, transparent 100%);
    mask-composite: intersect;
  }
  .hero-media.is-video .hero-video { opacity: 1; }
}

/* Services: rows on the left, a photo "screen" on the right (desktop); thumbnails in the rows (phones) */
.svc-explorer { display: grid; gap: var(--space-5); }
.svc-thumb {
  display: block;
  width: 4.5rem;
  height: 4.5rem;      /* fixed, or the grid row stretches it into a tall strip */
  align-self: center;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-line);
}
.svc-explorer .svc-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.svc-explorer .service-icon { display: none; }
.svc-screen { display: none; }

@media (min-width: 1000px) {
  .svc-explorer { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
  .svc-explorer .svc-panel { grid-template-columns: minmax(0, 1fr); }
  .svc-explorer .svc-panel li + li { border-top: 1px solid var(--rule); }
  .svc-explorer .svc-thumb { display: none; }
  .svc-explorer .service-icon { display: inline-grid; }
  .svc-row.is-active { background: rgba(143, 217, 255, 0.07); }
  .svc-row.is-active strong { color: var(--ice); }
  .svc-row.is-active .svc-arrow { opacity: 1; transform: translateX(4px); }

  .svc-screen {
    display: block;
    position: relative;
    margin: 0;
    min-height: 26rem;   /* fills the full height of the service list beside it */
    overflow: hidden;
    border: 1px solid var(--glass-line-hi);
    border-radius: var(--radius-md);
    background: #05080c;
    box-shadow: var(--glow-rest);
  }
  .svc-screen::after {   /* the same bright top edge as the readout panels */
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 238, 255, 0.95) 35%, rgba(200, 238, 255, 0.95) 65%, transparent);
    opacity: 0.75;
  }
  .svc-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 62%;   /* keeps the wheel photo's rim edge out of frame */
    opacity: 0;
    transform: scale(1.03);
    transition: opacity 550ms var(--ease), transform 1200ms var(--ease-out);
  }
  .svc-shot.is-active { opacity: 1; transform: none; }
  /* the wheel photo has AI lettering on the rim's top edge: enlarge it from the bottom so that strip stays out of frame */
  .svc-shot[data-service="wheels"] { transform-origin: 50% 100%; transform: scale(1.2); }
  .svc-shot[data-service="wheels"].is-active { transform: scale(1.17); }
  .svc-screen-label {
    position: absolute;
    left: var(--space-4);
    bottom: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--glass-line-hi);
    border-radius: var(--radius-pill);
    background: rgba(5, 9, 14, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
  }
  .svc-screen-num { color: var(--ice); }
}

/* About photo */
.about-photo {
  grid-column: 1 / -1;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-md);
}
.about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 847 / 750; object-fit: cover; }
@media (min-width: 600px) and (max-width: 959px) { .about-photo img { aspect-ratio: 16 / 9; object-position: 50% 62%; } }
/* Desktop: the photo sits under the heading in the left column, beside the story (the heading is no longer sticky) */
@media (min-width: 960px) {
  .about-head { position: static; }
  .about-body { grid-row: 1 / span 2; }
  .about-photo { grid-column: 1 / span 5; grid-row: 2; }
}

/* Colour preview */
.paint { display: grid; gap: var(--space-5); justify-items: center; }
.paint-stage {
  position: relative;
  width: 100%;
  max-width: 1040px;
  /* cropped wider than the photo (1920x1086) to drop its empty dark ceiling, so the car and the swatches fit on one screen */
  aspect-ratio: 2.25 / 1;
  /* the photos' dark showroom fades into the page on every side */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-composite: intersect;
}
.paint-car {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 78%;
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
.paint-car.is-active { opacity: 1; }
.paint-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.45rem 0.95rem 0.45rem 0.5rem;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-pill);
  background: rgba(143, 217, 255, 0.04);
  color: var(--text-2);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.swatch-dot {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.55), transparent 42%), var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.swatch:hover,
.swatch.is-active { border-color: var(--ice); color: var(--text); background: rgba(143, 217, 255, 0.08); }
.swatch:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.paint-now { margin: 0; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--text-2); }
.paint-now strong { color: var(--ice); font-weight: 500; }
/* Wider screens: the swatches stand in a column beside the car, so the car and every colour fit on one laptop screen */
@media (min-width: 1000px) {
  .paint {
    grid-template-columns: minmax(0, 1fr) 13.5rem;
    grid-template-areas: "stage swatches" "stage now";
    column-gap: var(--space-6);
    row-gap: var(--space-3);
    align-items: center;
    justify-items: stretch;
  }
  .paint-stage { grid-area: stage; max-width: none; aspect-ratio: 2.5 / 1; }
  .paint-swatches { grid-area: swatches; flex-direction: column; flex-wrap: nowrap; align-self: end; }
  .swatch { display: flex; width: 100%; }
  .paint-now { grid-area: now; align-self: start; padding-left: 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-shot, .paint-car { transition: none; }
}



/* ==========================================================================
   Level 5 (Oct 20): holographic buttons, Services panels, brands marquee,
   testimonials, team, footer contact. All written from scratch.
   ========================================================================== */

/* 6. Buttons: a foil edge that drifts through the holo colours, a shine that sweeps across on hover */
.btn { overflow: hidden; }
.btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0.12) 56%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 750ms var(--ease-out);
  pointer-events: none;
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(120%); }
.btn--primary, .btn--light {
  background: linear-gradient(115deg, #8FD9FF 0%, #B6E6FF 38%, #D4CCFF 62%, #9EE7F0 100%) 0 0 / 220% 100%;
  box-shadow: 0 10px 30px -12px rgba(79, 179, 255, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
  transition: background-position 900ms var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.btn--primary:hover, .btn--light:hover, .btn--primary:focus-visible, .btn--light:focus-visible {
  background: linear-gradient(115deg, #8FD9FF 0%, #B6E6FF 38%, #D4CCFF 62%, #9EE7F0 100%) 100% 0 / 220% 100%;
  box-shadow: 0 16px 44px -12px rgba(79, 179, 255, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}
.btn--ghost, .btn--ghost-light { box-shadow: none; background: rgba(143, 217, 255, 0.06); }
.btn--ghost::before, .btn--ghost-light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(115deg, #9EE7F0, #B9A8F5, #F5B8D9, #A8F0C8, #9EE7F0) 0 0 / 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.7;
  transition: background-position 1200ms var(--ease-out), opacity var(--dur) var(--ease);
}
.btn--ghost:hover::before, .btn--ghost:focus-visible::before,
.btn--ghost-light:hover::before, .btn--ghost-light:focus-visible::before { background-position: 100% 0; opacity: 1; }
.btn--ghost:hover, .btn--ghost:focus-visible { box-shadow: 0 12px 30px -14px rgba(79, 179, 255, 0.55); }

/* 7. Services: six photo panels. Desktop: slim spines, the one you point at opens up. Phones: stacked cards. */
.svc-panels { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.svc-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-line);
  color: var(--text);
  text-decoration: none;
  isolation: isolate;
}
.svc-card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 900ms var(--ease-out), filter 600ms var(--ease); }
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 7, 11, 0.05) 30%, rgba(4, 7, 11, 0.88) 100%);
}
.svc-card-num { position: absolute; top: var(--space-4); left: var(--space-4); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ice); letter-spacing: 0.08em; }
.svc-card-spine { display: none; }
.svc-card-body { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); display: grid; gap: 0.35rem; }
.svc-card-name { font-size: 1.25rem; font-weight: 700; }
.svc-card-desc { color: var(--text-2); font-size: 0.9375rem; line-height: 1.45; }
.svc-card-cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; color: var(--ice); font-weight: 600; font-size: 0.9375rem; }
.svc-card-cta .icon { width: 1rem; height: 1rem; transition: transform var(--dur) var(--ease-out); }
.svc-card:hover .svc-card-cta .icon, .svc-card:focus-visible .svc-card-cta .icon { transform: translateX(4px); }
.svc-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (min-width: 640px) and (max-width: 999px) { .svc-panels { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
  .svc-panels { display: flex; gap: 0.75rem; height: clamp(440px, 52vh, 560px); }
  .svc-panel-item { flex: 1 1 0; min-width: 0; transition: flex-grow 650ms var(--ease-out); }
  .svc-panel-item.is-open { flex-grow: 5; }
  .svc-card { height: 100%; aspect-ratio: auto; }
  .svc-card-photo { filter: saturate(0.55) brightness(0.62); }
  .svc-panel-item.is-open .svc-card-photo { filter: none; transform: scale(1.03); }
  .svc-panel-item.is-open .svc-card { border-color: var(--glass-line-hi); box-shadow: var(--glow-rest); }
  .svc-card-spine {
    display: block;
    position: absolute;
    left: 50%;
    bottom: var(--space-5);
    transform: translateX(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    white-space: nowrap;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.02em;
    transition: opacity 300ms var(--ease);
  }
  .svc-card-num { left: 50%; transform: translateX(-50%); transition: left 500ms var(--ease-out), transform 500ms var(--ease-out); }
  .svc-panel-item.is-open .svc-card-num { left: var(--space-5); transform: none; }
  .svc-card-body { left: var(--space-5); right: var(--space-5); bottom: var(--space-5); min-width: 22rem; opacity: 0; transform: translateY(12px); transition: opacity 350ms var(--ease), transform 500ms var(--ease-out); }
  .svc-panel-item.is-open .svc-card-body { opacity: 1; transform: none; transition-delay: 220ms; }
  .svc-panel-item.is-open .svc-card-spine { opacity: 0; }
  .svc-card-name { font-size: 1.5rem; }
  .svc-card-desc { max-width: 32ch; font-size: 1rem; }
}

/* 8. Brands: a marquee that loops on its own and pauses when you point at it */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.maker-list.marquee-track { display: flex; flex-wrap: nowrap; width: max-content; gap: clamp(2.5rem, 5vw, 4.5rem); padding-right: clamp(2.5rem, 5vw, 4.5rem); justify-content: flex-start; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* 9. Testimonials */
.tgrid { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .tgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .tgrid { grid-template-columns: repeat(3, 1fr); } .tcard:nth-child(3n + 2) { transform: translateY(var(--space-6)); } }
.tcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, rgba(143, 217, 255, 0.07), rgba(143, 217, 255, 0.02));
}
.tcard-stars { display: flex; gap: 0.2rem; color: var(--ice); }
.tcard-star { width: 1rem; height: 1rem; fill: currentColor; }
.tcard blockquote { margin: 0; flex: 1; }
.tcard blockquote p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--text); }
.tcard figcaption { display: flex; align-items: center; gap: var(--space-3); }
.tcard-face { width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(143, 217, 255, 0.45); }
.tcard figcaption strong { display: block; font-weight: 700; }
.tcard figcaption span span { display: block; color: var(--text-3); font-size: 0.875rem; }

/* 10. Team */
.team-grid { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card figure { margin: 0 0 var(--space-4); overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--glass-line); }
.team-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 900ms var(--ease-out); }
.team-card:hover img { transform: scale(1.03); }
.team-card h3 { margin: 0; font-size: 1.25rem; }
.team-role { margin: 0.2rem 0 0.5rem; color: var(--ice); font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }
.team-card p:last-child { margin: 0; }
.team-note { margin-top: var(--space-5); color: var(--text-3); font-size: 0.875rem; }

/* 5. Footer: more ways to reach us */
.reach { display: grid; gap: 0.7rem; margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.reach li { display: flex; gap: 0.6rem; align-items: flex-start; }
.reach .icon { color: var(--ice); margin-top: 0.15rem; }
.reach small { color: var(--text-3); }
.social { display: flex; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--text);
  border: 1px solid var(--glass-line);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.social a:hover, .social a:focus-visible { color: var(--ice); border-color: var(--ice); box-shadow: 0 0 18px -4px rgba(143, 217, 255, 0.7); }
.social .icon { width: 1.25rem; height: 1.25rem; }
.contact-item small { color: var(--text-3); }
/* Level 5: four contact items (phone, area, email, shop). 2 x 2 on tablets, one row on wide screens. */
@media (min-width: 900px) and (max-width: 1179px) {
  .contact-panel { grid-template-columns: 1fr 1fr; }
  .contact-item:nth-child(3) { border-left: 0; }
  .contact-item:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}
@media (min-width: 1180px) { .contact-panel { grid-template-columns: 1.1fr 1fr 1.05fr 1.15fr; } }
/* Level 5: the footer contact column holds an email and an address now, so it gets three columns */
@media (min-width: 1080px) {
  .footer-brand { grid-column: 1 / span 3; }
  .footer-nav { grid-column: 5 / span 2; }
  .footer-contact { grid-column: 7 / span 3; }
  .footer-cities { grid-column: 10 / span 3; }
}

/* Level 5 follow-up: the logo mark is the holographic teardrop from Level 1; its colours follow the pointer sheen */
.brand-mark {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 4px 50% 50% 50%;
  background: var(--holo-gradient);
  background-size: var(--holo-size);
  background-position: var(--holo-x) var(--holo-y);
  box-shadow: 0 0 0 1px rgba(234, 243, 250, 0.2), 0 6px 16px -6px rgba(158, 231, 240, 0.7);
  stroke: none;
  transition: transform 900ms var(--ease-out), box-shadow var(--dur) var(--ease);
}
.brand:hover .brand-mark { transform: rotate(90deg); box-shadow: 0 0 0 1px rgba(234, 243, 250, 0.35), 0 0 18px -2px rgba(158, 231, 240, 0.85); }

/* Level 5 follow-up: links glow ice blue on hover instead of underlining */
.nav-list a:hover,
.nav-list a:focus-visible,
.mobile-nav-list a:hover,
.mobile-nav-list a:focus-visible,
.footer-nav a:hover,
.footer-nav a:focus-visible,
.footer-contact a:hover,
.footer-contact a:focus-visible {
  color: var(--ice);
  text-decoration: none;
  text-shadow: 0 0 12px rgba(143, 217, 255, 0.75), 0 0 2px rgba(143, 217, 255, 0.5);
}
.nav-list a:hover::after { transform: scaleX(0); }
.nav-list a[aria-current="true"]:hover::after { transform: scaleX(1); }   /* the current-section marker stays */
.mobile-nav-list a, .footer-nav a { transition: color var(--dur) var(--ease), text-shadow var(--dur) var(--ease); }
.footer-contact a { text-decoration: none; transition: color var(--dur) var(--ease), text-shadow var(--dur) var(--ease); }

/* Level 6: while the car builds itself, the video (and its wireframe poster) replaces the still from the first paint */
@media (min-width: 1280px) and (prefers-reduced-motion: no-preference) {
  .hero-build .hero-media .hero-video { opacity: 1; transition: none; }
  .hero-build .hero-media .hero-photo { opacity: 0; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn::after { display: none; }
  .maker-list.marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .maker-list.marquee-track [aria-hidden="true"] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .svc-panel-item, .svc-card-body, .svc-card-photo, .svc-card-num { transition: none; }
  .tcard:nth-child(3n + 2) { transform: none; }
}

/* ==========================================================================
   22. Reduced motion: no reveals, no lifts, instant states
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  .service-card:hover,
  .service-card:focus-within { transform: none; }
}