/* ---- src/css/00-legacy.css ---- */
/* Austropical US site, v2 (30 Sep 2026).
   Palette: açaí purples from the pack, leaf accents sampled from the logo SVG gradients, cream.
   Every text/background pair used here is at least 4.5:1 (checked in qa); pink #ED2A7D and the pale leaf
   tones carry no small text. */
/* v4: self-hosted variable fonts (SIL OFL 1.1; licences in assets/fonts/). No third-party font requests. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../fonts/bricolage-grotesque-latin-opsz.woff2) format("woff2-variations"), url(../fonts/bricolage-grotesque-latin-opsz.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-display: swap; font-weight: 100 1000; src: url(../fonts/dm-sans-latin-opsz.woff2) format("woff2-variations"), url(../fonts/dm-sans-latin-opsz.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: italic; font-display: swap; font-weight: 100 1000; src: url(../fonts/dm-sans-latin-opsz-italic.woff2) format("woff2-variations"), url(../fonts/dm-sans-latin-opsz-italic.woff2) format("woff2"); }
/* Metric-matched fallbacks (widths measured against Arial / Liberation Sans) so the swap to the web fonts barely moves text. */
@font-face { font-family: "Poppins Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); font-weight: 600 900; size-adjust: 106.5%; ascent-override: 98.6%; descent-override: 32.9%; line-gap-override: 9.4%; }
@font-face { font-family: "DM Sans Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans-Regular"); font-weight: 400 500; size-adjust: 102.6%; ascent-override: 96.6%; descent-override: 30.2%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); font-weight: 600 900; size-adjust: 101.6%; ascent-override: 96.6%; descent-override: 30.2%; line-gap-override: 0%; }
:root {
  --acai: #3A1C65;         /* deep açaí purple */
  --acai-mid: #502F76;
  --acai-bright: #83489A;  /* decorative only (shadows); text never sits on it */
  --glow: #6A3F8C;         /* gradient highlight behind text: sun 5.1:1, cream 7.0:1 */
  --night: #240F42;        /* footer */
  --ink: #1F0B3D;          /* body text */
  --cream: #FBF1E4;
  --paper: #FFF8EE;
  --white: #FFFFFF;
  --leaf: #8AB93F;         /* logo green, light end */
  --leaf-deep: #2D5629;    /* logo green, dark end */
  --sun: #FFCC04;          /* logo yellow */
  --mango: #FAA322;        /* logo orange */
  --flame: #F67B40;
  --pink: #ED2A7D;         /* logo hot pink (decorative) */
  --pink-deep: #CC1A66;    /* pink for blocks that carry white text (5.4:1) */
  --sky: #48ADE2;          /* logo blue, light end */
  --sky-deep: #174992;     /* logo blue, dark end */
  --muted: #4A4260;
  --line: rgba(31, 11, 61, .14);
  --radius: 22px;
  --radius-lg: 32px;
  --gutter: 16px;
  --max: 1232px;
  --font-display: "Poppins", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "DM Sans", "DM Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --focus: var(--ink);
  --tint-a: var(--acai);
  --tint-b: var(--night);
  --header-h: 76px;
}
@media (min-width: 900px) { :root { --gutter: 28px; --header-h: 88px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-weight: 400; font-size: 1.0625rem; line-height: 1.6; overflow-x: hidden; }
img, video, picture { display: block; max-width: 100%; height: auto; }
a { color: var(--acai); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--pink-deep); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.04; margin: 0 0 .5em; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 7vw, 5.2rem); line-height: .98; }
h2 { font-size: clamp(1.9rem, 4.6vw, 3.3rem); }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
h1 em, h2 em { font-style: normal; color: var(--pink-deep); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
strong { font-weight: 700; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible { border-radius: 999px; }

.on-dark { --focus: var(--sun); color: var(--cream); }
.on-dark a:not(.btn) { color: var(--cream); }
.on-dark a:not(.btn):hover { color: var(--sun); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--cream); }
.on-dark h1 em, .on-dark h2 em { color: var(--sun); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap.narrow { max-width: 800px; }
.small { font-size: .9rem; }
.muted { color: var(--muted); }
.on-dark .muted { color: var(--cream); }
.mt { margin-top: 1.5rem; }
.pt-0 { padding-top: 0 !important; }
.page-head + .pt-0, .page-head + .section.pt-0 { padding-top: 3rem !important; }
.rounded, .rounded img { border-radius: var(--radius); }
.full img { width: 100%; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -80px; background: var(--sun); color: var(--ink); font-weight: 700; padding: .6rem .9rem; border-radius: 999px; z-index: 100; }
.skip:focus { top: 8px; }
/* The skip link's target: <main id="main" tabindex="-1"> takes focus so the next Tab starts inside it.
   It is not a control; a ring around the whole page shows only as a stray line above the footer
   (the sticky header and the viewport edges hide the rest). The next control shows the usual ring. */
main[tabindex="-1"]:focus { outline: none; }

/* ---------- Header ---------- */
.site-header { background: var(--acai); position: sticky; top: 0; z-index: 30; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; padding: 6px 0; border-radius: 10px; }
.brand img { width: 94px; height: 59px; }
.leafline { height: 5px; background: linear-gradient(90deg, #8AB93F 0 25%, #FFCC04 25% 50%, #ED2A7D 50% 75%, #48ADE2 75% 100%); }
.nav-toggle { display: inline-flex; align-items: center; gap: .6rem; background: transparent; border: 2px solid var(--cream); border-radius: 999px; padding: .5rem 1rem; color: var(--cream); cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: .95rem; min-height: 44px; }
.nav-toggle-bar { width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { box-shadow: none; background: transparent; position: relative; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before, .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 2px; background: currentColor; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: rotate(-45deg); }
.site-nav { display: none; width: 100%; padding: .25rem 0 1.25rem; }
.site-nav.open { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.site-nav a:not(.btn) { display: block; padding: .6rem .1rem; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--cream); border-bottom: 1px solid rgba(251, 241, 228, .16); }
.site-nav a[aria-current="page"] { color: var(--sun); }
.nav-cta { margin-top: 1rem; }
@media (min-width: 960px) {
  .brand img { width: 102px; height: 64px; }
  .header-row { flex-wrap: nowrap; }
  .nav-toggle { display: none; }
  .site-nav { display: block; width: auto; padding: 0; }
  .site-nav ul { flex-direction: row; align-items: center; gap: 1.6rem; }
  .site-nav a:not(.btn) { padding: .35rem 0; font-size: 1rem; font-weight: 600; border: 0; border-bottom: 3px solid transparent; }
  .site-nav a:not(.btn):hover { color: var(--sun); }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--sun); color: var(--cream); }
  .nav-cta { margin: 0 0 0 .4rem; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; background: var(--acai); color: var(--cream); font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: .005em; padding: .8rem 1.6rem; border-radius: 999px; text-decoration: none; border: 2px solid var(--acai); line-height: 1.15; box-shadow: 0 4px 0 var(--ink); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; text-align: center; }
.btn:hover { color: var(--cream); background: var(--acai-mid); border-color: var(--acai-mid); transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn-outline { background: transparent; color: var(--acai); box-shadow: none; }
.btn-outline:hover { background: var(--acai); color: var(--cream); box-shadow: none; }
.btn-light { background: var(--sun); color: var(--ink); border-color: var(--sun); box-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
.btn-light:hover { background: #FFD83D; border-color: #FFD83D; color: var(--ink); box-shadow: 0 6px 0 rgba(0, 0, 0, .35); }
.btn-outline-light { background: transparent; color: var(--cream); border-color: var(--cream); box-shadow: none; }
.btn-outline-light:hover { background: var(--cream); color: var(--acai); border-color: var(--cream); box-shadow: none; }
.btn-small { min-height: 42px; padding: .55rem 1.15rem; font-size: .92rem; }
.site-nav .btn { box-shadow: none; }
.cta-row { display: flex; flex-wrap: wrap; gap: .85rem 1rem; margin: 1.5rem 0; }
.btn + p { margin-top: 1rem; }
.page-post .page-head h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.02; }
@media (prefers-reduced-motion: reduce) { .btn, .card-flavor a, .post-card a { transition: none; } .btn:hover, .card-flavor a:hover, .post-card a:hover { transform: none; } }

/* ---------- Type helpers ---------- */
.eyebrow { font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acai); margin: 0 0 1rem; display: flex; align-items: center; gap: .55rem; }
.eyebrow::before { content: ""; width: 22px; height: 12px; flex: none; border-radius: 12px 2px 12px 2px; background: linear-gradient(90deg, var(--leaf), var(--sun) 40%, var(--pink) 75%, var(--sky)); }
.on-dark .eyebrow, .eyebrow-light { color: var(--sun); }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; max-width: 58ch; }
.lede-sm { font-size: 1.1rem; max-width: 70ch; }
.display { font-size: clamp(2.8rem, 8.4vw, 6.2rem); line-height: .95; letter-spacing: -.03em; }
.hl { color: var(--sun); display: inline; }
.disclosure { display: block; font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; margin-top: .7rem; line-height: 1.3; }
.caption { margin: .9rem 0 0; }
.crumbs { font-size: .9rem; margin-bottom: 1.4rem; }
.crumbs a { color: inherit; }
.section-head { max-width: 860px; margin-bottom: 2rem; }

/* ---------- Sections ---------- */
.section { padding: 3.75rem 0; }
.section-alt { background: var(--paper); }
.section-cream-deep { background: var(--pink-deep); color: var(--white); --focus: var(--sun); }
.section-cream-deep h2 { color: var(--white); }
.section-cream-deep a:not(.btn) { color: var(--white); }
.section-cream-deep .muted { color: var(--white); }
.section-cream-deep .btn { background: var(--white); color: var(--acai); border-color: var(--white); box-shadow: 0 4px 0 rgba(0, 0, 0, .3); }
.section-cream-deep .btn:hover { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.section-cream-deep .btn-outline { background: transparent; color: var(--white); border-color: var(--white); box-shadow: none; }
.section-cream-deep .btn-outline:hover { background: var(--white); color: var(--acai); }
.page-head { background: radial-gradient(1000px 520px at 88% 0%, var(--acai-mid), transparent 70%), var(--acai); padding: 2.25rem 0 3rem; position: relative; overflow: hidden; }
.page-head .lede { color: var(--cream); }
.page-head-purple { background: radial-gradient(1000px 520px at 88% 0%, var(--glow), transparent 70%), var(--acai); }
.page-head .wrap { position: relative; }
@media (min-width: 900px) {
  .section { padding: 6rem 0; }
  .page-head { padding: 3.75rem 0 4.5rem; }
  .page-head + .pt-0, .page-head + .section.pt-0 { padding-top: 4.5rem !important; }
}

/* ---------- Home hero ---------- */
.hero { background: radial-gradient(1100px 620px at 92% 8%, var(--glow), transparent 62%), radial-gradient(700px 500px at 0% 100%, var(--acai-mid), transparent 70%), var(--acai); padding: 2.5rem 0 3.5rem; overflow: hidden; }
.hero .lede { color: var(--cream); }
.hero .caption { color: var(--cream); }
@media (min-width: 900px) {
  .hero { padding: 4.5rem 0 5.5rem; }
}

/* Stickers */

/* ---------- Marquee ---------- */
.marquee { position: relative; background: var(--sun); color: var(--acai); overflow: hidden; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.marquee-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--acai); background: var(--sun); color: var(--acai); cursor: pointer; display: grid; place-items: center; padding: 0; box-shadow: -14px 0 14px var(--sun); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-toggle { display: none; }
}

/* ---------- Split layouts, columns ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; align-items: center; }
.split-media .v360 { box-shadow: 10px 10px 0 var(--sun); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.cols-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; list-style: none; padding: 0; }
.wrap.cols-3 { padding-left: var(--gutter); padding-right: var(--gutter); }
@media (min-width: 640px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } }
.cols-3 h3 { font-size: 1.3rem; }
.cta-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.cta-band h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.cta-band .btn { margin: .25rem .5rem .25rem 0; }
@media (min-width: 760px) { .cta-band { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* ---------- Flavor cards ---------- */
.grid-press { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .grid-press { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } }
@media (min-width: 1024px) { .grid-press { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.card-flavor a { display: flex; flex-direction: column; height: 100%; background: linear-gradient(165deg, var(--tint-a), var(--tint-b)); color: var(--cream); border-radius: var(--radius); padding: .55rem .55rem 1.1rem; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; --focus: var(--ink); }
.card-flavor a:hover { color: var(--cream); transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 10px 0 var(--ink); }
.card-media { display: block; }
.card-flavor img { width: 100%; border-radius: 16px; }
.card-name { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.15; letter-spacing: -.01em; margin: .85rem .35rem .35rem; }
.card-line { display: block; font-size: .88rem; line-height: 1.4; margin: 0 .35rem; color: var(--cream); }
@media (min-width: 640px) { .card-name { font-size: 1.15rem; } }
.tag { display: inline-block; font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .01em; padding: .3rem .65rem; border-radius: 999px; background: var(--cream); color: var(--acai); line-height: 1.25; }

/* ---------- Formats ---------- */
.bucket-row { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.bucket-row img { width: 100%; border-radius: var(--radius); background: var(--white); }

/* ---------- Video box ---------- */
.v360 { position: relative; width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--night); }
.v360 picture, .v360 img { width: 100%; height: 100%; }
.v360 img { object-fit: cover; }
.v360 video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.v360.playing video { opacity: 1; }
.v360-btn { position: absolute; right: 12px; bottom: 12px; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--sun); color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; padding: 0; cursor: pointer; box-shadow: 0 3px 0 var(--ink); --focus: var(--sun); }
.v360-btn:hover { background: #FFD83D; }
.v360-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 8px var(--ink); border-radius: 50%; }
.marquee-toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 50%; }
.v360-ico { width: 0; height: 0; border-left: 13px solid var(--ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.v360.playing .v360-ico { width: 13px; height: 15px; border: 0; border-left: 4px solid var(--ink); border-right: 4px solid var(--ink); margin-left: 0; }
.v360-play, .v360-pause { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v360-pause { display: none; }
.v360.playing .v360-play { display: none; }
.v360.playing .v360-pause { display: block; }

/* ---------- Product hero ---------- */
.gallery-main { position: relative; }
.gallery-main .v360, .gallery-main .spin, .gallery-image { border-radius: var(--radius-lg); border: 4px solid var(--cream); box-shadow: 12px 12px 0 rgba(0, 0, 0, .28); }
.gallery-image { background: var(--white); overflow: hidden; }
.gallery-image img { width: 100%; }
.thumb { display: flex; flex-direction: column; align-items: center; gap: .3rem; background: rgba(0, 0, 0, .22); border: 2px solid transparent; border-radius: 16px; padding: .4rem; color: var(--cream); cursor: pointer; font-family: var(--font-display); font-size: .75rem; font-weight: 700; letter-spacing: .03em; min-width: 76px; }
.thumb img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--white); }
.thumb:hover { border-color: rgba(251, 241, 228, .6); }
.thumb.is-active, .thumb[aria-pressed="true"] { border-color: var(--sun); background: rgba(0, 0, 0, .35); }

/* ---------- Detail cards ---------- */
.split > *, .cols-3 > *, .cta-band > *, .footer-grid > * { min-width: 0; }
.page-flavor .section > .wrap > h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); max-width: 28ch; }
.check-list, .plain-list { padding-left: 1.1em; }
.plain-list { list-style: none; padding: 0; }
.plain-list li { padding: .45rem 0; border-bottom: 2px solid var(--line); }
.check-list { list-style: none; padding: 0; }
.check-list li { position: relative; padding: .45rem 0 .45rem 1.9rem; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .8rem; width: 18px; height: 11px; border-radius: 11px 2px 11px 2px; background: linear-gradient(90deg, var(--leaf), var(--sun) 50%, var(--pink)); }
.ingredient-statement { font-size: 1.05rem; line-height: 1.6; }
.nutrition th, .nutrition td { padding: .45rem 0; border-bottom: 1px solid rgba(31, 11, 61, .3); font-size: .98rem; text-align: left; }
.nutrition th { font-weight: 700; }
.nutrition td { text-align: right; font-variant-numeric: tabular-nums; }
.nutrition tr:first-child th, .nutrition tr:first-child td { font-weight: 800; font-size: 1.15rem; border-bottom-width: 4px; border-bottom-color: var(--ink); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.25rem 0; border-radius: 16px; border: 2px solid var(--ink); background: var(--white); }
.data th, .data td { padding: .7rem .85rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: .95rem; }
.data thead th { font-family: var(--font-display); font-weight: 700; background: var(--acai); color: var(--cream); white-space: nowrap; }
.data tbody th { font-weight: 700; }
.data tbody tr:nth-child(even) { background: var(--paper); }
.data-tight th, .data-tight td { white-space: nowrap; font-size: .88rem; }
.data-tight td { font-variant-numeric: tabular-nums; }
.data-tight .small { white-space: normal; display: block; }

/* ---------- Steps, toppings ---------- */
.steps { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps li { background: var(--white); border-radius: var(--radius); padding: 1.5rem; position: relative; border: 2px solid var(--ink); }
.split .steps { grid-template-columns: minmax(0, 1fr); }
.steps h3 { margin-bottom: .35rem; font-size: 1.4rem; }
.steps p { margin: 0; color: var(--ink); }

/* ---------- Carousel ---------- */

/* ---------- FAQ ---------- */
.faq details { background: var(--white); border-radius: 18px; padding: .25rem 1.3rem; margin-bottom: .8rem; border: 2px solid var(--ink); }
.faq summary { cursor: pointer; padding: .95rem 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--pink-deep); flex: none; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq summary h3 { margin: 0; font-size: 1.15rem; }
.faq details p { padding-bottom: 1rem; margin: 0; }

/* ---------- Blog, press ---------- */
.post-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .post-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card a, .grid-press li { display: block; height: 100%; background: var(--white); border-radius: var(--radius); padding: .6rem .6rem 1.1rem; text-decoration: none; color: var(--ink); border: 2px solid var(--ink); transition: transform .18s ease, box-shadow .18s ease; }
.post-card a:hover { color: var(--ink); transform: translateY(-4px); box-shadow: 0 8px 0 var(--ink); }
.post-card img, .grid-press img { width: 100%; }
.grid-press img { border-radius: 14px; }
.grid-press .card-name { color: var(--ink); }
.grid-press .card-line { color: var(--muted); }
.post-card .card-name, .post-card .card-line { color: var(--ink); }
.post-meta { display: block; margin: .8rem .35rem 0; color: var(--muted); }
.prose { font-size: 1.1rem; }
.prose h2 { margin-top: 2.25rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.prose h3 { margin-top: 1.5rem; }
.prose img { border-radius: var(--radius); }
.prose blockquote { border-left: 6px solid var(--pink-deep); margin: 1.5rem 0; padding: .25rem 0 .25rem 1.2rem; color: var(--muted); }
.prose code { background: var(--white); padding: .1em .35em; border-radius: 4px; font-size: .9em; }

/* ---------- Prev / next ---------- */

/* ---------- About: the US story ---------- */

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: var(--cream); padding: 0 0 2.25rem; }
.site-footer::before { content: ""; display: block; height: 8px; background: linear-gradient(90deg, #8AB93F 0 25%, #FFCC04 25% 50%, #ED2A7D 50% 75%, #48ADE2 75% 100%); }
.footer-logo img { width: 124px; height: 78px; }
@media (min-width: 900px) { .footer-logo img { width: 140px; height: 88px; } }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; } }
.footer-h { font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .9rem; color: var(--sun); }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { padding: .25rem 0; font-size: .98rem; }
.footer-list a, .footer-line a { text-decoration-thickness: 1px; }
.footer-line { font-size: .98rem; margin: 0 0 .8rem; }
.footer-legal { margin-top: 2.5rem; color: var(--cream); opacity: .85; }

/* =====================================================================================================
   v3 (30 Sep 2026): real photography in leaf frames, a leaf pattern on the colour bands, the flavour
   filter, serving-suggestion cards, the link band and the drag-to-turn 360 viewer.
   Photos: licensed Adobe Stock (free collection, standard license, not AI). No text ever sits on a photo.
   ===================================================================================================== */
:root {
  --leaves-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23FBF1E4' fill-opacity='.07'%3E%3Cpath d='M14 46c20-18 50-18 70 0-20 18-50 18-70 0z' transform='rotate(-24 49 46)'/%3E%3Cpath d='M96 128c20-18 50-18 70 0-20 18-50 18-70 0z' transform='rotate(30 131 128)'/%3E%3Cpath d='M108 30c13-12 33-12 46 0-13 12-33 12-46 0z' transform='rotate(58 131 30)'/%3E%3Cpath d='M22 142c13-12 33-12 46 0-13 12-33 12-46 0z' transform='rotate(-60 45 142)'/%3E%3C/g%3E%3C/svg%3E");
  --leaves-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%231F0B3D' fill-opacity='.07'%3E%3Cpath d='M14 46c20-18 50-18 70 0-20 18-50 18-70 0z' transform='rotate(-24 49 46)'/%3E%3Cpath d='M96 128c20-18 50-18 70 0-20 18-50 18-70 0z' transform='rotate(30 131 128)'/%3E%3Cpath d='M108 30c13-12 33-12 46 0-13 12-33 12-46 0z' transform='rotate(58 131 30)'/%3E%3Cpath d='M22 142c13-12 33-12 46 0-13 12-33 12-46 0z' transform='rotate(-60 45 142)'/%3E%3C/g%3E%3C/svg%3E");
  --leaf-r: 46% 9% 46% 9% / 46% 9% 46% 9%;
  --leaf-r-flip: 9% 46% 9% 46% / 9% 46% 9% 46%;
}

/* Pattern bands: the pattern layer sits over each band's own background. */
.section-night { background: var(--leaves-light), var(--night); }

/* The hero's lower edge: a soft wave in ink, which meets the ink rule on top of the marquee. */

/* ---------- Leaf frames ---------- */
.leaf { position: relative; margin: 0; --ring: var(--pink); }
.on-dark .leaf { --ring: var(--sun); }
.photo-tag { position: absolute; left: 10%; bottom: 8%; z-index: 2; background: var(--cream); color: var(--acai); font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .02em; padding: .3rem .75rem; border-radius: 999px; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }

/* ---------- Home hero, v3 ---------- */

/* ---------- Flavour filter (radio buttons + :has(); works without JavaScript) ---------- */
.flavor-filter { border: 0; padding: 0; margin: 0 0 .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; min-width: 0; }
.ff-label { font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acai); margin-right: .35rem; }
.ff-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ff-radio + label { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.15rem; border-radius: 999px; border: 2px solid var(--acai); background: var(--white); color: var(--acai); font-family: var(--font-display); font-weight: 700; font-size: .95rem; cursor: pointer; transition: background .15s ease, color .15s ease; }
.ff-radio + label:hover { background: var(--cream); }
.ff-radio:checked + label { background: var(--acai); color: var(--cream); box-shadow: 0 3px 0 var(--ink); }
.ff-radio:focus-visible + label { outline: 3px solid var(--ink); outline-offset: 3px; }
.ff-count { min-height: 1.4em; margin: 0 0 .4rem; color: var(--muted); }
.flavor-filter-wrap:has(#ff-acai:checked) .card-flavor:not([data-kind="acai"]),
.flavor-filter-wrap:has(#ff-fruit:checked) .card-flavor:not([data-kind="fruit"]),
.flavor-filter-wrap:has(#ff-organic:checked) .card-flavor:not([data-organic="yes"]) { display: none; }

/* ---------- Story collage ---------- */

/* ---------- Serving-suggestion photo cards ---------- */

/* ---------- Photo duo (foodservice) and photo band (about) ---------- */
.range-still { margin: 2rem 0 2.5rem; }

/* ---------- Flavour page: what's in it ---------- */

/* ---------- Link band ---------- */

/* ---------- 360 viewer: drag, swipe or arrow keys to turn; pinch, double-tap, ctrl + wheel or the buttons to zoom ---------- */
.spin-wrap { position: relative; }
.spin { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background-color: var(--night); cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.spin-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; }
.spin-layer picture, .spin-layer img { width: 100%; height: 100%; max-width: none; }
.spin-layer img { object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.spin.is-sprite .spin-layer > picture { visibility: hidden; }
.spin-hi { position: absolute; left: 0; top: 0; visibility: hidden; }
.spin-hi.on { visibility: visible; }
.spin.dragging { cursor: grabbing; }
.spin-wrap.is-zoomed .spin { cursor: move; }
.spin:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; }
.spin-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .55rem; background: rgba(31, 11, 61, .82); color: var(--cream); font-family: var(--font-display); font-weight: 700; font-size: .85rem; padding: .5rem 1rem; border-radius: 999px; pointer-events: none; white-space: nowrap; transition: opacity .35s ease; }
.spin-hint-ico { position: relative; width: 26px; height: 10px; flex: none; }
.spin-hint-ico::before, .spin-hint-ico::after { content: ""; position: absolute; top: 1px; width: 8px; height: 8px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; }
.spin-hint-ico::before { left: 1px; transform: rotate(-45deg); }
.spin-hint-ico::after { right: 1px; transform: rotate(135deg); }
.hint-coarse { display: none; }
@media (hover: none) and (pointer: coarse) { .hint-fine { display: none; } .hint-coarse { display: inline; } }
.spin-wrap.touched .spin-hint, .spin-wrap.is-zoomed .spin-hint { opacity: 0; }
.spin-prev { left: 14px; }
.spin-next { right: 14px; }
.spin-wrap:not(.is-ready) .spin-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .spin-hint { transition: none; } }
.gallery-main .spin { width: 100%; }

/* ---------- Studio: one big 360 viewer and a flavor picker (home and flavors pages) ---------- */
.studio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 1.75rem; }
@media (min-width: 900px) { .studio { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; } }
.studio .spin { border-radius: var(--radius-lg); border: 4px solid var(--cream); box-shadow: 12px 12px 0 rgba(0, 0, 0, .28); }
.studio-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.55rem, 3vw, 2.3rem); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 .4rem; color: var(--cream); }
.studio-line { margin: 0 0 .35rem; }
.studio-zs { margin: 0 0 .35rem; font-weight: 700; color: var(--sun); }
.studio-link { font-weight: 700; }
.studio-link::after { content: "\00a0\2192"; }
.picks { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.pick { width: 100%; height: 100%; display: flex; align-items: center; gap: .65rem; padding: .35rem .7rem .35rem .35rem; background: rgba(0, 0, 0, .24); border: 2px solid transparent; border-radius: 16px; color: var(--cream); font-family: var(--font-display); font-weight: 700; font-size: .9rem; line-height: 1.15; text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.pick picture { flex: none; }
.pick img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; }
.pick:hover { border-color: rgba(251, 241, 228, .55); }
.pick[aria-pressed="true"] { border-color: var(--sun); background: rgba(0, 0, 0, .4); }
.pick:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 16px; }
@media (prefers-reduced-motion: reduce) { .pick { transition: none; } }

/* =====================================================================================================
   v4 "Colour Field" (1 Oct 2026)
   Ten flavours, ten colours. Each flavour owns the field colour of its colour-field still: build.py samples it
   from the render's left edge and checks the text tone on it at 4.5:1, so heroes and tiles paint their
   background in it and fade the picture in without a seam. Display type: Bricolage Grotesque. Calmer
   surfaces: the leaf textures are retired; flat colour, more air, crisp photography.
   ===================================================================================================== */
:root {
  --font-display: "Bricolage Grotesque", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
h1, h2, h3, h4 { letter-spacing: -.035em; }
h1 { font-size: clamp(2.7rem, 7vw, 6rem); line-height: .94; }
h2 { font-size: clamp(2.05rem, 4.6vw, 3.6rem); line-height: .98; }
h3 { letter-spacing: -.02em; }
.eyebrow { letter-spacing: .2em; font-size: .76rem; }
.eyebrow::before { width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.hl-ink { color: var(--pink-deep); }

/* retire the leaf textures: flat colour, same colours */
.section-night { background-image: none !important; }
.section { padding: clamp(4rem, 8vw, 7.5rem) 0; }
.section-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.marquee { border-top: 0; border-bottom: 0; }

/* header: frosted night glass */
.site-header { background: rgba(31, 11, 61, .88); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); }
.leafline { height: 3px; }

/* buttons: clean pills, soft lift */
.btn { box-shadow: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s ease, color .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(31, 11, 61, .55); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-light, .section-cream-deep .btn { box-shadow: none; }
.btn-light:hover { box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .5); }
.btn-ink, .btn-ink:hover { background: var(--ffg, var(--ink)); color: var(--fbg, var(--cream)); border-color: var(--ffg, var(--ink)); }
.btn-ghost { background: transparent; color: var(--ffg, var(--ink)); border-color: var(--ffg, var(--ink)); }
.btn-ghost:hover { background: var(--ffg, var(--ink)); color: var(--fbg, var(--cream)); border-color: var(--ffg, var(--ink)); }
.ff-radio:checked + label { box-shadow: none; }

/* ---- the field hero (home, every flavour page) ---- */
.hero-field { position: relative; background: var(--fbg); color: var(--ffg); overflow: hidden; isolation: isolate; --focus: var(--ffg); }
.hero-field h1, .hero-field .lede, .hero-field p, .hero-field .eyebrow, .hero-field .crumbs, .hero-field a:not(.btn) { color: var(--ffg); }
.hero-field a:not(.btn):hover { color: var(--ffg); text-decoration-thickness: 3px; }
.hero-field .hl { color: inherit; }
.page-home .hero-field .hl { color: var(--sun); }
.hero-field .lede { max-width: 32rem; font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.hero-field .hf-wrap { position: relative; z-index: 1; display: grid; align-items: center; padding-top: clamp(1.5rem, 4vw, 3.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero-field .hf-copy { max-width: 36rem; }
.hero-field .cta-row { margin-top: 1.75rem; }
.hf-note { margin: 1.4rem 0 0; max-width: 30rem; }
.hf-media img { width: 100%; height: auto; }
.fhero h1 { font-size: clamp(2.5rem, 5vw, 4.6rem); line-height: .96; }
.fhero .disclosure { font-size: 1.05rem; letter-spacing: 0; }
/* No masks anywhere: the stills arrive with their field already extended (left for desktop, down for phones) and
   ending exactly in the section colour, so the pack is never faded or cropped. */
/* Phones (<640) and tablets (640-959): picture full-bleed above the copy ('tall' / 'mid' crops, whose free edges are
   the section colour). From 960: the 'wide' crop stands at the right at the hero's full height, the copy beside it
   on the extended field; the hero's height is also capped by the width so the pack never slides under the copy. */
@media (max-width: 959px) {
  .hero-field .hf-wrap { padding-top: .5rem; }
}
@media (min-width: 960px) {
  .hero-field .hf-wrap { min-height: min(88svh, 860px, 64vw); }
  .hf-media { position: absolute; top: 0; right: 0; bottom: 0; height: 100%; z-index: 0; }
  .hf-media picture { height: 100%; }
  .hf-media img { height: 100%; width: auto; max-width: none; }
  .hero-field .hf-copy { max-width: min(36rem, 40vw); }
}
@media (min-width: 960px) and (max-width: 1099px) {
  .hero-field .hf-copy { max-width: 38vw; }
}
@keyframes v4-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes v4-settle { from { transform: scale(1.035); } to { transform: none; } }
html.js .hf-copy > * { animation: v4-rise .9s var(--ease) both; }
html.js .hf-copy > :nth-child(2) { animation-delay: .06s; }
html.js .hf-copy > :nth-child(3) { animation-delay: .12s; }
html.js .hf-copy > :nth-child(4) { animation-delay: .18s; }
html.js .hf-copy > :nth-child(5) { animation-delay: .24s; }
html.js .hf-copy > :nth-child(6) { animation-delay: .3s; }
html.js .hf-media img { animation: v4-settle 1.6s var(--ease) both; }

/* ---- colour tiles: the range ---- */
.card-field a { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--fbg); color: var(--ffg); border-radius: 22px; padding: 0; overflow: hidden; text-decoration: none; box-shadow: none; transition: transform .5s var(--ease), box-shadow .5s var(--ease); --focus: var(--ink); }
.card-field a:hover { color: var(--ffg); transform: translateY(-6px); box-shadow: 0 24px 40px -20px rgba(31, 11, 61, .6); }
.card-field .card-media { display: block; overflow: hidden; }
.card-field .card-media img { width: 100%; height: auto; border-radius: 0; transition: transform .9s var(--ease); transform-origin: 50% 40%; }
.card-field a:hover .card-media img { transform: scale(1.05); }
.card-field .card-text { position: relative; display: flex; flex-direction: column; flex: 1; gap: .35rem; padding: .25rem 16px 18px; }
.card-field .card-name { margin: 0; font-size: clamp(1.02rem, 1.25vw, 1.18rem); line-height: 1.06; letter-spacing: -.02em; color: var(--ffg); }
.card-field .card-line { margin: 0; font-size: .86rem; color: var(--ffg); }
/* reveal = a short lift only; nothing is ever hidden, so a missed observer can't leave a blank tile */
html.js [data-reveal] { transform: translateY(26px); transition: transform 1s var(--ease); }
html.js [data-reveal].is-in { transform: none; }

/* ---- flavour page: up close ---- */

@media (prefers-reduced-motion: reduce) {
  html.js .hf-copy > *, html.js .hf-media img { animation: none; }
  html.js [data-reveal] { transform: none; transition: none; }
  .card-field a, .card-field .card-media img, .btn { transition: none; }
}

/* v4: calmer photo frames. The leaf silhouettes and offset colour rings gave way to soft rounded rectangles. */
/* v4: the foodservice menu and the where-to-buy pair use the colour tiles too */

/* v4: the remaining v3 "sticker" surfaces (thick ink borders, hard offset shadows) become calm cards:
   hairline border, soft shadow, same radius family. */
.steps li, .faq details, .post-card a, .grid-press li, .table-wrap { border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(31, 11, 61, .04), 0 18px 36px -28px rgba(31, 11, 61, .45); }
.post-card a:hover { box-shadow: 0 24px 40px -24px rgba(31, 11, 61, .55); }
.gallery-main .v360, .gallery-main .spin, .gallery-image, .studio .spin { border: 0; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .55); }
.v360-btn { border-width: 0; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45); }

/* v4: the view thumbnails sit on the light "Up close" section: white chips, ink labels, ink ring when chosen */
.table-wrap:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* v4: certification tags on a colour field: hairline pills in the field's text colour, level and flat */
.card-field .tag, .hero-field .tag { background: transparent; color: var(--ffg); border: 1.5px solid currentColor; box-shadow: none; font-weight: 600; letter-spacing: .01em; }
.card-field .tag { font-size: .7rem; padding: .2rem .55rem; }

/* v4: blog. Each post wears its flavour's colour field (or the launch pair): a field hero on the post, a tile on the index. */
.post-hero h1 { font-size: clamp(2.1rem, 3.6vw, 3.4rem); line-height: 1.02; }
.post-hero .crumbs { font-size: .85rem; }
@media (min-width: 960px) { .post-hero .hf-wrap { min-height: min(76svh, 700px, 58vw); } }
.post-body { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.grid-posts-v4 { gap: 14px; }
.grid-posts-v4 .post-card.card-field a { background: var(--fbg); color: var(--ffg); border: 0; padding: 0; border-radius: 22px; box-shadow: none; }
.grid-posts-v4 .post-card.card-field a:hover { color: var(--ffg); transform: translateY(-6px); box-shadow: 0 24px 40px -20px rgba(31, 11, 61, .6); }
.grid-posts-v4 .post-card .card-name, .grid-posts-v4 .post-card .card-line { color: var(--ffg); }
.grid-posts-v4 .card-text { padding: .5rem 18px 20px; }
.grid-posts-v4 .card-name { font-size: clamp(1.1rem, 1.45vw, 1.32rem); }
.grid-posts-v4 .post-meta { margin: 0 0 .1rem; color: var(--ffg); font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
/* v4: About, the range as a strip of the ten colour fields */
.range-strip { list-style: none; padding: 0; margin: 1.75rem 0 2.25rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(6px, 1.1vw, 14px); }
.range-strip a { display: block; border-radius: clamp(10px, 1.6vw, 20px); overflow: hidden; background: var(--fbg); }
.range-strip img { display: block; width: 100%; height: auto; transition: transform .9s var(--ease); }
.range-strip a:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .range-strip img { transition: none; } }
.press-pair { margin: 1.5rem 0 .6rem; border-radius: 26px; overflow: hidden; background: var(--fbg, #1C7D7E); }
.press-pair img { display: block; width: 100%; height: auto; }
/* v4: the formats table becomes stacked cards on phones (labels from data-label; roles keep the table semantics) */
@media (max-width: 639px) {
  .data-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .data-stack, .data-stack tbody, .data-stack tr, .data-stack th, .data-stack td { display: block; width: 100%; }
  .data-stack tbody tr { padding: 1rem 1.05rem .8rem; border-bottom: 1px solid var(--line); }
  .data-stack tbody tr:last-child { border-bottom: 0; }
  .data-stack tbody th { padding: 0 0 .55rem; border: 0; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.25; }
  .data-stack td { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: .8rem; padding: .3rem 0; border: 0; font-size: .95rem; }
  .data-stack td::before { content: attr(data-label); font-family: var(--font-display); font-weight: 700; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); padding-top: .2rem; }
}
/* v4: the three formats as calm white cards (the logo-colour frames retired) */
/* v4: the last hard offset shadows (video cards in split sections) become soft lifts */
.split-media .v360 { border: 0; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .55); }

/* ---------- v5 (1 Oct 2026): finishing touches ---------- */
/* Running text avoids one-word last lines; selection in the logo yellow */
p, li, dd, figcaption, .lede, .card-line { text-wrap: pretty; }
::selection { background: var(--sun); color: var(--ink); }
/* ...but never over a photo, film or drawing (6 Oct 2026). Engines paint the selection colour over a selected
   image, and iOS Safari selects one at a long press or a resting finger and keeps it, so photos looked washed out
   yellow. Media cannot be selected, and anything that is selected anyway is not tinted. Text keeps the yellow. */
img, picture, video, svg, canvas, model-viewer, iframe { -webkit-user-select: none; user-select: none; }
img::selection, video::selection, svg::selection, canvas::selection, iframe::selection { background: transparent; }

/* Inner-page heads carry a picture beside the copy: the ten colour fields, the launch pair, or a photo */
.page-head-media { position: relative; margin: 2.25rem 0 0; }
@media (min-width: 960px) {
  .page-head-split .wrap { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .88fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
  .page-head-split .page-head-media { margin: 0; }
}
.ph-mosaic { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(6px, .8vw, 10px); }
.ph-mosaic li { margin: 0; aspect-ratio: 1 / 1; border-radius: clamp(10px, 1.1vw, 16px); overflow: hidden; background: var(--fbg); box-shadow: 0 16px 28px -20px rgba(0, 0, 0, .7); }
.ph-mosaic picture, .ph-mosaic img { display: block; width: 100%; height: 100%; }
.ph-mosaic img { object-fit: cover; object-position: 50% 0; }

/* Home, "From the Amazon": both small photos overlap the river, staggered, never cut off */
.photo-tag { white-space: nowrap; }

/* Flavour pages: previous and next wear their own colour field and pack */

/* v5: forms (waitlist, spec sheets and samples, contact) */
.form { display: grid; gap: 1.1rem; max-width: 760px; margin-top: 1.25rem; }
.form-row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field label, .field .label { display: block; font-family: var(--font-display); font-weight: 700; font-size: .98rem; margin-bottom: .4rem; }
.field .hint { display: inline; font-weight: 400; font-family: var(--font-body); color: var(--muted); font-size: .9rem; margin-left: .35rem; }
.field input, .field select, .field textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-radius: 14px; padding: .75rem 1rem; min-height: 48px; }
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.field input::placeholder, .field textarea::placeholder { color: #6E6683; }
.checks { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.checks label { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-family: var(--font-body); margin: 0; }
.checks input { width: 1.25rem; height: 1.25rem; min-height: 0; accent-color: var(--acai); margin: 0; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem; }
.form-status { font-weight: 700; margin: 0; min-height: 1.4em; }
.form-status.ok { color: var(--leaf-deep); }
.form-status.err { color: var(--pink-deep); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-card { background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); padding: 1.5rem; box-shadow: 10px 10px 0 var(--sun); }
@media (min-width: 760px) { .form-card { padding: 2rem; } }
.section-alt .form-card { box-shadow: 10px 10px 0 var(--leaf); }
.contact-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .9rem; }
.contact-list li strong { display: block; font-family: var(--font-display); }
.data a.sheet { text-decoration: underline; text-decoration-color: rgba(31, 11, 61, .35); text-underline-offset: 3px; }
.data a.sheet:hover { text-decoration-color: var(--acai); }
.logo-row { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (min-width: 760px) { .logo-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.logo-row li { border: 2px solid var(--ink); border-radius: 16px; padding: 1rem; background: var(--white); text-align: center; }
.logo-row li.dark { background: var(--night); border-color: var(--night); }
.logo-row li.dark p, .logo-row li.dark a { color: var(--cream); }
.logo-row img { width: 100%; height: 96px; object-fit: contain; }
.logo-row p { margin: .6rem 0 0; font-size: .9rem; }

/* v6a: Work with us hub */
.hub-paths { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .hub-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .hub-paths { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .hub-paths { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.hub-path { display: flex; flex-direction: column; gap: .4rem; height: 100%; box-sizing: border-box; padding: 1.25rem 1.25rem 1.35rem; background: var(--white); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.hub-path:hover, .hub-path:focus-visible { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--acai); color: var(--ink); }
.hub-path[aria-current="true"] { background: var(--sun); box-shadow: 6px 6px 0 var(--acai); }
.hub-path strong { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; line-height: 1.1; }
.hub-path span { font-size: .95rem; color: var(--muted); }
.hub-ico { display: block; width: 34px; height: 20px; border-radius: 20px 3px 20px 3px; background: linear-gradient(90deg, var(--leaf), var(--sun) 50%, var(--pink)); margin-bottom: .35rem; }
.hub-path:nth-child(2) .hub-ico { background: linear-gradient(90deg, var(--pink), var(--mango)); }
.hub-path:nth-child(3) .hub-ico { background: linear-gradient(90deg, var(--acai), var(--pink)); }
.hub-path:nth-child(4) .hub-ico { background: linear-gradient(90deg, var(--mango), var(--leaf)); }
.hub-path:nth-child(5) .hub-ico { background: linear-gradient(90deg, var(--sky), var(--acai)); }
.js .hub-panel:not(.is-open) { display: none; }
.hub-panel .eyebrow { margin-bottom: .2rem; }
.hub-panel .split { align-items: start; }
.hub-panel h2[tabindex]:focus:not(:focus-visible) { outline: none; }
.hub-back { display: inline-block; margin-top: 1.25rem; font-weight: 700; }
.hub-back::before { content: "\2190\00a0"; }
.hub-get { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .75rem; }
.hub-get li { position: relative; padding: .2rem 0 .2rem 1.9rem; }
.hub-get li::before { content: ""; position: absolute; left: 0; top: .65rem; width: 18px; height: 11px; border-radius: 11px 2px 11px 2px; background: linear-gradient(90deg, var(--leaf), var(--sun) 50%, var(--pink)); }
.hub-get strong { font-family: var(--font-display); }
.hub-facts { margin: 1.25rem 0 0; padding: 1rem 1.25rem; background: var(--paper); border-radius: 16px; border: 2px solid var(--line); font-size: .95rem; }
.hub-facts dt { font-weight: 700; margin-top: .6rem; }
.hub-facts dt:first-child { margin-top: 0; }
.hub-facts dd { margin: .1rem 0 0; }
.radios { display: grid; gap: .5rem; }
.radios label { display: flex; align-items: flex-start; gap: .6rem; font-weight: 600; font-family: var(--font-body); margin: 0; }
.radios input { width: 1.25rem; height: 1.25rem; min-height: 0; accent-color: var(--acai); margin: .15rem 0 0; flex: none; }

/* v6b: the scroll-driven pint turn (home) */
@property --f { syntax: "<integer>"; inherits: true; initial-value: 0; }
.turn { background: var(--night); color: var(--cream); --focus: var(--sun); }
@keyframes turn-frames { from { --f: 0; } to { --f: 47; } }
@keyframes turn-first { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes turn-mid { 0% { opacity: 0; } 18%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes turn-last { 0% { opacity: 0; } 18%, 100% { opacity: 1; } }

/* v6c: flavor chips on the flavor pages */
.chips-wrap { background: var(--paper); border-bottom: 2px solid var(--line); }
.chips { list-style: none; margin: 0; padding: .7rem 0; display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips li { flex: none; scroll-snap-align: start; }
.chip { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .9rem .25rem .25rem; border-radius: 999px; background: var(--white); border: 2px solid var(--line); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: .9rem; line-height: 1.1; text-decoration: none; white-space: nowrap; transition: border-color .15s ease, transform .15s ease; }
.chip img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--cbg, var(--paper)); flex: none; }
.chip:hover, .chip:focus-visible { border-color: var(--ink); transform: translateY(-1px); color: var(--ink); }
.chip[aria-current="page"] { background: var(--cbg, var(--sun)); border-color: var(--ink); color: var(--cfg, var(--ink)); }
.chip[aria-current="page"] img { background: rgba(255, 255, 255, .55); }
.chip .small { font-weight: 600; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .chip { transition: none; } .chips { scroll-behavior: auto; } }
/* v6c: home hero contrast (axe: teal button text 4.04:1, note 4.35:1 on the teal field) */
@supports (color: color-mix(in srgb, red, blue)) { .hero-field .btn-ink { color: color-mix(in srgb, var(--fbg) 82%, #000); } }
.hero-field .hf-note { color: var(--ffg); opacity: 1; }

/* v7: the pint turns on its own (no scroll track), the three messages beside it */
/* v7: Grab'n Go */
/* v7: the v6c button darkening was for the home hero only; on the flavor heroes it dropped Strawberry Crush to 3.96:1 and Dragon Fruit to 4.09:1. Plain field color on ink: 4.51:1 (Passionfruit) to 9.8:1. */
.fhero .btn-ink { color: var(--fbg); }

/* v8: the three steps, typographic (home and Serving ideas) */
.si-steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
@media (min-width: 760px) { .si-steps-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } }
.si-steps-list li { border-top: 3px solid var(--sun); padding-top: 1.1rem; }
.si-n { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(3.2rem, 7vw, 5.6rem); line-height: .9; color: var(--sun); margin: 0 0 .5rem; letter-spacing: -.02em; }
.si-steps-list h2, .si-steps-list h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.02; margin: 0 0 .5rem; color: var(--cream); }
.si-steps-list p { margin: 0; max-width: 30ch; font-size: 1.1rem; }
.si-steps .section-head { margin-bottom: 2rem; }
.si-steps .cta-row { margin-top: 2.25rem; }
/* v8: the bowl builder (Serving ideas) */
.top { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem 1rem .4rem .8rem; border-radius: 999px; background: var(--white); border: 2px solid var(--ink); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: .95rem; cursor: pointer; }
.top::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); box-sizing: border-box; flex: none; }
/* v8: three ways to serve */
.si-ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 760px) { .si-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.si-ways li { border-radius: var(--radius-lg); border: 3px solid var(--ink); background: var(--white); box-shadow: 8px 8px 0 var(--ink); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.si-ways picture, .si-ways img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.si-ways .si-way-text { padding: 1rem 1.25rem 1.4rem; border-top: 3px solid var(--ink); }
.si-ways h3 { font-size: 1.4rem; margin: 0 0 .4rem; }
.si-ways p { margin: 0 0 .6rem; }
.si-ways a { font-weight: 700; }

/* v9: the bowl builder with a real picture (Serving ideas), and the built bowl beside the three steps (home) */
.bb { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "pic" "cap" "ctl"; gap: 1.25rem; align-items: start; }
@media (min-width: 960px) { .bb { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "pic ctl" "pic cap"; column-gap: 2.5rem; row-gap: 1.5rem; } }
@media (min-width: 1200px) { .bb { grid-template-columns: minmax(0, 604px) minmax(0, 1fr); column-gap: 3rem; } }
.si-steps-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; align-items: center; }
.si-steps-fig { margin: 0; }
.si-steps-media { display: block; border-radius: var(--radius-lg); border: 3px solid var(--sun); overflow: hidden; box-shadow: 10px 10px 0 rgba(0, 0, 0, .35); background: #B6B9BB; transition: transform .2s ease; }
.si-steps-media:hover, .si-steps-media:focus-visible { transform: translateY(-2px); }
.si-steps-media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.si-steps-cap { margin: .9rem 0 0; }
@media (min-width: 960px) {
  .si-steps-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 4rem; }
  .si-steps-pic .si-steps-list { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .si-steps-pic .si-steps-list li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); column-gap: 1rem; align-items: start; padding-top: .9rem; }
  .si-steps-pic .si-n { font-size: 2.6rem; line-height: 1; margin: 0; }
  .si-steps-pic .si-steps-list h3 { font-size: 1.6rem; margin-top: .15rem; }
  .si-steps-pic .si-steps-list p { grid-column: 2; }
}

/* v10: the pack in real 3D (model-viewer), the bigger hero packs, hulled strawberries */
.pack3d { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-lg); border: 4px solid var(--cream); box-shadow: 12px 12px 0 rgba(0, 0, 0, .28); background: var(--p3bg, var(--night)); transition: transform .35s var(--ease), background-color .35s ease; }
.pack3d.is-held { transform: scale(1.025); }
.pack3d model-viewer { display: block; width: 100%; height: 100%; background: transparent; --poster-color: transparent; --progress-bar-color: var(--sun); --progress-bar-height: 3px; --progress-mask: transparent; }
.pack3d model-viewer:focus-visible { outline: 3px solid var(--sun); outline-offset: -3px; }
.pack3d .p3-hint { pointer-events: none; z-index: 2; }
.pack3d.touched .p3-hint { opacity: 0; }
.p3-ar { position: absolute; left: 14px; top: 76px; z-index: 2; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .95rem; border: 2px solid rgba(251, 241, 228, .6); border-radius: 999px; background: rgba(31, 11, 61, .78); color: var(--cream); font-family: var(--font-display); font-weight: 700; font-size: .85rem; line-height: 1; cursor: pointer; }
.p3-ar::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 3px; transform: perspective(40px) rotateX(55deg); }
.p3-ar:hover { background: rgba(31, 11, 61, .95); }
.p3-ar:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.p3-ar[hidden] { display: none; }
.p3-footer { display: contents; }
.studio .pack3d { margin: 0; }
.gallery-main .pack3d { width: 100%; }
@media (prefers-reduced-motion: reduce) { .pack3d { transition: none; } .pack3d.is-held { transform: none; } }
@media (min-width: 960px) and (max-width: 1023px) { .hf-media { top: 4%; bottom: 4%; height: 92%; } }

/* v11: the whole line in the hero. The ten lids are the picker (Apple-style colourway swatches, named): a lid makes the hero
   that flavor (field colour, picture, caption). On desktop the hero tours the line once, slowly, with a visible pause button
   and a progress ring on the active lid; hovering the lids pauses it, any click, key or swipe stops it. Phones: swipe the
   picture or tap a lid; the tour runs only if the visitor presses play. */
.page-home .hero-field { transition: background-color .6s ease, color .6s ease; }
.page-home .hero-field .hl { color: var(--hl, var(--sun)); transition: color .6s ease; }
.page-home .hero-field .btn-ghost { transition: background-color .6s ease, color .6s ease, border-color .6s ease; }
.page-home .hero-field { --btxt: #176667; }
.page-home .hero-field .btn-ink { color: var(--btxt); transition: background-color .6s ease, color .6s ease, border-color .6s ease; }
.hf-media picture.is-out { opacity: 0; transition: opacity .6s ease; }
.lids { display: flex; flex-wrap: wrap; gap: .45rem .3rem; margin: 0; padding: 0; list-style: none; }
.lids li { margin: 0; padding: 0; }
.lid { position: relative; display: block; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: transform .25s var(--ease); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.lid img { display: block; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.lid:hover, .lid:focus-visible { transform: translateY(-3px) scale(1.1); }
.lid:focus-visible { outline: 3px solid var(--ffg); outline-offset: 4px; }
.lid[aria-pressed="true"]::after { content: ""; position: absolute; inset: -5px; border: 2.5px solid var(--ffg); border-radius: 50%; transition: border-color .6s ease, opacity .3s ease; }
/* the progress ring: a conic sweep, masked to a 2.5 px frame that follows the lid's own shape */
@property --lidp { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes lid-fill { from { --lidp: 0; } to { --lidp: 1; } }
.hf-note { transition: opacity .22s ease; }
.hf-note.is-out { opacity: 0; }
.hf-note strong { font-weight: 700; }
.hf-note a { font-weight: 600; }
/* no layout shift: the caption cell is as tall as the longest caption (hidden copies stacked in the same cell), and the
   label row is as tall as the play button before the script reveals it */
@media (max-width: 959px) {
  .hf-media { position: relative; touch-action: pan-y; }
  .hero-field .hf-copy { display: flex; flex-direction: column; }
}
@media (max-width: 480px) { .lid { width: 44px; height: 44px; } .lids { gap: .45rem .3rem; } }
/* phones: the tall picture's empty floor is trimmed (every pack ends above 72% of its height) and the cast shadow fades into
   the field, so the lids sit in the first screen right under the pack they change */
@media (max-width: 639px) {
  .page-home .hf-media { aspect-ratio: 1600 / 1860; overflow: hidden; }
  .page-home .hf-media picture { display: block; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 75%, transparent 86%); mask-image: linear-gradient(to bottom, #000 0, #000 75%, transparent 86%); }
}
/* v11: the copy is taller now (the lids), so the picture is capped at the hero's own height formula and centred; it no longer grows with the copy */
@media (min-width: 960px) {
  .page-home .hero-field { --hfh: min(88svh, 860px, 64vw); }
  .page-home .hf-media { left: 0; display: flex; align-items: center; justify-content: flex-end; }
  .page-home .hf-media picture { height: min(100%, var(--hfh)); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 89%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 89%, transparent 100%); }
}
@media (min-width: 960px) and (max-width: 1023px) {
  .page-home .hf-media picture { height: min(100%, calc(var(--hfh) * .92)); }
}
@media (min-width: 960px) and (max-width: 1439px) { .lid { width: 40px; height: 40px; } }
/* the headline holds two lines at every desktop width ("The Amazon," / "by the pint.": 5.5em at most against a copy column of
   38vw, then 40vw), so the taller copy column still fits the first screen and the picture stays centred on the packs */
@media (min-width: 960px) { .page-home .hero-field h1.display { font-size: min(6.2rem, 7.05vw); } }
@media (min-width: 960px) and (max-width: 1099px) { .page-home .hero-field h1.display { font-size: min(6.2rem, 6.7vw); } }
@media (prefers-reduced-motion: reduce) {
  .page-home .hero-field, .page-home .hero-field .hl, .page-home .hero-field .btn-ink, .hf-media picture.is-out, .lid, .hf-note { transition: none; }
}

/* v12: the Play pill stays hidden until the script shows it (reduced motion and Save-Data never do); its own display rule
   used to override the hidden attribute, so it showed as an inert button */
/* v12: timing as a chip in the hero caption ("First in March 2027" / "Follows the first two") */
/* v12: on the flavor pages the specs (formats, certifications, ingredients, nutrition, storage) fold into one panel */
.fdetails { border-top: 2px solid rgba(31, 11, 61, .14); border-bottom: 2px solid rgba(31, 11, 61, .14); }
.fdetails > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; }
.fdetails > summary::-webkit-details-marker { display: none; }
.fdetails > summary h2 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.65rem); }
.fdetails > summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
#details.section { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(1.5rem, 4vw, 3rem); }

/* v13a: the real Austropical leaf mark where the site drew a gradient leaf (the Work with us cards and the list bullets) */
.hub-ico, .hub-path:nth-child(n) .hub-ico { width: 58px; height: 31px; border-radius: 0; background: url("../img/austropical-leaf-mark-color.svg") left center / contain no-repeat; margin-bottom: .45rem; }
.hub-get li::before, .check-list li::before { width: 22px; height: 12px; border-radius: 0; background: url("../img/austropical-leaf-mark-color.svg") center / contain no-repeat; }

/* v13a: the turn section draws the real pack in 3D (the "Up close" model), sharp at any screen resolution */

/* Shared 3D controls keep a clear row above the pack and leave the native canvas free to drag. */
.p3-controls { position: absolute; right: 14px; top: 14px; z-index: 3; display: flex; align-items: center; gap: 6px; width: max-content; max-width: calc(100% - 20px); padding: 5px; border: 1px solid rgba(251, 241, 228, .45); border-radius: 999px; background: rgba(31, 11, 61, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.p3-zoom { display: flex; gap: 6px; }
.p3-zbtn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 2px solid rgba(251, 241, 228, .6); border-radius: 50%; background: rgba(31, 11, 61, .78); color: var(--cream); font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1; cursor: pointer; }
.p3-zbtn:hover { background: rgba(31, 11, 61, .95); }
.p3-zbtn:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.p3-reset { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem .7rem; border: 0; border-radius: 999px; background: transparent; color: var(--cream); font-family: var(--font-display); font-weight: 700; font-size: .8rem; line-height: 1; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
.p3-reset:hover { background: rgba(251, 241, 228, .16); }
.p3-reset:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.p3-tip { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); max-width: 82%; padding: .75rem 1.1rem; border-radius: 14px; background: rgba(31, 11, 61, .9); color: var(--cream); font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1.3; text-align: center; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.pack3d.show-tip .p3-tip { opacity: 1; }
/* the home Grab'n Go box: the still sits under the model until the model is drawn */
.pack3d.cup3d > picture, .pack3d.cup3d > picture img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pack3d.cup3d > model-viewer { position: absolute; inset: 0; z-index: 1; }
/* the flavor pages' Grab'n Go section: the cup still, a door to the 3D cup in "Up close" */
@media (max-width: 479px) { .p3-controls { right: 10px; top: 10px; } .p3-zbtn { font-size: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .p3-tip { transition: none; } }

/* v14: page-to-page transitions. Same-origin navigations cross-fade, and a flavor card grows into that flavor's page
   (the card and the page's hero share a view-transition-name). Browsers without cross-document view transitions
   simply navigate. Off under reduced motion. */
/* The navigation opt-in is parser-present in the shared document head. */
.site-header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
::view-transition-group(*) { animation-duration: .42s; animation-timing-function: cubic-bezier(.22, .8, .24, 1); }
::view-transition-old(*):only-child, ::view-transition-new(*):only-child { animation-duration: .2s; }

/* v14: the bowl builder's name, sharing and "Surprise me" */
@keyframes bb-shuffle { 0% { transform: rotate(0); } 30% { transform: rotate(-4deg) scale(.985); } 65% { transform: rotate(3deg); } 100% { transform: none; } }

/* v14: Find your flavor */
.quiz { background: var(--qbg, var(--sun)); color: var(--qfg, var(--ink)); transition: background-color .5s ease, color .5s ease; --focus: currentColor; }
.quiz[hidden] { display: none; }
.quiz .eyebrow { color: currentColor; }
.quiz-head { max-width: 760px; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.quiz-head h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.02; margin: 0 0 .6rem; }
.quiz.has-result .quiz-head .hl-ink { color: inherit; }
.quiz-body { max-width: 1060px; }
.quiz-body.quiz-in > * { animation: quiz-in .38s cubic-bezier(.22, .8, .24, 1) both; }
@keyframes quiz-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.quiz-progress { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; font-family: var(--font-body); font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.quiz-dots { display: inline-flex; gap: 6px; }
.quiz-dots i { width: 26px; height: 6px; border-radius: 3px; background: currentColor; opacity: .22; }
.quiz-dots i.is-done { opacity: .6; }
.quiz-dots i.is-on { opacity: 1; }
.quiz-qtext { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.08; margin: 0 0 1.1rem; outline: none; }
.quiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 900px) { .quiz-opts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.quiz-opt { display: flex; align-items: center; gap: .75rem; min-height: 76px; padding: .8rem 1rem; border-radius: 20px; border: 3px solid var(--ink); background: var(--white); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.15; text-align: left; cursor: pointer; box-shadow: 6px 6px 0 var(--ink); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; }
.quiz-opt:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.quiz-opt:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.quiz-opt[aria-pressed="true"] { background: var(--ink); color: var(--sun); }
.quiz-opt:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.quiz-opt img { width: 48px; height: 48px; flex: none; object-fit: contain; }
.quiz-sw { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--sw); border: 2px solid var(--ink); }
.quiz-nav { min-height: 2.5rem; margin-top: 1.1rem; }
.quiz-back { background: none; border: 0; padding: .4rem 0; font: inherit; font-weight: 700; color: currentColor; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.quiz-result { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: center; --ffg: var(--qfg); --fbg: var(--qbg); }
@media (min-width: 900px) { .quiz-result { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 3rem; } }
.quiz-kicker { font-family: var(--font-display); font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .4rem; }
.quiz-name { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 .6rem; outline: none; }
.quiz-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .9rem; }
.quiz-toast { margin: .6rem 0 0; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .quiz, .quiz-opt { transition: none; } .quiz-body.quiz-in > * { animation: none; } .quiz-opt:hover, .quiz-opt:active { transform: none; } }

/* v14: the launch-pair lid button keeps both lids round at every width (the images were stretched to 70% x 70% of a pill),
   and the second lid sits bottom-right as designed (the timing ring is the button's last child, so :last-child never matched) */

/* v14: a link that opens on an anchor (#build, #quiz, #cup) lands there at once; smooth scrolling starts after load
   (Chromium smooth-scrolled shared links from the top of the page, and sometimes ignored the header offset doing it) */
html:not(.smooth) { scroll-behavior: auto; }

/* v14: the toppings post: four bowls that open the builder, and the ten-bowl list */
.bowl-grid { list-style: none; padding: 0; margin: 2rem 0 .6rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.1rem; }
.bowl-grid li { margin: 0; }
.bowl-grid a { display: block; color: inherit; text-decoration: none; }
.bowl-grid img { display: block; width: 100%; height: auto; border-radius: 20px; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.bowl-grid a:hover img { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.bowl-grid a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 22px; }
.bowl-grid .bg-name { display: block; margin-top: .75rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(1rem, 2.4vw, 1.2rem); line-height: 1.1; letter-spacing: -.01em; }
.bowl-grid a:hover .bg-name { text-decoration: underline; text-underline-offset: .15em; }
.bowl-grid .bg-line { display: block; margin-top: .2rem; font-size: .92rem; line-height: 1.35; }
.bowl-grid-note { margin: 0 0 1.5rem; }
.bowl-list li { margin-bottom: .45rem; }
@media (prefers-reduced-motion: reduce) { .bowl-grid img { transition: none; } .bowl-grid a:hover img { transform: none; } }

/* v15: toppings land in the bowl with a little bounce, and lift away when taken off */

/* v15: one bowl picture inside a post */
.post-fig { margin: 2rem 0; }
.post-fig > a { display: block; color: inherit; text-decoration: none; }
.post-fig img { display: block; width: 100%; max-width: 560px; height: auto; border-radius: 22px; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.post-fig figcaption { margin-top: .8rem; font-size: .95rem; line-height: 1.4; max-width: 560px; }
.post-fig figcaption strong { font-family: var(--font-display); font-weight: 800; }

/* v16: flavor pages: "Make it a bowl", the flavor's own bowl on the flavor's own color */

/* v16: Home's bowl gets a "Surprise me" that deals one of ten named bowls */
.si-steps-fig { position: relative; }
.si-dice { position: absolute; top: 16px; right: 16px; z-index: 2; min-height: 44px; }
.si-dice[hidden] { display: none; }
.si-dice::before { content: ""; width: 18px; height: 18px; flex: none; border: 2px solid currentColor; border-radius: 5px; background: radial-gradient(circle, currentColor 1.6px, transparent 2.2px) 25% 25% / 50% 50% no-repeat, radial-gradient(circle, currentColor 1.6px, transparent 2.2px) 75% 75% / 50% 50% no-repeat, radial-gradient(circle, currentColor 1.6px, transparent 2.2px) center / 50% 50% no-repeat; box-sizing: border-box; }
.si-steps-media.si-shuffle { animation: bb-shuffle .5s cubic-bezier(.3, .7, .3, 1); }
@media (prefers-reduced-motion: reduce) { .si-steps-media.si-shuffle { animation: none; } }

/* Full-screen exploration on larger screens; phone gestures stay inline. */
.p3-done, .p3-fhelp { display: none; }
.pack3d.p3-touch .p3-hint { display: none; }
.pack3d .p3-open { position: absolute; left: 50%; bottom: 14px; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; padding: .7rem 1.15rem; border: 1px solid rgba(251, 241, 228, .45); border-radius: 999px; background: rgba(31, 11, 61, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--cream); font-family: var(--font-display); font-weight: 700; font-size: .9rem; line-height: 1; white-space: nowrap; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.p3-open-ico { width: 15px; height: 15px; background: linear-gradient(currentColor, currentColor) top left / 6px 2px no-repeat, linear-gradient(currentColor, currentColor) top left / 2px 6px no-repeat, linear-gradient(currentColor, currentColor) top right / 6px 2px no-repeat, linear-gradient(currentColor, currentColor) top right / 2px 6px no-repeat, linear-gradient(currentColor, currentColor) bottom left / 6px 2px no-repeat, linear-gradient(currentColor, currentColor) bottom left / 2px 6px no-repeat, linear-gradient(currentColor, currentColor) bottom right / 6px 2px no-repeat, linear-gradient(currentColor, currentColor) bottom right / 2px 6px no-repeat; }
.p3-open:focus-visible, .p3-done:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.pack3d.p3-full { position: fixed; inset: 0; z-index: 9999; width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; transform: none; }
.pack3d.p3-full model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; }
.pack3d.p3-full > picture { display: none; }
.pack3d.p3-full .p3-open, .pack3d.p3-full .p3-hint, .pack3d.p3-full .p3-tip { display: none; }
.pack3d.p3-full .p3-done { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 14px; z-index: 4; display: inline-flex; align-items: center; min-height: 44px; padding: .75rem 1.3rem; border: 0; border-radius: 999px; background: var(--cream); color: var(--ink, #1F0B3D); font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1; cursor: pointer; touch-action: manipulation; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .35); }
.pack3d.p3-full .p3-ar { top: calc(env(safe-area-inset-top, 0px) + 14px); left: 14px; }
.pack3d.p3-full .p3-controls { top: calc(env(safe-area-inset-top, 0px) + 70px); left: 50%; right: auto; transform: translateX(-50%); }
.pack3d.p3-full .p3-fhelp { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); z-index: 3; display: block; width: max-content; max-width: calc(100% - 28px); margin: 0 auto; padding: .5rem .85rem; border-radius: 999px; background: rgba(31, 11, 61, .9); color: var(--cream); font-family: var(--font-display); font-weight: 700; font-size: .85rem; line-height: 1.3; text-align: center; pointer-events: none; }
html.p3-lock, html.p3-lock body { overflow: hidden; overscroll-behavior: none; }
.p3-ph { display: block; }

/* v22: the bowls sit on their flavor's own colour under one hard light (like the pints). Their pictures lose the ink
   outline and the hard offset shadow, and take the soft shadow the pack gallery uses. */
.si-steps-media { border: 0; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .55); background: transparent; }
.si-steps-media:hover, .si-steps-media:focus-visible { transform: translateY(-2px); box-shadow: 0 36px 64px -34px rgba(0, 0, 0, .6); }
.bowl-grid img { border: 0; box-shadow: 0 22px 44px -28px rgba(0, 0, 0, .5); }
.bowl-grid a:hover img { transform: translateY(-2px); box-shadow: 0 28px 48px -26px rgba(0, 0, 0, .55); }
.post-fig img { border: 0; box-shadow: 0 24px 48px -30px rgba(0, 0, 0, .5); }

/* v23: views (Front, Story, Nutrition, Ingredients) glide the pack to that side of the label and zoom in to read it.
   Under the pack on desktop; in the full-screen explore on phones. */
.p3-views { position: absolute; left: 50%; bottom: 70px; z-index: 3; transform: translateX(-50%); display: flex; gap: 6px; max-width: calc(100% - 28px); padding: 5px; border-radius: 999px; background: rgba(31, 11, 61, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); white-space: nowrap; }
.p3-view { min-height: 44px; padding: .5rem .85rem; border: 0; border-radius: 999px; background: transparent; color: var(--cream); font-family: var(--font-display); font-weight: 700; font-size: .85rem; line-height: 1; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, color .2s ease; }
.p3-view:hover { background: rgba(251, 241, 228, .16); }
.p3-view[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.p3-view:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.pack3d:not(.p3-touch) .p3-hint { display: none; }
.pack3d.p3-touch:not(.p3-full) .p3-views { display: none; }
.pack3d.p3-full .p3-views { display: flex; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); }
.pack3d.p3-full .p3-view { min-width: 0; padding: .62rem .8rem; font-size: .9rem; }
@media (max-width: 479px) { .pack3d:not(.p3-full) .p3-views { display: none; } }
@media (max-width: 380px) {
  .pack3d.p3-full .p3-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: calc(100% - 28px); border-radius: 22px; }
  .pack3d.p3-full .p3-view { padding: .58rem .7rem; }
  .pack3d.p3-full .p3-fhelp { bottom: calc(env(safe-area-inset-bottom, 0px) + 134px); }
}
@media (prefers-reduced-motion: reduce) { .p3-view { transition: none; } }

/* v21: Work with us is the one link for buyers. A teal launch-pair hero, the start-here form that posts
   to Ray's Google Form, a shelf of two-page sell sheets (our own PDFs), and the sent state. */

.start-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (min-width: 980px) { .start-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 4.5rem; } }
.start-copy h2 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: 1; }
.start-steps { list-style: none; padding: 0; margin: 1.9rem 0 1.6rem; display: grid; gap: 1.15rem; counter-reset: st; }
.start-steps li { counter-increment: st; position: relative; padding-left: 3.4rem; min-height: 2.6rem; }
.start-steps li::before { content: counter(st); position: absolute; left: 0; top: -.15rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--acai); color: var(--sun); font: 800 1.1rem/2.5rem var(--font-display); text-align: center; }
.start-copy a[href^="tel"] { white-space: nowrap; }
.start-steps strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.14rem; letter-spacing: -.01em; margin-bottom: .1rem; }
.start-form { margin-top: 0; max-width: none; }
@media (min-width: 980px) { .start-form { position: sticky; top: calc(var(--header-h, 72px) + 1.25rem); } }
.need-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.need-chips label { position: relative; margin: 0; }
.need-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.need-chips input + span { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; box-sizing: border-box; padding: .5rem 1rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); font-weight: 700; font-size: .95rem; cursor: pointer; transition: background .15s ease, color .15s ease; }
.need-chips input + span::before { content: ""; width: 1rem; height: 1rem; border-radius: 5px; border: 2px solid currentColor; box-sizing: border-box; flex: none; }
.need-chips input:checked + span { background: var(--ink); color: var(--sun); }
.need-chips input:checked + span .hint { color: inherit; }
.need-chips input:checked + span::before { background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%231F0B3D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; border-color: var(--sun); }
.need-chips input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
.need-chips input + span:hover { background: var(--paper); }
.need-chips input:checked + span:hover { background: var(--acai); }

.form.is-done > :not(.form-done) { display: none !important; }
.form-done { display: grid; justify-items: center; text-align: center; gap: .55rem; padding: 2.2rem .5rem 1.6rem; outline: none; }
.form-done h3 { font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.05; margin: .5rem 0 0; }
.form-done p { margin: 0; max-width: 44ch; }
.form-done .btn { margin-top: .9rem; }
.form-done-ico { width: 76px; height: 76px; border-radius: 50%; background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%231F0B3D' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 40px no-repeat; animation: done-pop .55s var(--ease) both; }
@keyframes done-pop { from { transform: scale(.55); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .form-done-ico { animation: none; } }
button[type="submit"][aria-busy="true"] { opacity: .75; cursor: progress; }

.sheet-grid { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.6rem 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sheet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sheet-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sheet-grid .sheet-line { grid-column: span 2; }
.sheet-card { display: flex; flex-direction: column; gap: .5rem; height: 100%; text-decoration: none; color: var(--ink); }
.sheet-img { display: block; position: relative; border-radius: 10px; overflow: hidden; background: var(--white); aspect-ratio: 960 / 1242;
  box-shadow: 0 1px 0 rgba(31, 11, 61, .06), 0 16px 30px -22px rgba(31, 11, 61, .6); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.sheet-line .sheet-img { aspect-ratio: 1920 / 1242; }
.sheet-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheet-img::after { content: "Open PDF"; position: absolute; left: 50%; bottom: .75rem; transform: translate(-50%, .5rem); opacity: 0; background: var(--ink); color: var(--sun); font: 700 .82rem/1 var(--font-display); padding: .55rem .85rem; border-radius: 999px; transition: opacity .2s ease, transform .3s var(--ease); white-space: nowrap; }
.sheet-card:hover .sheet-img, .sheet-card:focus-visible .sheet-img { transform: translateY(-5px) rotate(-.8deg); box-shadow: 0 1px 0 rgba(31, 11, 61, .06), 0 30px 44px -26px rgba(31, 11, 61, .7); }
.sheet-card:hover .sheet-img::after, .sheet-card:focus-visible .sheet-img::after { opacity: 1; transform: translate(-50%, 0); }
.sheet-card:focus-visible { outline: none; }
.sheet-card:focus-visible .sheet-img { outline: 3px solid var(--ink); outline-offset: 3px; }
.sheet-name { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; line-height: 1.15; letter-spacing: -.01em; }
.sheet-name .small { display: block; font-family: var(--font-body); font-weight: 600; font-size: .8rem; color: var(--muted); letter-spacing: 0; margin-top: .1rem; }
.sheet-meta { display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--muted); margin-top: auto; }
.sheet-meta::before { content: "PDF"; font: 800 .66rem/1 var(--font-display); letter-spacing: .06em; background: var(--pink-deep); color: var(--white); border-radius: 4px; padding: .24rem .36rem .2rem; }
.sheet-more { margin-top: 2rem; }
@media (prefers-reduced-motion: reduce) { .sheet-img, .sheet-img::after { transition: none; } .sheet-card:hover .sheet-img { transform: none; } }
.ss-what { margin-top: 0; }
.ss-what h3 { font-size: 1.25rem; margin-bottom: .4rem; }
/* v21: Zero Sugar carries "Not a low calorie food." on every label, chips included */

/* v25: premium pass, site-wide. The ink outlines and hard offset shadows give way to hairlines and soft, deep shadows.
   Controls (fields, toggles, chips) keep a visible outline for contrast, just lighter. */
:root {
  --hair: rgba(31, 11, 61, .10);
  --lift: 0 1px 2px rgba(31, 11, 61, .05), 0 18px 40px -26px rgba(31, 11, 61, .38);
  --lift-hover: 0 1px 2px rgba(31, 11, 61, .06), 0 26px 50px -24px rgba(31, 11, 61, .45);
  --float: 0 30px 60px -36px rgba(0, 0, 0, .55);
}
/* cards and panels */
.form-card, .section-alt .form-card, .hub-path, .si-ways li, .quiz-opt, .steps li, .faq details, .post-card a, .grid-press li, .logo-row li, .table-wrap {
  border: 1px solid var(--hair); box-shadow: var(--lift);
}
.hub-path, .post-card a, .grid-press li, .quiz-opt { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.hub-path:hover, .hub-path:focus-visible, .post-card a:hover, .grid-press li:hover, .quiz-opt:hover { transform: translateY(-2px); box-shadow: var(--lift-hover); }
.hub-path[aria-current="true"] { box-shadow: var(--lift); }
.quiz-opt:active { transform: translateY(0); box-shadow: var(--lift); }
/* dividers inside cards */
.si-ways .si-way-text { border-top: 1px solid var(--hair); }
/* media: no frame, a soft deep shadow */
.split-media .v360, .gallery-main .v360, .gallery-main .spin, .gallery-image, .studio .spin, .pack3d { border: 0; box-shadow: var(--float); }
/* controls: a lighter outline that still reads */
.field input, .field select, .field textarea { border: 1.5px solid rgba(31, 11, 61, .45); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.top, .logo-row li { border-width: 1.5px; }
.v360-btn { box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4); }
.marquee { border-top: 0; border-bottom: 0; }

/* v26: the Austropical café in Sydney. Real photos and loops from the café (no AI, no faces, plates blurred):
   a reel of tall clips on Home, About, Foodservice and Work with us, a photo wall on About, a strip on Serving ideas.
   The clips use the .v360 player (poster first, plays in view, pause button, nothing moves under reduced motion). */
.cafe-band { position: relative; overflow: hidden; isolation: isolate; }
.cafe-band::before { content: ""; position: absolute; z-index: -1; width: min(64vw, 900px); aspect-ratio: 1; right: -12vw; top: 0;
  background: radial-gradient(closest-side, rgba(131, 72, 154, .42), rgba(131, 72, 154, .16) 55%, rgba(131, 72, 154, 0)); pointer-events: none; }
.cafe-head { display: grid; gap: 1.4rem 3.5rem; align-items: end; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
@media (min-width: 960px) { .cafe-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.cafe-head h2 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: .92; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.cafe-head h2 em { font-style: normal; color: var(--sun); }
.cafe-head .lede-sm { margin: 0 0 1.4rem; max-width: 46ch; }
.cafe-live { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.1rem; padding: .48rem .85rem .46rem; border-radius: 999px;
  font: 700 .74rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--cream);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); }
.cafe-live::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #FF4D5E; box-shadow: 0 0 0 4px rgba(255, 77, 94, .22); animation: cafe-rec 1.8s ease-in-out 2; } /* two beats, then still (WCAG 2.2.2) */
@keyframes cafe-rec { 50% { opacity: .35; } }
.cafe-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.cafe-reel { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(.8rem, 1.4vw, 1.25rem); }
.cafe-reel > li { margin: 0; min-width: 0; }
.cafe-reel .v360, .cafe-photo { border-radius: 26px; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 42px 70px -40px rgba(0, 0, 0, .85); }
.cafe-reel .v360 { transition: transform .5s var(--ease); }
.cafe-reel li:hover .v360 { transform: translateY(-6px); }
.cafe-photo { margin: 0; position: relative; overflow: hidden; aspect-ratio: 9 / 16; background: var(--acai-mid); }
.cafe-photo picture, .cafe-photo img { display: block; width: 100%; height: 100%; }
.cafe-photo img { object-fit: cover; }
.cafe-cap { margin: .8rem .25rem 0; font: 700 1.02rem/1.2 var(--font-display); letter-spacing: -.01em; }
.cafe-cap span { display: block; margin-top: .2rem; font: 500 .84rem/1.35 var(--font-body); letter-spacing: 0; opacity: .78; }
.on-dark .cafe-cap { color: var(--cream); }
@media (min-width: 900px) {
  .cafe-reel-stagger { padding-bottom: 3.4rem; }
  .cafe-reel-stagger > li:nth-child(even) { transform: translateY(3.4rem); }
}
@media (max-width: 899px) {
  .cafe-reel { grid-auto-columns: 64%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) .75rem; scrollbar-width: none; }
  .cafe-reel::-webkit-scrollbar { display: none; }
  .cafe-reel > li { scroll-snap-align: start; }
}
@media (min-width: 560px) and (max-width: 899px) { .cafe-reel { grid-auto-columns: 40%; } }
.cafe-swipe { display: none; }
@media (max-width: 899px) { .cafe-swipe { display: block; margin: .6rem 0 0; font-size: .85rem; opacity: .75; } }
.cafe-note { margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; max-width: 74ch; opacity: .82; }

.cafe-split { display: grid; gap: 2rem 3.5rem; align-items: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 960px) { .cafe-split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.cafe-split h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.cafe-wide { margin: 0; }
.cafe-wide .v360 { border-radius: 26px; box-shadow: var(--float); }
.cafe-wide figcaption { margin: .7rem .2rem 0; font-size: .88rem; opacity: .8; }
.split-media .cafe-wide .v360 { border: 0; }
@media (prefers-reduced-motion: reduce) {
  .cafe-live::before { animation: none; }
  .cafe-reel .v360 { transition: none; }
  .cafe-reel li:hover .v360 { transform: none; }
}

/* ================================================================================================================
   v27 (2 Oct 2026): The Café. Real footage from the Austropical café in Sydney, as the first thing people see.
   Components: .cafe-hero (video wall + headline), .cafe-strip (day-to-night storefront), .cafe-steps (made to order,
   sticky media on wide screens), .cafe-gallery (bowls, opens in .lightbox), .cafe-films (film wall), .cafe-split,
   .cafe-menu, .cafe-bar (the Açaí Bar program), .cafe-us (the US products), .bowl-run (home: bowls marquee).
   ================================================================================================================ */

/* ---------- the video wall hero (Café page and Home) ---------- */
.cafe-hero-tile { position: relative; flex: none; height: 100%; aspect-ratio: 9 / 16; overflow: hidden; background: #1a0c30; }
.cafe-hero-tile:nth-child(even) { height: 112%; margin-top: -6%; }
.cafe-hero-tile img, .cafe-hero-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cafe-hero-tile video { opacity: 0; transition: opacity .7s ease; }
.cafe-hero-tile.playing video { opacity: 1; }
.cafe-kicker::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #ff3b6b; box-shadow: 0 0 0 0 rgba(255, 59, 107, .7);
  animation: cafe-live 2s ease-out 2; } /* two pulses, then still (WCAG 2.2.2) */
@keyframes cafe-live { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 107, .6); } 70% { box-shadow: 0 0 0 10px rgba(255, 59, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 107, 0); } }
.cafe-hero-pause { position: absolute; right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); bottom: clamp(2.2rem, 6vh, 4.5rem);
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .5rem 1rem .5rem .8rem; border-radius: 999px;
  border: 1px solid rgba(251, 241, 228, .45); background: rgba(36, 15, 66, .55); color: var(--cream); font: 600 .85rem/1 var(--font-body);
  cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cafe-hero-pause:hover { border-color: var(--sun); color: var(--sun); }
.cafe-hero-pause:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.cafe-hero-pause .ico { width: 12px; height: 13px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.cafe-hero-pause[aria-pressed="true"] .ico { width: 0; height: 0; border-right: 0; border-left: 11px solid currentColor;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
@media (max-width: 699px) {
  .cafe-hero-tile, .cafe-hero-tile:nth-child(even) { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; aspect-ratio: auto;
    opacity: 0; transition: opacity .9s ease; }
  .cafe-hero-tile.is-current { opacity: 1; }
  .cafe-kicker::before { flex: none; margin-top: .22em; }
  .cafe-hero-pause { right: var(--gutter); top: 1rem; bottom: auto; }
  .cafe-hero-dots { position: absolute; left: var(--gutter); top: 1.35rem; display: flex; gap: 6px; }
  .cafe-hero-dots span { width: 22px; height: 3px; border-radius: 3px; background: rgba(251, 241, 228, .35); overflow: hidden; position: relative; }
  .cafe-hero-dots span.on::after { content: ""; position: absolute; inset: 0; background: var(--sun); transform-origin: left; animation: cafe-dot 6s linear forwards; }
}
@media (min-width: 700px) { .cafe-hero-dots { display: none; } }
@keyframes cafe-dot { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- shared bits ---------- */
.cafe-page .section-head { display: grid; gap: 1rem 3rem; align-items: end; margin-bottom: clamp(1.8rem, 4vw, 3rem); max-width: none; }
.cafe-page .wrap.section-head { max-width: var(--max); }
@media (min-width: 900px) { .cafe-page .section-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.cafe-page .section-head h2 { margin: 0; font-size: clamp(2.2rem, 5.6vw, 4.6rem); line-height: .95; letter-spacing: -.03em; }
.cafe-page .section-head p { margin: 0; }
.cafe-num { font-family: var(--font-display); font-weight: 800; color: var(--pink-deep); }
.on-dark .cafe-num { color: var(--sun); }
.cafe-cap { margin: .65rem 0 0; font-size: .9rem; color: var(--muted); }
.on-dark .cafe-cap { color: rgba(251, 241, 228, .75); }
.cafe-chips { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.cafe-chips li { margin: 0; padding: .45rem .9rem; border-radius: 999px; background: var(--white); border: 1px solid var(--line);
  font: 600 .9rem/1.2 var(--font-body); color: var(--ink); }
.on-dark .cafe-chips li { background: rgba(251, 241, 228, .08); border-color: rgba(251, 241, 228, .22); color: var(--cream); }
.cafe-page .v360 { border: 0; border-radius: 20px; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .55); transform: none; }
.cafe-page .v360-btn { width: 40px; height: 40px; right: 10px; bottom: 10px; border: 0; opacity: .92; }

/* ---------- day to night: the storefront strip (natural shapes, fixed height, swipe or scroll sideways) ---------- */

/* ---------- made to order: steps with sticky media ---------- */
.cafe-steps { display: grid; gap: 2.4rem; }
.cafe-step { display: grid; gap: 1rem; }
.cafe-step h3 { margin: 0; font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1; letter-spacing: -.02em; color: var(--cream); }
.cafe-step p { margin: 0; max-width: 40ch; color: rgba(251, 241, 228, .88); }
.cafe-step .cafe-num { font-size: 1rem; letter-spacing: .1em; }
.cafe-step-media { width: min(100%, 360px); }
.cafe-stage { display: none; }
@media (min-width: 960px) {
  .cafe-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 4rem; align-items: start; }
  .cafe-step-list { display: grid; }
  .cafe-step { min-height: 72vh; align-content: center; }
  .cafe-step-media { display: none; }
  .cafe-stage { display: block; position: sticky; top: calc(var(--header-h) + 5vh); height: min(80vh, 760px); }
  .cafe-stage-frame { position: relative; height: 100%; aspect-ratio: 9 / 16; margin-left: auto; border-radius: 28px; overflow: hidden;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(251, 241, 228, .12); background: #1a0c30; }
  .cafe-stage-item { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
  .cafe-stage-item.is-active { opacity: 1; }
  .cafe-stage-item img, .cafe-stage-item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cafe-stage-item video { opacity: 0; transition: opacity .4s ease; }
  .cafe-stage-item.playing video { opacity: 1; }
  .cafe-stage-label { position: absolute; left: 16px; bottom: 16px; z-index: 2; padding: .4rem .8rem; border-radius: 999px;
    background: rgba(36, 15, 66, .7); color: var(--cream); font: 700 .85rem/1 var(--font-display); letter-spacing: .04em; }
}
/* Steps other than the current one are dimmed with a tint of their own colour toward the night background,
   not with opacity (.35 opacity measured 2.4:1). Both tints keep 4.6:1 on --night; reduced motion shows every step in full colour. */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .cafe-step h3, .cafe-step p { transition: color .4s ease; }
  .cafe-step:not(.is-active) h3, .cafe-step:not(.is-active) p { color: #908093; }
  .cafe-step:not(.is-active) .cafe-num { color: #a57f1d; }
}

/* ---------- the bowls: gallery + lightbox ---------- */
.cafe-gallery { columns: 2 150px; column-gap: 12px; }
@media (min-width: 700px) { .cafe-gallery { columns: 3 220px; column-gap: 16px; } }
@media (min-width: 1100px) { .cafe-gallery { columns: 4 240px; column-gap: 18px; } }
.cafe-gallery figure { margin: 0 0 16px; break-inside: avoid; }
.cafe-gallery a { display: block; position: relative; border-radius: 18px; overflow: hidden; background: #efe3d2; cursor: zoom-in; }
.cafe-gallery img { display: block; width: 100%; height: auto; transition: transform .7s var(--ease); }
.cafe-gallery a:hover img { transform: scale(1.035); }
.cafe-gallery a::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(36, 15, 66, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23FBF1E4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 2h4v4M6 14H2v-4M14 2 9 7M2 14l5-5'/%3E%3C/svg%3E") center / 15px no-repeat;
  opacity: 0; transition: opacity .25s ease; }
.cafe-gallery a:hover::after, .cafe-gallery a:focus-visible::after { opacity: 1; }
.cafe-gallery a:focus-visible { outline: 3px solid var(--acai); outline-offset: 3px; }
.cafe-gallery figcaption { margin: .5rem .2rem 0; font-size: .88rem; color: var(--muted); }
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20, 8, 36, .96); color: var(--cream); }
.lightbox::backdrop { background: rgba(20, 8, 36, .9); }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; font-size: .9rem; color: rgba(251, 241, 228, .8); }
.lb-stage { position: relative; min-height: 0; display: grid; place-items: center; padding: 0 3.5rem; touch-action: pan-y; }
.lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 12px; }
.lb-cap { margin: 0; padding: .9rem 1rem 1.2rem; text-align: center; font-size: .95rem; color: rgba(251, 241, 228, .9); }
.lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(251, 241, 228, .35);
  background: rgba(36, 15, 66, .6); color: var(--cream); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.lb-btn:hover { border-color: var(--sun); color: var(--sun); }
.lb-btn:focus-visible, .lb-close:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.lb-prev { left: .6rem; } .lb-next { right: .6rem; }
.lb-close { min-height: 44px; padding: .4rem 1rem; border-radius: 999px; border: 1px solid rgba(251, 241, 228, .35); background: transparent;
  color: var(--cream); font: 600 .9rem/1 var(--font-body); cursor: pointer; }
@media (max-width: 599px) { .lb-stage { padding: 0 .4rem; } .lb-btn { top: auto; bottom: -3.4rem; transform: none; } .lb-prev { left: 1rem; } .lb-next { right: 1rem; } }

/* ---------- the film wall ---------- */
.cafe-films { columns: 2 140px; column-gap: 10px; }
@media (min-width: 700px) { .cafe-films { columns: 3 200px; column-gap: 14px; } }
@media (min-width: 1100px) { .cafe-films { columns: 5 180px; column-gap: 14px; } }
.cafe-films > li { list-style: none; margin: 0 0 14px; break-inside: avoid; }
.cafe-films { padding: 0; margin: 0; }
.cafe-films .v360 { border-radius: 16px; }
.cafe-films .wide-clip .v360 { aspect-ratio: 16 / 9; }

/* ---------- split layouts (party box, the menu, the Açaí Bar) ---------- */
.cafe-split { display: grid; gap: 1.6rem 3rem; align-items: center; }
@media (min-width: 900px) { .cafe-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cafe-split.flip > :first-child { order: 2; } }
.cafe-split h2 { margin: 0 0 1rem; font-size: clamp(2.2rem, 5.2vw, 4.2rem); line-height: .95; letter-spacing: -.03em; }
.cafe-pair { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; align-items: end; }
.cafe-pair picture, .cafe-pair img { display: block; width: 100%; height: auto; border-radius: 20px; }
.cafe-pair .stack { display: grid; gap: 14px; }
.cafe-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .cafe-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.cafe-menu > li { list-style: none; margin: 0; }
.cafe-menu { padding: 0; margin: 0; }
.cafe-menu picture, .cafe-menu img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.cafe-menu .photo { aspect-ratio: 9 / 16; overflow: hidden; border-radius: 20px; }
.cafe-menu .wide { grid-column: span 2; }
.cafe-menu .wide .photo { aspect-ratio: auto; height: 100%; }
@media (max-width: 899px) { .cafe-menu .wide .photo { aspect-ratio: 4 / 3; height: auto; width: 100%; } }

/* ---------- the Açaí Bar ---------- */
.cafe-bar { position: relative; overflow: hidden; isolation: isolate; }
.cafe-bar::before { content: ""; position: absolute; z-index: -1; width: min(70vw, 900px); aspect-ratio: 1; left: -20vw; top: -10%;
  background: radial-gradient(closest-side, rgba(255, 204, 4, .18), rgba(255, 204, 4, 0)); }
.cafe-bar-media { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cafe-bar-media > div:nth-child(2) { margin-top: 3rem; }
.cafe-kit { list-style: none; margin: 1.4rem 0; padding: 0; display: grid; gap: .55rem; }
.cafe-kit li { margin: 0; padding-left: 1.9rem; position: relative; }
.cafe-kit li::before { content: ""; position: absolute; left: 0; top: .32em; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%231F0B3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2 5 8.6 9.6 3.6'/%3E%3C/svg%3E") center / 11px no-repeat; }
.cafe-bar .cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.cafe-fine { margin-top: 1.2rem; font-size: .85rem; color: rgba(251, 241, 228, .72); max-width: 62ch; }

/* ---------- in US freezers ---------- */
/* the party box sits on the pink field: small text in white there (the purple and grey fell under 3:1) */
.cafe-page .section-cream-deep .eyebrow, .cafe-page .section-cream-deep .cafe-cap { color: var(--white); }
.cafe-page .section-cream-deep .eyebrow::before { background: var(--white); }

.cafe-us { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 800px) { .cafe-us { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cafe-us > li { margin: 0; }
.cafe-us a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--ink); background: var(--white);
  border-radius: 24px; overflow: hidden; border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.cafe-us a:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -34px rgba(31, 11, 61, .5); }
.cafe-us a:focus-visible { outline: 3px solid var(--acai); outline-offset: 3px; }
.cafe-us .pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
.cafe-us .pic img { position: absolute; inset: 6% 10%; width: 80%; height: 88%; object-fit: contain; transition: transform .6s var(--ease); }
.cafe-us a:hover .pic img { transform: scale(1.04); }
.cafe-us .txt { padding: 1.1rem 1.3rem 1.4rem; border-top: 1px solid var(--line); flex: 1; }
.cafe-us h3 { margin: 0 0 .35rem; font-size: 1.35rem; }
.cafe-us p { margin: 0; font-size: .95rem; color: var(--muted); }
.cafe-us .go { display: inline-block; margin-top: .7rem; font-weight: 700; color: var(--acai); }

/* ---------- Home: the bowls run (a slow strip of real bowls) ---------- */
/* v35: the strip is scrolled by hand (swipe, drag, trackpad, arrows); it no longer moves by itself */
.bowl-run { position: relative; margin-top: clamp(1.6rem, 4vw, 2.6rem); }
.bowl-run-track { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%); }
.bowl-run-track::-webkit-scrollbar { display: none; }
.bowl-run-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.bowl-run-track.is-peeking { scroll-snap-type: none; }
.bowl-run-track:focus-visible { outline: 3px solid var(--sun); outline-offset: -3px; border-radius: 22px; }
.bowl-run ul { list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; gap: 14px; width: max-content; }
.bowl-run li { margin: 0; flex: none; width: clamp(170px, 22vw, 280px); scroll-snap-align: start; }
.bowl-run img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px;
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.bowl-run-bar { position: relative; flex: 1; max-width: 26rem; height: 3px; border-radius: 3px; background: rgba(251, 241, 228, .2); overflow: hidden; }
.bowl-run-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--w, .25) * 100%); border-radius: 3px; background: var(--sun);
  transform: translateX(calc(var(--x, 0) * 100% / var(--w, .25))); will-change: transform; }
@media (max-width: 699px) { .bowl-run li { width: 58vw; } }   /* phones: one and a half bowls, so the next one says swipe */
@media (prefers-reduced-motion: reduce) {
  .cafe-kicker::before { animation: none; }
  .cafe-hero-tile, .cafe-stage-item, .cafe-gallery img { transition: none; }
}

/* ================================================================================================================
   v29 (2 Oct 2026): Home opens on the café's own clips, shown whole. The clips are 9:16 phone footage, so they are
   shown at 9:16: not cropped to a wide frame, not tinted, never larger than their native 720 px. Phones: one clip
   at a time, full width, like a story, with the headline under it, never on it. Tablets and desktop: a story
   carousel beside the headline; the clip in the middle plays, the ones before and after it wait as stills.
   ================================================================================================================ */
/* the story bar: one segment per clip, across the top edge of the clip, on a short shade so it reads on white */

/* phones: the clip fills the width; the headline starts right under it, inside the first screen */

/* tablets and desktop: the carousel. --ch is the height of the clip in the middle; side clips are 62% of it */
/* tablets: the clips first, as on phones, then the headline */

/* ================================================================================================================
   v31 (2 Oct 2026, late night): The Café opens on the café itself. Real photos of the store, shown whole and sharp
   (never larger than the photo): the mural on the window, the front at night, the neon sign inside. No tint, no
   video behind the headline. The store section below shows the rest in justified rows (each row one height, every
   photo uncropped on wide screens), and every photo opens full size in the lightbox.
   ================================================================================================================ */
.ch { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--cream); }
.ch::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 58% at 80% 42%, rgba(255, 204, 4, .12), rgba(255, 204, 4, 0) 72%),
    radial-gradient(40% 50% at 4% 100%, rgba(105, 176, 191, .15), rgba(105, 176, 191, 0) 72%); }
.ch-grid { position: relative; display: flex; flex-direction: column; }
.ch-copy { position: relative; z-index: 2; padding: 1.4rem var(--gutter) 1.5rem; }
.ch .cafe-kicker { display: inline-flex; align-items: flex-start; gap: .6rem; margin: 0 0 .8rem; font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; line-height: 1.35; letter-spacing: .16em; text-transform: uppercase; color: var(--sun); }
.ch .cafe-kicker::before { flex: none; margin-top: .25em; }
.ch h1 { font-size: clamp(2.7rem, 12.6vw, 4.6rem); line-height: .9; letter-spacing: -.04em; margin: 0 0 1rem; color: var(--cream); }
.ch h1 em { font-style: normal; color: var(--sun); }
.ch .lede { color: rgba(251, 241, 228, .92); max-width: 46ch; margin: 0 0 1.4rem; }
.ch .cta-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* the photos. Phones: the mural first, full width; the copy; then the front and the neon side by side, one height */
.ch-photos { display: contents; }
.ch-fig { position: relative; margin: 0; min-width: 0; }
.ch-fig a { position: relative; display: block; overflow: hidden; border-radius: 18px; background: #1a0c30; cursor: zoom-in;
  box-shadow: 0 26px 60px -30px rgba(6, 1, 16, .85), 0 0 0 1px rgba(251, 241, 228, .08); }
.ch-fig picture, .ch-fig img { display: block; width: 100%; height: 100%; }
.ch-fig img { object-fit: cover; transition: transform .8s var(--ease); }
.ch-fig a:hover img { transform: scale(1.03); }
.ch-fig a:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.ch-fig .photo-tag { left: 10px; bottom: 10px; pointer-events: none; font-size: .7rem; padding: .28rem .65rem; }
.ch-a { order: -1; padding: .9rem var(--gutter) 0; }
.ch-a .photo-tag { left: calc(var(--gutter) + 10px); }
.ch-a a { aspect-ratio: 4 / 5; }
.ch-side { order: 1; display: flex; gap: 10px; padding: 0 var(--gutter) 2.4rem; }
.ch-b { flex: .8 1 0%; }
.ch-c { flex: 1.3333 1 0%; }
.ch-b a { aspect-ratio: 4 / 5; }
.ch-c a { aspect-ratio: 4 / 3; }

/* tablets: the photos on top (the mural, with the front and the neon stacked beside it), the copy under them */
@media (min-width: 700px) {
  .ch-grid { max-width: var(--max); margin: 0 auto; padding: clamp(1.6rem, 4vh, 2.8rem) var(--gutter) clamp(2.6rem, 5vh, 3.8rem); }
  .ch-photos { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; order: -1; }
  .ch-a, .ch-side { order: 0; padding: 0; }
  .ch-side { flex-direction: column; gap: 12px; }
  .ch-b, .ch-c { flex: none; }
  .ch-c { flex: 1 1 0%; min-height: 0; display: flex; }
  .ch-c a { flex: 1 1 auto; aspect-ratio: auto; min-height: 120px; }
  .ch-c picture { position: absolute; inset: 0; }
  .ch-fig a { border-radius: 22px; }
  .ch-fig .photo-tag, .ch-a .photo-tag { left: 12px; bottom: 12px; font-size: .74rem; padding: .3rem .75rem; }
  .ch-copy { padding: 2rem 0 0; }
}
/* desktop: the copy on the left, the photos on the right */
@media (min-width: 960px) {
  .ch-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; column-gap: clamp(2rem, 4vw, 4.2rem);
    min-height: min(calc(100svh - var(--header-h)), 860px); }
  .ch-photos { order: 0; }
  .ch-copy { padding: 0; }
  .ch h1 { font-size: clamp(3.1rem, 4.3vw, 3.9rem); margin-bottom: 1.1rem; }
  .ch .cafe-kicker { margin-bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .ch-fig img, .st img { transition: none; } .ch-fig a:hover img, .st a:hover img { transform: none; } }

/* ---------- the store: justified rows (each row one height; widths follow each photo's shape) ---------- */
.store { display: grid; gap: clamp(10px, 1.2vw, 14px); }
.store-row { display: flex; gap: clamp(10px, 1.2vw, 14px); }
.st { position: relative; margin: 0; min-width: 0; flex: var(--g) 1 0%; }
.st a { position: relative; display: block; aspect-ratio: var(--ar); overflow: hidden; border-radius: 18px; background: #efe3d2; cursor: zoom-in;
  box-shadow: 0 22px 48px -30px rgba(31, 11, 61, .55); }
.st picture, .st img { display: block; width: 100%; height: 100%; }
.st img { object-fit: cover; transition: transform .8s var(--ease); }
.st a:hover img { transform: scale(1.03); }
.st a:focus-visible { outline: 3px solid var(--acai); outline-offset: 3px; }
.st .photo-tag { left: 12px; bottom: 12px; pointer-events: none; font-size: .74rem; padding: .3rem .75rem; }
.st-tag-top .photo-tag { top: 12px; bottom: auto; }
/* tablets and small laptops: the tiles are small, so the tags are too */
@media (min-width: 700px) and (max-width: 1099px) {
  .st .photo-tag { left: 9px; bottom: 9px; font-size: .66rem; padding: .24rem .58rem; }
  .st-tag-top .photo-tag { top: 9px; bottom: auto; }
}
/* phones: two columns, wide photos across both (the sign too); the order puts the front by day first */
@media (max-width: 699px) {
  .store { grid-template-columns: 1fr 1fr; gap: 10px; }
  .store-row { display: contents; }
  .st { order: var(--o); }
  .st a { aspect-ratio: 4 / 5; border-radius: 16px; }
  .st-wide, .st-wide-sm { grid-column: 1 / -1; }
  .st-wide a { aspect-ratio: var(--ar); }
  .st-wide-sm a { aspect-ratio: 4 / 3; }
  .st-wide-sm img { object-position: 50% 100%; }
  .st .photo-tag { left: 8px; bottom: 8px; font-size: .66rem; padding: .25rem .6rem; }
  .st-tag-top .photo-tag { top: 8px; bottom: auto; }
}

/* About, the café wall: the caption goes on top where the subject sits at the bottom (the sign) */

/* the lightbox: the photo always fits the screen. The stage's one cell gets a definite size, so the photo's
   max-height: 100% works (before, a tall photo could run past the bottom of a laptop screen) */
.lb-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }

/* ================================================================================================================
   v32 (3 Oct 2026): one pack at a time, a faster flavor walk you can click through, and a video wall on desktop.
   ================================================================================================================ */

/* the still under a 3D pack goes once the model is drawn: a tilted or turning model showed a second pack behind it */
.pack3d.cup3d.is-3d > picture { visibility: hidden; }

/* "The Amazon, by the pint": the pint in the picture opens its flavor page */
/* the copy's box no longer sits over the picture: only the copy itself takes the pointer */
.hero-field .hf-wrap { pointer-events: none; }
.hero-field .hf-copy { pointer-events: auto; }

/* the label that follows the pointer over a clip or a pint (mouse only) */

/* ---------- the Home video wall (desktop): three columns of café clips drifting past, the story carousel on phones ---------- */

/* ---------- the clip viewer: full screen, the clip whole, its colours glowing round it ---------- */

/* ================================================================================================================
   v33 (3 Oct 2026): the Home hero on desktop works like the phone story, only bigger. One clip at a time, as tall
   as the screen allows and never cropped; the next clips wait in a deck behind it; its colours glow round the page;
   the chapters (Fresh, Outside, Inside, Soft serve, Bowls) sit under the headline. Phones and tablets keep the
   v29 layout with the new clips.
   ================================================================================================================ */
/* very wide screens: the page grows a little so the headline keeps its room beside a taller clip */

/* ================================================================================================================
   v36 (3 Oct 2026): phones first. The open menu stays inside the screen and closes the way people expect (Escape,
   a tap outside it, one of its links, a wider window); a slimmer header on phones. Tap targets on Home, in the menu
   and in the footer are at least 44 px. A trade route next to the shopper routes: "Wholesale inquiries" in the menu,
   a buyers' line under the story hero's buttons, samples and pricing next to the bowl program. Story clips that are
   not on deck do not fetch their stills until they come near.
   ================================================================================================================ */

/* the header on phones: the same logo a little smaller, so the sticky bar takes less of the screen */
@media (max-width: 899px) {
  :root { --header-h: 64px; }
  .brand img { width: 80px; height: 50px; }
}

/* the menu on phones and tablets: when it is taller than the screen (landscape phones), it scrolls inside the screen
   instead of running off the bottom; the two buttons share a row, each a full 48 px */
@media (max-width: 959px) {
  .site-nav.open { max-height: calc(100vh - var(--header-h) - 1rem - 3px); max-height: calc(100dvh - var(--header-h) - 1rem - 3px);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .site-nav .nav-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
  .site-nav .nav-cta .btn { flex: 1 1 auto; min-height: 48px; font-size: .98rem; }
}

/* phones: a row of buttons fills the width. Two that fit share the row; two that do not stack, each full width */
@media (max-width: 599px) {
  .cta-row > .btn { flex: 1 1 auto; }
}

/* the buyers' line under the story hero's buttons */
/* a 44 px hit area that does not push the lines apart (the padding is taken back by the margin) */

/* tap targets: the small controls on Home reach 44 px; where the drawn control stays small, its hit area grows */
.marquee-toggle { width: 44px; height: 44px; }
.p3-zbtn { width: 44px; height: 44px; }
.pack3d.p3-touch .p3-open { min-height: 44px; }
.studio-link { display: inline-block; padding-block: .7rem; }

/* footer links on phones and tablets: a full 44 px row each; on phones the long list of short links (Austropical) goes
   two to a row, so the footer is no longer than before. Flavor names stay one to a line, whole */
@media (max-width: 899px) {
  .footer-list li { padding: 0; }
  .footer-list a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .footer-line a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* breadcrumbs: a 44 px hit area without moving the line (the padding is taken back by the margin) */
.crumbs a { display: inline-block; padding-block: 13px; margin-block: -13px; }
.cafe-page .v360-btn { width: 44px; height: 44px; }
@media (min-width: 360px) and (max-width: 639px) {
  .footer-list:has(> li:nth-child(12)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
}

/* story clips: only the clips on deck draw (the one playing, the ones either side, and on wide screens the deck's back
   row), so the other stills wait until they come near. The cards keep their size, so nothing moves */

/* ================================================================================================================
   v37 (3 Oct 2026): two actions that follow the visitor. Flavor pages on phones get a dock: once the hero's own
   buttons have scrolled away, a capsule with the flavor's lid, Get it first and Wholesale floats at the foot of the
   screen; it steps aside at the closing Where to buy band and at the footer, where the same links already are.
   Every footer gets the waitlist itself (email and ZIP), not just a link to it.
   ================================================================================================================ */

/* the dock: hidden without the script, and on screens wide enough to show the hero's buttons beside the pint */
.fl-dock { display: none; }
@media (max-width: 699px) {
  .fl-dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40;
    display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 999px;
    background: rgba(31, 11, 61, .9); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px);
    box-shadow: 0 16px 36px -14px rgba(6, 1, 16, .7), inset 0 0 0 1px rgba(251, 241, 228, .14);
    visibility: hidden; transform: translateY(calc(100% + 28px));
    transition: transform .38s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .38s; }
  .fl-dock.is-on { visibility: visible; transform: none; transition: transform .38s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
  .fl-dock-lid { flex: none; width: 44px; height: 44px; border-radius: 50%; }
  .fl-dock:not(.is-ready) .fl-dock-lid { display: none; }   /* not fetched until the first scroll (see the script) */
  .fl-dock .btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: .5rem .75rem; font-size: .95rem; box-shadow: none; white-space: nowrap; }
  .fl-dock .btn:hover, .fl-dock .btn:active { transform: none; box-shadow: none; }
  /* the 3D viewer and the café viewer take the whole screen: the dock steps aside */
  html.p3-lock .fl-dock { visibility: hidden; }
}
@media (max-width: 359px) { .fl-dock-lid { display: none; } }
@media (prefers-reduced-motion: reduce) { .fl-dock, .fl-dock.is-on { transition: none; } }

/* the footer waitlist: email and ZIP in one go, on every page but Where to buy (which has the full form) */
.footer-join { flex: 1 1 100%; max-width: none; margin: 0; gap: .7rem; }
/* phones: email on its own row, then ZIP and the button side by side; wider: all three in a row */
.footer-join-row { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: .75rem; align-items: end; }
.footer-join-row .field { margin: 0; }
.footer-join-row .field-email { grid-column: 1 / -1; }
.footer-join-row .btn { min-height: 52px; padding-inline: 1rem; }
.site-footer .footer-join label { color: var(--cream); font-size: .9rem; }
.site-footer .footer-join input { border-color: var(--cream); }
.footer-join-note { margin: 0; font-size: .85rem; color: rgba(251, 241, 228, .82); max-width: 62ch; }
.site-footer .footer-join .form-status { color: var(--cream); min-height: 0; }
.site-footer .footer-join .form-status:empty { display: none; }
.footer-join .form-done { justify-items: start; text-align: left; padding: .4rem 0; }
.footer-join .form-done h3 { color: var(--sun); font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.footer-join .form-done-ico { width: 52px; height: 52px; }
@media (min-width: 560px) {
  .footer-join-row { grid-template-columns: minmax(0, 1fr) minmax(0, 8rem) auto; }
  .footer-join-row .field-email { grid-column: auto; }
}
@media (min-width: 900px) {
  .footer-join { flex: 1 1 520px; }
}

/* ---- src/css/10-system.css ---- */
/* v38 design system (3 Oct 2026). Sits on top of 00-legacy.css; new pages and sections use these
   tokens. A tropical break you can taste: saturated fruit colour, deep açaí purple, big confident
   type, generous space, and motion only where it guides the eye. */
:root {
  --font-display: "Bricolage Grotesque", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Spacing scale */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
  --section-y: clamp(4.25rem, 3rem + 6vw, 8rem);
  /* Type scale */
  --t-hero: clamp(2.85rem, 1.1rem + 7.4vw, 7.25rem);
  --t-h2: clamp(2.15rem, 1.25rem + 3.7vw, 4.4rem);
  --t-h3: clamp(1.35rem, 1.1rem + .9vw, 1.8rem);
  --t-lede: clamp(1.1rem, 1rem + .45vw, 1.32rem);
  --t-small: .9rem;
  /* Motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.3, 1.35, .55, 1);
  --dur-1: .18s; --dur-2: .34s; --dur-3: .62s;
  /* Depth */
  --pack-shadow: drop-shadow(0 28px 26px rgba(20, 6, 40, .32)) drop-shadow(0 6px 8px rgba(20, 6, 40, .18));
  --tile-shadow: 0 30px 60px -34px rgba(20, 6, 40, .55);
}

/* Headings: one family, tight and confident */
h1, h2 { letter-spacing: -.035em; }
.btn-lg { min-height: 56px; padding: .8rem 1.6rem; font-size: 1.06rem; }
@media(max-width:899px) { :root { --header-h:72px; } .brand img { width:100px; height:60px; object-fit:contain; } }

/* A component's display rule must never override the HTML hidden attribute. */
[hidden] { display: none !important; }

/* Without scripting, keep the primary routes available on phones. The header
   stays in the document so the expanded navigation does not cover the page. */
@media (max-width: 959px) {
  html:not(.js) .site-header { position: static; }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav { display: block; }
  html:not(.js) .site-nav ul { flex-direction: row; flex-wrap: wrap; gap: .35rem 1rem; }
  html:not(.js) .site-nav a:not(.btn) { min-height: 44px; display: inline-flex; align-items: center; font-size: 1rem; }
  html:not(.js) .site-nav .nav-cta { margin-top: 0; }
}

/* Header: consumer discovery, the Store & Cafe, story and foodservice. */
.site-nav a[aria-current="true"] { color: var(--sun); }
@media (min-width: 960px) {
  .site-nav ul { gap: clamp(.85rem, 1.5vw, 1.6rem); }
  .site-nav a[aria-current="true"] { border-bottom-color: rgba(255, 204, 4, .55); color: var(--cream); }
  .site-nav .nav-cta { margin-left: .4rem; }
}

/* Eyebrow on dark grounds */
.eyebrow-light { color: var(--sun); }

/* Footer: the waitlist leads, then four tidy columns */
.ft-join { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem 3rem; padding: clamp(2.75rem, 5vw, 4.25rem) 0 clamp(2.25rem, 4vw, 3rem); border-bottom: 2px solid rgba(251, 241, 228, .14); margin-bottom: 2.5rem; align-items: end; }
@media (min-width: 900px) { .ft-join { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.ft-kicker { margin: 0 0 .5rem; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sun); }
.ft-join-h { margin: 0 0 .6rem; font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height: .92; color: var(--sun) !important; letter-spacing: -.04em; }
.ft-join-p { margin: 0; max-width: 46ch; color: rgba(251, 241, 228, .9); }
.ft-join .footer-join { display: grid; gap: .7rem; }
@media (min-width: 640px) { .ft-join .footer-join-row { grid-template-columns: minmax(0, 1fr) minmax(0, 8rem) auto; } .ft-join .footer-join-row .field-email { grid-column: auto; } }
.ft-grid { gap: 2rem 2.5rem; }
@media (min-width: 760px) { .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ft-grid { grid-template-columns: 1.25fr 1.1fr .9fr 1fr; } }
.ft-grid .footer-logo { display: inline-block; margin-bottom: 1rem; }
.ft-grid .footer-logo img { width: 112px; height: auto; }
.ft-h2 { margin-top: 1.6rem; }
.footer-legal a { color: inherit; }

/* Shared: availability pill used across pages */
.avail { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .9rem .45rem .7rem; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: .92rem; line-height: 1.2; background: rgba(255, 255, 255, .16); border: 1.5px solid currentColor; }
.avail::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 3px rgba(138, 185, 63, .3); flex: none; }
.avail[data-state="follows"]::before { background: transparent; border: 2px solid currentColor; box-shadow: none; }

/* Reduced motion: the system never animates layout-critical content */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover { transition: none; transform: none; }
}

/* ---- src/css/20-home.css ---- */
/* v38 Home. Hero (.hx), formats (.fm), the bowl at home (.si-*), café films (.cf), foodservice (.fsb). */

/* The complete-range hero is in 21-home-range.css. */

/* The launch list, opened from the hero (and the header button) in a dialog; the page link is the fallback */
.lx { width: min(34rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.lx::backdrop { background: rgba(24, 7, 44, .66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lx-card { position: relative; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow: auto; background: var(--cream); border-radius: 28px; padding: clamp(1.4rem, 4vw, 2.25rem); box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .65); }
.lx-close { position: absolute; top: .7rem; right: .7rem; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.lx-close:hover { background: rgba(58, 28, 101, .1); }
.lx-close:focus-visible { outline: 3px solid var(--acai); outline-offset: 2px; }
.lx-kicker { margin: 0 3rem .5rem 0; font-family: var(--font-display); font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acai-mid); }
.lx-h { margin: 0 0 .5rem; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: .95; letter-spacing: -.04em; color: var(--acai); }
.lx-p { margin: 0; max-width: 40ch; }
.lx-form { margin-top: 1.1rem; gap: .9rem; }
.lx-form .form-actions { margin-top: .2rem; }
.lx-form .form-status:empty { min-height: 0; }
.lx-flavor { margin: -.2rem 0 0; font-size: .9rem; font-weight: 600; color: var(--acai); }
.lx-privacy { margin: 0; font-size: .84rem; color: #4f4766; }
/* 00-launch-dialog.js wraps each rendered line of the two paragraphs in one of these when the dialog opens.
   Positioning without an offset changes nothing on screen, but Chromium then sizes each line as its own
   text block, so the eight-second invitation never outgrows a page's own Largest Contentful Paint. */
.lx-line { position: relative; }
@media (max-width: 599px) {
  .lx { width: 100vw; margin: auto 0 0; max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
  .lx-card { border-radius: 26px 26px 0 0; max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); padding-bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); }
  .lx-submit { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .lx[open] .lx-card { animation: lx-in .34s var(--ease-out); }
  .lx[open]::backdrop { animation: lx-fade .34s ease; }
  @keyframes lx-in { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.98); } }
  @keyframes lx-fade { from { opacity: 0; } }
}

/* Retail formats share one surface and the same forward-facing camera treatment. */
.fm { padding:var(--section-y) 0; background:#174f58; color:#fbf1e4; }
.fm-wrap { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:1rem 3rem; align-items:center; }
.fm-head h2 { font-size:var(--t-h2); line-height:.95; margin:0; color:#fbf1e4; }
.fm-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
.fm-card { min-width:0; margin:0; }
.fm-media { display:flex; flex-direction:column; min-height:44px; color:#fbf1e4; text-decoration:none; }
.fm-media img { display:block; width:100%; height:auto; filter:drop-shadow(0 14px 12px #08292f60); }
.fm-name { display:flex; justify-content:space-between; align-items:center; gap:.5rem; font:700 clamp(1.05rem,1.7vw,1.5rem) var(--font-display); border-bottom:1px solid #b7d0cf; padding:.6rem 0; }
.fm-size { display:block; font-size:.82rem; padding-top:.4rem; }
.fm-media:hover .fm-name { border-color:#dcff70; color:#dcff70; }
.fm-media:focus-visible { outline:3px solid #dcff70; outline-offset:5px; }
.fm-note { grid-column:2; margin:0; font-size:.7rem; color:#d3e1df; }
@media(max-width:759px) {
 .fm-wrap { grid-template-columns:minmax(0,1fr); gap:.9rem; }
 .fm-grid { gap:1rem; }
 .fm-head h2 { font-size:clamp(2.5rem,10vw,4rem); }
 .fm-note { grid-column:1; }
 .fm-size { font-size:.73rem; }
}

/* A single place invitation; film and detailed B2B specifications live on their destinations. */
.home-place { padding:var(--section-y) 0; background:#fbf1e4; color:#251039; }
/* Owner (6 Oct): the café photo is Ray's portrait 3:4 still, never cropped: full width above the copy on phones,
   a tall frame beside the copy from 760 px (45% of the content, at most 525 px, so the 1050 px still stays at 2x). */
.home-place-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.5rem,5vw,4rem); align-items:center; }
@media(min-width:760px) { .home-place-grid { grid-template-columns:min(45%,525px) minmax(0,1fr); } }
.home-place-photo { margin:0; }
.home-place-photo a,.home-place-photo picture,.home-place-photo img { display:block; width:100%; height:auto; }
.home-place-photo img { aspect-ratio:3 / 4; }
.home-place-photo figcaption { display:inline-block; margin-top:.75rem; padding:.3rem .75rem; border-radius:999px; background:rgba(37,16,57,.08); color:#251039; font-size:.74rem; font-weight:600; line-height:1.3; }
.home-place-photo a:focus-visible,.home-place-link:focus-visible,.home-trade-link a:focus-visible { outline:3px solid #251039; outline-offset:5px; }
.home-place-copy h2 { margin:0 0 1rem; font-size:var(--t-h2); line-height:.95; }
.home-place-copy > p:not(.eyebrow) { max-width:35ch; }
.home-place-link,.home-trade-link a { display:inline-flex; align-items:center; gap:1rem; min-height:44px; font-weight:700; text-underline-offset:.25em; }
.home-trade-link { margin:2rem 0 0; padding-top:1.3rem; border-top:1px solid #b8a8b7; font-size:.88rem; }

/* ---------- The bowl at home: the "More bowl ideas" strip (moved from an inline style) ---------- */
.si-more { margin-top: clamp(2.75rem, 5vw, 4rem); border-top: 3px solid var(--sun); padding-top: 1.4rem; }
.si-more-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.05; color: var(--cream); margin: 0 0 1.2rem; }
.si-more-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 760px) { .si-more-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; } }
.si-more-list li { margin: 0; }
.si-more-note { margin: 1.1rem 0 0; }
.si-more-list a { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 1rem; align-items: center; color: var(--cream); text-decoration: none; }
@media (min-width: 760px) { .si-more-list a { grid-template-columns: minmax(0, 1fr); gap: .85rem; align-items: start; } }
.si-more-list img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 18px; box-shadow: 0 20px 40px -26px rgba(0, 0, 0, .55); transition: transform .2s ease; }
.si-more-list a:hover img, .si-more-list a:focus-visible img { transform: translateY(-3px); }
.si-more-list span { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; line-height: 1.2; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .18em; transition: text-decoration-color .2s ease; }
.si-more-list a:hover span, .si-more-list a:focus-visible span { text-decoration-color: currentColor; }
.si-more-list a:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; border-radius: 18px; }
@media (prefers-reduced-motion: reduce) { .si-more-list img { transition: none; } .si-more-list a:hover img { transform: none; } }

/* ---------- Café films: four short edits from the Sydney café, played one after another ---------- */
.cf { padding: var(--section-y) 0; background: radial-gradient(80% 60% at 100% 0%, rgba(237, 42, 125, .16), transparent 60%), var(--night); }
.cf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 3rem; align-items: center; }
@media (min-width: 960px) { .cf-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.cf-copy h2 { font-size: var(--t-h2); }
.cf-reel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 640px) { .cf-reel { gap: 1rem; } }
.cf-item figure { margin: 0; }
.cf-frame { position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: #3A2350; cursor: pointer; box-shadow: 0 0 0 0 var(--sun); transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.cf-frame video, .cf-poster, .cf-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cf-poster { display: block; }   /* a lazy still under each film: the video has no poster attribute, which would load at once */
.cf-item.is-active .cf-frame { box-shadow: 0 0 0 3px var(--sun); }
.cf-frame:focus-visible { outline: 3px solid var(--sun); outline-offset: 5px; }
@media (prefers-reduced-motion: no-preference) { .cf-item.is-active .cf-frame { transform: translateY(-4px); } }
.cf-item figcaption { margin-top: .55rem; font-size: .86rem; line-height: 1.35; color: var(--cream); }
.cf-item figcaption span { display: block; color: rgba(251, 241, 228, .74); font-size: .8rem; }
.cf-toggle { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.25rem; min-height: 44px; padding: .45rem 1rem .45rem .7rem; border-radius: 999px; border: 2px solid rgba(251, 241, 228, .5); background: transparent; color: var(--cream); font-family: var(--font-display); font-weight: 700; font-size: .92rem; cursor: pointer; }
.cf-toggle:hover { border-color: var(--sun); color: var(--sun); }
.cf-toggle-ico { width: 14px; height: 14px; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.cf-toggle[aria-pressed="true"] .cf-toggle-ico { background: currentColor; clip-path: polygon(10% 0, 100% 50%, 10% 100%); }

/* ---------- Foodservice band ---------- */
.fsb { padding: var(--section-y) 0; background: radial-gradient(70% 70% at 90% 20%, var(--acai-mid), transparent 70%), var(--acai); }
.fsb-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 3.5rem; align-items: center; }
@media (min-width: 960px) { .fsb-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.fsb-copy h2 { font-size: var(--t-h2); max-width: 14ch; }
.fsb-spec { list-style: none; margin: 1.4rem 0 1.6rem; padding: 0; display: grid; gap: .1rem; max-width: 34rem; }
.fsb-spec li { padding: .7rem 0; border-top: 1px solid rgba(251, 241, 228, .2); font-size: 1.02rem; }
.fsb-spec li:last-child { border-bottom: 1px solid rgba(251, 241, 228, .2); }
.fsb-spec b { color: var(--sun); font-family: var(--font-display); font-weight: 800; margin-right: .3rem; }
.fsb-note { margin-top: 1rem; color: rgba(251, 241, 228, .82); }
.fsb-art { position: relative; margin: 0 auto; width: min(100%, 520px); }
.fsb-tile { display: block; width: 82%; border-radius: var(--radius-lg); background: var(--white); padding: 6%; box-shadow: var(--tile-shadow); }
.fsb-bowl { position: absolute; right: 0; bottom: 14%; width: 42%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 6px var(--acai), var(--tile-shadow); }
.fsb-art figcaption { margin-top: .8rem; color: rgba(251, 241, 228, .8); }

/* A bright recipe campaign, using the same closed packs as the bowl studio. */
.page-home #serve { background:#c51157; color:var(--cream); --focus:var(--cream); }
.page-home .si-steps-media { position:relative; display:block; padding:4rem 1rem 1.5rem; background:var(--recipe-bg,#D69B49); color:var(--recipe-fg,var(--ink)); border-radius:24px; }
.page-home .si-steps-media img { width:72%; height:clamp(280px,32vw,390px); aspect-ratio:auto; object-fit:contain; margin:0 auto; filter:drop-shadow(0 16px 16px rgba(31,11,61,.18)); }
.si-preview-tag { position:absolute; left:20px; top:24px; color:inherit; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.si-preview-title { display:block; text-align:center; font-family:var(--font-display); font-size:clamp(1.7rem,3vw,2.3rem); font-weight:800; line-height:1; letter-spacing:-.03em; color:inherit; padding:.6rem .5rem 0; }
.page-home .si-more-list img { background:rgba(31,11,61,.12); object-fit:contain; padding:.6rem; }

.page-home #serve .eyebrow-light { color:var(--cream); }
.page-home #serve .si-steps-media,.page-home #serve .si-steps-media:hover { text-decoration:none; color:var(--recipe-fg,var(--ink)); }
.page-home .si-bowl-render { display:block; position:relative; aspect-ratio:1; width:100%; margin:-1.5rem 0; }
.page-home .si-bowl-render img { position:absolute; inset:0; width:100%; height:100%; margin:0; aspect-ratio:1; filter:none; }

/* Older Safari: same form, fixed modal, independent of the top-layer API. */
.lx:not([open]) { display:none; }
.lx-fallback-backdrop { position:fixed; inset:0; z-index:10000; background:rgba(24,7,44,.66); }
.lx.lx-fallback[open] { display:block; position:fixed; inset:50% auto auto 50%; transform:translate(-50%,-50%); margin:0; z-index:10001; }
@media (max-width:599px) { .lx.lx-fallback[open] { inset:auto 0 0; transform:none; } }

/* ---- src/css/21-home-range.css ---- */
/* Home: the whole range, composed from the original closed-pack model renders. */
.hx { --hx-bg: #36134d; background: var(--hx-bg); min-height: 0; display: block; }
.hx-grid { position: relative; display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); align-items: center; gap: 0 1.5rem; padding-top: clamp(2.5rem, 5vw, 5rem); padding-bottom: 3rem; min-height: min(calc(100svh - var(--header-h)), 880px); }
.hx-copy { position: relative; display: block; max-width: none; z-index: 2; }
.hx-kicker { color: #dcff70; font-size: .75rem; letter-spacing: .14em; margin-bottom: 1.2rem; }
.hx-dot { display: none; }
.hx-h { font-size: clamp(4rem, 7.7vw, 7.4rem); line-height: .89; letter-spacing: -.055em; max-width: none; text-wrap: initial; }
.hx-accent { color: #dcff70; }
.hx-lede { margin-top: 1.7rem; max-width: 31ch; color: var(--cream); font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.5; }
.hx-ctas { margin-top: 1.7rem; gap: .65rem; }
.hx-join { background: #dcff70 !important; color: #251039 !important; box-shadow: none; }
.hx-finder { display: inline-flex; align-items: center; justify-content: center; padding: .8rem 1.4rem; min-height: 56px; border: 1px solid rgba(251,241,228,.5); border-radius: 999px; color: var(--cream); text-decoration: none; font-family: var(--font-display); font-weight: 700; }
.hx-finder:hover { background: var(--cream); color: #251039; }
.hx-finder:focus-visible { outline: 3px solid #dcff70; outline-offset: 4px; }
.hx-launch { font-size: .86rem; margin-top: 1.2rem; color: rgba(251,241,228,.82); }
.hx-launch a { display: inline-flex; align-items: center; min-height: 44px; color: #dcff70; font-weight: 700; }
.hx-scene { position: relative; inset: auto; z-index: 1; margin: 0; align-self: center; }
.hx-scene::after { content: none; }
.hx-scene picture { position: relative; inset: auto; aspect-ratio: 1920 / 1824; -webkit-mask-image: none; mask-image: none; }
.hx-img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; animation: none; }
.hx-range-label { margin: 0 2rem -.25rem 0; text-align: right; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); }
.hx-note { position: static; max-width: none; margin: .3rem 2rem 0 0; text-align: right; color: rgba(251,241,228,.8); font-size: .68rem; }
.hx-range { position: relative; overflow: clip; }
.hx-motion { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; opacity:0; }
.hx-range.has-range-motion .hx-motion { opacity:1; }
.hx-motion-toggle { position:absolute; right:1%; bottom:1%; z-index:6; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:44px; padding:.5rem .85rem; border:1px solid #a395b0; border-radius:999px; background:#36134de8; color:#fbf1e4; font-family:var(--font-display); font-weight:700; font-size:.72rem; cursor:pointer; }
.hx-motion-toggle:hover { background:#fbf1e4; color:#251039; }
.hx-motion-toggle:focus-visible { outline:3px solid #dcff70; outline-offset:3px; }
.hx-pack-links { list-style: none; padding: 0; margin: 0; position: absolute; inset: 0; }
.hx-pack-link { position: absolute; left: calc(var(--x) + 4%); top: calc(var(--y) + 4%); z-index: var(--z); width: 18%; height: 24%; transform: none; display: block; border-radius: 10%; }
.hx-pack-link:hover, .hx-pack-link:focus-visible { outline: 2px solid #dcff70; outline-offset: -3px; }
.hx-pack-link span { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: max-content; max-width: 220px; padding: .5rem .7rem; border-radius: .6rem; background: #dcff70; color: #251039; font-size: .78rem; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .15s; }
.hx-pack-link:hover span, .hx-pack-link:focus-visible span { opacity: 1; }
@media (max-width: 959px) {
  .hx-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding-top: 1.7rem; padding-bottom: 1.6rem; }
  .hx-copy { display: contents; }
  .hx-kicker { order: 1; margin: 0 0 .8rem; font-size: .68rem; }
  .hx-h { order: 2; font-size: clamp(3.6rem, 11.5vw, 5.5rem); }
  .hx-scene { order: 5; width: 100%; margin: 1rem 0 .4rem; }
  .hx-range-label { margin-right: 0; font-size: .63rem; }
  .hx-scene picture { aspect-ratio: 1920 / 1824; }
  .hx-note { margin-right: 0; font-size: .64rem; }
  .hx-lede { order: 3; margin: .8rem 0 0; max-width: 35ch; font-size: 1rem; }
  .hx-ctas { order: 4; margin: 1.1rem 0 0; width: auto; gap: .6rem; }
  .hx-join.btn-lg, .hx-finder { flex: 1 1 auto; min-height: 50px; font-size: .94rem; padding: .7rem 1.1rem; }
  .hx-launch { order: 6; margin: .45rem 0 0; font-size: .82rem; }
  .hx-pack-link span { font-size: .68rem; max-width: 120px; }
}
@media (min-width: 600px) and (max-width: 959px) {
  .hx-scene { width: min(100%, 560px); margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) { .hx-pack-link span { transition: none; } }

.hx-join::after { content: ""; width: 16px; height: 16px; margin-left: .5rem; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19L19 5M5 5h14v14' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* A visible invitation to interact, followed by the original rotatable pack. */
.hx-mode-slot { min-height:72px; }
.hx-modes { display:flex; justify-content:center; gap:.3rem; margin:0 auto .7rem; width:max-content; max-width:100%; padding:.3rem; border:1px solid #fbf1e44d; border-radius:999px; }
.hx-modes button { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; border:0; border-radius:999px; background:transparent; color:var(--cream); font-family:var(--font-display); font-weight:700; font-size:.92rem; padding:.6rem 1.1rem; cursor:pointer; }
.hx-modes button[aria-pressed="true"] { background:#dcff70; color:#251039; }
.hx-modes button:hover { box-shadow:inset 0 0 0 1px var(--cream); }
.hx-modes button:focus-visible,.hx-pick:focus-visible { outline:3px solid #dcff70; outline-offset:4px; }
.hx-range { transition:transform .4s ease-out; transform-origin:center; }
.hx-solo { position:relative; isolation:isolate; aspect-ratio:1920 / 1824; display:grid; grid-template-rows:minmax(0,1fr) auto; align-items:center; }
.hx-solo::before { content:""; position:absolute; inset:10% 12% 12%; border-radius:50%; background:radial-gradient(ellipse,var(--solo-color,#D69B49),transparent 70%); opacity:.4; z-index:-1; }
.hx-flavor-word { position:absolute; top:6%; left:3%; right:3%; text-align:center; font-family:var(--font-display); font-weight:800; font-size:clamp(2.3rem,6vw,5.4rem); line-height:.95; letter-spacing:-.055em; color:var(--solo-color,#D69B49); opacity:.9; overflow-wrap:anywhere; }
.hx-solo-pack { grid-area:1/1; display:block; width:70%; height:77%; margin:auto; object-fit:contain; filter:drop-shadow(0 20px 28px #13032160); }
/* The caption owns its natural row, so longer names and native links never cover viewer controls. */
.hx-model { position:relative; inset:auto; grid-area:1/1; height:95%; align-self:end; }
.hx-model .pack3d:not(.p3-full) { width:100%; height:100%; border:0; border-radius:0; background:transparent; box-shadow:none; aspect-ratio:auto; }
.hx-model .pack3d:not(.p3-full) .p3-hint { top:20%; bottom:auto; }
.hx-model .pack3d:not(.p3-full) .p3-views { bottom:74px; }
.hx-model .pack3d:not(.p3-full) .p3-open { bottom:14px; }
.hx-solo-info { position:static; grid-area:2/1; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; column-gap:1rem; font-family:var(--font-display); font-size:.9rem; font-weight:700; }
.hx-solo-info a { display:inline-flex; align-items:center; min-height:44px; color:#dcff70; text-underline-offset:.3em; }
.hx-solo-note { display:block; width:100%; text-align:center; font-family:var(--font-body); font-size:.75rem; }
.hx-deck { margin:.7rem auto 0; max-width:550px; }
.hx-deck-top { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.hx-deck-top p { margin:0; font-size:.75rem; font-weight:600; }
.hx-deck-top button { border:0; border-bottom:1px solid currentColor; background:transparent; color:#dcff70; min-height:44px; font-size:.8rem; font-weight:700; cursor:pointer; }
.hx-picks { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:4px; }
.hx-pick { display:grid; place-items:center; padding:2px; min-height:48px; min-width:0; border:2px solid transparent; border-radius:50%; background:transparent; cursor:pointer; transition:transform .2s; }
.hx-pick img { width:100%; height:auto; max-width:48px; aspect-ratio:1; object-fit:contain; }
.hx-pick[aria-pressed="true"] { border-color:#dcff70; transform:translateY(-3px); }
.hx-pick:hover { transform:translateY(-3px); }
.hx-studio-status { font-size:.76rem; line-height:1.45; text-align:center; margin:.3rem 0; }
.hx-studio-status:empty { display:none; }
.hx-scene .hx-note { text-align:center; margin:.6rem 0 0; }
.hx-scene.is-model-ready .hx-solo-pack,
.hx-scene.is-model-ready .hx-flavor-word { visibility:hidden; }
html.p3-lock .hx-model { z-index:9999; }
html.p3-lock .hx-scene { z-index:9999; }
html.p3-lock .hx-solo { z-index:9999; }
.hx-model .pack3d.p3-full { background:var(--p3bg,var(--night)); transition:none; }
.pack3d.p3-full .p3-done { min-height:44px; }
@media (orientation:landscape) and (max-height:480px) { .pack3d.p3-full .p3-fhelp { display:none; } }
@media (max-width:959px) {
 .hx-mode-slot { min-height:61px; }
 .hx-modes button { min-height:44px; font-size:.78rem; padding:.5rem .75rem; }
 .hx-modes { margin-bottom:.3rem; }
 .hx-flavor-word { font-size:clamp(2.1rem,8vw,4rem); }
 .hx-solo-info { font-size:.78rem; }
 .hx-picks { grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px 8px; max-width:320px; margin:auto; }
 .hx-pick { min-height:48px; border-radius:50%; }
 .hx-pick img { max-width:44px; }
 .hx-deck { margin-top:.5rem; }
}
@media (prefers-reduced-motion:reduce) { .hx-range,.hx-pick { transition:none; } }

/* ---- src/css/22-hero-campaign.css ---- */
/* One campaign frame. Product truth is unchanged; motion changes scenes only. */
.hx { --hx-bg:#251039; background:var(--hx-bg); color:#fbf1e4; }
.hx-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.06fr); gap:2rem clamp(2rem,5vw,5rem); min-height:0; padding-top:clamp(1.5rem,3vw,3rem); padding-bottom:clamp(2rem,4vw,4rem); }
.hx-copy { padding:0; }
.hx-kicker { color:#dcff70; font-weight:700; letter-spacing:.12em; }
.hx-h { font-size:clamp(3.8rem,6.3vw,6.3rem); color:#fbf1e4; line-height:.93; margin:0; }
.hx-accent { color:#dcff70; }
.hx-lede { color:#fbf1e4; max-width:31ch; margin-top:1.4rem; }
.hx-ctas { margin-top:1.5rem; }
.hx-join { min-height:52px; }
.hx-scene { width:100%; max-width:560px; justify-self:end; margin:0; }
.hc-carousel { overflow:visible; transition:none; }
.hc-media { position:relative; aspect-ratio:4/5; border-radius:0; overflow:hidden; background:#251039; touch-action:pan-y; }
.hc-slide { position:absolute; inset:0; }
.hx-scene .hc-slide picture { display:block; position:static; width:100%; height:100%; aspect-ratio:auto; }
.hc-slide picture img { display:block; width:100%; height:100%; object-fit:cover; }
.hc-mural a { display:block; width:100%; height:100%; }
.hc-mural img { object-position:center; }
.hc-mural a:focus-visible { outline:4px solid #dcff70; outline-offset:-6px; }
.hc-lineup { isolation:isolate; background:radial-gradient(ellipse at 55% 60%,#ffffff18 0%,transparent 70%),var(--scene-bg,#501765); color:var(--scene-fg,#fbf1e4); }
.hc-lineup-head { position:absolute; top:7%; left:7%; right:7%; }
.hc-lineup-head > span { display:block; max-width:38ch; font:700 .65rem var(--font-body); letter-spacing:.15em; margin-bottom:.8rem; }
.hc-lineup-head strong { display:block; font:800 clamp(3rem,4.7vw,4.8rem)/.9 var(--font-display); letter-spacing:-.055em; }
.hc-products { position:absolute; inset:32% 2% 10%; margin:0; padding:0; list-style:none; display:flex; align-items:center; justify-content:center; }
.hc-lineup.has-qualifier .hc-products { bottom:24%; }
.hc-products li { flex:0 0 50%; position:relative; min-width:0; }
.hc-products li:nth-child(2) { transform:translateY(8%); }
.hc-lineup.has-qualifier .hc-products li:nth-child(2) { transform:none; }
.hc-format-label { display:block; text-align:center; color:inherit; font:700 .72rem var(--font-body); margin-top:-.2rem; }
.hc-products a { color:inherit; display:block; min-height:44px; border-radius:0; }
.hc-products img { display:block; width:100%; height:auto; filter:drop-shadow(0 16px 10px #10022050); }
.hc-qualifier { position:absolute; bottom:61px; left:7%; right:7%; margin:0; color:inherit; font-size:.74rem; line-height:1.35; }
.hc-products a:focus-visible { outline:3px solid currentColor; outline-offset:2px; }
.hc-controls { position:absolute; z-index:2; bottom:8px; left:8px; right:8px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hc-navigation { display:flex; padding:0 3px; background:#251039d9; border-radius:99px; }
.hc-controls button { display:grid; place-items:center; width:44px; height:44px; min-height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:#fbf1e4; cursor:pointer; }
.hc-count { align-self:center; padding:0 .2rem; font:700 .66rem var(--font-body); letter-spacing:.08em; color:#fbf1e4; }
.hc-controls .hc-play { background:#251039d9; }
.hc-controls button:hover { background:#251039; }
.hc-controls button:focus-visible { outline:3px solid #dcff70; outline-offset:2px; }
.hc-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hx-mode-slot { min-height:44px; margin:0; }
.hx-modes { display:flex; gap:1rem; justify-content:flex-end; margin:0; padding:0; width:auto; max-width:100%; border:0; border-radius:0; }
.hx-modes button { display:inline-flex; justify-content:center; align-items:center; gap:.5rem; min-height:44px; padding:.4rem 0; background:transparent; border:0; border-radius:0; color:#fbf1e4; font:700 .8rem var(--font-display); }
.hx-modes button[aria-pressed="true"] { background:transparent; color:#fbf1e4; }
.hx-modes button:hover { box-shadow:none; text-decoration:underline; text-underline-offset:.25em; }
.hx-modes button:focus-visible { outline:2px solid #dcff70; outline-offset:3px; }
.hx-scene .hx-note { min-height:2.8em; margin:0; color:#d7cce0; text-align:right; font-size:.62rem; line-height:1.4; }
.hx-solo { aspect-ratio:4/5; }
.hx-solo-info { padding:0 .4rem; color:#fbf1e4; }
.hx-solo-info a,.hx-deck-top button { color:#dcff70; }
.hx-deck { margin-top:1rem; }
.hx-pick[aria-pressed="true"] { border-color:#dcff70; }
@media(max-width:959px) {
 .hx-grid { display:flex; padding-top:0; padding-bottom:2rem; gap:0; }
 .hx-copy { display:contents; }
 .hx-scene { order:1; align-self:center; width:100vw; max-width:560px; margin:0 calc(-1 * var(--gutter)) 0; }
 .hx-kicker { order:2; font-size:.64rem; margin:.7rem 0 .7rem; }
 .hx-h { order:3; font-size:clamp(3rem,11vw,5.5rem); }
 .hx-lede { order:4; font-size:1rem; margin:1rem 0 0; max-width:34ch; }
 .hx-ctas { order:5; margin:1.2rem 0 0; }
 .hx-join.btn-lg { flex:0 1 auto; padding:.8rem 1.2rem; }
 .hx-mode-slot,.hx-note { padding:0 var(--gutter); }
 .hx-scene .hx-note { min-height:2.8em; text-align:left; }
 .hx-modes { justify-content:flex-start; }
 .hc-lineup-head strong { font-size:clamp(3.4rem,12vw,5rem); }
 .hc-lineup-head > span { font-size:.57rem; }
 .hx-solo { margin:0 var(--gutter); }
 .hx-deck { padding:0 var(--gutter); }
}
@media(min-width:600px) and (max-width:959px) {
 .hx-scene { margin:0 auto; }
 .hx-kicker { margin-top:1.1rem; }
}
@media(prefers-reduced-motion:no-preference) {
 .hc-slide:not([hidden]) { animation:hc-appear .35s ease-out; }
 .hc-carousel[data-static-motion="false"] .hc-duo:not([hidden]) .hc-products a { --arrival-angle:-4deg; animation:hc-pack-arrival .72s cubic-bezier(.22,1,.36,1) both; }
 .hc-carousel[data-static-motion="false"] .hc-duo:not([hidden]) .hc-products li:nth-child(2) a { --arrival-angle:4deg; animation-delay:80ms; }
 @keyframes hc-appear { from{opacity:.3;} to{opacity:1;} }
 @keyframes hc-pack-arrival { from{opacity:.4;transform:translate3d(0,28px,0) scale(.84) rotate(var(--arrival-angle));} to{opacity:1;transform:none;} }
}

/* ---- src/css/23-launch-club.css ---- */
/* Consumer availability updates; a separate sales path for trade visitors. */
.launch-campaign { padding:clamp(3rem,7vw,6.5rem) 0; background:#c70861; color:#fbf1e4; }
.launch-campaign-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.launch-campaign .eyebrow { color:#fbf1e4; }
.launch-campaign h2 { max-width:8ch; font-size:clamp(3.4rem,6vw,6rem); line-height:.92; letter-spacing:-.055em; margin:.7rem 0 1.4rem; }
.launch-campaign-copy>p:not(.eyebrow) { max-width:34ch; font-size:1.12rem; }
.launch-campaign-copy .btn { margin-top:1.2rem; background:#dcff70; color:#251039; border-color:#dcff70; }
.launch-campaign-copy .launch-campaign-note { margin:1.1rem 0 0; font-size:.8rem; }
.launch-campaign a:not(.btn) { color:inherit; text-underline-offset:.25em; }
.launch-campaign-media { margin:0; position:relative; }
.launch-campaign-media picture { display:block; overflow:hidden; border-radius:1.2rem; aspect-ratio:1600/2160; background:#cf6b57; }
.launch-campaign-media img { display:block; width:100%; height:100%; object-fit:cover; }
.launch-campaign-media figcaption { margin:.7rem 0 0; font-size:.67rem; color:#fbf1e4; }
.social-world { padding:clamp(3rem,7vw,6rem) 0; background:#fbf1e4; color:#251039; }
.social-world-head { display:flex; align-items:end; justify-content:space-between; gap:1.5rem; margin-bottom:2rem; }
.social-world h2 { font-size:clamp(2.5rem,5vw,4.8rem); line-height:1; letter-spacing:-.05em; margin:.6rem 0 0; }
.social-world-head>p { max-width:28ch; margin:0; }
.social-world-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; list-style:none; padding:0; margin:0; }
.social-world-grid a { display:block; color:inherit; text-decoration:none; }
.social-world-grid picture { display:block; aspect-ratio:4/5; overflow:hidden; border-radius:1rem; background:#eadcc9; }
.social-world-grid img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease-out; }
.social-world-grid a:hover img { transform:scale(1.025); }
.social-world-grid a:focus-visible { outline:3px solid #7a2a94; outline-offset:6px; border-radius:1rem; }
.social-world-name { display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:52px; font-family:var(--font-display); font-weight:800; }
.social-world-name span { font-size:1.25rem; }
.social-world-note { margin:1.2rem 0 0; font-size:.8rem; }
.lx-business { display:block; margin-top:1rem; padding:.7rem 0; font-size:.85rem; font-weight:700; color:#251039; text-underline-offset:.2em; }
.ft-business-links { display:grid; justify-items:start; gap:.6rem; }
.ft-business-links>a:not(.btn) { display:inline-flex; align-items:center; min-height:44px; color:inherit; text-underline-offset:.25em; }
.lx-submit { background:#dcff70; border-color:#dcff70; color:#251039; }
.wb-club-kicker { font-size:.73rem; font-weight:800; text-transform:uppercase; letter-spacing:.13em; }
.launch-terms { background:#fbf1e4; }
.launch-terms a { text-underline-offset:.2em; }
@media (max-width:959px) {
 .launch-campaign-grid { gap:2rem; }
 .launch-campaign h2 { font-size:clamp(3rem,6.5vw,4rem); }
 .social-world-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
}
@media (max-width:599px) {
 .launch-campaign-grid { grid-template-columns:1fr; }
 .launch-campaign h2 { max-width:10ch; font-size:3.5rem; }
 .launch-campaign-copy>p:not(.eyebrow) { font-size:1rem; }
 .launch-campaign-copy .btn { width:100%; }
 .launch-campaign-media { margin:0 .5rem; }
 .launch-campaign-media picture { border-radius:1rem; }
 .social-world-head { display:block; }
 .social-world-head>p { margin-top:1rem; }
 .social-world-grid { gap:.8rem; }
}
@media (prefers-reduced-motion:reduce) { .social-world-grid img { transition:none; } }

.launch-campaign-media a { display:block; border-radius:1.2rem; }
.launch-campaign-media a:focus-visible { outline:3px solid #dcff70; outline-offset:5px; }

/* ---- src/css/24-home-paths.css ---- */
/* Home product paths (owner, 6 Oct): six linked stories in the existing banner.
   Three visible on desktop, two on tablets, a native swipe row on phones. */
.hx-paths { display: flex; align-items: center; gap: .75rem; padding: .9rem var(--gutter); background: #dcff70; color: #251039; }
.hx-paths-track { position: relative; flex: 1; min-width: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: .35rem; gap: .9rem; padding: .35rem; max-width: 72rem; margin: 0 auto; overscroll-behavior-x: contain; }
.hx-path { flex: 0 0 calc((100% - 1.8rem) / 3); min-width: 0; scroll-snap-align: start; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: .85rem; padding: .55rem 1rem .55rem .55rem; border: 2px solid #251039; border-radius: 1.1rem; background: rgba(255, 255, 255, .4); color: inherit; text-decoration: none; transition: background-color .3s ease, color .3s ease, transform .3s ease; }
.hx-path img { grid-row: 1 / 3; width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; background: #fff; }
.hx-path-t { align-self: end; font-family: var(--font-display); font-size: clamp(.85rem, 1.3vw, 1.05rem); font-weight: 800; letter-spacing: .02em; line-height: 1.15; text-transform: uppercase; }
.hx-path-d { align-self: start; font-size: .8rem; line-height: 1.3; opacity: .85; }
.hx-path-go { grid-column: 3; grid-row: 1 / 3; font-size: 1.3rem; font-weight: 800; transition: transform .3s ease; }
.hx-path.is-lit, .hx-path:hover, .hx-path:focus-visible { background: #251039; color: #dcff70; transform: translateY(-2px); }
.hx-path.is-lit .hx-path-go, .hx-path:hover .hx-path-go, .hx-path:focus-visible .hx-path-go { transform: translateX(4px); }
.hx-path:focus-visible { outline: 3px solid #251039; outline-offset: 3px; }
.hx-paths-controls { flex: none; display: flex; align-items: center; gap: .35rem; }
.hx-paths-play, .hx-paths-step { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid #251039; border-radius: 50%; background: transparent; color: #251039; cursor: pointer; }
.hx-paths-step { font-size: 1.3rem; }
.hx-paths-play:hover, .hx-paths-step:hover, .hx-paths-play[aria-pressed="false"] { background: #251039; color: #dcff70; }
.hx-paths-play:focus-visible, .hx-paths-step:focus-visible { outline: 3px solid #251039; outline-offset: 3px; }
@media (min-width: 760px) and (max-width: 1099px) { .hx-path { flex-basis: calc((100% - .9rem) / 2); } }
@media (max-width: 759px) {
  .hx-paths { flex-direction: column; align-items: stretch; padding: .8rem 0 .8rem 1rem; gap: .5rem; }
  .hx-paths-track { width: 100%; scroll-padding-left: .35rem; gap: .65rem; padding-right: 1rem; scrollbar-width: none; }
  .hx-paths-track::-webkit-scrollbar { display: none; }
  .hx-path { flex: 0 0 84%; scroll-snap-align: start; }
  .hx-paths-controls { justify-content: flex-end; margin-right: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .hx-path, .hx-path-go { transition: none; } .hx-path.is-lit, .hx-path:hover, .hx-path:focus-visible { transform: none; } }

/* ---- src/css/25-home-desktop-spacing.css ---- */
/* Owner (6 Oct): tighten desktop Home's empty space, retaining the original
   campaign frames, full 3:4 cafe photograph and existing phone layout. */
@media (min-width: 960px) {
  .page-home main { --section-y: clamp(2.25rem, 3vw, 3.5rem); }
  .page-home .hx-grid { padding-top: 1.25rem; padding-bottom: 1.5rem; }
  .page-home .hx-scene { max-width: 480px; }
  .page-home .fs-art { max-width: 440px; }
  .page-home .home-place-grid { grid-template-columns: min(42%, 420px) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
}

/* ---- src/css/30-flavor-stage.css ---- */
/* Home flavor stage: untouched colored campaign photography and its original
   curved shadow. Product links work with or without the discovery enhancement.
   Without JS it is a static Original Sensation stage and ten links to the flavor pages. */
.fs { --fs-dur: .55s; position: relative; overflow: hidden; padding: var(--section-y) 0 calc(var(--section-y) * .7);
  background: var(--fbg); color: var(--ffg); --focus: var(--ffg);
  transition: background-color var(--fs-dur) var(--ease-out), color var(--fs-dur) var(--ease-out); }
.fs-wrap { position: relative; }
.fs-head { margin-bottom: clamp(1.25rem, 3vw, 2.5rem); }
.fs-kicker { margin: 0 0 .5rem; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; }
.fs-h { font-size: var(--t-h2); line-height: .95; margin: 0; color: inherit; }

.fs-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 3rem; align-items: center; }
@media (min-width: 960px) { .fs-stage { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }

/* Each original campaign image has its own full frame; never overlay the cup. */
.fs-art { position:relative; width:100%; max-width:520px; justify-self:center; touch-action:pan-y; padding-bottom:58px; }
.fs-product { position:relative; display:block; width:100%; aspect-ratio:1600/2160; color:inherit; border-radius:20px; overflow:hidden; }
.fs-product:focus-visible { outline:3px solid currentColor; outline-offset:5px; }
.fs-layer { position:absolute; inset:0; margin:0; }
.fs-layer picture,.fs-pack { display:block; width:100%; height:100%; }
.fs-pack { object-fit:contain; }
.fs-layer:not(.is-in) { opacity:0; pointer-events:none; }
.fs-layer.is-in { opacity:1; }
@media (prefers-reduced-motion:no-preference) { .fs-layer { transition:opacity .3s ease; } }
@media (prefers-reduced-motion:reduce) { .fs { --fs-dur:0s; } }

/* The words */
.fs-info { max-width: 34rem; }
.fs-line { margin: 0 0 .35rem; font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; opacity:1; }
.fs-name { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); line-height: .96; letter-spacing: -.035em; margin: 0 0 .7rem; color: inherit; }
.fs-taste { font-size: var(--t-lede); line-height: 1.4; margin: 0 0 .3rem; font-weight: 500; }
.fs-zs { margin: 0 0 .3rem; font-weight: 700; }
.fs-fact { margin: 0 0 1rem; font-size: .98rem; opacity: .92; }
.fs-avail { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; padding: .45rem .95rem .45rem .7rem; border-radius: 999px; border: 2px solid currentColor; font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1.2; }
.fs-avail-dot { width: .62rem; height: .62rem; border-radius: 50%; background: currentColor; flex: none; }
.fs-avail[data-state="first"] { background: var(--ffg); color: var(--fbg); border-color: var(--ffg); }
.fs-avail[data-state="follows"] .fs-avail-dot { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.fs-tags { list-style: none; margin: 0 0 1.3rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.fs-tags li { padding: .25rem .65rem; border-radius: 999px; font-size: .84rem; font-weight: 600; background: rgba(255, 255, 255, .26); box-shadow: inset 0 0 0 1px rgba(31, 11, 61, .12); }
.fs-ctas { display: flex; flex-wrap: wrap; gap: .65rem; }
.fs-build { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; margin-top: .5rem; color: inherit; font-weight: 700; text-underline-offset: .2em; }
.fs-build:hover { color: inherit; text-decoration-thickness: 2px; }
.fs-build:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 4px; }

/* The picker: ten lids. A scrolling rail on phones, one row on wide screens. */
.fs-picker { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.fs-browse { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; padding-bottom: .55rem; border-bottom: 1px solid currentColor; }
.fs-position { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.fs-count-label { margin-left: .45rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.fs-arrows { display: flex; gap: .5rem; }
.fs-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background-color var(--dur-1) ease, color var(--dur-1) ease; }
.fs-arrow:hover { background: var(--ffg); color: var(--fbg); border-color: var(--ffg); }
.fs-arrow:focus-visible { outline: 3px solid var(--ffg); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .fs-arrow { transition: none; } }
.fs-rail { list-style: none; margin: 0 calc(var(--gutter) * -1); padding: .5rem var(--gutter) .8rem; display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.fs-rail::-webkit-scrollbar { display: none; }
@media (min-width: 1100px) { .fs-rail { justify-content: space-between; overflow: visible; margin: 0; padding: .5rem 0; } }
.fs-rail li { flex: none; scroll-snap-align: center; }
.fs-chip { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 104px; padding: .55rem .3rem .6rem; border-radius: 18px; text-decoration: none; color: inherit; text-align: center; transition: background-color var(--dur-1) ease, transform var(--dur-2) var(--ease-out); }
.fs-chip:hover { background: rgba(255, 255, 255, .2); color: inherit; }
.fs-lid { width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .7), 0 8px 16px -8px rgba(0, 0, 0, .45); transition: box-shadow var(--dur-1) ease, transform var(--dur-2) var(--ease-spring); }
.fs-chip-name { font-size: .8rem; font-weight: 700; line-height: 1.15; }
.fs-chip-badge { position: absolute; top: .1rem; right: .35rem; padding: .1rem .38rem; border-radius: 999px; background: var(--ink); color: var(--sun); font-family: var(--font-display); font-weight: 800; font-size: .6rem; letter-spacing: .02em; }
.fs-chip[aria-checked="true"], .fs-chip[aria-current="true"] { background: var(--ffg); color: var(--fbg); }
.fs-chip[aria-checked="true"] .fs-lid, .fs-chip[aria-current="true"] .fs-lid { box-shadow: 0 0 0 3px var(--fbg), 0 0 0 6px var(--ffg); }
@media (prefers-reduced-motion: no-preference) {
  .fs-chip:hover .fs-lid { transform: rotate(-12deg) scale(1.05); }
  .fs-chip[aria-checked="true"] .fs-lid { transform: rotate(-8deg) scale(1.06); }
}
.fs-chip:focus-visible { outline: 3px solid var(--ffg); outline-offset: 2px; border-radius: 18px; }
.fs-foot { margin: 1rem 0 0; font-size: .92rem; max-width: 80ch; }
/* Phones: the lids sit right under the picture, so a tap changes what is on screen */
@media (max-width: 959px) {
  .fs-wrap { display: flex; flex-direction: column; }
  .fs-stage { display: contents; }
  .fs-head { order: 1; }
  .fs-art { order: 2; align-self: center; max-width:480px; }
  .fs-picker { order: 3; margin: .25rem 0 1.25rem; }
  .fs-info { order: 4; }
  .fs-foot { order: 5; }
}
.fs-foot a { color: inherit; font-weight: 700; }
.fs-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* The real 3D model shares the stage with its matching fast artwork. */
.fs-3d-host { position:absolute; inset:0 0 66px; z-index:3; }
.fs-3d-host .pack3d:not(.p3-full) { width:100%; height:100%; aspect-ratio:auto; border:0; border-radius:20px; box-shadow:none; background:transparent; }
.fs-3d-host .pack3d:not(.p3-full) .p3-views { bottom:64px; }
.fs-3d-host .pack3d:not(.p3-full) .p3-open { bottom:6px; }
.fs.is-3d .fs-product { visibility:hidden; }
.fs-3d-actions { position:absolute; bottom:0; left:0; right:0; z-index:4; display:grid; justify-items:center; }
.fs-3d-go { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:44px; padding:.6rem 1.1rem; border:1.5px solid currentColor; border-radius:999px; color:var(--ffg); background:var(--fbg); font-family:var(--font-display); font-weight:700; font-size:.9rem; cursor:pointer; }
.fs-3d-go:hover { background:var(--ffg); color:var(--fbg); }
.fs-3d-go:focus-visible { outline:3px solid var(--ffg); outline-offset:3px; }
.fs-3d-status { font-size:.78rem; text-align:center; margin:.2rem 0 0; }
.fs-3d-status:empty { display:none; }

html.p3-lock .fs-3d-actions { visibility:hidden; }
html.p3-lock .fs-3d-host { z-index:9999; }

/* ---- src/css/40-product.css ---- */
/* v38 Product pages (flavors/<slug>.html): hero (.ph), taste (.pt), pack gallery (.pgs/.pg), label facts (.pl),
   closing cards (.pcta), previous/next (.pn-v38). Flavor colour comes from --fbg/--ffg on the hero. */

/* ---------- Hero ---------- */
/* Clean source campaign frame; product photography and formats stay separate. */
.ph { position:relative; background:var(--cream); color:var(--ink); --focus:var(--ink); }
.ph::before { content:none; }
.ph-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem 4rem; align-items:center; padding-block:clamp(1.25rem,3vw,3rem); }
.ph .crumbs { margin:0 0 1rem; font-size:.85rem; }
.ph .crumbs a,.ph-jump a { color:inherit; }
.ph-eyebrow { margin:0 0 .6rem; font:700 .75rem var(--font-display); letter-spacing:.14em; text-transform:uppercase; }
.ph-h { font-size:clamp(2.8rem,5vw,5.2rem); line-height:.97; letter-spacing:-.045em; margin:0 0 1rem; max-width:12ch; color:inherit; }
.ph-taste { font-size:var(--t-lede); line-height:1.4; margin:0 0 1.4rem; max-width:32ch; }
.ph-zs { font-weight:700; margin:0 0 1rem; }
.ph-ctas { margin:0 0 1rem; }
.ph .btn-ink { background:var(--ink); color:var(--cream); }
.ph .btn-ghost { border-color:var(--ink); color:var(--ink); background:transparent; }
.ph-jump { display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; margin:1rem 0 0; font-size:.86rem; }
.ph-jump a { display:inline-flex; align-items:center; min-height:44px; font-weight:600; }
.ph-art { width:100%; max-width:480px; margin:0; justify-self:center; }
.ph-art a,.ph-art picture,.ph-art img { display:block; width:100%; height:auto; }
.ph-art a { border-radius:12px; overflow:hidden; }
.ph-art a:focus-visible { outline:3px solid var(--ink); outline-offset:5px; }
@media(min-width:960px) { .ph-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .ph-art { grid-column:1; grid-row:1; } .ph-copy { grid-column:2; grid-row:1; } }
@media(max-width:959px) {
 .ph-copy { display:contents; }
 .ph .crumbs { order:1; margin:0; }
 .ph-eyebrow { order:2; margin:0; }
 .ph-h { order:3; font-size:clamp(2.6rem,8vw,3.8rem); margin:0; }
 .ph-art { order:4; }
 .ph-taste { order:5; margin:.2rem 0 0; }
 .ph-zs { order:6; margin:0; }
 .ph-ctas { order:7; }
 .ph-ctas .btn { flex:1 1 auto; }
 .ph .flight-save { order:8; justify-self:start; }
 .ph-jump { order:9; margin:0; }
}

/* Flavor chips under the hero: v38 lids */
.chips-wrap .chip img { border-radius: 50%; }

/* ---------- Taste ---------- */
.pt { padding: var(--section-y) 0 calc(var(--section-y) * .75); background: var(--cream); }
.pt-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 4rem; align-items: center; }
@media (min-width: 900px) { .pt-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.pt-fruit { margin: 0; max-width: 480px; }
.pt-fruit img { width: 100%; border-radius: 50%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 0 0 8px var(--white), var(--tile-shadow); }
.pt-copy h2 { font-size: var(--t-h2); }
.pt-facts { margin: 1.5rem 0 0; display: grid; gap: 0; max-width: 40rem; }
.pt-facts > div { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.pt-facts > div:last-child { border-bottom: 1px solid var(--line); }
.pt-facts dt { font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acai); padding-top: .15rem; }
.pt-facts dd { margin: 0; }
.pt-bowl { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 3rem; align-items: center; padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: var(--radius-lg); background: var(--fbg); color: var(--ffg); --focus: var(--ffg); }
@media (min-width: 760px) { .pt-bowl { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } }
.pt-bowl .eyebrow { color: inherit; }
.pt-bowl-pic img { width: 100%; border-radius: 50%; box-shadow: var(--tile-shadow); }
.pt-bowl-h { font-size: var(--t-h3); margin: 0 0 .5rem; color: inherit; }

/* ---------- Pack gallery ---------- */
.pgs { padding: var(--section-y) 0; background: var(--paper); }
.pgs-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 4rem; align-items: start; }
@media (min-width: 960px) { .pgs-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; } }
.pgs-copy h2 { font-size: var(--t-h2); }
.pgs-formats { list-style: none; margin: 0 0 1rem; padding: 0; }
.pgs-formats li { display: grid; gap: .1rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.pgs-formats li:last-child { border-bottom: 1px solid var(--line); }
.pgs-formats b { font-family: var(--font-display); font-size: 1.1rem; }
.pgs-note { color: var(--muted); max-width: 46ch; }
.pgs-sheet a { font-weight: 700; }
.pg { display: grid; gap: .9rem; }
.pg-main { position: relative; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--p3bg); transition: background-color var(--dur-2) ease; }
.pg-main.is-white { box-shadow: inset 0 0 0 1.5px var(--line); }
/* A cup link (?format=cup#cup) lands on this gallery, below the pint hero. In a page transition the catalog's cup
   picture grows into the gallery (fl-<slug>-cup), and the hero, which shares the pint card's name, stays out of it:
   otherwise the pint card would fly to the hero above the screen. The !important beats the hero's inline name.
   .is-arrival is set by the script right after the gallery (tools/generate.mjs), before the first paint; :target
   only applies once the whole page is parsed, often after the transition has captured the new page. */
.pg:target .pg-main, .pg.is-arrival .pg-main { view-transition-name: var(--pg-vt, none); }
main:has(.pg:target, .pg.is-arrival) .ph { view-transition-name: none !important; }
/* A cup landing's render hold (rel=expect, inserted by CUP_HOLD in tools/generate.mjs) is ignored by WebKit, which can
   paint the pint hero before the gallery has arrived. CUP_HOLD also sets html.cup-hold: nothing in main is painted until
   the arrival script has scrolled to the cup and lifted it (in the same task), or until the page has been parsed (and
   on pageshow). No timer, so a long stall cannot reveal the hero. The header stays. Not motion. */
.cup-hold main { visibility: hidden; }
.pg-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Without JavaScript the gallery cannot switch packs, so a cup link (#cup) shows the cup still in place of the pint
   (and the cup thumb looks chosen). The image is in a <noscript>: with JavaScript it does not exist, so it is never
   fetched, and WebKit cannot treat it as a lazy request for the cup URL, which would drop the cup preload of a cup
   landing (CUP_HOLD). It is not a .pg-still: the gallery script and its tests keep a single still.
   The pack buttons carry no aria-pressed until JavaScript gives it (tools/generate.mjs), so assistive technology is
   never told the pint is chosen while the cup is shown; the shown still's alt names the pack. Until then the pint
   looks chosen (.pg-thumb rules below), or the cup on a cup link without JavaScript. */
.pg-nojs-cup { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
html:not(.js) .pg:target .pg-nojs-cup { display: block; }
html:not(.js) .pg:target .pg-still { display: none; }
html:not(.js) .pg:target .pg-thumb[data-view="pint"] { border-color: var(--line); box-shadow: none; }
html:not(.js) .pg:target .pg-thumb[data-view="cup"] { border-color: var(--ink); box-shadow: 0 8px 18px -12px rgba(31, 11, 61, .6); }
/* Zero Sugar: the pack's claim is never on screen without its qualifier, including on a cup link's landing. */
.pg-note { margin: 0; font-weight: 700; font-size: .92rem; }
.pg-main .pack3d:not(.p3-full) { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
.pg-3d { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: .5rem; color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: .98rem; text-decoration: underline; text-underline-offset: .2em; }
.pg-3d:hover { color: var(--acai-mid); }
.pg-3d:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.pg-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.pg-thumb { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 64px; padding: .4rem .7rem .4rem .4rem; border-radius: 16px; border: 2px solid var(--line); background: var(--white); color: var(--ink); font-weight: 700; font-size: .92rem; text-align: left; cursor: pointer; }
.pg-thumb img { width: 48px; height: 48px; border-radius: 10px; object-fit: contain; background: var(--paper); flex: none; }
.pg-thumb[aria-pressed="true"], .pg-thumb[data-view="pint"]:not([aria-pressed]) { border-color: var(--ink); box-shadow: 0 8px 18px -12px rgba(31, 11, 61, .6); }
.pg-thumb:hover { border-color: var(--acai-mid); }
@media (max-width: 420px) { .pg-thumb { flex-direction: column; gap: .25rem; padding: .45rem; font-size: .8rem; text-align: center; } }

/* ---------- Label facts ---------- */
.pl { padding: var(--section-y) 0; background: var(--cream); }
.pl .section-head h2 { font-size: var(--t-h2); }
.pl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 900px) { .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; } }
.pl-card { padding: clamp(1.25rem, 2.5vw, 1.9rem); border-radius: var(--radius-lg); background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); }
.pl-card h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.pl-card h3:not(:first-child) { margin-top: 1.4rem; }
.pl-card p:last-child { margin-bottom: 0; }
.pl-nf { grid-row: span 2; }
.pl-src { margin-top: .9rem; }
.pl-tablewrap { overflow-x: auto; }
.pl-cert { width: 100%; font-size: .95rem; }
.pl-cert th, .pl-cert td { padding: .6rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pl-cert thead th { font-family: var(--font-display); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--acai); }
.pl-cert tbody th { font-weight: 600; }
.pl-cert th:last-child, .pl-cert td:last-child { width: 5rem; text-align: center; }
.pl-y { display: inline-flex; flex-direction: column; align-items: center; font-weight: 700; color: var(--leaf-deep); }
.pl-y::before { content: "✓"; }
.pl-n { color: var(--muted); }

/* The Nutrition Facts panel, drawn the way the label draws it */
.nf-tabs { display: none; gap: .4rem; margin: 0 0 1rem; }
.nf-tabs.is-live { display: flex; }
.nf-tabs [role="tab"] { min-height: 44px; padding: .45rem 1rem; border-radius: 999px; border: 2px solid var(--ink); background: transparent; color: var(--ink); font-weight: 700; cursor: pointer; }
.nf-tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--cream); }
.nf-tabs:not(.is-live) ~ .nfp + .nfp { margin-top: 1.25rem; }
.nfp { max-width: 22rem; padding: .35rem .55rem .5rem; border: 1px solid var(--ink); background: var(--white); color: #000; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.2; }
.nfp p { margin: 0; }
.nfp-t { font-size: 2rem; font-weight: 900; letter-spacing: -.02em; line-height: 1; padding-bottom: .1rem; border-bottom: 1px solid #000; }
.nfp-sv { padding-top: .25rem; font-size: .95rem; }
.nfp-sz { display: flex; justify-content: space-between; gap: .5rem; font-size: 1.05rem; padding-bottom: .25rem; border-bottom: 10px solid #000; }
.nfp-cal { display: flex; justify-content: space-between; align-items: flex-end; padding: .15rem 0 .2rem; border-bottom: 5px solid #000; }
.nfp-cal span { display: grid; }
.nfp-aps { font-size: .8rem; }
.nfp-cl { font-size: 1.7rem; font-weight: 900; line-height: 1; }
.nfp-cn { font-size: 2.3rem; font-weight: 900; line-height: 1; }
.nfp-tb { width: 100%; font-size: .9rem; }
.nfp-tb thead td, .nfp-tb thead th { padding: .15rem 0; border-bottom: 1px solid #000; font-weight: 700; text-align: right; font-size: .78rem; }
.nfp-tb th, .nfp-tb td { padding: .18rem 0; border-bottom: 1px solid #000; text-align: left; font-weight: 400; }
.nfp-tb td { text-align: right; font-weight: 700; }
.nfp-tb .nf-b th span { font-weight: 700; }
.nfp-tb .nf-r1 th { padding-left: 1rem; }
.nfp-tb .nf-r2 th { padding-left: 2rem; }
.nfp-tb tr.nf-b:nth-last-child(5) th, .nfp-tb tr.nf-b:nth-last-child(5) td { border-bottom: 10px solid #000; }
.nfp-tb .nf-m:last-child th, .nfp-tb .nf-m:last-child td { border-bottom: 5px solid #000; }
.nfp-fn { padding-top: .35rem; font-size: .72rem; line-height: 1.3; }

/* ---------- Closing cards ---------- */
.pcta { padding: 0 0 var(--section-y); background: var(--cream); }
.pcta-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 900px) { .pcta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
.pcta-card { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius-lg); color: var(--cream); --focus: var(--sun); }
.pcta-card h2 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); color: var(--cream); }
.pcta-card a:not(.btn) { color: var(--cream); }
.pcta-shop { background: var(--acai); }
.pcta-trade { background: var(--night); }

/* ---------- Previous / next ---------- */
.pn-v38 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .75rem; padding-top: 1rem; padding-bottom: 3rem; }
.pn-v38 .pn { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: 999px; background: var(--cbg); color: var(--cfg); text-decoration: none; min-width: 0; }
.pn-v38 .pn-next { justify-content: flex-end; text-align: right; }
.pn-v38 .pn img { border-radius: 50%; flex: none; }
.pn-v38 .pn > span { display: grid; min-width: 0; }
.pn-v38 .pn-label { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.pn-v38 .pn-name { font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-v38 .pn-all { font-weight: 700; white-space: nowrap; }
@media (max-width: 640px) { .pn-v38 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pn-v38 .pn-all { grid-column: 1 / -1; grid-row: 2; text-align: center; } .pn-v38 .pn-name { white-space: normal; } }

/* ---- src/css/50-foodservice.css ---- */
/* v38 Foodservice (foodservice.html). Hero with the bucket and a bowl (.fo-hero), the bucket at a glance (.fo-glance),
   scoop-top-serve (.fo-how), the bowl-cost calculator (.fo-calc), the four-bowl menu (.fo-menu), who it is for (.fo-who),
   the Sydney café band (.fo-cafe, on the shared .cafe-* styles), the Grab'n Go cup (.fo-cup), the kit (.fo-kit) and the
   spec with the Vistar codes (.fo-spec). Every selector is scoped to an .fo-* class so nothing leaks to other pages. */

.fo-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.fo-head { max-width: 50rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.fo-head h2 { font-size: var(--t-h2); margin-bottom: .35em; }
.fo-head .lede-sm { margin: 0; max-width: 62ch; }

/* ---------- Hero ---------- */
.fo-hero { position: relative; overflow: hidden; padding: clamp(.9rem, 2vw, 1.75rem) 0 clamp(2.5rem, 5vw, 4.25rem); background:
  radial-gradient(60% 55% at 84% 34%, rgba(131, 72, 154, .55), transparent 70%),
  radial-gradient(60% 80% at 0% 100%, rgba(237, 42, 125, .16), transparent 60%),
  linear-gradient(180deg, var(--acai) 0%, #2C1252 100%); }
.fo-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 3rem; align-items: center; }
.fo-hero .crumbs { margin: 0 0 .8rem; }
.fo-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 1.45rem + 3.6vw, 4.75rem); line-height: .93; letter-spacing: -.045em; margin: 0 0 1rem; color: var(--cream); max-width: none; text-wrap: wrap; }
.fo-h em { font-style: normal; color: var(--sun); }
.fo-lede { font-size: var(--t-lede); line-height: 1.45; max-width: 38ch; margin: 0 0 1.35rem; color: rgba(251, 241, 228, .92); }
.fo-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.1rem; }
.fo-avail { margin: 0; max-width: 46ch; padding-left: .95rem; border-left: 3px solid var(--leaf); font-size: .98rem; line-height: 1.45; color: rgba(251, 241, 228, .88); }
.fo-avail strong { display: block; color: var(--sun); font-weight: 700; }

.fo-art { position: relative; margin: 0; width: min(100%, 560px); aspect-ratio: 1 / .9; justify-self: center; }
.fo-sun { position: absolute; left: 2%; top: 4%; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFE68A 0%, var(--sun) 38%, var(--mango) 78%, var(--flame) 100%);
  box-shadow: 0 0 0 14px rgba(255, 204, 4, .08), 0 0 110px 8px rgba(250, 163, 34, .3); }
.fo-tile { position: absolute; right: 0; top: 0; width: 70%; aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--tile-shadow), 0 0 0 1px rgba(31, 11, 61, .06); overflow: hidden; }
.fo-tile picture { width: 94%; }
.fo-tile img { width: 100%; height: auto; }
.fo-bowl { position: absolute; left: 0; bottom: 7%; width: 46%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 6px var(--acai), var(--tile-shadow); }
.fo-bowl img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.fo-sticker { position: absolute; z-index: 2; right: 3%; bottom: 12%; width: clamp(92px, 25%, 136px); aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: .05rem; padding: .5rem;
  background: var(--pink-deep); color: var(--white); transform: rotate(-8deg); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); font-family: var(--font-display); line-height: 1.02; }
.fo-sticker span { font-size: clamp(.66rem, .55rem + .35vw, .82rem); font-weight: 600; }
.fo-sticker b { font-size: clamp(.95rem, .72rem + .8vw, 1.28rem); font-weight: 800; letter-spacing: -.02em; }
.fo-art-cap { position: absolute; left: 0; bottom: 0; width: 46%; text-align: center; font-size: .82rem; line-height: 1.3; color: rgba(251, 241, 228, .82); }

/* The bucket at a glance */
.fo-glance { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); padding: clamp(1.1rem, 2.4vw, 1.75rem); border-radius: var(--radius-lg); background: var(--cream); color: var(--ink); box-shadow: var(--tile-shadow); --focus: var(--acai); }
.fo-hero .fo-glance-h { margin: 0 0 .9rem; font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem); line-height: 1.1; letter-spacing: -.02em; color: var(--acai); }
.fo-glance-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.fo-glance-list > div { padding: .7rem 0; border-top: 1px solid var(--line); min-width: 0; }
.fo-glance-list dt { margin: 0 0 .15rem; font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acai); }
.fo-glance-list dd { margin: 0; }
.fo-glance-list b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1rem, .92rem + .4vw, 1.2rem); line-height: 1.15; letter-spacing: -.015em; overflow-wrap: anywhere; }
.fo-glance-list dd span { display: block; margin-top: .15rem; font-size: .88rem; line-height: 1.35; color: var(--muted); }
.fo-dl { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.fo-hero .fo-dl a { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .4rem .95rem .4rem .45rem; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1.5px rgba(31, 11, 61, .22); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: .93rem; line-height: 1.2; text-decoration: none; }
.fo-hero .fo-dl a:hover { box-shadow: inset 0 0 0 2px var(--acai); color: var(--acai); }
.fo-hero .fo-dl a:focus-visible { outline: 3px solid var(--acai); outline-offset: 2px; border-radius: 999px; }
.fo-file { display: inline-grid; place-items: center; min-width: 2.3rem; height: 1.75rem; padding: 0 .35rem; border-radius: 999px; background: var(--acai); color: var(--cream); font-size: .68rem; font-weight: 800; letter-spacing: .06em; }
.fo-file-page { background: var(--sun); color: var(--ink); font-size: .8rem; }
.fo-dl small { font-family: var(--font-body); font-weight: 500; font-size: .8rem; color: var(--muted); }

@media (min-width: 640px) {
  .fo-glance-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .fo-glance-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 1.4rem; }
  .fo-glance-list > div { padding: .85rem 0 .2rem; }
}

/* Phones: name, promise and the button first so "Request samples and pricing" sits in the first screen; the picture follows */
@media (max-width: 959px) {
  .fo-h { font-size: clamp(2.4rem, 1.2rem + 6vw, 3.6rem); margin-bottom: .7rem; }
  .fo-lede { margin-bottom: 1rem; }
  .fo-ctas .btn { flex: 1 1 auto; }
  .fo-ctas .btn-lg { min-height: 52px; padding: .7rem 1.2rem; }
  .fo-art { width: min(100%, 440px); margin-top: .75rem; }
}
@media (min-width: 960px) {
  .fo-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .fo-art { width: 100%; max-width: 540px; }
}
@media (min-width: 960px) and (max-height: 760px) {
  /* Short laptop screens (1280x720): keep the headline and button in view */
  .fo-h { font-size: clamp(2.6rem, 1rem + 4vw, 4.4rem); margin-bottom: .8rem; }
  .fo-lede { margin-bottom: 1rem; }
  .fo-hero .crumbs { margin-bottom: .5rem; }
  .fo-art { max-width: 440px; }
}

/* ---------- Scoop, top, serve ---------- */
.fo-how { padding: var(--section-y) 0 calc(var(--section-y) * .7); background: var(--cream); }
.fo-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.fo-steps li { position: relative; padding: 1.4rem 1.4rem 1.5rem; border-radius: var(--radius-lg); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); }
.fo-step-n { display: inline-grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .8rem; border-radius: 50%; background: var(--acai); color: var(--sun); font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; }
.fo-steps li:nth-child(2) .fo-step-n { background: var(--pink-deep); color: var(--white); }
.fo-steps li:nth-child(3) .fo-step-n { background: var(--sun); color: var(--ink); }
.fo-steps h3 { font-size: var(--t-h3); margin: 0 0 .35rem; }
.fo-steps p { margin: 0; }
@media (min-width: 760px) { .fo-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; } }

/* ---------- Bowl-cost calculator ---------- */
.fo-calc { padding: var(--section-y) 0; background: var(--leaves-ink), var(--sun); color: var(--ink); --focus: var(--ink); }
.fo-calc .eyebrow { color: var(--acai); }
.fo-calc a:not(.btn) { color: var(--acai); }
.fo-calc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 960px) {
  .fo-calc-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 1.5rem; }
  .fo-out { position: sticky; top: calc(var(--header-h) + 1rem); }
}
.fo-calc-sub { margin: 0 0 1rem; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); letter-spacing: -.02em; }
.fo-calc-form { padding: clamp(1.1rem, 2.6vw, 2rem); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--tile-shadow); }
.fo-field { margin: 0 0 1.15rem; min-width: 0; }
.fo-field label { display: block; margin: 0 0 .1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
.fo-hint { margin: 0 0 .45rem; font-size: .88rem; line-height: 1.35; color: var(--muted); }
.fo-input { position: relative; display: flex; align-items: stretch; max-width: 18rem; }
.fo-input input { flex: 1 1 auto; min-width: 0; width: 100%; min-height: 52px; padding: .6rem .9rem; border: 2px solid var(--ink); border-radius: 14px; background: var(--white); color: var(--ink); font: 600 1.15rem/1.2 var(--font-body); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; scroll-margin-bottom: 7rem; }
.fo-input input::-webkit-outer-spin-button, .fo-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fo-input input:focus-visible { outline: 3px solid var(--acai); outline-offset: 2px; }
.fo-input input[aria-invalid="true"] { border-color: #B3123F; box-shadow: 0 0 0 1px #B3123F; }
.fo-unit { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; width: 2.4rem; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--acai); pointer-events: none; }
.fo-input-pre .fo-unit { left: 2px; }
.fo-input-pre input { padding-left: 2.3rem; }
.fo-input-post .fo-unit { right: 2px; }
.fo-input-post input { padding-right: 2.5rem; }
.fo-err { margin: .4rem 0 0; font-size: .9rem; font-weight: 600; color: #B3123F; }
.fo-err::before { content: "! "; font-weight: 800; }
.fo-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .6rem; max-width: 26rem; }
.fo-pick { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; min-height: 48px; padding: .35rem .7rem; border: 2px solid rgba(31, 11, 61, .25); border-radius: 14px; background: var(--paper); color: var(--ink); font: 800 1rem/1.15 var(--font-display); cursor: pointer; text-align: left; }
.fo-pick small { font: 500 .76rem/1.2 var(--font-body); color: var(--muted); }
.fo-pick:hover { border-color: var(--acai); }
.fo-pick[aria-pressed="true"] { background: var(--acai); border-color: var(--acai); color: var(--cream); }
.fo-pick[aria-pressed="true"] small { color: rgba(251, 241, 228, .85); }
.fo-pick:focus-visible { outline: 3px solid var(--acai); outline-offset: 2px; border-radius: 14px; }
.fo-field-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; }
@media (min-width: 560px) { .fo-field-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fo-reset { min-height: 44px; margin-top: .2rem; padding: .4rem .2rem; border: 0; background: none; color: var(--acai); font: 700 .95rem/1.2 var(--font-display); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.fo-reset:hover { color: var(--pink-deep); }
html:not(.js) .fo-calc-grid { display: none; }
.fo-nojs { display: none; margin: 0; padding: 1rem 1.2rem; border-radius: 16px; background: var(--paper); font-weight: 600; }
html:not(.js) .fo-nojs { display: block; }
/* Phones: a slim live strip stays at the bottom of the screen while the form is in view, so the result is visible as you type */
.fo-mini { position: sticky; bottom: .6rem; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem 1rem; margin: 1rem calc(clamp(1.1rem, 2.6vw, 2rem) * -.5) 0; padding: .6rem 1rem; border-radius: 16px; background: var(--acai); color: var(--cream); font-size: .9rem; box-shadow: 0 12px 24px -12px rgba(20, 6, 40, .6); }
.fo-mini b { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--sun); font-variant-numeric: tabular-nums; }
@media (min-width: 960px) { .fo-mini { display: none; } }

.fo-out { padding: clamp(1.1rem, 2.6vw, 2rem); border-radius: var(--radius-lg); background: radial-gradient(80% 60% at 100% 0%, rgba(131, 72, 154, .6), transparent 70%), var(--acai); box-shadow: var(--tile-shadow); }
.fo-out .fo-calc-sub { color: var(--cream); }
.fo-out-list { margin: 0; }
.fo-out-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: baseline; padding: .75rem 0; border-top: 1px solid rgba(251, 241, 228, .2); }
.fo-out-list dt { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.fo-out-list dt span { display: block; font-weight: 400; font-size: .84rem; color: rgba(251, 241, 228, .78); }
.fo-out-list dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); line-height: 1.1; letter-spacing: -.02em; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fo-out-list .fo-out-key dd { color: var(--sun); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); }
.fo-out-list .fo-out-key dd.is-neg { color: #FF9DB8; }
.fo-out-msg { margin: .9rem 0 0; min-height: 1.5em; font-weight: 600; color: var(--sun); }
.fo-out-msg:empty { display: none; }
.fo-out-warn { margin: .9rem 0 0; padding: .8rem 1rem; border-radius: 16px; background: rgba(251, 241, 228, .1); font-size: .93rem; line-height: 1.45; }
.fo-out-warn strong { color: var(--sun); }

.fo-calc-how { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 2.5rem; margin-top: 1.5rem; padding: clamp(1.1rem, 2.6vw, 2rem); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--tile-shadow); }
@media (min-width: 960px) { .fo-calc-how { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; } }
.fo-formulas { margin: 0; padding-left: 1.3rem; display: grid; gap: .45rem; font-size: .98rem; line-height: 1.45; }
.fo-formulas b { font-family: var(--font-display); }
.fo-calc-quote p { margin: 0 0 1rem; font-size: 1.05rem; }

/* ---------- The four-bowl menu ---------- */
.fo-menu { padding: var(--section-y) 0; background: var(--paper); }
.fo-menu-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 900px) { .fo-menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; } }
.fo-dish a { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.fo-dish-pic { position: relative; display: block; margin-bottom: .85rem; border-radius: var(--radius-lg); overflow: hidden; background: var(--fbg); box-shadow: var(--tile-shadow); }
.fo-dish-pic img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
.fo-dish a:hover .fo-dish-pic img, .fo-dish a:focus-visible .fo-dish-pic img { transform: scale(1.04); }
.fo-dish a:focus-visible { outline: 3px solid var(--acai); outline-offset: 4px; border-radius: var(--radius-lg); }
.fo-tag { position: absolute; left: .7rem; bottom: .7rem; padding: .22rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); font: 700 .72rem/1.2 var(--font-display); }
.fo-dish-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.02rem, .95rem + .35vw, 1.22rem); line-height: 1.15; letter-spacing: -.015em; }
.fo-dish a:hover .fo-dish-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fo-dish-line { margin: .3rem 0 .7rem; font-size: .93rem; line-height: 1.4; color: var(--muted); }
.fo-state { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; padding: .28rem .7rem .28rem .55rem; border-radius: 999px; font: 700 .8rem/1.2 var(--font-display); }
.fo-state::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; }
.fo-state[data-state="first"] { background: var(--acai); color: var(--cream); }
.fo-state[data-state="first"]::before { background: var(--leaf); box-shadow: 0 0 0 3px rgba(138, 185, 63, .35); }
.fo-state[data-state="follows"] { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(31, 11, 61, .3); }
.fo-state[data-state="follows"]::before { border: 2px solid currentColor; }
.fo-menu-note { margin: 1.6rem 0 0; max-width: 74ch; padding-left: .95rem; border-left: 3px solid var(--leaf); font-size: .98rem; }
@media (prefers-reduced-motion: reduce) { .fo-dish-pic img { transition: none; } .fo-dish a:hover .fo-dish-pic img, .fo-dish a:focus-visible .fo-dish-pic img { transform: none; } }

/* ---------- Who it is for ---------- */
.fo-who { padding: var(--section-y) 0; background: var(--leaves-ink), var(--cream); }
.fo-who-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 640px) { .fo-who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fo-who-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
.fo-who-grid li { display: flex; flex-direction: column; padding: 1.35rem 1.35rem 1.2rem; border-radius: var(--radius-lg); background: var(--white); box-shadow: inset 0 6px 0 var(--c, var(--sun)), 0 18px 36px -28px rgba(31, 11, 61, .45); }
.fo-who-grid h3 { margin: .3rem 0 .45rem; font-size: 1.28rem; }
.fo-who-grid p { margin: 0 0 1rem; font-size: .98rem; line-height: 1.5; }
.fo-who-grid a { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-weight: 700; }
.fo-who-grid a::after { content: " →"; white-space: pre; }

/* ---------- Café band (Sydney, soft serve) ---------- */
.fo-ctx { display: block; margin-top: .3rem; font: 600 .76rem/1.3 var(--font-body); letter-spacing: .02em; color: var(--sun); opacity: 1; }
.fo-cafe .cafe-cap .fo-ctx { opacity: 1; font-size: .76rem; }
.fo-cafe .cafe-wide figcaption { opacity: .92; }

/* ---------- Grab'n Go cup ---------- */
.fo-cup { padding: var(--section-y) 0; background: radial-gradient(70% 70% at 90% 20%, var(--acai-mid), transparent 70%), var(--acai); }
.fo-cup-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 3.5rem; align-items: center; }
@media (min-width: 960px) { .fo-cup-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.fo-cup-copy h2 { font-size: var(--t-h2); max-width: 15ch; }
.fo-cup-copy > p:not(.eyebrow) { font-size: var(--t-lede); max-width: 40ch; }
.fo-nowrap { white-space: nowrap; }
.fo-cup-facts { list-style: none; margin: 0 0 1.6rem; padding: 0; max-width: 34rem; }
.fo-cup-facts li { padding: .7rem 0; border-top: 1px solid rgba(251, 241, 228, .2); }
.fo-cup-facts li:last-child { border-bottom: 1px solid rgba(251, 241, 228, .2); }
.fo-cup-facts b { color: var(--sun); font-family: var(--font-display); margin-right: .2rem; }
.fo-cup-art { position: relative; margin: 0 auto; width: min(100%, 520px); }
.fo-cup-art::before { content: ""; display: block; aspect-ratio: 1 / .78; }
.fo-cup-sun { position: absolute; left: 14%; top: 0; width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #FFE68A 0%, var(--sun) 40%, var(--mango) 85%); opacity: .95; }
.fo-cup-art img { position: absolute; width: 62%; height: auto; filter: var(--pack-shadow); }
.fo-cup-os { left: 0; bottom: 8%; transform: rotate(-6deg); z-index: 2; }
.fo-cup-mango { right: 0; bottom: 14%; transform: rotate(7deg); }
.fo-cup-art figcaption { position: relative; margin-top: .6rem; font-size: .84rem; color: rgba(251, 241, 228, .8); text-align: center; }

/* ---------- The kit ---------- */
.fo-kit { padding: var(--section-y) 0; background: var(--paper); }
.fo-kit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 4rem; align-items: center; }
@media (min-width: 960px) { .fo-kit-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.fo-kit h2 { font-size: var(--t-h2); }
.fo-kit-list { margin: 0 0 1.2rem; }
.fo-kit-art { margin: 0; }
.fo-kit-buckets { list-style: none; margin: 0; padding: clamp(.8rem, 2vw, 1.4rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--tile-shadow); }
.fo-kit-buckets img { width: 100%; height: auto; }
.fo-kit-art figcaption { margin-top: .7rem; font-size: .9rem; color: var(--muted); }

/* ---------- Spec and codes ---------- */
.fo-spec { padding: var(--section-y) 0; background: var(--cream); }
.fo-spec-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 760px) { .fo-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fo-card-wide { grid-column: 1 / -1; } }
.fo-card { min-width: 0; padding: clamp(1.2rem, 2.4vw, 1.8rem); border-radius: var(--radius-lg); background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line), 0 18px 36px -28px rgba(31, 11, 61, .45); }
.fo-card h3 { margin: 0 0 .8rem; font-size: var(--t-h3); }
.fo-spec-list { margin: 0; padding-left: 1.1em; }
.fo-spec-list li { margin: .3rem 0; }
.fo-card-note { margin: 0 0 .5rem; max-width: 80ch; font-size: .95rem; color: var(--muted); }
/* Keep the absolutely positioned caption and PDF labels inside the scrolling table.
   Without a containing block their layout boxes widen the document on phones. */
.fo-table { position: relative; margin: 1rem 0; border: 0; box-shadow: inset 0 0 0 1.5px var(--line); }
.fo-table .data td:nth-child(2), .fo-table .data td:nth-child(3) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fo-table .data th, .fo-table .data td { vertical-align: middle; }
.fo-table .data { min-width: 38rem; }
.fo-table .data tbody th { min-width: 12rem; }
.fo-table .data td a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 48px; margin: -.7rem 0; padding: 0 .4rem; font-weight: 700; }
.fo-card-links { margin: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; font-size: .95rem; }
.fo-card-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.fo-end .cta-band p { max-width: 60ch; }

.fo-pack-link { margin:.2rem 0 1rem; }
.fo-pack-link a { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; color:var(--cream); text-underline-offset:.25em; font-weight:700; }

/* ---- src/css/55-story.css ---- */
/* v38 Our story (about.html: .ab-*) and the Sydney café page (cafe.html: .sv-*, .sf-*, stage toggle).
   The story runs Brazil (made in the Amazon) → Australia (where it started; the café serves soft serve)
   → the United States (packaged sorbet, in freezers from March 2027). Everything here is scoped to
   .ab, .cafe-page or the [data-sf] film, so nothing leaks onto other pages. */

/* ---------- Single film with its own pause button ([data-sf], 55-story.js) ---------- */
.ab-film { position: relative; margin: 0; }
.ab-film-frame { position: relative; overflow: hidden; background: #2A1348; }
.ab-film-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-toggle { position: absolute; z-index: 3; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; min-width: 44px; padding: .4rem .85rem .4rem .7rem; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(20, 6, 40, .72); color: var(--cream); font-family: var(--font-display); font-weight: 700; font-size: .82rem; line-height: 1;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sf-toggle:hover { background: var(--sun); color: var(--ink); }
.sf-toggle:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.sf-ico { width: 12px; height: 12px; flex: none; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.is-paused .sf-ico, .is-paused > .sf-ico { background: currentColor; clip-path: polygon(12% 0, 100% 50%, 12% 100%); }

/* ================================ Our story ================================ */
.ab { background: var(--cream); }
.ab .ab-tag { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: .78rem; letter-spacing: .01em; }

/* ---------- Hero: three places, three tiles ---------- */
.ab-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(1.25rem, 3vw, 3rem) 0 clamp(3rem, 6vw, 5.5rem);
  background: radial-gradient(48% 60% at 86% 30%, rgba(255, 204, 4, .42), transparent 70%),
              radial-gradient(40% 50% at 8% 100%, rgba(237, 42, 125, .12), transparent 70%), var(--cream); }
.ab-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem 3rem; align-items: center; }
.ab-hero .crumbs { margin-bottom: 1.1rem; color: var(--muted); }
.ab-h { font-size: clamp(2.9rem, 1.3rem + 5.6vw, 5.4rem); line-height: .9; letter-spacing: -.045em; margin: 0 0 1.1rem; color: var(--acai); }
.ab-h em { font-style: normal; color: var(--pink-deep); display: block; }
.ab-lede { font-size: var(--t-lede); line-height: 1.45; max-width: 42ch; margin: 0 0 1rem; color: var(--ink); }
.ab-avail { margin: 0 0 1.4rem; max-width: 44ch; padding-left: .95rem; border-left: 3px solid var(--leaf); font-size: 1rem; line-height: 1.45; }
.ab-avail strong { color: var(--acai); }
.ab-ctas { display: flex; flex-wrap: wrap; gap: .75rem; }

.ab-trip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px; }
.ab-t { position: relative; margin: 0; min-width: 0; border-radius: 24px; overflow: hidden; box-shadow: var(--tile-shadow); }
.ab-t-br { grid-column: 2; grid-row: 1; background: var(--leaf-deep); aspect-ratio: 1 / 1.08; }
.ab-t-au { grid-column: 1; grid-row: 1 / span 2; background: #2A1348; }
.ab-t-us { grid-column: 2; grid-row: 2; background: #1C7D7E; aspect-ratio: 1 / 1.08; }
.ab-t-link { position: absolute; inset: 0; display: block; color: var(--cream); text-decoration: none; }
.ab-t-link:focus-visible { outline: 3px solid var(--acai); outline-offset: -3px; border-radius: 24px; }
.ab-t-media, .ab-t-media picture, .ab-t-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ab-t-media img { object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
.ab-t-link:hover .ab-t-media img { transform: scale(1.04); }
.ab-t-packs { background: radial-gradient(60% 50% at 50% 40%, rgba(255, 204, 4, .55), transparent 70%); }
.ab-t-packs picture { position: absolute; inset: auto; top: 5%; width: 47%; height: auto; }
@media (min-width: 960px) { .ab-t-packs picture { top: 7%; width: 56%; } }
.ab-t-packs picture:first-child { left: 3%; z-index: 2; }
.ab-t-packs picture:last-child { right: 3%; margin-top: 4%; }
.ab-t-packs img { position: static; height: auto; object-fit: contain; filter: var(--pack-shadow); }
.ab-t-link:hover .ab-t-packs img { transform: translateY(-3px); }
/* label over a scrim, bottom left */
.ab-t-link::after, .ab-film figcaption::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(20, 6, 40, .82)); }
.ab-t-n, .ab-t-place, .ab-t-line { position: relative; z-index: 2; display: block; }
.ab-t-link > .ab-t-n { margin-top: auto; }
.ab-t-link { display: flex; flex-direction: column; justify-content: flex-end; padding: .8rem .85rem .85rem; }
.ab-t-n { font-family: var(--font-display); font-weight: 800; font-size: .74rem; letter-spacing: .16em; color: var(--sun); }
.ab-t-place { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, .9rem + .7vw, 1.45rem); line-height: 1.02; letter-spacing: -.02em; color: var(--cream); margin: .15rem 0 .2rem; }
.ab-t-line { font-size: .8rem; line-height: 1.3; color: rgba(251, 241, 228, .9); }
.ab-film, .ab-film .ab-film-frame { position: absolute; inset: 0; }
.ab-film figcaption { position: absolute; inset: auto 0 0 0; z-index: 2; display: flex; flex-direction: column; padding: .9rem .9rem .95rem; color: var(--cream); }
.ab-film figcaption::before { height: 260%; bottom: 0; z-index: -1; }
.ab-film .ab-tag { margin-top: .5rem; align-self: flex-start; padding: .25rem .6rem; border-radius: 999px; background: rgba(251, 241, 228, .16); color: var(--cream); font-size: .7rem; line-height: 1.25; }

@media (max-width: 959px) {
  .ab-hero-copy { display: contents; }
  .ab-hero-grid { gap: 0; }
  .ab-hero .crumbs { order: 1; }
  .ab-hero .eyebrow { order: 2; }
  .ab-h { order: 3; }
  .ab-trip { order: 4; margin: .4rem 0 1.4rem; }
  .ab-lede { order: 5; }
  .ab-avail { order: 6; }
  .ab-ctas { order: 7; }
  .ab-ctas .btn { flex: 1 1 auto; }
}
@media (min-width: 640px) {
  .ab-trip { gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto; align-items: start; }
  .ab-t { grid-row: 1; aspect-ratio: 3 / 4.5; }
  .ab-t-br { grid-column: 1; margin-top: 2rem; }
  .ab-t-au { grid-column: 2; }
  .ab-t-us { grid-column: 3; margin-top: 3rem; }
  .ab-t-place { font-size: 1.5rem; }
  .ab-t-line { font-size: .9rem; }
}
@media (min-width: 960px) {
  .ab-hero-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.75rem 3.5rem; min-height: min(calc(100svh - var(--header-h) - 3px - 4rem), 780px); }
  .ab-trip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto; gap: 16px; align-items: start; }
  .ab-t { grid-row: 1; aspect-ratio: 3 / 4.5; }
  .ab-t-br { grid-column: 1; margin-top: 3.25rem; }
  .ab-t-au { grid-column: 2; }
  .ab-t-us { grid-column: 3; margin-top: 5rem; }
  .ab-t-link { padding: 1rem 1.05rem 1.1rem; }
  .ab-film figcaption { padding: 1.1rem 1.15rem 1.2rem; }
  .ab-film .ab-tag { font-size: .74rem; }
}

/* ---------- Chapters ---------- */
.ab-ch { position: relative; padding: var(--section-y) 0; }
.ab-ch-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem 4rem; align-items: center; }
@media (min-width: 960px) { .ab-ch-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.ab-ch h2 { font-size: var(--t-h2); line-height: .95; margin: 0 0 1.1rem; max-width: 12ch; }
.ab-ch .lede-sm { line-height: 1.55; max-width: 46ch; }
.ab-num { margin: 0 0 .35rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem, 2.2rem + 5vw, 6.5rem); line-height: .8; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 2px rgba(45, 86, 41, .55); }
.on-dark .ab-num { -webkit-text-stroke-color: rgba(255, 204, 4, .75); }
@supports not (-webkit-text-stroke: 2px red) { .ab-num { color: rgba(58, 28, 101, .16); } .on-dark .ab-num, .ab-us .ab-num { color: rgba(255, 204, 4, .5); } }
.ab-fine { margin: 1.1rem 0 0; max-width: 72ch; color: var(--muted); }
.on-dark .ab-fine { color: rgba(251, 241, 228, .78); }

/* Brazil */
.ab-br { background: radial-gradient(60% 70% at 100% 0%, rgba(138, 185, 63, .22), transparent 70%), #EEF2DE; }
.ab-br h2 { color: var(--leaf-deep); }
.ab-fruit { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; max-width: 30rem; }
.ab-fruit li { margin: 0; text-align: center; }
.ab-fruit img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--cream), 0 14px 26px -16px rgba(20, 6, 40, .5); }
.ab-fruit span { display: block; margin-top: .55rem; font-family: var(--font-display); font-weight: 700; font-size: .82rem; line-height: 1.15; color: var(--leaf-deep); }
.ab-river { margin: 0; }
.ab-river picture, .ab-river img { display: block; width: 100%; height: auto; }
.ab-river img { border-radius: var(--radius-lg); aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--tile-shadow); }
.ab-river figcaption { margin-top: .7rem; font-size: .9rem; color: var(--muted); }

/* Australia */
.ab-au { background: radial-gradient(70% 60% at 100% 0%, rgba(237, 42, 125, .18), transparent 60%), var(--night); }
.ab-au-grid { align-items: start; }
@media (min-width: 960px) { .ab-au .ab-ch-copy { position: sticky; top: calc(var(--header-h) + 2.5rem); } }
.ab-sv { margin: 1rem 0 1.25rem; max-width: 46ch; font-size: .82rem; line-height: 1.5; color: #e5d6ef; }
.ab-sv strong { display: block; margin-bottom: .2rem; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--sun); }
.ab-au-media { display: grid; gap: 1.25rem; }
.ab-reel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-reel .cf-item:first-child { grid-column: 1 / -1; }
.ab-reel .cf-item:first-child .cf-frame { aspect-ratio: 4 / 4.2; }
@media (min-width: 640px) {
  .ab-reel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-reel .cf-item:first-child { grid-column: auto; }
  .ab-reel .cf-item:first-child .cf-frame { aspect-ratio: 4 / 5; }
}
.ab-shop { margin: 0; }
.ab-shop picture, .ab-shop img { display: block; width: 100%; height: auto; }
.ab-shop img { border-radius: 20px; }
.ab-shop figcaption { margin-top: .6rem; font-size: .86rem; color: rgba(251, 241, 228, .78); }

/* United States */
.ab-us { color: var(--cream); background: radial-gradient(80% 40% at 50% 88%, rgba(255, 204, 4, .2), transparent 70%), #135C5D; --focus: var(--sun); }
@media (min-width: 960px) { .ab-us { background: radial-gradient(45% 70% at 80% 50%, rgba(255, 204, 4, .2), transparent 70%), #135C5D; } }
.ab-us h2, .ab-us h3 { color: var(--cream); }
.ab-us .eyebrow { color: var(--sun); }
.ab-us .ab-num { -webkit-text-stroke-color: rgba(255, 204, 4, .8); }
.ab-us .lede-sm { color: rgba(251, 241, 228, .94); }
.ab-when { list-style: none; margin: 1.5rem 0 1.25rem; padding: 0; display: grid; gap: 0; max-width: 34rem; }
.ab-when li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: .75rem 0; border-top: 1px solid rgba(251, 241, 228, .22); }
.ab-when li:last-child { border-bottom: 1px solid rgba(251, 241, 228, .22); }
.ab-when b { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--sun); }
.ab-formats { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; max-width: 36rem; }
.ab-formats li { margin: 0; padding: .4rem .85rem; border-radius: 999px; background: rgba(251, 241, 228, .12); font-size: .92rem; }
.ab-formats b { font-family: var(--font-display); font-weight: 700; margin-right: .25rem; color: var(--sun); }
.ab-us .cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.ab-packs { margin: 0 auto; width: 100%; max-width: 560px; }
.ab-packs-stage { position: relative; aspect-ratio: 1 / .86; }
.ab-sun { position: absolute; left: 50%; top: 0; width: 82%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFE68A 0%, var(--sun) 40%, var(--mango) 82%, var(--flame) 100%); box-shadow: 0 0 90px 10px rgba(250, 163, 34, .3); }
.ab-packs picture { position: absolute; width: 46%; }
.ab-packs picture:nth-of-type(1) { left: 7%; bottom: 17%; }
.ab-packs picture:nth-of-type(3) { left: 47%; bottom: 17%; }
.ab-packs picture:nth-of-type(2) { left: -3%; bottom: 0; z-index: 2; }
.ab-packs picture:nth-of-type(4) { left: 57%; bottom: 0; z-index: 2; }
.ab-packs img { display: block; width: 100%; height: auto; filter: var(--pack-shadow); }
.ab-packs figcaption { margin-top: 1rem; max-width: 46ch; font-size: .86rem; line-height: 1.45; color: rgba(251, 241, 228, .82); }

/* ---------- Why have one ---------- */
.ab-why { padding: var(--section-y) 0; background: var(--cream); }
.ab-why h2 { font-size: var(--t-h2); line-height: .95; max-width: 14ch; }
.ab-why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.ab-why-grid li { margin: 0; display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 1rem; align-items: start; }
.ab-why-grid picture { grid-row: 1 / span 3; display: block; }
.ab-why-grid img { grid-row: 1 / span 3; display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: var(--wp, 50% 22%); border-radius: 20px; background: var(--wb); }
.ab-why-grid h3 { margin: .1rem 0 .3rem; font-size: var(--t-h3); line-height: 1.05; color: var(--acai); }
.ab-why-grid p { margin: 0; font-size: 1rem; line-height: 1.5; }
.ab-why-grid .ab-tag { margin-top: .45rem; color: var(--muted); }
@media (min-width: 640px) {
  .ab-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
  .ab-why-grid li { display: flex; flex-direction: column; }
  .ab-why-grid img { margin-bottom: 1.1rem; border-radius: var(--radius-lg); box-shadow: var(--tile-shadow); transition: transform var(--dur-2) var(--ease-out); }
  .ab-why-grid li:hover img { transform: translateY(-4px) rotate(-1deg); }
}
@media (min-width: 1100px) { .ab-why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- The people ---------- */
.ab-people { padding: var(--section-y) 0; background: var(--paper); }
.ab-people h2 { font-size: var(--t-h2); line-height: .95; }
.ab-team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: 900px; }
@media (min-width: 760px) { .ab-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
.ab-team li { margin: 0; display: flex; gap: 1.1rem; align-items: center; padding: 1.3rem 1.4rem; border-radius: var(--radius); background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); }
.ab-mono { flex: none; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--acai); color: var(--sun); font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: .02em; }
.ab-mono-us { background: #135C5D; }
.ab-team h3 { margin: 0 0 .2rem; font-size: 1.35rem; line-height: 1.1; color: var(--acai); }
.ab-team p { margin: 0; font-size: .95rem; line-height: 1.4; color: var(--muted); }
.ab-team .ab-role { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.ab-people-more { margin: 1.6rem 0 0; }
.ab-people-more a { font-weight: 700; }

.ab-range { background: var(--cream); }
.ab-range h2 { font-size: var(--t-h2); }
.ab-fruit { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.ab-fruit li { min-width:0; }
.ab-fruit img { width:100%; max-width:96px; margin-inline:auto; aspect-ratio:1; object-fit:cover; }
.ab-fruit span { font-size:.8rem; }
.ab-flavors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; list-style:none; margin:2rem 0; padding:0; }
.ab-flavors li { margin:0; min-width:0; }
.ab-flavors a { display:flex; height:100%; flex-direction:column; align-items:center; text-align:center; padding:0 0 1rem; overflow:hidden; background:var(--cbg); color:var(--cfg); border-radius:1.1rem; text-decoration:none; }
.ab-flavors picture { display:block; width:100%; }
.ab-flavors img { display:block; width:100%; height:auto; }
.ab-flavor-name { padding:.65rem .7rem 0; font-family:var(--font-display); font-weight:800; font-size:1rem; line-height:1.2; }
.ab-flavor-note { font-size:.68rem; margin-top:.4rem; padding-inline:.7rem; }
.ab-flavors a:focus-visible { outline:3px solid var(--acai); outline-offset:4px; }
@media (min-width:640px) { .ab-flavors { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:960px) { .ab-flavors { grid-template-columns:repeat(5,minmax(0,1fr)); } }

@media (prefers-reduced-motion: reduce) {
  .ab-t-media img, .ab-why-grid img { transition: none; }
  .ab-t-link:hover .ab-t-media img, .ab-t-link:hover .ab-t-packs img, .ab-why-grid li:hover img { transform: none; }
}

/* ================================ The Sydney café (cafe.html) ================================ */
/* The soft serve / sorbet note, made prominent */
.cafe-page .sv-note { margin: 1.4rem 0 0; max-width: 52ch; padding: .95rem 1.1rem; border-radius: 18px; background: rgba(251, 241, 228, .08); border: 1.5px solid rgba(255, 204, 4, .5); font-size: .95rem; line-height: 1.5; color: rgba(251, 241, 228, .92); }
.cafe-page .sv-note strong { display: block; margin-bottom: .15rem; font-family: var(--font-display); font-weight: 800; font-size: 1.08rem; color: var(--sun); }
.cafe-page .sv-note a { font-weight: 700; color: var(--sun); }
.cafe-page .section:not(.on-dark) .sv-note { background: var(--white); border-color: var(--acai); color: var(--ink); }
.cafe-page .section:not(.on-dark) .sv-note strong { color: var(--acai); }
.cafe-page .section:not(.on-dark) .sv-note a { color: var(--acai); }
/* second caption line: where it was shot, and Serving suggestion */
.cafe-page .sv-ctx { display: block; margin-top: .15rem; font-size: .78rem; font-weight: 500; line-height: 1.3; opacity: .85; }
.cafe-page .cafe-films > li { margin-bottom: 18px; }
.cafe-page .cafe-films .cafe-cap { margin: .55rem .2rem 0; font-size: .86rem; line-height: 1.3; color: rgba(251, 241, 228, .92); }
/* crops that keep third-party brand names and a nutrition word out of frame */
.cafe-page .v360.sv-crop { aspect-ratio: 1 / 1 !important; }
.cafe-page .sv-crop img, .cafe-page .sv-crop video { object-position: 50% 100%; }
.cafe-page .sv-crop-box { aspect-ratio: 4 / 5 !important; }
.cafe-page .sv-crop-box img, .cafe-page .sv-crop-box video { object-position: 50% 78%; }
/* the US bucket beside the café tub */
.cafe-page .sv-bucket { aspect-ratio: 1 / 1; border-radius: var(--radius); background: var(--white); display: grid; place-items: center; overflow: hidden; }
.cafe-page .sv-bucket img { width: 84%; height: auto; }
.cafe-page .cafe-us-note { margin: 1.1rem 0 0; color: var(--muted); }

/* Made to order: the sticky stage now has its own pause button (WCAG 2.2.2) */
.cafe-page .stage-toggle { display: none; }
@media (min-width: 960px) {
  .cafe-page .cafe-stage-frame { position: relative; }
  .cafe-page .stage-toggle { position: absolute; z-index: 4; right: 16px; top: 16px; display: inline-flex; align-items: center; gap: .5rem;
    min-height: 44px; padding: .45rem 1rem .45rem .75rem; border: 0; border-radius: 999px; cursor: pointer;
    background: rgba(20, 6, 40, .74); color: var(--cream); font-family: var(--font-display); font-weight: 700; font-size: .9rem;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .cafe-page .stage-toggle[hidden] { display: none; }
  .cafe-page .stage-toggle:hover { background: var(--sun); color: var(--ink); }
  .cafe-page .stage-toggle:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
  .cafe-page .stage-toggle.is-paused .sf-ico { background: currentColor; clip-path: polygon(12% 0, 100% 50%, 12% 100%); }
  .cafe-page .cafe-stage-ctx { position: absolute; z-index: 2; left: 16px; bottom: 56px; padding: .3rem .7rem; border-radius: 999px; background: rgba(20, 6, 40, .7); color: var(--cream); font-size: .74rem; font-weight: 600; }
}
.cafe-page .v360.sv-sq { aspect-ratio: 1 / 1 !important; }
.cafe-page .sv-step-ctx { margin: .5rem .2rem 0; font-size: .8rem; line-height: 1.3; color: rgba(251, 241, 228, .82); }

/* ---- src/css/56-store.css ---- */
/* The Store & Cafe has its own identity: real places, real food, the original mural. */
.cafe-page .ch { background: #dcf58b; color: #251039; }
.cafe-page .ch::before { content: none; }
.cafe-page .ch-grid { max-width: 1360px; padding-top: 3rem; padding-bottom: 3rem; }
.cafe-page .ch .cafe-kicker { color: #513164; letter-spacing: .13em; }
.cafe-page .ch h1 { font-size: clamp(3.1rem, 5.2vw, 4.9rem); line-height: .92; color: #251039; letter-spacing: -.05em; }
.cafe-page .ch h1 em { display: block; color: #251039; }
.cafe-page .ch .lede { color: #39214a; font-size: clamp(1.04rem, 1.4vw, 1.22rem); line-height: 1.5; max-width: 35ch; }
.cafe-page .ch .btn-light { background: #251039; color: var(--cream); }
.cafe-page .ch .btn-outline-light { border-color: #251039; color: #251039; background: transparent; }
.cafe-page .ch .btn:focus-visible { outline-color: #251039; }
.cafe-page .ch .sv-note { margin-top: 1.1rem; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: .82rem; color: #513164; }
.cafe-page .ch .sv-note a { color: #251039; display: inline-flex; align-items: center; min-height: 44px; }
.cafe-page .ch-photos { gap: 14px; }
.cafe-page .ch-fig a { border-radius: 12px; box-shadow: 0 16px 40px -24px rgba(37,16,57,.4); }
.cafe-page .ch-fig a:focus-visible { outline-color: #251039; }
.cafe-page .store .st { border-radius: 12px; }
.cafe-page #sydney { background: var(--cream); }
.cafe-page #sydney .section-head h2 { font-size: var(--t-h2); max-width: 14ch; }
@media (min-width: 960px) {
  .cafe-page .ch-grid { grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: 2.5rem; min-height: min(calc(100svh - var(--header-h)), 860px); }
}
@media (max-width: 959px) {
  .cafe-page .ch-grid { padding: 1.7rem var(--gutter) 2rem; }
  .cafe-page .ch-copy { order: 0; padding: 0 0 1.5rem; }
  .cafe-page .ch h1 { font-size: clamp(2.8rem, 10.4vw, 4.7rem); }
  .cafe-page .ch .cta-row { margin: 1.1rem 0 0; }
  .cafe-page .ch .sv-note { margin-top: .3rem; }
  .cafe-page .ch-photos { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 10px; order: 1; }
  .cafe-page .ch-a, .cafe-page .ch-side { order: 0; padding: 0; }
  .cafe-page .ch-side { flex-direction: column; gap: 10px; }
  .cafe-page .ch-b, .cafe-page .ch-c { flex: none; }
  .cafe-page .ch-c { display: flex; flex: 1 1 auto; min-height: 0; }
  .cafe-page .ch-c a { flex: 1 1 auto; aspect-ratio: auto; min-height: 70px; }
  .cafe-page .ch-c picture { position: absolute; inset: 0; }
  .cafe-page .ch-a .photo-tag, .cafe-page .ch-fig .photo-tag { left: 8px; bottom: 8px; font-size: .6rem; padding: .25rem .45rem; }
}
/* Cafe shortcuts and original food photos lead to a real destination. */
.cafe-shortcuts li { padding:0; background:transparent; border:0; }
.cafe-shortcuts a { display:inline-flex; align-items:center; min-height:44px; padding:.5rem .85rem; border:1px solid #a398a8; border-radius:4px; background:#fbf1e4; color:#251039; font-size:.85rem; font-weight:600; text-decoration:none; }
.cafe-shortcuts a:hover { background:#251039; color:#fbf1e4; }
.cafe-shortcuts a:focus-visible { outline:3px solid #251039; outline-offset:3px; }
.cafe-pair a,.cafe-menu .photo a { display:block; min-width:0; overflow:hidden; border-radius:inherit; }
.cafe-pair a:focus-visible,.cafe-menu .photo a:focus-visible { outline:3px solid #251039; outline-offset:3px; }
.cafe-visit { background:#eee3d4; }
.cafe-visit-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; }
.cafe-visit-row h2 { font-size:clamp(2rem,4vw,3.7rem); margin:0 0 .8rem; }
.cafe-visit-row p { margin-bottom:0; }
.cafe-gallery .is-signature { column-span:all; max-width:900px; margin:0 auto 2rem; }
.cafe-gallery .is-signature img { width:100%; max-height:650px; object-fit:cover; object-position:center 52%; }
.cafe-gallery .is-signature figcaption { font-family:var(--font-display); color:var(--ink); font-size:1.1rem; font-weight:700; }
.cafe-pair a,.cafe-menu .photo a { position:relative; }
.cafe-pair a::after,.cafe-menu .photo a::after { content:"↗"; position:absolute; right:10px; bottom:10px; width:32px; height:32px; display:grid; place-items:center; background:#fbf1e4e8; color:#251039; border-radius:50%; font-size:1.2rem; font-weight:700; pointer-events:none; }
@media(pointer:coarse) { .cafe-gallery a::after { opacity:1; } }
@media(max-width:699px) { .cafe-gallery .is-signature img { max-height:510px; } .cafe-visit-row p { font-size:.9rem; } }

/* Original place photography; the daylight frame focuses on our window frontage. */
.cafe-page .ch-c a { aspect-ratio:4/5; }
.cafe-place-head { margin-bottom:1.4rem; }
.cafe-place-head h2 { margin:0 0 1rem; font-size:var(--t-h2); }
.cafe-place-head .cafe-shortcuts { display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; list-style:none; padding:0; margin:0; }
.cafe-place-head .cafe-shortcuts a { padding:.4rem 0; border:0; border-bottom:1px solid #938397; border-radius:0; background:transparent; color:#251039; text-decoration:none; }
.cafe-place-head .cafe-shortcuts a:hover { border-color:#251039; }
.cafe-place-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.3rem; align-items:start; }
.cafe-place-grid figure { margin:0; min-width:0; }
.cafe-place-grid a,.cafe-place-grid picture,.cafe-place-grid img { display:block; width:100%; height:auto; }
.cafe-place-grid a:focus-visible { outline:3px solid #251039; outline-offset:4px; }
.cafe-place-grid figcaption { margin-top:.5rem; font-size:.8rem; }
.cafe-place-grid .cp-front { grid-column:1/-1; width:100%; max-width:740px; margin:0 auto; }
.cafe-place-grid .cp-front a { position:relative; overflow:hidden; aspect-ratio:6/5; border-radius:12px; }
.cafe-place-grid .cp-front picture { position:absolute; inset:0; }
.cafe-place-grid .cp-front img { position:absolute; width:163%; max-width:none; height:auto; left:-11%; top:-23%; }
.cafe-place-grid .cp-room { grid-row:span 2; }

/* Real people and preparation, near the place introduction rather than buried. */
.cafe-motion { background:#251039; color:#fbf1e4; }
.cafe-motion .section-head h2 { color:#fbf1e4; }
.cafe-visit-films { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.1rem; margin:0; padding:0; list-style:none; }
.cafe-visit-films li { min-width:0; }
.cafe-visit-films h3 { color:#fbf1e4; font-size:clamp(1.05rem,1.8vw,1.4rem); margin:.8rem 0 .15rem; }
.cafe-visit-films p { font-size:.85rem; margin:0; color:#e8d9e9; }
.cafe-film-link { position:relative; display:inline-flex; min-height:44px; align-items:center; font-size:.8rem; color:#dcff70; text-underline-offset:.25em; }
.cafe-film-link:focus-visible { outline:3px solid #dcff70; outline-offset:3px; }
.cafe-motion .v360,.cafe-party-film .v360 { aspect-ratio:9/16; }
.cafe-motion .v360-video,.cafe-party-film .v360-video { object-fit:contain; }
.cafe-motion .v360-btn,.cafe-party-film .v360-btn { width:auto; height:44px; min-width:88px; display:flex; align-items:center; gap:.4rem; padding:0 .85rem; opacity:1; }
.cafe-motion .v360-btn::after,.cafe-party-film .v360-btn::after { content:"Play"; font:700 .85rem var(--font-body); }
.cafe-motion .playing .v360-btn::after,.cafe-party-film .playing .v360-btn::after { content:"Pause"; }
@media(max-width:899px) { .cafe-visit-films { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:599px) {
 .cafe-visit-films { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:1px; padding:0 0 1rem; gap:1rem; }
 .cafe-visit-films li { flex:0 0 82%; scroll-snap-align:start; }
}

/* One full-width landscape Party Box photograph, without the rejected portrait. */
.cafe-party-photo { margin:0 0 1.6rem; }
.cafe-party-photo a,.cafe-party-photo picture,.cafe-party-photo img { display:block; width:100%; }
.cafe-party-photo a { overflow:hidden; border-radius:12px; }
.cafe-party-photo img { height:auto; aspect-ratio:16/9; object-fit:contain; }
.cafe-party-photo a:focus-visible { outline:3px solid #251039; outline-offset:5px; }
.cafe-party-copy { display:grid; grid-template-columns:1fr 1fr; gap:1rem 2rem; align-items:start; }
.cafe-party-copy h2 { margin:0; font-size:clamp(2.1rem,5vw,4.2rem); line-height:1; letter-spacing:-.04em; }
.cafe-party-copy .lede-sm { margin:1.2rem 0; max-width:36ch; }
.cafe-party-film { width:100%; max-width:330px; margin-inline:auto; }
.cafe-party-film .cafe-film-link { color:#251039; }
.cafe-partner { background:#dcf58b; color:#251039; }
.cafe-partner-row { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:1.5rem 3rem; }
.cafe-partner h2 { margin:0; color:#251039; font-size:clamp(2.3rem,5.2vw,4.8rem); line-height:.98; letter-spacing:-.04em; }
.cafe-partner .btn { background:#251039; color:#fbf1e4; }
.cafe-partner .btn:focus-visible { outline:3px solid #251039; outline-offset:4px; }
@media(max-width:699px) { .cafe-partner-row { grid-template-columns:1fr; } }
@media(max-width:699px) { .cafe-party-copy { grid-template-columns:1fr; } }

/* Wild Press is an editorial coming-soon announcement, not invented product photography. */
.wild-press { background:#251039; color:#fbf1e4; padding:var(--section-y) 0; }
.wp-intro h2 { color:#fbf1e4; font-size:clamp(2.5rem,6vw,5rem); line-height:.95; margin:0; }
.wp-wordmark { color:#dcff70; font:800 clamp(3.6rem,11vw,10rem)/.95 var(--font-display); letter-spacing:-.06em; margin:1rem 0; }
.wp-description { max-width:44ch; margin:0 0 2rem; }
.wp-flavors { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); list-style:none; margin:0; padding:0; gap:0; }
.wp-flavors li { background:var(--wp-accent); color:#251039; padding:1.3rem 1rem; min-height:160px; }
.wp-number { font:700 .8rem var(--font-body); }
.wp-flavors h3 { color:#251039; font-size:clamp(1.2rem,2vw,1.8rem); line-height:1; margin:2rem 0 0; }
.wp-follow { display:inline-flex; gap:1rem; align-items:center; min-height:44px; margin-top:1.2rem; color:#fbf1e4; font-weight:700; text-underline-offset:.25em; }
.wp-follow:focus-visible { outline:3px solid #dcff70; outline-offset:4px; }
@media(max-width:699px) {
 .cafe-place-grid { gap:.9rem; }
 .cafe-place-grid figcaption { font-size:.72rem; }
 .wp-flavors { grid-template-columns:minmax(0,1fr); }
 .wp-flavors li { display:grid; grid-template-columns:2rem minmax(0,1fr); gap:.5rem; align-items:center; min-height:0; padding:1.05rem 1rem; }
 .wp-flavors h3 { font-size:1.45rem; margin:0; }
}

/* The original A-frame, framed to the brand sign; full photo opens natively. */
.cafe-place-grid .cp-aframe { grid-column:1/-1; width:100%; max-width:560px; margin:0 auto 1rem; }
.cafe-place-grid .cp-aframe a { position:relative; aspect-ratio:4/5; border-radius:12px; overflow:hidden; }
.cafe-place-grid .cp-aframe picture { position:absolute; inset:0; height:100%; }
.cafe-place-grid .cp-aframe img { width:100%; height:100%; object-fit:cover; object-position:center bottom; }
.cafe-bar .cafe-film-link { color:#dcff70; }
.cafe-bar .v360-video { object-fit:contain; }
.cafe-bar .v360-btn { opacity:1; }

/* Actual brand vehicle footage, kept upright and separate from the retail hero. */
.cafe-jeep { background:#fbf1e4; color:#251039; }
.cafe-jeep-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem 4rem; align-items:center; }
.cafe-jeep-copy h2 { color:#251039; font-size:clamp(3.5rem,8vw,7.5rem); line-height:.92; letter-spacing:-.05em; margin:0 0 1.4rem; }
.cafe-jeep-copy p { max-width:28ch; }
.cafe-jeep figure { margin:0; width:100%; max-width:420px; justify-self:center; }
.cafe-jeep .v360-video { object-fit:contain; }
.cafe-jeep .v360-btn { opacity:1; }
.cafe-jeep .cafe-film-link { color:#251039; }
.cafe-jeep .cafe-film-link:focus-visible { outline-color:#251039; }
@media(max-width:699px) { .cafe-jeep-grid { grid-template-columns:1fr; gap:1.5rem; } .cafe-jeep-copy h2 { font-size:clamp(3.5rem,16vw,6rem); } }

.cafe-visit-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Named images are projected from the source-scoped Core café menu. */
.cafe-signature-menu { margin:2rem 0 3rem; border-top:1px solid currentColor; border-bottom:1px solid currentColor; padding:1rem 0; }
.cafe-signature-menu > summary { cursor:pointer; min-height:44px; font:700 clamp(1.25rem,3vw,1.8rem) var(--font-display); }
.cafe-signature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2rem 1.2rem; padding:1.5rem 0; }
.cafe-signature-grid article { min-width:0; display:flex; flex-direction:column; }
.cafe-signature-grid .signature-item-image { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; background:#fff; border-radius:8px; }
.cafe-signature-grid h3 { margin:1rem 0 .5rem; font-size:1.4rem; }
.cafe-signature-grid p { font-size:.9rem; line-height:1.5; flex:1; }
.signature-source-link { display:inline-block; padding:.65rem 0; font-size:.85rem; font-weight:700; text-underline-offset:.25em; }
.signature-menu-note { max-width:80ch; font-size:.85rem; }
.signature-menu .signature-item-image { display:block; width:100%; max-width:260px; height:auto; aspect-ratio:1; object-fit:contain; background:#fff; margin:1rem 0; border-radius:8px; }
.cafe-signature-menu summary:focus-visible,.signature-source-link:focus-visible { outline:3px solid currentColor; outline-offset:4px; }
@media(max-width:1099px) { .cafe-signature-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:699px) { .cafe-signature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem 1rem; } .cafe-signature-grid h3 { font-size:1.1rem; } }

/* D69: owner-selected café reviews. Plain text only: no stars or platform logos; each rating names its platform. */
.cafe-reviews { background:#251039; color:#fbf1e4; }
.cafe-reviews .lede-sm { max-width:46ch; }
.cafe-review-platforms { display:grid; grid-template-columns:minmax(0,1fr); gap:2.5rem; align-items:start; }
.cafe-review-platform { min-width:0; }
.cafe-review-platform h3 { margin:0 0 .35rem; font-size:clamp(1.5rem,2.6vw,2rem); }
.cafe-review-rating { margin:0 0 1.2rem; font-size:.95rem; color:#e8d9e9; }
.cafe-review-rating strong { color:#fbf1e4; }
.cafe-review-list { display:grid; gap:1rem; margin:0; padding:0; list-style:none; }
.cafe-review-list li { margin:0; }
/* The transparent border is invisible normally and draws the card edge in forced-colors mode. */
.cafe-review { margin:0; padding:clamp(1.25rem,3vw,1.9rem); border:1px solid transparent; border-radius:20px; background:#fbf1e4; color:#251039; }
.cafe-review blockquote { margin:0; padding:0; border:0; }
.cafe-review blockquote p { margin:0; font:600 clamp(1.08rem,1.7vw,1.3rem)/1.45 var(--font-display); color:#251039; overflow-wrap:anywhere; }
.cafe-review blockquote p::before { content:"\201C"; content:"\201C" / ""; display:block; height:.55em; margin-bottom:.15em; font:800 3rem/1 var(--font-display); color:#cc1a66; }
.cafe-review figcaption { margin-top:.9rem; font-size:.9rem; color:#513164; }
.cafe-review-name { font-weight:700; color:#251039; }
.cafe-review cite { font-style:normal; }
.cafe-reviews time { white-space:nowrap; }
.cafe-review-all { display:inline-flex; align-items:center; gap:.35rem; min-height:44px; margin-top:.6rem; font-weight:700; font-size:.95rem; text-underline-offset:.25em; }
.cafe-review-all:focus-visible { outline:3px solid #dcff70; outline-offset:3px; }
.cafe-review-note { margin:2.5rem 0 0; padding-top:1.2rem; border-top:1px solid rgba(251,241,228,.25); font-size:.95rem; color:#e8d9e9; }
@media(min-width:720px) { .cafe-review-platforms { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; } }

/* ---- src/css/60-shop.css ---- */
/* v38 Shop pages: the flavor catalog (flavors/index.html: .cat-*, the quiz .qz), where to buy (.wb-*) and contact (.ct-*).
   Every selector is scoped to one of those classes so nothing leaks to other pages. Flavor colour comes from --fbg/--ffg
   (flavors.json bg/fg), set inline per card. Text never sits on a translucent tint over a flavor colour: every bg/fg pair
   passes 4.5:1 on its own, so tags and pills use borders instead. */

/* ============================================================ Catalog head */
.cat-head { position: relative; overflow: hidden; background:
  radial-gradient(60% 70% at 88% 40%, rgba(131, 72, 154, .55), transparent 70%),
  radial-gradient(60% 80% at 0% 100%, rgba(237, 42, 125, .16), transparent 60%),
  linear-gradient(180deg, var(--acai) 0%, #2C1252 100%); }
.cat-head-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 3rem; align-items: center;
  padding-top: clamp(.9rem, 2.2vw, 2.25rem); padding-bottom: clamp(1.75rem, 3.5vw, 3.25rem); }
.cat-head .crumbs { margin: 0 0 .9rem; }
.cat-kicker, .wb-kicker { display: flex; align-items: center; gap: .55rem; margin: 0 0 .7rem; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sun); }
.cat-dot, .wb-dot { width: .55rem; height: .55rem; flex: none; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 4px rgba(138, 185, 63, .28); }
.cat-h { font-size: clamp(2.6rem, 1.35rem + 4.6vw, 5.6rem); line-height: .92; letter-spacing: -.045em; margin: 0 0 1rem; color: var(--cream); }
.cat-h em { font-style: normal; color: var(--sun); white-space: nowrap; }
.cat-lede { font-size: var(--t-lede); line-height: 1.45; max-width: 44ch; margin: 0 0 1.3rem; color: rgba(251, 241, 228, .92); }
.cat-ctas { display: flex; flex-wrap: wrap; gap: .7rem; }
html:not(.js) .cat-quiz-link { display: none; }

/* Real product links, with readable lids and names. Native horizontal scrolling
   keeps two rows comfortably large on phones; keyboard focus scrolls each link in. */
.cat-lid-browser { min-width:0; }
.cat-lid-hint { margin:0 0 .8rem; color:var(--cream); font-size:.9rem; font-weight:600; }
.cat-lid-hint span { display:block; font-size:.75rem; font-weight:400; margin-top:.25rem; color:var(--sun); }
.cat-lids { list-style:none; margin:0; padding:.4rem .25rem .8rem; display:grid;
  grid-template-rows:repeat(2,auto); grid-auto-flow:column; grid-auto-columns:104px; gap:1rem .85rem;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:thin;
  scrollbar-color:var(--sun) transparent; }
.cat-lids li { min-width:0; margin:0; scroll-snap-align:start; }
.cat-lids a { display:flex; flex-direction:column; align-items:center; gap:.55rem; height:100%;
  padding:.25rem; color:var(--cream); text-decoration:none; text-align:center; border-radius:.5rem; }
.cat-lids img { display:block; width:96px; max-width:100%; height:auto; border-radius:50%;
  box-shadow:0 0 0 2px rgba(251,241,228,.9),0 12px 20px -12px rgba(0,0,0,.6); }
.cat-lids a span { font-family:var(--font-display); font-size:.75rem; font-weight:700; line-height:1.2; }
.cat-lids a:focus-visible { outline:3px solid var(--sun); outline-offset:0; }
.cat-lids a:hover span { text-decoration:underline; text-underline-offset:.2em; }
@media (min-width:1100px) {
  .cat-head-grid { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
  .cat-lids { grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-columns:auto; gap:1.2rem .75rem; overflow:visible; }
  .cat-lids img { width:104px; }
  .cat-lid-hint span { display:none; }
}

/* ============================================================ Catalog grid */
.cat { padding: clamp(1.75rem, 3.5vw, 3rem) 0 calc(var(--section-y) * .8); background: var(--cream); }
.cat-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; }
.cat .flavor-filter { margin: 0; gap: .45rem; }
.cat .ff-label { color: var(--acai); }
.cat .ff-radio + label { min-height: 44px; padding: .45rem 1rem; border-width: 1.5px; font-size: .92rem; }
.cat .ff-radio:checked + label { background: var(--acai); color: var(--cream); }
.cat-key { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0; font-size: .86rem; color: var(--muted); }
.cat-key > span { display: inline-flex; align-items: center; gap: .45rem; }
.cat-key .cat-avail { --ffg: var(--acai); --fbg: var(--cream); color: var(--acai); }
.cat .ff-count { margin: .5rem 0 0; min-height: 1.3em; }
@supports not selector(:has(*)) { .cat .flavor-filter, .cat .ff-count { display: none; } }
@media (max-width: 639px) {
  .cat-wide { display: none; }
  .cat-lede { font-size: 1.05rem; margin-bottom: 1rem; }
  .cat-ctas .btn { flex: 1 1 auto; }
  /* The filter is one scrolling row of chips on phones, so the first cards reach the first screen */
  /* A fieldset scrolls inside its content box, so the side space comes from the first chip and an end spacer, not padding */
  .cat .flavor-filter { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 5px 0 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .cat .flavor-filter .ff-label { margin-left: var(--gutter); }
  .cat .flavor-filter::after { content: ""; flex: none; width: calc(var(--gutter) - .45rem); height: 1px; }
  .cat .flavor-filter::-webkit-scrollbar { display: none; }
  .cat .ff-radio + label { flex: none; white-space: nowrap; }
  .cat-bar { display: block; }
  .cat-key { font-size: .8rem; gap: .35rem .9rem; margin-top: .55rem; }
}
.flavor-filter-wrap:has(#ff-first:checked) .card-flavor:not([data-state="first"]) { display: none; }

.cat-grid { list-style:none; margin:.6rem 0 0; padding:0; display:grid;
  grid-template-columns:minmax(0,1fr); gap:28px; }
@media (min-width:640px) { .cat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } }
@media (min-width:1100px) { .cat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; } }
.cat-card { min-width:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.cat .cat-link { position:relative; display:flex; flex-direction:column; height:auto; flex:1 0 auto; padding:0;
  border-radius:20px; overflow:hidden; isolation:isolate; background:var(--fbg); color:var(--ffg);
  text-decoration:none; --focus:var(--ink); transition:box-shadow var(--dur-2) var(--ease-out); }
.cat .cat-link:hover { transform:none; color:var(--ffg); box-shadow:var(--tile-shadow); }
.cat .cat-link:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
.cat .cat-card img { border-radius:0; }
.cat-art { position:relative; display:block; }
.cat-field, .cat .cat-pint { display:block; width:100%; height:auto; }
.cat .cat-cup-link { display:flex; flex-direction:row; height:auto; flex:0 0 auto; align-items:center; gap:1rem; padding:0 1.25rem 0 .25rem; min-height:120px; border:1px solid var(--line); border-radius:20px; color:var(--ink); background:var(--paper); text-decoration:none; }
.cat .cat-cup { display:block; flex:none; width:120px; height:150px; object-fit:contain; }
.cat-cup-link>span { display:flex; flex-direction:column; gap:.4rem; font-size:.9rem; }
.cat-cup-link strong { font-family:var(--font-display); font-size:1.2rem; }
.cat-cup-link:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
.cat-cup-link:hover>span>span { text-decoration:underline; text-underline-offset:.2em; }

.cat-text { display: flex; flex-direction: column; gap: .28rem; flex: 1; padding:1rem 1.25rem 1.3rem; }
.cat-line { font-family: var(--font-display); font-weight: 700; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; }
.cat-name { font-family: var(--font-display); font-weight: 800; font-size:clamp(1.4rem,1rem + .8vw,1.8rem); line-height: 1.04; letter-spacing: -.02em; }
.cat-taste { font-size: .9rem; line-height: 1.35; }
.cat-zs { font-size: .84rem; font-weight: 700; }
.cat-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: .45rem; }
.cat-avail { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .62rem .2rem .48rem; border-radius: 999px; border: 1.5px solid currentColor;
  font-family: var(--font-display); font-weight: 700; font-size: .76rem; line-height: 1.2; white-space: nowrap; }
.cat-avail::before { content: ""; width: .5rem; height: .5rem; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.cat-avail[data-state="first"] { background: var(--ffg); color: var(--fbg); border-color: var(--ffg); }
.cat-avail[data-state="first"]::before { background: var(--leaf); box-shadow: none; }
.cat-tag { padding: .2rem .6rem; border-radius: 999px; border: 1.5px solid currentColor; font-size: .76rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
@media (min-width:768px) { .cat-text { padding:1rem 1.1rem 1.2rem; } }
@media (prefers-reduced-motion:reduce) { .cat .cat-link, .qz::before { transition:none; } }
.cat-note { margin: 1.1rem 0 0; font-size: .86rem; color: var(--muted); max-width: 80ch; }

/* ============================================================ Formats: pint and cup to scale */
.cat-formats { padding: var(--section-y) 0; background: var(--paper); }
.cat-fm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 4rem; align-items: center; }
@media (min-width: 960px) { .cat-fm-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cat-fm-copy h2 { font-size: var(--t-h2); line-height: .95; margin: 0 0 .6rem; }
.cat-fm-copy .lede-sm { margin: 0; }
.cat-fm-list { margin: 1.5rem 0 0; }
.cat-fm-list > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem 1.25rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.cat-fm-list > div:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 560px) { .cat-fm-list > div { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); } }
.cat-fm-list dt { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; line-height: 1.2; }
.cat-fm-list dd { margin: 0; }
.cat-fm-list b { display: block; font-family: var(--font-display); font-weight: 700; color: var(--acai); }
.cat-fm-list a { font-weight: 700; }
.cat-fm-art { margin: 0; }
@media (max-width: 959px) { .cat-fm-art { width: 100%; max-width: 560px; justify-self: center; } }
.cat-fm-stage { position: relative; display: block; aspect-ratio: 1 / .78; border-radius: var(--radius-lg); overflow: hidden; background: var(--fbg); box-shadow: var(--tile-shadow); }
.cat-fm-sun { position: absolute; left: 20%; top: 4%; width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .14) 62%, transparent 72%); }
.cat-fm-pint, .cat-fm-cup { position: absolute; bottom: 1%; width: 50%; height: auto; filter: var(--pack-shadow); }
.cat-fm-pint { right: 6%; }
.cat-fm-cup { left: 5%; z-index: 1; }
.cat-fm-art figcaption { margin-top: .75rem; font-size: .86rem; color: var(--muted); }

/* ============================================================ Quiz (#quiz) */
.qz { position: relative; overflow: hidden; --ffg: var(--qfg, var(--ink)); --fbg: var(--qbg, var(--sun)); }
.qz::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur-3) ease;
  background: radial-gradient(50% 55% at 24% 46%, rgba(255, 255, 255, .34), transparent 70%), radial-gradient(50% 50% at 100% 100%, rgba(31, 11, 61, .12), transparent 70%); }
.qz.has-result::before { opacity: 1; }
.qz .wrap { position: relative; }
.qz .quiz-head h2 { font-size: var(--t-h2); line-height: .95; }
.qz .quiz-body { max-width: none; }
.qz .quiz-opt { min-height: 72px; }
.qz .quiz-back, .qz .quiz-again, .qz-link { display: inline-flex; align-items: center; min-height: 44px; }

.qz-result { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem 3.5rem; align-items: center; }
@media (min-width: 900px) { .qz-result { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.qz-art { position: relative; width: min(100%, 560px); aspect-ratio: 1 / .92; justify-self: center; }
.qz-sun { position: absolute; left: 14%; top: 4%; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .16) 62%, transparent 72%); }
.qz-fruit { position: absolute; left: 2%; top: 6%; width: 40%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .88), var(--tile-shadow); }
.qz-fruit img { width: 100%; height: 100%; object-fit: cover; }
.qz-pint { position: absolute; width: 66%; right: 4%; bottom: -4%; height: auto; filter: var(--pack-shadow); transform: rotate(-5deg); transform-origin: 50% 90%; }
.qz-pack-note { position: absolute; left: 0; right: 0; bottom: -2.4rem; margin: 0; text-align: center; font-size: .76rem; line-height: 1.3; opacity: .85; }
.qz-text { min-width: 0; }
.qz .quiz-kicker { margin: 0 0 .35rem; }
.qz .quiz-name { font-size: clamp(2.4rem, 1.3rem + 4.2vw, 4.6rem); line-height: .93; letter-spacing: -.04em; margin: 0 0 .7rem; }
.qz-taste { font-size: var(--t-lede); line-height: 1.4; font-weight: 500; margin: 0 0 .5rem; max-width: 34ch; }
.qz-zs { margin: 0 0 .5rem; font-weight: 700; }
.qz-why { margin: .9rem 0 1rem; padding: .9rem 1.1rem 1rem; border: 2px solid currentColor; border-radius: 20px; max-width: 36rem; }
.qz-why-h { margin: 0 0 .5rem; font-family: var(--font-display); font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; }
.qz-chips { list-style: none; margin: 0 0 .55rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.qz-chips li { padding: .22rem .7rem; border-radius: 999px; background: var(--ffg); color: var(--fbg); font-weight: 700; font-size: .86rem; }
.qz-why p { margin: 0; font-size: 1rem; line-height: 1.45; }
.qz-avail { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.1rem; padding: .42rem .95rem .42rem .7rem; border-radius: 999px; border: 2px solid currentColor;
  font-family: var(--font-display); font-weight: 700; font-size: .92rem; line-height: 1.25; }
.qz-avail::before { content: ""; width: .6rem; height: .6rem; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; }
.qz-avail[data-state="first"] { background: var(--ffg); color: var(--fbg); border-color: var(--ffg); }
.qz-avail[data-state="first"]::before { background: var(--leaf); box-shadow: none; }
.qz .quiz-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .5rem; }
.qz-more { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.4rem; }
.qz-link { background: none; border: 0; padding: .3rem 0; font: inherit; font-weight: 700; color: currentColor; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.qz-link svg { margin-right: .4rem; }
.qz .quiz-toast { margin: .4rem 0 0; }
@media (max-width: 899px) {
  .qz-art { width: min(100%, 380px); margin: -.5rem 0 2.6rem; }
  .qz .quiz-actions .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .qz-result .qz-pint { animation: qz-pint var(--dur-3) var(--ease-spring) both; animation-delay: 80ms; }
  .qz-result .qz-fruit { animation: qz-pop var(--dur-3) var(--ease-out) both; }
  @keyframes qz-pint { from { opacity: 0; transform: translate3d(0, 10%, 0) rotate(8deg) scale(.9); } }
  @keyframes qz-pop { from { opacity: 0; transform: scale(.8); } }
}

/* The mini waitlist: offered only after the result is on screen. One static form per flavor (the form script binds
   forms at load), shown for the flavor that came up. */
.qz-join[hidden], .qz-form[hidden] { display: none !important; }
.qz-join { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem 3rem; align-items: end; margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 2px solid currentColor; }
@media (min-width: 900px) { .qz-join { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .qz-join-note { grid-column: 2; } }
.qz-join-h { margin: 0 0 .3rem; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1; letter-spacing: -.03em; color: inherit; }
.qz-join-p { margin: 0; max-width: 42ch; }
.qz .qz-form { margin: 0; max-width: none; gap: .4rem; }
.qz-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 7.5rem); gap: .65rem; align-items: end; }
.qz-form-row .qz-field-email { grid-column: 1 / -1; }
.qz-form-row .btn { grid-column: 1 / -1; min-height: 52px; }
@media (min-width: 640px) {
  .qz-form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 8rem) auto; }
  .qz-form-row .qz-field-email, .qz-form-row .btn { grid-column: auto; }
}
.qz-form .field { margin: 0; }
.qz-form .field label { color: inherit; }
.qz-form .field input:focus-visible { outline-color: var(--ffg); }
.qz .qz-form .form-status { color: inherit; min-height: 0; }
.qz .qz-form .form-status:empty { display: none; }
.qz .qz-form .form-done { justify-items: start; text-align: left; padding: .4rem 0; }
.qz-join-note { margin: 0; font-size: .86rem; }
.qz-join-note a { color: inherit; font-weight: 700; }

/* ============================================================ Where to buy: hero with the waitlist */
.wb-hero { position: relative; overflow: hidden; background:
  radial-gradient(60% 60% at 30% 70%, rgba(131, 72, 154, .5), transparent 70%),
  radial-gradient(60% 80% at 100% 0%, rgba(237, 42, 125, .16), transparent 60%),
  linear-gradient(180deg, var(--acai) 0%, #2C1252 100%); }
.wb-hero-grid { display: flex; flex-direction: column; gap: 1rem; padding-top: clamp(.9rem, 2.2vw, 2.25rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.wb-hero .crumbs { margin: 0 0 .9rem; }
.wb-h { font-size: clamp(2.5rem, 1.3rem + 4.4vw, 5.2rem); line-height: .92; letter-spacing: -.045em; margin: 0 0 1rem; color: var(--cream); max-width: 11ch; }
.wb-h em { font-style: normal; color: var(--sun); }
.wb-lede { font-size: var(--t-lede); line-height: 1.45; max-width: 40ch; margin: 0 0 1.25rem; color: rgba(251, 241, 228, .92); }
.wb-art { position: relative; width: min(100%, 500px); aspect-ratio: 1 / .64; }
.wb-sun { position: absolute; left: 20%; top: 2%; width: 58%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFE68A 0%, var(--sun) 38%, var(--mango) 78%, var(--flame) 100%);
  box-shadow: 0 0 0 12px rgba(255, 204, 4, .08), 0 0 100px 8px rgba(250, 163, 34, .3); }
.wb-pint { position: absolute; height: auto; filter: var(--pack-shadow); transform-origin: 50% 90%; }
.wb-pint-os { width: 46%; left: 10%; bottom: -8%; z-index: 2; transform: rotate(-7deg); }
.wb-pint-mg { width: 40%; left: 48%; bottom: -2%; z-index: 1; transform: rotate(8deg); }
.wb-sticker { position: absolute; z-index: 3; right: 6%; top: 0; width: clamp(84px, 22%, 118px); aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: .1rem; padding: .5rem;
  background: var(--pink-deep); color: var(--white); transform: rotate(10deg); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); font-family: var(--font-display); line-height: 1.05; }
.wb-sticker span { font-size: clamp(.62rem, .52rem + .35vw, .78rem); font-weight: 600; }
.wb-sticker b { font-size: clamp(.84rem, .64rem + .6vw, 1.04rem); font-weight: 800; }

.wb-join { position: relative; background: var(--cream); color: var(--ink); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2.1rem); --focus: var(--acai);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .7), 10px 10px 0 var(--sun); }
.wb-hero .wb-join-h { margin: 0 0 .35rem; font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.4rem); line-height: 1; letter-spacing: -.035em; color: var(--acai); }
.wb-join-p { margin: 0; color: var(--muted); }
.wb-join a:not(.btn) { color: var(--acai); font-weight: 700; }
.wb-join a:not(.btn):hover { color: var(--pink-deep); }
.wb-form { margin-top: 1.1rem; gap: .95rem; }
.wb-form .form-row { gap: .95rem; }
.wb-form .field label { color: var(--ink); }
.wb-form .field input:focus-visible, .wb-form .field select:focus-visible, #contact .field input:focus-visible, #contact .field select:focus-visible, #contact .field textarea:focus-visible { outline-color: var(--acai); }
.wb-form .field select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231F0B3D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .85rem center / 1.1rem; }
.wb-note { display: flex; align-items: center; gap: .45rem; min-height: 1.5em; margin: .45rem 0 0; font-size: .92rem; font-weight: 700; color: var(--acai); }
.wb-note:empty { margin: 0; min-height: 0; }
.wb-note:not(:empty)::before { content: ""; width: 1.15rem; height: 1.15rem; flex: none; border-radius: 50%;
  background: var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%231F0B3D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.wb-form .form-actions { margin-top: .2rem; }
.wb-submit { flex: 1 1 100%; }
@media (min-width: 640px) { .wb-submit { flex: 0 0 auto; } }
.wb-join .wb-privacy { margin: 0; color: var(--muted); }
.wb-join .form-status.ok { color: var(--leaf-deep); }

@media (max-width: 959px) {
  .wb-copy { display: contents; }
  .wb-hero .crumbs { order: 1; margin-bottom: 0; }
  .wb-kicker { order: 2; margin-bottom: 0; }
  .wb-h { order: 3; margin-bottom: 0; font-size: clamp(2.4rem, 1.2rem + 5.2vw, 3.6rem); }
  .wb-lede { order: 4; margin: 0 0 .4rem; }
  .wb-join { order: 5; }
  .wb-art { order: 6; align-self: center; margin-top: 1rem; width: min(100%, 420px); }
}
@media (min-width: 960px) {
  .wb-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 1.5rem clamp(2.5rem, 5vw, 5rem); align-items: center; }
  .wb-art { margin-top: .5rem; }
}

/* ============================================================ Where to buy: what's coming, and when */
.wb-when { padding: var(--section-y) 0; background: var(--cream); }
.wb-head { max-width: 46rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.wb-head h2 { font-size: var(--t-h2); line-height: .95; margin: 0 0 .5rem; }
.wb-head .lede-sm { margin: 0; }
.wb-when-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 900px) { .wb-when-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 1.5rem; } }
.wb-first, .wb-next { position: relative; border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2.1rem); min-width: 0; }
.wb-first { overflow: hidden; background: radial-gradient(60% 50% at 50% 62%, rgba(255, 255, 255, .2), transparent 70%), #1C7D7E; color: var(--white); --focus: var(--sun); }
.wb-first h3, .wb-next h3 { font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.35rem); line-height: 1; letter-spacing: -.03em; margin: 0 0 .5rem; color: inherit; }
.wb-first p, .wb-next p { margin: 0; }
.wb-avail { margin: 0 0 .9rem !important; }
.wb-first .wb-avail { background: var(--sun); color: var(--ink); border-color: var(--sun); }
.wb-first .wb-avail::before { background: var(--leaf-deep); box-shadow: none; }
.wb-next .wb-avail { background: transparent; color: var(--acai); }
.wb-shelf { position: relative; display: flex; align-items: flex-end; justify-content: center; margin: 1rem -2% .25rem; }
.wb-shelf::before { content: ""; position: absolute; left: 2%; right: 2%; bottom: 3.6%; height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .3); box-shadow: 0 14px 22px -8px rgba(0, 0, 0, .35); }
.wb-shelf img { position: relative; flex: 0 0 26%; width: 26%; height: auto; margin: 0 -1.5%; filter: var(--pack-shadow); }
.wb-sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; margin: .6rem 0 1rem; }
.wb-sizes > div { padding-top: .6rem; border-top: 1.5px solid rgba(255, 255, 255, .35); }
.wb-sizes dt { font-family: var(--font-display); font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.wb-sizes dd { margin: .15rem 0 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(.98rem, .9rem + .3vw, 1.15rem); line-height: 1.2; }
.wb-links { display: flex; flex-wrap: wrap; gap: .25rem 1.3rem; }
.wb-first .wb-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); font-weight: 700; }
.wb-first .wb-links a::after { content: " →"; white-space: pre; }
.wb-first .wb-links a:hover { color: var(--sun); }
.wb-next { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); }
.wb-lids { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.wb-lids a { display: flex; align-items: center; gap: .6rem; min-height: 52px; height: 100%; padding: .35rem .75rem .35rem .4rem; border-radius: 18px; text-decoration: none;
  color: var(--ink); font-weight: 700; font-size: .9rem; line-height: 1.15; background: var(--cream); transition: background-color var(--dur-1) ease, color var(--dur-1) ease; }
.wb-lids a:hover { background: var(--cbg); color: var(--cfg); }
.wb-lids img { width: 40px; height: 40px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px var(--white), 0 4px 10px -4px rgba(0, 0, 0, .45); }
.wb-zs { display: block; font-weight: 500; font-size: .78rem; }
.wb-facts { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.wb-facts li { margin: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: .15rem 1rem; align-items: start; padding: 1.1rem 1.2rem 1.2rem; border-radius: var(--radius); background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); }
.wb-facts li > :not(.wb-ico) { grid-column: 2; }
.wb-ico { grid-row: 1 / span 2; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sun); color: var(--ink); }
@media (min-width: 900px) {
  .wb-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
  .wb-facts li { display: block; padding: 1.2rem 1.3rem 1.35rem; }
  .wb-ico { margin-bottom: .7rem; }
}
.wb-facts h3 { font-size: 1.25rem; line-height: 1.1; margin: .1rem 0 .3rem; }
/* This page's footer has no waitlist block of its own (the page is the waitlist), so its grid needs the top space. */
body.page-wtb .site-footer .wrap > .ft-grid:first-child { padding-top: clamp(2.75rem, 5vw, 4rem); }
.wb-facts p { margin: 0; }
.wb-facts a { font-weight: 700; }
.wb-facts a::after { content: " →"; white-space: pre; }
@media (prefers-reduced-motion: reduce) { .wb-lids a { transition: none; } }

/* ============================================================ Contact (light touch) */
.ct-shop { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1.1rem 0 0; padding: .75rem 1rem; max-width: 46rem; border-radius: 18px; border: 1.5px solid rgba(251, 241, 228, .35); font-size: .98rem; }
.ct-shop > span { flex: 1 1 18rem; }
.ct-shop strong { color: var(--sun); }
.ct-shop .btn { flex: none; }
#contact > .split { align-items: start; }
#contact > .split > div:first-child > .form-card { margin-top: .25rem; }
.ct-direct h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.ct-direct .contact-list li { padding: .9rem 0 0; border-top: 1px solid var(--line); }
.ct-direct .contact-list li:first-child { padding: 1.1rem 1.2rem 1.2rem; border: 0; border-radius: var(--radius); background: var(--acai); color: var(--cream); --focus: var(--sun); }
.ct-direct .contact-list li:first-child a { color: var(--sun); }
.ct-direct .contact-list li:first-child strong { font-size: 1.35rem; color: var(--cream); }
.ct-role { display: block; margin: .1rem 0 .5rem; font-weight: 600; color: rgba(251, 241, 228, .88); }

.cat .cat-cup-link:hover { transform:none; color:var(--ink); box-shadow:none; }
/* Following a cup row (30-product.js): the pint card stays out of the page transition, the cup picture grows into the
   flavor page's gallery instead. The !important beats the card's inline name. */
.cat-link.is-cup-away { view-transition-name: none !important; }

/* ---- src/css/61-flavor-finder.css ---- */
/* An editorial taste experience. Photography and readable product stories lead. */
.quiz { background:var(--qbg,#eed4ba); color:var(--qfg,#251039); }
.quiz-head { margin-bottom:2rem; }
.quiz-head h2 { font-size:clamp(2.9rem,6vw,5rem); line-height:.95; letter-spacing:-.05em; }
.quiz-head .lede-sm { max-width:40ch; }
.quiz-body { max-width:none; }
.finder-step { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.finder-art { position:relative; aspect-ratio:1; overflow:hidden; border-radius:4px; }
.finder-art > img { display:block; width:100%; height:100%; object-fit:cover; }
.finder-art > span { position:absolute; left:1rem; bottom:.2rem; color:white; font:800 clamp(5rem,11vw,10rem)/1 var(--font-display); letter-spacing:-.07em; text-shadow:0 2px 12px #25103960; }
.quiz-progress { font-size:.7rem; letter-spacing:.08em; justify-content:space-between; }
.quiz-dots i { height:2px; border-radius:0; }
.quiz-qtext { font-size:clamp(2rem,3.2vw,3.1rem); letter-spacing:-.045em; margin-bottom:1.2rem; }
.quiz-opts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.quiz-opt { min-height:112px; display:flex; align-items:center; gap:.75rem; padding:.75rem; border:1px solid #25103944; border-radius:3px; box-shadow:none; background:#fbf1e470; font-size:.95rem; text-align:left; transition:background .2s,border-color .2s; }
.quiz-opt > img { width:48px; height:64px; object-fit:cover; border-radius:2px; }
.quiz-opt span:not(.finder-arrow) { min-width:0; }
.quiz-opt b { display:block; line-height:1.15; }
.quiz-opt small { display:block; font:400 .69rem/1.3 var(--font-body); margin-top:.4rem; }
.quiz-opt .finder-arrow { margin-left:auto; font-size:1.2rem; }
.quiz-opt:hover,.quiz-opt:active { transform:none; box-shadow:none; border-color:#251039; background:#fbf1e4; }
.quiz-opt[aria-pressed="true"] { background:#251039; color:#fbf1e4; }
.quiz-opt:focus-visible { outline:3px solid #251039; outline-offset:3px; }
.quiz-nav { margin:.6rem 0 0; min-height:44px; font-size:.75rem; display:flex; align-items:center; }
.quiz-back,.qz-link { min-height:44px; }
.qz-art { border-radius:4px; overflow:hidden; display:flex; flex-direction:column; aspect-ratio:auto; }
.qz-fruit { border:0; border-radius:0; inset:0; width:100%; height:100%; opacity:.85; }
.qz-fruit img { width:100%; height:100%; object-fit:cover; }
.qz-pint { position:relative; inset:auto; z-index:1; width:65%; margin:0 auto; transform:none; filter:drop-shadow(0 18px 22px #25103950); }
.qz-art .qz-pack-note { position:relative; inset:auto; z-index:1; opacity:1; font-size:.63rem; background:var(--qbg); padding:.6rem; margin:0; width:100%; }
.qz-result { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,4rem); }
.quiz-name { font-size:clamp(2.5rem,4.1vw,4rem); letter-spacing:-.05em; line-height:.98; }
.finder-story { margin:1rem 0; max-width:36ch; }
.qz-why { margin:1.3rem 0; padding:1rem 0; border:0; border-top:1px solid currentColor; border-bottom:1px solid currentColor; background:none; border-radius:0; }
.qz-why p:last-child { font-size:.73rem; margin-bottom:0; }
.qz-chips li { color:inherit; border:0; background:#fbf1e455; border-radius:2px; padding:.4rem .6rem; }
.quiz .qz-avail[data-state] { background:none; color:inherit; border:0; padding:0; font-size:.8rem; border-radius:0; }
.quiz .qz-avail::before { display:none; }
.quiz .quiz-actions .btn-ink { background:#251039; color:#fbf1e4; }
.finder-alternatives { margin-top:2rem; border-top:1px solid currentColor; padding-top:1rem; }
.finder-alternatives h4 { font-size:.83rem; text-transform:uppercase; letter-spacing:.1em; }
.finder-alternatives ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); list-style:none; gap:1rem; padding:0; margin:0; }
.finder-alternatives a { display:flex; align-items:center; min-height:120px; gap:.75rem; color:inherit; text-decoration:none; border-bottom:1px solid currentColor; }
.finder-alternatives img { width:70px; height:100px; object-fit:contain; }
.finder-alternatives b { font:800 1rem/1.1 var(--font-display); }
.finder-alternatives small { display:block; font-size:.72rem; line-height:1.3; margin-top:.4rem; }
.finder-alternatives a>span:last-child { margin-left:auto; font-size:1.5rem; }
.finder-alternatives a:focus-visible { outline:3px solid currentColor; outline-offset:3px; }
.finder-invitation-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.finder-invitation h2 { font-size:clamp(2.8rem,5vw,4.8rem); line-height:.97; letter-spacing:-.05em; }
.finder-invitation-art { display:block; position:relative; aspect-ratio:1.25; overflow:hidden; color:var(--cream); }
.finder-invitation-art img { width:100%; height:100%; object-fit:cover; }
.finder-invitation-art span { position:absolute; bottom:0; left:0; right:0; padding:2rem 1.2rem 1.2rem; background:linear-gradient(transparent,#251039dd); font:800 1.4rem var(--font-display); }
@media(max-width:899px) {
 .finder-step,.qz-result,.finder-invitation-grid { grid-template-columns:1fr; gap:1.4rem; }
 .quiz-head { margin-bottom:1.4rem; }
 .quiz-head h2 { font-size:3rem; }
 .finder-art { aspect-ratio:2.3; }
 .finder-art > span { font-size:5rem; }
 .quiz-qtext { font-size:2.15rem; margin-bottom:.9rem; }
 .quiz-opt { min-height:88px; padding:.55rem; gap:.5rem; font-size:.84rem; }
 .quiz-opt > img { width:32px; height:48px; }
 .quiz-opt small { font-size:.63rem; }
 .quiz-opt .finder-arrow { display:none; }
 .qz-art { max-width:450px; width:100%; margin:auto; }
 .qz-pint { width:60%; height:280px; object-fit:contain; }
 .quiz-name { font-size:2.7rem; }
 .finder-alternatives ul { grid-template-columns:1fr; gap:.3rem; }
 .finder-invitation-art { aspect-ratio:1.45; }
}

/* ---- src/css/62-flavor-flight.css ---- */
/* A restrained, product-led companion to the full-range and 3D experiences. */
.flight-launch { display:inline-flex; align-items:center; justify-content:center; gap:5px; margin-left:auto; flex:none; min-width:58px; min-height:44px; border:1.5px solid #fbf1e480; border-radius:99px; background:transparent; color:#fbf1e4; cursor:pointer; font-size:12px; font-weight:700; }
.flight-launch:hover { background:#dcff70; border-color:#dcff70; color:#36134d; }
@media(min-width:960px) { .flight-launch { order:2; margin-left:0; } .header-row { gap:clamp(.65rem,1.1vw,1rem); } .site-nav { margin-left:auto; } }
.flight-save { display:inline-flex; align-items:center; min-height:44px; padding:.5rem 0; border:0; background:transparent; color:inherit; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:.88rem; text-decoration:underline; text-underline-offset:4px; }
.flight-save[aria-pressed="true"] { text-decoration:none; }
.hx-solo-info .flight-save { font-size:.8rem; min-height:44px; padding:0; }
.cat-card { display:flex; flex-direction:column; }
.cat .cat-link { height:auto; flex:1; }
.cat-card>.flight-save { align-self:flex-start; color:#36134d; padding:.45rem .3rem; margin-top:2px; }
.flight-dialog { width:min(1100px,calc(100% - 48px)); max-width:none; max-height:92vh; max-height:92dvh; padding:0; border:0; border-radius:28px; background:#fbf1e4; color:#36134d; box-shadow:0 30px 120px #0006; overscroll-behavior:contain; }
.flight-dialog::backdrop { background:#1c082ec9; backdrop-filter:blur(8px); }
.flight-lock { overflow:hidden; }
.flight-top { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 32px; background:#36134d; color:#fbf1e4; }
.flight-kicker { margin:0 0 6px; color:#dcff70; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.13em; }
.flight-top h2 { margin:0; font-size:clamp(2.3rem,5vw,4rem); line-height:1; letter-spacing:-.045em; }
.flight-close { display:inline-flex; align-items:center; justify-content:center; gap:14px; flex:none; min-height:44px; padding:8px 16px; border:1px solid #fbf1e480; border-radius:99px; background:transparent; color:inherit; font-weight:700; cursor:pointer; }
.flight-close span { font-size:24px; font-weight:400; line-height:1; }
.flight-body { padding:22px 32px 16px; }
.flight-intro { margin:0 0 18px; max-width:66ch; font-size:1.05rem; line-height:1.5; }
.flight-presets { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:20px; }
.flight-presets>span { font-size:.75rem; font-weight:700; margin-right:8px; }
.flight-presets button { min-height:44px; padding:8px 14px; border:1px solid #36134d45; border-radius:99px; background:transparent; color:#36134d; font-size:.8rem; font-weight:700; cursor:pointer; }
.flight-presets button:hover { background:#dcff70; }
.flight-picker { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:6px; margin-bottom:20px; }
.flight-picker button { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; min-width:0; padding:8px 2px; border:2px solid transparent; border-radius:14px; background:transparent; color:#36134d; font-family:var(--font-display); font-size:.7rem; font-weight:700; line-height:1.2; cursor:pointer; }
.flight-picker button[aria-pressed="true"] { border-color:#36134d; background:#dcff70; }
.flight-picker img { width:48px; height:48px; border-radius:50%; box-shadow:0 4px 12px #36134d1a; }
.flight-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; border-radius:22px; }
.flight-card { min-width:0; background:white; border:1px solid #36134d25; border-radius:22px; overflow:hidden; display:flex; flex-direction:column; }
.flight-art { position:relative; height:224px; background:radial-gradient(ellipse at 50% 60%,#ffffff55,transparent 65%),var(--flight-bg); color:var(--flight-fg); }
.flight-art>a { display:block; width:100%; height:100%; }
.flight-art picture { display:flex; align-items:center; justify-content:center; height:100%; }
.flight-art img { display:block; height:90%; width:auto; max-width:80%; object-fit:contain; margin:auto; transform:rotate(-6deg); transition:transform .4s; }
.flight-art>a:hover img { transform:rotate(0deg) scale(1.05); }
.flight-number { position:absolute; top:12px; left:14px; font-family:var(--font-display); font-size:1.7rem; font-weight:800; opacity:.55; pointer-events:none; }
.flight-remove { position:absolute; top:8px; right:8px; z-index:1; width:44px; height:44px; border:1px solid currentColor; border-radius:50%; background:var(--flight-bg); color:var(--flight-fg); font-size:24px; line-height:1; cursor:pointer; }
.flight-card-copy { padding:20px; display:flex; flex-direction:column; flex:1; }
.flight-card h3 { font-size:1.65rem; line-height:1; letter-spacing:-.035em; margin:0 0 8px; }
.flight-taste { font-size:.88rem; line-height:1.5; margin:0 0 12px; }
.flight-zs { font-size:.8rem; font-weight:700; margin:0 0 8px; }
.flight-card dl { margin:0; font-size:.8rem; }
.flight-card dl>div { border-top:1px solid #36134d20; padding:10px 0; }
.flight-card dt { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.flight-card dd { margin:0; line-height:1.45; }
.flight-card-actions { display:flex; flex-direction:column; gap:4px; margin-top:auto; padding-top:14px; font-size:.82rem; font-weight:700; }
.flight-card-actions a { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; color:#36134d; text-underline-offset:4px; }
.flight-card-actions .flight-meet { padding:8px 12px; border-radius:99px; background:#36134d; color:#fbf1e4; text-decoration:none; }
.flight-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:365px; padding:20px; border:1.5px dashed #36134d50; border-radius:22px; background:#f0e7dd; text-align:center; }
.flight-empty>span { color:#765986; font-family:var(--font-display); font-weight:800; font-size:5rem; line-height:1; letter-spacing:-.05em; }
.flight-empty p { font-family:var(--font-display); font-size:1.4rem; font-weight:700; line-height:1.1; }
.flight-empty button { min-height:44px; border:0; background:transparent; color:#36134d; cursor:pointer; font-size:.85rem; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.flight-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:22px; }
.flight-note { margin:4px 0; max-width:60ch; font-size:.72rem; line-height:1.5; }
.flight-actions { display:flex; align-items:center; gap:12px; flex:none; flex-wrap:wrap; }
.flight-actions button { min-height:44px; }
.flight-clear { border:0; background:transparent; color:#36134d; font-size:.75rem; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.flight-actions button:disabled { opacity:.6; cursor:default; }
.flight-message { margin:10px 0 0; min-height:1.5em; font-size:.8rem; font-weight:700; }
.flight-message input { display:block; width:100%; padding:12px; margin-top:8px; color:#36134d; background:white; border:1px solid #36134d; }
.flight-toast { position:fixed; z-index:10010; bottom:calc(84px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); padding:14px 20px; margin:0; border:1px solid #dcff70; border-radius:18px; background:#36134d; color:#fbf1e4; box-shadow:0 8px 30px #0004; font-size:.85rem; pointer-events:none; }
.flight-swipe { display:none; }
@media(max-width:759px) {
  .flight-dialog { width:100%; height:100dvh; max-height:100dvh; margin:0; border-radius:0; }
  .flight-top { padding:20px; }
  .flight-body { padding:20px 16px 24px; }
  .flight-intro { font-size:.94rem; }
  .flight-presets { gap:4px; }
  .flight-presets>span { flex-basis:100%; margin-bottom:2px; }
  .flight-presets button { font-size:.73rem; padding:8px 10px; }
  .flight-picker { display:flex; overflow-x:auto; gap:4px; padding-bottom:8px; scroll-snap-type:x proximity; }
  .flight-picker button { flex:none; width:78px; scroll-snap-align:start; }
  .flight-cards { display:flex; overflow-x:auto; gap:12px; scroll-snap-type:x mandatory; padding-bottom:12px; border-radius:0; }
  .flight-card,.flight-empty { flex:none; width:min(80vw,350px); scroll-snap-align:start; }
  .flight-swipe { display:block; margin:0 0 10px; font-size:.72rem; font-weight:700; }
  .flight-art { height:210px; }
  .flight-bottom { flex-direction:column; align-items:stretch; gap:12px; }
  .flight-actions { order:-1; }
  .flight-actions .btn { flex:1 1 130px; }
}
@media(prefers-reduced-motion:reduce) { .flight-art img { transition:none; } .flight-art>a:hover img { transform:rotate(-6deg); } .flight-cards,.flight-picker { scroll-behavior:auto; } }

/* ---- src/css/65-trade.css ---- */
/* v38 Trade pages: work-with-us.html (.wx-*), trade.html (.tr-*), sell-sheets/index.html (.ss-*) and the few
   pieces they share (.tx-*). Every selector is scoped to one of those prefixes so nothing leaks to other pages. */

/* ---------- Shared ---------- */
.tx-avail { margin: 0; max-width: 50ch; padding-left: .95rem; border-left: 3px solid var(--leaf); font-size: .98rem; line-height: 1.45; color: rgba(251, 241, 228, .88); }
.tx-avail strong { display: block; color: var(--sun); font-weight: 700; }
.tx-note { margin: 1.1rem 0 0; color: var(--muted); }
.on-dark .tx-note { color: rgba(251, 241, 228, .78); }

.tx-dl { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.tx-dl a { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; box-sizing: border-box; padding: .4rem .95rem .4rem .45rem; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1.5px rgba(31, 11, 61, .22); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: .93rem; line-height: 1.2; text-decoration: none; transition: box-shadow .2s ease, color .2s ease; }
.tx-dl a:hover { box-shadow: inset 0 0 0 2px var(--acai); color: var(--acai); }
.tx-dl a:focus-visible { outline: 3px solid var(--acai); outline-offset: 2px; border-radius: 999px; }
.tx-file { display: inline-grid; place-items: center; min-width: 2.3rem; height: 1.75rem; padding: 0 .35rem; border-radius: 999px; background: var(--acai); color: var(--cream); font-size: .68rem; font-weight: 800; letter-spacing: .06em; flex: none; }
.tx-file-n { background: var(--sun); color: var(--ink); font-size: .8rem; }
.tx-dl small { font-family: var(--font-body); font-weight: 500; font-size: .8rem; color: var(--muted); }
@media (max-width: 559px) {
  .tx-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .tx-dl a { width: 100%; height: 100%; padding: .4rem .7rem .4rem .4rem; border-radius: 18px; font-size: .86rem; }
  .tx-dl a:focus-visible { border-radius: 18px; }
  .tx-dl small { display: none; }
  .tx-file { min-width: 2.1rem; }
}

/* ---------- Work with us: hero ---------- */
.wx-hero { position: relative; overflow: hidden; padding: clamp(.9rem, 2vw, 1.75rem) 0 clamp(2.5rem, 5vw, 4.25rem); background:
  radial-gradient(60% 55% at 84% 30%, rgba(131, 72, 154, .55), transparent 70%),
  radial-gradient(60% 80% at 0% 100%, rgba(237, 42, 125, .16), transparent 60%),
  linear-gradient(180deg, var(--acai) 0%, #2C1252 100%); }
.wx-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem 3rem; align-items: center; }
.wx-hero .crumbs { margin: 0 0 .8rem; }
/* Buyer pages (foodservice, trade, work with us; D66): the H1 says what buyers search for, in plain words.
   The brand line under it keeps the display type as a paragraph, so each page still has one H1. */
.buyer-h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, .96rem + .4vw, 1.3rem); line-height: 1.25; letter-spacing: -.01em; text-transform: none; margin: 0 0 .75rem; max-width: 46ch; text-wrap: balance; }
.on-dark h1.buyer-h1 { color: var(--sun); }
.wx-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.6rem); line-height: .94; letter-spacing: -.045em; margin: 0 0 1rem; color: var(--cream); text-wrap: balance; }
.wx-h em { font-style: normal; color: var(--sun); }
.wx-lede { font-size: var(--t-lede); line-height: 1.45; max-width: 40ch; margin: 0 0 1.35rem; color: rgba(251, 241, 228, .92); }
.wx-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.25rem; }
.wx-quick { list-style: none; margin: 1.35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem 1.35rem; }
.wx-quick a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-weight: 700; font-size: .98rem; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em; text-decoration-color: rgba(255, 204, 4, .7); }
.wx-quick a::after { content: "\2192"; margin-left: .35rem; text-decoration: none; display: inline-block; transition: transform .2s var(--ease-out); }
.wx-quick a:hover::after { transform: translateX(3px); }

/* The three formats on one card: pint and cup to scale with each other (same camera), the bucket on its own tile */
.wx-formats { position: relative; margin: 0; width: min(100%, 600px); justify-self: center; padding: clamp(.9rem, 2vw, 1.4rem) clamp(.6rem, 1.6vw, 1.2rem) clamp(.9rem, 1.8vw, 1.2rem); border-radius: var(--radius-lg); background: var(--cream); color: var(--ink); box-shadow: var(--tile-shadow); }
.wx-packs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; isolation: isolate; }
.wx-pack { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.wx-pack-art { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; aspect-ratio: 4 / 5; }
.wx-pack-art picture { display: block; width: 100%; }
.wx-pack-art img { display: block; width: 100%; height: auto; }
.wx-pack-pint .wx-pack-art::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 5%; width: 106%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFE68A 0%, var(--sun) 40%, var(--mango) 82%, var(--flame) 100%); box-shadow: 0 0 0 12px rgba(255, 204, 4, .14); }
.wx-pack-pint img, .wx-pack-cup img { filter: var(--pack-shadow); }
.wx-bucket { display: block; width: 94%; margin-bottom: 7%; aspect-ratio: 1; border-radius: clamp(14px, 1.8vw, 22px); background: var(--white); overflow: hidden; box-shadow: 0 18px 30px -18px rgba(20, 6, 40, .5), 0 0 0 1px rgba(31, 11, 61, .07); }
.wx-bucket picture { padding: 7%; box-sizing: border-box; height: 100%; }
.wx-bucket img { width: 100%; height: 100%; object-fit: contain; }
.wx-pack-name { margin-top: .55rem; padding: 0 .2rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(.86rem, .76rem + .42vw, 1.08rem); line-height: 1.1; letter-spacing: -.01em; color: var(--acai); }
.wx-pack-spec { margin-top: .2rem; padding: 0 .25rem; font-size: clamp(.72rem, .66rem + .26vw, .86rem); line-height: 1.3; color: var(--muted); }
.wx-pack-spec span { display: block; }
.wx-formats-cap { margin: .9rem auto 0; padding-top: .7rem; border-top: 1px solid var(--line); max-width: 52ch; text-align: center; font-size: .78rem; line-height: 1.4; color: var(--muted); }

/* The range at a glance */
.wx-glance { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.1rem, 2.4vw, 1.75rem); border-radius: var(--radius-lg); background: var(--cream); color: var(--ink); box-shadow: var(--tile-shadow); --focus: var(--acai); }
.wx-hero .wx-glance-h { margin: 0 0 .9rem; font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem); line-height: 1.1; letter-spacing: -.02em; color: var(--acai); }
.wx-glance-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.wx-glance-list > div { padding: .7rem 0; border-top: 1px solid var(--line); min-width: 0; }
.wx-glance-list dt { margin: 0 0 .15rem; font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acai); }
.wx-glance-list dd { margin: 0; }
.wx-glance-list b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1rem, .92rem + .4vw, 1.2rem); line-height: 1.15; letter-spacing: -.015em; }
.wx-glance-list dd span { display: block; margin-top: .15rem; font-size: .88rem; line-height: 1.35; color: var(--muted); }
.wx-glance .tx-dl a { color: var(--ink); }
.wx-glance .tx-dl a:hover { color: var(--acai); }

@media (min-width: 640px) { .wx-glance-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .wx-glance-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 1.4rem; }
  .wx-glance-list > div { padding: .85rem 0 .2rem; }
}
@media (max-width: 559px) { .wx-ctas .btn { flex: 1 1 auto; } }
@media (max-width: 959px) {
  .wx-h { font-size: clamp(2.35rem, 1.2rem + 6vw, 3.6rem); margin-bottom: .75rem; }
  .wx-lede { margin-bottom: 1.1rem; }
  .wx-ctas .btn-lg { min-height: 54px; padding: .7rem 1.2rem; }
  .wx-formats { width: min(100%, 460px); }
}
@media (min-width: 960px) {
  .wx-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wx-formats { width: 100%; max-width: 580px; }
}
html.js .wx-hero-copy > * { animation: v4-rise .9s var(--ease) both; }
html.js .wx-hero-copy > :nth-child(2) { animation-delay: .04s; }
html.js .wx-hero-copy > :nth-child(3) { animation-delay: .08s; }
html.js .wx-hero-copy > :nth-child(4) { animation-delay: .12s; }
html.js .wx-hero-copy > :nth-child(5) { animation-delay: .16s; }
html.js .wx-hero-copy > :nth-child(n+6) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) { html.js .wx-hero-copy > * { animation: none; } .wx-quick a::after { transition: none; } }

/* The café band on this page: each clip says where it was filmed, and the bowls say "Serving suggestion" */
.cafe-band .cafe-cap .tx-ctx { opacity: .85; }

/* ---------- Trade (trade.html) ---------- */
.page-head .tr-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.6rem); line-height: .94; letter-spacing: -.045em; margin: 0 0 1rem; color: var(--cream); text-wrap: balance; }
.tr-h em { font-style: normal; color: var(--sun); }
.tr-lede { margin-bottom: 1.2rem; }
.tr-avail { margin-bottom: 1.5rem; }
.tr-ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.tr-ctas .btn { margin: 0; }
@media (max-width: 699px) { .tr-ctas .btn { flex: 1 1 100%; } }

/* On this page: one row of pills under the hero */
.tr-jump { background: var(--paper); border-bottom: 1px solid var(--line); }
.tr-jump ul { list-style: none; margin: 0; padding: .8rem 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tr-jump a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: .45rem 1rem; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1.5px rgba(31, 11, 61, .2); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: .92rem; line-height: 1.2; text-decoration: none; transition: box-shadow .2s ease, background .2s ease, color .2s ease; }
.tr-jump a:hover { box-shadow: inset 0 0 0 2px var(--acai); color: var(--acai); }
.tr-jump a:focus-visible { outline: 3px solid var(--acai); outline-offset: 2px; }
.tr-jump li:last-child a { background: var(--acai); color: var(--cream); box-shadow: none; }
.tr-jump li:last-child a:hover { background: var(--acai-mid); color: var(--cream); }
@media (max-width: 559px) {
  .tr-jump ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-jump a { width: 100%; justify-content: center; text-align: center; padding: .45rem .6rem; font-size: .88rem; }
  .tr-jump li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Three formats as cards above the full spec table */
.tr-formats { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 560px) { .tr-formats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tr-format { position: relative; display: flex; flex-direction: column; padding: 1rem 1.15rem 1.2rem; border-radius: var(--radius); background: var(--white); border: 1px solid var(--hair); box-shadow: var(--lift); min-width: 0; }
.tr-format-art { position: relative; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 5 / 4; margin: -.2rem -.3rem .7rem; border-radius: 16px; overflow: hidden;
  background: radial-gradient(70% 90% at 50% 100%, rgba(255, 204, 4, .55), rgba(250, 163, 34, .18) 60%, transparent 75%), var(--cream); }
.tr-format-art picture { display: block; height: 104%; aspect-ratio: 4 / 5; margin-bottom: -4%; }
.tr-format-art picture img { display: block; width: 100%; height: 100%; object-fit: contain; filter: var(--pack-shadow); }
.tr-bucket { display: block; height: 82%; aspect-ratio: 1; margin-bottom: 6%; border-radius: 14px; background: var(--white); overflow: hidden; box-shadow: 0 14px 24px -16px rgba(20, 6, 40, .5), 0 0 0 1px rgba(31, 11, 61, .07); }
.tr-bucket picture { display: block; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; padding: 7%; box-sizing: border-box; }
.tr-bucket picture img { filter: none; }
.tr-format h3 { margin: 0; font-size: var(--t-h3); line-height: 1.05; letter-spacing: -.02em; color: var(--acai); }
.tr-format-q { margin: .25rem 0 .7rem; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.tr-format-facts { list-style: none; margin: auto 0 0; padding: .6rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .3rem; font-size: .92rem; line-height: 1.35; color: var(--muted); }
.tr-sub { margin: 2.2rem 0 0; font-size: var(--t-h3); letter-spacing: -.02em; }
@media (max-width: 559px) {
  .tr-format { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); column-gap: 1rem; align-items: start; padding: .9rem 1rem 1rem .9rem; }
  .tr-format-art { grid-row: 1 / span 3; aspect-ratio: 4 / 5; margin: 0; border-radius: 12px; }
  .tr-format-art picture { height: 100%; margin-bottom: -2%; }
  .tr-bucket { width: 92%; height: auto; margin-bottom: 14%; border-radius: 10px; }
  .tr-format h3 { font-size: 1.25rem; }
  .tr-format-q { margin: .15rem 0 .45rem; font-size: .98rem; }
  .tr-format-facts { padding-top: .45rem; font-size: .86rem; gap: .15rem; }
}

/* Identifiers: downloads row and the note under the table */
.tr-dl { margin: 0 0 .25rem; }
.tr-codes-note { margin: .25rem 0 0; }

/* The request form sits under its heading; a jump to #request keeps a little air above it */
.tr-request #request { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
#storage { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
/* The codes table fits a 1200 px wrap without sideways scrolling (it still scrolls on narrower screens) */
#gtins .data-tight th, #gtins .data-tight td { padding: .65rem .55rem; }
#gtins .data-tight th:first-child, #gtins .data-tight td:first-child { padding-left: .9rem; }
#gtins .data-tight thead th { white-space: normal; vertical-align: bottom; }
#gtins .data-tight tbody th { white-space: normal; min-width: 10.5rem; }
.tr-request .split { align-items: start; }
@media (min-width: 900px) { .tr-request .split > div:last-child { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.tr-swipe { margin: .9rem 0 0; }
@media (min-width: 1200px) { .tr-swipe { display: none; } }

/* ---------- Sell sheets (sell-sheets/index.html) ---------- */
.ss-hero .lede { margin-bottom: 1.2rem; }
.ss-avail { margin-bottom: 1.5rem; }
.ss-ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.ss-ctas .btn { margin: 0; }
@media (max-width: 559px) { .ss-ctas .btn { flex: 1 1 100%; } }
.ss-dl { margin-top: 1.25rem; }

/* Work with us, phones: the eleven sheets become one swipeable row instead of a 2,000 px column */
@media (max-width: 699px) {
  #sell-sheets .sheet-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; gap: 1rem .9rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 1rem; scroll-padding: 0 var(--gutter); scrollbar-width: thin; }
  #sell-sheets .sheet-grid > li { scroll-snap-align: start; }
  #sell-sheets .sheet-grid .sheet-line { grid-column: span 2; }
  #sell-sheets .wx-swipe { display: block; }
}
.wx-swipe { display: none; margin: .6rem 0 0; }

/* One shared surface and the same forward cameras as the accepted retail site. */
.wx-brand-packs { width:100%; max-width:600px; margin:0; justify-self:center; padding:1rem 0 0; }
.wx-retail-packs { display:grid; grid-template-columns:1.15fr 1fr; align-items:end; gap:0; }
.wx-retail-packs a { display:flex; flex-direction:column; align-items:center; min-width:0; color:#fbf1e4; font:700 1rem var(--font-display); text-decoration:none; }
.wx-retail-packs a:focus-visible { outline:3px solid #dcff70; outline-offset:3px; border-radius:4px; }
.wx-retail-packs img { width:100%; height:auto; filter:drop-shadow(0 18px 20px rgba(0,0,0,.22)); }
.wx-retail-cup img { width:93%; }
.wx-brand-packs figcaption { border-top:1px solid #b99ac6; margin:1.4rem 0 0; padding:1rem 0 0; font-size:.9rem; color:#fbf1e4; }
.wx-brand-packs figcaption a { display:flex; align-items:center; min-height:44px; color:#dcff70; font-weight:700; text-underline-offset:.25em; }
.wx-glance { background:transparent; box-shadow:none; color:#fbf1e4; border-radius:0; padding:0; margin-top:2rem; border-top:1px solid #b99ac6; border-bottom:1px solid #b99ac6; }
.wx-glance summary { display:flex; align-items:center; justify-content:space-between; min-height:56px; gap:1rem; cursor:pointer; font-weight:700; list-style:none; }
.wx-glance summary::-webkit-details-marker { display:none; }
.wx-glance summary:focus-visible { outline:3px solid #dcff70; outline-offset:4px; }
.wx-glance[open] summary span { transform:rotate(45deg); }
.wx-glance .wx-glance-list { margin:1rem 0; }
.wx-glance .wx-glance-list > div { border-color:#b99ac6; }
.wx-glance .wx-glance-list dt { color:#dcff70; }
.wx-glance .wx-glance-list dd,.wx-glance .wx-glance-list dd b,.wx-glance .wx-glance-list dd span { color:#fbf1e4; }
.wx-glance .tx-dl { padding-bottom:1.5rem; }
/* Hub forms: a label that wraps ("Monthly volume, if you know it") no longer pushes its field out of line */
.hub-panel .form-row { align-items: end; }
/* Codes table: each code is a 44 px tall target without changing the row height */
#gtins .data-tight td a.sheet, #gtins .data-tight tbody th a { display: inline-block; padding: 13px 0; margin: -13px 0; }

/* ---- src/css/87-blog.css ---- */
/* v38: blog posts (blog/*.html). The hero's pack-artwork note sits right under the lede. */
.post-hero .lede + .hf-note { margin-top: -.35rem; opacity: 1; }

/* Existing café photography for editorial stories; keep the whole source frame. */
.post-photo { display: grid; background: var(--fbg); color: var(--ffg); }
.post-photo-copy { padding: clamp(2rem, 5vw, 5rem); align-self: center; }
.post-photo .crumbs { margin-bottom: 1.5rem; }
.post-photo .eyebrow { color: var(--ffg); }
.post-photo h1 { margin-bottom: 1.5rem; }
.post-photo .lede { max-width: 38rem; }
/* --pm-max is the photo's own width (tools/generate.mjs), so a hero never renders below 1x. */
.post-photo-media { margin: 0; min-width: 0; width: 100%; max-width: var(--pm-max, none); justify-self: center; }
.post-photo-media picture, .post-photo-img { display: block; width: 100%; }
.post-photo-img { height: auto; }
.post-photo-media figcaption { padding: .75rem 1rem; font-size: .8rem; }
@media (min-width: 640px) and (max-width: 959px) {
  .post-photo-media { width: 70%; justify-self: center; }
}
@media (min-width: 960px) {
  .post-photo { grid-template-columns: 1fr 1fr; }
  .post-photo-copy { padding: clamp(2rem, 4vw, 5rem); }
  .post-photo-media { align-self: center; }
}

/* Our café's signature bowls at home: one section per bowl from core/registry/cafe-menu.json. */
.sig-home-lids { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; margin: 1rem 0 0; }
.sig-home-lids a { display: inline-flex; align-items: center; gap: .65rem; font-weight: 600; line-height: 1.25; }
.sig-home-lids img { flex: none; border-radius: 50%; }
.sig-home-lids small { display: block; font-weight: 400; font-size: .8rem; }
.sig-home-bowl { margin-top: 2rem; padding-top: 1.5rem; border-top: 1.5px solid var(--line); }
.sig-home-bowl h3 { margin: 0 0 .9rem; }
.sig-home-bowl p { margin: 0 0 .6rem; }
.sig-home-photo { margin: 0 0 1rem; }
.sig-home-photo img { display: block; width: 100%; height: auto; background: #FFFFFF; }
.sig-home-photo figcaption { margin-top: .4rem; font-size: .85rem; color: var(--muted); }
.sig-home-menu span, .sig-home-bowl strong { font-weight: 700; }
.sig-home-allergy { font-size: .95rem; color: var(--muted); }
@media (min-width: 640px) {
  /* Text rows stay together; a tall photo's extra height goes to the empty last row. */
  .sig-home-bowl { display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr; column-gap: 1.5rem; align-items: start; }
  .sig-home-bowl h3 { grid-column: 1 / -1; }
  .sig-home-photo { grid-column: 1; grid-row: 2 / -1; margin: 0; }
  .sig-home-bowl p { grid-column: 2; }
}

/* Blog index: every card image is cropped to the same 3:4 frame, so titles line up across a row
   whatever the source shape (café photos are 3:4, pack renders 1600x2160). */
.grid-posts-v4 .card-media img { aspect-ratio: 3 / 4; object-fit: cover; }

/* A film with speech inside a post (the açaí seed clip): native controls, captions on by default,
   never autoplayed. Full width of the text column, never wider than its own 848 px. The caption
   keeps the same 560 px measure as .post-fig. */
.post-video { margin: 1.75rem 0 .75rem; max-width: 848px; }
.post-video video { display: block; width: 100%; height: auto; aspect-ratio: 848 / 480; background: var(--ink); border-radius: 12px; }
.post-video figcaption { margin-top: .6rem; max-width: 560px; font-size: .9rem; line-height: 1.45; color: var(--muted); }
/* Chromium sizes cues at 5% of the video's height, about 8-10 px on a phone. Most visitors follow
   the Portuguese speech through these captions, so phones get a 15 px floor. User caption settings
   (Safari, iOS) still win. */
@media (max-width: 700px) { .post-video video::cue { font-size: 15px; } }
.post-transcript { margin: 0 0 1.75rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.post-transcript > summary { cursor: pointer; padding: .85rem 0; font-weight: 700; }
.post-transcript > summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.post-transcript p { font-size: 1rem; }
/* The two language labels are h3s (headings inside the transcript), styled as small labels. */
.post-transcript .post-transcript-label { margin: .35rem 0 .2rem; font-family: var(--font-body); font-size: .8rem; font-weight: 700; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; text-wrap: wrap; color: var(--muted); }

/* ---- src/css/88-notfound.css ---- */
/* v38: the 404 page (404.html). Everything is scoped to .page-404. The page is served for any missing path, at any
   depth, so its markup uses absolute /assets/... paths. Açaí hero with the two launch pints, then three colour tiles
   (Flavors, Get it first, Foodservice) and a row of plain links. No motion beyond a small hover lift. */

/* ---------- Hero ---------- */
.page-404 .nf-hero { position: relative; overflow: hidden; color: var(--cream); background:
  radial-gradient(70% 60% at 80% 45%, rgba(131, 72, 154, .55), transparent 70%),
  radial-gradient(60% 80% at 0% 100%, rgba(237, 42, 125, .18), transparent 60%),
  linear-gradient(180deg, var(--acai) 0%, #2C1252 100%); }
.page-404 .nf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: center;
  padding-top: clamp(2rem, 1.4rem + 3vw, 4rem); padding-bottom: clamp(2.5rem, 1.6rem + 4vw, 5rem); }
.page-404 .nf-kicker { display: flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sun); }
.page-404 .nf-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px rgba(237, 42, 125, .3); flex: none; }
.page-404 .nf-h { margin: 0 0 1rem; max-width: 11ch; font-size: clamp(2.7rem, 1.2rem + 5.4vw, 6rem); line-height: .92; letter-spacing: -.045em; color: var(--cream); }
.page-404 .nf-accent { color: var(--sun); }
.page-404 .nf-lede { margin: 0 0 1.5rem; max-width: 40ch; font-size: var(--t-lede); line-height: 1.45; color: rgba(251, 241, 228, .92); }
.page-404 .nf-ctas { display: flex; flex-wrap: wrap; gap: .75rem; }

.page-404 .nf-art { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1 / .86; justify-self: center; margin-top: .5rem; }
.page-404 .nf-sun { position: absolute; left: 13%; top: 2%; width: 74%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFE68A 0%, var(--sun) 38%, var(--mango) 78%, var(--flame) 100%);
  box-shadow: 0 0 0 14px rgba(255, 204, 4, .08), 0 0 120px 10px rgba(250, 163, 34, .32); }
.page-404 .nf-pack { position: absolute; display: block; filter: var(--pack-shadow); }
.page-404 .nf-pack img { display: block; width: 100%; height: auto; }
.page-404 .nf-pack-a { z-index: 2; width: 52%; left: 9%; bottom: -5%; transform: rotate(-9deg); }
.page-404 .nf-pack-b { z-index: 1; width: 45%; left: 49%; bottom: 1%; transform: rotate(11deg); }
.page-404 .nf-sticker { position: absolute; z-index: 3; right: 3%; top: 0; width: clamp(84px, 25%, 128px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; justify-items: center; text-align: center; gap: .2rem; padding: .4rem;
  background: var(--pink-deep); color: var(--white); transform: rotate(10deg); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
  font-family: var(--font-display); line-height: 1; }
.page-404 .nf-sticker b { font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; }
.page-404 .nf-sticker span { font-size: clamp(.6rem, .52rem + .3vw, .76rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 959px) { .page-404 .nf-ctas .btn { flex: 1 1 auto; } }
@media (min-width: 640px) {
  .page-404 .nf-art { max-width: 420px; }
}
@media (min-width: 960px) {
  .page-404 .nf-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 2.5rem;
    min-height: min(calc(100svh - var(--header-h) - 3px), 700px); }
  .page-404 .nf-art { max-width: 520px; justify-self: end; margin-top: 0; }
}

/* ---------- Where to next ---------- */
.page-404 .nf-paths { padding: clamp(3rem, 2rem + 4vw, 6rem) 0; background: var(--cream); color: var(--ink); }
.page-404 .nf-paths-h { margin: 0 0 1.5rem; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1; color: var(--ink); }
.page-404 .nf-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .page-404 .nf-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.page-404 .nf-tile { display: flex; }
.page-404 .nf-t-flavors { --tbg: #69B0BF; --tfg: var(--ink); }
.page-404 .nf-t-first { --tbg: var(--sun); --tfg: var(--ink); }
.page-404 .nf-t-food { --tbg: #1C7D7E; --tfg: var(--white); }
.page-404 .nf-tile a { position: relative; display: flex; flex-direction: column; gap: .45rem; width: 100%; padding: 1.4rem 1.4rem 1.5rem;
  border-radius: var(--radius-lg); background: var(--tbg); color: var(--tfg); text-decoration: none; box-shadow: var(--tile-shadow);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.page-404 .nf-tile a:hover { transform: translateY(-4px); box-shadow: 0 36px 60px -32px rgba(20, 6, 40, .6); }
.page-404 .nf-tile a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: var(--radius-lg); }
.page-404 .nf-t-fruit { order: -1; width: 76px; aspect-ratio: 1; margin-bottom: .55rem; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 4px var(--cream), 0 14px 24px -14px rgba(20, 6, 40, .6); background: var(--acai-mid); }
.page-404 .nf-t-fruit img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-404 .nf-t-kicker { font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.page-404 .nf-t-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); line-height: 1; letter-spacing: -.03em; }
.page-404 .nf-t-p { max-width: 34ch; font-size: 1rem; line-height: 1.45; }
.page-404 .nf-t-go { margin-top: auto; padding-top: .7rem; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; }

.page-404 .nf-more { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 2.25rem; }
.page-404 .nf-more-h { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.page-404 .nf-more ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.page-404 .nf-more a { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1rem; border: 2px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink); font-weight: 600; text-decoration: none; transition: border-color var(--dur-1) ease, color var(--dur-1) ease; }
.page-404 .nf-more a:hover { border-color: var(--acai); color: var(--acai); }
.page-404 .nf-mail { margin: 1.6rem 0 0; color: var(--muted); }
.page-404 .nf-mail a { color: var(--acai); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .page-404 .nf-tile a, .page-404 .nf-more a { transition: none; }
  .page-404 .nf-tile a:hover { transform: none; }
}

/* ---- src/css/90-simplify.css ---- */
/* Three clear destinations; keep secondary material available by choice. */
.home-foodservice { background:#251039; color:#fbf1e4; padding:var(--section-y) 0; }
.home-foodservice-row { display:grid; grid-template-columns:1.2fr 1fr; gap:2rem; align-items:center; }
.home-foodservice h2 { color:#fbf1e4; font-size:var(--t-h2); margin:0 0 1rem; }
.home-foodservice-links { display:flex; flex-direction:column; align-items:flex-start; gap:1rem; }
.home-foodservice-links>a:not(.btn) { display:inline-flex; align-items:center; min-height:44px; color:#fbf1e4; text-underline-offset:.25em; }
.buyer-resources h2 { font-size:var(--t-h2); margin:0 0 1.5rem; }
.buyer-resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.buyer-resource-grid a { display:flex; flex-direction:column; gap:.7rem; padding:1.5rem; color:#251039; border:1px solid #baaabb; text-decoration:none; }
.buyer-resource-grid strong { font:700 1.25rem var(--font-display); }
.buyer-resource-grid span { font-size:.9rem; }
.buyer-resource-grid a:hover { background:#fff9ee; }
.buyer-resource-grid a:focus-visible,.home-foodservice-links>a:focus-visible { outline:3px solid currentColor; outline-offset:4px; }
.request-anchor { display:block; scroll-margin-top:calc(var(--header-h) + 1.5rem); }
.wx-ctas { display:flex; flex-wrap:wrap; gap:.7rem; }
.fo-art .fo-tile { position:relative; display:block; width:100%; max-width:440px; margin-inline:auto; transform:none; }
.foodservice-specs>summary,.finder-summary { cursor:pointer; min-height:52px; font:700 1.2rem var(--font-display); }
.fo-spec { padding:.75rem 0; }
.foodservice-specs { border-block:1px solid #baaabb; }
.foodservice-specs>summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem 0; }
.foodservice-specs>summary::-webkit-details-marker { display:none; }
.foodservice-specs>summary span:last-child { font-size:1.6rem; }
.foodservice-specs[open]>summary span:last-child { transform:rotate(45deg); }
.foodservice-specs[open] { padding-bottom:1.5rem; }
.foodservice-specs[open]>summary { margin-bottom:.75rem; }
.foodservice-specs summary:focus-visible,.finder-summary:focus-visible { outline:3px solid #251039; outline-offset:4px; }
details[data-quiz]:not([open]) { padding-block:1.25rem; background:#fbf1e4; color:#251039; border-top:1px solid #baaabb; border-bottom:1px solid #baaabb; }
.finder-summary { display:flex; align-items:center; justify-content:space-between; color:#251039; }
.finder-summary::-webkit-details-marker { display:none; }
details[data-quiz][open]>.finder-summary { margin-bottom:2rem; }
.fo-signatures { background:#fbf1e4; color:#251039; padding:var(--section-y) 0; }
.fo-signatures h2 { color:#251039; font-size:var(--t-h2); margin:0 0 1rem; }
.signature-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:start; gap:clamp(1.5rem,4vw,4rem); }
.signature-photo { margin:0; }
.signature-photo>a { display:block; border-radius:1.25rem; overflow:hidden; }
.signature-photo img { width:100%; height:auto; display:block; }
.signature-photo figcaption { font-size:.8rem; margin-top:.75rem; color:#5e496a; }
.signature-photo a:focus-visible { outline:3px solid #251039; outline-offset:5px; }
.signature-menu { display:grid; grid-template-columns:1fr 1fr; gap:0 2rem; }
.signature-menu details { border-bottom:1px solid #baaabb; padding:1rem 0; }
.signature-menu summary { cursor:pointer; min-height:44px; font:700 1.3rem var(--font-display); }
.signature-menu p { font-size:.95rem; }
.signature-menu summary:focus-visible { outline:3px solid #251039; outline-offset:3px; }
.signature-allergens { margin-top:1.5rem; font-size:.85rem; }
.signature-allergens summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }
@media(max-width:699px) { .home-foodservice-row,.buyer-resource-grid { grid-template-columns:1fr; } .signature-menu { gap:0 1rem; } .signature-menu summary { font-size:1rem; line-height:1.35; } }
@media(max-width:959px) { .signature-layout { grid-template-columns:1fr; } .signature-photo { width:min(100%,460px); } }

.cat-flight-link { min-height:44px; padding:.4rem 0; border:0; background:transparent; color:#fbf1e4; font:700 .85rem var(--font-body); text-decoration:underline; text-underline-offset:.3em; cursor:pointer; }
.cat-flight-link:focus-visible { outline:3px solid #dcff70; outline-offset:3px; }
#tubs { scroll-margin-top:calc(var(--header-h) + 1rem); }
/* Phones use the canvas itself. Keep the two optional actions below its bounds. */
@media (max-width: 700px) {
  .pack3d:not(.p3-full) model-viewer { height: calc(100% - 64px); }
  .pack3d:not(.p3-full) .p3-open,
  .pack3d:not(.p3-full) .p3-zoom,
  .pack3d:not(.p3-full) .p3-views { display: none; }
  .pack3d:not(.p3-full) .p3-footer { position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 64px; padding: 8px; box-sizing: border-box; }
  .pack3d:not(.p3-full) .p3-controls { position: static; margin-left: auto; width: auto; max-width: none; padding: 0; border: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; }
  .pack3d:not(.p3-full) .p3-ar { position: static; flex: 0 1 auto; max-width: calc(100% - 100px); min-height: 44px; padding: .45rem .65rem; font-size: .78rem; line-height: 1.2; }
  .pack3d:not(.p3-full) .p3-reset { min-width: 84px; }
}