/* ════════════════════════════════════════════════════════════
   Carter's Critter Care - "Field Notebook" website styles
   ────────────────────────────────────────────────────────────
   A hand-bound Pacific-Northwest nature journal: cream kraft
   paper, chunky ink-brown outlines, rotated sticker badges,
   scalloped/torn dividers, paw-trail connectors, polaroid photo
   frames, and a wall of hand-drawn specimen cards for Carter's
   real exotic crew. Matte paper - no gradients, no glass.
   Primitives live in the DS bundle; this is composition only.
   ════════════════════════════════════════════════════════════ */

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

body {
  margin: 0;
  background-color: var(--cream-100);
  /* faint ledger + dotted texture so the page reads as paper, not flat fill */
  background-image:
    radial-gradient(var(--paper-dot) 1.4px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: -11px -11px;
  color: var(--text-body);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.app { min-height: 100vh; position: relative; }
.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }

/* Grid items default to min-width:auto and refuse to shrink below their
   content, which can overflow narrow viewports. Let our grid children
   shrink to their track. */
.hero__grid > *, .svc-grid > *, .crew__grid > *, .welcome > *,
.about-hero__grid > *, .book-grid > *, .values > *, .report > * { min-width: 0; }
.section { padding-block: var(--space-20); }
.section--tight { padding-block: var(--space-12); }
.text-brand { color: var(--brand); }
.text-blue { color: var(--blue-600); }
.text-coral { color: var(--coral); }
img { max-width: 100%; display: block; }

/* Subtle, repeatable entrance - gated behind .is-in for reduced-motion safety */
@keyframes cc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cc-pop  { from { opacity: 0; transform: scale(.82) rotate(var(--rot, 0deg)); } to { opacity: 1; transform: scale(1) rotate(var(--rot, 0deg)); } }

.reveal { animation: cc-rise var(--dur-slow) var(--ease-out) both; }
.reveal-1 { animation-delay: 60ms; }
.reveal-2 { animation-delay: 140ms; }
.reveal-3 { animation-delay: 220ms; }
.reveal-4 { animation-delay: 300ms; }
.reveal-5 { animation-delay: 380ms; }

/* ════════ Shared decorative pieces ════════ */

/* Eyebrow with a little ink rule before it, like a journal label */
.cc-eyebrow { color: var(--brand); }
.eyebrow-rule { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow-rule::before {
  content: ""; width: 26px; height: 2.5px; border-radius: 3px;
  background: var(--brand); flex: none;
}
.eyebrow-rule.is-blue { color: var(--blue-600); }
.eyebrow-rule.is-blue::before { background: var(--blue-500); }
.eyebrow-rule.is-coral { color: var(--coral); }
.eyebrow-rule.is-coral::before { background: var(--coral); }
.eyebrow-rule.on-ink { color: var(--green-300); }
.eyebrow-rule.on-ink::before { background: var(--green-400); }

/* Rotated hand-cut sticker badge (the signature element) */
.sticker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-sm); line-height: 1;
  padding: 9px 15px; border-radius: var(--radius-pill);
  background: var(--butter); color: var(--ink-900);
  border: var(--ink-stroke) solid var(--ink-900);
  box-shadow: var(--shadow-pop);
  transition: transform var(--dur-base) var(--ease-bounce), box-shadow var(--dur-base) var(--ease-out);
}
.sticker svg { font-size: 1.05em; }
.sticker--mint   { background: var(--mint); }
.sticker--sky    { background: var(--sky); }
.sticker--peach  { background: var(--peach); }
.sticker--coral  { background: var(--coral); color: #fff; }
.sticker--green  { background: var(--green-400); color: #fff; }
.sticker--cream  { background: var(--cream-50); }
.sticker--rot-l  { transform: rotate(-4deg); }
.sticker--rot-r  { transform: rotate(3.5deg); }

/* Caveat handwritten caption with a little leader */
.aside-hand {
  font-family: var(--font-hand); font-weight: 700;
  font-size: var(--text-lg); color: var(--ink-700); line-height: 1.15;
}
.aside-hand--brand { color: var(--green-600); }
.aside-hand--blue { color: var(--blue-600); }

/* Scalloped divider - a torn-paper wave between bands of color.
   Implemented with a repeating radial mask so it tints to any fill. */
.scallop {
  display: block; width: 100%; height: 26px; border: 0; margin: 0;
  --sc: 26px;
  background: var(--scallop-fill, var(--cream-50));
  -webkit-mask: radial-gradient(circle var(--sc) at 50% 0, transparent 98%, #000) repeat-x 0 0 / calc(var(--sc) * 2) 100%;
          mask: radial-gradient(circle var(--sc) at 50% 0, transparent 98%, #000) repeat-x 0 0 / calc(var(--sc) * 2) 100%;
}
.scallop--up {
  -webkit-mask: radial-gradient(circle var(--sc) at 50% 100%, transparent 98%, #000) repeat-x 0 0 / calc(var(--sc) * 2) 100%;
          mask: radial-gradient(circle var(--sc) at 50% 100%, transparent 98%, #000) repeat-x 0 0 / calc(var(--sc) * 2) 100%;
}

/* Paw-trail connector - a meander of paws walking down/across the page */
.paw-trail { display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--cream-400); }
.paw-trail svg { width: 26px; height: 26px; flex: none; }
.paw-trail svg:nth-child(2) { transform: translateY(-10px) rotate(12deg); }
.paw-trail svg:nth-child(3) { transform: translateY(6px) rotate(-8deg); }
.paw-trail svg:nth-child(4) { transform: translateY(-8px) rotate(10deg); }
.paw-trail svg:nth-child(5) { transform: translateY(4px) rotate(-6deg); }

/* Hand-drawn doodle stroke defaults (inline critter SVGs) */
.doodle { display: block; }
.doodle * {
  stroke: var(--ink-900); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.doodle .fill-mint   { fill: var(--mint); stroke: var(--ink-900); }
.doodle .fill-butter { fill: var(--butter); stroke: var(--ink-900); }
.doodle .fill-sky    { fill: var(--sky); stroke: var(--ink-900); }
.doodle .fill-peach  { fill: var(--peach); stroke: var(--ink-900); }
.doodle .fill-coral  { fill: var(--berry); stroke: var(--ink-900); }
.doodle .fill-green  { fill: var(--green-300); stroke: var(--ink-900); }
.doodle .fill-cream  { fill: var(--cream-50); stroke: var(--ink-900); }
.doodle .ink         { fill: var(--ink-900); stroke: none; }
.doodle .nofill      { fill: none; }

/* ════════ Nav ════════ */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream-50);
  border-bottom: var(--ink-stroke) solid var(--ink-900);
  box-shadow: 0 6px 0 -3px rgba(55,29,16,.06), 0 14px 24px rgba(55,29,16,.06);
}
.site-nav__inner {
  width: min(100% - 40px, var(--container-wide)); margin-inline: auto;
  display: flex; align-items: center; gap: 16px;
  min-height: 124px; padding-block: 6px;
}
.site-brand { display: flex; align-items: center; text-decoration: none; flex: none; border-radius: var(--radius-md); }
.site-brand:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.site-brand__logo { height: 111px; width: auto; display: block; transition: transform var(--dur-base) var(--ease-bounce); }
.site-brand:hover .site-brand__logo { transform: rotate(-2deg) scale(1.02); }
.site-nav__links { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.site-nav__link {
  position: relative; font-family: var(--font-display); font-weight: 700;
  font-size: 16px; color: var(--ink-700); text-decoration: none; white-space: nowrap;
  padding: 9px 15px 11px; border-radius: var(--radius-pill);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.site-nav__link:hover { background: var(--cream-200); color: var(--ink-900); text-decoration: none; }
.site-nav__link.is-active { color: var(--green-700); }
.site-nav__link.is-active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 3px;
  background: var(--green-500); border-radius: 3px;
  transform: scaleX(1); transform-origin: left;
  animation: cc-underline var(--dur-base) var(--ease-out) both;
}
@keyframes cc-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.site-nav__cta { margin-left: 10px; flex: none; }
.site-nav__menu { margin-left: auto; display: none; }

/* ──────── Mobile menu (additive; hidden until the ≤760px breakpoint) ────────
   Default state below keeps the hamburger trigger AND the slide-down panel
   fully hidden, so desktop (and the 761-900px band, where the links are still
   visible) renders exactly as before. The trigger is revealed, and the panel
   becomes positionable, only inside @media (max-width: 760px). ── */
.site-nav__toggle { display: none; }      /* shown at ≤760px */
.site-nav__overlay { display: none; }     /* the panel only mounts when open,
                                             but guard it for desktop anyway */

.site-nav__toggle {
  align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; flex: none;
  background: var(--butter); color: var(--ink-900);
  border: var(--ink-stroke) solid var(--ink-900);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-bounce),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.site-nav__toggle:hover { background: var(--cream-300); }
.site-nav__toggle:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 0 var(--ink-900); }
.site-nav__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.site-nav__toggle.is-open { background: var(--green-300); }

.site-nav__toggle-box {
  position: relative; display: block; width: 22px; height: 16px;
}
.site-nav__toggle-bar {
  position: absolute; left: 0; right: 0; height: 2.6px; border-radius: 3px;
  background: var(--ink-900);
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              top var(--dur-base) var(--ease-out);
}
.site-nav__toggle-bar:nth-child(1) { top: 0; }
.site-nav__toggle-bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.site-nav__toggle-bar:nth-child(3) { top: 100%; transform: translateY(-100%); }
/* morph to an X when open */
.site-nav__toggle.is-open .site-nav__toggle-bar:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.site-nav__toggle.is-open .site-nav__toggle-bar:nth-child(2) { opacity: 0; }
.site-nav__toggle.is-open .site-nav__toggle-bar:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* Overlay = full-screen scrim + the torn-page panel tucked under the nav bar.
   The sticky nav (z-index:50) stays above the scrim so the bar + X are tappable. */
.site-nav__overlay { position: fixed; inset: 0; z-index: 40; }
.site-nav__scrim {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; cursor: pointer;
  background: rgba(55, 29, 16, 0.46);
  -webkit-tap-highlight-color: transparent;
  animation: cc-scrim-in var(--dur-base) var(--ease-out) both;
}
@keyframes cc-scrim-in { from { opacity: 0; } to { opacity: 1; } }

.site-nav__panel {
  position: absolute; top: var(--nav-h, 74px); left: 0; right: 0; z-index: 45;
  background: var(--cream-50);
  border-bottom: var(--ink-stroke) solid var(--ink-900);
  box-shadow: 0 18px 34px rgba(55, 29, 16, 0.22);
  padding: 10px 20px max(18px, env(safe-area-inset-bottom));
  max-height: calc(100dvh - var(--nav-h, 74px));
  overflow-y: auto; overscroll-behavior: contain;
  transform-origin: top center;
  animation: cc-panel-in var(--dur-slow) var(--ease-out) both;
}
@keyframes cc-panel-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* faint torn-page edge along the panel bottom, echoing the scallop motif */
.site-nav__panel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px;
  background: var(--cream-50);
  -webkit-mask: radial-gradient(circle 12px at 50% 0, transparent 98%, #000) repeat-x 0 0 / 24px 100%;
          mask: radial-gradient(circle 12px at 50% 0, transparent 98%, #000) repeat-x 0 0 / 24px 100%;
}

.site-nav__panel-links { display: flex; flex-direction: column; }
.site-nav__panel-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 12px 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 21px;
  color: var(--ink-800); text-decoration: none;
  border-bottom: 2px dashed var(--line-strong);
  transition: color var(--dur-base) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
}
.site-nav__panel-link:last-child { border-bottom: 0; }
.site-nav__panel-link:hover { text-decoration: none; color: var(--ink-900); padding-left: 12px; }
.site-nav__panel-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.site-nav__panel-link.is-active { color: var(--green-700); }
.site-nav__panel-link.is-active .site-nav__panel-chev { color: var(--green-500); transform: none; }
.site-nav__panel-chev {
  font-weight: 700; color: var(--cream-400);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.site-nav__panel-link:hover .site-nav__panel-chev { transform: translateX(3px); color: var(--green-500); }

.site-nav__panel-cta { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.site-nav__panel-note { font-size: 19px; color: var(--green-600); }

@media (prefers-reduced-motion: reduce) {
  .site-nav__scrim, .site-nav__panel { animation: none; }
}

/* ════════ Hero (asymmetric, overlapping) ════════ */
.hero { position: relative; padding-block: 52px 40px; overflow: visible; }
.hero__grid {
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 52px; align-items: center;
}
.hero__title {
  font-size: clamp(46px, 6.4vw, 92px); line-height: 0.96; letter-spacing: -.03em;
  margin: 18px 0 0; text-wrap: balance;
}
.hero__title .squiggle { position: relative; white-space: nowrap; }
.hero__title .squiggle::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .16em;
  background: var(--butter);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M2 7 Q 17 1 32 6 T 62 6 T 92 6 T 118 6' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x bottom / auto 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M2 7 Q 17 1 32 6 T 62 6 T 92 6 T 118 6' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x bottom / auto 100%;
  z-index: -1;
}
.hero__lead {
  font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; color: var(--ink-700);
  max-width: 34ch; margin: 22px 0 0; line-height: 1.5; text-wrap: pretty;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 30px; }
.hero__hand { margin-top: 22px; display: flex; align-items: center; gap: 12px; }
.hero__hand svg { color: var(--cream-400); width: 40px; height: 28px; flex: none; }

/* Polaroid-style hero photo, tilted, taped to the page */
.hero__art { position: relative; }
.hero__polaroid {
  position: relative; z-index: 2; background: var(--white);
  padding: 14px 14px 56px; border-radius: 8px;
  border: var(--ink-stroke) solid var(--ink-900);
  box-shadow: var(--shadow-pop-lg);
  transform: rotate(2.5deg); max-width: 460px; margin-inline: auto;
  transition: transform var(--dur-slow) var(--ease-bounce);
}
.hero__polaroid:hover { transform: rotate(0deg) scale(1.01); }
.hero__polaroid img {
  width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; object-position: center 16%;
  border-radius: 4px; background: var(--cream-200);
}
.hero__polaroid figcaption {
  font-family: var(--font-hand); font-weight: 700; font-size: 24px;
  color: var(--ink-700); text-align: center; margin-top: 12px; line-height: 1;
}
.hero__tape {
  position: absolute; z-index: 3; top: -16px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 120px; height: 30px; background: rgba(246, 221, 142, .72);
  border: 1px dashed rgba(55,29,16,.25);
}
/* blob behind the polaroid for depth */
.hero__art::before {
  content: ""; position: absolute; z-index: 0; inset: 2% -4% -6% 4%;
  background: var(--green-200);
  border: var(--ink-stroke) solid var(--ink-900);
  border-radius: 58% 42% 46% 54% / 56% 50% 50% 44%;
  transform: rotate(-3deg);
}
/* floating stickers around the hero photo (kept inside the column so they
   never clip the viewport edge) */
.hero__sticker { position: absolute; z-index: 4; max-width: calc(100% - 8px); }
.hero__sticker--report { top: 3%; right: 0; transform: rotate(5deg); }
.hero__sticker--crew { bottom: 14%; left: -6%; transform: rotate(-5deg); }
.hero__sticker--area { bottom: -14px; right: 10%; transform: rotate(-3deg); }

/* little stats ribbon under hero */
.hero__facts {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; padding-top: 24px;
  border-top: 2px dashed var(--line-strong);
}
.hero__fact { display: flex; align-items: center; gap: 10px; }
.hero__fact svg { width: 30px; height: 30px; flex: none; }
.hero__fact b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--ink-900); line-height: 1.05; }
.hero__fact span { font-size: 13px; color: var(--ink-500); font-weight: 700; }

/* ════════ Section heads ════════ */
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.section__head h2 { font-size: clamp(30px, 3.6vw, 46px); margin: 10px 0 0; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
.section__head p { margin: 10px 0 0; color: var(--ink-700); font-size: 17px; max-width: 46ch; }
.section__head--center { flex-direction: column; align-items: center; text-align: center; }
.section__head--center p { margin-inline: auto; }

/* ════════ Service grid (Home) ════════ */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* give each home service card an ink outline + tiny tilt on hover via wrapper */
.svc-grid .cc-svc {
  border: var(--ink-stroke) solid var(--ink-900);
  box-shadow: var(--shadow-pop-soft);
}
.svc-grid .cc-svc .cc-svc__icon { border: 2px solid var(--ink-900); box-shadow: none; }
.svc-grid a.cc-svc:hover { box-shadow: var(--shadow-pop); transform: translateY(-5px); }

/* ════════ Crew specimen wall - THE centerpiece ════════ */
.crew {
  position: relative;
  background: var(--cream-50);
  border-block: var(--ink-stroke) solid var(--ink-900);
  padding-block: var(--space-20);
}
.crew__head { text-align: center; margin-bottom: 14px; }
.crew__head h2 { font-size: clamp(32px, 4.2vw, 56px); margin: 12px 0 0; letter-spacing: -.025em; line-height: 1; text-wrap: balance; }
.crew__head p { margin: 16px auto 0; max-width: 56ch; color: var(--ink-700); font-size: 18px; }
.crew__legend {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
  margin: 22px auto 40px;
}
.crew__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
/* a specimen card: framed line-doodle + field-guide label plate */
.specimen {
  position: relative; background: var(--white);
  border: var(--ink-stroke) solid var(--ink-900);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop-soft);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--dur-base) var(--ease-bounce), box-shadow var(--dur-base) var(--ease-out);
}
.specimen:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: var(--shadow-pop); }
.specimen__art {
  position: relative; aspect-ratio: 1 / 0.82; display: grid; place-items: center;
  background: var(--specimen-bg, var(--cream-100));
  border-bottom: 2px dashed var(--line-strong);
  padding: 14px;
}
.specimen__art .doodle { width: 78%; height: 78%; filter: drop-shadow(2px 3px 0 rgba(55,29,16,.10)); }
.specimen__count {
  position: absolute; top: 8px; right: 8px;
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: var(--radius-pill);
  background: var(--ink-900); color: var(--cream-50);
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-pop-sm);
}
.specimen__no {
  position: absolute; top: 8px; left: 10px;
  font-family: var(--font-hand); font-weight: 700; font-size: 17px; color: var(--ink-400);
}
.specimen__plate { padding: 14px 16px 16px; }
.specimen__common { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ink-900); line-height: 1.1; margin: 0; }
.specimen__latin { font-style: italic; font-size: 13.5px; color: var(--ink-500); margin: 4px 0 0; font-weight: 600; line-height: 1.25; }
.specimen__note { font-family: var(--font-hand); font-weight: 700; font-size: 16px; color: var(--green-600); margin: 8px 0 0; line-height: 1.05; }

/* "and the pitch" card sits in the grid, ink-filled */
.crew__pitch {
  grid-column: span 2; background: var(--ink-900); color: var(--cream-100);
  border: var(--ink-stroke) solid var(--ink-900); border-radius: var(--radius-md);
  padding: 26px 28px; display: flex; flex-direction: column; justify-content: center; gap: 12px;
  box-shadow: var(--shadow-pop-soft);
}
.crew__pitch h3 { color: var(--cream-50); font-size: clamp(20px, 2vw, 26px); margin: 0; line-height: 1.12; text-wrap: balance; }
.crew__pitch p { color: var(--on-ink-soft); margin: 0; font-size: 15.5px; line-height: 1.5; }
.crew__pitch .aside-hand { color: var(--green-300); }

/* ════════ Pet-types band (everyone's welcome) ════════ */
.welcome {
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 44px; align-items: center;
  background: var(--white); border: var(--ink-stroke) solid var(--ink-900);
  border-radius: var(--radius-xl); padding: 44px; box-shadow: var(--shadow-pop-soft);
  position: relative; overflow: hidden;
}
.welcome::before {
  content: ""; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px;
  background: var(--green-200); border-radius: 50%; opacity: .5;
}
.welcome__copy { position: relative; z-index: 1; }
.welcome__copy h2 { font-size: clamp(28px, 3vw, 42px); margin: 10px 0 14px; line-height: 1.04; letter-spacing: -.02em; }
.welcome__copy p { color: var(--ink-700); font-size: 17px; max-width: 40ch; margin: 0; }
.welcome__tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; }
.welcome__tags .cc-tag { font-size: 16px; padding: 0.7em 1.15em; border: 2px solid var(--ink-900); box-shadow: var(--shadow-pop-sm); }

/* ════════ About strip (Home) ════════ */
.about-strip {
  display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center;
  position: relative;
}
.about-strip__photo { position: relative; flex: none; }
.about-strip__photo img {
  width: 200px; height: 200px; object-fit: cover; object-position: center 22%;
  border-radius: var(--radius-lg); border: var(--ink-stroke) solid var(--ink-900);
  box-shadow: var(--shadow-pop); background: var(--cream-200);
}
.about-strip__photo .sticker { position: absolute; bottom: -14px; left: -14px; }
.about-strip__copy h3 { font-size: clamp(24px, 2.6vw, 34px); margin: 8px 0 12px; max-width: 24ch; line-height: 1.08; text-wrap: balance; }
.about-strip__copy p { color: var(--ink-700); font-size: 17px; max-width: 56ch; margin: 0 0 22px; }

/* ════════ CTA band (ink panel) ════════ */
.cta {
  position: relative; overflow: hidden;
  background: var(--ink-900); color: var(--cream-100);
  border-radius: var(--radius-2xl); padding: 56px 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  border: var(--ink-stroke) solid var(--ink-900);
  box-shadow: var(--shadow-pop-lg);
}
.cta::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(rgba(248,234,208,.10) 1.4px, transparent 1.5px);
  background-size: 22px 22px;
}
.cta__copy { position: relative; z-index: 1; }
.cta__copy h2 { color: var(--cream-50); font-size: clamp(28px, 3.4vw, 46px); margin: 10px 0 12px; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
.cta__copy p { color: var(--on-ink-soft); font-size: 17px; max-width: 42ch; margin: 0; }
.cta__action { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex: none; }
.cta__action .aside-hand { color: var(--green-300); }
.cta__paws { position: absolute; right: 40px; bottom: 8px; z-index: 0; color: rgba(248,234,208,.10); display: flex; gap: 12px; }
.cta__paws svg { width: 30px; height: 30px; }

/* ════════ Page head (inner pages) ════════ */
.page-head { position: relative; padding-block: 48px 8px; }
.page-head h1 { font-size: clamp(42px, 5.2vw, 76px); margin: 14px 0 0; letter-spacing: -.025em; line-height: .98; text-wrap: balance; }
.page-head__lead { font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; color: var(--ink-700); max-width: 52ch; margin: 18px 0 0; line-height: 1.5; }
.page-head__tags { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 24px; }

/* ════════ Service rows (Services) ════════ */
.svc-rows { display: flex; flex-direction: column; gap: 22px; }
.svc-row {
  display: grid; grid-template-columns: 110px 1fr auto; align-items: stretch;
  border: var(--ink-stroke) solid var(--ink-900); border-radius: var(--radius-lg);
  background: var(--white); overflow: hidden; box-shadow: var(--shadow-pop-soft);
  transition: transform var(--dur-base) var(--ease-bounce), box-shadow var(--dur-base) var(--ease-out);
}
.svc-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.svc-row__rail { display: grid; place-items: center; border-right: var(--ink-stroke) solid var(--ink-900); padding: 18px 10px; }
.svc-row__rail--peach { background: var(--peach); }
.svc-row__rail--mint { background: var(--mint); }
.svc-row__rail--sky { background: var(--sky); }
.svc-row__rail--butter { background: var(--butter); }
.svc-row__rail .doodle { width: 66px; height: 66px; }
.svc-row__body { padding: 26px 28px; }
.svc-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.svc-row__head h3 { font-size: 25px; margin: 0; }
.svc-row__price { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--brand); white-space: nowrap; font-variant-numeric: tabular-nums; }
.svc-row__price small { font-size: 13px; color: var(--ink-500); font-weight: 700; }
.svc-row__body > p { color: var(--ink-700); margin: 8px 0 16px; font-size: 16px; max-width: 60ch; }
.svc-row__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 9px 22px; }
.svc-row__list li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink-700); }
.svc-row__list i, .svc-row__list svg { color: var(--green-500); font-size: 15px; }
.svc-row__cta { display: grid; place-items: center; padding: 26px 28px; border-left: var(--ink-stroke) solid var(--ink-900); background: var(--cream-50); }

/* ════════ Report-card add-on callout (Services) ════════ */
.report {
  position: relative; display: grid; grid-template-columns: 1fr 0.85fr; gap: 44px; align-items: center;
  background: var(--white); border: var(--ink-stroke) solid var(--ink-900);
  border-radius: var(--radius-xl); padding: 48px; box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.report__copy { position: relative; z-index: 1; }
.report__copy h2 { font-size: clamp(28px, 3vw, 42px); margin: 12px 0 14px; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
.report__copy p { color: var(--ink-700); font-size: 17px; max-width: 46ch; margin: 0 0 18px; }
.report__list { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 11px; }
.report__list li { display: flex; align-items: flex-start; gap: 11px; font-size: 16px; font-weight: 600; color: var(--ink-700); }
.report__list svg { color: var(--green-500); flex: none; margin-top: 2px; width: 20px; height: 20px; }
.report__price { display: inline-flex; align-items: baseline; gap: 4px; }
.report__price b { font-family: var(--font-display); font-weight: 800; font-size: 40px; color: var(--coral); line-height: 1; font-variant-numeric: tabular-nums; }
.report__price span { font-size: 15px; color: var(--ink-500); font-weight: 700; }

/* the faux phone "report card" mockup, hand-framed */
.report__card {
  position: relative; z-index: 1; background: var(--cream-50);
  border: var(--ink-stroke) solid var(--ink-900); border-radius: var(--radius-lg);
  padding: 18px; box-shadow: var(--shadow-pop); transform: rotate(2deg); max-width: 320px; margin-inline: auto;
}
.report__card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.report__card-top .dot { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--ink-900); display: grid; place-items: center; background: var(--green-300); flex: none; }
.report__card-top b { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink-900); line-height: 1; }
.report__card-top span { font-size: 12px; color: var(--ink-500); font-weight: 700; }
.report__card-photo { aspect-ratio: 4/3; border-radius: var(--radius-sm); border: 2px solid var(--ink-900); background: var(--green-200); display: grid; place-items: center; margin-bottom: 12px; overflow: hidden; }
.report__card-photo .doodle { width: 56%; height: 56%; }
.report__card-note { font-family: var(--font-hand); font-weight: 700; font-size: 19px; color: var(--ink-700); line-height: 1.1; }
.report__card-meta { display: flex; gap: 8px; margin-top: 12px; }
.report__chip { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: var(--radius-pill); background: var(--mint); color: var(--moss-700); border: 1.5px solid var(--ink-900); }
.report__chip--sky { background: var(--sky); color: #27566c; }

/* ════════ About page ════════ */
.about-hero { position: relative; padding-block: 44px 8px; }
.about-hero__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: center; }
.about-hero__photo { position: relative; }
.about-hero__frame {
  position: relative; background: var(--white); padding: 14px 14px 52px; border-radius: 8px;
  border: var(--ink-stroke) solid var(--ink-900); box-shadow: var(--shadow-pop-lg);
  transform: rotate(-2.5deg); max-width: 440px; margin-inline: auto;
}
.about-hero__frame img { width: 100%; aspect-ratio: 4/4.4; object-fit: cover; object-position: center 22%; border-radius: 4px; background: var(--cream-200); }
.about-hero__frame figcaption { font-family: var(--font-hand); font-weight: 700; font-size: 24px; color: var(--ink-700); text-align: center; margin-top: 12px; line-height: 1; }
.about-hero__tape { position: absolute; z-index: 3; top: -15px; right: 30px; transform: rotate(6deg); width: 110px; height: 28px; background: rgba(197,232,247,.72); border: 1px dashed rgba(55,29,16,.25); }
.about-hero__sticker { position: absolute; z-index: 4; bottom: 24%; left: -18px; transform: rotate(-5deg); }
.about-hero__copy h1 { font-size: clamp(40px, 5vw, 66px); margin: 12px 0 0; line-height: .98; letter-spacing: -.025em; text-wrap: balance; }
.about-hero__lead { font-size: clamp(19px, 1.7vw, 23px); font-weight: 700; color: var(--ink-900); margin: 18px 0 18px; line-height: 1.3; }
.about-hero__copy p { color: var(--ink-700); font-size: 17px; line-height: 1.65; margin: 0 0 14px; max-width: 58ch; }
.about-hero__sig { font-family: var(--font-hand); font-weight: 700; font-size: 32px; color: var(--green-600); margin: 8px 0 0; }
.about-hero__actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }

/* Values (About) */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.value {
  text-align: left; background: var(--white);
  border: var(--ink-stroke) solid var(--ink-900); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-pop-soft);
  transition: transform var(--dur-base) var(--ease-bounce), box-shadow var(--dur-base) var(--ease-out);
}
.value:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.value__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--value-bg, var(--green-200)); color: var(--ink-900);
  border: 2.5px solid var(--ink-900);
  display: grid; place-items: center; font-size: 26px; margin-bottom: 18px;
}
.value__icon svg { width: 28px; height: 28px; }
.value h3 { font-size: 21px; margin: 0 0 8px; }
.value p { font-size: 15.5px; color: var(--ink-700); margin: 0; line-height: 1.5; }

/* About: crew strip teaser → reuses .crew styles inside a card */
.about-crew { background: var(--cream-50); border: var(--ink-stroke) solid var(--ink-900); border-radius: var(--radius-xl); padding: 44px; box-shadow: var(--shadow-pop-soft); }
.about-crew__head { text-align: center; margin-bottom: 32px; }
.about-crew__head h2 { font-size: clamp(26px, 3vw, 40px); margin: 10px 0 0; line-height: 1.04; }
.about-crew__head p { margin: 14px auto 0; max-width: 54ch; color: var(--ink-700); font-size: 17px; }

/* ════════ Book page ════════ */
.book-grid { display: grid; grid-template-columns: 1.45fr 0.9fr; gap: 28px; align-items: start; }
.book-form-wrap {
  background: var(--white); border: var(--ink-stroke) solid var(--ink-900);
  border-radius: var(--radius-xl); padding: 36px; box-shadow: var(--shadow-pop);
}
.book-form { display: flex; flex-direction: column; gap: 20px; }
.book-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.book-form__fieldset { border: 0; padding: 0; margin: 0; }
.book-form__legend { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink-900); margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.book-form__legend .num { width: 28px; height: 28px; border-radius: 50%; background: var(--green-300); border: 2px solid var(--ink-900); display: grid; place-items: center; font-size: 14px; flex: none; }

/* report-card opt-in: a real selling moment, not a footnote */
.optin {
  border: var(--ink-stroke) solid var(--ink-900); border-radius: var(--radius-lg);
  padding: 20px 22px; background: var(--cream-50); display: grid; grid-template-columns: 1fr auto; gap: 16px 20px; align-items: center;
}
.optin__text b { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ink-900); display: flex; align-items: center; gap: 9px; }
.optin__text b .price { color: var(--coral); }
.optin__text p { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-700); line-height: 1.45; max-width: 46ch; }
.optin__switch { justify-self: end; }
.book-form__lockbox { display: flex; padding: 16px 18px; background: var(--cream-100); border-radius: var(--radius-md); border: 2px solid var(--line-strong); }
.book-form__submit { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin-top: 4px; }
.book-form__note { font-size: 13px; color: var(--ink-500); font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }

/* ════════ Service picker (multi-select chips, Book form) ════════
   A row of hand-cut sticker chips. Each is a visually-hidden checkbox with a
   styled <label>: keyboard-operable, focus-ring visible, screen-reader
   announced. Unselected reads as a calm outline chip; selected snaps to its
   service pastel with a chunky ink outline and a green check. */
.svcpick { border: 0; padding: 0; margin: 0 0 4px; min-width: 0; }
.svcpick__legend {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px;
  padding: 0; margin-bottom: 12px;
  font-family: var(--font-body); font-weight: 800; font-size: var(--text-sm); color: var(--ink-900);
}
.svcpick__opt { font-weight: 700; font-size: 13px; color: var(--ink-500); }
.svcpick__grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.svcpick__chip {
  position: relative; display: flex; align-items: center; gap: 13px;
  min-height: 64px; padding: 12px 16px 12px 13px;
  background: var(--white); color: var(--ink-900); cursor: pointer;
  border: var(--ink-stroke) solid var(--ink-900); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop-sm);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-base) var(--ease-bounce),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.svcpick__chip:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-pop); }
.svcpick__chip:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 0 var(--ink-900); }
/* visible keyboard focus ring on the whole chip */
.svcpick__chip:has(.svcpick__input:focus-visible) { outline: none; box-shadow: var(--focus-ring); }

.svcpick__input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }

/* doodle on a small white tile so it stays crisp on white AND pastel chips */
.svcpick__art {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); border: 2px solid var(--ink-900);
  transition: background-color var(--dur-base) var(--ease-out);
}
.svcpick__art .doodle { width: 30px; height: 30px; }
.svcpick__art svg { width: 24px; height: 24px; color: var(--ink-700); }

.svcpick__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.svcpick__title { font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.1; color: var(--ink-900); }
.svcpick__price { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--brand); line-height: 1.1; font-variant-numeric: tabular-nums; }
.svcpick__price small { font-size: 11.5px; color: var(--ink-500); font-weight: 700; }
.svcpick__price--soft { color: var(--ink-500); font-weight: 700; }

/* the round check badge, top-right; hidden until selected */
.svcpick__check {
  position: absolute; top: -9px; right: -9px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cream-50); color: var(--white);
  border: 2.5px solid var(--ink-900);
  box-shadow: var(--shadow-pop-sm);
  opacity: 0; transform: scale(.25);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-bounce),
              background-color var(--dur-base) var(--ease-out);
}
.svcpick__check svg { width: 14px; height: 14px; }

/* ── Selected state ── */
.svcpick__chip.is-on { box-shadow: var(--shadow-pop); }
.svcpick__chip.is-on:active { box-shadow: 1px 1px 0 0 var(--ink-900); }
.svcpick__chip.is-on .svcpick__check { opacity: 1; transform: scale(1); background: var(--green-500); }
.svcpick__chip--peach.is-on  { background: var(--peach); }
.svcpick__chip--mint.is-on   { background: var(--mint); }
.svcpick__chip--sky.is-on    { background: var(--sky); }
.svcpick__chip--butter.is-on { background: var(--butter); }
.svcpick__chip--cream.is-on  { background: var(--cream-200); }
/* on a filled chip, keep the price readable and lift the tile to pure white */
.svcpick__chip.is-on .svcpick__price { color: var(--green-700); }
.svcpick__chip.is-on .svcpick__price small { color: var(--ink-700); }
.svcpick__chip.is-on .svcpick__art { background: var(--white); }

/* Book aside */
.book-aside { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 100px; }
.book-sitter {
  display: flex; align-items: center; gap: 16px; background: var(--white);
  border: var(--ink-stroke) solid var(--ink-900); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: var(--shadow-pop-soft);
}
.book-sitter__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center 22%; border: 2.5px solid var(--ink-900); flex: none; background: var(--cream-200); }
.book-sitter b { display: block; font-family: var(--font-display); font-size: 20px; color: var(--ink-900); line-height: 1.05; }
.book-sitter span { display: block; font-size: 14px; color: var(--ink-500); font-weight: 600; margin-top: 2px; }
.book-sitter .aside-hand { font-size: 19px; margin-top: 4px; }
.book-steps {
  background: var(--white); border: var(--ink-stroke) solid var(--ink-900);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-pop-soft);
}
.book-steps h3 { font-size: 21px; margin: 0 0 18px; }
.book-steps ol { list-style: none; counter-reset: s; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.book-steps li { display: flex; gap: 14px; align-items: flex-start; position: relative; }
.book-steps li:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 44px; bottom: -18px; width: 2.5px; background: repeating-linear-gradient(var(--line-strong) 0 5px, transparent 5px 10px); }
.book-steps li > span { width: 40px; height: 40px; border-radius: 50%; background: var(--green-200); border: 2.5px solid var(--ink-900); color: var(--ink-900); display: grid; place-items: center; font-size: 19px; flex: none; z-index: 1; }
.book-steps li b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--ink-900); }
.book-steps li p { margin: 3px 0 0; font-size: 14px; color: var(--ink-700); }
.book-tags { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Booked confirmation */
.booked { text-align: center; max-width: 640px; margin-inline: auto; padding-block: 30px; }
.booked__stamp {
  width: 104px; height: 104px; margin: 0 auto 24px; position: relative;
  display: grid; place-items: center;
  background: var(--green-300); border: var(--ink-stroke) solid var(--ink-900);
  border-radius: 50%; box-shadow: var(--shadow-pop); transform: rotate(-6deg);
}
.booked__stamp .doodle { width: 56px; height: 56px; }
.booked h1 { font-size: clamp(34px, 4.6vw, 56px); margin: 12px 0 0; line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
.booked__sig { font-family: var(--font-hand); font-weight: 700; font-size: 32px; color: var(--green-600); margin: 16px 0 0; }
.booked__actions { display: flex; gap: 14px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

/* ════════ Footer ════════ */
.site-footer { position: relative; background: var(--ink-900); color: var(--cream-200); margin-top: var(--space-16); border-top: var(--ink-stroke) solid var(--ink-900); }
.site-footer::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(248,234,208,.07) 1.4px, transparent 1.5px); background-size: 22px 22px; pointer-events: none; }
.site-footer__inner { position: relative; z-index: 1; width: min(100% - 40px, var(--container)); margin-inline: auto; display: grid; grid-template-columns: 1.2fr 2fr; gap: 48px; padding: 56px 0 40px; }
.site-footer__logo { display: inline-block; background: var(--white); border-radius: var(--radius-lg); padding: 12px 16px; border: var(--ink-stroke) solid var(--ink-900); box-shadow: var(--shadow-pop); }
.site-footer__logo img { height: 72px; width: auto; display: block; }
.site-footer__tag { color: var(--cream-200); font-size: 16px; max-width: 36ch; margin: 20px 0 0; line-height: 1.5; }
.site-footer__sig { font-family: var(--font-hand); font-weight: 700; font-size: 28px; color: var(--green-300); margin: 10px 0 0; }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.site-footer__cols h4 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-300); margin: 0 0 14px; font-family: var(--font-body); font-weight: 800; }
.site-footer__cols a, .site-footer__cols button.linklike { display: block; color: var(--cream-200); text-decoration: none; font-size: 15px; padding: 5px 0; font-weight: 600; background: none; border: 0; font-family: var(--font-body); cursor: pointer; text-align: left; transition: color var(--dur-base) var(--ease-out); }
.site-footer__cols a:hover, .site-footer__cols button.linklike:hover { color: var(--white); text-decoration: none; }
.site-footer__cols .nolink { color: var(--on-ink-soft); font-size: 15px; padding: 5px 0; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.site-footer__bar { position: relative; z-index: 1; width: min(100% - 40px, var(--container)); margin-inline: auto; display: flex; justify-content: space-between; align-items: center; padding: 20px 0 28px; border-top: 1px solid rgba(248,234,208,.14); font-size: 13px; color: var(--cream-300); flex-wrap: wrap; gap: 8px; }
.site-footer__paw { display: inline-flex; align-items: center; gap: 8px; color: var(--green-300); }
.site-footer__paw svg { width: 18px; height: 18px; }

/* ════════ Responsive ════════ */
@media (max-width: 1024px) {
  .crew__grid { grid-template-columns: repeat(3, 1fr); }
  .crew__pitch { grid-column: span 3; }
  .report { grid-template-columns: 1fr; }
  .report__card { order: -1; }
}
@media (max-width: 920px) {
  .hero__grid, .welcome, .about-hero__grid, .book-grid { grid-template-columns: 1fr; }
  .hero { padding-block: 36px 24px; }
  .hero__art { margin-top: 28px; max-width: 440px; margin-inline: auto; }
  .svc-grid, .values { grid-template-columns: repeat(2, 1fr); }
  .cta { flex-direction: column; align-items: flex-start; }
  .cta__action { align-items: flex-start; }
  .cta__paws { display: none; }
  .book-aside { position: static; }
  .about-strip { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 28px; }
  .about-strip__copy h3 { margin-inline: auto; }
  .about-strip__copy p { margin-inline: auto; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 900px) {
  /* the full "Connect with Carter" CTA crowds the links on tablets -
     swap it for the compact "Connect" button while keeping the links */
  .site-nav__cta { display: none; }
  .site-nav__menu { display: flex; margin-left: 10px; }
  .site-nav__links { margin-left: auto; }
}
@media (max-width: 760px) {
  .site-nav__links { display: none; }
  .site-nav__menu { margin-left: auto; gap: 10px; align-items: center; }
  .site-nav__toggle { display: inline-flex; }   /* reveal the hamburger */
  .site-nav__overlay { display: block; }        /* allow the panel to show */
  .site-nav { --nav-h: 104px; }                 /* panel tucks under the bar */
  .site-brand__logo { height: 90px; }
  .site-nav__inner { min-height: 104px; }
  .crew__grid { grid-template-columns: repeat(2, 1fr); }
  .crew__pitch { grid-column: span 2; }
  .section { padding-block: var(--space-16); }
  .cta { padding: 40px 28px; }
  .report { padding: 32px 24px; }
  .welcome { padding: 32px 24px; }
  .book-form-wrap { padding: 24px; }
}
@media (max-width: 620px) {
  /* let section heads stack so the trailing action button can't overflow */
  .section__head { flex-direction: column; align-items: flex-start; }
  .section__head .cc-btn { align-self: flex-start; }
}
@media (max-width: 540px) {
  .svc-grid, .values, .book-form__row { grid-template-columns: 1fr; }
  /* full-width chips read cleaner and give a comfortable tap row on phones */
  .svcpick__grid { grid-template-columns: 1fr; }
  .crew__grid { grid-template-columns: 1fr 1fr; }
  .svc-row { grid-template-columns: 64px 1fr; }
  .svc-row__rail .doodle { width: 44px; height: 44px; }
  .svc-row__cta { grid-column: 1 / -1; border-left: none; border-top: var(--ink-stroke) solid var(--ink-900); }
  .svc-row__cta .cc-btn { width: 100%; }
  .hero__sticker--crew { left: -2%; }
  .hero__sticker--area { right: 2%; }
  .optin { grid-template-columns: 1fr; }
  .optin__switch { justify-self: start; }
  .report__price b { font-size: 34px; }
  .booked__actions { flex-direction: column; }
  .booked__actions .cc-btn { width: 100%; }
}
@media (max-width: 380px) {
  .crew__grid { grid-template-columns: 1fr; }
  .crew__pitch { grid-column: span 1; }
}

/* ════════ Reduced motion - calm everything down ════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__polaroid, .about-hero__frame, .report__card { transform: none; }
}

/* ════════ Cream band (full-bleed light backdrop between scallops) ════════ */
.band-cream { background: var(--cream-50); }

/* ════════ Report-card example dialog ════════ */
.rc-modal { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
.rc-modal::backdrop { background: rgba(55, 29, 16, .55); }
.rc-modal__frame {
  position: relative; background: var(--cream-50);
  border: var(--ink-stroke) solid var(--ink-900); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop-lg); padding: 12px 12px 4px;
}
.rc-modal__img {
  display: block; width: auto; height: auto;
  max-height: min(82vh, 960px); max-width: min(88vw, 600px);
  border-radius: var(--radius-md); border: 2px solid var(--ink-900);
  background: var(--cream-100);
}
.rc-modal__close {
  position: absolute; top: -16px; right: -16px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--coral); color: var(--cream-50);
  border: 2.5px solid var(--ink-900); box-shadow: var(--shadow-pop-sm);
  display: grid; place-items: center; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.rc-modal__close:hover { transform: scale(1.08) rotate(6deg); }
.rc-modal__close:active { transform: scale(.94); }
.rc-modal__tape {
  position: absolute; z-index: 2; top: -12px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 110px; height: 26px; background: rgba(246, 221, 142, .8);
  border: 1px dashed rgba(55, 29, 16, .25);
}
.rc-modal__caption { text-align: center; font-size: 20px; color: var(--ink-700); margin: 8px 0 6px; }
.report__example { margin-top: 18px; }
.optin__example {
  background: none; border: 0; padding: 0; margin-top: 8px;
  font-family: var(--font-body); font-weight: 800; font-size: 15px;
  color: var(--green-600); text-decoration: underline; cursor: pointer;
  display: inline-block;
}
.optin__example:hover { color: var(--green-700); }
@media (prefers-reduced-motion: no-preference) {
  .rc-modal[open] .rc-modal__frame { animation: rc-pop .26s var(--ease-bounce); }
  @keyframes rc-pop { from { transform: scale(.95); opacity: .4; } }
}

/* ════════ Specimen cards with real photos ════════ */
.specimen__art--photo { padding: 0; }
.specimen__art--photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.specimen__art .specimen__no,
.specimen__art .specimen__count { z-index: 1; }
.specimen__art--photo .specimen__no {
  background: var(--cream-50); border: 1.5px solid var(--ink-900);
  border-radius: var(--radius-pill); padding: 0 8px; line-height: 1.4;
  color: var(--ink-700);
}

/* breathing room when a CTA band directly follows a full-bleed band;
   matches the footer's space-16 gap below */
.section-gap-top { margin-top: var(--space-16); }

/* ══════════════════════════════════════════════════════════════════
   MOBILE EXCELLENCE PASS  (additive only. Every rule below lives in a
   max-width media query, so desktop at 1024px and up is byte-for-byte unchanged)
   ══════════════════════════════════════════════════════════════════ */

/* ───────── ≤900px: report-card dialog fits phones from here down ───────── */
@media (max-width: 900px) {
  /* keep the close button on-screen and a comfortable ≥44px tap target;
     anchor it inside the frame so it can never clip past the viewport edge */
  .rc-modal__frame { padding: 12px 12px 6px; }
  .rc-modal__close {
    top: 6px; right: 6px;            /* tuck inside the frame, not hanging off */
    width: 44px; height: 44px;
    box-shadow: var(--shadow-pop-sm);
  }
  /* clear the sticky nav bar so the image top is never hidden behind it */
  .rc-modal__img { max-height: min(78vh, 900px); max-width: min(90vw, 560px); }
}

/* ───────── ≤760px: phone + small-tablet composition ───────── */
@media (max-width: 760px) {
  /* Footer: three cramped columns become a comfortable two-up that stacks the
       links with room for thumbs; the brand block already stacks above. */
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 24px 22px; }
  .site-footer__inner { padding: 44px 0 32px; }
  .site-footer__cols a,
  .site-footer__cols button.linklike { padding: 8px 0; font-size: 16px; }
  .site-footer__cols .nolink { padding: 7px 0; }
  /* let the longest "service area" list span the full width so its middot
     phrases don't wrap into ragged stacks in a half-width column */
  .site-footer__cols > div:last-child { grid-column: 1 / -1; }
  .site-footer__bar { justify-content: center; text-align: center; row-gap: 6px; }

  /* Report add-on: faux phone card already orders first (at 1024 and below);
       give the copy and card a touch more rhythm on phones. */
  .report { gap: 28px; }

  /* Service rows: the full-height colour rail looked thin and wasted width.
       Anchor the doodle near the top so it reads as a specimen tab beside the
       title, give it a touch more presence, and let the body breathe. */
  .svc-row__rail { align-items: start; padding-top: 24px; }
  .svc-row__rail .doodle { width: 50px; height: 50px; }
  .svc-row__body { padding: 22px 20px; }
  .svc-row__cta { padding: 18px 20px; }

  /* Report-card opt-in: make the whole "see an example" control a proper
       tap target, and give the Switch a roomier thumb area. */
  .optin__example { padding: 8px 2px; min-height: 40px; display: inline-flex; align-items: center; }
  /* enlarge the switch's clickable label to a ≥44px thumb zone (scoped to the
     Book opt-in only; the visible track stays 35px, centred by the padding) */
  .optin .cc-switch { display: inline-flex; align-items: center; padding: 6px 4px; margin: -6px -4px; }
}

/* ───────── ≤560px: true phone, hero recomposed for portrait ───────── */
@media (max-width: 560px) {
  /* the hero stack already goes single-column at 920px; here we make the
     polaroid + stickers feel *composed* for a narrow screen rather than a
     shrunken desktop. */
  .hero { padding-block: 28px 20px; }
  .hero__grid { gap: 36px; }
  .hero__art { max-width: 360px; }
  .hero__polaroid { max-width: 340px; padding: 12px 12px 48px; }

  /* the three facts read as a clean single column on a phone; tighten them */
  .hero__facts { gap: 14px 22px; margin-top: 24px; padding-top: 20px; }

  /* Sticker repositioning, the key fix. On desktop the "exotics welcome"
     sticker floats over the photo's lower-left; on a phone it landed on top
     of the "your critters, in good hands" caption. Lift it onto the photo,
     clear of the caption band, and tuck the area sticker up so it doesn't
     dangle below the frame. Shrink stickers slightly so they sit lightly. */
  .hero__sticker { font-size: 13px; padding: 8px 13px; }
  .hero__sticker--report { top: 5%; right: -2%; }
  .hero__sticker--crew   { bottom: 24%; left: -3%; }   /* up, off the caption */
  .hero__sticker--area   { bottom: 6px; right: 4%; }    /* up, inside the art */

  /* CTA bands: trim padding so the ink panel doesn't feel boxy on a phone */
  .cta { padding: 32px 24px; border-radius: var(--radius-xl); }
  .cta__copy h2 { margin-top: 8px; }

  /* report-card faux phone card: cap so it centres tidily */
  .report__card { max-width: 300px; }
}

/* ───────── ≤400px: smallest phones (360 to 414 portrait) ───────── */
@media (max-width: 400px) {
  /* the existing ≤380 rule drops the crew wall to a single giant column;
     2-up reads far better on a specimen wall, so hold it down to 360px. */
  .crew__grid { grid-template-columns: 1fr 1fr; }
  .crew__pitch { grid-column: span 2; }

  /* a hair more headroom for the longest sticker label so it never clips */
  .hero__sticker--report { right: 0; }
  .hero__sticker--area { right: 2%; }
}

/* About hero sticker: shorter frame on phones needs a higher perch */
@media (max-width: 560px) {
  .about-hero__sticker { bottom: 30%; }
}

/* ════════ Services travel/fuel-surcharge note ════════ */
.svc-note {
  display: flex; align-items: flex-start; gap: 14px;
  max-width: 640px; margin: 28px auto 0;
  background: var(--cream-50); border: var(--ink-stroke) solid var(--ink-900);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop-soft);
  padding: 16px 20px;
}
.svc-note__icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--butter); border: 2px solid var(--ink-900);
  display: grid; place-items: center; color: var(--ink-900);
}
.svc-note p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-700); }
.svc-note p b { color: var(--ink-900); font-family: var(--font-display); font-weight: 800; }
@media (max-width: 560px) {
  .svc-note { gap: 12px; padding: 14px 16px; }
}

/* ════════ Booking-form validation states ════════ */
.cc-textarea--error { border-color: var(--danger) !important; }
.cc-textarea--error:focus { box-shadow: 0 0 0 3px var(--danger-soft) !important; }
.svcpick.is-invalid .svcpick__legend { color: var(--danger); }
.svcpick.is-invalid .svcpick__grid { outline: 2px solid var(--danger-soft); outline-offset: 6px; border-radius: var(--radius-md); }
.svcpick__error { margin: 10px 0 0; font-size: var(--text-xs); color: var(--danger); font-weight: 700; }

/* ════════ Service-area "sorry" dialog ════════ */
.area-modal { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; }
.area-modal::backdrop { background: rgba(55, 29, 16, .55); }
.area-modal__card {
  position: relative; max-width: 460px; margin: auto;
  background: var(--cream-50); border: var(--ink-stroke) solid var(--ink-900);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-pop-lg);
  padding: 34px 30px 28px; text-align: center;
}
.area-modal__badge {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--coral-soft); color: var(--ink-900);
  border: var(--ink-stroke) solid var(--ink-900); box-shadow: var(--shadow-pop-sm);
  margin: 0 auto 14px;
}
.area-modal__card h2 { font-size: clamp(23px, 3vw, 30px); margin: 10px 0 12px; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.area-modal__card p { color: var(--ink-700); font-size: 16px; line-height: 1.55; margin: 0 auto 12px; max-width: 42ch; }
.area-modal__soft { color: var(--ink-500); font-size: 14.5px; }
.area-modal__actions { margin-top: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .area-modal[open] .area-modal__card { animation: rc-pop .26s var(--ease-bounce); }
}
@media (max-width: 480px) { .area-modal__card { padding: 28px 20px 24px; } }

/* ════════ Town inline autocomplete (ghost text) ════════ */
/* The ghost mirrors .cc-input's box exactly (font, padding incl. the icon
   offset, transparent border to match width) so the grey suffix lands right
   after the typed text. It sits above the input but ignores pointer events. */
.townac { position: relative; }
.townac__ghost {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: center;
  box-sizing: border-box;
  padding: 0.72em 0.95em 0.72em 2.6em;
  border: var(--border-width) solid transparent;
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
  white-space: pre; overflow: hidden;
}
.townac__typed { color: transparent; }
.townac__suffix { color: var(--ink-400); }

/* Booking submit error + disabled state */
.book-form__error { color: var(--danger); font-weight: 700; font-size: var(--text-sm); margin: 6px 0 0; }
.book-form__submit .cc-btn:disabled { opacity: .6; cursor: progress; }