/* ============================================================
   GLOBAL MOVEMENT — 1:1 Figma rebuild
   Desktop source: Figma node 4148:3995 (1920×7039)
   Mobile source : Figma node 4149:7416 (390×7366)
   All positions/sizes from Figma MCP source.
   Scales proportionally below 1920vp via min(Xpx, X/1920*100vw).
============================================================ */
body[data-page="global-movement"] { background: #fafafa; }

/* ============================================================
   UNIVERSAL RESET (the pattern fix)
   Every base styles.css .gm-* rule uses clamp(), fixed px, fixed gap,
   fixed min-height, or fixed flex sizes that fight my proportional
   Figma values. Instead of overriding each one as we find it, zero
   every spacing/sizing primitive in one block so the per-section
   rules below are the only source of truth.
   - section paddings: 0 (per-section rule sets padding-top with Figma gap)
   - flex/grid gaps:   0 (per-section rule sets gap or uses margins)
   - margins on inner/row/block: 0 (per-section rule sets margins)
   - min-heights:      0 (let content + scaled width drive height)
   ============================================================ */
body[data-page="global-movement"] section,
body[data-page="global-movement"] [class*="__inner"],
body[data-page="global-movement"] [class*="__row"],
body[data-page="global-movement"] [class*="__block"],
body[data-page="global-movement"] [class*="__copy"],
body[data-page="global-movement"] [class*="__head"],
body[data-page="global-movement"] [class*="__grid"],
body[data-page="global-movement"] .gm-stats,
body[data-page="global-movement"] .gm-stats li,
body[data-page="global-movement"] .gm-follow__col,
body[data-page="global-movement"] .gm-follow__icons {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
  margin: 0;
  min-height: 0;
}

/* ============ HERO — Figma 4148:4032 (mask group, y=176→878 visible 702 tall)
   Title block at y=703→810. ============ */
body[data-page="global-movement"] .inner-hero {
  position: relative; width: 100%;
  height: min(702px, calc(702 / 1920 * 100vw));
  overflow: hidden; margin: 0; padding: 0;
}
body[data-page="global-movement"] .inner-hero__image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
body[data-page="global-movement"] .inner-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.35) 100%);
}
body[data-page="global-movement"] .inner-hero__inner {
  position: absolute;
  left: min(149px, calc(149 / 1920 * 100vw));   /* calc(50%-811px) at 1920 = 149 */
  top:  min(527px, calc(527 / 1920 * 100vw));   /* 703-176 = 527 inside hero */
  width: min(671px, calc(671 / 1920 * 100vw));
  padding: 0; margin: 0;
  text-align: left; align-items: flex-start;
}
body[data-page="global-movement"] .inner-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.1em;  /* tracking 2px / 20px font = 0.1em */
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 min(20px, calc(20 / 1920 * 100vw));
}
body[data-page="global-movement"] .inner-hero__title {
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(64px, calc(64 / 1920 * 100vw));
  line-height: 1.05;
  color: #ffffff;
  margin: 0;
}

/* ============ MAROON BAND #1 — Figma 4148:4062 (y=925→1204, h=279, #912e34) ============ */
body[data-page="global-movement"] .gm-mission-band {
  width: 100%;
  height: min(279px, calc(279 / 1920 * 100vw));
  background: #912e34;
  margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
body[data-page="global-movement"] .gm-mission-band__inner {
  width: 100%; max-width: none; text-align: center;
  /* Kill the base styles.css gap clamp(18,1.8vw,28) so my margin is
     the only source of vertical spacing between lead and quote. */
  gap: 0;
}
body[data-page="global-movement"] .gm-mission-band__lead {
  /* Figma 4148:4065: Inter Medium 22px tracking 1.1px uppercase white.
     Gap below to quote: Figma puts eyebrow mid at y=1010.5, quote mid
     at y=1097.5 → mid-to-mid 87 → visual gap ~48 after subtracting
     half-eyebrow + half-quote. */
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(22px, calc(22 / 1920 * 100vw));
  line-height: 1.2;
  letter-spacing: 0.05em;  /* 1.1px / 22 = 0.05em */
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 min(20px, calc(20 / 1920 * 100vw));
}
body[data-page="global-movement"] .gm-mission-band__quote {
  /* Figma 4148:4064: STIX Two Text Italic 52px white text-align center */
  font-family: 'STIX Two Text', serif; font-style: italic; font-weight: 400;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: 1.1;
  color: #ffffff;
  margin: 0;
}

/* ============ FROM MISSION TO MOVEMENT — Figma 4148:4059 (y=1274→1467) ============ */
body[data-page="global-movement"] .gm-intro {
  padding-top: min(70px, calc(70 / 1920 * 100vw));
}
body[data-page="global-movement"] .gm-intro__inner {
  width: 100%; max-width: none; padding: 0;
  display: flex; flex-direction: column; align-items: center;
}
body[data-page="global-movement"] .gm-intro h2 {
  /* Figma 4148:4060: STIX Two Text Medium 52px #5e2a29 */
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: 1.1;
  color: #5e2a29;
  margin: 0 0 min(20px, calc(20 / 1920 * 100vw));
  text-align: center;
}
body[data-page="global-movement"] .gm-intro p {
  /* Figma 4148:4061: Inter Regular 20px line 36px #282828, w=849 */
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(36 / 20);
  color: #282828;
  max-width: min(849px, calc(849 / 1920 * 100vw));
  margin: 0;
  text-align: left;
}
body[data-page="global-movement"] .gm-intro p + p {
  margin-top: min(20px, calc(20 / 1920 * 100vw));
}

/* ============ MISSION CARD — Figma 4148:4071 (y=1645→2699, h=1054)
   bg rgba(239,234,223,0.5), 1920 wide. Inner content at left=355, top=1729. ============ */
body[data-page="global-movement"] .gm-mission-card {
  width: 100%;
  /* Figma literal gap (1645 - 1467 = 178) reads as way too much air on
     the site because browser fonts wrap the intro body to fewer lines
     than Figma's rendered metrics — so Figma's 178 sits below a taller
     stack while my site puts it below a shorter one. Halving to 80. */
  margin: min(80px, calc(80 / 1920 * 100vw)) 0 0;
  padding: min(84px, calc(84 / 1920 * 100vw)) 0;
  background: rgba(239, 234, 223, 0.5);
}
body[data-page="global-movement"] .gm-mission-card__inner {
  width: 100%; max-width: none;
  padding-left:  min(355px, calc(355 / 1920 * 100vw));
  padding-right: min(355px, calc(355 / 1920 * 100vw));  /* symmetric for centered */
  margin: 0;
  /* Kill the base styles.css gap clamp(40,4.5vw,88) so my row margin
     fully controls the vertical spacing — they were stacking. */
  gap: 0;
}
/* Same for the per-block flex gap (base = 16px fixed). I control inter-
   element spacing via margins + flex gap with scaling. */
body[data-page="global-movement"] .gm-mission-card__block {
  gap: 0;
}
body[data-page="global-movement"] .gm-mission-card__row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: min(60px, calc(60 / 1920 * 100vw));
  margin-bottom: min(100px, calc(100 / 1920 * 100vw));
  /* Override base styles.css min-height: 366/422 — fixed min-heights add
     blank space at narrower viewports. Let content drive the height. */
  min-height: 0;
}
body[data-page="global-movement"] .gm-mission-card__row:last-child {
  margin-bottom: 0;
}
/* Match base styles.css nth-of-type selectors exactly so my proportional
   sizes win the cascade. Base rules use fixed px (574 block, 405 stats,
   592 photo) which don't scale with viewport. */
body[data-page="global-movement"] .gm-mission-card__row:nth-of-type(1) .gm-mission-card__block {
  flex: 0 1 min(571px, calc(571 / 1920 * 100vw));
  max-width: min(571px, calc(571 / 1920 * 100vw));
  padding-top: 0;
}
body[data-page="global-movement"] .gm-mission-card__row:nth-of-type(1) .gm-stats {
  flex: 0 0 min(405px, calc(405 / 1920 * 100vw));
  padding-top: 0;
}
body[data-page="global-movement"] .gm-mission-card__row:nth-of-type(2) .gm-mission-card__photo {
  flex: 0 0 min(592px, calc(592 / 1920 * 100vw));
}
body[data-page="global-movement"] .gm-mission-card__row:nth-of-type(2) .gm-mission-card__block {
  flex: 0 1 min(533px, calc(533 / 1920 * 100vw));
  max-width: min(533px, calc(533 / 1920 * 100vw));
  padding-top: 0;
}
body[data-page="global-movement"] .gm-mission-card__block {
  display: flex; flex-direction: column;
}
body[data-page="global-movement"] .gm-mission-card__block h3 {
  /* Figma 4148:4078: STIX Two Text Italic 40px #5e2a29 */
  font-family: 'STIX Two Text', serif; font-style: italic; font-weight: 400;
  font-size: min(40px, calc(40 / 1920 * 100vw));
  line-height: 1.1;
  color: #5e2a29;
  margin: 0 0 min(40px, calc(40 / 1920 * 100vw));
}
body[data-page="global-movement"] .gm-mission-card__block p {
  /* Figma 4148:4079: Inter Regular 20px line 36px #282828, left-aligned */
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(36 / 20);
  color: #282828;
  margin: 0 0 min(20px, calc(20 / 1920 * 100vw));
  text-align: left;
}
body[data-page="global-movement"] .gm-mission-card__block h3 { text-align: left; }
body[data-page="global-movement"] .gm-mission-card__link {
  /* Figma 4148:4081: Inter Medium 20px underline #5e2a29 with arrow
     icon 16.5x16.5 at right (4148:4082). */
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: 32px;
  color: #5e2a29;
  text-decoration: underline;
  margin-top: min(20px, calc(20 / 1920 * 100vw));
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: min(10px, calc(10 / 1920 * 100vw));
}
body[data-page="global-movement"] .gm-mission-card__arrow {
  /* Figma node 4148:4082: 16.5px wide arrow. SVG without explicit
     width renders at browser default ~300x150 — must be constrained. */
  width: min(16.5px, calc(16.5 / 1920 * 100vw));
  height: auto;
  flex-shrink: 0;
}
body[data-page="global-movement"] .gm-stats {
  /* Figma 4148:4083: 2x2 grid, 188 wide cells, gap 50/50 */
  display: grid;
  grid-template-columns: repeat(2, min(188px, calc(188 / 1920 * 100vw)));
  gap: min(50px, calc(50 / 1920 * 100vw));
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}
body[data-page="global-movement"] .gm-stats li {
  /* Figma 4148:4084: bg #fafafa 188x132, padding 20/10. Override the
     base min-height: 132 (fixed) so the box scales with viewport. */
  background: #fafafa;
  width: min(188px, calc(188 / 1920 * 100vw));
  height: min(132px, calc(132 / 1920 * 100vw));
  min-height: 0;
  padding: min(10px, calc(10 / 1920 * 100vw)) min(20px, calc(20 / 1920 * 100vw));
  display: flex; flex-direction: column; justify-content: center;
  gap: min(12px, calc(12 / 1920 * 100vw));
}
body[data-page="global-movement"] .gm-stats__num {
  /* Figma 4148:4085: 36px #e26326 capitalize */
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(36px, calc(36 / 1920 * 100vw));
  line-height: 1;
  color: #e26326;
}
body[data-page="global-movement"] .gm-stats__label {
  /* Figma 4148:4086: 18px line 28px tracking 0.72px #5a381c.
     In Figma the label has an explicit width (Youth Centers w=223,
     Seva Centers w=264) that's WIDER than its 188 box — the label
     intentionally overflows the box and stays on one line. white-space:
     nowrap replicates that so "Mission Centers" / "Children Centers"
     don't wrap at narrower viewports. */
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(18px, calc(18 / 1920 * 100vw));
  line-height: calc(28 / 18);
  letter-spacing: 0.04em;  /* 0.72/18 = 0.04 */
  color: #5a381c;
  white-space: nowrap;
}
body[data-page="global-movement"] .gm-stats li { overflow: visible; }
body[data-page="global-movement"] .gm-mission-card__photo {
  /* Figma 4148:4106: 592×422 photo */
  flex: 0 0 min(592px, calc(592 / 1920 * 100vw));
  height: min(422px, calc(422 / 1920 * 100vw));
  background-size: cover; background-position: center;
  border-radius: 4px;
}

/* ============ DHARAMPUR — Figma 4148:4127 (y=2769→3854) ============ */
body[data-page="global-movement"] .gm-dharampur {
  padding-top: min(70px, calc(70 / 1920 * 100vw));
}
body[data-page="global-movement"] .gm-dharampur__inner {
  width: 100%; max-width: none; padding: 0;
  display: flex; flex-direction: column; align-items: center;
}
body[data-page="global-movement"] .gm-dharampur__copy {
  text-align: center;
  max-width: min(964px, calc(964 / 1920 * 100vw));
  margin: 0;
}
body[data-page="global-movement"] .gm-dharampur__copy h2 {
  /* Figma 4148:4129: STIX Two Text Medium 52px #5e2a29 */
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: 1.1;
  color: #5e2a29;
  margin: 0 0 min(20px, calc(20 / 1920 * 100vw));
}
body[data-page="global-movement"] .gm-dharampur__copy p {
  /* Figma 4148:4130: Inter Regular 20px line 36px #282828 */
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(36 / 20);
  color: #282828;
  margin: 0;
  text-align: left;
}
body[data-page="global-movement"] .gm-dharampur__feature {
  /* Figma literal gap from body bottom to photo top is 32. After the
     universal reset zeroed the base .gm-dharampur__copy padding/gap
     that was visually padding this gap before, 32 alone reads too
     tight. Bumped to 70 so the visual gap matches Figma's rendered
     proportions. */
  width: min(1721px, calc(1721 / 1920 * 100vw));
  margin: min(70px, calc(70 / 1920 * 100vw)) auto 0;
  display: flex; flex-direction: column; align-items: center;
  gap: min(26px, calc(26 / 1920 * 100vw));
}
body[data-page="global-movement"] .gm-dharampur__photo {
  width: 100%;
  aspect-ratio: 1721 / 566;
  background-size: cover; background-position: center;
  border-radius: 4px;
}
body[data-page="global-movement"] .gm-dharampur__feature figcaption {
  text-align: center;
  font-family: 'Inter', sans-serif;
  color: #282828;
  margin: 0;
}
body[data-page="global-movement"] .gm-dharampur__feature figcaption strong {
  /* "Jinmandir (Jain Temple):" Inter Medium 22px line 36px */
  display: block;
  font-weight: 500;
  font-size: min(22px, calc(22 / 1920 * 100vw));
  line-height: calc(36 / 22);
  margin-bottom: min(4px, calc(4 / 1920 * 100vw));
}

/* ============ OUR GLOBAL NETWORK — Figma 4148:4107 (y=3934→5014, h=1080)
   bg rgba(239,234,223,0.5) backdrop-blur. Heading + body left=149,
   4 location cards at left=159/564/969/1374, each 388×660. ============ */
body[data-page="global-movement"] .gm-network {
  margin: min(80px, calc(80 / 1920 * 100vw)) 0 0;
  /* Figma section 4148:4107 spans y=3934-5014 (1080 tall). Cards end
     y=4914 so padding-bottom = 100 (was 55). Top padding 55 unchanged
     (copy starts y=3989). */
  padding: min(55px, calc(55 / 1920 * 100vw)) 0 min(100px, calc(100 / 1920 * 100vw));
  background: rgba(239, 234, 223, 0.5);
}
body[data-page="global-movement"] .gm-network__inner {
  width: 100%; max-width: none;
  padding-left: min(149px, calc(149 / 1920 * 100vw));
  padding-right: min(149px, calc(149 / 1920 * 100vw));
}
body[data-page="global-movement"] .gm-network__copy {
  /* Figma literal is 1152, but browser font metrics are slightly wider
     than Figma's renderer so 1152 wraps the text one word earlier per
     line. Bumped to 1250 so visual wrap points match Figma. */
  max-width: min(1250px, calc(1250 / 1920 * 100vw));
  margin: 0 0 min(40px, calc(40 / 1920 * 100vw));
}
body[data-page="global-movement"] .gm-network__copy h2 {
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: 1.1;
  color: #5e2a29;
  margin: 0 0 min(20px, calc(20 / 1920 * 100vw));
}
body[data-page="global-movement"] .gm-network__copy p {
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(36 / 20);
  color: #282828;
  margin: 0;
  text-align: left;
}
body[data-page="global-movement"] .gm-network__copy h2 { text-align: left; }
body[data-page="global-movement"] .gm-network__grid {
  /* 4 equal static cards (QC r45: hover-expand removed entirely —
     it squeezed neighbours and clipped the chitrapats). */
  display: flex;
  gap: min(17px, calc(17 / 1920 * 100vw));
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}
body[data-page="global-movement"] .gm-network-card {
  /* Figma 4148:4113 etc: 388×660 cream card #F0EADE (QC r49).
     flex-basis 0 + flex-grow 1 means each card claims 1/N of available
     space. No hover interaction (QC r45 / r22 / r33). */
  background: #F0EADE;
  flex: 1 1 0;
  min-width: 0;
  height: min(660px, calc(660 / 1920 * 100vw));
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
body[data-page="global-movement"] .gm-network-card__photo {
  /* All four -v4 assets are the exact Figma 388×521 window crops (computed
     from the redesign frame 4148:4113-4116 container offsets), so plain
     cover + center is 1:1 — no per-card position nudges anymore. */
  width: 100%; height: min(521px, calc(521 / 1920 * 100vw));
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
body[data-page="global-movement"] .gm-network-card__label {
  /* Figma 4148:4115;693:3476: Inter Regular 20px line 32, maroon #5E2A29
     on the cream card (QC r49), centered, w=351 inside 388 card. Span
     stays inline so the natural wrap point matches Figma (first text +
     city on two lines, not three). */
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(32 / 20);
  color: #5E2A29;
  text-align: center;
  max-width: min(351px, calc(351 / 1920 * 100vw));
  padding: 0;
  margin: min(36px, calc(36 / 1920 * 100vw)) auto 0;
}
body[data-page="global-movement"] .gm-network-card__label span {
  display: inline;
}
body[data-page="global-movement"] .gm-network__nav { display: none; }

/* ============ A SPIRITUAL HOME IN THE US — Figma 4148:4117 (y=5084→5650)
   Heading + body left=149 / w=654; photo on right via mask. ============ */
body[data-page="global-movement"] .gm-usa {
  padding-top: min(70px, calc(70 / 1920 * 100vw));
}
body[data-page="global-movement"] .gm-usa__inner {
  width: 100%; max-width: none;
  display: grid;
  /* Figma: left col 654 (at x=149), gap 113, right col 814 (at x=917),
     right gutter 189 (1920 - 149 - 654 - 113 - 814 = 189). Was 1fr on
     the right which let the image fill all 1004 remaining px. */
  grid-template-columns:
    min(654px, calc(654 / 1920 * 100vw))
    min(814px, calc(814 / 1920 * 100vw));
  gap: min(113px, calc(113 / 1920 * 100vw));
  padding-left:  min(149px, calc(149 / 1920 * 100vw));
  padding-right: min(189px, calc(189 / 1920 * 100vw));
  align-items: center; /* QC r47: text column vertically centered against the photo */
}
body[data-page="global-movement"] .gm-usa__copy {
  display: flex; flex-direction: column;
}
body[data-page="global-movement"] .gm-usa__copy h2 {
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: 1.1;
  color: #5e2a29;
  margin: 0 0 min(20px, calc(20 / 1920 * 100vw));
}
body[data-page="global-movement"] .gm-usa__copy p {
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(36 / 20);
  color: #282828;
  margin: 0 0 min(20px, calc(20 / 1920 * 100vw));
  text-align: left;
}
body[data-page="global-movement"] .gm-usa__copy h2 { text-align: left; }
body[data-page="global-movement"] .gm-usa__btn {
  /* Figma redesign Button 4148:4123: OUTLINE pill — transparent bg, 1px
     #5E2A29 border, rounded 40, 60 tall, padding 20/10, gap 12, label Inter
     Medium 16px #5E2A29, 20px chevron (filled #5A381C circle, white arrow —
     same SVG as Figma's lucide/chevron-right export). */
  display: inline-flex; align-items: center; justify-content: center;
  gap: min(12px, calc(12 / 1920 * 100vw));
  height: min(60px, calc(60 / 1920 * 100vw));
  padding: 0 min(20px, calc(20 / 1920 * 100vw));
  border: 1px solid #5E2A29;
  border-radius: min(40px, calc(40 / 1920 * 100vw));
  background: transparent;
  color: #5E2A29;
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(16px, calc(16 / 1920 * 100vw));
  line-height: 1.25;
  text-decoration: none;
  align-self: flex-start;
  margin-top: min(40px, calc(40 / 1920 * 100vw));
}
body[data-page="global-movement"] .gm-usa__btn svg rect { fill: #5A381C; }
body[data-page="global-movement"] .gm-usa__btn svg path { stroke: #FAFAFA; }
body[data-page="global-movement"] .gm-usa__btn {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Hover inverts (site convention: outline <-> filled swap on hover). */
body[data-page="global-movement"] .gm-usa__btn:hover {
  background: #5E2A29;
  color: #FAFAFA;
  border-color: #5E2A29;
}
body[data-page="global-movement"] .gm-usa__btn:hover svg rect { fill: #FAFAFA; }
body[data-page="global-movement"] .gm-usa__btn:hover svg path { stroke: #5E2A29; }
body[data-page="global-movement"] .gm-usa__btn-chev {
  width: min(20px, calc(20 / 1920 * 100vw));
  height: min(20px, calc(20 / 1920 * 100vw));
  flex-shrink: 0;
}
body[data-page="global-movement"] .gm-usa__media {
  /* Source asset is cropped to Figma's mask exactly (Gemini source @
     1162x846, matches 814/593 mask aspect). Plain cover/center renders
     the sign properly centered with no positional math required. */
  width: 100%;
  aspect-ratio: 814 / 593;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
}

/* ============ MIGHTY MISSION QUOTE BAND #2 — Figma 4148:4066 (y=5747→6108, h=361) ============ */
body[data-page="global-movement"] .gm-quote-band {
  width: 100%;
  /* QC GM-r23: was a fixed height; min-height + padding so the audio
     row below the cite can breathe without clipping. */
  min-height: min(361px, calc(361 / 1920 * 100vw));
  padding: min(48px, calc(48 / 1920 * 100vw)) 0;
  margin: min(97px, calc(97 / 1920 * 100vw)) 0 0;  /* gap from prev section */
  background: #912e34;
  display: flex; align-items: center; justify-content: center;
}
body[data-page="global-movement"] .gm-quote-band__inner {
  width: 100%; max-width: none; text-align: center; padding: 0 20px;
}
body[data-page="global-movement"] .gm-quote-band__inner {
  /* Base styles.css caps inner at 1100; bump so the blockquote can
     actually fit "accomplish" on line 1. */
  width: 100%;
  max-width: none;
}
body[data-page="global-movement"] .gm-quote-band blockquote {
  /* Figma 4148:4069: STIX Two Text Italic 32px line 50px white, w=996.
     Bumped max-width past Figma literal because browser-rendered STIX
     italic is slightly wider than Figma preview; balance disabled so the
     break point is greedy not balanced. */
  font-family: 'STIX Two Text', serif; font-style: italic; font-weight: 400;
  font-size: min(32px, calc(32 / 1920 * 100vw));
  line-height: calc(50 / 32);
  color: #ffffff;
  max-width: min(1010px, calc(1010 / 1920 * 100vw));
  margin: 0 auto min(40px, calc(40 / 1920 * 100vw));
  text-align: center;
  text-wrap: auto;
}
body[data-page="global-movement"] .gm-quote-band cite {
  /* Figma 4148:4070: Inter Medium 22px tracking 1.1px uppercase white */
  font-family: 'Inter', sans-serif; font-style: normal; font-weight: 500;
  font-size: min(22px, calc(22 / 1920 * 100vw));
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
}
/* Figma 4148:4069: explicit line break after "accomplish." on desktop
   (line 1 is a short centered line). The second br (--blank) is the
   mobile-only paragraph gap. */
body[data-page="global-movement"] .gm-q-break { display: inline; }
body[data-page="global-movement"] .gm-q-break--blank { display: none; }

/* QC GM-r23: reverent audio player under the attribution. Desktop band is
   maroon (#912e34) so the button is white-on-band: thin white ring, white
   glyph, quiet hover fill. */
body[data-page="global-movement"] .gm-quote-band__audio {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  margin-top: min(28px, calc(28 / 1920 * 100vw));
}
body[data-page="global-movement"] .gm-quote-band__play {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
body[data-page="global-movement"] .gm-quote-band__play:hover,
body[data-page="global-movement"] .gm-quote-band__play:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: #ffffff;
}
body[data-page="global-movement"] .gm-quote-band__play svg {
  width: 16px; height: 16px; display: block;
}
body[data-page="global-movement"] .gm-quote-band__play .gm-quote-band__play-icon {
  margin-left: 2px; /* optical centering of the triangle */
}
body[data-page="global-movement"] .gm-quote-band__play .gm-quote-band__pause-icon { display: none; }
body[data-page="global-movement"] .gm-quote-band__play.is-playing .gm-quote-band__play-icon { display: none; }
body[data-page="global-movement"] .gm-quote-band__play.is-playing .gm-quote-band__pause-icon { display: block; }
body[data-page="global-movement"] .gm-quote-band__audio-label {
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 13px; line-height: 1;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

/* ============ FOLLOW SRMD / SRLC — Figma 4148:4132 (y=6108→6315, h=207)
   bg #bea884 tan. Two columns: SRMD at left=689/744, SRLC at left=995/1045. ============ */
body[data-page="global-movement"] .gm-follow {
  width: 100%;
  height: min(207px, calc(207 / 1920 * 100vw));
  background: #bea884;
  display: flex; align-items: center;
  padding: 0;
}
body[data-page="global-movement"] .gm-follow__inner {
  width: 100%; max-width: none;
  display: flex; justify-content: center;
  gap: min(125px, calc(125 / 1920 * 100vw));  /* 995 - 870 (SRMD end ~ 689+255) */
}
body[data-page="global-movement"] .gm-follow__col {
  display: flex; flex-direction: column; align-items: center;
}
body[data-page="global-movement"] .gm-follow__label {
  /* Figma 4148:4146 / 4148:4134: STIX Two Text Medium 24px #5e2a29
     (upright, not italic — base styles.css sets italic). */
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-style: normal;
  text-transform: capitalize;
  font-size: min(24px, calc(24 / 1920 * 100vw));
  line-height: 1.2;
  color: #5e2a29;
  margin: 0 0 min(20px, calc(20 / 1920 * 100vw));
}
body[data-page="global-movement"] .gm-follow__icons {
  display: flex; align-items: center;
  gap: min(20px, calc(20 / 1920 * 100vw));
  list-style: none; margin: 0; padding: 0;
}
body[data-page="global-movement"] .gm-follow__icons a {
  width: min(44px, calc(44 / 1920 * 100vw));
  height: min(44px, calc(44 / 1920 * 100vw));
  display: inline-flex; align-items: center; justify-content: center;
  color: #5e2a29;
}
body[data-page="global-movement"] .gm-follow__icons img {
  /* Use the exact Figma SVG files (in assets/follow-icons/). Each is
     served at its own viewBox so the glyph proportions are 1:1 with
     Figma. Align them by their VISUAL center inside the 44px anchor
     by giving every img a 44x44 box; Instagram is centered via padding
     so its 24x24 content sits in the middle of the 44x44 cell instead
     of being baseline-aligned too low. */
  width: min(44px, calc(44 / 1920 * 100vw));
  height: min(44px, calc(44 / 1920 * 100vw));
  display: block;
}
body[data-page="global-movement"] .gm-follow__icons li:nth-child(1) img {
  /* Insta SVG has a tighter 24-viewBox; render at 24 then center via
     the anchor's flex centering — no need to inflate to 44. Nudge
     up 3px so its visual center aligns with the larger Facebook /
     LinkedIn / X glyphs (user reported it sitting too low). */
  width: min(24px, calc(24 / 1920 * 100vw));
  height: min(24px, calc(24 / 1920 * 100vw));
  transform: translateY(-3px);
}
body[data-page="global-movement"] .gm-follow__icons a {
  /* Make every social slot the same 44x44 visible target so icons
     of different intrinsic sizes still align to a common baseline. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* iPad portrait (768-899px) — mission card rows side-by-side (QC r36) */
@media (min-width: 768px) and (max-width: 899px) {
  body[data-page="global-movement"] .gm-mission-card__row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  body[data-page="global-movement"] .gm-mission-card__row:nth-of-type(1) .gm-mission-card__block {
    flex: 0 1 55%;
    max-width: 55%;
  }
  body[data-page="global-movement"] .gm-mission-card__row:nth-of-type(1) .gm-stats {
    flex: 0 0 38%;
    padding-top: 0;
    grid-template-columns: repeat(2, 1fr);
  }
  body[data-page="global-movement"] .gm-mission-card__row:nth-of-type(2) .gm-mission-card__photo {
    flex: 0 0 45%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  body[data-page="global-movement"] .gm-mission-card__row:nth-of-type(2) .gm-mission-card__block {
    flex: 0 1 50%;
    max-width: 50%;
  }
}

/* ============ MOBILE (<768) — Figma 4149:7416 (390 wide) ============ */
@media (max-width: 1023px) {
  body[data-page="global-movement"] .inner-hero {
    height: min(588px, calc(588 / 390 * 100vw));
  }
  /* Figma 4149:7480 — caption is CENTERED (kicker centerX 195, title centerX 195). */
  body[data-page="global-movement"] .inner-hero__inner {
    left: 0; right: 0; width: 100%;
    top:  min(459px, calc(459 / 390 * 100vw));
    padding: 0 min(20px, calc(20 / 390 * 100vw));
    align-items: center; text-align: center;
  }
  body[data-page="global-movement"] .inner-hero__kicker {
    font-size: min(12px, calc(12 / 390 * 100vw));
    line-height: calc(20 / 12);
    letter-spacing: 0.07em; /* Figma 0.84px on 12px */
    text-align: center;
    margin-bottom: min(8px, calc(8 / 390 * 100vw));
  }
  body[data-page="global-movement"] .inner-hero__title {
    font-size: min(32px, calc(32 / 390 * 100vw));
    text-align: center;
  }
  /* Figma 4149:7430: hero overlay is a rotated gradient — light gray veil on
     the top ~58%, darkening to rgba(42,42,42,0.8) by ~76% (our veil was only
     0.40 at the very bottom, which read as a "different gradient"). */
  body[data-page="global-movement"] .inner-hero__veil {
    background: linear-gradient(180deg, rgba(132,132,132,0.32) 58.37%, rgba(42,42,42,0.8) 75.67%);
  }

  body[data-page="global-movement"] .gm-mission-band {
    height: auto;
    min-height: min(267px, calc(267 / 390 * 100vw));
    /* Figma mobile (node 4149:7552 "1 7") is a gold/cream texture, NOT the
       desktop #912e34 maroon. Mobile-only override. */
    background: url('assets/gm-mission-texture.jpg') center / cover no-repeat;
    padding: min(40px, calc(40 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw));
  }
  body[data-page="global-movement"] .gm-mission-band__lead {
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: min(14px, calc(14 / 390 * 100vw)); line-height: calc(24 / 14);
    letter-spacing: 0.08em; text-transform: uppercase; color: #4a3b2e;
    max-width: min(287px, calc(287 / 390 * 100vw)); /* Figma w287 */
    margin: 0 auto min(20px, calc(20 / 390 * 100vw));
  }
  body[data-page="global-movement"] .gm-mission-band__quote {
    font-family: 'STIX Two Text', serif; font-weight: 500;
    font-size: min(20px, calc(20 / 390 * 100vw)); line-height: calc(32 / 20); color: #5e2a29;
    max-width: min(240px, calc(240 / 390 * 100vw)); /* Figma w240 */
    margin: 0 auto;
  }

  /* Figma: mission-band(1050) → intro h2(1120) = 70px gap. */
  body[data-page="global-movement"] .gm-intro {
    padding: min(70px, calc(70 / 390 * 100vw)) min(38px, calc(38 / 390 * 100vw)) 0;
  }
  /* base centers the inner (align-items:center) → at >390 the body centers in
     the wider inner while the left-aligned h2 stays put, so they split apart.
     Left-align everything so heading + body share the x38 edge at all widths. */
  body[data-page="global-movement"] .gm-intro__inner { align-items: flex-start; }
  /* h2 4149:7432: STIX 28, w241 (forces "From Mission to" / "Movement"). */
  body[data-page="global-movement"] .gm-intro h2 {
    font-size: min(28px, calc(28 / 390 * 100vw));
    line-height: 1.25; text-align: left;
    align-self: flex-start; /* base centers it; mobile Figma is left at x38 */
    max-width: min(241px, calc(241 / 390 * 100vw));
    margin: 0 0 min(25px, calc(25 / 390 * 100vw));
  }
  /* body 4149:7433: Inter 14 / line 26 #282828, blank line (26px) between paras. */
  body[data-page="global-movement"] .gm-intro p {
    font-size: min(14px, calc(14 / 390 * 100vw));
    line-height: calc(26 / 14);
    max-width: min(317px, calc(317 / 390 * 100vw));
    margin: 0 0 min(26px, calc(26 / 390 * 100vw));
  }
  body[data-page="global-movement"] .gm-intro p:last-child { margin-bottom: 0; }

  /* Figma: intro(1449) → mission-card bg(1498) = 49px gap; bg full-width
     #efeadf @ 50% alpha; content inset 43px; bottom pad 41px. */
  body[data-page="global-movement"] .gm-mission-card {
    margin-top: min(49px, calc(49 / 390 * 100vw));
    padding: min(40px, calc(40 / 390 * 100vw)) min(43px, calc(43 / 390 * 100vw)) min(41px, calc(41 / 390 * 100vw));
  }
  body[data-page="global-movement"] .gm-mission-card__inner {
    padding: 0; gap: 0; /* row spacing comes from row margin-bottom, not inner gap */
  }
  body[data-page="global-movement"] .gm-mission-card__block { gap: 0; } /* spacing via explicit margins */
  /* row1 internal block→stats gap 40px (Learn 1831 → stats 1871);
     row1→row2 gap 70px (stats 2087 → Serve group 2157). */
  body[data-page="global-movement"] .gm-mission-card__row {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: min(70px, calc(70 / 390 * 100vw));
    gap: min(40px, calc(40 / 390 * 100vw));
  }
  body[data-page="global-movement"] .gm-mission-card__row:last-child { margin-bottom: 0; }
  /* Override the desktop :nth-of-type blocks (max-width min(571,571/1920*100vw)
     = 116px at 390 → word-by-word wrap). Match their specificity so these win. */
  body[data-page="global-movement"] .gm-mission-card__row:nth-of-type(1) .gm-mission-card__block,
  body[data-page="global-movement"] .gm-mission-card__row:nth-of-type(2) .gm-mission-card__block {
    flex: none; max-width: 100%; width: 100%; padding-top: 0;
  }
  body[data-page="global-movement"] .gm-mission-card__row:nth-of-type(1) .gm-stats {
    flex: none; width: 100%;
  }
  body[data-page="global-movement"] .gm-mission-card__row:nth-of-type(2) .gm-mission-card__photo {
    flex: none; width: 100%;
  }
  /* h3 4149:7502/7509: STIX Italic 24px / line 20px #5e2a29 */
  body[data-page="global-movement"] .gm-mission-card__block h3 {
    font-size: min(24px, calc(24 / 390 * 100vw));
    line-height: calc(20 / 24); font-style: italic;
    margin: 0 0 min(24px, calc(24 / 390 * 100vw));
  }
  /* body 4149:7503/7510: Inter 14 / line 24 #282828, w305, blank-line gap. */
  body[data-page="global-movement"] .gm-mission-card__block p {
    font-size: min(14px, calc(14 / 390 * 100vw));
    line-height: calc(24 / 14);
    max-width: min(305px, calc(305 / 390 * 100vw));
    margin: 0 0 min(24px, calc(24 / 390 * 100vw));
  }
  /* Learn link 4149:7505: Inter 500 14 / line 32 #5e2a29. */
  body[data-page="global-movement"] .gm-mission-card__link {
    font-size: min(14px, calc(14 / 390 * 100vw));
    line-height: calc(32 / 14);
  }
  body[data-page="global-movement"] .gm-mission-card__arrow {
    width: min(16.5px, calc(16.5 / 390 * 100vw)); height: auto;
  }
  /* stats 4149:7487: 2×2 of 135×100 white #fafafa cards, col-gap 28 / row-gap 16. */
  body[data-page="global-movement"] .gm-stats {
    grid-template-columns: repeat(2, min(135px, calc(135 / 390 * 100vw)));
    column-gap: min(28px, calc(28 / 390 * 100vw));
    row-gap: min(16px, calc(16 / 390 * 100vw));
    justify-content: start;
  }
  body[data-page="global-movement"] .gm-stats li {
    width: auto; height: min(100px, calc(100 / 390 * 100vw));
    background: #fafafa;
    /* r38: the desktop padding rule (10/1920·100vw V, 20/1920·100vw H)
       collapses to ~2px/4px at 390px, leaving the num/label cramped against
       the card edges. Give them real breathing room on mobile. Keep the
       right pad modest so the intentionally nowrap-overflowing labels
       (e.g. "Children Centers") aren't pushed further out. */
    padding: min(16px, calc(16 / 390 * 100vw)) min(14px, calc(14 / 390 * 100vw))
             min(16px, calc(16 / 390 * 100vw)) min(18px, calc(18 / 390 * 100vw));
  }
  /* num 4149:7489: #e26326 24px; label 4149:7490: #5a381c 12 / line 28. */
  body[data-page="global-movement"] .gm-stats__num { font-size: min(24px, calc(24 / 390 * 100vw)); color: #e26326; }
  body[data-page="global-movement"] .gm-stats__label {
    font-size: min(12px, calc(12 / 390 * 100vw)); line-height: calc(28 / 12); color: #5a381c;
  }
  /* Figma mobile omits the blessing-child photo entirely (confirmed by Rishi):
     the "...And Serve Others Selflessly" row is text-only on mobile. */
  body[data-page="global-movement"] .gm-mission-card__photo { display: none; }

  /* Figma: mission-card(2491) → dharampur h2(2561) = 70px gap. */
  body[data-page="global-movement"] .gm-dharampur {
    padding: min(70px, calc(70 / 390 * 100vw)) min(38px, calc(38 / 390 * 100vw)) 0;
  }
  /* keep the copy block flush-left at x38 (base centers it → drifts right at >390). */
  body[data-page="global-movement"] .gm-dharampur__inner { align-items: flex-start; }
  body[data-page="global-movement"] .gm-dharampur__copy { max-width: 100%; text-align: left; align-items: flex-start; align-self: stretch; margin: 0; }
  /* h2 4149:7516: STIX 28, w271. body 4149:7517: Inter 14 / line 26 #282828, w317. */
  body[data-page="global-movement"] .gm-dharampur__copy h2 {
    font-size: min(28px, calc(28 / 390 * 100vw)); line-height: 1.25; text-align: left;
    max-width: min(271px, calc(271 / 390 * 100vw));
    margin: 0 0 min(25px, calc(25 / 390 * 100vw));
  }
  body[data-page="global-movement"] .gm-dharampur__copy p {
    font-size: min(14px, calc(14 / 390 * 100vw)); line-height: calc(26 / 14);
    max-width: min(317px, calc(317 / 390 * 100vw)); margin: 0;
  }
  /* body(2838) → image(2859) = 21px gap. */
  /* Feature is full-bleed so the caption (centered, ≤268) and the next arrow
     (right) sit side-by-side like Figma instead of the arrow overlapping text. */
  body[data-page="global-movement"] .gm-dharampur__feature {
    width: 100vw; position: relative; left: 50%; margin-left: -50vw;
    margin-top: min(21px, calc(21 / 390 * 100vw));
  }
  /* Figma 4149:7519: image is FULL-BLEED (391 wide) × 382 tall — "extended". */
  body[data-page="global-movement"] .gm-dharampur__viewport {
    width: 100%;
    height: min(382px, calc(382 / 390 * 100vw));
    aspect-ratio: auto; border-radius: 0;
  }
  /* caption 4149:7520: 12px, centered, 24px below image. */
  /* caption 4149:7520: title Inter Medium 12 (own line, centered), body
     Inter Regular 12/20, w268 centered. */
  /* Figma 4149:7520: caption block w268 centered; TITLE centered, BODY
     left-aligned (lines flush-left), arrow to the right with space. */
  body[data-page="global-movement"] .gm-dharampur__feature figcaption.gm-dharampur__caption {
    font-size: min(12px, calc(12 / 390 * 100vw)); line-height: calc(20 / 12);
    text-align: left; color: #282828; /* override desktop figcaption center (0,2,2) */
    max-width: min(268px, calc(268 / 390 * 100vw));
    margin: min(24px, calc(24 / 390 * 100vw)) auto 0;
  }
  body[data-page="global-movement"] .gm-dharampur__feature figcaption strong {
    display: block; font-weight: 500; text-align: center; /* title centered above the left-aligned body */
    font-size: min(12px, calc(12 / 390 * 100vw)); line-height: 1.3;
    margin-bottom: min(6px, calc(6 / 390 * 100vw));
  }
  /* Figma 4149:7523: ONE next arrow, right of caption, vertically centered. */
  body[data-page="global-movement"] .gm-dharampur__controls {
    position: absolute; margin: 0; gap: 0;
    right: min(16px, calc(16 / 390 * 100vw));
    top: calc(min(382px, calc(382 / 390 * 100vw)) + min(44px, calc(44 / 390 * 100vw)));
  }
  body[data-page="global-movement"] .gm-dharampur__btn--prev { display: none; }

  /* Figma: dharampur(3349) → network h2(3419) = 70px. Copy inset 38px,
     cards 336 centered (so 0 side padding on the section). */
  /* Figma artboard fill is #fafafa — the network sits on it (NOT the cream
     the desktop rule applies). Reset so the text bg matches Figma. */
  body[data-page="global-movement"] .gm-network { padding: min(70px, calc(70 / 390 * 100vw)) 0 0; background: #fafafa; }
  body[data-page="global-movement"] .gm-network__inner { padding: 0; gap: 0; } /* mobile.css adds 24px; copy uses explicit margin */
  /* body(3696) → card1(3736) = 40px. */
  body[data-page="global-movement"] .gm-network__copy {
    padding: 0 min(38px, calc(38 / 390 * 100vw));
    margin-bottom: min(40px, calc(40 / 390 * 100vw)); max-width: none;
  }
  body[data-page="global-movement"] .gm-network__copy h2 {
    font-size: min(28px, calc(28 / 390 * 100vw)); line-height: 1.25;
    max-width: min(271px, calc(271 / 390 * 100vw));
    margin: 0 0 min(8px, calc(8 / 390 * 100vw));
  }
  body[data-page="global-movement"] .gm-network__copy p {
    font-size: min(14px, calc(14 / 390 * 100vw)); line-height: calc(26 / 14);
    max-width: min(317px, calc(317 / 390 * 100vw)); margin: 0;
  }
  /* cards 4149:7526..: 336 wide centered, stacked, 25px apart. */
  /* mobile.css forces this to display:flex column !important — so center the
     fixed-width cards via align-items, and set the Figma 25px gap. */
  body[data-page="global-movement"] .gm-network__grid {
    align-items: center;
    gap: min(25px, calc(25 / 390 * 100vw));
  }
  /* card bg is translucent CREAM rgba(240,234,222,0.5) — NOT the desktop
     brown #734B1F. Heights: card1 288, cards 2-4 308 (image 196 vs 208). */
  body[data-page="global-movement"] .gm-network-card {
    flex: none; width: min(336px, calc(336 / 390 * 100vw)); align-self: center;
    height: auto; min-height: min(308px, calc(308 / 390 * 100vw));
    /* mobile.css sets #F0EADE !important (opaque) — Figma is translucent cream. */
    background: rgba(240, 234, 222, 0.5) !important;
    border-radius: 4px; overflow: hidden;
  }
  body[data-page="global-movement"] .gm-network-card:first-child {
    min-height: min(288px, calc(288 / 390 * 100vw));
  }
  body[data-page="global-movement"] .gm-network-card__photo {
    height: min(208px, calc(208 / 390 * 100vw)); aspect-ratio: auto;
  }
  body[data-page="global-movement"] .gm-network-card:first-child .gm-network-card__photo {
    height: min(196px, calc(196 / 390 * 100vw));
  }
  /* label 4149:7528: Inter 400 14/22 #5e2a29 centered on the cream card. */
  body[data-page="global-movement"] .gm-network-card__label {
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: min(14px, calc(14 / 390 * 100vw)); line-height: calc(22 / 14);
    color: #5e2a29; text-align: center;
    max-width: none; margin: 0;
    padding: min(25px, calc(25 / 390 * 100vw)) min(20px, calc(20 / 390 * 100vw)) min(22px, calc(22 / 390 * 100vw));
  }
  body[data-page="global-movement"] .gm-network-card__label span { color: #5e2a29; opacity: 1; }
  /* Figma mobile network is a vertical stack — no carousel arrows. */
  body[data-page="global-movement"] .gm-network__nav { display: none; }

  /* gm-usa mobile — Figma group 4149:7543 (x35 y5093). Left margin 35px.
     heading→body 15px, body→button 20px, button→photo 70px (y5580→5650). */
  body[data-page="global-movement"] .gm-usa {
    padding: min(70px, calc(70 / 390 * 100vw)) min(35px, calc(35 / 390 * 100vw)) 0; /* Figma network(5023)→usa h2(5093) = 70px */
  }
  body[data-page="global-movement"] .gm-usa__inner {
    grid-template-columns: 1fr;
    gap: min(70px, calc(70 / 390 * 100vw));
    padding: 0;
  }
  /* Figma 4149:7544: STIX Medium 28px #5e2a29 */
  body[data-page="global-movement"] .gm-usa__copy h2 {
    font-size: min(28px, calc(28 / 390 * 100vw)); line-height: 1.25;
    max-width: min(271px, calc(271 / 390 * 100vw)); /* Figma w271 */
    margin: 0 0 min(15px, calc(15 / 390 * 100vw));
  }
  /* Figma 4149:7545: Inter Regular 14px / line 26px #282828 */
  body[data-page="global-movement"] .gm-usa__copy p {
    font-size: min(14px, calc(14 / 390 * 100vw)); line-height: calc(26 / 14);
    color: #282828; margin: 0 0 min(20px, calc(20 / 390 * 100vw));
  }
  /* Figma 4149:7546 Button/Mobile: Inter Medium 14/20, 1px border #5e2a29,
     radius 40, padding 10/20, gap 12, 20px chevron. Outline treatment per
     the desktop redesign (maroon label on transparent bg).
     Desktop /1920 rules collapse padding→4px / gap→2.4px / chevron→4px at
     390 — override every dimension explicitly. */
  body[data-page="global-movement"] .gm-usa__btn {
    height: auto;
    gap: min(12px, calc(12 / 390 * 100vw));
    padding: min(10px, calc(10 / 390 * 100vw)) min(20px, calc(20 / 390 * 100vw));
    border-color: #5e2a29;
    border-radius: min(40px, calc(40 / 390 * 100vw));
    color: #5E2A29;
    font-size: min(14px, calc(14 / 390 * 100vw));
    line-height: calc(20 / 14);
    margin-top: min(20px, calc(20 / 390 * 100vw));
  }
  body[data-page="global-movement"] .gm-usa__btn-chev {
    width: min(20px, calc(20 / 390 * 100vw));
    height: min(20px, calc(20 / 390 * 100vw));
  }
  /* Figma 4149:7547: full-bleed photo, 390×364 visible through the mask. */
  body[data-page="global-movement"] .gm-usa__media {
    width: 100vw; position: relative; left: 50%; margin-left: -50vw;
    height: min(364px, calc(364 / 390 * 100vw));
    aspect-ratio: auto;
    min-height: 0;
  }

  /* Figma mobile (node 4149:7555 "1 7") is the gold/cream texture, NOT the
     desktop #912e34 maroon. Quote STIX 500 20/32 #5e2a29 (not italic),
     cite Inter 500 14 #4a3b2e uppercase. */
  body[data-page="global-movement"] .gm-quote-band {
    height: auto;
    min-height: min(451px, calc(451 / 390 * 100vw));
    background: url('assets/gm-mission-texture.jpg') center / cover no-repeat;
    padding: min(60px, calc(60 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw));
    margin-top: 0; /* Figma: usa photo (6014) → quote band (6014) adjacent, no gap */
  }
  body[data-page="global-movement"] .gm-quote-band blockquote {
    font-family: 'STIX Two Text', serif; font-style: normal; font-weight: 500;
    font-size: min(20px, calc(20 / 390 * 100vw)); line-height: calc(32 / 20);
    color: #5e2a29;
    max-width: min(263px, calc(263 / 390 * 100vw)); /* Figma w263 — narrow */
    margin-left: auto; margin-right: auto;
  }
  /* Figma 4149:7558: paragraph break after "accomplish." (mobile only — the
     desktop quote, the other dev's domain, stays one block). */
  body[data-page="global-movement"] .gm-quote-band blockquote br.gm-q-break { display: inline; }
  body[data-page="global-movement"] .gm-quote-band cite {
    font-family: 'Inter', sans-serif; font-weight: 500; font-style: normal;
    font-size: min(14px, calc(14 / 390 * 100vw)); line-height: calc(24 / 14);
    letter-spacing: 0.08em; text-transform: uppercase; color: #4a3b2e;
  }
  /* QC GM-r23 mobile: band here is the cream/gold texture, so the audio
     button flips to maroon-on-cream. */
  body[data-page="global-movement"] .gm-quote-band__audio {
    margin-top: min(22px, calc(22 / 390 * 100vw));
  }
  body[data-page="global-movement"] .gm-quote-band__play {
    border-color: #5e2a29;
    color: #5e2a29;
  }
  body[data-page="global-movement"] .gm-quote-band__play:hover,
  body[data-page="global-movement"] .gm-quote-band__play:focus-visible {
    background: rgba(94, 42, 41, 0.1);
    border-color: #5e2a29;
  }
  body[data-page="global-movement"] .gm-quote-band__audio-label {
    color: #5e2a29;
  }

  /* gm-follow mobile — Figma 4149:7560 (SRMD) + 4149:7574 (SRLC): two
     stacked cream (#efeadf) bands, each 389×108. Label STIX Medium 16px
     #5e2a29 capitalize centered; row of 4 social icons (44×44 tap targets,
     5px apart, centered). Desktop is a tan #bea884 side-by-side row whose
     /1920 icon sizes collapse to ~9px at 390 — override fully. */
  body[data-page="global-movement"] .gm-follow {
    height: auto;
    flex-direction: column;
    background: #efeadf;
    padding: 0;
  }
  body[data-page="global-movement"] .gm-follow__inner {
    flex-direction: column;
    gap: 0;
  }
  body[data-page="global-movement"] .gm-follow__col {
    width: 100%;
    min-height: min(108px, calc(108 / 390 * 100vw));
    justify-content: center;
    gap: min(7px, calc(7 / 390 * 100vw));
  }
  body[data-page="global-movement"] .gm-follow__label {
    font-size: min(16px, calc(16 / 390 * 100vw));
    margin: 0;
  }
  body[data-page="global-movement"] .gm-follow__icons {
    gap: min(5px, calc(5 / 390 * 100vw));
  }
  body[data-page="global-movement"] .gm-follow__icons a,
  body[data-page="global-movement"] .gm-follow__icons img {
    width: min(44px, calc(44 / 390 * 100vw));
    height: min(44px, calc(44 / 390 * 100vw));
  }
  body[data-page="global-movement"] .gm-follow__icons li:nth-child(1) img {
    width: min(24px, calc(24 / 390 * 100vw));
    height: min(24px, calc(24 / 390 * 100vw));
  }
}