/* Self-hosted (farmfonts.py), latin subset, from https://fonts.googleapis.com/css2 */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/lato-1ceff43a.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/lato-1e749525.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/assets/fonts/oswald-ed56cbd3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Wildlife removal farm — single stylesheet, inlined into <head> for zero
   render-blocking requests. Keep it small. */

:root {
  --ink: #192018;
  --ink-soft: #5a7159;
  --ink-faint: #5c6f5b;
  --bg: #fdfdfd;
  --bg-soft: #f5f7f5;
  --bg-sink: #eaeeea;
  --line: #d8dfd8;
  --brand: #4c8042;
  --brand-dk: #3f6a37;
  --brand-lt: #ebf4e9;
  --on-brand: #fbfcfc;
  --accent: #ad5f2b;
  --accent-lt: #fbf4ef;
  --on-accent: #fbfcfc;
  --warn: #936906;
  --warn-bg: #fdf7e8;
  --radius: 8px;
  --wrap: 1100px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ebefeb;
    --ink-soft: #9fb09e;
    --ink-faint: #839782;
    --bg: #101610;
    --bg-soft: #182118;
    --bg-sink: #212c21;
    --line: #2f3d2e;
    --brand: #61a354;
    --brand-dk: #82b977;
    --brand-lt: #243d1f;
    --on-brand: #0b0f0e;
    --accent: #d28049;
    --accent-lt: #2c1f16;
    --on-accent: #0b0f0e;
    --warn: #d3a945;
    --warn-bg: #2b2517;
  }
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: var(--on-brand); padding: 10px 16px;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- Header ---------- */
.top {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.top-in {
  display: flex; align-items: center; gap: 20px;
  min-height: 68px;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.06rem; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none; flex: 0 0 auto;
}
.logo svg { flex: 0 0 auto; }
.logo span small {
  display: block; font-size: 0.66rem; font-weight: 500;
  color: var(--ink-faint); letter-spacing: 0.02em; text-transform: uppercase;
}
.top-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* ---------- Nav ---------- */
.nav { border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.nav ul {
  display: flex; flex-wrap: wrap; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.nav a {
  display: block; padding: 11px 13px;
  font-size: 0.905rem; font-weight: 550;
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--brand); background: var(--bg); }
.nav a[aria-current="page"] {
  color: var(--brand); border-bottom-color: var(--brand); background: var(--bg);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 12px 20px;
  background: var(--brand); color: var(--on-brand);
  font-weight: 650; font-size: 0.95rem; line-height: 1.2;
  text-decoration: none; border: 0; border-radius: var(--radius);
  cursor: pointer; text-align: center;
}
.btn:hover { background: var(--brand-dk); }
.btn-lg { padding: 15px 28px; font-size: 1.04rem; }
.btn-ghost {
  background: transparent; color: var(--brand);
  border: 1.5px solid var(--brand);
}
.btn-ghost:hover { background: var(--brand-lt); color: var(--brand-dk); }
.btn-phone { background: var(--accent); color: var(--on-accent); }
.btn-phone:hover { filter: brightness(0.88); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(170deg, var(--brand-lt) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  padding: 52px 0 46px;
}
.hero h1 {
  font-size: clamp(1.85rem, 4.4vw, 2.75rem);
  line-height: 1.15; letter-spacing: -0.022em;
  margin: 0 0 16px; max-width: 20ch;
}
.hero .lede {
  font-size: clamp(1.04rem, 2vw, 1.2rem);
  color: var(--ink-soft); max-width: 62ch; margin: 0 0 26px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Hero with a moving background ---------- */
/* Same treatment as the parent brand's hero: full-bleed motion behind the type,
   under a gradient heavy enough that the headline never depends on which frame
   happens to be on screen. The video is decoration and nothing else — it is
   aria-hidden, not focusable, carries no audio, and says nothing the text does
   not already say. The poster image sits underneath it permanently, so if the
   video never attaches (phone, reduced motion, metered connection) the hero
   still looks finished rather than broken. */
.hero.has-media {
  position: relative; overflow: hidden;
  background: var(--brand-dk); border-bottom: 0;
}
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img, .hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-media video[hidden] { display: none; }
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(75% 60% at 15% 92%, rgba(15,92,79,0.34), transparent 62%),
    linear-gradient(180deg, rgba(8,20,18,0.58) 0%, rgba(8,20,18,0.34) 42%, rgba(8,20,18,0.80) 100%);
}
/* Type sits above the scrim and is pinned to white in BOTH colour schemes —
   the background behind it is a dark video either way, so it must not follow
   the light/dark tokens the rest of the page uses. */
.hero.has-media .wrap { position: relative; padding: 78px 0 66px; }
.hero.has-media h1    { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.72), 0 1px 3px rgba(0,0,0,0.55); }
.hero.has-media .lede { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,0.70), 0 1px 2px rgba(0,0,0,0.5); }
.hero.has-media .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.66); }
.hero.has-media .btn-ghost:hover { background: rgba(255,255,255,0.14); color: #fff; }
@media (max-width: 760px) { .hero.has-media .wrap { padding: 48px 0 42px; } }
@media (prefers-reduced-motion: reduce) { .hero-media video { display: none; } }

/* ---------- Trust strip ---------- */
.trust {
  background: var(--bg-sink); border-bottom: 1px solid var(--line);
  padding: 16px 0; font-size: 0.9rem;
}
.trust ul {
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  list-style: none; margin: 0; padding: 0; color: var(--ink-soft);
}
.trust li { display: flex; align-items: center; gap: 8px; }
.trust svg { flex: 0 0 auto; color: var(--brand); }

/* ---------- Page body ---------- */
main { display: block; }
.page { padding: 40px 0 60px; }
.page h1 {
  font-size: clamp(1.7rem, 3.6vw, 2.35rem);
  line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 8px;
}
.page h2 {
  font-size: clamp(1.28rem, 2.4vw, 1.55rem);
  line-height: 1.25; letter-spacing: -0.014em;
  margin: 2.2em 0 0.6em; padding-top: 0.2em;
}
.page h3 {
  font-size: 1.11rem; line-height: 1.3;
  margin: 1.7em 0 0.45em;
}
.page p, .page ul, .page ol { margin: 0 0 1.05em; }
.page ul, .page ol { padding-left: 1.35em; }
.page li { margin-bottom: 0.4em; }
.page a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.page a:hover { color: var(--brand-dk); }
.lede-big { font-size: 1.12rem; color: var(--ink-soft); }

/* ---------- Breadcrumbs ---------- */
.crumbs { font-size: 0.85rem; color: var(--ink-faint); margin: 0 0 18px; }
.crumbs a { color: var(--ink-faint); }
.crumbs span { padding: 0 6px; }

/* ---------- Meta line ---------- */
.meta {
  font-size: 0.82rem; color: var(--ink-faint);
  padding-bottom: 20px; margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

/* ---------- Callouts ---------- */
.note, .warnbox, .keybox {
  border-radius: var(--radius); padding: 18px 20px; margin: 1.6em 0;
  font-size: 0.965rem;
}
.note { background: var(--bg-soft); border-left: 4px solid var(--brand); }
.warnbox { background: var(--warn-bg); border-left: 4px solid var(--warn); }
.keybox { background: var(--accent-lt); border-left: 4px solid var(--accent); }
.note > :first-child, .warnbox > :first-child, .keybox > :first-child { margin-top: 0; }
.note > :last-child, .warnbox > :last-child, .keybox > :last-child { margin-bottom: 0; }
.note strong, .warnbox strong, .keybox strong { display: block; margin-bottom: 4px; }

/* ---------- Tables ---------- */
.tablewrap { overflow-x: auto; margin: 1.6em 0; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
th { background: var(--bg-soft); font-weight: 650; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }
caption { caption-side: bottom; padding: 10px 14px; font-size: 0.82rem; color: var(--ink-faint); text-align: left; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 16px; margin: 1.6em 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; background: var(--bg);
}
.card h3 { margin: 0 0 6px; font-size: 1.04rem; }
.card p { margin: 0 0 10px; font-size: 0.94rem; color: var(--ink-soft); }
.card p:last-child { margin-bottom: 0; }
.card a.more { font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.card a.more:hover { text-decoration: underline; }

/* ---------- Steps ---------- */
.steps { list-style: none; padding: 0; counter-reset: s; margin: 1.6em 0; }
.steps > li {
  counter-increment: s; position: relative;
  padding: 0 0 20px 52px; margin: 0;
  border-left: 2px solid var(--line); margin-left: 15px;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  content: counter(s);
  position: absolute; left: -16px; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: var(--on-brand);
  font-size: 0.85rem; font-weight: 700;
  display: grid; place-items: center;
}
.steps h3 { margin: 2px 0 4px; font-size: 1.03rem; }
.steps p { margin: 0 0 0.5em; font-size: 0.95rem; }

/* ---------- FAQ ---------- */
details.faq {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0; margin: 0 0 10px; background: var(--bg);
}
details.faq summary {
  cursor: pointer; padding: 15px 18px;
  font-weight: 620; font-size: 1rem; list-style: none;
  display: flex; justify-content: space-between; gap: 14px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--brand); font-size: 1.3rem; line-height: 1; flex: 0 0 auto; }
details.faq[open] summary::after { content: "\2212"; }
details.faq .fa { padding: 0 18px 4px; }
details.faq .fa > :first-child { margin-top: 0; }

/* ---------- Form ---------- */
.formcard {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; background: var(--bg-soft); margin: 1.6em 0;
}
.formcard h2 { margin-top: 0; }
.field { margin-bottom: 15px; }
.field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 5px; }
.field .hint { display: block; font-weight: 400; color: var(--ink-faint); font-size: 0.82rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px;
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--line);
  border-radius: 8px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand);
}
.field textarea { min-height: 110px; resize: vertical; }
.field-row { display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.hp { position: absolute; left: -9999px; }
.formnote { font-size: 0.82rem; color: var(--ink-faint); margin: 12px 0 0; }
.alert { border-radius: var(--radius); padding: 15px 18px; margin: 0 0 18px; font-size: 0.95rem; }
.alert-ok { background: var(--brand-lt); border-left: 4px solid var(--brand); }
.alert-err { background: var(--warn-bg); border-left: 4px solid var(--warn); }
.errlist { margin: 6px 0 0; padding-left: 1.2em; }

/* ---------- CTA band ---------- */
.ctaband {
  background: var(--brand); color: var(--on-brand);
  padding: 44px 0; margin-top: 50px;
}
.ctaband h2 { margin: 0 0 10px; font-size: clamp(1.35rem, 2.8vw, 1.8rem); letter-spacing: -0.018em; }
.ctaband p { margin: 0 0 22px; opacity: 0.92; max-width: 60ch; }
.ctaband .btn { background: #fff; color: var(--brand-dk); }
.ctaband .btn:hover { background: var(--brand-lt); }
.ctaband .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.ctaband .btn-ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }
.ctaband .hero-actions { gap: 12px; }

/* ---------- Related links ---------- */
.related { margin: 2.4em 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.related h2 { margin-top: 0; font-size: 1.15rem; }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.related a { font-weight: 600; font-size: 0.94rem; }

/* ---------- Footer ---------- */
.foot {
  background: var(--bg-sink); border-top: 1px solid var(--line);
  padding: 40px 0 26px; font-size: 0.9rem; color: var(--ink-soft);
}
.foot-cols { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.foot h3 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin: 0 0 10px; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 6px; }
.foot a { color: var(--ink-soft); text-decoration: none; }
.foot a:hover { color: var(--brand); text-decoration: underline; }
.foot-legal {
  margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 0.82rem; color: var(--ink-faint);
}
.foot-legal p { margin: 0 0 8px; }

/* ---------- Utility ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt0 { margin-top: 0; }

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .top-in { min-height: 60px; }
  .logo span small { display: none; }
  .hero { padding: 36px 0 32px; }
  .nav ul { overflow-x: auto; flex-wrap: nowrap; }
  .nav a { white-space: nowrap; }
  .formcard { padding: 20px 16px; }
}

/* ---------- Admin ---------- */
.admin-body { background: var(--bg-soft); }
.admin-shell { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
.admin-top {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 0; margin-bottom: 20px; border-bottom: 1px solid var(--line);
}
.admin-top h1 { font-size: 1.25rem; margin: 0; }
.admin-top .spacer { margin-left: auto; }
.login-shell { max-width: 380px; margin: 8vh auto; padding: 0 20px; }
.stat-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 22px; }
.stat { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat b { display: block; font-size: 1.7rem; line-height: 1.1; letter-spacing: -0.02em; }
.stat span { font-size: 0.82rem; color: var(--ink-faint); }
.lead-detail { font-size: 0.88rem; color: var(--ink-soft); }
.pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 0.76rem; font-weight: 600; background: var(--brand-lt); color: var(--brand-dk); }

/* ===========================================================================
   FIGURES — original inline SVG diagrams + motion
   =========================================================================== */

:root {
  --fig-sky-1: #dbeaf2;  --fig-sky-2: #eef4f3;
  --fig-hill: #9fb9ae;
  --fig-grass: #6ea567;  --fig-soil: #a9855f;
  --fig-rock: #b9b3a6;   --fig-rock-line: #8d8577;  --fig-void: #4a453c;
  --fig-water: #6aa9c9;  --fig-water-line: #2f7fa8;
  --fig-house: #e6e0d6;  --fig-roof: #7b4a3a;  --fig-glass: #8fc0d6;
  --fig-tank: #f2efe9;   --fig-tank-line: #5d6b68;
  --fig-pipe: #4a5a57;   --fig-panel: #34433f;  --fig-led: #6fe0a8;
  --fig-bubble: #ffffff; --fig-sludge: #6d5a44;
  --fig-accent: #b4531c; --fig-good: #2f8f56;   --fig-bad: #c0492c;
  --fig-warn: #b08428;
  --fig-panel-ok: #f4f7f6; --fig-panel-bad: #fdf1ee;
  --fig-ink: #16211f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fig-sky-1: #1b2b33;  --fig-sky-2: #16211f;
    --fig-hill: #2f4740;
    --fig-grass: #3f7a48;  --fig-soil: #6b5238;
    --fig-rock: #4a463d;   --fig-rock-line: #6d6656;  --fig-void: #0d0c0a;
    --fig-water: #2b6a8a;  --fig-water-line: #63bde4;
    --fig-house: #3a4442;  --fig-roof: #5a3428;       --fig-glass: #2f6b83;
    --fig-tank: #232f2d;   --fig-tank-line: #8ba09b;
    --fig-pipe: #8ba09b;   --fig-panel: #0f1614;      --fig-led: #6fe0a8;
    --fig-bubble: #cfeee2; --fig-sludge: #4a3c2c;
    --fig-accent: #e8925c; --fig-good: #4fbf7c;       --fig-bad: #e57455;
    --fig-warn: #d8b05e;
    --fig-panel-ok: #17211f; --fig-panel-bad: #2a1a16;
    --fig-ink: #e9efee;
  }
}

.fig {
  margin: 2em 0;
  padding: 0;
}
.fig svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  overflow: visible;
}
.fig figcaption {
  margin-top: 10px;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--ink-faint);
}
.fig figcaption a { color: var(--brand); }

/* Break wide figures out of the narrow text column on large screens */
@media (min-width: 900px) {
  .fig-wide { width: calc(100% + 150px); margin-left: -75px; }
}

/* Hero figure sits beside the hero copy on wide screens */
.hero-grid { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
  .hero-grid .fig { margin: 0; }
}
.fig-hero svg { border-color: transparent; background: transparent; }
.fig-hero figcaption { font-size: 0.83rem; }

/* SVG text styles */
.fig-h    { font: 700 15px/1 var(--sans); fill: var(--fig-ink); letter-spacing: -.01em; }
.fig-sub  { font: 500 12.5px/1 var(--sans); fill: var(--fig-ink); opacity: .72; }
.fig-lbl  { font: 700 10px/1 var(--sans); fill: var(--fig-ink); letter-spacing: .07em; opacity: .85; }
.fig-lbl-inv { fill: #fff; opacity: .95; }
.fig-numt { font: 700 13px/1 var(--sans); fill: #fff; }
.fig-pill { font: 700 11px/1 var(--sans); fill: #fff; }

/* ---------- Motion ---------- */
@keyframes fig-rise {
  0%   { transform: translateY(0);     opacity: 0; }
  15%  { opacity: .95; }
  100% { transform: translateY(-74px); opacity: 0; }
}
.fig-bubbles > * { animation: fig-rise 2.4s linear infinite; }

@keyframes fig-fall {
  0%   { transform: translateY(0);    opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: translateY(104px); opacity: 0; }
}
.fig-perc > * { animation: fig-fall 2.8s linear infinite; }

@keyframes fig-settle-k {
  0%   { transform: translateY(0);    opacity: 0; }
  25%  { opacity: .9; }
  100% { transform: translateY(52px); opacity: 0; }
}
.fig-settle > * { animation: fig-settle-k 2.6s ease-in infinite; }

@keyframes fig-drip-k {
  0%   { transform: translateY(-4px); opacity: 0; }
  30%  { opacity: .95; }
  100% { transform: translateY(20px); opacity: 0; }
}
.fig-drip > * { animation: fig-drip-k 2s ease-in infinite; }

@keyframes fig-spray-k {
  0%, 100% { opacity: .25; transform: scale(.94); }
  50%      { opacity: 1;   transform: scale(1); }
}
.fig-spray > g { animation: fig-spray-k 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
.fig-spray > rect { animation: none; }

@keyframes fig-flow {
  0%   { stroke-dasharray: 0 200; opacity: .2; }
  40%  { opacity: 1; }
  100% { stroke-dasharray: 200 0; opacity: .2; }
}
.fig-filter > * { animation: fig-flow 2.6s ease-in-out infinite; }

@keyframes fig-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }
.fig-led { animation: fig-blink 2.2s steps(1) infinite; }

@keyframes fig-alarm-k {
  0%, 49%   { opacity: 1;  r: 3.4; }
  50%, 100% { opacity: .2; r: 2.6; }
}
.fig-alarm { animation: fig-alarm-k .9s steps(1) infinite; }

@keyframes fig-spin { to { transform: rotate(360deg); } }
.fig-fan { animation: fig-spin 1.1s linear infinite; transform-box: fill-box; transform-origin: center; }

@keyframes fig-odour-k {
  0%   { opacity: 0;  transform: translateY(6px); }
  35%  { opacity: .85; }
  100% { opacity: 0;  transform: translateY(-22px); }
}
.fig-odour > * { animation: fig-odour-k 3.2s ease-out infinite; }

@keyframes fig-pop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
.fig-mark, .fig-num, .fig-pill-g { transform-box: fill-box; transform-origin: center; }

/* Bars animate out when the figure scrolls into view */
.fig-bar { width: 0; }
.is-in .fig-bar { animation: fig-grow 1s cubic-bezier(.22,.8,.3,1) forwards; }
@keyframes fig-grow { to { width: var(--bw); } }

/* ---------- One-way exclusion door ---------- */
/* The resting state has to read correctly on its own: flap shut, animal inside,
   and the static OUT / NEVER BACK IN arrows carrying the meaning. The animation
   only runs once the figure has scrolled into view. Feet sit on y=250. */
.excl-animal { transform: translate(150px, 224px); }
.excl-flap   { transform: rotate(0deg); }

.is-in .excl-animal { animation: excl-move 9s cubic-bezier(.45,0,.55,1) infinite; }
.is-in .excl-flap   { animation: excl-flap 9s ease-in-out infinite; }

@keyframes excl-move {
  0%   { transform: translate(96px,224px)  scaleX(1);  opacity: 0; }
  6%   { transform: translate(130px,224px) scaleX(1);  opacity: 1; }
  22%  { transform: translate(288px,224px) scaleX(1);  opacity: 1; }
  30%  { transform: translate(372px,224px) scaleX(1);  opacity: 1; }
  40%  { transform: translate(474px,224px) scaleX(1);  opacity: 1; }
  50%  { transform: translate(586px,224px) scaleX(1);  opacity: 1; }
  /* turns around - scaleX passing through 0 reads as the turn itself */
  53%  { transform: translate(586px,224px) scaleX(0);  opacity: 1; }
  56%  { transform: translate(578px,224px) scaleX(-1); opacity: 1; }
  70%  { transform: translate(460px,224px) scaleX(-1); opacity: 1; }
  /* shoves at the flap twice; the stop means it does not budge */
  74%  { transform: translate(424px,224px) scaleX(-1); opacity: 1; }
  78%  { transform: translate(448px,224px) scaleX(-1); opacity: 1; }
  82%  { transform: translate(424px,224px) scaleX(-1); opacity: 1; }
  86%  { transform: translate(452px,224px) scaleX(-1); opacity: 1; }
  89%  { transform: translate(452px,224px) scaleX(0);  opacity: 1; }
  97%  { transform: translate(646px,224px) scaleX(1);  opacity: 1; }
  100% { transform: translate(700px,224px) scaleX(1);  opacity: 0; }
}

/* Negative rotation swings the flap outward. The small positive nudges are the
   animal shoving it from outside and getting nowhere. */
@keyframes excl-flap {
  0%, 16%   { transform: rotate(0deg); }
  25%       { transform: rotate(-63deg); }
  33%       { transform: rotate(-69deg); }
  41%       { transform: rotate(-14deg); }
  45%, 72%  { transform: rotate(0deg); }
  75%       { transform: rotate(5deg); }
  78%       { transform: rotate(0deg); }
  83%       { transform: rotate(5deg); }
  86%, 100% { transform: rotate(0deg); }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1);
}

/* Cards and steps lift slightly on hover */
.card { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.card:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.22);
}
.btn { transition: background-color .18s ease, transform .12s ease; }
.btn:active { transform: translateY(1px); }
details.faq { transition: border-color .2s ease; }
details.faq[open] { border-color: var(--brand); }

/* ---------- Consent checkbox ---------- */
/* The target is the whole label, not the 13px box: a checkbox that is hard to
   hit is a checkbox people tick by accident, and accidental consent is the
   thing this control exists to avoid. */
.field-consent { margin: 22px 0 6px; }
.consent-label {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft); cursor: pointer;
  font-weight: 400; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft);
}
.consent-label:hover { border-color: var(--brand); }
.consent-label input[type="checkbox"] {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brand);
}
.consent-label input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 2px;
}
.field-consent.has-err .consent-label {
  border-color: var(--fig-bad); background: var(--accent-lt);
}
.field-consent .hint { margin: 8px 2px 0; }

/* A visible focus ring on every interactive thing, not just form fields. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 3px;
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .fig-bar { width: var(--bw); }
  html { scroll-behavior: auto; }
}

/* The hero figure renders at roughly half the width of the full-bleed ones, so its
   in-SVG type needs to be proportionally larger to stay legible. */
.fig-hero .fig-lbl { font-size: 15px; letter-spacing: .04em; }
.fig-hero .fig-sub { font-size: 16px; }
.fig-hero .fig-h   { font-size: 19px; }
@media (max-width: 899px) {
  .fig-hero .fig-lbl { font-size: 11px; }
  .fig-hero .fig-sub { font-size: 13px; }
}

/* On narrow screens a dense diagram squeezed to 335px makes its labels unreadable.
   Rather than shrink the type into illegibility, let the figure scroll inside its own
   container at a legible minimum width. The page body still never scrolls sideways. */
@media (max-width: 760px) {
  .fig {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .fig svg { min-width: 600px; }
  .fig figcaption {
    position: sticky; left: 0;
    min-width: 0; max-width: 100vw;
  }
  .fig::after {
    content: "Swipe the diagram to see all of it";
    display: block; position: sticky; left: 0;
    margin-top: 4px; font-size: 0.75rem; color: var(--ink-faint); font-style: italic;
  }
  .fig-wide { width: auto; margin-left: 0; }
}

/* Destructive action in the lead dashboard */
.btn-danger { background: var(--fig-bad); }
.btn-danger:hover { background: #9e3a20; }

/* ---------- Photography ---------- */
.fig-photo img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg-soft);
}
.fig-photo { overflow: visible; }
.fig-photo::after { content: none; }        /* no swipe hint - photos scale fine */
.illus {
  display: inline-block; margin-right: 6px; padding: 1px 7px;
  border-radius: 20px; background: var(--bg-sink); color: var(--ink-faint);
  font-size: 0.72rem; font-weight: 650; letter-spacing: .03em;
  text-transform: uppercase; vertical-align: 1px;
}
@media (max-width: 760px) {
  .fig-photo { overflow-x: visible; }
  .fig-photo img { min-width: 0; }
}

/* ---------- Video figure ---------- */
.fig-video video {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg-soft);
}
.fig-video { overflow: visible; }
.fig-video::after { content: none; }
@media (prefers-reduced-motion: reduce) { .fig-video video { display: none; } }


/* ==========================================================================
   VISUAL PASS
   Measured against the three best-ranked sites in this category. They share a
   structural vocabulary our pages did not have: hero type at 46-70px, a deep
   band alternating with white, circular marks, and a rule under each section
   heading. None of their colour is used - the palette is generated per site.
   ========================================================================== */

/* ---------- Hero type with some weight behind it ---------- */
.hero h1 {
  font-size: clamp(2.15rem, 5.2vw, 3.4rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.08;
  max-width: 18ch;
}
.hero .lede { font-size: clamp(1.06rem, 2.1vw, 1.26rem); max-width: 56ch; }

/* ---------- Trust strip as circular marks ---------- */
/* Same markup, same words. The mark does the work a paragraph of reassurance
   would otherwise have to, and it is drawn in CSS so it costs no request. */
.trust ul li { position: relative; padding-left: 30px; }
.trust ul li::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 20px; height: 20px; margin-top: -10px; border-radius: 50%;
  background: var(--brand-lt); border: 1.5px solid var(--brand);
}
.trust ul li::after {
  content: ''; position: absolute; left: 7px; top: 50%;
  width: 5px; height: 9px; margin-top: -6px;
  border: solid var(--brand); border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* ---------- Section headings get a rule ---------- */
.page h2 { position: relative; padding-bottom: 0.36em; }
.page h2::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 54px; height: 3px; border-radius: 2px; background: var(--brand);
}

/* ---------- Cards with a top edge ---------- */
.card { position: relative; overflow: hidden; }
.card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  opacity: 0; transition: opacity .22s ease;
}
.card:hover::before { opacity: 1; }

/* ---------- A deep band, so the page is not white end to end ---------- */
.deep {
  background: var(--brand-dk); color: #fff;
  padding: 54px 0; border-block: 1px solid rgba(255,255,255,0.10);
}
.deep h2, .deep h3 { color: #fff; }
.deep h2::after { background: rgba(255,255,255,0.55); }
.deep p, .deep li { color: rgba(255,255,255,0.86); }
.deep .card {
  background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18);
}
.deep .card h3 { color: #fff; }
.deep .card p { color: rgba(255,255,255,0.82); }

/* ---------- A little more air between sections ---------- */
.page { padding: 52px 0 72px; }
@media (max-width: 760px) {
  .page { padding: 34px 0 48px; }
  .hero h1 { max-width: none; }
}


/* ---------- Nav: species behind a disclosure ---------- */
/* <details> is used rather than a scripted menu because it is keyboard
   operable and works with JavaScript off, and these sites ship almost none. */
.nav-drop { position: relative; }
.nav-drop details { position: relative; }
.nav-drop summary {
  display: block; padding: 11px 13px; cursor: pointer;
  font-size: 0.905rem; font-weight: 550; color: var(--ink-soft);
  border-bottom: 2px solid transparent; list-style: none;
}
.nav-drop summary::-webkit-details-marker { display: none; }
.nav-drop summary:hover { color: var(--brand); background: var(--bg); }
.nav-drop details.is-here > summary {
  color: var(--brand); border-bottom-color: var(--brand); background: var(--bg);
}
.nav-drop .caret {
  display: inline-block; width: 0; height: 0; margin-left: 7px;
  vertical-align: middle;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.nav-drop details[open] .caret { transform: rotate(180deg); }
.nav-drop details > ul {
  position: absolute; z-index: 40; top: 100%; left: 0;
  min-width: 230px; padding: 6px; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 14px 34px rgba(0,0,0,0.14);
}
.nav-drop details > ul a { padding: 8px 10px; border-bottom: 0; border-radius: 6px; }
@media (max-width: 760px) {
  .nav-drop details > ul { position: static; box-shadow: none; min-width: 0; }
}

/* ---------- C: full-width band on the soft ground ---------- */
.band-soft {
  background: var(--bg-soft); border-block: 1px solid var(--line);
  padding: 56px 0 60px;
}
.band-soft .lede-big { max-width: 62ch; }
.grid-3 { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 26px; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- E: the fact strip ---------- */
.factstrip { background: var(--bg); border-bottom: 1px solid var(--line); padding: 34px 0; }
.factstrip ul {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.factstrip li { display: flex; flex-direction: column; gap: 4px; }
.factstrip b {
  font-size: 2.1rem; font-weight: 700; line-height: 1;
  letter-spacing: -0.03em; color: var(--brand);
}
.factstrip span { font-size: 0.92rem; color: var(--ink-soft); }

/* The deep band carries its own keybox treatment: the light one disappears
   against a dark ground. */
.deep .keybox {
  background: rgba(255,255,255,0.07); border-left: 4px solid rgba(255,255,255,0.5);
}
.deep .keybox strong { color: #fff; }
.deep a { color: #fff; text-decoration: underline; }
.deep strong { color: #fff; }

/* Cards in a grid must be the same height with the link on the baseline,
   otherwise a three-up row looks like a mistake rather than a set. */
.grid-3 .card, .grid-2 .card { display: flex; flex-direction: column; }
.grid-3 .card .more, .grid-2 .card .more { margin-top: auto; padding-top: 10px; }

/* There was no base link colour, so every in-body link fell back to the
   browser default blue - which belongs to no palette and undercut all fifteen
   of them at once. */
a { color: var(--brand); }
a:hover { color: var(--brand-dk); }
.card a.more { color: var(--brand); }
.deep a, .hero.has-media a { color: #fff; }

/* The heading rule was scoped to .page, so the headings in the two new bands
   lost it. Same treatment, wherever a section heading appears. */
.band-soft h2, .deep h2 {
  position: relative; padding-bottom: 0.36em;
  font-size: clamp(1.42rem, 2.7vw, 1.78rem);
  line-height: 1.2; letter-spacing: -0.02em;
}
.band-soft h2::after, .deep h2::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 54px; height: 3px; border-radius: 2px; background: var(--brand);
}
.deep h2::after { background: rgba(255,255,255,0.55); }


/* ---------- Footer market list ---------- */
/* Every market, on every page, at the owner's explicit direction. Kept visually
   quiet and marked up as a nav so it reads as site navigation rather than as a
   block of body copy. */
.foot-network { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 22px; }
.foot-network h3 { margin: 0 0 12px; font-size: 0.86rem; letter-spacing: .04em;
                   text-transform: uppercase; color: var(--ink-faint); }
.foot-network ul {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: grid; gap: 4px 20px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.foot-network a { font-size: 0.88rem; color: var(--ink-soft); text-decoration: none; }
.foot-network a:hover { color: var(--brand); text-decoration: underline; }
.foot-network p { margin: 0; font-size: 0.86rem; }

/* ===========================================================================
   2026-10 redesign layer, loaded after style.css. One stylesheet for every
   wildlife site; only the token block between the @tokens markers differs per
   site and is written by wildlife/redesign.py from wildlife/redesign_palettes.py.
   Macon (the approved pilot) is the default below.
   =========================================================================== */
/*@tokens*/
:root {
  --ink: #16161d;
  --bg: #fafafb;
  --bg-soft: #f3f3f4;
  --bg-sink: #e8e8ea;
  --card: #fefefe;
  --ink-soft: #4f4f63;
  --ink-faint: #616175;
  --brand: #27272a;
  --brand-dk: #27272a;
  --brand-lt: #eeeeef;
  --accent: #c01b5e;
  --accent-dk: #a71852;
  --accent-lt: #f9ebf1;
  --on-brand: #fbfcfc;
  --on-accent: #fbfcfc;
  --line: rgba(22,22,29,.12);
  --line-2: rgba(22,22,29,.22);
  --foot-bg: #111118;
  --foot-ink: #ececee;
  --accent-hi: #e96399;
  --shade: 13,13,18;
  --shadow: 0 1px 2px rgba(22,22,29,.05), 0 18px 40px -26px rgba(39,39,42,.42);
  --fig-sky-2: #f3f3f4;
  --fig-void: #282834;
  --fig-house: #e4e4e7;
  --fig-roof: #27272a;
  --fig-rock: #b2b2bd;
  --fig-rock-line: #717184;
  --fig-grass: #5E8B5F;
  --fig-soil: #A07A55;
  --fig-tank: #fefefe;
  --fig-tank-line: #616175;
  --fig-pipe: #616175;
  --fig-accent: #c01b5e;
  --fig-good: #2F7A4D;
  --fig-bad: #B42318;
  --fig-panel-ok: #f3f3f4;
  --fig-ink: #16161d;
  --radius: 0px; --wrap: 1180px;
  --r-btn: 0px; --r-chip: 0px; --r-hero: 0px; --r-media: 0px; --r-field: 0px;
  --sans: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Oswald', 'Lato', system-ui, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
  --hero-max: 18ch; --hero-dir: 90deg;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101016;
    --bg-soft: #17171f;
    --bg-sink: #1f1f29;
    --card: #191922;
    --ink: #ececee;
    --ink-soft: #c0c0c6;
    --ink-faint: #95959f;
    --brand: #9d9da4;
    --brand-dk: #aeaeb4;
    --brand-lt: #2a2a2d;
    --accent: #ec77a6;
    --accent-dk: #ee8bb3;
    --accent-lt: #371523;
    --on-brand: #0b0f0e;
    --on-accent: #0b0f0e;
    --line: rgba(236,236,238,.10);
    --line-2: rgba(236,236,238,.2);
    --shadow: 0 1px 0 rgba(255,255,255,.03), 0 24px 50px -30px rgba(0,0,0,.8);
    --foot-bg: #0b0b0f;
    --fig-sky-2: #17171f;
    --fig-void: #09090c;
    --fig-house: #32323e;
    --fig-roof: #4a4a4f;
    --fig-rock: #43434c;
    --fig-rock-line: #737382;
    --fig-grass: #3C6B45;
    --fig-soil: #7D6044;
    --fig-tank: #191922;
    --fig-tank-line: #95959f;
    --fig-pipe: #95959f;
    --fig-accent: #ec77a6;
    --fig-good: #6CC08C;
    --fig-bad: #F07D6E;
    --fig-panel-ok: #17171f;
    --fig-ink: #ececee;
  }
}
/*@end*/

body { font-family: var(--sans); font-size: 17.5px; line-height: 1.7; color: var(--ink-soft); background: var(--bg); }
.wrap { padding: 0 24px; }
.narrow { max-width: 720px; }
h1, h2, h3, .page h1, .page h2, .page h3 { font-family: var(--display); color: var(--ink); font-optical-sizing: auto; }
.page h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 750; margin-bottom: 14px; }
.page h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700;
           margin: clamp(56px, 8vw, 96px) 0 .55em; }
.page h3 { font-size: 1.22rem; letter-spacing: -0.012em; font-weight: 650; }
.page strong, .page b { color: var(--ink); }
.page a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.page a:hover { color: var(--accent-dk); }
.lede, .lede-big { font-size: clamp(1.14rem, 1.9vw, 1.32rem); line-height: 1.55; color: var(--ink); }
.page { padding: clamp(36px, 5vw, 64px) 0 clamp(72px, 9vw, 120px); }
.meta { font-size: .8rem; }

/* header: floating kaolin bar */
.top { background: color-mix(in srgb, var(--bg) 86%, transparent); border-bottom: 1px solid var(--line);
       -webkit-backdrop-filter: saturate(1.5) blur(12px); backdrop-filter: saturate(1.5) blur(12px); }
.top-in { min-height: 72px; }
.logo { font-family: var(--display); font-weight: 750; letter-spacing: -0.02em; font-size: 1.12rem; color: var(--ink); }
.logo svg rect, .logo svg [fill="var(--brand)"] { fill: var(--accent); }
.nav { background: var(--bg); border-bottom: 1px solid var(--line); }
.nav a { font-weight: 550; font-size: .9rem; color: var(--ink-soft); border-radius: var(--r-chip); padding: 8px 14px; margin: 8px 2px; border: 0; transition: background .25s, color .25s; }
.nav a:hover { background: var(--bg-sink); color: var(--ink); }
.nav a[aria-current="page"], .nav a.is-here { background: var(--ink); color: var(--bg); box-shadow: none; border: 0; }

/* buttons: clay pill */
.btn { background: var(--accent); color: var(--on-accent); border-radius: var(--r-btn); font-family: var(--sans); font-weight: 650;
       letter-spacing: -0.005em; padding: 13px 24px; border: 0; transition: background .25s, transform .3s var(--ease), box-shadow .3s; }
.btn:hover { background: var(--accent-dk); transform: translateY(-1px); box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--accent) 75%, transparent); color: var(--on-accent); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-lg { padding: 17px 30px; font-size: 1.05rem; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-ghost:hover { background: var(--bg-sink); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-phone { background: var(--ink); color: var(--bg); }
.btn-phone:hover { background: var(--ink); filter: none; color: var(--bg); }

/* hero: video kept, framed as a rounded panel inside the page margin */
.hero.has-media { margin: 14px 14px 0; border-radius: var(--r-hero); overflow: hidden; }
.hero-media::after { background:
   linear-gradient(90deg, rgba(var(--shade),.86) 0%, rgba(var(--shade),.6) 45%, rgba(var(--shade),.12) 100%),
   linear-gradient(0deg, rgba(var(--shade),.6) 0%, rgba(var(--shade),0) 50%); }
.hero-media img, .hero-media video { filter: saturate(.85); }
.hero.has-media .wrap { padding: clamp(96px, 14vw, 180px) 24px clamp(56px, 8vw, 96px); }
.hero h1, .hero.has-media h1 { font-family: var(--display); font-weight: 780; letter-spacing: -0.035em; line-height: .98;
          font-size: clamp(2.6rem, 6.6vw, 5.4rem); max-width: 12ch; text-shadow: none; color: #fff; }
.hero.has-media .lede { text-shadow: none; color: rgba(255,255,255,.86); max-width: 44ch; margin: 22px 0 32px; }
.hero.has-media .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); border: 0; }
.hero.has-media .btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.trust { background: transparent; border-bottom: 0; padding: 22px 0 6px; }
.trust ul { gap: 8px; }
.trust li { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-chip); padding: 7px 14px; font-size: .86rem; font-weight: 550; color: var(--ink-soft); }
.trust svg { color: var(--accent); }

/* surfaces */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px;
        transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.card:hover { transform: translateY(-4px); }
.card h3 { font-family: var(--display); font-size: 1.28rem; letter-spacing: -0.02em; }
.card a.more { color: var(--accent); }
.grid { gap: 14px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.note, .warnbox, .keybox { border-radius: var(--radius); border-left: 0; padding: 24px 26px; box-shadow: inset 0 0 0 1px var(--line); }
.keybox { background: var(--accent-lt); box-shadow: inset 4px 0 0 var(--accent), inset 0 0 0 1px var(--line); }
.note { background: var(--brand-lt); box-shadow: inset 4px 0 0 var(--brand), inset 0 0 0 1px var(--line); }
.steps > li::before { background: var(--accent); color: var(--on-accent); font-family: var(--display); }
.steps h3 { font-family: var(--display); font-size: 1.12rem; }
.band-soft { background: var(--bg-soft); }
.ctaband { border-radius: var(--r-hero); margin: 0 14px; }
.formcard { border-radius: var(--r-hero); border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--card); }
.field input, .field select, .field textarea { border-radius: var(--r-field); border: 1px solid var(--line-2); background: var(--bg); }
details.faq { border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); margin-bottom: 10px; }
details.faq summary { font-family: var(--display); font-weight: 650; letter-spacing: -0.01em; font-size: 1.06rem; color: var(--ink); }
details.faq summary::after { color: var(--accent); }

/* photographs: large radius, quiet frame */
.fig-photo img, .fig-video video { border-radius: var(--r-media); }
.illus { border-radius: 999px; }

/* tables: airy, mono-free, stacked on phones */
.tablewrap { border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
th, td { padding: 14px 18px; vertical-align: top; border-bottom: 1px solid var(--line); }
th { background: var(--bg-soft); font-family: var(--display); font-weight: 650; font-size: .9rem; color: var(--ink); }
tbody tr { transition: background .2s; }
tbody tr:hover { background: var(--bg-soft); }
.js .rv-arm tr { opacity: 0; transform: translateY(8px); }
.js .rv-arm.is-in tr { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
@media (max-width: 600px) {
  .tablewrap { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  table.is-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.is-stack tr { display: block; background: var(--card) !important; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; padding: 6px 0; }
  table.is-stack td { display: block; border: 0; padding: 7px 16px; white-space: normal; text-align: left; }
  table.is-stack td::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-faint); }
}

/* figures */
.fig svg { border-radius: var(--r-media); border: 1px solid var(--line); }
.fig figcaption { font-size: .9rem; color: var(--ink-faint); margin-top: 12px; }
.fig-h   { font-family: var(--display); font-size: 17px; font-weight: 700; }
.fig-sub { font-family: var(--sans); font-size: 13.5px; font-weight: 600; opacity: .85; }
.fig-lbl { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .05em; opacity: 1; }
.fig-numt { font-family: var(--sans); font-size: 13px; }
/* Bars used to start at width 0 and rely on JS to grow; with JS off the
   calendar was empty. Now the full bar is the default and only an armed,
   JS-on page starts them short. */
.fig-bar { width: var(--bw); }
.js .fig.draw-arm .fig-bar { width: 0; }
.js .fig.draw-arm.is-in .fig-bar { animation: fig-grow 1s var(--ease) forwards; }
.fig-mark { transition: transform .5s var(--ease), opacity .5s; }
.js .draw-arm .fig-mark { opacity: 0; transform: scale(.4); }
.draw-arm.is-in .fig-mark { opacity: 1; transform: none; }
.draw-arm.is-in .fig-mark:nth-of-type(2) { transition-delay: .08s; }
@media (max-width: 700px) {
  .fig .figscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -24px; padding: 0 24px; }
  .fig-wide .figscroll svg { min-width: 620px; }
}
.js .rise-arm { opacity: 0; transform: translateY(18px); }
.rise-arm.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
figure.fig-clip { margin: 2.2em 0; }
figure.fig-clip video { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; border-radius: var(--r-media); background: var(--fig-void); }

.foot { background: var(--foot-bg); color: color-mix(in srgb, var(--foot-ink) 78%, transparent); border-radius: var(--r-hero) var(--r-hero) 0 0; margin-top: 40px; }
.foot a { color: var(--foot-ink); }
.foot h3 { font-family: var(--display); color: var(--accent-hi); }

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .hero.has-media { margin: 8px 8px 0; border-radius: var(--r-media); }
  .hero.has-media .wrap { padding: 72px 20px 48px; }
  .card { padding: 22px; }
  .wrap { padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .btn, .nav a { transition: none !important; }
  .card:hover, .btn:hover { transform: none; }
  .js .fig .fig-bar { width: var(--bw) !important; animation: none !important; }
}
.page h2::after { background: var(--accent); width: 44px; height: 3px; border-radius: 2px; }
.hero h1, .hero.has-media h1 { letter-spacing: -0.026em; }
.nav-drop summary { border-radius: var(--r-chip); padding: 8px 14px; margin: 8px 2px; font-weight: 550; font-size: .9rem; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.nav-drop summary .caret { margin: 0; }
@media (max-width: 640px) {
  .top-cta .btn { padding: 10px 16px; font-size: .9rem; white-space: nowrap; }
  .logo { font-size: 1rem; }
  .trust ul { gap: 6px; }
  .trust li { padding: 5px 11px; font-size: .78rem; }
}
.fig-clip figcaption::after, .fig-clip figcaption::before { content: none !important; display: none !important; }
/* clips need no swipe hint; phone header keeps the CTA on screen with wide display faces */
figure.fig-clip::after, figure.fig-clip::before { content: none !important; display: none !important; }
@media (max-width: 640px) {
  .top-in { gap: 10px; }
  .logo { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .logo > span, .logo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-cta { flex: 0 0 auto; }
  .top-cta .btn { padding: 9px 13px; font-size: .84rem; }
}

/* site identity above the fold: tinted hero, accent header rule, kicker bar */
.top { box-shadow: inset 0 -3px 0 var(--accent); }
.nav a[aria-current="page"], .nav a.is-here { background: var(--accent); color: var(--on-accent); }
.hero-media::after { background:
   linear-gradient(var(--hero-dir, 90deg), color-mix(in srgb, var(--brand) 62%, rgb(var(--shade))) 0%, color-mix(in srgb, var(--brand) 30%, rgba(var(--shade),.55)) 48%, rgba(var(--shade),.10) 100%),
   linear-gradient(0deg, rgba(var(--shade),.55) 0%, rgba(var(--shade),0) 50%); }
.hero.has-media .wrap { text-align: var(--hero-align, left); }
.hero.has-media h1 { max-width: var(--hero-max, 12ch); margin-left: var(--hero-ml, 0); margin-right: var(--hero-ml, 0); }
.hero.has-media .lede { margin-left: var(--hero-ml, 0); margin-right: var(--hero-ml, 0); }
.hero.has-media .wrap > :first-child::before { content: ""; display: block; width: 64px; height: 5px; border-radius: var(--r-chip);
   background: var(--accent-hi, var(--accent)); margin: 0 var(--hero-ml, 0) 22px; }
@media (max-width: 640px) { .hero.has-media .wrap { text-align: left; } .hero.has-media h1, .hero.has-media .lede, .hero.has-media .wrap > :first-child::before { margin-left: 0; } }
.hero.has-media .hero-actions { justify-content: var(--hero-align, flex-start); }
@media (max-width: 640px) { .hero.has-media .hero-actions { justify-content: flex-start; } }