/* =========================================================
   PRESTIGE AUSSIES — DESIGN SYSTEM v5 "BLUSH EDITORIAL"
   Pink palette + the reference layout grammar:
   ghosted outline display type behind photography, floating
   white annotation pills, a left thumbnail strip, oversized
   rounded photo panels, and one pink gradient poster panel.
   Display: Outfit. Body/UI: Manrope.
   Legacy token NAMES are preserved so every page inherits.
   ========================================================= */

:root{
  /* --- palette --- */
  --pink:          #FF8FAB;   /* bubblegum — hero/primary */
  --rose:          #E63969;   /* rose punch — headers, buttons */
  --rose-deep:     #C42A54;
  --rose-ink:      #A82248;   /* ink-weight rose: clears 4.5:1 on cream, ivory, white and blush */
  --blush:         #FFD6E0;   /* soft blush — secondary */
  --coral:         #FF6B81;   /* hot coral — accent */
  --cream:         #FFF5F7;   /* cream pink — background */
  --card:          #FFFAFB;   /* ivory pink — cards/sections */
  --white:         #FFFFFF;
  --ink:           #4A3A3F;   /* warm charcoal */
  --ink-soft:      #7C5C64;   /* muted mauve, darkened to clear 4.5:1 on cream/ivory */
  --line:          #F4C6D3;   /* pale rose */
  --line-strong:   #EBAFC1;
  --footer-bg:     #43202D;   /* deep rose-plum, from the pink family */
  --gold:          #E0B7A0;

  --shadow-xs:     0 1px 3px rgba(74,58,63,.05);
  --shadow-sm:     0 8px 24px rgba(198,90,124,.08);
  --shadow-md:     0 18px 44px rgba(198,90,124,.13);
  --shadow-lg:     0 34px 80px rgba(198,90,124,.18);
  --shadow-pill:   0 10px 26px rgba(198,90,124,.16);
  --shadow-rose:   0 12px 26px rgba(230,57,105,.28);

  --radius-sm:     14px;
  --radius-md:     22px;
  --radius-lg:     32px;
  --radius-xl:     40px;
  --radius-pill:   999px;

  --font-head:     "Outfit", "Manrope", system-ui, sans-serif;
  --font-body:     "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --container:     1360px;
  --ease:          cubic-bezier(.22,1,.36,1);
  --nav-h:         86px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--cream); color:var(--ink); font-family:var(--font-body);
  font-size:16px; line-height:1.68; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--rose-ink); }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:1rem; }
h1,h2,h3,h4,h5{
  font-family:var(--font-head); color:var(--ink); line-height:1.02; margin:0 0 .4em;
  font-weight:800; letter-spacing:-.03em; text-transform:uppercase; text-wrap:balance;
}
h1{ font-size:clamp(2.7rem,6vw,5.4rem); }
h2{ font-size:clamp(2rem,4vw,3.4rem); }
h3{ font-size:clamp(1.1rem,1.6vw,1.4rem); letter-spacing:-.015em; }
h4{ font-size:1.05rem; letter-spacing:-.01em; }
p{ margin:0 0 1em; color:var(--ink-soft); text-wrap:pretty; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 30px; }
.container--narrow{ max-width:860px; }
.ic-svg{ display:inline-flex; width:1em; height:1em; flex-shrink:0; }
.ic-svg svg{ width:100%; height:100%; display:block; }
section{ padding:104px 0; position:relative; }
@media(max-width:900px){ section{ padding:68px 0; } .container{ padding:0 20px; } }
@media(max-width:560px){ section{ padding:54px 0; } }
.text-center{ text-align:center; }
.mt-0{ margin-top:0 !important; }
.color-rose{ color:var(--rose-ink); }
::selection{ background:var(--pink); color:#fff; }
:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; border-radius:6px; }

/* ---------- Eyebrow ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:9px; font-weight:800; letter-spacing:.2em;
  font-size:.7rem; color:var(--rose-ink); text-transform:uppercase; margin-bottom:18px;
}
.kicker::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--coral); display:inline-block; }
.kicker-invert{ color:var(--white); }
.kicker-invert::before{ background:var(--white); }
.section-head{ max-width:700px; margin-bottom:52px; }
.section-head p{ font-size:1.02rem; max-width:580px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .kicker{ justify-content:center; }
.section-head.center p{ margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 30px;
  border-radius:var(--radius-pill); font-weight:800; font-family:var(--font-body); letter-spacing:.02em;
  font-size:.82rem; border:1.5px solid transparent;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s,color .25s,border-color .25s;
  white-space:nowrap; line-height:1;
}
.btn-primary{ background:var(--rose-deep); color:var(--white); box-shadow:var(--shadow-rose); }
.btn-primary:hover{ background:var(--rose-ink); color:var(--white); transform:translateY(-2px); }
.btn-outline{ background:transparent; border-color:var(--line-strong); color:var(--rose-ink); }
.btn-outline:hover{ background:var(--rose-deep); border-color:var(--rose-deep); color:var(--white); transform:translateY(-2px); }
.btn-outline-invert{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.7); color:var(--white); backdrop-filter:blur(8px); }
.btn-outline-invert:hover{ background:var(--white); color:var(--rose-ink); }
.btn-cream{ background:var(--white); border-color:var(--line); color:var(--rose-ink); box-shadow:var(--shadow-xs); }
.btn-cream:hover{ border-color:var(--rose-deep); background:var(--rose-deep); color:var(--white); transform:translateY(-2px); }
.btn-dark{ background:var(--ink); color:var(--white); }
.btn-dark:hover{ background:#5f4a50; color:var(--white); transform:translateY(-2px); }
.btn-block{ width:100%; }
.btn-sm{ padding:12px 22px; font-size:.74rem; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none !important; }

/* ---------- Header ---------- */
.nav-wrap{ position:fixed; top:0; left:0; right:0; z-index:900; }
.site-header{
  background:transparent; border-bottom:1px solid transparent;
  transition:border-color .4s, box-shadow .4s, background .4s, backdrop-filter .4s;
}
.site-header.scrolled{
  background:rgba(255,250,251,.93); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line); box-shadow:0 10px 30px rgba(198,90,124,.07);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px 0; min-height:var(--nav-h); }
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand-logo{ height:56px; width:auto; display:block; transition:height .35s var(--ease); }
.site-header.scrolled .brand-logo{ height:48px; }
.brand small{
  display:block; font-family:var(--font-body); font-weight:800; font-size:.69rem; color:var(--ink-soft);
  letter-spacing:.2em; text-transform:uppercase; transition:color .3s;
}
@media(max-width:620px){ .brand small{ display:none; } .brand-logo{ height:46px; } }

body.has-hero .site-header:not(.scrolled) .brand small{ color:rgba(255,255,255,.85); }
body.has-hero .site-header:not(.scrolled) .nav-link{ color:var(--white); }
body.has-hero .site-header:not(.scrolled) .nav-link::after{ background:var(--white); }
body.has-hero .site-header:not(.scrolled) .nav-toggle{ border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.12); backdrop-filter:blur(8px); }
body.has-hero .site-header:not(.scrolled) .nav-toggle span{ background:var(--white); }

.nav-desktop{ display:flex; align-items:center; gap:2px; }
.nav-desktop > li{ position:relative; }
.nav-link{
  display:flex; align-items:center; gap:5px; padding:10px 15px; font-weight:700; font-size:.78rem;
  color:var(--ink); position:relative; letter-spacing:.02em; transition:color .3s;
}
.nav-link::after{
  content:""; position:absolute; left:15px; right:15px; bottom:3px; height:2px; background:var(--rose); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav-link:hover::after, .nav-link.active::after{ transform:scaleX(1); }
.nav-link.active{ color:var(--rose-ink); }
body.has-hero .site-header:not(.scrolled) .nav-link.active{ color:var(--white); }
.nav-desktop .caret{ font-size:.58em; opacity:.65; }
.dropdown{
  position:absolute; top:calc(100% + 12px); left:0; min-width:240px; background:var(--white); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:10px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:all .3s var(--ease); border:1px solid var(--line);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:block; padding:11px 14px; border-radius:12px; font-weight:700; font-size:.78rem; color:var(--ink); }
.dropdown a:hover{ background:var(--cream); color:var(--rose-ink); }
.header-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; flex-direction:column; gap:4px; background:var(--white); border:1.5px solid var(--line); padding:12px 14px; border-radius:var(--radius-pill); }
.nav-toggle span{ width:16px; height:2px; background:var(--rose); border-radius:2px; transition:all .3s var(--ease); }
.nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.drawer-overlay{ position:fixed; inset:0; background:rgba(74,58,63,.42); z-index:1150; opacity:0; visibility:hidden; transition:opacity .35s var(--ease); backdrop-filter:blur(3px); }
.drawer-overlay.open{ opacity:1; visibility:visible; }
.nav-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--card); z-index:1200;
  display:flex; flex-direction:column; padding:24px 28px 40px; overflow-y:auto;
  transform:translateX(100%); transition:transform .45s var(--ease); box-shadow:-24px 0 70px rgba(198,90,124,.2);
}
.nav-drawer.open{ transform:translateX(0); }
.drawer-top{ display:flex; justify-content:space-between; align-items:center; padding-bottom:18px; border-bottom:1px solid var(--line); }
.drawer-top .brand-logo{ height:52px; }
.drawer-close{ background:var(--white); border:1.5px solid var(--line); width:40px; height:40px; border-radius:50%; font-size:.9rem; color:var(--rose-ink); }
.nav-drawer ul{ margin-top:12px; }
.nav-drawer li{ border-bottom:1px solid var(--line); }
.nav-drawer a, .nav-drawer .drawer-parent{
  display:block; width:100%; text-align:left; background:none; border:none; padding:17px 2px;
  font-weight:800; font-family:var(--font-head); font-size:1.5rem; color:var(--ink);
  text-transform:uppercase; letter-spacing:-.02em;
}
.nav-drawer a:hover, .nav-drawer .drawer-parent:hover{ color:var(--rose-ink); }
.drawer-sub{ padding-left:14px; display:none; }
.drawer-sub.open{ display:block; }
.drawer-sub a{ font-weight:700; font-family:var(--font-body); font-size:.85rem; color:var(--ink-soft); padding:11px 2px; text-transform:none; letter-spacing:0; }
.drawer-cta{ margin-top:24px; }
@media(max-width:1080px){ .nav-desktop, .header-cta{ display:none; } .nav-toggle{ display:flex; margin-left:auto; } }

/* =========================================================
   PAGE BANNER / HERO — rounded photo panel, ghost display
   type behind it, floating annotation pills over it.
   ========================================================= */
.page-banner{
  position:relative; background-size:cover; background-position:center; min-height:400px;
  display:flex; align-items:flex-end; padding:170px 0 64px; overflow:hidden;
  border-radius:0 0 var(--radius-xl) var(--radius-xl);
}
.page-banner-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(64,30,42,.80) 0%, rgba(64,30,42,.52) 38%, rgba(64,30,42,.16) 62%, rgba(64,30,42,.05) 100%),
    linear-gradient(180deg, rgba(64,30,42,.34) 0%, transparent 26%, rgba(96,34,54,.55) 100%);
}
.page-banner-inner{ position:relative; z-index:2; max-width:840px; }
.page-banner h1{ color:var(--white); }
.page-banner-text{ color:rgba(255,255,255,.9); font-size:1.04rem; max-width:560px; margin:0; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

/* ---------- LIGHT HERO (reference frame 1) ---------- */
.hero-light{ padding:calc(var(--nav-h) + 24px) 0 0; background:var(--cream); }
.hero-panel{
  position:relative; border-radius:var(--radius-xl); overflow:hidden;
  min-height:min(760px,78vh); display:flex; align-items:flex-end;
  background:#EFE6E7; box-shadow:var(--shadow-md);
}
.hero-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% 34%; }
.hero-wash{
  position:absolute; inset:0;
  background:
    linear-gradient(95deg, rgba(255,245,247,.62) 0%, rgba(255,245,247,.34) 44%, rgba(255,245,247,.04) 76%),
    linear-gradient(180deg, rgba(255,245,247,.34) 0%, rgba(255,245,247,.04) 30%, rgba(255,245,247,.2) 84%, rgba(255,245,247,.44) 100%);
}
.hero-content{
  position:relative; z-index:4; padding:clamp(26px,3vw,44px); max-width:680px;
  margin:clamp(18px,2.4vw,34px);
  background:rgba(255,250,251,.86);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(2px) saturate(1.08); -webkit-backdrop-filter:blur(2px) saturate(1.08);
}
.hero-content h1{ color:var(--ink); font-size:clamp(2.4rem,4.4vw,4rem); }
.hero-heading-animate .hw{
  display:inline-block; opacity:0; transform:translateY(30px) rotate(-1.5deg); filter:blur(7px);
  animation:paHeroWordIn .9s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes paHeroWordIn{ to{ opacity:1; transform:translateY(0) rotate(0); filter:blur(0); } }
@media(prefers-reduced-motion:reduce){ .hero-heading-animate .hw{ animation:none; opacity:1; transform:none; filter:none; } }
.hero-content p{ color:var(--ink); font-weight:500; font-size:1.05rem; max-width:470px; margin:20px 0 0; }
.hero-panel .ghost-type{ color:rgba(255,255,255,.72); mix-blend-mode:soft-light; bottom:2%; right:-2%; }
.hero-panel .scroll-cue{
  color:var(--rose-ink); left:auto; right:30px; bottom:24px; transform:none;
  background:rgba(255,250,251,.94); border:1px solid rgba(255,255,255,.85);
  border-radius:var(--radius-pill); padding:10px 16px 12px; box-shadow:var(--shadow-sm); gap:6px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hero-panel .scroll-cue::after{ height:20px; background:linear-gradient(180deg,var(--rose-ink),transparent); }

.hero-below{ display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0; }
@media(max-width:760px){ .hero-panel{ min-height:600px; } .hero-content{ max-width:100%; } }

/* Ghosted outline display type behind the hero photograph */
.ghost-type{
  position:absolute; top:auto; bottom:4%; left:auto; right:-3%; transform:none; z-index:1;
  font-family:var(--font-head); font-weight:800; text-transform:uppercase;
  font-size:clamp(4rem,15vw,15rem); line-height:.86; letter-spacing:-.045em; white-space:nowrap;
  color:rgba(255,255,255,.16); pointer-events:none; user-select:none; text-align:right;
}
@media(max-width:900px){ .ghost-type{ bottom:2%; font-size:19vw; } }

/* glassy annotation pills, reference-style */
.hero-badges{ display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0; }
.hero-below .hero-badge{ border-color:var(--line); box-shadow:var(--shadow-sm); }
.hero-badge{
  display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.7); color:var(--ink); backdrop-filter:blur(10px);
  padding:10px 18px 10px 14px; border-radius:var(--radius-pill); box-shadow:var(--shadow-pill);
  font-size:.69rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
}
.hero-badge .ic-svg{ font-size:.95rem; color:var(--rose-ink); }

.hero-annotations{ position:absolute; inset:0; z-index:3; pointer-events:none; display:block; }
@media(max-width:1179px){ .hero-note.n2, .hero-note.n4{ display:none; } }
@media(max-width:620px){ .hero-note{ font-size:.55rem; padding:9px 14px; } .hero-note.n3{ display:none; } }
.hero-note{
  position:absolute; display:inline-flex; align-items:center; gap:10px;
  background:var(--white); color:var(--ink); padding:11px 20px; border-radius:var(--radius-pill);
  font-size:.69rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  box-shadow:var(--shadow-pill); animation:noteFloat 7s ease-in-out infinite;
}
.hero-note::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--coral); }
.hero-note.n1{ top:14%; right:6%; animation-delay:0s; }
.hero-note.n2{ top:33%; right:21%; animation-delay:1.3s; }
.hero-note.n3{ top:50%; right:5%; animation-delay:2.6s; }
.hero-note.n4{ top:67%; right:19%; animation-delay:3.9s; }
@keyframes noteFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

/* left thumbnail strip (the reference's ingredient rail) */
.hero-stage{ position:relative; }
.hero-strip{
  display:flex; background:var(--white); border-radius:var(--radius-md);
  overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line);
  flex-direction:row; margin-top:14px; width:100%;
}
.hero-strip-item{ flex:1; border-right:1px solid var(--line); display:flex; align-items:center; gap:10px; padding:10px 12px; position:relative; }
.hero-strip-item:last-child{ border-right:none; }
.hero-strip-item img{ width:38px; height:38px; object-fit:cover; border-radius:10px; flex-shrink:0; }
.hero-strip-item span{
  display:block; font-size:.69rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); line-height:1.35;
}
.hero-strip-item.is-active{ background:var(--cream); }
.hero-strip-item.is-active::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--rose); }
/* at desktop it docks into the photo panel, as in the reference */
@media(min-width:1280px){
  .hero-strip{
    position:absolute; left:28px; top:50%; transform:translateY(-50%); z-index:5;
    flex-direction:column; width:112px; margin-top:0; box-shadow:var(--shadow-md); border:none;
  }
  /* offset the block, not the text column — margin sits outside max-width;
     the column also widens so the capped 76.8px headline holds two lines */
  .hero-content{ margin-left:164px; max-width:min(70%, 900px); }
  .hero-strip-item{ flex:none; border-right:none; border-bottom:1px solid var(--line); display:block; padding:10px; }
  .hero-strip-item:last-child{ border-bottom:none; }
  .hero-strip-item img{ width:100%; height:auto; aspect-ratio:1/1; border-radius:12px; }
  .hero-strip-item span{ margin-top:7px; }
  .hero-strip-item.is-active::before{ top:8px; bottom:8px; border-radius:0 3px 3px 0; }
}
@media(max-width:620px){
  .hero-strip{ flex-direction:column; }
  .hero-strip-item{ border-right:none; border-bottom:1px solid var(--line); }
  .hero-strip-item:last-child{ border-bottom:none; }
}
.hero-strip-item-legacy{ padding:10px; border-bottom:1px solid var(--line); position:relative; }

.scroll-cue{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  color:rgba(255,255,255,.92); font-size:.69rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
}
.scroll-cue::after{ content:""; width:2px; height:44px; border-radius:2px; background:linear-gradient(180deg,rgba(255,255,255,.9),transparent); animation:cueDrop 2.4s ease-in-out infinite; }
@keyframes cueDrop{ 0%,100%{ opacity:.3; transform:scaleY(.55); transform-origin:top; } 50%{ opacity:1; transform:scaleY(1);} }

@media(max-width:760px){ .page-banner--hero{ min-height:auto; padding:130px 0 84px; } .scroll-cue{ display:none; } }
@media(max-width:560px){ .page-banner{ min-height:290px; padding:124px 0 44px; border-radius:0 0 var(--radius-lg) var(--radius-lg); } .page-banner-inner{ max-width:100%; } }

/* ---------- Floating trust panel ---------- */
.hero-stats-wrap{ position:relative; z-index:5; margin-top:44px; }
.hero-stats-card{
  background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border:1px solid var(--line);
  display:flex; overflow:hidden;
}
.hero-stat{ flex:1; text-align:center; padding:36px 18px; border-left:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; }
.hero-stat:first-child{ border-left:none; }
.hero-stat-num{ font-family:var(--font-head); font-size:clamp(1.7rem,3.2vw,2.5rem); color:var(--rose); font-weight:800; line-height:1.1; letter-spacing:-.03em; min-height:1.1em; display:flex; align-items:center; justify-content:center; }
.hero-stat-num.is-text{ font-size:clamp(1.1rem,1.9vw,1.5rem); white-space:nowrap; color:var(--rose-ink); }
.hero-stat-label{ font-size:.69rem; color:var(--ink-soft); font-weight:800; margin-top:11px; letter-spacing:.16em; text-transform:uppercase; }
@media(max-width:820px){
  .hero-stats-wrap{ margin-top:28px; }
  .hero-stats-card{ flex-wrap:wrap; }
  .hero-stat{ flex:1 1 50%; border-left:none; padding:24px 12px; }
  .hero-stat:nth-child(odd){ border-right:1px solid var(--line); }
  .hero-stat:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}

/* ---------- Blobs ---------- */
.blob{ position:absolute; border-radius:50%; filter:blur(110px); opacity:.3; z-index:0; pointer-events:none; }
.blob-pink{ background:var(--pink); }
.blob-gold{ background:var(--blush); opacity:.35; }

/* =========================================================
   FEATURE / DIFFERENCE CARDS
   ========================================================= */
.feature-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.feature-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:40px 38px; position:relative; counter-increment:diff;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.feature-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.feature-card::after{
  content:"0" counter(diff); position:absolute; top:30px; right:34px;
  font-family:var(--font-head); font-size:2.6rem; font-weight:800; color:var(--blush); line-height:1; letter-spacing:-.04em;
}
.feature-grid{ counter-reset:diff; }
.feature-icon{
  width:52px; height:52px; border-radius:50%; background:var(--cream); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--rose-ink); font-size:1.2rem; margin-bottom:22px;
}
.feature-card h3{ font-size:1.35rem; margin-bottom:12px; }
.feature-card p{ font-size:.92rem; margin-bottom:0; max-width:44ch; }
@media(max-width:820px){ .feature-grid{ grid-template-columns:1fr; } .feature-card{ padding:30px 26px; } }

/* =========================================================
   PUPPY CARD
   ========================================================= */
.puppy-rail{
  display:flex; gap:24px; overflow-x:auto; padding:6px 4px 28px; scroll-snap-type:x mandatory;
  scrollbar-width:thin; scroll-padding-left:4px;
}
.puppy-rail .puppy-card{ min-width:330px; width:330px; scroll-snap-align:start; }
.puppy-rail::-webkit-scrollbar{ height:5px; }
.puppy-rail::-webkit-scrollbar-track{ background:var(--blush); border-radius:6px; }
.puppy-rail::-webkit-scrollbar-thumb{ background:var(--pink); border-radius:6px; }
@media(max-width:560px){ .puppy-rail .puppy-card{ min-width:82vw; width:82vw; } }

.puppy-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px 26px; }
@media(max-width:1023px){ .puppy-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .puppy-grid{ grid-template-columns:1fr; } }

.puppy-card{
  display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.puppy-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--pink); }

.puppy-media{ position:relative; aspect-ratio:4/5; background:var(--cream); overflow:hidden; margin:10px 10px 0; border-radius:var(--radius-md); }
.puppy-media img{ width:100%; height:100%; object-fit:cover; object-position:center 58%; transition:transform 1.1s var(--ease); }
.puppy-card:hover .puppy-media img{ transform:scale(1.05); }
.puppy-tags{ position:absolute; top:12px; left:12px; right:12px; display:flex; justify-content:space-between; align-items:flex-start; pointer-events:none; }
.puppy-sex-tag{
  display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.95); color:var(--ink); font-weight:800; font-size:.69rem;
  padding:7px 13px; border-radius:var(--radius-pill); box-shadow:var(--shadow-pill); text-transform:uppercase; letter-spacing:.1em;
  backdrop-filter:blur(6px);
}
.puppy-sex-tag .ic-svg{ font-size:.72rem; color:var(--rose-ink); }
.puppy-price-tag{
  background:var(--rose-deep); color:var(--white); font-weight:800; font-size:.72rem; padding:7px 14px;
  border-radius:var(--radius-pill); letter-spacing:.05em; box-shadow:var(--shadow-rose);
}
.puppy-ribbon{
  position:absolute; top:12px; left:12px; z-index:5; background:var(--blush); color:var(--rose-ink);
  font-weight:800; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; padding:7px 14px; border-radius:var(--radius-pill);
}
.puppy-card.is-sold .puppy-media img{ filter:saturate(.6); }
.puppy-card.is-sold:hover .puppy-media img{ filter:saturate(.9); }

.puppy-info{ padding:20px 24px 24px; display:flex; flex-direction:column; flex:1; }
.puppy-name-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.puppy-name{ font-size:1.5rem; margin-bottom:0; font-weight:800; letter-spacing:-.025em; }
.puppy-age-tag{ font-size:.69rem; font-weight:800; color:var(--rose-ink); white-space:nowrap; letter-spacing:.14em; text-transform:uppercase; background:var(--blush); padding:5px 11px; border-radius:var(--radius-pill); }
.puppy-tagline{ font-size:.75rem; color:var(--ink-soft); font-weight:700; margin:7px 0 14px; }

.puppy-facts-line{ display:flex; flex-wrap:wrap; gap:4px 0; font-size:.69rem; color:var(--ink-soft); font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px; padding-top:14px; border-top:1px solid var(--line); }
.puppy-facts-line li{ display:inline-flex; align-items:center; }
.puppy-facts-line li:not(:last-child)::after{ content:""; width:4px; height:4px; border-radius:50%; background:var(--pink); margin:0 9px; }

.puppy-accordion{ margin-top:auto; }
.puppy-accordion-btn{
  width:100%; background:none; border:none; display:flex; justify-content:space-between; align-items:center;
  font-weight:800; font-family:var(--font-body); font-size:.62rem; color:var(--ink-soft); padding:6px 0;
  letter-spacing:.15em; text-transform:uppercase; transition:color .25s;
}
.puppy-accordion-btn:hover{ color:var(--rose-ink); }
.puppy-accordion-btn .plus{ transition:transform .3s var(--ease); font-size:1rem; color:var(--rose-ink); }
.puppy-accordion-btn[aria-expanded="true"] .plus{ transform:rotate(45deg); }
.puppy-accordion-panel{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.puppy-accordion-panel p{ font-size:.85rem; padding-top:12px; margin-bottom:0; line-height:1.65; }
.puppy-traits{ display:flex; flex-wrap:wrap; gap:7px; padding-top:14px; }
.puppy-trait{
  font-size:.69rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--rose-ink);
  background:var(--blush); padding:6px 12px; border-radius:var(--radius-pill);
}
.puppy-cta-row{ margin-top:16px; }
.puppy-inquire-btn{ padding:14px 18px; font-size:.72rem; }
.puppy-cta-note{ margin:10px 0 0; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); text-align:center; }
.puppy-sold-note{
  margin-top:16px; display:flex; align-items:center; gap:8px; color:var(--rose-ink); font-weight:800;
  font-size:.69rem; letter-spacing:.13em; text-transform:uppercase; padding-top:16px; border-top:1px solid var(--line);
}
.puppy-sold-note .ic-svg{ color:var(--rose-ink); font-size:.95rem; }

/* ---------- Reviews ---------- */
.review-bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:900px){ .review-bento{ grid-template-columns:1fr; } }
.review-bento.wide{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }

.review-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:12px 12px 24px;
  box-shadow:var(--shadow-xs); display:flex; flex-direction:column; gap:16px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.review-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.review-card.feature{ grid-column:span 2; background:linear-gradient(135deg,#FFE9EF 0%,#FFF5F7 60%); border-color:var(--blush); flex-direction:row; align-items:center; gap:28px; }
@media(max-width:900px){ .review-card.feature{ grid-column:span 1; } }
.review-card.feature .review-photo-wrap{ width:36%; flex-shrink:0; }
.review-card.feature .review-body{ flex-direction:column; }
.review-card.feature .review-quote{ font-size:1.35rem; }
@media(max-width:640px){ .review-card.feature{ flex-direction:column; align-items:stretch; gap:16px; } .review-card.feature .review-photo-wrap{ width:100%; } .review-card.feature .review-quote{ font-size:1.1rem; } }

.review-photo-wrap{ aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden; }
.review-photo-wrap .inner{ width:100%; height:100%; overflow:hidden; }
.review-photo{ width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; transition:transform 1.1s var(--ease); }
.review-card:hover .review-photo{ transform:scale(1.05); }
.review-body{ display:flex; flex-direction:column; gap:13px; flex:1; padding:0 12px; }

.paw-rating{ display:flex; gap:3px; color:var(--rose-ink); font-size:.85rem; }
.paw-rating .off{ color:var(--line); }
.review-quote{ font-family:var(--font-body); font-size:.98rem; color:var(--ink); flex:1; margin:0; line-height:1.6; font-weight:500; }
.review-name{ font-weight:800; font-size:.82rem; color:var(--ink); }
.review-loc{ font-size:.69rem; color:var(--ink-soft); font-weight:800; letter-spacing:.12em; text-transform:uppercase; }

.review-hero-stats{ display:flex; justify-content:center; gap:0; margin:32px auto 0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; max-width:700px; background:var(--white); }
.review-medal{ flex:1; text-align:center; padding:30px 18px; border-left:1px solid var(--line); }
.review-medal:first-child{ border-left:none; }
.review-medal .num{ font-family:var(--font-head); font-size:clamp(1.8rem,3vw,2.4rem); color:var(--rose); font-weight:800; line-height:1; letter-spacing:-.03em; }
.review-medal .lbl{ font-size:.69rem; color:var(--ink-soft); font-weight:800; margin-top:10px; letter-spacing:.15em; text-transform:uppercase; }

.rating-bars{ display:flex; flex-direction:column; gap:14px; }
.rating-bar-row{ display:grid; grid-template-columns:62px 1fr 44px; align-items:center; gap:16px; font-weight:800; font-size:.78rem; color:var(--ink); }
.rating-bar-track{ height:7px; background:var(--blush); border-radius:var(--radius-pill); overflow:hidden; }
.rating-bar-fill{ height:100%; background:linear-gradient(90deg,var(--pink),var(--rose)); width:0; border-radius:var(--radius-pill); transition:width 1.2s var(--ease); }

/* ---------- FAQ ---------- */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; transition:border-color .3s, box-shadow .3s; }
.faq-item:hover{ border-color:var(--pink); }
.faq-item:has(.faq-q[aria-expanded="true"]){ border-color:var(--pink); box-shadow:var(--shadow-sm); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:24px 26px; display:flex; justify-content:space-between;
  align-items:center; gap:20px; font-weight:800; font-family:var(--font-head); font-size:1.12rem; color:var(--ink);
  line-height:1.28; transition:color .25s; text-transform:none; letter-spacing:-.015em;
}
.faq-q:hover{ color:var(--rose-ink); }
.faq-q .plus{ font-size:1rem; color:var(--rose-ink); transition:transform .3s var(--ease); flex-shrink:0; }
.faq-q[aria-expanded="true"] .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a p{ padding:0 26px 24px; margin:0; font-size:.92rem; max-width:70ch; }

/* ---------- CTA banner ---------- */
.cta-banner{
  background:linear-gradient(135deg,#D6305E 0%,#C42A54 52%,#A82248 100%);
  border-radius:var(--radius-xl); padding:84px 48px; text-align:center; color:var(--white); position:relative; overflow:hidden;
}
.cta-banner h2{ color:var(--white); }
.cta-banner p{ color:rgba(255,255,255,.94); max-width:560px; margin-inline:auto; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
@media(max-width:560px){ .cta-banner{ padding:48px 22px; } }

/* ---------- Pink poster panel (reference frame 2) ---------- */
.poster-panel{
  position:relative; border-radius:var(--radius-xl); overflow:hidden; padding:clamp(38px,5vw,72px);
  background:linear-gradient(120deg,#D6305E 0%,#C42A54 52%,#A82248 100%);
  color:var(--white);
}
.poster-panel h2{ color:var(--white); font-size:clamp(2.2rem,5vw,4.4rem); }
.poster-panel p{ color:var(--white); }
.poster-outline{
  -webkit-text-stroke:2px rgba(255,255,255,.9); color:transparent; display:inline-block;
}
.poster-num{
  position:absolute; font-family:var(--font-head); font-weight:800; color:rgba(255,255,255,.16);
  font-size:clamp(5rem,12vw,11rem); line-height:1; pointer-events:none; letter-spacing:-.05em;
}
.poster-num.p1{ top:24px; right:6%; }
.poster-grid{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
@media(max-width:820px){ .poster-grid{ grid-template-columns:1fr; } }
.poster-item{ background:rgba(0,0,0,.16); border:1px solid rgba(255,255,255,.32); border-radius:var(--radius-md); padding:26px 24px; }
.poster-item .ic-svg{ font-size:1.4rem; margin-bottom:14px; color:var(--pink); }
.poster-item h4{ color:var(--white); font-size:1.05rem; margin-bottom:6px; }
.poster-item p{ font-size:.86rem; margin-bottom:0; color:rgba(255,255,255,.94); }

/* ---------- Full-bleed closing panel ---------- */
.final-cta{
  position:relative; min-height:74vh; display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center 35%; text-align:center; padding:110px 24px;
  border-radius:var(--radius-xl); overflow:hidden;
}
.final-cta::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(120,44,68,.34),rgba(120,44,68,.8)); }
.final-cta-inner{ position:relative; z-index:1; max-width:760px; }
.final-cta .kicker{ color:var(--white); justify-content:center; }
.final-cta .kicker::before{ background:var(--white); }
.final-cta h2{ color:var(--white); font-size:clamp(2.4rem,5.4vw,4.4rem); }
.final-cta p{ color:rgba(255,255,255,.9); max-width:520px; margin:20px auto 0; }
.final-cta .cta-actions{ margin-top:32px; }

/* ---------- Footer ---------- */
.site-footer{ background:linear-gradient(165deg,#4E2434 0%,#43202D 55%,#361826 100%); color:rgba(255,255,255,.72); padding:88px 0 0; margin-top:0; }
.footer-wordmark{ margin:0 0 22px; }
.footer-wordmark img{ height:120px; width:auto; }
.footer-lede{ font-size:1.1rem; color:rgba(255,255,255,.86); max-width:440px; margin:0 0 48px; font-family:var(--font-head); font-weight:600; letter-spacing:-.015em; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:44px; padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.18); }
.footer-brand{ display:flex; align-items:center; gap:11px; font-family:var(--font-head); font-weight:800; font-size:1.2rem; color:var(--white); margin-bottom:16px; text-transform:uppercase; letter-spacing:-.02em; }
.footer-brand .mark{ width:34px; height:34px; border-radius:50%; background:var(--rose-deep); display:flex; align-items:center; justify-content:center; font-size:.86rem; color:var(--white); }
.footer-col-desc{ font-size:.86rem; color:rgba(255,255,255,.72); }
.footer-social{ display:flex; gap:9px; margin-top:20px; }
.footer-social a{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.26); display:flex; align-items:center; justify-content:center; transition:all .3s; color:rgba(255,255,255,.85); font-size:.9rem; }
.footer-social a:hover{ border-color:var(--pink); color:var(--white); background:var(--rose-deep); }
.footer-col h4{ color:var(--white); font-size:.69rem; text-transform:uppercase; letter-spacing:.2em; margin-bottom:20px; font-weight:800; font-family:var(--font-body); }
.footer-col li{ margin-bottom:12px; }
.footer-col a{ color:rgba(255,255,255,.72); font-size:.85rem; transition:color .25s; }
.footer-col a:hover{ color:var(--pink); }
.footer-contact li{ display:flex; gap:10px; color:rgba(255,255,255,.72); font-size:.83rem; align-items:flex-start; }
.footer-contact .ic-svg{ color:var(--pink); font-size:.88rem; margin-top:4px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:24px 0; font-size:.75rem; color:rgba(255,255,255,.66); flex-wrap:wrap; gap:10px; }
.back-top{ display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.66); font-weight:700; background:none; border:none; font-size:.75rem; }
.back-top:hover{ color:var(--pink); }
@media(max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-wordmark img{ height:88px; } }
@media(max-width:560px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }

/* ---------- Back to top ---------- */
.back-top-fab{
  position:fixed; right:22px; bottom:22px; z-index:800; width:48px; height:48px; border-radius:50%; background:var(--rose-deep); color:var(--white);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-rose); opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .35s var(--ease); border:none; font-size:1rem;
}
.back-top-fab.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-top-fab:hover{ background:var(--rose-ink); }

/* ---------- Modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(74,42,52,.5); display:flex; align-items:center; justify-content:center; padding:20px; z-index:1400; opacity:0; visibility:hidden; transition:opacity .35s var(--ease); backdrop-filter:blur(5px); }
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal-box{ background:var(--card); border-radius:var(--radius-lg); max-width:620px; width:100%; max-height:90vh; overflow-y:auto; padding:42px; position:relative; transform:scale(.96) translateY(12px); transition:transform .35s var(--ease); box-shadow:var(--shadow-lg); }
.modal-overlay.open .modal-box{ transform:scale(1) translateY(0); }
.modal-box h3{ font-size:1.9rem; margin-bottom:8px; }
.modal-close{ position:absolute; top:20px; right:20px; background:var(--white); border:1px solid var(--line); width:40px; height:40px; border-radius:50%; font-size:.9rem; color:var(--rose-ink); }
.modal-puppy-name{ color:var(--rose-ink); }
@media(max-width:560px){ .modal-box{ padding:26px 20px; } }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-grid .full{ grid-column:1/-1; }
.field label{ display:block; font-weight:800; font-size:.69rem; margin-bottom:9px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink); }
.field label .req{ color:var(--rose-ink); }
.field input, .field select, .field textarea{ width:100%; padding:15px 18px; border:1.5px solid var(--line); border-radius:14px; background:var(--white); color:var(--ink); font-size:.94rem; transition:border-color .25s, box-shadow .25s; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--rose); box-shadow:0 0 0 4px rgba(230,57,105,.12); }
.field small{ display:block; margin-top:7px; color:var(--ink-soft); font-size:.74rem; }
.field input.invalid, .field select.invalid{ border-color:#C0392B; }
.field-error{ display:block; margin-top:7px; color:#C0392B; font-size:.74rem; font-weight:700; }
.field-error:empty{ display:none; }
.field textarea{ resize:vertical; min-height:120px; }
.hint-text{ font-size:.86rem; color:var(--ink-soft); margin-top:-4px; margin-bottom:22px; }
.form-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:42px; box-shadow:var(--shadow-sm); }
@media(max-width:640px){ .form-grid{ grid-template-columns:1fr; } .form-card{ padding:26px; } }
.form-status{ padding:15px 18px; border-radius:14px; margin-top:20px; font-weight:700; font-size:.85rem; display:none; }
.form-status.success{ display:block; background:#EAF6EC; color:#2E7D45; }
.form-status.error{ display:block; background:#FDEBEC; color:#C0392B; }
.checkbox-row{ display:flex; align-items:flex-start; gap:11px; }
.checkbox-row input{ width:auto; margin-top:4px; accent-color:var(--rose); }
.checkbox-row label{ font-weight:500; font-size:.86rem; margin:0; text-transform:none; letter-spacing:0; color:var(--ink-soft); }

/* ---------- Tags ---------- */
.tag{ display:inline-block; padding:6px 15px; border-radius:var(--radius-pill); font-size:.69rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; background:var(--blush); color:var(--rose-ink); }

/* ---------- Timeline ---------- */
.timeline{ position:relative; padding-left:36px; }
.timeline::before{ content:""; position:absolute; left:5px; top:8px; bottom:8px; width:2px; background:var(--blush); border-radius:2px; }
.timeline-item{ position:relative; padding-bottom:40px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{ content:""; position:absolute; left:-36px; top:9px; width:12px; height:12px; border-radius:50%; background:var(--rose); box-shadow:0 0 0 5px var(--cream); }
.timeline-year{ font-weight:800; color:var(--rose-ink); font-size:.69rem; text-transform:uppercase; letter-spacing:.2em; margin-bottom:8px; }
.timeline-item h3{ font-size:1.4rem; }
.timeline-item p{ font-size:.92rem; max-width:58ch; }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--line); }
table.data-table{ width:100%; border-collapse:collapse; background:var(--white); min-width:480px; font-size:.88rem; }
table.data-table th, table.data-table td{ padding:17px 22px; text-align:left; border-bottom:1px solid var(--line); }
table.data-table thead th{ background:var(--rose-deep); color:var(--white); font-weight:800; font-size:.6rem; text-transform:uppercase; letter-spacing:.15em; }
table.data-table td:first-child{ font-weight:800; color:var(--ink); }
table.data-table tbody tr:nth-child(even){ background:var(--cream); }
.check-yes{ color:#2E7D45; font-weight:800; }
.check-no{ color:#C0392B; font-weight:800; }

/* ---------- Comparison cards ---------- */
.compare-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media(max-width:960px){ .compare-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .compare-grid{ grid-template-columns:1fr; } }
.compare-grid-3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:860px){ .compare-grid-3{ grid-template-columns:1fr; } }
.compare-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px 28px; position:relative; }
.compare-card.highlight{ background:linear-gradient(150deg,#FFE9EF,#FFF9FB); border-color:var(--blush); }
.compare-card h4{ font-size:1.2rem; margin-bottom:8px; }
.compare-card p{ font-size:.88rem; margin-bottom:0; }
.compare-fee{ font-family:var(--font-head); font-size:2rem; color:var(--rose); font-weight:800; margin:12px 0; letter-spacing:-.03em; }
.compare-badge{ display:inline-block; background:var(--rose-deep); color:var(--white); font-size:.69rem; font-weight:800; padding:6px 13px; border-radius:var(--radius-pill); white-space:nowrap; letter-spacing:.15em; text-transform:uppercase; margin-bottom:14px; }

/* ---------- Icon list ---------- */
.icon-list{ display:flex; flex-direction:column; gap:10px; }
.icon-list li{ display:flex; gap:15px; align-items:flex-start; font-size:.94rem; padding:16px 20px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); color:var(--ink-soft); }
.icon-list li strong{ color:var(--ink); font-weight:800; }
.icon-list .bubble{ width:36px; height:36px; border-radius:50%; background:var(--blush); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.82rem; color:var(--rose-ink); }

/* ---------- Speech bubble ---------- */
.speech-bubble{ background:linear-gradient(150deg,#FFE9EF,#FFF9FB); border:1px solid var(--blush); border-radius:var(--radius-lg); padding:34px 36px; }
.speech-bubble h4{ font-size:1.3rem; }
.speech-bubble p{ font-size:.92rem; }

/* ---------- Callout ---------- */
.callout{ display:flex; gap:20px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 34px; align-items:flex-start; }
.callout .ic{ font-size:1.5rem; color:var(--rose-ink); background:var(--blush); width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.callout h4{ font-size:1.25rem; }
.callout p{ font-size:.92rem; }
.callout-mint{ background:#EEF7F0; border-color:#CFE7D6; }

/* =========================================================
   EDITORIAL SECTIONS
   ========================================================= */
.story-split{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; }
.story-split .story-media{ position:relative; overflow:hidden; border-radius:var(--radius-xl); min-height:560px; }
.story-split .story-media img{ width:100%; height:100%; object-fit:cover; }
.story-split .story-copy{ padding:0 0 0 clamp(30px,5vw,80px); display:flex; flex-direction:column; justify-content:center; }
.story-split .story-copy h2{ font-size:clamp(2rem,3.4vw,3.2rem); }
.story-split .story-copy p{ font-size:1rem; max-width:52ch; }
.story-lead{ font-family:var(--font-head); font-size:1.35rem !important; color:var(--ink) !important; line-height:1.35; font-weight:600; letter-spacing:-.02em; }
@media(max-width:900px){
  .story-split{ grid-template-columns:1fr; gap:32px; }
  .story-split .story-copy{ padding:0; }
  .story-split .story-media{ min-height:340px; }
}

/* Breed facts */
.breed-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.breed-fact{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px 26px; }
.breed-fact .val{ font-family:var(--font-head); font-size:clamp(1.4rem,2.2vw,2rem); color:var(--rose); line-height:1.08; margin-bottom:12px; font-weight:800; letter-spacing:-.03em; }
.breed-fact .lbl{ font-size:.69rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
@media(max-width:860px){ .breed-facts{ grid-template-columns:1fr 1fr; } }

/* Gallery */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:186px; gap:18px; }
.gallery-item{ position:relative; overflow:hidden; border-radius:var(--radius-lg); background:var(--blush); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item figcaption{
  position:absolute; inset:auto 0 0 0; padding:26px 22px 18px; color:var(--white);
  background:linear-gradient(180deg,transparent,rgba(120,44,68,.85));
  font-size:.69rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.gallery-item:hover figcaption{ opacity:1; transform:translateY(0); }
.g-tall{ grid-row:span 2; }
.g-wide{ grid-column:span 2; }
.g-big{ grid-column:span 2; grid-row:span 2; }
@media(max-width:900px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; gap:12px; }
  .g-big, .g-wide{ grid-column:span 2; }
}

/* Process */
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.process-step{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 28px; position:relative; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.process-step:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.process-num{ font-family:var(--font-head); font-size:2.8rem; color:var(--rose); line-height:1; margin-bottom:18px; font-weight:800; letter-spacing:-.05em; }
.process-step h3{ font-size:1.25rem; margin-bottom:10px; }
.process-step p{ font-size:.88rem; margin-bottom:0; }
@media(max-width:900px){ .process-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .process-grid{ grid-template-columns:1fr; } }

/* Trust grid (on the pink poster) */
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:900px){ .trust-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .trust-grid{ grid-template-columns:1fr; } }
.trust-item{ background:rgba(0,0,0,.16); border:1px solid rgba(255,255,255,.32); border-radius:var(--radius-md); padding:30px 26px; }
.trust-item .ic-svg{ font-size:1.4rem; color:var(--pink); margin-bottom:16px; }
.trust-item h4{ font-size:1.1rem; margin-bottom:8px; color:var(--white); }
.trust-item p{ font-size:.86rem; margin-bottom:0; color:rgba(255,255,255,.94); }

/* Delivery */
.delivery-panel{ display:grid; grid-template-columns:1.05fr 1fr; gap:0; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-xl); overflow:hidden; }
.delivery-copy{ padding:clamp(30px,4vw,60px); display:flex; flex-direction:column; justify-content:center; }
.delivery-media{ position:relative; min-height:420px; }
.delivery-media img{ width:100%; height:100%; object-fit:cover; }
.delivery-list li{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.delivery-list li:last-child{ border-bottom:none; }
.delivery-list .idx{ font-family:var(--font-head); color:var(--white); background:var(--rose-deep); width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; flex-shrink:0; }
.delivery-list strong{ display:block; color:var(--ink); font-size:1rem; font-family:var(--font-head); font-weight:800; margin-bottom:3px; letter-spacing:-.015em; }
.delivery-list span.d{ font-size:.87rem; color:var(--ink-soft); }
@media(max-width:900px){ .delivery-panel{ grid-template-columns:1fr; } .delivery-media{ min-height:280px; order:-1; } }

.rule{ height:1px; background:var(--line); border:none; margin:0; }

.rail-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:44px; }
.rail-head .section-head{ margin-bottom:0; }
.rail-link{ font-size:.69rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--rose-ink); white-space:nowrap; padding:12px 22px; border:1.5px solid var(--line-strong); border-radius:var(--radius-pill); transition:all .25s; }
.rail-link:hover{ background:var(--rose-deep); border-color:var(--rose-deep); color:var(--white); }
@media(max-width:760px){ .rail-head{ flex-direction:column; align-items:flex-start; gap:20px; } }

/* =========================================================
   POLICIES
   ========================================================= */
.policy-tabs{
  display:flex; gap:8px; overflow-x:auto; margin-bottom:48px;
  position:sticky; top:calc(var(--nav-h) + 14px); z-index:80;
  background:var(--cream); padding:12px 4px 16px; margin-left:-4px; margin-right:-4px;
  border-bottom:1px solid var(--line);
}
.policy-tab-btn{
  flex-shrink:0; background:var(--white); border:1.5px solid var(--line); padding:12px 22px; font-weight:800; font-size:.69rem;
  color:var(--ink-soft); border-radius:var(--radius-pill); white-space:nowrap; transition:all .25s;
  letter-spacing:.13em; text-transform:uppercase;
}
.policy-tab-btn:hover{ border-color:var(--pink); color:var(--rose-ink); }
.policy-tab-btn.active{ color:var(--white); background:var(--rose-deep); border-color:var(--rose-deep); }
.policy-panel{ display:none; }
.policy-panel.active{ display:block; animation:fadeUp .45s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:translateY(0);} }
.policy-section{ padding-bottom:40px; border-bottom:1px solid var(--line); margin-bottom:40px; }
.policy-section:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.policy-section h3{ display:flex; align-items:center; gap:14px; font-size:1.4rem; }
.policy-section p{ font-size:.94rem; }
.policy-num{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--blush); color:var(--rose-ink); font-family:var(--font-head); font-weight:800; font-size:.85rem; flex-shrink:0; }

.policy-hub-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:900px){ .policy-hub-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .policy-hub-grid{ grid-template-columns:1fr; } }
.policy-hub-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 30px; transition:transform .3s var(--ease), box-shadow .3s var(--ease); display:flex; flex-direction:column; gap:10px; }
.policy-hub-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.policy-hub-card h3{ font-size:1.2rem; }
.policy-hub-card p{ font-size:.87rem; }
.policy-hub-card .go{ margin-top:auto; font-weight:800; color:var(--rose-ink); font-size:.69rem; letter-spacing:.14em; text-transform:uppercase; padding-top:10px; }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- Filter bar ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:40px; }
.filter-group{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ padding:12px 22px; border-radius:var(--radius-pill); border:1.5px solid var(--line); background:var(--white); font-weight:800; font-size:.69rem; color:var(--ink-soft); transition:all .25s var(--ease); letter-spacing:.13em; text-transform:uppercase; }
.chip:hover{ border-color:var(--pink); color:var(--rose-ink); }
.chip.active{ background:var(--rose-deep); color:var(--white); border-color:var(--rose-deep); box-shadow:var(--shadow-rose); }
.count-badge{ margin-left:auto; color:var(--rose-ink); font-weight:800; font-size:.69rem; letter-spacing:.15em; text-transform:uppercase; background:var(--blush); padding:9px 16px; border-radius:var(--radius-pill); }

/* ---------- 404 ---------- */
.error-page{ min-height:44vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:84px 20px; }

/* =========================================================
   CHECKOUT — Puppy Contract
   ========================================================= */
.checkout-layout{ display:grid; grid-template-columns:1fr 380px; gap:56px; align-items:start; }
@media(max-width:960px){ .checkout-layout{ grid-template-columns:1fr; gap:36px; } }
.checkout-section{ padding-bottom:40px; margin-bottom:40px; border-bottom:1px solid var(--line); }
.checkout-section:last-of-type{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.checkout-section h3{ display:flex; align-items:center; gap:14px; font-size:1.35rem; margin-bottom:8px; }
.checkout-section > p.hint-text{ margin-left:48px; }
.checkout-num{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--rose-deep); color:var(--white); font-size:.76rem; font-weight:800; flex-shrink:0; }

.checkout-summary{ position:sticky; top:calc(var(--nav-h) + 24px); }
.summary-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-sm); }
.summary-card h4{ font-size:1.25rem; margin-bottom:18px; }
.summary-puppies{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.summary-puppy-row{ display:flex; justify-content:space-between; font-size:.86rem; color:var(--ink); font-weight:700; padding-bottom:10px; border-bottom:1px dashed var(--line); }
.summary-empty{ font-size:.86rem; color:var(--ink-soft); }
.summary-buyer{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.summary-buyer-row{ display:flex; flex-direction:column; gap:3px; }
.summary-buyer-row .lbl{ font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.summary-buyer-row span:last-child{ font-size:.84rem; color:var(--ink); font-weight:600; word-break:break-word; }
.summary-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; font-size:.86rem; padding:13px 0; border-top:1px solid var(--line); color:var(--ink-soft); }
.summary-row span:last-child{ text-align:right; max-width:58%; }
.summary-row.total{ padding-top:18px; color:var(--ink); font-weight:800; }
.summary-row .amt{ font-family:var(--font-head); font-size:1.9rem; color:var(--rose-ink); font-weight:800; letter-spacing:-.03em; }
.summary-note{ font-size:.72rem; color:var(--ink-soft); text-align:center; margin:16px 0 0; }
@media(max-width:960px){ .checkout-summary{ position:static; } }

.puppy-pick-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:760px){ .puppy-pick-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .puppy-pick-grid{ grid-template-columns:1fr; } }
.puppy-pick{ border:1.5px solid var(--line); border-radius:18px; padding:12px; display:flex; gap:12px; align-items:center; cursor:pointer; background:var(--white); transition:border-color .25s, background .25s; }
.puppy-pick:hover{ border-color:var(--pink); }
.puppy-pick:has(input:checked){ border-color:var(--rose); background:var(--cream); }
.puppy-pick img{ width:48px; height:48px; border-radius:14px; object-fit:cover; flex-shrink:0; }
.puppy-pick .pn{ font-weight:800; font-size:.86rem; color:var(--ink); }
.puppy-pick .pp{ font-size:.7rem; color:var(--ink-soft); }
.puppy-pick input{ margin-left:auto; width:18px; height:18px; accent-color:var(--rose); }

.ship-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media(max-width:640px){ .ship-grid{ grid-template-columns:1fr; } }
.ship-card{ border:1.5px solid var(--line); border-radius:var(--radius-md); padding:24px; cursor:pointer; background:var(--white); transition:border-color .25s, background .25s; }
.ship-card:hover{ border-color:var(--pink); }
.ship-card:has(input:checked){ border-color:var(--rose); background:var(--cream); }
.ship-card input{ accent-color:var(--rose); margin-right:10px; }
.ship-card strong{ font-size:.98rem; color:var(--ink); }
.ship-card p{ font-size:.82rem; margin-bottom:0; margin-top:8px; }
.ship-fee{ float:right; font-weight:800; color:var(--rose-ink); font-size:.86rem; }

.sig-wrap{ border:1.5px dashed var(--line-strong); border-radius:var(--radius-md); background:var(--white); overflow:hidden; }
.sig-wrap canvas{ width:100%; height:170px; display:block; touch-action:none; cursor:crosshair; }
.sig-actions{ display:flex; justify-content:flex-end; padding:9px 12px; border-top:1px solid var(--line); }

/* ---------- Utility ---------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
@media(max-width:860px){ .two-col{ grid-template-columns:1fr; gap:34px; } }
.img-round{ border-radius:var(--radius-xl); box-shadow:var(--shadow-md); }
.bg-alt-section{ background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.bg-ink-section{ background:var(--footer-bg); color:rgba(255,255,255,.7); }
.bg-ink-section h2, .bg-ink-section h3{ color:var(--white); }
.bg-ink-section .kicker{ color:var(--pink); }
.bg-ink-section .kicker::before{ background:var(--pink); }
.bg-forest-section{ background:var(--footer-bg); color:rgba(255,255,255,.7); }
.bg-forest-section h2, .bg-forest-section h3, .bg-forest-section h4{ color:var(--white); }
.bg-forest-section .kicker{ color:var(--pink); }
.bg-forest-section .kicker::before{ background:var(--pink); }
.bg-forest-section p{ color:rgba(255,255,255,.7); }