/* ============================================================
   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);
}

/* Local public-health figures on location pages. Numbers are hard-coded from
   the health unit's own pages; .stat-source carries the citation and date. */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat-card {
  background: var(--ink);
  color: var(--text-light);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 26px 24px 24px;
}
.stat-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--lime);
  line-height: 1;
}
.stat-card .stat-label {
  display: block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.25;
}
.stat-card p {
  margin: 10px 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-mut-light);
}
.stat-source {
  margin-top: 24px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-mut-dark);
}
.stat-source a {
  color: var(--lime-deep);
  font-weight: 600;
}
@media (max-width: 1020px) {
  .stat-cards {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .stat-cards {
    grid-template-columns: 1fr;
  }
}

/* ---------- 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);
}
/* "See how it works" link under the home page steps */
.steps-more {
  margin-top: 30px;
}
.steps-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lime);
  text-decoration: none;
}
.steps-more a:hover {
  text-decoration: underline;
}
.steps-more svg {
  width: 15px;
  height: 15px;
}

/* Clears the sticky header when the home page links here */
#how-it-works {
  scroll-margin-top: 24px;
}
/* "How it works" sheet (services/mosquito-defence.html): a black spec panel
   echoing the client's printed sheet — two numbered lists either side of
   the spray-equipment callout */
.how-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 40px;
  background: var(--black);
  color: var(--text-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 44px 40px;
}
.how-title {
  font-size: 1.45rem;
  color: var(--lime);
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-dark);
}
.how-list {
  list-style: none;
  display: grid;
  gap: 14px;
}
.how-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.45;
  color: #d8e1c9;
}
.how-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border: 1.5px solid var(--lime);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--lime);
  margin-top: -3px;
}
.how-equip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 26px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  background: var(--ink-2);
}
.how-equip-art {
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto 26px;
  color: var(--lime);
}
.how-equip h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}
.how-equip p {
  color: var(--text-mut-light);
  font-size: 0.98rem;
}
.how-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 34px;
}
.how-cta-phone {
  font-weight: 600;
  color: var(--lime-deep);
  text-decoration: none;
}
.how-cta-phone:hover {
  text-decoration: underline;
}
@media (max-width: 1020px) {
  .how-sheet {
    grid-template-columns: 1fr 1fr;
  }
  .how-equip {
    grid-column: 1 / -1;
    order: -1;
  }
}
@media (max-width: 620px) {
  .how-sheet {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 28px 20px;
  }
}

/* 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;
}

/* Renewal page */
.renewal-page {
  background: var(--black);
  color: var(--text-light);
}
.renewal-section {
  padding: clamp(56px, 7vw, 92px) 0;
}
.renewal-heading {
  max-width: 760px;
  margin: 0 auto clamp(34px, 5vw, 54px);
  text-align: center;
}
.renewal-heading .eyebrow {
  justify-content: center;
}
.renewal-heading h1 {
  font-size: clamp(2.8rem, 6vw, 4.8rem);
}
.renewal-heading p {
  max-width: 620px;
  margin: 18px auto 0;
  color: var(--text-mut-light);
  font-size: 1.08rem;
}
.renewal-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(500px, 1.18fr);
  grid-template-areas: 'video form';
  gap: clamp(28px, 4vw, 54px);
  align-items: start;
}
.renewal-form-card {
  grid-area: form;
  min-width: 0;
  overflow: hidden;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 28px 64px -20px rgba(0, 0, 0, 0.75);
}
.renewal-form-iframe {
  display: block;
  width: 100%;
  height: 1463px;
  border: 0;
}
.renewal-video-card {
  grid-area: video;
  position: relative;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  box-shadow: 0 28px 64px -20px rgba(0, 0, 0, 0.75);
}
.renewal-video-card video {
  display: block;
  width: 100%;
  max-height: 1050px;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: #000;
}
.renewal-video-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 25%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, transparent 42%);
}
.renewal-video-intro {
  position: absolute;
  top: clamp(18px, 3vw, 28px);
  left: clamp(18px, 3vw, 28px);
  display: grid;
  gap: 2px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72);
  pointer-events: none;
}
.renewal-video-intro span {
  color: var(--lime);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.renewal-video-intro strong {
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  line-height: 1;
  text-transform: uppercase;
}
.renewal-sound-button {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 5vw, 42px);
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100% - 36px);
  padding: 12px 20px 12px 12px;
  color: var(--black);
  background: var(--lime);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
  cursor: pointer;
  transform: translateX(-50%);
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
  animation: renewal-sound-pulse 2.4s ease-in-out infinite;
}
.renewal-sound-button:hover {
  background: var(--lime-bright);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.48);
  transform: translateX(-50%) translateY(-2px);
}
.renewal-sound-button:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 4px;
}
.renewal-sound-button[aria-pressed='true'] {
  animation: none;
}
.renewal-sound-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  color: var(--lime);
  background: var(--black);
  border-radius: 50%;
}
.renewal-sound-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.renewal-sound-button[aria-pressed='false'] .sound-wave,
.renewal-sound-button[aria-pressed='true'] .sound-muted {
  display: none;
}
.renewal-sound-copy {
  display: grid;
  text-align: left;
  line-height: 1.1;
}
.renewal-sound-copy strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.renewal-sound-copy small {
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
}
@keyframes renewal-sound-pulse {
  0%,
  100% {
    box-shadow:
      0 12px 34px rgba(0, 0, 0, 0.38),
      0 0 0 0 rgba(206, 255, 163, 0.36);
  }
  50% {
    box-shadow:
      0 12px 34px rgba(0, 0, 0, 0.38),
      0 0 0 12px rgba(206, 255, 163, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .renewal-sound-button {
    animation: none;
  }
}

@media (max-width: 980px) {
  .renewal-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'video'
      'form';
    max-width: 680px;
    margin: 0 auto;
  }
  .renewal-video-card {
    width: min(100%, 520px);
    margin: 0 auto;
  }
}

@media (max-width: 620px) {
  .renewal-section {
    padding: 42px 0 56px;
  }
  .renewal-heading {
    margin-bottom: 28px;
  }
  .renewal-heading p {
    font-size: 1rem;
  }
  .renewal-form-card {
    border-radius: var(--radius-sm);
  }
  .renewal-video-card {
    border-radius: var(--radius-sm);
  }
  .renewal-sound-button {
    bottom: 22px;
  }
}

/* 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);
}

/* ---------- Google review marquee ----------
   Three full-bleed rows of review cards. js/main.js clones each track and
   adds .is-moving; without it (no JS, reduced motion) each row is a
   swipeable strip. Cards use margin-right, not flex gap, so the two halves
   of a cloned track are exactly equal and the loop has no seam. */

.reviews-section .section-head p a {
  color: var(--lime-deep);
  font-weight: 600;
}
.marquee {
  display: grid;
  gap: 20px;
}
.marquee-row {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding: 2px 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0 0 0 20px;
}
.is-moving .marquee-row {
  overflow: hidden;
}
.is-moving .marquee-track {
  padding-left: 0;
  animation: marquee-left var(--marquee-duration, 100s) linear infinite;
}
.is-moving .marquee-row[data-direction='right'] .marquee-track {
  animation-name: marquee-right;
}
/* Keeps moving under the mouse; only keyboard focus (or the Pause button) stops it,
   so a tabbed-to "Read review" link doesn't slide out from under the user. */
.marquee-row:has(:focus-visible) .marquee-track,
.marquee.is-paused .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes marquee-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.review-card {
  flex: none;
  width: 340px;
  margin-right: 20px;
  scroll-snap-align: start;
  background: var(--ink);
  color: var(--text-light);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.review-head img,
.review-initial {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
  background: var(--ink-2);
}
.review-initial {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--lime);
}
.review-who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.review-who strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-guide {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px 2px 6px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--black);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.review-guide svg {
  width: 12px;
  height: 12px;
}
.review-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-mut-light);
}
.review-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--lime);
}
.review-stars svg {
  width: 16px;
  height: 16px;
}
/* Long reviews are cut at five lines; "Read review" opens the full text on Google. */
.review-text {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}
.review-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lime);
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s;
}
.review-link svg {
  width: 14px;
  height: 14px;
}
.review-link:hover,
.review-link:focus-visible {
  background: var(--lime);
  color: var(--black);
}
.marquee-toggle {
  justify-self: center;
  margin-top: 6px;
  padding: 8px 18px;
  border: 1px solid rgba(11, 13, 8, 0.2);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dark);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.marquee-toggle:hover {
  border-color: var(--text-dark);
}
@media (max-width: 620px) {
  .review-card {
    width: 290px;
    margin-right: 14px;
  }
  .marquee {
    gap: 14px;
  }
}

/* ---------- 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;
}
.footer-bottom a {
  text-decoration: none;
}
.footer-bottom a:hover {
  color: var(--lime);
}

/* ---------- Legal pages (privacy.html) ---------- */

.legal {
  max-width: 74ch;
}
.legal h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 2.2em 0 0.6em;
}
.legal h2:first-child {
  margin-top: 0;
}
.legal p,
.legal ul {
  margin-bottom: 1em;
}
.legal ul {
  padding-left: 1.3em;
}
.legal li {
  margin-bottom: 0.35em;
}
.legal a {
  color: var(--lime-deep);
  font-weight: 600;
}

/* ---------- 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;
  }
}

/* ============================================================
   Interactive Seasonal Calendar Component
   ============================================================ */

.seasonal-calendar-section {
  background: var(--black);
  color: var(--text-light);
  padding: 84px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.seasonal-calendar-section::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(206, 255, 163, 0.07) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.cal-header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.cal-header-text h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 8px;
}

.cal-header-text p {
  color: var(--text-mut-light);
  max-width: 680px;
  font-size: 1.08rem;
}

.cal-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.cal-filter-group {
  display: inline-flex;
  background: var(--ink);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line-dark);
}

.cal-filter-btn {
  background: transparent;
  border: none;
  color: var(--text-mut-light);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cal-filter-btn:hover {
  color: var(--white);
}

.cal-filter-btn.active {
  background: var(--lime);
  color: var(--black);
  box-shadow: 0 2px 10px rgba(206, 255, 163, 0.25);
}

.cal-tour-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ink);
  color: var(--lime);
  border: 1px solid rgba(206, 255, 163, 0.25);
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cal-tour-btn:hover {
  background: rgba(206, 255, 163, 0.12);
  border-color: var(--lime);
}

.cal-tour-btn.playing {
  background: var(--lime-bright);
  color: var(--black);
  border-color: var(--lime-bright);
}

/* Month Navigation Bar */
.cal-month-nav {
  display: flex;
  align-items: center;
  background: var(--ink);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  padding: 6px;
  margin-bottom: 24px;
  gap: 6px;
  overflow-x: auto;
}

.cal-month-btn {
  flex: 1;
  min-width: 80px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-mut-light);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 4px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: all 0.2s ease;
}

.cal-month-btn small {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: none;
  opacity: 0.7;
  font-weight: 500;
}

.cal-month-btn:hover {
  color: var(--white);
  background: rgba(206, 255, 163, 0.06);
}

.cal-month-btn.active {
  background: var(--lime);
  color: var(--black);
  border-color: var(--lime-bright);
  box-shadow: 0 4px 14px rgba(206, 255, 163, 0.3);
}

.cal-month-btn.active small {
  color: var(--black);
  font-weight: 600;
  opacity: 0.85;
}

/* Timeline Canvas */
.cal-timeline-scroll {
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--lime-deep) var(--ink);
  -webkit-overflow-scrolling: touch;
}

.cal-timeline-scroll::-webkit-scrollbar {
  height: 6px;
}

.cal-timeline-scroll::-webkit-scrollbar-track {
  background: var(--ink);
  border-radius: 3px;
}

.cal-timeline-scroll::-webkit-scrollbar-thumb {
  background: var(--lime-deep);
  border-radius: 3px;
}

.cal-timeline {
  min-width: 960px;
  background: var(--ink);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

/* Timeline Column Header */
.cal-grid-header {
  display: grid;
  grid-template-columns: 210px repeat(7, 1fr);
  background: var(--black);
  border-bottom: 1px solid var(--line-dark);
}

.cal-brand-cell {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--line-dark);
}

.cal-brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: var(--white);
  line-height: 1;
}

.cal-brand-sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--lime);
  text-transform: uppercase;
  margin-top: 2px;
}

.cal-col-header {
  padding: 14px 8px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mut-light);
  border-right: 1px solid rgba(206, 255, 163, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.cal-col-header:last-child {
  border-right: none;
}

.cal-col-header:hover {
  color: var(--white);
  background: rgba(206, 255, 163, 0.05);
}

.cal-col-header.active-month {
  color: var(--lime);
  background: rgba(206, 255, 163, 0.08);
}

.cal-col-header.active-month::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--lime);
}

/* Background Column Guides */
.cal-grid-overlay {
  position: absolute;
  top: 50px;
  left: 210px;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  pointer-events: none;
  z-index: 1;
}

.cal-col-guide {
  border-right: 1px solid rgba(206, 255, 163, 0.06);
  transition: background 0.3s ease;
}

.cal-col-guide:last-child {
  border-right: none;
}

.cal-col-guide.active-month {
  background: rgba(206, 255, 163, 0.035);
  box-shadow: inset 0 0 16px rgba(206, 255, 163, 0.03);
}

/* Calendar Tracks */
.cal-track {
  display: grid;
  grid-template-columns: 210px 1fr;
  border-bottom: 1px solid var(--line-dark);
  position: relative;
  z-index: 2;
  transition:
    opacity 0.25s ease,
    max-height 0.35s ease;
}

.cal-track:last-child {
  border-bottom: none;
}

.cal-track.hidden-track {
  display: none;
}

.cal-track-label {
  padding: 16px 18px;
  border-right: 1px solid var(--line-dark);
  background: rgba(11, 13, 8, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cal-track-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.15;
}

.cal-track-title.lime {
  color: var(--lime);
}

.cal-track-sub {
  font-family: var(--font-display);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mut-light);
  margin-top: 4px;
}

.cal-track-note {
  font-size: 0.68rem;
  line-height: 1.25;
  color: var(--text-mut-light);
  margin-top: 6px;
  font-style: italic;
}

.cal-track-body {
  padding: 14px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

/* Exposure / Pressure Gradient Bars */
.cal-indicator-wrapper {
  position: relative;
  width: 100%;
}

.cal-indicator-bar {
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.cal-indicator-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--black);
  position: relative;
  z-index: 2;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
}

/* Tick Risk Bar: High in spring (Apr-Jun), lower in mid-summer (Jul-Aug), spikes in fall (Sep-Oct) */
.cal-indicator-bar.tick-risk {
  background: linear-gradient(
    90deg,
    #2c4a16 0%,
    #4e7a1f 12%,
    #8ec93b 24%,
    #ceffa3 36%,
    #538022 50%,
    #3b5c19 65%,
    #8ec93b 78%,
    #ceffa3 88%,
    #538022 100%
  );
}

/* Mosquito Pressure: Minimal in Apr, ramp in May, peak Jun-Aug, ramp down Sep-Oct */
.cal-indicator-bar.mosquito-pressure {
  background: linear-gradient(
    90deg,
    #131c0a 0%,
    #1e320f 12%,
    #4e7a1f 20%,
    #a2e247 30%,
    #ceffa3 45%,
    #ceffa3 65%,
    #8ec93b 80%,
    #3b5c19 92%,
    #18260d 100%
  );
}

/* Schedule Canvas with Service Diamonds & Intervals */
.cal-schedule-row {
  position: relative;
  height: 52px;
  width: 100%;
}

/* Coverage Range Brackets */
.cal-range-bracket {
  position: absolute;
  height: 20px;
  top: 16px;
  border: 1px solid rgba(206, 255, 163, 0.4);
  background: rgba(206, 255, 163, 0.05);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--lime);
  pointer-events: none;
  z-index: 1;
}

/* Diamonds */
.cal-diamond {
  position: absolute;
  top: 15px;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
}

.cal-diamond::before {
  content: '';
  width: 14px;
  height: 14px;
  background: var(--lime);
  border: 2px solid var(--black);
  transform: rotate(45deg);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 10px rgba(206, 255, 163, 0.6);
}

.cal-diamond:hover::before,
.cal-diamond:focus::before {
  transform: rotate(45deg) scale(1.4);
  background: var(--white);
  box-shadow: 0 0 18px var(--lime);
}

/* Invisible hit-area expansion for touch targets */
.cal-diamond::after {
  content: '';
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -12px;
  right: -12px;
}

/* Interval Badges between Mosquito Diamonds */
.cal-interval-tag {
  position: absolute;
  top: 18px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-mut-light);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

/* Tick Life Cycle Rows */
.cal-lifecycle-subrow {
  display: grid;
  grid-template-columns: 75px 1fr;
  align-items: center;
  gap: 12px;
  position: relative;
}

.cal-lc-year {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  color: var(--lime);
  text-transform: uppercase;
}

.cal-lc-stages {
  position: relative;
  height: 38px;
  width: 100%;
}

.cal-lc-pill {
  position: absolute;
  height: 30px;
  top: 4px;
  border: 1px solid rgba(206, 255, 163, 0.35);
  background: rgba(18, 21, 13, 0.85);
  border-radius: 4px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  z-index: 3;
}

.cal-lc-pill:hover {
  background: rgba(206, 255, 163, 0.15);
  border-color: var(--lime);
  color: var(--lime);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(206, 255, 163, 0.2);
}

/* Connecting arrows in Life Cycle */
.cal-lc-arrow-down {
  position: absolute;
  top: 32px;
  left: 21%;
  width: 1px;
  height: 18px;
  border-left: 1px dashed rgba(206, 255, 163, 0.4);
  pointer-events: none;
  z-index: 1;
}

/* Plant Foliage Development Blocks */
.cal-foliage-blocks {
  position: relative;
  height: 36px;
  width: 100%;
}

.cal-foliage-block {
  position: absolute;
  top: 2px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 10px;
  text-align: center;
}

.cal-foliage-block.f-evergreen {
  border: 1px solid rgba(206, 255, 163, 0.3);
  background: rgba(44, 74, 22, 0.35);
  color: var(--text-mut-light);
}

.cal-foliage-block.f-deciduous {
  border: 1px solid rgba(206, 255, 163, 0.5);
  background: rgba(78, 122, 31, 0.45);
  color: var(--text-light);
}

.cal-foliage-block.f-full {
  border: 1px solid var(--lime);
  background: rgba(206, 255, 163, 0.18);
  color: var(--lime);
  box-shadow: inset 0 0 14px rgba(206, 255, 163, 0.1);
}

/* Legend Bar */
.cal-legend-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  padding: 14px 20px;
  background: var(--black);
  border-top: 1px solid var(--line-dark);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mut-light);
}

.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cal-legend-diamond {
  width: 10px;
  height: 10px;
  background: var(--lime);
  transform: rotate(45deg);
  box-shadow: 0 0 6px var(--lime);
}

.cal-legend-bracket {
  width: 32px;
  height: 14px;
  border: 1px solid rgba(206, 255, 163, 0.4);
  background: rgba(206, 255, 163, 0.08);
  border-radius: 2px;
}

.cal-legend-gradient {
  width: 60px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(90deg, #1e320f, #ceffa3);
}

/* Interactive Inspector / Month Field Guide Card */
.cal-inspector {
  background: var(--ink-2);
  border: 1px solid rgba(206, 255, 163, 0.22);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  position: relative;
  transition: all 0.3s ease;
}

.cal-inspector-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(206, 255, 163, 0.12);
}

.cal-inspector-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cal-inspector-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lime);
}

.cal-inspector-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime-bright);
  box-shadow: 0 0 8px var(--lime);
}

.cal-inspector-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  letter-spacing: 0.02em;
  color: var(--white);
  line-height: 1.15;
}

.cal-inspector-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.cal-info-card {
  background: rgba(11, 13, 8, 0.65);
  border: 1px solid rgba(206, 255, 163, 0.1);
  border-radius: var(--radius-sm);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cal-info-card.full-width {
  grid-column: span 2;
}

.cal-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cal-info-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime);
}

.cal-info-title svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.cal-info-rating {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(206, 255, 163, 0.12);
  color: var(--lime-bright);
  border: 1px solid rgba(206, 255, 163, 0.2);
}

.cal-meter {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.cal-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--lime-deep), var(--lime-bright));
  border-radius: 999px;
  transition: width 0.4s ease;
}

.cal-info-card p {
  color: var(--text-mut-light);
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0;
}

.cal-info-stage {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 8px;
  border-radius: 4px;
}

/* Scheduled Services in Field Guide */
.cal-services-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.cal-srv-item {
  background: rgba(18, 21, 13, 0.7);
  border: 1px solid rgba(206, 255, 163, 0.12);
  border-left: 4px solid var(--lime);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cal-srv-item.srv-tick {
  border-left-color: #8ec93b;
}

.cal-srv-item.srv-mosquito {
  border-left-color: var(--lime);
}

.srv-badge-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.srv-diamond-icon {
  color: var(--lime);
  font-size: 0.9rem;
}

.srv-type-tag {
  font-weight: 700;
  color: var(--white);
}

.srv-interval-tag {
  color: var(--lime);
  background: rgba(206, 255, 163, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.srv-details strong {
  display: block;
  font-size: 1.05rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--white);
  margin-bottom: 2px;
}

.srv-timing {
  font-size: 0.82rem;
  color: var(--lime);
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}

.srv-details p {
  font-size: 0.9rem;
  color: var(--text-mut-light);
  line-height: 1.5;
  margin: 0;
}

/* Action Takeaway Footnote & CTA */
.cal-inspector-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(206, 255, 163, 0.1);
}

.cal-takeaway {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 650px;
}

.cal-takeaway-icon {
  width: 20px;
  height: 20px;
  color: var(--lime);
  flex: none;
  margin-top: 2px;
}

.cal-takeaway p {
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.5;
  margin: 0;
}

.cal-takeaway p strong {
  color: var(--lime);
}

/* Floating Tooltip */
.cal-tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  background: rgba(11, 13, 8, 0.96);
  border: 1px solid var(--lime);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.7),
    0 0 14px rgba(206, 255, 163, 0.25);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 220px;
  max-width: 290px;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
}

.cal-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--lime);
}

.cal-tooltip.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -100%) translateY(-6px);
}

.cal-tooltip-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lime);
  line-height: 1.2;
}

.cal-tooltip-sub {
  font-size: 0.76rem;
  color: var(--text-mut-light);
  margin: 2px 0 6px;
  font-weight: 500;
}

.cal-tooltip-body {
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.45;
  margin: 0;
}

/* Responsive Breakpoints for Calendar */
@media (max-width: 900px) {
  .cal-inspector-grid {
    grid-template-columns: 1fr;
  }
  .cal-info-card.full-width {
    grid-column: span 1;
  }
  .cal-inspector {
    padding: 24px 20px;
  }
  .cal-inspector-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .cal-inspector-footer .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .cal-header-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .cal-controls {
    justify-content: space-between;
  }
  .cal-filter-group {
    width: 100%;
    justify-content: space-between;
  }
  .cal-filter-btn {
    padding: 6px 10px;
    font-size: 0.82rem;
  }
  .cal-tour-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Mosquito + Tick Bundle Highlight Banner ---------- */

.bundle-promo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--ink-2);
  border: 1.5px solid var(--lime);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 32px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.bundle-promo-icon svg {
  width: 38px;
  height: 38px;
  color: var(--lime);
  flex-shrink: 0;
}

.bundle-promo-text {
  flex: 1;
}

.bundle-promo-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 4px;
}

.bundle-promo-text h3 {
  color: var(--white);
  font-size: 1.35rem;
  margin: 0 0 6px;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bundle-promo-text p {
  color: var(--text-mut-light);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.5;
}

.bundle-promo-cta {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .bundle-promo-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 16px;
  }
  .bundle-promo-cta {
    width: 100%;
  }
  .bundle-promo-cta .btn {
    width: 100%;
    justify-content: center;
  }
}