/* ============================================================
   Gonzales Landscaping — Design System
   Colors extracted from logo (see business-info.md), fonts: Barlow / Barlow Condensed
   ============================================================ */

:root {
  --green-bright: #9FDD1C;
  --green-dark: #52A90B;   /* primary buttons/CTAs */
  --green-deep: #213F0A;   /* dark sections/footer */
  --gold: #F9BB28;
  --yellow: #FAF164;

  --text-dark: #1A2410;
  --text-body: #33421F;
  --text-muted: #5C6B4A;
  --white: #FFFFFF;
  --off-white: #F7FAF2;
  --border-light: #E3EAD6;

  --font-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;

  --radius: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 3px rgba(33,63,10,0.08);
  --shadow-md: 0 6px 20px rgba(33,63,10,0.12);
  --container-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: 0.2px;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em; }
a { color: var(--green-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding-left: 1.3em; }
img { max-width: 100%; display: block; }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: 64px 0; }
.section--tight { padding: 40px 0; }
.section--dark { background: var(--green-deep); color: var(--white); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--muted { background: var(--off-white); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green-dark);
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.section--dark .eyebrow { color: var(--green-bright); }

.veteran-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-dark);
  background: var(--off-white);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 7px 16px;
  margin: 10px 0;
}
.section--dark .veteran-badge,
.section--muted.section--dark .veteran-badge { color: var(--white); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  min-height: 48px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }

/* Phone-first: call button is the primary, highest-contrast action everywhere */
.btn--call {
  background: var(--gold);
  color: var(--green-deep);
  box-shadow: var(--shadow-md);
}
.btn--call:hover { background: #ffcc4d; }

.btn--quote {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.6);
}
.btn--quote:hover { background: rgba(255,255,255,0.12); }

/* Secondary variant for use on light backgrounds */
.btn--quote-light {
  background: var(--green-dark);
  color: var(--white);
  border-color: var(--green-dark);
}
.btn--quote-light:hover { background: #468f09; }

.btn--outline {
  background: transparent;
  border-color: var(--green-dark);
  color: var(--green-dark);
}
.btn--sm { padding: 10px 18px; font-size: 0.92rem; min-height: 40px; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 20px;
  max-width: var(--container-width);
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dark);
  font-family: var(--font-heading);
}
.brand:hover { text-decoration: none; }
.brand img { height: 52px; width: auto; }
.brand__name { font-size: 1.35rem; font-weight: 700; line-height: 1.05; }
.brand__tag { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.4px; }

.main-nav { display: none; }
.main-nav > ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; align-items: center; }
.main-nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text-dark);
  font-size: 1.02rem;
  letter-spacing: 0.2px;
}
.main-nav a:hover { color: var(--green-dark); text-decoration: none; }
.has-dropdown { position: relative; }
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 240px;
  padding: 8px;
  margin-top: 10px;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { display: block; }
.dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.96rem;
}
.dropdown a:hover { background: var(--off-white); text-decoration: none; }

.header-cta { display: none; align-items: center; gap: 10px; }
.header-cta .btn { min-height: 44px; padding: 10px 20px; }
.header-phone {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-family: var(--font-heading);
}
.header-phone small { font-size: 0.68rem; color: var(--text-muted); font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.5px; }
.header-phone strong { font-size: 1.15rem; color: var(--text-dark); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--white);
}
@media (min-width: 960px) {
  .main-nav { display: block; }
  .header-cta { display: flex; }
  .nav-toggle { display: none; }
}

/* Mobile nav panel */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--border-light);
  padding: 10px 20px 18px;
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav > ul > li { border-bottom: 1px solid var(--border-light); }
.mobile-nav a { display: block; padding: 12px 4px; font-family: var(--font-heading); font-weight: 600; color: var(--text-dark); font-size: 1.05rem; }
.mobile-nav .sub-list { padding-left: 12px; display: none; }
.mobile-nav .sub-list.is-open { display: block; }
.mobile-nav .sub-list a { font-weight: 500; font-size: 0.98rem; color: var(--text-body); padding: 9px 4px; }

/* Sticky mobile CTA bar — phone-first: call gets top billing */
.mobile-cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  display: flex;
  border-top: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
}
.mobile-cta-bar a {
  flex: 1;
  text-align: center;
  padding: 14px 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.3px;
}
.mobile-cta-bar .call {
  background: var(--gold);
  color: var(--green-deep);
  flex: 1.3;
}
.mobile-cta-bar .quote {
  background: var(--green-deep);
  color: var(--white);
}
@media (min-width: 960px) { .mobile-cta-bar { display: none; } }
body { padding-bottom: 64px; }
@media (min-width: 960px) { body { padding-bottom: 0; } }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--green-deep) 0%, #2c5210 100%);
  color: var(--white);
  padding: 56px 0 64px;
}
.hero .container { display: grid; gap: 36px; align-items: center; }
@media (min-width: 860px) { .hero .container { grid-template-columns: 1.15fr 0.85fr; } }
.hero h1 { color: var(--white); }
.hero p.lede { font-size: 1.15rem; color: rgba(255,255,255,0.88); max-width: 46ch; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.98rem;
}
.trust-strip span { display: flex; align-items: center; gap: 8px; }
.hero-panel {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.hero-panel h3 { color: var(--white); margin-bottom: 14px; }
.hero-panel ul { list-style: none; padding: 0; margin: 0 0 18px; }
.hero-panel li { padding: 7px 0 7px 26px; position: relative; font-size: 0.98rem; }
.hero-panel li::before { content: "✓"; position: absolute; left: 0; color: var(--green-bright); font-weight: 700; }

/* ---------- Hero background video (Cloudflare Stream) ---------- */
/* The clip is streamed from Cloudflare, so no video file lives in this
   repo. It plays behind the hero content as either a native <video>
   reading Cloudflare's HLS stream (iPhone, iPad and Safari, the only
   way iOS will autoplay it) or the Cloudflare iframe player (desktop
   Chrome, Firefox and Edge, which cannot decode HLS on their own).
   Both are laid out by the same rules below, so the framing matches.
   Underneath sits the clip's own poster frame and, under that, the
   hero's green gradient — if the video is slow, blocked or refused,
   the hero still looks finished rather than blank. */
.hero { position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 2; }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none; /* the Call, Text and Quote buttons stay clickable */

  /* The clip's opening frame, pulled from the same Cloudflare video and
     the same URL the <video> poster uses, so it costs one request. It
     covers the moments before playback starts and every case where
     playback never starts at all — iOS Low Power Mode being the common
     one — instead of leaving a black rectangle behind the overlay. */
  background-image: var(--hero-poster, url("https://customer-z6h960rdh3x0urtn.cloudflarestream.com/e749262869a1d35231dd018daff9e16c/thumbnails/thumbnail.jpg?time=0s&height=1280"));
  background-position: var(--hero-poster-position, center top);
  background-size: var(--hero-poster-size, cover);
  background-repeat: no-repeat;
}

/* The hero spans the full width of the window, so 100vw is its width.
   Taking whichever height is greater — the hero itself, or the height
   this vertical clip needs to span that full width — makes the footage
   cover the area instead of sitting in it like a video card. Width then
   follows from the clip's real 9:16 shape, so it is never stretched;
   whatever does not fit is cropped by the hero. */
.hero__video {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: auto;
  height: max(100%, calc(100vw * 16 / 9));
  min-width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
  pointer-events: none;
  display: block;
  background: transparent; /* let the poster frame show while loading */
  /* On very wide screens min-width wins over the 9:16 box, so the frame
     is cropped to fit rather than stretched. Applies to the <video>; the
     iframe player already letterboxes itself the same way. */
  object-fit: cover;
  object-position: center top;
}

/* iOS draws its own start-playback button over the middle of any video
   that is not playing yet — the `controls` attribute has nothing to do
   with it, and it appears during the load and stays put if autoplay is
   refused. This is decorative footage nobody is meant to operate, so
   every part of WebKit's media UI is suppressed. What is left when
   playback does not start is the poster frame on its own, which is what
   a still background should look like. */
video.hero__video::-webkit-media-controls,
video.hero__video::-webkit-media-controls-enclosure,
video.hero__video::-webkit-media-controls-panel,
video.hero__video::-webkit-media-controls-panel-container,
video.hero__video::-webkit-media-controls-play-button,
video.hero__video::-webkit-media-controls-overlay-play-button,
video.hero__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
  pointer-events: none;
}
/* Same button, addressed the way older WebKit builds expect it. */
.hero__media video::-webkit-media-controls-start-playback-button,
.hero__media video::-webkit-media-controls {
  display: none !important;
  -webkit-appearance: none;
}
/* Only a horizontal band of a vertical clip can show on a wide screen.
   Anchoring to the top of the frame and easing it up slightly keeps the
   crew member and the trimmer in shot rather than showing just driveway
   and grass. It cannot uncover the bottom edge: at these widths the clip
   is roughly three times taller than the hero. Narrower screens keep the
   plain top anchor, where the footage is tall enough to fill the hero on
   its own and the crop happens at the sides instead. */
@media (min-width: 860px) {
  .hero__video { transform: translate(-50%, -4%); }
}

/* Dark green laid over black, deep enough that the white headline, lede,
   buttons and trust strip hold their contrast over moving footage while
   the work behind them still reads clearly. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(33,63,10,0.76) 0%, rgba(26,48,8,0.68) 50%, rgba(33,63,10,0.78) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0.38) 100%);
}
/* Phone layouts stack the text over far more of the frame, including the
   bright concrete, so they lean a little darker. */
@media (max-width: 859px) {
  .hero__overlay {
    background:
      linear-gradient(135deg, rgba(33,63,10,0.82) 0%, rgba(26,48,8,0.76) 50%, rgba(33,63,10,0.84) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.24) 45%, rgba(0,0,0,0.42) 100%);
  }
}

/* Anyone who has asked their system for less motion gets the original
   still gradient hero instead of looping footage. */
@media (prefers-reduced-motion: reduce) {
  .hero__media { display: none; }
}

/* ---------- Service page hero variant ---------- */
/* Used by the Lawn Mowing page. It reuses every rule above — the same
   native-video-on-iOS / iframe-elsewhere machinery, the same suppressed
   WebKit controls, the same green gradient underneath — and only changes
   what is specific to that page: which clip's poster shows through, where
   the visible band of the vertical clip sits, and the few content colours
   that were written for a white page. */
.hero--service {
  /* The mowing clip's own frame at 8 seconds: the zero-turn mower out on
     the street, which reads as lawn work even as a still. Streamed from
     Cloudflare like the video itself, so no image lands in this repo. It is
     scaled and anchored to match the framing of the video below, so a phone
     that refuses to autoplay shows the same shot as one that plays. */
  --hero-poster: url("https://customer-z6h960rdh3x0urtn.cloudflarestream.com/b737aa75c45dfb282f72fd6226aa8d06/thumbnails/thumbnail.jpg?time=8s&height=1280");
  --hero-poster-position: center top;
  --hero-poster-size: auto max(190%, calc(100vw * 16 / 9));
  padding: 48px 0 56px;
}
/* The homepage hero lays a text column beside a panel, so its container is
   a grid. This one wraps a run of ordinary page copy, which keeps its own
   flow spacing instead. */
.hero--service > .container { display: block; }
.hero--service h1 { max-width: 34ch; }

/* Framing. This clip was shot for a phone feed: the mower and the crew
   member work across the middle of the tall frame, and whoever filmed it
   burned a "Lawn mowing starting at $50" caption into the lower third.
   That caption belongs in the player further down the page, but sliced in
   half behind the headline it would read as a mistake.

   So the bottom of the visible band is pinned just above where the caption
   starts, about 53% down the frame, and the band grows upwards from there
   as the screen narrows: a wide screen sees a thin strip across the middle
   of the shot, a phone sees the whole top half, scaled up. Either way the
   mowing is in frame, the caption never is, and the clip keeps its real
   9:16 shape rather than being stretched. `top: 100%` puts the top edge of
   the clip at the bottom of the hero; shifting it back up by 53% of its own
   height is what pins that line, whatever height the hero ends up. */
.hero--service .hero__video {
  top: 100%;
  transform: translate(-50%, -53%);
  /* Tall enough that the band above the caption always fills the hero:
     190% is 1 / 0.526, so the hero never needs more than the top 52.6%. */
  height: max(190%, calc(100vw * 16 / 9));
  object-position: center 40%;
}

/* The poster underneath is framed to match, so a phone that refuses to
   autoplay shows the same shot as one that plays. Wide screens crop it
   with `cover`, where a fixed offset lands closest to the band above. */
@media (min-width: 860px) {
  .hero--service {
    --hero-poster-position: center 36%;
    --hero-poster-size: cover;
  }
}

/* The eyebrow and trust bar were styled for dark text on white. On the
   footage they take the same treatment the dark sections already use, so
   the wording, order and check marks stay exactly as they were. */
.hero--service .eyebrow { color: var(--green-bright); }
.hero--service .trust-bar {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--white);
}
.hero--service .trust-bar span::before { color: var(--green-bright); }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card h3 { margin-bottom: 10px; }
.card h3 a { color: inherit; }
.card h3 a:hover { color: var(--green-dark); text-decoration: none; }
.card p:last-child { margin-bottom: 0; }
.card .icon { font-size: 1.8rem; margin-bottom: 12px; display: block; }
.card-link { display: inline-block; margin-top: 12px; font-family: var(--font-heading); font-weight: 700; color: var(--green-dark); }

/* Trust bar (used on every page template) */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  background: var(--off-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 16px 22px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.96rem;
  margin: 26px 0;
}
.trust-bar span { display: flex; align-items: center; gap: 7px; }
.trust-bar span::before { content: "✓"; color: var(--green-dark); font-weight: 700; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  font-size: 0.86rem;
  color: var(--text-muted);
  padding: 14px 0;
}
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--green-dark); }
.breadcrumbs span[aria-current] { color: var(--text-dark); font-weight: 600; }

/* ---------- Photo placeholder blocks (no stock photos, no invented images) ---------- */
.photo-placeholder {
  background: repeating-linear-gradient(135deg, var(--off-white), var(--off-white) 10px, #eef3e4 10px, #eef3e4 20px);
  border: 1.5px dashed var(--border-light);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.92rem;
  padding: 30px 16px;
  min-height: 160px;
}
.photo-placeholder strong { display: block; color: var(--text-dark); font-family: var(--font-heading); margin-bottom: 4px; }

.photo-real {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-light);
  min-height: 160px;
  background: var(--off-white);
}
.photo-real img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-real figcaption {
  padding: 10px 14px;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-family: var(--font-heading);
}

/* ---------- About page: Our Story video (Cloudflare Stream) ---------- */
/* Replaces the owner photo placeholder that used to sit beside the Our
   Story copy. The clip is streamed from Cloudflare, so no video file
   lives in this repo. It is portrait footage, so the frame carries its
   real 9:16 shape and the width is capped: at full column width the clip
   would tower over the text beside it, and stretching it to a landscape
   frame would distort it. Borders and corners match the photo frames
   used elsewhere on the site. */
.story-media {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.story-video {
  margin: 0;
  width: 100%;
  max-width: 320px;
  min-width: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--green-deep);
  box-shadow: var(--shadow-sm);
}
.story-video__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--green-deep);
}
.story-video__player {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.photo-stock {
  margin: 0;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px dashed var(--gold);
  min-height: 160px;
  background: var(--off-white);
}
.photo-stock img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-stock .stock-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: rgba(33, 63, 10, 0.88);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}
.photo-stock figcaption {
  padding: 10px 14px;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-muted);
  font-family: var(--font-heading);
}

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--border-light);
  padding: 18px 0;
}
.faq-item h3, .faq-item h4 { margin-bottom: 8px; font-size: 1.08rem; }
.faq-item p:last-child { margin-bottom: 0; }

/* ---------- CTA block ---------- */
.cta-block {
  background: var(--green-deep);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
}
.cta-block h2 { color: var(--white); }
.cta-block p { color: rgba(255,255,255,0.88); max-width: 56ch; margin-left: auto; margin-right: auto; }
.cta-block .hero-cta-row { justify-content: center; margin-top: 22px; }

/* ---------- Two-tier service area table ---------- */
.tier-grid { display: grid; gap: 18px; margin: 24px 0; }
@media (min-width: 720px) { .tier-grid { grid-template-columns: 1fr 1fr; } }
.tier-card {
  border-radius: var(--radius-lg);
  padding: 26px;
  border: 1px solid var(--border-light);
}
.tier-card--1 { background: var(--off-white); }
.tier-card--2 { background: #fff8e6; border-color: #f3e2ae; }
.tier-card h3 { display: flex; align-items: center; gap: 8px; }
.tier-card ul { list-style: none; padding: 0; margin: 12px 0 0; }
.tier-card li { padding: 5px 0 5px 24px; position: relative; font-weight: 600; }
.tier-card li::before { content: "📍"; position: absolute; left: 0; }
.fee-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-light);
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* ---------- Quote form ---------- */
.quote-form { display: grid; gap: 16px; }
.form-row { display: grid; gap: 16px; }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
label { display: block; font-family: var(--font-heading); font-weight: 600; margin-bottom: 6px; font-size: 0.95rem; color: var(--text-dark); }
input, select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1.5px solid var(--border-light);
  border-radius: 8px;
  background: var(--white);
  color: var(--text-dark);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green-dark); outline-offset: 1px; }
.form-hint { font-size: 0.85rem; color: var(--text-muted); margin-top: -8px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-deep); color: rgba(255,255,255,0.85); }
.footer-top { padding: 56px 0 30px; }
.footer-grid { display: grid; gap: 34px; }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer-grid h4 { color: var(--white); font-size: 1rem; margin-bottom: 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { color: rgba(255,255,255,0.78); }
.footer-grid a:hover { color: var(--green-bright); }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand img { height: 44px; }
.footer-brand span { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; color: var(--white); }
.footer-veteran { margin-top: 6px; color: var(--white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding: 18px 0;
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
}
.footer-bottom a { color: rgba(255,255,255,0.7); }

/* ---------- Misc utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.badge {
  display: inline-block;
  background: var(--green-bright);
  color: var(--green-deep);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.stars { color: var(--gold); font-size: 1.2rem; letter-spacing: 2px; }
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--white); color: var(--text-dark);
  padding: 10px 16px; z-index: 1000;
}
.skip-link:focus { left: 10px; top: 10px; }

/* ---------- Work video gallery (real job footage) ---------- */
/* Hidden until at least one real video file is confirmed on the server,
   so visitors never see an empty section or a broken player. */
.video-section.is-loading { display: none; }

.video-section__lead {
  font-size: 1.1rem;
  max-width: 62ch;
  color: var(--text-body);
}

.video-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-top: 28px;
}
@media (min-width: 760px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}

.video-card {
  margin: 0;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.video-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* --vc-ratio is set from the video's real dimensions, so footage is
   letterboxed rather than stretched — vertical phone clips included. */
.video-card__frame {
  position: relative;
  aspect-ratio: var(--vc-ratio, 16 / 9);
  max-height: 76vh;
  background: var(--green-deep);
  overflow: hidden;
}
.video-card__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--green-deep);
}

.video-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: var(--white);
  background: linear-gradient(180deg, rgba(33,63,10,0.15), rgba(33,63,10,0.55));
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition: background 0.15s ease;
}
.video-card__play svg {
  display: block;
  box-sizing: content-box;
  padding: 17px;
  border-radius: 999px;
  background: var(--green-bright);
  color: var(--green-deep);
  box-shadow: var(--shadow-md);
  transition: transform 0.15s ease, background 0.15s ease;
}
.video-card__play:hover { background: linear-gradient(180deg, rgba(33,63,10,0.1), rgba(33,63,10,0.45)); }
.video-card__play:hover svg { transform: scale(1.06); background: #b4ec3a; }
.video-card__play:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.video-card.is-playing .video-card__play { display: none; }

.video-card__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 14px 18px 16px;
}
.video-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-dark);
  line-height: 1.2;
}
.video-card__meta { font-size: 0.9rem; color: var(--text-muted); }

.video-section__footnote {
  margin-top: 26px;
  font-size: 0.98rem;
  color: var(--text-muted);
  max-width: 70ch;
}

@media (prefers-reduced-motion: reduce) {
  .video-card, .video-card__play, .video-card__play svg { transition: none; }
  .video-card:hover { transform: none; }
  .video-card__play:hover svg { transform: none; }
}

/* ---------- Homepage video showcase (Cloudflare Stream) ---------- */
/* Two clips side-by-side on desktop, stacked on phones. The videos are
   streamed from Cloudflare, so no video files live in this repo.
   Each frame carries its own true aspect ratio through --sc-ratio, so
   phone-shot vertical footage is never cropped, squashed or boxed in. */
.stream-section__lead {
  font-size: 1.1rem;
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.88);
}

.stream-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 28px;
  margin-top: 30px;
}
/* Columns are capped rather than stretched, so the pair stays centred and
   the two players sit next to each other instead of drifting apart on
   wide screens. Below this width they stack and each one goes full width. */
@media (min-width: 900px) {
  .stream-grid {
    grid-template-columns: repeat(2, minmax(0, 400px));
    justify-content: center;
    align-items: start;
    gap: 32px;
  }
}
/* A section with a single clip keeps one centred column instead of leaving
   an empty second one, which would push the card off centre. */
.stream-grid--single { grid-template-columns: minmax(0, 360px); justify-content: center; margin-top: 0; }
@media (min-width: 900px) {
  .stream-grid--single { grid-template-columns: minmax(0, 360px); }
}
.stream-grid--single .stream-card { max-width: 360px; }
/* Copy sits level with a tall vertical player rather than at the top of it. */
.stream-section .grid--2 { align-items: center; }
.stream-section__note {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.72);
  max-width: 46ch;
}

.stream-card {
  margin: 0;
  width: 100%;
  max-width: 400px;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.stream-card__frame {
  position: relative;
  aspect-ratio: var(--sc-ratio, 9 / 16);
  background: var(--green-deep);
}
.stream-card__player {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.stream-card__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 14px 18px 16px;
}
.stream-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-dark);
  line-height: 1.2;
}
.stream-card__meta { font-size: 0.9rem; color: var(--text-muted); }

/* ---------- Text / SMS button (pairs with the Call button) ---------- */
/* Same shape and weight as .btn--call, in the logo's bright green so the
   two read as a matched pair of contact options on light and dark sections. */
.btn--text {
  background: var(--green-bright);
  color: var(--green-deep);
  box-shadow: var(--shadow-md);
}
.btn--text:hover { background: #b4ec3a; }

/* Header: shown only when there is room beside the nav, so the existing
   header layout stays exactly as it is at narrower desktop widths. */
.header-cta .header-text { display: none; }
@media (min-width: 1080px) { .header-cta .header-text { display: inline-flex; } }

/* The sticky mobile bar now carries three actions, so the label type scales
   down on narrow phones to keep Call, Text and Quote on a single line. */
.mobile-cta-bar a { font-size: clamp(0.72rem, 3vw, 1rem); padding: 14px 6px; }
.mobile-cta-bar .text {
  background: var(--green-bright);
  color: var(--green-deep);
  /* Gold and bright green are close in lightness, so a hairline keeps the two
     buttons readable as separate taps where they meet edge to edge. */
  border-left: 1px solid rgba(33,63,10,0.22);
}