/* Page layout for the IFM showcase. Components come from bundle.css; this file only places them. */
html { scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Without JavaScript nothing adds .is-in, so reveals must start visible. */
html:not(.js) .rl-reveal { opacity: 1; transform: none; }
/* Ambient loops run forever and the page has no pause control, so they are off. */
.rl-email::after { animation: none; }
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 30; padding: 10px 16px; background: var(--navy-deep); color: var(--cream); font-size: 13px; }
.skip:focus { top: 12px; }

.rl-nav { position: fixed; inset: 0 0 auto; z-index: 20; }

section { padding: 160px 8vw var(--space-8); position: relative; }
.wrap { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }
.lede { max-width: 620px; margin: var(--space-5) 0 0; font-size: 17px; line-height: 1.85; color: var(--ink-body); }
.rl-eyebrow { margin-bottom: var(--space-5); }
.rl-display--l { max-width: 18ch; margin-bottom: var(--space-7); }

/* I. Hero */
.hero { min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.hero .wrap { width: 100%; }
.hero .rl-display { max-width: 14ch; }
.hero .rl-tagline { margin-top: var(--space-6); }
.ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; z-index: 0; pointer-events: none; }
.ridge path { fill: none; stroke: var(--navy); stroke-width: 1; opacity: 0.1; vector-effect: non-scaling-stroke; }

/* III. The journey: night ground */
.journey { background: linear-gradient(to bottom, var(--navy-deep) 0%, var(--navy) 50%, var(--navy-deep) 100%); }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-6); align-items: baseline; padding: var(--space-6) 0; border-top: 1px solid var(--hairline); }
.steps .rl-numeral { margin: 0; text-shadow: 0 0 18px rgba(201, 169, 97, 0.55); }
.steps .rl-pillar-name { font-size: clamp(32px, 4vw, 52px); margin-bottom: var(--space-4); }
.steps .rl-pillar-body { max-width: 560px; font-size: 16px; }

/* IV. Roles */
.station { max-width: 620px; margin: var(--space-7) auto 0; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 24px; line-height: 1.5; color: var(--ink-muted); }

/* V. Contact: dusk */
.contact { text-align: center; padding-bottom: var(--space-8);
  background: linear-gradient(var(--navy-deep) 0%, var(--navy) 38%, #1d3457 62%, var(--dusk-violet) 78%, var(--dusk-ember) 92%, var(--dusk-amber) 100%); }
.contact .rl-display { max-width: 20ch; margin: 0 auto var(--space-6); }
.contact address { margin-top: var(--space-6); font-style: normal; font-size: 16px; line-height: 1.8; color: var(--mist); }
.contact .rl-label { display: block; margin-bottom: var(--space-2); }
.sun { width: 72px; height: 72px; margin: var(--space-8) auto 0; border-radius: var(--radius-full); background: var(--gold-bright); opacity: 0.85; box-shadow: 0 0 120px 48px rgba(201, 169, 97, 0.28); }
footer { padding: var(--space-6) 24px; text-align: center; background: var(--navy-deep); }
footer .rl-micro { margin: 0; font-size: 11px; letter-spacing: 0.2em; line-height: 2; color: rgba(243, 236, 221, 0.7); }

@media (max-width: 800px) {
  section { padding: 110px 24px 90px; }
  .steps li { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-5) 0; }
  .steps .rl-numeral { font-size: 48px; }
}
@media (max-width: 760px) {
  .rl-nav, .rl-nav.is-scrolled { padding: 18px 24px; }
  .rl-nav li:not(.keep) { display: none; }
  .rl-mark { font-size: 16px; }
}
@media (forced-colors: active) {
  .rl-pillar-name, .rl-sheen { -webkit-text-fill-color: currentColor; background: none; }
}