/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE — assets/css/hrhs-home.css

   Loaded only on the homepage, by HRHS_Pages::enqueue_assets(). It is
   the one page with layouts nothing else uses, and putting them in
   hrhs-core.css would ship them to every screen on the site.

   Everything builds on the existing card language: the hero is the
   same rounded dark panel as a category landing page, buttons are
   .hrhs-btn, and provider cards come from the shared partial. Nothing
   here reinvents a component that already exists.
═══════════════════════════════════════════════════════════════ */

.hrhs-home__block { margin-bottom: 34px; }
/* The hero supplies its own bottom space, so the content column below it does
   not need its usual 40px lead-in as well. */
/* The stage is clipped by the hero, so the next section must sit against the
   band with no gap or the cut-off reads as an accident. */
.hrhs-home__hero + .hrhs-content { padding-top: 62px; position: relative; z-index: 2; background: #fff; }


/* ─── Hero ────────────────────────────────────────────────────
   Full-bleed band. It is a sibling of .hrhs-content rather than a child, so
   edge-to-edge needs no 100vw and produces no horizontal scrollbar. The inner
   wrapper carries the same 1280 and 28px padding as .hrhs-content, which is
   what keeps the hero text aligned with the header logo above it. */
.hrhs-home__hero {
    background: var(--hrhs-dark);
    color: #fff;
    /* No bottom padding: the stage runs to the band's edge and past it, and
       `overflow: hidden` clips it there — so the next section appears to cut
       the monitor off mid-card. */
    padding: 76px 0 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hrhs-home__hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 1;
}
.hrhs-home__hero::after {
    content: "";
    position: absolute;
    width: 900px; height: 900px;
    max-width: 100%;
    top: -420px; right: -260px;
    background: radial-gradient(circle, rgba(74,144,217,.26) 0%, transparent 66%);
    pointer-events: none;
}

.hrhs-home__h1 {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.08;
    margin: 0 0 18px;
    color: #fff;
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
}
/* The green swoosh from the current site, kept. It is the one piece
   of hand-drawn warmth on the page — used once, on the last word of
   the H1, and nowhere else. */
.hrhs-home__swoosh { position: relative; display: inline-block; white-space: nowrap; }
.hrhs-home__swoosh svg {
    position: absolute; left: 0; bottom: -.22em;
    width: 100%; height: .3em; overflow: visible;
}
.hrhs-home__swoosh path {
    fill: none; stroke: var(--hrhs-accent); stroke-width: 7; stroke-linecap: round;
    stroke-dasharray: 320; stroke-dashoffset: 320;
    animation: hrhs-draw .65s ease-out .35s forwards;
}
@keyframes hrhs-draw { to { stroke-dashoffset: 0; } }

.hrhs-home__lede {
    font-size: 1.05rem; line-height: 1.7;
    color: rgba(255,255,255,.86);
    max-width: 64ch; margin: 0 auto 30px;
}

/* Search — the primary control on the page. */
.hrhs-home__search {
    display: flex; gap: 8px; flex-wrap: wrap;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--hrhs-radius-lg);
    padding: 8px;
    max-width: 720px; margin: 0 auto;
}
.hrhs-home__search select {
    flex: 1 1 180px; min-width: 0; height: 46px;
    border: 0; border-radius: var(--hrhs-radius);
    background: rgba(255,255,255,.08); color: #fff;
    font-family: inherit; font-size: .92rem; font-weight: 500;
    padding: 0 14px; cursor: pointer;
}
.hrhs-home__search select option { color: #111; }
.hrhs-home__search .hrhs-btn { flex: 0 0 auto; height: 46px; }

.hrhs-home__alt { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.hrhs-home__fine { font-size: .82rem; color: rgba(255,255,255,.6); margin: 0; }


/* ─── Section heads ──────────────────────────────────────────── */
.hrhs-home__eyebrow {
    font-size: .72rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--hrhs-primary-dk); margin-bottom: 10px;
}
.hrhs-home__eyebrow--light { color: var(--hrhs-accent); }
.hrhs-home__h2 {
    font-size: 2rem; font-weight: 800; letter-spacing: -.035em;
    line-height: 1.16; color: var(--hrhs-dark); margin: 0 0 16px;
    max-width: 22ch;
}
.hrhs-home__h2--light { color: #fff; }
.hrhs-home__h2--wide { max-width: none; }

/* Two-column intro, matching the current homepage's split. */
.hrhs-home__split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 44px;
    align-items: start; margin-bottom: 30px;
}
.hrhs-home__split p { font-size: .96rem; line-height: 1.75; margin: 0 0 14px; }
.hrhs-home__split p:last-child { margin-bottom: 0; }

/* ─── Reason cards — dark, three across ──────────────────────── */
.hrhs-home__reason-icon {
    width: 42px; height: 42px; margin-bottom: 18px;
    color: var(--hrhs-accent);
}

/* ─── Dark panel (featured head, pro band, close) ─────────────── */
.hrhs-home__panel {
    background: var(--hrhs-dark);
    border-radius: var(--hrhs-radius-xl);
    padding: 44px 40px;
    color: rgba(255,255,255,.84);
}
.hrhs-home__panel--deep { background: #021a26; text-align: center; }


/* ─── Why use HRHS — asymmetric bento ─────────────────────────
   Not three equal tiles. The free/no-commission promise is the
   strongest hook a homeowner has for staying on the page, so it
   gets a panel of its own with the CTA in it; the other two
   support it from the side. Weight variation is the hierarchy. */
.hrhs-home__bento { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: stretch; }

.hrhs-home__bento-lead {
    background: var(--hrhs-dark);
    border-radius: var(--hrhs-radius-xl);
    padding: 38px 36px;
    color: rgba(255,255,255,.82);
    display: flex; flex-direction: column;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
    position: relative; overflow: hidden;
}
.hrhs-home__bento-lead::after {
    content: ""; position: absolute;
    width: 420px; height: 420px; max-width: 100%;
    bottom: -240px; left: -140px;
    background: radial-gradient(circle, rgba(11,255,132,.16) 0%, transparent 66%);
    pointer-events: none;
}
.hrhs-home__bento-lead > * { position: relative; z-index: 1; }
.hrhs-home__bento-lead h3 { font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0 0 12px; letter-spacing: -.025em; }
.hrhs-home__bento-lead p  { font-size: .95rem; line-height: 1.75; margin: 0 0 26px; }
.hrhs-home__bento-lead .hrhs-btn { align-self: flex-start; margin-top: auto; }

.hrhs-home__bento-side { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.hrhs-home__bento-card {
    background: var(--hrhs-white);
    border: 1px solid var(--hrhs-border);
    border-left: 4px solid var(--hrhs-primary);
    border-radius: 0 var(--hrhs-radius-lg) var(--hrhs-radius-lg) 0;
    padding: 24px 26px;
    display: flex; gap: 16px; align-items: flex-start;
    box-shadow: var(--hrhs-shadow);
    transition: var(--hrhs-transition);
}
.hrhs-home__bento-card:hover { box-shadow: var(--hrhs-shadow-md); }
.hrhs-home__bento-card .hrhs-home__reason-icon { flex-shrink: 0; width: 30px; height: 30px; margin: 2px 0 0; color: var(--hrhs-primary); }
.hrhs-home__bento-card h3 { font-size: 1rem; font-weight: 800; color: var(--hrhs-dark); margin: 0 0 7px; letter-spacing: -.01em; }
.hrhs-home__bento-card p  { font-size: .88rem; line-height: 1.7; color: var(--hrhs-muted); margin: 0; }
.hrhs-home__reason-icon { width: 42px; height: 42px; margin-bottom: 18px; color: var(--hrhs-accent); }

/* ─── Community reviews ──────────────────────────────────────
   Real .hrhs-review-card rows in a real .hrhs-card, so the sample
   reviews are the same object a profile page renders. */
.hrhs-home__community { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.hrhs-home__community .hrhs-card { margin-bottom: 0; }
.hrhs-home__body { font-size: .98rem; line-height: 1.75; color: var(--hrhs-muted); margin: 0 0 14px; max-width: 54ch; }
.hrhs-home__body strong { color: var(--hrhs-dark); }

/* ─── Pro band ───────────────────────────────────────────────── */
.hrhs-home__pro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start; }
.hrhs-home__pro p { font-size: .96rem; line-height: 1.75; margin: 0 0 14px; }
.hrhs-home__benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hrhs-home__benefit {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--hrhs-radius-lg);
    padding: 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.hrhs-home__benefit--wide { grid-column: 1 / -1; }
.hrhs-home__benefit h3 { font-size: .95rem; font-weight: 800; color: #fff; margin: 0 0 6px; }
.hrhs-home__benefit p { font-size: .84rem; line-height: 1.65; margin: 0; color: rgba(255,255,255,.74); }

/* ─── Review explainer ───────────────────────────────────────── */

/* ─── Close ──────────────────────────────────────────────────── */
.hrhs-home__close-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* ─── Bits the template needs that the mockup did without ─────── */
.hrhs-home__centered { text-align: center; max-width: 70ch; margin: 0 auto 26px; }
.hrhs-home__centered .hrhs-home__h2 { margin-left: auto; margin-right: auto; }
.hrhs-home__centered .hrhs-home__body { margin-left: auto; margin-right: auto; }
.hrhs-home__h2--centered { margin-left: auto; margin-right: auto; }
.hrhs-home__actions { margin: 24px 0 8px; }
.hrhs-home__panel-lede { margin: 0; font-size: .98rem; line-height: 1.7; }
.hrhs-home__panel--deep .hrhs-home__close-actions { margin-top: 24px; }
.hrhs-home__taxlinks { margin-bottom: 26px; }
.hrhs-home__taxlinks:last-child { margin-bottom: 0; }
.hrhs-home__swoosh--dark path { stroke: var(--hrhs-accent-dk); }
.hrhs-home__community .hrhs-review-card:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

/* Visually hidden, but read out. The hero selects need labels and the
   placeholder option is not one — a screen reader announcing "combo box"
   with no name is the most common failure on a search form like this. */
.hrhs-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 900px) {
    .hrhs-home__split,
    .hrhs-home__bento,
    .hrhs-home__community,
    .hrhs-home__pro,
    .hrhs-home__benefits { grid-template-columns: 1fr; }
    .hrhs-home__bento-side { grid-template-rows: auto auto; }
    .hrhs-home__hero { padding: 44px 0 52px; }
    .hrhs-home__h1 { font-size: 2rem; }
    .hrhs-home__h2 { font-size: 1.5rem; }
    .hrhs-home__panel { padding: 30px 22px; }
    .hrhs-home__search .hrhs-btn { width: 100%; }
    }

@media (prefers-reduced-motion: reduce) {
    .hrhs-home__swoosh path { animation: none; stroke-dashoffset: 0; }
    }


/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE STAGE

   The product sitting inside the hero band: a directory on a
   monitor with two of the platform's tools overlapping it.

   Drawn in markup rather than screenshotted — sharp on any
   display, four small photographs instead of one large image, and
   it cannot go stale when the real directory changes. Entirely
   decorative: the section carries aria-hidden, because a search
   box that does nothing is worse than no search box.
═══════════════════════════════════════════════════════════════ */
/* The stage runs past the hero's bottom edge; the hero clips it, so the next
   section appears to cut the monitor off mid-screen. */
.hrhs-stage{position:relative;max-width:1140px;margin:54px auto -30px;padding:0 28px;z-index:2}
.hrhs-stage__in{position:relative}
.hrhs-mon{background:#0b1620;border:1px solid rgba(255,255,255,.14);border-top-left-radius:16px;border-top-right-radius:16px;
  padding:11px 11px 0;box-shadow:0 -2px 70px rgba(11,255,132,.10),0 34px 90px rgba(0,0,0,.55)}
.hrhs-mon__bar{display:flex;align-items:center;gap:6px;padding:0 4px 10px}
.hrhs-mon__bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.hrhs-mon__url{margin-left:12px;background:rgba(255,255,255,.07);border-radius:20px;padding:5px 13px;
  font-size:10.5px;color:rgba(255,255,255,.52)}
.hrhs-mon__scr{color:var(--hrhs-text, #3A4654);text-align:left;background:var(--hrhs-light-bg);border-radius:9px 9px 0 0;overflow:hidden;text-align:left}

/* ═══ directory inside the monitor ═══ */
.hrhs-dir__top{background:#fff;border-bottom:1px solid var(--hrhs-border);padding:12px 15px;display:flex;align-items:center;gap:8px}
.hrhs-dir__top b{font-size:13.5px;color:var(--hrhs-dark);letter-spacing:-.01em}
.hrhs-chip{background:var(--hrhs-light-bg);border:1px solid var(--hrhs-border);border-radius:20px;padding:4px 11px;font-size:10.5px;color:var(--hrhs-muted);white-space:nowrap}
.hrhs-chip--on{background:var(--hrhs-dark);color:#fff;border-color:var(--hrhs-dark);font-weight:700}
.hrhs-dir__count{margin-left:auto;font-size:10.5px;color:var(--hrhs-muted)}
.hrhs-dir__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:15px}

.hrhs-dircard{background:#fff;border:1px solid var(--hrhs-border);border-radius:12px;overflow:hidden;
  box-shadow:0 1px 3px rgba(2,23,35,.06);display:flex;flex-direction:column}
.hrhs-dircard__img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#dde5ec}
.hrhs-dircard__img img{width:100%;height:100%;object-fit:cover}
.hrhs-dircard__top{position:absolute;top:7px;left:7px;background:var(--hrhs-dark);color:var(--hrhs-accent);
  font-size:7.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 7px;
  border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.32)}
.hrhs-dircard__avail{position:absolute;bottom:7px;left:7px;background:rgba(11,255,132,.95);color:#04202f;
  font-size:7.5px;font-weight:800;letter-spacing:.03em;padding:4px 7px;border-radius:20px}
.hrhs-dircard__b{padding:10px 11px 11px;display:flex;flex-direction:column;flex:1}
.hrhs-dircard__hd{display:flex;align-items:flex-start;gap:7px}
.hrhs-dircard__av{width:26px;height:26px;border-radius:50%;background:var(--hrhs-dark);color:#fff;flex-shrink:0;
  display:grid;place-items:center;font-size:9px;font-weight:800;letter-spacing:.02em}
.hrhs-dircard__name{font-size:11px;font-weight:800;color:var(--hrhs-dark);line-height:1.25;letter-spacing:-.01em;padding-top:2px}
/* The live directory's two round outline buttons — save, and message. */
.hrhs-dircard__acts{margin-left:auto;display:flex;gap:5px;flex-shrink:0}
.hrhs-dircard__act{width:22px;height:22px;border-radius:50%;border:1px solid #c9d9ec;background:#fff;
  color:var(--hrhs-primary-dk);display:grid;place-items:center;cursor:pointer;padding:0}
.hrhs-dircard__act svg{width:11px;height:11px}
.hrhs-dircard__act.is-fav{border-color:#f2c2c4;background:#fdeced;color:#E5484D}
.hrhs-dircard__act.is-fav svg{fill:currentColor}
.hrhs-dircard__cat{display:inline-block;align-self:flex-start;margin:8px 0 0;background:var(--hrhs-primary-lt);
  color:var(--hrhs-primary-dk);font-size:7.5px;font-weight:800;letter-spacing:.05em;padding:4px 7px;border-radius:5px}
.hrhs-dircard__tag{font-size:9.5px;color:var(--hrhs-muted);line-height:1.45;margin:8px 0 0}
.hrhs-dircard__foot{display:flex;align-items:center;gap:6px;border-top:1px solid var(--hrhs-light-bg);margin-top:auto;padding-top:8px}
.hrhs-dircard__rate{display:flex;align-items:center;gap:4px}
.hrhs-dircard__rate em{font-style:normal;color:#F5A623;font-size:9.5px;letter-spacing:.5px}
.hrhs-dircard__rate b{font-size:10px;color:var(--hrhs-dark)}
.hrhs-dircard__rate span{font-size:9px;color:var(--hrhs-muted)}
.hrhs-dircard__city{margin-left:auto;font-size:9px;color:var(--hrhs-muted)}

/* ═══ overlapping tools ═══ */
.hrhs-tool{color:var(--hrhs-text, #3A4654);position:absolute;background:#fff;border-radius:13px;padding:12px 13px;line-height:1.4;
  box-shadow:0 20px 46px rgba(0,0,0,.38);border:1px solid rgba(2,23,35,.06);z-index:4;text-align:left}
.hrhs-tool__hd{display:flex;align-items:center;gap:7px;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--hrhs-muted);margin-bottom:9px}
.hrhs-tool__dot{width:7px;height:7px;border-radius:50%;background:var(--hrhs-accent-dk)}
.hrhs-tool--msg{left:-34px;top:96px;width:214px}
.hrhs-msg{display:flex;gap:8px;align-items:flex-start;padding:7px 0;border-top:1px solid var(--hrhs-light-bg)}
.hrhs-msg:first-of-type{border-top:0}
.hrhs-msg__av{width:24px;height:24px;border-radius:50%;background:var(--hrhs-dark);color:var(--hrhs-accent);
  display:grid;place-items:center;font-size:8.5px;font-weight:800;flex-shrink:0}
.hrhs-msg b{display:block;font-size:10.5px;color:var(--hrhs-dark)}
.hrhs-msg span{font-size:9.5px;color:var(--hrhs-muted)}
.hrhs-msg__unread{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--hrhs-accent-dk);flex-shrink:0;margin-top:6px}
.hrhs-tool--job{right:-40px;top:58px;width:222px}
.hrhs-jobt{font-size:12px;font-weight:800;color:var(--hrhs-dark);margin-bottom:8px;line-height:1.3}
.hrhs-jobkv{display:flex;justify-content:space-between;font-size:10px;padding:4px 0;border-bottom:1px solid var(--hrhs-light-bg)}
.hrhs-jobkv:last-of-type{border-bottom:0}
.hrhs-jobkv span{color:var(--hrhs-muted)}
.hrhs-jobkv b{color:var(--hrhs-dark)}
.hrhs-jobcta{margin-top:9px;background:var(--hrhs-dark);color:#fff;text-align:center;border-radius:7px;padding:8px;font-size:10px;font-weight:800}


/* ─── Stage: responsive ─────────────────────────────────── */
@media(max-width:1180px){
  .hrhs-tool--msg{left:-8px}
  .hrhs-tool--job{right:-8px}
}

/* ─── tablet ───────────────────────────────────────────────── */
@media(max-width:960px){
  .hero{padding-top:54px}
  .hrhs-stage{margin:36px auto -22px;padding:0 18px}
  .hrhs-dir__grid{grid-template-columns:1fr 1fr;gap:10px;padding:12px}
    .hrhs-tool--job{right:-6px;top:48px;width:196px}
}

/* ─── phone ────────────────────────────────────────────────────
   The cards go single-column: two side by side at 380px are 165px
   wide, which turns the business name into three lines and the
   photo into a stripe. One column keeps every card legible, and the
   section still cuts the monitor off — the effect the whole layout
   is built around. */
@media(max-width:640px){
      
  .hero{padding-top:42px}
        
  /* Stacked, full-width, and tall enough to tap. */
          
  .hrhs-stage{margin:30px auto -18px;padding:0 14px}
  .hrhs-mon{padding:8px 8px 0;border-top-left-radius:13px;border-top-right-radius:13px}
  .hrhs-mon__bar{padding:0 3px 8px}
  .hrhs-mon__bar i{width:7px;height:7px}
  .hrhs-mon__url{font-size:9px;padding:4px 10px;margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:62%}

  /* The filter row scrolls rather than wrapping into three lines. */
  .hrhs-dir__top{padding:10px 11px;gap:6px;overflow-x:auto;scrollbar-width:none}
  .hrhs-dir__top::-webkit-scrollbar{display:none}
  .hrhs-dir__top b{font-size:12px;flex-shrink:0}
  .hrhs-chip{flex-shrink:0;font-size:9.5px;padding:4px 9px}
  .hrhs-dir__count{display:none}

  .hrhs-dir__grid{grid-template-columns:1fr;gap:10px;padding:11px}
  .hrhs-dircard__img{aspect-ratio:21/9}
  .hrhs-dircard__name{font-size:13px}
  .hrhs-dircard__cat{font-size:8.5px}
  .hrhs-dircard__tag{font-size:11px}
  .hrhs-dircard__act{width:28px;height:28px}
  .hrhs-dircard__act svg{width:13px;height:13px}
  .hrhs-dircard__av{width:30px;height:30px;font-size:10px}
  .hrhs-dircard__rate em{font-size:11px}
  .hrhs-dircard__rate b{font-size:11.5px}
  .hrhs-dircard__rate span,.hrhs-dircard__city{font-size:10px}
  .hrhs-dircard__top,.hrhs-dircard__avail{font-size:8.5px;padding:4px 8px}

  /* One tool card, overlapping the monitor as it does on desktop.
     Stacking them below would push the monitor up and lose the cut-off. */
  .hrhs-tool--msg{display:none}
  .hrhs-tool--job{position:absolute;right:6px;top:auto;bottom:14px;width:min(74%,240px);
    padding:11px 12px;box-shadow:0 16px 40px rgba(0,0,0,.45)}
  .hrhs-jobt{font-size:13px}
  .hrhs-jobkv{font-size:11px;padding:5px 0}
  .hrhs-jobcta{font-size:11px;padding:9px}
}

/* ─── small phone ──────────────────────────────────────────── */
@media(max-width:380px){
    .hrhs-stage{padding:0 10px}
  .hrhs-tool--job{width:80%;right:4px;bottom:10px}
}