/* ============================================================
   THALWYN FAMILY DOODLES — "FRESH" DESIGN SYSTEM
   New visual identity + hero slider + promo popup +
   screenshot-style testimonials. Loads AFTER style.css.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root{
  --ink:#201d2b; --ink-2:#534d63; --ink-3:#857e96;
  --cream:#fbf7f1; --cream-2:#f3ece0; --card:#ffffff;
  --plum:#3b2f1e; --plum-2:#2c2417;     /* primary */
  --coral:#ff6b53;                       /* accent */
  --mint:#37c98e;                        /* success/available */
  --sun:#ffc24b;                         /* highlight */

  --brand-500:var(--plum); --brand-600:var(--plum-2); --brand-700:var(--plum-2);
  --brand-50:#efeafe; --brand-100:#e2dcff; --accent:var(--coral);
  --bg:var(--cream); --surface:#fff; --surface-2:var(--cream-2);
  --ink-900:var(--ink); --ink-800:var(--ink-2); --ink-600:var(--ink-3);

  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-serif:'Bricolage Grotesque',sans-serif;
  --ease:cubic-bezier(.2,.8,.25,1);
}

body{ background:var(--cream); color:var(--ink-2); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); letter-spacing:-.02em; font-weight:700; }
a{ color:var(--plum); } a:hover{ color:var(--plum-2); }
::selection{ background:var(--sun); color:var(--ink); }
.hl{ color:var(--plum); }

/* buttons */
.btn{ border-radius:999px; font-family:var(--font-sans); font-weight:700; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); }
.btn--primary{ background:var(--plum); color:#fff; box-shadow:0 6px 18px rgba(59,47,30,.3); }
.btn--primary:hover{ background:var(--plum-2); color:#fff; transform:translateY(-2px); }
.btn--ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--cream-2); }
.btn--ghost:hover{ border-color:var(--plum); color:var(--plum); }
.btn--outline{ border:1.5px solid var(--plum); color:var(--plum); background:transparent; }
.btn--outline:hover{ background:var(--plum); color:#fff; }
.btn--outline-light{ border:1.5px solid rgba(255,255,255,.6); color:#fff; }
.btn--outline-light:hover{ background:#fff; color:var(--ink); }

/* header / footer recolor */
.site-header{ background:rgba(251,247,241,.86); backdrop-filter:blur(14px); }
.brand__name{ font-family:var(--font-display); color:var(--ink); }
.brand__sub{ color:var(--plum); }
.trust-bar{ background:var(--ink); }
.site-footer{ background:var(--ink) !important; }
.section-title,.eyebrow{ font-family:var(--font-display); }
.eyebrow{ color:var(--coral); font-weight:700; letter-spacing:.12em; text-transform:uppercase; }

/* ============================================================
   HERO SLIDER
   ============================================================ */
.slider{ position:relative; height:clamp(440px,72vh,640px); overflow:hidden; }
.slider__track{ position:absolute; inset:0; }
.slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .9s var(--ease); }
.slide.is-active{ opacity:1; visibility:visible; }
.slide__bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.04); transition:transform 7s ease; }
.slide.is-active .slide__bg{ transform:scale(1.12); }
.slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(32,29,43,.74) 0%, rgba(32,29,43,.4) 50%, transparent 78%); }
.slide__content{ position:relative; z-index:2; max-width:1180px; margin:0 auto; height:100%; display:flex; flex-direction:column; justify-content:center; padding:0 32px; color:#fff; }
.slide__eyebrow{ display:inline-block; width:max-content; font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--sun); background:rgba(255,255,255,.12); padding:7px 16px; border-radius:999px; backdrop-filter:blur(6px); }
.slide__title{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,5.5vw,4rem); line-height:1.02; letter-spacing:-.03em; color:#fff; margin:18px 0 14px; max-width:680px; }
.slide__text{ font-size:1.12rem; color:rgba(255,255,255,.9); max-width:480px; margin:0 0 26px; }
.slide__cta{ display:flex; gap:14px; flex-wrap:wrap; }
/* animate content in on active */
.slide__eyebrow,.slide__title,.slide__text,.slide__cta{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.slide.is-active .slide__eyebrow{ opacity:1; transform:none; transition-delay:.25s; }
.slide.is-active .slide__title{ opacity:1; transform:none; transition-delay:.38s; }
.slide.is-active .slide__text{ opacity:1; transform:none; transition-delay:.5s; }
.slide.is-active .slide__cta{ opacity:1; transform:none; transition-delay:.62s; }
/* arrows + dots */
.slider__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:50px; height:50px; border-radius:50%; border:none; background:rgba(255,255,255,.18); color:#fff; font-size:24px; cursor:pointer; backdrop-filter:blur(8px); display:grid; place-items:center; transition:background .2s; }
.slider__arrow:hover{ background:rgba(255,255,255,.34); }
.slider__arrow--prev{ left:22px; } .slider__arrow--next{ right:22px; }
.slider__dots{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:10px; }
.slider__dot{ width:11px; height:11px; border-radius:50%; border:none; background:rgba(255,255,255,.4); cursor:pointer; transition:all .25s; padding:0; }
.slider__dot.is-active{ background:#fff; width:30px; border-radius:999px; }
@media(max-width:560px){ .slider__arrow{ display:none; } .slide__content{ padding:0 22px; } }

/* ============================================================
   GENERIC CARDS (puppies / parents / blog)
   ============================================================ */
.puppy-card,.parent-card,.blog-card{ background:var(--card); border-radius:22px; overflow:hidden; box-shadow:0 10px 30px rgba(32,29,43,.07); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.puppy-card:hover,.parent-card:hover,.blog-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(32,29,43,.14); }
.puppy-card__img,.parent-card__img,.blog-card__img{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--cream-2); }
.puppy-card__img img,.parent-card__img img,.blog-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.puppy-card:hover .puppy-card__img img,.blog-card:hover .blog-card__img img{ transform:scale(1.07); }
.puppy-card__badge{ position:absolute; top:12px; left:12px; padding:5px 13px; border-radius:999px; font-size:.72rem; font-weight:700; text-transform:uppercase; }
.puppy-card__badge--available{ background:var(--mint); color:#fff; }
.puppy-card__badge--reserved{ background:var(--coral); color:#fff; }
.puppy-card__price,.puppy-card__price-inline{ color:var(--plum); font-weight:800; }
.blog-card__cat{ color:var(--coral); font-weight:700; text-transform:uppercase; font-size:.74rem; }
.puppy-card__placeholder{ display:grid; place-items:center; width:100%; height:100%; font-size:44px; background:var(--cream-2); }

/* ============================================================
   SCREENSHOT TESTIMONIALS — chat-proof wall
   ============================================================ */
.tw-wall{ columns:3 300px; column-gap:24px; max-width:1100px; margin:0 auto; padding:0 24px; }
@media(max-width:680px){ .tw-wall{ columns:1; } }
.tw-proof{ break-inside:avoid; margin-bottom:24px; background:var(--card); border-radius:22px; overflow:hidden; box-shadow:0 10px 30px rgba(32,29,43,.08); }
.tw-proof__shot{ position:relative; background:var(--cream-2); }
.tw-proof__shot img{ width:100%; display:block; }
.tw-proof__shot::after{ content:"💬 real message"; position:absolute; top:12px; right:12px; font-size:11px; font-weight:700; background:rgba(32,29,43,.78); color:#fff; padding:5px 11px; border-radius:999px; }
.tw-proof__body{ padding:20px 22px 22px; }
.tw-proof__stars{ color:var(--sun); letter-spacing:2px; margin-bottom:8px; }
.tw-proof__quote{ color:var(--ink-2); line-height:1.55; font-size:.98rem; margin:0 0 14px; }
.tw-proof__who{ display:flex; align-items:center; gap:11px; }
.tw-proof__av{ width:42px; height:42px; border-radius:50%; object-fit:cover; background:var(--plum); color:#fff; display:grid; place-items:center; font-weight:700; }
.tw-proof__who strong{ display:block; color:var(--ink); font-size:.92rem; }
.tw-proof__who span{ font-size:.8rem; color:var(--ink-3); }

/* aggregate rating banner */
.tw-rating{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:center; max-width:640px; margin:0 auto 44px; padding:22px 30px; border-radius:24px; background:var(--plum); color:#fff; }
.tw-rating__score{ font-family:var(--font-display); font-size:2.8rem; font-weight:800; }
.tw-rating__score small{ font-size:1rem; color:var(--sun); }
.tw-rating__stars{ color:var(--sun); font-size:1.5rem; letter-spacing:2px; }
.tw-rating p{ margin:0; color:rgba(255,255,255,.85); } .tw-rating strong{ color:#fff; }

/* ============================================================
   PROMO POPUP
   ============================================================ */
.promo{ position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(18,14,9,.62); backdrop-filter:blur(6px); opacity:0; transition:opacity .3s ease; }
.promo.is-open{ display:flex; opacity:1; }
.promo__box{ position:relative; width:100%; max-width:440px; background:var(--card); border-radius:26px; overflow:hidden; box-shadow:0 40px 80px rgba(0,0,0,.4); transform:translateY(20px) scale(.97); transition:transform .35s var(--ease); }
.promo.is-open .promo__box{ transform:none; }
.promo__img{ height:180px; background-size:cover; background-position:center; }
.promo__body{ padding:28px 30px 30px; text-align:center; }
.promo__eyebrow{ color:var(--coral); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.promo__title{ font-family:var(--font-display); font-size:1.7rem; font-weight:800; color:var(--ink); margin:8px 0 10px; }
.promo__text{ color:var(--ink-2); line-height:1.55; margin:0 0 22px; }
.promo__close{ position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; border:none; background:rgba(255,255,255,.9); color:var(--ink); font-size:20px; cursor:pointer; display:grid; place-items:center; z-index:2; }
.promo__close:hover{ background:#fff; }

/* ============================================================
   STAGGERED / SECTION BITS reused on home
   ============================================================ */
.home-band{ max-width:1180px; margin:90px auto; padding:0 24px; }
.band-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:36px; }
.band-head h2{ font-size:clamp(1.9rem,4vw,3rem); margin:0; }
.band-head--center{ flex-direction:column; align-items:center; text-align:center; }
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:880px){ .feat-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .feat-grid{ grid-template-columns:1fr; } }

/* value chips row */
.chips{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:1000px; margin:0 auto; }
@media(max-width:720px){ .chips{ grid-template-columns:repeat(2,1fr); } }
.chip{ background:var(--card); border-radius:20px; padding:26px 20px; text-align:center; box-shadow:0 8px 24px rgba(32,29,43,.06); }
.chip__ic{ font-size:30px; } .chip b{ display:block; font-family:var(--font-display); margin-top:8px; color:var(--ink); } .chip span{ font-size:.84rem; color:var(--ink-3); }

/* big CTA */
.big-cta{ margin:100px 24px 50px; }
.big-cta__inner{ max-width:1100px; margin:0 auto; background:var(--plum); border-radius:36px; padding:72px 40px; text-align:center; color:#fff; position:relative; overflow:hidden; }
.big-cta__inner::before{ content:"🐾"; position:absolute; font-size:180px; opacity:.08; top:-20px; right:30px; }
.big-cta h2{ color:#fff; font-size:clamp(2.2rem,5vw,3.6rem); margin:0 0 14px; }
.big-cta p{ color:rgba(255,255,255,.85); margin:0 0 28px; font-size:1.1rem; }
.big-cta__btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* inner page hero */
.page-hero{ position:relative; overflow:hidden; background:var(--cream-2); text-align:center; padding:80px 0 56px; }
.page-hero::before{ content:""; position:absolute; width:380px; height:380px; right:-110px; top:-130px; background:radial-gradient(circle,rgba(109,74,255,.14),transparent 70%); }
.page-hero__title{ font-family:var(--font-display); color:var(--ink); }
.page-hero__sub{ color:var(--ink-2); }

/* reveal + motion safety */
.reveal,[data-rv]{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in,[data-rv].in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal,[data-rv],.slide__eyebrow,.slide__title,.slide__text,.slide__cta{ opacity:1 !important; transform:none !important; }
  .slide{ transition:none; }
}
@media(max-width:768px){ .btn{ padding:11px 20px; font-size:14px; } }

/* ============================================================
   HOMEPAGE v2 — why / puppies-slider / stats / testimonials / story / faq
   ============================================================ */

/* WHY CHOOSE US */
.why{ max-width:1180px; margin:90px auto; padding:0 24px; }
.why__head{ text-align:center; max-width:640px; margin:0 auto 44px; }
.why__title{ font-size:clamp(2rem,4.5vw,3.2rem); margin:8px 0 12px; }
.why__lede{ color:var(--ink-2); font-size:1.08rem; }
.why__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
@media(max-width:860px){ .why__grid{ grid-template-columns:1fr; max-width:480px; margin:0 auto; } }
.why__card{ background:var(--card); border-radius:24px; padding:34px 30px; box-shadow:0 10px 30px rgba(32,29,43,.07); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.why__card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(32,29,43,.14); }
.why__card--feature{ background:var(--plum); color:#fff; transform:scale(1.04); }
@media(max-width:860px){ .why__card--feature{ transform:none; } }
.why__card--feature h3{ color:#fff; } .why__card--feature p{ color:rgba(255,255,255,.85); }
.why__ic{ width:60px; height:60px; border-radius:18px; display:grid; place-items:center; font-size:28px; background:var(--cream-2); margin-bottom:18px; }
.why__card--feature .why__ic{ background:rgba(255,255,255,.16); }
.why__card h3{ font-size:1.3rem; margin:0 0 8px; } .why__card p{ margin:0; line-height:1.6; }

/* PUPPIES SLIDER */
.pupslide{ max-width:1180px; margin:90px auto; padding:0 24px; }
.band-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:32px; }
.band-head--center{ flex-direction:column; align-items:center; text-align:center; }
.band-title{ font-size:clamp(1.9rem,4vw,3rem); margin:4px 0 0; }
.pupslide__viewport{ overflow:hidden; }
.pupslide__track{ display:flex; gap:22px; transition:transform .5s var(--ease); }
.pupslide__card{ flex:0 0 calc((100% - 44px)/3); background:var(--card); border-radius:22px; overflow:hidden; box-shadow:0 10px 30px rgba(32,29,43,.08); }
@media(max-width:860px){ .pupslide__card{ flex-basis:calc((100% - 22px)/2); } }
@media(max-width:560px){ .pupslide__card{ flex-basis:100%; } }
.pupslide__img{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:var(--cream-2); }
.pupslide__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.pupslide__card:hover .pupslide__img img{ transform:scale(1.07); }
.pupslide__ph{ display:grid; place-items:center; width:100%; height:100%; font-size:46px; }
.pupslide__badge{ position:absolute; top:12px; left:12px; padding:5px 13px; border-radius:999px; font-size:.72rem; font-weight:700; text-transform:uppercase; }
.pupslide__badge--available{ background:var(--mint); color:#fff; } .pupslide__badge--reserved{ background:var(--coral); color:#fff; }
.pupslide__body{ padding:18px 20px 20px; }
.pupslide__body h3{ font-size:1.3rem; margin:0; }
.pupslide__meta{ color:var(--ink-3); font-weight:600; font-size:.88rem; margin:4px 0 14px; }
.pupslide__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pupslide__price{ font-family:var(--font-display); font-weight:800; font-size:1.25rem; color:var(--plum); }
.pupslide__nav{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.pupslide__arrow{ width:46px; height:46px; border-radius:50%; border:1.5px solid var(--cream-2); background:#fff; color:var(--ink); font-size:22px; cursor:pointer; transition:all .2s; }
.pupslide__arrow:hover{ background:var(--plum); color:#fff; border-color:var(--plum); }
.pupslide__empty{ text-align:center; padding:50px 20px; background:var(--card); border-radius:24px; }
.pupslide__empty p{ margin-bottom:18px; }

/* STATS BAND */
.statband{ background:var(--ink); margin:90px 0; }
.statband__row{ max-width:1100px; margin:0 auto; padding:54px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media(max-width:680px){ .statband__row{ grid-template-columns:repeat(2,1fr); } }
.statband__item{ text-align:center; }
.statband__item b{ display:block; font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.2rem); font-weight:800; color:#fff; line-height:1; }
.statband__item b::after{ content:attr(data-suffix); color:var(--sun); }
.statband__item span{ display:block; margin-top:8px; color:rgba(255,255,255,.7); font-size:.86rem; }

/* HOMEPAGE TESTIMONIALS CAROUSEL */
.hsay{ max-width:1180px; margin:90px auto; padding:0 24px; }
.hsay__viewport{ overflow:hidden; }
.hsay__track{ display:flex; gap:22px; transition:transform .5s var(--ease); }
.hsay__card{ flex:0 0 calc((100% - 44px)/3); background:var(--card); border-radius:22px; overflow:hidden; box-shadow:0 10px 30px rgba(32,29,43,.08); }
@media(max-width:860px){ .hsay__card{ flex-basis:calc((100% - 22px)/2); } }
@media(max-width:560px){ .hsay__card{ flex-basis:100%; } }
.hsay__shot{ position:relative; background:var(--cream-2); max-height:300px; overflow:hidden; }
.hsay__shot img{ width:100%; display:block; }
.hsay__shot::after{ content:"💬 real message"; position:absolute; top:10px; right:10px; font-size:10px; font-weight:700; background:rgba(32,29,43,.78); color:#fff; padding:4px 10px; border-radius:999px; }
.hsay__body{ padding:18px 20px 20px; }
.hsay__stars{ color:var(--sun); letter-spacing:2px; margin-bottom:8px; }
.hsay__quote{ color:var(--ink-2); line-height:1.55; font-size:.95rem; margin:0 0 14px; }
.hsay__who{ display:flex; align-items:center; gap:10px; }
.hsay__av{ width:40px; height:40px; border-radius:50%; background:var(--plum); color:#fff; display:grid; place-items:center; font-weight:700; }
.hsay__who strong{ display:block; color:var(--ink); font-size:.9rem; } .hsay__who span{ font-size:.8rem; color:var(--ink-3); }
.hsay__cta{ text-align:center; margin-top:30px; }

/* STORY SPLIT */
.hstory{ max-width:1180px; margin:90px auto; padding:0 24px; display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
@media(max-width:860px){ .hstory{ grid-template-columns:1fr; gap:34px; } }
.hstory__media{ position:relative; }
.hstory__media img{ width:100%; border-radius:28px; box-shadow:0 24px 50px rgba(32,29,43,.16); }
.hstory__tag{ position:absolute; left:-12px; bottom:20px; background:var(--sun); color:var(--ink); font-weight:700; font-size:.86rem; padding:10px 18px; border-radius:999px; box-shadow:0 8px 20px rgba(0,0,0,.12); }
.hstory__text p{ color:var(--ink-2); line-height:1.7; margin:0 0 16px; }

/* FAQ */
.hfaq{ max-width:760px; margin:90px auto; padding:0 24px; }
.hfaq__item{ background:var(--card); border-radius:18px; margin-bottom:14px; overflow:hidden; box-shadow:0 6px 18px rgba(32,29,43,.06); }
.hfaq__item summary{ list-style:none; cursor:pointer; padding:20px 24px; font-weight:700; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:14px; }
.hfaq__item summary::-webkit-details-marker{ display:none; }
.hfaq__item summary i{ font-style:normal; font-size:1.5rem; color:var(--plum); transition:transform .25s var(--ease); }
.hfaq__item[open] summary i{ transform:rotate(45deg); }
.hfaq__a{ padding:0 24px 22px; color:var(--ink-2); line-height:1.6; }

/* ============ PARTNERS / TRUSTED-BY SLIDER ============ */
.partners{ background:var(--cream-2); padding:40px 0; margin:0; }
.partners__label{ text-align:center; font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 22px; }
.partners__viewport{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.partners__track{ display:flex; gap:48px; width:max-content; animation:partnersScroll 28s linear infinite; }
.partners:hover .partners__track{ animation-play-state:paused; }
@keyframes partnersScroll{ to{ transform:translateX(-50%); } }
.partners__item{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--ink); white-space:nowrap; }
@media(prefers-reduced-motion:reduce){ .partners__track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; } }

/* ============================================================
   INNER PAGES — match the homepage's bold, modern feel
   ============================================================ */
/* bolder page hero with floating accent + bigger type */
.page-hero{ padding:96px 0 70px; }
.page-hero__title{ font-size:clamp(2.4rem,5.5vw,4rem); line-height:1.02; }
.page-hero::after{ content:""; position:absolute; left:-90px; bottom:-120px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(255,194,75,.16),transparent 70%); }

/* filter bar / tabs (puppies, parents) restyled to match */
.filter-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:32px; }
.filter-bar > span{ color:var(--ink-3); font-weight:600; }
.filter-tabs{ display:flex; gap:10px; }
.filter-tab{ padding:9px 20px; border-radius:999px; border:1.5px solid var(--cream-2); background:#fff; color:var(--ink-2); font-weight:700; font-size:.9rem; cursor:pointer; transition:all .2s var(--ease); }
.filter-tab:hover{ border-color:var(--plum); color:var(--plum); }
.filter-tab.active{ background:var(--plum); border-color:var(--plum); color:#fff; }

/* puppy grid as roomy modern grid */
.puppy-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media(max-width:880px){ .puppy-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .puppy-grid{ grid-template-columns:1fr; } }
.puppy-card__body{ padding:20px 22px 22px; }
.puppy-card__body h3{ font-size:1.35rem; }
.puppy-card__actions{ display:flex; gap:10px; margin-top:14px; }
.puppy-card__dob{ font-size:.84rem; color:var(--ink-3); }

/* generic section rhythm + headings for content pages */
.section{ padding:70px 0; }
.section-head{ text-align:center; max-width:680px; margin:0 auto 44px; }
.section-title{ font-size:clamp(1.9rem,4vw,3rem); }
.section-sub{ color:var(--ink-2); }

/* guarantee cards / process steps / generic cards -> homepage card style */
.guarantee-card{ background:var(--card); border-radius:24px; padding:32px 28px; box-shadow:0 10px 30px rgba(32,29,43,.07); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.guarantee-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(32,29,43,.14); }
.guarantee-card__icon{ width:60px; height:60px; border-radius:18px; display:grid; place-items:center; font-size:28px; background:var(--cream-2); margin-bottom:16px; }
.process-step{ background:var(--card); border-radius:20px; box-shadow:0 8px 24px rgba(32,29,43,.06); }
.process-step__num{ background:var(--plum) !important; color:#fff !important; }

/* story / two-col blocks on inner pages */
.two-col__media .story-img,.story-img{ border-radius:28px; overflow:hidden; box-shadow:0 24px 50px rgba(32,29,43,.16); }

/* dark + tint sections recolored */
.section--tint{ background:var(--cream-2); }
.section--dark{ background:var(--ink); }
.section--dark .section-title{ color:#fff; }
.section--dark .section-head--light .eyebrow{ color:var(--sun); }

/* visit card / contact / cta blocks */
.visit-card,.contact-form-wrap{ background:var(--card); border-radius:28px; box-shadow:0 14px 40px rgba(32,29,43,.1); overflow:hidden; }
.cta-section .cta-card{ background:var(--plum); border-radius:36px; color:#fff; }
.cta-card{ color:#fff; }
.cta-card h2{ color:#fff; } .cta-card p{ color:rgba(255,255,255,.85); }
/* TINT variant = light background, so it needs DARK text (was invisible white) */
.cta-card--tint{ background:linear-gradient(135deg, var(--cream-2), #fff) !important; color:var(--ink) !important; border:1.5px solid rgba(109,74,255,.16); box-shadow:0 14px 40px rgba(32,29,43,.08); }
.cta-card--tint h2{ color:var(--ink) !important; }
.cta-card--tint p{ color:var(--ink-2) !important; }

/* faq on inner pages */
.faq-item{ background:var(--card); border-radius:18px; margin-bottom:14px; box-shadow:0 6px 18px rgba(32,29,43,.06); overflow:hidden; }
.faq-item summary{ padding:20px 24px; font-weight:700; color:var(--ink); cursor:pointer; }
.faq-answer{ padding:0 24px 22px; color:var(--ink-2); }

/* blog cards grid */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media(max-width:880px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .blog-grid{ grid-template-columns:1fr; } }