/* ═══════════════════════════════════════════════════════════════
   HRHS Marketplace — Core Design System  v1.3.0
   Brand: Primary #4A90D9 · Dark #032333 · Accent #0BFF84
   Font: Inter · Base: 16px
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --hrhs-primary:    #4A90D9;
    --hrhs-primary-dk: #357ABD;
    --hrhs-primary-lt: #EBF4FF;
    --hrhs-secondary:  #D4E4E8;
    --hrhs-dark:       #032333;
    --hrhs-dark-lt:    #0a3a55;
    --hrhs-accent:     #0BFF84;
    --hrhs-accent-dk:  #08cc6a;
    --hrhs-text:       #374151;
    --hrhs-white:      #FFFFFF;
    --hrhs-border:     #E2E8F0;
    --hrhs-muted:      #6B7280;
    --hrhs-light-bg:   #F4F6F9;
    --hrhs-error:      #c0392b;
    --hrhs-success:    #1a9e55;
    --hrhs-warning:    #d97706;
    --hrhs-radius:     8px;
    --hrhs-radius-lg:  12px;
    --hrhs-radius-xl:  16px;
    --hrhs-shadow:     0 1px 3px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.05);
    --hrhs-shadow-md:  0 4px 16px rgba(0,0,0,0.10);
    --hrhs-shadow-lg:  0 12px 40px rgba(0,0,0,0.14);
    --hrhs-transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    color: var(--hrhs-text);
    background: var(--hrhs-light-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--hrhs-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ─── NAVIGATION ─────────────────────────────────────────────── */
.hrhs-nav {
    background: var(--hrhs-dark);
    padding: 0 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 16px rgba(3,35,51,0.22);
    position: sticky;
    top: 0;
    z-index: 200;
}

.hrhs-nav__logo {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--hrhs-white);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -0.02em;
}
.hrhs-nav__logo span { color: var(--hrhs-accent); }
.hrhs-nav__logo:hover { text-decoration: none; }

.hrhs-nav__links {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
}
.hrhs-nav__links a {
    color: rgba(255,255,255,0.75);
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--hrhs-transition);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
}
.hrhs-nav__links a:hover { color: var(--hrhs-white); background: rgba(255,255,255,0.08); text-decoration: none; }
.hrhs-nav__links a.hrhs-nav__cta {
    background: var(--hrhs-accent);
    color: var(--hrhs-dark);
    font-weight: 700;
    padding: 7px 16px;
}
.hrhs-nav__links a.hrhs-nav__cta:hover { background: var(--hrhs-accent-dk); color: var(--hrhs-dark); }

.hrhs-nav__divider {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.15);
    margin: 0 6px;
}
.hrhs-nav__welcome {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    padding: 0 4px;
    white-space: nowrap;
}
.hrhs-nav__welcome strong { color: rgba(255,255,255,0.9); font-weight: 600; }

/* ─── PAGE SHELL ──────────────────────────────────────────────── */
.hrhs-page { min-height: 100vh; display: flex; flex-direction: column; }

.hrhs-content {
    flex: 1;
    /* 1280 across the plugin, matching .hrhs-hdr__inner and .hrhs-ftr__inner.
     * At 1160 the page content sat 120px narrower than the header above it, so
     * the logo and nav visibly overhung the content on any wide screen. */
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 28px;
    width: 100%;
}
.hrhs-content--narrow { max-width: 580px; }
.hrhs-content--medium { max-width: 860px; }

/* ─── TYPOGRAPHY ──────────────────────────────────────────────── */
.hrhs-page-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--hrhs-dark);
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-bottom: 6px;
}
.hrhs-page-subtitle {
    color: var(--hrhs-muted);
    font-size: 0.95rem;
    margin-bottom: 32px;
}
.hrhs-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hrhs-muted);
    margin-bottom: 12px;
}

/* ─── CARDS ───────────────────────────────────────────────────── */
.hrhs-card {
    background: var(--hrhs-white);
    border: 1px solid var(--hrhs-border);
    border-radius: var(--hrhs-radius-lg);
    box-shadow: var(--hrhs-shadow);
    padding: 28px;
    margin-bottom: 20px;
    transition: var(--hrhs-transition);
}
.hrhs-card--compact { padding: 18px 22px; }
.hrhs-card--flush   { padding: 0; overflow: hidden; }
.hrhs-card:hover { box-shadow: var(--hrhs-shadow-md); }
.hrhs-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hrhs-dark);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hrhs-card__title a { font-size: 0.8rem; font-weight: 500; color: var(--hrhs-primary); }

/* ─── DASHBOARD BANNER ────────────────────────────────────────── */
.hrhs-dash-banner {
    background: linear-gradient(135deg, var(--hrhs-dark) 0%, #083a5a 100%);
    border-radius: var(--hrhs-radius-xl);
    padding: 32px 36px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
    color: var(--hrhs-white);
}
.hrhs-dash-banner::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: rgba(11,255,132,0.08);
    pointer-events: none;
}
.hrhs-dash-banner__greeting {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 4px;
}
.hrhs-dash-banner__sub {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.65);
    margin-bottom: 20px;
}
.hrhs-dash-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hrhs-dash-banner__stat-row {
    display: flex;
    gap: 32px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.12);
    flex-wrap: wrap;
}
.hrhs-dash-banner__stat { text-align: center; }
.hrhs-dash-banner__stat-num {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--hrhs-accent);
    letter-spacing: -0.03em;
    line-height: 1;
}
.hrhs-dash-banner__stat-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ─── FORMS ───────────────────────────────────────────────────── */
.hrhs-form-group { margin-bottom: 20px; }
.hrhs-form-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--hrhs-dark);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hrhs-form-group .hrhs-optional { font-weight: 400; color: var(--hrhs-muted); text-transform: none; letter-spacing: 0; }

.hrhs-input, .hrhs-select, .hrhs-textarea {
    width: 100%;
    padding: 11px 15px;
    border: 1.5px solid var(--hrhs-border);
    border-radius: var(--hrhs-radius);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--hrhs-text);
    background: var(--hrhs-white);
    transition: var(--hrhs-transition);
    outline: none;
    appearance: none;
}
.hrhs-input:focus, .hrhs-select:focus, .hrhs-textarea:focus {
    border-color: var(--hrhs-primary);
    box-shadow: 0 0 0 3px rgba(74,144,217,0.15);
}
.hrhs-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

.hrhs-input-wrapper { position: relative; }
.hrhs-input-wrapper .hrhs-input { padding-right: 44px; }
.hrhs-password-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: var(--hrhs-muted);
    font-size: 0.8rem; font-weight: 600; padding: 0; font-family: inherit;
}
.hrhs-field-error { color: var(--hrhs-error); font-size: 0.8rem; margin-top: 5px; display: none; }
.hrhs-field-error.visible { display: block; }

/* ─── CHECKBOX / RADIO ────────────────────────────────────────── */
.hrhs-checkbox-label {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    font-size: 0.875rem; color: var(--hrhs-text);
}
.hrhs-checkbox-label input[type="checkbox"] {
    width: 18px; height: 18px; margin-top: 2px;
    accent-color: var(--hrhs-primary); flex-shrink: 0;
}
.hrhs-radio-group { display: flex; flex-direction: column; gap: 12px; }
.hrhs-radio-option {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
    border: 1.5px solid var(--hrhs-border); border-radius: var(--hrhs-radius);
    cursor: pointer; transition: var(--hrhs-transition);
}
.hrhs-radio-option:has(input:checked) { border-color: var(--hrhs-primary); background: var(--hrhs-primary-lt); }
.hrhs-radio-option input[type="radio"] { margin-top: 3px; accent-color: var(--hrhs-primary); flex-shrink: 0; }
.hrhs-radio-option-label { font-weight: 600; font-size: 0.9rem; }
.hrhs-radio-option-desc  { font-size: 0.8rem; color: var(--hrhs-muted); margin-top: 2px; }

/* ─── BUTTONS ─────────────────────────────────────────────────── */
.hrhs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 22px; border-radius: var(--hrhs-radius);
    font-family: inherit; font-size: 0.9rem; font-weight: 700;
    cursor: pointer; border: 2px solid transparent;
    transition: var(--hrhs-transition); text-decoration: none; line-height: 1.3;
    white-space: nowrap;
}
.hrhs-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.hrhs-btn:hover { text-decoration: none; }

.hrhs-btn--primary   { background: var(--hrhs-primary); color: var(--hrhs-white); }
.hrhs-btn--primary:hover:not(:disabled) { background: var(--hrhs-primary-dk); color: var(--hrhs-white); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(74,144,217,0.40); }

.hrhs-btn--dark      { background: var(--hrhs-dark); color: var(--hrhs-white); }
.hrhs-btn--dark:hover:not(:disabled) { background: var(--hrhs-dark-lt); color: var(--hrhs-white); transform: translateY(-1px); }

.hrhs-btn--accent    { background: var(--hrhs-accent); color: var(--hrhs-dark); }
.hrhs-btn--accent:hover:not(:disabled) { background: var(--hrhs-accent-dk); color: var(--hrhs-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(11,255,132,0.4); }

.hrhs-btn--outline   { background: transparent; color: var(--hrhs-primary); border-color: var(--hrhs-primary); }
.hrhs-btn--outline:hover:not(:disabled) { background: var(--hrhs-primary); color: var(--hrhs-white); transform: translateY(-1px); }

.hrhs-btn--ghost     { background: rgba(255,255,255,0.12); color: var(--hrhs-white); border-color: rgba(255,255,255,0.2); }
.hrhs-btn--ghost:hover:not(:disabled) { background: rgba(255,255,255,0.22); color: var(--hrhs-white); }

.hrhs-btn--sm        { padding: 7px 15px; font-size: 0.82rem; }
.hrhs-btn--lg        { padding: 14px 28px; font-size: 1rem; }
.hrhs-btn--full      { width: 100%; }

/* ─── ALERTS ──────────────────────────────────────────────────── */
.hrhs-alert {
    padding: 14px 18px; border-radius: var(--hrhs-radius);
    font-size: 0.9rem; margin-bottom: 20px; border-left: 4px solid;
    display: flex; align-items: flex-start; gap: 10px;
}
.hrhs-alert--error   { background: #fdf0ef; border-color: var(--hrhs-error);   color: #8b2021; }
.hrhs-alert--success { background: #edf9f2; border-color: var(--hrhs-success); color: #155e38; }
.hrhs-alert--info    { background: #eef5f8; border-color: var(--hrhs-dark);    color: var(--hrhs-dark); }
.hrhs-alert--warning { background: #fffbeb; border-color: var(--hrhs-warning); color: #92400e; }

/* ─── BADGES ──────────────────────────────────────────────────── */
.hrhs-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.hrhs-badge--open        { background: #e6fff4; color: #0d6e3a; }
.hrhs-badge--awarded     { background: var(--hrhs-primary-lt); color: var(--hrhs-primary); }
.hrhs-badge--closed      { background: #f0f0f0; color: #666; }
.hrhs-badge--submitted   { background: #eef5f8; color: #0a3a55; }
.hrhs-badge--viewed      { background: #fffde7; color: #856a00; }
.hrhs-badge--not_selected{ background: #f0f0f0; color: #888; }
.hrhs-badge--withdrawn   { background: #fff5e6; color: #9b5e00; }
.hrhs-badge--in_progress { background: #ebf4ff; color: var(--hrhs-primary); }
.hrhs-badge--completed   { background: #e6fff4; color: #0d6e3a; }
.hrhs-badge--recommended { background: #fffbe6; color: #92600a; }

/* ─── STAR RATINGS ────────────────────────────────────────────── */
.hrhs-stars {
    display: inline-flex; align-items: center; gap: 1px;
    font-size: 1.1rem; line-height: 1;
}
.hrhs-stars--sm { font-size: 0.85rem; }
.hrhs-stars--lg { font-size: 1.4rem; gap: 2px; }
.hrhs-stars--xl { font-size: 1.8rem; gap: 3px; }

.hrhs-star--full  { color: #f5a623; }
.hrhs-star--half  { color: #f5a623; opacity: 0.7; }
.hrhs-star--empty { color: #ddd; }

.hrhs-rating-row {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.85rem; color: var(--hrhs-muted);
}
.hrhs-rating-row strong { color: var(--hrhs-dark); font-weight: 700; }

/* ─── STAR INPUT (interactive) ────────────────────────────────── */
.hrhs-star-input { display: flex; gap: 6px; align-items: center; }
.hrhs-star-input input[type="radio"] { display: none; }
.hrhs-star-input label {
    font-size: 2rem; color: #ddd; cursor: pointer;
    transition: color 0.15s; line-height: 1;
    text-transform: none; letter-spacing: 0;
}
.hrhs-star-input label:hover,
.hrhs-star-input label:hover ~ label { color: #ddd; }
.hrhs-star-input label:hover,
.hrhs-star-input input[type="radio"]:checked ~ label { color: #ddd; }

.hrhs-star-input { flex-direction: row-reverse; }
.hrhs-star-input label:hover,
.hrhs-star-input label:hover ~ label,
.hrhs-star-input input[type="radio"]:checked ~ label,
.hrhs-star-input input[type="radio"]:checked + label { color: #f5a623; }

/* ─── TABS ────────────────────────────────────────────────────── */
.hrhs-tabs {
    display: flex; gap: 0; margin-bottom: 24px;
    border-bottom: 2px solid var(--hrhs-border);
}
.hrhs-tab-btn {
    padding: 10px 20px; font-size: 0.9rem; font-weight: 600;
    color: var(--hrhs-muted); background: none; border: none;
    cursor: pointer; margin-bottom: -2px;
    border-bottom: 2px solid transparent; transition: var(--hrhs-transition);
    font-family: inherit;
}
.hrhs-tab-btn:hover { color: var(--hrhs-dark); }
.hrhs-tab-btn.active { color: var(--hrhs-primary); border-bottom-color: var(--hrhs-primary); }
.hrhs-tab-pane { display: none; }
.hrhs-tab-pane.active { display: block; }

/* ─── REVIEW CARDS ────────────────────────────────────────────── */
.hrhs-review-card {
    padding: 20px 0; border-bottom: 1px solid var(--hrhs-border);
}
.hrhs-review-card:last-child { border-bottom: none; }
.hrhs-review-card__header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.hrhs-review-card__author {
    display: flex; align-items: center; gap: 10px;
}
.hrhs-review-card__avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--hrhs-dark); color: var(--hrhs-white);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 700; flex-shrink: 0;
}
.hrhs-review-card__name { font-weight: 600; font-size: 0.9rem; color: var(--hrhs-dark); }
.hrhs-review-card__job  { font-size: 0.78rem; color: var(--hrhs-muted); margin-top: 1px; }
.hrhs-review-card__date { font-size: 0.78rem; color: var(--hrhs-muted); white-space: nowrap; }
.hrhs-review-card__text { font-size: 0.9rem; color: var(--hrhs-text); line-height: 1.65; margin-top: 6px; }

/* ─── DIVIDER ─────────────────────────────────────────────────── */
.hrhs-divider { border: none; border-top: 1px solid var(--hrhs-border); margin: 24px 0; }

/* ─── EMPTY STATE ─────────────────────────────────────────────── */
.hrhs-empty { text-align: center; padding: 56px 24px; color: var(--hrhs-muted); }
.hrhs-empty__icon  { font-size: 2.5rem; margin-bottom: 16px; opacity: 0.5; }
.hrhs-empty__title { font-size: 1.05rem; font-weight: 700; color: var(--hrhs-dark); margin-bottom: 8px; }
.hrhs-empty__text  { font-size: 0.9rem; max-width: 340px; margin: 0 auto; }

/* ─── QUICK ACTIONS ───────────────────────────────────────────── */
.hrhs-quick-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ─── PROVIDER DIRECTORY ──────────────────────────────────────── */
.hrhs-directory-grid {
    display: grid;
    /* min() so the column can shrink below its ideal on a narrow phone rather
     * than forcing the grid wider than the viewport. At 320px the fixed 290px
     * minimum plus the content padding overflowed by 26px and the page scrolled
     * sideways. */
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 20px;
}
.hrhs-provider-card {
    background: var(--hrhs-white);
    border: 1px solid var(--hrhs-border);
    border-radius: var(--hrhs-radius-lg);
    box-shadow: var(--hrhs-shadow);
    padding: 22px;
    display: flex; flex-direction: column; gap: 10px;
    transition: var(--hrhs-transition);
    text-decoration: none; color: inherit;
    position: relative;
}
.hrhs-provider-card:hover {
    box-shadow: var(--hrhs-shadow-md); transform: translateY(-3px);
    text-decoration: none; border-color: rgba(74,144,217,0.30);
}


.hrhs-provider-card__top { display: flex; align-items: flex-start; gap: 14px; }
.hrhs-provider-card__logo {
    width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--hrhs-secondary); background: var(--hrhs-secondary); flex-shrink: 0;
}
.hrhs-provider-card__logo-placeholder {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, var(--hrhs-dark) 0%, var(--hrhs-dark-lt) 100%);
    color: var(--hrhs-white); display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; font-weight: 800; flex-shrink: 0;
}
.hrhs-provider-card__name { font-weight: 700; font-size: 1rem; color: var(--hrhs-dark); line-height: 1.3; }
.hrhs-provider-card__cat  {
    display: inline-block; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--hrhs-primary); background: var(--hrhs-primary-lt);
    padding: 2px 8px; border-radius: 20px; margin-top: 3px;
}
.hrhs-provider-card__rating { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.hrhs-provider-card__meta   { font-size: 0.8rem; color: var(--hrhs-muted); }
.hrhs-provider-card__summary {
    font-size: 0.875rem; color: var(--hrhs-text); line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hrhs-provider-card__footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--hrhs-border);
    font-size: 0.78rem; color: var(--hrhs-muted);
}

/* ─── ONLINE / ACTIVE STATUS BADGE ───────────────────────────── */
@keyframes hrhs-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.55; transform: scale(1.35); }
}
.hrhs-card-status {
    position: absolute;
    top: 14px; right: 14px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 20px;
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    pointer-events: none; line-height: 1;
}
.hrhs-card-status__dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.hrhs-card-status--online {
    background: #e6fff4; color: #0d6e3a;
}
.hrhs-card-status--online .hrhs-card-status__dot {
    background: #0BFF84;
    animation: hrhs-pulse 1.8s ease-in-out infinite;
}
.hrhs-card-status--recent {
    background: #fffbe6; color: #92600a;
}
.hrhs-card-status--recent .hrhs-card-status__dot {
    background: #f5a623;
}

/* Inline status on public profile page */
.hrhs-online-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.82rem; font-weight: 600;
}
.hrhs-online-status__dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.hrhs-online-status--online { color: #0d6e3a; }
.hrhs-online-status--online .hrhs-online-status__dot {
    background: #0BFF84;
    animation: hrhs-pulse 1.8s ease-in-out infinite;
}
.hrhs-online-status--recent { color: #92600a; }
.hrhs-online-status--recent .hrhs-online-status__dot { background: #f5a623; }

/* ─── FILTER BAR ──────────────────────────────────────────────── */
.hrhs-filter-bar {
    display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; align-items: flex-end;
    background: var(--hrhs-white); padding: 16px 20px;
    border: 1px solid var(--hrhs-border); border-radius: var(--hrhs-radius-lg);
}
.hrhs-filter-bar label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hrhs-dark); display: block; margin-bottom: 5px; }
.hrhs-filter-bar select {
    padding: 9px 13px; border: 1.5px solid var(--hrhs-border);
    border-radius: var(--hrhs-radius); font-family: inherit;
    font-size: 0.875rem; color: var(--hrhs-text); background: var(--hrhs-light-bg);
    outline: none; cursor: pointer; min-width: 160px;
}
.hrhs-filter-bar select:focus { border-color: var(--hrhs-primary); }
.hrhs-filter-input {
    padding: 9px 13px; border: 1.5px solid var(--hrhs-border);
    border-radius: var(--hrhs-radius); font-family: inherit;
    font-size: 0.875rem; color: var(--hrhs-text); background: var(--hrhs-light-bg);
    outline: none; width: 100%;
}
.hrhs-filter-input:focus { border-color: var(--hrhs-primary); box-shadow: 0 0 0 3px rgba(74,144,217,0.12); }

/* ─── PAGINATION ──────────────────────────────────────────────── */
.hrhs-pagination {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 32px; flex-wrap: wrap;
}
.hrhs-pagination__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 12px;
    border: 1.5px solid var(--hrhs-border); border-radius: var(--hrhs-radius);
    font-size: 0.875rem; font-weight: 600; color: var(--hrhs-text);
    background: var(--hrhs-white); text-decoration: none;
    transition: var(--hrhs-transition);
}
.hrhs-pagination__btn:hover { border-color: var(--hrhs-primary); color: var(--hrhs-primary); text-decoration: none; }
.hrhs-pagination__btn.active { background: var(--hrhs-primary); border-color: var(--hrhs-primary); color: var(--hrhs-white); }
.hrhs-pagination__info { font-size: 0.82rem; color: var(--hrhs-muted); margin-left: 8px; }

/* ─── SECTION HEADING ─────────────────────────────────────────── */
.hrhs-section-title {
    font-size: 1rem; font-weight: 700; color: var(--hrhs-dark);
    margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between;
}
.hrhs-section-title a { font-size: 0.82rem; font-weight: 500; color: var(--hrhs-primary); }

/* ─── JOB CARDS ───────────────────────────────────────────────── */
.hrhs-job-card {
    background: var(--hrhs-white);
    border: 1px solid var(--hrhs-border);
    border-radius: var(--hrhs-radius-lg);
    padding: 20px 24px;
    margin-bottom: 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    transition: var(--hrhs-transition);
}
.hrhs-job-card:hover { box-shadow: var(--hrhs-shadow-md); border-color: rgba(74,144,217,0.25); }
.hrhs-job-card__title { font-weight: 600; font-size: 0.975rem; color: var(--hrhs-dark); margin-bottom: 5px; }
.hrhs-job-card__title a { color: var(--hrhs-dark); }
.hrhs-job-card__title a:hover { color: var(--hrhs-primary); text-decoration: none; }
.hrhs-job-card__meta  { font-size: 0.82rem; color: var(--hrhs-muted); line-height: 1.5; }
.hrhs-job-card__budget { font-size: 0.9rem; font-weight: 700; color: var(--hrhs-primary); margin-top: 4px; }
.hrhs-job-card__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ─── BID CARDS ───────────────────────────────────────────────── */
.hrhs-bid-card {
    border: 1.5px solid var(--hrhs-border);
    border-radius: var(--hrhs-radius-lg);
    padding: 22px; margin-bottom: 14px;
    background: var(--hrhs-white); transition: var(--hrhs-transition);
}
.hrhs-bid-card:hover { box-shadow: var(--hrhs-shadow); }
.hrhs-bid-card__provider { font-weight: 700; font-size: 1rem; color: var(--hrhs-dark); }
.hrhs-bid-card__provider a { color: var(--hrhs-primary); }
.hrhs-bid-card__meta { font-size: 0.83rem; color: var(--hrhs-muted); margin-top: 4px; }
.hrhs-bid-card__amount { font-size: 1.2rem; font-weight: 800; color: var(--hrhs-primary); margin-top: 8px; letter-spacing: -0.02em; }
.hrhs-bid-card__message { margin-top: 12px; font-size: 0.9rem; color: var(--hrhs-text); line-height: 1.6; border-top: 1px solid var(--hrhs-border); padding-top: 12px; }
.hrhs-bid-card__actions { margin-top: 16px; display: flex; gap: 10px; }

/* ─── JOBS TABLE ──────────────────────────────────────────────── */
.hrhs-jobs-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.hrhs-jobs-table th {
    text-align: left; font-size: 0.72rem; font-weight: 700;
    color: var(--hrhs-muted); text-transform: uppercase; letter-spacing: 0.06em;
    padding: 0 14px 12px; border-bottom: 2px solid var(--hrhs-border);
}
.hrhs-jobs-table td { padding: 13px 14px; border-bottom: 1px solid var(--hrhs-border); vertical-align: middle; }
.hrhs-jobs-table tr:last-child td { border-bottom: none; }
.hrhs-jobs-table tr:hover td { background: var(--hrhs-light-bg); }
.hrhs-jobs-table a { color: var(--hrhs-dark); font-weight: 600; }
.hrhs-jobs-table a:hover { color: var(--hrhs-primary); text-decoration: none; }

/* ─── AUTH PAGES ──────────────────────────────────────────────── */
.hrhs-auth-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--hrhs-dark) 0%, #0a3a55 100%);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.hrhs-auth-box {
    background: var(--hrhs-white); border-radius: var(--hrhs-radius-xl);
    box-shadow: var(--hrhs-shadow-lg); padding: 48px 44px; width: 100%; max-width: 480px;
}
.hrhs-auth-logo { text-align: center; margin-bottom: 32px; }
.hrhs-auth-logo .site-name { font-size: 1.4rem; font-weight: 800; color: var(--hrhs-dark); letter-spacing: -0.03em; }
.hrhs-auth-logo .site-name span { color: var(--hrhs-primary); }
.hrhs-auth-logo .tagline { font-size: 0.82rem; color: var(--hrhs-muted); margin-top: 3px; }
.hrhs-auth-title { font-size: 1.5rem; font-weight: 800; color: var(--hrhs-dark); margin-bottom: 6px; letter-spacing: -0.03em; }
.hrhs-auth-subtitle { font-size: 0.875rem; color: var(--hrhs-muted); margin-bottom: 28px; }
.hrhs-auth-links { margin-top: 22px; text-align: center; font-size: 0.875rem; color: var(--hrhs-muted); }
.hrhs-auth-links a { color: var(--hrhs-primary); font-weight: 600; }
.hrhs-auth-divider { text-align: center; color: var(--hrhs-muted); font-size: 0.8rem; margin: 16px 0; }

/* ─── ROLE CHOOSER ────────────────────────────────────────────── */
.hrhs-role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.hrhs-role-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 36px 20px;
    border: 2px solid var(--hrhs-border); border-radius: var(--hrhs-radius-lg);
    background: var(--hrhs-white); cursor: pointer; transition: var(--hrhs-transition);
    text-decoration: none; color: var(--hrhs-text);
}
.hrhs-role-card:hover {
    border-color: var(--hrhs-primary); background: var(--hrhs-primary-lt);
    box-shadow: 0 4px 20px rgba(74,144,217,0.20); text-decoration: none; color: var(--hrhs-dark);
    transform: translateY(-2px);
}
.hrhs-role-card__icon  { font-size: 3rem; }
.hrhs-role-card__label { font-weight: 800; font-size: 1.05rem; color: var(--hrhs-dark); }
.hrhs-role-card__desc  { font-size: 0.82rem; color: var(--hrhs-muted); text-align: center; }

/* ─── PROGRESS BAR ────────────────────────────────────────────── */
.hrhs-progress-bar-container { background: var(--hrhs-border); border-radius: 99px; height: 8px; overflow: hidden; }
.hrhs-progress-bar-fill {
    height: 100%; background: linear-gradient(90deg, var(--hrhs-primary), #6aadeb);
    border-radius: 99px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}

/* ─── COMPLETION WIDGET ───────────────────────────────────────── */
.hrhs-completion-widget { padding: 16px 20px; }
.hrhs-completion-widget__label {
    display: flex; justify-content: space-between;
    font-size: 0.85rem; font-weight: 600; color: var(--hrhs-dark); margin-bottom: 8px;
}
.hrhs-completion-widget__pct { color: var(--hrhs-primary); font-weight: 800; }

/* ─── PROFILE PUBLIC HERO ─────────────────────────────────────── */
.hrhs-public-cover {
    width: 100%; height: 220px; object-fit: cover;
    border-radius: var(--hrhs-radius-lg) var(--hrhs-radius-lg) 0 0;
}
.hrhs-public-cover-placeholder {
    width: 100%; height: 220px;
    background: linear-gradient(135deg, var(--hrhs-dark) 0%, #0d3a5a 60%, #083a5a 100%);
    border-radius: var(--hrhs-radius-lg) var(--hrhs-radius-lg) 0 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 3.5rem; color: rgba(255,255,255,0.12);
}
.hrhs-public-header {
    display: flex; gap: 20px; align-items: center;
    padding: 24px 32px 8px; margin-bottom: 8px; position: relative; z-index: 2;
}
.hrhs-public-logo {
    width: 80px; height: 80px; border-radius: 50%;
    border: 3px solid var(--hrhs-border); object-fit: cover;
    background: var(--hrhs-secondary); box-shadow: var(--hrhs-shadow-sm); flex-shrink: 0;
}
.hrhs-public-logo-placeholder {
    width: 80px; height: 80px; border-radius: 50%;
    border: 3px solid var(--hrhs-border); background: var(--hrhs-primary);
    color: var(--hrhs-white); display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 800; box-shadow: var(--hrhs-shadow-sm); flex-shrink: 0;
}
.hrhs-public-header__info { flex: 1; }
.hrhs-public-header__name { font-size: 1.6rem; font-weight: 800; color: var(--hrhs-dark); letter-spacing: -0.02em; line-height: 1.2; }
.hrhs-public-header__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: 0.85rem; color: var(--hrhs-muted); align-items: center; }

/* ─── AVAILABILITY INDICATORS ────────────────────────────────────── */
/* Directory card — open */
.hrhs-card-avail { padding: 0 16px 12px; min-height: 0; }
.hrhs-avail-open {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.78rem; font-weight: 600; color: #16A34A; line-height: 1.3;
}
.hrhs-avail-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #16A34A; flex-shrink: 0;
}
/* Directory card — closed */
.hrhs-avail-closed {
    display: inline-block;
    background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA;
    border-radius: 20px; padding: 2px 9px;
    font-size: 0.75rem; font-weight: 600; line-height: 1.5;
}
/* Profile page — open */
.hrhs-profile-avail { margin-top: 8px; }
.hrhs-profile-avail-open {
    display: inline-block;
    background: #DCFCE7; color: #15803D; border: 1px solid #BBF7D0;
    border-radius: 20px; padding: 3px 12px;
    font-size: 0.825rem; font-weight: 600; line-height: 1.6;
}
/* Profile page — closed */
.hrhs-profile-avail-closed {
    display: inline-block;
    background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA;
    border-radius: 20px; padding: 3px 12px;
    font-size: 0.825rem; font-weight: 600; line-height: 1.6;
}

/* Superseded — the stats now sit inside the hero card as a bordered-top row
 * rather than a detached box beneath it. The old rule survived the move and
 * kept winning on source order, which is why the strip still rendered as its
 * own card. */
.hrhs-hero-stat__num   { font-size: 1.5rem; font-weight: 800; color: var(--hrhs-dark); letter-spacing: -0.03em; line-height: 1.1; }
.hrhs-hero-stat__label { font-size: 0.72rem; color: var(--hrhs-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }

/* ─── REGION / CATEGORY CHIPS ─────────────────────────────────── */
.hrhs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hrhs-chip {
    font-size: 0.8rem; padding: 4px 12px;
    background: var(--hrhs-secondary); color: var(--hrhs-dark);
    border-radius: 99px; font-weight: 500;
}
.hrhs-chip--primary { background: var(--hrhs-primary-lt); color: var(--hrhs-primary); font-weight: 700; }

/* ─── BACK LINK ───────────────────────────────────────────────── */
.hrhs-back-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.875rem; color: var(--hrhs-muted); margin-bottom: 24px;
    transition: var(--hrhs-transition);
}
.hrhs-back-link:hover { color: var(--hrhs-primary); text-decoration: none; }

/* ─── SIDEBAR NAV ─────────────────────────────────────────────── */
.hrhs-sidebar-nav { list-style: none; padding: 6px 0; }
.hrhs-sidebar-nav li a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px; font-size: 0.9rem; font-weight: 500;
    color: var(--hrhs-text); transition: var(--hrhs-transition); text-decoration: none;
}
.hrhs-sidebar-nav li a:hover,
.hrhs-sidebar-nav li a.active {
    background: var(--hrhs-primary-lt); color: var(--hrhs-primary);
    border-left: 3px solid var(--hrhs-primary); padding-left: 17px;
}

/* ─── IMPERSONATE BAR ─────────────────────────────────────────── */
.hrhs-impersonate-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #1e293b;
    color: #fff;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 99999;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    box-shadow: 0 -2px 16px rgba(0,0,0,0.25);
    flex-wrap: wrap;
}
.hrhs-impersonate-bar__msg {
    color: rgba(255,255,255,0.80);
    line-height: 1.4;
}
.hrhs-impersonate-bar__msg strong {
    color: #fff;
    font-weight: 700;
}
.hrhs-impersonate-bar__btn {
    background: #4A90D9;
    color: #fff !important;
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none !important;
    transition: background 0.15s;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hrhs-impersonate-bar__btn:hover {
    background: #357ABD;
    text-decoration: none !important;
}

/* ─── JOB FORM — LAYOUT ──────────────────────────────────────── */
.hrhs-content--jobform { max-width: 800px; }

.hrhs-jobform-back {
    margin-bottom: 20px;
}
.hrhs-jobform-back a {
    font-size: 0.875rem; color: var(--hrhs-muted);
    transition: var(--hrhs-transition);
}
.hrhs-jobform-back a:hover { color: var(--hrhs-primary); text-decoration: none; }

/* ─── FORM SECTION CARDS ─────────────────────────────────────── */
.hrhs-form-section {
    background: var(--hrhs-white);
    border: 1px solid var(--hrhs-border);
    border-radius: var(--hrhs-radius-lg);
    box-shadow: var(--hrhs-shadow);
    margin-bottom: 16px;
    overflow: hidden;
}
.hrhs-form-section__head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--hrhs-border);
    font-size: 0.92rem; font-weight: 700; color: var(--hrhs-dark);
    background: #FAFBFC;
}
.hrhs-form-section__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--hrhs-primary); color: #fff;
    font-size: 0.75rem; font-weight: 800; flex-shrink: 0;
}
.hrhs-form-section__body { padding: 24px; }

/* ─── FORM HELPERS ───────────────────────────────────────────── */
.hrhs-field-hint {
    font-size: 0.8rem; color: var(--hrhs-muted);
    margin-top: -4px; margin-bottom: 8px; line-height: 1.5;
}
.hrhs-required { color: var(--hrhs-error); }
.hrhs-optional  { font-size: 0.8rem; color: var(--hrhs-muted); font-weight: 400; }
.hrhs-two-col {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}

/* ─── PILL TOGGLE CHECKBOXES / RADIOS ────────────────────────── */
.hrhs-pill-group {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.hrhs-pill-toggle {
    cursor: pointer; display: inline-flex; align-items: center; user-select: none;
}
.hrhs-pill-toggle input[type="checkbox"],
.hrhs-pill-toggle input[type="radio"] {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.hrhs-pill-toggle span {
    display: inline-block;
    padding: 7px 16px; border-radius: 99px;
    border: 1.5px solid var(--hrhs-border);
    font-size: 0.875rem; color: var(--hrhs-text);
    background: var(--hrhs-white); line-height: 1.3;
    transition: var(--hrhs-transition);
}
.hrhs-pill-toggle:has(input:checked) span {
    background: #E8F3FC; border-color: var(--hrhs-primary);
    color: var(--hrhs-primary); font-weight: 600;
}
.hrhs-pill-toggle span:hover { border-color: var(--hrhs-primary); }

/* ─── CATEGORY FIELD GROUPS ─────────────────────────────────── */
.hrhs-cat-field-group { margin-bottom: 20px; }
.hrhs-cat-field-label {
    display: block; font-size: 0.85rem; font-weight: 600;
    color: var(--hrhs-dark); margin-bottom: 10px;
    text-transform: none; letter-spacing: 0;
}

/* ─── BUDGET CARDS ───────────────────────────────────────────── */
.hrhs-budget-cards {
    display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px;
}
.hrhs-budget-card {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 18px 20px; border: 2px solid var(--hrhs-border);
    border-radius: var(--hrhs-radius-lg); cursor: pointer;
    transition: var(--hrhs-transition); background: var(--hrhs-white);
}
.hrhs-budget-card:has(input:checked) {
    border-color: var(--hrhs-primary); background: var(--hrhs-primary-lt);
}
.hrhs-budget-card input[type="radio"] {
    margin-top: 3px; accent-color: var(--hrhs-primary); flex-shrink: 0;
}
.hrhs-budget-card__inner { flex: 1; }
.hrhs-budget-card__title {
    font-weight: 700; font-size: 0.95rem; color: var(--hrhs-dark); line-height: 1.3;
}
.hrhs-budget-card__desc {
    font-size: 0.82rem; color: var(--hrhs-muted); margin-top: 3px;
}

/* ─── PHOTO UPLOAD ───────────────────────────────────────────── */
.hrhs-photo-upload-area {
    position: relative; border: 2px dashed var(--hrhs-border);
    border-radius: var(--hrhs-radius-lg); padding: 32px 24px;
    text-align: center; cursor: pointer; transition: var(--hrhs-transition);
    background: var(--hrhs-light-bg);
}
.hrhs-photo-upload-area:hover { border-color: var(--hrhs-primary); background: var(--hrhs-primary-lt); }
.hrhs-photo-upload-icon { font-size: 2rem; margin-bottom: 8px; }
.hrhs-photo-upload-label { font-size: 0.9rem; font-weight: 600; color: var(--hrhs-dark); margin-bottom: 4px; }
.hrhs-photo-upload-hint  { font-size: 0.78rem; color: var(--hrhs-muted); }
.hrhs-photo-input {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.hrhs-photo-error {
    margin-top: 10px; padding: 10px 14px;
    background: #fdf0ef; border: 1px solid #f5c6c5; border-radius: var(--hrhs-radius);
    font-size: 0.85rem; color: #8b2021;
}
.hrhs-photo-preview-grid {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px;
}
.hrhs-photo-thumb {
    position: relative; width: 90px; height: 90px; border-radius: var(--hrhs-radius);
    overflow: hidden; border: 2px solid var(--hrhs-border);
    flex-shrink: 0;
}
.hrhs-photo-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.hrhs-photo-thumb__rm {
    position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
    border-radius: 50%; background: rgba(0,0,0,0.65); color: #fff;
    border: none; cursor: pointer; font-size: 0.6rem; display: flex;
    align-items: center; justify-content: center; line-height: 1;
}
.hrhs-photo-thumb--existing { border-color: var(--hrhs-primary); }

/* ─── JOB SUMMARY BOX ────────────────────────────────────────── */
.hrhs-job-summary {
    border: 1.5px solid var(--hrhs-border); border-radius: var(--hrhs-radius-lg);
    overflow: hidden;
}
.hrhs-job-summary__label {
    background: var(--hrhs-light-bg); padding: 10px 16px;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--hrhs-muted);
    border-bottom: 1px solid var(--hrhs-border);
}
.hrhs-job-summary__row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 16px; border-bottom: 1px solid var(--hrhs-border);
    font-size: 0.9rem;
}
.hrhs-job-summary__row:last-child { border-bottom: none; }
.hrhs-job-summary__key { color: var(--hrhs-muted); font-size: 0.82rem; }
.hrhs-job-summary__val { font-weight: 600; color: var(--hrhs-dark); text-align: right; max-width: 60%; }

/* ─── PROVIDER: JOB META TABLE ───────────────────────────────── */
.hrhs-job-meta-table { display: flex; flex-direction: column; gap: 8px; }
.hrhs-job-meta-row {
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 0.875rem; padding: 8px 12px;
    background: var(--hrhs-light-bg); border-radius: var(--hrhs-radius);
}
.hrhs-job-meta-label {
    font-weight: 600; color: var(--hrhs-dark); min-width: 180px; flex-shrink: 0;
}
.hrhs-job-meta-val { color: var(--hrhs-text); flex: 1; }

/* ─── PROVIDER: JOB PHOTO GRID ───────────────────────────────── */
.hrhs-job-photo-grid {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.hrhs-job-photo-link {
    display: block; width: 100px; height: 100px;
    border-radius: var(--hrhs-radius); overflow: hidden;
    border: 1.5px solid var(--hrhs-border); transition: var(--hrhs-transition);
}
.hrhs-job-photo-link:hover { border-color: var(--hrhs-primary); transform: scale(1.04); }
.hrhs-job-photo-link img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─── FOOTER ──────────────────────────────────────────────────── */
.hrhs-footer {
    background: var(--hrhs-dark); color: rgba(255,255,255,0.45);
    text-align: center; padding: 22px 24px; font-size: 0.8rem; margin-top: auto;
}
.hrhs-footer a { color: rgba(255,255,255,0.65); }

/* ─── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hrhs-nav { padding: 0 16px; height: 60px; }
    .hrhs-nav__welcome { display: none; }
    .hrhs-content { padding: 24px 16px; }
    .hrhs-dash-banner { padding: 24px 20px; }
    .hrhs-dash-banner__greeting { font-size: 1.3rem; }
    .hrhs-auth-box { padding: 32px 20px; }
    .hrhs-role-grid { grid-template-columns: 1fr; }
    .hrhs-directory-grid { grid-template-columns: 1fr; }
    .hrhs-job-card { flex-direction: column; align-items: flex-start; }
    .hrhs-hero-stat { border-right: none; border-bottom: 1px solid var(--hrhs-border); }
    .hrhs-hero-stat:last-child { border-bottom: none; }
    .hrhs-public-header { flex-direction: row; align-items: center; padding: 16px 16px 8px; gap: 14px; }
    .hrhs-public-header__name { font-size: 1.25rem; }
    .hrhs-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .hrhs-quick-actions { flex-direction: column; }
    .hrhs-filter-bar { flex-direction: column; }

    /* ── Job form ── */
    .hrhs-form-section__body { padding: 16px; }
    .hrhs-form-section__head { padding: 14px 16px; }
    .hrhs-two-col { grid-template-columns: 1fr; }
    .hrhs-budget-cards { gap: 8px; }
    .hrhs-job-meta-row { flex-direction: column; gap: 2px; }
    .hrhs-job-meta-label { min-width: unset; }
    .hrhs-btn--submit-job { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .hrhs-page-title { font-size: 1.5rem; }
    .hrhs-dash-banner__stat-row { gap: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGING — NAV BADGE
═══════════════════════════════════════════════════════════════ */

.hrhs-nav__messages-link {
    position: relative;
}

.hrhs-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    background: var(--hrhs-danger, #e53e3e);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 4px;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGING — INBOX LIST
═══════════════════════════════════════════════════════════════ */

.hrhs-inbox-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--hrhs-border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.hrhs-inbox-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--hrhs-border);
    transition: background 0.15s;
}
.hrhs-inbox-item:last-child { border-bottom: none; }
.hrhs-inbox-item:hover { background: var(--hrhs-light-bg); }
.hrhs-inbox-item--unread { background: #f0f5ff; }
.hrhs-inbox-item--unread:hover { background: #e8efff; }

.hrhs-inbox-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--hrhs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.hrhs-inbox-item__body {
    flex: 1;
    min-width: 0;
}

.hrhs-inbox-item__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.hrhs-inbox-item__name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--hrhs-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hrhs-inbox-item__time {
    font-size: 0.75rem;
    color: var(--hrhs-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.hrhs-inbox-item__job {
    font-size: 0.75rem;
    color: var(--hrhs-primary);
    font-weight: 600;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hrhs-inbox-item__preview {
    font-size: 0.84rem;
    color: var(--hrhs-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hrhs-inbox-badge {
    min-width: 20px;
    height: 20px;
    border-radius: 99px;
    background: var(--hrhs-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGING — THREAD VIEW
═══════════════════════════════════════════════════════════════ */

.hrhs-content--thread {
    padding-bottom: 0 !important;
}

.hrhs-thread-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0 12px;
    border-bottom: 1px solid var(--hrhs-border);
    margin-bottom: 0;
    background: var(--hrhs-light-bg);
    position: sticky;
    top: 64px;
    z-index: 10;
}

.hrhs-thread-back {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hrhs-primary);
    text-decoration: none;
    white-space: nowrap;
}
.hrhs-thread-back:hover { text-decoration: underline; }

.hrhs-thread-header__info { flex: 1; min-width: 0; }

.hrhs-thread-header__name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--hrhs-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hrhs-thread-header__job {
    font-size: 0.78rem;
    color: var(--hrhs-primary);
    font-weight: 600;
    margin-top: 2px;
}
.hrhs-thread-header__job a { color: inherit; text-decoration: none; }
.hrhs-thread-header__job a:hover { text-decoration: underline; }

.hrhs-chat-bubbles {
    flex: 1;
    overflow-y: auto;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 200px;
    max-height: calc(100vh - 280px);
}

.hrhs-chat-empty {
    text-align: center;
    color: var(--hrhs-muted);
    font-size: 0.9rem;
    padding: 40px 20px;
}

.hrhs-bubble-wrap {
    display: flex;
    flex-direction: column;
    max-width: 70%;
}
.hrhs-bubble-wrap--sent  { align-self: flex-end; align-items: flex-end; }
.hrhs-bubble-wrap--received { align-self: flex-start; align-items: flex-start; }

.hrhs-bubble {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 0.92rem;
    line-height: 1.55;
    word-wrap: break-word;
}
.hrhs-bubble--sent {
    background: var(--hrhs-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.hrhs-bubble--received {
    background: #eef2f7;
    color: var(--hrhs-dark);
    border-bottom-left-radius: 4px;
}

.hrhs-bubble-time {
    font-size: 0.7rem;
    color: var(--hrhs-muted);
    margin-top: 4px;
    padding: 0 4px;
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGING — COMPOSE AREA
═══════════════════════════════════════════════════════════════ */

.hrhs-chat-compose {
    border-top: 1px solid var(--hrhs-border);
    padding: 14px 0 20px;
    background: #fff;
    position: sticky;
    bottom: 0;
}

.hrhs-chat-compose--disabled {
    border-top: 1px solid var(--hrhs-border);
    padding: 14px 0;
    color: var(--hrhs-muted);
    font-size: 0.875rem;
    text-align: center;
}

.hrhs-chat-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1.5px solid var(--hrhs-border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.92rem;
    resize: none;
    line-height: 1.5;
    transition: border-color 0.2s;
    background: #fff;
    color: var(--hrhs-dark);
}
.hrhs-chat-input:focus {
    outline: none;
    border-color: var(--hrhs-primary);
    box-shadow: 0 0 0 3px rgba(74,144,217,0.12);
}

.hrhs-compose-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.hrhs-compose-error {
    font-size: 0.82rem;
    color: var(--hrhs-danger, #e53e3e);
    flex: 1;
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGING — START CONVERSATION MODAL
═══════════════════════════════════════════════════════════════ */

.hrhs-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.hrhs-modal-box {
    background: #fff;
    border-radius: 14px;
    padding: 28px 32px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    position: relative;
}

.hrhs-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--hrhs-dark);
}

.hrhs-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--hrhs-muted);
    line-height: 1;
    padding: 0 4px;
}
.hrhs-modal-close:hover { color: var(--hrhs-dark); }

.hrhs-modal-sub {
    font-size: 0.85rem;
    color: var(--hrhs-muted);
    margin: 0 0 14px;
}

@media (max-width: 600px) {
    .hrhs-bubble-wrap { max-width: 85%; }
    .hrhs-thread-header { top: 56px; }
    .hrhs-chat-bubbles { max-height: calc(100vh - 300px); }
    .hrhs-modal-box { padding: 20px 18px; }
    .hrhs-inbox-item { padding: 14px 16px; gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGING — FILE ATTACHMENTS
═══════════════════════════════════════════════════════════════ */

.hrhs-compose-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.hrhs-attach-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--hrhs-border);
    background: var(--hrhs-white);
    color: var(--hrhs-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--hrhs-transition);
    margin-bottom: 1px;
}
.hrhs-attach-btn:hover {
    border-color: var(--hrhs-primary);
    color: var(--hrhs-primary);
    background: var(--hrhs-primary-lt);
}

.hrhs-file-preview-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0 6px;
}

.hrhs-preview-thumb-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: visible;
    flex-shrink: 0;
}

.hrhs-preview-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 1.5px solid var(--hrhs-border);
    display: block;
}

.hrhs-preview-thumb-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e53e3e;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-weight: 700;
}
.hrhs-preview-thumb-remove:hover { background: #c53030; }

.hrhs-bubble-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.hrhs-att-thumb-link {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    border: 1.5px solid rgba(255,255,255,0.25);
    cursor: zoom-in;
    transition: opacity 0.15s;
}
.hrhs-att-thumb-link:hover { opacity: 0.85; }

.hrhs-att-thumb {
    width: 120px;
    height: 90px;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGING — LIGHTBOX
═══════════════════════════════════════════════════════════════ */

.hrhs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hrhs-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.82);
    cursor: pointer;
}

.hrhs-lightbox-close {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 2;
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(255,255,255,0.25);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s;
}
.hrhs-lightbox-close:hover { background: rgba(255,255,255,0.25); }

.hrhs-lightbox-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
}

.hrhs-lightbox-img {
    max-width: 90vw;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    display: block;
}

.hrhs-lightbox-caption {
    color: rgba(255,255,255,0.65);
    font-size: 0.8rem;
    margin-top: 10px;
    text-align: center;
    max-width: 80vw;
    word-break: break-all;
}

/* ── Trust Badges ─────────────────────────────────────────── */
.hrhs-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.hrhs-trust-badges--compact {
    gap: 4px;
    margin-top: 6px;
    margin-bottom: 2px;
}
.hrhs-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1.5px solid var(--hrhs-primary);
    color: var(--hrhs-primary);
    background: transparent;
    white-space: nowrap;
    cursor: default;
}
.hrhs-trust-badge--verified {
    background: var(--hrhs-primary);
    color: var(--hrhs-white);
    border-color: var(--hrhs-primary);
}
.hrhs-trust-badges--compact .hrhs-trust-badge {
    font-size: 0.68rem;
    padding: 2px 8px;
}
.hrhs-trust-badges--compact .hrhs-trust-badge--verified {
    background: var(--hrhs-primary-dk);
    border-color: var(--hrhs-primary-dk);
}

/* ── Click-to-reveal contact info ─────────────────────────── */
.hrhs-reveal-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.hrhs-reveal-btn {
    background: var(--hrhs-primary-lt);
    color: var(--hrhs-primary);
    border: 1.5px solid var(--hrhs-primary);
    border-radius: 20px;
    padding: 2px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.hrhs-reveal-btn:hover {
    background: var(--hrhs-primary);
    color: #fff;
}
.hrhs-reveal-link {
    color: var(--hrhs-primary);
    text-decoration: none;
    font-size: 0.875rem;
}
.hrhs-reveal-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   EMBEDDED MODE — marketplace rendered inside a WordPress page
   The theme owns <html>, <body>, header and footer here, so these
   rules undo the full-screen assumptions the standalone layout makes.
═══════════════════════════════════════════════════════════════ */
.hrhs-page--embedded {
    min-height: 0;
    background: transparent;
}
.hrhs-page--embedded .hrhs-content {
    /* The theme's own container already supplies outer gutters. */
    padding-left: 0;
    padding-right: 0;
}
.hrhs-embedded-scope {
    /* Auth and pricing screens center themselves against the viewport when
       standalone; inside a page they should sit in normal flow. */
    display: block;
}
.hrhs-embedded-scope .hrhs-auth-page,
.hrhs-embedded-scope .hrhs-paywall-wrap {
    min-height: 0;
    padding: 0;
    background: transparent;
}
/* The marketplace nav is sticky at the top of the viewport when standalone.
   Inside a theme it would overlap a sticky site header, so it scrolls. */
.hrhs-page--embedded .hrhs-nav {
    position: static;
    border-radius: var(--hrhs-radius-lg);
    margin-bottom: 20px;
}
/* Themes commonly set a max-width on page content; make sure marketplace
   grids can still use the full width they are given. */
.hrhs-marketplace-page .hrhs-page--embedded { width: 100%; }

/* ─── Motion preference ──────────────────────────────────────────
   Honor the OS-level "reduce motion" setting. Vestibular disorders
   make transforms and animation genuinely uncomfortable, and this is
   a system preference the user has already expressed. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── Dual-account banner ────────────────────────────────────────
   Deliberately quiet. Holding both account types is a real feature
   but a minority case, so it sits below profile settings rather
   than competing with the primary actions on a dashboard. */
.hrhs-dual {
    background: var(--hrhs-white);
    border: 1px solid var(--hrhs-border);
    border-left: 3px solid var(--hrhs-primary);
    border-radius: var(--hrhs-radius-lg);
    padding: 20px 22px;
    margin-top: 22px;
}
.hrhs-dual__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}
.hrhs-dual__eyebrow {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hrhs-primary);
    margin-bottom: 5px;
}
.hrhs-dual__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hrhs-dark);
    margin-bottom: 5px;
}
.hrhs-dual__text {
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--hrhs-muted);
    margin: 0;
    max-width: 62ch;
}
.hrhs-dual__cta { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 400px) {
    /* Reclaim gutter width on the smallest phones still in common use. */
    .hrhs-content { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 640px) {
    .hrhs-dual__inner { flex-direction: column; align-items: stretch; }
    .hrhs-dual__cta { width: 100%; text-align: center; }
}

/* ─── Profile photo field ────────────────────────────────────── */
.hrhs-avatar-field {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: #FAFBFD;
    border: 1px solid var(--hrhs-border);
    border-radius: var(--hrhs-radius-lg);
    padding: 18px;
    margin-bottom: 20px;
}
.hrhs-avatar-field__preview { flex-shrink: 0; }
.hrhs-avatar-field__preview img {
    width: 88px; height: 88px; border-radius: 50%;
    object-fit: cover; border: 3px solid var(--hrhs-white);
    box-shadow: 0 2px 10px rgba(3,35,51,.12); background: var(--hrhs-light-bg);
}
.hrhs-avatar-field__body { flex: 1; min-width: 0; }
.hrhs-avatar-field__label {
    display: block; font-size: 0.9rem; font-weight: 700; color: var(--hrhs-dark);
}
.hrhs-avatar-field__actions {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px;
}
/* Visually hidden but still reachable by keyboard and screen readers —
   display:none would remove it from the tab order entirely. */
.hrhs-avatar-field__input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hrhs-avatar-field__input:focus-visible + .hrhs-avatar-field__remove,
.hrhs-avatar-field__input:focus-visible {
    outline: 2px solid var(--hrhs-primary); outline-offset: 2px;
}
.hrhs-avatar-field__remove {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.83rem; color: var(--hrhs-muted); cursor: pointer;
}
.hrhs-avatar-field__remove input { width: 15px; height: 15px; accent-color: var(--hrhs-error); }
.hrhs-avatar-field__note { margin-top: 10px; }
.hrhs-avatar-field__error {
    margin-top: 10px; font-size: 0.83rem; color: var(--hrhs-error); font-weight: 600;
}
@media (max-width: 560px) {
    .hrhs-avatar-field { flex-direction: column; align-items: center; text-align: center; }
    .hrhs-avatar-field__actions { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   PRO PLAN — sales page
═══════════════════════════════════════════════════════════════ */
/* Was 1000px — narrower than the 1280px default it is supposed to widen, so
 * every template asking for a wide layout got a *narrower* one. Now the full
 * width with the gutter trimmed, which is what the callers wanted. */
.hrhs-content--wide { max-width: 1280px; padding-left: 20px; padding-right: 20px; }

.hrhs-pro__hero {
    text-align: center;
    background: var(--hrhs-white);
    border: 1px solid var(--hrhs-border);
    border-radius: var(--hrhs-radius-xl);
    padding: 48px 32px 40px;
    margin-bottom: 22px;
    box-shadow: var(--hrhs-shadow);
}
.hrhs-pro__badge {
    display: inline-block;
    background: #E6FFF4; color: #0d6e3a;
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    border-radius: 999px; padding: 6px 16px; margin-bottom: 18px;
}
.hrhs-pro__badge.is-active { background: var(--hrhs-primary-lt); color: var(--hrhs-primary); }
.hrhs-pro__h1 {
    font-size: 2.3rem; font-weight: 800; letter-spacing: -0.035em;
    color: var(--hrhs-dark); line-height: 1.15; margin: 0 0 12px;
}
.hrhs-pro__lede {
    font-size: 1.05rem; line-height: 1.65; color: var(--hrhs-muted);
    max-width: 58ch; margin: 0 auto 24px;
}
.hrhs-pro__price { margin: 6px 0 4px; }
.hrhs-pro__price .amt {
    font-size: 4rem; font-weight: 800; color: var(--hrhs-dark);
    letter-spacing: -0.05em; line-height: 1;
}
.hrhs-pro__price .per { font-size: 1.05rem; font-weight: 600; color: var(--hrhs-muted); }
.hrhs-pro__anchor { font-size: 0.9rem; color: var(--hrhs-muted); margin: 0 0 22px; }
.hrhs-pro__anchor s { color: #94A3B8; }
.hrhs-pro__cta { font-size: 1rem; padding: 15px 40px; }
.hrhs-pro__fine { font-size: 0.82rem; color: var(--hrhs-muted); margin: 16px 0 0; }
.hrhs-pro__lock {
    background: #F0FFF8; border: 1px solid #A7F3D0; border-radius: var(--hrhs-radius);
    padding: 13px 18px; font-size: 0.88rem; color: #065F46; line-height: 1.6;
    max-width: 60ch; margin: 0 auto 22px;
}
.hrhs-pro__lockbar {
    background: #F0FFF8; border: 1px solid #A7F3D0; border-radius: var(--hrhs-radius-lg);
    padding: 18px 22px; font-size: 0.9rem; color: #065F46; line-height: 1.7;
    margin-bottom: 30px;
}

.hrhs-pro__section { margin-bottom: 40px; }
.hrhs-pro__h2 {
    font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em;
    color: var(--hrhs-dark); margin: 0 0 18px;
}

/* comparison table */
.hrhs-pro__tablewrap {
    background: var(--hrhs-white); border: 1px solid var(--hrhs-border);
    border-radius: var(--hrhs-radius-lg); overflow-x: auto;
}
.hrhs-pro__table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 520px; }
.hrhs-pro__table th, .hrhs-pro__table td {
    padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--hrhs-border);
}
.hrhs-pro__table thead th {
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--hrhs-muted); background: #FAFBFD;
}
.hrhs-pro__table thead th.is-pro { color: #0d6e3a; background: #F0FFF8; text-transform: none;
    font-size: 0.85rem; letter-spacing: 0; }
.hrhs-pro__table tbody th { font-weight: 600; color: var(--hrhs-dark); width: 42%; }
.hrhs-pro__table tbody td { color: var(--hrhs-muted); }
.hrhs-pro__table tbody td.is-pro { color: var(--hrhs-dark); font-weight: 700; background: #F7FFFB; }
.hrhs-pro__table tbody tr:last-child th,
.hrhs-pro__table tbody tr:last-child td { border-bottom: 0; }

/* benefits */
.hrhs-pro__benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hrhs-pro__benefit {
    background: var(--hrhs-white); border: 1px solid var(--hrhs-border);
    border-radius: var(--hrhs-radius-lg); padding: 22px 24px;
}
.hrhs-pro__benefit h3 {
    font-size: 1rem; font-weight: 700; color: var(--hrhs-dark); margin: 0 0 8px;
}
.hrhs-pro__benefit p { font-size: 0.88rem; line-height: 1.7; color: var(--hrhs-muted); margin: 0; }

/* faq */
.hrhs-pro__faqs {
    background: var(--hrhs-white); border: 1px solid var(--hrhs-border);
    border-radius: var(--hrhs-radius-lg); overflow: hidden;
}
.hrhs-pro__faq { border-bottom: 1px solid var(--hrhs-border); }
.hrhs-pro__faq:last-child { border-bottom: 0; }
.hrhs-pro__faq summary {
    cursor: pointer; padding: 16px 22px; font-size: 0.93rem; font-weight: 600;
    color: var(--hrhs-dark); list-style: none;
}
.hrhs-pro__faq summary::-webkit-details-marker { display: none; }
.hrhs-pro__faq summary::after { content: '+'; float: right; color: var(--hrhs-muted); font-weight: 400; }
.hrhs-pro__faq[open] summary::after { content: '\2212'; }
.hrhs-pro__faq p {
    padding: 0 22px 18px; margin: 0; font-size: 0.88rem;
    line-height: 1.7; color: var(--hrhs-muted); max-width: 74ch;
}

.hrhs-pro__close {
    text-align: center; background: var(--hrhs-dark); color: var(--hrhs-white);
    border-radius: var(--hrhs-radius-xl); padding: 44px 32px;
}
.hrhs-pro__close .hrhs-pro__h2 { color: var(--hrhs-white); }
.hrhs-pro__close .hrhs-pro__lede { color: rgba(255,255,255,.75); }

@media (max-width: 760px) {
    .hrhs-pro__hero { padding: 34px 20px 30px; }
    .hrhs-pro__h1 { font-size: 1.7rem; }
    .hrhs-pro__price .amt { font-size: 3rem; }
    .hrhs-pro__benefits { grid-template-columns: 1fr; }
    .hrhs-pro__cta { width: 100%; }
}

/* ─── Pro upsell banner ──────────────────────────────────────── */
.hrhs-upsell {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    background: linear-gradient(135deg, #F0FFF8 0%, #FFFFFF 70%);
    border: 1px solid #A7F3D0;
    border-radius: var(--hrhs-radius-lg);
    padding: 18px 22px;
    margin-bottom: 22px;
}
.hrhs-upsell.is-urgent { background: linear-gradient(135deg, #FFFBEB 0%, #FFFFFF 70%); border-color: #F0E0A8; }
.hrhs-upsell__head { font-size: 0.95rem; font-weight: 700; color: var(--hrhs-dark); margin-bottom: 4px; }
.hrhs-upsell__text { font-size: 0.86rem; line-height: 1.6; color: var(--hrhs-muted); margin: 0; max-width: 66ch; }
.hrhs-upsell__cta { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 640px) {
    .hrhs-upsell { flex-direction: column; align-items: stretch; }
    .hrhs-upsell__cta { width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   LOCKED CONTACT PANEL
   Three gray bars read as a loading skeleton, not as something
   deliberately withheld. This shows the real field labels with an
   obscured value behind a hatched overlay, so the state is legible
   at a glance: there IS something here, and it is locked.
═══════════════════════════════════════════════════════════════ */
.hrhs-locked {
    position: relative;
    border: 1px solid var(--hrhs-border);
    border-radius: var(--hrhs-radius);
    background:
        repeating-linear-gradient(
            45deg,
            rgba(148,163,184,.07) 0px,
            rgba(148,163,184,.07) 6px,
            transparent 6px,
            transparent 12px
        ),
        var(--hrhs-light-bg, #F4F6F9);
    padding: 14px 16px;
    margin-top: 6px;
    overflow: hidden;
}
.hrhs-locked__rows { display: flex; flex-direction: column; gap: 9px; }
.hrhs-locked__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 0.85rem;
}
.hrhs-locked__label {
    flex-shrink: 0;
    width: 62px;
    font-weight: 600;
    color: var(--hrhs-muted);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.hrhs-locked__value {
    color: #94A3B8;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.04em;
    user-select: none;
}
.hrhs-locked__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--hrhs-white);
    border: 1px solid var(--hrhs-border);
    color: var(--hrhs-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 4px 10px;
}

/* ─── System notice ──────────────────────────────────────────
   A persistent, explanatory panel — distinct from .hrhs-alert,
   which is one-line transient form feedback.

   Color carries meaning and nothing else does, so the variant is
   never a decorative choice:
     success  green   — something completed
     warning  yellow  — a condition to be aware of, nothing broken
     error    red     — something failed or is blocked
     info     blue    — neutral context

   The icon is filled rather than outlined so the type is legible
   at a glance without reading the text. */
.hrhs-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--hrhs-border);
    border-left: 4px solid var(--hrhs-muted);
    background: var(--hrhs-light-bg, #F4F6F9);
    border-radius: var(--hrhs-radius);
    padding: 14px 16px;
    margin-top: 14px;
}
.hrhs-notice__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--hrhs-muted);
    margin-top: 1px;
}
.hrhs-notice__body { min-width: 0; }
.hrhs-notice__title {
    margin: 0 0 4px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--hrhs-dark);
}
.hrhs-notice__body p {
    margin: 0 0 7px;
    font-size: 0.83rem;
    line-height: 1.6;
    color: var(--hrhs-text);
}
.hrhs-notice__body p:last-child { margin-bottom: 0; }
.hrhs-notice__muted { color: var(--hrhs-muted) !important; font-size: 0.78rem !important; }

/* Success — green */
.hrhs-notice--success {
    background: #EAFBF1;
    border-color: #A7E9C4;
    border-left-color: #16A34A;
}
.hrhs-notice--success .hrhs-notice__icon { background: #16A34A; }

/* Warning / notice — yellow */
.hrhs-notice--warning {
    background: #FEF9E7;
    border-color: #F5DF9B;
    border-left-color: #D99A0B;
}
.hrhs-notice--warning .hrhs-notice__icon { background: #D99A0B; }
.hrhs-notice--warning .hrhs-notice__title { color: #7A4E02; }

/* Error — red */
.hrhs-notice--error {
    background: #FDEEEF;
    border-color: #F3B7BB;
    border-left-color: #DC2626;
}
.hrhs-notice--error .hrhs-notice__icon { background: #DC2626; }
.hrhs-notice--error .hrhs-notice__title { color: #8B2021; }

/* Info — blue */
.hrhs-notice--info {
    background: #F1F7FD;
    border-color: #BFDBFE;
    border-left-color: var(--hrhs-primary, #4A90D9);
}
.hrhs-notice--info .hrhs-notice__icon { background: var(--hrhs-primary, #4A90D9); }

/* Optional dismiss control */
.hrhs-notice__close {
    margin-left: auto;
    background: none;
    border: 0;
    color: var(--hrhs-muted);
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    flex-shrink: 0;
}
.hrhs-notice__close:hover { color: var(--hrhs-dark); }

@media (max-width: 560px) {
    .hrhs-locked__row { flex-direction: column; gap: 2px; }
    .hrhs-locked__label { width: auto; }
    .hrhs-locked__badge { position: static; margin-bottom: 10px; }
}

/* ─── Reveal button + revealed state ─────────────────────────── */
.hrhs-locked.is-revealable { padding-bottom: 12px; }
.hrhs-locked__reveal {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    background: var(--hrhs-white);
    border: 1px solid var(--hrhs-primary, #4A90D9);
    color: var(--hrhs-primary, #4A90D9);
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.hrhs-locked__reveal:hover:not(:disabled) { background: var(--hrhs-primary, #4A90D9); color: #fff; }
.hrhs-locked__reveal:disabled { opacity: .6; cursor: default; }
.hrhs-locked.is-revealed {
    background: var(--hrhs-white);
    border-color: var(--hrhs-border);
}
.hrhs-locked__revealed {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--hrhs-dark);
    text-decoration: none;
    word-break: break-word;
}
.hrhs-locked__revealed:hover { text-decoration: underline; }

/* ─── Messaging call to action ───────────────────────────────
   The primary path, so it is presented as a feature rather than
   a fallback for people who could not get a phone number. */
.hrhs-msgcta {
    background: linear-gradient(160deg, #F0F7FF 0%, #FFFFFF 65%);
    border: 1px solid #BFDBFE;
    border-radius: var(--hrhs-radius-lg);
    padding: 20px 22px;
    margin-top: 18px;
}
.hrhs-msgcta__head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.hrhs-msgcta__icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--hrhs-primary, #4A90D9);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.hrhs-msgcta__title { margin: 0; font-size: 1rem; font-weight: 800; color: var(--hrhs-dark); letter-spacing: -.01em; }
.hrhs-msgcta__sub { margin: 3px 0 0; font-size: 0.83rem; color: var(--hrhs-muted); }
.hrhs-msgcta__list { list-style: none; margin: 0 0 18px; padding: 0; }
.hrhs-msgcta__list li {
    position: relative;
    padding-left: 24px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--hrhs-text);
    margin-bottom: 8px;
}
.hrhs-msgcta__list li::before {
    content: '';
    position: absolute;
    left: 4px; top: 6px;
    width: 6px; height: 10px;
    border: solid var(--hrhs-success, #16A34A);
    border-width: 0 2px 2px 0;
    transform: rotate(42deg);
}
.hrhs-msgcta__btn { width: 100%; justify-content: center; }
.hrhs-msgcta__note { margin: 10px 0 0; font-size: 0.78rem; color: var(--hrhs-muted); text-align: center; }

/* ─── Lightbox: split view ───────────────────────────────────
   Image left, its context right — the caption and, for review
   photos, who left it and what they said. Opening the raw file in
   a new tab threw all of that away. */
.hrhs-lightbox { display: none; }
.hrhs-lightbox.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: 32px;
}
.hrhs-lightbox-backdrop { position: absolute; inset: 0; background: rgba(3,35,51,.92); }
.hrhs-lightbox-close {
    position: absolute; top: 18px; right: 22px; z-index: 2;
    background: rgba(255,255,255,.14); color: #fff; border: 0;
    width: 40px; height: 40px; border-radius: 50%;
    font-size: 26px; line-height: 1; cursor: pointer;
}
.hrhs-lightbox-close:hover { background: rgba(255,255,255,.28); }
.hrhs-lightbox-content {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: minmax(0,1fr) 320px;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    max-width: 1100px;
    width: 100%;
    max-height: 86vh;
}
.hrhs-lb-figure { background: #0b1b26; display: flex; align-items: center; justify-content: center; min-height: 0; }
.hrhs-lightbox-img { max-width: 100%; max-height: 86vh; object-fit: contain; display: block; }
.hrhs-lb-panel { padding: 26px 24px; overflow-y: auto; display: flex; flex-direction: column; }
.hrhs-lb-kind {
    font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--hrhs-muted); margin-bottom: 10px;
}
.hrhs-lb-kind.is-review { color: var(--hrhs-primary); }
.hrhs-lb-caption { font-size: .95rem; line-height: 1.6; color: var(--hrhs-dark); font-weight: 600; margin: 0 0 16px; }
.hrhs-lb-review { border-top: 1px solid var(--hrhs-border); padding-top: 16px; }
.hrhs-lb-stars { color: #F5A623; font-size: 1rem; letter-spacing: 2px; margin-bottom: 6px; }
.hrhs-lb-author { font-size: .85rem; font-weight: 700; color: var(--hrhs-dark); margin-bottom: 6px; }
.hrhs-lb-text { font-size: .86rem; line-height: 1.7; color: var(--hrhs-text); margin: 0; }
.hrhs-lb-count { margin-top: auto; padding-top: 18px; font-size: .78rem; color: var(--hrhs-muted); }
.hrhs-lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    background: rgba(255,255,255,.14); color: #fff; border: 0;
    width: 46px; height: 46px; border-radius: 50%;
    font-size: 30px; line-height: 1; cursor: pointer;
}
.hrhs-lb-nav:hover { background: rgba(255,255,255,.28); }
.hrhs-lb-prev { left: 20px; }
.hrhs-lb-next { right: 20px; }

@media (max-width: 860px) {
    .hrhs-lightbox.is-open { padding: 0; }
    .hrhs-lightbox-content { grid-template-columns: 1fr; max-height: 100vh; border-radius: 0; }
    .hrhs-lightbox-img { max-height: 52vh; }
    .hrhs-lb-panel { padding: 18px 20px 28px; }
    .hrhs-lb-nav { width: 38px; height: 38px; font-size: 24px; }
    .hrhs-lb-prev { left: 8px; } .hrhs-lb-next { right: 8px; }
}

/* Visually hidden, still announced. */
.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;
}

/* ═══════════════════════════════════════════════════════════════
   DIRECTORY: toolbar, featured strip, badges, list view
═══════════════════════════════════════════════════════════════ */
.hrhs-dir-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.hrhs-viewtoggle { display: inline-flex; border: 1px solid var(--hrhs-border); border-radius: 8px; overflow: hidden; background: var(--hrhs-white); }
.hrhs-viewtoggle__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 32px; color: var(--hrhs-muted); text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.hrhs-viewtoggle__btn + .hrhs-viewtoggle__btn { border-left: 1px solid var(--hrhs-border); }
.hrhs-viewtoggle__btn:hover { background: var(--hrhs-light-bg); color: var(--hrhs-dark); }
.hrhs-viewtoggle__btn.is-active { background: var(--hrhs-dark); color: #fff; }

/* Pagination */
.hrhs-pagination { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 28px; flex-wrap: wrap; }
.hrhs-pagination__btn {
    min-width: 38px; height: 38px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--hrhs-border); border-radius: 8px;
    background: var(--hrhs-white); color: var(--hrhs-text);
    font-size: 0.85rem; font-weight: 600; text-decoration: none;
}
.hrhs-pagination__btn:hover { border-color: var(--hrhs-primary); color: var(--hrhs-primary); text-decoration: none; }
.hrhs-pagination__btn.is-current { background: var(--hrhs-dark); border-color: var(--hrhs-dark); color: #fff; }
.hrhs-pagination__gap { color: var(--hrhs-muted); padding: 0 4px; }

/* Logo */
.hrhs-logo { display: block; width: auto; }
.hrhs-hdr__logo-svg { display: inline-flex; }

@media (max-width: 640px) {
    .hrhs-dir-toolbar { flex-direction: column; align-items: flex-start; }
    .hrhs-directory-grid.is-list .hrhs-provider-card { grid-template-columns: 52px 1fr; }
    .hrhs-choice__tip { width: 200px; }
}

/* ═══════════════════════════════════════════════════════════════
   DIRECTORY BADGES
   Given their own row, their own shape and an icon each. Inline
   beside the business name they were the same pill shape and size
   as the category and service tags directly below, so three kinds
   of information read as one undifferentiated row of chips.
═══════════════════════════════════════════════════════════════ */
.hrhs-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; min-width: 0; }
.hrhs-badge {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px 5px 8px;
    border-radius: 7px;                 /* squared, not pill — unlike the tags below */
    font-size: 0.68rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    line-height: 1; cursor: help; white-space: nowrap;
    border: 1.5px solid transparent;
}
.hrhs-badge__mark { display: block; flex-shrink: 0; }
.hrhs-badge__text { position: relative; top: .5px; }

/* Earned — carries the HRHS lettermark itself. */
.hrhs-badge--choice {
    background: linear-gradient(135deg, #0d6e3a 0%, #12894a 100%);
    border-color: #0b5c31; color: #fff;
    box-shadow: 0 1px 3px rgba(13,110,58,.3);
}
/* Paid — rosette, and a deliberately different color family. */
.hrhs-badge--premium {
    background: linear-gradient(135deg, #1B3A5C 0%, #2E5C8A 100%);
    border-color: #16304d; color: #fff;
    box-shadow: 0 1px 3px rgba(27,58,92,.3);
}
.hrhs-badge--premium .bp-rosette { fill: #F5C542; }
.hrhs-badge--premium .bp-ribbon  { fill: #7FB2E5; }
.hrhs-badge--premium .bp-disc    { fill: #1B3A5C; }
.hrhs-badge--premium .bp-person  { fill: #fff; }

.hrhs-badge__tip {
    position: absolute; bottom: calc(100% + 9px); left: 0;
    width: 258px; max-width: min(258px, 78vw);
    /* .hrhs-badge sets nowrap so the badge itself never breaks across lines.
     * The tooltip inherited it, so its sentence ran on one line and was clipped
     * at the box edge — the text was there, just unreadable. */
    white-space: normal;
    background: var(--hrhs-dark); color: #fff;
    font-size: 0.72rem; font-weight: 400; letter-spacing: 0;
    text-transform: none; line-height: 1.55;
    padding: 10px 12px; border-radius: 8px;
    opacity: 0; visibility: hidden; transition: opacity .15s ease;
    z-index: 60; pointer-events: none; box-shadow: 0 8px 24px rgba(3,35,51,.28);
}
.hrhs-directory-grid > *:last-child .hrhs-badge__tip,
.hrhs-featured__row > *:last-child .hrhs-badge__tip { left: auto; right: 0; }
.hrhs-badge:hover .hrhs-badge__tip,
.hrhs-badge:focus .hrhs-badge__tip,
.hrhs-badge:focus-visible .hrhs-badge__tip { opacity: 1; visibility: visible; }

/* ═══════════════════════════════════════════════════════════════
   PREMIUM STRIP
   Full cards, two across. Wider than the three-column results
   below, so paid placement reads as more prominent rather than less.
═══════════════════════════════════════════════════════════════ */
.hrhs-featured {
    background: linear-gradient(165deg, #F7FAFF 0%, #FFFFFF 60%);
    border: 1px solid #C9DCF2; border-radius: var(--hrhs-radius-xl);
    padding: 22px; margin-bottom: 26px;
}
.hrhs-featured__head { margin-bottom: 16px; }
.hrhs-featured__title {
    display: flex; align-items: center; gap: 9px;
    font-size: 1.1rem; font-weight: 800; color: var(--hrhs-dark); margin: 0 0 5px;
}
.hrhs-featured__title .bp-rosette { fill: #F5C542; }
.hrhs-featured__title .bp-ribbon  { fill: #2E5C8A; }
.hrhs-featured__title .bp-disc    { fill: #1B3A5C; }
.hrhs-featured__title .bp-person  { fill: #fff; }
.hrhs-featured__sub { font-size: 0.79rem; color: var(--hrhs-muted); margin: 0; line-height: 1.55; }

/* Always two across, always tiles — the list/tile toggle governs the
   results below, not this strip. Letting it collapse into thin rows
   was what made a paid listing look smaller than a free one. */
/* Two full tiles and a sliver of the third.
 *
 * The width is what does the work: at 42% each, two cards plus the gaps leave
 * roughly a sixth of a third card visible at the right edge. A row that ends
 * flush reads as finished and nobody scrolls it; a cut-off card is the whole
 * affordance. Scroll-snap stops the drag on a card edge rather than mid-tile. */
.hrhs-featured__row {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2px;
    /* Room for the card hover lift and the focus ring, which a clipped
       overflow container would otherwise shave off. */
    padding: 4px 2px 10px;
    margin: -4px -2px -10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.hrhs-featured__row::-webkit-scrollbar { display: none; }
.hrhs-featured__row:focus-visible {
    outline: 2px solid var(--hrhs-primary);
    outline-offset: 2px;
    border-radius: var(--hrhs-radius-lg);
}
.hrhs-featured__row > .hrhs-card-wrap {
    flex: 0 0 42%;
    scroll-snap-align: start;
    min-width: 0;
}
.hrhs-featured__row .hrhs-provider-card { height: 100%; }

/* Arrows sit with the heading, not floating over the cards — an overlay
   control covers the badges, which are the reason the card is there. */
.hrhs-featured__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.hrhs-featured__nav { display: flex; gap: 8px; flex-shrink: 0; }
.hrhs-featured__arrow {
    width: 34px; height: 34px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--hrhs-white);
    border: 1px solid #C9DCF2; border-radius: 50%;
    color: var(--hrhs-dark); cursor: pointer;
    transition: var(--hrhs-transition);
}
.hrhs-featured__arrow:hover:not(:disabled) {
    background: var(--hrhs-dark); border-color: var(--hrhs-dark); color: var(--hrhs-white);
}
.hrhs-featured__arrow:disabled { opacity: .35; cursor: default; }
.hrhs-featured__arrow:focus-visible { outline: 2px solid var(--hrhs-primary); outline-offset: 2px; }

@media (max-width: 820px) {
    /* One full card and a clear sliver. Two tiles at phone width leaves each
       too narrow for the badge row to sit on one line. */
    .hrhs-featured__row > .hrhs-card-wrap { flex: 0 0 82%; }
    .hrhs-featured__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hrhs-featured__row { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   LIST VIEW
   The card is a vertical flex stack, so imposing grid columns on it
   crushed every child into a narrow strip. Instead the card stays a
   stack and only the TOP block becomes horizontal, with the summary
   and footer spanning the full width beneath it.
═══════════════════════════════════════════════════════════════ */
.hrhs-directory-grid.is-list { grid-template-columns: 1fr; gap: 14px; }
.hrhs-directory-grid.is-list .hrhs-provider-card { padding: 20px 24px; }
.hrhs-directory-grid.is-list .hrhs-provider-card__top {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.hrhs-directory-grid.is-list .hrhs-provider-card__logo,
.hrhs-directory-grid.is-list .hrhs-provider-card__logo-placeholder {
    width: 68px; height: 68px;
}
.hrhs-directory-grid.is-list .hrhs-provider-card__name { font-size: 1.05rem; }
.hrhs-directory-grid.is-list .hrhs-provider-card__summary {
    -webkit-line-clamp: 2; margin-top: 4px;
}
.hrhs-directory-grid.is-list .hrhs-provider-card__footer {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

@media (max-width: 900px) {
    .hrhs-featured__row { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .hrhs-directory-grid.is-list .hrhs-provider-card__top { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
    .hrhs-directory-grid.is-list .hrhs-provider-card__logo,
    .hrhs-directory-grid.is-list .hrhs-provider-card__logo-placeholder { width: 52px; height: 52px; }
    .hrhs-badge__tip { width: 210px; }
}

/* "Sponsored" — the standard disclosure label, sized to be read at a
   glance without competing with the section heading. */
.hrhs-featured__sponsored {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hrhs-muted);
    background: var(--hrhs-light-bg);
    border: 1px solid var(--hrhs-border);
    border-radius: 5px;
    padding: 3px 8px;
    margin-left: 4px;
    position: relative;
    top: -1px;
}

/* ─── Card actions: save + message ───────────────────────────
   Outside the card anchor, because a button nested in a link is
   invalid and activates the wrong thing for keyboard users. */
.hrhs-card-wrap {
    position: relative;
    display: flex;
    /* A grid track is minmax(auto, 1fr), and 'auto' resolves to min-content —
     * so without this the card's widest indivisible content forces the TRACK
     * wider than the container and the whole grid scrolls sideways, rather than
     * the card wrapping. The flex child needs the same for the same reason. */
    min-width: 0;
}
.hrhs-card-wrap > .hrhs-provider-card { flex: 1; min-width: 0; }
.hrhs-provider-card__top > div { min-width: 0; }
.hrhs-card-actions {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    display: flex; gap: 6px; align-items: center;
}
.hrhs-fav {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: 34px; height: 34px; padding: 0;
    border: 1px solid var(--hrhs-border); border-radius: 999px;
    background: var(--hrhs-white); color: var(--hrhs-muted);
    cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.hrhs-fav:hover { color: #e0245e; border-color: #e0245e; }
.hrhs-fav.is-on { color: #e0245e; border-color: #f5c2ce; background: #fff5f7; }
.hrhs-fav.is-on svg { fill: #e0245e; }
.hrhs-fav:disabled { opacity: .5; cursor: default; }
.hrhs-fav--wide { width: auto; height: auto; padding: 11px 20px; font-size: 0.9rem; font-weight: 700; }
.hrhs-fav__label { line-height: 1; }

.hrhs-card-msg {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 13px;
    border: 1px solid var(--hrhs-primary); border-radius: 999px;
    background: var(--hrhs-white); color: var(--hrhs-primary);
    font-size: 0.78rem; font-weight: 700; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.hrhs-card-msg:hover { background: var(--hrhs-primary); color: #fff; }

/* Reserve the action buttons' footprint on the card's top block.
 *
 * The gap was previously padded onto the badge row alone, so it only worked on
 * cards that happened to have a badge. A listing with neither badge put its
 * business name at the top-right corner, directly beneath the buttons — which is
 * exactly where the longest names collided. Reserving on the block covers every
 * card, badged or not. */
/* 164px was more than half of a 290px card once the logo and padding were
 * counted. The message button is icon-only on cards — its label returns in list
 * view, where the row is wide enough to carry it. */
.hrhs-card-wrap .hrhs-provider-card__top { padding-right: 92px; }
.hrhs-card-msg .hrhs-card-msg__label { display: none; }
.hrhs-card-msg { padding: 0; width: 34px; justify-content: center; }

/* List view has room for the full label. */
.hrhs-directory-grid.is-list .hrhs-card-msg { width: auto; padding: 0 13px; }
.hrhs-directory-grid.is-list .hrhs-card-msg .hrhs-card-msg__label { display: inline; }
.hrhs-directory-grid.is-list .hrhs-card-wrap .hrhs-provider-card__top { padding-right: 164px; }

/* ─── Saved service pros page ────────────────────────────────── */
.hrhs-fav-list { display: flex; flex-direction: column; gap: 12px; }
.hrhs-fav-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.hrhs-fav-row__name { font-size: 1rem; font-weight: 700; color: var(--hrhs-dark); display: flex; align-items: center; flex-wrap: wrap; }
.hrhs-fav-row__name a { color: inherit; text-decoration: none; }
.hrhs-fav-row__name a:hover { color: var(--hrhs-primary); }
.hrhs-fav-row__meta { font-size: 0.82rem; color: var(--hrhs-muted); margin-top: 4px; }
.hrhs-fav-row__sum { font-size: 0.86rem; color: var(--hrhs-text); margin: 8px 0 0; line-height: 1.6; max-width: 70ch; }
.hrhs-fav-row__actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

@media (max-width: 620px) {
    .hrhs-card-actions { top: 10px; right: 10px; }
    /* Icon only below this width, so the reserved strip can shrink with it. */
    .hrhs-directory-grid.is-list .hrhs-card-msg { width: 34px; padding: 0; }
    .hrhs-directory-grid.is-list .hrhs-card-msg .hrhs-card-msg__label { display: none; }
    .hrhs-directory-grid.is-list .hrhs-card-wrap .hrhs-provider-card__top { padding-right: 92px; }
    .hrhs-fav-row { flex-direction: column; align-items: flex-start; }
    .hrhs-fav-row__actions { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   TAXONOMY LANDING PAGES
═══════════════════════════════════════════════════════════════ */
.hrhs-tl-hero {
    background: var(--hrhs-dark);
    background-size: cover;
    background-position: center;
    color: #fff;
    border-radius: var(--hrhs-radius-xl);
    padding: 54px 40px;
    margin-bottom: 34px;
    text-align: center;
}
.hrhs-tl-hero__eyebrow {
    font-size: 0.72rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--hrhs-accent, #0BFF84); margin-bottom: 12px;
}
.hrhs-tl-hero__h1 {
    font-size: 2.3rem; font-weight: 800; letter-spacing: -.035em;
    line-height: 1.15; margin: 0 0 14px; color: #fff;
}
.hrhs-tl-hero__intro {
    font-size: 1.02rem; line-height: 1.7; color: rgba(255,255,255,.86);
    max-width: 62ch; margin: 0 auto 26px;
}
.hrhs-tl-hero__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hrhs-btn--outline-light {
    background: transparent; border: 2px solid rgba(255,255,255,.5); color: #fff;
}
.hrhs-btn--outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }

.hrhs-tl-section { margin-bottom: 40px; }
.hrhs-tl-h2 {
    font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em;
    color: var(--hrhs-dark); margin: 0 0 20px;
}

/* Cross-links: the internal linking the hand-built pages did manually. */
.hrhs-tl-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 2px 20px;
}
.hrhs-tl-links a {
    display: block; padding: 9px 0; font-size: 0.88rem;
    color: var(--hrhs-primary); text-decoration: none;
    border-bottom: 1px solid var(--hrhs-border);
}
.hrhs-tl-links a:hover { color: var(--hrhs-dark); }

.hrhs-tl-body {
    background: var(--hrhs-white); border: 1px solid var(--hrhs-border);
    border-radius: var(--hrhs-radius-lg); padding: 32px 36px;
}
.hrhs-tl-body h2 { font-size: 1.3rem; margin: 26px 0 12px; color: var(--hrhs-dark); }
.hrhs-tl-body h3 { font-size: 1.08rem; margin: 22px 0 10px; color: var(--hrhs-dark); }
.hrhs-tl-body h2:first-child, .hrhs-tl-body h3:first-child { margin-top: 0; }
.hrhs-tl-body p { font-size: 0.94rem; line-height: 1.8; color: var(--hrhs-text); margin: 0 0 16px; }
.hrhs-tl-body a { color: var(--hrhs-primary); }
.hrhs-tl-body ul, .hrhs-tl-body ol { margin: 0 0 16px 20px; }
.hrhs-tl-body li { font-size: 0.94rem; line-height: 1.75; color: var(--hrhs-text); margin-bottom: 6px; }

@media (max-width: 700px) {
    .hrhs-tl-hero { padding: 36px 22px; border-radius: var(--hrhs-radius-lg); }
    .hrhs-tl-hero__h1 { font-size: 1.65rem; }
    .hrhs-tl-body { padding: 24px 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   PROVIDER PROFILE — content + persistent contact rail

   The contact panel used to sit inside the About tab, so it
   disappeared the moment anyone opened Services, Reviews or
   Gallery — which is exactly when someone has finished deciding
   and wants to make contact. The rail keeps it on screen.
═══════════════════════════════════════════════════════════════ */
.hrhs-profile-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}
.hrhs-profile-rail { position: sticky; top: 84px; }
.hrhs-profile-rail__card { padding: 22px; }

/* Hero */
.hrhs-public-header { position: relative; }
.hrhs-public-header__fav {
    position: absolute; top: 0; right: 0;
    width: 42px; height: 42px;
}
.hrhs-hero-stats {
    display: flex; flex-wrap: wrap;
    border-top: 1px solid var(--hrhs-border);
    margin: 0 32px; padding: 18px 0 22px;
}
.hrhs-hero-stat { padding: 0 26px; }
.hrhs-hero-stat:first-child { padding-left: 0; }
.hrhs-hero-stat + .hrhs-hero-stat { border-left: 1px solid var(--hrhs-border); }
.hrhs-hero-stat__num {
    font-size: 1.5rem; font-weight: 800; color: var(--hrhs-dark); line-height: 1.1;
}
.hrhs-hero-stat__label {
    font-size: 0.66rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--hrhs-muted); margin-top: 3px;
}

/* Docked bar — the rail's answer on small screens, where it stacks
   below the content and would otherwise be a long scroll away. */
.hrhs-profile-dock { display: none; }

@media (max-width: 980px) {
    .hrhs-profile-split { grid-template-columns: 1fr; }
    .hrhs-profile-rail { position: static; }

    .hrhs-profile-dock {
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
        background: var(--hrhs-white);
        border-top: 1px solid var(--hrhs-border);
        box-shadow: 0 -4px 20px rgba(3,35,51,.10);
        padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
    }
    .hrhs-profile-dock__info { min-width: 0; }
    .hrhs-profile-dock__name {
        display: block; font-weight: 800; font-size: 0.9rem; color: var(--hrhs-dark);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .hrhs-profile-dock__meta { font-size: 0.78rem; color: var(--hrhs-muted); }
    /* Clear the docked bar so it never covers the last of the content. */
    body { padding-bottom: 72px; }
}

@media (max-width: 620px) {
    .hrhs-hero-stats { margin: 0 20px; padding: 14px 0 18px; }
    .hrhs-hero-stat { padding: 0 16px; }
    .hrhs-hero-stat__num { font-size: 1.25rem; }
    .hrhs-public-header__fav { width: 38px; height: 38px; }
}


/* Hero: the logo overlaps the cover, the text does not.
 *
 * The whole header used to be pulled up 42px, which put the business name and
 * the meta row on top of the cover image. Against a dark or busy photo — and
 * providers upload whatever they like — the name became unreadable, and no
 * amount of text-shadow fixes an arbitrary background.
 *
 * Only the logo is lifted now. `align-items: flex-start` with a negative margin
 * on the logo alone leaves the name and meta sitting in the white below the
 * fold line, where they are legible against a known background. */
.hrhs-public-header {
    display: flex; align-items: flex-start; gap: 20px;
    padding: 0 32px 4px; position: relative;
}
.hrhs-public-logo,
.hrhs-public-logo-placeholder {
    width: 104px; height: 104px; border-radius: 18px;
    border: 4px solid var(--hrhs-white); object-fit: cover; flex-shrink: 0;
    background: var(--hrhs-dark); color: var(--hrhs-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 800;
    /* The only element that crosses the cover's edge. */
    margin-top: -42px;
}
.hrhs-public-header__info { flex: 1; min-width: 0; padding-top: 14px; }
.hrhs-public-header__name { font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; color: var(--hrhs-dark); }
.hrhs-public-header__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }

@media (max-width: 620px) {
    .hrhs-public-header { padding: 0 20px 4px; gap: 14px; align-items: flex-start; }
    .hrhs-public-logo, .hrhs-public-logo-placeholder { width: 76px; height: 76px; border-width: 3px; font-size: 1.5rem; margin-top: -34px; }
    .hrhs-public-header__info { padding-top: 10px; }
    .hrhs-public-header__name { font-size: 1.35rem; }
}

/* Review count on cards — one parenthetical figure beside the stars.
   It sits inside .hrhs-provider-card__rating, so no block margin: the
   earlier stacked version gave cards in one row different heights. */
.hrhs-card-count {
    font-size: 0.79rem;
    font-weight: 500;
    color: var(--hrhs-muted);
}

/* ─── Recommended pros (free listings only) ──────────────────
   The one place the free tier costs a provider something visible
   rather than merely withholding a feature. */
.hrhs-recommended {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--hrhs-border);
}
.hrhs-recommended__title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--hrhs-dark);
    margin: 0 0 14px;
}
.hrhs-recommended__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 12px;
}
.hrhs-recommended__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--hrhs-white);
    border: 1px solid var(--hrhs-border);
    border-radius: var(--hrhs-radius);
    padding: 14px 16px;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.hrhs-recommended__card:hover {
    border-color: var(--hrhs-primary);
    transform: translateY(-2px);
    text-decoration: none;
}
.hrhs-recommended__name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--hrhs-dark);
}
.hrhs-recommended__meta {
    font-size: 0.79rem;
    color: var(--hrhs-muted);
}

/* ─── Job posting: the account step ──────────────────────────────
   Reached only by a guest who has already filled the form in, so the
   two routes carry equal weight — "create an account" is not more
   correct than "sign in", and making one a ghost button guesses at
   something we do not know. */
.hrhs-jobauth {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 28px;
    align-items: center;
}
.hrhs-jobauth__opt h2 {
    font-size: 1.05rem; font-weight: 800; color: var(--hrhs-dark);
    margin: 0 0 8px; letter-spacing: -.01em;
}
.hrhs-jobauth__opt p {
    font-size: 0.9rem; line-height: 1.65; color: var(--hrhs-muted); margin: 0 0 18px;
}
.hrhs-jobauth__opt .hrhs-btn { width: 100%; }
.hrhs-jobauth__or {
    position: relative; align-self: stretch;
    display: flex; align-items: center; justify-content: center;
}
.hrhs-jobauth__or::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
    width: 1px; background: var(--hrhs-border);
}
.hrhs-jobauth__or span {
    position: relative; background: var(--hrhs-white);
    padding: 6px 0; font-size: 0.78rem; font-weight: 700;
    color: var(--hrhs-muted); text-transform: uppercase; letter-spacing: .08em;
}
.hrhs-jobauth__foot { margin-top: 18px; font-size: 0.9rem; }

@media (max-width: 640px) {
    .hrhs-jobauth { grid-template-columns: 1fr; gap: 20px; }
    .hrhs-jobauth__or { padding: 4px 0; }
    /* Horizontal rule between the two options once they stack. */
    .hrhs-jobauth__or::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
    .hrhs-jobauth__or span { padding: 0 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE SIZING

   The whole plugin was drawn at desktop and then allowed to shrink,
   so on a phone body text landed near 14px and controls near 36px
   tall. Both are below the point where this is comfortable, and this
   audience is not a young one: a homeowner comparing contractors is
   often over fifty, one-handed, and outdoors.

   44px is the floor for a touch target in both Apple's and Google's
   guidance; 48px is where it stops feeling tight. Inputs go to 16px
   because iOS Safari zooms the whole page when a focused field is
   smaller than that — a bug people read as the site being broken.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {
    body { font-size: 1rem; line-height: 1.7; }

    .hrhs-content { padding: 22px 18px 44px; }

    /* Headings: still a clear step down from desktop, but the old
       clamp floors put page titles below 22px, where they stopped
       reading as titles at all. */
    .hrhs-page-title    { font-size: 1.75rem; line-height: 1.2; }
    .hrhs-page-subtitle { font-size: 1rem; line-height: 1.6; }
    .hrhs-section-label { font-size: .8rem; }

    /* Controls */
    .hrhs-btn {
        min-height: 48px;
        padding: 12px 22px;
        font-size: 1rem;
    }
    .hrhs-btn--sm { min-height: 44px; font-size: .95rem; padding: 10px 16px; }
    .hrhs-btn--lg { min-height: 54px; font-size: 1.05rem; }

    /* 16px minimum, or iOS zooms on focus. */
    .hrhs-input, .hrhs-select, .hrhs-textarea,
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="number"], input[type="search"],
    select, textarea {
        font-size: 16px;
        min-height: 48px;
        padding: 12px 14px;
    }
    textarea { min-height: 120px; }

    .hrhs-label { font-size: .95rem; margin-bottom: 6px; }

    /* Cards and tiles */
    .hrhs-card { padding: 20px 18px; }
    .hrhs-provider-card { padding: 18px; }
    .hrhs-provider-card__name { font-size: 1.05rem; }
    .hrhs-provider-card__cat { font-size: .85rem; }
    .hrhs-card-count { font-size: .85rem; }

    /* Anything tappable in a list needs the same floor as a button. */
    .hrhs-chip, .hrhs-tl-links a, .hrhs-tag {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        font-size: .95rem;
        padding: 8px 16px;
    }

    /* Tabs scroll rather than wrap, and each stop is thumb-sized. */
    .hrhs-tabs { gap: 4px; }
    .hrhs-tab { min-height: 48px; font-size: .95rem; padding: 12px 14px; }

    .hrhs-badge { font-size: .78rem; padding: 4px 10px; }
    .hrhs-alert { font-size: .95rem; padding: 14px 16px; }
    .hrhs-empty__text { font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   THEME AND BUILDER OVERRIDES

   Elementor's global kit styles `a`, `button`, and their :hover,
   :focus and :active states site-wide, using whatever accent colour
   the kit was left on — magenta, by default. Its stylesheet loads
   after the plugin's, so on every state a plugin button was being
   repainted in a colour that belongs to nothing on the page.

   This is the one place !important is warranted. It is not fighting
   our own cascade, which specificity would settle; it is fighting a
   third-party global stylesheet whose load order we do not control
   and whose selectors we cannot predict. Scoped to plugin classes,
   so nothing outside the marketplace is affected.

   States are declared explicitly rather than relying on inheritance,
   because a kit that sets only :focus will otherwise repaint a button
   the instant someone tabs to it or taps it on a phone — where :focus
   sticks after the tap, so the wrong colour stays on screen.
═══════════════════════════════════════════════════════════════ */
.hrhs-btn,
.hrhs-btn:link,
.hrhs-btn:visited { text-decoration: none !important; }

.hrhs-btn:focus,
.hrhs-btn:focus-visible,
.hrhs-btn:active { text-decoration: none !important; }

/* Primary */
.hrhs-btn--primary,
.hrhs-btn--primary:link,
.hrhs-btn--primary:visited,
.hrhs-btn--primary:focus,
.hrhs-btn--primary:active {
    background: var(--hrhs-primary) !important;
    color: var(--hrhs-white) !important;
    border-color: transparent !important;
}
.hrhs-btn--primary:hover:not(:disabled) {
    background: var(--hrhs-primary-dk) !important;
    color: var(--hrhs-white) !important;
}

/* Accent */
.hrhs-btn--accent,
.hrhs-btn--accent:link,
.hrhs-btn--accent:visited,
.hrhs-btn--accent:focus,
.hrhs-btn--accent:active {
    background: var(--hrhs-accent) !important;
    color: var(--hrhs-dark) !important;
    border-color: transparent !important;
}
.hrhs-btn--accent:hover:not(:disabled) {
    background: var(--hrhs-accent-dk) !important;
    color: var(--hrhs-dark) !important;
}

/* Dark */
.hrhs-btn--dark,
.hrhs-btn--dark:link,
.hrhs-btn--dark:visited,
.hrhs-btn--dark:focus,
.hrhs-btn--dark:active {
    background: var(--hrhs-dark) !important;
    color: var(--hrhs-white) !important;
    border-color: transparent !important;
}
.hrhs-btn--dark:hover:not(:disabled) {
    background: var(--hrhs-dark-lt) !important;
    color: var(--hrhs-white) !important;
}

/* Outline — the variant Elementor mangles worst, since it paints both
   the text and the border. */
.hrhs-btn--outline,
.hrhs-btn--outline:link,
.hrhs-btn--outline:visited,
.hrhs-btn--outline:focus,
.hrhs-btn--outline:active {
    background: transparent !important;
    color: var(--hrhs-primary) !important;
    border-color: var(--hrhs-primary) !important;
}
.hrhs-btn--outline:hover:not(:disabled) {
    background: var(--hrhs-primary) !important;
    color: var(--hrhs-white) !important;
    border-color: var(--hrhs-primary) !important;
}

.hrhs-btn--outline-light,
.hrhs-btn--outline-light:link,
.hrhs-btn--outline-light:visited,
.hrhs-btn--outline-light:focus,
.hrhs-btn--outline-light:active {
    background: transparent !important;
    color: var(--hrhs-white) !important;
    border-color: rgba(255,255,255,.45) !important;
}
.hrhs-btn--outline-light:hover:not(:disabled) {
    background: rgba(255,255,255,.12) !important;
    color: var(--hrhs-white) !important;
}

.hrhs-btn--ghost,
.hrhs-btn--ghost:link,
.hrhs-btn--ghost:visited,
.hrhs-btn--ghost:focus,
.hrhs-btn--ghost:active {
    background: rgba(255,255,255,0.12) !important;
    color: var(--hrhs-white) !important;
    border-color: rgba(255,255,255,0.2) !important;
}
.hrhs-btn--ghost:hover:not(:disabled) {
    background: rgba(255,255,255,0.22) !important;
    color: var(--hrhs-white) !important;
}

/* Body links inside marketplace content. Kits restyle `a` globally, so
   a link in a job description or a profile bio picked up the accent
   colour too. */
.hrhs-content a:not(.hrhs-btn):not(.hrhs-chip):not(.hrhs-provider-card):not(.hrhs-recommended__card),
.hrhs-content a:not(.hrhs-btn):not(.hrhs-chip):visited {
    color: var(--hrhs-primary-dk);
}
.hrhs-content a:not(.hrhs-btn):not(.hrhs-chip):hover { color: var(--hrhs-primary); }

/* Header and footer are ours end to end — no builder colour belongs in
   either, in any state. */
.hrhs-hdr a, .hrhs-hdr a:visited, .hrhs-hdr a:focus, .hrhs-hdr a:active,
.hrhs-ftr a, .hrhs-ftr a:visited, .hrhs-ftr a:focus, .hrhs-ftr a:active {
    text-decoration: none;
}
.hrhs-hdr__link, .hrhs-hdr__link:visited, .hrhs-hdr__link:focus, .hrhs-hdr__link:active { color: inherit; }

/* Cards are links. A kit's `a:hover` colour turning a whole provider
   tile magenta is the most visible version of this bug. */
.hrhs-provider-card,
.hrhs-provider-card:link,
.hrhs-provider-card:visited,
.hrhs-provider-card:hover,
.hrhs-provider-card:focus,
.hrhs-provider-card:active { text-decoration: none !important; color: inherit !important; }

.hrhs-recommended__card,
.hrhs-recommended__card:link,
.hrhs-recommended__card:visited,
.hrhs-recommended__card:hover,
.hrhs-recommended__card:focus,
.hrhs-recommended__card:active { text-decoration: none !important; }

/* Focus rings: ours, in our colour, not the kit's. */
.hrhs-content a:focus-visible,
.hrhs-content button:focus-visible,
.hrhs-btn:focus-visible {
    outline: 2px solid var(--hrhs-primary) !important;
    outline-offset: 2px;
}

/* Breathing room before the footer. The recommendations were the last
   thing on the page and sat flush against the dark band below them. */
.hrhs-recommended { margin-bottom: 30px; }