/* ==========================================================================
   Homegrown Golden Retrievers — components and layout.
   Breakpoints used throughout: >=1025 desktop, 768-1024 tablet, <=767 mobile,
   <=480 small.
   ========================================================================== */

/* ---- Masthead ----------------------------------------------------------- */
/* Dark header, matching the footer. Cream-on-cream had no presence and the site
   opened on nothing; ink at both ends bookends the warm content between them. */
.grp-masthead {
  background: var(--ink);
  border-bottom: 0;
  position: sticky; top: 0; z-index: 70;
}
/* No backdrop-filter here on purpose: it would make the header the containing
   block for the fixed mobile drawer and trap it inside the header. */
.grp-masthead__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 86px; padding-block: 12px;
}

.grp-logo { display: flex; align-items: center; text-decoration: none; }
/* The mobile drawer is a child of the header, so it shares the header's stacking
   context. The logo and the toggle need their own z-index or the open drawer paints
   over them and there is no visible way to close it. */
.grp-logo, .grp-navtoggle { position: relative; z-index: 80; }
/* display:block matters. As an inline element the width/height below are ignored and
   the artwork expands to fill whatever contains it. That is what broke the footer.
   The mark is PORTRAIT, so it is sized by height with an automatic width. */
.grp-logo__mark { display: block; height: 40px; width: auto; max-width: 260px; flex: none; }
.grp-logo__name {
  font-family: var(--serif); font-weight: 600; font-size: 1.4rem; line-height: 1;
  letter-spacing: -0.015em; color: var(--ink); white-space: nowrap;
}

.grp-nav__list { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.grp-nav__list a {
  text-decoration: none; font-size: 0.95rem; color: #E8E1D6;
  padding-bottom: 4px; border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.grp-nav__list a:hover { color: var(--cream); border-bottom-color: var(--honey-lit); }
.grp-nav__list a[aria-current="page"] { color: var(--honey-lit); border-bottom-color: var(--honey-lit); font-weight: 600; }
.grp-nav__contact { display: none; }

.grp-navtoggle {
  display: none; align-items: center; gap: 10px;
  min-height: 48px; padding: 10px 16px;
  background: transparent; border: 1px solid rgba(255,253,248,.32); border-radius: var(--r-sm);
  color: var(--cream); font-family: var(--serif); font-size: 1rem; cursor: pointer;
}
.grp-navtoggle__bars { position: relative; width: 20px; height: 2px; background: var(--cream); }
.grp-navtoggle__bars::before, .grp-navtoggle__bars::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--cream);
}
.grp-navtoggle__bars::before { top: -6px; }
.grp-navtoggle__bars::after { top: 6px; }
.grp-navtoggle[aria-expanded="true"] .grp-navtoggle__bars { background: transparent; }
.grp-navtoggle[aria-expanded="true"] .grp-navtoggle__bars::before { top: 0; transform: rotate(45deg); }
.grp-navtoggle[aria-expanded="true"] .grp-navtoggle__bars::after { top: 0; transform: rotate(-45deg); }
.grp-navtoggle__bars, .grp-navtoggle__bars::before, .grp-navtoggle__bars::after { transition: transform .18s ease, background .18s ease, top .18s ease; }

/* ---- Hero: full-bleed photograph with the copy overlaid -------------------
   The scrim is a legibility device, not decoration: a dark tint of the brand ink
   weighted to the left where the text sits, so cream copy clears AA over any
   photograph the breeder swaps in later. Re-checked by the design audit at all
   four breakpoints.
   ------------------------------------------------------------------------- */
.grp-hero { position: relative; background: var(--ink); isolation: isolate; }

.grp-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.grp-hero__bg img,
.grp-hero__bg .grp-img--empty {
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%;
  border-radius: 0;
}
/* Two overlapping tints: a flat one so the whole photograph sits down, and a
   left-weighted one so the text column is reliably dark enough. */
.grp-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(20,16,12,.90) 0%, rgba(20,16,12,.72) 34%, rgba(20,16,12,.30) 62%, rgba(20,16,12,.18) 100%),
    rgba(20,16,12,.24);
}

.grp-hero__inner {
  position: relative; z-index: 1;
  display: flex; align-items: center;
  min-height: clamp(520px, 74vh, 780px);
  padding-block: clamp(56px, 8vw, 120px);
}
.grp-hero__copy { max-width: 34rem; }
.grp-hero__title {
  color: var(--cream);
  margin-bottom: 0.55em;
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(0,0,0,.35);
}
.grp-hero__lead {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.22rem);
  color: #EFE7DA;
  max-width: 40ch;
  text-shadow: 0 1px 18px rgba(0,0,0,.35);
}
.grp-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* A button that has to sit on a photograph: solid enough to read anywhere. */
.grp-btn--onimage {
  background: rgba(251,247,240,.14);
  color: var(--cream);
  border-color: rgba(255,253,248,.55);
  backdrop-filter: blur(6px);
}
.grp-btn--onimage:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.grp-hero__caption { display: none; }


/* ---- Sections ----------------------------------------------------------- */
.grp-section { padding-block: var(--step); }
.grp-section--wheat { background: var(--wheat); border-block: 1px solid var(--rule); }
.grp-section--ink { background: var(--ink); color: var(--cream); }
.grp-section--ink .grp-sechead__title { color: var(--cream); }
.grp-section--ink .grp-sechead__label { color: var(--honey-lit); }
.grp-section--ink .grp-sechead__label::before { background: var(--honey-lit); }
.grp-section--ink .grp-sechead__lead { color: #D9CFC0; }

/* ---- Page head ---------------------------------------------------------- */
.grp-pagehead { padding-block: clamp(30px, 4vw, 56px) clamp(20px, 2.4vw, 32px); }
.grp-pagehead__label {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--serif); font-style: italic; color: var(--gold-deep); margin-bottom: 10px;
}
.grp-pagehead__label::before { content: ""; width: 34px; height: 1px; background: var(--gold); }
.grp-pagehead__lead { margin-top: 0.9em; font-size: 1.1rem; color: var(--ink-soft); max-width: 58ch; }
.grp-pagehead--ruled { border-bottom: 1px solid var(--rule); }

/* ---- Grids -------------------------------------------------------------- */
.grp-grid { display: grid; gap: clamp(20px, 2.4vw, 34px); }
.grp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.grp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.grp-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Puppy card --------------------------------------------------------- */
.grp-card {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.grp-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--rule);
}
.grp-card__media img { transition: transform .8s var(--ease); }
.grp-card:hover .grp-card__media img { transform: scale(1.05); }
.grp-card__media { position: relative; display: block; background: var(--wheat); aspect-ratio: 4 / 3; }
.grp-card__media img { width: 100%; height: 100%; object-fit: cover; }
.grp-img--empty { display: block; width: 100%; height: 100%; background: var(--wheat); }
.grp-card__stamp {
  position: absolute; left: 0; bottom: 0; right: 0;
  background: rgba(36, 30, 23, .82); color: var(--cream);
  font-family: var(--sans); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 9px 16px;
  backdrop-filter: blur(3px);
}
.grp-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.grp-card__name { font-size: 1.5rem; }
.grp-card__name a { text-decoration: none; }
.grp-card__name a:hover { color: var(--gold-deep); }
.grp-card__facts { color: var(--ink-soft); font-size: 0.95rem; }
.grp-card__price {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--rule-soft); padding-top: 12px; margin-top: 4px;
}
.grp-card__pricenum { font-family: var(--serif); font-size: 1.42rem; color: var(--ink); }
/* A soft tinted tag with a dot. Warm, but deliberately not the generic pill badge:
   a gentle radius, a tinted ground, and real text rather than a coloured capsule. */
.grp-card__status {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.02em;
  border: 0; border-radius: var(--r-sm); padding: 5px 11px;
}
.grp-card__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.grp-card__status--available { color: #3E5230; background: rgba(74,91,60,.12); }
.grp-card__status--nursery { color: var(--gold-deep); background: rgba(184,121,28,.12); }
.grp-card__status--reserved { color: var(--gold-deep); background: rgba(184,121,28,.14); }
.grp-card__status--sold { color: var(--ink-soft); background: rgba(92,81,69,.10); }
/* Stretch, not hug: three cards in a row with three different button widths is
   the kind of small unevenness that makes a grid look unfinished. */
.grp-card__body .grp-btn { margin-top: auto; align-self: stretch; }
.grp-card--sold .grp-card__media img { filter: saturate(.55); }

/* ---- Filter chips -------------------------------------------------------- */
.grp-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  padding-bottom: 22px; margin-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--rule);
}
.grp-filter__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.grp-filter__label {
  font-family: var(--serif); font-style: italic; color: var(--ink-soft);
  font-size: 0.94rem; margin-right: 4px;
}
.grp-chip {
  border: 1px solid var(--rule); background: var(--card); color: var(--ink);
  border-radius: var(--r-sm); padding: 9px 16px; min-height: 42px;
  font-family: var(--sans); font-size: 0.92rem; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.grp-chip:hover { border-color: var(--gold); }
.grp-chip.is-on { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--cream); font-weight: 600; }
.grp-filter__count { margin-left: auto; color: var(--ink-soft); font-size: 0.92rem; }
.grp-filter__none { margin-top: 8px; }

/* ---- Parent dog card ---------------------------------------------------- */
.grp-dog { display: flex; flex-direction: column; }
.grp-dog__media {
  display: block; background: var(--wheat); aspect-ratio: 4 / 5;
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.grp-dog:hover .grp-dog__media { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.grp-dog__media img { transition: transform .8s var(--ease); }
.grp-dog:hover .grp-dog__media img { transform: scale(1.05); }
.grp-dog__media img { width: 100%; height: 100%; object-fit: cover; }
.grp-dog__body { border-top: 1px solid var(--rule); margin-top: 12px; padding-top: 12px; }
.grp-dog__role { font-family: var(--serif); font-style: italic; color: var(--gold-deep); font-size: 0.94rem; }
.grp-dog__name { font-size: 1.4rem; margin-top: 2px; }
.grp-dog__name a { text-decoration: none; }
.grp-dog__name a:hover { color: var(--gold-deep); }
.grp-dog__formal { font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: 0.95rem; }
.grp-dog__temp { margin-top: 10px; color: var(--ink-soft); font-size: 0.98rem; }
.grp-dog--compact .grp-dog__media { aspect-ratio: 1 / 1; }

/* ---- Reviews ------------------------------------------------------------ */
.grp-review {
  background: var(--card); border: 1px solid var(--rule-soft); border-radius: var(--r);
  padding: 26px 26px 24px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.grp-review:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.grp-section--wheat .grp-review, .grp-section--wheat .grp-res, .grp-section--wheat .grp-card { background: var(--card); }
.grp-review__stars { color: var(--gold-deep); font-size: 1.05rem; letter-spacing: 0.12em; }
.grp-review__text { font-family: var(--serif); font-size: 1.06rem; line-height: 1.55; color: var(--ink); }
.grp-review__text p + p { margin-top: 0.8em; }
.grp-review__by { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; }
.grp-review__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; background: var(--wheat); }
.grp-review__name { display: block; font-weight: 600; }
.grp-review__meta { display: block; font-size: 0.88rem; color: var(--ink-soft); }

/* ---- Feature list (why families choose us) ------------------------------
   A warm card with an icon, not a ruled column of text. This block is the main
   reason the page used to read as a report.
   ------------------------------------------------------------------------- */
.grp-feature {
  background: var(--card); border-radius: var(--r); padding: 26px 24px 28px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--rule-soft);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.grp-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.grp-feature__icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--wheat); color: var(--gold-deep);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.grp-feature__icon svg { width: 26px; height: 26px; }
.grp-feature__title { font-size: 1.2rem; margin-bottom: 10px; }
.grp-feature__text { color: var(--ink-soft); font-size: 0.98rem; }
.grp-section--wheat .grp-feature__icon { background: var(--paper); }

/* ---- Puppy detail ------------------------------------------------------- */
.grp-puppy { padding-block: clamp(28px, 3.4vw, 48px); }
.grp-puppy__top { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 3.6vw, 56px); align-items: start; }
.grp-puppy__gallery { display: flex; flex-direction: column; gap: 12px; }
.grp-puppy__lead { border-radius: var(--r-lg); overflow: hidden; background: var(--wheat); aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
.grp-puppy__lead img { width: 100%; height: 100%; object-fit: cover; }
.grp-puppy__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.grp-puppy__thumbs button {
  padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); background: var(--wheat);
  aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.grp-puppy__thumbs button:hover { transform: translateY(-2px); }
.grp-puppy__thumbs button[aria-current="true"] { border-color: var(--gold); }
.grp-puppy__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.grp-puppy__name { margin-bottom: 8px; }
.grp-puppy__bio { color: var(--ink-soft); font-size: 1.06rem; }
.grp-puppy__price {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  border-block: 1px solid var(--rule); padding-block: 20px; margin-block: 24px;
}
.grp-puppy__pricegroup { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.grp-puppy__inquire { flex: none; }
.grp-puppy__pricenum { font-family: var(--serif); font-size: 2.1rem; }

/* Term-sheet style definition list, not a row of shadowed stat cards. */
.grp-specs { border-top: 1px solid var(--rule); }
.grp-specs__row { display: grid; grid-template-columns: 11rem 1fr; gap: 16px; border-bottom: 1px solid var(--rule-soft); padding-block: 11px; }
.grp-specs__key { font-family: var(--serif); font-style: italic; color: var(--ink-soft); }
.grp-specs__val { color: var(--ink); }

.grp-health {
  background: var(--wheat); border: 0; border-radius: var(--r);
  padding: 22px 24px; margin-top: 26px; box-shadow: var(--shadow-sm);
}
.grp-health__label { font-family: var(--serif); font-style: italic; color: var(--gold-deep); margin-bottom: 6px; }

.grp-parents { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: var(--step); }

.grp-sold {
  border: 0; border-radius: var(--r-lg); background: var(--wheat);
  padding: clamp(28px, 3.4vw, 48px); text-align: left; box-shadow: var(--shadow-sm);
}
.grp-sold__title { margin-bottom: 10px; }
.grp-sold__text { color: var(--ink-soft); max-width: 56ch; }
.grp-sold .grp-btn { margin-top: 20px; }

/* ---- Optional per-puppy video ------------------------------------------- */
.grp-puppy__video { margin: 0; }
.grp-puppy__video iframe,
.grp-puppy__video video { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: var(--wheat); }
.grp-puppy__video figcaption {
  border-top: 1px solid var(--rule); margin-top: 10px; padding-top: 8px;
  font-family: var(--serif); font-style: italic; font-size: 0.9rem; color: var(--ink-soft);
}

/* ---- Inquiry form ------------------------------------------------------- */
.grp-inquiry {
  scroll-margin-top: 100px;
  border-top: 2px solid var(--ink);
  padding-top: clamp(26px, 3vw, 42px);
  margin-top: var(--step);
}
.grp-inquiry__title { margin-bottom: 10px; }
.grp-inquiry__note { color: var(--ink-soft); max-width: 60ch; }
.grp-inquiry__intro { margin-bottom: 26px; }
.grp-form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 22px; }
.grp-form__row { margin: 0; }
.grp-form__row--wide { grid-column: 1 / -1; }

/* ---- Contract ----------------------------------------------------------- */
.grp-contract { max-width: 74ch; }
.grp-contract__clause { border-top: 1px solid var(--rule); padding-top: 18px; margin-top: 22px; }
.grp-contract__clause:first-child { margin-top: 0; }
.grp-contract__h { font-size: 1.2rem; margin-bottom: 10px; }
.grp-contract__p { color: var(--ink-soft); margin-bottom: 0.9em; }
.grp-contract__p:last-child { margin-bottom: 0; }
.grp-contract__ul { list-style: none; padding: 0; margin-top: 4px; }
.grp-contract__ul li { position: relative; padding-left: 1.4em; margin-top: 0.5em; color: var(--ink-soft); }
.grp-contract__ul li::before {
  content: ""; position: absolute; left: 0; top: 0.72em; width: 14px; height: 1px; background: var(--gold);
}

.grp-consent { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.grp-consent__row {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--card);
  padding: 14px 16px; cursor: pointer; font-family: var(--sans); font-size: 0.97rem;
}
.grp-consent__row:hover { border-color: var(--gold); }
.grp-consent__row input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--gold-deep); }

.grp-sign { margin-top: 26px; }
.grp-sign__input {
  font-family: var(--serif); font-style: italic; font-size: 1.55rem;
  padding: 14px 16px; background: var(--card);
}
.grp-form select {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r);
}
.grp-form select:focus { border-color: var(--gold-deep); }

/* ---- Resource list ------------------------------------------------------ */
.grp-res {
  background: var(--card); border: 1px solid var(--rule-soft); border-radius: var(--r);
  padding: 22px 24px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.grp-res:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.grp-res__stage { font-family: var(--serif); font-style: italic; color: var(--gold-deep); font-size: 0.92rem; }
.grp-res__title { font-size: 1.16rem; }
.grp-res__title a { text-decoration: none; }
.grp-res__title a:hover { color: var(--gold-deep); text-decoration: underline; }
.grp-res__desc { color: var(--ink-soft); font-size: 0.98rem; }
.grp-res__src { font-size: 0.86rem; color: var(--ink-soft); }

/* ---- Footer ------------------------------------------------------------- */
.grp-footer { background: var(--ink); color: #D9CFC0; padding-block: clamp(40px, 4vw, 60px) 24px; }
/* No margin above the footer: it sits directly under the closing CTA band, which is
   also dark. A gap there reads as a rendering fault rather than as spacing. */
.grp-main + .grp-footer { margin-top: 0; }
.grp-main > .grp-wrap:last-child + .grp-footer { margin-top: var(--step); }
.grp-footer__top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: clamp(28px, 3vw, 48px);
  align-items: start;
}
.grp-footer__lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.grp-footer .grp-logo__mark { height: 44px; width: auto; max-width: 280px; }
.grp-footer__name { font-family: var(--serif); font-size: 1.3rem; line-height: 1; color: var(--cream); }
.grp-footer__blurb { font-size: 0.95rem; line-height: 1.6; max-width: 40ch; }
.grp-footer__email { margin-top: 14px; }
.grp-footer__email a { color: var(--honey-lit); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.grp-footer__note { margin-top: 6px; font-size: 0.89rem; }
.grp-footer__heading {
  font-family: var(--serif); font-size: 1rem; line-height: 1; color: var(--cream);
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,253,248,.18);
}
.grp-footer__list li + li { margin-top: 9px; }
.grp-footer__list a { text-decoration: none; font-size: 0.94rem; }
.grp-footer__list a:hover { color: var(--honey-lit); text-decoration: underline; text-underline-offset: 3px; }
.grp-footer__legal {
  margin-top: clamp(30px, 3vw, 44px); padding-top: 18px;
  border-top: 1px solid rgba(255,253,248,.18);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 0.85rem;
}
.grp-footer__legal a { color: var(--honey-lit); text-decoration: underline; text-underline-offset: 3px; }

.grp-icon { display: inline-flex; }
.grp-icon svg { display: block; width: 100%; height: 100%; }
.grp-feature__icon .grp-icon { width: 26px; height: 26px; }

/* ---- Breadcrumbs -------------------------------------------------------- */
.grp-crumbs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 22px;
  font-family: var(--serif); font-size: 0.94rem; color: var(--ink-soft);
}
.grp-crumbs a { color: var(--gold-deep); text-decoration: none; }
.grp-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- FAQ: ruled rows, not an accordion of pill-headed cards -------------- */
.grp-faq { max-width: 74ch; display: flex; flex-direction: column; gap: 14px; }
.grp-faq__item {
  background: var(--card); border: 1px solid var(--rule-soft); border-radius: var(--r);
  padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.grp-faq__q { font-size: 1.2rem; margin-bottom: 8px; }
.grp-faq__a { color: var(--ink-soft); }

/* ---- Puppy page extras -------------------------------------------------- */
.grp-health__more { margin-top: 8px; font-size: 0.95rem; }
.grp-health__more a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.grp-puppy__cta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.grp-puppy__story { margin-top: var(--step); }

/* ---- Misc --------------------------------------------------------------- */
.grp-teaser { border-top: 1px solid var(--rule); padding-top: 16px; margin-top: 16px; }
.grp-empty { border: 0; background: var(--wheat); border-radius: var(--r-lg); padding: clamp(28px, 3.4vw, 48px); box-shadow: var(--shadow-sm); }
.grp-empty__title { margin-bottom: 8px; }
.grp-cta { text-align: left; }
.grp-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.grp-more { margin-top: var(--step); }

/* ==========================================================================
   TABLET  768 - 1024
   ========================================================================== */
@media (max-width: 1024px) {
  .grp-nav__list { gap: 16px; }
  .grp-nav__list a { font-size: 0.9rem; }
  .grp-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grp-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grp-footer__top { grid-template-columns: 1fr 1fr; }
  .grp-puppy__top { grid-template-columns: 1fr; }
  .grp-hero__inner { min-height: clamp(460px, 62vh, 620px); }
  .grp-hero__copy { max-width: 30rem; }
}

/* ==========================================================================
   MOBILE  <= 767
   ========================================================================== */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .grp-wrap { padding-inline: 18px; }
  .grp-masthead__inner { min-height: 68px; }
  .grp-logo__mark { height: 34px; width: auto; max-width: 210px; }

  .grp-navtoggle { display: inline-flex; }
  .grp-nav {
    position: fixed; inset: 0; z-index: 60;
    /* Ink, matching the header. When the header went dark the nav links were
       recoloured for it, and leaving the drawer cream made them wash out. */
    background: var(--ink);
    padding: 92px 18px 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .22s ease;
    visibility: hidden;
  }
  .grp-nav.is-open { transform: translateX(0); visibility: visible; }
  .grp-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .grp-nav__list li { border-bottom: 1px solid rgba(255,253,248,.16); }
  .grp-nav__list a {
    display: block; padding: 16px 2px; font-family: var(--serif); font-size: 1.2rem;
    color: var(--cream); border-bottom: none; min-height: 48px;
  }
  .grp-nav__list a[aria-current="page"] { color: var(--honey-lit); }
  .grp-nav__contact { display: block; margin-top: 26px; }
  .grp-nav__contact a { color: var(--honey-lit); }
  body.grp-navopen { overflow: hidden; }

  .grp-hero__inner { min-height: 76vh; align-items: flex-end; padding-block: 56px 44px; }
  .grp-hero__copy { max-width: none; }
  .grp-hero__bg img { object-position: 62% 50%; }
  /* No left column on a phone, so the scrim runs bottom-up instead. */
  .grp-hero__bg::after {
    background:
      linear-gradient(to top, rgba(20,16,12,.92) 0%, rgba(20,16,12,.74) 42%, rgba(20,16,12,.36) 74%, rgba(20,16,12,.28) 100%),
      rgba(20,16,12,.20);
  }

  .grp-filter { gap: 14px; }
  .grp-filter__group { width: 100%; }
  .grp-filter__count { margin-left: 0; }

  .grp-grid--3, .grp-grid--2, .grp-grid--4 { grid-template-columns: 1fr; }
  .grp-form__grid { grid-template-columns: 1fr; }
  .grp-parents { grid-template-columns: 1fr; }
  /* Two specs per line on a phone: Age beside Date of birth, Sex beside Coat
     colour, so the list is not a long column to scroll past. Condition is prose
     and spans the full width. */
  .grp-specs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .grp-specs__row { grid-template-columns: 1fr; gap: 2px; padding-block: 10px; }
  .grp-specs__row--wide { grid-column: 1 / -1; }
  .grp-footer__top { grid-template-columns: 1fr; }
  .grp-footer__blurb { max-width: none; }
  .grp-puppy__thumbs { grid-template-columns: repeat(4, 1fr); }
  .grp-flow--lede > p:first-of-type::first-letter { font-size: 3.1em; }
}

/* ==========================================================================
   SMALL  <= 480
   ========================================================================== */
@media (max-width: 480px) {
  .grp-wrap { padding-inline: 15px; }
  .grp-logo__mark { height: 30px; width: auto; max-width: 185px; }
  .grp-navtoggle__label { display: none; }
  .grp-navtoggle { padding: 12px; }
  .grp-card__body { padding: 16px 16px 20px; }
  .grp-card__price { flex-direction: column; align-items: flex-start; gap: 6px; }
  .grp-btn { width: 100%; }
  .grp-card__body .grp-btn { align-self: stretch; }
  .grp-hero__actions .grp-btn, .grp-cta__actions .grp-btn { width: 100%; }
  .grp-puppy__thumbs { grid-template-columns: repeat(3, 1fr); }
  .grp-footer__legal { flex-direction: column; gap: 8px; }
}

/* ==========================================================================
   Contract wizard
   ========================================================================== */
.grp-sign-wizard { margin-top: var(--step); }

.grp-steps {
  display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; padding: 0;
  margin: 0 0 clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--rule); padding-bottom: 20px;
}
.grp-steps__item { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); }
.grp-steps__num {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--wheat); color: var(--ink-soft);
  font-family: var(--serif); font-size: 0.95rem;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.grp-steps__label { font-size: 0.95rem; }
.grp-steps__item.is-on { color: var(--ink); font-weight: 600; }
.grp-steps__item.is-on .grp-steps__num { background: var(--gold-deep); color: var(--cream); }
.grp-steps__item.is-done .grp-steps__num { background: var(--moss); color: var(--cream); }

.grp-step { display: none; border: 0; padding: 0; margin: 0; }
.grp-step.is-on { display: block; }
.grp-step__title {
  font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.15; padding: 0; margin-bottom: 12px; color: var(--ink);
}
.grp-step__note { color: var(--ink-soft); max-width: 60ch; margin-bottom: 26px; }
.grp-step__sub { font-family: var(--serif); font-size: 1.3rem; margin: 34px 0 14px; }
.grp-step__nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ---- Puppy picker -------------------------------------------------------- */
.grp-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grp-pick__item {
  position: relative; display: flex; flex-direction: column; cursor: pointer;
  background: var(--card); border: 2px solid var(--rule-soft); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.grp-pick__item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.grp-pick__item.is-on { border-color: var(--gold-deep); box-shadow: var(--shadow); }
.grp-pick__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.grp-pick__item input:focus-visible ~ .grp-pick__media { outline: 2px solid var(--gold-deep); outline-offset: -2px; }
.grp-pick__media { display: block; aspect-ratio: 4 / 3; background: var(--wheat); }
.grp-pick__media img { width: 100%; height: 100%; object-fit: cover; }
.grp-pick__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.grp-pick__name { font-family: var(--serif); font-size: 1.35rem; line-height: 1; color: var(--ink); }
.grp-pick__facts { color: var(--ink-soft); font-size: 0.9rem; }
.grp-pick__price { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); }
.grp-pick__flag { font-size: 0.8rem; color: var(--gold-deep); font-weight: 600; }

/* ---- Radio choices ------------------------------------------------------- */
.grp-choice { display: flex; flex-direction: column; gap: 12px; max-width: 62ch; }
.grp-choice__item {
  display: flex; gap: 14px; align-items: flex-start; cursor: pointer;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 16px 18px; transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.grp-choice__item:hover { border-color: var(--gold); }
.grp-choice__item:has(input:checked) { border-color: var(--gold-deep); box-shadow: var(--shadow-sm); }
.grp-choice__item input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--gold-deep); }
.grp-choice__item strong { display: block; color: var(--ink); font-weight: 600; }
.grp-choice__item em { display: block; margin-top: 4px; font-style: normal; color: var(--ink-soft); font-size: 0.93rem; }
.grp-choice--tight .grp-choice__item { padding: 14px 18px; }

/* ---- Summary ------------------------------------------------------------- */
.grp-summary { background: var(--wheat); border-radius: var(--r); padding: 24px 26px; margin-bottom: 28px; }
.grp-summary__h { font-family: var(--serif); font-size: 1.25rem; margin-bottom: 14px; }
.grp-summary__list { margin: 0; }
.grp-summary__row {
  display: grid; grid-template-columns: 11rem 1fr; gap: 14px;
  padding-block: 9px; border-top: 1px solid rgba(92,81,69,.14);
}
.grp-summary__row:first-child { border-top: 0; }
.grp-summary__row dt { font-family: var(--serif); font-style: italic; color: var(--ink-soft); margin: 0; }
.grp-summary__row dd { margin: 0; color: var(--ink); }

/* The full agreement in a scroll box, so step four is not a mile long. */
.grp-contract--scroll {
  max-height: 44vh; overflow-y: auto; padding: 22px 24px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  max-width: none;
}

/* ---- Signature pad ------------------------------------------------------- */
.grp-draw { margin-top: 36px; }
.grp-draw__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.grp-draw__label { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); margin: 0; }
.grp-draw__clear {
  background: transparent; border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 8px 16px; min-height: 40px; cursor: pointer; font-size: 0.9rem; color: var(--ink-soft);
}
.grp-draw__clear:hover { border-color: var(--ink); color: var(--ink); }
.grp-draw__pad {
  display: block; width: 100%; aspect-ratio: 10 / 3;
  background: var(--card); border: 2px dashed var(--rule); border-radius: var(--r);
  touch-action: none; cursor: crosshair;
}
.grp-draw__pad.is-missing { border-color: #8C2F1B; background: #FDF4F1; }
.grp-draw__hint { margin-top: 10px; font-size: 0.9rem; color: var(--ink-soft); }
.grp-draw__typed { margin-top: 26px; }
.grp-draw__typed input { font-family: var(--serif); font-size: 1.4rem; }

@media (max-width: 1024px) {
  .grp-pick { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .grp-pick { grid-template-columns: 1fr; }
  .grp-steps { gap: 8px 16px; }
  .grp-steps__label { font-size: 0.85rem; }
  .grp-summary__row { grid-template-columns: 1fr; gap: 2px; }
  .grp-contract--scroll { max-height: 50vh; padding: 18px; }
  .grp-draw__pad { aspect-ratio: 3 / 2; }
  .grp-step__nav .grp-btn { width: 100%; }
}