/* ====================================================================
   DACHSHUND NETWORK — STYLESHEET
   Plain CSS, no framework. Organized by section, top to bottom.
   ==================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --ink:        #10202B;  /* near-black, tinted navy to tie to the logo */
  --paper:      #FFFFFF;  /* primary white */
  --bone:       #F5F8F9;  /* cool off-white section bg (was warm beige) */
  --hairline:   #DCE3E8;  /* cool gray-blue border / divider (was warm beige) */
  --mute:       #8C99A3;  /* cool slate gray (was warm gray) */
  --slate:      #33424C;  /* cool dark slate body text (was warm gray-brown) */
  --coal:       #0E1B26;  /* near-black panel, navy-tinted — same as footer */
  --navy:       #1B3A53;  /* brand navy, from the logo */
  --navy-deep:  #122838;
  --navy-light: #2C5570;
  --gold:       #C9A227;  /* brand gold, from the logo */
  --gold-light: #E4C766;
  --teal:       #6FA8A2;  /* brand teal, from the logo */
  --teal-deep:  #4A8480;
  --ease: cubic-bezier(.16,.84,.32,1);
  --maxw: 1280px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
  width:100%;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,p{ margin:0; }
::selection{ background:var(--ink); color:var(--paper); }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.font-display{ font-family:'Fraunces', Georgia, serif; }

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}
@media (min-width:768px){ .container{ padding:0 40px; } }

.eyebrow{
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--slate);
}
.text-mute{ color:var(--mute); }
.text-slate{ color:var(--slate); }

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }

/* ---------- Signature element: "The Long Line" divider ---------- */
.long-line{ width:100%; overflow:hidden; color:var(--hairline); }
.long-line.on-ink{ color:rgba(255,255,255,.12); }
.long-line svg{ display:block; width:100%; height:auto; }
.long-line path{
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.6s var(--ease);
}
.long-line.is-visible path{ stroke-dashoffset:0; }
.long-line-wrap{ padding:0 24px; }
@media (min-width:768px){ .long-line-wrap{ padding:0 40px; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  font-size:.875rem;
  letter-spacing:.01em;
  padding:.95rem 1.75rem;
  border:1px solid var(--ink);
  transition:transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
  white-space:nowrap;
}
.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(0,0,0,.45); }
.btn-outline{ background:transparent; color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.btn-outline-light{ border-color:rgba(255,255,255,.55); color:var(--paper); background:transparent; }
.btn-outline-light:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn-light-fill{ border-color:var(--gold); background:var(--gold); color:var(--navy-deep); }
.btn-light-fill:hover{ background:var(--gold-light); border-color:var(--gold-light); }
.btn-gold{ border-color:var(--gold); background:var(--gold); color:var(--navy-deep); }
.btn-gold:hover{ background:var(--gold-light); border-color:var(--gold-light); transform:translateY(-2px); }
.btn-block{ width:100%; }
.btn-sm{ padding:.6rem 1.1rem; font-size:.78rem; }
.btn[disabled]{ opacity:.35; pointer-events:none; }

/* ====================================================================
   NAVIGATION
   ==================================================================== */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:var(--navy-deep);
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.92);
  transition:box-shadow .4s var(--ease);
}
.site-nav.scrolled{
  box-shadow:0 8px 24px -12px rgba(0,0,0,.45);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  height:80px;
}
.brand{
  font-family:'Fraunces',serif;
  font-size:1.05rem;
  display:flex; align-items:center; gap:.65rem;
  color:#fff;
}
.brand-mark{ width:40px; height:40px; flex:none; border-radius:50%; object-fit:cover; border:1.5px solid var(--gold); }
.brand-text{ display:inline; line-height:1.2; }
.nav-links{ display:none; gap:1.75rem; font-size:.88rem; }
.nav-links .nav-link{ color:rgba(255,255,255,.82); }
.nav-links .nav-link:hover{ color:#fff; }
.nav-link{ position:relative; padding-bottom:2px; }
.nav-link::after{
  content:''; position:absolute; left:0; right:100%; bottom:0;
  height:2px; background:var(--gold); transition:right .45s var(--ease);
}
.nav-link:hover::after{ right:0; }
.nav-link.active::after{ right:0; }
.nav-cta{ display:none; }

.mobile-menu-btn{
  width:36px; height:36px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
  background:none; border:none; flex:none;
}
.mobile-menu-btn span{ display:block; width:22px; height:1px; background:#fff; }

.mobile-menu{
  display:flex; flex-direction:column; gap:1.25rem;
  background:var(--navy-deep); border-top:1px solid rgba(255,255,255,.08);
  padding:1.5rem 24px 2rem; font-size:.95rem;
  max-height:calc(100vh - 80px);
  overflow-y:auto;
}
.mobile-menu .nav-link{ color:rgba(255,255,255,.82); }
.mobile-menu.hidden{ display:none; }
.mobile-menu .btn{ text-align:center; margin-top:.25rem; }

/* Nav switches to the inline (desktop) layout at 900px rather than 768px —
   five links plus the CTA button need the extra breathing room, otherwise
   they overflow on tablet-width screens. Below 900px, the hamburger menu
   handles navigation instead. */
@media (min-width:900px){
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
  .mobile-menu-btn{ display:none; }
}

/* ====================================================================
   HERO
   ==================================================================== */
.hero{
  position:relative;
  padding-top:100px;
  min-height:92vh;
  display:flex; align-items:center;
  background-color:var(--navy-deep);
  background-size:cover;
  background-position:center 30%;
  background-repeat:no-repeat;
  color:#fff;
}
/* Short or landscape phones: a fixed 92vh can be taller than the screen
   itself once the keyboard/chrome is accounted for, and rigid min-height
   risks squeezing three lines of headline + copy + button. Let the
   section size to its content instead on short viewports. */
@media (max-height:600px) and (orientation:landscape){
  .hero{ min-height:auto; padding-top:110px; padding-bottom:3rem; }
}
.hero.hero-photo-bg{
  animation:heroBgZoom 26s ease-in-out infinite alternate;
}
@keyframes heroBgZoom{
  0%{ background-size:106% auto; }
  100%{ background-size:120% auto; }
}
.hero-overlay{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:linear-gradient(105deg,
    rgba(14,27,38,.95) 0%,
    rgba(14,27,38,.85) 32%,
    rgba(27,58,83,.55) 62%,
    rgba(201,162,39,.22) 100%);
}
.hero > .container{ position:relative; z-index:1; }

.hero-grid{
  position:relative; z-index:1;
  display:grid; gap:2.5rem;
  align-items:center;
  padding:2.5rem 0 5rem;
}
.hero-headline{
  font-weight:500;
  line-height:1.02;
  font-size:clamp(2.4rem, 9vw, 5.5rem);
  letter-spacing:-.01em;
}
.hero-headline em{ font-style:italic; font-weight:400; }
.hero-headline-light{ color:#fff; }

.hero-eyebrow{ color:var(--gold-light); }

.hero-copy-text{
  font-size:1.05rem;
  color:rgba(255,255,255,.84);
  line-height:1.7;
  max-width:480px;
  margin:1.5rem 0 2rem;
}

@media (min-width:900px){
  .hero-grid{ grid-template-columns:repeat(12,1fr); padding:2.5rem 0 5rem; }
  .hero-copy-col{ grid-column:span 7; }
  .hero-photo-col{ grid-column:9 / span 4; }
}

.hero-divider{
  position:absolute; bottom:0; left:0; right:0;
}

/* ====================================================================
   ABOUT
   ==================================================================== */
.section{ padding:7rem 0; }
.section-bone{ background:var(--bone); }
.section-tight-top{ padding-top:0; }

.about-grid{ display:grid; gap:3rem; }
.about-head h2{ font-size:2rem; line-height:1.15; }
.about-body p{ font-size:1.15rem; color:var(--slate); font-weight:300; line-height:1.75; }
.about-body p.small{ font-size:1rem; font-weight:400; margin-top:1.5rem; }

@media (min-width:768px){
  .about-grid{ grid-template-columns:repeat(12,1fr); gap:2rem; }
  .about-head{ grid-column:span 4; }
  .about-body{ grid-column:7 / span 7; }
  .about-head h2{ font-size:2.6rem; }
}

.stats-row{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--hairline);
  margin-top:3.5rem; padding-top:2rem;
}
@media (max-width:420px){
  .stats-row{ grid-template-columns:1fr; gap:1.5rem; }
  .stat-block + .stat-block{ border-left:none; padding-left:0; border-top:1px solid var(--hairline); padding-top:1.5rem; }
}
.stat-block{ padding-left:0; }
.stat-block + .stat-block{ border-left:1px solid var(--hairline); padding-left:1.5rem; }
.stat-num{ font-size:2.4rem; color:var(--navy); }
@media (min-width:768px){ .stat-num{ font-size:3rem; } }
.stat-label{ margin-top:.5rem; color:var(--mute); }

/* ====================================================================
   GALLERY / PUPPY CARDS
   ==================================================================== */
.gallery-head{
  display:flex; flex-direction:column; gap:1.5rem;
  justify-content:space-between; margin-bottom:3.5rem;
}
.gallery-head h2{ font-size:2.5rem; line-height:1.15; }
.gallery-head .hint{ max-width:340px; font-size:.9rem; line-height:1.6; }
@media (min-width:768px){
  .gallery-head{ flex-direction:row; align-items:flex-end; }
  .gallery-head h2{ font-size:3rem; }
}

.puppy-grid{
  display:grid; grid-template-columns:1fr; gap:3.5rem 2rem;
}
@media (min-width:560px){ .puppy-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .puppy-grid{ grid-template-columns:repeat(3,1fr); } }

.puppy-card{ transition:box-shadow .5s var(--ease), transform .5s var(--ease); }
.puppy-card:hover{ box-shadow:0 28px 50px -28px rgba(0,0,0,.35); transform:translateY(-4px); }

.carousel{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--bone);
  touch-action:pan-y;
}
.carousel-track{ display:flex; height:100%; width:100%; transition:transform .55s var(--ease); }
.carousel-slide{ flex:0 0 100%; height:100%; position:relative; }
.carousel-slide img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.puppy-card:hover .carousel-slide img{ transform:scale(1.045); }

.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92);
  border:1px solid var(--ink);
  opacity:0;
  transition:opacity .35s var(--ease), background .3s var(--ease), color .3s var(--ease);
  z-index:10;
}
.carousel-arrow:hover{ background:var(--ink); color:var(--paper); }
.puppy-card:hover .carousel-arrow{ opacity:1; }
.carousel-arrow.prev{ left:10px; }
.carousel-arrow.next{ right:10px; }

.carousel-dots{
  position:absolute; bottom:12px; left:0; right:0;
  display:flex; justify-content:center; gap:6px; z-index:10;
}
.carousel-dot{
  width:20px; height:20px; padding:0; background:none; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.carousel-dot::after{
  content:''; display:block;
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(10,10,10,.35);
  transition:all .3s var(--ease);
}
.carousel-dot.active::after{ background:var(--ink); width:14px; border-radius:3px; }

.status-chip{
  position:absolute; top:12px; left:12px; z-index:10;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  padding:.3rem .65rem;
  background:rgba(255,255,255,.95);
  color:var(--teal-deep);
  border:1px solid rgba(111,168,162,.4);
}
.status-chip.pending{ color:#9C7E1F; border-color:rgba(201,162,39,.4); }

.puppy-meta{
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:.5rem;
  padding-top:1.25rem;
}
.puppy-meta h3{ font-size:1.25rem; }
.puppy-meta .sub{ color:var(--slate); font-size:.9rem; margin-top:.15rem; }

.puppy-fee{
  font-family:'Fraunces',serif; font-size:1.1rem; color:var(--navy);
  white-space:nowrap; text-align:right;
}
.puppy-fee .unit{ display:block; font-family:'Inter',sans-serif; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin-top:.1rem; }

.puppy-story-excerpt{
  margin-top:.85rem;
  font-size:.86rem; line-height:1.6; color:var(--slate);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.puppy-actions{ display:flex; gap:.6rem; margin-top:1.1rem; }
.puppy-actions .btn{ flex:1; }
.read-story-btn{
  font-size:.8rem; color:var(--navy); background:none; border:none; padding:0;
  text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:1px;
  cursor:pointer; transition:color .3s var(--ease);
}
.read-story-btn:hover{ color:var(--gold); }

/* ====================================================================
   PROCESS
   ==================================================================== */
.process-head h2{ font-size:2.5rem; line-height:1.15; max-width:520px; }
.process-grid{ display:grid; gap:2.5rem; margin-top:4rem; }
@media (min-width:560px) and (max-width:899px){
  .process-grid{ grid-template-columns:repeat(2,1fr); gap:2rem 1.5rem; }
}
@media (min-width:900px){
  .process-head h2{ font-size:3rem; }
  .process-grid{ grid-template-columns:repeat(4,1fr); gap:1.5rem; }
  .process-step:not(:first-child){ border-left:1px solid var(--hairline); padding-left:1.5rem; }
}
.step-num{ font-family:'Fraunces',serif; font-weight:300; font-style:italic; font-size:3rem; color:var(--mute); margin-bottom:1.25rem; }
@media (min-width:768px){ .step-num{ font-size:3.5rem; } }
.process-step h3{ font-size:1.2rem; margin-bottom:.6rem; }
.process-step p{ font-size:.9rem; color:var(--slate); line-height:1.65; }

/* ====================================================================
   CTA BAND
   ==================================================================== */
.cta-band{ background:linear-gradient(120deg, var(--navy-deep), var(--navy)); color:var(--paper); padding:6rem 0; }
.cta-grid{ display:grid; gap:2.5rem; align-items:center; }
.cta-grid h2{ font-size:2rem; line-height:1.25; }
.cta-actions{ display:flex; flex-direction:column; gap:1rem; }
@media (min-width:768px){
  .cta-grid{ grid-template-columns:repeat(12,1fr); }
  .cta-grid h2{ grid-column:span 8; font-size:2.25rem; }
  .cta-actions{ grid-column:span 4; flex-direction:row; justify-content:flex-end; }
}

/* ====================================================================
   FOOTER
   ==================================================================== */
.site-footer{ background:var(--coal); color:var(--paper); padding-top:6rem; padding-bottom:2.5rem; }
.footer-grid{
  display:grid; gap:3rem;
  padding-bottom:4rem; border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand p{ color:rgba(255,255,255,.55); font-size:.9rem; line-height:1.7; max-width:340px; margin-top:1.25rem; }
.footer-logo{ width:52px; height:52px; border-radius:50%; object-fit:cover; margin-bottom:1.25rem; border:1.5px solid var(--gold); }
.footer-brand-name{ font-size:1.4rem; }
.footer-col .eyebrow{ color:rgba(255,255,255,.4); margin-bottom:1.25rem; }
.footer-col li{ margin-bottom:.75rem; font-size:.9rem; color:rgba(255,255,255,.75); }
.footer-col li.muted{ color:rgba(255,255,255,.55); }
@media (min-width:768px){
  .footer-grid{ grid-template-columns:repeat(12,1fr); }
  .footer-brand{ grid-column:span 5; }
  .footer-col.links{ grid-column:span 3; }
  .footer-col.reach{ grid-column:span 4; }
}
.footer-bottom{
  display:flex; flex-direction:column; gap:1rem;
  justify-content:space-between; align-items:flex-start;
  padding-top:2rem; font-size:.75rem; color:rgba(255,255,255,.4);
}
@media (min-width:600px){ .footer-bottom{ flex-direction:row; align-items:center; } }
.footer-bottom-right{ text-align:left; }
.staff-link{ color:rgba(255,255,255,.55); text-decoration:underline; text-decoration-color:rgba(255,255,255,.25); }
.staff-link:hover{ color:#fff; }

/* ====================================================================
   FORM PAGE FEEDBACK BANNER (no-JS fallback)
   ==================================================================== */
.flash-banner{
  max-width:var(--maxw); margin:96px auto 0; padding:1rem 24px;
  font-size:.9rem;
}
.flash-banner.success{ background:#F3F2EE; border:1px solid var(--hairline); }
.flash-banner.error{ background:#1c1c1c; color:#fff; }

/* ====================================================================
   MODAL (Application Form)
   ==================================================================== */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(10,10,10,.55);
  backdrop-filter:blur(2px);
  opacity:0; pointer-events:none;
  transition:opacity .45s var(--ease);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }

.modal-panel{
  position:relative;
  background:var(--paper);
  width:100%; max-width:680px; max-height:90vh;
  overflow-y:auto;
  transform:translateY(24px) scale(.985);
  opacity:0;
  transition:transform .55s var(--ease), opacity .55s var(--ease);
}
.modal-overlay.open .modal-panel{ transform:translateY(0) scale(1); opacity:1; }
.modal-panel::-webkit-scrollbar{ width:6px; }
.modal-panel::-webkit-scrollbar-thumb{ background:var(--hairline); border-radius:3px; }

.modal-close{
  position:absolute; top:16px; right:16px; z-index:10;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hairline); background:var(--paper);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.modal-close:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.modal-body{ padding:3rem 2rem 2.5rem; }
@media (max-width:400px){ .modal-body{ padding:2.75rem 1.25rem 2rem; } }
@media (min-width:640px){ .modal-body{ padding:3rem; } }
.modal-body h3{ font-size:1.85rem; margin-bottom:.25rem; }
.modal-sub{ font-size:.9rem; color:var(--slate); margin-bottom:2.25rem; }

.form-grid{ display:grid; gap:1.5rem; }
.form-row-2{ display:grid; gap:1.5rem; }
@media (min-width:640px){ .form-row-2{ grid-template-columns:1fr 1fr; } }

.field-label{
  display:block; margin-bottom:.5rem;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--slate);
}
.field-input{
  width:100%; background:transparent;
  border:1px solid var(--hairline);
  padding:.7rem .85rem; font-size:.92rem;
  font-family:inherit;
  transition:border-color .3s var(--ease);
}
.field-input:focus{ border-color:var(--ink); }
.field-input::placeholder{ color:var(--mute); }
textarea.field-input{ resize:vertical; }

.form-note{ font-size:.78rem; color:var(--mute); line-height:1.6; }
.form-error{
  display:none;
  font-size:.85rem; color:#fff; background:var(--ink);
  padding:.85rem 1rem; margin-bottom:.5rem;
}
.form-error.show{ display:block; }

/* Success state */
.success-state{ display:none; text-align:center; padding:4.5rem 2rem 5rem; }
.success-state.show{ display:block; }
.check-circle{ stroke-dasharray:166; stroke-dashoffset:166; transition:stroke-dashoffset 1s var(--ease) .15s; }
.check-tick{ stroke-dasharray:48; stroke-dashoffset:48; transition:stroke-dashoffset .5s var(--ease) .65s; }
.success-state.animate-in .check-circle{ stroke-dashoffset:0; }
.success-state.animate-in .check-tick{ stroke-dashoffset:0; }
.success-state h3{ font-size:1.85rem; margin:0 0 .75rem; }
.success-state p{ font-size:.9rem; color:var(--slate); max-width:360px; margin:0 auto 2rem; line-height:1.7; }

/* ====================================================================
   STORY MODAL
   A second, simpler modal — read-only, no form — that shows a dog's
   full bio plus a "Start Application" handoff into the adopt modal.
   ==================================================================== */
.story-photo{
  width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--bone);
}
.story-photo img{ width:100%; height:100%; object-fit:cover; }

.story-content{ padding:2rem 2rem 2.5rem; }
@media (max-width:400px){ .story-content{ padding:1.75rem 1.25rem 2rem; } }
@media (min-width:640px){ .story-content{ padding:2.25rem 3rem 2.75rem; } }

.story-top{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:.6rem; margin-bottom:.4rem; }
.story-top h3{ font-size:clamp(1.5rem, 6vw, 1.9rem); }
.story-meta{ font-size:.88rem; color:var(--slate); margin-bottom:1.5rem; }
.story-fee-badge{
  font-family:'Fraunces',serif; font-size:1.05rem; color:var(--navy);
  border:1px solid var(--hairline); padding:.4rem .9rem; white-space:nowrap;
}
.story-text{ font-size:.98rem; line-height:1.8; color:var(--slate); margin-bottom:2rem; white-space:pre-wrap; }

.story-actions{ display:flex; flex-wrap:wrap; gap:.85rem; }
.story-actions .btn{ flex:1; min-width:160px; }

/* ====================================================================
   HERO STAT BADGE — floats in the photo column next to the headline
   ==================================================================== */
.hero-photo-col{ margin-top:.5rem; }
.hero-photo-badge{
  display:inline-flex; align-items:center; gap:.9rem;
  background:rgba(255,255,255,.97);
  padding:1.1rem 1.3rem;
  border-left:3px solid var(--gold);
  max-width:280px;
}
.hero-photo-badge .num{ font-family:'Fraunces',serif; font-size:1.7rem; color:var(--navy); line-height:1; flex:none; }
.hero-photo-badge .label{ font-size:.74rem; letter-spacing:.02em; color:var(--slate); line-height:1.5; }

@media (min-width:900px){
  .hero-photo-col{ display:flex; justify-content:flex-end; align-items:center; margin-top:0; height:100%; }
}

/* ====================================================================
   REVIEWS PAGE
   ==================================================================== */
.reviews-hero{
  padding:9rem 0 4rem;
  background:linear-gradient(120deg, var(--navy-deep), var(--navy));
  color:#fff;
}
.reviews-hero-title{ font-size:2.6rem; line-height:1.1; margin:.5rem 0 1rem; }
@media (min-width:768px){ .reviews-hero-title{ font-size:3.4rem; } }
.reviews-hero-sub{ color:rgba(255,255,255,.78); font-size:1.05rem; max-width:520px; line-height:1.6; }

.reviews-grid{
  display:grid; grid-template-columns:1fr; gap:2rem;
}
@media (min-width:640px){ .reviews-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .reviews-grid{ grid-template-columns:repeat(3,1fr); } }

.review-card{
  background:var(--bone);
  border:1px solid var(--hairline);
  border-top:3px solid var(--gold);
  padding:1.75rem 1.6rem;
  display:flex; flex-direction:column;
}
.review-stars{ display:flex; gap:.2rem; margin-bottom:1rem; }
.review-text{
  font-size:.95rem; line-height:1.7; color:var(--slate);
  flex:1; margin-bottom:1.25rem;
  font-style:italic;
}
.review-meta{ display:flex; flex-direction:column; gap:.2rem; padding-top:1rem; border-top:1px solid var(--hairline); }
.review-name{ font-family:'Fraunces',serif; font-size:1rem; color:var(--navy); }
.review-puppy{ font-size:.78rem; color:var(--teal-deep); letter-spacing:.02em; }

/* ====================================================================
   DONATE MODAL — quick amount pills
   ==================================================================== */
.amount-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
@media (max-width:380px){
  .amount-grid{ grid-template-columns:repeat(2,1fr); }
}
.amount-pill{
  border:1px solid var(--hairline); background:var(--paper);
  padding:.75rem 0; font-size:.92rem; font-weight:600; color:var(--navy);
  cursor:pointer; transition:all .25s var(--ease);
  min-height:44px;
}
.amount-pill:hover{ border-color:var(--gold); }
.amount-pill.active{ background:var(--navy); border-color:var(--navy); color:#fff; }

.method-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
@media (min-width:480px){ .method-grid{ grid-template-columns:repeat(4,1fr); } }
.method-pill{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  border:1px solid var(--hairline); background:var(--paper);
  padding:.85rem .5rem; font-size:.78rem; font-weight:600; color:var(--navy);
  cursor:pointer; transition:all .25s var(--ease);
  min-height:64px;
}
.method-pill svg{ flex:none; }
.method-pill:hover{ border-color:var(--gold); }
.method-pill.active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.field-hint-inline{ font-size:.76rem; color:var(--mute); margin-top:.6rem; line-height:1.5; }

/* ====================================================================
   CONFIRMATION / THANK-YOU PAGE
   ==================================================================== */
.confirm-page{
  min-height:calc(100vh - 80px);
  padding:140px 0 100px;
  display:flex; align-items:center;
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(111,168,162,.12), transparent 60%),
    var(--bone);
}
.confirm-card{
  max-width:620px; margin:0 auto; text-align:center;
  background:var(--paper);
  border:1px solid var(--hairline);
  border-top:3px solid var(--gold);
  padding:3.5rem 2rem 3rem;
  box-shadow:0 40px 90px -50px rgba(14,27,38,.4);
}
@media (min-width:640px){ .confirm-card{ padding:4rem 3.5rem 3.25rem; } }

.confirm-check{ margin-bottom:1.75rem; }
.confirm-check svg{ display:inline-block; }
.confirm-check-circle{
  stroke-dasharray:240; stroke-dashoffset:240;
  animation:confirmCircle .8s var(--ease) forwards;
}
.confirm-check-tick{
  stroke-dasharray:70; stroke-dashoffset:70;
  animation:confirmTick .5s var(--ease) .55s forwards;
}
@keyframes confirmCircle{ to{ stroke-dashoffset:0; } }
@keyframes confirmTick{ to{ stroke-dashoffset:0; } }

.confirm-eyebrow{ color:var(--teal-deep); margin-bottom:1rem; }
.confirm-heading{
  font-size:clamp(1.7rem, 5vw, 2.5rem);
  line-height:1.15; color:var(--navy);
  margin:0 0 1.25rem;
}
.confirm-lead{
  font-size:1.05rem; color:var(--slate); line-height:1.7;
  max-width:460px; margin:0 auto 1rem;
}
.confirm-detail{
  font-size:.92rem; color:var(--mute); line-height:1.7;
  max-width:480px; margin:0 auto 2.25rem;
}
.confirm-actions{
  display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center;
  margin-bottom:2rem;
}
.confirm-contact{
  font-size:.85rem; color:var(--mute);
  padding-top:1.75rem; border-top:1px solid var(--hairline);
}
.confirm-contact a{ color:var(--navy); border-bottom:1px solid var(--gold); }
@media (prefers-reduced-motion:reduce){
  .confirm-check-circle, .confirm-check-tick{ animation:none; stroke-dashoffset:0; }
}