/* ==========================================================================
   Skyline K9 — Google Ads landing page (LIGHT THEME)
   Location template: see LOCATION TOKENS in README.md

   Brand palette from skylinek9.co Elementor kit:
     primary #00B9BF · accent #28D6DC · #F6F6F4 · #555555 · #1A1A1A

   WCAG NOTE — brand teal #00B9BF is far too light for use on white:
     · #00B9BF vs WHITE text = 2.42:1  (FAIL — filled buttons)
     · #00B9BF as TEXT on white        = 2.42:1  (FAIL — headings, eyebrows, links)
   So the brand teal is used ONLY for fills, borders and decorative shapes.
   Anything that carries meaning uses:
     --cta         #007E82  = 4.88:1 with white text   (buttons, sticky bar)
     --brand-ink   #007E82  = 4.88:1 as text on white  (eyebrows, links, accents)
     --brand-ink-2 #00696D  = 5.52:1 as text on --surface-2
   --brand-ink is only AA against WHITE. On the tinted surfaces it drops to
   4.15:1, so teal text sitting on --surface/--surface-2 (footer, trust bar)
   must use --brand-ink-2 instead.
   ========================================================================== */

:root{
  --brand:#00B9BF;        /* decorative fills / borders ONLY — never text on white */
  --brand-ink:#007E82;    /* AA-safe teal for text on white: 4.88:1 */
  --brand-ink-2:#00696D;  /* AA-safe teal for text on tinted surfaces: 5.52:1 */
  --cta:#007E82;          /* AA-safe with white text: 4.88:1 */
  --cta-hover:#00696D;

  --bg:#FFFFFF;
  --surface:#F6F6F4;
  --surface-2:#EDEDE9;
  --line:#E2E2DD;
  --line-strong:#D2D2CB;

  --text:#141414;
  --muted:#4A4A4A;        /* 8.9:1 on white */
  --muted-2:#6B6B6B;      /* 4.8:1 on white */
  --err:#B3261E;          /* 5.9:1 on white */

  /* Dark band tokens. The page is white end to end, which reads flat, so two
     full-bleed dark photo bands break it into chapters. Contrast on --dark:
       --on-dark        #F4F4F1  16.7:1
       --on-dark-muted  #C9C9C2  10.5:1
       --brand          #00B9BF   7.7:1  ← teal is finally usable as text here
     The photo behind these sits under a near-opaque scrim, so the ratios above
     are measured against --dark itself, not against the image. */
  --dark:#12100F;
  --on-dark:#F4F4F1;
  --on-dark-muted:#C9C9C2;

  --radius:14px;
  --wrap:1240px;
  --bar-h:64px;
  --shadow:0 2px 10px rgba(20,20,20,.06);
  --shadow-lg:0 18px 44px rgba(20,20,20,.14);

  --font-h:"Anybody",system-ui,sans-serif;
  --font-e:"Antonio",system-ui,sans-serif;
  --font-b:"Roboto",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* --scroll-pad is kept in sync with the live sticky header height by main.js. */
html{scroll-padding-top:var(--scroll-pad,96px)}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 16px/1.6 var(--font-b);
  padding-bottom:var(--bar-h);
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--brand-ink)}

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

.eyebrow{
  font:400 13px/1.4 var(--font-e);
  letter-spacing:1.7px;text-transform:uppercase;
  color:var(--brand-ink);margin:0 0 10px;
}
.eyebrow--c{text-align:center}

.h2{
  font:800 30px/1.15 var(--font-h);
  text-transform:uppercase;letter-spacing:-.8px;
  margin:0 0 14px;color:var(--text);
}
.h2--c{text-align:center}
/* .br-lg (a <br> that only applied from tablet up) was REMOVED 2026-09-04 along with the
   About band, which held its only instance. If you ever need it again, two things mattered:
   write it as a `@media (max-width:759px){.br-lg{display:none}}` rule so the <br> keeps its
   native behaviour at desktop rather than relying on `display:inline` on a replaced-ish
   element, and ALWAYS author a real space before the tag — the <br> supplies the word gap
   while visible, and hiding it without a space welds the two words together
   ("...board and trainis a place..."). The space collapses on desktop, so it costs nothing. */

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--cta);color:#fff;text-decoration:none;
  font:700 16px/1 var(--font-h);text-transform:uppercase;letter-spacing:.3px;
  padding:16px 22px;border:0;border-radius:10px;cursor:pointer;
  text-align:center;transition:background .15s ease,transform .15s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--cta-hover)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
.btn--sm{padding:11px 14px;font-size:13px;border-radius:8px}
.btn--full{width:100%;padding:17px 20px;font-size:17px}
/* Ghost buttons take --brand-ink-2, not --brand-ink. A transparent background means the
   button inherits whatever band it lands on, and the Trailhead card is tinted --surface-2,
   where --brand-ink measures 4.15:1 — an AA fail at 16px. The darker ink clears AA on
   white AND on both tints, so the button stays safe wherever it gets reused. */
.btn--ghost{
  background:transparent;color:var(--brand-ink-2);
  border:2px solid var(--brand-ink-2);padding:13px 18px;
}
.btn--ghost:hover{background:var(--brand-ink-2);color:#fff}
/* Header call button. Numerals get tabular figures and normal letter-spacing so
   the number does not read as an uppercase label like the other CTAs. */
.btn--tel{gap:8px;letter-spacing:0;font-variant-numeric:tabular-nums}
.btn__tel-i{font-size:15px;line-height:1}

/* ---------- 1. Trust bar ---------- */
/* ENLARGED 2026-09-04 per client: "hard to notice". It was 11px uppercase at 1.2px tracking
   in --muted on a --surface-2 tint — legible, but designed to recede, which is the wrong job
   for the line carrying the campaign's entire wedge (free pickup). Three changes, all of
   them the reason it is now visible:
     1. DARK BAND. --surface-2 is a whisper against the white header below it; --dark makes
        the strip an object instead of a texture. This is the first band on the page, and the
        white sticky header directly beneath keeps the alternation intact.
     2. REAL TYPE SIZE. 13.5px -> 15px, up from 11px.
     3. NO UPPERCASE. At 11px, caps + tracking is a legibility aid. At 15px it is the
        opposite: it widens the line by roughly a third, forcing a 3-line wrap at 380px, and
        all-caps is slower to read. Sentence case fits and reads faster.
   Contrast uses the established dark-band tokens, so no new colour maths: --on-dark on
   --dark is 16.7:1 and --brand on --dark is 7.7:1. Both pass AA comfortably. */
.trustbar{background:var(--dark)}
.trustbar__inner{
  display:flex;align-items:center;justify-content:center;gap:8px;
  flex-wrap:wrap;padding-top:12px;padding-bottom:12px;
  font:700 13.5px/1.35 var(--font-e);
  letter-spacing:.2px;color:var(--on-dark);
  text-align:center;
}
.trustbar__inner strong{font-weight:800;color:var(--on-dark)}
/* Separator is decorative and aria-hidden — it carries no meaning for anyone reading or
   listening, so it is exempt from AA, but it still has to be SEEN or it separates nothing.
   --brand is the accent that reads on --dark.
   It is hidden below the point where the two claims wrap onto separate lines, because a dot
   left dangling at the end of line 1 reads as a typo. That point USED to be 760px; dropping
   uppercase made the line about a third narrower, so it is now 359px — measured, not
   guessed (the bar is one line from 360px up, two lines below). Which means the dot is now
   visible at every real phone width instead of none of them, and it is needed there: two
   adjacent bold phrases separated only by whitespace read as one run-on sentence.
   If the copy ever grows, re-measure and move this breakpoint. */
.trustbar__sep{color:var(--brand)}
@media (max-width:359px){.trustbar__sep{display:none}}
@media (min-width:760px){
  .trustbar__inner{font-size:15px;gap:12px;padding-top:14px;padding-bottom:14px}
}

/* ---------- 2. Sticky header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.hdr__inner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:10px;padding-bottom:10px;
}
.hdr__logo{display:block;flex:0 1 auto;min-width:0}
.hdr__logo img{width:auto;height:48px}

/* ---------- 3. Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--bg)}
.hero__bg{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.95) 50%,#fff 100%),
    url("../img/hero-900.jpg") center 18% / cover no-repeat;
}
@media (min-width:900px){
  .hero__bg{
    background:
      linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.90) 46%,rgba(255,255,255,.60) 100%),
      url("../img/hero-1600.jpg") center 42% / cover no-repeat;
  }
}
.hero__inner{padding-top:34px;padding-bottom:44px}
.hero__shot{display:block;width:100%;height:auto;margin:18px 0 4px}
@media (min-width:900px){ .hero__shot{display:none} }

.hero h1{
  font:800 clamp(30px,7.4vw,50px)/1.06 var(--font-h);
  text-transform:uppercase;letter-spacing:-1.6px;
  margin:0 0 14px;color:var(--text);
}
.hero h1 .hl{color:var(--brand-ink)}

/* Pain-point subheadline */
.hero__sub{
  font:600 clamp(17px,4.4vw,21px)/1.35 var(--font-h);
  color:var(--text);margin:0 0 14px;max-width:34ch;
}
.hero__sub em{color:var(--brand-ink);font-style:normal}

.proof{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:9px}
.proof li{position:relative;padding-left:30px;font-size:15px;color:var(--muted)}
.proof li::before{
  content:"";position:absolute;left:0;top:5px;width:19px;height:19px;
  border-radius:50%;background:var(--cta);
}
.proof li::after{
  content:"";position:absolute;left:6px;top:10px;width:7px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}

/* Google review rating — hero.
   The big figure is the Google AVERAGE (5.0), read off the live Business
   Profile on 2026-09-03; the count sits beside it in the label. This replaced
   an earlier count-only treatment once blocker #15 was resolved, so ignore any
   surviving note that calls the number a count.
   Stars are decorative (aria-hidden); the score and count are real text, so the
   claim is never carried by a glyph alone. Both numbers move — re-read the
   profile before each campaign launch and never round the average up. */
.ratingbox{
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:rgba(255,255,255,.72);
  padding:18px;margin:0 0 30px;
}
.ratingbox__score{
  display:flex;align-items:center;gap:14px;
  padding-bottom:16px;margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
.ratingbox__n{
  font:800 clamp(40px,11vw,54px)/.9 var(--font-h);
  letter-spacing:-2px;color:var(--text);white-space:nowrap;
}
.ratingbox__plus{color:var(--brand-ink)}
.ratingbox__meta{display:flex;flex-direction:column;gap:5px;min-width:0}
.ratingbox__stars{
  color:#8C6500;              /* 5.28:1 on white — measured, not eyeballed */
  font-size:19px;letter-spacing:3px;line-height:1;
}
.ratingbox__lbl{
  font:700 12px/1.3 var(--font-e);letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted);
}
/* The checklist lives inside the box, so it drops the standalone bottom margin. */
.ratingbox .proof{margin:0}
@media (min-width:520px){
  .ratingbox .proof{grid-template-columns:1fr 1fr;gap:10px 18px}
}

/* ---------- Lead form ---------- */
.lf{
  background:var(--bg);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  padding:22px 18px;
  box-shadow:var(--shadow-lg);
}
.lf__title{
  font:800 24px/1.1 var(--font-h);text-transform:uppercase;
  letter-spacing:-.6px;margin:0 0 6px;color:var(--text);
}
.lf__sub{margin:0 0 18px;font-size:14px;color:var(--muted-2);line-height:1.5}
.lf__row{margin-bottom:14px}
.lf__grid{display:grid;gap:0 12px}
@media (min-width:480px){.lf__grid{grid-template-columns:1fr 1fr}}
.lf__row label{
  display:block;margin-bottom:6px;
  font:500 13px/1.3 var(--font-b);color:var(--muted);
}
.lf input,.lf textarea{
  width:100%;padding:13px 14px;font:400 16px/1.4 var(--font-b);
  color:var(--text);background:#fff;
  border:1px solid var(--line-strong);border-radius:9px;
  appearance:none;
}
.lf textarea{min-height:104px;resize:vertical}
.lf input::placeholder,.lf textarea::placeholder{color:#8C8C8C}
.lf input:focus,.lf textarea:focus{
  outline:none;border-color:var(--brand-ink);
  box-shadow:0 0 0 3px rgba(0,126,130,.18);
}
.lf input[aria-invalid="true"],.lf textarea[aria-invalid="true"]{border-color:var(--err)}
.lf__err{display:block;margin-top:5px;font-size:12.5px;color:var(--err)}
.lf__err:empty{margin-top:0}
/* "(optional)" marker. Lighter weight than the label so the field still scans as
   secondary, but it is real text inside the <label> — not a placeholder — so it is
   announced with the field rather than vanishing on focus. */
.lf__opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted-2)}
.lf__fine{margin:12px 0 0;text-align:center;font-size:12.5px;line-height:1.5;color:var(--muted-2)}
.lf__fine a{color:var(--brand-ink);font-weight:600}
.lf__status{margin:10px 0 0;font-size:14px;color:var(--text);text-align:center;font-weight:500}
.lf__status:empty{margin:0}

/* ---------- 4. Credentials ---------- */
.creds{background:var(--surface);border-block:1px solid var(--line);padding:26px 0}

/* Stat strip. 2-up on mobile so the numbers stay large enough to register.
   The divider rule and bottom spacing were dropped when the certification
   chips were cut — the strip is now the only thing inside .creds, so a
   border-bottom would just float above the section's own bottom edge. */
.stats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:20px 12px;
}
.stats li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
/* min-height + flex-end give all four display lines a SHARED BASELINE. Needed because one
   stat is a word at a smaller size than the numerals: without this its shorter line box lets
   the whole column ride up, and the fourth label starts ~15px above the other three, which
   reads as a broken row. Locking the box to the numeral height and sitting the text on its
   bottom edge makes any future mixed-size stat align for free. */
.stats__n{
  font:800 clamp(28px,7vw,38px)/1 var(--font-h);
  letter-spacing:-1px;color:var(--brand-ink);
  display:flex;align-items:flex-end;justify-content:center;
  min-height:clamp(28px,7vw,38px);
}
.stats__l{
  font:400 11.5px/1.3 var(--font-e);letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted);max-width:18ch;
}
/* A stat with no number. "Off-Leash" is 9 characters where "4" is 1, so at the numeral size
   it would either overflow its column or force the whole strip to two rows on desktop.
   Dropping to ~55% of the display size and restoring normal tracking (the -1px is a numeral
   fix and looks cramped on letters) makes it sit at the same optical weight as the digits. */
.stats__n--word{font-size:clamp(20px,5vw,26px);letter-spacing:-.2px}

/* .stats--2 was replaced by .stats--4 on 2026-09-04 when the strip went from two stats to
   four. The modifier stays explicit rather than living on .stats itself, so a future location
   page with a different stat count has to opt in on purpose instead of inheriting a grid that
   silently leaves an orphan in the last row.
   2x2 on mobile, not 4-up: four columns at 380px is ~85px each, which shrinks "1,000+" past
   the point where a number registers as a number. */
.stats--4{grid-template-columns:1fr 1fr;gap:22px 18px;max-width:1040px;margin-inline:auto}
@media (min-width:860px){
  .stats--4{grid-template-columns:repeat(4,1fr);gap:24px}
}

/* ---------- 8. Free evaluation ----------
   Band order through this stretch is deliberate, because two tinted sections in a row
   lose the card edges. Updated 2026-09-04 after the restructure:
   band--pickup(dark) > mosaic(photo) > evalsec(white) > programs(surface). */
/* Mobile-first here is DELIBERATELY the compact treatment. This section has to clear one
   phone viewport (client, 2026-09-07), so on phones the four steps are a tight numbered
   stack with no card chrome at all — no border, no shadow, no box padding. The card look
   comes back at 560px where there is vertical room for it. Do not move the card styling
   back into the base rule. */
.evalsec{padding:40px 0}
/* Numbered, because the order is the reassurance: watch, diagnose, price, opt out. */
.evalsec__list{
  list-style:none;counter-reset:ev;margin:22px 0 0;padding:0;
  display:grid;gap:12px;
}
.evalsec__list li{
  counter-increment:ev;position:relative;
  padding-left:42px;
}
.evalsec__list li::before{
  content:counter(ev);
  position:absolute;left:0;top:1px;
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--cta);color:#fff;
  font:700 13.5px/1 var(--font-h);
}
.evalsec__list h3{
  margin:0 0 2px;font:700 15.5px/1.3 var(--font-h);
  text-transform:uppercase;letter-spacing:-.3px;color:var(--text);
}
.evalsec__list p{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.evalsec__cta{display:flex;justify-content:center;margin-top:26px}

@media (min-width:560px){
  .evalsec{padding:52px 0}
  .evalsec__list{gap:14px;margin-top:30px}
  .evalsec__list li{
    background:var(--bg);border:1px solid var(--line-strong);
    border-radius:var(--radius);padding:20px 20px 20px 62px;
    box-shadow:var(--shadow);
  }
  .evalsec__list li::before{left:18px;top:19px;width:28px;height:28px;font-size:14px}
  .evalsec__list h3{margin-bottom:5px;font-size:16.5px}
  .evalsec__list p{line-height:1.55}
  .evalsec__cta{margin-top:30px}
}


/* Shared section lede. Was .picker__sub until the self-selection module was deleted
   2026-09-04; renamed because a class called "picker" with no picker on the page is
   a trap for the next person. Still used by .programs and .revs. */
.lede{text-align:center;color:var(--muted-2);margin:0 0 28px}

/* ---------- Dark photo band ---------- */
/* Full-bleed dark chapter break. The photo is decorative — every word sits on the
   scrim, never on raw image — so the image is a CSS background with no alt text, and
   losing it costs nothing but the colour.
   ONE band left as of 2026-09-04 (the closer). The About band was removed, and with it
   .band--pickup, .band__inner, .band__lead, .eyebrow--l, .h2--l and the whole .tally
   block — all dead the moment that markup went. The .band base and the scrim stay
   generic so a second band is a two-line addition, not a rebuild. */
.band{
  position:relative;isolation:isolate;
  padding:56px 0;background:var(--dark);color:var(--on-dark);
  background-size:cover;background-position:center;
}
/* Scrim. .92 not .6: the photos are busy and mid-tone, and a light scrim would make
   the measured contrast depend on which pixel the letter happens to land on. */
.band::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(18,16,15,.94),rgba(18,16,15,.90));
}
.band--closer{background-image:url("../img/band-closer-900.jpg")}
@media (min-width:901px){
  .band--closer{background-image:url("../img/band-closer-1600.jpg")}
}

/* Edge-to-edge photo strip. With the About band gone this is the only thing breaking the
   white run between the reviews and the programs grid, so it carries more weight than it
   did. 2-up on phones, 4-up from 700px — four squares side by side on a 380px screen
   would be 95px each, which is a thumbnail, not a photo. */
.mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.mosaic img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
@media (min-width:700px){ .mosaic{grid-template-columns:repeat(4,1fr)} }

/* ---------- 6. Programs ---------- */
.programs{padding:52px 0;background:var(--surface)}
.prog__grid{display:grid;gap:20px;margin-top:28px}
.prog{
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow);
}
.prog:focus-visible,.prog:target{outline:3px solid var(--cta);outline-offset:3px}
.prog__img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 30%}
.prog__body{padding:20px 18px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
/* Entry / Core / Premium — makes the base-camp-to-summit ladder readable at a glance. */
.prog__tier{
  margin:0;align-self:flex-start;
  background:var(--surface-2);border-radius:99px;padding:4px 11px;
  font:700 10.5px/1 var(--font-e);letter-spacing:1.4px;
  text-transform:uppercase;color:var(--brand-ink-2);
}
.prog__name{font:800 21px/1.15 var(--font-h);text-transform:uppercase;letter-spacing:-.5px;margin:0}
.prog__len{
  margin:0;font:400 12px/1 var(--font-e);letter-spacing:1.4px;
  text-transform:uppercase;color:var(--brand-ink);
}
.prog__body p{margin:0;font-size:15px;color:var(--muted);line-height:1.55}
.prog__for{font-size:14px !important;color:var(--muted-2) !important}
.prog__for strong{color:var(--text)}
.prog .btn{margin-top:auto;align-self:flex-start}

/* ---------- 6b. What's included ---------- */
/* .programs above is --surface, so this band goes white and .revs below stays white
   with tinted cards. */
/* Seven items in seven bordered cards ran to ~830px on a phone. The client called it out
   (2026-09-07), so on mobile this is a tick-mark CHECKLIST — no boxes, no borders, no
   card padding, and no uppercase on the item titles (caps widen a line by roughly a third
   and were pushing several of these to two lines). Cards and caps return at 560px, where
   the grid goes 2-up shortly after and the height stops mattering. */
.incl{padding:40px 0}
.incl__img{
  display:block;width:100%;margin:22px 0 0;
  aspect-ratio:16/7;object-fit:cover;
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.incl__list{
  list-style:none;margin:22px 0 0;padding:0;
  display:grid;gap:13px;
}
.incl__list li{position:relative;padding-left:28px}
/* Tick drawn from two borders — no icon font, no extra markup, no request. */
.incl__list li::before{
  content:"";position:absolute;left:3px;top:4px;
  width:6px;height:11px;
  border-right:2.5px solid var(--brand-ink);border-bottom:2.5px solid var(--brand-ink);
  transform:rotate(45deg);
}
.incl__list h3{
  margin:0 0 1px;font:700 15.5px/1.3 var(--font-h);
  letter-spacing:-.2px;color:var(--text);
}
/* --muted is 7.4:1 on --surface and 8.86:1 on white, so it is AA in both treatments. */
.incl__list p{margin:0;font-size:14px;line-height:1.45;color:var(--muted)}

@media (min-width:560px){
  .incl{padding:52px 0}
  .incl__img{margin-top:28px}
  .incl__list{gap:12px;margin-top:24px}
  .incl__list li{
    background:var(--surface);border:1px solid var(--line-strong);
    border-left:4px solid var(--brand);
    border-radius:var(--radius);padding:18px 18px 18px 20px;
  }
  .incl__list li::before{display:none}
  .incl__list h3{
    margin-bottom:5px;font-size:16.5px;
    text-transform:uppercase;letter-spacing:-.3px;
  }
  .incl__list p{font-size:14.5px;line-height:1.55}
}

/* ---------- 5. Reviews + behavior picker ---------- */
.revs{padding:52px 0}
/* Review-count proof. Replaced a 13px uppercase eyebrow 2026-09-04 pm: the strongest number
   on the page was set in the smallest type in its own section, because "eyebrow" is a label
   style and labels get read last. One flex row that wraps, so the stars sit beside the number
   on desktop and stack above it on a phone rather than squeezing the digits. */
.revs__proof{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:4px 10px;margin:0 0 14px;text-align:center;
}
/* Same measured #8C6500 as the hero rating box — 5.28:1 on white. Gold star glyphs at their
   default colour fail AA badly, and these are aria-hidden decoration only because the text
   beside them already says "5-star". */
.revs__stars{
  color:#8C6500;font-size:22px;letter-spacing:3px;line-height:1;
  flex-basis:100%;                /* own line: 5 glyphs + the number on one row is a jumble */
}
.revs__proof-n{
  font:800 clamp(38px,10vw,52px)/.95 var(--font-h);
  letter-spacing:-2px;color:var(--brand-ink);
}
.revs__proof-t{
  font:800 clamp(15px,4vw,19px)/1.2 var(--font-h);
  letter-spacing:-.2px;color:var(--text);
}
/* Behavior picker. A native <select> replaced four filter chips 2026-09-04 — it holds
   ten specific symptoms in the vertical space the chips used for four vague ones, and
   on mobile it opens the OS picker instead of wrapping to three rows. Native element,
   so keyboard, screen-reader and mobile behaviour come for free. */
.revpick{
  display:flex;flex-direction:column;align-items:center;gap:11px;margin-top:28px;
}
/* Promoted 2026-09-04 pm from a 13px uppercase micro-label to the sentence that tells the
   visitor what to do. Sentence case and --text, not uppercase teal: it now reads as an
   instruction rather than a field name, which is the job the client asked this section to do.
   Still a real <label> for the select's accessible name. */
.revpick__lab{
  font:400 clamp(15px,4vw,17px)/1.4 var(--font-b);
  color:var(--text);text-align:center;max-width:34ch;
}
/* The select is now the thing the whole section points at, so it is styled as a control that
   asks to be used: brand-coloured border rather than the generic --line-strong hairline, and
   a shadow so it lifts off the flat white band instead of sitting flush in it. */
.revpick__sel{
  width:100%;max-width:460px;cursor:pointer;
  font:500 16px/1.3 var(--font-b);color:var(--text);
  background:#fff;border:2px solid var(--brand-ink);border-radius:var(--radius);
  box-shadow:0 2px 10px rgba(0,126,130,.14);
  padding:15px 42px 15px 16px;
  /* Own arrow — the platform one is inconsistent and sits too tight on iOS. */
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23007E82' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px;
}
.revpick__sel:hover{border-color:var(--cta);box-shadow:0 3px 14px rgba(0,126,130,.22)}
.revpick__sel:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
/* Program recommendation — the one job the deleted picker cards did that the
   filter alone does not. */
.revpick__rec{
  margin:14px 0 0;text-align:center;
  font-size:15.5px;line-height:1.5;color:var(--muted);
}
.revpick__rec[hidden]{display:none}
.revpick__rec a{color:var(--brand-ink);font-weight:700}
.revs__track[hidden]{display:none}
.rev[hidden]{display:none}
.revs__empty{
  margin:28px auto 0;max-width:44ch;text-align:center;
  font-size:15.5px;line-height:1.6;color:var(--muted);
}
.revs__empty[hidden]{display:none}
.revs__empty a{color:var(--brand-ink);font-weight:700}
/* Flex, not grid: grid shrinks implicit tracks to fit the container instead
   of overflowing it, which collapses the scroll area to scrollWidth == clientWidth. */
.revs__track{
  display:flex;
  gap:16px;margin-top:28px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:4px 0;
}
.revs__track::-webkit-scrollbar{display:none}
/* Cards are TINTED on a white section, not white on white.
   .revs now sits between .creds (--surface) and the dark pickup band, so the section
   itself must stay white or .creds and .revs run together as one tinted slab. That
   left white cards on a white background, where only a hairline border said "card".
   Flipping the tint onto the card gives the edge real contrast without touching the
   band alternation. Consequence: --brand-ink is only AA against WHITE (4.15:1 on
   tint), so the figcaption drops to --brand-ink-2. */
.rev{
  flex:0 0 86%;
  scroll-snap-align:start;margin:0;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius);padding:24px 20px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:var(--shadow);
}
/* Quote text goes to full --text: it is the thing being read, and --muted was
   carrying a "secondary copy" weight the reviews do not deserve. */
.rev blockquote{margin:0;font-size:15.5px;line-height:1.65;color:var(--text)}
.rev blockquote::before{content:"\201C"}
.rev blockquote::after{content:"\201D"}
.rev figcaption{
  font:700 14px/1 var(--font-h);text-transform:uppercase;
  letter-spacing:.4px;color:var(--brand-ink-2);margin-top:auto;
  padding-top:14px;border-top:1px solid var(--line-strong);
}
.revs__ctrl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px}
.revs__ctrl[hidden]{display:none}
.revs__arrow{
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  background:#fff;border:1px solid var(--line-strong);color:var(--brand-ink);
  font-size:16px;line-height:1;
}
.revs__arrow:hover{border-color:var(--brand-ink);background:var(--surface)}
.revs__arrow:disabled{opacity:.35;cursor:default}
.revs__dots{display:flex;gap:8px}
.revs__dots button{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  background:var(--line-strong);border:0;
}
.revs__dots button[aria-current="true"]{background:var(--cta);width:22px;border-radius:99px}

/* ---------- 8. About ---------- */
.about{padding:52px 0;background:var(--surface)}
/* .about__team was REMOVED 2026-09-04 with the team-1400.jpg group shot — this section is
   two trainer photos and nothing else now. Preserved here for whoever restores the asset:
   it is a brush-edge CUTOUT, not a rectangular photo, so it must never be cropped and never
   gets a card border, radius or shadow — a hard rectangle drawn around torn edges looks like
   a mistake. It was shown whole at its own aspect ratio:
   display:block; width:100%; max-width:720px; height:auto; margin:22px auto 0 */
.about__grid{display:grid;gap:22px;margin-top:22px}
.tr{
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
.tr__img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 25%}
.tr__body{padding:20px 18px 24px}
.tr__role{
  margin:0 0 4px;font:400 12px/1 var(--font-e);letter-spacing:1.5px;
  text-transform:uppercase;color:var(--brand-ink);
}
.tr__name{font:800 24px/1.1 var(--font-h);text-transform:uppercase;letter-spacing:-.7px;margin:0 0 12px}
.tr__pull{
  margin:0 0 14px;padding-left:14px;border-left:3px solid var(--brand);
  font-size:15.5px;line-height:1.5;color:var(--text);font-style:italic;
}
.tr__body>p{margin:0 0 16px;font-size:15px;color:var(--muted);line-height:1.6}
.tr__creds{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.tr__creds li{
  background:var(--surface-2);border-radius:99px;
  padding:7px 13px;font-size:12px;color:var(--muted);
}

/* ---------- 9. How it works — DELETED 2026-09-07 ----------
   .how, .how__list, .step, .step__n, .step__t and .how__cta went with the section (see
   the note where section 11 used to be in index.html). Verified orphaned in the live DOM,
   not just by grep, before removal: querySelectorAll for each returned 0.
   The one thing worth keeping from it: the step-number circle used --cta at 34px, which
   is the same pattern .evalsec__list li::before uses at 28px. If numbered steps ever come
   back anywhere, reuse that, don't invent a third size. */

/* ---------- 10. Service area ---------- */
/* This band was --surface until the How It Works section was deleted 2026-09-07. That
   section was the white band between .about (tinted) and this one, so removing it left
   two tinted bands touching and the cards inside them lost their edges. The band is now
   white and the cards are tinted — the same inversion the FAQ below already uses. If How
   It Works ever comes back, put both of these back to --surface / --bg together. */
.area{padding:52px 0}
.area__sub{text-align:center;color:var(--muted-2);margin:0 auto 28px;max-width:62ch}
/* Replaced the four-state map + city table when the section went Richmond-only.
   Three answers to the three questions a Richmond buyer actually has about a
   facility that is not in their city. Cards are tinted on the white band. */
.area__facts{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.area__facts li{
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius);padding:22px 20px;
}
.area__facts-t{
  margin:0 0 8px;font:700 17px/1.25 var(--font-h);
  text-transform:uppercase;letter-spacing:-.3px;color:var(--text);
}
.area__facts p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.area__note{margin:20px 0 0;font-size:13.5px;color:var(--muted-2);text-align:center}

/* ---------- 10b. FAQ ---------- */
/* White band with tinted cards, same as .area above it. .closer below is a dark photo
   band, so the eye still gets a hard break at the bottom of this one. */
.faq{padding:52px 0}
.faq__list{max-width:760px;margin:30px auto 0;display:grid;gap:10px}
.faq__i{
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius);
}
.faq__i summary{
  cursor:pointer;list-style:none;
  padding:16px 46px 16px 18px;position:relative;
  font:700 15.5px/1.4 var(--font-h);color:var(--text);
}
.faq__i summary::-webkit-details-marker{display:none}
/* Chevron drawn from borders so it needs no icon font and no extra markup. */
.faq__i summary::after{
  content:"";position:absolute;right:20px;top:22px;
  width:8px;height:8px;
  border-right:2px solid var(--brand-ink-2);border-bottom:2px solid var(--brand-ink-2);
  transform:rotate(45deg);transition:transform .18s ease;
}
.faq__i[open] summary::after{transform:rotate(-135deg);top:25px}
.faq__i summary:focus-visible{outline:3px solid var(--cta);outline-offset:-3px;border-radius:var(--radius)}
.faq__i summary:hover{color:var(--brand-ink-2)}
.faq__i p{
  margin:0;padding:0 18px 18px;
  font-size:14.5px;line-height:1.65;color:var(--muted);
}

/* ---------- 11. Closer ---------- */
/* Second dark band (see .band). It follows .faq, which is white, so without this the
   page ended on two white sections and the final ask had no edge at all. */
.closer{padding:52px 0 56px}
.closer__inner{max-width:640px;text-align:center}
/* The offer, stated before anything else in the band. Solid --brand fill with #0B1414
   ink rather than outlined brand text: an outline pill on a photo band is only as legible
   as the pixel behind it, and this band is a photograph. Measured 7.73:1. */
.closer__badge{
  display:inline-block;margin:0 0 16px;
  background:var(--brand);color:#0B1414;
  border-radius:999px;padding:8px 18px;
  font:800 13.5px/1 var(--font-e);letter-spacing:1.2px;text-transform:uppercase;
}
/* text-wrap:balance, not a smaller font-size. At 380px "STOP MANAGING YOUR DOG." wrapped
   with "DOG." alone on line two, which was half of why this section read as unformatted.
   Shrinking the type to fit it on one line only works down to ~376px and then breaks
   again; balancing holds at every width. Unsupported browsers just get the old wrap. */
.closer__h{
  font:800 clamp(26px,6.5vw,38px)/1.1 var(--font-h);
  text-transform:uppercase;letter-spacing:-1px;margin:0 0 12px;color:var(--on-dark);
  text-wrap:balance;
}
.closer__p{margin:0 auto 26px;color:var(--on-dark-muted);max-width:52ch;line-height:1.65}
/* The form stays on a white card. Restyling every label, input border and error
   message for a dark surface is a lot of new contrast surface area to get wrong,
   and a white card on a dark band reads as the thing to fill in anyway.
   The teal top rule is what lifts it off the photograph — without it the card was a
   plain white rectangle, which is exactly the complaint this section got. */
.lf--closer{
  text-align:left;background:var(--bg);
  border:0;border-top:5px solid var(--brand);
  border-radius:var(--radius);padding:26px 20px;box-shadow:var(--shadow-lg);
}
.lf--closer .lf__title{text-align:center}
/* Last proof the visitor sees before the submit button. Same gold as the review stars:
   the default star yellow fails AA on white, #8C6500 measures 5.28:1. */
.lf__proof{
  margin:0 0 18px;text-align:center;
  font:600 13.5px/1.4 var(--font-b);color:var(--muted);
}
.lf__proof-s{display:block;color:#8C6500;font-size:17px;letter-spacing:2.5px;line-height:1}

/* ---------- 12. Footer ---------- */
.ftr{background:var(--surface-2);border-top:1px solid var(--line);padding:38px 0 0}
.ftr__inner{display:grid;gap:26px}
.ftr__logo{height:64px;width:auto;margin-bottom:14px}
.ftr__col h3{
  font:700 14px/1 var(--font-h);text-transform:uppercase;
  letter-spacing:.6px;color:var(--brand-ink-2);margin:0 0 12px;
}
.ftr__col p{margin:0 0 9px;font-size:14px;color:var(--muted);line-height:1.6}
/* Footer sits on --surface-2, so its links need the darker teal. */
.ftr__col a{color:var(--brand-ink-2)}
.ftr__policy{color:var(--muted-2) !important;font-size:13px !important}
.ftr__base{
  margin-top:32px;padding-top:18px;padding-bottom:22px;
  border-top:1px solid var(--line-strong);
}
.ftr__base p{margin:0;font-size:12.5px;color:var(--muted-2);text-align:center}

/* ---------- Service area map ---------- */
/* The Richmond asset is a LIGHT map sitting on the light .area band — the opposite problem
   from the dark four-state graphic it replaced. A shadow alone is not enough separation
   between two near-white surfaces, so it also carries a hairline border. Keep both. */
.areamap{
  position:relative;margin:30px auto 0;max-width:900px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);
}
.areamap__img{display:block;width:100%;height:auto}
/* Dead centre, and that is not a guess: tools/make-richmond-map.py generates the image
   centred on Richmond's coordinates, so 50%/50% IS Richmond by construction. Percentages so
   it tracks the image at any width; translate(-50%,-50%) centres the pin on the point rather
   than hanging it off the corner. Positioning lives on the WRAPPER, not the ring, so the ring
   and its label move together — offsetting them separately drifts them apart as the image
   scales. */
/* ZERO-SIZE anchor, not a flex column. A flex column centres the ring and label as a GROUP,
   which puts the true Richmond point in the gap between them and slides the ring visibly off
   the city. This pins a 0x0 origin exactly on Richmond; the ring centres on that origin and
   the label hangs below it. Both are positioned from the same point, so they still move
   together when the image scales. */
.areamap__pin{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.areamap__ring{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  border:3px solid var(--brand);
  box-shadow:0 0 0 5px rgba(0,185,191,.22);
}
/* Flat opaque pill, deliberately NOT a translucent one: this sits on arbitrary map pixels, so
   any transparency makes the text contrast depend on whatever is underneath it and therefore
   unverifiable. Opaque --dark with --on-dark text is 16.7:1 no matter where it lands. */
/* top:35px = half the 54px ring + an 8px gap, so the pill clears the ring's edge instead of
   overlapping it. The <=520px block re-derives this from the smaller ring. */
.areamap__pin-l{
  position:absolute;left:0;top:35px;transform:translateX(-50%);
  background:var(--dark);color:var(--on-dark);
  padding:5px 11px;border-radius:999px;white-space:nowrap;
  font:800 12.5px/1 var(--font-e);letter-spacing:.6px;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
/* There is deliberately NO attribution rule here. The required ODbL credit is burned into the
   image pixels by tools/make-richmond-map.py. An .areamap__cred bar was written and removed
   the same day: it sat exactly on top of the burned-in credit, so the map showed the same
   line twice with one half-covering the other. If a future asset ships WITHOUT the burn-in,
   the bar has to come back — and it must use a flat near-opaque fill, never a gradient scrim,
   because a gradient makes the effective background depend on which map pixel each letter
   lands on and the contrast becomes unverifiable. That was a real bug on this page. */

/* The four-state <dl class="states"> city list and its 6 rules (.states, __col, __st, __c,
   __me + two breakpoints) were DELETED 2026-09-04 with the Richmond-only rewrite. Two things
   worth keeping if a four-state page is ever built again: the grid stepped 1 -> 2 cols at
   560px -> 4 cols at 900px, because four columns of city names at 380px are unreadable; and
   .states__me restyled <mark> completely (background:none) since <mark> defaults to a yellow
   highlight in every browser and would otherwise drop a highlighter stripe on the ad city. */
@media (max-width:520px){
  .areamap__ring{width:38px;height:38px;border-width:2px;box-shadow:0 0 0 4px rgba(0,185,191,.22)}
  .areamap__pin-l{top:27px;font-size:11.5px;padding:4px 9px}  /* 38/2 + 8 */
}
@media (prefers-reduced-motion:no-preference){
  /* Draws the eye once on arrival, then stops. An infinite pulse next to a form is a
     distraction, and it would still be moving while someone is typing. */
  .areamap__ring{animation:ringpop 1.6s ease-out 2}
  @keyframes ringpop{
    0%,100%{box-shadow:0 0 0 5px rgba(0,185,191,.22)}
    50%{box-shadow:0 0 0 12px rgba(0,185,191,0)}
  }
}

/* ---------- 13. Sticky offer bar ---------- */
/* ONE tap target as of 2026-09-04. The phone half was removed per client, and with it all
   the shrink-to-fit machinery this block used to carry: the .callbar__tel divider, the
   two-column flex split, and the <360px rule that collapsed the number to a handset glyph
   so the offer could keep its words. None of it is needed when the bar holds one label. */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  height:var(--bar-h);
  display:flex;align-items:stretch;
  background:var(--cta);
  box-shadow:0 -4px 18px rgba(20,20,20,.20);
}
.callbar__cta{
  flex:1 1 auto;min-width:0;padding:0 12px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;text-decoration:none;white-space:nowrap;
  font:700 16px/1 var(--font-h);text-transform:uppercase;letter-spacing:.3px;
}
.callbar__cta:hover{background:var(--cta-hover)}
.callbar__cta:focus-visible{outline:3px solid #fff;outline-offset:-4px}
@media (max-width:440px){
  .callbar__cta{font-size:14px;letter-spacing:0}
}

/* ==========================================================================
   Tablet / desktop
   ========================================================================== */
@media (min-width:700px){
  .h2{font-size:38px}
  .prog__grid{grid-template-columns:repeat(3,1fr)}
  .ftr__inner{grid-template-columns:1.6fr 1fr 1fr}
  .rev{flex-basis:48%}
  .evalsec__list{grid-template-columns:1fr 1fr}
  .incl__list{grid-template-columns:1fr 1fr}
}

@media (min-width:900px){
  .hdr__logo img{height:58px}
  .btn--sm{padding:13px 20px;font-size:14px}

  .hero__inner{
    display:grid;grid-template-columns:1.05fr .95fr;
    gap:48px;align-items:center;
    padding-top:64px;padding-bottom:76px;
  }
  .hero h1{letter-spacing:-2.2px}
  .lf{padding:28px 26px}

  .about__grid{grid-template-columns:repeat(2,1fr)}
  .area__facts{grid-template-columns:repeat(3,1fr);gap:18px}
  .programs,.revs,.about,.area{padding:72px 0}
  .evalsec,.incl,.faq{padding:72px 0}
  .band{padding:72px 0}
  .closer{padding:72px 0 80px}
  .rev{flex-basis:32%}
  /* The last "included" item is odd-numbered in a 2-up grid, so it would sit alone
     in a half-width box. Span it so the stack ends flush. */
  .incl__list li:last-child:nth-child(odd){grid-column:1 / -1}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}