/* ==========================================================================
   Car Keys Geeks — design system
   Palette/type PROVISIONAL (reference mockups missing — CLAUDE.md C5).
   ========================================================================== */

/* Self-hosted fonts (latin subsets, variable) */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
}

:root {
  /* Color */
  --ink: #12151a;
  --ink-soft: #3a4048;
  --surface: #f7f7f5;
  --card: #ffffff;
  --brand: #141283;         /* brand navy — fills/buttons/ribbons on light bg (white text) */
  --brand-deep: #141283;    /* navy accent for text/icons on light backgrounds */
  --brand-on-dark: #a9a7f2; /* light periwinkle — accents on dark bg (hero, footer, Calgary) */
  --whatsapp: #1faa53;
  --line: #e3e1db;
  --success: #177245;
  --error: #b3261e;
  --star-gold: #f4b400;      /* review star rating — gold, not the brand accent */

  /* Type */
  --font-display: "Archivo", "Arial Black", sans-serif;
  --font-text: "Inter", -apple-system, "Segoe UI", sans-serif;
  --fs-hero: clamp(2rem, 6vw + 0.5rem, 3.5rem);
  --fs-h2: clamp(1.5rem, 3.5vw + 0.5rem, 2.25rem);
  --fs-h3: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Space / shape */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --radius: 10px;
  --radius-pill: 999px;
  --shadow: 0 2px 10px rgba(18, 21, 26, 0.08);
  --shadow-lift: 0 6px 24px rgba(18, 21, 26, 0.14);

  --bar-h: 64px; /* sticky mobile action bar */
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
a { color: inherit; }

/* Typography --------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand-deep);
}
.stat-number { font-variant-numeric: tabular-nums; }

/* Layout ------------------------------------------------------------------ */
.container { max-width: 1120px; margin-inline: auto; padding-inline: var(--space-3); }
.section { padding-block: var(--space-6); }
.section + .section { padding-top: 0; }
@media (min-width: 768px) {
  .container { padding-inline: var(--space-4); }
}

/* Buttons ------------------------------------------------------------------
   All CTAs ≥ 44px touch target. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--fs-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 2px; }
.btn-call { background: var(--brand); color: #fff; }
.btn-whatsapp { background: var(--whatsapp); color: var(--ink); }
.btn-outline { background: transparent; color: inherit; border-color: currentColor; }
.back-home { color: var(--brand); margin-bottom: var(--space-4); }
.btn-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* Forms ------------------------------------------------------------------ */
label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
}
textarea { min-height: 96px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand-deep);
}

/* Header ------------------------------------------------------------------ */
/* Dark header (matches hero/footer). The client logo is navy/green/red on a
   transparent ground, so it sits on a white chip to stay legible here. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #000;
  color: #fff;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 78px;
}
@media (min-width: 768px) { .site-header .container { min-height: 92px; } }
.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}
/* The <picture> wrapper is the flex item here, so it must not shrink — without
   this it gets squeezed on narrow screens and the logo renders distorted. */
.wordmark picture { display: flex; flex: 0 0 auto; }
.header-logo { height: 48px; width: auto; flex: 0 0 auto; }
@media (min-width: 768px) { .header-logo { height: 58px; } }
/* Mobile-only location link, top-right of header (change 7) */
.header-loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 var(--space-1);
  margin-left: auto;
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-small);
  text-decoration: none;
  white-space: nowrap;
}
.header-loc svg { width: 15px; height: 15px; flex: none; }
@media (min-width: 768px) { .header-loc { display: none; } }
.wordmark-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 110%;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.25rem;
  color: #fff;
}
.wordmark-text em { color: var(--brand); font-style: normal; }
.wordmark .key-underline { color: var(--brand); margin-top: 3px; }
.nav-links { display: none; }
@media (min-width: 768px) {
  .nav-links { display: flex; gap: var(--space-4); list-style: none; padding: 0; }
  .nav-links a { color: #fff; text-decoration: none; font-size: var(--fs-body); font-weight: 600; white-space: nowrap; }
  .nav-links a:hover { color: var(--brand-on-dark); }
}
/* Hidden on mobile — the sticky action bar is the phone CTA there. */
.header-call { display: none; min-height: 48px; padding: 0.6rem 1.35rem; font-size: var(--fs-body); }
@media (min-width: 768px) { .header-call { display: inline-flex; } }

/* Mobile hamburger + dropdown nav */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 768px) { .nav-toggle { display: none; } }

/* Open state: nav links drop down under the sticky header (mobile only) */
.site-header.nav-open .nav-links {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: var(--space-1) 0 var(--space-2);
  list-style: none;
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.35);
}
.site-header.nav-open .nav-links a {
  display: block;
  padding: 0.85rem var(--space-3);
  color: #fff;
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 600;
}
.site-header.nav-open .nav-links li + li a { border-top: 1px solid rgba(255, 255, 255, 0.08); }
@media (min-width: 768px) {
  /* Desktop nav is always inline; the open-state dropdown must not apply. */
  .site-header.nav-open .nav-links {
    display: flex;
    position: static;
    padding: 0;
    background: none;
    border-top: 0;
    box-shadow: none;
  }
  .site-header.nav-open .nav-links a { display: inline; padding: 0; border-top: 0; }
  .site-header.nav-open .nav-links li + li a { border-top: 0; }
}

/* Cards ------------------------------------------------------------------ */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-4);
}

/* Sticky mobile action bar ------------------------------------------------- */
.action-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  background: var(--ink);
  padding-bottom: env(safe-area-inset-bottom);
}
.action-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--bar-h);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-small);
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
}
.action-bar .btn-icon { width: 18px; height: 18px; }
.action-bar .bar-call { background: var(--brand); color: #fff; }
.action-bar .bar-whatsapp { background: var(--whatsapp); color: var(--ink); }
@media (min-width: 768px) {
  .action-bar { display: none; }
  body { padding-bottom: 0 !important; }
}
body.has-action-bar { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }

/* "Text us" popover (SMS + WhatsApp) --------------------------------------- */
.textus { position: relative; }
/* Sticky-bar instance fills its equal slot (the wrapper is now the flex item). */
.action-bar .textus.bar-textus { flex: 1; display: flex; }
.action-bar .textus.bar-textus .textus-trigger { flex: 1; }

.textus-menu {
  position: absolute;
  z-index: 70;
  min-width: 210px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.textus-menu[hidden] { display: none; }
/* Hero: drop below the trigger, left-aligned. */
.hero-wa .textus-menu { top: calc(100% + 8px); left: 0; }
/* Sticky bar sits at the screen bottom — open upward, span the bar width. */
.bar-textus .textus-menu { bottom: calc(100% + 10px); left: 8px; right: 8px; }

/* Choices override the inherited .action-bar a rules (higher specificity). */
.textus-menu .textus-choice {
  display: flex;
  flex: initial;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-body);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  text-decoration: none;
}
.textus-menu .textus-choice:hover { background: var(--surface); }
.textus-menu .textus-choice:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: -2px; }
.textus-ico { width: 22px; height: 22px; flex-shrink: 0; }
.textus-sms .textus-ico { color: var(--brand); }

/* Hero --------------------------------------------------------------------- */
/* Solid dark-grey ground; the transparent logo sits directly on it. */
.hero {
  /* Photo shown clean, no shadow treatments on the copy.
     Mobile gets its own portrait shot: sky up top (copy lives there), car below. */
  background-color: #000;
  background-image: url("/assets/hero-photo-mobile.webp");
  /* Mobile: the photo is shown 1:1 — full width, no crop, no zoom. The hero's
     height comes from the image's own aspect ratio (815×1208). */
  background-size: 100% auto;
  background-position: center top;
  aspect-ratio: 815 / 1208;
  color: #fff;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .hero {
    background-image: url("/assets/hero-photo.webp");
    background-size: cover;
    background-position: center;
    aspect-ratio: auto;
    /* Header + hero fill one screen, so the next section never peeks below the fold.
       vh fallback errs tall (safe); svh matches the visible viewport on landing. */
    min-height: calc(100vh - 92px);
    min-height: calc(100svh - 92px);
  }
}
.hero-grid {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  /* Mobile: copy + quote CTA sit in the top half (the sky); the car owns the rest. */
  justify-content: flex-start;
  padding-block: var(--space-3) var(--space-3);
}
@media (min-width: 768px) {
  .hero-grid { justify-content: center; padding-block: var(--space-5) var(--space-4); }
}
/* Transparent wide logo sits in the hero's top-right quadrant on desktop only. */
.hero-media { display: none; }
@media (min-width: 900px) {
  .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--space-5);
  }
  /* Pin to the top-right of the hero, aligned to the centered container edge. */
  .hero-media {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    top: 6rem;
    right: max(var(--space-4), (100% - 1120px) / 2 + var(--space-4));
    width: 46%;
    pointer-events: none;
    z-index: 1;
  }
  .hero-logo { width: min(100%, 460px); height: auto; }
}
.hero-eyebrow { color: var(--brand-on-dark); text-wrap: balance; }
.hero-copy h1 { max-width: 18ch; margin-top: var(--space-2); }
.hero-sub {
  max-width: 48ch;
  width: fit-content;
  margin-top: var(--space-3);
  color: #fff;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); position: relative; z-index: 2; }
.btn-outline-light { color: #fff; }
.hero-quote-link { display: inline-block; margin-top: var(--space-3); color: var(--brand-on-dark); font-weight: 600; position: relative; z-index: 1; }

/* Scroll cue — pinned to the bottom of the full-height desktop hero. Hidden on
   mobile, where the hero is image-height and the next section shows anyway. */
.hero-scroll {
  display: none;
  flex: 0 0 auto;
  align-self: center;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--brand-on-dark);
}
@media (min-width: 768px) {
  .hero-scroll { display: flex; padding-block: var(--space-4); }
}
.hero-scroll-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.hero-scroll-arrow { width: 26px; height: 26px; animation: hero-bob 1.9s ease-in-out infinite; }
@keyframes hero-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
.hero-scroll:hover { color: #fff; }
.hero-scroll:hover .hero-scroll-arrow { animation-play-state: paused; }
.hero-scroll:focus-visible { outline: 3px solid var(--brand-on-dark); outline-offset: 4px; border-radius: 8px; }

.hero { position: relative; }

/* Mobile: compact hero type so eyebrow + headline + sub + quote CTA all fit in
   the sky above the car (the uncropped photo only gives ~230px of clear space). */
@media (max-width: 767px) {
  .hero-eyebrow { font-size: 0.72rem; }
  .hero-copy h1 { font-size: 1.7rem; margin-top: 6px; }
  .hero-sub { font-size: var(--fs-small); margin-top: 8px; }
  .hero-actions { margin-top: 12px; }
}

/* Mobile hero keeps a single CTA; the sticky bar covers Call/WhatsApp. */
.hero-call, .hero-wa, .hero-find, .hero-quote-link { display: none; }
@media (min-width: 768px) {
  .hero-quote-btn { display: none; }
  .hero-call, .hero-wa, .hero-find { display: inline-flex; }
  .hero-quote-link { display: inline-block; }
}

/* Quote section ------------------------------------------------------------ */
.quote-section { padding-top: var(--space-5); }
.quote-grid { display: grid; gap: var(--space-4); }
@media (min-width: 900px) {
  /* Reviews carousel on the left, quote form on the right. The carousel is
     shorter than the form, so it sticks below the header and follows the
     scroll down the length of the form. */
  .quote-grid { grid-template-columns: 1fr 1.2fr; align-items: start; }
  .reviews-carousel { grid-area: 1 / 1; }
  .quote-form    { grid-area: 1 / 2; }
  .quote-success { grid-area: 1 / 2; }
}

/* Reviews carousel (replaces the old Fast-quote intro + trust panel) --------- */
.reviews-carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  padding: var(--space-4);
}
@media (min-width: 900px) {
  /* Shorter than the form beside it, so it sticks below the header and
     follows the scroll down the length of the form. (Must come after the
     base rule above — its position:relative would win otherwise.) */
  .reviews-carousel {
    position: sticky;
    top: calc(92px + var(--space-3)); /* header min-height + breathing room */
  }
}
.rc-head {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.04em;
}
.rc-head .rc-stars { color: var(--star-gold); letter-spacing: 2px; text-shadow: 0 1px 3px rgba(18, 21, 26, 0.3); }
/* All slides stack in one grid cell, so the viewport is sized by the tallest
   review — the widget height is fixed and never jumps as the slides cycle. */
.rc-viewport { display: grid; }
.rc-slide {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: var(--space-2);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s ease;
}
.rc-slide.is-active { opacity: 1; visibility: visible; }
.rc-slide .review-stars { margin-bottom: 0; }
.rc-text { margin: 0; }
.rc-name { font-size: var(--fs-small); color: var(--ink-soft); font-weight: 600; }
.rc-nav { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.rc-arrow {
  flex: none;
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.rc-arrow:hover { border-color: var(--brand); color: var(--brand); }
.rc-arrow:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rc-arrow svg { width: 16px; height: 16px; }
.rc-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rc-dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line); cursor: pointer;
}
.rc-dot.is-active { background: var(--brand); }
.rc-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rc-readall { font-size: var(--fs-small); font-weight: 600; color: var(--brand-deep); text-decoration: none; }
.rc-readall:hover { text-decoration: underline; }

/* "Google" wordmark — Product Sans is proprietary and not self-hostable, so this
   uses the closest system fonts and the real per-letter brand colors instead. */
.g-word {
  font-family: "Product Sans", "Google Sans", Roboto, Arial, sans-serif;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}
.g-word .g1, .g-word .g4 { color: #4285f4; }
.g-word .g2, .g-word .g6 { color: #ea4335; }
.g-word .g3 { color: #fbbc05; }
.g-word .g5 { color: #34a853; }

/* Trust panel — deliberately quieter than the white form beside it. */
.trust-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.trust-panel h3 { margin-bottom: var(--space-3); }
.tp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.trust-list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.trust-list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.tp-ic { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--brand-deep); }
.quote-form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-4); }
.quote-form legend { margin-bottom: var(--space-2); padding: 0; }
.field { margin-bottom: var(--space-3); }
.field-row { display: grid; gap: var(--space-3); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.optional { font-weight: 400; color: var(--ink-soft); }
.radio-cards { display: grid; gap: var(--space-2); }
@media (min-width: 560px) { .radio-cards { grid-template-columns: 1fr 1fr; } }
.radio-card {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-3);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 400;
}
.radio-card:has(input:checked) {
  border-color: var(--brand-deep);
  background: #ececf9;
  box-shadow: inset 0 0 0 1.5px var(--brand-deep);
}
.radio-card:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.radio-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio-card-img {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--line);
}
.radio-card small { color: var(--ink-soft); }
.key-status { margin-top: var(--space-3); }
.key-status-q { font-weight: 600; margin-bottom: var(--space-2); }
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Equal gap above (from fieldset margin) and below the Turnstile widget. */
.cf-turnstile { margin-bottom: var(--space-4); }
.btn-submit { width: 100%; }
.form-note { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--ink-soft); }
.form-error { color: var(--error); font-weight: 600; margin-bottom: var(--space-2); }
.quote-success { border: 2px solid var(--success); }
.quote-success-heading {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  font-size: var(--fs-h3);
  color: var(--success);
}
.quote-success .btn { margin-top: var(--space-3); }

/* Trust bar ------------------------------------------------------------------ */
.trust-bar { background: var(--brand); color: #fff; padding-block: var(--space-3); }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); text-align: center; align-items: center; }
@media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(5, 1fr); } }
.stat { display: flex; flex-direction: column; }
.stat-number { font-family: var(--font-display); font-weight: 900; font-size: 1.75rem; }
.stat-label { font-size: var(--fs-small); }

/* NASTF credential cell (fifth stat in the navy trust-bar) */
.stat-cred { grid-column: 1 / -1; }
@media (min-width: 768px) { .stat-cred { grid-column: auto; } }
.stat-cred .stat-number { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.cred-shield { width: 22px; height: 22px; flex: none; color: var(--brand-on-dark); }

/* Steps / cards grids -------------------------------------------------------- */
.section > .container > h2 { margin-top: var(--space-1); }
.steps { list-style: none; padding: 0; margin-top: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-4); }
.step { position: relative; display: flex; align-items: center; gap: var(--space-3);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4); }
.step-num { flex: none; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--brand); color: #fff; font-family: var(--font-display);
  font-weight: 800; font-size: 1.35rem; line-height: 1; display: grid; place-items: center; }
.step h3 { margin: 0; font-size: 1.15rem; }
/* Arrow connector — points down between stacked cards on mobile */
.step:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 12px; height: 12px;
  border-right: 3px solid var(--brand); border-bottom: 3px solid var(--brand);
  transform: translate(-50%, calc(50% + var(--space-4) / 2)) rotate(45deg); }
@media (min-width: 768px) {
  .steps { flex-direction: row; }
  .step { flex: 1; flex-direction: column; text-align: center; padding: var(--space-4); }
  /* Arrow points right, into the horizontal gap between cards */
  .step:not(:last-child)::after {
    left: auto; right: 0; bottom: 50%;
    transform: translate(calc(50% + var(--space-4) / 2), 50%) rotate(-45deg); }
}
.cards-grid { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
@media (min-width: 768px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
/* Services — compact single-column list, each row jumps to the quote form */
.service-list { list-style: none; padding: 0; margin-top: var(--space-4);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.service-list li + li { border-top: 1px solid var(--line); }
.service { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); text-decoration: none; color: inherit;
  border-left: 3px solid transparent; transition: background 120ms ease, border-color 120ms ease; }
.service:hover { background: var(--surface); border-left-color: var(--brand); }
.service:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.service-body { flex: 1; }
.service-body strong { display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 1.05rem; line-height: 1.25; letter-spacing: -0.01em; }
.service-body span { display: block; margin-top: 2px; color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.45; }
.service::after { content: ""; flex: none; width: 9px; height: 9px;
  border-right: 3px solid var(--brand); border-bottom: 3px solid var(--brand); transform: rotate(-45deg); }
.match-note { margin-top: var(--space-4); }
.section-note { margin-top: var(--space-4); }
.section-lead { max-width: 60ch; margin-top: var(--space-2); }
/* Team lead sits on one line on wider screens (wraps naturally on mobile). */
.team-lead { max-width: none; }
@media (min-width: 1000px) { .team-lead { white-space: nowrap; } }

/* Placeholders (jobs/team) --------------------------------------------------- */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #ecece8, #ecece8 12px, #e2e2dc 12px, #e2e2dc 24px);
  color: var(--ink-soft);
  font-size: var(--fs-small);
  width: 100%;
  height: 100%;
}
/* Past jobs — draggable, seamless-infinite scrolling strip (see jobs.js) ------ */
.jobs-marquee {
  margin-top: var(--space-4);
  overflow-x: auto; overflow-y: hidden;
  cursor: grab;
  overscroll-behavior-x: contain;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* old Edge */
}
.jobs-marquee::-webkit-scrollbar { display: none; } /* WebKit */
.jobs-marquee.dragging { cursor: grabbing; user-select: none; }
.jobs-track {
  list-style: none; margin: 0; padding: var(--space-1) 0;
  display: flex; gap: var(--space-3); width: max-content;
}
.jobs-marquee img { -webkit-user-drag: none; user-select: none; }
.job-tile { flex: 0 0 auto; width: clamp(220px, 62vw, 300px); margin: 0; }
.job-open {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.job-open img { display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; }
.job-cap {
  position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-5) var(--space-3) var(--space-3); text-align: left; color: #fff;
  background: linear-gradient(to top, rgba(10, 11, 26, 0.9), rgba(10, 11, 26, 0));
  opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease;
}
.job-open:hover .job-cap, .job-open:focus-visible .job-cap { opacity: 1; transform: none; }
.job-make { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.15; }
.job-job { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.85); }
.job-open:focus-visible { outline: 3px solid var(--brand-on-dark); outline-offset: 2px; }
/* Touch devices can't hover — show the caption and let a tap open the lightbox. */
@media (hover: none) { .job-cap { opacity: 1; transform: none; } }
/* Reduced motion: no ambient drift (jobs.js checks this), captions stay shown. */
@media (prefers-reduced-motion: reduce) {
  .job-cap { opacity: 1; transform: none; }
}

.team-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(4, 1fr); max-width: none; } }
.team-card {
  text-align: center; height: 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2);
}
.team-card img { width: min(68%, 220px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; display: block; box-shadow: var(--shadow); }
.team-card p { color: var(--ink-soft); }

/* Lightbox (past-job focus view) -------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: var(--space-4);
  background: rgba(8, 9, 18, 0); opacity: 0;
  transition: opacity .25s ease, background .25s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.open { opacity: 1; background: rgba(8, 9, 18, 0.88); }
.lightbox-figure {
  position: relative; margin: 0; width: 100%; max-width: min(90vw, 560px);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift);
  transform: scale(.96); transition: transform .25s ease;
}
.lightbox.open .lightbox-figure { transform: none; }
.lightbox-figure img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.lightbox-cap {
  position: absolute; inset: auto 0 0 0; text-align: center; color: #fff;
  padding: var(--space-6) var(--space-3) var(--space-4);
  background: linear-gradient(to top, rgba(8, 9, 18, 0.92), rgba(8, 9, 18, 0));
}
.lightbox-cap .lb-make { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }
.lightbox-cap .lb-job { display: block; font-size: var(--fs-small); color: rgba(255, 255, 255, 0.85); margin-top: 3px; }
.lightbox-close, .lightbox-nav {
  position: absolute; z-index: 2; border: 0; color: #fff; cursor: pointer; border-radius: 50%;
  background: rgba(255, 255, 255, 0.15); line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255, 255, 255, 0.3); }
.lightbox-close { top: var(--space-3); right: var(--space-3); width: 44px; height: 44px; font-size: 1.6rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 2rem; }
.lightbox-prev { left: var(--space-3); }
.lightbox-next { right: var(--space-3); }
.lightbox :focus-visible { outline: 3px solid var(--brand-on-dark); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox-figure { transition: none; }
}

/* Reviews --------------------------------------------------------------------- */
.reviews-grid { grid-template-columns: 1fr; }
@media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.review { margin: 0; display: flex; flex-direction: column; }
.review-stars { color: var(--star-gold); letter-spacing: 2px; font-size: 1rem; line-height: 1; margin-bottom: var(--space-2); text-shadow: 0 1px 3px rgba(18, 21, 26, 0.3); }
.review p { flex: 1 1 auto; }
.review footer { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--ink-soft); font-weight: 600; }
.review-link { color: var(--brand-deep); font-weight: 600; }

/* Brands ---------------------------------------------------------------------- */
.brands-grid { list-style: none; padding: 0; margin-top: var(--space-4); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.brands-grid li {
  padding: 0.4rem 0.9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* Calgary strip ----------------------------------------------------------------- */
.calgary-strip { background: var(--ink); color: #fff; padding-block: var(--space-5); margin-bottom: var(--space-6); }
.calgary-eyebrow { color: var(--brand-on-dark); }
.calgary-strip p:last-child { margin-top: var(--space-2); color: #cfd3d9; }

/* FAQ ----------------------------------------------------------------------------- */
.faq-container details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-top: var(--space-2);
}
.faq-container details:first-of-type { margin-top: var(--space-4); }
.faq-container summary {
  font-weight: 600;
  cursor: pointer;
  min-height: 28px;
}
.faq-container summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.faq-container details p { margin-top: var(--space-2); color: var(--ink-soft); }

/* Contact / map ---------------------------------------------------------------------- */
/* Our shop (photo = same file as the hero bg, shown clean) ----------------- */
.shop-grid { display: grid; gap: var(--space-4); align-items: center; }
.shop-photo { display: block; position: relative; }
/* Quote CTA anchored to the image's bottom-right (over the road), scales with it. */
.shop-quote-btn {
  position: absolute;
  right: clamp(10px, 4%, 22px);
  bottom: clamp(12px, 5%, 26px);
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
}
.shop-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 52%; /* keep the shop sign + cars in the crop */
  border-radius: var(--radius);
}
.shop-blurb { max-width: 52ch; margin-top: var(--space-2); }
.shop-copy .btn { margin-top: var(--space-3); }
@media (min-width: 768px) {
  .shop-grid { grid-template-columns: minmax(0, 380px) 1fr; gap: var(--space-5); }
}

.contact-grid { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.2fr; align-items: start; } }
address { font-style: normal; margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.contact-info .hero-actions .btn-outline { color: var(--ink); }
.hours-card { margin-top: var(--space-4); scroll-margin-top: 90px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); max-width: 340px; box-shadow: var(--shadow); }
.hours-title { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-deep); margin: 0 0 var(--space-2); }
.hours-list { margin: 0; display: grid; gap: 0; }
.hours-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 0.5rem 0; border-top: 1px solid var(--line); }
.hours-row:first-child { border-top: 0; }
.hours-row dt { margin: 0; font-weight: 600; color: var(--ink); }
.hours-row dd { margin: 0; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.hours-row.is-closed dd { color: #b0342c; font-weight: 600; }
.map-wrap iframe { width: 100%; height: 420px; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.closer { margin-top: var(--space-4); font-weight: 600; text-wrap: balance; }

/* Footer -------------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #cfd3d9; padding-block: var(--space-5); }
.site-footer a { color: #fff; }
.footer-logo {
  height: 130px; width: auto;
  margin-bottom: var(--space-3);
}
.footer-grid { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; align-items: end; } }
.copyright { margin-top: var(--space-2); font-size: var(--fs-small); }

/* Motion --------------------------------------------------------------------
   One system: 16–18px rise, ~0.6s, one shared easing. The hero entrance is
   pure CSS (runs on load, no JS needed); scroll reveals are gated behind
   html.anim, which motion.js only adds when JS runs and the visitor hasn't
   asked for reduced motion — no-JS visitors see everything instantly. The
   global prefers-reduced-motion rule at the top kills all of it. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Hero entrance: copy rises line by line, logo fades. */
.hero-copy > * { animation: rise-in 0.65s cubic-bezier(0.22, 0.61, 0.25, 1) both; }
.hero-copy > :nth-child(1) { animation-delay: 0.1s; }  /* eyebrow */
.hero-copy > :nth-child(2) { animation-delay: 0.18s; } /* h1 */
.hero-copy > :nth-child(3) { animation-delay: 0.3s; }  /* subline */
.hero-copy > :nth-child(4) { animation-delay: 0.42s; } /* actions */
.hero-copy > :nth-child(5) { animation-delay: 0.52s; } /* quote link */
.hero-media .hero-logo { animation: fade-in 0.9s ease 0.25s both; }
.hero-scroll { animation: fade-in 0.8s ease 0.9s both; }

/* Scroll reveals (motion.js adds .in-view once per element) */
html.anim .reveal,
html.anim .reveal-group > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.25, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.25, 1);
}
html.anim .reveal.in-view,
html.anim .reveal-group.in-view > * { opacity: 1; transform: none; }
/* Gentle stagger inside groups; capped so long grids don't drag. */
html.anim .reveal-group.in-view > :nth-child(2) { transition-delay: 0.07s; }
html.anim .reveal-group.in-view > :nth-child(3) { transition-delay: 0.14s; }
html.anim .reveal-group.in-view > :nth-child(4) { transition-delay: 0.21s; }
html.anim .reveal-group.in-view > :nth-child(5) { transition-delay: 0.28s; }
html.anim .reveal-group.in-view > :nth-child(n+6) { transition-delay: 0.35s; }