/* ==========================================================================
   Purge Pros — "Cover Story" direction
   site.css : tokens, base, layout, every component in kit.html
   Rules live in DESIGN.md. Builder styles are in builder.css (prefix ppb-).
   Content is visible with no JavaScript and with no animation having run.

   WHO EDITS THIS FILE (the convention, also in DESIGN.md section 14 and ADD-A-PAGE.md)
   - site.css is THE SYSTEM. It is edited only to fix a defect in a shared component, never to add something
     one page or one family of pages needs. Everything from the line "PAGES ADDITIONS" down is generated from
     _work/pages-additions.css by _work/apply-css.sh: fix a defect in components 28 to 37 there, never below
     that line.
   - A family of pages that needs something new writes it in ITS OWN file, css/family-<name>.css, with the
     same tokens and the same visual language (no new colours, radii, shadows or type sizes), names that file
     in the page's JSON block ("css": ["css/family-<name>.css"]) and shows the component on its own kit page,
     kit-<name>.html (source _work/pages/kit-<name>.html). Class names in a family file start with the
     family's name (.city-…, .legal-…), so two families can never collide.
   - builder.css belongs to the price builder alone.
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* brand */
  --navy: #062644;
  --navy-600: #0a3558;
  --navy-500: #114a78;
  --deep: #012638;            /* footer ground only: must match assets/brand/grass.png */
  --cyan: #18aef5;
  --cyan-200: #a6dfff;
  --cyan-050: #e9f7ff;
  --blue: #0877b9;
  --blue-700: #0868a3;        /* kickers and links on light grounds */
  --gold: #ffc12f;
  --gold-300: #ffd870;
  --gold-600: #f2a900;
  --gold-050: #fff3cc;
  --grass: #74c043;
  --grass-700: #3d8f2c;
  --grass-800: #2b7320;       /* green text on white ("Included"): 5.8 to 1 */
  --grass-050: #e8f6da;
  --lawn: #688515;            /* matches the bottom rows of heroes/home-phone.jpg */
  --sky: #62b9fd;
  --sky-200: #bfe4ff;
  --sky-050: #e6f5ff;
  --cream: #fff8ea;
  --paper: #ffffff;
  --sunset: #f3c987;          /* matches the open sky of scenes/scene-footer.jpg */

  /* ink */
  --ink: #062644;
  --ink-700: #28435e;
  --ink-500: #4d657b;
  --line: #d5e5f1;
  --on-navy: #ffffff;
  --on-navy-soft: #bcd6ea;

  /* type */
  --f-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Figtree", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --f-logo: "Oswald", "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-tag: "Montserrat", "Figtree", Arial, sans-serif;

  /* layout */
  --maxw: 1200px;
  --g0: 16px;                 /* side gutter: 16 phone, 24 tablet, 40 desktop */
  --g: max(var(--g0), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));   /* ...and never less than an iPhone's safe area when it is held sideways (the page asks for the whole screen: viewport-fit=cover). Upright the safe area is 0, so this is --g0 */
  --gap: 16px;                /* grid gap: 16 phone, 24 from 700 */
  --sec-gap: 85px;            /* THE section rhythm: from one section's last block to the next section's first. 85 phone, 112 tablet, 128 desktop */
  --edge-h: clamp(28px, 5.6vw, 84px);                                  /* height of the curve between two sections */
  --sec-pad: calc((var(--sec-gap) - 1px + var(--edge-h)) / 2);          /* so every section gets this above its first block and under its last (56 at 390, 104 at 1440) */
  --head-gap: 28px;           /* section heading to content: 28 phone, 40 desktop */
  --hdr-h: 64px;              /* header bar: 64 phone, 80 from 700px, 88 from 1180px */
  --hdr-h-stuck: 60px;        /* once the page has moved: 60, 74, 78. The logo itself never shrinks. */

  /* shape */
  --r-card: 24px;
  --r-tile: 16px;
  --r-photo: 20px;
  --r-pill: 999px;

  /* soft depth: never a hard offset shadow */
  --sh-1: 0 1px 2px rgba(6, 38, 68, .08), 0 6px 16px rgba(6, 38, 68, .08);
  --sh-2: 0 2px 4px rgba(6, 38, 68, .08), 0 16px 36px rgba(6, 38, 68, .15);
  --sh-3: 0 4px 10px rgba(6, 38, 68, .12), 0 30px 64px rgba(6, 38, 68, .26);

  --focus: #0877b9;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 700px) {
  :root { --g0: 24px; --gap: 24px; --sec-gap: 112px; --hdr-h: 80px; --hdr-h-stuck: 74px; }
}
@media (min-width: 1000px) {
  :root { --g0: 40px; --sec-gap: 128px; --head-gap: 40px; }
}
@media (min-width: 1180px) {
  :root { --hdr-h: 88px; --hdr-h-stuck: 78px; }
}

/* 2. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-700);
  font: 400 16px/1.6 var(--f-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 1000px) { body { font-size: 17px; } }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--hdr-h) + 16px); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.on-dark, .sec--navy, .foot, .mnav, .cta { --focus: #ffc12f; }

.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--gold); color: var(--navy); font: 700 16px/1 var(--f-text);
  padding: 14px 18px; border-radius: 12px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* 3. TYPE ------------------------------------------------------------------ */
.h1, .h2, .h3, h1, h2, h3 {
  font-family: var(--f-display); color: var(--ink); font-weight: 800;
  letter-spacing: -.005em; text-wrap: balance;
}
.h1, h1 { font-size: clamp(40px, 6.2vw, 80px); line-height: .94; }
.h2, h2 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1; }
.h3, h3 { font-size: clamp(23px, 2.4vw, 28px); line-height: 1.08; font-weight: 700; letter-spacing: 0; }
.h4, h4 { font: 700 17px/1.3 var(--f-text); color: var(--ink); }
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--ink-700); text-wrap: pretty; }
.small { font-size: 14px; line-height: 1.5; }
.micro { font-size: 12.5px; line-height: 1.5; }
p { text-wrap: pretty; }
strong, b { font-weight: 700; color: var(--ink); }
/* a hyphenated word that must stay on one line ("one-time", "start-up", "closed-gate"): the ordinary hyphen is kept,
   so searching, copying and structured data read the same word. The site builder adds it to "one-time" and "start-up"
   in headings and FAQ questions; write it yourself anywhere else a compound breaks at its hyphen. */
.nb { white-space: nowrap; }

.kicker {
  font: 700 15px/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-700);
}
@media (min-width: 1000px) { .kicker { font-size: 16px; } }

/* the one heading mark: a cyan brush swash under ONE word (light grounds) */
.swash {
  white-space: nowrap; padding-bottom: .06em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath d='M4 14.5C52 7 118 3.6 176 4.2c44 .5 86 3 120 8.3 2.6.4 2.4 3.9-.3 3.8-40-1.600-79-2.900-121-2.400C122 14.500 66 17.400 6.500 20.800 2 21 .6 15.200 4 14.500Z' fill='%2318aef5'/%3E%3C/svg%3E") no-repeat 0 100% / 100% .3em;
}
/* the other heading mark: one whole line in cyan (navy grounds only) */
.pop { color: var(--cyan); }
.sec--navy .swash, .on-dark .swash { background-image: none; color: var(--cyan); }

a.link, .prose a {
  color: var(--blue-700); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
@media (hover: hover) { a.link:hover, .prose a:hover { color: var(--navy); text-decoration-color: var(--gold-600); } }
.prose > * + * { margin-top: 1em; }
.prose ul { list-style: none; }
.prose ul li { position: relative; padding-left: 30px; }
.prose ul li + li { margin-top: .5em; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px;
  background: url("../../../assets/brand-icons/pp-service-check.webp") center / contain no-repeat;
}

/* 4. LAYOUT ---------------------------------------------------------------- */
/* ONE container: every heading, grid, band and the footer start on these edges */
.wrap { width: 100%; padding-inline: max(var(--g), calc((100% - var(--maxw)) / 2)); }

.sec {
  --sec-bg: var(--paper);
  position: relative; background: var(--sec-bg); padding-block: var(--sec-pad);
}
.sec--cream { --sec-bg: var(--cream); }
.sec--sky   { --sec-bg: var(--sky-050); }
.sec--grass { --sec-bg: var(--grass-050); }
.sec--gold  { --sec-bg: var(--gold-050); }
.sec--navy  { --sec-bg: var(--navy); color: var(--on-navy-soft); }
.sec--navy h2, .sec--navy h3, .sec--navy h4, .sec--navy strong, .sec--navy b { color: #fff; }
.sec--navy .kicker { color: var(--cyan); }
.sec--navy .lead { color: var(--on-navy-soft); }

/* THE ONE RHYTHM. Every section, whatever its ground or curve, has the same padding: --sec-pad above its first
   block and --sec-pad under its last. The curve is drawn inside the top padding (it is --edge-h tall and sweeps
   up over the section above by that much), and --sec-pad is worked out from the curve so that from one section's
   last block to the next section's first is always --sec-gap: 85px on phones, 112px on tablets, 128px on desktop,
   at every join of every page. Nothing else sets section padding: no tight variant, no one-off margins. */
/* curved top edges: the section's own colour sweeps up over the section above */
.sec[data-edge] { margin-top: calc(var(--edge-h) * -1 + 1px); background: none; }
main > .sec:last-of-type { padding-bottom: var(--sec-gap); }   /* the closing scene meets it on a level line, with no curve to take up */
.sec[data-edge]::before {
  content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 0; bottom: 0;
  background: var(--sec-bg);
  -webkit-mask: var(--edge) top center / 100% var(--edge-h) no-repeat, linear-gradient(#000, #000) 0 calc(var(--edge-h) - 1px) / 100% 100% no-repeat;
          mask: var(--edge) top center / 100% var(--edge-h) no-repeat, linear-gradient(#000, #000) 0 calc(var(--edge-h) - 1px) / 100% 100% no-repeat;
}
.sec[data-edge] > * { position: relative; z-index: 1; }
/* the cover keyline: a cyan stroke riding 12px above the edge */
.sec[data-edge][data-keyline]::after {
  content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: -12px; height: var(--edge-h);
  background: var(--cyan);
  -webkit-mask: var(--edge-line) center / 100% 100% no-repeat; mask: var(--edge-line) center / 100% 100% no-repeat;
  pointer-events: none;
}
.sec[data-edge="arc"] {
  --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 101V72C300 14 720 -8 1440 64V101Z'/%3E%3C/svg%3E");
  --edge-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M-10 74C300 14 720 -8 1450 65' fill='none' stroke='%23000' stroke-width='5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.sec[data-edge="arc-r"] {
  --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 101V64C720 -8 1140 14 1440 72V101Z'/%3E%3C/svg%3E");
  --edge-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M-10 65C720 -8 1140 14 1450 74' fill='none' stroke='%23000' stroke-width='5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.sec[data-edge="scoop"] {
  --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 101V6C380 96 1060 96 1440 6V101Z'/%3E%3C/svg%3E");
  --edge-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M-10 4C380 96 1060 96 1450 4' fill='none' stroke='%23000' stroke-width='5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.sec[data-edge="wave"] {
  --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 101V58C230 6 470 2 740 34S1230 92 1440 34V101Z'/%3E%3C/svg%3E");
  --edge-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M-10 60C230 6 470 2 740 34S1230 92 1450 32' fill='none' stroke='%23000' stroke-width='5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* grids: column counts are chosen from the item count so a row is never left with one card */
.grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) {
  .grid--2, .grid--4, .grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--5, .grid--7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--5 > :first-child, .grid--7 > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .grid--3, .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid--5 > * { grid-column: span 2; }
  .grid--5 > :first-child { grid-column: span 2; }
  .grid--5 > :nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--7 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .grid--7 > *, .grid--7 > :first-child { grid-column: span 3; }
  .grid--7 > :nth-child(n+5) { grid-column: span 4; }
}

/* split: picture one side, words the other. 12 columns: art 6, gap 1, words 5 */
.split { display: grid; gap: 32px var(--gap); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .split__art { grid-column: 1 / span 6; grid-row: 1; }
  .split__text { grid-column: 8 / span 5; grid-row: 1; }
  .split--flip .split__art { grid-column: 7 / span 6; }
  .split--flip .split__text { grid-column: 1 / span 5; }
}
.split__text > * + * { margin-top: 18px; }
.split__text > .sh + * { margin-top: 20px; }

.stack > * + * { margin-top: var(--head-gap); }
.center { text-align: center; }
.actions { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.center .actions, .actions--center { justify-content: center; }
.actions--lead > :first-child { flex-basis: 100%; display: flex; }
.actions--lead > :first-child > .btn { flex: none; }

/* 5. DECOR: stickers, seals, ribbons, textures ----------------------------- */
/* an icon keeps its own proportions in whatever box a component gives it (several glossy icons are not square) */
img[src*="-icons/"] { object-fit: contain; }
/* brand icons shown as die-cut stickers: white keyline, soft shadow, a little tilt */
.stk {
  filter: drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 4px 5px rgba(6, 38, 68, .26));
  transform: rotate(var(--tilt, -6deg)); transition: transform .28s var(--ease);
}
.stk--r { --tilt: 6deg; }
.stk--0 { --tilt: 0deg; }
.stk--thin { filter: drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 2px 3px rgba(6, 38, 68, .24)); }
@media (hover: hover) { a:hover > .stk, a:hover .stk, button:hover .stk, .tilts:hover .stk { transform: rotate(calc(var(--tilt, -6deg) * -1)) scale(1.06); } }

/* white plate for the glossy 3D icons on dark or busy grounds */
.puck {
  display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px rgba(24, 174, 245, .35), 0 6px 14px rgba(1, 20, 36, .3);
}
.puck img { width: 68%; height: 68%; object-fit: contain; }
.puck--sq { border-radius: 30%; }
.puck--lg { width: 88px; height: 88px; }

/* scalloped seal: gold, tilted, one per screenful */
.seal {
  --seal: 112px;
  position: relative; display: grid; place-items: center; width: var(--seal); height: var(--seal); flex: none;
  transform: rotate(-9deg); color: var(--navy); text-align: center; text-decoration: none;
  filter: drop-shadow(0 6px 10px rgba(6, 38, 68, .28)); transition: transform .3s var(--ease);
}
.seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal__txt { position: relative; font: 800 20px/.95 var(--f-display); letter-spacing: .01em; text-transform: uppercase; padding: 0 12px; }
.seal__txt b { display: block; font-size: 1.7em; line-height: .86; color: var(--navy); }
.seal__txt small { display: block; font: 700 10px/1.15 var(--f-text); letter-spacing: .04em; margin-top: 3px; text-transform: none; }
.seal--navy { color: #fff; }
.seal--navy .seal__txt b { color: var(--gold); }
@media (hover: hover) { a.seal:hover, .tilts:hover .seal { transform: rotate(4deg) scale(1.04); } }

/* ribbon: swallow-tailed label for "most popular", "from", categories */
.ribbon {
  display: inline-block; padding: 6px 20px 6px; background: var(--gold); color: var(--navy);
  font: 700 14px/1.1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%, 9px 50%);
}
.ribbon--cyan { background: var(--cyan); }
.ribbon--navy { background: var(--navy); color: #fff; }
.ribbon--white { background: #fff; }

/* small pill tag */
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--cyan-050); color: var(--navy); font: 700 13px/1.2 var(--f-text);
}
.tag--gold { background: var(--gold-050); }
.tag--real { background: var(--navy); color: #fff; letter-spacing: .08em; text-transform: uppercase; font: 700 12.5px/1.2 var(--f-display); padding: 5px 10px 4px; }

/* halftone print texture for colour fields (never under body text on light grounds) */
.dots { position: relative; }
.dots::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(currentColor 1.3px, transparent 1.7px) 0 0 / 11px 11px;
  -webkit-mask: radial-gradient(120% 90% at 100% 0, #000 0, transparent 62%); mask: radial-gradient(120% 90% at 100% 0, #000 0, transparent 62%);
  opacity: .16;
}

/* spark: three short strokes, the covers' "ta-da" mark. Sparingly. */
.spark { position: relative; }
.spark::after {
  content: ""; position: absolute; left: 100%; bottom: 50%; width: .56em; height: .56em; margin-left: .08em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23ffc12f' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M6 30 3 12'/%3E%3Cpath d='M17 26 24 5'/%3E%3Cpath d='M26 33 38 22'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* 6. LOGO ------------------------------------------------------------------ */
/* Two sizes in the header and menu: 44 to 46px on phones, 64px from 700px, and it never shrinks when the
   header sticks. The tagline is never smaller than 9px (10.75px on the 64px lockup) and never wider than
   the wordmark: where the lockup is smaller still, --logo-tag-ls tightens its tracking. */
.logo { --logo-h: 46px; --logo-tag-ls: .145em; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--navy); flex: none; }
.logo__mark { width: auto; height: var(--logo-h); flex: none; }
.logo__text { display: grid; gap: calc(var(--logo-h) * .075); }
.logo__name {
  font: 700 calc(var(--logo-h) * .56)/.9 var(--f-logo); letter-spacing: .01em; text-transform: uppercase; white-space: nowrap;
}
.logo__name b { font-weight: 700; color: var(--cyan); }
.logo__tag {
  font: 700 max(9px, calc(var(--logo-h) * .168))/1 var(--f-tag); letter-spacing: var(--logo-tag-ls); text-transform: uppercase; white-space: nowrap; color: var(--navy);
}
.logo--dark { color: #fff; }
.logo--dark .logo__tag { color: #fff; }
@media (min-width: 700px) { .logo { --logo-h: 64px; --logo-tag-ls: .145em; gap: 11px; } }
.logo--lg { --logo-h: 84px; --logo-tag-ls: .145em; }
@media (min-width: 1180px) { .logo--lg { --logo-h: 96px; } }

/* 7. BUTTONS --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 4px 26px 5px; border: 2px solid transparent; border-radius: var(--r-pill);
  font: 700 21px/1 var(--f-display); letter-spacing: .015em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s, border-color .18s, color .18s;
  -webkit-tap-highlight-color: transparent;
}
.btn__arrow { width: 24px; height: 24px; flex: none; transition: transform .2s var(--ease); }
@media (hover: hover) { .btn:hover .btn__arrow { transform: translateX(4px); } }
.btn:active { transform: translateY(1px) scale(.99); }

.btn--primary {
  color: var(--navy);
  background: linear-gradient(180deg, #ffd766 0%, #ffc12f 52%, #f8b214 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(160, 96, 0, .18), 0 2px 4px rgba(6, 38, 68, .14), 0 8px 20px rgba(242, 169, 0, .34);
}
@media (hover: hover) { .btn--primary:hover { transform: translateY(-2px); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(160, 96, 0, .18), 0 4px 8px rgba(6, 38, 68, .16), 0 14px 28px rgba(242, 169, 0, .42); } }

.btn--secondary {
  color: #fff; background: linear-gradient(180deg, var(--navy-500) 0%, var(--navy) 70%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .18), 0 2px 4px rgba(6, 38, 68, .2), 0 8px 20px rgba(6, 38, 68, .22);
}
@media (hover: hover) { .btn--secondary:hover { transform: translateY(-2px); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .2), 0 4px 8px rgba(6, 38, 68, .22), 0 14px 28px rgba(6, 38, 68, .3); } }

.btn--outline { color: var(--navy); background: #fff; border-color: var(--navy); }
@media (hover: hover) { .btn--outline:hover { background: var(--cyan-050); transform: translateY(-2px); } }

.btn--on-dark { color: var(--navy); background: #fff; box-shadow: 0 2px 4px rgba(1, 20, 36, .3), 0 8px 20px rgba(1, 20, 36, .3); }
@media (hover: hover) { .btn--on-dark:hover { transform: translateY(-2px); background: var(--cyan-050); } }
.btn--ghost-dark { color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .06); }
@media (hover: hover) { .btn--ghost-dark:hover { border-color: #fff; background: rgba(255, 255, 255, .14); transform: translateY(-2px); } }

/* quiet: a text action with the swash under it */
.btn--quiet {
  min-height: 44px; padding: 4px 2px; border-radius: 8px; color: var(--navy); gap: 8px;
  background: linear-gradient(var(--cyan), var(--cyan)) no-repeat 0 calc(100% - 6px) / calc(100% - 32px) 3px;
}
@media (hover: hover) { .btn--quiet:hover { background-size: 100% 3px; color: var(--blue-700); } }
.on-dark .btn--quiet, .sec--navy .btn--quiet, .foot .btn--quiet, .cta .btn--quiet { color: #fff; }

.btn--sm { min-height: 44px; padding: 3px 18px 4px; font-size: 18px; gap: 8px; }
.btn--sm .btn__arrow { width: 20px; height: 20px; }
.btn--lg { min-height: 60px; padding-inline: 32px; font-size: 24px; }
.btn--block { display: flex; width: 100%; }
.btn__ico { width: 26px; height: 26px; flex: none; }

/* 8. SECTION HEADING (the one heading component) --------------------------- */
/* emblem (sticker icon on a colour disc) + kicker + h2 with one swash + optional intro */
.sh { display: grid; gap: 10px; justify-items: start; max-width: 720px; }
.sh__emblem {
  position: relative; width: 60px; height: 60px; display: grid; place-items: center; flex: none; margin-bottom: 4px;
}
.sh__emblem::before {
  content: ""; position: absolute; inset: 2px -6px -2px 6px; border-radius: 50%; background: var(--sh-disc, var(--gold));
}
.sh__emblem img { position: relative; width: 52px; height: 52px; }
.sh__title { margin-top: 2px; }
.sh__intro { margin-top: 6px; max-width: 60ch; }
.sh--center { justify-items: center; text-align: center; margin-inline: auto; }
.sh--center .sh__intro { margin-inline: auto; }
/* left version: emblem sits beside the kicker so the heading starts on the column edge */
.sh--left { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
.sh--left .sh__emblem { grid-row: 1; margin-bottom: 0; width: 52px; height: 52px; }
.sh--left .sh__emblem img { width: 46px; height: 46px; }
.sh--left .kicker { grid-column: 2; }
.sh--left .sh__title, .sh--left .sh__intro { grid-column: 1 / -1; }
.sh--sky { --sh-disc: var(--sky-200); }
.sh--grass { --sh-disc: #c5ea9f; }
.sh--cyan { --sh-disc: var(--cyan); }
.sec--navy .sh__emblem::before { background: var(--sh-disc, var(--cyan)); }
@media (min-width: 1000px) {
  .sh__emblem { width: 72px; height: 72px; }
  .sh__emblem img { width: 62px; height: 62px; }
  .sh--left .sh__emblem { width: 56px; height: 56px; }
  .sh--left .sh__emblem img { width: 50px; height: 50px; }
}
/* ONE COLUMN, ONE ALIGNMENT. Below 900px every split has stacked, so the reason for a left heading is gone:
   every section heading block (emblem, kicker, title, intro) is centred, whichever class it carries.
   Lists, body text and cards stay left-aligned underneath. */
@media (max-width: 899.98px) {
  .sh, .sh--left { grid-template-columns: minmax(0, 1fr); column-gap: 0; justify-items: center; text-align: center; margin-inline: auto; }
  .sh--left .sh__emblem { grid-row: auto; width: 60px; height: 60px; margin-bottom: 4px; }
  .sh--left .sh__emblem img { width: 52px; height: 52px; }
  .sh--left .kicker, .sh--left .sh__title, .sh--left .sh__intro { grid-column: auto; }
  .sh .sh__intro { margin-inline: auto; }
}

/* 9. HEADER ---------------------------------------------------------------- */
/* The sticky box keeps its full height; only the bar inside it shrinks, so nothing below moves. */
.hdr { position: sticky; top: 0; z-index: 60; height: var(--hdr-h); pointer-events: none; }
.hdr__bar {
  position: absolute; left: 0; right: 0; top: 0; height: var(--hdr-h); pointer-events: auto;
  background: #fff; display: flex; align-items: center;
  transition: height .24s var(--ease), box-shadow .24s var(--ease);
}
.hdr__bar::after { /* masthead rule */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--navy) 0 38%, var(--cyan) 38% 86%, var(--gold) 86% 100%);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.hdr.is-stuck .hdr__bar { height: var(--hdr-h-stuck); box-shadow: 0 10px 30px rgba(6, 38, 68, .16); }
.hdr.is-stuck .hdr__bar::after { transform: scaleX(1); }
.hdr__in { --hdr-gap: 8px; display: flex; align-items: center; gap: var(--hdr-gap); height: 100%; }
.hdr .logo { --logo-h: 44px; gap: 7px; min-height: 44px; }
/* A reader's own text spacing (WCAG 1.4.12: wider letters and words) can make the bar wider than a phone. The wordmark
   then gives way (its box shrinks and its last letters slide under the price button), so the price button and the
   menu button never leave the screen. With the site's own spacing there is room to spare and nothing shrinks.
   The same in the menu's top row and in the footer. (No overflow clipping here: it changes how Chrome smooths the
   wordmark's letters at the top of the page, and the approved look must not move by a pixel.) */
.hdr .logo, .mnav__top .logo { flex: 0 1 auto; min-width: 0; }
.foot .logo { max-width: 100%; }
.hdr .logo__text, .mnav__top .logo__text, .foot .logo__text { min-width: 0; }
.hdr__cta.btn { min-height: 44px; padding-inline: 13px; font-size: 17px; }
.hdr__spacer { flex: 1 1 auto; margin-left: calc(var(--hdr-gap) * -1); }   /* takes the slack without adding a second gap */
.hdr__cta { flex: none; }
.hdr__reach { display: none; }                                /* under 1180px the phone menu carries the same pair */
.nav { display: none; }

.hdr__burger {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px;
  background: var(--cyan-050); border: 2px solid var(--line); color: var(--navy); text-decoration: none;
  padding: 0; margin: 0; appearance: none; -webkit-appearance: none; cursor: pointer;   /* a real button (and, with scripts off, a link): same box either way */
}
.hdr__burger span, .hdr__burger span::before, .hdr__burger span::after {
  display: block; width: 20px; height: 2.5px; border-radius: 2px; background: currentColor; content: ""; position: relative;
}
.hdr__burger span::before { position: absolute; top: -6.5px; }
.hdr__burger span::after { position: absolute; top: 6.5px; }
/* the price button is in the header at every width: on the narrowest phones the lockup and the button tighten instead */
@media (max-width: 379.98px) {
  .hdr .logo { --logo-h: 40px; --logo-tag-ls: .09em; gap: 6px; }
  .hdr__cta.btn { padding-inline: 10px; font-size: 16px; }
}
@media (max-width: 359.98px) {
  .hdr .logo { --logo-h: 32px; gap: 5px; }
  .hdr .logo__tag { display: none; }
  .hdr__cta.btn { padding-inline: 8px; font-size: 15.5px; }
}
@media (min-width: 700px) {
  .hdr__in { --hdr-gap: 14px; }
  .hdr .logo { --logo-h: 64px; gap: 11px; }
  .hdr__cta.btn { min-height: 48px; padding-inline: 22px; font-size: 20px; }
  .hdr__burger { width: 48px; height: 48px; }
}

@media (min-width: 1180px) {
  .hdr__in { --hdr-gap: 22px; }
  .hdr__burger { display: none; }
  .nav { display: block; margin-left: auto; }
  .hdr__spacer { display: none; }
  .nav__list { display: flex; align-items: center; gap: 4px; }
  .nav__item { position: relative; }
  .nav__link {
    display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 13px; border: 0; background: none; border-radius: 12px;
    font: 600 16.5px/1 var(--f-text); color: var(--navy); text-decoration: none; white-space: nowrap; cursor: pointer;
  }
  .nav__link::after {
    content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 3px; border-radius: 3px; background: var(--cyan);
    transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
  }
  .nav__link:hover::after, .nav__item.is-open > .nav__link::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .nav__link .caret { transition: transform .2s var(--ease); margin-top: 1px; }
  .nav__item.is-open > .nav__link .caret, .nav__item--menu:hover > .nav__link .caret { transform: rotate(180deg); }

  /* dropdown: opens on hover, on click (is-open) and for keyboard users (focus-within) */
  .nav__drop {
    position: absolute; left: -14px; top: 100%; z-index: 5; min-width: 340px; padding-top: 12px;
    visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .16s, transform .2s var(--ease), visibility 0s .2s;
  }
  .nav__item--menu:hover > .nav__drop, .nav__item.is-open > .nav__drop, html:not(.js) .nav__item--menu:focus-within > .nav__drop {
    visibility: visible; opacity: 1; transform: none; transition-delay: 0s;
  }
  .nav__item.is-closed > .nav__drop { visibility: hidden !important; opacity: 0 !important; }
  .nav__item--menu.is-closed:hover > .nav__link .caret { transform: none; }   /* dismissed with Escape while the pointer rests on it */
  .nav__panel {
    position: relative; background: #fff; border-radius: 22px; box-shadow: var(--sh-3); padding: 10px; overflow: hidden;
    border: 1px solid var(--line);
  }
  .nav__panel::before { /* a little cover arc in the corner */
    content: ""; position: absolute; right: -60px; top: -60px; width: 150px; height: 150px; border-radius: 50%; background: var(--gold-050);
  }
  .nav__sub { position: relative; }
  .nav__sub a {
    display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 14px; text-decoration: none; color: var(--navy);
    min-height: 60px;
  }
  .nav__sub a:hover, .nav__sub a:focus-visible { background: var(--cyan-050); }
  .nav__sub img { width: 44px; height: 44px; flex: none; }
  .nav__sub b { display: block; font: 700 17px/1.2 var(--f-text); }
  .nav__sub small { display: block; font: 500 13.5px/1.35 var(--f-text); color: var(--ink-500); margin-top: 2px; }
  .nav__sub--plain a { min-height: 46px; padding: 6px 14px 6px 10px; gap: 10px; font: 600 16.5px/1.2 var(--f-text); }
  .nav__sub--plain img { width: 28px; height: 28px; }
  .nav__sub--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; }
  .nav__more {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 12px 14px;
    border-radius: 14px; background: var(--navy); color: #fff; text-decoration: none; font: 700 16px/1.2 var(--f-text);
  }
  .nav__more small { display: block; font: 500 13px/1.3 var(--f-text); color: var(--on-navy-soft); margin-top: 2px; }
  .nav__more:hover { background: var(--navy-600); }
  .nav__more img { width: 22px; height: 22px; flex: none; }

  /* TEXT FIRST (owner decision, October 8). The bar's contact control reads "Text or call" with the number. It is a
     button, not a call link: it opens a choice of two, Text first and filled, Call second. It opens like the menus
     beside it (hover, click, keyboard) and its panel hangs from the control's right edge. */
  .hdr__reach { display: block; flex: none; }
  .hdr__tel {
    display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 6px; border: 0; border-radius: 12px; background: none;
    color: var(--navy); text-align: left; font: 700 18px/1 var(--f-text); white-space: nowrap; cursor: pointer;
  }
  .hdr__tel img { width: 30px; height: 30px; }
  .hdr__tel span small { display: block; font: 600 12.5px/1 var(--f-text); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 4px; }
  .hdr__tel:hover, .hdr__reach.is-open > .hdr__tel { color: var(--blue-700); }
  .hdr__tel .caret { flex: none; margin-left: -2px; transition: transform .2s var(--ease); }
  .hdr__reach.is-open > .hdr__tel .caret, .hdr__reach:hover > .hdr__tel .caret { transform: rotate(180deg); }
  .hdr__reach.is-closed:hover > .hdr__tel .caret { transform: none; }
  .nav__drop--end { left: auto; right: -14px; min-width: 334px; }   /* 334: the width Chrome gives the unwrapped lines; Safari and Firefox stopped at the old 318 minimum and the second line ran to the edge */
  .nav__sub--reach { display: grid; gap: 6px; }
  .nav__sub--reach a { white-space: nowrap; }
  .nav__sub a.nav__text { background: var(--navy); color: #fff; }                    /* Text is the stronger of the two */
  .nav__sub a.nav__text b { color: #fff; }
  .nav__sub a.nav__text small { color: var(--on-navy-soft); }
  .nav__sub a.nav__text:hover, .nav__sub a.nav__text:focus-visible { background: var(--navy-600); }
  .nav__sub a.nav__text img { filter: drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff); }   /* a sticker's white keyline, so the icon reads on navy */
}
@media (min-width: 1180px) and (max-width: 1299px) {
  .nav__link { padding: 0 9px; font-size: 16px; }
  .nav__link::after { left: 9px; right: 9px; }
  .hdr__in { --hdr-gap: 14px; }
  .hdr__tel span small { display: none; }
  .hdr__tel .caret { display: none; }
}
/* 9b. THE TEXT BUTTON OF THE PHONE BAR (owner request, October 12) ---------- */
/* One build setting puts it in: "headerText" in _work/partials/site.json. The header then carries the class hdr--text
   and, straight before the gold button, a navy pill that says "Text" (a.hdr__text: the site's sms: link; the number
   is read out, not shown). Navy, because Text is the navy one of every Text and Call pair on the site; the price
   button stays the only gold thing in the bar. From 1180px the bar's own "Text or call" control is there and the
   pill is not. EVERY rule here hangs on .hdr--text, so a header built without the button is drawn as before.
   Room. A phone's bar was full, so the lockup and the price button pay for the pill, and nothing is ever cut:
     444px and wider   everything at its own size (the lockup 44px with its tagline, the price button as it was)
     430 to 443px      the two buttons tighten (16px type); the lockup is still whole
     360 to 429px      the buttons tighten once more (15.5px type, 6px between the controls) and the lockup takes
                       exactly the width that is left: its height follows the window, 30px at 360 to 44px from 417
                       (4.13 is the lockup's width for 1px of its height, 234.5px what the rest of the bar needs).
                       The tagline is set to the wordmark's width by its tracking and shows from 390px; under that
                       the lockup is the mark and the wordmark, as it already was on the narrowest phones
     under 360px       the mark alone, at its full 44px: no size of the wordmark that can be read fits beside
                       three controls (the link keeps its name for screen readers) */
.hdr--text .hdr__text.btn { flex: none; min-width: 44px; min-height: 44px; padding-inline: 10px; font-size: 17px; }
@media (max-width: 443.98px) {
  .hdr--text .hdr__cta.btn { padding-inline: 9px; font-size: 16px; }
  .hdr--text .hdr__text.btn { padding-inline: 8px; font-size: 16px; }
}
@media (max-width: 429.98px) {
  .hdr--text .hdr__in { --hdr-gap: 6px; }
  .hdr--text .logo {
    --logo-h: clamp(30px, calc((100vw - 234.5px) / 4.13), 44px);
    --logo-tag-ls: min(.145em, calc((var(--logo-h) * 3.0239 - 107px) / 17));
    gap: calc(var(--logo-h) * .16);
  }
  .hdr--text .hdr__cta.btn { padding-inline: 8px; font-size: 15.5px; }
  .hdr--text .hdr__text.btn { padding-inline: 7.5px; font-size: 15.5px; }
}
@media (max-width: 389.98px) { .hdr--text .logo__tag { display: none; } }
@media (max-width: 359.98px) {
  .hdr--text .hdr__in { --hdr-gap: 8px; }
  .hdr--text .logo { --logo-h: 44px; }
  .hdr--text .logo__text { display: none; }
  .hdr--text .hdr__cta.btn, .hdr--text .hdr__text.btn { padding-inline: 10px; font-size: 16px; }
}
@media (min-width: 700px) { .hdr--text .hdr__text.btn { min-height: 48px; padding-inline: 18px; font-size: 20px; } }
@media (min-width: 1180px) { .hdr--text .hdr__text { display: none; } }
/* static copies for the kit */
.hdr--demo { position: relative; z-index: 1; }
.hdr--demo .hdr__bar { position: relative; box-shadow: var(--sh-1); border-radius: 14px; }
.hdr--demo.is-stuck { height: var(--hdr-h-stuck); }

/* phone menu: a real fixed panel with every item, the number and the price button */
.mnav {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: var(--navy); color: #fff;
  visibility: hidden; opacity: 0; transform: translateY(-12px); transition: opacity .2s, transform .28s var(--ease), visibility 0s .28s;
}
.mnav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }   /* with scripts off the address opens it (#mnav): that rule, .mnav:target, is in the header's <noscript>, so nothing but this class can hold the menu open while scripts run */
.mnav::before { /* cover arc */
  content: ""; position: absolute; right: -40%; top: -90px; width: 120%; aspect-ratio: 1; border-radius: 50%;
  background: var(--navy-600); pointer-events: none;
}
.mnav > * { position: relative; }
.mnav__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px var(--g); min-height: var(--hdr-h); flex: none; }
.mnav__close {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; flex: none;
  background: rgba(255, 255, 255, .1); border: 2px solid rgba(255, 255, 255, .25); color: #fff; text-decoration: none;
  padding: 0; margin: 0; appearance: none; -webkit-appearance: none; cursor: pointer;   /* a real button */
}
.mnav:focus, .mnav:focus-visible { outline: none; }   /* opening the menu puts focus on the panel itself: no ring round the whole screen, and none on Close after a tap (Safari) */
.mnav__close img { width: 20px; height: 20px; }
.mnav__body { padding: 6px var(--g) 20px; flex: 1 0 auto; }
.mnav__group + .mnav__group { margin-top: 18px; }
.mnav__label { font: 700 14px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 4px; }
.mnav__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 0;
  font: 700 26px/1.05 var(--f-display); color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.mnav__links--cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.mnav__links--cols a { font-size: 23px; }
.mnav__links a::after {
  content: ""; width: 9px; height: 9px; border-right: 2.5px solid var(--cyan); border-top: 2.5px solid var(--cyan); transform: rotate(45deg); flex: none; margin-right: 4px;
}
.mnav__foot {
  position: sticky; bottom: 0; flex: none; display: grid; gap: 10px; padding: 14px var(--g) calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(6, 38, 68, 0), var(--navy) 22%);
}
/* TEXT FIRST: one row, the Text button wide and filled with the number on it, the Call button compact beside it */
.mnav__reach { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.mnav__text, .mnav__tel { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 16px; border-radius: var(--r-pill); border: 2px solid rgba(255, 255, 255, .5); color: #fff; text-decoration: none; font: 700 21px/1 var(--f-display); white-space: nowrap; }
.mnav__text { background: #fff; border-color: #fff; color: var(--navy); }
.mnav__text img, .mnav__tel img { width: 26px; height: 26px; flex: none; }
@media (max-width: 359.98px) { .mnav__text, .mnav__tel { padding: 0 11px; gap: 7px; font-size: 19px; } }
/* a short screen (a small iPhone with Safari's bars, a phone on its side): the foot scrolls with the list, so the last
   group of links is never hidden behind it */
@media (max-height: 619.98px) { .mnav__foot { position: static; } }
html.is-locked, html.is-locked body { overflow: hidden; }
@media (min-width: 1180px) { .mnav { display: none; } }

/* 10. GOOGLE REVIEW BADGE (always a link, gold star) ----------------------- */
.gbadge {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 8px; border-radius: var(--r-pill);
  background: #fff; color: var(--navy); text-decoration: none; box-shadow: var(--sh-2);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.gbadge__star { width: 34px; height: 34px; flex: none; transform: rotate(-10deg); transition: transform .5s var(--ease); filter: drop-shadow(0 2px 2px rgba(160, 96, 0, .35)); }
.gbadge__num { font: 800 28px/1 var(--f-display); letter-spacing: 0; }
.gbadge__txt { font: 600 14px/1.15 var(--f-text); text-align: left; }
.gbadge__txt u { display: block; font-weight: 500; font-size: 12.5px; color: var(--ink-500); text-decoration-color: var(--gold-600); text-underline-offset: 2px; margin-top: 2px; }
@media (hover: hover) { .gbadge:hover { transform: translateY(-2px); box-shadow: var(--sh-3); } }
@media (hover: hover) { .gbadge:hover .gbadge__star { transform: rotate(62deg) scale(1.08); } }
.gbadge--sm { padding: 4px 12px 4px 6px; gap: 7px; }
.gbadge--sm .gbadge__star { width: 26px; height: 26px; }
.gbadge--sm .gbadge__num { font-size: 22px; }
.gbadge--sm .gbadge__txt { font-size: 12.5px; }
.gbadge--sm .gbadge__txt u { display: none; }
.gbadge--dark { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 193, 47, .7); }
.gbadge--dark .gbadge__txt u { color: var(--on-navy-soft); }

/* 11. COVER (the one hero system) ----------------------------------------- */
/* Children of .cover, in DOM order: scene, arc (desktop), swoosh (stacked), head (h1), seal, builder, note, review badge.
   (The seal comes before the builder so a keyboard reaches it first; z-index keeps it on the card's corner.) */
/* THE FIRST SCREEN. The card starts --band under the headline band. --band is the designed distance
   (--band-max: just under the mascot's boots) unless the screen is too short for the whole card, in which case
   the card is pulled up over the mascot's legs until its bottom edge is 12px inside the small viewport, and
   never further than --band-min (his face and the stickers stay clear). CSS cannot read the headline band's
   height, so it is worked out from the line counts: set --kw-lines and --title-lines on a cover whose
   keyword line or title wraps differently from its recipe. */
.cover {
  --cover-lawn: var(--lawn);
  --kw-lines: 2; --title-lines: 2;
  --cover-head: calc(25px + var(--kw-lines) * 1.2 * clamp(13px, 3.5vw, 16px) + var(--title-lines) * .96 * clamp(35px, 10.2vw, 64px));
  --card-h: 368px; --band-max: 73.6vw; --band-min: 31vw; --band: var(--band-max);
  position: relative; isolation: isolate; display: grid;
  grid-template-columns: var(--g) minmax(0, 1fr) var(--g);
  background: var(--cover-lawn);
  padding-bottom: 46px;
}
@supports (height: 100svh) {
  .cover { --band: clamp(var(--band-min), calc(100svh - var(--hdr-h) - 12px - var(--card-h) - var(--cover-head)), var(--band-max)); }
}
.cover--home { --title-lines: 1; }                                   /* "More fetch. Less mess." is one line from 360px */
@media (max-width: 359.98px) { .cover--home { --title-lines: 2; } }
@media (min-width: 540px) { .cover--home { --kw-lines: 1; } }
.cover > * { grid-column: 2; min-width: 0; }
.cover__head {
  grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 2;
  background: var(--navy); color: #fff; padding: 12px var(--g) 8px;
}
.cover__title { color: #fff; font-size: clamp(35px, 10.2vw, 64px); line-height: .96; }
.cover__kw {
  display: block; font: 700 clamp(13px, 3.5vw, 16px)/1.2 var(--f-display); letter-spacing: .13em; text-transform: uppercase;
  color: var(--cyan-200); margin-bottom: 5px; text-wrap: balance;
}
.cover__line { white-space: nowrap; }
.cover__line--pop { color: var(--cyan); }
.cover__scene { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 1; }
.cover__scene img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 0; }
.cover__scene::after { /* lets the lawn in the photo run into the lawn-coloured field below it */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px;
  background: linear-gradient(180deg, rgba(104, 133, 21, 0), var(--cover-lawn));
}
.cover__swoosh { grid-column: 1 / -1; grid-row: 2; align-self: start; width: 100%; height: clamp(22px, 7vw, 54px); z-index: 2; margin-top: -1px; }
.cover__arc { display: none; }
.cover__builder {
  grid-row: 2 / 4; align-self: start; z-index: 3; position: relative;
  margin-top: var(--band);   /* at most 73.6vw: the card starts just under the boots (48% down the portrait scene) */
}
.cover__note {
  grid-row: 4; z-index: 3; margin-top: 12px; padding: 14px 16px; border-radius: 18px; background: var(--navy); color: var(--on-navy-soft);
}
.cover__lead { font-size: 15.5px; line-height: 1.5; color: #fff; }
.cover__promise { display: flex; gap: 9px; align-items: flex-start; margin-top: 9px; font: 600 14.5px/1.4 var(--f-text); color: var(--cyan-200); text-wrap: balance; }
.cover__promise img { width: 20px; height: 20px; flex: none; margin-top: 1px; }
/* phone: the two cover stickers flank the head of the mascot on open sky */
.cover__seal { grid-row: 2; align-self: start; justify-self: start; z-index: 3; --seal: 78px; margin: min(clamp(34px, 11vw, 60px), calc(var(--band) - var(--seal) - 8px)) 0 0 -4px; }
.cover__seal .seal__txt { font-size: 14px; }
.cover > .gbadge {
  grid-row: 2; align-self: start; justify-self: end; z-index: 3; margin: clamp(30px, 9.4vw, 60px) -4px 0 0;
  display: grid; grid-template-columns: auto auto; gap: 0 8px; padding: 6px 12px 6px 7px; border-radius: 18px;
}
.cover > .gbadge .gbadge__star { grid-row: 1 / span 2; width: 30px; height: 30px; }
.cover > .gbadge .gbadge__num { font-size: 22px; line-height: 1; }
.cover > .gbadge .gbadge__txt { font-size: 12.5px; }
.cover > .gbadge .gbadge__txt u { display: none; }

/* tablet: the wide scene, card on the open lawn at the left */
@media (min-width: 700px) {
  .cover {
    --cover-lawn: #8ca22c; padding-bottom: 84px;
    --kw-lines: 1; --title-lines: 1;
    --cover-head: calc(41px + var(--kw-lines) * 19.2px + var(--title-lines) * 61.44px);
    --card-h: 520px; --band-max: calc(17vw - .34 * var(--g)); --band-min: 20px;
  }
  .cover__head { padding: 22px var(--g) 14px; }
  .cover__scene img { aspect-ratio: 16 / 9; object-position: 100% 50%; }
  .cover__scene::after { background: linear-gradient(180deg, rgba(140, 162, 44, 0), var(--cover-lawn)); height: 40px; }
  .cover__builder { justify-self: start; width: min(470px, 60%); }
  .cover__note { grid-row: 2 / 4; align-self: end; justify-self: end; width: calc(40% - 30px); margin: 0; }
  .cover__seal { --seal: 104px; justify-self: start; margin: 0 0 0 min(430px, calc(60% - 40px)); translate: 0 calc(var(--band) + 38px); }
  .cover__seal .seal__txt { font-size: 19px; }
  .cover > .gbadge { margin-top: 62px; }
}

/* desktop: the full cover. Navy arc with the cover lines, the builder as the star, the mascot at the right */
@media (min-width: 1240px) {
  .cover {
    --cover-h: clamp(608px, calc(100svh - var(--hdr-h) - 28px), 744px);
    --gut: max(var(--g), calc((100% - var(--maxw)) / 2));
    --copy-w: clamp(340px, 27vw, 390px);
    grid-template-columns: var(--gut) var(--copy-w) 22px clamp(410px, 31.5vw, 450px) minmax(0, 1fr) var(--gut);
    grid-template-rows: 1fr auto auto auto 1.2fr 44px;   /* the last 44px is where the facts bar sweeps up */
    min-height: var(--cover-h); padding-bottom: 0; background: var(--sky);   /* min-height: with a reader's own text spacing the cover grows instead of cutting its last lines (WCAG 1.4.12) */
  }
  .cover__scene { position: absolute; inset: 0; z-index: 0; grid-column: 1 / -1; grid-row: 1 / -1; }
  .cover__scene::after { content: none; }
  .cover__scene img { width: 100%; height: 100%; aspect-ratio: auto; object-position: 100% 60%; }
  .cover__swoosh { display: none; }
  .cover__arc {
    display: block; position: absolute; left: 0; top: 0; height: 100%; z-index: 1; grid-column: 1 / -1; grid-row: 1 / -1;
    width: calc(max(var(--g), (100% - var(--maxw)) / 2) + var(--copy-w) + 122px);
  }
  .cover__head { grid-column: 2; grid-row: 2; background: none; padding: 0; }
  .cover__title { font-size: clamp(64px, 5.4vw, 80px); line-height: .9; }
  .cover__kw { font-size: 16px; margin-bottom: 14px; }
  .cover__line { display: block; width: fit-content; }
  .cover__note { grid-column: 2; grid-row: 3; align-self: auto; justify-self: stretch; width: auto; background: none; padding: 0; margin: 18px 0 0; border-radius: 0; max-width: 372px; }
  .cover__lead { font-size: 18px; }
  .cover__promise { font-size: 15px; margin-top: 14px; }
  .cover > .gbadge {
    grid-column: 2; grid-row: 4; justify-self: start; margin: 22px 0 0;
    display: inline-flex; gap: 10px; padding: 6px 16px 6px 8px; border-radius: var(--r-pill);
  }
  .cover > .gbadge .gbadge__star { width: 34px; height: 34px; }
  .cover > .gbadge .gbadge__num { font-size: 28px; }
  .cover > .gbadge .gbadge__txt { font-size: 14px; }
  .cover > .gbadge .gbadge__txt u { display: block; }
  .cover__builder { grid-column: 4; grid-row: 1 / 6; align-self: center; width: auto; margin-top: 0; justify-self: stretch; }
  .cover__seal { grid-column: 4; grid-row: 1 / 6; align-self: center; justify-self: end; --seal: 112px; margin: 0 -50px 0 0; translate: 0 -226px; }
  .cover .ppb { --ppb-head-clear: 50px; }
  .cover__seal .seal__txt { font-size: 20px; }
}
@media (min-width: 1240px) and (max-height: 780px) {
  .cover__title { font-size: 64px; }
  .cover__lead { font-size: 16.5px; }
  .cover__kw { margin-bottom: 10px; }
}

/* 12. FACTS BAR ------------------------------------------------------------ */
/* its bottom padding is the section rhythm less the difference between a full curve and the shallow one that follows it,
   so the facts-to-first-section gap is the same 128px (85px) as every other join */
.sec.facts { --sec-bg: var(--cream); --edge-next: clamp(18px, 2.4vw, 34px); position: relative; z-index: 2; padding-block: 8px calc(var(--sec-gap) - 1px + var(--edge-next) - var(--sec-pad)); }
.sec.facts[data-edge] { --edge-h: clamp(26px, 3.6vw, 46px); padding-top: 0; }
.sec.facts[data-edge] > .wrap:first-of-type { padding-top: calc(var(--edge-h) * .7); }
.facts__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 20px; }
@media (min-width: 560px) { .facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; } }
.fact { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.fact__ico { width: 50px; height: 50px; grid-row: 1 / span 2; align-self: center; }
.fact__val { font: 800 23px/1 var(--f-display); color: var(--navy); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.fact__lbl { font: 500 14.5px/1.35 var(--f-text); color: var(--ink-500); margin-top: 3px; }
.fact__val { font-size: 25px; }
@media (hover: hover) { a.fact:hover .fact__val { color: var(--blue-700); } }
a.fact .fact__lbl u { text-decoration-color: var(--gold-600); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (min-width: 700px) {
  .fact__ico { width: 56px; height: 56px; }
  .fact__val { font-size: 28px; }
  .fact__lbl { font-size: 14.5px; }
}
@media (min-width: 1100px) {
  .facts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .fact { column-gap: 16px; }
  .fact__ico { width: 64px; height: 64px; }
  .fact__val { font-size: 30px; }
}
/* from 560px facts share a row: every text block starts at the top of its row and the sticker keeps the place it has
   beside a two-line label, so the values of a row sit on one line whether a label takes one, two or three lines */
@media (min-width: 560px) {
  .fact { align-items: start; align-content: start; }
  .fact__ico { align-self: start; margin-top: 9px; }
}
@media (min-width: 700px) { .fact__ico { margin-top: 7px; } }
@media (min-width: 1100px) { .fact__ico { margin-top: 4px; } }
.fact__lbl { text-wrap: pretty; }                              /* no label ends on one short word */
.fact__lbl--asis { text-wrap: wrap; }                          /* the team fact keeps its approved lines ("…trained / to our property-care / standards"): balancing it strands "to our" */

/* 13. FEATURE CARDS ("cover cards") --------------------------------------- */
.fcard {
  --plate: var(--sky-200);
  position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--r-card);
  box-shadow: var(--sh-1); padding: 0 22px 24px; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.fcard__plate {
  position: relative; height: 96px; margin: 0 -22px; border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden;
  background: var(--plate); color: var(--navy);
}
.fcard__plate::before { /* the arc: white sweeps up from the left */
  content: ""; position: absolute; left: -12%; right: -30%; bottom: -74px; height: 110px; border-radius: 50%; background: #fff;
}
.fcard__ico { position: absolute; left: 20px; top: 34px; width: 84px; height: 84px; z-index: 1; }
.fcard__title { margin-top: 34px; }
.fcard__text { margin-top: 8px; color: var(--ink-700); font-size: 16px; line-height: 1.55; }
.fcard__foot { margin-top: auto; padding-top: 16px; }
.fcard--gold { --plate: var(--gold-300); }
.fcard--grass { --plate: #bfe89a; }
.fcard--cyan { --plate: #8fd8ff; }
.fcard--navy { --plate: var(--navy); }
.fcard--navy .fcard__plate { color: #fff; }
@media (hover: hover) { .fcard.tilts:hover, a.fcard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); } }
a.fcard { text-decoration: none; color: inherit; }            /* a whole-card link is never underlined */
/* row version for two-across grids: plate down the left side, words beside it */
@media (min-width: 620px) {
  .fcard--row { display: grid; grid-template-columns: 128px minmax(0, 1fr); padding: 0; overflow: hidden; min-height: 148px; }
  .fcard--row .fcard__plate { grid-column: 1; grid-row: 1; height: auto; margin: 0; border-radius: 0; }
  .fcard--row .fcard__plate::before { left: auto; right: -78px; top: -18%; bottom: -18%; width: 110px; height: auto; }
  .fcard--row .fcard__ico { left: 22px; top: 50%; margin-top: -40px; width: 80px; height: 80px; }
  .fcard--row .fcard__body { grid-column: 2; align-self: center; padding: 20px 24px 20px 8px; }
  .fcard--row .fcard__title { margin-top: 0; }
}

/* 14. FRAMES, SPLIT ART, RECEIPTS ----------------------------------------- */
/* arc frame: one big swept corner, a white print border, an optional sticker caption */
.frame { position: relative; }
.frame__img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 44% 28px 28px 28px / 36% 28px 28px 28px;
  border: 6px solid #fff; box-shadow: var(--sh-2); background: var(--sky-200);
}
.frame--flip .frame__img { border-radius: 28px 44% 28px 28px / 28px 36% 28px 28px; }
.frame--wide .frame__img { aspect-ratio: 4 / 3; }
.frame::before { /* colour disc behind, peeking out: a cover field, not a blob */
  content: ""; position: absolute; z-index: -1; width: 58%; aspect-ratio: 1; border-radius: 50%; right: -5%; bottom: -6%; background: var(--frame-disc, var(--gold));
}
.frame--flip::before { right: auto; left: -5%; }
.frame__cap {
  position: absolute; left: 18px; bottom: 18px; max-width: min(78%, 320px); padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: var(--sh-2);
  font: 600 14px/1.35 var(--f-text); color: var(--ink-700); display: flex; gap: 10px; align-items: center;
}
.frame__cap img { width: 30px; height: 30px; flex: none; }
/* phone: the caption is a sticker on the picture's bottom edge, so it never covers the mascot standing in it */
@media (max-width: 699.98px) {
  .frame__cap { position: relative; z-index: 1; left: auto; bottom: auto; max-width: none; width: fit-content; margin: -18px auto 0; text-align: left; }
}
.frame .seal { position: absolute; right: -10px; top: -14px; }
.split .frame { isolation: isolate; }

/* visit receipts: real photos, small, uniformly framed, each labelled as real */
.receipts { display: grid; gap: 22px var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .receipts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.receipts--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .receipts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.receipt {
  position: relative; background: #fff; padding: 8px 8px 0; border-radius: 12px 12px 0 0;
  transform: rotate(var(--tilt, -1.5deg)); transition: transform .3s var(--ease);
  filter: drop-shadow(0 2px 2px rgba(6, 38, 68, .1)) drop-shadow(0 12px 16px rgba(6, 38, 68, .14));
  margin-bottom: 9px;
}
.receipt:nth-child(even) { --tilt: 1.3deg; }
@media (hover: hover) { .receipt:hover { transform: rotate(0deg) translateY(-3px); } }
.receipt::after { /* torn receipt edge */
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 9px;
  background: conic-gradient(from 135deg at 50% 0, #fff 90deg, transparent 0) 0 0 / 14px 9px repeat-x;
}
.receipt__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--sky-050); }
.receipt__tag { position: absolute; left: 14px; top: 14px; }
.receipt__body { padding: 10px 6px 12px; }
.receipt__title { font: 700 15px/1.25 var(--f-text); color: var(--navy); display: flex; gap: 7px; align-items: flex-start; }
.receipt__title img { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.receipt__text { font-size: 14px; line-height: 1.45; color: var(--ink-500); margin-top: 3px; }

/* 15. ICON LIST ------------------------------------------------------------ */
.ilist { display: grid; gap: 14px; }
.ilist li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; }
.ilist img { width: 48px; height: 48px; }
.ilist b, .ilist h3 { display: block; font: 700 17px/1.25 var(--f-text); letter-spacing: 0; text-wrap: wrap; color: var(--navy); }   /* h3 when the titles belong in the page's outline (same look) */
.ilist span { display: block; font-size: 15px; line-height: 1.45; color: var(--ink-500); margin-top: 1px; }
.sec--navy .ilist b, .sec--navy .ilist h3 { color: #fff; }
.sec--navy .ilist span { color: var(--on-navy-soft); }
.ilist--checks li { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.ilist--checks img { width: 22px; height: 22px; margin-top: 2px; }
.ilist--checks b, .ilist--checks h3 { font-weight: 600; font-size: 16px; }

/* 16. PRICE CARDS (the three "from" prices) -------------------------------- */
.price { font-family: var(--f-display); font-weight: 800; color: var(--navy); line-height: .82; white-space: nowrap; display: inline-flex; align-items: flex-start; }
.price__cur { font-size: .5em; margin-top: .1em; margin-right: .04em; }
.price__int { font-size: 1em; letter-spacing: -.01em; }
.price__cents { font-size: .5em; margin-top: .1em; margin-left: .03em; }
.pcard {
  --plate: var(--sky-200);
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border-radius: 28px;
  box-shadow: var(--sh-1); padding: 0 22px 26px; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pcard__plate { position: relative; align-self: stretch; height: 104px; margin: 0 -22px; border-radius: 28px 28px 0 0; background: var(--plate); color: var(--navy); overflow: hidden; }
.pcard__plate::before { content: ""; position: absolute; left: -20%; right: -20%; bottom: -92px; height: 130px; border-radius: 50%; background: #fff; }
.pcard__ico { width: 84px; height: 84px; margin-top: -62px; position: relative; z-index: 1; }
.pcard__name { margin-top: 10px; }
.pcard__fit { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--ink-500); min-height: 2.9em; }
.pcard__from { margin-top: 14px; font: 700 14px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-700); }
.pcard .price { font-size: 76px; margin-top: 6px; }
.pcard__unit { font: 600 14.5px/1.2 var(--f-text); color: var(--ink-500); margin-top: 8px; }
.pcard__cta { margin-top: 18px; }
.pcard .ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 2; }
@media (hover: hover) { .pcard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); } }
.pcard--gold { --plate: var(--gold-300); }
.pcard--grass { --plate: #bfe89a; }
/* the featured plan is the navy cover */
.pcard--star { background: var(--navy); color: var(--on-navy-soft); box-shadow: var(--sh-3); }
.pcard--star .pcard__plate { background: var(--cyan); }
.pcard--star .pcard__plate::before { background: var(--navy); }
.pcard--star .pcard__name, .pcard--star .price { color: #fff; }
.pcard--star .price .price__cents, .pcard--star .price .price__cur { color: var(--cyan); }
.pcard--star .pcard__fit, .pcard--star .pcard__unit { color: var(--on-navy-soft); }
.pcard--star .pcard__from { color: var(--cyan); }
@media (min-width: 900px) { .pcard--star { margin-block: -14px; padding-bottom: 40px; } .pcard--star .pcard__plate { height: 118px; } }
.pnote { margin-top: 22px; font-size: 14px; color: var(--ink-700); text-align: center; }   /* ink-700: the note sits in the featured card's shadow, where ink-500 measured 4.19:1 */

/* 17. PRICE BOARD (the designed price list) -------------------------------- */
.pboard { position: relative; display: grid; gap: 22px; }
.pboard__rail { display: none; }
.pplan {
  --plate: var(--sky-200);
  position: relative; background: #fff; border-radius: 28px; box-shadow: var(--sh-1); padding: 0 0 12px; overflow: visible;
}
.pplan__top { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 18px 18px 16px; background: var(--plate); border-radius: 28px 28px 0 0; overflow: hidden; }
.pplan__top::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -34px; height: 44px; border-radius: 50%; background: #fff; }
.pplan__ico { width: 68px; height: 68px; grid-row: 1 / span 2; position: relative; z-index: 1; }
.pplan__name { font: 800 27px/1 var(--f-display); color: var(--navy); }
.pplan__fit { grid-column: 2; font: 500 13.5px/1.3 var(--f-text); color: var(--ink-700); }
.pplan__from { grid-column: 3; grid-row: 1 / span 2; text-align: right; font: 700 12.5px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.pplan__from .price { display: flex; font-size: 40px; margin-top: 4px; }
.pplan__rows { padding: 6px 18px 0; }
.prow { display: flex; align-items: baseline; gap: 8px; min-height: 46px; padding: 11px 0 9px; border-bottom: 2px dotted #c9dcea; }
.prow:last-child { border-bottom: 0; }
.prow__dogs { font: 600 16px/1.2 var(--f-text); color: var(--navy); white-space: nowrap; }
.prow__lead { flex: 1 1 auto; }
.prow__amt { font: 800 25px/1 var(--f-display); color: var(--navy); white-space: nowrap; }
.prow__amt small { font: 600 12.5px/1 var(--f-text); color: var(--ink-500); margin-left: 4px; }
.prow--na .prow__dogs { color: var(--ink-500); font-weight: 500; }
.prow--na .prow__amt { font: 500 13.5px/1.25 var(--f-text); color: var(--ink-500); text-align: right; white-space: normal; max-width: 60%; }
.prow__pack, .prow__go img { display: none; }
.prow__no, .prow__go { display: block; }
.prow__go { font-weight: 700; color: var(--ink-700); }
.prow.is-yours { margin-inline: -10px; padding-inline: 10px; background: var(--gold-050); border-radius: 12px; border-bottom-color: transparent; box-shadow: inset 0 0 0 2px var(--gold); }
.prow.is-yours .prow__dogs::after { content: "Your pack"; margin-left: 8px; padding: 2px 8px 1px; border-radius: 99px; background: var(--navy); color: #fff; font: 700 12.5px/1.3 var(--f-display); letter-spacing: .1em; text-transform: uppercase; vertical-align: 2px; }
.pplan .ribbon { position: absolute; top: -12px; left: 22px; z-index: 2; }
.pplan--star { background: var(--navy); box-shadow: var(--sh-3); }
.pplan--star .pplan__top { background: var(--cyan); }
.pplan--star .pplan__fit { color: var(--navy); font-weight: 600; }
.pplan--star .pplan__top::after { background: var(--navy); }
.pplan--star .prow { border-bottom-color: rgba(255, 255, 255, .22); }
.pplan--star .prow__dogs, .pplan--star .prow__amt { color: #fff; }
.pplan--star .prow__amt small, .pplan--star .prow--na .prow__dogs, .pplan--star .prow--na .prow__amt { color: var(--on-navy-soft); }
.pplan--star .prow.is-yours { background: rgba(255, 193, 47, .16); }
.pplan--gold { --plate: var(--gold-300); }
.pplan--grass { --plate: #bfe89a; }
.pboard__custom {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 16px; align-items: center; padding: 16px 18px; border-radius: 22px;
  background: var(--cream); box-shadow: inset 0 0 0 2px var(--gold-300);
}
.pboard__custom img { width: 56px; height: 56px; grid-row: 1 / span 2; }
.pboard__custom b { font: 800 24px/1.05 var(--f-display); }
.pboard__custom span { font-size: 15px; line-height: 1.45; }
.pboard__custom .btn { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
/* desktop: three plan covers on one shared ladder of dog counts */
@media (min-width: 1000px) {
  .pboard { grid-template-columns: 168px repeat(3, minmax(0, 1fr)); gap: 0 20px; align-items: start; }
  .pboard__rail { display: block; padding-top: var(--pplan-top, 124px); }
  .pboard__rail li { display: flex; align-items: center; gap: 10px; height: 52px; font: 700 17px/1.2 var(--f-text); color: var(--navy); border-bottom: 2px dotted #c9dcea; }
  .pboard__rail li:last-child { border-bottom: 0; }
  .pboard__rail li.pboard__rail-head { border-bottom: 0; height: auto; }
  .pboard__rail li.is-yours { color: var(--navy); }
  .pboard__rail li.is-yours::after { content: "Your pack"; padding: 2px 8px 1px; border-radius: 99px; background: var(--navy); color: #fff; font: 700 12.5px/1.3 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
  .pboard__rail-head { position: absolute; left: 0; top: 34px; display: flex; align-items: center; gap: 10px; font: 800 24px/1 var(--f-display); color: var(--navy); }
  .pboard__rail-head img { width: 52px; height: 52px; }
  .pplan__top { grid-template-columns: 64px minmax(0, 1fr); height: 124px; padding: 14px 18px 22px; }
  .pplan__ico { width: 62px; height: 62px; }
  .pplan__from { position: absolute; right: 18px; top: 16px; }
  .pplan__from .price { font-size: 34px; }
  .pplan__name { padding-right: 86px; align-self: end; font-size: 26px; }
  .pplan__fit { padding-right: 20px; align-self: start; }
  .pplan__rows { padding: 0 18px; }
  .prow { height: 52px; min-height: 0; padding: 0; align-items: center; justify-content: center; }
  .prow__dogs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prow__lead { display: none; }
  .prow.is-yours .prow__dogs::after { content: none; }
  /* A plan that stops at 4 or 5 dogs ends there. Under its last price is ONE small pointer card (the pack,
     who the plan is for, an arrow to the plan that fits), so a column is as tall as the packs it covers. */
  .prow--na {
    height: auto; margin: 12px 0 2px; padding: 10px 12px 11px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1px 10px;
    align-items: center; justify-content: stretch; text-align: left; border: 2px dotted #b9d0e2; border-radius: 14px;
  }
  .prow--na .prow__pack { display: block; width: 44px; height: 44px; grid-row: 1 / span 2; }
  .prow--na .prow__dogs { position: static; width: auto; height: auto; overflow: visible; clip-path: none; align-self: end; font: 700 15.5px/1.2 var(--f-text); color: var(--navy); }
  .prow--na .prow__amt { grid-column: 2; align-self: start; max-width: none; text-align: left; font: 500 13px/1.35 var(--f-text); color: var(--ink-500); }
  .prow--na .prow__no { display: none; }
  .prow--na .prow__go { display: flex; align-items: center; gap: 6px; margin-top: 4px; font: 700 14px/1.2 var(--f-text); color: var(--navy); }
  .prow--na .prow__go img { display: block; width: 18px; height: 18px; flex: none; transform: rotate(180deg); }   /* points at the plans to the left */
  .prow--na.is-yours { margin-inline: 0; padding-inline: 12px; border: 2px solid var(--gold); box-shadow: none; }
  .pplan--star .prow--na { border-color: rgba(255, 255, 255, .42); }
  .pplan--star .prow--na .prow__dogs, .pplan--star .prow--na .prow__go { color: #fff; }
  .pplan--star .prow--na .prow__amt { color: var(--on-navy-soft); }
  /* the lit row in the navy plan is solid gold with navy figures (a gold tint over navy turns muddy) */
  .pplan--star .prow.is-yours { background: var(--gold); box-shadow: none; }
  .pplan--star .prow.is-yours .prow__amt, .pplan--star .prow.is-yours .prow__dogs, .pplan--star .prow--na.is-yours .prow__go { color: var(--navy); }
  .pplan--star .prow--na.is-yours .prow__amt { color: #3a2f08; }
  .pplan--star { margin-top: -12px; padding-bottom: 24px; }
  .pplan--star .pplan__top { height: 136px; padding-top: 26px; }
  .pboard__custom { grid-column: 1 / -1; margin-top: 22px; grid-template-columns: 64px minmax(0, 1fr) auto; }
  .pboard__custom img { width: 64px; height: 64px; }
  .pboard__custom .btn { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
}
/* one-time ticket: the price as a coupon, never a table row */
.ticket {
  position: relative; display: grid; gap: 14px 22px; align-items: center; padding: 22px 22px 22px 26px; border-radius: 22px; background: var(--gold); color: var(--navy);
  -webkit-mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.ticket__ico { width: 72px; height: 72px; }
.ticket__name { font: 800 30px/1 var(--f-display); }
.ticket__text { font-size: 15.5px; line-height: 1.45; color: #3a2f08; margin-top: 4px; }
.ticket .price { font-size: 64px; }
.ticket__unit { font: 700 14px/1.2 var(--f-text); margin-top: 4px; }
@media (min-width: 800px) {
  .ticket { grid-template-columns: auto minmax(0, 1fr) auto auto; padding: 24px 34px; }
  .ticket__price { padding-left: 26px; border-left: 3px dotted rgba(6, 38, 68, .35); }
}

/* 18. STEPS ---------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 26px var(--gap); grid-template-columns: minmax(0, 1fr); position: relative; }
/* a row of steps is as tall as its longest step: every step packs its rows at the top (align-content), so the
   number, icon and title of the whole row share one line however many lines each text takes */
.step { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 16px; align-items: start; align-content: start; }
.step__num {
  position: relative; width: 60px; height: 60px; display: grid; place-items: center; grid-row: 1 / span 2;
  font: 800 30px/1 var(--f-display); color: var(--navy);
}
.step__num img { position: absolute; inset: 0; width: 100%; height: 100%; }
.step__num span { position: relative; margin-top: -3px; }
.step__ico { position: absolute; left: 34px; top: 34px; width: 38px; height: 38px; z-index: 1; }
.step__title { align-self: end; }
.step__text { font-size: 15.5px; line-height: 1.5; }
.step::before { /* dotted route between steps, never an arrow */
  content: ""; position: absolute; left: 29px; top: 76px; bottom: -20px; border-left: 3px dotted var(--cyan);
}
.step:last-child::before { content: none; }
@media (min-width: 620px) and (max-width: 1099px) {
  .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--4 .step::before { content: none; }
}
@media (min-width: 900px) {
  .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .steps--3 .step, .steps--4 .step { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 6px; }
  .steps--3 .step__num, .steps--4 .step__num { grid-row: auto; width: 72px; height: 72px; font-size: 36px; margin-bottom: 20px; }
  .steps--3 .step__ico, .steps--4 .step__ico { left: 46px; top: 40px; width: 46px; height: 46px; }
  .steps--3 .step::before, .steps--4 .step::before { left: 108px; right: -8px; top: 36px; bottom: auto; border-left: 0; border-top: 3px dotted var(--cyan); }
}
@media (min-width: 900px) and (max-width: 1099px) { .steps--4 .step::before { content: none; } }
.sec--navy .step__num { color: var(--navy); }
.sec--navy .step__text { color: var(--on-navy-soft); }

/* 19. NOTICE and "HOW THIS WORKS" ------------------------------------------ */
.notice {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; align-items: start; align-content: start;
  padding: 18px 20px; border-radius: 20px; background: var(--cream); box-shadow: inset 0 0 0 2px var(--gold-300); overflow: hidden;
}
.notice::before { content: ""; position: absolute; left: -46px; top: -46px; width: 120px; height: 120px; border-radius: 50%; background: var(--gold-300); }
.notice__ico { position: relative; width: 52px; height: 52px; grid-row: 1 / span 2; }
.notice__title { font: 800 23px/1.1 var(--f-display); color: var(--navy); align-self: center; }
.notice__text { grid-column: 2; font-size: 15.5px; line-height: 1.5; }
.notice--sky { background: var(--sky-050); box-shadow: inset 0 0 0 2px var(--sky-200); }
.notice--sky::before { background: var(--sky-200); }

.explain { border-radius: 24px; background: #fff; box-shadow: var(--sh-1); overflow: hidden; }
.explain > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 20px;
  background: var(--gold); color: var(--navy);
}
.explain > summary::-webkit-details-marker { display: none; }
.explain__ico { width: 48px; height: 48px; }
.explain__title { font: 800 24px/1.05 var(--f-display); }
.explain__title small { display: block; font: 600 13.5px/1.3 var(--f-text); margin-top: 3px; }
.explain__chev { width: 22px; height: 22px; transition: transform .25s var(--ease); }
.explain[open] .explain__chev { transform: rotate(180deg); }
.explain__body { padding: 8px 20px 20px; }
.explain__body dl { display: grid; }
.explain__body dt { font: 700 16.5px/1.3 var(--f-text); color: var(--navy); padding-top: 14px; display: flex; gap: 10px; align-items: center; }
.explain__body dt img { width: 22px; height: 22px; flex: none; }
.explain__body dd { font-size: 15.5px; line-height: 1.5; padding: 3px 0 14px 32px; border-bottom: 2px dotted #c9dcea; }
.explain__body dd:last-child { border-bottom: 0; padding-bottom: 0; }
.draft { display: inline-block; margin-left: 8px; padding: 2px 8px 1px; border-radius: 99px; background: #fff; color: var(--navy); font: 700 11px/1.4 var(--f-text); letter-spacing: .06em; text-transform: uppercase; vertical-align: 3px; box-shadow: inset 0 0 0 1.5px var(--navy); }

/* 20. FAQ (one open at a time, one indicator) ------------------------------ */
.faq { display: grid; gap: 12px; max-width: 860px; margin-inline: auto; }
.faq__item { background: #fff; border-radius: 20px; box-shadow: var(--sh-1); overflow: hidden; transition: box-shadow .2s; }
.faq__q { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px minmax(0, 1fr) 30px; gap: 14px; align-items: center; padding: 12px 18px 12px 14px; min-height: 68px; }
.faq__q::-webkit-details-marker { display: none; }
.faq__ico { width: 42px; height: 42px; }
.faq__q h3 { font: 700 18px/1.3 var(--f-text); letter-spacing: 0; color: var(--navy); }
.faq__chev { width: 26px; height: 26px; justify-self: end; transition: transform .25s var(--ease); }
.faq__item[open] { box-shadow: var(--sh-2), inset 5px 0 0 var(--cyan); }
.faq__item[open] .faq__chev { transform: rotate(180deg); }
@media (hover: hover) { .faq__q:hover h3 { color: var(--blue-700); } }
.faq__a { padding: 0 22px 20px 72px; font-size: 16px; line-height: 1.6; }
.faq__a > * + * { margin-top: .8em; }
@media (max-width: 619px) { .faq__a { padding-left: 18px; } .faq__q { grid-template-columns: 38px minmax(0, 1fr) 26px; gap: 10px; } .faq__ico { width: 36px; height: 36px; } .faq__q h3 { font-size: 16.5px; } }

/* 21. CALL-TO-ACTION BAND -------------------------------------------------- */
.cta {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; background: var(--navy); color: var(--on-navy-soft);
  padding: 34px 24px 0; display: grid; gap: 22px; color-scheme: dark;
}
.cta::before { /* cover arc: a lighter navy circle. Phone: low, behind the art. Desktop: rising from the right. */
  content: ""; position: absolute; z-index: -1; right: -30%; bottom: -14%; width: 130%; aspect-ratio: 1; border-radius: 50%; background: var(--navy-600);
}
.cta::after { content: none; }
@media (min-width: 900px) {
  .cta::before { right: -14%; top: -50%; bottom: auto; width: 60%; }
  .cta::after { /* cyan keyline following the arc */
    content: ""; position: absolute; z-index: -1; right: -15.5%; top: -53%; width: 63%; aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--cyan);
    -webkit-mask: linear-gradient(125deg, #000 34%, transparent 66%); mask: linear-gradient(125deg, #000 34%, transparent 66%);
  }
}
.cta__title { color: #fff; }
.cta__title .pop { display: block; }
.cta__text { margin-top: 12px; max-width: 46ch; color: var(--on-navy-soft); }
.cta .actions { margin-top: 20px; }
.cta > * { min-width: 0; }                                   /* the copy column may shrink: nothing runs under the band's edge */
.cta .kicker { color: var(--cyan); }
.cta .kicker + .cta__title { margin-top: 8px; }
@media (max-width: 619.98px) {                               /* phones: the band's buttons are as wide as the band, like every closing pair */
  .cta .actions { flex-direction: column; align-items: stretch; }
  .cta .actions > .btn { display: flex; width: 100%; padding-inline: 14px; }
}
.cta__fine { margin-top: 16px; font-size: 13.5px; color: var(--on-navy-soft); }
.cta__art { position: relative; justify-self: center; align-self: end; width: min(300px, 78%); margin-bottom: 0; }
.cta__art::before { /* the lawn he sits on */
  content: ""; position: absolute; left: -40%; right: -40%; bottom: -30%; height: 62%; border-radius: 50%; background: linear-gradient(180deg, var(--grass) 0, var(--grass-700) 60%);
}
.cta__art::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 3%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(3, 30, 12, .5), rgba(3, 30, 12, 0)); }
.cta__art img { position: relative; z-index: 1; width: 100%; }
@media (min-width: 900px) {
  .cta { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding: 54px 0 0 56px; gap: 24px; align-items: center; }
  .cta__copy { padding-bottom: 54px; }
  .cta__art { width: min(380px, 92%); justify-self: center; }
}

/* 22. YARD GUIDE CARDS ----------------------------------------------------- */
/* THE RIBBON NEVER SITS ON THE ARTWORK: covers carry lettering and logos in every corner. In the markup it comes
   first (it names the category); on the card it is a tab that hangs from the cover's bottom edge and reads as the
   label above the title, as on the Yard Guide index. On hover it moves with the cover as one piece (its
   transform-origin is the cover's centre: the card is a size container, the cover is 3:2). */
.gcard { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; container-type: inline-size; }
.gcard__cover { position: relative; z-index: 1; order: 1; border-radius: 20px; overflow: hidden; box-shadow: var(--sh-2); transition: transform .3s var(--ease), box-shadow .3s var(--ease); background: var(--sky-050); }
.gcard__cover img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gcard .ribbon { position: relative; z-index: 0; order: 2; align-self: flex-start; margin: -1px 0 0 14px; transition: transform .3s var(--ease); transform-origin: calc(50cqw - 14px) -33.333cqw; }
.gcard__body { order: 3; padding: 12px 4px 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.gcard__title { font: 700 23px/1.12 var(--f-display); letter-spacing: 0; text-wrap: wrap; color: var(--navy); }   /* an h3: the article's title is in the page's outline */
.gcard__text { margin-top: 8px; font-size: 15.5px; line-height: 1.5; }
.gcard__more { margin-top: auto; padding-top: 10px; }
.gcard__more span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 700 19px/1 var(--f-display); color: var(--navy); background: linear-gradient(var(--cyan), var(--cyan)) no-repeat 0 calc(100% - 9px) / calc(100% - 30px) 3px; }
.gcard__more img { width: 20px; height: 20px; transition: transform .2s var(--ease); }
@media (hover: hover) { .gcard:hover .gcard__cover { transform: translateY(-5px) rotate(-1.2deg); box-shadow: var(--sh-3); } }
@media (hover: hover) { .gcard:nth-child(even):hover .gcard__cover { transform: translateY(-5px) rotate(1.2deg); } }
@media (hover: hover) { .gcard:hover .ribbon { transform: translateY(-5px); } }
@media (min-width: 900px) {
  @media (hover: hover) { .gcard:hover .ribbon { transform: translateY(-5px) rotate(-1.2deg); } }
  @media (hover: hover) { .gcard:nth-child(even):hover .ribbon { transform: translateY(-5px) rotate(1.2deg); } }
}
@media (hover: hover) { .gcard:hover .gcard__more img { transform: translateX(4px); } }
@media (hover: hover) { .gcard:hover .gcard__title { color: var(--blue-700); } }

/* 23. AREAS: map + chips --------------------------------------------------- */
.areas { display: grid; gap: 28px var(--gap); align-items: center; }
@media (min-width: 1000px) { .areas { grid-template-columns: repeat(12, minmax(0, 1fr)); } .areas__map { grid-column: 1 / span 6; } .areas__list { grid-column: 8 / span 5; } }
/* Two drawings of the same places (_work/build-map.mjs): the wide one, and a tall one for a plate narrower than
   520px (phones, narrow columns) that names only the linked towns. Labels are 12.5px on a desktop column and
   never under 11px on a 360px phone. */
.map { position: relative; container-type: inline-size; border-radius: 28px; background: linear-gradient(180deg, #d7f0ff 0, #eaf8e0 100%); box-shadow: var(--sh-1), inset 0 0 0 5px #fff; overflow: hidden; }
.map svg { width: 100%; height: auto; }
.map__tall { display: none; }
@container (max-width: 519.98px) { .map__wide { display: none; } .map__tall { display: block; } }
.map text { font-family: var(--f-text); font-weight: 600; font-size: 13.6px; fill: var(--navy); paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round; }
.map .map__big { font-weight: 800; font-size: 16.5px; }
.map .map__soft { font-weight: 500; fill: var(--ink-500); }
.map .map__ring-label { font-size: 13.6px; font-weight: 700; letter-spacing: .1em; fill: var(--blue-700); }
.map__tall text { font-size: 14.5px; }
.map__tall .map__big { font-size: 17.5px; }
.map__tall .map__ring-label { font-size: 14.5px; }
.map__note { position: absolute; left: 14px; bottom: 12px; right: 14px; font: 500 12.5px/1.4 var(--f-text); color: var(--ink-700); background: rgba(255, 255, 255, .86); border-radius: 10px; padding: 6px 10px; }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chips--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 700px) { .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chips--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .chips--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .chips--wide { grid-template-columns: repeat(6, minmax(0, 1fr)); } .chips--wide.chips--9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
.chip {
  display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 12px 6px 8px; border-radius: 14px; background: #fff;
  font: 600 15px/1.15 var(--f-text); color: var(--navy); text-decoration: none; box-shadow: inset 0 0 0 2px var(--line);
  transition: box-shadow .16s, transform .16s var(--ease), background-color .16s;
}
.chip img { width: 24px; height: 24px; flex: none; }
@media (hover: hover) { a.chip:hover { box-shadow: inset 0 0 0 2px var(--cyan); background: var(--cyan-050); transform: translateY(-2px); } }
a.chip u { text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.chip--plain { background: transparent; box-shadow: inset 0 0 0 2px transparent; color: var(--ink-700); font-weight: 500; padding-left: 12px; justify-content: center; border: 2px dotted #b9d0e2; }
.chip--all { background: var(--navy); color: #fff; box-shadow: none; justify-content: center; }
.chip--all u { text-decoration-color: var(--gold) !important; }
@media (hover: hover) { a.chip--all:hover { background: var(--navy-600); box-shadow: none; } }
.chips__label { font: 700 14px/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-700); margin: 18px 0 8px; }
.chips__label:first-child { margin-top: 0; }

/* 24. MASCOT PLACEMENTS: always on something, always a contact shadow ------ */
.stand { position: relative; display: inline-block; isolation: isolate; line-height: 0; }
.stand img { position: relative; z-index: 1; }
.stand::after { /* contact shadow */
  content: ""; position: absolute; z-index: 0; left: 6%; right: 6%; bottom: -1.5%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(3, 25, 45, .42), rgba(3, 25, 45, 0));
}
.stand--mound::before { /* a small rise of lawn */
  content: ""; position: absolute; z-index: 0; left: -34%; right: -34%; bottom: -12%; height: 30%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: linear-gradient(180deg, var(--grass) 0, var(--grass-700) 100%);
}
.stand--mound { margin-bottom: 4%; }
.stand--mound::after { background: radial-gradient(closest-side, rgba(3, 40, 12, .5), rgba(3, 40, 12, 0)); }
/* lawn edge: a strip of ground along the bottom of a section for him to stand on */
.lawn-edge { position: relative; height: 54px; margin-top: -54px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--grass) 0, var(--grass-700) 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 61V34C200 10 420 4 720 16s520 30 720 6V61Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 61V34C200 10 420 4 720 16s520 30 720 6V61Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* peek: head and hands over the top edge of a card. The host is the card. */
.peek-host { position: relative; }
.peek { position: absolute; right: 7%; bottom: 100%; width: clamp(120px, 22%, 190px); margin-bottom: -4.2%; z-index: 2; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(6, 38, 68, .18)); }
.peek--left { right: auto; left: 7%; }
/* lean: against the side of a card */
.lean-host { position: relative; }
.lean { position: absolute; right: 100%; bottom: -8px; width: clamp(120px, 15vw, 190px); margin-right: -22px; z-index: 2; pointer-events: none; }
.lean::after { content: ""; position: absolute; z-index: -1; left: 4%; right: 6%; bottom: -2%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(3, 25, 45, .4), rgba(3, 25, 45, 0)); }

/* 25. FORM CONTROLS -------------------------------------------------------- */
.field { display: grid; gap: 6px; }
.field__label { font: 700 15px/1.3 var(--f-text); color: var(--navy); }
.field__label small { font-weight: 500; color: var(--ink-500); }
.field__input {
  width: 100%; min-height: 52px; padding: 10px 14px; border-radius: 14px; border: 2px solid #6f8ba3; background: #fff; color: var(--navy);
  font: 500 17px/1.3 var(--f-text); transition: border-color .15s, box-shadow .15s; appearance: none;
}   /* edge #6f8ba3: 3.56:1 on white, 3.20:1 on sky (WCAG 1.4.11 asks 3:1 for the edge that shows where a field is) */
.field__input::placeholder { color: #5f7488; opacity: 1; }   /* 4.84:1 on white (WCAG 1.4.3); opacity 1 so Firefox does not fade it */
@media (hover: hover) { .field__input:hover { border-color: var(--blue); } }
.field__input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(24, 174, 245, .28); }
.field__help { font-size: 13.5px; line-height: 1.45; color: var(--ink-500); }
.field__error { display: flex; gap: 7px; align-items: flex-start; font: 600 14px/1.4 var(--f-text); color: #8a2b06; }
.field__error img { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.field.is-invalid .field__input { border-color: #c2410c; background: #fff7f2; }
.field--join { grid-template-columns: minmax(0, 1fr) auto; }
.field--join .field__label, .field--join .field__help, .field--join .field__error { grid-column: 1 / -1; }
.field--join .field__input { border-radius: 14px 0 0 14px; border-right: 0; }
.field--join .btn { border-radius: 0 14px 14px 0; min-height: 52px; }

/* one-tap choices */
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choices--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .choices--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.choice {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 6px 10px; border-radius: 14px;
  border: 2px solid #bcd3e4; background: linear-gradient(180deg, #fff 0, #f4faff 100%); color: var(--navy); font: 700 15.5px/1.15 var(--f-text); text-align: center;
  box-shadow: 0 2px 0 rgba(6, 38, 68, .06); transition: transform .14s var(--ease), border-color .14s, box-shadow .14s, background .14s;
}
.choice img { width: 30px; height: 30px; flex: none; }
@media (hover: hover) { .choice:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(6, 38, 68, .12); } }
.choice[aria-checked="true"], .choice.is-selected { border-color: var(--cyan); background: var(--cyan-050); box-shadow: 0 0 0 3px rgba(24, 174, 245, .3); }
.choice[aria-checked="true"]::after, .choice.is-selected::after {
  content: ""; position: absolute; right: -7px; top: -7px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy) url("../../../assets/brand-icons/pp-service-check.webp") center / 13px no-repeat; box-shadow: 0 0 0 2px #fff;
}
/* checkbox: 26px box inside a 44px row */
.check { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; min-height: 44px; cursor: pointer; font-size: 14.5px; line-height: 1.5; }
.check input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 2px 0 0; cursor: pointer; }
.check__box { width: 26px; height: 26px; margin-top: 2px; border-radius: 8px; border: 2px solid #6f8ba3; background: #fff; display: grid; place-items: center; transition: background .14s, border-color .14s; }
.check__box::after { content: ""; width: 16px; height: 16px; background: url("../../../assets/brand-icons/pp-service-check.webp") center / contain no-repeat; transform: scale(0); transition: transform .18s var(--ease); filter: brightness(0) invert(1); }
.check input:checked + .check__box { background: var(--navy); border-color: var(--navy); }
.check input:checked + .check__box::after { transform: scale(1); }
.check input:focus-visible + .check__box { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) { .check:hover .check__box { border-color: var(--blue); } }

/* 26. FOOTER --------------------------------------------------------------- */
.foot { position: relative; background: var(--deep); color: var(--on-navy-soft); }
/* closing scene: a sunset-gold field with the last cover line sweeps over the approved evening picture */
.foot__scene { position: relative; isolation: isolate; display: grid; background: linear-gradient(180deg, #ffeac0 0, #f9cd86 100%); }
.foot__closer { position: relative; z-index: 2; order: 1; padding-block: 42px 30px; }
.foot__closer .kicker { color: #7a4300; }
.foot__closer h2 { margin-top: 8px; max-width: 13em; }
.foot__closer p { margin-top: 12px; max-width: 40ch; color: #43300f; font-weight: 500; }
.foot__closer .actions { margin-top: 20px; }
.foot__pic {
  position: relative; z-index: 1; order: 2;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 101V9C26 1 62 -2 100 6V101Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 101V9C26 1 62 -2 100 6V101Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.foot__pic img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 96% 100%; }
.foot__keyline { display: none; }
.foot__grass { /* approved navy silhouette: only here, joining the page to the footer */
  position: absolute; z-index: 3; left: 0; right: 0; bottom: -1px; height: 64px;
  background: url("../../../assets/brand/grass.png") left bottom / auto 64px no-repeat; pointer-events: none;
}
@media (min-width: 900px) {
  .foot__scene { min-height: clamp(450px, 38vw, 640px); align-items: center; }
  .foot__pic {
    position: absolute; right: 0; top: 0; bottom: 0; width: 60%;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M6 0H101V100H8C24 72 24 30 6 0Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M6 0H101V100H8C24 72 24 30 6 0Z'/%3E%3C/svg%3E");
  }
  .foot__pic img { width: 100%; height: 100%; aspect-ratio: auto; object-position: 100% 72%; }
  .foot__keyline { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  .foot__closer { padding-block: 56px calc(clamp(64px, 6.8vw, 132px) + 34px); }
  .foot__closer > * { max-width: min(500px, 40%); }
  .foot__grass { height: clamp(64px, 6.8vw, 132px); background-size: 100% 100%; transform: scaleX(-1); }
}
.foot__main { position: relative; overflow: hidden; padding-block: 34px 26px; }
.foot__main::before { /* faint mascot watermark */
  content: ""; position: absolute; right: -60px; bottom: -70px; width: 420px; height: 420px; opacity: .05;
  background: url("../../../assets/brand-icons/pp-mascot-silhouette.webp") center / contain no-repeat; pointer-events: none;
}
.foot__main > * { position: relative; }
.foot__top { display: grid; gap: 26px; }
.foot__blurb { margin-top: 14px; max-width: 40ch; font-size: 15.5px; line-height: 1.55; }
.foot__reach { display: grid; gap: 14px; }
.foot__act { display: grid; gap: 14px; justify-items: start; }
/* TEXT FIRST: the large line is the text link ("Text us", then the number); Call and email follow as the two ways under it */
.foot__txt { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; text-decoration: none; color: #fff; justify-self: start; }
.foot__txt small { font: 700 14px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); width: 100%; }
.foot__txt b { font: 800 clamp(38px, 9.5vw, 54px)/1 var(--f-display); color: #fff; text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 3px; text-underline-offset: 7px; }
@media (hover: hover) { .foot__txt:hover b { text-decoration-color: var(--gold); } }
.foot__ways { display: grid; gap: 10px; }
.foot__way { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: #fff; text-decoration: none; font: 600 16.5px/1.25 var(--f-text); justify-self: start; }
.foot__way u { text-decoration-color: rgba(166, 223, 255, .6); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
@media (hover: hover) { .foot__way:hover u { text-decoration-color: var(--gold); } }
.foot__way .puck { width: 44px; height: 44px; }
.foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px var(--gap); margin-top: 34px; padding-top: 28px; border-top: 2px dotted rgba(166, 223, 255, .28); }
.foot__col--areas { grid-column: 1 / -1; }
.foot__h { font: 700 15px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; }
.foot__links a {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-block: 4px; color: #fff; font: 500 16px/1.3 var(--f-text);
  text-decoration: underline; text-decoration-color: rgba(166, 223, 255, .5); text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
@media (hover: hover) { .foot__links a:hover { text-decoration-color: var(--gold); color: var(--gold-300); } }
.foot__links--areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
@media (max-width: 699.98px) { .foot__links--areas > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }   /* 27 links: "All service areas" closes the list on its own row */
.foot__portal {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 10px; padding: 6px 16px 6px 8px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px rgba(166, 223, 255, .45); color: #fff; text-decoration: none; font: 700 15.5px/1.2 var(--f-text);
}
.foot__portal .puck { width: 34px; height: 34px; box-shadow: none; }
@media (hover: hover) { .foot__portal:hover { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 2px var(--gold); } }
.foot__addr { margin-top: 28px; font-size: 14.5px; line-height: 1.55; }
.foot__addr b { color: #fff; font-weight: 600; }
.foot__legal { margin-top: 22px; padding-top: 18px; border-top: 2px dotted rgba(166, 223, 255, .28); display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; font-size: 13.5px; }
.foot__legal a { color: #fff; text-decoration: underline; text-decoration-color: rgba(166, 223, 255, .5); text-underline-offset: 3px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
.foot__legal-links { display: inline-flex; gap: 18px; }
@media (hover: hover) { .foot__legal a:hover { text-decoration-color: var(--gold); } }
.foot__review { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: #8fb0c9; max-width: 80ch; }
@media (min-width: 700px) {
  .foot__links--areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* phones and tablets: Services and Company sit side by side and share their rows, so a link that takes two lines on
   one side cannot push the two lists out of step (each list is a subgrid of the footer's rows: heading, then six links) */
@media (max-width: 999.98px) {
  @supports (grid-template-rows: subgrid) {
    .foot__col:not(.foot__col--areas) { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 7; row-gap: 0; align-content: start; }
    .foot__col:not(.foot__col--areas) .foot__links { display: grid; grid-template-rows: subgrid; grid-row: 2 / span 6; row-gap: 0; }
    .foot__col:not(.foot__col--areas) .foot__links li { display: flex; align-items: flex-start; }
    .foot__col:not(.foot__col--areas) .foot__links a { align-items: flex-start; padding-block: 12px 8px; }   /* first lines level across the two lists */
    .foot__col--areas { grid-row: 8; }
  }
}
@media (min-width: 1000px) {
  .foot__main { padding-block: 46px 30px; }
  .foot__top { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 40px; align-items: start; }
  .foot__cols { grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6fr); gap: 40px; margin-top: 44px; padding-top: 36px; }
  .foot__col--areas { grid-column: auto; }
  .foot__txt b { font-size: 52px; }
}

/* 27. KIT PAGE SCAFFOLD (kit.html only) ------------------------------------ */
.kit { padding-block: 36px; border-top: 2px dotted #c9dcea; }
.kit__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 22px; }
.kit__label b { font: 700 15px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--navy); padding: 6px 12px 5px; border-radius: 8px; }
.kit__label code { font: 500 13px/1.3 ui-monospace, Consolas, monospace; color: var(--ink-500); }
.kit__label span { font-size: 14px; color: var(--ink-500); flex-basis: 100%; }
.kit__sub { font: 700 13px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-700); margin: 26px 0 12px; }
.kit__sub:first-child { margin-top: 0; }
.kit__row { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center; }
.kit__dark { background: var(--navy); border-radius: 20px; padding: 22px; }
.kit__tint { background: var(--sky-050); border-radius: 20px; padding: 22px; }
.kit__demo { border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--line); }
.kit__demo .sec { padding-block: 44px; }
.kit__demo .sec[data-edge] { padding-top: calc(var(--edge-h) + 30px); }   /* a short demo still clears its own curve */
.kit__demo .sec.facts[data-edge] { padding-top: 0; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.swatch { border-radius: 14px; padding: 34px 10px 8px; font: 600 12px/1.3 var(--f-text); color: var(--navy); box-shadow: inset 0 0 0 1px rgba(6, 38, 68, .12); }
.swatch--dark { color: #fff; }

/* 28. MOTION --------------------------------------------------------------- */
/* Motion is only ever added to content that is already visible. */
@keyframes swash-draw { from { background-size: 0% .3em; } to { background-size: 100% .3em; } }
@keyframes arc-draw { from { stroke-dashoffset: var(--len, 1200); } to { stroke-dashoffset: 0; } }
@keyframes seal-pop { 0% { transform: rotate(-9deg) scale(1); } 40% { transform: rotate(-2deg) scale(1.08); } 100% { transform: rotate(-9deg) scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  html.js .swash.is-drawn { animation: swash-draw .7s var(--ease) both; }
  html.js .cover__arc .cover__keyline { stroke-dasharray: var(--len, 1200); animation: arc-draw 1.1s .15s var(--ease) both; }
  html.js .cover__seal { animation: seal-pop .9s .5s var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
/* PAGES ADDITIONS ----------------------------------------------------------- */
/* Added while building index.html and dog-waste-removal.html. Every piece is in kit.html (28 to 36)
   and uses the same tokens, radii and soft depth as sections 1 to 27. Source: _work/pages-additions.css */

/* 28. HERO RECIPES beyond the homepage -------------------------------------- */
/* .cover--page : service and city pages. There is one 16:9 scene for every screen size (no portrait
   file) and its characters fill the right 45%, so the picture is right-anchored, the builder is a
   little narrower on tablets, and the review badge sits under the note instead of on the sky. */
.cover__line--wrap { white-space: normal; }
.cover--page { --cover-lawn: #5d961f; }
@media (max-width: 1239.98px) {
  .cover--page .cover__scene img { aspect-ratio: 4 / 3; object-position: 100% 50%; }
  .cover--page .cover__scene::after { background: linear-gradient(180deg, transparent, var(--cover-lawn)); }
  .cover--page > .gbadge {
    grid-row: 5; justify-self: start; margin: 12px 0 0;
    display: inline-flex; gap: 10px; padding: 6px 16px 6px 8px; border-radius: var(--r-pill);
  }
  .cover--page > .gbadge .gbadge__star { width: 34px; height: 34px; }
  .cover--page > .gbadge .gbadge__num { font-size: 28px; }
  .cover--page > .gbadge .gbadge__txt { font-size: 14px; }
  .cover--page > .gbadge .gbadge__txt u { display: block; }
}
@media (min-width: 700px) and (max-width: 1239.98px) {
  .cover--page .cover__scene img { aspect-ratio: 16 / 9; }
  .cover--page .cover__builder { width: min(430px, 54%); }
  .cover--page .cover__seal { margin-left: min(390px, calc(54% - 40px)); }
  .cover--page .cover__note { width: calc(46% - 30px); }
  .cover--page > .gbadge { grid-row: 4; justify-self: end; margin-top: 14px; }
}
@media (min-width: 1240px) {
  .cover--page { --copy-w: clamp(300px, 22vw, 390px); }
  .cover--page .cover__title { font-size: clamp(58px, 4.7vw, 76px); }
}
@media (min-width: 1240px) and (max-height: 780px) {
  .cover--page .cover__title { font-size: 58px; }
}

/* .cover--plain : content pages with no builder in the hero (about, reviews, FAQ, welcome, Yard Guide, legal).
   Same arc, same head; the note carries the lead and one or two buttons. */
.cover--plain { background: var(--navy); padding-bottom: 54px; }
.cover--plain .cover__scene img { aspect-ratio: 16 / 9; object-position: 100% 50%; }
.cover--plain .cover__scene::after { content: none; }
.cover--plain .cover__note { grid-row: 3; margin-top: -26px; }
.cover--plain .cover__note .actions { margin-top: 14px; }
.cover--plain .cover__title { font-size: clamp(34px, 9vw, 56px); }
@media (min-width: 700px) and (max-width: 1239.98px) {
  .cover--plain { padding-bottom: 70px; }
  .cover--plain .cover__note { grid-row: 2; align-self: end; justify-self: start; width: min(450px, 58%); margin: 0 0 26px; }
}
@media (min-width: 1240px) {
  .cover--plain { --cover-h: clamp(420px, 54svh, 500px); --copy-w: clamp(380px, 33vw, 470px); padding-bottom: 0; background: var(--sky); }
  .cover--plain .cover__title { font-size: clamp(50px, 4.2vw, 64px); line-height: .94; }
  .cover--plain .cover__note { max-width: none; margin-top: 16px; }
}

/* 29. IN-PAGE LINK BAR (service pages): lives in the facts strip, under the facts ----------- */
.jump { margin-top: 20px; padding-top: 16px; border-top: 2px dotted rgba(6, 38, 68, .2); display: grid; gap: 8px 20px; align-items: center; }
.jump .chips__label { margin: 0; white-space: nowrap; }
@media (min-width: 1100px) { .jump { grid-template-columns: auto minmax(0, 1fr); } }

/* 30. EXAMPLE MESSAGE PHONE: shows a text message; always labelled as an example ------------- */
.msgphone {
  width: 204px; padding: 9px; border-radius: 30px; background: var(--navy); box-shadow: var(--sh-3);
  transform: rotate(-4deg);
}
.msgphone__screen { border-radius: 22px; background: #fff; overflow: hidden; }
.msgphone__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; background: var(--sky-050); border-bottom: 2px solid var(--line); }
.msgphone__bar img { width: 32px; height: 32px; border-radius: 50%; background: #fff; flex: none; }
.msgphone__bar b { display: block; font: 700 14px/1.1 var(--f-text); color: var(--navy); }
.msgphone__bar small { display: block; font: 500 12.5px/1.2 var(--f-text); color: var(--ink-500); }
.msgphone__thread { display: grid; gap: 9px; padding: 12px 11px 13px; }
.msgphone__bubble {
  justify-self: start; padding: 9px 12px 10px; border-radius: 16px 16px 16px 4px;
  background: var(--cyan-050); box-shadow: inset 0 0 0 2px var(--cyan-200);
  font: 500 13.5px/1.4 var(--f-text); color: var(--navy);
}
.msgphone .tag { justify-self: center; font-size: 12.5px; padding: 4px 10px; }
.frame .msgphone { position: absolute; z-index: 2; left: -6px; bottom: -26px; }
.frame--flip .msgphone { left: auto; right: -6px; transform: rotate(4deg); }
.frame--phone { margin-bottom: 30px; }
@media (min-width: 900px) {
  .msgphone { width: 232px; }
  .frame .msgphone { left: -26px; bottom: -30px; }
  .msgphone__bubble { font-size: 14.5px; }
}

/* 31. ROW HEADING: a small titled row inside a section (for example the receipts under a split) */
.rowhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: calc(var(--head-gap) + 12px) 0 22px; padding-top: 22px; border-top: 2px dotted #c9dcea; }
.rowhead p { font-size: 15.5px; color: var(--ink-500); }
@media (max-width: 899.98px) { .rowhead { flex-direction: column; align-items: center; text-align: center; } }

/* 32. REVIEW FEED FRAME: the designed home of the live Google feed; deliberate while empty --- */
.rfeed { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 28px; background: #fff; box-shadow: var(--sh-2); }
.rfeed__main { padding: 24px 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: center; justify-items: start; }
.rfeed__say { font: 800 clamp(27px, 2.8vw, 36px)/1.02 var(--f-display); color: var(--navy); }
.rfeed__feed { width: 100%; }                      /* the live Google feed mounts here and replaces .rfeed__empty */
.rfeed__more { justify-self: start; }
.rfeed__themes { padding: 22px 18px 24px; background: var(--sky-050); border-radius: 0 0 28px 28px; }
.rfeed__themes .ilist { margin-top: 16px; gap: 16px; }
.rfeed__themes .ilist li { align-items: start; }
.rfeed .peek { right: 9%; }
@media (min-width: 900px) {
  .rfeed { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .rfeed__main { padding: 30px 30px 30px 32px; }
  .rfeed__themes { padding: 30px 30px 30px 28px; border-radius: 0 28px 28px 0; }
  .rfeed__feed { min-height: 250px; }
}
/* THE EMPTY STATE (.rfeed--empty, until the live feed is wired): compact and finished, never a hole.
   The rating badge, five gold stars, one small line that says what will load here, and the button.
   The themes take the wider side, two by two, so the frame is only as tall as its contents. */
.rfeed__empty { display: grid; gap: 12px; justify-items: start; }
.rfeed__stars { display: flex; gap: 5px; }
.rfeed__stars img { width: 36px; height: 36px; }
.rfeed__ph { font-size: 13.5px; line-height: 1.45; color: var(--ink-500); }
.rfeed--empty .rfeed__feed { min-height: 0; }
@media (min-width: 900px) {
  .rfeed--empty { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .rfeed--empty .rfeed__main { padding: 34px 28px 34px 36px; gap: 18px; }
  .rfeed--empty .rfeed__themes { padding: 30px 32px 32px; }
  .rfeed--empty .rfeed__themes .ilist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 26px; }
}

/* HOME FEED A: three across, only after review cards arrive. */
.rfeed__feed { position: relative; }
.rfeed__feed > .ti-widget:not(:has(.ti-review-item)) { position: absolute; top: 0; left: 0; width: 100%; visibility: hidden; pointer-events: none; }
/* the stand-in (badge, stars, one line) steps aside when the feed has arrived; until then, and if the feed never
   comes, the frame is exactly the frame that is live today */
.rfeed__feed:has(> .ti-widget .ti-review-item) > .rfeed__empty { display: none; }
.rfeed__src { display: none; font-size: 14px; line-height: 1.5; color: var(--ink-500); text-align: center; }
.rfeed:has(.ti-widget .ti-review-item) .rfeed__src { display: block; }
.rfeed:has(.ti-widget .ti-review-item) .rfeed__main { justify-items: stretch; align-content: start; }
.rfeed:has(.ti-widget .ti-review-item) .rfeed__feed { min-height: 0; }

.rfeed:has(.ti-widget .ti-review-item) { grid-template-columns: minmax(0, 1fr); }
.rfeed:has(.ti-widget .ti-review-item) .rfeed__themes { border-radius: 0 0 28px 28px; }
@media (min-width: 700px) {
  .rfeed:has(.ti-widget .ti-review-item) .rfeed__main { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; }
  .rfeed:has(.ti-widget .ti-review-item) .rfeed__say, .rfeed:has(.ti-widget .ti-review-item) .rfeed__feed { grid-column: 1 / -1; }
  .rfeed:has(.ti-widget .ti-review-item) .rfeed__src { text-align: left; }
  .rfeed:has(.ti-widget .ti-review-item) .rfeed__more { justify-self: end; }
  .rfeed:has(.ti-widget .ti-review-item) .rfeed__themes .ilist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
}
@media (min-width: 900px) {
  .rfeed:has(.ti-widget .ti-review-item) .rfeed__main { padding: 34px 36px 30px; row-gap: 18px; }
  .rfeed:has(.ti-widget .ti-review-item) .rfeed__themes { padding: 30px 36px 34px; }
}
@media (min-width: 1100px) {   /* the four themes share one row, icon above, as on the Reviews page */
  .rfeed:has(.ti-widget .ti-review-item) .rfeed__themes .ilist { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .rfeed:has(.ti-widget .ti-review-item) .rfeed__themes .ilist li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

.rfeed .ti-widget .ti-widget-container:not(.ti-col-1) .ti-column > .ti-review-item:nth-child(n+2),
.rfeed .ti-widget .ti-widget-container.ti-col-1 .ti-column > .ti-review-item:nth-child(n+3) { display: none !important; }
.rfeed .ti-widget .ti-load-more-reviews-container { display: none !important; }
.rfeed .ti-widget .ti-reviews-container-wrapper { align-items: stretch; }
.rfeed .ti-widget .ti-column { display: flex; flex-direction: column; }
.rfeed .ti-widget .ti-column > .ti-review-item { display: flex; flex: 1 1 auto; }
.rfeed .ti-widget .ti-widget-container.ti-col-1 .ti-column > .ti-review-item { flex: 0 0 auto; }
.rfeed .ti-widget .ti-column > .ti-review-item > .ti-inner { flex: 1 1 auto; }

/* 33. PRICE BOARD ADDITIONS: the dog picker, phone "pick and see", reasons, adders, worked example */
/* The rail rows are buttons. Desktop: the ladder at the left; a click lights that row across the three plans.
   Phone and tablet (with JavaScript): a pad of dog counts; each plan then shows the one price for that pack.
   Without JavaScript the rail is the plain ladder on desktop and every row of every plan is listed on phones. */
.ppick {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 4px 10px 4px 6px; margin: 0;
  border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 2px var(--line);
  font: 700 16px/1.1 var(--f-text); color: var(--navy); text-align: left; -webkit-tap-highlight-color: transparent;
  transition: box-shadow .16s, background-color .16s;
}
.ppick img { width: 36px; height: 36px; flex: none; }
@media (hover: hover) { .ppick:hover { box-shadow: inset 0 0 0 2px var(--cyan); background: var(--cyan-050); } }
.ppick[aria-pressed="true"] { background: var(--gold-050); box-shadow: inset 0 0 0 3px var(--gold); }
.prow__why { display: block; }
.pboard__rail-head small { font: 500 14px/1.3 var(--f-text); color: var(--ink-500); letter-spacing: 0; }
@media (max-width: 999.98px) {
  html.js .pboard[data-pboard] .pboard__rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
  html.js .pboard[data-pboard] .pboard__rail li.pboard__rail-head {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 800 26px/1 var(--f-display); color: var(--navy);
  }
  .pboard__rail-head img { width: 46px; height: 46px; }
  html.js .pboard[data-picked] .prow:not(.is-yours) { display: none; }
  html.js .pboard[data-picked] .pplan__from { display: none; }
  html.js .pboard[data-picked] .pplan { padding-bottom: 6px; }
  html.js .pboard[data-picked] .prow.is-yours {
    margin: 0; padding: 12px 0 8px; background: none; box-shadow: none; border-radius: 0; border-bottom: 0; min-height: 0; align-items: center;
  }
  html.js .pboard[data-picked] .prow.is-yours .prow__dogs::after { content: none; }
  html.js .pboard[data-picked] .prow.is-yours .prow__dogs { font-size: 17px; }
  html.js .pboard[data-picked] .prow.is-yours:not(.prow--na) .prow__amt { font-size: 42px; display: inline-flex; align-items: baseline; }
  html.js .pboard[data-picked] .prow.is-yours:not(.prow--na) .prow__amt::after { content: "per visit"; font: 600 13px/1 var(--f-text); color: var(--ink-500); margin-left: 6px; }
  html.js .pboard[data-picked] .pplan--star .prow.is-yours:not(.prow--na) .prow__amt::after { color: var(--on-navy-soft); }
  html.js .pboard[data-picked] .prow--na.is-yours .prow__amt { max-width: 66%; font-size: 14.5px; }
}
@media (min-width: 620px) and (max-width: 999.98px) {
  html.js .pboard[data-pboard] .pboard__rail { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  html.js .pboard[data-pboard] .pboard__rail .ppick { flex-direction: column; gap: 2px; padding: 6px 2px; text-align: center; font-size: 13.5px; }
}
@media (min-width: 1000px) {
  .pboard[data-pboard] .pboard__rail li { border-bottom: 0; padding: 3px 0; }
  .pboard[data-pboard] .pboard__rail li.pboard__rail-head { padding: 0; }
  .pboard__rail-head small { display: none; }
  .pboard__rail .ppick { min-height: 46px; height: 46px; background: transparent; box-shadow: none; border-radius: 12px; font-size: 17px; }
  @media (hover: hover) { .pboard__rail .ppick:hover { background: #fff; box-shadow: inset 0 0 0 2px var(--cyan); } }
  .pboard__rail .ppick[aria-pressed="true"] { background: var(--gold-050); box-shadow: inset 0 0 0 2px var(--gold); }
  .pboard[data-pboard] .pboard__rail li.is-yours::after { content: none; }
  .pboard__rail .ppick[aria-pressed="true"]::after {
    content: "Your pack"; margin-left: auto; padding: 2px 7px 1px; border-radius: 99px; background: var(--navy); color: #fff;
    font: 700 12.5px/1.3 var(--f-display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  }
  .pboard:not(.is-chosen) .ppick[aria-pressed="true"]::after { content: none; }
}
.pboard__cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 22px; margin-top: 4px; }
@media (min-width: 1000px) { .pboard__cta { margin-top: 22px; } }

/* 34. MASCOT CAPTION: his round avatar and one short line in his voice. Never beside a full-body pose. */
.says { display: inline-flex; align-items: center; gap: 10px; font: 600 15.5px/1.3 var(--f-text); color: var(--navy); text-align: left; }
.says img { width: 44px; height: 44px; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff, 0 3px 8px rgba(6, 38, 68, .2); }
.sec--navy .says { color: #fff; }

/* 35. ASSURANCE ROW: three short promises in a row under a price (icon list, three across from 700px) */
.ilist--3up { margin-top: 26px; padding: 18px 20px; border-radius: 22px; background: #fff; box-shadow: var(--sh-1); }
.ilist--3up li { align-items: start; }   /* three across: the titles share one line whatever the length of the text under them */
.sec--navy .ilist--3up b, .sec--navy .ilist--3up strong, .sec--navy .ilist--3up h3 { color: var(--navy); }   /* the panel is white: its text stays dark on a navy section */
.sec--navy .ilist--3up span { color: var(--ink-500); }
@media (min-width: 700px) {
  .ilist--3up { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; padding: 20px 26px; }
}

/* 36. ADDERS: what moves the price, as small reference menus with their pictures, plus one worked example */
.adders { display: grid; gap: var(--gap); margin-top: var(--gap); }
.adder { background: #fff; border-radius: var(--r-card); box-shadow: var(--sh-1); padding: 18px 18px 14px; display: flex; flex-direction: column; }
.adder__head { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding-bottom: 12px; border-bottom: 3px solid var(--plate, var(--sky-200)); }
.adder__head img { width: 54px; height: 54px; grid-row: 1 / span 2; }
.adder__title { font: 800 26px/1 var(--f-display); color: var(--navy); align-self: end; }
.adder__sub { font-size: 14px; line-height: 1.35; color: var(--ink-500); align-self: start; }
.adder--gold { --plate: var(--gold-300); }
.adder--grass { --plate: #bfe89a; }
.arow { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 0; border-bottom: 2px dotted #c9dcea; }
.arow:last-child { border-bottom: 0; }
.arow > img { width: 44px; height: 44px; flex: none; }
.arow__name { font: 600 16px/1.2 var(--f-text); color: var(--navy); }
.arow__name small { display: block; font: 500 13px/1.3 var(--f-text); color: var(--ink-500); margin-top: 1px; }
.arow__lead { flex: 1 1 auto; }
.arow__amt { font: 800 24px/1 var(--f-display); color: var(--navy); white-space: nowrap; text-align: right; }
.arow__amt small { display: block; font: 600 12.5px/1.2 var(--f-text); color: var(--ink-500); margin-top: 2px; }
.arow__amt--word { font: 700 15px/1.2 var(--f-text); color: var(--grass-800); }
.arow__amt--quote { font: 700 15px/1.2 var(--f-text); color: var(--blue-700); }
.adder__pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 0 6px; text-align: center; }
.adder__pics figure { display: grid; justify-items: center; gap: 2px; padding: 8px 4px 9px; border-radius: 14px; background: var(--grass-050); }
.adder__pics img { width: 58px; height: 58px; }
.adder__pics figcaption { font: 700 13.5px/1.2 var(--f-text); color: var(--navy); }
.adder__note { margin-top: auto; padding-top: 12px; font-size: 14px; line-height: 1.45; color: var(--ink-500); }
.adder--sum { background: var(--navy); color: var(--on-navy-soft); box-shadow: var(--sh-2); }
.adder--sum .adder__head { border-bottom-color: var(--cyan); }
.adder--sum .adder__title, .adder--sum .arow__name, .adder--sum .arow__amt { color: #fff; }
.adder--sum .adder__sub, .adder--sum .arow__name small, .adder--sum .arow__amt small { color: var(--on-navy-soft); }
.adder--sum .arow { border-bottom-color: rgba(255, 255, 255, .22); }
.adder--sum .arow > img, .adder--sum .adder__head img { background: #fff; border-radius: 12px; padding: 3px; }
.adder__total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 12px; border-top: 3px solid var(--gold); }
.adder__total > span:not(.price) { font: 700 15px/1.2 var(--f-text); color: #fff; }
.adder__total .price { font-size: 56px; color: #fff; }   /* the same display face and weight as every other price */
.adder__total .price__cur, .adder__total .price__cents { color: var(--gold); }
.adder--sum .btn { margin-top: 14px; align-self: stretch; }
@media (min-width: 700px) {
  .adders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adder--sum { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .adders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adder--sum { grid-column: auto; }
  .adder { padding: 22px 22px 18px; }
}
/* a centred sub-heading between two parts of one long section (price board, then what moves the price) */
.subhead { margin: calc(var(--head-gap) + 8px) auto 0; text-align: center; max-width: 640px; }
.subhead .h3 { font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; }
.subhead p { margin-top: 6px; color: var(--ink-500); font-size: 15.5px; }

/* 37. SMALL RULES the pages needed ------------------------------------------------------------ */
.center-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; margin-top: var(--head-gap); }
.sec--navy .notice { color: var(--ink-700); }                      /* a cream notice keeps dark text on a navy section */
.sec--navy .notice .notice__title, .sec--navy .notice b, .sec--navy .notice strong { color: var(--navy); }
.pnote a { color: var(--blue-700); font-weight: 600; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sec--navy .pnote { color: var(--on-navy-soft); }

/* 38. ROUND-ONE FIXES (phone first) ------------------------------------------------------------ */
/* the section after the facts bar sweeps up over it on a shallower curve, so it never reaches the facts */
.sec.facts + .sec[data-edge] { --edge-h: clamp(18px, 2.4vw, 34px); }
/* the facts bar sits above the hero (z-index 2); every later section must stack above it in page order */
.sec.facts ~ .sec { z-index: 2; }
/* phone: the example phone is a small prop in the corner of the picture, never the subject */
@media (max-width: 899.98px) {
  .msgphone { width: 172px; padding: 7px; border-radius: 26px; }
  .msgphone__screen { border-radius: 20px; }
  .msgphone__bar { padding: 8px 10px 6px; }
  .msgphone__bar img { width: 28px; height: 28px; }
  .msgphone__thread { padding: 9px 9px 10px; gap: 7px; }
  .msgphone__bubble { font-size: 12.5px; padding: 7px 10px 8px; }
  /* it hangs off the bottom edge of the picture instead of covering the scene */
  .frame .msgphone { position: relative; left: auto; bottom: auto; margin: -64px 0 0 8px; }
  .frame--phone { margin-bottom: 4px; }
}
.msgphone .tag { text-align: center; }
/* the peeking mascot needs clear air above the review frame, and only his hands cross its edge */
.rfeed.peek-host { margin-top: calc(var(--head-gap) + 66px); }
.rfeed .peek { right: 6%; margin-bottom: -9px; }
@media (min-width: 900px) {
  .rfeed.peek-host { margin-top: calc(var(--head-gap) + 44px); }
  .rfeed .peek { right: 4.5%; margin-bottom: -13px; }
}
/* phone: the three "from" prices are compact tickets, not three screen-high cards */
@media (max-width: 619.98px) {
  .grid--plans { gap: 14px; }
  .grid--plans .pcard {
    display: grid; grid-template-columns: 72px auto auto minmax(0, 1fr); column-gap: 7px; row-gap: 0;
    align-items: end; justify-items: start; text-align: left; padding: 16px 16px 16px 0; border-radius: 24px;
  }
  .grid--plans .pcard__plate { position: absolute; left: 0; top: 0; bottom: 0; width: 56px; height: auto; margin: 0; border-radius: 24px 0 0 24px; }
  .grid--plans .pcard__plate::before { left: auto; right: -46px; top: -20%; bottom: -20%; width: 62px; height: auto; }
  .grid--plans .pcard__ico { grid-column: 1; grid-row: 1 / span 4; align-self: center; width: 60px; height: 60px; margin: 0 0 0 12px; }
  .grid--plans .pcard__name { grid-column: 2 / -1; margin: 0 0 0 12px; font-size: 26px; }
  .grid--plans .pcard__fit { grid-column: 2 / -1; min-height: 0; margin: 3px 0 0 12px; font-size: 14.5px; }
  .grid--plans .pcard__from { grid-column: 2; margin: 10px 0 5px 12px; }
  .grid--plans .pcard .price { grid-column: 3; font-size: 46px; margin: 10px 0 0; }
  .grid--plans .pcard__unit { grid-column: 4; margin: 0 0 5px; }
  .grid--plans .pcard__cta { grid-column: 2 / -1; margin: 12px 0 0 12px; }
  .grid--plans .pcard--star { margin-block: 6px; padding-top: 22px; }
}
/* the map note sits under the map, so it can never cover a town name */
.map__note { position: static; margin: -4px 14px 14px; background: none; padding: 0 2px; }
/* stacked guide cards: room for the next card's ribbon */
@media (max-width: 899.98px) { .grid > .gcard + .gcard { margin-top: 18px; } }
/* phone: option cards become compact tickets too (same recipe as the plans) */
@media (max-width: 619.98px) {
  .grid--compact { gap: 12px; }
  .grid--compact .fcard { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 14px 16px 14px 0; }
  .grid--compact .fcard__plate { position: absolute; left: 0; top: 0; bottom: 0; width: 56px; height: auto; margin: 0; border-radius: var(--r-card) 0 0 var(--r-card); }
  .grid--compact .fcard__plate::before { left: auto; right: -46px; top: -20%; bottom: -20%; width: 62px; height: auto; }
  .grid--compact .fcard__ico { position: relative; left: auto; top: auto; grid-column: 1; grid-row: 1 / span 3; width: 60px; height: 60px; margin-left: 12px; }
  .grid--compact .fcard__title { grid-column: 2; margin-top: 0; }
  .grid--compact .fcard__text { grid-column: 2; margin-top: 3px; font-size: 15px; line-height: 1.45; }
  .grid--compact .fcard__foot { grid-column: 2; margin-top: 0; padding-top: 8px; }
  /* three receipts on a phone: slips with the photo at the left, still small */
  .receipts--3 { gap: 16px; }
  .receipts--3 .receipt { display: grid; grid-template-columns: 44% minmax(0, 1fr); align-items: center; padding: 8px; }
  .receipts--3 .receipt__body { padding: 2px 4px 2px 12px; }
  .receipts--3 .receipt__tag { left: 13px; top: 13px; }
}
/* the service-page builder starts just under the boots of the 4:3 scene (65.5vw); on a short screen it may rise
   to 26vw, which still clears the mascot's face. Its keyword line is one line and its title two. */
@media (max-width: 699.98px) { .cover--page { --band-max: 65.5vw; --band-min: 26vw; --kw-lines: 1; --title-lines: 2; } }
/* phone and tablet, after a pack is picked: each plan is one row, name at the left, its one price at the right */
@media (max-width: 999.98px) {
  html.js .pboard[data-picked] { gap: 14px; }
  html.js .pboard[data-picked] .pplan { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; padding: 0; border-radius: 24px; }
  html.js .pboard[data-picked] .pplan__top { grid-template-columns: 50px minmax(0, 1fr); gap: 2px 10px; padding: 16px 6px 16px 12px; border-radius: 24px 0 0 24px; align-content: center; }
  html.js .pboard[data-picked] .pplan__top::after { content: none; }
  html.js .pboard[data-picked] .pplan__ico { width: 50px; height: 50px; }
  html.js .pboard[data-picked] .pplan__name { font-size: 23px; }
  html.js .pboard[data-picked] .pplan__fit { font-size: 13px; }
  html.js .pboard[data-picked] .pplan__rows { padding: 10px 14px 10px 8px; display: grid; align-content: center; }
  html.js .pboard[data-picked] .prow.is-yours { flex-direction: column; align-items: flex-end; gap: 1px; padding: 0; text-align: right; }
  html.js .pboard[data-picked] .prow.is-yours .prow__lead { display: none; }
  html.js .pboard[data-picked] .prow.is-yours .prow__dogs { font: 600 13px/1.2 var(--f-text); color: var(--ink-500); }
  html.js .pboard[data-picked] .pplan--star .prow.is-yours .prow__dogs { color: var(--on-navy-soft); }
  html.js .pboard[data-picked] .prow.is-yours:not(.prow--na) .prow__amt { font-size: 36px; flex-direction: column; align-items: flex-end; }
  html.js .pboard[data-picked] .prow.is-yours:not(.prow--na) .prow__amt::after { margin: 3px 0 0; font-size: 12.5px; }
  html.js .pboard[data-picked] .prow--na.is-yours .prow__amt { max-width: none; font: 700 15px/1.2 var(--f-text); color: var(--navy); }
  html.js .pboard[data-picked] .pplan--star .prow--na.is-yours .prow__amt { color: #fff; }
  html.js .pboard[data-picked] .prow--na.is-yours .prow__why { font: 500 12.5px/1.3 var(--f-text); color: var(--ink-500); margin-top: 2px; }
  html.js .pboard[data-picked] .pplan--star .prow--na.is-yours .prow__why { color: var(--on-navy-soft); }
  html.js .pboard[data-picked] .prow--na.is-yours .prow__go { font: 700 12.5px/1.3 var(--f-text); color: var(--navy); margin-top: 1px; }
  html.js .pboard[data-picked] .pplan--star .prow--na.is-yours .prow__go { color: #fff; }
  /* the three plan rows are one height, whether a name takes one line or two */
  html.js .pboard[data-picked] .pplan { min-height: 100px; }
}
/* desktop service and city heroes: the scene starts under the arc, so it is scaled by height (the whole
   picture top to bottom) and its characters clear the builder as far as the picture allows */
@media (min-width: 1240px) {
  /* --scene-reach (set on the cover, per scene): how far left the characters reach from the picture's right edge,
     as a share of the cover's height. Where the builder card would cover them (a tall, not very wide window)
     the picture slides right by exactly the overlap, so no leg or shoe is ever half hidden behind the card. */
  .cover--page { --scene-reach: 0; --scene-slide: max(0px, calc(var(--cover-h) * var(--scene-reach) - (100% - var(--gut) - var(--copy-w) - 22px - clamp(410px, 31.5vw, 450px)) + 8px)); }
  .cover--page .cover__scene { left: calc((var(--gut) + var(--copy-w) + 122px) * .7); right: calc(-24px - var(--scene-slide)); }
  .cover--page { overflow-x: clip; }
}
/* a row heading beside its row from 1000px: label column 3, content 9 (keeps three receipts small) */
.rowsplit { display: grid; gap: 22px var(--gap); margin-top: calc(var(--head-gap) + 12px); padding-top: 24px; border-top: 2px dotted #c9dcea; }
.rowsplit > .rowhead { margin: 0; padding: 0; border: 0; }
@media (min-width: 1000px) {
  .rowsplit { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: center; }
  .rowsplit > .rowhead { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (min-width: 1000px) {
  .pboard[data-pboard] { grid-template-columns: 192px repeat(3, minmax(0, 1fr)); }   /* room for the "Your pack" pill */
  .pboard__rail .ppick { white-space: nowrap; }
}
/* plain heroes, after looking at them: the scene is scaled by height on desktop (as on service pages).
   (The drawn field of a hero with a pose is in section 42.) */
.cover--plain { padding-bottom: 40px; }
@media (min-width: 1240px) {
  .cover--plain { padding-bottom: 0; }
  .cover--plain .cover__scene { left: calc((var(--gut) + var(--copy-w) + 122px) * .7); }
}
/* foundation fix: a full-width frame's colour disc (and any other decoration) may hang past the gutter on
   tablets; clip it at the page edge instead of letting the page scroll sideways */
main { overflow-x: clip; }
/* Safari 15 (the oldest iPhones) has no "clip": there the page itself hides what hangs past the edge, so it cannot wobble sideways */
@supports not (overflow: clip) { body { overflow-x: hidden; } }

/* 39. ROUND-TWO FIXES ----------------------------------------------------------------------------- */
/* a split whose words can grow (it holds the explainer): both columns start at the top and the picture travels
   with the reader, so opening the explainer never moves the heading or leaves the picture in an empty half */
@media (min-width: 900px) {
  .split--top { align-items: start; }
  .split--top .split__art { position: sticky; top: calc(var(--hdr-h-stuck) + 28px); }
}
/* a footnote link is its own 44px target on its own line, never a two-line inline link */
.pnote__more { display: flex; align-items: center; justify-content: center; width: fit-content; min-height: 44px; margin: 0 auto; padding-inline: 10px; }
/* phones: a button that closes a block is as wide as the block, so nothing sits half-centred under a centred heading */
@media (max-width: 619.98px) {
  .center-row, .pboard__cta { flex-direction: column; align-items: stretch; }
  .center-row > .says, .pboard__cta > .says { justify-content: center; }
  .center-row > .btn, .pboard__cta > .btn, .rfeed__more, .split__text > p > .btn:not(.btn--quiet) { display: flex; width: 100%; }
  .center-row > .btn--quiet { width: auto; align-self: center; }   /* a text action keeps its own width: the swash stays under the words */
  .rfeed__more { justify-self: stretch; white-space: normal; text-align: center; }
  .cover--plain .cover__note .actions { flex-direction: column; align-items: stretch; }   /* a plain hero's buttons too */
  .cover--plain .cover__note .actions > .btn { display: flex; width: 100%; }
  .pboard__custom .btn { justify-self: stretch; }
}
/* the closing scene follows the same rule as every heading: centred while the page is one column */
@media (max-width: 899.98px) {
  .foot__closer { text-align: center; }
  .foot__closer h2, .foot__closer p { margin-inline: auto; }
  .foot__closer .actions { justify-content: center; }
  .foot__closer .actions--lead > :first-child { justify-content: center; }
}
@media (max-width: 619.98px) {
  .foot__closer .actions--lead > :first-child > .btn, .foot__closer .actions > .btn { flex: 1 1 auto; }
}
/* phone menu: the mascot stands on the call button and points at the price button, when the screen has room for him */
.mnav__mascot, .mnav__say { display: none; }
@media (min-height: 820px) {
  .mnav__mascot {
    display: block; position: absolute; right: calc(var(--g) + 8px); bottom: calc(100% - 17px); width: auto; height: 164px;
    pointer-events: none; filter: drop-shadow(0 5px 4px rgba(1, 14, 26, .55));
  }
  .mnav__say {
    display: block; position: absolute; right: calc(var(--g) + 108px); bottom: calc(100% + 58px); max-width: 200px; padding: 10px 14px;
    border-radius: 16px 16px 4px 16px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px rgba(166, 223, 255, .35);
    font: 600 15.5px/1.3 var(--f-text); color: #fff; text-align: left;
  }
}
/* chips in a words column: two across, with their label close above them */
.chips--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split__text > .chips__label + .chips { margin-top: 0; }
.split__text > .chips__label { margin: 22px 0 8px; }
/* a page cover on a short phone: as the card rises, the picture slides up a little under the headline band
   (at most 16px) so the stooping mascot keeps his whole face above the card */
@media (max-width: 699.98px) {
  /* hero.sceneLift (a page with a short dog): the picture may slide further, half as far as the card has risen */
  .cover--page .cover__scene img { transform: translateY(max(calc(var(--scene-lift, 16px) * -1), calc((var(--band) - var(--band-max)) * var(--scene-lift-rate, .12)))); }
}
/* phone price board: when the picked pack is not offered on a plan, that row needs four short lines, so all
   three rows take that height together and stay one size */
@media (max-width: 999.98px) {
  html.js .pboard[data-picked]:has(.prow--na.is-yours) .pplan { min-height: 124px; }
}

/* 40. THE FIRST-CLEANUP RULE, 2026-10-08 (POLICY-WORDING.md) ----------------------------------- */
/* the small print that belongs to the explainer: always in view, explainer closed or open, tucked under it */
.explain__small { font: 600 13.5px/1.4 var(--f-text); color: var(--navy); padding-inline: 6px; }
.explain + .explain__small, .split__text > .explain + .explain__small { margin-top: 10px; }
/* the explainer's sub-line now carries the short form of the rule: let it wrap inside the bar, never under the chevron */
.explain__title { min-width: 0; }
.explain__title small { text-wrap: balance; }

/* 41. SHARED-FIX ROUND, 2026-10-08 (after the judges' review of the 24 new pages) ------------------------------- */
/* the seal comes before the price card in the source now (a keyboard reaches it first); it still lies on the card's corner */
.cover__seal { z-index: 4; }
/* tablets: the seal sits on the card's top corner, as on a desktop, clear of the progress track and its last segment */
@media (min-width: 700px) and (max-width: 1239.98px) {
  .cover__seal { translate: 0 calc(var(--band) - 18px); }
  .cover .ppb { --ppb-head-clear: 34px; }                        /* the step count ends before the seal, as on a desktop */
}
.cover--noseal .ppb { --ppb-head-clear: 0px; }                   /* no seal on this page (hero.seal false): the card's title has the whole row */
/* HEADLINE BREAKS SET BY THE BUILDER (city pages): <br class="cover__br cover__br--d"> is a line break only in the
   desktop column, cover__br--p only in the phone band. Anywhere else it is nothing and the sentence wraps by itself. */
.cover__br { display: none; }
@media (max-width: 699.98px) { .cover__br--p { display: inline; } }
@media (min-width: 1240px) { .cover__br--d { display: inline; } }
/* A CITY HEADLINE. The builder gives the widest line of the desktop setting (--title-fit, in em) and the width of the
   whole sentence on one line (--title-em). Desktop: the size steps down just enough for a long name to stay inside
   the copy column, clear of the price card. Tablet in a short window: the sentence is set on one line, so the whole
   price card stays on the first screen (two lines there push its last row under the fold). */
@media (min-width: 1240px) {
  .cover--city .cover__title { font-size: min(clamp(58px, 4.7vw, 76px), calc(var(--copy-w) / var(--title-fit, 4))); }
}
@media (min-width: 1240px) and (max-height: 780px) {
  .cover--city .cover__title { font-size: min(58px, calc(var(--copy-w) / var(--title-fit, 4))); }
}
@media (min-width: 700px) and (max-width: 1239.98px) and (max-height: 819.98px) {
  .cover--city .cover__title { font-size: clamp(40px, calc((100vw - 2 * var(--g) - 20px) / var(--title-em, 14)), 64px); }
}
/* the spark of a city headline stays inside its own line (the line above it is often the longer one, and the spark
   read as a comma after the town's full stop). It is left off a phone when the last line fills the width (.spark--desk). */
.cover--city .spark::after { bottom: .2em; }
@media (max-width: 699.98px) { .spark--desk::after { content: none; } }
@media (max-width: 342.98px) { .cover--city .spark::after { content: none; } }   /* under 343px the type stops shrinking: no room beside any town */
/* a service or city hero's own action (hero.action): one white button under the lead */
.cover__act { margin-top: 12px; }
@media (max-width: 619.98px) { .cover__act .btn { display: flex; width: 100%; } }
/* THE TRAIL (nav.crumbs): where a page sits, under its facts. Only pages with a parent have one (city pages:
   Home, Service Areas, the town). It is the visible form of the page's BreadcrumbList. Left on the container edge;
   centred while the page is one column. Every link is a 44px target. */
.crumbs { margin-top: 18px; padding-top: 6px; border-top: 2px dotted rgba(6, 38, 68, .2); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; font: 600 14px/1.2 var(--f-text); color: var(--ink-500); }
.crumbs li { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.crumbs li + li::before { content: ""; flex: none; width: 14px; height: 14px; background: url("../../../assets/brand-icons/pp-chevron.webp") center / contain no-repeat; transform: rotate(-90deg); opacity: .7; }
.crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--blue-700); text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (hover: hover) { .crumbs a:hover { color: var(--navy); text-decoration-color: var(--gold-600); } }
.crumbs [aria-current] { color: var(--navy); font-weight: 700; }
@media (max-width: 899.98px) { .crumbs ol { justify-content: center; } }
/* a plain hero's picture on a desktop: which part of its height stays in view when the window crops it (hero.sceneY) */
@media (min-width: 1240px) { .cover--plain .cover__scene img { object-position: 100% var(--scene-y, 50%); } }

/* 42. SHARED-FIX ROUND 2, 2026-10-09 (text first; the drawn field; tablets; the judges of the legal and Yard Guide pages) -- */

/* THE TEXT-FIRST PAIR (.reach; page token {{REACH}}, on navy {{REACH:dark}}). Owner decision, October 8: wherever a
   page offers a phone call there is a Text button FIRST, the stronger of the two, with the number on it; Call is second.
   On a phone the pair fills its row: Text takes the width, Call stays compact beside it. */
.reach { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; vertical-align: middle; }
@media (max-width: 619.98px) {
  .reach { display: flex; flex-wrap: nowrap; width: 100%; }
  .reach > .reach__text { flex: 1 1 auto; min-width: 0; padding-inline: 12px; }
  .reach > .reach__call { flex: 0 0 auto; padding-inline: 16px; }
}
@media (max-width: 359.98px) { .reach > .btn { font-size: 17px; gap: 6px; } .reach > .reach__text { padding-inline: 8px; } .reach > .reach__call { padding-inline: 12px; } }
/* in a sentence: "Text (317) 961-5865 or call" ({{REACH:inline}}). The number never breaks. */
.reach-inline a { white-space: nowrap; }

/* THE DRAWN FIELD (.cover--drawn): the hero of a page that has a pose instead of a scene (the legal pages, the article
   template). Sky, three drawn clouds, a pale disc behind the pose, two hills of lawn, up to three sticker icons that
   belong to the page (hero.stickers), and the pose STANDING ON the front hill at every width: the pose is placed by its
   feet (--pose-x across, the hill's crest up), never by a padding percentage, so he cannot float. The band is compact:
   420 to 500px on a desktop (55% of a 1366 by 768 window), about a third of the window on a tablet.
     --drawn-h  height of the field      --lawn-h  height of the hills      --pose-x  where he stands (58% to 92% is level)
     --pose-top clear sky kept over his head */
.cover--drawn {
  --drawn-h: clamp(236px, 66vw, 290px); --lawn-h: 78px; --pose-x: 74%; --pose-top: 14px;
  --pose-foot: calc(var(--lawn-h) * .93 - 7px);                                   /* his boots sink 7px into the grass at the crest */
  --pose-h: calc(var(--drawn-h) - var(--pose-foot) - var(--pose-top));
  background: var(--grass);                                                        /* the front hill runs on under the lead card and the facts curve */
}
.cover__scene--drawn {
  position: relative; overflow: hidden; height: var(--drawn-h);
  background: linear-gradient(180deg, var(--sky) 0, var(--sky-200) 82%, var(--sky-050) 100%);
}
.cover--plain .cover__scene--drawn img { width: auto; height: auto; aspect-ratio: auto; object-fit: contain; }
.drawn__lawn { position: absolute; left: 0; bottom: -1px; width: 100%; height: var(--lawn-h); display: block; }
.drawn__hill { fill: var(--grass); }
.drawn__hill--back { fill: var(--grass-700); }
.drawn__disc {   /* a cover field behind him, like the disc behind every section emblem */
  position: absolute; left: var(--pose-x); bottom: calc(var(--pose-foot) + var(--pose-h) * .08); translate: -50% 0;
  height: calc(var(--pose-h) * .94); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .3);
}
.drawn__pose { position: absolute; left: var(--pose-x); bottom: var(--pose-foot); translate: -50% 0; height: var(--pose-h); }
.cover--plain .cover__scene--drawn .drawn__pose img { height: 100%; width: auto; }
.drawn__pose::after { left: 3%; right: 3%; bottom: -2.2%; height: 8.5%; background: radial-gradient(closest-side, rgba(3, 40, 12, .55), rgba(3, 40, 12, 0)); }   /* his shadow on the grass */
.drawn__cloud { position: absolute; height: auto; opacity: .94; filter: drop-shadow(0 3px 0 rgba(8, 104, 163, .12)); }
.drawn__cloud--a { left: 5%; top: 22%; width: clamp(74px, 21vw, 104px); }
.drawn__cloud--b { left: 34%; top: 44%; width: clamp(48px, 13vw, 66px); opacity: .8; }
.drawn__cloud--c { display: none; }
.cover--plain .cover__scene--drawn .drawn__stk { position: absolute; width: clamp(44px, 12.5vw, 56px); }
.drawn__stk--1 { left: 36%; top: 15%; }
.drawn__stk--2 { left: 9%; top: 50%; }
.drawn__stk--3 { display: none; }
.drawn--stickers .drawn__cloud--b { display: none; }                               /* with stickers on a phone, one cloud is enough */
/* the document's date line (hero.date on a legal page): in the hero, under the lead */
.cover__date {
  display: flex; align-items: center; gap: 8px; width: fit-content; margin-top: 12px; padding: 4px 14px 4px 6px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(166, 223, 255, .45); color: #fff; font: 600 14.5px/1.25 var(--f-text);
}
.cover--plain .cover__date img { width: 24px; height: 24px; flex: none; aspect-ratio: auto; }
/* tablets: the lead sits directly under the title in the navy band, and the field below it is all picture */
@media (min-width: 700px) and (max-width: 1239.98px) {
  .cover--drawn { --drawn-h: clamp(240px, 40svh, 330px); --lawn-h: 86px; --pose-x: 78%; --pose-top: 18px; }
  .cover--drawn .cover__note {
    grid-row: 2; grid-column: 1 / -1; align-self: auto; justify-self: stretch; width: auto; margin: 0; padding: 0 var(--g) 16px;
    border-radius: 0; background: var(--navy);
  }
  .cover--drawn .cover__lead { max-width: 62ch; font-size: 17px; }
  .cover--drawn .cover__scene, .cover--drawn .cover__swoosh { grid-row: 3; }
  .drawn__cloud--a { left: 6%; top: 30%; width: clamp(96px, 13vw, 132px); }
  .drawn__cloud--b { display: block; left: 31%; top: 50%; width: clamp(62px, 8vw, 84px); }
  .drawn__cloud--c { display: block; right: 2.5%; top: 26%; width: clamp(54px, 7vw, 72px); opacity: .85; }
  .drawn--stickers .drawn__cloud--b { display: block; left: 24%; top: 56%; }
  .cover--plain .cover__scene--drawn .drawn__stk { width: clamp(52px, 7vw, 68px); }
  .drawn__stk--1 { left: calc(var(--pose-x) - 22%); top: 20%; }
  .drawn__stk--2 { left: calc(var(--pose-x) - 37%); top: 40%; }
  .drawn__stk--3 { display: block; left: calc(var(--pose-x) + 11%); top: 46%; }
}
/* desktop: the cover is the plain recipe's (navy arc and copy at the left); the field fills it and he stands at the right */
@media (min-width: 1240px) {
  .cover--drawn { --drawn-h: var(--cover-h); --lawn-h: 122px; --pose-x: 69%; --pose-top: 22px; }
  .cover__scene--drawn { position: absolute; height: auto; }
  .cover--drawn .cover__note { max-width: 440px; }
  .cover__date { margin-top: 16px; font-size: 15px; }
  .drawn__cloud--a { left: 30%; top: 12%; width: clamp(104px, 9vw, 138px); }
  .drawn__cloud--b { display: block; left: 45%; top: 40%; width: clamp(64px, 5.6vw, 88px); }
  .drawn__cloud--c { display: block; right: 3%; top: 15%; width: clamp(62px, 5vw, 80px); opacity: .85; }
  .drawn--stickers .drawn__cloud--b { display: none; }                             /* the second sticker has that place */
  .cover--plain .cover__scene--drawn .drawn__stk { width: clamp(58px, 5vw, 76px); }
  .drawn__stk--1 { left: calc(var(--pose-x) - 21%); top: 13%; }
  .drawn__stk--2 { left: calc(var(--pose-x) - 30%); top: 43%; }
  .drawn__stk--3 { display: block; left: calc(var(--pose-x) + 14%); top: 34%; }
}

/* A plain cover grows when its words need more room than the band (a four-line title with two buttons at 1366 by 768
   pushed the keyword line out under the header). Its height is a minimum now; the picture and the field grow with it. */
@media (min-width: 1240px) { .cover--plain { height: auto; min-height: var(--cover-h); grid-template-rows: minmax(22px, 1fr) auto auto auto minmax(22px, 1.2fr) 44px; } }

/* A YARD GUIDE ARTICLE'S OPENING (hero.cover): the article's own cover is the art, a print standing on the lawn at a slight
   tilt. No pose: the cover carries the flat brown character, and the glossy one is never beside it. */
.cover--drawn-cover { --pose-x: 50%; --cover-art-h: calc(var(--pose-h) - 30px); }
.cover--drawn-cover .drawn__disc { display: none; }
.drawn__cover { position: absolute; left: var(--pose-x); bottom: calc(var(--pose-foot) + 5px); translate: -50% 0; rotate: -2.5deg; height: var(--cover-art-h); aspect-ratio: 3 / 2; }
.cover--plain .cover__scene--drawn .drawn__cover img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border: 5px solid #fff; border-radius: 14px; box-shadow: var(--sh-2); background: var(--sky-050); }
.drawn__cover::after { content: ""; position: absolute; z-index: 0; left: 4%; right: 4%; bottom: -7%; height: 13%; border-radius: 50%; background: radial-gradient(closest-side, rgba(3, 40, 12, .5), rgba(3, 40, 12, 0)); }
.cover--drawn-cover .drawn__cloud--a { top: 8%; left: 2%; }
.cover--drawn-cover .drawn__cloud--b { display: none; }
@media (min-width: 700px) and (max-width: 1239.98px) {
  .cover--drawn-cover { --pose-x: 74%; }
  .cover--drawn-cover .drawn__cloud--a { top: 30%; left: 6%; }
  .cover--drawn-cover .drawn__cloud--b { display: block; }
}
@media (min-width: 1240px) {
  .cover--drawn-cover { --pose-x: 66%; --cover-art-h: min(calc(var(--pose-h) - 26px), 31vw); }
  .cover--drawn-cover .drawn__cloud--a { top: 6%; left: 26%; }
  .cover--drawn-cover .drawn__cloud--b { display: none; }
  .cover--drawn-cover .drawn__cloud--c { top: 8%; }
}

/* TABLETS, 620 TO 899px: ONE COLUMN, BUT DESIGNED. Three things were only the desktop layout piled up.
   1. A split's picture was a 720px square that filled the screen before its heading: it is a 460px print, centred. */
@media (min-width: 620px) and (max-width: 899.98px) {
  .split__art > .frame { max-width: 460px; margin-inline: auto; }
  .split__art > .frame.frame--wide { max-width: 540px; }
}
/* 2. Three short feature cards (.grid--3.grid--compact) were three full-width cards 250px tall with one line each:
      they keep the compact ticket form of a phone (icon in its plate at the left, words beside it) up to 899px. */
@media (min-width: 620px) and (max-width: 899.98px) {
  .grid--3.grid--compact { gap: 14px; }
  .grid--3.grid--compact .fcard { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 18px 22px 18px 0; }
  .grid--3.grid--compact .fcard__plate { position: absolute; left: 0; top: 0; bottom: 0; width: 72px; height: auto; margin: 0; border-radius: var(--r-card) 0 0 var(--r-card); }
  .grid--3.grid--compact .fcard__plate::before { left: auto; right: -50px; top: -20%; bottom: -20%; width: 68px; height: auto; }
  .grid--3.grid--compact .fcard__ico { position: relative; left: auto; top: auto; grid-column: 1; grid-row: 1 / span 3; width: 72px; height: 72px; margin-left: 18px; }
  .grid--3.grid--compact .fcard__title { grid-column: 2; margin-top: 0; }
  .grid--3.grid--compact .fcard__text { grid-column: 2; margin-top: 4px; }
  .grid--3.grid--compact .fcard__foot { grid-column: 2; margin-top: 0; padding-top: 8px; }
}
/* 3. A row of three Yard Guide cards was one column of 720 by 480 covers, each close to a screen high: the cover sits
      at the left with its ribbon under it and the words beside it, three cards to a screen. */
@media (min-width: 620px) and (max-width: 899.98px) {
  .grid--3 > .gcard { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; column-gap: 24px; align-items: start; }
  .grid--3 > .gcard .gcard__cover { grid-column: 1; grid-row: 1; }
  .grid--3 > .gcard .ribbon { grid-column: 1; grid-row: 2; justify-self: start; }
  .grid--3 > .gcard .gcard__body { grid-column: 2; grid-row: 1 / -1; padding: 2px 0 0; }
  .grid > .gcard + .gcard { margin-top: 10px; }
}
/* the one switch for the Google rating (js/site.js): a line with no neutral wording is hidden when no figure is known */
[data-pp-reviews][hidden] { display: none !important; }