/* ==========================================================================
   Tillsonburg Insulation Removal — Main Stylesheet
   Author: Tillsonburg Insulation Removal
   Structure:
     01. Design Tokens (CSS Variables)
     02. Reset & Base
     03. Typography
     04. Layout Helpers
     05. Buttons & CTAs
     06. Header & Navigation
     07. Hero
     08. Breadcrumbs
     09. Content Blocks & Cards
     10. Services Grid
     11. Process Steps
     12. Benefits / Feature Grid
     13. FAQ Accordion
     14. CTA Bands
     15. Contact Form
     16. Footer
     17. Scroll To Top
     18. Accessibility & Focus States
     19. Responsive Breakpoints
     20. Motion & Print Preferences
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   Contractor palette: primary (weight) + accent (action)
   ========================================================================== */
:root {
  /* Brand colours for Tillsonburg Insulation Removal: olive with a lake blue accent. Distinct from every other
     site in the network. Every pair below was computed with the WCAG
     relative-luminance formula (see _audit-tools/palette-report.json):
       white on primary                   8.66:1
       white on primary-dark              13.06:1
       primary-light on white             5.51:1
       primary-light on bg-alt            5.22:1
       primary-light on bg-deep           4.86:1
       white on accent                    6.72:1
       white on accent-dark               10.09:1
       accent-dark on white               10.09:1
       accent-dark on bg-alt              9.58:1
       accent-bright on scrim             5.03:1
       accent-hero on scrim               9.20:1
       accent-hero on primary             4.83:1
       text on white                      16.05:1
       text on accent-soft                14.52:1
       muted on white                     6.89:1
       muted on bg-deep                   6.08:1
       heading on white                   17.82:1
       brand-grey on white                6.03:1
       border-strong on white (3:1)       3.65:1
       border-strong on bg-alt (3:1)      3.46:1
       border-strong on bg-deep (3:1)     3.22:1
       tint on primary                    7.02:1
       tint2 on primary-dark              9.08:1
     Never put a comment-close sequence inside comment prose. */
  --color-primary:         #4A4F1C;
  --color-primary-dark:    #303312;
  --color-primary-light:   #686C43;
  --color-accent:          #2B5C9E;
  --color-accent-dark:     #1F4272;
  --color-accent-soft:     #F0F4F8;
  --color-accent-bright:   #6F90BD;
  --color-accent-hero:     #B1C3DC;
  --color-brand-grey:      #626457;
  --color-text:            #21221A;
  --color-text-muted:      #5A5B51;
  --color-heading:         #181812;
  --color-bg-alt:          #F9F9F7;
  --color-bg-deep:         #F1F1ED;
  --color-border:          #E2E3DB;
  --color-border-strong:   #86877A;
  --color-white:          #ffffff;
  --color-bg:             #ffffff;

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

  /* Typography */
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-xs:   0.8125rem;   /* 13px */
  --fs-sm:   0.9375rem;   /* 15px */
  --fs-base: 1.0625rem;   /* 17px — comfortable reading */
  --fs-md:   1.1875rem;   /* 19px */
  --fs-lg:   1.375rem;    /* 22px */
  --fs-xl:   1.625rem;    /* 26px */
  --fs-2xl:  2rem;        /* 32px */
  --fs-3xl:  2.5rem;      /* 40px */
  --lh-tight: 1.2;
  --lh-body:  1.7;

  /* Spacing scale */
  --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;

  /* Structure */
  --container: 1160px;
  --container-narrow: 820px;
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(48, 51, 18, .08);
  --shadow:    0 4px 14px rgba(48, 51, 18, .09);
  --shadow-lg: 0 14px 38px rgba(48, 51, 18, .16);
  --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); }


/* Outbound links inside prose (emitted by rich() in build.py).

   Deliberately NOT the green link colour: these are meant to sit in the run of
   the text rather than advertise themselves. They inherit the body colour and
   are marked instead by a muted underline.

   The underline is not decoration and must not be removed. WCAG 1.4.1 says a
   link in a block of text has to be distinguishable by something other than
   colour, and with the colour inherited from the body there IS nothing else
   left. Strip the underline and the link becomes genuinely invisible - not
   subtle, undiscoverable, including for anyone who cannot perceive the hover
   state. Hover and keyboard focus both change it, so it still behaves like a
   link once found. */
.ext-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.ext-link:hover,
.ext-link:focus-visible {
  color: var(--color-accent-dark);
  text-decoration-color: currentColor;
}

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: #E7E8E1;
}
.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: #E7E8E1;
  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-bright); text-decoration: underline; }
/* accent-bright, NOT accent. The button orange is 2.56:1 on the dark green
   topbar and fails; accent-bright is 7.09:1. The template shipped
   var(--color-accent) here and that fault is live on every sibling site. */

/* Sticky header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  /* See the repo history for notes. */
  border-bottom: 1px solid var(--color-border);
}
.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: #E7E8E1;
  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: #E7E8E1; 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: #E7E8E1;
}
.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;
}
/* The old directional gradient that used to sit here has been removed. It
   darkened the left where the copy used to be and faded to the right for the
   form. Now that the hero is a single centred column, .hero__scrim in section
   07b does the job with one flat, measured value - and stacking both overlays
   just muddied the photograph. */

.hero--home .hero__inner {
  position: relative;
  z-index: 2;               /* above .hero__scrim */
  /* The base .hero__inner is a two-column grid, built for copy-left and
     form-right. With the form moved to .quote-band this hero is a single
     centred column, so the grid has to be switched off explicitly - otherwise
     the place line lands in column two and everything else is squeezed into
     column one. */
  display: block;
}

/* Business name as a masthead across the top of the hero. No text-shadow:
   .hero__scrim provides the contrast now, and it is measurable. */
.hero__brand {
  margin: 0 0 var(--space-3);
  font-size: clamp(2.25rem, 5.2vw, 3.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-white);
}

/* The translucent panel and the layered text-shadows that used to live here
   are gone. Both existed to compensate for having no scrim: the panel was
   rgba(18,31,42,.55) behind the copy, and three stacked shadows tried to buy
   legibility that WCAG does not credit. With .hero__scrim in place they only
   darkened the hero twice over. */
.hero--home .hero__intro h1,
.hero--home .hero__badges {
  color: var(--color-white);
}

/* 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; }

/* 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: #E7E8E1;
  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: #E7E8E1;
  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); }


/* ==========================================================================
   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: #E7E8E1;
  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: #E7E8E1;
  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 #E2E3DB;
  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(43, 92, 158, .22);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--color-error);
  background: #F9F9F7;
}
/* "(optional)" beside a field label. Muted and lighter than the label so it
   reads as an aside rather than part of the field name. --color-text-muted is
   6.02:1 on white, so it is still comfortably legible. */
.field__optional {
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: 0;
}
.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: #E7E8E1;
  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: #E7E8E1; text-decoration: none; }
.site-footer a:hover { color: var(--color-accent-bright); text-decoration: underline; }
/* Same fix as the topbar: the button orange measures 2.56:1 against the dark
   green footer. accent-bright is 7.09:1. Live fault on every sibling. */
.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-map {
  padding-block: var(--space-6) var(--space-7);
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.footer-map h3 { margin-bottom: var(--space-4); }
.footer-map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: var(--radius);
  /* The satellite tiles are brighter than everything around them, so this
     knocks them back just enough to sit in a dark footer without
     losing legibility. */
  filter: grayscale(18%) brightness(92%);
}

.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: #B1C3DC;
}


/* ==========================================================================
   19. RESPONSIVE BREAKPOINTS (mobile-first adjustments)
   ========================================================================== */
@media (max-width: 1024px) {
  .hero__inner,
  .hero--split .hero__inner,
  .hero--home .hero__inner { grid-template-columns: 1fr; }
  /* 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); }
}

/* 980, not 900. Between 901 and 980 the one-row desktop nav did not fit: the
   nav, logo and quote button measured 1000px inside a 980px viewport, and
   body { overflow-x: hidden } swallowed it. 980 also hands over cleanly to the
   centred header, which starts at 981. */
@media (max-width: 980px) {
  :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; }
}

/* See the repo history for notes. */
.hero__inner, .hero__intro, .layout-split, .prose, .content-block,
.sidebar, .sidebar .card, .sidebar dl, .sidebar dd { min-width: 0; }
.hero__intro h1, .hero__intro p, .prose p, .prose li, .content-block p,
.sidebar dd, dd, a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  :root { --space-8: 3rem; --space-9: 3.5rem; }
  /* a long info@ email address is a single 36-character token with
     nowhere to break, so it set the min-content width of its grid column and
     pushed the whole footer past a 320px viewport. */
  .footer-grid, .footer-brand, .footer-list, .footer-list li, .footer-contact {
    min-width: 0;
  }
  .footer-list a, .footer-list li, .footer-brand p { overflow-wrap: anywhere; }
  /* See the repo history for notes. */

  .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; }
  /* The logo must be allowed to shrink here. The base rule sets
     .logo { flex-shrink: 0 }, and with a business name this long that kept the
     header content 470px wide inside a 390px viewport - which pushed the
     burger menu completely off screen. body { overflow-x: hidden } then hid
     the evidence, so on a phone there was simply no reachable menu button.
     Present on every site built from this template, not just this one. */
  .logo { flex-shrink: 1; min-width: 0; gap: var(--space-2); }
  .logo img { width: 38px; height: 38px; }
  .logo__text { min-width: 0; }
  .logo__name {
    font-size: 0.98rem;
    line-height: 1.2;
    white-space: normal;      /* wrap to a second line rather than overflow */
    overflow-wrap: break-word;
  }
  .logo__tag { display: none; }
  .nav-burger { flex-shrink: 0; }
  .form-wrap { padding: var(--space-5) var(--space-4); }
  .cta-inline { flex-direction: column; align-items: stretch; }
  .footer-map iframe { height: 220px; }
}


/* ==========================================================================
   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; }
}


/* ==========================================================================
   06b. CENTRED HEADER  (desktop only)
   Logo on its own line, centred; navigation centred beneath it. Nothing
   competes for the top corner, which is what makes it read as calm.

   Why stacked rather than a three-column bar with the nav in the middle: that
   layout was built and measured first, and a long business name
   is long enough that it either overflowed into the navigation or wrapped onto
   two lines at 1440px. A centred bar needs a short business name.

   Mobile is deliberately untouched below 981px - it keeps the compact row with
   the burger menu, which is the right shape on a phone.
   ========================================================================== */
@media (min-width: 981px) {
  /* --header-h is NOT decorative. html { scroll-padding-top: calc(var(--header-h)
     + 16px) } uses it, so an in-page link like #quote would scroll to a point
     sitting behind the sticky header if this were left at the one-row value.
     Measured against the rendered header, not guessed. */
  :root { --header-h: 112px; }

  .site-header__inner {
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    padding-block: 0.75rem;
    min-height: 0;
  }

  .logo {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-3);
  }
  .logo img { width: 36px; height: 36px; }
  .logo__name { font-size: 1.15rem; }

  .nav { width: 100%; justify-content: center; gap: var(--space-3); }
  .nav__list { justify-content: center; gap: var(--space-1); }

  /* Centre each dropdown under its own trigger instead of left-aligning it,
     which would push the Services menu off toward the page edge now that the
     trigger sits near the middle of the bar. */
  .nav__submenu { left: 50%; transform: translateX(-50%); }
}


/* ==========================================================================
   07b. HERO MASTHEAD, SCRIM, INTRO BAND AND QUOTE BAND
   The hero used to carry the opening copy and the estimate form alongside the
   headline. Both have moved out: the copy into .intro-band and the form into
   .quote-band, leaving the hero as name, place, headline, badges and two calls
   to action.
   ========================================================================== */

/* Solid overlay between the photograph and the text. Replaces the layered
   text-shadow the hero used to rely on. Over the brightest 1% of the actual
   hero export, white text on this measures 10.4:1 and the badge grey 7.7:1;
   unscrimmed it was 1.04:1. */
.hero--home .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(20, 23, 27, .82);
}
.hero--home .hero__inner { max-width: 880px; margin-inline: auto; }
.hero--home {
  text-align: center;
  /* Hero breathing room. Fluid rather than a fixed step so the band grows with
     the viewport instead of jumping at a breakpoint: 56px on a phone, ~88px at
     1024, ~120px at 1440, capped at 144px so it does not run away on a 4K
     monitor.

     The mobile floor is held well below the desktop figure on purpose. Padding
     that reads as generous at 1440 pushes the two hero buttons under the fold
     on a phone, and the sticky call bar is a fallback, not a substitute. */
  padding-block: clamp(3.5rem, 0.5rem + 7.8vw, 9rem);
}

/* --------------------------------------------------------------------------
   Vertical rhythm inside the home hero.

   Five stacked elements: masthead, place line, h1, badges, buttons. The
   template packed them at --space-3 / --space-6 / --space-5 / --space-6, which
   read as one dense block against the photograph. Each gap is now fluid and
   proportionally larger, and the gaps grow as you go down the stack so the
   masthead and place line stay visually paired rather than drifting apart.
   -------------------------------------------------------------------------- */
.hero--home .hero__brand  { margin-bottom: clamp(1rem,    0.6rem + 1.35vw, 2rem); }
.hero--home .hero__place  { margin-bottom: clamp(2.25rem, 1.4rem + 3vw,   4.5rem); }
.hero--home .hero__badges { margin-top:    clamp(2rem,    1.2rem + 2.6vw, 3.75rem); }
.hero--home .hero__badges li { line-height: 1.5; }
.hero--home .hero__intro h1 {
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  font-weight: 700;
  margin-bottom: 0;
}

.hero__place {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-accent-hero);
}
/* Short rules either side of the place line. Decorative, so they inherit the
   text colour rather than introducing another value to check. */
.hero__place::before,
.hero__place::after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-bottom: .3em;
  background: currentColor;
  opacity: .55;
}
.hero__place::before { margin-right: var(--space-3); }
.hero__place::after  { margin-left:  var(--space-3); }

.hero--home .hero__intro { max-width: 740px; margin-inline: auto; }
.hero--home .hero__badges { justify-content: center; }
.hero--home .btn-row {
  justify-content: center;
  margin-top: clamp(2.25rem, 1.4rem + 3vw, 4.5rem);
}

/* Badge dots pick up the bright accent, which is the only accent value legible
   against the scrim. */
/* When a badge wraps to two lines the dot would otherwise centre itself
   vertically against the whole block and read as detached. Align it to the
   first line and nudge it onto the cap height. */
.hero--home .hero__badges li { align-items: flex-start; }

/* ---- Intro band: the copy that used to sit in the hero -------------------- */
.intro-band {
  background: var(--color-bg);
  padding-block: var(--space-7);
}
.intro-band__inner {
  max-width: 760px;
  text-align: center;
}
.intro-band__heading {
  font-size: var(--fs-xl);
  letter-spacing: -0.018em;
  margin: 0 0 var(--space-4);
}
.intro-band p {
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}
.intro-band p:last-child { margin-bottom: 0; }

/* ---- Quote band: the estimate form, full width ---------------------------- */
.quote-band {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-7);
}
.quote-band__inner { max-width: 780px; }
/* The form had a fixed narrow width as a hero sidebar. It is a band now, so
   let it use the space. */
.quote-band .hero-form { max-width: none; }

@media (max-width: 620px) {
  .hero__place { letter-spacing: .14em; font-size: var(--fs-xs); }
  .hero__place::before, .hero__place::after { width: 20px; }
  .intro-band, .quote-band { padding-block: var(--space-6); }
}

/* ==========================================================================
   07c. HOME HERO VARIANT: PHOTO OVER A SOLID BASE (this site only)
   A taller hero. The photograph shows clear at the top and fades into a
   solid primary-dark base; the copy sits only in the solid part, so every
   text pair is a flat colour pair (see palette-report.json).
   ========================================================================== */
.hero--v-base {
  text-align: left;
  padding-top: clamp(20rem, 14rem + 10vw, 26rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.hero--v-base .hero__scrim {
  /* One long, even fade from clear photo at the top to solid primary-dark
     at the bottom. The copy sits in the lower part, where the overlay is
     already 85-100% opaque. */
  background: linear-gradient(to bottom,
    rgba(48,51,18,0) 0%, rgba(48,51,18,.25) 18%, rgba(48,51,18,.5) 34%,
    rgba(48,51,18,.72) 48%, rgba(48,51,18,.88) 60%, rgba(48,51,18,.96) 72%,
    var(--color-primary-dark) 82%, var(--color-primary-dark) 100%);
}
.hero--v-base .hero__inner {
  max-width: var(--container, 1200px);
  display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: 1fr auto auto; gap: 1rem 3rem; align-items: end;
}
.hero--v-base .hero__brand { grid-column: 1; grid-row: 2; font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: .4rem; }
.hero--v-base .hero__place { grid-column: 1; grid-row: 3; margin-bottom: 0; }
.hero--v-base .hero__place::before { display: none; }
.hero--v-base .hero__intro {
  grid-column: 2; grid-row: 1 / -1; max-width: none; margin: 0;
  border-left: 4px solid var(--color-accent-hero); padding-left: 1.5rem;
}
.hero--v-base .hero__intro h1 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.hero--v-base .hero__badges { display: block; justify-content: flex-start; margin-top: 1rem; }
.hero--v-base .hero__badges li { display: block; padding: .3rem 0; font-weight: 600; }
.hero--v-base .btn-row { justify-content: flex-start; margin-top: 1.5rem; }
@media (max-width: 900px) {
  .hero--v-base { padding-top: 11rem; }
  .hero--v-base .hero__scrim {
    background: linear-gradient(to bottom, rgba(48,51,18,0) 0%, rgba(48,51,18,.45) 12%, rgba(48,51,18,.8) 22%, rgba(48,51,18,.95) 30%, var(--color-primary-dark) 36%, var(--color-primary-dark) 100%);
  }
  .hero--v-base .hero__inner { display: block; }
  .hero--v-base .hero__intro { margin-top: 1.75rem; }
}