/* Harbor Paws — page layer on top of the Kelvo DNA (tokens.css → kelvo.css → palette.css → type.css → this file).
   Retints the neutrals to warm sand paper with deep-brown ink so terracotta reads at home, then adds the five new sections.
   Every value comes from the tokens; only the hand retints below carry hex. */

/* ── Hand retints: warm sand paper, brown ink, clay pillars, a peach-sand appeals band ── */
:root {
  --bg: #F2EADF;
  --surface-2: #FAF5EE;
  --text: #2B150E;
  --text-2: #4F3A31;
  --muted: #6C574D;
  --on-dark: #F6EEE4;
  --on-dark-2: rgba(246, 238, 228, .86);
  --line: #F0E6DA;
  --line-2: rgba(43, 21, 14, .12);
  --glide-light: rgba(43, 21, 14, .07);
  --mint: #F3D6C1;
  --mint-2: #EBC4A9;
  --sage: #E6AE88;
  --deep-rgb: 50, 22, 15;
}
.btn--ink:hover { background: var(--accent-hover); }
.btn--green:hover { background: var(--accent-hover); }
.ticks .tick { color: var(--accent); }

/* ── Header D: the white pill sits 16px under the top bar and scrolls with the page (like the gold header) ── */
.hp-head { position: relative; z-index: 20; margin-top: 16px; }
.hp-pill { margin-inline: 0; }
.hp-pill .logo { color: var(--accent); }
.hp-pill .logo span { font-size: 30px; color: var(--text); }
.hp-head .mnav { margin-top: 8px; border-radius: 32px; background: var(--surface); }

/* ── Hero B ── */
.hp-hero { padding-top: 72px; }
.hp-hero .v-hero-b { grid-template-columns: 660fr 600fr; }
.hp-hero .t-display { max-width: 660px; }
.hp-hero__photo { object-position: 50% 40%; }
.hp-hero .v-appeal-chip { width: 392px; }

/* ── New · adoptable this week ── */
.hp-pets__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.hp-pet { display: flex; flex-direction: column; padding: 16px 16px 20px; border-radius: var(--r); }
.hp-pet__ph { position: relative; }
.hp-pet__ph img { width: 100%; height: auto; aspect-ratio: 288 / 316; object-fit: cover; border-radius: var(--r-photo); }
.hp-pet__fee { position: absolute; left: 12px; top: 12px; padding: 4px 14px; border-radius: var(--r-pill); background: var(--surface); font: 800 14px/1.6 var(--font); color: var(--text); }
.hp-pet__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 20px; padding-inline: 4px; }
.hp-pet__top h3 { color: var(--text); }
.hp-pet__meta { font: 700 15px/1.6 var(--font); color: var(--accent-ink); white-space: nowrap; }
.hp-pet .t-body { margin-top: 8px; padding-inline: 4px; }
.hp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 4px 28px; }
.hp-tags li { padding: 4px 12px; border-radius: var(--r-pill); background: var(--accent-soft); font: 700 14px/1.6 var(--font); color: var(--text); }
.hp-pet .btn { margin-top: auto; }
.hp-pets__foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 32px; margin-top: 56px; }

/* ── Stats A on the deep band: clay pillars carry deep-brown type ── */
.impact .pillar { color: var(--forest); }

/* ── New · foster in 3 steps ── */
.hp-foster { display: grid; grid-template-columns: 611fr 675fr; align-items: center; gap: 96px; width: min(var(--container), 100% - 2 * var(--gutter)); margin: var(--section) auto 0; }
.hp-foster__media { position: relative; }
.hp-foster__photo { width: 100%; height: 720px; object-fit: cover; object-position: 50% 55%; border-radius: var(--r-lg); }
.hp-foster__squiggle { position: absolute; left: -22px; top: 56px; width: 44px; }
.hp-kit { position: absolute; right: -56px; bottom: 48px; display: flex; align-items: center; gap: 16px; width: 360px; padding: 20px 24px 20px 20px; border-radius: 32px; }
.hp-kit .t-h6 { color: var(--text); }
.hp-kit .t-body { line-height: 1.55; }
.hp-foster__copy { display: grid; justify-items: start; gap: 16px; }
.hp-foster__copy > .t-body { max-width: 34em; }
.hp-steps { display: grid; width: 100%; margin-top: 24px; }
.hp-steps li { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 24px; padding-bottom: 32px; }
.hp-steps li:not(:last-child)::before { content: ""; position: absolute; left: 35px; top: 84px; bottom: 12px; border-left: 2px dashed var(--line-2); }
.hp-steps__n { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--r-sm); background: var(--tile, var(--accent)); color: #fff; font: 700 36px/1 var(--font-display); }
.hp-steps h3 { margin-top: 2px; color: var(--text); }
.hp-steps .t-body { margin-top: 4px; max-width: 460px; }
.hp-foster .btn { margin-top: 8px; }

/* ── New · vet care fund (sand band) ── */
.hp-vet { position: relative; display: grid; grid-template-columns: 1fr 560px; align-items: stretch; gap: 72px; width: min(var(--band-w), 100% - 100px); margin: var(--section) auto 0; padding: 80px; border-radius: var(--r-band); background: var(--mint); }
.hp-vet__copy { display: grid; justify-items: start; align-content: center; gap: 16px; }
.hp-vet__copy > .t-body { max-width: 540px; }
.hp-goal { width: 100%; margin-top: 8px; }
.hp-goal .goal { margin-top: 0; }
.hp-goal__bar { height: 20px; background: var(--surface); }
.hp-goal__bar i { background: var(--accent); }
.hp-goal__note { margin-top: 10px; font: 700 15px/1.6 var(--font); color: var(--text-2); }
.hp-ladder { width: 100%; margin-top: 8px; padding: 6px 28px; border-radius: 32px; }
.hp-ladder li { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 16px; padding: 14px 0; }
.hp-ladder li + li { border-top: 1px solid var(--line-2); }
.hp-ladder b { font: 700 36px/1 var(--font-display); color: var(--accent-ink); }
.hp-ladder span { font: 700 16px/1.5 var(--font); color: var(--text); }
.hp-vet .btn { margin-top: 16px; }
.hp-vet__media { position: relative; }
.hp-vet__photo { width: 100%; height: 100%; min-height: 640px; object-fit: cover; object-position: 66% 50%; border-radius: var(--r-lg); }
.hp-vet__ast { position: absolute; right: 32px; top: -28px; width: 60px; }
.hp-clinic { position: absolute; left: -44px; bottom: 36px; width: 300px; padding: 24px 26px; border-radius: 32px; }
.hp-clinic ul { display: grid; gap: 10px; margin-top: 12px; }
.hp-clinic li { display: grid; grid-template-columns: 40px 1fr; align-items: baseline; gap: 8px; }
.hp-clinic b { font: 700 36px/1 var(--font-display); color: var(--accent-ink); }
.hp-clinic span { font: 500 16px/1.5 var(--font); color: var(--text-2); }

/* ── New · before / after adoption story ── */
.hp-ba { position: relative; display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: var(--gap); }
.hp-ba__ph { position: relative; min-height: 540px; }
.hp-ba__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); }
.hp-ba__ph:first-child img { object-position: 72% 50%; }
.hp-ba__tag { position: absolute; left: 16px; bottom: 16px; padding: 8px 18px; border-radius: var(--r-pill); background: var(--surface); font: 800 15px/1.5 var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--text); }
.hp-ba__ph--after .hp-ba__tag { background: var(--sun); }
.hp-ba__card { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 40px 36px; border-radius: var(--r-lg); }
.hp-ba__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 12px; padding-bottom: 28px; border-bottom: 1px solid var(--line-2); }
.hp-ba__facts b { display: block; font: 700 60px/1 var(--font-display); color: var(--text); }
.hp-ba__facts span { display: block; margin-top: 6px; font: 700 15px/1.5 var(--font); color: var(--text-2); }
.hp-ba__card blockquote { font-size: 30px; line-height: 1.2; color: var(--text); text-wrap: balance; }
.hp-ba__badge { position: absolute; left: calc(33% - 40px); top: -34px; width: 70px; pointer-events: none; }

/* ── New · sponsor a kennel ── */
.hp-kennel { display: grid; grid-template-columns: 1fr 540px; gap: 72px; padding: 72px; border-radius: var(--r-lg); }
.hp-kennel__copy { display: grid; justify-items: start; align-content: start; gap: 16px; }
.hp-kennel__copy > .t-body { max-width: 520px; }
.hp-plate { position: relative; display: grid; gap: 6px; width: min(440px, 100%); margin-top: 24px; padding: 30px 36px 32px; border-radius: 24px; background: var(--forest); color: var(--on-dark); }
.hp-plate::before, .hp-plate::after { content: ""; position: absolute; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); }
.hp-plate::before { left: 16px; }
.hp-plate::after { right: 16px; }
.hp-plate__k { font: 700 60px/1 var(--font-display); text-transform: uppercase; color: var(--sun); }
.hp-plate__by { margin-top: 10px; font: 800 14px/1.6 var(--font); text-transform: uppercase; color: var(--on-dark-2); }
.hp-plate__name { font: 700 30px/1.1 var(--font-display); text-transform: uppercase; color: var(--on-dark); overflow-wrap: anywhere; }
.hp-kennel__form { display: grid; align-content: start; gap: 20px; }
.hp-kennel fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.hp-opts { display: grid; gap: 12px; }
.hp-opts input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hp-opt { display: grid; grid-template-columns: 112px 1fr; align-items: center; column-gap: 20px; padding: 18px 24px; border: 1.5px solid var(--line-2); border-radius: 24px; background: var(--surface-2); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.hp-opt b { grid-row: span 2; font: 700 40px/1 var(--font-display); color: var(--text); }
.hp-opt__t { font: 800 16px/1.5 var(--font); text-transform: uppercase; color: var(--text); }
.hp-opt__d { font: 500 15px/1.5 var(--font); color: var(--text-2); }
.hp-opt:hover { border-color: var(--accent); }
.hp-opts input:checked + .hp-opt { border-color: var(--accent); background: var(--accent-soft); }
.hp-opts input:focus-visible + .hp-opt { outline: 2px solid var(--accent); outline-offset: 3px; }
.hp-kennel .v-freq input:checked + label { background: var(--sun); color: var(--forest); }
.hp-kennel .v-freq label { letter-spacing: .05em; }
.hp-kennel__note { font: 500 14px/1.6 var(--font); color: var(--text-2); }

/* ── CTA B + footer C: fades in the deep brown ── */
.hp-cta { margin-top: var(--section); }
.hp-cta .v-cta-b__photo { object-position: 70% 40%; }
.hp-cta.v-cta-b::before { background: linear-gradient(90deg, rgba(var(--deep-rgb), .86) 0%, rgba(var(--deep-rgb), .62) 40%, rgba(var(--deep-rgb), .04) 72%); }
.hp-cta { background: var(--forest); }
.hp-foot { margin: 40px auto 50px; }
.hp-foot.v-foot-c::before { background: linear-gradient(180deg, rgba(var(--deep-rgb), .04) 0%, rgba(var(--deep-rgb), .2) 40%, rgba(var(--deep-rgb), .74) 66%, var(--forest) 100%); }
.hp-foot .v-foot-c__photo { object-position: 50% 30%; }
.hp-foot .v-foot-c__hero { padding-top: 470px; }
.hp-foot .v-foot-c__links { margin-top: 96px; }
.hp-foot .v-logo-dark { color: var(--sun); }
.hp-foot .v-logo-dark span { font-size: 36px; color: var(--sun); }

/* ════════ Responsive ════════ */
@media (max-width: 1280px) {
  .hp-pets__grid { grid-template-columns: repeat(2, 1fr); }
  .hp-foster { gap: 72px; }
  .hp-kit { right: -32px; width: 320px; }
  .hp-vet { grid-template-columns: 1fr 460px; gap: 48px; padding: 64px; }
  .hp-kennel { grid-template-columns: 1fr 480px; gap: 48px; padding: 56px; }
  .hp-ba__card blockquote { font-size: 24px; }
}
@media (max-width: 1100px) {
  .hp-hero { padding-top: 48px; }
  .hp-hero .v-hero-b { grid-template-columns: 1fr; }
  .hp-foster { grid-template-columns: 1fr; gap: 56px; }
  .hp-foster__photo { height: auto; aspect-ratio: 4 / 3; }
  .hp-kit { right: 24px; }
  .hp-vet { grid-template-columns: 1fr; gap: 48px; }
  .hp-vet__photo { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  .hp-clinic { left: 24px; }
  .hp-ba { grid-template-columns: 1fr 1fr; }
  .hp-ba__card { grid-column: 1 / -1; grid-row: 2; }
  .hp-ba__badge { left: calc(50% - 35px); }
  .hp-kennel { grid-template-columns: 1fr; }
  .hp-cta.v-cta-b::before { background: linear-gradient(90deg, rgba(var(--deep-rgb), .88) 0%, rgba(var(--deep-rgb), .66) 55%, rgba(var(--deep-rgb), .12) 90%); }
}
@media (max-width: 760px) {
  .hp-head { margin-top: 8px; }
  .hp-pill .logo span { font-size: 24px; }
  .hp-pill .logo .mark { width: 26px; height: 23px; }
  .hp-hero { padding-top: 32px; }
  .hp-hero .v-appeal-chip { width: auto; }
  .hp-pets__grid { grid-template-columns: 1fr; gap: 16px; }
  .hp-pets__foot { margin-top: 40px; text-align: center; }
  .hp-foster__photo { aspect-ratio: 4 / 5; border-radius: 32px; }
  .hp-foster__squiggle { left: auto; right: 16px; top: -18px; width: 36px; }
  .hp-kit { position: relative; right: auto; bottom: auto; width: auto; margin: -56px 12px 0; }
  .hp-steps li { grid-template-columns: 56px 1fr; gap: 16px; }
  .hp-steps__n { width: 56px; height: 56px; font-size: 24px; }
  .hp-steps li:not(:last-child)::before { left: 27px; top: 66px; }
  .hp-vet { width: calc(100% - 16px); padding: 48px 20px 20px; border-radius: 40px; }
  .hp-ladder { padding: 4px 20px; }
  .hp-ladder li { grid-template-columns: 84px 1fr; }
  .hp-ladder b { font-size: 30px; }
  .hp-vet__photo { aspect-ratio: 4 / 5; border-radius: 32px; }
  .hp-vet__ast { right: 16px; width: 44px; }
  .hp-clinic { position: relative; left: auto; bottom: auto; width: auto; margin: -64px 12px 0; }
  .hp-ba { grid-template-columns: 1fr; gap: 16px; }
  .hp-ba__ph { min-height: 380px; }
  .hp-ba__card { grid-row: auto; grid-column: auto; padding: 32px 20px; border-radius: 32px; }
  .hp-ba__ph img { border-radius: 32px; }
  .hp-ba__facts b { font-size: 40px; }
  .hp-ba__card blockquote { font-size: 24px; }
  .hp-ba__badge { left: auto; right: 16px; top: -26px; width: 52px; }
  .hp-kennel { padding: 32px 16px 20px; gap: 32px; border-radius: 32px; }
  .hp-plate { padding: 26px 24px; }
  .hp-plate__k { font-size: 40px; }
  .hp-opt { grid-template-columns: 84px 1fr; padding: 16px; column-gap: 14px; }
  .hp-opt b { font-size: 30px; }
  .hp-cta.v-cta-b::before { background: linear-gradient(0deg, rgba(var(--deep-rgb), .9) 0%, rgba(var(--deep-rgb), .64) 58%, rgba(var(--deep-rgb), .08) 92%); }
  .hp-foot { width: calc(100% - 16px); margin: 24px auto 8px; }
  .hp-foot .v-foot-c__hero { padding-top: 390px; }
  .hp-foot .v-foot-c__links { margin-top: 72px; }
}
.hp-cta .v-cta-b__sparks { left: 29%; top: 14%; }
@media (max-width: 760px) { .hp-cta .v-cta-b__sparks { left: auto; right: 20px; top: 32px; } }
.hp-cta .v-cta-b__link { display: inline-block; padding-block: 10px; }