/* ============================================================
   Ohh! Pest Control — Main Stylesheet
   File: css/styles.css
   Brand: Hot Pink #FC4DB9 + Bright Yellow #FDDB02 + Black + White
   Colours sampled directly from the Ohh! logo artwork.
   ============================================================ */

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Ohh! brand ── sampled from the logo artwork ── */
  --pink:         #FC4DB9;   /* primary — the "ohh" wordmark            */
  --pink-hover:   #E62FA1;
  --pink-deep:    #C41F85;   /* text-on-white pink, passes AA           */
  --pink-tint:    #FFEAF7;
  --pink-tint-2:  #FFD3EE;
  --yellow:       #FDDB02;   /* secondary — the "PEST CONTROL" letters  */
  --yellow-hover: #EFCE00;
  --gold:         #FDC425;   /* the face                                */

  /* ── Neutrals ── */
  --black:     #000000;
  --ink:       #101014;
  --ink-soft:  #1D1D22;
  --white:     #FFFFFF;
  --off-white: #FFF7FB;
  --gray-900:  #16161A;
  --gray-700:  #3A3A42;
  --gray-500:  #6B6B75;
  --gray-200:  #E7E3E8;
  --gray-100:  #F4F1F5;
  --gray-50:   #FAF8FA;
  --border:    #E7E3E8;
  --dark-bg:   #101014;
  --dark-card: #1D1D22;

  /* ── Typography ── */
  --font-sans:    'Inter', system-ui, sans-serif;
  --font-display: 'Fredoka', 'Inter', system-ui, sans-serif;
  --font-serif:   var(--font-display);   /* legacy alias */

  /* ── Shape ── the logo is built from heavy black outlines, so buttons
     and badges echo that with a hard black keyline + offset shadow ── */
  --radius:     12px;
  --radius-pill: 999px;
  --keyline:    2.5px solid var(--black);
  --pop:        0 4px 0 var(--black);
  --pop-sm:     0 3px 0 var(--black);

  /* ── Legacy aliases ──────────────────────────────────────────────────
     The old --blue-* names are still referenced by inherited markup and
     inline styles. Remapping them here rebrands those call sites without
     leaving a second, conflicting palette in the codebase. ── */
  --blue-900: var(--ink);
  --blue-800: var(--ink-soft);
  --blue-700: var(--pink);
  --blue-600: var(--pink-hover);
  --blue-400: var(--yellow);
  --blue-200: var(--pink-tint-2);
  --blue-100: var(--pink-tint);
  --blue-50:  var(--pink-tint);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--gray-900);
  background: var(--white);
  line-height: 1.6;
}

/* ── UTILITY ── */
.container {
  max-width: 1200px;
  margin: 0 auto;
}
section { padding: 72px 40px; }
.section-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--pink-deep);
  margin-bottom: 10px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
  margin-bottom: 14px;
}
.section-subtitle {
  font-size: 16px;
  color: var(--gray-500);
  max-width: 560px;
  line-height: 1.7;
}

/* ── BUTTONS ── */
/* Filled brand buttons always use black text: white on hot pink is 3.0:1,
   black is 6.9:1 (AA). Black keyline + offset shadow echoes the logo. */
.btn-primary,
.btn-secondary,
.btn-white,
.form-submit,
.form-submit-btn,
.sticky-phone,
.nav-cta {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.2px;
  border-radius: var(--radius-pill);
  border: var(--keyline);
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-white:focus-visible,
.form-submit:focus-visible,
.form-submit-btn:focus-visible,
.sticky-phone:focus-visible,
.nav-cta:focus-visible,
.btn-outline:focus-visible,
.btn-ghost:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.btn-primary {
  background: var(--pink);
  color: var(--black);
  padding: 15px 30px;
  font-size: 15px;
  box-shadow: var(--pop);
}
.btn-primary:hover { background: var(--pink-hover); transform: translateY(2px); box-shadow: var(--pop-sm); }
.btn-primary:active { transform: translateY(4px); box-shadow: 0 0 0 var(--black); }

.btn-secondary {
  background: var(--yellow);
  color: var(--black);
  padding: 15px 30px;
  font-size: 15px;
  box-shadow: var(--pop);
}
.btn-secondary:hover { background: var(--yellow-hover); transform: translateY(2px); box-shadow: var(--pop-sm); }

/* Ghost button for use on dark / photographic backgrounds */
.btn-outline {
  border: 2.5px solid var(--yellow);
  color: var(--yellow);
  background: transparent;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.18s ease;
  display: inline-block;
}
.btn-outline:hover { background: var(--yellow); color: var(--black); }

/* ── ECO CALLOUT BAR ── */
.eco-callout {
  background: var(--pink);
  border-bottom: 3px solid var(--black);
  padding: 11px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  color: var(--black);          /* 6.9:1 on hot pink */
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.2px;
}

/* ── TOP BAR ── */
.topbar {
  background: var(--blue-900);
  color: var(--blue-200);
  font-size: 13px;
  padding: 8px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar a { color: var(--pink-tint-2); text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--yellow); }
.topbar-stars { display: flex; gap: 6px; align-items: center; }
.stars { color: var(--gold); letter-spacing: 1px; }

/* ── NAV ── */
nav {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  height: 110px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo img {
  height: 84px;
  width: auto;
  max-width: 100%;
  display: block;
  /* intrinsic ratio is 700x304 — locked so the mark never stretches */
  aspect-ratio: 700 / 304;
  object-fit: contain;
}
.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
  list-style: none;
}
.nav-links a {
  text-decoration: none;
  color: var(--gray-700);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
  position: relative;
}
.nav-links a:hover { color: var(--pink-deep); }
.nav-links .dropdown > a::after { content: ' ▾'; font-size: 10px; }

/* Dropdown navigation */
.nav-links li { position: relative; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #fff;
  list-style: none;
  padding: 10px 0;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  z-index: 500;
}
.dropdown:hover > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu { display: block; }
.dropdown-menu li { width: 100%; border-bottom: 0; }
.dropdown-menu a {
  display: block;
  padding: 10px 16px;
  white-space: nowrap;
  font-size: 14px;
}
.dropdown-menu a:hover { background: var(--gray-100); }
.towns-grid a { color: inherit; text-decoration: none; }
.towns-grid a:hover { color: var(--blue-700); }
@media (max-width: 900px) {
  .dropdown-menu {
    display: block;
    position: static;
    min-width: 0;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 8px 16px;
    background: transparent;
  }
  .dropdown-menu a {
    padding: 9px 0;
    font-size: 15px;
    color: var(--gray-700);
    white-space: normal;
  }
}

.nav-cta {
  background: var(--pink);
  color: var(--black) !important;
  padding: 11px 22px;
  font-size: 14px;
  box-shadow: var(--pop-sm);
}
.nav-cta:hover { background: var(--yellow); color: var(--black) !important; transform: translateY(2px); box-shadow: 0 1px 0 var(--black); }

/* Mobile hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  margin: 5px 0;
  transition: all 0.3s;
}

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 580px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.72) 52%, rgba(0,0,0,0.25) 100%);
  z-index: 1;
}
.hero-bg-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 32px 32px;
  z-index: 1;
}
.hero-deco-1 {
  position: absolute;
  right: -60px;
  top: -60px;
  width: 520px;
  height: 520px;
  background: rgba(255,255,255,0.04);
  border-radius: 50% 0 50% 50%;
  transform: rotate(-15deg);
  z-index: 1;
}
.hero-deco-2 {
  position: absolute;
  right: 120px;
  bottom: -80px;
  width: 340px;
  height: 340px;
  background: rgba(255,255,255,0.03);
  border-radius: 50% 50% 0 50%;
  transform: rotate(25deg);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
  align-items: center;
  width: 100%;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pink);
  color: var(--black);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
  border: 2px solid var(--black);
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 700;
  color: white;
  line-height: 1.1;
  margin-bottom: 20px;
}
.hero-title .accent { color: var(--yellow); }
.hero-subtitle {
  font-size: 17px;
  color: rgba(255,255,255,0.75);
  max-width: 480px;
  margin-bottom: 36px;
  line-height: 1.7;
}
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.hero-stat .num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--yellow);
  line-height: 1;
}
.hero-stat .label {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
}

/* ── HERO FORM CARD ── */
.hero-form-card {
  background: white;
  border: 3px solid var(--black);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 8px 8px 0 var(--pink);
}
.hero-form-card h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--blue-800);
  margin-bottom: 6px;
}
.hero-form-card > p {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 22px;
}
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-group input,
.form-group select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
  color: var(--gray-900);
  background: var(--gray-50);
  outline: none;
  transition: border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px var(--pink-tint-2);
}
.form-submit {
  width: 100%;
  background: var(--pink);
  color: var(--black);
  padding: 15px;
  font-size: 16px;
  box-shadow: var(--pop);
  margin-top: 6px;
}
.form-submit:hover { background: var(--yellow); transform: translateY(2px); box-shadow: var(--pop-sm); }
.form-note {
  font-size: 11px;
  color: var(--gray-500);
  text-align: center;
  margin-top: 10px;
}

/* ── TRUST BAR ── */
.trust-bar {
  background: var(--blue-50);
  border-top: 1px solid var(--blue-100);
  border-bottom: 1px solid var(--blue-100);
  padding: 20px 40px;
}
.trust-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--blue-800);
  font-size: 14px;
  font-weight: 500;
}
.trust-icon {
  width: 36px;
  height: 36px;
  background: var(--yellow);
  border: 2px solid var(--black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  font-size: 16px;
  flex-shrink: 0;
}

/* ── SERVICES ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 44px;
}
.service-card {
  --accent: var(--pink);
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s, background 0.3s;
  display: block;
}
.service-card:nth-child(6n+1) { --accent: #FC4DB9; }
.service-card:nth-child(6n+2) { --accent: #FDC425; }
.service-card:nth-child(6n+3) { --accent: #101014; }
.service-card:nth-child(6n+4) { --accent: #C41F85; }
.service-card:nth-child(6n+5) { --accent: #FDDB02; }
.service-card:nth-child(6n+0) { --accent: var(--pink-deep); }
.service-card:hover {
  border-color: var(--accent);
  transform: translateY(-6px);
  box-shadow: 0 10px 26px rgba(252,77,185,0.15);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, white);
}
.service-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 10px;
}
img.service-icon {
  width: 182px;
  height: 182px;
  object-fit: cover;
  border-radius: 18px;
  margin: 0 auto 12px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.service-card:hover img.service-icon {
  transform: scale(1.06) rotate(-1.5deg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent);
}
.service-card h3 { font-size: 14px; font-weight: 600; color: var(--gray-900); transition: color 0.3s; }
.service-card:hover h3 { color: var(--accent); }
.service-card p  { font-size: 12px; color: var(--gray-500); margin-top: 4px; }
.service-card-arrow {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-700);
  transition: gap 0.2s, color 0.3s;
}
.service-card:hover .service-card-arrow { gap: 7px; color: var(--accent); }

/* ── WHY SECTION ── */
.why-section { background: var(--gray-50); }
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.why-img-main {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--blue-100);
  position: relative;
}
.why-img-main svg { width: 100%; height: 100%; }
.why-img-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--blue-700);
  color: white;
  border-radius: 14px;
  padding: 16px 22px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.2);
}
.why-img-badge .big-num  { font-size: 36px; font-weight: 700; line-height: 1; }
.why-img-badge .badge-label { font-size: 12px; opacity: 0.85; margin-top: 3px; }
.why-image-block { position: relative; }
.why-points { display: flex; flex-direction: column; gap: 22px; margin-top: 32px; }
.why-point { display: flex; gap: 16px; align-items: flex-start; }
.why-point-icon {
  width: 44px;
  height: 44px;
  background: var(--blue-50);
  border: 1.5px solid var(--blue-200);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.why-point h4 { font-size: 15px; font-weight: 700; color: var(--gray-900); margin-bottom: 3px; }
.why-point p  { font-size: 13px; color: var(--gray-500); line-height: 1.6; }

/* ── COMMON NJ PESTS ── */
.pests-section { background: var(--blue-900); }
.pests-section .section-eyebrow { color: var(--blue-400); }
.pests-section .section-title   { color: white; }
.pests-section .section-subtitle{ color: rgba(255,255,255,0.65); }
.pests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 44px;
}
.pest-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 24px;
  transition: border-color 0.2s, background 0.2s;
}
.pest-card:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(253,219,2,0.4);
}
.pest-card-icon { font-size: 36px; margin-bottom: 12px; display: block; }
.pest-card h3   { color: white; font-size: 17px; margin-bottom: 8px; }
.pest-card p    { color: rgba(255,255,255,0.6); font-size: 13px; line-height: 1.7; }
.pest-card a {
  color: var(--blue-400);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: block;
  margin-top: 12px;
  transition: color 0.2s;
}
.pest-card a:hover { color: var(--blue-200); }

/* ── TOWNS WE SERVE ── */
.towns-section { background: var(--blue-50); }
.towns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.town-card {
  background: white;
  border-radius: 10px;
  padding: 18px 20px;
  border: 1px solid var(--blue-100);
}
.town-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-700);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.town-card ul { list-style: none; font-size: 13px; color: var(--gray-700); line-height: 2; }
.towns-cta-banner {
  margin-top: 32px;
  background: var(--blue-700);
  border-radius: 12px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
/* black type on hot pink = 6.9:1 */
.towns-cta-banner { border: 3px solid var(--black); }
.towns-cta-banner .cta-text { color: var(--black); font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.towns-cta-banner .cta-sub  { color: rgba(0,0,0,0.78); font-size: 14px; margin-top: 4px; font-weight: 500; }
.towns-cta-banner a {
  background: var(--yellow);
  color: var(--black);
  padding: 13px 26px;
  border: var(--keyline);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--pop-sm);
  transition: background 0.2s, transform 0.12s;
}
.towns-cta-banner a:hover { background: var(--white); transform: translateY(2px); }

/* ── PROCESS ── */
.process-section { background: white; }
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 48px;
  position: relative;
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--blue-200);
  z-index: 0;
}
.process-step { text-align: center; position: relative; z-index: 1; }
.step-circle {
  width: 58px;
  height: 58px;
  background: var(--yellow);
  color: var(--black);
  font-family: var(--font-display);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  margin: 0 auto 18px;
  border: 3px solid var(--black);
  box-shadow: 0 4px 0 var(--black);
}
.process-step h3 { font-size: 15px; font-weight: 700; color: var(--gray-900); margin-bottom: 6px; }
.process-step p  { font-size: 13px; color: var(--gray-500); line-height: 1.6; }

/* ── PROTECTION PLANS ── */
.plans-section { background: var(--blue-900); }
.plans-section .section-eyebrow  { color: var(--blue-400); }
.plans-section .section-title    { color: white; }
.plans-section .section-subtitle { color: rgba(255,255,255,0.6); }
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.plan-card {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 30px 26px;
  position: relative;
  transition: border-color 0.2s;
}
.plan-card.featured {
  background: var(--pink);
  border-color: var(--black);
  border-width: 3px;
}
.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--yellow);
  color: var(--black);
  border: 2px solid var(--black);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
}
.plan-name  { font-size: 18px; font-weight: 700; color: white; margin-bottom: 6px; }
.plan-price { margin: 18px 0 20px; }
.plan-price .from   { font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 4px; }
.plan-price .amount { font-size: 36px; font-weight: 700; color: white; }
.plan-price .period { font-size: 14px; color: rgba(255,255,255,0.55); }
.plan-features { list-style: none; margin-bottom: 28px; }
.plan-features li {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 8px;
}
.plan-features li::before { content: '✓'; color: var(--blue-400); font-weight: 700; flex-shrink: 0; }
.plan-cta {
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 7px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s;
}
.plan-card:not(.featured) .plan-cta {
  border: 1.5px solid rgba(255,255,255,0.3);
  color: white;
}
.plan-card:not(.featured) .plan-cta:hover { border-color: var(--blue-400); color: var(--blue-400); }
.plan-card.featured .plan-cta { background: white; color: var(--blue-800); }
.plan-card.featured .plan-cta:hover { background: var(--blue-100); }

/* ── GALLERY ── */
.gallery-section { background: var(--off-white); overflow: hidden; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
  margin-top: 40px;
}
.gallery-item {
  --accent: var(--pink);
  aspect-ratio: 1;
  border-radius: 20px;
  overflow: hidden;
  background: var(--blue-100);
  position: relative;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.gallery-item:nth-child(5n+1) { --accent: #FC4DB9; }
.gallery-item:nth-child(5n+2) { --accent: #FDC425; }
.gallery-item:nth-child(5n+3) { --accent: #101014; }
.gallery-item:nth-child(5n+4) { --accent: #C41F85; }
.gallery-item:nth-child(5n+0) { --accent: #FDDB02; }
.gallery-item:hover {
  box-shadow: 0 20px 40px color-mix(in srgb, var(--accent) 35%, transparent);
  transform: translateY(-6px);
}
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px var(--accent);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item img  { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 42%, rgba(0,0,0,0) 70%);
  display: flex;
  align-items: flex-end;
  padding: 18px;
}
.gallery-overlay span {
  color: white;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.1px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.gallery-item:hover .gallery-overlay span { transform: translateY(-4px); }

/* ── TESTIMONIALS ── */
.testimonials-section { background: var(--gray-50); }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.testimonial-card {
  background: white;
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  padding: 24px;
}
.testimonial-stars  { color: var(--gold); font-size: 16px; margin-bottom: 12px; letter-spacing: 2px; }
.testimonial-text   { font-size: 14px; color: var(--gray-700); line-height: 1.7; margin-bottom: 18px; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pink);
  border: 2px solid var(--black);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.author-name { font-size: 14px; font-weight: 700; color: var(--gray-900); }
.author-loc  { font-size: 12px; color: var(--gray-500); }

/* ── SERVICE AREAS ── */
.areas-section { background: white; }
.areas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.area-county h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--blue-700);
  padding: 8px 0;
  border-bottom: 2px solid var(--blue-200);
  margin-bottom: 10px;
}
.area-county ul { list-style: none; }
.area-county ul li { font-size: 13px; color: var(--gray-700); padding: 4px 0; cursor: pointer; }
.area-county ul li:hover { color: var(--blue-700); text-decoration: underline; }

/* ── CTA BAND ── */
/* Black band lets both brand colours sit on it at full strength */
.cta-band {
  background: var(--ink);
  border-top: 6px solid var(--pink);
  padding: 68px 40px;
  text-align: center;
}
.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 14px;
}
.cta-band h2 .accent { color: var(--yellow); }
.cta-band p { font-size: 17px; color: rgba(255,255,255,0.82); margin-bottom: 32px; }
.btn-white {
  background: var(--yellow);
  color: var(--black);
  padding: 16px 38px;
  font-size: 16px;
  margin: 6px 8px;
  box-shadow: var(--pop);
}
.btn-white:hover { background: var(--white); transform: translateY(2px); box-shadow: var(--pop-sm); }
.btn-ghost {
  border: 2.5px solid var(--pink);
  color: var(--pink);
  background: transparent;
  padding: 15px 36px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
  margin: 6px 8px;
  transition: all 0.18s ease;
}
.btn-ghost:hover { background: var(--pink); color: var(--black); }

/* ── FOOTER ── */
footer {
  background: var(--ink);
  border-top: 6px solid var(--pink);
  color: rgba(255,255,255,0.65);
  padding: 60px 40px 30px;
}
.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-brand p { font-size: 14px; line-height: 1.7; margin-top: 12px; }
.footer-logo {
  display: block;
  margin-bottom: 14px;
}
.footer-logo img {
  height: 68px;
  aspect-ratio: 700 / 304;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
  /* No filter — show the real branded logo on the dark footer */
  filter: none;
}
.footer-col h4, .footer-col h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: white;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 9px; }
.footer-col ul li a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}
.footer-col ul li a:hover { color: var(--yellow); }
.footer-contact { display: flex; flex-direction: column; gap: 12px; }
.footer-contact a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}
.footer-contact a:hover { color: var(--yellow); }
.footer-rating {
  margin-top: 20px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 14px;
}
.footer-rating .label { font-size: 12px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.footer-rating .stars { font-size: 20px; letter-spacing: 2px; }
.footer-rating .count { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 4px; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
  background: rgba(255,255,255,0.1);
  color: white;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  transition: background 0.2s;
}
.footer-social a:hover { background: var(--pink); color: var(--black); }
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 12px;
}
.cert-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.cert-badge {
  border: 1px solid rgba(255,255,255,0.2);
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.certifications-section {
  padding: 72px 40px;
  background: var(--gray-50);
  text-align: center;
}
.certifications-section .section-subtitle { margin: 0 auto; max-width: 560px; }
.cert-logos-grid {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.cert-logo-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 180px;
  transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
}
.cert-logo-card:hover {
  box-shadow: 0 10px 26px rgba(252,77,185,0.15);
  transform: translateY(-4px);
  border-color: var(--blue-400);
}
.cert-logo-card img {
  height: 56px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
}
.cert-logo-card span {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
@media (max-width: 600px) {
  .certifications-section { padding: 48px 20px; }
  .cert-logo-card { padding: 22px 24px; min-width: 140px; }
  .cert-logo-card img { height: 44px; }
}

/* ── STICKY PHONE ── */
.sticky-phone {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--pink);
  color: var(--black);
  padding: 14px 24px;
  font-size: 15px;
  box-shadow: var(--pop), 0 10px 24px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 200;
  /* comfortably above the 44px minimum tap target */
  min-height: 48px;
}
.sticky-phone:hover { background: var(--yellow); transform: translateY(2px); }

/* ── ICON UTILITIES ── */
.icon-inline {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 6px;
  flex-shrink: 0;
}
.icon-inline svg, .icon-inline img { width: 100%; height: 100%; }
.contact-item .icon-inline { width: 18px; height: 18px; color: var(--pink-deep); }
.trust-icon-svg {
  display: block;
  width: 36px;
  height: 36px;
  color: var(--pink-deep);
  margin-bottom: 8px;
}
.why-point-icon svg, .why-card-icon svg { width: 32px; height: 32px; }
.sidebar-trust .trust-item-small .icon-sm { width: 14px; height: 14px; display: inline-block; vertical-align: middle; margin-right: 4px; color: var(--blue-700); }

/* ── REVIEWS SECTION ── */
.reviews-section {
  background: var(--off-white);
  padding: 72px 40px;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.review-card {
  background: var(--white);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 3px solid var(--gold);
}
.review-stars { color: var(--gold); font-size: 18px; letter-spacing: 2px; }
.review-text { font-size: 15px; line-height: 1.7; color: var(--gray-700); flex: 1; }
.review-author { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  width: 42px; height: 42px;
  background: var(--pink);
  border: 2px solid var(--black);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--black); font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.review-name { font-weight: 600; font-size: 14px; color: var(--gray-900); }
.review-location { font-size: 12px; color: var(--gray-500); }
.review-google-badge {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--gray-500); margin-top: 4px;
}
.review-google-logo { width: 14px; height: 14px; }
.reviews-cta { text-align: center; margin-top: 36px; }
.reviews-cta a { color: var(--pink-deep); font-weight: 600; text-decoration: none; font-size: 15px; }
.reviews-cta a:hover { text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .plans-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}

/* NAV: mobile — hide links by default, show toggle */
@media (max-width: 900px) {
  .nav-links {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.97);
    z-index: 200;
    padding: 90px 28px 32px;
    gap: 0;
    overflow-y: auto;
    box-shadow: none;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links li {
    width: 100%;
    border-bottom: 1px solid var(--gray-200);
  }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a {
    display: block;
    padding: 16px 0;
    font-size: 17px;
    color: var(--gray-900);
  }
  .nav-links .nav-cta {
    display: inline-block;
    margin-top: 16px;
    padding: 14px 28px;
    text-align: center;
    width: 100%;
    font-size: 16px;
    background: var(--blue-700);
    color: white !important;
    border-radius: 8px;
    border-bottom: none;
  }
  .nav-toggle {
    display: block;
    position: relative;
    z-index: 300;
  }
  nav { position: sticky; z-index: 250; }

  .hero-content { grid-template-columns: 1fr; gap: 24px; }
  .hero-form-card { display: block; width: 100%; }
  .why-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .process-steps::before { display: none; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .areas-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  section { padding: 48px 20px; }
  .eco-callout { padding: 10px 16px; font-size: 12px; text-align: center; flex-wrap: wrap; gap: 6px; }
  .topbar { padding: 8px 16px; flex-wrap: wrap; gap: 4px; font-size: 11px; }
  .topbar > div:first-child { display: flex; flex-direction: column; gap: 2px; }
  .topbar-stars { font-size: 11px; }
  nav { padding: 0 14px; height: 72px; }
  .logo img { height: 54px; }
  .cta-band { padding: 48px 20px; }
  .cta-band h2 { font-size: 28px; }
  footer { padding: 48px 20px 24px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .sticky-phone { bottom: 16px; right: 16px; font-size: 13px; padding: 10px 16px; }
  .hero-content { padding: 48px 20px; }
  .hero-stats { flex-wrap: wrap; gap: 16px; }
  .areas-grid { grid-template-columns: 1fr 1fr; }
  .pests-grid { grid-template-columns: 1fr; }
  .towns-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { padding-top: 76px; }
}

/* ============================================================
   NAV FIX — desktop + mobile dropdown behavior
   ============================================================ */
nav {
  position: sticky;
  top: 0;
  z-index: 1000;
}
.nav-links li { position: relative; }
.dropdown > a { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
  list-style: none;
  padding: 10px 0;
  z-index: 1100;
}
.dropdown:hover > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu,
.dropdown.dropdown-open > .dropdown-menu { display: block; }
.dropdown-menu a { display: block; padding: 10px 16px; white-space: nowrap; }

@media (max-width: 900px) {
  nav { height: 76px; padding: 0 16px; }
  .logo img { height: 58px; }
  .nav-toggle { display: block; position: relative; z-index: 1201; }
  .nav-links {
    display: none;
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(255, 255, 255, 0.97);
    padding: 24px 24px 32px;
    overflow-y: auto;
    z-index: 1200;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; border-bottom: 1px solid var(--gray-200); }
  .nav-links a { display: flex; width: 100%; padding: 15px 0; font-size: 17px; color: var(--gray-900); }
  .dropdown-menu {
    display: none !important;
    position: static;
    min-width: 0;
    background: var(--gray-100);
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    margin: 0 0 12px 0;
    padding: 6px 12px;
  }
  .dropdown.dropdown-open > .dropdown-menu { display: block !important; }
  .dropdown-menu li { border-bottom: 0; }
  .dropdown-menu a { padding: 10px 4px; font-size: 15px; white-space: normal; color: var(--gray-700); }
  .nav-links .nav-cta { justify-content: center; margin-top: 16px; padding: 14px 20px; }
}

/* ── MID-PAGE FORM ── */
.mid-form-card .form-group { margin-bottom: 14px; }
.mid-form-card .form-group label { display: block; font-size: 0.88rem; font-weight: 600; color: #3A3A42; margin-bottom: 5px; }
.mid-form-card .form-group input { width: 100%; padding: 11px 14px; border: 1.5px solid #CFC9D2; border-radius: 8px; font-size: 0.97rem; font-family: inherit; outline: none; transition: border-color .2s; }
.mid-form-card .form-group input:focus { border-color: #FC4DB9; box-shadow: 0 0 0 3px rgba(252,77,185,.12); }
@media (max-width: 600px) {
  .mid-form-card { padding: 28px 18px !important; }
  .mid-form-card > div:first-child { grid-template-columns: 1fr !important; }
  .hero-content { padding: 32px 16px; gap: 24px; }
  .hero-form-card { margin-top: 0; }
}

/* ── HIDE TOP BARS ON MOBILE ── */
@media (max-width: 900px) {
  .eco-callout,
  .topbar {
    display: none;
  }
}

/* ── WEATHER WIDGET ── */
.weather-widget {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 28px;
  padding: 18px 40px;
  background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-700) 130%);
  color: #fff;
}
.weather-location {
  flex-shrink: 0;
}
.weather-location-name {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.weather-current {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding-right: 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  white-space: nowrap;
}
.weather-current-icon svg { width: 44px; height: 44px; display: block; }
.weather-current-temp { font-size: 26px; font-weight: 800; line-height: 1; text-align: center; }
.weather-current-desc { font-size: 12.5px; color: rgba(255, 255, 255, 0.75); margin-top: 4px; text-transform: capitalize; text-align: center; }
.weather-forecast {
  display: flex;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.weather-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 76px;
  padding: 2px 8px;
}
.weather-day-name { font-size: 12.5px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; }
.weather-day-icon svg { width: 28px; height: 28px; display: block; }
.weather-day-temps { font-size: 13px; display: flex; gap: 8px; white-space: nowrap; }
.weather-day-high { color: #fff; font-weight: 700; }
.weather-day-low { color: rgba(255, 255, 255, 0.6); }
.weather-widget.is-loading .weather-forecast,
.weather-widget.is-loading .weather-current-icon { opacity: 0.4; }
@media (max-width: 900px) {
  .weather-widget { padding: 16px 20px; gap: 16px 20px; }
  .weather-day { flex: 0 0 auto; min-width: 72px; padding: 2px 6px; }
}
@media (max-width: 640px) {
  .weather-widget { padding: 14px 18px; }
  .weather-location, .weather-current { flex: 1 1 auto; }
  .weather-current { border-right: none; padding-right: 0; justify-content: flex-end; }
  .weather-forecast {
    flex: 1 1 100%;
    order: 3;
    padding-top: 12px;
    margin-top: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }
}


/* ── PLANS: keep type readable once the featured card turns hot pink ── */
.plan-card.featured .plan-name,
.plan-card.featured .plan-price .amount { color: var(--black); }
.plan-card.featured .plan-price .from,
.plan-card.featured .plan-price .period { color: rgba(0,0,0,0.7); }
.plan-card.featured .plan-features li { color: rgba(0,0,0,0.85); border-bottom-color: rgba(0,0,0,0.15); }
.plan-card.featured .plan-features li::before { color: var(--black); }
.plan-card.featured .plan-cta { background: var(--yellow); color: var(--black); border: var(--keyline); }
.plan-card.featured .plan-cta:hover { background: var(--white); }
.plan-name, .plan-price .amount { font-family: var(--font-display); }


/* ============================================================
   OHH! — brand utilities & mobile hardening
   ============================================================ */

/* Nothing on the page may cause a sideways scroll on a phone. */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video { max-width: 100%; }

/* Display face for every heading level the template uses. */
h1, h2, h3, h4, .plan-badge, .hero-eyebrow, .section-eyebrow { font-family: var(--font-display); }

/* Yellow highlighter — used sparingly behind key words in headings. */
.mark-yellow {
  background: linear-gradient(transparent 58%, var(--yellow) 58%);
  padding: 0 2px;
}
/* Pink chip for inline badges. */
.chip-pink {
  display: inline-block;
  background: var(--pink);
  color: var(--black);
  border: 2px solid var(--black);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.3px;
}

/* Visible keyboard focus everywhere, not just on buttons. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 2px;
}

/* Skip link for keyboard and screen-reader users. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--yellow); color: var(--black);
  padding: 12px 20px; font-weight: 700; border: var(--keyline);
}
.skip-link:focus { left: 12px; top: 12px; }

@media (max-width: 600px) {
  /* Tap targets and text sizing on small screens. */
  .btn-primary, .btn-secondary, .btn-outline, .btn-white, .btn-ghost {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 0 12px;
    padding: 16px 20px;
  }
  .hero-btns { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .hero-title { font-size: clamp(30px, 8.5vw, 40px); }
  .hero-form-card { border-width: 2.5px; box-shadow: 5px 5px 0 var(--pink); padding: 24px 20px; }
  .towns-cta-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .towns-cta-banner a { text-align: center; }
  .sticky-phone { left: 12px; right: 12px; bottom: 12px; justify-content: center; }
  .footer-bottom { font-size: 12px; line-height: 1.6; }
  /* Long words (emails, town names) must never push the layout wide. */
  .footer-contact a, .topbar a, .contact-item a { word-break: break-word; }
}


/* ============================================================
   OHH! — final layout refinements
   ============================================================ */

/* The floating call pill is a phone pattern. On desktop it landed on top of
   the hero form's submit button, so it is mobile/tablet only. */
@media (min-width: 901px) {
  .sticky-phone { display: none; }
}

/* The hero scrim is a left-to-right gradient, which leaves almost no
   protection behind the copy once the layout stacks. Below 900px the scrim
   becomes vertical so the headline and body copy stay legible over the photo. */
@media (max-width: 900px) {
  .hero-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.80) 55%, rgba(0,0,0,0.88) 100%);
  }
  .hero-bg-image { object-position: 62% center; }   /* keep the van in frame */
}

/* Section on a hot-pink band: force readable type regardless of the
   inherited inline colours. */
[style*="#FC4DB9"] .section-eyebrow,
[style*="#E62FA1"] .section-eyebrow { color: rgba(0,0,0,0.72); }

/* Cards in the "Why Ohh" grid are content cards, not review quotes. */
.reviews-section .review-card { border-top: 4px solid var(--pink); }
.reviews-section .review-card h3 { font-size: 17px; color: var(--ink); margin-bottom: 2px; }

/* Long town names in the coverage columns should wrap, not overflow. */
.town-card ul li, .area-county ul li { overflow-wrap: anywhere; }

/* Social profiles are not yet supplied — rendered inert rather than linking nowhere. */
.social-placeholder {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
}