/* ===========================================================
   MOBILE.CSS — Shrimad Rajchandra Ashram, USA
   ===========================================================
   Drop-in mobile stylesheet. Load AFTER styles.css.

   Scope: kicks in at ≤480px (iPhone range). Built for iPhone
   17 Pro Max (440pt wide) but graceful from 360–480.

   Philosophy:
   - Honor the desktop visual language: maroon + cream + STIX
     Two Text serif. Same vocabulary, reflowed for portrait.
   - Photos: full-width or contained, never weirdly cropped.
   - Type: 28–34pt display, 16–17pt lead, 14–15pt body. Bigger
     than the existing mobile pass, more confident.
   - Cards: edge-to-edge on phone with the cream backing behind
     them, not arbitrary inset gutters that waste width.
   - Density: more air. The desktop site is generous; mobile
     should breathe the same way, not collapse into a wall.
   - Tap targets: 44pt minimum everywhere.
   - One column. Always.
   =========================================================== */


/* ===========================================================
   1. FOUNDATION — variables & base
   =========================================================== */
@media (max-width: 480px) {
  :root {
    --gutter: 22px;
    --nav-h: 60px;
    --announce-h: auto;
    --radius: 18px;
    --radius-sm: 12px;
  }

  body {
    font-size: 16px;
    line-height: 1.55;
  }

  .container { padding: 0 22px; }

  /* All sections breathe the same on mobile */
  .section,
  .inspiration,
  .impact,
  .programs,
  .narrative,
  .two-col,
  .testimonial,
  .intro-band,
  .offerings,
  .ttc-card,
  .testimonial-section,
  .upcoming,
  .wellness,
  .meditation-breath,
  .space-grounds,
  .spaces-discover,
  .time-section { padding: 52px 0; }

  /* Hide desktop-only chrome */
  .nav-links { display: none !important; }
}


/* ===========================================================
   2. TYPOGRAPHY SYSTEM
   =========================================================== */
@media (max-width: 480px) {
  .eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand);
    line-height: 1.4;
  }

  /* Display headlines — confident but not screamy */
  .display { line-height: 1.12; letter-spacing: -0.01em; }
  h1.display { font-size: 38px; line-height: 1.08; }
  h2.display { font-size: 30px; line-height: 1.12; }
  h3.display { font-size: 22px; line-height: 1.25; }

  .lead {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    max-width: 100%;
  }

  /* Section heads tighten */
  .section-head { gap: 14px; max-width: 100%; }
}


/* ===========================================================
   3. HEADER — compact sticky bar + announcement chip
   =========================================================== */
@media (max-width: 480px) {
  .site-header { background: var(--cream); }

  /* Announcement — single tight line of maroon, plus subtle "Register" pill */
  .announce {
    grid-template-columns: 1fr;
    height: auto;
  }
  .announce__promo {
    padding: 10px 16px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
  }
  .announce__promo p {
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: 0.2px;
    margin: 0;
    flex: 1;
  }
  .btn--register {
    height: 26px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    flex-shrink: 0;
    line-height: 1;
  }
  .announce__links { display: none; }

  /* Primary nav row */
  .primary-nav {
    height: 60px;
    padding: 0 18px;
    background: var(--cream);
    border-bottom: 1px solid rgba(94, 42, 41, 0.08);
  }
  .brand-logo { height: 38px; }

  .nav-controls { gap: 14px; }
  .nav-search { width: 22px; height: 22px; }
  .nav-search svg { width: 18px; height: 18px; }

  .nav-hamburger { padding: 8px; gap: 4px; width: 36px; }
  .nav-hamburger span { width: 22px; height: 1.8px; }

  .site-header.is-scrolled .primary-nav { height: 56px; }
  .site-header.is-scrolled .brand-logo { height: 34px; }
}


/* QC Courses r34: collapse drawer sub-menus on iPad portrait too (was phone-only),
   so the drawer stays compact and 'Courses & Workshops' is reachable (tap to expand). */
@media (min-width: 481px) and (max-width: 1023px) {
  .menu-drawer__sub { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
  .menu-drawer__item--top.is-open .menu-drawer__sub { max-height: 600px; }
  .menu-drawer__item--top > a[data-group]::after { content: "+"; font-size: 22px; line-height: 1; margin-left: auto; }
  .menu-drawer__item--top.is-open > a[data-group]::after { content: "\2212"; }
  .menu-drawer__list > .menu-drawer__item--top > a[data-group] { display: flex; align-items: center; }
}

/* ===========================================================
   4. MOBILE DRAWER — refined
   =========================================================== */
@media (max-width: 480px) {
  .menu-drawer {
    width: 100%;
    padding: 22px 24px 36px;
  }
  .menu-drawer__head { margin-bottom: 24px; }
  .menu-drawer__close { width: 40px; height: 40px; }

  /* Logo replacing the old "SRA, USA" text in the drawer header. */
  .menu-drawer__brand { display: flex; align-items: center; height: 38px; }
  .menu-drawer__brand img { height: 100%; width: auto; }

  .menu-drawer ul { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; }
  .menu-drawer__list > .menu-drawer__item--top > a {
    padding: 16px 0;
    font-size: 22px;
    line-height: 1.2;
    font-family: var(--serif);
    color: var(--brand);
    border-bottom: 1px solid rgba(94, 42, 41, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .menu-drawer__list > .menu-drawer__item--top > a::after {
    content: "→";
    font-family: var(--sans);
    font-size: 18px;
    color: rgba(94, 42, 41, 0.45);
    transition: transform 0.2s var(--ease-out);
  }
  .menu-drawer__item--top > a[data-group]::after { content: "+"; font-size: 22px; line-height: 1; }
  .menu-drawer__item--top.is-open > a[data-group]::after { content: "−"; }
  .menu-drawer__list > .menu-drawer__item--top > a:active::after { transform: translateX(3px); }

  /* Sub-pages: indented, smaller serif so they read as children of the parent. */
  .menu-drawer__sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .menu-drawer__item--top.is-open .menu-drawer__sub { max-height: 600px; }
  /* Specificity override: the base `.menu-drawer ul li a` rule in styles.css
     sets display:block + serif 26px. Prefix the sub-item rule so it wins. */
  .menu-drawer ul.menu-drawer__sub li a {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0 11px 18px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    font-family: var(--sans);
    color: var(--brand);
    border-bottom: 1px solid rgba(94, 42, 41, 0.06);
  }
  .menu-drawer ul.menu-drawer__sub li:last-child a { border-bottom: 1px solid rgba(94, 42, 41, 0.08); }
  .menu-drawer ul.menu-drawer__sub li a::after {
    content: "→";
    font-family: var(--sans);
    font-size: 14px;
    color: rgba(94, 42, 41, 0.45);
  }

  .menu-drawer__foot {
    padding-top: 28px;
    font-size: 14px;
    line-height: 1.55;
  }
  .menu-drawer__foot a {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 600;
  }

  /* Search overlay */
  .search-overlay { padding-top: 14vh; }
  .search-overlay__close { top: 18px; right: 18px; }
  .search-form { width: 88%; padding-bottom: 12px; }
  .search-form svg { width: 22px; height: 22px; }
  .search-form input { font-size: 24px; padding: 4px 0; }
  .search-suggest { width: 88%; margin-top: 20px; gap: 8px; }
  .search-suggest span { font-size: 11px; }
  .search-suggest a { padding: 7px 14px; font-size: 13px; }
}


/* ===========================================================
   5. BUTTONS — comfortable tap targets
   =========================================================== */
@media (max-width: 480px) {
  .btn {
    height: 52px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 500;
    gap: 10px;
  }
  .btn .btn-icon { width: 22px; height: 22px; }
  .btn .btn-icon svg { width: 11px; height: 11px; }

  .carousel-btn {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(94, 42, 41, 0.25);
  }
}


/* ===========================================================
   6. HOMEPAGE — HERO
   ===========================================================
   Cinematic full-bleed hero. Tall portrait crop, headline
   anchored toward the bottom-third (not center) for editorial
   feel. Kicker is small all-caps with a hairline.
   =========================================================== */
@media (max-width: 480px) {
  .hero {
    height: 88vh;
    min-height: 600px;
    max-height: 760px;
  }
  .hero__image { background-position: center 30%; }
  .hero__veil {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 60%, rgba(20,10,10,0.55) 100%);
  }
  .hero__inner {
    padding: 0 24px 110px;
    justify-content: flex-end;
    text-align: left;
    align-items: flex-start;
  }
  .hero__kicker {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 22px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    position: relative;
    padding-left: 28px;
    max-width: 260px;
    line-height: 1.5;
  }
  .hero__kicker::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 20px;
    height: 1px;
    background: #ffffff;
  }
  .hero__title {
    font-size: 44px;
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
  }

  .hero__scroll {
    bottom: 32px;
    left: 24px;
    transform: none;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .hero__scroll span { font-size: 10px; letter-spacing: 0.22em; }
  .hero__scroll-line {
    width: 32px;
    height: 1px;
  }
  .hero__scroll-line::before { transform-origin: left; animation-name: scrollHintH; }
  @keyframes scrollHintH {
    0% { transform: scaleX(0); transform-origin: left; }
    50% { transform: scaleX(1); transform-origin: left; }
    51% { transform: scaleX(1); transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
  }
}


/* ===========================================================
   7. HOMEPAGE — INSPIRATION CARD
   ===========================================================
   Photo as a clear hero-band on top (no awkward absolute
   overlay crop). Body sits below on cream with a clear visual
   hierarchy: eyebrow → headline → two quote cards stacked.
   =========================================================== */
@media (max-width: 480px) {
  .inspiration { padding: 40px 0; }
  .inspiration .container { padding: 0 16px; }

  /* Phone breakpoint inherits the ≤1079 stack pattern (display: contents on
     body + order on each child). Only tweak spacing/typography here. */
  .inspiration__card {
    padding: 24px 18px 28px;
    gap: 16px;
    border-radius: 18px;
    box-shadow: 0 20px 50px -28px rgba(94, 42, 41, 0.25);
  }
  .inspiration__card h2 {
    font-size: 28px;
    line-height: 1.15;
  }
  .inspiration__card h2 em {
    color: var(--brand);
    font-style: italic;
  }
  .inspiration__quote {
    padding: 18px 20px;
    font-size: 14.5px;
    line-height: 1.6;
    border: 1px solid rgba(94, 42, 41, 0.08);
  }
  .inspiration__quote strong {
    /* Inline bold within the paragraph — NOT a standalone heading. */
    display: inline;
    font-family: inherit;
    font-weight: 600;
    font-size: inherit;
    letter-spacing: 0;
    color: var(--ink);
  }
  .inspiration__card .btn--filled {
    height: 44px;
    padding: 0 22px;
    font-size: 13.5px;
  }
}


/* ===========================================================
   8. HOMEPAGE — VISION + PILLARS
   =========================================================== */
@media (max-width: 480px) {
  .vision-grid { gap: 28px; }
  .vision-grid .section-head { gap: 16px; }

  .pillars {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 18px;
    margin-top: 40px;
  }
  .pillar { padding-top: 14px; }
  .pillar__rule {
    width: 32px;
    height: 3px;
    margin-bottom: 16px;
    background: var(--gold);
  }
  .pillar h4 {
    font-size: 20px;
    line-height: 1.25;
    margin: 0 0 6px;
    font-family: var(--serif);
    font-weight: 500;
    color: var(--brand);
  }
  .pillar p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-70);
  }

  /* Lake band */
  .fullbleed-image { height: 280px; }
}


/* ===========================================================
   9. HOMEPAGE — PRACTICE CAROUSEL
   ===========================================================
   Horizontal swipe with peek of next card. Full-width-feel.
   =========================================================== */
@media (max-width: 480px) {
  .practice-head {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 32px;
  }
  .practice-head .btn { align-self: flex-start; }

  /* Allow native horizontal scroll on touch; JS-driven transform still works */
  .carousel {
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .carousel__track {
    gap: 14px;
    padding-right: 0;
  }
  .activity-card {
    /* Figma mobile shows ~1.4 cards visible (peek of next ~40%).
       Was 82% (small peek); tightened to 72% to match Figma's larger peek. */
    flex: 0 0 72%;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px -20px rgba(94, 42, 41, 0.2);
  }
  .activity-card__image {
    aspect-ratio: 4 / 3;
  }
  .activity-card__body {
    padding: 22px 22px 26px;
    gap: 10px;
  }
  .activity-card__body h3 {
    font-size: 22px;
    line-height: 1.25;
    margin: 0;
    font-family: var(--serif);
    color: var(--accent);
  }
  .activity-card__body p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    margin: 0;
  }
  .activity-card__link {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--brand);
    letter-spacing: 0.04em;
  }

  .carousel__controls {
    margin-top: 24px;
    justify-content: center;
    gap: 14px;
  }
}


/* ===========================================================
   10. HOMEPAGE — EVENT CAROUSEL
   =========================================================== */
@media (max-width: 480px) {
  .programs-head {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .programs-head .btn { align-self: flex-start; }

  .event-stage { margin-top: 36px; }
  .event-stage__viewport { gap: 16px; }

  .event-card {
    flex: 0 0 84%;
    min-height: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 36px -22px rgba(94, 42, 41, 0.3);
  }
  .event-card__image {
    aspect-ratio: 16 / 11;
    min-height: 0;
  }
  .event-card__body {
    padding: 26px 22px 28px;
    gap: 16px;
  }
  .event-card__tags { gap: 8px; }
  .event-card__tag {
    padding: 5px 14px;
    font-size: 11px;
    letter-spacing: 0.04em;
  }
  .event-card h3 {
    font-size: 22px;
    line-height: 1.2;
    margin: 0;
  }
  .event-card__lead {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
  }
  .event-card__meta {
    grid-template-columns: 60px 1fr;
    row-gap: 6px;
    column-gap: 12px;
  }
  .event-card__meta dt { font-size: 10.5px; letter-spacing: 0.1em; }
  .event-card__meta dd { font-size: 13px; }

  .event-card__cta {
    align-self: flex-start;
    padding: 11px 22px;
    font-size: 13px;
    margin-top: 6px;
  }

  .event-stage__nav { margin-top: 24px; gap: 10px; }
  .event-stage__dot { width: 5px; height: 5px; }
  .event-stage__dot.is-active { width: 18px; }
}


/* ===========================================================
   11. HOMEPAGE — QUOTE BREAK + IMPACT
   =========================================================== */
@media (max-width: 480px) {
  .quote-break {
    padding: 72px 24px;
  }
  .quote-break blockquote {
    font-size: 23px;
    line-height: 1.32;
  }
  .quote-break cite {
    margin-top: 22px;
    font-size: 14px;
    letter-spacing: 0.06em;
  }

  .impact { padding: 56px 0; }
  .impact-grid { gap: 32px; grid-template-columns: 1fr; }
  .impact__copy { gap: 18px; max-width: 100%; }
  .impact__lead { font-size: 16px; line-height: 1.65; }

  .impact-list { gap: 12px; margin: 8px 0 4px; }
  .impact-list li {
    font-size: 19px;
    line-height: 1.3;
    padding: 6px 0 6px 18px;
    font-family: var(--serif);
    color: var(--ink);
  }
  .impact-list li::before {
    width: 3px;
    height: 32px;
    background: var(--gold);
  }

  .impact__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    margin: 8px 0 0;
    box-shadow: 0 18px 50px -28px rgba(94, 42, 41, 0.35);
  }
}


/* ===========================================================
   12. INNER PAGES — SHARED HERO
   ===========================================================
   Applied to wisdom / meditation / yoga / sound / courses.
   Same cinematic hero as home, scaled and re-padded.
   =========================================================== */
@media (max-width: 480px) {
  .inner-hero {
    min-height: 0;
    height: 76vh;
    max-height: 640px;
  }
  .inner-hero__inner {
    min-height: 0;
    height: 100%;
    padding: 0 24px 36px;
    gap: 14px;
  }
  .inner-hero__veil {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.6) 100%);
  }
  .inner-hero__kicker {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    max-width: 260px;
  }
  .inner-hero__title {
    font-size: 44px;
    line-height: 1.04;
    margin: 0;
    letter-spacing: -0.01em;
  }
  .inner-hero__cta {
    position: static;
    margin-top: 18px;
    align-self: flex-start;
    height: 46px;
    padding: 0 8px 0 20px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--brand);
  }
  .inner-hero__cta::after { width: 30px; height: 30px; font-size: 13px; }
}


/* ===========================================================
   13. INNER PAGES — INTRO BAND
   =========================================================== */
@media (max-width: 480px) {
  .intro-band { padding: 56px 0; }
  .intro-band__grid {
    /* Per design feedback: copy ABOVE the video on mobile, not below.
       Flex column-reverse lets us keep the desktop DOM order (media,
       copy) while flipping the visual order on phones. Children get
       width:100% because flex items default to auto-content sizing —
       without it the .intro-band__media (which only has aspect-ratio
       + background) collapses to width:0. */
    grid-template-columns: 1fr;
    display: flex !important;
    flex-direction: column-reverse;
    gap: 28px;
    padding: 0 22px;
  }
  .intro-band__grid > * { width: 100%; }
  .intro-band__media {
    aspect-ratio: 4 / 3;
    /* Per design: remove rounded corners on mobile videos. */
    border-radius: 0;
    box-shadow: 0 18px 40px -24px rgba(94, 42, 41, 0.32);
  }
  .intro-band__media .play { width: 56px; height: 56px; }
  .intro-band__media .play::after {
    border-width: 9px 0 9px 14px;
  }

  .intro-band__copy {
    gap: 16px;
    max-width: 100%;
  }
  .intro-band__copy h2 {
    font-size: 28px;
    line-height: 1.15;
    margin: 0;
  }
  .intro-band__copy p {
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
  }

  /* Bullets: per design feedback, each row gets a HORIZONTAL divider
     above it (not a vertical accent bar on the left). */
  .intro-band__bullets li {
    font-size: 15px;
    line-height: 1.5;
    padding: 14px 0;
    border-top: 1px solid rgba(94, 42, 41, 0.18);
  }
  .intro-band__bullets li:last-child { border-bottom: 1px solid rgba(94, 42, 41, 0.18); }
  .intro-band__bullets li::before { content: none; }
}


/* ===========================================================
   14. INNER PAGES — OFFERINGS
   On the wisdom page (and other inner pages) the design team flagged
   that sections BELOW Reset Your Inner Compass should be full-bleed
   on mobile — no side margins around the cards. We remove the outer
   .offerings__grid horizontal padding and let the cards extend edge
   to edge; inner card padding still keeps text comfortable.
   =========================================================== */
@media (max-width: 480px) {
  .offerings { padding: 56px 0; }
  .offerings__head {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 22px;
    margin-bottom: 32px;
  }
  .offerings__title { font-size: 30px; line-height: 1.1; }
  .offerings__intro { font-size: 15px; line-height: 1.65; }

  .offerings__grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }
  .offer-card {
    padding: 26px 22px;
    border-radius: 16px;
    min-height: 0;
    gap: 14px;
    background: rgba(240, 234, 222, 0.7);
  }
  .offer-card__icon { width: 56px; height: 56px; margin-bottom: 12px; }
  .offer-card h3 {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
  }
  .offer-card__kicker {
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
  }
  .offer-card p { font-size: 15px; line-height: 1.6; }
  .offer-card__tags { font-size: 14px; }
}


/* ===========================================================
   15. INNER PAGES — TTC CARD (Yoga, Sound)
   =========================================================== */
@media (max-width: 480px) {
  .ttc-card { padding: 60px 0; }
  .ttc-card__inner {
    padding: 0 22px;
    gap: 18px;
    max-width: 100%;
  }
  .ttc-card__bg::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.62) 100%);
  }
  .ttc-card h2 {
    font-size: 30px;
    line-height: 1.1;
    max-width: 100%;
  }
  .ttc-card__kicker { font-size: 11px; letter-spacing: 0.16em; }
  .ttc-card p { font-size: 14.5px; line-height: 1.65; }

  .ttc-card__chips { gap: 8px; margin-top: 4px; }
  .ttc-card__chip { padding: 7px 14px; font-size: 12.5px; }

  .ttc-card__creds {
    gap: 28px;
    margin-top: 8px;
    flex-direction: column;
  }
  .ttc-card__creds h5 { font-size: 12px; margin-bottom: 10px; }
  .ttc-card__badges { gap: 12px; }
  .ttc-card__badge {
    width: 56px; height: 56px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .ttc-card__explore {
    margin-top: 8px;
    height: 46px;
    padding: 0 8px 0 20px;
    font-size: 13px;
  }
  .ttc-card__explore::after { width: 30px; height: 30px; }
}


/* ===========================================================
   16. INNER PAGES — MAROON QUOTE / GOLD QUOTE
   =========================================================== */
@media (max-width: 480px) {
  .maroon-quote { padding: 64px 24px; }
  .maroon-quote blockquote {
    font-size: 22px;
    line-height: 1.3;
  }
  .maroon-quote cite {
    margin-top: 24px;
    font-size: 12px;
    letter-spacing: 0.18em;
  }

  .gold-quote { padding: 56px 22px; }
  .gold-quote__inner { gap: 20px; }
  .gold-quote__primary { font-size: 18px; line-height: 1.5; }
  .gold-quote__attribution {
    font-size: 14px;
    letter-spacing: 0.1em;
  }
}


/* ===========================================================
   17. INNER PAGES — TESTIMONIAL / UPCOMING / WELLNESS
   =========================================================== */
@media (max-width: 480px) {
  .testimonial-section { padding: 56px 0; }
  .testimonial-section__title {
    font-size: 28px;
    margin-bottom: 32px;
  }
  /* Full-bleed testimonial on mobile (per design feedback). */
  .testimonial-card-wrap { padding: 0; }
  .testimonial-card {
    padding: 36px 24px;
    border-radius: 0;
    text-align: left;
  }
  .testimonial-card blockquote {
    font-size: 18px;
    line-height: 1.5;
  }
  .testimonial-card cite {
    margin-top: 24px;
    font-size: 13px;
  }

  .upcoming { padding: 56px 0; }
  .upcoming__title {
    font-size: 28px;
    margin-bottom: 32px;
  }
  /* Per design feedback: ONE event card visible at a time on mobile,
     swipe left/right to see the others. Implemented as a horizontal
     scroll-snap rail; the existing carousel-btn nav buttons below
     just sit there for now (we can wire them later). */
  .upcoming__grid {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    gap: 16px;
    padding: 0 22px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .upcoming__grid::-webkit-scrollbar { display: none; }
  .upcoming-card {
    flex: 0 0 calc(100% - 44px);
    scroll-snap-align: center;
    border-radius: 0;
    background: rgba(240, 234, 222, 0.7);
  }
  .upcoming-card__image { aspect-ratio: 16 / 10; }
  .upcoming-card__chips { left: 14px; bottom: 14px; gap: 6px; }
  .upcoming-card__chip { padding: 5px 12px; font-size: 11.5px; }
  .upcoming-card__body { padding: 22px 22px 24px; gap: 10px; }
  .upcoming-card__date { font-size: 12px; letter-spacing: 0.06em; }
  .upcoming-card__title {
    font-size: 19px;
    line-height: 1.25;
    font-weight: 700;
  }
  .upcoming-card p { font-size: 14px; line-height: 1.55; }
  .upcoming-card__cta {
    margin-top: 12px;
    padding: 13px 0;
    font-size: 14px;
    font-weight: 500;
  }

  /* Wellness pillars (Courses) */
  .wellness { padding: 60px 0; }
  .wellness__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 22px;
  }
  .wellness__copy h2 {
    font-size: 30px;
    line-height: 1.1;
  }
  .wellness__copy p {
    font-size: 14.5px;
    line-height: 1.65;
  }
  .pillar-row {
    padding: 16px 18px;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    border-radius: 12px;
  }
  .pillar-row__icon { width: 48px; height: 48px; }
  .pillar-row__copy h4 { font-size: 16px; margin-bottom: 4px; }
  .pillar-row__copy p { font-size: 13.5px; line-height: 1.5; }
}


/* ===========================================================
   18. WISDOM — page-specific stack + video duo
   =========================================================== */
@media (max-width: 480px) {
  /* Wisdom Offerings stack: full-bleed cards on mobile per design. */
  .wisdom-stack {
    padding: 0;
    gap: 0;
  }
  .wisdom-stack__title {
    font-size: 28px;
    margin-bottom: 18px;
  }
  .wisdom-block {
    padding: 30px 22px;
    gap: 22px;
    border-radius: 0;
    grid-template-columns: 1fr;
    background: rgba(240, 234, 222, 0.7);
  }
  .wisdom-block--reverse > :first-child { order: 0; }
  .wisdom-block__copy { gap: 12px; }
  .wisdom-block__copy .icon { width: 60px; height: 60px; }
  .wisdom-block__copy h3 {
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
  }
  .wisdom-block__copy p {
    font-size: 15px;
    line-height: 1.7;
  }

  .video-duo {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 18px;
  }
  /* Per design: no rounded corners on mobile videos. */
  .video-thumb { border-radius: 0; aspect-ratio: 16 / 10; }
  .video-thumb::after { width: 52px; height: 52px; background-size: 20px; }

  /* Frosted def (Wisdom satsang) */
  .frosted-def { margin: 32px auto; padding: 0 16px; }
  .frosted-def__inner {
    padding: 28px 22px;
    border-radius: 14px;
  }
  .frosted-def__content h3 {
    font-size: 22px;
    line-height: 1.25;
  }
  .frosted-def__content p { font-size: 14px; line-height: 1.65; }
}


/* ===========================================================
   19. MEDITATION — breath circle
   =========================================================== */
@media (max-width: 480px) {
  .meditation-breath { padding: 60px 0; }
  .meditation-breath__inner {
    padding: 0 22px;
    gap: 36px;
    grid-template-columns: 1fr;
  }
  .meditation-breath__copy {
    max-width: 100%;
    text-align: center;
    align-items: center;
    gap: 14px;
  }
  .meditation-breath__copy h2 {
    font-size: 30px;
    line-height: 1.12;
  }
  .meditation-breath__copy p {
    font-size: 15px;
    line-height: 1.65;
  }

  .breath-circle-wrap {
    width: min(300px, 82%);
  }
  .breath-disk__btn {
    font-size: 12px;
    letter-spacing: 0.05em;
  }
}


/* ===========================================================
   20. INSPIRATION & FOUNDER — page-specific (Round 27 rebuild)
   ===========================================================
   Source of truth for this page on mobile is the ≤768px block
   in styles.css. This file only adds tiny iPhone-SE-width tweaks
   (≤480) on top. Don't re-declare hero positioning, narrative
   layout, or band-image padding here — that lives in styles.css
   so the cascade has ONE place to look. (See CLAUDE.md Phase 10.)
   =========================================================== */
@media (max-width: 480px) {
  /* Slightly tighter narrative h2 + body */
  .narrative__head h2 { font-size: 30px; }
  .narrative__body { font-size: 15.5px; }

  /* Two-col copy h3 tightens slightly */
  .two-col__copy h3 { font-size: 26px; }
  .two-col__copy p { font-size: 15.5px; }
  .section--stack__head h3 { font-size: 26px; }
  .section--stack__head p { font-size: 15.5px; }

  /* Gold quote band — tighter padding on very small screens */
  .gold-quote { padding: 44px 20px; }
  .gold-quote__primary { font-size: 16px; line-height: 1.6; }
  .gold-quote__attribution { font-size: 13px; letter-spacing: 0.14em; }

  /* Continue band — keep side-by-side; shrink padding only */
  .continue-band { padding: 40px 20px; }
  .continue-band h3 { font-size: 22px; line-height: 1.25; margin-bottom: 24px; }
}


/* ===========================================================
   21. EXPLORE THE SPACE — page-specific
   =========================================================== */
@media (max-width: 480px) {
  .space-grounds { padding: 56px 0; }
  .space-grounds__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 22px;
  }
  .space-grounds__copy {
    max-width: 100%;
    gap: 14px;
  }
  .space-grounds__copy h2 {
    font-size: 30px;
    line-height: 1.1;
  }
  .space-grounds__copy p {
    font-size: 15.5px;
    line-height: 1.7;
  }
  .space-grounds__media {
    aspect-ratio: 16 / 11;
    border-radius: 14px;
  }

  .spaces-discover { padding: 56px 0; }
  .spaces-discover__inner {
    padding: 0 22px;
    gap: 28px;
  }
  .spaces-discover__head h2 {
    font-size: 30px;
    line-height: 1.1;
  }
  .spaces-discover__head p {
    font-size: 15.5px;
    line-height: 1.7;
  }
  .spaces-discover__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .spaces-discover__media {
    aspect-ratio: 16 / 11;
    border-radius: 14px;
    order: -1;
  }

  .feature-list { gap: 12px; }
  .feature-row {
    padding: 14px 16px;
    grid-template-columns: 46px 1fr;
    gap: 14px;
    border-radius: 10px;
  }
  .feature-row__icon { width: 46px; height: 46px; }
  .feature-row__icon svg { width: 22px; height: 22px; }
  .feature-row__copy h4 {
    font-size: 16px;
    margin: 0 0 4px;
  }
  .feature-row__copy p {
    font-size: 13px;
    line-height: 1.45;
  }

  /* Time section — banner with photo on top, tiles below */
  .time-section { padding: 56px 0; }
  .time-section__inner { padding: 0 22px; }
  .time-section h2 {
    font-size: 28px;
    line-height: 1.12;
    margin: 0 0 24px;
  }
  .time-banner {
    aspect-ratio: auto;
    min-height: 0;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    background-size: cover;
    background-position: center 35%;
  }
  /* Photo band — portrait crop, no awkward face-cropping */
  .time-banner::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
  }
  .time-banner::after { display: none; }
  .time-banner__tiles {
    position: relative;
    z-index: 1;
    width: 100%;
    background: var(--cream-strong);
    padding: 16px;
    gap: 10px;
    grid-template-columns: 1fr;
  }
  .time-tile {
    background: #fff;
    border-radius: 10px;
    padding: 16px 18px;
    gap: 4px;
  }
  .time-tile h5 {
    font-size: 17px;
    color: var(--brand);
  }
  .time-tile p {
    font-size: 13px;
    line-height: 1.5;
  }

  /* Visit CTA gold strip */
  .visit-cta { padding: 56px 22px; }
  .visit-cta__inner { gap: 20px; }
  .visit-cta h3 {
    font-size: 28px;
    line-height: 1.15;
  }
  .visit-cta p {
    font-size: 15.5px;
    line-height: 1.5;
  }

  /* Peace quote */
  .peace-quote { padding: 56px 24px; }
  .peace-quote__inner {
    font-size: 22px;
    line-height: 1.4;
  }
}


/* ===========================================================
   22. FOOTER
   =========================================================== */
@media (max-width: 767px) {
  .site-footer {
    padding: 56px 0 28px;
  }
  .site-footer__brand {
    margin-bottom: 48px;
    padding: 0 22px;
    text-align: center;
  }
  /* Higher specificity (.site-footer prefix) so the narrower-breakpoint rules
     in styles.css (22/20/18px) don't shrink the heading on small phones. */
  .site-footer .site-footer__brand h2 {
    /* Figma mobile footer 4149:6236: STIX 24px, tracking 1.2px, one line.
       QC Footer-r13 made it UPPERCASE, which renders ~366px wide at 24px —
       wider than the line box on injected-footer pages (.container 22px +
       brand 22px = 44px inset/side; home zeroes the footer container so 22).
       The old vw-scaled size kept the SAME overshoot ratio at every width,
       so it clipped ("…SOUI") at 360–430. Fit-to-worst-case instead: with
       em tracking the text width scales exactly with font-size, and
       measured width/font-size = 366/24 = 15.25 → size the font off the
       narrowest line box (100vw − 88px inset − 6px safety), cap at Figma 24px. */
    font-size: min(24px, calc((100vw - 94px) / 15.25));
    letter-spacing: 0.05em; /* = Figma 1.2px @ 24px, scales with the fluid size */
    line-height: calc(29 / 24);
    text-align: center; /* Figma: heading is centered */
    /* QC Footer-r13: brand heading is ALL-CAPS like desktop (was capitalize). */
    text-transform: uppercase;
    white-space: nowrap;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 18px;
    margin-bottom: 40px;
  }
  .footer-col h5 {
    font-size: 13px;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
  }
  .footer-col ul { gap: 2px; }
  .footer-col a {
    font-size: 15px;
    line-height: 30px;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: center;
    padding-top: 24px;
    font-size: 13px;
  }
  .footer-bottom__legal {
    justify-content: center;
    gap: 10px;
    font-size: 12.5px;
  }
  .footer-bottom__copy { text-align: center; font-size: 12px; }
  .address {
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
  }
}


/* ===========================================================
   23. POLISH — round corners, motion, safe-area
   =========================================================== */
@media (max-width: 480px) {
  /* Honor iOS hardware notches via safe-area-inset-top only.
     Previously this forced a 50px MIN padding which created an empty
     beige strip above the announcement bar in mobile browsers without a
     notch (and in DevTools emulators). The designer flagged this in
     Video A as 'the beige bar at top — get rid of it.' Now we let the
     OS add inset only when there actually is a notch. */
  .site-header {
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--cream);
  }
  .site-footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }

  /* Smooth scrolling for horizontal carousels (touch) */
  .carousel,
  .event-stage { -webkit-overflow-scrolling: touch; }

  /* Tap-flash */
  a, button { -webkit-tap-highlight-color: rgba(94, 42, 41, 0.08); }

  /* Image rendering */
  img { image-rendering: -webkit-optimize-contrast; }

  /* Reduce hero scale animation slightly — feels less wobbly on small screens */
  .hero__image { transform: scale(1.02); }

  /* Disable hover-only transforms that look wrong on tap */
  .activity-card:hover { transform: none; }
  .activity-card:hover .activity-card__image { transform: none; }
  .impact-list li:hover::before { height: 32px; background: var(--gold); }
  .feature-row:hover { transform: none; }
  .pillar-row:hover { transform: none; }
  .offer-card:hover { transform: none; }
  .upcoming-card:hover { transform: none; }
}


/* ===========================================================
   25. Round 61 — Spaces to Discover: switch to mobile carousel
       at <1024 (was <480, which left a broken desktop aerial
       between 481-1023 where the card cramped over the hotspots).
   =========================================================== */
@media (max-width: 1023px) {
  /* Spaces to Discover: per Figma mobile spec — single carousel card
     (photo on top, cream card below with ← prev + title/desc + → next).
     Hide the aerial map entirely; keep the active card and the nav arrows. */
  .spaces-discover-v2 { padding: 56px 0; }
  .spaces-discover-v2__inner { padding: 0 22px; gap: 28px; align-items: center; }
  /* align-self: center on the head + stage so they actually CENTER inside the
     flex-column parent — without it, max-width on a flex child leaves the box
     left-aligned and text-align:center only centers the text inside that box,
     which on a 900-1023 viewport visually drifts left of the viewport center. */
  .spaces-discover-v2__head { text-align: center; align-self: center; width: 100%; }
  .spaces-discover-v2__head h2 { font-size: clamp(28px, 4vw, 36px); line-height: 1.15; }
  .spaces-discover-v2__head p { font-size: 15px; line-height: 1.65; max-width: 38ch; margin: 12px auto 0; }

  .aerial-stage {
    /* Override desktop's full-bleed: on tablet/mobile, contain the carousel
       with horizontal padding so the card is centered, capped at a sensible
       max-width at the wider end of this range so the card doesn't stretch
       across 900+ viewports as a single oversize tile. */
    display: block;
    position: relative;
    width: 100%;
    max-width: 560px;
    align-self: center;
    margin: 0 auto;
    padding: 0 22px;
    box-sizing: border-box;
  }
  .aerial-stage__image { display: none; }    /* hide the aerial map */

  /* Override desktop's absolute positioning (top:28px right:28px). On mobile
     the card returns to normal block flow, centered, full width inside padding. */
  .space-detail {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin: 0 auto;
    min-height: 0;
  }
  .space-detail__card {
    /* Carousel: stack all cards in the same spot; only .is-active is visible. */
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease-out);
    border-radius: 14px;
    background: #FBF7EE;
  }
  .space-detail__card.is-active { opacity: 1; pointer-events: auto; position: relative; }
  .space-detail__photo { aspect-ratio: 16 / 11; }
  .space-detail__body {
    padding: 18px 60px 22px;
    text-align: center;
  }
  .space-detail__card h4 { font-size: 20px; margin: 0 0 6px; font-style: italic; }
  .space-detail__card p { font-size: 14px; line-height: 1.55; }

  /* Mobile carousel arrows — sit at the bottom-left/right corners of the card */
  .space-detail__nav {
    display: block;
    pointer-events: none;
  }
  .space-arrow {
    position: absolute;
    bottom: 22px;
    width: 40px; height: 40px;
    pointer-events: auto;
    z-index: 3;
  }
  #spacePrev { left: 14px; }
  #spaceNext { right: 14px; }
}


/* ===========================================================
   24. ROUND 2 — Mobile fixes for the rebuilt Explore components
   ===========================================================
   The Phase-2 components introduced new class names that the old
   mobile rules above don't target. These rules convert the desktop
   aerial+hotspots into a stacked card list on mobile (matches Figma
   Mobile__Explore frame 4100:1972) and tighten the timeline.
   =========================================================== */
@media (max-width: 480px) {
  /* Sacred Grounds: keep 4-card selector but reflow to single column.
     Stacks naturally because of .sacred-grounds__stage flex direction. */
  .sacred-grounds { padding: 56px 0; }
  .sacred-grounds__inner { padding: 0 22px; gap: 28px; }
  .sacred-grounds__copy h2 { font-size: 28px; line-height: 1.15; }
  .sacred-grounds__copy p { font-size: 15px; line-height: 1.65; }
  .sacred-grounds__stage { grid-template-columns: 1fr; gap: 20px; }
  .sacred-grounds__media { min-height: 220px; aspect-ratio: 16 / 11; border-radius: 12px; }

  /* (Spaces to Discover rules moved to their own @media (max-width: 1023px)
     block below — the aerial+hotspots desktop layout needs ≥1024px of width
     to render readably. At smaller viewports it cramps the card over the
     hotspots regardless of how narrow the viewport gets, so the mobile
     carousel needs to kick in earlier than the 480 breakpoint used by the
     other sections in this block.) */

  /* Peace quote — tighten on mobile */
  .peace-quote { padding: 64px 22px; }
  .peace-quote__inner { font-size: 19px; line-height: 1.5; gap: 14px; }
  .peace-quote__center { font-size: 22px; letter-spacing: 0.03em; }

  /* Your Time at the Ashram — per Figma mobile spec:
     Mobile renders the 5 phases as a VERTICAL STACK of unified cards.
     The desktop stage (full-bleed photo + overlay card + bottom strip) is
     hidden; .time-mstack is shown. */
  .ashram-time { padding: 56px 0 48px; }
  .ashram-time__inner { padding: 0 22px; }
  .ashram-time h2 { font-size: 32px; margin: 0 0 22px; text-align: left; }

  /* Hide the desktop layout entirely on mobile */
  .ashram-time__stage { display: none; }

  /* Mobile carousel: 5 cards stacked in the SAME slot; only .is-active shows.
     The card's → CTA advances to the next phase (loops back at the end). */
  .time-mstack {
    display: block;
    position: relative;
  }
  .time-mcard {
    background: #F4ECD9;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px -8px rgba(94,42,41,0.18);
    /* Stack carousel: only the active card occupies layout space. */
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease-out);
  }
  .time-mcard.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
  }
  .time-mcard__photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
    /* Top corners follow the card; bottom corners are flat so the photo reads
       as the top portion of the card, not a separate floating element. */
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
  }
  .time-mcard__body {
    padding: 18px 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .time-mcard__copy {
    flex: 1 1 auto;
    min-width: 0;
  }
  .time-mcard__eyebrow {
    margin: 0 0 4px;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #B8924A;
  }
  .time-mcard__title {
    margin: 0 0 4px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 18px;
    color: var(--brand);
    line-height: 1.2;
  }
  .time-mcard__desc {
    margin: 0;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
  }
  .time-mcard__cta {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--brand);
    background: transparent;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .time-mcard__cta:hover { background: rgba(94,42,41,0.06); }
  .time-mcard__cta svg { width: 16px; height: 16px; }

  /* Visit CTA — compact */
  .visit-cta { padding: 56px 22px; }
  .visit-cta h3 { font-size: 28px; }
  .visit-cta p { font-size: 15px; line-height: 1.6; }
  .visit-cta__closing { font-size: 14.5px; margin-top: 18px; }

  /* Testimonial v2 — mobile compact carousel (Inspiration & Founder) */
  .testimonial-v2 { padding: 48px 0 32px; }
  .testimonial-v2__inner { padding: 0 22px; gap: 24px; }
  .testimonial-v2__head h3 { font-size: 24px; line-height: 1.2; }
  .testimonial-v2__head p { font-size: 15px; line-height: 1.6; }
  .testimonial-v2__stage { min-height: 0; }
  .testimonial-slide { min-height: 0; grid-template-columns: 1fr; }
  .testimonial-slide__image { aspect-ratio: 4 / 3; min-height: 0; }
  .testimonial-slide__copy { padding: 22px 22px 28px; gap: 12px; }
  .testimonial-slide__quote { font-size: 16px; line-height: 1.5; }
  .testimonial-slide__name { font-size: 14px; }
  .testimonial-slide__role { font-size: 13px; }
  .testimonial-v2__buttons .time-arrow { width: 40px; height: 40px; }
  .testimonial-v2__indicator { font-size: 13px; letter-spacing: 0.10em; }

  /* Inspiration hero rules are now consolidated in styles.css ≤768 block
     (Round 27 rebuild). Re-adding overrides here would re-trigger the
     cascade-override bug documented in CLAUDE.md Phase 10. */
}


/* ===========================================================
   25. ROUND 2 — Mobile footer accordion (Figma match)
   ===========================================================
   Mobile Figma shows footer nav as collapsible accordion items
   rather than 2-col grid. Each section h5 acts as the toggle
   header with a chevron; ul collapses by default.
   =========================================================== */
@media (max-width: 767px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    /* 0, not 28px: every accordion row already puts 18px (its padding-bottom)
       between its label and the next divider. The divider UNDER the last row
       (GET INVOLVED) is .footer-bottom's border-top, so any margin here
       stacks on that 18px (was 18+28 = 46px → uneven row rhythm). */
    margin-bottom: 0;
    /* .container already insets ~22px each side — do NOT add more (that
       double-padding squeezed the links col + pushed the chevron in). */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Figma mobile footer (node 4149:6234): each row is a 2-column accordion —
     [chevron + LABEL] in a left column, links in a right column. ONE chevron
     to the LEFT of the label, no letter-spacing, ABOUT open by default. */
  .site-footer .footer-col {
    display: grid;
    /* Figma: chevron x35, label x64, links x190. Label col fits "GET INVOLVED";
       links take the rest and WRAP on narrow phones (≤~410) so "Inspiration &
       Founder" never runs into / off the right edge (one line on 14 Pro Max). */
    grid-template-columns: 150px 1fr; /* fixed (not scaled) so text stays full-size; links wrap on narrow phones rather than shrinking */
    align-items: start;
    width: 100%; justify-self: stretch; /* fill the row — was sizing to content, starving the links col */
    column-gap: 8px;
    border-top: 1px solid rgba(253,251,243,0.18);
    padding: 18px 0 18px 15px; /* grid already insets 20px → chevron lands at x35 */
  }
  /* Footer-r10: removed the stray bottom divider under the last column
     ("GET INVOLVED"). Each row already carries a top border; the extra
     border-bottom drew a second line beneath the accordion that QC flagged. */
  .site-footer .footer-col__head {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* chevron + label together on the left (base was space-between) */
    gap: 5px; /* Figma: chevron 35→59, label at 64 = 5px */
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    width: 100%;
    cursor: pointer;
    user-select: none;
  }
  /* chevron LEFT of the label (the SVG span follows the h5 in markup) */
  .site-footer .footer-col__head .footer-col__chev {
    order: -1;
    display: inline-flex; align-items: center; justify-content: flex-start;
    flex: 0 0 18px;
    width: 18px; height: 24px;
    margin-right: 12px; /* flex `gap` was being clobbered to 0 → explicit space so the chevron isn't jammed against the label */
    color: rgba(253,251,243,0.95);
    transition: transform 0.25s var(--ease-out);
  }
  /* our chev path fills its viewBox; render it ~14px (Figma's is a thin chevron with padding) */
  .site-footer .footer-col__head .footer-col__chev svg { width: 14px; height: 14px; display: block; }
  /* Figma: open = ▼ (base, no rotate), collapsed = ▲ (rotate 180).
     styles.css also rotates on [aria-expanded=true] — cancel that so open
     and collapsed don't BOTH rotate (which made every chevron identical). */
  .site-footer .footer-col__head[aria-expanded="true"] .footer-col__chev { transform: none; }
  .site-footer .footer-col:not(.is-open) .footer-col__head .footer-col__chev { transform: rotate(180deg); }
  .site-footer .footer-col h5 {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    color: rgba(253,251,243,0.95);
    display: block;
    white-space: nowrap;
  }
  .site-footer .footer-col h5::after { display: none; } /* kill duplicate CSS chevron */
  .site-footer .footer-col__list {
    grid-column: 2;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .site-footer .footer-col:not(.is-open) .footer-col__list { display: none; }
  .site-footer .footer-col a {
    font-size: 16px; /* fixed — was scaled down below 390px, which read as scrunched */
    line-height: 30px;
    color: rgba(253,251,243,0.95);
  }
}


/* ===========================================================
   GETTING HERE — Mobile (Round 1)
   ===========================================================
   - Hero: centered kicker + title (CTA-less hero, just text)
   - Find Us: stacks copy / map; map gets edge-to-edge
   - Travel at a Glance: table → 3 stacked cards
   - Detail Travel Options: tabs hide, accordion heads show
   =========================================================== */

@media (max-width: 768px) {
  body[data-page="getting-here"] .inner-hero,
  body[data-page="getting-here"] .inner-hero__inner {
    min-height: clamp(560px, 110vw, 760px);
  }
  body[data-page="getting-here"] .inner-hero__inner {
    align-items: center;
    text-align: center;
    justify-content: flex-end;
    gap: 16px;
    padding-bottom: clamp(40px, 7vw, 64px);
  }
  body[data-page="getting-here"] .inner-hero__kicker {
    font-size: 12px;
    letter-spacing: 0.16em;
    max-width: 28ch;
  }
  body[data-page="getting-here"] .inner-hero__title {
    font-size: clamp(40px, 11vw, 60px);
    line-height: 1.05;
  }

  /* Find Us — kill the negative-margin overlap on mobile (the card was
     overlapping the hero on desktop). Mobile just stacks normally. */
  .find-us {
    margin-top: 0;
    padding: 32px 0 0;
  }
  .find-us__card {
    border-radius: 0;
    box-shadow: none;
  }
  .find-us__grid {
    grid-template-columns: 1fr;
    padding: 28px 22px;
    gap: 22px;
  }
  .find-us__copy h2 {
    text-align: center;
    font-size: 30px;
  }
  .find-us__copy p { font-size: 15px; text-align: left; }
  .find-us__address { text-align: left; }
  /* Mobile shows "Get Directions" as an explicit link */
  .find-us__directions { display: inline-flex; align-self: flex-start; }
  .find-us__map { margin: 0 -22px; border-radius: 0; }
  .find-us__notice {
    /* Round 3: was edge-to-edge (margin: 0 -22px making it extend past
       the card padding); user wants a CONTAINED box. Reset to a normal
       inset card with margin and padding so it reads as a pill inside
       the find-us card, not a full-bleed bar. */
    margin: 0 0 22px;
    padding: 16px 18px;
    text-align: center;
    border-radius: 8px;
  }
  .find-us__notice p { font-size: 13.5px; line-height: 1.5; }

  /* Travel at a Glance — desktop table flips to stacked cards */
  body[data-page="getting-here"] .travel-glance { padding: 48px 0 32px; }
  body[data-page="getting-here"] .travel-glance__head { padding: 0 22px; }
  body[data-page="getting-here"] .travel-glance__head h2 { font-size: 28px; }
  body[data-page="getting-here"] .travel-glance__head p { font-size: 15px; }
  body[data-page="getting-here"] .travel-glance__table {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: transparent;
    padding: 0 22px;
    border-radius: 0;
  }
  body[data-page="getting-here"] .travel-glance__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Anita's exact Figma hex (mobile spec): box fill #F5F2EC with
       1px outline #F0EADE. The previous #FBF7EE was the wrong cream
       and there was no outline. */
    background: #F5F2EC;
    border: 1px solid #F0EADE;
    border-radius: 8px;
    padding: 16px 18px;
  }
  body[data-page="getting-here"] .travel-glance__row--head { display: none; }
  body[data-page="getting-here"] .travel-glance__cell {
    padding: 0;
    border: 0;
    /* Body text color #46474B per Figma (cells 2 + 3 of each row). */
    color: #46474B;
    font-size: 14px;
    line-height: 1.45;
  }
  /* Title cell (first of each row) — Figma title color #5A381C, NOT
     brand maroon. The previous version used var(--brand) which read as
     a different reddish-brown. */
  body[data-page="getting-here"] .travel-glance__row .travel-glance__cell:first-child {
    font-weight: 600;
    color: #5A381C;
    font-size: 15.5px;
    margin-bottom: 6px;
  }
  /* Time cell (3rd of each row) — Figma wraps the value in parentheses,
     so add ( and ) via pseudo-elements rather than touching the HTML
     (keeps desktop output clean). */
  body[data-page="getting-here"] .travel-glance__row .travel-glance__cell:nth-child(3)::before { content: '('; }
  body[data-page="getting-here"] .travel-glance__row .travel-glance__cell:nth-child(3)::after  { content: ')'; }

  /* Detail Travel Options — accordion mode */
  body[data-page="getting-here"] .travel-detail { padding: 32px 0 48px; }
  body[data-page="getting-here"] .travel-detail__title { font-size: 28px; margin-bottom: 24px; }
  .travel-tabs { display: none; }
  .travel-panels { padding: 0 22px; }
  .travel-panel {
    display: block;
    margin-bottom: 14px;
  }
  .travel-accordion__head {
    display: flex !important;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #F0E8D6;
    border: 0;
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand);
    cursor: pointer;
  }
  .travel-accordion__head.is-active {
    background: #F8F2E2;
    border-radius: 8px 8px 0 0;
  }
  .travel-accordion__chev {
    transition: transform 0.2s ease;
    color: var(--brand);
  }
  .travel-accordion__head.is-active .travel-accordion__chev { transform: rotate(180deg); }
  .travel-panel__inner {
    display: none;
    border-radius: 0 0 8px 8px;
    border: 1px solid rgba(94,42,41,0.10);
    border-top: 0;
  }
  .travel-panel.is-active .travel-panel__inner { display: block; }
  .travel-panel__banner {
    /* On mobile the banner is hidden — the accordion head + the panel
       header label inside the panel give enough context. */
    display: none;
  }
  .travel-panel__grid {
    padding: 18px;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }
  .travel-panel__footnote {
    margin: 0 18px 18px;
    padding: 14px;
    background: #F1F1F1;
  }
  .travel-panel__footnote p { font-size: 13px; line-height: 1.5; }

  .travel-rows li {
    padding: 12px 16px;
    font-size: 14px;
  }
  .travel-hubs { grid-template-columns: 1fr; gap: 4px; }
  .travel-hub { background: transparent; padding: 10px 16px; flex-direction: row; justify-content: space-between; }
  .travel-hub strong { font-weight: 500; letter-spacing: 0; }
}


/* ===========================================================
   GLOBAL MOVEMENT — Mobile (Round 1)
   =========================================================== */

@media (max-width: 768px) {
  body[data-page="global-movement"] .inner-hero,
  body[data-page="global-movement"] .inner-hero__inner {
    min-height: clamp(560px, 110vw, 760px);
  }
  body[data-page="global-movement"] .inner-hero__inner {
    align-items: center;
    text-align: center;
    justify-content: flex-end;
    gap: 16px;
    padding-bottom: clamp(40px, 7vw, 64px);
  }
  body[data-page="global-movement"] .inner-hero__kicker {
    font-size: 12px;
    letter-spacing: 0.16em;
    max-width: 28ch;
  }
  body[data-page="global-movement"] .inner-hero__title {
    font-size: clamp(40px, 11vw, 60px);
    line-height: 1.05;
  }

  /* Section padding compressions */
  .gm-intro { padding: 48px 0; }
  .gm-intro h2 { font-size: 28px; }
  .gm-intro p { font-size: 15px; }

  .gm-mission-band { padding: 44px 22px; }
  .gm-mission-band__lead { font-size: 14px; }
  .gm-mission-band__quote { font-size: 22px; }

  .gm-mission-card { padding: 44px 22px; }
  .gm-mission-card__inner { gap: 24px; grid-template-columns: 1fr !important; }
  .gm-mission-card__copy blockquote { font-size: 20px; }
  .gm-mission-card__photo { aspect-ratio: 4 / 3; }

  .gm-network { padding: 44px 22px; }
  .gm-network__inner { gap: 24px; }
  .gm-network__copy h2 { font-size: 28px; }
  .gm-network__copy p { font-size: 15px; }
  /* Stacked single-column per latest Figma mobile spec (user changed
     direction: "they want it stacked like this"). Each card shows the
     photo on top + cream-tinted label below with dark maroon text. */
  .gm-network__grid {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none !important;
    gap: 18px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .gm-network-card {
    flex: none;
    /* Override desktop's brown background — mobile cards use the cream
       #F0EADE label background; the alternating-shade selector on the
       2nd card needs explicit reset too. */
    background: #F0EADE !important;
    border-radius: 12px;
    overflow: hidden;
  }
  .gm-network-card__photo {
    /* Wider landscape aspect for mobile so the photo dominates the card. */
    aspect-ratio: 16 / 10;
  }
  .gm-network-card__label {
    /* Dark maroon text centered on the cream card background. */
    color: #5E2A29;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    padding: 16px 18px;
  }
  .gm-network-card__label span {
    color: #5E2A29;
    opacity: 1;
  }
  /* Carousel arrows hidden on mobile now that we're stacked. */
  .gm-network__nav { display: none !important; }

  .gm-usa { padding: 44px 22px; }
  .gm-usa__inner { gap: 24px; grid-template-columns: 1fr !important; }
  .gm-usa__copy h2 { font-size: 28px; }
  .gm-usa__copy p { font-size: 15px; }

  .gm-dharampur { padding: 44px 22px; }
  .gm-dharampur__copy h2 { font-size: 26px; }
  .gm-dharampur__copy p { font-size: 15px; }

  /* Mobile per Figma flips the gold #BEA884 band to cream #EFEADF and
     stacks the two follow columns into separate cards. */
  .gm-follow { background: #EFEADF; padding: 32px 22px; }
  .gm-follow__inner { grid-template-columns: 1fr !important; gap: 24px; }
  .gm-follow__label { font-size: 22px; }
}

/* ============================================================
   ACTIVITY HEROES — SITE-WIDE MATTE FINISH (mobile only)
   The Figma applies a soft faded matte over every activity-page hero
   photo so the white headline reads. The grade is contrast(0.68)
   saturate(0.82) — the same one already on Activities + Our Story, and
   it matches the Wisdom Figma (mine bri 142/sat 60 vs Figma 141/56).
   Each page's hero uses a different class, so all are listed here.
   (Wisdom carries it in wisdom-figma.css; Activities in activities-figma.css.)
   ============================================================ */
@media (max-width: 767px) {
  body[data-page="meditation"] .med-hero__image,
  body[data-page="yoga"] .inner-hero__image,
  body[data-page="sound-healing"] .sh-hero__image,
  body[data-page="courses"] .inner-hero__image {
    filter: contrast(0.68) saturate(0.82);
  }
}

/* ============================================================
   HEADER — TABLET / LANDSCAPE (701–1079, the hamburger range) — ALL PAGES
   Below 1080 the nav is the hamburger, but the working mobile collapse only
   fires ≤700, so 701–1079 kept the desktop 2-col promo+links announce grid
   (clipped by the 1920-scaled --announce-h ≈ 26px) and the logo collapsed to
   ~25px (and the drawer logo was unsized ≈ 71px). Mirror the mobile collapse:
   one full-width promo (Contact/Host links live in the drawer), readable logos.
   ============================================================ */
@media (min-width: 701px) and (max-width: 1079px) {
  :root { --nav-h: 72px; --announce-h: auto; }
  .announce { grid-template-columns: 1fr; height: auto; }
  .announce__promo { flex-direction: row; padding: 11px 24px; gap: 16px; }
  .announce__promo p { font-size: 14px; text-align: center; }
  .announce__links { display: none; }
  .primary-nav { height: 72px; }
  .brand-logo { height: 46px; }
  /* Search icon: this tablet band (iPad portrait/landscape, iPhone landscape) only
     sized the logo, so the search fell back to the vw-scaled base (~7-11px, tiny
     next to the 46px logo). Give it a readable fixed size to match the logo/nav. */
  .nav-search { width: 26px; height: 26px; }
  .nav-search svg { width: 20px; height: 20px; }
  .menu-drawer__brand { height: 44px; }
  .menu-drawer__brand img { height: 100%; width: auto; }
  .btn--register { height: 30px; font-size: 13px; font-weight: 600; padding: 0 14px; flex-shrink: 0; line-height: 1; } /* QC r29: readable Register pill on iPad */
}