/* ==========================================================================
   Mold Diagnostics Quebec — design system v5
   World: the pinned reference template re-skinned to the owner's brand green.
   Built for Elementor: flexbox only, no CSS grid, no JS-driven layout.
   Type: Manrope throughout (display + body).
   Palette: white surfaces, logo-green ink (#003C0E), green accent, green tints.
   ========================================================================== */

:root {
  /* palette — primary is the owner's logo green (#003C0E) */
  --ink: #0A130E;
  --ink-2: #3E5B49;
  --ink-3: #55705F;
  --accent: #003C0E;
  --accent-deep: #00290A;
  --accent-soft: #17944F;
  --grn-1: #EFF6F1;
  --grn-2: #DFECE4;
  --grn-3: #C9DFD2;
  --grn-4: #ACCBB9;
  --grn-5: #0E5C2E;
  --bg: #FFFFFF;
  --line: #DCE8DF;
  --ok: #2E9E6B;
  --warn: #C25E2B;

  /* red — the "not included" signal (services panel + tab) */
  --red: #B3261E;
  --red-ink: #9C231B;
  --red-1: #FBEFEE;
  --red-2: #F3DAD7;
  --red-3: #E3B4AF;
  --red-shadow: 0 22px 44px -26px rgba(163, 39, 31, 0.3);

  /* type */
  --font: "Manrope", "Segoe UI", system-ui, sans-serif;

  /* shape + depth */
  --radius-card: 22px;
  --radius-tile: 16px;
  --radius-pill: 999px;
  --shadow: 0 22px 44px -26px rgba(0, 60, 14, 0.24);
  --shadow-sm: 0 12px 26px -18px rgba(0, 60, 14, 0.16);

  --container: 1280px;
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
h1 { font-size: clamp(2.3rem, 4.2vw, 3rem); font-weight: 800; letter-spacing: -0.03em; }
/* French headline is trimmed a step so "Inspection Et Diagnostic" fits one line beside the 56% hero image */
.h1--fr { font-size: clamp(2.2rem, 4vw, 2.85rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0; max-width: 68ch; }
a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--grn-3); color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
input, select, textarea { caret-color: var(--accent); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--grn-3); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--grn-4); }
::-webkit-scrollbar-track { background: transparent; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--radius-pill);
  transition: top 0.2s ease-out;
}
.skip-link:focus { top: 16px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 24px;
  border: 1.5px solid var(--line); border-radius: var(--radius-pill);
  font: 600 1rem/1 var(--font); letter-spacing: 0.01em;
  color: var(--ink); background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--grn-4); box-shadow: var(--shadow); }
.btn .btn-circle {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; margin: -6px -10px -6px 0;
  border-radius: 50%; background: var(--ink); color: #fff; flex: 0 0 auto;
}
/* the sprite icons (arrow, check, …) draw as strokes, never fills */
.btn-circle svg { stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* …except the arrow glyphs, which are solid half-triangles */
.btn-circle use[href="#i-arrow"],
.btn-circle use[href="#i-arrow-l"] { fill: currentColor; stroke: none; }
.btn--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--dark:hover { background: #0A4A1C; border-color: #0A4A1C; }
.btn--dark .btn-circle { background: var(--accent-soft); }
/* white pill + Dark-Green arrow circle: the hero "Schedule Inspection" CTA */
.btn--cta .btn-circle { background: var(--accent); color: #fff; }
.btn--lg { padding: 16px 28px; font-size: 1.05rem; }
.btn--lg .btn-circle { width: 38px; height: 38px; margin: -7px -11px -7px 0; }
.contact-form .btn { white-space: normal; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  height: 84px; gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand:hover { text-decoration: none; color: var(--ink); }
.brand-logo { width: 36px; height: 36px; }
.brand-name { font: 800 1.1rem/1.1 var(--font); letter-spacing: -0.02em; }

.main-nav {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 34px;
}
.main-nav a { font: 600 0.95rem/1 var(--font); color: var(--ink-2); text-decoration: none; padding: 6px 2px; }
.main-nav a:hover { color: var(--accent); }
.main-nav a[aria-current="page"] { color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 14px; }
/* EN/FR language toggle — the active language is filled brand green, the other is a quiet option */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1.5px solid var(--line); border-radius: var(--radius-pill);
  background: #fff; padding: 3px;
  transition: border-color 0.18s ease;
}
.lang-toggle:hover { border-color: var(--grn-4); }
.lang-toggle__opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 34px; padding: 0 10px; border-radius: var(--radius-pill);
  font: 700 0.85rem/1 var(--font); color: var(--ink-2);
  transition: background 0.18s ease, color 0.18s ease;
}
.lang-toggle__opt:hover { background: var(--grn-1); color: var(--accent); text-decoration: none; }
.lang-toggle__opt.is-active { background: var(--accent); color: #fff; }
.lang-toggle__opt.is-active:hover { background: var(--accent); color: #fff; }

.nav-toggle {
  display: none; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-pill);
  padding: 10px 18px; font: 600 0.9rem/1 var(--font); color: var(--ink);
}

/* ---------- hero ---------- */
.hero { padding: 72px 0 96px; }
.hero-flex { display: flex; align-items: center; gap: 36px; }
.hero-copy { flex: 1 1 44%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.hero-copy h1 { margin: 0; overflow-wrap: break-word; hyphens: auto; }
.hl { color: var(--accent-soft); }
.city-rotator { transition: opacity 0.22s ease; }
.city-rotator.is-fading { opacity: 0; }
.city-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 22px;
}
.city-name {
  font: 600 0.82rem/1 var(--font);
  color: var(--ink-3);
  background: var(--grn-1);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  transition: background 0.18s ease, color 0.18s ease;
}
.city-name.is-current { color: var(--grn-5); background: var(--grn-3); }
.hero-copy .lede { margin-top: 24px; font-size: 1.1rem; color: var(--ink-2); max-width: 48ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.hero-figure { flex: 1 1 56%; min-width: 0; }
.hero-figure img { margin: 0 auto; height: auto; }

/* ---------- sections ---------- */
.section { padding: 96px 0; }
.section--tight { padding: 72px 0; }
.section--lav { background: var(--grn-1); }
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head--center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head h2 { margin: 0; }
.section-head p { margin-top: 14px; font-size: 1.05rem; color: var(--ink-2); }

/* ---------- services ---------- */
.svc-list {
  display: flex; flex-wrap: wrap; gap: 26px;
  align-items: stretch;
}
.svc-card {
  flex: 1 1 calc(33.333% - 18px);
  min-width: 0;
  background: var(--bg); border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm); padding: 30px 28px;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.svc-icon {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 18px;
  background: var(--grn-2); color: var(--ink);
}
.svc-card h3 { margin-top: 20px; font-size: 1.15rem; line-height: 1.25; }
.svc-card p { margin-top: 10px; font-size: 0.95rem; color: var(--ink-2); }
.svc-card p + p { margin-top: 8px; }

/* full-width summary card — the deliverable, anchored at the bottom of each panel */
.svc-card--wide {
  flex: 1 1 100%;
  display: flex; align-items: center; gap: 26px;
  background: var(--grn-1);
  box-shadow: var(--shadow);
  padding: 30px 32px;
}
.svc-card--wide .svc-icon { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 20px; background: var(--grn-3); }
.svc-card--wide .svc-wide-copy { flex: 1 1 auto; min-width: 0; }
.svc-card--wide h3 { margin-top: 0; font-size: 1.25rem; }

/* closing row pair — the report card and the certification card share the bottom row
   as equal wash bands. Both cards keep the wide-band anatomy (icon tile on the left,
   copy beside it, vertically centered), so the icons sit at the midpoint of each
   card's left side. The certification card ends with its two badges at the right of
   the row — no divider, no bottom band. */
.svc-card--split, .svc-card--cert { flex: 1 1 calc(50% - 13px); }

/* "View a sample report" — a quiet, confident link inside the report card */
.svc-report-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px;
  font: 700 0.92rem/1 var(--font); letter-spacing: 0.01em;
  color: var(--grn-5); text-decoration: none;
  padding: 8px 14px; margin-left: -14px; /* optically align label with card text */
  border-radius: 999px;
  transition: background 0.18s ease-out, transform 0.18s ease-out;
}
.svc-report-link svg { stroke: currentColor; fill: currentColor; stroke-width: 0; }
.svc-report-link:hover { background: rgba(14, 92, 46, 0.1); transform: translateX(2px); }
.svc-report-link:focus-visible { outline: 2px solid var(--grn-5); outline-offset: 2px; }
.svc-card--cert .svc-cert-badges {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  flex: 0 0 auto;
}
.svc-card--cert .svc-cert-badges img { height: 104px; width: auto; }

/* the "not included" panel — red wash cards, red tiles, red headings */
.svc-card--no { background: var(--red-1); box-shadow: none; }
.svc-card--no:hover { transform: translateY(-4px); box-shadow: var(--red-shadow); }
.svc-card--no .svc-icon { background: var(--red-2); color: var(--red-ink); }
.svc-card--no h3 { color: var(--red-ink); }
.svc-card--no.svc-card--wide { background: var(--red-1); }
.svc-card--no.svc-card--wide .svc-icon { background: var(--red-2); }

/* services selector tabs (what's included / what's NOT included) */
.svc-tabs {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 12px;
  margin: 0 auto 48px;
}
.svc-tab {
  font: 700 1.02rem/1 var(--font);
  color: var(--ink-2);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 15px 30px;
  cursor: pointer;
  transition: background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out;
}
.svc-tab:hover { border-color: var(--grn-4); color: var(--ink); }
.svc-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: var(--shadow);
}
.svc-tab--no:hover { border-color: var(--red-3); }
.svc-tab--no.is-active {
  background: var(--red);
  border-color: var(--red);
  box-shadow: var(--red-shadow);
}
.svc-panel { animation: svc-fade 0.3s ease-out; }
@keyframes svc-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .svc-panel { animation: none; } }

/* ---------- estimate calculator ---------- */
.calc-tabs {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 12px;
  margin: 0 auto 48px;
}
.calc-tab {
  font: 700 1.02rem/1 var(--font);
  color: var(--ink-2);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 15px 30px;
  cursor: pointer;
  transition: background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out;
}
.calc-tab:hover { border-color: var(--grn-4); color: var(--ink); }
.calc-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: var(--shadow);
}
.calc-card {
  background: var(--bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 44px 40px;
}
.calc-panel { animation: svc-fade 0.3s ease-out; }

/* centered tab (Commercial) */
.calc-simple { text-align: center; max-width: 600px; margin: 0 auto; }
.calc-simple h3, .calc-main h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.calc-price { margin-top: 14px; font: 800 2.5rem/1.1 var(--font); letter-spacing: -0.02em; color: var(--accent); }
.calc-price--soft { font-size: 1.5rem; color: var(--ink); }
.calc-desc { margin-top: 16px; color: var(--ink-2); }
.calc-simple .btn { margin-top: 30px; }

/* residential two-column */
.calc-res { display: flex; align-items: stretch; gap: 40px; }
.calc-main { flex: 1 1 58%; min-width: 0; }
.calc-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.calc-price-block { flex: 0 0 auto; text-align: right; }
.calc-start {
  font: 600 0.78rem/1 var(--font);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
.calc-head .calc-price { margin-top: 6px; font-size: 1.7rem; }

.calc-areas { margin-top: 26px; }
.calc-label { font: 600 0.78rem/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.calc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.calc-chips li { font: 600 0.88rem/1 var(--font); color: var(--ink-2); background: var(--grn-1); border-radius: var(--radius-pill); padding: 8px 14px; }

/* grouped quantity tiles — one per add-on, side by side */
.calc-counts { display: flex; gap: 20px; margin-top: 26px; }
.calc-count {
  flex: 1 1 50%; min-width: 0;
  background: var(--grn-1);
  border-radius: var(--radius-tile);
  padding: 20px;
}
.calc-count-name { font: 700 1rem/1.3 var(--font); color: var(--ink); }
.calc-stepper {
  display: inline-flex; align-items: center;
  margin-top: 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg);
}
.calc-step {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--accent);
  font: 700 1.25rem/1 var(--font);
  transition: background 0.16s ease, color 0.16s ease;
}
.calc-step:first-child { border-radius: 999px 0 0 999px; }
.calc-step:last-child { border-radius: 0 999px 999px 0; }
.calc-step:hover { background: var(--grn-1); color: var(--accent-deep); }
.calc-step:disabled { color: var(--ink-3); opacity: 0.45; cursor: not-allowed; }
.calc-step:disabled:hover { background: transparent; color: var(--ink-3); }
.calc-num {
  font: 800 1.25rem/1 var(--font); color: var(--ink);
  min-width: 42px; text-align: center;
}
.calc-count-hint { margin-top: 10px; font-size: 0.85rem; color: var(--ink-2); }
.calc-count-hint strong { color: var(--accent); }

/* summary column — stretches to match the main column, total + CTA pinned to the bottom */
.calc-summary {
  flex: 1 1 42%; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--grn-1);
  border-radius: var(--radius-card);
  padding: 26px 24px;
}
.calc-summary .calc-label { margin-bottom: 14px; }
.calc-summary-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0;
  font-size: 0.93rem; color: var(--ink-2);
  border-bottom: 1px solid var(--grn-3);
}
.calc-summary-row span:last-child { color: var(--ink); font-weight: 700; white-space: nowrap; }
.calc-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: 16px; padding-top: 16px; padding-bottom: 26px;
  border-top: 2px solid var(--accent);
}
.calc-total span:first-child { font: 700 1rem/1.2 var(--font); color: var(--ink); }
.calc-total #sum-total { font: 800 1.9rem/1 var(--font); letter-spacing: -0.02em; color: var(--accent); }
.calc-total-value { display: inline-flex; align-items: baseline; white-space: nowrap; }
.calc-tax { font: 700 0.95rem/1.2 var(--font); color: var(--ink-3); white-space: nowrap; margin-left: 6px; }
.calc-summary .btn { margin-top: auto; width: 100%; justify-content: center; }

.calc-disclaimer { margin: 24px auto 0; max-width: 760px; text-align: center; font-size: 0.85rem; color: var(--ink-3); }

/* French calculator copy uses sentence-case labels and "À partir de" (no uppercase transform) */
html[lang="fr"] .calc-start,
html[lang="fr"] .calc-label { text-transform: none; }

/* ---------- about ---------- */
.about-flex { display: flex; align-items: center; gap: 64px; }
.about-figure { flex: 1 1 44%; min-width: 0; }
.about-figure img { margin: 0 auto; }
.about-copy { flex: 1 1 56%; min-width: 0; }
.about-sub { font: 700 1.05rem/1.5 var(--font); color: var(--accent); margin-top: 16px; }
.about-copy p { color: var(--ink-2); font-size: 1rem; margin-top: 18px; }
.about-actions { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- testimonials ---------- */
.testi-flex { display: flex; align-items: center; gap: 56px; }
.testi-head { flex: 0 0 30%; min-width: 0; }
.testi-head p { margin-top: 14px; color: var(--ink-2); }
.testi-arrows { display: flex; gap: 12px; margin-top: 30px; }
.testi-arrows button {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink); color: #fff; border: 0;
  transition: transform 0.16s ease, background 0.16s ease;
}
.testi-arrows button:hover { background: var(--accent); transform: translateY(-2px); }
.testi-carousel { flex: 1 1 70%; min-width: 0; }
.testi-scroll { display: flex; gap: 22px; overflow-x: auto; padding: 6px 6px 18px; scrollbar-width: none; }
.testi-scroll::-webkit-scrollbar { display: none; }
.t-card {
  flex: 0 0 320px;
  background: var(--bg); border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm); padding: 30px;
}
.t-card blockquote { margin: 0; font-size: 1rem; color: var(--ink-2); }
.t-who { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.t-avatar {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--grn-2); color: var(--accent); font: 800 0.95rem/1 var(--font);
}
.t-name { font: 700 0.95rem/1.2 var(--font); color: var(--ink); }
.t-meta { font-size: 0.82rem; color: var(--ink-3); margin-top: 3px; }
.sample-note { margin-top: 6px; font-size: 0.82rem; color: var(--ink-3); font-style: italic; }

/* ---------- signup bar ---------- */
.signup-section { padding: 48px 0 96px; }
.signup-bar { max-width: 760px; margin: 0 auto; text-align: center; }
.signup-form { display: flex; gap: 12px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-pill); padding: 8px 8px 8px 28px; box-shadow: var(--shadow); }
.signup-form input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; outline: none;
  font: 500 1rem/1.4 var(--font); color: var(--ink);
}
.signup-form input::placeholder { color: var(--ink-3); }
.signup-ok { display: none; margin-top: 20px; font: 700 1rem/1.5 var(--font); color: var(--accent-deep); }
.signup-ok.show { display: block; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 30px 0 36px; }
.footer-flex { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-nav { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-nav a { font: 600 0.95rem/1 var(--font); color: var(--ink-2); }
.footer-nav a:hover { color: var(--accent); }
.socials { display: flex; gap: 12px; }
.socials a {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--ink); color: #fff;
  transition: background 0.16s ease, transform 0.16s ease;
}
.socials a:hover { background: var(--accent); transform: translateY(-2px); text-decoration: none; }
.footer-legal { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--ink-3); }

/* ---------- back to top ---------- */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 46px; height: 46px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0.25s, background 0.18s ease-out;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent-deep); }
.to-top:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.to-top svg { stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity 0.01s; transform: none; }
  .to-top.is-visible { transform: none; }
}

/* ---------- subpages ---------- */
.page-hero { padding: 72px 0 48px; }
.page-hero .lede { margin-top: 16px; font-size: 1.1rem; color: var(--ink-2); max-width: 62ch; }

/* timeline */
.timeline { display: flex; flex-direction: column; gap: 22px; max-width: 860px; }
.timeline-item {
  display: flex; gap: 24px; align-items: flex-start;
  background: var(--bg); border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm); padding: 28px 30px;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.timeline-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.timeline-num {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--grn-2); color: var(--accent);
  font: 800 1.05rem/1 var(--font);
}
.timeline-item h3 { margin: 0; }
.timeline-item p { margin-top: 8px; color: var(--ink-2); font-size: 1rem; }

/* when-to-inspect chip grid (guide page) */
.when-grid { display: flex; flex-wrap: wrap; gap: 12px; max-width: 900px; }
.when-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm); padding: 10px 18px;
  font-size: 0.92rem; font-weight: 600; color: var(--ink);
}
.when-chip svg { stroke: var(--accent); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* guide page */
.guide-when { padding: 56px 0 60px; }
.guide-when .section-head { max-width: 760px; margin-bottom: 36px; }
.guide-when .when-grid { margin-top: 4px; }

.guide-block + .guide-block { margin-top: 64px; }
.guide-block-title { font-size: 1.45rem; font-weight: 800; margin: 0; }
.guide-block-sub { margin-top: 8px; color: var(--ink-2); font-size: 1rem; }
.guide-block .timeline { margin-top: 28px; }

/* roadmap steps (guide page) */
.timeline-item h4 { margin: 0; font-size: 1.12rem; }

/* guide page CTAs */
.guide-cta { display: flex; justify-content: flex-start; margin-top: 36px; }
.guide-cta--end { margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--line); }

/* "you are here" — solid brand step (guide page inspection steps) */
.timeline-item--here { position: relative; background: var(--accent); box-shadow: 0 24px 44px -24px rgba(0, 40, 10, 0.55); }
.timeline-item--here h4 { color: #fff; }
.timeline-item--here p { color: #C7DCCE; }
.timeline-item--here .timeline-num { background: rgba(255, 255, 255, 0.16); color: #fff; }
.timeline-item--here::after {
  content: attr(data-here);
  position: absolute; top: 22px; right: 24px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--grn-3); color: var(--accent-deep);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
}
@media (max-width: 720px) {
  .timeline-item--here::after { position: static; display: inline-block; margin-bottom: 10px; }
}

/* safety / step cards */
.card-flex { display: flex; flex-wrap: wrap; gap: 24px; }
.card-flex .card { flex: 1 1 calc(33.333% - 16px); min-width: 240px; }
.card {
  background: var(--bg); border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
  padding: 30px;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card h3 { margin-top: 18px; }
.card p { margin-top: 8px; font-size: 0.95rem; color: var(--ink-2); }
.icon-tile {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: var(--radius-tile);
  background: var(--grn-2); color: var(--accent);
}

.callout {
  display: flex; gap: 22px; align-items: flex-start;
  background: var(--ink); color: #fff; border-radius: var(--radius-card);
  padding: 34px 36px; margin-top: 40px;
  box-shadow: 0 24px 48px -24px rgba(0, 60, 14, 0.5);
}
.callout .big-icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: var(--radius-tile); background: var(--grn-3); color: var(--ink); flex: 0 0 auto; }
.callout h3 { color: #fff; font-size: 1.3rem; font-weight: 700; }
.callout p { color: #BFD4C6; margin-top: 8px; }
.callout .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }

/* contact page — single-column form, info cards as a band below */
.panel.contact-form { max-width: 1040px; margin: 0 auto; }
.contact-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 28px; }
.contact-info .info-card { flex: 1 1 250px; max-width: 340px; min-width: 0; }

/* contact page — “what happens next” stepper */
.process-steps { display: flex; align-items: stretch; justify-content: center; }
.process-steps .stepper-card {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--bg); border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
  padding: 26px 20px 28px;
}
.process-steps .stepper-card .icon-tile { width: 56px; height: 56px; border-radius: var(--radius-tile); }
.process-steps .stepper-card h3 { margin-top: 16px; font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.process-steps .stepper-card p { margin-top: 8px; font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); }
.process-steps .step-arrow {
  flex: 0 0 28px; align-self: center;
  display: grid; place-items: center;
  color: var(--grn-5);
}
.process-steps .step-arrow svg { width: 20px; height: 20px; }
.process-steps .stepper-card + .step-arrow { margin-right: 2px; }
.panel { background: var(--bg); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 40px; }
.form-row { display: flex; gap: 18px; }
.form-row .form-field { flex: 1 1 0; }
.form-field { margin-bottom: 22px; position: relative; }
.form-field label { display: block; font: 700 0.9rem/1 var(--font); color: var(--ink); margin-bottom: 9px; }
.form-field small { display: block; margin-top: 7px; font-size: 0.82rem; color: var(--ink-2); }
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid var(--line); border-radius: var(--radius-tile);
  font: 500 1rem/1.4 var(--font); color: var(--ink); background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent-soft); box-shadow: 0 0 0 4px var(--grn-2);
}
.check-flex { display: flex; flex-wrap: wrap; gap: 10px; }
fieldset.form-field { margin-top: 28px; margin-bottom: 28px; }
fieldset.form-field legend { line-height: 1.3; }
/* compact variant for long option lists (e.g. the site-condition factors) */
.factor-flex { gap: 8px; }
.factor-flex .check-chip { padding: 7px 13px; font-size: 0.85rem; line-height: 1.35; }
.check-chip { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: var(--radius-pill); background: #fff; border: 1.5px solid var(--line); font: 600 0.9rem/1.3 var(--font); color: var(--ink); cursor: pointer; transition: all 0.16s ease; }
.check-chip input { position: absolute; opacity: 0; pointer-events: none; }
.check-chip:has(input:checked) { background: var(--grn-2); border-color: var(--accent-soft); color: var(--accent); }
.form-success { display: none; margin-top: 24px; padding: 22px; border-radius: var(--radius-tile); background: var(--grn-1); }
.form-success.show { display: block; }
.form-success h3 { font-size: 1.1rem; }

/* address autocomplete (OSM via Photon — free, no API key) */
.addr-ac {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: 40;
  max-height: 264px; overflow-y: auto;
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 6px;
}
.addr-ac-item { display: block; width: 100%; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.addr-ac-item.is-active, .addr-ac-item:hover { background: var(--grn-1); }
.addr-ac-main { display: block; font: 600 0.95rem/1.35 var(--font); color: var(--ink); }
.addr-ac-sub { display: block; font: 400 0.83rem/1.35 var(--font); color: var(--ink-3); }
.form-success p { margin-top: 6px; color: var(--ink-2); font-size: 0.95rem; }
.info-card { display: flex; gap: 16px; align-items: center; background: var(--bg); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 24px; }
.info-card h3 { font-size: 1.05rem; font-weight: 700; }
.info-card p { margin-top: 4px; color: var(--ink-2); font-size: 0.95rem; word-break: break-word; }
.info-card .hours-note { margin-top: 6px; font-size: 0.82rem; line-height: 1.45; color: var(--ink-3); }
.info-card .icon-tile { width: 48px; height: 48px; flex: 0 0 auto; }

/* service-area */
.area-flex { display: flex; align-items: flex-start; gap: 28px; }
.map-plate { flex: 1 1 56%; min-width: 0; background: var(--bg); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 20px; }
.map-plate figcaption { margin-top: 14px; text-align: center; font: 600 0.82rem/1 var(--font); letter-spacing: 0.12em; color: var(--ink-3); }
.area-note { flex: 1 1 44%; min-width: 0; background: var(--bg); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 32px; }
.area-note h3 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 700; }
.area-note h3 svg { color: var(--accent); }
.area-note p { margin-top: 12px; color: var(--ink-2); }
.area-note ul { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.area-note li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; color: var(--ink-2); }
.area-note li svg { flex: 0 0 auto; color: var(--accent); margin-top: 3px; }

/* service-area map (homepage) */
.map-flex { display: flex; align-items: center; gap: 56px; }
.map-head { flex: 0 0 34%; min-width: 0; }
.map-lead { margin-top: 16px; font: 700 1.05rem/1.5 var(--font); color: var(--accent); }
.map-head p { color: var(--ink-2); margin-top: 12px; }
.map-actions { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }
.map-frame {
  flex: 1 1 66%; min-width: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--grn-1);
  aspect-ratio: 16 / 10;
  min-height: 360px;
}
.map-frame .leaflet-container { width: 100%; height: 100%; font-family: var(--font); background: var(--grn-1); }
.map-fallback { display: grid; place-items: center; height: 100%; margin: 0; color: var(--ink-3); font-size: 0.9rem; text-align: center; padding: 24px; }
/* city name chips on the Leaflet map — match the hero city pills */
.map-city-label {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 9px; font: 600 0.72rem/1 var(--font); color: var(--accent);
  box-shadow: 0 4px 12px -6px rgba(0, 60, 14, 0.3);
}
.map-city-label::before { display: none; }

/* FAQ accordion */
.faq-wrap { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-tile);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item:hover { border-color: var(--grn-4); }
.faq-item[open] { border-color: var(--grn-4); box-shadow: var(--shadow-sm); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 24px;
  font: 700 1.02rem/1.45 var(--font); color: var(--ink);
  transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: -4px; border-radius: var(--radius-tile); }
.faq-chev {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--grn-2); color: var(--accent);
  transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease;
}
.faq-item[open] .faq-chev { transform: rotate(180deg); background: var(--accent); color: #fff; }
.faq-body { padding: 2px 24px 24px; color: var(--ink-2); font-size: 0.98rem; }
.faq-body p + p { margin-top: 10px; }
.faq-body strong { color: var(--ink); font-weight: 700; }
.faq-wrap + .callout { margin-top: 48px; }
@media (prefers-reduced-motion: reduce) { .faq-chev { transition: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .hero-flex, .about-flex, .testi-flex, .map-flex, .contact-flex, .area-flex { flex-direction: column; align-items: stretch; }
  .hero-copy, .hero-figure, .about-figure, .about-copy, .testi-head, .testi-carousel, .testi-scroll, .map-head, .map-frame, .contact-form, .contact-info, .map-plate, .area-note { flex: 1 1 auto; width: 100%; }
  .hero { padding: 48px 0 72px; }
  .svc-card { flex: 1 1 calc(50% - 13px); }
  .calc-res { flex-direction: column; align-items: stretch; }
  .calc-main, .calc-summary { flex: 1 1 auto; width: 100%; }
  .calc-card { padding: 32px 24px; }
  .main-nav {
    position: absolute; left: auto; right: 24px; top: calc(100% + 10px); transform: none;
    flex-direction: column; align-items: flex-start;
    gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card);
    box-shadow: var(--shadow); padding: 14px; min-width: 240px;
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 10px 12px; width: 100%; border-radius: 16px; }
  .main-nav a:hover { background: var(--grn-1); }
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 680px) {
  .svc-card { flex: 1 1 100%; }
  /* mobile tap targets: 44px minimum (WCAG 2.5.8 / platform guidelines) */
  .check-chip,
  .factor-flex .check-chip { min-height: 44px; }
  .calc-step { min-width: 44px; min-height: 44px; }
  .leaflet-control-attribution a { padding: 5px 2px; }
  .svc-card--wide { flex-direction: column; align-items: flex-start; }
  .calc-counts { flex-direction: column; }
  .calc-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .calc-price-block { text-align: left; }
  .card-flex .card { flex: 1 1 100%; min-width: 0; }
  .contact-info .info-card { flex: 1 1 100%; max-width: none; }
  .process-steps { flex-direction: column; }
  .process-steps .stepper-card { width: 100%; }
  .process-steps .step-arrow { flex: 0 0 auto; margin: 0; }
  .process-steps .step-arrow svg { transform: rotate(90deg); }
  .process-steps .step-arrow { padding: 2px 0; }
  .contact-info { justify-content: flex-start; }
  .form-row { flex-direction: column; }
  .signup-section { padding: 24px 0 72px; }
  .t-card { flex-basis: 85%; }
  .timeline-item { flex-direction: column; gap: 14px; }
  .callout { flex-direction: column; }
  .section { padding: 72px 0; }

  /* ---- mobile density pass: tighter rhythm, same legibility (body text stays 16px) ---- */
  .section { padding: 48px 0; }
  .hero { padding: 40px 0 56px; }
  .page-hero { padding: 40px 0 32px; }
  .container { padding: 0 18px; }

  /* headings one visible step down, still clearly hierarchical */
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.5rem; }
  .hero-copy .lede,
  .page-hero .lede { font-size: 1rem; margin-top: 14px; }

  /* service cards: less padding + smaller tiles, text unchanged (15.2px, ≥ WCAG) */
  .svc-card { padding: 20px 18px; }
  .svc-list { gap: 14px; }
  .svc-icon { width: 44px; height: 44px; border-radius: 14px; }
  .svc-icon svg { width: 22px; height: 22px; }
  .svc-card h3 { margin-top: 12px; font-size: 1.02rem; }
  .svc-card--wide { gap: 14px; padding: 20px 18px; }
  .svc-card--wide .svc-icon { width: 44px; height: 44px; }
  .svc-report-link { margin-top: 10px; }
  .svc-cert-badges { gap: 10px; }
  .svc-cert-badges img { height: 72px; }
  .svc-tabs { margin-bottom: 28px; gap: 8px; }
  .svc-tab { font-size: 0.92rem; padding: 11px 16px; }

  /* calculator */
  .calc-card { padding: 24px 18px; }
  .calc-card--summary, .calc-summary { padding: 24px 18px; }
  .calc-tab { font-size: 0.95rem; padding: 12px 14px; }

  /* timeline / step cards (guide + roadmap) */
  .timeline { gap: 14px; }
  .timeline-item { padding: 20px 18px; }
  .timeline-num { width: 44px; height: 44px; font-size: 0.95rem; }
  .guide-block + .guide-block { margin-top: 44px; }
  .guide-cta--end { margin-top: 44px; padding-top: 32px; }
  .when-chip { padding: 8px 14px; font-size: 0.88rem; }

  /* FAQ rows */
  .faq-item summary { padding: 15px 16px; font-size: 0.98rem; }
  .faq-body { padding: 2px 16px 18px; font-size: 0.95rem; }
  .faq-wrap { gap: 10px; }

  /* contact form + info cards */
  .panel { padding: 24px 18px; }
  .form-field { margin-bottom: 16px; }
  .form-field label { margin-bottom: 6px; }
  fieldset.form-field { margin-top: 20px; margin-bottom: 20px; }
  input[type="text"], input[type="tel"], input[type="email"], select, textarea { padding: 11px 14px; }
  .check-flex { gap: 8px; }
  .check-chip { padding: 9px 12px; }
  .factor-flex .check-chip { padding: 9px 12px; font-size: 0.85rem; }
  .contact-info { gap: 10px; margin-top: 20px; }
  .info-card { padding: 16px; }
  .info-card .icon-tile { width: 40px; height: 40px; }

  /* stepper + testimonial + callout */
  .process-steps .stepper-card { padding: 18px 14px; }
  .card { padding: 20px; }
  .card h3 { margin-top: 12px; }
  .card-flex { gap: 14px; }
  .callout { padding: 22px; }
  .t-card { padding: 20px; }

  /* footer + back-to-top keep clear of the tighter bottom edge */
  .signup-section { padding: 20px 0 56px; }
}