/* ============================================================ *
 * Wild Femme Yoga — homepage
 * ============================================================ */

/* ---------- HERO — alive layer ---------- *
 * min-height uses 100svh (small viewport) on iOS so the hero stays the
 * same size whether or not the URL bar is visible. Using 100dvh here
 * causes the hero (and everything below it — marquee, breath cue) to
 * jitter up and down each time mobile Safari toggles its chrome.
 */
.wfy-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--wfy-cream);
    isolation: isolate;
    background: var(--wfy-plum-deep);
    --mx: 50%;
    --my: 50%;
}
.wfy-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}
/* Three aurora layers — each drifts on a different cycle.
   Composite together to feel like breath / northern lights. */
.wfy-hero__aurora {
    position: absolute;
    inset: -15%;
    will-change: transform;
    filter: blur(8px);
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ============================================================ *
 * MOBILE — nuclear-grade calm for the iOS compositor.
 *
 * iOS Safari's GPU compositor melts down with many simultaneous blur+
 * transform animated layers, causing the hero background, breath cue,
 * and marquee underneath to jitter even when each animation in isolation
 * is cheap. We freeze the heavy decorative work below 768px while
 * keeping the design feeling alive (orbs float, marquee scrolls,
 * mantra still reveals, sections still fade up).
 * ============================================================ */
@media (max-width: 767px) {
    /* Auroras: drop blur, drop overscan, FREEZE the drift animation.
       Static gradient layers still read as a moody background. */
    .wfy-hero__aurora {
        animation: none !important;
        filter: none;
        inset: 0;
        will-change: auto;
    }

    /* Cursor halo is meaningless on touch and adds a heavy compositor
       layer that fights with everything else. Drop it. */
    .wfy-hero__halo { display: none !important; }

    /* SVG concentric rings: keep them visible, freeze the breath
       (SVG transform animations are particularly expensive on iOS). */
    .wfy-hero__rings-group {
        animation: none !important;
        opacity: 0.18;
    }

    /* Orbs are vh-based keyframes — vh changes when iOS URL bar toggles
       so the orbs jump to new positions. Hide them entirely on phones. */
    .wfy-hero__orbs,
    .wfy-orb {
        display: none !important;
    }

    /* Breath cue: freeze BOTH the parent bob and the inner span scale.
       The 6px bob + scale-on-text was the visible "glitching up and down"
       on iOS. Keep the static down arrow + word, no motion. */
    .wfy-hero__scroll {
        animation: none !important;
    }
    .wfy-hero__scroll span {
        animation: none !important;
        opacity: 0.85;
    }

    /* Marquee items: kill the scale-breath animation. Scale-on-text
       causes iOS subpixel re-rasterization every frame and looks like
       the words are vibrating in place. Keep the horizontal scroll. */
    .wfy-marquee__item {
        animation: none !important;
        opacity: 0.92;
    }

    /* Marquee dots: spin animation rasterizes the glyph each frame.
       Freeze them. */
    .wfy-marquee__dot {
        animation: none !important;
    }

    /* Marquee scroll feels too fast on a narrow viewport because the same
       distance travels across a smaller frame in the same time. Slow it
       way down on phones so it reads as meditative. */
    .wfy-marquee__track {
        animation-duration: 90s !important;
    }

    /* Lock paint inside the hero + marquee so changes here don't
       cause downstream relayout/repaint when Safari toggles its UI.
       NOTE: never put `contain: layout` on the marquee TRACK — it
       forces the flex container to size to its parent (~360px) instead
       of its actual content (~5000px), which makes the translateX(-50%)
       barely move and looks like the animation has stopped. */
    .wfy-hero { contain: layout style paint; }
    .wfy-marquee { contain: paint; }
}

/* Tablet — slow the marquee a touch too, narrower viewport vs desktop */
@media (min-width: 768px) and (max-width: 1023px) {
    .wfy-marquee__track { animation-duration: 60s; }
}
.wfy-hero__aurora--a {
    background: radial-gradient(ellipse 55% 50% at 22% 30%, rgba(157, 78, 221, 0.55) 0%, transparent 60%);
    animation: wfyAuroraDrift 14s ease-in-out infinite;
}
.wfy-hero__aurora--b {
    background: radial-gradient(ellipse 50% 55% at 78% 70%, rgba(199, 125, 255, 0.4) 0%, transparent 60%);
    animation: wfyAuroraDrift 18s ease-in-out -4s infinite reverse;
}
.wfy-hero__aurora--c {
    background:
      radial-gradient(ellipse 60% 35% at 50% 100%, rgba(244, 196, 48, 0.18) 0%, transparent 65%),
      linear-gradient(180deg, rgba(26,11,46,0.35) 0%, rgba(26,11,46,0.78) 100%);
    animation: wfyAuroraDrift 22s ease-in-out -8s infinite;
}

/* Cursor-tracked violet halo — JS sets --mx, --my custom props */
.wfy-hero__halo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle 360px at var(--mx) var(--my), rgba(199, 125, 255, 0.22), transparent 60%);
    opacity: 0;
    transition: opacity 1.2s var(--wfy-ease);
    mix-blend-mode: screen;
}
.wfy-hero:hover .wfy-hero__halo,
.wfy-hero.is-hovered .wfy-hero__halo { opacity: 1; }

/* Concentric breathing rings */
.wfy-hero__rings {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.wfy-hero__rings-group {
    transform-origin: 720px 500px;
    animation: wfyBreath 8s ease-in-out infinite;
    --wfy-breath-min: 0.10;
    --wfy-breath-max: 0.22;
}

/* Floating breath orbs — drift slowly up through the hero */
.wfy-hero__orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.wfy-orb {
    position: absolute;
    bottom: -20vh;
    left: var(--x, 50%);
    width: var(--s, 12px);
    height: var(--s, 12px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 230, 242, 0.95) 0%, rgba(255, 230, 242, 0) 70%);
    filter: blur(0.4px);
    animation: wfyFloatUp var(--d, 18s) linear var(--del, 0s) infinite;
}
.wfy-orb[style*="--c:violet"] {
    background: radial-gradient(circle, rgba(199, 125, 255, 0.95) 0%, rgba(199, 125, 255, 0) 70%);
}
.wfy-orb[style*="--c:pink"] {
    background: radial-gradient(circle, rgba(255, 230, 242, 0.95) 0%, rgba(244, 196, 48, 0.4) 40%, transparent 70%);
}

.wfy-hero__inner {
    position: relative;
    padding-top: clamp(140px, 17vh, 180px);
    padding-bottom: clamp(60px, 9vh, 90px);
    max-width: 880px;
}
.wfy-hero__title {
    color: var(--wfy-cream);
    font-size: clamp(36px, 5.6vw, 76px);
    line-height: 1.02;
    margin: 12px 0 18px;
    font-weight: 400;
    letter-spacing: -0.015em;
}
.wfy-hero__title em {
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(120deg, var(--wfy-violet) 0%, var(--wfy-pink-pale) 50%, var(--wfy-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.wfy-hero__lede {
    font-size: clamp(17px, 1.5vw, 21px);
    max-width: 620px;
    color: rgba(255, 230, 242, 0.92);
    line-height: 1.6;
    margin: 0 0 20px;
}

.wfy-hero__close {
    margin: 0 0 32px;
    max-width: 620px;
}
.wfy-hero__close .wfy-ritual {
    display: block;
    font-size: clamp(20px, 1.9vw, 28px);
    line-height: 1.4;
    background: linear-gradient(110deg, var(--wfy-pink-pale) 0%, var(--wfy-violet) 50%, var(--wfy-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 767px) {
    .wfy-hero__lede { font-size: 17px; }
    .wfy-hero__close .wfy-ritual { font-size: 20px; }
}

.wfy-hero__ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.wfy-hero__scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--wfy-font-eyebrow);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    animation: wfyScrollBob 2.4s ease-in-out infinite;
}
.wfy-hero__scroll:hover { color: var(--wfy-gold); }
.wfy-hero__scroll span { animation: wfyBreath 8s ease-in-out infinite; --wfy-breath-min: 0.55; --wfy-breath-max: 1; will-change: opacity, transform; }
@keyframes wfyScrollBob {
    0%, 100% { transform: translate3d(-50%, 0, 0); }
    50%      { transform: translate3d(-50%, 6px, 0); }
}

/* ---------- Mantra-style hero title — words fade in one by one ---------- */
.wfy-mantra-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
}
[data-wfy-mantra].is-revealed .wfy-mantra-word {
    animation: wfyMantraWord 1.6s var(--wfy-ease) forwards;
}
[data-wfy-mantra].is-revealed .wfy-mantra-word:nth-child(1) { animation-delay: 0.15s; }
[data-wfy-mantra].is-revealed .wfy-mantra-word:nth-child(2),
[data-wfy-mantra].is-revealed .wfy-mantra-word:nth-child(3) { animation-delay: 0.9s; }
[data-wfy-mantra].is-revealed .wfy-mantra-word:nth-child(4),
[data-wfy-mantra].is-revealed .wfy-mantra-word:nth-child(5) { animation-delay: 1.6s; }

/* ---------- MARQUEE ---------- */
.wfy-marquee {
    background: var(--wfy-cream);
    padding: 36px 0;
    overflow: hidden;
    border-block: 1px solid rgba(26, 11, 46, 0.08);
}
.wfy-marquee__track {
    display: flex;
    gap: 56px;
    white-space: nowrap;
    width: max-content;          /* size the box to content, not container — otherwise translateX(-50%) only moves half a viewport width */
    animation: wfyMarquee 40s linear infinite;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.wfy-marquee__track > * { flex-shrink: 0; } /* defensive: items must never squish */
.wfy-marquee:hover .wfy-marquee__track { animation-play-state: paused; }
.wfy-marquee__item {
    font-family: var(--wfy-font-display);
    font-style: italic;
    font-size: clamp(36px, 6vw, 64px);
    color: var(--wfy-plum-deep);
    font-weight: 400;
    line-height: 1;
}
.wfy-marquee__dot {
    font-size: clamp(20px, 3vw, 32px);
    color: var(--wfy-purple);
    align-self: center;
    opacity: 0.6;
    display: inline-block;
    animation: wfySpin 28s linear infinite;
}
.wfy-marquee__item {
    animation: wfyBreath 11s ease-in-out infinite;
    --wfy-breath-min: 0.78;
    --wfy-breath-max: 1;
}
@keyframes wfyMarquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- THE INVITATION — deeper read after marquee ---------- */
.wfy-invitation__inner { text-align: center; }
.wfy-invitation__inner .wfy-eyebrow { display: inline-block; margin-bottom: 22px; }
.wfy-invitation__inner p {
    font-size: clamp(18px, 1.6vw, 22px);
    color: var(--wfy-ink-soft);
    line-height: 1.7;
    margin: 0 auto 1.4em;
    max-width: 680px;
}
.wfy-invitation__inner p em {
    font-style: italic;
    color: var(--wfy-purple);
}
.wfy-invitation__pull {
    margin-top: 1.6em !important;
}
.wfy-invitation__pull .wfy-ritual {
    display: block;
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.35;
    color: var(--wfy-plum-deep);
    background: linear-gradient(110deg, var(--wfy-plum-deep) 0%, var(--wfy-purple) 50%, var(--wfy-plum-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media (max-width: 480px) {
    .wfy-invitation__inner p { font-size: 17px; }
    .wfy-invitation__pull .wfy-ritual { font-size: 22px; }
}

/* ---------- EXPERIENCE / CHECKLIST ---------- */
.wfy-experience__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: center;
}
.wfy-experience__copy h2 em {
    font-style: italic;
    color: var(--wfy-purple);
}
.wfy-experience__copy p {
    font-size: 18px;
    line-height: 1.75;
    color: var(--wfy-ink-soft);
    max-width: 540px;
}

.wfy-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wfy-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(26, 11, 46, 0.12);
    font-size: 18px;
    color: var(--wfy-plum-deep);
    line-height: 1.55;
}
.wfy-checklist li:last-child { border-bottom: 0; }
.wfy-checklist li svg {
    flex-shrink: 0;
    color: var(--wfy-purple);
    margin-top: 2px;
    padding: 4px;
    background: var(--wfy-pink-pale);
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

@media (max-width: 1023px) {
    .wfy-experience__grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet: keep experience copy + checklist side-by-side */
    .wfy-experience__grid { grid-template-columns: 1.1fr 1fr; gap: 56px; }
}

/* ---------- MANTRA MOMENT — quiet pause section ---------- */
.wfy-mantra-moment {
    background:
      radial-gradient(ellipse 70% 60% at 50% 50%, var(--wfy-pink-mist) 0%, var(--wfy-cream) 70%);
    overflow: hidden;
    padding-block: clamp(120px, 16vw, 220px);
}
.wfy-mantra-moment__inner {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.wfy-mantra-stack {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vw, 14px);
    margin: 32px 0 40px;
}
.wfy-mantra-stack__word {
    font-family: var(--wfy-font-ritual);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(54px, 9vw, 116px);
    line-height: 1.0;
    color: var(--wfy-plum-deep);
    letter-spacing: -0.01em;
    background: linear-gradient(110deg, var(--wfy-plum-deep) 0%, var(--wfy-purple) 50%, var(--wfy-plum-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: wfyBreath 9s ease-in-out infinite;
    --wfy-breath-min: 0.82;
    --wfy-breath-max: 1;
}
.wfy-mantra-stack__word:nth-child(1) { animation-delay: 0s; }
.wfy-mantra-stack__word:nth-child(2) { animation-delay: 1s; }
.wfy-mantra-stack__word:nth-child(3) { animation-delay: 2s; }

.wfy-mantra-moment__line {
    font-family: var(--wfy-font-ritual);
    font-style: italic;
    font-size: clamp(18px, 1.7vw, 22px);
    color: var(--wfy-ink-soft);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}

.wfy-mantra-moment__sigil {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(420px, 60vw, 760px);
    height: clamp(420px, 60vw, 760px);
    transform: translate(-50%, -50%);
    color: var(--wfy-purple);
    z-index: 1;
    pointer-events: none;
    animation: wfySpin 80s linear infinite;
}
.wfy-mantra-moment__sigil g { animation: wfyBreath 10s ease-in-out infinite; --wfy-breath-min: 0.2; --wfy-breath-max: 0.5; transform-origin: 100px 100px; }

/* ---------- FEMININE FREQUENCY / PILLARS ---------- */
.wfy-frequency {
    position: relative;
    overflow: hidden;
}
.wfy-frequency::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 50% at 10% 0%, rgba(157, 78, 221, 0.22), transparent 70%),
      radial-gradient(ellipse 50% 40% at 90% 100%, rgba(199, 125, 255, 0.16), transparent 70%);
    pointer-events: none;
    animation: wfyAuroraDrift 28s ease-in-out infinite;
}
/* Organic wavy top divider — section emerges from the mantra section like a tide */
.wfy-frequency::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 90px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path d='M0,30 C240,75 480,0 720,30 C960,60 1200,15 1440,40 L1440,0 L0,0 Z' fill='%23FAF0F4'/></svg>") center top / 100% 100% no-repeat;
    z-index: 2;
    pointer-events: none;
}
.wfy-frequency__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 80px;
    position: relative;
}
.wfy-frequency__header h2 em {
    font-style: italic;
    color: var(--wfy-violet);
}
.wfy-frequency__header p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 16px;
}

.wfy-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    position: relative;
}
.wfy-pillar {
    padding: 48px 36px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(199, 125, 255, 0.2);
    border-radius: var(--wfy-radius-lg);
    backdrop-filter: blur(6px);
    transition: transform 0.4s var(--wfy-ease), background 0.4s var(--wfy-ease), border-color 0.4s var(--wfy-ease);
    position: relative;
}
.wfy-pillar:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--wfy-violet);
    box-shadow: 0 24px 60px rgba(199, 125, 255, 0.18);
}
.wfy-pillar__num {
    font-family: var(--wfy-font-display);
    font-style: italic;
    font-size: 56px;
    color: var(--wfy-gold);
    line-height: 1;
    margin-bottom: 24px;
}
.wfy-pillar h3 {
    color: var(--wfy-cream);
    margin-bottom: 14px;
}
.wfy-pillar p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 16px;
    margin: 0;
}

@media (max-width: 1023px) {
    .wfy-pillars { grid-template-columns: 1fr; gap: 20px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet: 2-column pillars, last spans 2 columns for balance */
    .wfy-pillars { grid-template-columns: 1fr 1fr; gap: 22px; }
    .wfy-pillar:nth-child(3) { grid-column: span 2; }
}

/* ---------- FOUNDER ---------- */
.wfy-founder__grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: center;
}
.wfy-founder__portrait { position: relative; }
.wfy-founder__portrait::before {
    content: '';
    position: absolute;
    inset: -10% -8% -12% -8%;
    background:
      radial-gradient(ellipse at 40% 35%, rgba(199, 125, 255, 0.5) 0%, transparent 60%),
      radial-gradient(ellipse at 70% 70%, rgba(244, 196, 48, 0.25) 0%, transparent 60%);
    filter: blur(40px);
    z-index: 0;
    animation: wfyHaloPulse 9s ease-in-out infinite;
}
.wfy-founder__frame {
    aspect-ratio: 4 / 5;
    border-radius: var(--wfy-radius-lg);
    overflow: hidden;
    box-shadow: var(--wfy-shadow-md);
    background: var(--wfy-plum-mid);
    position: relative;
    z-index: 1;
}
.wfy-founder__frame::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 230, 242, 0.4);
    border-radius: var(--wfy-radius-lg);
    pointer-events: none;
}
.wfy-founder__frame svg,
.wfy-founder__frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 28%; /* keep her face/upper body anchored — adjust % if needed after preview */
}
.wfy-founder__caption {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wfy-mute);
}

.wfy-founder__copy h2 em {
    font-style: italic;
    color: var(--wfy-purple);
}
.wfy-founder__copy p {
    font-size: 18px;
    line-height: 1.75;
    color: var(--wfy-ink-soft);
}

@media (max-width: 1023px) {
    .wfy-founder__grid { grid-template-columns: 1fr; gap: 48px; }
    .wfy-founder__frame { max-width: 420px; margin: 0 auto; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet: keep portrait beside bio */
    .wfy-founder__grid { grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; }
    .wfy-founder__frame { max-width: none; }
}

/* ---------- EVENTS GRID ---------- */
.wfy-events__header { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.wfy-events__header h2 em { font-style: italic; color: var(--wfy-purple); }

.wfy-events__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.wfy-event-card {
    background: var(--wfy-white);
    border-radius: var(--wfy-radius-lg);
    padding: 40px 32px;
    box-shadow: var(--wfy-shadow-sm);
    border: 1px solid rgba(26, 11, 46, 0.06);
    transition: transform 0.4s var(--wfy-ease), box-shadow 0.4s var(--wfy-ease), border-color 0.4s var(--wfy-ease);
    display: flex;
    flex-direction: column;
}
.wfy-event-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--wfy-shadow-md);
    border-color: var(--wfy-violet);
}
.wfy-event-card__badge {
    display: inline-block;
    background: var(--wfy-pink-pale);
    color: var(--wfy-plum-deep);
    font-family: var(--wfy-font-eyebrow);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 100px;
    align-self: flex-start;
    margin-bottom: 20px;
}
.wfy-event-card h3 { margin-bottom: 12px; }
.wfy-event-card p {
    font-size: 16px;
    color: var(--wfy-ink-soft);
    margin-bottom: 24px;
    flex: 1;
}

.wfy-events__cta { text-align: center; margin-top: 56px; }

@media (max-width: 1023px) {
    .wfy-events__grid { grid-template-columns: 1fr; }
}
@media (min-width: 640px) and (max-width: 1023px) {
    /* Phablet/tablet: 2-col events, last centers full width */
    .wfy-events__grid { grid-template-columns: 1fr 1fr; gap: 22px; }
    .wfy-event-card:nth-child(3) { grid-column: span 2; max-width: 540px; justify-self: center; }
}

/* ---------- STUDIOS CTA ---------- */
.wfy-studios::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 80% 50%, rgba(244, 196, 48, 0.12), transparent 50%),
      radial-gradient(ellipse at 20% 50%, rgba(157, 78, 221, 0.18), transparent 50%);
    pointer-events: none;
}
.wfy-studios__inner {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    position: relative;
}
.wfy-studios__inner h2 em { font-style: italic; color: var(--wfy-violet); }
.wfy-studios__inner p { font-size: 19px; color: rgba(255, 255, 255, 0.78); margin: 16px 0 36px; }
.wfy-studios__ctas {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================ *
 * Small mobile (< 480px) — tighten typography, spacing, CTAs
 * ============================================================ */
@media (max-width: 480px) {
    .wfy-hero__inner { padding-top: 96px; padding-bottom: 60px; }
    .wfy-hero__title { font-size: clamp(34px, 10vw, 48px); margin-bottom: 16px; line-height: 1.04; }
    .wfy-hero__lede { font-size: 15px; line-height: 1.55; margin-bottom: 16px; }
    .wfy-hero__close { margin-bottom: 22px; }
    .wfy-hero__close .wfy-ritual { font-size: 18px; }
    .wfy-hero__ctas { flex-direction: column; align-items: stretch; gap: 10px; }
    .wfy-hero__ctas .wfy-btn { width: 100%; }
    .wfy-hero__scroll { bottom: 18px; }

    .wfy-marquee { padding: 22px 0; }
    .wfy-marquee__item { font-size: clamp(32px, 11vw, 44px); }

    .wfy-mantra-stack__word { font-size: clamp(44px, 16vw, 80px); }
    .wfy-mantra-moment { padding-block: clamp(80px, 14vw, 140px); }
    .wfy-mantra-moment__sigil { width: clamp(320px, 90vw, 500px); height: clamp(320px, 90vw, 500px); }

    .wfy-pillar { padding: 32px 24px; }
    .wfy-pillar__num { font-size: 44px; margin-bottom: 16px; }

    .wfy-event-card { padding: 28px 24px; }

    .wfy-studios__inner h2,
    .wfy-frequency__header h2,
    .wfy-experience__copy h2,
    .wfy-founder__copy h2,
    .wfy-events__header h2 { font-size: clamp(30px, 9vw, 42px); }

    .wfy-studios__ctas .wfy-btn,
    .wfy-events__cta .wfy-btn,
    .wfy-experience__copy .wfy-btn,
    .wfy-founder__copy .wfy-btn { width: 100%; }

    .wfy-checklist li { font-size: 16px; padding: 18px 0; }
}