/**
 * The directory — the index at /gardeners-near-me and each area page beneath it.
 *
 * THE PROBLEM THIS IS SOLVING
 *
 * The area page gave every listing the same large card, and most listings are scraped rows
 * carrying nothing but a business name. So half the page was big empty boxes, and the
 * directory read as though nobody was on it — the opposite of what a directory has to
 * convey. Meanwhile the index was one dropdown and a list of place names, which told a
 * visitor nothing about whether there was anything behind it.
 *
 * The fix is information design before decoration: weight follows substance. A business
 * that has written a profile gets a card that can hold one; a name we found gets a line.
 * Three tiers, visibly different, honestly labelled —
 *
 *   .dir-card--featured   paid, claimed, a profile behind it: the full card
 *   .dir-card--listed     claimed and free: name, one-liner, link to their page
 *   .dir-found            unclaimed: a compact row, and a way to take it over
 *
 * Nothing here pretends an empty listing is a full one, which is what stops the page
 * looking padded. It also gives the paid tier something to be visibly better than.
 *
 * Tokens match profile.css deliberately: this is one product seen from three pages.
 */

.sp-directory-page,
.sp-area-page {
    --dir-dark:   #2A331F;
    --dir-darker: #1B2115;
    --dir-acid:   #84F000;
    --dir-deep:   #5C8A00;
    --dir-ink:    #171C12;
    --dir-body:   #3D4636;
    --dir-muted:  #6B7561;
    --dir-line:   #E2E6DA;
    --dir-wash:   #F4F7EF;
    --dir-card:   #FFFFFF;
}

/* ---------------------------------------------------------------------------
   Shared banner. Same mown-lawn treatment as a member's profile, so the three
   directory surfaces read as one place.
   --------------------------------------------------------------------------- */
.dir-hero {
    position: relative;
    overflow: hidden;
    /* The header is in flow (position: relative), so this is the banner's own padding
       and not clearance for anything. See the same note in profile.css. */
    padding: 84px 0 92px;
    background-color: var(--dir-dark);
    color: #fff;
    isolation: isolate;
}
.dir-hero::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -2;
    background:
        repeating-linear-gradient(97deg,
            rgba(255, 255, 255, .028) 0 86px,
            rgba(0, 0, 0, .030) 86px 172px),
        radial-gradient(130% 100% at 20% 0%, #3A4729 0%, var(--dir-darker) 78%);
}
.dir-grass {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 54px;
    background-repeat: repeat-x;
    z-index: 3;
    animation: slide 60s linear infinite;
}
.dir-hero-inner { position: relative; z-index: 2; max-width: 720px; }
.dir-hero-inner--wide { max-width: 820px; }

/* An area with a Shear Power team puts their panel in the banner beside the heading.
   The panel brings its own opaque ground, so it is lifted above the grass strip rather
   than being sliced by it — it then reads as standing on the lawn. */
.dir-hero--split .row { position: relative; z-index: 4; }
.dir-hero--split { padding-bottom: 104px; }
.dir-hero--split .local-team-panel {
    margin-right: 0;
    /* The panel's own ground is #3B462E and the banner is #2A331F — near enough that the
       card had no edge at all and read as a hole in the banner. An acid hairline and a
       real shadow give it one, in a colour the page already uses. */
    border: 1px solid rgba(132, 240, 0, .26);
    border-radius: 14px;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .34);
}

/* The area heading is a sentence with a place name in it rather than a two-word title,
   so it is set smaller than the index's — the same scale would wrap to four lines. */
.dir-title--area { font-size: clamp(30px, 4vw, 46px); line-height: 1.06; }

.dir-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 0 0 18px; padding: 6px 14px 6px 10px;
    border-radius: 999px;
    background: rgba(132, 240, 0, .13);
    border: 1px solid rgba(132, 240, 0, .32);
    color: var(--dir-acid);
    font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
}
.dir-title {
    margin: 0 0 14px;
    font-size: clamp(36px, 6vw, 64px);
    line-height: 1; color: #fff; text-wrap: balance;
}
.dir-lead {
    margin: 0 0 28px;
    font-size: clamp(17px, 2.2vw, 21px); line-height: 1.5;
    color: rgba(255, 255, 255, .84); max-width: 52ch;
}

/* The count, stated plainly. A directory has to answer "is there anyone on this?"
   before it asks anybody to search it. */
.dir-stats { display: flex; flex-wrap: wrap; gap: 30px; margin: 0; padding: 0; list-style: none; }
/* Figure centred over its label rather than both flush left: the labels are different
   lengths, so left-aligning left every column looking accidentally ragged. */
.dir-stat { text-align: center; }
.dir-stat strong {
    display: block;
    font-family: inherit;
    font-size: 30px; line-height: 1.1; color: var(--dir-acid);
}
.dir-stat span { font-size: 14px; color: rgba(255, 255, 255, .7); }

/* ---------------------------------------------------------------------------
   The search panel, lifted over the banner's edge.
   --------------------------------------------------------------------------- */
.dir-search {
    position: relative;
    z-index: 4;
    margin: -52px auto 0;
    padding: 26px 28px;
    background: var(--dir-card);
    border: 1px solid var(--dir-line);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(23, 28, 18, .13);
}
.dir-search { padding: 28px 30px 30px; }

/* ---------------------------------------------------------------------------
   The search: country, then region, then area.

   Every area in the country is offered, published or not, so a gardener can find their
   own patch before anybody has listed in it — see partials/directory-search.php for why
   that matters more than it sounds. The count on each option is what separates an area
   with a page from one that is only an invitation.
   --------------------------------------------------------------------------- */
.dir-find { position: relative; }

.dir-find-top {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin: 0 0 14px;
}
.dir-find-label { margin: 0; font-size: 19px; font-weight: 600; color: var(--dir-ink); }

/* The two flags. A pill each, the chosen one filled — the shape carries the state as
   well as the colour, so it still reads without colour vision. */
.dir-find-flags { display: flex; gap: 6px; }
.dir-flag {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px 5px 6px;
    border: 1.5px solid var(--dir-line); border-radius: 999px;
    background: var(--dir-card);
    font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
    color: var(--dir-muted);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.dir-flag:hover { border-color: #C3D9A0; color: var(--dir-body); }
.dir-flag.is-on {
    border-color: var(--dir-dark);
    background: var(--dir-dark);
    color: #fff;
}
.dir-flag:focus-visible { outline: 2px solid var(--dir-deep); outline-offset: 2px; }
.dir-flag-svg {
    width: 26px; height: 26px;
    border-radius: 50%;
    /* The ring keeps the white edge of either flag off a white panel. */
    box-shadow: 0 0 0 1px rgba(23, 28, 18, .18);
}

/* One bar, split down the middle. */
.dir-find-bar {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: stretch;
    border: 1.5px solid var(--dir-line);
    border-radius: 12px;
    background: var(--dir-card);
    /* Deliberately not overflow:hidden. The rounded corners do not need it — nothing
       reaches them — and it would clip both dropdowns to the height of the bar. */
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dir-find-bar:focus-within {
    border-color: var(--dir-deep);
    box-shadow: 0 0 0 4px rgba(132, 240, 0, .20);
}
.dir-find-split { background: var(--dir-line); }

.dir-find-half { display: flex; flex-direction: column; padding: 11px 16px 12px; min-width: 0; }
.dir-find-sub {
    margin: 0 0 1px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--dir-muted);
}

/* Each half is a typeahead: an input, a caret to say it opens, and a list beneath. */
.dir-combo { position: relative; display: flex; align-items: center; }

.dir-combo-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 3px 24px 3px 0;
    border: 0; background: none; outline: none;
    font: inherit; font-size: 16.5px;
    color: var(--dir-ink);
    text-overflow: ellipsis;
}
.dir-combo-input::placeholder { color: #9AA391; }
.dir-combo-input:disabled { background: none; color: #9AA391; cursor: default; -webkit-text-fill-color: #9AA391; opacity: 1; }

.dir-combo-caret {
    position: absolute; right: 2px;
    font-size: 12px; color: var(--dir-muted);
    pointer-events: none;
}
.dir-combo-input:disabled ~ .dir-combo-caret { opacity: .45; }

/* The list hangs off its own half, and sits above the cards below the panel. */
.dir-find-list {
    position: absolute;
    left: -14px; right: -14px; top: calc(100% + 12px);
    z-index: 30;
    max-height: 320px;
    overflow-y: auto;
    margin: 0; padding: 6px;
    list-style: none;
    background: var(--dir-card);
    border: 1px solid var(--dir-line);
    border-radius: 11px;
    box-shadow: 0 22px 46px rgba(23, 28, 18, .18);
}
.dir-find-option {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 10px 13px;
    border-radius: 8px;
    cursor: pointer;
}
.dir-find-option.is-active { background: var(--dir-wash); }
.dir-find-option-name { font-size: 15.5px; color: var(--dir-ink); }
/* The matched run, not a highlighter pen — a default yellow <mark> would shout. */
.dir-find-option-name mark { background: none; padding: 0; color: var(--dir-deep); font-weight: 700; }
.dir-find-option-meta { flex: 0 0 auto; font-size: 12.5px; color: var(--dir-muted); white-space: nowrap; }
.dir-find-option.is-active .dir-find-option-meta { color: var(--dir-deep); }

/* Shortcuts to the busiest areas, for somebody who has not got a place in mind. */
.dir-find-help {
    display: flex; align-items: center; flex-wrap: wrap; gap: 7px 9px;
    margin: 14px 2px 0; font-size: 13.5px; color: var(--dir-muted);
}
.dir-find-help-label { white-space: nowrap; }
.dir-find-quick {
    padding: 4px 11px;
    border: 1px solid var(--dir-line); border-radius: 999px;
    background: var(--dir-card);
    color: var(--dir-body); text-decoration: none; white-space: nowrap;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.dir-find-quick:hover, .dir-find-quick:focus-visible {
    border-color: var(--dir-deep); background: var(--dir-wash); color: var(--dir-deep);
}

/* An area nobody has listed in. Not an error — an opening. */
.dir-find-empty {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 13px 0 0; padding: 13px 15px;
    border: 1px dashed #C6CFBA; border-radius: 10px;
    background: var(--dir-wash);
    font-size: 14.5px; line-height: 1.5; color: var(--dir-body);
}
.dir-find-empty i { margin-top: 3px; color: var(--dir-deep); }
.dir-find-empty a { color: var(--dir-deep); font-weight: 600; }


/* ---------------------------------------------------------------------------
   Section furniture.
   --------------------------------------------------------------------------- */
.dir-section { padding: 66px 0 0; }
.dir-section--last { padding-bottom: 80px; }
.dir-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin: 0 0 22px;
}
.dir-label {
    margin: 0 0 6px;
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--dir-muted);
}
.dir-h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; text-wrap: balance; }
.dir-note { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: var(--dir-muted); max-width: 64ch; }

/* ---------------------------------------------------------------------------
   Tier one — a business with a profile behind it.
   --------------------------------------------------------------------------- */
.dir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 18px;
}

.dir-card {
    display: flex; flex-direction: column;
    padding: 24px 26px 22px;
    border: 1px solid var(--dir-line);
    border-radius: 12px;
    background: var(--dir-card);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dir-card:hover, .dir-card:focus-within {
    transform: translateY(-3px);
    border-color: #C3D9A0;
    box-shadow: 0 16px 34px rgba(23, 28, 18, .10);
}

.dir-card--featured {
    background: var(--dir-dark);
    border-color: var(--dir-dark);
    color: #fff;
}
.dir-card--featured:hover, .dir-card--featured:focus-within {
    border-color: var(--dir-acid);
    box-shadow: 0 18px 40px rgba(23, 28, 18, .26);
}

.dir-badge {
    align-self: flex-start;
    margin: 0 0 10px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    background: rgba(132, 240, 0, .16);
    border: 1px solid rgba(132, 240, 0, .34);
    color: var(--dir-acid);
}
.dir-card--listed .dir-badge {
    background: var(--dir-wash);
    border-color: var(--dir-line);
    color: var(--dir-deep);
}

/*
 * Colour is stated on the heading itself, and that is the fix for a real bug rather than
 * a preference. The theme colours headings with a bare `h3 { color: ... }`; an element
 * selector always beats an inherited value, so `color: #fff` on the featured card never
 * reached the name inside it and every promoted business was near-black on dark green.
 * The link said `color: inherit`, which faithfully inherited the wrong colour.
 */
.dir-card-name { margin: 0 0 8px; font-size: 21px; line-height: 1.25; text-wrap: balance; color: var(--dir-ink); }
.dir-card-name a { color: inherit; text-decoration: none; }
.dir-card--featured .dir-card-name { color: #fff; }
.dir-card-name a:hover, .dir-card-name a:focus-visible { color: var(--dir-acid); }
.dir-card--listed .dir-card-name a:hover,
.dir-card--listed .dir-card-name a:focus-visible { color: var(--dir-deep); }

.dir-card-line { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--dir-body); }
.dir-card--featured .dir-card-line { color: rgba(255, 255, 255, .8); }

/* Stars, drawn from the number — one gradient clipped to the glyphs, so 4.6 is 4.6. */
/* The score is the thing a customer scans for, so it gets the brand colour and the
   review count stays quiet behind it. */
.dir-rating { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; }
.dir-rating strong { font-size: 16px; color: var(--dir-deep); }
.dir-rating > span { color: var(--dir-muted); }
.dir-card--featured .dir-rating strong { color: var(--dir-acid); }
.dir-card--featured .dir-rating > span { color: rgba(255, 255, 255, .66); }
.dir-stars {
    font-size: 16px; line-height: 1; letter-spacing: 1px;
    background: linear-gradient(90deg, #FFC531 0, #FFC531 var(--dir-fill, 0%), rgba(0, 0, 0, .16) var(--dir-fill, 0%));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dir-card--featured .dir-stars {
    background: linear-gradient(90deg, #FFC531 0, #FFC531 var(--dir-fill, 0%), rgba(255, 255, 255, .24) var(--dir-fill, 0%));
    -webkit-background-clip: text; background-clip: text;
}
.dir-rating span { color: var(--dir-muted); }
.dir-card--featured .dir-rating span { color: rgba(255, 255, 255, .62); }

.dir-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.dir-tags li {
    padding: 4px 10px; border-radius: 999px;
    background: var(--dir-wash); border: 1px solid var(--dir-line);
    font-size: 12.5px; color: var(--dir-body);
}
.dir-card--featured .dir-tags li {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .84);
}

/* Contact row pinned to the bottom, so cards of different heights still line up. */
/*
 * Content is top-aligned; the slack falls below the buttons, not above them.
 *
 * The grid stretches every card to the tallest in its row, and this used to be
 * `margin-top: auto` — which pushed the buttons to the floor and opened a hole in the
 * middle of any card with less to say than its neighbour. Extra room under the last
 * element reads as padding and nobody notices it; the same room above it reads as
 * something failing to load.
 */
.dir-card-foot { padding-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.dir-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px; border-radius: 7px;
    font-size: 14px; font-weight: 600; text-decoration: none;
    border: 1px solid transparent;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.dir-btn--go { background: var(--dir-acid); color: var(--dir-ink); }
.dir-btn--go:hover, .dir-btn--go:focus-visible { background: #96FF19; color: var(--dir-ink); }
.dir-btn--wa { background: #25D366; color: #fff; }
.dir-btn--wa:hover, .dir-btn--wa:focus-visible { background: #1FB855; color: #fff; }
.dir-btn--quiet {
    border-color: var(--dir-line); color: var(--dir-body); background: var(--dir-card);
}
.dir-btn--quiet:hover, .dir-btn--quiet:focus-visible { border-color: var(--dir-deep); color: var(--dir-deep); }
.dir-card--featured .dir-btn--quiet {
    border-color: rgba(255, 255, 255, .26); color: #fff; background: transparent;
}
.dir-card--featured .dir-btn--quiet:hover,
.dir-card--featured .dir-btn--quiet:focus-visible {
    border-color: var(--dir-acid); color: var(--dir-acid);
}

/* ---------------------------------------------------------------------------
   Tier three — names we found and nobody has claimed.

   A row, not a card. Giving a business name and nothing else the same 200px box as a
   full listing is what made the page look empty; a tidy list of names looks like exactly
   what it is, which is a directory that knows about them.
   --------------------------------------------------------------------------- */
/*
 * A dashed edge, and no shared grid lines.
 *
 * These were cells in a 1px-gap grid on a tinted panel, which is the visual language of a
 * spreadsheet — the least appealing way to present the thing we most want an owner to
 * click. Each is now its own tile with a dashed border, which says "outline, not filled
 * in" without a word of copy, and the claim is a real button rather than an underlined
 * scrap of text.
 */
.dir-found {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 10px;
    margin: 0; padding: 0; list-style: none;
}
.dir-found li {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 16px 18px;
    border: 1px dashed #C6CFBA;
    border-radius: 11px;
    background: var(--dir-card);
    transition: border-color .16s ease, background .16s ease;
}
.dir-found li:hover { border-color: var(--dir-deep); background: var(--dir-wash); }
.dir-found-name { font-size: 16px; line-height: 1.35; color: var(--dir-ink); }
.dir-found button {
    margin-top: auto;
    padding: 7px 13px;
    border: 1px solid var(--dir-line); border-radius: 999px;
    background: var(--dir-card);
    font: inherit; font-size: 13px; font-weight: 600;
    color: var(--dir-deep);
    cursor: pointer; white-space: nowrap;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.dir-found li:hover button, .dir-found button:focus-visible {
    border-color: var(--dir-deep);
    background: var(--dir-deep);
    color: #fff;
}

/* ---------------------------------------------------------------------------
   Area browsing, on the index.
   --------------------------------------------------------------------------- */
/* Browse and the join panel sit side by side on desktop. Both are narrow things, and
   run full width each left half a screen of nothing to their right. */
.dir-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 46px;
    align-items: start;
}
.dir-col-side { position: sticky; top: 24px; }

.dir-sublabel {
    margin: 26px 0 12px;
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--dir-muted);
}

.dir-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.dir-area {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 13px 16px;
    border: 1px solid var(--dir-line); border-radius: 9px;
    background: var(--dir-card);
    color: var(--dir-ink); text-decoration: none;
    transition: border-color .16s ease, transform .16s ease;
}
.dir-area:hover, .dir-area:focus-visible {
    border-color: var(--dir-acid); transform: translateY(-2px); color: var(--dir-ink);
}
.dir-area-name { font-size: 15.5px; }
.dir-area-count {
    flex: 0 0 auto;
    min-width: 22px; padding: 1px 7px;
    border-radius: 999px; background: var(--dir-wash);
    font-size: 12px; color: var(--dir-muted); text-align: center;
}
.dir-area:hover .dir-area-count { background: rgba(132, 240, 0, .22); color: var(--dir-deep); }

/* The complete A-Z, folded away. The links stay in the HTML for crawlers; the reader
   sees twelve tiles and a control, not six hundred. */
.dir-all { margin-top: 26px; border-top: 1px solid var(--dir-line); }
.dir-all > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 16px 2px;
    list-style: none; cursor: pointer;
    font-size: 15px; font-weight: 600; color: var(--dir-deep);
}
.dir-all > summary::-webkit-details-marker { display: none; }
.dir-all > summary:hover { color: var(--dir-ink); }
.dir-all > summary i { transition: transform .18s ease; font-size: 13px; }
.dir-all[open] > summary i { transform: rotate(180deg); }
.dir-all-inner { padding-bottom: 8px; }
.dir-country { margin: 32px 0 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--dir-muted); }
.dir-country:first-of-type { margin-top: 0; }

/* ---------------------------------------------------------------------------
   The band that asks gardeners to list themselves.
   --------------------------------------------------------------------------- */
.dir-join {
    position: relative;
    overflow: hidden;
    /* No top margin: it is a column now, level with the browse list beside it, not a
       band stacked underneath one. */
    margin: 0;
    padding: 34px 32px 36px;
    border-radius: 16px;
    background: var(--dir-dark);
    color: #fff;
    isolation: isolate;
}
.dir-join::before {
    content: "";
    position: absolute; inset: -20%; z-index: -1;
    background: repeating-linear-gradient(97deg,
        rgba(255, 255, 255, .03) 0 74px, rgba(0, 0, 0, .03) 74px 148px);
}
.dir-join-label {
    margin: 0 0 8px;
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--dir-acid);
}
.dir-join h2 { margin: 0 0 10px; font-size: clamp(23px, 2.4vw, 29px); line-height: 1.18; color: #fff; text-wrap: balance; }
.dir-join-lead { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.dir-join-points { margin: 18px 0 24px; padding: 0; list-style: none; display: grid; gap: 9px; }
.dir-join-points li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.dir-join-points i { color: var(--dir-acid); margin-top: 3px; }

/* The two columns become one before the join panel gets too narrow to read. Sticky is
   dropped with them — a panel that follows you down a single-column phone page is a
   nuisance, not a convenience. */

/* ---------------------------------------------------------------------------
   No transitions on text that this stylesheet recolours.

   The theme sets `transition: all 500ms ease` on h1-h6, and every stylesheet here is
   deferred (media="print", flipped to "all" on load). So the moment this file lands, a
   promoted business name does not simply become white — it *animates* from the theme's
   near-black to white over half a second, on top of dark green, on every single page
   load. It reads as a bug because it looks exactly like one.

   Colour that this sheet owns must therefore arrive instantly. Nothing here needs to
   animate on a stylesheet swap; the hover transitions are declared on their own rules.
   --------------------------------------------------------------------------- */
.dir-title, .dir-h2, .dir-card-name, .dir-card-name a,
.dir-find-label, .dir-find-sub, .dir-found-name, .dir-find-option-name, .dir-join h2, .dir-area-name { transition: none; }

@media (max-width: 991px) {
    .dir-columns { grid-template-columns: 1fr; gap: 40px; }
    .dir-col-side { position: static; }
}

@media (max-width: 620px) {
    .dir-hero { padding: 58px 0 72px; }
    .dir-find-label { font-size: 17px; }
    .dir-find-top { gap: 10px; }
    .dir-find-bar { grid-template-columns: 1fr; }
    .dir-find-split { height: 1px; }
    .dir-found { grid-template-columns: 1fr; }
    .dir-hero--split { padding-bottom: 84px; }
    .dir-hero--split .local-team-panel { margin-top: 28px; }
    .dir-search { margin-top: 22px; padding: 20px; }
    .dir-section { padding-top: 48px; }
    .dir-join { padding: 34px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .dir-grass { animation: none; }
    .dir-card, .dir-area, .dir-btn, .dir-found li, .dir-found button { transition: none; }
    .dir-all > summary i { transition: none; }
}