/* ============================================================
   Foundation page — MOBILE composition layer (html.m-mobile)
   Mirrors the home page's mobile system: one-row marquee banner,
   vertical hero, tighter section rhythm.
   ============================================================ */

/* ── announcement banner: one row, slow marquee, arrow-only CTA ── */
html.m-mobile .hero-banner { display: flex; width: 100%; padding: 9px 12px 9px 10px; gap: 8px; flex-wrap: nowrap; align-items: center; }
html.m-mobile .hero-banner .hb-text { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; font-size: 12.5px; }
html.m-mobile .hero-banner .hb-tag { flex: none; }
html.m-mobile .hero-banner .hb-view { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%); mask-image: linear-gradient(to right, #000 86%, transparent 100%); }
html.m-mobile .hero-banner .hb-mar { display: flex; width: max-content; gap: 44px; animation: hbMarquee 26s linear infinite; }
html.m-mobile .hero-banner .hb-full { display: block; white-space: nowrap; }
html.m-mobile .hero-banner .hb-clone { display: block; }
html.m-mobile .hero-banner .hb-cta { flex: none; font-size: 0; gap: 0; white-space: nowrap; }
html.m-mobile .hero-banner .hb-cta svg { width: 15px; height: 15px; }
@keyframes hbMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 22px)); } }
@media (prefers-reduced-motion: reduce) { html.m-mobile .hero-banner .hb-mar { animation: none; } }
/* SDG badge strip: centered as its own band, not hanging off the left edge */
html.m-mobile .fnd-sdg-icons { justify-content: center; width: 100%; }
/* mission tenets: compact so all three hold one row */
html.m-mobile .fnd-msn-tenets { flex-wrap: nowrap; gap: 10px; margin-top: 28px; }
html.m-mobile .fnd-msn-tenets span { font-size: 12px; gap: 6px; white-space: nowrap; }
html.m-mobile .fnd-msn-tenets span svg { width: 13px; height: 13px; }
html.m-mobile .fnd-msn-tenets span + span::before { margin-right: 10px; }

/* ── hero: vertical, glass mark as the centerpiece ── */
html.m-mobile .fnd-hero2 .hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
html.m-mobile .fnd-hero2 .hero-copy { display: contents; }
html.m-mobile .fnd-hero2 .hero-eyebrow { order: 1; margin: 0 auto; font-size: 11.5px; }
html.m-mobile .fnd-hero2 .hero-h { order: 2; margin-top: 20px; font-size: clamp(38px, 11vw, 46px); line-height: 1.04; letter-spacing: -.045em; }
html.m-mobile .fnd-hero2 .hero-object { order: 3; width: 100%; display: flex; justify-content: center; margin: 22px 0 0; }
html.m-mobile .fnd-hero2 .hero-stack { width: min(240px, 62%); max-width: none; }
html.m-mobile .fnd-hero2 .hero-sub { order: 4; font-size: 15.5px; line-height: 1.55; max-width: 34ch; margin: 20px auto 0; }
html.m-mobile .fnd-hero2 .hero-actions { order: 5; width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
html.m-mobile .fnd-hero2 .hero-actions .btn { width: 100%; justify-content: center; min-height: 52px; font-size: 16px; }

/* ── our mission: give the statement + sub room to breathe ── */
html.m-mobile .fnd-ethos-in { text-align: left; }
html.m-mobile .fnd-ethos-stmt { font-size: clamp(24px, 7.2vw, 29px); line-height: 1.22; letter-spacing: -.032em; text-wrap: pretty; max-width: 26ch; }
html.m-mobile .fnd-ethos-sub { font-size: 15.5px; line-height: 1.62; margin-top: 20px; max-width: 40ch; text-wrap: pretty; }
html.m-mobile .fnd-ethos-in .eyebrow { margin: 0; }
html.m-mobile .fnd-ethos-tenets { justify-content: flex-start; margin-top: 24px; }

/* ── section rhythm + heading composition ── */
html.m-mobile .sec { padding: 60px 0; }
html.m-mobile .fnd-ethos { padding: 60px 0; }
html.m-mobile .fnd-artemis-sec { padding-top: 0; padding-bottom: 60px; }
html.m-mobile .shead h2 { font-size: clamp(27px, 8vw, 30px); line-height: 1.1; letter-spacing: -.04em; text-wrap: pretty; }
html.m-mobile .shead p { font-size: 14.8px; line-height: 1.6; margin-top: 12px; max-width: 42ch; text-wrap: pretty; }
html.m-mobile .fnd-artemis-copy h2 { font-size: 26px; line-height: 1.12; }

/* ── Artemis: the pass sits right after the paragraph, not at the bottom ── */
html.m-mobile .fnd-artemis-in { display: flex; flex-direction: column; gap: 0; }
html.m-mobile .fnd-artemis-copy { display: contents; }
html.m-mobile .fnd-artemis-copy .eyebrow { order: 1; }
html.m-mobile .fnd-artemis-copy h2 { order: 2; }
html.m-mobile .fnd-artemis-copy > p { order: 3; }
html.m-mobile .fnd-artemis-pass { order: 4; margin-top: 24px; }
html.m-mobile .fnd-artemis-log { order: 5; margin-top: 26px; }
html.m-mobile .fnd-artemis-link { order: 6; }

/* mission statement on phones: fill the column, even line lengths */
html.m-mobile .fnd-ethos-stmt { max-width: none; width: 100%; text-align: left; font-size: 19.5px; line-height: 1.5; letter-spacing: -.02em; hyphens: none; }
/* hand-set lines: each phrase owns its row, so the block reads as a composed shape */
html.m-mobile .fes-l { display: block; white-space: nowrap; }
html.m-mobile .fes-l + .fes-l::before { content: none; }

html.m-mobile .fnd-ethos-sub { font-size: 15px; line-height: 1.6; margin-top: 20px; color: var(--ink-2); }

/* mission: anchor the statement in a card, like the site's other mobile blocks */
html.m-mobile .fnd-ethos-in { padding: 26px 20px 24px; border: 1px solid rgba(124,77,222,.14); border-radius: 22px; background: linear-gradient(168deg, #fff 0%, rgba(247,242,255,.86) 100%); box-shadow: 0 18px 44px -30px rgba(52,26,104,.4), inset 0 1px 0 rgba(255,255,255,.9); }
html.m-mobile .fnd-ethos-in .eyebrow { font-size: 10.5px; letter-spacing: .16em; color: var(--violet); }
html.m-mobile .fnd-ethos-stmt { margin-top: 14px; }
html.m-mobile .fnd-ethos-sub { padding-top: 18px; border-top: 1px solid rgba(124,77,222,.12); margin-top: 20px; }
html.m-mobile .fnd-ethos-tenets { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(124,77,222,.12); }

/* mission card: give the statement a structural anchor — rule + generous plate */
html.m-mobile .fnd-ethos-in { padding: 0; overflow: hidden; }
html.m-mobile .fnd-ethos-in .eyebrow { display: flex; padding: 15px 20px; margin: 0; border-bottom: 1px solid rgba(124,77,222,.12); background: rgba(124,77,222,.045); font-size: 10px; letter-spacing: .18em; }
html.m-mobile .fnd-ethos-stmt { margin: 0; padding: 24px 20px 22px; font-size: 20.5px; line-height: 1.52; font-weight: 620; }
html.m-mobile .fes-l { position: relative; padding-left: 14px; }
html.m-mobile .fes-l::after { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 1.5px; border-radius: 1px; background: rgba(124,77,222,.32); }
html.m-mobile .fnd-ethos-sub { margin: 0; padding: 18px 20px; border-top: 1px solid rgba(124,77,222,.12); font-size: 14.8px; line-height: 1.62; color: var(--ink-2); }
html.m-mobile .fnd-ethos-tenets { margin: 0; padding: 14px 20px 16px; border-top: 1px solid rgba(124,77,222,.12); background: rgba(124,77,222,.035); }

/* mission statement, take 3: dark plate + white display type (matches Reserve/chapters panels) */
html.m-mobile .fnd-ethos-stmt { position: relative; margin: 0; padding: 26px 20px 24px; font-size: 23px; line-height: 1.36; font-weight: 640; letter-spacing: -.028em; color: #fff;
  background: radial-gradient(120% 120% at 12% 0%, #40286f 0%, #2a1a4c 46%, #1c1236 100%); }
html.m-mobile .fnd-ethos-stmt .grad-word { background-image: var(--grad-vivid); }
html.m-mobile .fes-l { padding-left: 0; }
html.m-mobile .fes-l::after { display: none; }
html.m-mobile .fnd-ethos-in .eyebrow { border-bottom: 0; background: none; padding: 16px 20px 12px; color: var(--violet); }
html.m-mobile .fnd-ethos-in { background: #fff; }
html.m-mobile .fnd-ethos-sub { border-top: 0; padding: 20px 20px 16px; }

/* mission statement, take 4: natural greedy wrapping fills each line to the right edge */
html.m-mobile .fnd-ethos-stmt { background: none; color: var(--ink); padding: 22px 20px 20px; font-size: 22px; line-height: 1.34; font-weight: 640; letter-spacing: -.028em; text-wrap: pretty; text-align: left; }
html.m-mobile .fnd-ethos-stmt .grad-word { background-image: var(--grad-vivid); }
html.m-mobile .fes-l { display: inline; padding: 0; white-space: normal; }
html.m-mobile .fes-l + .fes-l::before { content: " "; }
html.m-mobile .fnd-ethos-in { background: linear-gradient(168deg, #fff 0%, rgba(247,242,255,.86) 100%); }