/* ── home.css: Savannah's homepage section styles ── */

/* Map source-site tokens to sav- prefixed tokens already defined in header.css */
:root {
  --cream-50: var(--sav-cream-50);
  --cream-100: var(--sav-cream-100);
  --cream-200: var(--sav-cream-200);
  --cream-300: #E8D8C4;
  --sand-300: var(--sav-sand-300);
  --caramel-400: var(--sav-caramel-400);
  --caramel-500: var(--sav-caramel-500);
  --caramel-700: var(--sav-caramel-700);
  --chocolate-800: var(--sav-chocolate-800);
  --chocolate-900: var(--sav-chocolate-900);
  --white: var(--sav-white);
  --blush-200: #F4DCD3;
  --sage-500: #7F9474;
  --sage-700: #56694C;
  --amber-500: #D9A441;
  --amber-700: #8A6414;
  --rose-600: #B5524A;
  --color-bg: var(--sav-cream-50);
  --color-bg-alt: var(--sav-cream-100);
  --color-surface: var(--sav-white);
  --color-text: var(--sav-chocolate-900);
  --color-text-muted: #6B5446;
  --color-heading: var(--sav-chocolate-800);
  --color-link: var(--sav-caramel-700);
  --color-border: var(--sav-sand-300);
  --color-accent: var(--sav-caramel-500);
  --color-focus: var(--sav-caramel-400);
  --overlay-photo: linear-gradient(180deg,rgba(43,29,20,.15) 0%,rgba(43,29,20,.7) 100%);
  --font-display: var(--sav-font-display);
  --font-body: var(--sav-font-body);
  --font-script: "Caveat","Segoe Script",cursive;
  --fs-hero: clamp(2.5rem,1.6rem + 4.5vw,5.25rem);
  --fs-h1: clamp(2.125rem,1.6rem + 2.6vw,3.75rem);
  --fs-h2: clamp(1.75rem,1.35rem + 1.9vw,2.875rem);
  --fs-h3: clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1.0625rem,1rem + .35vw,1.25rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-xs: .8125rem;
  --fs-eyebrow: .8125rem;
  --fs-script: clamp(1.5rem,1.3rem + .8vw,2rem);
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.65;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --section-pad: clamp(4rem,3rem + 5vw,8rem);
  --gutter: 1rem;
  --container: 1240px;
  --container-narrow: 760px;
  --header-h: var(--sav-header-h, 64px);
  --radius-sm: var(--sav-radius-sm);
  --radius-md: var(--sav-radius-md);
  --radius-lg: 28px;
  --radius-pill: 999px;
  --radius-arch: 999px 999px var(--radius-lg) var(--radius-lg);
  --shadow-sm: var(--sav-shadow-sm);
  --shadow-md: 0 8px 24px rgba(74,46,31,.10);
  --shadow-lg: var(--sav-shadow-lg);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;
}

/* Load Caveat (script font) + Google Fonts already loaded by header.css */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap');

/* ── Base resets for homepage ── */
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
main { display: block; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-tight); color: var(--color-heading); margin: 0; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0; line-height: var(--lh-body); }
em.accent { font-style: italic; color: var(--caramel-700); }
svg.icon { display: inline-block; width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; flex-shrink: 0; }
.star--off { opacity: .3; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.text-center { text-align: center; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding-block: var(--section-pad); }
.grid-2 { display: grid; gap: 1.5rem; }
@media (min-width: 48em) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ── Utility classes ── */
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--caramel-700); }
.eyebrow .icon { width: 1.1em; height: 1.1em; }
.lead { font-size: var(--fs-lead); color: var(--color-text-muted); max-width: 60ch; }
.script { font-family: var(--font-script); font-weight: 600; font-size: var(--fs-script); line-height: 1.1; color: var(--caramel-700); }
.section--alt { background: var(--color-bg-alt); }
.section--tight { padding-block: clamp(2.5rem,2rem + 3vw,4.5rem); }
.section--dark { background: var(--chocolate-800); color: var(--cream-100); }
.section--dark h1,.section--dark h2,.section--dark h3 { color: var(--cream-50); }
.section--dark .eyebrow { color: var(--caramel-400); }
.section--dark .lead { color: rgba(251,246,239,.8); }
.section-head { display: grid; gap: var(--space-3); margin-bottom: clamp(2rem,1.5rem + 2vw,3.5rem); max-width: 720px; }
.section-head--center { text-align: center; margin-inline: auto; justify-items: center; }
.section-head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4) var(--space-8); }
.section-head--row > div { display: grid; gap: var(--space-3); max-width: 640px; }
.split { display: grid; gap: clamp(2rem,1rem + 4vw,5rem); align-items: center; }
@media (min-width: 64em) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse > :first-child { order: 2; }
  .split--wide-text { grid-template-columns: .9fr 1.1fr; }
}
.split__content { display: grid; gap: var(--space-5); justify-items: start; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ── Cards ── */
.card { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.card--hover { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
@media (hover:hover) { .card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } }

/* ── Buttons ── */
.btn { --btn-bg: var(--chocolate-800); --btn-fg: var(--cream-50); --btn-bd: transparent; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .85rem 1.6rem; border: 1.5px solid var(--btn-bd); border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-body); font-size: 1rem; font-weight: 500; line-height: 1.1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.btn:hover { color: var(--btn-fg); }
.btn .icon { width: 1.15em; height: 1.15em; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .icon--arrow { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(.98); }
@media (hover:hover) { .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } }
.btn--primary:hover { --btn-bg: var(--caramel-700); }
.btn--accent { --btn-bg: var(--caramel-500); --btn-fg: var(--chocolate-900); }
.btn--accent:hover { --btn-bg: var(--caramel-400); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--chocolate-800); --btn-bd: var(--chocolate-800); }
.btn--outline:hover { --btn-bg: var(--chocolate-800); --btn-fg: var(--cream-50); }
.btn--light { --btn-bg: var(--cream-50); --btn-fg: var(--chocolate-900); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: var(--cream-50); --btn-bd: rgba(255,252,247,.7); }
.btn--outline-light:hover { --btn-bg: var(--cream-50); --btn-fg: var(--chocolate-900); --btn-bd: var(--cream-50); }
.btn--sm { min-height: 44px; padding: .6rem 1.15rem; font-size: .925rem; }
.btn--lg { min-height: 56px; padding: 1rem 2rem; font-size: 1.05rem; }
.link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--caramel-700); text-decoration: none; background: linear-gradient(currentcolor,currentcolor) 0 100% / 0 1.5px no-repeat; padding-bottom: 2px; transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast); }
.link-arrow:hover { background-size: 100% 1.5px; color: var(--chocolate-800); }
.link-arrow .icon { width: 1.1em; height: 1.1em; transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ── Badges ── */
.badge { --badge-c: var(--sage-700); --badge-bg: rgba(127,148,116,.16); display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: var(--radius-pill); background: var(--badge-bg); color: var(--badge-c); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentcolor; }
.badge--available { --badge-c: var(--sage-700); --badge-bg: rgba(237,243,233,.95); }
.badge--reserved { --badge-c: var(--amber-700); --badge-bg: rgba(252,243,222,.95); }
.badge--sold { --badge-c: var(--rose-600); --badge-bg: rgba(250,234,232,.95); }
.badge--upcoming { --badge-c: var(--caramel-700); --badge-bg: rgba(243,233,220,.95); }

/* ── Frames / media ── */
.frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--cream-200); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--arch { border-radius: var(--radius-arch); aspect-ratio: 4/5; }
.frame--square { aspect-ratio: 1/1; }
.frame--land { aspect-ratio: 3/2; }
.blob { position: absolute; z-index: -1; inset: -6% -8% -4% -6%; background: var(--blush-200); border-radius: 62% 38% 46% 54% / 55% 44% 56% 45%; animation: blob-morph 14s ease-in-out infinite alternate; }
.blob--cream { background: var(--cream-200); }
.blob--caramel { background: rgba(211,154,94,.28); }
.media-note { position: absolute; z-index: 2; display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: .9rem; line-height: 1.3; }
.media-note strong { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--chocolate-800); }
.media-note__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--cream-200); color: var(--caramel-700); flex-shrink: 0; }

/* ── Decorative ── */
.scribble { position: relative; display: inline-block; white-space: nowrap; }
.scribble svg { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .35em; overflow: visible; color: var(--caramel-400); }
.title-ornament { display: block; width: 88px; height: 14px; color: var(--caramel-400); }
.title-ornament path { stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1.1s var(--ease-out) .25s; }
.is-visible .title-ornament path, .title-ornament.is-visible path { stroke-dashoffset: 0; }
.floaty { animation: float 6s ease-in-out infinite; }
.floaty--slow { animation-duration: 8s; animation-delay: -2s; }
.floaty--rotate { animation: float-rotate 7s ease-in-out infinite; }
.typewriter__caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -.12em; background: var(--caramel-400); animation: caret-blink 1s steps(1) infinite; }

/* ── Keyframes ── */
@keyframes float { 50% { transform: translateY(-10px); } }
@keyframes float-rotate { 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes blob-morph {
  0% { border-radius: 62% 38% 46% 54% / 55% 44% 56% 45%; }
  50% { border-radius: 42% 58% 60% 40% / 45% 58% 42% 55%; }
  100% { border-radius: 55% 45% 38% 62% / 60% 40%; }
}
@keyframes caret-blink { 50% { opacity: 0; } }
@keyframes ken-burns { 0% { transform: scale(1); } 100% { transform: scale(1.08) translate(-1%,-1%); } }
@keyframes marquee { 100% { transform: translateX(-50%); } }
@keyframes bounce-down { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes paw-step {
  0% { opacity: 0; transform: scale(.4) rotate(var(--r,0deg)); }
  100% { opacity: .55; transform: scale(1) rotate(var(--r,0deg)); }
}
@keyframes fade-up { 0% { opacity: 0; transform: translateY(28px); } 100% { opacity: 1; transform: none; } }

/* ── Hero ── */
.hero { position: relative; isolation: isolate; display: grid; align-items: end; min-height: 100svh; max-height: 1000px; padding-block: calc(var(--header-h) + 5rem) 2.5rem; color: var(--cream-50); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--chocolate-800); }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus,50% 40%); transform-origin: 60% 40%; animation: ken-burns 22s ease-in-out infinite alternate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(43,29,20,.45) 0%,rgba(43,29,20,0) 22%), linear-gradient(0deg,rgba(43,29,20,.92) 0%,rgba(43,29,20,.6) 45%,rgba(43,29,20,.05) 75%); }
.hero__content { display: grid; gap: 1.1rem; justify-items: start; max-width: 720px; }
.hero .eyebrow { color: var(--caramel-400); }
.hero__title { font-size: var(--fs-hero); font-weight: 600; color: var(--cream-50); line-height: 1.04; letter-spacing: -.02em; }
.hero__title em { font-style: italic; font-weight: 500; color: var(--caramel-400); }
.hero__typed { width: 100%; font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem,1rem + 1.2vw,1.9rem); line-height: 1.3; color: rgba(255,252,247,.92); }
.hero__actions { display: flex; flex-direction: column; gap: .75rem; width: 100%; margin-top: .5rem; }
.hero__note { display: none; position: absolute; left: calc(100% + .75rem); top: -2.4rem; width: max-content; color: var(--caramel-400); font-size: 1.6rem; transform: rotate(-4deg); }
.hero__note svg { width: 70px; height: 44px; margin-top: .2rem; margin-left: -1.5rem; }
.hero__trust { display: flex; gap: .5rem; width: 100%; overflow-x: auto; scrollbar-width: none; margin-top: .75rem; padding-bottom: .25rem; list-style: none; padding-left: 0; }
.hero__trust::-webkit-scrollbar { display: none; }
.hero__trust li { flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: var(--radius-pill); background: rgba(255,252,247,.14); backdrop-filter: blur(8px); border: 1px solid rgba(255,252,247,.18); font-size: .85rem; font-weight: 500; }
.hero__trust .icon { width: 1rem; height: 1rem; color: var(--caramel-400); }
.hero__scroll { display: none; }
@media (min-width: 30em) { .hero__actions { flex-flow: wrap; width: auto; } }
@media (min-width: 64em) {
  .hero { align-items: center; padding-block: calc(var(--header-h) + 3rem) 6rem; }
  .hero::before { background: linear-gradient(rgba(43,29,20,.5) 0%,rgba(43,29,20,0) 25%),linear-gradient(90deg,rgba(43,29,20,.88) 0%,rgba(43,29,20,.6) 40%,rgba(43,29,20,.05) 72%); }
  .hero__content { gap: 1.35rem; }
  .hero__actions { position: relative; }
  .hero__note { display: block; }
  .hero__trust { position: absolute; right: max(var(--gutter),calc((100vw - var(--container))/2)); bottom: 3rem; width: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.5rem; padding: 1.4rem 1.6rem; margin: 0; overflow: visible; border-radius: var(--radius-md); background: rgba(255,252,247,.88); backdrop-filter: blur(14px); color: var(--chocolate-900); box-shadow: var(--shadow-lg); animation: float 7s ease-in-out infinite; }
  .hero__trust li { padding: 0; background: none; border: 0; backdrop-filter: none; font-size: .92rem; }
  .hero__trust .icon { color: var(--sage-500); width: 1.15rem; height: 1.15rem; }
  .hero__scroll { position: absolute; left: 50%; bottom: 1.5rem; translate: -50%; display: grid; justify-items: center; gap: .35rem; color: rgba(255,252,247,.75); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
  .hero__scroll .icon { width: 26px; height: 26px; animation: bounce-down 2s ease-in-out infinite; }
}

/* ── Trust strip ── */
.trust-strip { background: var(--cream-200); padding-block: 1.25rem; }
.trust-strip__list { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; list-style: none; padding: 0; }
.trust-strip__list li { display: flex; align-items: center; gap: .6rem; font-weight: 500; font-size: .92rem; color: var(--chocolate-800); }
.trust-strip__list .icon { width: 1.4rem; height: 1.4rem; color: var(--caramel-700); }
@media (min-width: 64em) { .trust-strip__list { grid-template-columns: repeat(4,auto); justify-content: space-between; } .trust-strip__list li { font-size: 1rem; } }

/* ── Welcome ── */
.welcome__media { position: relative; max-width: 480px; width: 100%; margin-inline: auto; }
.welcome__media .media-note--a { left: -.5rem; bottom: 12%; }
.welcome__media .media-note--b { right: -.5rem; top: 8%; padding: .7rem .9rem; }
@media (min-width: 48em) { .welcome__media .media-note--a { left: -2.5rem; } .welcome__media .media-note--b { right: -2rem; } }
.welcome__sign { font-size: clamp(1.8rem,1.5rem + 1vw,2.4rem); margin-top: -.25rem; }

/* ── Puppy cards ── */
.puppy-featured-list { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(1.25rem,1rem + 1vw,2rem); width: min(100%,40rem); margin-inline: auto; padding-top: .75rem; }
.puppy-card { container-type: inline-size; display: flex; flex-direction: column; overflow: hidden; }
.puppy-card__media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--cream-200); }
.puppy-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out), opacity 500ms var(--ease-out); }
.puppy-card__media img + img { opacity: 0; }
@media (hover:hover) and (pointer:fine) { .puppy-card:hover .puppy-card__media img { transform: scale(1.05); } .puppy-card:hover .puppy-card__media img + img { opacity: 1; } }
.puppy-card__badges { position: absolute; top: .85rem; left: .85rem; right: .85rem; z-index: 2; display: flex; justify-content: space-between; gap: .5rem; }
.puppy-card__featured { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: var(--radius-pill); background: var(--chocolate-800); color: var(--cream-50); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.puppy-card__featured .icon { width: .9rem; height: .9rem; color: var(--caramel-400); }
.puppy-card__body { display: grid; gap: .35rem; padding: 1.15rem 1.25rem 1.25rem; flex: 1; }
.puppy-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.puppy-card__name { font-size: 1.45rem; }
.puppy-card__name a { color: inherit; text-decoration: none; }
.puppy-card__sex { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; font-weight: 500; color: var(--color-text-muted); white-space: nowrap; }
.puppy-card__sex .icon { width: 1rem; height: 1rem; color: var(--caramel-500); }
.puppy-card__meta { font-size: .95rem; color: var(--color-text-muted); }
.puppy-card__dates { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--color-text-muted); }
.puppy-card__dates .icon { width: 1rem; height: 1rem; color: var(--caramel-500); }
.puppy-card__foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .65rem; padding-top: .85rem; border-top: 1px solid var(--cream-200); }
.puppy-card__price { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--chocolate-800); }
.puppy-card__actions { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr auto; gap: .45rem; align-items: stretch; margin-top: .65rem; }
.puppy-card__actions .btn { min-width: 0; padding-inline: .55rem; font-size: .82rem; }

/* ── Why / Features / Collage ── */
.collage { position: relative; aspect-ratio: 1/1.05; max-width: 540px; width: 100%; margin-inline: auto; }
.collage .frame { position: absolute; border: 6px solid var(--white); box-shadow: var(--shadow-lg); }
.collage .frame:nth-of-type(1) { width: 62%; left: 0; top: 0; aspect-ratio: 1/1; border-radius: var(--radius-lg); }
.collage .frame:nth-of-type(2) { width: 50%; right: 0; top: 24%; border-radius: var(--radius-arch); aspect-ratio: 4/5; }
.collage .frame:nth-of-type(3) { width: 46%; left: 10%; bottom: 0; aspect-ratio: 1/1; border-radius: 50%; }
.collage .blob { inset: 12% 8% 6% 10%; }
.collage__paw { position: absolute; width: 48px; height: 48px; color: var(--caramel-400); opacity: .5; }
.collage__paw--1 { right: 6%; top: 4%; transform: rotate(18deg); }
.collage__paw--2 { right: 12%; bottom: 6%; width: 34px; height: 34px; transform: rotate(-12deg); }
.why__grid { display: grid; gap: 1rem; }
@media (min-width: 30em) { .why__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .why .split { grid-template-columns: .85fr 1.15fr; } }
.feature { display: grid; gap: .75rem; align-content: start; padding: clamp(1.4rem,1rem + 1.2vw,2rem); background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
@media (hover:hover) { .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .feature:hover .feature__icon { background: var(--caramel-500); color: var(--white); transform: rotate(-8deg); } }
.feature__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: var(--cream-200); color: var(--caramel-700); transition: all var(--dur-base) var(--ease-out); }
.feature__icon .icon { width: 26px; height: 26px; }
.feature h3 { font-size: 1.25rem; }
.feature p { color: var(--color-text-muted); font-size: .97rem; }

/* ── Stats band ── */
.stats-band { position: relative; overflow: hidden; }
.stats-band__paw { position: absolute; color: rgba(211,154,94,.12); pointer-events: none; }
.stats-band__paw--1 { width: 180px; height: 180px; left: -40px; top: -30px; transform: rotate(-20deg); }
.stats-band__paw--2 { width: 140px; height: 140px; right: -20px; bottom: -30px; transform: rotate(25deg); }
.stats { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-8) var(--space-4); }
@media (min-width: 48em) { .stats { grid-template-columns: repeat(4,1fr); } }
.stat { display: grid; gap: .35rem; text-align: center; }
.stat__value { font-family: var(--font-display); font-size: clamp(2.5rem,1.8rem + 3vw,4rem); font-weight: 700; line-height: 1; color: var(--cream-50); }
.stat__label { font-size: .92rem; color: rgba(251,246,239,.75); }

/* ── How it works / Steps ── */
.steps { --line: var(--sand-300); position: relative; display: grid; gap: var(--space-8); list-style: none; padding: 0; counter-reset: step 0; }
.steps::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; border-left: 2px dashed var(--line); }
.step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 1.1rem; align-items: start; }
.step__num { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--white); border: 2px solid var(--caramel-400); color: var(--caramel-700); box-shadow: 0 0 0 6px var(--color-bg); }
.step__num .icon { width: 24px; height: 24px; }
.step h3 { font-size: 1.25rem; margin-bottom: .3rem; }
.step p { color: var(--color-text-muted); font-size: .97rem; }
.step__label { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--caramel-700); display: block; margin-bottom: .25rem; }
@media (min-width: 64em) {
  .steps { grid-template-columns: repeat(4,1fr); gap: var(--space-6); }
  .steps::before { inset: 28px 12.5% auto; border-left: 0; border-top: 2px dashed var(--line); }
  .step { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
.section--alt .step__num { box-shadow: 0 0 0 6px var(--color-bg-alt); }
.pay-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.pay-row--center { justify-content: center; text-align: center; }
.pay-row__label { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.pay-row__list { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 0; }
.pay-row__list li { padding: .4rem .95rem; border-radius: var(--radius-pill); background: var(--white); box-shadow: var(--shadow-sm); border: 1px solid var(--cream-200); font-size: .9rem; font-weight: 700; color: var(--chocolate-800); }

/* ── Paw trail ── */
.paw-trail { display: flex; justify-content: center; gap: clamp(1rem,3vw,2.25rem); padding-block: 1rem; color: var(--caramel-400); }
.paw-trail svg { width: 26px; height: 26px; opacity: 0; }
.paw-trail svg:nth-child(2n+1) { --r: -18deg; translate: 0 -8px; }
.paw-trail svg:nth-child(2n) { --r: 18deg; translate: 0 8px; }
.paw-trail.is-visible svg { animation: paw-step 500ms var(--ease-out) forwards; }
.paw-trail.is-visible svg:nth-child(2) { animation-delay: 180ms; }
.paw-trail.is-visible svg:nth-child(3) { animation-delay: 360ms; }
.paw-trail.is-visible svg:nth-child(4) { animation-delay: 540ms; }
.paw-trail.is-visible svg:nth-child(5) { animation-delay: 720ms; }
.paw-trail.is-visible svg:nth-child(6) { animation-delay: 900ms; }

/* ── Parents teaser ── */
.parents-teaser__media { position: relative; max-width: 460px; width: 100%; margin-inline: auto; }
.parents-teaser__list { display: grid; grid-template-columns: repeat(3,1fr); gap: .9rem; width: 100%; margin-block: .5rem; }
.parents-teaser__list .frame--arch { box-shadow: var(--shadow-sm); }
.parents-teaser__list figcaption { text-align: center; margin-top: .5rem; font-family: var(--font-display); font-weight: 600; color: var(--chocolate-800); line-height: 1.2; }
.parents-teaser__list figcaption small { display: block; font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--caramel-700); margin-top: .2rem; }

/* ── Litter cards ── */
.litter-card { display: grid; gap: 1rem; padding: clamp(1.25rem,1rem + 1vw,1.75rem); }
.litter-card__top { display: flex; align-items: center; justify-content: space-between; }
.litter-card__pair { display: flex; align-items: center; }
.litter-card__pair img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--white); box-shadow: var(--shadow-sm); }
.litter-card__pair img + img { margin-left: -18px; }
.litter-card__x { margin-inline: .75rem; font-family: var(--font-display); font-style: italic; color: var(--caramel-500); font-size: 1.5rem; }
.litter-card__title { font-size: 1.35rem; }
.litter-card__facts { display: grid; gap: .4rem; font-size: .93rem; color: var(--color-text-muted); list-style: none; padding: 0; }
.litter-card__facts li { display: flex; gap: .5rem; align-items: center; }
.litter-card__facts .icon { width: 1.05rem; height: 1.05rem; color: var(--caramel-500); }

/* ── Testimonials marquee ── */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg,transparent,black 8%,black 92%,transparent); }
.marquee__track { display: flex; gap: 1.5rem; width: max-content; animation: marquee var(--marquee-dur,60s) linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.reviews-band .marquee__track > .testimonial { width: min(84vw,380px); flex-shrink: 0; }
@media (max-width: 47.99em) {
  .reviews-band .marquee { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; mask-image: none; margin-inline: calc(var(--gutter)*-1); padding-inline: var(--gutter); }
  .reviews-band .marquee::-webkit-scrollbar { display: none; }
  .reviews-band .marquee__track { animation: none; gap: 1rem; padding-bottom: 1rem; }
  .reviews-band .marquee__track > * { scroll-snap-align: start; }
  .reviews-band .marquee__track > [aria-hidden="true"] { display: none; }
}
.reviews-band { position: relative; overflow: hidden; }
.reviews-band__bg { position: absolute; inset: 0; z-index: -1; }
.reviews-band__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .08; }
.testimonial { display: grid; gap: 1rem; align-content: start; padding: clamp(1.4rem,1rem + 1.2vw,2rem); background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.testimonial__mark { font-family: var(--font-display); font-size: 4rem; line-height: .5; color: var(--caramel-400); height: 1.5rem; }
.testimonial__quote { font-size: 1.02rem; color: var(--chocolate-900); }
.stars { display: flex; gap: 2px; color: var(--caramel-500); }
.stars .icon { width: 1.05rem; height: 1.05rem; }
.testimonial__author { display: flex; align-items: center; gap: .8rem; margin-top: .25rem; }
.testimonial__avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--blush-200); color: var(--caramel-700); font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.testimonial__name { font-weight: 700; line-height: 1.3; }
.testimonial__meta { font-size: .85rem; color: var(--color-text-muted); }

/* ── Verify section ── */
.verify { display: grid; gap: 1.25rem; padding: clamp(1.5rem,1rem + 2vw,2.5rem); border-radius: var(--radius-lg); background: var(--white); border: 1.5px dashed var(--caramel-400); }
@media (min-width: 64em) { .verify { grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; } }
.verify__icon { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 22px; background: rgba(127,148,116,.16); color: var(--sage-700); }
.verify__icon .icon { width: 34px; height: 34px; }
.verify h2 { font-size: var(--fs-h3); }
.verify ul { list-style: none; padding: 0; display: grid; gap: .4rem; margin-top: .6rem; }
.verify li { display: flex; gap: .55rem; align-items: flex-start; color: var(--color-text-muted); overflow-wrap: anywhere; }
.verify > * { min-width: 0; }
.verify li .icon { color: var(--sage-500); margin-top: .2rem; }

/* ── Gallery strip ── */
.gallery-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; }
@media (min-width: 48em) { .gallery-strip { grid-template-columns: repeat(6,1fr); gap: .75rem; } }
.gallery-strip a { display: block; aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius-md); position: relative; }
.gallery-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
@media (hover:hover) { .gallery-strip a:hover img { transform: scale(1.08); } }

/* ── FAQ accordion ── */
.accordion { display: grid; gap: .75rem; }
.accordion__item { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.accordion__item[open] { box-shadow: var(--shadow-md); }
.accordion__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.35rem; cursor: pointer; font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; color: var(--chocolate-800); min-height: 56px; }
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__icon { position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--cream-200); transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base); }
.accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--caramel-700); translate: -50% -50%; }
.accordion__icon::after { rotate: 90deg; }
.accordion__item[open] .accordion__icon { transform: rotate(135deg); background: var(--caramel-500); }
.accordion__item[open] .accordion__icon::before, .accordion__item[open] .accordion__icon::after { background: var(--white); }
.accordion__panel { padding: 0 1.35rem 1.25rem; color: var(--color-text-muted); }
.faq-preview .split__content { display: grid; gap: var(--space-5); justify-items: start; }
@media (min-width: 64em) { .faq-preview .split { grid-template-columns: .8fr 1.2fr; align-items: start; } .faq-preview .split__content { position: sticky; top: calc(var(--header-h) + 2rem); } }

/* ── CTA band ── */
.cta-band { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(5rem,4rem + 5vw,9rem); color: var(--cream-50); text-align: center; }
.cta-band__bg { position: absolute; inset: -60px 0; z-index: -2; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(43,29,20,.55),rgba(43,29,20,.78)); }
.cta-band h2 { color: var(--cream-50); font-size: clamp(2rem,1.4rem + 3vw,3.5rem); max-width: 18ch; margin-inline: auto; }
.cta-band .lead { color: rgba(255,252,247,.85); margin: 1rem auto 2rem; }
.cta-band .cluster { justify-content: center; }
.cta-band .script { color: var(--caramel-400); display: block; margin-bottom: .5rem; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,::before,::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee { mask-image: none; }
  .paw-trail svg { opacity: .55; }
  .typewriter__caret { display: none; }
}

/* Hide the WP page title on the front page */
.wp-block-post-title:first-of-type,
.entry-title,
h1.wp-block-heading:not(.hero__title):first-child,
.wp-site-blocks > .wp-block-template-part + * h1.wp-block-heading {
  display: none;
}
.is-front-page .wp-block-post-title,
.home .wp-block-post-title,
.page-id-6 .wp-block-post-title {
  display: none !important;
}