/* ==========================================================================
   Woodstock Spray Foam Insulation - Main Stylesheet
   Hand-written, NOT generated. Rerun build.py after editing so every page
   picks up the new cache fingerprint.
   Sections 01-21 are the portfolio template; section 22 carries the
   Woodstock layout carried over from the old site (green intro band,
   offer + quote card, alternating advantage rows, orange call band,
   cost icons, mission band).
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand colours - taken from the old woodstocksprayfoaminsulation.com
     design: the green header band (#508D69 on the old site, darkened here to
     #3F7556 so white nav text passes 4.5:1) and the orange "CALL US!" buttons
     (#F3B664 with dark text). Every text/background pair was checked
     numerically - see HANDOVER.md. */
  --color-brand:          #3F7556;   /* Header, intro band. 5.40:1 with white */
  --color-primary:        #2E5A40;   /* Deep green - CTA bands, hero fallback. 7.92:1 with white */
  --color-primary-dark:   #1F3F2C;   /* Footer, topbar. 11.63:1 with white */
  --color-primary-light:  #2F6B47;   /* Links on white, 6.33:1 */
  --color-accent:         #F3B664;   /* Old-site orange - buttons, with dark text 7.15:1 */
  --color-accent-hover:   #E9A043;   /* Orange hover, dark text 5.86:1 */
  --color-accent-dark:    #8A5A14;   /* Eyebrows and link hover on white, 5.91:1 */
  --color-accent-soft:    #fdf3e3;   /* Orange tint background */
  --color-accent-light:   #F3B664;   /* Orange eyebrows on dark green, 6.47:1 on #1F3F2C */
  --color-on-accent:      #3B2F2F;   /* Text on orange */

  /* Neutrals */
  --color-text:           #1E2B24;   /* 14.72:1 on white */
  --color-text-muted:     #4E5D55;   /* 6.95:1 on white, 6.38:1 on alt */
  --color-heading:        #1E2B24;
  --color-heading-green:  #2E5A40;
  --color-white:          #ffffff;
  --color-bg:             #ffffff;
  --color-bg-alt:         #F3F6F2;   /* Section stripe (old site used light grey) */
  --color-bg-deep:        #E6EEE8;
  --color-border:         #D6E0D9;
  --color-border-strong:  #6F8277;   /* 4.1:1 against white - WCAG 1.4.11 */

  --color-success:        #16794a;
  --color-success-bg:     #e6f5ee;
  --color-error:          #b3261e;

  /* Typography - old site: Roboto headings, Tahoma body */
  --font-sans: Tahoma, Verdana, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-head: Roboto, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.1875rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.625rem;
  --fs-2xl:  2.125rem;
  --fs-3xl:  2.75rem;
  --lh-tight: 1.2;
  --lh-body:  1.75;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5.5rem;

  --container: 1180px;
  --container-narrow: 840px;
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(20, 40, 28, .08);
  --shadow:    0 4px 14px rgba(20, 40, 28, .10);
  --shadow-lg: 0 14px 38px rgba(20, 40, 28, .18);
  --header-h:  76px;
  --transition: 180ms ease;
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;          /* Smooth scrolling for anchor links */
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { padding-left: 1.25rem; }

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--color-accent);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  font-weight: 700;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}


/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
  color: var(--color-heading);
  font-weight: 800;
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.015em;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-primary-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition);
}
a:hover { color: var(--color-accent-dark); }

strong { color: var(--color-heading); }

/* Section intro heading block */
.section-head {
  max-width: 760px;
  margin: 0 0 var(--space-6);
}
.section-head.is-centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-2);
}
.lead {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
}


/* ==========================================================================
   04. LAYOUT HELPERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-7); }
.section--alt { background: var(--color-bg-alt); }
.section--deep {
  background: var(--color-primary);
  color: #e3efe7;
}
.section--deep h2,
.section--deep h3 { color: var(--color-white); }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }


/* ==========================================================================
   05. BUTTONS & CTAs
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.9rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

/* Primary action — orange */
.btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--color-accent-dark);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* Secondary action — navy */
.btn--secondary {
  background: var(--color-primary);
  color: var(--color-white);
}
.btn--secondary:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* Outline action */
.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border-strong);
}
.btn--outline:hover {
  background: var(--color-white);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}

/* Outline on dark backgrounds */
.btn--ghost {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, .55);
}
.btn--ghost:hover {
  background: var(--color-white);
  color: var(--color-primary);
  transform: translateY(-2px);
}

.btn--lg { padding: 1.05rem 2.1rem; font-size: var(--fs-md); }
.btn--sm { padding: 0.6rem 1.15rem; font-size: var(--fs-sm); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.btn-row.is-centered { justify-content: center; }


/* ==========================================================================
   06. HEADER & NAVIGATION
   ========================================================================== */
/* Top utility bar */
.topbar {
  background: var(--color-primary-dark);
  color: #d5e6db;
  font-size: var(--fs-sm);
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
}
.topbar a { color: var(--color-white); text-decoration: none; font-weight: 700; }
.topbar a:hover { color: var(--color-accent); text-decoration: underline; }

/* Sticky header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

/* Logo placeholder */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-primary);
  flex-shrink: 0;
}
.logo img { width: 44px; height: 44px; }
.logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.logo__name {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}
.logo__tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-accent-dark);
}

/* Desktop navigation */
.nav { display: flex; align-items: center; gap: var(--space-5); }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  color: var(--color-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.nav__link:hover,
.nav__link:focus-visible { background: var(--color-bg-alt); color: var(--color-accent-dark); }
.nav__link[aria-current="page"] {
  color: var(--color-accent-dark);
  box-shadow: inset 0 -3px 0 var(--color-accent);
}

/* Dropdown */
.nav__item--has-menu { position: relative; }
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.nav__toggle::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition);
}
.nav__toggle[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-2px); }

.nav__submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 268px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  display: none;
}
.nav__submenu.is-open { display: block; }
.nav__submenu a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.nav__submenu a:hover,
.nav__submenu a:focus-visible {
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
}

/* Header phone CTA */
.header-cta { display: flex; align-items: center; gap: var(--space-3); }

/* Mobile menu button */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0 10px;
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-burger span {
  display: block;
  height: 3px;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/* ==========================================================================
   07. HERO
   ========================================================================== */
.hero {
  position: relative;
  background: linear-gradient(115deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: #e3efe7;
  padding-block: var(--space-8);
  overflow: hidden;
}
.hero::after {           /* subtle diagonal texture */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 12px);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-7);
  align-items: center;
}
.hero h1 { color: var(--color-white); margin-bottom: var(--space-4); }
.hero__intro p { color: #e3efe7; font-size: var(--fs-md); }
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #e3efe7;
}
/* No bullet markers in the hero. The flex gap does the separating, so the
   badge row reads as a line of credentials rather than a bulleted list. */
.hero__badges li { display: flex; align-items: center; gap: 8px; }
.hero__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 4px solid rgba(255,255,255,.14);
}

/* --- Home hero: photo background, copy left, estimate form right --- */
.hero--home { padding-block: var(--space-8); }
.hero--home::after { display: none; }   /* photo replaces the diagonal texture */

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg picture,
.hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* No wash over the photo — it shows at full colour.
   Contrast is handled by the panel behind the copy instead, so the
   headline stays readable without muddying the photograph. */

.hero--home .hero__inner {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr) 420px;
  /* Row 1 hugs the business name; row 2 absorbs the height of the tall form,
     so the heading sits directly under the name instead of drifting down. */
  grid-template-rows: auto 1fr;
  align-items: start;
}

/* Business name across the top of the hero, spanning both columns */
.hero__brand {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 var(--space-5);
  font-size: clamp(2.25rem, 5.2vw, 3.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-white);
  text-shadow:
    0 2px 4px rgba(0, 0, 0, .9),
    0 4px 18px rgba(0, 0, 0, .75),
    0 8px 44px rgba(0, 0, 0, .6);
}

/* No panel — the copy sits directly on the photograph.
   Readability comes from a layered text shadow instead: a tight dark shadow
   for edge definition plus a wide soft one that darkens the photo immediately
   behind the glyphs. Note that WCAG does not credit text shadows, so over the
   brightest part of the image this is below the 4.5:1 formal minimum. */
.hero--home .hero__intro {
  background: none;
  padding: 0;
  grid-column: 1;
  grid-row: 2;
}

/* The estimate form rises to sit level with the business name, so its top
   edge lines up with the header text instead of starting below it. */
.hero--home .hero-form {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
}
.hero--home .hero__intro h1,
.hero--home .hero__intro p,
.hero--home .hero__badges,
.hero--home .hero__intro .eyebrow {
  color: var(--color-white) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .85),
    0 2px 10px rgba(0, 0, 0, .70),
    0 4px 30px rgba(0, 0, 0, .55);
}
.hero--home .hero__intro h1 {
  text-shadow:
    0 2px 4px rgba(0, 0, 0, .9),
    0 4px 18px rgba(0, 0, 0, .75),
    0 8px 44px rgba(0, 0, 0, .6);
}

/* Estimate card */
.hero-form {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border-top: 5px solid var(--color-accent);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
}
.hero-form__title { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
.hero-form__sub {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.hero-form .form-grid { gap: var(--space-3); }
.hero-form .field label { font-size: var(--fs-xs); }
.hero-form .field input,
.hero-form .field select,
.hero-form .field textarea {
  padding: 0.6rem 0.75rem;
  font-size: var(--fs-sm);
}
.hero-form .field textarea { min-height: 76px; }
.hero-form .form-note { margin-top: var(--space-2); text-align: center; }

/* --- Intro band: the prose that opens a page sits BELOW the hero, on the
   page background. Standing rule: no paragraphs inside any hero. --- */
.intro-band {
  background: var(--color-bg);
  padding-block: var(--space-7) var(--space-2);
}
.intro-band p {
  font-size: var(--fs-md);
  color: var(--color-text);
}
.intro-band p:first-of-type { font-size: var(--fs-lg); line-height: 1.6; color: var(--color-heading); }
.intro-band h2 { margin-bottom: var(--space-4); }

/* Compact hero for interior pages */
.hero--page { padding-block: var(--space-7); }
.hero--page .hero__inner { grid-template-columns: 1fr; max-width: 860px; }

/* Interior hero that carries a photo alongside the copy */
.hero--split .hero__inner { grid-template-columns: 1.05fr 0.95fr; max-width: none; }

/* <picture> is inline by default — force it to fill its container so the
   reserved aspect-ratio box is respected and no layout shift occurs */
.hero__media picture,
.service-card__media picture { display: block; width: 100%; height: 100%; }

/* Trust strip under hero */
.trust-strip {
  background: var(--color-primary-dark);
  color: #d5e6db;
  padding-block: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.trust-strip ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  list-style: none;
  margin: 0; padding: 0;
  text-align: center;
}
/* Each service is a link through to its page */
.trust-strip a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: #dbe4f1;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.trust-strip a:hover,
.trust-strip a:focus-visible {
  background: rgba(255, 255, 255, .1);
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Current page gets a marker so visitors know where they are */
.trust-strip a[aria-current="page"] {
  color: var(--color-white);
  box-shadow: inset 0 -3px 0 var(--color-accent);
}


/* ==========================================================================
   08. BREADCRUMBS
   ========================================================================== */
.breadcrumbs {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0; padding: var(--space-3) 0;
}
.breadcrumbs li { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.breadcrumbs li + li::before { content: "/"; color: var(--color-border-strong); }
.breadcrumbs a { color: var(--color-primary-light); text-decoration: none; font-weight: 600; }
.breadcrumbs a:hover { text-decoration: underline; }


/* ==========================================================================
   09. CONTENT BLOCKS & CARDS
   ========================================================================== */
.prose { max-width: 78ch; }
.prose h2 { margin-top: var(--space-7); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-6); }

/* Content block: one markdown H2 section */
.content-block {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
}
.content-block:first-of-type { border-top: 0; padding-top: 0; }
.content-block h2 { margin-bottom: var(--space-4); }

/* Two column layout with sticky sidebar */
.layout-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-7);
  align-items: start;
}
.sidebar { position: sticky; top: calc(var(--header-h) + 20px); }

/* Generic card */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}
.card h3 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.card p { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* Highlighted info panel */
.panel {
  background: var(--color-accent-soft);
  border-left: 5px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.panel h3 { margin-bottom: var(--space-3); }

/* --- Standards callout: how every job is run (Scotland layout profile) --- */
.panel--standards {
  border-left: 5px solid var(--color-primary);
  background: var(--color-bg-deep);
  padding: var(--space-6);
}
.panel--standards h2 { margin-bottom: var(--space-4); }
.standards-list { list-style: none; margin: 0; padding: 0; }
.standards-list li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: var(--space-3);
  line-height: var(--lh-body);
}
.standards-list li:last-child { margin-bottom: 0; }
.standards-list li::before {
  content: "\2713";
  position: absolute;
  left: 0; top: -1px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-accent-dark);
}


/* ==========================================================================
   10. SERVICES GRID
   ========================================================================== */
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}
.service-card__media { background: var(--color-bg-deep); aspect-ratio: 16 / 10; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.service-card__body h3 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.service-card__body p { font-size: var(--fs-sm); color: var(--color-text-muted); flex: 1; }
.service-card__link {
  margin-top: var(--space-4);
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--color-accent-dark);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.service-card__link::after { content: "\2192"; transition: transform var(--transition); }
.service-card:hover .service-card__link::after { transform: translateX(4px); }


/* ==========================================================================
   11. PROCESS STEPS
   ========================================================================== */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.step {
  position: relative;
  counter-increment: step;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5) var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step::before {
  content: counter(step);
  position: absolute;
  top: calc(-1 * var(--space-4));
  left: var(--space-5);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--color-accent);
  color: var(--color-white);
  font-weight: 900;
  font-size: var(--fs-md);
  border-radius: 50%;
  box-shadow: var(--shadow);
}
.step h3 { font-size: var(--fs-md); margin: var(--space-3) 0 var(--space-2); }
.step p { font-size: var(--fs-sm); color: var(--color-text-muted); }


/* ==========================================================================
   12. BENEFITS / FEATURE GRID
   ========================================================================== */
.feature {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--color-accent); }
.feature__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  border-radius: var(--radius);
  font-size: 1.4rem;
  font-weight: 900;
  margin-bottom: var(--space-4);
}
.feature h3 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.feature p { font-size: var(--fs-sm); color: var(--color-text-muted); }


/* ==========================================================================
   12b. PROJECT GALLERY & LIGHTBOX
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.gallery__item { display: block; }

/* The whole tile is the button, so it is keyboard reachable by default */
.gallery__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: var(--color-bg-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.gallery__btn:hover,
.gallery__btn:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}
.gallery__btn img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--transition);
}
.gallery__btn:hover img { transform: scale(1.04); }

/* Caption sits over the foot of the tile */
.gallery__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-5) var(--space-3) var(--space-3);
  background: linear-gradient(to top, rgba(12, 23, 40, .92) 30%, rgba(12, 23, 40, 0));
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.35;
}

/* --- Lightbox overlay --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  background: rgba(8, 15, 26, .94);
}
.lightbox[hidden] { display: none; }

.lightbox__figure {
  margin: 0;
  max-width: min(1000px, 92vw);
  text-align: center;
}
.lightbox__img {
  width: 100%;
  height: auto;
  max-height: 76vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background: var(--color-primary-dark);
}
.lightbox__caption {
  margin-top: var(--space-4);
  color: #e3efe7;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.lightbox__close,
.lightbox__nav {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, .12);
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: scale(1.06);
}
.lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-size: 2.1rem;
}


/* ==========================================================================
   13. FAQ ACCORDION
   ========================================================================== */
.faq { max-width: 900px; margin-inline: auto; }
.faq__item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faq__item:hover { border-color: var(--color-border-strong); }
.faq__item.is-open { border-color: var(--color-accent); box-shadow: var(--shadow); }

.faq__question { margin: 0; }
.faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: none;
  border: 0;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--color-heading);
  text-align: left;
  line-height: 1.35;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.faq__trigger:hover { background: var(--color-bg-alt); color: var(--color-accent-dark); }
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 24px; height: 24px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--color-accent);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--transition), opacity var(--transition);
}
.faq__icon::before { width: 16px; height: 3px; }
.faq__icon::after  { width: 3px; height: 16px; }
.faq__trigger[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq__panel {
  display: none;
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-text-muted);
}
.faq__panel.is-open { display: block; }


/* ==========================================================================
   14. CTA BANDS
   ========================================================================== */
.cta-band {
  background: linear-gradient(115deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: #e3efe7;
  padding-block: var(--space-7);
  text-align: center;
}
.cta-band h2 { color: var(--color-white); }
.cta-band p { max-width: 640px; margin-inline: auto; font-size: var(--fs-md); }

/* Inline mid-content CTA */
.cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--color-accent-soft);
  border: 1px solid #f2d3bf;
  border-left: 6px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: var(--space-6) 0;
}
.cta-inline p { margin: 0; font-weight: 700; color: var(--color-heading); }
.cta-inline .btn-row { margin: 0; }

/* Sticky mobile call bar */
.call-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  background: var(--color-primary-dark);
  border-top: 2px solid var(--color-accent);
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
}
.call-bar .btn { flex: 1; padding: 0.8rem 0.5rem; font-size: var(--fs-sm); }


/* ==========================================================================
   15. CONTACT FORM
   ========================================================================== */
.form-wrap {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow);
}
.form-wrap h2 { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
.form-wrap .form-intro { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-heading);
}
.field .req { color: var(--color-error); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--color-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63, 117, 86, .25);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--color-error);
  background: #fdf4f3;
}
.field__error {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-error);
  min-height: 1em;
}

.form-note { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--space-3); }

/* Success message */
.form-success {
  display: none;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--color-success-bg);
  border: 1px solid #b7ddc9;
  border-left: 5px solid var(--color-success);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  color: #12513a;
}
.form-success.is-visible { display: flex; }
.form-success strong { display: block; color: var(--color-success); margin-bottom: 4px; }


/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-primary-dark);
  color: #cfe3d6;
  padding-top: var(--space-8);
  font-size: var(--fs-sm);
}
.site-footer h3 {
  color: var(--color-white);
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--space-4);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: var(--space-2); }
.site-footer a { color: #e3efe7; text-decoration: none; }
.site-footer a:hover { color: var(--color-accent); text-decoration: underline; }
.footer-brand .logo__name { color: var(--color-white); }
.footer-brand p { margin-top: var(--space-4); }

/* Reversed wordmark in the footer — the full lockup reads well at this size
   against dark green, where the standard dark-green version would vanish */
.footer-logo { display: inline-block; max-width: 230px; }
.footer-logo img { width: 100%; height: auto; }
.footer-phone {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--fs-lg);
  font-weight: 900;
  color: var(--color-white) !important;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-xs);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }


/* ==========================================================================
   17. SCROLL TO TOP
   ========================================================================== */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  background: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-white);
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition), background var(--transition);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--color-accent); }
.to-top svg { width: 20px; height: 20px; fill: currentColor; }


/* ==========================================================================
   18. ACCESSIBILITY & FOCUS STATES
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.section--deep :focus-visible,
.hero :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible {
  outline-color: #F3B664;
}


/* ==========================================================================
   19. RESPONSIVE BREAKPOINTS (mobile-first adjustments)
   ========================================================================== */
@media (max-width: 1024px) {
  .hero__inner,
  .hero--split .hero__inner,
  .hero--home .hero__inner { grid-template-columns: 1fr; }
  .hero--home .hero__brand,
  .hero--home .hero__intro,
  .hero--home .hero-form { grid-column: auto; grid-row: auto; }
  .hero--home .hero__inner { grid-template-rows: none; }
  /* Form drops below the copy and centres */
  .hero-form { max-width: 560px; margin-inline: auto; width: 100%; }
  .hero__media { order: -1; max-width: 560px; }
  .layout-split { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  :root { --fs-3xl: 2.05rem; --fs-2xl: 1.7rem; --fs-xl: 1.4rem; }

  /* Mobile navigation panel */
  .nav-burger { display: flex; }
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { padding: 0.85rem 0.5rem; font-size: var(--fs-base); border-bottom: 1px solid var(--color-border); }
  .nav__item--has-menu { position: static; }
  .nav__toggle { width: 100%; justify-content: space-between; }
  .nav__submenu {
    position: static;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    padding: var(--space-2) 0 var(--space-3) var(--space-4);
  }
  .header-cta .btn { display: none; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .lightbox { padding: var(--space-3); gap: var(--space-2); }
  .lightbox__close, .lightbox__nav { width: 44px; height: 44px; font-size: 1.5rem; }
  .call-bar { display: flex; }
  body { padding-bottom: 68px; }   /* room for sticky call bar */
  .to-top { bottom: 76px; }
}

@media (max-width: 620px) {
  :root { --space-8: 3rem; --space-9: 3.5rem; }
  .grid--4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .topbar__inner { justify-content: center; text-align: center; }
  .btn { width: 100%; }
  .btn-row .btn { width: 100%; }
  .call-bar .btn { width: auto; }
  .header-cta .btn { width: auto; }
  .logo__tag { display: none; }
  .form-wrap { padding: var(--space-5) var(--space-4); }
  .cta-inline { flex-direction: column; align-items: stretch; }
}


/* ==========================================================================
   20. MOTION & PRINT PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .card:hover, .service-card:hover, .step:hover, .feature:hover, .btn:hover,
  .gallery__btn:hover, .gallery__btn:hover img { transform: none; }
}

@media print {
  .site-header, .site-footer, .to-top, .call-bar, .cta-band, .cta-inline, .form-wrap, .topbar { display: none !important; }
  body { color: #000; font-size: 12pt; }
  .faq__panel { display: block !important; }
}


/* ==========================================================================
   21. SERVICE AREA MAP  (map sits beside the service-area copy)
   ========================================================================== */
.layout-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.map-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
  background: var(--color-bg-deep);
}
.map-wrap iframe { display: block; width: 100%; height: 420px; border: 0; }
@media (max-width: 1024px) {
  .layout-split--even { grid-template-columns: 1fr; }
  .map-wrap iframe { height: 320px; }
}


/* ==========================================================================
   22. WOODSTOCK LAYOUT  (carried over from the old site's design)
   ========================================================================== */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: 0; }
h2 { color: var(--color-heading-green); }
.eyebrow { font-family: var(--font-head); }

/* --- Buttons: the old site's orange with dark text --- */
.btn { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.btn .ico { width: 1.1em; height: 1.1em; fill: currentColor; flex-shrink: 0; }
.btn--primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn--primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.btn--secondary { background: var(--color-brand); color: var(--color-white); }
.btn--secondary:hover { background: var(--color-primary); color: var(--color-white); }
.btn--outline { color: var(--color-primary); border-color: var(--color-border-strong); }
.btn--dark { background: var(--color-primary-dark); color: var(--color-white); }
.btn--dark:hover { background: var(--color-primary); color: var(--color-white); transform: translateY(-2px); }
.btn--light { background: var(--color-white); color: var(--color-primary-dark); }
.btn--light:hover { background: var(--color-bg-alt); color: var(--color-primary-dark); transform: translateY(-2px); }

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

/* --- Header: the old green band with white navigation --- */
.topbar { background: var(--color-primary-dark); color: #d5e6db; }
.topbar a:hover { color: var(--color-accent); }
.site-header { background: var(--color-brand); border-bottom: 0; }
.logo, .logo__name { color: var(--color-white); }
.logo__name { font-family: var(--font-head); font-weight: 700; letter-spacing: 0; }
.logo__tag { color: #e3efe7; }
.logo img { border-radius: 8px; background: var(--color-white); }
.nav__link { color: var(--color-white); font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; }
.nav__link:hover,
.nav__link:focus-visible { background: rgba(255, 255, 255, .14); color: var(--color-white); }
.nav__link[aria-current="page"] { color: var(--color-white); box-shadow: inset 0 -3px 0 var(--color-accent); }
.nav__submenu a { color: var(--color-text); }
.nav__submenu a:hover,
.nav__submenu a:focus-visible { background: var(--color-bg-alt); color: var(--color-primary); }
.nav-burger { background: var(--color-primary-dark); }

/* --- Home hero: full-width photo, centred headline, like the old site.
       No paragraphs in the hero: tagline and call line are spans. --- */
.hero { background: linear-gradient(115deg, var(--color-primary-dark) 0%, var(--color-primary) 100%); }
.hero--home,
.hero--photo { padding-block: var(--space-9); text-align: center; }
.hero--photo { padding-block: var(--space-8); }
.hero--home::after,
.hero--photo::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(16, 32, 22, .62) 0%, rgba(16, 32, 22, .72) 100%);
}
.hero--home .hero__inner,
.hero--photo .hero__inner { display: block; max-width: 980px; margin-inline: auto; position: relative; z-index: 1; }
.hero--home .hero__intro,
.hero--photo .hero__intro { padding: 0; background: none; }
.hero--home h1 {
  font-size: clamp(2.6rem, 7vw, 5.25rem);
  font-weight: 900;
  line-height: 1.05;
  color: var(--color-white);
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.hero--photo h1 { color: var(--color-white); font-size: clamp(2rem, 4.6vw, 3.25rem); text-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.hero__tagline {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-white);
}
.hero__call {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-lg);
  text-transform: uppercase;
  color: var(--color-accent);
}
.hero--home .hero__badges,
.hero--photo .hero__badges { justify-content: center; color: var(--color-white); }
.hero--home .btn-row,
.hero--photo .btn-row { justify-content: center; }
.eyebrow--light { color: var(--color-accent-light); }
.hero--page:not(.hero--photo) h1 { color: var(--color-white); }

/* --- Green intro band: heading left, copy right with an orange rule --- */
.intro-split { background: var(--color-brand); color: var(--color-white); padding-block: var(--space-7); }
.intro-split__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-7); align-items: center; }
.intro-split__title { color: var(--color-white); font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; margin: 0; }
.intro-split__body { border-left: 5px solid var(--color-accent); padding-left: var(--space-6); }
.intro-split__body p { color: var(--color-white); font-size: var(--fs-md); }

/* Intro band (interior pages) */
.intro-band { padding-block: var(--space-7) var(--space-4); }

/* --- "What We Offer" text beside the Free Instant Quote card --- */
.offer { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: var(--space-7); align-items: start; }
.offer__figure { margin: var(--space-6) 0 0; }
.offer__figure img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.check-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-5);
}
.check-list li { position: relative; padding-left: 1.6rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: .7rem; height: .7rem; border-radius: 50%; background: var(--color-brand);
}
.check-list a { color: var(--color-primary-light); font-weight: 700; }

.quote-card {
  background: var(--color-white);
  border: 4px solid var(--color-brand);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: sticky;
  top: calc(var(--header-h) + 16px);
}
.quote-card__head { background: var(--color-brand); color: var(--color-white); padding: var(--space-5); text-align: center; }
.quote-card__title {
  color: var(--color-white);
  font-size: var(--fs-2xl);
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.quote-card__sub { display: block; font-size: var(--fs-sm); color: #e3efe7; }
.quote-card .lead-form,
.quote-card .form-success { margin: var(--space-5); }
.quote-card .form-grid { gap: var(--space-3); }
.quote-card .field label { font-size: var(--fs-xs); }
.quote-card .field input,
.quote-card .field select,
.quote-card .field textarea { padding: 0.6rem 0.75rem; font-size: var(--fs-sm); }
.quote-card .field textarea { min-height: 76px; }
.quote-card .form-note { display: block; margin-top: var(--space-2); text-align: center; }

/* --- Image + text split (What Is Spray Foam, Why Choose Spray Foam) --- */
.media-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.media-split--flip .media-split__media { order: 2; }
.media-split__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.media-split__media--plain img { box-shadow: none; background: var(--color-white); }

/* --- Advantages: alternating image / text rows --- */
.adv-list { display: grid; gap: var(--space-6); }
.adv-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.adv-row__media img { width: 100%; height: 100%; object-fit: cover; }
.adv-row__media picture { display: block; height: 100%; }
.adv-row__body { padding: var(--space-7) var(--space-6); align-self: center; }
.adv-row__body h3 { color: var(--color-heading-green); text-align: center; font-size: var(--fs-xl); }
.adv-row--flip .adv-row__media { order: 2; }

/* --- Orange "CALL US!" band --- */
.call-band { background: var(--color-accent); color: var(--color-on-accent); padding-block: var(--space-6); }
.call-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); }
.call-band__title { color: var(--color-on-accent); font-size: var(--fs-2xl); font-weight: 900; text-transform: uppercase; margin: 0 0 var(--space-1); }
.call-band__text { display: block; font-size: var(--fs-md); color: var(--color-on-accent); }
.call-band .btn-row { margin-top: 0; }
.call-band :focus-visible { outline-color: var(--color-primary-dark); }

/* --- Cost icons row on service pages --- */
.cost-icons {
  list-style: none; margin: var(--space-5) 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4);
}
.cost-icons li {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  text-align: center; font-family: var(--font-head); font-weight: 700; color: var(--color-heading-green);
  background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-3);
}
.cost-icons__ico { color: var(--color-accent-dark); }
.cost-icons svg { width: 52px; height: 52px; }

/* --- Info cards (Basements / Garages, DIY vs professional) --- */
.info-grid { margin-top: var(--space-7); }
.info-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 5px solid var(--color-brand);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.info-card h3 { color: var(--color-heading-green); }
.info-card--accent { border-top-color: var(--color-accent); }

/* --- Process steps --- */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); padding-top: var(--space-4); }
.step::before { background: var(--color-accent); color: var(--color-on-accent); }
.step p { font-size: var(--fs-sm); color: var(--color-text); padding-top: var(--space-3); }

/* --- Mission band --- */
.mission-band { background: var(--color-brand); color: var(--color-white); padding-block: var(--space-8); text-align: center; }
.mission-band h2 { color: var(--color-white); }
.mission-band p { color: var(--color-white); font-size: var(--fs-md); }

/* --- CTA bands and cards in the green palette --- */
.cta-band { background: linear-gradient(115deg, var(--color-primary-dark) 0%, var(--color-primary) 100%); }
.cta-band p { color: #e3efe7; }
.cta-band a:not(.btn) { color: var(--color-white); }
.card--brand { border-top: 5px solid var(--color-brand); }
.card:hover { border-color: var(--color-brand); }
.sidebar-phone { font-family: var(--font-head); font-size: var(--fs-xl); font-weight: 900; color: var(--color-primary); text-decoration: none; }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li { margin-bottom: var(--space-2); }
.side-list a { color: var(--color-primary-light); font-weight: 700; }
.panel { background: var(--color-bg-alt); border-left-color: var(--color-brand); }
.cta-inline { background: var(--color-accent-soft); border-color: #f1dcb8; border-left-color: var(--color-accent); }
.service-card:hover { border-color: var(--color-brand); }
.service-card__body h3 a { color: var(--color-heading); text-decoration: none; }
.service-card__body h3 a:hover { color: var(--color-primary-light); text-decoration: underline; }
.service-card__link { color: var(--color-primary-light); }
.faq__item.is-open { border-color: var(--color-brand); }
.faq__icon::before, .faq__icon::after { background: var(--color-brand); }
.faq__trigger { font-family: var(--font-head); font-weight: 700; }
.faq__panel { color: var(--color-text); }
.info-list { margin: 0; }
.info-list dt { font-weight: 700; color: var(--color-heading); }
.info-list dd { margin: 0 0 var(--space-3); }
.map-wrap--side { margin-top: var(--space-5); }
.map-wrap--side iframe { height: 280px; }
.site-footer { background: var(--color-primary-dark); color: #cfe3d6; }
.footer-logo { max-width: 260px; }
.call-bar { background: var(--color-primary-dark); border-top-color: var(--color-accent); }
.to-top { background: var(--color-brand); }
.to-top:hover { background: var(--color-accent); color: var(--color-on-accent); }
:focus-visible { outline-color: var(--color-brand); }
.site-header :focus-visible,
.intro-split :focus-visible,
.mission-band :focus-visible { outline-color: var(--color-accent); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--color-brand); }

@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-7); }
}
@media (max-width: 1024px) {
  .offer { grid-template-columns: 1fr; }
  .quote-card { position: static; max-width: 560px; width: 100%; margin-inline: auto; }
  .media-split, .intro-split__inner { grid-template-columns: 1fr; gap: var(--space-5); }
  .media-split--flip .media-split__media { order: 0; }
  .media-split__media { max-width: 560px; }
}
@media (max-width: 900px) {
  .nav { background: var(--color-white); }
  .nav__link { color: var(--color-heading); }
  .nav__link:hover, .nav__link:focus-visible { background: var(--color-bg-alt); color: var(--color-primary); }
  .nav__link[aria-current="page"] { color: var(--color-primary); }
  .adv-row { grid-template-columns: 1fr; }
  .adv-row--flip .adv-row__media { order: 0; }
  .adv-row__body { padding: var(--space-6) var(--space-5); }
  .steps { grid-template-columns: 1fr 1fr; }
  .call-band__inner { flex-direction: column; text-align: center; }
  .intro-split__body { padding-left: var(--space-5); }
}
@media (max-width: 620px) {
  .check-list { grid-template-columns: 1fr 1fr; }
  .cost-icons { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .logo__name { font-size: 1rem; }
  .hero--home { padding-block: var(--space-8); }
}
.header-cta .btn { white-space: nowrap; }
.prose .eyebrow + h2 { margin-top: 0; }
.hero__call { color: var(--color-white); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.hero__call::before { content: ""; display: block; width: 64px; height: 4px; margin: 0 auto var(--space-4); background: var(--color-accent); border-radius: 2px; }
@media (min-width: 901px) {
  #services .grid--3 > :last-child:nth-child(3n+1) { grid-column: 2; }
}
@media (max-width: 620px) {
  .topbar { display: none; }
  .logo { min-width: 0; flex-shrink: 1; }
  .logo__text { min-width: 0; }
  .logo__name { font-size: .95rem; white-space: normal; line-height: 1.2; }
  .nav-burger { flex-shrink: 0; }
  .hero__tagline { font-size: var(--fs-sm); }
}
.eyebrow--light { color: #FFD49A; }  /* 5.4:1 on the deep green hero */