/* ============================================================
   Pole Barn — site/style.css  ("rugged warm" skin)
   A block-palette skin of the shared vocabulary, derived from
   _easton-template. Same variable NAMES, new VALUES.
   Palette: warm charcoal + barn red, timber & oat neutrals,
   galvanized steel accents.
   Fonts: Zilla Slab (headings, slab) + Source Sans 3 (body), self-hosted.
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* --navy* = warm charcoal darks (header, dark sections, footer, form card) */
  --navy: #2B2A28;               /* dark sections, header, footer */
  --navy-2: #35332F;             /* slightly lighter charcoal panels */
  --navy-card: #3A362F;          /* quote-form card (warm dark) */
  /* --teal* = timber brown — the secondary accent (labels, h3, links, bands) */
  --teal: #6B4E3D;               /* timber — section labels, links on light */
  --teal-dark: #573E30;          /* timber hover */
  --teal-bright: #C9A57E;        /* warm tan — timber accent on dark bg */
  /* --orange* = barn red — the primary action color (CTA, phone) */
  --orange: #8C3A2B;             /* barn red — primary CTA, phone accents */
  --orange-dark: #6E2C20;        /* barn red hover */
  --orange-bright: #D97A54;      /* warm brick — barn-red accent on dark bg */

  --color-link: var(--teal);
  --color-text: #2E2B27;
  --color-text-muted: #6f6a62;
  --color-heading: #2B2A28;
  --color-bg: #ffffff;
  --color-bg-alt: #F3ECDD;       /* warm oat cream */
  --color-border: #e4ddd0;
  --color-error: #b00020;
  --color-focus: var(--orange);
  --color-fg-on-dark: #ffffff;

  /* extra rugged-skin tokens */
  --galvanized: #8A9299;         /* steel gray — hairlines + corrugated accents */
  --oat: #E7DCC7;                /* deeper oat for cards/strips */
  --radius: 0;

  --shadow-sm: 0 1px 3px rgba(43,42,40,0.14);
  --shadow-md: 0 10px 30px rgba(43,42,40,0.18);
  --shadow-lg: 0 18px 50px rgba(43,42,40,0.30);

  --max-w: 1200px;
  --header-h: 80px;

  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-head: "Zilla Slab", "Source Sans 3", Georgia, "Times New Roman", serif;
}

/* ---------- Self-hosted fonts ---------- */
@font-face { font-family:"Source Sans 3"; font-style:normal; font-weight:400 700; font-display:swap; src:url("/fonts/source-sans-3.woff2") format("woff2"); }
@font-face { font-family:"Zilla Slab"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/zilla-slab-600.woff2") format("woff2"); }
@font-face { font-family:"Zilla Slab"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/zilla-slab-700.woff2") format("woff2"); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { overflow-x: clip; }
:target, section[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.04;
  margin: 0 0 0.5em;
  color: var(--color-heading);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.05rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.35rem); color: var(--teal); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
strong { color: inherit; font-weight: 700; }

/* ---------- A11y ---------- */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.skip-link {
  position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;
  background: var(--navy); color: #fff; padding: 0.75rem 1rem; z-index: 1000;
}
.skip-link:focus { left: 0; top: 0; width: auto; height: auto; }
.hp-field {
  position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sr-h2, .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 1.25rem; }
main { display: block; }
section { padding: clamp(2.75rem, 6vw, 4.75rem) 0; }
.section-dark { background: var(--navy); color: var(--color-fg-on-dark); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p { color: rgba(255,255,255,0.82); }
.section-dark a:not(.btn) { color: var(--orange-bright); }
.section-intro { max-width: 78ch; margin: 0 0 2rem; }
.section-cta { display: flex; justify-content: center; margin-top: 2rem; }
.section-label {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--teal); font-size: 1.05rem; margin: 0 0 0.4rem;
}
.section-dark .section-label, .lf-banner .section-label, .projects .section-label { color: var(--teal-bright); }
.lf-banner.b-teal .section-label { color: #e6dcc8; }
.accent { color: var(--orange); }
.section-dark .accent { color: var(--orange-bright); }

/* ---------- Gable roofline top edge (post-frame profile) ----------
   Carves a center roof-peak into the section's top edge; the section
   behind (usually white/oat) shows through the notches. Add extra
   top padding so content clears the peak. */
.gable-top {
  --gable: clamp(1.25rem, 3.2vw, 2.75rem);
  clip-path: polygon(0 var(--gable), 50% 0, 100% var(--gable), 100% 100%, 0 100%);
  padding-top: calc(clamp(2.75rem, 6vw, 4.75rem) + var(--gable));
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font: inherit; font-family: var(--font-head); font-weight: 700; font-size: 1.1rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.7rem 1.6rem; border: 2px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; min-height: 50px; line-height: 1.1;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
}
.btn:active { transform: translateY(1px); }
/* All .btn variants are SOLID by default and go OUTLINE on hover (inverse
   fill). The .btn 2px border is reserved transparent above, so the swap
   never changes the button's size. (.btn-tel, the header call button, is
   the sole exception — see its own rule below.) */
.btn-call, .btn-primary { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn-call:hover, .btn-primary:hover { background: transparent; color: var(--orange); border-color: var(--orange); }
.btn-teal { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn-teal:hover { background: transparent; color: var(--teal); border-color: var(--teal); }
/* white solid — sits on dark backgrounds */
.btn-services, .btn-outline-light { background: #fff; color: var(--navy); border-color: #fff; }
.btn-services:hover, .btn-outline-light:hover { background: transparent; color: #fff; border-color: #fff; }
/* dark solid — sits on light backgrounds */
.btn-outline-dark, .btn-outline-navy { background: var(--color-heading); color: #fff; border-color: var(--color-heading); }
.btn-outline-dark:hover, .btn-outline-navy:hover { background: transparent; color: var(--color-heading); border-color: var(--color-heading); }
/* on dark sections the barn-red outline needs the brighter brick to stay legible */
.hero .btn-call:hover, .section-dark .btn-call:hover, .section-dark .btn-primary:hover,
.section-dark .btn-teal:hover { color: var(--orange-bright); border-color: var(--orange-bright); }
.btn-block { display: flex; width: 100%; }

/* ============================================================
   img-as-background helper (real <img>, positioned to fill)
   ============================================================ */
.bg-host { position: relative; isolation: isolate; }
.bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.bg-host::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(30,28,26,0.82), rgba(30,28,26,0.88));
}
.bg-host.bg-teal::before { background: linear-gradient(rgba(74,54,42,0.86), rgba(60,44,34,0.92)); }
.bg-host.bg-soft::before { background: linear-gradient(rgba(30,28,26,0.55), rgba(30,28,26,0.72)); }
.bg-host > .container { position: relative; z-index: 2; }
/* Fixed (parallax) backgrounds — disabled on small/touch screens where iOS renders them badly.
   The hero's parallax uses its CSS background (attachment: fixed, clips to the section);
   its .bg-img is hidden on desktop so the fixed background shows through.
   For <img>-based backgrounds (.bg-img), .bg-host.bg-fixed pins the img to the viewport
   and clips it to the section (clip-path creates the clipping context). */
.bg-host.bg-fixed { clip-path: inset(0); }
.bg-host.bg-fixed .bg-img { position: fixed; }
@media (max-width: 900px) {
  .bg-fixed { background-attachment: scroll !important; }
  .bg-host.bg-fixed { clip-path: none; }
  .bg-host.bg-fixed .bg-img { position: absolute; }
}

/* ============================================================
   Top bar (navy, scrolls away) + Header (white, sticky)
   ============================================================ */
.top-bar { background: var(--navy); color: #d9d3c7; font-size: 0.9rem; }
.top-bar .container {
  padding-top: 0.5rem; padding-bottom: 0.5rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.35rem 1.5rem;
}
.top-bar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.75rem; }
.top-bar-list li { display: inline-flex; align-items: center; gap: 0.5rem; color: #d9d3c7; }
.top-bar-list a { color: #d9d3c7; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.top-bar-list a:hover { color: #fff; }
.top-bar-list svg { color: var(--orange-bright); flex-shrink: 0; }
.top-bar-social { display: inline-flex; align-items: center; gap: 0.9rem; }
.top-bar-social a { color: #cfc7b8; display: inline-flex; }
.top-bar-social a:hover { color: #fff; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  box-shadow: 0 2px 14px rgba(43,42,40,0.12);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; padding: 0.4rem 0; }
.brand-logo { height: 56px; width: auto; display: block; }
.brand-text { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; font-size: 1.7rem; color: var(--navy); }
.brand-text b { color: var(--orange); font-weight: 700; }
@media (max-width: 600px) { .brand-logo { height: 44px; } .brand-text { font-size: 1.35rem; } }

.site-nav { display: flex; align-items: center; }
.nav-list { display: flex; align-items: center; gap: 0.25rem 2rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-item > a {
  display: inline-flex; align-items: center; gap: 0.3rem; color: var(--navy); text-decoration: none;
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 1.15rem; padding: 1.4rem 0.1rem;
}
.nav-item > a:hover { color: var(--teal); }
.nav-caret { transition: transform .15s ease; flex-shrink: 0; }
.has-dropdown:hover > a .nav-caret, .has-dropdown:focus-within > a .nav-caret { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 250px; background: #fff;
  box-shadow: 0 16px 36px rgba(43,42,40,0.22); list-style: none; margin: 0; padding: 0.5rem 0;
  z-index: 100; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
  border-top: 3px solid var(--orange);
}
.has-dropdown:hover > .dropdown, .has-dropdown:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li { margin: 0; }
.dropdown a { display: block; padding: 0.55rem 1.1rem; font-size: 0.95rem; font-weight: 500; color: var(--color-text); text-decoration: none; white-space: nowrap; }
.dropdown a:hover, .dropdown a:focus-visible { background: var(--color-bg-alt); color: var(--teal); }
.dropdown-2col, .dropdown-3col { display: grid; }
.dropdown-2col { grid-template-columns: 1fr 1fr; min-width: 440px; }
.dropdown-3col { grid-template-columns: 1fr 1fr 1fr; min-width: 560px; }
@media (max-width: 1100px) { .dropdown-3col { grid-template-columns: 1fr 1fr; min-width: 400px; } }

.nav-cta { margin-left: 0.5rem; }
.btn-tel {
  background: var(--navy); color: #fff; border-radius: var(--radius);
  /* 4px bottom border reserved transparent (bottom padding shortened to
     match) so the hover accent adds NO height — only its color changes */
  padding: 0.7rem 1.5rem calc(0.7rem - 4px); border-bottom: 4px solid transparent;
  font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.02em;
  text-transform: none; display: inline-flex;
  align-items: center; gap: 0.5rem; min-height: 50px; text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
  transition: border-color .15s ease;
}
/* Narrow-desktop squeeze (nav can wrap to two rows): tighten the rows */
@media (min-width: 901px) and (max-width: 1140px) {
  .nav-item > a { padding-top: 0.45rem; padding-bottom: 0.45rem; }
}
.btn-tel:hover { border-bottom-color: var(--orange-bright); }

.menu-toggle { display: none; background: transparent; border: 0; padding: 0; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 26px; height: 3px; background: var(--navy); border-radius: var(--radius); transition: transform .25s ease, top .25s ease; }
.menu-toggle span { position: relative; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -8px; } .menu-toggle span::after { top: 8px; }
.menu-toggle.is-open span { background: transparent; }
.menu-toggle.is-open span::before { top: 0; transform: rotate(45deg); }
.menu-toggle.is-open span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .top-bar .container { justify-content: center; }
  .top-bar-list { justify-content: center; font-size: 0.82rem; gap: 0.25rem 1.25rem; }
  .site-header .container { flex-wrap: wrap; align-content: center; row-gap: 0; }
  .site-header .brand { min-height: var(--header-h); }
  .site-nav { display: none; }
  .menu-toggle { display: inline-flex; order: 3; }
  .nav-cta { order: 2; }
  .site-nav.is-open {
    display: block; order: 4; flex: 1 1 100%; margin: 0 -1.25rem 0;
    padding: 0.25rem 1.25rem 1rem; background: var(--navy);
  }
  .site-nav.is-open .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav.is-open .nav-item { width: 100%; position: static; }
  .site-nav.is-open .nav-item + .nav-item { border-top: 1px solid rgba(255,255,255,0.15); }
  .site-nav.is-open .nav-item > a { justify-content: space-between; padding: 0.85rem 0; font-size: 1.15rem; color: #fff; }
  .site-nav.is-open .nav-item > a:hover { color: var(--orange-bright); }
  .site-nav.is-open .dropdown { display: none; position: static; opacity: 1; visibility: visible; transform: none; background: transparent; box-shadow: none; border-top: 0; min-width: 0; padding: 0 0 0.5rem 1rem; }
  .site-nav.is-open .has-dropdown.expanded > .dropdown { display: block; }
  .site-nav.is-open .has-dropdown.expanded > a .nav-caret { transform: rotate(180deg); }
  .site-nav.is-open .dropdown a { color: rgba(255,255,255,0.85); padding: 0.4rem 0; white-space: normal; }
  .site-nav.is-open .dropdown a:hover { background: transparent; color: #fff; }
}

/* Smallest screens: logo + hamburger on top, phone button centered below */
@media (max-width: 480px) {
  .menu-toggle { order: 1; }
  .nav-cta { order: 2; flex: 0 0 100%; max-width: max-content; margin: 0 auto 0.75rem; }
}

/* ============================================================
   Hero (full-bleed photo + checklist left, quote card right)
   ============================================================ */
/* ---------- HERO: 50/50 split (Gable layout) ----------
   Solid charcoal type panel left | full-bleed photo right.
   No overlay, no floating form card — the lead form lives in the
   .quote-bar band directly beneath the hero. */
.hero { position: relative; color: #fff; background: var(--navy); padding: 0; }
/* Upward gable triangle rising from the hero's base — full width, apex at
   center. Same charcoal as the type panel, so its left half blends in and
   you only SEE it against the photo half. Sits behind the corrugated edge. */
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: clamp(2.5rem, 6vw, 5rem);
  background: var(--navy);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  pointer-events: none;
}
/* Signature corrugated-metal edge — galvanized ribbing along the hero base + a barn-red line. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; z-index: 3;
  background:
    linear-gradient(var(--orange), var(--orange)) bottom / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, #767d84 0 7px, #9aa2a8 7px 9px, #656c73 9px 14px);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.28);
}
/* reusable corrugated divider for other bands (e.g. banner) */
.metal-edge { position: relative; }
.metal-edge::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 11px; z-index: 3;
  background: repeating-linear-gradient(90deg, #767d84 0 7px, #9aa2a8 7px 9px, #656c73 9px 14px);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.28);
}
.hero-split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .hero-split { grid-template-columns: 1.05fr 0.95fr; min-height: min(72vh, 680px); } }
.hero-panel {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 6vw, 4.25rem) clamp(1.25rem, 4vw, 3.5rem) clamp(3.25rem, 6vw, 4.5rem);
}
.hero-media { position: relative; min-height: 300px; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-kicker {
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 1.05rem; color: var(--teal-bright); margin: 0 0 0.75rem;
}
.hero-title { color: #fff; margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem); font-size: clamp(1.9rem, 3vw, 2.65rem); line-height: 1.06; }
.hero-checklist { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.55rem 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .hero-checklist { grid-template-columns: 1fr 1fr; } }
.hero-checklist li { position: relative; padding-left: 30px; font-weight: 500; line-height: 1.4; }
.hero-checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.05em; width: 20px; height: 20px;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%23B24A36'/><path d='M17 8.5L10.5 15.5 7 12' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.hero-intro { color: rgba(255,255,255,0.9); margin-bottom: 1.75rem; }
.hero-title + .hero-intro { margin-bottom: 1em; }  /* tighter gap after the first hero paragraph */
.hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; }

/* ---------- Estimate / quote form card (kept for contact page + card-variant assemblies) ---------- */
.estimate-card { background: var(--navy-card); color: #fff; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.estimate-card .quote-mark { color: var(--orange); margin-bottom: 0.25rem; }
.estimate-title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: clamp(1.7rem, 3vw, 2.2rem); color: #fff; margin: 0 0 1.25rem; letter-spacing: 0.01em; }
.estimate-head { display: flex; align-items: center; gap: 0.65rem; margin: 0 0 1.25rem; }
.estimate-head .quote-mark { margin: 0; display: inline-flex; }
.estimate-head .estimate-title { margin: 0; }
.estimate-form { display: grid; gap: 0.7rem; grid-template-columns: 1fr 1fr; }
.estimate-form > .full, .estimate-form textarea, .estimate-form select, .estimate-form button, .estimate-form .cf-turnstile { grid-column: 1 / -1; }
.estimate-form input, .estimate-form select, .estimate-form textarea {
  font: inherit; width: 100%; min-height: 48px; padding: 0.7rem 0.9rem;
  border: 0; border-radius: var(--radius); background: var(--oat); color: var(--color-text);
}
.estimate-form select { color: #6b7280; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'><path d='M7 10l5 5 5-5z'/></svg>"); background-repeat: no-repeat; background-position: right 0.7rem center; padding-right: 2.2rem; }
.estimate-form textarea { min-height: 96px; resize: vertical; }
.estimate-form input:focus, .estimate-form select:focus, .estimate-form textarea:focus { outline: 3px solid var(--orange); outline-offset: 1px; }
.estimate-form button[type="submit"] {
  background: var(--orange); color: #fff; font: inherit; font-family: var(--font-head);
  font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.06em; padding: calc(0.85rem - 2px); border: 2px solid var(--orange);
  border-radius: var(--radius); cursor: pointer; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.estimate-form button[type="submit"]:hover { background: transparent; color: var(--orange-bright); border-color: var(--orange-bright); }

/* ---------- QUOTE-BAR: the lead form as a horizontal band under the hero ----------
   (Overrides live AFTER the base .estimate-form rules — same specificity, later wins.) */
.quote-bar { position: relative; background: var(--navy-card); color: #fff; padding: clamp(1.75rem, 3.5vw, 2.75rem) 0 calc(clamp(1.75rem, 3.5vw, 2.75rem) + 12px); }
/* same corrugated-metal edge as the hero base (galvanized ribbing + barn-red line) */
.quote-bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; z-index: 3;
  background:
    linear-gradient(var(--orange), var(--orange)) bottom / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, #767d84 0 7px, #9aa2a8 7px 9px, #656c73 9px 14px);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.28);
}
.quote-bar .estimate-head { margin-bottom: 1rem; }
.estimate-form--bar { grid-template-columns: repeat(4, 1fr); align-items: start; }
.estimate-form--bar > .full { grid-column: auto; }        /* name/address become normal row cells */
.estimate-form--bar textarea { grid-column: 1 / -1; min-height: 72px; }
.estimate-form--bar .cf-turnstile { grid-column: 1 / 3; }
.estimate-form--bar button[type="submit"] { grid-column: 3 / -1; align-self: stretch; }
@media (max-width: 880px) {
  .estimate-form--bar { grid-template-columns: 1fr 1fr; }
  .estimate-form--bar > .full, .estimate-form--bar .cf-turnstile, .estimate-form--bar button[type="submit"] { grid-column: 1 / -1; }
}

/* ============================================================
   Feature bands (navy + teal): icon + heading + text triplets
   ============================================================ */
.feature-band { background: var(--navy); color: #fff; padding: clamp(2.25rem, 4vw, 3rem) 0; }
.feature-band.band-teal { background: var(--teal); }
.feature-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-item { display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; align-items: start; }
.feature-item .feature-ico { grid-row: span 2; color: #fff; }
.feature-band.band-navy .feature-item .feature-ico { color: var(--teal-bright); }
.feature-item h3 { color: #fff; margin: 0 0 0.35rem; font-size: 1.4rem; }
.feature-item p { color: rgba(255,255,255,0.82); margin: 0; font-size: 0.95rem; line-height: 1.55; }

/* ============================================================
   Split content (About / Story): media + text + check badges
   ============================================================ */
.split { background: var(--color-bg); }
.split-alt { background: var(--color-bg-alt); }
.split-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; }
@media (min-width: 900px) { .split-grid { grid-template-columns: 1fr 1fr; } }
.split-grid.media-right .split-media { order: -1; }
@media (min-width: 900px) { .split-grid.media-right .split-media { order: 2; } }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.split h2 { color: var(--color-heading); }
.badge-grid { list-style: none; margin: 1.5rem 0 1.75rem; padding: 0; display: grid; gap: 0.55rem 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 520px) { .badge-grid { grid-template-columns: 1fr 1fr; } }
.badge-grid li { position: relative; padding-left: 28px; font-weight: 600; color: var(--navy); line-height: 1.4; }
.badge-grid li::before {
  content: ""; position: absolute; left: 0; top: 0.1em; width: 18px; height: 18px;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%238C3A2B'/><path d='M17 8.5L10.5 15.5 7 12' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.split-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

/* ============================================================
   How it works strip (teal)
   ============================================================ */
.howitworks { background: var(--teal); color: #fff; padding: clamp(1.75rem, 3.5vw, 2.5rem) 0; }
.hiw-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem 2rem; align-items: center; text-align: center; }
@media (min-width: 760px) { .hiw-grid { grid-template-columns: auto repeat(3, 1fr); text-align: left; } }
.hiw-title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: 1.7rem; color: #fff; margin: 0; }
.hiw-step { display: inline-flex; align-items: center; gap: 0.6rem; justify-content: center; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.25rem; color: #fff; }
@media (min-width: 760px) { .hiw-step { justify-content: flex-start; } }
.hiw-step svg { color: #fff; flex-shrink: 0; }
.hiw-step a { color: #fff; text-decoration: none; }
.hiw-step a:hover { text-decoration: underline; }

/* ============================================================
   Services grid (shared vocab: header + image + description)
   Dark section.
   ============================================================ */
.services-head { text-align: center; max-width: 64ch; margin: 0 auto 2.25rem; }
.services-head .section-label, .services-head h2 { text-align: center; }
.services-head .section-label { color: var(--orange-bright); }
.section-dark .services-head h2 { color: #fff; margin-bottom: 0.5rem; }
/* Mosaic rows: the FIRST TWO cards form a row of 2 (wider, taller images);
   every card after flows into rows of 3. Works for any card count. */
.services-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 0.5rem; }
@media (min-width: 600px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 940px) {
  .services-grid { grid-template-columns: repeat(6, 1fr); }
  .service-card { grid-column: span 2; }
  .service-card:nth-child(-n+2) { grid-column: span 3; }
}
.service-card {
  display: flex; flex-direction: column; background: var(--navy-2);
  border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius); overflow: hidden;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
.service-card:hover { transform: translateY(-3px); border-color: var(--teal-bright); box-shadow: 0 12px 28px rgba(0,0,0,0.35); }
.service-card-header {
  background: var(--teal); color: #fff; padding: 0.75rem 1.25rem; margin: 0; text-align: left;
  font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.01em;
  text-transform: uppercase; line-height: 1.15;
  box-shadow: inset 0 -3px 0 var(--orange);
}
.service-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; gap: 0.9rem; }
.service-card-body img {
  width: calc(100% + 2.5rem); max-width: none; margin: -1.25rem -1.25rem 0;
  aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0;
}
.service-card-body p { color: rgba(255,255,255,0.80); margin: 0; font-size: 0.95rem; }

/* ============================================================
   Long-form banner sections (installation / repair / demolition / decorative)
   ============================================================ */
.lf-banner { color: #fff; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.lf-banner.b-navy { background: var(--navy); }
.lf-banner.b-teal { background: var(--teal); }
.lf-banner-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .lf-banner-grid { grid-template-columns: 1.05fr 0.95fr; } }
.lf-banner-grid.media-right .lf-media { order: -1; }
@media (min-width: 900px) { .lf-banner-grid.media-right .lf-media { order: 2; } }
.lf-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lf-banner h2 { color: #fff; }
.lf-banner p { color: rgba(255,255,255,0.85); }
.lf-sub-h { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; font-size: 1.2rem; margin: 1.5rem 0 0.75rem; }
.lf-body { background: var(--color-bg); }
.lf-body.body-alt { background: var(--color-bg-alt); }
.lf-body h2 { color: var(--color-heading); }
.lf-body h3 { color: var(--teal); margin-top: 1.75rem; }
.lf-prose { max-width: 82ch; }
.lf-prose.center { margin: 0 auto; }

/* ============================================================
   Check / feature lists
   ============================================================ */
.feature-list { list-style: none; margin: 0.75rem 0 0; padding: 0; font-size: 0.97rem; }
.feature-list li { position: relative; padding-left: 28px; margin-bottom: 0.65rem; line-height: 1.5; }
.feature-list li strong { color: var(--color-heading); }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 16px; height: 16px;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='%23C9A57E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.lf-banner .feature-list li, .section-dark .feature-list li { color: rgba(255,255,255,0.9); }
.lf-banner .feature-list li strong, .section-dark .feature-list li strong { color: #fff; }
.lf-banner .feature-list li::before, .section-dark .feature-list li::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.feature-list-2col, .feature-list-3col { display: grid; gap: 0 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .feature-list-2col, .feature-list-3col { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .feature-list-3col { grid-template-columns: 1fr 1fr 1fr; } }
.inline-cta { margin-top: 1.5rem; display: inline-flex; }

/* ============================================================
   FAQ (navy panel with accordion)
   ============================================================ */
/* FAQ: LIGHT two-column — intro column (sticky on desktop) left,
   accordion of white cards right, on the oat section bg. */
.faq { background: var(--color-bg-alt); }
.faq-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 880px) {
  .faq-grid { grid-template-columns: 0.85fr 1.4fr; }
  .faq-intro { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.faq-intro h2 { margin-bottom: 0.75rem; }
.faq-intro p { color: var(--color-text); max-width: 45ch; }
.faq-intro .btn { margin-top: 0.75rem; }
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item { background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--teal); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.faq-item > summary { list-style: none; cursor: pointer; padding: 1rem 1.15rem; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; color: var(--color-heading); font-size: 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; font-size: 1.7rem; color: var(--orange); flex-shrink: 0; line-height: 1; }
.faq-item[open] > summary::after { content: "\2212"; }
.faq-item > .faq-body { padding: 0 1.15rem 1.1rem; color: var(--color-text); }
.faq-item > .faq-body ul { margin: 0.5rem 0; padding-left: 1.1rem; }
.faq-item > .faq-body a { color: var(--teal); }

/* ============================================================
   Final CTA (photo bg + centered quote card)
   ============================================================ */
.final-cta { color: #fff; padding: clamp(3rem, 6vw, 5rem) 0; }
.final-cta .estimate-card { max-width: 560px; margin: 0 auto; }

/* ============================================================
   Footer (navy + wood strip)
   ============================================================ */
.site-footer { background: var(--navy); color: #b0a99c; padding: 3.25rem 0 1.5rem; border-top: 4px solid var(--orange); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.05fr 1.2fr 1.6fr 1.2fr; } }
.footer-brand-logo { display: inline-block; text-decoration: none; }
.footer-brand-logo img { width: 100%; height: auto; display: block; }
/* text wordmark fallback in the footer (dark bg): knockout white + brick accent */
.footer-brand-logo .brand-text { color: #fff; font-size: 1.9rem; }
.footer-brand-logo .brand-text b { color: var(--orange-bright); }
/* --boxed: for dark/color logos that need a white plate (no knockout version available) */
.footer-brand-logo--boxed { background: #fff; padding: 0.75rem; border-radius: var(--radius); display: inline-block; line-height: 0; }
.footer-brand-logo--boxed img { width: 130px; height: auto; }
.footer-col h4 { color: #fff; margin: 0 0 1rem; padding-bottom: 0.5rem; position: relative; font-size: 1.3rem; }
.footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 3px; background: var(--orange); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-links a { color: #cfc7b9; text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem; }
.footer-links a:hover { color: #fff; }
.footer-links svg { color: var(--orange-bright); flex-shrink: 0; }
.footer-col ul.footer-col-links { margin-top: 2.25rem; }
.footer-list-plain { list-style: none; padding: 0; margin: 0; }
.footer-list-plain li { color: #b0a99c; margin-bottom: 0.4rem; font-size: 0.88rem; line-height: 1.35; }
.footer-areas-list { columns: 2; column-gap: 1.5rem; }
.footer-areas-list li { break-inside: avoid; }
.footer-contact-list li { display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.5; }
.footer-contact-list a, .footer-contact-list span { color: #cfc7b9; text-decoration: none; display: inline-flex; align-items: flex-start; gap: 0.6rem; }
.footer-contact-list a:hover { color: #fff; }
.footer-contact-list svg { color: var(--orange-bright); flex-shrink: 0; margin-top: 0.18em; }
.footer-phone { font-family: var(--font-head); font-weight: 700; font-size: 1.7rem; color: var(--orange-bright); text-decoration: none; }
.footer-phone:hover { color: #fff; }
.legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.85rem; color: #a8a191; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; }
.legal a { color: #b0a99c; text-decoration: none; margin-right: 1rem; }
.legal a:hover { color: #fff; }

/* ============================================================
   Contact / utility forms (contact.html etc.)
   ============================================================ */
.page-narrow { max-width: 820px; margin: 0 auto; }
.page-hero { background: var(--navy); color: #fff; padding: clamp(2.5rem, 5vw, 3.75rem) 0; border-bottom: 4px solid var(--orange); }
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,0.85); margin: 0; }
.breadcrumb { font-size: 0.9rem; color: rgba(255,255,255,0.7); margin-bottom: 0.5rem; }
.breadcrumb a { color: rgba(255,255,255,0.85); text-decoration: none; }
.breadcrumb a:hover { color: #fff; }
.form-card { background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius); }
.form-grid { display: grid; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-weight: 700; font-size: 0.95rem; color: var(--navy); }
.field .req { color: var(--color-error); margin-left: 0.15rem; }
.field input, .field select, .field textarea {
  font: inherit; padding: 0.75rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius);
  background: #fff; color: var(--color-text); min-height: 48px; width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-focus); box-shadow: 0 0 0 3px rgba(46,112,119,0.18); outline: none; }
.field .help { font-size: 0.85rem; color: var(--color-text-muted); }
.field .error { font-size: 0.9rem; color: var(--color-error); display: none; }
.field input[aria-invalid="true"] ~ .error, .field textarea[aria-invalid="true"] ~ .error { display: block; }
.form-footnote { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.5rem; }
.contact-info { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.contact-info li { display: flex; align-items: flex-start; gap: 0.7rem; line-height: 1.4; }
.contact-info svg { color: var(--teal); flex-shrink: 0; margin-top: 0.12em; }
.contact-info a { color: var(--color-text); text-decoration: none; }
.contact-info a:hover { color: var(--teal); }
.nap address { font-style: normal; line-height: 1.7; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.5rem; color: var(--teal); }

/* ---------- Utility page simple nav ---------- */
.site-nav.simple { gap: 2rem; }
.site-nav.simple a { color: var(--navy); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; font-size: 1.15rem; }
.site-nav.simple a:hover { color: var(--teal); }
@media (max-width: 900px) { .site-nav.simple { display: none; } }

/* ============================================================
   SHARED BLOCK VOCABULARY (Gable / rugged-warm skin)
   The global blocks the assembler fills. Extras (feature-band,
   lf-banner) keep their own sections above.
   ============================================================ */

/* ---------- Flex-media (workhorse: overlapping offset card) ----------
   Desktop: the image bleeds wide on its side and the TEXT sits in an
   offset card that overlaps it by one grid column. Default = card left /
   image right; --reverse mirrors. Mobile stacks normally. */
.flex-media { background: var(--color-bg); }
.flex-media--reverse, .flex-media--long-reverse { background: var(--color-bg-alt); }
.flex-media h2, .flex-media--long h2, .flex-media--long-reverse h2 { color: var(--color-heading); }
/* barn-red rule spans the FULL block width — above both the text card and
   the image; ONE box-shadow wraps the whole card+image unit (not per column) */
.flex-media-grid { display: grid; gap: clamp(1.5rem, 3vw, 2rem); grid-template-columns: 1fr; align-items: center; border-top: 4px solid var(--orange); box-shadow: var(--shadow-md); }
.flex-media-text {
  background: var(--oat);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.flex-media--reverse .flex-media-text { background: #fff; }  /* card flips to white on the oat section bg */
.flex-media-text > :first-child { margin-top: 0; }
.flex-media-figure { margin: 0; }   /* no per-column shadow — the unit shadow lives on .flex-media-grid */
.flex-media-figure img { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 880px) {
  .flex-media-grid { grid-template-columns: repeat(12, 1fr); align-items: stretch; }
  .flex-media-text { grid-column: 1 / 7; grid-row: 1; position: relative; z-index: 2; }
  /* the TEXT card drives the row height; the image absolute-fills its
     figure and crops (object-fit) to always match the text's height */
  .flex-media-figure { grid-column: 6 / -1; grid-row: 1; position: relative; min-height: 300px; }
  .flex-media-figure img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; aspect-ratio: auto;
  }
  /* --reverse mirrors the overlap */
  .flex-media--reverse .flex-media-text { grid-column: 7 / -1; }
  .flex-media--reverse .flex-media-figure { grid-column: 1 / 8; }
}
.flex-media-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; align-items: center; }

/* --long / --long-reverse: two columns of long copy, image cornered.
   --long = image at TOP of the first column; --long-reverse = image at
   the BOTTOM of the first column (columns are equal height). Images get
   an offset timber keyline frame. */
.flex-media-long-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch; margin-top: 1.5rem; }
@media (min-width: 768px) { .flex-media-long-grid { grid-template-columns: 1fr 1fr; } }
.flex-media-long-col { display: flex; flex-direction: column; }
.flex-media-long-col > :first-child { margin-top: 0; }
.flex-media-long-col h3 { margin-top: 1.5rem; }
.flex-media-long-figure { margin: 0; position: relative; }
/* offset keyline frame — peeks BOTTOM-RIGHT on --long */
.flex-media-long-figure::after {
  content: ""; position: absolute; inset: 14px -14px -14px 14px;
  border: 3px solid var(--teal); border-radius: var(--radius); z-index: 0; pointer-events: none;
}
/* --long-reverse: same 14px offset, hangs off the BOTTOM-LEFT */
.flex-media--long-reverse .flex-media-long-figure::after { inset: 14px 14px -14px -14px; }
/* the bottom-cornered figure carries 1.25rem padding-top (its gap from the
   text above) — offset the frame from the IMAGE, not the padded figure box */
.flex-media--long-reverse .flex-media-long-figure:last-child::after { top: calc(1.25rem + 14px); }
.flex-media-long-figure img { position: relative; z-index: 1; width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-md); }
.flex-media-long-col > .flex-media-long-figure:first-child { margin-bottom: 1.75rem; }
.flex-media-long-col > .flex-media-long-figure:last-child { margin-top: auto; padding-top: 1.25rem; }
@media (max-width: 767px) {
  .flex-media-long-figure::after { inset: 10px -8px -8px 10px; }
  .flex-media--long-reverse .flex-media-long-figure::after { inset: 10px 10px -8px -8px; }
  .flex-media--long-reverse .flex-media-long-figure:last-child::after { top: calc(1.25rem + 10px); }
}

/* --overlay / --overlay-right: FULL-BLEED bg photo; the text lives on a
   TRANSLUCENT dark panel covering one half (photo fully visible on the
   other). Copy length is content-driven — works as a short OR long block.
   Section also carries .bg-host + .section-dark (white text).
   Default = panel LEFT; add --overlay-right for panel RIGHT. */
.flex-media--overlay { padding: 0; }
.flex-media--overlay.bg-host::before { background: linear-gradient(rgba(30,28,26,0.30), rgba(30,28,26,0.30)); } /* light scrim only */
.flex-media--overlay .overlay-half {
  --panel-pad: clamp(1.25rem, 4vw, 3rem);
  position: relative; z-index: 2;
  background: rgba(30,28,26,0.78); border-top: 4px solid var(--orange);  /* translucent — photo reads through */
  padding: clamp(2.75rem, 6vw, 4.5rem) var(--panel-pad);
}
.flex-media--overlay h2 { color: #fff; }
@media (min-width: 880px) {
  .flex-media--overlay .overlay-half {
    width: 50%; min-height: 480px; border-top: none; border-right: 4px solid var(--orange);
    display: flex; flex-direction: column; justify-content: center;
  }
  /* align the panel's text with the global container's edge. The panel is
     exactly HALF the layout width, so 100% − max-w/2 is the gutter+padding
     distance — %-based, immune to the 100vw scrollbar error. */
  .flex-media--overlay .overlay-half-inner {
    max-width: 34rem;
    margin-left: max(0px, calc(100% + var(--panel-pad) + 4px - var(--max-w) / 2 + 1.25rem));
  }
  /* --overlay-right: mirror — panel covers the RIGHT half */
  .flex-media--overlay-right .overlay-half {
    margin-left: 50%; border-right: none; border-left: 4px solid var(--orange);
  }
  .flex-media--overlay-right .overlay-half-inner {
    margin-left: auto; margin-right: max(0px, calc(100% + var(--panel-pad) + 4px - var(--max-w) / 2 + 1.25rem));
  }
}

/* --long-center: FULL-BLEED bg photo; the overlay is a CENTERED content
   panel holding the heading + the 2-col long grid.
   Section also carries .bg-host + .section-dark (white text). */
.flex-media--long-center { padding: 0; }  /* panel runs flush to the section's top + bottom */
.flex-media--long-center.bg-host::before { background: linear-gradient(rgba(30,28,26,0.35), rgba(30,28,26,0.35)); } /* light scrim only */
.flex-media--long-center h2 { color: #fff; }
.flex-media--long-center .overlay-center {
  background: rgba(30,28,26,0.78); border-right: 4px solid var(--orange);  /* translucent — photo reads through */
  padding: clamp(1.75rem, 4vw, 3rem);
}

/* ---------- snow-list (check-bullet feature list) ---------- */
.snow-list { list-style: none; margin: 1.25rem 0 0; padding: 0; font-size: 0.97rem; }
.snow-list li { position: relative; padding-left: 30px; margin-bottom: 0.7rem; line-height: 1.5; color: var(--color-text); }
.snow-list li strong { color: var(--color-heading); }
.snow-list li::before {
  content: ""; position: absolute; left: 0; top: 0.15em; width: 20px; height: 20px;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%236B4E3D'/><path d='M17 8.5L10.5 15.5 7 12' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.flex-media .snow-list { display: grid; grid-template-columns: 1fr; gap: 0.4rem 1.5rem; }
@media (min-width: 560px) { .flex-media .snow-list { grid-template-columns: 1fr 1fr; } }
.snow-list--single { grid-template-columns: 1fr !important; }
.section-dark .snow-list li, .spotlight .snow-list li { color: rgba(255,255,255,0.9); }
.section-dark .snow-list li strong, .spotlight .snow-list li strong { color: #fff; }

/* ---------- subhead (h3 lead-in inside text blocks) ---------- */
.subhead { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--teal); font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
.section-dark .subhead, .feature-aside .subhead { color: var(--teal-bright); }

/* ---------- Feature-aside (dark text column + nav aside boxes) ---------- */
.feature-aside-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .feature-aside-grid { grid-template-columns: 1.5fr 1fr; } }
.feature-aside-side { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.feature-aside-box { background: rgba(46, 112, 119, 0.22); border: 1px solid var(--teal-bright); padding: 1.75rem; border-radius: var(--radius); text-align: center; }
.feature-aside-box-title { color: #fff; margin: 0 0 1rem; font-family: var(--font-head); font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.feature-aside-box .btn { width: 100%; background: var(--orange); color: #fff; border-color: var(--orange); }
.feature-aside-box .btn:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; }

/* ---------- Spotlight (service areas + city narrative) ---------- */
.spotlight { color: #fff; background: var(--navy-card); }  /* match the quote-form band */
.spotlight .container { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 880px) {
  .spotlight .container { grid-template-columns: 1fr 1.3fr; }
  /* --reverse: narrative in the WIDE left column, areas chips narrow right */
  .spotlight--reverse .container { grid-template-columns: 1.3fr 1fr; }
}
.spotlight h2 { color: #fff; }
.spotlight p { color: rgba(255,255,255,0.85); }
.spotlight-side-title { font-family: var(--font-head); font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 700; text-transform: uppercase; line-height: 1.05; color: #fff; margin: 0 0 1rem; }
/* areas render as stamped TAG CHIPS (not a bulleted list) */
.spotlight-areas { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0; font-size: 0.95rem; }
.spotlight-areas li {
  padding: 0.4rem 0.9rem; margin: 0; line-height: 1.4;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.30);
  border-left: 3px solid var(--orange-bright); border-radius: var(--radius);
  color: #fff; font-weight: 600;
}
.spotlight-areas li::before { display: none; }
.spotlight--light .spotlight-areas li {
  background: var(--oat); border-color: var(--color-border);
  border-left-color: var(--orange); color: var(--color-heading);
}
.spotlight--light { color: var(--color-text); background: var(--color-bg); }
.spotlight--light h2 { color: var(--color-heading); }
.spotlight--light .spotlight-side-title { color: var(--teal); }
.spotlight--light p, .spotlight--light .snow-list li { color: var(--color-text); }
.spotlight--light .snow-list li strong { color: var(--color-heading); }

/* ---------- Steps (vertical timeline on a galvanized post line) ----------
   Markup per step: <li><span class="step-num">N</span> <div class="process-step-body">
   h3 + p</div></li>. Text-only steps; handles any step count. */
.steps h2 { color: #fff; }
.process-intro { max-width: 70ch; margin: 0 auto 2.5rem; text-align: center; color: rgba(255,255,255,0.85); }
.process-grid {
  position: relative; display: flex; flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem); max-width: 680px; margin: 0 auto; padding: 0; list-style: none;
}
/* the "post": a ribbed galvanized line running down the number column */
.process-grid::before {
  content: ""; position: absolute; left: 26px; top: 10px; bottom: 10px; width: 4px;
  background: repeating-linear-gradient(180deg, #767d84 0 10px, #9aa2a8 10px 14px);
  border-radius: var(--radius);
}
.section-dark.steps { background: var(--navy-card); }  /* match the quote-form band */
.process-step { display: grid; grid-template-columns: 56px 1fr; gap: 1.1rem 1.4rem; align-items: start; position: relative; }
.process-step .step-num {
  grid-column: 1; grid-row: 1 / span 2; position: relative; z-index: 1;
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  background: var(--orange); color: #fff; font-family: var(--font-head); font-size: 1.7rem;
  font-weight: 700; line-height: 1; border-radius: var(--radius);
  box-shadow: 0 0 0 6px var(--navy-card);
}
.process-step-body { grid-column: 2; }
.process-step-body > :first-child { margin-top: 0; }
.process-step h3 { color: #fff; margin-bottom: 0.4rem; }
.process-step p { color: rgba(255,255,255,0.80); font-size: 0.95rem; margin: 0; }
@media (max-width: 640px) {
  .process-step { grid-template-columns: 48px 1fr; }
  .process-grid::before { left: 22px; }
  .process-step .step-num { width: 48px; height: 48px; font-size: 1.4rem; grid-row: 1; }
}
.mini-cta { margin-top: 3rem; text-align: center; padding: 1.75rem; background: rgba(255,255,255,0.04); border-radius: var(--radius); }
.mini-cta p { color: #E8956A; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; margin: 0 0 0.35rem; font-size: 1.15rem; }
.mini-cta p + p { color: rgba(255,255,255,0.80); font-weight: 400; text-transform: none; margin-bottom: 1rem; font-family: var(--font-body); }
.mini-cta .btn { margin-top: 0.5rem; }

/* ---------- Banner (centered emphasis over image) ---------- */
.banner { color: #fff; display: flex; align-items: center; min-height: 420px; padding: clamp(3.5rem, 7vw, 6rem) 0; text-align: center; }
.banner-inner { max-width: 760px; margin: 0 auto; }
.banner h2 { color: #fff; }
.banner p { color: rgba(255,255,255,0.9); }
.banner-kicker { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 1.05rem; color: var(--teal-bright); margin: 0 0 0.5rem; }
.banner-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; justify-content: center; margin-top: 1.75rem; }

/* ---------- Testimonials carousel (JS in /testimonials.js) ---------- */
.testimonials { background: var(--color-bg-alt); }
.testi-carousel { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1rem); margin-top: 2rem; }
.testi-viewport { overflow: hidden; flex: 1 1 auto; min-width: 0; }
.testi-track { display: flex; margin: 0; padding: 0; list-style: none; will-change: transform; }
.testi-slide { flex: 0 0 100%; width: 100%; padding: 0.5rem clamp(0.25rem, 2vw, 1.5rem); }
.testi-quote { margin: 0 auto; max-width: 760px; background: #fff; border: 1px solid var(--color-border); border-top: 4px solid var(--teal); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.75rem); text-align: center; box-shadow: var(--shadow-md); }
.testi-quote > p { font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.6; font-style: italic; color: var(--color-text); margin: 0 0 1.5rem; }
.testi-quote > p::before { content: "\201C"; }
.testi-quote > p::after  { content: "\201D"; }
.testi-cite { display: flex; flex-direction: column; gap: 0.1rem; }
.testi-name { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-heading); font-size: 1.2rem; }
.testi-meta { font-size: 0.9rem; color: var(--color-text-muted); }
.testi-arrow { flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; border: 0; border-radius: 50%; cursor: pointer; transition: background-color .15s ease, transform .08s ease; }
.testi-arrow:hover { background: var(--orange); }
.testi-arrow:active { transform: scale(0.94); }
.testi-arrow svg { width: 24px; height: 24px; }
.testi-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
.testi-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border); transition: background-color .15s ease; }
.testi-dot.is-active { background: var(--teal); }
@media (prefers-reduced-motion: reduce) { .testi-track { transition: none !important; } }

/* ---------- Recent-projects carousel (scroll-snap gallery) ---------- */
.projects { background: var(--navy); color: var(--color-fg-on-dark); }
.projects h2 { color: #fff; }
.projects-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.projects-carousel { position: relative; }
.projects-track {
  display: flex; gap: 1.25rem; margin: 0; padding: 0 0 0.5rem; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.projects-track::-webkit-scrollbar { display: none; }
.projects-track:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.project-card {
  flex: 0 0 auto; width: min(85%, 380px); scroll-snap-align: start;
  background: var(--navy-2); border-top: 4px solid var(--orange);
  box-shadow: var(--shadow-md); overflow: hidden;
}
@media (min-width: 700px) { .project-card { width: calc((100% - 2.5rem) / 3); } }
@media (min-width: 1040px) { .project-card { width: calc((100% - 3.75rem) / 4); } }
.project-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.project-cap { padding: 0.9rem 1.1rem 1.1rem; }
.project-tag {
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem;
  color: #fff; background: var(--orange); padding: 0.15rem 0.55rem; margin-bottom: 0.5rem;
}
.project-cap p { margin: 0; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; color: #fff; font-size: 1.05rem; line-height: 1.15; }
.proj-arrows { display: flex; justify-content: center; gap: 0.6rem; margin-top: 1.5rem; }
.proj-btn {
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy-2); color: #fff; border: 2px solid rgba(255,255,255,0.25); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease, transform .08s ease;
}
.proj-btn:hover { background: var(--orange); border-color: var(--orange); }
.proj-btn:active { transform: scale(0.94); }
.proj-btn:disabled { opacity: 0.35; cursor: default; }
.proj-btn svg { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) { .projects-track { scroll-behavior: auto; } }

/* ---------- CTA (closing call to action) ---------- */
.cta-split { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 880px) { .cta-split { grid-template-columns: 1fr 1fr; } }
.cta-split .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.cta > .container > .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* ---------- Print ---------- */
@media print {
  .top-bar, .site-header, .site-footer, .nav-cta, .howitworks, .feature-band { display: none; }
  body { font-size: 12pt; color: #000; background: #fff; }
}