/* OD Nutra remake: frames 5 and 6, the navy section.
   Lino's direction (2026-11-11): after frame 4 comes a navy panel. Frame 5: "Manufacturing for
   Brands Selling Across Today's Leading Channels", reviews, a Get a Quote, a moving row of sales
   channels and a small image card in the bottom left corner. Scrolling on, that card grows into
   the wide image of frame 6, and "From formula to finished product.", its pills and the
   "Quality at every step." card come in.

   Full screen (Lino 2026-11-11): the navy panel runs edge to edge, no white frame around it.

   Two modes, the same ones as the reel (scenes.css):
   - .reel-on (pinned): the section starts one screen early so its sheet rises over frame 4, then
     holds on its own sticky stage. JS writes on .brands__panel:
       --x5          frame 5 leaving (0 to 1)
       --tx --ty --k the image frame's move and scale from the wide box onto the growing box
       --ci-x --ci-y --cr  its crop (in its own, unscaled pixels) and corner radius
       --z           the photo's own zoom inside the frame (1.16 in the card, 1 when wide)
       --q           the quality card rising (0 to 1)
     and the classes .is-in (lines revealed) on .b5 / .b6, .is-gone on .b5.
   - otherwise (phones, short screens, reduced motion, no JS): one navy panel, frame 5 then
     frame 6 in flow; each frame's lines rise in once it is on screen. */

.brands {
  --navy-950: var(--hero-bg, #070f1f); /* Lino 2026-11-11: same midnight blue as the hero ground */
  --on-navy-1: #ffffff;
  --on-navy-2: #95a0ae;                /* second-tone headline lines, channel names (6.3:1) */
  --on-navy-3: #bcc5d0;                /* body text (9.6:1) */
  --slate: #34465f;                    /* the quality card */
  --b-title: clamp(2.25rem, min(4.5vw, 8.4svh), 5rem);
  position: relative; z-index: 1;
  padding: 0; background: var(--navy-950);
}
.brands__panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 8vw, 112px);
  padding: calc(var(--frame) + var(--bar-clear) + clamp(28px, 5vw, 72px)) var(--pad-x) clamp(28px, 4vw, 56px);
  border-radius: 0; background: var(--navy-950); color: var(--on-navy-1);
}
.b5:focus, .b6:focus { outline: none; }

/* ---------- Frame 5 ---------- */
.b5 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.b5__eyebrow { margin: 0 0 clamp(18px, 2vw, 28px); font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aqua-cta); }
.proof--dark .proof__faces img { box-shadow: 0 0 0 2px var(--navy-950); }
.proof--dark .proof__text { color: var(--on-navy-3); }
.b5__title, .b6__title {
  margin: 0; font-size: var(--b-title); font-weight: 500; line-height: 1.04; letter-spacing: -0.045em; color: var(--on-navy-1);
}
.ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ln > span { display: block; }
.ln--dim, .dim { color: var(--on-navy-2); }
.b5__text { max-width: 34em; text-wrap: pretty; margin: clamp(20px, 2.6svh, 30px) 0 clamp(22px, 3svh, 32px); font-size: var(--text-body); line-height: 1.5; letter-spacing: -0.01em; color: var(--on-navy-3); }

/* The moving row of channels: two copies of the list, the second hidden from assistive tech.
   It loops on its own (no pause button or hover stop, Lino 2026-11-11); it rests only off screen */
.marquee { position: relative; min-width: 0; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid rgb(255 255 255 / 0.14); }
.marquee__view {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 86%, transparent 100%);
}
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee__list { display: flex; align-items: center; gap: clamp(40px, 4.4vw, 72px); margin: 0; padding: 0 clamp(40px, 4.4vw, 72px) 0 0; list-style: none; }
.marquee__item { display: flex; align-items: center; gap: 12px; height: clamp(60px, 9svh, 84px); white-space: nowrap; font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1875rem); letter-spacing: -0.02em; color: var(--on-navy-2); }
.marquee__item svg { width: 24px; height: 24px; flex: none; }
.b5:not(.is-in) .marquee__track, .b5.is-gone .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
.brands :focus-visible { outline-color: var(--aqua-cta); }

.b5__thumb { display: none; }

/* ---------- Frame 6 ---------- */
.b6 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 40px; }
.b6__media { position: relative; height: clamp(220px, 40vw, 540px); border-radius: 22px; }
.b6__frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #c9d1d4; transform-origin: 50% 50%; }
.b6__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; transform: scale(var(--z, 1)); transform-origin: 50% 50%; }
.b6__pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: var(--radius-pill);
  font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; color: var(--navy-900);
  background: rgb(255 255 255 / 0.82); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 6px 18px -10px rgb(5 23 25 / 0.45);
}
.pill svg { width: 18px; height: 18px; flex: none; color: var(--teal-600); }
/* The button sits on the line of "product." */
.b6__head { font-size: var(--b-title); line-height: 1.04; }
.b6__title { display: inline; font-size: 1em; }
.b6__title .ln { display: inline-block; vertical-align: bottom; }
.b6__cta { vertical-align: 0.2em; margin-left: 0.32em; }
.b6__text { max-width: 31em; text-wrap: pretty; margin: 0; font-size: var(--text-body); line-height: 1.5; letter-spacing: -0.01em; color: var(--on-navy-3); }
.quality {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(22px, 2.2vw, 32px); border-radius: var(--radius-card);
  /* glass, like the pills (Lino 2026-11-11): the frame's photo blurs through where they overlap */
  background: linear-gradient(160deg, rgb(255 255 255 / 0.13), rgb(255 255 255 / 0.05) 60%);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 0 0 1px rgb(255 255 255 / 0.10), 0 40px 70px -40px rgb(0 0 0 / 0.7);
}
.quality__icon { width: clamp(36px, 3vw, 46px); height: clamp(36px, 3vw, 46px); color: var(--aqua-cta); margin-bottom: auto; }
.quality__title { margin: clamp(40px, 7svh, 80px) 0 12px; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.625rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; color: var(--on-navy-1); }
.quality__text { margin: 0; font-size: 0.875rem; line-height: 1.5; color: #d3dae2; }

/* ---------- Reveals (both modes) ---------- */
.ln > span { transition: transform 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--d, 0) * 1ms); }
.ln:nth-child(2) > span, .ln:nth-of-type(2) > span { --d: 90; }
.ln:nth-child(3) > span { --d: 180; }
.b5__side > *, .b5__text, .b5__cta, .marquee, .b6__cta, .b6__text, .pill {
  transition: opacity 0.9s var(--ease-out) calc(var(--d, 0) * 1ms), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--d, 0) * 1ms), filter 0.9s var(--ease-out) calc(var(--d, 0) * 1ms);
}
.b5__side > :nth-child(2) { --d: 120; }
.b5__text { --d: 260; } .b5__cta { --d: 340; } .marquee { --d: 420; }
.b6__cta { --d: 240; } .b6__text { --d: 300; }
.pill:nth-child(1) { --d: 120; } .pill:nth-child(2) { --d: 190; } .pill:nth-child(3) { --d: 260; } .pill:nth-child(4) { --d: 330; }
.js .b5:not(.is-in) .ln > span, .js .b6:not(.is-in) .ln > span { transform: translate3d(0, 108%, 0); transition-delay: 0s; transition-duration: 0.5s; }
.js .b5:not(.is-in) .b5__side > *, .js .b5:not(.is-in) .b5__text, .js .b5:not(.is-in) .b5__cta,
.js .b6:not(.is-in) .b6__cta, .js .b6:not(.is-in) .b6__text { opacity: 0; transform: translate3d(0, 18px, 0); transition-delay: 0s; }
/* With the scroll-marked title (letters.css), the text and button wait until it is fully marked */
.b6.has-scrub .b6__cta { --d: 0; } .b6.has-scrub .b6__text { --d: 110; }
.js .b6.has-scrub:not(.is-told) .b6__cta, .js .b6.has-scrub:not(.is-told) .b6__text { opacity: 0; transform: translate3d(0, 18px, 0); transition-delay: 0s; }
.js .b5:not(.is-in) .marquee { opacity: 0; transition-delay: 0s; }
.js .b6:not(.is-in) .pill { opacity: 0; transform: translate3d(0, -8px, 0) scale(0.92); filter: blur(6px); transition-delay: 0s; }

/* ---------- The bar over the navy panel ---------- */
.on-navy .nav { background: rgb(255 255 255 / 0.95); border-color: rgb(255 255 255 / 0.9); }
.nav { transition: background-color 0.35s var(--ease-out); }

/* ---------- Flow, tablets and desktops (short screens, reduced motion) ---------- */
@media (min-width: 760px) {
  html:not(.reel-on) .b5 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); column-gap: 40px; }
  html:not(.reel-on) .marquee { grid-column: 2; }
  html:not(.reel-on) .b6 { grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr); }
  html:not(.reel-on) .b6__media { grid-column: 1 / -1; }
  html:not(.reel-on) .b6__pills { position: absolute; z-index: 1; top: 14px; right: 14px; justify-content: flex-end; max-width: calc(100% - 28px); }
  html:not(.reel-on) .b6__head, html:not(.reel-on) .b6__text { grid-column: 1; }
  html:not(.reel-on) .quality { grid-column: 2; grid-row: 2 / span 2; margin-top: calc(-1 * clamp(48px, 7vw, 110px)); }
}
/* Flow: the image opens up as it arrives */
html:not(.reel-on).js .b6__frame { transition: clip-path 1.3s cubic-bezier(0.2, 0.8, 0.2, 1); clip-path: inset(0 round 22px); }
html:not(.reel-on).js .b6:not(.is-in) .b6__frame { clip-path: inset(7% 9% round 22px); }
html:not(.reel-on).js .b6__img { transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
html:not(.reel-on).js .b6:not(.is-in) .b6__img { --z: 1.14; }

/* ---------- Pinned (tablets and desktops) ---------- */
/* Lino 2026-11-11: frame 4 stays white and full size while the navy sheet rises over it
   (no shrink, no grey dim; those showed a white cut at the edges). */
.reel-on .brands { padding: 0; background: none; }
.reel-on .brands__stage { position: sticky; top: 0; height: 100svh; padding: 0; background: var(--navy-950); }
.reel-on .brands__panel { display: block; height: 100%; padding: 0; }
.reel-on .b5, .reel-on .b6 { position: absolute; inset: 0; display: block; pointer-events: none; }
.reel-on .b5:not(.is-gone) > *, .reel-on .b6.is-in > * { pointer-events: auto; }
.reel-on .b6.is-in .b6__media { pointer-events: none; }

/* Frame 5: the reviews on the left, the headline from 36% across, the channels along the bottom */
.reel-on .brands { --top5: calc(var(--bar-clear) + clamp(28px, 11svh, 150px)); --base5: clamp(22px, 5.4svh, 56px); --col5: 35.8%; }
.reel-on .b5__side { position: absolute; left: var(--pad-x); top: calc(var(--top5) + 0.35em); transform: translate3d(0, calc(var(--x5, 0) * -16svh), 0); opacity: calc(1 - 1.6 * var(--x5, 0)); }
.reel-on .b5__main { position: absolute; left: var(--col5); right: var(--pad-x); top: var(--top5); transform: translate3d(0, calc(var(--x5, 0) * -34svh), 0); opacity: calc(1 - 2 * var(--x5, 0)); }
.reel-on .b5__title { max-width: 13em; }
.reel-on .marquee { position: absolute; left: calc(var(--col5) - 48px); right: 0; bottom: var(--base5); transform: translate3d(0, calc(var(--x5, 0) * 10svh), 0); opacity: calc(1 - 2 * var(--x5, 0)); }
.reel-on .b5 .marquee__view { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 88%, transparent 100%); }
.reel-on .b5__thumb {
  display: block; position: absolute; visibility: hidden;
  left: var(--pad-x); bottom: var(--base5); width: clamp(200px, 21.4%, 380px); aspect-ratio: 1.7; border-radius: 18px;
}

/* Frame 6: the wide image under the bar; the frame is moved and cropped onto the growing box */
.reel-on .b6__media {
  position: absolute; left: var(--pad-x); right: clamp(14px, 1.6vw, 26px);
  top: calc(var(--bar-clear) + clamp(10px, 2.2svh, 24px)); bottom: 44.5%; height: auto;
}
.reel-on .b6__frame {
  transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(var(--k, 1));
  clip-path: inset(var(--ci-y, 0) var(--ci-x, 0) round var(--cr, 22px));
  will-change: transform, clip-path; box-shadow: none;
}
.reel-on .b6__img { will-change: transform; }
.reel-on .b6__pills { position: absolute; z-index: 1; top: 14px; right: 14px; justify-content: flex-end; max-width: calc(100% - 28px); }
.reel-on .b6__head { position: absolute; left: var(--pad-x); top: 60.5%; max-width: 60%; }
.reel-on .b6__text { position: absolute; left: var(--pad-x); top: calc(60.5% + 2.2 * var(--b-title) + clamp(16px, 2.6svh, 30px)); }
.reel-on .quality {
  position: absolute; right: clamp(40px, 7.4%, 130px); top: 50.5%; bottom: 8.4%; width: clamp(270px, 24%, 380px);
  transform: translate3d(0, calc((1 - var(--q, 0)) * 62svh), 0); opacity: clamp(0, calc(var(--q, 0) * 2.2), 1);
}
.reel-on .quality__title { margin-top: 0; }

/* Portrait tablets and small laptops: frame 5's headline takes more width */
@media (min-width: 760px) and (max-width: 1099px) {
  .reel-on .brands { --col5: 33%; --b-title: clamp(2.25rem, min(5.4vw, 7.6svh), 4rem); }
  .reel-on .b5__side { max-width: calc(var(--col5) - var(--pad-x) - 16px); }
  .reel-on .b6__head { max-width: 62%; }
  .reel-on .b6__text { max-width: 52%; }
  .reel-on .quality { right: var(--pad-x); width: clamp(250px, 32%, 320px); }
}
/* Portrait tablets: one column; the channels sit above the image card */
@media (min-width: 760px) and (max-aspect-ratio: 4/5) {
  .reel-on .brands { --col5: var(--pad-x); --b-title: clamp(2.5rem, 7vw, 4rem); }
  .reel-on .b5__side { top: var(--top5); max-width: none; }
  .reel-on .b5__main { top: calc(var(--top5) + 112px); }
  .reel-on .b5__thumb { width: 34%; }
  .reel-on .marquee { left: 0; bottom: calc(var(--base5) + 100vw * 0.34 / 1.7 + 28px); }
  .reel-on .b6__head, .reel-on .b6__text { max-width: 56%; }
  /* the headline wraps to three lines here, so the text starts below the third */
  .reel-on .b6__text { top: calc(60.5% + 3.3 * var(--b-title) + clamp(16px, 2.6svh, 30px)); }
}

/* ---------- Phones ---------- */
@media (max-width: 759px) {
  .brands { --b-title: clamp(2rem, 9vw, 2.5rem); }
  .brands__panel { border-radius: 0; padding: calc(var(--bar-clear) + 30px) 20px 20px; gap: 64px; }
  .b5__title { letter-spacing: -0.04em; }
  .marquee { margin-inline: -20px; padding-left: 20px; }
  .b6__media { height: auto; border-radius: 0; display: flex; flex-direction: column; gap: 14px; }
  .b6__frame { position: relative; inset: auto; aspect-ratio: 4 / 3; border-radius: 18px; }
  .b6__img { object-position: 62% 58%; }
  .b6 { gap: 18px; }
  .b6__pills { margin-bottom: 22px; position: static; }
  .pill { background: rgb(255 255 255 / 0.08); color: var(--on-navy-1); box-shadow: none; border: 1px solid rgb(255 255 255 / 0.12); }
  .pill svg { color: var(--aqua-cta); }
  .b6__cta { margin-left: 0; margin-top: 18px; vertical-align: 0; }
  .b6__head .ln:last-of-type { margin-right: 100%; }
  .quality { margin-top: 18px; }
  .quality__title { margin-top: 48px; }
}

/* ---------- Reduced motion: everything is shown, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .ln > span, .b5__side > *, .b5__text, .b5__cta, .marquee, .b6__cta, .b6__text, .pill, .b6__frame, .b6__img { transition: none !important; }
  .js .b5:not(.is-in) .ln > span, .js .b6:not(.is-in) .ln > span,
  .js .b5:not(.is-in) .b5__side > *, .js .b5:not(.is-in) .b5__text, .js .b5:not(.is-in) .b5__cta, .js .b5:not(.is-in) .marquee,
  .js .b6:not(.is-in) .b6__cta, .js .b6:not(.is-in) .b6__text, .js .b6:not(.is-in) .pill { opacity: 1; transform: none; filter: none; }
  html.js .b6:not(.is-in) .b6__frame { clip-path: none; }
  html.js .b6:not(.is-in) .b6__img { --z: 1; }
}