/* ============================================
   Contera Pest Control — Site Stylesheet
   Monochrome / minimalist, matched to brand logo
   ============================================ */

/* Archivo/Inter are loaded from a <link rel="stylesheet"> in each page's
   <head> (with a <link rel="preconnect"> ahead of it), not from an @import
   here. An @import inside a stylesheet can only be discovered after the
   browser has already fetched and started parsing this file, which delays
   font discovery by a full extra round trip versus a <link> the browser
   sees immediately while parsing the HTML -- widening the window in which
   text can be showing in a fallback font and then reflow when the real
   font swaps in. See js/main.js's hero-heading init for how that reflow
   used to collide with the word-by-word reveal animation. */

:root {
  --black: #0a0a0a;
  --near-black: #141414;
  --ink: #2b2b2b;
  --white: #ffffff;
  --gray-900: #1c1c1c;
  --gray-700: #454545;
  --gray-500: #6f6f6f;
  --gray-400: #9a9a9a;
  --gray-300: #cfcfcf;
  --gray-200: #e3e3e1;
  --gray-100: #f2f2f0;
  --bg: #ffffff;
  --bg-alt: #f5f5f3;
  --border: #e0e0dd;
  --radius: 3px;
  --shadow: 0 2px 14px rgba(10, 10, 10, 0.06);
  --shadow-lg: 0 16px 40px rgba(10, 10, 10, 0.14);
  --max: 1160px;
  --header-height: 73px;
  font-size: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Visible keyboard focus everywhere, including inside dark sections where
   the default browser outline is hard to see against the black background. */
:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.section.dark :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.photo-feature :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--white);
}

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Archivo", "Inter", sans-serif;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

/* Balances line-wrapping so headings don't end on an awkward one-word final
   line; no-op in browsers that don't yet support text-wrap: balance. */
h1 { font-size: clamp(2.1rem, 4.2vw, 3.1rem); text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); text-wrap: balance; }
h3 { font-size: 1.2rem; font-weight: 700; }

p { margin: 0 0 1em; color: var(--gray-700); }

a { color: var(--ink); text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 76px 0; }
.section.alt { background: var(--bg-alt); }
.section.dark {
  background: var(--black);
  color: var(--white);
}
.section.dark h2, .section.dark h3 { color: var(--white); }
.section.dark p { color: rgba(255,255,255,0.72); }

.eyebrow {
  display: inline-block;
  font-family: "Archivo", sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 12px;
}
.section.dark .eyebrow { color: rgba(255,255,255,0.55); }

.section-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--radius);
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--black); color: var(--white); border-color: var(--black); }
.btn-primary:hover { background: var(--near-black); box-shadow: var(--shadow-lg); }
.btn-outline { background: transparent; border-color: var(--black); color: var(--black); }
.btn-outline:hover { background: var(--black); color: var(--white); }
.btn-outline-light { background: transparent; border-color: rgba(255,255,255,0.55); color: var(--white); }
.btn-outline-light:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.btn-block { width: 100%; justify-content: center; }

/* Header / Nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  width: 100%;
}
.brand { display: flex; align-items: center; }
.brand img { height: 52px; width: auto; display: block; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a.active { border-color: var(--black); }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.lang-switch {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: "Archivo", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.lang-switch a, .lang-switch .lang-current { color: var(--gray-400); padding: 2px 1px; }
.lang-switch a:hover { color: var(--black); }
.lang-switch .lang-current { color: var(--black); }
.lang-switch .sep { color: var(--gray-300); }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--ink);
}

@media (max-width: 860px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    border-bottom: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .nav-links.open {
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 14px 24px; border-bottom: 1px solid var(--border); min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
  .nav-toggle { display: flex; }
  /* Below the mobile breakpoint the header keeps only the logo, the EN/FR
     switch and the hamburger — the phone number and full quote button are
     already available in the fixed mobile CTA bar, so showing them twice
     just crowds the header. */
  .nav-cta .header-phone,
  .nav-cta .btn-primary { display: none; }
}

/* Prevent the page from scrolling behind the open mobile nav menu. */
body.nav-open-lock { overflow: hidden; }

/* Hero */
.hero {
  background: var(--black);
  color: var(--white);
  padding: 96px 0 104px;
  position: relative;
  overflow: hidden;
}
.hero .container { position: relative; z-index: 3; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.hero h1 { color: var(--white); margin-bottom: 18px; }
.hero p.lead { color: rgba(255,255,255,0.78); font-size: 1.1rem; max-width: 480px; }
.hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-badges {
  display: flex;
  gap: 26px;
  margin-top: 46px;
  flex-wrap: wrap;
}
.hero-badge { font-size: 0.85rem; color: rgba(255,255,255,0.75); display: flex; align-items: center; gap: 8px; }
.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--white); flex-shrink: 0; }

.hero-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
/* 18px keeps the same breathing room before the form that used to come
   from the now-removed availability sub-line (.hero-card p.sub); the rule
   stays in case a sub-line is ever reintroduced. */
.hero-card h3 { margin-bottom: 18px; }
.hero-card p.sub { font-size: 0.9rem; margin-bottom: 18px; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* Page header (non-home pages) */
.page-hero {
  background: var(--black);
  color: var(--white);
  padding: 62px 0 66px;
  text-align: center;
}
.page-hero h1 { color: var(--white); }
.page-hero p { color: rgba(255,255,255,0.75); max-width: 560px; margin: 0 auto; }
.breadcrumb { font-size: 0.82rem; color: rgba(255,255,255,0.5); margin-bottom: 14px; letter-spacing: 0.02em; }
/* About page only: the hero content group sat too close to the nav — extra
   top padding gives it more breathing room without making the hero taller
   than it needs to be. Internal spacing between the breadcrumb, heading and
   subtitle is untouched, so the whole group simply sits lower as one unit. */
.about-hero { padding-top: 98px; }
@media (max-width: 600px) { .about-hero { padding-top: 76px; } }
.breadcrumb a { color: rgba(255,255,255,0.72); }

/* Cards / grids */
.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gray-300); }
.card .icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--gray-100);
  border: 1px solid var(--border);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.card .icon svg { width: 24px; height: 24px; }
/* Stats strip */
.stats {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding: 36px 0;
}
.stat { text-align: center; flex: 1; min-width: 140px; }
.stat .num { font-family: "Archivo", sans-serif; font-size: 1.9rem; color: var(--white); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
.stat .label { font-size: 0.8rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }

/* Steps */
.steps { counter-reset: step; }
.step { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.step:last-child { border-bottom: none; }
.step .num {
  counter-increment: step;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
}
.step .num::before { content: counter(step); }

/* Forms */
.form-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 7px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  /* 16px minimum keeps iOS Safari from auto-zooming into the field on focus. */
  font-size: 16px;
  font-family: inherit;
  background: var(--bg-alt);
  color: var(--ink);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--black);
  background: var(--white);
}
.field textarea { resize: vertical; min-height: 110px; }
.field-radio-group { display: flex; gap: 20px; flex-wrap: wrap; }
.field-radio { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--ink); }
.field-radio input { width: auto; accent-color: var(--black); }
.form-note { font-size: 0.8rem; color: var(--gray-400); margin-top: 10px; }
.honeypot { position: absolute; left: -9999px; }
.form-success {
  display: none;
  background: var(--black);
  border: 1px solid var(--black);
  color: var(--white);
  padding: 16px 18px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-weight: 600;
}
.form-success.show { display: block; }

.form-required-note { font-size: 0.8rem; color: var(--gray-400); margin: -4px 0 20px; }
.req-mark { color: var(--black); margin-left: 2px; }
.field.invalid input,
.field.invalid select,
.field.invalid textarea {
  border-color: #c0392b;
  background: #fff6f5;
}
.field-error {
  display: block;
  color: #c0392b;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 6px;
}
.form-error {
  display: none;
  background: #fff6f5;
  border: 1px solid #c0392b;
  color: #8b241a;
  padding: 16px 18px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-weight: 600;
}
.form-error.show { display: block; }
.form-panel button[type="submit"][disabled] { opacity: 0.65; cursor: not-allowed; }

/* Info list */
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.info-list li:last-child { border-bottom: none; }
.info-list .ico { color: var(--ink); flex-shrink: 0; width: 22px; height: 22px; }
.info-list .ico svg { width: 20px; height: 20px; }

/* Location cards */
.loc-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: none;
}
.loc-card .loc-map {
  height: 140px;
  background:
    repeating-linear-gradient(45deg, var(--gray-100), var(--gray-100) 10px, var(--gray-200) 10px, var(--gray-200) 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.loc-card .loc-map svg { width: 30px; height: 30px; }
.loc-card .loc-body { padding: 22px; }
.loc-card h3 { margin-bottom: 6px; }
.loc-card .loc-tag {
  display: inline-block;
  font-family: "Archivo", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--black);
  color: var(--white);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.loc-card .loc-detail { font-size: 0.88rem; color: var(--gray-700); margin: 4px 0; }

/* Future-market variant (Ontario "Coming Soon") — same card shape, visually
   muted so it never reads as an already-active service territory. */
.loc-card-future { border-style: dashed; background: var(--bg-alt); }
.loc-card-future .loc-map { color: var(--gray-400); }
.loc-card-future .loc-tag-future {
  background: var(--white);
  color: var(--gray-500);
  border: 1px solid var(--gray-300);
}

/* Placeholder banner */
.placeholder-note {
  background: var(--gray-100);
  border: 1px dashed var(--gray-400);
  color: var(--gray-700);
  font-size: 0.85rem;
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 30px;
}

/* CTA band */
.cta-band {
  background: var(--black);
  color: var(--white);
  padding: 56px 0;
  text-align: center;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,0.75); }
.cta-band .btn-primary { background: var(--white); color: var(--black); border-color: var(--white); }
.cta-band .btn-primary:hover { background: var(--gray-200); }

/* Footer */
.site-footer {
  background: var(--black);
  color: rgba(255,255,255,0.7);
  padding: 56px 0 26px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { margin-bottom: 14px; }
.footer-brand img { height: 32px; width: auto; }
.site-footer h4 { color: var(--white); font-family: "Archivo", sans-serif; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: rgba(255,255,255,0.68); font-size: 0.9rem; }
.site-footer a:hover { color: var(--white); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 22px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
}

/* ============================================
   Scroll reveal
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.02s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.10s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.18s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.34s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.42s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================
   Animated hero
   ============================================ */
.hero { isolation: isolate; }
.hero.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-photo);
  background-size: cover;
  background-position: center 30%;
  filter: grayscale(0.55) contrast(1.15) brightness(0.8) saturate(1.1);
  z-index: 0;
}
.hero-photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.75) 26%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.5) 100%);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.hero-bg .grid-dots {
  position: absolute;
  inset: -10%;
  background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 26px 26px;
  animation: driftGrid 40s linear infinite;
}
@keyframes driftGrid {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-26px, -26px); }
}
.hero-bg .ring {
  position: absolute;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
}
.hero-bg .ring-1 { width: 520px; height: 520px; right: -160px; top: -160px; animation: floatSlow 14s ease-in-out infinite; }
.hero-bg .ring-2 { width: 320px; height: 320px; right: 60px; bottom: -140px; animation: floatSlow 11s ease-in-out infinite reverse; }
.hero-bg .ring-3 { width: 180px; height: 180px; left: 6%; bottom: 12%; animation: floatSlow 9s ease-in-out infinite; }
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-18px) scale(1.03); }
}
.hero-bg .mark {
  position: absolute;
  width: 46px;
  height: 46px;
  opacity: 0.16;
  animation: floatSlow 8s ease-in-out infinite;
}
.hero-bg .mark svg { width: 100%; height: 100%; stroke: var(--white); fill: none; stroke-width: 1.4; }
.hero-bg .mark-1 { top: 18%; left: 42%; animation-duration: 10s; }
.hero-bg .mark-2 { bottom: 20%; left: 30%; animation-duration: 12s; animation-delay: 1.5s; }

/* Kept invisible (but still laid out, so nothing shifts) until JS has
   finished wrapping each word in a .word span and adds .words-ready — this
   is what stops the heading from flashing as plain, fully-visible text for
   a frame before the word-by-word animation replaces it on every refresh.
   The noscript block below forces it visible when JS never runs. */
.hero h1.split-words { visibility: hidden; }
.hero h1.split-words.words-ready { visibility: visible; }
/* Each word rises from translateY(100%) -- a full line-height below its
   resting spot. Without a mask, that starting position sits inside the
   line below (or the subheading, on the last line), so while a word is
   still rising it visibly overlaps whatever is directly under it. The
   word-mask wrapper clips to the word's own box so the rise is contained
   there and never bleeds into neighboring lines/content. */
.hero h1 .word-mask { display: inline-block; overflow: hidden; }
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  animation: riseIn 0.7s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes riseIn {
  to { opacity: 1; transform: translateY(0); }
}
.hero-fade {
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp 0.7s ease forwards;
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg * { animation: none !important; }
  .hero h1 .word, .hero-fade { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ============================================
   Division cards (Services)
   ============================================ */
.division-card {
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--black);
  border-radius: var(--radius);
  padding: 46px;
  position: relative;
}
.division-card h2, .division-card h3 { color: var(--white); }
.division-card p { color: rgba(255,255,255,0.75); }
.division-card .price-note {
  font-family: "Archivo", sans-serif;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  margin-top: -8px;
}
/* Every division card's primary CTA gets a solid white fill for emphasis against the black card */
.division-card .btn-primary { background: var(--white); color: var(--black); border-color: var(--white); }
.division-card .btn-primary:hover { background: var(--gray-200); }

.season-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 28px 0;
}
@media (max-width: 760px) { .season-grid { grid-template-columns: repeat(2, 1fr); } }
.season-cell {
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius);
  padding: 16px;
}
.season-cell .season-name {
  font-family: "Archivo", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
}
.season-cell .season-target { font-size: 0.92rem; font-weight: 600; }

/* Compact seasonal timeline on the Home Protection page — a small, secondary
   companion to the program introduction, not a second full seasonal
   presentation (that stays on the homepage). Reuses .season-grid/.season-cell
   at a smaller max-width with a light-mode border/text override, since those
   were originally styled for a dark section. */
.seasonal-focus { max-width: 640px; margin: 36px auto 0; text-align: center; }
.seasonal-focus .season-grid { margin: 14px 0 0; }
.seasonal-focus .season-target { font-size: 0.82rem; font-weight: 500; }

.check-list { list-style: none; margin: 20px 0; padding: 0; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 0.94rem; }
.check-list svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; stroke: currentColor; }

/* ============================================
   Pest risk checker
   ============================================ */
.quiz-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: var(--shadow-lg);
  max-width: 760px;
  margin: 0 auto;
  overflow: hidden;
}
.quiz-progress {
  display: flex;
  gap: 6px;
  padding: 18px 26px 0;
}
.quiz-progress span {
  flex: 1;
  height: 3px;
  background: var(--gray-200);
  border-radius: 3px;
  overflow: hidden;
}
.quiz-progress span i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--black);
  transition: width 0.3s ease;
}
.quiz-step { padding: 30px 34px 34px; }
.quiz-step[hidden] { display: none; }
.quiz-step:not([hidden]) { animation: fadeUp 0.4s ease; }
.quiz-step .quiz-eyebrow {
  font-family: "Archivo", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 8px;
}
.quiz-step h3 { font-size: 1.35rem; margin-bottom: 20px; }
.quiz-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 560px) { .quiz-options { grid-template-columns: 1fr; } }
.quiz-option {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 16px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.quiz-option:hover { border-color: var(--black); transform: translateY(-1px); }
.quiz-option .opt-icon {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  background: var(--white); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.quiz-option .opt-icon svg { width: 16px; height: 16px; }
.quiz-back {
  margin-top: 22px;
  font-family: "Archivo", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.quiz-back:hover { color: var(--ink); }

.quiz-result .result-tag {
  display: inline-block;
  font-family: "Archivo", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--black);
  color: var(--white);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.quiz-result h3 { font-size: 1.5rem; }
.quiz-result .result-note { font-size: 0.88rem; color: var(--gray-500); margin-top: 14px; }
.quiz-result-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

/* ============================================
   Interactive map
   ============================================ */
#location-map, #home-service-map {
  width: 100%;
  height: 460px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--gray-100);
  margin-bottom: 40px;
  /* Let a one-finger drag on the map scroll the page vertically instead of
     panning the map, so the map never traps normal mobile page scrolling.
     Leaflet's two-finger drag/pinch (used for actually panning/zooming the
     map on touch) is unaffected. */
  touch-action: pan-y;
}
.map-caption {
  font-size: 0.84rem;
  color: var(--gray-500);
  margin: -28px 0 40px;
}
/* ============================================
   Division / page photography (temporary stock)
   ============================================ */
.division-photo {
  display: block;
  width: calc(100% + 92px);
  max-width: calc(100% + 92px);
  height: 340px;
  object-fit: cover;
  margin: -46px -46px 28px;
  filter: saturate(1.08) contrast(1.03);
  border-radius: var(--radius) var(--radius) 0 0;
}
.photo-credit {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.4);
  margin-top: -20px;
  margin-bottom: 24px;
}

.page-hero.has-photo {
  position: relative;
  color: var(--white);
  overflow: hidden;
}
.page-hero.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-photo);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.08) brightness(0.55);
  z-index: 0;
}
.page-hero.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.6));
  z-index: 0;
}
.page-hero.has-photo .container { position: relative; z-index: 1; }
.page-hero.has-photo h1 { color: var(--white); }
.page-hero.has-photo p { color: rgba(255,255,255,0.8); }
.page-hero.has-photo .breadcrumb, .page-hero.has-photo .breadcrumb a { color: rgba(255,255,255,0.6); }

.section-photo {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

/* Interactive seasonal coverage tabs (home page) */
.season-tabs { max-width: 880px; margin: 40px auto 0; }
.season-tab-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}
.season-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--gray-500);
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.season-tab-btn:hover { border-color: var(--gray-300); color: var(--ink); }
.season-tab-btn.active { background: var(--black); border-color: var(--black); color: var(--white); }
.season-tab-icon { width: 22px; height: 22px; }
.season-tab-icon svg { width: 100%; height: 100%; }

.season-tab-panel {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 44px;
  min-height: 168px;
}
.season-tab-content { display: none; }
.season-tab-content.active { display: block; animation: fadeUp 0.35s ease; }
.season-tab-tag {
  display: inline-block;
  font-family: "Archivo", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 12px;
}
.season-tab-content h3 { margin-bottom: 10px; }
.season-tab-content p { color: var(--gray-700); max-width: 620px; }

@media (max-width: 640px) {
  .season-tab-nav { grid-template-columns: repeat(2, 1fr); }
  .season-tab-panel { padding: 30px 24px; }
}

/* In The Field photo grid (home page) */
.field-photo {
  position: relative;
  display: block;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}
.field-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.03);
  transition: transform 0.5s ease;
}
.field-photo:hover img { transform: scale(1.05); }
.field-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 18px;
  background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.35) 65%, transparent 100%);
  color: var(--white);
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .field-photo { aspect-ratio: 16 / 10; }
}

/* ============================================
   Header phone (click-to-call)
   ============================================ */
.header-phone {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  white-space: nowrap;
}
.header-phone svg { width: 16px; height: 16px; flex-shrink: 0; }
.header-phone:hover { color: var(--black); }
@media (max-width: 640px) {
  .header-phone .phone-label { display: none; }
}

/* ============================================
   Trust strip
   ============================================ */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  margin: 0 auto;
  max-width: 920px;
}
.trust-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
}
.trust-pill svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--ink); }
.section.dark .trust-pill { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: var(--white); }
.section.dark .trust-pill svg { stroke: var(--white); }

/* ============================================
   Pests we cover
   ============================================ */
.pest-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
}
.pest-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}
.pest-chip svg { width: 17px; height: 17px; flex-shrink: 0; stroke: var(--ink); }

/* ============================================
   FAQ accordion
   ============================================ */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--gray-400);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { padding: 0 4px 20px; max-width: 640px; }

/* ============================================
   Legal pages (Privacy / Terms)
   ============================================ */
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-content h2 { margin-top: 2em; font-size: 1.2rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content ul { color: var(--gray-700); padding-left: 22px; }
.legal-content li { margin-bottom: 6px; }
.legal-notice {
  background: var(--gray-100);
  border: 1px dashed var(--gray-400);
  color: var(--gray-700);
  font-size: 0.86rem;
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 34px;
}

/* ============================================
   Trust bar (compact strip under hero)
   ============================================ */
.trust-bar {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  padding: 15px 0;
  position: relative;
}
.trust-bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
}
.trust-bar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
}
.trust-bar-item svg { width: 15px; height: 15px; flex-shrink: 0; stroke: var(--ink); }
@media (max-width: 760px) {
  .trust-bar-inner { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  /* Edge fade makes the horizontal scrollability of the trust bar visible
     at a glance, rather than relying on the user discovering it by chance. */
  .trust-bar::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 32px;
    background: linear-gradient(90deg, rgba(245,245,243,0), var(--bg-alt));
    pointer-events: none;
  }
}

/* Hero postal-code check form */
.hero-check-form { display: flex; gap: 8px; }
.hero-check-form input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  /* 16px minimum keeps iOS Safari from auto-zooming into the field on focus. */
  font-size: 16px;
  font-family: inherit;
  background: var(--bg-alt);
  color: var(--ink);
}
.hero-check-form input:focus { outline: none; border-color: var(--black); background: var(--white); }
.hero-check-form .btn { padding: 12px 20px; white-space: nowrap; flex-shrink: 0; }
@media (max-width: 420px) { .hero-check-form { flex-direction: column; } }

/* ============================================
   Editorial split sections (image + copy)
   ============================================ */
.split-section { padding: 90px 0; }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split-section.reverse .split-grid { direction: rtl; }
.split-section.reverse .split-grid > * { direction: ltr; }
.split-media { position: relative; }
.split-media img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  filter: saturate(1.05) contrast(1.04);
  transition: transform 0.6s ease;
}
.split-media { overflow: hidden; border-radius: var(--radius); }
.split-media:hover img { transform: scale(1.04); }
@media (max-width: 860px) {
  .split-grid { grid-template-columns: 1fr; gap: 30px; }
  .split-section.reverse .split-grid { direction: ltr; }
  .split-media img { min-height: 260px; }
}

.intro-points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.intro-points li { display: flex; gap: 16px; align-items: flex-start; }
.intro-points .ip-num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
}
.intro-points h4 { margin: 0 0 4px; font-size: 1rem; }
.intro-points p { margin: 0; font-size: 0.92rem; }

/* Seasonal field-photo grid (used above season-tabs) */
.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0 auto 40px; max-width: 640px; }
@media (max-width: 640px) { .field-grid { grid-template-columns: 1fr; } }

/* Dark-section overrides for the season-tabs component */
.section.dark .season-tab-panel { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.16); }
.section.dark .season-tab-content h3 { color: var(--white); }
.section.dark .season-tab-content p { color: rgba(255,255,255,0.75); }
.section.dark .season-tab-tag { color: rgba(255,255,255,0.5); }
.section.dark .season-tab-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.7); }
.section.dark .season-tab-btn:hover { border-color: rgba(255,255,255,0.4); color: var(--white); }
.section.dark .season-tab-btn.active { background: var(--white); border-color: var(--white); color: var(--black); }

/* ============================================
   Pest editorial grid (What We Treat)
   ============================================ */
.pest-editorial-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pest-feature-card {
  grid-column: span 2;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
}
.pest-feature-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
  transition: transform 0.5s ease;
}
.pest-feature-card:hover img { transform: scale(1.05); }
.pest-feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.2) 62%, transparent 100%);
}
.pest-feature-body { position: relative; z-index: 1; padding: 26px; color: var(--white); }
.pest-feature-body h3 { color: var(--white); margin-bottom: 4px; }
.pest-feature-body p { color: rgba(255,255,255,0.84); font-size: 0.9rem; margin: 0; max-width: 320px; }
.pest-small-card { grid-column: span 1; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 20px; background: var(--white); }
.pest-small-card .icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gray-100); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.pest-small-card .icon svg { width: 20px; height: 20px; stroke: var(--ink); }
.pest-small-card h3 { font-size: 1rem; margin-bottom: 4px; }
.pest-small-card p { font-size: 0.85rem; margin: 0; }
@media (max-width: 900px) {
  .pest-editorial-grid { grid-template-columns: repeat(2, 1fr); }
  .pest-feature-card { grid-column: span 2; }
}
@media (max-width: 560px) {
  .pest-editorial-grid { grid-template-columns: 1fr; }
  .pest-feature-card, .pest-small-card { grid-column: span 1; }
}

/* Compact "What We Treat" preview (homepage) — introduces coverage with a
   single photo and four broad categories; full detail lives on the Home
   Protection page's expanded grid below. */
.pest-preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0 4px; }
.pest-preview-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}
.pest-preview-item .icon {
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gray-100); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.pest-preview-item .icon svg { width: 17px; height: 17px; stroke: var(--ink); }
.pest-preview-item span { font-weight: 600; font-size: 0.9rem; }
@media (max-width: 480px) { .pest-preview-grid { grid-template-columns: 1fr; } }

/* Expanded "Pests We Cover" section (Home Protection page) — a typographic
   intro with a small editorial photo strip, then editorial alternating
   category rows rather than a uniform card grid; reuses the .split-grid /
   .split-media pattern from the homepage's editorial sections for visual
   consistency. */
.pest-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 760px; margin: 0 auto 56px; }
.pest-strip-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.pest-strip-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05) contrast(1.04); }
@media (max-width: 560px) { .pest-strip { gap: 8px; } .pest-strip-photo { aspect-ratio: 1 / 1; } }

.pest-row { padding: 44px 0; border-top: 1px solid var(--border); }
.pest-row:first-of-type { border-top: none; padding-top: 0; }
.pest-row.reverse .split-grid { direction: rtl; }
.pest-row.reverse .split-grid > * { direction: ltr; }
/* Fixed aspect-ratio keeps every category photo the same height regardless
   of each source photo's own native proportions — height:100% alone has
   nothing definite to resolve against here, so without this the image was
   simply rendered at its natural aspect ratio (which is how the spider photo
   ended up taller than the others). object-fit:cover (inherited from the
   base .split-media img rule) crops each photo to this ratio. */
.pest-row .split-media img { min-height: 300px; aspect-ratio: 3 / 2; }
.pest-cat-label {
  display: inline-block;
  font-family: "Archivo", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  background: var(--gray-100);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 11px;
  margin-top: 14px;
}

/* Individual pests as clean horizontal rows (not oversized cards), two
   columns on larger screens where a category lists more than one or two
   pests. */
.pest-guide-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.pest-guide-list li {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.pest-guide-list .pest-name { font-weight: 700; font-size: 0.98rem; }
.pest-guide-list .pest-note { font-size: 0.84rem; color: var(--gray-500); margin-top: 2px; }
@media (max-width: 860px) {
  .pest-row { padding: 32px 0; }
  .pest-row .split-media img { min-height: 240px; }
  .pest-guide-list { grid-template-columns: 1fr; }
}

/* Compact supporting CTA at the bottom of the coverage guide — deliberately
   small, not another full-width year-round-protection band. */

/* Specialized Treatments — a distinct block (plain white cards, not the
   callout's tinted background) listing only pests confirmed to be treated
   outside standard seasonal coverage. Each item carries its own explanation
   and an outlined "Specialized Treatment" badge (visually different from
   the filled "Covered in Home Protection" pill above) so the two kinds of
   coverage are never confused. */
.specialized-treatments { margin: 0 0 48px; padding-top: 44px; border-top: 1px solid var(--border); }
.specialized-head { max-width: 640px; margin: 0 auto 24px; text-align: center; }
.specialized-head h3 { font-size: 1.26rem; margin: 0 0 10px; }
.specialized-head p { margin: 0; font-size: 0.92rem; color: var(--gray-700); }
.specialized-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.specialized-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.specialized-item .pest-name { display: block; font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; }
.specialized-item p { margin: 0 0 16px; font-size: 0.9rem; color: var(--gray-700); }
.specialized-item-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.status-label {
  display: inline-block;
  font-family: "Archivo", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 4px 11px;
}
.specialized-link { font-size: 0.84rem; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.specialized-link:hover { opacity: 0.7; }
@media (max-width: 760px) {
  .specialized-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Horizontal step process (How Membership Works)
   ============================================ */
/* Four equal-width columns via CSS Grid, each an equal-height row (grid's
   default row-stretch) — no per-item offsets. Each .step-h is a column flex
   layout (circle, then heading, then description) with identical internal
   spacing, so the number circles and headings line up across every column
   regardless of column height. The heading gets a reserved two-line height
   so a longer heading that wraps doesn't push its own description (or, on
   tablet's 2-up grid, a neighboring column) out of alignment. */
.steps-horizontal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: steph; }
.step-h { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.step-h .num {
  counter-increment: steph;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--black); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: "Archivo", sans-serif; font-weight: 800; line-height: 1;
  flex-shrink: 0;
  margin-bottom: 18px;
}
.step-h .num::before { content: counter(steph); }
.step-h h3 { font-size: 1.02rem; line-height: 1.3; margin: 0 0 8px; min-height: 2.6em; }
.step-h p { font-size: 0.9rem; margin: 0; }
@media (max-width: 860px) { .steps-horizontal { grid-template-columns: repeat(2, 1fr); row-gap: 36px; } }
@media (max-width: 560px) {
  .steps-horizontal { grid-template-columns: 1fr; gap: 0; }
  .step-h { padding: 22px 0; border-bottom: 1px solid var(--border); }
  .step-h h3 { min-height: 0; }
  .steps-horizontal .step-h:last-child { border-bottom: none; }
}

/* ============================================
   Full-bleed photo feature band (Lifestyle / Final CTA)
   ============================================ */
.photo-feature {
  position: relative;
  color: var(--white);
  overflow: hidden;
  padding: 130px 0;
  text-align: center;
}
.photo-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--feature-photo);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.08) brightness(0.5);
  z-index: 0;
}
.photo-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.72));
  z-index: 0;
}
.photo-feature .container { position: relative; z-index: 1; max-width: 680px; }
.photo-feature h2 { color: var(--white); }
.photo-feature p { color: rgba(255,255,255,0.86); font-size: 1.05rem; }
.photo-feature .btn-group { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
@media (max-width: 640px) { .photo-feature { padding: 88px 0; } }

/* ============================================
   Service area (visual split)
   ============================================ */
.service-area-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.service-area-list { list-style: none; margin: 22px 0 28px; padding: 0; }
.service-area-list li { padding: 11px 0; border-bottom: 1px solid var(--border); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.service-area-list li:last-child { border-bottom: none; }
.service-area-list svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--ink); }
/* Future-market row (Ontario) — muted relative to the active service areas
   above it, with its own "Coming Soon" pill (.pest-cat-label) doing the
   rest of the visual distinction. */
.service-area-list li.future-market { color: var(--gray-500); font-weight: 600; }
.service-area-list li.future-market svg { stroke: var(--gray-400); }
.service-area-graphic {
  height: 100%;
  min-height: 300px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: repeating-linear-gradient(45deg, var(--gray-100), var(--gray-100) 10px, var(--gray-200) 10px, var(--gray-200) 20px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-area-graphic svg { width: 64px; height: 64px; stroke: var(--ink); opacity: 0.7; }
@media (max-width: 860px) {
  .service-area-split { grid-template-columns: 1fr; gap: 28px; }
  .service-area-graphic { min-height: 200px; }
}

/* ============================================
   Mobile sticky conversion bar (home page only)
   ============================================ */
.mobile-cta-bar { display: none; }
@media (max-width: 760px) {
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 150;
    background: var(--white);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
    padding: 10px 14px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    gap: 10px;
  }
  .mobile-cta-bar a { flex: 1; justify-content: center; padding: 13px 10px; font-size: 0.8rem; }
  body.has-mobile-cta { padding-bottom: 68px; }
  /* Default to the full label ("Get a Quote" / "Obtenir une soumission");
     swap to the shorter one only once space is genuinely tight. */
  .mobile-cta-bar .short-label { display: none; }
}
@media (max-width: 360px) {
  .mobile-cta-bar .full-label { display: none; }
  .mobile-cta-bar .short-label { display: inline; }
}

/* Utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }