/* =====================================================================
   home.css — STAGING redesign for DogCompatibility.com
   Warm editorial visual system. Presentation-only: reuses the existing
   Fraunces (display) + Inter (body) fonts and the .btn / layout primitives
   from style.css, and re-tints the shared design tokens to the new palette.
   Palette: Ink #17211B · Forest #244936 · Moss #52734D · Cream #F6F1E7
            Terracotta #C76F4D · White
   ===================================================================== */

:root{
  --ink:#17211B;
  --ink-2:#374a40;
  --muted:#6d7d73;
  --muted-2:#93a29a;
  --surface:#ffffff;
  --surface-2:#F6F1E7;          /* cream */
  --cream:#F6F1E7;
  --cream-2:#efe7d6;
  --border:#e4ddcc;
  --forest:#244936;
  --moss:#52734D;
  --terracotta:#C76F4D;
  --accent:#244936;             /* forest = primary */
  --accent-rgb:36,73,54;
  --accent-2:#52734D;
  --shadow:0 1px 2px rgba(23,33,27,.05), 0 6px 20px rgba(23,33,27,.06);
  --shadow-lg:0 12px 40px rgba(23,33,27,.12), 0 3px 10px rgba(23,33,27,.06);
  --radius:16px;
  --radius-lg:22px;
}

body{background:var(--surface);color:var(--ink)}

/* keep the primary button forest-green and confident everywhere it appears */
.btn-primary{
  background:var(--forest);border-color:var(--forest);color:#fff;
}
.btn-primary:hover{background:#1c3a2b;border-color:#1c3a2b}

/* --- generic layout helpers --------------------------------------- */
.hp-wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.hp-narrow{max-width:760px;margin-left:auto;margin-right:auto}
.hp-section{padding:74px 0}
.hp-section-tight{padding:48px 0}
.hp-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--moss);margin-bottom:16px;
  font-family:'Inter',system-ui,sans-serif;
}
.hp-h2{font-family:'Fraunces',Georgia,serif;font-size:2rem;line-height:1.12;margin:0 0 18px;color:var(--ink);letter-spacing:-.01em}
.hp-p{color:var(--ink-2);font-size:1.06rem;line-height:1.7;margin:0 0 16px}
.hp-p:last-child{margin-bottom:0}
.hp-example .hp-head.hp-center .hp-p.hp-narrow{margin-left:auto;margin-right:auto}
.hp-head{margin-bottom:26px}
.hp-head.hp-center{text-align:center}
.hp-head.hp-center .hp-eyebrow{justify-content:center}
.hp-textlink{color:var(--forest);font-weight:600}
.hp-textlink:hover{text-decoration:underline}

/* =====================================================================
   NAVIGATION
   ===================================================================== */
.hp-nav{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--border);
}
.hp-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.hp-brand{display:inline-flex;align-items:center;gap:10px;font-family:'Fraunces',Georgia,serif;
  font-weight:600;font-size:1.12rem;color:var(--ink);letter-spacing:-.01em}
.hp-brand .dot{width:30px;height:30px;border-radius:9px;background:var(--forest);color:#fff;
  display:inline-flex;align-items:center;justify-content:center}
.hp-nav-links{display:none;align-items:center;gap:26px}
.hp-nav-links a{color:var(--ink-2);font-weight:500;font-size:.95rem}
.hp-nav-links a:hover{color:var(--forest)}
.hp-nav-cta{
  display:inline-flex;align-items:center;background:var(--forest);color:#fff!important;
  font-weight:600;padding:9px 18px;border-radius:10px;font-size:.92rem;
}
.hp-nav-cta:hover{background:#1c3a2b}
.hp-nav-toggle{display:inline-flex;background:none;border:0;color:var(--ink);cursor:pointer;padding:6px}
@media(min-width:900px){
  .hp-nav-links{display:flex}
  .hp-nav-toggle{display:none}
}

/* =====================================================================
   HERO
   ===================================================================== */
/* Page-level guard: clip any horizontal overflow (e.g. an absolutely-positioned
   help tooltip near a right-edge filter chip) so there is never a horizontal
   scrollbar at any viewport width. overflow-x:clip leaves vertical scrolling and
   sticky positioning untouched. */
main{overflow-x:clip}
.hp-hero{
  position:relative;                 /* positioning context for the video stage */
  overflow:hidden;                   /* clip the traveler -> no page overflow    */
  background:
    radial-gradient(1100px 460px at 50% -8%, #eef3ec, transparent 60%),
    linear-gradient(180deg,#fbf9f3,var(--cream));
  border-bottom:1px solid var(--border);
}
/* Copy lives in the UPPER-LEFT / left portion of the hero (not spread across
   the full width). The transparent walking dog crosses the whole hero on its
   own full-viewport runway IN FRONT of this copy. Proof points are pinned to
   the hero bottom (margin-top:auto) as quiet credibility markers beneath the
   dog's path. min-height reserves vertical space so the video causes no layout
   shift (CLS) while it loads, and keeps the desktop hero ~660-720px tall. */
.hp-hero-inner{
  position:relative;z-index:2;
  text-align:left;max-width:1120px;margin:0 auto;
  padding:60px 22px 40px;
  min-height:600px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
}
.hp-hero-copy{display:flex;flex-direction:column;align-items:flex-start}
.hp-hero-copy-top{max-width:36rem}
.hp-hero-copy-bottom{margin-top:26px}
.hp-hero h1{
  font-family:'Fraunces',Georgia,serif;font-size:2.6rem;line-height:1.05;margin:0 0 18px;
  max-width:15ch;color:var(--ink);letter-spacing:-.02em;
}
.hp-hero .hp-lede{color:var(--ink-2);font-size:1.12rem;line-height:1.6;max-width:46ch;margin:0}
.hp-cta-row{margin-top:0;display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-start;
  position:relative;z-index:2}
.hp-cta{font-size:1.05rem;padding:15px 30px;border-radius:12px;box-shadow:var(--shadow);font-weight:600}
.hp-cta:hover{box-shadow:var(--shadow-lg)}
.hp-btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--forest);
  border:1.5px solid var(--border);font-weight:600;font-size:1.05rem;padding:15px 28px;border-radius:12px;
}
.hp-btn-secondary:hover{border-color:var(--moss);background:#fbfaf6}
.hp-reassure{margin-top:16px;font-size:.92rem;color:var(--muted);font-weight:500}

/* proof points — quiet credibility markers pinned to the hero bottom, sitting
   below/behind the dog's runway (muted, on cream, not competing with the copy) */
.hp-hero-cred{
  margin-top:auto;padding-top:34px;
  display:flex;flex-wrap:wrap;gap:8px 26px;
  font-size:.86rem;font-weight:500;color:var(--muted);letter-spacing:.01em;
}
.hp-hero-cred b{color:var(--forest);font-weight:700}
.hp-cred-item{display:inline-flex;align-items:center;gap:9px}
.hp-cred-item::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--terracotta)}

/* =====================================================================
   HOW IT WORKS
   ===================================================================== */
.hp-steps{display:grid;grid-template-columns:1fr;gap:18px;margin-top:10px}
.hp-step{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 26px;box-shadow:var(--shadow);position:relative;
}
.hp-step-num{
  width:42px;height:42px;border-radius:12px;background:#eef3ec;color:var(--forest);
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.25rem;
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.hp-step h3{font-family:'Fraunces',Georgia,serif;font-size:1.2rem;margin:0 0 10px;color:var(--ink);line-height:1.2}
.hp-step p{color:var(--ink-2);font-size:1rem;line-height:1.6;margin:0}
@media(min-width:820px){.hp-steps{grid-template-columns:repeat(3,1fr)}}

/* =====================================================================
   EXAMPLE EXPLAINED RESULT
   ===================================================================== */
.hp-example{background:var(--cream);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.hp-example-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;display:grid;grid-template-columns:1fr;margin-top:8px;
}
.hp-example-media{background:var(--cream-2);padding:26px;display:flex;align-items:center;justify-content:center}
.hp-example-media img{max-width:260px;width:100%;border-radius:16px}
.hp-example-body{padding:30px 28px}
.hp-example-body .hp-kicker{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--moss);margin:0 0 6px}
.hp-example-body h3{font-family:'Fraunces',Georgia,serif;font-size:1.6rem;margin:0 0 6px;color:var(--ink)}
.hp-example-sub{color:var(--muted);font-size:.95rem;margin:0 0 18px}
.hp-signal{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--border)}
.hp-signal:first-of-type{border-top:0}
.hp-signal .hp-sig-ic{flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem}
.hp-signal.good .hp-sig-ic{background:#e7f0e6;color:var(--forest)}
.hp-signal.watch .hp-sig-ic{background:#f7e9e1;color:var(--terracotta)}
.hp-signal .hp-sig-txt{flex:1}
.hp-signal .hp-sig-lbl{font-weight:600;color:var(--ink);font-size:.98rem;display:block;margin-bottom:2px}
.hp-signal .hp-sig-desc{color:var(--ink-2);font-size:.92rem;line-height:1.5}
.hp-example-foot{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hp-example-note{font-size:.85rem;color:var(--muted);margin-top:14px;line-height:1.55}
@media(min-width:820px){.hp-example-card{grid-template-columns:300px 1fr}}

/* =====================================================================
   EXPLORE BY LIFESTYLE
   ===================================================================== */
.hp-life{background:var(--surface)}
.hp-life-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px}
.hp-life-tile{
  text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 20px;cursor:pointer;transition:box-shadow .18s,transform .18s,border-color .18s;
  display:flex;flex-direction:column;gap:6px;font:inherit;color:inherit;
}
.hp-life-tile:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--moss)}
.hp-life-tile.is-active{border-color:var(--forest);box-shadow:0 0 0 2px rgba(36,73,54,.18)}
.hp-life-tile .hp-life-title{font-family:'Fraunces',Georgia,serif;font-size:1.12rem;color:var(--ink)}
.hp-life-tile .hp-life-desc{font-size:.92rem;color:var(--ink-2);line-height:1.5}
.hp-life-tile .hp-life-count{margin-top:2px;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--moss)}
@media(min-width:640px){.hp-life-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.hp-life-grid{grid-template-columns:1fr 1fr 1fr 1fr}}

/* filter status + reset */
.hp-life-status{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:26px 0 4px}
.hp-life-status .hp-life-label{font-weight:600;color:var(--ink)}
.hp-life-reset{background:none;border:1px solid var(--border);border-radius:999px;padding:6px 14px;
  font-size:.85rem;font-weight:600;color:var(--forest);cursor:pointer}
.hp-life-reset:hover{border-color:var(--moss)}

/* =====================================================================
   BREED CARDS
   ===================================================================== */
.hp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px}
@media(min-width:720px){.hp-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.hp-grid{grid-template-columns:repeat(4,1fr)}}
.hp-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s;
}
.hp-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.hp-card .hp-pic{background:var(--portrait-tint,#f3efe6);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:12px}
.hp-card .hp-pic img{width:100%;height:100%;object-fit:contain}
.hp-card-body{padding:15px 16px 16px;display:flex;flex-direction:column;flex:1}
.hp-cname{font-family:'Fraunces',Georgia,serif;font-size:1.12rem;color:var(--ink);line-height:1.15;margin:0}
.hp-cgrp{font-size:.8rem;color:var(--muted);margin:2px 0 10px}
.hp-cchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.hp-cchip{font-size:.74rem;font-weight:600;color:var(--ink-2);background:var(--cream);border:1px solid var(--border);
  border-radius:999px;padding:3px 9px}
.hp-cmeta{font-size:.86rem;line-height:1.5;margin:0 0 3px}
.hp-cmeta b{color:var(--forest)}
.hp-cmeta.watch b{color:var(--terracotta)}
.hp-card-foot{margin-top:auto;display:flex;gap:8px;padding-top:12px}
.hp-cbtn{flex:1;text-align:center;background:var(--forest);color:#fff;font-weight:600;font-size:.86rem;
  padding:9px 8px;border-radius:9px}
.hp-cbtn:hover{background:#1c3a2b}
.hp-cbtn.ghost{background:#fff;color:var(--forest);border:1.5px solid var(--border)}
.hp-cbtn.ghost:hover{border-color:var(--moss)}

/* =====================================================================
   MISSION
   ===================================================================== */
.hp-mission{background:var(--forest);color:#f2efe6;text-align:center}
.hp-mission .hp-wrap{padding-top:74px;padding-bottom:74px}
.hp-mission .hp-eyebrow{color:#bcd0bf}
.hp-mission h2{font-family:'Fraunces',Georgia,serif;font-size:2.1rem;line-height:1.15;color:#fff;margin:0 auto 18px;max-width:20ch}
.hp-mission p{color:#dbe4da;font-size:1.08rem;line-height:1.7;max-width:62ch;margin:0 auto 26px}
.hp-mission .hp-btn-onforest{
  display:inline-flex;align-items:center;background:var(--terracotta);color:#fff;font-weight:600;
  font-size:1.05rem;padding:15px 30px;border-radius:12px;box-shadow:var(--shadow);
}
.hp-mission .hp-btn-onforest:hover{background:#b25f3f}

/* =====================================================================
   FINAL CTA + FOOTER
   ===================================================================== */
.hp-finalcta{background:var(--cream);text-align:center;border-top:1px solid var(--border)}
.hp-finalcta .hp-wrap{padding-top:72px;padding-bottom:72px}
.hp-finalcta h2{font-family:'Fraunces',Georgia,serif;font-size:2.1rem;color:var(--ink);margin:0 auto 12px;max-width:20ch}
.hp-finalcta p{color:var(--ink-2);font-size:1.05rem;margin:0 auto 26px;max-width:52ch}
.hp-foot{background:var(--ink);color:#c8d1c9}
.hp-foot .hp-wrap{padding:30px 22px;font-size:.9rem;line-height:1.6;text-align:center}
.hp-foot a{color:#e7eee7;font-weight:500}

/* --- focus states (accessibility) --------------------------------- */
.hp-cta:focus-visible,.hp-btn-secondary:focus-visible,.hp-textlink:focus-visible,
.hp-life-tile:focus-visible,.hp-cbtn:focus-visible,.hp-nav-cta:focus-visible{
  outline:3px solid rgba(36,73,54,.45);outline-offset:3px;border-radius:12px;
}

/* =====================================================================
   RESPONSIVE type scale
   ===================================================================== */
@media(min-width:768px){
  .hp-hero-inner{padding:76px 22px 48px;min-height:740px}
  .hp-hero h1{font-size:3.4rem}
  .hp-hero .hp-lede{font-size:1.2rem}
  .hp-h2{font-size:2.4rem}
  .hp-mission h2,.hp-finalcta h2{font-size:2.6rem}
}

/* =====================================================================
   COMPATIBILITY-ASSESSMENT INTRO (scoped) — reused from prod, re-tinted
   ===================================================================== */
.ca-hero-accent{color:var(--forest)}
.ca-intro-block{max-width:640px;margin:20px auto 4px;text-align:left}
.ca-intro-block p{color:var(--ink-2);font-size:1.02rem;line-height:1.65;margin:0 0 14px}
.ca-intro-block p:last-child{margin-bottom:0}
.ca-intro-emphasis{font-family:'Fraunces',Georgia,serif;font-size:1.18rem;line-height:1.4;color:var(--ink);font-weight:500;margin-top:18px}



/* =====================================================================
   BREED SEARCH + FILTER  (staging)
   ===================================================================== */
.bf-wrap{padding-bottom:8px}
.bf-hide{display:none!important}

/* ---- search ---- */
.bf-search{max-width:640px}
.bf-h{margin:0 0 12px;font-size:1.6rem}
.bf-searchbox{position:relative;display:flex;align-items:center}
.bf-search-ic{position:absolute;left:16px;width:20px;height:20px;color:var(--muted);pointer-events:none}
.bf-q{
  width:100%;font:inherit;font-size:1.02rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:14px 46px 14px 46px;transition:border-color .15s,box-shadow .15s;
}
.bf-q::placeholder{color:var(--muted-2)}
.bf-q:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(36,73,54,.16)}
.bf-q-clear{
  position:absolute;right:8px;width:32px;height:32px;border-radius:50%;
  border:0;background:var(--cream);color:var(--ink-2);font-size:1.25rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.bf-q-clear:hover{background:var(--cream-2);color:var(--ink)}
.bf-q-clear:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.bf-note{font-size:.84rem;color:var(--muted);margin:8px 2px 0;line-height:1.5}
.bf-note-block{flex-basis:100%;margin:6px 0 0}

/* ---- panel / filter bar ---- */
.bf-panel{margin-top:24px}
.bf-panel-head{display:none}
.bf-panel-scroll{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:flex-start}
.bf-cat{border:0;margin:0;padding:0;min-width:0}
.bf-legend{
  font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--moss);padding:0;margin:0 0 8px;font-family:'Inter',system-ui,sans-serif;
}
.bf-opts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bf-opt{
  font:inherit;font-size:.86rem;font-weight:600;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:8px 13px;min-height:38px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:border-color .15s,background .15s,color .15s;
}
.bf-opt:hover{border-color:var(--moss)}
.bf-opt:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.bf-opt .bf-cnt{
  font-size:.72rem;font-weight:700;color:var(--muted);background:var(--cream);
  border-radius:999px;padding:1px 7px;min-width:20px;text-align:center;
}
.bf-opt.is-active{background:var(--forest);border-color:var(--forest);color:#fff}
.bf-opt.is-active .bf-cnt{background:rgba(255,255,255,.22);color:#fff}
.bf-opt[disabled],.bf-opt[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.bf-opt.is-active::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;flex:none}

/* sort */
.bf-sort{margin-left:auto}
.bf-selwrap{display:flex;flex-direction:column;gap:0}
.bf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bf-sel{
  font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:8px 34px 8px 14px;min-height:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236d7d73' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;appearance:none;-webkit-appearance:none;
}
.bf-sel:focus-visible{outline:2px solid var(--forest);outline-offset:2px}

/* ---- tooltips ---- */
.bf-tip{position:relative;display:inline-flex;margin-left:-2px}
.bf-tip-btn{
  width:20px;height:20px;border-radius:50%;border:1px solid var(--border);
  background:var(--cream);color:var(--moss);font-size:.72rem;font-weight:700;font-style:italic;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;
}
.bf-tip-btn:hover{border-color:var(--moss)}
.bf-tip-btn:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.bf-tip-text{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  width:250px;max-width:78vw;background:var(--ink);color:#fff;font-size:.82rem;font-weight:500;
  line-height:1.5;padding:10px 12px;border-radius:10px;box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transition:opacity .14s;z-index:40;pointer-events:none;
}
.bf-tip-text::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--ink)}
.bf-tip:hover .bf-tip-text,.bf-tip:focus-within .bf-tip-text,.bf-tip.is-open .bf-tip-text{opacity:1;visibility:visible}

/* ---- results bar + chips ---- */
.bf-results{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:24px 0 0}
.bf-count{font-weight:600;color:var(--ink);font-size:1rem}
.bf-reset{
  background:none;border:1px solid var(--border);border-radius:999px;padding:7px 15px;min-height:36px;
  font-size:.85rem;font-weight:600;color:var(--forest);cursor:pointer;
}
.bf-reset:hover{border-color:var(--moss)}
.bf-reset:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.bf-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;min-height:0}
.bf-chip{
  display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.84rem;font-weight:600;
  color:var(--forest);background:#eef3ec;border:1px solid #d3e0d1;border-radius:999px;
  padding:6px 8px 6px 13px;min-height:34px;cursor:pointer;
}
.bf-chip:hover{background:#e3ecdf}
.bf-chip:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.bf-chip-x{
  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:rgba(36,73,54,.14);color:var(--forest);font-size:1rem;line-height:1;
}

/* ---- generic buttons ---- */
.bf-btn{
  display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:600;
  font-size:.95rem;border-radius:999px;padding:12px 22px;min-height:44px;cursor:pointer;
  border:1px solid var(--border);text-decoration:none;
}
.bf-btn.primary{background:var(--forest);border-color:var(--forest);color:#fff}
.bf-btn.primary:hover{background:#1d3c2c}
.bf-btn.ghost{background:var(--surface);color:var(--forest)}
.bf-btn.ghost:hover{border-color:var(--moss)}
.bf-btn:focus-visible{outline:2px solid var(--forest);outline-offset:2px}

/* ---- load more + zero state ---- */
.hp-loadmore-wrap{display:flex;justify-content:center;margin-top:26px}
.hp-zero{max-width:520px;margin:36px auto 8px;text-align:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:32px 26px;box-shadow:var(--shadow)}
.hp-zero-h{font-family:'Fraunces',Georgia,serif;font-size:1.3rem;color:var(--ink);margin:0 0 10px;line-height:1.2}
.hp-zero-p{color:var(--ink-2);font-size:1rem;line-height:1.6;margin:0 0 22px}
.hp-zero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---- mobile: refine drawer ---- */
.bf-refine-open{display:none}
.bf-drawer-foot{display:none}
@media(max-width:719px){
  .bf-sort{margin-left:0;width:100%}
  .bf-sel{width:100%}
  .bf-refine-open{
    display:inline-flex;align-items:center;gap:9px;margin-top:20px;font:inherit;font-weight:600;
    font-size:.95rem;color:var(--forest);background:var(--surface);border:1px solid var(--border);
    border-radius:999px;padding:11px 20px;min-height:46px;cursor:pointer;
  }
  .bf-refine-open:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
  .bf-refine-num{font-weight:700}
  .bf-panel{
    position:fixed;inset:0;z-index:120;background:var(--surface);margin:0;
    display:flex;flex-direction:column;transform:translateY(100%);transition:transform .28s ease;
    visibility:hidden;
  }
  .bf-panel.is-open{transform:translateY(0);visibility:visible}
  .bf-panel-head{
    display:flex;align-items:center;justify-content:space-between;padding:18px 20px;
    border-bottom:1px solid var(--border);
  }
  .bf-panel-title{font-family:'Fraunces',Georgia,serif;font-size:1.25rem;color:var(--ink)}
  .bf-drawer-close{
    width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface);
    font-size:1.5rem;line-height:1;color:var(--ink-2);cursor:pointer;
  }
  .bf-drawer-close:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
  .bf-panel-scroll{
    flex:1;overflow-y:auto;padding:20px;gap:22px;flex-direction:column;flex-wrap:nowrap;
  }
  .bf-cat{width:100%}
  .bf-drawer-foot{
    display:flex;gap:12px;padding:16px 20px;border-top:1px solid var(--border);
    background:var(--surface);
  }
  .bf-drawer-foot .bf-btn{flex:1}
  body.bf-drawer-lock{overflow:hidden}
}
@media(min-width:720px){
  .bf-panel{display:block!important;visibility:visible!important;transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  .bf-panel{transition:none}
  .hp-card,.hp-life-tile{transition:none}
}


/* =====================================================================
   Walking-dog HERO stage — the primary animated visual, INSIDE the hero.
   A single traveler holds a muted / looping / autoplaying <video> (no
   controls) whose legs keep moving while CSS translates the whole element
   FULL-WIDTH across the viewport (its own 100vw runway, NOT constrained to
   the content container): it enters completely off the LEFT edge, walks
   across the hero, and continues until the ENTIRE dog (tail included) exits
   completely off the RIGHT edge, then holds off-screen for ~2s of clean
   empty space before re-entering from the left (no instant snap-back).
   The video source is a TRANSPARENT VP9-alpha WebM (studio background matted
   out), so there is NO box / border / background — the dog appears to walk
   directly on the cream hero. Native 16:9, never cropped or stretched
   (object-fit:contain). The stage sits IN FRONT of the copy (z-index:3 >
   copy z-index:2) so the dog may pass over the headline/CTA — intentional —
   but is pointer-events:none so every click falls through to the buttons.
   GPU-friendly: animates transform only. overflow:hidden (here and on
   .hp-hero) clips the traveler so there is never any horizontal page scroll.
   ===================================================================== */
.hp-hero-stage{
  position:absolute;
  inset:0;                           /* full-width runway, spans the whole hero */
  z-index:3;                         /* in front of the hero copy (z-index:2)  */
  overflow:hidden;                   /* clip the traveler; no page overflow     */
  pointer-events:none;               /* never block the CTA underneath          */
}
/* Safari/iOS get an OPAQUE cream-background MP4 (they ignore WebM alpha). An
   opaque frame in front of the copy would hide the headline/CTAs, so for that
   case only (class added by the hero script) the stage drops BEHIND the copy
   (z-index:1 < copy z-index:2). The cream fill matches the hero background, so
   it stays seamless; the dog simply passes behind the text instead of over it.
   On mobile the stage is relocated to its own bottom band (no text overlap),
   so this is a no-op there. */
.hp-hero-stage.is-opaque{ z-index:1; }
/* Runner = a FULL-VIEWPORT-WIDTH (100vw) frame pinned across the hero, holding
   a 100vw video box (see .hp-hero-video). OPTION B: the dog's whole crossing
   lives ENTIRELY inside the clip — at t=0 the dog sits at the frame's LEFT edge
   and by the clip's end only the tail remains at the frame's RIGHT edge. With a
   full-viewport-width frame, the clip's own footwork therefore carries the dog
   from fully off the LEFT of the screen to fully off the RIGHT of the screen
   with ZERO CSS horizontal translation. There is NO translateX animation on the
   runner at all — the in-video walk is the ONLY horizontal motion, which is what
   removes the skate/glide. The ~1.5s empty loop gap is produced purely by the
   video: the clip plays to its natural end (dog gone off-right), holds, then
   restarts from t=0 (dog already off-left) — NO opacity fade, NO snap. The layer
   stays visible the whole time; the dog is simply off-frame at both boundaries.
   The 100vw / 16:9 frame is TALLER than the ~650-750px hero; the stage
   (overflow:hidden) clips the empty transparent bands above/below the dog — the
   dog is never shrunk to fit and never cropped horizontally. The dog body spans
   frame-y 0.086 (ears) -> 0.963 (paws) = 0.876 of frame; at 100vw on 1440 the
   810px frame renders a ~709px dog. top:47% centers the frame's walk-line so
   the ~709px dog fits the ~741px hero with the ears just inside the top and all
   four paws grounded ~18px above the hero's lower edge (both fully visible). */
.hp-hero-runner{
  position:absolute;
  inset:0;                            /* fill the hero; center the dog inside it */
  display:flex;
  align-items:center;                 /* vertical centering so ears AND feet fit  */
  justify-content:center;             /* horizontal centering                      */
  transform:none;                     /* NOT animated                              */
  will-change:auto;
  backface-visibility:hidden;
}
/* TWO stacked clip layers (six-dog + three-dog) occupy the same runner box; the
   master controller keeps exactly ONE active at a time. The inactive layer is
   hidden but stays in the DOM (preload="auto") so the next clip is buffered and
   the hand-off never flickers. No transition/translate — the crossing lives
   inside each clip only. */
.hp-hero-runner.is-active{opacity:1;visibility:visible;}
.hp-hero-runner.is-hidden{opacity:0;visibility:hidden;}
/* Transparent dog — NO mask, NO box, NO background. The frame spans the FULL
   viewport width so the in-video crossing runs edge-to-edge of the screen (dog
   enters fully off-left, exits fully off-right); 16:9 aspect ratio preserved
   (object-fit:contain, never stretched). The frame is taller than the hero; the
   stage clips the empty transparent bands, never the dog horizontally. */
.hp-hero-video{
  display:block;
  height:92%;                        /* fit whole dog incl. feet inside the hero    */
  width:auto;                        /* keep 16:9; height drives the size           */
  max-width:100vw;                   /* never wider than the viewport               */
  aspect-ratio:16/9;
  object-fit:contain;
  background:transparent;
  border:0;
}
/* Tablet: same flex-centred approach; the crossing comes from the video's own
   motion. Keep the whole dog (incl. feet) visible — no size change needed. */
@media (max-width:820px){
  .hp-hero-video{height:88%}
}
/* Mobile: hero is taller and the copy stacks at the top. Shrink the dog a touch
   more so its whole body (ears -> feet) stays inside the hero band; it remains
   flex-centred and passes transparently over the copy (pointer-events:none). */
@media (max-width:560px){
  .hp-hero-video{height:72%}
}
/* Reduced-motion opt-out: no crossing / no loop. The inline script pauses the
   <video> on a full-body frame (~2.5s) with the dog mid-hero; the 100vw frame
   already centers the dog horizontally, so no CSS repositioning is needed. The
   transparent poster covers it before load, so the page degrades gracefully. */

/* =====================================================================
   MOBILE HERO LAYOUT FIX (stg27)
   On phones/tablets the copy stacks full-width, so the full-hero centred dog
   stage would land ON TOP of the descriptor + CTA. Give the dog its OWN band
   at the BOTTOM of the hero and let the copy flow above it. This does NOT
   change the animation — the same video plays its same crossing, just inside
   a reserved band below the copy instead of overlaying it.
   ===================================================================== */
@media (max-width:767px){
  .hp-hero .hp-hero-inner{
    min-height:0;
    padding-bottom:248px;            /* reserve the dog band below the copy */
  }
  .hp-hero .hp-hero-cred{
    margin-top:26px;                 /* sit under the reassure line, not pinned far down */
  }
  .hp-hero .hp-hero-stage{
    top:auto;bottom:0;height:248px;  /* dog walks in the reserved bottom band only */
  }
  .hp-hero .hp-hero-video{
    height:96%;                      /* fill the band; object-fit keeps whole dog visible */
  }
}

/* =====================================================================
   FEATURED / POPULAR BREEDS  (added for monetization funnel — stg24)
   ===================================================================== */
.hp-featured .hp-head{margin-bottom:6px}
.hp-fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
@media(min-width:640px){.hp-fgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.hp-fgrid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1180px){.hp-fgrid{grid-template-columns:repeat(6,1fr)}}
.hp-fcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;transition:box-shadow .18s,transform .18s;color:inherit}
.hp-fcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.hp-fpic{background:var(--portrait-tint,#f3efe6);aspect-ratio:1/1;display:flex;align-items:center;
  justify-content:center;padding:10px}
.hp-fpic img{width:100%;height:100%;object-fit:contain}
.hp-fcbody{padding:12px 12px 14px;display:flex;flex-direction:column;gap:2px}
.hp-fcname{font-family:'Fraunces',Georgia,serif;font-size:1rem;color:var(--ink);line-height:1.18}
.hp-fcgrp{font-size:.76rem;color:var(--muted);margin:0}
.hp-featured-cta{text-align:center;margin-top:30px}

/* =====================================================================
   SOURCE STATEMENT  (near bottom, above footer)
   ===================================================================== */
.hp-source{background:var(--cream);border-top:1px solid var(--border)}
.hp-source .hp-wrap{padding:26px 22px;text-align:center}
.hp-source-text{max-width:74ch;margin:0 auto;color:var(--muted);font-size:.9rem;line-height:1.65}

/* =====================================================================
   FOOTER LINKS + COPYRIGHT
   ===================================================================== */
.hp-foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-bottom:14px}
.hp-foot-links a{color:#e7eee7;font-weight:600}
.hp-foot-links a:hover{text-decoration:underline}
.hp-foot-note{margin:0 auto 10px;max-width:72ch;color:#c8d1c9}
.hp-foot-copy{margin:0;color:#9fb0a4;font-size:.85rem}


/* =====================================================================
   EXPLORE BREEDS — consolidated section (stg25)
   Replaces the former Popular Breeds + Explore-by-lifestyle + Find-a-breed
   grid. One compact search + five dropdowns + lifestyle chips + one compact
   results grid (reuses .hp-fgrid / .hp-fcard from the featured styles).
   ===================================================================== */
.hp-explore .hp-head{margin-bottom:18px}
.hp-explore-intro{max-width:640px;margin:6px auto 0;color:var(--muted);font-size:.95rem;line-height:1.55;text-align:center}

/* compact search bar (centered, no long explanation beneath) */
.bf-searchbox-c{max-width:520px;margin:0 auto 16px}

/* row of five compact dropdown menus + clear */
.bf-controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:12px 14px;margin:0 auto;max-width:940px}
.bf-field{display:flex;flex-direction:column;gap:5px;min-width:150px}
.bf-field-lbl{display:inline-flex;align-items:center;gap:4px;font-size:.76rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--moss)}
.bf-select{appearance:none;-webkit-appearance:none;background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:9px 32px 9px 12px;font:inherit;font-size:.92rem;color:var(--ink);cursor:pointer;line-height:1.2;width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23516155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
.bf-select:hover{border-color:var(--moss)}
.bf-select:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.bf-select.bf-on{border-color:var(--forest);box-shadow:0 0 0 1px var(--forest)}
.bf-field-off .bf-select,.bf-select:disabled{opacity:.55;cursor:not-allowed;background-color:var(--cream-2)}

/* Traits multi-select (custom dropdown w/ checkboxes) */
.bf-multi{position:relative}
.bf-multi-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;background-image:none;text-align:left}
.bf-multi-btn .bf-chevron{width:16px;height:16px;color:var(--moss);flex:none;transition:transform .16s}
.bf-multi-btn[aria-expanded="true"] .bf-chevron{transform:rotate(180deg)}
.bf-multi-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf-multi-panel{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:220px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px}
.bf-multi-panel[hidden]{display:none}
.bf-check{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:.92rem;color:var(--ink)}
.bf-check:hover{background:var(--cream-2)}
.bf-check input{width:16px;height:16px;accent-color:var(--forest);flex:none;cursor:pointer}
.bf-check-lbl{flex:1}
.bf-check .bf-cnt{font-size:.78rem;font-weight:700;color:var(--muted);background:var(--cream-2);border-radius:999px;padding:1px 8px}

/* Clear filters (small) */
.bf-clear{align-self:flex-end;background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:9px 16px;font:inherit;font-size:.86rem;font-weight:600;color:var(--forest);cursor:pointer}
.bf-clear:hover{border-color:var(--moss)}
.bf-clear:focus-visible{outline:2px solid var(--forest);outline-offset:2px}

.bf-hypo-note{max-width:640px;margin:10px auto 0;text-align:center;font-size:.82rem;color:var(--muted);line-height:1.5}

/* lifestyle chips (compact pills, NOT large cards) */
.bf-lifewrap{margin:26px auto 0;max-width:940px;text-align:center}
.bf-life-label{display:block;font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--moss);margin-bottom:10px}
.bf-lifechips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.bf-lifechip{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 15px;
  font:inherit;font-size:.88rem;font-weight:600;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.bf-lifechip:hover{border-color:var(--moss)}
.bf-lifechip:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.bf-lifechip.is-active{background:var(--forest);border-color:var(--forest);color:#fff}

/* results header (title switches Popular Breeds <-> Breed Results) */
.bf-resulthead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;justify-content:center;margin:30px 0 4px;text-align:center}
.bf-results-title{font-family:'Fraunces',Georgia,serif;font-size:1.4rem;color:var(--ink);margin:0;line-height:1.15}
.bf-resulthead .bf-count{font-weight:600;color:var(--muted);font-size:.92rem}

/* compact results grid reuses .hp-fgrid; give the cards a size/energy line */
.hp-results-grid{margin-top:16px}
.hp-fcdesc{font-size:.72rem;color:var(--muted-2);margin-top:1px;line-height:1.3}

@media(max-width:560px){
  .bf-field{min-width:0;flex:1 1 45%}
  .bf-clear{flex:1 1 100%;align-self:stretch;text-align:center}
}