/* ============================================================
   OUR STORY — 1:1 Figma rebuild (exact values, no guesses)
   Desktop source: Figma node 4148:1835 (1920×4491)
   Mobile source : Figma node 4149:6104 (390×2983)
   Every value below is the literal Figma px (with min() scaling).
============================================================ */
body[data-page="our-story"] { background: #fafafa; }

/* ============================================================
   UNIVERSAL RESET (playbook rule #13)
   Zero every spacing primitive on every container so per-section
   rules below are the single source of truth.
   IMPORTANT (playbook rule #11): do NOT reset carousel JS-driven
   elements (__carousel/__viewport/__track/__slide/__progress/
   __indicator/__nav and .carousel-btn).
============================================================ */
body[data-page="our-story"] section,
body[data-page="our-story"] [class*="__inner"],
body[data-page="our-story"] [class*="__head"],
body[data-page="our-story"] [class*="__copy"],
body[data-page="our-story"] [class*="__buttons"] {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
  margin: 0;
  min-height: 0;
}

/* ============================================================
   HERO — Figma node 4148:1837 (image) + 4148:1838 (gradient)
   - Section: y=176→896, h=720
   - bg image: bleed at left=-61, top=157, w=1981, h=739
   - gradient overlay rotated 180°, h=720 at y=176
   - Title block at left=149:
     * eyebrow "HOW A VISION BECAME REALITY" y mid=674 (Figma node 4148:1841)
     * title "Our Story" y mid=736 (Figma node 4148:1842)
============================================================ */
body[data-page="our-story"] .inner-hero {
  position: relative; width: 100%;
  height: min(720px, calc(720 / 1920 * 100vw));
  overflow: hidden; margin: 0; padding: 0;
}
body[data-page="our-story"] .inner-hero__image {
  position: absolute; inset: 0;
  /* QC r28: the updated hero render carries a Gemini sparkle watermark +
     compass rose in the BOTTOM-RIGHT corner (image x≈90–100%). The hero box
     aspect is a constant 1920/720 (2.667) across every desktop width, while
     the image is 2560×933 (2.744) — so plain `cover` only overflows ~2.9%
     horizontally, not enough to crop the watermark. Zoom the image to 112%
     width and anchor it bottom-LEFT (0% 100%) so the building stays composed
     against the left/centre and the right ~12% (the watermark + compass) is
     cropped off-frame at 1200 / 1440 / 1920. Mobile (<768) overrides all three
     of these properties in its own @media block, so this is desktop-only. */
  background-size: 112% auto;
  background-position: 0% 100%;
  background-repeat: no-repeat;
}
body[data-page="our-story"] .inner-hero__veil {
  /* QC r19 (reopened): the hero title/kicker sit bottom-left over a mid-tone
     blueprint render. The decorative Figma blue tint (4148:1838) alone gave
     the white text almost no contrast, so re-introduce a real dark
     legibility gradient ON TOP of the media (the text lives in a higher
     stacking layer, .inner-hero__inner z-index:1). Two stacked gradients:
       1. a vertical bottom fade so the title baseline is anchored, and
       2. a left-weighted diagonal so the bottom-left text block specifically
          reads, while keeping the right side of the image clean.
     The original blue tint is preserved as the lowest layer. */
  position: absolute; inset: 0;
  z-index: 0;
  background:
    linear-gradient(100deg,
      rgba(0,0,0,0.45) 0%,
      rgba(0,0,0,0.22) 34%,
      rgba(0,0,0,0) 62%),
    linear-gradient(180deg,
      rgba(0,0,0,0) 42%,
      rgba(0,0,0,0.20) 74%,
      rgba(0,0,0,0.48) 100%),
    linear-gradient(269.647deg, rgba(141,175,199,0.2) 29.369%, rgba(53,70,140,0.2) 99.882%);
}
body[data-page="our-story"] .inner-hero__inner {
  position: absolute;
  /* Eyebrow at y mid 674, height ≈20 → top edge 664. Hero starts y=176 →
     relative top = 664 - 176 = 488. */
  left: min(149px, calc(149 / 1920 * 100vw));
  top:  min(488px, calc(488 / 1920 * 100vw));
  width: auto;
  padding: 0; margin: 0;
  text-align: left; align-items: flex-start;
  display: flex; flex-direction: column;
}
body[data-page="our-story"] .inner-hero__kicker {
  /* Figma 4148:1841: Inter Medium 20px tracking 2px uppercase white,
     leading: normal. */
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: 1.2;
  letter-spacing: 0.1em;   /* 2px / 20px = 0.1em */
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 min(20px, calc(20 / 1920 * 100vw));
  /* Figma: 62px between eyebrow mid (674) and title mid (736).
     Eyebrow height ≈ 20, title height ≈ 64 → centerline distance 62
     → margin between them = 62 - 10 - 32 = 20. */
}
body[data-page="our-story"] .inner-hero__title {
  /* Figma 4148:1842: STIX Two Text Medium 64px capitalize white. */
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(64px, calc(64 / 1920 * 100vw));
  line-height: 1;
  color: #ffffff;
  text-transform: capitalize;
  margin: 0;
}

/* ============================================================
   A HOME CLOSER TO HOME — Component75 at y=903→2101 (h=1198)
   - Cream section bg (#f7f5ef) at y=896→2077 (h=1181)
   - Main carousel photo: 1086×520, centered, y=978 (rel=75)
   - Peek photos: 392×231 / 389×231 at y=1122 (rel=219)
   - Counter "1/5" at y=1518 (rel=615), STIX Italic 14px #282828
   - Slider line at y=1559 (rel=656), 1927 wide
   - Title "A Home Closer to Home" at y=1604 (rel=701),
     STIX Two Text Medium Italic 42px line 58 #4a3b2e
   - Body paragraphs at y=1686 (rel=783), 933 wide,
     Inter Regular 20px line 38 #282828
   - Bold closing line at y=1983 (rel=1080)
   The JS-driven carousel keeps its own base styles.css layout — I
   only style the STATIC content blocks underneath (copy + indicator).
============================================================ */
body[data-page="our-story"] .story-home {
  background: #f7f5ef;
  /* Cream bg starts y=896, hero ends y=896 → no margin gap above.
     padding-top brings us from cream-bg top (896) down to carousel
     photo top (978) → 82px relative padding. */
  padding-top: min(82px, calc(82 / 1920 * 100vw));
  padding-bottom: min(94px, calc(94 / 1920 * 100vw));  /* 2077 - 1983 = 94 */
  margin: 0;
}

/* Figma puts the "1/5" indicator ABOVE the progress bar line, not below.
   The carousel children render in HTML order viewport → progress → indicator;
   re-order via flexbox so indicator visually slots between viewport and
   progress, matching the Figma layout. Keep the carousel container's
   existing JS-driven layout otherwise. */
body[data-page="our-story"] .story-home__carousel {
  display: flex;
  flex-direction: column;
}
body[data-page="our-story"] .story-home__viewport  { order: 1; }
body[data-page="our-story"] .story-home__indicator { order: 2; }
body[data-page="our-story"] .story-home__progress  { order: 3; }
body[data-page="our-story"] .story-home__indicator {
  /* Tight gap above the line so the line sits closer to the 1/5
     indicator — user wanted the line moved up to read as vertically
     centered between 1/5 and the nav buttons. */
  font-family: 'STIX Two Text', serif; font-style: italic; font-weight: 400;
  font-size: min(14px, calc(14 / 1920 * 100vw));
  line-height: 1;
  color: #282828;
  text-align: center;
  margin: min(8px, calc(8 / 1920 * 100vw)) 0 min(2px, calc(2 / 1920 * 100vw));
}

/* Tighten progress + nav stacks so everything hugs the carousel image
   like Figma. Base styles.css adds its own padding/margins. */
body[data-page="our-story"] .story-home__progress {
  margin: 0 !important;
  padding: 0 !important;
}
body[data-page="our-story"] .story-home__nav {
  /* Larger gap above nav so the line visually centers between 1/5 and
     buttons (was 4px). */
  margin: min(14px, calc(14 / 1920 * 100vw)) 0 0 !important;
  padding: 0 !important;
}

/* QC OS-r27 (redone in full): the old peek system shrank the slide's
   BACKGROUND (background-size 44% + an SVG mask band swapped by sibling
   selectors). background-size keyword `cover` and mask-image data-URIs are
   NOT interpolable, and the before/after-active mask flip happened the
   instant the class changed — so the side tiles teleported while the center
   glided. Redo: the slide box stays full-size (JS scroll-step math intact)
   and paints NOTHING itself; a ::before layer inherits the inline
   background-image and renders the photo. Peek look = scale(0.44) +
   grayscale on that layer, anchored toward the center slide via
   transform-origin. scale / origin / filter / radius are ALL interpolable,
   so the tiles glide + colorize on the same 1.6s envelope as the track. */
body[data-page="our-story"] .story-home__slide {
  position: relative;
  background-color: transparent;
  background-size: 0 0;        /* hide direct painting — ::before paints it */
  filter: none;                /* base styles.css grayscales the BOX; the box
                                  must stay clean or it'd stack on ::before */
  opacity: 1;
}
body[data-page="our-story"] .story-home__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;   /* picks up the slide's inline style URL */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 32px shrinks to ~14px visual at scale(0.44) — matches the old peek
     band's masked corner radius. */
  border-radius: 32px;
  transform: scale(0.44);
  transform-origin: 50% 50%;
  filter: grayscale(1);
  will-change: transform, filter;
  transition: transform 1.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              transform-origin 1.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              filter 1.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              border-radius 1.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
/* Left peek hugs its right edge (toward the center slide); right peek hugs
   its left edge. transform-origin interpolates, so a tile promoted from
   peek to center GLIDES from edge-anchor to full-bleed — no jump. */
body[data-page="our-story"] .story-home__slide.is-prev::before { transform-origin: 100% 50%; }
body[data-page="our-story"] .story-home__slide.is-next::before { transform-origin: 0% 50%; }
body[data-page="our-story"] .story-home__slide.is-active::before {
  transform: scale(1);
  transform-origin: 50% 50%;
  filter: none;
  border-radius: 14px;
}
/* During the silent wrap jump the JS retags tiles + repositions the track in
   one frame — transitions must not fire or the teleport becomes visible.
   NOTE: the track rule below is `!important`, which beats the inline
   `style.transition = 'none'` the JS sets — that override was the original
   wrap bug (the "silent" jump animated 1.6s back across the track). These
   higher-specificity rules win over it. */
body[data-page="our-story"] .story-home__track.is-teleporting,
body[data-page="our-story"] .story-home__track.is-teleporting .story-home__slide::before {
  transition: none !important;
}
/* QC r27 (reopened 3x): Anita still finds the swap too fast — lengthen the
   carousel track slide to 1.6s (was 1.2s, 1s, base 0.6s) to stay matched with
   the copy + photo cross-fade. Kept in lockstep with JS TRANSITION_MS below. */
body[data-page="our-story"] .story-home__track {
  transition: transform 1.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) !important;
}
body[data-page="our-story"] .story-home__track.is-dragging {
  transition: none !important;
}
body[data-page="our-story"] .story-home__indicator span:first-child {
  font-weight: 500;  /* "1" in "1/5" is medium italic */
}

body[data-page="our-story"] .story-home__copy {
  /* Copy block max-width — Figma is 933 wide, plus +8% browser-font
     compensation per playbook rule #16 = 1008. */
  width: 100%;
  max-width: min(1008px, calc(1008 / 1920 * 100vw));
  /* Copy starts at y=1604 (title). Above it: slider line y=1559 and
     indicator y=1518. After my reset, copy block sits below indicator.
     Slider line is at relative y=656 in Component75, rendered by the
     JS carousel control. Title at relative y=701 = 45px below slider.
     Margin-top from indicator to title = 45 - 20 = 25. */
  margin: min(25px, calc(25 / 1920 * 100vw)) auto 0;
  padding: 0;
  /* QC r27 (reopened): the chapter copy fade was 0.4s linear-ish and
     finished long before the 0.6s image slide, so the swap read as a hard
     cut. Lengthen + ease so the copy cross-fades on the SAME 0.6s envelope
     as the carousel track (.story-home__track transition: transform 0.6s),
     and add a tiny upward drift so it feels like a settle, not a blink. */
  transition: opacity 1.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 1.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
body[data-page="our-story"] .story-home__copy.is-swapping {
  /* Fade OUT a touch faster than the swap point (TRANSITION_MS/2 = 300ms in
     JS) so the copy is fully hidden BEFORE the text is rewritten — the
     reader never catches a hard text replacement. Fade IN then uses the
     longer eased base-rule transition above for a soft settle. */
  opacity: 0;
  transform: translateY(8px);
  /* QC r27 (reopened 3x): gentler, slower fade-out (was 0.7s, 0.5s, orig
     0.28s) per Anita — "more subtle fade-out, currently feels fast".
     Completes ~at the 800ms swap point (TRANSITION_MS/2). */
  transition: opacity 1s ease-in, transform 1s ease-in;
}
body[data-page="our-story"] .story-home__copy h2 {
  /* Figma 4148:881 / 4148:894: STIX Two Text Medium Italic 42px
     line 58 #4a3b2e. Positioned at left=calc(50%-213px) which equals
     centered (half-width=213). Heading is CENTERED; only body p
     paragraphs below it are left-aligned. */
  font-family: 'STIX Two Text', serif; font-weight: 500; font-style: italic;
  font-size: min(42px, calc(42 / 1920 * 100vw));
  line-height: calc(58 / 42);
  color: #4a3b2e;
  margin: 0 0 min(24px, calc(24 / 1920 * 100vw));
  text-align: center;
}
body[data-page="our-story"] .story-home__copy p {
  /* Figma 4148:903-905: Inter Regular 20px line 38 #282828. */
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(38 / 20);
  color: #282828;
  margin: 0;
  text-align: left;
}
body[data-page="our-story"] .story-home__copy p + p {
  /* Figma literal is 25 between paragraphs but browser line-height
     renders slightly heavier than Figma's, so the visual gap reads
     too wide. Tightened to 14 to match Figma's visual spacing. */
  margin-top: min(14px, calc(14 / 1920 * 100vw));
}
body[data-page="our-story"] .story-home__copy p.story-home__close {
  /* Figma 60 from last p to closing line; tightened to 36 to match
     Figma's visual spacing given browser line-height delta. */
  margin-top: min(36px, calc(36 / 1920 * 100vw)) !important;
  /* WHOLE line BOLD; only the accent word ("answer"/"offered") is italic (per
     user). Selector raised to .story-home__copy p.story-home__close so the bold
     beats the base ".story-home__copy p { font-weight:400 }" rule. */
  font-weight: 700;
}
body[data-page="our-story"] .story-home__copy p.story-home__close em {
  font-family: inherit;
  font-weight: 700;
  font-style: italic;
}

/* ============================================================
   MAKING OF THE ASHRAM — Figma 4148:1887 (heading) + 4148:1843 (photo)
   - Heading "The Making of the Ashram" at left=149, y mid=2162
     (top=2133), w=869, STIX Two Text Medium 52px line 58 #4a3b2e
   - Body "A story of devotion..." at left=149, y top=2216, w=563,
     Inter Regular 20px line 38 #282828
   - Photo at left=149, y top=2303, w=1622, h=913
   - Play overlay 69×69 at center of photo
============================================================ */
body[data-page="our-story"] .story-making {
  /* User #58: heading needs to start lower — Figma literal 32 reads
     too tight visually because browser metrics put the bold close
     paragraph baseline higher than Figma's. Bumped to 80 so the
     'Making of the Ashram' heading gets clear breathing room from
     the close paragraph above. */
  padding-top: min(80px, calc(80 / 1920 * 100vw));
}
body[data-page="our-story"] .story-making__inner {
  width: 100%; max-width: none; padding: 0; margin: 0;
  /* Base styles.css has display:flex, flex-direction:column,
     align-items:center, text-align:center on this — which centered
     the __head as a flex child. Override so __head fills full width
     and contents text-align: left from x=149 padding. */
  display: block;
  text-align: left;
}
body[data-page="our-story"] .story-making__head {
  padding-left: min(412px, calc(412 / 1920 * 100vw)); /* QC r27: align with centered video (x=412) */
  padding-right: min(412px, calc(412 / 1920 * 100vw));
  max-width: none;
}
body[data-page="our-story"] .story-making__head h2 {
  /* Figma 4148:1888: STIX Two Text Medium 52px line 58 #4a3b2e,
     w=869 (heading wraps at 869). +8% browser compensation = 938. */
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: calc(58 / 52);
  color: #4a3b2e;
  margin: 0 0 min(25px, calc(25 / 1920 * 100vw));
  max-width: min(938px, calc(938 / 1920 * 100vw));
  text-align: left;
}
body[data-page="our-story"] .story-making__head p {
  /* Figma 4148:1889: Inter Regular 20px line 38 #282828, w=563.
     +8% browser compensation = 608. */
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(38 / 20);
  color: #282828;
  margin: 0;
  max-width: min(608px, calc(608 / 1920 * 100vw));
  text-align: left;
}
body[data-page="our-story"] .story-making__image {
  /* QC r27: Figma updated 4148:1843 -> 1096x616 centered (x=412). */
  width: min(1096px, calc(1096 / 1920 * 100vw));
  aspect-ratio: 1096 / 616;
  margin: min(50px, calc(50 / 1920 * 100vw)) auto 0;
  background-size: cover; background-position: center;
  border-radius: 12px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: auto;
  min-height: 0;
}
body[data-page="our-story"] .story-making__play {
  /* Figma 4148:1844: gridicons:play 69×69 at center of photo. */
  width: min(69px, calc(69 / 1920 * 100vw));
  height: min(69px, calc(69 / 1920 * 100vw));
  display: flex; align-items: center; justify-content: center;
  color: #ffffff;
}
body[data-page="our-story"] .story-making__play svg {
  width: 100%; height: 100%;
}
/* QC OS-r31: the poster box is clickable; the injected <video> fills the
   same rounded 16:9 box. */
body[data-page="our-story"] .story-making__image { cursor: pointer; overflow: hidden; }
body[data-page="our-story"] .story-making__video {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  background: #000;
}

/* ============================================================
   CONTINUE THE JOURNEY — Figma 4148:1846 (y=3328→3768, h=440)
   - bg #bea884 tan
   - Heading "Continue the Journey" at y mid=3437.5 (top=3411)
     centered, STIX Two Text Medium 52px line normal #fafafa
   - Body "Explore the Ashram..." at y top=3502, w=716, centered
     Inter Regular 28px line 44 #fafafa text-center
   - Buttons at y=3640, 244×60 each, gap=40, bg #fafafa rounded 40
     padding 0 20, text Inter Medium 16px #5a381c
============================================================ */
body[data-page="our-story"] .story-continue {
  width: 100%;
  height: min(440px, calc(440 / 1920 * 100vw));
  background: #bea884;
  display: flex; align-items: center; justify-content: center;
  /* Photo ends y=3216, band starts y=3328 → 112px gap. */
  margin-top: min(112px, calc(112 / 1920 * 100vw));
}
body[data-page="our-story"] .story-continue__inner {
  width: 100%; max-width: none;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 20px;
}
body[data-page="our-story"] .story-continue h2 {
  /* Figma 4148:1849: STIX Two Text Medium 52px #fafafa.
     Heading y mid=3437.5, body y top=3502 → 38px from heading mid to
     body top, so margin-bottom on heading ≈ 38 - 26 = 12. */
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: 1.1;
  color: #fafafa;
  margin: 0 0 min(12px, calc(12 / 1920 * 100vw));
  text-align: center;
}
body[data-page="our-story"] .story-continue p {
  /* Figma 4148:1850: Inter Regular 28px line 44 #fafafa text-center
     w=716 (+8% browser comp = 774). */
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(28px, calc(28 / 1920 * 100vw));
  line-height: calc(44 / 28);
  color: #fafafa;
  text-align: center;
  max-width: min(774px, calc(774 / 1920 * 100vw));
  margin: 0 0 min(50px, calc(50 / 1920 * 100vw));
  /* Body ends ≈3590 (2 lines × 44), buttons at 3640 → 50px gap. */
}
body[data-page="our-story"] .story-continue__buttons {
  display: flex; justify-content: center;
  /* Figma: button A left=696, B left=980 → 40px gap. */
  gap: min(40px, calc(40 / 1920 * 100vw));
}
body[data-page="our-story"] .story-continue__btn {
  /* Figma 4148:1884 / 1885: 244×60 bg #fafafa rounded 40 padding 0 20
     gap 12, text Inter Medium 16px line 20 #5a381c. */
  display: inline-flex; align-items: center; justify-content: center;
  gap: min(12px, calc(12 / 1920 * 100vw));
  width: min(244px, calc(244 / 1920 * 100vw));
  height: min(60px, calc(60 / 1920 * 100vw));
  padding: 0 min(20px, calc(20 / 1920 * 100vw));
  border-radius: min(40px, calc(40 / 1920 * 100vw));
  background: #fafafa;
  border: 0;
  color: #5a381c;
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(16px, calc(16 / 1920 * 100vw));
  line-height: 20px;
  text-decoration: none;
}
body[data-page="our-story"] .story-continue__btn:hover {
  /* Figma hover variant fills the pill brown with white text + inverted
     icon. Was just background:#ffffff which kept the default look. */
  background: #5a381c;
  color: #ffffff;
  border-color: #5a381c;
}
body[data-page="our-story"] .story-continue__btn:hover svg rect { fill: #fafafa; }
body[data-page="our-story"] .story-continue__btn:hover svg path { stroke: #5a381c; }
body[data-page="our-story"] .story-continue__arrow {
  /* Figma uses a Lucide chevron-right 20×20 with stroke only — base
     styles.css gives it a brown filled circle bg (var(--accent)).
     Override: no background, no border-radius, currentColor stroke. */
  display: inline-flex; align-items: center; justify-content: center;
  width: min(20px, calc(20 / 1920 * 100vw));
  height: min(20px, calc(20 / 1920 * 100vw));
  flex-shrink: 0;
  background: transparent;
  border-radius: 0;
  color: currentColor;
}
body[data-page="our-story"] .story-continue__arrow svg {
  width: 100%; height: 100%;
  stroke-width: 2;
}

/* ============================================================
   MOBILE (<768) — Figma node 4149:6104 (390 × 2983)
   ============================================================ */
@media (max-width: 1023px) {
  /* =========================================================
     MOBILE 1:1 — Figma uk09oojES0Fa629QvQ2RJg node 4149:6104.
     Layout scales with min(Xpx, X/390*100vw); TEXT is fixed px
     (scaling text below 390 reads scrunched, above 390 bloats).
     ========================================================= */

  /* ---- HERO (4149:6151-6161): centered kicker + title over veil ---- */
  body[data-page="our-story"] .inner-hero {
    height: min(575px, calc(575 / 390 * 100vw));
    background-color: #34495d;   /* navy fills below the image + behind the text, like Figma */
  }
  body[data-page="our-story"] .inner-hero__image {
    /* Figma frames the building in the UPPER portion with navy below for the
       text. Our asset has the building filling its full height, so plain cover
       pins the base too low + over-zooms. Constrain the image to the top ~77%
       (less zoom, full building) and let the hero's navy show below. */
    inset: 0;
    background-size: auto min(527px, calc(527 / 390 * 100vw));   /* building ~63% of hero, like Figma */
    background-position: center calc(-35 / 390 * 100vw);          /* roof ~6%, base ~69%; navy fills below */
    background-repeat: no-repeat;
    /* asset is a vivid saturated blue (#1d557d); Figma uses a muted navy
       (#3a536b). Desaturate + nudge to match (mobile only — desktop untouched). */
    filter: saturate(0.42) brightness(1.05);
  }
  body[data-page="our-story"] .inner-hero__inner {
    left: 0; right: 0; width: 100%;
    top: min(453px, calc(453 / 390 * 100vw));   /* text ~50px above hero bottom */
    transform: none;
    align-items: center;
    text-align: center;
    padding: 0 min(24px, calc(24 / 390 * 100vw));
  }
  body[data-page="our-story"] .inner-hero__kicker {
    font-size: 12px; line-height: 20px;
    letter-spacing: 0.84px;             /* Figma tracking 0.84 */
    margin: 0 0 12px;
    white-space: nowrap;                /* Figma: kicker on ONE line */
  }
  body[data-page="our-story"] .inner-hero__title {
    font-size: 32px; line-height: 1.1;  /* Figma STIX Medium 32 */
  }
  /* Figma hero is a dark navy block (gradient #2b445d→#2a425b); the shared
     veil is near-transparent and read washed-out. Darken it on mobile. */
  body[data-page="our-story"] .inner-hero__veil {
    /* Figma keeps the navy line-drawing CRISP up top and only darkens behind
       the text. Transparent for the top half (don't murk the lines), navy at
       the bottom. (Old shared veil was light-blue → washed out; my last one
       was uniformly dark → murky. This is the in-between Figma uses.) */
    background: linear-gradient(180deg, rgba(42,66,91,0) 0%, rgba(42,66,91,0) 50%, rgba(42,66,91,0.34) 73%, rgba(42,66,91,0.64) 100%);
  }

  /* ---- A HOME CLOSER TO HOME (4149:1638-1646) ---- */
  body[data-page="our-story"] .story-home {
    background: #fafafa;                /* mobile sits on page #fafafa, not cream */
    /* tighter top so there isn't a big white gap between hero and the slideshow */
    padding: min(24px, calc(24 / 390 * 100vw)) min(13px, calc(13 / 390 * 100vw)) min(40px, calc(40 / 390 * 100vw));
    gap: min(25px, calc(25 / 390 * 100vw));
  }
  /* Figma mobile = ONE full image (NO peek slivers, NO progress line, NO 1/5),
     and the prev/next buttons sit BELOW the copy. Reorder: image → copy → nav. */
  body[data-page="our-story"] .story-home__carousel { order: 0; gap: 0; }
  body[data-page="our-story"] .story-home__copy     { order: 1; }
  body[data-page="our-story"] .story-home__nav      { order: 2; margin: min(28px, calc(28 / 390 * 100vw)) 0 0 !important; }
  body[data-page="our-story"] .story-home__progress,
  body[data-page="our-story"] .story-home__indicator { display: none !important; }
  /* single full-width slide: kill the peek (track padding/gap), grayscale,
     opacity, and the desktop peek masks */
  body[data-page="our-story"] .story-home__track { padding: 0 !important; gap: 0 !important; }
  body[data-page="our-story"] .story-home__slide {
    flex: 0 0 100% !important; width: 100%;
    aspect-ratio: 364 / 340;            /* Figma carousel image 364x340 */
    border-radius: 0;                   /* Figma: SQUARE container, NOT rounded */
    filter: none !important; opacity: 1 !important;
    background-size: cover !important; background-position: center !important;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  /* Mobile = ONE full image, no peeks: the slide paints its own background
     (cover, above); the desktop ::before peek layer must not double-paint. */
  body[data-page="our-story"] .story-home__slide::before { display: none !important; }
  /* Slider arrows — Figma uses lucide ARROWS (shaft + head) with a SOLID
     #5e2a29 border + wider gap. Ours were bare thin chevrons (no shaft) with a
     faint 30% border. The inline <svg> is shared with desktop, so override it
     here (mobile-only): hide the chevron, paint a lucide arrow via mask so it
     still inherits currentColor (brown → white on hover). */
  body[data-page="our-story"] .story-home__nav { gap: min(26px, calc(26 / 390 * 100vw)); }
  body[data-page="our-story"] .story-home__nav .carousel-btn { border-color: #5e2a29; }
  body[data-page="our-story"] .story-home__nav .carousel-btn svg { display: none; }
  body[data-page="our-story"] .story-home__nav .carousel-btn::after {
    content: ""; display: block; width: 26px; height: 26px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;   mask-position: center;
    -webkit-mask-size: contain;      mask-size: contain;
  }
  body[data-page="our-story"] .story-home__nav #storyNext::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  }
  body[data-page="our-story"] .story-home__nav #storyPrev::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E");
  }
  body[data-page="our-story"] .story-home__copy {
    width: 100%;
    max-width: min(350px, calc(350 / 390 * 100vw));
    margin: 0 auto;          /* drop redundant top margin — the 25px flex gap is the only gap (was 25+25=50) */
    padding: 0;
    text-align: center;
  }
  body[data-page="our-story"] .story-home__copy h2 {
    font-family: 'STIX Two Text', serif; font-weight: 500; font-style: normal;
    font-size: 24px; line-height: 29px;
    color: #5e2a29;
    text-align: center;
    margin: 0 0 min(25px, calc(25 / 390 * 100vw));
  }
  body[data-page="our-story"] .story-home__copy p {
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 24px;
    color: #353535;
    text-align: left;
    max-width: min(320px, calc(320 / 390 * 100vw));
    margin: 0 auto;
  }
  body[data-page="our-story"] .story-home__copy p + p {
    margin-top: min(25px, calc(25 / 390 * 100vw));
  }
  body[data-page="our-story"] .story-home__copy p.story-home__close {
    font-family: 'STIX Two Text', serif; font-weight: 700; font-style: normal;
    font-size: 14px; line-height: 24px;
    color: #5e2a29;
    text-align: center;
    max-width: min(236px, calc(236 / 390 * 100vw));
    margin: min(25px, calc(25 / 390 * 100vw)) auto 0 !important;
  }
  body[data-page="our-story"] .story-home__copy p.story-home__close em {
    font-family: 'STIX Two Text', serif; font-style: italic; font-weight: 700;
    font-size: 16px;
  }

  /* ---- THE MAKING OF THE ASHRAM (4149:6164-6171): image ABOVE head ---- */
  body[data-page="our-story"] .story-making {
    padding: min(40px, calc(40 / 390 * 100vw)) 0 0;  /* no side pad → image full-bleed */
  }
  body[data-page="our-story"] .story-making__inner {
    display: flex; flex-direction: column-reverse;  /* DOM = head→image; reverse = image on top */
    align-items: center;
    gap: min(30px, calc(30 / 390 * 100vw));
    text-align: center;
  }
  body[data-page="our-story"] .story-making__head {
    padding: 0 min(35px, calc(35 / 390 * 100vw));  /* side pad on text only */
    max-width: none; text-align: center; width: 100%;
  }
  body[data-page="our-story"] .story-making__head h2 {
    font-family: 'STIX Two Text', serif; font-weight: 500;
    font-size: 24px; line-height: 29px;
    color: #5e2a29;
    text-align: center;
    max-width: none;
    margin: 0 0 min(8px, calc(8 / 390 * 100vw));
  }
  body[data-page="our-story"] .story-making__head p {
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 24px;
    color: #282828;
    text-align: center;
    max-width: none;
    margin: 0;
  }
  body[data-page="our-story"] .story-making__image {
    width: 100%;
    aspect-ratio: 390 / 240;            /* Figma image full-width h240 */
    margin: 0;
    height: auto;
    border-radius: 0;                   /* Figma: sharp full-bleed corners (NOT rounded) */
  }

  /* ---- CONTINUE THE JOURNEY (4149:6172-6178): CREAM band, dark text ---- */
  body[data-page="our-story"] .story-continue {
    height: auto;
    background: #f0eade;                /* mobile = cream (desktop is tan #bea884) */
    padding: min(35px, calc(35 / 390 * 100vw));
    margin-top: min(40px, calc(40 / 390 * 100vw));
  }
  body[data-page="our-story"] .story-continue__inner { padding: 0; }
  body[data-page="our-story"] .story-continue h2 {
    font-size: 20px; line-height: 1.2;
    color: #5e2a29;
    margin: 0 0 min(15px, calc(15 / 390 * 100vw));
  }
  body[data-page="our-story"] .story-continue p {
    font-size: 12px; line-height: 24px;
    color: #282828;
    max-width: min(230px, calc(230 / 390 * 100vw));
    margin: 0 0 min(15px, calc(15 / 390 * 100vw));
  }
  body[data-page="our-story"] .story-continue__buttons {
    flex-direction: row;
    justify-content: center;
    gap: min(20px, calc(20 / 390 * 100vw));
    width: 100%;
  }
  body[data-page="our-story"] .story-continue__btn {
    flex: 0 0 auto;
    width: auto;
    height: min(44px, calc(44 / 390 * 100vw));
    padding: 0 min(20px, calc(20 / 390 * 100vw));
    border-radius: min(40px, calc(40 / 390 * 100vw));  /* Figma: rounded pill (was inheriting desktop's ~8px collapse) */
    font-size: 12px;
    color: #5e2a29;
    background: #fafafa;
  }
  body[data-page="our-story"] .story-continue__arrow { display: none; }  /* Figma mobile buttons are text-only */
}