/* assets/home-v2.css — homepage v2 (2026-09-29): dark slide hero, marquee plate, parallax give.
   Every colour, radius and font is a foundation.css / tokens.css token. Loaded by modules/core/index.html only.
   Device rules for the scroll-craft engine (data-sc-in / stagger / parallax) are copied verbatim from
   the engine's scrollcraft.css so the engine's JS stays untouched and the site keeps its own body styles. */
:root { --sc-ease-out: cubic-bezier(.22, 1, .36, 1); }
[data-sc-parallax] { will-change: transform; }
[data-sc-in], [data-sc-stagger] > * { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out); }
[data-sc-in].sc-in, [data-sc-stagger] > .sc-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 220ms; }
  [data-sc-parallax] { transform: none !important; }
}

/* ---------- 1 · HERO: three slides, dark grounds, product on the right, copy on the left ---------- */
.hv-hero { position: relative; isolation: isolate; overflow: hidden; background: hsl(var(--bf-navy-deep)); color: #fff;
  min-height: min(92vh, 860px); }
.hv-slides { position: relative; min-height: inherit; }
.hv-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; display: grid; align-items: center;
  transform: translate3d(100%, 0, 0); transition: transform 3333ms cubic-bezier(.65, 0, .35, 1), opacity 0ms linear 3333ms; }
.hv-slide.is-on { opacity: 1; pointer-events: auto; z-index: 2; transform: none; transition: transform 3333ms cubic-bezier(.65, 0, .35, 1), opacity 0ms; }
.hv-slide.is-off { opacity: 1; z-index: 1; transform: translate3d(-20%, 0, 0); transition: transform 3333ms cubic-bezier(.65, 0, .35, 1), opacity 0ms linear 3333ms; }
.hv-slide.is-off::after { content: ""; position: absolute; inset: 0; z-index: 3; background: hsl(var(--bf-navy-deep) / 0.55); pointer-events: none; }
.hv-slide:first-child { position: relative; min-height: min(92vh, 860px); }
.hv-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: hsl(var(--bf-navy-deep)); }
.hv-media img, .hv-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 74% 50%; }
.hv-media img { transform-origin: 60% 50%; }
.hv-slide.is-on .hv-media img { animation: hv-kb 14s linear forwards; }
.hv-media video { opacity: 0; transition: opacity 700ms ease; }
.hv-media.is-live video { opacity: 1; }
.hv-media.is-live img { animation: none; }
@keyframes hv-kb { from { transform: scale(1); } to { transform: scale(1.06); } }
.hv-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, hsl(var(--bf-navy-deep) / 0.94) 0%, hsl(var(--bf-navy-deep) / 0.72) 38%, hsl(var(--bf-navy-deep) / 0.15) 66%, transparent 82%),
              linear-gradient(180deg, hsl(var(--bf-navy-deep) / 0.55), transparent 30%, transparent 70%, hsl(var(--bf-navy-deep) / 0.7)); }
.hv-copy { position: relative; z-index: 2; max-width: 600px; padding: 128px 0 150px; }
.hv-copy .bf-eyebrow { color: hsl(var(--bf-gold-soft)); }
.hv-copy .bf-eyebrow::before { background: hsl(var(--bf-gold-soft)); }
body.bf .hv-hero .hv-h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(42px, 6.2vw, 88px); line-height: 0.98; letter-spacing: -0.03em; margin: 14px 0 22px; color: #fff; }
body.bf .hv-hero .hv-h1 em { font-style: italic; color: hsl(var(--bf-gold-soft)); }
body.bf .hv-hero .hv-lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: hsl(0 0% 100% / 0.84); max-width: 50ch; margin: 0 0 30px; }
.hv-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hv-ctas .bf-btn-ghost { color: #fff; border-color: hsl(0 0% 100% / 0.4); }
.hv-ctas .bf-btn-ghost:hover { border-color: hsl(var(--bf-gold-soft)); color: hsl(var(--bf-gold-soft)); }
.hv-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 13.5px; color: hsl(0 0% 100% / 0.7); }
.hv-note svg { width: 14px; height: 14px; color: hsl(var(--bf-gold-soft)); }
body.bf .hv-hero .hv-fallback { display: none; margin-top: 14px; font-size: 14.5px; color: hsl(var(--bf-gold-soft)); max-width: 46ch; }
.hv-fallback.is-visible { display: block; }
.hv-dots { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 3; display: flex; justify-content: center; gap: 10px; }
.hv-dots button { width: 10px; height: 10px; border-radius: 999px; border: 0; padding: 0; background: hsl(0 0% 100% / 0.38); cursor: pointer; transition: width 300ms ease, background 300ms ease; }
.hv-dots button[aria-current="true"] { width: 30px; background: hsl(var(--bf-orange)); }
.hv-dots button:focus-visible { outline: 2px solid hsl(var(--bf-gold-soft)); outline-offset: 3px; }
.hv-arrows { position: absolute; right: 32px; bottom: 26px; z-index: 3; display: flex; gap: 8px; }
.hv-arrows button { width: 40px; height: 40px; border-radius: 999px; border: 1px solid hsl(0 0% 100% / 0.3); background: hsl(var(--bf-navy-deep) / 0.5); color: #fff; cursor: pointer; display: grid; place-items: center; }
.hv-arrows button:hover { border-color: hsl(var(--bf-gold-soft)); }
.hv-arrows svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .hv-hero, .hv-slide:first-child { min-height: 0; }
  .hv-slide { position: absolute; }
  .hv-slide:first-child { position: relative; }
  .hv-slides { min-height: 660px; }
  .hv-media img, .hv-media video { object-position: 64% 40%; }
  .hv-scrim { background: linear-gradient(180deg, hsl(var(--bf-navy-deep) / 0.5) 0%, hsl(var(--bf-navy-deep) / 0.12) 30%, hsl(var(--bf-navy-deep) / 0.86) 62%, hsl(var(--bf-navy-deep) / 0.97) 100%); }
  .hv-slide { align-items: end; }
  .hv-copy { padding: 300px 0 96px; max-width: none; }
  .hv-h1 { font-size: clamp(38px, 11vw, 56px); }
  .hv-arrows { display: none; }
  .hv-dots { bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-slide, .hv-slide.is-on, .hv-slide.is-off { transition: opacity 300ms ease; transform: none; }
  .hv-slide.is-off { opacity: 0; }
  .hv-slide.is-off::after { display: none; }
  .hv-slide.is-on .hv-media img { animation: none; }
}

/* ---------- 2 · PARTNERS strip, right under the hero ---------- */
.hv-partners { background: hsl(var(--bf-cream)); border-bottom: 1px solid hsl(var(--bf-rule)); padding: 30px 0; }
.hv-partners .bf-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 52px; }
.hv-partners .bf-eyebrow { margin: 0; }
.hv-partners a { display: inline-flex; }
.hv-partners img { height: 40px; max-width: 170px; object-fit: contain; width: auto; filter: grayscale(1); opacity: 0.72; transition: opacity .25s, filter .25s; }
.hv-partners a:hover img { filter: none; opacity: 1; }
.hv-partners a.hv-plate { filter: grayscale(1); opacity: 0.78; transition: opacity .25s, filter .25s; }
.hv-partners a.hv-plate:hover { filter: none; opacity: 1; }
.hv-partners .eb-lock { display: inline-flex; flex-direction: column; background: #000; border-radius: 4px; overflow: hidden; width: 150px; }
.hv-partners .eb-lock img { height: auto; width: 100%; max-width: none; filter: none; opacity: 1; padding: 6px 8px 2px; }
.hv-partners .eb-lock span { display: block; background: #ff2027; color: #fff; font: 700 6.5px/1 var(--font-sans); letter-spacing: 0.06em; text-align: center; padding: 5px 0 4px; }

/* ---------- 3 · MEALS COMMITTED: navy plate; the arithmetic scales 0.5 → 1 as the block crosses the viewport
   (the reference site's mechanism: scale 50 → 100 over the first half of the block's on-screen life), driven by
   the engine's --sc-p on the flow act. Without JS, --sc-p is unset and the plate sits at full size. ---------- */
.hv-meals { background: linear-gradient(135deg, hsl(var(--bf-navy)), hsl(var(--bf-navy-deep))); color: #fff; padding: 112px 0 112px; overflow: hidden; text-align: center; }
.hv-meals .bf-eyebrow { color: hsl(var(--bf-gold-soft)); }
body.bf .hv-meals .hv-big { font-family: var(--font-display); font-weight: 400; font-size: clamp(64px, 11.5vw, 184px); letter-spacing: -0.04em; line-height: 0.95; margin: 22px 0 26px; color: #fff;
  transform: scale(calc(0.5 + min(var(--sc-p, 1) * 1.1, 0.5))); transform-origin: 50% 60%; will-change: transform; }
.hv-big u { text-decoration: none; background-image: linear-gradient(120deg, hsl(var(--bf-orange) / 0.7), hsl(var(--bf-gold) / 0.7)); background-repeat: no-repeat; background-size: 100% 0.07em; background-position: 0 94%; }
body.bf .hv-meals p:not(.hv-big) { color: hsl(0 0% 100% / 0.82); max-width: 58ch; margin: 0 auto; font-size: 18px; }
.hm-live { margin: 44px auto 0; padding-top: 36px; border-top: 1px solid hsl(0 0% 100% / 0.16); max-width: 720px; }
.hm-live b { font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 9vw, 140px); letter-spacing: -0.04em; line-height: 1; display: block; font-variant-numeric: tabular-nums; }
.hm-live small { display: block; margin-top: 10px; font-size: 13.5px; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--bf-gold-soft)); }
@media (prefers-reduced-motion: reduce) { .hv-big { transform: none; } }

/* ---------- 4 · HOW: three columns, numeral badge over the photo ---------- */
.hv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 44px; }
.hv-step-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--bf-radius-lg); overflow: hidden; background: hsl(var(--bf-cream)); border: 1px solid hsl(var(--bf-rule)); }
.hv-step-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hv-step-n { position: absolute; left: 16px; top: 16px; width: 58px; height: 58px; border-radius: 50%; background: var(--bf-accent-grad); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-size: 26px; box-shadow: var(--bf-shadow-cta); }
.hv-step h3 { font-size: clamp(24px, 2.2vw, 30px); margin: 20px 0 4px; }
.hv-step-kicker { font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bf-accent); font-weight: 700; }
.hv-step p { margin: 10px 0 0; font-size: 16.5px; color: var(--page-fg-muted); }
#how { --hp: clamp(0, calc(var(--sc-p, 1) * 2.2), 1); }
.hv-step { opacity: var(--hp); will-change: transform, opacity; }
.hv-step:nth-child(1) { transform: translate3d(calc((1 - var(--hp)) * -50vw), 0, 0); }
.hv-step:nth-child(2) { transform: translate3d(0, calc((1 - var(--hp)) * 50vh), 0); }
.hv-step:nth-child(3) { transform: translate3d(calc((1 - var(--hp)) * 50vw), 0, 0); }
@media (max-width: 900px) { .hv-steps { grid-template-columns: 1fr; gap: 28px; } .hv-step:nth-child(1), .hv-step:nth-child(3) { transform: translate3d(0, calc((1 - var(--hp)) * 30vh), 0); } .hv-step:nth-child(2) { transform: translate3d(0, calc((1 - var(--hp)) * 30vh), 0); } }
@media (prefers-reduced-motion: reduce) { .hv-step { transform: none !important; opacity: 1; } }

/* ---------- 5 · GIVE: parallax loop behind the real give panel ---------- */
.hv-give { position: relative; isolation: isolate; overflow: hidden; background: hsl(var(--bf-navy-deep)); color: #fff; padding: 128px 0 136px; }
.hv-give-media { position: absolute; left: 0; right: 0; top: -22%; bottom: -22%; z-index: 0; }
.hv-give-media img, .hv-give-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hv-give-media video { opacity: 0; transition: opacity 700ms ease; }
.hv-give-media.is-live video { opacity: 1; }
.hv-give-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, hsl(var(--bf-navy-deep) / 0.9), hsl(var(--bf-navy-deep) / 0.72) 50%, hsl(var(--bf-navy-deep) / 0.5)); }
.hv-give .bf-container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hv-give .bf-eyebrow { color: hsl(var(--bf-gold-soft)); }
.hv-give .bf-eyebrow::before { background: hsl(var(--bf-gold-soft)); }
body.bf .hv-give h2 { color: #fff; font-size: clamp(34px, 4.2vw, 58px); margin-top: 14px; }
body.bf .hv-give h2 em { font-style: italic; color: hsl(var(--bf-gold-soft)); }
body.bf .hv-give .hv-give-copy p { color: hsl(0 0% 100% / 0.84); font-size: 18px; max-width: 48ch; }
.hv-give .gv-rail { position: static; background: hsl(var(--bf-ivory)); color: var(--page-fg); }
@media (max-width: 900px) { .hv-give { padding: 88px 0 96px; } .hv-give .bf-container { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- 6 · TEAM ---------- */
.hv-team { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: center; margin-top: 8px; }
.hv-people { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hv-person { margin: 0; border-radius: var(--bf-radius-lg); overflow: hidden; background: hsl(var(--bf-cream)); border: 1px solid hsl(var(--bf-rule)); box-shadow: var(--bf-shadow-card); }
.hv-person img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 14%; display: block; }
.hv-person div { padding: 14px 16px 18px; }
.hv-person b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 20px; }
.hv-person small { display: block; margin-top: 2px; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bf-accent); font-weight: 700; }
.hv-team blockquote { margin: 16px 0 18px; font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -0.02em; }
#team { --tp: clamp(0, calc(var(--sc-p, 1) * 2.2), 1); }
.hv-people { opacity: var(--tp); transform: translate3d(calc((1 - var(--tp)) * -40vw), 0, 0); will-change: transform, opacity; }
@media (max-width: 900px) { .hv-team { grid-template-columns: 1fr; gap: 28px; } .hv-people { transform: translate3d(0, calc((1 - var(--tp)) * 24vh), 0); } }
@media (prefers-reduced-motion: reduce) { .hv-people { transform: none !important; opacity: 1; } }

/* ---------- 7 · COLLECTIVE ---------- */
/* ---------- 7 · THE FOUNDERS COLLECTIVE: twelve numbered empty frames (ivory mat, grey bust, serif number). The first EMPTY
   frame is "this one's yours"; a real name from the feed replaces a bust in place with a monogram disc. No photo lives here. ---------- */
.wall { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.wall-slot { position: relative; background: #fff; border: 1px solid hsl(var(--bf-rule)); border-radius: 8px; padding: 10px 10px 12px; box-shadow: var(--bf-shadow-card); text-align: center; }
.wall-slot .mat { display: grid; place-items: center; aspect-ratio: 1; background: hsl(var(--bf-ivory)); border-radius: 4px; color: hsl(var(--bf-rule-strong)); }
.wall-slot .mat svg { width: 58%; height: auto; display: block; }
.wall-slot .wall-n { display: block; font-family: var(--font-display); font-size: 15px; color: var(--page-fg-soft); margin-top: 10px; letter-spacing: 0.06em; }
.wall-slot .wall-n a { color: var(--bf-accent); text-decoration: none; }
.wall-slot.is-you { background: hsl(var(--bf-cream)); border: 1.5px dashed var(--bf-accent); }
.wall-slot.is-you .mat { background: hsl(var(--bf-gold-soft) / 0.25); color: var(--bf-accent); }
.wall-slot.is-you .wall-n { color: var(--bf-accent); font-weight: 600; }
.wall-slot.is-filled .mat { background: var(--bf-accent-grad); color: #fff; font-family: var(--font-display); font-size: clamp(34px, 4vw, 56px); }
.wall-slot.is-filled .wall-name { display: block; font-weight: 600; font-size: 15px; margin-top: 10px; }
.wall-slot.is-filled .wall-meals { display: block; font-size: 13px; color: var(--page-fg-soft); }
.wall-slot.is-filled .wall-n { margin-top: 2px; }
.wall-slot.is-filled .wall-card { display: inline-block; margin-top: 4px; font-size: 13px; color: var(--bf-accent); font-weight: 700; text-decoration: none; }
.wall-slot.is-new { animation: wall-fill 300ms ease-out both; }
@keyframes wall-fill { from { opacity: 0; } to { opacity: 1; } }
.wall-note { margin: 18px 0 0; font-size: 16px; color: var(--page-fg-muted); max-width: 640px; }
.wall-note a { color: var(--bf-accent); font-weight: 700; text-decoration: none; }
@media (max-width: 720px) { .wall { grid-template-columns: repeat(3, 1fr); gap: 10px; } .wall-slot { padding: 6px 6px 8px; } .wall-slot .wall-n { font-size: 12px; } .wall-slot.is-filled .wall-name { font-size: 12.5px; } .wall-slot.is-filled .wall-meals { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .wall-slot.is-new { animation: none; } }

/* ---------- 8 · IMPACT cards ---------- */
.hv-impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }
.hv-card { border-radius: var(--bf-radius-lg); overflow: hidden; background: #fff; border: 1px solid hsl(var(--bf-rule)); box-shadow: var(--bf-shadow-card); }
.hv-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.hv-card div { padding: 22px 24px 26px; }
.hv-card small { font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bf-accent); font-weight: 700; }
.hv-card h3 { margin: 6px 0 8px; font-size: 24px; }
.hv-card p { margin: 0; font-size: 16px; color: var(--page-fg-muted); }
#impact { --ip: clamp(0, calc(var(--sc-p, 1) * 2.2), 1); }
.hv-card { opacity: var(--ip); transform: translate3d(0, calc((1 - var(--ip)) * 40vh), 0); will-change: transform, opacity; }
.hv-card:nth-child(2) { transition-delay: 0s; transform: translate3d(0, calc((1 - var(--ip)) * 55vh), 0); }
@media (max-width: 900px) { .hv-impact { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .hv-card { transform: none !important; opacity: 1; } }

/* ---------- 9 · CLOSE ---------- */
.hm-close { border-top: 1px solid hsl(var(--bf-rule)); padding: 96px 0 88px; }
.hm-close-line { font-family: var(--font-display); font-size: clamp(30px, 4vw, 52px); line-height: 1.15; letter-spacing: -0.02em; max-width: 22ch; margin: 0 0 32px; }
.hm-close-line a { color: var(--bf-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.hm-news { display: grid; grid-template-columns: 1fr auto; gap: 12px; max-width: 520px; }
.hm-news .bf-input { margin: 0; }
.hm-news small { grid-column: 1 / -1; color: var(--page-fg-soft); font-size: 13.5px; }
@media (max-width: 600px) { .hm-news { grid-template-columns: 1fr; } }