/* Winnipeg Pet Nanny · site stylesheet, v2
   Brand: pet-nanny-brain/masters/Brand.md (look C "Bold Blue", P-17; type P-18).
   Every colour, size and space comes from the tokens below.
   Contrast (computed, WCAG 2.x): ink/white 17.29, ink/pale 15.01, blue/white 9.72,
   blue/pale 8.43, white/blue 9.72, pale/blue 8.43, ink/tangerine 7.34,
   ink/tangerine-press 6.32, ink-soft/white 8.86, ink-soft/pale 7.69.
   Never: tangerine as text on white (2.36), white on tangerine. */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-next-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* colour */
  --white: #FFFFFF;          /* ground */
  --blue: #1239A6;           /* brand: name, headings, header/footer and hero bands */
  --ink: #0E1A33;            /* all body text, the sticker outline carried into the UI */
  --ink-soft: #3D4A66;       /* secondary text only */
  --tangerine: #FF8A1F;      /* the action, and only the action; always ink text */
  --tangerine-press: #F57A0A;
  --pale: #E8EFFF;           /* panels and cards */
  --pale-rule: #C9D6F5;      /* hairlines on pale */
  --band-rule: rgba(255, 255, 255, 0.28); /* hairlines on blue */

  /* type */
  --display: "Nunito", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, sans-serif;
  --body-size: 1.125rem;   /* 18px phone */
  --lh: 1.6;
  --h1: clamp(2.75rem, 1.7rem + 4.8vw, 5.5rem);
  --h1-home: clamp(3rem, 1.8rem + 4.6vw, 5.25rem);
  --h2: clamp(2rem, 1.45rem + 2.4vw, 3.25rem);
  --h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --track-name: -0.035em;
  --track-head: -0.025em;
  --small: 1rem;           /* nothing on the site goes below 16px */

  /* space */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;
  --gutter: 1rem;
  --max: 78rem;
  --measure: 36em;
  --section: var(--s8);

  /* shape */
  --r-field: 14px;
  --r-card: 20px;
  --r-panel: 32px;
  --r-pill: 999px;
  --outline: 2px solid var(--ink);
  --tap: 3rem;  /* 48px minimum tap target */
  --bar-h: 4.75rem;
}
@media (min-width: 56rem) {
  :root {
    --body-size: 1.25rem; /* 20px desktop */
    --gutter: 2.5rem;
    --section: var(--s9);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--body-size);
  line-height: var(--lh);
  font-variant-numeric: lining-nums;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 900;
  color: var(--blue);
  line-height: 1.02;
  letter-spacing: var(--track-head);
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
h1 { font-size: var(--h1); margin-bottom: var(--s5); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.1; }
p { margin: 0 0 var(--s4); max-width: var(--measure); }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: var(--s2); }
strong { font-weight: 700; }

a { color: var(--blue); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 2px; font-weight: 700; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: var(--s4); top: -10rem;
  background: var(--ink); color: var(--white); padding: var(--s3) var(--s4); z-index: 50; border-radius: var(--r-pill);
}
.skip:focus { top: var(--s4); color: var(--white); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section--tint { background: var(--pale); }
.label {
  font-family: var(--text);
  font-size: var(--small);
  font-weight: 700;
  color: var(--blue);
  margin: 0 0 var(--s3);
  letter-spacing: 0.01em;
}
.lede { font-size: 1.15em; line-height: 1.5; }

/* Visible TODO markers: preview only, never ship one live. */
.todo {
  background: var(--pale);
  color: var(--ink);
  border: 2px dashed var(--ink);
  padding: 0 0.3em;
  font-weight: 700;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.todo-block {
  border: 2px dashed var(--ink);
  background: var(--pale);
  color: var(--ink);
  padding: var(--s4) var(--s5);
  max-width: var(--measure);
  margin: 0 0 var(--s5);
  border-radius: var(--r-card);
}
.todo-block p:last-child { margin-bottom: 0; }

/* ---------- Header: the blue band ---------- */
.site-head { background: var(--blue); color: var(--white); }
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3) var(--s4); min-height: 5rem; flex-wrap: wrap;
  padding-top: var(--s2); padding-bottom: var(--s2);
}
.mark {
  display: inline-flex; align-items: center; gap: var(--s3);
  text-decoration: none; color: var(--white); line-height: 1;
}
.mark:hover { color: var(--white); }
.mark__badge {
  width: 2.75rem; height: 2.75rem; flex: none;
  border-radius: 50%; background: var(--white);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--ink);
}
.mark__name {
  white-space: nowrap;
  font-family: var(--display); font-weight: 900;
  font-size: 1.15rem; letter-spacing: var(--track-name);
}
@media (min-width: 26rem) {
  .mark__badge { width: 3.25rem; height: 3.25rem; }
  .mark__name { font-size: 1.375rem; }
}
@media (min-width: 56rem) {
  .mark__badge { width: 4rem; height: 4rem; }
  .mark__name { font-size: 1.75rem; }
}

.site-head :focus-visible { outline-color: var(--white); }
.nav-toggle {
  display: none;
  font: inherit; font-weight: 700; font-size: var(--small); color: var(--white);
  background: transparent; border: 2px solid var(--white); border-radius: var(--r-pill);
  min-height: var(--tap); padding: 0 var(--s4); cursor: pointer;
}
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); align-items: center; }
.nav li { margin: 0; }
.nav a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--white); text-decoration: none; font-weight: 700; font-size: var(--small);
  border-bottom: 3px solid transparent;
}
.nav a:hover { border-bottom-color: var(--white); }
.nav a[aria-current="page"] { border-bottom-color: var(--tangerine); }
.nav a.nav__cta, .nav a.nav__call { color: var(--ink); border: var(--outline); padding: var(--s2) var(--s5); }
.nav a.nav__call:hover { color: var(--ink); border-bottom: var(--outline); }
.nav a.nav__cta:hover { color: var(--ink); }
.nav a.nav__cta[aria-current="page"] { box-shadow: 0 0 0 3px var(--white); }

.js .nav-toggle { display: inline-flex; align-items: center; }
.js .nav { display: none; width: 100%; padding: var(--s2) 0 var(--s5); border-top: 1px solid var(--band-rule); }
.js .nav.is-open { display: block; }
.js .nav ul { flex-direction: column; align-items: flex-start; }
.js .nav .nav__cta, .js .nav .nav__call { margin-top: var(--s3); }
@media (min-width: 80rem) {
  .site-head .wrap { flex-wrap: nowrap; }
  .nav ul { flex-wrap: nowrap; column-gap: var(--s3); }
  .nav a.nav__cta, .nav a.nav__call { padding: var(--s2) var(--s4); }
  .site-head .mark__name { font-size: 1.5rem; }
  .nav a { white-space: nowrap; }
  .js .nav-toggle { display: none; }
  .js .nav, .nav { display: block; width: auto; padding: 0; border-top: 0; }
  .js .nav ul { flex-direction: row; align-items: center; }
  .js .nav .nav__cta, .js .nav .nav__call { margin-top: 0; }
}

/* ---------- Buttons: round pills with the sticker's ink outline ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: var(--s3) var(--s6);
  font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; text-align: center;
  border-radius: var(--r-pill); border: var(--outline); cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.btn--action { background: var(--tangerine); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.btn--action:hover { background: var(--tangerine-press); color: var(--ink); transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.btn--action:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
/* The call button: same size, outline and drop edge as the action pill, so calling and booking carry equal weight (P-25 item 5). */
.btn--line { background: var(--white); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.btn--line:hover { background: var(--pale); color: var(--ink); transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.btn--line:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn--big { min-height: 3.75rem; padding: var(--s3) var(--s7); font-size: 1.15em; }
.btn--quiet { background: var(--white); color: var(--blue); border-color: var(--blue); }
.btn--quiet:hover { background: var(--pale); color: var(--blue); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); align-items: center; margin-top: var(--s6); }
.actions .btn { padding-left: var(--s5); padding-right: var(--s5); }
.call-line { font-weight: 700; }

/* ---------- Hero ---------- */
.hero { padding: var(--s7) 0 var(--section); }
.hero__grid { display: grid; gap: var(--s6); align-items: center; }
.hero h1 { max-width: 12ch; }
.hero .lede { max-width: 30em; }
.hero__art { margin: 0; }
.hero__art img { width: 100%; max-width: min(34rem, 82vw); margin: 0 auto; }
.hero__art--small img { max-width: 20rem; }
/* The illustrations are JPGs on a 253-254 near-white field; lift it to true white so no grey box shows on the white ground. */
.hero__art img, .close__art img, .mark__badge { filter: brightness(1.02); }
.hero--home { padding-top: var(--s5); }
.hero--home h1 { font-size: var(--h1-home); line-height: 0.98; max-width: 12ch; }
@media (min-width: 56rem) {
  .hero { padding-top: var(--s8); }
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); }
  .hero--home .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

/* Interior heroes sit on the blue band, white type */
.hero--band { background: var(--blue); color: var(--white); border-top: 1px solid var(--band-rule); }
.hero--band h1, .hero--band h2 { color: var(--white); }
.hero--band .label { color: var(--white); }
.hero--band a:not(.btn) { color: var(--white); }
.hero--band a:not(.btn):hover { color: var(--pale); }
.hero--band :focus-visible { outline-color: var(--white); }
.hero--band .photo figcaption { color: var(--white); }
@media (max-width: 55.99rem) {
  .hero__grid--face-first > .photo { order: -1; max-width: 12.5rem; }
}
.hero--band .rates a:not(.btn), .hero--band .todo-block a { color: var(--blue); }

/* ---------- Photographs and placeholders ---------- */
.photo { margin: 0; }
.photo > img { width: 100%; border-radius: var(--r-panel); }
.hero--band .photo > img { box-shadow: 0 0 0 2px var(--ink), 0 8px 0 2px var(--ink); }
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(18, 57, 166, 0.07) 22px 23px),
    var(--pale);
  border: 2px dashed var(--blue);
  border-radius: var(--r-panel);
  display: flex; align-items: flex-end;
  padding: var(--s5);
  color: var(--ink);
}
.ph--4x5 { aspect-ratio: 4 / 5; }
.ph--3x2 { aspect-ratio: 3 / 2; }
.ph__text { font-size: var(--small); line-height: 1.45; max-width: 22em; margin: 0; }
.ph__text strong { display: block; color: var(--blue); letter-spacing: 0.04em; margin-bottom: var(--s1); }
.photo figcaption { font-size: var(--small); color: var(--ink-soft); margin-top: var(--s3); }

/* ---------- Promise band (true items show; credentials wait) ---------- */
.band { background: var(--blue); color: var(--white); }
.band h3 { color: var(--white); }
.promises ul { list-style: none; margin: 0; padding: 0; display: grid; }
.promises li { margin: 0; padding: var(--s5) 0; border-bottom: 1px solid var(--band-rule); }
.promises li:last-child { border-bottom: 0; }
.promises h3 { font-size: 1.5rem; margin-bottom: var(--s2); }
.promises p { margin: 0; }
@media (min-width: 56rem) {
  .promises ul { grid-template-columns: repeat(3, 1fr); }
  .promises li { padding: var(--s7) var(--s6); border-bottom: 0; border-left: 1px solid var(--band-rule); }
  .promises li:first-child { border-left: 0; padding-left: 0; }
}

/* ---------- The rate card ---------- */
.rates {
  background: var(--pale);
  border-radius: var(--r-panel);
  padding: var(--s5) var(--s4);
  max-width: 44rem;
  color: var(--ink);
}
.rates__head { margin: 0 var(--s2) var(--s3); }
.rates__head h2, .rates__head h3 { margin: 0; color: var(--blue); font-size: var(--h3); }
.rates__head p { margin: var(--s2) 0 0; font-size: var(--small); color: var(--ink-soft); }
.rates dl { margin: 0; }
.rate-group {
  background: var(--white); border-radius: var(--r-card);
  padding: var(--s4) var(--s5); margin-top: var(--s3);
}
.rate-group dt { font-family: var(--display); font-weight: 900; letter-spacing: var(--track-head); font-size: 1.375rem; line-height: 1.15; color: var(--blue); }
.rate-group dt span { display: block; font-family: var(--text); font-weight: 400; letter-spacing: 0; font-size: var(--small); color: var(--ink-soft); margin-top: var(--s1); line-height: 1.4; }
.rate-group dd { margin-left: 0; }
.rates__note { margin: var(--s3) var(--s2) 0; font-size: var(--small); color: var(--ink-soft); line-height: 1.45; }
.rate { display: flex; align-items: baseline; gap: var(--s2); margin: var(--s2) 0 0; }
.rate__what { flex: 0 1 auto; }
.rate__dots { flex: 1 1 1rem; border-bottom: 2px dotted var(--pale-rule); transform: translateY(-0.3em); min-width: 1rem; }
.rate__price {
  font-family: var(--display); font-weight: 900; font-size: 1.75rem; line-height: 1; color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
}
@media (min-width: 56rem) { .rates { padding: var(--s6); } .rates__head { margin: 0 0 var(--s3); } }
.hero--band .rates { box-shadow: 0 0 0 2px var(--ink), 0 8px 0 2px var(--ink); }

/* ---------- Steps: a stacked numbered list, not a third three-up row ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); counter-reset: step; }
.steps li {
  margin: 0; counter-increment: step;
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 var(--s4);
  background: var(--white); border-radius: var(--r-card); padding: var(--s4) var(--s5) var(--s5) var(--s4);
}
.steps li::before {
  content: counter(step);
  grid-row: span 2;
  display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--blue); color: var(--white);
  font-family: var(--display); font-weight: 900; font-size: 1.5rem; line-height: 1;
}
.steps h3 { margin: var(--s2) 0 var(--s2); }
.steps p { margin: 0; }

/* ---------- Two-column prose with photo ---------- */
.split { display: grid; gap: var(--s6); }
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s8); align-items: start; }
  .split--flip > :first-child { order: 2; }
}

/* ---------- Service detail ---------- */
.service {
  background: var(--white); border-radius: var(--r-card);
  padding: var(--s5); display: grid; gap: var(--s3) var(--s7);
  margin-top: var(--s4);
}
.service h3 { margin: 0; }
.service p:last-child { margin-bottom: 0; }
.service__price { font-family: var(--display); font-weight: 900; letter-spacing: -0.02em; font-size: 1.5rem; line-height: 1.2; font-variant-numeric: tabular-nums; margin: var(--s2) 0 0; color: var(--ink); }
@media (min-width: 56rem) { .service { grid-template-columns: 18rem minmax(0, 1fr); padding: var(--s6); } }

.declines { border-left: 6px solid var(--tangerine); padding-left: var(--s5); max-width: var(--measure); }

/* ---------- FAQ ---------- */
.faq { max-width: 48rem; display: grid; gap: var(--s3); margin-top: var(--s6); }
.faq details { background: var(--white); border-radius: var(--r-card); }
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 900; letter-spacing: var(--track-head); font-size: 1.3rem; line-height: 1.25; color: var(--blue);
  padding: var(--s4) 3.75rem var(--s4) var(--s5); min-height: var(--tap); position: relative;
  border-radius: var(--r-card);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: var(--s4); top: 50%; transform: translateY(-50%);
  width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--pale); color: var(--blue);
  font-family: var(--text); font-weight: 700; font-size: 1.4rem; line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 var(--s5) var(--s5); }
.faq details > div p:last-child { margin-bottom: 0; }

.areas { columns: 2 9rem; column-gap: var(--s6); list-style: none; padding: 0; margin: var(--s5) 0; max-width: 46rem; }
.areas li { break-inside: avoid; padding-left: 1em; position: relative; }
.areas li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--tangerine); }

/* ---------- Forms: large, plain, one column; numbered groups ---------- */
.form { display: grid; gap: var(--s6); max-width: 40rem; }
.form--wide { max-width: 46rem; }
.group { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s5); min-width: 0; }
.group > legend {
  display: flex; align-items: center; gap: var(--s3); padding: 0; margin-bottom: var(--s5);
  font-family: var(--display); font-weight: 900; letter-spacing: var(--track-head); font-size: var(--h3); line-height: 1.1; color: var(--blue);
}
.group__num {
  display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--blue); color: var(--white); font-size: 1.25rem;
}
.group + .group { border-top: 2px solid var(--pale-rule); padding-top: var(--s6); }
.field { display: grid; gap: var(--s2); min-width: 0; }
.field label, .field > legend { font-weight: 700; }
.field .hint, .group > .hint { font-size: var(--small); color: var(--ink-soft); margin: 0; }
.field input, .field textarea, .field select {
  font: inherit; font-size: max(1rem, var(--body-size)); color: var(--ink);
  background: var(--white); border: var(--outline); border-radius: var(--r-field);
  padding: var(--s3) var(--s4); min-height: var(--tap); width: 100%;
}
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.4rem) 55%, calc(100% - 1rem) 55%;
  background-size: 0.4rem 0.4rem; background-repeat: no-repeat;
}
.field ::placeholder { color: var(--ink-soft); opacity: 1; }
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: #B3261E; box-shadow: 0 0 0 1px #B3261E; }
.field-row { display: grid; gap: var(--s5); }
@media (min-width: 36rem) { .field-row { grid-template-columns: 1fr 1fr; } }
.choices { border: 0; padding: 0; margin: 0; }
.choices > legend { padding: 0; margin-bottom: var(--s2); }
.choice {
  display: flex; align-items: center; gap: var(--s3); min-height: var(--tap);
  font-weight: 400 !important; cursor: pointer;
}
.choice input { width: 1.5rem; height: 1.5rem; min-height: 0; margin: 0; flex: none; accent-color: var(--blue); }
.choice--consent { align-items: flex-start; }
.choice--consent input { margin-top: 0.2em; }
.req { color: var(--ink-soft); font-weight: 400; font-size: var(--small); }
.pet { display: grid; gap: var(--s5); background: var(--pale); border-radius: var(--r-card); padding: var(--s5); }
.pet__title { font-weight: 700; margin: 0; }
.more-pet { border: 2px solid var(--pale-rule); border-radius: var(--r-card); }
.more-pet > summary {
  cursor: pointer; font-weight: 700; color: var(--blue); min-height: var(--tap);
  display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s5);
}
.more-pet > summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--pale); }
.more-pet[open] > summary::before { content: "\2212"; }
.more-pet[open] { border-color: transparent; }
.more-pet[open] > .pet { margin-top: var(--s2); }
.note-box { font-size: var(--small); background: var(--pale); border-left: 6px solid var(--tangerine); padding: var(--s3) var(--s4); border-radius: 0 var(--r-field) var(--r-field) 0; margin: 0; }
.field-error { color: #B3261E; font-weight: 700; font-size: var(--small); margin: 0; }
.form-errors { border: 2px solid #B3261E; border-radius: var(--r-card); padding: var(--s4) var(--s5); background: #FDF1F0; }
.form-errors p { margin: 0 0 var(--s2); font-weight: 700; }
.form-errors ul { margin: 0; }
.form-errors a { color: #8C1D18; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--small); color: var(--ink-soft); margin: 0; }
.form-status { font-weight: 700; padding: var(--s4); border: 2px solid var(--ink); background: var(--pale); border-radius: var(--r-card); margin: 0; }
.form-status:empty { display: none; }
.form[aria-busy="true"] button[type="submit"] { opacity: 0.7; cursor: progress; }
.sent { background: var(--pale); border-radius: var(--r-panel); padding: var(--s6) var(--s5); border: var(--outline); box-shadow: 0 8px 0 var(--ink); }
.sent h2 { margin-bottom: var(--s3); }
.sent p:last-child { margin-bottom: 0; }
.already { margin-top: var(--s6); font-size: var(--small); }
.actions--tight { margin-top: var(--s5); margin-bottom: var(--s6); }
.text-link { font-weight: 700; }
.errors li { margin-bottom: var(--s2); }
.animals { list-style: none; padding: 0; margin: 0 0 var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2); }
.animals li { margin: 0; background: var(--pale); border-radius: var(--r-pill); padding: var(--s1) var(--s4); font-weight: 700; }
.prose { max-width: 46rem; }
.prose h2 { font-size: var(--h3); margin-top: var(--s6); }

/* "Rather talk?" card with Joyce's round portrait */
.or-call {
  background: var(--pale); border-radius: var(--r-panel); padding: var(--s5);
  margin-top: var(--s6); display: grid; grid-template-columns: auto 1fr; gap: var(--s4) var(--s5); align-items: center;
}
.or-call h2 { margin: 0 0 var(--s1); }
.or-call p { margin: 0; }
.portrait-round {
  width: 6rem; height: 6rem; border-radius: 50%;
  border: 4px solid var(--white); box-shadow: 0 0 0 2px var(--ink);
}

/* ---------- Closing call to action: a big pale panel ---------- */
.section:not(.section--tint):not(.hero--band) + .close { padding-top: 0; }
.close__panel {
  background: var(--pale); border-radius: var(--r-panel);
  padding: var(--s6) var(--s5);
  display: grid; gap: var(--s6); align-items: center;
}
.close__panel h2 { max-width: 14ch; }
.close__art { margin: 0; justify-self: center; }
.close__art img {
  width: min(16rem, 70vw); border-radius: 50%; background: var(--white);
  border: 6px solid var(--white); box-shadow: 0 0 0 2px var(--ink);
}
@media (min-width: 56rem) {
  .close__panel { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s8); }
  .close__art img { width: 20rem; }
}

/* ---------- Footer: the blue band again ---------- */
.site-foot { background: var(--blue); color: var(--white); padding: var(--s8) 0 var(--s7); }
.site-foot a { color: var(--white); }
.site-foot a:hover { color: var(--pale); }
.site-foot :focus-visible { outline-color: var(--white); }
.site-foot .mark__name { font-size: 1.75rem; }
.foot-grid { display: grid; gap: var(--s6); }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin: 0; }
.foot-grid li a { display: inline-flex; align-items: center; min-height: var(--tap); }
.foot-grid p { margin: 0 0 var(--s2); }
.site-foot .todo { color: var(--ink); }
.foot-fine { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--band-rule); font-size: var(--small); }
@media (min-width: 56rem) { .foot-grid { grid-template-columns: 2fr 1fr 1fr; } }

/* ---------- Phone bottom bar: call and meet, always one thumb away ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2);
  padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));
  background: var(--white); border-top: var(--outline);
}
.callbar .btn { padding: var(--s2) var(--s3); font-size: var(--small); min-height: var(--tap); box-shadow: none; }
body { padding-bottom: var(--bar-h); }
@media (min-width: 56rem) {
  .callbar { display: none; }
  body { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .btn--action:hover, .btn--action:active { transform: none; }
}
@media (forced-colors: active) {
  .btn, .rates, .ph, .close__panel, .service, .faq details { border: 2px solid CanvasText; }
}
@media print {
  .callbar, .nav, .nav-toggle, .skip { display: none !important; }
  body { padding-bottom: 0; background: #fff; }
}

/* ---------- Utilities ---------- */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.h3 { font-size: var(--h3); }
.foot-about { margin-top: var(--s4); }
.plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.plain-list li { padding: var(--s4) var(--s5); margin: 0; background: var(--white); border-radius: var(--r-card); }
@media (min-width: 56rem) {
  .split--photo-first { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
}
.declines--note { margin-bottom: var(--s6); }

/* Live-site guard (21 Oct 2026): build notes and unshot photo placeholders never show to visitors.
   They stay in the source for the build; remove a placeholder's figure when the real photo goes in. */
.todo { display: none !important; }
figure.photo:has(.ph) { display: none !important; }