/* āshrams homepage */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Cormorant+Infant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=DM+Sans:wght@300;400;500&family=Inter:wght@300;400;500;600;700;800&family=Manrope:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,300;0,400;1,300;1,400&family=Ysabeau+Infant:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
    --ashrams-terracotta: #9a4f3a;
    --ashrams-terracotta-light: #b86b52;
    --ashrams-text: #1a1a1a;
    --ashrams-nav-text: #000000;
    --ashrams-nav-font: 'Ysabeau Infant';
    --ashrams-nav-pill: rgba(189, 189, 189, 0.13);
    --ashrams-nav-pill-hover: rgba(189, 189, 189, 0.2);
    --ashrams-muted: #5c5c5c;
    --ashrams-cream: #faf8f5;
    /* Major headings + display serif — Cormorant Infant (Garamond fallback) */
    --ashrams-serif: 'Cormorant Infant';
    --ashrams-serif-mosaic: var(--ashrams-serif);
    --ashrams-sans: 'DM Sans';
    --ashrams-inter: 'Inter';
    --ashrams-manrope: 'Manrope';
    /* Arriving here — matches Figma */
    --ashrams-arriving-head-accent: #8b4513;
    --ashrams-arriving-body: #55433d;
}

html,
body.ashrams-home {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

body.ashrams-home {
    font-family: var(--ashrams-sans);
    color: var(--ashrams-text);
    background: #ffffff;
}

body.ashrams-home .header,
body.ashrams-home .footer {
    display: none !important;
}

/* Header */
.ashrams-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    padding: 0;
}

body.ashrams-home .ashrams-header {
    padding-top: 0;
    padding-bottom: 0;
}

/* No global nav/logo on inner āshrams pages (retreat detail, paths, etc.) */
body.ashrams-no-header {
    background: #ffffff;
}

body.ashrams-no-header .ashrams-footer {
    margin-top: 0;
}

/* Profile — full header */
body.ashrams-profile-page {
    background: #ffffff;
}

body.ashrams-profile-page .ashrams-header {
    position: relative;
    background: #ffffff;
    padding-bottom: 0;
}

body.ashrams-profile-page .ashrams-header__nav {
    transform: none;
    align-items: center;
}

body.ashrams-profile-page .ashrams-header__logo img {
    width: 132px;
    height: 80px;
    max-width: none;
}

body.ashrams-profile-page .ashrams-footer {
    margin-top: 0;
    padding-top: 0;
    background: transparent;
}

.ashrams-header__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 81px;
}

.ashrams-header__nav--full {
    width: 100%;
    max-width: var(--ashrams-page-max);
    margin-inline: auto;
    padding-inline: var(--ashrams-shell-pad);
    box-sizing: border-box;
}

.ashrams-header__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 132px;
    height: 80px;
    margin: 0;
}

.ashrams-header__logo img {
    width: 132px;
    height: 80px;
    max-width: none;
    object-fit: contain;
    filter: none;
}

.ashrams-header__actions {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.ashrams-header__lang-switch {
    align-items: center;
    gap: 0.25rem;
    background: #f3f0ec;
    border-radius: 999px;
    padding: 0.2rem;
}

.ashrams-header__lang-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 1.8rem;
    border-radius: 999px;
    font-family: var(--ashrams-sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: #6b5b53;
    transition: all 0.2s ease;
}

.ashrams-header__lang-option:hover {
    color: var(--ashrams-terracotta);
}

.ashrams-header__lang-option.is-active {
    background: var(--ashrams-terracotta);
    color: #fff;
}

.ashrams-header__currency {
    position: relative;
    display: none;
}

@media (min-width: 992px) {
    .ashrams-header__currency {
        display: inline-block;
    }
}

.ashrams-header__currency-btn {
    margin: 0;
    padding: 0.45rem 0.75rem;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #d4d9e0;
    border-radius: 0.375rem;
    color: #2c3e50;
    font-family: var(--ashrams-sans);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1;
    box-shadow: none;
}

.ashrams-header__currency-btn:hover {
    border-color: #b8c0cb;
    background: #fff;
}

.ashrams-header__currency-icon {
    display: inline-flex;
    align-items: center;
    color: #5c6773;
}

.ashrams-header__currency-icon svg {
    display: block;
}

.ashrams-header__currency-chevron {
    display: inline-flex;
    align-items: center;
    margin-left: 0.15rem;
    color: #5c6773;
}

.ashrams-header__currency-btn img {
    display: none;
}

.ashrams-header__currency-label {
    margin-top: 0;
    white-space: nowrap;
}

.ashrams-header__currency-dropdown {
    right: 0;
    left: auto;
    min-width: 7.5rem;
    border: 1px solid #d4d9e0;
    border-radius: 0.375rem;
    padding: 0.25rem 0;
    margin-top: 0.35rem;
    display: none;
    z-index: 1200;
}

/* Click-to-open on āshrams; disable legacy hover-only behaviour */
.ashrams-header__currency.currency-selector:hover .currency-dropdown {
    display: none;
}

.ashrams-header__currency.currency-selector.is-open .currency-dropdown {
    display: block;
}

.ashrams-header__currency-btn[aria-expanded="true"] .ashrams-header__currency-chevron {
    transform: rotate(180deg);
}

.ashrams-header__currency-chevron {
    transition: transform 0.15s ease;
}

.ashrams-header__currency-dropdown .ashrams-currency-option {
    display: block;
    padding: 0.45rem 0.85rem;
    font-family: var(--ashrams-sans);
    font-size: 0.8125rem;
    color: #2c3e50;
    text-decoration: none;
}

.ashrams-header__currency-dropdown .ashrams-currency-option:hover,
.ashrams-header__currency-dropdown .ashrams-currency-option.is-selected {
    background: #eef2f7;
}

.ashrams-header__currency-dropdown .ashrams-currency-option.is-selected {
    font-weight: 500;
}

.ashrams-header__currency-dropdown img {
    display: none;
}

.ashrams-header__menu {
    display: flex;
    align-items: center;
    gap: 42px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ashrams-header__menu-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 39px;
    padding: 6px 8px;
    border-radius: 21px;
    background: var(--ashrams-nav-pill);
    color: var(--ashrams-nav-text);
    text-decoration: none;
    font-family: var(--ashrams-nav-font);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: -0.019em;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.ashrams-header__menu-link:hover {
    background: var(--ashrams-nav-pill-hover);
    color: var(--ashrams-nav-text);
}

.ashrams-header__toggle {
    width: 22px;
    min-width: 22px;
    height: 39px;
    margin-left: 24px;
    padding: 0;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

.ashrams-header__toggle-line {
    display: block;
    height: 2px;
    background: var(--ashrams-terracotta, #984629);
    border-radius: 1px;
}

/* Figma menu: top shortest, middle longest, bottom medium */
.ashrams-header__toggle-line--top {
    width: 12px;
}

.ashrams-header__toggle-line--mid {
    width: 22px;
}

.ashrams-header__toggle-line--bottom {
    width: 17px;
}

/* Legacy alias */
.ashrams-header__toggle-line--short {
    width: 12px;
}

.ashrams-offcanvas__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ashrams-offcanvas__links a {
    display: block;
    padding: 0.75rem 0;
    color: var(--ashrams-text);
    text-decoration: none;
    font-size: 1.1rem;
    border-bottom: 1px solid #eee;
}

.ashrams-offcanvas__lang {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    color: #7a7a7a;
    font-family: var(--ashrams-sans);
}

.ashrams-offcanvas__lang a {
    border-bottom: 0;
    padding: 0;
    font-size: 0.95rem;
    color: #7a7a7a;
}

.ashrams-offcanvas__lang a.is-active {
    color: var(--ashrams-terracotta);
    font-weight: 600;
}

/* Typography */
.ashrams-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ashrams-terracotta);
    margin-bottom: 0.75rem;
}

.ashrams-title {
    font-family: var(--ashrams-serif);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 1.5rem;
}

.ashrams-title .accent {
    color: var(--ashrams-terracotta);
    font-style: italic;
}

.ashrams-title--xl {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.ashrams-title--lg {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
}

/* Why āshrams exist — Cormorant Infant for full line; terracotta on āshrams, roman (non-italic) */
.ashrams-why .ashrams-title {
    font-family: 'Cormorant Infant', 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
}

.ashrams-why .ashrams-title .accent {
    font-family: inherit;
    font-weight: 500;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: -1.8px;
    font-style: normal;
}

/* Less space between headline band and split narrative (“Our roots”) */
.ashrams-why {
    padding-bottom: clamp(0.625rem, 2vw, 1rem);
}

.ashrams-why + .ashrams-began {
    padding-top: clamp(0.625rem, 2vw, 1rem);
}

/* Split narrative rows: Our roots / Our context / Our intent — Inter 300, 36px/48px; body + eyebrow inherit */
.ashrams-split-narrative .ashrams-split__text {
    font-family: var(--ashrams-inter);
    color: var(--ashrams-text);
}

.ashrams-split-narrative .ashrams-title {
    font-family: var(--ashrams-inter);
    font-weight: 300;
    font-size: clamp(1.625rem, 4vw, 2.25rem);
    line-height: clamp(2rem, 5vw, 3rem);
    letter-spacing: 0;
    color: var(--ashrams-text);
}

.ashrams-body {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ashrams-muted);
    font-weight: 300;
}

.ashrams-body p + p {
    margin-top: 1rem;
}

.ashrams-section {
    padding: clamp(3rem, 8vw, 5rem) 0;
    background: #ffffff;
}

/* Hero → “Arriving here” — no negative overlap; image stays fully visible above */
.ashrams-hero-fade + .ashrams-section {
    position: relative;
    z-index: 2;
    margin-top: 0;
    padding-top: clamp(2.5rem, 5vw, 4rem);
    background: #ffffff;
}

.ashrams-hero-fade + .ashrams-section::before {
    display: none;
}

.ashrams-hero-fade + .ashrams-section.ashrams-arriving {
    background: #ffffff;
}

.ashrams-hero-fade + .ashrams-section.ashrams-arriving::before {
    display: none;
}

.ashrams-arriving {
    background-color: #ffffff;
    padding-bottom: 0;
}

@media (min-width: 1301px) {
    .ashrams-section.ashrams-arriving {
        padding-top: clamp(1.5rem, 3vw, 2.5rem);
    }
}

.ashrams-arriving__intro {
    padding-bottom: 0;
}

/* Figma — title + body over upper mist band of panorama (desktop) or stacked (mobile) */
.ashrams-arriving__overlay .ashrams-title.ashrams-title--lg {
    font-family: var(--ashrams-serif);
    font-weight: 400;
    font-style: normal;
    font-size: clamp(1.875rem, 3.35vw, 2.25rem);
    line-height: 2.5rem;
    letter-spacing: 0;
    color: #000000;
    margin: 0 0 clamp(1.125rem, 2.75vw, 1.625rem);
    text-wrap: balance;
}

.ashrams-arriving__overlay .ashrams-title--lg .accent {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: var(--ashrams-arriving-head-accent);
    font-style: normal;
}

.ashrams-arriving__overlay .ashrams-arriving__body {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    font-family: var(--ashrams-manrope);
    font-weight: 300;
    font-size: clamp(0.75rem, 1.85vw, 1rem);
    line-height: clamp(1.1875rem, 3vw, 1.625rem);
    letter-spacing: 0;
    color: var(--ashrams-arriving-body);
}

.ashrams-arriving__overlay .ashrams-arriving__body p {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}

.ashrams-arriving__overlay .ashrams-arriving__body p + p {
    margin-top: 1rem;
}

.ashrams-arriving__panorama {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0;
    overflow: visible;
    line-height: normal;
    border: 0;
}

/* Title + para 1 on white; para 2 sits on image fade only (no white seam) */
.ashrams-arriving__overlay {
    position: relative;
    z-index: 3;
    order: 1;
    padding: clamp(1rem, 4vw, 2.5rem) var(--ashrams-shell-pad, clamp(1rem, 4vw, 3.75rem)) 0;
    background: transparent;
    pointer-events: auto;
}

/* White block only behind title + first paragraph */
.ashrams-arriving__overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: calc(100% - clamp(5.25rem, 11.5vw, 6.75rem));
    background: #ffffff;
    z-index: -1;
    pointer-events: none;
}

.ashrams-arriving__overlay .ashrams-arriving__body p:last-child {
    position: relative;
    z-index: 4;
    margin-bottom: 0;
}

.ashrams-arriving__picture {
    order: 2;
    position: relative;
    z-index: 1;
    display: block;
    margin: clamp(-3.75rem, -7vw, -2rem) 0 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1920 / 730;
}

.ashrams-arriving__picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scaleX(-1);
}

/* Desktop-L (≥1301px) */
@media (min-width: 1301px) {
    .ashrams-arriving__overlay .ashrams-title.ashrams-title--lg {
        font-size: 2.25rem;
        line-height: 2.5rem;
        margin-bottom: 1.625rem;
    }

    .ashrams-arriving__overlay .ashrams-arriving__body {
        max-width: 42rem;
        font-size: 1rem;
        line-height: 1.625rem;
        font-weight: 300;
    }

    .ashrams-arriving__overlay::before {
        height: calc(100% - clamp(5.75rem, 12.5vw, 7.25rem));
    }

    .ashrams-arriving__overlay .ashrams-arriving__body p:last-child {
        padding-bottom: clamp(0.75rem, 1.5vw, 1.125rem);
        text-shadow:
            0 0 1.25rem rgba(255, 255, 255, 0.98),
            0 0 0.5rem rgba(255, 255, 255, 0.95),
            0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .ashrams-arriving__picture {
        margin-top: clamp(-6.75rem, -10.5vw, -4.25rem);
    }

    .ashrams-arriving__picture::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(255, 255, 255, 0.35) 14%,
            rgba(255, 255, 255, 0.06) 26%,
            transparent 38%
        );
    }
}

.ashrams-arriving__overlay .ashrams-arriving__intro {
    pointer-events: auto;
}

/* Bottom feather only — handoff to next section */
.ashrams-arriving__picture::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        to top,
        #ffffff 0%,
        rgba(255, 255, 255, 0.5) 10%,
        transparent 22%
    );
}

/* Paths after Varanasi: start pure white — no beige seam — then taper into cream */
.ashrams-arriving + .ashrams-section.ashrams-section--cream {
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #ffffff clamp(64px, 11vh, 140px),
        var(--ashrams-cream) clamp(200px, 32vh, 420px),
        var(--ashrams-cream) 100%
    );
}

.ashrams-section--cream {
    background: var(--ashrams-cream);
}

/* Keep Arriving -> Mosaic transition pure white at all widths */
.ashrams-arriving + .ashrams-section.ashrams-section--cream,
.ashrams-section--cream,
.ashrams-places {
    background: #ffffff;
}

.ashrams-center {
    text-align: center;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

/* Hero — Figma 1444×1071: temple + reflection bottom-left, centered headline, scroll */
.ashrams-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1440 / 1120;
    height: auto;
    min-height: 0;
    max-height: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(6rem, 13.5vw, 12.5rem) 1.5rem clamp(5rem, 11vh, 7rem);
    text-align: center;
    overflow: hidden;
}

.ashrams-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-size: 135%;
    background-position: 0% 26%;
}

/* Figma: keep reflection visible, then long mist → white (bottom ~half) */
.ashrams-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 80%,
        rgba(255, 255, 255, 0.12) 89%,
        rgba(255, 255, 255, 0.55) 96%,
        #ffffff 100%
    );
}

/* Light foot blur only — handoff to “Arriving here” */
.ashrams-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(2.25rem, 5vh, 3.5rem);
    z-index: 1;
    pointer-events: none;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.45) 60%,
        #ffffff 100%
    );
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 80%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 80%);
}

.ashrams-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 38%;
    z-index: 2;
    margin: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ashrams-sans);
    font-size: 0.625rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.65);
    pointer-events: none;
}

.ashrams-hero__scroll::after {
    content: '';
    display: block;
    width: 1px;
    height: clamp(2rem, 5vh, 3rem);
    background: rgba(255, 255, 255, 0.75);
}

.ashrams-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
}

.ashrams-hero__title {
    font-family: var(--ashrams-serif);
    font-size: clamp(1.7rem, 3vw, 2.65rem);
    font-weight: 350;
    line-height: 1.15;
    margin-bottom: 1.75rem;
    color: var(--ashrams-text);
    text-shadow: none;
}

.ashrams-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    border-radius: 999px;
    background: #f0f0f2;
    color: #000000;
    font-family: var(--ashrams-sans);
    font-weight: 400;
    text-decoration: none;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ashrams-btn:hover {
    background: #e8e8ea;
    color: #000000;
}

.ashrams-btn--solid {
    background: var(--ashrams-terracotta);
    color: #fff;
}

.ashrams-btn--solid:hover {
    background: var(--ashrams-terracotta-light);
    color: #fff;
}

/* Optional strip below hero — hidden until asset matches Figma (single full-bleed hero) */
.ashrams-hero-fade {
    display: none;
    position: relative;
    margin-top: -10rem;
    z-index: 2;
}
 
.ashrams-hero-fade img {
    width: 100%;
    max-height: 24rem;
    object-fit: cover;
    object-position: center 30%;
    mask-image: linear-gradient(180deg, #000 25%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 25%, transparent 100%);
}

/*
 * Desktop-M (1000–1300px): shorter hero, same Figma crop (non-Rishikesh heroes)
 */
@media (min-width: 1000px) and (max-width: 1300px) {
    .ashrams-hero:not(:has(.ashrams-hero__bg--rishikesh)) {
        aspect-ratio: 1440 / 1120;
        height: auto;
        min-height: 0;
    }

    .ashrams-hero__bg:not(.ashrams-hero__bg--rishikesh) {
        background-size: 135%;
        background-position: 0% 26%;
    }
}

/*
 * Tablet + mobile (≤999px) — show full temple scene, headline unchanged
 */
@media (max-width: 999px) {
    .ashrams-hero:not(:has(.ashrams-hero__bg--rishikesh)) {
        aspect-ratio: auto;
        height: 100svh;
        min-height: 560px;
        max-height: none;
        padding: clamp(5rem, 12vw, 7rem) 1.25rem clamp(3.5rem, 8vh, 5rem);
    }

    .ashrams-hero__bg:not(.ashrams-hero__bg--rishikesh) {
        background-size: 168%;
        background-position: 18% 30%;
    }

    .ashrams-hero__title {
        font-size: clamp(1.65rem, 4.8vw, 2.45rem);
    }

    .ashrams-section {
        padding: clamp(2.75rem, 7vw, 4rem) 0;
    }
}

/* Tablet + desktop-M (≤1300px): slightly larger headline, narrower body measure */
@media (max-width: 1300px) {
    .ashrams-arriving__overlay .ashrams-title.ashrams-title--lg {
        font-size: clamp(2rem, 5.5vw, 3rem);
        line-height: 1.1;
        text-wrap: balance;
        white-space: normal;
    }

    .ashrams-arriving__overlay .ashrams-arriving__body {
        font-size: clamp(0.75rem, 2vw, 1rem);
        line-height: clamp(1.1875rem, 2.85vw, 1.55);
        font-weight: 300;
        max-width: 36rem;
        margin-inline: auto;
    }
}

@media (max-width: 480px) {
    .ashrams-arriving + .ashrams-section.ashrams-section--cream,
    .ashrams-section--cream,
    .ashrams-places {
        background: #ffffff;
    }

    .ashrams-arriving__overlay .ashrams-title.ashrams-title--lg {
        font-size: clamp(1.5rem, 6.5vw, 2rem);
        line-height: 1.15;
    }

    .ashrams-arriving__overlay .ashrams-arriving__body {
        font-size: 0.75rem;
        line-height: 1.1875rem;
        font-weight: 300;
    }

    .ashrams-hero:not(:has(.ashrams-hero__bg--rishikesh)) {
        min-height: 520px;
        padding: clamp(3.25rem, 11vw, 4.5rem) 0.875rem clamp(3rem, 7vh, 4rem);
    }

    .ashrams-hero__bg:not(.ashrams-hero__bg--rishikesh) {
        background-size: 175%;
        background-position: 20% 32%;
    }

    .ashrams-hero:not(:has(.ashrams-hero__bg--rishikesh)) .ashrams-hero__scroll {
        font-size: 0.5625rem;
        bottom: 34%;
        color: rgba(255, 255, 255, 0.78);
    }

    .ashrams-hero__title {
        font-size: clamp(1.35rem, 7.2vw, 1.7rem);
    }
}

/*
 * Rishikesh — mobile portrait (Figma 393×692) — non-frame heroes only
 */
@media (max-width: 480px) {
    .ashrams-hero__bg--rishikesh:not(.ashrams-place__hero-frame-bg) {
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        background-image: url('../img/ashram/hero-temple-mobile.jpg') !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: center 42% !important;
    }

    .ashrams-hero__bg--rishikesh:not(.ashrams-place__hero-frame-bg)::after {
        inset: 0;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        background: linear-gradient(
            180deg,
            transparent 0%,
            transparent 88%,
            rgba(255, 255, 255, 0.12) 93%,
            rgba(255, 255, 255, 0.45) 97%,
            rgba(255, 255, 255, 0.85) 100%
        );
    }

    /* Non-homepage frame bg layout only */
    .ashrams-hero:not(.ashrams-hero--home):has(.ashrams-place__hero-frame-bg--rishikesh) {
        aspect-ratio: auto;
        height: min(calc(100vw * 692 / 393), 100svh);
        min-height: min(calc(100vw * 692 / 393), 100svh);
        max-height: 100svh;
        padding: clamp(5rem, 12vw, 6.5rem) 1.25rem clamp(2rem, 5vh, 3rem);
        align-items: flex-start;
        background: #ffffff;
    }

    .ashrams-hero:not(.ashrams-hero--home):has(.ashrams-place__hero-frame-bg--rishikesh)::after {
        display: none;
    }

    .ashrams-hero:not(.ashrams-hero--home):has(.ashrams-place__hero-frame-bg--rishikesh) .ashrams-hero__scroll {
        bottom: clamp(1.25rem, 4vw, 2rem);
        color: rgba(120, 120, 120, 0.85);
        text-shadow: none;
    }

    /* Non-homepage frame bg — bottom fade */
    .ashrams-hero:not(.ashrams-hero--home):not(.ashrams-place__hero-stage) .ashrams-place__hero-frame-bg.ashrams-hero__bg--rishikesh::after {
        display: block !important;
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
            180deg,
            transparent 0%,
            transparent 88%,
            rgba(255, 255, 255, 0.12) 93%,
            rgba(255, 255, 255, 0.45) 97%,
            rgba(255, 255, 255, 0.85) 100%
        );
    }

    .ashrams-hero:has(.ashrams-hero__bg--rishikesh):not(:has(.ashrams-place__hero-frame-bg--rishikesh)) {
        aspect-ratio: auto;
        height: min(calc(100vw * 692 / 393), 100svh);
        min-height: min(calc(100vw * 692 / 393), 100svh);
        max-height: 100svh;
        padding: clamp(5rem, 12vw, 6.5rem) 1.25rem clamp(2rem, 5vh, 3rem);
        align-items: flex-start;
        background: #ffffff;
    }

    .ashrams-hero:has(.ashrams-hero__bg--rishikesh):not(:has(.ashrams-place__hero-frame-bg--rishikesh))::after {
        display: none;
    }

    .ashrams-hero:has(.ashrams-hero__bg--rishikesh):not(:has(.ashrams-place__hero-frame-bg--rishikesh)) .ashrams-hero__scroll {
        bottom: clamp(1.25rem, 4vw, 2rem);
        color: rgba(120, 120, 120, 0.85);
        text-shadow: none;
    }
}

/*
 * Rishikesh — tablet (481–999px) — non-frame heroes only; frame uses place.css
 */
@media (min-width: 481px) and (max-width: 999px) {
    .ashrams-hero:not(.ashrams-hero--home):has(.ashrams-place__hero-frame-bg--rishikesh) {
        aspect-ratio: auto;
        height: auto;
        min-height: min(calc(100vw * 1120 / 1440), 100svh);
        max-height: none;
        padding: clamp(5rem, 12vw, 7rem) 1.25rem clamp(2rem, 5vh, 3rem);
        background: #ffffff;
    }

    .ashrams-hero__bg--rishikesh:not(.ashrams-place__hero-frame-bg) {
        background-image: url('../img/ashram/hero-temple.jpg') !important;
        background-size: 135% !important;
        background-repeat: no-repeat !important;
        background-position: 0% 26% !important;
    }

    .ashrams-hero__bg--rishikesh:not(.ashrams-place__hero-frame-bg)::after {
        background: linear-gradient(
            180deg,
            transparent 0%,
            transparent 80%,
            rgba(255, 255, 255, 0.12) 89%,
            rgba(255, 255, 255, 0.55) 96%,
            #ffffff 100%
        );
    }

    .ashrams-hero:not(.ashrams-hero--home):has(.ashrams-place__hero-frame-bg--rishikesh) .ashrams-hero__scroll {
        bottom: 38%;
        color: rgba(255, 255, 255, 0.82);
        text-shadow: 0 0 12px rgba(255, 255, 255, 0.65);
    }

    .ashrams-hero:has(.ashrams-hero__bg--rishikesh):not(:has(.ashrams-place__hero-frame-bg--rishikesh)) {
        aspect-ratio: auto;
        height: min(calc(100vw * 1120 / 1440), 100svh);
        min-height: 0;
        max-height: 100svh;
        padding: clamp(5rem, 12vw, 7rem) 1.25rem clamp(2rem, 5vh, 3rem);
        background: #ffffff;
    }

    .ashrams-hero:has(.ashrams-hero__bg--rishikesh):not(:has(.ashrams-place__hero-frame-bg--rishikesh)) .ashrams-hero__scroll {
        bottom: 38%;
        color: rgba(255, 255, 255, 0.82);
        text-shadow: 0 0 12px rgba(255, 255, 255, 0.65);
    }
}

/*
 * Rishikesh desktop — homepage frame bg matches place hero stage height; place.css handles crop
 */
@media (min-width: 1000px) {
    .ashrams-hero:has(.ashrams-place__hero-frame-bg--rishikesh) {
        aspect-ratio: auto;
        height: auto;
        min-height: clamp(32rem, 73vw, 65.625rem);
        max-height: none;
    }

    .ashrams-hero:has(.ashrams-hero__bg--rishikesh):not(:has(.ashrams-place__hero-frame-bg--rishikesh)) {
        aspect-ratio: auto;
        height: min(calc(100vw * 1120 / 1440), 100svh);
        min-height: 0;
        max-height: 100svh;
    }

    .ashrams-hero__bg--rishikesh:not(.ashrams-place__hero-frame-bg) {
        background-size: 135% !important;
        background-position: 0% 26% !important;
    }
}

/*
 * Homepage only — HD hero (Figma 3×: 4320×3213)
 * --home-n  0→1 : 1000px → 393px (narrowing / portrait height blend)
 * --home-m  0→1 : 480px → 393px (phone: center dome, show water reflection)
 * Dome ≈ 30% from left in source — pan bg-x right as viewport narrows to center it.
 */
.ashrams-hero--home:has(.ashrams-place__hero-frame-bg--rishikesh) {
    --home-n: clamp(0, calc((1000px - 100vw) / (1000px - 393px)), 1);
    --home-m: clamp(0, calc((480px - 100vw) / (480px - 393px)), 1);
    /* ≤394: extra push so BEGIN/headline stay on cloud, not mountain ridge */
    --home-p: clamp(0, calc((394px - 100vw) / (394px - 300px)), 1);
    /* Tablet left-bias → phone: pan to center dome (~30% in source) */
    --home-bg-x: calc(38% - var(--home-n) * 14% - var(--home-m) * 12% - var(--home-p) * 3%);
    /* Full image height visible on phone cover; slight drift keeps mist/reflection balanced */
    --home-bg-y: calc(32% - var(--home-n) * 4% - var(--home-m) * 6%);
}

.ashrams-hero--home .ashrams-place__hero-frame-bg.ashrams-hero__bg--rishikesh {
    background-image: -webkit-image-set(
        url('../img/ashram/hero-home-temple.png') 1x,
        url('../img/ashram/hero-home-temple@2x.png') 2x,
        url('../img/ashram/hero-home-temple@3x.png') 3x
    ) !important;
    background-image: image-set(
        url('../img/ashram/hero-home-temple.png') 1x,
        url('../img/ashram/hero-home-temple@2x.png') 2x,
        url('../img/ashram/hero-home-temple@3x.png') 3x
    ) !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    background-repeat: no-repeat !important;
    /* Full-frame Figma export — cover matches 1440×1071 artboard */
    background-size: cover !important;
    background-position: center center !important;
}

.ashrams-hero--home .ashrams-place__hero-frame-bg.ashrams-hero__bg--rishikesh::after {
    display: none !important;
}

/* Scroll cue — over water / reflection */
.ashrams-hero--home:has(.ashrams-place__hero-frame-bg--rishikesh) .ashrams-hero__scroll {
    bottom: 28%;
}

@media (min-width: 1000px) {
    .ashrams-hero--home .ashrams-place__hero-frame-bg.ashrams-hero__bg--rishikesh {
        background-size: cover !important;
        background-position: center center !important;
    }
}

@media (max-width: 999.98px) {
    /* Cover = no gaps on any edge; fluid pan centers dome + keeps reflection */
    .ashrams-hero--home:has(.ashrams-place__hero-frame-bg--rishikesh) .ashrams-place__hero-frame-bg.ashrams-hero__bg--rishikesh {
        top: 0 !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: var(--home-bg-x) var(--home-bg-y) !important;
    }

    .ashrams-hero--home:has(.ashrams-place__hero-frame-bg--rishikesh) {
        aspect-ratio: auto;
        height: auto;
        max-height: none;
        align-items: flex-start;
        background: #ffffff;
        overflow: hidden;
        /* Landscape frame → Figma phone 393×692 (no jump at 999) */
        min-height: calc(
            clamp(32rem, 73vw, 65.625rem) * (1 - var(--home-n))
            + (100vw * 692 / 393) * var(--home-n)
        );
        /* Headline + BEGIN stay on mist — above mountains, not on temple */
        padding: calc(clamp(5.75rem, 11.5vw, 9.5rem) + var(--home-m) * 0.35rem)
            1.25rem
            clamp(2rem, 5vh, 3rem);
    }

    .ashrams-hero--home:has(.ashrams-place__hero-frame-bg--rishikesh)::after {
        opacity: calc((1 - var(--home-n) * 0.85) * (1 - var(--home-m)));
    }

    /* Fade scroll out 480→303 (Figma phone has no scroll cue) */
    .ashrams-hero--home:has(.ashrams-place__hero-frame-bg--rishikesh) .ashrams-hero__scroll {
        bottom: calc(28% - var(--home-n) * 28%);
        opacity: calc(1 - var(--home-m));
        pointer-events: none;
        color: color-mix(in srgb, rgba(255, 255, 255, 0.82) calc((1 - var(--home-n)) * 100%), rgba(120, 120, 120, 0.85));
        text-shadow: 0 0 calc(12px * (1 - var(--home-n))) rgba(255, 255, 255, 0.65);
    }

    .ashrams-hero--home .ashrams-hero__title {
        /* Scales down below 393; grows 393→999 */
        font-size: clamp(
            1.35rem,
            max(calc(100vw * 25 / 393), calc(25px + (100vw - 393px) * 14 / 606)),
            2.65rem
        );
    }

    .ashrams-hero--home .ashrams-btn {
        font-size: clamp(
            0.68rem,
            max(calc(100vw * 12 / 393), calc(12px + (100vw - 393px) * 2.4 / 606)),
            0.9rem
        );
        padding:
            clamp(0.45rem, max(calc(100vw * 9.5 / 393), calc(9.5px + (100vw - 393px) * 0.9 / 606)), 0.65rem)
            clamp(0.95rem, max(calc(100vw * 22 / 393), calc(22px + (100vw - 393px) * 2 / 606)), 1.5rem);
    }
}

/* ≤394 — viewport fill + soft fade (393px layout unchanged) */
@media (max-width: 394px) {
    .ashrams-hero--home:has(.ashrams-place__hero-frame-bg--rishikesh) {
        min-height: max(calc(100vw * 692 / 393), 100svh);
    }

    .ashrams-hero--home:has(.ashrams-place__hero-frame-bg--rishikesh)::after {
        opacity: 0.5;
    }
}

/* <392 — bring bg down as width narrows; flat bit left on all */
@media (max-width: 391.98px) {
    .ashrams-hero--home:has(.ashrams-place__hero-frame-bg--rishikesh) {
        --home-left: 22px;
        --home-down: clamp(0px, calc((392px - 100vw) * 7), 88px);
    }

    .ashrams-hero--home:has(.ashrams-place__hero-frame-bg--rishikesh) .ashrams-place__hero-frame-bg.ashrams-hero__bg--rishikesh {
        top: calc(0px - var(--home-down)) !important;
        left: 0 !important;
        width: calc(100% + var(--home-left)) !important;
        height: calc(100% + var(--home-down)) !important;
        transform: translate(calc(-1 * var(--home-left)), var(--home-down)) !important;
        background-position: var(--home-bg-x) var(--home-bg-y) !important;
    }
}

/* <350 — extra bit left on top of <392 */
@media (max-width: 349.98px) {
    .ashrams-hero--home:has(.ashrams-place__hero-frame-bg--rishikesh) {
        --home-left: 42px;
    }
}

/* ≤393 — scroll off (Figma phone frame) */
@media (max-width: 393px) {
    .ashrams-hero--home:has(.ashrams-place__hero-frame-bg--rishikesh) .ashrams-hero__scroll {
        display: none !important;
    }
}

/* Paths — fluid grid (Figma 1440 reference, not fixed px layout) */
.ashrams-section-paths {
    --paths-content-max: min(63.5rem, 100%);
    background: #ffffff;
    padding: 0 0 clamp(3rem, 10vw, 5rem);
}

.ashrams-section-paths__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 1.5vw, 0.875rem);
    width: 100%;
    max-width: var(--paths-content-max);
    min-height: clamp(10rem, 24vw, 13.5rem);
    padding: clamp(3rem, 10vw, 5rem) 0 clamp(1.75rem, 3.5vw, 2.5rem);
    margin: 0 auto;
    text-align: center;
}

.ashrams-section-paths__eyebrow {
    margin: 0;
    font-family: var(--ashrams-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #8a8a8a;
}

.ashrams-section-paths__eyebrow span {
    color: var(--ashrams-terracotta);
    letter-spacing: 0.28em;
}

.ashrams-section-paths__title {
    margin: 0;
    font-family: var(--ashrams-serif);
    font-size: clamp(1.75rem, 4.25vw, 2.65rem);
    font-weight: 600;
    font-style: normal;
    line-height: 1.15;
    letter-spacing: 0;
    color: var(--ashrams-text);
}

.ashrams-section-paths__title span {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.ashrams-section-paths__title-accent {
    color: var(--ashrams-terracotta);
}

.ashrams-section-paths__title-rest {
    color: var(--ashrams-text);
}

/* Paths layout — slight inset from shell (Figma); modest column gap */
.ashrams-section-paths .ashrams-paths {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 5vw, 6.5rem);
    row-gap: clamp(0.35rem, 0.85vw, 0.5rem);
    align-items: start;
    width: 100%;
    max-width: var(--paths-content-max);
    min-height: 0;
    margin-inline: auto;
}

.ashrams-section-paths .ashrams-paths__media {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1024 / 747;
    border-radius: clamp(1.25rem, 2.2vw, 2rem);
    overflow: hidden;
    background: #e5e0da;
}

.ashrams-section-paths .ashrams-paths__media img,
.ashrams-section-paths .ashrams-paths__image img {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
    display: block;
}

.ashrams-section-paths .ashrams-paths__quote {
    font-family: var(--ashrams-sans);
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.45;
    color: #6b6b6b;
    margin: 0.35rem 0 0.15rem;
    max-width: 100%;
}

.ashrams-section-paths .ashrams-paths__quote-mark {
    color: var(--ashrams-terracotta);
    font-family: var(--ashrams-serif);
    font-size: 1.35rem;
    line-height: 1;
    margin-right: 0.15rem;
}

.ashrams-section-paths__cta {
    display: inline-block;
    font-family: var(--ashrams-sans);
    font-size: 0.625rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ashrams-terracotta);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ashrams-section-paths__cta:hover {
    color: var(--ashrams-terracotta-light);
}

.ashrams-section-paths .ashrams-paths__panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.ashrams-section-paths .ashrams-paths__tabs {
    list-style: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: repeat(4, minmax(4.5rem, auto)) minmax(7rem, auto);
    padding: 0;
    margin: 0;
}

.ashrams-section-paths .ashrams-paths__tabs li {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 4.5rem;
    box-sizing: border-box;
    border-bottom: 1px solid #e8e4df;
}

.ashrams-section-paths .ashrams-paths__tabs li:first-child {
    border-top: 1px solid #e8e4df;
}

/* Desktop — tab rules align with image top/bottom (Figma) */
@media (min-width: 1000px) {
    .ashrams-section-paths .ashrams-paths__image {
        display: contents;
    }

    .ashrams-section-paths .ashrams-paths__media {
        grid-column: 1;
        grid-row: 1;
    }

    .ashrams-section-paths .ashrams-paths__quote {
        grid-column: 1;
        grid-row: 2;
    }

    .ashrams-section-paths .ashrams-paths__image .ashrams-section-paths__cta {
        grid-column: 1;
        grid-row: 3;
    }

    .ashrams-section-paths .ashrams-paths__panel {
        grid-column: 2;
        grid-row: 1;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .ashrams-section-paths .ashrams-paths__tabs {
        flex: 1 1 auto;
        height: 100%;
        min-height: 100%;
        grid-template-rows: repeat(4, 1fr);
    }

    .ashrams-section-paths .ashrams-paths__tabs li {
        min-height: 0;
    }
}

.ashrams-section-paths .ashrams-paths__tabs a {
    display: block;
    width: 100%;
    padding: 0;
    text-decoration: none;
    font-family: var(--ashrams-inter);
    font-size: clamp(1.125rem, 2.5vw, 1.875rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    color: #999999;
    transition: color 0.2s ease;
}

.ashrams-section-paths .ashrams-paths__tabs a.is-active,
.ashrams-section-paths .ashrams-paths__tabs a:hover {
    color: #984629;
}

/* Tablet: stacked Paths + horizontal tab strip */
@media (max-width: 999px) {
    .ashrams-section-paths {
        --paths-content-max: 100%;
        padding: 0 0 3.5rem;
    }

    .ashrams-section-paths__head {
        min-height: auto;
        padding: 2.5rem 0 1.25rem;
        gap: 0.55rem;
    }

    .ashrams-section-paths__title {
        font-size: clamp(2.1rem, 7.5vw, 2.75rem);
        line-height: 1.12;
    }

    .ashrams-section-paths .ashrams-paths {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
    }

    .ashrams-section-paths .ashrams-paths__panel {
        order: -1;
    }

    .ashrams-section-paths .ashrams-paths__tabs {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(1rem, 4vw, 1.5rem);
        height: auto;
        margin: 0 auto;
    }

    .ashrams-section-paths .ashrams-paths__tabs li,
    .ashrams-section-paths .ashrams-paths__tabs li:first-child {
        height: auto;
        min-height: 0;
        border: 0;
    }

    .ashrams-section-paths .ashrams-paths__tabs a {
        width: auto;
        padding: 0 0 0.45rem;
        font-family: var(--ashrams-manrope);
        font-size: clamp(0.875rem, 3.2vw, 0.9375rem);
        font-weight: 300;
        line-height: 1.2;
        letter-spacing: 0.04em;
        color: #4a4a4a;
        border-bottom: 2px solid transparent;
    }

    .ashrams-section-paths .ashrams-paths__tabs a.is-active {
        color: #111111;
        border-bottom-color: var(--ashrams-terracotta);
    }

    .ashrams-section-paths .ashrams-paths__media {
        border-radius: 28px;
        aspect-ratio: 1024 / 747;
    }

    .ashrams-section-paths .ashrams-paths__quote {
        margin: 0.15rem 0 0;
        padding-right: 1.6rem;
        font-size: clamp(0.95rem, 3.6vw, 1.15rem);
        line-height: 1.4;
        position: relative;
    }

    .ashrams-section-paths .ashrams-paths__quote::after {
        content: '›';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-52%);
        font-size: 2rem;
        color: var(--ashrams-terracotta);
        line-height: 1;
    }

    .ashrams-section-paths .ashrams-paths__quote-mark {
        font-size: 1.6rem;
        margin-right: 0.25rem;
    }

    .ashrams-section-paths__cta {
        display: none;
    }
}

/* Travellers Stories */
.ashrams-section-travellers .ashrams-title {
    font-family: var(--ashrams-serif);
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.17;
    letter-spacing: 0;
    color: var(--ashrams-text);
}

.ashrams-section-travellers .ashrams-title .accent {
    font-family: inherit;
    font-weight: inherit;
    font-style: normal;
    color: var(--ashrams-terracotta);
}

/* Travellers — white canvas like Figma (bento on white), not cream */
.ashrams-section-travellers {
    background-color: #ffffff;
}

/* Stats captions — sans (comp) */
.ashrams-section-travellers .ashrams-stat span {
    font-family: var(--ashrams-manrope);
    font-weight: 300;
}

/* Paths layout */
.ashrams-paths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.ashrams-paths__image img {
    width: 100%;
    border-radius: 1.25rem;
    aspect-ratio: 4/5;
    object-fit: cover;
}

.ashrams-paths__quote {
    font-family: var(--ashrams-serif);
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--ashrams-muted);
    margin: 1.5rem 0;
}

.ashrams-paths__tabs {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ashrams-paths__tabs li {
    border-bottom: 1px solid #e8e4df;
}

.ashrams-paths__tabs a {
    display: block;
    padding: 1rem 0;
    text-decoration: none;
    font-family: var(--ashrams-serif);
    font-size: 1.5rem;
    color: #bbb;
}

.ashrams-paths__tabs a.is-active,
.ashrams-paths__tabs a:hover {
    color: var(--ashrams-terracotta);
}

.ashrams-link {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ashrams-terracotta);
    text-decoration: none;
}

/* Places — Mosaic of Life (Figma 1440 reference) */
.ashrams-places {
    --places-card-gap: clamp(0.375rem, 0.55vw, 0.5rem);
    --places-card-radius: clamp(1rem, 1.45vw, 1.3125rem);
}

.ashrams-places .ashrams-places__intro {
    margin-bottom: 0;
}

.ashrams-places .ashrams-eyebrow {
    font-family: var(--ashrams-sans);
    font-size: 0.625rem;
    font-weight: 400;
    letter-spacing: 0.32em;
    color: #8a8a8a;
    margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}

.ashrams-places .ashrams-eyebrow span {
    font-family: inherit;
    color: var(--ashrams-terracotta);
    letter-spacing: 0.28em;
}

/* Heading — Cormorant Infant 48/55 at 1440 */
.ashrams-places .ashrams-title.ashrams-title--lg {
    font-family: var(--ashrams-serif-mosaic);
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.1458;
    letter-spacing: 0;
    color: var(--ashrams-text);
    margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}

.ashrams-places .ashrams-title--lg .accent,
.ashrams-places .ashrams-title--lg span {
    font-family: inherit;
    font-weight: inherit;
    font-style: normal;
}

.ashrams-places .ashrams-title--lg .accent {
    color: var(--ashrams-arriving-head-accent);
}

/* Intro copy */
.ashrams-places__intro .ashrams-body {
    max-width: 36.25rem;
    margin-inline: auto;
    font-family: var(--ashrams-manrope);
    font-weight: 300;
    font-size: clamp(0.9375rem, 1.06vw, 1.125rem);
    line-height: clamp(1.5rem, 2.08vw, 1.875rem);
    letter-spacing: 0;
    color: var(--ashrams-arriving-body);
}

.ashrams-places__body--mobile {
    display: none;
}

.ashrams-places__carousel {
    width: 100%;
    max-width: var(--ashrams-page-max, 1440px);
    margin-inline: auto;
    padding-inline: var(--ashrams-shell-pad, clamp(1rem, 4vw, 3.75rem));
    box-sizing: border-box;
}

.ashrams-places__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 3vw, 1rem);
    width: 100%;
    margin-inline: auto;
    margin-top: clamp(2rem, 4vw, 3rem);
    align-items: start;
}

@media (min-width: 1000px) {
    .ashrams-places__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--places-card-gap);
        margin-top: clamp(2.5rem, 4vw, 3.5rem);
    }
}

.ashrams-place-card__slide-ui {
    display: none;
}

.ashrams-place-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

.ashrams-place-card__media {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--places-card-radius);
    background: #eeeeee;
}

.ashrams-place-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 22%;
    transform: scale(1.12);
    transform-origin: center 18%;
}

/* Himalayas — horizontal crop (adjust % to suit place-himalayas.png) */
.ashrams-place-card__media img[src*='place-himalayas'] {
    object-position: 95% center;
}

/* Rishikesh — horizontal crop (adjust % independently from Himalayas) */
.ashrams-place-card__media img[src*='place-rishikesh'] {
    object-position: 20% center;
}

/* Kerala — boat + palms higher in frame */
.ashrams-place-card__media img[src*='place-kerala'] {
    object-position: center 42%;
    transform: scale(1.16);
    transform-origin: center 28%;
}

.ashrams-place-card__body {
    flex: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    background: transparent;
    width: 100%;
    padding: clamp(0.85rem, 2.2vw, 1.1rem) 0 0;
}

.ashrams-place-card__body h3 {
    font-family: var(--ashrams-serif-mosaic);
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: 0;
    color: var(--ashrams-arriving-head-accent);
    margin: 0 0 0.45rem;
}

.ashrams-place-card__body p {
    font-family: var(--ashrams-manrope);
    font-size: clamp(0.8125rem, 1vw, 0.875rem);
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--ashrams-arriving-body);
    max-width: 100%;
    margin: 0;
}

/* Mosaic — horizontal slider below 1000px (Figma mobile/tablet) */
@media (max-width: 999px) {
    .ashrams-places .ashrams-places__intro {
        padding-inline: var(--ashrams-shell-pad, clamp(1rem, 4vw, 3.75rem));
    }

    .ashrams-places__body--desktop {
        display: none;
    }

    .ashrams-places__body--mobile {
        display: block;
        max-width: 22.5rem;
    }

    .ashrams-places__carousel {
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-inline: 0;
        overflow: hidden;
    }

    .ashrams-places__grid {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: clamp(0.625rem, 2.5vw, 0.875rem);
        width: 100%;
        margin-top: clamp(1.75rem, 5vw, 2.25rem);
        padding: 0 var(--ashrams-shell-pad, clamp(1rem, 4vw, 3.75rem)) clamp(0.25rem, 1.5vw, 0.5rem);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--ashrams-shell-pad, clamp(1rem, 4vw, 3.75rem));
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ashrams-places__grid::-webkit-scrollbar {
        display: none;
    }

    .ashrams-place-card {
        flex: 0 0 clamp(16.5rem, 78vw, 19.5rem);
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .ashrams-place-card__media {
        aspect-ratio: 3 / 4.05;
        border-radius: clamp(1.125rem, 4.5vw, 1.375rem);
    }

    .ashrams-place-card__media img {
        transform: none;
        object-position: center;
    }

    .ashrams-place-card__media img[src*='place-himalayas'] {
        object-position: 88% center;
    }

    .ashrams-place-card__media img[src*='place-rishikesh'] {
        object-position: 24% center;
    }

    .ashrams-place-card__media img[src*='place-kerala'] {
        object-position: center 45%;
        transform: none;
    }

    .ashrams-place-card__slide-ui {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        padding: clamp(1rem, 4.2vw, 1.35rem);
        pointer-events: none;
    }

    .ashrams-place-card__slide-title {
        margin: 0;
        font-family: var(--ashrams-serif-mosaic);
        font-size: clamp(1.35rem, 4.8vw, 1.625rem);
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: 0;
        color: #ffffff;
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
    }

    .ashrams-place-card__explore {
        align-self: center;
        margin-top: auto;
        margin-bottom: clamp(0.85rem, 3.5vw, 1.15rem);
        pointer-events: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 6.75rem;
        padding: 0.55rem 1.65rem;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.42);
        background: rgba(255, 255, 255, 0.18);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        color: #ffffff;
        font-family: var(--ashrams-sans);
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1;
        text-decoration: none;
        transition: background 0.2s ease, border-color 0.2s ease;
    }

    .ashrams-place-card__explore:hover {
        background: rgba(255, 255, 255, 0.28);
        border-color: rgba(255, 255, 255, 0.58);
        color: #ffffff;
    }

    .ashrams-place-card__body {
        display: none;
    }
}

/* Split sections */
.ashrams-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.ashrams-split--reverse .ashrams-split__media {
    order: -1;
}

.ashrams-split--reverse .ashrams-split__text {
    order: 0;
}

.ashrams-split__media img {
    width: 100%;
    border-radius: 1.25rem;
    aspect-ratio: 3/2;
    object-fit: cover;
    object-position: center;
}

/* intent-mountain.jpg — zoom + clip watermark; anchor high so summit stays in frame */
.ashrams-split__media:has(img[src*='intent-mountain']) {
    overflow: hidden;
    border-radius: 1.25rem;
}

.ashrams-split__media img[src*='intent-mountain'] {
    display: block;
    width: 100%;
    max-height: 22rem;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    /* Top bias keeps peak visible; slight left trims bottom-right watermark */
    object-position: 46% 6%;
    border-radius: 0;
    transform-origin: 50% 22%;
    transform: scale(1.2);
}

/* Stats */
.ashrams-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
    margin: 3rem 0;
    padding: 2rem 0;
    border-top: 1px solid #e8e4df;
    border-bottom: 1px solid #e8e4df;
}

.ashrams-stat {
    position: relative;
}

/* Thin vertical separators in the gutter (short, centred — matches Figma) */
@media (min-width: 1000px) {
    .ashrams-stat:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 100%;
        width: 1px;
        height: 4.5rem;
        margin-left: 1rem;
        transform: translate(-50%, -50%);
        background: #dad6d1;
        pointer-events: none;
    }
}

.ashrams-stat strong {
    display: block;
    font-family: var(--ashrams-serif);
    font-size: 2.5rem;
    color: var(--ashrams-terracotta);
    font-weight: 500;
}

.ashrams-stat span {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ashrams-muted);
}

/* Travellers Stories — responsive (scales with viewport) */
.ashrams-stories__grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    margin-top: 2.5rem;
}

.ashrams-stories__main {
    grid-column: 1;
    border-radius: 32px;
    overflow: hidden;
    position: relative;
}

.ashrams-stories__tile {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.ashrams-stories__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Match Figma crop: group lower, less sky at top */
    object-position: 50% 38%;
}

.ashrams-stories__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay on left card */
.ashrams-stories__overlay {
    position: absolute;
    inset: 0;
    padding: 2.1rem 1.85rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Stronger dark panel at bottom to match Figma */
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.06) 15%,
        rgba(0, 0, 0, 0.38) 28%,
        rgba(0, 0, 0, 0.78) 44%,
        rgba(8, 8, 8, 0.96) 62%,
        #0a0a0a 100%
    );
    color: #fff;
    z-index: 2;
}

/* Tile copy on right cards — no full-card dark wash */
.ashrams-stories__tile-copy {
    background: none;
    color: #fff;
    z-index: 2;
}

/* ===================== DESKTOP BENTO (exact Figma match at 1439px) ===================== */
@media (min-width: 1200px) {
    .ashrams-stories__grid {
        /* Figma: main 661.66 | rail 172 + 270 (+ gap) — top tile 466×356, bottom 172×250 & 270×250 */
        grid-template-columns: minmax(0, 661.66fr) minmax(0, 172fr) minmax(0, 270fr);
        grid-template-rows: clamp(240px, 24.74vw, 356px) clamp(170px, 17.37vw, 250px);
        align-items: start;
    }

    .ashrams-stories__main {
        grid-column: 1;
        grid-row: 1 / span 2;
        /* Figma: 661.66 × 631 px at 1439px viewport */
        height: clamp(420px, 43.85vw, 631px);
        min-height: clamp(420px, 43.85vw, 631px);
        max-height: clamp(420px, 43.85vw, 631px);
    }

    .ashrams-stories__tile--top {
        grid-column: 2 / 4;
        grid-row: 1;
        /* Figma: 466 × 356 px */
        height: clamp(240px, 24.74vw, 356px);
    }

    .ashrams-stories__tile--bl {
        grid-column: 2;
        grid-row: 2;
        /* Figma: 172 × 250 px */
        height: clamp(170px, 17.37vw, 250px);
    }

    .ashrams-stories__tile--br {
        grid-column: 3;
        grid-row: 2;
        /* Figma: 270 × 250 px */
        height: clamp(170px, 17.37vw, 250px);
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
    .ashrams-stories__grid {
        grid-template-columns: 1fr 1fr;
    }
    .ashrams-stories__main { min-height: 440px; }
}

/* Mobile */
@media (max-width: 576px) {
    .ashrams-stories__main,
    .ashrams-stories__tile {
        min-height: 260px;
    }
}

.ashrams-stories__quote-mark {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.85rem, 4.85vw, 3.85rem); /* larger to match Figma */
    line-height: 0.72;
    color: #e05545;
    margin: 0 0 0.65rem;
}

.ashrams-section-travellers .ashrams-stories__overlay blockquote {
    font-family: var(--ashrams-manrope);
    font-size: clamp(0.875rem, 2.25vw, 1.25rem); /* ~20px */
    font-style: normal;
    font-weight: 400;
    line-height: clamp(1.2rem, 3.15vw, 1.75rem); /* ~28px */
    letter-spacing: 0;
    margin: 0 0 1.05rem;
    max-width: min(38.5rem, 100%);
    width: 100%;
    box-sizing: border-box;
    color: #fafaf9;
    text-shadow: none;
}

.ashrams-section-travellers .ashrams-stories__overlay cite {
    font-family: var(--ashrams-manrope);
    font-style: normal;
    font-weight: 500;
    font-size: 0.5625rem; /* 9px */
    letter-spacing: 0.14em;
    text-transform: uppercase;
    max-width: min(38.5rem, 100%);
    width: 100%;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: none;
}

/* Story rail category (“Retreats”, “Rest”) */
.ashrams-section-travellers .ashrams-stories__tag {
    display: inline-block;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: min(25.125rem, 100%);
    font-family: var(--ashrams-manrope);
    font-size: clamp(0.75rem, 1.75vw, 1rem); /* ~16px */
    font-weight: 400;
    font-style: normal;
    line-height: 0.8125rem; /* 13px */
    letter-spacing: 0;
    text-transform: uppercase;
    color: #d6d3d1;
    text-shadow: none;
}

/* Top rail — Figma: Manrope 400, 25px / 40px, #FAFAF9 */
.ashrams-section-travellers .ashrams-stories__tile--top .ashrams-stories__tile-title {
    font-family: var(--ashrams-manrope);
    font-weight: 400;
    font-size: clamp(1.0625rem, 2.8vw, 1.5625rem); /* 25px */
    line-height: clamp(2rem, 4.35vw, 2.5rem); /* 40px */
    letter-spacing: 0;
    color: #fafaf9;
    max-width: min(25.125rem, 100%);
    text-shadow: none;
}

/* Bottom rails — Figma: Manrope 400, 18px / 22.5px, #FAFAF9 */
.ashrams-section-travellers .ashrams-stories__tile--bl .ashrams-stories__tile-title,
.ashrams-section-travellers .ashrams-stories__tile--br .ashrams-stories__tile-title {
    font-family: var(--ashrams-manrope);
    font-weight: 400;
    font-size: clamp(0.9375rem, 2.15vw, 1.125rem); /* 18px */
    line-height: clamp(1.175rem, 2.68vw, 1.40625rem); /* 22.5px */
    letter-spacing: 0;
    color: #fafaf9;
    max-width: min(25.125rem, 100%);
    text-shadow: none;
}

/* Rail cards — text stack capped 402px, 24px top padding */
.ashrams-stories__tile {
    position: relative;
    border-radius: clamp(18px, 2vw, 22px);
    overflow: hidden;
    min-height: 13rem;
}

/* Desktop: tiles fill their grid row exactly (no base min-height) */
@media (min-width: 1000px) {
    .ashrams-section-travellers .ashrams-stories__tile {
        min-height: 0;
    }
}

.ashrams-stories__tile::after {
    display: none;
}

/* Right three rails only — text nudged left (Figma) */
.ashrams-section-travellers .ashrams-stories__tile .ashrams-stories__tile-copy {
    position: absolute;
    inset: auto;
    left: clamp(0.6rem, 1.25vw, 0.75rem);
    right: auto;
    bottom: clamp(0.85rem, 1.75vw, 1.25rem);
    max-width: calc(100% - clamp(0.6rem, 1.25vw, 0.75rem) - 0.5rem);
    padding: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.45rem;
}

.ashrams-section-travellers .ashrams-stats {
    margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.ashrams-section-travellers .ashrams-stories__tile-title {
    margin: 0;
}

/* Section above footer: seamless white floor + clear gap before forest footer */
.ashrams-section:has(.ashrams-magazine) {
    background-color: #ffffff;
    padding-bottom: clamp(0.5rem, 1.5vw, 1rem);
}

/* Magazine — horizontal banner (Figma) */
.ashrams-magazine {
    position: relative;
    border-radius: 52px 52px 40px 40px;
    overflow: hidden;
    height: 305px;
    margin: -44px 0 clamp(2.75rem, 4.5vw, 3.75rem);
}

.ashrams-magazine__bg {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    /* Figma-like crop: less top sky, mountains centered */
    background-position: center 65%;
    z-index: 0;
}

.ashrams-magazine__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: clamp(28px, 4vw, 40px);
    row-gap: 1rem;
    height: 100%;
    padding: 2px clamp(32px, 5vw, 56px) 48px;
    box-sizing: border-box;
}

@media (min-width: 992px) {
    .ashrams-magazine__inner {
        flex-wrap: nowrap;
        transform: translateY(-30px);
    }
}

/* 1136-ish viewport tuning: avoid cramped/cut subscribe row */
@media (min-width: 992px) and (max-width: 1200px) {
    .ashrams-magazine {
        height: 290px;
        margin: -24px 0 clamp(2.25rem, 4vw, 3.25rem);
    }

    .ashrams-magazine__bg {
        background-position: center 62%;
    }

    .ashrams-magazine__inner {
        flex-wrap: wrap;
        transform: none;
        row-gap: 0.65rem;
        column-gap: 1rem;
        padding: 1.15rem 1.2rem 1.1rem;
    }

    .ashrams-magazine__copy {
        width: 100% !important;
        max-width: none;
        text-align: center;
    }

    .ashrams-magazine__tagline {
        white-space: normal;
        text-align: center;
        text-align-last: center;
    }

    .ashrams-magazine__actions {
        width: 100%;
        max-width: 100%;
        align-items: center;
    }

    .ashrams-magazine__form {
        width: min(680px, 100%);
        justify-content: center;
    }

    .ashrams-magazine__input {
        min-width: 0;
        flex: 1 1 auto;
    }
}

.ashrams-magazine__copy {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: min(32rem, 100%);
}

.ashrams-magazine__title {
    display: block;
    width: 100%;
    font-family: var(--ashrams-sans);
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 0.4rem;
    color: var(--ashrams-text);
}

.ashrams-magazine__brand {
    color: var(--ashrams-terracotta);
    font-weight: 700;
}

.ashrams-magazine__tagline {
    display: block;
    width: 100%;
    font-family: var(--ashrams-sans);
    font-size: clamp(0.72rem, 0.88vw, 0.84rem);
    line-height: 1.35;
    font-weight: 400;
    color: var(--ashrams-muted);
    margin: 0;
    hyphens: none;
    /* Match headline left/right bounds (same as Figma) */
    text-align: justify;
    text-align-last: justify;
    white-space: nowrap;
}

.ashrams-magazine__actions {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

.ashrams-magazine__form {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    --mag-pill-h: 54px;
}

/*
 * Bootstrap Reboot styles load before this sheet but can win on specificity for raw
 * `input`/`button`. Force one pill curve for both magazine controls (must match visually).
 */
body.ashrams-home .ashrams-magazine__form input[type='email'].ashrams-magazine__input,
body.ashrams-home .ashrams-magazine__form button[type='button'].ashrams-magazine__submit {
    border-radius: 9999px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.ashrams-magazine__input {
    flex: 1 1 12rem;
    min-width: min(280px, 100%);
    box-sizing: border-box;
    height: var(--mag-pill-h);
    margin: 0;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.88);
    padding: 0 1.4rem;
    font-family: var(--ashrams-sans);
    font-size: 0.9rem;
    line-height: normal;
    color: var(--ashrams-text);
    outline: none;
}

.ashrams-magazine__input::placeholder {
    color: #8a8a8a;
}

.ashrams-magazine__submit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: var(--mag-pill-h);
    margin: 0;
    padding: 0 2rem;
    border: none;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
    background: var(--ashrams-terracotta);
    color: #fff;
    font-family: var(--ashrams-sans);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ashrams-magazine__submit:hover {
    background: var(--ashrams-terracotta-light);
}

.ashrams-magazine__msg {
    display: none;
    margin-top: 0.5rem;
    font-size: 0.75rem;
}

.ashrams-magazine__msg--error {
    color: #c44a3a;
}

.ashrams-magazine__msg--success {
    color: #2d6a4f;
}

@media (max-width: 999px) {
    .ashrams-magazine {
        border-radius: 28px;
        height: auto;
        min-height: 240px;
        margin: 2rem 0 3rem;
    }

    .ashrams-magazine__inner {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        padding: 1.75rem 1.25rem 1.5rem;
        height: auto;
        gap: 0.85rem;
    }

    .ashrams-magazine__copy {
        width: auto !important;
        max-width: none;
    }

    .ashrams-magazine__tagline {
        white-space: normal;
        text-align: left;
        text-align-last: auto;
    }

    .ashrams-magazine__actions {
        max-width: none;
        width: 100%;
    }

    /* Figma: email + Subscribe stay on one row on tablet too */
    .ashrams-magazine__form {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .ashrams-magazine__input {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        height: var(--mag-pill-h);
    }

    .ashrams-magazine__submit {
        flex: 0 0 auto;
        width: auto;
    }
}

/* Phone — Figma: centered copy, shadow card, inline subscribe row */
@media (max-width: 480px) {
    .ashrams-magazine {
        border-radius: 32px;
        height: 224px;
        min-height: 224px;
        margin: 1.25rem 0 2.25rem;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
    }

    /* Crop the source image so bottom-left vendor mark is out of frame */
    .ashrams-magazine__bg {
        background-size: 112% auto;
        background-position: center 44%;
    }

    .ashrams-magazine__inner {
        align-items: center;
        text-align: center;
        padding: 1rem 0.95rem 0.75rem;
        gap: 0.55rem;
    }

    .ashrams-magazine__copy {
        width: 100% !important;
    }

    .ashrams-magazine__title {
        font-size: 1.125rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-bottom: 0.35rem;
    }

    .ashrams-magazine__tagline {
        text-align: center;
        text-align-last: center;
        font-size: 0.75rem;
        line-height: 1.45;
        max-width: 17.5rem;
        margin-inline: auto;
        color: #6b6b6b;
    }

    .ashrams-magazine__form {
        --mag-pill-h: 44px;
        gap: 8px;
    }

    .ashrams-magazine__input {
        flex: 1 1 0;
        padding: 0 1rem;
        font-size: 0.8125rem;
        background: rgba(255, 255, 255, 0.92);
    }

    .ashrams-magazine__submit {
        padding: 0 1.15rem;
        font-size: 0.8125rem;
        box-shadow: 0 4px 12px rgba(154, 79, 58, 0.32);
    }
}

/* Footer — tagline + nav overlaid on mist forest (Figma) */
.ashrams-footer {
    position: relative;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: var(--ashrams-text);
    background: #ffffff;
    overflow: hidden;
}

.ashrams-footer__forest {
    position: relative;
    width: 100%;
    min-height: clamp(40rem, 52vw, 50rem);
    padding: clamp(1rem, 1.6vw, 1.35rem) 0 clamp(4rem, 7vw, 5.25rem);
    box-sizing: border-box;
    overflow-x: clip;
    overflow-y: hidden;
}

.ashrams-footer__forest-bg {
    position: absolute;
    top: 0;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 108%;
    min-width: 100%;
    height: 112%;
    max-width: none;
    transform: translateX(-50%) translateY(8%);
    object-fit: cover;
    object-position: center 50%;
    background-color: #ffffff;
    z-index: 0;
    pointer-events: none;
}

/* White band for nav legibility only — image already has mist; keep overlay light vs Figma */
.ashrams-footer__forest::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 38%;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #ffffff 28%,
        rgba(255, 255, 255, 0.72) 48%,
        rgba(255, 255, 255, 0.28) 62%,
        transparent 100%
    );
}

/* No full-width bottom wash — it sat under Social icons; © strip uses .ashrams-footer__legal::before */
.ashrams-footer__forest::after {
    content: none;
}

.ashrams-footer__content {
    position: relative;
    z-index: 2;
    transform: none;
}

.ashrams-footer__top {
    display: grid;
    grid-template-columns: minmax(10rem, 12.5rem) repeat(3, minmax(0, 1fr)) auto;
    gap: clamp(1.2rem, 4.5vw, 4rem);
    align-items: start;
    margin-top: 0;
    margin-left: clamp(1.25rem, 3.5vw, 2.75rem);
    padding-top: clamp(1.35rem, 2.75vw, 2.5rem);
    box-sizing: border-box;
}

@media (min-width: 1000px) {
    .ashrams-footer__top {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: clamp(1.2rem, 4.5vw, 4rem);
    }

    .ashrams-footer__nav {
        display: flex;
        flex: 1;
        min-width: 0;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        margin-left: auto;
        padding-left: clamp(0.75rem, 2vw, 1.5rem);
        margin-right: clamp(4.5rem, 9vw, 7.625rem);
        box-sizing: border-box;
    }

    /* Gap only between Explore, Places, Practices — not before Socials */
    .ashrams-footer__nav-links {
        display: grid;
        grid-template-columns: repeat(3, max-content);
        column-gap: clamp(2rem, 4.5vw, 4.25rem);
        row-gap: 0;
        align-items: start;
    }

    /* Bit closer to Practices than margin-left: auto — Explore / Places / Practices unchanged */
    .ashrams-footer__nav > .ashrams-footer__col--social {
        flex: 0 0 auto;
        margin-left: clamp(2rem, 7vw, 5.5rem);
        position: relative;
        left: 30px;
    }
}

.ashrams-footer__tagline {
    display: flex;
    flex-direction: column;
    gap: clamp(0.3rem, 0.65vw, 0.55rem);
    font-family: var(--ashrams-sans);
    font-size: clamp(1.9rem, 2.75vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
    color: rgba(0, 0, 0, 0.33);
    padding-top: 0;
}

.ashrams-footer__tagline-word--last {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
}

.ashrams-footer__tagline-dot {
    display: inline-block;
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: #c67e61;
    flex-shrink: 0;
    transform: translateY(0.06em);
}

.ashrams-footer__col h4,
.ashrams-footer__col--social h4 {
    font-family: var(--ashrams-sans);
    font-size: 0.9375rem;
    margin: 0 0 0.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: #111111;
}

.ashrams-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Explore, Places, Practices — tighter line spacing (not Socials) */
.ashrams-footer__col:not(.ashrams-footer__col--social) h4 {
    margin-bottom: 0.15rem;
}

.ashrams-footer__col:not(.ashrams-footer__col--social) ul {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ashrams-footer__col:not(.ashrams-footer__col--social) ul li + li {
    margin-top: 0;
}

.ashrams-footer__col a {
    color: #666666;
    text-decoration: none;
    font-family: var(--ashrams-sans);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 2.05;
}

.ashrams-footer__col:not(.ashrams-footer__col--social) a {
    line-height: 0.95;
}

.ashrams-footer__col a:hover {
    color: var(--ashrams-terracotta);
}

.ashrams-footer__col--social {
    min-width: 9rem;
}

.ashrams-footer__socials {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: nowrap;
}

/* Figma SVGs — homepage/footer/icon-*.svg */
.ashrams-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.ashrams-footer__social-link:hover {
    opacity: 0.72;
}

.ashrams-footer__social-link img {
    display: block;
    width: clamp(1.5rem, 2.2vw, 1.75rem);
    height: clamp(1.5rem, 2.2vw, 1.75rem);
    max-width: none;
}

@media (min-width: 1100px) {
    .ashrams-footer__nav-links {
        column-gap: clamp(2.25rem, 5vw, 4.75rem);
    }

    /* White band covers link rows; forest treeline sits below nav block */
    .ashrams-footer__forest::before {
        height: 36%;
        background: linear-gradient(
            to bottom,
            #ffffff 0%,
            #ffffff 26%,
            rgba(255, 255, 255, 0.68) 46%,
            rgba(255, 255, 255, 0.22) 60%,
            transparent 100%
        );
    }
}

.ashrams-footer__legal {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 0.75rem 1rem clamp(1.25rem, 2.2vw, 1.875rem);
    background: transparent;
}

/* Light scrim behind © only — keep opacity low so text stays visible on mist */
.ashrams-footer__legal::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(100%, 42rem);
    height: 100%;
    min-height: 2.5rem;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.06) 45%,
        transparent 100%
    );
}

.ashrams-footer__forest .container.cnt-max__1320 {
    position: relative;
    z-index: 2;
}

.ashrams-footer__bottom {
    position: relative;
    z-index: 1;
    font-family: var(--ashrams-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.01em;
    color: #4d4d4d;
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.92),
        0 1px 2px rgba(255, 255, 255, 0.75);
}

.ashrams-footer__bottom p {
    margin: 0;
    text-align: center;
}

.ashrams-footer__bottom a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.ashrams-footer__bottom a:hover {
    color: #444444;
}

@media (max-width: 999px) {
    .ashrams-paths,
    .ashrams-split {
        grid-template-columns: 1fr;
    }

    .ashrams-split--reverse .ashrams-split__media,
    .ashrams-split--reverse .ashrams-split__text {
        order: unset;
    }

    .ashrams-stories__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto;
        gap: 10px;
        height: auto !important;
    }

    .ashrams-stories__main {
        grid-column: 1 / -1;
        grid-row: 1;
        height: auto;
        min-height: clamp(14rem, 58vw, 20rem);
        max-height: none;
        border-radius: 20px;
    }

    /* Figma phone: featured + two half tiles (no wide breathwork rail) */
    .ashrams-stories__tile--top {
        display: none;
    }

    .ashrams-stories__tile--bl {
        grid-column: 1;
        grid-row: 2;
    }

    .ashrams-stories__tile--br {
        grid-column: 2;
        grid-row: 2;
    }

    .ashrams-stories__tile--bl,
    .ashrams-stories__tile--br {
        height: auto;
        min-height: clamp(10.5rem, 42vw, 14.375rem);
        max-height: none;
        border-radius: 20px;
    }

    .ashrams-stories__overlay {
        align-items: flex-start;
        text-align: left;
        padding: 1rem 0.85rem;
    }

    .ashrams-section-travellers .ashrams-stories__overlay blockquote {
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 1.28;
        margin-bottom: 0.65rem;
        color: #fafaf9;
    }

    .ashrams-section-travellers .ashrams-stories__overlay cite {
        font-size: 0.5rem;
    }

    .ashrams-stories__quote-mark {
        font-size: 2rem;
        margin-bottom: 0.35rem;
    }

    .ashrams-section-travellers .ashrams-stories__tile .ashrams-stories__tile-copy {
        left: 0.5rem;
        right: auto;
        bottom: 0.65rem;
        max-width: calc(100% - 0.75rem);
        padding-top: 0;
    }

    .ashrams-stats {
        grid-template-columns: 1fr;
    }

    /* Footer — same layout as Figma phone (442px) for all viewports below 1000px */
    .ashrams-footer {
        margin-top: 0;
        padding-top: 0;
    }

    .ashrams-footer__forest {
        min-height: 44rem;
        padding: 0.85rem 0 3rem;
        overflow-x: clip;
        overflow-y: visible;
    }

    .ashrams-footer__content {
        transform: none;
    }

    .ashrams-footer__forest-bg {
        width: 120%;
        height: 110%;
        object-fit: cover;
        object-position: 50% 50%;
        transform: translateX(-50%) translateY(6%);
    }

    .ashrams-footer__forest::before {
        height: 38%;
        background: linear-gradient(
            to bottom,
            #ffffff 0%,
            #ffffff 26%,
            rgba(255, 255, 255, 0.38) 44%,
            rgba(255, 255, 255, 0.08) 62%,
            transparent 100%
        );
    }

    .ashrams-footer__legal::before {
        width: min(100%, 36rem);
        min-height: 2.25rem;
        background: linear-gradient(
            to top,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.05) 40%,
            transparent 100%
        );
    }

    .ashrams-footer__top {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "explore places practices"
            "tagline socials socials";
        column-gap: clamp(1.35rem, 4vw, 2rem);
        row-gap: 1.25rem;
        margin-top: 0;
    }

    .ashrams-footer__nav,
    .ashrams-footer__nav-links {
        display: contents;
    }

    .ashrams-footer__top > .ashrams-footer__tagline {
        grid-area: tagline;
        grid-column: auto;
        margin-top: 0.5rem;
        font-size: clamp(2.25rem, 8vw, 2.9rem);
        line-height: 1.12;
        gap: clamp(0.35rem, 1.5vw, 0.65rem);
        color: rgba(0, 0, 0, 0.33);
    }

    .ashrams-footer__top .ashrams-footer__col:nth-child(2) { grid-area: explore; }
    .ashrams-footer__top .ashrams-footer__col:nth-child(3) { grid-area: places; }
    .ashrams-footer__top .ashrams-footer__col:nth-child(4) { grid-area: practices; }

    .ashrams-footer__top .ashrams-footer__col:nth-child(2),
    .ashrams-footer__top .ashrams-footer__col:nth-child(3),
    .ashrams-footer__top .ashrams-footer__col:nth-child(4),
    .ashrams-footer__top .ashrams-footer__col--social {
        padding-left: clamp(0.5rem, 1.5vw, 1rem);
        box-sizing: border-box;
    }

    .ashrams-footer__top .ashrams-footer__col--social {
        grid-area: socials;
        min-width: 0;
        justify-self: end;
        align-self: end;
        position: relative;
        left: 15px;
        margin-left: 0;
        margin-right: clamp(0.5rem, 3vw, 1.35rem);
    }

    .ashrams-footer__col h4,
    .ashrams-footer__col--social h4 {
        margin: 0 0 0.4rem;
        font-size: 1rem;
        line-height: 1.2;
    }

    .ashrams-footer__col:not(.ashrams-footer__col--social) ul {
        gap: 0;
    }

    .ashrams-footer__col:not(.ashrams-footer__col--social) ul li + li {
        margin-top: 0;
    }

    .ashrams-footer__col a {
        font-size: 0.76rem;
        line-height: 1.35;
        color: #8a93a4;
    }

    .ashrams-footer__col:not(.ashrams-footer__col--social) h4 {
        margin-bottom: 0.12rem;
    }

    .ashrams-footer__col:not(.ashrams-footer__col--social) a {
        line-height: 0.92;
    }

    .ashrams-footer__col--social h4 {
        display: none;
    }

    .ashrams-footer__socials {
        gap: 1rem;
    }

    .ashrams-footer__legal {
        padding: 0.65rem 1rem 1rem;
    }

    .ashrams-footer__bottom {
        font-size: 0.56rem;
        font-weight: 400;
        letter-spacing: 0;
        color: #525252;
    }

    .ashrams-footer__bottom a {
        text-decoration: none;
    }
}

@media (max-width: 480px) {
    .ashrams-place-card__body p {
        max-width: none;
    }
}

/* ==================== TEMPORARY DEBUG — VERTICAL GAP LINES ====================
   Red vertical lines mark the content edge.
   The gap between viewport edge and these lines = left/right padding.
   Remove this block when done.
*/
body.ashrams-home .container.cnt-max__1320,
body.ashrams-place-page .container.cnt-max__1320,
body.ashrams-checkout-page .ashrams-checkout__shell.container.cnt-max__1320 {
    position: relative;
}

/* Left red vertical line */
body.ashrams-home .container.cnt-max__1320::before,
body.ashrams-place-page .container.cnt-max__1320::before,
body.ashrams-checkout-page .ashrams-checkout__shell.container.cnt-max__1320::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: repeating-linear-gradient(
        to bottom,
        #ef4444 0px,
        #ef4444 8px,
        transparent 8px,
        transparent 16px
    );
    z-index: 9999;
    pointer-events: none;
}

/* Right red vertical line */
body.ashrams-home .container.cnt-max__1320::after,
body.ashrams-place-page .container.cnt-max__1320::after,
body.ashrams-checkout-page .ashrams-checkout__shell.container.cnt-max__1320::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: repeating-linear-gradient(
        to bottom,
        #ef4444 0px,
        #ef4444 8px,
        transparent 8px,
        transparent 16px
    );
    z-index: 9999;
    pointer-events: none;
}

/* Small label showing current padding value (top-left corner) */
body.ashrams-home::before,
body.ashrams-place-page::before,
body.ashrams-checkout-page::before {
    content: "Left/Right gap = " var(--ashrams-shell-pad);
    position: fixed;
    top: 8px;
    left: 8px;
    background: #ef4444;
    color: white;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    z-index: 10000;
    font-family: monospace;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    pointer-events: none;
}
/* ============================================================ */