/* ====== Sitewide animation system (v14.2) ====== */
/* Scroll-fade reveals */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .5s ease-out, transform .5s ease-out}
.reveal.in{opacity:1;transform:translateY(0)}

/* Pulse keyframes (used by honesty band accent + future accents) */
@keyframes nsf-pulse{0%,100%{opacity:.7}50%{opacity:1}}
.pulse-accent{animation:nsf-pulse 4s ease-in-out infinite}

/* Honesty band: the "stripe" is a CSS border-left on .honesty-inner, not a
   real element. Replace it with a ::before so the pulse only affects the
   stripe, not the body text. */
.honesty-inner.pulse-accent{position:relative;border-left:0;animation:none}
.honesty-inner.pulse-accent::before{content:"";position:absolute;left:-4px;top:2px;bottom:2px;width:4px;background:var(--terracotta);border-radius:2px;animation:nsf-pulse 4s ease-in-out infinite}

/* Reduced motion: kill all animation, show final states immediately */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .pulse-accent{animation:none}
  .honesty-inner.pulse-accent::before{animation:none}
}

/* ====== Typography polish (v14.3) ====== */
h1, h2 { text-wrap: balance }
.hero h1, .svc-hero h1, .page-hero h1 { max-width: 14ch; margin-inline: 0 }
.about-hero h1 { max-width: 18ch; margin-inline: auto }
.hero-sub, .svc-hero p.hero-sub, .page-hero p.hero-sub { text-wrap: pretty; max-width: 56ch; margin-inline: 0 }
/* Homepage + pillar heros are left-aligned (margin-inline:0). About hero is centered (margin-inline:auto), matching its text-align:center wrapper. */
.lead { font-size: 1.15rem; line-height: 1.55; color: var(--ink) }
strong.hl { color: var(--terracotta-dark); font-weight: 700 }
@media (max-width: 720px){
  .hero h1, .svc-hero h1, .page-hero h1, .about-hero h1 { max-width: 100% }
}

/* ====== Polish pass (v14.7) ====== */
/* Accessibility: keyboard-visible focus rings on every interactive surface.
   Terracotta ring matches brand, 2px offset keeps it readable on any
   background, fires only on keyboard nav (not mouse). */
.nav-links a:focus-visible,
.brand:focus-visible,
.nav-toggle:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.cm:focus-visible,
.story:focus-visible,
.pillar-cta:focus-visible,
.honesty-cta:focus-visible,
.guide-list a:focus-visible,
.faq summary:focus-visible,
.team-details summary:focus-visible{
  outline:2px solid var(--terracotta);
  outline-offset:3px;
  border-radius:6px;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{
  outline:0;
  border-color:var(--terracotta);
  box-shadow:0 0 0 3px rgba(200,85,61,.18);
}

/* Strengthen hover on alumni and testimonial cards */
.story{transition:transform .25s ease-out, box-shadow .25s ease-out, border-color .25s ease-out}
.story:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(61,44,29,.10);border-color:var(--gold)}
.testi{transition:transform .25s ease-out, box-shadow .25s ease-out}
.testi:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(61,44,29,.08)}

/* Footer density loosen: more breathing room between columns and lighter
   bottom strip so the legal line does not crowd the social links. */
.nsf-cols{gap:56px}
.nsf-strip{padding:24px 0 32px;gap:18px}
@media (max-width:900px){.nsf-cols{gap:36px}}

/* Stats grid two-tier layout on About: first two stats lead at half-row
   each, last three are supporting at one-third each. */
@media (min-width:901px){
  .stats-grid{grid-template-columns:repeat(6,1fr)}
  .stats-grid > .stat-card:nth-child(1),
  .stats-grid > .stat-card:nth-child(2){grid-column:span 3;padding:32px 24px}
  .stats-grid > .stat-card:nth-child(1) .stat-num,
  .stats-grid > .stat-card:nth-child(2) .stat-num{font-size:clamp(2.2rem,3.5vw,2.8rem)}
  .stats-grid > .stat-card:nth-child(n+3){grid-column:span 2}
}

/* ====== WIN 2: photo matte press border (editorial treatment) ====== */
.editorial-photo{
  width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid var(--line);
  padding:0.5rem;
  background-color:var(--cream-2);
  box-shadow:0 4px 12px rgba(61,44,29,0.03);
  box-sizing:border-box;
}

/* ====== WIN 5: breed-truth kicker (badge pattern, not a side-stripe) ====== */
.breed-kicker{margin:32px auto;padding:0;text-align:center;max-width:760px}
.kicker-badge{display:inline-block;font-family:'Inter',sans-serif;font-size:0.72rem;text-transform:uppercase;color:var(--terracotta);font-weight:700;letter-spacing:0.12em;background:rgba(200,85,61,0.08);padding:4px 10px;border-radius:999px}
.breed-kicker p{margin:8px auto 0;font-family:'Fraunces',serif;font-style:italic;font-size:1.1rem;line-height:1.5;color:var(--ink);max-width:56ch}

/* ====== WIN 6: rehoming process accordions (collapsible <768px, open desktop) ====== */
details.step-accordion{margin:0}
@media (max-width:767px){
  /* stack process cards as a flat list so they read as an accordion */
  .process-grid{display:block}
  details.step-accordion{border-bottom:1px solid var(--line)}
  details.step-accordion.process-step{background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}
  details.step-accordion > summary{cursor:pointer;padding:16px 0;font-family:'Fraunces',serif;font-size:1.1rem;color:var(--ink);list-style:none;display:flex;align-items:center;gap:10px}
  details.step-accordion > summary::-webkit-details-marker{display:none}
  details.step-accordion > summary::after{content:'+';margin-left:auto;color:var(--terracotta);font-size:1.3rem;line-height:1}
  details.step-accordion[open] > summary::after{content:'\2212'}
  details.step-accordion .step-body{padding:0 0 16px 0}
  details.step-accordion.process-step .process-num{position:static;font-size:1.1rem;color:var(--gold)}
  details.step-accordion.process-step .process-icon{font-size:1.2rem;margin:0}
}
@media (min-width:768px){
  /* desktop: force content visible. Modern Chrome hides closed <details>
     content via a ::details-content pseudo (content-visibility:hidden); older
     engines hide the children directly. Override both. Summary stays inert. */
  details.step-accordion > summary{list-style:none;cursor:default;pointer-events:none;display:block}
  details.step-accordion > summary::-webkit-details-marker{display:none}
  details.step-accordion > summary::after{display:none}
  details.step-accordion::details-content{content-visibility:visible !important}
  details.step-accordion .step-body{display:block !important}
  /* surrender steps: number + title inline on the summary, body indented to
     line up under the title (32px circle + 14px gap) */
  details.step-accordion.surr-step > summary{display:flex;align-items:center;gap:14px}
  details.step-accordion.surr-step .step-body{margin-left:46px}
}

/* ====== v14.17: shared testimonial cards (4 pages) ====== */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1180px;margin:0 auto}
.testi-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 1px 3px rgba(61,44,29,.04);display:flex;flex-direction:column;gap:14px;transition:transform .2s,box-shadow .2s}
.testi-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(61,44,29,.06)}
.testi-card a{color:inherit;text-decoration:none;display:contents}
.testi-stars{color:var(--gold);letter-spacing:.05em;font-size:1rem;line-height:1}
.testi-quote{margin:0;font-size:.95rem;color:var(--ink-soft);line-height:1.55}
.testi-byline{margin:0;font-family:'Fraunces',serif;font-size:.85rem;color:var(--ink);display:block;font-weight:700}
.testi-callout{max-width:760px;margin:28px auto 0;text-align:center;font-size:.92rem;color:var(--ink-soft);font-style:italic}
.testi-callout a{color:var(--terracotta);font-weight:600}
@media (max-width:980px){.testi-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.testi-grid{grid-template-columns:1fr}}

/* Homepage social-proof strip (after trust ledger, before about teaser) */
.testi-strip{padding:64px 0;background:transparent}
.testi-strip-head{text-align:center;max-width:760px;margin:0 auto 28px}
.testi-strip-foot{max-width:760px;margin:24px auto 0;text-align:center;font-size:.9rem;color:var(--ink-soft)}
.testi-strip-foot strong{color:var(--ink)}

/* ====== v14.17: sticky CTA bar (pillar pages, conversion win) ====== */
body.has-sticky-cta{padding-bottom:68px}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--cream-2);border-top:1px solid var(--line);padding:12px max(16px,env(safe-area-inset-right,16px)) env(safe-area-inset-bottom,12px) max(16px,env(safe-area-inset-left,16px));display:flex;justify-content:center;transition:opacity .25s ease,transform .25s ease;box-shadow:0 -6px 18px rgba(61,44,29,.06)}
.sticky-cta a.btn{flex:1;max-width:520px;text-align:center}
.sticky-cta.is-hidden{opacity:0;transform:translateY(100%);pointer-events:none}
@media print{.sticky-cta{display:none !important}}
@media (prefers-reduced-motion: reduce){
  .sticky-cta{transition:none}
  .sticky-cta.is-hidden{transform:none}
}
