/* ============================================================
   Practitioners page styles. Loaded after home.css, so it reuses
   the :root tokens (--c-ink, --c-terracotta, --ff-sans, --ff-serif,
   --ff-mono) and the shared .ai-card component. Mobile-first;
   desktop overrides live in the min-width:1024px block below.

   Hero ("Practice without the practice."):
     Mobile  — arched image, then title, sub, body, AI card, CTAs.
     Desktop — full-width centered title; text column left, arched
               image bleeding to the right edge.
   ============================================================ */

.prac-hero {
    background: #FFFDF8;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "media"
        "title"
        "text";
    padding: 24px 20px 48px;
    overflow: hidden;
}

/* --- Hero image. The arch is the top-left corner only; the #9B8F7D
   shape backs the image and shows through the rounded corner. --- */
.prac-media {
    grid-area: media;
    display: block;
    aspect-ratio: 216 / 173;
    border-radius: 150px 0 0 0;
    background: #9B8F7D;
    overflow: hidden;
}
.prac-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% 30%;
    transform: scale(1.45);
    transform-origin: 45% 28%;
    display: block;
}

/* --- Headline --- */
.prac-title {
    grid-area: title;
    color: #5C5449;
    font-family: var(--ff-sans);
    font-size: 40px;
    font-weight: 400;
    line-height: 37.6px;
    letter-spacing: 0.325px;
    margin: 28px 0 0;
}

.prac-text {
    grid-area: text;
}

/* --- Subheading --- */
.prac-sub {
    color: #7A6B50;
    font-family: var(--ff-sans);
    font-size: 20px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0.396px;
    margin: 14px 0 0;
}

/* --- Body copy --- */
.prac-body {
    margin-top: 20px;
}
.prac-body p {
    color: #6B6761;
    font-family: var(--ff-sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 22.75px;
    letter-spacing: -0.15px;
    margin: 0;
}
.prac-body p + p {
    margin-top: 18px;
}

/* --- Aesthetic Intelligence card (reuses .ai-card from home.css) --- */
.prac-ai {
    margin-top: 28px;
}
.prac-ai .ai-card {
    width: 100%;
    max-width: 360px;
    height: auto;
}

/* --- CTAs --- */
.prac-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}
.prac-btn-dark,
.prac-btn-outline {
    display: inline-flex;
    height: 28px;
    padding: 0 28px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    white-space: nowrap;
    font-family: var(--ff-sans);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.2px;
    transition: opacity 0.15s ease;
}
.prac-btn-dark {
    width: 173px;
    background: var(--c-ink);
    color: #FFF;
    border-radius: 32px;
}
.prac-btn-outline {
    color: #B8754D;
    border: 1px solid #C4A87A;
    background: #F2EAD8;
    border-radius: 32px;
}
.prac-btn-dark:hover,
.prac-btn-outline:hover {
    opacity: 0.9;
}

/* ============================================================
   Desktop (>= 1024px): full-width centered title on top, then a
   two-column row — text left, arched image bleeding to the right
   edge. No right padding on the hero so the media reaches the edge.
   ============================================================ */
@media (min-width: 1024px) {
    .prac-hero {
        grid-template-columns: 1.4fr 1fr;
        grid-template-areas:
            "title title"
            "text  media";
        column-gap: 48px;
        align-items: center;
        padding: 56px 0 0 56px;
    }

    .prac-title {
        text-align: center;
        font-size: 60px;
        line-height: 64.6px;
        letter-spacing: 0.325px;
        margin: 0 0 40px;
        padding-right: 56px; /* balance the missing right padding */
    }

    .prac-text {
        max-width: 700px;
        margin-left: auto;
        padding-bottom: 56px;
    }

    .prac-sub {
        font-size: 30px;
        line-height: 36px;
        letter-spacing: 0.396px;
        margin: 0;
    }

    .prac-body p {
        font-size: 16px;
        line-height: 22.75px;
        letter-spacing: -0.15px;
    }

    /* Image fills the right column and bleeds to the viewport edge;
       arch on the top-left corner only. */
    .prac-media {
        align-self: stretch;
        aspect-ratio: auto;
        height: 100%;
        border-radius: 220px 0 0 0;
    }
    .prac-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: none;
    }
}

/* Headline mid-size band (766–1023px): between mobile and desktop. */
@media (min-width: 766px) and (max-width: 1023px) {
    .prac-title { font-size: 52px; line-height: 56px; }
}

/* ============================================================
   Stats section — heading + italic subheading + three dark stat
   cards. Mobile: cards in a horizontal snap-scroll slider (like
   the home page chapter section). Desktop: three cards centered,
   20px apart.
   ============================================================ */
.prac-stats {
    background: #F5F3EE;
    padding: 48px 0;
    text-align: center;
}
.prac-stats-title {
    color: #5C5449;
    font-family: var(--ff-sans);
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    margin: 0;
    padding: 0 20px;
}
.prac-stats-sub {
    color: #8B7355;
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    margin: 6px 0 0;
    padding: 0 20px;
}

.prac-stats-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 20px;
    margin-top: 28px;
}
.prac-stats-track::-webkit-scrollbar { display: none; }

.prac-stat-card {
    flex: 0 0 368px;
    max-width: 340px;
    height: 163px;
    scroll-snap-align: center;
    border-radius: 10px;
    background: #3F3C34;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.prac-stat-icon {
    display: block;
    line-height: 0;
    margin-bottom: 10px;
}
.prac-stat-number {
    color: #FFF;
    font-family: var(--ff-mono);
    font-size: 60px;
    font-weight: 400;
    line-height: 60px;
}
.prac-stat-label {
    color: #FFF;
    font-family: var(--ff-mono);
    font-size: 11px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 22px;
}

@media (min-width: 1024px) {
    .prac-stats {
        padding: 58px 56px 80px;
    }
    .prac-stats-title {
        font-size: 40px;
        line-height: 40px;
    }
    .prac-stats-sub {
        font-size: 30px;
        line-height: 24px;
        margin-top: 8px;
    }
    .prac-stats-track {
        overflow: visible;
        justify-content: center;
        gap: 20px;
        padding: 0;
        margin-top: 45px;
        scroll-snap-type: none;
    }
    .prac-stat-card {
        scroll-snap-align: none;
    }
}

/* ============================================================
   "How it works" section — eyebrow + centered intro, then three
   numbered steps. Mobile: stacked, left-aligned, separated by a
   short dashed terracotta divider. Desktop: three columns with
   thin vertical dividers. Closes with a centered Apply button.
   ============================================================ */
.prac-how {
    background:
        radial-gradient(ellipse 70% 55% at 80% 100%, #EDCFC1 0%, rgba(237, 207, 193, 0) 100%),
        radial-gradient(ellipse 70% 55% at 20% 100%, #EDE5C1 0%, rgba(237, 229, 193, 0) 100%),
        #FFFDF8;
    padding: 22px 20px 56px;
}
.prac-how-eyebrow {
    color: #C4704A;
    font-family: var(--ff-mono);
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.55px;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}
.prac-how-intro {
    color: #6B6761;
    text-align: center;
    font-family: var(--ff-sans);
    font-size: 12px;
    font-weight: 400;
    line-height: 22.75px;
    letter-spacing: -0.15px;
    margin: 12px auto 0;
}

.prac-how-steps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 46px;
}
.prac-how-steps .prac-how-step:not(:first-child) {
    margin-top: 24px;
}
.prac-how-num {
    color: #C4704A;
    font-family: var(--ff-mono);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
}
.prac-how-heading {
    color: #7A6B50;
    font-family: var(--ff-sans);
    font-size: 30px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.396px;
    margin: 16px 0 0;
}
.prac-how-body {
    color: #6B6761;
    font-family: var(--ff-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 22.75px;
    letter-spacing: -0.15px;
    margin: 14px 0 0;
}
.prac-how-divider {
    width: 196px;
    height: 0;
    border-top: 1px dashed #CB734B;
    margin-top: 46px;
}

.prac-how-cta {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.prac-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 28px;
    border-radius: 9999px;
    background: var(--c-ink);
    color: #FFF;
    font-family: var(--ff-sans);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.2px;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}
.prac-apply:hover { opacity: 0.9; }

@media (min-width: 1024px) {
    .prac-how {
        padding: 48px 56px 56px;
    }
    .prac-how-intro {
        max-width: 600px;
    }
    .prac-how-steps {
        flex-direction: row;
        align-items: flex-start;
        max-width: 1200px;
        margin: 46px auto 0;
    }
    .prac-how-steps .prac-how-step,
    .prac-how-steps .prac-how-step:not(:first-child) {
        flex: 1;
        margin-top: 0;
        padding: 0 40px;
    }
    .prac-how-steps .prac-how-step:first-child { padding-left: 0; }
    .prac-how-steps .prac-how-step:last-child { padding-right: 0; }
    .prac-how-divider {
        width: 1px;
        height: auto;
        align-self: stretch;
        border-top: none;
        border-left: 1px solid #E4DBCD;
        margin: 0;
    }
}

/* ============================================================
   "Pilot programs" section — centered header with eyebrow,
   serif-ish heading, and intro. Two cream-tinted cards each
   with a media block on top and content below. Mobile stacks;
   desktop places them side by side.
   ============================================================ */
.prac-pilot {
    background: #FFFDF8;
    padding: 48px 0 64px;
}
.prac-pilot-eyebrow {
    color: #CB734B;
    font-family: var(--ff-mono);
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.55px;
    text-transform: uppercase;
    text-align: center;
    margin: 0 20px;
}
.prac-pilot-title {
    color: #5C5449;
    text-align: center;
    font-family: var(--ff-sans);
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    margin: 8px 20px 0;
}
.prac-pilot-intro {
    color: #6B6761;
    text-align: center;
    font-family: var(--ff-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 22.75px;
    letter-spacing: -0.15px;
    margin: 10px 20px 0;
}

.prac-pilot-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
}
.prac-pilot-card {
    background: #FCF5F2;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.prac-pilot-media {
    width: 100%;
    aspect-ratio: 397 / 146;
    overflow: hidden;
    background: #EADFD2;
    border-radius: 16px 16px 0 0;
}
.prac-pilot-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.prac-pilot-body {
    padding: 22px 22px 26px;
}
.prac-pilot-tag {
    color: #CB734B;
    font-family: var(--ff-mono);
    font-size: 16px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}
.prac-pilot-heading {
    color: #5C5449;
    font-family: var(--ff-sans);
    font-size: 20px;
    font-weight: 400;
    line-height: 28.672px;
    margin: 10px 0 0;
}
.prac-pilot-copy {
    color: #7A6A60;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 22.304px;
    margin: 14px 0 0;
}
.prac-pilot-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: #CB734B;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.prac-pilot-link:hover { opacity: 0.85; }
.prac-pilot-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #CB734B;
    flex: 0 0 5px;
}
.prac-pilot-link--upcoming {
    color: #7A6B50;
    cursor: default;
}
.prac-pilot-link--upcoming .prac-pilot-dot {
    background: #7A6B50;
}
.prac-pilot-link--upcoming:hover { opacity: 1; }

@media (min-width: 1024px) {
    .prac-pilot {
        padding: 80px 56px 96px;
    }
    .prac-pilot-eyebrow,
    .prac-pilot-title,
    .prac-pilot-intro {
        margin-left: auto;
        margin-right: auto;
    }
    .prac-pilot-title {
        font-size: 42px;
        line-height: 50px;
        max-width: 720px;
    }
    .prac-pilot-intro {
        max-width: 520px;
    }
    .prac-pilot-grid {
        flex-direction: row;
        gap: 32px;
        max-width: 1200px;
        margin: 56px auto 0;
    }
    .prac-pilot-card {
        flex: 1;
        border-radius: 16px;
    }
    .prac-pilot-media {
        aspect-ratio: 16 / 8.2;
    }
    .prac-pilot-body {
        padding: 28px 32px 32px;
    }
}

/* ============================================================
   "Who we are looking for" section — dark warm-brown background,
   centered header, then four equal cards with a 48px purple-
   outlined circular icon, heading, body, and a thin white-alpha
   divider between cards (and after the intro).
   ============================================================ */
.prac-who {
    background: #3F3C34;
    padding: 56px 0 64px;
}
.prac-who-inner {
    padding: 0 24px;
    max-width: 1200px;
    margin: 0 auto;
}
.prac-who-eyebrow {
    color: #CB734B;
    font-family: var(--ff-mono);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    margin: 0;
}
.prac-who-title {
    color: #FFF;
    font-family: var(--ff-sans);
    font-size: 40px;
    font-weight: 400;
    line-height: 59px;
    letter-spacing: 0.264px;
    margin: 20px 0 0;
}
.prac-who-intro {
    color: #F5EDE3;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -0.312px;
    margin: 10px 0 0;
}
.prac-who-divider {
    width: 320px;
    height: 1px;
    background: rgba(255, 255, 255, 0.40);
    border: 0;
    margin: 50px 0 0;
}
.prac-who-cards {
    display: flex;
    flex-direction: column;
}
.prac-who-card {
    padding: 33px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.40);
}
.prac-who-card:last-child {
    border-bottom: 0;
}
.prac-who-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    min-width: 48px;
    padding: 0 12px;
    border: 2px solid #CBC1ED;
    border-radius: 9999px;
}
.prac-who-heading {
    color: #FFF;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: -0.2px;
    margin: 16px 0 0;
}
.prac-who-body {
    color: #F5EDE3;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.2px;
    margin: 16px 0 0;
}

@media (min-width: 1024px) {
    .prac-who {
        padding: 88px 0 96px;
    }
    .prac-who-inner {
        padding: 0 56px;
        display: grid;
        grid-template-columns: minmax(0, 720px) minmax(0, 622px);
        column-gap: clamp(32px, calc(33vw - 305px), 168px);
        align-items: start;
    }
    .prac-who-header {
        grid-column: 1;
        grid-row: 1;
    }
    .prac-who-title {
        font-size: 60px;
        line-height: 75px;
        letter-spacing: 0.264px;
        margin-top: 22px;
    }
    .prac-who-intro {
        font-size: 20px;
        line-height: 26px;
        letter-spacing: -0.312px;
        margin-top: 20px;
    }
    .prac-who-divider {
        display: none;
    }
    .prac-who-cards {
        grid-column: 2;
        grid-row: 1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 252px));
        column-gap: clamp(32px, calc(21vw - 184px), 118px);
        row-gap: 60px;
        margin-top: 0;
    }
    .prac-who-card {
        padding: 0;
        border-bottom: 0;
    }
}

/* ============================================================
   "A note to practitioners" section — photo on top (mobile)
   or left (desktop), with eyebrow, large heading, two body
   paragraphs, and Tara's transparent signature below.
   ============================================================ */
.prac-note {
    background: #FFFDF8;
    padding: 48px 0 64px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.prac-note-body {
    padding: 0 20px;
}
.prac-note-media {
    width: 100%;
    overflow: hidden;
}
.prac-note-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.prac-note-body {
    display: flex;
    flex-direction: column;
}
.prac-note-eyebrow {
    color: #CB734B;
    font-family: var(--ff-mono);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}
.prac-note-heading {
    color: #2E2A27;
    text-align: center;
    font-family: var(--ff-sans);
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    margin: 18px 0 0;
}
.prac-note-copy {
    color: #3F3C34;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: -0.312px;
    text-align: center;
    max-width: 362px;
    margin: 28px auto 0;
}
.prac-note-copy p {
    margin: 0;
}
.prac-note-copy p + p {
    margin-top: 16px;
}
.prac-note-signature {
    display: block;
    margin: 28px auto 0;
    max-width: 110px;
    width: auto;
    height: auto;
}

@media (min-width: 1024px) {
    .prac-note {
        flex-direction: row;
        align-items: center;
        gap: 64px;
        padding: 80px 56px 96px;
        max-width: 1312px;
        margin: 0 auto;
    }
    .prac-note-media {
        flex: 1 1 50%;
        min-width: 0;
        width: auto;
        max-width: 668px;
    }
    .prac-note-media img {
        width: 100%;
        height: auto;
        aspect-ratio: 668 / 495;
        object-fit: cover;
        border-radius: 13px;
    }
    .prac-note-body {
        flex: 1 1 50%;
        align-items: flex-start;
        min-width: 0;
        max-width: 620px;
        padding: 0;
    }
    .prac-note-eyebrow {
        text-align: left;
    }
    .prac-note-heading {
        text-align: left;
        font-size: 38px;
        line-height: 50px;
        margin-top: 16px;
    }
    .prac-note-copy {
        text-align: left;
        max-width: none;
        margin: 24px 0 0;
    }
    .prac-note-signature {
        margin: 28px 0 0;
        max-width: 110px;
    }
}