/* Keyboard focus across the landing shell. */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--pp-text); outline-offset: 2px; }
.pp-footer :focus-visible { outline-color: var(--pp-primary); }

html, body {
    margin: 0;
    padding: 0;
    background: var(--pp-bg);
    font-family: var(--pp-font-ui);
    color: var(--pp-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
a { color: inherit; }
button, a.btn { font-family: inherit; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    left: 16px;
    top: 16px;
    width: auto;
    height: auto;
    padding: 10px 14px;
    background: var(--pp-text);
    color: var(--pp-text-on-dark);
    border-radius: 8px;
    z-index: 100;
    font-weight: 600;
}

.pp-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}
@media (min-width: 768px) {
    .pp-wrap { padding: 0 40px; }
}

/* Nav --------------------------------------------------------- */
.pp-nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(250, 249, 247, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--pp-border);
}
.pp-nav-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.pp-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.pp-brand-mark {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: var(--pp-primary);
    overflow: hidden;
    display: flex;
}
.pp-brand-mark img, .pp-brand-mark picture { width: 32px; height: 32px; object-fit: cover; }
.pp-brand-name {
    font-family: var(--pp-font-display);
    font-weight: 700;
    font-size: 21px;
    color: var(--pp-text);
    letter-spacing: -0.4px;
}
.pp-nav-links {
    display: none;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
@media (min-width: 860px) {
    .pp-nav-links { display: flex; }
}
.pp-nav-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--pp-neutral-ink);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 999px;
    white-space: nowrap;
}
.pp-nav-link:hover { color: var(--pp-text); }
.pp-nav-cta {
    min-height: 44px;
    background: var(--pp-text);
    color: var(--pp-text-on-dark);
    border: none;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

/* Hero -------------------------------------------------------- */
.pp-hero { padding: 40px 0 8px; }
.pp-hero-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
/* An explicit basis, not auto: flex decides line breaks from each item's
 * max-content size BEFORE it shrinks anything, so widening this column's
 * content (the trust chips) wrapped the avatar onto its own line at full
 * desktop width. A fixed basis keeps the avatar beside the name until the
 * viewport is genuinely narrow. */
.pp-hero-meta { flex: 1 1 240px; min-width: 0; }
.pp-avatar {
    width: 84px; height: 84px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--pp-grad-orange);
    display: flex; align-items: center; justify-content: center;
    color: white;
    font-family: var(--pp-font-ui);
    font-weight: 700;
    font-size: 32px;
    flex-shrink: 0;
}
.pp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pp-name {
    font-family: var(--pp-font-display);
    font-weight: 700;
    font-size: clamp(34px, 5vw, 44px);
    color: var(--pp-text);
    margin: 0;
    letter-spacing: -0.5px;
    line-height: 1.02;
}
.pp-handle {
    margin-top: 4px;
    color: var(--pp-neutral-ink);
    font-size: 14px;
    font-weight: 500;
}
.pp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.pp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    background: var(--pp-card);
    border: 1px solid var(--pp-border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pp-neutral-ink);
    line-height: 1.2;
}
.pp-pill strong { color: var(--pp-text); font-weight: 700; }
.pp-pill-muted { color: var(--pp-neutral-ink); font-weight: 500; }
.pp-pill-dot {
    width: 6px; height: 6px;
    border-radius: 999px;
}
.pp-pill-icon svg { color: var(--pp-text-secondary); flex-shrink: 0; }
.pp-pill-icon svg.pp-star { color: var(--pp-orange); }
/* Verification: one line, one mark, one colour. The shield and the verified
 * green belong to a Pawprint ID check and nothing else — the soft variant is
 * what a provider gets when only the signup mechanics (phone, email) are on
 * file, so the mark can never be read as vetting that did not happen.
 * --pp-verified-green is a FILL; as text it is ~2.2:1 here. The -ink token is
 * the text colour (5.6:1). */
.pp-verified-line {
    display: inline-flex;
    /* flex-start, not center: the statement wraps to two lines in a narrow
     * card, and a centred mark then floats between them. */
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    font-family: var(--pp-font-ui);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pp-verified-green-ink);
}
.pp-verified-line svg { flex-shrink: 0; margin-top: 1px; }
.pp-verified-line-soft { color: var(--pp-neutral-ink); font-weight: 500; }

/* Breadcrumb -------------------------------------------------- */
.pp-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 22px;
    font-size: 13px;
    color: var(--pp-neutral-ink);
    font-weight: 500;
}
.pp-crumbs a { text-decoration: none; color: inherit; }
.pp-crumbs a:hover { text-decoration: underline; }
.pp-crumbs span[aria-current] {
    color: var(--pp-text);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

/* Section ----------------------------------------------------- */
.pp-section { margin-top: 36px; }
.pp-section-title {
    font-family: var(--pp-font-ui);
    font-weight: 700;
    font-size: 22px;
    color: var(--pp-text);
    margin: 0 0 12px;
    letter-spacing: -0.2px;
}
/* The booking rail's "Choose a service to book" lands here: clear the sticky
   nav so the heading is not tucked under it. */
.pp-services { scroll-margin-top: 84px; }
.pp-section-lede {
    font-size: 14px;
    color: var(--pp-neutral-ink);
    margin: -6px 0 14px;
    line-height: 1.45;
}

/* Card -------------------------------------------------------- */
.pp-card {
    background: var(--pp-card);
    border: 1px solid var(--pp-border);
    border-radius: 14px;
    box-shadow: var(--pp-shadow-card);
}
.pp-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Bio --------------------------------------------------------- */
.pp-bio { padding: 16px 18px; }
.pp-bio p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--pp-text);
    white-space: pre-wrap;
}

/* Service row ------------------------------------------------- */
.pp-service {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.pp-service-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--pp-text);
}
.pp-service-body { flex: 1; min-width: 0; }
.pp-service-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--pp-text);
    margin: 0 0 6px;
    line-height: 1.25;
}
.pp-service-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}
.pp-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: rgba(72, 178, 186, 0.18);
    /* #2a767c was 4.43:1 on this tint at 10px bold (axe: 12 failures on a
       six-service profile); #236a70 is 5.23:1. */
    color: #236a70;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.pp-service-rating, .pp-service-loc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--pp-neutral-ink);
}
.pp-service-loc { color: var(--pp-neutral-ink); }
.pp-service-rating svg { color: var(--pp-orange); }
.pp-service-rating strong { color: var(--pp-text); font-weight: 700; }
.pp-service-loc svg { color: var(--pp-text-tertiary); }
.pp-service-price {
    font-family: var(--pp-font-ui);
    font-weight: 700;
    font-size: 18px;
    color: var(--pp-text);
    white-space: nowrap;
}
.pp-service-card {
    overflow: hidden;
    transition: box-shadow 140ms var(--pp-ease-out);
}
.pp-service-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07); }
a.pp-service {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
a.pp-service:hover { background: rgba(56, 35, 18, 0.03); }
.pp-service-chev {
    color: var(--pp-text-tertiary);
    flex-shrink: 0;
    margin-left: 2px;
}
.pp-service-pkgs {
    border-top: 1px solid var(--pp-border);
    padding: 6px 16px 8px;
}
.pp-service-pkg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 0;
    text-decoration: none;
    color: inherit;
}
.pp-service-pkg-info { min-width: 0; overflow-wrap: anywhere; }
.pp-service-pkg-action { display: grid; justify-items: end; gap: 2px; }
.pp-service-pkg-book {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--pp-neutral-ink);
}
.pp-service-pkg + .pp-service-pkg { border-top: 1px solid var(--pp-border); }
.pp-service-pkg-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-text);
}
.pp-service-pkg:hover .pp-service-pkg-name { text-decoration: underline; }
.pp-service-pkg-dur {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--pp-neutral-ink);
}
.pp-service-pkg-price {
    margin-left: auto;
    font-family: var(--pp-font-ui);
    font-weight: 700;
    font-size: 15px;
    color: var(--pp-text);
    white-space: nowrap;
}
.pp-service-pkg-more {
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-neutral-ink);
}
.pp-reviews-empty {
    padding: 16px 18px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pp-neutral-ink);
}
@media (max-width: 600px) {
    .pp-hero { padding-top: 24px; }
    .pp-section { margin-top: 28px; }
    .pp-service { display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; gap: 8px 10px; }
    .pp-service-icon { width: 36px; height: 36px; grid-row: 1 / span 2; }
    .pp-service-body { grid-column: 2; }
    .pp-service-title { overflow-wrap: anywhere; }
    .pp-service-price { grid-column: 2; grid-row: 2; font-size: 16px; }
    .pp-service > .pp-service-chev { grid-column: 3; grid-row: 1 / span 2; }
}

/* Pet row ----------------------------------------------------- */
.pp-pet {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.pp-pet-avatar {
    width: 48px; height: 48px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--pp-font-ui);
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
    overflow: hidden;
}
.pp-pet-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pp-pet-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--pp-text);
    margin: 0;
}
.pp-pet-meta {
    font-size: 12px;
    color: var(--pp-neutral-ink);
    margin-top: 2px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Reviews ----------------------------------------------------- */
.pp-review { padding: 16px 18px; }
.pp-review-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pp-review-avatar {
    width: 40px; height: 40px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--pp-font-ui);
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    overflow: hidden;
}
.pp-review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pp-review-head-meta { flex: 1; min-width: 0; }
.pp-review-author {
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-text);
}
.pp-review-stars {
    margin-top: 2px;
    font-size: 13px;
    color: var(--pp-orange);
    letter-spacing: 1px;
    line-height: 1;
}
.pp-review-stars-empty { color: var(--pp-text-tertiary); }

/* Photo lightbox ----------------------------------------------- */
.pp-photo-btn {
    padding: 0;
    border: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: zoom-in;
}
.pp-photo-btn img { transition: transform 160ms var(--pp-ease-out); }
.pp-photo-btn:hover img { transform: scale(1.05); }
.pp-lightbox {
    overflow-y: auto;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(56, 35, 18, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.pp-lightbox[hidden] { display: none; }
.pp-lightbox figure {
    margin: auto;
    max-width: min(92vw, 560px);
    text-align: center;
}
.pp-lightbox img {
    width: 100%;
    max-height: 72vh;
    object-fit: contain;
    border-radius: 22px;
    background: var(--pp-card);
    box-shadow: var(--pp-shadow-pop);
}
.pp-lightbox figcaption {
    margin-top: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--pp-font-ui);
}
.pp-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    color: var(--pp-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.pp-review-text {
    margin: 12px 0 10px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--pp-text);
}
.pp-review-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--pp-neutral-ink);
    font-weight: 500;
}
.pp-review-dot { color: var(--pp-text-tertiary); }

/* CTA block --------------------------------------------------- */
.pp-cta {
    margin-top: 40px;
    padding: 28px 24px;
    border-radius: 22px;
    background: var(--pp-primary);
    position: relative;
    overflow: hidden;
}
.pp-cta-paws {
    position: absolute;
    right: -40px; top: -30px;
    color: var(--pp-text);
    opacity: 0.14;
    pointer-events: none;
}
.pp-cta h2 {
    font-family: var(--pp-font-ui);
    font-weight: 700;
    font-size: 26px;
    color: var(--pp-text);
    margin: 0 0 6px;
    letter-spacing: -0.3px;
    position: relative;
}
.pp-cta p {
    font-size: 15px;
    color: var(--pp-text);
    opacity: 0.78;
    margin: 0 0 18px;
    line-height: 1.5;
    position: relative;
    max-width: 480px;
}
.pp-cta-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
}
.pp-btn-primary {
    background: var(--pp-text);
    color: var(--pp-text-on-dark);
    border: none;
    border-radius: 14px;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: transform 180ms var(--pp-ease-out);
}
.pp-btn-secondary {
    background: var(--pp-card);
    color: var(--pp-text);
    border: 1px solid var(--pp-border);
    border-radius: 14px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: transform 180ms var(--pp-ease-out);
}
.pp-btn-primary:active, .pp-btn-secondary:active, .pp-nav-cta:active { transform: scale(0.97); }

/* Credentials & experience ------------------------------------ *
 * Two visual registers, and the split is load-bearing: the green "Verified by
 * Pawprint" card is the only place a Pawprint guarantee may appear, and the
 * neutral cards carry everything self-reported or lapsed. */
.pp-verified {
    padding: 0;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--pp-verified-green) 40%, var(--pp-border));
}
.pp-verified-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--pp-verified-green) 12%, var(--pp-card));
    border-bottom: 1px solid color-mix(in srgb, var(--pp-verified-green) 26%, transparent);
}
.pp-verified-mark {
    display: flex;
    color: var(--pp-verified-green-ink);
    flex-shrink: 0;
}
.pp-verified-head-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pp-verified-head-text strong { font-size: 15px; font-weight: 700; }
.pp-verified-summary { font-size: 12.5px; color: var(--pp-neutral-ink); }

.pp-cred-list { list-style: none; margin: 0; padding: 0; }
.pp-cred {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--pp-border);
}
.pp-cred:last-child { border-bottom: 0; }
.pp-cred-mark { display: flex; padding-top: 1px; color: var(--pp-verified-green-ink); flex-shrink: 0; }
.pp-cred-muted .pp-cred-mark { color: var(--pp-text-tertiary); }
.pp-cred-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pp-cred-label { font-size: 14.5px; font-weight: 600; }
.pp-cred-muted .pp-cred-label { color: var(--pp-neutral-ink); font-weight: 500; }
.pp-cred-evidence { font-size: 12.5px; color: var(--pp-neutral-ink); line-height: 1.45; }
/* The only sub-label that survived the V3 tier collapse — board-confirmed is
 * the strongest signal and the one worth naming apart from the green check. */
.pp-cred-tag {
    flex-shrink: 0;
    align-self: center;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--pp-verified-green-ink);
    background: color-mix(in srgb, var(--pp-verified-green) 15%, transparent);
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.pp-cred-group { padding: 0; overflow: hidden; }
.pp-cred-group-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pp-neutral-ink);
    padding: 13px 16px 9px;
}
.pp-cred-group .pp-cred-list { border-top: 1px solid var(--pp-border); }
.pp-cred-years { margin: 0 16px 10px; font-size: 14.5px; font-weight: 600; }
.pp-cred-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.pp-cred-tags .pp-chip {
    text-transform: none;
    letter-spacing: 0;
    font-size: 12.5px;
    font-weight: 500;
}
.pp-cred-note {
    margin: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--pp-border);
    font-size: 12px;
    color: var(--pp-neutral-ink);
}

/* Good to know ------------------------------------------------- */
.pp-gtk { padding: 4px 16px; }
.pp-gtk-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-size: 14.5px;
    border-bottom: 1px solid var(--pp-border);
}
.pp-gtk-row:last-child { border-bottom: 0; }
.pp-gtk-icon {
    width: 30px; height: 30px;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--pp-bg);
    color: var(--pp-text-secondary);
    flex-shrink: 0;
}

/* Rating breakdown --------------------------------------------- */
.pp-ratings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
    padding: 18px;
}
.pp-ratings-score { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.pp-ratings-avg { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.pp-ratings-of { font-size: 12px; color: var(--pp-neutral-ink); }
.pp-ratings-count { font-size: 12.5px; color: var(--pp-neutral-ink); margin-top: 4px; }
.pp-ratings-bars { flex: 1; min-width: 190px; display: flex; flex-direction: column; gap: 5px; }
.pp-ratings-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.pp-ratings-star {
    display: inline-flex; align-items: center; gap: 3px;
    color: var(--pp-text-secondary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.pp-ratings-star svg { color: var(--pp-orange); }
.pp-ratings-track {
    flex: 1;
    height: 7px;
    border-radius: 999px;
    background: var(--pp-bg);
    overflow: hidden;
}
.pp-ratings-fill { display: block; height: 100%; border-radius: 999px; background: var(--pp-orange); }
.pp-ratings-n {
    min-width: 20px;
    text-align: right;
    color: var(--pp-neutral-ink);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Booking rail --------------------------------------------------- *
 * One grid, two arrangements. Narrow: head, then the booking card, then the
 * content — so price and CTA are above the fold on a share-link landing.
 * Wide: the card moves into a second column and sticks. The content column
 * stays at its original ~712px so no existing section's line length changes. */
.pp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 40px;
}
.pp-head, .pp-col, .pp-rail, .pp-cta-wrap { min-width: 0; }
.pp-cta-wrap { margin-top: 18px; }
.pp-rail { margin-top: 22px; }

@media (min-width: 1100px) {
    .pp-wrap.pp-layout { max-width: 1120px; }
    .pp-layout {
        grid-template-columns: minmax(0, 1fr) 328px;
        align-items: start;
    }
    .pp-head { grid-column: 1; grid-row: 1; }
    /* Spans both content rows AND stretches. The card is what sticks, not the
     * column — and align-items:start would size this column to the card,
     * leaving it no room to travel. It stops at row 3 on purpose, so the card
     * hands off to the CTA section rather than floating beside it. */
    .pp-rail {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: stretch;
        margin-top: 30px;
    }
    .pp-col { grid-column: 1; grid-row: 2; }
    /* Column 1, not the full width: a 1120px CTA band beside a 712px content
     * column reads as a different page. */
    .pp-cta-wrap { grid-column: 1; grid-row: 3; }
    .pp-book { position: sticky; top: 84px; }
}

.pp-book { padding: 20px; }
.pp-book-price {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.pp-book-sub { font-size: 13px; color: var(--pp-neutral-ink); margin-top: 5px; line-height: 1.5; }
.pp-book-facts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--pp-border);
}
.pp-book-fact {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: var(--pp-text);
}
.pp-book-fact svg { color: var(--pp-text-secondary); flex-shrink: 0; }
.pp-book-fact .pp-star, .pp-book-fact svg.pp-star { color: var(--pp-orange); }
.pp-book-cta {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 16px;
}
.pp-book-trust {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    color: var(--pp-neutral-ink);
}
.pp-book-alt {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pp-neutral-ink);
    text-decoration: none;
}
.pp-book-alt:hover { color: var(--pp-text); text-decoration: underline; }
.pp-book-note {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--pp-neutral-ink);
    text-align: center;
}

/* Pinned bar: narrow screens only, and only once the card has scrolled away.
 * Ships hidden and stays hidden without JS — see js/sticky-cta.js. */
.pp-bookbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: rgba(253, 252, 250, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--pp-border);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
    transition: transform var(--pp-dur-base) var(--pp-ease-out);
}
.pp-bookbar[hidden] { display: none; }
.pp-bookbar.is-up { transform: translateY(0); }
.pp-bookbar-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 11px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.pp-bookbar-price { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.pp-bookbar .pp-btn-primary { padding: 11px 18px; font-size: 14.5px; }
@media (min-width: 1100px) { .pp-bookbar { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .pp-bookbar { transition: none; }
}

/* Pets: the detail the payload was already carrying -------------- */
.pp-pet { display: block; padding: 14px 16px; }
.pp-pet-head { display: flex; align-items: center; gap: 12px; }
.pp-pet-head-body { min-width: 0; }
.pp-pet-detail {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--pp-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pp-pet-bio {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--pp-neutral-ink);
    white-space: pre-line;
}
.pp-pet-traits { display: flex; flex-wrap: wrap; gap: 6px; }
/* Neutral by default. A trait is free text and its valence is unknowable from
 * the string — only cautionTraits marks one, and only that gets emphasis. */
.pp-pet-trait {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--pp-bg);
    border: 1px solid var(--pp-border);
    font-size: 12.5px;
    color: var(--pp-text);
}
.pp-pet-trait-caution {
    background: color-mix(in srgb, var(--pp-orange) 16%, var(--pp-card));
    border-color: color-mix(in srgb, var(--pp-orange) 42%, transparent);
    color: #8a5a10;
    font-weight: 600;
}
.pp-pet-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pp-pet-fact {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--pp-neutral-ink);
}
.pp-pet-fact svg { color: var(--pp-verified-green-ink); flex-shrink: 0; }
.pp-pet-fact-no svg { color: var(--pp-text-tertiary); }
.pp-pet-photos, .pp-review-photos { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-pet-photo, .pp-review-photo {
    width: 56px; height: 56px;
    padding: 0;
    border: 1px solid var(--pp-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--pp-bg);
    cursor: pointer;
    transition: transform var(--pp-dur-fast) var(--pp-ease-out);
}
.pp-review-photo { width: 64px; height: 64px; }
.pp-pet-photo img, .pp-review-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-pet-photo:hover, .pp-review-photo:hover { transform: translateY(-1px); }

/* A provider's reply, clearly theirs and clearly not the review. */
.pp-review-photos { margin-top: 10px; }
.pp-review-reply {
    margin-top: 12px;
    padding: 11px 13px;
    background: var(--pp-bg);
    border-radius: 10px;
    border-left: 3px solid var(--pp-teal);
}
.pp-review-reply-head {
    font-size: 12px;
    font-weight: 700;
    color: var(--pp-text);
    margin-bottom: 3px;
}
.pp-review-reply p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--pp-neutral-ink);
    white-space: pre-line;
}

@media (prefers-reduced-motion: reduce) {
    .pp-pet-photo, .pp-review-photo { transition: none; }
    .pp-pet-photo:hover, .pp-review-photo:hover { transform: none; }
}

/* Approximate-location map ------------------------------------- */
.pp-pmap-lede {
    margin: -4px 0 12px;
    font-size: 14px;
    color: var(--pp-neutral-ink);
}
.pp-map-shell {
    position: relative;
    /* Own stacking context, so nothing MapKit puts inside can out-paint the
     * sticky nav — the directory map learned this the hard way. */
    isolation: isolate;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 340px;
    border: 1px solid var(--pp-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--pp-bg);
}
.pp-map-canvas { position: absolute; inset: 0; }
.pp-map-note {
    margin: 9px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--pp-neutral-ink);
}
/* The mark: the same face treatment the directory map uses, so a provider
 * looks like themselves on both surfaces. */
.pp-pmap-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--pp-card);
    border: 3px solid var(--pp-card);
    box-shadow: var(--pp-shadow-pop);
    font-family: var(--pp-font-ui);
    font-weight: 700;
    font-size: 18px;
    color: var(--pp-text);
}
.pp-pmap-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Footer ------------------------------------------------------ */
.pp-footer {
    margin-top: 80px;
    background: var(--pp-text);
    color: rgba(253,252,250,0.72);
}
.pp-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px 24px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    justify-content: space-between;
    align-items: flex-start;
}
.pp-footer-brand {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.pp-footer p { font-size: 13px; line-height: 1.55; margin: 0; max-width: 280px; }
.pp-footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.pp-footer-links a { font-size: 14px; color: inherit; text-decoration: none; }
.pp-footer-links a:hover { color: rgba(253,252,250,0.95); }
.pp-footer-contact { font-size: 13px; line-height: 1.7; }
.pp-footer-contact a { display: inline-block; min-height: 24px; color: inherit; text-decoration: none; }
.pp-footer-contact a:hover { color: rgba(253,252,250,0.95); }
.pp-footer-bottom {
    max-width: 1180px;
    margin: 28px auto 0;
    padding: 20px 24px 24px;
    border-top: 1px solid rgba(253,252,250,0.12);
    display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    font-size: 12px;
}

/* Avatar gradient helpers ------------------------------------ */
.grad-orange { background: var(--pp-grad-orange); }
.grad-cream  { background: var(--pp-grad-cream); }
.grad-amber  { background: var(--pp-grad-amber); }
.grad-pink   { background: var(--pp-grad-pink); }
.grad-teal   { background: var(--pp-grad-teal); }
.grad-green  { background: var(--pp-grad-green); }

/* Error page -------------------------------------------------- */
.pp-error {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
}
.pp-error-card {
    background: var(--pp-card);
    border: 1px solid var(--pp-border);
    border-radius: 22px;
    box-shadow: var(--pp-shadow-card);
    padding: 36px 28px;
    text-align: center;
    max-width: 440px;
    width: 100%;
}
.pp-error-card img { display: inline-block; border-radius: 16px; }
.pp-error-card h1 {
    font-family: var(--pp-font-display);
    font-weight: 700;
    font-size: 24px;
    color: var(--pp-text);
    margin: 18px 0 8px;
    letter-spacing: -0.3px;
}
.pp-error-card p {
    font-size: 15px;
    color: var(--pp-neutral-ink);
    margin: 0 0 22px;
    line-height: 1.5;
}
.pp-error-card .pp-btn-primary { background: var(--pp-primary); color: var(--pp-text); }

/* --- Share row -------------------------------------------------------------
   js/share-row.js fills the empty [data-pp-share] host; nothing here renders
   until it does, so a no-JS visitor sees no card rather than dead controls.
   🔴 The form's own [hidden] rule is spelled out because an author-level
   display outranks the UA sheet's [hidden] — the same trap .pp-cards and
   .pp-dir-grid hit in api/directory.js. */
.pp-share {
    background: var(--pp-card);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-r-xl);
    box-shadow: var(--pp-shadow-card);
    padding: 20px 22px;
    margin: 0 0 18px;
}
.pp-share:empty { display: none; }
.pp-share-title {
    font-family: var(--pp-font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--pp-text);
    margin: 0 0 4px;
    letter-spacing: -0.2px;
}
.pp-share-sub {
    font-size: 14px;
    color: var(--pp-neutral-ink);
    margin: 0 0 14px;
    line-height: 1.45;
}
.pp-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pp-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--pp-r-pill);
    border: 1px solid var(--pp-border);
    background: var(--pp-bg);
    color: var(--pp-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    /* 44px floor: this row is a phone-first surface. */
    min-height: 44px;
}
.pp-share-btn:hover { border-color: var(--pp-text-tertiary); }
.pp-share-fb { color: #1763c0; }
.pp-share-sms {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.pp-share-sms[hidden] { display: none; }
.pp-share-input {
    flex: 1 1 200px;
    min-width: 0;
    padding: 11px 14px;
    border-radius: var(--pp-r-md);
    border: 1px solid var(--pp-border);
    background: var(--pp-bg);
    color: var(--pp-text);
    font-family: inherit;
    font-size: 15px;
}
.pp-share-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.pp-share-submit {
    padding: 11px 20px;
    border-radius: var(--pp-r-md);
    border: 0;
    background: var(--pp-primary);
    color: var(--pp-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
}
.pp-share-submit:disabled { opacity: 0.6; cursor: default; }
.pp-share-note {
    font-size: 13px;
    color: var(--pp-neutral-ink);
    margin: 10px 0 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.pp-share-note:empty { margin: 0; }
.pp-share-note.is-error { color: #b3261e; }

/* The hero's verified-credentials line jumps here; clear the sticky header. */
#credentials { scroll-margin-top: 84px; }