/* ============================================================================
   DFW TOP FENCE — SHARED FRAMEWORK  (assets/css/main.css)
   Design system V2: "Premium Brand Evolution" — see work/design-v2-spec.md (BINDING)
   Red/black brand DNA from the old site, rebuilt as a premium visual layer.
   Pure CSS, no build step. Mobile-first. Breakpoints: 768px / 1024px / 1440px.
   Rules honored here:
     - Tokens only inside components (raw hex lives ONLY in :root / @font-face)
     - All animation reduced-motion gated (micro 150-300ms, reveals/zooms 400ms)
     - :focus-visible rings on every interactive element (red on light, white on dark)
     - Touch targets >= 44px, no layout-shifting hovers, no emoji icons
     - A11y guardrails: never #A11705/#BE231A body text on charcoal — use
       --color-red-on-dark; gold for stars only.
   ========================================================================== */


/* =====================================================================
   1. FONT FACES (self-hosted, latin subset)
   Headings: Poppins 600 + 700 (static woff2 — Google serves statics for
   Poppins). Body: Source Sans 3 variable (kept from v1).
   ===================================================================== */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-sans-3-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =====================================================================
   2. DESIGN TOKENS (V2 — EXACT copy from design-v2-spec.md; do not edit here)
   ===================================================================== */
:root {
  color-scheme: dark;
  /* Color — V6 DARK THEME: brand red/black DNA on a near-black base.
     Two reds by design: --color-primary (#A11705) is for BUTTON/FILL
     backgrounds with white text; red as TEXT/icons on dark uses the
     brightened --color-red-on-dark (#FF6B54) via the overrides in §30. */
  --color-primary: #A11705;          /* red as button/fill bg (white text on it) */
  --color-primary-bright: #BE231A;   /* gradient partner */
  --color-primary-dark: #7E1204;     /* button hover */
  --color-on-primary: #FFFFFF;
  --color-accent: #BE231A;           /* CTA gradient base */
  --color-accent-dark: #A11705;
  --color-on-accent: #FFFFFF;
  --color-gold: #F59E0B;             /* stars only */
  --color-background: #0F1115;       /* page base (near-black) */
  --color-surface-warm: #15171C;     /* alternate band */
  --color-surface: #181B21;          /* "white" bands — elevated above base */
  --color-foreground: #ECEDEF;       /* primary text — ~17:1 on base */
  --color-card: #1E2128;             /* cards — elevated above all bands */
  --color-card-foreground: #ECEDEF;
  --color-muted: #14161B;            /* muted band */
  --color-muted-foreground: #ABB1B9; /* secondary text — ~9:1 on base */
  --color-border: #2D3038;           /* hairline visible on dark */
  --color-destructive: #F87171;      /* error / con-mark — bright on dark */
  --color-success: #4ADE80;          /* pro-mark / positive — ~10:1 on dark cards */
  --color-ring: #FF6B54;             /* focus ring — bright on dark */
  /* Deepest bands (top bar, stats strip, footer, gates, hero underlay) */
  --color-dark: #0A0B0E;             /* deepest section bg */
  --color-dark-2: #0C0D11;
  --color-dark-deep: #060709;        /* footer bottom bar */
  --color-dark-foreground: #F3F4F6;
  --color-dark-muted: #ABB1B9;       /* >=7:1 on #0A0B0E */
  --color-dark-border: #23262D;
  /* On-dark accent tints (a11y guardrail: NEVER raw brand red text on dark) */
  --color-red-on-dark: #FF6B54;      /* brightened brand red as TEXT, ~5.5:1 on dark */
  --color-on-dark-soft: #E5E5E5;     /* hero sublines */
  --color-tint-on-red: #FFD9D2;      /* accent word inside red CTA band */

  /* Gradients */
  --grad-cta: linear-gradient(135deg, #BE231A 0%, #A11705 100%);
  --grad-photo: linear-gradient(180deg, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / .72) 100%);
  --grad-hero: linear-gradient(100deg, rgb(10 10 10 / .82) 0%, rgb(10 10 10 / .55) 45%, rgb(161 23 5 / .28) 100%);

  /* Typography — headings Poppins (600/700), body Source Sans 3 */
  --font-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Type scale (rem) — base 16px, body line-height 1.6; H1/H2 use clamps below */
  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.375rem;
  --text-5xl: 3rem; --text-6xl: 3.75rem;
  --text-eyebrow: .8125rem;          /* section eyebrows (700/uppercase/.12em) */

  /* Spacing — 8px rhythm: 4 8 12 16 24 32 48 64 96 128 (kept from v1) */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;
  --space-24: 6rem; --space-32: 8rem;

  /* Elevation (warm-tinted) + the red CTA glow */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .40);
  --shadow-md: 0 6px 18px rgb(0 0 0 / .45);
  --shadow-lg: 0 18px 44px rgb(0 0 0 / .58);
  --shadow-red: 0 10px 30px rgb(190 35 26 / .42);   /* CTA buttons glow */

  /* Radius */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-full: 999px;

  /* Motion (kept from v1; --dur-slow for reveals + photo zooms) */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms;

  /* Layout */
  --container: 1200px;
  --header-h: 76px;
  --topbar-h: 40px;
  /* Diagonal DNA: rise of the 2deg top slant on dark/red bands */
  --slant-rise: 24px;

  /* Z-index scale (kept from v1) */
  --z-header: 100; --z-dropdown: 200; --z-mobile-bar: 300; --z-modal: 1000;
}


/* =====================================================================
   3. MODERN RESET
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-height: 100dvh;                    /* dvh, never 100vh (spec) */
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-foreground);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  /* Fixed top-bar + sticky header must never cover content */
  padding-top: calc(var(--topbar-h) + var(--header-h));
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; color: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[class], ol[class] { list-style: none; padding: 0; }

a { color: var(--color-primary); }

a:hover { color: var(--color-primary-dark); }

/* Every clickable gets a pointer (checklist) */
a, button, summary, select, label[for], [role="button"] { cursor: pointer; }

button { background: none; border: 0; }

:disabled { cursor: not-allowed; }

/* Universal visible focus ring (checklist: focus-visible everywhere) */
:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* On dark / red surfaces the ring flips to white (spec guardrail) */
.top-bar :focus-visible, .hero :focus-visible, .band--dark :focus-visible,
.stats-band :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible,
.mobile-call-bar :focus-visible {
  outline-color: var(--color-on-primary);
}

::selection {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}


/* =====================================================================
   4. BASE TYPOGRAPHY (V2 — Poppins headings, dramatic clamp scale)
   ===================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-foreground);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h3 { font-size: var(--text-xl); font-weight: 600; line-height: 1.3; }

h4 { font-size: var(--text-lg); font-weight: 600; line-height: 1.4; }

p { max-width: 65ch; }

.lead { font-size: var(--text-lg); color: var(--color-muted-foreground); }

strong { font-weight: 600; }

/* Red-phrase pattern (old site DNA): one key phrase per heading in brand red.
   On dark surfaces both resolve to the brightened on-dark red (guardrail);
   inside the red CTA band they resolve to the pale tint. */
.text-accent { color: var(--color-primary); }
.text-accent-bright { color: var(--color-primary-bright); }

.hero .text-accent, .hero .text-accent-bright,
.band--dark .text-accent, .band--dark .text-accent-bright,
.stats-band .text-accent, .stats-band .text-accent-bright,
.site-footer .text-accent, .site-footer .text-accent-bright {
  color: var(--color-red-on-dark);
}

.cta-band .text-accent, .cta-band .text-accent-bright {
  color: var(--color-tint-on-red);
}


/* =====================================================================
   5. LAYOUT — container, sections, band alternation, diagonal DNA
   ===================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-6); }
}

/* Section rhythm: --space-16 mobile / --space-24 desktop (spec) */
.section { padding-block: var(--space-16); }

@media (min-width: 1024px) {
  .section { padding-block: var(--space-24); }
}

/* Band alternation utilities — background/white/muted/warm/dark rhythm */
.band--white { background-color: var(--color-card); }
.band--muted { background-color: var(--color-muted); }
.band--warm { background-color: var(--color-surface-warm); }
.band--dark {
  background-color: var(--color-dark);
  color: var(--color-dark-foreground);
}
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 {
  color: var(--color-dark-foreground);
}
.band--dark p { color: var(--color-dark-muted); }
.band--dark a { color: var(--color-dark-foreground); }

/* Diagonal DNA (spec motif 4): 2deg top-edge slant for dark/red bands.
   Responsive-safe clip-path; pad the top so content clears the cut. */
.slant-top {
  clip-path: polygon(0 0, 100% var(--slant-rise), 100% 100%, 0 100%);
}
.section.slant-top { padding-top: calc(var(--space-16) + var(--slant-rise)); }

@media (min-width: 1024px) {
  .section.slant-top { padding-top: calc(var(--space-24) + var(--slant-rise)); }
}

/* Standard section intro block (v1 name .section-head kept; v2 alias
   .section-header). Pattern: eyebrow + H2 (one .text-accent phrase) +
   slanted red rule (spec component 13). */
.section-head, .section-header { max-width: 720px; margin-bottom: var(--space-12); }
.section-head > p, .section-header > p { margin-top: var(--space-4); }
.section-head--center, .section-header--center { margin-inline: auto; text-align: center; }
.section-head--center > p, .section-header--center > p { margin-inline: auto; }

/* 56px slanted red rule under section-header H2s */
.section-head h2::after, .section-header h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: var(--space-3);
  background: var(--grad-cta);
  border-radius: 1px;
  transform: skewX(-12deg);
}
.section-head--center h2::after, .section-header--center h2::after { margin-inline: auto; }

/* First section after the floating trust strip: the strip supplies the
   top spacing, so the section drops its own top padding (spec hero v2). */
.section--after-strip { padding-top: 0; }


/* =====================================================================
   6. UTILITIES
   ===================================================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Eyebrow label (V2: Poppins 700, .8125rem, uppercase, .12em, brand red) */
.eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

/* Red text on charcoal is forbidden — flip eyebrows on dark/red bands */
.band--dark .eyebrow, .stats-band .eyebrow { color: var(--color-red-on-dark); }
.cta-band .eyebrow { color: var(--color-tint-on-red); }

/* Screen-reader-only content */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Responsive grid helpers: 1 col -> 2 at 768 -> declared count at 1024 */
.grid { display: grid; gap: var(--space-6); }

@media (min-width: 768px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Inline flex row of small items (trust chips, meta rows) */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Inline SVG icon sizing (Lucide-style, stroke-width 2 — never emoji) */
.icon {
  width: 24px;
  height: 24px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 18px; height: 18px; }

/* Star rating row — gold is ONLY for stars (spec) */
.stars { display: inline-flex; gap: 2px; color: var(--color-gold); }
.stars .icon { width: 18px; height: 18px; fill: currentColor; stroke: none; }

/* Animated arrow link (V2 signature): red, underline sweeps in, arrow
   nudges right. Used inside photo cards and as inline "read more". */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-primary);
  text-decoration: none;
}

.link-arrow > span,
.link-arrow__label {
  background: linear-gradient(currentColor 0 0) no-repeat 0 100% / 0% 2px;
}

.link-arrow:hover { color: var(--color-primary-dark); }
.link-arrow:hover > span,
.link-arrow:hover .link-arrow__label { background-size: 100% 2px; }

.link-arrow .icon { width: 18px; height: 18px; }

@media (prefers-reduced-motion: no-preference) {
  .link-arrow > span, .link-arrow__label {
    transition: background-size var(--dur-base) var(--ease-out);
  }
  .link-arrow .icon { transition: transform var(--dur-fast) var(--ease-out); }
  .link-arrow:hover .icon { transform: translateX(4px); }
}


/* =====================================================================
   7. SKIP LINK
   ===================================================================== */
.skip-link {
  position: fixed;
  top: -120px;                /* fully off-screen until keyboard focus */
  left: var(--space-2);
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
}

.skip-link:focus-visible {
  top: var(--space-2);
  color: var(--color-on-primary);
  outline-color: var(--color-on-primary);
}


/* =====================================================================
   8. BUTTONS
   48px min height, radius-md, hover lift -1px (transform only, no
   layout shift), visible focus ring with 2px offset.
   V2: primary CTAs wear the red gradient + red shadow glow.
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }

.btn .icon { width: 20px; height: 20px; }

/* Primary — the ONE accent CTA per screen (V2: brand-red gradient) */
.btn--primary {
  background-color: var(--color-accent);          /* paint before gradient */
  background-image: var(--grad-cta);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  color: var(--color-on-accent);
  box-shadow: var(--shadow-red);
  filter: brightness(1.08);
}

/* Header/CTA emphasis variant — gradient + permanent red glow (spec #2) */
.btn--cta {
  background-color: var(--color-accent);
  background-image: var(--grad-cta);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-red);
}
.btn--cta:hover {
  color: var(--color-on-accent);
  box-shadow: var(--shadow-red);
  filter: brightness(1.1);
}

/* Secondary — brand-red outline */
.btn--secondary {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* Ghost — quiet inline action */
.btn--ghost {
  background-color: transparent;
  color: var(--color-primary);
}
.btn--ghost:hover {
  background-color: var(--color-muted);
  color: var(--color-primary-dark);
}

/* On dark bands (and hero photos) outlines + ghosts flip to white */
.band--dark .btn--secondary,
.hero .btn--secondary {
  border-color: var(--color-dark-foreground);
  color: var(--color-dark-foreground);
}
.band--dark .btn--secondary:hover,
.hero .btn--secondary:hover {
  background-color: var(--color-dark-foreground);
  color: var(--color-dark);
}
.hero .btn--ghost, .band--dark .btn--ghost { color: var(--color-dark-foreground); }
.hero .btn--ghost:hover, .band--dark .btn--ghost:hover {
  background-color: rgb(255 255 255 / .12);
  color: var(--color-on-primary);
}

.btn--lg { min-height: 56px; padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }

/* Hover lift + active press — guarded by reduced-motion (Section 22) */
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color var(--dur-fast) var(--ease-out),
                     color var(--dur-fast) var(--ease-out),
                     box-shadow var(--dur-base) var(--ease-out),
                     filter var(--dur-fast) var(--ease-out),
                     transform var(--dur-fast) var(--ease-out); }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
}


/* =====================================================================
   9. SITE HEADER (sticky below top bar) + DESKTOP NAV + DROPDOWNS
   JS adds .is-scrolled (shadow) and aria-expanded/.is-open on dropdowns.
   V2: red phone link, gradient CTA, red active underline, red-topped
   dropdown panels.
   ===================================================================== */
.site-header {
  position: fixed;
  inset: var(--topbar-h) 0 auto 0;
  height: var(--header-h);
  z-index: var(--z-header);
  background-color: var(--color-card);
  border-bottom: 1px solid var(--color-border);
}

.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 100%;
}

.site-header__logo { display: inline-flex; align-items: center; flex: none; }
.site-header__logo img { width: auto; height: 52px; }

/* --- Desktop nav (hidden below 1024px) ------------------------------ */
.site-nav { display: none; }

@media (min-width: 1024px) {
  .site-nav { display: block; }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-foreground);
    text-decoration: none;
    background: none;
  }

  .site-nav__link:hover { color: var(--color-primary); background-color: var(--color-muted); }

  /* Active page: red 3px underline, offset below the label (spec #2) */
  .site-nav__link[aria-current="page"],
  .site-nav__link.is-active {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
  }

  .site-nav__link .icon--chevron { width: 16px; height: 16px; }

  /* Dropdown container */
  .nav-dropdown { position: relative; }

  .nav-dropdown__menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: var(--z-dropdown);
    min-width: 240px;
    padding: var(--space-3);
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);   /* V2 red accent edge */
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    /* Hidden state — kept in DOM for crawlers + no-JS hover fallback */
    visibility: hidden;
    opacity: 0;
    transform: translateY(4px);
  }

  /* Open on hover, keyboard focus, or JS .is-open */
  .nav-dropdown:hover .nav-dropdown__menu,
  .nav-dropdown:focus-within .nav-dropdown__menu,
  .nav-dropdown.is-open .nav-dropdown__menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  /* Two-column dropdown (Services: Fences / Gates groups) */
  .nav-dropdown__menu--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    min-width: 460px;
  }

  .nav-dropdown__group-title {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
    padding: var(--space-2) var(--space-3) var(--space-1);
  }

  .nav-dropdown__menu a {
    display: block;
    padding: var(--space-2) var(--space-3);
    min-height: 40px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-foreground);
    text-decoration: none;
  }

  .nav-dropdown__menu a:hover {
    background-color: var(--color-muted);
    color: var(--color-primary);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .nav-dropdown__menu {
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                visibility var(--dur-fast);
  }
  .site-nav__link, .nav-dropdown__menu a {
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }
}

/* --- Header right cluster: phone + CTA + hamburger ------------------- */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-header__phone {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.site-header__phone:hover { color: var(--color-primary-dark); }

@media (min-width: 768px) {
  .site-header__phone { display: inline-flex; }
}

.site-header__cta { display: none; }

@media (min-width: 768px) {
  .site-header__cta {
    display: inline-flex;
    min-height: 44px;
    padding-block: var(--space-2);
    /* V2: header CTA always wears the gradient + red glow, regardless of
       whether the page markup says btn--primary (legacy) or btn--cta */
    background-color: var(--color-accent);
    background-image: var(--grad-cta);
    color: var(--color-on-accent);
    box-shadow: var(--shadow-red);
  }
  .site-header__cta:hover { color: var(--color-on-accent); filter: brightness(1.1); }
}

/* Hamburger (mobile/tablet only) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--color-foreground);
}
.nav-toggle:hover { background-color: var(--color-muted); }
.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
}


/* =====================================================================
   10. MOBILE NAV PANEL (full-screen under header, accordion groups)
   ===================================================================== */
.mobile-nav {
  position: fixed;
  top: calc(var(--topbar-h) + var(--header-h));
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-header);
  background-color: var(--color-card);
  overflow-y: auto;
  padding: var(--space-4) var(--space-4) var(--space-32);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
}

.mobile-nav.is-open { visibility: visible; opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: no-preference) {
  .mobile-nav {
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                visibility var(--dur-base);
  }
}

@media (min-width: 1024px) {
  .mobile-nav { display: none; }
}

/* Lock page scroll while panel is open (JS toggles on <body>) */
body.nav-locked { overflow: hidden; }

.mobile-nav__link,
.mobile-nav summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: var(--space-3) var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-foreground);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav summary { list-style: none; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary .icon--chevron { width: 20px; height: 20px; color: var(--color-primary); }
.mobile-nav details[open] summary .icon--chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: no-preference) {
  .mobile-nav summary .icon--chevron { transition: transform var(--dur-fast) var(--ease-out); }
}

.mobile-nav__sub { padding: var(--space-2) 0 var(--space-3); }

.mobile-nav__sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-base);
  color: var(--color-muted-foreground);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.mobile-nav__sub a:hover { background-color: var(--color-muted); color: var(--color-primary); }

.mobile-nav__sub-title {
  padding: var(--space-3) var(--space-4) var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.mobile-nav__cta { margin-top: var(--space-6); display: grid; gap: var(--space-3); }


/* =====================================================================
   11. MOBILE CALL BAR (fixed bottom, <768px only)
   V2: the old "CLICK TO CALL US NOW" reborn — red gradient bar with a
   white bold call action | divider | charcoal "Free Estimate" pill.
   ===================================================================== */
.mobile-call-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-mobile-bar);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3)
           calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background-color: var(--color-accent);     /* paint before gradient */
  background-image: var(--grad-cta);
  box-shadow: 0 -6px 18px rgb(20 14 12 / .25);
}

/* Vertical divider between the two actions (top-anchored: safe-area
   padding only grows the bottom, so this stays centered on the buttons) */
.mobile-call-bar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--space-2) + 10px);
  width: 1px;
  height: 28px;
  background-color: rgb(255 255 255 / .35);
  transform: translateX(-50%);
}

.mobile-call-bar .btn { min-height: 48px; padding-inline: var(--space-3); font-size: var(--text-sm); }

/* Call Now — white + bold, transparent on the gradient */
.mobile-call-bar .btn--secondary {
  border-color: transparent;
  background-color: transparent;
  color: var(--color-on-accent);
  font-weight: 700;
}
.mobile-call-bar .btn--secondary:hover {
  background-color: rgb(255 255 255 / .12);
  color: var(--color-on-accent);
}

/* Free Estimate — charcoal pill */
.mobile-call-bar .btn--primary {
  background-color: var(--color-dark);
  background-image: none;
  color: var(--color-on-primary);
  border-radius: var(--radius-full);
  box-shadow: none;
}
.mobile-call-bar .btn--primary:hover {
  color: var(--color-on-primary);
  filter: none;
  box-shadow: none;
  background-color: var(--color-dark-2);
}

/* Reserve room so the bar never covers content (matches spec) */
@media (max-width: 767px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 768px) {
  .mobile-call-bar { display: none; }
  body { padding-bottom: 0; }
}


/* =====================================================================
   12. HERO (full-bleed photo + V2 brand-red gradient overlay)
   Usage v1: <section class="hero" style="background-image:url(...)">
   Usage v2: <section class="hero hero--v2" style="background-image:url(...)">
     eyebrow chip + H1 (.text-accent-bright span) + subline + CTA pair,
     followed by the floating .trust-strip inside .section--after-strip.
   ===================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 70dvh;
  padding-block: var(--space-16);
  background-color: var(--color-dark);       /* paint before image loads */
  background-size: cover;
  background-position: center;
  color: var(--color-dark-foreground);
  isolation: isolate;
}

/* Keep the PHOTO bright (like the original site — vivid sky/grass/fence).
   Readability comes from a contained scrim panel behind the text (below),
   NOT a filter over the whole image. Only a soft bottom fade remains so the
   bright photo seats cleanly into the dark section beneath it. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(10 11 14 / .55) 0%, rgb(10 11 14 / 0) 20%);
}

/* Contained glass scrim behind the hero copy — the image stays bright around it */
.hero__content {
  max-width: 660px;
  padding: clamp(var(--space-5), 3vw, var(--space-8)) clamp(var(--space-5), 3.4vw, var(--space-9));
  background: rgb(7 8 11 / .66);
  border: 1px solid rgb(255 255 255 / .10);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 24px 60px rgb(0 0 0 / .35);
}

.hero h1 {
  color: var(--color-dark-foreground);
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 14px rgb(0 0 0 / .4);
}
/* On the bright photo the light-red accent can't clear contrast over the
   panel; the original site's hero headline is all-white — match it. */
.hero h1 .text-accent,
.hero h1 .text-accent-bright { color: var(--color-dark-foreground); }

.hero p {
  font-size: var(--text-lg);
  color: var(--color-on-dark-soft);
  max-width: 60ch;
  margin-bottom: var(--space-8);
}

/* Red eyebrow chip (V2 spec #3): semi-transparent red, thin white border */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: var(--space-1) var(--space-4);
  margin-bottom: var(--space-6);
  background-color: rgb(161 23 5 / .55);
  border: 1px solid rgb(255 255 255 / .2);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-on-primary);
}

/* Trust chips row (v1 pattern, recolored) */
.hero__chips { margin-bottom: var(--space-6); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid rgb(255 255 255 / .2);
  border-radius: var(--radius-full);
  background-color: rgb(10 10 10 / .55);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-dark-foreground);
}
.chip .icon { width: 16px; height: 16px; color: var(--color-gold); }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (min-width: 1024px) {
  .hero { min-height: 80dvh; }
}

/* V2 hero leaves room for the floating trust strip overlap below it */
.hero--v2 { padding-bottom: calc(var(--space-16) + var(--space-12)); }

/* --- Floating trust strip (V2 spec #3) -------------------------------
   White card overlapping the hero bottom by ~44px. Place as the first
   child of <section class="section section--after-strip"> > .container. */
.trust-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-6);
  margin-top: -44px;                    /* the overlap (spec ~44px) */
  margin-bottom: var(--space-12);
  padding: var(--space-6);
  background-color: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 1024px) {
  .trust-strip {
    grid-template-columns: repeat(4, 1fr);
    padding: var(--space-8);
    margin-bottom: var(--space-16);
  }
}

.trust-strip__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-card-foreground);
}

.trust-strip__item .icon {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
  stroke-width: 1.75;
}


/* =====================================================================
   13. CARDS + CARD GRID
   V2 adds .card--photo: photo-forward service card (old-site DNA) with
   red corner ribbon, hover photo zoom, white icon chip overlap.
   ===================================================================== */
.card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-card);
  color: var(--color-card-foreground);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.card:hover { box-shadow: var(--shadow-lg); }

@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
  }
  .card:hover { transform: translateY(-3px); }
}

/* Image on top — fixed aspect so there is zero CLS (spec: 16/10) */
.card__media {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  background-color: var(--color-muted);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
  padding: var(--space-6);
}

.card__body h3 a {
  color: var(--color-card-foreground);
  text-decoration: none;
}
.card__body h3 a:hover { color: var(--color-primary); }

.card__body p { color: var(--color-muted-foreground); }

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  min-height: 44px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.card__link:hover { color: var(--color-primary-dark); text-decoration: underline; }
.card__link .icon { width: 18px; height: 18px; }

@media (prefers-reduced-motion: no-preference) {
  .card__link .icon { transition: transform var(--dur-fast) var(--ease-out); }
  .card__link:hover .icon { transform: translateX(4px); }
}

/* Card grid = grid helper alias kept for spec naming */
.card-grid { display: grid; gap: var(--space-6); }

@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1440px) { .card-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Compact icon card (no image) for value props / process steps */
.card--icon .card__body { align-items: flex-start; }
.card--icon .icon {
  width: 40px;
  height: 40px;
  color: var(--color-red-on-dark);   /* on-dark red: feature/process icons clear 3:1 */
  stroke-width: 1.75;
}

/* --- V2 photo service card (spec #5) --------------------------------
   <article class="card card--photo">
     <div class="card__photo"><img class="card__media" ...></div>
     <div class="card__body">
       <span class="card__chip"><svg class="icon">...</svg></span>
       <h3>...</h3><p>...</p>
       <a class="link-arrow" href="..."><span>Label</span><svg class="icon">...</svg></a>
     </div>
   </article> */
.card--photo .card__photo {
  position: relative;
  overflow: hidden;                /* clips the zoomed photo */
  aspect-ratio: 16 / 10;
  background-color: var(--color-muted);
}

.card--photo .card__photo img,
.card--photo .card__photo .card__media {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

/* Red/dark diagonal corner ribbon (spec motif 4 — service cards ONLY,
   never gallery): stripe pair across the top-left photo corner */
.card--photo .card__photo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 90px;
  z-index: 1;
  background:
    linear-gradient(135deg,
      var(--color-primary) 0 14px,
      transparent 14px 20px,
      var(--color-dark) 20px 30px,
      transparent 30px);
  opacity: .9;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .card--photo .card__photo img,
  .card--photo .card__photo .card__media {
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .card--photo:hover .card__photo img,
  .card--photo:hover .card__photo .card__media { transform: scale(1.05); }
  .card--photo:hover { transform: translateY(-4px); }
}

/* White circular icon chip riding the photo's bottom-left edge */
.card__chip {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: calc(-26px - var(--space-6));  /* pull up over the photo */
  position: relative;
  z-index: 2;
  background-color: var(--color-card);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  color: var(--color-red-on-dark);   /* on-dark red: icon strokes clear 3:1 on the dark chip */
}
.card__chip .icon { width: 24px; height: 24px; stroke-width: 1.75; }

.card--photo .card__body h3 { font-weight: 600; }


/* =====================================================================
   14. STATS BAND (V2: charcoal + diagonal top slant, Poppins 700
   numbers with a thin red underline accent; JS counts up)
   ===================================================================== */
.stats-band {
  background-color: var(--color-dark);
  color: var(--color-dark-foreground);
  padding-block: calc(var(--space-16) + var(--slant-rise)) var(--space-16);
  clip-path: polygon(0 0, 100% var(--slant-rise), 100% 100%, 0 100%);
}

.stats-band__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
  text-align: center;
}

@media (min-width: 768px) {
  .stats-band__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat__number {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-dark-foreground);
  font-variant-numeric: tabular-nums;     /* steady width while counting */
}

/* Thin red underline accent (40px bar) under each number */
.stat__number::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: var(--space-2) auto 0;
  background: var(--grad-cta);
  border-radius: 1px;
}

.stat__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-dark-muted);
}


/* =====================================================================
   15. TESTIMONIALS (3/row desktop, scroll-snap row mobile)
   ===================================================================== */
.testimonial-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 85%;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-4);      /* room for scrollbar */
  -webkit-overflow-scrolling: touch;
}

.testimonial-row > * { scroll-snap-align: start; }

@media (min-width: 768px) {
  .testimonial-row {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background-color: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.testimonial-card blockquote {
  padding: 0;
  font-size: var(--text-lg);
  color: var(--color-card-foreground);
}

.testimonial-card figcaption {
  margin-top: auto;
  font-weight: 600;
  color: var(--color-muted-foreground);
}


/* =====================================================================
   16. FAQ (native <details>/<summary>, zero JS dependency)
   V2: red plus indicator that rotates 45deg when open (spec #9).
   Legacy chevron SVGs in existing markup are hidden.
   ===================================================================== */
.faq { display: grid; gap: var(--space-3); max-width: 800px; }

.faq details {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq details[open] { box-shadow: var(--shadow-sm); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary:hover { color: var(--color-primary); }

/* Hide the v1 chevron icons still present in page markup */
.faq summary .icon--chevron { display: none; }

/* Red plus, drawn in CSS; rotates 45deg to an X when open */
.faq summary::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--color-primary);
  background:
    linear-gradient(currentColor 0 0) no-repeat center / 2px 16px,
    linear-gradient(currentColor 0 0) no-repeat center / 16px 2px;
}

.faq details[open] summary::after { transform: rotate(45deg); }

@media (prefers-reduced-motion: no-preference) {
  .faq summary::after { transition: transform var(--dur-fast) var(--ease-out); }
}

.faq details > div {
  padding: 0 var(--space-6) var(--space-6);
  color: var(--color-muted-foreground);
}


/* =====================================================================
   17. BREADCRUMBS (every inner page; pair with BreadcrumbList schema)
   ===================================================================== */
.breadcrumbs { padding-block: var(--space-3); font-size: var(--text-sm); }

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Separator drawn in CSS so markup stays clean */
.breadcrumbs li + li::before {
  content: "/";
  color: var(--color-border);
}

.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;             /* touch target */
  color: var(--color-muted-foreground);
  text-decoration: none;
}
.breadcrumbs a:hover { color: var(--color-primary); text-decoration: underline; }

.breadcrumbs [aria-current="page"] {
  color: var(--color-foreground);
  font-weight: 600;
}


/* =====================================================================
   18. QUOTE FORM (visible labels ABOVE fields, 48px inputs,
       inline validation: error text below field, aria-live polite)
   V2: red focus ring (token), Poppins labels, and a red-top-border
   card variant for forms sitting on red/dark bands.
   ===================================================================== */
.quote-form {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  max-width: 640px;
  padding: var(--space-8);
  background-color: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  .quote-form { grid-template-columns: 1fr 1fr; }
  .quote-form .form-field--full,
  .quote-form .quote-form__actions { grid-column: 1 / -1; }
}

/* On red/dark bands the form card gets a 4px red top border + lift
   (spec #9). Also available explicitly as .quote-form--accent. */
.quote-form--accent,
.band--dark .quote-form,
.cta-band .quote-form {
  border-top: 4px solid var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.form-field { display: grid; gap: var(--space-1); }

.form-field label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-foreground);
}

.form-field label .req { color: var(--color-destructive); }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-foreground);
}

.form-field textarea { min-height: 120px; resize: vertical; }

.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--color-muted-foreground); opacity: .7; }

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 1px;
  border-color: var(--color-ring);
}

/* Even on dark bands, fields are on the white card — ring stays red */
.band--dark .quote-form :focus-visible,
.cta-band .quote-form :focus-visible { outline-color: var(--color-ring); }

/* Invalid state — set by JS via .is-invalid + aria-invalid */
.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--color-destructive);
}

.form-field .field-error {
  display: none;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-destructive);
}

.form-field.is-invalid .field-error { display: block; }

.quote-form__actions { display: grid; gap: var(--space-3); }

.quote-form__note { font-size: var(--text-sm); color: var(--color-muted-foreground); }

/* Form-level status line (aria-live region) */
.form-status { font-weight: 600; }
.form-status.is-error { color: var(--color-destructive); }


/* =====================================================================
   19. CTA BAND (final conversion section)
   V2: red gradient + faint diagonal texture + top slant with the old
   triangle-notch reborn (carved into the clip-path so whatever band
   sits above always shows through the ▼). White primary button.
   ===================================================================== */
.cta-band {
  position: relative;
  background-color: var(--color-accent);     /* paint before gradient */
  background-image: var(--grad-cta);
  color: var(--color-on-primary);
  text-align: center;
  padding-block: calc(var(--space-16) + 26px) var(--space-16);
  /* Top slant (motif 4) + centered ▼ notch carved at 50% */
  clip-path: polygon(0 0, 46% 11px, 50% 26px, 54% 13px, 100% var(--slant-rise),
                     100% 100%, 0 100%);
}

/* Faint diagonal texture overlay (spec #6) */
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg,
    rgb(255 255 255 / .05) 0 1px, transparent 1px 14px);
  pointer-events: none;
}

.cta-band .container { position: relative; z-index: 1; }

.cta-band h2 { color: var(--color-on-primary); margin-bottom: var(--space-3); }

.cta-band p {
  color: var(--color-on-primary);
  opacity: .92;
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* Primary flips to WHITE (red text) for contrast on the red band */
.cta-band .btn--primary,
.cta-band .btn--cta {
  background-color: var(--color-card);
  background-image: none;
  color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}
.cta-band .btn--primary:hover,
.cta-band .btn--cta:hover {
  color: var(--color-primary-dark);
  filter: none;
  box-shadow: var(--shadow-lg);
}

/* Secondary: white outline on red */
.cta-band .btn--secondary {
  border-color: var(--color-on-primary);
  color: var(--color-on-primary);
}
.cta-band .btn--secondary:hover {
  background-color: var(--color-on-primary);
  color: var(--color-primary);
}


/* =====================================================================
   20. FOOTER (V2: charcoal #141414, red gradient top border, red
   underline bars on column titles, arrow-prefix link hovers, red
   social chips, near-black bottom bar)
   ===================================================================== */
.site-footer {
  position: relative;
  background-color: var(--color-dark);
  color: var(--color-dark-foreground);
  padding-top: var(--space-16);
  font-size: var(--text-sm);
}

/* 3px red gradient top border (border-top can't take a gradient) */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-cta);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-8);
  padding-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.site-footer__logo img { width: auto; height: 56px; margin-bottom: var(--space-4); }

.site-footer h2 {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-dark-foreground);
  margin-bottom: var(--space-4);
}

/* 24px red underline bar under each column title (spec #10) */
.site-footer h2::after {
  content: "";
  display: block;
  width: 24px;
  height: 3px;
  margin-top: var(--space-2);
  background: var(--grad-cta);
  border-radius: 1px;
}

.site-footer p { color: var(--color-dark-muted); }

.site-footer address { font-style: normal; color: var(--color-dark-muted); }

.site-footer__links { display: grid; gap: var(--space-1); }

.site-footer__links a,
.site-footer address a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-block: var(--space-1);
  color: var(--color-dark-muted);
  text-decoration: none;
}

.site-footer__links a:hover,
.site-footer address a:hover {
  color: var(--color-dark-foreground);
}

/* Arrow prefix on hover: chevron fades in at the left while the link
   nudges right — transform only, zero layout shift */
.site-footer__links a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--color-red-on-dark);
  border-right: 2px solid var(--color-red-on-dark);
  transform: translateY(-50%) rotate(45deg);
  opacity: 0;
}

.site-footer__links a:hover::before { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .site-footer__links a {
    transition: color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }
  .site-footer__links a::before { transition: opacity var(--dur-fast) var(--ease-out); }
  .site-footer__links a:hover { transform: translateX(14px); }
}

.site-footer__nap { display: grid; gap: var(--space-3); }

.site-footer__nap .cluster { gap: var(--space-2); }
.site-footer__nap .icon { width: 18px; height: 18px; color: var(--color-dark-muted); }

/* Social icons: circle chips, red gradient on hover (spec #10) */
.site-footer__social { gap: var(--space-3); }

.site-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background-color: var(--color-dark-2);
  border: 1px solid var(--color-dark-border);
  color: var(--color-dark-foreground);
}

.site-footer__social a:hover {
  background-color: var(--color-accent);
  background-image: var(--grad-cta);
  border-color: transparent;
  color: var(--color-on-accent);
}

.site-footer__social .icon { width: 20px; height: 20px; color: inherit; }

@media (prefers-reduced-motion: no-preference) {
  .site-footer__social a {
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }
  .site-footer__social a:hover { transform: translateY(-2px); }
}

/* Trust badges row (Fully Insured, warranty) */
.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-full);
  color: var(--color-dark-foreground);
  font-weight: 600;
  font-size: var(--text-xs);
}
.footer-badge .icon { width: 14px; height: 14px; color: var(--color-gold); }

/* Bottom bar — near-black (spec #10) */
.site-footer__bottom {
  background-color: var(--color-dark-deep);
  border-top: 1px solid var(--color-dark-border);
  padding-block: var(--space-6);
}

.site-footer__bottom .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-dark-muted);
  text-decoration: none;
}
.site-footer__legal a:hover { color: var(--color-dark-foreground); text-decoration: underline; }

.site-footer__copy { color: var(--color-dark-muted); }


/* =====================================================================
   21. GALLERY FILTER (data-filter buttons + data-category items)
   ===================================================================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-card);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-muted-foreground);
}

.filter-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

.filter-btn[aria-pressed="true"] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

@media (prefers-reduced-motion: no-preference) {
  .filter-btn {
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }
}

/* JS sets hidden attribute on filtered-out items; CSS just respects it */
[data-category][hidden] { display: none; }

.gallery-grid { display: grid; gap: var(--space-4); }

@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }

.gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  background-color: var(--color-muted);
}


/* =====================================================================
   22. MOTION & REVEAL HELPERS (V2: fade + 16px rise, 70ms stagger
   inside .reveal-group via --reveal-delay set by JS)
   Without JS — or with reduced motion — content is simply visible:
   the hidden initial state only exists under html.js, which is added
   by main.js at runtime.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js .reveal.is-visible { opacity: 1; transform: translateY(0); }
}


/* =====================================================================
   23. PRINT (quotes get printed — keep it useful)
   ===================================================================== */
@media print {
  .top-bar, .site-header, .mobile-call-bar, .mobile-nav, .skip-link,
  .cta-band, .site-footer__bottom { display: none; }
  body { padding: 0; background: none; }
}


/* =====================================================================
   24. COMPARISON TABLE (fences hub, residential guide, blog article)
   Usage: <div class="compare-table"><table>...</table></div>
   ===================================================================== */
.compare-table {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--shadow-sm);
}
.compare-table table { width: 100%; border-collapse: collapse; min-width: 680px; }
.compare-table th, .compare-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.compare-table thead th {
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.compare-table tbody th { font-weight: 600; }
.compare-table tbody tr:nth-child(even) { background: var(--color-muted); }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }

/* Rounded, shadowed frame for inline content photos */
.media-frame {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }


/* =====================================================================
   25. TOP OFFER BAR (V2 spec #1 — ALL pages, fixed above the header)
   <div class="top-bar"><div class="container">
     <p class="top-bar__offer">Get Your Free Estimate — Valid for 60 Days!</p>
     <a class="top-bar__phone" href="tel:...">...</a>
   </div></div>
   ===================================================================== */
.top-bar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--topbar-h);
  z-index: var(--z-header);
  background-color: var(--color-dark);
  color: var(--color-on-primary);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
}

.top-bar .container {
  display: flex;
  align-items: center;
  justify-content: center;            /* mobile: offer only, centered */
  gap: var(--space-4);
  min-width: 0;
}

.top-bar__offer {
  margin: 0;
  max-width: none;
  font-weight: 600;
  color: var(--color-on-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-bar__phone {
  display: none;                       /* mobile: phone lives in call bar */
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;                    /* touch target taller than the bar */
  flex: none;
  font-weight: 600;
  color: var(--color-on-primary);
  text-decoration: none;
}

.top-bar__phone:hover { color: var(--color-on-primary); text-decoration: underline; }

.top-bar__phone .icon { color: var(--color-red-on-dark); }

@media (min-width: 768px) {
  .top-bar .container { justify-content: space-between; }
  .top-bar__phone { display: inline-flex; }
}


/* =====================================================================
   26. FENCE-TYPES CAROUSEL (V2 spec #8 — home + hubs)
   Pure CSS scroll-snap; main.js wires the arrow buttons (desktop) and
   .is-start/.is-end state. Mobile: swipe.
   <div class="carousel" data-carousel>
     <div class="carousel__track" tabindex="0" aria-label="...">
       <a class="carousel__card" href="...">
         <img ...><span class="carousel__label">Wood</span>
         <span class="carousel__chevron"><svg class="icon">...</svg></span>
       </a> ...
     </div>
     <button class="carousel__btn carousel__btn--prev" data-carousel-btn="prev" ...>
     <button class="carousel__btn carousel__btn--next" data-carousel-btn="next" ...>
   </div>
   ===================================================================== */
.carousel { position: relative; }

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72%;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--space-2);
  scrollbar-width: none;               /* arrows + swipe are the affordance */
  -webkit-overflow-scrolling: touch;
}

.carousel__track::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
  .carousel__track { grid-auto-columns: calc((100% - var(--space-4)) / 2); }
}

@media (min-width: 1024px) {
  /* 4 visible (spec) */
  .carousel__track { grid-auto-columns: calc((100% - 3 * var(--space-4)) / 4); }
}

.carousel__card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-snap-align: start;
  background-color: var(--color-muted);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.carousel__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Photo legibility gradient (spec --grad-photo) */
.carousel__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-photo);
}

.carousel__label {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 1;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--color-on-primary);
}

.carousel__chevron {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  background-image: var(--grad-cta);
  color: var(--color-on-accent);
}

.carousel__chevron .icon { width: 18px; height: 18px; }

@media (prefers-reduced-motion: no-preference) {
  .carousel__card img { transition: transform var(--dur-slow) var(--ease-out); }
  .carousel__card:hover img { transform: scale(1.05); }
  .carousel__chevron { transition: transform var(--dur-fast) var(--ease-out); }
  .carousel__card:hover .carousel__chevron { transform: translateX(3px); }
}

/* Arrow buttons: white circles, desktop only, JS required */
.carousel__btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: var(--color-card);
  box-shadow: var(--shadow-md);
  color: var(--color-foreground);
  transform: translateY(-50%);
}

.carousel__btn:hover { color: var(--color-primary); box-shadow: var(--shadow-lg); }

.carousel__btn--prev { left: calc(-1 * var(--space-2)); }
.carousel__btn--next { right: calc(-1 * var(--space-2)); }

.carousel.is-start .carousel__btn--prev,
.carousel.is-end .carousel__btn--next {
  opacity: .35;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .js .carousel__btn { display: inline-flex; }
}

@media (prefers-reduced-motion: no-preference) {
  .carousel__btn {
    transition: color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
  }
}

/* =====================================================================
   24. V2 POLISH PASS (self-review fixes)
   ===================================================================== */

/* Reveal: items already in the first viewport appear with no animation */
.js .reveal.no-anim { transition: none !important; }

/* Carousel: keep labels clear of the chevron button */
.carousel__label { padding-right: 64px; }

/* Stats band: short number-stats stay on one line; long text-valued stats
   use a smaller font and are allowed to wrap (prevents mobile overflow). */
.stats-band .stat__number:not(.stat__number--text) { white-space: nowrap; }
.stat__number--text {
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Service checklists: flat lists become check chips */
ul.checklist {
  gap: var(--space-3) !important;       /* beats the inline gap */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  list-style: none;
  padding-left: 0;
}
ul.checklist > li {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-4) !important;
  min-height: 44px;
  align-items: center !important;
  font-weight: 600;
  color: var(--color-card-foreground);
}
ul.checklist > li > .icon {
  color: var(--color-red-on-dark);   /* on-dark red: check icons clear 3:1 on the card */
  flex: none;
  width: 20px;
  height: 20px;
}

/* Gallery: fences sit low in portrait photos — bias the crop down and
   normalize tile shape so the grid reads as a designed wall */
.gallery-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 62%;
}

/* Inline icons inside text rows (contact card) must not break the line */
p > .icon:first-child {
  display: inline-block;
  vertical-align: -0.18em;
  margin-right: var(--space-2);
}

/* =====================================================================
   25. V3 — AUTOMATIC GATES EMPHASIS + CONTRAST HARDENING
   ===================================================================== */

/* Carousel labels: guaranteed-contrast charcoal chip (white text was
   unreadable over bright photo areas / while images load) */
.carousel__label {
  background-color: rgb(10 10 10 / .78);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  line-height: 1.2;
  max-width: calc(100% - 88px);
}

/* Split feature: copy beside a framed photo */
.media-split {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 1024px) {
  .media-split { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  .media-split--flip > .media-split__media { order: -1; }
}
.media-split__media img {
  width: 100%;
  height: auto;
  /* Feature images vary (wide truck banner 2.66:1, 16:9 video poster, 4:3 photos).
     Show each at its NATURAL ratio so nothing is cropped in half. */
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ---------------------------------------------------------------------
   Brand / About "truck band" — the branded-truck render has a solid red
   (~#BE231A) background. On a dark card it reads as a pasted rectangle;
   the original site instead sits it in a full-width RED band so the
   vehicle's red blends into the band. We mirror that: flat band red ==
   the render's red, white copy, truck framed by nothing.
   --------------------------------------------------------------------- */
.truck-band {
  background-color: var(--color-accent);      /* #BE231A — same red as the render */
  color: var(--color-on-primary);
}
.truck-band .eyebrow { color: var(--color-tint-on-red); }
.truck-band h2,
.truck-band p,
.truck-band .gates-banner__props li { color: var(--color-on-primary); }
.truck-band h2 .text-accent { color: var(--color-tint-on-red); }
.truck-band .gates-banner__props .icon { color: var(--color-on-primary); }
.truck-band .section-head h2::after,
.truck-band .section-header h2::after { background-color: var(--color-on-primary); }
/* Truck sits directly on the band's red (same hue) — no frame, so it reads
   as part of the band, not a floating card. */
.media-split--truck .media-split__media img {
  border-radius: 0;
  box-shadow: none;
  background-color: var(--color-accent);
}

/* 3-up photo strip with captions */
.photo-strip {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
@media (min-width: 768px) { .photo-strip { grid-template-columns: repeat(3, 1fr); } }
.photo-strip figure { margin: 0; }
.photo-strip img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 62%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.photo-strip figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted-foreground);
}

/* Video link card (no embed — zero external requests) */
.video-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.video-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / .15) 0%, rgb(0 0 0 / .55) 100%);
}
.video-card__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  border-radius: var(--radius-full);
  background: var(--grad-cta);
  box-shadow: var(--shadow-red);
  display: grid;
  place-items: center;
  z-index: 1;
}
.video-card__play .icon { width: 34px; height: 34px; color: var(--color-on-accent); margin-left: 4px; }
.video-card__label {
  position: absolute;
  left: var(--space-6); bottom: var(--space-5);
  z-index: 1;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xl);
  text-shadow: 0 2px 8px rgb(0 0 0 / .5);
}
@media (prefers-reduced-motion: no-preference) {
  .video-card__play { transition: transform var(--dur-fast) var(--ease-out); }
  .video-card:hover .video-card__play { transform: translate(-50%, -50%) scale(1.07); }
}

/* Home: automatic-gates flagship banner (dark, slanted, photo right) */
.gates-banner {
  position: relative;
  background-color: var(--color-dark);
  color: var(--color-dark-foreground);
}
.gates-banner .eyebrow { color: var(--color-red-on-dark); }
.gates-banner h2 { color: var(--color-dark-foreground); }
.gates-banner p { color: var(--color-dark-muted); }
.gates-banner__props {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0;
  display: grid;
  gap: var(--space-3);
}
.gates-banner__props li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  color: var(--color-dark-foreground);
}
.gates-banner__props .icon { color: var(--color-red-on-dark); flex: none; }

/* Featured nav item — Automatic Gates (the flagship service) */
.site-nav__link--featured { color: var(--color-primary); font-weight: 700; }
.site-nav__link--featured:hover { color: var(--color-primary-dark); }
.mobile-nav__link--featured { color: var(--color-primary); font-weight: 700; }

/* 8 nav items: tighten gaps below 1280 so nothing wraps or collides */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-nav__list { gap: var(--space-2); }
  .site-nav__link { padding-inline: var(--space-2); font-size: 0.9375rem; }
  .site-header__phone { display: none; }   /* phone still in top CTA + call bar + footer */
}

/* Dark-footer utility classes reused inside light <main> sections
   (contact/faq/gallery proof rows, 404 link cards) — flip to light-
   context colors. Root cause of the "white on white" sightings. */
main .footer-badge {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  color: var(--color-card-foreground);
  box-shadow: var(--shadow-sm);
}
main .footer-badge .icon { color: var(--color-primary); }
main .site-footer__links a { color: var(--color-muted-foreground); }
main .site-footer__links a:hover { color: var(--color-primary); }

/* 8 nav items: never let labels or the CTA wrap mid-label */
.site-nav__link, .site-header .btn { white-space: nowrap; }
@media (min-width: 1280px) {
  .site-nav__list { gap: var(--space-3); }
  .site-nav__link { padding-inline: var(--space-2); font-size: 0.9375rem; }
}

/* Header fit: compact CTA + tighter nav in the narrow desktop band */
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-nav__list { gap: var(--space-1); }
  .site-nav__link { padding-inline: var(--space-1); font-size: 0.875rem; }
  .site-header .btn { padding-inline: var(--space-3); font-size: 0.875rem; }
}
@media (min-width: 1280px) {
  .site-header .btn { padding-inline: var(--space-4); }
}

/* Header phone must never wrap */
.site-header a[href^="tel:"] { white-space: nowrap; }

/* =====================================================================
   26. V4 FIX — bare .card__media height (the sky-dominated tall cards)
   Root cause: <img> HTML height attr made BOTH axes definite, so the
   16/10 aspect-ratio was ignored and portrait photos rendered full
   height (mostly sky). height:auto lets aspect-ratio drive the box;
   object-position biases the crop down to the fence.
   (.card--photo wrapper imgs use height:100% at higher specificity — untouched.)
   ===================================================================== */
.card__media {
  height: auto;
  aspect-ratio: 16 / 10;
  object-position: 50% 62%;
}

/* =====================================================================
   27. V4 FIX — long-form article layout (hero crop + table breakout)
   The article body was capped ~572px so the 6-col comparison table was
   cut off and h-scrolled even on desktop; the hero figure showed mostly
   sky. Readable prose stays ~65ch; tables/figures use the wider column.
   ===================================================================== */
.article-main .article-body { max-width: 880px; margin-inline: auto; }
.article-main .article-body > p,
.article-main .article-body > ul,
.article-main .article-body > ol,
.article-main .article-body > blockquote { max-width: 68ch; }
.article-main .article-body > h2,
.article-main .article-body > h3,
.article-main .article-body > .table-wrap,
.article-main .article-body > .media-frame,
.article-main .article-body > figure { max-width: none; }

/* Table scroll container (article markup: .table-wrap > table.compare-table) */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--shadow-sm);
  margin-block: var(--space-6);
}
table.compare-table { width: 100%; border-collapse: collapse; min-width: 600px; }

/* Article hero figure: banner crop biased to the fence, not the sky */
.article-figure { margin: var(--space-6) auto; max-width: 880px; }
.article-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 62%;
  border-radius: var(--radius-lg);
  display: block;
}
.article-figure figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-muted-foreground);
  text-align: center;
}


/* =====================================================================
   29. V5 — YouTube facade (real gate video, click-to-load embed)
   ===================================================================== */
button.video-card {
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  background: none;
  font: inherit;
  cursor: pointer;
}
button.video-card:focus-visible { outline: 3px solid var(--color-primary-bright); outline-offset: 3px; }
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #0c0d10;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Caption under the gate video (dark band — keep it legible) */
.gate-demo__caption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-dark-muted);
}
.gate-demo__caption a { color: var(--color-red-on-dark); font-weight: 600; }

/* =====================================================================
   30. V6 DARK THEME — component reconciliation
   Tokens above flipped the surfaces to dark (body/cards/bands/forms/faq
   auto-followed). This block fixes the things tokens can't: red used as
   TEXT must brighten on dark, "white" bands need a distinct elevation,
   cards need a border (shadows barely read on dark), and the header logo
   must render light.
   ===================================================================== */

/* --- Red AS TEXT/ICON → brightened on-dark red everywhere -------------- */
a { color: var(--color-red-on-dark); }
a:hover { color: #ff8a78; }
.eyebrow { color: var(--color-red-on-dark); }
.text-accent, .text-accent-bright { color: var(--color-red-on-dark); }
.link-arrow, .card__link { color: var(--color-red-on-dark); }
.btn--ghost { color: var(--color-red-on-dark); }
.btn--ghost:hover { background-color: rgb(255 107 84 / .12); color: #ff8a78; }
.site-nav__link--featured { color: var(--color-red-on-dark); }
.site-nav__link--featured:hover { color: #ff8a78; }
.mobile-nav__link--featured { color: var(--color-red-on-dark); }
.site-header__phone { color: var(--color-red-on-dark); }
.site-header__phone:hover { color: #ff8a78; }
.site-nav__link .icon--chevron,
.mobile-nav summary .icon--chevron { color: var(--color-red-on-dark); }
.faq summary:hover { color: var(--color-red-on-dark); }
.faq summary::after { color: var(--color-red-on-dark); } /* red +/× drawn with currentColor */
.breadcrumbs a:hover { color: var(--color-red-on-dark); }
.trust-strip__item .icon { color: var(--color-red-on-dark); }
main .footer-badge .icon { color: var(--color-red-on-dark); }
main .site-footer__links a:hover { color: var(--color-red-on-dark); }

/* --- Secondary (outline) button → light outline on dark --------------- */
.btn--secondary { border-color: var(--color-foreground); color: var(--color-foreground); }
.btn--secondary:hover { background-color: var(--color-foreground); color: var(--color-background); }

/* --- Band elevation ladder (base 0F → muted 14 → white-band 18 → card 1E → dark 0A) */
.band--white { background-color: var(--color-surface); }
.section--after-strip { background-color: var(--color-surface); }

/* --- Cards & panels: borders carry elevation when shadows can't ------- */
.card,
.trust-strip,
.testimonial-card,
.video-embed,
.compare-table,
.nav-dropdown__menu {
  border: 1px solid var(--color-border);
}
.card--photo { background-color: var(--color-card); }

/* --- Header logo uses the white-on-transparent asset (logo-white.png)
       swapped in the markup; the dark logo.png has a light fill so a CSS
       filter would white it out. No filter here. --- */

/* --- Inputs: explicit dark fields (tokens already do this; lock it in) - */
.form-field input,
.form-field select,
.form-field textarea {
  background-color: var(--color-background);
  color: var(--color-foreground);
  border-color: var(--color-border);
}
.form-field select { color: var(--color-foreground); }
.form-field option { background-color: var(--color-card); color: var(--color-foreground); }

/* --- Section-head slanted rule + stat underline already use primary red;
       brighten them on the dark base for visibility -------------------- */
.section-head h2::after, .section-header h2::after { background-color: var(--color-red-on-dark); }
.stat__value::after, .stat__number::after { background-color: var(--color-red-on-dark); }

/* CTA band primary button: solid LIGHT button + brand-red text, so it
   pops on the red band (the default rule used --color-card, now dark). */
.cta-band .btn--primary,
.cta-band .btn--cta {
  background-color: #ffffff;
  background-image: none;
  color: var(--color-primary);
}
.cta-band .btn--primary:hover,
.cta-band .btn--cta:hover {
  background-color: #ffe9e5;
  color: var(--color-primary-dark);
}

/* Honeypot anti-spam field — visually & a11y hidden, but bots fill it.
   Off-screen (not display:none) so naive bots still see/fill it. */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* =====================================================================
   INSTANT ONLINE QUOTE — embeds the WB Fence CPQ configurator (the
   pricing system) from cpq.wbc.bina-solutions.co.il inside an iframe.
   The tool captures the lead into the CRM and shows an instant price.
   ===================================================================== */
.quote-embed {
  width: 100%;
  max-width: 1040px;           /* the full "Build a fence quote" configurator */
  margin: var(--space-8) auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  background: var(--color-card);
}
.quote-embed iframe {
  display: block;
  width: 100%;
  height: 560px;               /* initial; JS auto-fits to each step's content */
  border: 0;
  transition: height .2s ease;
}