/* ==========================================================================
   Melissa's Bernedoodles — site stylesheet
   Typeface: Outfit (self-hosted, see fonts.css — linked separately on purpose)
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Warm neutrals, keyed to the cream in the logo artwork */
  --ink:#241a10;
  --ink-soft:#574738;
  --muted:#6f5e4d;
  --cream:#fcf7ee;
  --paper:#ffffff;
  --sand:#f5ecdc;
  --sand-2:#eee0ca;
  --line:#e6d7bf;
  --line-soft:#f1e7d6;

  /* Accents sampled from the logo: the "Melissa's" script copper (#9c3c04), the
     BERNEDOODLES green (#142c14) and the gold outline. --rust and --sage keep
     their names so every existing rule still points at the brand colour. */
  --rust:#9c3c04;
  --rust-dark:#7c2c04;
  --rust-tint:#fbeee4;
  --sage:#1d3a1d;
  --sage-tint:#e8eee7;
  --gold:#a9792c;
  --gold-light:#e4c48c;
  --brown-deep:#4f2205;

  /* Radii */
  --r-xs:8px;
  --r-sm:12px;
  --r:18px;
  --r-lg:26px;
  --r-xl:38px;
  --r-pill:999px;

  /* Shadows — warm, never grey */
  --sh-xs:0 1px 2px rgba(52,34,16,.06);
  --sh-sm:0 2px 10px rgba(52,34,16,.06), 0 1px 2px rgba(52,34,16,.04);
  --sh:0 10px 30px -12px rgba(52,34,16,.18), 0 2px 8px rgba(52,34,16,.05);
  --sh-lg:0 30px 60px -28px rgba(52,34,16,.30), 0 6px 18px rgba(52,34,16,.06);

  /* Rhythm */
  --gutter:clamp(18px,4vw,34px);
  --maxw:1200px;
  --maxw-narrow:760px;
  --section-y:clamp(52px,6vw,86px);

  /* Type */
  --font:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-h1:clamp(2.05rem,3.5vw,3.15rem);
  --fs-h2:clamp(1.55rem,2.4vw,2.2rem);
  --fs-h3:clamp(1.14rem,1.5vw,1.34rem);
  --fs-h4:clamp(1.02rem,1.2vw,1.12rem);
  --fs-lede:clamp(.98rem,1.05vw,1.08rem);
  --fs-body:1rem;
  --fs-sm:.92rem;
  --fs-xs:.8rem;
  --fs-eyebrow:.715rem;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg,video,iframe{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
:focus-visible{outline:2.5px solid var(--rust);outline-offset:3px;border-radius:4px}
::selection{background:var(--rust);color:#fff}

/* ---------- 3. Base typography ------------------------------------------ */
body{
  font-family:var(--font);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.72;
  color:var(--ink-soft);
  background:var(--cream);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-ligatures:common-ligatures;
}

h1,h2,h3,h4,h5,h6{
  margin:0 0 .6em;
  color:var(--ink);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.022em;
  text-wrap:balance;
}
h1{font-size:var(--fs-h1);letter-spacing:-.032em;line-height:1.07}
h2{font-size:var(--fs-h2);letter-spacing:-.028em;line-height:1.12}
h3{font-size:var(--fs-h3);letter-spacing:-.018em;line-height:1.26}
h4{font-size:var(--fs-h4);letter-spacing:-.012em;line-height:1.35}
h5,h6{font-size:1rem;letter-spacing:-.008em}

p{margin:0 0 1.15em;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong,b{font-weight:600;color:var(--ink)}
small{font-size:var(--fs-sm)}

ul,ol{margin:0 0 1.25em;padding-left:1.25em}
li{margin:.34em 0}
li::marker{color:var(--rust)}

a{text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--rust)}

blockquote{
  margin:1.6em 0;padding:1.1em 1.4em;
  border-left:3px solid var(--rust);
  background:var(--rust-tint);border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--ink);font-size:1.03rem;
}
blockquote p:last-child{margin-bottom:0}

code,kbd,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em}
table{width:100%;border-collapse:collapse;margin:0 0 1.5em;font-size:var(--fs-sm)}
th,td{padding:.72rem .9rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-weight:600;color:var(--ink);background:var(--sand);letter-spacing:-.01em}

/* Shared text helpers */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:var(--fs-eyebrow);font-weight:600;line-height:1;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--rust);margin:0 0 1.05rem;
}
.eyebrow::before{content:"";width:22px;height:1.5px;background:currentColor;border-radius:2px;flex:none}
.eyebrow--plain::before{display:none}
.eyebrow--sage{color:var(--sage)}
.lede{font-size:var(--fs-lede);line-height:1.68;color:var(--ink-soft);max-width:60ch}
.measure{max-width:64ch}
.text-center{text-align:center}
.text-center .lede,.text-center .eyebrow{margin-left:auto;margin-right:auto}
.text-center .eyebrow{justify-content:center}

/* ---------- 4. Layout --------------------------------------------------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:var(--maxw-narrow)}
.container--wide{max-width:1340px}
.container--full{max-width:none;padding-inline:clamp(16px,3.1vw,58px)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(38px,4.4vw,60px)}
.section--cream{background:var(--cream)}
.section--paper{background:var(--paper)}
.section--sand{background:var(--sand)}
.section--ink{background:var(--ink);color:#e9e0d5}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff}
.section--ink .lede{color:#cfc3b6}

.section-head{margin-bottom:clamp(28px,3.2vw,44px)}
.section-head h2{margin-bottom:.45em}
.section-head--split{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.section-head--split>div{min-width:0}

.grid{display:grid;gap:clamp(16px,2vw,26px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}

/* ---------- 5. Buttons -------------------------------------------------- */
/* Buttons hug their text at every breakpoint — never full-width. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  width:auto;max-width:100%;
  padding:.78rem 1.4rem;
  font-size:.945rem;font-weight:600;line-height:1.2;letter-spacing:-.012em;
  border:1.5px solid transparent;border-radius:var(--r-pill);
  text-decoration:none;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),background-color .18s,border-color .18s,color .18s,box-shadow .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.05em;height:1.05em;flex:none}

.btn--primary{background:var(--rust);border-color:var(--rust);color:#fff;box-shadow:0 10px 22px -12px rgba(156,60,4,.85)}
.btn--primary:hover{background:var(--rust-dark);border-color:var(--rust-dark);color:#fff;box-shadow:0 16px 28px -14px rgba(124,44,4,.9)}
.btn--ink{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--ink:hover{background:#140f0b;color:#fff}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:var(--paper);color:var(--ink)}
.btn--light{background:#fff;border-color:#fff;color:var(--ink)}
.btn--light:hover{background:var(--sand);border-color:var(--sand);color:var(--ink)}
.btn--sm{padding:.56rem 1.05rem;font-size:.875rem}
.btn--lg{padding:.92rem 1.7rem;font-size:1rem}

.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.text-center .btn-row{justify-content:center}

.link-arrow{display:inline-flex;align-items:center;gap:.42em;font-weight:600;font-size:.94rem;color:var(--rust);text-decoration:none;letter-spacing:-.01em}
.link-arrow svg{width:1em;height:1em;transition:transform .2s}
.link-arrow:hover svg{transform:translateX(3px)}

/* ---------- 6. Chips, badges, stars ------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.3rem .72rem;border-radius:var(--r-pill);
  background:var(--sand);color:var(--ink);
  font-size:.775rem;font-weight:600;line-height:1.35;
  border:1px solid var(--line-soft);
}
.chip svg{width:.9em;height:.9em;color:var(--muted)}
.chip--sage{background:var(--sage-tint);border-color:#dfe5d9}
.chip--rust{background:var(--rust-tint);border-color:#f0ddd1;color:var(--rust-dark)}
.chip-row{display:flex;flex-wrap:wrap;gap:.4rem}

.badge{display:inline-flex;align-items:center;gap:.4em;padding:.34rem .78rem;border-radius:var(--r-pill);font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.badge--available{background:var(--sage);color:#fff}
.badge--reserved{background:var(--gold);color:#fff}
.badge--home{background:var(--muted);color:#fff}

.stars{display:inline-flex;gap:2px;color:var(--gold);line-height:1}
.stars svg{width:15px;height:15px}

/* ---------- 7. Header --------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:900;
  background:rgba(252,247,238,.88);
  backdrop-filter:saturate(1.3) blur(14px);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s,box-shadow .25s;
}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(52,34,16,.5)}

.topbar{display:none}
.topbar .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;min-height:38px;padding-block:.42rem}
.topbar a{color:#f3ece2;text-decoration:none;font-weight:500}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar__list{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem;margin:0;padding:0;list-style:none}
.topbar__list li{display:flex;align-items:center;gap:.4em;margin:0}
.topbar__list svg{width:13px;height:13px;color:var(--gold);flex:none}

.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;min-height:84px;padding-block:.65rem}

/* Brand */
.brand{display:inline-flex;align-items:center;gap:.72rem;text-decoration:none;flex:none;min-width:0}
.brand__mark{width:46px;height:46px;flex:none;color:var(--rust)}
.brand__mark svg{width:100%;height:100%;display:block}
.brand__text{display:flex;flex-direction:column;min-width:0}
.brand__name{font-size:1.14rem;font-weight:600;letter-spacing:-.028em;line-height:1.08;color:var(--ink);white-space:nowrap}
.brand__tag{font-size:.6rem;font-weight:600;letter-spacing:.21em;text-transform:uppercase;color:var(--muted);line-height:1.5;margin-top:.22em;white-space:nowrap}
.brand img.custom-logo{max-height:74px;width:auto}
.mobile-nav__head .brand img.custom-logo{max-height:52px}

/* Primary nav — reset the UL itself. wp_nav_menu makes the nav a <ul>, so the
   global `ul{margin:0 0 1.25em}` would otherwise push the links off-centre. */
.nav{display:flex;align-items:center;gap:.1rem;margin:0;padding:0;list-style:none}
.nav li{position:relative;margin:0}
.nav>li>a{
  display:inline-flex;align-items:center;gap:.34em;
  padding:.62rem .78rem;border-radius:var(--r-pill);
  font-size:.925rem;font-weight:500;letter-spacing:-.012em;color:var(--ink);
  text-decoration:none;white-space:nowrap;transition:background-color .18s,color .18s;
}
.nav>li>a:hover,.nav>li.current-menu-item>a,.nav>li.current-menu-parent>a,.nav>li.current_page_parent>a{background:var(--sand);color:var(--ink)}
.nav>li.current-menu-item>a{font-weight:600}
.nav .menu-item-has-children>a::after{
  content:"";width:.42em;height:.42em;flex:none;margin-left:.1em;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-1px);opacity:.55;
}
.nav .sub-menu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:20;
  min-width:218px;margin:0;padding:.45rem;list-style:none;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);
  opacity:0;visibility:hidden;transform:translateY(7px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav .sub-menu a{display:block;padding:.52rem .72rem;border-radius:var(--r-xs);font-size:.9rem;font-weight:500;color:var(--ink-soft);text-decoration:none}
.nav .sub-menu a:hover{background:var(--sand);color:var(--ink)}

.header-actions{display:flex;align-items:center;gap:.6rem;flex:none}
.header-phone{display:inline-flex;align-items:center;gap:.45em;font-size:.925rem;font-weight:600;color:var(--ink);text-decoration:none;letter-spacing:-.015em;padding:.5rem .3rem}
.header-phone svg{width:1.05em;height:1.05em;color:var(--rust)}
.header-phone:hover{color:var(--rust)}

/* Burger — a copper paw button, crossing out when the drawer is open. */
.burger{
  position:relative;display:none;width:52px;height:52px;flex:none;
  align-items:center;justify-content:center;
  border:0;border-radius:17px;cursor:pointer;
  background:linear-gradient(145deg,var(--rust) 0%,var(--rust-dark) 100%);
  color:#fdf7ec;
  box-shadow:0 8px 18px -10px rgba(124,44,4,.95),
             inset 0 1px 0 rgba(255,255,255,.28),
             inset 0 -2px 0 rgba(0,0,0,.12);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s;
}
.burger:hover{transform:translateY(-1px);box-shadow:0 12px 24px -10px rgba(124,44,4,1),inset 0 1px 0 rgba(255,255,255,.3)}
.burger:active{transform:translateY(0)}
.burger__icon{
  position:absolute;inset:0;display:grid;place-items:center;
  transition:opacity .22s,transform .26s cubic-bezier(.2,.7,.3,1);
}
.burger__icon svg{width:25px;height:25px}
.burger__icon--close{opacity:0;transform:rotate(-40deg) scale(.6)}
.burger__icon--close svg{width:21px;height:21px;stroke-width:2.4}
.burger[aria-expanded="true"] .burger__icon--paw{opacity:0;transform:rotate(40deg) scale(.6)}
.burger[aria-expanded="true"] .burger__icon--close{opacity:1;transform:none}

/* Mobile drawer — the panel carries no outer margin, or translateX(101%)
   would leave a white strip down the edge of the page. */
.mobile-nav{
  position:fixed;inset:0 0 0 auto;z-index:1000;
  width:min(380px,88vw);margin:0;
  background:linear-gradient(160deg,#fffdf8 0%,#fdf6ea 58%,#f7ecdc 100%);
  border-left:1px solid var(--line-soft);
  box-shadow:-24px 0 60px -30px rgba(52,34,16,.65);
  transform:translateX(101%);
  visibility:hidden;
  transition:transform .36s cubic-bezier(.33,1,.68,1),visibility .36s;
  display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
}
.mobile-nav.is-open{transform:translateX(0);visibility:visible}

.mobile-nav__paws{position:absolute;inset:0;z-index:0;pointer-events:none;color:var(--sand-2);opacity:.5}
.mobile-nav__paws{opacity:.32}
.mobile-nav__paws .pupsec__paws{top:auto;bottom:16%;right:-54px;width:190px;opacity:1;color:inherit}

.mobile-nav__head{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem var(--gutter);
  border-bottom:1px solid rgba(230,215,191,.7);
}
.mobile-nav__head .brand img.custom-logo{max-height:50px}
.mobile-nav__close{
  width:46px;height:46px;flex:none;display:grid;place-items:center;
  border:0;border-radius:15px;cursor:pointer;
  background:linear-gradient(145deg,var(--rust) 0%,var(--rust-dark) 100%);
  color:#fdf7ec;
  box-shadow:0 8px 18px -10px rgba(124,44,4,.95),inset 0 1px 0 rgba(255,255,255,.28);
}
.mobile-nav__close svg{width:19px;height:19px;stroke-width:2.4}

/* Links */
.mobile-nav ul{position:relative;z-index:1;list-style:none;margin:0;padding:.6rem var(--gutter) .4rem;display:block}
.mobile-nav li{margin:0;border-bottom:1px solid rgba(230,215,191,.55)}
.mobile-nav li:last-child{border-bottom:0}
.mobile-nav ul a{
  position:relative;display:flex;align-items:center;gap:.6rem;
  padding:.78rem .7rem .78rem 0;
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:1.08rem;letter-spacing:-.012em;line-height:1.25;
  color:var(--ink);text-decoration:none;border-radius:12px;
  transition:color .18s,background-color .18s,padding-left .18s;
}
.mobile-nav ul a::after{
  content:"";margin-left:auto;width:.42em;height:.42em;flex:none;
  border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(-45deg);opacity:.35;transition:opacity .18s,transform .18s;
}
.mobile-nav ul a:hover{color:var(--rust);background:rgba(246,221,200,.5);padding-left:.7rem}
.mobile-nav ul a:hover::after{opacity:.8;transform:rotate(-45deg) translateX(2px)}
.mobile-nav ul .current-menu-item > a{
  color:var(--rust);background:#f6ddc8;padding-left:.7rem;
}
.mobile-nav ul .current-menu-item > a::after{opacity:.8}
.mobile-nav .sub-menu{padding:0 0 .4rem .9rem}
.mobile-nav .sub-menu a{font-family:var(--font);font-size:.95rem;font-weight:500;padding:.55rem .7rem .55rem 0;color:var(--ink-soft)}

/* Foot */
.mobile-nav__foot{
  position:relative;z-index:1;margin-top:auto;
  padding:1.1rem var(--gutter) 1.5rem;
  border-top:1px solid rgba(230,215,191,.7);
  display:flex;flex-direction:column;align-items:stretch;gap:.75rem;
}
.mobile-nav__cta{width:100%;justify-content:center;padding-block:.82rem}

.mobile-nav__social{display:flex;justify-content:center;gap:.6rem;margin-top:.3rem}
.mobile-nav__social a{
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  background:var(--paper);border:1px solid var(--line-soft);color:var(--rust);
  transition:background-color .2s,color .2s,transform .2s;
}
.mobile-nav__social a:hover{background:var(--rust);border-color:var(--rust);color:#fff;transform:translateY(-2px)}
.mobile-nav__social svg{width:17px;height:17px}

.nav-scrim{position:fixed;inset:0;z-index:999;background:rgba(36,26,16,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.nav-scrim.is-open{opacity:1;visibility:visible}
body.nav-open{overflow:hidden}

/* ---------- 8. Hero ----------------------------------------------------- */
/* Full-bleed photograph with the copy over the open side of it. It fits the
   viewport by three coupled rules: the sticky header's real height is measured
   into --head-h (site.js) with a fallback here so it is never zero before JS
   runs; hero type is sized from BOTH axes, because the vh term is what stops a
   wide-but-short laptop window overflowing; and the copy column is bounded
   rather than the section. Nothing is ever hidden to buy room. */
:root{
  --head-h:122px;
  --hero-pad:clamp(22px,3.6vh,58px);
}

.hero{
  position:relative;overflow:hidden;background:var(--sand);
  padding-block:var(--hero-pad);
  min-height:calc(100vh - var(--head-h));
  min-height:calc(100svh - var(--head-h));
  display:flex;align-items:center;
}
.hero>.container{width:100%;position:relative;z-index:2}

.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:68% 52%}
/* The scrim clears the right-hand third so the puppy is never washed out,
   and goes near-opaque under the copy so the text keeps its contrast. */
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(252,247,238,.975) 0%,
    rgba(252,247,238,.945) 26%,
    rgba(252,247,238,.76) 42%,
    rgba(252,247,238,.24) 58%,
    rgba(252,247,238,0) 73%);
}

.hero__copy{max-width:min(660px,58%)}

/* Eyebrow: paw, rule, label — as in the supplied mockup. */
.eyebrow--paw{align-items:center;color:#8a6a4a;gap:.5em}
.eyebrow--paw::before{display:none}
.eyebrow__paw{display:inline-flex;color:var(--rust)}
.eyebrow__paw svg{width:1.45em;height:1.45em}
.eyebrow__label{display:inline-flex;align-items:center;gap:.55em}
.eyebrow__label::before{content:"";width:22px;height:1.5px;background:currentColor;border-radius:2px;flex:none}

/* Two-tone display headline. Fraunces for these two lines only; the rest of
   the site stays on Outfit. */
.hero__title{
  position:relative;
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-weight:600;
  font-size:clamp(1.85rem,min(3.5vw,5.9vh),3.1rem);
  line-height:1.08;
  letter-spacing:-.012em;
  margin-bottom:.5em;
}
.hero__title-a,.hero__title-b{display:block}
.hero__title-a{color:var(--sage)}
.hero__title-b{color:var(--rust);font-style:italic;letter-spacing:-.004em}
.hero__title-l1,.hero__title-l2{display:block}
/* The last line and its heart share one row: the words are an inline-block so
   the swash can sit under exactly those words, and the heart follows inline so
   it can never wrap onto a line of its own. */
.hero__title-l2{display:flex;align-items:flex-start;justify-content:flex-start;gap:.1em;flex-wrap:nowrap}
.hero__title-words{position:relative;display:inline-block;flex:0 0 auto}
.hero__title-words .swash{position:absolute;left:1%;right:1%;bottom:-.16em;width:98%;height:.32em;color:var(--rust);opacity:.9}

/* Inline, so it always sits against the last word rather than drifting off
   into the photograph when the line happens to be short. */
.hero__heart{
  display:inline-block;flex:0 0 auto;width:.72em;margin-left:.42em;
  position:relative;top:.06em;
  color:var(--rust);opacity:.9;pointer-events:none;
}
.hero__heart svg{width:100%;height:auto;display:block}

/* Trust pills */
.hero__pills{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(.5rem,1.4vh,1rem) 0;
  margin:0 0 clamp(.9rem,2.1vh,1.5rem);
}
.hero__pill{display:flex;align-items:center;gap:.65rem;padding-right:clamp(.8rem,1.6vw,1.4rem)}
.hero__pill + .hero__pill{border-left:1px solid rgba(124,44,4,.18);padding-left:clamp(.8rem,1.6vw,1.4rem)}
.hero__pill-icon{
  width:clamp(36px,2.9vw,44px);height:clamp(36px,2.9vw,44px);flex:none;
  display:grid;place-items:center;border-radius:50%;
}
/* Tinted to match the feature blobs — copper, sage, copper. */
.hero__pill--copper .hero__pill-icon{background:#f6ddc8;color:var(--rust)}
.hero__pill--green .hero__pill-icon{background:#dfe6dc;color:var(--sage)}
.hero__pill-icon svg{width:46%;height:46%}
.hero__pill-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.hero__pill-text strong{font-size:clamp(.84rem,min(.98vw,1.65vh),.95rem);font-weight:600;color:var(--ink);letter-spacing:-.012em}
.hero__pill-text span{font-size:clamp(.76rem,min(.88vw,1.5vh),.86rem);color:var(--muted)}

/* Price and rating, on one line as in the mockup */
.hero__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.3rem;
  margin:0 0 clamp(.9rem,2.2vh,1.5rem);
}
.hero__price-tag{
  display:inline-flex;align-items:baseline;gap:.42em;
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(1.45rem,min(2.1vw,3.4vh),1.95rem);font-weight:600;
  letter-spacing:-.02em;color:var(--sage);line-height:1;
}
.hero__price-tag small{
  font-family:var(--font);font-size:.5em;font-weight:500;
  letter-spacing:0;color:var(--ink-soft);
}
.hero__rating{display:inline-flex;align-items:center;gap:.5em;font-size:.88rem;color:var(--ink-soft)}
.hero__rating .stars svg{width:17px;height:17px}

.hero .btn--light{box-shadow:0 8px 22px -14px rgba(52,34,16,.7);border-color:var(--line-soft)}
.hero .btn--primary svg:first-child{width:1.2em;height:1.2em}

/* ---------- 9. Marquee ---------------------------------------------------
   A single band of deep espresso brown — the darkest tone in the logo's script —
   held between two gold hairlines, with the phrases set in Fraunces italic and
   separated by small gold paws. It scrolls continuously by translating a pair
   of identical tracks by exactly -50%, so the loop has no seam, and the edges
   are masked so phrases dissolve in and out rather than popping. */
.marquee{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 150% at 50% 0%,rgba(228,196,140,.14),rgba(228,196,140,0) 62%),
    linear-gradient(180deg,rgba(255,255,255,.07) 0%,transparent 48%,rgba(0,0,0,.16) 100%),
    var(--brown-deep);
  padding-block:clamp(15px,2.3vh,24px);
  isolation:isolate;
}
/* Hairlines: a gold rule that fades out at both ends, rather than a hard edge. */
.marquee::before,
.marquee::after{
  content:"";position:absolute;left:0;right:0;height:1px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(228,196,140,0) 0%,
    rgba(228,196,140,.55) 18%,
    rgba(228,196,140,.75) 50%,
    rgba(228,196,140,.55) 82%,
    rgba(228,196,140,0) 100%);
}
.marquee::before{top:0}
.marquee::after{bottom:0}

.marquee__inner{
  display:flex;width:max-content;
  animation:mbd-marquee 46s linear infinite;
  will-change:transform;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.marquee:hover .marquee__inner,
.marquee:focus-within .marquee__inner{animation-play-state:paused}

@keyframes mbd-marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

.marquee__track{
  display:flex;align-items:center;
  margin:0;padding:0;list-style:none;flex:none;
}
.marquee__item{
  display:flex;align-items:center;gap:clamp(.9rem,1.8vw,1.6rem);
  margin:0;padding-right:clamp(.9rem,1.8vw,1.6rem);
  white-space:nowrap;
}
.marquee__mark{display:inline-flex;color:var(--gold-light);opacity:.75;flex:none}
.marquee__mark svg{width:clamp(13px,1.1vw,16px);height:clamp(13px,1.1vw,16px)}
.marquee__text{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-style:italic;font-weight:600;
  font-size:clamp(.95rem,min(1.35vw,2.1vh),1.22rem);
  letter-spacing:.005em;
  color:#f6efe2;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}

/* Reduced motion: the band stops and the phrases simply centre and wrap, so
   nothing is lost — it just does not move. */
@media (prefers-reduced-motion:reduce){
  .marquee__inner{animation:none;width:100%;mask-image:none;-webkit-mask-image:none;justify-content:center}
  .marquee__track:last-child{display:none}
  .marquee__track{flex-wrap:wrap;justify-content:center;row-gap:.5rem}
}

/* ---------- 10. Puppy cards --------------------------------------------- */
.puppy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:clamp(16px,1.9vw,26px)}

.pcard{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 2px 4px rgba(52,34,16,.04),0 14px 34px -22px rgba(52,34,16,.4);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;
}
.pcard:hover{
  transform:translateY(-6px);
  border-color:var(--line);
  box-shadow:0 4px 8px rgba(52,34,16,.05),0 26px 50px -24px rgba(52,34,16,.5);
}

/* Media */
.pcard__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--sand)}
.pcard__shot{display:block;width:100%;height:100%}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.pcard:hover .pcard__media img{transform:scale(1.05)}

.pcard__status{
  position:absolute;top:13px;left:13px;z-index:2;
  display:inline-flex;align-items:center;gap:.42em;
  padding:.4rem .78rem;border-radius:var(--r-pill);
  background:var(--sage);color:#f3efe4;
  font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;line-height:1;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.45);
}
.pcard__status svg{width:12px;height:12px;color:var(--gold-light)}
.pcard--reserved .pcard__status{background:var(--gold)}
.pcard--home .pcard__status{background:#6f6257}
.pcard--reserved .pcard__media img,
.pcard--home .pcard__media img{filter:saturate(.7)}

.pcard__fav{
  position:absolute;top:13px;right:13px;z-index:2;
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--rust);
  box-shadow:0 4px 12px -4px rgba(52,34,16,.45);
}
.pcard__fav svg{width:16px;height:16px}

.pcard__photos{
  position:absolute;right:13px;bottom:13px;z-index:2;
  display:inline-flex;align-items:center;gap:.42em;
  padding:.36rem .7rem;border-radius:var(--r-pill);
  background:rgba(32,20,10,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#f6efe2;font-size:.72rem;font-weight:600;line-height:1;
}
.pcard__photos svg{width:13px;height:13px;color:var(--gold-light)}

/* Body */
.pcard__body{display:flex;flex-direction:column;gap:.45rem;padding:1.05rem 1.15rem 1.15rem;flex:1}
.pcard__name{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:1.42rem;letter-spacing:-.015em;line-height:1.1;
  color:var(--sage);margin:0 0 .15rem;
}
.pcard__name a{text-decoration:none;color:inherit}
.pcard__name a:hover{color:var(--rust)}

.pcard__line{
  display:flex;align-items:center;flex-wrap:wrap;gap:.4em;
  margin:0;font-size:.87rem;color:var(--ink-soft);line-height:1.4;
}
.pcard__dot{color:var(--line);font-weight:700}
.pcard__sex{display:inline-flex}
.pcard__sex svg{width:15px;height:15px}
.pcard__sex--f{color:#c2538a}
.pcard__sex--m{color:#3f7cc0}
.pcard__swatch{
  width:13px;height:13px;border-radius:50%;flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);
}

.pcard__traits{
  display:flex;flex-wrap:wrap;gap:.35rem .85rem;
  margin:.55rem 0 0;padding:.75rem 0 0;list-style:none;
  border-top:1px solid var(--line-soft);
}
.pcard__traits li{display:flex;align-items:center;gap:.35em;margin:0;font-size:.78rem;color:var(--ink-soft);line-height:1.3}
.pcard__traits svg{width:14px;height:14px;color:var(--rust);flex:none}

.pcard__foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:.7rem;
  margin-top:auto;padding-top:.9rem;
}
.pcard__price{margin:0;line-height:1}
.pcard__price b{
  display:block;font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:1.6rem;letter-spacing:-.025em;color:var(--sage);
}
.pcard__price span{
  display:block;margin-top:.32em;
  font-size:.63rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.pcard__cta{flex:none;padding:.58rem 1rem}
.pcard__cta svg{width:.9em;height:.9em}

/* ---------- 10b. Decorated section head --------------------------------- */
.pupsec{position:relative;overflow:hidden}
.pupsec__paws{
  position:absolute;top:-10px;right:-14px;width:min(240px,26vw);
  color:var(--sand-2);opacity:.75;pointer-events:none;z-index:0;
}
.pupsec__paws svg{width:100%;height:auto;display:block}
.pupsec > .container{position:relative;z-index:1}

.pupsec__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:clamp(18px,3vw,40px);margin-bottom:clamp(26px,3.2vw,42px)}
.pupsec__intro{min-width:0;max-width:62ch}
.pupsec__title{
  position:relative;
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(1.65rem,3vw,2.5rem);line-height:1.1;letter-spacing:-.018em;
  color:var(--ink);margin:0 0 .4em;
}
.pupsec__title em{font-style:italic;color:var(--rust);font-weight:600}
.pupsec__heart{
  display:inline-block;width:.72em;margin-left:.2em;
  position:relative;top:-.26em;color:var(--gold-light);
}
.pupsec__heart svg{width:100%;height:auto;display:block}

.pupsec__aside{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;flex:none}
.pupsec__note{
  display:flex;align-items:flex-start;gap:.5rem;
  max-width:16rem;text-align:right;color:var(--rust);
}
.pupsec__note svg{width:34px;height:auto;flex:none;margin-top:.35rem;color:var(--rust)}
.pupsec__note span{
  font-family:'Allura',cursive;font-size:1.5rem;line-height:1.15;
}

/* ---------- 11. Why-us section & feature cards -------------------------- */
.whysec{position:relative;overflow:hidden}
.whysec__paws-left{position:absolute;inset:0;pointer-events:none;z-index:0}
.whysec__paws-left .pupsec__paws{right:auto;left:-26px;top:38px;transform:scaleX(-1);width:min(210px,22vw);opacity:.6}
.whysec > .container{position:relative;z-index:1}

.whysec__head{position:relative;text-align:center;max-width:64ch;margin:0 auto clamp(30px,3.6vw,52px)}
.whysec__head .lede{margin-inline:auto}

/* A centred eyebrow draws a rule on both sides. */
.eyebrow--center{justify-content:center}
.eyebrow--center::after{content:"";width:22px;height:1.5px;background:currentColor;border-radius:2px;flex:none}

.whysec__title{
  position:relative;display:inline-block;
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(1.7rem,3.1vw,2.6rem);line-height:1.12;letter-spacing:-.018em;
  color:var(--ink);margin:0 0 .5em;
}
.whysec__title em{position:relative;font-style:italic;color:var(--rust);font-weight:600;padding-bottom:.06em}
.whysec__title em .swash{
  position:absolute;left:2%;right:-1%;bottom:-.22em;width:102%;height:.42em;
  color:var(--rust);opacity:.85;
}
.whysec__heart{
  display:inline-block;width:.62em;margin-left:.42em;
  position:relative;top:-.42em;color:var(--rust);opacity:.85;
}
.whysec__heart svg{width:100%;height:auto;display:block}

.heart-trail{
  position:absolute;right:-13%;top:2%;width:clamp(78px,8vw,140px);
  color:var(--rust);opacity:.55;pointer-events:none;
}
.heart-trail svg{width:100%;height:auto;display:block}

/* Cards */
.feat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.5vw,26px)}
.feat-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.feat{
  position:relative;overflow:hidden;
  background:#fffdfa;
  border:1px solid rgba(230,215,191,.5);
  border-radius:22px;
  padding:clamp(22px,2.3vw,32px) clamp(20px,2.1vw,30px) clamp(24px,2.4vw,32px);
  box-shadow:0 2px 3px rgba(52,34,16,.03),0 16px 34px -26px rgba(52,34,16,.42);
  transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s;
}
.feat:hover{transform:translateY(-5px);box-shadow:0 3px 6px rgba(52,34,16,.04),0 26px 46px -26px rgba(52,34,16,.5)}

/* An organic blob rather than a plain circle — the shape in the mockup. */
.feat__blob{
  position:relative;z-index:1;
  display:grid;place-items:center;
  width:clamp(64px,5.6vw,82px);height:clamp(64px,5.6vw,82px);
  margin-bottom:clamp(18px,2vw,26px);
  border-radius:58% 42% 47% 53% / 46% 52% 48% 54%;
}
.feat__blob svg{width:50%;height:50%}
.feat--copper .feat__blob{background:#f6ddc8;color:var(--rust);position:relative}
.feat--copper .feat__blob::after{content:"";position:absolute;left:-2px;bottom:9%;width:5px;height:5px;border-radius:50%;background:var(--rust);opacity:.55}
.feat--green .feat__blob{background:#dfe6dc;color:var(--sage)}

.feat__accent{
  position:absolute;top:clamp(10px,1.1vw,16px);left:clamp(74px,6.3vw,98px);
  width:clamp(36px,3.3vw,52px);z-index:1;
}
.feat__accent svg{width:100%;height:auto;display:block}
.feat__accent--spark{color:var(--rust)}
.feat__accent--leaf{color:var(--sage)}

.feat__title{
  position:relative;z-index:1;
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(1.24rem,1.52vw,1.62rem);line-height:1.18;letter-spacing:-.014em;
  color:var(--ink);margin:0 0 .42em;text-wrap:balance;
}
.feat__text{position:relative;z-index:1;margin:0;font-size:clamp(.94rem,1.02vw,1.02rem);line-height:1.58;color:var(--ink-soft)}

.feat__rule{
  display:block;width:58px;height:3px;border-radius:3px;
  margin-top:clamp(14px,1.5vw,20px);position:relative;z-index:1;
}
.feat--copper .feat__rule{background:var(--rust)}
.feat--green .feat__rule{background:var(--sage)}

.paw-mark{
  position:absolute;right:-4px;bottom:-8px;width:76px;
  color:var(--sand-2);opacity:.7;pointer-events:none;z-index:0;
  transform:rotate(-14deg);
}
.paw-mark svg{width:100%;height:auto;display:block}

/* ---------- 11b. About section ------------------------------------------ */
.aboutsec{position:relative;overflow:hidden}
.aboutsec > .container{position:relative;z-index:1}
.aboutsec .pupsec__paws{top:auto;bottom:6%;right:-20px;opacity:.5}

.aboutsec__grid{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(34px,5vw,80px);align-items:center;
}

/* Media */
.aboutsec__media{position:relative;padding:0 0 clamp(34px,4vw,54px) clamp(10px,1.4vw,20px)}
.aboutsec__blob{
  position:absolute;inset:-6% -14% 8% -10%;z-index:0;
  background:rgba(238,224,202,.72);
  border-radius:54% 46% 42% 58% / 48% 54% 46% 52%;
}
.aboutsec__frame{
  position:relative;z-index:1;
  border-radius:30px;overflow:hidden;
  aspect-ratio:1/1;
  box-shadow:0 6px 12px rgba(52,34,16,.06),0 34px 60px -32px rgba(52,34,16,.55);
}
.aboutsec__frame img{width:100%;height:100%;object-fit:cover;display:block}
.aboutsec__heart{
  position:absolute;top:8%;right:9%;width:clamp(34px,3.6vw,52px);
  color:rgba(255,255,255,.92);z-index:2;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.28));
}
.aboutsec__heart svg{width:100%;height:auto;display:block}

.aboutsec__spark{position:absolute;left:-6px;bottom:clamp(74px,8vw,108px);width:40px;z-index:2}
.aboutsec__sprig{position:absolute;right:-10px;bottom:clamp(22px,3vw,42px);width:58px;z-index:2;transform:rotate(-16deg)}
.aboutsec__spark .feat__accent,
.aboutsec__sprig .feat__accent{position:static;width:100%;opacity:1}

.aboutsec__note{
  position:absolute;left:0;bottom:0;z-index:3;
  display:flex;align-items:flex-start;gap:.85rem;
  width:min(330px,88%);
  padding:1rem 1.15rem;
  background:var(--paper);border-radius:18px;
  box-shadow:0 4px 10px rgba(52,34,16,.06),0 22px 44px -26px rgba(52,34,16,.6);
}
.aboutsec__note-icon{
  width:44px;height:44px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:#f6ddc8;color:var(--rust);
}
.aboutsec__note-icon svg{width:20px;height:20px}
.aboutsec__note strong{display:block;font-size:.98rem;color:var(--ink);letter-spacing:-.015em;margin-bottom:.15em}
.aboutsec__note > span > span{display:block;font-size:.87rem;line-height:1.5;color:var(--ink-soft)}

/* Copy */
.aboutsec__title{
  position:relative;
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(1.65rem,2.9vw,2.45rem);line-height:1.14;letter-spacing:-.018em;
  color:var(--ink);margin:0 0 .5em;
}
.aboutsec__title em{position:relative;font-style:italic;color:var(--rust);font-weight:600;padding-bottom:.06em}
.aboutsec__title em .swash{position:absolute;left:2%;right:-1%;bottom:-.2em;width:102%;height:.4em;color:var(--rust);opacity:.85}
.aboutsec__title-heart{
  display:inline-block;width:.6em;margin-left:.38em;
  position:relative;top:-.38em;color:var(--rust);opacity:.85;
}
.aboutsec__title-heart svg{width:100%;height:auto;display:block}

.aboutsec__points{list-style:none;margin:clamp(20px,2.4vw,30px) 0 clamp(22px,2.6vw,32px);padding:0;display:grid;gap:clamp(14px,1.7vw,20px)}
.aboutsec__point{display:flex;align-items:flex-start;gap:.95rem;margin:0}
.aboutsec__point-icon{
  width:46px;height:46px;flex:none;display:grid;place-items:center;
  border-radius:50%;
}
.aboutsec__point-icon svg{width:20px;height:20px}
.aboutsec__point--copper .aboutsec__point-icon{background:#f6ddc8;color:var(--rust)}
.aboutsec__point--green .aboutsec__point-icon{background:#dfe6dc;color:var(--sage)}
.aboutsec__point strong{
  display:block;font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:1.05rem;letter-spacing:-.012em;color:var(--ink);margin-bottom:.1em;
}
.aboutsec__point > span > span{display:block;font-size:.91rem;line-height:1.55;color:var(--ink-soft)}

.aboutsec__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.3rem}
.aboutsec__trust{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.4rem .95rem .4rem .45rem;border-radius:var(--r-pill);
  background:var(--paper);box-shadow:0 2px 10px -4px rgba(52,34,16,.3);
  font-size:.85rem;color:var(--ink-soft);
}
.aboutsec__faces{display:inline-flex}
.aboutsec__face{
  width:34px;height:34px;border-radius:50%;overflow:hidden;
  border:2px solid var(--paper);background:var(--sand);
}
.aboutsec__face + .aboutsec__face{margin-left:-12px}
.aboutsec__face img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 12. How it works ------------------------------------------- */
.hiw{position:relative;overflow:hidden}
.hiw > .container{position:relative;z-index:1}
.hiw__paws-left{position:absolute;inset:0;pointer-events:none;z-index:0}
.hiw__paws-left .pupsec__paws{right:auto;left:-30px;bottom:8%;top:auto;transform:scaleX(-1);width:min(190px,20vw);opacity:.55}

.hiw__head{position:relative;text-align:center;max-width:66ch;margin:0 auto clamp(42px,4.4vw,64px)}
.hiw__head .lede{margin-inline:auto}
.hiw__title{
  position:relative;display:inline-block;
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(1.7rem,3.1vw,2.6rem);line-height:1.12;letter-spacing:-.018em;
  color:var(--ink);margin:0 0 .45em;
}
.hiw__title em{position:relative;font-style:italic;color:var(--rust);font-weight:600;padding-bottom:.06em}
.hiw__title em .swash{position:absolute;left:2%;right:-1%;bottom:-.2em;width:102%;height:.4em;color:var(--rust);opacity:.85}
.hiw__heart{
  display:inline-block;width:.62em;margin-left:.42em;
  position:relative;top:-.42em;color:var(--rust);opacity:.85;
}
.hiw__heart svg{width:100%;height:auto;display:block}
.hiw__heart--left{
  position:absolute;left:-1.7em;top:.22em;margin:0;width:.72em;
  transform:rotate(-16deg);opacity:.55;
}

/* Grid, with the dashed track running behind the numbered badges. */
.hiw__grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.5vw,26px);padding-top:44px}

/* The run between the badges. It curves from circle to circle rather than
   cutting straight across, and non-scaling-stroke keeps the dashes and the
   line weight constant however wide the section gets. */
.hiw__track{
  position:absolute;z-index:2;pointer-events:none;
  top:6px;left:0;right:0;height:56px;
  color:rgba(156,60,4,.5);
}
.hiw__track > svg{width:100%;height:100%;display:block}
.hiw__track-paw{
  position:absolute;width:19px;height:19px;
  transform:translate(-50%,-50%) rotate(14deg);
  color:var(--rust);opacity:.7;
}
.hiw__track-paw svg{width:100%;height:100%;display:block}
.hiw__track-paw:nth-of-type(1){left:25%;top:30%}
.hiw__track-paw:nth-of-type(2){left:50%;top:70%}
.hiw__track-paw:nth-of-type(3){left:75%;top:30%}

.hiw__card{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:#fffdfa;
  border:1px solid rgba(230,215,191,.5);
  border-radius:22px;
  padding:clamp(40px,3.4vw,52px) clamp(18px,1.9vw,28px) clamp(24px,2.4vw,32px);
  box-shadow:0 2px 3px rgba(52,34,16,.03),0 16px 34px -26px rgba(52,34,16,.42);
  transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s;
}
.hiw__card:hover{transform:translateY(-5px);box-shadow:0 3px 6px rgba(52,34,16,.04),0 26px 46px -26px rgba(52,34,16,.5)}

.hiw__num{
  position:absolute;top:-38px;left:50%;transform:translateX(-50%);z-index:3;
  width:56px;height:56px;display:grid;place-items:center;border-radius:50%;
  /* The ring is the CARD colour, not the section's. In cream it reads as a
     gap and the badge looks like it is floating above the card. */
  border:5px solid #fffdfa;
  font-size:1rem;font-weight:700;letter-spacing:.01em;color:#fff;
  font-variant-numeric:tabular-nums;
  box-shadow:0 6px 16px -8px rgba(52,34,16,.6);
}
.hiw__card--copper .hiw__num{background:var(--rust)}
.hiw__card--green .hiw__num{background:var(--sage)}

.hiw__blob{
  position:relative;display:grid;place-items:center;
  width:clamp(68px,5.8vw,86px);height:clamp(68px,5.8vw,86px);
  margin-bottom:clamp(16px,1.8vw,24px);
  border-radius:58% 42% 47% 53% / 46% 52% 48% 54%;
}
.hiw__blob svg{width:48%;height:48%}
.hiw__card--copper .hiw__blob{background:#f6ddc8;color:var(--rust)}
.hiw__card--green .hiw__blob{background:#dfe6dc;color:var(--sage)}

.hiw__card .feat__accent{
  top:clamp(34px,2.9vw,46px);
  left:auto;right:clamp(18px,2.6vw,52px);
  width:clamp(40px,3.6vw,56px);
}

.hiw__step-title{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(1.18rem,1.45vw,1.52rem);line-height:1.18;letter-spacing:-.014em;
  color:var(--ink);margin:0 0 .4em;text-wrap:balance;
}
.hiw__text{margin:0;font-size:clamp(.93rem,1vw,1rem);line-height:1.6;color:var(--ink-soft);max-width:30ch}
.hiw__rule{display:block;width:72px;height:3px;border-radius:3px;margin-top:clamp(16px,1.8vw,24px)}
.hiw__card--copper .hiw__rule{background:var(--rust)}
.hiw__card--green .hiw__rule{background:var(--sage)}

/* ---------- 13. Split blocks -------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:center}
.split--reverse .split__media{order:2}
.split__media{position:relative}
.split__media img{width:100%;border-radius:var(--r-xl);box-shadow:var(--sh);aspect-ratio:4/3;object-fit:cover}
.split__media--tall img{aspect-ratio:4/5}
.split__note{
  position:absolute;right:-16px;bottom:-18px;max-width:230px;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:.95rem 1.05rem;box-shadow:var(--sh);font-size:.85rem;line-height:1.5;color:var(--ink-soft);
}
.split__note strong{display:block;font-size:.95rem;margin-bottom:.15em}
.split ul{margin:1.1em 0 1.5em;padding:0;list-style:none}
.split ul li{display:flex;align-items:flex-start;gap:.6rem;margin:.55em 0;font-size:.95rem}
.split ul li svg{width:19px;height:19px;color:var(--sage);flex:none;margin-top:.2em}

/* ---------- 14. Reviews ------------------------------------------------- */
.revsec{position:relative;overflow:hidden}
.revsec > .container{position:relative;z-index:1}

.revsec__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:clamp(20px,3vw,44px);margin-bottom:clamp(26px,3vw,40px)}
.revsec__intro{min-width:0;max-width:60ch}
.revsec__title{
  position:relative;
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(1.7rem,3.1vw,2.6rem);line-height:1.12;letter-spacing:-.018em;
  color:var(--ink);margin:0 0 .4em;
}
.revsec__title em{position:relative;font-style:italic;color:var(--rust);font-weight:600;padding-bottom:.06em}
.revsec__title em .swash{position:absolute;left:2%;right:-1%;bottom:-.2em;width:102%;height:.4em;color:var(--rust);opacity:.85}
.revsec__heart{display:inline-block;width:.62em;margin-left:.42em;position:relative;top:-.42em;color:var(--rust);opacity:.85}
.revsec__heart svg{width:100%;height:auto;display:block}

/* Rating card */
.revsec__score{
  position:relative;flex:none;
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.5rem 1rem 1.1rem;
  background:var(--paper);border-radius:20px;
  box-shadow:0 3px 8px rgba(52,34,16,.05),0 20px 40px -26px rgba(52,34,16,.55);
}
.revsec__score-paw{
  width:56px;height:56px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:#f6ddc8;color:var(--rust);
}
.revsec__score-paw svg{width:26px;height:26px}
.revsec__score-row{display:flex;align-items:center;gap:.6rem}
.revsec__score-row b{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:1.9rem;line-height:1;letter-spacing:-.03em;color:var(--ink);
}
.revsec__score-row .stars svg{width:19px;height:19px}
.revsec__score-meta{display:block;margin-top:.3em;font-size:.88rem;color:var(--muted)}
.revsec__score .feat__accent{top:-6px;left:-30px;width:38px;color:var(--sage)}

/* Carousel */
.revsec__carousel{position:relative;padding-inline:clamp(0px,3.8vw,62px)}
.revsec__viewport{
  display:flex;gap:clamp(14px,1.6vw,24px);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px 2px 10px;margin:0 -2px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.revsec__viewport::-webkit-scrollbar{display:none}
.revsec__viewport:focus-visible{outline:2.5px solid var(--rust);outline-offset:4px;border-radius:var(--r)}

.revsec__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:52px;height:52px;display:grid;place-items:center;
  border:1px solid var(--line-soft);border-radius:50%;
  background:var(--paper);color:var(--ink);cursor:pointer;
  box-shadow:0 4px 10px rgba(52,34,16,.06),0 16px 30px -18px rgba(52,34,16,.5);
  transition:background-color .18s,color .18s,transform .18s,opacity .18s;
}
.revsec__arrow svg{width:20px;height:20px}
.revsec__arrow:hover{background:var(--rust);border-color:var(--rust);color:#fff}
.revsec__arrow--prev{left:0}
.revsec__arrow--next{right:0}
.revsec__arrow[disabled]{opacity:.35;cursor:default;pointer-events:none}

.revsec__dots{display:flex;justify-content:center;gap:.5rem;margin-top:clamp(14px,1.6vw,22px)}
.revsec__dot{
  width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--line);transition:background-color .2s,transform .2s;
}
.revsec__dot.is-active{background:var(--rust);transform:scale(1.25)}

.revsec__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;margin-top:clamp(20px,2.4vw,32px);position:relative}
.revsec__cta{position:relative;display:inline-flex}
.revsec__cta .feat__accent{top:-6px;left:calc(100% + 2px);width:36px}
.revsec__foot .heart-trail{position:relative;right:auto;top:auto;width:clamp(90px,8vw,140px)}

/* Card */
.rev-card{
  position:relative;flex:0 0 calc((100% - 2 * clamp(14px,1.6vw,24px)) / 3);
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  margin:0;padding:clamp(20px,2.1vw,30px);
  background:#fffdfa;border:1px solid rgba(230,215,191,.5);border-radius:20px;
  box-shadow:0 2px 3px rgba(52,34,16,.03),0 16px 34px -26px rgba(52,34,16,.42);
}
.rev-card__mark{position:absolute;top:18px;right:20px;width:36px;color:var(--sand-2);opacity:.85}
.rev-card__mark svg{width:100%;height:auto;display:block}
.rev-card .stars svg{width:18px;height:18px}
.rev-card__text{
  margin:.9rem 0 1.1rem;font-size:clamp(.95rem,1.02vw,1.03rem);line-height:1.65;color:var(--ink-soft);
}
.rev-card__who{display:flex;align-items:center;gap:.8rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--line-soft)}
.rev-card__avatar{
  width:46px;height:46px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  font-size:.92rem;font-weight:700;letter-spacing:-.01em;
}
.rev-card:nth-child(3n+1) .rev-card__avatar{background:#f6ddc8;color:var(--rust)}
.rev-card:nth-child(3n+2) .rev-card__avatar{background:#dfe6dc;color:var(--sage)}
.rev-card:nth-child(3n+3) .rev-card__avatar{background:#f1e2cd;color:#8a6230}
.rev-card__id strong{display:block;font-size:1rem;color:var(--ink);letter-spacing:-.015em;line-height:1.25}
.rev-card__id span{display:block;font-size:.84rem;color:var(--muted)}

/* The reviews page lists them all rather than scrolling them. */
.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);columns:auto}
.review-grid .rev-card{flex:none;scroll-snap-align:none}

.rating-summary{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem;padding:1.05rem 1.3rem;background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--sh-xs)}
.rating-summary__score{font-size:1.9rem;font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1}
.rating-summary__meta{font-size:.86rem;color:var(--muted)}

/* ---------- 15. FAQ ----------------------------------------------------- */
.faqsec{position:relative;overflow:hidden}
.faqsec > .container{position:relative;z-index:1}
.faqsec__paws-left{position:absolute;inset:0;pointer-events:none;z-index:0}
.faqsec__paws-left .pupsec__paws{right:auto;left:-30px;top:14%;transform:scaleX(-1);width:min(190px,20vw);opacity:.55}

.faqsec__head{position:relative;text-align:center;max-width:70ch;margin:0 auto clamp(30px,3.4vw,46px)}
.faqsec__head .lede{margin-inline:auto}
.faqsec__title{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(1.75rem,3.3vw,2.75rem);line-height:1.1;letter-spacing:-.018em;
  color:var(--ink);margin:0 0 .45em;
}
.faqsec__line1,.faqsec__line2{display:block}
.faqsec__line2{position:relative;display:inline-flex;align-items:baseline;justify-content:center}
.faqsec__title em{position:relative;font-style:italic;color:var(--rust);font-weight:600;padding-bottom:.06em}
.faqsec__title em .swash{position:absolute;left:0;right:0;bottom:-.18em;width:46%;height:.36em;color:var(--rust);opacity:.85}
.faqsec__heart{display:inline-block;width:.6em;margin-left:.42em;position:relative;top:-.3em;color:var(--rust);opacity:.8}
.faqsec__heart svg{width:100%;height:auto;display:block}
.faqsec__heart--left{margin:0 .42em 0 0;transform:scaleX(-1)}
.faqsec .heart-trail{right:-10%;top:-4%}

.faqsec__grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:clamp(20px,2.6vw,38px);align-items:start}
.faqsec__cta{position:relative;display:inline-flex;margin-top:clamp(16px,2vw,26px)}
.faqsec__cta .feat__accent{top:-6px;left:calc(100% + 2px);width:36px}

/* Accordion */
.faq{display:grid;gap:.7rem;max-width:none}
.faq__item{
  background:#fffdfa;border:1px solid rgba(230,215,191,.6);border-radius:18px;
  overflow:hidden;transition:border-color .2s,box-shadow .2s;
}
.faq__item[open]{border-color:rgba(156,60,4,.22);box-shadow:0 3px 6px rgba(52,34,16,.04),0 18px 36px -28px rgba(52,34,16,.5)}
.faq__q{
  display:flex;align-items:center;gap:clamp(.8rem,1.3vw,1.15rem);
  padding:clamp(.85rem,1.1vw,1.1rem) clamp(.9rem,1.2vw,1.25rem);
  cursor:pointer;list-style:none;
}
.faq__q::-webkit-details-marker{display:none}
.faq__num{
  width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;
  font-size:.92rem;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--sand-2);color:var(--muted);transition:background-color .2s,color .2s;
}
.faq__item:nth-child(odd) .faq__num{background:#f6ddc8;color:var(--rust)}
.faq__item:nth-child(even) .faq__num{background:#dfe6dc;color:var(--sage)}
.faq__item[open] .faq__num{background:var(--rust);color:#fff}
.faq__text{
  flex:1;min-width:0;
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(1.02rem,1.18vw,1.2rem);line-height:1.3;letter-spacing:-.012em;color:var(--ink);
}
.faq__chev{
  width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:#f6ddc8;color:var(--rust);transition:transform .25s,background-color .2s;
}
.faq__chev svg{width:18px;height:18px}
.faq__item[open] .faq__chev{transform:rotate(180deg)}
.faq__a{
  padding:0 clamp(.9rem,1.2vw,1.25rem) clamp(.9rem,1.2vw,1.2rem);
}
.faq__a p{
  margin:0;padding:clamp(.95rem,1.3vw,1.25rem) clamp(1rem,1.4vw,1.4rem);
  background:var(--rust-tint);border-radius:14px;
  font-size:clamp(.94rem,1.02vw,1.02rem);line-height:1.68;color:var(--ink-soft);
}

/* Why panel */
.whypanel{
  position:relative;
  background:#fffdfa;border:1px solid rgba(230,215,191,.6);border-radius:22px;
  padding:clamp(22px,2.2vw,32px) clamp(18px,2vw,28px);
  box-shadow:0 2px 4px rgba(52,34,16,.03),0 18px 38px -28px rgba(52,34,16,.45);
}
.whypanel__sprig{position:absolute;top:-26px;right:-6px;width:clamp(54px,5vw,72px);color:var(--sage);opacity:.85}
.whypanel__sprig svg{width:100%;height:auto;display:block}
.whypanel__title{
  position:relative;display:inline-flex;align-items:center;gap:.3em;
  font-family:'Allura',cursive;font-weight:400;
  font-size:clamp(1.7rem,2.3vw,2.2rem);line-height:1.15;letter-spacing:.01em;
  color:var(--ink);margin:0 0 1.1rem;padding:.1em .5em .15em;
}
.whypanel__title > span,.whypanel__heart{position:relative;z-index:1}
.whypanel__brush{
  position:absolute;inset:0 -2% 8% -4%;z-index:0;
  background:#dfe6dc;
  border-radius:48% 52% 44% 56% / 58% 42% 58% 42%;
}
.whypanel__heart{display:inline-block;width:.6em;color:var(--rust);opacity:.85;position:relative;top:.06em}
.whypanel__heart svg{width:100%;height:auto;display:block}

.whypanel__list{list-style:none;margin:0;padding:0;display:grid}
.whypanel__item{display:flex;align-items:flex-start;gap:.9rem;margin:0;padding:.95rem 0;border-top:1px solid var(--line-soft)}
.whypanel__item:first-child{border-top:0;padding-top:0}
.whypanel__item:last-child{padding-bottom:0}
.whypanel__icon{width:50px;height:50px;flex:none;display:grid;place-items:center;border-radius:50%}
.whypanel__icon svg{width:22px;height:22px}
.whypanel__item--copper .whypanel__icon{background:#f6ddc8;color:var(--rust)}
.whypanel__item--green .whypanel__icon{background:#dfe6dc;color:var(--sage)}
.whypanel__item strong{display:block;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.03rem;letter-spacing:-.012em;color:var(--ink);margin-bottom:.1em}
.whypanel__item > span > span{display:block;font-size:.89rem;line-height:1.55;color:var(--ink-soft)}

/* ---------- 16. CTA band ------------------------------------------------ */
.ctasec{position:relative;overflow:hidden}
.ctasec__panel{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,27%,420px);
  background:linear-gradient(100deg,#fffdf8 0%,#fdf6ea 62%,#f8ecdb 100%);
  border-radius:30px;overflow:hidden;
  box-shadow:0 4px 10px rgba(52,34,16,.04),0 30px 60px -34px rgba(52,34,16,.5);
}
.ctasec__paw{position:absolute;right:30%;top:12%;width:92px;color:var(--sand-2);opacity:.6;pointer-events:none}
.ctasec__paw svg{width:100%;height:auto;display:block}

.ctasec__copy{position:relative;z-index:1;padding:clamp(28px,3.4vw,52px) clamp(22px,2.6vw,46px)}
.ctasec__title{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(1.6rem,2.9vw,2.5rem);line-height:1.12;letter-spacing:-.018em;
  color:var(--ink);margin:0 0 .5em;
}
.ctasec__title em{font-style:italic;color:var(--rust);font-weight:600}
.ctasec__heart{display:inline-block;width:.6em;margin-left:.4em;position:relative;top:-.38em;color:var(--rust);opacity:.85}
.ctasec__heart svg{width:100%;height:auto;display:block}

.ctasec__row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,1.8vw,26px)}
.ctasec__text{margin:0;max-width:44ch;font-size:var(--fs-lede);line-height:1.62;color:var(--ink-soft)}
.ctasec__arrow{width:64px;flex:none;color:var(--rust);opacity:.8}
.ctasec__arrow svg{width:100%;height:auto;display:block}
.ctasec__buttons{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.ctasec__buttons .btn--light{border-color:var(--line-soft);box-shadow:0 8px 22px -14px rgba(52,34,16,.7)}

.ctasec__media{position:relative}
.ctasec__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ctasec__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#fdf6ea 0%,rgba(253,246,234,.55) 26%,rgba(253,246,234,0) 62%);
}

/* ---------- 16b. Footer ------------------------------------------------- */
.site-footer{
  position:relative;overflow:hidden;
  background:var(--brown-deep);color:#cdbba6;
  padding-block:clamp(44px,5vw,70px) 0;
}
.site-footer__paws{position:absolute;inset:0;pointer-events:none;z-index:0;color:rgba(255,255,255,.05)}
.site-footer__paws .pupsec__paws{top:16%;right:26%;width:min(300px,28vw);color:inherit;opacity:1}
.site-footer > .container{position:relative;z-index:1}
.site-footer a{color:#e3d5c4;text-decoration:none}
.site-footer a:hover{color:#fff}

.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:clamp(26px,3.4vw,52px)}
.footer-brand .brand__name{color:#fff}
.footer-brand .brand__tag{color:#a4917c}
.footer-brand .brand__mark{color:var(--gold-light)}
.footer-brand .brand img.custom-logo{
  max-height:96px;
  background:#fdf7ec;
  padding:10px 16px;
  border-radius:16px;
}
.footer-about{font-size:.9rem;line-height:1.7;margin:1.1rem 0 1.25rem;max-width:38ch;color:#c4b19c}
.footer-social{display:flex;gap:.55rem}
.footer-social a{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.08);color:#e9dccb;transition:background-color .2s,transform .2s}
.footer-social a:hover{background:var(--rust);color:#fff;transform:translateY(-2px)}
.footer-social svg{width:17px;height:17px}

.footer-col h4{font-size:.74rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-light);margin-bottom:1.15rem}
.footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:.62rem}
.footer-col li{margin:0;font-size:.92rem}
.footer-contact{display:grid;gap:.85rem;font-size:.92rem}
.footer-contact div{display:flex;gap:.65rem;align-items:flex-start}
.footer-contact svg{width:16px;height:16px;color:var(--gold-light);flex:none;margin-top:.26em}
.footer-cta{position:relative;display:inline-flex;margin-top:1.3rem}
.footer-cta .feat__accent{top:-8px;left:calc(100% + 2px);width:34px;color:var(--gold-light)}

/* A rule between the link columns, as in the mockup. */
.footer-grid > .footer-col:nth-child(2),
.footer-grid > .footer-col:nth-child(3){border-left:1px solid rgba(255,255,255,.1);padding-left:clamp(18px,2.4vw,38px)}

.footer-bottom{
  margin-top:clamp(32px,3.8vw,52px);padding-block:1.3rem;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;
  font-size:.82rem;color:#b09b85;
}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}

/* ---------- 17. Page header --------------------------------------------- */
.page-hero{position:relative;background:var(--sand);padding-block:clamp(38px,4.6vw,64px) clamp(34px,4.2vw,58px);border-bottom:1px solid var(--line-soft);overflow:hidden}
.page-hero::before{content:"";position:absolute;right:-9%;top:-56%;width:min(520px,56vw);aspect-ratio:1;background:radial-gradient(circle,rgba(156,60,4,.11),transparent 68%);border-radius:50%}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{margin-bottom:.35em}
.page-hero .lede{margin-bottom:0}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.42rem;font-size:.79rem;color:var(--muted);margin:0 0 1.05rem;padding:0;list-style:none}
.crumbs li{display:flex;align-items:center;gap:.42rem;margin:0}
.crumbs li+li::before{content:"/";color:var(--line);font-weight:400}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--rust)}
.crumbs [aria-current]{color:var(--ink);font-weight:500}

/* ---------- 18. Prose (policy & content pages) -------------------------- */
.prose{max-width:72ch;font-size:1.005rem}
.prose>h2{margin-top:2.1em;font-size:clamp(1.3rem,1.9vw,1.6rem)}
.prose>h2:first-child{margin-top:0}
.prose>h3{margin-top:1.7em;font-size:clamp(1.08rem,1.4vw,1.22rem)}
.prose>h4{margin-top:1.5em}
.prose ul,.prose ol{padding-left:1.15em}
.prose li{margin:.45em 0}
.prose a{color:var(--rust);font-weight:500}
.prose img{border-radius:var(--r);margin:1.6em 0}
.prose hr{margin:2.4em 0}
.prose .wp-caption-text,.prose figcaption{font-size:.84rem;color:var(--muted);text-align:center;margin-top:.6em}

.page-layout{display:grid;grid-template-columns:minmax(0,1fr) 308px;gap:clamp(28px,4vw,58px);align-items:start}
.page-aside{position:sticky;top:112px;display:grid;gap:1rem}
.aside-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:1.25rem 1.3rem;box-shadow:var(--sh-xs)}
.aside-card h3{font-size:1.02rem;margin-bottom:.6em}
.aside-card p{font-size:.9rem}
.aside-card ul{list-style:none;padding:0;margin:0 0 1rem}
.aside-card ul li{display:flex;gap:.55rem;align-items:flex-start;font-size:.89rem;margin:.5em 0}
.aside-card ul li svg{width:17px;height:17px;color:var(--sage);flex:none;margin-top:.22em}
.aside-card--ink{background:var(--ink);border-color:var(--ink);color:#d8ccbe}
.aside-card--ink h3{color:#fff}

/* ---------- 19. Single puppy -------------------------------------------- */
.puppy-single{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(26px,3.6vw,56px);align-items:start}
.puppy-gallery__main{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh);background:var(--sand);aspect-ratio:4/5}
.puppy-gallery__main img{width:100%;height:100%;object-fit:cover}
.puppy-gallery__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.puppy-gallery__thumbs button{padding:0;border:2px solid transparent;border-radius:var(--r-sm);overflow:hidden;cursor:pointer;background:none;aspect-ratio:1;transition:border-color .18s}
.puppy-gallery__thumbs button img{width:100%;height:100%;object-fit:cover}
.puppy-gallery__thumbs button.is-active{border-color:var(--rust)}

.puppy-detail__price{display:flex;align-items:baseline;gap:.6rem;margin:0 0 1.05rem}
.puppy-detail__price b{font-size:2rem;font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1}
.puppy-detail__price span{font-size:.85rem;color:var(--muted)}
.spec-table{width:100%;margin:1.4rem 0;border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;font-size:.92rem}
.spec-table tr:nth-child(odd){background:var(--cream)}
.spec-table th{width:42%;background:transparent;font-weight:500;color:var(--muted);border-bottom:1px solid var(--line-soft);padding:.72rem 1rem}
.spec-table td{font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-soft);padding:.72rem 1rem}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}

.includes{display:grid;gap:.55rem;margin:1.3rem 0 1.6rem;padding:0;list-style:none}
.includes li{display:flex;align-items:flex-start;gap:.6rem;font-size:.93rem}
.includes li svg{width:18px;height:18px;color:var(--sage);flex:none;margin-top:.22em}

/* ---------- 20. Forms --------------------------------------------------- */
.form{display:grid;gap:1rem}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
/* align-content:start matters: a grid's default is stretch, so a field that
   ends up taller than its neighbour (a select next to an input) distributes the
   extra height into its own rows and pushes its control down — which is what
   knocks a two-column row out of alignment. */
.field{display:grid;gap:.4rem;align-content:start}
.field label{font-size:.85rem;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.4;min-height:1.4em}
.field label .req{color:var(--rust)}
.field input,.field select,.field textarea{
  width:100%;padding:.72rem .95rem;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-sm);
  font-size:.95rem;line-height:1.5;color:var(--ink);
  transition:border-color .18s,box-shadow .18s;
}
/* One shared height for inputs and selects, or a select renders a couple of
   pixels taller and the column stops lining up. */
.field input,.field select{height:48px;padding-block:0}
.field select{
  appearance:none;-webkit-appearance:none;padding-right:2.4rem;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c3c04' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:16px 16px;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--rust);box-shadow:0 0 0 3px rgba(156,60,4,.13)}
.field textarea{min-height:128px;resize:vertical;line-height:1.6}
.field--hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__consent{display:flex;align-items:flex-start;gap:.6rem;font-size:.84rem;color:var(--muted);line-height:1.55}
.form__consent input{width:17px;height:17px;flex:none;margin-top:.2em;accent-color:var(--rust)}
.form__note{font-size:.8rem;color:var(--muted)}

.notice{padding:.95rem 1.15rem;border-radius:var(--r-sm);font-size:.92rem;border:1px solid transparent}
.notice--ok{background:var(--sage-tint);border-color:#d6dfce;color:#3f5134}
.notice--err{background:#fbeae6;border-color:#f3d2c8;color:#8d3a22}

/* ---------- 21. Contact ------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(26px,3.6vw,56px);align-items:start}
.contact-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,32px);box-shadow:var(--sh-sm)}
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:1.05rem}
.contact-list li{display:flex;gap:.9rem;align-items:flex-start;margin:0}
.contact-list__icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--rust-tint);color:var(--rust);flex:none}
.contact-list__icon svg{width:18px;height:18px}
.contact-list__label{display:block;font-size:.74rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.2em}
.contact-list__value{display:block;margin:0;font-size:.98rem;font-weight:500;color:var(--ink);line-height:1.5}
.contact-list a{text-decoration:none}
.contact-list a:hover{color:var(--rust)}

/* ---------- 22. Blog ---------------------------------------------------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));gap:clamp(18px,2.2vw,28px)}
.post-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-xs);transition:transform .24s,box-shadow .24s}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--sh-sm)}
.post-card__media{aspect-ratio:16/10;overflow:hidden;background:var(--sand)}
.post-card__media img{width:100%;height:100%;object-fit:cover}
.post-card__body{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.post-card__date{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.post-card h3{font-size:1.1rem;margin:0}
.post-card h3 a{text-decoration:none}
.post-card p{font-size:.9rem;margin:0}

.pagination{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:2.4rem;justify-content:center}
.pagination .page-numbers{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 .7rem;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);font-size:.9rem;font-weight:600;text-decoration:none;color:var(--ink)}
.pagination .page-numbers:hover{border-color:var(--ink)}
.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- 23. Footer -------------------------------------------------- */
.site-footer{background:var(--ink);color:#b9ab9c;padding-block:clamp(44px,5vw,70px) 0;margin-top:0}
.site-footer a{color:#d9cfc3;text-decoration:none}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:clamp(26px,3.4vw,52px)}
.footer-brand .brand__name{color:#fff}
.footer-brand .brand__tag{color:#9a8a76}
.footer-brand .brand__mark{color:var(--gold-light)}
.footer-brand .brand img.custom-logo{
  max-height:96px;
  background:#fdf7ec;
  padding:10px 16px;
  border-radius:16px;
}
.footer-about{font-size:.9rem;line-height:1.7;margin:1.1rem 0 1.25rem;max-width:38ch}
.footer-social{display:flex;gap:.55rem}
.footer-social a{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.07);color:#e4d9cb;transition:background-color .2s,transform .2s}
.footer-social a:hover{background:var(--rust);color:#fff;transform:translateY(-2px)}
.footer-social svg{width:17px;height:17px}
.footer-col h4{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:1.1rem}
.footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.footer-col li{margin:0;font-size:.9rem}
.footer-contact{display:grid;gap:.85rem;font-size:.9rem}
.footer-contact div{display:flex;gap:.65rem;align-items:flex-start}
.footer-contact svg{width:16px;height:16px;color:var(--gold);flex:none;margin-top:.26em}
.footer-bottom{margin-top:clamp(32px,3.8vw,52px);padding-block:1.3rem;border-top:1px solid rgba(255,255,255,.09);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;font-size:.82rem}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}

/* ---------- 24. Floating call button (mobile) --------------------------- */
.call-fab{
  position:fixed;right:16px;bottom:16px;z-index:880;display:none;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .25s,transform .25s,visibility .25s;
  align-items:center;gap:.5em;padding:.78rem 1.2rem;border-radius:var(--r-pill);
  background:var(--rust);color:#fff;font-weight:600;font-size:.93rem;text-decoration:none;
  box-shadow:0 14px 30px -12px rgba(124,44,4,.9);
}
.call-fab.is-visible{opacity:1;visibility:visible;transform:none}
.call-fab svg{width:1.05em;height:1.05em}

/* ---------- 24a. Checkout, payment options and orders ------------------- */
.checkout{display:grid;grid-template-columns:minmax(0,1fr) 358px;gap:clamp(24px,3.4vw,52px);align-items:start}
.checkout__form{gap:clamp(1rem,1.6vw,1.4rem)}
.checkout__block{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:clamp(18px,2.4vw,28px);box-shadow:var(--sh-xs);margin-bottom:0;
}
.checkout__block h2{display:flex;align-items:center;gap:.65rem;font-size:var(--fs-h3);margin-bottom:1.1rem}
.checkout__step{
  width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--rust-tint);color:var(--rust);font-size:.88rem;font-weight:700;
}
.checkout__block .field{margin:0 0 1rem}
.checkout__block .field:last-child{margin-bottom:0}
.checkout__block .form__row{margin-bottom:1rem}
.checkout__block .form__row:last-child{margin-bottom:0}
.checkout__form .form__note{margin:0}
.checkout__form .btn-row{margin-top:.2rem}
.checkout__summary{position:sticky;top:112px}

.pay-list{display:grid;gap:.6rem}
.pay-option{
  display:flex;align-items:center;gap:.9rem;
  padding:.85rem 1.1rem;border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--cream);cursor:pointer;
  transition:border-color .18s,background-color .18s,box-shadow .18s;
}
.pay-option:hover{border-color:var(--rust)}
.pay-option:has(input:checked){border-color:var(--rust);background:var(--rust-tint);box-shadow:0 0 0 3px rgba(156,60,4,.1)}
.pay-option input{width:19px;height:19px;flex:none;accent-color:var(--rust)}
.pay-option__icon{
  width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;
  background:var(--paper);border:1px solid var(--line-soft);color:var(--rust);
}
.pay-option__icon svg{width:21px;height:21px}
/* Brand marks carry their own colour and must not inherit the copper. */
.pay-option__icon .icon--brand{width:22px;height:22px}
.pay-option__text{display:flex;flex-direction:column;gap:.18rem;min-width:0}
.pay-option__label{font-weight:600;color:var(--ink);font-size:.98rem;letter-spacing:-.015em}
.pay-option__blurb{font-size:.87rem;color:var(--ink-soft);line-height:1.55}
.pay-option--static{cursor:default;background:var(--paper);align-items:flex-start}
.pay-option--static:hover{border-color:var(--line)}
.pay-list--static{gap:.75rem}

.pay-details{
  display:grid;gap:.25rem;margin-top:.7rem;padding:.8rem 1rem;
  background:var(--sand);border-radius:var(--r-sm);
  font-size:.9rem;color:var(--ink);font-weight:500;
}
.pay-instructions h2{display:flex;align-items:center;gap:.6rem}
.pay-instructions h2 svg{width:22px;height:22px;color:var(--rust)}

.order-card{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:clamp(18px,2.2vw,26px);box-shadow:var(--sh-sm);
}
.order-card h2{font-size:var(--fs-h3);margin-bottom:1rem}
.order-card h3{font-size:.98rem;margin:1.3rem 0 .6em}
.order-card__ref{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  font-size:.86rem;color:var(--muted);margin:-.4rem 0 1rem;
}
.order-card__item{display:flex;align-items:center;gap:.9rem;padding-bottom:1rem;border-bottom:1px solid var(--line-soft)}
.order-card__thumb{width:62px;height:62px;flex:none;border-radius:14px;overflow:hidden;background:var(--sand)}
.order-card__thumb img{width:100%;height:100%;object-fit:cover}
.order-card__item strong{display:block;font-size:1.02rem;letter-spacing:-.02em}
.order-card__meta{display:block;font-size:.84rem;color:var(--muted);margin-top:.15em}
.order-card__totals{margin:1rem 0 0;display:grid;gap:.55rem}
.order-card__totals div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.order-card__totals dt{font-size:.9rem;color:var(--muted)}
.order-card__totals dd{margin:0;font-size:.95rem;font-weight:600;color:var(--ink)}
.order-card__total{padding-top:.7rem;border-top:1px solid var(--line-soft)}
.order-card__total dt{font-size:1rem;color:var(--ink);font-weight:600}
.order-card__total dd{font-size:1.3rem;font-weight:700;letter-spacing:-.035em}
.order-card__safe{display:flex;gap:.6rem;align-items:flex-start;margin-top:1.2rem;font-size:.84rem;color:var(--muted);line-height:1.5}
.order-card__safe svg{width:17px;height:17px;color:var(--sage);flex:none;margin-top:.18em}

.order-steps{margin:0;padding-left:1.2em;display:grid;gap:.75rem}
.order-steps li{font-size:.93rem;color:var(--ink-soft)}
.order-steps strong{display:block;color:var(--ink);font-size:.98rem;letter-spacing:-.015em}

.puppy-detail__pay{
  display:flex;gap:.6rem;align-items:flex-start;margin:1.2rem 0 0;
  font-size:.88rem;color:var(--muted);line-height:1.55;
}
.puppy-detail__pay svg{width:18px;height:18px;color:var(--sage);flex:none;margin-top:.18em}
.puppy-detail__pay a{color:var(--rust);font-weight:600;white-space:nowrap}

/* ---------- 24b. Archive filter bar ------------------------------------- */
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:clamp(20px,2.4vw,32px)}
.filter-chip{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.5rem .95rem;border-radius:var(--r-pill);
  background:var(--paper);border:1.5px solid var(--line);
  font-size:.875rem;font-weight:600;letter-spacing:-.01em;color:var(--ink-soft);
  cursor:pointer;transition:background-color .18s,border-color .18s,color .18s;
}
.filter-chip:hover{border-color:var(--ink);color:var(--ink)}
.filter-chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.filter-count{margin:0;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.filter-empty{
  margin:1.6rem 0 0;padding:1.3rem 1.5rem;
  background:var(--paper);border:1px dashed var(--line);border-radius:var(--r);
  color:var(--muted);font-size:.95rem;max-width:62ch;
}
.pcard[hidden]{display:none}

/* ---------- 24c. Blog sidebar widgets ----------------------------------- */
.widget ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.widget li{font-size:.9rem}
.widget a{text-decoration:none}
.widget a:hover{color:var(--rust)}
.search-form{display:flex;gap:.5rem}
.search-form input[type="search"]{flex:1;min-width:0;padding:.7rem .9rem;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--paper);font-size:.93rem}
.search-form input[type="search"]:focus{outline:0;border-color:var(--rust)}
.search-form button{flex:none;padding:.7rem 1rem;border:0;border-radius:var(--r-sm);background:var(--ink);color:#fff;font-weight:600;font-size:.9rem;cursor:pointer}

/* ---------- 25. Responsive ---------------------------------------------- */
@media (max-width:1180px){
  .brand img.custom-logo{max-height:60px}
  .nav>li>a{padding:.6rem .6rem;font-size:.9rem}
}
@media (max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid > .footer-col:nth-child(3){border-left:0;padding-left:0}
  .ctasec__panel{grid-template-columns:1fr}
  .ctasec__media{height:260px;order:-1}
  .ctasec__media img{position:relative}
  .ctasec__media::after{background:linear-gradient(0deg,#fdf6ea 0%,rgba(253,246,234,.4) 40%,rgba(253,246,234,0) 100%)}
  .ctasec__arrow{display:none}
  .review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rev-card{flex:0 0 calc((100% - clamp(14px,1.6vw,24px)) / 2)}
  .page-layout{grid-template-columns:minmax(0,1fr) 274px}
}
@media (max-width:980px){
  .nav,.header-phone{display:none}
  .burger{display:inline-flex}
  /* Phone header is logo + menu only — the CTA lives in the drawer. */
  .header-actions .btn{display:none}
  /* Phone hero: everything centres, the photograph sits underneath. */
  .hero{align-items:flex-start;text-align:center}
  .hero__copy{max-width:none;margin-inline:auto}
  .hero__copy h1{font-size:clamp(1.8rem,min(7.8vw,5vh),2.7rem)}
  .hero__copy .lede{max-width:42ch;margin-inline:auto;font-size:clamp(.9rem,min(3.6vw,1.95vh),1rem)}
  .hero__title-l2{justify-content:center}

  /* Paw above, label flanked by rules, all centred. */
  .hero__copy .eyebrow--paw{flex-direction:column;gap:.4em;justify-content:center}
  .hero__copy .eyebrow{font-size:.63rem;letter-spacing:.15em}
  .hero__copy .eyebrow__label{justify-content:center;flex-wrap:nowrap;white-space:nowrap}
  .hero__copy .eyebrow__label::before,
  .hero__copy .eyebrow__label::after{width:18px}
  .hero__copy .eyebrow__label::after{content:"";width:22px;height:1.5px;background:currentColor;border-radius:2px;flex:none}

  /* Icon above the label, three abreast, divided. */
  .hero__pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;justify-items:center}
  .hero__pill{flex-direction:column;align-items:center;text-align:center;gap:.45rem;padding:0 .35rem}
  .hero__pill + .hero__pill{border-left:1px solid rgba(124,44,4,.2);padding-left:.35rem}
  .hero__pill-text{align-items:center}
  .hero__pill-icon{width:54px;height:54px}
  .hero__pill-icon svg{width:50%;height:50%}

  /* Price and rating centred, split by a rule. */
  .hero__meta{justify-content:center;gap:.5rem 1rem}
  .hero__rating{padding-left:1rem;border-left:1px solid rgba(124,44,4,.2)}

  /* One button on a phone, centred. It still sizes to its text. */
  .hero .btn-row{flex-direction:column;align-items:center;gap:.6rem}
  .hero .btn-row .btn{width:min(340px,100%);justify-content:center}
  .hero .btn-row .btn + .btn{display:none}
  /* On a phone the copy fills nearly the whole hero, so no gradient can keep
     text off the fur. The photograph becomes a band underneath the copy
     instead: full contrast above, a clean picture below, and the section still
     fits the viewport because the band takes only what is left over. */
  .hero{display:flex;flex-direction:column;align-items:stretch;padding-bottom:0}
  .hero > .container{flex:0 0 auto;order:1}
  /* No photograph on a phone — copy only, on cream. */
  .hero__bg{display:none}
  .hero{background:var(--cream)}
  .hero__heart{width:.58em;opacity:.95}
  .puppy-single{grid-template-columns:1fr;gap:30px}
  .contact-grid{grid-template-columns:1fr}
  .checkout{grid-template-columns:1fr}
  .checkout__summary{position:static;order:-1}
  .page-layout{grid-template-columns:1fr}
  .page-aside{position:static;grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
  .split{grid-template-columns:1fr;gap:28px}
  .aboutsec__grid{grid-template-columns:1fr;gap:clamp(44px,6vw,64px)}
  .aboutsec__media{max-width:520px;margin-inline:auto}
  .aboutsec__blob{inset:-4% -8% 6% -8%}
  .split--reverse .split__media{order:0}
  .split__note{position:static;max-width:none;margin-top:1rem}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat-grid,.feat-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faqsec__grid{grid-template-columns:1fr}
  .hiw__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:76px}
  .hiw__track{display:none}
  /* Stacked, the journey runs down the gap between the badges. */
  .hiw__card + .hiw__card::before{
    content:"";position:absolute;z-index:0;
    left:50%;transform:translateX(-50%);
    top:-72px;width:2px;height:32px;
    background:repeating-linear-gradient(180deg,
      rgba(156,60,4,.5) 0 7px,
      rgba(156,60,4,0) 7px 15px);
  }
  .heart-trail{display:none}
  .hiw__heart--left{display:none}
  .step::after{display:none}
  .call-fab{display:inline-flex}
}
@media (max-width:760px){
  .grid--3,.grid--2{grid-template-columns:1fr}
  .feat-grid,.feat-grid--3{grid-template-columns:1fr}
  .hiw__grid{grid-template-columns:1fr;row-gap:76px}
  .whysec__paws-left,.hiw__paws-left{display:none}
  .aboutsec__note{position:static;width:auto;margin-top:1rem}
  .aboutsec__media{padding-bottom:0}
  .aboutsec__spark{display:none}
  .review-grid{grid-template-columns:1fr}
  .rev-card{flex:0 0 100%}
  .revsec__arrow{display:none}
  .revsec__carousel{padding-inline:0}
  .revsec__head{flex-direction:column}
  .form__row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .footer-grid > .footer-col{border-left:0!important;padding-left:0!important}
  /* The utility bar costs a third of a phone screen before anything useful. */
  .topbar{display:none}
  .cta-band__inner{flex-direction:column;align-items:flex-start}
  .pupsec__head{flex-direction:column}
  .pupsec__aside{align-items:flex-start}
  .pupsec__note{text-align:left;flex-direction:row-reverse}
  .pupsec__paws{width:150px;opacity:.5}
}
@media (max-width:560px){
  .puppy-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
  .pcard__name{font-size:1.3rem}
  .pcard__price b{font-size:1.45rem}
  .header-inner{min-height:72px}
  .brand__mark{width:40px;height:40px}
  .brand img.custom-logo{max-height:52px}
  .brand__name{font-size:1.04rem}
  .hero .btn--lg{padding:.7rem 1.1rem;font-size:.9rem}
  .hero__pill-icon{width:48px;height:48px}
  .hero__pill-text strong{font-size:.82rem;line-height:1.25}
  .hero__pill-text span{font-size:.72rem}
  .hero__heart{width:.54em}
  .puppy-gallery__thumbs{grid-template-columns:repeat(4,1fr);gap:8px}
}
@media (max-width:400px){
  .puppy-grid{grid-template-columns:1fr}
  .brand__tag{display:none}
}
/* 360x740 is the shortest phone in common use and the hero was 20px over
   there. Spacing shrinks; no line of copy is removed to make it fit. */
@media (max-width:380px){
  .hero__copy .lede{font-size:.88rem;margin-bottom:.7rem}
  .hero__pills{margin-bottom:.6rem}
  .hero__pill-icon{width:42px;height:42px}
  .hero__pill-text strong{font-size:.76rem}
  .hero__pill-text span{font-size:.68rem}
  .hero__copy .lede{font-size:.86rem;margin-bottom:.6rem}
  .hero__copy .eyebrow{margin-bottom:.45rem}
  .hero__meta{margin-bottom:.6rem}
  .hero__meta{margin-bottom:.7rem;gap:.35rem .8rem}
  .hero .btn--lg{padding:.62rem 1rem;font-size:.86rem}
  .hero .eyebrow{margin-bottom:.5rem}
}

/* ---------- 26. Motion & print ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{
  .site-header,.site-footer,.call-fab,.mobile-nav,.nav-scrim,.cta-band{display:none!important}
  body{background:#fff;color:#000}
  .container{max-width:none}
}

/* Reveal-on-scroll never gates content: the visible state is the default and
   JS only adds the "pre" class when it is actually going to animate. */
.reveal-ready .reveal{opacity:0;transform:translateY(16px)}
.reveal-ready .reveal.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}