/* ============================================
   Hernandez Pro Detailing — Stylesheet
   Design: Carbon fiber + red, modeled after LA Luxury Detail
   ============================================ */

html, body { background-color: #080808; }

/* --- Loader suppression --- */
html.hpd-loaded #page-loader,
html.hpd-loaded #page-screen { display: none !important; }


/* --- Fallback fonts sized to match the brand fonts (2026-10-30) ---
   While a Google font is still loading, the browser lays text out with the
   next font in the stack. These are Arial, resized to the measured width and
   height of Bebas Neue / Barlow Condensed / Inter on this site's own text, so
   nothing (nav links, buttons, headings) changes size when the real font arrives.
   Re-measure if the fonts or weights change. --- */
@font-face { font-family: 'HPD Bebas Fallback'; src: local('Arial'); font-weight: 400; size-adjust: 58.29%; ascent-override: 162.98%; descent-override: 60.04%; line-gap-override: 0%; }
@font-face { font-family: 'HPD Bebas Fallback'; src: local('Arial Bold'); font-weight: 700; size-adjust: 56.53%; ascent-override: 168.05%; descent-override: 61.91%; line-gap-override: 0%; }
@font-face { font-family: 'HPD Barlow Fallback'; src: local('Arial'); font-weight: 400; size-adjust: 74.00%; ascent-override: 135.14%; descent-override: 27.03%; line-gap-override: 0%; }
@font-face { font-family: 'HPD Barlow Fallback'; src: local('Arial Bold'); font-weight: 600; size-adjust: 65.48%; ascent-override: 152.72%; descent-override: 30.54%; line-gap-override: 0%; }
@font-face { font-family: 'HPD Barlow Fallback'; src: local('Arial Bold'); font-weight: 700; size-adjust: 66.03%; ascent-override: 151.45%; descent-override: 30.29%; line-gap-override: 0%; }
@font-face { font-family: 'HPD Inter Fallback'; src: local('Arial'); font-weight: 400; size-adjust: 106.67%; ascent-override: 90.93%; descent-override: 22.50%; line-gap-override: 0%; }
@font-face { font-family: 'HPD Inter Fallback'; src: local('Arial Bold'); font-weight: 600; size-adjust: 104.23%; ascent-override: 93.06%; descent-override: 23.03%; line-gap-override: 0%; }
@font-face { font-family: 'HPD Inter Fallback'; src: local('Arial Bold'); font-weight: 700; size-adjust: 99.40%; ascent-override: 97.59%; descent-override: 24.14%; line-gap-override: 0%; }

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #080808;
  --surface:      #101010;
  --surface-2:    #181818;
  --border:       #2a2a2a;
  --text:         #f0f0f0;
  --text-muted:   #888888;
  --accent:       #d4f000;
  --accent-2:     #00c8f0;
  --accent-hover: #e0f820;
  --accent-dim:   rgba(212, 240, 0, 0.12);
  --accent-grad:  linear-gradient(90deg, #d4f000 0%, #00c8f0 100%);
  --btn-grad:     linear-gradient(90deg, #d4f000 0%, #d4f000 50%, #00c8f0 100%);
  --radius:       3px;
  --max-w:        1200px;
  --gutter:       24px;

  --font-head: 'Bebas Neue', 'HPD Bebas Fallback', 'Arial Narrow', Arial, sans-serif;
  --font-sub:  'Barlow Condensed', 'HPD Barlow Fallback', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Inter', 'HPD Inter Fallback', system-ui, -apple-system, sans-serif;

  /* Carbon fiber tile pattern — subtle weave */
  --carbon:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.025) 0px,
      rgba(255,255,255,0.025) 1px,
      transparent 1px,
      transparent 8px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.025) 0px,
      rgba(255,255,255,0.025) 1px,
      transparent 1px,
      transparent 8px
    );
}

html { scroll-behavior: smooth; }

/* Hide scrollbar (scrolling still works) */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { width: 0; height: 0; display: none; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* --- Layout Utilities --- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 80px; }
.section--tight { padding-block: 48px; }
.section--dark   { background: var(--surface); }
.section--darker { background: var(--bg); }
.section--carbon { background-color: var(--surface); background-image: var(--carbon); }

/* --- Typography --- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-sub);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #000;
  background: var(--accent-grad);
  padding: 4px 10px;
  margin-bottom: 16px;
}

h1, .h1 { font-family: var(--font-head); font-size: clamp(52px, 8vw, 96px); line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase; }
h2, .h2 { font-family: var(--font-head); font-size: clamp(36px, 5vw, 60px); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; }
h3, .h3 { font-family: var(--font-sub); font-size: clamp(20px, 3vw, 26px); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
h4, .h4 { font-family: var(--font-sub); font-size: 18px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }

p { color: var(--text-muted); line-height: 1.7; }
p + p { margin-top: 16px; }

.text-accent { color: var(--accent); }
.text-white  { color: var(--text); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-sub);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 2px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: linear-gradient(90deg, #d4f000, #00c8f0, #d4f000);
  background-size: 200% 100%;
  background-position: 0% center;
  color: #000;
  border-color: transparent;
  transition: transform 0.15s;
}
.btn-primary:hover {
  animation: btn-grad-shift 1.5s linear infinite;
}

@keyframes btn-grad-shift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-ghost {
  background: transparent;
  color: var(--accent);
  border-color: transparent;
  padding-inline: 4px;
}
.btn-ghost:hover { color: var(--accent-hover); }

.btn-red-outline {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-red-outline:hover {
  background: var(--accent-grad);
  color: #000;
  border-color: transparent;
}

.btn-lg { padding: 18px 36px; font-size: 17px; }

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 72px;
  display: flex;
  align-items: center;
  transition: background 0.3s, box-shadow 0.3s;
}

.nav.scrolled {
  background: rgba(8, 8, 8, 0.97);
  box-shadow: 0 1px 0 var(--border);
  backdrop-filter: blur(12px);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nav__logo {
  display: flex;
  align-items: center;
  line-height: 1;
}
.nav__logo img {
  height: 52px;
  width: auto;
  object-fit: contain;
  display: block;
}
/* Fallback text logo if image fails */
.nav__logo span { color: var(--accent); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav__links a {
  font-family: var(--font-sub);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s;
}
.nav__links a:hover, .nav__links a.active { color: var(--accent); }

.nav__ctas {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 24px;
}
.nav__ctas .btn {
  min-width: 110px;
  justify-content: center;
}

.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
}
.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  transform-origin: center;
  /* base rule = the CLOSING transition (outer bars un-rotate immediately) */
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
/* Three lines → X. The bars are 2px tall with a 5px gap, so each outer bar travels exactly
   7px (2 + 5) to meet the middle one.
   Driven off [aria-expanded], NOT a new class: the existing JS already keeps that attribute in
   sync both when the button is tapped AND when tapping a link closes the menu, so the X can
   never get stranded out of step with the menu — and main.js needs no change at all. */
.nav__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* THE MIDDLE BAR — why it needs scaleX(0) and not just opacity (2026-09-17, Connor: "the
   middle line goes through it and then becomes dots on the side"):
   a 24px bar rotated 45° only spans 24 × cos45 ≈ 17px HORIZONTALLY, so the un-rotated middle
   bar is ~3.5px wider than the X on each side. Fading it in place leaves those two stubs
   sitting just outside the X's arms — which at this size read as dots. Collapsing it with
   scaleX(0) pulls the tips INWARD to the centre instead, so there is never anything outside
   the arms at any point in the animation. */
.nav__hamburger span:nth-child(2) {
  /* closing: wait for the arms to unfold before the bar grows back */
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) 0.12s, opacity 0.18s ease 0.12s;
}
.nav__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
  transition-delay: 0s;         /* opening: collapse FIRST, before the arms swing in */
}
/* ...and the arms wait for it, so you never see a line crossing the X */
.nav__hamburger[aria-expanded="true"] span:nth-child(1),
.nav__hamburger[aria-expanded="true"] span:nth-child(3) { transition-delay: 0.08s; }

.nav__mobile {
  /* `display` can't be transitioned, so the panel is ALWAYS laid out and hidden with
     opacity/visibility/pointer-events instead — the same technique as the lightbox fade.
     visibility:hidden also keeps it out of the tab order and the accessibility tree while
     closed, and pointer-events:none stops the invisible panel swallowing taps. */
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 72px; left: 0; right: 0;
  background: rgba(8, 8, 8, 0.98);
  border-bottom: 1px solid var(--border);
  padding: 24px var(--gutter) 32px;
  z-index: 99;
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* the PANEL itself only fades (its backdrop) — it deliberately does NOT slide, because the
     items inside now staircase down and two overlapping movements read as sloppy */
  transition: opacity 0.22s ease, visibility 0.22s;
}
.nav__mobile.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav__mobile a {
  font-family: var(--font-sub);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-block: 10px;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s;
}
.nav__mobile a:last-child { border-bottom: none; }
.nav__mobile a:hover, .nav__mobile a.active { color: var(--accent); }
/* The generic `.nav__mobile a` rule above (specificity 0,1,1) OUT-SPECIFIES `.btn-primary`'s
   own `color:#000` (0,1,0), so the gradient Book Now button in the mobile menu was being
   painted muted grey instead of black like every other gradient button on the site. Restore
   black, and keep the hover rule from re-greying/re-tinting it. */
.nav__mobile a.btn-primary,
.nav__mobile a.btn-primary:hover { color: #000; }

/* STAIRCASE entrance (2026-09-17, Connor: "each section fades in… from the top staircasing
   down") — each row fades + drops in turn, 60ms apart, top to bottom.
   THREE things here are deliberate, don't "simplify" them:
   1. Selector is `.nav__mobile > a`, NOT `> *` — `.nav__mobile a` (0,1,1) would out-specify a
      `> *` rule (0,1,0) and silently kill the transition on the links. Every child IS an <a>.
      (Same specificity trap as the grey Book Now button above.)
   2. Slide uses the standalone `translate` property, NOT `transform` — the last child is a
      `.btn`, and `transform` here would clobber `.btn:active { transform: scale(0.98) }`,
      costing the button its press feedback. `translate` composes independently of it.
   3. transition-delay is per-property (`0s` for colour) so the stagger never lags a link's
      hover colour by up to 300ms. */
.nav__mobile > a {
  opacity: 0;
  translate: 0 -10px;
  transition: color 0.2s ease,
              opacity 0.32s ease,
              translate 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s, 0s, 0s;   /* closing: everything drops out together, no reverse stagger */
}
.nav__mobile.open > a { opacity: 1; translate: 0 0; }
.nav__mobile.open > a:nth-child(1) { transition-delay: 0s, 0.06s, 0.06s; }
.nav__mobile.open > a:nth-child(2) { transition-delay: 0s, 0.12s, 0.12s; }
.nav__mobile.open > a:nth-child(3) { transition-delay: 0s, 0.18s, 0.18s; }
.nav__mobile.open > a:nth-child(4) { transition-delay: 0s, 0.24s, 0.24s; }
.nav__mobile.open > a:nth-child(5) { transition-delay: 0s, 0.30s, 0.30s; }

/* Reduced motion: the menu still opens and closes and the X still forms — instantly, with no
   slide or fade. Only the transitions are dropped, never the state change. */
@media (prefers-reduced-motion: reduce) {
  .nav__mobile,
  .nav__mobile > a,
  .nav__hamburger span { transition: none; }
}

/* Nav divider bar */
.nav::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.nav.scrolled::after { transform: scaleX(1); }
.nav__mobile .btn { margin-top: 24px; width: 100%; justify-content: center; }

/* --- Hero --- */
.hero {
  min-height: 65vh;
  display: flex;
  padding: 96px 24px 24px; /* 72px nav + 24px gap top, 24px sides/bottom */
  background-color: var(--surface);
  background-image: var(--carbon);
}

.hero__frame {
  position: relative;
  flex: 1;
  min-height: 420px;
  border-radius: 24px;
  overflow: hidden;
  background: #171717;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.85);
  opacity: 0;
  z-index: 0;
  transition: opacity 1.2s ease;
}
.hero__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  pointer-events: none;
}
.hero__slide.active {
  opacity: 1;
  z-index: 1;
  animation: heroDropIn 1.2s cubic-bezier(0.25, 1, 0.5, 1) both,
             heroZoom 8s ease both;
}

@keyframes heroDropIn {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0% 0); }
}

@keyframes heroZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

.hero__overlay { display: none; }

.hero__content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

.hero__headline {
  max-width: 800px;
  margin-bottom: 24px;
}

.hero__sub {
  max-width: 520px;
  font-size: 17px;
  color: rgba(240,240,240,0.75);
  margin-bottom: 40px;
  line-height: 1.65;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* Page hero (interior pages) */
.page-hero {
  position: relative;
  padding-top: 160px;
  padding-bottom: 72px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 75% 40%, rgba(0,200,240,0.07) 0%, transparent 65%);
}
/* Brand-gradient left-border accent on page heroes */
.page-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #d4f000, #00c8f0);
}
.page-hero__content { position: relative; }
.page-hero h1 { margin-bottom: 16px; }
.page-hero p { font-size: 18px; max-width: 560px; }

/* --- Trust Bar --- */
.trust-bar {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: 18px;
  overflow: hidden;
  position: relative;
  isolation: isolate; /* contain the __grad multiply blend to the bar */
}
.trust-bar::before,
.trust-bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.trust-bar::before {
  left: 0;
  background: linear-gradient(to right, var(--surface), transparent);
}
.trust-bar::after {
  right: 0;
  background: linear-gradient(to left, var(--surface), transparent);
}

.trust-bar__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: max-content;
  align-items: center;
  /* 70s for 2 lists per half = the same speed the old 35s/1-list loop had.
     If the number of copies in index.html changes, scale this with it. */
  animation: trust-marquee 70s linear infinite;
}
/* Keeps scrolling on hover — no pause. Hovering the BAR reveals fixed gradient
   zones (blue at one end, yellow at the other) that the moving words pass
   THROUGH, so each word shifts colour by its position as it scrolls. */

@keyframes trust-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Stationary gradient painted across the whole bar. multiply blend tints the
   (brightened) words as they scroll through it, leaving the dark bg ~dark.
   Hidden until you hover the bar. */
.trust-bar__grad {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #00c8f0 0%, #6fd9a8 50%, #d4f000 100%);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.trust-bar:hover .trust-bar__grad { opacity: 1; }

.trust-bar__item {
  font-family: var(--font-sub);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding-inline: 32px;
  cursor: default;
  transition: color 0.3s ease;
}
/* Brighten the words on hover so the multiply gradient reads as pure colour. */
.trust-bar:hover .trust-bar__item { color: #f4f4f4; }

/* MOBILE: the colour is always on, no tap required.
   There is no hover on touch — a tap just makes :hover STICK, so the bar sat
   grey until you poked it and then stayed lit, which read as a toggle. Pinning
   both hover values on makes it simply always coloured.
   Gated on WIDTH, never on (hover:hover)/(pointer:fine): those report false on
   touchscreen laptops even with a mouse, so a pointer query here would wrongly
   light up the desktop bar too (see the dropdown-gate note in Booking Integration).
   Desktop is untouched — it keeps the hover-to-reveal behaviour. */
@media (max-width: 768px) {
  .trust-bar__grad { opacity: 1; }
  .trust-bar__item { color: #f4f4f4; }
}

/* --- About Section --- */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.about__img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 20px;
}
.about__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about__img::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(8,8,8,0.5), transparent);
}

.about__body h2 { margin-bottom: 24px; }
.about__body p { margin-bottom: 20px; }

/* --- Service Cards (image-overlay style, à la LA Luxury Detail) --- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.service-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 3/4;
  cursor: pointer;
  display: block;
  text-decoration: none;
}

.service-card__img {
  position: absolute;
  inset: 0;
}
.service-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  filter: brightness(0.72);
}
.service-card__img img.img-bright           { filter: brightness(1.05); }
.service-card:hover .service-card__img img {
  transform: scale(1.06);
  filter: brightness(0.45);
}
.service-card:hover .service-card__img img.img-bright {
  filter: brightness(0.45);
}

.service-card__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 24px 32px;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 55%, transparent 100%);
}
.service-card__body .eyebrow { margin-bottom: 8px; }
.service-card__body h3 {
  margin-bottom: 12px;
  font-size: clamp(24px, 3vw, 32px);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.service-card__body p {
  font-size: 14px;
  margin-bottom: 20px;
  color: rgba(240,240,240,0.85);
  max-width: 280px;
  display: none; /* hidden by default, reveal on hover */
}
.service-card:hover .service-card__body p { display: block; }
.service-card:hover .service-card__body {
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.2) 100%);
}

/* Gradient accent bar on left edge */
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 0;
  background: var(--accent-grad);
  transition: height 0.4s ease;
  z-index: 1;
}
.service-card:hover::before { height: 100%; }

/* --- 4-col Features Grid (Why Choose Us) --- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 0;
}

.feature-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 240px;
  cursor: default;
}

.feature-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}

.feature-card:hover::after { opacity: 1; }

.feature-card__content {
  position: absolute;
  inset: 0;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.feature-card:hover .feature-card__content {
  opacity: 1;
  transform: translateY(0);
}

.feature-card h3 {
  font-size: 18px;
  letter-spacing: 0.04em;
  color: #ffffff;
  margin-bottom: 8px;
}

.feature-card p {
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

/* --- Pricing Tier Cards (LA Luxury style) --- */
.pricing-tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s, transform 0.25s;
}
.pricing-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.pricing-card--featured {
  border-color: var(--accent);
  position: relative;
}
.pricing-card--featured::before {
  content: 'Most Popular';
  position: absolute;
  top: 16px; right: 16px;
  background: var(--accent-grad);
  color: #000;
  font-family: var(--font-sub);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius);
}

.pricing-card__header {
  background-color: var(--surface-2);
  background-image: var(--carbon);
  padding: 28px 28px 24px;
  border-bottom: 1px solid var(--border);
}

.pricing-card__name {
  font-family: var(--font-head);
  font-size: 32px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
}

.pricing-card__price {
  font-family: var(--font-head);
  font-size: 52px;
  color: var(--accent);
  line-height: 1;
  letter-spacing: 0.01em;
}
.pricing-card__price sup {
  font-size: 22px;
  vertical-align: super;
  font-family: var(--font-sub);
  font-weight: 700;
}
.pricing-card__price-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.pricing-card__body {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  margin-bottom: 28px;
}

.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-muted);
}
.pricing-card__feature::before {
  content: '✓';
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* --- Testimonials --- */
.testimonials-minimal {
  max-width: 760px;
  margin: 48px auto 0;
  text-align: center;
}

.testimonials-minimal__quotes {
  position: relative;
  min-height: 140px;
  margin-bottom: 40px;
}

.testimonials-minimal__quote {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 300;
  line-height: 1.7;
  font-style: italic;
  color: var(--text);
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
  pointer-events: none;
}

.testimonials-minimal__quote.active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
}

.testimonials-minimal__stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 20px;
}
.testimonials-minimal__stars span { color: var(--accent); font-size: 16px; }

.testimonials-minimal__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.testimonials-minimal__arrow {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.testimonials-minimal__arrow:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.testimonials-minimal__dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.testimonials-minimal__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.3s, transform 0.3s;
  display: inline-block;
}
.testimonials-minimal__dot.active {
  background: var(--accent);
  transform: scale(1.4);
}

/* --- CTA Banner --- */
.cta-banner {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 64px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,200,240,0.08) 0%, transparent 70%);
}
.cta-banner > * { position: relative; }
.cta-banner h2 { margin-bottom: 16px; }
.cta-banner p { font-size: 17px; max-width: 480px; margin-inline: auto; margin-bottom: 36px; }
.cta-banner__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* --- Services Page --- */
.services-section { margin-bottom: 64px; }

.service-list {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.service-item {
  padding: 28px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s;
}
/* gradient hairline that draws in on hover — premium, on-brand accent */
.service-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.service-item:hover { border-color: rgba(212,240,0,0.4); transform: translateY(-3px); }
.service-item:hover::before { transform: scaleX(1); }

.service-item__text strong {
  display: block;
  font-family: var(--font-sub);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 4px;
}
.service-item__text p {
  font-size: 14px;
  margin: 0;
}

/* ============================================
   Services page — scoped rebuild (.svc-*)
   Reuses global tokens/fonts/section utilities; no global selectors overridden.
   ============================================ */

/* 1. Hero — reuses the shared .page-hero; no extra hero styling needed */

/* 3. Services — alternating image + text rows with scroll-reactive gradient headings */
.svc-rows {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 96px;                 /* breathing room so the dark background shows between rows */
}
.svc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
}
.svc-row--reverse .svc-row__media { order: 2; }   /* photo on the right on alternating rows */
.svc-row--reverse .svc-row__text  { order: 1; }
.svc-row__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;     /* landscape, not portrait */
  object-fit: cover;
  border-radius: 24px;       /* matches the gallery photos */
}
.svc-row__name {
  font-family: var(--font-head);
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 14px;
  /* Leonida-style colour fade in OUR palette; main.js shifts --svc-grad on scroll so the
     yellow<->cyan balance flows as the heading moves up the viewport */
  background: linear-gradient(90deg, #d4f000, #00c8f0, #d4f000);
  background-size: 200% auto;
  background-position: var(--svc-grad, 0%) center;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.svc-row__desc { font-size: 16px; color: var(--text-muted); margin-bottom: 22px; max-width: 44ch; }
.svc-row__cta {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 0.2s;
}
.svc-row__cta:hover { color: var(--accent-2); }

/* 4. Trust pillars + reviews */
.svc-pillars {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.svc-pillar { padding-top: 24px; border-top: 1px solid var(--border); }
.svc-pillar__label {
  font-family: var(--font-sub);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
}
.svc-pillar p { font-size: 15px; }

/* 5. Process steps — light, no boxes */
.svc-steps {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.svc-step__num {
  display: block;
  font-family: var(--font-head);
  font-size: 54px;
  line-height: 1;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}
.svc-step__title {
  font-family: var(--font-sub);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
}
.svc-step p { font-size: 15px; }

/* 6. Booking helper line */
.svc-book__text { margin-top: 28px; font-size: 15px; color: var(--text-muted); }
.svc-book__text a {
  color: var(--accent);
  font-weight: 600;
  /* never let the number break at its internal space — "(541)" was being
     stranded at the end of the line above the rest of the digits */
  white-space: nowrap;
}
/* On phones the number drops onto its own line, directly under the lead-in
   text, instead of trailing off the end of it. */
@media (max-width: 768px) {
  .svc-book__text a { display: block; margin-top: 6px; }
}

/* Solid-colour fallback if background-clip:text is unsupported (don't show invisible text) */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .svc-row__name, .svc-step__num { color: var(--accent); }
}

/* Respect reduced motion — never leave fade-up content stuck hidden */
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1 !important; transform: none !important; animation: none !important; }
  .svc-row__name { background-position: 0% center !important; }  /* freeze the gradient shift */
}

/* Services-page responsive */
@media (max-width: 768px) {
  /* rows stack to one column on phones — photo on top, text below */
  .svc-rows { gap: 56px; }
  .svc-row { grid-template-columns: 1fr; gap: 20px; }
  .svc-row--reverse .svc-row__media { order: 1; }
  .svc-row--reverse .svc-row__text  { order: 2; }
  .svc-pillars { grid-template-columns: 1fr; gap: 8px; }
  .svc-steps { grid-template-columns: 1fr; gap: 28px; }
}

.pricing-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 36px 32px;
  margin-top: 48px;
}
.pricing-block h2 { margin-bottom: 12px; }
.pricing-block p { font-size: 17px; }
.pricing-block .price-range {
  font-size: 42px;
  font-family: var(--font-head);
  color: var(--accent);
  display: block;
  margin-block: 12px 4px;
  letter-spacing: 0.02em;
}
.pricing-block .price-note {
  font-size: 13px;
  font-style: italic;
}
.pricing-block .btn { margin-top: 24px; }

/* --- Gallery --- */
.gallery-item {
  break-inside: avoid;
  margin-bottom: 16px;
  overflow: hidden;
  border-radius: 24px;       /* rounded like the before/after banner cards (.ba-card / .hero__frame) */
  border: 1px solid var(--border);
  cursor: zoom-in;
  position: relative;
}

.gallery-item img {
  width: 100%;
  height: auto;        /* derive height from the img width/height attrs' aspect-ratio */
  display: block;
  transition: transform 0.4s;
}
.gallery-item:hover img { transform: scale(1.03); }

.gallery-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(200,160,32,0.0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}
.gallery-item:hover .gallery-item__overlay { background: rgba(200,160,32,0.08); }
.gallery-item__overlay span {
  opacity: 0;
  font-size: 28px;
  color: var(--accent);
  transition: opacity 0.3s;
}
.gallery-item:hover .gallery-item__overlay span { opacity: 1; }

/* --- Floating scatter gallery (all photos, ungrouped) --- */
.float-gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  column-gap: 3%;
  margin-top: 56px;
}
/* each car is its own block — extra gap separates groups without needing a label */
.float-gallery + .float-gallery { margin-top: 12vh; }
.float-gallery .float-item {
  margin-bottom: 6vh;        /* override base .gallery-item spacing */
  will-change: transform;
}
/* size variants — mixed widths create the non-uniform look */
.fi-lg { width: 42%; }
.fi-md { width: 32%; }
.fi-sm { width: 25%; }
/* vertical stagger — offsets each photo so nothing sits on one line */
.fi-s0 { margin-top: 0; }
.fi-s1 { margin-top: 8vh; }
.fi-s2 { margin-top: -3vh; }
.fi-s3 { margin-top: 14vh; }
.fi-s4 { margin-top: 4vh; }

/* 4Runner finale — pinned: portrait gallery photo → wide landscape banner → before/after */
.zoom-banner {
  position: relative;
  height: 180vh;             /* scroll length: morph (~50%) + reveal + a hold to drag in */
  margin-top: 2vh;           /* sits close to the 4Runner group above it */
}
.zoom-banner__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding-top: 72px;          /* fixed nav height — centers the banner in the space BELOW the
                                 nav so the gap above the banner matches the gap below it */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* START state = a 3:4 PORTRAIT at gallery-photo size (reads as a normal 4Runner-group photo).
   On scroll, JS morphs width/height → a wide LANDSCAPE banner (img re-crops via object-fit:cover),
   then fades in the before/after UI. This CSS is the portrait start + the no-JS fallback. */
.float-banner {
  width: 63vh;               /* ≈ fi-lg gallery-photo width */
  height: 84vh;              /* 63:84 = 3:4 portrait */
  max-width: calc(100vw - 48px); /* END caps near full-bleed (hero has 24px gutters) — breaks past the 1200 container */
  flex-shrink: 0;            /* don't let the ~1200 container's flex squeeze the full-bleed end width */
  position: relative;
  overflow: visible;         /* let the stacked cards behind peek above the top */
  will-change: width, height;
}
.float-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --- Stacked before/after carousel (the finale) --- */
/* Each .ba-card fills the morphing .ba-stack (inset:0) and carries the frame chrome. The active
   card is on top & interactive; the rest fan UP behind it so their tops peek (after reveal). */
.ba-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 24px;       /* same as .hero__frame */
  border: 1px solid var(--border);
  background: #111;
  cursor: ew-resize;
  opacity: 0;                /* only the active card shows until revealed (JS sets .is-active) */
  pointer-events: none;
  transform-origin: center top;
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.4s ease, filter 0.45s ease;
}
.ba-card.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 30;
  transform: none;
  filter: none;
}
/* the cards behind fan up & peek — only after the zoom reveal */
.ba-revealed .ba-card.is-pos1 { opacity: 1; z-index: 20; pointer-events: auto; transform: translateY(-26px) scale(0.965); filter: brightness(0.6); }
.ba-revealed .ba-card.is-pos2 { opacity: 1; z-index: 10; pointer-events: auto; transform: translateY(-48px) scale(0.93);  filter: brightness(0.45); }

.ba-compare { user-select: none; touch-action: pan-y; }
.ba-compare__overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 50% 0 0);   /* JS drives this; left side = "before" */
  will-change: clip-path;
}
.ba-compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: rgba(255,255,255,0.9);
  z-index: 4;
  pointer-events: none;
}
.ba-compare__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
}
.ba-compare__knob svg { display: block; width: 22px; height: 22px; }
.ba-compare__tag {
  position: absolute;
  top: 16px;
  z-index: 5;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 5px 10px;
  border-radius: 4px;
  line-height: 1;
  pointer-events: none;
}
.ba-compare__tag--before { left: 16px; }
.ba-compare__tag--after  { right: 16px; }
/* before/after UI hidden during the zoom; after .ba-revealed it shows ONLY on the active (front)
   card. Time-based fade (not scrubbed) so it can't stick half-faded. Mobile: shown via media query. */
.ba-compare__overlay,
.ba-compare__handle,
.ba-compare__tag { opacity: 0; transition: opacity 0.4s ease; }
.ba-revealed .ba-card.is-active .ba-compare__overlay,
.ba-revealed .ba-card.is-active .ba-compare__handle,
.ba-revealed .ba-card.is-active .ba-compare__tag { opacity: 1; }

/* carousel arrows — stacked on the Y axis (up = previous, down = next), centered horizontally.
   Inside .ba-stack but outside the cards, so a click never starts a card drag. */
.ba-stack__nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(8,8,8,0.5);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, background 0.2s, border-color 0.2s;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ba-stack__nav svg { display: block; width: 22px; height: 22px; }
.ba-stack__nav:hover { background: rgba(8,8,8,0.85); border-color: var(--accent); }
.ba-stack__nav--prev { top: 3%; }      /* up arrow, near the top edge */
.ba-stack__nav--next { bottom: 3%; }   /* down arrow, near the bottom edge */
.float-banner.ba-revealed .ba-stack__nav { opacity: 1; pointer-events: auto; }

@media (max-width: 768px) {
  /* keep the floating SCATTER on phones — ~2 per row, mixed sizes + stagger (just no parallax;
     the parallax JS is desktop-only via min-width:769px, so motion is already off here) */
  .float-gallery { column-gap: 3%; }
  .float-gallery .float-item { margin-bottom: 4vh; }
  .fi-lg { width: 52%; }
  .fi-md { width: 42%; }
  .fi-sm { width: 36%; }
  /* gentler vertical offsets so it still floats off the grid without huge gaps */
  .fi-s1 { margin-top: 5vh; }
  .fi-s2 { margin-top: -2vh; }
  .fi-s3 { margin-top: 9vh; }
  .fi-s4 { margin-top: 3vh; }
  /* no pin/morph on phones, but KEEP the stacked-deck look — cards fan up & peek like desktop,
     just without the scroll-reveal gate (.ba-revealed is desktop-only) */
  .zoom-banner { height: auto; margin-top: 24px; }
  .zoom-banner__sticky { position: static; height: auto; padding-top: 56px; } /* headroom for the upward peek */
  .float-banner { width: 100%; max-width: 100%; height: 52vh; }
  .ba-card.is-pos1 { opacity: 1; z-index: 20; pointer-events: auto; transform: translateY(-30px) scale(0.95);  filter: brightness(0.55); }
  .ba-card.is-pos2 { opacity: 1; z-index: 10; pointer-events: auto; transform: translateY(-56px) scale(0.90);  filter: brightness(0.4);  }
  .ba-card.is-active .ba-compare__overlay,
  .ba-card.is-active .ba-compare__handle,
  .ba-card.is-active .ba-compare__tag { opacity: 1; }
  .ba-stack__nav { opacity: 1; pointer-events: auto; }

  /* ONE-TIME mobile entrance (NOT a pin/scrub — see main.js "Gallery finale — MOBILE entrance").
     js adds .ba-mobile-intro as the pre-roll state and removes it when the banner scrolls into
     view, so these fade/fan back to the normal mobile state above via .ba-card's existing
     transition. Everything here is pre-roll only — the settled mobile layout is unchanged. */
  .float-banner.ba-mobile-intro .ba-card.is-active .ba-compare__handle,
  .float-banner.ba-mobile-intro .ba-card.is-active .ba-compare__tag { opacity: 0; }
  .float-banner.ba-mobile-intro .ba-stack__nav { opacity: 0; }
  .float-banner.ba-mobile-intro .ba-card.is-pos1 { transform: translateY(0) scale(0.95); }
  .float-banner.ba-mobile-intro .ba-card.is-pos2 { transform: translateY(0) scale(0.90); }
}

/* Reduced motion: the mobile entrance is skipped in JS entirely (its matchMedia query requires
   prefers-reduced-motion: no-preference), so .ba-mobile-intro is never applied and the banner
   renders in its normal state. This guard only covers the class somehow persisting. */
@media (prefers-reduced-motion: reduce) {
  .float-banner.ba-mobile-intro .ba-card .ba-compare__handle,
  .float-banner.ba-mobile-intro .ba-card .ba-compare__tag { opacity: 1; }
}

/* Lightbox */
.lightbox {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.95);
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.lightbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 24px;        /* match the gallery photos (.gallery-item) */
  opacity: 0;
  transform-origin: center center;
  will-change: transform;
  /* FLIP zoom: JS drives transform from the clicked thumbnail's position */
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease;
}
.lightbox.open .lightbox__img { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__img { transition: none; }
}

.lightbox__close {
  position: absolute;
  top: 20px; right: 24px;
  z-index: 2;                /* above .lightbox__img — its will-change/FLIP transform makes a stacking context */
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 32px;
  line-height: 1;
  transition: color 0.2s;
}
.lightbox__close:hover { color: var(--text); }

.lightbox__prev, .lightbox__next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 2;                /* keep the nav arrows above the zoomed photo (esp. mobile) */
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text);
  width: 52px; height: 52px;
  border-radius: 50%;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.lightbox__prev:hover, .lightbox__next:hover {
  background: rgba(200,160,32,0.15);
  border-color: var(--accent);
}
.lightbox__prev { left: 20px; }
.lightbox__next { right: 20px; }

/* --- Contact Page --- */
.contact-intro { margin-bottom: 40px; }

.contact-option--booking {
  margin-bottom: 24px;
}

.contact-direct-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.contact-option {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: border-color 0.2s;
}
.contact-option:hover { border-color: var(--accent); }

.contact-option__icon {
  font-size: 22px;
  margin-bottom: 12px;
}
.contact-option h3 { margin-bottom: 8px; font-size: 18px; }
.contact-option p { font-size: 14px; margin-bottom: 16px; }
.contact-option .contact-direct {
  font-family: var(--font-sub);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.03em;
}
.contact-option a.contact-direct:hover { color: var(--accent); }

/* Contact Form */
.contact-form { margin-top: 48px; }

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-family: var(--font-sub);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--accent); }
.form-group select { appearance: none; cursor: pointer; }
.form-group textarea { resize: vertical; min-height: 120px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-success {
  display: none;
  background: rgba(200,160,32,0.1);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 20px 24px;
  color: var(--accent);
  font-family: var(--font-sub);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 16px;
}
.form-success.visible { display: block; }

/* FAQ */
.faq-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  background: var(--surface);
  border: none;
  padding: 20px 24px;
  text-align: left;
  color: var(--text);
  font-family: var(--font-sub);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color 0.2s, background 0.2s;
}
.faq-question:hover { color: var(--accent); }
.faq-question[aria-expanded="true"] {
  color: var(--accent);
  background: var(--surface-2);
}

.faq-question__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform 0.25s, border-color 0.2s;
}
.faq-question[aria-expanded="true"] .faq-question__icon {
  transform: rotate(45deg);
  border-color: var(--accent);
  color: var(--accent);
}

/* Movement ported from the framer-motion FAQ spec (kept our fonts + side +/×
   button): height 0→auto via a grid 0fr→1fr track (the vanilla equivalent of
   framer's height:auto, animates to the answer's EXACT height — no max-height
   guess/"dead air"), EASE-OUT on open / EASE-IN on close (asymmetric: the close
   easing lives on the base rule, the open easing on .open), plus the content
   fades in and the text slides down from y:-10 → 0. All ~0.2s like the spec. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s cubic-bezier(0.4, 0, 1, 1); /* ease-in — close */
}
.faq-answer.open {
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.2s cubic-bezier(0, 0, 0.2, 1); /* ease-out — open */
}

.faq-answer__inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 24px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.7;
  /* fade + slide-down (y:-10 → 0) matching the spec's paragraph animation */
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, padding 0.2s ease;
}
.faq-answer.open .faq-answer__inner {
  padding: 16px 24px 24px;
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .faq-answer, .faq-answer__inner { transition: none; transform: none; }
}
/* Inline links inside FAQ answer copy (2026-09-17, the "how do I get a quote" FAQ). The global
   `a { color:inherit; text-decoration:none }` rule means a plain <a> here is INVISIBLE — same
   muted grey as the surrounding text, nothing to signal it's clickable. No other FAQ answer had
   an inline link before this, so there was no existing precedent to follow. */
.faq-answer__inner a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-answer__inner a:hover { color: var(--accent-hover); }

/* Service area */
.service-area-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 32px;
  margin-top: 48px;
}
.service-area-block h2 { margin-bottom: 12px; }
.service-area-block p { font-size: 16px; }

/* Social follow */
.social-follow {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sub);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: border-color 0.2s, color 0.2s;
  width: fit-content;
}
.social-btn:hover { border-color: var(--accent); color: var(--accent); }

/* --- Footer --- */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-block: 48px 32px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 40px;
}

.footer__brand .footer__logo {
  display: block;
  margin-bottom: 10px;
}
.footer__brand .footer__logo img {
  height: 56px;
  width: auto;
  object-fit: contain;
}
.footer__brand p { font-size: 13px; }
.footer__brand .footer__credit { margin-top: 6px; font-size: 12px; }
.footer__credit a { color: var(--text-muted); transition: color 0.2s; }
.footer__credit a:hover { color: var(--accent); }

.footer__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.footer__nav a {
  font-family: var(--font-sub);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s;
}
.footer__nav a:hover { color: var(--accent); }

/* "Areas We Serve" row under the footer columns — same type as the footer nav links */
.footer__areas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 24px;
  margin-bottom: 32px;
}
.footer__areas-label,
.footer__areas a {
  font-family: var(--font-sub);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer__areas-label { color: var(--text); }
.footer__areas a { transition: color 0.2s; }
.footer__areas a:hover { color: var(--accent); }

/* City pages: body copy block + its inline links (the global `a` reset makes them invisible otherwise) */
.city-prose { margin-top: 28px; max-width: 760px; }
.city-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.city-prose a:hover { color: var(--accent-hover); }
/* City pages: service names link to /services — underline so they read as links on touch too */
.svc-pillar__label a { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 4px; transition: color 0.2s; }
.svc-pillar__label a:hover { color: var(--accent); }

/* Anchor targets on /services (#interior etc.) land below the fixed nav */
.svc-row[id], .svc-row [id] { scroll-margin-top: 96px; }

.footer__contact {
  text-align: right;
}
.footer__contact a {
  display: block;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 6px;
  transition: color 0.2s;
}
.footer__contact a:hover { color: var(--accent); }
.footer__socials {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 12px;
}
/* Instagram logo painted with the brand gradient (glyph is the gradient, no pill),
   shimmering on hover exactly like .btn-primary — the same btn-grad-shift keyframe.
   The gradient is a CSS background masked to the IG glyph. */
.footer__socials a {
  display: inline-block;
  width: 36px;
  height: 36px;
  background: linear-gradient(90deg, #d4f000, #00c8f0, #d4f000);
  background-size: 200% 100%;
  background-position: 0% center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
  border: none;
  padding: 0;
  border-radius: 0;
  font-size: 0;
  transition: transform 0.15s;
}
.footer__socials a:hover { animation: btn-grad-shift 1.5s linear infinite; }

.footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/* --- Divider --- */
.divider {
  width: 56px;
  height: 2px;
  background: var(--accent-grad);
  margin-bottom: 32px;
}

/* --- Section header utility --- */
.section-header { margin-bottom: 0; }
.section-header h2 { margin-bottom: 16px; }
.section-header p { max-width: 540px; font-size: 17px; }

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1024px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
  .services-grid .service-card { aspect-ratio: 4/5; }
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .testimonials-grid .testimonial:last-child { display: none; }
  .about { grid-template-columns: 1fr; gap: 40px; }
  .about__img { aspect-ratio: 16/9; }
  /* beemer-4.jpg is a TALL portrait (1200x1600) and this frame is landscape, so object-fit:cover
     shows only a ~675px band of it. Centered, that band lands on the seat and cuts off the
     steering wheel. Pull the crop window UP so the wheel + dash lead the shot.
     Dial: LOWER % = higher crop (same dial as services.html's supra-6 interior). */
  .about__img img { object-position: center 25%; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .pricing-tiers { grid-template-columns: 1fr; }
  .service-list { grid-template-columns: 1fr; }

  .feature-card {
    display: flex;
    flex-direction: column;
    min-height: unset;
  }
  .feature-card__video {
    position: relative;
    inset: unset;
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
  }
  .feature-card__content {
    position: relative;
    inset: unset;
    opacity: 1;
    transform: none;
    transition: none;
    padding: 18px 20px;
    background: var(--surface);
    border-radius: 0 0 12px 12px;
  }
  .feature-card::after { display: none; }
  .feature-card h3 { color: var(--text); }
  .feature-card p { color: var(--text-muted); }
}

@media (min-width: 768px) {
  .hero { height: 100vh; padding: 104px 32px 32px; }
}

@media (min-width: 1024px) {
  .hero { padding: 112px 40px 40px; }
}

@media (max-width: 768px) {
  :root { --gutter: 20px; }

  .section { padding-block: 56px; }

  /* keep the big Bebas page-hero headline from clipping on narrow screens */
  .page-hero { padding-top: 120px; }
  .page-hero h1 { font-size: clamp(32px, 9vw, 60px); }

  /* snappier fade-up on phones: shorter rise + faster finish, so the slide-up completes
     while the card is still entering the screen (desktop keeps the 0.6s / 24px version) */
  .fade-up { transform: translateY(16px); }
  .fade-up.visible { animation-duration: 0.4s; }

  .nav__links, .nav__ctas { display: none; }
  .nav__hamburger { display: flex; }

  .hero__sub { font-size: 15px; }

  .hero__slide:nth-child(2) {
    background-size: cover !important;
    background-position: center !important;
  }

  .services-grid { grid-template-columns: 1fr; }
  .services-grid .service-card { aspect-ratio: 5/6; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonials-grid .testimonial:last-child { display: flex; }
  .contact-direct-row { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__contact { text-align: left; }
  .footer__socials { justify-content: flex-start; }

  .cta-banner { padding: 40px 24px; }

  .form-row { grid-template-columns: 1fr; }

  .pricing-block { padding: 28px 20px; }

  .features-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
}

@media (max-width: 480px) {
  .trust-bar__list { gap: 8px 24px; }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .btn-lg { width: 100%; justify-content: center; }
  .features-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* --- Animations --- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
  opacity: 0;
  transform: translateY(24px);
}
.fade-up.visible {
  animation: fadeUp 0.6s ease forwards;
}

/* ── Page Loader ─────────────────────────────────── */
#page-screen {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #000;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#page-screen.page-screen--out {
  opacity: 0;
}

#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #080808;
  background-image: radial-gradient(ellipse at 50% 42%, rgba(0,200,240,0.07) 0%, transparent 65%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
  pointer-events: all;
  isolation: isolate;
}
/* Logo loader — the company logo (injected by main.js as an <img> so the aspect
   ratio is always correct on every screen: the width/height attrs give the
   intrinsic ratio and height:auto keeps it) fades in on the dark hero-style
   background, with the brand gradient flowing continuously through ONLY the
   colored letters, then the wipe reveals the site. */
#page-loader .loader-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 520px);
  animation: loaderFade 0.6s ease-out both;
}
.loader-logo__img {
  display: block;
  width: 100%;
  height: auto; /* intrinsic ratio from width/height attrs — never distorts */
}
.loader-logo__grad {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* reweighted to hold pure yellow/cyan (an even ramp reads green mid-sweep) */
  background: linear-gradient(90deg,
      #d4f000 0%, #d4f000 30%,
      #00c8f0 46%, #00c8f0 80%,
      #d4f000 96%, #d4f000 100%);
  background-size: 200% 100%;
  background-position: 0% center;
  /* clip the gradient to the logo art (same PNG, cached) so it never shows on the
     transparent areas — mix-blend-mode:hue alone can't (over a transparent
     backdrop hue-blend paints the gradient solid); the mask + hue together = only
     the saturated letters recolor, the dark/near-black art stays as drawn */
  -webkit-mask: url('../images/logo-loader.png') center / 100% 100% no-repeat;
  mask: url('../images/logo-loader.png') center / 100% 100% no-repeat;
  mix-blend-mode: hue;
  /* slow, seamless loop that keeps moving as the wipe carries the loader off */
  animation: loaderSweep 3.5s linear 0.4s infinite;
}
@keyframes loaderFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes loaderSweep {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .loader-logo { animation: none; }
  .loader-logo__grad { display: none; }
}
#page-loader.loader--out {
  clip-path: polygon(200% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 200%);
  transition: clip-path 1.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}




/* --- Legal pages (privacy.html, terms.html) --- */
.legal { max-width: 760px; }
.legal__h {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(22px, 3.2vw, 28px);
  letter-spacing: 0.02em;
  color: var(--text);
  margin-top: 40px;
  margin-bottom: 12px;
}
.legal__h:first-child { margin-top: 0; }
.legal__p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 14px;
}
.legal__p strong { color: var(--text); }
.legal__p a,
.legal__list a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal__p a:hover,
.legal__list a:hover { color: var(--accent-hover); }
.legal__list {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
}
.legal__list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
}
.legal__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 7px; height: 1px;
  background: var(--accent);
}
.legal__list li strong { color: var(--text); }

/* Load-triggered reveal — animates on first paint instead of on scroll.
   Used by the legal pages (privacy.html, terms.html).

   WHY: the policy body is ONE very tall block (~2500px). The scroll observer
   uses a 0.12 RATIO threshold on desktop, and only ~240px of that block is on
   screen at load — a ratio of ~0.10 — so it never fired and the entire policy
   text sat at opacity 0 until the visitor scrolled. (Same trap the Mobile-First
   Rule warns about for tall elements; it bites on desktop too.)

   Both the page header and the body use this class on those pages, so they come
   in together. Pure CSS with no IntersectionObserver, so nothing depends on when
   deferred JS happens to run. */
.fade-load { animation: fadeUp 0.6s ease both; }
@media (prefers-reduced-motion: reduce) {
  .fade-load { animation: none; }
}