/*
 * Page-specific styles
 * Photo blocks with sticky photos, parallax, blur, and unstick behavior
 */

/* ═══════════════════════════════════════════════════════════
   DESIGN SYSTEM — Z-INDEX LAYERS

   Layer 0:  Photo backgrounds
   Layer 1:  Hero content over photo
   Layer 2:  Transparent sections (see photo behind)
   Layer 10: Unstick sections (solid background)
   Layer 20: Header, modals
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   PHOTO BLOCK — Container for sticky photo + content sections

   Structure:
   .photo-block
     .photo-block__photo (sticky)
       img
       .photo-block__gradient (optional, for hero)
     .hero / .section--transparent (float over photo)
     .section--unstick (takes photo with it)
═══════════════════════════════════════════════════════════ */

.photo-block {
    position: relative;
    overflow-x: clip; /* Clip horizontal overflow from photo container (100%+100px) without breaking sticky */
}

/* First photo-block starts from absolute top (under header) */
.photo-block:first-child {
    margin-top: -80px; /* Compensate for page__content padding */
}

/* ═══════════════════════════════════════════════════════════
   PHOTO CONTAINER — Oversized HORIZONTALLY to hide blur artifacts

   IMPORTANT:
   1. Container wider than viewport (50px on each side) — hides horizontal blur
   2. Height is exactly 100vh — no vertical overflow needed
   3. Top: 0 — photo aligns to top of viewport, NOT to header
   4. Centered via margin-left: -50px (half of the extra width)
═══════════════════════════════════════════════════════════ */
.photo-block__photo {
    position: sticky;
    top: 0;
    left: 0;
    margin-left: -50px;
    z-index: 0;
    width: calc(100% + 100px);  /* parent width + 50px each side */
    height: 100vh;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   PHOTO IMAGE — Fills the oversized container

   IMPORTANT:
   1. Image fills 100% of the oversized container
   2. Container handles the blur artifact hiding (extends beyond viewport)
   3. Use object-position to align the image within container
═══════════════════════════════════════════════════════════ */
.photo-block__photo img {
    position: absolute;
    /* Extend beyond container to hide blur edge artifacts.
       Must be >= maxBlur (6px) to prevent halo at edges during scroll blur. */
    top: -20px;
    left: -20px;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    object-fit: cover;
    object-position: center center;  /* Default: centered */
    will-change: filter;
    /* No transition — JS updates via rAF, transition adds unwanted inertia */
}

/* Hero photo — img is rotated inside an unrotated container.
   Container's overflow:hidden clips to straight horizontal/vertical edges.
   Image is scaled up so rotated corners never show. */
.photo-block__photo--hero {
    background: var(--color-surface);
    overflow: hidden;
}

.photo-block__photo--hero img {
    width: calc(60% + 40px);
    top: -20px;
    left: auto;
    right: -20px;
    height: calc(100% + 40px);
    object-position: center 15%;
    -webkit-mask-image: linear-gradient(to left, black 92%, transparent 100%);
    mask-image: linear-gradient(to left, black 92%, transparent 100%);
}

/* Gradient overlay hidden — fade handled by mask on img */
.photo-block__gradient {
    display: none;
}

/* Full-width photo — fills container, centered */
.photo-block__photo--full img {
    width: 100%;
    left: 0;
    object-position: center center;
}

/* Spacer to show full photo before content */
.photo-block__spacer {
    height: 30vh;
    position: relative;
    z-index: 1;
}

/* Photo block 2 (events): shorter spacer so content + blur appear sooner */
#photo-block-2 .photo-block__spacer {
    height: 0;
}

/* ═══════════════════════════════════════════════════════════
   HERO — Text over photo
═══════════════════════════════════════════════════════════ */

.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-3xl) var(--container-padding);
    padding-top: calc(var(--space-3xl) + 80px); /* Account for header height in centering */
}

.hero__content {
    max-width: var(--container-max);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.hero__title {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: var(--weight-normal);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-lg);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero__subtitle {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-xl);
    max-width: 480px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hero__actions {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Hero over photo — positioned above sticky photo */
.hero--over-photo {
    position: relative;
    z-index: 2;
    margin-top: -100vh; /* Pull up over the sticky photo */
}

.hero--over-photo .hero__content {
    max-width: 580px;
    padding: 0;
    margin: 0;
    margin-left: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
}

.hero--over-photo .hero__title {
    color: var(--color-ink);
}

.hero--over-photo .hero__subtitle {
    color: var(--color-ink-soft);
}

/* Centered hero variant (for full-width photos) */
.hero--centered {
    text-align: center;
    align-items: center;
}

.hero__content--centered {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.hero__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-md);
}

/* Light text for dark photos */
.hero__title--light {
    color: #fff;
}

.hero__subtitle--light {
    color: rgba(255, 255, 255, 0.8);
}

.hero__eyebrow--light {
    color: rgba(255, 255, 255, 0.7);
}

/* ═══════════════════════════════════════════════════════════
   TRANSPARENT SECTIONS — Float over sticky photo
═══════════════════════════════════════════════════════════ */

.section--transparent {
    position: relative;
    z-index: 2;
    background: transparent;
    padding: var(--space-3xl) var(--container-padding);
}

/* Light text variant for dark photos */
.section--light-text .section__eyebrow {
    color: rgba(255, 255, 255, 0.7);
}

.section--light-text .section__title {
    color: #fff;
}

/* Event items with light text */
.event-item--light .event-item__title,
.event-item--light .event-item__day,
.event-item--light .event-item__month {
    color: #fff;
}

.event-item--light .event-item__meta {
    color: rgba(255, 255, 255, 0.7);
}

/* Light buttons — for use on dark photo backgrounds */
.btn--light {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.btn--light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-secondary.btn--light {
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-ink);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-secondary.btn--light:hover {
    background: #fff;
    color: var(--color-ink);
    border-color: #fff;
}

.btn-ghost.btn--light {
    color: #fff;
    border-color: transparent;
    background: transparent;
}

.btn-ghost.btn--light:hover {
    background: transparent;
    border-color: transparent;
}

/* ═══════════════════════════════════════════════════════════
   UNSTICK SECTIONS — Solid background, takes photo with it
═══════════════════════════════════════════════════════════ */

.section--unstick {
    position: relative;
    z-index: 10;
    background: var(--color-surface);
}

/* Empty unstick sections — no content, just ends sticky behavior */
.section--unstick:empty {
    padding: 0;
}

.section--unstick.section-cream {
    background: var(--color-surface-cream);
}

/* Solid background layer behind animated content */
.section--unstick::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    z-index: -1;
}

/* ═══════════════════════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════════════════════ */

.cta-section {
    text-align: center;
    padding: var(--space-4xl) var(--container-padding);
    background-color: var(--color-surface-dark);
    color: var(--color-surface);
}

.cta-section__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    margin-bottom: var(--space-md);
}

.cta-section__text {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--color-ink-faint);
    margin-bottom: var(--space-xl);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    line-height: var(--leading-relaxed);
}

.cta-section__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
}

.cta-section__contact {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.cta-section__contact a {
    color: var(--color-surface);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cta-section__contact a:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Full-page contact — vertically centered */
.cta-section--page {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE — Light, compact, single-screen
═══════════════════════════════════════════════════════════ */

.contact-page {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: stretch;
}

/* Split layout: photo left, content right */
.contact-split {
    display: grid;
    grid-template-columns: 40% 1fr;
    width: 100%;
    min-height: calc(100vh - 60px);
}

/* Photo column — full height, no layout shift */
.contact-split__photo {
    position: relative;
    overflow: hidden;
    background: var(--color-surface-warm);
}

.contact-split__photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 10%;
    display: block;
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-gentle);
}

.contact-split__photo img.is-loaded {
    opacity: 1;
}

/* Content column */
.contact-split__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-3xl) var(--space-3xl) var(--space-2xl);
    gap: var(--space-2xl);
}

/* Top: title + subtitle + CTA */
.contact-split__top {
    max-width: 520px;
}

.contact-split__title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--weight-normal);
    line-height: var(--leading-tight);
    color: var(--color-ink);
    margin-bottom: var(--space-sm);
}

.contact-split__subtitle {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-ink-soft);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-lg);
}

.contact-split__actions {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.contact-split__email {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.contact-split__email a {
    color: var(--color-ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--color-border);
    transition: text-decoration-color var(--transition-normal);
}

.contact-split__email a:hover {
    text-decoration-color: var(--color-ink-soft);
}

/* Contact content — smooth transition from skeleton to real content */
.contact-split__top {
    transition: opacity var(--duration-normal) var(--ease-gentle);
}

.contact-split__top.is-loading {
    opacity: 1;
}

.contact-split__top.is-transitioning {
    opacity: 0;
}

.contact-split__top.is-ready {
    opacity: 1;
}

/* Contact skeletons — custom lines that match real text metrics exactly */
.contact-skeleton {
    display: block;
}

.contact-skeleton__line {
    display: block;
    height: 0.72em;                       /* visually matches serif cap-height inside h1 */
    margin-bottom: 0.38em;               /* gap = line-height (1.1) minus glyph */
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--color-surface-cream) 0%, var(--color-surface-warm) 100%);
    position: relative;
    overflow: hidden;
}

.contact-skeleton__line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: skeleton-shimmer 2s ease-in-out infinite;
}

.contact-skeleton__line:last-child {
    margin-bottom: 0;
}

/* Body-text skeleton lines (smaller, taller line-height) */
.contact-skeleton__line--body {
    height: 0.85em;                       /* body text is thicker relative to em */
    margin-bottom: 0.65em;               /* line-height 1.7 - glyph ≈ wider gap */
}

/* Apply section — 2×2 grid */
.contact-apply {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-lg);
}

.contact-apply__label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin-bottom: var(--space-md);
}

.contact-apply__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

/* Apply card — prominent, clickable */
.contact-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-surface-warm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--duration-normal) var(--ease-out);
}

.contact-card:hover {
    background: #fff;
    border-color: var(--color-accent-soft);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
}

.contact-card__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-2xs);
}

.contact-card__name {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-normal);
    color: var(--color-ink);
    line-height: var(--leading-tight);
}

.contact-card__cta {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-ink-soft);
    margin-top: var(--space-xs);
    transition: color var(--duration-normal) var(--ease-out);
}

.contact-card__arrow {
    display: inline-block;
    transition: transform var(--duration-normal) var(--ease-out);
}

.contact-card:hover .contact-card__cta {
    color: var(--color-ink);
}

.contact-card:hover .contact-card__arrow {
    transform: translateX(4px);
}

/* Contact mobile */
@media (max-width: 900px) {
    .contact-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .contact-split__photo {
        height: 50vw;
        max-height: 360px;
    }

    .contact-split__content {
        padding: var(--space-xl) var(--container-padding) var(--space-xl);
        gap: var(--space-xl);
    }

    .contact-split__top {
        max-width: 100%;
    }

    .contact-split__title {
        font-size: var(--text-3xl);
    }
}

@media (max-width: 480px) {
    .contact-apply__grid {
        grid-template-columns: 1fr;
    }

    .contact-split__content {
        padding: var(--space-lg) var(--container-padding) var(--space-lg);
    }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */

.footer {
    position: relative;
    z-index: 10;
    background: var(--color-surface-dark);
    color: rgba(255, 255, 255, 0.7);
}

.footer a {
    color: rgba(255, 255, 255, 0.7);
}

.footer a:hover {
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — No sticky effects, clean vertical layout

   Unified breakpoint system:
   - 900px: tablet → mobile layout switch
   - 640px: small mobile adjustments
   - 480px: extra-small tweaks (iPhone SE)

   Photo block uses clamp() for smooth scaling.
   Hero overlap uses relative units (vw-based) for fluid fit.
═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

    /* ─── MOBILE HERO — Large portrait right, title overlaps bottom ───
       Photo: nearly full-width, shifted right, cropped large.
       Gradient: left + bottom edges fade to page background color.
       Title: large, 2 lines, overlaps photo's bottom-left via negative margin.
       Subtitle + buttons: below photo, normal flow.
       No parallax, no sticky — photo scrolls with content.
    ─────────────────────────────────────── */

    /* Photo-block: no header overlap, simple vertical stack */
    .photo-block:first-child {
        margin-top: 0;
    }

    /* All photo containers: reset sticky/parallax */
    .photo-block__photo {
        position: relative;
        top: auto;
        left: auto;
        margin-left: 0;
        width: 100%;
        overflow: hidden;
    }

    /* Hero photo containers: tall crop for portrait */
    .photo-block:has(.hero--over-photo) .photo-block__photo {
        height: clamp(400px, 108vw, 560px);
    }

    /* Non-hero photo containers (dividers): shorter */
    .photo-block:not(:has(.hero--over-photo)) .photo-block__photo {
        height: clamp(200px, 40vw, 400px);
    }

    /* All photo images: base reset, no parallax */
    .photo-block__photo img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* Gradient overlay: compact bottom + left fade for title readability.
       Kept short so photo stays prominent. */
    .photo-block:has(.hero--over-photo) .photo-block__gradient {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin-left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        /* Extend solid color below to cover any sub-pixel gap (overflow-x:clip prevents negative bottom) */
        box-shadow: 0 4px 0 var(--color-surface);
        background:
            /* Bottom fade — covers title zone fully (rgba matches --color-surface: #F7F0E7) */
            linear-gradient(to top, var(--color-surface) 0%, rgba(247, 240, 231, 0.85) 18%, rgba(247, 240, 231, 0.4) 36%, transparent 54%),
            /* Left fade — strong enough for title readability */
            linear-gradient(to right, var(--color-surface) 0%, rgba(247, 240, 231, 0.6) 16%, transparent 44%);
    }

    /* Non-hero: hide gradient */
    .photo-block:not(:has(.hero--over-photo)) .photo-block__gradient {
        display: none;
    }

    /* ─── Individual photo crops — pushed right, face in right half ─── */

    /* Home: olesya-suit-05-a.webp — crop top, push right */
    .photo-block__photo--hero img {
        object-position: 75% 20%;
    }

    /* Program: image00020.webp — centered, crop from bottom */
    .photo-block__photo--program img {
        object-position: 70% 5%;
    }

    /* Program + Coaching: taller photo */
    .photo-block__photo--program,
    .photo-block__photo--coaching {
        height: clamp(460px, 120vw, 580px);
    }

    .photo-block__photo--coaching img {
        object-position: 65% 5%;
    }

    /* Program + Coaching: bottom fade ONLY, no left gradient */
    .photo-block:has(.photo-block__photo--program) .photo-block__gradient,
    .photo-block:has(.photo-block__photo--coaching) .photo-block__gradient {
        display: block !important;
        background: linear-gradient(to top, var(--color-surface) 0%, rgba(247, 240, 231, 0.85) 18%, rgba(247, 240, 231, 0.4) 36%, transparent 54%) !important;
    }

    /* Hero text: title sits high on the photo, subtitle + buttons below */
    .hero--over-photo {
        position: relative;
        z-index: 2;
        margin-top: clamp(-14rem, -34vw, -9.5rem);
        padding: 0 var(--container-padding) 0;
        min-height: auto;
        display: block;
        padding-top: 0;
    }

    .hero--over-photo .hero__content {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* Title: bold & large, full-width, max 3 lines, sits directly on photo */
    .hero--over-photo .hero__title {
        font-size: clamp(3.25rem, 13vw, 4.75rem);
        line-height: 1.05;
        padding-bottom: 0.1em;
        margin-bottom: var(--space-sm);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Subtitle: below photo, normal flow */
    .hero--over-photo .hero__subtitle {
        font-size: var(--text-base);
        max-width: none;
        margin-bottom: var(--space-lg);
        line-height: var(--leading-relaxed);
    }

    .hero--over-photo .hero__eyebrow {
        margin-bottom: var(--space-xs);
    }

    .hero--over-photo .hero__actions {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .hero--over-photo .hero__actions .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Spacer: hidden on mobile */
    .photo-block__spacer {
        display: none;
    }

    /* Transparent sections become solid on mobile */
    .section--transparent {
        background: var(--color-surface);
    }

    /* Reset light text styles on mobile (no photo behind) */
    .section--light-text .section__eyebrow {
        color: var(--color-ink-muted);
    }

    .section--light-text .section__title {
        color: var(--color-ink);
    }

    .event-item--light .event-item__title,
    .event-item--light .event-item__day,
    .event-item--light .event-item__month {
        color: var(--color-ink);
    }

    .event-item--light .event-item__meta {
        color: var(--color-ink-muted);
    }

    /* Reset light buttons to normal style */
    .btn--light {
        border-color: var(--color-border);
        color: var(--color-ink);
    }

    .btn-secondary.btn--light {
        background: rgba(255, 255, 255, 0.5);
        color: var(--color-ink);
        border-color: rgba(0, 0, 0, 0.1);
    }

    .btn-ghost.btn--light {
        color: var(--color-ink);
    }

    /* Unified section padding on mobile */
    .section {
        padding: var(--space-2xl) var(--container-padding);
    }

    .section--transparent {
        padding: var(--space-2xl) var(--container-padding);
    }

    /* CTA section mobile */
    .cta-section {
        padding: var(--space-3xl) var(--container-padding);
    }

    .cta-section__title {
        font-size: var(--text-2xl);
    }

    .cta-section__text {
        font-size: var(--text-base);
    }

    .cta-section__actions {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .cta-section__actions .btn {
        width: 100%;
    }

    /* About blocks: reduce padding, disable hover */
    .about-block {
        padding: var(--space-lg);
    }

    .about-block:hover {
        transform: none;
    }

    .about-block__title {
        font-size: var(--text-xl);
    }

    /* Disable hover transforms on touch devices */
    .card:hover,
    .card-product:hover,
    .module-card-v2:hover,
    .module-item:hover,
    .coaching-card:hover,
    .event-card:hover,
    .event-card-rich:hover {
        transform: none;
    }
}

/* Small screens (< 480px) */
@media (max-width: 480px) {

    /* Cards smaller padding — unified */
    .card-product,
    .module-card-v2,
    .coaching-card {
        padding: var(--space-md);
    }

    .card-product__title,
    .coaching-card__title {
        font-size: var(--text-lg);
    }
}

/* Module items on dark/photo backgrounds */
.module-item--light {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.module-item--light:hover {
    background: rgba(255, 255, 255, 0.14);
}

.module-item--light .module-item__number {
    color: rgba(255, 255, 255, 0.4);
}

.module-item--light .module-item__title {
    color: #fff;
}

.module-item--light .module-item__description {
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 900px) {
    .module-item--light {
        background: var(--glass-bg);
        border-color: var(--glass-border);
    }

    .module-item--light .module-item__number {
        color: var(--color-accent-soft);
    }

    .module-item--light .module-item__title {
        color: var(--color-ink);
    }

    .module-item--light .module-item__description {
        color: var(--color-ink-soft);
    }
}

/* Extra small screens - iPhone SE, small phones (< 375px) */
@media (max-width: 375px) {
    /* Photo block & hero scale smoothly via clamp() — no overrides needed */

    /* Tighter section spacing */
    .section {
        padding: var(--space-xl) var(--container-padding);
    }

    /* About blocks */
    .about-block {
        padding: var(--space-md);
    }

    .about-block__text {
        font-size: var(--text-sm);
    }

    /* Events */
    .event-item {
        padding: var(--space-md);
    }

    /* CTA */
    .cta-section {
        padding: var(--space-2xl) var(--container-padding);
    }

    .cta-section__text {
        font-size: var(--text-sm);
    }
}

/* ═══════════════════════════════════════════════════════════
   ABOUT / BIO SECTION
═══════════════════════════════════════════════════════════ */

.about-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--card-gap);
}

.about-block {
    padding: var(--space-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    transition: all var(--duration-normal) var(--ease-out);
}

.about-block:hover {
    background: var(--glass-bg-hover);
    transform: translateY(var(--card-hover-lift));
    box-shadow: var(--shadow-md);
}

.about-block__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

.about-block__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-md);
}

.about-block__text {
    font-family: var(--font-body);
    color: var(--color-ink-soft);
    line-height: var(--leading-relaxed);
}

.about-block__text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--color-accent);
    transition: text-decoration-color var(--transition-normal), color var(--transition-normal);
}

.about-block__text a:hover {
    color: var(--color-ink);
    text-decoration-color: var(--color-ink);
}

.about-block__social {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.about-block__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-ink-muted);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-full);
    transition: all var(--duration-normal) var(--ease-out);
}

.about-block__social-link:hover {
    color: var(--color-ink);
    border-color: var(--color-ink-muted);
    transform: translateY(-2px);
}

.about-single {
    max-width: var(--container-text);
    margin: 0 auto;
}

.about-block--wide {
    max-width: 100%;
}

/* #about section */
#about.section--transparent {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
}

/* Merged about card — single glass card wrapping video + text */
.about-card {
    max-width: 900px;
    margin: 0 auto;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    overflow: hidden;
}

/* Video inside about-card — no extra margins, flush top */
.about-card .video-section {
    max-width: 100%;
    margin: 0;
    margin-bottom: 0;
}

.about-card .video-section__title {
    padding: var(--space-xl) var(--space-xl) 0;
    margin-bottom: var(--space-lg);
}

.about-card .video-container {
    border-radius: 0;
}

/* About text inside about-card — no card style, just padding */
.about-card .about-block {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-xl);
}

.about-card .about-block:hover {
    background: none;
    transform: none;
    box-shadow: none;
}

.about-card .about-single {
    max-width: 100%;
}

@media (max-width: 768px) {
    .about-section {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════
   SERVICES / PRODUCTS SECTION
═══════════════════════════════════════════════════════════ */

.services-flagship {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    max-width: 900px;
    margin: 0 auto;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    overflow: hidden;
    transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.services-flagship:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}

.services-flagship__photo {
    position: relative;
    overflow: hidden;
}

.services-flagship__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}

.services-flagship__body {
    display: flex;
    flex-direction: column;
    padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-md);
    gap: var(--space-xs);
    text-align: left;
    align-items: flex-start;
    justify-content: center;
    /* Reset card-product overrides */
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    height: auto;
}

.services-flagship__body .card-product__title {
    font-size: var(--text-3xl);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--card-gap);
}

.services-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
    .services-flagship {
        grid-template-columns: 1fr;
        max-width: 540px;
    }
    .services-flagship__photo img {
        aspect-ratio: 3 / 2;
        max-height: 380px;
        object-position: center 12%;
    }
    .services-flagship__body {
        text-align: center;
        align-items: center;
        padding: var(--space-xl);
    }
    .services-flagship__photo img {
        -webkit-mask-image: none;
        mask-image: none;
    }
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .services-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .services-grid,
    .services-grid--3 {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════
   VIDEO SECTION
═══════════════════════════════════════════════════════════ */

.video-section {
    max-width: 900px;
    margin: 0 auto;
    margin-bottom: var(--space-lg);
}

.video-section__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin-bottom: var(--space-lg);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   INTERVIEWS LIST — Vertical stack
═══════════════════════════════════════════════════════════ */

.interviews-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin: 0 auto;
}

@media (max-width: 768px) {
    .interviews-list {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
}

/* ═══════════════════════════════════════════════════════════
   EVENTS LIST
═══════════════════════════════════════════════════════════ */

.events-list {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

/* ═══════════════════════════════════════════════════════════
   PAGE HERO — For inner pages, centered
═══════════════════════════════════════════════════════════ */

.page-hero {
    padding: var(--space-3xl) 0 var(--space-2xl);
    text-align: center;
}

.page-hero__title {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: var(--weight-normal);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-md);
    text-wrap: balance;
}

.page-hero__subtitle {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--color-ink-soft);
    max-width: 600px;
    margin: 0 auto;
    line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════
   STORY HERO — Full-bleed photo with text overlay
   Used on Program & Coaching instead of page-hero
═══════════════════════════════════════════════════════════ */

.story-hero {
    position: relative;
    width: 100%;
    min-height: 70vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.story-hero__image {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.story-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.story-hero__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 30%,
        rgba(0, 0, 0, 0.55) 100%
    );
}

.story-hero__content {
    position: relative;
    z-index: 2;
    padding: var(--space-3xl) 0 var(--space-2xl);
    width: 100%;
    color: #fff;
}

.story-hero__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-sm);
}

.story-hero__title {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: var(--weight-normal);
    line-height: var(--leading-tight);
    color: #fff;
    margin-bottom: var(--space-md);
    text-wrap: balance;
}

.story-hero__subtitle {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.85);
    max-width: 550px;
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-lg);
}

.story-hero__actions {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .story-hero {
        min-height: 60vh;
    }

    .story-hero__title {
        font-size: var(--text-4xl);
    }
}

@media (max-width: 480px) {
    .story-hero {
        min-height: 55vh;
    }

    .story-hero__title {
        font-size: var(--text-3xl);
    }
}

/* ═══════════════════════════════════════════════════════════
   STORY TEXT — Centered narrative block
═══════════════════════════════════════════════════════════ */

.story-text {
    max-width: var(--container-text);
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-soft);
}

.story-text p {
    margin-bottom: var(--space-lg);
}

.story-text p:last-child {
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   STORY SPLIT — Photo + text side by side
   Personal message from Olesya with her portrait
═══════════════════════════════════════════════════════════ */

.story-split {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-2xl);
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.story-split__image {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.story-split__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 3 / 4;
}

.story-split__text {
    font-family: var(--font-body);
}

.story-split__text .section__eyebrow {
    margin-bottom: var(--space-md);
}

.story-split__body {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-soft);
    font-style: italic;
    margin-bottom: var(--space-lg);
}

.story-split__signature {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-ink);
}

@media (max-width: 768px) {
    .story-split {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        text-align: center;
    }

    .story-split__image {
        max-width: 320px;
        margin: 0 auto;
    }
}

/* ═══════════════════════════════════════════════════════════
   PHOTO DIVIDER — Full-width photo strip between sections
═══════════════════════════════════════════════════════════ */

.photo-divider {
    position: relative;
    width: 100%;
    height: 50vh;
    max-height: 500px;
    overflow: hidden;
}

.photo-divider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

@media (max-width: 900px) {
    .photo-divider {
        height: 40vh;
        max-height: 350px;
    }
}

@media (max-width: 480px) {
    .photo-divider {
        height: 35vh;
        max-height: 300px;
    }
}

/* ═══════════════════════════════════════════════════════════
   PAGE HERO EYEBROW — for program/coaching page heroes
═══════════════════════════════════════════════════════════ */

.page-hero__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-md);
}

/* ═══════════════════════════════════════════════════════════
   PROGRAM PAGE
═══════════════════════════════════════════════════════════ */

/* Program photo — cropped to chest, positioned right */
.photo-block__photo--program {
    background: var(--color-surface);
    overflow: hidden;
}

.photo-block__photo--program img {
    width: calc(48% + 40px);
    top: -20px;
    left: auto;
    right: -20px;
    height: calc(100% + 40px);
    object-position: center 20%;
    filter: blur(0px);
    -webkit-mask-image: linear-gradient(to left, black 85%, transparent 100%);
    mask-image: linear-gradient(to left, black 85%, transparent 100%);
}

/* ─── Audience glass card ─── */
.audience-glass {
    max-width: 560px;
    margin: 0;
    margin-left: max(0px, calc((100% - var(--container-max)) / 2));
    padding: var(--space-xl) var(--space-2xl);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
}

.audience-glass__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

.audience-glass__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    color: var(--color-ink);
    margin-bottom: var(--space-lg);
}

.audience-glass__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.audience-glass__text {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-soft);
}

/* ─── Module cards v2 — glass style matching main page ─── */
.program-modules-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--card-gap);
    max-width: 1000px;
    margin: 0 auto;
}

.module-card-v2 {
    position: relative;
    padding: var(--space-xl);
    padding-top: var(--space-2xl);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    transition: all var(--duration-normal) var(--ease-out);
    overflow: hidden;
}

.module-card-v2:hover {
    background: var(--glass-bg-hover);
    transform: translateY(var(--card-hover-lift));
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent-soft);
}

/* Accent line removed - not used on home page */

.module-card-v2__number {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    color: var(--color-accent);
    letter-spacing: var(--tracking-normal);
    margin-bottom: var(--space-md);
}

.module-card-v2__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-sm);
    color: var(--color-ink);
}

.module-card-v2__description {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-soft);
}

/* 5 cards: 3 top + 2 centered bottom */
@media (min-width: 901px) {
    .program-modules-v2 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 2 cols on tablet */
@media (min-width: 601px) and (max-width: 900px) {
    .program-modules-v2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─── Investment card — glass style matching main page ─── */
.investment-card {
    max-width: 700px;
    margin: 0 auto;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass);
}

.investment-card__header {
    text-align: center;
    padding: var(--space-2xl) var(--space-2xl) var(--space-xl);
    border-bottom: 1px solid var(--glass-border);
}

.investment-card__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

.investment-card__price {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    color: var(--color-ink);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.investment-card__note {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.investment-card__body {
    padding: var(--space-xl) var(--space-2xl) var(--space-2xl);
    text-align: center;
}

.investment-card__text {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-soft);
    max-width: 480px;
    margin: 0 auto var(--space-xl);
}

.investment-card__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.investment-card__cross-link {
    text-align: center;
    padding: var(--space-lg) var(--space-2xl);
    border-top: 1px solid var(--glass-border);
}

.investment-card__cross-link .cross-link__text {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    margin-bottom: var(--space-xs);
}

.investment-card__cross-link .cross-link__link {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--color-accent-soft);
    transition: all var(--duration-normal) var(--ease-out);
}

.investment-card__cross-link .cross-link__link:hover {
    color: var(--color-ink);
    text-decoration-color: var(--color-ink);
}

/* ─── Legacy module-item (still used on coaching page) ─── */
.program-modules {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.module-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    transition: all var(--duration-normal) var(--ease-out);
}

.module-item:hover {
    background: var(--glass-bg-hover);
    transform: translateY(var(--card-hover-lift));
    box-shadow: var(--shadow-md);
}

.module-item__number {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--color-accent-soft);
    min-width: 3rem;
}

.module-item__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-sm);
}

.module-item__description {
    font-family: var(--font-body);
    color: var(--color-ink-soft);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pricing block (legacy — used on coaching) */
.pricing-block {
    text-align: center;
    padding: var(--space-2xl);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-glass);
}

.pricing-block__label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin-bottom: var(--space-sm);
}

.pricing-block__price {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    margin-bottom: var(--space-sm);
}

.pricing-block__note {
    font-family: var(--font-body);
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
    margin-bottom: var(--space-lg);
}

.pricing-block__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: center;
}

/* Dark variant — inside cta-section */
.pricing-block--dark {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: var(--space-xl);
}

.pricing-block--dark .pricing-block__label {
    color: rgba(255, 255, 255, 0.6);
}

.pricing-block--dark .pricing-block__price {
    color: #fff;
}

.pricing-block--dark .pricing-block__note {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0;
}

/* Ghost-light button — for dark backgrounds */
.btn-ghost-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-xl);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
    text-decoration: none;
    letter-spacing: var(--tracking-wide);
}

.btn-ghost-light:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

/* Cross-link light — for dark backgrounds */
.cross-link--light {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cross-link--light .cross-link__text {
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--text-sm);
}

.cross-link--light .cross-link__link {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    transition: all var(--duration-normal) var(--ease-out);
}

.cross-link--light .cross-link__link:hover {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.6);
}

/* Format block */
.format-block {
    padding: var(--space-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
}

.format-block__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin-bottom: var(--space-md);
}

.format-block__text {
    font-family: var(--font-body);
    color: var(--color-ink-soft);
    line-height: var(--leading-relaxed);
}

/* ─── Program page mobile breakpoints ─── */
@media (max-width: 900px) {
    /* Program photo: full-width, no right offset, no left mask, zoomed in */
    .photo-block__photo--program img {
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 100% !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        transform: scale(1.35);
        transform-origin: 42% 40%;
    }

    .audience-glass {
        max-width: none;
        margin-left: 0;
        padding: var(--space-lg);
    }

    .program-modules-v2 {
        gap: var(--space-md);
    }

    .module-card-v2 {
        padding: var(--space-lg);
        padding-top: var(--space-xl);
    }

    .investment-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--color-surface-warm);
        border-color: var(--color-border-soft);
    }

    .investment-card__header {
        padding: var(--space-xl) var(--space-lg) var(--space-lg);
    }

    .investment-card__price {
        font-size: var(--text-4xl);
    }

    .investment-card__body {
        padding: var(--space-lg);
    }

    .investment-card__actions {
        flex-direction: column;
    }

    .investment-card__actions .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .module-card-v2__number {
        font-size: var(--text-2xl);
    }

    .module-card-v2__title {
        font-size: var(--text-xl);
    }

    .audience-glass {
        padding: var(--space-md);
    }

    .investment-card__body,
    .investment-card__header {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
}

/* ═══════════════════════════════════════════════════════════
   COACHING PAGE v6 — Glass cards + single-product panels
═══════════════════════════════════════════════════════════ */

/* ─── Photo variant for coaching hero ─── */
.photo-block__photo--coaching {
    background: var(--color-surface);
    overflow: hidden;
}

.photo-block__photo--coaching img {
    width: calc(55% + 40px);
    top: -20px;
    left: auto;
    right: -20px;
    height: calc(100% + 40px);
    object-position: center 20%;
    will-change: filter;
    /* Soft fade — photo background already nearly matches page surface color */
    -webkit-mask-image: linear-gradient(to left, black 60%, transparent 100%);
    mask-image: linear-gradient(to left, black 60%, transparent 100%);
}

/* ─── Coaching product cards — 3 glass cards ─── */
.coaching-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--card-gap);
}

.coaching-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    text-decoration: none;
    color: inherit;
    transition: all var(--duration-normal) var(--ease-out);
    cursor: pointer;
}

.coaching-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(var(--card-hover-lift));
}

.coaching-card.active {
    border-color: var(--color-accent);
    background: var(--glass-bg-hover);
}

.coaching-card__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

.coaching-card__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-normal);
    line-height: var(--leading-snug);
    color: var(--color-ink);
    margin-bottom: var(--space-md);
}

.coaching-card__description {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
    line-height: var(--leading-relaxed);
    flex-grow: 1;
    margin-bottom: var(--space-lg);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.coaching-card__cta {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-ink-soft);
    transition: color var(--duration-normal) var(--ease-out);
}

.coaching-card__arrow {
    display: inline-block;
    transition: transform var(--duration-normal) var(--ease-out);
}

.coaching-card:hover .coaching-card__cta {
    color: var(--color-ink);
}

.coaching-card:hover .coaching-card__arrow {
    transform: translateX(4px);
}

/* ─── Sticky anchor nav ─── */
.coaching-nav {
    position: sticky;
    top: 80px; /* Below fixed header (80px height) */
    z-index: 15; /* Above sections (10), below header (200) */
    background: var(--color-surface);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, top var(--transition-normal);
}

/* JS toggles this when header hides */
.coaching-nav--top {
    top: 0;
}

/* When nav is stuck, add subtle shadow */
.coaching-nav--stuck {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

.coaching-nav__inner {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-md) var(--container-padding);
}

.coaching-nav__link {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    color: var(--color-ink-muted);
    text-decoration: none;
    padding: var(--space-xs) 0;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.coaching-nav__link:hover {
    color: var(--color-ink);
}

.coaching-nav__link.active {
    color: var(--color-ink);
    border-bottom-color: var(--color-accent);
}

/* ─── Service panels — show/hide one at a time ─── */
.coaching-panel {
    display: none;
}

.coaching-panel.active {
    display: block;
}

/* ─── Service header — centered ─── */
.coaching-service__header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.coaching-service__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    margin-bottom: var(--space-md);
}

.coaching-service__intro {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--color-ink-soft);
    max-width: 700px;
    margin: 0 auto;
    line-height: var(--leading-relaxed);
}

/* Partner note — subtle italic line, no heavy border */
.coaching-service__partner-note {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-style: italic;
    color: var(--color-ink-muted);
    max-width: 600px;
    margin: var(--space-lg) auto 0;
    line-height: var(--leading-relaxed);
}

.coaching-service__partner-note a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--color-accent);
    transition: text-decoration-color var(--transition-normal), color var(--transition-normal);
}

.coaching-service__partner-note a:hover {
    color: var(--color-ink);
    text-decoration-color: var(--color-ink);
}

/* ─── Module cards 2-per-row on desktop ─── */
.coaching-modules {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--card-gap);
}

/* ─── Coaching mobile ─── */
@media (max-width: 768px) {
    .coaching-service__title {
        font-size: var(--text-2xl);
    }

    .coaching-modules {
        grid-template-columns: 1fr;
    }

    .coaching-nav__inner {
        gap: var(--space-md);
    }

    .coaching-nav__link {
        font-size: var(--text-xs);
    }

    .coaching-cards {
        grid-template-columns: 1fr;
    }

    .coaching-card__title {
        font-size: var(--text-xl);
    }
}

@media (max-width: 900px) {
    /* Coaching photo: full-width, no right offset, no left mask */
    .photo-block__photo--coaching img {
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 100% !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   FORMAT + PRICING GRID — Side-by-side layout
═══════════════════════════════════════════════════════════ */

.format-pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--card-gap);
    align-items: start;
}

.format-pricing-grid .format-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.format-pricing-grid .pricing-block {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 768px) {
    .format-pricing-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}

/* ═══════════════════════════════════════════════════════════
   LEGAL PAGES
═══════════════════════════════════════════════════════════ */

.legal-content {
    max-width: var(--container-text);
    margin: 0 auto;
    padding-bottom: var(--space-3xl);
}

.legal-content h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-normal);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content p {
    font-family: var(--font-body);
    color: var(--color-ink-soft);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-md);
}

.legal-content ul {
    margin-bottom: var(--space-lg);
    padding-left: var(--space-lg);
}

.legal-content li {
    font-family: var(--font-body);
    color: var(--color-ink-soft);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-sm);
}

.legal-content a {
    color: var(--color-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-date {
    margin-top: var(--space-3xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

/* Terms page - loaded from Firestore */
.terms-updated {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    margin-top: var(--space-md);
}

.terms-content {
    max-width: var(--container-text);
    margin: 0 auto;
    padding-bottom: var(--space-3xl);
}

.terms-section {
    margin-bottom: var(--space-2xl);
}

.terms-section h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-normal);
    margin-bottom: var(--space-md);
}

.terms-section p {
    font-family: var(--font-body);
    color: var(--color-ink-soft);
    line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════
   COMMUNITY PAGE — Leaders Grid
═══════════════════════════════════════════════════════════ */

.leaders-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--card-gap);
}

@media (max-width: 1200px) {
    .leaders-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .leaders-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .leaders-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    /* Reduce container padding so cards are closer to screen edges */
    #members .container {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }
}

.leader-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-out);
}

.leader-card:hover {
    background: var(--glass-bg-hover);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.leader-card__photo {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-surface-warm);
}

.leader-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--photo-tint-bw);
    transition: filter var(--duration-normal) var(--ease-out);
}

.leader-card:hover .leader-card__photo img {
    filter: var(--photo-tint-bw-hover);
}

.leader-card__content {
    padding: var(--space-lg);
}

.leader-card__name {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-normal);
    margin-bottom: var(--space-xs);
    line-height: var(--leading-snug);
}

.leader-card__location {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.leader-card__role {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-md);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.leader-card__links {
    display: flex;
    gap: var(--space-sm);
}

.leader-card__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-ink-muted);
    transition: all var(--duration-fast) var(--ease-out);
}

.leader-card__link:hover {
    color: var(--color-ink);
}

.leader-card__link svg {
    width: 16px;
    height: 16px;
}

/* Mobile: 2 columns, vertical cards */
@media (max-width: 540px) {
    .leader-card__content {
        padding: var(--space-sm);
    }

    .leader-card__name {
        font-size: var(--text-base);
        margin-bottom: var(--space-2xs);
    }

    .leader-card__location {
        font-size: var(--text-2xs);
        margin-bottom: var(--space-2xs);
    }

    .leader-card__role {
        font-size: var(--text-2xs);
        margin-bottom: var(--space-xs);
        line-height: var(--leading-normal);
    }

    .leader-card__links {
        gap: var(--space-xs);
    }

    .leader-card__link {
        width: 1.625rem;
        height: 1.625rem;
    }

    .leader-card__link svg {
        width: 0.75rem;
        height: 0.75rem;
    }

    /* Disable card hover transform on mobile */
    .leader-card:hover {
        transform: none;
    }
}

/* Extended stagger for larger grids - pairs animation */
.stagger.is-visible > *:nth-child(9),
.stagger.is-visible > *:nth-child(10) { animation-delay: 480ms; }
.stagger.is-visible > *:nth-child(11),
.stagger.is-visible > *:nth-child(12) { animation-delay: 600ms; }
.stagger.is-visible > *:nth-child(13),
.stagger.is-visible > *:nth-child(14) { animation-delay: 720ms; }
.stagger.is-visible > *:nth-child(15),
.stagger.is-visible > *:nth-child(16) { animation-delay: 840ms; }
.stagger.is-visible > *:nth-child(17),
.stagger.is-visible > *:nth-child(18) { animation-delay: 960ms; }

/* First row visible immediately (no animation) */
.leaders-grid.stagger > *:nth-child(1),
.leaders-grid.stagger > *:nth-child(2) {
    opacity: 1;
    transform: none;
    animation: none;
}

/* Override default stagger to animate in pairs (starting from row 2) */
.leaders-grid.stagger.is-visible > *:nth-child(3),
.leaders-grid.stagger.is-visible > *:nth-child(4) { animation-delay: 0ms; }
.leaders-grid.stagger.is-visible > *:nth-child(5),
.leaders-grid.stagger.is-visible > *:nth-child(6) { animation-delay: 120ms; }
.leaders-grid.stagger.is-visible > *:nth-child(7),
.leaders-grid.stagger.is-visible > *:nth-child(8) { animation-delay: 240ms; }
.leaders-grid.stagger.is-visible > *:nth-child(9),
.leaders-grid.stagger.is-visible > *:nth-child(10) { animation-delay: 360ms; }
.leaders-grid.stagger.is-visible > *:nth-child(11),
.leaders-grid.stagger.is-visible > *:nth-child(12) { animation-delay: 480ms; }
.leaders-grid.stagger.is-visible > *:nth-child(13),
.leaders-grid.stagger.is-visible > *:nth-child(14) { animation-delay: 600ms; }
.leaders-grid.stagger.is-visible > *:nth-child(15),
.leaders-grid.stagger.is-visible > *:nth-child(16) { animation-delay: 720ms; }
.leaders-grid.stagger.is-visible > *:nth-child(17),
.leaders-grid.stagger.is-visible > *:nth-child(18) { animation-delay: 840ms; }

/* ═══════════════════════════════════════════════════════════
   STORY HERO — COMPACT variant (Events, Community)
   Shorter than default (50vh vs 70vh)
═══════════════════════════════════════════════════════════ */

.story-hero--compact {
    min-height: 50vh;
}

@media (max-width: 768px) {
    .story-hero--compact {
        min-height: 45vh;
    }
}

@media (max-width: 480px) {
    .story-hero--compact {
        min-height: 40vh;
    }
}

/* ═══════════════════════════════════════════════════════════
   EVENT CARDS — Glass-morphism cards for events
   Replaces old event-item row layout with richer cards
═══════════════════════════════════════════════════════════ */

.event-cards {
    display: grid;
    gap: var(--space-lg);
}

.event-card {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: var(--space-lg);
    align-items: center;
    padding: var(--space-lg) var(--space-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    transition: all var(--duration-normal) var(--ease-out);
}

.event-card:hover {
    background: var(--glass-bg-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.event-card__date {
    text-align: center;
}

.event-card__day {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1;
    color: var(--color-ink);
}

.event-card__month {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-top: var(--space-2xs);
}

.event-card__body {
    min-width: 0;
}

.event-card__type {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-accent-dark);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-bottom: var(--space-2xs);
}

.event-card__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    color: var(--color-ink);
    margin-bottom: var(--space-2xs);
    transition: color var(--duration-normal) var(--ease-out);
}

.event-card:hover .event-card__title {
    color: var(--color-accent-dark);
}

.event-card__meta {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.event-card__action {
    white-space: nowrap;
}

/* Past events — muted */
.event-card--past {
    opacity: 0.7;
}

.event-card--past:hover {
    opacity: 1;
}

/* Mobile: stack layout */
@media (max-width: 640px) {
    .event-card {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
        padding: var(--space-lg);
    }

    .event-card__date {
        display: flex;
        align-items: baseline;
        gap: var(--space-sm);
        text-align: left;
    }

    .event-card__day {
        font-size: var(--text-4xl);
    }

    .event-card__month {
        font-size: var(--text-sm);
        color: var(--color-ink-soft);
        margin-top: 0;
    }

    .event-card__title {
        font-size: var(--text-xl);
    }

    .event-card__action {
        margin-top: var(--space-xs);
    }

    .event-card__action .btn {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════
   EVENTS EMPTY — "Coming soon" fallback
═══════════════════════════════════════════════════════════ */

.events-empty {
    text-align: center;
    padding: var(--space-2xl) 0;
}

.events-empty__text {
    font-size: var(--text-lg);
    max-width: 480px;
    margin: 0 auto;
    color: var(--color-ink-soft);
    line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════
   CALENDAR FILTERS — Month pill navigation
═══════════════════════════════════════════════════════════ */

.calendar-filters {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border-soft);
}

.calendar-filter {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-ink-soft);
    padding: var(--space-xs) var(--space-lg);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
}

.calendar-filter:hover {
    color: var(--color-ink);
    background: var(--glass-bg-hover);
    border-color: rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.calendar-filter.active {
    background: var(--color-ink);
    color: #fff;
    border-color: var(--color-ink);
}

@media (max-width: 640px) {
    .calendar-filters {
        gap: var(--space-2xs);
        margin-bottom: var(--space-xl);
        padding-bottom: var(--space-md);
    }

    .calendar-filter {
        font-size: var(--text-xs);
        padding: var(--space-2xs) var(--space-md);
    }
}

/* ═══════════════════════════════════════════════════════════
   CALENDAR TIMELINE — Month groups with vertical timeline
═══════════════════════════════════════════════════════════ */

.calendar-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

/* Month group — CSS-driven filter animation */
.calendar-month-group {
    position: relative;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.calendar-month-group--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Month label — sticky header */
.calendar-month-label {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 80px;
    z-index: 5;
    background: var(--color-surface);
    padding-top: var(--space-sm);
}

.calendar-month-label__text {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--color-ink);
}

.calendar-month-label__count {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* Events within a month */
.calendar-month-events {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-left: var(--space-lg);
    border-left: 2px solid var(--color-border-soft);
    margin-left: var(--space-md);
}

@media (max-width: 640px) {
    .calendar-month-events {
        padding-left: var(--space-md);
        margin-left: var(--space-xs);
    }

    .calendar-month-label__text {
        font-size: var(--text-xl);
    }
}

/* ═══════════════════════════════════════════════════════════
   EVENT CARD RICH — Expandable cards with detail section
═══════════════════════════════════════════════════════════ */

.event-card-rich {
    display: grid;
    grid-template-columns: 64px 1fr 32px;
    gap: var(--space-md);
    align-items: start;
    padding: var(--space-lg) var(--space-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    transition: all var(--duration-normal) var(--ease-out);
    cursor: pointer;
    position: relative;
    overflow: hidden; /* Clip ::before accent line to border-radius */
}

.event-card-rich:hover {
    background: var(--glass-bg-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Date column */
.event-card-rich__date {
    text-align: center;
    padding-top: var(--space-2xs);
}

.event-card-rich__day {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1;
    color: var(--color-ink);
}

.event-card-rich__month {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-top: var(--space-2xs);
}

/* Content column */
.event-card-rich__content {
    min-width: 0;
}

.event-card-rich__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
    flex-wrap: wrap;
}

.event-card-rich__badge {
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    color: var(--color-accent-dark);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    padding: var(--space-2xs) var(--space-xs);
    background: var(--color-accent-muted);
    border-radius: var(--radius-sm);
}

/* Status tags */
.event-status {
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-sm);
}

.event-status--live {
    color: var(--color-accent-dark);
    background: var(--color-accent-muted);
}

.event-status--upcoming {
    color: var(--color-ink-muted);
    background: rgba(184, 92, 42, 0.06);
}

.event-status--past {
    color: var(--color-ink-faint);
    background: rgba(184, 92, 42, 0.04);
}

.event-card-rich__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    color: var(--color-ink);
    margin-bottom: var(--space-xs);
    transition: color var(--duration-normal) var(--ease-out);
}

.event-card-rich:hover .event-card-rich__title {
    color: var(--color-accent-dark);
}

.event-card-rich__meta {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.event-card-rich__location,
.event-card-rich__dates {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.event-card-rich__location svg,
.event-card-rich__dates svg {
    flex-shrink: 0;
    opacity: 0.6;
}

/* Expandable content */
.event-card-rich__expandable {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--duration-slow) var(--ease-out),
                opacity var(--duration-normal) var(--ease-out),
                margin var(--duration-normal) var(--ease-out);
    margin-top: 0;
}

.event-card-rich--expanded .event-card-rich__expandable {
    max-height: 300px;
    opacity: 1;
    margin-top: var(--space-md);
}

.event-card-rich__description {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-md);
}

.event-card-rich__details {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.event-card-rich__detail {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
}

.event-card-rich__detail strong {
    color: var(--color-ink-soft);
    font-weight: var(--weight-medium);
}

/* Toggle chevron */
.event-card-rich__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-ink-muted);
    transition: transform var(--duration-normal) var(--ease-out), color var(--duration-normal);
    margin-top: var(--space-2xs);
}

.event-card-rich--expanded .event-card-rich__toggle {
    transform: rotate(180deg);
    color: var(--color-ink-soft);
}

/* Small button variant */
.btn-sm {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-xs);
    border-radius: var(--radius-md);
}

/* Past events — muted */
.event-card-rich--past {
    opacity: 0.6;
}

.event-card-rich--past:hover {
    opacity: 1;
}

/* Live event — subtle accent border */
.event-card-rich--live {
    border-color: rgba(184, 92, 42, 0.2);
}

.event-card-rich--live::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(184, 92, 42, 0.4), transparent);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Mobile: stack layout */
@media (max-width: 640px) {
    .event-card-rich {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
        padding: var(--space-lg);
    }

    .event-card-rich__date {
        display: flex;
        align-items: baseline;
        gap: var(--space-sm);
        text-align: left;
    }

    .event-card-rich__day {
        font-size: var(--text-2xl);
    }

    .event-card-rich__month {
        font-size: var(--text-sm);
        color: var(--color-ink-soft);
        margin-top: 0;
    }

    .event-card-rich__title {
        font-size: var(--text-lg);
    }

    .event-card-rich__meta {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .event-card-rich__toggle {
        position: absolute;
        top: var(--space-md);
        right: var(--space-md);
    }

    .event-card-rich__expandable .btn {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS — Softer, slower, scroll-triggered
═══════════════════════════════════════════════════════════ */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Initial state: hidden, ready to animate */
.fade-in {
    opacity: 0;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(24px);
}

/* Triggered state (by JS IntersectionObserver) */
.fade-in.is-visible {
    animation: fadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fade-in-up.is-visible {
    animation: fadeInUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Stagger children — hidden until triggered */
.stagger > * {
    opacity: 0;
    transform: translateY(24px);
}

/* Stagger - animate when parent becomes visible */
.stagger.is-visible > * {
    animation: fadeInUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.stagger.is-visible > *:nth-child(1) { animation-delay: 0ms; }
.stagger.is-visible > *:nth-child(2) { animation-delay: 120ms; }
.stagger.is-visible > *:nth-child(3) { animation-delay: 240ms; }
.stagger.is-visible > *:nth-child(4) { animation-delay: 360ms; }
.stagger.is-visible > *:nth-child(5) { animation-delay: 480ms; }
.stagger.is-visible > *:nth-child(6) { animation-delay: 600ms; }
.stagger.is-visible > *:nth-child(7) { animation-delay: 720ms; }
.stagger.is-visible > *:nth-child(8) { animation-delay: 840ms; }

/* Section fade-in for smooth section boundaries */
.section {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Unstick sections always visible — no animation, prevents photo edge flash on fast scroll */
.section--unstick {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Transparent sections over sticky photo — always visible, no animation
   per scroll-blur-effect.md: overlay sections must NOT have fade-in animations
   to prevent photo edge showing through during fast scroll */
.section--transparent {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Hero is always visible immediately */
.hero {
    opacity: 1;
    transform: none;
}

/* Reduced motion: disable animations */
@media (prefers-reduced-motion: reduce) {
    .fade-in,
    .fade-in-up,
    .stagger > *,
    .section {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Comprehensive mobile improvements

   Breakpoints:
   - 1024px: iPad landscape, small laptops
   - 768px:  iPad portrait, large phones landscape
   - 480px:  Standard phones (iPhone 12/13/14)
   - 375px:  iPhone X, iPhone 12 mini
   - 320px:  iPhone SE, iPhone 5, small Androids
═══════════════════════════════════════════════════════════ */

/* ─── iPad portrait (768px) ─── */
@media (max-width: 768px) {

    .hero__title {
        font-size: var(--text-4xl);
    }

    .hero__subtitle {
        max-width: none;
    }

    /* Story hero: stronger gradient on mobile for readability */
    .story-hero__image::after {
        background: linear-gradient(
            to bottom,
            transparent 15%,
            rgba(0, 0, 0, 0.65) 100%
        );
    }

    .story-hero__content {
        padding: var(--space-2xl) 0 var(--space-xl);
    }

    /* Page hero: tighter padding */
    .page-hero {
        padding: var(--space-2xl) 0 var(--space-xl);
    }

    .page-hero__title {
        font-size: var(--text-4xl);
    }

    /* Section spacing: comfortable but not wasteful */
    .section {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }

    /* CTA section: tighter on mobile */
    .cta-section {
        padding: var(--space-2xl) var(--container-padding);
    }

    .cta-section__title {
        font-size: var(--text-3xl);
    }

    /* About card: edge-to-edge feel */
    .about-card {
        border-radius: var(--radius-md);
    }

    .about-card .about-block {
        padding: var(--space-lg);
    }

    /* Services flagship: photo aspect ratio on mobile */
    .services-flagship__photo {
        max-height: 360px;
    }

    /* Format-pricing grid: full buttons */
    .format-pricing-grid .btn {
        width: 100%;
        justify-content: center;
    }

    /* Module items: tighter grid-gap */
    .module-item {
        gap: var(--space-md);
        padding: var(--space-lg);
    }

    .module-item__number {
        font-size: var(--text-2xl);
        min-width: 2.5rem;
    }

    .module-item__title {
        font-size: var(--text-xl);
    }

    /* Pricing block: tighter */
    .pricing-block {
        padding: var(--space-xl);
    }

    .pricing-block__price {
        font-size: var(--text-3xl);
    }

    /* Story split: text first on mobile */
    .story-split__body {
        font-size: var(--text-base);
    }

    /* Calendar month label sticks below coaching nav */
    .calendar-month-label {
        top: 60px;
    }

    /* Disable hover transforms on mobile (prevents accidental touch effects) */
    .card:hover,
    .about-block:hover,
    .coaching-card:hover,
    .module-card-v2:hover,
    .module-item:hover,
    .event-card:hover,
    .event-card-rich:hover {
        transform: none;
    }
}

/* ─── Standard phones (480px) ─── */
@media (max-width: 480px) {

    /* Hero: compact for phones */
    .hero {
        min-height: auto;
        padding-top: calc(var(--space-lg) + 80px);
    }

    .hero__title {
        font-size: var(--text-3xl);
    }

    .hero__subtitle {
        font-size: var(--text-base);
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Hero photo: slightly shorter on phones */
    .photo-block:has(.hero--over-photo) .photo-block__photo {
        height: clamp(300px, 80vw, 420px);
    }

    .hero--over-photo .hero__title {
        font-size: clamp(2.75rem, 12vw, 3.75rem);
    }

    .hero--over-photo .hero__subtitle {
        font-size: var(--text-sm);
    }

    /* Story hero: compact, stronger gradient */
    .story-hero__image::after {
        background: linear-gradient(
            to bottom,
            transparent 5%,
            rgba(0, 0, 0, 0.7) 100%
        );
    }

    .story-hero__title {
        font-size: var(--text-2xl);
    }

    .story-hero__subtitle {
        font-size: var(--text-base);
    }

    /* Page hero */
    .page-hero {
        padding: var(--space-xl) 0 var(--space-lg);
    }

    .page-hero__title {
        font-size: var(--text-3xl);
    }

    .page-hero__subtitle {
        font-size: var(--text-base);
    }

    /* Sections: less vertical space on small screens */
    .section {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }

    .section__title {
        font-size: var(--text-2xl);
    }

    /* CTA */
    .cta-section__title {
        font-size: var(--text-2xl);
    }

    .cta-section__actions {
        flex-direction: column;
    }

    .cta-section__actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* About block title */
    .about-block__title {
        font-size: var(--text-xl);
    }

    /* Services: flagship body tight */
    .services-flagship__body {
        padding: var(--space-lg);
    }

    .services-flagship__body .card-product__title {
        font-size: var(--text-2xl);
    }

    /* Coaching service title */
    .coaching-service__title {
        font-size: var(--text-xl);
    }

    .coaching-service__intro {
        font-size: var(--text-base);
    }

    /* Explore cards: tighter padding */
    .explore-card__info {
        padding: var(--space-sm) var(--space-md) 0;
    }

    .explore-card__guest {
        font-size: var(--text-xl);
    }

    .explore-card__cta {
        padding: var(--space-sm) var(--space-md) var(--space-md);
    }

    .explore-card--community {
        padding-top: var(--space-sm);
    }

    .explore-card--community .explore-card__title,
    .explore-card--community .explore-card__text,
    .explore-card--community .explore-card__cta {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    /* Mini cards in marquee: smaller */
    .explore-card__mini {
        width: 120px;
    }

    .explore-card__mini-name {
        font-size: var(--text-sm);
    }

    .explore-card__mini-info {
        padding: var(--space-xs);
    }

    /* Photo divider: shorter on phones */
    .photo-divider {
        height: 30vh;
        max-height: 250px;
    }

    /* Investment card: compact */
    .investment-card__price {
        font-size: var(--text-3xl);
    }

    /* Story split: less space */
    .story-split {
        gap: var(--space-lg);
    }

    .story-split__image {
        max-width: 260px;
    }

    .story-split__signature {
        font-size: var(--text-lg);
    }
}

/* ─── iPhone X / 12 mini (375px) ─── */
@media (max-width: 375px) {

    .hero__title {
        font-size: clamp(1.5rem, 6vw, 1.875rem);
    }

    .hero__subtitle {
        font-size: var(--text-sm);
    }

    /* Hero photo: shorter on small phones */
    .photo-block:has(.hero--over-photo) .photo-block__photo {
        height: clamp(320px, 88vw, 400px);
    }

    .hero--over-photo .hero__title {
        font-size: clamp(2.875rem, 11vw, 3.5rem);
        -webkit-line-clamp: 3;
    }

    .hero--over-photo .hero__subtitle {
        font-size: var(--text-xs);
    }

    .page-hero__title {
        font-size: var(--text-2xl);
    }

    .story-hero__title {
        font-size: var(--text-xl);
    }

    /* Audience glass: very tight */
    .audience-glass {
        padding: var(--space-sm) var(--space-md);
    }

    .audience-glass__title {
        font-size: var(--text-xl);
    }

    /* Coaching cards: smaller text */
    .coaching-card {
        padding: var(--space-md);
    }

    .coaching-card__title {
        font-size: var(--text-lg);
    }

    /* Coaching nav: scrollable if needed */
    .coaching-nav__inner {
        gap: var(--space-sm);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    }

    .coaching-nav__inner::-webkit-scrollbar {
        display: none;
    }

    /* Event cards: tighter */
    .event-card-rich {
        padding: var(--space-md);
    }

    .event-card-rich__day {
        font-size: var(--text-xl);
    }

    .event-card-rich__title {
        font-size: var(--text-base);
    }

    /* Calendar filters: scrollable */
    .calendar-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: var(--space-sm);
    }

    .calendar-filters::-webkit-scrollbar {
        display: none;
    }

    /* Module card: compact */
    .module-card-v2 {
        padding: var(--space-md);
        padding-top: var(--space-lg);
    }

    .module-card-v2__number {
        font-size: var(--text-xl);
    }

    .module-card-v2__title {
        font-size: var(--text-lg);
    }

    /* Section headers */
    .section__title {
        font-size: var(--text-xl);
    }

    .section__eyebrow {
        font-size: 0.625rem;
    }

    /* CTA section: very compact */
    .cta-section__title {
        font-size: var(--text-xl);
    }

    .cta-section__text {
        font-size: var(--text-sm);
    }
}

/* ─── Very small phones — iPhone SE/5 (320px) ─── */
@media (max-width: 320px) {

    .hero__title {
        font-size: 1.375rem;
        -webkit-line-clamp: 4;
    }

    .hero__subtitle {
        font-size: var(--text-xs);
    }

    /* Hero photo: shorter on tiny screens */
    .photo-block:has(.hero--over-photo) .photo-block__photo {
        height: clamp(240px, 70vw, 300px);
    }

    .hero--over-photo .hero__title {
        font-size: clamp(2.25rem, 9vw, 2.75rem);
    }

    .page-hero__title {
        font-size: var(--text-xl);
    }

    .story-hero__title {
        font-size: var(--text-lg);
    }

    .story-hero__subtitle {
        font-size: var(--text-sm);
    }

    /* Buttons: smaller on tiny screens */
    .btn {
        padding: 0.625rem 1.25rem;
        font-size: var(--text-xs);
    }

    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: var(--text-sm);
    }

    /* Coaching nav links even smaller */
    .coaching-nav__link {
        font-size: 0.625rem;
    }

    /* About block */
    .about-block__title {
        font-size: var(--text-lg);
    }

    /* Leader cards in community */
    .leader-card__content {
        padding: var(--space-xs);
    }

    .leader-card__name {
        font-size: var(--text-sm);
    }

    /* Services flagship title */
    .services-flagship__body .card-product__title {
        font-size: var(--text-xl);
    }

    /* Audience glass: absolute minimum */
    .audience-glass__title {
        font-size: var(--text-lg);
    }

    .audience-glass__text {
        font-size: var(--text-sm);
    }
}

/* ─── Safe area insets for notched phones (iPhone X+) ─── */
@supports (padding: env(safe-area-inset-bottom)) {
    .footer {
        padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom));
    }

    .cta-section {
        padding-bottom: calc(var(--space-2xl) + env(safe-area-inset-bottom));
    }

    .mobile-nav {
        padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom));
    }
}

/* ═══════════════════════════════════════════════════════════
   MEDITERRANEAN WARMTH — Environment overrides
═══════════════════════════════════════════════════════════ */

/* Event buttons — muted, light font before hover */
.event-item .btn-secondary,
.event-card__action .btn-secondary,
.event-card-rich .btn-secondary {
    background: rgba(250, 238, 222, 0.25);
    border-color: rgba(184, 92, 42, 0.08);
    color: var(--color-ink-faint);
    box-shadow: none;
}

.event-item .btn-secondary:hover,
.event-card__action .btn-secondary:hover,
.event-card-rich .btn-secondary:hover {
    background: var(--btn-secondary-bg-hover);
    border-color: var(--btn-secondary-border-hover);
    color: var(--color-ink);
    box-shadow: 0 2px 8px rgba(90, 44, 16, 0.06);
}

/* Light event items (on dark photos) — Details button text light */
.event-item--light .btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
}

.event-item--light .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* Mobile: home event buttons as clean text-links */
@media (max-width: 640px) {
    .events-list--home .event-item__action .btn,
    .events-list--home .event-item__action .btn.btn-secondary {
        background: transparent !important;
        border: none !important;
        box-shadow: none;
        backdrop-filter: none;
        color: var(--color-ink-soft);
        padding: var(--space-xs) 0;
        border-radius: 0;
    }

    .events-list--home .event-item__action .btn:hover,
    .events-list--home .event-item__action .btn.btn-secondary:hover {
        background: transparent !important;
        color: var(--color-ink);
    }
}

/* Card hover borders — accent highlight */
.card-product:hover,
.explore-card:hover {
    border-color: var(--color-accent);
}

/* Nav backdrop — warm */
.nav-backdrop {
    background-color: var(--nav-backdrop-bg);
}

/* Selection — warm accent tint */
::selection {
    background: var(--color-accent-muted);
}

/* Photo tinting — background photos only */
#photo-block-2 .photo-block__photo img {
    filter: var(--photo-tint, none);
}

/* Hero photos — NO tint (faces) */
.photo-block__photo--hero img,
.photo-block__photo--program img,
.photo-block__photo--coaching img {
    filter: none;
}

/* Video thumbnails — warm sepia on inner lite-youtube (not container, avoids Chrome corner artifact) */
.video-bw .lite-youtube {
    filter: var(--photo-tint-bw);
}

.video-bw:hover .lite-youtube {
    filter: var(--photo-tint-bw-hover);
}

.video-bw .lite-youtube.activated {
    filter: none;
}

/* Explore card thumbnails */
.explore-card__thumb img {
    filter: var(--photo-tint-bw);
}

.explore-card:hover .explore-card__thumb img {
    filter: var(--photo-tint-bw-hover);
}

/* Mini interview card images */
.explore-card__mini img {
    filter: var(--photo-tint-bw);
}

.explore-card:hover .explore-card__mini img {
    filter: var(--photo-tint-bw-hover);
}