/* ==========================================================================
   Orléans Attic Insulation — Main Stylesheet
   Author: Orléans Attic Insulation
   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
   The well-kept board (Taste direction, seed 88119999). Green-black and bone:
   spruce fields from an Ottawa winter treeline, bone paper, one pale jade
   accent for the action. Stack Sans Headline (light) over Stack Sans Text.
   Square tiles, 8px gaps, filled never outlined. Signature: the board itself.
   ========================================================================== */
@font-face { font-family: "Stack Sans Headline"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/fonts/stack-sans-headline-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Stack Sans Headline"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/stack-sans-headline-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Stack Sans Text"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/stack-sans-text-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Stack Sans Text"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/stack-sans-text-latin-600-normal.woff2") format("woff2"); }

:root {
  /* Every text/background pair below was computed (WCAG AA), not eyeballed. */
  --color-primary:        #1A2421;
  --color-primary-dark:   #121816;
  --color-primary-light:  #2C5E50;
  --color-accent:         #9FC7B8;
  --color-accent-dark:    #2C5E50;
  --color-accent-soft:    #E4EFEA;
  --color-accent-light:   #9FC7B8;
  --color-ink:            #161C1A;
  --color-tint:           #E3E2DA;
  --color-accent-hover:   #B7D6CA;
  --rgb-dark: 22, 28, 26;
  --rgb-primary: 26, 36, 33;
  --rgb-accent: 159, 199, 184;
  --color-brand-grey:     #5f6a66;

  /* Neutrals */
  --color-text:           #161C1A;
  --color-text-muted:     #454D49;
  --color-heading:        #121816;
  --color-white:          #ffffff;
  --color-bg:             #F1F1EC;
  --color-bg-alt:         #E6E5DF;
  --color-bg-deep:        #DAD9D1;
  --color-border:         #D5D1C4;
  --color-border-strong:  #6B746F;

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

  /* Typography */
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Stack Sans Headline", "Segoe UI", system-ui, sans-serif;
  --font-body: "Stack Sans Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --track: -0.02em;
  --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: 0px;
  --radius:    0px;
  --radius-lg: 0px;
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
  --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;
}
/* Condensed display face for the two big heading levels only - the
   lettering of highway signs and stencilled floor markings. */
h1, h2, .hero__brand, .site-walk__big, .estimator__range {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
}
h1 { font-size: clamp(2.4rem, 4.6vw, 3.4rem); line-height: 1.04; }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.45rem); line-height: 1.08; }
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: var(--color-tint);
}
.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-ink);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-ink);
  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: var(--color-tint);
  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: var(--color-tint);
  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: var(--color-tint); 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: var(--color-tint);
}
/* 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::before {
  /* Shade behind the headline column only, so white type holds
     its contrast over a bright shop photograph. The form side stays clear. */
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(var(--rgb-dark), .82) 0%, rgba(var(--rgb-dark), .55) 45%, rgba(var(--rgb-dark), .10) 75%);
  pointer-events: none;
}
.hero--home .hero__inner { z-index: 3; }

.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: var(--color-tint);
  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: var(--color-tint);
  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(var(--rgb-dark), .92) 30%, rgba(var(--rgb-dark), 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(var(--rgb-dark), .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: var(--color-tint);
  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__mark {
  position: relative;
  flex-shrink: 0;
  width: 24px; height: 24px;
}
.faq__mark::before,
.faq__mark::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__mark::before { width: 16px; height: 3px; }
.faq__mark::after  { width: 3px; height: 16px; }
.faq__trigger[aria-expanded="true"] .faq__mark::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: var(--color-tint);
  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 var(--color-border);
  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(var(--rgb-accent), .3);
}
.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: var(--color-primary-dark);
}
.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: var(--color-tint);
  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: var(--color-tint); 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: #ffb37a;
}


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


/* ==========================================================================
   21. RED DEER ADDITIONS — site walk, cost estimator, outbound links
   ========================================================================== */
.ext-link, .body-link { color: var(--color-primary-light); }

/* --- Site walk consultation (St. George layout profile) --- */
.site-walk { background: var(--color-bg-alt); }
.site-walk__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--space-7);
  align-items: start;
}
.site-walk__copy .lead { color: var(--color-text); }
.site-walk__card {
  background: var(--color-primary);
  color: var(--color-tint);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border-bottom: 10px solid transparent;
  border-image: repeating-linear-gradient(-45deg, var(--color-accent) 0 12px, var(--color-ink) 12px 24px) 10;
}
.site-walk__card p { color: var(--color-tint); }
.site-walk__big {
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--color-accent) !important;
  margin-bottom: var(--space-3);
}
.site-walk__card .btn { margin-top: var(--space-3); }
.site-walk__card .btn--outline { color: var(--color-white); border-color: rgba(255,255,255,.6); }
.site-walk__card .btn--outline:hover { color: var(--color-primary); }

/* --- Cost estimator --- */
.estimator { background: var(--color-white); }
.estimator__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-7);
  align-items: center;
}
.estimator__fine { font-size: var(--fs-sm); color: var(--color-text-muted); }
.estimator__tool {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.estimator__tool .field { margin-bottom: var(--space-4); }
.estimator__tool label { display: block; font-weight: 700; margin-bottom: var(--space-2); color: var(--color-heading); }
.estimator__tool select,
.estimator__tool input {
  width: 100%;
  font: inherit;
  padding: 0.8rem 0.9rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-text);
}
.estimator__out {
  background: var(--color-primary);
  color: var(--color-tint);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.estimator__out[hidden] { display: none; }
.estimator__label { margin: 0; font-size: var(--fs-sm); color: var(--color-tint); }
.estimator__range {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.1;
  color: var(--color-accent);
}
.estimator__note { margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--color-tint); }

@media (max-width: 900px) {
  .site-walk__grid, .estimator__grid { grid-template-columns: 1fr; gap: var(--space-5); }
}


/* ==========================================================================
   21. CITY IDENTITY
   ========================================================================== */
h1, h2, .hero__brand { letter-spacing: 0; }
.commitments { background: var(--color-bg-alt); }
.commitments .lead { color: var(--color-text); font-size: var(--fs-md); }
.commit-list { list-style: none; margin: var(--space-5) 0 var(--space-6); padding: 0; }
.commit-list li {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) 2.4rem;
  border-top: 1px solid var(--color-border);
}
.commit-list li:last-child { border-bottom: 1px solid var(--color-border); }
.commit-list li::before {
  content: "\2713";
  position: absolute; left: 0.2rem; top: var(--space-3);
  font-weight: 800; font-size: 1.25rem; line-height: 1.5;
  color: var(--color-accent-dark);
}
/* Long business names: let the header name wrap on phones so the menu
   button never gets pushed off screen. */
@media (max-width: 520px) {
  .logo { flex-shrink: 1; min-width: 0; }
  .logo__name { font-size: 0.98rem; line-height: 1.15; white-space: normal; }
}


/* ==========================================================================
   22. SITE IDENTITY — "The well-kept board" (Taste design layer, Oct 2026)
   Green-black and bone. Every surface is a filled tile: square corners,
   8px gaps, no outlines at rest, no shadows, no gradients. Pale jade marks
   the action. Display: Stack Sans Headline 300. Text: Stack Sans Text.
   Contrast (computed): ink #161C1A on bone #F3F1EA 16.1:1, on #E9E6DC 14.6:1;
   muted #454D49 on #E9E6DC 7.2:1; bone #E3E2DA on spruce #1A2421 13.0:1;
   ink on jade #9FC7B8 9.6:1; link #2C5E50 on bone 7.0:1;
   border-strong #6B746F on white 4.7:1.
   ========================================================================== */
:root {
  --field: #1A2421;        /* spruce green-black: the dark tiles */
  --field-2: #222E2A;      /* one step lighter */
  --bone: #F1F1EC;
  --paper: #E6E5DF;        /* tile one step from the page */
  --paper-2: #DAD9D1;
  --on-field: #E3E2DA;
  --on-field-muted: #B5BAB2;  /* 8.4:1 on #1A2421 */
  --jade: #9FC7B8;
  --jade-deep: #2C5E50;
  --gap: 8px;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  --fs-base: var(--step-body);
}
body { font-family: var(--font-body); background: var(--bone); color: var(--color-text); }
h1, h2, h3, h4, .hero__brand, .logo__name, .site-walk__big, .estimator__range { font-family: var(--font-display); }
h1, h2 { font-weight: 300; letter-spacing: -0.022em; line-height: 1.05; }
h2 { font-size: var(--step-head); }
h3, h4 { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; line-height: 1.25; }
p, li { font-size: var(--step-body); line-height: 1.55; }
a { color: var(--jade-deep); }
strong, b { font-weight: 600; }

/* ---------- house rules: nothing floats, nothing is outlined at rest ---------- */
*, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
.hero::after, .hero::before, .cta-band::before, .section-head h2::after, .commitments h2::after { content: none !important; display: none !important; }
.card:hover, .service-card:hover, .step:hover, .feature:hover, .gallery__btn:hover { transform: none; }

/* ---------- labels: sentence case, readable size ---------- */
.eyebrow { display: inline-block; text-transform: none; letter-spacing: 0; font-size: var(--step-body);
  font-weight: 600; color: var(--jade); margin-bottom: var(--space-3); }
.logo__tag { text-transform: none; letter-spacing: 0; font-size: 0.875rem; color: var(--color-text-muted); }

/* ---------- buttons: square, flat, one fill ---------- */
.btn { border-radius: 0; border: 0; font-family: var(--font-body); font-weight: 600; letter-spacing: 0;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { background: var(--jade); color: var(--color-ink); }
.btn--primary:hover, .btn--primary:focus-visible { background: #B7D6CA; color: var(--color-ink); }
.btn--secondary { background: var(--field); color: var(--on-field); }
.btn--secondary:hover { background: var(--field-2); color: #fff; }
.btn--outline { background: var(--paper-2); color: var(--color-ink); }
.btn--outline:hover { background: var(--field); color: var(--on-field); }
.btn--ghost { background: var(--field-2); color: var(--on-field); }
.btn--ghost:hover { background: #2F3D38; color: #fff; }

/* ---------- top bar + header: a plain bar ---------- */
.topbar { background: var(--field); color: var(--on-field-muted); font-size: var(--step-small); }
.topbar a { color: var(--on-field); }
.topbar a:hover { color: var(--jade); }
.site-header { background: var(--bone); border-bottom: 0; }
.nav__link { font-weight: 600; color: var(--color-ink); }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--jade-deep); }
.nav__submenu { background: var(--paper); border: 0; border-radius: 0; }
.logo__name { font-weight: 500; letter-spacing: -0.01em; }
.header-phone {
  display: none; flex-direction: column; line-height: 1.15; text-decoration: none;
  color: var(--color-heading); font-weight: 600; font-size: var(--fs-md); white-space: nowrap;
}
.header-phone__label { font-size: 0.8125rem; font-weight: 400; color: var(--color-text-muted); }
@media (min-width: 1360px) { .header-phone { display: inline-flex; } }
.header-cta .btn { white-space: nowrap; }

/* ============================================================
   HOME HERO: the two-by-two board
   ============================================================ */
.hero--board { background: var(--field); color: var(--on-field); padding: var(--gap); overflow: visible; }
.hero--board .board {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(clamp(320px, 42vh, 460px), auto) auto auto;
}
.hero--board .tile { position: relative; padding: clamp(20px, 2vw, 28px); min-width: 0; }
.tile--name { grid-column: 1 / 8; grid-row: 1; background: var(--bone); color: var(--color-ink);
  display: flex; flex-direction: column; justify-content: flex-end; }
.tile--photo { grid-column: 8 / 13; grid-row: 1 / 3; padding: 0 !important; overflow: hidden; background: var(--field-2); }
.tile--photo picture, .tile--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile--badges { grid-column: 1 / 5; grid-row: 2; background: var(--field-2); }
.tile--act { grid-column: 5 / 8; grid-row: 2; background: var(--jade); color: var(--color-ink);
  display: flex; align-items: flex-end; }
.tile--form { grid-column: 1 / 13; grid-row: 3; background: var(--paper); color: var(--color-ink); }

.hero--board .hero__brand { margin: 0 0 clamp(16px, 2.4vw, 32px); color: var(--color-ink); line-height: .86;
  font-weight: 500; letter-spacing: -0.05em; }
.hero__brand-word { display: block; font-size: clamp(4.25rem, 11.5vw, 11rem); }
.hero__brand-rest { display: block; font-size: var(--step-lead); letter-spacing: -0.01em; font-weight: 300;
  margin-top: .55em; color: var(--color-text-muted); line-height: 1.1; }
.hero--board .hero__intro { padding: 0; background: none; }
.hero--board .hero__intro h1 { color: var(--color-ink) !important; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.75rem);
  font-weight: 300; line-height: 1.08; margin: 0; max-width: 22ch; }
.hero--board .hero__badges { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0;
  list-style: none; color: var(--on-field) !important; font-size: var(--step-body); font-weight: 400; }
.hero--board .hero__badges li { display: block; padding: 0; border: 0; }
.hero--board .tile--act .btn-row { display: flex; flex-direction: column; align-items: stretch; gap: var(--gap); width: 100%; margin: 0; }
.hero--board .tile--act .btn--primary { background: var(--field); color: var(--on-field); }
.hero--board .tile--act .btn--primary:hover { background: var(--field-2); color: #fff; }
.hero--board .tile--act .btn--ghost { background: #B7D6CA; color: var(--color-ink); }
.hero--board .tile--act .btn--ghost:hover { background: var(--bone); }

/* callback form as one bar across the board */
.hero--board .hero-form { background: none; border: 0; padding: 0; border-radius: 0;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap) clamp(20px, 3vw, 48px); align-items: start; }
.hero--board .hero-form__title { grid-column: 1; font-size: var(--step-lead); font-weight: 300; margin: 0 0 var(--space-2); color: var(--color-ink); }
.hero--board .hero-form__sub { grid-column: 1; margin: 0; color: var(--color-text-muted); font-size: var(--step-small); }
.hero--board .hero-form .form-success { grid-column: 1 / -1; }
.hero--board .hero-form .lead-form { grid-column: 2; grid-row: 1 / span 2; }
.hero--board .hero-form .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.hero--board .hero-form .field--full { grid-column: 1 / -1; }
.hero--board .hero-form .form-note { text-align: left; color: var(--color-text-muted); }

/* ---------- interior heroes: a title tile and an action tile ---------- */
.hero--tiles { background: var(--field); color: var(--on-field); padding: var(--gap); }
.hero--tiles .hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); max-width: none;
  background: var(--field-2); padding: clamp(28px, 4vw, 64px) clamp(20px, 4vw, 56px); margin: 0; }
.hero--tiles .eyebrow { color: var(--jade); }
.hero--tiles h1 { color: var(--on-field); font-size: clamp(2rem, 1.2rem + 3vw, 4rem); font-weight: 300; max-width: 20ch; margin-bottom: var(--space-5); }
.hero--tiles .btn--ghost { background: var(--field); }

/* ---------- intro band: the lead paragraph over the page ---------- */
.intro-band { background: var(--bone); padding-block: clamp(56px, 7vw, 96px) var(--space-4); }
.intro-band p { color: var(--color-ink); font-size: var(--step-body); }
.intro-band p:first-of-type { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); line-height: 1.3; font-weight: 400; color: var(--color-ink); }

/* ---------- sections: tone steps instead of lines ---------- */
.section { padding-block: clamp(72px, 9vw, 140px); }
.section--alt { background: var(--paper); }
.section-head.is-centered { text-align: left; margin-inline: 0; max-width: 46rem; }
.btn-row.is-centered { justify-content: flex-start; }
.lead { color: var(--color-text); font-size: var(--step-lead); line-height: 1.35; }

/* ---------- services: a board of photo tiles ---------- */
#services .grid--3, .section .grid--3:has(.service-card) {
  display: grid; gap: var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.service-card { grid-column: span 4; background: var(--paper); border: 0; border-radius: 0; overflow: hidden;
  display: flex; flex-direction: column; transition: background-color 180ms ease; }
.section--alt .service-card { background: var(--bone); }
.service-card:first-child { grid-column: span 8; grid-row: span 2; background: var(--field); color: var(--on-field); }
.service-card:first-child .service-card__media { aspect-ratio: auto; flex: 1; min-height: 280px; }
.service-card:first-child h3 a { color: var(--on-field) !important; }
.service-card:first-child h3 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-head); line-height: 1.05; }
.service-card:first-child .service-card__body p { color: var(--on-field-muted); }
.service-card:first-child .service-card__link { color: var(--jade); }
.service-card__media { background: var(--paper-2); aspect-ratio: 3 / 2; overflow: hidden; }
.service-card__media img { transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
.service-card:hover .service-card__media img { transform: scale(1.04); }
.service-card:hover { background: var(--paper-2); }
.service-card:first-child:hover { background: var(--field-2); }
.service-card__body { padding: 24px; }
.service-card__body h3 { font-size: 1.25rem; }
.service-card__body p { font-size: var(--step-body); color: var(--color-text-muted); }
.service-card__link { font-weight: 600; text-decoration: none; color: var(--jade-deep); }
.service-card__link::after { content: none; }

/* ---------- why + commitments ---------- */
.commitments { background: var(--field); color: var(--on-field); }
.commitments h2 { color: var(--on-field); }
.commitments .lead { color: var(--on-field-muted); }
.commit-list { list-style: none; margin: var(--space-6) 0; padding: 0; display: grid; gap: var(--gap); }
.commit-list li { position: relative; background: var(--field-2); border: 0 !important; padding: 20px 24px 20px 64px;
  color: var(--on-field); font-size: var(--step-lead); line-height: 1.3; }
.commit-list li::before { content: "\2713"; position: absolute; left: 24px; top: 20px; color: var(--jade); font-weight: 600; font-size: 1.25rem; }
.commitments .btn--outline { background: var(--field-2); color: var(--on-field); }
.commitments .btn--outline:hover { background: #2F3D38; }

/* ---------- benefits: filled text tiles, no icons ---------- */
.grid--3:has(.feature) { display: grid; gap: var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.feature { grid-column: span 4; background: var(--bone); border: 0; border-radius: 0; padding: 28px; min-height: 200px; }
.feature:nth-child(1), .feature:nth-child(6) { grid-column: span 8; background: var(--field); }
.feature:nth-child(1) p, .feature:nth-child(6) p { color: var(--on-field); font-size: var(--step-lead); line-height: 1.3; }
.feature:nth-child(4) { background: var(--jade); }
.feature p { font-size: var(--step-body); color: var(--color-ink); margin: 0; }
.feature__icon { display: none; }

/* ---------- process: a real ordered list on tiles ---------- */
.steps { display: grid !important; gap: var(--gap); grid-template-columns: repeat(5, minmax(0, 1fr)) !important; counter-reset: step; }
.step { background: var(--bone); border: 0; border-radius: 0; padding: 28px 24px; min-height: 240px; }
.step:nth-child(odd) { background: var(--paper-2); }
.step::before { position: static; display: block; width: auto; height: auto; background: none; border-radius: 0;
  color: var(--jade-deep); font-family: var(--font-display); font-weight: 300; font-size: 3rem; line-height: 1;
  margin-bottom: 16px; text-align: left; }
.step p { font-size: var(--step-body); color: var(--color-ink); }

/* ---------- main content + sidebar ---------- */
.content-block h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); margin-bottom: var(--space-4); max-width: 24ch; }
.content-block + .content-block { margin-top: clamp(48px, 6vw, 80px); }
.sidebar .card { background: var(--jade); border: 0; border-radius: 0; padding: 28px; }
.sidebar .card h3 { color: var(--color-ink); }
.sidebar .card .btn--primary { background: var(--field); color: var(--on-field); }
.sidebar .card .btn--outline { background: #B7D6CA; }
.sidebar .panel { background: var(--paper); border: 0; border-radius: 0; padding: 24px; }
.sidebar .panel a { color: var(--jade-deep); }
.footer-phone { color: var(--color-ink); font-weight: 600; }
.cta-inline { background: var(--paper); border: 0; border-radius: 0; padding: 24px; }

/* ---------- estimator: the price tile (the live thing) ---------- */
.estimator { background: var(--jade); color: var(--color-ink); }
.estimator h2 { color: var(--color-ink); }
.estimator__tool { background: var(--bone); border: 0 !important; border-radius: 0; padding: 28px; }
.estimator__range { font-weight: 300; letter-spacing: -0.03em; color: var(--color-ink); }
.estimator__fine { color: #1F3A33; }
.site-walk { background: var(--field); color: var(--on-field); border: 0; border-radius: 0; }
.site-walk__big { color: var(--on-field); }

/* ---------- CTA bands: a row of tiles ---------- */
.cta-band { background: var(--field); color: var(--on-field); text-align: left; padding: var(--gap); }
.cta-band > .container { background: var(--jade); color: var(--color-ink); max-width: none; padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 72px); }
.cta-band h2 { color: var(--color-ink); max-width: 18ch; }
.cta-band p { color: var(--color-ink); margin-inline: 0; max-width: 46ch; }
.cta-band .btn--primary { background: var(--field); color: var(--on-field); }
.cta-band .btn--primary:hover { background: var(--field-2); color: #fff; }
.cta-band .btn--ghost { background: #B7D6CA; color: var(--color-ink); }
.cta-band .btn-row.is-centered { justify-content: flex-start; }

/* ---------- forms: filled cells ---------- */
.form-wrap { background: var(--bone); border: 0; border-radius: 0; padding: clamp(20px, 3vw, 40px); }
.section--alt .form-wrap { background: var(--bone); }
.field label { font-weight: 600; color: var(--color-ink); }
.field input, .field select, .field textarea { border-radius: 0; border: 1px solid var(--color-border-strong); background: #fff; color: var(--color-ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--jade-deep); outline-offset: 0; border-color: var(--jade-deep); }
.form-note { color: var(--color-text-muted); }
.form-success { border-radius: 0; }

/* ---------- FAQ: a band per question ---------- */
.faq { max-width: none; display: grid; gap: 0; }
.faq__item { border: 0 !important; border-radius: 0; background: var(--bone); margin: 0; }
.faq__item:nth-child(even) { background: var(--paper-2); }
.section--alt .faq__item { background: var(--paper); }
.section--alt .faq__item:nth-child(even) { background: var(--bone); }
.faq__trigger { font-family: var(--font-body); font-weight: 600; font-size: var(--step-lead); padding: 28px 24px; color: var(--color-ink); background: transparent; }
.faq__trigger:hover { background: transparent; color: var(--jade-deep); }
.faq__item.is-open { border: 0; }
.faq__panel { padding: 0 24px 28px; max-width: 60rem; }

/* ---------- map ---------- */
.map-wrap { border-radius: 0; overflow: hidden; background: var(--paper-2); }
.map-wrap iframe { display: block; filter: grayscale(.35); }

/* ---------- footer: two rows of tiles ---------- */
.site-footer { background: var(--field); color: var(--on-field-muted); padding: var(--gap); }
.site-footer > .container { max-width: none; padding: 0; }
.footer-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.footer-grid > * { background: var(--field-2); padding: 24px; margin: 0; }
.footer-grid > :nth-child(1) { grid-column: span 4; }
.footer-grid > :nth-child(2) { grid-column: span 2; }
.footer-grid > :nth-child(3) { grid-column: span 3; }
.footer-grid > :nth-child(4) { grid-column: span 3; background: var(--jade); color: var(--color-ink); }
.footer-grid > :nth-child(4) h3, .footer-grid > :nth-child(4) li, .footer-grid > :nth-child(4) a { color: var(--color-ink) !important; }
.footer-grid > :nth-child(4) .btn--primary { background: var(--field); color: var(--on-field) !important; }
.site-footer h3 { color: var(--on-field); font-size: 1rem; text-transform: none; letter-spacing: 0; }
.site-footer a { color: var(--on-field); }
.site-footer a:hover { color: var(--jade); }
.footer-list li { font-size: var(--step-small); }
.footer-logo img { width: 120px; height: auto; }
.footer-bottom { background: var(--field-2); margin-top: var(--gap); padding: 20px 24px; border: 0; color: var(--on-field-muted); }
.footer-bottom p, .footer-legal li { font-size: var(--step-small); }
.call-bar { background: var(--field); border: 0; }
.to-top { border-radius: 0; background: var(--jade); color: var(--color-ink); }
.to-top svg { fill: var(--color-ink); }

/* ---------- breadcrumbs ---------- */
.breadcrumbs { background: var(--field); color: var(--on-field-muted); }
.breadcrumbs a { color: var(--on-field); }

/* ============================================================
   RESPONSIVE: the board on a phone is its own composition
   ============================================================ */
@media (max-width: 1024px) {
  .hero--board .board { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: none; }
  .tile--name { grid-column: 1 / -1; grid-row: auto; min-height: 30vh; }
  .tile--photo { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .tile--badges { grid-column: 1 / 4; grid-row: auto; }
  .tile--act { grid-column: 4 / -1; grid-row: auto; }
  .tile--form { grid-column: 1 / -1; grid-row: auto; }
  .hero--board .hero-form { grid-template-columns: minmax(0, 1fr); }
  .hero--board .hero-form .lead-form { grid-column: 1; grid-row: auto; }
  .service-card, .service-card:first-child { grid-column: span 6; grid-row: auto; }
  .feature, .feature:nth-child(1), .feature:nth-child(6) { grid-column: span 6; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .footer-grid > * { grid-column: span 6 !important; }
}
@media (max-width: 640px) {
  :root { --gap: 6px; }
  .hero--board .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--badges, .tile--act { grid-column: 1 / -1; }
  .hero__brand-word { font-size: 22vw; }
  .hero--board .hero-form .form-grid { grid-template-columns: minmax(0, 1fr); }
  h2 { font-size: clamp(1.5rem, 1.1rem + 2.4vw, 2rem); }
  .content-block h2 { font-size: 1.5rem; }
  .service-card, .service-card:first-child, .feature, .feature:nth-child(1), .feature:nth-child(6) { grid-column: 1 / -1; }
  .steps { grid-template-columns: minmax(0, 1fr) !important; }
  .step { min-height: 0; }
  .footer-grid > * { grid-column: 1 / -1 !important; }
  .topbar__inner p + p { display: none; }
}
@media (max-width: 520px) {
  .logo { flex-shrink: 1; min-width: 0; }
  .logo__name { font-size: 0.98rem; line-height: 1.15; white-space: normal; }
}

/* ============================================================
   MOTION: the shutter on the hero photograph, entrances per
   section part, feedback on controls. Transform + opacity only.
   ============================================================ */
@keyframes shutter { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.12); } to { transform: scale(1); } }
.tile--photo { animation: shutter 1.1s cubic-bezier(.7,0,.2,1) both; }
.tile--photo img { animation: settle 1.6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.tile--name, .tile--badges, .tile--act, .tile--form { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.tile--badges { animation-delay: .08s; } .tile--act { animation-delay: .16s; } .tile--form { animation-delay: .24s; }
.js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.js-reveal .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tile--photo, .tile--photo img, .tile--name, .tile--badges, .tile--act, .tile--form { animation: none !important; }
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .service-card__media img { transition: none; }
}

/* ---------- board fixes after the first look ---------- */
.nav__toggle { font: inherit; font-weight: 600; font-size: inherit; }
.tile--badges { grid-column: 1 / 4; }
.tile--act { grid-column: 4 / 8; }
.hero--board .hero-form { grid-template-rows: auto auto 1fr; }
.hero--board .hero-form__sub { grid-row: 2; align-self: start; }
.hero--board .hero-form .lead-form { grid-row: 1 / span 3; }
.hero--board .hero-form .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero--board .hero-form .form-grid > .field--full { grid-column: span 1; }
.hero--board .hero-form .form-grid > .field--full:last-child { grid-column: 1 / -1; }
.service-card:first-child h3 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); }
@media (max-width: 1024px) {
  .tile--badges { grid-column: 1 / 4; } .tile--act { grid-column: 4 / -1; }
  .hero--board .hero-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tile--badges, .tile--act { grid-column: 1 / -1; }
  .hero--board .hero-form .form-grid { grid-template-columns: minmax(0, 1fr); }
  .hero--board .hero-form .form-grid > .field--full { grid-column: 1 / -1; }
}
.hero--board .tile--photo { position: relative; inset: auto; z-index: auto; }
.service-card:first-child .service-card__body { flex: 0 0 auto; }
.feature:nth-child(6) { grid-column: 1 / -1; }
.content-block + .content-block, .prose .content-block { border-top: 0 !important; }
.prose hr { display: none; }

/* ---------- inspector round 1 ---------- */
.skip-link { background: var(--field); color: var(--on-field); }
.layout-split--even h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); }
/* process: a real ordered list set as full-width rows, not cards */
.steps { grid-template-columns: minmax(0, 1fr) !important; gap: var(--gap); max-width: 60rem; }
.step { display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: baseline; min-height: 0; padding: 24px 28px; background: var(--bone); }
.step:nth-child(odd) { background: var(--paper-2); }
.step::before { margin: 0; font-size: 2.5rem; }
.step p { font-size: var(--step-lead); line-height: 1.35; margin: 0; }
@media (max-width: 640px) { .step { grid-template-columns: 3rem minmax(0, 1fr); padding: 20px; } .step::before { font-size: 1.75rem; } .step p { font-size: var(--step-body); } }

/* ---------- hero without small text (owner, Oct 19 2026) ---------- */
.tile--act { grid-column: 1 / 8; align-items: center; }
.hero--board .tile--act .btn-row { flex-direction: row; flex-wrap: wrap; }
.hero--board .tile--act .btn-row .btn { flex: 1 1 260px; }
.hero--board .hero-form { grid-template-rows: auto 1fr; }
@media (max-width: 1024px) { .tile--act { grid-column: 1 / -1; } }

/* Owner rule (Oct 19 2026): no small text anywhere in the hero. Form labels
   in the hero read at body size. */
.hero label, .hero .req, .hero .opt { font-size: 1rem; }
.hero .opt { color: inherit; }
.hero .field label, .hero .field .req, .hero .field .opt, .hero .field input, .hero .field select { font-size: 1rem; }

/* ---------- hero rebate line (owner change, Oct 19 2026) ----------
   One underlined link under the H1 on every hero. Never under 1.125rem
   on any viewport; jade on the dark interior heroes, deep jade on the
   bone name tile of the home board. ---------- */
.hero__rebate { display: inline-block; margin: var(--space-4) 0 0; max-width: 32ch;
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); font-weight: 500; line-height: 1.3;
  color: var(--jade); text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 0.3em; text-decoration-color: var(--jade); }
.hero__rebate:hover, .hero__rebate:focus-visible { color: var(--on-field); text-decoration-color: var(--on-field); }
.hero--tiles h1 + .hero__rebate, .hero--split h1 + .hero__rebate { margin-top: 0; margin-bottom: var(--space-5); }
.hero--board .hero__rebate { color: var(--jade-deep); text-decoration-color: var(--jade-deep); margin-top: clamp(14px, 1.6vw, 22px); }
.hero--board .hero__rebate:hover, .hero--board .hero__rebate:focus-visible { color: var(--color-ink); text-decoration-color: var(--color-ink); }