/* ==========================================================================
   Black Pearl Pest Control — Lead Generation Landing Page
   Brand system derived from blackpearlpest.com
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — dark is the default surface
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --accent: #4ac7e9;
  --accent-bright: #6fd6f2;
  --accent-deep: #1fa6cd;
  --accent-ink: #06212b;

  /* Accent used as *text or icon*. On white the brand cyan only reaches
     1.9:1, so light surfaces override this with a deeper cyan. */
  --accent-tx: #4ac7e9;
  --accent-wash: rgba(74, 199, 233, 0.12);
  --accent-border: rgba(74, 199, 233, 0.42);

  /* Neutrals (mirrors the live site's scale) */
  --n-100: #ffffff;
  --n-200: #fafafa;
  --n-300: #f3f3f3;
  --n-400: #d6d6d6;
  --n-500: #ababad;
  --n-600: #68686d;
  --n-700: #3f3f43;
  --n-800: #0e0e0e;

  /* Surfaces */
  --bg: #0d0d0d;
  --bg-raise: #131313;
  --bg-card: #171717;
  --bg-card-hi: #1e1e1e;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* Text */
  --tx: #ffffff;
  --tx-muted: #a8a8ac;
  --tx-dim: #6f6f74;

  /* Surface-dependent details */
  --texture-line: rgba(255, 255, 255, 0.075);
  --ghost-hover: rgba(255, 255, 255, 0.06);
  --ghost-hover-line: rgba(255, 255, 255, 0.3);
  --track: rgba(255, 255, 255, 0.08);

  /* System */
  --green: #05c168;
  --amber: #ff9e2c;
  --red: #dc2b2b;

  /* Layout */
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --gut: 24px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.28s;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --sh-3: 0 24px 60px -18px rgba(0, 0, 0, 0.75);
  --sh-accent: 0 14px 34px -12px rgba(74, 199, 233, 0.55);
}

/* --------------------------------------------------------------------------
   1b. Light surface
   Add `light` to any section to flip it to white. Only colour tokens change,
   so every component inside (cards, chips, fields, FAQ) adapts on its own.
   Pair with `light--tint` for the soft grey variant.
   -------------------------------------------------------------------------- */
.light {
  --bg: #ffffff;
  --bg-raise: #f2f5f6;
  --bg-card: #ffffff;
  --bg-card-hi: #fbfdfd;
  --line: rgba(13, 13, 13, 0.11);
  --line-strong: rgba(13, 13, 13, 0.2);

  --tx: #0d0d0d;
  --tx-muted: #55555b;
  --tx-dim: #83838a;

  /* 4.6:1 on white — same hue as the logo cyan, dark enough to read */
  --accent-tx: #0e7fa3;
  --accent-wash: rgba(14, 127, 163, 0.09);
  --accent-border: rgba(14, 127, 163, 0.4);

  --ghost-hover: rgba(13, 13, 13, 0.05);
  --ghost-hover-line: rgba(13, 13, 13, 0.34);
  --track: rgba(13, 13, 13, 0.09);

  --sh-1: 0 1px 2px rgba(13, 13, 13, 0.06);
  --sh-2: 0 8px 24px -10px rgba(13, 13, 13, 0.16);
  --sh-3: 0 20px 46px -20px rgba(13, 13, 13, 0.24);

  background: var(--bg);
  color: var(--tx);
}

/* Soft grey variant, for two light sections that need separating */
.light.light--tint { background: var(--bg-raise); }

/* The diagonal hairline texture is a dark-surface device only — white and grey
   sections stay perfectly flat. */
.light.texture::before { display: none; }

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  background: var(--bg);
  color: var(--tx);
  font-family: "Onest", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-tx);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.35rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -0.025em; }
h4 { font-size: 1.06rem; letter-spacing: -0.02em; }

p { text-wrap: pretty; }

.accent { color: var(--accent-tx); }
.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: var(--tx-muted);
  line-height: 1.68;
}
.muted { color: var(--tx-muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Section eyebrow — matches the "01 /" device used on the live site */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-tx);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent-tx);
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: clamp(64px, 9vw, 118px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 76px); }
.section--raise { background: var(--bg-raise); }

.section-head { max-width: 720px; margin-bottom: clamp(38px, 5vw, 60px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 18px; }

/* Diagonal hairline texture lifted from the live site's backdrop */
.texture { position: relative; isolation: isolate; }
.texture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
    -68deg,
    transparent 0,
    transparent 118px,
    var(--texture-line) 118px,
    var(--texture-line) 119px
  );
  pointer-events: none;
}

.divider { height: 1px; background: var(--line); border: 0; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-tx: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  background: var(--btn-bg);
  color: var(--btn-tx);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.btn:hover { background: var(--accent-bright); transform: translateY(-2px); box-shadow: var(--sh-accent); }
.btn:active { transform: translateY(0); }

.btn svg { flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--lg { padding: 18px 36px; font-size: 1.06rem; }
.btn--block { width: 100%; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-tx: var(--tx);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  background: var(--ghost-hover);
  border-color: var(--ghost-hover-line);
  box-shadow: none;
}
.btn--ghost:hover svg { transform: none; }

/* Solid neutral button — inverts against whichever surface it sits on */
.btn--invert {
  --btn-bg: var(--tx);
  --btn-tx: var(--bg);
}
.btn--invert:hover { background: var(--tx); opacity: 0.85; box-shadow: var(--sh-2); }

.btn[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* --------------------------------------------------------------------------
   6. Header — always dark, it anchors the brand across every surface
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(13, 13, 13, 0.82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: #fff;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.header.is-stuck {
  background: rgba(13, 13, 13, 0.96);
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
}

.brand { display: flex; align-items: center; flex: none; }
.brand img { width: 168px; height: auto; }

.header__actions { display: flex; align-items: center; gap: 12px; }

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.97rem;
  color: #fff;
  border-radius: var(--r-sm);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.header__phone svg { color: var(--accent); flex: none; }
.header__phone:hover { color: var(--accent); background: rgba(255, 255, 255, 0.05); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(52px, 7vw, 92px) clamp(56px, 7vw, 96px);
}
.hero::after {
  content: "";
  position: absolute;
  top: -280px;
  right: -220px;
  width: 780px;
  height: 780px;
  background: radial-gradient(circle, rgba(74, 199, 233, 0.16) 0%, transparent 62%);
  pointer-events: none;
  z-index: -1;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}

.hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 8px 16px 8px 12px;
  background: var(--accent-wash);
  border: 1px solid var(--accent-border);
  border-radius: 100px;
  font-size: 0.86rem;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 24px;
}
.hero__rating .stars { display: flex; gap: 2px; color: var(--accent-tx); }
.hero__rating strong { color: #ffffff; font-weight: 600; }
.hero__rating .google-mark { flex: none; display: block; }

.hero h1 { margin-bottom: 22px; }
.hero__sub { max-width: 54ch; margin-bottom: 32px; }

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

.hero__reassure {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 26px;
  font-size: 0.9rem;
  color: var(--tx-muted);
}
.hero__reassure li { display: flex; align-items: center; gap: 8px; }
.hero__reassure svg { color: var(--accent-tx); flex: none; }

.hero__list { list-style: none; padding: 0; }

/* Hero media */
.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  aspect-ratio: 1 / 1.14;
  object-fit: cover;
  object-position: center 18%;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--sh-3);
}
.hero__badge {
  position: absolute;
  left: -18px;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 20px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  max-width: 310px;
}
.hero__badge-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-tx);
}
.hero__badge b { display: block; font-size: 0.95rem; line-height: 1.3; }
.hero__badge span { font-size: 0.82rem; color: var(--tx-muted); line-height: 1.4; }

/* --------------------------------------------------------------------------
   8. Trust strip
   -------------------------------------------------------------------------- */
.trust {
  border-block: 1px solid var(--line);
  background: var(--bg-raise);
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: 34px;
}
.trust__item {
  text-align: center;
  padding-inline: 16px;
  border-right: 1px solid var(--line);
}
.trust__item:last-child { border-right: 0; }
.trust__num {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--tx);
}
.trust__num span { color: var(--accent-tx); }
.trust__label {
  margin-top: 8px;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-muted);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   9. Cards & grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative;
  padding: 30px 28px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover {
  border-color: var(--accent-border);
  background: var(--bg-card-hi);
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}
.card__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: var(--r-md);
  background: var(--accent-wash);
  color: var(--accent-tx);
  margin-bottom: 20px;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--tx-muted); font-size: 0.97rem; }

/* Pest chips */
.pests {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 12px;
}
.pest {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-weight: 500;
  font-size: 0.98rem;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pest:hover { border-color: var(--accent-border); background: var(--bg-card-hi); }
.pest svg { color: var(--accent-tx); flex: none; }

.pests-note {
  margin-top: 26px;
  font-size: 0.94rem;
  color: var(--tx-muted);
  text-align: center;
}

/* On a plain white surface the chips need a filled ground to read as chips */
.light .pest { background: var(--bg-raise); }
.light .pest:hover { background: #fff; }

/* Steps */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step {
  position: relative;
  padding: 34px 28px 30px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-tx);
  margin-bottom: 16px;
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--tx-muted); font-size: 0.97rem; }

/* --------------------------------------------------------------------------
   10. Split feature
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 66px);
  align-items: center;
}
/* `.split__media` now only controls source order on narrow screens — both
   split sections render their imagery through `.photo-pair` below. */

/* Photo pair — a foundation image with a second shot tucked into one bottom
   corner, at every screen size. Above 1024px the foundation is portrait and
   covers, so the sides crop and the subject scales up in frame; below that it
   runs the full column width in its natural landscape framing.

   The inset reaches roughly a third of the way across but only into the bottom
   quarter, which is what keeps it clear of faces. Re-check that if you swap a
   photo. Use `--flip` when the pair sits in the right-hand column so the inset
   tucks toward the text rather than the page edge. */

/* The wrapper is what carries any width cap. Percentage padding resolves
   against the containing block, so capping `.photo-pair` itself would leave the
   padding sized to the full column and the inset would drift loose of the
   photo. Cap the wrapper and the two stay in step. */
.photo-pair-wrap { width: 100%; }

/* Padding is in percentages so it tracks the inset's size: the inset has a
   fixed aspect ratio, so widening it also makes it taller, and padding-bottom
   is what pushes it back down clear of the faces. Change one, change both. */
.photo-pair { position: relative; padding: 0 5% 16% 0; }
.photo-pair img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}
/* Type selector included so these beat `.photo-pair img` on specificity */
.photo-pair img.photo-pair__main {
  aspect-ratio: 1 / 1.12;
  object-position: 45% center; /* the group sits left of centre in the source */
  box-shadow: var(--sh-3);
}
.photo-pair img.photo-pair__sub {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 68%;
  aspect-ratio: 900 / 560; /* matches the inset framing, so nothing is cut twice */
  border: 6px solid var(--bg);
  box-shadow: var(--sh-3);
}

/* Mirrored, for a pair sitting in the right-hand column: the inset tucks into
   the bottom-left so it overhangs toward the copy instead of the page edge. */
.photo-pair--flip { padding-right: 0; padding-left: 5%; }
.photo-pair--flip img.photo-pair__sub { right: auto; left: 0; }
.photo-pair--flip img.photo-pair__main { object-position: center; }

.checklist { list-style: none; padding: 0; display: grid; gap: 16px; margin-block: 28px; }
.checklist li { display: flex; gap: 13px; align-items: flex-start; }
.checklist svg { color: var(--accent-tx); flex: none; margin-top: 3px; }
.checklist b { display: block; font-weight: 600; }
.checklist span { color: var(--tx-muted); font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   11. Testimonials
   -------------------------------------------------------------------------- */
.quote {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.quote__stars { display: flex; gap: 3px; color: var(--accent-tx); margin-bottom: 18px; }
.quote__text { font-size: 1.02rem; line-height: 1.6; margin-bottom: 22px; flex: 1; }
.quote__who { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.quote__avatar {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-tx);
  font-weight: 700;
  font-size: 0.92rem;
}
.quote__who b { display: block; font-size: 0.95rem; }
.quote__who span { font-size: 0.83rem; color: var(--tx-muted); }

/* Review cards sit on the tinted light section, so lift them to white */
.light--tint .quote { background: #fff; box-shadow: var(--sh-1); }

/* Cards size to their own content — real reviews vary a lot in length */
.review-grid { align-items: start; }
.review-grid [hidden] { display: none; }

.review-source {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 9px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--sh-1);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.review-source:hover { border-color: var(--accent-border); transform: translateY(-1px); }

.review-more { margin-top: 34px; text-align: center; }
.review-count { margin-top: 14px; font-size: 0.88rem; color: var(--tx-muted); }

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.faq details {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease);
}
.faq details[open] { border-color: var(--accent-border); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.03rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--accent-tx);
  border-bottom: 2px solid var(--accent-tx);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__body { padding: 0 24px 22px; color: var(--tx-muted); font-size: 0.98rem; }

/* --------------------------------------------------------------------------
   13. CTA band
   -------------------------------------------------------------------------- */
/* Brand cyan ground. Redefining the text tokens flips every child to dark ink,
   and the buttons invert to near-black so they stand off the background. */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  --tx: var(--accent-ink);
  --tx-muted: rgba(6, 33, 43, 0.76);
  --line-strong: rgba(6, 33, 43, 0.3);
  --ghost-hover: rgba(6, 33, 43, 0.08);
  --ghost-hover-line: rgba(6, 33, 43, 0.55);
  /* Dark hairlines here — the usual white ones vanish against the cyan. Kept
     fainter than the dark sections so they read as texture, not stripes. */
  --texture-line: rgba(6, 33, 43, 0.06);
  color: var(--tx);
}
.cta-band::after {
  content: "";
  position: absolute;
  right: -180px; top: 50%;
  transform: translateY(-50%);
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.32) 0%, transparent 64%);
  pointer-events: none;
}
.cta-band .btn {
  --btn-bg: #0d0d0d;
  --btn-tx: #ffffff;
}
.cta-band .btn:hover {
  background: #000000;
  box-shadow: 0 14px 34px -12px rgba(6, 33, 43, 0.55);
}
.cta-band .btn--ghost {
  --btn-bg: transparent;
  --btn-tx: var(--accent-ink);
}
.cta-band .btn--ghost:hover { background: var(--ghost-hover); box-shadow: none; }
.cta-band__inner { position: relative; z-index: 1; text-align: center; max-width: 760px; margin-inline: auto; }
.cta-band h2 { margin-bottom: 18px; }
.cta-band p { margin-bottom: 32px; }
.cta-band .hero__cta { justify-content: center; }

/* --------------------------------------------------------------------------
   14. Footer — always dark
   -------------------------------------------------------------------------- */
.footer {
  background: #0d0d0d;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-block: 48px 34px;
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.footer__brand { max-width: 320px; }
.footer__brand img { width: 172px; margin-bottom: 16px; }
.footer__brand p { font-size: 0.93rem; color: #a8a8ac; }
.footer__contact { display: grid; gap: 12px; font-size: 0.95rem; }
.footer__contact a, .footer__contact div { display: flex; align-items: center; gap: 10px; color: #a8a8ac; }
.footer__contact a:hover { color: var(--accent); }
.footer__contact svg { color: var(--accent); flex: none; }
.footer__bottom {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #6f6f74;
}
.footer__bottom a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   15. Mobile sticky action bar
   -------------------------------------------------------------------------- */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  /* Held off-screen until the hero scrolls away, so it never competes with the
     hero's own CTAs. JS adds .is-visible. */
  transform: translateY(115%);
  transition: transform 0.32s var(--ease);
}
.mobile-bar.is-visible { transform: none; }
.mobile-bar .btn { flex: 1; padding-inline: 12px; }
.mobile-bar .btn--ghost {
  --btn-tx: #fff;
  border-color: rgba(255, 255, 255, 0.16);
}
.mobile-bar .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.3);
}

/* --------------------------------------------------------------------------
   16. Multi-step quote form
   -------------------------------------------------------------------------- */
.quote-page { min-height: 100vh; display: flex; flex-direction: column; }
.quote-page main { flex: 1; }

.quote-shell {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(28px, 5vw, 52px) var(--gut) clamp(60px, 8vw, 90px);
}

.quote-intro { text-align: center; margin-bottom: 30px; }
.quote-intro h1 { font-size: clamp(1.85rem, 4vw, 2.6rem); margin-bottom: 12px; }
.quote-intro p { color: var(--tx-muted); font-size: 1rem; }

/* Progress */
.progress { margin-bottom: 30px; }
.progress__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.83rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-muted);
  font-weight: 500;
  margin-bottom: 11px;
}
.progress__meta strong { color: var(--accent-tx); }
.progress__track {
  height: 5px;
  background: var(--track);
  border-radius: 100px;
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  width: 25%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright));
  border-radius: 100px;
  transition: width 0.45s var(--ease);
}

/* Card shell */
.form-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 40px);
  box-shadow: var(--sh-3);
}

.step-panel { display: none; animation: stepIn 0.36s var(--ease); }
.step-panel.is-active { display: block; }

@keyframes stepIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.step-panel > h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  margin-bottom: 8px;
}
.step-panel > .step-sub {
  color: var(--tx-muted);
  font-size: 0.97rem;
  margin-bottom: 26px;
}

/* Option tiles */
.options { display: grid; gap: 12px; }
.options--2 { grid-template-columns: repeat(2, 1fr); }
.options--3 { grid-template-columns: repeat(3, 1fr); }

.option { position: relative; display: block; cursor: pointer; }
/* Visually hidden but still a real control: zero-sized inputs get dropped from
   the accessibility tree, so keep a 1px footprint for screen readers and
   keyboard users. */
.option input {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.option__box {
  display: flex;
  align-items: center;
  gap: 13px;
  height: 100%;
  padding: 17px 18px;
  background: var(--bg-raise);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.option:hover .option__box { border-color: var(--accent-border); background: var(--bg-card-hi); }
.option input:checked + .option__box {
  border-color: var(--accent-tx);
  background: var(--accent-wash);
}
.option input:focus-visible + .option__box { outline: 2px solid var(--accent-tx); outline-offset: 3px; }

.option__mark {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  flex: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg-card);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.option--multi .option__mark { border-radius: var(--r-sm); }
.option__mark svg { opacity: 0; transform: scale(0.6); transition: all 0.2s var(--ease); color: var(--accent-ink); }
.option input:checked + .option__box .option__mark { border-color: var(--accent); background: var(--accent); }
.option input:checked + .option__box .option__mark svg { opacity: 1; transform: scale(1); }

.option__text b { display: block; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.option__text span { font-size: 0.85rem; color: var(--tx-muted); line-height: 1.4; }

/* Stacked (column) tile variant for icon-led choices */
.options--tiles .option__box { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 20px; }
.options--tiles .option__mark { position: absolute; top: 16px; right: 16px; }
.options--tiles .option__icon { color: var(--accent-tx); }

/* Fields */
.fields { display: grid; gap: 18px; }
.fields--2 { grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 8px; }
.field label { font-size: 0.9rem; font-weight: 600; }
.field label .req { color: var(--accent-tx); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-raise);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  font-size: 1rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder, .field textarea::placeholder { color: var(--tx-dim); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent-tx);
  /* background-color, never the `background` shorthand: the shorthand resets
     background-repeat to `repeat`, which tiles the select's chevron SVG into a
     zigzag across the whole control once it is focused. */
  background-color: var(--bg-card-hi);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--red); }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234ac7e9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
.light .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%230e7fa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.error-msg { font-size: 0.83rem; color: var(--red); min-height: 0; }
.error-msg:empty { display: none; }

/* Nav */
.step-nav {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.step-nav .btn--ghost { padding-inline: 22px; }
.step-nav .spacer { flex: 1; }

.form-note {
  margin-top: 18px;
  font-size: 0.84rem;
  color: var(--tx-dim);
  text-align: center;
  line-height: 1.55;
}
.form-note svg { display: inline-block; vertical-align: -2px; color: var(--accent-tx); margin-right: 5px; }

/* Reassurance rail under the form. No cards — a single hairline above the row
   is enough separation and keeps the focus on the form itself. */
.quote-reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 38px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.quote-reassure div {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--tx-muted);
}
.quote-reassure svg { color: var(--accent-tx); flex: none; }

/* Summary review list */
.review-list { display: grid; gap: 10px; margin-bottom: 24px; }
.review-list div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.92rem;
}
.review-list dt { color: var(--tx-muted); }
.review-list dd { margin: 0; font-weight: 600; text-align: right; }

/* --------------------------------------------------------------------------
   17. Thank you page
   -------------------------------------------------------------------------- */
.ty { text-align: center; max-width: 680px; margin-inline: auto; padding-block: clamp(52px, 8vw, 92px); }
.ty__mark {
  display: grid;
  place-items: center;
  width: 88px; height: 88px;
  margin: 0 auto 30px;
  border-radius: 50%;
  background: rgba(5, 193, 104, 0.12);
  border: 1px solid rgba(5, 193, 104, 0.4);
  color: #05924f;
  animation: pop 0.55s var(--ease) both;
}
@keyframes pop {
  0% { opacity: 0; transform: scale(0.6); }
  60% { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
.ty h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); margin-bottom: 16px; }
.ty > p { color: var(--tx-muted); font-size: 1.06rem; margin-bottom: 34px; }

.ty__callout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 22px 26px;
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-lg);
  margin-bottom: 40px;
  box-shadow: var(--sh-1);
}
.ty__callout b { font-size: 1.02rem; }
.ty__callout a {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-tx);
  letter-spacing: -0.02em;
}
.ty__callout a:hover { opacity: 0.8; }

.timeline { text-align: left; display: grid; gap: 0; margin-bottom: 40px; }
.timeline__item {
  position: relative;
  display: flex;
  gap: 18px;
  padding-bottom: 26px;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: 19px; top: 42px; bottom: 4px;
  width: 1px;
  background: var(--line-strong);
}
.timeline__item:last-child::before { display: none; }
.timeline__dot {
  display: grid;
  place-items: center;
  width: 39px; height: 39px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-wash);
  border: 1px solid var(--accent-border);
  color: var(--accent-tx);
  font-weight: 700;
  font-size: 0.86rem;
  position: relative;
  z-index: 1;
}
.timeline__body b { display: block; font-size: 1.02rem; margin-bottom: 4px; }
.timeline__body p { color: var(--tx-muted); font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   18. Reveal-on-scroll
   -------------------------------------------------------------------------- */
/* Content is visible by default. The hidden state is only applied once the
   inline head script confirms JS is running, so a script failure, a blocked
   IntersectionObserver or a prerendered tab can never leave the page blank. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; max-width: 620px; }
  /* Once the split is a single column the foundation image runs the full
     column width and goes back to its natural landscape framing — a portrait
     crop here is too tall and leaves dead space beside it. The inset still
     overlaps, but sits entirely inside the image since there is no right
     padding to hang off. Every face is above 60% height in this framing, so
     the inset only needs to stay in the bottom third. */
  .photo-pair { padding: 0 0 17% 0; }
  .photo-pair img.photo-pair__main {
    aspect-ratio: 4 / 3.05;
    object-position: center;
  }
  .photo-pair img.photo-pair__sub { width: 62%; }
  .hero__badge { left: 12px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; }
}

/* Tablet only. The hero is a single column here but there is still plenty of
   width, so the photo drops below the copy, spans the full column and crops to
   a slim band. Above this the two-column portrait treatment applies; below it
   the phone rules take over. Deliberately range-bounded — this suits neither
   of the neighbouring layouts. */
@media (min-width: 701px) and (max-width: 1024px) {
  .hero__media { order: 0; max-width: none; margin-top: 36px; }
  .hero__media img { aspect-ratio: 4 / 2.1; object-position: center 20%; }
}

@media (max-width: 860px) {
  .header__phone span { display: none; }
  .header__phone { padding: 10px; }
  .brand img { width: 142px; }
  .grid--2 { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
  .trust__item:nth-child(2) { border-right: 0; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .grid--4 { grid-template-columns: 1fr; }
  html { scroll-padding-top: 84px; }
  .header__inner { min-height: 66px; }
  .header .btn { display: none; }
  .mobile-bar { display: flex; }
  body.has-mobile-bar { padding-bottom: 78px; }
  .hero__cta .btn { width: 100%; }

  /* Headline and CTA come first on phones — the photo must not push the offer
     below the fold. The copy already precedes the media in the DOM. */
  .hero__media { order: 0; margin-top: 30px; }
  .hero__media img { aspect-ratio: 1 / 0.86; }
  .hero__badge { position: static; margin-top: 14px; max-width: none; }
  /* Google mark plus the numeric rating carries it — the star row makes the
     pill wrap to two lines at this width. */
  .hero__rating .stars { display: none; }

  .options--2, .options--3 { grid-template-columns: 1fr; }
  .fields--2 { grid-template-columns: 1fr; }
  .quote-reassure { grid-template-columns: 1fr; }
  .step-nav { flex-wrap: wrap; }
  .step-nav .btn { flex: 1; }
  .footer__top { flex-direction: column; }
  .ty__callout { flex-direction: column; gap: 6px; }
}

@media (max-width: 420px) {
  .pests { grid-template-columns: 1fr; }
  .trust__grid { grid-template-columns: 1fr; }
  .trust__item { border-right: 0; }
}

/* --------------------------------------------------------------------------
   20. Accessibility preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .header, .mobile-bar, .cta-band, .footer { display: none; }
  body { background: #fff; color: #000; }
}