/* ═══════════════════════════════════════════════════════════════════════
   HRHS — the public listing page (4.94.0)
   templates/provider/profile-public.php, to comps/HRHS-listing-page-mobile.html
   ─────────────────────────────────────────────────────────────────────
   Built from the phone up: one long page, the sections stacked, a sticky row
   of jumps, and what is long folded, filtered or slid sideways. Two columns
   from 960px. Loaded after hrhs-core, which keeps only what the listing
   shares with other pages (sheets, badges, prices, the lightbox, the grouped
   services block); everything about this page's layout is here.

   Brand tokens are set on .hrhs-lp because core still carries the legacy
   palette. Nothing on this page is blue (Angel, 16 Sep 2026): green
   #0BFF84 is a fill only, green words are #0A7A4B, gold is for earned things,
   everything else is ink, tint and hairline.

   Media blocks are written in the house multi-line form so audit/layout.py
   can read them.
   ═══════════════════════════════════════════════════════════════════════ */

/* The tokens live on the page wrapper — and on the desktop bar, which is
   printed after the wrapper closes, beside the dock and the sheets. */
.hrhs-lp, .hrhs-dbar {
    --lp-page: #F1F4F9; --lp-card: #FFF; --lp-tint: #F7F9FC; --lp-line: #E4EAF3; --lp-soft: #EEF2F8;
    --lp-ink: #0A1A2F; --lp-ink2: #3D5069; --lp-muted: #7488A1; --lp-faint: #9AABC0;
    --lp-green: #0BFF84; --lp-go: #0A7A4B; --lp-go-bed: #E6F7EF;
    --lp-gold: #C9A227; --lp-gold-bed: #FBF4E2; --lp-gold-line: #E7D6A6; --lp-gold-ink: #6E4704;
    --lp-z0: #03202F; --lp-z1: #052B3E;
    --lp-r: 18px; --lp-gut: 16px;
    --lp-lift: 0 1px 2px rgba(10,26,47,.05), 0 10px 28px -14px rgba(10,26,47,.22);
    --lp-tabs: 48px;
    --lp-dock: calc(72px + env(safe-area-inset-bottom));
    color: var(--lp-ink); line-height: 1.5; /* the comp's; said here so the theme's body rule is not what sets it */
}
.hrhs-lp { padding-bottom: var(--lp-dock); }
.hrhs-lp h1, .hrhs-lp h2, .hrhs-lp h3 { margin: 0; letter-spacing: -.02em; line-height: 1.15; }
.hrhs-lp p { margin: 0; }
.hrhs-lp ul, .hrhs-lp dl { margin: 0; padding: 0; list-style: none; }
.hrhs-lp svg { display: block; }
.hrhs-mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

/* The wide content wrapper pads 40px on a desktop and something on a phone;
   the listing wants the phone edge-to-edge for its bands and rows. */
@media (max-width: 959px) {
    .hrhs-content--wide:has(.hrhs-lp) { padding-left: 0; padding-right: 0; padding-top: 0; }
    .hrhs-lp { padding-left: var(--lp-gut); padding-right: var(--lp-gut); }
}

/* ── Sideways rows: a peek of the next item, a fade on the side with more ──
   --fl / --fr are the fade widths; hrhs-profile.js sets .at-start / .at-end so
   the fade only shows on the side that has more to reveal, and not at all
   when everything fits. scroll-padding keeps the first item inside the
   gutter: without it the browser snaps the first item to the very edge on
   load (Angel, 17 Sep). */
.hrhs-fade {
    --fl: 0px; --fr: 36px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
}
.hrhs-fade:not(.at-start) { --fl: 28px; }
.hrhs-fade.at-end { --fr: 0px; }

/* ── Mini header (phone) ─────────────────────────────────────────────────── */
.hrhs-mini {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
    background: var(--lp-ink); color: #fff; height: 60px;
    transform: translateY(-100%); transition: transform .22s ease;
    display: flex; align-items: center; gap: 10px; padding: 0 var(--lp-gut);
}
.hrhs-mini.is-on { transform: none; }
.hrhs-mini__tile {
    width: 34px; height: 34px; border-radius: 9px; background: #fff; color: var(--lp-ink); overflow: hidden;
    font-weight: 800; font-size: .78rem; display: grid; place-items: center; flex: 0 0 auto; letter-spacing: .02em;
}
.hrhs-mini__tile img { width: 100%; height: 100%; object-fit: contain; padding: 3px; background: #fff; display: block; box-sizing: border-box; }
.hrhs-mini__t { min-width: 0; flex: 1 1 auto; }
.hrhs-mini__t b { display: block; font-size: .9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.hrhs-mini__t span { display: block; font-size: .75rem; color: #9FB0C4; line-height: 1.2; margin-top: 2px; }
.hrhs-mini__star { font-style: normal; color: var(--lp-gold); }
.hrhs-mini__rb,
.hrhs-mini__rb:hover,
.hrhs-mini__rb:focus,
.hrhs-mini__rb:active {
    width: 38px; height: 38px; border-radius: 50%; border: 0; flex: 0 0 auto; cursor: pointer;
    background-color: rgba(255,255,255,.1) !important; color: #fff !important; border-color: transparent !important;
    display: grid; place-items: center; padding: 0;
}
.hrhs-mini__rb.is-on,
.hrhs-mini__rb.is-on:hover,
.hrhs-mini__rb.is-on:focus { background-color: var(--lp-green) !important; color: var(--lp-ink) !important; }
.hrhs-mini__rb.is-on path { fill: currentColor; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hrhs-hero { position: relative; margin: 0 calc(-1 * var(--lp-gut)); background: var(--lp-card); }
.hrhs-hero__banner {
    position: relative; height: 200px; overflow: hidden;
    background: radial-gradient(120% 90% at 100% 0%, #0f3f5a 0%, var(--lp-z1) 45%, var(--lp-z0) 100%);
    background-size: cover; background-position: center;
}
.hrhs-hero__banner--tint::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.2px); background-size: 22px 22px; opacity: .7;
}
.hrhs-hero__mark {
    position: absolute; right: -8px; bottom: -30px; font-size: 150px; font-weight: 800; letter-spacing: -.06em;
    color: rgba(255,255,255,.05); line-height: 1; pointer-events: none; user-select: none;
}
.hrhs-hero__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(3,32,47,.45) 0%, rgba(3,32,47,0) 32%, rgba(3,32,47,.25) 60%, rgba(3,32,47,.85) 100%);
}
.hrhs-hero__acts { position: absolute; top: 12px; right: var(--lp-gut); display: flex; gap: 8px; z-index: 2; }
.hrhs-hero__rb,
.hrhs-hero__rb:hover,
.hrhs-hero__rb:focus,
.hrhs-hero__rb:active {
    width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
    background-color: rgba(255,255,255,.16) !important; color: #fff !important; border-color: transparent !important;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: grid; place-items: center;
}
.hrhs-hero__rb.is-on,
.hrhs-hero__rb.is-on:hover,
.hrhs-hero__rb.is-on:focus { background-color: var(--lp-green) !important; color: var(--lp-ink) !important; }
.hrhs-hero__rb.is-on path { fill: currentColor; }
.hrhs-hero__id {
    position: absolute; left: var(--lp-gut); right: var(--lp-gut); bottom: 14px; z-index: 1;
    display: flex; align-items: flex-end; gap: 12px; color: #fff;
}
.hrhs-hero__tile {
    position: relative; width: 64px; height: 64px; border-radius: 16px; background: #fff; color: var(--lp-ink);
    display: grid; place-items: center; flex: 0 0 auto; box-shadow: var(--lp-lift); overflow: hidden;
}
.hrhs-hero__logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; background: #fff; z-index: 1; }
.hrhs-hero__mono { font-weight: 800; font-size: 22px; letter-spacing: .01em; }
.hrhs-hero__txt { min-width: 0; }
.hrhs-hero__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.hrhs-hcat,
.hrhs-lp .hrhs-hero .hrhs-hero__cats a.hrhs-hcat,
.hrhs-lp .hrhs-hero .hrhs-hero__cats a.hrhs-hcat:visited {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-decoration: none;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 5px 10px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hrhs-lp .hrhs-hero .hrhs-hero__cats a.hrhs-hcat:hover { background: rgba(255,255,255,.26); color: #fff; }
.hrhs-hcat i { width: 6px; height: 6px; border-radius: 50%; background: var(--lp-green); }
.hrhs-hero__name { font-size: clamp(22px, 6vw, 28px); font-weight: 800; margin-top: 8px; line-height: 1.1; color: #fff; text-wrap: balance; }
.hrhs-hero__meta { margin: 6px 0 0; font-size: 13.5px; color: #DCE4EE; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.hrhs-hero__meta .hrhs-dotsep { color: #8FA3BA; }
.hrhs-lp .hrhs-avnow,
.hrhs-lp .hrhs-avnow--static {
    display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #fff; font-size: 13.5px;
    background: transparent; border: 0; padding: 0; text-transform: none; letter-spacing: 0;
}
.hrhs-lp .hrhs-avnow i { width: 8px; height: 8px; border-radius: 50%; background: var(--lp-green); box-shadow: 0 0 0 3px rgba(11,255,132,.25); }

/* ── Proof strip ────────────────────────────────────────────────────────── */
.hrhs-proof {
    display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--lp-gut);
    padding: 12px var(--lp-gut); margin: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hrhs-proof::-webkit-scrollbar { display: none; }
.hrhs-proof__i {
    flex: 0 0 40%; min-width: 132px; scroll-snap-align: start;
    background: var(--lp-tint); border: 1px solid var(--lp-line); border-radius: 14px; padding: 10px 12px;
}
.hrhs-proof__n { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; display: flex; align-items: center; gap: 5px; color: var(--lp-ink); }
.hrhs-proof__star { color: var(--lp-gold); font-size: 17px; }
.hrhs-proof__word { font-size: 16px; }
.hrhs-proof__l { font-size: 11.5px; color: var(--lp-muted); font-weight: 600; margin-top: 3px; white-space: nowrap; }
.hrhs-proof__i--gold { background: var(--lp-gold-bed); border-color: var(--lp-gold-line); }
.hrhs-proof__i--gold .hrhs-proof__l { color: var(--lp-gold-ink); }

/* ── Actions (phone) ────────────────────────────────────────────────────── */
.hrhs-acts { padding: 4px var(--lp-gut) 16px; background: var(--lp-card); margin: 0 calc(-1 * var(--lp-gut)); border-bottom: 1px solid var(--lp-line); }
.hrhs-acts__go { width: 100%; min-height: 50px; font-size: 15.5px; border-radius: 13px; gap: 8px; }
.hrhs-acts__row { display: grid; grid-template-columns: repeat(var(--hrhs-tiles, 3), 1fr); gap: 8px; margin-top: 8px; }
.hrhs-tile,
.hrhs-tile:hover,
.hrhs-tile:focus,
.hrhs-tile:active,
.hrhs-lp a.hrhs-tile,
.hrhs-lp a.hrhs-tile:visited {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 64px;
    width: auto; height: auto; /* core's .hrhs-fav is a 34px circle */
    border: 1px solid var(--lp-line) !important; background-color: var(--lp-tint) !important; color: var(--lp-ink) !important;
    border-radius: 13px; font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 6px; line-height: 1.15; text-align: center;
    text-decoration: none; cursor: pointer; text-transform: none; letter-spacing: 0;
}
.hrhs-tile svg { width: 20px; height: 20px; }
.hrhs-tile small { display: block; font-weight: 500; color: var(--lp-muted); font-size: 11px; }
.hrhs-tile--lock,
.hrhs-tile--lock:hover,
.hrhs-tile--lock:focus { color: var(--lp-ink2) !important; }
.hrhs-tile--lock svg { color: var(--lp-muted); }
.hrhs-tile.is-on,
.hrhs-tile.is-on:hover,
.hrhs-tile.is-on:focus { background-color: var(--lp-go-bed) !important; border-color: #BFE9D3 !important; }
.hrhs-tile.is-on svg { color: var(--lp-go); }
.hrhs-tile.is-on path { fill: currentColor; }

/* ── Section nav ────────────────────────────────────────────────────────── */
.hrhs-snav {
    position: sticky; top: var(--hrhs-hdr-h, 74px); z-index: 30;
    background: rgba(241,244,249,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    margin: 0 calc(-1 * var(--lp-gut)); border-bottom: 1px solid var(--lp-line);
}
.hrhs-snav__in {
    display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--lp-gut);
    padding: 0 calc(var(--lp-gut) - 6px); height: var(--lp-tabs); align-items: stretch;
}
.hrhs-snav__in::-webkit-scrollbar { display: none; }
.hrhs-snav__b,
.hrhs-lp .hrhs-snav__b,
.hrhs-lp .hrhs-snav__b:visited {
    flex: 0 0 auto; display: inline-flex; align-items: center; padding: 0 10px; position: relative; white-space: nowrap;
    font-size: 13.5px; font-weight: 700; color: var(--lp-muted); text-decoration: none; border-radius: 0; background: transparent;
}
.hrhs-snav__b::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.hrhs-snav__b.is-on, .hrhs-lp .hrhs-snav__b.is-on { color: var(--lp-ink); }
.hrhs-snav__b.is-on::after { background: var(--lp-green); }
.hrhs-snav__b small { font-weight: 600; color: var(--lp-faint); margin-left: 4px; font-size: 11.5px; }

/* ── Sections ───────────────────────────────────────────────────────────── */
.hrhs-sec {
    background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r);
    padding: 18px var(--lp-gut) 20px; margin-top: 12px;
    scroll-margin-top: calc(var(--hrhs-hdr-h, 74px) + var(--lp-tabs) + 8px);
}
.hrhs-sec__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.hrhs-sec__t { font-size: 19px; font-weight: 800; color: var(--lp-ink); }
.hrhs-sec__t--sm { font-size: 15px; }
.hrhs-sec__n { font-size: 12px; color: var(--lp-muted); font-weight: 600; white-space: nowrap; }
.hrhs-sec--quiet { background: transparent; border: 0; padding-top: 8px; }
.hrhs-lp-lbl, .hrhs-lp .hrhs-section-label {
    font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-muted); margin: 0 0 8px;
}
.hrhs-lp-lbl--gap { margin-top: 18px; }

/* Overview: the glance grid */
.hrhs-glance__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hrhs-glance__i { background: var(--lp-tint); border: 1px solid var(--lp-soft); border-radius: 13px; padding: 10px 12px; min-width: 0; }
.hrhs-glance__i i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--lp-go-bed); color: var(--lp-go); margin-bottom: 6px; }
.hrhs-glance__i b { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-muted); }
.hrhs-glance__i span { display: block; font-size: 14px; font-weight: 700; color: var(--lp-ink); margin-top: 2px; line-height: 1.25; }
.hrhs-glance__i small { display: block; font-size: 12px; color: var(--lp-muted); margin-top: 2px; line-height: 1.3; }
.hrhs-glance__badges { margin-top: 16px; }

/* Sideways chip rows (badges, review filters) */
.hrhs-lp-row {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scroll-padding-inline: var(--lp-gut);
    padding: 2px var(--lp-gut); margin: 0 calc(-1 * var(--lp-gut));
}
.hrhs-lp-row::-webkit-scrollbar { display: none; }
/* The specialty-group chips (shared partial) slide the same way on this page:
   out to the card edge, with the peek and the fade. */
.hrhs-lp .hrhs-sg__chips { padding: 2px var(--lp-gut) 10px; margin: 0 calc(-1 * var(--lp-gut)); scroll-padding-inline: var(--lp-gut); }
.hrhs-lp-row > * { flex: 0 0 auto; scroll-snap-align: start; }
/* The badge row partial wraps its chips; flatten it into the row. */
.hrhs-lp-row .hrhs-badges, .hrhs-lp-row .hrhs-badge-row { display: contents; }
.hrhs-lp-nc { margin-top: 8px; }
.hrhs-lp .hrhs-nc__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* The story, clamped */
.hrhs-story { font-size: 15px; line-height: 1.7; color: var(--lp-ink2); }
.hrhs-story p { margin: 0; }
.hrhs-story p + p { margin-top: 10px; }
.hrhs-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.hrhs-clamp.is-open { -webkit-line-clamp: unset; display: block; }
.hrhs-more,
.hrhs-more:hover,
.hrhs-more:focus,
.hrhs-more:active {
    display: inline-flex; align-items: center; gap: 4px; border: 0; padding: 0; margin-top: 2px; min-height: 40px; cursor: pointer;
    background-color: transparent !important; color: var(--lp-go) !important; border-color: transparent !important;
    font: inherit; font-weight: 700; font-size: 14px;
}
.hrhs-more svg { transition: transform .2s; }
.hrhs-more.is-open svg { transform: rotate(180deg); }
.hrhs-more[hidden] { display: none; }

/* Before you call, as a fact table; the license as a plain pair */
.hrhs-basics { display: block; font-size: 14px; }
.hrhs-basics dt + dd { margin-bottom: 6px; }
@media (min-width: 620px) {
    .hrhs-basics { display: grid; grid-template-columns: 104px 1fr; gap: 6px 10px; align-items: baseline; }
    .hrhs-basics dt + dd { margin-bottom: 0; }
    .hrhs-basics--facts { display: grid; grid-template-columns: 1fr; gap: 0; }
}
.hrhs-basics dt { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-muted); margin: 0; }
.hrhs-basics dd { margin: 0; color: var(--lp-ink); font-weight: 600; }
.hrhs-basics--facts { gap: 0; border: 1px solid var(--lp-line); border-radius: 13px; overflow: hidden; margin-top: 16px; }
.hrhs-basics--facts > div { display: grid; grid-template-columns: 104px 1fr; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--lp-soft); align-items: baseline; }
.hrhs-basics--facts > div:first-child { border-top: 0; }
.hrhs-lp-two { display: grid; gap: 14px; margin-top: 16px; }
.hrhs-lp .hrhs-lp-chips .hrhs-chip,
.hrhs-lp .hrhs-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 10px;
    font-size: 13px; font-weight: 600; background: var(--lp-tint); color: var(--lp-ink); border: 1px solid var(--lp-line);
}
.hrhs-lp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hrhs-lp-addr { font-size: 14px; color: var(--lp-ink); font-weight: 600; }

/* The soft note: a gap, said once, with the way through */
.hrhs-soft {
    display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
    background: var(--lp-tint); border: 1px solid var(--lp-line); border-radius: 13px; padding: 11px 13px;
    font-size: 13.5px; line-height: 1.45; color: var(--lp-ink2);
}
.hrhs-soft i {
    display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--lp-card); border: 1px solid var(--lp-line); font-style: normal; font-weight: 800; font-size: 13px; color: var(--lp-go); flex: 0 0 auto;
}
.hrhs-soft b { color: var(--lp-ink); }
.hrhs-soft--rail { margin-top: 0; }

/* ── Set prices: sideways on a phone ─────────────────────────────────────
   core's grid and its "three on a phone" hiding are for the old page; here
   every price is a card in a row you swipe, and the Show all button is a
   desktop thing. */
@media (max-width: 959px) {
    .hrhs-lp .hrhs-prices {
        display: flex; grid-template-columns: none; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--lp-gut); padding: 2px var(--lp-gut) 8px; margin: 0 calc(-1 * var(--lp-gut));
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .hrhs-lp .hrhs-prices::-webkit-scrollbar { display: none; }
    .hrhs-lp .hrhs-prices > .hrhs-price,
    .hrhs-lp .hrhs-prices > .hrhs-price:nth-child(n+4),
    .hrhs-lp .hrhs-prices > .hrhs-price:nth-child(n+5) { display: flex; flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; }
    .hrhs-lp .hrhs-prices__more { display: none; }
}
.hrhs-lp .hrhs-prices__sub { margin: -4px 0 12px; }
.hrhs-lp .hrhs-price { border-radius: 14px; }

/* ── Recent work: sideways on a phone, three across on a desktop ────────── */
.hrhs-work {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--lp-gut);
    padding: 2px var(--lp-gut) 8px; margin: 0 calc(-1 * var(--lp-gut)); scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hrhs-work::-webkit-scrollbar { display: none; }
.hrhs-work__t {
    position: relative; display: block; flex: 0 0 72%; max-width: 300px; aspect-ratio: 4 / 3; scroll-snap-align: start;
    border-radius: 14px; overflow: hidden; background: var(--lp-z1); color: #fff; text-decoration: none;
}
.hrhs-work__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hrhs-work__t::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(3,32,47,0) 45%, rgba(3,32,47,.78) 100%);
}
.hrhs-work__tag {
    position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 11px; font-weight: 800;
    background: #fff; color: var(--lp-ink); border-radius: 999px; padding: 4px 9px;
}
.hrhs-work__tag--job { background: var(--lp-green); }
.hrhs-work__cap {
    position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; font-size: 13px; font-weight: 700;
    color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The pair keeps its own scrim off: the slider is the picture. */
.hrhs-work__t.hrhs-ba::after { display: none; }

/* ── Dots under a sideways row (phone) ──────────────────────────────────── */
.hrhs-dots { display: flex; gap: 5px; justify-content: center; margin: 4px 0 0; }
.hrhs-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--lp-line); transition: width .15s; }
.hrhs-dots i.is-on { background: var(--lp-ink); width: 16px; border-radius: 3px; }

/* ── Reviews ────────────────────────────────────────────────────────────── */
.hrhs-rsum {
    display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
    padding: 12px; border: 1px solid var(--lp-line); border-radius: 14px; background: var(--lp-tint); margin-bottom: 12px;
}
.hrhs-rsum__big { text-align: center; }
.hrhs-rsum__big b { display: block; font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--lp-ink); }
.hrhs-rsum__big .hrhs-stars { display: inline-block; margin-top: 2px; }
.hrhs-rsum__big small { display: block; font-size: 11.5px; color: var(--lp-muted); font-weight: 600; margin-top: 2px; }
.hrhs-rsum__bars { display: grid; gap: 4px; }
.hrhs-rsum__bars > div { display: grid; grid-template-columns: 12px 1fr 24px; gap: 8px; align-items: center; font-size: 11.5px; color: var(--lp-muted); font-weight: 600; }
.hrhs-rsum__bars i { height: 7px; border-radius: 4px; background: var(--lp-line); overflow: hidden; display: block; }
.hrhs-rsum__bars i::before { content: ""; display: block; height: 100%; width: var(--hrhs-w, 0%); background: var(--lp-gold); border-radius: 4px; }
.hrhs-rev__trust { font-size: 12.5px; color: var(--lp-muted); line-height: 1.45; margin: 0 0 10px; }
.hrhs-rev__filters { margin-bottom: 12px; }
.hrhs-fchip,
.hrhs-fchip:hover,
.hrhs-fchip:focus,
.hrhs-fchip:active {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap;
    background-color: var(--lp-card) !important; color: var(--lp-ink2) !important; border: 1px solid var(--lp-line) !important;
}
.hrhs-fchip small { font-weight: 600; color: var(--lp-faint); font-size: 11.5px; }
.hrhs-fchip.is-on,
.hrhs-fchip.is-on:hover,
.hrhs-fchip.is-on:focus { background-color: var(--lp-ink) !important; color: #fff !important; border-color: var(--lp-ink) !important; }
.hrhs-fchip.is-on small { color: #9FB0C4; }
.hrhs-rev { border: 1px solid var(--lp-line); border-radius: 14px; padding: 13px 14px; background: var(--lp-card); }
.hrhs-rev + .hrhs-rev { margin-top: 8px; }
.hrhs-rev.is-hide { display: none; }
.hrhs-rev__hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hrhs-rev__who { font-weight: 700; font-size: 15px; color: var(--lp-ink); }
.hrhs-rev__stars .hrhs-stars { font-size: 13px; letter-spacing: 1px; }
.hrhs-lp .hrhs-star--full, .hrhs-lp .hrhs-star--half { color: var(--lp-gold); }
.hrhs-lp .hrhs-star--empty { color: var(--lp-line); }
.hrhs-rev__when { margin-left: auto; font-size: 12px; color: var(--lp-faint); }
.hrhs-rev__badge {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
    font-size: 11px; font-weight: 700; color: var(--lp-go); background: var(--lp-go-bed); border-radius: 999px; padding: 3px 8px;
}
.hrhs-rev__badge--inv { color: var(--lp-ink2); background: var(--lp-tint); border: 1px solid var(--lp-line); }
.hrhs-rev__txt { font-size: 14.5px; line-height: 1.55; color: var(--lp-ink); margin-top: 8px; }
.hrhs-rev__none { font-size: 14px; color: var(--lp-muted); font-style: italic; margin-top: 8px; }
.hrhs-rev__note { font-size: 12px; color: var(--lp-muted); margin-top: 6px; line-height: 1.4; }
.hrhs-rev__foot { font-size: 12px; color: var(--lp-muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lp-soft); }
.hrhs-rev__more { width: 100%; margin-top: 10px; justify-content: center; }
.hrhs-rev__more[hidden] { display: none; }
.hrhs-rev__count { margin-top: 10px; font-size: 12.5px; color: var(--lp-muted); }
.hrhs-rvx { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--lp-line); border-radius: 14px; background: var(--lp-tint); }
.hrhs-rvx__big { font-size: 26px; color: var(--lp-gold); line-height: 1; }
.hrhs-rvx b { display: block; font-size: 15px; color: var(--lp-ink); margin-bottom: 2px; }
.hrhs-rvx p { font-size: 14px; line-height: 1.5; color: var(--lp-ink2); }

/* ── FAQ: the plus in ink, one open at a time ───────────────────────────── */
.hrhs-lp .hrhs-faq { max-width: none; border: 1px solid var(--lp-line); border-radius: 13px; overflow: hidden; }
.hrhs-lp .hrhs-faq__qa { border: 0; border-top: 1px solid var(--lp-line); border-radius: 0; margin: 0; box-shadow: none; }
.hrhs-lp .hrhs-faq__qa:first-child { border-top: 0; }
.hrhs-lp .hrhs-faq__qa[open] { border-color: var(--lp-line); box-shadow: none; }
.hrhs-lp .hrhs-faq__qa summary { padding: 13px 14px; font-size: 14.5px; font-weight: 700; gap: 12px; color: var(--lp-ink); }
.hrhs-lp .hrhs-faq__qa summary span {
    width: 26px; height: 26px; border-radius: 50%; background: var(--lp-tint); border: 1px solid var(--lp-line);
}
.hrhs-lp .hrhs-faq__qa summary span::before,
.hrhs-lp .hrhs-faq__qa summary span::after { background: var(--lp-ink); }
.hrhs-lp .hrhs-faq__qa summary span::before { width: 12px; height: 2px; }
.hrhs-lp .hrhs-faq__qa summary span::after { width: 2px; height: 12px; }
.hrhs-lp .hrhs-faq__qa[open] summary span { background: var(--lp-ink); border-color: var(--lp-ink); transform: rotate(45deg); }
.hrhs-lp .hrhs-faq__qa[open] summary span::before,
.hrhs-lp .hrhs-faq__qa[open] summary span::after { background: #fff; opacity: 1; }
.hrhs-lp .hrhs-faq__a { padding: 0 14px 14px; font-size: 14px; line-height: 1.6; color: var(--lp-ink2); }

/* ── Hours and the service area ─────────────────────────────────────────── */
.hrhs-profile-avail { display: inline-flex; }
.hrhs-profile-avail:empty { display: none; }
.hrhs-profile-avail-open,
.hrhs-profile-avail-closed,
.hrhs-profile-avail-unknown {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 5px 11px;
}
.hrhs-profile-avail-open { color: var(--lp-go); background: var(--lp-go-bed); }
.hrhs-profile-avail-open::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lp-go); }
.hrhs-profile-avail-closed { color: var(--lp-ink2); background: var(--lp-tint); border: 1px solid var(--lp-line); }
.hrhs-profile-avail-unknown { color: var(--lp-muted); background: var(--lp-tint); border: 1px solid var(--lp-line); }
.hrhs-rcard__lede { font-size: 14px; color: var(--lp-ink2); margin-top: 8px; line-height: 1.5; }
.hrhs-hoursd { margin-top: 10px; border: 1px solid var(--lp-line); border-radius: 12px; overflow: hidden; }
.hrhs-hoursd summary {
    list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 11px 13px;
    font-weight: 700; font-size: 14px; cursor: pointer; background: var(--lp-tint); color: var(--lp-ink);
}
.hrhs-hoursd summary::-webkit-details-marker { display: none; }
.hrhs-hoursd summary svg { color: var(--lp-muted); transition: transform .2s; }
.hrhs-hoursd[open] summary svg { transform: rotate(180deg); }
.hrhs-hours { padding: 4px 13px 8px; }
.hrhs-hours__row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; border-top: 1px solid var(--lp-soft); color: var(--lp-ink); }
.hrhs-hours__row:first-child { border-top: 0; }
.hrhs-hours__row.is-today { font-weight: 700; }
.hrhs-hours__d em { font-style: normal; font-weight: 600; color: var(--lp-muted); font-size: 12px; margin-left: 4px; }
.hrhs-hours__row.is-shut .hrhs-hours__v { color: var(--lp-faint); }
.hrhs-hours__v { font-size: 13px; }
.hrhs-rchips { display: flex; flex-wrap: wrap; gap: 6px; }
.hrhs-rchip,
.hrhs-lp a.hrhs-rchip,
.hrhs-lp a.hrhs-rchip:visited {
    display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px 0 11px; border-radius: 10px;
    font-size: 13px; font-weight: 600; background: var(--lp-tint); color: var(--lp-ink); border: 1px solid var(--lp-line); text-decoration: none;
}
.hrhs-rchip::after { content: "\203A"; color: var(--lp-faint); font-weight: 700; margin-left: 2px; }
.hrhs-lp a.hrhs-rchip:hover { border-color: #CBD8E9; color: var(--lp-ink); }

/* ── About this listing ─────────────────────────────────────────────────── */
.hrhs-lst { display: grid; gap: 0; }
.hrhs-lst > div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 8px 0; border-top: 1px solid var(--lp-soft); }
.hrhs-lst > div:first-child { border-top: 0; padding-top: 0; }
.hrhs-lst dt { color: var(--lp-ink2); margin: 0; }
.hrhs-lst dd { margin: 0; font-weight: 600; color: var(--lp-ink); }
.hrhs-claim-line { margin: 10px 0 0; font-size: 13.5px; font-weight: 700; }
.hrhs-claim-line a, .hrhs-lp .hrhs-claim-line a:visited { color: var(--lp-go); text-decoration: none; }
.hrhs-lp .hrhs-rb--quiet { margin-top: 10px; }

/* ── Rail (desktop only) ────────────────────────────────────────────────── */
.hrhs-profile-rail { display: none; }
.hrhs-rcard { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r); padding: 18px 20px; }
.hrhs-rcard__t { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-muted); margin-bottom: 10px; }
/* Width pinned like the colour: the kit sets width on bare buttons with
   !important and changes it on hover. */
.hrhs-rcard__act,
.hrhs-rcard__act:hover,
.hrhs-rcard__act:focus { width: 100% !important; justify-content: center; }
.hrhs-rcard__act + .hrhs-rcard__act { margin-top: 8px; }
.hrhs-rcard__save { margin-top: 8px; gap: 8px; width: 100%; height: auto; padding: 11px 22px; border-radius: var(--hrhs-radius); font-size: .9rem; font-weight: 700; }
.hrhs-lp .hrhs-rcard .hrhs-section-label { margin-top: 16px; }
.hrhs-rcard__save.is-on path { fill: currentColor; }
.hrhs-lp .hrhs-profile-rail__card { border: 0; padding: 0; margin-top: 12px; box-shadow: none; background: transparent; }

/* ── More pros: sideways on a phone ─────────────────────────────────────── */
.hrhs-recommended { margin-top: 20px; }
.hrhs-recommended__title { font-size: 19px; font-weight: 800; margin: 0 0 12px; color: var(--lp-ink); }
@media (max-width: 959px) {
    .hrhs-lp-pros {
        display: flex; grid-template-columns: none; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--lp-gut); padding: 2px var(--lp-gut) 8px; margin: 0 calc(-1 * var(--lp-gut));
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .hrhs-lp-pros::-webkit-scrollbar { display: none; }
    .hrhs-lp-pros > * { flex: 0 0 82%; max-width: 320px; scroll-snap-align: start; }
}

/* ── The desktop bar ─────────────────────────────────────────────────────
   The mini header and the dock as one bar along the foot of a desktop: tile,
   name, the rating line, and the two doors. Off below 960, where the phone
   has the two pieces; slid down until the cover scrolls away. */
.hrhs-dbar { display: none; }
@media (min-width: 960px) {
    .hrhs-dbar {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; color: var(--lp-ink);
        background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--lp-line, #E4EAF3); box-shadow: 0 -12px 30px -22px rgba(10,26,47,.3);
        transform: translateY(100%); transition: transform .24s ease;
    }
    .hrhs-dbar.is-on { transform: none; }
    .hrhs-dbar__in { max-width: 1280px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 14px; }
    .hrhs-dbar__tile {
        width: 44px; height: 44px; border-radius: 12px; background: var(--lp-tint); border: 1px solid var(--lp-line); color: var(--lp-ink);
        display: grid; place-items: center; font-weight: 800; font-size: .82rem; letter-spacing: .02em; overflow: hidden; flex: 0 0 auto;
    }
    .hrhs-dbar__tile img { width: 100%; height: 100%; object-fit: contain; padding: 4px; background: #fff; display: block; box-sizing: border-box; }
    .hrhs-dbar__t { min-width: 0; flex: 1 1 auto; }
    .hrhs-dbar__t b { display: block; font-size: 15.5px; font-weight: 800; color: var(--lp-ink); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
    .hrhs-dbar__t span { display: block; font-size: 12.5px; color: var(--lp-muted); line-height: 1.2; margin-top: 3px; }
    .hrhs-dbar__t .hrhs-mini__star { color: var(--lp-gold); }
    .hrhs-dbar__acts { display: flex; gap: 8px; flex: 0 0 auto; }
    .hrhs-dbar .hrhs-btn { min-height: 44px; padding: 0 24px; border-radius: 12px; font-size: 14.5px; }
}

/* ── The dock (phone) and the toast ─────────────────────────────────────── */
.hrhs-profile-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
    background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--lp-line, #E4EAF3);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px;
}
.hrhs-profile-dock .hrhs-btn { min-height: 50px; justify-content: center; font-size: 15.5px; border-radius: 13px; }
.hrhs-toast {
    position: fixed; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom) + 12px); z-index: 1300;
    transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
    background: #0A1A2F; color: #fff; border-radius: 13px; padding: 12px 16px; font-size: 14px; font-weight: 600;
    box-shadow: 0 2px 6px rgba(10,26,47,.07), 0 22px 48px -20px rgba(10,26,47,.3);
    max-width: min(440px, 92vw); transition: transform .22s, opacity .22s; display: flex; gap: 8px; align-items: center;
}
.hrhs-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.hrhs-toast[hidden] { display: none; }
.hrhs-toast__ic { color: #0BFF84; font-weight: 800; }

/* ── The owner strip (own listing only) ─────────────────────────────────── */
/* The owner strip: only on your own listing. A completeness ring, the pieces
   still missing as chips, one button into the editor. Visitors never see it. */
.hrhs-own {
    background: var(--hrhs-dark); color: #fff; border-radius: var(--hrhs-radius-lg);
    padding: 18px 22px; margin-bottom: 16px;
    display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
}
.hrhs-own__ring {
    width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--hrhs-accent) 0 var(--hrhs-own-pct, 0%), rgba(255,255,255,.12) var(--hrhs-own-pct, 0%) 100%);
}
.hrhs-own__ring span { width: 50px; height: 50px; border-radius: 50%; background: var(--hrhs-dark); display: grid; place-items: center; font-weight: 800; font-size: .95rem; letter-spacing: -.02em; }
.hrhs-own__t { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
.hrhs-own__p { margin: 2px 0 0; font-size: .82rem; color: rgba(255,255,255,.62); }
.hrhs-own__todo { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.hrhs-own__todo span, .hrhs-own__todo a {
    font-size: .76rem; font-weight: 600; border-radius: 999px; padding: 3px 10px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #E2E9F4; text-decoration: none;
}
.hrhs-own__todo a:hover { background: rgba(255,255,255,.16); color: #fff; }
.hrhs-own__todo .is-done { color: var(--hrhs-accent); border-color: rgba(11,255,132,.4); }
.hrhs-content .hrhs-own__todo a, .hrhs-content .hrhs-own__todo a:visited { color: #E2E9F4; }
/* 4.75.0: the chips read HRHS_Listing_Steps. The next step is the white one,
   each undone chip carries its points, the bonus steps are dashed. */
.hrhs-own__todo a em { font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; opacity: .6; margin-left: 3px; }
.hrhs-own__todo a.is-next, .hrhs-content .hrhs-own__todo a.is-next, .hrhs-content .hrhs-own__todo a.is-next:visited { background: #fff; border-color: #fff; color: var(--hrhs-dark); }
.hrhs-own__todo a.is-next:hover { background: #fff; color: var(--hrhs-dark); }
.hrhs-own__todo a.is-next em { opacity: .55; }
.hrhs-own__todo a.is-bonus { border-style: dashed; opacity: .75; }
.hrhs-own .hrhs-btn { white-space: nowrap; }
/* The site-wide body-link rule outranks .hrhs-own__todo a; nothing on
   this page is blue, the owner's strip included. */
.hrhs-content .hrhs-lp .hrhs-own .hrhs-own__todo a,
.hrhs-content .hrhs-lp .hrhs-own .hrhs-own__todo a:visited { color: #E2E9F4 !important; }
.hrhs-content .hrhs-lp .hrhs-own .hrhs-own__todo a:hover { color: #fff !important; }
.hrhs-content .hrhs-lp .hrhs-own .hrhs-own__todo a.is-next,
.hrhs-content .hrhs-lp .hrhs-own .hrhs-own__todo a.is-next:visited,
.hrhs-content .hrhs-lp .hrhs-own .hrhs-own__todo a.is-next:hover { color: var(--hrhs-dark) !important; }

/* ── Before and after ─────────────────────────────────────────────────────
   A pair sits in the same 4:3 tile as every other photograph, so the grid does
   not break rhythm around it. The two images are stacked and the finished one
   is clipped from the left by --hrhs-ba-pos.

   The handle is a real <input type="range">. That is what gives it the
   keyboard, the touch target and the screen-reader label for nothing, and it
   is why the tile still works with the script switched off: the input's own
   default paints the split down the middle, which is a perfectly readable
   before-and-after on its own. */
.hrhs-ba { cursor: ew-resize; }
.hrhs-ba__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.hrhs-ba__img--a { clip-path: inset(0 0 0 var(--hrhs-ba-pos, 50%)); }
.hrhs-ba__line {
    position: absolute; top: 0; bottom: 0; z-index: 3;
    left: var(--hrhs-ba-pos, 50%); width: 2px; margin-left: -1px;
    background: rgba(255,255,255,.92); pointer-events: none;
}
.hrhs-ba__line i {
    position: absolute; top: 50%; left: 50%; width: 34px; height: 34px;
    margin: -17px 0 0 -17px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 10px rgba(3,35,51,.35);
}
/* The control itself is invisible and covers the whole tile: the white line and
   its knob above are what the reader sees moving. */
.hrhs-ba__r {
    position: absolute; inset: 0; z-index: 4;
    width: 100%; height: 100%; margin: 0; padding: 0; font-size: 1rem; line-height: 1.5;
    -webkit-appearance: none; appearance: none;
    background: transparent; border: 0; cursor: ew-resize;
}
.hrhs-ba__r::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 40px; height: 100px; background: transparent; cursor: ew-resize;
}
.hrhs-ba__r::-moz-range-thumb {
    width: 40px; height: 100px; background: transparent; border: 0; cursor: ew-resize;
}
.hrhs-ba__r:focus-visible { outline: 3px solid var(--hrhs-accent); outline-offset: 2px; }
.hrhs-ba__tag {
    position: absolute; bottom: 10px; z-index: 3;
    border-radius: 7px; padding: 4px 9px;
    font-size: .7rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; pointer-events: none;
}
.hrhs-ba__tag--b { left: 10px; background: rgba(3,35,51,.82); color: #fff; }
.hrhs-ba__tag--a { right: 10px; background: rgba(255,255,255,.94); color: var(--hrhs-dark); }
/* The caption's scrim would sit over both tags and read as a third label, so a
   paired tile carries the caption above them instead. */
.hrhs-ba .hrhs-work__cap { bottom: 42px; }

/* Written out rather than on one line. The layout audit reads rules and their
   media context separately, and a single-line @media with the rule nested on
   the same line was parsed as a base rule — so it reported the collapse itself
   as an uncollapsed grid. The formatting is the fix. */
@media (max-width: 980px) {
    .hrhs-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .hrhs-work { grid-template-columns: minmax(0, 1fr); }
}


/* ── Phone-only pieces ──────────────────────────────────────────────────── */
@media (min-width: 960px) {
    .hrhs-m-only { display: none !important; }
    .hrhs-mini, .hrhs-acts, .hrhs-profile-dock, .hrhs-dots { display: none; }
    .hrhs-lp { padding-bottom: 0; }
    .hrhs-toast { bottom: 90px; }
}

/* ── Tablet: a little more room ─────────────────────────────────────────── */
@media (min-width: 640px) and (max-width: 959px) {
    .hrhs-lp { --lp-gut: 24px; }
    .hrhs-work__t { flex-basis: 46%; }
    .hrhs-lp .hrhs-prices > .hrhs-price { flex-basis: 46%; }
    .hrhs-lp-pros > * { flex-basis: 46%; }
}

/* ── Desktop: two columns, the rows become grids ────────────────────────── */
@media (min-width: 960px) {
    .hrhs-hero { margin: 0 0 14px; border-radius: var(--lp-r); overflow: hidden; border: 1px solid var(--lp-line); box-shadow: var(--lp-lift); }
    .hrhs-hero__banner { height: 300px; }
    .hrhs-hero__acts { top: 18px; right: 22px; }
    .hrhs-hero__id { left: 26px; right: 26px; bottom: 26px; gap: 18px; }
    .hrhs-hero__tile { width: 96px; height: 96px; border-radius: 22px; }
    .hrhs-hero__mono { font-size: 32px; }
    .hrhs-hero__name { font-size: 38px; }
    .hrhs-hero__meta { font-size: 15px; }
    /* A flex row, not four grid tracks: three cells divide the row as evenly
       as four do, instead of leaving a blank fourth. */
    .hrhs-proof { display: flex; gap: 0; padding: 0; overflow: visible; border-top: 1px solid var(--lp-line); }
    .hrhs-proof__i, .hrhs-proof__i--gold { flex: 1 1 0; border: 0; border-left: 1px solid var(--lp-line); border-radius: 0; padding: 16px 22px; background: var(--lp-card); min-width: 0; }
    .hrhs-proof__i:first-child { border-left: 0; }
    .hrhs-proof__n { font-size: 26px; }
    .hrhs-proof__l { font-size: 12.5px; }
    .hrhs-fade { -webkit-mask-image: none; mask-image: none; }

    /* The jumps are a card while the page scrolls under them, and the moment
       they stick under the site header the card grows to the full width of
       the screen — the same bar, part of the header now (Angel, 17 Sep). The
       surface is a pseudo-element so its width can animate while the tabs
       stay where they are; --hrhs-vw is the real viewport width, set by
       hrhs-profile.js, because 100vw counts a scrollbar the page cannot use. */
    .hrhs-snav { margin: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; isolation: isolate; }
    .hrhs-snav::before {
        content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100%; transform: translateX(-50%); z-index: -1; box-sizing: border-box;
        background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 14px; box-shadow: var(--lp-lift);
        transition: width .28s ease, border-radius .28s ease, box-shadow .28s ease, border-color .28s ease;
    }
    .hrhs-snav.is-stuck::before {
        width: var(--hrhs-vw, 100vw); border-radius: 0; border-color: transparent; border-bottom-color: var(--lp-line);
        box-shadow: 0 12px 28px -20px rgba(10,26,47,.35);
    }
    .hrhs-snav__in { padding: 0 8px; height: 52px; }
    .hrhs-lp .hrhs-snav__b { padding: 0 14px; font-size: 14px; }

    .hrhs-profile-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
    .hrhs-pmain { min-width: 0; }
    .hrhs-sec { padding: 24px 26px 26px; margin-top: 20px; scroll-margin-top: calc(var(--hrhs-hdr-h, 74px) + 66px); }
    .hrhs-sec--quiet { padding-top: 8px; }
    .hrhs-sec__t { font-size: 22px; }
    .hrhs-sec__t--sm { font-size: 15px; }
    .hrhs-glance__grid { grid-template-columns: repeat(4, 1fr); }
    .hrhs-lp-row { overflow: visible; flex-wrap: wrap; margin: 0; padding: 0; }
    .hrhs-lp .hrhs-sg__chips { overflow: visible; flex-wrap: wrap; margin: 0; padding: 2px 0 10px; }
    .hrhs-lp-two { grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
    .hrhs-work { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; padding: 0; margin: 0; }
    .hrhs-work__t { max-width: none; }
    .hrhs-profile-rail { display: grid; gap: 14px; position: sticky; top: calc(var(--hrhs-hdr-h, 74px) + 66px); margin-top: 20px; }
    .hrhs-recommended { margin-top: 24px; }
    .hrhs-lp-pros { max-width: none; }
}
@media (min-width: 1180px) {
    .hrhs-profile-split { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hrhs-mini, .hrhs-dbar, .hrhs-snav::before, .hrhs-more svg, .hrhs-hoursd summary svg, .hrhs-dots i { transition: none; }
}

/* ── Second pass: what the builder kit and core would otherwise paint ─────
   Links are pinned blue site-wide with !important against the builder kit
   (see .hrhs-content a:not(.hrhs-btn)); every anchor the listing draws as
   something other than a blue link pins back. The outline button is blue in
   core; here it is ink on white. */
.hrhs-lp .hrhs-snav__b,
.hrhs-lp .hrhs-snav__b:visited,
.hrhs-lp .hrhs-snav__b:hover { color: var(--lp-muted) !important; text-decoration: none !important; }
.hrhs-lp .hrhs-snav__b.is-on,
.hrhs-lp .hrhs-snav__b.is-on:visited,
.hrhs-lp .hrhs-snav__b.is-on:hover { color: var(--lp-ink) !important; }
.hrhs-lp a.hrhs-hcat,
.hrhs-lp a.hrhs-hcat:visited,
.hrhs-lp a.hrhs-hcat:hover { color: #fff !important; text-decoration: none !important; }
.hrhs-lp a.hrhs-rchip,
.hrhs-lp a.hrhs-rchip:visited,
.hrhs-lp a.hrhs-rchip:hover { color: var(--lp-ink) !important; text-decoration: none !important; }
.hrhs-lp .hrhs-claim-line a,
.hrhs-lp .hrhs-claim-line a:visited { color: var(--lp-go) !important; }
.hrhs-lp a.hrhs-tile,
.hrhs-lp a.hrhs-tile:visited,
.hrhs-lp a.hrhs-tile:hover { color: var(--lp-ink) !important; text-decoration: none !important; }
.hrhs-lp a.hrhs-work__t,
.hrhs-lp a.hrhs-work__t:visited { color: #fff !important; }

.hrhs-lp .hrhs-btn--outline,
.hrhs-lp .hrhs-btn--outline:hover,
.hrhs-lp .hrhs-btn--outline:focus,
.hrhs-lp .hrhs-btn--outline:active {
    background-color: #fff !important; color: var(--lp-ink) !important; border-color: var(--lp-line) !important; transform: none;
}
.hrhs-lp .hrhs-btn--outline:hover { border-color: #CBD8E9 !important; }

/* The tiles: equal columns whatever their words. */
.hrhs-acts__row { grid-template-columns: repeat(var(--hrhs-tiles, 3), minmax(0, 1fr)); }
.hrhs-tile { min-width: 0; }
.hrhs-profile-dock .hrhs-btn { width: 100%; }

/* The listing badges: earned in ink with a green mark, the rating one in
   gold because it is the one thing here a homeowner gave them, chosen ones
   outlined, the deal in its amber. */
.hrhs-lp .hrhs-lbadges { display: contents; }
.hrhs-lp .hrhs-lbadges__set { display: contents; }
.hrhs-lp .hrhs-lbadges__rule { display: none; }
.hrhs-lp .hrhs-lbadge {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; white-space: nowrap;
    background: var(--lp-tint); color: var(--lp-ink2); border: 1px solid var(--lp-line);
}
.hrhs-lp .hrhs-lbadge > i { font-size: .8rem; }
.hrhs-lp .hrhs-lbadge--earned { background: var(--lp-ink); color: #fff; border-color: var(--lp-ink); }
.hrhs-lp .hrhs-lbadge--earned > i { color: var(--lp-green); }
.hrhs-lp .hrhs-lbadge--earned[data-badge="well_reviewed"] { background: var(--lp-gold-bed); color: var(--lp-gold-ink); border-color: var(--lp-gold-line); }
.hrhs-lp .hrhs-lbadge--earned[data-badge="well_reviewed"] > i { color: var(--lp-gold); }
.hrhs-lp .hrhs-lbadge--offer { background: var(--lp-gold-bed); color: var(--lp-gold-ink); border-color: var(--lp-gold-line); }
.hrhs-lp .hrhs-lbadge--id { background: var(--lp-card); }
.hrhs-glance__badges + .hrhs-lp-lbl,
.hrhs-lp-nc + .hrhs-lp-lbl { margin-top: 18px; }
.hrhs-lp .hrhs-glance__badges ~ .hrhs-lp-lbl { margin-top: 18px; }

/* The contact rows in the rail: ink and legible green, tint icon beds. */
.hrhs-lp .hrhs-cx__ic { background: var(--lp-tint); border: 1px solid var(--lp-line); color: var(--lp-go); border-radius: 10px; }
.hrhs-lp .hrhs-cx__v { color: var(--lp-ink); }
.hrhs-lp .hrhs-cx__v--link,
.hrhs-lp .hrhs-cx__v--link a,
.hrhs-lp .hrhs-cx__v a,
.hrhs-lp .hrhs-cx__v a:visited { color: var(--lp-go) !important; text-decoration: none !important; }
.hrhs-lp .hrhs-cx__v a:hover { text-decoration: underline !important; }
.hrhs-lp .hrhs-cx__mask { color: var(--lp-ink2); }
.hrhs-lp .hrhs-cx__why { color: var(--lp-muted); }
.hrhs-lp .hrhs-profile-rail__card .hrhs-section-label { margin-top: 4px; }

/* The contact rows are anchors, so the site-wide link pin (0,3,1 with
   !important) beats a two-class override; these carry four. The Sign in
   button inside the panel is core's blue primary; here it is ink. */
.hrhs-content .hrhs-lp .hrhs-cx a.hrhs-cx__row,
.hrhs-content .hrhs-lp .hrhs-cx a.hrhs-cx__row:visited,
.hrhs-content .hrhs-lp .hrhs-cx a.hrhs-cx__row:hover { color: var(--lp-ink) !important; text-decoration: none !important; }
.hrhs-content .hrhs-lp .hrhs-cx a.hrhs-cx__row .hrhs-cx__v--link,
.hrhs-content .hrhs-lp .hrhs-cx .hrhs-cx__v--link { color: var(--lp-go) !important; }
.hrhs-content .hrhs-lp .hrhs-cx a.hrhs-cx__row:hover .hrhs-cx__v--link { text-decoration: underline !important; }
.hrhs-lp .hrhs-cx__row { color: var(--lp-ink); }
.hrhs-lp .hrhs-btn--primary,
.hrhs-lp .hrhs-btn--primary:hover,
.hrhs-lp .hrhs-btn--primary:focus,
.hrhs-lp .hrhs-btn--primary:active { background-color: var(--lp-ink) !important; color: #fff !important; border-color: var(--lp-ink) !important; box-shadow: none; transform: none; }

/* The owner strip on a phone: ring and words, then the button on its own
   line, instead of three columns that push the button off the edge. */
@media (max-width: 639px) {
    .hrhs-own { grid-template-columns: 56px minmax(0, 1fr); gap: 14px 14px; padding: 16px; margin: 12px 0 0; align-items: start; }
    .hrhs-own__ring { width: 56px; height: 56px; }
    .hrhs-own__ring span { width: 44px; height: 44px; font-size: .85rem; }
    .hrhs-own > .hrhs-btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
}

/* Every bare button class the page uses, pinned on its own name too, so an
   audit that reads one class at a time finds all three colours. */
.hrhs-hero__fav,
.hrhs-hero__fav:hover,
.hrhs-hero__fav:focus,
.hrhs-hero__fav:active { background-color: rgba(255,255,255,.16) !important; color: #fff !important; border-color: transparent !important; }
.hrhs-hero__fav.is-on,
.hrhs-hero__fav.is-on:hover,
.hrhs-hero__fav.is-on:focus { background-color: var(--lp-green) !important; color: var(--lp-ink) !important; }
.hrhs-tile--lock,
.hrhs-tile--lock:hover,
.hrhs-tile--lock:focus,
.hrhs-tile--lock:active { background-color: var(--lp-tint) !important; color: var(--lp-ink2) !important; border-color: var(--lp-line) !important; }
.hrhs-acts__go,
.hrhs-acts__go:focus,
.hrhs-acts__go:active { background-color: var(--lp-green) !important; color: var(--lp-ink) !important; border-color: transparent !important; }
.hrhs-rcard__act,
.hrhs-rcard__act:focus { border-color: transparent; }
.hrhs-rcard__save,
.hrhs-rcard__save:focus,
.hrhs-rev__more,
.hrhs-rev__more:focus { background-color: #fff !important; color: var(--lp-ink) !important; border-color: var(--lp-line) !important; }
.hrhs-rcard__save.is-on,
.hrhs-rcard__save.is-on:focus { background-color: var(--lp-go-bed) !important; border-color: #BFE9D3 !important; color: var(--lp-go) !important; }

/* ── Against the theme's reset (4.94.2) ──────────────────────────────────
   Hello Elementor's reset.css prints after this sheet and styles
   [type=button] and input[type=search] at (0,1,0)/(0,1,1) — the same weight
   as one of our classes — so on the live page the tiles, the round cover
   buttons, Read more, the filter chips and the rail's Save came back with
   the theme's display, padding, 3px corners, 16px regular type and auto
   width (Angel, 17 Sep: "These don't look right"). Each bare button the
   page draws restates its shape here at (0,2,0), which holds whatever the
   print order. Colours are pinned above with !important as before.
   tests/themeproof.cjs renders the page with the theme's reset and without
   it and fails on any computed difference. */
.hrhs-lp .hrhs-hero__rb {
    display: grid; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
    font-size: 13.3333px; line-height: normal; white-space: normal; text-align: center; transition: none;
}
.hrhs-lp .hrhs-mini__rb {
    display: grid; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
    font-size: 13.3333px; line-height: normal; white-space: normal; text-align: center; transition: none;
}
.hrhs-lp .hrhs-tile {
    display: flex; width: auto; height: auto; min-height: 64px; padding: 8px 6px; border-width: 1px; border-style: solid; border-radius: 13px;
    font-size: 12.5px; font-weight: 700; line-height: 1.15; white-space: normal; text-align: center; transition: none;
}
.hrhs-lp .hrhs-more:not([hidden]) { display: inline-flex; }
.hrhs-lp .hrhs-more {
    width: auto; padding: 0; border: 0; border-radius: 0; min-height: 40px;
    font-size: 14px; font-weight: 700; line-height: 1.6; white-space: normal; text-align: left; transition: none;
}
.hrhs-lp .hrhs-fchip {
    display: inline-flex; width: auto; height: 34px; padding: 0 12px; border-width: 1px; border-style: solid; border-radius: 999px;
    font-size: 13px; font-weight: 700; line-height: normal; white-space: nowrap; text-align: center; transition: none;
}
.hrhs-lp .hrhs-rcard__save {
    width: 100%; height: auto; padding: 11px 22px; border-width: 2px; border-style: solid; border-radius: var(--hrhs-radius);
    font-size: .9rem; font-weight: 700; line-height: 1.3; white-space: nowrap;
}
.hrhs-lp .hrhs-rev__more:not([hidden]) { display: inline-flex; }
.hrhs-lp .hrhs-rev__more { width: 100%; }
.hrhs-lp .hrhs-acts__go { width: 100%; min-height: 50px; font-size: 15.5px; border-radius: 13px; }