/* ==========================================================================
   Woodstock Industrial Flooring — Main Stylesheet
   Author: Woodstock Industrial Flooring
   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
   Woodstock palette: deep industrial green (Oxford County is farm and plant
   country in equal measure) + safety orange for the call to action + safety
   amber for eyebrow labels on dark. No other site in this portfolio uses a
   green primary, so nothing here shares a look with a sibling city.
   ========================================================================== */
:root {
  /* Brand colours — the deep green and graphite come from the Woodstock
     Industrial Flooring badge; safety orange and safety amber are lifted
     straight out of the floor marking palette this trade works in.
     Every pair below was measured, not estimated (WCAG AA). */
  --color-primary:        #14532D;   /* Deep industrial green — hero, headings band. 9.11:1 with white */
  --color-primary-dark:   #0A3419;   /* Near black green — footer, hover states. 13.83:1 with white */
  --color-primary-light:  #1F7A43;   /* Brighter green — links, 5.35:1 on white */
  --color-accent:         #C2410C;   /* Safety orange — CTA buttons. 5.18:1 with white text */
  --color-accent-dark:    #8F2F08;   /* Orange hover, 8.15:1 with white */
  --color-accent-soft:    #fdefe6;   /* Orange tint background */
  --color-accent-light:   #F6C453;   /* Safety amber eyebrow labels on the dark hero, 5.61:1 on primary */
  --color-brand-grey:     #5f6a63;   /* Secondary graphite from the badge */

  /* Neutrals */
  --color-text:           #22302A;   /* Body copy, 13.78:1 on white (AAA) */
  --color-text-muted:     #51635A;   /* Secondary copy, 6.40:1 on white */
  --color-heading:        #10251A;   /* Headings — green-tinted near-black, 16.13:1 */
  --color-white:          #ffffff;
  --color-bg:             #ffffff;
  --color-bg-alt:         #f3f7f4;   /* Section stripe */
  --color-bg-deep:        #e8efea;   /* Card wells */
  --color-border:         #d8e2db;
  --color-border-strong:  #79897F;   /* 3.69:1 on white, 3.15:1 on the card well — WCAG 1.4.11 */

  /* Feedback */
  --color-success:        #14713f;
  --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(16, 29, 49, .08);
  --shadow:    0 4px 14px rgba(16, 29, 49, .09);
  --shadow-lg: 0 14px 38px rgba(16, 29, 49, .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); }

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: #dbe3ef;
}
.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: #c7d3e4;
  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: #dce4f0;
  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: #d3ddec; 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: #cfdaea;
}
/* No bullet markers in the hero. The flex gap does the separating, so the
   badge row reads as a line of credentials rather than a bulleted list. */
.hero__badges li { display: flex; align-items: center; gap: 8px; }
.hero__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 4px solid rgba(255,255,255,.14);
}

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

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg picture,
.hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Scrim over the photograph.
   The copy column sits on bare image, and on a bright warehouse floor that
   measured 2.15:1 for body text against a 4.5:1 requirement. This gradient
   is weighted to the left, where the copy is, and fades out to the right,
   where the white estimate card provides its own background - so the
   photograph still reads as a photograph while the text clears WCAG AA on
   measurement rather than on the strength of a text shadow. */
.hero--home .hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(6, 26, 14, .86) 0%,
    rgba(6, 26, 14, .80) 42%,
    rgba(6, 26, 14, .58) 64%,
    rgba(6, 26, 14, .20) 82%,
    rgba(6, 26, 14, .06) 100%);
  pointer-events: none;
}

/* Narrow viewports stack the copy over the middle of the photo, so the
   directional gradient stops helping and a flat wash takes over. */
@media (max-width: 860px) {
  .hero--home .hero__bg::after {
    background: linear-gradient(
      180deg,
      rgba(6, 26, 14, .78) 0%,
      rgba(6, 26, 14, .74) 60%,
      rgba(6, 26, 14, .82) 100%);
  }
}

.hero--home .hero__inner {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr) 420px;
  align-items: start;
}

/* Business name across the top of the hero, spanning both columns */
.hero__brand {
  grid-column: 1 / -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 on the photograph, over the scrim defined above.
   The scrim is what carries the contrast requirement. These layered text
   shadows stay because they sharpen the glyph edges against a busy image,
   but nothing here depends on them: WCAG gives a text shadow no credit, and
   the measured ratios clear AA with the shadows discounted entirely. */
.hero--home .hero__intro {
  background: none;
  padding: 0;
}
.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; }

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


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


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

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

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

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

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

/* --- Scope callout: what we do not do (Scotland layout profile) --- */
.panel--notdo {
  border-left: 5px solid var(--color-accent);
  background: var(--color-accent-soft);
  padding: var(--space-6);
}
.panel--notdo h2 { margin-bottom: var(--space-4); }
.notdo-list { list-style: none; margin: 0; padding: 0; }
.notdo-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--space-3);
  line-height: var(--lh-body);
}
.notdo-list li:last-child { margin-bottom: 0; }
.notdo-list li::before {
  content: "\00d7";
  position: absolute;
  left: 0; top: -2px;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-accent-dark);
}


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


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


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


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

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

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

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

.lightbox__figure {
  margin: 0;
  max-width: min(1000px, 92vw);
  text-align: center;
}
.lightbox__img {
  width: 100%;
  height: auto;
  max-height: 76vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background: var(--color-primary-dark);
}
.lightbox__caption {
  margin-top: var(--space-4);
  color: #dbe3ef;
  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: #dbe3ef;
  padding-block: var(--space-7);
  text-align: center;
}
.cta-band h2 { color: var(--color-white); }
.cta-band p { max-width: 640px; margin-inline: auto; font-size: var(--fs-md); }

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

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


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

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

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

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

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

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


/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-primary-dark);
  color: #b9c6da;
  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: #cbd6e6; 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; }
  /* 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  (Brantford: 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; }
}


/* ==========================================================================
   OUTBOUND BODY LINKS
   build.py writes class="ext-link"; earlier generators wrote class="body-link".
   Both are styled so a rename in the generator cannot silently drop the rule.
   ========================================================================== */
.body-link,
.ext-link {
  color: var(--color-primary-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.body-link:hover,
.ext-link:hover,
.body-link:focus-visible,
.ext-link:focus-visible {
  color: var(--color-accent-dark);
}