/* ==============================================================
   Ground Control — styles.css
   --------------------------------------------------------------
   Built on the construction of the reference site: viewport-relative
   padding (--pad = 4vw), section heights driven by vh/vw, sections
   that overlap each other with negative top margins and z-layering,
   one tall pinned scroll section, one very tall dark inverted band,
   fully-rounded pill buttons, and an oversized condensed display
   face set at heavy negative tracking.

     1.  Tokens
     2.  Reset and base
     3.  Display type
     4.  Pills, flip letters, marks, placeholders
     5.  Cursor + preloader
     6.  Header and menu
     7.  Hero
     8.  Statement + word cycler
     9.  Stat badges
     10. Problem
     11. Pinned sequence
     12. Dark services band
     13. Marquees
     14. Credentials
     15. Coverage
     16. Big CTA
     17. Contact
     18. Footer
     19. Responsive
     20. Reduced motion
   ============================================================== */

/* ---------------------------------------------- 1. Tokens ---- */
:root {
  --paper:   #F5F1E6;   /* warm off-white ground */
  --paper-2: #EDE7D6;
  --ink:     #3A3220;   /* dark loam brown — all type */
  --wheat:   #E8DCB4;   /* dry grass */
  --sun:     #F2CE63;   /* wheat yellow */
  --soil:    #B4502C;   /* red soil */
  --olive:   #5F6B3A;   /* eucalypt */

  --ink-70: color-mix(in srgb, var(--ink) 70%, var(--paper));
  --ink-45: color-mix(in srgb, var(--ink) 45%, var(--paper));

  --display: 'Khand', 'Oswald', 'Haettenschweiler', Impact, sans-serif;
  --sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand:    'Patrick Hand', 'Bradley Hand', cursive;

  --pad: 4vw;                 /* the reference's paddx */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --round: 9999px;
}

/* ------------------------------------- 2. Reset and base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(15px, 0.5vw + 13.5px, 19px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p, dl, dd, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2.5px solid var(--soil); outline-offset: 4px; border-radius: 3px; }

.hand { font-family: var(--hand); letter-spacing: -0.02em; }

/* Scramble scaffolding. Characters sit in fixed-width spans so a scrambled
   glyph never changes the line's width; words stay in nowrap boxes so
   headings still wrap between words as normal. */
.sc-word { display: inline-block; white-space: nowrap; }
.sc { display: inline-block; text-align: center; }
.u-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--pad); top: -100px; z-index: 300;
  background: var(--ink); color: var(--paper); padding: 12px 22px;
  border-radius: var(--round); font-size: 14px;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 14px; }

/* --------------------------------------- 3. Display type ---- */
/* The reference runs its condensed display face up to ~307px with
   -5% tracking. Same treatment here. */
.display {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  line-height: 0.84;
  text-wrap: balance;
}

/* ------------ 4. Pills, flip letters, marks, placeholders ---- */
.pill {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(13px, 0.9vw, 16px);
  letter-spacing: -0.015em;
  padding: 0.95em 1.7em;
  border-radius: var(--round);
  border: 1.5px solid var(--ink);
  background: transparent; color: var(--ink);
  cursor: pointer; white-space: nowrap;
  transition: background-color 0.32s var(--ease), color 0.32s var(--ease), border-color 0.32s var(--ease);
}
.pill--solid { background: var(--ink); color: var(--paper); }
.pill--solid:hover { background: var(--soil); border-color: var(--soil); }
.pill--line:hover { background: var(--ink); color: var(--paper); }
.pill--lg { font-size: clamp(14px, 1.05vw, 18px); padding: 1.05em 2em; }

/* Per-character stacked letters: each glyph has a second copy sitting
   directly below it, and both slide up together on hover. */
.flip { display: inline-flex; }
.flip__c { display: inline-block; position: relative; overflow: hidden; height: 1.12em; line-height: 1.12em; }
.flip__a, .flip__b { display: block; transition: transform 0.4s var(--ease-out); transition-delay: calc(var(--i) * 18ms); }
.flip__b { position: absolute; left: 0; top: 100%; }
a:hover .flip__a, a:hover .flip__b,
button:hover .flip__a, button:hover .flip__b,
a:focus-visible .flip__a, a:focus-visible .flip__b,
button:focus-visible .flip__a, button:focus-visible .flip__b { transform: translateY(-100%); }

.mark { display: inline-block; }
.mark__svg { fill: currentColor; width: 100%; }
.mark--sm { width: 22px; }
.mark--lg { width: clamp(120px, 13vw, 190px); position: relative; }
.mark__img { display: block; width: 100%; height: auto; }
.mark__img--ghost { opacity: 0.16; filter: grayscale(1); }

.ph {
  background-color: color-mix(in srgb, currentColor 9%, transparent);
  background-image: repeating-linear-gradient(-45deg, transparent 0 8px, color-mix(in srgb, currentColor 16%, transparent) 8px 9px);
  border-radius: 1.4vw;
  display: grid; place-items: center;
}
.ph span { font-family: var(--hand); font-size: 15px; opacity: 0.75; }
.ph--32 { aspect-ratio: 3 / 2; }

.datalist dt { font-size: 12px; letter-spacing: 0.02em; opacity: 0.55; }
.datalist dd { margin: 2px 0 16px; }
.flag { color: var(--soil); font-size: 17px; }

/* -------------------------------- 5. Cursor + preloader ---- */
.cursor {
  position: fixed; top: 0; left: 0; width: 38px; height: 38px;
  margin: -19px 0 0 -19px; color: var(--ink);
  pointer-events: none; z-index: 400; opacity: 0;
  transition: opacity 0.25s linear, color 0.25s linear;
  will-change: transform;
}
.cursor svg { width: 100%; height: 100%; fill: none; transition: transform 0.3s var(--ease-out); }
.cursor.is-ready { opacity: 1; }
.cursor.is-active { color: var(--soil); }
.cursor.is-active svg { transform: scale(1.6); }
.cursor.is-hidden { opacity: 0; }
html.has-custom-cursor, html.has-custom-cursor * { cursor: none !important; }

.preloader {
  position: fixed; inset: 0; z-index: 500;
  background: var(--paper);
  display: grid; place-items: center;
  transition: transform 0.52s var(--ease-out);
}
.preloader.is-done { transform: translateY(-101%); }
.preloader__inner { display: grid; justify-items: center; gap: 24px; }
.mark--lg .mark__svg--ghost { color: color-mix(in srgb, var(--ink) 15%, var(--paper)); }
.mark__fill { position: absolute; inset: 0; clip-path: inset(calc(100% - var(--p, 0%)) 0 0 0); color: var(--ink); }
.preloader__count {
  display: flex; align-items: flex-end;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(38px, 6vw, 76px); line-height: 1; letter-spacing: -0.04em;
}
.roll { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.roll__strip { display: block; line-height: 1; will-change: transform; }
.preloader__pct { font-size: 0.3em; margin: 0 0 0.5em 0.2em; color: var(--soil); }

/* ---------------------------------- 6. Header and menu ---- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 2.2vw var(--pad) 1.2vw;
  transition: transform 0.45s var(--ease);
}
.header.is-hidden { transform: translateY(-120%); }
.header__brand { display: flex; align-items: center; gap: 11px; }
.header__logo { display: block; width: auto; height: clamp(54px, 5.2vw, 84px); }
.header__name { font-family: var(--display); font-weight: 600; font-size: 21px; text-transform: uppercase; letter-spacing: -0.03em; }
.header__actions { display: flex; gap: 10px; }
.menu-toggle__bars { display: grid; gap: 4px; width: 18px; }
.menu-toggle__bars i { display: block; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease-out); }
.pill[aria-expanded="true"] .menu-toggle__bars i:first-child { transform: translateY(2.75px) rotate(14deg); }
.pill[aria-expanded="true"] .menu-toggle__bars i:last-child { transform: translateY(-2.75px) rotate(-14deg); }

.menu {
  position: fixed; inset: 0; z-index: 190;
  background: var(--ink); color: var(--paper);
  padding: 18vh var(--pad) var(--pad);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease-out);
  overflow-y: auto;
}
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu__cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 6vw; align-items: end; }
.menu__list a {
  display: block;
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(38px, 7.5vw, 108px); line-height: 0.98; letter-spacing: -0.05em;
  transition: color 0.3s var(--ease);
}
.menu__list a:hover { color: var(--sun); }
.menu__aside .hand { font-size: 22px; margin-bottom: 24px; color: var(--sun); }
.menu [data-menu-link] { opacity: 0; transform: translateY(24px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease-out); transition-delay: calc(var(--i, 0) * 50ms + 130ms); }
.menu.is-open [data-menu-link] { opacity: 1; transform: none; }

/* ---------------------------------------------- 7. Hero ---- */
/* Centred, as the reference's opening screen: headline, two hand-lettered
   points, a short line and the calls to action, then an empty stage
   underneath for the deer to walk into. */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 17vh var(--pad) 6vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero__shapes { position: absolute; inset: 0; pointer-events: none; color: var(--wheat); }
.hero__blob {
  position: absolute; right: -18vw; top: 58%; transform: translateY(-50%);
  width: min(70vw, 900px); height: min(70vw, 900px); opacity: 0.9;
}
.hero__blob--left { right: auto; left: -22vw; top: 22%; width: min(46vw, 620px); height: min(46vw, 620px); opacity: 0.6; }
.hero__eyebrow { position: relative; font-size: clamp(17px, 1.5vw, 24px); color: var(--soil); margin-bottom: 1.5vh; }
.hero__title { position: relative; font-size: clamp(54px, 11.5vw, 220px); width: 100%; }
.rise { display: block; overflow: hidden; padding-bottom: 0.04em; }
.rise__i { display: block; transform: translateY(110%); }
.hero__title.is-in .rise__i { transform: translateY(0); transition: transform 1.05s var(--ease-out); transition-delay: var(--d, 0ms); }

.hero__points { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 34px; margin-top: 3vh; font-size: clamp(18px, 1.5vw, 25px); }
.hero__points li { display: flex; align-items: center; gap: 10px; }
.hero__points li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.hero__lede { position: relative; max-width: 52ch; margin-top: 2.5vh; font-size: clamp(16px, 1.25vw, 21px); }
.hero__cta { position: relative; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 3.5vh; }

/* The stage under the hero, laid out like the reference's coconut screen:
   the deer stands in the open middle, with a hand-drawn arrow and points
   above-left, a paragraph and circled link top-right, a split headline
   wrapping round the gap, squiggles by the hooves and a line of copy
   bottom-left. */
.stagecall { position: relative; height: 112vh; }

/* Faint compass ring behind the deer (deer centre sits at ~50% / 60% here). */
.stagecall__ring {
  position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%);
  width: min(64vh, 44vw); height: auto; pointer-events: none;
  color: color-mix(in srgb, var(--ink) 20%, var(--paper));
}

/* Species chips, top centre, clear of the antlers. */
.stagecall__species { position: absolute; left: 50%; top: 3%; transform: translateX(-50%); width: min(38vw, 560px); text-align: center; }
.stagecall__kicker { font-size: clamp(17px, 1.35vw, 23px); color: var(--soil); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 10px; }
.chips li { padding: 5px 13px; border: 1.5px solid var(--ink); border-radius: var(--round); font-size: clamp(12px, 0.85vw, 15px); font-weight: 500; letter-spacing: 0.01em; }

/* Numbered notes in two columns either side of the deer. The pin on each
   note's inner edge is where its leader line starts. */
.note { position: absolute; width: min(22vw, 300px); }
.note--l { left: var(--pad); }
.note--r { right: var(--pad); text-align: right; }
.note__k { display: flex; align-items: center; gap: 12px; font-size: clamp(17px, 1.35vw, 23px); color: var(--soil); }
.note__k > span:not(.note__pin) { white-space: nowrap; }
.note__pin { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--soil); box-shadow: 0 0 0 4px color-mix(in srgb, var(--soil) 18%, transparent); }
.note--l .note__pin { margin-left: auto; }
.note--r .note__pin { margin-right: auto; }
.note__t { margin-top: 6px; font-size: clamp(14px, 1vw, 17px); line-height: 1.45; color: var(--ink-70); }

.stagecall__aside { position: absolute; right: var(--pad); top: 5%; max-width: 30ch; font-size: clamp(16px, 1.25vw, 21px); text-align: right; }
.stagecall__aside .circled { margin-top: 2.2vh; }

/* Split headline: "The real" left, "Cost of / every mob." stacked flush right,
   leaving the middle open for the deer's legs. */
.stagecall__title { position: absolute; left: var(--pad); right: var(--pad); top: 64%; font-size: clamp(48px, 7.4vw, 150px); display: flex; justify-content: space-between; align-items: flex-start; }
.stagecall__l2 { text-align: right; }
.stagecall__plate { position: absolute; left: 50%; top: 90%; transform: translateX(-50%); white-space: nowrap; font-size: clamp(15px, 1.15vw, 20px); color: var(--ink-45); }
.stagecall__foot { position: absolute; left: var(--pad); bottom: 3%; max-width: 34ch; font-size: clamp(16px, 1.3vw, 22px); color: var(--ink-70); }

/* Leader lines sit above the deer canvas (z 60) so the pins land on the animal. */
.stage-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 61; pointer-events: none; overflow: visible; opacity: 0; transition: opacity 0.2s linear; }
.stage-lines__path { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-dasharray: 4 5; }
.stage-lines__dot { fill: var(--soil); stroke: var(--paper); stroke-width: 2; }
.stage-lines__ring { fill: none; stroke: var(--soil); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: gcPulse 2.2s ease-out infinite; }
@keyframes gcPulse { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(1.9); opacity: 0; } }

.circled { position: relative; display: inline-block; padding: 0.55em 1.5em 0.65em; font-size: clamp(19px, 1.6vw, 27px); }
.circled::before {
  content: ""; position: absolute; inset: 0;
  border: 1.6px solid var(--ink); border-radius: 50%;
  transform: rotate(-4deg);
}
.circled::after {
  content: ""; position: absolute; left: 20%; top: calc(100% - 3px); width: 40%; height: 1.6px;
  background: var(--ink); transform: rotate(-3deg);
}
a.circled:hover::before { border-color: var(--soil); }
.model-mount { position: absolute; inset: 14vh var(--pad) 0; }

/* The one fixed canvas the deer is drawn on. Above the page content so it
   can pass in front of the big type; below the header, menu and cursor. */
.stage3d { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; }
.stage3d--static { position: absolute; }

/* ------------------------------ 8. Statement + cycler ---- */
/* Centred big type the deer walks across, as the reference sets its
   coconut against "The real source of every sip". */
/* A pinned scene: the section is tall, the inner stage sticks. Copy holds
   the top; plants stand on a ground line 13vh up from the bottom, which is
   where the deer's hooves land (deer.js). A second sticky layer above the
   deer canvas carries foreground plants the deer runs behind. */
.statement { position: relative; height: 300vh; }
.statement__pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 11vh var(--pad) 0; text-align: center;
}
.statement__front { position: sticky; top: 0; height: 100svh; margin-top: -100svh; overflow: hidden; z-index: 61; pointer-events: none; }
/* Same trick for the bush the deer feeds on in "What it's costing". */
.badges__front { position: sticky; top: 0; height: 100svh; margin-top: -100svh; overflow: hidden; z-index: 61; pointer-events: none; }
.statement__line { font-size: clamp(34px, 6.2vw, 120px); max-width: 16ch; margin-inline: auto; }
.statement__sub { max-width: 46ch; margin-top: 3vh; font-size: clamp(16px, 1.25vw, 21px); color: var(--ink-70); }

/* Plants: bottom-centre anchored on the ground line; main.js sways them. */
.scenery { position: absolute; inset: 0; pointer-events: none; --ground: 13vh; }
.scenery__ground {
  position: absolute; left: 0; bottom: calc(var(--ground) - 8px); width: 100%; height: 14px;
  fill: none; stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1.5; vector-effect: non-scaling-stroke;
}
.plant {
  position: absolute; left: var(--x); bottom: var(--ground); height: var(--h); width: auto; max-width: none;
  translate: -50% 0; transform-origin: 50% 100%; will-change: transform;
  filter: saturate(0.88) sepia(0.06);
  user-select: none; -webkit-user-drag: none;
}
.plant--flip { scale: -1 1; }
.plant--back { filter: saturate(0.75) sepia(0.12) brightness(0.97); }

/* Long grass along the bottom of the scene. Tiled from a strip paired with
   its mirror image, so it repeats across any width with no seams. Its tips
   rise a little above the ground line where the deer's hooves land, so the
   deer walks on top of it; a slow skew reads as wind. */
.scenery__grass {
  position: absolute; left: -2%; right: -2%; bottom: 0;
  height: calc(var(--ground) + 4vh);
  background: url("img/plants/grass-tile-web.webp") repeat-x left bottom / auto 100%;   /* compressed copy of grass-tile.webp */
  transform-origin: 50% 100%;
  animation: grassSway 6s ease-in-out infinite alternate;
  filter: saturate(0.9) sepia(0.05);
  pointer-events: none;
}
@keyframes grassSway { from { transform: skewX(-1.2deg); } to { transform: skewX(1.2deg); } }
.cycler { display: inline-block; height: 0.86em; overflow: hidden; vertical-align: bottom; color: var(--soil); }
.cycler__track { display: block; transition: transform 0.62s var(--ease-out); }
.cycler__track > span { display: block; height: 0.86em; line-height: 0.86em; }

/* -------------------------------------- 9. Stat badges ---- */
/* Sized off the viewport and pinned for a beat, as the reference does:
   a full-height sticky stage holding one row of bordered circles. */
.badges { position: relative; height: 150vh; }
.badges__sticky {
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 6vw var(--pad);
  z-index: 1;
  overflow: hidden;
}
.badges__row { display: flex; gap: 2vw; justify-content: center; width: 100%; }
.badge {
  flex: 0 0 auto;
  width: calc(100vw / 5.5); height: calc(100vw / 5.5);
  border-radius: 50%; border: 4px solid;
  display: grid; place-content: center; text-align: center;
  padding: 6%;
}
.badge--a { background: var(--sun);   border-color: var(--ink); color: var(--ink); }
.badge--b { background: var(--olive); border-color: var(--sun); color: var(--sun); }
/* Tilted, so the row reads as placed by hand rather than laid out. */
.badge__inner { display: block; transform: rotate(-8deg); }
.badge--b .badge__inner { transform: rotate(7deg); }
.badge__num { display: block; font-size: clamp(34px, 4.6vw, 86px); line-height: 0.82; }
.badge__unit { display: block; font-size: clamp(10px, 0.8vw, 13px); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 5px; opacity: 0.8; }
.badge__label { display: block; font-size: clamp(12px, 0.95vw, 17px); margin-top: 8px; }
.badges__row { position: relative; z-index: 1; }

/* Behind the drifting badges: a faint headline, a kicker, and a ticker of
   facts along the bottom of the pinned stage. */
.badges__kicker { position: absolute; left: var(--pad); top: 14vh; font-size: clamp(18px, 1.5vw, 26px); color: var(--soil); }
.badges__title {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 100%; text-align: center; pointer-events: none;
  font-size: clamp(56px, 12.5vw, 240px);
  color: color-mix(in srgb, var(--wheat) 75%, var(--paper));
}
.factstrip {
  position: absolute; left: 0; right: 0; bottom: 5vh; z-index: 2;
  padding: 12px 0;
  border-block: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
  background: color-mix(in srgb, var(--paper) 85%, transparent);
}
.factstrip li {
  display: flex; align-items: center; gap: 2.2vw; padding-left: 2.2vw; white-space: nowrap;
  font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: -0.02em;
  font-size: clamp(18px, 1.7vw, 30px); line-height: 1;
}
.factstrip li::after { content: "✺"; color: var(--soil); font-size: 0.8em; }

/* Wide screens: the reference's arrangement. The deer grazes in the middle
   of a longer pinned stage while the badges drift diagonally up past it,
   alternating sides. main.js adds .is-drifting and drives the transforms. */
@media (min-width: 901px) {
  .badges { height: 280vh; }
  .badges.is-drifting .badges__row { position: absolute; inset: 0; display: block; }
  .badges.is-drifting .badge { position: absolute; top: 0; left: 23%; transform: translate3d(-50%, 110vh, 0); will-change: transform; }
  .badges.is-drifting .badge:nth-child(even) { left: 77%; }
}

/* Big soft form behind a section — the reference's 60vw blurred circle. */
.glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.glow::before {
  content: "";
  position: absolute; left: 50%; top: -15vw;
  width: 60vw; height: 60vw;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--wheat);
  opacity: 0.45;
  filter: blur(8vw);
}
.statement, .badges { position: relative; }
.statement__pin > *:not(.glow):not(.scenery):not(.factnote) { position: relative; z-index: 1; }

/* Small fact notes in the top corners of the scene, clear of the deer's run. */
.statement__pin > .factnote { position: absolute; max-width: 26ch; text-align: left; font-size: clamp(15px, 1.05vw, 18px); color: var(--ink-70); }
.statement__pin > .factnote--tl { left: var(--pad); top: 12vh; }
.statement__pin > .factnote--tr { right: var(--pad); top: 12vh; text-align: right; }
.factnote__k { display: block; margin-bottom: 6px; font-family: var(--hand); font-size: clamp(18px, 1.4vw, 24px); color: var(--soil); }

/* "Moving them on." — the big line the deer runs across on its way out. */
.keep { padding: 20vh var(--pad) 16vh; text-align: center; }
.keep__title { font-size: clamp(56px, 12.5vw, 240px); }
.keep__note { margin-top: 3vh; font-size: clamp(18px, 1.5vw, 26px); color: var(--soil); }

/* "Whose job is it?" — legal duties, in four columns the deer runs across. */
.law { margin-top: 12vh; text-align: left; }
.law__kicker { margin-bottom: 3vh; text-align: center; font-weight: 400; font-size: clamp(19px, 1.6vw, 27px); color: var(--soil); }
.law__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3vw; }
.law__grid li { padding-top: 16px; border-top: 1.5px solid var(--ink); }
.law__grid h4 { margin: 0 0 10px; font-size: clamp(22px, 2vw, 36px); line-height: 0.94; }
.law__grid p { font-size: clamp(14px, 1vw, 17px); color: var(--ink-70); }
.law__note { max-width: 70ch; margin: 5vh auto 0; text-align: center; font-size: 14px; color: var(--ink-45); }

/* Drifting band of solid circles. Their lower halves sink into the dark
   band below, so its top edge reads as a moving scalloped hem. */
.circleband { --cb: calc(100vw / 5); position: relative; z-index: 11; overflow: hidden; margin-bottom: calc(var(--cb) / -2); pointer-events: none; }
/* No gap: neighbouring circles touch, so the hem is an unbroken row of arches. */
.circleband .marquee__track { gap: 0; align-items: center; }
.circleband span {
  display: block;
  width: var(--cb); height: var(--cb);
  border-radius: 50%; background: var(--ink);
}

/* ------------------------------------------ 10. Problem ---- */
/* Copy on the left; the right column is left empty for the deer. */
.problem { padding: 10vh var(--pad) 22vh; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4vw; }
.problem__stage { min-height: 60vh; }
.problem__head { display: grid; gap: 3vh; align-items: end; }
.problem__word { font-size: clamp(60px, 13vw, 230px); color: var(--soil); }
.problem__intro { font-size: clamp(17px, 1.35vw, 24px); max-width: 46ch; padding-bottom: 1vh; }
.problem__no { display: block; font-size: 20px; color: var(--soil); }

.problem__kicker { font-size: clamp(18px, 1.5vw, 26px); color: var(--soil); margin-bottom: -1.5vh; }

/* Deer and pigs, one column each: a heavy-ruled label, a headline figure,
   then four numbered rows. On phones the tabs switch between the columns. */
.threats { position: relative; margin-top: 7vh; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4vw; align-items: start; }
.threats__radio, .threats__tabs { display: none; }
.threat__label { padding-bottom: 12px; border-bottom: 3px solid var(--ink); font-size: clamp(26px, 2.4vw, 42px); line-height: 0.9; }
.threat__stat { display: flex; align-items: baseline; gap: 14px; padding: 2.4vh 0; border-bottom: 1.5px solid var(--ink); }
.threat__stat .display { flex: none; font-size: clamp(46px, 4.6vw, 88px); line-height: 0.8; color: var(--soil); }
.threat__stat .hand { flex: 1; min-width: 0; font-size: clamp(15px, 1.1vw, 19px); line-height: 1.25; }
.threat__list li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 0 10px; padding: 2vh 0; border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.threat__list .problem__no { font-size: 17px; line-height: 1.5; }
.threat__list h4 { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: -0.03em; font-size: clamp(20px, 1.6vw, 28px); line-height: 1; margin: 2px 0 0;   /* no site-wide heading gap under the row title */ }
.threat__list p { grid-column: 2; margin-top: 6px; color: var(--ink-70); font-size: clamp(14px, 0.95vw, 16px); line-height: 1.45; }

/* --------------------------------- 11. Pinned sequence ---- */
/* Tall section, sticky inner panel, steps cross-fading on scroll. */
/* Tall section, sticky inner panel, steps cross-fading on scroll. Text
   holds the left half; the deer holds the right and is redrawn at each
   step (deer.js). Step three is the night operation, so the panel goes
   dark. The foot follows the reference: label left, bar, count right. */
.pinned { height: 420vh; position: relative; background: var(--paper); transition: background-color 0.6s var(--ease), color 0.6s var(--ease); }
.pinned.is-night { background: var(--ink); color: var(--paper); --ink-70: color-mix(in srgb, var(--paper) 72%, var(--ink)); }
.pinned__inner {
  position: sticky; top: 0; height: 100svh;
  padding: 12vh var(--pad) 5vh;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.pinned__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.pinned__title { font-size: clamp(36px, 6vw, 110px); }
.pinned__progress { font-size: clamp(18px, 1.8vw, 30px); color: var(--soil); }
.pinned__stage { position: relative; flex: 1; margin-top: 3vh; }
.steps { position: absolute; inset: 0; }
.step {
  position: absolute; inset: 0 50% 0 0;
  display: grid; align-content: center;
  opacity: 0; transform: translateY(42px);
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease-out);
  pointer-events: none;
}
.step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.step__text { display: grid; gap: 1.4vh; align-content: center; }
.step__no { display: block; font-size: clamp(70px, 14vw, 250px); line-height: 0.76; color: var(--wheat); transition: color 0.6s var(--ease); }
.pinned.is-night .step__no { color: color-mix(in srgb, var(--paper) 16%, var(--ink)); }
.step__title { font-size: clamp(34px, 5vw, 92px); }
.step p { max-width: 44ch; font-size: clamp(16px, 1.2vw, 22px); color: var(--ink-70); }
.pinned__view { position: absolute; right: var(--pad); bottom: 13vh; font-size: clamp(17px, 1.4vw, 24px); color: var(--soil); }
.pinned.is-night .pinned__progress, .pinned.is-night .pinned__view { color: var(--sun); }
.pinned__foot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2.4vw; margin-top: 3vh; }
.pinned__label, .pinned__count { font-size: clamp(22px, 2.2vw, 40px); line-height: 1; min-width: 3ch; }
.pinned__rail { height: 0.8vw; min-height: 8px; background: color-mix(in srgb, currentColor 14%, transparent); border-radius: var(--round); overflow: hidden; }
.pinned__bar { display: block; height: 100%; width: 0%; background: var(--soil); border-radius: var(--round); }

/* ------------------------------- 12. Dark services band ---- */
/* Overlaps the section above, as the reference's bands do. */
.dark {
  position: relative; z-index: 10;
  background: var(--ink); color: var(--paper);
  padding: calc(100vw / 10 + 2vh) var(--pad) 10vh;
  --ink-70: color-mix(in srgb, var(--paper) 72%, var(--ink));
}
.dark__eyebrow { font-size: clamp(17px, 1.5vw, 24px); color: var(--sun); }
/* Heading left, a short intro filling the space to its right. */
.dark__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); gap: 5vw; align-items: end; }
.dark__intro { padding-bottom: 1.5vh; }
.dark__intro p { max-width: 44ch; font-size: clamp(16px, 1.25vw, 21px); color: var(--ink-70); }
.dark__intro .dark__hint { margin-top: 2vh; font-size: clamp(17px, 1.4vw, 24px); color: var(--sun); }
.dark__title { font-size: clamp(60px, 13vw, 230px); margin-top: 1vh; }
/* Compact rows: text and photo share one height, so there's no dead space
   under the copy. */
/* Services in a two-by-two grid (1 beside 2, 3 beside 4). Each is a card:
   photo across the top, then number and title, copy, and the checklist. */
.svc { margin-top: 5vh; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6vh 3vw; }
.svc__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "img img" "no body";
  gap: 2.4vh 1.2vw; align-items: start;
  padding-top: 3vh; border-top: 1.5px solid color-mix(in srgb, var(--paper) 28%, var(--ink));
}
.svc__item > .svc__no { grid-area: no; }
.svc__item > .svc__body { grid-area: body; }
.svc__item > .svc__img { grid-area: img; }
.svc__points {
  margin-top: 2.4vh; padding-top: 1.8vh;
  border-top: 1px solid color-mix(in srgb, var(--paper) 18%, var(--ink));
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 2.4vw;
  font-size: clamp(14px, 0.95vw, 17px); color: var(--paper);
}
.svc__points li { display: flex; align-items: baseline; gap: 10px; }
.svc__points li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); transform: translateY(-1px); }
.svc__no { font-size: 22px; line-height: 1.6; color: var(--sun); }
.svc__title { font-size: clamp(28px, 3vw, 54px); }
.svc__body p { margin-top: 1.5vh; max-width: 48ch; color: var(--ink-70); font-size: clamp(15px, 1.1vw, 20px); }
.dark .ph { color: var(--paper); }
/* Service photos sit in the same rounded 3:2 frame the placeholders used. */
.svc__img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 1.4vw;
  background: color-mix(in srgb, var(--paper) 9%, var(--ink));
}

/* Services carousel control bar: only used on wide screens (below). */
.svc-bar { display: none; }

/* Wide screens: the services slide as a carousel of smaller cards. Two show
   in full with the third peeking in at the right edge; drag, swipe a
   trackpad or use the arrows (main.js) to reach 3 and 4. Phones keep their
   own swipe row (section 19). */
@media (min-width: 901px) {
  .svc-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 2vw;
    margin-top: 5vh; padding-top: 2.2vh;
    border-top: 1.5px solid color-mix(in srgb, var(--paper) 28%, var(--ink));
  }
  .svc-bar__hint { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; }
  .svc-bar__ctrl { display: flex; align-items: center; gap: 12px; }
  .svc-bar__count { min-width: 5ch; margin-right: 6px; text-align: right; font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; color: var(--sun); }
  .svc-bar__btn {
    display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
    border: 1.5px solid color-mix(in srgb, var(--paper) 70%, var(--ink)); border-radius: 50%;
    background: transparent; color: var(--paper); cursor: pointer;
    transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), opacity 0.25s var(--ease);
  }
  .svc-bar__btn:hover:not(:disabled) { background: var(--sun); border-color: var(--sun); color: var(--ink); }
  .svc-bar__btn:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
  .svc-bar__btn:disabled { opacity: 0.3; cursor: default; }

  .dark .svc {
    --svc-gap: 1.6vw;
    display: flex; gap: var(--svc-gap);
    margin: 2.6vh calc(var(--pad) * -1) 0 0; padding: 0 var(--pad) 4px 0;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; cursor: grab;
  }
  .dark .svc::-webkit-scrollbar { display: none; }
  .dark .svc::after { content: ""; flex: 0 0 1px; }
  .dark .svc.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .dark .svc.is-dragging * { pointer-events: none; }
  .dark .svc__item {
    flex: 0 0 calc((100% - 2 * var(--svc-gap)) / 2.5); scroll-snap-align: start;
    gap: 1.6vh 0.9vw; padding: 0 1.8vw 2.6vh 0; border: 0; border-radius: 1.2vw; overflow: hidden;
    background: color-mix(in srgb, var(--paper) 7%, var(--ink));
  }
  .dark .svc__img { aspect-ratio: 16 / 9; border-radius: 0; -webkit-user-drag: none; user-select: none; }
  .dark .svc__no { padding-left: 1.8vw; font-size: 18px; line-height: 1.55; }
  .dark .svc__title { font-size: clamp(22px, 1.9vw, 34px); }
  .dark .svc__body p { margin-top: 1vh; font-size: clamp(14px, 0.95vw, 16px); line-height: 1.5; }
  .dark .svc__points { margin-top: 1.6vh; padding-top: 1.4vh; gap: 8px 1.6vw; font-size: clamp(13px, 0.85vw, 15px); }
  .dark .svc__points li { gap: 8px; }
}

/* ------------------------------------- 13. Marquees ---- */
.quotes { padding: 12vh 0; display: grid; gap: 2vh; overflow: hidden; }
.marquee { overflow: hidden; }
.marquee__track { display: flex; width: max-content; }
.quote {
  display: flex; align-items: baseline; gap: 18px;
  padding-inline: 2.4vw;
  border-left: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent);
}
.quote p { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: -0.04em; font-size: clamp(26px, 3.4vw, 62px); line-height: 0.94; white-space: nowrap; }
.quote cite { font-style: normal; font-size: clamp(14px, 1vw, 18px); color: var(--soil); white-space: nowrap; }

/* -------------------------------------- 14. Credentials ---- */
.creds { padding: 8vh var(--pad) 14vh; }
.creds__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 5vw; align-items: end; }
.creds__title { font-size: clamp(48px, 9vw, 160px); }
.creds__sub { font-size: clamp(16px, 1.25vw, 22px); max-width: 46ch; color: var(--ink-70); }
/* Credentials list on the left, the contour map beside it. */
.creds__body { margin-top: 7vh; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5vw; align-items: center; }
.creds__list { border-top: 1.5px solid var(--ink); }
.creds__list dt {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: -0.035em; font-size: clamp(20px, 2vw, 34px);
  padding-top: 20px;
}
.creds__list dd { padding-bottom: 20px; border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); max-width: 62ch; color: var(--ink-70); }

/* ---------------------------------------- 15. Coverage ---- */
.coverage {
  padding: 10vh var(--pad) 14vh;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 5vw; align-items: center;
  background: var(--paper-2);
}
.coverage__title { font-size: clamp(48px, 9vw, 160px); }
.coverage__text > p { margin-top: 2vh; max-width: 44ch; color: var(--ink-70); }
.districts { margin: 3vh 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.districts li { padding-block: 9px; border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent); font-family: var(--hand); font-size: 19px; }
.map { color: var(--olive); }
.map svg { width: 100%; height: auto; }
.map__contours path {
  opacity: 0.75;
  stroke-dasharray: var(--len, 900); stroke-dashoffset: var(--len, 900);
  transition: stroke-dashoffset 1.5s var(--ease-out); transition-delay: calc(var(--i) * 110ms);
}
.map.is-in .map__contours path { stroke-dashoffset: 0; }
.map__pins circle { fill: var(--soil); opacity: 0; transition: opacity 0.5s var(--ease); transition-delay: calc(var(--i) * 120ms + 700ms); }
.map.is-in .map__pins circle { opacity: 1; }
.map__base { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.map figcaption { margin-top: 14px; font-size: 17px; color: var(--ink-45); }

/* ----------------------------------------- 16. Big CTA ---- */
.bigcta { padding: 20vh var(--pad); min-height: 80vh; display: grid; place-items: center; text-align: center; background: var(--paper-2); }
.bigcta__link { display: inline-block; }
.bigcta__text { font-size: clamp(48px, 12vw, 220px); transition: color 0.35s var(--ease); }
.bigcta__link:hover .bigcta__text { color: var(--soil); }

/* ----------------------------------------- 17. Contact ---- */
.contact { padding: 6vh var(--pad) 14vh; }
.contact__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 5vw; align-items: end; }
.contact__title { font-size: clamp(44px, 8vw, 150px); }
.contact__note { font-size: clamp(18px, 1.5vw, 26px); color: var(--soil); }
/* Phone, email and ABN in one ruled row under the heading. */
.contact__details { margin-top: 5vh; display: flex; flex-wrap: wrap; gap: 2vh 6vw; padding-block: 2.4vh; border-block: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); }
.contact__details dt { font-size: 13px; letter-spacing: 0.02em; color: var(--ink-45); }
.contact__details dd { margin: 3px 0 0; font-size: clamp(17px, 1.35vw, 24px); }
.contact__details a { transition: color 0.3s var(--ease); }
.contact__details a:hover { color: var(--soil); }
.contact__body { margin-top: 7vh; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3vh 3vw; }
.field--full { grid-column: 1 / -1; }
.field label { display: block; font-size: 13px; letter-spacing: 0.02em; opacity: 0.6; margin-bottom: 9px; }
.field__unit { opacity: 0.8; }
.field input, .field textarea {
  width: 100%; font: inherit; color: inherit; background: transparent;
  border: 0; border-bottom: 1.5px solid var(--ink); padding: 10px 0; border-radius: 0;
  transition: border-color 0.25s var(--ease);
}
.field textarea { border: 1.5px solid var(--ink); border-radius: 1.2vw; padding: 14px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-45); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--soil); }
.field.has-error input, .field.has-error textarea { border-color: var(--soil); }
.field__error { margin-top: 8px; font-family: var(--hand); font-size: 17px; color: var(--soil); }
.form__foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.form__note { font-size: 17px; color: var(--ink-45); }
.form-done { border: 1.5px solid var(--ink); border-radius: 2vw; padding: 4vh 3vw; display: grid; gap: 16px; justify-items: start; }
.form-done h3 { font-size: clamp(28px, 3.5vw, 56px); }
.form-done p { max-width: 52ch; color: var(--ink-70); }

/* ------------------------------------------ 18. Footer ---- */
.footer { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); padding: 8vh var(--pad) 3vh; border-radius: 3vw 3vw 0 0; }
.footer > *:not(.deerhead) { position: relative; z-index: 1; }
.footer__wordmark { z-index: 0 !important; }

/* Swaying deer heads in the bottom corners. Every layer is the same full-size
   canvas, so the transform origins below are the real joint positions:
   chest point, top of the neck, and the base of each antler. */
.deerhead {
  position: absolute; bottom: -1.5vw; z-index: 2;   /* in front of the wordmark and the base divider line */
  width: clamp(140px, 14vw, 260px); aspect-ratio: 468 / 611;
  pointer-events: auto;
}
.deerhead--l { left: 1.5vw; }
.deerhead--r { right: 1.5vw; transform: scaleX(-1); }
.deerhead__rig, .deerhead__head, .deerhead__part { position: absolute; inset: 0; width: 100%; height: 100%; }
.deerhead__part { display: block; user-select: none; -webkit-user-drag: none; }
.deerhead__rig { transform-origin: 49.86% 98.53%; will-change: transform; }
.deerhead__head { transform-origin: 49.83% 66.45%; will-change: transform; }
.deerhead__antler--l { transform-origin: 35.8% 45.99%; will-change: transform; }
.deerhead__antler--r { transform-origin: 63.9% 45.99%; will-change: transform; }
/* Links in two columns, the badge in the middle (contact details now sit in the contact section). */
/* Equal side columns, so the badge sits dead centre. */
.footer__top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 4vw; align-items: center; }
.footer__nav ul { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 4vw; }
.footer__nav a { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: -0.04em; font-size: clamp(22px, 2.5vw, 46px); line-height: 1.04; transition: color 0.3s var(--ease); }
.footer__nav a:hover { color: var(--sun); }
.footer__logo { display: block; width: clamp(120px, 11vw, 190px); height: auto; }
/* One line, edge to edge. main.js fits the size to the width. */
.footer__wordmark {
  margin-top: 5vh;
  font-size: 13.4vw;
  white-space: nowrap;
  line-height: 0.8;
  color: color-mix(in srgb, var(--paper) 14%, var(--ink));
  text-align: center;
}
.footer__base { margin-top: 3vh; padding-top: 2.5vh; padding-inline: 13vw; /* clear of the corner deer heads */ border-top: 1.5px solid color-mix(in srgb, var(--paper) 22%, var(--ink)); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 15px; opacity: 0.75; }

/* -------------------------------------- 19. Responsive ---- */
@media (max-width: 900px) {
  :root { --pad: 6vw; }
  .hide-sm { display: none; }
  .menu__cols, .problem, .problem__head, .creds__head, .creds__body, .contact__head, .footer__top, .dark__head { grid-template-columns: minmax(0, 1fr); }
  .creds__body .map { max-width: 440px; }
  .stagecall { height: auto; padding: 6vh var(--pad) 64vh; display: grid; gap: 3vh; justify-items: start; }
  .stagecall > *:not(.model-mount) { position: static; transform: none; width: auto; max-width: none; text-align: left; }
  /* Stacked order with an empty band for the deer: headline, chips,
     notes 1–3, [deer], notes 4–5, then the paragraph and link. The ring
     element doubles as the band; deer.js centres the deer on it here. */
  .stagecall { padding-bottom: 6vh; }
  .stagecall__title { order: -5; font-size: 14vw; display: block; }
  .stagecall__species { order: -4; }
  .note--l { order: -3; }
  .stagecall__ring { order: -2; visibility: hidden; width: 100%; height: 56vh; }
  .note--r { order: 1; }
  .stagecall__aside { order: 2; }
  .stagecall__plate { order: 3; }
  .stagecall__foot { order: 4; }
  .stagecall__l1, .stagecall__l2 { display: block; text-align: left; }
  .chips { justify-content: flex-start; }
  .note--r .note__k { flex-direction: row-reverse; justify-content: flex-end; }
  .note__pin { margin: 0 !important; }
  .stagecall__plate { white-space: normal; }
  .statement { height: 260vh; }
  .statement__pin > .factnote { display: none; }
  .plant { height: calc(var(--h) * 0.62); }
  .badges__sticky { flex-direction: column; gap: 4vh; }
  .badges__kicker, .badges__title, .factstrip { position: static; transform: none; }
  .badges__title { font-size: 15vw; }
  .factstrip { width: 100vw; margin-inline: calc(var(--pad) * -1); }
  .law__grid { grid-template-columns: minmax(0, 1fr); gap: 4vh; }
  .footer__top { gap: 4vh; justify-items: start; }
  .deerhead { width: 24vw; bottom: 3.5vh; }
  .footer__logo { justify-self: center; }
  .footer__base { padding-inline: 24vw; justify-content: center; text-align: center; }
  /* Mobile polish: readable stat units, comfortable footer tap targets, and
     the "How it works" view label moved up under the counter, clear of the deer. */
  .badges .badge__unit { font-size: 11.5px; }
  .footer .footer__nav a { display: inline-block; padding-block: 9px; }
  .pinned .pinned__view { top: calc(12vh + 40px); bottom: auto; }
  /* The flip letters can't wrap, and the desktop 48px minimum spills off
     narrow phones; size it to the screen so it always fits on one line. */
  .bigcta .bigcta__text { font-size: 12.4vw; }
  /* The hidden spacer band under the hero: the stacking rule above sets
     width:auto, which made this square SVG as wide as it is tall (~56vh) and
     pushed the whole page ~100px wider than the phone. Pin it to the column. */
  .stagecall > .stagecall__ring { width: 100%; }
  /* Tree in the grass scene: taller and slimmer on phones. `scale` narrows it
     from the base without touching the wind sway, which uses `transform`. */
  .statement__pin .plant[data-plant-tree] { height: 45vh; left: 97%; scale: 0.7 1; }   /* about half the tree shows, trunk at the edge */
  .menu__cols { align-items: start; gap: 6vh; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .badges { height: auto; }
  .badges__sticky { position: static; height: auto; padding: 10vh var(--pad); }
  .badges__row { flex-wrap: wrap; gap: 4vw; }
  .badge { width: calc(50% - 2vw); height: auto; aspect-ratio: 1; }
  .circleband { --cb: calc(100vw / 2.6); }
  .dark { padding-top: calc(100vw / 5.2 + 8vh); }
  .svc { grid-template-columns: minmax(0, 1fr); gap: 5vh; }
  .svc__item { gap: 2vh 3vw; }
  .svc__img { aspect-ratio: 3 / 2; }
  .svc__points { grid-template-columns: minmax(0, 1fr); }
  .svc__no { font-size: 19px; }
  .coverage { gap: 5vh; }
  .pinned { height: 380vh; }
  .step__no { font-size: clamp(64px, 22vw, 150px); }
  .step { inset: 0 0 40% 0; align-content: start; }
  .pinned__view { bottom: 10vh; }

  /* ---- Phones: the field-guide plate fits one screen ----
     Notes 01 and 04 sit above the deer with their labels facing down at it,
     notes 02, 03 and 05 sit below with labels facing up, and main.js draws a
     dashed leader line from each pin to its point on the deer, as on desktop. */
  .stagecall {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "title title title title title title"
      "species species species species species species"
      "n1 n1 n1 n4 n4 n4"
      "deer deer deer deer deer deer"
      "n2 n2 n3 n3 n5 n5"
      "aside aside aside aside aside aside"
      "plate plate plate plate plate plate"
      "foot foot foot foot foot foot";
    column-gap: 12px; row-gap: 2.4vh;
  }
  .stagecall > .stagecall__title { grid-area: title; }
  .stagecall > .stagecall__species { grid-area: species; }
  .stagecall > .stagecall__ring { grid-area: deer; height: 40svh; margin-block: 0.5vh; }
  .stagecall > .stagecall__aside { grid-area: aside; margin-top: 2vh; }
  .stagecall > .stagecall__plate { grid-area: plate; }
  .stagecall > .stagecall__foot { grid-area: foot; }
  .stagecall > [data-anchor="antler"] { grid-area: n1; }
  .stagecall > [data-anchor="eye"]    { grid-area: n4; }
  .stagecall > [data-anchor="body"]   { grid-area: n2; }
  .stagecall > [data-anchor="hoof"]   { grid-area: n3; }
  .stagecall > [data-anchor="muzzle"] { grid-area: n5; }
  .stagecall > .note { width: 100%; }
  .stagecall > [data-anchor="antler"], .stagecall > [data-anchor="eye"] { display: flex; flex-direction: column-reverse; justify-content: flex-end; align-self: end; }
  .stagecall > [data-anchor="antler"] .note__t, .stagecall > [data-anchor="eye"] .note__t { margin: 0 0 4px; }
  .stagecall .note__k { font-size: 15px; gap: 6px; }
  .stagecall .note__t { font-size: 12.5px; line-height: 1.4; margin-top: 3px; }
  .stagecall > .stage-lines { position: absolute; inset: 0; width: 100%; height: 100%; grid-area: auto; }

  /* ---- Phones: the stat circles float up past the grazing deer ----
     Like desktop: a pinned screen with the headline behind, and main.js
     (.is-drifting) floats the four circles up it, alternating sides. */
  .badges.is-drifting { height: 250vh; }
  .badges.is-drifting .badges__sticky { position: sticky; top: 0; height: 100svh; padding: 13vh var(--pad) 0; justify-content: flex-start; gap: 2vh; }
  .badges.is-drifting .badges__title { font-size: 17vw; }
  .badges.is-drifting .badges__row { position: absolute; inset: 0; display: block; }
  .badges.is-drifting .badge { position: absolute; top: 0; left: 29%; width: 46vw; transform: translate3d(-50%, 110vh, 0); will-change: transform; }
  .badges.is-drifting .badge:nth-child(even) { left: 71%; }
  .badges.is-drifting .factstrip { position: absolute; left: 0; right: 0; bottom: 4vh; margin: 0; width: auto; }

  /* ---- Phones: a shorter "Book an assessment" band ---- */
  .bigcta { min-height: 0; padding-block: 9vh; }

  /* ---- Phones: a compact footer ----
     No centre badge (the header already carries it), links in two even
     columns, contact details as label/value rows, and a tighter base line. */
  .footer { padding: 6vh var(--pad) 2.5vh; border-radius: 5vw 5vw 0 0; }
  .footer .footer__logo { display: none; }
  .footer .footer__top { gap: 3vh; }
  /* No footer links on phones (the menu covers them), so the footer is just
     the wordmark and the base line between the two deer heads. */
  .footer .footer__top { display: none; }
  .footer { padding-top: 5vh; }
  .footer .footer__wordmark { margin-top: 0; }
  /* Contact details: stacked label/value rows. */
  .contact__details { margin-top: 3.5vh; flex-direction: column; gap: 1.2vh; padding-block: 2vh; }
  .contact__details > div { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); align-items: baseline; gap: 12px; }
  .contact__details dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
  .footer .footer__base { margin-top: 2vh; padding: 1.8vh 22vw 0; flex-direction: column; align-items: center; gap: 2px; font-size: 12.5px; }
  .footer .footer__base p { margin: 0; white-space: nowrap; }

  /* ---- Phones: the contour map shrinks into the gap beside "Credentials" ---- */
  .creds { position: relative; }
  .creds .creds__body .map { position: absolute; top: calc(8vh - 22px); right: var(--pad); width: 27vw; max-width: none; margin: 0; pointer-events: none; }
  .creds .map figcaption { display: none; }

  /* ---- Phones: Services as a swipeable row of cards ----
     One card per service with the next one peeking in, so the section is a
     single screen instead of four stacked photos. Each card keeps its photo,
     number, title and checklist; the longer paragraph stays on desktop. */
  .dark { padding-bottom: 7vh; }
  .dark .dark__head { gap: 1.6vh; }
  .dark .dark__title { font-size: 21vw; }
  .dark .dark__intro { padding-bottom: 0; }
  .dark .dark__intro p { font-size: 15px; }
  .dark .dark__intro .dark__hint { margin-top: 1.2vh; font-size: 17px; }
  .dark .dark__intro::after { content: "Swipe for all four \2192"; display: block; margin-top: 2.4vh; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; }
  .dark .svc {
    display: flex; gap: 12px; margin: 2.4vh calc(var(--pad) * -1) 0; padding: 0 var(--pad) 6px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .dark .svc::-webkit-scrollbar { display: none; }
  .dark .svc::after { content: ""; flex: 0 0 1px; }
  .dark .svc__item {
    flex: 0 0 80vw; scroll-snap-align: start;
    gap: 1.2vh 10px; padding: 0 16px 16px 0; border: 0; border-radius: 16px; overflow: hidden;
    background: color-mix(in srgb, var(--paper) 8%, var(--ink));
  }
  .dark .svc__img { aspect-ratio: 16 / 10; border-radius: 0; }
  .dark .svc__no { padding-left: 16px; font-size: 18px; line-height: 1.5; }
  .dark .svc__title { font-size: 25px; }
  .dark .svc__body p { display: none; }
  .dark .svc__points { margin-top: 1.2vh; padding-top: 1.2vh; gap: 7px; font-size: 13.5px; }
  .dark .svc__points li { gap: 8px; }

  /* ---- Phones: the bush the deer feeds on in "What it's costing" ----
     Shown on phones too, scaled with the smaller deer: its base sits just
     below the hooves (72% down) and it is sized to the deer as on desktop. */
  .badges__front { display: none; }
  .badges.is-drifting .badges__front { display: block; }
  .badges.is-drifting .badges__front .plant { bottom: 25.5svh; height: 15svh; }

  /* ---- Phones: Damage, with deer and pigs behind two tabs ----
     The deer walks off-screen here, so its empty stage column goes too. */
  .problem { padding-bottom: 10vh; gap: 0; }
  .problem__stage { display: none; }
  .threats { margin-top: 4vh; grid-template-columns: minmax(0, 1fr); }
  .threats__radio { display: block; position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .threats__tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 1.4vh; border: 1.5px solid var(--ink); border-radius: var(--round); }
  .threats__tabs label { flex: 1; padding: 10px 8px; border-radius: var(--round); text-align: center; cursor: pointer; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: -0.02em; font-size: 19px; line-height: 1; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
  #threat-deer:checked ~ .threats__tabs label[for="threat-deer"],
  #threat-pigs:checked ~ .threats__tabs label[for="threat-pigs"] { background: var(--ink); color: var(--paper); }
  #threat-deer:focus-visible ~ .threats__tabs label[for="threat-deer"],
  #threat-pigs:focus-visible ~ .threats__tabs label[for="threat-pigs"] { outline: 2px solid var(--soil); outline-offset: 2px; }
  #threat-deer:checked ~ .threat--pigs, #threat-pigs:checked ~ .threat--deer { display: none; }
  .threat__label { display: none; }
  .threat__stat { padding: 1.6vh 0; border-top: 0; }
  .threat__stat .display { font-size: 50px; }
  .threat__stat .hand { font-size: 15px; }
  .threat__list li { padding: 1.5vh 0; }
  .threat__list h4 { font-size: 21px; }
  .threat__list p { font-size: 14px; }

  /* ---- Phones: end the form at the button ----
     No "demonstration form" note, and no tall empty band before the footer. */
  .contact { padding-bottom: 5vh; }
  .contact .form__note { display: none; }
}
@media (max-width: 560px) {
  .districts { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: 16vh; }
  .quote p { font-size: 26px; }
}

/* ------------------------------- 20. Reduced motion ---- */
/* Every effect above resolves to a static end state: the pinned
   sequence unpins into a normal stacked list, marquees become plain
   scrollers, and nothing loops or moves. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; transition-delay: 0ms !important;
  }
  .preloader { display: none; }
  .cursor { display: none !important; }
  .rise__i { transform: none !important; }
  .menu [data-menu-link] { opacity: 1 !important; transform: none !important; }
  .map__contours path { stroke-dashoffset: 0 !important; }
  .map__pins circle { opacity: 1 !important; }
  .badge:nth-child(n) { transform: none !important; }

  /* The badge stage pins without moving anything, but 150vh of held
     scroll is disorienting on its own, so it unpins here too. */
  .badges { height: auto !important; }
  .badges__sticky { position: static !important; height: auto !important; padding: 12vh var(--pad); }

  .pinned { height: auto !important; }
  .pinned__inner { position: static !important; height: auto !important; display: block; }
  .pinned__stage { position: static; }
  .steps { position: static; display: grid; gap: 8vh; }
  .step { position: static; opacity: 1 !important; transform: none !important; pointer-events: auto; }
  .pinned__foot, .pinned__view { display: none; }
  .badges__kicker, .badges__title, .factstrip { position: static !important; transform: none !important; }
  .badges__sticky { flex-direction: column; gap: 4vh; }
  .badges__front, .statement__front { display: none; }
  .statement { height: auto !important; }
  .statement__pin { position: static !important; height: auto !important; padding-bottom: 46vh; }

  .marquee { overflow-x: auto; }
  .marquee__track { animation: none !important; transform: none !important; }
  .quote p { white-space: normal; }
}