:root {
  --hero-800: url('../images/hero-hood-cleaning-barrie-canopy-degreaser-800.webp');
  --hero-1600: url('../images/hero-hood-cleaning-barrie-canopy-degreaser-1600.webp');
}
/* Ontario Hood Cleaning - shared stylesheet for all 22 pages */

:root {
  --navy: #0d1b2a;
  --slate: #1a2633;
  --blue: #1e4d8c;
  --blue-dark: #163a6b;
  --orange: #c1361f;
  --orange-dark: #9c2a18;
  --gray-50: #f5f7fa;
  --gray-100: #e8ecf1;
  --gray-200: #d4dbe3;
  --gray-500: #5a6878;
  --white: #ffffff;
  --max: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
  background: var(--white);
}
h1, h2, h3, h4 { color: var(--navy); margin: 0 0 0.6em; line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); margin-top: 0; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--blue-dark); }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }

/* Announcement marquee (sticky scrolling banner) */
.announcement-marquee {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--orange);
  color: var(--white);
  overflow: hidden;
  padding: 0.55rem 0;
}
.marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marquee-scroll 38s linear infinite;
  will-change: transform;
}
.marquee-content {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0 1.5rem;
  letter-spacing: 0.01em;
}
.marquee-item::after {
  content: "·";
  margin-left: 1.5rem;
  opacity: 0.55;
  font-size: 1rem;
}
.marquee-item svg {
  width: 15px;
  height: 15px;
  opacity: 0.9;
  flex-shrink: 0;
}
.marquee-item a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}
.marquee-item a:hover { text-decoration: none; }
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.announcement-marquee:hover .marquee-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
  .marquee-content:nth-child(2) { display: none; }
}

/* Header / nav */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  position: sticky;
  top: 36px;
  z-index: 50;
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--navy); text-decoration: none; font-size: 1.15rem; }
.brand-mark { width: 36px; height: 36px; }
.nav-links { display: none; gap: 1.5rem; align-items: center; }
.nav-links > a,
.nav-links .nav-trigger { color: var(--navy); text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 0.25rem 0; }
.nav-links > a:hover,
.nav-links .nav-trigger:hover { color: var(--blue); }
.nav-cta {
  background: var(--orange); color: var(--white);
  padding: 0.6rem 1.1rem; border-radius: 4px; text-decoration: none; font-weight: 700; font-size: 0.95rem;
  flex-shrink: 0;
}
.nav-cta:hover { background: var(--orange-dark); color: var(--white); }
/* Hide the header CTA on mobile — the hamburger panel surfaces /contact/
   as the first dropdown item, and the hero form is right below the nav. */
@media (max-width: 899px) { .nav-cta { display: none; } }
@media (min-width: 900px) { .nav-links { display: flex; } }

/* Mobile hamburger button (visible <900px). Lives between
   the hidden nav-links and the orange Get-a-Quote CTA. */
.nav-toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-right: 0.5rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--gray-100);
  border-radius: 6px;
  color: var(--navy);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--gray-100); }
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
@media (min-width: 900px) { .nav-toggle { display: none; } }

/* Mobile nav panel (slides down below header when hamburger is open).
   Below 900px only — desktop ignores all of this. */
@media (max-width: 899px) {
  .nav-links.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-100);
    border-bottom: 3px solid var(--orange);
    box-shadow: 0 16px 32px rgba(13,27,42,0.12);
    padding: 0.75rem 1rem 1rem;
    z-index: 55;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
  .nav-links.is-open > a,
  .nav-links.is-open .nav-item-dropdown {
    display: block;
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 1rem;
  }
  .nav-links.is-open .nav-item-dropdown:last-child { border-bottom: 0; }
  /* Mobile: dropdown contents become a flat sub-list under the trigger */
  .nav-links.is-open .nav-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    color: var(--navy);
  }
  .nav-links.is-open .nav-trigger .nav-caret { transform: rotate(0); }
  .nav-links.is-open .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0.5rem 0 0 0.75rem;
    margin-top: 0.5rem;
    min-width: 0;
    background: transparent;
    border-left: 2px solid var(--gray-100);
  }
  .nav-links.is-open .nav-dropdown a {
    padding: 0.55rem 0.75rem;
    font-size: 0.92rem;
    border-left: 0;
  }
  .nav-links.is-open .nav-dropdown a.dropdown-overview {
    border-bottom: 1px solid var(--gray-100);
    padding-bottom: 0.65rem;
    margin-bottom: 0.35rem;
  }
}
/* .site-header sticky positioning is defined at line ~99. sticky establishes
   a positioning context for absolute children, so the mobile .nav-links.is-open
   panel still anchors correctly without needing position: relative here. */

/* Nav dropdown menu */
.nav-item-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 0.3rem;
  cursor: pointer; background: none; border: 0;
  font-family: inherit; line-height: 1;
}
.nav-trigger .nav-caret {
  width: 11px; height: 11px;
  transition: transform 0.18s ease;
}
.nav-item-dropdown:hover .nav-trigger .nav-caret,
.nav-item-dropdown:focus-within .nav-trigger .nav-caret { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: 100%; left: -0.85rem;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-top: 3px solid var(--orange);
  border-radius: 6px;
  box-shadow: 0 14px 38px rgba(13,27,42,0.18), 0 5px 14px rgba(13,27,42,0.08);
  padding: 0.55rem 0;
  min-width: 270px;
  opacity: 0; visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  z-index: 60;
}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown {
  opacity: 1; visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.nav-dropdown a {
  display: block;
  padding: 0.55rem 1.1rem;
  color: var(--navy);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus {
  background: var(--gray-100);
  color: var(--orange);
  border-left-color: var(--orange);
  outline: none;
}
.nav-dropdown a.dropdown-overview {
  font-weight: 700;
  color: var(--navy);
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 0.4rem;
  padding-bottom: 0.7rem;
}
.nav-dropdown a[aria-current="page"] {
  color: var(--orange);
  border-left-color: var(--orange);
}

/* Hero - full width with split content + form.
   The hero photo is PER PAGE: scripts/build-pages.py emits an inline
   --hero-800 / --hero-1600 pair from each page's "hero_image" front-matter key.
   The defaults below keep the hero from collapsing if a page omits it. */
.hero {
  position: relative;
  width: 100%;
  min-height: 78vh;
  display: flex; align-items: center;
  --hero-scrim: linear-gradient(rgba(13,27,42,0.78), rgba(13,27,42,0.6));
  /* Mobile-first: ~35KB 800w hero. Bumps to 1600w at wider breakpoints. */
  background-image: var(--hero-scrim), var(--hero-800);
  background-size: cover;
  background-position: center;
  color: var(--white);
  padding: 2.5rem 0;
}
@media (min-width: 900px) {
  .hero { background-image: var(--hero-scrim), var(--hero-1600); }
}
/* Service / guide page hero.
   NOTE: the Ottawa and Mississauga templates emit <section class="svc-hero">
   but never styled it, so their service-page heroes render as unstyled text on
   white. Fixed here. Same per-page --hero-800 / --hero-1600 custom properties
   as .hero, so one stylesheet serves every hero on the site. A page with no
   hero_image simply gets the solid navy treatment. */
.svc-hero {
  position: relative;
  --hero-scrim: linear-gradient(rgba(13,27,42,0.86), rgba(13,27,42,0.72));
  background-color: var(--navy);
  background-image: var(--hero-scrim), var(--hero-800, none);
  background-size: cover;
  background-position: center;
  color: var(--white);
  padding: 2.75rem 0 3rem;
}
@media (min-width: 900px) {
  .svc-hero { background-image: var(--hero-scrim), var(--hero-1600, none); }
}
.svc-hero h1 { color: var(--white); margin: .35rem 0 1rem; }
.svc-hero .lede { color: rgba(255,255,255,0.92); max-width: 68ch; font-size: 1.05rem; }
.svc-hero .breadcrumb-trail,
.svc-hero .breadcrumb-trail a { color: rgba(255,255,255,0.82); }
.svc-hero .breadcrumb-trail a:hover { color: var(--white); }
.svc-hero .hero-ctas { margin-top: 1.5rem; }

.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 960px) {
  .hero .container { grid-template-columns: 1.4fr 1fr; gap: 3rem; }
}
.hero-content h1 { color: var(--white); max-width: 100%; }
.hero-content p.lede { font-size: 1.15rem; max-width: 100%; margin-bottom: 1.5rem; color: #e8ecf1; }
.hero-ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* Hero trust-symbol grid (under the phone CTA) */
.hero-trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem 2rem;
  margin-top: 1.75rem;
  max-width: 540px;
}
@media (min-width: 480px) {
  .hero-trust-grid { grid-template-columns: repeat(2, 1fr); }
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: #e8ecf1;
  line-height: 1.3;
}
.hero-trust-item svg {
  width: 22px;
  height: 22px;
  color: #f0b340;
  flex-shrink: 0;
}

/* Hero quote form */
.hero-form {
  background: var(--white);
  border-radius: 8px;
  padding: 1.15rem 1.25rem 1.1rem;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  color: var(--slate);
  width: 100%;
  max-width: 380px;
  margin-left: auto;
}
.hero-form h2 { color: var(--navy); font-size: 1.2rem; margin: 0 0 0.85rem; line-height: 1.25; }
.hero-form label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--navy); margin: 0 0 0.15rem; letter-spacing: 0.01em; }
.hero-form input,
.hero-form textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--slate);
  background: var(--white);
  margin-bottom: 0.5rem;
  box-sizing: border-box;
}
.hero-form input:focus, .hero-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30,77,140,0.18);
}
.hero-form textarea { resize: vertical; min-height: 50px; }
.hero-form .hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.hero-form button[type="submit"] {
  width: 100%;
  background: var(--orange);
  color: var(--white);
  border: 0;
  padding: 0.7rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 0.2rem;
}
.hero-form button[type="submit"]:hover { background: var(--orange-dark); }
.hero-form button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }
.hero-form .form-note {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin: 0.5rem 0 0;
  text-align: center;
  line-height: 1.3;
}
.hero-form .form-note a { color: var(--blue); font-weight: 700; text-decoration: none; }
.hero-form .form-success,
.hero-form .form-error {
  display: none;
  padding: 0.75rem 0.9rem;
  border-radius: 4px;
  text-align: center;
  font-size: 0.88rem;
  margin-top: 0.25rem;
  line-height: 1.4;
}
.hero-form .form-success {
  background: rgba(30,77,140,0.08);
  border: 1px solid var(--blue);
  color: var(--navy);
}
.hero-form .form-success strong { display: block; margin-bottom: 0.25rem; font-size: 1.05rem; }
.hero-form .form-error {
  background: rgba(193,54,31,0.08);
  border: 1px solid var(--orange);
  color: var(--orange-dark);
}
.hero-form.is-success .form-fields { display: none; }
.hero-form.is-success .form-success { display: block; }
.hero-form.is-error .form-error { display: block; }
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.95rem 1.6rem; border-radius: 4px; text-decoration: none;
  font-weight: 700; font-size: 1rem; transition: background 0.15s;
}
.btn-primary { background: var(--orange); color: var(--white); }
.btn-primary:hover { background: var(--orange-dark); color: var(--white); }
.btn-secondary { background: var(--white); color: var(--navy); border: 2px solid var(--white); }
.btn-secondary:hover { background: transparent; color: var(--white); }

/* Trust strip */
.trust-strip {
  background: var(--navy); color: var(--white);
  padding: 1.25rem 0;
  border-top: 3px solid var(--orange);
}
.trust-strip .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  text-align: center;
}
@media (min-width: 540px) { .trust-strip .row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .trust-strip .row { grid-template-columns: repeat(4, 1fr); } }
.trust-strip .item {
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; font-weight: 600; font-size: 0.95rem;
  white-space: nowrap;
}
.trust-strip svg { flex-shrink: 0; }

/* Section base */
section { padding: 4.5rem 0; }
section.alt { background: var(--gray-50); }
.section-head { text-align: center; max-width: 920px; margin: 0 auto 2.5rem; }
.section-head p { color: var(--gray-500); font-size: 1.1rem; }

/* Problem block */
.problem-block { max-width: 820px; margin: 0 auto; }
.problem-block p { font-size: 1.1rem; }
.problem-stat {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem; margin-top: 2rem;
}
.stat-card {
  background: var(--white); border-left: 4px solid var(--orange);
  padding: 1.25rem 1.5rem; border-radius: 4px;
  box-shadow: 0 1px 3px rgba(13,27,42,0.06);
}
.stat-card .num { font-size: 1.8rem; font-weight: 700; color: var(--navy); display: block; }
.stat-card .label { font-size: 0.95rem; color: var(--gray-500); }

/* Services grid */
.services-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
@media (min-width: 900px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Positioning trust row (value-prop pills) */
.positioning-row { background: var(--white); padding: 2.5rem 0; border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.positioning-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  text-align: center;
}
@media (min-width: 640px) { .positioning-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .positioning-grid { grid-template-columns: repeat(4, 1fr); } }
.positioning-item .value {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}
.positioning-item .label {
  font-size: 0.92rem;
  color: var(--gray-500);
  line-height: 1.35;
}

/* 6-step process redesign */
.process-six {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .process-six { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .process-six { grid-template-columns: repeat(3, 1fr); } }
.process-six-step {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-left: 4px solid var(--blue);
  border-radius: 6px;
  padding: 1.4rem 1.5rem 1.5rem;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.process-six-step:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13,27,42,0.08); border-left-color: var(--orange); }
.process-six-step .num {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.process-six-step h3 { color: var(--navy); font-size: 1.1rem; margin: 0 0 0.4rem; }
.process-six-step p { color: var(--slate); font-size: 0.95rem; margin: 0; line-height: 1.5; }

/* Testimonials section */
.testimonials-section { background: linear-gradient(135deg, var(--navy) 0%, #142339 100%); color: var(--white); }
.testimonials-section h2 { color: var(--white); }
.testimonials-section .section-head p { color: #c9d2dd; }
.testimonials-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 1.75rem;
}
.testimonial-stars { color: #f0b340; font-size: 1rem; letter-spacing: 0.15em; margin-bottom: 0.85rem; }
.testimonial-quote { color: var(--white); font-size: 1.05rem; line-height: 1.55; margin: 0 0 1.25rem; font-style: italic; }
.testimonial-quote::before { content: "\201C"; color: var(--orange); font-size: 2rem; line-height: 0; vertical-align: -0.4rem; margin-right: 0.15rem; }
.testimonial-quote::after { content: "\201D"; color: var(--orange); font-size: 2rem; line-height: 0; vertical-align: -0.4rem; margin-left: 0.15rem; }
.testimonial-author { font-size: 0.92rem; color: #c9d2dd; }
.testimonial-author strong { display: block; color: var(--white); font-size: 0.98rem; font-weight: 700; margin-bottom: 0.15rem; }

/* Industry standards authority section */
.authority-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 760px) { .authority-grid { grid-template-columns: repeat(2, 1fr); } }
.authority-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.25rem;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-top: 4px solid var(--blue);
  border-radius: 8px;
  padding: 1.4rem 1.6rem;
  text-decoration: none;
  color: var(--slate);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-top-color 0.18s ease;
}
.authority-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(13,27,42,0.12);
  border-top-color: var(--orange);
}
.authority-mark {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--white);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.nfpa-mark { background: #c8102e; }
.ikeca-mark { background: #14365c; }
.authority-card h3 { color: var(--navy); margin: 0 0 0.35rem; font-size: 1.15rem; line-height: 1.25; }
.authority-card p { color: var(--gray-500); font-size: 0.92rem; margin: 0 0 0.5rem; line-height: 1.45; }
.authority-link { color: var(--blue); font-weight: 700; font-size: 0.88rem; letter-spacing: 0.01em; }
.authority-link::after { content: " \2192"; }
.authority-card:hover .authority-link { color: var(--orange-dark); }
.authority-disclaimer {
  text-align: center;
  font-size: 0.85rem;
  color: var(--gray-500);
  max-width: 720px;
  margin: 1.75rem auto 0;
  font-style: italic;
  line-height: 1.5;
}
@media (max-width: 480px) {
  .authority-card { grid-template-columns: 1fr; text-align: center; padding: 1.5rem; }
  .authority-mark { margin: 0 auto; }
}

/* Experience / trust section */
.trust-section { background: var(--navy); color: var(--white); }
.trust-section h2 { color: var(--white); }
.trust-section .section-head p { color: #c9d2dd; }
.trust-stats {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 1000px;
  margin: 2.5rem auto 0;
}
.trust-stat {
  text-align: center;
  padding: 1.25rem 1rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.trust-stat .num {
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--orange);
  line-height: 1.1;
  margin-bottom: 0.35rem;
}
.trust-stat .label {
  font-size: 0.92rem;
  color: #c9d2dd;
  line-height: 1.35;
}
.trust-body { max-width: 820px; margin: 0 auto; }
.trust-body p { color: #d3dae5; font-size: 1.05rem; }

/* Trust-section 3-image collage: hero left + tilted overlap right */
.trust-collage {
  position: relative;
  max-width: 1200px;
  margin: 0 auto 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  align-items: center;
}
.trust-collage-item {
  border-radius: 8px;
  overflow: hidden;
  background: var(--navy);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: block;
}
.trust-collage-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* LEFT: hero van photo, no tilt */
.trust-collage-1 {
  border: 6px solid var(--orange);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 8px 20px rgba(0,0,0,0.3);
  aspect-ratio: 3/2;
}
.trust-collage-1:hover { transform: translateY(-3px) scale(1.012); }

/* RIGHT: square container holding two diagonally-offset, tilted photos */
.trust-collage-right {
  position: relative;
  aspect-ratio: 1 / 1;
}
.trust-collage-2,
.trust-collage-3 {
  position: absolute;
  width: 78%;
  aspect-ratio: 3 / 2;
}
.trust-collage-2 {
  /* Fleet, top-right, tilted slightly left. ~90% visible. */
  top: 0;
  right: 0;
  border: 6px solid var(--blue);
  box-shadow: 0 22px 55px rgba(0,0,0,0.6), 0 8px 22px rgba(0,0,0,0.35);
  transform: rotate(-3.5deg);
  z-index: 1;
}
.trust-collage-2:hover {
  transform: rotate(-3.5deg) translateY(-4px) scale(1.02);
  z-index: 10;
}
.trust-collage-3 {
  /* Crew, bottom-left, tilted slightly right. Overlaps Fleet at the
     diagonal corner only — ~10% of each image. */
  bottom: 0;
  left: 0;
  border: 6px solid #f0b340;
  box-shadow: 0 26px 65px rgba(0,0,0,0.7), 0 10px 24px rgba(0,0,0,0.42);
  transform: rotate(3.5deg);
  z-index: 2;
}
.trust-collage-3:hover {
  transform: rotate(3.5deg) translateY(-4px) scale(1.02);
  z-index: 10;
}
@media (max-width: 880px) {
  .trust-collage {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
@media (max-width: 600px) {
  .trust-collage-right {
    position: static;
    aspect-ratio: auto;
    display: grid;
    gap: 1.25rem;
  }
  /* On phones, unify all 3 photos to the same clean frame: orange border,
     3:2 aspect, no tilt. The multi-colored borders + diagonal overlap
     only works at desktop dimensions. */
  .trust-collage-1,
  .trust-collage-2,
  .trust-collage-3 {
    position: static;
    width: 100%;
    transform: none;
    border: 4px solid var(--orange);
    aspect-ratio: 3 / 2;
    box-shadow: 0 12px 28px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.2);
  }
  .trust-collage-1:hover,
  .trust-collage-2:hover,
  .trust-collage-3:hover { transform: none; }
}
.trust-collage-caption {
  text-align: center;
  font-size: 0.88rem;
  color: #8a97aa;
  font-style: italic;
  max-width: 760px;
  margin: 0 auto 2rem;
  line-height: 1.5;
}

/* NFPA umbrella feature panel */
.nfpa-feature {
  margin-top: 1.5rem;
  background: linear-gradient(135deg, var(--navy) 0%, #142339 100%);
  color: var(--white);
  border-radius: 6px;
  padding: 2.25rem 2.5rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  border-left: 5px solid var(--orange);
  box-shadow: 0 4px 20px rgba(13,27,42,0.12);
}
.nfpa-feature .nfpa-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; background: rgba(193,54,31,0.15); border-radius: 50%; flex-shrink: 0; }
.nfpa-feature .nfpa-icon svg { width: 38px; height: 38px; color: var(--orange); }
.nfpa-feature h3 { color: var(--white); margin: 0 0 0.4rem; font-size: 1.35rem; line-height: 1.3; }
.nfpa-feature p { color: #c9d2dd; margin: 0; font-size: 1rem; max-width: 720px; }
.nfpa-feature .nfpa-cta { flex-shrink: 0; }
.nfpa-feature .btn { white-space: nowrap; }
@media (max-width: 800px) {
  .nfpa-feature { grid-template-columns: 1fr; text-align: center; padding: 2rem 1.5rem; gap: 1.25rem; }
  .nfpa-feature .nfpa-icon { margin: 0 auto; }
  .nfpa-feature p { margin: 0 auto; }
}
.service-card {
  background: var(--white); padding: 1.75rem; border-radius: 6px;
  border: 1px solid var(--gray-100);
  transition: transform 0.15s, box-shadow 0.15s;
}
.service-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(13,27,42,0.08); border-color: var(--blue); }
.service-card .icon { width: 44px; height: 44px; color: var(--blue); margin-bottom: 0.75rem; }
.service-card h3 { margin-bottom: 0.5rem; }
.service-card p { color: var(--gray-500); font-size: 0.95rem; margin-bottom: 0.75rem; }
.service-card a.more { font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.service-card a.more::after { content: " →"; }

/* Process / how we work */
.process {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.process-step { }
.process-step img { border-radius: 6px; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 1rem; }
.process-step .step-num {
  display: inline-block; background: var(--blue); color: var(--white);
  width: 32px; height: 32px; border-radius: 50%;
  font-weight: 700; text-align: center; line-height: 32px;
  margin-bottom: 0.5rem; font-size: 0.95rem;
}

/* NFPA 96 split */
.split {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 800px) { .split { grid-template-columns: 1fr 1fr; } }
.split img {
  border-radius: 10px;
  border: 5px solid var(--white);
  box-shadow:
    0 10px 32px rgba(13, 27, 42, 0.22),
    0 4px 12px rgba(13, 27, 42, 0.12);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: block;
  cursor: zoom-in;
  will-change: transform;
}
.split img:hover {
  transform: scale(1.035) translateY(-2px);
  box-shadow:
    0 22px 56px rgba(13, 27, 42, 0.32),
    0 6px 18px rgba(13, 27, 42, 0.16);
}
@media (prefers-reduced-motion: reduce) {
  .split img { transition: none; }
  .split img:hover { transform: none; }
}
.split ul { padding-left: 1.25rem; }
.split li { margin-bottom: 0.6rem; }

/* Industries */
.industries-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .industries-grid { grid-template-columns: repeat(3, 1fr); } }
.industry-card {
  background: var(--white); padding: 1.75rem; border-radius: 6px;
  border-top: 4px solid var(--blue);
  box-shadow: 0 1px 3px rgba(13,27,42,0.06);
}
.industry-card h3 { color: var(--navy); }
.industry-card p { color: var(--gray-500); font-size: 0.95rem; }
.industry-card a { font-weight: 600; text-decoration: none; }

/* Service area */
.area-cities {
  display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem;
}
.area-cities span {
  background: var(--white); border: 1px solid var(--gray-200);
  padding: 0.45rem 0.85rem; border-radius: 999px;
  font-size: 0.9rem; color: var(--navy); font-weight: 600;
}

/* Before/After sliders */
.ba-section .section-head { max-width: 720px; }
.ba-grid {
  display: grid;
  gap: 1.75rem 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .ba-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .ba-grid { grid-template-columns: repeat(3, 1fr); } }
.ba-item { display: flex; flex-direction: column; }
.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 8px;
  cursor: ew-resize;
  user-select: none;
  margin: 0 0 0.6rem;
  box-shadow: 0 4px 18px rgba(13,27,42,0.14);
  background: var(--navy);
  touch-action: none;
}
.ba-img-before, .ba-img-after {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.ba-img-after { clip-path: inset(0 0 0 50%); }
.ba-label {
  position: absolute; top: 16px;
  background: rgba(13,27,42,0.82);
  color: var(--white);
  padding: 0.4rem 0.85rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  pointer-events: none;
}
.ba-label-before { left: 16px; }
.ba-label-after { right: 16px; }
.ba-handle {
  position: absolute; top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--white);
  box-shadow: 0 0 12px rgba(0,0,0,0.5);
  transform: translateX(-50%);
  pointer-events: none;
}
.ba-handle-circle {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  color: var(--navy);
}
.ba-caption {
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}
.ba-caption span { color: var(--gray-500); font-weight: 400; display: block; font-size: 0.85rem; margin-top: 0.15rem; }
@media (min-width: 700px) {
  .ba-caption span { display: inline; font-size: inherit; margin-top: 0; }
}
/* Smaller handle on narrower sliders */
@media (min-width: 980px) {
  .ba-handle-circle { width: 38px; height: 38px; }
  .ba-handle-circle svg { width: 16px; height: 16px; }
  .ba-label { font-size: 0.68rem; padding: 0.3rem 0.65rem; top: 12px; }
  .ba-label-before { left: 12px; }
  .ba-label-after { right: 12px; }
}

/* Proof gallery */
.proof-grid {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.proof-grid img { border-radius: 6px; aspect-ratio: 1/1; object-fit: cover; }

/* Video gallery (lite-youtube facade pattern) */
.video-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .video-grid { grid-template-columns: repeat(3, 1fr); } }
.video-card {
  background: var(--white);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(13,27,42,0.08);
  transition: transform 0.15s, box-shadow 0.15s;
}
.video-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13,27,42,0.12); }
.lite-youtube {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 56.25%;
  background: var(--navy);
  border: 0;
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  color: inherit;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
.lite-youtube img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.15s;
}
.lite-youtube:hover img { filter: brightness(0.85); }
.lite-youtube .play-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 52px;
  opacity: 0.92;
  transition: transform 0.15s, opacity 0.15s;
  pointer-events: none;
}
.lite-youtube:hover .play-icon { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
.lite-youtube:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.lite-youtube iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-caption {
  padding: 0.9rem 1.1rem;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
}

/* Citation block */
.citation-block {
  background: var(--white); border: 1px solid var(--gray-100);
  border-left: 4px solid var(--blue);
  padding: 1.5rem 1.75rem; margin-top: 2rem; border-radius: 4px;
}
.citation-block h3 { font-size: 1.05rem; color: var(--navy); margin-bottom: 0.75rem; }
.citation-block ul { padding-left: 1.2rem; margin: 0; }
.citation-block li { margin-bottom: 0.4rem; font-size: 0.95rem; color: var(--slate); }

/* FAQ */
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item {
  background: var(--white); border: 1px solid var(--gray-100);
  border-radius: 6px; padding: 1.5rem 1.75rem; margin-bottom: 1rem;
}
.faq-item h3 { font-size: 1.15rem; margin-bottom: 0.5rem; color: var(--navy); }
.faq-item p { margin: 0; color: var(--slate); }

/* Final CTA */
.final-cta {
  background: linear-gradient(135deg, var(--navy) 0%, #15273d 100%);
  color: var(--white); text-align: center; padding: 5rem 0;
}
.final-cta h2 { color: var(--white); }
.final-cta p { color: #c9d2dd; max-width: 620px; margin: 0 auto 2rem; font-size: 1.1rem; }
.final-cta .hero-ctas { justify-content: center; }

/* Footer */
.site-footer {
  background: var(--navy); color: #c9d2dd; padding: 3.5rem 0 1.5rem;
}
.footer-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 2.5rem;
}
.site-footer h3, .site-footer h4 { color: var(--white); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer a { color: #c9d2dd; text-decoration: none; font-size: 0.95rem; }
.site-footer a:hover { color: var(--white); }
.footer-utility {
  border-top: 1px solid #2a3a52;
  padding-top: 1.25rem;
  margin-bottom: 1rem;
}
.footer-utility-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 0.85rem;
}
.footer-utility-links li { margin: 0.25rem 0; }
.footer-utility-links a {
  color: #8a97aa;
  text-decoration: none;
}
.footer-utility-links a:hover { color: var(--white); text-decoration: underline; }

.footer-bottom {
  border-top: 1px solid #2a3a52;
  padding-top: 1.25rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.85rem; color: #8a97aa;
}
.nap-block { font-size: 0.95rem; color: #c9d2dd; }
.nap-block strong { color: var(--white); }

/* Partner / agency credit. Centered, full-width row inside footer-bottom. */
.footer-bottom .footer-credit {
  flex-basis: 100%;
  text-align: center;
  padding-top: 0.65rem;
  margin-top: 0.35rem;
  border-top: 1px solid #2a3a52;
  font-size: 0.82rem;
  color: #8a97aa;
}
.footer-bottom .footer-credit a {
  color: #c9d2dd;
  text-decoration: none;
  font-weight: 600;
}
.footer-bottom .footer-credit a:hover {
  color: var(--white);
  text-decoration: underline;
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ============================================================================
   MOBILE HARDENING
   72% of this domain's search clicks are mobile, and mobile ranks roughly three
   times better than desktop here, so mobile is the product rather than a polish
   pass. These rules were proven on the Windsor and Mississauga builds; the
   Ottawa template this repo was cloned from never received them.
   ========================================================================== */

/* iOS Safari auto-zooms on focus for any input under 16px and does NOT zoom
   back out afterwards, which strands the visitor mid-form. 16px is the floor.
   Applied at all widths: the desktop rendering is unchanged in practice. */
.hero-form input,
.hero-form textarea,
.hero-form select {
  font-size: 16px;
  min-height: 44px;
}
.hero-form textarea { min-height: 88px; }
.hero-form button[type="submit"] {
  min-height: 48px;
  font-size: 16px;
}

/* WCAG 2.5.5 touch targets on the controls a thumb actually aims at.
   Phone numbers set inline INSIDE a sentence are deliberately left alone:
   WCAG exempts inline targets, and padding them wrecks body line spacing. */
.hero-ctas .btn,
.nav-cta,
.service-card .more,
.nav-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-links a { justify-content: flex-start; }

/* Nothing may scroll the page sideways. Wide content scrolls inside its own
   container instead, which is what .table-wrap is for. */
html, body { overflow-x: hidden; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
img, svg, table, pre { max-width: 100%; }

@media (max-width: 767px) {
  /* Footer link density is fine on a mouse and hostile on a thumb, so pad the
     targets only here and leave desktop density untouched. */
  .site-footer .footer-grid a,
  .site-footer ul li a {
    display: inline-block;
    padding: 0.4rem 0;
    min-height: 44px;
    line-height: 1.6;
  }
  .breadcrumb-trail a { display: inline-block; padding: 0.35rem 0; }
  .area-cities span { padding: 0.5rem 0.75rem; }

  /* Long unbroken strings (URLs, emails) must not force a sideways scroll. */
  .citation-block li, .faq-item p, .lede, p { overflow-wrap: anywhere; }

  /* Hero is tall on a phone once the form is in it; let it size to content. */
  .hero { min-height: 0; padding: 2rem 0; }
}

/* Mobile header: measured at 375px during the Barrie build.
   Before: .nav-cta sat flush against the viewport edge (right edge exactly 375,
   no gutter, so it read as clipped), the brand wrapped onto two lines pushing
   the header to 93px, and .nav-toggle was 39px wide, under the 44px target. */
@media (max-width: 767px) {
  .site-header .nav {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    gap: 0.5rem;
  }
  /* The brand is the only flexible item: the hamburger and the quote CTA are
     both fixed-size targets, so the wordmark shrinks and ellipsises rather than
     pushing the CTA past the viewport edge. Measured at 375px: brand 207px was
     forcing .nav-cta to right:388, clipped and hidden by overflow-x. */
  .brand {
    font-size: 0.82rem;
    letter-spacing: -0.005em;
    line-height: 1.15;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand-mark { flex: 0 0 auto; width: 30px; height: 30px; }
  .nav-toggle { min-width: 44px; min-height: 44px; flex: 0 0 auto; }
  .nav-cta {
    flex: 0 0 auto;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    font-size: 0.85rem;
    white-space: nowrap;
  }
}
@media (max-width: 359px) {
  /* Very narrow phones: the brand wordmark yields before the CTA does. */
  .brand { font-size: 0.85rem; }
  .nav-cta { font-size: 0.8rem; padding-left: 0.55rem; padding-right: 0.55rem; }
}

/* Mobile hero: get a CTA above the fold.
   Measured at 375x812 before this rule: the H1 plus the 108-word definitional
   lede filled the whole first screen, putting the Call button at y=888 and the
   quote form at y=1164. On the page that produces 88% of this domain's leads,
   on the device that brings 72% of its traffic, neither CTA was visible without
   scrolling.

   The lede must stay long and must stay early in the DOM: the framework needs a
   self-contained definitional answer inside the first 100 words for AI
   extraction. So the DOM order is untouched and only the VISUAL order changes.
   Flex order lifts the CTAs directly under the H1, and the lede tightens. */
@media (max-width: 767px) {
  .hero-content { display: flex; flex-direction: column; }
  .hero-content h1 { order: 1; font-size: 1.75rem; margin-bottom: 0.6rem; }
  .hero-content .hero-ctas { order: 2; margin: 0 0 1.1rem; }
  /* p.lede elsewhere in this file is (0,2,1); match it or the size is ignored. */
  .hero-content p.lede { order: 3; font-size: 1rem; line-height: 1.55; }
  .hero-content .hero-trust-grid { order: 4; }

  /* Full-width tap target for the phone, which is this domain's dominant
     conversion path: 80% of historical contacts are inbound calls. */
  .hero-ctas .btn { width: 100%; min-height: 52px; font-size: 1.02rem; }
}

/* Service and guide page heroes get the same mobile treatment as the homepage.
   Measured at 375x812 on the NFPA page before this rule: the quote button sat at
   y=808 against an 812px viewport, so it was effectively at the fold on a tall
   phone and well below it on an iPhone SE class device. DOM order is again left
   alone so the definitional opener stays first for AI extraction. */
@media (max-width: 767px) {
  .svc-hero .container { display: flex; flex-direction: column; }
  .svc-hero .breadcrumb-trail { order: 1; }
  .svc-hero h1 { order: 2; font-size: 1.6rem; }
  .svc-hero .hero-ctas { order: 3; margin: 0.25rem 0 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; }
  .svc-hero p.lede { order: 4; font-size: 1rem; line-height: 1.55; }
  .svc-hero .hero-ctas .btn { width: 100%; min-height: 52px; }
}