/* ==========================================================================
   Precious Pups — design system v1 (2026)
   Implements "Precious Pups Design System.dc.html" §01 Foundations onward.
   Every value here is transcribed from the design file, not invented.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §01 Foundations — tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette — §01 Palette. Yellow is action-only; it is never body text
     and never a large background wash. Where the accent must read as text
     it drops to --pp-accent. */
  --pp-base:          #FFFCF5; /* Page base            — warm off-white     */
  --pp-soft:          #FFF7DF; /* Alt sections         — soft yellow bg     */
  --pp-amber:         #FCE9B4; /* Warm highlight       — light amber        */
  --pp-yellow:        #F9C950; /* Action only          — Precious Pups Yellow */
  --pp-yellow-hover:  #E8B63C;
  --pp-ink:           #1E1E1E; /* Trust surfaces, text — dark / headings    */
  --pp-body:          #4A4A4A; /* Paragraphs                                */
  --pp-accent:        #C98A1F; /* Text-safe accent     — link / accent text */
  --pp-accent-dark:   #A8721A;
  --pp-green:         #5C8351; /* Status only          — available green    */
  --pp-white:         #FFFFFF;

  /* Status surfaces — §01 Availability status */
  --pp-green-bg:      #E8F0E4;
  --pp-green-ink:     #3D5A38;
  --pp-neutral-bg:    #ECEAE7;

  /* Supporting greys */
  --pp-muted:         #8C8C82;
  --pp-muted-2:       #6B6B63;
  --pp-muted-3:       #A79C93;
  --pp-muted-4:       #9A8F87;
  --pp-on-dark:       #B8B8B2;
  --pp-on-dark-2:     #E8E4DC;

  /* Hairlines — the design uses five weights of the same warm black */
  --pp-line-09:       rgba(36, 32, 29, .09);
  --pp-line-10:       rgba(36, 32, 29, .10);
  --pp-line-12:       rgba(36, 32, 29, .12);
  --pp-line-14:       rgba(36, 32, 29, .14);
  --pp-line-16:       rgba(36, 32, 29, .16);
  --pp-line-dark:     rgba(255, 255, 255, .12);
  --pp-fill-dark:     rgba(255, 255, 255, .07);

  /* Type — §01 Typography */
  --pp-head: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pp-text: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pp-h1: 64px;   /* headings 64 / 44 / 30 / 21 / 16 */
  --pp-h2: 44px;
  --pp-h3: 30px;
  --pp-h4: 21px;
  --pp-h5: 16px;

  --pp-t1: 19px;   /* body 19 / 17 / 15 / 13 / 11 */
  --pp-t2: 17px;
  --pp-t3: 15px;
  --pp-t4: 13px;
  --pp-t5: 11px;

  /* Shape language — §01. Arched frames for portraits, 20px squircles for
     cards, full pills for tags and buttons. */
  --pp-r-card:  20px;
  --pp-r-panel: 24px;
  --pp-r-soft:  16px;
  --pp-r-input: 12px;
  --pp-r-pill:  999px;

  /* Shadows are single, soft and warm-tinted */
  --pp-shadow:      0 24px 60px -34px rgba(30, 30, 30, .34);
  --pp-shadow-lift: 0 22px 50px -28px rgba(30, 30, 30, .50);

  /* Layout rhythm */
  --pp-sec-y: 78px;
  --pp-gutter: 48px;
  --pp-max: 1280px;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--pp-base);
  color: var(--pp-ink);
  font-family: var(--pp-text);
  font-size: var(--pp-t2);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--pp-head);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-weight: 500; letter-spacing: -0.035em; line-height: 1.06; }

p { margin: 0; text-wrap: pretty; }

a { color: var(--pp-accent); text-decoration: none; }
a:hover { color: var(--pp-accent-dark); }

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

::selection { background: var(--pp-amber); }

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

.pp-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pp-skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--pp-ink); color: var(--pp-white);
  padding: 12px 20px; border-radius: var(--pp-r-pill);
  font-family: var(--pp-head); font-weight: 600;
  transition: top .15s ease;
}
.pp-skip:focus { top: 12px; color: var(--pp-white); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.pp-shell { max-width: var(--pp-max); margin: 0 auto; }

.pp-section { padding: var(--pp-sec-y) var(--pp-gutter); }
.pp-section--tight  { padding-top: 0; }
.pp-section--flush  { padding-bottom: 0; }

.pp-band--soft  { background: var(--pp-soft); }
.pp-band--amber { background: var(--pp-amber); }
.pp-band--white { background: var(--pp-white); }
.pp-band--dark  { background: var(--pp-ink); color: var(--pp-white); }
.pp-band--dark h1, .pp-band--dark h2,
.pp-band--dark h3, .pp-band--dark h4 { color: var(--pp-white); }
.pp-band--dark p { color: var(--pp-on-dark); }

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

/* Editorial section head: eyebrow + h2 + right-aligned standfirst */
.pp-eyebrow {
  font-family: var(--pp-head);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pp-accent);
  font-weight: 700;
}
.pp-label {
  font-size: var(--pp-t5);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pp-muted);
  font-weight: 700;
}
.pp-band--dark .pp-eyebrow,
.pp-band--dark .pp-label { color: var(--pp-yellow); }

.pp-lead { font-size: 17.5px; line-height: 1.65; color: var(--pp-body); }
.pp-note { font-size: 12.5px; color: var(--pp-muted); }

/* --------------------------------------------------------------------------
   §01 Buttons — three tiers, three jobs.
   Never more than one primary button in a viewport.
   -------------------------------------------------------------------------- */
.pp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pp-head);
  font-weight: 600;
  font-size: 16px;
  border-radius: var(--pp-r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  text-align: center;
}
.pp-btn__arrow { font-size: 18px; line-height: 1; }

.pp-btn--primary {
  background: var(--pp-yellow);
  color: var(--pp-ink);
  padding: 15px 26px;
}
.pp-btn--primary:hover { background: var(--pp-yellow-hover); color: var(--pp-ink); }

.pp-btn--secondary {
  background: transparent;
  color: var(--pp-ink);
  border-color: rgba(30, 30, 30, .30);
  padding: 14px 25px;
}
.pp-btn--secondary:hover {
  border-color: var(--pp-ink);
  background: rgba(30, 30, 30, .06);
  color: var(--pp-ink);
}

.pp-btn--text {
  color: var(--pp-accent);
  font-size: var(--pp-t3);
  border: 0;
  border-bottom: 1.5px solid rgba(201, 138, 31, .35);
  border-radius: 0;
  padding: 0 0 2px;
  gap: 8px;
}
.pp-btn--text:hover { border-color: var(--pp-accent); color: var(--pp-accent-dark); }

.pp-btn--lg { font-size: 17px; padding: 17px 30px; }
.pp-btn--lg.pp-btn--secondary { padding: 16px 29px; }
.pp-btn--sm { font-size: 14.5px; padding: 11px 21px; }
.pp-btn--block { display: flex; justify-content: center; width: 100%; }

.pp-band--dark .pp-btn--text { color: var(--pp-yellow); border-color: rgba(249, 201, 80, .35); }
.pp-band--dark .pp-btn--text:hover { color: var(--pp-white); border-color: var(--pp-white); }

.pp-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   §01 Availability status — the three approved labels. Used on breed cards
   only. No surface appends a date: a fixed
     date goes stale and asserts something nobody is maintaining.
   -------------------------------------------------------------------------- */
.pp-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pp-head);
  font-size: var(--pp-t4);
  font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--pp-r-pill);
  white-space: nowrap;
}
.pp-status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  display: block;
  flex: none;
}
.pp-status--now       { background: var(--pp-green-bg);   color: var(--pp-green-ink); }
.pp-status--now::before       { background: var(--pp-green); }
.pp-status--waitlist  { background: var(--pp-amber);      color: var(--pp-accent-dark); }
.pp-status--waitlist::before  { background: var(--pp-yellow); }
.pp-status--soon      { background: var(--pp-neutral-bg); color: var(--pp-ink); }
.pp-status--soon::before      { background: var(--pp-ink); }

/* Compact badge variant used inside cards (no dot) */
.pp-badge {
  font-size: var(--pp-t5);
  font-weight: 700;
  padding: 5px 11px;
  border-radius: var(--pp-r-pill);
  flex: none;
  white-space: nowrap;
}
.pp-badge--now      { background: var(--pp-green-bg);   color: var(--pp-green-ink); }
.pp-badge--waitlist { background: var(--pp-amber);      color: var(--pp-accent-dark); }
.pp-badge--soon     { background: var(--pp-neutral-bg); color: var(--pp-ink); }

/* --------------------------------------------------------------------------
   §14 Card system — five reusable types plus the status pill
   -------------------------------------------------------------------------- */
.pp-card {
  background: var(--pp-white);
  border-radius: var(--pp-r-card);
  padding: 32px;
  border: 1px solid var(--pp-line-09);
}
.pp-card--soft { background: var(--pp-soft); border: 0; }
.pp-card--dark { background: var(--pp-ink); color: var(--pp-white); border: 0; }

/* Flat list row — county to city. Scales to any child count. */
.pp-linkrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--pp-soft);
  border-radius: var(--pp-r-soft);
  padding: 18px 20px;
  color: var(--pp-ink);
  font-family: var(--pp-head);
  font-size: 16.5px;
  font-weight: 600;
  transition: color .15s ease;
}
.pp-linkrow:hover { color: var(--pp-accent-dark); }
.pp-linkrow__meta { font-size: var(--pp-t4); color: var(--pp-muted-2); font-family: var(--pp-text); font-weight: 400; margin-top: 4px; }
.pp-linkrow__go   { color: var(--pp-accent); font-size: var(--pp-t3); flex: none; font-weight: 600; }

/* Compact image card — related-breed rails and the header dropdown grid */
.pp-tile {
  display: block;
  background: var(--pp-soft);
  border-radius: var(--pp-r-soft);
  padding: 16px;
  color: var(--pp-ink);
  transition: color .15s ease;
}
.pp-tile:hover { color: var(--pp-accent-dark); }
.pp-tile__media {
    aspect-ratio: 5 / 4;
    border-radius: var(--pp-r-soft);
    margin-bottom: 10px;
  }
  .pp-tile__name { font-family: var(--pp-head); font-size: 15.5px; font-weight: 600; }

/* "Go up a level" link — reserved for a single dark card per page */
.pp-uplink {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: var(--pp-ink);
  border-radius: var(--pp-r-soft);
  padding: 16px 18px;
  color: var(--pp-white);
  font-family: var(--pp-head);
  font-size: 15.5px;
  font-weight: 600;
  transition: color .15s ease;
}
.pp-uplink:hover { color: var(--pp-yellow); }

/* Nearby-area chip row — low-weight lateral links between sibling cities */
.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--pp-soft);
  border-radius: var(--pp-r-pill);
  padding: 9px 16px;
  font-family: var(--pp-head);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--pp-ink);
  transition: color .15s ease, border-color .15s ease;
}
a.pp-chip:hover { color: var(--pp-accent); }
.pp-chip__status { font-family: var(--pp-text); font-size: 12px; font-weight: 700; color: var(--pp-muted); }
.pp-chip--outline { background: var(--pp-white); border: 1px solid var(--pp-line-10); }
.pp-chip--outline:hover { border-color: var(--pp-accent); }

/* Next-step CTA card — the only card with a button inside it.
   Page-end conversion moments only, never mid-page. */
.pp-cta {
  border-radius: var(--pp-r-panel);
  padding: 52px 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.pp-cta--soft  { background: var(--pp-soft); }
.pp-cta--amber { background: var(--pp-amber); }
.pp-cta h2 { font-size: 38px; line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; max-width: 620px; }
.pp-cta p  { font-size: var(--pp-t2); line-height: 1.65; color: var(--pp-body); margin-top: 16px; max-width: 620px; }
.pp-cta--sm { padding: 44px 48px; }
.pp-cta--sm h2 { font-size: 28px; }

/* Two-column editorial splits. The column ratio lives here rather than in an
   inline style, because an inline grid-template-columns cannot be overridden
   by the mobile media query — which left these sections two-up at 375px and
   pushed the page into horizontal overflow. */
.pp-split-2 { display: grid; gap: 56px; align-items: start; }
.pp-split-2--center { align-items: center; }
.pp-split-2--a    { grid-template-columns: .85fr 1.15fr; }
.pp-split-2--b    { grid-template-columns: 1fr 1.25fr; }
.pp-split-2--c    { grid-template-columns: .8fr 1.2fr; }
/* Copy first, supporting image second — keeps the image inside the 42-48%
   band the design calls for on a content split. */
.pp-split-2--d    { grid-template-columns: 1.12fr .88fr; }
.pp-split-2--even { grid-template-columns: 1fr 1fr; }
.pp-split-2--form { grid-template-columns: 1fr .85fr; gap: 48px; }
.pp-split-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}

/* Trust section — heading across the top, then a lifestyle photograph beside a
   2x2 grid of trust points. Every height here lives in a class rather than an
   inline style: an inline height cannot be overridden by the media queries at
   the foot of this file, which is what previously left this image at its full
   intrinsic portrait height on a stale stylesheet. */
.pp-trust__head { max-width: 720px; }
.pp-trust {
  display: grid;
  grid-template-columns: 46% 1fr;
  gap: 44px;
  align-items: start;
  margin-top: 34px;
}
.pp-trust__media { height: 420px; }
.pp-trust__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 18px;
}

/* Shelter stance — split, never a full-bleed banner. */
.pp-shelter__media { height: 360px; border-radius: var(--pp-r-card); }

/* Supporting image inside a breed-page content split. Same discipline as the
   homepage: height in a class so the responsive overrides can reach it. */
.pp-breed__support { height: 400px; border-radius: var(--pp-r-card); }
.pp-loc__support { height: 420px; border-radius: var(--pp-r-card); }
/* Full-width supportive band on a core page. */
.pp-core__band { height: 380px; border-radius: var(--pp-r-card); }
/* Portrait hero on breed and location pages. Height lives here, not inline,
   so the mobile override below can actually reach it. */
.pp-hero__portrait { height: 430px; }

/* CTA panel with a leading image (page-end conversion moments only) */
.pp-cta--media { grid-template-columns: 380px 1fr; gap: 40px; }
.pp-cta__media { height: 300px; border-radius: var(--pp-r-card); }

/* Process step with a supporting portrait alongside the copy.
   Doubled class: the base .pp-timeline__row rule is declared later in this
   file, so a single-class modifier here would lose the cascade. */
.pp-timeline__row.pp-timeline__row--media { grid-template-columns: 70px 1fr 260px; }
.pp-timeline__media { height: 320px; border-radius: var(--pp-r-card); align-self: start; }

/* --------------------------------------------------------------------------
   Media — arched frames for portraits (§01 Shape language)
   -------------------------------------------------------------------------- */
.pp-media { overflow: hidden; background: var(--pp-soft); }
.pp-media img { width: 100%; height: 100%; object-fit: cover; }

.pp-arch      { border-radius: 280px 280px 26px 26px; border: 1px solid var(--pp-line-10); }
.pp-arch--md  { border-radius: 230px 230px 24px 24px; border: 1px solid var(--pp-line-10); }
.pp-arch--sm  { border-radius: 150px 150px 20px 20px; }
.pp-arch--xs  { border-radius: 70px 70px 12px 12px; }
.pp-arch--xxs { border-radius: 50px 50px 8px 8px; }

/* Placeholder rendering for an unfilled image slot. Every photo position in
   the design is a fillable slot with a written brief — never stock. */
.pp-slot {
  position: relative;
  background:
    repeating-linear-gradient(45deg, var(--pp-soft) 0 10px, #FBF2D8 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 88px;
}
.pp-slot__hint {
  font-family: var(--pp-head);
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-muted-3);
  text-align: center;
  padding: 12px 16px;
  line-height: 1.4;
  max-width: 260px;
}

/* --------------------------------------------------------------------------
   §02 Header, navigation & mobile menu
   -------------------------------------------------------------------------- */
.pp-utility {
  background: var(--pp-ink);
  color: var(--pp-on-dark-2);
  font-size: 13.5px;
  padding: 9px var(--pp-gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.pp-utility__group { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.pp-utility__dot {
  display: inline-flex; gap: 8px; align-items: center;
}
.pp-utility__dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pp-yellow); display: block; flex: none;
}
.pp-utility__place { opacity: .55; }
.pp-utility a { color: var(--pp-white); font-weight: 600; white-space: nowrap; }
.pp-utility a:hover { color: var(--pp-yellow); }
/* §02 mobile header — one centered line. The phone stays reachable through the
   sticky two-action bar, so it is not repeated here. */
.pp-utility__mobile { display: none; font-weight: 600; }

.pp-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--pp-white);
  border-bottom: 1px solid var(--pp-line-09);
}
/* Nav in its own track so it can be centered independently of the wordmark and
   Plan a Visit, which have unequal widths and would otherwise push it right. */
.pp-header__inner {
  padding: 18px var(--pp-gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  transition: padding .18s ease;
}
.pp-logo { justify-self: start; }
.pp-nav { justify-self: center; }
.pp-header__cta { justify-self: end; }

/* Equal side tracks put the nav's midpoint on the viewport's midpoint. Only
   viable once the bar is wide enough to hold two wordmark-width tracks
   (2×252 + nav + gaps + gutters ≈ 1226px); below that the equal tracks would
   starve the wordmark and wrap it onto a second line. */
@media (min-width: 1240px) {
  .pp-header__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}

/* The logo is now a single fixed-width image rather than wrapping text, so the
   second-line problem the old wordmark had cannot recur. Header padding comes
   down from 18px to 12px to absorb the taller asset. */
.pp-header__inner { padding-top: 12px; padding-bottom: 12px; }
/* §02 rule 03 — sticky after 120px; the main bar condenses and keeps the
   wordmark, nav and Plan a Visit. */
.pp-header.is-condensed .pp-header__inner { padding-top: 10px; padding-bottom: 10px; }

/* Brand logo. The supplied asset carries the arch mark, the wordmark and the
   tagline in one image, so the former placeholder square and the two text
   spans beside it are gone.

   Width is what the brand kit specifies (250px desktop); height follows from
   the asset's own 1000x362 ratio via aspect-ratio, so nothing is ever squashed
   and the space is reserved before the image decodes. The header's vertical
   padding is trimmed alongside it so the taller logo does not push the bar out
   of proportion. */
.pp-logo { display: flex; align-items: center; color: var(--pp-ink); }
.pp-logo:hover { color: var(--pp-ink); }
.pp-logo picture { display: block; }
/* One variable drives every breakpoint so the condensed state can be expressed
   as a fraction of the current size. A fixed condensed width was a bug: at
   360px the logo is 152px, so a hard 196px made it grow on scroll. */
:root { --pp-logo-w: 250px; }
.pp-logo__img {
  display: block;
  width: var(--pp-logo-w);
  height: auto;
  aspect-ratio: 1000 / 362;
  /* Trims the asset's own transparent margin optically without touching the
     file, so the mark lines up with the nav rather than floating high. */
  margin-left: -6px;
}
.pp-logo:focus-visible { outline: 2px solid var(--pp-ink); outline-offset: 4px; border-radius: 6px; }

/* The condensed/sticky bar steps the logo down rather than hiding anything, so
   the tagline stays readable while the bar gets shorter. */
.pp-header.is-condensed .pp-logo__img { width: calc(var(--pp-logo-w) * 0.78); }

.pp-nav { display: flex; align-items: center; gap: 28px; }
/* 1101–1239px: six links, the wordmark and the button exceed the bar at 28px
   spacing by a few pixels. Tightening the gap keeps them all on one line. */
@media (max-width: 1239px) { .pp-nav { gap: 20px; } }
.pp-nav__link {
  font-family: var(--pp-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--pp-ink);
  padding: 6px 0;
  transition: color .15s ease;
}
.pp-nav__link:hover,
.pp-nav__link[aria-current="page"] { color: var(--pp-accent); }

.pp-nav__item { position: relative; display: flex; align-items: center; }
.pp-nav__toggle {
  background: none; border: 0; padding: 6px 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--pp-head); font-size: 15px; font-weight: 600;
}
.pp-nav__toggle:hover { color: var(--pp-accent); }
.pp-nav__caret { font-size: 11px; color: var(--pp-accent); transition: transform .15s ease; }
.pp-nav__item.is-open .pp-nav__caret { transform: rotate(180deg); }

/* §02 rule 02 — two dropdowns only */
/* --------------------------------------------------------------------------
   Nav submenus
   --------------------------------------------------------------------------
   Replaces the mega menus. The old .pp-dropdown was min(920px, 90vw) wide
   with a three-column grid, a sidebar label and a status column; the whole of
   that block is gone rather than overridden, so there is no hidden mega-menu
   markup or dead CSS left behind.

   A submenu is now a single column of navigation rows, 250px for breeds and
   270px for locations, inside a .pp-nav__pop wrapper whose top padding is the
   hover-safe bridge between the nav item and the panel.
   -------------------------------------------------------------------------- */
.pp-nav__pop {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* The gap between the nav row and the panel is padding ON the wrapper, not
     margin, so the pointer never crosses dead space and the menu cannot
     flicker on the way down. */
  padding-top: 12px;
  display: none;
  z-index: 60;
}
.pp-nav__item.is-open .pp-nav__pop { display: block; }

.pp-submenu {
  width: 250px;
  background: var(--pp-white);
  border: 1px solid var(--pp-line-12);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(36, 32, 29, .12);
  padding: 10px 0;
}
.pp-submenu--wide { width: 270px; }

.pp-submenu__link {
  display: block;
  padding: 10px 18px;
  font-family: var(--pp-head);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--pp-ink);
  text-decoration: none;
  transition: background-color .13s ease, color .13s ease;
}
.pp-submenu__link:hover { background: var(--pp-soft); color: var(--pp-accent-dark); }
.pp-submenu__link:focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: -2px;
  background: var(--pp-soft);
}

/* "All Breeds" and "All Locations" lead the list and are separated from the
   individual destinations; "More Locations" closes it the same way. */
.pp-submenu__link--all {
  font-weight: 600;
  color: var(--pp-accent-dark);
  border-bottom: 1px solid var(--pp-line-09);
  margin-bottom: 6px;
  padding-bottom: 12px;
}
.pp-submenu__link--more {
  font-weight: 600;
  color: var(--pp-accent-dark);
  border-top: 1px solid var(--pp-line-09);
  margin-top: 6px;
  padding-top: 12px;
}

/* Mobile trigger */
.pp-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--pp-line-14);
  border-radius: 10px;
  background: none;
  cursor: pointer;
}
.pp-burger span { width: 18px; height: 1.5px; background: var(--pp-ink); display: block; }

/* Mobile menu — full-height panel */
.pp-mobilemenu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--pp-white);
  overflow-y: auto;
  display: none;
}
.pp-mobilemenu[open], .pp-mobilemenu.is-open { display: block; }
.pp-mobilemenu__bar {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--pp-line-09);
  position: sticky; top: 0; background: var(--pp-white);
}
.pp-mobilemenu__title { display: flex; align-items: center; }
.pp-mobilemenu__title picture { display: block; }
.pp-mobilemenu__logo { display: block; width: 184px; height: auto; aspect-ratio: 1000 / 362; }
.pp-mobilemenu__close {
  font-size: 24px; line-height: 1; color: var(--pp-ink);
  padding: 2px 10px; background: none; border: 0; cursor: pointer;
}
.pp-mobilemenu__body { padding: 8px 18px 120px; }
.pp-mobilemenu__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(36, 32, 29, .08);
  font-family: var(--pp-head);
  font-size: 22px;
  font-weight: 600;
  color: var(--pp-ink);
}
.pp-mobilemenu__link:hover { color: var(--pp-accent); }
.pp-mobilemenu__plus { font-size: var(--pp-t3); color: var(--pp-accent); }
.pp-mobilemenu__sub { display: none; padding: 4px 0 12px; }
.pp-mobilemenu__sub.is-open { display: block; }
.pp-mobilemenu__sublink {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0 11px 14px;
  font-family: var(--pp-head); font-size: var(--pp-t2); font-weight: 600;
  color: var(--pp-body);
  border-bottom: 1px solid rgba(36, 32, 29, .06);
}
.pp-mobilemenu__visit {
  background: var(--pp-soft);
  border-radius: var(--pp-r-soft);
  padding: 18px;
  margin-top: 18px;
}
.pp-mobilemenu__visit-addr { font-family: var(--pp-head); font-size: var(--pp-t2); font-weight: 600; margin-top: 6px; line-height: 1.35; }
.pp-mobilemenu__visit-hours { font-size: 14px; color: var(--pp-muted-2); margin-top: 8px; }

/* §02 — persistent two-action bar at the bottom of every mobile page.
   The only repeated CTA in the system. */
.pp-mobilebar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--pp-white);
  border-top: 1px solid var(--pp-line-10);
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pp-mobilebar .pp-btn { justify-content: center; padding: 13px 0; font-size: var(--pp-t3); }

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */
.pp-crumbs {
  padding: 16px var(--pp-gutter);
  font-size: 13.5px;
  color: var(--pp-muted);
  background: var(--pp-soft);
}
.pp-crumbs a { color: var(--pp-muted); }
.pp-crumbs a:hover { color: var(--pp-accent); }
.pp-crumbs__here { color: var(--pp-body); font-weight: 600; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.pp-hero {
  padding: 76px var(--pp-gutter) 68px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 64px;
  align-items: center;
}
.pp-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--pp-amber); color: var(--pp-accent-dark);
  font-size: 12.5px; font-weight: 700; font-family: var(--pp-head);
  letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 16px; border-radius: var(--pp-r-pill);
}
.pp-hero h1 { font-size: 66px; line-height: 1.02; margin: 24px 0 0; }
.pp-hero__lead { font-size: 19.5px; line-height: 1.6; color: var(--pp-body); margin: 24px 0 0; max-width: 560px; }
.pp-hero__media { position: relative; }
.pp-hero__frame { height: 520px; }


/* Stat run under the hero */
.pp-stats-run {
  display: flex; gap: 34px; margin-top: 38px;
  padding-top: 26px; border-top: 1px solid var(--pp-line-10);
  flex-wrap: wrap;
}
.pp-stats-run__n { font-family: var(--pp-head); font-size: 26px; font-weight: 600; }
.pp-stats-run__l { font-size: 13.5px; color: var(--pp-muted-2); margin-top: 2px; }

/* Page hero for interior templates */
.pp-pagehead { padding: 64px var(--pp-gutter) 44px; background: var(--pp-soft); }
.pp-pagehead h1 { font-size: 50px; line-height: 1.06; margin: 14px 0 0; max-width: 820px; }
.pp-pagehead p  { font-size: 17.5px; line-height: 1.65; color: var(--pp-body); margin: 16px 0 0; max-width: 680px; }

/* Split hero used by breed / county / city templates */
.pp-split {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  padding: 56px var(--pp-gutter) 60px;
  align-items: center;
}
.pp-split--even { grid-template-columns: 1fr 1fr; }
.pp-split h1 { font-size: 50px; line-height: 1.06; margin: 16px 0 0; }
.pp-split__lead { font-size: 17.5px; line-height: 1.65; color: var(--pp-body); margin: 18px 0 0; max-width: 560px; }

/* --------------------------------------------------------------------------
   Divider stat grid — the hairline-separated fact strip
   -------------------------------------------------------------------------- */
.pp-facts {
  display: grid;
  gap: 1px;
  background: var(--pp-line-12);
  border: 1px solid var(--pp-line-12);
  border-radius: 18px;
  overflow: hidden;
}
.pp-facts--3 { grid-template-columns: repeat(3, 1fr); }
.pp-facts--4 { grid-template-columns: repeat(4, 1fr); }
.pp-facts__cell { background: var(--pp-soft); padding: 22px 24px; }
.pp-facts--center .pp-facts__cell { text-align: center; }
.pp-facts__v { font-family: var(--pp-head); font-size: 20px; font-weight: 600; margin-top: 8px; }
.pp-facts__label {
  font-size: var(--pp-t5); letter-spacing: .14em; text-transform: uppercase;
  color: var(--pp-muted); font-weight: 700;
}
.pp-band--dark .pp-facts { background: var(--pp-line-dark); border-color: var(--pp-line-dark); }
.pp-band--dark .pp-facts__cell { background: var(--pp-ink); }

/* --------------------------------------------------------------------------
   Process strip / numbered steps (§03 and §11)
   -------------------------------------------------------------------------- */
.pp-step {
  background: var(--pp-soft);
  border-radius: var(--pp-r-card);
  padding: 28px 24px;
}
.pp-step__n {
  width: 38px; height: 38px; border-radius: var(--pp-r-pill);
  background: var(--pp-white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pp-head); font-weight: 700; font-size: var(--pp-t3);
  color: var(--pp-accent);
}
.pp-step h3 { font-size: 20px; margin: 18px 0 0; }
.pp-step p  { font-size: var(--pp-t3); line-height: 1.6; color: var(--pp-body); margin-top: 10px; }

.pp-timeline { display: flex; flex-direction: column; }
.pp-timeline__row { display: grid; grid-template-columns: 70px 1fr; gap: 24px; padding-bottom: 40px; }
.pp-timeline__row:last-child { padding-bottom: 0; }
.pp-timeline__rail { display: flex; flex-direction: column; align-items: center; }
.pp-timeline__n {
  width: 44px; height: 44px; border-radius: var(--pp-r-pill);
  background: var(--pp-yellow); color: var(--pp-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pp-head); font-weight: 700; font-size: var(--pp-t2);
  flex: none;
}
.pp-timeline__line { width: 2px; flex: 1; background: var(--pp-line-14); margin-top: 8px; }
.pp-timeline__row:last-child .pp-timeline__line { display: none; }
.pp-timeline__body { padding-top: 4px; }
.pp-timeline__body h3 { font-size: 23px; }
.pp-timeline__body p { font-size: 16px; line-height: 1.65; color: var(--pp-body); margin-top: 8px; max-width: 600px; }

/* --------------------------------------------------------------------------
   Puppy card imagery — ONE system for every card that shows a dog
   --------------------------------------------------------------------------
   The nine breed photographs are 4:5 portraits of a whole standing puppy in a
   warm cream interior. Each card type previously set its own fixed height
   (88px to 170px), which cropped the images into shallow strips and cut the
   dogs off — a Chihuahua card showed only its ears.

   These boxes are now sized by aspect-ratio and the image is contained rather
   than cropped, over the brand cream. Because the photographs' own backdrop is
   that same cream, the letterbox reads as a framed portrait rather than a gap,
   and the whole puppy is visible at every breakpoint.

   Lifestyle photographs elsewhere on the site keep object-fit: cover with a
   tuned object-position; only these card portraits are contained.
   -------------------------------------------------------------------------- */
.pp-breedcard__media,
.pp-availcard__media,
.pp-soonm__media,
.pp-waitm__media,
.pp-tile__media {
  width: 100%;
  overflow: hidden;
  height: auto;
}
/* slot() renders its own .pp-media wrapper inside these boxes. It has to fill
   the aspect-ratio box in both directions, or the inner img falls back to its
   intrinsic size and object-fit stops applying. No background here: the photo
   covers the box, so any ground color would only ever show as a seam. */
.pp-breedcard__media > .pp-media,
.pp-availcard__media > .pp-media,
.pp-soonm__media > .pp-media,
.pp-waitm__media > .pp-media,
.pp-tile__media > .pp-media {
  width: 100%;
  height: 100%;
  background: none;
}
/* Cover, not contain: the photo fills the card edge to edge and is cropped.
   object-position is deliberately NOT set here so the per-image focal point
   that slot() writes inline still governs the crop. */
.pp-breedcard__media img,
.pp-availcard__media img,
.pp-soonm__media img,
.pp-waitm__media img,
.pp-tile__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Breed cards (§03) and the availability grids (§04)
   -------------------------------------------------------------------------- */
.pp-breedcard {
  display: block;
  background: var(--pp-white);
  border: 1px solid var(--pp-line-10);
  border-radius: var(--pp-r-card);
  overflow: hidden;
  color: var(--pp-ink);
  transition: border-color .15s ease;
}
.pp-breedcard:hover { border-color: rgba(201, 138, 31, .5); color: var(--pp-ink); }
.pp-breedcard__media { aspect-ratio: 4 / 3; border-radius: var(--pp-r-card) var(--pp-r-card) 0 0; }
.pp-breedcard__body { padding: 16px 18px 18px; }
.pp-breedcard__name { font-family: var(--pp-head); font-size: 18px; font-weight: 600; line-height: 1.2; }
.pp-breedcard__line { font-size: 13.5px; line-height: 1.5; color: var(--pp-muted-2); margin-top: 7px; min-height: 60px; }
.pp-breedcard__status { font-size: 12.5px; font-weight: 700; color: var(--pp-accent-dark); margin-top: 6px; }

/* Wide availability card — Available Now tier */
.pp-availcard {
  display: grid;
  /* minmax(0, 1fr) on the copy column: a plain 1fr refuses to shrink below
     its min-content width, which pushed the card wider than its grid cell
     at tablet widths and overflowed the page. */
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 24px;
  background: var(--pp-white);
  border: 1px solid var(--pp-line-10);
  border-radius: var(--pp-r-card);
  padding: 22px;
  align-items: center;
}
.pp-availcard__media { aspect-ratio: 5 / 4; border-radius: var(--pp-r-soft); }
.pp-availcard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pp-availcard__head h3 { font-size: var(--pp-h4); }
.pp-availcard p { font-size: 14.5px; line-height: 1.55; color: var(--pp-body); margin-top: 8px; }

/* Medium availability card — Expected Soon tier */
.pp-soonm { background: var(--pp-white); border: 1px solid var(--pp-line-10); border-radius: 18px; padding: 18px; }
.pp-soonm__media { aspect-ratio: 4 / 3; border-radius: var(--pp-r-soft); margin-bottom: 14px; }
.pp-soonm__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pp-soonm__head h3 { font-size: var(--pp-h5); font-weight: 600; }

/* Small availability card — Waitlist tier */
.pp-waitm {
  background: var(--pp-white); border: 1px solid var(--pp-line-10);
  border-radius: var(--pp-r-soft); padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.pp-waitm__media { aspect-ratio: 5 / 4; border-radius: 12px; }
.pp-waitm__name { font-size: 15.5px; font-weight: 600; font-family: var(--pp-head); }
.pp-waitm .pp-badge { align-self: flex-start; }

/* Tier heading used above each availability grid */
.pp-tier { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pp-tier__dot { width: 8px; height: 8px; border-radius: 50%; display: block; flex: none; }
.pp-tier__dot--now  { background: var(--pp-green); }
.pp-tier__dot--soon { background: var(--pp-ink); }
.pp-tier__dot--wait { background: var(--pp-yellow); }
.pp-tier__name { font-family: var(--pp-head); font-size: 19px; font-weight: 600; }
.pp-tier__sub { font-size: 14.5px; color: var(--pp-muted-2); margin: 0 0 20px; }

/* Availability filter row */
.pp-filters { display: flex; gap: 14px; margin-top: 26px; align-items: center; flex-wrap: wrap; }
.pp-filters__label { font-size: 13.5px; color: var(--pp-muted-2); font-weight: 600; white-space: nowrap; }
.pp-filter {
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; flex: none;
  background: var(--pp-white);
  border: 1px solid var(--pp-line-14);
  color: var(--pp-body);
  font-family: var(--pp-head); font-size: 14px; font-weight: 600;
  padding: 8px 15px; border-radius: var(--pp-r-pill);
  cursor: pointer;
}
.pp-filter[aria-pressed="true"] { border: 1.5px solid var(--pp-ink); color: var(--pp-ink); }
.pp-filter__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* --------------------------------------------------------------------------
   Reason columns (§03 "Four things we do differently")
   -------------------------------------------------------------------------- */
.pp-reason {
  border: 1px solid var(--pp-line-09);
  border-top: 2px solid var(--pp-line-16);
  border-radius: var(--pp-r-card);
  background: var(--pp-base);
  padding: 22px 22px 24px;
}
.pp-reason:first-child { border-top-color: var(--pp-yellow); }
.pp-reason h3 { font-size: var(--pp-h4); line-height: 1.25; }
.pp-reason p  { font-size: 15.5px; line-height: 1.6; color: var(--pp-body); margin-top: 12px; }

.pp-darkcard { background: var(--pp-fill-dark); border-radius: var(--pp-r-soft); padding: 22px; }
.pp-darkcard__t { font-family: var(--pp-head); font-size: var(--pp-t2); font-weight: 600; color: var(--pp-white); }
.pp-darkcard p { font-size: 14.5px; line-height: 1.6; color: var(--pp-on-dark); margin-top: 8px; }

/* --------------------------------------------------------------------------
   FAQ (§03, §12) — marked up as FAQPage schema
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   FAQ — one accordion, used on every FAQ surface on the site
   --------------------------------------------------------------------------
   Rows are individual cards. The panel collapses with grid-template-rows
   0fr -> 1fr, which animates real height without the max-height guesswork and
   without ever measuring content in JS. The answer stays in the DOM: site.js
   only toggles a class plus aria-expanded, so the text remains server-rendered
   and crawlable while being visually collapsed.
   -------------------------------------------------------------------------- */
.pp-faq { display: flex; flex-direction: column; gap: 12px; }

.pp-faq__item {
  background: var(--pp-white);
  border: 1px solid var(--pp-line-10);
  border-radius: var(--pp-r-card);
  overflow: hidden;
  transition: border-color .18s ease, background-color .18s ease;
}
.pp-faq__item:hover { border-color: var(--pp-line-16); }
/* A very light warm wash on the open row, not a full yellow card. */
.pp-faq__item.is-open { background: var(--pp-base); border-color: var(--pp-line-16); }

.pp-faq__q { margin: 0; font-size: inherit; font-weight: inherit; }

.pp-faq__btn {
  /* A real button, so Enter and Space work with no extra keyboard handling. */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  min-height: 44px;                     /* comfortable tap target */
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  color: var(--pp-ink);
  cursor: pointer;
}
.pp-faq__btn:focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: -3px;
  border-radius: var(--pp-r-card);
}
.pp-faq__qtext {
  font-family: var(--pp-head);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
}

/* Plus that becomes a minus. Two bars; the vertical one collapses on open. */
.pp-faq__icon {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
.pp-faq__icon::before,
.pp-faq__icon::after {
  content: '';
  position: absolute;
  background: var(--pp-accent);
  border-radius: 2px;
  transition: transform .24s ease, opacity .24s ease;
}
.pp-faq__icon::before { top: 9px; left: 0; width: 20px; height: 2px; }
.pp-faq__icon::after  { left: 9px; top: 0; width: 2px; height: 20px; }
.pp-faq__item.is-open .pp-faq__icon::after { transform: scaleY(0); opacity: 0; }

/* Collapse via max-height, set from the panel's real scrollHeight by site.js.
   The tidier grid-template-rows: 0fr trick was tried first and does not hold
   up here: inside an auto-height grid container an `fr` track has no definite
   free space to resolve against, so 0fr and 1fr both size to content and the
   panel never collapses. A measured max-height animates exactly and works
   everywhere. Rendered open, so with no JavaScript the answers stay visible. */
.pp-faq__panel {
  overflow: hidden;
  transition: max-height .24s ease, opacity .2s ease;
}
.pp-faq__item.is-closed .pp-faq__panel { opacity: 0; }
.pp-faq__answer p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--pp-body);
  margin: 0;
  padding: 0 26px 24px;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   FAQ split — copy and image left, accordion right
   -------------------------------------------------------------------------- */
.pp-faqsplit {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 56px;
  align-items: start;
}
.pp-faqsplit__aside { position: sticky; top: 96px; }
.pp-faqsplit__h {
  font-size: 32px;
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 14px 0 0;
}
.pp-faqsplit__intro {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--pp-body);
  margin: 14px 0 0;
  max-width: 46ch;
}
.pp-faqsplit__media {
  height: 360px;
  border-radius: var(--pp-r-card);
  margin-top: 26px;
}

/* Subsequent FAQ categories on the dedicated FAQ page: heading over accordion,
   no repeated image. */
.pp-faqgroup + .pp-faqgroup { margin-top: 44px; }
.pp-faqgroup__h {
  font-size: 22px;
  font-weight: 600;
  color: var(--pp-accent-dark);
  margin: 0 0 18px;
}
.pp-faq__group { display: grid; grid-template-columns: .6fr 1.4fr; gap: 56px; }
.pp-faq__group + .pp-faq__group { margin-top: 44px; }
.pp-faq__group h2 { font-size: 22px; font-weight: 600; color: var(--pp-accent); }

.pp-faqnav { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.pp-faqnav a {
  background: var(--pp-white);
  border: 1px solid var(--pp-line-14);
  font-family: var(--pp-head); font-size: 14px; font-weight: 600;
  padding: 9px 16px; border-radius: var(--pp-r-pill);
  color: var(--pp-ink);
}
.pp-faqnav a:first-child { background: var(--pp-ink); color: var(--pp-white); border-color: var(--pp-ink); }
.pp-faqnav a:hover { border-color: var(--pp-accent); color: var(--pp-accent); }
.pp-faqnav a:first-child:hover { color: var(--pp-yellow); }

/* --------------------------------------------------------------------------
   §10 Contact form
   -------------------------------------------------------------------------- */
.pp-form { background: var(--pp-soft); border-radius: 22px; padding: 36px; }
.pp-field + .pp-field { margin-top: 16px; }
.pp-field label {
  font-size: var(--pp-t4); font-weight: 700; color: var(--pp-body);
  font-family: var(--pp-head); display: block;
}
.pp-field input, .pp-field select, .pp-field textarea {
  width: 100%;
  height: 48px;
  background: var(--pp-white);
  border-radius: var(--pp-r-input);
  border: 1px solid var(--pp-line-14);
  margin-top: 6px;
  padding: 0 14px;
  font-family: var(--pp-text);
  font-size: var(--pp-t3);
  color: var(--pp-ink);
}
.pp-field textarea { height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.pp-field input:focus, .pp-field select:focus, .pp-field textarea:focus {
  outline: 2px solid var(--pp-accent); outline-offset: 1px; border-color: transparent;
}
.pp-fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.pp-intent { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pp-intent input { position: absolute; opacity: 0; pointer-events: none; }
.pp-intent label {
  background: var(--pp-white);
  border: 1px solid var(--pp-line-16);
  border-radius: var(--pp-r-pill);
  padding: 10px 16px;
  text-align: center;
  font-family: var(--pp-head); font-size: 14px; font-weight: 600;
  color: var(--pp-body);
  cursor: pointer;
  display: block;
}
.pp-intent input:checked + label { border: 1.5px solid var(--pp-accent); color: var(--pp-accent); }
.pp-intent input:focus-visible + label { outline: 2px solid var(--pp-accent); outline-offset: 2px; }

.pp-contactcard { border-radius: var(--pp-r-card); padding: 26px 28px; }
.pp-contactcard--dark { background: var(--pp-ink); }
.pp-contactcard--dark .pp-contactcard__v { color: var(--pp-white); font-family: var(--pp-head); font-size: 19px; font-weight: 600; margin-top: 8px; }
.pp-contactcard--dark .pp-contactcard__m { color: var(--pp-on-dark); font-size: var(--pp-t3); margin-top: 10px; }
.pp-contactcard--soft { background: var(--pp-soft); }
.pp-contactcard--soft a { display: block; color: var(--pp-ink); font-family: var(--pp-head); font-size: 19px; font-weight: 600; margin-top: 8px; }
.pp-contactcard--soft a:hover { color: var(--pp-accent); }
.pp-contactcard--soft a.pp-contactcard__email { font-size: var(--pp-t3); font-family: var(--pp-text); font-weight: 400; margin-top: 6px; }

/* --------------------------------------------------------------------------
   §03 Footer
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Page end — the transition between page content and site chrome
   --------------------------------------------------------------------------
   Emitted by layout.js only on pages whose last section is a color band, so
   an amber or dark CTA never butts straight into the dark footer. Pages that
   end on a white section already have their own section padding and get no
   buffer, which keeps the spacing from doubling.
   -------------------------------------------------------------------------- */
.pp-pageend { height: 88px; background: var(--pp-base); }

/* --------------------------------------------------------------------------
   Reading measure
   --------------------------------------------------------------------------
   A paragraph set across the full 1184px shell reads as an article no matter
   how it is styled. Capping the measure is the single biggest change that
   makes these pages read as landing pages rather than blog posts. Inside a
   two-column section the column is already narrower than the cap, so this
   only bites where text would otherwise run full width.
   -------------------------------------------------------------------------- */
main section > p,
main section > div > p,
main section > div > div > p { max-width: 66ch; }
/* Card and grid copy sets its own measure from the card width. */
.pp-reason p, .pp-darkcard p, .pp-faq p, .pp-breedcard__line,
.pp-availcard p, .pp-facts__cell p, .pp-card p { max-width: none; }

.pp-footer { background: var(--pp-ink); color: var(--pp-on-dark); padding: 62px var(--pp-gutter) 34px; }
.pp-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 44px; }
/* Footer brand. The image is the transparent derivative of the supplied
   reversed logo, so it sits straight on the footer with no panel and no
   rectangle — see the note in components.js footer(). */
.pp-footer__mark {
  display: inline-block;
  margin-left: -6px;
}
.pp-footer__mark picture { display: block; }
.pp-footer__logo {
  display: block;
  width: 232px;
  height: auto;
  aspect-ratio: 1000 / 361;
}
.pp-footer__mark:focus-visible { outline: 2px solid var(--pp-yellow); outline-offset: 3px; }
.pp-footer__blurb { font-size: var(--pp-t3); line-height: 1.65; margin-top: 16px; max-width: 330px; }
.pp-footer__nap { font-size: var(--pp-t3); line-height: 1.7; margin-top: 18px; color: var(--pp-white); }
.pp-footer__nap a { color: var(--pp-yellow); }
.pp-footer__nap a:hover { color: var(--pp-white); }
.pp-footer__title {
  font-size: var(--pp-t5); letter-spacing: .16em; text-transform: uppercase;
  color: var(--pp-yellow); font-weight: 700; margin-bottom: 14px;
}
.pp-footer__links { display: flex; flex-direction: column; gap: 9px; font-size: var(--pp-t3); }
.pp-footer__links a { color: var(--pp-on-dark); }
.pp-footer__links a:hover { color: var(--pp-white); }
.pp-footer__base {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; justify-content: space-between;
  font-size: 13.5px; color: var(--pp-on-dark);
  flex-wrap: wrap; gap: 14px;
}

/* --------------------------------------------------------------------------
   §15 Mobile — every template stacks to a single column at 390px
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   County card - ONE family, three sizes
   --------------------------------------------------------------------------
   Size communicates strategic priority and nothing else. Every other property
   is shared, so the grid reads as one system rather than three designs that
   happened to land next to each other.

     .pp-ccard--lg   featured counties, image on top
     .pp-ccard--md   hybrid counties, no image, same card
     .pp-ccard--sm   support counties, single compact row, same card

   Priority order comes from the researched county classification, not from
   which counties happen to own a photograph.
   -------------------------------------------------------------------------- */
.pp-ccard {
  display: flex;
  flex-direction: column;
  background: var(--pp-white);
  border: 1px solid var(--pp-line-10);
  border-radius: var(--pp-r-card);
  overflow: hidden;
  color: var(--pp-ink);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pp-ccard:hover {
  border-color: var(--pp-line-16);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(36, 32, 29, .07);
}
.pp-ccard:focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: 3px;
}

/* Fixed ratio, so four cards in a row never disagree about image height. */
.pp-ccard__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex: none;
}
.pp-ccard__media > .pp-media {
  width: 100%;
  height: 100%;
  background: none;
}
.pp-ccard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pp-ccard__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px 22px 22px;
}
.pp-ccard__name {
  font-family: var(--pp-head);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.pp-ccard__meta {
  font-size: 13px;
  color: var(--pp-muted-2);
  margin-top: 5px;
}
.pp-ccard__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--pp-body);
  margin-top: 11px;
}
/* margin-top:auto pins the CTA to the bottom, which is what actually makes a
   row of cards look the same height rather than merely BE the same height. */
.pp-ccard__go {
  margin-top: auto;
  padding-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pp-accent);
}
.pp-ccard:hover .pp-ccard__go { color: var(--pp-accent-dark); }

/* Medium: same card, no photograph, slightly tighter type. */
.pp-ccard--md .pp-ccard__name { font-size: 18px; }
.pp-ccard--md .pp-ccard__body { padding: 20px 22px; }

/* Small: one row. Name and count left, action right, still the same card. */
.pp-ccard--sm { flex-direction: row; align-items: center; }
.pp-ccard--sm .pp-ccard__body {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  width: 100%;
}
.pp-ccard--sm .pp-ccard__name { font-size: 16.5px; }
.pp-ccard--sm .pp-ccard__meta { margin-top: 0; }
.pp-ccard--sm .pp-ccard__go { margin-top: 0; padding-top: 0; flex: none; }
.pp-ccard--sm .pp-ccard__lead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   County group - the city directory
   --------------------------------------------------------------------------
   Replaces a wall of pill buttons. Each county is a panel; each city is a
   compact row that reads as navigation. The panel header links to the county
   page, so the parent-child relationship is in the markup rather than implied
   by a heading sitting above some chips.
   -------------------------------------------------------------------------- */
/* Warm off-white section band. Sits between white and the soft yellow, so a
   large section can have its own ground without the page turning into one
   pale-yellow field. */
.pp-band--base { background: var(--pp-base); }

/* Featured county cards. Four across on desktop, two on tablet, one on
   phones. Separate from .pp-grid--4 because that class collapses to a single
   column at 780px, and item 35 wants two columns through the tablet band. */
.pp-ccard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}

/* Columns rather than a grid.

   A 3-column grid aligns panels into rows, and a county with two communities
   sitting beside one with six leaves the short panel's row half empty: 78.8%
   of the allocated area was actually filled at 1440px. Columns let each panel
   take exactly its own height and balance the three columns automatically,
   which is what item 29 means by denser but still breathable. Reading order
   stays down-then-across, and the panel order still follows the researched
   county priority. */
.pp-cgrid {
  column-count: 3;
  column-gap: 18px;
}
.pp-cgrid > .pp-cgroup {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 18px;
}
.pp-cgroup {
  background: var(--pp-white);
  border: 1px solid var(--pp-line-10);
  border-radius: var(--pp-r-card);
  padding: 4px 6px 6px;
}
.pp-cgroup__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 14px 14px 10px;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  color: var(--pp-ink);
  text-decoration: none;
}
.pp-cgroup__h {
  font-family: var(--pp-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pp-accent-dark);
  margin: 0;
}
.pp-cgroup__n { font-size: 12.5px; color: var(--pp-muted-3); flex: none; }
.pp-cgroup__list { display: flex; flex-direction: column; }

/* An explicit display rule beats the user-agent [hidden] rule, so the header
   anchor stayed visible when site.js hid it to swap in the mobile button and
   every county name rendered twice. Scoped rather than a blanket
   [hidden]{display:none!important}. */
.pp-cgroup__head[hidden] { display: none; }

.pp-citylink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-radius: 11px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--pp-ink);
  text-decoration: none;
  transition: background-color .14s ease, color .14s ease;
}
.pp-citylink:hover { background: var(--pp-soft); color: var(--pp-accent-dark); }
.pp-citylink:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: -2px; }
/* An arrow rather than color alone carries the affordance, so the link is
   still identifiable without color vision. */
.pp-citylink__go { color: var(--pp-accent); font-size: 13px; flex: none; opacity: .55; }
.pp-citylink:hover .pp-citylink__go { opacity: 1; }

.pp-cgroup__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 14px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-accent);
  text-decoration: none;
}
.pp-cgroup__all:hover { color: var(--pp-accent-dark); }

/* The group header is a plain link on desktop and a disclosure button on
   mobile. The chevron only exists in the button form. */
.pp-cgroup__caret { display: none; }

/* --------------------------------------------------------------------------
   Breed page components
   -------------------------------------------------------------------------- */

/* 1. BREED SNAPSHOT. Replaces .pp-facts on this page, which rendered as a
   hairline 3x2 grid and read as a spreadsheet. These are cards: each one has
   its own ground, border and radius, so the six facts scan as six things
   rather than as table cells. */
.pp-snap {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.pp-snap__card {
  background: var(--pp-white);
  border: 1px solid var(--pp-line-10);
  border-radius: 16px;
  padding: 20px 18px 22px;
  text-align: center;
  transition: border-color .18s ease, transform .18s ease;
}
.pp-snap__card:hover { border-color: var(--pp-line-16); transform: translateY(-2px); }
.pp-snap__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pp-muted-2);
}
.pp-snap__v {
  font-family: var(--pp-head);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: 10px;
}

/* 2. FEATURE CARDS. Larger than .pp-reason, with an accent rule at the top so
   they read as a deliberate row rather than three light boxes. */
.pp-feature {
  background: var(--pp-white);
  border: 1px solid var(--pp-line-10);
  border-radius: var(--pp-r-card);
  padding: 26px 26px 28px;
  position: relative;
  overflow: hidden;
}
.pp-feature::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--pp-yellow);
}
.pp-feature__t {
  font-family: var(--pp-head);
  font-size: 19.5px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.pp-feature p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--pp-body);
  margin-top: 12px;
}

/* 3. TWO EQUAL PANELS. The old version used .pp-card--soft, which made both
   panels solid pale yellow and contributed to the page reading as one long
   yellow field. White ground, amber mark, equal height via stretch. */
.pp-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  align-items: stretch;
}
.pp-duo__panel {
  background: var(--pp-white);
  border: 1px solid var(--pp-line-10);
  border-radius: var(--pp-r-panel);
  padding: 30px 30px 32px;
  display: flex;
  flex-direction: column;
}
.pp-duo__mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--pp-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-bottom: 18px;
}
.pp-duo__mark svg { width: 21px; height: 21px; display: block; }
.pp-duo__h { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.pp-duo__panel p {
  font-size: 16px;
  line-height: 1.72;
  color: var(--pp-body);
  margin-top: 12px;
  max-width: 60ch;
}

/* 4. NUMBERED PROCESS. Replaces two paragraphs with an empty right half. The
   number is the visual, so no icon set is needed and nothing is invented. */
.pp-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  counter-reset: ppstep;
}
.pp-step {
  background: var(--pp-white);
  border: 1px solid var(--pp-line-10);
  border-radius: 16px;
  padding: 24px 20px 26px;
  position: relative;
}
.pp-step__n {
  font-family: var(--pp-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--pp-accent);
}
.pp-step__h {
  font-family: var(--pp-head);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  margin: 12px 0 0;
}
.pp-step p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--pp-body);
  margin-top: 9px;
}

/* 5. TRUST CARDS. Three, not six, and the dark band is the only one on the
   page. Cards get a real border so they do not dissolve into the ground. */
.pp-trust3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pp-trust3__card {
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--pp-line-dark);
  border-radius: var(--pp-r-card);
  padding: 28px 26px 30px;
}
.pp-trust3__t {
  font-family: var(--pp-head);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
.pp-trust3__card p {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .74);
  margin-top: 11px;
}

/* 6. RELATED BREED CARDS. The old .pp-tile was small and the image sat inside
   a pale card, which read as a cream margin around the photo. Full-bleed 4/3,
   cover, and a real CTA row. */
.pp-relgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* Three across on the county page, where all nine breeds are shown and four
   columns would make each card too small to carry a descriptor. */
.pp-relgrid--3 { grid-template-columns: repeat(3, 1fr); }
.pp-relcard__desc {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: var(--pp-body);
  margin-top: 7px;
}
.pp-relcard {
  display: flex;
  flex-direction: column;
  background: var(--pp-white);
  border: 1px solid var(--pp-line-10);
  border-radius: var(--pp-r-card);
  overflow: hidden;
  color: var(--pp-ink);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pp-relcard:hover {
  border-color: var(--pp-line-16);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(36, 32, 29, .08);
}
.pp-relcard__media { aspect-ratio: 4 / 3; overflow: hidden; flex: none; }
.pp-relcard__media > .pp-media { width: 100%; height: 100%; background: none; }
.pp-relcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pp-relcard__body { padding: 18px 20px 20px; }
.pp-relcard__name {
  font-family: var(--pp-head);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: block;
}
.pp-relcard__go {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pp-accent);
}
.pp-relcard:hover .pp-relcard__go { color: var(--pp-accent-dark); }

/* Supporting image height, item: ~360-440px desktop, ~240-300px mobile. */
.pp-breed__media { height: 420px; border-radius: var(--pp-r-card); }

/* --------------------------------------------------------------------------
   County page components
   -------------------------------------------------------------------------- */

/* 1. CONTAINED DARK PANEL. The county page carried two full-width black
   bands, and the recording calls the effect abrupt. A dark panel with its own
   radius, inset inside a white section, reads as a deliberate trust block
   rather than the page suddenly going dark edge to edge. */
.pp-darkpanel {
  background: var(--pp-ink);
  border-radius: 28px;
  padding: 46px 44px 48px;
  color: #fff;
}
.pp-darkpanel .pp-eyebrow { color: var(--pp-yellow); }
.pp-darkpanel__h {
  font-size: 30px;
  line-height: 1.14;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 14px 0 0;
  color: #fff;
}
.pp-darkpanel__lead {
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .72);
  margin: 14px 0 0;
  max-width: 620px;
}
.pp-darkpanel__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 30px;
}
.pp-darkpanel__card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--pp-line-dark);
  border-radius: 18px;
  padding: 24px 22px 26px;
}
.pp-darkpanel__t {
  font-family: var(--pp-head);
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  display: block;
}
.pp-darkpanel__card p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .72);
  margin-top: 10px;
}

/* 2. COMMUNITY CARDS. Six pale rows looked unfinished. These are navigation
   cards: white ground, the city name, and an arrow that moves on hover. */
.pp-locgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pp-loccard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--pp-white);
  border: 1px solid var(--pp-line-10);
  border-radius: 16px;
  padding: 18px 20px;
  color: var(--pp-ink);
  text-decoration: none;
  min-height: 62px;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.pp-loccard:hover {
  border-color: var(--pp-line-16);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(36, 32, 29, .06);
}
.pp-loccard:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 3px; }
.pp-loccard__name {
  font-family: var(--pp-head);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
}
.pp-loccard__go { color: var(--pp-accent); font-size: 14px; flex: none; transition: transform .16s ease; }
.pp-loccard:hover .pp-loccard__go { transform: translateX(3px); }

/* 3. CONVERSION CARDS. Two, with subtle contrast between them rather than two
   identical boxes: one warm, one white. */
.pp-convo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.pp-convo__card {
  border-radius: var(--pp-r-panel);
  padding: 32px 32px 34px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pp-line-10);
}
.pp-convo__card--warm { background: var(--pp-soft); border-color: rgba(36, 32, 29, .08); }
.pp-convo__card--plain { background: var(--pp-white); }
.pp-convo__h { font-size: 23px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.pp-convo__card p {
  font-size: 16px;
  line-height: 1.68;
  color: var(--pp-body);
  margin: 12px 0 0;
  max-width: 46ch;
}
.pp-convo__card .pp-actions { margin-top: auto; padding-top: 20px; }

/* A subtle visit-info block. Item 5 rules out the heavy beige card that used
   to carry the market details: this is an accent rule and tight rows, so the
   information sits inside the section rather than in a box bolted onto it. */
.pp-visitinfo {
  border-left: 3px solid var(--pp-yellow);
  padding: 4px 0 4px 20px;
  margin-top: 24px;
  max-width: 560px;
}
.pp-visitinfo__h {
  font-family: var(--pp-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pp-accent-dark);
  margin: 0;
}
.pp-visitinfo__row {
  display: flex;
  gap: 14px;
  padding: 9px 0;
  font-size: 15.5px;
  line-height: 1.6;
}
.pp-visitinfo__row + .pp-visitinfo__row { border-top: 1px solid var(--pp-line-09); }
.pp-visitinfo__k {
  font-family: var(--pp-head);
  font-weight: 600;
  flex: none;
  width: 104px;
  color: var(--pp-ink);
}
.pp-visitinfo__v { color: var(--pp-body); }

/* County split image, matching the breed page band of 380-440px desktop. */
.pp-loc__media { height: 410px; border-radius: var(--pp-r-card); }

/* --------------------------------------------------------------------------
   Shared inquiry form
   -------------------------------------------------------------------------- */
.pp-inq {
  /* Centered and capped, so the form never stretches the width of a monitor. */
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
}
.pp-inq__head { text-align: center; margin-bottom: 28px; }
.pp-inq__h {
  font-size: 32px;
  line-height: 1.14;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}
.pp-inq__lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--pp-body);
  margin: 12px auto 0;
  max-width: 560px;
}

.pp-inq__form {
  background: var(--pp-white);
  border: 1px solid var(--pp-line-12);
  border-radius: 22px;
  padding: 34px 34px 32px;
}

/* First name + last name. Two across, stacking below 640px. */
.pp-inq__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
/* Vertical rhythm between stacked blocks only. The first/last pair sits in a
   grid row, and an unscoped sibling margin pushed the second column down 18px,
   so the two fields were side by side but not aligned. */
.pp-inq__form > .pp-inq__field + .pp-inq__field,
.pp-inq__form > .pp-inq__row + .pp-inq__field,
.pp-inq__form > .pp-inq__field + .pp-inq__row { margin-top: 18px; }

.pp-inq__label {
  display: block;
  font-family: var(--pp-head);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--pp-ink);
  margin-bottom: 7px;
}
.pp-inq__input {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  /* 16px or larger prevents iOS zooming the viewport on focus. */
  font-family: var(--pp-text);
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--pp-ink);
  background: var(--pp-base);
  border: 1px solid var(--pp-line-16);
  border-radius: 12px;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.pp-inq__input::placeholder { color: var(--pp-muted); }
.pp-inq__input:hover { border-color: rgba(36, 32, 29, .24); }
.pp-inq__input:focus {
  outline: none;
  background: var(--pp-white);
  border-color: var(--pp-accent);
  box-shadow: 0 0 0 3px rgba(201, 138, 31, .18);
}
.pp-inq__input:focus-visible { outline: none; }
.pp-inq__textarea {
  height: 150px;
  resize: vertical;
  line-height: 1.6;
}

/* Inline validation. Never an alert; the message is tied to its field through
   aria-describedby and announced by the field, not by a popup. */
.pp-inq__err {
  font-size: 14px;
  line-height: 1.45;
  color: #B3261E;
  margin: 7px 0 0;
}
.pp-inq__input[aria-invalid="true"] {
  border-color: #B3261E;
  background: #FFF8F7;
}
.pp-inq__input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .16);
}

/* Honeypot: off the canvas rather than display:none, which some browsers skip
   when autofilling and which some bots specifically look for. */
.pp-inq__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pp-inq__submit {
  display: block;
  width: 100%;
  margin-top: 24px;
  min-height: 52px;
  padding: 15px 20px;
  font-family: var(--pp-head);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--pp-ink);
  background: var(--pp-yellow);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, transform .12s ease;
}
.pp-inq__submit:hover { background: var(--pp-yellow-hover); }
.pp-inq__submit:active { transform: translateY(1px); }
.pp-inq__submit:focus-visible {
  outline: 2px solid var(--pp-ink);
  outline-offset: 3px;
}

.pp-inq__note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--pp-muted-2);
  margin: 14px 0 0;
  text-align: center;
}
.pp-inq__status {
  font-size: 15.5px;
  line-height: 1.6;
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--pp-soft);
  border: 1px solid var(--pp-line-12);
}
.pp-inq__status--err { background: #FFF8F7; border-color: rgba(179, 38, 30, .28); }

/* The section the form sits in: 88px desktop, so it never touches whatever is
   above or the footer below. */
.pp-inqsection { padding: 88px var(--pp-gutter); }

@media (max-width: 1100px) {
  /* Form stays centered; first/last stay two across at iPad widths. */
  .pp-inq__form { padding: 30px 28px 28px; }
  .pp-inq__h { font-size: 28px; }
  .pp-inqsection { padding: 64px var(--pp-gutter); }
  /* County: trust cards 4 -> 2, communities 3 -> 2, conversion stays 2. */
  .pp-darkpanel { padding: 38px 32px 40px; border-radius: 24px; }
  .pp-darkpanel__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .pp-locgrid { grid-template-columns: repeat(2, 1fr); }
  .pp-convo__card { padding: 28px 26px 30px; }
  .pp-loc__media { height: 360px; }
  /* Breed page: 6 snapshot cards become 3x2, process 5 becomes 3, related 4
     becomes 2. Two columns wherever two columns are comfortable. */
  .pp-snap { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .pp-steps { grid-template-columns: repeat(3, 1fr); }
  .pp-relgrid, .pp-relgrid--3 { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .pp-trust3 { grid-template-columns: repeat(2, 1fr); }
  .pp-duo { gap: 18px; }
  .pp-duo__panel { padding: 26px 24px 28px; }
  .pp-breed__media { height: 360px; }
  /* Item 35: two columns on tablet rather than a cramped desktop three. */
  .pp-cgrid { column-count: 2; column-gap: 16px; }
  .pp-cgrid > .pp-cgroup { margin-bottom: 16px; }
  .pp-ccard-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  :root { --pp-gutter: 32px; --pp-sec-y: 60px; }
  .pp-hero { grid-template-columns: 1fr; gap: 40px; padding: 56px var(--pp-gutter) 48px; }
  .pp-hero h1 { font-size: 46px; }
  .pp-hero__frame { height: 420px; }
  .pp-split, .pp-split--even { grid-template-columns: 1fr; gap: 36px; }
  .pp-grid--5 { grid-template-columns: repeat(3, 1fr); }
  .pp-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pp-facts--3, .pp-facts--4 { grid-template-columns: repeat(2, 1fr); }
  .pp-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .pp-faq__group { grid-template-columns: 1fr; gap: 20px; }
  .pp-trust { grid-template-columns: 1fr; gap: 32px; }
  /* Full-width band on tablet: the source is a 4:5 portrait, so the container
     needs this much height to keep the child's face inside the crop. */
  .pp-trust__media { height: 430px; }
  .pp-shelter__media { height: 320px; }
  .pp-breed__support { height: 340px; }
  .pp-loc__support { height: 320px; }
  .pp-core__band { height: 320px; }
  .pp-hero__portrait { height: 380px; }
  .pp-cta--media { grid-template-columns: 300px 1fr; gap: 28px; }
  .pp-timeline__row.pp-timeline__row--media { grid-template-columns: 70px 1fr 200px; }
  .pp-pageend { height: 64px; }
  /* Stack the FAQ split here rather than squeezing a 40/60 into ~960px:
     the image and the questions both end up too narrow otherwise. */
  .pp-faqsplit { grid-template-columns: 1fr; gap: 30px; }
  .pp-faqsplit__aside { position: static; }
  .pp-faqsplit__media { height: 320px; }
  .pp-availcard { grid-template-columns: 180px minmax(0, 1fr); gap: 18px; }
  /* Back to two items — wordmark and burger — so the centring grid would
     leave an empty middle track. Plan a Visit lives in the mobile panel. */
  .pp-header__inner { display: flex; justify-content: space-between; }
  .pp-nav { display: none; }
  .pp-header__cta { display: none; }
  .pp-burger { display: flex; }
  .pp-utility__place { display: none; }
}

@media (max-width: 780px) {
  .pp-inq__form { padding: 24px 20px 22px; border-radius: 18px; }
  .pp-inq__h { font-size: 25px; }
  .pp-inq__lead { font-size: 16px; }
  .pp-inqsection { padding: 48px var(--pp-gutter); }
  /* County, phones: everything stacks. Communities stay two across, which is
     still comfortable for short city names and avoids a six-row column. */
  .pp-darkpanel { padding: 28px 22px 30px; border-radius: 20px; }
  .pp-darkpanel__grid { grid-template-columns: 1fr; gap: 12px; }
  .pp-darkpanel__h { font-size: 25px; }
  .pp-locgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pp-loccard { padding: 14px 14px; min-height: 56px; }
  .pp-loccard__name { font-size: 15px; }
  .pp-convo { grid-template-columns: 1fr; gap: 16px; }
  .pp-convo__card { padding: 24px 22px 26px; }
  .pp-loc__media { height: 270px; }
  /* Single-column flow. Snapshot stays two across: six single-column stat
     cards would be a scroll on its own, and two per row still scans. */
  .pp-snap { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pp-snap__card { padding: 16px 12px 18px; }
  .pp-snap__v { font-size: 17px; }
  .pp-steps { grid-template-columns: 1fr; gap: 12px; }
  .pp-relgrid, .pp-relgrid--3 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .pp-trust3 { grid-template-columns: 1fr; }
  .pp-duo { grid-template-columns: 1fr; }
  .pp-duo__panel { padding: 24px 22px 26px; }
  .pp-feature { padding: 22px 22px 24px; }
  .pp-breed__media { height: 270px; }
  .pp-ccard--sm .pp-ccard__body { padding: 14px 16px; }
  .pp-ccard__body { padding: 18px 18px 20px; }

  .pp-cgroup__head { padding: 15px 14px; min-height: 48px; cursor: pointer; }
  .pp-cgroup__caret {
    display: block;
    position: relative;
    width: 15px;
    height: 15px;
    flex: none;
  }
  .pp-cgroup__caret::before,
  .pp-cgroup__caret::after {
    content: '';
    position: absolute;
    background: var(--pp-accent);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .pp-cgroup__caret::before { top: 6.5px; left: 0; width: 15px; height: 2px; }
  .pp-cgroup__caret::after { left: 6.5px; top: 0; width: 2px; height: 15px; }
  .pp-cgroup.is-open .pp-cgroup__caret::after { transform: scaleY(0); opacity: 0; }

  .pp-cgroup__panel { overflow: hidden; transition: max-height .24s ease; }
  .pp-cgroup.is-closed .pp-cgroup__panel { opacity: 0; }
  .pp-citylink { padding: 12px 14px; min-height: 44px; }
  :root { --pp-gutter: 20px; --pp-sec-y: 48px; }

  /* FAQ at phone sizes. The <=1100 block already stacks the split; these are
     the phone-specific sizes, and they must live here so they win over it. */
  .pp-faqsplit { gap: 26px; }
  .pp-faqsplit__media { height: 270px; margin-top: 20px; }
  .pp-faqsplit__h { font-size: 27px; }
  .pp-faq__btn { padding: 18px 20px; }
  .pp-faq__qtext { font-size: 17.5px; }
  .pp-faq__answer p { font-size: 16px; padding: 0 20px 20px; }

  body { padding-bottom: 84px; } /* clears the sticky two-action bar */

  .pp-hero h1 { font-size: 34px; }
  .pp-hero__lead { font-size: var(--pp-t2); }
  .pp-hero__frame { height: 300px; }

  .pp-pagehead h1 { font-size: 32px; }
  .pp-pagehead p { font-size: 16px; }
  .pp-split h1 { font-size: 30px; }

  .pp-grid--2, .pp-grid--3, .pp-grid--4, .pp-grid--5 { grid-template-columns: 1fr; }
  .pp-facts--3, .pp-facts--4 { grid-template-columns: 1fr; }
  .pp-fieldrow, .pp-intent { grid-template-columns: 1fr; }

  .pp-cta, .pp-cta--sm { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; }
  .pp-cta h2 { font-size: 26px; }
  .pp-cta--sm h2 { font-size: 22px; }

  .pp-availcard { grid-template-columns: 1fr; }
  /* Card grids keep two columns down to the narrow breakpoint below. A card
     that spans the full width at this size would give a 4:3 box over 500px
     tall, and capping that height instead would flatten the box into a
     shallow strip and crop the puppy out. Two-up keeps the ratio honest. */
  .pp-grid:has(> .pp-breedcard),
  .pp-grid:has(> .pp-soonm),
  .pp-grid:has(> .pp-waitm),
  .pp-grid:has(> .pp-tile) { grid-template-columns: repeat(2, 1fr); }
  /* Safety net for engines without :has() - never a shallow strip. */
  .pp-breedcard__media,
  .pp-availcard__media,
  .pp-soonm__media,
  .pp-waitm__media,
  .pp-tile__media { max-height: 340px; }
  /* Stacked on small screens the image spans the card, so a shallower ratio
     keeps the card from becoming a full screen of photograph. */
  .pp-availcard__media { aspect-ratio: 4 / 3; }

  .pp-timeline__row,
  .pp-timeline__row.pp-timeline__row--media { grid-template-columns: 48px 1fr; gap: 16px; padding-bottom: 28px; }
  .pp-timeline__n { width: 38px; height: 38px; font-size: var(--pp-t3); }
  .pp-timeline__body h3 { font-size: 19px; }
  /* The step image drops below the copy and spans the row on small screens */
  .pp-timeline__media { grid-column: 2 / -1; height: 260px; margin-top: 16px; }

  .pp-split-2, .pp-split-2--a, .pp-split-2--b, .pp-split-2--c, .pp-split-2--d,
  .pp-split-2--even, .pp-split-2--form, .pp-split-cta {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .pp-trust { grid-template-columns: 1fr; gap: 24px; }
  .pp-trust__media { height: 280px; }
  /* Two up while a card can still hold its line length, one up below that. */
  .pp-trust__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
  .pp-shelter__media { height: 260px; }
  .pp-breed__support { height: 260px; }
  .pp-loc__support { height: 250px; }
  .pp-core__band { height: 240px; }
  .pp-hero__portrait { height: 300px; }
  /* Copy already leads in the DOM, so no order override is needed here. */
  .pp-cta--media { grid-template-columns: 1fr; }
  .pp-cta__media { height: 240px; }

  .pp-pageend { height: 48px; }
  .pp-footer { padding: 44px var(--pp-gutter) 28px; }
  .pp-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .pp-footer__base { flex-direction: column; gap: 8px; }

  .pp-utility { font-size: 12px; padding: 8px var(--pp-gutter); justify-content: center; text-align: center; }
  .pp-utility__group { display: none; }
  .pp-utility__mobile { display: block; }
  /* The tagline lives inside the logo now, so it scales with the image rather
     than being hidden on small screens; its width is set in the brand-logo
     block at the end of this file, where all the breakpoints live together in
     descending order. */
  .pp-footer__logo { width: 208px; }
  .pp-form { padding: 22px; }

  .pp-mobilebar { display: grid; }

  .pp-section { padding: var(--pp-sec-y) var(--pp-gutter); }
  h2 { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   Print & motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important;   /* The accordion still opens and closes — it just does so instantly. */
}
  /* The accordion still opens and closes — it just does so instantly. */
}

@media print {
  .pp-utility, .pp-header, .pp-mobilebar, .pp-mobilemenu, .pp-footer { display: none !important; }
  body { padding-bottom: 0; background: #fff; }
}

/* --------------------------------------------------------------------------
   Narrow phones — card grids finally go one-up
   -------------------------------------------------------------------------- */
@media (max-width: 540px) {
  .pp-grid:has(> .pp-breedcard),
  .pp-grid:has(> .pp-soonm),
  .pp-grid:has(> .pp-waitm),
  .pp-grid:has(> .pp-tile) { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Phones only. The tablet band above keeps the county directory open in two
   columns; below 768 thirty-one city links in one column is a scroll rather
   than a directory, so the groups collapse and the header becomes a button.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .pp-cgrid { column-count: 1; }
  .pp-cgrid > .pp-cgroup { margin-bottom: 12px; }
  .pp-ccard-grid { grid-template-columns: 1fr; gap: 14px; }
  .pp-cgroup__caret { display: block; }
  .pp-cgroup__panel { overflow: hidden; transition: max-height .24s ease; }
  .pp-cgroup.is-closed .pp-cgroup__panel { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Inquiry form, narrow widths. The first/last pair stacks here rather than at
   the site's 780px breakpoint: two 50% columns are still comfortable on iPad
   portrait, and only get cramped once the form itself is under ~640px.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .pp-inq__row { grid-template-columns: 1fr; gap: 0; }
  /* Stacked, so the pair needs its own separation back. */
  .pp-inq__row > .pp-inq__field + .pp-inq__field { margin-top: 18px; }
}

/* Never let the form crowd the viewport edge on a small phone. */
@media (max-width: 430px) {
  .pp-inqsection { padding-left: 16px; padding-right: 16px; }
  .pp-inq__form { padding: 22px 16px 20px; }
  .pp-inq__input { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   Brand logo ladder

   All breakpoints sit together, widest first, so the narrowest matching query
   wins. Spread through the file they collided: the 1100px rule came after the
   780px one, so at ~500px wide the logo took the tablet width instead of the
   phone width.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root { --pp-logo-w: 222px; }
}
@media (max-width: 780px) {
  :root { --pp-logo-w: 200px; }
}
/* Below 430px the full lockup would crowd the burger, so it steps down again.
   The tagline is still legible at this size, which is why the square icon
   fallback is not needed here. */
@media (max-width: 430px) {
  :root { --pp-logo-w: 172px; }
  .pp-mobilemenu__logo { width: 164px; }
  .pp-footer__logo { width: 186px; }
}
@media (max-width: 360px) {
  :root { --pp-logo-w: 152px; }
  .pp-mobilemenu__logo { width: 148px; }
}