/* ==========================================================================
   Han Revolution — Core Stylesheet
   Award-Winning Car Audio Specialist, Singapore (est. 2007)
   Palette: obsidian black + champagne gold. Dark-first, light-mode aware.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand — champagne gold ramp */
  --gold-100: #F7EBC8;
  --gold-200: #EEDCA0;
  --gold-300: #E3C878;
  --gold-400: #D4AF48;
  --gold-500: #C9A227;   /* core brand gold */
  --gold-600: #A8851C;
  --gold-700: #7C6114;

  /* Neutral — obsidian ramp */
  --ink-900: #08080A;    /* page base */
  --ink-850: #0D0D10;
  --ink-800: #121216;    /* raised surface */
  --ink-700: #1A1A20;    /* card */
  --ink-600: #24242C;    /* card hover / border-strong */
  --ink-500: #33333D;
  --ink-400: #4A4A57;
  --ink-300: #6E6E7E;
  --ink-200: #9A9AA8;
  --ink-100: #C9C9D2;
  --ink-050: #E8E8ED;

  /* Semantic */
  --bg:            var(--ink-900);
  --bg-raised:     var(--ink-800);
  --surface:       var(--ink-700);
  --surface-hover: var(--ink-600);
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --border-gold:   rgba(201,162,39,.38);

  --text:          #F4F4F6;
  --text-muted:    var(--ink-200);
  --text-subtle:   var(--ink-300);
  --accent:        var(--gold-500);
  --accent-soft:   var(--gold-300);
  --on-accent:     #0A0A0C;

  --success: #3FBF7F;
  --danger:  #E5484D;

  /* Type */
  --font-display: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fluid type scale */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9063rem;
  --fs-base: 1rem;
  --fs-md:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-lg:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-2xl:  clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
  --fs-3xl:  clamp(2.25rem, 1.7rem + 2.7vw, 3.75rem);
  --fs-4xl:  clamp(2.5rem, 1.85rem + 3.2vw, 4rem);

  /* Spacing — 4pt rhythm */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6.5rem;  --s-12: 8rem;

  /* Section rhythm */
  --section-y: clamp(3.5rem, 7vw, 7rem);
  --container: 1240px;
  --container-narrow: 780px;

  /* Radius + elevation */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 20px -6px rgba(0,0,0,.55);
  --shadow-lg: 0 24px 60px -18px rgba(0,0,0,.7);
  --shadow-gold: 0 12px 40px -12px rgba(201,162,39,.35);

  /* Motion */
  --ease-out: cubic-bezier(.22,.9,.32,1);
  --t-fast: 150ms; --t-base: 240ms; --t-slow: 380ms;

  /* Layer scale */
  --z-base: 1; --z-sticky: 40; --z-nav: 100; --z-overlay: 900; --z-modal: 1000;
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
p  { text-wrap: pretty; }

::selection { background: var(--gold-500); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Accessibility helpers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -60px; left: var(--s-4); z-index: var(--z-modal);
  background: var(--gold-500); color: var(--on-accent);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-md);
  font-weight: 600; transition: top var(--t-base) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--raised { background: var(--bg-raised); }
.section--hairline { border-top: 1px solid var(--border); }

.stack > * + * { margin-top: var(--s-4); }
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY UTILITIES
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500));
}
.eyebrow--center::before { display: none; }

.section-title { margin-top: var(--s-3); }
.section-lede {
  margin-top: var(--s-4);
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: 62ch;
}
.text-center { text-align: center; }
.text-center .section-lede { margin-inline: auto; }
.text-gold { color: var(--accent); }
.text-muted { color: var(--text-muted); }

/* Direct-answer block — AEO/GEO: gives AI engines a clean extractable answer */
.answer {
  border-left: 3px solid var(--gold-500);
  background: linear-gradient(90deg, rgba(201,162,39,.07), transparent 70%);
  padding: var(--s-4) var(--s-5);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-md);
  color: var(--ink-050);
  margin-block: var(--s-4);
}
.answer strong { color: var(--accent-soft); font-weight: 600; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--on-accent);
  box-shadow: var(--shadow-gold);
}
.btn--primary:hover { background: linear-gradient(135deg, var(--gold-300), var(--gold-500)); }

.btn--ghost {
  border: 1px solid var(--border-strong);
  color: var(--text);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--gold-500); color: var(--accent-soft); background: rgba(201,162,39,.06); }

.btn--gold-outline { border: 1px solid var(--border-gold); color: var(--accent-soft); }
.btn--gold-outline:hover { background: var(--gold-500); color: var(--on-accent); border-color: var(--gold-500); }

.btn--sm { min-height: 42px; padding: var(--s-2) var(--s-5); font-size: var(--fs-xs); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn-row--center { justify-content: center; }

/* Inline text link with animated underline */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--accent); font-weight: 600; font-size: var(--fs-sm);
  transition: gap var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.link-arrow:hover { gap: var(--s-3); color: var(--gold-300); }
.link-arrow svg { transition: transform var(--t-base) var(--ease-out); }

/* --------------------------------------------------------------------------
   6. NAVIGATION
   -------------------------------------------------------------------------- */
/* NOTE: backdrop-filter must NOT sit on .site-header itself — it would make the
   header a containing block for the position:fixed mobile drawer, collapsing the
   drawer to header height. It lives on a pseudo-element layer instead. */
.site-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: transparent;
  border-bottom: 1px solid var(--border);
  transition: border-color var(--t-base) var(--ease-out);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(8,8,10,.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: background var(--t-base) var(--ease-out);
}
.site-header[data-scrolled="true"]::before { background: rgba(8,8,10,.94); }
.site-header[data-scrolled="true"] { border-bottom-color: var(--border-strong); }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: 76px;
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav__link, .nav__toggle { padding-inline: var(--s-3); font-size: var(--fs-xs); }
  .nav__phone span { display: none; }
}

.brand { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
.brand__mark { width: 38px; height: 38px; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.0625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text);
}
.brand__tag {
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
}

.nav__menu {
  display: flex; align-items: center; gap: var(--s-1);
  list-style: none; padding: 0; margin: 0;
}
.nav__link {
  display: block; position: relative;
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-100); border-radius: var(--r-md);
  transition: color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.nav__link:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav__link[aria-current="page"] { color: var(--accent); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--s-4); right: var(--s-4); bottom: 2px;
  height: 2px; background: var(--gold-500); border-radius: 2px;
}

.nav__actions { display: flex; align-items: center; gap: var(--s-3); }
.nav__phone {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  white-space: nowrap; flex-shrink: 0;
  transition: color var(--t-base) var(--ease-out);
}
.nav__phone:hover { color: var(--accent); }
.nav__phone svg { color: var(--accent); flex-shrink: 0; }

/* Dropdown */
.nav__item--has-menu { position: relative; }
.nav__toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-100);
  border-radius: var(--r-md);
  transition: color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.nav__toggle:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav__toggle svg { transition: transform var(--t-base) var(--ease-out); }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 260px; padding: var(--s-2);
  background: var(--ink-800);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              visibility var(--t-base);
}
.nav__item--has-menu:hover .nav__dropdown,
.nav__toggle[aria-expanded="true"] + .nav__dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__dropdown a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--ink-100);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.nav__dropdown a:hover { background: rgba(201,162,39,.1); color: var(--text); }
.nav__dropdown .price { font-size: var(--fs-xs); color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Burger */
.nav__burger {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  color: var(--text);
}
.nav__burger:hover { border-color: var(--gold-500); color: var(--accent); }
.nav__burger span {
  display: block; width: 20px; height: 2px; background: currentColor;
  border-radius: 2px; position: relative;
  transition: background var(--t-fast) var(--ease-out);
}
.nav__burger span::before, .nav__burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--t-base) var(--ease-out), top var(--t-base) var(--ease-out);
}
.nav__burger span::before { top: -6px; }
.nav__burger span::after  { top: 6px; }
.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(4rem, 10vw, 8rem) clamp(4rem, 9vw, 7rem);
  background: var(--ink-900);
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 70% 60% at 15% 0%,  rgba(201,162,39,.16), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 20%, rgba(201,162,39,.09), transparent 62%),
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(120,90,20,.13), transparent 65%);
}
/* Soundwave motif — pure CSS, zero image weight */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.02)  0 1px, transparent 1px 62px);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
}

.hero__inner { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 980px) { .hero__inner { grid-template-columns: 1.12fr .88fr; } }

.hero__title { font-size: var(--fs-4xl); font-weight: 700; letter-spacing: -.03em; }
.hero__title .accent {
  background: linear-gradient(120deg, var(--gold-200), var(--gold-500) 55%, var(--gold-300));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero__lede {
  margin-top: var(--s-5); font-size: var(--fs-md);
  color: var(--ink-100); max-width: 56ch;
}
.hero__cta { margin-top: var(--s-7); }

.hero__trust {
  display: grid; gap: var(--s-5) var(--s-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 460px;
  margin-top: var(--s-8); padding-top: var(--s-6);
  border-top: 1px solid var(--border);
  list-style: none; padding-inline: 0;
}
@media (min-width: 1280px) {
  .hero__trust { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
}
.hero__trust li { display: flex; flex-direction: column; gap: 2px; }
.hero__trust .n {
  font-family: var(--font-display); font-size: var(--fs-xl);
  font-weight: 700; color: var(--accent); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero__trust .l {
  font-size: var(--fs-xs); color: var(--text-subtle);
  text-transform: uppercase; letter-spacing: .1em;
}

/* Hero visual — real championship install photo */
.hero__visual {
  position: relative; aspect-ratio: 4 / 3.4;
  border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,162,39,.2), transparent 62%),
    linear-gradient(165deg, var(--ink-700), var(--ink-900));
  box-shadow: var(--shadow-lg);
  display: grid; place-items: center;
}
.hero__visual-inner { width: 100%; height: 100%; padding: clamp(1.5rem,4vw,2.75rem); display: flex; flex-direction: column; justify-content: space-between; }
.hero__visual > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero__visual::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(6,6,8,.97) 0%, rgba(6,6,8,.88) 22%,
                    rgba(6,6,8,.28) 55%, rgba(6,6,8,.5) 100%);
}
.hero__visual .hero__visual-inner { position: relative; z-index: 2; }
.hero__badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  background: rgba(6,6,8,.72); border: 1px solid var(--border-gold);
  backdrop-filter: blur(8px);
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.eq {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(4px, 1.1vw, 9px); height: 58%;
}
.eq span {
  flex: 1; max-width: 16px; border-radius: var(--r-pill);
  background: linear-gradient(to top, var(--gold-600), var(--gold-300));
  transform-origin: bottom;
  animation: eq-pulse 1.5s var(--ease-out) infinite alternate;
  opacity: .92;
}
@keyframes eq-pulse { from { height: 14%; } to { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .eq span { animation: none; height: 62%; } }

.hero__visual-caption { text-align: left; }
.hero__visual-caption .t {
  font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: 600; color: var(--text);
}
.hero__visual-caption .s { font-size: var(--fs-sm); color: var(--ink-100); margin-top: var(--s-1); max-width: 42ch; }

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: border-color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.card:hover { border-color: var(--border-gold); background: var(--surface-hover); transform: translateY(-3px); box-shadow: var(--shadow-md); }

.card__icon {
  width: 48px; height: 48px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: var(--s-4);
  background: rgba(201,162,39,.11);
  border: 1px solid var(--border-gold);
  color: var(--accent);
}
.card__title { font-size: var(--fs-lg); }
.card__body { margin-top: var(--s-3); color: var(--text-muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   9. PACKAGE / PRICING TIERS
   -------------------------------------------------------------------------- */
.tiers { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.tier {
  display: flex; flex-direction: column;
  position: relative;
  background: linear-gradient(180deg, var(--ink-700), var(--ink-800));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: border-color var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.tier:hover { border-color: var(--border-gold); transform: translateY(-4px); box-shadow: var(--shadow-md); }

.tier--featured {
  border-color: var(--gold-500);
  box-shadow: var(--shadow-gold);
  background: linear-gradient(180deg, rgba(201,162,39,.09), var(--ink-800) 45%);
}
.tier__badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--on-accent);
  font-family: var(--font-display); font-size: .6875rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: var(--s-1) var(--s-4); border-radius: var(--r-pill);
  white-space: nowrap;
}

.tier__name {
  font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.tier__for { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: var(--s-1); }

.tier__price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-4); border-top: 1px solid var(--border);
}
.tier__price .now {
  font-family: var(--font-display); font-size: var(--fs-2xl);
  font-weight: 700; color: var(--text); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tier__price .was {
  font-size: var(--fs-sm); color: var(--text-subtle);
  text-decoration: line-through; font-variant-numeric: tabular-nums;
}
/* Own line (so cards align regardless of price width), sized to its content */
.tier__savewrap { margin-top: var(--s-2); }
.tier__save {
  display: inline-block;
  font-size: var(--fs-xs); font-weight: 600; color: var(--success);
  background: rgba(63,191,127,.12); border: 1px solid rgba(63,191,127,.28);
  padding: 2px var(--s-2); border-radius: var(--r-pill);
}
.tier__note { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: var(--s-2); }

.tier__list { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: var(--s-3); flex: 1; }
.tier__list li { display: flex; gap: var(--s-3); font-size: var(--fs-sm); color: var(--ink-100); line-height: 1.5; }
.tier__list svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); }
.tier__list b { color: var(--text); font-weight: 600; }
.tier__cta { margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   10. COMPARISON TABLE  (high-value for AI answer extraction)
   -------------------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
}
.cmp { width: 100%; border-collapse: collapse; min-width: 720px; font-size: var(--fs-sm); }
.cmp caption {
  text-align: left; padding: var(--s-5) var(--s-5) var(--s-3);
  color: var(--text-muted); font-size: var(--fs-sm);
}
.cmp th, .cmp td { padding: var(--s-4) var(--s-5); text-align: left; vertical-align: top; }
.cmp thead th {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid var(--border-strong);
  background: var(--ink-800); position: sticky; top: 0;
}
.cmp tbody tr { border-bottom: 1px solid var(--border); }
.cmp tbody tr:last-child { border-bottom: 0; }
.cmp tbody tr:hover { background: rgba(255,255,255,.025); }
.cmp tbody th {
  font-family: var(--font-display); font-weight: 600; color: var(--text);
  letter-spacing: .04em; white-space: nowrap;
}
.cmp td { color: var(--text-muted); }
.cmp .price-cell { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --------------------------------------------------------------------------
   11. AWARDS / ACHIEVEMENTS
   -------------------------------------------------------------------------- */
.award-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.award {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.award:hover { border-color: var(--border-gold); background: var(--surface-hover); }
.award__medal {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-600));
  color: var(--on-accent);
  box-shadow: 0 4px 14px -4px rgba(201,162,39,.5);
}
.award__medal--silver { background: linear-gradient(135deg, #D8D8DE, #8E8E99); color: #1A1A20; box-shadow: 0 4px 14px -4px rgba(200,200,210,.35); }
.award__title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); line-height: 1.4; }
.award__meta { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: var(--s-1); }

/* Brand logo wall — real supplier logos, desaturated until hover */
.brand-strip {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  list-style: none; padding: 0; margin: 0;
}
.brand-strip li {
  display: grid; place-items: center;
  min-height: 78px; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: rgba(255,255,255,.015);
  transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.brand-strip li:hover { border-color: var(--border-gold); background: rgba(201,162,39,.05); }
.brand-strip img {
  max-height: 44px; width: auto; max-width: 100%;
  object-fit: contain;
  opacity: .82;
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.brand-strip li:hover img { opacity: 1; transform: scale(1.04); }
/* Square emblems need more height than wide wordmarks to read at the same weight */
.brand-strip .brand-logo--tall { max-height: 60px; }
/* Text fallback for the two brands with no logo file */
.brand-strip .txt {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-200);
}
.brand-strip li:hover .txt { color: var(--accent); }

/* --------------------------------------------------------------------------
   11b. MEDIA
   -------------------------------------------------------------------------- */
.media {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--ink-700), var(--ink-900));
  margin: 0;
}
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--wide  { aspect-ratio: 16 / 10; }
.media--photo { aspect-ratio: 4 / 3; }
.media--tall  { aspect-ratio: 3 / 4; }
.media--product { aspect-ratio: 16 / 9; background: none; border: 0; }
.media--product img { object-fit: contain; }

.media figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s-6) var(--s-5) var(--s-4);
  background: linear-gradient(to top, rgba(6,6,8,.94) 15%, rgba(6,6,8,.6) 60%, transparent);
  font-size: var(--fs-sm); color: var(--ink-050);
}
.media figcaption b { display: block; font-family: var(--font-display);
  font-size: var(--fs-base); font-weight: 600; color: var(--accent-soft); margin-bottom: 2px; }

/* Photo card used for award / gallery grids */
.shot {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
  transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.shot:hover { border-color: var(--border-gold); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.shot__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-850); }
.shot__img img { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out); }
.shot:hover .shot__img img { transform: scale(1.035); }
.shot__body { padding: var(--s-4) var(--s-5) var(--s-5); display: flex; gap: var(--s-3); align-items: flex-start; }
.shot__body .award__medal { width: 34px; height: 34px; font-size: var(--fs-xs); }
.shot__title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); line-height: 1.4; }
.shot__meta { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 2px; }

/* Package hero shot inside a pricing tier */
.tier__media {
  width: 100%; height: auto; display: block;
  margin: 0 0 var(--s-4);
  border-radius: var(--r-md);
  background: radial-gradient(ellipse at 50% 60%, rgba(201,162,39,.10), transparent 70%);
}

/* Component product shot inside a spec card */
.spec-card__media {
  width: 100%; max-width: 260px; height: auto; display: block;
  margin: 0 auto var(--s-3);
}

/* Service card: photo on top where we have one, a designed icon panel where we
   do not. Both use the same 16:10 box so the grid stays even. */
.svc { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.svc__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-850); }
.svc__media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-slow) var(--ease-out); }
.svc:hover .svc__media img { transform: scale(1.04); }
.svc__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,10,.62), transparent 55%);
}
/* Panel used when no photograph of that service exists */
.svc__media--panel {
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse 80% 90% at 50% 20%, rgba(201,162,39,.14), transparent 65%),
    linear-gradient(150deg, var(--ink-700), var(--ink-850));
  border-bottom: 1px solid var(--border);
}
.svc__media--panel::after { display: none; }
.svc__glyph {
  position: relative; display: grid; place-items: center;
  width: 86px; height: 86px; border-radius: 50%;
  color: var(--gold-300);
  background: radial-gradient(circle at 50% 40%, rgba(201,162,39,.20), rgba(201,162,39,.05) 70%);
  border: 1px solid var(--border-gold);
  box-shadow: 0 10px 34px -14px rgba(201,162,39,.55);
}
.svc__glyph::after {
  content: ""; position: absolute; inset: -10px;
  border-radius: 50%; border: 1px solid rgba(201,162,39,.16);
}
.svc:hover .svc__glyph { border-color: var(--gold-500); }
.svc__media--panel .grid-lines {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.03) 0 1px, transparent 1px 34px);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 80%);
}
.svc__body { padding: var(--s-5) var(--s-5) var(--s-6); }
.svc__body h3 { font-size: var(--fs-md); }
.svc__body p { margin-top: var(--s-2); color: var(--text-muted); font-size: var(--fs-sm); }

/* Tesla product gallery — compact 3-up thumbs so the image column stays
   balanced against the text column even with 5-6 photos per product.
   Clicking a thumb swaps the big photo above it (see main.js). */
.prod__thumbs { display: grid; gap: var(--s-3); margin-top: var(--s-3);
  grid-template-columns: repeat(3, 1fr); }

.prod__thumb {
  display: block; padding: 0; margin: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; aspect-ratio: 4 / 3; background: var(--ink-850);
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.prod__thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-base) var(--ease-out);
  opacity: .78; }
.prod__thumb:hover img,
.prod__thumb:focus-visible img { transform: scale(1.05); opacity: 1; }
.prod__thumb:hover { border-color: var(--border-gold); }

/* Which photo is on show above */
.prod__thumb.is-current { border-color: var(--gold-500); box-shadow: var(--shadow-gold); }
.prod__thumb.is-current img { opacity: 1; }

/* Crossfade when the big photo changes */
.prod__stage img { transition: opacity var(--t-base) var(--ease-out); }
.prod__stage.is-swapping img { opacity: 0; }

/* No JS: the thumbs are still photos, just not switchable */
.no-js .prod__thumb { cursor: default; }
.no-js .prod__thumb img { opacity: 1; }

/* Vehicle build gallery */
.build { margin-top: var(--s-7); }
.build__head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
.build__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
.build__kit { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.build__shots { display: grid; gap: var(--s-4); margin-top: var(--s-4);
  /* auto-fill (not auto-fit) keeps empty tracks, so a 2-photo row stays the same
     size as a 3-photo row instead of stretching to fill the width */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.build__shots figure { margin: 0; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--border); aspect-ratio: 16 / 9; background: var(--ink-850); }
.build__shots img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-slow) var(--ease-out); }
.build__shots figure:hover img { transform: scale(1.05); }

/* --------------------------------------------------------------------------
   12. STEPS / PROCESS
   -------------------------------------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-5); counter-reset: step; }
@media (min-width: 780px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { position: relative; padding-top: var(--s-6); counter-increment: step; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .1em; color: var(--accent);
}
.steps li::after {
  content: ""; position: absolute; top: 10px; left: 34px; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--border-gold), transparent);
}
.steps li:last-child::after { display: none; }
.steps h3 { font-size: var(--fs-base); }
.steps p { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--s-2); }

/* Masonry-ish gallery for the achievements page */
.gallery { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gallery figure { margin: 0; }
.gallery .media { height: 100%; }

/* --------------------------------------------------------------------------
   13. FAQ / ACCORDION
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--s-3); }
.faq details {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color var(--t-base) var(--ease-out);
}
.faq details[open] { border-color: var(--border-gold); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 500;
  color: var(--text); min-height: 56px;
  transition: color var(--t-fast) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 11px; height: 11px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--t-base) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq__answer { padding: 0 var(--s-5) var(--s-5); color: var(--text-muted); font-size: var(--fs-sm); }
.faq__answer > * + * { margin-top: var(--s-3); }
.faq__answer a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Jump-links row, e.g. the FAQ "on this page" nav */
.toc-chips {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  list-style: none; padding: 0; margin: var(--s-4) 0 0;
}
.toc-chips a {
  display: inline-flex; align-items: center; min-height: 42px;
  padding: var(--s-2) var(--s-5);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  font-size: var(--fs-sm); color: var(--text-muted);
  transition: color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}
.toc-chips a:hover {
  color: var(--accent); border-color: var(--border-gold);
  background: rgba(201,162,39,.07);
}

/* --------------------------------------------------------------------------
   14. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-100); }
.field .req { color: var(--accent); }
.field .hint { font-size: var(--fs-xs); color: var(--text-subtle); }

.field input, .field select, .field textarea {
  width: 100%; min-height: 50px;
  padding: var(--s-3) var(--s-4);
  background: var(--ink-850);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text); font-size: var(--fs-base);
  transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.field textarea { min-height: 130px; resize: vertical; padding-top: var(--s-3); line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-400); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-500); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-500);
  background: var(--ink-800);
  box-shadow: 0 0 0 3px rgba(201,162,39,.16);
}
.field select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s-4) center;
  padding-right: var(--s-8);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--danger);
}
.field__error { font-size: var(--fs-xs); color: var(--danger); display: none; }
.field__error[data-visible="true"] { display: block; }

.form__status {
  padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  font-size: var(--fs-sm); display: none;
}
.form__status[data-state="success"] {
  display: block; background: rgba(63,191,127,.1);
  border: 1px solid rgba(63,191,127,.32); color: #8FE3B8;
}
.form__status[data-state="error"] {
  display: block; background: rgba(229,72,77,.1);
  border: 1px solid rgba(229,72,77,.32); color: #F2A0A2;
}

/* --------------------------------------------------------------------------
   15. CTA BANNER
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-gold);
  background:
    radial-gradient(ellipse 80% 130% at 12% 0%, rgba(201,162,39,.2), transparent 62%),
    linear-gradient(140deg, var(--ink-700), var(--ink-900));
  padding: clamp(2.25rem, 5vw, 3.75rem);
  text-align: center;
}
.cta-band h2 { font-size: var(--fs-2xl); }
.cta-band p { margin-top: var(--s-4); color: var(--ink-100); max-width: 60ch; margin-inline: auto; }
.cta-band .btn-row { margin-top: var(--s-7); }

/* --------------------------------------------------------------------------
   16. INFO / NAP BLOCKS
   -------------------------------------------------------------------------- */
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-5); }
.info-list li { display: flex; gap: var(--s-4); }
.info-list svg { flex-shrink: 0; color: var(--accent); margin-top: 3px; }
.info-list .k {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-subtle); display: block; margin-bottom: 2px;
}
.info-list .v { color: var(--text); font-size: var(--fs-sm); line-height: 1.55; }
.info-list .v a:hover { color: var(--accent); }

.map-frame {
  width: 100%; aspect-ratio: 16/10; border: 0;
  border-radius: var(--r-lg); filter: grayscale(.35) contrast(1.05);
  background: var(--surface);
}

/* --------------------------------------------------------------------------
   17. PAGE HEADER (inner pages)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--border);
  background: var(--ink-850);
}
.page-head::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 120% at 10% 0%, rgba(201,162,39,.13), transparent 62%);
}
.page-head > * { position: relative; }
.page-head h1 { margin-top: var(--s-3); }
.page-head .section-lede { margin-top: var(--s-4); }

/* Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); list-style: none; padding: 0; margin: 0; }
.crumbs li { display: flex; align-items: center; gap: var(--s-2); color: var(--text-subtle); }
.crumbs li:not(:last-child)::after { content: "/"; color: var(--ink-400); }
.crumbs a { color: var(--text-muted); transition: color var(--t-fast) var(--ease-out); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--accent); }

/* --------------------------------------------------------------------------
   18. SPEC LIST (package detail)
   -------------------------------------------------------------------------- */
.spec-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-6);
}
.spec-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.spec-card__brand {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.spec-card h3 { margin-top: var(--s-1); font-size: var(--fs-md); }
.spec-card__model { font-size: var(--fs-xs); color: var(--text-subtle); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.spec-table { width: 100%; border-collapse: collapse; margin-top: var(--s-4); font-size: var(--fs-sm); }
.spec-table tr { border-top: 1px solid var(--border); }
.spec-table th { text-align: left; padding: var(--s-3) 0; color: var(--text-subtle); font-weight: 400; width: 45%; }
.spec-table td { text-align: right; padding: var(--s-3) 0; color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink-850);
  border-top: 1px solid var(--border);
  padding-block: var(--s-9) var(--s-6);
  margin-top: auto;
}
.footer__grid { display: grid; gap: var(--s-8); }
@media (min-width: 760px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1020px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.footer__about { max-width: 40ch; }
.footer__about p { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--text-muted); }
.footer h4, .footer__h {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  margin-bottom: var(--s-4); line-height: 1.4;
}
.footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.footer__links a { font-size: var(--fs-sm); color: var(--text-muted); transition: color var(--t-fast) var(--ease-out); }
.footer__links a:hover { color: var(--accent); }

.footer__contact { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); font-size: var(--fs-sm); }
.footer__contact li { display: flex; gap: var(--s-3); color: var(--text-muted); }
.footer__contact svg { flex-shrink: 0; color: var(--accent); margin-top: 3px; }
.footer__contact a:hover { color: var(--accent); }

.socials { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.socials a {
  width: 42px; height: 42px; border-radius: var(--r-md);
  display: grid; place-items: center;
  /* White marks: brand glyphs read as solid shapes, so a muted grey made them
     look switched-off next to the gold line icons above them. */
  border: 1px solid var(--border-strong); color: #fff;
  transition: color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.socials a:hover { color: var(--accent); border-color: var(--border-gold); background: rgba(201,162,39,.08); }

.footer__bottom {
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--text-subtle);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer__bottom a:hover { color: var(--accent); }
/* developer credit — last item in the footer nav, deliberately understated.
   Same muted tone as its siblings so it does not draw the eye, and it lifts to
   grey rather than gold on hover so it reads as a credit rather than as one of
   the site's own links. Not dimmed below that: an invisible link that only a
   crawler benefits from is cloaking, and this stays readable. */
.footer__credit { white-space: nowrap; font-weight: 400; }
.footer__bottom nav a.footer__credit:hover { color: #2d3436 }

/* --------------------------------------------------------------------------
   20. FLOATING WHATSAPP
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: var(--z-sticky);
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  /* Official WhatsApp green with a white mark — the brand's own usage guidance */
  background: #25D366; color: #fff;
  box-shadow: 0 10px 30px -8px rgba(37,211,102,.55);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.wa-float:hover { transform: scale(1.07); box-shadow: 0 14px 38px -8px rgba(37,211,102,.7); }
.wa-float:active { transform: scale(.98); }

/* --------------------------------------------------------------------------
   21. SCROLL REVEAL
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   22. MOBILE NAV + RESPONSIVE
   -------------------------------------------------------------------------- */
/* Squeeze band: 8 nav items + phone + CTA don't fit between 1024-1220px.
   Drop the phone number text (icon keeps the tap target) and tighten links. */
@media (min-width: 1024px) and (max-width: 1220px) {
  .nav__phone { display: none; }        /* CTA + WhatsApp float still reach us */
  .nav__link, .nav__toggle { padding-inline: var(--s-2); font-size: var(--fs-xs); }
  .nav { gap: var(--s-2); }
  .brand__tag { display: none; }
}

@media (max-width: 1023px) {
  .nav__burger { display: inline-flex; }
  .nav__phone span { display: none; }

  .nav__menu {
    position: fixed; top: 76px; left: 0; right: 0; bottom: 0;
    height: auto; max-height: calc(100dvh - 76px);
    z-index: var(--z-overlay);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: var(--s-1);
    padding: var(--s-5) clamp(1.25rem, 4vw, 2.5rem) var(--s-9);
    background: var(--ink-900);
    border-top: 1px solid var(--border);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--t-slow) var(--ease-out), visibility var(--t-slow);
  }
  .nav__menu[data-open="true"] { transform: translateX(0); visibility: visible; }

  .nav__link, .nav__toggle {
    width: 100%; padding: var(--s-4) var(--s-3);
    font-size: var(--fs-md); border-bottom: 1px solid var(--border);
    border-radius: 0; min-height: 56px; display: flex; align-items: center;
  }
  .nav__toggle { justify-content: space-between; }
  .nav__link[aria-current="page"]::after { display: none; }

  .nav__item--has-menu { width: 100%; }
  .nav__dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none;
    min-width: 0; padding: 0 0 var(--s-3) var(--s-4);
    display: none;
  }
  .nav__toggle[aria-expanded="true"] + .nav__dropdown { display: block; }
  .nav__dropdown a { min-height: 48px; }

  body[data-nav-open="true"] { overflow: hidden; }
}

/* Drawer-only CTA: hidden on desktop, shown inside the mobile menu */
.nav__cta { display: none; }
@media (max-width: 1023px) {
  .nav__cta { display: block; margin-top: var(--s-5); border-bottom: 0 !important; }
  .nav__cta .btn { width: 100%; }
}

/* Below 700px the header CTA no longer fits beside the burger — drop it.
   The drawer CTA, the phone icon and the WhatsApp float all still cover it. */
@media (max-width: 699px) {
  .nav__actions > .btn { display: none; }
  .nav { gap: var(--s-3); }
}

@media (max-width: 560px) {
  .hero__trust .n { font-size: var(--fs-lg); }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .nav__actions .btn { width: auto; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__name { font-size: 1rem; letter-spacing: .08em; }
}

@media (max-width: 380px) {
  .brand__tag { display: none; }
}

/* --------------------------------------------------------------------------
   23. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .wa-float, .btn, .nav { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .tier, .spec-card { border: 1px solid #ccc; break-inside: avoid; }
}


/* ==========================================================================
   CUSTOMER REVIEWS  —  sits above the FAQ on every page that has one
   ========================================================================== */
.reviews { text-align: center; }
.reviews__title { max-width: 34ch; margin-inline: auto; }
.reviews__title span { color: var(--accent); }

/* eyebrow with a rule either side */
.eyebrow--rules { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.eyebrow--rules::before,
.eyebrow--rules::after {
  content: ""; display: block;          /* .eyebrow--center::before hides it earlier */
  height: 1px; width: clamp(1.5rem, 6vw, 3.5rem);
  background: var(--border-gold);
}

/* the Google rating pill */
.gbadge {
  display: inline-flex; align-items: center; gap: .9rem;
  margin-top: 2rem; padding: .7rem 1.6rem .7rem .7rem;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 999px; text-align: left;
}
.gbadge__g {
  flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--gold-300), var(--gold-600));
  color: var(--ink-900); font-weight: 700; font-size: 1.25rem; line-height: 1;
}
.gbadge__body { display: flex; flex-direction: column; gap: .1rem; }
.gbadge__top  { display: flex; align-items: center; gap: .6rem; }
.gbadge__top strong { color: var(--text); font-size: 1.15rem; letter-spacing: .01em; }
.gbadge__sub  { color: var(--text-muted); font-size: .85rem; }

.stars { display: inline-flex; gap: .12em; line-height: 1; }
.stars__s { color: var(--gold-400); font-size: 1.05em; }
.stars__s--off { color: var(--ink-500); }

/* cards */
.reviews__grid {
  display: grid; gap: 1.5rem; margin-top: 3rem; text-align: left;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
}
.review {
  position: relative; margin: 0; padding: 1.85rem 1.75rem 1.6rem;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 18px; display: flex; flex-direction: column; gap: 1.15rem;
}
.review__mark {
  position: absolute; top: .45rem; right: 1.15rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.25rem; line-height: 1; color: var(--gold-500);
  opacity: .22; pointer-events: none;
}
.review blockquote { margin: 0; }
.review blockquote p {
  margin: 0; color: var(--text); font-size: 1rem; line-height: 1.72;
}
.review figcaption {
  display: flex; align-items: center; gap: .85rem;
  margin-top: auto; padding-top: 1.15rem; border-top: 1px solid var(--border);
}
.review__av {
  flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--gold-300), var(--gold-600));
  color: var(--ink-900); font-weight: 700; font-size: .95rem; letter-spacing: .02em;
}
.review__id   { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.review__who  { color: var(--text); font-weight: 600; font-size: .975rem; }
.review__meta { color: var(--text-muted); font-size: .85rem; }

.reviews__cta { margin-top: 2.75rem; }

@media (max-width: 640px) {
  .reviews__grid { grid-template-columns: 1fr; margin-top: 2.25rem; }
  .review { padding: 1.5rem 1.35rem 1.35rem; }
  .gbadge { padding-right: 1.25rem; }
}