/* ============================================================
   search.css
   Scoped to the therapist search page via .SearchPage.
   ============================================================ */

@font-face {
    font-family: 'Keskiyon Lumisade';
    src: url('../fonts/KeskiyonLumisade.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.SearchPage {
    --paper-ink: #17161A;
    --paper-rule: rgba(56, 37, 87, .18);
    --display: 'Keskiyon Lumisade', 'Haettenschweiler', 'Arial Narrow', sans-serif;
    --label: 'IBM Plex Sans', 'Segoe UI', sans-serif;
}

/* ---------- top band ----------
   Hero and search bar in one full-bleed section closed by a rule,
   the same shape as the homepage's values strip. The band breaks
   out of the page's 1200px track; its inner wrapper puts the
   content back on that track. */
.SearchPage .search-top {
    position: relative;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    border-bottom: var(--rule);
    margin-bottom: var(--space-xl);
}

.SearchPage .search-top-inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px) var(--space-lg);
}

.SearchPage .search-hero-art {
    position: absolute;
    top: calc(-1 * var(--hero-rise, 150px));
    right: 0;
    /* height, not width, drives this art — it is portrait */
    height: calc(100% + var(--hero-rise, 150px));
    width: 60%;
    z-index: 0;
    background-image: url('../images/General/FloralFrameBottomRight.png');
    background-size: auto 150%;
    background-position: right bottom;
    background-repeat: no-repeat;
    pointer-events: none;
}

.SearchPage .search-hero-text {
    position: relative;
    z-index: 1;
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
    min-height: clamp(200px, 22vw, 290px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.SearchPage .search-top h1 {
    font-family: var(--display);
    font-weight: 400 !important;
    font-size: clamp(2.6rem, 6.8vw, 5.2rem) !important;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: left !important;
    margin: 0 0 var(--space-md) !important;
    color: var(--paper-ink) !important;
}

.SearchPage .search-top h1 span { display: block; }
.SearchPage .search-top h1 .w-a { color: var(--justicePurple); }
.SearchPage .search-top h1 .w-c { color: var(--justiceOrange); }

.SearchPage .search-top p {
    margin: 0;
    max-width: 44%;
    font-size: 16px;
    font-weight: 600;
    line-height: var(--leading-body);
    color: var(--paper-ink);
}

/* the bar sits inside the band, above the rule */
.SearchPage .search-top .SearchMenu {
    position: relative;
    z-index: 1;
    margin: 0 !important;
}

@media (max-width: 900px) {
    .SearchPage .search-hero-art {
        width: 100%;
        opacity: .28;
        background-size: auto 110%;
    }

    .SearchPage .search-top p { max-width: 100%; }
}

/* ============================================================
   Filter groups
   Goal: every option stays visible and scannable. No hiding
   behind dropdowns — seeing the full vocabulary is the point.
   ============================================================ */

.SearchPage #AdvancedSearchFilterContainer {
    /* same paper treatment as the page ground, one step lighter so
       the panel reads as a sheet laid on top of it */
    background-color: rgb(255, 238, 222);
    /* The halftone is a background layer rather than a pseudo-element: this
       panel already uses ::after to draw the rule beneath it, and a second
       one would have replaced it. Mirrored copy, because a background layer
       cannot be flipped in CSS. */
    background-image:
        url('../images/Textures/halftone-fade-right.png'),
        url('../images/General/PaperTile.jpg');
    background-position: right bottom, top left;
    background-size: 300px auto, 200px 200px;
    background-repeat: no-repeat, repeat;
    background-blend-mode: normal, multiply;
    border: var(--hairline);
    border-radius: 0;
    padding: var(--space-lg);
    position: relative;
}

/* ---------- group header ----------
   Top level and nested groups need different treatment. The rule
   below used to hit every <details>, so the inner groups drew their
   own full-width lines inside the outer one and everything ran
   together with no breathing room. */
.SearchPage #AdvancedSearchFilterContainer details {
    padding: 0;
    border: 0;
}

/* outermost groups: separated by a rule */
.SearchPage #AdvancedSearchFilterContainer > div > details {
    border-top: var(--rule);
    padding: 0 0 var(--space-lg);
}

/* nested groups: a card, not another ruled band */
.SearchPage #AdvancedSearchFilterContainer details details {
    background: rgba(255, 252, 248, .7);
    border: var(--hairline);
    padding: 0 var(--space-md) var(--space-md);
    margin-bottom: var(--space-md);
}

.SearchPage #AdvancedSearchFilterContainer details details:last-child {
    margin-bottom: 0;
}

/* the column headings above each group */
.SearchPage #AdvancedSearchFilterContainer > div > details > .row > .col-md-6 > h4 {
    font-family: var(--label);
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tomatoRed) !important;
    padding-bottom: var(--space-xs);
    margin: 0 0 var(--space-md) !important;
    border-bottom: var(--rule);
}

/* room between the two columns */
.SearchPage #AdvancedSearchFilterContainer > div > details > .row > .col-md-6 {
    padding-inline: var(--space-sm);
}

/* labels and inputs inside the groups */
.SearchPage #AdvancedSearchFilterContainer .form-label {
    font-family: var(--label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--justicePurple);
    margin-bottom: var(--space-2xs);
}

.SearchPage #AdvancedSearchFilterContainer .form-control,
.SearchPage #AdvancedSearchFilterContainer select.form-control {
    border-radius: 0;
    border: 1px solid rgba(56, 37, 87, .22);
    background-color: #fff;
    padding: 0 var(--space-sm);
    height: var(--control-height);
    font-size: 14px;
}

.SearchPage #AdvancedSearchFilterContainer .form-control:focus {
    outline: none;
    border-color: var(--justicePurple);
    box-shadow: 0 0 0 3px rgba(56, 37, 87, .12);
}

.SearchPage #AdvancedSearchFilterContainer details summary {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    cursor: pointer;
    padding: var(--space-md) 0;
    margin: 0 !important;
}

.SearchPage #AdvancedSearchFilterContainer details summary::-webkit-details-marker {
    display: none;
}

/* caret drawn so it can rotate; the native marker can't be styled */
.SearchPage #AdvancedSearchFilterContainer details summary::before {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--justicePurple);
    border-bottom: 2px solid var(--justicePurple);
    transform: rotate(-45deg);
    transition: transform .18s ease, filter .18s ease;
}

.SearchPage #AdvancedSearchFilterContainer details[open] > summary::before {
    transform: rotate(45deg);
}

/* Archivo in sentence case — the display face plus all-caps was
   shouting a long title at the reader */
.SearchPage #AdvancedSearchFilterContainer summary h4 {
    font-family: 'Archivo', 'IBM Plex Sans', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0;
    line-height: var(--leading-snug);
    text-transform: none;
    color: var(--justicePurple) !important;
    margin: 0 !important;
}

/* nested group titles sit a step down from their parent */
.SearchPage #AdvancedSearchFilterContainer details details summary h4 {
    font-size: 15.5px !important;
    font-weight: 600 !important;
    color: var(--justiceOrange) !important;
}

/* ---------- Core Values: category bands ----------
   Categories were <strong> tags with an <hr> after each, so the
   groups ran together with no anchor. Treated as real sub-heads now. */
.SearchPage #AdvancedSearchFilterContainer .FormSectionSubHeader {
    display: block;
    font-family: var(--label);
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--tomatoRed) !important;
    padding: var(--space-md) 0 var(--space-xs);
    margin: 0;
    border-bottom: var(--hairline);
}

.SearchPage #AdvancedSearchFilterContainer .FormSectionSubHeader:first-child {
    padding-top: 0;
}

/* the <hr> between categories is redundant now the heads carry a rule */
.SearchPage #AdvancedSearchFilterContainer details hr {
    display: none;
}

.SearchPage .filter-clear {
    margin-left: auto;
    font-family: var(--label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tomatoRed);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px 2px;
}

.SearchPage .filter-clear:hover { color: var(--justicePurple); }

/* ---------- the options themselves ----------
   Dense multi-column list, capped height with its own scroll so a
   60-item vocabulary is fully browsable without pushing the page
   to three thousand pixels. */
/* Bootstrap's .col-md-4 brings its own 12px gutters, which is what
   made the vertical rhythm feel uneven — rows sat on one spacing and
   columns on another. Zero them and let the rows own the spacing. */
.SearchPage #AdvancedSearchFilterContainer details > .row {
    margin: 0;
    row-gap: 0;
}

.SearchPage #AdvancedSearchFilterContainer details > .row > [class^="col-"] {
    padding-inline: 0;
}

/* One fixed row height across every option, so a one-word label and
   a two-line label occupy the same band and the list reads as a
   proper column rather than a ragged stack. */
.SearchPage .pill-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--row-height);
    margin: 0;
    padding: 0 var(--space-sm);
    cursor: pointer;
    user-select: none;
    transition: background .12s;
}

.SearchPage .pill-toggle:hover {
    background: rgba(216, 101, 43, .1);
}

.SearchPage .pill-toggle .form-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.SearchPage .pill-toggle .form-check-label {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: 'Archivo', 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: var(--leading-snug);
    color: var(--paper-ink);
    margin: 0;
}

.SearchPage .pill-toggle .form-check-label::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    border: 1.5px solid rgba(56, 37, 87, .38);
    background: #fff;
    transition: background .12s, border-color .12s;
}

.SearchPage .pill-toggle:has(input[type="radio"]) .form-check-label::before {
    border-radius: 50%;
}

/* checked: tick, purple semibold label, warm tint */
.SearchPage .pill-toggle:has(.form-check-input:checked) {
    background: rgba(216, 101, 43, .14);
}

.SearchPage .pill-toggle:has(.form-check-input:checked) .form-check-label {
    color: var(--justicePurple);
    font-weight: 600;
}

.SearchPage .pill-toggle .form-check-input:checked + .form-check-label::before {
    background: var(--justicePurple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.6L10 3.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
    border-color: var(--justicePurple);
}

.SearchPage .pill-toggle:has(input[type="radio"]) .form-check-input:checked + .form-check-label::before {
    background-image: none;
    box-shadow: inset 0 0 0 3px #fff;
}

/* the native box is hidden, so focus needs its own visible state */
.SearchPage .pill-toggle:has(.form-check-input:focus-visible) {
    outline: 3px solid var(--justiceOrange);
    outline-offset: 1px;
}

/* ============================================================
   Search bar + advanced-search toggle
   The two blocks above the filter panel.
   ============================================================ */

.SearchPage .SearchMenu {
    margin: 0 0 18px !important;
    gap: 14px;
    align-items: stretch;
}

/* the bar reads as one printed object: square, hairline edge, the
   button sharing its border rather than floating inside a rounded box */
.SearchPage .SearchBarIconGroup {
    border-radius: 0;
    border: 1.5px solid rgba(56, 37, 87, .28);
    background: rgba(255, 252, 248, .92);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.SearchPage .SearchBarIconGroup:focus-within {
    border-color: var(--justicePurple);
    box-shadow: 0 0 0 3px rgba(56, 37, 87, .12);
}

/* Bootstrap's .form-control is width:100% with no flex sizing, so it
   and the button were negotiating for space instead of the input
   simply taking whatever is left. */
.SearchPage .SearchBarIconGroup input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    padding: 15px 18px;
    font-size: 15px;
    box-shadow: none;
}

.SearchPage .SearchBarIconGroup input:focus {
    outline: none;
    box-shadow: none;
}

.SearchPage .SearchBarIconGroup input::placeholder {
    color: rgba(23, 22, 26, .45);
}

.SearchPage .SearchBarIconGroup .button {
    /* fixed share of the bar rather than sizing off its own text —
       as a content-sized button it stayed a sliver next to a very
       wide input no matter how much padding it had */
    flex: 0 0 22%;
    min-width: 150px;
    justify-content: center;
    align-items: center;
    display: flex;
    white-space: nowrap;
    border-radius: 0;
    padding: 0 20px;
    /* .button sets height: fit-content globally, which opts it out of
       stretching to the flex line — that is why it never filled the
       bar's height regardless of padding */
    height: auto !important;
    align-self: stretch;
    font-family: var(--label);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    background-color: var(--justicePurple);
    border: 0;
    border-left: 1.5px solid rgba(56, 37, 87, .28);
    transform: none;
}

.SearchPage .SearchBarIconGroup .button:hover {
    background-color: var(--justiceOrange);
    box-shadow: none;
    transform: none;
}

/* ---------- advanced search toggle ---------- */
.SearchPage .AdvancedSearchLink {
    width: auto;
    flex: none;
}

.SearchPage .AdvancedSearchLink .TextHyperLink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 18px;
    border: 1.5px solid rgba(56, 37, 87, .28);
    font-family: var(--label);
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--justicePurple) !important;
    background: transparent;
    transition: background .15s, color .15s, border-color .15s;
}

/* the sliders glyph marks it as "more controls", not another search */
.SearchPage .AdvancedSearchLink .TextHyperLink::before {
    content: "";
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 4h9M13 4h2M1 12h3M7 12h8'/%3E%3Ccircle cx='11.5' cy='4' r='1.8'/%3E%3Ccircle cx='5.5' cy='12' r='1.8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 4h9M13 4h2M1 12h3M7 12h8'/%3E%3Ccircle cx='11.5' cy='4' r='1.8'/%3E%3Ccircle cx='5.5' cy='12' r='1.8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}

.SearchPage .AdvancedSearchLink .TextHyperLink:hover {
    background: var(--justicePurple);
    border-color: var(--justicePurple);
    color: #fff !important;
}

@media (max-width: 767px) {
    .SearchPage .AdvancedSearchLink .TextHyperLink {
        width: 100%;
        justify-content: center;
        padding: 13px 18px;
    }
}

/* inline radio pairs (Yes / No) sit side by side, not stacked */
.SearchPage .pill-toggle.is-inline {
    display: inline-flex;
    width: auto;
    min-width: 96px;
    border-bottom: 0;
    margin-right: var(--space-xs);
}

/* ============================================================
   Filter tabs
   Four groups as a tab strip: black bar on the paper ground, the
   selected tab cut out of it so it reads as attached to its panel.
   ============================================================ */

.SearchPage .filter-tabs {
    display: grid;
    /* four across at every width — the groups are the map of the
       filter set, so collapsing them hides the structure */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: transparent;
    border-bottom: var(--hairline);
    margin-bottom: var(--space-lg);
}

.SearchPage .filter-tab + .filter-tab {
    border-left: var(--hairline);
}

.SearchPage .filter-tab {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: var(--space-xs);
    min-height: 60px;
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--display);
    font-size: 16px;
    /* the display face only ships Regular — bold here would be a
       browser-synthesised smear, never a real weight */
    font-weight: 400;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: var(--leading-snug);
    color: rgba(23, 22, 26, .55);
    transition: color .14s;
}

.SearchPage .filter-tab:hover {
    color: var(--justiceOrange);
}

/* selected tab: purple, marked with the same hand-drawn stroke the
   nav uses for the current page */
.SearchPage .filter-tab[aria-selected="true"] {
    color: var(--justicePurple);
}

.SearchPage .filter-tab:focus-visible {
    outline: 3px solid var(--justiceOrange);
    outline-offset: -3px;
}

/* marks a group that holds selections while its panel is hidden */
.SearchPage .filter-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--justiceOrange);
}

.SearchPage .filter-dot[hidden] { display: none !important; }

/* ---------- panels ---------- */
.SearchPage .filter-panel {
    border: 0;
    padding: 0 0 var(--space-md);
    background: none;
}

.SearchPage .filter-panel[hidden] { display: none !important; }

/* the summary is the tab now */
.SearchPage .filter-panel > details > summary {
    display: none !important;
}

.SearchPage .filter-panel > details {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

.SearchPage .filter-panel .filter-clear {
    display: block;
    margin: 0 0 var(--space-md) auto;
}

@media (max-width: 760px) {
    .SearchPage .filter-tab {
        font-size: 12px;
        padding: var(--space-xs) var(--space-2xs);
        min-height: 52px;
    }
}

/* ============================================================
   Inside a filter panel
   The original markup mixed Bootstrap columns, ad-hoc inline grids
   and three different margin utilities, so no two fields shared a
   baseline. Everything below puts them on one rhythm.
   ============================================================ */

/* the two top-level columns, with a divider between them */
.SearchPage .filter-panel > details > .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xl);
    margin: 0;
}

.SearchPage .filter-panel > details > .row > .col-md-6 {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
}

.SearchPage .filter-panel > details > .row > .col-md-6:first-child {
    border-right: var(--hairline);
    padding-right: var(--space-2xl);
}

@media (max-width: 860px) {
    .SearchPage .filter-panel > details > .row {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .SearchPage .filter-panel > details > .row > .col-md-6:first-child {
        border-right: 0;
        padding-right: 0;
        padding-bottom: var(--space-xl);
        border-bottom: var(--hairline);
    }
}

/* every field block gets the same gap, whatever utility it carried */
.SearchPage .filter-panel .mb-3,
.SearchPage .filter-panel .mb-4 {
    margin-bottom: var(--space-lg) !important;
}

.SearchPage .filter-panel .mb-3:last-child,
.SearchPage .filter-panel .mb-4:last-child {
    margin-bottom: 0 !important;
}

/* paired fields (Name/Gender, Availability/Cost) as a real grid so
   their labels and controls sit on the same baseline */
.SearchPage .filter-panel .col-md-6 > .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    margin: 0;
    align-items: start;
}

.SearchPage .filter-panel .col-md-6 > .row > [class^="col-"] {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
}

/* option groups (Languages, Populations, Cost) read as one unit */
.SearchPage .opt-block {
    border: var(--hairline);
    background: rgba(255, 252, 248, .55);
    padding: var(--space-xs);
}

.SearchPage .opt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-md);
}

.SearchPage .opt-stack {
    display: flex;
    flex-direction: column;
}

/* rows inside an option block lose the outer divider — the block
   border already encloses them */
.SearchPage .opt-block .pill-toggle {
    padding-inline: var(--space-xs);
}

/* the languages block is a Bootstrap .row wrapper; flatten it */
.SearchPage #advSearchLanguages {
    display: block !important;
    margin: 0 0 var(--space-lg) !important;
}

.SearchPage #advSearchLanguages > .col-12 {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
}

/* sliding-scale box inherits the panel's language */
.SearchPage #sliderContainerSearch {
    border: var(--hairline) !important;
    border-radius: 0 !important;
    background: rgba(255, 252, 248, .8) !important;
    padding: var(--space-sm) !important;
    margin-top: var(--space-xs) !important;
}

/* the submit button under the panels */
.SearchPage #advSearchClinical .button {
    border-radius: 0;
    height: var(--control-height);
    font-family: var(--label);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* ============================================================
   Panel interior — corrections
   ============================================================ */

/* Personal / Practice runs full width and stacks. The two-up split
   forced long field labels into narrow columns and never lined up. */
.SearchPage .filter-panel > details > .row {
    display: block !important;
    gap: 0 !important;
}

.SearchPage .filter-panel > details > .row > .col-md-6 {
    width: 100% !important;
    max-width: none !important;
    border-right: 0 !important;
    padding: 0 !important;
}

.SearchPage .filter-panel > details > .row > .col-md-6 + .col-md-6 {
    margin-top: var(--space-xl);
    padding-top: var(--space-xl) !important;
    border-top: var(--hairline);
}

/* Option grids size to their longest label instead of a fixed
   column count, so "Domestic or Intimate Partner Violence" stays on
   one line rather than wrapping in a 33% column. */
/* `:has(.pill-toggle)` matched any ancestor row holding a checkbox
   at any depth, including the Personal/Practice wrapper. Scoped to a
   row whose OWN column children hold the toggles. */
.SearchPage .filter-panel .row:has(> [class^="col-"] > .pill-toggle),
.SearchPage .opt-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
    column-gap: var(--space-md) !important;
    row-gap: 0 !important;
    margin: 0 !important;
}

.SearchPage .filter-panel .row:has(> [class^="col-"] > .pill-toggle) > [class^="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

/* Core Values category names */
.SearchPage #AdvancedSearchFilterContainer .FormSectionSubHeader {
    font-size: 15px !important;
    color: var(--justicePurple) !important;
    border-bottom: 0 !important;
    padding: var(--space-lg) 0 var(--space-xs) !important;
}

.SearchPage #AdvancedSearchFilterContainer .FormSectionSubHeader:first-child {
    padding-top: 0 !important;
}

/* ============================================================
   RESULT CARDS
   Markup rewritten with its own classes — the old ones carried
   percentage widths and radii from the previous design that no
   amount of overriding could keep straight.

   Order of information: who they are and where → how they talk
   about their work → how you reach them → the practical facts.
   ============================================================ */

.SearchPage .tcard {
    display: grid;
    /* The marks and the shadow are positioned against this. Until now that
       worked only as a side effect of the filter below — a filter makes an
       element a containing block — so anything that cleared the filter sent
       them to the viewport instead. Stated outright. */
    position: relative;
    --photo-col: 240px;
    grid-template-columns: var(--photo-col) minmax(0, 1fr) 260px;
    grid-template-areas:
        "photo main facts"
        "action action action";
    margin-bottom: var(--space-md);
    padding: var(--space-lg) var(--space-md) var(--space-xl);
    background-color: rgb(253, 246, 236);
    background-image: url('../images/General/PaperTile.jpg');
    background-size: 200px 200px;
    background-repeat: repeat;
    background-blend-mode: multiply;
    border: var(--hairline);
    box-shadow: 0 1px 2px rgba(56,37,87,.06), 0 8px 20px rgba(56,37,87,.09);
    transition: box-shadow .18s ease, transform .18s ease;
}

.SearchPage .tcard:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(56,37,87,.08), 0 14px 30px rgba(56,37,87,.15);
}

/* The shadow is painted into the artwork, so there is no CSS shadow to
   deepen on hover — the lift alone carries it. */
/* One sheet on every row, used whole and stretched to it. Its top and
   bottom are straight cuts and only the sides are torn — scanning every row,
   the purple left edge bites 2.5% in and the right 3.5% — so the padding is
   mostly about the left, and the deep bottom clearance the torn-base sheets
   needed is gone. */

/* ---------- portrait ---------- */
/* Stretched to the row, not held to a ratio — the photo is always
   exactly as tall as the tallest column beside it, so no card ever
   shows dead space under it. */
.SearchPage .tcard-photo {
    grid-area: photo;
    position: relative;
    /* start, not stretch: a long bio used to pull the portrait taller with
       the row. It holds one height now whatever the card does. */
    align-self: start;
    margin: var(--space-md);
    height: 300px;
    background: rgba(56, 37, 87, .07);
    overflow: hidden;
}

.SearchPage .tcard-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* faces sit high in most portraits */
    object-position: center 22%;
    display: block;
}

/* Title and location form the left column; the gender strip holds the
   right, its top level with the first line of the title. */
.SearchPage .tcard-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
}

.SearchPage .tcard-meta-main {
    min-width: 0;
}

.SearchPage .tcard-pronoun {
    position: static;
    flex: none;
    align-self: flex-start;
    font-family: var(--label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    /* A torn strip of purple paper rather than a flat panel. Stretched to
       100% 100% so the strip takes the label's width however long the
       gender reads, and the ragged edges stay at the edges. */
    background: url('../images/Textures/torn-strip-purple.png') center / 100% 100% no-repeat;
    /* The torn edges eat into the corners, so the text needs to sit
       further in than it did against a square panel. */
    /* Centring is done by the flex box, not by guessing padding against
       the strip's ragged edges. The extra 4-5px keeps the type clear of
       the torn edge on every side. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The strip's solid mass sits at 54.8% of its height, not 50% — there is
       more ragged edge at the top than at the bottom — so symmetric padding leaves
       the text reading high. The extra top padding drops it onto the
       graphic's optical centre. */
    padding: 15px 16px 11px;
    text-shadow: 0 1px 2px rgba(23, 22, 26, .45);
}

/* ---------- the human part ---------- */
.SearchPage .tcard-main {
    grid-area: main;
    min-width: 0;
    padding: var(--space-md) var(--space-md) var(--space-md) 0;
}

.SearchPage .tcard-name {
    font-family: var(--display);
    font-weight: 400 !important;
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: left !important;
    color: var(--paper-ink) !important;
    margin: 0 !important;
}

/* the credential is a qualification, not part of the name — its
   own line, smaller, in the text face */
.SearchPage .tcard-cred {
    display: block;
    margin-bottom: 2px;
    font-family: var(--label);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: none;
    color: rgba(23, 22, 26, .62);
    margin-top: var(--space-3xs);
}

.SearchPage .tcard-place {
    font-family: var(--label);
    font-size: 14px;
    font-weight: 600;
    color: var(--justicePurple);
    margin: var(--space-2xs) 0 0;
}

.SearchPage .tcard-bio {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: var(--space-sm) 0 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(23, 22, 26, .84);
}

/* ---------- quick tags ---------- */
.SearchPage .tcard-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    margin: var(--space-sm) 0 0;
    padding: 0;
}

.SearchPage .tcard-tag {
    font-family: var(--label);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    /* Dark ink: the yellow block is far too light to carry white type. */
    color: #17161A;
    background: url('../images/Textures/rect-rough-yellow.png') center / 100% 100% no-repeat;
    border: 0;
    /* The block has ragged edges, so the text sits further in than it did
       against a clean rectangle. */
    padding: 7px 14px 8px;
}

/* social row styles live in social-icons.css */

/* ---------- facts slip ---------- */
.SearchPage .tcard-facts {
    grid-area: facts;
    align-self: start;
    margin: var(--space-md) var(--space-md) var(--space-md) 0;
    padding: var(--space-md);
    background-color: rgb(255, 245, 235);
    background-image: url('../images/General/PaperTile.jpg');
    background-size: 200px 200px;
    background-repeat: repeat;
    background-blend-mode: multiply;
    border: var(--hairline);
}

/* label above value — side by side, a long label and a long value
   collide in a column this narrow */
.SearchPage .tcard-fact {
    padding: var(--space-xs) 0;
    border-bottom: 1px dashed rgba(56, 37, 87, .2);
    overflow-wrap: anywhere;
}

.SearchPage .tcard-fact:first-child { padding-top: 0; }

.SearchPage .tcard-fact:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.SearchPage .tcard-fact-label {
    display: block;
    font-family: var(--label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--justicePurple);
    margin-bottom: var(--space-3xs);
}

.SearchPage .tcard-fact-value {
    display: block;
    font-size: 13px;
    line-height: var(--leading-snug);
    color: var(--paper-ink);
}

.SearchPage .tcard-fact-note {
    display: block;
    margin-top: var(--space-3xs);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--justiceOrange);
}

/* ---------- action bar ---------- */
.SearchPage .tcard-action {
    grid-area: action;
    /* The portrait and the facts card each carry a 16px margin; the bar had
       none, so it ran 16px wider on both sides and failed to line up with
       either. This matches them. */
    margin-left: var(--space-md);
    margin-right: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    height: 48px;
    border-top: var(--hairline);
    background: var(--justicePurple);
    color: #fff !important;
    font-family: var(--label);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: background .15s;
}

.SearchPage .tcard-action:hover {
    background: var(--justiceOrange);
    color: #fff !important;
}

@media (max-width: 1080px) {
    .SearchPage .tcard {
        grid-template-columns: 170px minmax(0, 1fr);
        grid-template-areas:
            "photo main"
            "facts facts"
            "action action";
    }

    .SearchPage .tcard-facts {
        margin: 0 var(--space-md) var(--space-md);
    }
}

@media (max-width: 620px) {
    .SearchPage .tcard {
        grid-template-columns: 1fr;
        grid-template-areas:
            "photo"
            "main"
            "facts"
            "action";
    }

    .SearchPage .tcard-photo {
        height: 260px;
        min-height: 0;
    }

    .SearchPage .tcard-main {
        padding: 0 var(--space-md) var(--space-md);
    }
}

/* the 100vw band would otherwise widen the page */
body:has(.SearchPage) {
    overflow-x: hidden;
}

/* ------------------------------------------------------------
   .SearchBarIconGroup carries width:100% from style.css. In the
   flex row that made it claim the whole line, pushing the Advanced
   Search button past the container edge where the band's overflow
   clipped it out of sight. Let it flex instead.
   ------------------------------------------------------------ */
.SearchPage .SearchMenu {
    display: flex;
    align-items: stretch;
    gap: var(--space-sm);
}

.SearchPage .SearchBarIconGroup {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
}

.SearchPage .AdvancedSearchLink {
    flex: 0 0 auto;
}

/* ---- art is never cropped ----
   `contain` fits the whole image inside its box on both axes, so
   nothing is ever cut off; the box is tall enough to keep it large. */
.SearchPage .search-hero-art {
    --hero-rise: 200px;
    background-size: contain;
    background-position: right bottom;
}

/* ------------------------------------------------------------
   Advanced Search: orange outline, type and glyph. The purple on
   the textured ground was too low-contrast to find.
   ------------------------------------------------------------ */
.SearchPage .AdvancedSearchLink .TextHyperLink {
    color: var(--justiceOrange) !important;
    border-color: var(--justiceOrange);
}

.SearchPage .AdvancedSearchLink .TextHyperLink:hover {
    background: var(--justiceOrange);
    border-color: var(--justiceOrange);
    color: #fff !important;
}

/* ------------------------------------------------------------
   Photo opposite the headline.
   The band becomes a two-column grid: copy left, cropped photo
   right. The floral cut-out stays absolute and overlaps the photo's
   right edge, so the two read as one collage rather than two
   rectangles side by side.
   ------------------------------------------------------------ */
.SearchPage .search-top-inner {
    display: grid;
    /* One column since the hero photo was removed — the 38% track it used
       to occupy would otherwise sit empty beside the copy. */
    grid-template-columns: minmax(0, 1fr);
    column-gap: clamp(24px, 4vw, 56px);
    align-items: stretch;
}

.SearchPage .search-hero-text {
    grid-column: 1;
    grid-row: 1;
}

.SearchPage .search-hero-photo {
    grid-column: 2;
    grid-row: 1;
    z-index: 0;
    margin: var(--space-lg) 0;
    background-image: url('../images/General/Protest.jpg');
    /* cover: fills the block and crops, never letterboxes */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: var(--hairline);
}

/* the bar spans the full band, under both columns */
.SearchPage .search-top .SearchMenu {
    grid-column: 1 / -1;
    grid-row: 2;
}

/* floral sits on top of the photo's right edge, collage style */
.SearchPage .search-hero-art {
    width: 30%;
    z-index: 2;
}

.SearchPage .search-top p {
    max-width: 100%;
}

@media (max-width: 900px) {
    .SearchPage .search-top-inner {
        grid-template-columns: 1fr;
    }

    .SearchPage .search-hero-photo {
        grid-column: 1;
        grid-row: 2;
        height: 200px;
        margin: 0 0 var(--space-lg);
    }

    .SearchPage .search-top .SearchMenu {
        grid-column: 1;
        grid-row: 3;
    }
}

/* ------------------------------------------------------------
   The floral frame belongs to the band, not the 1200px track.
   Making the inner wrapper static hands the art's containing block
   to .search-top — which is the full 100vw band — so `right: 0`
   lands on the browser edge instead of the content gutter.
   ------------------------------------------------------------ */
.SearchPage .search-top-inner {
    position: static;
}

.SearchPage .search-hero-art {
    right: 0;
    width: clamp(220px, 26vw, 420px);
}

/* therapist portrait, one step larger */
.SearchPage .tcard {
    --photo-col: 280px;
    grid-template-columns: var(--photo-col) minmax(0, 1fr) 260px;
}

@media (max-width: 1080px) {
    .SearchPage .tcard {
        /* Wider portrait column: a taller, narrower card reads as a column of
           text, and giving the photo more width balances it. */
        --photo-col: 260px;
        grid-template-columns: var(--photo-col) minmax(0, 1fr);
    }
}

@media (max-width: 620px) {
    .SearchPage .tcard {
        grid-template-columns: 1fr;
    }
}

/* The floral sits behind everything in the band — it is decoration,
   not a layer that should ever cover the photo, the type or the bar. */
.SearchPage .search-hero-art {
    z-index: 0;
}

.SearchPage .search-hero-photo {
    position: relative;
    z-index: 1;
}

.SearchPage .search-hero-text,
.SearchPage .search-top .SearchMenu {
    position: relative;
    z-index: 2;
}

/* ------------------------------------------------------------
   The option-grid rule uses :has(.pill-toggle), which matches any
   ancestor row holding a checkbox at any depth — including the
   Personal/Practice wrapper. That turned its two columns into a
   3-up auto-fill grid with an empty third cell. The wrapper row is
   forced back to a plain stack here: Personal & Location full width
   on row one, Practice Details full width on row two.
   ------------------------------------------------------------ */
.SearchPage .filter-panel > details > .row {
    display: block !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
}

.SearchPage .filter-panel > details > .row > .col-md-6 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.SearchPage .filter-panel > details > .row > .col-md-6 + .col-md-6 {
    margin-top: var(--space-xl) !important;
    padding-top: var(--space-xl) !important;
    border-top: var(--hairline);
}

/* ------------------------------------------------------------
   Personal & Location, laid out internally:
   left column  — Name, Gender, Location
   right column — Languages, spanning both rows
   The section still occupies one full-width band; Practice Details
   is the band beneath it.
   ------------------------------------------------------------ */
.SearchPage .filter-panel > details > .row > .col-md-6:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-2xl);
    align-items: start;
}

/* the section heading spans both columns */
.SearchPage .filter-panel > details > .row > .col-md-6:first-child > h4 {
    grid-column: 1 / -1;
    grid-row: 1;
}

/* Name + Gender pair, then Location, stacked in the left column */
.SearchPage .filter-panel > details > .row > .col-md-6:first-child > .row:not(#advSearchLanguages) {
    grid-column: 1;
    grid-row: 2;
}

/* :not(h4) matters — the section heading also carries .mb-3, so it
   was being placed into row 3 on top of the Location field. */
.SearchPage .filter-panel > details > .row > .col-md-6:first-child > div.mb-3 {
    grid-column: 1;
    grid-row: 3;
}

/* Languages fills the right column across both rows */
.SearchPage #advSearchLanguages {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    margin: 0 !important;
}

/* narrower column, so the language list wants a smaller track */
.SearchPage #advSearchLanguages .opt-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
}

@media (max-width: 860px) {
    .SearchPage .filter-panel > details > .row > .col-md-6:first-child {
        display: block !important;
    }

    .SearchPage #advSearchLanguages {
        margin-top: var(--space-lg) !important;
    }
}

/* ------------------------------------------------------------
   Practice Details: insurance first, then one field per row.
   Reordered with flex `order` rather than moving markup, so the
   Razor bindings and the cost slider's JS stay untouched.
   ------------------------------------------------------------ */
.SearchPage .filter-panel > details > .row > .col-md-6:last-child {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-lg);
}

.SearchPage .filter-panel > details > .row > .col-md-6:last-child > h4 {
    order: -2;
}

/* Accepts Insurance is the last block in source order */
.SearchPage .filter-panel > details > .row > .col-md-6:last-child > .mb-3:last-child {
    order: -1;
}

/* the gap owns the rhythm now, so the utility margins go */
.SearchPage .filter-panel > details > .row > .col-md-6:last-child > * {
    margin-bottom: 0 !important;
}

/* Availability and Cost were a 2-up row — each gets its own row */
.SearchPage .filter-panel > details > .row > .col-md-6:last-child > .row {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-lg);
    margin: 0 !important;
}

.SearchPage .filter-panel > details > .row > .col-md-6:last-child > .row > [class^="col-"] {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ------------------------------------------------------------
   Personal & Location: content sat vertically centred in tall grid
   rows. Pin it to the top and let one gap set the rhythm.
   ------------------------------------------------------------ */
.SearchPage .filter-panel > details > .row > .col-md-6:first-child {
    align-content: start;
    row-gap: var(--space-lg);
}

.SearchPage .filter-panel > details > .row > .col-md-6:first-child > * {
    margin-bottom: 0 !important;
    align-self: start;
}

/* ------------------------------------------------------------
   Results: give the heading room and separate it from the filters
   and from the first card.
   ------------------------------------------------------------ */
.SearchPage .SearchResultsHeading {
    font-family: var(--display);
    font-weight: 400 !important;
    font-size: 30px !important;
    line-height: var(--leading-tight);
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: left !important;
    color: var(--justicePurple) !important;
    /* clears the filter panel above and the first card below */
    margin: var(--space-3xl) 0 var(--space-2xl) !important;
    padding-top: var(--space-2xl);
    border-top: var(--rule);
}

.SearchPage .SearchResultsHeadingFilter {
    align-items: baseline;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.SearchPage .card-footer {
    background: none;
    border: 0;
    padding: var(--space-lg) 0 0;
    margin-top: var(--space-lg);
    border-top: var(--hairline);
}

/* Option rows centre their contents vertically, so a label that
   wraps to two lines keeps its checkbox on the middle axis instead
   of pinned to the first line. */
.SearchPage .filter-panel .row:has(> [class^="col-"] > .pill-toggle),
.SearchPage .opt-grid {
    align-items: center !important;
}

.SearchPage .pill-toggle,
.SearchPage .pill-toggle .form-check-label {
    align-items: center !important;
}

.SearchPage .pill-toggle .form-check-label::before {
    margin-top: 0;
}

/* ============================================================
   Hero frames
   Two collages flanking the band, anchored to its bottom corners
   and running to the browser edges. They replace the single floral
   cut-out and the separate protest photo — the right-hand collage
   already carries that photograph.
   ============================================================ */

/* the band is now one centred column between the two frames */
.SearchPage .search-top-inner {
    display: block;
}

.SearchPage .search-frame {
    position: absolute;
    bottom: 0;
    top: calc(-1 * var(--hero-rise, 200px));
    width: clamp(180px, 24vw, 380px);
    z-index: 0;
    background-repeat: no-repeat;
    /* contain: the whole collage is always visible, never cropped */
    background-size: contain;
    pointer-events: none;
}

.SearchPage .search-frame-left {
    left: 0;
    background-image: url('../images/General/PeopleFrameBottomLeft.png');
    background-position: left bottom;
}

.SearchPage .search-frame-right {
    right: 0;
    background-image: url('../images/General/RadicalACtFrameBottomRight.png');
    background-position: right bottom;
}

/* copy sits between the frames */
.SearchPage .search-hero-text {
    position: relative;
    z-index: 2;
    padding-inline: clamp(0px, 16vw, 300px);
    padding-block: var(--space-xl);
    min-height: clamp(260px, 26vw, 360px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.SearchPage .search-top h1 {
    text-align: center !important;
}

.SearchPage .search-top p {
    margin-inline: auto;
    max-width: 48ch;
}

.SearchPage .search-top .SearchMenu {
    position: relative;
    z-index: 2;
    padding-inline: clamp(0px, 10vw, 180px);
}

@media (max-width: 900px) {
    /* the frames become a quiet backdrop rather than a squeeze */
    .SearchPage .search-frame {
        width: 42%;
        opacity: .3;
    }

    .SearchPage .search-hero-text,
    .SearchPage .search-top .SearchMenu {
        padding-inline: 0;
    }
}

/* frames a step larger */
.SearchPage .search-frame {
    width: clamp(220px, 30vw, 470px);
}

/* headline back to left-aligned, clear of the left frame */
.SearchPage .search-hero-text {
    text-align: left;
    padding-inline: clamp(0px, 22vw, 420px) clamp(0px, 20vw, 380px);
}

.SearchPage .search-top h1 {
    text-align: left !important;
}

.SearchPage .search-top p {
    margin-inline: 0;
}

@media (max-width: 900px) {
    .SearchPage .search-frame { width: 46%; }

    .SearchPage .search-hero-text {
        padding-inline: 0;
    }
}

/* ------------------------------------------------------------
   Copy takes the width, frames sit behind it.
   The earlier padding squeezed the headline into the gap between
   the two collages; now the text runs across and the art reads as
   a backdrop it is set on top of.
   ------------------------------------------------------------ */
.SearchPage .search-frame {
    /* 50% larger again */
    width: clamp(330px, 45vw, 700px);
}

.SearchPage .search-hero-text {
    padding-inline: 0 !important;
    max-width: 80%;
    text-align: left;
    z-index: 2;
}

/* each line holds together — "Search for" never breaks */
.SearchPage .search-top h1 span {
    display: block;
    white-space: nowrap;
}

.SearchPage .search-top .SearchMenu {
    padding-inline: 0 !important;
}

@media (max-width: 900px) {
    .SearchPage .search-hero-text { max-width: 100%; }
    .SearchPage .search-frame { width: 60%; }
}

/* ------------------------------------------------------------
   Matched to the homepage hero exactly: one art layer on the right
   at 100vw sized by height, the same --hero-rise, the same headline
   scale and the same 70% copy width. Left frame retired for now.
   ------------------------------------------------------------ */
.SearchPage .search-frame-left {
    display: none;
}

.SearchPage .search-hero-text {
    max-width: 100%;
    width: 100%;
    padding-block: 0;
    min-height: clamp(340px, 42vw, 560px);
}

.SearchPage .search-frame-right {
    top: calc(-1 * var(--hero-rise, 150px));
    bottom: 0;
    left: 50%;
    right: auto;
    width: 100vw;
    transform: translateX(-50%);
    background-size: auto 100%;
    background-position: right bottom;
}

.SearchPage .search-top h1 {
    font-size: clamp(3.4rem, 9.2vw, 7.2rem) !important;
    line-height: 1;
    margin: 0 0 clamp(18px, 2.5vw, 28px) !important;
}

.SearchPage .search-top p {
    max-width: 70%;
}

@media (max-width: 900px) {
    .SearchPage .search-frame-right {
        position: static;
        width: 100%;
        height: 240px;
        transform: none;
        margin-bottom: var(--space-lg);
        background-size: contain;
    }

    .SearchPage .search-hero-text {
        min-height: 0;
    }

    .SearchPage .search-top p { max-width: 100%; }
}

/* ------------------------------------------------------------
   Sizing restored to the version before the homepage match —
   smaller headline, shorter band, frame anchored to the right edge
   at `contain`. The layout (left frame retired, copy at 80% over
   the art) stays as it is.
   ------------------------------------------------------------ */
.SearchPage .search-frame-right {
    top: calc(-1 * var(--hero-rise, 200px));
    bottom: 0;
    left: auto;
    right: 0;
    width: clamp(330px, 45vw, 700px);
    transform: none;
    background-size: contain;
    background-position: right bottom;
}

.SearchPage .search-hero-text {
    max-width: 80%;
    padding-block: var(--space-xl);
    min-height: clamp(260px, 26vw, 360px);
}

.SearchPage .search-top h1 {
    font-size: clamp(2.6rem, 6.8vw, 5.2rem) !important;
    margin: 0 0 var(--space-md) !important;
}

.SearchPage .search-top p {
    max-width: 48ch;
}

@media (max-width: 900px) {
    .SearchPage .search-frame-right {
        position: static;
        width: 60%;
        height: 240px;
        margin-bottom: var(--space-lg);
    }

    .SearchPage .search-hero-text {
        max-width: 100%;
        min-height: 0;
    }

    .SearchPage .search-top p { max-width: 100%; }
}

/* the people collage instead, mirrored so its weight falls on the
   right — the art was drawn for a bottom-left corner */
.SearchPage .search-frame-right {
    background-image: url('../images/General/PeopleFrameBottomLeft.png');
    transform: scaleX(-1);
}

/* the copy must not mirror with it */
.SearchPage .search-hero-text,
.SearchPage .search-top .SearchMenu {
    transform: none;
}

@media (max-width: 900px) {
    .SearchPage .search-frame-right {
        transform: scaleX(-1);
    }
}

/* ------------------------------------------------------------
   scaleX(-1) mirrors the rendered content, so art anchored `right
   bottom` ends up on the LEFT of its box once flipped — which is
   why it pulled away from the browser edge. Anchoring left bottom
   lands it on the right after the flip.
   ------------------------------------------------------------ */
.SearchPage .search-frame-right {
    width: clamp(420px, 58vw, 900px);
    background-position: left bottom;
    background-size: auto 100%;
}

@media (max-width: 900px) {
    .SearchPage .search-frame-right {
        width: 70%;
        height: 260px;
        background-size: contain;
    }
}

/* frame 40% larger again */
.SearchPage .search-frame-right {
    width: clamp(590px, 81vw, 1260px);
}

/* ------------------------------------------------------------
   Headline, copy and search bar share one width, so the Advanced
   Search button can never reach further right than "THERAPISTS."
   ------------------------------------------------------------ */
.SearchPage .search-hero-text,
.SearchPage .search-top .SearchMenu {
    max-width: 60%;
    margin-inline: 0 auto;
}

@media (max-width: 900px) {
    .SearchPage .search-frame-right { width: 70%; }

    .SearchPage .search-hero-text,
    .SearchPage .search-top .SearchMenu {
        max-width: 100%;
    }
}

/* content block a touch wider, frame another 20% up */
.SearchPage .search-hero-text,
.SearchPage .search-top .SearchMenu {
    max-width: 70%;
}

.SearchPage .search-frame-right {
    width: clamp(710px, 97vw, 1510px);
}

@media (max-width: 900px) {
    .SearchPage .search-hero-text,
    .SearchPage .search-top .SearchMenu {
        max-width: 100%;
    }

    .SearchPage .search-frame-right { width: 80%; }
}

/* ------------------------------------------------------------
   Widening the box did nothing: `background-size: auto 100%` makes
   HEIGHT the driver, so the art scaled to the band and ignored the
   extra width. 140% of the band height is the 40% increase.
   The collage's top third is empty canvas, so the overflow crops
   nothing that reads.
   ------------------------------------------------------------ */
.SearchPage .search-frame-right {
    background-size: auto 140%;
}

@media (max-width: 900px) {
    .SearchPage .search-frame-right {
        background-size: contain;
    }
}

/* ------------------------------------------------------------
   Both frames again: the people collage on the left as drawn, the
   radical-act collage on the right. Height drives the scale for
   both, so they match whatever the band measures.
   ------------------------------------------------------------ */
.SearchPage .search-frame-left {
    display: block;
    top: calc(-1 * var(--hero-rise, 200px));
    bottom: 0;
    left: 0;
    right: auto;
    width: clamp(260px, 34vw, 560px);
    transform: none;
    background-image: url('../images/General/PeopleFrameBottomLeft.png');
    background-position: left bottom;
    background-size: auto 140%;
}

.SearchPage .search-frame-right {
    left: auto;
    right: 0;
    width: clamp(260px, 34vw, 560px);
    /* not mirrored — this one was drawn for a right-hand corner */
    transform: none;
    background-image: url('../images/General/RadicalACtFrameBottomRight.png');
    background-position: right bottom;
    background-size: auto 140%;
}

/* copy clears the left collage and stops short of the right one */
.SearchPage .search-hero-text,
.SearchPage .search-top .SearchMenu {
    max-width: min(70%, 720px);
    margin-inline: clamp(0px, 18vw, 300px) auto;
}

@media (max-width: 900px) {
    .SearchPage .search-frame-left,
    .SearchPage .search-frame-right {
        position: absolute;
        width: 48%;
        height: auto;
        opacity: .3;
        background-size: contain;
    }

    .SearchPage .search-hero-text,
    .SearchPage .search-top .SearchMenu {
        max-width: 100%;
        margin-inline: 0;
    }
}

/* ============================================================
   Hero middle column — consolidation
   The headline, copy and search bar had each picked up their own
   max-width and margin over several passes, so nothing shared an
   edge. One gutter on the wrapper now defines the column; every
   child simply fills it.
   ============================================================ */
.SearchPage .search-top-inner {
    /* gutters sized to clear the two collages */
    padding-inline: clamp(16px, 19vw, 330px);
    padding-block: 0 var(--space-lg);
}

.SearchPage .search-hero-text,
.SearchPage .search-top .SearchMenu {
    max-width: 100% !important;
    width: 100%;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
}

.SearchPage .search-hero-text {
    text-align: left;
    padding-block: var(--space-xl) var(--space-lg);
    min-height: clamp(240px, 24vw, 330px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.SearchPage .search-top h1 {
    text-align: left !important;
}

.SearchPage .search-top p {
    max-width: 100%;
    margin-inline: 0;
}

@media (max-width: 1100px) {
    .SearchPage .search-top-inner {
        padding-inline: clamp(16px, 6vw, 60px);
    }

    .SearchPage .search-frame-left,
    .SearchPage .search-frame-right {
        opacity: .25;
    }
}

/* ------------------------------------------------------------
   The bar and the copy no longer share a column: the bar runs the
   full inner width, while the headline and paragraph sit at 70%
   indented past the left collage.
   ------------------------------------------------------------ */
.SearchPage .search-top-inner {
    padding-inline: clamp(16px, 4vw, 48px);
}

.SearchPage .search-hero-text {
    max-width: 70% !important;
    margin-left: clamp(0px, 15vw, 270px) !important;
    margin-right: 0 !important;
}

.SearchPage .search-top .SearchMenu {
    width: 100%;
    max-width: 100% !important;
    margin-inline: 0 !important;
}

@media (max-width: 1100px) {
    .SearchPage .search-hero-text {
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

/* ============================================================
   HERO — back to the two-column version
   Copy left, image right, search bar spanning underneath. This
   overrides the full-bleed / absolute-frame experiments above;
   everything here is in normal flow, which is why it stays put.
   ============================================================ */

/* the band stops breaking out of the page track */
.SearchPage .search-top {
    left: auto;
    width: auto;
    transform: none;
    border-bottom: var(--rule);
    margin-bottom: var(--space-xl);
}

.SearchPage .search-top-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: clamp(24px, 4vw, 56px);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-lg) 0 var(--space-2xl);
}

.SearchPage .search-frame-left {
    display: none;
}

/* the art is a grid item again, not an absolute layer */
.SearchPage .search-frame-right {
    position: static;
    grid-column: 2;
    grid-row: 1;
    width: auto;
    height: auto;
    align-self: stretch;
    min-height: clamp(240px, 26vw, 360px);
    transform: none;
    opacity: 1;
    background-image: url('../images/General/Protest.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: var(--hairline);
}

.SearchPage .search-hero-text {
    grid-column: 1;
    grid-row: 1;
    max-width: 100% !important;
    width: auto;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0;
    display: block;
    text-align: left;
}

.SearchPage .search-top h1 {
    font-size: clamp(2.4rem, 5.6vw, 4.4rem) !important;
    line-height: .94;
    text-align: left !important;
    margin: 0 0 var(--space-lg) !important;
}

.SearchPage .search-top p {
    max-width: 44ch;
    margin: 0;
}

/* bar spans the full width beneath both columns */
.SearchPage .search-top .SearchMenu {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: 100% !important;
    margin: var(--space-xl) 0 0 !important;
    padding: 0 !important;
}

@media (max-width: 860px) {
    .SearchPage .search-top-inner {
        grid-template-columns: 1fr;
        padding-bottom: var(--space-xl);
    }

    .SearchPage .search-frame-right {
        grid-column: 1;
        grid-row: 1;
        min-height: 200px;
    }

    .SearchPage .search-hero-text {
        grid-column: 1;
        grid-row: 2;
        margin-top: var(--space-lg) !important;
    }

    .SearchPage .search-top .SearchMenu {
        grid-column: 1;
        grid-row: 3;
    }

    .SearchPage .search-top p { max-width: 100%; }
}

/* ------------------------------------------------------------
   Full-bleed separator under the top section, like the homepage's
   values strip: the rule runs the width of the window while the
   content stays on the 1200px track.
   ------------------------------------------------------------ */
.SearchPage .search-top {
    position: relative;
    border-bottom: 0;
}

.SearchPage .search-top::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100vw;
    transform: translateX(-50%);
    border-bottom: var(--rule);
    pointer-events: none;
}

/* ------------------------------------------------------------
   The two collages return as small corner accents — sized to sit
   in the band's bottom corners without crowding the copy.
   ------------------------------------------------------------ */
.SearchPage .search-top-inner {
    position: relative;
}

.SearchPage .search-frame-left {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    /* pulled out to the window edge, then back by its own width */
    margin-left: -50vw;
    width: clamp(90px, 11vw, 170px);
    height: clamp(130px, 16vw, 250px);
    transform: none;
    opacity: 1;
    z-index: 0;
    background-image: url('../images/General/PeopleFrameBottomLeft.png');
    background-size: contain;
    background-position: left bottom;
    background-repeat: no-repeat;
    pointer-events: none;
}

.SearchPage .search-top-inner::after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: 0;
    margin-right: -50vw;
    width: clamp(90px, 11vw, 170px);
    height: clamp(130px, 16vw, 250px);
    z-index: 0;
    background-image: url('../images/General/RadicalACtFrameBottomRight.png');
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* content keeps clear of both */
.SearchPage .search-hero-text,
.SearchPage .search-frame-right,
.SearchPage .search-top .SearchMenu {
    position: relative;
    z-index: 1;
}

@media (max-width: 860px) {
    .SearchPage .search-frame-left,
    .SearchPage .search-top-inner::after {
        display: none;
    }
}

/* ============================================================
   HERO — AUTHORITATIVE
   Everything above this point that touches .search-top,
   .search-top-inner, .search-frame-* or .search-hero-text is
   superseded here. Each property is set explicitly rather than
   relying on what an earlier block left behind, so this section
   renders the same regardless of the layers underneath it.

   Shape: copy left, photo right, search bar full width beneath,
   full-bleed rule under the whole thing, small collages in the
   bottom corners.
   ============================================================ */

.SearchPage .search-top {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    margin: 0 0 var(--space-xl) !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    overflow: visible !important;
}

/* full-bleed rule, like the homepage values strip */
.SearchPage .search-top::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    height: 0 !important;
    transform: translateX(-50%) !important;
    border-bottom: var(--rule) !important;
    background: none !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.SearchPage .search-top-inner {
    position: relative !important;
    display: grid !important;
    /* One column: the 46% track held the hero photo, now removed. */
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: clamp(24px, 4vw, 56px) !important;
    row-gap: 0 !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: var(--space-lg) 0 var(--space-2xl) !important;
    background: none !important;
}

/* ---- copy, left ---- */
.SearchPage .search-hero-text {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    transform: none !important;
}

.SearchPage .search-top h1 {
    font-family: var(--display) !important;
    font-weight: 400 !important;
    font-size: clamp(2.4rem, 5.6vw, 4.4rem) !important;
    line-height: .94 !important;
    letter-spacing: .01em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    margin: 0 0 var(--space-lg) !important;
    padding: 0 !important;
    color: var(--paper-ink) !important;
}

.SearchPage .search-top h1 span {
    display: block !important;
    white-space: nowrap !important;
}

.SearchPage .search-top h1 .w-a { color: var(--justicePurple) !important; }
.SearchPage .search-top h1 .w-c { color: var(--justiceOrange) !important; }

.SearchPage .search-top p {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 44ch !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: var(--leading-body) !important;
    color: var(--paper-ink) !important;
    text-align: left !important;
}

/* ---- photo, right ---- */
.SearchPage .search-frame-right {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    align-self: stretch !important;
    width: auto !important;
    height: auto !important;
    min-height: clamp(240px, 26vw, 360px) !important;
    margin: 0 !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    background-image: url('../images/General/Protest.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: var(--hairline) !important;
}

/* ---- search bar, full width beneath ---- */
.SearchPage .search-top .SearchMenu {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: stretch !important;
    gap: var(--space-sm) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: var(--space-xl) 0 0 !important;
    padding: 0 !important;
}

/* ---- small collages in the bottom corners ---- */
.SearchPage .search-frame-left,
.SearchPage .search-top-inner::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    width: clamp(300px, 34vw, 520px) !important;
    height: clamp(420px, 48vw, 740px) !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: 0 !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    border: 0 !important;
}

.SearchPage .search-frame-left {
    left: 50% !important;
    right: auto !important;
    margin-left: -50vw !important;
    background-image: url('../images/General/PeopleFrameBottomLeft.png') !important;
    background-position: left bottom !important;
}

.SearchPage .search-top-inner::after {
    right: 50% !important;
    left: auto !important;
    margin-right: -50vw !important;
    background-image: url('../images/General/RadicalACtFrameBottomRight.png') !important;
    background-position: right bottom !important;
}

@media (max-width: 860px) {
    .SearchPage .search-top-inner {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
        padding-bottom: var(--space-xl) !important;
    }

    .SearchPage .search-frame-right {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-height: 200px !important;
    }

    .SearchPage .search-hero-text {
        grid-column: 1 !important;
        grid-row: 2 !important;
        margin-top: var(--space-lg) !important;
    }

    .SearchPage .search-top .SearchMenu {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .SearchPage .search-top p { max-width: 100% !important; }

    .SearchPage .search-frame-left,
    .SearchPage .search-top-inner::after {
        display: none !important;
    }
}

/* right corner collage off for now */
.SearchPage .search-top-inner::after {
    display: none !important;
}

/* the content-width rule above Search Results — the full-bleed one
   under the hero already does that job */
.SearchPage .SearchResultsHeading {
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-top: var(--space-3xl) !important;
}



/* ------------------------------------------------------------
   Result cards on a phone: each line up 1px from its desktop size.
   The name is left alone.
   ------------------------------------------------------------ */
@media (max-width: 860px) {
    .SearchPage .tcard-cred       { font-size: 14px; }
    .SearchPage .tcard-place      { font-size: 15px; }
    .SearchPage .tcard-bio        { font-size: 14.5px; }
    .SearchPage .tcard-tag        { font-size: 11.5px; }
    .SearchPage .tcard-fact-label { font-size: 11px; }
    .SearchPage .tcard-fact-value { font-size: 14px; }
    .SearchPage .tcard-fact-note  { font-size: 12.5px; }
}


/* ------------------------------------------------------------
   The Advanced Search panel still carried the old glass treatment from
   style.css: backdrop-filter: blur(5px) plus an 80px-wide 35% shadow,
   which smeared the page behind it whenever it opened. The UI is paper
   now, so the panel is a flat sheet with a hairline edge.
   ------------------------------------------------------------ */
.SearchPage .Panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------
   Portraits on a phone: full width of the card, height from the image
   itself rather than a fixed box, so nothing is cropped.
   ------------------------------------------------------------ */
@media (max-width: 860px) {
    .SearchPage .tcard-photo {
        height: auto;
        min-height: 0;
        margin-inline: 0;
    }

    .SearchPage .tcard-photo img {
        position: static;
        inset: auto;
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}