/* L6 Flood and gather: the home page intro. Requires tokens.css and motion.css (for .mfg-wm and .mfg-badge). */
.mfg-l6, .mfg-l6 *, .mfg-l6 *::before, .mfg-l6 *::after { box-sizing: border-box }
.mfg-l6 { position: relative; height: var(--mfg-l6-length, 640vh); font-family: var(--mfg-font); color: var(--mfg-ink) }
.mfg-l6__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--mfg-daybreak); isolation: isolate }

/* story lines */
.mfg-l6__line { position: absolute; left: 0; right: 0; margin: 0 auto; padding: 0 24px; text-align: center; z-index: 20; pointer-events: none; opacity: 0;
  font: 600 clamp(30px, 4.6vw, 64px)/1.04 var(--mfg-font); letter-spacing: -.035em; max-width: 17ch; text-wrap: balance }
.mfg-l6__line--hero { opacity: 1; top: calc(9vh + min(50vh, 70vw) + 4vh); font-size: clamp(26px, 3.6vw, 46px); line-height: 1.08; max-width: 20ch }
.mfg-l6__line--tell { top: 14%; font-size: clamp(44px, 8.4vw, 112px); line-height: 1; letter-spacing: -.04em; max-width: 12ch }
.mfg-l6__line--find { top: 81% }
@media (max-width: 640px) { .mfg-l6__line--find { top: min(78%, calc(100% - 84px - 2.2em)) } }   /* stay clear of the docked shortcut */

/* the symbol, the wordmark and the sun */
.mfg-l6__mark { position: absolute; left: 50%; top: 9vh; width: min(50vh, 70vw); height: auto; transform: translateX(-50%); overflow: visible; z-index: 2 }
.mfg-l6__mark .mfg-l6__m { fill: var(--mfg-ink) } .mfg-l6__mark .mfg-l6__msun { fill: var(--mfg-sun) }
.mfg-l6__wordmark { position: absolute; left: 50%; top: 50%; width: min(84vw, 980px); transform: translate(-50%, -50%); z-index: 2 }
.mfg-l6__wordmark .mfg-wm { width: 100%; height: auto }
.mfg-l6__wordmark .mfg-wm__m, .mfg-l6__wordmark .mfg-wm__l { opacity: 0 }
.mfg-l6__wordmark .mfg-wm__stop { visibility: hidden }   /* the moving sun lands here and becomes the full stop */
.mfg-l6__sun { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 50%; background: var(--mfg-sun); transform-origin: 50% 100%; z-index: 1; opacity: 0; will-change: transform }

/* you and your answers */
.mfg-l6__you, .mfg-l6__chip { position: absolute; left: 0; top: 0; white-space: nowrap; border-radius: var(--mfg-radius-control); font: 600 clamp(15px, 1.5vw, 19px)/1 var(--mfg-font); opacity: 0; z-index: 4 }
.mfg-l6__you { background: var(--mfg-ink); color: var(--mfg-white); padding: 16px 26px }
.mfg-l6__chip { background: var(--mfg-white); color: var(--mfg-ink); padding: 12px 18px; box-shadow: 0 0 0 1px var(--mfg-warm-line), var(--mfg-shadow-soft) }

/* jobs */
.mfg-l6__card { position: absolute; left: 0; top: 0; width: var(--mfg-l6-cw, 300px); background: var(--mfg-white); border: 1px solid var(--mfg-warm-line); border-radius: var(--mfg-radius-card);
  padding: 14px 18px; display: grid; gap: 3px; box-shadow: var(--mfg-shadow-float); z-index: 3; opacity: 0; transform-origin: 50% 50% }
.mfg-l6__card b { font-size: clamp(14px, 1.4vw, 18px) }
.mfg-l6__card > span:last-child { color: var(--mfg-muted); font-size: clamp(11.5px, 1.05vw, 13.5px); line-height: 1.4; white-space: nowrap }
.mfg-l6__card .mfg-badge { display: none }
.mfg-l6__card.is-fit { z-index: 6 } .mfg-l6__card.is-fit .mfg-badge { display: inline-flex; opacity: 0 }

/* buttons and cue */
.mfg-l6__cta { position: absolute; left: 50%; top: 62%; z-index: 20; opacity: 0; white-space: nowrap; font: 600 clamp(16px, 1.6vw, 20px)/1 var(--mfg-font);
  background: var(--mfg-ink); color: var(--mfg-white); padding: 16px 26px; border-radius: var(--mfg-radius-control); text-decoration: none; transform: translate(-50%, 0) scale(.6) }
.mfg-l6__quick { position: absolute; left: 0; top: 0; z-index: 30; white-space: nowrap; font: 600 14px/1 var(--mfg-font); color: var(--mfg-white); background: var(--mfg-ink);
  padding: 11px 16px; border-radius: var(--mfg-radius-control); text-decoration: none }
.mfg-l6__cta:focus-visible, .mfg-l6__quick:focus-visible { outline: var(--mfg-border-strong) solid var(--mfg-focus); outline-offset: 2px }
.mfg-l6__actions { display: grid; gap: var(--mfg-space-3); padding: 0; background: transparent; max-width: calc(100% - 2 * var(--mfg-space-4)) }
.mfg-l6__actions .mfg-btn { width: 100% }
.mfg-l6__cta.mfg-l6__actions { --mfg-btn: var(--mfg-ink); --mfg-on-btn: var(--mfg-white); --mfg-text: var(--mfg-ink); --mfg-soft: var(--mfg-daybreak) }
.mfg-l6__cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 30; display: grid; justify-items: center; gap: 6px; pointer-events: none;
  font: 500 12px/1 var(--mfg-font); letter-spacing: .14em; text-transform: uppercase; color: var(--mfg-muted) }
.mfg-l6__cue i { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); animation: mfg-l6-cue 1.6s ease-in-out infinite }
@keyframes mfg-l6-cue { 0%, 100% { translate: 0 -2px; opacity: .5 } 50% { translate: 0 3px; opacity: 1 } }

/* ===== Reduced motion: the whole story, stacked and still ===== */
.mfg-l6.is-static { height: auto }
.mfg-l6.is-static .mfg-l6__pin { position: relative; height: auto; display: grid; gap: 0; overflow: visible }
.mfg-l6__block { display: grid; justify-items: center; gap: 22px; padding: 64px 20px; text-align: center }
.mfg-l6__block--tell { background: var(--mfg-sun) }
.mfg-l6__block .mfg-l6__line { position: static; opacity: 1; padding: 0; transform: none }
.mfg-l6__block .mfg-l6__mark { position: static; transform: none; width: min(40vh, 60vw) }
.mfg-l6__block .mfg-l6__wordmark { position: static; transform: none; width: min(84vw, 760px) }
.mfg-l6__block .mfg-wm__m, .mfg-l6__block .mfg-wm__l { opacity: 1 }
.mfg-l6__block .mfg-wm__stop { visibility: visible }
.mfg-l6__block .mfg-l6__quick, .mfg-l6__block .mfg-l6__cta { position: static; opacity: 1; transform: none }
.mfg-l6__cluster { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 640px }
.mfg-l6__block .mfg-l6__you, .mfg-l6__block .mfg-l6__chip { position: static; opacity: 1 }
.mfg-l6__stack { display: grid; gap: 10px; width: min(100%, 340px) }
.mfg-l6__block .mfg-l6__card { position: static; opacity: 1; width: 100%; text-align: left }
.mfg-l6__block .mfg-l6__card .mfg-badge { opacity: 1 }
@media (prefers-reduced-motion: reduce) { .mfg-l6__cue i { animation: none } }