/* ==========================================================================
   House Managers — brand layer on top of faztech.css
   Purple #672D7A, deep #4A1F58, light #F3E8F7
   Accent yellow #F5C518 for CTAs and badges only — never body text on white.

   Section map
     1.  Tokens (light + dark)
     2.  Base + accessibility
     3.  Header, nav, announcement, mobile tab bar
     4.  Buttons, badges, pills, flashes
     5.  Hero
     6.  Search + filters
     7.  Cards: listings, counties, media, steps
     8.  Profile page + gallery lightbox
     9.  Chat
     10. Dashboard, forms, progress ring
     11. Footer
     12. Utilities + motion
   ========================================================================== */

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

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
    --brown:      #672D7A;
    --brown-2:    #8B4A9C;
    --brown-deep: #4A1F58;
    --gold:       #F5C518;
    --gold-deep:  #D4A80E;

    --bg-0:        #ffffff;
    --bg-1:        #F7F7F8;
    --bg-2:        #F3E8F7;
    --tint-1:      rgba(103,45,122,.10);
    --tint-2:      rgba(74,31,88,.06);
    --ink:         #1A1A1A;
    --muted:       #4B5563;
    --muted-2:     #6B7280;
    --accent:      #672D7A;
    --surface:     #ffffff;
    --card:        #ffffff;
    --card-2:      #F7F7F8;
    --line:        #E5E5E7;
    --line-2:      rgba(26,26,26,.14);
    --panel:       #ffffff;
    --frame:       #F3E8F7;
    --field-bg:    #ffffff;
    --soft:        #FBF7FC;
    --header-bg:   rgba(255,255,255,.92);
    --ring:        rgba(26,26,26,.05);
    --swirl-1:     .08;
    --swirl-2:     .05;
    --hover-shadow: 0 18px 44px -20px rgba(74,31,88,.28);
    --big-shadow:  0 40px 90px -24px rgba(74,31,88,.28);
    --ok:          #16A34A;
    --err:         #DC2626;

    --btn-primary-bg:     #672D7A;
    --btn-primary-color:  #ffffff;
    --btn-primary-shadow: 0 10px 30px -10px rgba(103,45,122,.55);

    --glow:        0 0 0 1px rgba(103,45,122,.4), 0 14px 44px -10px rgba(103,45,122,.4);
    --display:     "Plus Jakarta Sans", "Inter", sans-serif;
    --font:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
}

html[data-theme="dark"] {
    --bg-0:        #120a16;
    --bg-1:        #1a1020;
    --bg-2:        #2a1633;
    --tint-1:      rgba(103,45,122,.35);
    --tint-2:      rgba(245,197,24,.08);
    --ink:         #ffffff;
    --muted:       #C4B5CF;
    --muted-2:     #9B8AA8;
    --accent:      #D8B4E2;
    --surface:     #1a1020;
    --card:        #1e1326;
    --card-2:      #241830;
    --line:        rgba(255,255,255,.12);
    --line-2:      rgba(255,255,255,.18);
    --panel:       #1a1020;
    --frame:       #221428;
    --field-bg:    #241830;
    --soft:        #170e1c;
    --header-bg:   rgba(18,10,22,.86);
    --ring:        rgba(255,255,255,.03);
    --hover-shadow: 0 18px 44px -20px rgba(0,0,0,.6);
    --big-shadow:  0 40px 90px -24px rgba(0,0,0,.65);
    --ok:          #4ADE80;
    --err:         #F87171;

    --btn-primary-bg:     linear-gradient(135deg, #8B4A9C, #4A1F58);
    --btn-primary-color:  #ffffff;
    --btn-primary-shadow: 0 10px 30px -8px rgba(103,45,122,.65);
}

/* ==========================================================================
   2. Base + accessibility
   ========================================================================== */
body { font-family: var(--font); }
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -.02em; }

/* Every interactive thing gets a visible focus ring — this site is used on
   cheap phones and by people who tab through forms. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
    border-radius: 6px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 999;
    background: #672D7A;
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 600;
}
.skip-link:focus { left: 12px; }

/* Minimum comfortable tap target, per the 360px-first brief. */
.btn, .icon-btn, .tabbar__item, .chip, .nav__links a { min-height: 44px; }

img { max-width: 100%; }

/* ==========================================================================
   3. Header, nav, announcement, mobile tab bar
   ========================================================================== */
.announce {
    background: var(--bg-2);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    font-size: .9rem;
}
.announce--warn    { background: #FEF3C7; color: #78350F; }
.announce--success { background: #DCFCE7; color: #14532D; }
html[data-theme="dark"] .announce--warn    { background: #422006; color: #FDE68A; }
html[data-theme="dark"] .announce--success { background: #052E16; color: #BBF7D0; }
.announce__inner {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; padding: 10px 16px; text-align: center; flex-wrap: wrap;
}
.announce__inner a { text-decoration: underline; font-weight: 600; color: inherit; }

.icon-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 999px;
    color: var(--ink);
    border: 1px solid var(--line);
    background: var(--card);
    transition: background .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: var(--bg-2); border-color: var(--brown-2); }
.icon-btn__dot {
    position: absolute; top: -4px; right: -4px;
    min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: 999px;
    background: #DC2626; color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 19px;
    text-align: center;
    border: 2px solid var(--bg-0);
}

.nav__only-mobile { display: none; }

/* --------------------------------------------------------------------------
   Logo area.

   Change these two values to fit a different logo — nothing else needs editing.
   The image is bounded by BOTH max-height and max-width and keeps its own
   aspect ratio, so a tall square mark and a long wordmark both sit correctly
   without touching the markup.
   -------------------------------------------------------------------------- */
:root {
    /* The wordmark is 611x120 — 5.09:1. Keep --logo-w at --logo-h x 5.09 when
       changing these, or background-size:contain letterboxes it inside a box
       that is the wrong shape and the logo stops touching the left edge. */
    --logo-h: 58px;
    --logo-w: 295px;
    --logo-max-w: 260px;      /* kept: admin-uploaded <img> logos still use it */

    /* Swap any of these from an inline <style> to override per install —
       hm-layout.php does exactly that when a logo is uploaded in HM Settings. */
    --logo-wide:      url("/static/images/brand/logo-wide.png");
    --logo-wide-dark: url("/static/images/brand/logo-wide-dark.png");
    --logo-mark:      url("/static/images/brand/logo-mark.png");
    --logo-mark-dark: url("/static/images/brand/logo-mark-dark.png");
}

.nav__brand {
    display: flex;
    align-items: center;
    flex: none;
    /* A DEFINITE height here is load-bearing — see the note below. */
    height: var(--logo-h);
    margin-right: 8px;
}

/* --------------------------------------------------------------------------
   The logo is a background-image on a span, not an <img>, for two reasons.

   1. THEME. The site's dark mode is a manual toggle — data-theme on <html>,
      remembered in localStorage — not just prefers-color-scheme. CSS can
      respond to that attribute; <picture media=""> and <img srcset> cannot,
      so with an <img> the wordmark would stay dark-purple-on-dark whenever
      someone used the toggle. Which it did.

   2. WEIGHT. A browser fetches only the background-image belonging to a rule
      that actually matches. Two <img> tags with one hidden would download
      both, and adding the small-screen mark would make it three — about 28 KB
      of images to display 11 KB of them, on connections this site is built for.

   A url() sitting in an unused custom property is never fetched, so declaring
   all four above costs nothing.

   The accessible name lives on the <a> (aria-label), which is what a screen
   reader announces for a link — so nothing is lost by the span being empty.
   -------------------------------------------------------------------------- */
.nav__brand-logo {
    display: block;
    width: var(--logo-w);
    height: var(--logo-h);
    background-image: var(--logo-wide);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

/* Dark mode, both ways round: the OS preference unless the reader has
   explicitly chosen light, and the manual toggle whatever the OS says. */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .nav__brand-logo { background-image: var(--logo-wide-dark); }
}
html[data-theme="dark"]  .nav__brand-logo { background-image: var(--logo-wide-dark); }
html[data-theme="light"] .nav__brand-logo { background-image: var(--logo-wide); }

/* Kept for admin-uploaded logos, which still render as a plain <img>.
   Do NOT change `height` to auto, and do NOT let max-width fall back to a
   percentage. faztech.css sets a global `img { max-width: 100% }`, and this
   image is inside a shrink-to-fit flex item, so a percentage max-width
   resolves against a container whose own width depends on the image. That
   circular dependency collapses the logo to 0x0 — which is exactly what
   happened when this was `height:auto; max-height:...`.
   A definite height plus a max-width in px breaks the cycle. */
.nav__brand img {
    height: 100%;
    width: auto;
    max-width: var(--logo-max-w);
    object-fit: contain;
    object-position: left center;
    display: block;
}

/* --------------------------------------------------------------------------
   Account menu.

   Log out was the fifteenth item inside the general Menu. On a shared handset —
   which is common here — signing out is the single most important control on
   the page, so it gets its own menu under the avatar with a divider above it
   and its own colour.
   -------------------------------------------------------------------------- */
.acct { position: relative; flex: none; }
.acct__btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 1px solid var(--line);
    border-radius: 999px; padding: 4px 10px 4px 4px;
    min-height: 44px; cursor: pointer; color: var(--ink);
}
.acct__btn:hover, .acct.open .acct__btn { background: var(--bg-2); border-color: var(--brown-2); }
.acct__btn svg { width: 13px; height: 13px; transition: transform .2s ease; }
.acct.open .acct__btn svg { transform: rotate(180deg); }

.acct__avatar {
    width: 34px; height: 34px; flex: none;
    border-radius: 999px; overflow: hidden;
    background: var(--brown); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 700; font-size: .8rem;
    letter-spacing: .02em;
}
.acct__avatar img { width: 100%; height: 100%; object-fit: cover; }

.acct__menu { right: 0; left: auto; min-width: 244px; padding: 8px; }
.acct__who {
    padding: 10px 14px 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
}
.acct__who strong { display: block; font-family: var(--display); font-size: .95rem; }
.acct__menu a { display: flex !important; align-items: center; gap: 10px; }
.acct__menu .ic { color: var(--muted-2); flex: none; }
.acct__count {
    margin-left: auto;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: var(--brown); color: #fff;
    font-size: .7rem; font-weight: 700; line-height: 20px; text-align: center;
}
.acct__sep { height: 1px; background: var(--line); margin: 6px 0; }
.acct__out { color: var(--err) !important; font-weight: 600; }
.acct__out:hover { background: rgba(220,38,38,.10) !important; color: var(--err) !important; }

/* The menu button says "Menu" on phones. Hidden by default because on desktop
   the nav links are already on show and the toggle itself is not rendered. */
.nav__toggle-label { display: none; }

@media (max-width: 560px) {
    /* The tab bar already carries Messages, so drop the duplicate icons and
       keep the header to logo + menu + account + language. */
    .nav__actions .icon-btn { display: none; }
    .acct__btn { padding: 3px 7px 3px 3px; }
    .acct__avatar { width: 30px; height: 30px; }

    /* ----------------------------------------------------------------------
       THE HEADER USED TO OVERFLOW THE SCREEN.

       Measured on a 375px viewport: the page was 547px wide and the hamburger
       sat at x=505 — 130px past the right edge. Reaching the menu meant
       scrolling the whole page sideways, which almost nobody thinks to do.

       The cause was one element. "Find a house manager" is a .btn--primary in
       .nav__actions and renders 224px wide; that alone is 60% of the viewport,
       and nothing in the row shrinks. It is also pure duplication on a phone —
       the bottom tab bar has carried Find all along.

       Dropping it, plus tighter gaps, brings the header to ~325px inside 375.
       ---------------------------------------------------------------------- */
    .nav__actions > .btn { display: none; }

    .site-header .container.nav { gap: 12px; }
    .nav__actions { gap: 8px; }

    .nav__toggle {
        width: auto;
        min-height: 44px;         /* stays a full tap target once it has a label */
        padding: 0 12px;
        gap: 7px;
        font-weight: 700;
    }
    .nav__toggle-label { display: inline; font-size: .92rem; }
}

/* Very narrow handsets: the label is worth more than the language pills, which
   are also in the footer on every page. */
@media (max-width: 360px) {
    .nav__actions .langswitch { display: none; }
}

/* --------------------------------------------------------------------------
   Living with the bottom tab bar.

   Below 900px .tabbar is fixed to the bottom, 57px tall, at z-index 60.
   Two things were sitting under it.

   1. The WhatsApp bubble. faztech.css pins .faz-wa at bottom:16px, 60x60, at
      z-index 99999 — so it covered 41px of the tab bar and won, hiding the
      right-hand tab (Sign in / Account) behind it. On a phone it now sits at
      the middle of the right edge, well clear of the bar and of the sticky
      CTA that some pages add at the bottom.

      top:calc(50% - 30px) rather than top:50% + translateY(-50%): the widget
      sets `transition: all` on this element and animates its own transform,
      so putting a transform here would be fighting it.

      The chat panel is 192px tall and opens upward from the bubble; from the
      middle it opens at y=168, so it still fits on a 812px screen.

   2. The hero's own call to action. Measured at 375x812, "I am looking for
      work" ended 4px inside the tab bar — the house-manager signup, i.e. the
      supply side of the marketplace. Padding below it cannot help, since the
      hero is taller than the screen and the content is laid out from the top;
      the fix is to take space out above. 64px of inner padding on a phone is
      desktop spacing that was never revisited.

   Verified at 375x812 after the change: every hero button ends at or above
   713px, the bubble at 741px, the tab bar starts at 755px.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .faz-wa { top: calc(50% - 30px); bottom: auto; }

    .hero-hero__inner { padding-top: 28px; padding-bottom: 40px; }
    .hero-hero .hero-search { margin-top: 18px; }
    .hero-hero .hero__cta { margin-top: 16px; }
}

/* --------------------------------------------------------------------------
   One-chevron menu. Everything secondary lives behind a single "Menu".
   -------------------------------------------------------------------------- */
.nav__item--single .nav__sub-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 16px;
    min-height: 44px;
    font-family: var(--display);
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink);
    cursor: pointer;
}
.nav__item--single .nav__sub-toggle:hover,
.nav__item--single.open .nav__sub-toggle {
    background: var(--bg-2);
    border-color: var(--brown-2);
}
html[data-theme="dark"] .nav__item--single .nav__sub-toggle { color: #fff; }

.nav__item--single .nav__sub {
    min-width: 268px;
    padding: 10px;
    border-radius: var(--r-lg);
}

/* Section labels inside the menu, so one long list still reads as groups. */
.nav__sub-head {
    padding: 12px 14px 5px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted-2);
}
.nav__sub-head:first-child { padding-top: 4px; }
.nav__sub a { min-height: 42px; display: flex !important; align-items: center; }
.nav__sub a.is-active { font-weight: 700; color: var(--brown); }
html[data-theme="dark"] .nav__sub a.is-active { color: var(--accent); }

/* Between the tablet breakpoint and a roomy desktop the full-size wordmark
   plus the nav links plus the account chip is a tight fit. One step down keeps
   it off the menu. Must stay ABOVE the 900px block so that one still wins. */
@media (max-width: 1100px) {
    :root { --logo-h: 52px; --logo-w: 265px; }
}

@media (max-width: 900px) {
    :root { --logo-h: 46px; --logo-w: 234px; --logo-max-w: 190px; }

    /* In the hamburger panel the extra chevron is one tap too many — show the
       whole list flat instead. */
    .nav__item--single .nav__sub-toggle { display: none; }
    .nav__item--single .nav__sub {
        display: block;
        position: static;
        box-shadow: none;
        border: none;
        background: none;
        min-width: 0;
        padding: 0;
    }
}

/* Below ~430px the wordmark either shrinks until "TRUSTED HELP. BETTER HOMES."
   is unreadable, or it crowds out the account chip and the hamburger. The
   circular mark is the same identity at a size that still works — and it is
   the picture people will have seen on the WhatsApp share card. */
@media (max-width: 430px) {
    :root { --logo-h: 46px; --logo-w: 46px; --logo-max-w: 120px; }

    .nav__brand-logo { background-image: var(--logo-mark); }

    @media (prefers-color-scheme: dark) {
        html:not([data-theme="light"]) .nav__brand-logo { background-image: var(--logo-mark-dark); }
    }
    html[data-theme="dark"]  .nav__brand-logo { background-image: var(--logo-mark-dark); }
    html[data-theme="light"] .nav__brand-logo { background-image: var(--logo-mark); }
}

/* Language switch. Deliberately two visible options rather than a dropdown or a
   globe icon: someone who cannot read the English around it must be able to see
   the way out without guessing what an icon means. */
.langswitch {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    background: var(--card);
    flex: none;
}
.langswitch__opt {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; min-height: 36px; padding: 0 11px;
    font-size: .78rem; font-weight: 700; letter-spacing: .03em;
    color: var(--muted); text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.langswitch__opt + .langswitch__opt { border-left: 1px solid var(--line); }
.langswitch__opt:hover { background: var(--bg-2); color: var(--ink); }
.langswitch__opt.is-on { background: var(--brown); color: #fff; }
html[data-theme="dark"] .langswitch__opt.is-on { background: var(--brown-2); }

.langswitch--footer {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
}
.langswitch--footer .langswitch__opt { color: rgba(255,255,255,.75); }
.langswitch--footer .langswitch__opt + .langswitch__opt { border-left-color: rgba(255,255,255,.18); }
.langswitch--footer .langswitch__opt:hover { background: rgba(255,255,255,.14); color: #fff; }
.langswitch--footer .langswitch__opt.is-on { background: var(--gold); color: #1A1A1A; }

@media (max-width: 420px) {
    /* At 360px the header is tight — keep the switch, drop its padding. */
    .langswitch__opt { min-width: 34px; padding: 0 7px; }
}

/* Bottom tab bar — on a phone this, not the hamburger, is the real navigation. */
.tabbar {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--header-bg);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
}
.tabbar__item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 4px 6px;
    font-size: .68rem; font-weight: 600;
    color: var(--muted-2); text-decoration: none;
    text-align: center;
}
.tabbar__item.is-active { color: var(--brown); }
html[data-theme="dark"] .tabbar__item.is-active { color: var(--accent); }
.tabbar__icon { position: relative; display: inline-flex; }
.tabbar__dot {
    position: absolute; top: -1px; right: -3px;
    width: 9px; height: 9px; border-radius: 999px;
    background: #DC2626; border: 2px solid var(--bg-0);
}

@media (max-width: 900px) {
    .tabbar { display: flex; }
    .nav__only-mobile { display: block; }
    .nav__hide-sm { display: none; }
    /* Keep the tab bar from covering the last row of content. */
    body { padding-bottom: 68px; }
    .site-footer { margin-bottom: 0; }
}

/* ==========================================================================
   4. Buttons, badges, pills, flashes
   ========================================================================== */
.btn { font-family: var(--display); font-weight: 600; }
.btn--lg { padding: 14px 26px; font-size: 1rem; }
.btn--block { display: flex; width: 100%; justify-content: center; }

.btn--gold {
    background: var(--gold); color: #1A1A1A;
    border: 1px solid var(--gold-deep);
    font-weight: 700;
}
.btn--gold:hover { background: #ffd84a; }

.btn--wa {
    background: #25D366; color: #06331A; border: 1px solid #1FAE55; font-weight: 700;
}
.btn--wa:hover { background: #3ee27c; }

.badge-accent,
.hm-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--gold); color: #1A1A1A;
    font-weight: 700; font-size: .78rem;
    padding: 5px 13px; border-radius: 999px;
    letter-spacing: .02em;
}

/* Verification badges. Colour + word + icon, never colour alone. */
.vbadge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .74rem; font-weight: 700;
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid transparent; white-space: nowrap;
}
.vbadge--full { background: #DCFCE7; color: #14532D; border-color: #86EFAC; }
.vbadge--id   { background: var(--bg-2); color: var(--brown-deep); border-color: #D8B4E2; }
.vbadge--none { background: var(--card-2); color: var(--muted); border-color: var(--line); }
html[data-theme="dark"] .vbadge--full { background: #052E16; color: #BBF7D0; border-color: #166534; }
html[data-theme="dark"] .vbadge--id   { background: #2a1633; color: #E9D5FF; border-color: #6B21A8; }

.price-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--gold); color: #1A1A1A;
    font-weight: 800; padding: 9px 17px;
    border-radius: 999px; font-size: .95rem;
}
.price-pill--free { background: #DCFCE7; color: #14532D; border: 1px solid #86EFAC; }

.tag {
    display: inline-block;
    font-size: .74rem; padding: 4px 9px; border-radius: 999px;
    background: var(--bg-2); color: var(--brown);
    border: 1px solid rgba(103,45,122,.18);
    white-space: nowrap;
}
html[data-theme="dark"] .tag { background: #2a1633; color: #E9D5FF; border-color: rgba(216,180,226,.25); }

.flash {
    border-radius: var(--r-md);
    padding: 13px 16px; margin: 0 0 18px;
    font-size: .94rem; font-weight: 500;
    border: 1px solid transparent;
}
.flash--error { background: #FEE2E2; color: #7F1D1D; border-color: #FCA5A5; }
.flash--ok    { background: #DCFCE7; color: #14532D; border-color: #86EFAC; }
.flash--info  { background: var(--bg-2); color: var(--brown-deep); border-color: #D8B4E2; }
html[data-theme="dark"] .flash--error { background: #450A0A; color: #FECACA; border-color: #7F1D1D; }
html[data-theme="dark"] .flash--ok    { background: #052E16; color: #BBF7D0; border-color: #166534; }
html[data-theme="dark"] .flash--info  { background: #2a1633; color: #E9D5FF; border-color: #6B21A8; }

/* ==========================================================================
   5. Hero — full-bleed photo slideshow (classes come from faztech.css,
      these are the House Managers overrides)
   ========================================================================== */
.hero-hero__inner .eyebrow--onphoto { color: #F5C518; letter-spacing: .12em; }
.hero-hero__scrim {
    background:
        linear-gradient(180deg, rgba(28,10,34,.30) 0%, rgba(28,10,34,.55) 45%, rgba(28,10,34,.82) 100%),
        linear-gradient(90deg, rgba(74,31,88,.45), rgba(74,31,88,0) 60%);
}
.hero-hero__inner h1 { text-shadow: 0 2px 26px rgba(0,0,0,.45); }
.hero-hero__inner p  { text-shadow: 0 1px 14px rgba(0,0,0,.5); }
.hero-hero__dots button.is-active { background: var(--gold); }

/* Search box sitting on the hero photo. */
.hero-search {
    margin: 28px auto 0;
    max-width: 720px;
    background: rgba(255,255,255,.96);
    border-radius: var(--r-lg);
    padding: 12px;
    box-shadow: 0 30px 70px -28px rgba(0,0,0,.7);
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
}
html[data-theme="dark"] .hero-search { background: rgba(30,19,38,.97); }
.hero-search select,
.hero-search input {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--field-bg);
    color: var(--ink);
    border-radius: var(--r-sm);
    padding: 13px 14px;
    font-size: .95rem;
    font-family: var(--font);
}
.hero-search .btn { white-space: nowrap; }

@media (max-width: 700px) {
    .hero-search { grid-template-columns: 1fr; }
}

/* Trust strip under the hero. */
.trust-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
@media (max-width: 900px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .trust-strip { grid-template-columns: 1fr; } }
.trust-item {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 20px 16px;
    text-align: center;
}
.trust-item .ic { color: var(--brown); margin-bottom: 8px; }
html[data-theme="dark"] .trust-item .ic { color: var(--accent); }
.trust-item strong { display: block; font-family: var(--display); font-size: .96rem; margin-bottom: 4px; }
.trust-item span   { color: var(--muted); font-size: .85rem; }

/* ==========================================================================
   6. Search + filters
   ========================================================================== */
.filter-bar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px;
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 150px; flex: 1; }
.field label { font-size: .8rem; font-weight: 600; color: var(--muted); }
.field select,
.field input {
    border: 1px solid var(--line);
    background: var(--field-bg);
    color: var(--ink);
    border-radius: var(--r-sm);
    padding: 12px 13px;
    font-size: .95rem;
    font-family: var(--font);
    min-height: 44px;
}

/* Chip row — quick one-tap filters for people who will not use a dropdown. */
.chips { display: flex; gap: 9px; overflow-x: auto; padding: 4px 0 8px; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { height: 0; }
.chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card); color: var(--ink);
    font-size: .87rem; font-weight: 600;
    white-space: nowrap; text-decoration: none;
    transition: all .15s ease;
}
.chip:hover { border-color: var(--brown-2); }
.chip.is-on { background: var(--brown); color: #fff; border-color: var(--brown); }

/* Mobile filter drawer — reachable with one thumb. */
.drawer-open-btn { display: none; }
.drawer {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,.45);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: 88vh; overflow-y: auto;
    background: var(--panel);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 8px 18px calc(24px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.32,.72,0,1);
}
.drawer.is-open .drawer__panel { transform: translateY(0); }
.drawer__grab { width: 42px; height: 4px; border-radius: 999px; background: var(--line-2); margin: 10px auto 16px; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

@media (max-width: 900px) {
    .drawer-open-btn { display: inline-flex; }
    .filter-bar.is-desktop-only { display: none; }
}

/* ==========================================================================
   7. Cards: listings, counties, media, steps
   ========================================================================== */
.listing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .listing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .listing-grid { grid-template-columns: 1fr; } }

.listing-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--card);
    text-decoration: none; color: inherit;
    box-shadow: 0 8px 24px -18px rgba(74,31,88,.3);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.listing-card:hover {
    transform: translateY(-3px);
    border-color: rgba(103,45,122,.4);
    box-shadow: var(--hover-shadow);
}
.listing-card__photo {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(145deg, #F3E8F7, #E8D4F0);
    display: flex; align-items: center; justify-content: center;
    color: #672D7A;
    font-family: var(--display); font-weight: 700; font-size: 1.6rem;
    overflow: hidden;
}
html[data-theme="dark"] .listing-card__photo { background: linear-gradient(145deg, #2a1633, #1a1020); color: #D8B4E2; }
.listing-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing-card__photo .vbadge { position: absolute; left: 10px; top: 10px; }
.listing-card__status {
    position: absolute; right: 10px; top: 10px;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 4px 9px; border-radius: 999px;
    background: rgba(255,255,255,.94); color: #14532D;
}
.listing-card__status.is-hired { color: #7F1D1D; }
.listing-card__body { padding: 15px 15px 17px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.listing-card__body h3 { margin: 0; font-size: 1.05rem; }
.listing-card__meta {
    display: flex; align-items: center; gap: 6px;
    color: var(--muted); font-size: .86rem; margin: 0;
}
.listing-card__meta .ic { flex: none; }
.listing-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.listing-card__rate { font-weight: 700; color: var(--brown); font-family: var(--display); }
html[data-theme="dark"] .listing-card__rate { color: var(--accent); }

/* County tiles — photo + name, for people who navigate by place not filters. */
.county-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .county-grid { grid-template-columns: repeat(2, 1fr); } }
.county-tile {
    position: relative; display: block;
    aspect-ratio: 3 / 2;
    border-radius: var(--r-lg);
    overflow: hidden;
    text-decoration: none;
    background: var(--bg-2);
}
.county-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.county-tile:hover img { transform: scale(1.06); }
.county-tile__label {
    position: absolute; inset: auto 0 0 0;
    padding: 30px 14px 13px;
    background: linear-gradient(180deg, rgba(28,10,34,0), rgba(28,10,34,.85));
    color: #fff;
}
.county-tile__label strong { display: block; font-family: var(--display); font-size: 1.02rem; }
.county-tile__label span { font-size: .8rem; opacity: .85; }

/* Media rows — image beside text, alternating. */
.media-row { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.media-row--flip .media-row__fig { order: -1; }
@media (max-width: 850px) {
    .media-row { grid-template-columns: 1fr; gap: 26px; }
    .media-row--flip .media-row__fig { order: 0; }
}
.media-row__fig {
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--big-shadow);
    aspect-ratio: 4 / 3;
    background: var(--bg-2);
}
.media-row__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }

.figcap { margin-top: 10px; font-size: .82rem; color: var(--muted-2); text-align: center; }

/* Steps with illustrations. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 850px) { .steps { grid-template-columns: 1fr; } }
.step {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 0 0 22px;
    overflow: hidden;
}
.step__img { aspect-ratio: 16 / 10; background: var(--bg-2); }
.step__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.step__inner { padding: 18px 20px 0; }
.step__n {
    width: 34px; height: 34px; border-radius: 999px;
    background: var(--brown); color: #fff;
    font-weight: 700; font-family: var(--display);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 11px;
}
html[data-theme="dark"] .step__n { background: linear-gradient(135deg, #8B4A9C, #4A1F58); }
.step h3 { margin: 0 0 7px; font-size: 1.1rem; }
.step p  { margin: 0; color: var(--muted); font-size: .95rem; }

.cta-band { background: linear-gradient(135deg, #672D7A, #4A1F58) !important; }
.cta-band .btn--primary { background: #F5C518 !important; color: #1A1A1A !important; }
.cta-band .btn--primary:hover { background: #ffd84a !important; filter: none !important; }

.section--soft { background: var(--soft); }

.empty-state {
    border: 1px dashed var(--line-2);
    background: var(--soft);
    border-radius: var(--r-lg);
    padding: 44px 24px;
    text-align: center;
}
.empty-state img { width: 128px; height: auto; margin: 0 auto 18px; display: block; opacity: .9; }
.empty-state h3 { font-family: var(--display); color: var(--ink); margin: 0 0 8px; }
.empty-state p  { color: var(--muted); margin: 0 auto 18px; max-width: 44ch; }

/* ==========================================================================
   8. Profile page + gallery lightbox
   ========================================================================== */
.profile-head { display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: start; }
@media (max-width: 780px) { .profile-head { grid-template-columns: 1fr; } }
.profile-avatar {
    aspect-ratio: 1 / 1;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: linear-gradient(145deg, #F3E8F7, #E8D4F0);
    display: flex; align-items: center; justify-content: center;
    color: #672D7A; font-family: var(--display); font-weight: 700; font-size: 3rem;
    border: 1px solid var(--line);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 18px; }
@media (max-width: 520px) { .profile-facts { grid-template-columns: 1fr; } }
.fact {
    display: flex; gap: 11px; align-items: flex-start;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: 13px 15px;
}
.fact .ic { color: var(--brown); flex: none; margin-top: 2px; }
html[data-theme="dark"] .fact .ic { color: var(--accent); }
.fact strong { display: block; font-size: .95rem; font-family: var(--display); }
.fact span   { color: var(--muted); font-size: .82rem; }

.gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 700px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery button {
    padding: 0; border: 1px solid var(--line); background: var(--bg-2);
    border-radius: var(--r-md); overflow: hidden;
    aspect-ratio: 1 / 1; cursor: pointer;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lightbox {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(10,4,14,.94);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 86vh; border-radius: var(--r-md); }
.lightbox__close {
    position: absolute; top: 16px; right: 16px;
    width: 46px; height: 46px; border-radius: 999px;
    background: rgba(255,255,255,.14); color: #fff;
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 999px;
    background: rgba(255,255,255,.14); color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.lightbox__nav--prev { left: 14px; transform: translateY(-50%) rotate(180deg); }
.lightbox__nav--next { right: 14px; }

/* Sticky action bar on a profile — the call to action never scrolls away. */
.sticky-cta {
    position: sticky; bottom: 0; z-index: 40;
    background: var(--header-bg);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line);
    padding: 12px 0;
}
.sticky-cta__inner { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sticky-cta__inner .btn { flex: 1; min-width: 140px; justify-content: center; }
@media (max-width: 900px) { .sticky-cta { bottom: 62px; } }

/* Masked phone treatment. */
.masked-phone {
    font-family: var(--display); font-weight: 700; font-size: 1.35rem;
    letter-spacing: .04em; color: var(--muted-2);
}
.revealed-phone {
    font-family: var(--display); font-weight: 800; font-size: 1.6rem;
    color: var(--brown); letter-spacing: .01em;
}
html[data-theme="dark"] .revealed-phone { color: var(--accent); }

/* Reviews. */
.review { border-bottom: 1px solid var(--line); padding: 18px 0; }
.review:last-child { border-bottom: none; }
.stars { display: inline-flex; gap: 2px; color: var(--gold-deep); }
.stars .ic { fill: currentColor; }
.stars .is-off { color: var(--line-2); fill: none; }

/* ==========================================================================
   9. Chat
   ========================================================================== */
.chat-wrap {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--card);
    min-height: 62vh;
}
@media (max-width: 860px) { .chat-wrap { grid-template-columns: 1fr; } }

.thread-list { border-right: 1px solid var(--line); overflow-y: auto; max-height: 72vh; }
@media (max-width: 860px) { .thread-list { border-right: none; max-height: none; } }
.thread-item {
    display: flex; gap: 12px; align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    text-decoration: none; color: inherit;
}
.thread-item:hover   { background: var(--bg-2); }
.thread-item.is-open { background: var(--bg-2); }
html[data-theme="dark"] .thread-item:hover,
html[data-theme="dark"] .thread-item.is-open { background: #2a1633; }
.thread-item__av {
    width: 46px; height: 46px; flex: none;
    border-radius: 999px; overflow: hidden;
    background: var(--bg-2); color: var(--brown);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 700;
}
.thread-item__av img { width: 100%; height: 100%; object-fit: cover; }
.thread-item__txt { min-width: 0; flex: 1; }
.thread-item__txt strong { display: block; font-size: .95rem; font-family: var(--display); }
.thread-item__txt span {
    display: block; color: var(--muted); font-size: .83rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thread-item__badge {
    flex: none; min-width: 21px; height: 21px; padding: 0 6px;
    border-radius: 999px; background: var(--brown); color: #fff;
    font-size: .7rem; font-weight: 700; line-height: 21px; text-align: center;
}

.chat-pane { display: flex; flex-direction: column; min-height: 62vh; }
.chat-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--line);
    background: var(--card-2);
}
.chat-body {
    flex: 1; overflow-y: auto;
    padding: 20px 18px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--soft);
    max-height: 56vh;
}
.msg { max-width: 78%; padding: 11px 15px; border-radius: 16px; font-size: .95rem; line-height: 1.5; }
.msg__time { display: block; font-size: .7rem; opacity: .7; margin-top: 5px; }
.msg--them { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg--me   { align-self: flex-end;   background: var(--brown); color: #fff; border-bottom-right-radius: 5px; }
.msg--sys  {
    align-self: center; max-width: 90%; text-align: center;
    background: var(--bg-2); color: var(--brown-deep);
    font-size: .82rem; border-radius: 999px; padding: 7px 16px;
}
html[data-theme="dark"] .msg--sys { background: #2a1633; color: #E9D5FF; }

.chat-form { display: flex; gap: 10px; padding: 13px 16px; border-top: 1px solid var(--line); background: var(--card); }
.chat-form textarea {
    flex: 1; resize: none; min-height: 46px; max-height: 130px;
    border: 1px solid var(--line); background: var(--field-bg); color: var(--ink);
    border-radius: var(--r-lg); padding: 12px 15px;
    font-family: var(--font); font-size: .95rem;
}
.chat-safety {
    font-size: .8rem; color: var(--muted);
    padding: 9px 16px; background: var(--bg-2);
    border-bottom: 1px solid var(--line);
}
html[data-theme="dark"] .chat-safety { background: #241830; }

/* ==========================================================================
   10. Dashboard, forms, progress ring
   ========================================================================== */
.dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 20px;
}
.stat-card strong { display: block; font-family: var(--display); font-size: 1.9rem; line-height: 1.1; color: var(--brown); }
html[data-theme="dark"] .stat-card strong { color: var(--accent); }
.stat-card span { color: var(--muted); font-size: .86rem; }

.action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 800px) { .action-grid { grid-template-columns: 1fr; } }
.action-card {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 18px;
    text-decoration: none; color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}
.action-card:hover { border-color: var(--brown-2); transform: translateY(-2px); }
.action-card .ic { color: var(--brown); flex: none; margin-top: 2px; }
html[data-theme="dark"] .action-card .ic { color: var(--accent); }
.action-card strong { display: block; font-family: var(--display); margin-bottom: 3px; }
.action-card span   { color: var(--muted); font-size: .86rem; }

/* Profile completion coach. */
.coach { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.ring { --pct: 0; width: 92px; height: 92px; flex: none; position: relative; }
.ring svg { transform: rotate(-90deg); width: 92px; height: 92px; }
.ring__bg   { stroke: var(--line); }
.ring__fg   { stroke: var(--brown); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
html[data-theme="dark"] .ring__fg { stroke: var(--accent); }
.ring__pct {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 700; font-size: 1.15rem;
}
.coach__todo { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.coach__todo li { display: flex; gap: 9px; align-items: center; font-size: .9rem; color: var(--muted); }
.coach__todo .ic { color: var(--ok); flex: none; }
.coach__todo li.is-todo { color: var(--ink); font-weight: 600; }
.coach__todo li.is-todo .ic { color: var(--line-2); }

.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-row label { font-weight: 600; font-size: .9rem; }
.form-row .hint { font-size: .82rem; color: var(--muted); font-weight: 400; }
.form-row input,
.form-row select,
.form-row textarea {
    border: 1px solid var(--line); background: var(--field-bg); color: var(--ink);
    border-radius: var(--r-sm); padding: 13px 14px;
    font-family: var(--font); font-size: 1rem; min-height: 46px;
    width: 100%;
}
.form-row textarea { min-height: 110px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

.checkbox-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
@media (max-width: 700px) { .checkbox-grid { grid-template-columns: repeat(2, 1fr); } }
.checkbox-grid label {
    display: flex; align-items: center; gap: 9px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 12px 14px; cursor: pointer; font-size: .92rem;
    background: var(--card); min-height: 46px;
}
.checkbox-grid label:hover { border-color: var(--brown-2); }
.checkbox-grid input:checked + span { font-weight: 700; color: var(--brown); }

.panel {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 24px;
}
.panel + .panel { margin-top: 18px; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.panel__head h2 { margin: 0; font-size: 1.2rem; }

/* Profile photo editor. The preview is the control — people expect to click
   the picture, so the label is styled as a button beside it and the real file
   input is hidden. */
.photo-edit { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.photo-edit__preview {
    width: 132px; height: 132px; flex: none;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--line);
}
.photo-edit__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-edit__controls { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; min-width: 200px; flex: 1; }
.photo-edit__controls .btn { cursor: pointer; }

/* "Families will see: James K." under the name field. Deliberately styled as a
   quiet statement of fact rather than a warning — it answers a question people
   would otherwise have to guess at. */
.name-preview {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 8px; padding: 8px 13px;
    background: var(--bg-2);
    border: 1px solid rgba(103,45,122,.16);
    border-radius: var(--r-sm);
    font-size: .86rem; color: var(--brown-deep);
}
.name-preview .ic { flex: none; }
.name-preview strong { font-family: var(--display); }
html[data-theme="dark"] .name-preview {
    background: #241830; color: #E9D5FF; border-color: rgba(216,180,226,.2);
}

/* A checkbox with a label and an explanation beside it. Bigger hit area than a
   bare checkbox, which matters when the choice is "can strangers see my phone
   number" and the reader is on a 360px screen. */
.switch-row {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--card);
    cursor: pointer;
    margin-bottom: 12px;
}
.switch-row:hover { border-color: var(--brown-2); }
.switch-row input[type="checkbox"] {
    width: 22px; height: 22px; flex: none; margin-top: 2px; cursor: pointer;
    accent-color: var(--brown);
}
.switch-row__text { display: block; }
.switch-row__text strong { display: block; font-family: var(--display); margin-bottom: 3px; }
.switch-row__text .hint { display: block; font-size: .85rem; color: var(--muted); font-weight: 400; }

/* Checkbox grids get the same accent and a consistent box size — the old form
   inherited the browser default, so "Pet care" and "Sign Language" rendered
   with wildly different checkbox sizes purely because their labels wrapped. */
.checkbox-grid input[type="checkbox"] {
    width: 18px; height: 18px; flex: none; accent-color: var(--brown); cursor: pointer;
}
.checkbox-grid label span { line-height: 1.3; }

/* Plain-language help note — used liberally for less confident users. */
.helper {
    display: flex; gap: 11px; align-items: flex-start;
    background: var(--bg-2); border: 1px solid rgba(103,45,122,.16);
    border-radius: var(--r-md); padding: 14px 16px;
    font-size: .89rem; color: var(--brown-deep);
}
html[data-theme="dark"] .helper { background: #241830; color: #E9D5FF; border-color: rgba(216,180,226,.2); }
.helper .ic { flex: none; margin-top: 1px; }

/* ==========================================================================
   11. Footer
   ========================================================================== */
.site-footer { background: linear-gradient(160deg, #4A1F58, #2C1234); color: #fff; }
.site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: 12px; }
.site-footer p  { color: rgba(255,255,255,.72); font-size: .9rem; }
.footer-links a { color: rgba(255,255,255,.78); font-size: .9rem; }
.footer-links a:hover { color: var(--gold); }
.footer-note { font-size: .82rem !important; color: rgba(255,255,255,.55) !important; margin-top: 12px; }
.footer-bottom { color: rgba(255,255,255,.6); font-size: .84rem; }

/* ==========================================================================
   12. Utilities + motion
   ========================================================================== */
.stack   { display: grid; gap: 16px; }
.row     { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row--end{ justify-content: flex-end; }
.muted   { color: var(--muted); }
.small   { font-size: .86rem; }
.center  { text-align: center; }
.mt-0 { margin-top: 0; }  .mt-1 { margin-top: 8px; }  .mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.narrow { max-width: 640px; margin-inline: auto; }
.hide   { display: none !important; }

.breadcrumbs { font-size: .84rem; color: var(--muted); margin-bottom: 14px; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--brown); }

/* Skeleton shimmer while a slow 3G connection fetches listings. */
.skel { background: linear-gradient(90deg, var(--card-2) 25%, var(--bg-2) 37%, var(--card-2) 63%); background-size: 400% 100%; animation: skel 1.4s ease infinite; border-radius: var(--r-sm); }
@keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .site-header, .tabbar, .sticky-cta, .announce, .theme-toggle, .site-footer { display: none !important; }
    body { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   28. Community board.

   Posts written by a volunteer for people who have no account. Visually it is
   deliberately NOT the listing card: those carry a verification badge that
   means a human checked an ID, and nothing here has been checked by anyone.
   A dashed edge and a plain tag say "notice board", not "verified profile".
   -------------------------------------------------------------------------- */
.board-filters__row {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.board-filters__row .form-control { flex: 1 1 10rem; min-width: 0; }
.board-filters__row .btn { flex: 0 0 auto; }

.board-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.board-card {
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    background: var(--card);
    padding: 18px;
    display: flex; flex-direction: column; gap: 8px;
}
.board-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.board-card__when { font-size: .8rem; opacity: .65; }
.board-card__name { font-size: 1.05rem; margin: 0; }
.board-card__where { margin: 0; font-size: .9rem; opacity: .8; }
.board-card__skills { margin: 0; font-size: .88rem; }
.board-card__facts {
    list-style: none; margin: 4px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; opacity: .85;
}
.board-card__about { margin: 4px 0 0; font-size: .9rem; line-height: 1.55; }
.board-card__contact {
    margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.board-card__masked { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; opacity: .75; }

.board-tag {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.board-tag--work { background: rgba(22,163,74,.14); color: #15803D; }
.board-tag--hire { background: rgba(103,45,122,.14); color: var(--brown); }
html[data-theme="dark"] .board-tag--work { background: rgba(22,163,74,.22); color: #4ADE80; }
html[data-theme="dark"] .board-tag--hire { background: rgba(255,255,255,.14); color: #E9D5F0; }

/* Poster's own list */
.board-admin__head {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between;
}
.board-admin__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.board-rows { display: flex; flex-direction: column; gap: 10px; }
.board-row {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
    border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 14px 16px;
}
.board-row--off { opacity: .6; }
.board-row__main { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.board-row__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: .82rem; width: 100%; }
.board-row__buttons { display: flex; gap: 8px; flex: 0 0 auto; }

.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.pill--ok { background: rgba(22,163,74,.14); color: #15803D; }
.pill--muted { background: var(--bg-2); color: var(--muted); }

@media (max-width: 560px) {
    .board-row { align-items: flex-start; }
    .board-row__buttons { width: 100%; }
    .board-row__buttons .btn { flex: 1 1 auto; text-align: center; }
}

/* Small additions the board needs and the site did not have yet. */
.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;
}
.field-error { display: block; color: var(--err); font-weight: 600; margin-top: 5px; }
.btn--sm { padding: 7px 13px; font-size: .86rem; min-height: 38px; }

/* .helper is a flex row built for an icon plus text. The board uses it as a
   plain note, so let its contents wrap normally. */
.helper--plain { display: block; }