/* ==========================================================================
   SugerPaws Cavoodles — stylesheet
   Palette is defined once, here. Change a token and it changes site-wide.
   ========================================================================== */

:root {
  /* Core palette — eucalyptus & oatmeal */
  --ink:        #1F2E24;   /* headings, body text */
  --ink-soft:   #4A5B4F;   /* secondary text */
  --paper:      #FCFAF6;   /* page background */
  --oat:        #F1EDE3;   /* alternating section background */
  --sage:       #DCE4D6;   /* panels, placeholders */
  --sage-deep:  #7C9270;   /* rules, quiet accents */
  --forest:     #35513B;   /* primary buttons */
  --forest-dk:  #263D2B;
  --honey:      #C98A2B;   /* stars, reserved badge, single warm note */
  --stone:      #8A8579;   /* adopted badge */

  --line:       #E2DDD1;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Karla", "Helvetica Neue", Arial, sans-serif;

  /* Spacing & shape */
  --wrap: 1240px;
  --gap: 24px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-arch: 140px 140px 18px 18px;  /* the house-arch shape used on photos */

  --shadow: 0 14px 40px rgba(31, 46, 36, 0.10);
  --shadow-sm: 0 4px 14px rgba(31, 46, 36, 0.07);
}

/* -------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--honey); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }

p { margin: 0 0 1.1em; max-width: 66ch; }

:focus-visible {
  outline: 3px solid var(--honey);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--forest); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------- layout --- */
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 40px, 780px); margin-inline: auto; }

section { padding: clamp(56px, 8vw, 104px) 0; }
.band-oat  { background: var(--oat); }
.band-sage { background: var(--sage); }
.band-dark { background: var(--forest-dk); color: #EFEDE4; }
.band-dark h2, .band-dark h3 { color: #FCFAF6; }
.band-dark p { color: #D2DACE; }
/* .section-head p (below) has the same specificity as this rule, so without
   this more specific override, source order alone decides the winner —
   which was making section intros unreadable on dark backgrounds. */
.band-dark .section-head p { color: #D2DACE; }

.section-head { max-width: 62ch; margin-bottom: clamp(32px, 5vw, 52px); }
.section-head p { color: var(--ink-soft); font-size: 1.06rem; }

.center { text-align: center; margin-inline: auto; }
.center p { margin-inline: auto; }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ------------------------------------------------------------ buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 28px;
  font-family: var(--font-body); font-size: 1rem; font-weight: 700;
  border: 2px solid transparent; border-radius: 999px;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--forest); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--forest-dk); color: #fff; }

.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover, .btn-secondary:focus-visible { background: var(--ink); color: var(--paper); }

.btn-honey { background: var(--honey); color: #241905; }
.btn-honey:hover, .btn-honey:focus-visible { background: #B0761F; color: #fff; }

.btn-light { background: var(--paper); color: var(--forest-dk); }
.btn-light:hover, .btn-light:focus-visible { background: var(--sage); color: var(--forest-dk); }

.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost-light:hover, .btn-ghost-light:focus-visible { background: rgba(255,255,255,.12); color: #fff; }

.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row.center { justify-content: center; }

/* ------------------------------------------------------------- header --- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(252, 250, 246, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; min-height: 82px; flex-wrap: nowrap;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand { text-decoration: none; gap: 12px; }
.brand-mark { height: 44px; width: 44px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.42rem;
  color: var(--ink); letter-spacing: -0.01em; white-space: nowrap;
}
.brand-tag {
  font-size: .63rem; font-weight: 700; letter-spacing: .14em;
  color: var(--sage-deep); white-space: nowrap;
}

.nav-links {
  display: flex; align-items: center; gap: 18px; flex-wrap: nowrap;
  list-style: none; margin: 0; padding: 0;
}
.nav-links li { white-space: nowrap; }
.nav-links a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.9rem;
  padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav-links a:hover { color: var(--forest); border-bottom-color: var(--sage-deep); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--honey); }

/* Only ONE enquiry button shows at a time: this one on desktop, the one
   inside the nav list on mobile. */
.nav-links .nav-cta { display: none; }
.header-cta { flex-shrink: 0; }
.header-cta .btn { min-height: 46px; padding: 10px 22px; font-size: 0.95rem; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; background: none; border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--ink); position: relative;
  transition: background .2s ease;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ink);
  transition: transform .22s ease, top .22s ease;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* --------------------------------------------------------------- hero --- */
.hero { padding: clamp(40px, 6vw, 76px) 0 clamp(56px, 8vw, 96px); }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.hero h1 { margin-bottom: 20px; }
.hero-lede { font-size: 1.14rem; color: var(--ink-soft); max-width: 46ch; }

.hero-photo {
  position: relative;
  border-radius: var(--r-arch);
  overflow: hidden;
  background: var(--sage);
  aspect-ratio: 4 / 5;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

.hero-tag {
  position: absolute; left: 18px; bottom: 18px; right: 18px;
  background: rgba(252,250,246,.95); border-radius: var(--r-md);
  padding: 14px 18px; box-shadow: var(--shadow-sm);
  font-size: .93rem; font-weight: 600; color: var(--ink);
}
.hero-tag strong { display: block; font-family: var(--font-display); font-size: 1.15rem; }

/* trust strip under hero */
.trust-strip {
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center;
  padding: 18px 0 0; margin-top: 26px; border-top: 1px solid var(--line);
  font-size: .93rem; color: var(--ink-soft); font-weight: 600;
}
.trust-strip span { display: inline-flex; align-items: center; gap: 8px; }
.tick { color: var(--forest); font-weight: 700; }

/* --------------------------------------------------------------- card --- */
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 26px;
}
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--ink-soft); font-size: .98rem; }

.value-card { border: none; background: transparent; padding: 0; }
.value-card .value-rule { width: 46px; height: 3px; background: var(--honey); border-radius: 2px; margin-bottom: 18px; }

/* -------------------------------------------------------- puppy cards --- */
.puppy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.puppy {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.puppy--available {
  border-color: var(--forest);
  box-shadow: var(--shadow);
}
.puppy--taken { opacity: .82; }

.puppy-photo { position: relative; aspect-ratio: 1 / 1; background: var(--sage); }
.puppy-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Reserved and adopted puppies deliberately show in full colour, same as
   available ones — only the badge tells them apart. */

.badge {
  position: absolute; top: 14px; left: 14px;
  padding: 7px 15px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #fff;
}
.badge-available { background: var(--forest); }
.badge-reserved  { background: var(--honey); color: #241905; }
.badge-adopted   { background: var(--stone); }

.puppy-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.puppy-body h3 { margin-bottom: 4px; }
.puppy-meta { color: var(--sage-deep); font-weight: 700; font-size: .9rem; margin-bottom: 12px; }
.puppy-body p { font-size: .97rem; color: var(--ink-soft); flex: 1; }
.puppy-body .btn { margin-top: 16px; }

.puppy-note {
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line);
  font-size: .92rem; color: var(--stone); font-weight: 600;
}

.filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.filter-btn {
  min-height: 46px; padding: 10px 22px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--paper);
  font-family: var(--font-body); font-weight: 700; font-size: .95rem; color: var(--ink-soft);
}
.filter-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------- steps --- */
.steps { counter-reset: step; display: grid; gap: 4px; }
.step {
  display: grid; grid-template-columns: 72px 1fr; gap: 24px;
  padding: 28px 0; border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-num {
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 600;
  color: var(--sage-deep); line-height: 1;
}
.step h3 { margin-bottom: 6px; }
.step p { color: var(--ink-soft); margin-bottom: 0; }
.step p + p { margin-top: .8em; }

/* -------------------------------------------------------------- lists --- */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
/* Items flow as normal text so the label and its description run on one
   continuous line and wrap to the full width of the column. The tick sits in
   the gutter. (An earlier grid version put each child in its own cell, which
   squeezed the description into the tick column, one word per line.) */
.check-list li {
  display: block; position: relative;
  padding-left: 30px; font-size: 1rem; line-height: 1.6;
  text-align: left; /* never centered: the checkmark is pinned to the left edge */
}
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--forest); font-weight: 700;
}
.band-dark .check-list li::before { color: #d7bdd0; }

.check-list strong { display: inline; }
.check-list span { display: inline; color: var(--ink-soft); font-size: .97rem; }
.check-list strong + span::before { content: " — "; color: var(--stone); }
.band-dark .check-list span { color: #e3d4de; }

/* --------------------------------------------------------- testimonial --- */
.review-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
  break-inside: avoid;
}
.review-top { display: flex; align-items: center; gap: 14px; }
.review-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: var(--sage); display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--forest);
  overflow: hidden;
}
.review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-name { font-weight: 700; line-height: 1.3; }
.review-sub { font-size: .87rem; color: var(--stone); }

.stars { display: inline-flex; gap: 2px; color: var(--honey); font-size: 1.05rem; letter-spacing: 1px; }
.stars-label { font-size: .87rem; color: var(--ink-soft); margin-left: 6px; font-weight: 600; }

.review-body { color: var(--ink-soft); font-size: .99rem; }
.review-body p { margin-bottom: .9em; }
.review-body p:last-child { margin-bottom: 0; }

.review-puppy {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: .89rem; color: var(--sage-deep); font-weight: 700;
}

.review-columns { columns: 3; column-gap: 26px; }
.review-columns > * { margin-bottom: 26px; }

.notice {
  border-left: 4px solid var(--honey); background: var(--oat);
  padding: 18px 22px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .96rem; color: var(--ink-soft); margin-bottom: 36px;
}
.notice strong { color: var(--ink); }
.notice p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- forms --- */
.form-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(24px, 4vw, 44px);
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 22px; }
.field label, .fieldset-legend {
  display: block; font-weight: 700; font-size: .96rem; margin-bottom: 8px;
}
.field-hint { font-weight: 400; color: var(--stone); font-size: .88rem; }
.req { color: #A6402F; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
select, textarea {
  width: 100%; padding: 14px 16px; min-height: 52px;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-sm);
}
textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus { border-color: var(--forest); outline-offset: 1px; }

fieldset { border: none; margin: 0 0 22px; padding: 0; }

.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.choice {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; min-height: 56px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; font-weight: 600; font-size: .97rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.choice:hover { border-color: var(--sage-deep); }
.choice input { width: 20px; height: 20px; accent-color: var(--forest); flex-shrink: 0; margin: 0; }
.choice:has(input:checked) { border-color: var(--forest); background: var(--sage); }
.choice-name { display: flex; flex-direction: column; }
.choice-name small { font-weight: 500; color: var(--stone); }

.form-reassure {
  margin-top: 8px; padding: 18px 20px; background: var(--oat);
  border-radius: var(--r-sm); font-size: .94rem; color: var(--ink-soft);
}
.form-reassure p:last-child { margin-bottom: 0; }

.form-status { margin-top: 18px; font-weight: 700; }
.form-status[data-state="ok"]  { color: var(--forest); }
.form-status[data-state="err"] { color: #A6402F; }

/* ----------------------------------------------------------- accordion --- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 22px 0; font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; color: var(--ink);
}
.faq-q .chev { flex-shrink: 0; width: 14px; height: 14px; border-right: 2px solid var(--sage-deep); border-bottom: 2px solid var(--sage-deep); transform: rotate(45deg) translate(-3px,-3px); transition: transform .2s ease; }
.faq-q[aria-expanded="true"] .chev { transform: rotate(-135deg) translate(-3px,-3px); }
.faq-a { display: none; padding: 0 0 22px; }
.faq-a p { color: var(--ink-soft); margin-bottom: .8em; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-item.open .faq-a { display: block; }

/* -------------------------------------------------------------- CTA ----- */
.cta-band { background: var(--forest-dk); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #C6D2C7; margin-inline: auto; }

/* ------------------------------------------------------------- footer --- */
.site-footer { background: var(--forest-dk); color: #C6D2C7; padding: 64px 0 0; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px;
  padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.14);
}
.site-footer img.footer-logo { height: 52px; width: auto; margin-bottom: 16px; }
.site-footer p { font-size: .95rem; color: #B4C3B6; }
.site-footer h4 {
  font-family: var(--font-body); font-size: .95rem; font-weight: 700;
  color: #fff; margin: 0 0 14px;
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-list a { color: #C6D2C7; text-decoration: none; font-size: .95rem; }
.footer-list a:hover { color: var(--honey); }

.verify-box {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-md); padding: 20px;
}
.verify-box h4 { margin-bottom: 6px; }
.verify-box p { font-size: .88rem; margin-bottom: 14px; }
.rpba {
  font-weight: 800; color: var(--honey); letter-spacing: .02em; font-size: 1.02rem;
}
/* Keep the registration details readable against the dark footer. */
.site-footer .rpba { color: var(--honey); }

.verify-box .btn { min-height: 46px; font-size: .9rem; padding: 10px 18px; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  padding: 24px 0; font-size: .88rem; color: #93A596;
}
.footer-bottom a { color: #93A596; text-decoration: none; }
.footer-bottom a:hover { color: var(--honey); }

/* --------------------------------------------------------- page header --- */
.page-head { padding: clamp(44px, 6vw, 76px) 0 clamp(28px, 4vw, 48px); background: var(--oat); }
.page-head h1 { margin-bottom: 14px; }
.page-head p { font-size: 1.1rem; color: var(--ink-soft); max-width: 60ch; }

.prose h2 { margin-top: 1.8em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.5em; }

/* ------------------------------------------------------------ motion ---- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* -------------------------------------------------------- responsive ---- */
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .puppy-grid { grid-template-columns: repeat(2, 1fr); }
  .review-columns { columns: 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
  .nav-toggle { display: flex; }
  .header-cta { display: none; }

  .nav-links {
    position: fixed; inset: 82px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 8px 20px 24px; max-height: calc(100vh - 82px); overflow-y: auto;
    display: none; box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav-links .nav-cta { display: block; }
  .nav-links a {
    display: block; width: 100%;
    padding: 20px 4px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent;
    font-size: 1.05rem; line-height: 1.3;
  }
  .nav-links a[aria-current="page"] { border-bottom-color: var(--line); border-left-color: var(--honey); padding-left: 12px; }
  .nav-links li:last-child a { border-bottom: none; }
  .nav-links .nav-cta { display: block; margin-top: 16px; }
  .nav-links .nav-cta .btn { width: 100%; }

  .hero-grid { grid-template-columns: 1fr; }
  /* .hero-media-col marks whichever element is the "photo side" of a
     .hero-grid — the photo itself on the homepage, or the wrapper div
     around the photo and card on the About page — and moves it to the top
     on mobile. It's an explicit class rather than :nth-child(2) because
     .hero-grid is also reused on the Contact page for a plain two-column
     layout with no photo at all, where reordering by position would have
     wrongly moved that column too. */
  .hero-media-col { order: -1; }
  .hero-photo {
    aspect-ratio: 4 / 5; margin-bottom: 28px;
    --r-arch: 120px 120px 18px 18px;
  }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .step { grid-template-columns: 52px 1fr; gap: 16px; }
  .step-num { font-size: 1.7rem; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }

  /* Slightly tighter vertical rhythm than the desktop clamp, so the page
     doesn't feel like a long scroll of the desktop layout squeezed narrow. */
  section { padding: 44px 0; }
  .page-head { padding: 34px 0 22px; }

  /* Page headers (h1 + intro line) center on every inner page: About,
     Puppies, Process, FAQ, Contact, Reviews. This also centers the star
     rating line at the top of the Reviews page, which sits inside it. */
  .page-head { text-align: center; }
  .page-head p { margin-inline: auto; }

  /* Hero: center the pitch. The photo appears above it on mobile (see the
     order fix above). The caption card used to sit on top of the photo as
     an overlay — with a real photo of people and puppies in it, that meant
     text sitting over faces. It now sits underneath instead. */
  .hero-grid { text-align: center; }
  .hero-lede { margin-inline: auto; max-width: 38ch; }
  .hero .btn-row, .page-head .btn-row { justify-content: center; }
  .trust-strip { justify-content: center; text-align: center; }
  .hero-tag {
    position: static; left: auto; right: auto; bottom: auto;
    margin-top: 14px; text-align: center; padding: 12px 16px; font-size: .87rem;
  }
  .hero-tag strong { font-size: 1.05rem; }

  /* Section intros are short by design, so centering reads as tidy rather
     than harder to read. Long-form paragraphs elsewhere are untouched. */
  .section-head { text-align: center; margin-inline: auto; }
  .section-head p { margin-inline: auto; }

  /* Value cards and puppy cards carry a heading plus one short line —
     the same reasoning applies. */
  .value-card { text-align: center; }
  .value-card .value-rule { margin-inline: auto; }
  .puppy-body { text-align: center; }

  /* Review cards: name and stars center, but the testimonial paragraph
     itself stays left-aligned — centering multi-line prose hurts reading. */
  .review-card { text-align: center; }
  .review-top { flex-direction: column; }
  .review-body { text-align: left; }

  /* Puppy filter pills as a centered row instead of hugging the left edge. */
  .filter-row { justify-content: center; }

  /* Footer: a centered stack reads far tidier on a phone than four
     left-aligned columns collapsed on top of each other. */
  .site-footer { text-align: center; }
  .footer-grid > div:first-child { display: flex; flex-direction: column; align-items: center; }
  .site-footer img.footer-logo { margin-inline: auto; }
  .site-footer p { margin-inline: auto; max-width: 42ch; }
  .footer-bottom { flex-direction: column; justify-content: center; text-align: center; gap: 10px; }

  .puppy-grid { grid-template-columns: 1fr; }
  .review-columns { columns: 1; }
  .choice-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }

  /* Header: the logo mark and full-name wordmark were fighting the hamburger
     button for space. Shrink both together and drop the small tagline line —
     "SugerPaws Cavoodles" alone is enough to identify the brand at this size. */
  .header-inner { min-height: 66px; gap: 10px; }
  .brand { gap: 8px; }
  .brand-mark { height: 34px; width: 34px; }
  .brand-name { font-size: 1.08rem; }
  .brand-tag { display: none; }
  .nav-links { inset-block-start: 66px; }
}

/* Smallest phones (SE-width and below): a couple of further reductions so
   the hero headline doesn't wrap to four lines before anything else loads. */
@media (max-width: 400px) {
  .wrap, .wrap--narrow { width: min(100% - 32px, var(--wrap)); }
  h1 { font-size: 1.85rem; }
  h2 { font-size: 1.5rem; }
  .hero-lede { font-size: 1rem; }
  .form-card { padding: 22px 18px; }
}

/* --------------------------------------------------------------- print --- */
@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle { display: none; }
}

/* ------------------------------------------------- review photos -------- */
/* Two ways to show a family photo on a review card:
   1. a round photo in place of the initials  -> <img class="review-avatar" ...>
   2. a wide photo under the review text      -> <figure class="review-photo">  */
img.review-avatar { padding: 0; border: 2px solid var(--sage); }

.review-photo { margin: 4px 0 0; border-radius: var(--r-md); overflow: hidden; background: var(--sage); }
.review-photo img { width: 100%; height: auto; display: block; }
.review-photo figcaption { padding: 10px 14px; font-size: .85rem; color: var(--stone); }

/* --------------------------------------------------------- lightbox ----- */
.review-avatar-btn {
  padding: 0; border: none; background: none; cursor: zoom-in;
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: block;
}
.review-avatar-btn .review-avatar { cursor: zoom-in; }
.review-avatar-btn:focus-visible { outline-offset: 3px; }

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(20, 26, 21, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.lightbox[hidden] { display: none; }
.lightbox-img {
  max-width: min(92vw, 720px); max-height: 86vh;
  width: auto; height: auto;
  border-radius: var(--r-md); box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.lightbox-close {
  position: absolute; top: 18px; right: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,.22); }