/* ============================================================
   LUCAS LANDSCAPE CO. — site.css  (v2 — bold & bright)

   v1 was elegant, rounded, serif and scrimmed. It was wrong: the
   scrims flattened the video and the whole page read dull. This
   rebuild inverts every one of those decisions.

     - ZERO border radius, everywhere. Hard edges, like the donor.
     - Anton uppercase display. Heavy, condensed, loud.
     - Vivid grass green for action, sunny yellow for the signature
       type treatment. Bright, not tasteful.
     - NO full-frame scrim on any video. Clips are actively pushed
       BRIGHTER via a saturate/brightness filter. The only darkening
       anywhere is a short gradient on the left third of the hero,
       which is the minimum the white headline needs to survive —
       the rest of the frame stays completely clear.

   THE SIGNATURE: `.hl` — the swipe.
   One word per major heading sits on a chunky yellow block, rotated
   ~1.6deg off true so it reads as a marker swipe rather than a
   rectangle, and it WIPES IN left-to-right when scrolled into view.
   That's the thing that makes the type feel like it belongs to
   somebody instead of to a template.
   ============================================================ */

:root {
  /* Canvas — light and airy */
  --paper:  #ffffff;
  --cream:  #f4f6f0;
  --cream-2:#e9ede2;

  /* Ink */
  --ink:    #14231a;
  --ink-2:  #3d4a40;
  --ink-3:  #6e7b70;
  --line:   #dfe3da;

  /* Brand — bright */
  --green:      #2e9e4b;   /* primary action */
  --green-dark: #24803c;
  --yellow:     #ffc627;   /* the signature highlight, nothing else */

  /* Dark grounds. HOUSE RULE: never a perfectly flat dark solid across a
     full-width section — the display pipeline spatial-dithers it into a
     visible diagonal hairline. Always two-stop gradient + noise overlay. */
  --forest-900: #0f1c14;
  --forest-800: #16281c;

  /* Type */
  --font:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Anton has one weight and is very condensed — the fallbacks are condensed
     too, so the webfont swap doesn't reflow the document by hundreds of px. */
  --display: 'Anton', 'Arial Narrow', 'Roboto Condensed', 'Haettenschweiler',
             'Liberation Sans Narrow', ui-sans-serif, sans-serif;
  --track-label: 0.16em;

  /* Layout */
  --page-max: 1360px;
  --gutter: clamp(20px, 4vw, 56px);
  --nav-h: 92px;

  --z-nav: 50;
  --z-menu: 60;
  --z-mobile-cta: 40;
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root { color-scheme: light; }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px;
  font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label);
}
.skip-link:focus { left: 12px; top: 12px; }

.container { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.sec-inner { position: relative; z-index: 1; }
.sec-cream { background: var(--cream); }

/* ---------- Type ---------- */
.label {
  display: inline-block;
  font-family: var(--font);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track-label);
  line-height: 1;
  color: #fff;
  background: var(--green);
  padding: 9px 14px;
  margin-bottom: 20px;
}
.label--onDark { background: var(--yellow); color: var(--ink); }

.display {
  font-family: var(--display);
  font-weight: 400;              /* Anton ships one weight and it is already heavy */
  text-transform: uppercase;
  letter-spacing: 0.005em;
  /* Must exceed the .hl block height (~1.28em with the chunky swipe) or a
     highlighted word clips the line above it. The leading and the swipe
     thickness are a matched pair — see .hl::before. */
  line-height: 1.42;
  color: var(--ink);
}
.display--xl { font-size: clamp(44px, 7.6vw, 110px); line-height: 1.4; }
.display--lg { font-size: clamp(34px, 5vw, 70px); }
/* Anton gets illegible and lumpy below ~1.6rem — small headings use heavy
   Inter instead rather than shrinking the display face. */
.display--sm {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(18px, 1.35vw, 21px);
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.body-copy { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.sec-lede { margin-top: 20px; max-width: 58ch; }
.sec-head { margin-bottom: clamp(38px, 4.6vw, 66px); max-width: 900px; }

/* ---------- ★ THE SIGNATURE: .hl — the swipe ★ ----------
   A chunky highlight behind one word, rotated off true so it reads as a
   marker stroke rather than a rectangle, wiping in left-to-right when it
   comes into view. Every major heading gets exactly one. */
.hl {
  position: relative;
  display: inline-block;
  z-index: 0;
  color: var(--ink);
  padding: 0 0.14em;
  white-space: nowrap;
  /* Its OWN line-height, deliberately independent of the heading's. The block
     is sized against this box, so pinning it to 1em means the highlight's
     height stops depending on how tightly the headline happens to be leaded —
     which is what let it grow taller than the line advance and swallow the
     line above. */
  line-height: 1;
}
.hl::before {
  content: '';
  position: absolute;
  z-index: -1;
  /* CHUNKY on purpose — this is the look. The block overhangs .hl's own 1em box
     top and bottom, so it reads as a fat marker stroke rather than a tight
     text background.

     That makes it ~1.28em tall, which is TALLER than a normal line advance —
     so the headings that carry it must be leaded to clear it (see .display /
     .hero-title, ~1.42). Thickness and leading are a matched pair: change one
     and the swipe either overlaps the line above or stops looking like a
     stroke. verify.js measures the clearance so this can't drift silently. */
  left: -0.04em; right: -0.04em;
  top: -0.15em; bottom: -0.13em;
  background: var(--yellow);
  transform: rotate(-1.6deg);
  transform-origin: 0 50%;
  /* Wipes rather than fades: clip-path animates on the compositor and the
     swipe reads as a stroke being drawn. */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}
.hl.in::before { clip-path: inset(0 0 0 0); }
/* On media the word keeps dark ink on yellow — that block is doing the
   legibility work the scrim used to do, and doing it brighter. */
.hero-title .hl, .cta-content .hl { color: var(--ink); text-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .hl::before { transition: none; clip-path: inset(0 0 0 0); }
}

/* ---------- Buttons — square, loud ---------- */
.solid-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px;
  padding: 16px 32px;
  font-family: var(--font);
  font-size: 14px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #fff;
  background: var(--green);
  border: 2px solid var(--green);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.solid-btn:hover, .solid-btn:focus-visible { background: var(--green-dark); border-color: var(--green-dark); }
.solid-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

.ghost-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px;
  padding: 16px 32px;
  font-family: var(--font);
  font-size: 14px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.ghost-btn:hover, .ghost-btn:focus-visible { color: #fff; background: var(--ink); border-color: var(--ink); }

/* On media: a solid white ground so it reads against a bright clip. */
.ghost-btn--onmedia {
  color: var(--ink);
  background: #fff;
  border-color: #fff;
}
.ghost-btn--onmedia:hover, .ghost-btn--onmedia:focus-visible {
  background: var(--yellow); border-color: var(--yellow); color: var(--ink);
}

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- NAV ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.nav--solid {
  background: #fff;
  box-shadow: 0 8px 26px -18px rgba(15, 28, 20, 0.55);
}
.nav-inner {
  width: 100%; max-width: var(--page-max); margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-brand {
  display: flex; align-items: center; cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.nav--solid .nav-brand {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}
.nav-brand img { height: 46px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-link {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s ease;
}
/* Transparent over a bright clip — links must be white until .nav--solid. */
.nav:not(.nav--solid) .nav-link { color: #fff; text-shadow: 0 1px 10px rgba(15,28,20,0.5); }
/* Over a bright clip (blossom, sky) plain white bars all but disappear —
   they need to carry their own contrast until .nav--solid lands. */
.nav:not(.nav--solid) .menu-btn .bar {
  background: #fff;
  box-shadow: 0 1px 7px rgba(15, 28, 20, 0.65);
}
.nav-link:hover, .nav-link:focus-visible { color: var(--yellow); }
.nav-phone { font-variant-numeric: tabular-nums; }
/* Solid square block hard against the right edge, like the donor's. */
.nav-cta {
  color: #fff; background: var(--green);
  border: 0; border-radius: 0;
  padding: 0 26px;
  height: 52px;
  display: inline-flex; align-items: center;
  text-shadow: none !important;
  transition: background-color 0.2s ease;
}
.nav-cta:hover, .nav-cta:focus-visible { color: #fff; background: var(--green-dark); }

.menu-btn {
  display: none;
  width: 46px; height: 46px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.menu-btn .bar { display: block; width: 26px; height: 2.5px; background: var(--ink); transition: background-color 0.2s ease; }

.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 auto 0;
  z-index: var(--z-menu);
  background: var(--paper);
  box-shadow: 0 18px 40px -24px rgba(15, 28, 20, 0.55);
  padding: 6px var(--gutter) 24px;
  display: none;
  flex-direction: column;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--display);
  font-size: 26px;
  text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--ink);
  padding: 14px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:hover { color: var(--green); }
.mobile-menu .mm-cta {
  margin-top: 18px;
  font-family: var(--font);
  font-size: 14px; font-weight: 800;
  letter-spacing: 0.08em;
  background: var(--green); color: #fff; text-align: center; padding: 18px;
  border: 0;
}
.mobile-menu .mm-cta:hover { background: var(--green-dark); color: #fff; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--forest-900);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img,
.hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* Actively pushed brighter and more saturated. The complaint about v1 was
     that the footage felt dull — this is the opposite of a tint. */
  filter: saturate(1.14) brightness(1.06) contrast(1.02);
}
/* Crossfading stack: all four clips sit on top of each other and site.js
   raises one at a time. The poster underneath never unmounts, so if autoplay
   is refused the hero still looks finished. */
.hero-media video { opacity: 0; transition: opacity 1.1s ease; }
.hero-media video.is-active { opacity: 1; }

/* NOT a full-frame wash. A short gradient over the left third only — the
   minimum the white headline needs — fading to fully clear well before the
   middle of the frame. Everything right of ~55% is the untouched clip. */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,28,20,0.42) 0%, rgba(15,28,20,0) 16%),
    linear-gradient(96deg,
      rgba(15,28,20,0.60) 0%,
      rgba(15,28,20,0.34) 28%,
      rgba(15,28,20,0.08) 46%,
      rgba(15,28,20,0.00) 58%);
}

.hero-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--page-max); margin: 0 auto;
  padding: calc(var(--nav-h) + 10px) var(--gutter) clamp(48px, 5vw, 76px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(380px, 32vw, 456px);
  gap: clamp(30px, 3.6vw, 64px);
  align-items: center;
}
.hero-text { max-width: 680px; color: #fff; }
.hero-brand { display: inline-block; margin-bottom: 22px; cursor: pointer; }
.hero-brand img { height: 74px; width: auto; }

.hero-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: #fff;
  background: var(--green);
  padding: 9px 15px;
  margin-bottom: 18px;
}
.hero-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.42;
  color: #fff;
  font-size: clamp(42px, 5.9vw, 96px);
  text-shadow: 0 2px 26px rgba(15, 28, 20, 0.45);
}
.hero-sub {
  margin-top: 22px;
  max-width: 46ch;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
  color: #fff;
  text-shadow: 0 1px 14px rgba(15, 28, 20, 0.6);
}
.hero-ctas { margin-top: 30px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Trust badges — the slot the donor gives its rating badge. We have NO rating
   for this business and won't invent one, so these state the offer instead.
   Solid white blocks, square, wrapping. */
.hero-badges {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.hero-badges li {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff;
  padding: 12px 16px;
  font-size: 13.5px; font-weight: 700;
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(15, 28, 20, 0.26);
}
.hero-badges svg { width: 17px; height: 17px; flex: none; color: var(--green); }

/* ---------- Quote panel — square, hard-edged ---------- */
.quote-panel {
  background: var(--paper);
  border-radius: 0;
  box-shadow: 0 30px 70px -26px rgba(15, 28, 20, 0.5);
  padding: clamp(22px, 2.1vw, 32px);
  border-top: 6px solid var(--green);
}
.quote-title {
  font-family: var(--display);
  font-size: 30px;
  text-transform: uppercase;
  line-height: 1; color: var(--ink);
}
.quote-sub { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }
#quoteForm { margin-top: 20px; }
.q-label {
  display: block;
  font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--ink);
  margin: 15px 0 6px;
}
.q-opt { color: var(--ink-3); font-weight: 500; letter-spacing: 0.04em; text-transform: none; }
.q-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--font);
  font-size: 16px;               /* >=16px stops iOS zoom-on-focus */
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.q-input:hover { border-color: #c8cfc0; }
.q-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(46, 158, 75, 0.2);
}
.q-select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%2314231a' stroke-width='2'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
.q-textarea { min-height: 88px; resize: vertical; line-height: 1.55; }
.q-submit { width: 100%; margin-top: 20px; }
.q-note { margin-top: 12px; text-align: center; font-size: 13px; color: var(--ink-3); }
.q-note.is-error { color: #b3452f; font-weight: 700; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.q-done { padding: 22px 0; font-size: 16.5px; color: var(--ink); }
.q-done strong { color: var(--green-dark); }

/* ---------- TRUST BAND ---------- */
.trust { background: var(--ink); }
.trust-inner {
  padding-block: clamp(26px, 3vw, 38px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.trust-item {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: #fff;
  text-align: center;
}
.trust-item svg { width: 20px; height: 20px; flex: none; color: var(--yellow); }

/* ---------- SERVICES ---------- */
.services { padding: clamp(60px, 7vw, 110px) 0; }
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
}
.service-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 5px solid var(--green);
  border-radius: 0;
  display: flex; flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.service-card:hover {
  box-shadow: 0 24px 50px -28px rgba(15, 28, 20, 0.45);
  transform: translateY(-3px);
}
.service-grid[data-collapsed="true"] .service-card:nth-child(n+7) { display: none; }

.more-wrap { display: flex; justify-content: center; margin-top: clamp(30px, 3.4vw, 46px); }
.more-btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 16px 32px;
  font-size: 14px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.more-btn:hover, .more-btn:focus-visible { color: #fff; background: var(--ink); border-color: var(--ink); }
.more-chev {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.28s ease;
}
.more-btn[aria-expanded="true"] .more-chev { transform: translateY(1px) rotate(-135deg); }

.service-media { overflow: hidden; aspect-ratio: 4 / 3; background: var(--cream-2); }
.service-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.08);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover .service-media img { transform: scale(1.045); }
.service-body { padding: clamp(20px, 1.7vw, 26px); }
.num {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--green);
  margin-bottom: 8px;
}
.service-body h3 { margin-bottom: 10px; color: var(--ink); }
.service-body p { font-size: 15px; line-height: 1.65; color: var(--ink-2); }

/* ---------- ABOUT ---------- */
.about {
  position: relative;
  min-height: clamp(560px, 78vh, 820px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--forest-900);
}
.about-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.12) brightness(1.04);
}
.about-inner { position: relative; z-index: 1; padding-block: clamp(50px, 5.5vw, 84px); }
.about-content {
  max-width: 600px;
  background: var(--paper);
  border-radius: 0;
  border-top: 6px solid var(--green);
  box-shadow: 0 34px 80px -34px rgba(15, 28, 20, 0.6);
  padding: clamp(28px, 3vw, 46px);
}
.about-lede { margin-top: 22px; }
.about-points { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.about-point .num { margin-bottom: 6px; }
.about-point-title { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 7px; }
.about-point p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.about-content .ghost-btn { margin-top: 32px; }

/* ---------- GALLERY ---------- */
.gallery { padding: clamp(60px, 7vw, 110px) 0; }
.gallery-tile {
  position: relative; overflow: hidden; border-radius: 0;
  background: var(--cream-2); height: 100%;
}
.gallery-tile img {
  width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  filter: saturate(1.08);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-tile:hover img { transform: scale(1.05); }
.gallery-tile figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 40px 18px 16px;
  font-size: 12.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: #fff;
  background: linear-gradient(180deg, rgba(15,28,20,0) 0%, rgba(15,28,20,0.85) 72%);
}

/* ---------- Carousel ---------- */
.carousel { position: relative; }
.car-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * clamp(16px, 1.8vw, 26px)) / 3);
  gap: clamp(16px, 1.8vw, 26px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.car-track::-webkit-scrollbar { display: none; }
.car-track > * { scroll-snap-align: start; }
.car-track:focus-visible { outline: 3px solid var(--green); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { .car-track { scroll-behavior: auto; } }

.car-nav {
  position: absolute; top: 50%; z-index: 2;
  width: 50px; height: 50px;
  display: none;
  align-items: center; justify-content: center;
  background: var(--ink);
  border: 0; border-radius: 0;
  color: #fff;
  box-shadow: 0 12px 30px rgba(15, 28, 20, 0.3);
  transform: translateY(-50%);
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.carousel.is-ready .car-nav { display: inline-flex; }
.car-nav:hover, .car-nav:focus-visible { background: var(--green); color: #fff; }
.car-nav[disabled] { opacity: 0.25; cursor: not-allowed; }
.car-nav[disabled]:hover { background: var(--ink); }
.car-prev { left: calc(-1 * clamp(12px, 2vw, 25px)); }
.car-next { right: calc(-1 * clamp(12px, 2vw, 25px)); }
.car-nav svg { width: 20px; height: 20px; }

.car-dots { display: none; justify-content: center; gap: 8px; margin-top: 28px; }
.carousel.is-ready .car-dots { display: flex; }
.car-dot {
  width: 26px; height: 5px; padding: 0;
  border-radius: 0;
  background: var(--line);
  border: 0; cursor: pointer;
  transition: background-color 0.22s ease;
}
.car-dot[aria-selected="true"] { background: var(--green); }

/* ---------- STATEMENT BAND ---------- */
.statement {
  position: relative;
  background: linear-gradient(180deg, var(--forest-800) 0%, var(--forest-900) 100%);
  overflow: hidden;
}
.noise-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}
/* mix-blend is a mobile-GPU hotspot and the dither it masks is a desktop
   display-pipeline artifact — phones get cheap plain-opacity noise. */
@media (max-width: 768px) { .noise-overlay { mix-blend-mode: normal; opacity: 0.02; } }
.statement-inner {
  position: relative; z-index: 1;
  padding-block: clamp(56px, 7vw, 100px);
  text-align: center;
}
.statement-quote {
  margin: 0 auto;
  max-width: 20ch;
  font-family: var(--display);
  font-size: clamp(30px, 4.4vw, 62px);
  text-transform: uppercase;
  line-height: 1.42;
  color: #fff;
}

/* ---------- REVIEWS ---------- */
.reviews { padding: clamp(60px, 7vw, 110px) 0; }
.review {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 5px solid var(--green);
  border-radius: 0;
  padding: clamp(24px, 2.2vw, 34px);
  height: 100%;
  display: flex; flex-direction: column;
}
.review blockquote { flex: 1; font-size: 16px; line-height: 1.66; color: var(--ink-2); }
.who { margin-top: 22px; display: flex; flex-direction: column; gap: 2px; }
.who-name { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); }
.who-meta { font-size: 13px; color: var(--ink-3); }

/* Placeholders — deliberately obvious, so they can't ship by accident. */
.review.is-placeholder {
  background: repeating-linear-gradient(-45deg, var(--cream) 0 10px, #ecefe4 10px 20px);
  border: 1px dashed #b9c2ae;
  border-top: 5px dashed #b9c2ae;
}
.review.is-placeholder blockquote { font-size: 15px; color: var(--ink-3); font-style: italic; }
.review.is-placeholder .who-name, .review.is-placeholder .who-meta { color: var(--ink-3); }
.review-ribbon {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 6px 11px;
  background: var(--ink);
  color: var(--yellow);
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: var(--track-label);
}

/* ---------- FAQ ---------- */
.faq { padding: clamp(60px, 7vw, 110px) 0; }
.faq-list { max-width: 900px; }
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0;
  text-align: left;
  font-family: var(--font);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s ease;
}
.faq-q:hover { color: var(--green); }
.plus { position: relative; width: 16px; height: 16px; flex: none; }
.plus::before, .plus::after {
  content: ''; position: absolute; background: var(--green);
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.plus::before { inset: 7px 0; height: 2.5px; }
.plus::after  { inset: 0 7px; width: 2.5px; }
.faq-q[aria-expanded="true"] .plus::after { transform: rotate(90deg); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.34s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-a p { padding: 0 0 24px; font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 70ch; }

/* ---------- CTA BAND ---------- */
.cta-band {
  position: relative;
  min-height: clamp(520px, 74vh, 740px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--forest-900);
  text-align: center;
}
.cta-band video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.14) brightness(1.06);
}
/* Centred copy, so this is a soft seat under the type only — the edges of the
   frame stay clear. Much lighter than a wash. */
.cta-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 62% at 50% 50%,
    rgba(15,28,20,0.62) 0%, rgba(15,28,20,0.30) 58%, rgba(15,28,20,0) 100%);
}
.cta-content {
  position: relative; z-index: 1;
  width: 100%; max-width: 900px; margin: 0 auto;
  padding: clamp(58px, 6.5vw, 96px) var(--gutter);
}
.cta-content .display { color: #fff; text-shadow: 0 2px 26px rgba(15,28,20,0.5); }
.cta-sub { margin: 22px auto 0; max-width: 48ch; color: #fff; text-shadow: 0 1px 14px rgba(15,28,20,0.6); }
.cta-ctas { justify-content: center; margin-top: 34px; }

/* ---------- FOOTER ---------- */
.footer {
  position: relative;
  background: linear-gradient(180deg, var(--forest-800) 0%, var(--forest-900) 100%);
  color: #fff;
  overflow: hidden;
}
.footer-inner {
  position: relative; z-index: 1;
  max-width: var(--page-max); margin: 0 auto;
  padding: clamp(54px, 5.5vw, 84px) var(--gutter) 30px;
}
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: clamp(28px, 3vw, 52px); }
.footer-brand img { height: 52px; width: auto; margin-bottom: 20px; }
.footer-brand p { font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,0.6); max-width: 40ch; }
.footer h4 {
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--yellow);
  margin-bottom: 16px;
}
.footer ul { display: grid; gap: 10px; }
.footer li a, .footer li span { font-size: 14.5px; color: rgba(255,255,255,0.6); transition: color 0.2s ease; }
.footer li a { cursor: pointer; }
.footer li a:hover, .footer li a:focus-visible { color: #fff; }
.footer-bottom {
  margin-top: clamp(36px, 4vw, 58px);
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,0.42);
}

/* ---------- MOBILE FLOATING CTAs ---------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-mobile-cta);
  display: none;
  gap: 10px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: none;              /* NO bar behind the pills */
  pointer-events: none;
  transform: translateY(140%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-cta.show { transform: translateY(0); }
.mobile-cta a {
  pointer-events: auto;
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em;
  box-shadow: 0 12px 30px rgba(15, 28, 20, 0.38);
  cursor: pointer;
}
.mobile-cta svg { width: 17px; height: 17px; flex: none; }
.mc-call { background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.mc-book { background: var(--green); color: #fff; border: 2px solid var(--green); }

/* ============================================================
   RESPONSIVE — verified at 1440 / 1024 / 768 / 375
   ============================================================ */
@media (max-width: 1080px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Stacked hero: the clip is bounded to exactly the copy block (site.js
     measures it into --media-h) so a phone opens straight onto full-bleed
     motion with nothing to scroll past, and the form sits below it on paper. */
  .hero { display: block; min-height: 0; padding: 0 0 44px; background: var(--paper); }
  .hero-media {
    inset: auto; top: 0; left: 0; right: 0;
    height: var(--media-h, 72svh);
  }
  .hero-scrim {
    inset: auto; top: 0; left: 0; right: 0;
    height: var(--media-h, 72svh);
    /* Stacked, the copy sits over the clip, so the sweep goes vertical — but it
       STARTS AT FULLY CLEAR. The earlier version floored at 0.24, which meant
       every pixel of the clip was tinted on mobile: a blanket wash by another
       name, and exactly the thing that made v1 read dull. The top quarter is
       now untouched footage (that's the part doing the selling the instant the
       page opens) and support ramps in only under the lower copy, where the
       headline and buttons actually sit. */
    background: linear-gradient(180deg,
      rgba(15,28,20,0.00) 0%,
      rgba(15,28,20,0.10) 24%,
      rgba(15,28,20,0.42) 62%,
      rgba(15,28,20,0.66) 100%);
  }
  .hero-inner { display: block; padding: 0 var(--gutter); }
  /* +15px on top only: drops the whole copy stack down the frame so it isn't
     jammed against the nav, and leaves more clear footage above it. The bottom
     stays put — site.js adds its own clear band below via HERO_MEDIA_EXTRA. */
  .hero-text {
    padding-top: calc(clamp(26px, 4.6vw, 40px) + 15px);
    padding-bottom: clamp(26px, 4.6vw, 40px);
    max-width: none;
  }
  .hero-title { font-size: clamp(38px, 7.4vw, 62px); }
  .hero-sub { font-size: 16px; max-width: 42ch; }
  /* Now that the stacked scrim starts at fully clear, the white mark sits on
     untouched footage at the top of the frame and has to carry its own
     contrast. The eyebrow below it is a solid chip, so it needs nothing. */
  .hero-brand img { height: 58px; filter: drop-shadow(0 2px 16px rgba(15, 28, 20, 0.6)); }
  .quote-panel { margin-top: 26px; max-width: 600px; }
  .about-content { max-width: none; }
  .car-track { grid-auto-columns: calc((100% - clamp(16px, 1.8vw, 26px)) / 2); }
  .car-prev { left: 4px; }
  .car-next { right: 4px; }
}

@media (max-width: 900px) {
  :root { --nav-h: 72px; }
  .nav-links { display: none; }
  .menu-btn { display: flex; }
  .nav-brand img { height: 38px; }
  .trust-inner { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .mobile-cta { display: flex; }
}

@media (max-width: 680px) {
  :root { --nav-h: 66px; }
  .nav-brand img { height: 34px; }
  .hero-brand img { height: 50px; }
  .hero-brand { margin-bottom: 18px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-grid[data-collapsed="true"] .service-card:nth-child(n+4) { display: none; }
  .car-track { grid-auto-columns: 100%; }
  .car-nav { display: none !important; }   /* swipe instead; dots still show */
  .about-points { grid-template-columns: 1fr; gap: 20px; }
  .gallery-tile img { aspect-ratio: 4 / 3; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .hero-ctas { gap: 10px; }
  .hero-ctas .solid-btn, .hero-ctas .ghost-btn { width: 100%; }
  .cta-ctas .solid-btn, .cta-ctas .ghost-btn { width: 100%; }
  .statement-quote { max-width: none; }
  .footer-inner { padding-bottom: 86px; }   /* clear the floating pills */
}

@media (min-width: 1081px) and (max-height: 820px) {
  .hero-brand img { height: 58px; }
  .hero-brand { margin-bottom: 14px; }
  .hero-eyebrow { margin-bottom: 12px; }
  .hero-title { font-size: clamp(38px, 5vw, 76px); }
  .hero-sub { margin-top: 16px; }
  .hero-ctas { margin-top: 20px; }
  .hero-badges { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-media video { display: none; }   /* poster carries the hero */
}