/* ==========================================================================
   Gator Pest Control, global stylesheet
   Single source of truth for tokens, layout, and components.
   Edit values in :root to re-skin the whole site.
   ========================================================================== */

/* --- 1. Design tokens ---------------------------------------------------- */
:root {
  /* Brand, pulled from the existing Gator palette. */
  --c-brand:        #23824d;   /* gator green */
  --c-brand-dark:   #1b663c;
  --c-brand-light:  #e8f6ee;
  --c-brand-bright: #2f985a;
  --c-accent:       #0c4a7d;   /* deep blue, secondary CTA */
  --c-accent-dark:  #083557;

  /* Neutrals */
  --c-ink:          #152230;
  --c-body:         #465561;
  --c-muted:        #64717c;
  --c-line:         #dce6ec;
  --c-surface:      #ffffff;
  --c-surface-alt:  #f6fbf8;
  --c-surface-blue: #eef6fb;

  /* Type */
  --font-head: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale */
  --fs-xs:   1rem;
  --fs-sm:   1.125rem;
  --fs-base: 1.25rem;
  --fs-lg:   clamp(1.375rem, 0.5vw + 1.25rem, 1.5625rem);
  --fs-h3:   clamp(1.375rem, 0.8vw + 1.2rem, 1.625rem);
  --fs-h2:   clamp(1.75rem, 1.8vw + 1.3rem, 2.625rem);
  --fs-h1:   clamp(2.125rem, 3.6vw + 1.3rem, 3.75rem);

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Layout */
  --wrap:      1180px;
  --wrap-slim: 760px;
  --gutter:    clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(3rem, 7vw, 6rem);

  /* Shape & depth */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 24, 26, 0.06), 0 2px 8px rgba(20, 24, 26, 0.05);
  --shadow-md: 0 4px 12px rgba(20, 24, 26, 0.08), 0 12px 32px rgba(20, 24, 26, 0.07);
  --shadow-lg: 0 8px 24px rgba(20, 24, 26, 0.10), 0 24px 60px rgba(20, 24, 26, 0.09);

  --header-h: 96px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--c-body);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, picture { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--c-ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }

p { text-wrap: pretty; }

a { color: var(--c-brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-brand-dark); }

:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- 3. Layout helpers --------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--slim { max-width: var(--wrap-slim); }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--c-surface-alt); }
.section--brand { background: var(--c-brand); color: rgba(255,255,255,0.88); }
.section--brand h2, .section--brand h3 { color: #fff; }
.section--brand a:not(.btn) { color: #fff; }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.grid { display: grid; gap: var(--sp-5); }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px)  { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px)  { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.lead { font-size: var(--fs-lg); color: var(--c-body); }
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-brand);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--c-ink); color: #fff; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm); text-decoration: none;
}
.skip-link:focus { top: var(--sp-4); color: #fff; }

/* --- 4. Buttons ---------------------------------------------------------- */
.btn {
  --btn-bg: var(--c-brand);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.85em 1.6em;
  min-height: 48px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform 0.15s var(--ease), background-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.btn:hover { --btn-bg: var(--c-brand-dark); color: var(--btn-fg); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn--accent { --btn-bg: var(--c-accent); --btn-fg: #fff; }
.btn--accent:hover { --btn-bg: var(--c-accent-dark); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-ink); border-color: var(--c-line); }
.btn--ghost:hover { --btn-bg: var(--c-surface-alt); --btn-fg: var(--c-ink); }

.btn--light { --btn-bg: #fff; --btn-fg: var(--c-brand-dark); }
.btn--light:hover { --btn-bg: #fff; --btn-fg: var(--c-brand-dark); }

.btn--lg { padding: 1em 2em; font-size: var(--fs-base); min-height: 56px; }
.btn--sm {
  padding: 0.5em 1.45em;
  min-height: 38px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.btn--block { width: 100%; }

/* --- 5. Header / nav ----------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}
.site-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  padding-block: var(--sp-2);
}
.site-logo img { height: 42px; width: auto; }
@media (max-width: 480px) { .site-logo img { height: 34px; } }

.nav { display: flex; align-items: center; gap: var(--sp-6); }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.7vw, 1.65rem);
  list-style: none; margin: 0; padding: 0;
}
.nav__link {
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--sp-2);
  border-bottom: 2px solid transparent;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.nav__link:hover { color: var(--c-brand); }
.nav__link[aria-current="page"] { color: var(--c-brand); border-bottom-color: var(--c-brand); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: none; border: 1px solid var(--c-line);
  border-radius: var(--r-sm); cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 20px; height: 2px; background: var(--c-ink);
  border-radius: 2px; transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; }
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after  { transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; position: relative; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-4) var(--gutter) var(--sp-6);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { display: block; padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line); }
  .nav__link[aria-current="page"] { border-bottom-color: var(--c-line); }
  .nav .btn { margin-top: var(--sp-5); }
}

/* --- 6. Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(78vh, 720px);
  padding-block: var(--sp-8);
  background: var(--c-brand-light);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero--overlay::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(20,24,26,0.82) 0%, rgba(20,24,26,0.55) 55%, rgba(20,24,26,0.25) 100%);
  z-index: 1;
}
.hero > .wrap { position: relative; z-index: 2; }
.hero--overlay h1, .hero--overlay p { color: #fff; }
.hero__content { max-width: 44rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* --- 7. Cards ------------------------------------------------------------ */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  background: var(--c-brand-light);
  color: var(--c-brand-dark);
  border-radius: var(--r-md);
}
.card__title { font-size: var(--fs-h3); }
.card__body { flex: 1; }

/* --- 8. Forms ------------------------------------------------------------ */
.form { display: grid; gap: var(--sp-4); }
.field { display: grid; gap: var(--sp-2); }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.8em 1em;
  min-height: 48px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-light);
}
.field__hint { font-size: var(--fs-xs); color: var(--c-muted); }
.field__error { font-size: var(--fs-xs); color: #c0392b; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #c0392b; }
.form__status { padding: var(--sp-4); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.form__status--ok  { background: var(--c-brand-light); color: var(--c-brand-dark); }
.form__status--err { background: #fdecea; color: #a5281b; }
/* honeypot */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* --- 9. Footer ----------------------------------------------------------- */
.site-footer {
  background: var(--c-ink);
  color: rgba(255,255,255,0.66);
  padding-block: var(--sp-8) var(--sp-5);
  font-size: var(--fs-sm);
}
.site-footer a { color: rgba(255,255,255,0.86); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer h3 {
  color: #fff;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-3);
}
.site-footer__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .site-footer__grid { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); } }
@media (min-width: 1000px) { .site-footer__grid { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr); } }
.site-footer__list { display: grid; gap: var(--sp-2); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  justify-content: space-between;
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: var(--fs-xs);
}

/* --- 10. Sticky mobile call bar ------------------------------------------ */
.call-bar { display: none; }
@media (max-width: 700px) {
  .call-bar {
    position: fixed; inset: auto 0 0 0; z-index: 90;
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1px;
    background: var(--c-line);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.10);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .call-bar a {
    display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: 56px; background: var(--c-surface);
    font-family: var(--font-head); font-weight: 650; font-size: var(--fs-sm);
    color: var(--c-ink); text-decoration: none;
  }
  .call-bar a.is-primary { background: var(--c-brand); color: #fff; }
  body { padding-bottom: 56px; }
}

/* --- 11. Reveal on scroll (progressive enhancement) ---------------------- */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   12. Announcement bar (above the header)
   ========================================================================== */
.announce {
  background: var(--c-brand-dark);
  color: #fff;
  font-size: var(--fs-sm);
}
.announce__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  padding-block: var(--sp-2);
  text-align: center;
}
.announce p { margin: 0; color: rgba(255,255,255,0.92); }
.announce a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.announce a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 560px) {
  .announce p { font-size: var(--fs-xs); }
}

/* Header tagline: stacked directly under the logo, like the old site */
.site-logo__text {
  display: none;
  font-family: var(--font-head);
  max-width: 34ch;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-brand-dark);
  line-height: 1.2;
}
@media (min-width: 620px) { .site-logo__text { display: block; } }

/* ==========================================================================
   13. Home hero, real text over a photo (was a flat baked-in PNG)
   ========================================================================== */
.hero--home { min-height: min(72vh, 640px); }
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-6);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}
.hero__badges li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.hero__badges svg { flex: none; color: var(--c-brand-bright); }

/* ==========================================================================
   14. Home sections, goals / services / trust
   ========================================================================== */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-brand-dark);
}
.section__head {
  max-width: 54rem;
  margin-inline: auto;
  margin-bottom: var(--sp-7);
  text-align: center;
}
.section__head p { margin-top: var(--sp-3); }

/* Goals, green gradient band */
.goals {
  background: linear-gradient(135deg, var(--c-brand-dark) 0%, var(--c-brand) 55%, var(--c-brand-bright) 100%);
  color: rgba(255,255,255,0.90);
}
.goals .kicker { color: rgba(255,255,255,0.90); }
.goals h2 { color: #fff; }
.goals .section__head p { color: rgba(255,255,255,0.90); }
.goal-card {
  padding: var(--sp-6) var(--sp-5);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-lg);
}
.goal-card h3 { color: #fff; margin-bottom: var(--sp-2); }
.goal-card p { color: rgba(255,255,255,0.86); }

/* Services */
.services { background: linear-gradient(180deg, var(--c-surface-alt) 0%, var(--c-surface-blue) 100%); }
.service-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--c-surface);
  border: 1px solid rgba(12,74,125,0.08);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.service-card:hover,
.service-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(8,53,87,0.18);
  color: inherit;
}
.service-card__media { aspect-ratio: 16 / 10; background: #dbe8f0; overflow: hidden; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-2);
  padding: var(--sp-5);
}
.service-card__body p { flex: 1; }
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--c-brand-dark);
}
.service-card__link::after { content: "\2192"; transition: transform 0.2s var(--ease); }
.service-card:hover .service-card__link::after { transform: translateX(4px); }

/* Trust strip */
.trust {
  background: var(--c-surface);
  border-block: 1px solid var(--c-line);
}
.trust-card {
  padding: var(--sp-5);
  background: #f8fbfd;
  border: 1px solid rgba(12,74,125,0.08);
  border-radius: var(--r-lg);
}
.trust-card h3 { margin-bottom: var(--sp-2); }

/* ==========================================================================
   15. Reviews
   ========================================================================== */
.reviews { background: var(--c-surface-alt); }
.review {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.review__stars { display: flex; gap: 2px; color: #f5a623; }
.review blockquote { flex: 1; margin: 0; font-size: var(--fs-lg); color: var(--c-ink); }
.review figcaption { font-size: var(--fs-sm); font-weight: 700; color: var(--c-body); }

/* ==========================================================================
   16. CTA band
   ========================================================================== */
.cta-band {
  background: var(--c-accent);
  color: rgba(255,255,255,0.90);
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.86); }
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* ==========================================================================
   17. Embedded Google Form
   ========================================================================== */
.gform {
  position: relative;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.gform iframe {
  display: block;
  width: 100%;
  min-height: 900px;
  border: 0;
}

/* ==========================================================================
   18. Page header (interior pages)
   ========================================================================== */
.page-head {
  background: linear-gradient(135deg, var(--c-brand-dark) 0%, var(--c-brand) 100%);
  color: rgba(255,255,255,0.90);
  padding-block: var(--sp-8);
}
.page-head h1 { color: #fff; }
.page-head p { color: rgba(255,255,255,0.90); margin-top: var(--sp-3); max-width: 46rem; }
.page-head .kicker { color: rgba(255,255,255,0.88); }

/* ==========================================================================
   19. Contact layout
   ========================================================================== */
.contact-layout { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 960px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr) 21rem; }
}
.contact-aside {
  padding: var(--sp-5);
  background: var(--c-surface-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.contact-aside h2,
.contact-aside h3 { font-size: var(--fs-base); margin-bottom: var(--sp-2); }
.contact-aside + .contact-aside { margin-top: var(--sp-4); }
.contact-list { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.contact-list li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.contact-list svg { flex: none; margin-top: 3px; color: var(--c-brand); }
.contact-list a { font-weight: 600; }

/* Other-forms switcher under an embedded form */
.form-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-brand-light);
  border-radius: var(--r-md);
  align-items: center;
  font-size: var(--fs-sm);
}
.form-switch p { margin: 0; flex: 1 1 16rem; color: var(--c-ink); }

/* ==========================================================================
   20. Header block (full-width banner image under the nav)
   ========================================================================== */
.header-block {
  display: block;
  width: 100%;
  background: #101a13;
  line-height: 0;
}
.header-block img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   21. Quote band: copy on the left, embedded Google Form on the right
   ========================================================================== */
.quote-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: rgba(255,255,255,0.88);
  background:
    radial-gradient(64% 58% at 88% 96%, rgba(47,178,104,0.42) 0%, rgba(47,178,104,0) 68%),
    radial-gradient(52% 56% at 6% 2%, rgba(120,196,255,0.22) 0%, rgba(120,196,255,0) 66%),
    linear-gradient(128deg, #0b4677 0%, #0d5578 26%, #106b66 52%, #137a55 74%, #1a8d4e 100%);
}
/* grain, stops the big flat area banding on wide monitors */
.quote-band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
.quote-band > .wrap { position: relative; z-index: 1; }

.quote-grid {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}
@media (min-width: 980px) {
  .quote-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sp-7); }
}

/* ---- left column ---- */
.quote-copy {
  padding: var(--sp-6);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-lg);
  backdrop-filter: blur(2px);
}
.quote-copy .kicker { color: rgba(255,255,255,0.78); }
.quote-copy h2 { color: #fff; }
.quote-copy > p { color: rgba(255,255,255,0.84); margin-top: var(--sp-4); }

.quote-points { display: grid; gap: var(--sp-3); margin: var(--sp-6) 0 0; padding: 0; list-style: none; }
.quote-points li {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(255,255,255,0.10);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.92);
  line-height: 1.55;
}
.quote-points li::before {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  margin-top: 7px;
  background: #4ade80;
  border-radius: 50%;
}
.quote-copy .btn { margin-top: var(--sp-6); }

/* ---- right column: white panel wrapping the form ---- */
.form-panel {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(3,26,42,0.34), 0 4px 14px rgba(3,26,42,0.22);
  overflow: hidden;
}
.form-panel__head {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  background: var(--c-brand-light);
  border-bottom: 1px solid rgba(12,74,125,0.10);
}
.form-panel__chip {
  display: inline-block;
  margin-bottom: var(--sp-3);
  padding: 6px 14px;
  background: #fff;
  border: 1px solid rgba(35,130,77,0.25);
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-brand-dark);
}
.form-panel__head h2,
.form-panel__head h3 { color: var(--c-accent); font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.form-panel__head p { margin: 0; font-size: var(--fs-sm); color: var(--c-body); }

/* the panel is a light island inside a dark band, so reset inherited colour */
.form-panel { color: var(--c-body); }
.form-panel h1, .form-panel h2, .form-panel h3, .form-panel h4 { color: var(--c-accent); }
.form-panel strong { color: var(--c-ink); }

.form-panel .gform { position: relative; border: 0; border-radius: 0; box-shadow: none; }
.form-panel .gform iframe { min-height: 0; height: 620px; }
@media (max-width: 700px) { .form-panel .gform iframe { height: 540px; } }
.form-panel .gform::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.94) 76%, #fff 100%);
  pointer-events: none;
}

.gform__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.66);
}
.gform__hint svg { flex: none; }

.quote-fallback {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  text-align: center;
}
.quote-fallback a { color: #fff; font-weight: 700; }

/* ==========================================================================
   22. Footer, green gradient with a full site map
   ========================================================================== */
.site-footer {
  background:
    radial-gradient(60% 90% at 100% 50%, rgba(60,190,110,0.30) 0%, rgba(60,190,110,0) 70%),
    linear-gradient(102deg, #0a2c1b 0%, #0f3d24 26%, #166b3c 62%, #1f8f4d 100%);
  color: rgba(255,255,255,0.78);
}
.site-footer h3 {
  font-size: var(--fs-base);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #fff;
  margin-bottom: var(--sp-4);
}
.site-footer a { color: rgba(255,255,255,0.82); }
.site-footer a:hover { color: #fff; }
.site-footer__list li { line-height: 1.9; }

.footer-social { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.footer-social a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  color: #fff;
  transition: background-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.footer-social a:hover { background: rgba(255,255,255,0.22); transform: translateY(-2px); }

.site-footer__bottom { border-top-color: rgba(255,255,255,0.16); }
.site-footer__bottom a { text-decoration: underline; }

/* ==========================================================================
   23. Service page components (pest control, rodents, termites)
   ========================================================================== */

/* ---- split hero: copy one side, photo the other ---- */
.page-hero { background: linear-gradient(180deg, var(--c-surface-alt) 0%, #ffffff 100%); }
.split {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}
@media (min-width: 980px) {
  .split { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: var(--sp-7); }
  .split--reverse > *:first-child { order: 2; }
}
.split h1 { max-width: 14ch; }
@media (max-width: 979px) { .split h1 { max-width: none; } }

.media-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--c-brand-light);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

.note-box {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--c-brand-light);
  border: 1px solid rgba(35,130,77,0.12);
  border-radius: var(--r-lg);
}
.note-box h2, .note-box h3 { color: var(--c-brand-dark); margin-bottom: var(--sp-2); font-size: var(--fs-h3); }
.note-box p { margin: 0; }

/* ---- generic bordered panel ---- */
.panel {
  height: 100%;
  padding: var(--sp-6) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.panel--tint { background: linear-gradient(180deg, #f9fcfa 0%, #f2f9f4 100%); }
.panel > h2 { font-size: var(--fs-h2); }

/* ---- dot feature list ---- */
.feature-list { display: grid; gap: var(--sp-4); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.feature-list li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--c-ink); }
.feature-list li::before {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  margin-top: 8px;
  background: var(--c-brand);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(35,130,77,0.10);
}

/* ---- numbered list ---- */
.numbered-list { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; counter-reset: item; }
.numbered-list li {
  position: relative;
  padding-left: 40px;
  font-weight: 600;
  color: var(--c-ink);
}
.numbered-list li::before {
  counter-increment: item;
  content: counter(item);
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  background: var(--c-brand-light);
  border: 1px solid rgba(35,130,77,0.16);
  border-radius: 50%;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--c-brand-dark);
}

/* ---- bullet list ---- */
.bullet-list { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.bullet-list li {
  position: relative;
  padding-left: 24px;
  font-weight: 600;
  color: var(--c-ink);
}
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 8px; height: 8px;
  background: var(--c-brand);
  border-radius: 50%;
}

/* ---- small tinted cards ---- */
.mini-card {
  padding: var(--sp-5);
  background: #f8fbf8;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.mini-card h3 { color: var(--c-brand-dark); font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.mini-card p { margin: 0; font-size: var(--fs-sm); }

/* ---- numbered step cards ---- */
.step-num {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--sp-3);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-brand-dark), var(--c-brand));
  color: #fff;
  font-family: var(--font-head);
  font-weight: 800;
}

/* ---- green CTA strip ---- */
.cta-strip {
  background: linear-gradient(135deg, var(--c-brand-dark) 0%, var(--c-brand) 100%);
  color: rgba(255,255,255,0.90);
  text-align: center;
}
.cta-strip h2 { color: #fff; max-width: 46rem; margin-inline: auto; }
.cta-strip p { color: rgba(255,255,255,0.90); max-width: 46rem; margin-inline: auto; }
.cta-strip .kicker { color: rgba(255,255,255,0.88); }
.cta-strip a:not(.btn) { color: #fff; font-weight: 700; }

/* ---- full width photo band ---- */
.photo-band { line-height: 0; background: var(--c-ink); }
.photo-band img { width: 100%; height: auto; }

/* ---- FAQ ---- */
.faq-list { display: grid; gap: var(--sp-3); max-width: 56rem; margin-inline: auto; }
.faq-item {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: var(--sp-5) 56px var(--sp-5) var(--sp-5);
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--c-ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 22px; top: 50%;
  width: 12px; height: 2px;
  background: var(--c-brand-dark);
  transform: translateY(-50%);
}
.faq-item summary::before {
  content: "";
  position: absolute;
  right: 27px; top: 50%;
  width: 2px; height: 12px;
  background: var(--c-brand-dark);
  transform: translateY(-50%);
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.faq-item[open] summary::before { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.faq-item summary:hover { background: var(--c-surface-alt); }
.faq-answer { padding: 0 var(--sp-5) var(--sp-5); }
.faq-answer p { margin: 0; }

/* ---- fine print under a form ---- */
.disclaimer { margin-top: var(--sp-4); font-size: var(--fs-xs); color: rgba(255,255,255,0.62); }
.quote-copy .disclaimer { color: rgba(255,255,255,0.62); }

/* ==========================================================================
   24. Page level green/blue wash (add class="page-tint" to <body>)
   ========================================================================== */
.page-tint {
  background:
    radial-gradient(76% 52% at 100% 0%,  rgba(35,130,77,0.18) 0%, rgba(35,130,77,0) 62%),
    radial-gradient(66% 48% at 0% 34%,   rgba(12,74,125,0.16) 0%, rgba(12,74,125,0) 60%),
    radial-gradient(70% 46% at 96% 72%,  rgba(16,107,102,0.16) 0%, rgba(16,107,102,0) 62%),
    linear-gradient(180deg, #f1f9f5 0%, #e7f2fa 38%, #eef8f3 72%, #e9f4f7 100%);
  background-attachment: fixed;
}
/* let the wash show through: surfaces go translucent instead of opaque */
.page-tint .page-hero,
.page-tint .section--alt { background: transparent; }
.page-tint .panel,
.page-tint .card,
.page-tint .faq-item { background: rgba(255,255,255,0.86); }
.page-tint .mini-card { background: rgba(255,255,255,0.74); }
.page-tint .faq-item summary:hover { background: rgba(255,255,255,0.55); }
.page-tint .panel--tint { background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(240,250,244,0.86) 100%); }

@media (max-width: 900px) {
  /* fixed attachment is janky on iOS */
  .page-tint { background-attachment: scroll; }
}

/* ==========================================================================
   25. Readability. Body copy stays at full size inside cards and lists.
   ========================================================================== */
.card__body,
.mini-card p,
.goal-card p,
.trust-card p,
.service-card__body p,
.faq-answer p,
.quote-points li,
.site-footer,
.form-panel__head p { font-size: var(--fs-base); }

.feature-list li,
.numbered-list li,
.bullet-list li { font-size: var(--fs-base); }

.nav__link { font-size: 1.0625rem; }
.site-footer__list li { line-height: 2; }
.review blockquote { font-size: 1.25rem; line-height: 1.6; }

/* phone numbers and calls to action get extra weight, they are what people hunt for */
.announce a { font-size: var(--fs-base); }

/* ==========================================================================
   26. Ocean band: deep blue running into brand green, white type on top
   ========================================================================== */
.band-ocean {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: rgba(255,255,255,0.90);
  background:
    radial-gradient(60% 60% at 92% 96%, rgba(47,178,104,0.34) 0%, rgba(47,178,104,0) 66%),
    radial-gradient(52% 52% at 4% 4%, rgba(120,196,255,0.20) 0%, rgba(120,196,255,0) 64%),
    linear-gradient(134deg, #0d3557 0%, #114b74 38%, #146b66 68%, #23824d 100%);
}
.band-ocean::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
.band-ocean > .wrap { position: relative; z-index: 1; }
.band-ocean h1, .band-ocean h2, .band-ocean h3 { color: #fff; }
.band-ocean p { color: rgba(255,255,255,0.88); }
.band-ocean .kicker { color: rgba(255,255,255,0.82); }
.band-ocean a:not(.btn) { color: #fff; font-weight: 700; }
.band-ocean .media-frame {
  box-shadow: 0 24px 60px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.08);
}

/* translucent claim tiles */
.pill-grid { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
@media (min-width: 720px) { .pill-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* sitting under a hero image the column is narrower, so ease the padding */
.media-frame + .pill-grid .pill { padding: var(--sp-3) var(--sp-4); }
.media-frame + .pill-grid .pill strong { font-size: var(--fs-sm); }
.pill {
  padding: var(--sp-4);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-md);
  color: rgba(255,255,255,0.88);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.pill strong {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-family: var(--font-head);
  font-size: var(--fs-base);
}

/* bullet rows on a dark band */
.benefit-list { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.benefit-list li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-md);
  color: #fff;
  font-size: var(--fs-base);
}
.benefit-list li::before {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  margin-top: 9px;
  background: #7ef0ad;
  border-radius: 50%;
}

/* step badge sitting on a photo card */
.service-card__body .step-num { margin-bottom: var(--sp-2); }

/* ==========================================================================
   27. Comparison table (us vs the shortcut approach)
   ========================================================================== */
.compare {
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.compare__head { display: none; }
.compare__row { border-top: 1px solid var(--c-line); }
.compare__row:first-of-type { border-top: 0; }
.compare__row > div { padding: var(--sp-4) var(--sp-5); }
.compare__label {
  background: var(--c-brand-light);
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--c-ink);
}
.compare__good, .compare__weak { display: flex; gap: var(--sp-3); align-items: flex-start; }
.compare__good::before, .compare__weak::before {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
}
.compare__good::before { content: "\2713"; background: rgba(35,130,77,0.14); color: var(--c-brand-dark); }
.compare__weak::before { content: "\2013"; background: rgba(20,33,28,0.08); color: var(--c-muted); }
.compare__good { color: var(--c-ink); font-weight: 600; }
.compare__weak { color: var(--c-muted); }
/* on small screens the label reads as a heading above the two answers */
.compare__row > div + div { border-top: 1px dashed var(--c-line); }

@media (min-width: 900px) {
  .compare__head {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.2fr);
    background: linear-gradient(135deg, #0d3b2e, #103d7a);
    color: #fff;
  }
  .compare__head div {
    padding: var(--sp-4) var(--sp-5);
    font-family: var(--font-head);
    font-weight: 800;
  }
  .compare__head div:first-child { color: rgba(255,255,255,0.72); }
  .compare__row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.2fr); }
  .compare__row > div + div { border-top: 0; }
  .compare__label { background: var(--c-surface-alt); }
}

/* two column education cards, one dark one light */
.edu-card {
  padding: var(--sp-6) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.edu-card--dark {
  background: linear-gradient(135deg, #0d3b2e 0%, #103d7a 100%);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.86);
}
.edu-card--dark h3 { color: #fff; }
.edu-card--dark p { color: rgba(255,255,255,0.86); }
.edu-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(12,74,125,0.08);
  border: 1px solid rgba(12,74,125,0.14);
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-accent);
  white-space: nowrap;
}
.edu-card--dark .badge { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.16); color: #d6e8ff; }
.line-list { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.line-list li { padding-top: var(--sp-3); border-top: 1px solid var(--c-line); font-size: var(--fs-base); }
.edu-card--dark .line-list li { border-color: rgba(255,255,255,0.14); }
.line-list strong { color: inherit; }
.edu-card--dark .line-list strong { color: #fff; }

/* callout box */
.callout {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: linear-gradient(180deg, #eef8f3 0%, #edf5ff 100%);
  border: 1px solid rgba(35,130,77,0.16);
  border-radius: var(--r-md);
  font-weight: 600;
  color: #355449;
}

/* check bullets on light backgrounds */
.check-list { display: grid; gap: var(--sp-4); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.check-list li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.check-list li > span,
.benefit-list li > span,
.feature-list li > span { flex: 1; min-width: 0; }
.check-list li::before {
  content: "\2713";
  flex: none;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(35,130,77,0.16), rgba(31,102,197,0.14));
  color: var(--c-brand-dark);
  font-size: 13px;
  font-weight: 900;
}
.band-ocean .check-list li::before,
.quote-copy .check-list li::before { background: rgba(255,255,255,0.14); color: #b9e6c8; }

/* image with a caption underneath */
.figure-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.figure-card img { width: 100%; height: auto; }
.figure-card figcaption { padding: var(--sp-4) var(--sp-5); font-weight: 600; color: var(--c-ink); }

/* ==========================================================================
   28. Pricing plans
   ========================================================================== */
.ribbon {
  background: linear-gradient(100deg, #6b3a08 0%, #c8860a 15%, #f5d060 30%, #e8b820 42%,
                              #a87010 55%, #f0d060 68%, #c8860a 82%, #6b3a08 100%);
  background-size: 220% 100%;
  animation: ribbon-sheen 6s ease-in-out infinite;
  color: #2c1a00;
  text-align: center;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -2px 0 rgba(0,0,0,0.12);
}
.ribbon p { margin: 0; color: inherit; }
.ribbon em { font-style: italic; font-weight: 800; }
@keyframes ribbon-sheen {
  0%, 100% { background-position: 100% 0; }
  50%      { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) { .ribbon { animation: none; } }

.plans {
  position: relative;
  background: var(--c-brand-dark);
}
.plans::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 15% 60%, rgba(64,145,108,0.20) 0%, transparent 55%),
    radial-gradient(circle at 85% 20%, rgba(82,183,136,0.14) 0%, transparent 50%);
}
.plans > .wrap { position: relative; z-index: 1; }
.plans .section__head h2, .plans .section__head p { color: #fff; }
.plans .section__head .kicker { color: rgba(255,255,255,0.82); }

.plan-grid { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 820px)  { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.plan {
  --plan-accent: #92400E;
  --plan-head-bg: linear-gradient(135deg, #fef3c7, #fde68a);
  --plan-head-line: #fcd34d;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 16px 40px rgba(0,0,0,0.22);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.plan:hover { transform: translateY(-6px); box-shadow: 0 8px 12px rgba(0,0,0,0.07), 0 28px 56px rgba(0,0,0,0.28); }
.plan--silver { --plan-accent: #374151; --plan-head-bg: linear-gradient(135deg, #f3f4f6, #e5e7eb); --plan-head-line: #d1d5db; }
.plan--gold   { --plan-accent: #B45309; --plan-head-bg: linear-gradient(135deg, #1B4332, #2D6A4F); --plan-head-line: transparent; }

.plan__head {
  position: relative;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  text-align: center;
  background: var(--plan-head-bg);
  border-bottom: 1px solid var(--plan-head-line);
}
.plan__tier {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--plan-accent);
}
.plan--gold .plan__tier { color: #52B788; }
.plan__price {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  line-height: 1;
  margin-bottom: var(--sp-2);
  font-family: var(--font-head);
  color: var(--plan-accent);
}
.plan__price sup { font-size: 1.375rem; font-weight: 800; margin-top: 8px; }
.plan__price b { font-size: clamp(3rem, 5vw, 3.875rem); font-weight: 900; letter-spacing: -0.04em; }
.plan--gold .plan__price { color: #fff; }
.plan--gold .plan__price sup { color: #F59E0B; }
.plan__name { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.plan--gold .plan__name { color: #fff; }
.plan__freq {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,0.08);
  color: var(--plan-accent);
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.plan--gold .plan__freq { background: rgba(245,158,11,0.22); color: #F59E0B; }

.plan__badge {
  position: absolute;
  top: 0; right: var(--sp-4);
  padding: 6px 13px 5px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(135deg, #B45309, #F59E0B);
  color: #1a0a00;
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plan__features { margin: 0; padding: var(--sp-4) var(--sp-5) 0; list-style: none; }
.plan__features li {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-body);
  line-height: 1.45;
}
.plan__features li > span { min-width: 0; }
.plan__features li:last-child { border-bottom: 0; }
.plan__features li::before {
  content: "\2713";
  flex: none;
  display: grid;
  place-items: center;
  width: 21px; height: 21px;
  margin-top: 1px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--plan-accent) 14%, transparent);
  color: var(--plan-accent);
  font-size: 12px;
  font-weight: 900;
}
.plan__features strong { color: var(--c-ink); font-weight: 700; }
.plan__features small { display: block; margin-top: 3px; font-size: var(--fs-xs); line-height: 1.4; color: var(--c-muted); }

.plan__foot { padding: var(--sp-5); padding-top: var(--sp-4); }
.plan__foot .btn { width: 100%; border-radius: 10px; }
.plan--bronze .plan__foot .btn { --btn-bg: linear-gradient(135deg, #92400E, #D97706); }
.plan--silver .plan__foot .btn { --btn-bg: linear-gradient(135deg, #374151, #4B5563); }
.plan--gold   .plan__foot .btn { --btn-bg: linear-gradient(135deg, #B45309, #F59E0B); --btn-fg: #1a0a00; }
.plan__foot .btn:hover { filter: brightness(1.06); }

.plan-grid { padding-bottom: var(--sp-2); }
.plan-note {
  max-width: 46rem;
  margin: var(--sp-6) auto 0;
  color: rgba(255,255,255,0.76);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ==========================================================================
   29. Overflow guards. Grid and flex children default to min-width:auto,
   which lets long content push a track wider than its share and spill
   outside the card. These force them to shrink instead.
   ========================================================================== */
.grid > *,
.plan-grid > *,
.split > *,
.pill-grid > *,
.quote-grid > * { min-width: 0; }

.plan,
.card,
.panel,
.mini-card,
.edu-card,
.service-card,
.goal-card,
.trust-card,
.review,
.faq-item,
.pill { min-width: 0; }

/* long words (email addresses, "Exterior & perimeter treatment") wrap rather
   than overflow */
.plan__features li > span,
.card__body,
.mini-card p,
.pill,
.benefit-list li,
.check-list li,
.feature-list li,
.compare__good,
.compare__weak,
.site-footer__list li,
.faq-answer p { overflow-wrap: anywhere; }

/* nothing inside a card may exceed it */
.plan__features,
.plan__head,
.plan__foot { max-width: 100%; }
.plan__head > * { max-width: 100%; }

/* ==========================================================================
   30. Colour guards. Dark bands set an inherited white text colour. Any light
   surface placed inside one would inherit it and disappear. Every white card
   pins its own colours so it is safe to drop anywhere.
   ========================================================================== */
.form-panel,
.figure-card,
.card,
.panel,
.mini-card,
.plan,
.faq-item,
.compare,
.review,
.callout,
.edu-card:not(.edu-card--dark) { color: var(--c-body); }

.form-panel h2, .form-panel h3,
.figure-card figcaption,
.card h2, .card h3,
.panel h2, .panel h3,
.mini-card h3,
.plan h3,
.faq-item summary,
.compare__label,
.review blockquote,
.edu-card:not(.edu-card--dark) h3 { color: var(--c-ink); }

/* the two that intentionally use brand colour for their heading */
.form-panel h3 { color: var(--c-accent); }
.mini-card h3 { color: var(--c-brand-dark); }
.plan--gold h3.plan__name { color: #fff; }

/* ==========================================================================
   31. Blog: index cards
   ========================================================================== */
.post-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 700px)  { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.post-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  color: var(--c-body);
  text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: var(--c-body); }
.post-card__media { aspect-ratio: 16 / 10; background: var(--c-brand-light); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { display: flex; flex-direction: column; flex: 1; gap: var(--sp-2); padding: var(--sp-5); }
.post-card__title { font-size: var(--fs-lg); color: var(--c-ink); }
.post-card__excerpt { flex: 1; font-size: var(--fs-sm); }
.post-card__meta { font-size: var(--fs-xs); color: var(--c-muted); }
.post-card__more {
  margin-top: var(--sp-2);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--c-brand-dark);
}
.post-card__more::after { content: "\2192"; margin-left: 6px; display: inline-block; transition: transform 0.2s var(--ease); }
.post-card:hover .post-card__more::after { transform: translateX(4px); }
.post-card--featured { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .post-card--featured { flex-direction: row; }
  .post-card--featured .post-card__media { flex: 0 0 46%; aspect-ratio: auto; }
  .post-card--featured .post-card__body { justify-content: center; padding: var(--sp-6); }
  .post-card--featured .post-card__title { font-size: var(--fs-h2); }
}

/* ==========================================================================
   32. Blog: article page
   ========================================================================== */
.article { max-width: 46rem; margin-inline: auto; }
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.article__media {
  margin: var(--sp-6) 0 var(--sp-7);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--c-brand-light);
}
.article__media img { width: 100%; height: auto; }

/* long-form typography */
.prose { color: var(--c-body); }
.prose > * + * { margin-top: var(--sp-5); }
.prose p { font-size: var(--fs-base); line-height: 1.75; }
.prose h2 {
  margin-top: var(--sp-8);
  font-size: var(--fs-h2);
  color: var(--c-ink);
}
.prose h3 {
  margin-top: var(--sp-7);
  font-size: var(--fs-h3);
  color: var(--c-brand-dark);
}
.prose h2 + p, .prose h3 + p, .prose h2 + ul, .prose h3 + ul { margin-top: var(--sp-4); }
.prose ul, .prose ol { display: grid; gap: var(--sp-3); padding-left: 0; list-style: none; }
.prose ul li, .prose ol li {
  position: relative;
  padding-left: 30px;
  font-size: var(--fs-base);
  line-height: 1.65;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 6px; top: 12px;
  width: 8px; height: 8px;
  background: var(--c-brand);
  border-radius: 50%;
}
.prose ol { counter-reset: n; }
.prose ol li::before {
  counter-increment: n;
  content: counter(n);
  position: absolute;
  left: 0; top: 2px;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-brand-light);
  color: var(--c-brand-dark);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.prose strong { color: var(--c-ink); font-weight: 700; }
.prose a { color: var(--c-brand-dark); font-weight: 600; text-decoration: underline; }
.prose blockquote {
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--c-brand);
  background: var(--c-brand-light);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.prose blockquote p { margin: 0; }
.prose hr { margin-block: var(--sp-7); border: 0; border-top: 1px solid var(--c-line); }

/* sources list at the foot of a researched post */
.prose .sources { font-size: var(--fs-sm); }
.prose .sources li { padding-left: 30px; }
.prose .sources a { overflow-wrap: anywhere; }

/* inline CTA inside an article */
.article-cta {
  margin-top: var(--sp-7);
  padding: var(--sp-6);
  background: linear-gradient(135deg, var(--c-brand-dark) 0%, var(--c-brand) 100%);
  border-radius: var(--r-lg);
  color: rgba(255,255,255,0.90);
  text-align: center;
}
.article-cta h2 { color: #fff; margin-bottom: var(--sp-3); font-size: var(--fs-h3); }
.article-cta p { color: rgba(255,255,255,0.90); margin-bottom: var(--sp-5); }
.article-cta .btn { margin-inline: 4px; }

/* prev / next */
.post-nav {
  display: grid;
  gap: var(--sp-4);
  max-width: 46rem;
  margin: var(--sp-8) auto 0;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line);
}
@media (min-width: 700px) { .post-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.post-nav a {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-ink);
}
.post-nav a:hover { border-color: var(--c-brand); }
.post-nav span { display: block; font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: 4px; }
.post-nav .is-next { text-align: right; }

/* breadcrumbs */
.crumbs { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--sp-4); }
.crumbs a { color: var(--c-brand-dark); font-weight: 600; }

/* ==========================================================================
   33. Related links. Stops pages being dead ends.
   ========================================================================== */
.related {
  max-width: 46rem;
  margin: var(--sp-7) auto 0;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line);
}
.related h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-4);
}
.related__grid { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .related__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.related__item {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  color: var(--c-body);
  text-decoration: none;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.related__item:hover { border-color: var(--c-brand); transform: translateY(-2px); color: var(--c-body); }
.related__item strong { display: block; color: var(--c-ink); font-family: var(--font-head); }
.related__item span { font-size: var(--fs-sm); color: var(--c-muted); }
.related__item svg { flex: none; margin-top: 4px; color: var(--c-brand); }

/* a section-width version for the service pages */
.related--wide { max-width: none; }

/* ==========================================================================
   34. Native lead form. Replaces the Google Form iframes.
   ========================================================================== */
.leadform { display: grid; gap: var(--sp-4); padding: var(--sp-5); }
.leadform__row { display: grid; gap: var(--sp-4); }
@media (min-width: 560px) { .leadform__row--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.leadform label {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-ink);
}
.leadform label .req { color: #c0392b; }

.leadform input,
.leadform select,
.leadform textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.75em 0.9em;
  font-size: var(--fs-base);
  color: var(--c-ink);
  background: var(--c-surface);
  border: 2px solid var(--c-line);
  border-radius: var(--r-sm);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.leadform textarea { min-height: 120px; resize: vertical; }
.leadform input:focus,
.leadform select:focus,
.leadform textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 4px var(--c-brand-light);
}
.leadform input[aria-invalid="true"],
.leadform textarea[aria-invalid="true"] { border-color: #c0392b; }

/* the radio row for preferred contact */
.leadform__choices { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.leadform__choices label {
  margin: 0;
  padding: 0.6em 1.1em;
  border: 2px solid var(--c-line);
  border-radius: var(--r-pill);
  cursor: pointer;
  font-weight: 600;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.leadform__choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.leadform__choices label:has(input:checked) {
  border-color: var(--c-brand);
  background: var(--c-brand-light);
  color: var(--c-brand-dark);
}
.leadform__choices label:has(input:focus-visible) { outline: 3px solid var(--c-accent); outline-offset: 2px; }

/* the honeypot. Never visible, never announced, never tab-reachable. */
.leadform__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.leadform-legend {
  margin-bottom: var(--sp-2);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-ink);
}
.leadform fieldset { border: 0; padding: 0; margin: 0; }

.leadform__submit { margin-top: var(--sp-2); }
.leadform__submit .btn { width: 100%; }
.leadform__submit .btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

.leadform__fineprint {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-align: center;
}

.leadform__error {
  display: none;
  padding: var(--sp-3) var(--sp-4);
  background: #fdecea;
  border: 1px solid #f5c6c0;
  border-radius: var(--r-sm);
  color: #a5281b;
  font-size: var(--fs-sm);
}
.leadform__error[data-show="true"] { display: block; }

/* success state, swapped in place of the form */
.leadform__done {
  display: none;
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
}
.leadform__done[data-show="true"] { display: block; }
.leadform__done svg { margin: 0 auto var(--sp-4); color: var(--c-brand); }
.leadform__done h3 { color: var(--c-ink); margin-bottom: var(--sp-3); }
.leadform__done p { margin-bottom: var(--sp-5); }