/* ==========================================================================
   Homestead — components and layout. Ported from the sibling build at the owner's
   direction and re-tokened to this site's palette.
   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. */
.hsg-masthead {
  background: var(--dark-deep);
  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. */
.hsg-masthead__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 86px; padding-block: 12px;
}

.hsg-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. */
.hsg-logo, .hsg-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. */
.hsg-logo__lockup { display: flex; align-items: center; gap: 12px; }
.hsg-logo__icon { display: block; height: 42px; width: 42px; flex: none; }
/* The wordmark is live text in Fraunces, not an image: it stays crisp at any size and
   it reflows when the business name in hsg-config.php changes. */
.hsg-logo__word { display: flex; flex-direction: column; line-height: 1.02; }
/* The masthead and the footer are both dark grounds, so the wordmark takes the cream
   explicitly. Inheriting here left it the body ink, which is a green-black on a deep
   green header: technically present and completely unreadable. */
.hsg-logo__word-1 {
  font-family: var(--serif); font-weight: 600; font-size: 1.34rem;
  letter-spacing: -0.02em; color: var(--cream);
}
.hsg-logo__word-2 {
  font-family: var(--sans); font-size: .82rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--honey-lit);
}
.hsg-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;
}

.hsg-nav { display: flex; align-items: center; gap: 22px; }
.hsg-nav__list { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hsg-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);
}
.hsg-nav__list a:hover { color: var(--cream); border-bottom-color: var(--honey-lit); }
.hsg-nav__list a[aria-current="page"] { color: var(--honey-lit); border-bottom-color: var(--honey-lit); font-weight: 600; }
/* The one action a buyer needs, so it does not look like the five links beside it.
   Sits inside the nav on desktop and at the foot of the drawer on a phone. */
.hsg-nav__cta { margin-left: 8px; }
.hsg-nav__cta .hsg-btn { padding: 10px 18px; font-size: 0.92rem; }

.hsg-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;
}
.hsg-navtoggle__bars { position: relative; width: 20px; height: 2px; background: var(--cream); }
.hsg-navtoggle__bars::before, .hsg-navtoggle__bars::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--cream);
}
.hsg-navtoggle__bars::before { top: -6px; }
.hsg-navtoggle__bars::after { top: 6px; }
.hsg-navtoggle[aria-expanded="true"] .hsg-navtoggle__bars { background: transparent; }
.hsg-navtoggle[aria-expanded="true"] .hsg-navtoggle__bars::before { top: 0; transform: rotate(45deg); }
.hsg-navtoggle[aria-expanded="true"] .hsg-navtoggle__bars::after { top: 0; transform: rotate(-45deg); }
.hsg-navtoggle__bars, .hsg-navtoggle__bars::before, .hsg-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.
   ------------------------------------------------------------------------- */
.hsg-hero { position: relative; background: var(--dark); isolation: isolate; }
/* If the hero image slot is empty the band still has to read as a deliberate dark
   band rather than as a broken image. */
.hsg-hero__bg { background: var(--dark); }

.hsg-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hsg-hero__bg img,
.hsg-hero__bg .hsg-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. */
.hsg-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);
}

.hsg-hero__inner {
  position: relative; z-index: 1;
  display: flex; align-items: center;
  min-height: clamp(520px, 74vh, 780px);
  padding-block: clamp(56px, 8vw, 120px);
}
.hsg-hero__copy { max-width: 34rem; }
.hsg-hero__title {
  color: var(--cream);
  margin-bottom: 0.55em;
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(0,0,0,.35);
}
.hsg-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);
}
.hsg-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. */
.hsg-btn--onimage {
  background: rgba(251,247,240,.14);
  color: var(--cream);
  border-color: rgba(255,253,248,.55);
  backdrop-filter: blur(6px);
}
.hsg-btn--onimage:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.hsg-hero__caption { display: none; }


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

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

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

/* ---- Puppy card --------------------------------------------------------- */
.hsg-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);
}
.hsg-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--rule);
}
.hsg-card__media img { transition: transform .8s var(--ease); }
.hsg-card:hover .hsg-card__media img { transform: scale(1.05); }
/* Portrait, because the photographs are portrait. 34 of the 37 supplied photographs
   are between 0.75 and 0.89 wide-to-tall, and forcing those into a 4/3 landscape box
   kept only 56% of the image height and cut the tops of the puppies' heads off. At
   4/5 a 0.75 photograph keeps about 94% of its height. The focal point sits above
   centre because in a standing or sitting dog photograph the head is in the upper
   half, so any crop that is still needed takes it off the feet, never the face. */
.hsg-card__media { position: relative; display: block; background: var(--wheat); aspect-ratio: 4 / 5; }
.hsg-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.hsg-img--empty { display: block; width: 100%; height: 100%; background: var(--wheat); }
.hsg-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);
}
.hsg-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hsg-card__name { font-size: 1.5rem; }
.hsg-card__name a { text-decoration: none; }
.hsg-card__name a:hover { color: var(--gold-deep); }
.hsg-card__facts { color: var(--ink-soft); font-size: 0.95rem; }
.hsg-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;
}
.hsg-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. */
.hsg-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;
}
.hsg-card__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hsg-card__status--available { color: #3E5230; background: rgba(74,91,60,.12); }
.hsg-card__status--nursery { color: var(--gold-deep); background: rgba(184,121,28,.12); }
.hsg-card__status--reserved { color: var(--gold-deep); background: rgba(184,121,28,.14); }
.hsg-card__status--placed { color: var(--ink-soft); background: rgba(59,71,63,.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. */
.hsg-card__body .hsg-btn { margin-top: auto; align-self: stretch; }
.hsg-card--placed .hsg-card__media img { filter: saturate(.55); }

/* ---- Filter chips -------------------------------------------------------- */
.hsg-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);
}
.hsg-filter__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hsg-filter__label {
  font-family: var(--serif); font-style: italic; color: var(--ink-soft);
  font-size: 0.94rem; margin-right: 4px;
}
.hsg-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);
}
.hsg-chip:hover { border-color: var(--gold); }
.hsg-chip.is-on { background: var(--clay); border-color: var(--clay); color: var(--cream); font-weight: 600; }
.hsg-filter__count { margin-left: auto; color: var(--ink-soft); font-size: 0.92rem; }
.hsg-filter__none { margin-top: 8px; }

/* ---- Parent dog card ---------------------------------------------------- */
.hsg-dog { display: flex; flex-direction: column; }
.hsg-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);
}
.hsg-dog:hover .hsg-dog__media { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.hsg-dog__media img { transition: transform .8s var(--ease); }
.hsg-dog:hover .hsg-dog__media img { transform: scale(1.05); }
.hsg-dog__media img { width: 100%; height: 100%; object-fit: cover; }
.hsg-dog__body { border-top: 1px solid var(--rule); margin-top: 12px; padding-top: 12px; }
.hsg-dog__role { font-family: var(--serif); font-style: italic; color: var(--gold-deep); font-size: 0.94rem; }
.hsg-dog__name { font-size: 1.4rem; margin-top: 2px; }
.hsg-dog__name a { text-decoration: none; }
.hsg-dog__name a:hover { color: var(--gold-deep); }
.hsg-dog__formal { font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: 0.95rem; }
.hsg-dog__temp { margin-top: 10px; color: var(--ink-soft); font-size: 0.98rem; }
.hsg-dog--compact .hsg-dog__media { aspect-ratio: 1 / 1; }

/* ---- Reviews ------------------------------------------------------------ */
.hsg-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);
}
.hsg-review:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.hsg-section--wheat .hsg-review, .hsg-section--wheat .hsg-res, .hsg-section--wheat .hsg-card { background: var(--card); }
.hsg-review__stars { color: var(--gold-deep); font-size: 1.05rem; letter-spacing: 0.12em; }
.hsg-review__text { font-family: var(--serif); font-size: 1.06rem; line-height: 1.55; color: var(--ink); }
.hsg-review__text p + p { margin-top: 0.8em; }
.hsg-review__by { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; }
.hsg-review__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; background: var(--wheat); }
.hsg-review__name { display: block; font-weight: 600; }
.hsg-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.
   ------------------------------------------------------------------------- */
.hsg-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);
}
.hsg-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.hsg-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;
}
.hsg-feature__icon svg { width: 26px; height: 26px; }
.hsg-feature__title { font-size: 1.2rem; margin-bottom: 10px; }
.hsg-feature__text { color: var(--ink-soft); font-size: 0.98rem; }
.hsg-section--wheat .hsg-feature__icon { background: var(--paper); }

/* ---- Puppy detail ------------------------------------------------------- */
.hsg-puppy { padding-block: clamp(28px, 3.4vw, 48px); }
.hsg-puppy__top { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 3.6vw, 56px); align-items: start; }
.hsg-puppy__gallery { display: flex; flex-direction: column; gap: 12px; }
.hsg-puppy__lead { border-radius: var(--r-lg); overflow: hidden; background: var(--wheat); aspect-ratio: 4 / 5; box-shadow: var(--shadow); }
.hsg-puppy__lead img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.hsg-puppy__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hsg-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);
}
.hsg-puppy__thumbs button img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.hsg-puppy__thumbs button:hover { transform: translateY(-2px); }
.hsg-puppy__thumbs button[aria-current="true"] { border-color: var(--gold); }
.hsg-puppy__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.hsg-puppy__name { margin-bottom: 8px; }
.hsg-puppy__bio { color: var(--ink-soft); font-size: 1.06rem; }
/* Price and the action read as one thought, so they share a row at EVERY width.
   nowrap is deliberate: with wrap the button dropped to its own full-width line on a
   phone, which is exactly what the owner asked us to stop doing. */
.hsg-puppy__price {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: nowrap;
  border-block: 1px solid var(--rule); padding-block: 20px; margin-block: 24px;
}
.hsg-puppy__pricegroup { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }
.hsg-puppy__inquire { flex: none; white-space: nowrap; }
.hsg-puppy__pricenum { font-family: var(--serif); font-size: 2.1rem; }

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

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

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

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

/* ---- Optional per-puppy video, sits below the thumbnail strip ----------- */
.hsg-puppy__video { margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--rule-soft); }
.hsg-puppy__video iframe,
.hsg-puppy__video video {
  width: 100%; aspect-ratio: 16 / 9; border: 0; display: block;
  background: var(--wheat); border-radius: var(--r-lg);
}
.hsg-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 ------------------------------------------------------- */
.hsg-inquiry {
  scroll-margin-top: 100px;
  border-top: 2px solid var(--ink);
  padding-top: clamp(26px, 3vw, 42px);
  margin-top: var(--step);
}
.hsg-inquiry__title { margin-bottom: 10px; }
.hsg-inquiry__note { color: var(--ink-soft); max-width: 60ch; }
.hsg-inquiry__intro { margin-bottom: 26px; }
.hsg-form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 22px; }
.hsg-form__row { margin: 0; }
.hsg-form__row--wide { grid-column: 1 / -1; }

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

.hsg-consent { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.hsg-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;
}
.hsg-consent__row:hover { border-color: var(--gold); }
.hsg-consent__row input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--gold-deep); }

.hsg-sign { margin-top: 26px; }
.hsg-sign__input {
  font-family: var(--serif); font-style: italic; font-size: 1.55rem;
  padding: 14px 16px; background: var(--card);
}
.hsg-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);
}
.hsg-form select:focus { border-color: var(--gold-deep); }

/* ---- Resource list ------------------------------------------------------ */
.hsg-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);
}
.hsg-res:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.hsg-res__stage { font-family: var(--serif); font-style: italic; color: var(--gold-deep); font-size: 0.92rem; }
.hsg-res__title { font-size: 1.16rem; }
.hsg-res__title a { text-decoration: none; }
.hsg-res__title a:hover { color: var(--gold-deep); text-decoration: underline; }
.hsg-res__desc { color: var(--ink-soft); font-size: 0.98rem; }
.hsg-res__src { font-size: 0.86rem; color: var(--ink-soft); }

/* ---- Footer ------------------------------------------------------------- */
.hsg-footer { background: var(--dark-deep); color: var(--foot-text); 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. */
.hsg-main + .hsg-footer { margin-top: 0; }
.hsg-main > .hsg-wrap:last-child + .hsg-footer { margin-top: var(--step); }
.hsg-footer__top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: clamp(28px, 3vw, 48px);
  align-items: start;
}
.hsg-footer__lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hsg-footer .hsg-logo__icon { height: 46px; width: 46px; }
.hsg-footer .hsg-logo__word-1 { font-size: 1.46rem; }
.hsg-footer__name { font-family: var(--serif); font-size: 1.3rem; line-height: 1; color: var(--cream); }
.hsg-footer__blurb { font-size: 0.95rem; line-height: 1.6; max-width: 40ch; }
.hsg-footer__email { margin-top: 14px; }
.hsg-footer__email a { color: var(--honey-lit); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.hsg-footer__note { margin-top: 6px; font-size: 0.89rem; }
.hsg-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);
}
.hsg-footer__list li + li { margin-top: 9px; }
.hsg-footer__list a { text-decoration: none; font-size: 0.94rem; }
.hsg-footer__list a:hover { color: var(--honey-lit); text-decoration: underline; text-underline-offset: 3px; }
.hsg-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;
}
.hsg-footer__legal a { color: var(--honey-lit); text-decoration: underline; text-underline-offset: 3px; }

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

/* ---- Breadcrumbs -------------------------------------------------------- */
.hsg-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);
}
.hsg-crumbs a { color: var(--gold-deep); text-decoration: none; }
.hsg-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

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

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

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

/* ==========================================================================
   MOBILE  <= 767
   ========================================================================== */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .hsg-wrap { padding-inline: 18px; }
  .hsg-masthead__inner { min-height: 68px; }
  .hsg-logo__icon { height: 36px; width: 36px; }
  .hsg-logo__word-1 { font-size: 1.18rem; }

  .hsg-navtoggle { display: inline-flex; }
  .hsg-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(--dark-deep);
    padding: 92px 18px 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .22s ease;
    visibility: hidden;
  }
  .hsg-nav.is-open { transform: translateX(0); visibility: visible; }
  .hsg-nav { display: block; }
  .hsg-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .hsg-nav__list li { border-bottom: 1px solid rgba(255,253,248,.16); }
  .hsg-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;
  }
  .hsg-nav__list a[aria-current="page"] { color: var(--honey-lit); }
  .hsg-nav__cta { margin: 26px 0 0; }
  .hsg-nav__cta .hsg-btn { display: block; width: 100%; text-align: center; padding: 15px 18px; font-size: 1.02rem; }
  body.hsg-navopen { overflow: hidden; }

  .hsg-hero__inner { min-height: 76vh; align-items: flex-end; padding-block: 56px 44px; }
  .hsg-hero__copy { max-width: none; }
  /* Centre, not 62%. The old value was chosen for a wide generated kitchen shot and
     it pushed the people and the dogs out of a phone crop entirely. */
  .hsg-hero__bg img { object-position: 42% 42%; }
  /* No left column on a phone, so the scrim runs bottom-up. It used to reach .92 at
     the foot and .74 at not quite half height, plus a flat .20 over everything, which
     on a phone meant the photograph was a dark smudge and the hero read as an empty
     box with words on it. The gradient now stays clear through the top two thirds and
     only darkens under the text, which is the only place it has to. */
  .hsg-hero__bg::after {
    background: linear-gradient(
      to top,
      rgba(20,16,12,.86) 0%,
      rgba(20,16,12,.68) 30%,
      rgba(20,16,12,.30) 58%,
      rgba(20,16,12,.06) 82%,
      rgba(20,16,12,0) 100%
    );
  }

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

  .hsg-grid--3, .hsg-grid--2, .hsg-grid--4 { grid-template-columns: 1fr; }
  .hsg-form__grid { grid-template-columns: 1fr; }
  .hsg-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. */
  .hsg-specs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .hsg-specs__row { grid-template-columns: 1fr; gap: 2px; padding-block: 10px; }
  .hsg-specs__row--wide { grid-column: 1 / -1; }
  /* Price left, Inquire Now right, one row. The status tag drops beneath the number
     rather than beside it so the group stays narrow enough for both to fit. */
  .hsg-puppy__pricegroup { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hsg-puppy__price { gap: 14px; }
  .hsg-footer__top { grid-template-columns: 1fr; }
  .hsg-footer__blurb { max-width: none; }
  .hsg-puppy__thumbs { grid-template-columns: repeat(4, 1fr); }
  .hsg-flow--lede > p:first-of-type::first-letter { font-size: 3.1em; }
}

/* ==========================================================================
   SMALL  <= 480
   ========================================================================== */
@media (max-width: 480px) {
  .hsg-wrap { padding-inline: 15px; }
  .hsg-logo__lockup { gap: 9px; }
  .hsg-logo__icon { height: 32px; width: 32px; }
  .hsg-logo__word-1 { font-size: 1.06rem; }
  .hsg-logo__word-2 { font-size: .78rem; }
  .hsg-navtoggle__label { display: none; }
  .hsg-navtoggle { padding: 12px; }
  .hsg-card__body { padding: 16px 16px 20px; }
  .hsg-card__price { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hsg-btn { width: 100%; }
  /* Exception to the full-width button rule: this one shares a row with the price. */
  .hsg-puppy__inquire { width: auto; padding-inline: 18px; font-size: 0.94rem; }
  .hsg-puppy__pricenum { font-size: 1.8rem; }
  .hsg-card__body .hsg-btn { align-self: stretch; }
  .hsg-hero__actions .hsg-btn, .hsg-cta__actions .hsg-btn { width: 100%; }
  .hsg-puppy__thumbs { grid-template-columns: repeat(3, 1fr); }
  .hsg-footer__legal { flex-direction: column; gap: 8px; }
}

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

.hsg-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;
}
.hsg-steps__item { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); }
.hsg-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);
}
.hsg-steps__label { font-size: 0.95rem; }
.hsg-steps__item.is-on { color: var(--ink); font-weight: 600; }
.hsg-steps__item.is-on .hsg-steps__num { background: var(--clay); color: var(--cream); }
.hsg-steps__item.is-done .hsg-steps__num { background: var(--moss); color: var(--cream); }

.hsg-step { display: none; border: 0; padding: 0; margin: 0; }
.hsg-step.is-on { display: block; }
.hsg-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);
}
.hsg-step__note { color: var(--ink-soft); max-width: 60ch; margin-bottom: 26px; }
.hsg-step__sub { font-family: var(--serif); font-size: 1.3rem; margin: 34px 0 14px; }
.hsg-step__nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ---- Puppy picker -------------------------------------------------------- */
.hsg-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hsg-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);
}
.hsg-pick__item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.hsg-pick__item.is-on { border-color: var(--gold-deep); box-shadow: var(--shadow); }
/* The radio covers its own card rather than hiding in a 1px box beside it, so the tap
   target a finger and an auditor both find is the whole card. */
.hsg-pick__item { position: relative; }
.hsg-pick__item input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.hsg-pick__item input:focus-visible ~ .hsg-pick__media { outline: 2px solid var(--gold-deep); outline-offset: -2px; }
.hsg-pick__media { display: block; aspect-ratio: 4 / 3; background: var(--wheat); }
.hsg-pick__media img { width: 100%; height: 100%; object-fit: cover; }
.hsg-pick__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.hsg-pick__name { font-family: var(--serif); font-size: 1.35rem; line-height: 1; color: var(--ink); }
.hsg-pick__facts { color: var(--ink-soft); font-size: 0.9rem; }
.hsg-pick__price { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); }
.hsg-pick__flag { font-size: 0.8rem; color: var(--gold-deep); font-weight: 600; }

/* ---- Radio choices ------------------------------------------------------- */
.hsg-choice { display: flex; flex-direction: column; gap: 12px; max-width: 62ch; }
.hsg-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);
}
.hsg-choice__item:hover { border-color: var(--gold); }
.hsg-choice__item:has(input:checked) { border-color: var(--gold-deep); box-shadow: var(--shadow-sm); }
.hsg-choice__item input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--gold-deep); }
.hsg-choice__item strong { display: block; color: var(--ink); font-weight: 600; }
.hsg-choice__item em { display: block; margin-top: 4px; font-style: normal; color: var(--ink-soft); font-size: 0.93rem; }
.hsg-choice--tight .hsg-choice__item { padding: 14px 18px; }

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

/* The full agreement in a scroll box, so step four is not a mile long. */
.hsg-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 ------------------------------------------------------- */
.hsg-draw { margin-top: 36px; }
.hsg-draw__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.hsg-draw__label { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); margin: 0; }
.hsg-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);
}
.hsg-draw__clear:hover { border-color: var(--ink); color: var(--ink); }
.hsg-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;
}
.hsg-draw__pad.is-missing { border-color: #8C2F1B; background: #FDF4F1; }
.hsg-draw__hint { margin-top: 10px; font-size: 0.9rem; color: var(--ink-soft); }
.hsg-draw__typed { margin-top: 26px; }
.hsg-draw__typed input { font-family: var(--serif); font-size: 1.4rem; }

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

/* ---- Search and results ---------------------------------------------------
   Added for this site: the theme this design came from has no search or 404
   template, so an unknown URL fell through to the blog index.
   ------------------------------------------------------------------------- */
.hsg-search { max-width: 620px; }
.hsg-search__label {
  display: block; font-family: var(--serif); font-style: italic;
  color: var(--gold-deep); margin-bottom: 8px;
}
.hsg-search__row { display: flex; gap: 12px; flex-wrap: wrap; }
.hsg-input {
  flex: 1 1 240px; background: var(--card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 13px 16px; min-height: 48px;
}
.hsg-input:focus { border-color: var(--gold-deep); outline: none; box-shadow: 0 0 0 3px rgba(126,44,15,.12); }

.hsg-results { list-style: none; padding: 0; margin: 0; }
.hsg-results__item { padding: 24px 0; border-top: 1px solid var(--rule-soft); }
.hsg-results__item:first-child { border-top: 0; }
.hsg-results__title { font-size: 1.35rem; margin-bottom: 6px; }
.hsg-results__title a { text-decoration: none; }
.hsg-results__title a:hover { color: var(--gold-deep); text-decoration: underline; }
.hsg-results__text { color: var(--ink-soft); }

/* ---- Tap targets ----------------------------------------------------------
   44px minimum on every standalone control at the widths where a finger is the
   pointer. Scoped deliberately to stacked lists, card headings and the brand
   lockup: a blanket rule on the items of a compact inline bar wraps that bar
   onto two rows and eats the top of a phone screen.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hsg-footer__list a,
  .hsg-footer__email a,
  .hsg-card__name a,
  .hsg-dog__name a,
  .hsg-crumbs a {
    display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  }
  .hsg-footer__list li { margin-bottom: 0; }
  .hsg-logo { min-height: 44px; }
  /* Inline links inside running prose gain hit area from vertical padding, which
     does not change the height of an inline line box, so the paragraph stays put. */
  .hsg-flow a, .hsg-card__line a, .hsg-empty a,
  .hsg-health__more a, .hsg-specs__val a, .hsg-res__title a { padding-block: 13px; }
  .hsg-feature__title a, .hsg-results__title a, .hsg-res__title a {
    display: inline-block; padding-block: 11px; min-height: 44px;
  }
  /* A short link in a bulleted list is under 44px WIDE as well as tall. */
  .hsg-flow ul li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}