/* ==========================================================================
   APFoodz landing — scroll story
   A sticky full-window video plays as the visitor scrolls; section content
   sits directly on the video. Loaded only by landing.html, after site.css.
   Every rule is scoped under .story-root so nothing leaks to other pages.
   ========================================================================== */

.story-root { --chrome: 0px; position: relative; background: #0A1340; display: flow-root; }
/* flow-root: without it the stage's negative top margin (below) collapses through
   .story-root and moves the root itself up by --chrome, so the next measurement
   reads 0 and the stage drops back under the header. The margin has to pull the
   stage up INSIDE the root, which only a block formatting context guarantees. */

/* ---- the sticky video stage --------------------------------------------- */
.story-root .stage {
  position: sticky; top: 0;
  height: 100vh; max-height: 1600px;
  /* slide up under the topbar + header so the video fills the window */
  margin-top: calc(-1 * var(--chrome));
  z-index: 0; overflow: hidden; pointer-events: none;
  background: #0A1340;
}
.story-root .scene-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 100%; display: block;
}
@media (min-aspect-ratio: 16/9) { .story-root .scene-video { object-fit: cover; } }
.story-root .stage-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,12,40,.74) 0%, rgba(6,12,40,.42) 42%, rgba(6,12,40,.12) 100%);
}
/* The story flows over the stage: pulled up by the stage's height here, not by a
   negative bottom margin on the stage. That margin let the stage keep sticking a
   whole window past the end of the story, painting over the footer. */
.story-root .story { position: relative; z-index: 1; margin-top: calc(-1 * min(100vh, 1600px)); }

/* ---- interludes: the headline over the moving video --------------------- */
.story-root .il { height: clamp(640px, 92vh, 980px); }
.story-root .il > .wrap { padding-top: clamp(88px, 13vh, 150px); }
.story-root .il-text { max-width: 600px; display: flex; flex-direction: column; gap: 18px; }
.story-root .il .l-h1,
.story-root .il .l-h2 { color: #fff; }
.story-root .il .l-h2 { font-size: 64px; line-height: 1.02; letter-spacing: -.04em; }
.story-root .il .l-lede { color: rgba(255,255,255,.86); }
.story-root .il .l-kicker { color: #B5DA86; }

.story-root .il.hero-il { height: clamp(900px, 190vh, 2100px); }
.story-root .hero-il > .wrap {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px;
  padding-top: calc(var(--chrome) + clamp(48px, 7vh, 100px));
}
.story-root .hero-il .l-h1 { font-size: 84px; line-height: 1.02; letter-spacing: -.045em; }
.story-root .hero-il .l-lede { max-width: 660px; font-size: 21px; }
.story-root .cta-il > .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.story-root .cta-il .l-h2 { max-width: 18ch; }
.story-root .cta-il .l-lede { max-width: 600px; }

/* ---- panels: section content sitting directly on the video -------------- */
.story-root .panels { display: flex; flex-direction: column; gap: 28px; padding-bottom: 140px; text-shadow: 0 1px 14px rgba(0,0,0,.35); }
.story-root .panel {
  position: relative; padding: 48px; border-radius: 32px;
  background: linear-gradient(180deg, rgba(6,12,40,.46), rgba(6,12,40,.32));
  border: 1px solid rgba(255,255,255,.12);
}
.story-root .col48 { display: flex; flex-direction: column; gap: 48px; }
.story-root .head-block { max-width: 800px; display: flex; flex-direction: column; gap: 18px; }
.story-root .btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.story-root .panels .l-h2,
.story-root .panels .l-pill strong,
.story-root .panels .l-card strong,
.story-root .panels .l-list li,
.story-root .panels .l-list a { color: #fff; }
.story-root .panels .l-lede { color: rgba(255,255,255,.88); }
.story-root .panels .l-body,
.story-root .panels .l-pill span,
.story-root .panels .l-card span { color: rgba(255,255,255,.84); }
.story-root .panels .l-kicker { color: #B5DA86; }
.story-root .panels .l-pill { border-top-color: rgba(255,255,255,.85); }
.story-root .panels .l-pill em,
.story-root .panels .l-card em { color: #B8D0F8; }
.story-root .panels .l-list li,
.story-root .panels .l-list li:last-child { border-color: rgba(255,255,255,.24); }
.story-root .panels .l-list.links li { padding: 0; }
.story-root .panels .l-list a { display: block; padding: 12px 0; text-decoration: none; }
.story-root .panels .l-list a:hover { color: #B5DA86; }
.story-root .panels .l-card { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); border-top-color: #7DC353; }
.story-root .panels .l-card:hover { background: rgba(255,255,255,.13); border-top-color: #B5DA86; box-shadow: none; }

/* screenshots and phones stay small so the video is never covered */
.story-root .panels .l-shot { max-width: 380px; border-color: rgba(255,255,255,.3); box-shadow: 0 20px 50px rgba(0,0,0,.45); text-shadow: none; }
.story-root .panels .l-media { display: flex; justify-content: flex-end; }
.story-root .panels .l-row.reverse .l-media { justify-content: flex-start; }
.story-root .panels .wh .l-row { flex-wrap: nowrap; align-items: center; gap: 56px; }
.story-root .panels .wh .l-text { flex: 1 1 auto; max-width: 620px; padding-bottom: 0; }
.story-root .panels .wh .l-media { flex: 0 0 auto; justify-content: center; }
.story-root .panels .wh .l-phone { width: 200px; margin-bottom: 0; }
.story-root .panels .dock { position: relative; width: 100%; max-width: 420px; padding: 20px 40px 40px 0; }
.story-root .panels .dock .l-phone { position: absolute; right: 0; bottom: 0; width: 130px; border-radius: 24px; border-width: 4px; }

/* buttons on the video */
.story-root .panels .btn-primary { background: #fff; color: #0F1E5A; text-shadow: none; }
.story-root .panels .btn-primary:hover { background: #F1F5F9; color: #0F1E5A; }
.story-root .panels .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); text-shadow: none; }
.story-root .panels .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); color: #fff; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 960px) {
  .story-root .hero-il .l-h1 { font-size: 56px; }
  .story-root .il .l-h2 { font-size: 48px; }
}
@media (max-width: 700px) {
  /* a portrait phone: the 16:9 film fills the screen (cropped at the sides) instead
     of sitting as a letterboxed strip along the bottom of a navy window; the panels
     now sit on moving picture, so they are a shade more opaque */
  .story-root .scene-video { object-fit: cover; object-position: 50% 50%; }
  .story-root .il.hero-il { height: clamp(760px, 150vh, 1300px); }
  .story-root .panel { background: linear-gradient(180deg, rgba(6,12,40,.62), rgba(6,12,40,.5)); }
  .story-root .panels .wh .l-row { flex-wrap: wrap; }
  .story-root .panels .wh .l-media { flex: 1 1 100%; }
}
@media (max-width: 600px) {
  .story-root .hero-il .l-h1 { font-size: 44px; }
  .story-root .hero-il .l-lede { font-size: 17px; }
  .story-root .il .l-h2 { font-size: 38px; }
  .story-root .panel { padding: 28px 20px; border-radius: 24px; }
  .story-root .panels .dock .l-phone { width: 110px; }
}