/* ============================================================
   INSPIRATION & FOUNDER — 1:1 Figma rebuild
   Desktop source: Figma node 4148:1711 (1920×11758)
   Mobile source : Figma node 4149:6179 (390×8742)
   All positions/sizes derived from Figma MCP source.
   Scales proportionally below 1920vp via min(Xpx, X/1920*100vw).
   This file is the single source of truth for IF page layout.
============================================================ */
body[data-page="inspiration-and-founder"] { background: #fafafa; }

/* Strip base section padding so absolute Figma Y positions drive layout */
body[data-page="inspiration-and-founder"] section.narrative,
body[data-page="inspiration-and-founder"] section.section--stack,
body[data-page="inspiration-and-founder"] section.two-col,
body[data-page="inspiration-and-founder"] section.testimonial-v2 {
  padding-top: 0; padding-bottom: 0; margin: 0;
}
body[data-page="inspiration-and-founder"] section > .container {
  max-width: none; width: 100%; padding: 0; margin: 0;
}

/* ============ HERO — Figma node 4148:1712 (y=176→1079, h=903)
   The hero box is 903 tall but the gradient bg (node 4148:1713) is only
   837 tall (y=177→1014). The 3 God HD image (node 4148:1714) is 903
   tall and extends 66px BELOW the gradient — that 66px of white space
   under the gradient is the "breathing room" before Our Roots that the
   site was eating by painting the gradient across the full 903. Using
   background-size to limit the gradient to ~92.7% (837/903) of the
   hero. ============ */
body[data-page="inspiration-and-founder"] .if-hero {
  position: relative; width: 100%;
  height: min(903px, calc(903 / 1920 * 100vw));
  overflow: hidden; margin: 0; padding: 0;
  background-image: linear-gradient(89.74deg, rgba(239,234,223,0.6) 0%, rgba(190,168,132,0.6) 99.9%);
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% calc(837 / 903 * 100%);
}
body[data-page="inspiration-and-founder"] .if-hero__figures {
  position: absolute; top: 0;
  left: min(1040px, calc(1040 / 1920 * 100vw));
  width: min(833px, calc(833 / 1920 * 100vw));
  height: 100%; object-fit: cover; object-position: center;
  pointer-events: none;
}
body[data-page="inspiration-and-founder"] .if-hero__inner {
  position: absolute; padding: 0; margin: 0;
  left: min(148px, calc(148 / 1920 * 100vw));
  top:  min(538px, calc(538 / 1920 * 100vw));
  width: min(750px, calc(750 / 1920 * 100vw));
  text-align: left; align-items: flex-start;
}
body[data-page="inspiration-and-founder"] .if-hero__kicker {
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase;
  color: #695433;
  margin: 0 0 min(24px, calc(24 / 1920 * 100vw));
}
body[data-page="inspiration-and-founder"] .if-hero__title {
  font-family: 'STIX Two Text', serif; font-weight: 400;
  font-size: min(64px, calc(64 / 1920 * 100vw));
  line-height: 1.05; letter-spacing: 0; margin: 0;
  background: linear-gradient(to right, #9d7e4b 33.69%, #6f441e 98.41%);
  background-clip: text; -webkit-background-clip: text; color: transparent;
}

/* Shared eyebrow + h2 + body typography for IF narrative sections */
body[data-page="inspiration-and-founder"] .narrative__head .eyebrow {
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #282828; margin: 0 0 min(25px, calc(25 / 1920 * 100vw));
  line-height: 1.2;
}
body[data-page="inspiration-and-founder"] .narrative__head h2 {
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: calc(58 / 52);
  color: #5a381c; margin: 0;
  letter-spacing: 0;
}
body[data-page="inspiration-and-founder"] .narrative__body p {
  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 0 min(22px, calc(22 / 1920 * 100vw));
}
body[data-page="inspiration-and-founder"] .narrative__body p:last-child { margin-bottom: 0; }

/* ============ OUR ROOTS — Figma node 4148:1765 (y=1109→1408, centered) ============ */
body[data-page="inspiration-and-founder"] section[aria-labelledby="rootsHeading"] {
  padding-top: min(30px, calc(30 / 1920 * 100vw));
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="rootsHeading"] .narrative__head {
  text-align: center; align-items: center; gap: 0;
  margin: 0 auto; max-width: none; padding: 0 20px;
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="rootsHeading"] .narrative__head h2 {
  white-space: nowrap;
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="rootsHeading"] .narrative__body {
  /* Figma node 4148:1769: text-align defaults to LEFT inside the
     1154-wide centered block. With box-sizing:border-box, padding
     eats into max-width — the old `padding: 0 20px` made the content
     1114 instead of 1154, which is why the body wrapped one line
     earlier than Figma. Dropped the padding; the centered block
     can't touch viewport edges because max-width scales with vw. */
  text-align: left;
  max-width: min(1154px, calc(1154 / 1920 * 100vw));
  margin: min(42px, calc(42 / 1920 * 100vw)) auto 0;
  padding: 0;
}

/* QC IF-r34: Mahavir/Jin mandir band removed from the page; the PKD
   chitrapat band (.band-image--shrimadji below) now sits in this slot,
   between Our Roots and Our Inspiration, per updated Figma 4148:1759. */

/* ============ OUR INSPIRATION — Figma node 4148:1760 (y=2461→2906, centered) ============ */
body[data-page="inspiration-and-founder"] section[aria-labelledby="shrimadjiHeading"] {
  padding-top: min(70px, calc(70 / 1920 * 100vw));
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="shrimadjiHeading"] .narrative__head {
  text-align: center; align-items: center; gap: 0;
  margin: 0 auto; max-width: none; padding: 0 20px;
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="shrimadjiHeading"] .narrative__head h2 {
  white-space: nowrap;
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="shrimadjiHeading"] .narrative__body {
  /* Same as Roots: Figma node 4148:1764 defaults to text-align left
     inside a centered 1145-wide block. Padding removed — see Roots
     body for the box-sizing rationale. */
  text-align: left;
  max-width: min(1145px, calc(1145 / 1920 * 100vw));
  margin: min(42px, calc(42 / 1920 * 100vw)) auto 0;
  padding: 0;
}

/* ============ SHRIMADJI — Figma node 4148:1759 (1619×839 @ y=2976, x=150, 1.930) ============ */
body[data-page="inspiration-and-founder"] .band-image--shrimadji {
  width: min(1619px, calc(1619 / 1920 * 100vw));
  margin: min(70px, calc(70 / 1920 * 100vw)) auto 0;
  padding: 0;
}
body[data-page="inspiration-and-founder"] .band-image--shrimadji > div {
  width: 100%; aspect-ratio: 1619 / 839; max-height: none;
  border-radius: 5px; background-size: cover; background-position: center;
}

/* ============ GOLD QUOTE bands — Figma 4148:1770 + 4148:1775 (542 tall, full-bleed) ============ */
body[data-page="inspiration-and-founder"] .gold-quote {
  margin: min(70px, calc(70 / 1920 * 100vw)) 0 0;
  height: min(542px, calc(542 / 1920 * 100vw));
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: url('assets/quote-bg.jpg') center / cover no-repeat;
  position: relative; overflow: hidden;
}
body[data-page="inspiration-and-founder"] .gold-quote::before { content: none; }
body[data-page="inspiration-and-founder"] .gold-quote__inner {
  position: relative; max-width: min(1500px, calc(1500 / 1920 * 100vw));
  width: 100%; padding: 0 20px; margin: 0 auto;
  text-align: center; gap: 0;
}
body[data-page="inspiration-and-founder"] .gold-quote__primary {
  font-family: 'STIX Two Text', serif; font-weight: 400; font-style: normal;
  font-size: min(32px, calc(32 / 1920 * 100vw));
  line-height: calc(60 / 32); color: #4a3b2e;
  margin: 0; padding: 0;
}
body[data-page="inspiration-and-founder"] .gold-quote__attribution {
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: min(34px, calc(34 / 1920 * 100vw));
  line-height: calc(55 / 34);
  letter-spacing: 0.1em; text-transform: uppercase; color: #5e2a29;
  margin: min(33px, calc(33 / 1920 * 100vw)) 0;
  padding: 0;
}

/* ============ OUR FOUNDER — Figma node 4148:1779 (y=4497, LEFT-aligned at x=385) ============ */
body[data-page="inspiration-and-founder"] section[aria-labelledby="founderHeading"] {
  padding-top: min(70px, calc(70 / 1920 * 100vw));
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="founderHeading"] .narrative__head {
  text-align: left; align-items: flex-start; gap: 0;
  margin: 0 0 0 min(385px, calc(385 / 1920 * 100vw));
  max-width: min(658px, calc(658 / 1920 * 100vw));
  padding: 0;
}

/* ============ LEGACY OF WISDOM — y=4644 photo, y=5605 subhead, y=5671 body
   Photo if-legacy: 1147×921 @ x=385, body 914 wide @ x=385 ============ */
body[data-page="inspiration-and-founder"] section[aria-labelledby="legacyHeading"] {
  padding-top: min(40px, calc(40 / 1920 * 100vw));
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="legacyHeading"] > .container {
  display: flex; flex-direction: column;
  padding-left: min(385px, calc(385 / 1920 * 100vw));
  padding-right: min(388px, calc(388 / 1920 * 100vw));
}
body[data-page="inspiration-and-founder"] .band-image--legacy {
  width: 100%; max-width: min(1147px, calc(1147 / 1920 * 100vw));
  margin: 0 0 min(40px, calc(40 / 1920 * 100vw)) 0;
  padding: 0;
}
body[data-page="inspiration-and-founder"] .band-image--legacy > div {
  width: 100%; aspect-ratio: 1147 / 921; max-height: none;
  border-radius: 8px;
  /* Figma node 4148:1783 inner img: w:157.44%, h:131.26%, left:-28.35%,
     top:0. The image is INTENTIONALLY scaled larger than the container
     (157% wide), then centered horizontally so the left/right overflow
     is symmetric. `cover` was scaling the image just barely to fit —
     that's the "zoomed out" look. Now using explicit 157.44% size to
     match Figma's zoom level + center top to match the -28.35% bleed. */
  background-size: 157.44% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="legacyHeading"] .section--stack__head {
  max-width: min(914px, calc(914 / 1920 * 100vw));
  margin: 0; padding: 0;
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="legacyHeading"] .section--stack__head h3 {
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(34px, calc(34 / 1920 * 100vw));
  line-height: 1.2; letter-spacing: 0.02em; color: #4a3b2e;
  margin: 0 0 min(25px, calc(25 / 1920 * 100vw));
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="legacyHeading"] .section--stack__head p {
  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;
}

/* ============ STEADY FORCE OF COMPASSION — y=5923, photo LEFT (620x581) + text RIGHT (486) ============ */
body[data-page="inspiration-and-founder"] section[aria-labelledby="compassionHeading"] {
  padding-top: min(100px, calc(100 / 1920 * 100vw));
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="compassionHeading"] .two-col__grid {
  display: grid;
  grid-template-columns:
    min(620px, calc(620 / 1920 * 100vw))
    min(490px, calc(490 / 1920 * 100vw));
  gap: min(41px, calc(41 / 1920 * 100vw));
  align-items: start;
  width: 100%; max-width: none; margin: 0;
  padding-left:  min(386px, calc(386 / 1920 * 100vw));
  padding-right: min(383px, calc(383 / 1920 * 100vw));
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="compassionHeading"] .two-col__image {
  width: 100%; max-width: none; aspect-ratio: 620 / 581;
  border-radius: 8px; background-size: cover; background-position: center;
  min-height: 0; justify-self: start;
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="compassionHeading"] .two-col__copy {
  padding-top: min(62px, calc(62 / 1920 * 100vw));
  gap: min(25px, calc(25 / 1920 * 100vw));
  display: flex; flex-direction: column;
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="compassionHeading"] .two-col__copy h3 {
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(34px, calc(34 / 1920 * 100vw));
  line-height: 1.45; letter-spacing: 0.02em; color: #4a3b2e;
  margin: 0;
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="compassionHeading"] .two-col__copy p {
  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;
}

/* ============ SPEARHEADING A GLOBAL MOVEMENT — y=6604 (text above), y=6822 photo (1147x921) ============ */
body[data-page="inspiration-and-founder"] section[aria-labelledby="movementHeading"] {
  padding-top: min(100px, calc(100 / 1920 * 100vw));
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="movementHeading"] > .container {
  display: flex; flex-direction: column;
  /* Kill inherited .section--stack .container gap (clamp(24,3vw,44))
     that was stacking on top of the head's margin-bottom. */
  gap: 0;
  padding-left: min(386px, calc(386 / 1920 * 100vw));
  padding-right: min(388px, calc(388 / 1920 * 100vw));
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="movementHeading"] .section--stack__head {
  max-width: min(869px, calc(869 / 1920 * 100vw));
  /* Figma spec is 40px gap (photo y=6822 - body end y=6782) but user
     flagged this as too tall on site (wrapped text pushes the photo
     further down). Tightened to ~20 for visual parity. */
  margin: 0 0 min(20px, calc(20 / 1920 * 100vw)) 0; padding: 0;
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="movementHeading"] .section--stack__head h3 {
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(34px, calc(34 / 1920 * 100vw));
  line-height: 1.45; letter-spacing: 0.02em; color: #4a3b2e;
  margin: 0 0 min(25px, calc(25 / 1920 * 100vw));
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="movementHeading"] .section--stack__head p {
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(34 / 20); color: #282828; margin: 0;
}
body[data-page="inspiration-and-founder"] .band-image--movement {
  width: 100%; max-width: min(1147px, calc(1147 / 1920 * 100vw));
  margin: 0; padding: 0;
}
body[data-page="inspiration-and-founder"] .band-image--movement > div {
  /* QC IF-r36 (2026-07-02): ORIGINAL photo (if-movement.jpg) restored in
     place of the mission-centers map; photo-era treatment reinstated.
     Figma node 4148:1797 mask shifts the visible window 181px to the
     RIGHT inside the 1567-wide frame, so the right portion of the
     source photo (Pujya from behind + raised hands) lands in the
     visible 1147 area ('left top' would show the audience-only left half). */
  width: 100%; aspect-ratio: 1147 / 921; max-height: none;
  border-radius: 8px; background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
}

/* ============ OUR PHILOSOPHY — Figma node 4148:1800 (y=8425, LEFT at x=149) ============ */
body[data-page="inspiration-and-founder"] section[aria-labelledby="philosophyHeading"] {
  padding-top: min(70px, calc(70 / 1920 * 100vw));
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="philosophyHeading"] .narrative__head {
  text-align: left; align-items: flex-start; gap: 0;
  margin: 0 0 0 min(149px, calc(149 / 1920 * 100vw));
  max-width: min(1032px, calc(1032 / 1920 * 100vw));
  padding: 0;
}
body[data-page="inspiration-and-founder"] section[aria-labelledby="philosophyHeading"] .narrative__body {
  text-align: left;
  margin: min(40px, calc(40 / 1920 * 100vw)) 0 0 min(149px, calc(149 / 1920 * 100vw));
  max-width: min(1032px, calc(1032 / 1920 * 100vw));
  padding: 0;
}

/* if-philosophy.jpg — Figma 4148:1801: 1619x846 (1.914), x=149 (LEFT)
   Gap above photo = Figma 40 (body ends y=8671, photo starts y=8711).
   Was bumped to 80 in #28 to compensate for the body sitting at x=0
   from an inline-style override — that root cause is fixed now (the
   inline margin-left:0 was stripped in commit aede8bc), so the 40
   gap is the actual Figma spec. */
body[data-page="inspiration-and-founder"] .band-image:has(> div[style*="if-philosophy"]) {
  width: min(1619px, calc(1619 / 1920 * 100vw));
  margin: min(40px, calc(40 / 1920 * 100vw)) 0 0 min(149px, calc(149 / 1920 * 100vw));
  padding: 0;
}
body[data-page="inspiration-and-founder"] .band-image:has(> div[style*="if-philosophy"]) > div {
  width: 100%; aspect-ratio: 1619 / 846; max-height: none;
  border-radius: 8px; background-size: cover;
  /* Figma node 4148:1801 inner img: top:0, h:127.6% — image anchored at
     the TOP of the container, bottom is cropped. Was 'center' (equal
     crop top + bottom) which clipped the blue above Pujya's head. */
  background-position: center top;
}

/* ============ VOICES OF RESPECT — Figma node 4148:1807 (y=9628) ============ */
body[data-page="inspiration-and-founder"] section.testimonial-v2 {
  padding-top: min(71px, calc(71 / 1920 * 100vw));
}
body[data-page="inspiration-and-founder"] .testimonial-v2__inner {
  width: 100%; max-width: none; margin: 0;
  padding: 0 min(149px, calc(149 / 1920 * 100vw));
}
body[data-page="inspiration-and-founder"] .testimonial-v2__head {
  max-width: none; margin: 0 0 min(40px, calc(40 / 1920 * 100vw));
  text-align: left; align-items: flex-start; gap: 0;
}
body[data-page="inspiration-and-founder"] .testimonial-v2__head .eyebrow {
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  letter-spacing: 0.06em; text-transform: uppercase; color: #282828;
  margin: 0 0 min(14px, calc(14 / 1920 * 100vw));
}
body[data-page="inspiration-and-founder"] .testimonial-v2__head h3 {
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: calc(58 / 52); color: #5a381c;
  margin: 0 0 min(25px, calc(25 / 1920 * 100vw));
  max-width: none; white-space: nowrap; text-wrap: nowrap;
}
body[data-page="inspiration-and-founder"] .testimonial-v2__head p {
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(38 / 20); color: #343434;
  max-width: min(890px, calc(890 / 1920 * 100vw));
  margin: 0;
}
/* QC IF-r14 (reopened): testimonial quote must render NON-ITALICIZED per Figma.
   Overrides the base italic in styles.css (.testimonial-slide__quote). Only
   flips font-style — size/color/placement stay as-is. */
body[data-page="inspiration-and-founder"] .testimonial-slide__quote {
  font-style: normal;
}

/* ============ CONTINUE LEARNING BAND — y=10774 (260 tall) per Figma ============ */
body[data-page="inspiration-and-founder"] .continue-band {
  margin-top: min(70px, calc(70 / 1920 * 100vw));
  height: min(260px, calc(260 / 1920 * 100vw));
  padding: 0;
  background: #BEA884;
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
body[data-page="inspiration-and-founder"] .continue-band h3 {
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(34px, calc(34 / 1920 * 100vw));
  line-height: 1.2;
  color: #FAFAFA;
  text-transform: capitalize;
  margin: 0 0 min(40px, calc(40 / 1920 * 100vw));
  max-width: none;
  padding: 0 20px;
  white-space: nowrap;
}
body[data-page="inspiration-and-founder"] .continue-band__buttons .btn .btn-icon {
  width: min(20px, calc(20 / 1920 * 100vw));
  height: min(20px, calc(20 / 1920 * 100vw));
  background: #5A381C;
  border-radius: 100px;
}
body[data-page="inspiration-and-founder"] .continue-band__buttons .btn .btn-icon svg {
  width: min(12px, calc(12 / 1920 * 100vw));
  height: min(12px, calc(12 / 1920 * 100vw));
  stroke: #FAFAFA;
  stroke-width: 1.26392;
}
body[data-page="inspiration-and-founder"] .continue-band__buttons {
  display: flex; justify-content: center;
  gap: min(40px, calc(40 / 1920 * 100vw));
}
body[data-page="inspiration-and-founder"] .continue-band__buttons .btn {
  width: min(244px, calc(244 / 1920 * 100vw));
  height: min(60px, calc(60 / 1920 * 100vw));
  min-width: 0;
  padding: 0 min(20px, calc(20 / 1920 * 100vw));
  border-radius: min(40px, calc(40 / 1920 * 100vw));
  background: #FAFAFA;
  border: none;
  color: var(--accent);
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(16px, calc(16 / 1920 * 100vw));
  display: inline-flex; align-items: center; justify-content: center;
  gap: min(12px, calc(12 / 1920 * 100vw));
}
body[data-page="inspiration-and-founder"] .continue-band__buttons .btn:hover {
  background: var(--accent); color: #FAFAFA;
}

/* ============ MOBILE OVERRIDES (<768) — Figma node 4149:6179 (390x8742)
   Mobile layout is genuinely different: hero stacks vertically (image
   above title), photos go full-bleed (390 wide), narrative content
   has ~38px side padding (~9.74% of 390). Override everything that
   used 1920-frame positioning above. Extended to <=1023 so iPad portrait uses
   this mobile layout instead of the tiny 1920-scaled desktop view. ============ */
@media (max-width: 1023px) {
  /* ===== HERO §1 — Figma 4149:6214 (figures 343×372) + 4149:6215 (text)
     Figures centered on top, 39px below nav (y234-195). Kicker Inter 500
     12/20 #5a381c ls0.84px uppercase center w260, 44px below figures.
     Title STIX 500 32px gradient #9d7e4b→#6f441e center. Vertical
     gradient light cream→warm tan (same stops as desktop). Gap title→
     Our Roots = 81px (849-768). ===== */
  body[data-page="inspiration-and-founder"] .if-hero {
    height: auto;
    /* Figma node "Rectangle 34624524" (4149:6213) via MCP get_design_context:
       div has opacity:0.6 AND gradient stops at 0.6 alpha → 0.36 effective
       over the #fafafa page. Baked to 0.36-alpha stops (identical result
       over #fafafa). Angle 89.85deg per Figma codegen. */
    background: linear-gradient(89.85deg, rgba(239,234,223,0.36) 0%, rgba(190,168,132,0.36) 99.915%);
    padding: 0 0 calc(43 / 390 * 100vw); /* +38 Our Roots pad-top = 81 total */
  }
  body[data-page="inspiration-and-founder"] .if-hero__figures {
    /* Mobile uses the Figma "3 God HD (3) 1" asset (node 4149:6214) which
       has the warm radial glow baked in — the desktop if-hero-figures.png
       is glow-less. content:url swaps it mobile-only (desktop untouched).
       cover/center reproduces the Figma node crop (img 192.81% w, ~center). */
    content: url('assets/if-hero-figures-glow.png');
    position: relative;
    left: auto;
    width: calc(343 / 390 * 100vw);
    height: calc(372 / 390 * 100vw);
    margin: calc(39 / 390 * 100vw) auto 0;
    display: block;
    object-fit: cover;
    object-position: center;
  }
  body[data-page="inspiration-and-founder"] .if-hero__inner {
    position: relative; top: auto; left: auto;
    width: calc(314 / 390 * 100vw);
    margin: calc(44 / 390 * 100vw) auto 0;
    padding: 0;
    text-align: center; align-items: center;
  }
  body[data-page="inspiration-and-founder"] .if-hero__kicker {
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: calc(12 / 390 * 100vw);
    line-height: calc(20 / 390 * 100vw);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #5a381c;
    text-align: center;
    max-width: calc(260 / 390 * 100vw);
    margin: 0 auto calc(10 / 390 * 100vw);
  }
  body[data-page="inspiration-and-founder"] .if-hero__title {
    font-family: 'STIX Two Text', serif; font-weight: 500;
    font-size: calc(32 / 390 * 100vw);
    line-height: 1.1;
    text-align: center;
    /* gold gradient #9d7e4b→#6f441e inherited from desktop .if-hero__title */
  }

  /* Shared narrative typography for mobile — Figma 4149:6218/6182/6225.
     eyebrow Inter 500 12px ls0.48px(0.04em) #282828 uppercase;
     h2 STIX 500 28px #5a381c capitalize; body Inter 400 14px/26px #282828. */
  body[data-page="inspiration-and-founder"] .narrative__head .eyebrow {
    font-size: calc(12 / 390 * 100vw);
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin: 0 0 calc(15 / 390 * 100vw);
  }
  body[data-page="inspiration-and-founder"] .narrative__head h2 {
    font-size: calc(28 / 390 * 100vw);
    line-height: calc(35 / 28); /* Figma h2 box 35px at 28px = 1.25 */
    margin: 0;
  }
  body[data-page="inspiration-and-founder"] .narrative__body p {
    font-size: calc(14 / 390 * 100vw);
    line-height: calc(26 / 14);
    margin: 0 0 calc(14 / 390 * 100vw);
  }

  /* All narrative sections: 38px side padding, left-aligned */
  body[data-page="inspiration-and-founder"] section[aria-labelledby="rootsHeading"],
  body[data-page="inspiration-and-founder"] section[aria-labelledby="shrimadjiHeading"],
  body[data-page="inspiration-and-founder"] section[aria-labelledby="founderHeading"],
  body[data-page="inspiration-and-founder"] section[aria-labelledby="philosophyHeading"] {
    padding-top: calc(38 / 390 * 100vw);
  }
  /* Our Inspiration enters after the Mahavir photo: Figma photo bottom 1625
     → eyebrow 1675 = 50 (not 38). */
  body[data-page="inspiration-and-founder"] section[aria-labelledby="shrimadjiHeading"] {
    padding-top: calc(50 / 390 * 100vw);
  }
  body[data-page="inspiration-and-founder"] section[aria-labelledby="rootsHeading"] .narrative__head,
  body[data-page="inspiration-and-founder"] section[aria-labelledby="shrimadjiHeading"] .narrative__head,
  body[data-page="inspiration-and-founder"] section[aria-labelledby="founderHeading"] .narrative__head,
  body[data-page="inspiration-and-founder"] section[aria-labelledby="philosophyHeading"] .narrative__head,
  body[data-page="inspiration-and-founder"] section[aria-labelledby="rootsHeading"] .narrative__body,
  body[data-page="inspiration-and-founder"] section[aria-labelledby="shrimadjiHeading"] .narrative__body,
  body[data-page="inspiration-and-founder"] section[aria-labelledby="philosophyHeading"] .narrative__body {
    max-width: calc(317 / 390 * 100vw);
    margin: 0 auto;
    padding: 0;
    text-align: left;
    align-items: flex-start;
  }
  body[data-page="inspiration-and-founder"] section[aria-labelledby="rootsHeading"] .narrative__body,
  body[data-page="inspiration-and-founder"] section[aria-labelledby="shrimadjiHeading"] .narrative__body,
  body[data-page="inspiration-and-founder"] section[aria-labelledby="philosophyHeading"] .narrative__body {
    margin-top: calc(15 / 390 * 100vw); /* Figma h2 879+35 → body 929 = 15 */
  }

  /* Photos full-bleed on mobile */
  body[data-page="inspiration-and-founder"] .band-image--shrimadji,
  body[data-page="inspiration-and-founder"] .band-image--legacy,
  body[data-page="inspiration-and-founder"] .band-image--movement,
  body[data-page="inspiration-and-founder"] .band-image:has(> div[style*="if-philosophy"]) {
    width: 100%; max-width: none;
    /* mobile.css has a blanket ".band-image{margin:0 auto!important}" at
       max-768 that zeroed every photo's top gap. Beat it with !important;
       per-photo margin-top (the Figma gap) is set below. */
    margin: 0 !important;
    padding: 0;
  }
  /* §3/§4 Shrimadji (PKD chitrapat) photo — Figma 4149:6187: 423×438 box
     (visible 390×438). if-shrimadji 1920×1080 (1.778) cover height-locked →
     fills. QC IF-r34: band now sits between Our Roots and Our Inspiration
     (mobile Figma y=827, same slot as desktop). */
  body[data-page="inspiration-and-founder"] .band-image--shrimadji { margin-top: calc(25 / 390 * 100vw) !important; }
  body[data-page="inspiration-and-founder"] .band-image--shrimadji > div {
    aspect-ratio: auto; height: calc(438 / 390 * 100vw); border-radius: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
  }
  /* §5 Founder/Pujya photo (legacy slot) — Figma 4149:6202: 392×536.
     if-legacy 3936×2624 (1.5) cover height-locked. Gap: Founder h2 3188 → photo 3218 = 30. */
  body[data-page="inspiration-and-founder"] .band-image--legacy { margin-top: calc(30 / 390 * 100vw) !important; }
  body[data-page="inspiration-and-founder"] .band-image--legacy > div {
    aspect-ratio: auto; height: calc(536 / 390 * 100vw); border-radius: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
  }
  /* §6 Spearheading photo — QC IF-r36 (2026-07-02): original photo restored
     (map removed); photo-era mobile crop reinstated. Figma 4149:6222 Mask:
     710×571 at x-202 (zoomed); if-movement 1280×730 (1.753) cover → ~1001
     wide; visible window = source x[694..1193] of 1280 → background-position-x
     88.9% (center pushed Bapa off the right edge, only his shoulder showed). */
  body[data-page="inspiration-and-founder"] .band-image--movement { margin-top: calc(40 / 390 * 100vw) !important; }
  body[data-page="inspiration-and-founder"] .band-image--movement > div {
    aspect-ratio: auto; height: calc(571 / 390 * 100vw); border-radius: 0;
    background-size: cover; background-position: 88.9% center; background-repeat: no-repeat;
  }
  /* §6 Inner Awakening photo — Figma 4149:6230 "27 2": 713×373 at x-228
     (heavily zoomed, shifted left). if-philosophy 4096×2730 (1.5) → width-
     locked to 713 (182.8%), vertical center, shift left 228. */
  body[data-page="inspiration-and-founder"] .band-image:has(> div[style*="if-philosophy"]) { margin-top: calc(40 / 390 * 100vw) !important; }
  body[data-page="inspiration-and-founder"] .band-image:has(> div[style*="if-philosophy"]) > div {
    aspect-ratio: auto; height: calc(373 / 390 * 100vw); border-radius: 0;
    background-size: calc(713 / 390 * 100vw) auto;
    background-position: calc(-228 / 390 * 100vw) center;
    background-repeat: no-repeat;
  }

  /* Gold quote bands mobile */
  body[data-page="inspiration-and-founder"] .gold-quote {
    height: auto; min-height: calc(381 / 390 * 100vw);
    margin-top: calc(30 / 390 * 100vw);
    padding: calc(40 / 390 * 100vw) calc(30 / 390 * 100vw);
  }
  body[data-page="inspiration-and-founder"] .gold-quote__primary {
    font-family: 'STIX Two Text', serif; font-weight: 400;
    font-size: calc(18 / 390 * 100vw);
    line-height: calc(28 / 18);
    color: #4a3b2e;
  }
  body[data-page="inspiration-and-founder"] .gold-quote__attribution {
    font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: calc(14 / 390 * 100vw);
    line-height: calc(24 / 14);
    letter-spacing: 0.1em; text-transform: uppercase;
    color: #5e2a29;
    margin: calc(20 / 390 * 100vw) 0;
  }

  /* Legacy of Wisdom — body text appears below the photo full-bleed */
  body[data-page="inspiration-and-founder"] section[aria-labelledby="legacyHeading"] > .container,
  body[data-page="inspiration-and-founder"] section[aria-labelledby="movementHeading"] > .container {
    padding: 0; flex-direction: column;
  }
  body[data-page="inspiration-and-founder"] section[aria-labelledby="legacyHeading"] .section--stack__head,
  body[data-page="inspiration-and-founder"] section[aria-labelledby="movementHeading"] .section--stack__head {
    max-width: calc(317 / 390 * 100vw);
    margin: calc(30 / 390 * 100vw) auto 0;
    padding: 0;
  }
  body[data-page="inspiration-and-founder"] section[aria-labelledby="legacyHeading"] .section--stack__head h3,
  body[data-page="inspiration-and-founder"] section[aria-labelledby="movementHeading"] .section--stack__head h3 {
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: calc(20 / 390 * 100vw);
    line-height: 1.2; text-transform: capitalize; color: #4a3b2e;
    margin: 0 0 calc(14 / 390 * 100vw);
  }
  body[data-page="inspiration-and-founder"] section[aria-labelledby="legacyHeading"] .section--stack__head p,
  body[data-page="inspiration-and-founder"] section[aria-labelledby="movementHeading"] .section--stack__head p {
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: calc(14 / 390 * 100vw);
    line-height: calc(26 / 14); color: #282828;
  }

  /* Steady Force — single column, photo on top, text below */
  body[data-page="inspiration-and-founder"] section[aria-labelledby="compassionHeading"] .two-col__grid {
    display: flex; flex-direction: column;
    grid-template-columns: none;
    padding: 0;
    gap: calc(30 / 390 * 100vw);
  }
  /* §6 Steady Force photo — Figma 4149:6212 "Philippines": 392×571.
     if-compassion 2048×1152 (1.778) cover height-locked. */
  body[data-page="inspiration-and-founder"] section[aria-labelledby="compassionHeading"] .two-col__image {
    width: 100%; aspect-ratio: auto; height: calc(571 / 390 * 100vw); border-radius: 0;
    background-size: cover; background-position: center;
  }
  body[data-page="inspiration-and-founder"] section[aria-labelledby="compassionHeading"] .two-col__copy {
    padding: 0 calc(38 / 390 * 100vw);
  }
  body[data-page="inspiration-and-founder"] section[aria-labelledby="compassionHeading"] .two-col__copy h3 {
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: calc(20 / 390 * 100vw);
    line-height: 1.2; text-transform: capitalize; color: #4a3b2e;
    margin: 0 0 calc(14 / 390 * 100vw);
  }
  body[data-page="inspiration-and-founder"] section[aria-labelledby="compassionHeading"] .two-col__copy p {
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: calc(14 / 390 * 100vw);
    line-height: calc(26 / 14); color: #282828;
    margin: 0 0 calc(14 / 390 * 100vw);
  }

  /* Voices of Respect mobile */
  body[data-page="inspiration-and-founder"] .testimonial-v2__inner {
    padding: 0 calc(38 / 390 * 100vw);
  }
  body[data-page="inspiration-and-founder"] .testimonial-v2__head h3 {
    font-family: 'STIX Two Text', serif; font-weight: 500;
    font-size: calc(24 / 390 * 100vw);
    line-height: calc(29 / 24); text-transform: capitalize; color: #5a381c;
    white-space: normal; text-wrap: pretty;
  }
  body[data-page="inspiration-and-founder"] .testimonial-v2__head .eyebrow {
    font-size: calc(12 / 390 * 100vw);
    letter-spacing: 0.04em;
  }
  body[data-page="inspiration-and-founder"] .testimonial-v2__head p {
    font-size: calc(14 / 390 * 100vw); line-height: calc(26 / 14); max-width: none;
  }
  /* Testimonial slide: the stage's grid track was blowing out to its
     widest slide's max-content (375px in a 314 stage), pushing the photo
     + quote past the viewport so Bapa and the quote text were clipped.
     minmax(0,1fr) caps the track to the container; min-width:0 lets the
     grid items shrink. */
  body[data-page="inspiration-and-founder"] .testimonial-slide__image,
  body[data-page="inspiration-and-founder"] .testimonial-slide__copy,
  body[data-page="inspiration-and-founder"] .testimonial-slide__quote {
    min-width: 0;
    max-width: 100%;
  }
  /* Mobile: FIXED-HEIGHT card. All slides stack in one grid cell (grid-area
     1/1 from the base), so the stage height is the TALLEST slide's and stays
     constant no matter which slide is active (user: "make the card height
     fixed"). Each slide stretches to that height with its content packed at the
     TOP (align-content:start); the shared arrows are pinned to the BOTTOM of the
     card, so they sit in ONE fixed spot AND below the text on every slide. The
     bottom padding reserves clearance so the longest quote never hits the arrows. */
  body[data-page="inspiration-and-founder"] .testimonial-v2__stage {
    grid-template-columns: minmax(0, 1fr);
    position: relative;
  }
  body[data-page="inspiration-and-founder"] .testimonial-slide {
    align-content: start;
    padding-bottom: calc(96 / 390 * 100vw);
  }
  body[data-page="inspiration-and-founder"] .testimonial-slide__copy {
    justify-content: flex-start;
    padding-top: calc(22 / 390 * 100vw);
    padding-bottom: 0;
  }
  body[data-page="inspiration-and-founder"] .testimonial-v2__controls {
    position: absolute; left: 0; right: 0; bottom: calc(30 / 390 * 100vw);
    margin: 0; padding: 0;
    justify-content: center;
    z-index: 5; pointer-events: none;
  }
  body[data-page="inspiration-and-founder"] .testimonial-v2__indicator { display: none; }
  body[data-page="inspiration-and-founder"] .testimonial-v2__buttons {
    pointer-events: auto;
    justify-content: center; gap: calc(28 / 390 * 100vw);
  }
  /* Clarke (no-photo): NO image spacer. The quote takes the TOP spot where the
     photo sits on the other slides (user: "text needs to be where the picture
     is — right now it leaves a lot of empty space"), then the arrows fall
     directly below it. Left-aligned + top-padded to match the photo slides; the
     global `--no-photo .__image { display:none }` keeps the image hidden. */
  body[data-page="inspiration-and-founder"] .testimonial-slide--no-photo .testimonial-slide__copy {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    padding: calc(22 / 390 * 100vw) 32px calc(22 / 390 * 100vw);
  }
  /* Left-align Clarke's quote on mobile to match the photo slides (the global
     no-photo rule centres it for the desktop variant). */
  body[data-page="inspiration-and-founder"] .testimonial-slide--no-photo .testimonial-slide__quote {
    text-align: left;
    max-width: none;
  }

  /* Continue learning band mobile */
  body[data-page="inspiration-and-founder"] .continue-band {
    height: auto; min-height: calc(217 / 390 * 100vw);
    padding: calc(40 / 390 * 100vw) calc(35 / 390 * 100vw);
    /* Figma mobile band (rect 4149:6279) is cream #f0eade, not the desktop tan
       #BEA884. Desktop keeps #BEA884; mobile matches the Figma cream. */
    background: #f0eade;
  }
  body[data-page="inspiration-and-founder"] .continue-band h3 {
    font-family: 'STIX Two Text', serif; font-weight: 500;
    /* Figma is 20px STIX wrapping to 2 lines in 320px, but Chrome renders STIX
       wider and needs 3 lines at 20px. 17px is the largest that keeps the Figma's
       exact 2-line break — "Continue Learning More About The" / "Wider Movement
       And Our Story" — with NORMAL letter-spacing (an earlier -1.5px tracking
       nudge to hold 20px looked cramped/like a different font). Everything else
       is Figma-exact: 320px width, 35px band padding, buttons unchanged. The
       desktop white-space:nowrap (single line) is overridden so it wraps. */
    font-size: calc(17 / 390 * 100vw);
    line-height: calc(32 / 20); color: #5a381c; text-align: center;
    text-transform: capitalize; /* Figma textCase TITLE */
    white-space: normal;
    text-wrap: wrap;
    max-width: calc(320 / 390 * 100vw);
    margin: 0 auto calc(25 / 390 * 100vw);
  }
  body[data-page="inspiration-and-founder"] .continue-band__buttons {
    flex-direction: row;
    gap: calc(7 / 390 * 100vw);
    width: 100%;
  }
  /* Figma "Button/Mobile/Secondary" (4149:6283): plain #fafafa pill,
     Inter 500 14px #5a381c, radius 40, NO arrow, NO border. */
  body[data-page="inspiration-and-founder"] .continue-band__buttons .btn {
    flex: 1 1 0; width: auto; height: calc(44 / 390 * 100vw);
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: calc(14 / 390 * 100vw); color: #5a381c;
    background: #fafafa; border: none;
    border-radius: calc(40 / 390 * 100vw);
    padding: 0;
  }
  body[data-page="inspiration-and-founder"] .continue-band__buttons .btn .btn-icon {
    display: none; /* Figma mobile button has no arrow */
  }
}

/* Footer alignment: match other pages (1680 container, 120 gutter) */
body[data-page="inspiration-and-founder"] {
  --container-max: 1680px;
}


/* Testimonial carousel arrows: maroon-fill hover per QC */
body[data-page="inspiration-and-founder"] .time-arrow:hover {
  background: #5A381C;
  border-color: #5A381C;
  color: #FAFAFA;
}

/* CROP UNIFICATION (6/12 feedback: "make the crop on desktop match mobile and
   iPad — what I see is always the same"). ONE fixed aspect-ratio + center-top
   at EVERY breakpoint, so `cover` shows the identical region of each photo on
   desktop, iPad and mobile. 32/25 (1.28) is the largest uniform ratio that the
   copy never out-grows in the 2-column ranges (verified 1024–1920: the image is
   always the taller cell, so it drives the row height and is never stretched —
   a stretch would distort the crop and re-break consistency). This replaces the
   old divergent treatments: the desktop grid-stretch (~1.39, copy-driven), the
   iPad 320px min-height letterbox + per-data-slide nudges (which also broke on
   reorder), and the mobile 384/359 — all of which cropped Bapa differently. */
body[data-page="inspiration-and-founder"] .testimonial-slide__image {
  aspect-ratio: 32 / 25;
  min-height: 0;
  height: auto;
  background-position: 50% 0%;
}

/* QC r30: the testimonial controls were moved inside the stage so the mobile
   overlay arrows can anchor to it. On desktop that removed the inner's 36px
   flex gap (controls used to be an inner child) — restore the breathing room
   below the card. 28px margin + the controls' base 8px padding-top = 36px. */
@media (min-width: 1024px) {
  body[data-page="inspiration-and-founder"] .testimonial-v2__controls { margin-top: 28px; }
}

/* iPad 2-column range (800–1199): widen the photo column. This is NOT a crop
   tweak — the unified 32/25 aspect-ratio fixes the crop shape at every width.
   The wider column keeps the image cell tall enough that the (sometimes long)
   quote never out-grows it, so the image stays the row-driver and is never
   stretched off-aspect. bg-position inherits the unified 50% 0%; the old
   per-data-slide nudges are gone (they keyed off slide INDEX and broke on
   reorder, and produced a different crop than desktop/mobile). */
/* Desktop-only now (>=1024): below that the mobile testimonial card applies. */
@media (min-width: 1024px) and (max-width: 1199px) {
  body[data-page="inspiration-and-founder"] .testimonial-slide {
    grid-template-columns: 1.55fr 1fr;
  }
}

/* QC (iPad Mini / mobile): the global full-bleed band-image rule sets
   `margin: 0 auto !important` at <=768px, so the Our Roots / Our Inspiration
   narrative text ends flush against the photo below it (Jainism -> Mahavir
   temple, Shrimad Rajchandraji -> portrait). Add a top gap so the text isn't
   touching the picture. Keeps the photo full-bleed (full width), just spaced. */
@media (max-width: 768px) {
  body[data-page="inspiration-and-founder"] .band-image {
    margin-top: 32px !important;
  }
}

/* ============ End of IF page Figma rebuild ============ */