/* =========================================================
   Vehicle Auto Glass
   Static CSS. No build step, no framework.

   Design read: redesign (preserve) of a local-trade service
   site. Trust-first audience with an urgent problem.
   Dials: VARIANCE 5 / MOTION 4 / DENSITY 5.

   Locks (audited before ship):
   - Accent: amber #b45309 family. One accent, whole site.
   - Radius: cards 14px, inputs 10px, buttons pill. Documented
     rule, applied everywhere.
   - Theme: auto via prefers-color-scheme. No section inverts.
   ========================================================= */

/* ---------- Fonts (self-hosted, no external <link>) ---------- */
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Neutrals: cool slate, one family sitewide */
  --n-0: #ffffff;
  --n-25: #f8fafc;
  --n-50: #f1f5f9;
  --n-100: #e2e8f0;
  --n-200: #cbd5e1;
  --n-400: #64748b;
  --n-600: #475569;
  --n-800: #1e293b;
  --n-900: #0f172a;
  --n-950: #020617;

  /* Single accent. Amber reads as "hazard / attention" to
     drivers and clears AA on both light and dark surfaces. */
  --accent: #b45309;
  --accent-hover: #92400e;
  --accent-soft: #fef3c7;
  --accent-on: #ffffff;

  /* WhatsApp brand green, used only for the WhatsApp control */
  --wa: #1e824a;
  --wa-hover: #17643a;

  /* Semantic */
  --bg: var(--n-0);
  --bg-sunken: var(--n-25);
  --surface: var(--n-0);
  --surface-2: var(--n-50);
  --text: var(--n-900);
  --text-soft: var(--n-600);
  --text-faint: var(--n-400);
  --line: var(--n-100);
  --line-strong: var(--n-200);

  /* Inverted band, used for hero and footer in BOTH themes.
     This is a fixed brand surface, not a theme flip. */
  --ink-bg: var(--n-950);
  --ink-surface: #0b1424;
  --ink-text: #f1f5f9;
  --ink-soft: #94a3b8;
  --ink-line: rgba(255, 255, 255, 0.1);
  --ink-accent: #fbbf24;

  --danger: #b91c1c;
  --danger-bg: #fef2f2;
  --danger-line: #fecaca;
  --ok: #15803d;
  --ok-bg: #f0fdf4;
  --ok-line: #bbf7d0;

  /* Type */
  --ff: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
  --fs-xl: clamp(1.3rem, 0.9vw + 1.1rem, 1.55rem);
  --fs-2xl: clamp(1.6rem, 1.6vw + 1.2rem, 2.1rem);
  --fs-3xl: clamp(2rem, 2.4vw + 1.35rem, 2.75rem);
  --fs-4xl: clamp(2.35rem, 3.4vw + 1.5rem, 3.5rem);

  /* Spacing, 4/8 rhythm */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3.5rem;
  --sp-9: 4.5rem;
  --sp-10: 6rem;

  /* Radius scale. Rule: cards 14, inputs 10, buttons pill. */
  --r-card: 14px;
  --r-input: 10px;
  --r-pill: 999px;

  /* Shadows tinted to the neutral hue, never pure black */
  --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --sh-md: 0 6px 20px -6px rgba(15, 23, 42, 0.14);
  --sh-lg: 0 20px 44px -16px rgba(15, 23, 42, 0.22);

  --container: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 220ms;

  /* z-scale: documented, not ad hoc */
  --z-bar: 60;
  --z-header: 70;
  --z-menu: 80;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1120;
    --bg-sunken: #070d19;
    --surface: #101a2c;
    --surface-2: #16223a;
    --text: #e8eef7;
    --text-soft: #a3b2c7;
    --text-faint: #7d8da3;
    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.16);

    /* Lift the accent in dark so it stays AA on dark surfaces
       while remaining the same brand hue. */
    --accent: #fbbf24;
    --accent-hover: #fcd34d;
    --accent-soft: rgba(251, 191, 36, 0.14);
    --accent-on: #1c1206;

    --ink-bg: #060c17;
    --ink-surface: #0b1424;

    --danger: #fca5a5;
    --danger-bg: rgba(220, 38, 38, 0.12);
    --danger-line: rgba(248, 113, 113, 0.35);
    --ok: #86efac;
    --ok-bg: rgba(22, 163, 74, 0.12);
    --ok-line: rgba(134, 239, 172, 0.3);

    --wa: #25d366;
    --wa-hover: #4ade80;

    --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-md: 0 6px 20px -6px rgba(0, 0, 0, 0.55);
    --sh-lg: 0 20px 44px -16px rgba(0, 0, 0, 0.65);
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); letter-spacing: -0.035em; }
h2 { font-size: var(--fs-3xl); letter-spacing: -0.03em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--sp-4); max-width: 65ch; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

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

/* Icon helper. All glyphs come from the Phosphor sprite. */
.ic {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: currentColor;
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

@media (min-width: 768px) { .wrap { padding-inline: var(--sp-6); } }

.section { padding-block: var(--sp-8); }

@media (min-width: 768px) { .section { padding-block: var(--sp-9); } }

.section--sunken { background: var(--bg-sunken); }

.section--ink {
  background: var(--ink-bg);
  color: var(--ink-text);
}

.section--ink h2, .section--ink h3 { color: var(--ink-text); }

.skip {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-input);
  box-shadow: var(--sh-md);
  font-weight: 500;
  transition: top var(--dur) var(--ease);
}

.skip:focus { top: var(--sp-4); }

/* ---------- Headings ---------- */
/* Deliberately not the mono + wide-tracking caps label: that
   reads as templated. Sentence case, accent colour, one weight. */
.eyebrow {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}

.section--ink .eyebrow { color: var(--ink-accent); }

.head { max-width: 620px; margin-bottom: var(--sp-7); }
.head p { color: var(--text-soft); font-size: var(--fs-lg); }
.section--ink .head p { color: var(--ink-soft); }

.lede { font-size: var(--fs-lg); color: var(--text-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 50px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-on);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), transform 120ms var(--ease);
}

.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn .ic { width: 1.15em; height: 1.15em; }

.btn--lg { min-height: 56px; padding-inline: var(--sp-6); font-size: var(--fs-base); }
.btn--block { width: 100%; }

.btn--outline {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--line-strong);
}

.btn--outline:hover { background: var(--surface-2); border-color: var(--text-faint); }

/* On the ink band, an outline button needs its own stroke so it
   never sits invisible against the dark surface. */
.btn--onink {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-text);
  border: 1.5px solid rgba(255, 255, 255, 0.24);
}

.btn--onink:hover { background: rgba(255, 255, 255, 0.13); }

.btn--wa { background: var(--wa); color: #ffffff; }
.btn--wa:hover { background: var(--wa-hover); }

@media (prefers-color-scheme: dark) {
  .btn--wa { color: #04250f; }
}

.btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.header.stuck { border-bottom-color: var(--line); }

.header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.03em;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--n-950);
  color: var(--ink-accent);
  flex: none;
}

@media (prefers-color-scheme: dark) {
  .brand__mark { background: var(--surface-2); }
}

.brand__mark .ic { width: 22px; height: 22px; }
.brand em { font-style: normal; color: var(--accent); }

.nav { display: none; }

@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: var(--sp-1); }
}

.nav a {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--text); font-weight: 600; }

.header__end { display: flex; align-items: center; gap: var(--sp-3); }

.header__tel {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.header__tel .ic { color: var(--accent); width: 1.1em; height: 1.1em; }
.header__tel:hover { color: var(--accent); }

@media (min-width: 640px) { .header__tel { display: inline-flex; } }

.header .btn { display: none; }
@media (min-width: 1024px) { .header .btn { display: inline-flex; } }

.burger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--line-strong);
}

.burger:hover { background: var(--surface-2); }
@media (min-width: 1024px) { .burger { display: none; } }

.burger__lines { position: relative; width: 18px; height: 12px; }

.burger__lines i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.75px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity 140ms var(--ease);
}

.burger__lines i:nth-child(1) { top: 0; }
.burger__lines i:nth-child(2) { top: 5px; }
.burger__lines i:nth-child(3) { top: 10px; }

.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- Mobile menu ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  padding: var(--sp-4);
  padding-top: max(var(--sp-4), env(safe-area-inset-top));
  background: var(--ink-bg);
  color: var(--ink-text);
  transform: translateY(-100%);
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform var(--dur) var(--ease), visibility var(--dur);
}

.menu.open { transform: translateY(0); visibility: visible; }

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
}

.menu__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  color: var(--ink-text);
}

.menu__close .ic { width: 20px; height: 20px; }

.menu nav { display: flex; flex-direction: column; }

.menu nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-1);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--ink-line);
  transition: color var(--dur) var(--ease);
}

.menu nav a:hover,
.menu nav a[aria-current="page"] { color: var(--ink-accent); }

.menu nav .ic { width: 17px; height: 17px; opacity: 0.45; }

.menu__foot { margin-top: auto; padding-top: var(--sp-6); display: grid; gap: var(--sp-3); }
.menu__foot .btn { width: 100%; }

/* ---------- Hero: asymmetric split ---------- */
.hero {
  position: relative;
  background: var(--ink-bg);
  color: var(--ink-text);
  overflow: hidden;
}

/* Cool depth wash. No neon, no mesh blobs. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 76% 6%, rgba(30, 58, 95, 0.7), transparent 64%),
    radial-gradient(600px 400px at 6% 96%, rgba(180, 83, 9, 0.16), transparent 70%);
}

.hero > * { position: relative; }

.hero__grid {
  display: grid;
  gap: var(--sp-7);
  padding-block: var(--sp-8);
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1.08fr 0.92fr;
    gap: var(--sp-8);
    align-items: center;
    padding-block: var(--sp-9);
  }
}

.hero h1 { color: var(--ink-text); margin-bottom: var(--sp-4); }
.hero h1 em { font-style: normal; color: var(--ink-accent); }

.hero__sub {
  font-size: var(--fs-lg);
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: var(--sp-6);
}

.hero__media { position: relative; }

.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-card);
  box-shadow: var(--sh-lg);
}

/* Price tag on the hero image. Real information, not a
   decorative pill: it is the most-asked question. */
.hero__price {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-input);
  background: color-mix(in srgb, var(--n-0) 94%, transparent);
  color: var(--n-900);
  backdrop-filter: blur(8px);
  box-shadow: var(--sh-md);
}

.hero__price .ic { width: 26px; height: 26px; color: var(--accent); }
.hero__price span { display: block; font-size: var(--fs-xs); color: var(--n-600); }

.hero__price strong {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Trust bar (under hero, separate section) ---------- */
.trust {
  background: var(--ink-surface);
  border-top: 1px solid var(--ink-line);
  padding-block: var(--sp-5);
}

.trust ul {
  display: grid;
  gap: var(--sp-4) var(--sp-5);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) { .trust ul { grid-template-columns: repeat(4, 1fr); } }

.trust li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}

.trust .ic { width: 24px; height: 24px; color: var(--ink-accent); }
.trust strong { display: block; color: var(--ink-text); font-weight: 600; }

/* ---------- Services: asymmetric feature split ---------- */
.svc {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 900px) {
  /* Deliberately unequal: replacement is the lead product. */
  .svc { grid-template-columns: 1.35fr 1fr; }
}

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

.svc__item:hover { border-color: var(--line-strong); box-shadow: var(--sh-md); }

.svc__item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.svc__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }

.svc__body h3 { margin-bottom: var(--sp-2); }
.svc__body p { color: var(--text-soft); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }

.svc__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.svc__price b {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.svc__price span { font-size: var(--fs-xs); color: var(--text-faint); }

.svc__go {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--accent);
}

.svc__go .ic { width: 1.05em; height: 1.05em; transition: transform var(--dur) var(--ease); }
.svc__item:hover .svc__go .ic { transform: translateX(3px); }
/* Stretches the link's hit area over the whole card so the card
   is tappable, not just the small text link. The card is the
   positioned ancestor, so inset resolves against it. */
.svc__go::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Extra services: compact row, not a third equal card */
.svc-more {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

/* Same row of points, but standing alone rather than hanging off
   the service split above it. */
.svc-more--bare { margin-top: 0; padding-top: 0; border-top: 0; }

.svc-more li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.svc-more .ic { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.svc-more strong { display: block; font-weight: 600; font-size: var(--fs-sm); }
.svc-more span { font-size: var(--fs-xs); color: var(--text-soft); }

/* ---------- Process: numbered vertical rail ---------- */
.rail { display: grid; gap: 0; counter-reset: s; }

@media (min-width: 900px) {
  .rail { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
}

.rail li {
  position: relative;
  counter-increment: s;
  padding-left: var(--sp-8);
  padding-bottom: var(--sp-6);
}

/* No trailing gap under the last step. */
.rail li:last-child { padding-bottom: 0; }

@media (min-width: 900px) {
  .rail li { padding-left: 0; padding-top: var(--sp-7); padding-bottom: 0; }
  .rail li:last-child { padding-bottom: 0; }
}

/* The rail inherits its colours from the section it sits in, so
   the same markup works on the ink band and on light sections. */
.rail {
  --rail-line: var(--line-strong);
  --rail-chip-bg: var(--surface);
  --rail-chip-fg: var(--accent);
  --rail-body: var(--text-soft);
}

.section--ink .rail {
  --rail-line: var(--ink-line);
  --rail-chip-bg: var(--ink-surface);
  --rail-chip-fg: var(--ink-accent);
  --rail-body: var(--ink-soft);
}

.rail li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--rail-line);
  background: var(--rail-chip-bg);
  color: var(--rail-chip-fg);
  font-family: var(--ff-mono);
  font-size: 0.8rem;
  font-weight: 500;
}

/* Rail line connects the steps: vertical on mobile, horizontal
   on desktop. It organises real content, not decoration. */
.rail li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 18.25px;
  top: 38px;
  bottom: 0;
  width: 1.5px;
  background: var(--rail-line);
}

@media (min-width: 900px) {
  .rail li::before { top: 0; }
  .rail li:not(:last-child)::after {
    left: 38px;
    top: 18.25px;
    right: -1.5rem;
    bottom: auto;
    width: auto;
    height: 1.5px;
  }
}

.rail h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.rail p { color: var(--rail-body); font-size: var(--fs-sm); }

/* ---------- Split feature ---------- */
.split { display: grid; gap: var(--sp-6); align-items: center; }

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .split--flip .split__media { order: 2; }
}

.split__media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--r-card);
}

.ticks { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.ticks li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); }
.ticks .ic { width: 21px; height: 21px; color: var(--accent); margin-top: 1px; }
.ticks strong { font-weight: 600; }
.section--ink .ticks .ic { color: var(--ink-accent); }

/* ---------- Coverage ---------- */
.cover-grid { display: grid; gap: var(--sp-6); }

@media (min-width: 900px) {
  .cover-grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-8); align-items: start; }
}

.find {
  position: relative;
  margin-bottom: var(--sp-4);
}

.find input {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--sp-4) 0 2.9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-input);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
}

.find input::placeholder { color: var(--text-faint); }

.find input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.find .ic {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  color: var(--text-faint);
  pointer-events: none;
}

/* Areas as scannable chips grouped by county, not a 39-row list */
.areas { display: grid; gap: var(--sp-5); }
.areas h3 { font-size: var(--fs-sm); color: var(--text-faint); margin-bottom: var(--sp-3); font-weight: 600; }
.areas ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.areas li {
  padding: 6px var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.areas li.hide { display: none; }
.areas__group.hide { display: none; }

.areas__none { display: none; color: var(--text-soft); font-size: var(--fs-sm); }
.areas__none.show { display: block; }

/* ---------- Quote form ---------- */
.quote {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: var(--sp-5);
  box-shadow: var(--sh-md);
}

@media (min-width: 768px) { .quote { padding: var(--sp-6); } }

.fields { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.f { display: flex; flex-direction: column; gap: var(--sp-2); }
.f--full { grid-column: 1 / -1; }

.f label { font-size: var(--fs-sm); font-weight: 600; }
.f .opt { color: var(--text-faint); font-weight: 400; }

.f input, .f select, .f textarea {
  min-height: 50px;
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-input);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.f textarea { min-height: 110px; resize: vertical; }
.f input::placeholder, .f textarea::placeholder { color: var(--text-faint); }

.f select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%2364748b'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 16px;
  padding-right: var(--sp-7);
}

.f input:focus, .f select:focus, .f textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* UK plate: mono + uppercase makes the field self-explanatory */
.f input.reg { font-family: var(--ff-mono); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }

.f .hint { font-size: var(--fs-xs); color: var(--text-soft); }

.f .err {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--danger);
}

.f .err .ic { width: 15px; height: 15px; }
.f.bad input, .f.bad select, .f.bad textarea { border-color: var(--danger); }
.f.bad .err { display: flex; }

.quote__foot { margin-top: var(--sp-5); display: grid; gap: var(--sp-4); }
.quote__note { font-size: var(--fs-xs); color: var(--text-soft); }
.quote__note a { text-decoration: underline; }

.status {
  display: none;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-input);
  font-size: var(--fs-sm);
}

.status.show { display: flex; }
.status .ic { width: 19px; height: 19px; margin-top: 1px; }
.status--ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-line); }
.status--bad { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-line); }

@media (prefers-color-scheme: dark) {
  .status--ok, .status--bad { color: var(--text); }
  .status--ok .ic { color: var(--ok); }
  .status--bad .ic { color: var(--danger); }
}

/* Submit button: spinner replaces label while sending */
.btn[data-busy="true"] { pointer-events: none; opacity: 0.75; }

.spin {
  width: 1.05em;
  height: 1.05em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 620ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Contact ---------- */
.contact { display: grid; gap: var(--sp-6); }

@media (min-width: 1000px) {
  .contact { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8); align-items: start; }
}

.ways { display: grid; gap: var(--sp-3); }

.way {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease);
}

.way:hover { border-color: var(--line-strong); }

.way__ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--accent);
  flex: none;
}

.way__ic .ic { width: 21px; height: 21px; }
.way h3 { font-size: var(--fs-base); margin-bottom: 2px; }
.way p { font-size: var(--fs-sm); color: var(--text-soft); margin: 0; }
/* These are primary conversion links. Pad them out to a 44px tap
   target rather than leaving them at text height. */
.way a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: var(--fs-sm);
}

.way a:hover { color: var(--accent); }

.hours { display: grid; gap: var(--sp-2); }

.hours li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  padding-block: var(--sp-1);
}

.hours span:last-child { font-variant-numeric: tabular-nums; font-weight: 500; }
.hours .closed { color: var(--text-faint); }

/* ---------- FAQ ---------- */
/* Wide enough to sit under a full-width heading without leaving a
   dead column, narrow enough that answers stay readable. */
.faq { max-width: 940px; }
.faq__i { border-bottom: 1px solid var(--line); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) 0;
  text-align: left;
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: color var(--dur) var(--ease);
}

.faq__q:hover { color: var(--accent); }

.faq__q .ic {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 4px;
  color: var(--text-faint);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.faq__q[aria-expanded="true"] .ic { transform: rotate(180deg); color: var(--accent); }

.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__i.open .faq__a { grid-template-rows: 1fr; }
.faq__a p { color: var(--text-soft); padding-bottom: var(--sp-4); }

/* ---------- Reviews ---------- */
.reviews { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }

.review {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}

.stars { display: flex; gap: 1px; color: var(--accent); }
.stars .ic { width: 16px; height: 16px; }

.review blockquote { margin: 0; font-size: var(--fs-sm); }

.review figcaption {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.review__who strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.review__who span { font-size: var(--fs-xs); color: var(--text-faint); }

.review__car {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text-soft);
  flex: none;
}

.review__car .ic { width: 19px; height: 19px; }

/* ---------- CTA band ---------- */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--ink-bg);
  color: var(--ink-text);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
}

@media (min-width: 768px) { .cta { padding: var(--sp-8) var(--sp-7); } }

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px 280px at 50% 0%, rgba(180, 83, 9, 0.22), transparent 68%),
    radial-gradient(600px 340px at 86% 100%, rgba(30, 58, 95, 0.6), transparent 66%);
}

.cta > * { position: relative; }
.cta h2 { color: var(--ink-text); }
.cta p { color: var(--ink-soft); max-width: 52ch; margin-inline: auto; margin-bottom: var(--sp-5); font-size: var(--fs-lg); }
.cta .btns { justify-content: center; }

/* ---------- Page hero (inner) ---------- */
.phero {
  position: relative;
  overflow: hidden;
  background: var(--ink-bg);
  color: var(--ink-text);
  padding-block: var(--sp-7) var(--sp-8);
}

.phero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 400px at 80% 0%, rgba(30, 58, 95, 0.62), transparent 66%);
}

.phero > * { position: relative; }
.phero h1 { color: var(--ink-text); max-width: 18ch; }
.phero p { color: var(--ink-soft); font-size: var(--fs-lg); max-width: 56ch; }

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.crumb a:hover { color: var(--ink-text); }
.crumb .ic { width: 12px; height: 12px; opacity: 0.5; }
.crumb [aria-current] { color: var(--ink-text); }

/* ---------- Prose ---------- */
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--fs-2xl); margin-top: var(--sp-7); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--sp-5); }
.prose p, .prose li { color: var(--text-soft); }
.prose ul { list-style: disc; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.prose a { color: var(--accent); text-decoration: underline; }

.prose__date {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: var(--fs-xs);
  margin-bottom: var(--sp-5);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--ink-bg);
  color: var(--ink-soft);
  padding-top: var(--sp-8);
  font-size: var(--fs-sm);
}

.footer__grid { display: grid; gap: var(--sp-6); padding-bottom: var(--sp-7); }

@media (min-width: 700px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1.1fr; } }

.footer .brand { color: var(--ink-text); margin-bottom: var(--sp-4); }
.footer .brand__mark { background: rgba(255, 255, 255, 0.07); }

/* The footer is dark in both themes, so the wordmark accent has to
   be the ink accent. The light-mode accent only reaches 4.01:1
   against this background, which fails AA. */
.footer .brand em,
.menu .brand em { color: var(--ink-accent); }
.footer__about { max-width: 36ch; margin-bottom: var(--sp-4); }

.footer h3 {
  color: var(--ink-text);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}

.footer ul { display: grid; gap: var(--sp-3); }
.footer a:hover { color: var(--ink-accent); }
.footer__contact li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.footer__contact .ic { width: 17px; height: 17px; color: var(--ink-accent); margin-top: 3px; }

.footer__bot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-4);
  border-top: 1px solid var(--ink-line);
  font-size: var(--fs-xs);
}

.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* ---------- Sticky mobile call bar ---------- */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bar);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
}

.callbar.show { transform: translateY(0); }
.callbar .btn { min-height: 48px; padding-inline: var(--sp-3); }

@media (min-width: 1024px) { .callbar { display: none; } }
@media (max-width: 1023px) { body.bar .footer__bot { padding-bottom: var(--sp-9); } }

/* ---------- Reveal on scroll ---------- */
.rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}

.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
}

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

.noscroll { overflow: hidden; }
.mt-5 { margin-top: var(--sp-5); }

/* =========================================================
   Taste redesign 2026
   Design read: conversion-first local automotive service.
   Dials: variance 7 / motion 4 / density 5.
   Visual language: cold precision, editorial photography,
   graphite neutrals and one safety-lime hue family.
   ========================================================= */

:root {
  --accent: #5d7f13;
  --accent-hover: #48640c;
  --accent-soft: #edf6d8;
  --accent-on: #f8faef;
  --ink-bg: #111510;
  --ink-surface: #181d17;
  --ink-text: #f2f5ed;
  --ink-soft: #bac2b4;
  --ink-accent: #c6ef5b;
  --r-card: 4px;
  --r-input: 4px;
  --r-pill: 4px;
  --container: 1320px;
  --sh-md: 0 18px 44px -28px rgba(17, 21, 16, 0.36);
  --sh-lg: 0 32px 80px -36px rgba(17, 21, 16, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e120e;
    --bg-sunken: #131813;
    --surface: #171c17;
    --surface-2: #1d241c;
    --text: #edf2e8;
    --text-soft: #adb8a8;
    --text-faint: #83907f;
    --line: rgba(226, 239, 220, 0.1);
    --line-strong: rgba(226, 239, 220, 0.18);
    --accent: #c6ef5b;
    --accent-hover: #d3f77a;
    --accent-soft: rgba(198, 239, 91, 0.13);
    --accent-on: #141a0c;
  }
}

body {
  background: var(--bg);
  letter-spacing: -0.006em;
}

#top-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

h1, h2, h3 {
  font-weight: 590;
  letter-spacing: -0.055em;
}

h1 { font-size: clamp(3rem, 5.6vw, 5.9rem); line-height: 0.94; }
h2 { font-size: clamp(2.15rem, 3.6vw, 4.2rem); line-height: 0.98; }
h3 { letter-spacing: -0.035em; }

.section { padding-block: clamp(4.75rem, 8vw, 8.5rem); }
.head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 5rem); }
.head p { max-width: 50ch; margin-top: 1.25rem; }

.header {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-bottom: 1px solid var(--line);
}

.header__in { height: 68px; }
.brand { font-size: 1.12rem; font-weight: 650; }
.brand__mark { border-radius: 3px; background: var(--ink-bg); color: var(--ink-accent); }
.nav a { border-radius: 3px; }
.header .btn { min-height: 44px; }

@media (min-width: 1024px) and (max-width: 1149px) {
  .nav, .header .btn { display: none; }
  .burger { display: grid; }
}

/* Full-bleed photographic hero. Copy and image are composed as
   one frame instead of two adjacent boxes. */
.page-home .hero {
  min-height: calc(100dvh - 68px);
  display: grid;
  align-items: stretch;
  background: #10150f;
}

.page-home .hero::before {
  z-index: 1;
  background: linear-gradient(90deg, #10150f 0%, rgba(16, 21, 15, 0.98) 31%, rgba(16, 21, 15, 0.72) 54%, rgba(16, 21, 15, 0.08) 82%);
  pointer-events: none;
}

.page-home .hero__grid {
  position: relative;
  min-height: calc(100dvh - 68px);
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
  padding-block: clamp(3.5rem, 7vw, 7rem);
}

.page-home .hero__grid > div:first-child {
  position: relative;
  z-index: 2;
  max-width: 650px;
}

.page-home .hero h1 {
  max-width: 15ch;
  font-size: clamp(3.2rem, 3.4vw, 3.8rem);
  margin-bottom: 1.5rem;
}

.page-home .hero h1 em { color: var(--ink-accent); font-style: normal; }
.page-home .hero .eyebrow { color: var(--ink-accent); }
.page-home .hero__sub { max-width: 40ch; color: #d5dcd0; margin-bottom: 2rem; }
.page-home .hero .btn:first-child { background: var(--ink-accent); color: #151b0d; }
.page-home .hero .btn:first-child:hover { background: #d5f77c; }

.page-home .hero__media {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 34%;
  overflow: hidden;
}

.page-home .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #10150f 0%, rgba(16, 21, 15, 0.66) 24%, transparent 58%),
              linear-gradient(0deg, rgba(16, 21, 15, 0.38), transparent 45%);
}

.page-home .hero__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
  filter: saturate(0.82) contrast(1.04);
}

.trust { padding-block: 1.5rem; }
.trust ul { gap: 0; }
.trust li {
  min-height: 64px;
  padding: 0 1.5rem;
  border-left: 1px solid var(--ink-line);
}
.trust li:first-child { border-left: 0; padding-left: 0; }
.trust .ic { color: var(--ink-accent); }

/* Services read as an editorial photo story, not a card grid. */
.svc { gap: clamp(2.5rem, 6vw, 6rem); }
.svc__item {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  box-shadow: none;
}
.svc__item:hover { border-color: transparent; box-shadow: none; }
.svc__item img { border-radius: 3px; aspect-ratio: 16 / 10; }
.svc__body { padding: 1.5rem 0 0; }
.svc__body h3 { font-size: clamp(1.6rem, 2.3vw, 2.45rem); }
.svc__body p { max-width: 52ch; font-size: 1rem; }
.svc__price { border: 0; padding: 0; margin-bottom: 1.25rem; }
.svc__go::after { display: none; }

@media (min-width: 900px) {
  .svc { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .svc__item:first-child { grid-column: 1 / span 7; }
  .svc__item:last-child { grid-column: 8 / span 5; margin-top: 8rem; }
}

.svc-more { margin-top: clamp(3rem, 6vw, 6rem); padding-top: 2rem; }
.svc-more .ic { color: var(--accent); }

.section--ink {
  background: var(--ink-bg);
  border-block: 1px solid var(--ink-line);
}
.rail li::before { border-radius: 3px; }
.split__media img { border-radius: 3px; aspect-ratio: 4 / 3; }

.areas li {
  border-radius: 3px;
  background: transparent;
  padding: 0.45rem 0.7rem;
}

.reviews { gap: 0; grid-template-columns: 1.5fr 1fr 1fr; }
.review {
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 0 2rem;
}
.review:first-child { border-left: 0; padding-left: 0; }
.review blockquote { font-size: 1rem; line-height: 1.55; }
.review:first-child blockquote { font-size: clamp(1.25rem, 1.8vw, 1.7rem); line-height: 1.35; }
.review figcaption { border-top: 0; padding-top: 1rem; }
.review__car { border-radius: 3px; }

.quote {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.f input, .f select, .f textarea { background: var(--surface-2); }

.cta {
  border-radius: 3px;
  background: var(--ink-accent);
  color: #151b0d;
  text-align: left;
  padding: clamp(2.5rem, 6vw, 5rem);
}
.cta::before { display: none; }
.cta h2, .cta p { color: #151b0d; margin-inline: 0; }
.cta p { max-width: 48ch; }
.cta .btns { justify-content: flex-start; }
.cta .btn { background: #151b0d; color: #f3f7ec; }
.cta .btn--onink { background: transparent; color: #151b0d; border-color: rgba(21, 27, 13, 0.42); }

.phero { background: var(--ink-bg); padding-block: clamp(4rem, 8vw, 7rem); }
.phero::before { background: linear-gradient(100deg, rgba(198, 239, 91, 0.1), transparent 55%); }

/* One functional vehicle-glass explainer, presented as an editorial plate. */
.glass-guide-section {
  padding-block: clamp(4rem, 7vw, 7rem);
  background: var(--bg-sunken);
}

.glass-guide__intro {
  max-width: 720px;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.glass-guide__intro p {
  max-width: 52ch;
  margin-top: 1.25rem;
  color: var(--text-soft);
}

.glass-guide { margin: 0; }

.glass-guide__viewport {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--line);
}

.glass-guide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.glass-guide figcaption {
  max-width: 62ch;
  margin-top: 1rem;
  color: var(--text-faint);
  font-size: 0.9rem;
}

.footer { border-top: 1px solid var(--ink-line); }

@media (min-width: 900px) and (max-width: 1199px) {
  .page-home .hero h1 { font-size: 2.55rem; }
}

@media (max-width: 899px) {
  .page-home .hero__grid {
    grid-template-columns: 1fr;
    min-height: calc(100dvh - 68px);
    padding-block: 4rem;
  }
  .page-home .hero__media { inset: 0; }
  .page-home .hero__media::after {
    background: linear-gradient(90deg, rgba(16, 21, 15, 0.97) 0%, rgba(16, 21, 15, 0.82) 70%, rgba(16, 21, 15, 0.5) 100%),
                linear-gradient(0deg, rgba(16, 21, 15, 0.78), transparent 55%);
  }
  .page-home .hero__media img { object-position: 62% center; }
  .trust ul { grid-template-columns: 1fr 1fr; gap: 1.25rem 0; }
  .trust li, .trust li:first-child { padding: 0 1rem; border-left: 1px solid var(--ink-line); }
  .trust li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .reviews { grid-template-columns: 1fr; gap: 2rem; }
  .review, .review:first-child { border-left: 0; border-top: 1px solid var(--line); padding: 2rem 0 0; }
  .review:first-child { border-top: 0; padding-top: 0; }
}

@media (max-width: 560px) {
  .page-home .hero h1 { font-size: clamp(3.25rem, 15vw, 4.7rem); }
  .page-home .hero__grid { padding-block: 3rem; }
  .page-home .hero .btns { display: grid; grid-template-columns: 1fr; }
  .page-home .hero .btn { width: 100%; }
  .trust li { align-items: flex-start; font-size: 0.78rem; }
  .trust .ic { width: 20px; height: 20px; }
  .glass-guide__viewport {
    margin-right: calc(var(--pad) * -1);
    padding-right: var(--pad);
  }
  .glass-guide img {
    width: 920px;
    max-width: none;
  }
}

/* =========================================================
   Attention revision: signal red, semantic contact colours,
   Google-style social proof and icon-led process scanning.
   ========================================================= */
:root {
  --accent: #c63b32;
  --accent-hover: #a92f28;
  --accent-soft: #f4deda;
  --accent-on: #ffffff;
  --ink-accent: #ef756c;
  --wa: #25d366;
  --wa-hover: #20bd5a;
  --star: #f9ab00;
  --sh-review: 0 18px 44px -30px rgba(91, 38, 32, 0.34);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #f07268;
    --accent-hover: #ff8b82;
    --accent-soft: rgba(240, 114, 104, 0.15);
    --accent-on: #210b09;
    --ink-accent: #f58a81;
    --sh-review: 0 20px 50px -30px rgba(0, 0, 0, 0.7);
  }
}

/* WhatsApp green is a semantic brand exception to the single
   site accent. It only appears on direct WhatsApp actions. */
.btn[href*="wa.me"],
.page-home .hero .btn[href*="wa.me"],
.menu__foot .btn[href*="wa.me"] {
  background: var(--wa);
  color: #0b141a;
  border-color: var(--wa);
}

.btn[href*="wa.me"]:hover,
.page-home .hero .btn[href*="wa.me"]:hover,
.menu__foot .btn[href*="wa.me"]:hover {
  background: var(--wa-hover);
  color: #07110b;
  border-color: var(--wa-hover);
}

.brand__mark { background: var(--accent); color: var(--accent-on); }
.page-home .hero h1 strong { color: var(--accent); }
.svc__price b { color: var(--accent); }

/* The proof strip now behaves as a high-contrast signal band. */
.trust {
  padding-block: 1.35rem;
  background: var(--accent);
  color: var(--accent-on);
  border: 0;
}

.trust li { border-left-color: rgba(255, 255, 255, 0.28); }
.trust .ic {
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--accent-on);
}
.trust li > span,
.trust strong { color: var(--accent-on); }
.trust strong { font-size: 1.02rem; }

/* Google-style reviews sit directly after first-page proof. */
.reviews-section {
  overflow: hidden;
  padding-block: clamp(4rem, 6vw, 6.5rem);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--line);
}

.reviews-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.reviews-source {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
  color: var(--text-soft);
  font-weight: 650;
}
.reviews-source img { width: 24px; height: 24px; }

.review-controls { display: flex; gap: 0.65rem; }
.review-nav {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms ease;
}
.review-nav:hover { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
.review-nav:active { transform: translateY(1px); }
.review-nav .ic { width: 20px; height: 20px; }
.review-nav--prev .ic { transform: rotate(180deg); }

.review-slider {
  width: calc(100vw - max(2rem, calc((100vw - var(--container)) / 2)));
  max-width: calc(var(--container) + max(0px, calc((100vw - var(--container)) / 2)));
  outline: none;
}
.review-slider:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 5px; }
.review-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.25rem 0 1.35rem;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}
.review-track::-webkit-scrollbar { display: none; }

.review-card {
  display: flex;
  flex: 0 0 min(520px, 42vw);
  min-height: 260px;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--sh-review);
}
.review-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.review-card__top > img { width: 20px; height: 20px; }
.review-card .stars {
  color: var(--star);
  font-size: 1rem;
  letter-spacing: 0.1em;
  line-height: 1;
}
.review-card .stars::before { display: none; }
.review-card blockquote {
  max-width: 39ch;
  margin: 0 0 2rem;
  color: var(--text);
  font-size: clamp(1.15rem, 1.45vw, 1.45rem);
  font-weight: 520;
  line-height: 1.45;
  letter-spacing: -0.018em;
}
.review-card figcaption { display: flex; align-items: center; gap: 0.8rem; }
.review-avatar {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 750;
}
.review__who strong { color: var(--text); }
.review__who span { color: var(--text-soft); }

/* Process items remain open, not carded, but gain a visible
   graphic anchor that makes the sequence scannable. */
.process .rail li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
}
.process__icon {
  display: grid;
  grid-row: 1 / span 2;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-on);
}
.process__icon .ic { width: 25px; height: 25px; }
.process .rail h3 { margin-top: 0.1rem; }

@media (max-width: 899px) {
  .review-card { flex-basis: min(520px, 76vw); }
}

@media (max-width: 560px) {
  .reviews-head { align-items: center; }
  .reviews-head h2 { font-size: clamp(2.15rem, 11vw, 3rem); }
  .review-nav { width: 42px; height: 42px; }
  .review-slider { width: calc(100vw - var(--sp-4)); }
  .review-card { flex-basis: 86vw; min-height: 280px; }
  .trust ul { gap: 1rem 0; }
  .trust .ic { width: 36px; height: 36px; }
  .process .rail li { grid-template-columns: 46px minmax(0, 1fr); }
  .process__icon { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .review-track { scroll-behavior: auto; }
}

/* =========================================================
   Corrective redesign: glass, clarity and service precision.
   One cool-neutral theme, one glass-blue accent, 6px geometry.
   ========================================================= */
:root {
  --bg: #f5f8fa;
  --bg-sunken: #eaf1f4;
  --surface: #fbfdfe;
  --surface-2: #e8f0f4;
  --text: #10212b;
  --text-soft: #506570;
  --text-faint: #596f7a;
  --line: #d6e0e5;
  --line-strong: #bac9d1;
  --accent: #146c8e;
  --accent-hover: #0e5874;
  --accent-soft: #d9ebf2;
  --accent-on: #f7fbfc;
  --ink-bg: #0d1b24;
  --ink-surface: #142732;
  --ink-text: #edf5f7;
  --ink-soft: #adc0c9;
  --ink-line: rgba(221, 237, 243, 0.14);
  --ink-accent: #75bad3;
  --wa: #146c8e;
  --wa-hover: #0e5874;
  --r-card: 6px;
  --r-input: 6px;
  --r-pill: 6px;
  --container: 1320px;
  --sh-md: 0 18px 48px -32px rgba(32, 71, 88, 0.34);
  --sh-lg: 0 28px 80px -42px rgba(27, 61, 76, 0.44);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c171e;
    --bg-sunken: #101f28;
    --surface: #13242e;
    --surface-2: #192e39;
    --text: #e8f1f4;
    --text-soft: #afc1c9;
    --text-faint: #839ba6;
    --line: rgba(218, 236, 242, 0.1);
    --line-strong: rgba(218, 236, 242, 0.2);
    --accent: #6cb3ce;
    --accent-hover: #8ac6dc;
    --accent-soft: rgba(108, 179, 206, 0.14);
    --accent-on: #07141b;
    --ink-bg: #0c171e;
    --ink-surface: #13242e;
    --ink-text: #e8f1f4;
    --ink-soft: #afc1c9;
    --ink-accent: #6cb3ce;
    --wa: #6cb3ce;
    --wa-hover: #8ac6dc;
  }
}

body { background: var(--bg); }

h1, h2, h3 {
  font-weight: 610;
  letter-spacing: -0.048em;
}

h1 { font-size: clamp(3rem, 4.8vw, 5.2rem); line-height: 0.97; }
h2 { font-size: clamp(2.35rem, 3.5vw, 4rem); line-height: 1; }

.section { padding-block: clamp(4.5rem, 6.5vw, 7rem); }
.head { margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.head p { margin-top: 1.1rem; }

.btn {
  border-radius: 6px;
  box-shadow: none;
}

.btn--wa {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-strong);
}

.btn--wa:hover { background: var(--surface-2); color: var(--text); }

.brand__mark {
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-on);
}

.brand em { color: var(--accent); }
.nav a { border-radius: 4px; }

.header {
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  border-bottom-color: var(--line);
}

/* Light editorial hero. The image runs to the viewport edge on
   ultrawide screens while the copy stays on the content grid. */
.page-home .hero {
  min-height: 0;
  background: var(--bg);
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

.page-home .hero::before { display: none; }

.page-home .hero__grid {
  position: relative;
  min-height: clamp(650px, calc(100dvh - 68px), 820px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  padding-block: clamp(4rem, 7vw, 6rem);
}

.page-home .hero__grid > div:first-child {
  position: relative;
  z-index: 2;
  grid-column: 1 / span 8;
  max-width: 800px;
  padding-right: clamp(2rem, 4vw, 4rem);
}

.page-home .hero h1 {
  max-width: 800px;
  margin-bottom: 1.65rem;
  color: var(--text);
  font-size: clamp(3.25rem, 3.8vw, 3.6rem);
}

.page-home .hero h1 strong {
  display: inline;
  color: var(--accent);
  font-weight: 650;
}

.page-home .hero__sub {
  max-width: 40ch;
  margin-bottom: 2rem;
  color: var(--text-soft);
}

.page-home .hero .btn:first-child {
  background: var(--accent);
  color: var(--accent-on);
}

.page-home .hero .btn:first-child:hover { background: var(--accent-hover); }
.page-home .hero .btn--onink {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.page-home .hero .btn--onink:hover { background: var(--surface-2); }

.page-home .hero__media {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  right: calc(50% - 50vw);
  overflow: hidden;
}

.page-home .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 86%, transparent) 9%, transparent 28%);
  pointer-events: none;
}

.page-home .hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  border-radius: 0;
  box-shadow: none;
  filter: saturate(0.76) contrast(1.02);
}

.trust {
  padding-block: 1.6rem;
  background: var(--bg);
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.trust li { border-left-color: var(--line); }
.trust .ic { color: var(--accent); }
.trust li > span { color: var(--text-soft); }
.trust strong { color: var(--text); }

/* Services stay image-led, but the secondary service no longer
   floats so far down that the section loses its visual centre. */
.svc { gap: clamp(3rem, 5vw, 5.5rem); }
.svc__item img { border-radius: 6px; }
.svc__body h3 { color: var(--text); }
.svc__go, .svc-more .ic { color: var(--accent); }

@media (min-width: 900px) {
  .svc__item:last-child { margin-top: 4.5rem; }
}

/* Process: no stage numbers, pills or dark theme break. */
.process { background: var(--bg-sunken); }
.process__grid { display: grid; gap: 3rem; }
.process .head { margin: 0; }
.process .head p { color: var(--text-soft); }
.process .rail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  counter-reset: none;
}
.process .rail li {
  padding: 1.25rem 0 0;
  border-top: 2px solid var(--line-strong);
  counter-increment: none;
}
.process .rail li::before,
.process .rail li::after { display: none; }
.process .rail h3 { color: var(--text); font-size: 1.3rem; }
.process .rail p { color: var(--text-soft); }

@media (min-width: 900px) {
  .process__grid {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(4rem, 8vw, 8rem);
    align-items: start;
  }
  .process .rail { grid-template-columns: 1fr 1fr; gap: 3rem 4rem; }
}

.split__media img { border-radius: 6px; }
.ticks .ic { color: var(--accent); }

.section--ink {
  background: var(--bg-sunken);
  color: var(--text);
  border-color: var(--line);
}
.section--ink h2, .section--ink h3 { color: var(--text); }
.section--ink .head p, .section--ink .rail p { color: var(--text-soft); }

.areas li { color: var(--text-soft); }
.find input { border-radius: 6px; }

.reviews { grid-template-columns: 1.45fr 1fr 1fr; }
.review { border-left-color: var(--line); }
.stars, .review__car { color: var(--accent); }
.stars { font-size: 0; }
.stars .ic { display: none; }
.stars::before {
  content: "★★★★★";
  font-size: 0.9rem;
  letter-spacing: 0.09em;
}

.quote { background: transparent; }
.f input, .f select, .f textarea {
  background: var(--surface);
  border-radius: 6px;
}

.ways {
  gap: 0;
  border-top: 1px solid var(--line);
}
.way {
  padding: 1.2rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.way:hover { border-color: var(--line); }
.way__ic {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background: var(--accent-soft);
}

.cta {
  background: var(--accent-soft);
  color: var(--text);
  border-radius: 6px;
}
.cta h2, .cta p { color: var(--text); }
.cta .btn { background: var(--accent); color: var(--accent-on); }
.cta .btn--onink {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}

@media (min-width: 800px) {
  .cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 4rem;
    align-items: end;
  }
  .cta h2, .cta p { grid-column: 1; }
  .cta .btns { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

.phero {
  background: var(--bg-sunken);
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.phero::before { background: linear-gradient(110deg, var(--accent-soft), transparent 58%); }
.phero h1 { color: var(--text); }
.phero p, .crumb { color: var(--text-soft); }
.crumb a:hover, .crumb [aria-current] { color: var(--text); }

.glass-guide-section { background: var(--bg-sunken); }
.glass-guide img { border-radius: 6px; }

.footer {
  background: var(--bg-sunken);
  color: var(--text-soft);
  border-top: 1px solid var(--line);
}
.footer .brand { color: var(--text); }
.footer .brand__mark { background: var(--accent); color: var(--accent-on); }
.footer .brand em,
.menu .brand em { color: var(--accent); }
.footer h3 { color: var(--text); }
.footer a:hover, .footer__contact .ic { color: var(--accent); }
.footer__bot { border-top-color: var(--line); }

.menu {
  background: var(--bg);
  color: var(--text);
}
.menu__close { color: var(--text); border-color: var(--line-strong); }
.menu nav a { border-bottom-color: var(--line); }
.menu nav a:hover,
.menu nav a[aria-current="page"] { color: var(--accent); }
.menu__foot .btn--wa { color: var(--text); }

/* Motion dial is deliberately 3 for a time-sensitive service.
   Content is never hidden while waiting for JavaScript. */
.rv, .rv.in { opacity: 1; transform: none; transition: none; }

@media (max-width: 899px) {
  .page-home .hero__grid {
    min-height: 0;
    grid-template-columns: 1fr;
    padding-block: 3.5rem 0;
  }
  .page-home .hero__grid > div:first-child {
    grid-column: 1;
    max-width: 680px;
    padding-right: 0;
    padding-bottom: 3rem;
  }
  .page-home .hero__media {
    position: relative;
    grid-column: 1;
    left: auto;
    right: auto;
    width: calc(100% + 2 * var(--sp-6));
    height: clamp(320px, 58vw, 520px);
    margin-inline: calc(var(--sp-6) * -1);
  }
  .page-home .hero__media::after {
    background: linear-gradient(180deg, var(--bg) 0%, transparent 18%);
  }
  .page-home .hero__media img { object-position: 62% center; }
  .reviews { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .page-home .hero__grid { padding-top: 2.75rem; }
  .page-home .hero h1 { font-size: clamp(2.65rem, 13vw, 3.45rem); }
  .page-home .hero .btns { display: grid; grid-template-columns: 1fr; }
  .page-home .hero .btn { width: 100%; }
  .page-home .hero__media {
    width: calc(100% + 2 * var(--sp-4));
    margin-inline: calc(var(--sp-4) * -1);
  }
  .trust ul { grid-template-columns: 1fr 1fr; }
  .glass-guide__viewport {
    overflow: visible;
    margin-right: 0;
    padding-right: 0;
  }
  .glass-guide img {
    width: 100%;
    max-width: 100%;
  }
}

/* Final palette lock. This sits after the corrective theme so
   semantic red and WhatsApp green cannot be muted by legacy rules. */
:root {
  --accent: #c63b32;
  --accent-hover: #a92f28;
  --accent-soft: #f4deda;
  --accent-on: #ffffff;
  --ink-accent: #ef756c;
  --wa: #25d366;
  --wa-hover: #20bd5a;
  --star: #f9ab00;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #f07268;
    --accent-hover: #ff8b82;
    --accent-soft: rgba(240, 114, 104, 0.15);
    --accent-on: #210b09;
    --ink-accent: #f58a81;
  }
}

.btn[href*="wa.me"],
.page-home .hero .btn[href*="wa.me"],
.menu__foot .btn[href*="wa.me"] {
  background: var(--wa);
  color: #0b141a;
  border-color: var(--wa);
}
.btn[href*="wa.me"]:hover,
.page-home .hero .btn[href*="wa.me"]:hover,
.menu__foot .btn[href*="wa.me"]:hover {
  background: var(--wa-hover);
  color: #07110b;
  border-color: var(--wa-hover);
}

.brand__mark { background: var(--accent); color: var(--accent-on); }
.page-home .hero h1 strong,
.svc__price b { color: var(--accent); }

.trust {
  padding-block: 1.35rem;
  background: var(--accent);
  color: var(--accent-on);
  border: 0;
}
.trust li { border-left-color: rgba(255, 255, 255, 0.28); }
.trust .ic {
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--accent-on);
}
.trust li > span,
.trust strong { color: var(--accent-on); }
.trust strong { font-size: 1.02rem; }

.review-card { flex-basis: min(620px, 46vw); }
.review-avatar { background: var(--accent); color: var(--accent-on); }

@media (max-width: 899px) {
  .review-card { flex-basis: min(520px, 76vw); }
}

@media (max-width: 560px) {
  .review-card { flex-basis: 86vw; }
  .trust .ic { width: 36px; height: 36px; }
}

/* Mobile hero handoff: the old 18% two-stop fade created a
   visible pale shelf. These eased stops reveal the photograph
   progressively while keeping the join identical to the page. */
@media (max-width: 899px) {
  .page-home .hero__grid { gap: 0; }
  .page-home .hero__grid > div:first-child { padding-bottom: 1.25rem; }
  .page-home .hero__media { margin-top: -1px; }
  .page-home .hero__media::after {
    background: linear-gradient(
      180deg,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 94%, transparent) 7%,
      color-mix(in srgb, var(--bg) 76%, transparent) 17%,
      color-mix(in srgb, var(--bg) 48%, transparent) 28%,
      color-mix(in srgb, var(--bg) 20%, transparent) 38%,
      transparent 48%
    );
  }
}

/* =========================================================
   Workshop system: graphite structure, safety amber focus.
   WhatsApp green is limited to its recognisable brand cue.
   ========================================================= */
:root {
  --bg: #f3f5f3;
  --bg-sunken: #e8eeeb;
  --surface: #fcfdfc;
  --surface-2: #e4eae7;
  --text: #17211f;
  --text-soft: #53635e;
  --text-faint: #687873;
  --line: #d0d9d5;
  --line-strong: #afbeb8;
  --graphite: #17211f;
  --graphite-hover: #26322f;
  --accent: #805b00;
  --accent-fill: #e2b43f;
  --accent-hover: #654700;
  --accent-soft: #f1e5b9;
  --accent-on: #151a18;
  --ink-bg: #17211f;
  --ink-surface: #222e2b;
  --ink-text: #f1f5f2;
  --ink-soft: #bdc8c4;
  --ink-line: rgba(238, 245, 241, 0.14);
  --ink-accent: #e8be52;
  --wa: #25d366;
  --wa-dark: #128c7e;
  --star: #d99a00;
  --sh-md: 0 18px 52px -38px rgba(30, 48, 43, 0.38);
  --sh-lg: 0 30px 80px -48px rgba(25, 42, 37, 0.46);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101716;
    --bg-sunken: #17211f;
    --surface: #1b2623;
    --surface-2: #24312e;
    --text: #edf3ef;
    --text-soft: #b2c0bb;
    --text-faint: #8fa19b;
    --line: rgba(232, 242, 237, 0.1);
    --line-strong: rgba(232, 242, 237, 0.22);
    --graphite: #e7eee9;
    --graphite-hover: #ffffff;
    --accent: #efc75f;
    --accent-fill: #e2b43f;
    --accent-hover: #f6d57c;
    --accent-soft: rgba(226, 180, 63, 0.16);
    --accent-on: #151a18;
    --ink-bg: #111918;
    --ink-surface: #1b2623;
    --ink-text: #edf3ef;
    --ink-soft: #b2c0bb;
    --ink-accent: #efc75f;
  }
}

body { background: var(--bg); color: var(--text); }
.brand__mark,
.footer .brand__mark { background: #17211f; color: var(--accent-fill); }
.brand em,
.menu .brand em,
.footer .brand em { color: var(--accent); }

.btn {
  background: #17211f;
  color: #f5f8f6;
  border-color: #17211f;
}
.btn:hover { background: #26322f; color: #ffffff; border-color: #26322f; }
.header .btn { background: #17211f; color: #ffffff; border-color: #17211f; }

.page-home .hero h1 strong { color: var(--text); }
.page-home .hero .btn:first-child {
  background: var(--accent-fill);
  color: var(--accent-on);
  border-color: var(--accent-fill);
}
.page-home .hero .btn:first-child:hover {
  background: var(--accent-hover);
  color: var(--accent-on);
  border-color: var(--accent-hover);
}

.btn[href*="wa.me"],
.page-home .hero .btn[href*="wa.me"],
.menu__foot .btn[href*="wa.me"],
.cta .btn[href*="wa.me"] {
  background: var(--surface);
  color: var(--text);
  border-color: var(--wa);
}
.btn[href*="wa.me"] .ic,
.page-home .hero .btn[href*="wa.me"] .ic,
.menu__foot .btn[href*="wa.me"] .ic,
.cta .btn[href*="wa.me"] .ic { color: var(--wa-dark); }
.btn[href*="wa.me"]:hover,
.page-home .hero .btn[href*="wa.me"]:hover,
.menu__foot .btn[href*="wa.me"]:hover,
.cta .btn[href*="wa.me"]:hover {
  background: color-mix(in srgb, var(--wa) 10%, var(--surface));
  color: var(--text);
  border-color: var(--wa-dark);
}

/* The proof band is attached directly to the photograph. */
.trust {
  margin: 0;
  padding-block: 1.55rem;
  background: #17211f;
  color: #f2f5f3;
  border: 0;
  box-shadow: none;
}
.trust ul { gap: clamp(1.25rem, 3vw, 3rem); }
.trust li,
.trust li:first-child {
  min-width: 0;
  padding: 0;
  border: 0;
}
.trust .ic {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 6px;
  background: rgba(226, 180, 63, 0.12);
  color: var(--accent-fill);
}
.trust strong { color: #f4f7f5; font-size: 1.05rem; }
.trust li > span { color: #bdc8c4; }

/* Real review source and a carousel with one meaningful frame. */
.reviews-section {
  padding-block: clamp(4.5rem, 7vw, 7rem);
  background: var(--bg-sunken);
  border: 0;
}
.reviews-source { color: var(--accent); }
.reviews-source .ic { width: 21px; height: 21px; color: var(--star); }
.reviews-head { align-items: end; }
.review-controls { align-items: center; }
.review-count {
  min-width: 7.2rem;
  text-align: center;
  color: var(--text-soft);
  font-size: 0.86rem;
  font-weight: 650;
}
.review-nav { background: var(--surface); }
.review-nav:hover { background: var(--accent-fill); color: var(--accent-on); border-color: var(--accent-fill); }
.review-nav:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  background: var(--surface);
  color: var(--text-soft);
  border-color: var(--line);
}
.review-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.52fr) minmax(0, 1.48fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: stretch;
}
.review-score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-right: clamp(1rem, 3vw, 3rem);
}
.review-score__number {
  color: var(--text);
  font-size: clamp(4.5rem, 8vw, 7.5rem);
  font-weight: 650;
  line-height: 0.82;
  letter-spacing: -0.08em;
}
.review-score__label { margin-top: 0.75rem; color: var(--text-soft); }
.review-score p { margin: 2rem 0 1.2rem; }
.review-score p strong,
.review-score p span { display: block; }
.review-score p strong { color: var(--text); }
.review-score p span { color: var(--text-soft); }
.review-score a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--accent);
  font-weight: 700;
}
.review-score a .ic { width: 18px; height: 18px; }
.review-slider { width: 100%; max-width: none; min-width: 0; }
.review-track { gap: 1rem; padding: 0 0 0.75rem; }
.review-card,
.review-card:first-child {
  flex: 0 0 100%;
  min-height: 340px;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 0;
  background: var(--surface);
  box-shadow: var(--sh-md);
}
.review-card__top > span:last-child {
  color: var(--text-faint);
  font-size: 0.82rem;
  font-weight: 650;
}
.review-card blockquote {
  max-width: 34ch;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.35;
}
.review-avatar { background: var(--accent-fill); color: var(--accent-on); }

/* One dominant replacement story, then one compact alternative. */
.service-head { max-width: 650px; }
.service-stage { display: grid; gap: 1.5rem; }
.service-main {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(330px, 0.68fr);
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--sh-lg);
}
.service-main > img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
}
.service-main__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 4rem);
}
.service-main h3,
.service-chip h3 { color: var(--text); font-size: clamp(2rem, 3vw, 3.4rem); }
.service-main__body > p,
.service-chip__body > p { margin-top: 1.25rem; color: var(--text-soft); }
.service-facts {
  display: grid;
  gap: 0.85rem;
  margin: 2rem 0;
  color: var(--text);
}
.service-facts li { display: flex; align-items: center; gap: 0.7rem; }
.service-facts .ic { width: 21px; height: 21px; color: var(--accent); }
.service-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: auto;
  padding-top: 2rem;
}
.svc__price { margin: 0; }
.svc__price b { color: var(--text); }
.svc__price span,
.f label .opt { color: var(--text-soft); }
.service-main .service-action { align-items: stretch; flex-direction: column; }
.service-main .svc__price { display: flex; align-items: baseline; gap: 0.65rem; }
.service-main .btn { width: 100%; }
.service-chip {
  display: grid;
  grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr);
  min-height: 290px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg-sunken);
}
.service-chip > img { width: 100%; height: 100%; object-fit: cover; }
.service-chip__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3.5rem);
}
.service-chip h3 { font-size: clamp(1.8rem, 2.5vw, 2.7rem); }
.svc__go { color: var(--accent); }

.glass-range {
  display: grid;
  grid-template-columns: minmax(240px, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  margin-top: clamp(2rem, 4vw, 4rem);
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: 6px;
  background: var(--accent-soft);
}
.glass-range__head h3 { color: var(--text); font-size: clamp(1.6rem, 2.4vw, 2.35rem); }
.glass-range__head p { margin-top: 0.9rem; color: var(--text-soft); }
.glass-range .svc-more {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 2.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.glass-range .svc-more li { gap: 0.9rem; }
.glass-range .svc-more .ic {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-fill) 32%, transparent);
  color: var(--accent);
}
.glass-range .svc-more strong { color: var(--text); font-size: 0.98rem; }

.process__icon { background: var(--accent-fill); color: var(--accent-on); }
.ticks .ic { color: var(--accent); }

/* Coverage is a regional directory, not a cloud of tags. */
#coverage { background: var(--bg-sunken); }
.cover-grid {
  grid-template-columns: minmax(290px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(4rem, 8vw, 8rem);
}
.cover-grid > div:first-child { position: sticky; top: 110px; }
.areas { display: block; }
.areas__group {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 1.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--line-strong);
}
.areas__group:last-child { border-bottom: 1px solid var(--line-strong); }
.areas__group h3 {
  color: var(--accent);
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}
.areas__group ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem 1.4rem;
  margin: 0;
}
.areas__group li {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-soft);
  line-height: 1.35;
}
.areas__group li:hover { border: 0; background: transparent; color: var(--text); }
.find input { background: var(--surface); }

.cta { background: var(--accent-soft); }
.cta .btn:not([href*="wa.me"]) {
  background: var(--accent-fill);
  color: var(--accent-on);
  border-color: var(--accent-fill);
}
.cta .btn:not([href*="wa.me"]):hover {
  background: var(--accent-hover);
  color: var(--accent-on);
  border-color: var(--accent-hover);
}
.way__ic { background: var(--accent-soft); color: var(--accent); }
.footer__contact .ic { color: var(--accent); }

@media (max-width: 899px) {
  .review-layout,
  .service-main,
  .service-chip,
  .glass-range,
  .cover-grid { grid-template-columns: 1fr; }
  .review-layout { gap: 2rem; }
  .review-score {
    display: grid;
    grid-template-columns: auto auto 1fr;
    column-gap: 0.75rem;
    align-items: end;
    padding: 0;
  }
  .review-score__number { font-size: 4.8rem; }
  .review-score__label { margin-bottom: 0.3rem; }
  .review-score p { margin: 0 0 0 auto; }
  .review-score a { grid-column: 1 / -1; margin-top: 1.25rem; }
  .review-card { flex-basis: 100%; min-height: 310px; }
  .service-main > img { min-height: 0; aspect-ratio: 16 / 10; }
  .service-chip > img { aspect-ratio: 16 / 9; }
  .glass-range .svc-more { grid-template-columns: 1fr 1fr; }
  .cover-grid > div:first-child { position: static; }
}

@media (max-width: 560px) {
  .trust ul { gap: 1.25rem 0; }
  .trust li,
  .trust li:first-child { padding-right: 0.65rem; }
  .trust .ic { width: 38px; height: 38px; }
  .reviews-head { display: grid; align-items: start; }
  .review-controls { justify-content: space-between; }
  .review-count { order: 2; }
  .review-nav--prev { order: 1; }
  .review-nav--next { order: 3; }
  .review-score { grid-template-columns: auto auto; }
  .review-score p { grid-column: 1 / -1; margin: 1.25rem 0 0; }
  .review-card { min-height: 330px; padding: 1.6rem; }
  .review-card blockquote { font-size: 1.25rem; }
  .service-main__body,
  .service-chip__body { padding: 1.6rem; }
  .service-action { align-items: flex-start; flex-direction: column; }
  .service-action .btn { width: 100%; }
  .glass-range { padding: 1.6rem; }
  .glass-range .svc-more { grid-template-columns: 1fr; gap: 1.5rem; }
  .areas__group { grid-template-columns: 1fr; gap: 1rem; }
  .areas__group ul { grid-template-columns: 1fr 1fr; }
}

/* Quote inclusions: meaningful visual anchors, not ambiguous step counters. */
.rail--icons {
  counter-reset: none;
  gap: clamp(2rem, 4vw, 4rem);
}
.rail--icons li {
  counter-increment: none;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 0;
}
.rail--icons li::before,
.rail--icons li::after { display: none; }
.rail--icons .rail__icon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 6px;
  background: var(--accent-fill);
  color: var(--accent-on);
}
.rail--icons .rail__icon .ic { width: 27px; height: 27px; }
.rail--icons h3 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.25;
}
.rail--icons p { margin-top: 0.45rem; }

@media (min-width: 900px) {
  .rail--icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Services page benefits: primary reassurance, not compact metadata. */
.benefits-section { padding-block: clamp(4.5rem, 7vw, 7rem); }
.benefits-section .head { margin-bottom: clamp(2.75rem, 5vw, 4.5rem); }
.benefits-section .benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.benefits-section .benefits-grid li {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}
.benefits-section .benefits-grid .ic {
  width: 60px;
  height: 60px;
  margin: 0;
  padding: 16px;
  border-radius: 6px;
  background: var(--accent-fill);
  color: var(--accent-on);
}
.benefits-section .benefits-grid strong {
  color: var(--text);
  font-size: 1.18rem;
  line-height: 1.25;
}
.benefits-section .benefits-grid li > span > span {
  display: block;
  margin-top: 0.5rem;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.5;
}

@media (min-width: 640px) {
  .benefits-section .benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem 4rem;
  }
}

@media (min-width: 1100px) {
  .benefits-section .benefits-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 4.5rem);
  }
}

/* =========================================================
   Vehicle Auto Glass v11: cold glass, precise workshop finish.
   One cyan system accent. WhatsApp keeps its official green.
   ========================================================= */
:root {
  --bg: #f7f9fb;
  --bg-sunken: #edf2f5;
  --surface: #ffffff;
  --surface-2: #e8eef2;
  --text: #101820;
  --text-soft: #52636d;
  --text-faint: #6e7e87;
  --line: #d8e1e6;
  --line-strong: #bdcbd2;
  --accent: #b9342d;
  --accent-fill: #c43a32;
  --accent-hover: #9f2b26;
  --accent-soft: #f6e7e5;
  --accent-on: #ffffff;
  --ink-bg: #101820;
  --ink-surface: #17242c;
  --ink-text: #f4f8fa;
  --ink-soft: #b9c6cc;
  --ink-line: rgba(255, 255, 255, 0.13);
  --ink-accent: #ef746d;
  --wa: #25d366;
  --wa-hover: #128c7e;
  --star: #f9ab00;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d151a;
    --bg-sunken: #111d23;
    --surface: #17242b;
    --surface-2: #1b2b33;
    --text: #f2f7f9;
    --text-soft: #b8c5cb;
    --text-faint: #8fa0a8;
    --line: #2b3b43;
    --line-strong: #40535c;
    --accent: #ef746d;
    --accent-fill: #d84a42;
    --accent-hover: #ef665e;
    --accent-soft: #3a211f;
    --accent-on: #071217;
    --ink-bg: #081116;
    --ink-surface: #111f26;
    --ink-accent: #ef746d;
  }
}

body { background: var(--bg); }
.site-header { border-bottom-color: transparent; background: color-mix(in srgb, var(--bg) 94%, transparent); }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.brand { gap: 0.7rem; }
.brand__mark {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  background: var(--accent-fill);
  color: var(--accent-on);
  box-shadow: none;
}
.brand__mark .ic { width: 23px; height: 23px; }
.brand__word {
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 730;
  letter-spacing: -0.045em;
  line-height: 1;
}
.brand__word strong { color: var(--accent); font-weight: 820; }
.footer .brand__mark { background: var(--accent-fill); color: var(--accent-on); }
.footer .brand__word { color: var(--ink-text); }
.footer .brand__word strong { color: var(--ink-accent); }

.btn--primary,
.hero .btn:not([href*="wa.me"]),
.cta .btn:not([href*="wa.me"]) {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--accent-on);
}
.btn--primary:hover,
.hero .btn:not([href*="wa.me"]):hover,
.cta .btn:not([href*="wa.me"]):hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-on);
}
.btn[href*="wa.me"] {
  background: var(--surface);
  border-color: var(--wa);
  color: var(--text);
}
.btn[href*="wa.me"] .ic { color: var(--wa-hover); }
.btn[href*="wa.me"]:hover { background: color-mix(in srgb, var(--wa) 10%, var(--surface)); border-color: var(--wa-hover); color: var(--text); }

.page-home .hero { border-bottom: 0; }
.page-home .hero__copy::before { background: var(--accent-fill); }
.trust { border: 0; background: var(--ink-bg); }
.trust li { border-color: var(--ink-line); color: var(--ink-soft); }
.trust strong { color: var(--ink-text); }
.trust .ic { background: color-mix(in srgb, var(--accent-fill) 18%, transparent); color: var(--ink-accent); }

/* Reviews: Google leads discovery; the original quote source remains explicit. */
.reviews-section { background: var(--bg-sunken); }
.reviews-source { color: var(--text-soft); }
.reviews-source img { flex: 0 0 24px; }
.review-layout { grid-template-columns: minmax(230px, 0.48fr) minmax(0, 1.52fr); gap: clamp(2.5rem, 5vw, 5rem); }
.review-score {
  align-self: stretch;
  padding: 2rem 0 0;
  border-top: 3px solid var(--accent-fill);
}
.review-score__google { width: 42px; height: 42px; }
.review-score h3 { margin-top: 1.25rem; color: var(--text); font-size: clamp(1.45rem, 2.1vw, 2rem); line-height: 1.08; }
.review-score p { margin: 1rem 0 1.5rem; color: var(--text-soft); }
.review-score__links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; }
.review-score__links a { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; color: var(--accent); font-weight: 720; }
.review-score__links a .ic { width: 17px; height: 17px; }
.review-track { gap: 1rem; }
.review-card {
  flex: 0 0 calc((100% - 1rem) / 2);
  min-height: 330px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 45px rgba(16, 24, 32, 0.06);
}
.review-card__top > span { color: var(--text-faint); }
.review-avatar { background: var(--accent-soft); color: var(--accent); }
.stars { color: var(--star); }
.review-nav { border-color: var(--line-strong); background: var(--surface); }
.review-nav:hover { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-on); }
.review-nav:disabled { opacity: 1; }

/* Vehicle marques: real marks, one continuous but quiet motion element. */
.makes-section { overflow: hidden; background: var(--surface); }
.makes-intro { max-width: 850px; }
.makes-intro p { max-width: 780px; margin-top: 1rem; color: var(--text-soft); font-size: var(--fs-lg); }
.makes-marquee {
  position: relative;
  width: 100%;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-block: 1.5rem;
  overflow: hidden;
  border-block: 1px solid var(--line);
}
.makes-marquee::before,
.makes-marquee::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: min(9vw, 150px);
  content: "";
  pointer-events: none;
}
.makes-marquee::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.makes-marquee::after { right: 0; background: linear-gradient(-90deg, var(--surface), transparent); }
.makes-track { display: flex; width: max-content; animation: makes-scroll 46s linear infinite; }
.makes-marquee:hover .makes-track { animation-play-state: paused; }
.makes-list { display: flex; align-items: center; gap: clamp(3.5rem, 6vw, 7rem); margin: 0; padding: 0 clamp(3.5rem, 6vw, 7rem) 0 0; list-style: none; }
.makes-list li { display: grid; width: 104px; height: 58px; place-items: center; color: var(--text-soft); }
.make-logo {
  display: block;
  width: 92px;
  height: 48px;
  background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.makes-foot { max-width: 820px; margin-top: 2rem; color: var(--text-soft); }
@keyframes makes-scroll { to { transform: translateX(-50%); } }

/* Services: equal visual weight and a shared baseline. */
.service-head { max-width: 710px; }
.service-stage {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: stretch;
}
.service-main,
.service-chip {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.service-main > img,
.service-chip > img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: 7px;
  object-fit: cover;
}
.service-main__body,
.service-chip__body {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1.75rem 0 0;
}
.service-main h3,
.service-chip h3 { font-size: clamp(2rem, 3vw, 3.1rem); }
.service-main__body > p,
.service-chip__body > p { max-width: 620px; margin-top: 1rem; color: var(--text-soft); }
.service-facts { margin-top: 1.5rem; }
.service-main .service-action,
.service-chip .service-action {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: auto;
  padding-top: 2rem;
}
.service-main .btn { width: auto; }
.service-main .svc__price { display: block; }
.svc__price span { display: block; margin-top: 0.25rem; }
.svc__go { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 720; }
.svc__go .ic { width: 17px; height: 17px; }

.glass-range { background: var(--bg-sunken); }
.glass-range .svc-more .ic { background: var(--accent-soft); color: var(--accent); }
.cta { background: var(--ink-bg); color: var(--ink-text); }
.cta h2 { color: var(--ink-text); }
.cta p { color: var(--ink-soft); }
.cta .btn[href*="wa.me"] { background: var(--ink-surface); color: var(--ink-text); }

@media (max-width: 899px) {
  .review-layout,
  .service-stage { grid-template-columns: 1fr; }
  .review-score { display: block; }
  .review-card { flex-basis: 100%; min-height: 310px; }
  .service-stage { gap: 4rem; }
  .service-main__body,
  .service-chip__body { padding: 1.5rem 0 0; }
}

@media (max-width: 560px) {
  .brand__mark { width: 39px; height: 39px; }
  .brand__word { font-size: 1rem; }
  .review-card { min-height: 320px; }
  .service-main .service-action,
  .service-chip .service-action { align-items: stretch; flex-direction: column; }
  .service-main .btn { width: 100%; }
  .makes-list { gap: 3.5rem; padding-right: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .makes-marquee { overflow-x: auto; }
  .makes-track { animation: none; }
  .makes-list[aria-hidden="true"] { display: none; }
}

/* =========================================================
   Vehicle Auto Glass v12: restrained red, neutral large surfaces.
   Red signals action and emphasis. It never becomes a large block.
   ========================================================= */
:root {
  --accent: #b9342d;
  --accent-fill: #c43a32;
  --accent-hover: #9f2b26;
  --accent-soft: #f6e7e5;
  --accent-on: #ffffff;
  --ink-accent: #ef746d;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #ef746d;
    --accent-fill: #d84a42;
    --accent-hover: #ef665e;
    --accent-soft: #3a211f;
    --accent-on: #ffffff;
    --ink-accent: #ef746d;
  }
}

/* Keep large regions neutral. Red appears only at interaction scale. */
.trust { background: var(--ink-bg); }
.trust .ic { background: color-mix(in srgb, var(--accent-fill) 17%, transparent); color: var(--ink-accent); }
.cta { background: var(--ink-bg); }
.glass-range,
#coverage,
.reviews-section { background: var(--bg-sunken); }

/* Compact Google review carousel: three visible, one step at a time. */
.reviews-section { padding-block: clamp(4.5rem, 7vw, 6.5rem); }
.reviews-head { align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.reviews-head h2 { margin-top: 0.55rem; }
.reviews-source {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-soft);
  font-weight: 700;
  text-decoration: none;
}
.reviews-source:hover { color: var(--text); }
.review-layout { display: block; }
.review-slider { width: 100%; }
.review-track { gap: 1rem; padding: 0 0 0.5rem; }
.review-card {
  flex: 0 0 calc((100% - 2rem) / 3);
  min-height: 246px;
  padding: clamp(1.4rem, 2vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(16, 24, 32, 0.045);
}
.review-card__top { margin-bottom: 1.5rem; }
.review-card blockquote {
  max-width: 34ch;
  font-size: clamp(1.08rem, 1.35vw, 1.28rem);
  line-height: 1.38;
  letter-spacing: -0.025em;
}
.review-card figcaption { margin-top: 1.75rem; }
.review-avatar { width: 38px; height: 38px; font-size: 0.78rem; }
.review__who strong { font-size: 0.92rem; }
.review__who > span { margin-top: 0.18rem; font-size: 0.78rem; }
.review-controls { flex: 0 0 auto; }
.review-nav { width: 42px; height: 42px; }
.review-count { min-width: 104px; text-align: center; }
.reviews-origin {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.25rem;
  color: var(--text-faint);
  font-size: 0.82rem;
}
.reviews-origin a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-soft); font-weight: 680; }
.reviews-origin a:hover { color: var(--accent); }
.reviews-origin .ic { width: 14px; height: 14px; }

/* Manufacturer marks stay monochrome so red retains meaning. */
.makes-list li { color: var(--text-soft); transition: color 180ms ease; }
.makes-list li:hover { color: var(--accent); }

@media (max-width: 899px) {
  .review-card { flex-basis: calc((100% - 1rem) / 2); }
}

@media (max-width: 640px) {
  .reviews-section { padding-block: 3.75rem; }
  .reviews-head { gap: 1.5rem; }
  .review-card { flex-basis: 100%; min-height: 238px; }
  .review-card blockquote { font-size: 1.12rem; }
  .reviews-origin { display: block; line-height: 1.55; }
  .reviews-origin a { margin-top: 0.25rem; }
}

/* =========================================================
   Vehicle Auto Glass v13: production identity and corrected rails.
   ========================================================= */

/* Purpose-built windshield mark plus a tighter wordmark. */
.brand__mark,
.footer .brand__mark {
  width: 43px;
  height: 43px;
  border-radius: 0;
  background: url('../img/logo.png') center / contain no-repeat;
  color: transparent;
}
.brand__mark .ic { display: none; }
.brand__word {
  display: inline-flex;
  align-items: baseline;
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 720;
  letter-spacing: -0.045em;
}
.brand__word strong {
  margin-right: 0.22em;
  color: var(--accent-fill);
  font-weight: 860;
}
.footer .brand__word { color: var(--ink-text); }
.footer .brand__word strong { color: var(--ink-accent); }

/* Official WhatsApp green, always recognizable and accessible. */
.btn[href*="wa.me"],
.page-home .hero .btn[href*="wa.me"],
.menu__foot .btn[href*="wa.me"],
.cta .btn[href*="wa.me"] {
  background: #25d366;
  border-color: #25d366;
  color: #111b21;
  box-shadow: none;
}
.btn[href*="wa.me"] .ic,
.page-home .hero .btn[href*="wa.me"] .ic,
.menu__foot .btn[href*="wa.me"] .ic,
.cta .btn[href*="wa.me"] .ic { color: #111b21; }
.btn[href*="wa.me"]:hover,
.page-home .hero .btn[href*="wa.me"]:hover,
.menu__foot .btn[href*="wa.me"]:hover,
.cta .btn[href*="wa.me"]:hover {
  background: #20bd5a;
  border-color: #20bd5a;
  color: #111b21;
}

/* Two offers, equal media, compact rhythm and matched information. */
.offers-section { padding-block: clamp(4.5rem, 7vw, 6.5rem); }
.offers-section .service-head { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.offers-section .service-stage {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.25rem, 4vw, 4rem);
  align-items: stretch;
}
.offers-section .service-main,
.offers-section .service-chip { height: 100%; }
.offers-section .service-main > img,
.offers-section .service-chip > img {
  width: 100%;
  height: clamp(270px, 24vw, 350px);
  aspect-ratio: auto;
  border-radius: 7px;
  object-fit: cover;
}
.offers-section .service-main__body,
.offers-section .service-chip__body {
  height: 100%;
  padding: 1.5rem 0 0;
}
.offers-section .service-main h3,
.offers-section .service-chip h3 {
  font-size: clamp(1.8rem, 2.3vw, 2.45rem);
  line-height: 1.05;
}
.offers-section .service-main__body > p,
.offers-section .service-chip__body > p {
  min-height: 3.2em;
  margin-top: 0.85rem;
  font-size: 1rem;
  line-height: 1.55;
}
.offers-section .service-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.25rem;
  margin-top: 1.25rem;
}
.offers-section .service-facts li { align-items: flex-start; font-size: 0.9rem; line-height: 1.4; }
.offers-section .service-facts .ic { flex: 0 0 19px; width: 19px; height: 19px; }
.offers-section .service-action { margin-top: 1.5rem; padding-top: 0; }
.offers-section .service-main .btn {
  width: auto;
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--accent-on);
}
.offers-section .service-main .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.offers-section .svc__go { color: var(--accent); }

/* Real manufacturer-logo carousel with direct SVG images and manual controls. */
.makes-section { padding-block: clamp(4.5rem, 7vw, 6.5rem); background: var(--surface); }
.makes-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.makes-intro { max-width: 800px; }
.makes-intro p { margin-top: 0.9rem; }
.makes-controls { display: flex; flex: 0 0 auto; gap: 0.65rem; }
.makes-nav {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.makes-nav:hover { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-on); }
.makes-nav:active { transform: translateY(1px); }
.makes-nav .ic { width: 19px; height: 19px; }
.makes-nav--prev .ic { transform: rotate(180deg); }
.makes-carousel {
  width: 100%;
  margin-top: clamp(2rem, 4vw, 3rem);
  overflow-x: auto;
  border-block: 1px solid var(--line);
  background: var(--surface);
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.makes-carousel::-webkit-scrollbar { display: none; }
.makes-carousel .makes-list {
  display: grid;
  width: max-content;
  grid-auto-flow: column;
  grid-auto-columns: 158px;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.makes-carousel .makes-list li {
  display: grid;
  width: auto;
  height: 106px;
  place-items: center;
  border-right: 1px solid var(--line);
  color: inherit;
  scroll-snap-align: start;
}
.makes-carousel .makes-list li:last-child { border-right: 0; }
.makes-carousel .makes-list img {
  display: block;
  width: 92px;
  height: 50px;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 180ms ease, transform 180ms ease;
}
.makes-carousel .makes-list li:hover img { opacity: 1; transform: translateY(-2px); }
.makes-foot { max-width: 780px; margin-top: 1.35rem; color: var(--text-soft); }

@media (prefers-color-scheme: dark) {
  .makes-carousel .makes-list img { filter: invert(1); opacity: 0.74; }
}

@media (max-width: 899px) {
  .offers-section .service-stage { grid-template-columns: 1fr; gap: 3.5rem; }
  .offers-section .service-main > img,
  .offers-section .service-chip > img { height: auto; aspect-ratio: 16 / 10; }
  .offers-section .service-main__body > p,
  .offers-section .service-chip__body > p { min-height: 0; }
}

@media (max-width: 640px) {
  .brand__mark,
  .footer .brand__mark { width: 40px; height: 40px; }
  .brand__word { font-size: 0.98rem; }
  .offers-section,
  .makes-section { padding-block: 3.75rem; }
  .offers-section .service-facts { grid-template-columns: 1fr; }
  .offers-section .service-action { align-items: stretch; }
  .makes-head { align-items: flex-start; flex-direction: column; }
  .makes-controls { align-self: flex-end; }
  .makes-carousel .makes-list { grid-auto-columns: 132px; }
  .makes-carousel .makes-list li { height: 92px; }
  .makes-carousel .makes-list img { width: 78px; height: 44px; }
}

/* =========================================================
   Vehicle Auto Glass v14: exact compact Google review rail.
   Grid is intentional here so legacy flex-basis rules cannot
   expand a testimonial to the full desktop width.
   ========================================================= */
.reviews-section .review-layout { display: block; width: 100%; }
.reviews-section .review-slider { width: 100%; max-width: none; overflow: hidden; }
.reviews-section .review-track {
  display: grid;
  width: 100%;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2rem) / 3);
  gap: 1rem;
  overflow-x: auto;
  padding: 0 0 0.6rem;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.reviews-section .review-track::-webkit-scrollbar { display: none; }
.reviews-section .review-card {
  display: flex;
  width: auto;
  min-width: 0;
  max-width: none;
  min-height: 330px;
  flex: none;
  flex-direction: column;
  padding: 1.75rem;
  scroll-snap-align: start;
}
.reviews-section .review-card__top { margin-bottom: 1.65rem; }
.reviews-section .review-card blockquote {
  display: -webkit-box;
  max-width: 31ch;
  overflow: hidden;
  font-size: clamp(1.08rem, 1.25vw, 1.25rem);
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.reviews-section .review-card figcaption { margin-top: auto; padding-top: 1.75rem; }

@media (max-width: 899px) {
  .reviews-section .review-track { grid-auto-columns: calc((100% - 1rem) / 2); }
}

@media (max-width: 640px) {
  .reviews-section .review-track { grid-auto-columns: 100%; }
  .reviews-section .review-card { min-height: 290px; padding: 1.5rem; }
}

/* =========================================================
   Vehicle Auto Glass v15: equal offers, landscape review rail.
   ========================================================= */

/* Equal service cards, including media, content and actions. */
.offers-section .service-stage { align-items: stretch; }
.offers-section .service-main,
.offers-section .service-chip {
  display: grid;
  height: 100%;
  grid-template-rows: 340px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 16px 38px rgba(16, 24, 32, 0.055);
}
.offers-section .service-main > img,
.offers-section .service-chip > img {
  width: 100%;
  height: 340px !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  border-radius: 0;
  object-fit: cover;
}
.offers-section .service-main__body,
.offers-section .service-chip__body {
  display: flex;
  height: auto;
  min-height: 390px;
  flex-direction: column;
  padding: clamp(1.6rem, 2.5vw, 2.15rem);
}
.offers-section .service-main__body > p,
.offers-section .service-chip__body > p { min-height: 4.7em; }
.offers-section .service-facts { min-height: 3.2em; }
.offers-section .service-action {
  align-items: end;
  margin-top: auto;
  padding-top: 1.75rem;
}
.offers-section .service-action .btn {
  width: auto;
  min-width: 210px;
  justify-content: center;
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--accent-on);
}
.offers-section .service-action .btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-on);
}

/* Landscape reviews start on-grid and bleed cleanly to the viewport edge. */
.reviews-section .review-controls { gap: 0.65rem; }
.reviews-section .review-layout {
  width: calc(100vw - max(1rem, calc((100vw - var(--container)) / 2)));
  max-width: none;
}
.reviews-section .review-slider {
  width: 100%;
  max-width: none;
  overflow: visible;
}
.reviews-section .review-track {
  grid-auto-columns: min(520px, 41vw);
  overflow-x: auto;
  padding-right: max(1rem, calc((100vw - var(--container)) / 2));
}
.reviews-section .review-card {
  min-height: 255px;
  padding: 1.65rem 1.75rem;
}
.reviews-section .review-card__top { margin-bottom: 1.25rem; }
.reviews-section .review-card blockquote {
  max-width: 39ch;
  font-size: clamp(1.08rem, 1.15vw, 1.22rem);
  -webkit-line-clamp: 3;
}
.reviews-section .review-card figcaption { padding-top: 1.35rem; }

@media (max-width: 899px) {
  .offers-section .service-main,
  .offers-section .service-chip { grid-template-rows: auto auto; }
  .offers-section .service-main > img,
  .offers-section .service-chip > img { height: auto !important; aspect-ratio: 16 / 10 !important; }
  .offers-section .service-main__body,
  .offers-section .service-chip__body { min-height: 0; }
  .offers-section .service-main__body > p,
  .offers-section .service-chip__body > p,
  .offers-section .service-facts { min-height: 0; }
  .reviews-section .review-layout { width: calc(100vw - 2rem); }
  .reviews-section .review-track { grid-auto-columns: min(520px, 76vw); padding-right: 1rem; }
}

@media (max-width: 640px) {
  .offers-section .service-action .btn { width: 100%; min-width: 0; }
  .reviews-section .review-layout { width: calc(100vw - 1rem); }
  .reviews-section .review-track { grid-auto-columns: min(86vw, 420px); padding-right: 1rem; }
  .reviews-section .review-card { min-height: 245px; padding: 1.4rem; }
}

/* =========================================================
   Vehicle Auto Glass v16: production sales cards.
   Explicit columns reset prevents the earlier split-card
   rules from placing media and content beside each other.
   ========================================================= */
.offers-section .service-stage {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(1.5rem, 2.6vw, 2.5rem);
  align-items: stretch;
}

.offers-section .service-main,
.offers-section .service-chip {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 310px minmax(0, 1fr) !important;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(23, 31, 38, 0.06);
}

.offers-section .service-main > img,
.offers-section .service-chip > img {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: block;
  width: 100%;
  height: 310px !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  object-fit: cover;
}

.offers-section .service-main__body,
.offers-section .service-chip__body {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-rows: auto auto auto 1fr;
  min-width: 0;
  min-height: 340px;
  height: auto !important;
  padding: clamp(1.5rem, 2.4vw, 2rem) !important;
}

.offers-section .service-main h3,
.offers-section .service-chip h3 {
  margin: 0;
  font-size: clamp(1.8rem, 2.1vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.offers-section .service-main__body > p,
.offers-section .service-chip__body > p {
  min-height: 4.65em;
  margin: 0.9rem 0 0;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.55;
}

.offers-section .service-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1.25rem;
  min-height: 3.25em;
  margin: 1.35rem 0 0;
  padding: 0;
}

.offers-section .service-facts li {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.92rem;
  line-height: 1.42;
}

.offers-section .service-facts .ic {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  margin-top: 0.05rem;
  color: var(--accent);
}

.offers-section .service-action,
.offers-section .service-main .service-action,
.offers-section .service-chip .service-action {
  display: grid;
  grid-template-columns: auto minmax(210px, auto);
  align-self: end;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1.65rem;
  padding: 0;
}

.offers-section .svc__price {
  display: block !important;
  margin: 0;
}

.offers-section .svc__price b {
  display: block;
  color: var(--text);
  font-size: 2rem;
  line-height: 1;
}

.offers-section .svc__price span {
  display: block;
  margin-top: 0.4rem;
  color: var(--text-soft);
  line-height: 1.25;
}

.offers-section .service-action .btn,
.offers-section .service-main .btn,
.offers-section .service-chip .btn {
  width: 100%;
  min-width: 210px;
  min-height: 52px;
  justify-content: center;
  white-space: nowrap;
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--accent-on);
}

.offers-section .service-action .btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-on);
}

@media (max-width: 899px) {
  .offers-section .service-stage {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.5rem;
  }
  .offers-section .service-main,
  .offers-section .service-chip {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }
  .offers-section .service-main > img,
  .offers-section .service-chip > img {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
  .offers-section .service-main__body,
  .offers-section .service-chip__body {
    min-height: 0;
  }
  .offers-section .service-main__body > p,
  .offers-section .service-chip__body > p,
  .offers-section .service-facts {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .offers-section .service-main__body,
  .offers-section .service-chip__body {
    padding: 1.35rem !important;
  }
  .offers-section .service-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .offers-section .service-action,
  .offers-section .service-main .service-action,
  .offers-section .service-chip .service-action {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .offers-section .service-action .btn {
    min-width: 0;
  }
}

/* =========================================================
   Vehicle Auto Glass v17: direct contact in every page hero.
   ========================================================= */
.phero__actions {
  margin-top: clamp(1.5rem, 2.6vw, 2rem);
}

.phero__actions .btn {
  min-width: 202px;
  min-height: 54px;
  justify-content: center;
  white-space: nowrap;
}

.phero__actions .btn:not([href*="wa.me"]) {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--accent-on);
}

.phero__actions .btn:not([href*="wa.me"]):hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-on);
}

@media (max-width: 560px) {
  .phero h1 {
    max-width: 100%;
    font-size: clamp(2.35rem, 10.5vw, 2.65rem);
    line-height: 1;
    text-wrap: pretty;
  }

  .phero p {
    max-width: 100%;
    font-size: 1.08rem;
  }

  .phero__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .phero__actions .btn {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   Vehicle Auto Glass v20: full-width customer results carousel.
   ========================================================= */
.results-section {
  overflow: hidden;
  padding-block: clamp(4.5rem, 7vw, 6.75rem);
  background: var(--surface);
}

.results-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.results-head > div:first-child {
  max-width: 720px;
}

.results-head h2 {
  margin-bottom: 0.7rem;
}

.results-head p {
  margin: 0;
  color: var(--text-soft);
}

.results-controls {
  display: flex;
  flex: 0 0 auto;
  gap: 0.65rem;
}

.results-nav {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.results-nav:active {
  transform: translateY(1px);
}

.results-nav .ic {
  width: 19px;
  height: 19px;
}

.results-nav--prev .ic {
  transform: rotate(180deg);
}

.results-carousel {
  width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.results-carousel::-webkit-scrollbar {
  display: none;
}

.results-track {
  display: grid;
  width: max-content;
  grid-auto-flow: column;
  grid-auto-columns: clamp(270px, 25vw, 390px);
  gap: clamp(0.75rem, 1vw, 1rem);
  margin: 0;
  padding-inline: max(1rem, calc((100vw - var(--container)) / 2));
  list-style: none;
}

.results-slide {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 7px;
  background: var(--bg-sunken);
  scroll-snap-align: start;
}

.results-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 640px) {
  .results-section {
    padding-block: 3.75rem;
  }

  .results-head {
    align-items: flex-start;
  }

  .results-head p {
    max-width: 28ch;
  }

  .results-controls {
    align-self: flex-end;
  }

  .results-track {
    grid-auto-columns: min(78vw, 320px);
    gap: 0.75rem;
    padding-inline: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .results-carousel {
    scroll-behavior: auto;
  }
}

/* =========================================================
   Vehicle Auto Glass v21: light-footer brand contrast.
   ========================================================= */
.footer .brand__word {
  color: var(--text);
}

.footer .brand__word strong {
  color: var(--accent-fill);
}

/* Keep the main call action inside the red brand system. This
   overrides the obsolete gold hover left by an earlier palette. */
.page-home .hero .btns .btn:first-child:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-on);
}

/* Let the header flow into the page instead of boxing it with a rule. */
.header,
.header.stuck {
  border-bottom: 0;
  box-shadow: none;
}