/* ==========================================================================
   All Pest Free Sydney — "Eucalypt" design system
   Part of the Bug Free group
   ========================================================================== */

/* ---------- 0. Brand typeface ----------
   Momo Trust Display — licensed face, supplied as a single static Regular
   (usWeightClass 400). Converted from the source TTF to WOFF2 (37 KB) with
   WOFF for older engines.

   The weight range is declared 100–900 deliberately. The family has only one
   weight, so this maps every heading level onto the real glyphs instead of
   letting the browser fake a bold by smearing the outlines — synthetic bold
   wrecks a display face. Headings therefore all render at the font's natural
   weight; the font-weight values further down still drive the Outfit fallback.

   To add real weights later: give each its own @font-face with the true
   font-weight value and drop the 100 900 range. */
@font-face {
  font-family: "Momo Trust Display";
  src: url("../fonts/momo-trust-display.woff2") format("woff2"),
       url("../fonts/momo-trust-display.woff") format("woff");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- 1. Tokens ---------- */
:root {
  /* ---- Brand palette (supplied). These are the only source colours. ----
     #2A9820 green · #4B3C3C ink · #828282 grey · #F5F5F5 off-white · #FEFEFE white
     No yellows anywhere in the system. */
  --brand-green: #2A9820;
  --brand-ink:   #4B3C3C;
  --brand-grey:  #828282;
  --brand-off:   #F5F5F5;
  --brand-white: #FEFEFE;

  /* Shades derived from those five. Same hues throughout — the steps exist
     only so text and UI can hit WCAG contrast, which five flat colours cannot
     do unaided (#2A9820 is 3.8:1 on white, #828282 is 3.8:1; both fail body
     text at 4.5:1). Nothing here introduces a new hue. */
  --green-950: #081B06;
  --green-900: #0D2F0A;
  --green-800: #123F0E;
  --green-700: #175412;
  --green-600: #1F7218;
  --green-500: #2A9820;   /* = brand green */
  --green-550: #23841C;   /* brand green, just dark enough for WHITE text (4.8:1) */
  --green-mid:  #30882C;  /* the logo's secondary green — hero ring */
  --green-400: #31AF26;
  --green-300: #7CC776;
  --green-200: #B6E0B1;
  --green-100: #E4F2E2;

  --ink:       #2E2525;   /* headings — brand ink, darkened */
  --ink-2:     #4B3C3C;   /* body = brand ink */
  --muted:     #6F6F6F;   /* small secondary text (brand grey, darkened to 4.9:1) */
  --grey:      #828282;   /* = brand grey — large text / decorative only */
  --line:      #E1E1E1;
  --surface:   #F5F5F5;   /* = brand off-white */
  --surface-2: #EAEAEA;
  --white:     #FEFEFE;   /* = brand white */

  --star: #2A9820;        /* was yellow */

  /* Type */
  /* --font-heading drives h1-h6 only. --font-display stays on Outfit for UI
     chrome (buttons, nav, labels, stat figures) — a display face is cut for
     large sizes and reads poorly at button scale. Swap --font-display to
     var(--font-heading) if you do want it everywhere. */
  --font-heading: "Momo Trust Display", "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Space + shape */
  --container: 1200px;
  /* Single source of truth for left/right breathing room. Scales with the
     viewport so content never runs to the screen edge on a phone. */
  --gutter: clamp(26px, 5vw, 48px);
  /* Square corners throughout. Every panel — cards, sidebar boxes, the TOC,
     FAQ rows, reviews — reads from these, so the shape of the whole system is
     set here. Circles (`50%`) and pills (`999px`) are written literally and are
     deliberately unaffected. */
  --r-sm: 0;
  --r: 0;
  --r-lg: 0;
  --shadow-sm: 0 1px 2px rgba(13, 47, 10, .06), 0 2px 8px rgba(13, 47, 10, .05);
  --shadow: 0 4px 12px rgba(13, 47, 10, .08), 0 12px 32px rgba(13, 47, 10, .07);
  --shadow-lg: 0 12px 28px rgba(13, 47, 10, .12), 0 32px 64px rgba(13, 47, 10, .10);

  /* Photography slots — replace url() to drop in real photos */
  --photo-hero: linear-gradient(135deg, #0D2F0A 0%, #175412 55%, #1F7218 100%);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ---------- Target cursor ----------
   The reticle from the trust bar and card icons, as the pointer. Drawn twice —
   a fat white stroke underneath, the brand green on top — so it stays visible
   on the white page and on the green hero, banner, CTA and statement fields
   alike. 26px keeps it inside the ~32px ceiling browsers impose on custom
   cursors; the hotspot is the centre of the crosshair, not the top-left.
   Text inputs are deliberately excluded further down: a reticle over a text
   field hides the caret position and costs more than it adds. */
:root {
  --cur-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='4.5' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='7.5'/%3E%3Cpath d='M13 1.5v4M13 20.5v4M1.5 13h4M20.5 13h4'/%3E%3C/g%3E%3Cg fill='none' stroke='%232A9820' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='7.5'/%3E%3Cpath d='M13 1.5v4M13 20.5v4M1.5 13h4M20.5 13h4'/%3E%3C/g%3E%3Ccircle cx='13' cy='13' r='1.8' fill='%232A9820' stroke='%23FFFFFF' stroke-width='1.2'/%3E%3C/svg%3E") 13 13;
  --cur-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='5' stroke-linecap='round'%3E%3Ccircle cx='15' cy='15' r='8.5'/%3E%3Cpath d='M15 1.5v4.5M15 24v4.5M1.5 15h4.5M24 15h4.5'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='8.5' fill='%232A9820' stroke='%232A9820' stroke-width='2.4'/%3E%3Cg stroke='%232A9820' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M15 1.5v4.5M15 24v4.5M1.5 15h4.5M24 15h4.5'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='2.4' fill='%23FFFFFF'/%3E%3C/svg%3E") 15 15;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  cursor: var(--cur-target), crosshair;
}
/* Anything clickable gets the locked-on reticle, so the affordance a plain
   `pointer` used to carry is not lost. */
a, button, summary, label, select, .btn, .tile, .faq summary, .nav__toggle,
[role="button"], [onclick] { cursor: var(--cur-lock), pointer; }
/* Text entry keeps the native caret cursor. */
input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
textarea { cursor: text; }
input[type="checkbox"], input[type="radio"] { cursor: var(--cur-lock), pointer; }

/* ---------- Target cursor ----------
   The four brackets and dot drawn by the script at the end of the page. The
   SVG cursors above stay as the no-JS fallback: `has-tcursor` is only set once
   the script runs, and only then is the native cursor hidden. Text fields keep
   their caret either way — losing the insertion point costs more than the
   effect is worth. */
.has-tcursor, .has-tcursor body, .has-tcursor a, .has-tcursor button,
.has-tcursor summary, .has-tcursor label, .has-tcursor select, .has-tcursor .btn,
.has-tcursor .tile, .has-tcursor [role="button"], .has-tcursor [onclick] { cursor: none; }
.has-tcursor input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.has-tcursor textarea { cursor: text; }

.tcursor {
  position: fixed; top: 0; left: 0; width: 0; height: 0;
  pointer-events: none; z-index: 9999;
  /* difference keeps it legible on the white page and the green bands alike,
     with no colour decision to maintain */
  mix-blend-mode: difference;
  transition: opacity .18s ease, scale .18s ease;
}
.tcursor.is-off { opacity: 0; }          /* pointer left the window */
/* .tcursor.is-down { scale: .9; } */
.tcursor__dot {
  position: absolute; left: 0; top: 0; width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px; background: #fff; border-radius: 50%;
  transition: scale .2s ease;
}
.tcursor.is-down .tcursor__dot { scale: .7; }
.tcursor.is-locked .tcursor__dot { opacity: 0; }
.tcursor__c {
  position: absolute; left: 0; top: 0; width: 12px; height: 12px;
  border: 3px solid #fff; will-change: transform;
}
.tcursor__c--tl { border-right: 0; border-bottom: 0; }
.tcursor__c--tr { border-left: 0; border-bottom: 0; }
.tcursor__c--br { border-left: 0; border-top: 0; }
.tcursor__c--bl { border-right: 0; border-top: 0; }

/* Coarse pointers never get it — the script bails, but this keeps the native
   cursor rules intact if `has-tcursor` is ever set some other way. */
@media (pointer: coarse) {
  .tcursor { display: none; }
  .has-tcursor, .has-tcursor * { cursor: auto; }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.02em;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.35rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.18rem, 1.05rem + .6vw, 1.45rem); }
h4 { font-size: 1.08rem; }
p  { margin: 0 0 1.15em; }

/* No orphan words. `balance` evens out heading line lengths so the last line
   is never a single stranded word; `pretty` does the lighter-weight version
   for body copy, where balance would be too costly over long text. Both are
   progressive — engines without support just wrap as before. */
h1, h2, h3, h4, h5, h6,
.section__eyebrow, .hero__eyebrow, .qstep__legend, .quote-card__badge,
.faq summary, .card h3, .usp b, .trustbar__label b, .banner__body h2 {
  text-wrap: balance;
}
p, li, dd, figcaption, blockquote, summary,
.hero__lede, .card p, .usp span, .review p, .quote-card__sub,
.section__head p, .trustbar__label, .banner__body p {
  text-wrap: pretty;
}
a  { color: var(--green-600); text-decoration: none; }
a:hover { color: var(--green-500); text-decoration: underline; }
img, svg, video { max-width: 100%; height: auto; display: block; }
strong { color: var(--ink); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--green-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto; padding-inline: var(--gutter); }
.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;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -60px; z-index: 200;
  background: var(--green-700); color: var(--white); padding: 10px 18px;
  border-radius: 0 0 var(--r-sm) var(--r-sm); transition: top .2s;
}
.skip-link:focus { top: 0; color: var(--white); }

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
  /* Solid icons throughout. Requires the FILL axis to be requested as a
     range (0..1) in the Google Fonts URL — with the fixed FILL=0 instance
     the font has no filled outlines and this line does nothing. */
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ---------- 2. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 600; font-size: .98rem;
  padding: .85rem 1.5rem; border-radius: 0; border: 2px solid transparent;
  cursor: var(--cur-lock), pointer; transition: transform .15s ease, box-shadow .15s ease,
              background-color .15s ease, color .15s ease, border-color .15s ease;
  text-decoration: none; line-height: 1.2; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn .material-symbols-outlined { font-size: 20px; }

/* Green buttons carry WHITE labels. #2A9820 only reaches 3.8:1 with white,
   so the fill is --green-550 — the same green a shade deeper, at 4.8:1. */
.btn--primary { background: var(--green-550); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--green-600); color: var(--white); box-shadow: var(--shadow); }

.btn--green { background: var(--green-700); color: var(--white); }
.btn--green:hover { background: var(--green-600); color: var(--white); }

.btn--outline { border-color: var(--green-700); color: var(--green-700); background: transparent; }
.btn--outline:hover { background: var(--green-700); color: var(--white); }

.btn--ghost-light { border-color: rgba(255,255,255,.5); color: var(--white); background: transparent; }
.btn--ghost-light:hover { background: var(--white); color: var(--green-800); border-color: var(--white); }

.btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* ---------- 3. Top bar / announcement ticker ----------
   Wide screens: one row, licence + service on the left, reviews + phone right.
   Below 1080px it becomes a single-line rotating announcement bar so the four
   messages don't stack into three lines of chrome above the header. */
.topbar { background: var(--green-900); color: var(--white); font-size: .82rem; }
.topbar__inner { display: flex; align-items: center; gap: 1.25rem; min-height: 40px; }
.topbar a { color: var(--white); font-weight: 500; }
.topbar a:hover { color: var(--green-200); }
.topbar__item { display: inline-flex; align-items: center; gap: .38rem; }
.topbar__item--split { margin-left: auto; }   /* starts the right-hand group */
.topbar__item .material-symbols-outlined { font-size: 16px; color: var(--green-300); }
.topbar__stars { color: var(--star); letter-spacing: 1px; }
.topbar__pause { display: none; }

/* Four messages share one 16s cycle, each offset by 25%. The outgoing message
   fades out across 24%-26% while the next is already rising, so the bar is
   never blank at the handover. */
@keyframes topbar-rotate {
  0%   { opacity: 0; transform: translateY(115%); }
  1.6% { opacity: 1; transform: translateY(0); }
  24%  { opacity: 1; transform: translateY(0); }
  26%  { opacity: 0; transform: translateY(-115%); }
  100% { opacity: 0; transform: translateY(-115%); }
}

@media (max-width: 1080px) {
  .topbar__inner { display: block; position: relative; height: 38px; overflow: hidden; }
  .topbar__item {
    position: absolute; inset: 0;
    /* absolute children resolve against the padding box, so re-apply the
       gutter here; the extra on the right keeps text clear of the control */
    padding-left: var(--gutter);
    padding-right: calc(var(--gutter) + 30px);
    display: flex; align-items: center; justify-content: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: .78rem; opacity: 0;
    animation: topbar-rotate 16s cubic-bezier(.4, 0, .2, 1) infinite;
  }
  /* visible if CSS animations never run */
  .topbar__item:nth-child(1) { opacity: 1; animation-delay: 0s; }
  .topbar__item:nth-child(2) { animation-delay: 4s; }
  .topbar__item:nth-child(3) { animation-delay: 8s; }
  .topbar__item:nth-child(4) { animation-delay: 12s; }
  .topbar__item--split { margin-left: 0; }
  .topbar.is-paused .topbar__item { animation-play-state: paused; }

  .topbar__pause {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; right: var(--gutter); transform: translateY(-50%);
    width: 26px; height: 26px; padding: 0; border: 0; border-radius: 0;
    background: rgba(255, 255, 255, .12); color: var(--green-200); cursor: var(--cur-lock), pointer;
  }
  .topbar__pause:hover { background: rgba(255, 255, 255, .22); color: var(--white); }
  .topbar__pause .material-symbols-outlined { font-size: 15px; }
  /* 26px circle, but a 42x38 touch target — the bar is too short for a 44px
     control, so grow the hit area rather than the visual */
  .topbar__pause::before { content: ""; position: absolute; inset: -6px -8px; }
}

@media (max-width: 430px) {
  .topbar__item { font-size: .72rem; }
  .topbar__stars { letter-spacing: 0; }
}

/* No motion preference: drop the rotation and let the messages stack. */
@media (prefers-reduced-motion: reduce) and (max-width: 1080px) {
  .topbar__inner {
    display: flex; flex-wrap: wrap; justify-content: center;
    height: auto; gap: .3rem 1rem; padding-block: .45rem;
  }
  .topbar__item {
    position: static; inset: auto; padding: 0; opacity: 1;
    animation: none; white-space: normal;
  }
  .topbar__pause { display: none; }
}

/* ---------- 4. Header / nav ---------- */
.header {
  position: sticky; top: 0; z-index: 100; background: var(--white);
  border-bottom: 1px solid var(--line);
}
.header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 84px; }

/* Brand lockup — supplied artwork, 2.724:1. logo.svg for light backgrounds,
   logo-on-dark.svg for the footer. */
.brand { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand__logo { height: 56px; width: auto; flex-shrink: 0; }
.brand__divider { width: 1px; height: 34px; background: var(--line); flex-shrink: 0; }
.brand__parent { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.brand__parent-label {
  font-size: .56rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
/* Header uses bugfree-logo-dark.png — the supplied mark is white + red on
   transparent and would vanish on the white header, so the white artwork is
   recoloured to --ink and the red "BUG" left untouched. The footer sits on
   dark green and uses the original white file. Swap both for official
   light/dark variants if the brand team supplies them. */
.brand__parent-logo { height: 20px; width: auto; display: block; }
/* Footer sits on dark green — logo-on-dark.svg carries the light wordmark */

.footer .brand { margin-bottom: 1rem; }

.nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.nav__list { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: inline-flex; align-items: center; gap: .2rem;
  font-family: var(--font-display); font-weight: 500; font-size: .96rem;
  color: var(--ink); padding: .6rem .7rem; border-radius: var(--r-sm);
}
.nav__link:hover, .nav__item:hover > .nav__link { background: var(--surface); color: var(--green-700); text-decoration: none; }
.nav__item { position: relative; }
.nav__link .material-symbols-outlined { font-size: 18px; transition: transform .2s; }
.nav__item:hover .nav__link .material-symbols-outlined { transform: rotate(180deg); }
.nav__item[aria-current="page"] > .nav__link,
.nav__link[aria-current="page"] { color: var(--green-600); font-weight: 600; }

/* dropdown / mega */
.drop {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: .8rem; list-style: none; margin: 0;
  min-width: 270px; opacity: 0; visibility: hidden; transition: all .18s ease; z-index: 60;
}
.nav__item:hover .drop, .nav__item:focus-within .drop {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.drop a {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem;
  border-radius: var(--r-sm); color: var(--ink-2); font-size: .93rem; font-weight: 500;
}
.drop a:hover { background: var(--surface); color: var(--green-700); text-decoration: none; }
.drop .material-symbols-outlined { font-size: 19px; color: var(--green-500); }
.drop--mega { display: grid; grid-template-columns: repeat(3, minmax(210px, 1fr)); gap: .1rem .4rem; min-width: 700px; }
.drop--mega-2 { grid-template-columns: repeat(2, minmax(230px, 1fr)); min-width: 520px; }
.drop__title {
  grid-column: 1 / -1; font-family: var(--font-display); font-weight: 700;
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); padding: .5rem .7rem .3rem;
}
.drop__all { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: .4rem; padding-top: .4rem; }
.drop__all a { color: var(--green-600); font-weight: 600; }

.nav__cta { display: flex; align-items: center; gap: .6rem; margin-left: .4rem; }
.nav__phone {
  display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-display);
  font-weight: 700; color: var(--green-700); font-size: 1rem;
}
.nav__phone:hover { color: var(--green-600); text-decoration: none; }

.nav__toggle {
  display: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: 0; width: 46px; height: 46px; cursor: var(--cur-lock), pointer;
  align-items: center; justify-content: center; color: var(--green-700);
}
.nav__toggle .material-symbols-outlined { font-size: 26px; }

/* Compact call button — replaces the "Book online" pill on narrow phones,
   where the full header CTA row no longer fits. */
.nav__call {
  display: none; width: 46px; height: 46px; border-radius: 0;
  background: var(--green-500); color: var(--green-900);
  align-items: center; justify-content: center; flex-shrink: 0;
}
.nav__call:hover { background: var(--green-400); text-decoration: none; color: var(--green-900); }
.nav__call .material-symbols-outlined { font-size: 24px; }

/* ---------- 5. Mobile nav ---------- */
.mnav {
  position: fixed; inset: 0; z-index: 150; background: var(--white);
  transform: translateX(100%); transition: transform .28s ease;
  display: flex; flex-direction: column; overflow-y: auto;
}
.mnav.is-open { transform: translateX(0); }
.mnav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--gutter); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--white);
}
.mnav__body { padding: .5rem var(--gutter) 2.5rem; }
.mnav details { border-bottom: 1px solid var(--line); }
.mnav summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: .95rem 0; font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem; color: var(--ink); cursor: var(--cur-lock), pointer; list-style: none;
}
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary .material-symbols-outlined { transition: transform .2s; color: var(--green-600); }
.mnav details[open] summary .material-symbols-outlined { transform: rotate(180deg); }
.mnav__sub { list-style: none; margin: 0; padding: 0 0 .8rem; }
.mnav__sub a { display: block; padding: .5rem 0 .5rem .9rem; color: var(--ink-2); font-size: .96rem; border-left: 2px solid var(--line); }
.mnav__sub a:hover { border-left-color: var(--green-300); color: var(--green-700); text-decoration: none; }
.mnav__flat {
  display: block; padding: .95rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink);
}
.mnav__cta { display: grid; gap: .7rem; margin-top: 1.4rem; }


/* Shared circle-media motif — hero, banner and CTA band all use it, so the
   geometry lives in one place. Fitted from the Figma frames; see section 6. */
.circle-media {
  position: absolute; z-index: 0;
  border-radius: 50%; overflow: hidden;
  border: var(--hero-ring) solid var(--white);
  box-shadow: 0 0 0 var(--hero-ring-outer) var(--green-mid);
  width: calc(90.5vw + var(--hero-ring) * 2);
  aspect-ratio: 1; height: auto;
  left: calc(49.8vw - var(--hero-ring));
  top: calc(-1.6vw - var(--hero-ring));
}
.circle-media img, .circle-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 1080px) {
  /* 282.7vw comes from the 440px Figma frame. Left uncapped it keeps growing
     with the viewport — at 1080px it computes to a 3053px circle, which
     upscales the source ~3.4x and looks soft on tablets. Capping the diameter
     holds the phone design exactly (440px -> 1244px, under the cap) and only
     flattens the arc slightly on wider screens. The apex stays 100vw above the
     section's bottom either way, so the visible image band is unchanged. */
  .circle-media {
    --cd: min(282.7vw, 1400px);
    width: calc(var(--cd) + var(--hero-ring) * 2);
    left: calc(96.55vw - var(--cd) / 2 - var(--hero-ring));
    top: auto;
    bottom: calc(100vw - var(--cd) - var(--hero-ring) * 2);
  }
}

/* ---------- 6. Hero ----------
   Figma layout: a flat brand-green field with the photograph held inside a very
   large circle anchored off the right edge, ringed in white then a darker green.
   Geometry was lifted from the Figma frames by fitting a circle to the rendered
   arc (max residual 2.7px desktop, 0.3px mobile):
     desktop 1920x750 — image circle centre (1825,840) r 869, white ring 46px
     mobile    440x956 — image circle centre (425,1148) r 622, white ring 48px
   Both are expressed in vw so the motif scales with the viewport.

   The field is --green-550 rather than the brand #2A9820: white copy on the
   brand green is only 3.8:1, and this shade is visually the same green while
   clearing 4.8:1. No scrim is needed any more — copy sits on flat colour. */
:root { --hero-ring: 46px; --hero-ring-outer: 26px; }

.hero {
  position: relative; overflow: hidden;
  background: var(--green-550); color: var(--white);
}
/* .hero__media carries no geometry of its own — it is the same motif as the
   banner and CTA band, so `.circle-media` above owns it. It used to restate
   the whole block, which meant its uncapped mobile rule out-ordered the tablet
   cap in `.circle-media` (equal specificity, later in the file) and the hero
   circle grew to 2895px at a 1024px viewport while the other two held 1400px. */

.hero > .container { position: relative; z-index: 2; }
/* padding-block, NOT the `padding` shorthand — the shorthand would reset the
   horizontal gutter inherited from .container and push text to the screen edge. */
.hero__inner { position: relative; z-index: 2; padding-block: clamp(3.9rem, 7.8vw, 7.15rem) clamp(3.9rem, 6.5vw, 5.85rem); }
.hero--home .hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.hero h1 { color: var(--white); }
.hero__lede { color: var(--white); font-size: 1.1rem; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(8, 27, 6, .18); border: 1px solid rgba(255, 255, 255, .38);
  color: var(--white); padding: .42rem 1rem;
  border-radius: 999px; font-size: .82rem; font-weight: 600; margin-bottom: 1.2rem;
}
.hero__eyebrow .material-symbols-outlined { font-size: 17px; color: var(--white); }
.hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.7rem; }
.hero__points { list-style: none; margin: 1.9rem 0 0; padding: 0; display: grid; gap: .6rem; }
.hero__points li { display: flex; align-items: flex-start; gap: .6rem; color: var(--white); font-size: .98rem; }
.hero__points .material-symbols-outlined {
  color: var(--white); font-size: 21px; flex-shrink: 0; font-variation-settings: "FILL" 1;
}
/* On the green field the standard green CTA would vanish, so it inverts to
   white. The outline button keeps white on green at 4.8:1. */
.hero .btn--primary { background: var(--white); color: var(--green-700); }
.hero .btn--primary:hover { background: var(--green-100); color: var(--green-700); }

/* inner-page hero */
/* The Figma hero frame is 1920x750 (2.56:1). Matching that ratio keeps the arc
   sweeping at the designed angle — crossing the top edge around 72% and the
   bottom around 50% — instead of cutting steeply across a short banner. */
.hero--inner { min-height: clamp(400px, 39vw, 760px); display: flex; flex-direction: column; }
.hero--inner > .container:last-of-type { margin-block: auto; }
.hero--inner .hero__inner { padding-block: clamp(2.86rem, 5.2vw, 4.42rem) clamp(3.12rem, 5.2vw, 4.42rem); }
/* The arc reaches its leftmost point (~51% of width) at the bottom edge, so the
   copy column has to stay inside the green field or it runs under the circle.
   41vw keeps it ending around 49%, which is what the Figma shows. */
.hero--inner .hero__inner > * { max-width: min(560px, 41vw); }
.hero--inner h1 { font-size: clamp(1.85rem, 1.3rem + 2.1vw, 2.9rem); }
.hero--inner .hero__lede { font-size: 1.12rem; color: var(--white); margin-bottom: 0; }

/* Mobile: copy on the green field up top, the circle sweeping in from the
   bottom right. Anchored from the bottom so it does not depend on hero height. */
@media (max-width: 1080px) {
  .hero--inner { min-height: 0; }
  .hero--inner .hero__inner > * { max-width: none; }
  /* The circle's apex sits exactly 100vw above the section's bottom edge (see
     `.circle-media`), and on mobile the copy runs the full width, so anything
     less than 100vw of clearance puts text over the artwork. +4vw is breathing
     room.

     Written as `.hero--inner .hero__inner`, NOT `.hero__inner`: the desktop
     rule above is `.hero--inner .hero__inner { padding-block: ... }`, and a
     0,2,0 `padding-block` shorthand beats a 0,1,0 `padding-bottom` no matter
     which comes later. The old `.hero__inner { padding-bottom: 74vw }` lost
     that contest silently, so inner-page heroes had 50px of clearance instead
     of 74vw and every headline sat on the photograph. */
  .hero--inner .hero__inner { padding-bottom: 104vw; }
  .hero--home .hero__inner { padding-bottom: 2.5rem; }
}

/* ---------- 7. Trust bar ---------- */
.trustbar { background: var(--green-800); color: var(--white); }
.trustbar__inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-block: 1.2rem;
}
.trustbar__item { display: flex; align-items: center; gap: .7rem; justify-content: center; }

/* Glyph inside a target ring — two stacked filled Material Symbols. */
.trustbar__icon {
  position: relative; display: grid; place-items: center;
  width: 46px; height: 46px; flex-shrink: 0;
}
.trustbar__ring, .trustbar__glyph {
  grid-area: 1 / 1; font-variation-settings: "FILL" 1;
}
.trustbar__ring { font-size: 46px; color: var(--green-300); opacity: .5; }
.trustbar__glyph { font-size: 21px; color: var(--white); }

.trustbar__label { font-size: .88rem; line-height: 1.3; }
.trustbar__label b { display: block; font-family: var(--font-display); font-size: .98rem; color: var(--white); }

/* Scroll reveal. `anim-ready` is set by JS, so with scripting off the items
   never get hidden in the first place. */
.anim-ready .trustbar__item { opacity: 0; transform: translateY(12px); }
.anim-ready .trustbar__ring { transform: scale(.6) rotate(-45deg); opacity: 0; }
.anim-ready .trustbar__item,
.anim-ready .trustbar__ring,
.anim-ready .trustbar__glyph {
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
}
.anim-ready .trustbar__glyph { transform: scale(.7); opacity: 0; }
.trustbar.is-in .trustbar__item { opacity: 1; transform: none; }
.trustbar.is-in .trustbar__ring { opacity: .5; transform: none; }
.trustbar.is-in .trustbar__glyph { opacity: 1; transform: none; }
.trustbar.is-in .trustbar__item:nth-child(2) > * { transition-delay: .09s; }
.trustbar.is-in .trustbar__item:nth-child(3) > * { transition-delay: .18s; }
.trustbar.is-in .trustbar__item:nth-child(4) > * { transition-delay: .27s; }
.trustbar.is-in .trustbar__item:nth-child(2) { transition-delay: .09s; }
.trustbar.is-in .trustbar__item:nth-child(3) { transition-delay: .18s; }
.trustbar.is-in .trustbar__item:nth-child(4) { transition-delay: .27s; }

/* ---------- 8. Sections ---------- */
/* Standalone lead paragraph — the home page opener, lifted out of the hero so
   the hero carries only the headline, USP ticks and CTAs. */
.section--lead { padding-block: clamp(3.38rem, 6.5vw, 5.46rem); }
.lead {
  font-size: clamp(1.15rem, 1rem + .65vw, 1.5rem);
  line-height: 1.5; color: var(--ink); max-width: 62ch;
  margin: 0 auto; text-align: center; text-wrap: pretty;
}
.section { padding: clamp(3.9rem, 7.15vw, 6.5rem) 0; }
.section--tint { background: var(--surface); }
.section--dark { background: var(--green-800); color: var(--green-100); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section__head { max-width: 760px; margin-bottom: 2.6rem; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__eyebrow {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: .76rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--green-500); margin-bottom: .7rem;
}
.section--dark .section__eyebrow { color: var(--green-300); }
.section__head p { color: var(--muted); font-size: 1.05rem; margin-bottom: 0; }
.section--dark .section__head p { color: var(--green-100); }

/* ---------- 9. Cards / grids ---------- */
.grid { display: grid; gap: 1.25rem; }
.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 {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem; transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
  display: flex; flex-direction: column;
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--green-300); text-decoration: none; }
.card__icon {
  width: 50px; height: 50px; border-radius: 0; background: var(--green-100);
  display: grid; place-items: center; margin-bottom: 1rem; flex-shrink: 0;
}
.card__icon .material-symbols-outlined { font-size: 26px; color: var(--green-600); }
.card h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.card p { font-size: .94rem; color: var(--muted); margin-bottom: 0; }
.card__more {
  margin-top: auto; padding-top: 1rem; font-weight: 600; font-size: .9rem;
  color: var(--green-600); display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-display);
}
.card__more .material-symbols-outlined { font-size: 18px; transition: transform .18s; }
a.card:hover .card__more .material-symbols-outlined { transform: translateX(3px); }

/* card with a thumbnail image (articles) */
.card--media { padding: 0; overflow: hidden; }
.card--media .card__thumb {
  aspect-ratio: 16 / 10; overflow: hidden; background: var(--green-700); flex-shrink: 0;
}
.card--media .card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
a.card--media:hover .card__thumb img { transform: scale(1.04); }
.card--media .card__inner { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }

/* compact pest tile */
.tile {
  display: flex; align-items: center; gap: .8rem; padding: .95rem 1.1rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink); font-weight: 500; font-size: .95rem;
  transition: all .16s ease;
}
.tile:hover { border-color: var(--green-300); background: var(--green-100); color: var(--green-700); text-decoration: none; transform: translateY(-2px); }
.tile .material-symbols-outlined { font-size: 22px; color: var(--green-500); flex-shrink: 0; }
.tile__arrow { margin-left: auto; font-size: 18px !important; color: var(--muted) !important; }

/* ---------- 10. Content layout ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 3rem; align-items: start; }
.prose { max-width: 76ch; min-width: 0; }
.prose h2 { margin-top: 2.6rem; scroll-margin-top: 110px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.9rem; color: var(--green-700); }
.prose ul { margin: 0 0 1.3em; padding: 0; list-style: none; }
.prose ul li {
  position: relative; padding-left: 1.9rem; margin-bottom: .62rem;
}
.prose ul li::before {
  content: "check_circle"; font-family: "Material Symbols Outlined";
  position: absolute; left: 0; top: .1em; font-size: 1.15rem; color: var(--green-600);
  font-variation-settings: "FILL" 1;
}
.prose ol { padding-left: 1.3rem; margin: 0 0 1.3em; }
.prose ol li { margin-bottom: .6rem; }
.prose > p:first-of-type { font-size: 1.13rem; color: var(--ink-2); }
.prose blockquote {
  margin: 1.8rem 0; padding: 1.2rem 1.5rem; background: var(--green-100);
  border-left: 4px solid var(--green-300); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose a { font-weight: 500; text-underline-offset: 2px; text-decoration-color: var(--green-300); }
.prose a:hover { text-decoration-color: var(--green-500); }

/* ---------- 11. Sidebar ---------- */
.sidebar { position: sticky; top: 104px; display: grid; gap: 1.25rem; }
.side-card {
  background: var(--green-700); color: var(--green-100); border-radius: var(--r);
  padding: 1.6rem; box-shadow: var(--shadow-sm);
}
.side-card h3 { color: var(--white); font-size: 1.2rem; }
.side-card p { font-size: .93rem; margin-bottom: 1.1rem; }
.side-card .btn { width: 100%; }
.side-card__phone {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: .8rem; color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
}
.side-card__phone:hover { color: var(--green-200); text-decoration: none; }

.side-box { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; }
.side-box h3 { font-size: 1.02rem; margin-bottom: .9rem; }
.side-box ul { list-style: none; margin: 0; padding: 0; }
.side-box li + li { border-top: 1px solid var(--line); }
.side-box a {
  display: flex; align-items: center; gap: .5rem; padding: .58rem 0;
  font-size: .92rem; color: var(--ink-2);
}
.side-box a:hover { color: var(--green-600); text-decoration: none; }
.side-box .material-symbols-outlined { font-size: 17px; color: var(--green-300); }

.side-trust { background: var(--green-100); border: 1px solid var(--green-200); border-radius: var(--r); padding: 1.3rem; }
.side-trust ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.side-trust li { display: flex; align-items: flex-start; gap: .55rem; font-size: .9rem; color: var(--green-800); }
.side-trust .material-symbols-outlined { font-size: 19px; color: var(--green-600); flex-shrink: 0; font-variation-settings: "FILL" 1; }

/* ---------- 12. Breadcrumbs ---------- */
.crumbs { padding: .85rem 0; font-size: .84rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.crumbs li { display: flex; align-items: center; gap: .35rem; color: rgba(255,255,255,.65); }
.crumbs a { color: rgba(255,255,255,.85); }
.crumbs a:hover { color: var(--white); }
.crumbs .material-symbols-outlined { font-size: 15px; opacity: .6; }
.crumbs [aria-current="page"] { color: var(--white); font-weight: 500; }

/* ---------- 13. FAQ ---------- */
.faq { display: grid; gap: .8rem; }
.faq details {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; transition: border-color .18s, box-shadow .18s;
}
.faq details[open] { border-color: var(--green-300); box-shadow: var(--shadow-sm); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.35rem; cursor: var(--cur-lock), pointer; font-family: var(--font-display);
  font-weight: 600; font-size: 1.03rem; color: var(--ink); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--green-600); }
.faq summary .material-symbols-outlined {
  font-size: 22px; color: var(--green-500); transition: transform .2s; flex-shrink: 0; margin-top: 1px;
}
.faq details[open] summary .material-symbols-outlined { transform: rotate(45deg); }
.faq__body { padding: 0 1.35rem 1.25rem; }
.faq__body p:last-child { margin-bottom: 0; }
.faq__body ul { margin: 0 0 .8em; padding: 0; list-style: none; }
.faq__body ul li { position: relative; padding-left: 1.5rem; margin-bottom: .4rem; }
.faq__body ul li::before {
  content: ""; position: absolute; left: .35rem; top: .65em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green-300);
}

/* ---------- 14. CTA band ----------
   Double-height, copy stacked with the buttons beneath it, and the same
   curved photograph as the hero on the right. */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--green-550); color: var(--white);
  min-height: clamp(440px, 36vw, 680px);
  display: flex; flex-direction: column; justify-content: center;
}
/* The CTA artwork is a finished composite — the circle mask, the white ring and
   the green arc are baked into the PNG. So this slot gets no `circle-media`, no
   border-radius and no ring: it is placed as supplied, anchored to the right and
   sized by the band's height, with its own hard right/bottom edges landing flush
   with the band's. Transparent areas let the green field show through. */
.cta-band__media {
  position: absolute; z-index: 0; inset: 0 0 0 auto; pointer-events: none;
}
.cta-band__media img { height: 100%; width: auto; display: block; }
.cta-band__inner {
  position: relative; z-index: 2;
  padding-block: clamp(3.9rem, 7.8vw, 6.5rem);
}
/* Constrain the CHILDREN, not the container. Putting max-width on .container
   also narrows its auto margins, which re-centres the copy and breaks its
   alignment with the page gutter. 41vw keeps the text clear of the arc, which
   reaches its leftmost point (~51% of width) at the bottom edge. */
.cta-band__inner > * { max-width: min(560px, 41vw); }
/* Set at the h1 scale, not the h2 one — this is the loudest ask on the page and
   was reading quieter than the section headings above it. It stays an <h2> in
   the markup: every page already has its one h1, and a second would break both
   the document outline and the `bad H1 count` check in audit_site.py. */
.cta-band h2 {
  color: var(--white); margin-bottom: .6rem;
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.35rem);
}
.cta-band p { color: var(--white); margin-bottom: 0; }
.cta-band__actions {
  display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.9rem;
}
.cta-band .btn--primary { background: var(--white); color: var(--green-700); }
.cta-band .btn--primary:hover { background: var(--green-100); color: var(--green-700); }

/* ---------- 15. Reviews ---------- */
.review {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.6rem; display: flex; flex-direction: column;
}
.review__stars { color: var(--star); font-size: 1.02rem; letter-spacing: 2px; margin-bottom: .8rem; }
.review p { font-size: .96rem; margin-bottom: 1.1rem; }
.review__by { margin-top: auto; display: flex; align-items: center; gap: .7rem; }
.review__avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--green-600); color: var(--white);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .92rem;
}
.review__name { display: block; font-weight: 600; color: var(--ink); font-size: .92rem; line-height: 1.3; }
.review__meta { display: block; font-size: .8rem; color: var(--muted); }

/* ---------- 16. Steps ---------- */
.steps { counter-reset: step; display: grid; gap: 1.25rem; }
.step { display: flex; gap: 1.1rem; align-items: flex-start; }
.step__num {
  counter-increment: step; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--green-300); color: var(--green-900); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
}
.step__num::before { content: counter(step); }
.step h3 { margin-bottom: .3rem; font-size: 1.08rem; }
.step p { font-size: .95rem; color: var(--muted); margin-bottom: 0; }
.section--dark .step p { color: var(--green-100); }

/* ---------- 17. Areas ---------- */
.area-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.area-grid a {
  display: flex; align-items: center; gap: .5rem; padding: .75rem .95rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: .92rem; color: var(--ink-2); font-weight: 500;
}
.area-grid a:hover { border-color: var(--green-300); background: var(--green-100); color: var(--green-700); text-decoration: none; }
.area-grid .material-symbols-outlined { font-size: 18px; color: var(--green-400, var(--green-500)); }

/* ---------- 18. Footer ---------- */
.footer { background: var(--green-900); color: rgba(255,255,255,.5); font-size: .92rem; }
.footer__main { padding-block: clamp(3.64rem, 6.5vw, 5.2rem) 3.12rem; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; gap: 2.2rem; }
.footer h4 {
  color: var(--white); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 1.1rem; font-weight: 700;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .55rem; }
.footer a { color: rgba(255,255,255,.5); }
.footer a:hover { color: var(--white); text-decoration: none; }
.footer__brand img { height: 54px; width: auto; margin-bottom: 1.1rem; }
.footer__brand p { font-size: .9rem; line-height: 1.6; margin-bottom: 1.2rem; }
.footer__parent {
  display: inline-flex; align-items: center; gap: .6rem; padding: .6rem .9rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-sm); margin-bottom: 1.3rem;
}
.footer__parent span { font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--white); }
.footer__parent img { height: 22px; width: auto; margin: 0; }
.footer__contact li { display: flex; align-items: flex-start; gap: .55rem; }
.footer__contact .material-symbols-outlined { font-size: 18px; color: var(--green-300); flex-shrink: 0; margin-top: 2px; font-variation-settings: "FILL" 1; }
.footer__social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.footer__social a {
  width: 38px; height: 38px; border-radius: 0; background: rgba(255,255,255,.08);
  display: grid; place-items: center; color: var(--white); transition: background .18s;
}
.footer__social a:hover { background: var(--green-300); color: var(--green-900); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.4rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .84rem;
}
.footer__legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer__cred { color: rgba(255,255,255,.5); }

/* ---------- 18b. Media bands / banners / figures ---------- */
/* Alternating image + copy band. Add .band--reverse to flip the image to the right. */
.band { padding: clamp(3.64rem, 6.5vw, 5.98rem) 0; }
.band--tint { background: var(--surface); }
.band--dark { background: var(--green-800); color: var(--green-100); }
.band--dark h2, .band--dark h3 { color: var(--white); }
.band--dark .prose a { color: var(--green-200); }
.band__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 4rem); align-items: stretch;
}
.band--reverse .band__figure { order: 2; }
.band__body > :first-child { margin-top: 0; }
.band__body .prose { max-width: none; }
.band__body .prose h2:first-child { margin-top: 0; }

.band__figure, .figure {
  position: relative; margin: 0; border-radius: 0; overflow: hidden;
  box-shadow: var(--shadow); background: var(--green-700);
}
/* Fill the grid row rather than holding a fixed ratio, so the image is
   exactly as tall as the copy beside it. min-height keeps it from going
   letterbox-thin when the copy is short; object-fit handles the crop. */
.band__figure { height: 100%; min-height: 320px; }
.band__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band__figure figcaption, .figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.1rem .85rem;
  font-size: .76rem; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 600; color: var(--green-100);
  background: linear-gradient(to top, rgba(13, 47, 10, .88), rgba(13, 47, 10, 0));
}

/* Inline figure inside a prose column */
.figure { margin: 2.2rem 0; box-shadow: var(--shadow-sm); }
.figure img { width: 100%; height: auto; display: block; }

/* Full-bleed banner */
/* ---------- 18. Banner ----------
   Same motif as the hero: copy on the green field, photograph in the big
   circle off the right edge. The USP row floats across the curve — half on
   the green, half over the photo — on solid white so it stays legible
   whatever sits behind it. */
.banner {
  position: relative; overflow: visible;   /* the USP row escapes the section */
  background: var(--green-550); color: var(--white);
  min-height: clamp(420px, 34vw, 660px);
  display: flex; flex-direction: column; justify-content: center;
  --usp-h: 96px;
}
/* The artwork still has to be clipped to the section, or it would blow out the
   page width — so the clipping lives on this background layer. */
.banner__bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
/* Supplied composite, mirrored against the CTA band: the circle, ring and arc
   are part of the PNG, so no border-radius and no ring here. It bleeds off the
   LEFT edge and is sized by the band's height. */
.banner__media { position: absolute; inset: 0 auto 0 0; }
.banner__media img { height: 100%; width: auto; display: block; }
.banner__inner { position: relative; z-index: 2; padding-block: clamp(3.38rem, 6.5vw, 5.2rem); }
/* Copy sits right, opposite the artwork. `margin-left: auto` rather than
   text-align, so the block keeps its own left edge and the paragraph stays
   ragged-right like every other body column on the site. */
.banner__body { max-width: min(560px, 41vw); margin-left: auto; }
/* Set at the h1 scale, matching the CTA band. It stays an <h2> in the markup:
   this banner is on 84 pages, every one of which already has its own h1, and a
   second would break the document outline and the `bad H1 count` check. */
.banner__body h2 {
  color: var(--white);
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.35rem);
}
.banner__body p { color: var(--white); margin-bottom: 0; font-size: 1.05rem; }
.banner__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.7rem; }
.banner .btn--primary { background: var(--white); color: var(--green-700); }
.banner .btn--primary:hover { background: var(--green-100); color: var(--green-700); }

/* Straddles the bottom edge: exactly half the row hangs below the section.
   It is taken out of flow and pinned to the section's bottom, because the
   banner has a min-height and centres its content — an in-flow negative margin
   left the row floating 35px inside the section instead of on the join.
   `translateY(50%)` is a percentage of the element's own height, so the split
   stays exact when the row wraps to two lines on a phone.
   The half that hangs over lands in the next section's top padding (62px at its
   smallest, against a ~49px overhang), so it never covers copy. */
.banner__usps {
  position: absolute; z-index: 3;
  left: 50%; bottom: 0;
  width: min(var(--container), 100% - var(--gutter) * 2);
  transform: translate(-50%, 50%);
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.usp {
  background: var(--white); padding: 1.15rem 1.25rem;
  min-height: var(--usp-h);
  display: flex; flex-direction: column; justify-content: center;
}
.usp b {
  display: block; font-family: var(--font-heading);
  font-size: clamp(1.45rem, 1.1rem + 1.1vw, 1.95rem);
  color: var(--green-600); line-height: 1.1;
}
.usp span { font-size: .86rem; color: var(--ink-2); }

/* ---------- 18b. Quote card / stepped lead form ----------
   Three steps: the low-commitment question first, contact details last.
   People who have already answered two questions finish far more often. */
.quote-card {
  position: relative; z-index: 2;
  background: var(--white); color: var(--ink-2);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.quote-card__head { margin-bottom: 1.25rem; }
.quote-card__badge {
  display: inline-block; margin-bottom: .6rem; padding: .3rem .7rem;
  background: var(--green-100); color: var(--green-700);
  font-family: var(--font-display); font-weight: 700;
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
}
.quote-card h2 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); margin-bottom: .35rem; }
.quote-card__sub { font-size: .92rem; color: var(--ink-2); margin-bottom: 0; }
.quote-card__sub strong { color: var(--green-600); font-weight: 700; }
/* the card sits inside the hero, where .btn--primary inverts to white */
.quote-card .btn--primary { background: var(--green-550); color: var(--white); }
.quote-card .btn--primary:hover { background: var(--green-600); color: var(--white); }

.qprogress { margin-bottom: 1.3rem; }
.qprogress__track { height: 4px; background: var(--surface-2); overflow: hidden; }
.qprogress__fill {
  display: block; height: 100%; width: 33.33%;
  background: var(--green-500); transition: width .35s cubic-bezier(.2, .7, .3, 1);
}
.qprogress__steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  list-style: none; margin: .55rem 0 0; padding: 0;
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  font-family: var(--font-display); font-weight: 600; color: var(--muted);
}
.qprogress__steps li { text-align: center; }
.qprogress__steps li:first-child { text-align: left; }
.qprogress__steps li:last-child { text-align: right; }
.qprogress__steps .is-done { color: var(--green-600); }

.qform__count { font-size: .78rem; color: var(--muted); margin: 0 0 .9rem; }
.qform__count b { color: var(--ink); }
.qstep { border: 0; padding: 0; margin: 0; min-width: 0; }
.qstep__legend {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.08rem; color: var(--ink); padding: 0; margin-bottom: .9rem;
}
.qstep__legend:focus { outline: none; }
/* Steps only collapse once JS takes over; without it this is one long form
   that still submits. */
.qform--stepped .qstep { display: none; }
.qform--stepped .qstep.is-active { display: block; }
.qstep__nav { display: flex; gap: .7rem; margin-top: 1.2rem; }
.qstep__nav .btn { flex: 1 1 auto; }
.qstep__nav .btn--outline { flex: 0 0 auto; }
.qstep__err { color: #B3261E; font-size: .84rem; margin: .7rem 0 0; font-weight: 500; }

.qchips { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.qchips--2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 1rem; }
.qchip {
  position: relative; cursor: var(--cur-lock), pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; text-align: center; padding: .85rem .4rem; min-height: 82px;
  border: 1px solid var(--line); background: var(--white);
  font-size: .82rem; font-weight: 500; color: var(--ink-2);
  transition: border-color .15s, background .15s, color .15s;
}
.qchip input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: var(--cur-lock), pointer;
}
.qchip .material-symbols-outlined { font-size: 24px; color: var(--green-600); pointer-events: none; }
.qchip .qchip__t { pointer-events: none; }
.qchip:hover { border-color: var(--green-300); background: var(--green-100); }
.qchip:has(input:checked) {
  border-color: var(--green-500); background: var(--green-100);
  color: var(--green-700); box-shadow: inset 0 0 0 1px var(--green-500);
}
.qchip:has(input:focus-visible) { outline: 3px solid var(--green-500); outline-offset: 2px; }
.qchips--2 .qchip { flex-direction: row; gap: .55rem; min-height: 62px; font-size: .95rem; }

.field { margin-bottom: .85rem; }
.field label {
  display: block; font-size: .82rem; font-weight: 600; color: var(--ink);
  margin-bottom: .32rem; font-family: var(--font-display);
}
.field__opt { font-weight: 500; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: .78rem .9rem; border: 1px solid var(--line);
  border-radius: 0; font-family: var(--font-body); font-size: .95rem;
  background: var(--surface); color: var(--ink);
  transition: border-color .15s, background .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green-500); background: var(--white); outline: none;
}
.field textarea { min-height: 92px; resize: vertical; }
/* Date and time sit side by side, stacking on small phones. */
.field--split { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.field--split > div { min-width: 0; }
@media (max-width: 430px) { .field--split { grid-template-columns: 1fr; } }
.quote-card__note {
  font-size: .78rem; color: var(--muted); text-align: center; margin: 1rem 0 0;
  display: flex; align-items: center; justify-content: center; gap: .35rem;
}
.quote-card__note .material-symbols-outlined { font-size: 15px; color: var(--green-600); }

/* ---------- 18c. Statement banner ----------
   Full-bleed, double height, photograph behind a dark scrim. Left-aligned
   heading at 2x the normal h2, with a single CTA under the supporting points.
   Scrim alpha is the same .88 floor used on the hero — white body text needs
   4.5:1 over a photo with blown highlights. */
/* Flat --green-900 rather than a photograph behind a scrim. It keeps the dark
   weight the section had, and staying darker than the --green-550 hero, banner
   and CTA bands means the page does not read as four identical green slabs. */
.statement {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--green-900); color: var(--white);
  min-height: clamp(560px, 52vw, 900px);
  display: flex; flex-direction: column; justify-content: center;
}
/* Eyebrow, headline and CTA centre; the three cards keep their left-aligned
   reading order beneath. */
.statement__inner { padding-block: clamp(4.55rem, 9.1vw, 7.8rem); text-align: center; }
.statement__inner > .btn { margin-inline: auto; }
.statement h2 {
  color: var(--white); text-align: center;
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.5rem);   /* ~2x a normal h2 */
  max-width: 20ch; margin-inline: auto; margin-bottom: 1.6rem;
}
.statement__cards { text-align: left; }
.statement .section__eyebrow { color: var(--green-300); }
.statement__cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem); margin-bottom: 2.4rem;
}
.statement__card h3 { color: var(--white); font-size: 1.12rem; margin-bottom: .4rem; }
/* Hard two-line ceiling. The copy is already cut to a sentence, so this is a
   backstop for narrow columns rather than the primary trim. */
.statement__card p {
  color: var(--green-100); font-size: .95rem; margin-bottom: 0;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.statement .btn--primary { background: var(--white); color: var(--green-700); }
.statement .btn--primary:hover { background: var(--green-100); color: var(--green-700); }

/* Vertical rule between the three statement cards. */
.statement__card + .statement__card {
  border-left: 1px solid rgba(255, 255, 255, .22);
  padding-left: clamp(1.4rem, 3vw, 2.6rem);
}

/* Target reticle with the topic glyph sitting INSIDE it. Both are Material
   Symbols stacked in the same grid cell — the ring is set large and the glyph
   small, so the glyph lands in the reticle's centre rather than beside it.
   `place-items: center` on the parent does the centring; the explicit
   `grid-area` is what puts them in one cell instead of two columns. */
.statement__icon {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin-bottom: .9rem;
}
.statement__ring, .statement__glyph {
  grid-area: 1 / 1; font-variation-settings: "FILL" 1;
}
.statement__ring {
  font-size: 56px; color: var(--green-300); opacity: .55;
  animation: target-pulse 2.6s ease-in-out infinite;
}
.statement__glyph { font-size: 22px; color: var(--white); }

/* Slow breath on the reticle. Scale and opacity only — no layout property is
   animated, so it stays on the compositor. Under prefers-reduced-motion it is
   dropped entirely (see the reduced-motion block at the end of the file). */
@keyframes target-pulse {
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%      { transform: scale(1.13); opacity: .85; }
}

/* ---------- 18d. Service card ----------
   White panel, photo band on top, then category tag, on-site time, title, the
   full copy behind a disclosure, and a price/CTA footer. Replaced an
   image-backed card that put white text on a .95 dark-green panel over the
   photo — the photo was doing nothing at that alpha, and the dark fill made a
   grid of them read as a wall of green. */
.tcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.tcard:hover {
  box-shadow: var(--shadow); transform: translateY(-3px);
  border-color: var(--green-200);
}
.tcard__media { position: relative; aspect-ratio: 16 / 10; }
.tcard__bg { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Target ring straddling the join between photo and panel. Circular, and
   borderless — a literal 50%, which is exempt from the squared-off `--r` tokens
   the rest of the system uses. */
.tcard__icon {
  position: absolute; left: 1.25rem; bottom: 0; transform: translateY(50%);
  display: grid; place-items: center; width: 46px; height: 46px;
  background: var(--white); border-radius: 50%;
}
.tcard__ring, .tcard__glyph { grid-area: 1 / 1; font-variation-settings: "FILL" 1; }
.tcard__ring { font-size: 40px; color: var(--green-300); opacity: .6; }
.tcard__glyph { font-size: 19px; color: var(--green-700); }

.tcard__inner {
  display: flex; flex-direction: column; flex: 1;
  padding: 2.1rem 1.35rem 1.35rem;
}
/* Category tag + on-site time. The time is an estimate, so it is set as
   secondary information rather than a headline number. */
.tcard__tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem;
  margin-bottom: .7rem;
}
.tcard__tag {
  display: inline-flex; align-items: center;
  padding: .22rem .6rem; background: var(--green-100);
  color: var(--green-800); border: 1px solid var(--green-200);
  font-family: var(--font-display); font-weight: 600;
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
}
.tcard__time {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .78rem; color: var(--muted);
}
.tcard__time .material-symbols-outlined { font-size: 15px; color: var(--green-500); }

.tcard h3 { color: var(--ink); font-size: 1.12rem; margin-bottom: .55rem; }
.tcard h3 a { color: inherit; text-decoration: none; }
.tcard h3 a:hover { color: var(--green-700); text-decoration: underline; }

.tcard__d { margin-bottom: .5rem; }
.tcard__d summary {
  display: inline-flex; align-items: center; gap: .3rem; cursor: var(--cur-lock), pointer;
  font-family: var(--font-display); font-weight: 600; font-size: .86rem;
  color: var(--green-700); list-style: none; padding: .25rem 0;
}
.tcard__d summary::-webkit-details-marker { display: none; }
.tcard__d summary:hover { color: var(--green-500); }
.tcard__d summary .material-symbols-outlined { font-size: 18px; transition: transform .2s; }
.tcard__d[open] summary .material-symbols-outlined { transform: rotate(180deg); }
.tcard__d p { color: var(--ink-2); font-size: .93rem; margin: .5rem 0 0; text-wrap: pretty; }

/* Footer pinned to the bottom so price and CTA line up across a row of cards
   whatever length the headings run to. */
.tcard__foot {
  margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
}
.tcard__price {
  display: flex; align-items: baseline; gap: .3rem;
  font-family: var(--font-display); line-height: 1;
}
.tcard__price small {
  font-size: .72rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.tcard__price b { font-size: 1.35rem; font-weight: 700; color: var(--green-700); }
.tcard__btn { flex-shrink: 0; font-size: .9rem; padding: .7rem 1.05rem; }

/* Coupon tile. The graphic is a finished design with its own shape, notches and
   shadow baked in, so it takes none of the card's chrome — no panel, no border,
   no shadow of its own. It only borrows the hover lift so it behaves like the
   cards beside it. */
.tcard--coupon {
  background: none; border: 0; box-shadow: none;
  display: grid; place-items: center; padding: 0;
  text-decoration: none;
}
.tcard--coupon:hover { box-shadow: none; border-color: transparent; }
.tcard--coupon img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 10px 24px rgba(13, 47, 10, .16));
}

@media (max-width: 620px) {
  .tcard__foot { flex-direction: column; align-items: stretch; }
  .tcard__btn { width: 100%; }
  /* On one column the coupon would run the full width and tower over the cards;
     cap it and centre it instead. */
  .tcard--coupon img { max-width: 340px; margin-inline: auto; }
}

/* ---------- 18e. Restored components ----------
   These lived between the card block and Misc and were lost when the card CSS
   was replaced wholesale. Rewritten from their markup in generate.py. */

/* Highlight rectangle behind a run of heading text. --green-900 is the site's
   dark green surface; against the hero field it reads as a deep block at 3.1:1
   and white text on it is 14.6:1. box-decoration-break keeps the block intact
   if the run wraps. Reusable — put class="hl" around any words in any heading. */
.hl {
  background: var(--green-900); color: var(--white);
  padding: .04em .3em .12em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.section .hl, .section--tint .hl, .band .hl { color: var(--white); }
/* Light variant. --green-500 is the lightest green in the palette that still
   clears 3:1 with white text (3.71:1) — and 3:1 is the LARGE-text threshold, so
   this is only safe on headings, never on body copy. --green-400 is 2.86:1 and
   everything lighter is worse, so there is no lighter option that works. */
.hl--light { background: var(--green-500); color: var(--white); }
.section .hl--light, .section--tint .hl--light, .band .hl--light,
.statement .hl--light { background: var(--green-500); color: var(--white); }

/* Licence attribution for the species hero photographs. CC BY and CC BY-SA both
   require a visible credit and a link back to the source, so this is a legal
   requirement rather than a nicety — do not hide it. */
.img-credit {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto; padding: 0 var(--gutter) 2.6rem;
  font-size: .78rem; color: var(--muted); line-height: 1.5;
}
.img-credit a { color: var(--muted); text-decoration: underline; }
.img-credit a:hover { color: var(--green-700); }

/* "Read more reviews" sits centred under the review grid, with room above it so
   it reads as a section action rather than a fourth card. */
.reviews__more {
  display: flex; justify-content: center;
  margin: clamp(2.4rem, 4.5vw, 3.4rem) 0 0;
}

.policy__updated {
  font-size: .82rem; color: var(--muted);
  padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); margin-bottom: 2rem;
}

.split__media { display: flex; flex-direction: column; }

/* "Something else" chip reveals a free-text field in the quote form. */
.qchip--other { grid-column: 1 / -1; }
.qform__other { margin-top: .9rem; }

/* ---------- 18f. Area map ----------
   Schematic of the service area: an SVG grid with one pin per suburb, plotted
   from real coordinates, plus a search box that filters the pins. */
.amap { position: relative; }
.amap__bar {
  display: flex; align-items: center; gap: .6rem;
  background: var(--white); border: 1px solid var(--line);
  padding: .55rem .9rem; margin-bottom: 1.4rem;
  max-width: 420px;
}
.amap__bar .material-symbols-outlined { font-size: 20px; color: var(--green-500); }
.amap__bar input {
  flex: 1; border: 0; outline: 0; background: none; min-width: 0;
  font-family: var(--font-body); font-size: .95rem; color: var(--ink);
}
.amap__bar input::-webkit-search-cancel-button { cursor: var(--cur-lock), pointer; }
.amap__count {
  font-size: .78rem; color: var(--muted); white-space: nowrap;
  font-family: var(--font-display); font-weight: 600;
}
.amap__svg {
  display: block; width: 100%; height: auto;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--green-600);            /* the grid pattern uses currentColor */
}
.amap__pin { cursor: var(--cur-lock), pointer; transition: opacity .18s ease; }
.amap__pin.is-dim { opacity: .18; }
.amap__halo { fill: var(--green-500); opacity: 0; transition: opacity .18s ease; }
.amap__pin:hover .amap__halo, .amap__pin:focus-visible .amap__halo { opacity: .18; }
.amap__mark { fill: var(--green-600); transition: fill .18s ease; }
.amap__pin:hover .amap__mark, .amap__pin:focus-visible .amap__mark { fill: var(--green-800); }
.amap__dot { fill: var(--white); }
.amap__label {
  fill: var(--ink-2); font-family: var(--font-display); font-weight: 600;
  font-size: 11px; text-anchor: middle;
}
.amap__note { font-size: .8rem; color: var(--muted); margin: 1rem 0 0; }

@media (max-width: 620px) {
  .amap__label { font-size: 14px; }
  .amap__bar { max-width: none; }
}

/* ---------- 19. Misc ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.pill {
  display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .85rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  font-size: .84rem; color: var(--ink-2); font-weight: 500;
}
.pill .material-symbols-outlined { font-size: 16px; color: var(--green-500); }

/* Coupon. A notch is bitten out of each end and a perforation runs between the
   icon and the amount, so it reads as a torn-off voucher rather than a chip.
   The notches are cut with `mask` rather than pseudo-element circles filled to
   match the backdrop, so the shape holds on any background. Square corners, in
   line with the rest of the system. */
.price-tag {
  --notch: 9px;
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--white); color: var(--green-900);
  padding: .48rem 1.05rem .48rem 1.15rem;
  font-family: var(--font-display); line-height: 1;
  -webkit-mask:
    radial-gradient(var(--notch) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(var(--notch) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask:
    radial-gradient(var(--notch) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(var(--notch) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.price-tag__icon {
  font-size: 19px; color: var(--green-600); font-variation-settings: "FILL" 1;
  padding-right: .55rem; border-right: 1.5px dashed var(--green-300);
}
.price-tag__from {
  font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.price-tag__amount { font-size: 1.1rem; font-weight: 700; color: var(--green-700); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.media-slot {
  border-radius: 0; overflow: hidden; background: var(--green-700);
  aspect-ratio: 4 / 3; display: grid; place-items: center; color: rgba(255,255,255,.5);
  box-shadow: var(--shadow);
}
.media-slot img, .media-slot video { width: 100%; height: 100%; object-fit: cover; }
.media-slot__ph { text-align: center; padding: 2rem; }
.media-slot__ph .material-symbols-outlined { font-size: 44px; }
.media-slot__ph small { display: block; font-size: .76rem; margin-top: .5rem; letter-spacing: .04em; }

.note {
  background: var(--green-100); border: 1px solid var(--green-500); border-radius: var(--r);
  padding: 1.1rem 1.3rem; font-size: .94rem; display: flex; gap: .8rem; align-items: flex-start;
}
.note .material-symbols-outlined { color: var(--green-400); flex-shrink: 0; }
.note p:last-child { margin-bottom: 0; }

.toc {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.3rem 1.5rem; margin-bottom: 2.2rem;
}
.toc h2 { font-size: .82rem !important; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 .8rem !important; }
.toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.toc li { margin-bottom: .4rem; font-size: .92rem; }
.toc a { text-decoration: none; }

/* ---------- 20. Responsive ---------- */

/* Nothing may push the page wider than the viewport. Long words, emails and
   URLs wrap rather than forcing a horizontal scrollbar.
   NB: deliberately no `overflow-x: hidden` on body — it would break the sticky
   header and sidebar, and it only masks layout bugs rather than fixing them. */
p, li, h1, h2, h3, h4, td, dd, dt, figcaption, summary, .card, .tile,
.footer a, .side-box a, .review, .banner__content { overflow-wrap: anywhere; }
.prose a, .footer__contact a { word-break: break-word; }
/* Media never overflows its column */
img, svg, video, iframe, table { max-width: 100%; }

@media (max-width: 1080px) {
  .nav__list, .nav__phone { display: none; }
  .nav__toggle { display: flex; }
  .layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .sidebar { position: static; grid-template-columns: repeat(2, 1fr); }
  .hero--home .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .area-grid { grid-template-columns: repeat(3, 1fr); }
  .drop--mega { min-width: 0; }
  /* Artwork moves under the copy and spans the width. Its own aspect is
     1500/1630 = 92%, which is what the clearance below reserves. */
  .cta-band__media { inset: auto 0 0 0; }
  .cta-band__media img { width: 100%; height: auto; }
  /* Clearance so copy never sits over the circle. These used to start at 620px,
     which left the 620-1080px range with the banner and CTA text running
     straight over the artwork. */
  /* On the banner the clearance goes on the SECTION, not the inner container,
     because the USP row is a sibling of that container: put the padding on the
     container and the row lands after it, on top of the artwork.
     92vw is the composite's own aspect (1500/1630) plus a little, the same
     reasoning as the CTA band above. */
  .banner { padding-bottom: 96vw; }
  /* Artwork drops below the copy and spans the width, as on the CTA band. */
  .banner__media { inset: auto 0 0 0; }
  .banner__media img { width: 100%; height: auto; }
  .banner__body { margin-left: 0; }
  /* Row returns to normal flow beneath the copy. The gutter is re-applied by
     hand since the row deliberately sits outside `.container`. */
  .banner__usps {
    position: static; transform: none; width: auto;
    margin: clamp(2rem, 4vw, 3.2rem) var(--gutter) 0;
  }
  /* The CTA artwork is a rectangle, not a circle — its height is 92% of its
     width, so it needs 92vw plus breathing room rather than the circle's 100vw. */
  .cta-band__inner { padding-bottom: 96vw; }
}

@media (max-width: 860px) {
  body { font-size: 16px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--2 { grid-template-columns: 1fr; }
  .trustbar__inner { grid-template-columns: repeat(2, 1fr); gap: 1rem .5rem; }
  .trustbar__item { justify-content: flex-start; }
  .split { grid-template-columns: 1fr; gap: 2rem; }
  /* Stack bands with the image on top regardless of desktop side */
  .band__inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .band--reverse .band__figure { order: 0; }
  .band__figure { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
  .area-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .cta-band__actions { width: 100%; }
  .toc ol { columns: 1; }
  .prose { max-width: none; }
}

@media (max-width: 620px) {
  .header__inner { min-height: 70px; gap: .75rem; }
  .brand__divider, .brand__parent { display: none; }
  .brand__logo { height: 42px; }
  .nav__cta .btn--primary { display: none; }   /* replaced by .nav__call */
  .nav__call { display: flex; }
  .nav__cta { gap: .45rem; }
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
  .footer__brand { grid-column: 1 / -1; }
  .sidebar { grid-template-columns: 1fr; }
  .hero__actions .btn, .cta-band__actions .btn,
  .banner__actions .btn { width: 100%; }
  .hero__actions, .cta-band__actions, .banner__actions { width: 100%; }
  .footer__bottom { flex-direction: column; }
  .section, .band { padding-block: clamp(3.12rem, 10.4vw, 4.16rem); }
  .card, .side-card, .side-box, .side-trust, .quote-card, .review { padding: 1.25rem; }
  .faq summary { padding: 1rem 1.1rem; font-size: .98rem; }
  .faq__body { padding: 0 1.1rem 1.1rem; }
  .toc { padding: 1.1rem 1.2rem; }
  .banner__usps { grid-template-columns: repeat(2, 1fr); }
  .statement__cards { grid-template-columns: 1fr; gap: 1.2rem; }
  .statement h2 { max-width: none; }
  .qchips { grid-template-columns: repeat(2, 1fr); }
  .banner__body, .cta-band__inner > * { max-width: none; }
  .price-tag { width: 100%; justify-content: center; }
}

/* Small phones — 320px to ~430px */
@media (max-width: 430px) {
  .area-grid { grid-template-columns: 1fr; }
  .crumbs { font-size: .78rem; }
  .banner__stat b { font-size: 1.5rem; }
  .btn { font-size: .94rem; padding: .8rem 1.2rem; }
  .btn--lg { padding: .95rem 1.3rem; font-size: 1rem; }
  .section__head { margin-bottom: 1.8rem; }
}

/* Accessible tap targets.
   Keyed to viewport width rather than `pointer: coarse` so the sizing is
   guaranteed on the layout people actually get on a phone. Primary actions
   (buttons, phone links, nav) get the 44px comfort target; dense link lists
   get 34px, comfortably clear of the 24px WCAG 2.5.8 AA minimum without
   tripling the height of the footer. */
@media (max-width: 860px) {
  .btn, .nav__call, .nav__toggle, .tile, .area-grid a, .faq summary,
  .mnav__flat, .mnav summary, .side-box a, .side-card__phone,
  .footer__legal a, .footer__contact a, .nav__phone {
    min-height: 44px;
  }
  .side-box a, .side-card__phone, .footer__legal a, .footer__contact a {
    display: flex; align-items: center;
  }
  .footer li a, .crumbs a { display: inline-flex; align-items: center; min-height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  /* iteration-count matters as much as duration: a .01ms animation still set to
     `infinite` keeps cycling, it just does it too fast to see. Capping it at one
     iteration is what actually stops looping motion like the target pulse. */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .topbar, .header, .mnav, .cta-band, .footer__main, .sidebar, .hero__actions { display: none !important; }
  body { font-size: 12pt; }
}