/* ============================================================
   JuJuba Pets: design tokens (mirror the Figma Style Guide)
   Colours 60/30/10 · Desktop ≥ 768px, Mobile < 768px
   ============================================================ */
:root {
  --color-primary: #EFC3D6;   /* 60% · badge pink, backgrounds */
  --color-secondary: #D2677A; /* 30% · raspberry, buttons, key sections, icons */
  --color-accent: #F2B544;    /* 10% · mustard, highlights, badges */
  --color-text: #3C161D;      /* neutral · text */
  --color-white: #FFFFFF;     /* neutral */
  --color-text-muted: color-mix(in srgb, var(--color-text) 80%, var(--color-white));
  --color-line: color-mix(in srgb, var(--color-primary) 70%, var(--color-white));

  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --h1: 56px; --h1-lh: 1.10;
  --h2: 40px; --h2-lh: 1.15;
  --h3: 24px; --h3-lh: 1.25;
  --body: 18px; --body-lh: 1.6;
  /* White labels on raspberry measure 3.52:1, so every button label must be "large text":
     ≥ 18.66px bold (WCAG). 20px ExtraBold everywhere, 19px minimum for compact buttons. */
  --button: 20px;

  --spacing-xs: 8px; --spacing-sm: 16px; --spacing-md: 24px;
  --spacing-lg: 32px; --spacing-xl: 48px; --spacing-2xl: 64px;
  --spacing-section: 96px;
  --spacing-gutter: 64px;
  --container: 1200px;

  --button-radius: 999px;
  --button-height: 56px;
  --button-padding-x: 32px;

  --radius-card: 24px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}
@media (max-width: 767px) {
  :root {
    --h1: 36px; --h1-lh: 1.12;
    --h2: 28px; --h2-lh: 1.18;
    --h3: 20px;
    --body: 16px;
    --spacing-section: 56px;
    --spacing-gutter: 16px;
    --button-height: 52px;
    --button-padding-x: 24px;
    --radius-card: 20px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--color-primary); color: var(--color-text);
  font: 400 var(--body)/var(--body-lh) var(--font-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-display); margin: 0; color: var(--color-text); text-wrap: balance; }
h1 { font-size: var(--h1); line-height: var(--h1-lh); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: var(--h2); line-height: var(--h2-lh); font-weight: 700; }
h3 { font-size: var(--h3); line-height: var(--h3-lh); font-weight: 600; }
p { margin: 0; }
img, iframe, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; border-radius: 10px; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--color-text); color: var(--color-white); padding: 10px 16px; border-radius: 12px; }
.skip-link:focus { top: 16px; }
.container { width: 100%; max-width: calc(var(--container) + var(--spacing-gutter) * 2); margin: 0 auto; padding: 0 var(--spacing-gutter); }
.container--narrow { max-width: calc(860px + var(--spacing-gutter) * 2); }
.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.eyebrow { font-weight: 800; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text); }
.lead { color: var(--color-text-muted); max-width: 60ch; }
.stars { display: inline-flex; gap: 2px; color: var(--color-accent); font-size: 16px; }

/* Motion: reduced-motion keeps colour/opacity feedback, removes movement */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color, box-shadow !important;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--button-height); padding: 0 var(--button-padding-x);
  border-radius: var(--button-radius); border: 2px solid transparent;
  font: 800 var(--button)/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 160ms var(--ease-out), box-shadow 200ms ease, background-color 200ms ease, color 200ms ease;
}
.btn .ph, .btn .ph-fill { font-size: 1.2em; }
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--color-secondary); color: var(--color-white); box-shadow: 0 10px 24px -12px var(--color-secondary); }
.btn--outline { background: var(--color-white); color: var(--color-text); border-color: var(--color-text); }
.btn--white { background: var(--color-white); color: var(--color-text); }
.btn--outline-white { background: transparent; color: var(--color-white); border-color: var(--color-white); }
.btn--sm { min-height: 46px; padding: 0 22px; font-size: 19px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
.btn-row--center { justify-content: center; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { box-shadow: 0 14px 30px -10px var(--color-secondary); transform: translateY(-1px); }
  .btn--outline:hover { background: var(--color-text); color: var(--color-white); }
  .btn--white:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px var(--color-text); }
  .btn--outline-white:hover { background: var(--color-white); color: var(--color-text); }
}
.link-btn { min-height: 44px; background: none; border: 0; font: 700 16px var(--font-body); color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Nav ---------- */
.nav { position: fixed; z-index: 30; top: 16px; left: 0; right: 0; padding: 0 var(--spacing-gutter); pointer-events: none; }
.nav__bar {
  pointer-events: auto; max-width: var(--container); margin: 0 auto; height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md);
  padding: 0 10px 0 18px; background: var(--color-white); border-radius: 999px;
  box-shadow: 0 12px 30px -18px var(--color-text); position: relative;
}
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font: 700 22px var(--font-display); white-space: nowrap; flex: none; }
.brand__mark { width: 42px; height: 42px; }
.nav__cta { flex: none; }
.nav__links { display: flex; gap: 2px; }
.nav__links a { padding: 10px 12px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; transition: background-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { background: var(--color-primary); } }
@media (max-width: 1359px) { .nav__links a { padding: 10px 9px; font-size: 15px; } }
.nav__toggle { display: none; }
@media (max-width: 1100px) {
  .nav__links {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; padding: 10px;
    background: var(--color-white); border-radius: 24px; box-shadow: 0 20px 40px -20px var(--color-text);
    opacity: 0; visibility: hidden; transform: translateY(-4px) scale(0.97); transform-origin: top right;
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 180ms;
  }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; }
  .nav__links a { padding: 14px 16px; font-size: 17px; }
  .nav__toggle { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 999px; background: var(--color-primary); color: var(--color-text); cursor: pointer; font-size: 24px; }
}
/* Desktop: scrolling down tucks the bar into a small pill (mark and dots) that slides to the left edge; scrolling
   up, focus or a click on the dots opens it again, back in the middle (main.js toggles .is-tucked; hover does not). The links and name collapse by max-width so the pill
   resizes smoothly; the links fade out together and back in one after another (--i). */
.nav__dots { display: none; }
@media (min-width: 1101px) {
  /* Centred with left + translate (not auto margins) so the slide to the left edge can animate. */
  .nav__bar { width: fit-content; gap: 0; margin: 0; left: 50%; translate: -50% 0; transition: left 700ms var(--ease-in-out), translate 700ms var(--ease-in-out); }
  .nav.is-tucked .nav__bar { left: 0; translate: 0 0; }
  .brand { transition: gap 700ms var(--ease-in-out); }
  .brand > span { max-width: 170px; overflow: hidden; transition: max-width 700ms var(--ease-in-out), opacity 300ms ease 200ms; }
  .nav__links { max-width: 760px; margin: 0 28px; padding: 4px 0; overflow: hidden; transition: max-width 700ms var(--ease-in-out), margin 700ms var(--ease-in-out); }
  .nav__links a { transition: background-color 160ms ease, opacity 300ms ease calc(var(--i, 0) * 50ms + 200ms); }
  .nav__dots {
    display: flex; align-items: center; justify-content: center; gap: 4px; width: 0; height: 44px; margin: 0; padding: 0;
    border: 0; background: none; overflow: hidden; opacity: 0; cursor: pointer;
    transition: opacity 300ms ease, width 700ms var(--ease-in-out), margin 700ms var(--ease-in-out);
  }
  .nav__dots span { flex: none; width: 6px; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--color-text) 35%, transparent); }
  .nav__dots span:nth-child(2) { background: var(--color-text); }
  .nav.is-tucked .brand { gap: 0; }
  .nav.is-tucked .brand > span { max-width: 0; opacity: 0; transition-delay: 0s; }
  .nav.is-tucked .nav__links { max-width: 0; margin: 0; }
  .nav.is-tucked .nav__links a { opacity: 0; transition-delay: 0s; }
  .nav.is-tucked .nav__dots { width: 36px; margin: 0 8px; opacity: 1; transition-delay: 250ms, 0s, 0s; }
  /* The WhatsApp button folds away too, so the pill is just the mark and the dots. */
  .nav__cta {
    max-width: 260px; overflow: hidden;
    transition: max-width 700ms var(--ease-in-out), padding 700ms var(--ease-in-out), border-width 700ms var(--ease-in-out), opacity 300ms ease 300ms, visibility 0s;
  }
  .nav.is-tucked .nav__cta {
    max-width: 0; padding-left: 0; padding-right: 0; border-width: 0; opacity: 0; visibility: hidden; box-shadow: none;
    transition: max-width 700ms var(--ease-in-out), padding 700ms var(--ease-in-out), border-width 700ms var(--ease-in-out), opacity 200ms ease, visibility 0s linear 700ms;
  }
}
@media (min-width: 1101px) and (prefers-reduced-motion: reduce) {
  .nav__bar, .brand, .brand > span, .nav__links, .nav__links a, .nav__dots, .nav__cta, .nav.is-tucked .nav__cta { transition: none; }
}
@media (max-width: 767px) {
  .nav { top: 10px; padding: 0 10px; }
  .nav__bar { height: 60px; padding: 0 6px 0 12px; }
  .brand { font-size: 19px; } .brand__mark { width: 36px; height: 36px; }
  .nav__cta { display: none; }
}

/* ---------- 01 Hero: text | capsule video | proof ----------
   Desktop (≥1024px): sticky scene. The video layer is full-screen; main.js clips it to the capsule
   with clip-path and scales the video, then opens the clip to full screen as you scroll.
   Only clip-path, transform and opacity change per frame (no layout). */
.hero { --cap-w: min(360px, 26vw); --line: color-mix(in srgb, var(--color-text) 14%, transparent); position: relative; height: 170vh; background: var(--color-primary); }
.hero__sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
/* The brand name, huge and soft, behind everything in the hero (the doodles, the text and the house sit on top). */
.hero__bigword {
  position: absolute; z-index: 0; left: 50%; top: 54%; translate: -50% -50%; margin: 0; pointer-events: none; user-select: none;
  font: 700 26vw/0.8 var(--font-display); letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap;
  color: rgb(255 255 255 / 0.4);
}
.hero__grid {
  position: absolute; inset: 0; max-width: calc(var(--container) + var(--spacing-gutter) * 2); margin: 0 auto;
  padding: 108px var(--spacing-gutter) 36px;
  /* Equal side columns keep the capsule on the page's centre line. */
  display: grid; grid-template-columns: 1fr calc(var(--cap-w) + 72px) 1fr;
}
.hero__left, .hero__right { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.hero__right { justify-content: flex-start; }
.hero__left { padding-right: var(--spacing-lg); border-right: 1px solid var(--line); }
.hero__slot { grid-column: 2; grid-row: 1; } /* marks the capsule column; main.js centres the capsule on it */
.hero__right { grid-column: 3; grid-row: 1; padding-left: var(--spacing-lg); border-left: 1px solid var(--line); align-items: flex-end; text-align: right; }
.hero__intro { display: grid; gap: var(--spacing-md); padding: var(--spacing-md) 0 var(--spacing-xl); border-bottom: 1px solid var(--line); justify-items: start; }
.hero h1 mark { background: linear-gradient(transparent 60%, var(--color-accent) 60%, var(--color-accent) 92%, transparent 92%); color: inherit; padding: 0 4px; }
.hero__intro .btn { margin-top: 4px; }
.hero__note { padding-top: var(--spacing-lg); margin-block: auto; } /* sits in the vertical middle of the space under the stats */
/* The line sits on a white dog bone (the FAQ's bone: four round knobs and a body) so it reads over the big JUJUBA word. */
.hero__note p {
  --k: 22px; --o: 10px; --bone: var(--color-white);
  --knob: radial-gradient(circle closest-side, var(--bone) 97%, transparent 100%);
  max-width: calc(28ch + var(--k) * 2 + 28px); padding: calc(var(--o) + 12px) calc(var(--k) + 14px);
  color: var(--color-text); font-size: 17px; font-weight: 600; text-align: center; rotate: -2deg;
  background:
    var(--knob) left top / calc(var(--k) * 2) calc(var(--k) * 2) no-repeat,
    var(--knob) right top / calc(var(--k) * 2) calc(var(--k) * 2) no-repeat,
    var(--knob) left bottom / calc(var(--k) * 2) calc(var(--k) * 2) no-repeat,
    var(--knob) right bottom / calc(var(--k) * 2) calc(var(--k) * 2) no-repeat,
    linear-gradient(var(--bone), var(--bone)) center / calc(100% - var(--k) * 2) calc(100% - var(--o) * 2) no-repeat;
  filter: drop-shadow(0 10px 14px rgb(60 22 29 / 0.1));
}

.review { display: flex; align-items: center; gap: 14px; min-height: 44px; text-decoration: none; margin-top: 4px; }
.review__text { display: grid; line-height: 1.3; }
.review__text b { font-size: 17px; }
.review__text small { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 15px; color: var(--color-text-muted); }
@media (hover: hover) and (pointer: fine) { .review:hover b { text-decoration: underline; text-underline-offset: 3px; } }
.stats { display: flex; justify-content: flex-end; gap: var(--spacing-xl); margin: 0; padding: var(--spacing-md) 0 var(--spacing-xl); width: 100%; border-bottom: 1px solid var(--line); }
.stats > div { display: flex; flex-direction: column-reverse; align-items: inherit; }
.stats dd { margin: 0; font: 700 48px/1 var(--font-display); }
.stats dt { margin-top: 6px; font-weight: 700; color: var(--color-text-muted); }

/* Video layer */
.hero__media { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__frame {
  position: absolute; inset: 0; overflow: hidden; background: var(--color-white);
  /* Fallback dog house before main.js runs (centred); JS replaces it with the exact, rounded shape. */
  --roof: calc(132px + var(--cap-w) * 0.4);
  clip-path: polygon(50% 132px, calc(50% + var(--cap-w) / 2) var(--roof), calc(50% + var(--cap-w) / 2 - 16px) var(--roof),
    calc(50% + var(--cap-w) / 2 - 16px) calc(100% - 36px), calc(50% - var(--cap-w) / 2 + 16px) calc(100% - 36px),
    calc(50% - var(--cap-w) / 2 + 16px) var(--roof), calc(50% - var(--cap-w) / 2) var(--roof));
}
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform-origin: 50% 50%; }
.hero__fab, .hero__cta { pointer-events: auto; }
.hero__fab {
  position: absolute; left: 0; top: 0; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; background: var(--color-secondary); color: var(--color-white); text-decoration: none;
  font-size: 32px; border: 6px solid var(--color-primary);
  transform: translate(calc(50vw + var(--cap-w) / 2 - 42px), 58vh);
}
.hero__fab i { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .hero__fab:hover i { transform: rotate(-14deg); } }
.hero__fab:active i { transform: scale(0.9); }
.hero__cta {
  position: absolute; left: 50%; bottom: 48px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  transform: translateX(-50%); opacity: 0; pointer-events: none;
}
.hero.is-full .hero__cta { pointer-events: auto; }

@media (max-width: 1359px) {
  .hero { --cap-w: min(300px, 25vw); }
  .hero__grid { padding-left: 40px; padding-right: 40px; }
  .hero h1 { font-size: clamp(44px, 4.2vw, 56px); }
  .stats dd { font-size: 40px; }
}
/* Desktop with reduced motion: no scroll runway, capsule stays put (main.js keeps it at rest). */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) { .hero { height: 100vh; } }

/* Tablet & phone: stacked, no scroll effect */
@media (max-width: 1023px) {
  .hero { height: auto; }
  .hero__sticky { position: static; height: auto; overflow: visible; display: flex; flex-direction: column; gap: var(--spacing-lg); padding: 104px var(--spacing-gutter) var(--spacing-section); }
  .hero__grid, .hero__left, .hero__right { display: contents; }
  .hero__slot { display: none; }
  .hero__intro { order: 1; border: 0; padding: 0; }
  .hero h1 { font-size: var(--h1); }
  .hero__media { order: 2; position: relative; inset: auto; height: min(70vh, 560px); pointer-events: auto; }
  .hero__frame { clip-path: url(#doghouse); } /* same outline as desktop, as a scalable SVG clip path in index.html */
  .hero__video { transform: none !important; }
  .hero__fab { left: auto; top: auto; right: 12px; bottom: 12%; width: 72px; height: 72px; font-size: 28px; transform: none !important; }
  .hero__cta { display: none; }
  .stats { order: 3; display: grid; grid-template-columns: 1fr 1fr; justify-items: start; padding: 0; text-align: left; border: 0; }
  .stats > div { align-items: flex-start; }
  .hero__note { order: 4; padding: 0; text-align: left; }
  .hero__note p { max-width: calc(60ch + var(--k) * 2 + 28px); rotate: -1deg; }
}
@media (max-width: 767px) {
  .hero__sticky { padding-top: 92px; gap: var(--spacing-md); }
  .hero__media { height: min(62vh, 470px); }
  .hero__intro .btn { width: 100%; }
  .stats dd { font-size: 34px; }
}

/* ---------- Sections ---------- */
.section { padding: var(--spacing-section) 0; background: var(--color-primary); }
.section--white { background: var(--color-white); }
.section--secondary { background: var(--color-secondary); }

/* ---------- Section backgrounds: wavy edges, paw trails, mustard rings ----------
   Every section and the footer rise into the one above with a soft wave in their own colour
   (the pseudo-element inherits the section's background-color, so no colour is repeated here).
   Decorations are pure CSS, sit behind the content and never take clicks. */
:root {
  --wave-h: 72px;
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 46C160 10 330 6 520 30s330 52 540 36 290-50 380-56V80H0Z'/%3E%3C/svg%3E");
  --paw-img: url("https://unpkg.com/@phosphor-icons/core@2.1.1/assets/fill/paw-print-fill.svg");
}
@media (max-width: 767px) { :root { --wave-h: 32px; } }
.section, .footer { position: relative; }
.section > *, .footer > * { position: relative; z-index: 1; }
.section::before, .footer::before, .dogstage::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: var(--wave-h);
  background-color: inherit; pointer-events: none;
  -webkit-mask: var(--wave) center bottom / 100% 100% no-repeat; mask: var(--wave) center bottom / 100% 100% no-repeat;
}
.section:nth-of-type(even)::before { transform: scaleX(-1); }

/* Paw prints walking across the section's top padding, so they never sit behind content.
   On wide screens (≥1400px) a longer trail climbs the empty side margin instead. */
.paws::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 18px; right: 4%; width: 160px; height: 64px;
  background-color: var(--paw-color, var(--color-white)); opacity: var(--paw-opacity, 0.7);
  -webkit-mask: var(--paw-img) 0 100% / 28px no-repeat, var(--paw-img) 64px 0 / 26px no-repeat, var(--paw-img) 128px 100% / 24px no-repeat;
  mask: var(--paw-img) 0 100% / 28px no-repeat, var(--paw-img) 64px 0 / 26px no-repeat, var(--paw-img) 128px 100% / 24px no-repeat;
  transform: rotate(-6deg);
}
.paws--left::after { right: auto; left: 4%; transform: rotate(6deg) scaleX(-1); }
.section--white.paws { --paw-color: var(--color-primary); --paw-opacity: 1; }
.section--secondary.paws { --paw-opacity: 0.18; }
@media (min-width: 1400px) {
  .paws::after {
    top: var(--spacing-2xl); right: max(8px, calc((100% - var(--container)) / 2 - 170px)); width: 120px; height: 260px;
    -webkit-mask: var(--paw-img) 4px 100% / 44px no-repeat, var(--paw-img) 66px 68% / 40px no-repeat, var(--paw-img) 12px 34% / 34px no-repeat, var(--paw-img) 72px 0 / 30px no-repeat;
    mask: var(--paw-img) 4px 100% / 44px no-repeat, var(--paw-img) 66px 68% / 40px no-repeat, var(--paw-img) 12px 34% / 34px no-repeat, var(--paw-img) 72px 0 / 30px no-repeat;
    transform: rotate(12deg);
  }
  .paws--left::after { right: auto; left: max(8px, calc((100% - var(--container)) / 2 - 170px)); top: auto; bottom: var(--spacing-2xl); transform: rotate(-12deg); }
}
@media (max-width: 767px) {
  .paws::after { top: 10px; width: 112px; height: 40px;
    -webkit-mask-size: 20px, 18px, 16px; mask-size: 20px, 18px, 16px;
    -webkit-mask-position: 0 100%, 46px 0, 92px 100%; mask-position: 0 100%, 46px 0, 92px 100%; }
}

/* Mustard ring and dots (the 10% accent), drawn as gradients so they cost no markup.
   The ring bleeds off the left edge in the gutter; the dots sit in the section padding. */
.rings {
  background-image:
    radial-gradient(circle closest-side, transparent 74%, var(--color-accent) 76% 96%, transparent 98%),
    radial-gradient(circle closest-side, var(--color-accent) 92%, transparent 100%),
    radial-gradient(circle closest-side, var(--color-accent) 90%, transparent 100%);
  background-size: 84px 84px, 22px 22px, 14px 14px;
  background-position: -34px 56px, 9% 28px, 94% calc(100% - 36px);
  background-repeat: no-repeat;
}
@media (max-width: 767px) { .rings { background-size: 56px 56px, 16px 16px, 10px 10px; background-position: -36px 8px, 30% 16px, 96% calc(100% - 20px); } }
.section--secondary h2 { color: var(--color-white); }
.lead--on-secondary { color: var(--color-white); font-weight: 700; font-size: 20px; } /* ≥18.66px bold = large text */
.section__head { display: grid; gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); }
.section__head--center { text-align: center; justify-items: center; }
.section__head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--spacing-md); flex-wrap: wrap; }
.section__head--row > div:first-child { display: grid; gap: var(--spacing-sm); }

/* ---------- 02 Available pets (carousel) ---------- */
.carousel__arrows { display: flex; gap: 12px; }
.arrow {
  width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--color-text); background: var(--color-white);
  display: grid; place-items: center; font-size: 22px; color: var(--color-text); cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease;
}
@media (hover: hover) and (pointer: fine) { .arrow:hover:not(:disabled) { background: var(--color-text); color: var(--color-white); } }
.arrow:disabled { opacity: .3; cursor: default; }
.carousel { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.carousel::-webkit-scrollbar { display: none; }
.carousel__track {
  display: flex; gap: var(--spacing-md); width: max-content;
  padding: 8px max(var(--spacing-gutter), calc((100vw - var(--container)) / 2)) 24px;
}
.pet {
  scroll-snap-align: start; scroll-margin-left: max(var(--spacing-gutter), calc((100vw - var(--container)) / 2));
  width: 300px; background: var(--color-white); border: 2px solid var(--color-line); border-radius: var(--radius-card); overflow: hidden;
  display: flex; flex-direction: column; transition: transform 200ms var(--ease-out), box-shadow 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .pet:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px var(--color-text); } }

/* Entry: cards slide in and their photos wipe up (Web Animations, see cardsIn in main.js). Cards wait hidden
   until the row scrolls into view. */
.carousel.will-enter .pet { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .carousel.will-enter .pet { opacity: 1; } }
.pet__photo { aspect-ratio: 1 / 1; position: relative; overflow: hidden; }
.pet__photo img { width: 100%; height: 100%; object-fit: cover; }
.pet__body { padding: 18px 20px 22px; display: grid; gap: 10px; flex: 1; align-content: start; }
.pet__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pet__meta { color: var(--color-text-muted); font-size: 16px; }
.pet .btn { margin-top: 6px; min-height: 48px; font-size: 19px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font: 800 13px var(--font-body); white-space: nowrap; }
.badge--available { background: var(--color-accent); color: var(--color-text); }
.badge--reserved { background: var(--color-white); color: var(--color-text); border: 2px solid var(--color-text); }
.pet--reserved .pet__photo { filter: saturate(.6); }
.carousel__empty { margin: 0 var(--spacing-gutter); max-width: 560px; padding: var(--spacing-lg); border-radius: var(--radius-card); background: var(--color-primary); display: grid; gap: var(--spacing-sm); justify-items: start; }
@media (max-width: 767px) {
  .pet { width: 272px; }
  .carousel__arrows { margin-left: auto; gap: 10px; } /* right-aligned under the intro line */
  .arrow { width: 46px; height: 46px; font-size: 19px; }
}

/* ---------- Art tiles (illustration fallback when a photo is missing) ---------- */
.art { width: 100%; height: 100%; display: grid; place-items: center; position: relative; }
.art svg { width: 72%; height: auto; position: relative; z-index: 1; }
.art--pink { background: var(--color-primary); }
.art--white { background: color-mix(in srgb, var(--color-primary) 35%, var(--color-white)); }

/* ---------- 03 Find your match ---------- */
.match {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head board" "quiz board";
  column-gap: var(--spacing-xl); row-gap: var(--spacing-md); align-items: start;
}
.match__head { grid-area: head; display: grid; gap: var(--spacing-sm); }
.quiz { grid-area: quiz; }
/* Progress: three paws joined by a dotted trail; answered ones turn white, the current one is mustard and breathes. */
.quiz__progress { display: flex; align-items: center; gap: 16px; margin-bottom: var(--spacing-sm); color: var(--color-white); font-weight: 800; font-size: 17px; }
.quiz__paws { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.quiz__paws li {
  position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 20px;
  color: rgb(255 255 255 / 0.6); background: rgb(255 255 255 / 0.16); transition: background-color 300ms ease, color 300ms ease;
}
.quiz__paws li + li { margin-left: 22px; }
.quiz__paws li + li::before { content: ""; position: absolute; right: calc(100% + 3px); top: 50%; width: 16px; border-top: 3px dotted rgb(255 255 255 / 0.5); }
.quiz__paws li.is-done { background: var(--color-white); color: var(--color-secondary); }
.quiz__paws li.is-now { background: var(--color-accent); color: var(--color-text); animation: paw-breathe 1.6s ease-in-out infinite; }
@keyframes paw-breathe { 50% { scale: 1.12; } }
.quiz form { margin: 0; }
.quiz__step { border: 0; margin: 0; padding: 0; display: none; }
.quiz__step:focus { outline: none; }
.quiz__step.is-active { display: block; animation: rise 260ms var(--ease-out) both; }
.quiz__step legend { padding: 0; margin-bottom: var(--spacing-sm); font: 700 var(--h3)/1.25 var(--font-display); color: var(--color-white); }
/* Picture tiles: an icon in a pink circle, a title and a little line. Picking one moves on by itself. */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choices label { position: relative; }
.choices input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choices span {
  height: 100%; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 18px 14px 16px; text-align: center;
  background: var(--color-white); color: var(--color-text); border-radius: 24px; border: 3px solid transparent; cursor: pointer;
  transition: translate 220ms var(--ease-out), border-color 150ms ease, background-color 150ms ease, box-shadow 220ms ease;
}
.choices span i {
  width: 58px; height: 58px; margin-bottom: 6px; border-radius: 50%; display: grid; place-items: center; font-size: 30px;
  color: var(--color-secondary); background: color-mix(in srgb, var(--color-primary) 60%, var(--color-white));
  transition: rotate 320ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 150ms ease;
}
.choices b { font: 600 19px/1.2 var(--font-display); }
.choices small { font-size: 14px; font-weight: 600; color: var(--color-text-muted); }
@media (hover: hover) and (pointer: fine) {
  .choices label:hover span { translate: 0 -3px; border-color: var(--color-accent); box-shadow: 0 16px 24px -18px var(--color-text); }
  .choices label:hover span i { rotate: -10deg; }
}
.choices input:checked + span { background: var(--color-accent); border-color: var(--color-accent); animation: tile-pick 320ms var(--ease-out); }
.choices input:checked + span i { background: var(--color-white); }
.choices input:checked + span small { color: var(--color-text); }
.choices input:focus-visible + span { outline: 3px solid var(--color-white); outline-offset: 3px; }
@keyframes tile-pick { 40% { scale: 0.95; } }
.quiz__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-sm); min-height: 44px; margin-top: var(--spacing-md); }
.quiz__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; background: none; border: 0; color: var(--color-white); font: 800 20px var(--font-body); cursor: pointer; }
.quiz__hint { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 auto; color: rgb(255 255 255 / 0.85); font-weight: 700; font-size: 15px; }

/* The board: a status line, the puppy line-up on a rug, and (once done) the result. */
.match__board {
  grid-area: board; display: grid; gap: var(--spacing-sm); padding: var(--spacing-md); border-radius: var(--radius-card);
  background: var(--color-white); box-shadow: 0 30px 60px -30px var(--color-text);
}
.match__status { min-height: 2.6em; display: flex; align-items: center; margin: 0; font: 600 20px/1.3 var(--font-display); color: var(--color-text); }
.lineup {
  --hpx: 190px; position: relative; height: 290px; border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(ellipse 46% 13% at 50% 86%, rgb(255 255 255 / 0.95) 96%, transparent 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 45%, var(--color-white)) 0 72%, color-mix(in srgb, var(--color-primary) 80%, var(--color-white)) 72%);
}
.lineup__row { position: absolute; inset: 0 8px; margin: 0; padding: 0 0 30px; list-style: none; display: flex; align-items: flex-end; }
.lineup__row li {
  --s: 0.84; position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
  transition: flex-grow 700ms var(--ease-out), opacity 500ms ease;
}
/* Each puppy grows with its score (main.js sets --s), standing on its feet. */
.lineup__pup { position: relative; transform-origin: 50% 100%; scale: var(--s); transition: scale 560ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 400ms ease, filter 400ms ease; }
.lineup__pup img { display: block; width: auto; max-width: none; height: calc(var(--hpx) * var(--k, 1)); filter: drop-shadow(0 8px 6px rgb(60 22 29 / 0.18)); }
.lineup__tag {
  position: relative; z-index: 2; margin-top: 4px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: var(--color-white);
  font: 800 13px var(--font-body); color: var(--color-text); box-shadow: 0 4px 10px -6px rgb(60 22 29 / 0.5); transition: opacity 300ms ease, background-color 300ms ease;
}
.lineup__tag i { color: var(--color-secondary); }
.lineup__row li.is-out .lineup__pup { opacity: 0.45; filter: grayscale(0.85); }
.lineup__row li.is-out .lineup__tag { opacity: 0.55; }
.lineup__pup.is-hop { animation: pup-hop 640ms cubic-bezier(0.3, 0.7, 0.4, 1); }
.lineup__pup.is-wiggle { animation: pup-wiggle 520ms ease; }
@keyframes pup-hop { 0%, 100% { translate: 0 0; } 30% { translate: 0 -26px; } 55% { translate: 0 0; } 72% { translate: 0 -9px; } }
@keyframes pup-wiggle { 25% { rotate: -5deg; } 50% { rotate: 4deg; } 75% { rotate: -2deg; } }
.lineup__pop { position: absolute; left: 50%; top: 0; font-size: 28px; color: var(--color-secondary); pointer-events: none; opacity: 0; animation: pop-heart 1s ease-out var(--d, 0ms) forwards; }
@keyframes pop-heart {
  0% { opacity: 0; translate: -50% 10px; scale: 0.4; }
  25% { opacity: 1; translate: calc(-50% + var(--dx, 0px) * 0.4) -20px; scale: 1.15; }
  100% { opacity: 0; translate: calc(-50% + var(--dx, 0px)) -74px; scale: 0.9; }
}
/* A puppy that sits out says why, then the bubble fades. */
.lineup__say {
  position: absolute; z-index: 3; left: 50%; top: calc(var(--hpx) * var(--k, 1) * (1 - var(--s)) - 34px); translate: -50% 0; white-space: nowrap;
  padding: 6px 12px; border-radius: 14px; background: var(--color-text); color: var(--color-white); font: 700 13px var(--font-body); opacity: 0; pointer-events: none;
}
.lineup__say::after { content: ""; position: absolute; left: 50%; top: 100%; translate: -50% 0; border: 6px solid transparent; border-top-color: var(--color-text); }
.lineup__say.is-on { animation: say 3s ease forwards; }
@keyframes say { 0% { opacity: 0; scale: 0.6; } 10%, 80% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
/* The end: the rest step aside, the matches spread out and the stamp lands. */
.lineup.is-final li { flex-grow: 0.0001; opacity: 0; }
.lineup.is-final li.is-match { flex-grow: 1; opacity: 1; }
.lineup.is-final li:not(.is-match) .lineup__pup { scale: 0.5; }
.lineup__row li.is-top .lineup__tag { background: var(--color-accent); }
.lineup__stamp {
  position: absolute; top: 12px; right: 14px; margin: 0; padding: 6px 14px; rotate: -8deg; border: 3px solid var(--color-secondary); border-radius: 14px;
  background: var(--color-white); color: var(--color-secondary); font: 700 22px var(--font-display); opacity: 0; scale: 1.6;
  transition: opacity 200ms ease, scale 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lineup.is-final .lineup__stamp { opacity: 1; scale: 1; transition-delay: 550ms; }
.match__result { display: grid; gap: var(--spacing-sm); padding-top: 4px; animation: rise 360ms var(--ease-out) 300ms both; }
.match__result h3 { font-size: calc(var(--h3) + 2px); }
.match__reasons { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.match__reasons li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 16px; }
.match__reasons b { margin-right: 2px; }
.match__chip { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 55%, var(--color-white)); font-size: 14px; font-weight: 700; }
.match__result .link-btn { justify-self: start; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Tablets and phones: the line-up sits between the heading and the questions, so every reaction is in view. */
@media (max-width: 900px) { .match { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "board" "quiz"; } }
@media (max-width: 767px) {
  .match__board { padding: 14px; }
  .match__status { font-size: 17px; }
  .lineup { --hpx: 118px; height: 206px; }
  .lineup__row { inset: 0 2px; padding-bottom: 26px; }
  .lineup__tag { padding: 2px 6px; font-size: 11px; }
  .lineup__stamp { top: 8px; right: 8px; font-size: 17px; }
  .lineup__say { font-size: 12px; padding: 5px 9px; }
  .choices { gap: 10px; }
  .choices span { padding: 14px 10px 12px; border-radius: 20px; }
  .choices span i { width: 48px; height: 48px; font-size: 26px; }
  .choices b { font-size: 16px; }
  .choices small { font-size: 13px; }
}

/* ---------- 04 Why choose us: a puppy takes centre stage ----------
   The section's background is the puppy in its playroom (a looping clip, full width), with the heading streaming in
   big letters along a wave over its head. On wide screens the four reason cards float over the room, two either
   side of the puppy; below 1360px the clip is a full-width band and the cards sit under it (two by two, then one
   column on phones). Base styles show everything (no JS, reduced motion: the still); with .dog-live (main.js 6a) the
   room settles in, the wave and the cards arrive the first time the section comes into view (.is-arrived). */
.dogstage { position: relative; background: var(--color-white); padding: 0 0 var(--spacing-section); overflow-x: clip; }
/* Top edge: the raspberry section above hangs over the room in its wave, instead of a white wave rising into it. */
.dogstage::before { bottom: auto; top: -1px; z-index: 3; background-color: var(--color-secondary); transform: scaleY(-1); }
.dogstage__inner { position: relative; z-index: 2; display: grid; justify-items: center; }
/* The heading flows over the puppy in big letters (the wave); the h2 stays for screen readers. */
.dogstage__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Headroom: the room starts a little below the top wave, so the big words never run into it. The extra strip is a
   blurred mirror of the clip's top edge (the wall carries on upwards) and the clip fades into it. */
.dogstage { --headroom: calc(var(--wave-h) + 40px); --crop: 1; }
.dogstage__dog { position: relative; padding-top: var(--headroom); background: rgb(226 203 193); }
.dogstage__dog::before {
  content: ""; position: absolute; top: 0; left: -30px; right: -30px; height: calc(var(--headroom) + 40px);
  background: url("assets/why/dog-room.webp") center top / calc((100% - 60px) * var(--crop)) auto no-repeat;
  transform: scaleY(-1); filter: blur(8px); clip-path: inset(0); /* keep the blur inside, no haze above the section */
}
.dogstage__frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-primary);
  -webkit-mask: linear-gradient(transparent, #000 40px); mask: linear-gradient(transparent, #000 40px);
}
.dogstage__frame img, .dogstage__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Two copies of the clip take turns (main.js); only the one playing shows. */
.dogstage__frame video { opacity: 0; }
.dogstage__frame video.is-on { opacity: 1; }

/* The wave of words, in front of the room. Its viewBox is drawn for a 420-unit-wide puppy, so it is sized from the
   clip's width (the puppy's head is about a quarter of it): a gentle arch that crests just above the puppy's ears,
   its arms running out high across the wall and off both edges of the screen. Percentages: width and left from the
   clip width, the top offset as a margin (also a share of the width). */
.dogstage__arc {
  --k: 30;  /* the 420 units, as % of the clip width */
  position: absolute; z-index: 2; top: var(--headroom); left: calc(50% - var(--k) * 1% * 1600 / 420); width: calc(var(--k) * 1% * 3200 / 420);
  margin-top: -1%; max-width: none; overflow: visible; pointer-events: none;
}
/* Big raspberry letters with a white sticker outline, so they read on the pink wall; a filled paw print between
   repeats. */
.dogstage__arc text {
  font: 700 190px var(--font-display); letter-spacing: 0.01em; fill: var(--color-secondary);
  stroke: var(--color-white); stroke-width: 22px; stroke-linejoin: round; paint-order: stroke;
}
.dogstage__paw { font-family: "Phosphor-Fill"; font-weight: 400; font-size: 0.8em; }

.dogstage__reasons {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-lg);
  width: 100%; margin: var(--spacing-xl) 0 0; padding: 0; list-style: none;
}
/* Each reason is a paw print: the card is the main pad and four toe beans sit above it (one layer of four
   ellipses, each with a white rim), mustard and pink in a diagonal checker, the text centred on the pad. The white
   rim and the shadow (drop-shadow, so it follows the toes too) lift it off the room. No two paws are alike: each
   has its own toe spread and sizes (--t1 to --t4: position / size of each toe), pad shape and a slight tilt. */
.dogstage__reasons { --toes: 54px; padding-top: var(--toes); row-gap: calc(var(--spacing-lg) + var(--toes)); }
.dogstage .reason {
  --paw: var(--color-accent); --rim: var(--color-white);
  position: relative; display: grid; gap: 6px; align-content: center; justify-self: center; width: min(100%, 310px);
  padding: 30px 34px 36px; text-align: center; background: var(--paw); border: 4px solid var(--rim);
  --t1: 6% 22px / 16% 54px; --t2: 34% 0 / 18% 64px; --t3: 66% 0 / 18% 64px; --t4: 94% 22px / 16% 54px;
  border-radius: 50% 50% 44% 44% / 62% 62% 38% 38%; rotate: -4deg;
  filter: drop-shadow(0 14px 18px rgb(60 22 29 / 0.22));
}
.dogstage .reason::before {
  --toe: radial-gradient(closest-side, var(--paw) calc(100% - 5px), var(--rim) calc(100% - 4px) 98%, transparent);
  content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--toes) - 12px); height: 76px; pointer-events: none;
  background: var(--toe) var(--t1) no-repeat, var(--toe) var(--t2) no-repeat, var(--toe) var(--t3) no-repeat, var(--toe) var(--t4) no-repeat;
}
.dogstage .reason:nth-child(2), .dogstage .reason:nth-child(3) { --paw: var(--color-primary); }
/* Toes leaning right, the outer left one tucked low and small. */
.dogstage .reason:nth-child(2) {
  --t1: 3% 30px / 14% 46px; --t2: 29% 6px / 19% 62px; --t3: 63% 0 / 20% 68px; --t4: 93% 12px / 17% 58px;
  border-radius: 56% 44% 48% 52% / 64% 58% 42% 36%; rotate: 5deg;
}
/* Small and round: chubby toes huddled close together. */
.dogstage .reason:nth-child(3) {
  --t1: 13% 24px / 18% 52px; --t2: 38% 2px / 21% 60px; --t3: 62% 2px / 21% 60px; --t4: 87% 24px / 18% 52px;
  border-radius: 46% 46% 50% 50% / 56% 56% 44% 44%; rotate: 3deg;
}
/* Toes leaning left, splayed wide. */
.dogstage .reason:nth-child(4) {
  --t1: 6% 12px / 17% 58px; --t2: 37% 0 / 20% 68px; --t3: 71% 6px / 19% 62px; --t4: 98% 30px / 14% 46px;
  border-radius: 44% 56% 52% 48% / 58% 64% 36% 42%; rotate: -6deg;
}
.reason h3 { font-size: 22px; line-height: 1.15; }
.reason p { color: var(--color-text); font-size: 14.5px; line-height: 1.45; }

/* Wide screens: the room fills the whole section and the cards float over it, two stacked either side of the puppy
   (the middle column keeps clear of it), above the next section's wave. */
@media (min-width: 1360px) {
  .dogstage { display: grid; padding: 0; }
  .dogstage > .dogstage__dog, .dogstage > .dogstage__inner { grid-area: 1 / 1; }
  .dogstage__inner { align-self: end; padding-bottom: calc(var(--wave-h) + 8px); }
  .dogstage__reasons { grid-template-columns: minmax(0, 1fr) 40% minmax(0, 1fr); gap: calc(var(--spacing-sm) + var(--toes)) 0; margin: 0; }
  .dogstage .reason { grid-column: 1; }
  .dogstage .reason:nth-child(n + 3) { grid-column: 3; }
  .dogstage .reason:nth-child(odd) { grid-row: 1; }
  .dogstage .reason:nth-child(even) { grid-row: 2; }
}
/* Narrower screens: the room is a band with the cards under it; it ends in the same white wave as the other sections. */
@media (max-width: 1359px) {
  .dogstage__dog::after {
    content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; height: var(--wave-h); background: var(--color-white);
    -webkit-mask: var(--wave) center bottom / 100% 100% no-repeat; mask: var(--wave) center bottom / 100% 100% no-repeat;
  }
}
/* Phones: a taller crop (the clip is cut to the middle), so the puppy and the words are bigger. */
@media (max-width: 767px) {
  .dogstage { --headroom: calc(var(--wave-h) + 12px); --crop: 2.222; } /* the 4:5 crop shows the clip 2.222x wider than the screen */
  .dogstage__frame { aspect-ratio: 4 / 5; }
  .dogstage__arc { --k: 62; margin-top: 4%; }
}
@media (max-width: 599px) {
  .dogstage__reasons { grid-template-columns: minmax(0, 1fr); }
  /* One column: the colours simply alternate. */
  .dogstage .reason:nth-child(3) { --paw: var(--color-accent); }
  .dogstage .reason:nth-child(4) { --paw: var(--color-primary); }
}

/* Live: the room settles in (a slow push-out), then the curve and the cards arrive, the first time the section comes
   into view. */
.dog-live .dogstage__frame > * { scale: 1.06; }
.dog-live.is-arrived .dogstage__frame > * { scale: 1; transition: scale 1600ms var(--ease-out); }
.dog-live .dogstage__arc { opacity: 0; }
.dog-live.is-arrived .dogstage__arc { opacity: 1; transition: opacity 600ms ease 300ms; }
.dog-live .reason { opacity: 0; scale: 0.7; }
.dog-live.is-arrived .reason { opacity: 1; scale: 1; transition: opacity 300ms ease 400ms, scale 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 400ms; }
.dog-live.is-arrived .reason:nth-child(2) { transition-delay: 520ms; }
.dog-live.is-arrived .reason:nth-child(3) { transition-delay: 640ms; }
.dog-live.is-arrived .reason:nth-child(4) { transition-delay: 760ms; }

/* ---------- 05 Meet the breeds: poster ----------
   Like a "GOOD DOG DAYS" poster: the heading in huge stacked letters, the six puppies sitting on and peeking over
   them. Everything is sized from the poster width (--pw, kept exact by main.js), so it scales as one piece. main.js builds the
   puppies; hovering, focusing or tapping one pops its card out beside it (a sheet from the bottom on phones). */

.poster { --pw: min(1180px, calc(100vw - 2 * var(--spacing-gutter) - 17px)); position: relative; max-width: 1180px; margin: 0 auto; padding-top: calc(var(--pw) * 0.14); }
.poster__words {
  position: relative; z-index: 1; display: grid; justify-items: center; margin: 0;
  font: 700 calc(var(--pw) * 0.179)/0.8 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; color: var(--color-secondary);
  text-wrap: nowrap; user-select: none;
}
/* The letters are filled, not flat: soft paw prints drift diagonally through them on a loop and a sheen sweeps across
   now and then. Only the fill moves, so the puppies sitting on the letters stay put. --tile is one pattern repeat. */
.poster__line {
  --tile: calc(var(--pw) * 0.09);
  display: block; color: transparent; -webkit-background-clip: text; background-clip: text;
  background:
    linear-gradient(105deg, transparent 45%, rgb(255 255 255 / 0.55) 49.5%, rgb(255 255 255 / 0.55) 50.5%, transparent 55%) 100% 0 / 300% 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cg id='p'%3E%3Cellipse cx='20' cy='27' rx='9' ry='7.5'/%3E%3Ccircle cx='9' cy='16' r='4'/%3E%3Ccircle cx='15.5' cy='9' r='4.2'/%3E%3Ccircle cx='24.5' cy='9' r='4.2'/%3E%3Ccircle cx='31' cy='16' r='4'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='white' fill-opacity='.2'%3E%3Cuse href='%23p' transform='translate(6 8) rotate(-18 20 20)'/%3E%3Cuse href='%23p' transform='translate(54 54) rotate(16 20 20)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / var(--tile) var(--tile),
    var(--color-secondary);
  -webkit-background-clip: text; background-clip: text;
  animation: letters-fill 9s linear infinite;
}
.poster__line + .poster__line { font-size: 1.24em; animation-delay: -1.2s; } /* as wide as MEET THE; the sheen reaches it a beat later */
@keyframes letters-fill {
  0% { background-position: 100% 0, 0 0; }
  28% { background-position: 0% 0, calc(var(--tile) * 0.56) calc(var(--tile) * -0.56); }
  100% { background-position: 0% 0, calc(var(--tile) * 2) calc(var(--tile) * -2); }
}
.poster__pups { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }

/* A puppy: anchored by the middle of its feet at (--x, --y) from the poster's bottom left, --h tall, --a its
   picture's width/height (set by main.js). No transform on it, so the phone sheet inside can be fixed to the screen. */
.pup {
  --ph: calc(var(--pw) * var(--h) / 100); --pwid: calc(var(--ph) * var(--a, 0.58));
  position: absolute; left: calc(var(--x) * 1% - var(--pwid) / 2); bottom: calc(var(--y) * 1%); width: var(--pwid); height: var(--ph); z-index: 2;
}
.pup.is-behind { z-index: 0; }     /* peeks over the letters from behind */
.pup.is-open { z-index: 5; }
/* Lift the whole poster while a card is open, so the card clears the next section (and the phone bottom bar). */
#breeds > .container { transition: z-index 0s linear 200ms; } /* stays lifted until the closing card has faded */
#breeds > .container:has(.pup.is-open) { z-index: 50; transition-delay: 0s; }
.pup__btn {
  position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto;
  border-radius: 40% 40% 24% 24%; -webkit-tap-highlight-color: transparent;
}
.pup__btn img {
  width: 100%; height: 100%; transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 14px rgb(60 22 29 / 0.18));
  transition: scale 360ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 200ms ease;
}
/* The Shih Tzu is a chest-up shot: fade its cut-off bottom so gaps in the letters never show an edge. */
.pup.is-behind .pup__btn img { filter: none; -webkit-mask: linear-gradient(#000 55%, transparent 88%); mask: linear-gradient(#000 55%, transparent 88%); }
/* A little bigger to hit than it looks (the phone poster is small). */
.pup__btn::after { content: ""; position: absolute; inset: -10px -8px; }
.pup__btn:focus-visible { outline: 3px solid var(--color-text); outline-offset: 6px; }
.pup.is-open .pup__btn img { scale: 1.07; }
.pup__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* When one is open, the others step back a little. */
.poster.has-open .pup:not(.is-open) .pup__btn img { filter: saturate(0.45) brightness(1.05); }

/* The card pops out beside the puppy, towards the middle of the poster, with a little tail pointing at it: a coloured
   header (pink or mustard, alternating like the paw cards; --tone is set per puppy) with the name and personality,
   the four facts with small icons, then the WhatsApp button. */
.pup__card {
  position: absolute; top: 4%; left: calc(100% + 16px); width: 320px; z-index: 1; pointer-events: auto; text-align: left;
  background: var(--color-white); border-radius: 28px;
  box-shadow: 0 30px 60px -24px rgb(60 22 29 / 0.45), 0 0 0 1px rgb(60 22 29 / 0.06);
  opacity: 0; visibility: hidden; scale: 0.94; translate: -8px 0; transform-origin: 0 40px;
  transition: opacity 160ms ease, scale 160ms var(--ease-out), translate 160ms var(--ease-out), visibility 0s linear 160ms;
}
.pup__card::before {
  content: ""; position: absolute; top: 30px; left: -7px; width: 18px; height: 18px; border-radius: 4px;
  background: var(--tone, var(--color-primary)); rotate: 45deg;
}
.pup--left-card .pup__card { left: auto; right: calc(100% + 16px); translate: 8px 0; transform-origin: 100% 40px; }
.pup--left-card .pup__card::before { left: auto; right: -7px; }
/* Puppies at the bottom of the poster open their card upwards; the tail then points from the white lower part. */
.pup--low .pup__card { top: auto; bottom: 4%; transform-origin: 0 calc(100% - 40px); }
.pup--low.pup--left-card .pup__card { transform-origin: 100% calc(100% - 40px); }
.pup--low .pup__card::before { top: auto; bottom: 30px; background: var(--color-white); }
.pup.is-open .pup__card {
  opacity: 1; visibility: visible; scale: 1; translate: 0 0;
  transition: opacity 200ms ease, scale 260ms cubic-bezier(0.34, 1.4, 0.64, 1), translate 260ms var(--ease-out), visibility 0s;
}
.pup__head { position: relative; display: grid; gap: 4px; padding: 20px 22px 18px; border-radius: 28px 28px 0 0; background: var(--tone, var(--color-primary)); }
.pup__card h3 { font-size: 26px; line-height: 1.05; }
.pup__pers { margin: 0; font-size: 15px; line-height: 1.4; }
.pup__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 18px 22px 4px; list-style: none; }
.pup__facts li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 9px; align-items: start; }
.pup__facts i {
  grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--color-primary) 45%, var(--color-white)); color: var(--color-secondary); font-size: 16px;
}
.pup__k { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.pup__v { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.pup__card .pup__ask { width: calc(100% - 44px); min-height: 48px; margin: 14px 22px 22px; padding: 0 16px; font-size: 16px; white-space: normal; }
.pup__close { display: none; }

/* The hint sits above the poster as a small pill. */
.poster__hint {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 0 auto var(--spacing-sm);
  padding: 8px 18px; border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 40%, var(--color-white));
  font-weight: 700; color: var(--color-text);
}
.poster__hint i { color: var(--color-secondary); font-size: 20px; }

/* Entry: the letters rise, then the puppies pop up one after another (once). */
.poster.is-armed .poster__line { opacity: 0; translate: 0 30%; }
.poster.is-armed .pup__btn { opacity: 0; translate: 0 40%; }
.poster.is-in .poster__line { opacity: 1; translate: 0 0; transition: opacity 500ms ease, translate 800ms var(--ease-out); }
.poster.is-in .poster__line + .poster__line { transition-delay: 120ms; }
.poster.is-in .pup__btn { opacity: 1; translate: 0 0; transition: opacity 200ms ease calc(500ms + var(--i) * 90ms), translate 600ms cubic-bezier(0.34, 1.5, 0.64, 1) calc(500ms + var(--i) * 90ms); }

@media (hover: hover) and (pointer: fine) {
  .pup__btn:hover img { scale: 1.07; }
}

/* Phones: the card is a sheet from the bottom of the screen, with a close button. */
@media (max-width: 767px) {
  .pup__card {
    position: fixed; top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; z-index: 60;
    translate: 0 24px; scale: 1; transform-origin: 50% 100%;
  }
  .pup--left-card .pup__card, .pup--low .pup__card { left: 12px; right: 12px; bottom: 12px; translate: 0 24px; }
  .pup.is-open .pup__card { translate: 0 0; }
  .pup__card::before { display: none; }
  .pup__card h3 { padding-right: 44px; }
  .pup__close {
    display: grid; place-items: center; position: absolute; z-index: 1; top: 10px; right: 10px; width: 44px; height: 44px;
    border: 0; border-radius: 50%; background: none; color: var(--color-text); font-size: 22px; cursor: pointer;
  }
}
@media (prefers-reduced-motion: reduce) {
  .poster.is-armed .poster__line, .poster.is-armed .pup__btn { opacity: 1; translate: 0 0; }
  .pup__btn img, .pup__card, .pup.is-open .pup__card { transition: opacity 120ms linear, visibility 0s; scale: 1; translate: 0 0; }
  .pup.is-open .pup__btn img, .pup__btn:hover img { scale: 1; }
}

/* ---------- Doodles: paws, hearts, bones and toys scattered in a section's empty space ----------
   main.js fills each .decor from DECOR (position, size, tilt, colour). They sit behind the content and bob gently, each
   at its own pace; phones keep only the ones at the edges (the rest are --wide). */
.decor, .section > .decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.decor__i {
  position: absolute; left: var(--x); top: var(--y); font-size: var(--s); line-height: 1; color: var(--c); opacity: var(--o);
  rotate: var(--r); animation: decor-bob var(--d) ease-in-out var(--dl) infinite alternate;
}
@keyframes decor-bob { from { translate: 0 -7px; } to { translate: 0 7px; } }
@media (max-width: 767px) {
  .decor__i--wide { display: none; }
  .decor__i { font-size: calc(var(--s) * 0.75); }
}

/* ---------- 06 How it works: a Maltese leads the way ----------
   Base (no JS, reduced motion): the heading and intro line, then the four steps as white cards, each with its pose.
   With JS (.is-scrub) the section is a tall scroll track and the stage pins, filled by the clip of the puppy (a
   canvas, drawn from the scroll by main.js 6c); the heading and paw progress sit at the top, and one caption card at
   the bottom shows the intro line, then each step in turn (.is-on). --p is how far through it you are (0 to 1). */
.howto__stage { max-width: calc(var(--container) + var(--spacing-gutter) * 2); margin: 0 auto; padding: 0 var(--spacing-gutter); }
.howto__head { display: grid; justify-items: center; margin-bottom: var(--spacing-sm); text-align: center; }
.howto__head h2 { margin: 0; }
.howto__progress { display: none; }
.howto__caps { display: grid; gap: var(--spacing-xl); }
.howto__lead { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0; color: var(--color-text-muted); font-size: 19px; text-align: center; }
.howto__lead i { color: var(--color-secondary); }
.howto__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-md); margin: 0; padding: 0; list-style: none; }
.howto__step {
  display: grid; align-content: start; gap: 8px; padding: 24px 24px 28px; border-radius: 28px; background: var(--color-white);
  box-shadow: 0 24px 48px -28px rgb(60 22 29 / 0.45);
}
.howto__pose { justify-self: center; width: auto; height: 150px; margin-bottom: 6px; }
.howto__n {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px;
  background: var(--color-accent); font: 800 15px var(--font-body); color: var(--color-text);
}
.howto__n i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--color-white); color: var(--color-secondary); font-size: 17px; }
.howto__num { display: none; }
.howto__txt { display: grid; gap: 8px; }
.howto__step h3 { font-size: calc(var(--h3) + 4px); }
.howto__step p { margin: 0; color: var(--color-text-muted); font-size: 17px; }
@media (max-width: 1100px) { .howto__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .howto__steps { grid-template-columns: minmax(0, 1fr); } }

/* The pinned stage. The section takes the clip's studio grey (its wave above too), so the clip's edges disappear. */
.howto.is-scrub { --p: 0; padding: 0; background-color: #e8eaea; }
.section > .howto__stage { position: relative; }
.howto.is-scrub > .howto__stage { position: sticky; top: 0; height: 100svh; min-height: 520px; max-width: none; padding: 0; overflow: hidden; }
/* The clip sits in the middle, above the caption card (the puppy is always in the middle of it; it is a close shot,
   so it is not blown up to cover the stage), its edges fading into the matching grey. */
.howto__film {
  position: absolute; left: 50%; top: 44%; translate: -50% -50%; aspect-ratio: 16 / 9; height: min(76svh, 50vw); width: auto; pointer-events: none;
  -webkit-mask: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(transparent, #000 8%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(transparent, #000 8%, #000 90%, transparent);
  mask-composite: intersect;
}
.is-scrub .howto__head {
  position: absolute; top: clamp(92px, 12svh, 120px); left: max(var(--spacing-gutter), 5vw); right: max(var(--spacing-gutter), 5vw);
  display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-md); margin: 0; text-align: left;
}
.is-scrub .howto__head h2 { font-size: clamp(40px, 4.6vw, 72px); color: var(--color-secondary); }
/* Progress: four paws on a track that fills as you scroll; a paw lights once its step has arrived. */
.is-scrub .howto__progress {
  position: relative; display: flex; gap: clamp(28px, 4vw, 56px); margin: 0; padding: 0; list-style: none;
}
.is-scrub .howto__progress::before, .is-scrub .howto__progress::after {
  content: ""; position: absolute; left: 18px; right: 18px; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: rgb(60 22 29 / 0.12);
}
.is-scrub .howto__progress::after { background: var(--color-accent); transform-origin: left center; scale: var(--p) 1; }
.howto__progress li {
  position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 18px;
  background: var(--color-white); color: rgb(60 22 29 / 0.25); box-shadow: 0 6px 14px -8px rgb(60 22 29 / 0.5);
  transition: background-color 300ms ease, color 300ms ease, scale 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.howto__progress li.is-on { background: var(--color-accent); color: var(--color-text); scale: 1.12; }
/* One caption card at the bottom: the intro line, then each step, crossfading in place. It sits just above the
   height of the next section's wave, so the wave never covers it as the section scrolls away. */
.is-scrub .howto__caps {
  position: absolute; left: 50%; bottom: max(5svh, calc(var(--wave-h) + 12px)); translate: -50% 0; width: min(600px, calc(100% - 32px)); display: grid; gap: 0;
}
.is-scrub .howto__steps { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; }
.is-scrub .howto__lead, .is-scrub .howto__step {
  grid-area: 1 / 1; align-self: end; margin: 0; padding: 22px 28px 24px; border-radius: 28px; background: var(--color-white);
  box-shadow: 0 24px 48px -26px rgb(60 22 29 / 0.5); opacity: 0; translate: 0 14px; visibility: hidden;
  transition: opacity 420ms ease, translate 520ms var(--ease-out), visibility 0s linear 520ms;
}
.is-scrub .howto__lead { justify-content: flex-start; font: 600 clamp(18px, 1.6vw, 22px)/1.4 var(--font-display); color: var(--color-text); text-align: left; }
.is-scrub .howto__step { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: center; }
.is-scrub .howto__step .howto__n { align-self: start; }
.is-scrub .howto__step .howto__txt { gap: 4px; }
.is-scrub .howto__step h3 { font-size: clamp(22px, 2vw, 28px); }
.is-scrub .howto__step p { font-size: 17px; }
.is-scrub .howto__pose { display: none; }
.is-scrub .howto__lead.is-on, .is-scrub .howto__step.is-on { opacity: 1; translate: 0 0; visibility: visible; transition-delay: 0s; }
/* Desktop: no card. The step's number, huge, on the left of the puppy, its title and text on the right (the intro
   line on the right too); the number rises in and the text slides in as each step arrives. The clip sits in the
   middle. Tablets and phones keep the card. */
@media (min-width: 1101px) and (min-aspect-ratio: 6 / 5) {
  .howto__film { top: 50%; }
  .is-scrub .howto__caps { inset: 0; translate: none; width: auto; display: block; pointer-events: none; }
  .is-scrub .howto__steps { position: absolute; inset: 0; display: block; }
  .is-scrub .howto__lead, .is-scrub .howto__step { position: absolute; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .is-scrub .howto__step { inset: 0; display: block; translate: none; align-self: stretch; justify-self: stretch; }
  .is-scrub .howto__num {
    display: block; position: absolute; left: max(var(--spacing-gutter), 6vw); top: 52%; translate: 0 -50%;
    font: 700 clamp(150px, 15vw, 270px)/0.8 var(--font-display); letter-spacing: -0.03em; color: var(--color-secondary);
    transition: translate 650ms var(--ease-out);
  }
  .is-scrub .howto__txt, .is-scrub .howto__lead {
    position: absolute; right: max(var(--spacing-gutter), 5vw); top: 52%; width: min(340px, 23vw); gap: 12px;
    translate: 0 -50%; transition: translate 650ms var(--ease-out);
  }
  .is-scrub .howto__step:not(.is-on) .howto__num { translate: 0 calc(-50% + 48px); }
  .is-scrub .howto__step:not(.is-on) .howto__txt { translate: 28px -50%; }
  .is-scrub .howto__lead { left: auto; bottom: auto; align-items: flex-start; font-size: clamp(24px, 2vw, 30px); line-height: 1.3; }
  .is-scrub .howto__lead:not(.is-on) { translate: 28px -50%; }
  /* The intro's paw stands where the step numbers will be, just as big: placed from the line's own left edge
     (95vw less its width) back to the numbers' 6vw. */
  .is-scrub .howto__lead i {
    position: absolute; left: calc(min(340px, 23vw) - 89vw); top: 50%; translate: 0 -50%; rotate: -12deg;
    font-size: clamp(190px, 18vw, 330px); line-height: 1;
  }
  .is-scrub .howto__step .howto__n { display: none; }
  .is-scrub .howto__step h3 { font-size: clamp(36px, 3.2vw, 50px); line-height: 1.05; }
  .is-scrub .howto__step p { font-size: 19px; }
}
/* Portrait screens: the clip is a band across the middle (covering would crop the puppy), its top and bottom
   fading into the grey; the heading and progress stack at the top, the card sits near the bottom. */
@media (max-aspect-ratio: 6 / 5) {
  .howto__film {
    width: max(100%, 74svh); height: auto; top: 47%;
    -webkit-mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  }
  .is-scrub .howto__head { top: 84px; flex-direction: column; gap: 14px; text-align: center; }
}
@media (max-width: 767px) {
  .is-scrub .howto__head h2 { font-size: 40px; }
  .is-scrub .howto__caps { bottom: calc(60px + env(safe-area-inset-bottom)); }
  .is-scrub .howto__lead, .is-scrub .howto__step { padding: 16px 18px 18px; border-radius: 22px; }
  .is-scrub .howto__step .howto__n { align-self: center; padding: 4px 10px 4px 4px; font-size: 13px; } /* centred beside the title and text */
  .is-scrub .howto__step .howto__n i { width: 26px; height: 26px; font-size: 15px; }
  .is-scrub .howto__step h3 { font-size: 20px; }
  .is-scrub .howto__step p { font-size: 15px; }
}

/* ---------- 07 Reviews: heading centred above the Facebook review cards ----------
   With the walk-by (main.js 7b, .reviews-walk) the dog first pulls a giant banner across; the heading here and the
   cards then fade in as the banner passes them. */
.reviews { display: grid; gap: var(--spacing-lg); }
.reviews__copy { display: grid; justify-items: center; text-align: center; }

/* Facebook review cards (built by main.js 7a from data/reviews.js): three across on desktop, wrapping onto more rows
   (two, then one, on smaller screens). Each card reads like a Facebook recommendation: who, "recommends JuJuba Pets",
   when, their words, and a link back to it on Facebook. */
.reviews__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-md); margin: 0; padding: 10px 0 0; list-style: none; }
.fb-review {
  position: relative; scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr auto; gap: 14px;
  padding: 22px 24px; border-radius: var(--radius-card); background: var(--color-white);
  border: 2px solid var(--color-line); box-shadow: 0 24px 44px -34px var(--color-text);
}
.fb-review__head { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; }
.fb-review__avatar {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: var(--color-primary); color: var(--color-text); font: 700 20px var(--font-display);
}
.fb-review__avatar img { width: 100%; height: 100%; object-fit: cover; }
.fb-review__who { display: grid; gap: 2px; min-width: 0; font-size: 15px; line-height: 1.35; color: var(--color-text-muted); }
.fb-review__who b { color: var(--color-text); font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-review__rec { display: inline-flex; align-items: center; gap: 6px; }
.fb-review__rec i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--color-secondary); color: var(--color-white); font-size: 11px; }
.fb-review blockquote { margin: 0; font-size: 16px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.fb-review__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.fb-review__puppy { padding: 5px 12px; border-radius: 999px; background: var(--color-primary); font-weight: 800; font-size: 13px; }
.fb-review__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 800; font-size: 15px; color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
.fb-review__sample { position: absolute; top: -10px; right: 18px; padding: 3px 10px; border-radius: 999px; background: var(--color-accent); font: 800 12px var(--font-body); }

/* Walk-by (main.js 7b): the section's top wave and the next section's wave are drawn as live SVGs that part to open a
   passage for the dog as it walks across, and each piece of content appears just after the dog has passed it. Both use
   the usual 80-unit wave with room to move: the top one 160 units up into the section above, the bottom one 120 units
   down into the section below (where its white "clear" path paints the passage over the next section's colour). */
.section > .wave-live { position: absolute; z-index: 2; left: 0; width: 100%; pointer-events: none; overflow: visible; }
.wave-live--top { bottom: calc(100% - 1px); height: calc(var(--wave-h) * 3); fill: var(--color-white); }
.wave-live--bottom { bottom: calc(-1px - var(--wave-h) * 1.5); height: calc(var(--wave-h) * 2.5); }
.wave-live__clear { fill: var(--color-white); }
.has-live-waves::before, .has-live-waves + .section::before { visibility: hidden; }
/* The dog: a looping stride (assets/reviews/dog-walk.webp, one gait cycle cut from the green-screen clip) that
   main.js slides across at the stride's own speed, centred on the section (--dog-top) so it reaches into both waves,
   with a soft shadow under its paws. It walks in front of the content. */
/* The dog starts and finishes off screen: clip it sideways only (it still reaches into the waves above and below), or
   phones widen the page to fit it. */
#reviews { overflow-x: clip; }
.section > .walk-dog {
  position: absolute; z-index: 3; left: 0; top: var(--dog-top, 0); height: clamp(240px, 36vw, 580px);
  aspect-ratio: 836 / 560; pointer-events: none; opacity: 0; will-change: transform;
}
.walk-dog img { position: relative; display: block; width: 100%; height: 100%; }
.walk-dog__shadow {
  position: absolute; left: 14%; right: 18%; bottom: -1.5%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(60, 22, 29, 0.22), transparent);
}
/* The heading and each review card wait, then fade in where they stand as the dog walks past them. */
.reviews-walk [data-walk] { opacity: 0; }
.reviews-walk [data-walk].is-shown { opacity: 1; transition: opacity 800ms ease; }
/* Phones: a smaller dog (it only crosses the heading), and each card rises into place as it scrolls into view. */
@media (max-width: 767px) {
  .section > .walk-dog { height: 170px; }
  .reviews-walk .fb-review[data-walk] { translate: 0 40px; scale: 0.96; }
  .reviews-walk .fb-review[data-walk].is-shown {
    translate: 0 0; scale: 1;
    transition: opacity 600ms ease, translate 800ms var(--ease-out), scale 800ms var(--ease-out);
  }
}

/* ---------- 08 FAQ ----------
   Each question is a dog bone: a white body with two round knobs at each end (four background circles in the
   corners, sticking out --o above and below the body, so they make the bone's notched ends). Opened, the bone grows
   taller with the answer. The toggle is a paw: raspberry with a white paw, mustard and flipped when open. */
.faq { display: grid; gap: 14px; }
.faq details {
  --k: 28px; --o: 12px; --bone: var(--color-white);
  --knob: radial-gradient(circle closest-side, var(--bone) 97%, transparent 100%);
  padding: var(--o) 0; border-radius: 0;
  background:
    var(--knob) left top / calc(var(--k) * 2) calc(var(--k) * 2) no-repeat,
    var(--knob) right top / calc(var(--k) * 2) calc(var(--k) * 2) no-repeat,
    var(--knob) left bottom / calc(var(--k) * 2) calc(var(--k) * 2) no-repeat,
    var(--knob) right bottom / calc(var(--k) * 2) calc(var(--k) * 2) no-repeat,
    linear-gradient(var(--bone), var(--bone)) center / calc(100% - var(--k) * 2) calc(100% - var(--o) * 2) no-repeat;
  filter: drop-shadow(0 10px 14px rgb(60 22 29 / 0.07));
  transition: translate 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .faq details:hover { translate: 0 -2px; } }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px calc(var(--k) + 14px); font: 800 18px var(--font-body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "\E648"; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font: 400 20px/1 "Phosphor-Fill"; color: var(--color-white); background: var(--color-secondary);
  transition: rotate 320ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 200ms ease, color 200ms ease;
}
.faq details[open] summary::after { rotate: 180deg; background: var(--color-accent); color: var(--color-text); }
.faq details p { padding: 0 calc(var(--k) + 14px) 18px; color: var(--color-text-muted); max-width: 70ch; }
@media (max-width: 767px) {
  .faq details { --k: 20px; --o: 9px; }
  .faq summary { padding: 14px calc(var(--k) + 8px); font-size: 16px; }
  .faq summary::after { width: 34px; height: 34px; font-size: 18px; }
  .faq details p { padding: 0 calc(var(--k) + 8px) 14px; }
}

/* ---------- 09 Final CTA: the finale ---------- */
/* main.js 9 drives it with numbers from 0 to 1: --reveal (the paw window opens, the clip settles) and --ui (heading
   and buttons). The defaults are the end state, so without JS it is simply the CTA over the clip. With JS (.is-scrub) the section becomes a tall track pulled up under the last screen
   of the FAQ and drawn over it: its stage pins the moment the FAQ's end reaches the bottom of the screen and opens there
   as a window in the shape of the site's paw print (a mask that main.js sizes and places), growing until the puppies
   fill the screen. Below the stage the track is the FAQ's pink, so the FAQ carries on around the window as it scrolls
   away. The track takes no clicks (the FAQ under it still does) until the buttons arrive. */
.cta { --reveal: 1; --ui: 1; position: relative; }
.cta.is-scrub {
  --reveal: 0; --ui: 0; z-index: 2; margin-top: calc(-1 * var(--stage-h, 100svh)); pointer-events: none;
  background: linear-gradient(transparent var(--stage-h, 100svh), var(--color-primary) 0);
}
.cta.is-ui .cta__content { pointer-events: auto; }
.finale__stage { position: relative; height: 100svh; min-height: 560px; overflow: hidden; display: grid; background: var(--color-secondary); }
.cta.is-scrub .finale__stage { position: sticky; top: 0; }
.cta.is-shut .finale__stage { visibility: hidden; }
/* The window: the paw (main.js places it with its pad mid-screen) plus a circle from the same point that rounds it out
   and fills the screen at the end. Fully open, the mask is dropped. */
.cta.is-scrub:not(.is-shut, .is-open) .finale__stage {
  --paw-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,108a28,28,0,1,1-28-28A28,28,0,0,1,240,108ZM72,108a28,28,0,1,0-28,28A28,28,0,0,0,72,108ZM92,88A28,28,0,1,0,64,60,28,28,0,0,0,92,88Zm72,0a28,28,0,1,0-28-28A28,28,0,0,0,164,88Zm23.12,60.86a35.3,35.3,0,0,1-16.87-21.14,44,44,0,0,0-84.5,0A35.25,35.25,0,0,1,69,148.82,40,40,0,0,0,88,224a39.48,39.48,0,0,0,15.52-3.13,64.09,64.09,0,0,1,48.87,0,40,40,0,0,0,34.73-72Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--paw-mask) var(--paw-x) var(--paw-y) / var(--paw) no-repeat, radial-gradient(circle at var(--hole-x) var(--hole-y), #000 var(--hole), transparent calc(var(--hole) + 0.5px));
  mask: var(--paw-mask) var(--paw-x) var(--paw-y) / var(--paw) no-repeat, radial-gradient(circle at var(--hole-x) var(--hole-y), #000 var(--hole), transparent calc(var(--hole) + 0.5px));
}
.cta h2 { font-size: calc(var(--h2) + 8px); color: var(--color-white); }
.cta__home { position: absolute; inset: 0; margin: 0; background: #140609; }
.cta__home video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; scale: calc(1 + (1 - var(--reveal)) * 0.08); }
.finale__shade { position: absolute; inset: 0; pointer-events: none; opacity: var(--ui); background: linear-gradient(to bottom, rgb(28 8 13 / 0.7), rgb(28 8 13 / 0.32) 40%, transparent 64%); }
.cta__content { position: relative; align-self: start; gap: var(--spacing-md); padding-top: clamp(104px, 15svh, 160px); }
.cta__content > * {
  --o: clamp(0, var(--ui) * 2.2 - var(--i, 0) * 0.6, 1);
  opacity: var(--o); translate: 0 calc((1 - var(--o)) * 28px); text-shadow: 0 2px 18px rgb(28 8 13 / 0.35);
}
.cta__content > :nth-child(2) { --i: 1; }
.cta__content > :nth-child(3) { --i: 2; text-shadow: none; }
.cta.is-scrub:not(.is-ui) .cta__content { visibility: hidden; }
/* The nav steps aside while the window opens, until the heading arrives. */
.nav { transition: opacity 400ms ease, visibility 400ms; }
.finale-dark .nav { opacity: 0; visibility: hidden; }
/* Wide screens: the clip looks up at three puppies peering down from the top and the right, so the heading and
   buttons sit in the open bottom-left corner of the warm pink ceiling, in dark text, straight on the clip. */
@media (min-aspect-ratio: 6 / 5) {
  .cta__home video { object-position: 50% 40%; }
  .finale__shade { display: none; }
  .cta__content {
    align-self: end; justify-self: start; justify-items: start; width: auto; max-width: 600px; text-align: left;
    margin: 0 0 clamp(48px, 9svh, 110px) max(var(--spacing-gutter), 6vw); padding: 0;
  }
  .cta__content > * { text-shadow: none; }
  .cta h2, .cta .lead--on-secondary { color: var(--color-text); }
  .cta .btn-row--center { justify-content: flex-start; }
  .cta .btn--white { background: var(--color-secondary); color: var(--color-white); box-shadow: 0 10px 24px -12px var(--color-secondary); }
  .cta .btn--outline-white { background: var(--color-white); color: var(--color-text); border-color: var(--color-text); } /* solid: see-through over the playing clip flickers */
}
/* Tall screens: their own upright clip (main.js 9 picks look-up-tall.mp4), full screen, with the three puppies
   along the bottom and the open peach wall above them, so the heading and buttons sit at the top in dark text,
   straight on the clip. */
@media (max-aspect-ratio: 6 / 5) {
  .cta__home video { object-position: 50% 100%; }
  .finale__shade { display: none; }
  .cta__content > * { text-shadow: none; }
  .cta h2, .cta .lead--on-secondary { color: var(--color-text); }
  .cta .btn--white { background: var(--color-secondary); color: var(--color-white); box-shadow: 0 10px 24px -12px var(--color-secondary); }
  .cta .btn--outline-white { background: var(--color-white); color: var(--color-text); border-color: var(--color-text); } /* solid: see-through over the playing clip flickers */
}
@media (max-width: 767px) {
  .cta .btn-row .btn { flex: 1 1 100%; }
  .cta__content { padding-top: 88px; }
}

/* ---------- Footer ---------- */
/* Footer: kept to a landing page's needs. The logo and one line on the left, the legal line on the right, the three
   ways to reach us centred under a hairline. Phones: stacked and centred. */
.footer { background: var(--color-primary); padding: var(--spacing-xl) 0 var(--spacing-md); font-size: 16px; }
.footer::before { display: none; } /* a straight edge under the finale, no wave */
.footer__in { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-md) var(--spacing-lg); flex-wrap: wrap; }
.footer__who { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer__who p { margin: 0; color: var(--color-text-muted); }
.footer__contact {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; margin-top: var(--spacing-sm); padding-top: var(--spacing-sm); list-style: none;
  border-top: 1px solid rgb(60 22 29 / 0.12);
}
.footer__contact a, .footer__contact span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font-weight: 700; }
.footer__contact i { font-size: 20px; color: var(--color-secondary); }
@media (hover: hover) and (pointer: fine) { .footer__contact a:hover { text-decoration: underline; } }
.footer__legal { margin: 0; font-size: 14px; color: var(--color-text-muted); }
@media (max-width: 767px) {
  .footer { padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom)); text-align: center; }
  .footer__in, .footer__who { flex-direction: column; justify-content: center; gap: 8px; }
  .footer__contact { flex-direction: column; align-items: center; gap: 0; }
}