/*
Theme Name: Kadence Child
Theme URI: https://skeelecounseling.com
Description: Kadence child theme for Skeele Counseling therapy practice site.
Author: Skeele Counseling
Author URI: https://skeelecounseling.com
Template: kadence
Version: 0.1.0
Text Domain: kadence-child
*/

:root {
    /* Refined palette — "luxury California" direction per client feedback.
     * Deep forest primary with sage as a secondary tint for logo tie-in.
     * Ivory background, ink charcoal text. Sand/dusty-rose retired.
     */
    --color-primary:       #4A6B5D;   /* softer forest — primary accent */
    --color-primary-light: #8FB09E;   /* lighter sage — secondary, hover, logo tie-in */
    --color-primary-ink:   #2D4A3E;   /* dark forest for overlays (softened) */
    --color-text:          #1F1F1F;   /* ink charcoal */
    --color-text-muted:    #5a5a5a;   /* muted body text */
    --color-background:    #FAF8F4;   /* warm ivory site background */
    --color-surface:       #FFFFFF;   /* crisp white card surfaces */
    --color-border:        rgba(0, 0, 0, 0.08); /* hairline rule */
    --color-border-strong: rgba(0, 0, 0, 0.12);

    /* Legacy aliases — keep old variable names working for a transition.
     * New code should use the renamed variables above. */
    --color-secondary:     #FAF8F4;   /* was sand, now ivory */
    --color-accent:        #3C5148;   /* was rose, now forest */

    /* Typography — add Fraunces as an editorial display serif for H1/H2
     * per the visual refresh. Inter stays as the body/UI face. */
    --font-display:  'Fraunces', Georgia, 'Times New Roman', serif;
    --font-heading:  'Inter', system-ui, -apple-system, sans-serif;
    --font-body:     'Inter', system-ui, -apple-system, sans-serif;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text);
    letter-spacing: -0.018em;
}

/* H1 and H2 use Fraunces display serif — refined editorial treatment.
 * Fraunces is a variable serif; SOFT/opsz axes give a sophisticated feel.
 * H3+ stays in Inter for clean sub-heading hierarchy.
 */
h1, h2 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 72;
    font-weight: 500;
    letter-spacing: -0.022em;
}

h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
}

h1 { font-size: clamp(2.25rem, 4.5vw, 3.4rem); line-height: 1.1; }
h2 { font-size: clamp(1.75rem, 2.8vw, 2.4rem); line-height: 1.15; }
h3 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.35; font-weight: 600; }

/* ── Hero photo overlay — Pacific Northwest forest ─────────────── */
.therapy-hero {
    position: relative;
}

.therapy-hero .wp-block-cover__image-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.therapy-hero .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
    max-width: 960px;
    padding: 3rem 1.5rem;
    /* Shift text right to clear the Nicole portrait overlay on the left */
    margin-left: auto;
    margin-right: 8%;
    text-align: center;
}

@media (max-width: 1024px) {
    .therapy-hero .wp-block-cover__inner-container {
        margin-left: auto;
        margin-right: 5%;
        max-width: 70%;
    }
}

@media (max-width: 600px) {
    /* Portrait hidden on mobile, recenter text */
    .therapy-hero .wp-block-cover__inner-container {
        margin-left: auto;
        margin-right: auto;
        max-width: 960px;
    }
}

/* ── Section header — solid color page headers for inner pages ─── */
.therapy-section-header .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
    max-width: 960px;
    padding: 2.5rem 1.5rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Nicole portrait overlay — bottom-left of hero, transparent PNG */
.therapy-hero__portrait {
    position: absolute;
    bottom: 0;
    left: 8%;
    height: 82%;
    width: auto;
    z-index: 1;
    object-fit: contain;
    object-position: bottom left;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .therapy-hero__portrait {
        left: 2%;
        height: 70%;
    }
}

@media (max-width: 600px) {
    .therapy-hero__portrait {
        display: none;
    }
}

.therapy-hero__eyebrow {
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 500;
    margin-bottom: 1.25rem !important;
    opacity: 0.82;
    font-family: var(--font-body) !important;
}

.therapy-hero__headline {
    font-family: var(--font-display) !important;
    font-size: clamp(2.25rem, 5vw, 3.75rem) !important;
    font-weight: 500;
    letter-spacing: -0.028em;
    line-height: 1.08;
    margin-bottom: 1.25rem !important;
    max-width: 960px;
    margin-left: auto !important;
    margin-right: auto !important;
    font-variation-settings: "SOFT" 30, "opsz" 144;
}

.therapy-hero__subhead {
    font-size: clamp(1rem, 1.3vw, 1.15rem) !important;
    line-height: 1.55;
    max-width: 580px;
    margin: 0 auto 2.25rem auto !important;
    opacity: 0.88;
    font-weight: 400;
}

/* ── Universal 960px content rail ────────────────────────────────
 * Everything in the content area — paragraphs, headings, card grids,
 * multi-column layouts, splits — aligns to 960px centered. Only
 * .alignfull elements (hero, callout band) break out to viewport.
 * This prevents the visual mismatch where text was 820px but card
 * grids were 1400px+.
 */
.entry-content > .wp-block-columns.alignwide {
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── Readable-width wrapper for body paragraphs and headings ─────
 * At our 1600px content container, raw paragraphs and headings would
 * stretch too wide for comfortable reading. This rule caps direct
 * <p>, <h2>, <h3>, and <blockquote> children of the entry content at
 * ~860px and centers them, matching Kadence's "content_narrow_width"
 * pattern. Wide elements (cover blocks, columns, groups with
 * alignwide/alignfull, quick-facts blocks, cards) are explicitly
 * excluded.
 */
.entry-content > p:not(.alignfull):not(.alignwide),
.entry-content > h1:not(.alignfull):not(.alignwide),
.entry-content > h2:not(.alignfull):not(.alignwide),
.entry-content > h3:not(.alignfull):not(.alignwide),
.entry-content > h4:not(.alignfull):not(.alignwide),
.entry-content > ul:not(.alignfull):not(.alignwide),
.entry-content > ol:not(.alignfull):not(.alignwide),
.entry-content > blockquote:not(.alignfull):not(.alignwide) {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Section eyebrows — tiny uppercase labels above sections ── */
.therapy-section-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-primary);
    margin: 0 0 0.5rem !important;
    text-align: center;
}

/* ── Accent text — forest green highlight for key phrases ───── */
.therapy-accent {
    color: var(--color-primary);
    font-weight: 500;
}

/* ── "By the numbers" stat strip ─────────────────────────────── */
.therapy-stat-strip {
    display: flex;
    justify-content: center;
    gap: 3.5rem;
    padding: 3rem 0;
    max-width: 960px;
    margin: 0 auto;
}

.therapy-stat {
    text-align: center;
}

.therapy-stat__number {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 500;
    color: var(--color-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 0.35rem;
}

.therapy-stat__label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
}

@media (max-width: 600px) {
    .therapy-stat-strip {
        flex-wrap: wrap;
        gap: 2rem 3rem;
    }
}

/* ── Credential timeline (About page) ──────────────────────── */
.therapy-timeline {
    max-width: 600px;
    margin: 2rem auto 3rem;
    padding-left: 2rem;
    position: relative;
}

.therapy-timeline__item {
    position: relative;
    padding: 0 0 2.25rem 2rem;
}

.therapy-timeline__item--last {
    padding-bottom: 0;
}

/* Vertical connecting line */
.therapy-timeline__item:not(.therapy-timeline__item--last)::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 10px;
    bottom: 0;
    width: 1.5px;
    background-color: var(--color-primary-light);
    opacity: 0.45;
}

/* Dot on the line */
.therapy-timeline__dot {
    position: absolute;
    left: -6px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-primary);
    z-index: 2;
}

/* Last dot is slightly larger */
.therapy-timeline__item--last .therapy-timeline__dot {
    width: 14px;
    height: 14px;
    left: -7px;
    top: 5px;
}

.therapy-timeline__title {
    font-family: var(--font-heading) !important;
    font-size: 1.05rem !important;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.2rem !important;
    letter-spacing: -0.01em;
}

.therapy-timeline__org {
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* ── Warm validation-first intro (Rise Counseling pattern) ──── */
.therapy-warm-intro__headline {
    max-width: 960px;
    margin: 0 auto 1.75rem !important;
    font-family: var(--font-display) !important;
    font-size: clamp(1.9rem, 3.8vw, 3rem) !important;
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.12;
    color: var(--color-text);
    font-variation-settings: "SOFT" 30, "opsz" 144;
}

.therapy-warm-intro__body {
    max-width: 960px;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--color-text-muted);
}

.therapy-booking-btn {
    display: inline-block;
    padding: 16px 36px;
    background-color: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--color-primary);
    border-radius: 2px;
    box-shadow: none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.therapy-booking-btn:hover,
.therapy-booking-btn:focus {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
    transform: none;
    box-shadow: none;
}

.therapy-booking-btn--secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: 16px 32px;
}

.therapy-booking-btn--secondary:hover,
.therapy-booking-btn--secondary:focus {
    background-color: var(--color-primary);
    color: #ffffff;
}

.therapy-booking-cta-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
}

/* ── "You might be here because..." — flat section, no box ───── */
.therapy-you-might-be-here {
    margin: 4rem auto;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    max-width: 960px;
    text-align: center;
}

.therapy-you-might-be-here__title {
    margin: 0 0 2rem;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    font-weight: 500;
    color: var(--color-text);
    letter-spacing: -0.02em;
    font-style: normal;
}

.therapy-you-might-be-here__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.9rem;
}

.therapy-you-might-be-here__list li {
    position: relative;
    padding-left: 1.75rem;
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-text);
}

.therapy-you-might-be-here__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72rem;
    width: 18px;
    height: 1px;
    background-color: var(--color-primary);
}

.therapy-you-might-be-here__list li {
    padding-left: 2.25rem;
    text-align: left;
}

.therapy-you-might-be-here__list {
    display: inline-block;
    text-align: left;
}

/* ── Service card grid ───────────────────────────────────────────
 * Used on Home and Services index for service feature cards.
 * The wrapping .therapy-service-grid class is applied to the
 * wp-block-columns element; each column contains a
 * .therapy-service-card group block.
 */
.therapy-service-grid {
    gap: 1.75rem !important;
    margin-bottom: 2rem;
    align-items: stretch;
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.therapy-service-grid .wp-block-column {
    display: flex;
    flex-direction: column;
}

.therapy-service-card {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    padding: 2.25rem 2rem 1.75rem !important;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
    transition: border-color 0.25s ease, transform 0.25s ease;
    position: relative;
    overflow: hidden;
}

/* Forest accent rule across the top of each card */
.therapy-service-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

.therapy-service-card:hover {
    border-color: var(--color-primary-light);
}

.therapy-service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 0 1.1rem;
    background-color: transparent;
    color: var(--color-primary);
    transition: color 0.25s ease;
}

.therapy-service-card__icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.5;
}

.therapy-service-card:hover .therapy-service-card__icon {
    color: var(--color-primary);
    transform: none;
}

.therapy-service-card__title {
    font-family: var(--font-heading);
    font-size: 1.15rem !important;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    margin: 0 0 0.85rem !important;
    letter-spacing: -0.01em;
}

.therapy-service-card__desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 1.75rem !important;
    flex: 1;
}

.therapy-service-card__link {
    margin: 0 !important;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border);
}

.therapy-service-card__link a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

.therapy-service-card__link a:hover,
.therapy-service-card__link a:focus {
    color: #5d7d6b;
    gap: 0.65rem;
}

.therapy-service-card__link span[aria-hidden] {
    display: inline-block;
    transition: transform 0.2s ease;
}

.therapy-service-card__link a:hover span[aria-hidden] {
    transform: translateX(2px);
}

@media (max-width: 960px) {
    .therapy-service-card {
        padding: 1.75rem 1.5rem 1.5rem !important;
    }
}

/* ── Split section — portrait + narrative two-column layout ─────
 * Used for "Meet Nicole" on the homepage and About page hero. The
 * image side is ~42% width on desktop, stacks above the text on
 * mobile. Image has a sage accent corner and subtle rounded corners.
 */
.therapy-split {
    gap: 3rem !important;
    margin: 4rem auto !important;
    align-items: center;
    max-width: 960px !important;
}

.therapy-split.therapy-split--mirror {
    flex-direction: row-reverse;
}

.therapy-split .wp-block-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.therapy-split__figure {
    margin: 0;
    position: relative;
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    box-shadow: 0 30px 50px -30px rgba(31, 31, 31, 0.25),
                0 10px 20px -15px rgba(31, 31, 31, 0.12);
}

/* Explicit ratio modifiers so each image keeps its natural framing. */
.therapy-split__figure--3-4 { aspect-ratio: 3 / 4; }
.therapy-split__figure--6-5 { aspect-ratio: 6 / 5; }
.therapy-split__figure--1-1 { aspect-ratio: 1 / 1; }
.therapy-split__figure--4-3 { aspect-ratio: 4 / 3; }
.therapy-split__figure--3-2 { aspect-ratio: 3 / 2; }

/* --natural: let the image's intrinsic dimensions drive figure height.
 * Use this when the image has been cropped to an odd ratio that doesn't
 * fit a standard one (e.g., nicole-wall-art cropped to rule-of-thirds
 * composition at 1200x823 = 1.458 ratio).
 */
.therapy-split__figure--natural {
    aspect-ratio: auto;
}

.therapy-split__figure--natural img {
    position: static;
    height: auto;
    width: 100%;
    object-fit: unset;
    display: block;
}

.therapy-split__figure::before {
    content: "";
    position: absolute;
    top: -14px;
    left: -14px;
    right: 40px;
    bottom: 40px;
    border: 1px solid var(--color-primary);
    border-radius: 0;
    z-index: -1;
    opacity: 0.75;
    pointer-events: none;
}

.therapy-split.therapy-split--mirror .therapy-split__figure::before {
    left: 32px;
    right: -12px;
}

.therapy-split__figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    transition: transform 0.5s ease;
}

.therapy-split__figure:hover img {
    transform: scale(1.02);
}

.therapy-split__heading {
    font-family: var(--font-display) !important;
    font-size: clamp(1.9rem, 3.8vw, 2.75rem) !important;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 1.5rem !important;
    color: var(--color-text);
    font-variation-settings: "SOFT" 30, "opsz" 144;
}

.therapy-split__body {
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--color-text-muted);
}

.therapy-split__body p {
    margin: 0 0 1rem;
}

.therapy-split__body p:last-child {
    margin-bottom: 0;
}

.therapy-split__body .therapy-split__lead {
    font-size: 1.2rem;
    color: var(--color-text);
    font-weight: 500;
}

.therapy-split__link {
    display: inline-block;
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
}

.therapy-split__link:hover,
.therapy-split__link:focus {
    color: #5d7d6b;
    transform: translateX(3px);
}

@media (max-width: 960px) {
    .therapy-split {
        gap: 2rem !important;
        margin: 2.5rem auto !important;
    }

    .therapy-split,
    .therapy-split.therapy-split--mirror {
        flex-direction: column !important;
    }

    .therapy-split .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    .therapy-split__figure {
        max-width: 400px;
        margin: 0 auto 1rem;
    }

    .therapy-split__figure::before {
        display: none;
    }
}

/* ── Callout band — solid color section break ────────────────────
 * Used between text-heavy homepage sections to provide a visual
 * breath. Solid deep-sage block, cream text, no photo. Replaces the
 * earlier photo-band which was too busy.
 */
.therapy-callout-band {
    /* IMPORTANT: do NOT use the margin shorthand here. Writing
     * margin: 4rem 0 would force left/right to 0 and break Kadence's
     * negative-margin alignfull extension — the band would stay
     * inside the 1600px content container instead of bleeding to
     * the viewport edges. Use explicit top/bottom only.
     */
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
    position: relative;
    background-color: #2D4A3E;
}

.therapy-callout-band::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 1px;
    background-color: var(--color-primary-light);
    opacity: 0.65;
}

.therapy-callout-band .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
    max-width: 960px;
    padding: 3rem 1.5rem;
}

.therapy-callout-band__headline {
    font-family: var(--font-display) !important;
    font-size: clamp(1.75rem, 3.4vw, 2.5rem) !important;
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -0.022em;
    margin: 0 0 1.25rem !important;
    color: #FAF8F4 !important;
    font-variation-settings: "SOFT" 30, "opsz" 144;
}

.therapy-callout-band__subhead {
    font-size: clamp(0.92rem, 1.1vw, 1rem) !important;
    line-height: 1.6;
    opacity: 0.78;
    max-width: 640px;
    margin: 0 auto !important;
    font-weight: 400;
}

/* ── Testimonials — flat editorial quotes, no cards ──────────── */
.therapy-testimonial-grid {
    gap: 0 !important;
    margin: 2.5rem auto 3.5rem;
    align-items: start;
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.therapy-testimonial-grid .wp-block-column {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-border);
    padding: 0 2.5rem;
}

.therapy-testimonial-grid .wp-block-column:first-child {
    padding-left: 0;
}

.therapy-testimonial-grid .wp-block-column:last-child {
    border-right: none;
    padding-right: 0;
}

.therapy-testimonial {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    position: relative;
    overflow: visible;
}

.therapy-testimonial::before {
    content: "";
    display: block;
    width: 24px;
    height: 1px;
    background-color: var(--color-primary);
    margin-bottom: 1.5rem;
    position: static;
}

.therapy-testimonial__quote {
    flex: 1;
    margin: 0 0 1.25rem;
    border: none;
    padding: 0;
}

.therapy-testimonial__quote p {
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.005em;
}

.therapy-testimonial__attr {
    font-family: var(--font-body);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    margin: 0;
    padding-top: 1rem;
}

@media (max-width: 960px) {
    .therapy-testimonial-grid .wp-block-column {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: 1.5rem 0;
    }
    .therapy-testimonial-grid .wp-block-column:first-child { padding-top: 0; }
    .therapy-testimonial-grid .wp-block-column:last-child { border-bottom: none; }
}

/* ── Audit-driven "How I Work" modality cards ────────────────── */
.therapy-approach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0;
    margin: 2.5rem auto 3.5rem;
    max-width: 960px;
}

.therapy-approach-card {
    padding: 1.75rem 2rem 1.75rem 0;
    background-color: transparent;
    border: none;
    border-right: 1px solid var(--color-border);
    border-radius: 0;
    padding-left: 2rem;
}

.therapy-approach-card:first-child {
    padding-left: 0;
}

.therapy-approach-card:last-child {
    border-right: none;
}

.therapy-approach-card__icon {
    display: none;
}

.therapy-approach-card__abbr {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.therapy-approach-card__description {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}

@media (max-width: 700px) {
    .therapy-approach-grid {
        grid-template-columns: 1fr;
    }
    .therapy-approach-card {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: 1.25rem 0;
    }
    .therapy-approach-card:first-child { padding-left: 0; }
    .therapy-approach-card:last-child { border-bottom: none; }
}

/* ── Newsletter signup — flat inline section ─────────────────── */
.therapy-newsletter {
    background-color: transparent;
    padding: 4rem 0;
    border: none;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    margin: 4rem auto;
    max-width: 960px;
    text-align: center;
}

.therapy-newsletter__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 500;
    color: var(--color-text);
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.therapy-newsletter__copy {
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 2rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* Kit (ConvertKit) form overrides — match site palette */
.therapy-newsletter .convertkit-form {
    max-width: 580px;
    margin: 0 auto;
}

.therapy-newsletter .formkit-form {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.therapy-newsletter .formkit-form [data-style="clean"],
.therapy-newsletter .formkit-form [data-style="minimal"] {
    background: transparent !important;
    padding: 0 !important;
}

.therapy-newsletter .formkit-input {
    font-family: var(--font-body), sans-serif !important;
    font-size: 0.95rem !important;
    padding: 14px 18px !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: 2px !important;
    background: var(--color-background) !important;
    color: var(--color-text) !important;
}

.therapy-newsletter .formkit-input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(74, 107, 93, 0.15) !important;
    outline: none !important;
}

.therapy-newsletter .formkit-submit {
    font-family: var(--font-body), sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    background-color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 2px !important;
    padding: 14px 28px !important;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.therapy-newsletter .formkit-submit:hover {
    background-color: var(--color-primary-dark, #3a5a4d) !important;
    color: #ffffff !important;
}

.therapy-newsletter .formkit-submit span {
    background: none !important;
}

.therapy-newsletter .formkit-guarantee,
.therapy-newsletter .formkit-powered-by,
.formkit-powered-by-convertkit,
a[href*="kit.com"][data-element="powered-by"],
.formkit-form [data-element="powered-by"] {
    display: none !important;
}

.therapy-newsletter .formkit-alert-success {
    font-family: var(--font-body), sans-serif;
    color: #065f46;
    background: #ecfdf5;
    padding: 1rem;
    border-radius: 4px;
    margin-top: 1rem;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ── FAQ — expandable accordion, editorial styling ──────────── */
.therapy-faq {
    margin: 4rem auto;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    max-width: 960px;
}

.therapy-faq__title {
    margin: 0 0 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-strong);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    color: var(--color-text);
    letter-spacing: -0.02em;
}

.therapy-faq__list {
    margin: 0;
}

.therapy-faq__item {
    padding: 0;
    border-bottom: 1px solid rgba(45, 45, 45, 0.08);
    overflow: hidden;
}

.therapy-faq__item:last-child {
    border-bottom: none;
}

/* Remove native disclosure triangle */
.therapy-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    letter-spacing: -0.005em;
    cursor: pointer;
    list-style: none;            /* Firefox */
    transition: color 0.2s ease;
}

.therapy-faq__q::-webkit-details-marker {
    display: none;               /* Chrome / Safari */
}

/* Chevron indicator */
.therapy-faq__q::after {
    content: '';
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--color-text);
    border-bottom: 2px solid var(--color-text);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    opacity: 0.45;
}

.therapy-faq__item[open] > .therapy-faq__q::after {
    transform: rotate(-135deg);
}

.therapy-faq__q:hover {
    color: var(--color-primary, #2d5a3d);
}

.therapy-faq__q:hover::after {
    opacity: 0.7;
}

.therapy-faq__a {
    margin: 0;
    padding: 0 0 1.25rem;
    font-family: var(--font-body);
    line-height: 1.65;
    color: var(--color-text);
}

.therapy-faq__a p:last-child {
    margin-bottom: 0;
}

/* ── Quick Facts — editorial data section, no container ────────
 * Per client feedback, the old "info box" styling was reading too
 * casual. Now lives inline in the page flow: small uppercase
 * section eyebrow + two-column grid with hairline dividers.
 */
.therapy-quick-facts {
    margin: 3.5rem auto;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    max-width: 960px;
}

.therapy-quick-facts__title {
    margin: 0 0 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-strong);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-text-muted);
}

.therapy-quick-facts__list {
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.therapy-quick-facts__row {
    display: grid;
    grid-template-columns: minmax(180px, 0.75fr) 2fr;
    gap: 2rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
    align-items: baseline;
}

.therapy-quick-facts__row:last-child {
    border-bottom: none;
}

.therapy-quick-facts__label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin: 0;
}

.therapy-quick-facts__value {
    font-family: var(--font-body);
    color: var(--color-text);
    margin: 0;
    font-weight: 400;
}

@media (max-width: 600px) {
    .therapy-quick-facts__row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

/* ── Kadence mobile/desktop header breakpoint fix ───────────────
 * Kadence 1.4.5 ships a min-width:1025px rule that shows the desktop
 * header and hides the mobile header, but it's missing the companion
 * max-width:1024px rule that does the inverse. Without it, the mobile
 * hamburger never shows — #mobile-header stays display:none even on
 * narrow viewports. The Customizer normally writes this rule when the
 * Header Builder is saved once; until that happens, we force it here.
 */
@media (max-width: 1024px) {
    #main-header {
        display: none !important;
    }
    #mobile-header {
        display: block !important;
    }
}

/* Header row edge padding — prevents the logo from sitting flush
 * against the viewport edge on narrow-to-medium screens. */
.site-main-header-inner-wrap,
.site-mobile-header-wrap .site-main-header-inner-wrap {
    padding-left: clamp(1rem, 3vw, 2.5rem);
    padding-right: clamp(1rem, 3vw, 2.5rem);
}

/* Give the logo a little extra breathing room on its left edge */
.site-branding .site-logo {
    padding: 0.25rem 0;
}

/* ── Transparent header → hero overlap ────────────────────────────
 * When the transparent header is active (#masthead is position:absolute),
 * we need to pull the hero cover block UP so it sits behind the header
 * with no visible gap. Kadence handles this for its own entry-hero
 * component but our Gutenberg cover block needs a manual fix.
 */
/* Remove ALL top spacing from the content chain so the hero
 * cover block sits flush against the top of the viewport. */
.transparent-header #wrapper,
.transparent-header #inner-wrap,
.transparent-header .content-area,
.transparent-header .content-container,
.transparent-header .site-main,
.transparent-header .content-wrap,
.transparent-header .entry.content-bg,
.transparent-header .entry-content-wrap,
.transparent-header .entry-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* The hero cover block itself needs no top margin and gets extra
 * padding-top to push its text below the absolutely-positioned header. */
.transparent-header .entry-content > .wp-block-cover.alignfull:first-child {
    margin-top: 0 !important;
    padding-top: 100px;
}

/* ── Sticky header polish ────────────────────────────────────────
 * Kadence handles the actual sticky positioning via the header_sticky
 * theme mod. We add a scrolled-state class on <body> via JS so the
 * sticky header gets a clean white background with a soft shadow
 * once it's no longer overlapping the hero.
 */
.kadence-sticky-header.item-is-fixed {
    transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

body.is-scrolled .kadence-sticky-header.item-is-fixed {
    background-color: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    box-shadow: 0 2px 12px rgba(45, 45, 45, 0.06),
                0 1px 0 rgba(45, 45, 45, 0.04);
}

body.is-scrolled .kadence-sticky-header.item-is-fixed .site-main-header-inner-wrap {
    min-height: 64px;
}

/* When scrolled, override the transparent-header white text back to
 * dark so it's readable against the white sticky background. */
body.is-scrolled.transparent-header #main-header .site-title,
body.is-scrolled.transparent-header #main-header .site-branding .site-description {
    color: var(--color-text) !important;
}

body.is-scrolled.transparent-header .header-navigation .header-menu-container > ul > li.menu-item > a {
    color: var(--color-text-muted) !important;
}

body.is-scrolled.transparent-header .header-navigation .header-menu-container > ul > li.menu-item > a:hover {
    color: var(--color-text) !important;
}

body.is-scrolled.transparent-header .mobile-toggle-open-container .menu-toggle-open {
    color: var(--color-text) !important;
}

/* ── Hero responsive tuning ─────────────────────────────────────── */
@media (max-width: 600px) {
    .therapy-hero__headline {
        font-size: 1.5rem !important;
        line-height: 1.25;
        padding: 0 0.5rem;
    }
    .therapy-hero__subhead {
        font-size: 1rem !important;
        padding: 0 0.5rem;
    }
    .therapy-hero__eyebrow {
        font-size: 0.75rem !important;
    }
}

/* ── Kadence page title on narrow screens ────────────────────────
 * Without this, long service titles like "Therapy for Perfectionism
 * and High-Achievers" get clipped or forced onto a single line.
 */
.kadence-page-title-item h1,
.entry-header .entry-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ── Resources grid — compact vertical cards ─────────────────
 * Visually distinct from service cards: uses Fraunces display
 * title, left accent bar (not top), and no icon. Compact
 * layout with type badge, title, description stacked.
 */
.therapy-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2rem;
    max-width: 960px;
    margin: 2.5rem auto;
}

.therapy-resource-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-text);
    padding: 2rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.therapy-resource-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: var(--color-text);
}

.therapy-resource-card__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin-bottom: 1.25rem;
    background-color: var(--color-background);
}

.therapy-resource-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.therapy-resource-card__type {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-primary);
}

.therapy-resource-card__title {
    font-family: var(--font-display) !important;
    font-size: 1.3rem !important;
    font-weight: 500;
    margin: 0 0 0.6rem !important;
    color: var(--color-text);
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.therapy-resource-card__desc {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    margin: 0;
    flex: 1;
}

.therapy-resource-card__action {
    display: inline-block;
    margin-top: 1rem;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.therapy-resource-card:hover .therapy-resource-card__action {
    text-decoration: underline;
}

.therapy-resources-empty {
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    padding: 3rem 0;
}

/* ── Scroll-reveal animation ─────────────────────────────────────
 * Sections fade and translate up as they enter the viewport.
 * JS adds .therapy-reveal to major content blocks via Intersection
 * Observer and toggles .therapy-reveal--in when each enters view.
 * Respects prefers-reduced-motion via JS bypass.
 */
.therapy-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

.therapy-reveal--in {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger child cards inside grids so they don't all enter at once */
.wp-block-columns.therapy-reveal--in > .wp-block-column:nth-child(1) > * {
    transition-delay: 0ms;
}
.wp-block-columns.therapy-reveal--in > .wp-block-column:nth-child(2) > * {
    transition-delay: 80ms;
}
.wp-block-columns.therapy-reveal--in > .wp-block-column:nth-child(3) > * {
    transition-delay: 160ms;
}

@media (prefers-reduced-motion: reduce) {
    .therapy-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ── Scroll-to-top button ────────────────────────────────────────
 * Fixed bottom-right circle. JS appends to <body> on load and
 * toggles .therapy-scroll-top--visible based on scrollY.
 */
.therapy-scroll-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(45, 45, 45, 0.15),
                0 2px 6px rgba(45, 45, 45, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, visibility 0.25s;
    z-index: 9000;
    -webkit-tap-highlight-color: transparent;
}

.therapy-scroll-top--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.therapy-scroll-top:hover,
.therapy-scroll-top:focus-visible {
    background-color: #6B8B78;
    transform: translateY(-3px);
    outline: none;
}

.therapy-scroll-top:focus-visible {
    box-shadow: 0 6px 18px rgba(45, 45, 45, 0.15),
                0 2px 6px rgba(45, 45, 45, 0.08),
                0 0 0 3px rgba(124, 158, 138, 0.4);
}

@media (max-width: 600px) {
    .therapy-scroll-top {
        right: 1rem;
        bottom: 1rem;
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .therapy-scroll-top {
        transition: opacity 0.15s linear, visibility 0.15s linear;
    }
}

/* ── Social / directory row in footer ───────────────────────────
 * A row of circular icon links to Nicole's external profiles
 * (Psychology Today, Alma, TherapyFinder, LinkedIn, Instagram).
 * Rendered by the [therapy_social_row] shortcode which is embedded
 * in the Kadence footer_html_content theme mod.
 */
.therapy-social-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.therapy-social-row__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--color-primary);
    background-color: rgba(124, 158, 138, 0.08);
    border: 1px solid rgba(124, 158, 138, 0.2);
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.therapy-social-row__link:hover,
.therapy-social-row__link:focus-visible {
    background-color: var(--color-primary);
    color: #ffffff;
    transform: translateY(-2px);
    outline: none;
    text-decoration: none !important;
}

.therapy-social-row__icon {
    width: 18px;
    height: 18px;
    display: block;
}

/* Directory profile links — text-based instead of icon */
.therapy-social-row__link--directory {
    width: auto;
    height: auto;
    border-radius: 3px;
    padding: 0.35rem 0.75rem;
    font-family: var(--font-body), sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

@media (max-width: 600px) {
    .therapy-social-row {
        display: flex;
        justify-content: center;
        margin: 0 0 0.75rem;
    }
}

/* ── Vertical step sequence (Rise Counseling NW pattern) ────────
 * Portrait nature image on the left, 4 numbered steps stacked
 * vertically on the right. Each step has a short accent bar,
 * number, title, and description. CTA at the bottom.
 */
.therapy-steps {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 0 3.5rem;
    max-width: 960px;
    margin: 4rem auto;
}

.therapy-steps__image {
    grid-row: 1 / -1;
    border-radius: 0;
    overflow: hidden;
}

.therapy-steps__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.therapy-steps__heading {
    font-family: var(--font-display) !important;
    font-size: clamp(1.75rem, 3vw, 2.4rem) !important;
    font-weight: 500;
    letter-spacing: -0.025em;
    color: var(--color-text);
    margin: 0 0 0.25rem !important;
}

/* ── Stepped zigzag — text alternates sides of the circle ──────
 * Step 1: circle LEFT,  text RIGHT (left-aligned)
 * Step 2: circle RIGHT, text LEFT  (right-aligned)
 * Step 3: circle LEFT,  text RIGHT (left-aligned)
 * Step 4: circle RIGHT, text LEFT  (right-aligned)
 *
 * Each connection uses TWO L-turns:
 *   ::after on the departing step  = outgoing corner
 *   ::before on the arriving step  = incoming corner
 */
.therapy-steps__list {
    position: relative;
    padding-left: 0;
}

.therapy-steps__bar { display: none; }
.therapy-steps__num { display: none; }
.therapy-steps__path-area { display: none; }
.therapy-steps__path-svg { display: none; }

.therapy-steps__item {
    position: relative;
    display: flex;
    align-items: center;
}

/* Step heights: 1 & 4 same height as each other (200px), 2 & 3 same (200px) */
.therapy-steps__item--left:first-of-type { min-height: 200px; }
.therapy-steps__item--right:not(.therapy-steps__item--last) { min-height: 200px; }
.therapy-steps__item--left:not(:first-of-type) { min-height: 200px; }
.therapy-steps__item--last { min-height: 100px; }

/* ── Circle ─────────────────────────────────────────────────── */
.therapy-steps__circle {
    position: absolute;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 3;
}

/* Step 1: circle at TOP-LEFT */
.therapy-steps__item--left:first-of-type .therapy-steps__circle {
    top: 0; left: 0;
}
/* Steps 2 & 3: circle at VERTICAL MIDDLE of their section */
.therapy-steps__item--right:not(.therapy-steps__item--last) .therapy-steps__circle {
    top: 50%; transform: translateY(-50%); right: 0; left: auto;
}
.therapy-steps__item--left:not(:first-of-type) .therapy-steps__circle {
    top: 50%; transform: translateY(-50%); left: 0;
}
/* Step 4: circle centered like the others, with enough height to match */
.therapy-steps__item--last .therapy-steps__circle {
    top: 50%; transform: translateY(-50%); right: 0; left: auto;
}
.therapy-steps__item--last {
    min-height: 200px;
    align-items: center;
}

/* Left steps: text on the right */
.therapy-steps__item--left .therapy-steps__text {
    margin-left: 42px;
    text-align: left;
}
/* Step 1: move circle to vertical center (same as steps 2 & 3)
 * so text naturally sits beside it */
.therapy-steps__item--left:first-of-type .therapy-steps__circle {
    top: 50%; transform: translateY(-50%);
}
/* Right steps: text on the left */
.therapy-steps__item--right .therapy-steps__text {
    margin-right: 42px;
    text-align: right;
}

/* ── Text content ──────────────────────────────────────────── */
.therapy-steps__text {
    padding-top: 0;
}

/* ── Connecting lines — two L-turns per junction ──────────── */

/* Left steps outgoing: vertical down + corner + horizontal right
 * Horizontal stops short of the far edge by the radius amount (24px
 * instead of 12px) so it doesn't overlap the incoming corner. */
.therapy-steps__item--left:not(.therapy-steps__item--last)::after {
    content: "";
    position: absolute;
    top: calc(50% + 13px);
    left: 12px;
    right: 24px;
    bottom: 0;
    border-left: 2px solid var(--color-primary-light);
    border-bottom: 2px solid var(--color-primary-light);
    border-bottom-left-radius: 12px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

/* Step 2 (right) incoming: corner + vertical down to circle at 50% */
.therapy-steps__item--right::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 24px;
    right: 12px;
    height: calc(50% + 15px);
    border-top: 2px solid var(--color-primary-light);
    border-right: 2px solid var(--color-primary-light);
    border-top-right-radius: 12px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

/* Step 2 (right) outgoing: vertical down from circle at 50% + corner + horizontal left */
.therapy-steps__item--right:not(.therapy-steps__item--last)::after {
    content: "";
    position: absolute;
    top: calc(50% + 13px);
    left: 24px;
    right: 12px;
    bottom: 0;
    border-right: 2px solid var(--color-primary-light);
    border-bottom: 2px solid var(--color-primary-light);
    border-bottom-right-radius: 12px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

/* Step 3 (left) incoming: corner + vertical down to circle at 50% */
.therapy-steps__item--left:not(:first-of-type)::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 12px;
    right: 24px;
    height: calc(50% + 15px);
    border-top: 2px solid var(--color-primary-light);
    border-left: 2px solid var(--color-primary-light);
    border-top-left-radius: 12px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

/* Step 4 (last): shorten the incoming ::before so its border-right
 * stops at the radius gap above the circle, not past it */
.therapy-steps__item--last.therapy-steps__item--right::before {
    height: calc(50% - 11px);
}

/* Step 4: ::before handles the full line, no ::after needed */
.therapy-steps__item--last::after {
    display: none;
}

.therapy-steps__title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.6rem;
    letter-spacing: -0.01em;
}

.therapy-steps__desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}

.therapy-steps__cta {
    padding-top: 1.75rem;
    padding-left: 0;
}

@media (max-width: 820px) {
    .therapy-steps {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .therapy-steps__image {
        position: static;
        max-height: 400px;
        overflow: hidden;
    }

    .therapy-steps__image img {
        height: 400px;
        object-fit: cover;
        object-position: center bottom;
    }

    .therapy-steps__list {
        padding-left: 0;
    }
    .therapy-steps__item--left  { padding-left: 48px; }
    .therapy-steps__item--right { margin-left: 60px; padding-left: 48px; }
}

/* ── Blog post styling ─────────────────────────────────────────
 * Applies site typography and palette to single posts and the
 * blog archive. Posts use the non-transparent header, so normal
 * Kadence spacing applies.
 */

/* Single post title — Fraunces display font */
.single-post .entry-title {
    font-family: var(--font-display), serif;
    font-weight: 500;
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1.2;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

/* Category badge above title */
.single-post .entry-taxonomies {
    margin-bottom: 0.75rem;
}

.single-post .entry-taxonomies .category-links a {
    font-family: var(--font-body), sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: none;
}

/* Post meta (date, author) */
.single-post .entry-meta {
    font-family: var(--font-body), sans-serif;
    font-size: 0.85rem;
    color: var(--color-text-light, #666);
    margin-bottom: 2rem;
}

/* Post body typography */
.single-post .entry-content h2 {
    font-family: var(--font-display), serif;
    font-weight: 500;
    font-size: 1.6rem;
    color: var(--color-text);
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
}

.single-post .entry-content h3 {
    font-family: var(--font-heading), sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--color-text);
    margin-top: 2rem;
}

.single-post .entry-content p {
    font-family: var(--font-body), sans-serif;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-text);
}

.single-post .entry-content blockquote {
    border-left: 3px solid var(--color-primary);
    padding: 0.5rem 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--color-text);
    background: var(--color-background);
}

/* Post footer / tags */
.single-post .entry-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e5e5;
}

/* Post navigation */
.single-post .post-navigation {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e5e5;
}

.single-post .post-navigation a {
    color: var(--color-primary);
    text-decoration: none;
    font-family: var(--font-body), sans-serif;
    font-weight: 500;
}

.single-post .post-navigation a:hover {
    color: var(--color-primary-light);
}

/* Blog archive — card styling */
.blog .loop-entry .entry-title a {
    font-family: var(--font-display), serif;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
}

.blog .loop-entry .entry-title a:hover {
    color: var(--color-primary);
}

.blog .loop-entry .entry-summary p,
.blog .loop-entry .entry-content p {
    font-family: var(--font-body), sans-serif;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--color-text);
}

.blog .loop-entry .entry-taxonomies .category-links a {
    font-family: var(--font-body), sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
}

/* ── Contact form (CF7) ────────────────────────────────────────
 * Styles the Contact Form 7 output to match the site aesthetic.
 */
.therapy-contact-form {
    max-width: 680px;
    margin: 0 auto;
}

.therapy-contact-form__row {
    display: flex;
    gap: 1.5rem;
}

.therapy-contact-form__row .therapy-contact-form__field {
    flex: 1;
}

.therapy-contact-form label {
    display: block;
    font-family: var(--font-body), sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 1.25rem;
}

.therapy-contact-form input[type="text"],
.therapy-contact-form input[type="email"],
.therapy-contact-form input[type="tel"],
.therapy-contact-form select,
.therapy-contact-form textarea {
    display: block;
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.75rem 1rem;
    font-family: var(--font-body), sans-serif;
    font-size: 1rem;
    color: var(--color-text);
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.therapy-contact-form input:focus,
.therapy-contact-form select:focus,
.therapy-contact-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(74, 107, 93, 0.15);
}

.therapy-contact-form textarea {
    min-height: 140px;
    resize: vertical;
}

.therapy-contact-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.therapy-contact-form input[type="submit"] {
    display: inline-block;
    padding: 0.85rem 2.5rem;
    font-family: var(--font-body), sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background-color: var(--color-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    margin-top: 0.5rem;
}

.therapy-contact-form input[type="submit"]:hover {
    background-color: var(--color-primary-dark, #3a5a4d);
}

.therapy-contact-form input[type="submit"]:active {
    transform: translateY(1px);
}

.therapy-contact-form {
    margin-bottom: 3rem;
}

/* CF7 validation */
.therapy-contact-form .wpcf7-not-valid {
    border-color: #dc2626;
}

.therapy-contact-form .wpcf7-not-valid-tip {
    font-size: 0.8rem;
    color: #dc2626;
    margin-top: 0.3rem;
}

.therapy-contact-form .wpcf7-response-output {
    font-family: var(--font-body), sans-serif;
    font-size: 0.95rem;
    padding: 1rem 1.25rem;
    border-radius: 6px;
    margin-top: 1.5rem;
}

.therapy-contact-form .wpcf7-mail-sent-ok {
    background: #ecfdf5;
    border-color: #10b981;
    color: #065f46;
}

/* Crisis notice */
.therapy-crisis-notice {
    max-width: 680px;
    margin: 2rem auto;
    padding: 1.25rem 1.5rem;
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: 0 6px 6px 0;
    font-family: var(--font-body), sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #92400e;
}

@media (max-width: 600px) {
    .therapy-contact-form__row {
        flex-direction: column;
        gap: 0;
    }
}

/* SimplePractice contact form button */
.therapy-sp-contact-wrap {
    text-align: center;
    margin: 2rem 0 3rem;
}

/* ── 404 page ──────────────────────────────────────────────── */
.therapy-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 4rem 2rem;
    text-align: center;
}

.therapy-404__inner {
    max-width: 560px;
}

.therapy-404__eyebrow {
    font-family: var(--font-body), sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.therapy-404__title {
    font-family: var(--font-display), serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 500;
    color: var(--color-text);
    margin: 0 0 1rem;
    line-height: 1.2;
}

.therapy-404__copy {
    font-family: var(--font-body), sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-text-muted, #666);
    margin-bottom: 2rem;
}

.therapy-404__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}