/* Self-hosted Outfit — one variable-font file covers weights 100-900,
   see assets/fonts/outfit/. Replaces the Google Fonts CDN request for Inter. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit/Outfit-Variable.woff2') format('woff2');
}

/*
 * ECAR design tokens.
 *
 * COLOR ROLES — read this before editing anything below.
 *
 *   Navy is the brand's *surface* color, not its interactive color.
 *   On a near-black page a mid-navy sits at ~2:1 against the background,
 *   so navy text and navy focus rings were effectively invisible — which
 *   is why hover states used to make text *darker* than its resting state.
 *   Navy now only ever appears as a fill, a panel, or a hairline.
 *
 *   --ecar-accent (warm bone) is the interactive + signal color: focus
 *   rings, active accordion marks, hovered numerals, the primary CTA fill.
 *   It reads at ~13:1 on the page background, which is what makes an
 *   accent system work in the dark without resorting to neon or glow.
 *
 *   --ecar-gold (warm metal) is the brand's *decorative* warm tone: every
 *   icon, the review stars, section eyebrows, price figures, hairline rules
 *   on warm panels. It never fills a button and never carries a focus ring —
 *   that stays --ecar-accent, so "gold thing" and "clickable thing" are
 *   never the same signal.
 *
 *   Silver/white remains the workhorse for hovered text.
 */
:root {
  /* --- Surfaces --- */
  --ecar-bg: #0A0A0A;
  --ecar-bg-raised: #0E0E0E;     /* alternating band, barely-there step */
  --ecar-bg-secondary: #111111;  /* denser bands: brand strip, reviews */
  --ecar-surface: #151515;       /* panels sitting on the page */
  --ecar-surface-2: #1B1B1B;     /* inputs, row hover */

  /* --- Lines ---
     Three deliberate weights: hairline for dense repeating grids,
     border for structural edges, strong for emphasis and dashed states. */
  --ecar-hairline: #232323;
  --ecar-border: #2E2E2E;
  --ecar-border-strong: #414141;

  /* --- Text --- */
  --ecar-text-primary: #F5F5F5;   /* 18.5:1 on --ecar-bg */
  --ecar-text-secondary: #A8A8A8; /*  8.4:1 */
  /* AA on both page bands: 5.1:1 on --ecar-bg and 4.8:1 on the #111 footer/
     reviews band. #7C7C7C cleared the floor on the page but landed at 4.4:1
     against the darker bands, which is where most muted text actually sits. */
  --ecar-text-muted: #838383;
  /* Decorative ledger numerals (aria-hidden). Quiet enough to stay a ghost
     numeral, light enough to actually be seen: 3.3:1 at 22px. The previous
     value reused the border colour and measured 1.9:1. */
  --ecar-numeral: #616161;

  /* --- Brand navy: surfaces and fills only, never text on dark --- */
  --ecar-navy-900: #0D2440;
  --ecar-navy-700: #123255;
  --ecar-navy: #1B4A7E;
  --ecar-navy-hover: #22598F;
  --ecar-navy-active: #123255;
  --ecar-navy-line: #2C5C93;                    /* navy that survives as a 1px line */
  --ecar-navy-quiet: rgba(34, 89, 143, 0.16);   /* tinted wash */

  /* --- Signal accent: interaction, focus, active state --- */
  --ecar-accent: #E8DCC4;
  --ecar-accent-strong: #F2E9D8;
  /* Was #A99B7E (muted khaki). The icon slots across the site all read this
     token, and a khaki stroke on near-black looked washed rather than metallic.
     It now points at the gold below so every icon inherits the brand's warm
     metal in one place — see --ecar-gold. */
  --ecar-accent-dim: var(--ecar-gold);
  --ecar-accent-quiet: rgba(232, 220, 196, 0.12);

  /* --- Brand gold: iconography and metallic detail ---
     Two warm tones, deliberately split by job so they never compete:
       --ecar-accent (light bone)  = interaction — CTA fill, focus rings.
       --ecar-gold   (warm metal)  = iconography, review stars, hairline
                                     rules, small numerals and eyebrows.
     Gold measures ~9:1 on --ecar-bg, so it carries 1.5px icon strokes and
     13px uppercase labels without needing a glow behind it. -deep is the
     shadow side used in gradients and 1px rules; -quiet is the wash fill
     (same device as --ecar-accent-quiet / --ecar-navy-quiet). */
  /* Warmed from the original #D7A95C gold to a true orange: at 22px the old
     tone read as a dull grey-tan on the near-black plates, so the trust strip
     and the Why Choose Us / services icons were hard to make out on a phone.
     The wash and the hairline lift with it (0.10 -> 0.16 fill, 0.30 -> 0.44
     line) so the plate itself is visible, not only the stroke inside it.
     #F79232 measures ~8.4:1 on --ecar-bg, so 1.6px icon strokes and 13px
     uppercase labels hold up without a glow behind them. */
  --ecar-gold: #F79232;
  --ecar-gold-strong: #FFB25E;
  --ecar-gold-deep: #C2681A;
  --ecar-gold-quiet: rgba(247, 146, 50, 0.16);
  --ecar-gold-line: rgba(247, 146, 50, 0.44);

  /* --- Status --- */
  --ecar-danger: #E4756B;  /* 6.4:1 on --ecar-bg; the old #C4453E was 3.2:1 */
  --ecar-success: #7FCF9B;

  /* --- Promo red: "was", and nothing else ---
     This used to skin the whole hero offer banner — red border, red badge,
     red fill, pulsing glow. That framing sold urgency the business hasn't
     got and doesn't want; the offer is now gold (see above). Red survives
     only as the strikethrough on a superseded price, which is the one place
     it means "was" rather than "hurry". #FF5A4E measures 6.4:1 on
     --ecar-bg, and is kept distinct from --ecar-danger (which means "error")
     so a price strike never reads as a validation failure. */
  --ecar-promo: #FF5A4E;
  /* The offer badge's fill. White type needs a darker red than the strike
     colour above: #FFF on #C7362A is ~5.4:1, on #FF5A4E only ~2.6:1. */
  --ecar-promo-deep: #C7362A;

  /* --- Type --- */
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-sans);

  --fs-eyebrow: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-body: 0.9375rem;
  --fs-lg: 1.0625rem;
  /* Two heading sizes, not four. "Working" sections (services, why, areas,
     reviews) use --fs-h2; the two "statement" sections (pricing promise,
     FAQ) use --fs-h2-lg. That alternation is the page's rhythm — it is
     deliberately not equalised. */
  --fs-h2: clamp(1.875rem, 2.6vw, 2.625rem);
  --fs-h2-lg: clamp(2.25rem, 4vw, 3.75rem);
  --fs-h1: clamp(2.625rem, 4.4vw, 4.25rem);

  /* --- Space ---
     Fluid section rhythm replaces the old hand-picked 60/80/88/100/104/108
     stack, so density scales with the viewport instead of stepping at
     arbitrary breakpoints. */
  --sp-section: clamp(60px, 7vw, 100px);
  --sp-section-lg: clamp(68px, 8vw, 116px);
  --shell: 1440px;
  --gutter: clamp(20px, 3.4vw, 40px);

  /* --- Radii --- */
  --r-sm: 3px;
  --r-md: 6px;
  --r-hero: 28px;   /* the one large radius: hero photo's inner corner */
  --r-pill: 999px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 220ms;
  --dur-slow: 420ms;
  --transition: var(--dur) var(--ease);

  /* --- Layout metrics ---
     Header height lives here so anchor targets can offset themselves with
     scroll-margin-top instead of JS measuring the header on every click.
     --header-row-h is just the logo/nav row (what .ecar-header__inner is
     set to); --header-h is the *total* sticky header height, which on
     mobile also includes the persistent call/book action bar stacked
     below that row. They're equal wherever that bar doesn't render. */
  --header-row-h: 84px;
  --header-h: 84px;

  /* --- Legacy aliases ---
     index.php and the base .btn rules in global.css still read these.
     Thin pointers only, so there stays exactly one source of truth. */
  --bg-main: var(--ecar-bg);
  --bg-surface: var(--ecar-surface);
  --border-color: var(--ecar-border);
  --text-primary: var(--ecar-text-primary);
  --text-secondary: var(--ecar-text-secondary);
  --text-muted: var(--ecar-text-muted);
  --color-primary: var(--ecar-navy);
  --color-primary-hover: var(--ecar-navy-hover);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --container: 1200px;
}

@media (max-width: 1199px) {
  :root { --header-row-h: 80px; --header-h: 80px; }
}

@media (max-width: 1023px) {
  /* 76px row + the quick-actions bar (12px + 44px button + 12px padding +
     1px hairline = 69px) that appears at this breakpoint — see header.css. */
  :root { --header-row-h: 76px; --header-h: 145px; }
}