/* ============================================================
   BuzzGuard — Mosquito + Tick Defence
   Design system: black / chartreuse (#CEFFA3), condensed display type
   ============================================================ */

:root {
  --lime: #CEFFA3;
  --lime-bright: #B6F072;
  --lime-deep: #4E7A1F;
  --black: #0B0D08;
  --ink: #12150D;
  --ink-2: #1A1E13;
  --line-dark: rgba(206, 255, 163, 0.14);
  --paper: #F7F9F1;
  --white: #FFFFFF;
  --text-dark: #1C2117;
  --text-mut-dark: #55604B;
  --text-light: #EDF3E3;
  --text-mut-light: #A9B49A;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 18px 50px -18px rgba(11, 13, 8, 0.35);
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Clip (not hidden) so the sticky header keeps working while nothing can
   ever create a horizontal scrollbar */
html, body { overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-dark);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

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

/* ---------- Typography ---------- */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
  color: inherit;
}

h1 { font-size: clamp(2.9rem, 7vw, 5.2rem); }
h2 { font-size: clamp(2.1rem, 4.5vw, 3.3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: 0.02em; }

.lead { font-size: 1.18rem; line-height: 1.6; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--lime-deep);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--lime-bright);
}
.on-dark .eyebrow, .section-dark .eyebrow, .section-black .eyebrow, .hero .eyebrow { color: var(--lime); }

.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head p { margin-top: 14px; color: var(--text-mut-dark); }
.section-dark .section-head p, .section-black .section-head p { color: var(--text-mut-light); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 15px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-lime { background: var(--lime); color: var(--black); }
.btn-lime:hover { background: var(--lime-bright); }

.btn-dark { background: var(--black); color: var(--lime); }
.btn-dark:hover { background: var(--ink-2); }

.btn-ghost { border-color: rgba(206, 255, 163, 0.4); color: var(--lime); }
.btn-ghost:hover { border-color: var(--lime); background: rgba(206, 255, 163, 0.08); }

.btn-ghost-dark { border-color: rgba(11, 13, 8, 0.25); color: var(--black); }
.btn-ghost-dark:hover { border-color: var(--black); }

/* ---------- Header ---------- */

.topbar {
  background: var(--lime);
  color: var(--black);
  font-size: 0.88rem;
  font-weight: 600;
}
.topbar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 7px;
  padding-bottom: 7px;
}
.topbar a { text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar .tb-note { display: flex; align-items: center; gap: 8px; }
.topbar svg { width: 14px; height: 14px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(11, 13, 8, 0.96);
  border-bottom: 1px solid var(--line-dark);
}
/* Blur only where the nav is inline: backdrop-filter turns the header into
   the containing block for fixed descendants, which would clip the mobile
   drawer to the header's height */
@media (min-width: 1021px) {
  .site-header { backdrop-filter: blur(8px); }
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
}
.logo img { height: 34px; width: auto; }

.nav { display: flex; align-items: center; gap: 6px; }
/* every level is a positioning context so nested flyouts anchor to their parent */
.nav li { list-style: none; position: relative; }
.nav a {
  display: block;
  padding: 10px 14px;
  white-space: nowrap;
  color: var(--text-light);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease;
}
.nav a:hover, .nav a.active { color: var(--lime); }

.has-sub > a::after {
  content: "";
  display: inline-block;
  margin-left: 7px;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
}
.sub {
  position: absolute;
  top: calc(100% + 6px);
  left: 8px;
  min-width: 230px;
  background: var(--ink);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  padding: 8px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  box-shadow: var(--shadow);
}
/* child combinator: hovering a nested item must not also open its siblings'
   panels, and must leave the parent panel open */
.has-sub:hover > .sub, .has-sub:focus-within > .sub, .has-sub.open > .sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sub a { padding: 10px 14px; font-size: 0.95rem; letter-spacing: 0.06em; }
.sub a:hover { background: rgba(206, 255, 163, 0.07); }

/* Second level flies out to the right, top-aligned with its parent row */
.sub .sub { top: -9px; left: calc(100% + 5px); }
.sub .has-sub > a::after { float: right; margin-top: 6px; transform: rotate(-45deg); }

.header-cta { display: flex; align-items: center; gap: 18px; }
.header-phone {
  display: flex;
  flex-direction: column;
  text-align: right;
  text-decoration: none;
  color: var(--text-light);
  line-height: 1.2;
}
.header-phone small {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-mut-light);
}
.header-phone strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--lime);
  white-space: nowrap;
}
.header-cta .btn { padding: 12px 22px; font-size: 0.95rem; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--lime);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { left: 0; top: -7px; }
.nav-toggle span::after { left: 0; top: 7px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background: var(--black);
  color: var(--text-light);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.4;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(11, 13, 8, 0.93) 22%, rgba(11, 13, 8, 0.5) 65%, rgba(11, 13, 8, 0.78));
}
.hero .wrap { position: relative; z-index: 2; }
.hero-inner { padding: 110px 0 120px; max-width: 800px; }
.hero h1 em { font-style: normal; color: var(--lime); }
.hero .lead { margin: 22px 0 34px; max-width: 620px; color: #C7D2B4; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 38px;
  padding: 0;
  list-style: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-light);
}
.hero-points li { display: flex; align-items: center; gap: 9px; }
.hero-points svg { width: 17px; height: 17px; color: var(--lime); flex: none; }

/* Interior page hero */
.page-hero .hero-inner { padding: 84px 0 90px; }
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-mut-light);
  margin-bottom: 22px;
}
.breadcrumb a { color: var(--lime); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: 0.5; }

/* Hero with an above-the-fold quote form alongside the copy.
   The grid owns the vertical padding so both columns share one hero height. */
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero.has-form .hero-inner { padding: 0; max-width: none; }
.hero.has-form .hero-grid { padding: 58px 0 66px; }
.hero.has-form.page-hero .hero-grid { padding: 46px 0 54px; }
.hero.has-form .hero-points { margin-top: 30px; }

.hero-form-card {
  background: var(--white);
  color: var(--text-dark);
  border-radius: var(--radius);
  box-shadow: 0 28px 64px -20px rgba(11, 13, 8, 0.7);
  padding: 26px 26px 28px;
}
.hero-form-card h2 {
  font-size: clamp(1.6rem, 2.4vw, 1.95rem);
  line-height: 1.05;
}
.hero-form-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 18px;
}
.hero-form-head p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lime-deep);
}
/* scoped so it outranks .form-grid's gap, which is declared further down */
.hero-form-card .hero-form { gap: 13px; }
.hero-form .field label { font-size: 0.78rem; letter-spacing: 0.09em; margin-bottom: 5px; }
.hero-form .field input, .hero-form .field select { padding: 11px 14px; font-size: 0.97rem; }
.hero-form .btn { width: 100%; justify-content: center; }
.hero-form .form-note { margin-top: 10px; font-size: 0.8rem; text-align: center; }
.hero-form .form-note a { color: var(--lime-deep); font-weight: 600; }

/* ---------- Sections ---------- */

section { padding: 92px 0; }
.section-dark { background: var(--ink); color: var(--text-light); }
.section-black { background: var(--black); color: var(--text-light); }
.section-tight { padding: 64px 0; }

/* Stats band */
.stats-band { background: var(--black); color: var(--text-light); padding: 0; border-top: 1px solid var(--line-dark); }
.stats-band .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-top: 38px;
  padding-bottom: 38px;
}
.stat { text-align: center; }
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 700;
  color: var(--lime);
  line-height: 1;
}
.stat span {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-mut-light);
}

/* ---------- Cards ---------- */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* Subheading that splits a card grid into groups (e.g. Canada / United States) */
.area-group {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  color: var(--lime-deep);
  margin-bottom: 22px;
}
.area-group::after { content: ""; flex: 1; height: 1px; background: rgba(11, 13, 8, 0.12); }
.section-dark .area-group, .section-black .area-group { color: var(--lime); }
.section-dark .area-group::after, .section-black .area-group::after { background: var(--line-dark); }
.area-group ~ .area-group { margin-top: 52px; }

.card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text-dark);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -18px rgba(11, 13, 8, 0.45); }
.card-img { aspect-ratio: 16 / 10; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card:hover .card-img img { transform: scale(1.05); }
.card-body { padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card-body p { color: var(--text-mut-dark); font-size: 0.98rem; flex: 1; }
.card-link {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
  color: var(--lime-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.card-link svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.card:hover .card-link svg { transform: translateX(4px); }

.section-dark .card, .section-black .card { background: var(--ink-2); color: var(--text-light); border: 1px solid var(--line-dark); }
.section-dark .card-body p, .section-black .card-body p { color: var(--text-mut-light); }
.section-dark .card-link, .section-black .card-link { color: var(--lime); }

.card .tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--lime);
  color: var(--black);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: 999px;
  z-index: 2;
}

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: step; }
.step {
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px 28px;
  box-shadow: var(--shadow);
  position: relative;
}
.section-dark .step, .section-black .step { background: var(--ink-2); border: 1px solid var(--line-dark); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  color: var(--lime-bright);
  display: block;
  margin-bottom: 14px;
}
.section-dark .step::before, .section-black .step::before { color: var(--lime); }
.step h3 { margin-bottom: 10px; }
.step p { color: var(--text-mut-dark); font-size: 0.98rem; }
.section-dark .step p, .section-black .step p { color: var(--text-mut-light); }

/* Split (image + text) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.split-img {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.split-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.2; }
.split.split-top { align-items: start; }
.split h2 { margin-bottom: 18px; }
.split .lead { color: var(--text-mut-dark); margin-bottom: 20px; }
.section-dark .split .lead, .section-black .split .lead { color: var(--text-mut-light); }
.split .btn { margin-top: 26px; }

/* Check list */
.checks { list-style: none; display: grid; gap: 13px; margin-top: 8px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 3px;
  color: var(--lime-deep);
}
.section-dark .checks svg, .section-black .checks svg { color: var(--lime); }
.checks strong { display: block; }
.checks span { color: var(--text-mut-dark); font-size: 0.96rem; }
.section-dark .checks span, .section-black .checks span { color: var(--text-mut-light); }

/* Feature tiles (icon cards) */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tile {
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow);
}
.section-dark .tile, .section-black .tile { background: var(--ink-2); border: 1px solid var(--line-dark); }
.tile-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--black);
  color: var(--lime);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.section-dark .tile-icon, .section-black .tile-icon { background: var(--lime); color: var(--black); }
.tile-icon svg { width: 26px; height: 26px; }
.tile h3 { margin-bottom: 8px; }
.tile p { color: var(--text-mut-dark); font-size: 0.97rem; }
.section-dark .tile p, .section-black .tile p { color: var(--text-mut-light); }

/* ---------- Testimonials ---------- */

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.quote {
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.quote-stars { color: var(--lime); letter-spacing: 3px; font-size: 1.05rem; }
.quote p { color: var(--text-light); font-size: 1.02rem; }
.quote footer {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-mut-light);
}
.quote footer strong { color: var(--lime); display: block; font-size: 1rem; }
.quote-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote-author img { width: 44px; height: 44px; border-radius: 50%; flex: none; border: 2px solid var(--line-dark); }

/* ---------- FAQ ---------- */

.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
.faq details {
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.section-dark .faq details, .section-black .faq details { background: var(--ink-2); border: 1px solid var(--line-dark); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 56px 20px 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--lime-deep);
  transition: transform 0.2s ease;
}
.section-dark .faq summary::after, .section-black .faq summary::after { color: var(--lime); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 24px 22px; color: var(--text-mut-dark); }
.section-dark .faq details p, .section-black .faq details p { color: var(--text-mut-light); }

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--lime);
  color: var(--black);
  padding: 84px 0;
}
.cta-band .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.cta-band h2 { max-width: 640px; }
.cta-band p { margin-top: 10px; max-width: 560px; font-weight: 500; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Location extras ---------- */

.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin-top: 10px;
}
.area-list li {
  background: var(--white);
  border: 1px solid rgba(11, 13, 8, 0.1);
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 0.93rem;
}
.section-dark .area-list li, .section-black .area-list li {
  background: var(--ink-2);
  border-color: var(--line-dark);
  color: var(--text-light);
}

/* ---------- Forms ---------- */

.form-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  margin-bottom: 7px;
  color: var(--text-mut-dark);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid rgba(11, 13, 8, 0.16);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--paper);
  color: var(--text-dark);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--lime-deep);
  box-shadow: 0 0 0 3px rgba(182, 240, 114, 0.35);
}
.form-note { font-size: 0.88rem; color: var(--text-mut-dark); margin-top: 14px; }

/* Submit feedback, injected by main.js under the form note */
.form-status { font-size: 0.9rem; font-weight: 600; line-height: 1.5; margin-top: 12px; }
.form-status[data-tone="wait"] { color: var(--text-mut-dark); }
.form-status[data-tone="ok"] { color: var(--lime-deep); }
.form-status[data-tone="error"] { color: #B3261E; }
.hero-form .form-status { font-size: 0.82rem; text-align: center; margin-top: 10px; }
.btn[disabled] { opacity: 0.65; cursor: default; pointer-events: none; }

/* Google Places address suggestions (main.js wraps the input at runtime) */
.ac-wrap { position: relative; }
.ac-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 5px;
  list-style: none;
  max-height: 264px;
  overflow-y: auto;
  background: var(--white);
  border: 1.5px solid rgba(11, 13, 8, 0.14);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 34px rgba(11, 13, 8, 0.18);
}
.ac-item {
  display: block;
  padding: 9px 11px;
  border-radius: 7px;
  cursor: pointer;
  line-height: 1.35;
}
.ac-item.is-active, .ac-item:hover { background: rgba(182, 240, 114, 0.32); }
.ac-main { display: block; font-size: 0.94rem; color: var(--text-dark); }
.ac-sub { display: block; font-size: 0.8rem; color: var(--text-mut-dark); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--black);
  color: var(--text-mut-light);
  padding: 76px 0 0;
  border-top: 1px solid var(--line-dark);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 44px;
  padding-bottom: 56px;
}
.footer-grid h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 1rem;
  color: var(--text-light);
  margin-bottom: 18px;
}
.footer-grid ul { list-style: none; display: grid; gap: 10px; }
.footer-grid a { color: var(--text-mut-light); text-decoration: none; font-size: 0.96rem; }
.footer-grid a:hover { color: var(--lime); }
.footer-about img { height: 30px; width: auto; margin-bottom: 18px; }
.footer-about p { font-size: 0.95rem; max-width: 320px; }
.footer-franchise { margin-top: 16px; }
.footer-franchise a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lime);
}
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.96rem; }
.footer-contact svg { width: 16px; height: 16px; color: var(--lime); flex: none; margin-top: 4px; }
.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding: 22px 0;
  font-size: 0.85rem;
}
.footer-bottom .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

/* ---------- Franchise territory map ----------
   A Leaflet map (vendored in js/vendor/) over CARTO's dark basemap, built by
   js/franchise-map.js. Leaflet paints the territory fills and strokes itself,
   from the STYLE table in that file, by writing SVG presentation attributes —
   so don't set fill/stroke on .fmap-area here or the two will fight. The rest
   is keyed off [data-status] so the map, the list, the legend and the detail
   panel all read from one palette. */

/* The void behind the tiles — shown while they load and past the world edges.
   Kept in step with the brightened .fmap-tiles filter so there's no seam. */
.fmap-wrap {
  --fmap-water: #0E1A18;
}

.fmap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: stretch;
}

/* ---- Stage ---- */

.fmap-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--fmap-water);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
}

/* z-index:0 makes the canvas its own stacking context, which pens Leaflet's
   pane z-indexes (400–1000) inside it. Without it they would sit on top of the
   preset buttons and the zoom controls, which are the canvas's siblings. */
.fmap-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.leaflet-container {
  background: var(--fmap-water);
  font-family: var(--font-body);
  outline: none;
}
/* Lift the basemap rather than knocking it back — the town and city names are
   the reason for a real basemap, and CARTO's dark tiles render them in a mid
   grey that disappears if you darken the layer. brightness() multiplies, so
   raising it lifts the labels far more than the near-black ground. */
.fmap-tiles { filter: saturate(0.55) brightness(1.45) contrast(1.02); }

/* Screen-blending the territories against a near-black basemap is what keeps
   the chartreuse chartreuse — a plain alpha fill over grey land turns olive. */
.fmap-canvas .leaflet-overlay-pane { mix-blend-mode: screen; }

.leaflet-control-attribution {
  background: rgba(11, 13, 8, 0.72) !important;
  color: var(--text-mut-light);
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 8px 0 0 0;
}
.leaflet-control-attribution a { color: var(--text-mut-light); text-decoration: underline; }
.leaflet-control-attribution a:hover { color: var(--lime); }

/* ---- Territory shapes ---- */

.fmap-area {
  cursor: pointer;
  transition: fill-opacity 0.18s ease, stroke-opacity 0.18s ease, stroke-width 0.18s ease;
  outline: none;
}
.fmap-area:focus-visible { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)); }
.fmap-area.is-dimmed { pointer-events: none; }

/* ---- Pins ---- */

/* The icon is a zero-size anchor dropped at the territory's pin coordinate;
   the dot and the label hang off it, so both hold their size at every zoom. */
.fmap-pin {
  pointer-events: none;
  width: 0;
  height: 0;
}
.fmap-pin.is-dimmed { opacity: 0.14; }
.fmap-pin-dot {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(11, 13, 8, 0.55);
}
.fmap-pin-dot[data-status="operating"] { background: #7FA24E; }
.fmap-pin-dot[data-status="hq"] { background: var(--white); }
.fmap-pin-dot[data-status="pending"] { background: var(--lime-bright); }

/* Names are useful zoomed in and pure noise at province scale, so the map adds
   .fmap-labels-on past zoom 7 and every label appears then. Below that only
   the hovered and selected territories are named. */
.fmap-pin-label {
  position: absolute;
  left: 0;
  top: 9px;
  transform: translateX(-50%);
  display: none;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-light);
  background: rgba(11, 13, 8, 0.72);
  border-radius: 999px;
  padding: 2px 9px;
}
.fmap-labels-on .fmap-pin-label,
.fmap-pin.is-active .fmap-pin-label { display: block; }
.fmap-pin.is-active .fmap-pin-label { color: var(--black); background: var(--lime); }

/* ---- Hover tooltip ---- */

.fmap-tip.leaflet-tooltip {
  background: var(--black);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 6px 14px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  white-space: nowrap;
  box-shadow: var(--shadow);
}
.fmap-tip.leaflet-tooltip::before { display: none; }
.fmap-tip strong {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-light);
}
.fmap-tip span {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--lime);
}
.fmap-tip span[data-status="operating"], .fmap-tip span[data-status="hq"] { color: var(--text-mut-light); }

/* ---- Map controls ---- */

/* Lifted clear of the attribution line, which Leaflet pins to the bottom-right
   corner and which the licence requires stay legible. */
.fmap-controls {
  position: absolute;
  right: 14px;
  bottom: 34px;
  z-index: 3;
  display: grid;
  gap: 6px;
}
.fmap-controls button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line-dark);
  background: rgba(11, 13, 8, 0.82);
  color: var(--lime);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.fmap-controls button:hover { background: var(--ink-2); border-color: var(--lime); }
.fmap-controls svg { width: 18px; height: 18px; }

.fmap-views {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 28px);
}
.fmap-views button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-dark);
  background: rgba(11, 13, 8, 0.82);
  color: var(--text-light);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.fmap-views button:hover { color: var(--lime); border-color: var(--lime); }

.fmap-hint {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  pointer-events: none;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-mut-light);
  background: rgba(11, 13, 8, 0.7);
  border-radius: 999px;
  padding: 5px 13px;
}
/* The wheel only zooms once the map has been clicked or tabbed into, so the
   hint says which of the two states you're in. */
.fmap-hint .on-live,
.fmap-wrap.is-live .fmap-hint .off-live { display: none; }
.fmap-wrap.is-live .fmap-hint .on-live { display: inline; }

/* ---- Sidebar ---- */

.fmap-side {
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 18px;
  display: grid;
  /* the list takes whatever height the map leaves, so the two columns end
     level. height:0 + min-height:100% stops the 22-item list from setting the
     grid row's height — the map's aspect ratio does that, and the list scrolls. */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 14px;
  height: 0;
  min-height: 100%;
}
.fmap-search { position: relative; }
.fmap-search input {
  width: 100%;
  padding: 12px 14px 12px 40px;
  border-radius: 999px;
  border: 1px solid var(--line-dark);
  background: var(--black);
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.fmap-search input::placeholder { color: var(--text-mut-light); }
.fmap-search input:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(206, 255, 163, 0.16);
}
.fmap-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-mut-light);
}

.fmap-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.fmap-filters button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-dark);
  background: transparent;
  color: var(--text-mut-light);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.fmap-filters button:hover { color: var(--text-light); border-color: var(--lime); }
.fmap-filters button.is-on { background: var(--lime); border-color: var(--lime); color: var(--black); }

.fmap-list {
  list-style: none;
  display: grid;
  gap: 4px;
  align-content: start;
  overflow-y: auto;
  scrollbar-width: thin;
  margin: 0 -6px;
  padding: 0 6px;
}
.fmap-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.fmap-item:hover, .fmap-item.is-hover { background: rgba(206, 255, 163, 0.07); }
.fmap-item.is-selected { background: rgba(206, 255, 163, 0.12); border-color: var(--lime); }
.fmap-item-text { display: grid; flex: 1; min-width: 0; }
.fmap-item-text strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
}
.fmap-item-text small {
  font-size: 0.8rem;
  color: var(--text-mut-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fmap-item-status {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mut-light);
  flex: none;
}
.fmap-item[data-status="available"] .fmap-item-status { color: var(--lime); }

.fmap-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
  border: 1px solid rgba(11, 13, 8, 0.5);
}
.fmap-dot[data-status="available"] { background: var(--lime); }
.fmap-dot[data-status="pending"] { background: rgba(206, 255, 163, 0.16); border: 1.5px dashed var(--lime-bright); }
.fmap-dot[data-status="operating"] { background: #4E7A1F; }
.fmap-dot[data-status="hq"] { background: var(--white); }

.fmap-empty { font-size: 0.9rem; color: var(--text-mut-light); padding: 6px 2px 2px; }

/* ---- Detail panel ---- */

.fmap-panel {
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 26px;
  margin-top: 22px;
}
.fmap-panel-empty h3, .fmap-detail h3 { margin-bottom: 6px; }
.fmap-panel-empty p { color: var(--text-mut-light); max-width: 60ch; }
.fmap-legend {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line-dark);
}
.fmap-legend li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; color: var(--text-mut-light); }
.fmap-legend .fmap-dot { margin-top: 4px; }
.fmap-legend strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
}

.fmap-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lime);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 14px;
}
.fmap-badge[data-status="operating"], .fmap-badge[data-status="hq"] { color: var(--text-mut-light); }
.fmap-detail-sub { color: var(--text-mut-light); font-weight: 600; }
.fmap-detail-note { margin-top: 14px; max-width: 62ch; }
.fmap-detail h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-mut-light);
  margin: 24px 0 12px;
}
.fmap-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.fmap-chips li {
  background: var(--black);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 6px 15px;
  font-size: 0.9rem;
  font-weight: 600;
}
.fmap-detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.fmap-detail-foot { margin-top: 14px; font-size: 0.9rem; color: var(--text-mut-light); }

/* Counter strip above the map */
.fmap-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-dark);
}
.fmap-counts div { display: flex; align-items: baseline; gap: 10px; }
.fmap-counts strong {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--lime);
}
.fmap-counts span {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-mut-light);
}

/* Until the script runs there is nothing to interact with */
.fmap-noscript { color: var(--text-mut-light); margin-top: 22px; }
.fmap-wrap.is-ready .fmap-noscript { display: none; }

/* If Leaflet is missing the map can't be drawn, but the search, the filters,
   the list and the detail panel don't depend on it — so drop the stage and let
   the section carry on as a territory directory. */
.fmap-mapless { display: none; color: var(--text-mut-light); margin-top: 22px; }
.fmap-wrap.is-mapless .fmap-stage { display: none; }
.fmap-wrap.is-mapless .fmap { grid-template-columns: 1fr; }
.fmap-wrap.is-mapless .fmap-side { height: auto; min-height: 0; }
.fmap-wrap.is-mapless .fmap-list { max-height: 420px; }
.fmap-wrap.is-mapless .fmap-mapless { display: block; }

@media (max-width: 1020px) {
  .fmap { grid-template-columns: 1fr; }
  .fmap-stage { aspect-ratio: 3 / 2.3; }
  .fmap-side { height: auto; min-height: 0; }
  .fmap-list { max-height: 300px; }
  .fmap-legend { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .fmap-stage { aspect-ratio: 1 / 1; }
  .fmap-views button { font-size: 0.74rem; padding: 6px 10px; }
  .fmap-panel { padding: 22px 18px; }
  .fmap-legend { grid-template-columns: 1fr; }
  .fmap-detail-actions .btn { width: 100%; justify-content: center; }
  .fmap-hint { display: none; }
}

/* ---------- Reveal animation ---------- */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */

/* The full header (logo + nav + phone + button) needs ~1330px once Franchise
   is in the nav; drop the phone first, then switch to the drawer below 1021px */
@media (max-width: 1330px) {
  .header-phone { display: none; }
}

/* Side-by-side hero + form only where there's room for both.

   The form column must never drop below 482px. The GoHighLevel iframe is its
   own viewport, so the form inside it ignores this stylesheet entirely and
   switches to its own mobile layout at 481px and under — no matter how wide
   the browser window is. A narrow column here means a mobile-looking form on
   a desktop screen.

   Hence the split starting at 1100px rather than 1021px: 500px of form plus a
   52px gap leaves the headline column a matching 500px at that width. Starting
   lower would force the form under 482px to keep the two sides balanced. */
@media (min-width: 1100px) {
  .hero.has-form .hero-grid {
    grid-template-columns: minmax(0, 1fr) 500px;
    gap: 52px;
  }
  .hero.has-form .lead { max-width: 560px; }
}

/* Stacked hero. The cap keeps the form from stretching the full content width
   while staying clear of the 482px iframe threshold — it only goes under once
   the viewport itself is around phone width, where mobile layout is correct. */
@media (max-width: 1099px) {
  .hero.has-form .hero-grid { padding: 54px 0 62px; }
  .hero.has-form.page-hero .hero-grid { padding: 44px 0 52px; }
  .hero-form-card { max-width: 520px; }
}

@media (max-width: 1020px) {
  .grid-3, .grid-4, .steps, .tiles, .quotes { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: var(--ink);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 96px 20px 30px;
    transform: translateX(100%);
    /* visibility keeps the closed drawer out of the tab order and off iOS's
       horizontal overscroll */
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s;
    z-index: 80;
    overflow-y: auto;
    border-left: 1px solid var(--line-dark);
  }
  .nav-open .nav { transform: translateX(0); visibility: visible; }
  .nav a { padding: 13px 14px; font-size: 1.15rem; }
  .sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 6px 16px;
    display: none;
  }
  .has-sub.open > .sub { display: block; }
  .has-sub > a::after { float: right; margin-top: 9px; }
  /* nested panels stack in the drawer rather than flying out */
  .sub .sub { top: auto; left: auto; }
  .sub .has-sub > a::after { margin-top: 7px; transform: rotate(45deg); }
  .sub .has-sub > a { font-size: 1.02rem; color: var(--lime); }
  .nav-toggle { z-index: 85; }

  /* Scrim behind the open drawer; lock background scroll while open */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(11, 13, 8, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
    z-index: 75;
  }
  body.nav-open::after { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 860px) {
  section { padding: 68px 0; }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split-img { order: -1; }
  .stats-band .wrap { grid-template-columns: repeat(2, 1fr); gap: 30px 12px; }
  .hero-inner { padding: 80px 0 88px; }
  .page-hero .hero-inner { padding: 64px 0 70px; }
}

/* Small phones: header keeps just logo + hamburger */
@media (max-width: 700px) {
  .header-cta .btn { display: none; }
}

@media (max-width: 620px) {
  .grid-3, .grid-4, .grid-2, .steps, .tiles, .quotes { grid-template-columns: 1fr; }
  .hero-form { grid-template-columns: 1fr; }
  .hero-form-card { padding: 22px 20px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 28px 22px; }
  .topbar .tb-hours { display: none; }
  .cta-band { padding: 64px 0; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}