/* River Bluff Mental Health — the public marketing site's page-specific styles.
   Loaded by _Layout only, AFTER site.css, whose tokens and shared components every rule here reads
   through. Nothing in the signed-in portals uses any of it — see site.css's header for the split.

   Brand components first (washes, eyebrow, accent panel, pull quote, media/head-shot frames,
   therapist card), then one block per page in the order the site is walked: home and About heroes,
   Team, Services, Paying for Therapy, Careers, Contact. */

/* ============================================================
   Brand components — from the RBMH Design Overview
   ============================================================ */

/* ---- Soft accent washes (pale tints for panels, cards, quotes) ---- */
.bg-sage-soft       { background-color: var(--rbmh-sage-soft); }
.bg-terracotta-soft { background-color: var(--rbmh-terracotta-soft); }
.bg-gold-soft       { background-color: var(--rbmh-gold-soft); }

/* ---- Eyebrow: small uppercase label above a heading ---- */
.eyebrow {
    display: inline-block;
    font-family: var(--rbmh-body-font);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--rbmh-olive-dark);
    margin-bottom: 0.5rem;
}

/* ---- Accent panel: calm block with quiet border + generous padding ---- */
.accent-panel {
    border-radius: var(--rbmh-panel-radius);
    padding: 2rem;
    border: 1px solid var(--rbmh-border-soft);
}
@media (min-width: 768px) {
    .accent-panel { padding: 2.75rem; }
}

/* ---- Pull quote: brand/mission line, per the guide's quote card ----
   Documented brand component (river-bluff-design skill); no view uses it today.
   Kept deliberately as part of the brand kit rather than deleted as dead. */
.pull-quote {
    position: relative;
    border-radius: var(--rbmh-panel-radius);
    padding: 2.25rem 2rem 2rem;
    text-align: center;
    background-color: var(--rbmh-terracotta-soft);
    color: var(--rbmh-brown);
}
.pull-quote::before {
    content: "\201C";                   /* opening curly quote */
    display: block;
    font-family: var(--rbmh-heading-font);
    font-size: 3.25rem;
    line-height: 0.6;
    color: var(--rbmh-terracotta);
    margin-bottom: 0.5rem;
}
.pull-quote p {
    font-family: var(--rbmh-heading-font);
    font-size: 1.35rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.pull-quote cite {
    font-style: normal;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rbmh-terracotta);
}

/* ---- Editorial media frame: fixed-shape photo in a content row ----
   Documented brand component (river-bluff-design skill); no view uses it today.
   Kept deliberately as part of the brand kit rather than deleted as dead.
   Photos in content rows are admin-swappable through /Admin/Website, so their
   intrinsic size and aspect ratio are unknown at build time. The frame pins the
   shape and crops with object-fit, so every photo on a page reads as the same
   size and proportion no matter what gets uploaded. The aspect-ratio also
   reserves the layout box before the image loads, so nothing shifts.
   The sage fill is what shows during that load. */
.media-frame {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    background-color: var(--rbmh-sage-soft);
}
/* Taller crop when the row is stacked — a wide letterbox reads as a banner on phones. */
@media (max-width: 767.98px) {
    .media-frame { aspect-ratio: 3 / 2; }
}

/* ---- Therapist head-shot frame ----
   The photos come from the therapists themselves, so they arrive as phone portraits at whatever shape the
   camera gave — 0.56 to 1.0 wide-over-tall across the current roster. Any card grid has to crop them to one
   uniform shape, and the two defaults both work against a head-shot:

   * object-position defaults to centre, but nobody photographs with their face in the middle of the frame —
     it sits in the upper third. A centred crop of a tall portrait therefore eats the top of the head first.
   * A fixed pixel height means the crop gets more brutal the wider the card, so the worst case is a phone,
     where one card spans the whole row and a 300px band reduces a portrait to a horizontal slice of a face.

   So: a square box, which holds a constant amount of a portrait at every breakpoint, and a crop window
   pulled up to 20% so hair and forehead stay inside it. The sage fill is what shows while the image loads. */
.headshot-frame {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    background-color: var(--rbmh-sage-soft);
}
/* The card-grid variant. aspect-ratio also reserves the box before the image arrives, so nothing shifts. */
.headshot-frame--card {
    aspect-ratio: 1 / 1;
}

/* ---- Therapist card: the design's tile anatomy on top of the Bootstrap card ----
   A charcoal medallion straddles the photo's bottom edge, the credentials read as a small
   olive kicker over a pale gold rule, and the CTA is the quiet hairline pill. */
.therapist-card__media { position: relative; }
.therapist-card__badge {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    width: 3rem;
    height: 3rem;
    background: var(--rbmh-charcoal);
    color: var(--rbmh-gold);
    /* Ring in the card's own surface so the disc reads as lifted off the photo. */
    border: 3px solid var(--bs-card-bg, #fff);
}
.therapist-card__creds {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--rbmh-olive-dark);
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(var(--rbmh-gold-rgb), .45);
}

/* ---- Hero polish ---- */
.hero { border: 1px solid var(--rbmh-border-soft); }

/* ---- Bleed hero: copy on the left, photo bleeding off the right edge ----
   Shared construction for the home and About heroes. The photo has no visible frame — it
   runs to the top, right, and bottom of the band and dissolves into the page background on
   its left, so the two halves read as one surface. The dissolve is an overlay painted in
   the page background colour rather than a mask, so it matches --rbmh-bg exactly whatever
   that is set to. The two pages differ only in the custom properties their modifier blocks
   set below (media height, desktop dissolve, copy width, crop focus) and their inner
   paddings. */
.bleed-hero {
    position: relative;
    background-color: var(--rbmh-bg);
    overflow: hidden;
}
.bleed-hero__media {
    position: relative;
    width: 100%;
    height: var(--bleed-hero-media-h);
}
.bleed-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--bleed-hero-focus, center);
}
/* Small screens stack: the photo sits above the copy and fades out downward into it. */
.bleed-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(var(--rbmh-bg-rgb), 0) 45%,
        rgba(var(--rbmh-bg-rgb), .75) 82%,
        rgb(var(--rbmh-bg-rgb)) 100%);
}
.bleed-hero__inner {
    position: relative;
}

@media (min-width: 992px) {
    .bleed-hero__media {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 55%;
        height: auto;
    }
    /* Left-to-right dissolve: solid background at the photo's left edge, clearing at the
       pace each page's modifier sets. */
    .bleed-hero__media::after {
        background: var(--bleed-hero-dissolve);
    }
    .bleed-hero__copy { width: var(--bleed-hero-copy-w); }
}

/* -- Home modifier -- */
.home-hero {
    --bleed-hero-media-h: clamp(15rem, 52vw, 22rem);
    /* The media band runs well under the copy (72% wide vs the copy's 50%), so the photo
       reveals gradually: near-solid background through ~33% of the band — where the copy's
       right edge consistently lands across breakpoints — then clearing by ~58%. */
    --bleed-hero-dissolve: linear-gradient(to right,
        rgb(var(--rbmh-bg-rgb)) 0%,
        rgba(var(--rbmh-bg-rgb), .95) 18%,
        rgba(var(--rbmh-bg-rgb), .9) 33%,
        rgba(var(--rbmh-bg-rgb), .35) 46%,
        rgba(var(--rbmh-bg-rgb), 0) 58%);
    /* Capped so the copy only ever reaches the near-solid first third of the dissolve,
       whatever the viewport width. */
    --bleed-hero-copy-w: 50%;
}
.home-hero .bleed-hero__inner {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

@media (min-width: 992px) {
    /* The home page is the only section in <main>, which the layout stretches to fill any
       viewport height the header and footer leave over. Passing that stretch down to the
       hero — and on to its inner row — keeps the photo running the full content height on
       tall screens instead of stopping at the 33rem floor. */
    main:has(> .home-hero) { display: flex; flex-direction: column; }
    .home-hero { display: flex; flex-direction: column; flex: 1 1 auto; }
    .home-hero .bleed-hero__inner {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-height: 33rem;
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
    .home-hero .bleed-hero__copy { max-width: 40rem; }
    /* The uploaded hero photo is a small landscape (634×376); covering the band's full
       height blows it up ~1.6×, and at the shared 55% width that crops a third of the
       scene away. Widening the band keeps the full-height bleed but reveals nearly the
       whole photo, the extra width emerging from under the dissolve. */
    .home-hero .bleed-hero__media { width: 72%; }
}

/* xxl hero heading: 64–72px desktop, scaling down on smaller viewports */
.home-hero__title {
    font-size: clamp(2.4rem, 5.2vw, 4.25rem);
    line-height: 1.08;
    color: var(--rbmh-brown);
    margin-bottom: 1rem;
}
/* lg subheading in Lato */
.home-hero__subtitle {
    font-family: var(--rbmh-body-font);
    font-size: 1.35rem;
    line-height: 1.55;
    color: var(--rbmh-brown);
    max-width: 42ch;
}
/* Three info facts: olive line icon + dark-brown label, divided into columns */
.hero-facts__icon {
    width: 1.9rem;
    height: 1.9rem;
    color: var(--rbmh-olive);
    flex-shrink: 0;
}
.hero-facts__label {
    font-size: 0.88rem;
    line-height: 1.35;
    color: var(--rbmh-brown);
}
@media (min-width: 576px) {
    /* quiet vertical dividers between the three facts, as in the mockup */
    .hero-facts > li + li { border-left: 1px solid var(--rbmh-hairline); }
}

/* -- Team modifier: the photo bleeds in from the LEFT edge instead and the copy is centered,
   so the header reads as a symmetric title block with the river dissolving in beside it. -- */
.team-hero {
    --bleed-hero-media-h: clamp(11rem, 40vw, 15rem);
    /* Mirrored dissolve ("to left" — the base's ::after just paints whatever gradient this
       holds): solid page background at the photo's right edge, clearing toward the viewport's
       left corner so only that corner reads as picture. */
    --bleed-hero-dissolve: linear-gradient(to left,
        rgb(var(--rbmh-bg-rgb)) 0%,
        rgb(var(--rbmh-bg-rgb)) 18%,
        rgba(var(--rbmh-bg-rgb), .55) 55%,
        rgba(var(--rbmh-bg-rgb), 0) 100%);
    --bleed-hero-copy-w: 100%;
}
.team-hero .bleed-hero__inner {
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
    text-align: center;
}
@media (min-width: 992px) {
    /* Flip the base's right-anchored media to the left edge; the centered copy spans the
       full container and floats over the dissolved tail of the photo. */
    .team-hero .bleed-hero__media {
        right: auto;
        left: 0;
        width: 38%;
    }
    .team-hero .bleed-hero__inner {
        padding-top: 3rem;
        padding-bottom: 2rem;
    }
}
.team-hero__title {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1.08;
    margin-bottom: 0.75rem;
}

/* ---- Dot rule: short centered hairline with a terracotta dot at its middle, dividing a
   heading from its lead (the Team header design). Inline-block so text-align centers it. ---- */
.dot-rule {
    position: relative;
    display: inline-block;
    width: 9rem;
    height: 1px;
    background-color: rgba(var(--rbmh-gold-rgb), .7);
    vertical-align: middle;
    margin-bottom: 1rem;
}
.dot-rule::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--rbmh-terracotta);
}

/* -- About modifier -- */
.about-hero {
    --bleed-hero-media-h: clamp(13rem, 46vw, 19rem);
    /* The hero photo is a 3:2 portrait with the founder's head filling the top of the
       frame. Once the media box runs wider than 3:2 (tablets, and desktops past ~1300px)
       cover starts cropping vertically, and centred it takes the head first — so keep the
       top edge and let any overflow crop from the bottom. */
    --bleed-hero-focus: center top;
    /* Clear by ~25% across. It stays solid through the first 7%, which is as far as the
       copy column ever reaches, so the softening happens over picture rather than under
       text. */
    --bleed-hero-dissolve: linear-gradient(to right,
        rgb(var(--rbmh-bg-rgb)) 0%,
        rgba(var(--rbmh-bg-rgb), .9) 7%,
        rgba(var(--rbmh-bg-rgb), .4) 15%,
        rgba(var(--rbmh-bg-rgb), 0) 25%);
    /* Reaches a little past the photo's left edge — into the near-solid first tenth of the
       dissolve, never the picture itself — which is the width the intro needs to break as
       drawn: "…evidence-based" has to finish line two, and that wants 516px of measure. */
    --bleed-hero-copy-w: 47%;
}
.about-hero .bleed-hero__inner {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

@media (min-width: 992px) {
    /* The design draws the photo as a ~1.83:1 box — 55% of the page wide, ~30% tall.
       Narrow desktops need more height than that for the copy and grow past the floor;
       on wide screens, where the copy stops governing, the floor keeps the band at the
       drawn proportion instead of letting it flatten into a letterbox strip that zooms
       the photo well past the design's framing. The copy holds to the top of the band;
       any slack the floor opens up runs out below it. */
    .about-hero .bleed-hero__inner {
        display: flex;
        align-items: flex-start;
        min-height: 30vw;
        padding-top: 2.5rem;
        padding-bottom: 2rem;
    }
}

.about-hero__title {
    font-size: clamp(2.6rem, 5.5vw, 4rem);
    line-height: 1.05;
    margin-bottom: 1rem;
}
.about-hero__subtitle {
    font-family: var(--rbmh-heading-font);
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    line-height: 1.35;
    color: var(--rbmh-brown);
    /* Capped inside the copy column so the three lines land where the design puts them.
       At the 28px ceiling the break points sit in a 25px window: "…Accessibility," measures
       439px and has to fit, while "…Better Mental Health" measures 464px and must not. */
    max-width: 28rem;
    margin-bottom: 1.5rem;
}
/* Short terracotta rule between the subtitle and the opening paragraph, as in the design. */
.about-rule {
    display: block;
    width: 3.5rem;
    height: 2px;
    background-color: var(--rbmh-terracotta);
    margin-bottom: 1.5rem;
}
.about-hero__intro {
    font-size: 1.2rem;
}
/* This page's kickers read taupe in the design, not the site's olive. (.75, not the .65 that
   matches the drawing: below .75 the taupe drops under 4.5:1 on the off-white.) */
.about-hero .eyebrow,
.about-journey .eyebrow { color: rgba(var(--rbmh-brown-rgb), .75); }
/* The design breathes more between the mid-page blocks than Bootstrap's mb-5 allows. */
.about-block { margin-bottom: 4.5rem; }
/* The opening story/specialties block runs tighter than the rest of the page. */
.about-block--tight { margin-bottom: 3rem; }
.about-founder {
    color: var(--rbmh-olive);
    font-weight: 700;
}

/* ---- About story: one icon medallion per paragraph ---- */
.about-story__item {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}
.about-story__item + .about-story__item { margin-top: 1.25rem; }
.about-story__item p { font-size: 1.2rem; }

/* ---- About specialties: feather-marked list inside the panel ----
   The header is the medallion and the heading side by side. The heading is not a display
   heading — the design sets it in the body face, bold and olive, only a step up from the
   list under it. Its measure is capped so it breaks into the drawn three lines rather than
   running the panel's full width. */
/* The panel sits tighter vertically than the stock accent panel. */
.about-specialties {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
@media (min-width: 768px) {
    .about-specialties { padding-top: 1.75rem; padding-bottom: 1.75rem; }
}
.about-specialties__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    /* The header hangs a little left of the list below it in the design: the medallion sits
       about half the panel padding out, with the leaf marks indented back at the padding edge. */
    margin-left: -0.75rem;
}
/* This one medallion carries an olive feather, not the brown glyph the cream disc defaults
   to — in the design it echoes the olive feather marks on the list below it. */
.about-specialties__header .icon-circle {
    flex-shrink: 0;
    color: var(--rbmh-olive);
}
.about-specialties__heading {
    font-family: var(--rbmh-body-font);
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1.45;
    color: var(--rbmh-olive);
    max-width: 19rem;
}
.about-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    /* The design sets every specialty bold, a touch smaller than body copy. */
    font-weight: 700;
    font-size: 1.2rem;
}
.about-checklist li + li { margin-top: 0.5rem; }
.about-checklist__mark {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
    color: var(--rbmh-olive);
}

/* ---- About vision: an oversized medallion beside the copy, pull quote alongside ---- */
.about-vision__medallion {
    width: 6.25rem;
    height: 6.25rem;
    color: var(--rbmh-olive);
}
.about-vision__medallion svg { width: 3.5rem; height: 3.5rem; }
.about-vision__copy p:last-child { margin-bottom: 0; }
/* Not the terracotta card of .pull-quote — here the quote shares the panel with the copy
   beside it, divided by clean space alone. */
.about-quote {
    position: relative;
    padding-top: 3.25rem;
}
/* The rule sits under the quote rather than above it, so it closes the block. */
.about-rule--quote { margin-top: 1.25rem; margin-bottom: 0; }
.about-quote::before {
    content: "\201C";                   /* opening curly quote */
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--rbmh-heading-font);
    /* Playfair's quote ink fills less than half its em box, so the em has to run well past
       the drawn mark: 6rem of em yields the design's mark of about a line and a half. */
    font-size: 6rem;
    line-height: 1;
    color: var(--rbmh-terracotta);
}
.about-quote p {
    font-family: var(--rbmh-heading-font);
    font-size: 1.3rem;
    line-height: 1.45;
    /* The whole quote block is terracotta in the design — marks, text, and closing rule. */
    color: var(--rbmh-terracotta);
}
@media (min-width: 992px) {
    .about-quote { padding-left: 1.75rem; }
    .about-quote::before { left: 1.75rem; }
}

/* ---- About journey: a milestone timeline ----
   The connector is drawn per item rather than as one line across the row, so the timeline
   holds its shape whatever number of milestones the editor leaves behind. Columns carry
   their own padding instead of a grid gap, so each connector reaches exactly from one
   marker's centre to the next. */
.about-journey__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.about-journey__item {
    position: relative;
    padding: 0 0.75rem;
    text-align: center;
}
.about-journey__item + .about-journey__item::before {
    content: "";
    position: absolute;
    top: 2rem;                          /* half the marker's height */
    right: 50%;
    left: -50%;
    height: 1px;
    background-color: rgba(var(--rbmh-brown-rgb), .18);
}
.about-journey__marker {
    position: relative;                 /* above the connector line */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    /* Deeper pine than olive-dark alone — the design's discs sit nearer the charcoal family. */
    background-color: color-mix(in srgb, var(--rbmh-olive-dark) 60%, var(--rbmh-charcoal));
    color: #fff;
    margin-bottom: 1rem;
}
.about-journey__marker svg { width: 1.75rem; height: 1.75rem; }
.about-journey__when {
    font-family: var(--rbmh-heading-font);
    font-size: 1.5rem;
    color: var(--rbmh-brown);
    margin-bottom: 0.4rem;
}
/* The milestone name is set in the body face, not the display serif — it is a label under
   the year, and the year is the serif moment in this block. */
.about-journey__title {
    font-family: var(--rbmh-body-font);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--rbmh-brown);
    /* Capped so the names wrap as drawn ("River Bluff Mental Health" / "Founded") — a
       generic measure, not a width tuned to any one name. */
    max-width: 12rem;
    margin: 0 auto 0.9rem;
}
.about-journey__note {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--rbmh-text-muted);
}
/* Stacked: the connector turns vertical and runs up into the previous milestone. */
@media (max-width: 575.98px) {
    .about-journey__list { grid-template-columns: 1fr; }
    .about-journey__item + .about-journey__item { margin-top: 2.5rem; }
    .about-journey__item + .about-journey__item::before {
        top: -1.75rem;
        left: 50%;
        right: auto;
        width: 1px;
        height: 1.75rem;
        transform: translateX(-50%);
    }
}

/* ---- "Why choose" strip (_WhyChoose partial, on About and Services) ----
   A divided strip of reasons. The hairlines fall between columns, so the rule that clears
   them keys off the column count at each breakpoint (2, then 4, then the design's 7)
   rather than the item count — an added or removed reason still lines up. */
.why-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.75rem;
}
.why-strip__item {
    padding: 0 0.75rem;
    text-align: center;
    border-left: 1px solid var(--rbmh-hairline);
}
.why-strip__item:nth-child(2n+1) { border-left: 0; }
.why-strip__icon {
    display: block;
    width: 1.9rem;
    height: 1.9rem;
    margin: 0 auto 0.75rem;
    /* Olive in the design, the same green as the audience-card icons. */
    color: var(--rbmh-olive-dark);
}
.why-strip__label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--rbmh-brown);
}
@media (min-width: 576px) {
    .why-strip { grid-template-columns: repeat(4, 1fr); }
    .why-strip__item:nth-child(2n+1) { border-left: 1px solid var(--rbmh-hairline); }
    .why-strip__item:nth-child(4n+1) { border-left: 0; }
}
@media (min-width: 992px) {
    .why-strip { grid-template-columns: repeat(7, 1fr); }
    .why-strip__item:nth-child(4n+1) { border-left: 1px solid var(--rbmh-hairline); }
    .why-strip__item:nth-child(7n+1) { border-left: 0; }
}

/* ---- Type hero (shared: Services, Paying for Therapy): centered kicker, display title,
   lead, CTA ---- No photo here — the page opens on type alone, closed by a hairline that
   hands off to the band below. Each page caps its own title and intro widths (the
   .svc-hero__* / .pay-hero__* modifiers) so the display lines break where its design
   draws them. */
.page-hero {
    /* No padding of its own on top — the layout's py-5 already sets the page's standard gap. */
    padding: 0 0 3.25rem;
    border-bottom: 1px solid var(--rbmh-hairline);
    margin-bottom: 3.25rem;
}
.page-hero__title {
    font-size: clamp(2.6rem, 5.5vw, 4rem);
    line-height: 1.1;
    margin: 0 auto 1.25rem;
}
/* Capped so the title breaks as drawn: "Mental Health Care" / "for Every Stage of Life".
   13em was wide enough to pull "for" up onto the first line and 9.5em too narrow to hold
   "for Every Stage of Life" on one; 10.2em sits between the two, and being in em it holds
   the same break as the title scales down. */
.svc-hero__title { max-width: 10.2em; }
.page-hero__intro {
    /* Narrow enough to fall into the design's four centred lines rather than three. */
    max-width: 30rem;
    font-size: 1.2rem;
    margin-bottom: 1.75rem;
}
/* -- Wash modifier: the page opens on the same soft sage panel the accent panels further down
   sit on, so the washes bookend the page. The tint is what separates the hero from the band
   now, so the closing hairline gives way to the panel's own padding. */
.page-hero--wash {
    background-color: var(--rbmh-sage-soft);
    border-bottom: 0;
    border-radius: var(--rbmh-panel-radius);
    padding: 3rem 1.5rem;
    /* The layout's py-5 opens every page 3rem below the header — right for a page that starts
       on bare type, too big a gap above a filled panel. Pulling back all but 0.75rem of it sets
       the wash just under the header without the section having to opt out of the container. */
    margin-top: -2.25rem;
}
@media (min-width: 768px) {
    .page-hero--wash { padding: 3.5rem 2.75rem; }
}

/* The kickers read green in the design, a shade darker than the site's olive. */
.page-hero .eyebrow,
.rule-kicker .eyebrow {
    color: var(--rbmh-olive-dark);
    font-size: 1rem;
}

.svc-band { margin-bottom: 3rem; }
.svc-meet {
    max-width: 50rem;
    font-size: 1.2rem;
}

/* ---- Section kicker (shared): a label set into a rule that spans the band — an uppercase
   eyebrow on Services, a serif heading on Paying for Therapy ---- */
.rule-kicker {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.1rem;
}
.rule-kicker .eyebrow {
    margin-bottom: 0;
    letter-spacing: 0.18em;
}
.rule-kicker::before,
.rule-kicker::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--rbmh-hairline);
}

/* ---- Who we help: a rail of icon cards, the design's six across on wide screens ---- */
.svc-audiences {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (min-width: 768px)  { .svc-audiences { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .svc-audiences { grid-template-columns: repeat(6, 1fr); } }
.svc-card {
    border: 1px solid var(--rbmh-border-soft);
    border-radius: var(--rbmh-card-radius);
    padding: 1.5rem 1rem;
    text-align: center;
}
.svc-card__icon {
    width: 2.4rem;
    height: 2.4rem;
    color: var(--rbmh-olive);
    margin-bottom: 0.9rem;
}
/* The card titles are set in the body face in the design, not the serif the page's own
   headings use — they read as labels on the cards rather than headings of their own.
   The Paying page's option cards and expect columns share the treatment. */
.svc-card__title,
.svc-treatment__title,
.pay-option__title,
.pay-expect__title {
    font-family: var(--rbmh-body-font);
    font-weight: 700;
}
.svc-card__title {
    font-size: 1.15rem;
    line-height: 1.3;
    margin-bottom: 0.6rem;
}
.svc-card__blurb {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--rbmh-text-muted);
}

/* ---- Specialized treatments: photo-and-copy cards, three across on wide screens ---- */
.svc-treatments {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 0.9rem;
}
@media (min-width: 992px) { .svc-treatments { grid-template-columns: repeat(3, 1fr); } }
.svc-treatment {
    display: grid;
    /* The design gives the photo a shade less than half the card, 46:54 against the copy. */
    grid-template-columns: 0.86fr 1fr;
    gap: 1.25rem;
    /* Stretch, not start: in the design the photo is a tall panel running the card's full
       height, and the three cards share the tallest card's height, so the short ones keep
       their photo as tall as the long one's rather than leaving space under a square. */
    align-items: stretch;
    border: 1px solid var(--rbmh-border-soft);
    border-radius: var(--rbmh-card-radius);
    padding: 0.85rem;
}
/* Same discipline as .media-frame: the photos are admin-swappable, so the crop keeps the three
   cards even whatever gets uploaded. The min-height holds the drawn portrait shape when the
   copy is short enough that the row would otherwise collapse. The sage fill shows during load. */
.svc-treatment__img {
    width: 100%;
    height: 100%;
    min-height: 11rem;
    object-fit: cover;
    border-radius: 0.6rem;
    background-color: var(--rbmh-sage-soft);
}
.svc-treatment__title {
    font-size: 1.15rem;
    line-height: 1.35;
    margin-bottom: 0.6rem;
}
.svc-treatment__blurb {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--rbmh-text-muted);
}

/* ---- Approaches strip: the specialty list divided by quiet bars, on a sage wash ---- */
.svc-approaches {
    padding: 1.5rem 2rem;
}
.svc-approaches__heading {
    font-family: var(--rbmh-body-font);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
}
.svc-approaches__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.4rem;
}
.svc-approaches__list li + li::before {
    content: "|";
    margin: 0 0.85rem;
    color: rgba(var(--rbmh-brown-rgb), .3);
}
/* Quiet links: brown at rest like the design's strip, olive on hover. The rest state keeps a
   low-alpha underline rather than none — with site.css clearing underlines globally, colour
   alone was the only thing separating these from the plain-text items beside them (WCAG 1.4.1). */
.svc-approaches__list a {
    color: var(--rbmh-brown);
    text-decoration: underline;
    text-decoration-color: rgba(var(--rbmh-brown-rgb), .45);
    text-underline-offset: 0.2em;
}
.svc-approaches__list a:hover {
    color: var(--rbmh-olive-dark);
    text-decoration-color: currentColor;
}

/* ---- Condition chips: every non-approach specialty as a soft pill link ---- */
.svc-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1rem;
}
/* Tags, not buttons: the design draws these as low, softly squared-off rectangles with wide
   side padding rather than the brand's 30px button pill. */
.svc-chip {
    display: inline-block;
    padding: 0.25rem 1.9rem;
    border-radius: 0.35rem;
    background-color: var(--rbmh-sage-soft);
    color: var(--rbmh-brown);
    font-size: 0.95rem;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}
.svc-chip:hover {
    background-color: var(--rbmh-olive);
    color: #fff;
    text-decoration: none;
}

/* ============================================================
   Paying for Therapy page
   ============================================================ */

/* ---- Hero: the title breaks as drawn ("Accessible Care." / "Transparent Information.")
   and the intro runs wider than the Services hero's, into three centred lines. ----
   "Transparent Information." measures 11.74em in Playfair 600, so 12em holds it on one
   line while still pushing "Accessible Care." up onto its own. */
.pay-hero__title { max-width: 12em; }
.pay-hero__intro { max-width: 38rem; }

/* ---- Insurance rail: white logo tiles, up to seven across; a line without a logo
   ("and many more") renders as a text tile. ---- */
.pay-lead {
    max-width: 36rem;
    font-size: 1.2rem;
}
.pay-insurers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 2rem 0 1.5rem;
}
@media (min-width: 768px)  { .pay-insurers { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .pay-insurers { grid-template-columns: repeat(7, 1fr); } }
.pay-insurer {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rbmh-border-soft);
    border-radius: var(--rbmh-card-radius);
    /* White, not the page's off-white: the logo art sits on white, so a tinted tile would
       draw a visible white box around each logo. */
    background-color: #fff;
    padding: 0.9rem 1rem;
    min-height: 6rem;
}
.pay-insurer__logo {
    max-width: 100%;
    max-height: 4.4rem;
    object-fit: contain;
}
.pay-insurer__label {
    font-size: 0.95rem;
    color: var(--rbmh-text-muted);
}
.pay-note {
    font-size: 0.95rem;
    color: var(--rbmh-text-muted);
}

/* ---- Option cards: solid olive medallion beside a label title and blurb ---- */
.pay-options {
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 992px) { .pay-options { grid-template-columns: repeat(3, 1fr); } }
.pay-option {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    border: 1px solid var(--rbmh-border-soft);
    border-radius: var(--rbmh-card-radius);
    padding: 1.6rem 1.4rem;
}
.pay-option__title {
    font-size: 1.15rem;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}
.pay-option__blurb {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--rbmh-text-muted);
}

/* ---- Notice panels (Good Faith Estimate, No Surprises Act, the closing questions call):
   a wash banner with a medallion or sprig, the copy, and the action pinned right on wide
   screens; everything stacks as the panel narrows. Shallower than the accent-panel default
   — these read as banners, not sections. ---- */
.pay-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 1.75rem;
    padding: 1.75rem 2rem;
}
.pay-notice__copy { flex: 1 1 24rem; }
.pay-notice__body { font-size: 1.05rem; }
/* The sprig beside the closing call — ink-drawn, so it keeps the site's darkest color. */
.pay-questions__art {
    width: 6.25rem;
    height: 6.25rem;
    color: var(--rbmh-charcoal);
    flex-shrink: 0;
}

/* ---- What to expect: four quiet columns split by hairlines, like the why-strip ---- */
.pay-expect {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2rem;
    text-align: center;
}
@media (min-width: 768px) {
    .pay-expect { grid-template-columns: repeat(2, 1fr); }
    .pay-expect__item { padding: 0 1.75rem; border-left: 1px solid var(--rbmh-hairline); }
    .pay-expect__item:nth-child(2n+1) { border-left: 0; }
}
@media (min-width: 1200px) {
    .pay-expect { grid-template-columns: repeat(4, 1fr); }
    .pay-expect__item:nth-child(2n+1) { border-left: 1px solid var(--rbmh-hairline); }
    .pay-expect__item:nth-child(4n+1) { border-left: 0; }
}
.pay-expect__icon {
    width: 2.6rem;
    height: 2.6rem;
    color: var(--rbmh-terracotta);
    margin-bottom: 0.9rem;
}
.pay-expect__title {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}
.pay-expect__blurb {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--rbmh-text-muted);
    margin-bottom: 0;
}

/* ============================================================
   Careers page
   ============================================================ */

/* ---- Hero modifier: the lake photo bleeds off the right edge (the base .bleed-hero
   construction, the home page's direction) behind a left-hand title block. ---- */
.careers-hero {
    --bleed-hero-media-h: clamp(13rem, 46vw, 18rem);
    /* The copy runs to ~45% of the container, so the background stays near-solid through the
       first third of the band and clears by ~58% — the photo's sunburst then falls in the open
       right half rather than behind the lead lines. */
    --bleed-hero-dissolve: linear-gradient(to right,
        rgb(var(--rbmh-bg-rgb)) 0%,
        rgba(var(--rbmh-bg-rgb), .94) 20%,
        rgba(var(--rbmh-bg-rgb), .8) 34%,
        rgba(var(--rbmh-bg-rgb), .3) 47%,
        rgba(var(--rbmh-bg-rgb), 0) 58%);
    --bleed-hero-copy-w: 48%;
    /* The horizon sits high in the frame and the interest is the sun above it, so keep the top
       edge and let a wide crop take from the bottom. */
    --bleed-hero-focus: center top;
}
.careers-hero .bleed-hero__inner {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}
@media (min-width: 992px) {
    .careers-hero .bleed-hero__media { width: 62%; }
    .careers-hero .bleed-hero__inner {
        padding-top: 3.5rem;
        padding-bottom: 4rem;
    }
}
.careers-hero__title {
    font-size: clamp(2.6rem, 6vw, 4.5rem);
    line-height: 1.05;
    margin-bottom: 1rem;
}
/* The two display lines under the title: serif, a step under an h3, set tight so they read as
   one two-line statement rather than two paragraphs. */
.careers-hero__lead {
    font-family: var(--rbmh-heading-font);
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    line-height: 1.35;
    color: var(--rbmh-brown);
    margin-bottom: 0.25rem;
}
.careers-hero__intro {
    max-width: 32rem;
    font-size: 1.05rem;
    line-height: 1.75;
}

/* ---- Values: the three reasons in a rail, beside the culture panel ---- */
.careers-values {
    display: grid;
    gap: 2rem;
}
@media (min-width: 992px) {
    .careers-values {
        grid-template-columns: 1fr 1fr;
        gap: 3.5rem;
        align-items: start;
    }
}
.careers-value {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--rbmh-hairline);
}
/* The first one opens the rail, so it needs no rule above it. */
.careers-value:first-child {
    border-top: 0;
    padding-top: 0;
}
.careers-value:last-child { padding-bottom: 0; }
.careers-value__title { margin-bottom: 0.4rem; }
.careers-value__blurb {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--rbmh-text-muted);
}

/* ---- Culture panel: the same warm sand as the Contact page's message panel, so the two
   pages' one-big-block sections read as the same surface ---- */
.careers-culture {
    background-color: var(--rbmh-cream);
    border-radius: var(--rbmh-panel-radius);
    padding: 2rem 1.5rem;
}
@media (min-width: 768px) {
    .careers-culture { padding: 2.75rem; }
}
.careers-culture__head {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.careers-culture p {
    font-size: 1rem;
    line-height: 1.75;
}
.careers-culture__quote {
    font-style: italic;
    color: var(--rbmh-text-muted);
}

/* ---- Openings + form: two columns split by a hairline, as drawn ---- */
.careers-connect {
    display: grid;
    gap: 2.5rem;
}
@media (min-width: 992px) {
    .careers-connect {
        grid-template-columns: 1fr 1fr;
        gap: 3.5rem;
    }
    .careers-apply {
        border-left: 1px solid var(--rbmh-hairline);
        padding-left: 3.5rem;
    }
}
.careers-connect__title {
    font-size: clamp(1.9rem, 3.2vw, 2.4rem);
    margin-bottom: 1rem;
}
.careers-connect p {
    font-size: 1rem;
    line-height: 1.75;
}
/* Short gold underscore between the openings intro and the first posting — the design's one
   gold accent on the page, kept to the guide's 2–3%. */
.careers-rule {
    display: block;
    width: 3.5rem;
    height: 2px;
    background-color: var(--rbmh-gold);
    margin: 1.75rem 0;
}
.careers-openings__empty { color: var(--rbmh-text-muted); }

/* ---- One posting ---- */
.careers-job {
    background-color: var(--rbmh-sage-soft);
    border: 1px solid var(--rbmh-border-soft);
    border-radius: var(--rbmh-card-radius);
    padding: 1.75rem;
}
.careers-job + .careers-job { margin-top: 1.25rem; }
.careers-job__head {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}
.careers-job__title {
    font-size: 1.25rem;
    margin-bottom: 0.6rem;
}
/* Where the position works: an icon-and-label pair per setting, wrapping to its own line on a
   phone and sitting side by side once there is room. */
.careers-job__settings {
    list-style: none;
    padding: 0;
    margin: 0 0 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    font-size: 0.9rem;
    color: var(--rbmh-text-muted);
}
.careers-job__settings li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.careers-job__icon {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--rbmh-olive);
    flex-shrink: 0;
}
.careers-job__type {
    font-size: 0.9rem;
    color: var(--rbmh-text-muted);
}
.careers-job__rule {
    border-color: var(--rbmh-hairline);
    opacity: 1;
    margin: 1.25rem 0;
}
.careers-job__population,
.careers-job__body {
    font-size: 0.95rem;
    line-height: 1.65;
}
.careers-job__population { margin-bottom: 0.75rem; }
.careers-job__population strong { color: var(--rbmh-charcoal); }

/* "(optional)" beside the résumé label — quieter than the label it qualifies, and the inverse of
   the terracotta asterisk the required fields carry. */
.careers-apply__optional {
    font-weight: 400;
    color: var(--rbmh-text-muted);
}

/* The sign-off under the submit button, centred on the button's width. */
.careers-apply__note {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.95rem;
    color: var(--rbmh-text-muted);
}

/* ============================================================
   Contact page
   ============================================================ */

/* ---- Hero: intro at the Paying hero's centred measure ---- */
.contact-hero__intro { max-width: 38rem; }

/* ---- Message panel: one warm-sand card holding the form and the response/hours rail,
   split by a hairline on wide screens; everything stacks as it narrows. ---- */
.contact-panel {
    display: grid;
    gap: 2rem;
    background-color: var(--rbmh-cream);
    border-radius: var(--rbmh-panel-radius);
    padding: 2rem 1.5rem;
}
@media (min-width: 992px) {
    .contact-panel {
        grid-template-columns: 1.7fr 1fr;
        gap: 2.75rem;
        padding: 2.75rem;
    }
    .contact-panel__aside {
        border-left: 1px solid var(--rbmh-hairline);
        padding-left: 2.75rem;
    }
}
.contact-panel__rule {
    border-color: var(--rbmh-hairline);
    opacity: 1;
    margin: 1.75rem 0;
}
.contact-aside-block__heading {
    margin: 1rem 0 0.75rem;
}
.contact-aside-block__link {
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

/* The required-field mark beside a label — terracotta, like the drawn design's asterisks. */
.contact-form__req { color: var(--rbmh-terracotta); }

/* The inputs sit on the panel's sand wash, so they stay plain white to read as fields. */
.contact-form .form-control { background-color: #fff; }

/* The honeypot ("Website") field: parked off-screen rather than display:none, because some
   bots skip fields the layout engine says are invisible. People never see or tab into it. */
.contact-form__alt {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* The thank-you card that replaces the submitted form, centred in the same space. */
.contact-thanks {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    min-height: 18rem;
    padding: 1rem;
}
.contact-thanks p { max-width: 26rem; }

/* ---- Office hours: label over value, one pair per line of Business.Hours ---- */
.contact-hours dt {
    font-weight: 600;
    color: var(--rbmh-charcoal);
}
.contact-hours dd {
    margin-bottom: 0.6rem;
    color: var(--rbmh-text-muted);
}
.contact-hours dd:last-child { margin-bottom: 0; }

/* ---- Help strip: four quiet columns in one bordered card, split by hairlines —
   the pay-expect treatment moved inside a card, as drawn. ---- */
.contact-help {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2rem;
    text-align: center;
    border: 1px solid var(--rbmh-border-soft);
    border-radius: var(--rbmh-card-radius);
    padding: 2rem 1rem;
}
@media (min-width: 768px) {
    .contact-help { grid-template-columns: repeat(2, 1fr); }
    .contact-help__item { padding: 0 1.75rem; border-left: 1px solid var(--rbmh-hairline); }
    .contact-help__item:nth-child(2n+1) { border-left: 0; }
}
@media (min-width: 1200px) {
    .contact-help { grid-template-columns: repeat(4, 1fr); }
    .contact-help__item:nth-child(2n+1) { border-left: 1px solid var(--rbmh-hairline); }
    .contact-help__item:nth-child(4n+1) { border-left: 0; }
}
.contact-help__icon {
    width: 2.6rem;
    height: 2.6rem;
    color: var(--rbmh-olive);
    margin-bottom: 0.9rem;
}
.contact-help__title {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}
.contact-help__blurb {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--rbmh-text-muted);
}

/* ---- Closing banner: the river photo beside the farewell copy, on the same sand wash
   as the message panel ---- */
.contact-closing {
    display: grid;
    gap: 1.5rem;
    align-items: center;
    background-color: var(--rbmh-cream);
}
@media (min-width: 768px) {
    .contact-closing { grid-template-columns: 2fr 3fr; gap: 2.5rem; }
}
.contact-closing__img {
    width: 100%;
    height: 100%;
    max-height: 11rem;
    object-fit: cover;
    border-radius: var(--rbmh-card-radius);
}