/* ---- 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); }
/* With enlarged text the sticky header can be taller than --header-h; src/js/09-focus-clearance.js publishes its live height. */
html { scroll-padding-top: calc(max(var(--header-h), var(--header-live, 0px)) + 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-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"]) { 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-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; }
/* The ring follows the crumb text colour, which is set for contrast against each hero (WCAG 2.4.7). */
.post-hero .crumbs a:focus-visible { outline-color: currentColor; }
@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; }

.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; }
/* minmax(0, …) lets fields shrink to the row instead of overflowing it when text is enlarged.
   Scoped to main so the footer form is untouched. */
main .form { grid-template-columns: minmax(0, 1fr); }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
@media (min-width: 640px) { .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field label, .field .label { display: block; font-family: var(--font-display); font-weight: 700; font-size: .98rem; margin-bottom: .4rem; }
/* Q2: when an invalid submit scrolls a field into view, keep its label clear of the sticky header (WCAG 2.4.11).
   Adds to html scroll-padding-top; scoped to main so the footer form is untouched. */
main .field :is(input, select, textarea) { scroll-margin-top: 3.5rem; }
/* Q17: the browser's validation message kept as text under the field (WCAG 3.3.1). */
.field-error { margin: .35rem 0 0; color: var(--field-error, var(--pink-deep)); font-weight: 700; font-size: .92rem; line-height: 1.35; }
/* On the flavor-result form the background is the flavor colour; use its own text colour, which is set for contrast. */
.quiz { --field-error: var(--qfg, var(--ink)); }
.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); }
/* With enlarged text the list keeps to its column, and a long email address breaks rather than running off the screen. */
.contact-list { grid-template-columns: minmax(0, 1fr); }
main a[href^="mailto:"] { overflow-wrap: break-word; }
.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); --focus: var(--sun); }
.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; }

.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); }
.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; }
.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-ar-help { position:absolute; left:14px; top:128px; z-index:4; max-width:calc(100% - 28px); color:var(--cream); }
.p3-ar-help[hidden] { display:none; }
.p3-ar-help > summary { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; max-width:100%; padding:.5rem .85rem; box-sizing:border-box; border:2px solid rgba(251,241,228,.6); border-radius:999px; background:rgba(31,11,61,.86); color:var(--cream); font:700 .82rem/1.2 var(--font-display); cursor:pointer; list-style:none; }
.p3-ar-help > summary::-webkit-details-marker { display:none; }
.p3-ar-help > summary::before { content:""; flex:none; width:14px; height:14px; border:2px solid currentColor; border-radius:3px; transform:perspective(40px) rotateX(55deg); }
.p3-ar-help > summary:hover { background:rgba(31,11,61,.98); }
.p3-ar-help > summary:focus-visible { outline:3px solid var(--sun); outline-offset:2px; }
.p3-ar-help-panel { position:absolute; left:0; top:calc(100% + 8px); width:min(320px, calc(100vw - 40px)); padding:.85rem; box-sizing:border-box; border:1px solid rgba(251,241,228,.5); border-radius:14px; background:rgba(31,11,61,.97); box-shadow:0 10px 30px rgba(0,0,0,.3); font-size:.78rem; line-height:1.45; }
.p3-ar-help-panel p { margin:0 0 .65rem; }
.p3-ar-copy { min-height:44px; max-width:100%; padding:.55rem .8rem; border:2px solid rgba(251,241,228,.7); border-radius:999px; background:transparent; color:var(--cream); font:700 .78rem/1.2 var(--font-display); cursor:pointer; }
.p3-ar-copy:hover { background:rgba(251,241,228,.14); }
.p3-ar-copy:focus-visible { outline:3px solid var(--sun); outline-offset:2px; }
.p3-ar-copy-status { min-height:1.5em; margin:.55rem 0 0 !important; color:var(--cream); }
.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; } }
/* 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); }
.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-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-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%; }
/* Native loading progress fades only after a delay; never carry that line into expansion. */
.pack3d.p3-full model-viewer { --progress-bar-height: 0px; --progress-bar-color: transparent; }
.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; max-width: 100%; }
/* A long chip wraps inside its pill when text is enlarged, instead of running off the row. */
.need-chips input + span { max-width: 100%; }
.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); }
/* When the chip row is narrower than 12rem (enlarged text on a phone, from either the browser's text size or the page's own
   font size), a chip's hint drops below its name, the pill tightens, and a word longer than the pill breaks. */
.need-chips { container-type: inline-size; }
@container (max-width: 11.99rem) { .need-chips input + span { flex-wrap: wrap; border-radius: 1.1rem; padding-inline: .75rem; overflow-wrap: anywhere; } .need-chips input + span > .hint { margin-left: 0; } }

.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; }
@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-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-stage { display: none; }
@media (min-width: 960px) {
  .cafe-step { min-height: 72vh; align-content: center; }
  .cafe-stage { display: block; position: sticky; top: calc(var(--header-h) + 5vh); height: min(80vh, 760px); }
  .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; }
}
/* 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; }

/* ---------- split layouts (party box, the menu, the Açaí Bar) ---------- */
.cafe-split { display: grid; gap: 1.6rem 3rem; align-items: center; }

.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 .cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* ---------- 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-a { order: -1; padding: .9rem var(--gutter) 0; }
.ch-a .photo-tag { left: calc(var(--gutter) + 10px); }
.ch-a a { aspect-ratio: 4 / 5; }

/* 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); }
.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; }
/* 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-card { min-width:0; margin:0; }

/* 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-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%); }

/* 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-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-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-range { position: relative; overflow: clip; }
@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-scene picture { aspect-ratio: 1920 / 1824; }
  .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; }
}
@media (min-width: 600px) and (max-width: 959px) {
  .hx-scene { width: min(100%, 560px); margin-left: auto; margin-right: auto; }
}

.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 picture { display:block; width:100%; }
.hx-pick-name,.hx-lid-nav { display:none; }
.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.is-model-ready .hx-solo-pack { visibility:hidden; }
.hx-scene:not(.is-model-ready) .hx-model { visibility:hidden; }
/* Desktop entry includes loading and swaps, before full-screen Expand. */
@media (min-width:960px) {
 .hx-scene.is-solo .hx-flavor-word { visibility:hidden; }
 .hx-model model-viewer { --progress-bar-height:0px; --progress-bar-color:transparent; }
}
html.p3-lock .hx-model { z-index:9999; }
html.p3-lock .hx-scene { z-index:9999; }
html.p3-lock .hx-solo { z-index:9999; }
/* Hide inline names in the opening click's style update, before any modal paint. */
html.p3-lock .hx-solo-info, html.p3-lock .hx-flavor-word { visibility:hidden; }
.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; }
 /* The mobile name is a stable row outside the tub, not loading artwork. */
 .hx-solo { aspect-ratio:auto; grid-template-rows:auto minmax(0,min(100%,560px)) auto; }
 /* Flavor hues can sit below large-text contrast on the final purple Home field.
    Mobile uses the established cream so every selected name remains readable. */
 .hx-flavor-word { position:static; grid-area:1/1; padding:.2rem 0 .35rem; color:var(--cream); opacity:1; font-size:clamp(2.1rem,8vw,4rem); }
 .hx-solo-pack,.hx-model { grid-area:2/1; }
 .hx-model { width:100%; height:100%; align-self:stretch; }
 .hx-solo-info { grid-area:3/1; }
 .hx-solo-info { font-size:.78rem; }
 .hx-picks { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:calc((100% - 24px)/2.5); gap:12px; max-width:none; margin:auto; padding:8px 6px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding:6px; }
 .hx-pick { min-height:132px; border-radius:0; padding:6px; gap:.4rem; align-content:start; scroll-snap-align:start; color:inherit; }
 .hx-pick picture { max-width:96px; border-radius:50%; }
 .hx-pick img { max-width:96px; }
 .hx-pick-name { display:block; min-height:2.5em; font:600 14px/1.25 var(--font-body); }
 .hx-pick[aria-pressed="true"] { border-color:transparent; }
 .hx-pick[aria-pressed="true"] picture { outline:2px solid #dcff70; outline-offset:3px; }
 .hx-lid-nav:not([hidden]) { display:flex; align-items:center; justify-content:space-between; gap:8px; }
 .hx-lid-nav button { min-height:44px; min-width:72px; padding:0 6px; border:0; border-radius:0; background:transparent; color:#dcff70; font:600 14px var(--font-body); cursor:pointer; }
 .hx-lid-nav button:disabled { opacity:.45; cursor:default; }
 .hx-lid-nav button:focus-visible { outline:3px solid #dcff70; outline-offset:1px; }
 .hx-lid-nav span { font-size:12px; }
 .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-media { position:relative; aspect-ratio:4/5; border-radius:0; overflow:hidden; background:#251039; touch-action:pan-y; }
.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-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; }
.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-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-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) {
 @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;} }
}
/* Owner-held mobile lid polish: clean artwork, quiet selection and text focus. */
@media(max-width:959px) {
 .hx-model model-viewer { --progress-bar-height:0px; --progress-bar-color:transparent; }
 .hx-pick[aria-pressed="true"],.hx-pick:hover { border-color:transparent; transform:none; }
 .hx-pick[aria-pressed="true"] picture { outline:none; transform:translateY(-2px); filter:drop-shadow(0 9px 9px #13032166); }
 .hx-pick[aria-pressed="true"] .hx-pick-name { font-weight:700; }
 .hx-pick[aria-pressed="true"] .hx-pick-name::after { content:" \2713"; font-size:.8em; }
 .hx-pick:focus-visible { outline:none; }
 .hx-pick:focus-visible .hx-pick-name { text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:.35em; }
}
@media(max-width:959px) and (prefers-reduced-motion:no-preference) {
 .hx-pick[aria-pressed="true"] picture { animation:hx-lid-select .4s cubic-bezier(.2,.8,.2,1); }
 @keyframes hx-lid-select {
  0% { transform:translateY(0) scale(1); }
  55% { transform:translateY(-5px) scale(1.03); }
  100% { transform:translateY(-2px) scale(1); }
 }
}
/* End owner-held mobile lid polish. */

/* ---- 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 .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 a:not(.btn) { color:inherit; text-underline-offset:.25em; }
.social-world { padding:clamp(3rem,7vw,6rem) 0; background:#fbf1e4; color:#251039; }
.social-world h2 { font-size:clamp(2.5rem,5vw,4.8rem); line-height:1; letter-spacing:-.05em; margin:.6rem 0 0; }
.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 h2 { font-size:clamp(3rem,6.5vw,4rem); }
}
@media (max-width:599px) {
 .launch-campaign h2 { max-width:10ch; font-size:3.5rem; }
}

/* ---- 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-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; }

@media (max-width: 759px) {
  .hx-paths { flex-direction: column; align-items: stretch; padding: .8rem 0 .8rem 1rem; gap: .5rem; }
}

/* ---- 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); }
}

/* Owner desktop 3D polish: off-pack controls, larger lids and complete type. */
@media (min-width: 960px) {
  .page-home .hx-grid:has(.hx-scene.is-solo) { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: clamp(1.5rem, 3vw, 3rem); }
  .page-home .hx-scene.is-solo { max-width: 720px; }
  .page-home .hx-scene.is-solo .hx-solo { margin-inline: auto; }
  .page-home .hx-model .pack3d:not(.p3-full) { container-type: inline-size; }
  .page-home .hx-model .pack3d:not(.p3-full) model-viewer { position: absolute; top: max(0px, calc((100% - 140px - 100cqw) / 2)); left: 0; margin: 0; height: min(calc(100% - 140px), 100cqw); }
  .page-home .hx-model .pack3d:not(.p3-full) .p3-footer { position: absolute; inset: auto 14px 8px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; }
  .page-home .hx-model .pack3d:not(.p3-full) .p3-controls { position: static; display: contents; transform: none; }
  .page-home .hx-model .pack3d:not(.p3-full) .p3-zoom { display: none; }
  .page-home .hx-model .pack3d:not(.p3-full) .p3-ar,
  .page-home .hx-model .pack3d:not(.p3-full) .p3-ar-help { position: relative; inset: auto; order: -1; flex: 0 1 auto; max-width: 100%; }
  .page-home .hx-model .pack3d:not(.p3-full) .p3-ar-help-panel { top: auto; bottom: calc(100% + 8px); max-height: min(320px, calc(100vh - 180px)); overflow: auto; }
  .page-home .hx-model .pack3d:not(.p3-full) .p3-reset { position: static; min-height: 44px; padding: .7rem 1.15rem; border: 1px solid rgba(251, 241, 228, .45); background: rgba(31, 11, 61, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .9rem; -webkit-tap-highlight-color: transparent; }
  .page-home .hx-model .pack3d:not(.p3-full) .p3-open { position: static; transform: none; }
  .page-home .hx-model .pack3d:not(.p3-full):has(.p3-ar:not([hidden])):has(.p3-ar-help:not([hidden])) model-viewer { top: max(0px, calc((100% - 196px - 100cqw) / 2)); height: min(calc(100% - 196px), 100cqw); }
  .page-home .hx-model .pack3d:not(.p3-full):has(.p3-ar:not([hidden])):has(.p3-ar-help:not([hidden])) .p3-views { bottom: 126px; }
  .page-home .hx-deck { max-width: none; }
  .page-home .hx-picks { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .page-home .hx-pick { min-height: 152px; padding: 6px; gap: .5rem; border-radius: 0; color: var(--cream); align-content: start; }
  .page-home .hx-pick picture { max-width: 104px; aspect-ratio: 1; }
  .page-home .hx-pick img { max-width: 104px; }
  .page-home .hx-pick-name { display: block; min-height: 2.5em; font: 600 14px/1.25 var(--font-body); }
  .page-home .hx-pick[aria-pressed="true"], .page-home .hx-pick:hover { border-color: transparent; }
  .page-home .hx-pick[aria-pressed="true"] picture { transform: translateY(-2px); filter: drop-shadow(0 9px 9px #13032166); }
  .page-home .hx-pick[aria-pressed="true"] .hx-pick-name { font-weight: 700; }
  .page-home .hx-pick[aria-pressed="true"] .hx-pick-name::after { content: " \2713"; font-size: .8em; }
  .page-home .hx-pick:focus-visible { outline: none; }
  .page-home .hx-pick:focus-visible .hx-pick-name { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .35em; }
  .page-home .hc-media { container-type: inline-size; }
  .page-home .hc-lineup-head strong { font-size: clamp(2.25rem, 12.8cqw, 4.2rem); }
}
/* End owner desktop 3D polish. */

/* Keep the AR entry in the reserved action band on tablets as well. The model
   canvas ends above it; the expanded guidance opens back into the viewer. */
@media (min-width: 701px) and (max-width: 959px) {
  .page-home .hx-model .pack3d:not(.p3-full) model-viewer { position: absolute; inset: 0 0 auto; height: calc(100% - 140px); margin: 0; }
  .page-home .hx-model .pack3d:not(.p3-full) .p3-ar,
  .page-home .hx-model .pack3d:not(.p3-full) .p3-ar-help { top: auto; bottom: 14px; }
  .page-home .hx-model .pack3d:not(.p3-full) .p3-ar-help-panel { top: auto; bottom: calc(100% + 8px); max-height: min(320px, calc(100vh - 180px)); overflow: auto; }
  .page-home .hx-model .pack3d:not(.p3-full) .p3-open { left: auto; right: 14px; transform: none; }
  .page-home .hx-model .pack3d:not(.p3-full) .p3-footer:has(.p3-ar:not([hidden])) .p3-ar-help:not([hidden]) { left: 200px; }
}

/* Owner immersive 3D: a real transparent canvas, with controls in reserved rows.
   The same native renderer handles resize, zoom and orbit; no canvas scaling or masks. */
.pack3d.p3-full { --p3-top-space: calc(env(safe-area-inset-top, 0px) + 74px); --p3-bottom-space: calc(env(safe-area-inset-bottom, 0px) + 150px); }
.pack3d.p3-full model-viewer { inset: var(--p3-top-space) 0 auto; height: calc(100% - var(--p3-top-space) - var(--p3-bottom-space)); margin: 0; }
.pack3d.p3-full .p3-controls { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 82px); max-width: calc(100% - 28px); }
.pack3d.p3-full .p3-reset { min-height: 44px; padding: .5rem 1rem; font-size: 1rem; }
.pack3d.p3-full .p3-views { bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
.pack3d.p3-full .p3-view { min-height: 44px; padding: .5rem .85rem; font-size: 1rem; }
.pack3d.p3-full .p3-fhelp { display: none; }
.pack3d.p3-full .p3-ar-help { top: calc(env(safe-area-inset-top, 0px) + 14px); bottom: auto; max-width: calc(100% - 140px); }
.pack3d.p3-full:has(.p3-ar:not([hidden])) .p3-ar-help:not([hidden]) { left: 232px; }
.pack3d.p3-full .p3-ar-help-panel { max-height: min(320px, calc(100vh - 180px)); overflow: auto; }
.page-home .hx-model .pack3d.p3-full { background: radial-gradient(ellipse at 50% 44%, rgba(251, 241, 228, .07), transparent 60%), radial-gradient(ellipse at 50% 46%, var(--solo-color, var(--p3bg, var(--night))), var(--night) 90%); }
@media (max-width: 600px) {
  .pack3d.p3-full { --p3-top-space: calc(env(safe-area-inset-top, 0px) + 126px); --p3-bottom-space: calc(env(safe-area-inset-bottom, 0px) + 198px); }
  .pack3d.p3-full .p3-ar,
  .pack3d.p3-full .p3-ar-help { top: calc(env(safe-area-inset-top, 0px) + 70px); }
  .pack3d.p3-full:has(.p3-ar:not([hidden])):has(.p3-ar-help:not([hidden])) { --p3-top-space: calc(env(safe-area-inset-top, 0px) + 182px); }
  .pack3d.p3-full:has(.p3-ar:not([hidden])) .p3-ar-help:not([hidden]) { top: calc(env(safe-area-inset-top, 0px) + 126px); left: 14px; }
  .pack3d.p3-full .p3-controls { bottom: calc(env(safe-area-inset-bottom, 0px) + 130px); }
  .pack3d.p3-full .p3-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(420px, calc(100% - 28px)); border-radius: 22px; }
}
/* End owner immersive 3D. */

/* ---- 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-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[data-state="first"] { background: var(--ffg); color: var(--fbg); border-color: var(--ffg); }
.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; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: .35rem; padding-bottom: .55rem; border-bottom: 1px solid currentColor; }
/* flex-wrap: with enlarged text on a small phone the arrows drop under the count instead of running off the screen. */
.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: .3rem; width: 104px; padding: .35rem .2rem .45rem; 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: 96px; height: 96px; 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; }

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; }

/* ---------- 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-specs { margin: 0 0 1rem; }
.pgs-specs > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; gap: .6rem; list-style: none; }
.pgs-specs > summary::-webkit-details-marker { display: none; }
.pgs-specs > summary::after { content: "+"; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1; color: var(--pink-deep); }
.pgs-specs[open] > summary::after { content: "\2013"; }
.pgs-spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: .75rem 1.25rem; }
.pgs-spec { margin: 0; font-size: .9rem; font-variant-numeric: tabular-nums; }
.pgs-spec-h { font-weight: 700; padding: .4rem 0; border-top: 1px solid var(--line); }
.pgs-spec dd { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .75rem; padding: .15rem 0; }
.pgs-spec dd span { color: inherit; opacity: .8; }
.pgs-spec-note { font-size: .9rem; margin: .5rem 0 0; }
.pgs-formats b { font-family: var(--font-display); font-size: 1.1rem; }
.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; } }
/* Enlarged text on wider screens: the same stacked thumb once the row is narrower than 22rem
   (normal text keeps the row layout from 421 px up; the phone rule above is unchanged). */
.pg-thumbs { container-type: inline-size; }
@container (max-width: 22rem) { .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; }
/* Enlarged text. The format tabs wrap. The Nutrition Facts panel keeps the label's layout: when the nutrition card's
   own content box is narrower than 14rem (a phone, or the two-column layout near 900 px), the panel is never narrower
   than its longest word or row and the card scrolls sideways instead. */
.nf-tabs.is-live { flex-wrap: wrap; }
.nf-tabs [role="tab"] { max-width: 100%; }
.pl-nf { container-type: inline-size; overflow-x: auto; }
@container (max-width: 13.99rem) { .pl-nf .nfp { width: fit-content; } }

/* ---------- 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; } }
/* Narrow phones: long single-word names ("Passionfruit", "Acerola") overflowed the text column and were
   cut with an ellipsis (9 of 10 flavor pages at 320px, 2 at 390px). A smaller lid widens the column;
   below 360px the lid sits above the name. */
@media (max-width: 420px) { .pn-v38 .pn { gap: .5rem; padding: .55rem .7rem; } .pn-v38 .pn img { width: 36px; height: 36px; } }
@media (max-width: 359px) { .pn-v38 .pn, .pn-v38 .pn-next { flex-direction: column; align-items: center; text-align: center; border-radius: 1.5rem; } .pn-v38 .pn img { order: -1; } }

/* WCAG 2.4.7: these links wrap block content (a photo frame or product panel). As inline elements their
   focus outline painted nowhere, so keyboard focus was invisible (found by tools/keyboard-walk-test.mjs).
   Block links draw the existing outline; the clipped café photo frames draw it inset (the menu photos'
   inset is set in 56-store.css, after its own focus rule). */
.v360.cafe-v > a, .cafe-menu .photo > a, .campus-cup > a:first-child { display: block; }
.v360.cafe-v > a:focus-visible { outline-offset: -4px; }

/* Product page polish (27 Oct): the flavor rail fades at its edges instead of cutting a chip in half;
   the scroller reaches 1rem into the gutter so resting chips keep their place, and scroll padding keeps a
   focused chip clear of the fade. Certification status reads on one line. The Nutrition Facts label sits
   centred in its card rather than against the left edge with a white strip beside it. */
.chips { margin-inline: -1rem; padding-inline: 1rem 3rem; scroll-padding-inline: 1rem 3rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 3rem), transparent); }
.pl-y { flex-direction: row; gap: .35rem; white-space: nowrap; }
.pl-cert th:last-child, .pl-cert td:last-child { width: 5.5rem; }
.pl-nf .nf-tabs.is-live { justify-content: center; }
.pl-nf .nfp { margin-inline: auto; }
.pl-nf .pl-src { text-align: center; }

/* ---- 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-hero > .wrap > .fo-avail { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

.fo-art { position: relative; margin: 0; width: min(100%, 560px); aspect-ratio: 1 / .9; justify-self: center; }
.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); }

/* 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); }

/* ---------- 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; } }
/* Keep a focused control above the sticky result strip (WCAG 2.4.11): src/js/09-focus-clearance.js publishes its live
   height; when enlarged text makes the strip taller than a quarter of the screen it stops sticking instead. */
@media (max-width: 959px) {
  html:has(.fo-mini):not([data-fo-mini-tall]) { scroll-padding-bottom: calc(var(--fo-mini-live, 0px) + 1.2rem); }
  html[data-fo-mini-tall] .fo-mini { position: static; }
}

.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 ---------- */

/* ---------- Café band (Sydney, soft serve) ---------- */

/* ---------- 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; }
/* The photo and shade are positioned above the link, so its inset ring is hidden; ring the card instead (WCAG 2.4.7). */
.ab-t:has(> .ab-t-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.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-formats a { color: inherit; text-underline-offset: .15em; }
.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)); } }

.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; }
/* With enlarged browser text (narrower than 20em) one flavor a row; tools/generate.mjs gives the pictures a matching
   sizes condition. A long word still breaks, rather than being clipped by the card, when only the page's own text is enlarged. */
@media (max-width:19.99em) { .ab-flavors { grid-template-columns:minmax(0,1fr); } }
.ab-flavor-name, .ab-flavor-note { max-width:100%; box-sizing:border-box; overflow-wrap:break-word; hyphens:auto; }
@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); }


/* About, Australia chapter (27 Oct): the films toggle sits in the same row as "Inside the café"
   instead of floating on its own line below it. */
.ab-ch-copy .cta-row .cf-toggle { margin-top: 0; }

/* ---- 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 .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-a, .cafe-page .ch-side { order: 0; padding: 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; }
/* The .photo frame clips overflow, so the focus outline is drawn inside the photo (WCAG 2.4.7). */
.cafe-menu .photo a:focus-visible { outline-offset: -4px; }
.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; } }
.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%; }

/* Real people and preparation, near the place introduction rather than buried. */
.cafe-motion { background:#251039; color:#fbf1e4; }
.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"; }

/* 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/57-cafe-editorial.css ---- */
/* Owner-directed café curation: clear subjects, fewer repeats and deliberate films. */
.cafe-page .cafe-editorial-hero { background:var(--cream); }
.cafe-page .cafe-editorial-hero .ch-grid { min-height:0; padding-block:clamp(2rem,5vw,4rem); grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,6vw,6rem); align-items:center; }
.cafe-lead-photo { margin:0; width:min(100%,450px); justify-self:center; }
.cafe-lead-photo a,.cafe-lead-photo picture,.cafe-lead-photo img { display:block; width:100%; height:auto; }
.cafe-lead-photo a { border-radius:14px; overflow:hidden; }
.cafe-lead-photo a:focus-visible { outline:3px solid var(--ink); outline-offset:5px; }
.cafe-page .cafe-place-curated { grid-template-columns:1fr 1fr; max-width:920px; margin-inline:auto; gap:clamp(1.2rem,4vw,3rem); }
.cafe-place-curated .cp-art,.cafe-place-curated .cp-aframe { grid-column:auto; margin:0; max-width:none; }
.cafe-place-curated .cp-art a,.cafe-place-curated .cp-aframe a { position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:10px; }
.cafe-place-curated .cp-art picture { position:absolute; inset:0; height:100%; }
.cafe-place-curated .cp-art img { width:100%; height:100%; object-fit:contain; }
.cafe-anchor { display:block; scroll-margin-top:calc(var(--header-h) + 1rem); }
/* Made at our counter: the real açaí-dispensing film leads, with one line of copy beside it. */
.cafe-counter { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); align-items:center; gap:2rem 4rem; }
.cafe-counter-copy h2 { font-size:clamp(2.5rem,5vw,4.5rem); line-height:1; margin:.75rem 0 1.25rem; }
.cafe-counter-copy .lede-sm { max-width:34ch; }
.cafe-method-film { margin:0; max-width:420px; width:100%; justify-self:center; }
.cafe-method-film .v360 { border-radius:12px; }
.cafe-method-film figcaption { font-size:.75rem; color:#e8d9e9; }
.cafe-page .cafe-v .v360-btn { opacity:1; width:auto; min-width:88px; height:44px; display:flex; align-items:center; gap:.4rem; padding:0 .85rem; }
.cafe-page .cafe-v .v360-btn::after { content:"Play"; font:700 .85rem var(--font-body); }
.cafe-page .cafe-v.playing .v360-btn::after { content:"Pause"; }
.cafe-page .cafe-v .v360-video { object-fit:contain; }
.cafe-page .cafe-gallery-curated { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.3rem; columns:auto; }
.cafe-gallery-curated figure { margin:0; break-inside:auto; }
.cafe-gallery-curated a { display:block; }
.cafe-gallery-curated img { width:100%; height:auto; aspect-ratio:3/4; object-fit:contain; background:#eee3d4; }
.cafe-gallery-curated figcaption { font-size:.8rem; }
.cafe-page .cafe-coffee { background:#eee3d4; color:#251039; }
.cafe-coffee-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; max-width:1000px; gap:2rem 5rem; align-items:center; }
.cafe-coffee h2 { color:#251039; font-size:clamp(2.5rem,5vw,4.5rem); line-height:1; margin:.75rem 0 1.5rem; }
.cafe-coffee .eyebrow,.cafe-coffee .cafe-film-link { color:#251039; }
.cafe-coffee .cafe-film-link:focus-visible { outline-color:#251039; }
.cafe-coffee .lede-sm { max-width:32ch; }
.cafe-coffee figure { margin:0; width:100%; max-width:280px; justify-self:center; }
.cafe-film-note { font-size:.85rem; margin-top:1.5rem; }
.cafe-page .cafe-jeep-grid { grid-template-columns:1fr 280px; max-width:1000px; }
.cafe-page .cafe-jeep-copy h2 { font-size:clamp(2.5rem,5vw,4rem); }
.cafe-page .cafe-jeep figure { max-width:280px; }
.cafe-page .cafe-menu { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cafe-page .cafe-menu .wide { grid-column:auto; }
.cafe-page .cafe-menu .photo { aspect-ratio:3/4; }
.cafe-page .cafe-menu .photo img { height:100%; object-fit:contain; background:#eee3d4; }
.cafe-page .cafe-menu .v360 { max-height:420px; }
@media(max-width:959px) {
 .cafe-page .cafe-editorial-hero .ch-grid { grid-template-columns:1fr; }
 .cafe-page .cafe-editorial-hero .ch-copy { padding:0; }
 .cafe-lead-photo { max-width:420px; }
 .cafe-counter { grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:2rem; }
 .cafe-page .cafe-gallery-curated { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:599px) {
 .cafe-page .cafe-place-curated { grid-template-columns:1fr 1fr; gap:.9rem; }
 .cafe-page .cafe-place-curated .cp-art a,.cafe-page .cafe-place-curated .cp-aframe a { aspect-ratio:3/4; }
 .cafe-counter,.cafe-coffee-grid,.cafe-page .cafe-jeep-grid { grid-template-columns:1fr; gap:1.5rem; }
 .cafe-method-film { max-width:min(100%, 340px); }
 .cafe-coffee figure,.cafe-page .cafe-jeep figure { max-width:240px; }
 .cafe-page .cafe-menu { grid-template-columns:1fr 1fr; }
 .cafe-page .cafe-menu .wide { grid-column:1/-1; }
 .cafe-page .cafe-menu .photo { aspect-ratio:4/3; }
 .cafe-page .cafe-us > li > a { display:grid; grid-template-columns:90px minmax(0,1fr); align-items:center; gap:1rem; padding:1rem; }
 .cafe-page .cafe-us .pic { height:auto; min-height:0; aspect-ratio:1; }
 .cafe-page .cafe-us .pic img { width:100%; height:auto; }
 .cafe-page .cafe-us .txt { padding:0; }
 .cafe-page .cafe-us h3 { font-size:1.2rem; }
}

.cafe-page #menu .cafe-film-link { color:#251039; }
.cafe-page #menu .cafe-film-link:focus-visible { outline-color:#251039; }

.cafe-page .cafe-coffee .cafe-film-link:hover,
.cafe-page .cafe-coffee .cafe-film-link:focus-visible { color:#251039; text-decoration-thickness:2px; }

/* ---- 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; color: rgba(251, 241, 228, .92); }
.cat-ctas { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ============================================================ 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-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 { padding-top: 2rem; 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-lede { font-size: 1.05rem; margin-bottom: 1rem; }
  .cat-ctas .btn { flex: 1 1 auto; }
  .cat .flavor-filter { flex-wrap: wrap; padding: 5px 0 6px; }
  .cat .ff-radio + label { padding: .45rem .75rem; white-space: nowrap; }
  .cat-bar { display: block; }
  .cat-key { font-size: .8rem; gap: .35rem .9rem; margin-top: .55rem; }
}

.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-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-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-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 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-next .wb-avail { background: transparent; color: var(--acai); }
.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); }
/* At most two lids a row, and only while each pill has 8.75rem; otherwise one a row (small phones, or enlarged text). */
.wb-lids { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(8.75rem, 50% - .3rem)), 1fr)); }
.wb-lids a > span { min-width: 0; overflow-wrap: break-word; }
.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); }
/* A fact list narrower than 12rem (enlarged text on a small phone) puts each icon above its text. */
.wb-facts { container-type: inline-size; }
@container (max-width: 11.99rem) { .wb-facts li { grid-template-columns: minmax(0, 1fr); } .wb-facts li > :not(.wb-ico) { grid-column: 1; } .wb-ico { grid-row: auto; margin-bottom: .5rem; } }
@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 > .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); }

.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; }

/* Saved choices stay available after the complete, directly linked catalog. */
.cat-shortlist { margin-top: 1.25rem; }
.cat-shortlist .cat-flight-link { color: var(--acai); text-decoration: underline; text-underline-offset: .25em; }

.cat-shortlist .cat-flight-link:focus-visible { outline-color: var(--acai); }

/* Flavors index with enlarged text. The heading's "Pick yours." may wrap when its column is under 12rem; a flavor card
   narrower than 14rem puts the cup above its "Meet the cup" text. Container queries in rem follow both the browser's
   text size and the page's own font size. */
.cat-head-copy { container-type: inline-size; }
@container (max-width: 11.99rem) { .cat-h em { white-space: normal; } }
.cat .cat-card { container-type: inline-size; }
@container (max-width: 13.99rem) { .cat .cat-cup-link { flex-wrap: wrap; padding: .25rem .75rem .75rem; } .cat-cup-link > span { min-width: 0; } }
.cat-key { container-type: inline-size; }
@container (max-width: 11.99rem) { .cat-key > span { max-width: 100%; flex-wrap: wrap; } }
/* The catalog's keyword H1 (.buyer-h1) sits above the display line, which is now a paragraph styled as before. */
p.cat-h { font-family: var(--font-display); font-weight: 800; text-wrap: balance; max-width: none; }
.cat-head .buyer-h1 { margin: 0 0 .6rem; }

/* Catalog cup row (27 Oct): the cup photo carries transparent margin above and below the cup, so a
   150px box left each card with a tall, mostly empty strip. Crop the margin (cover at 120×96, the cup sits
   mid-frame) and let the row hug it. */
.cat .cat-cup-link { min-height: 96px; }
.cat .cat-cup { height: 96px; object-fit: cover; object-position: 50% 50%; }

/* ---- 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; flex-wrap:wrap; }
.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; }
/* Two answers a row while each has 8rem; one a row with enlarged text on a phone. Long words in the question break only when they cannot fit. */
.quiz-opts { grid-template-columns:repeat(auto-fill,minmax(min(100%,max(8rem,50% - 5px)),1fr)); }
.quiz-qtext, .quiz-opt b { overflow-wrap:break-word; }
.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-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 h2 { font-size:clamp(2.8rem,5vw,4.8rem); line-height:.97; letter-spacing:-.05em; }
@media(max-width:899px) {
 .finder-step,.qz-result,.finder-invitation-grid { grid-template-columns:minmax(0,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; }
}

/* ---- 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-t { min-width: 0; }
.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; }
  /* Q8: the file size stays visible on phones, on its own line under the label. */
  .tx-dl small { display: block; margin-top: .1rem; font-size: .75rem; line-height: 1.25; }
  .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-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-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-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; }
}
@media (min-width: 960px) {
  .wx-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
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%; } }

/* Give the full range the width of the hero; retain complete, undistorted artwork.
   Copy and buyer actions lead the range at every size, without a hidden carousel. */
.tr-hero { overflow-wrap: anywhere; }
.tr-hero > .wrap { max-width: 1440px; }
.tr-intro { display: grid; gap: .5rem 3rem; }
.tr-intro > div { min-width: 0; }
.tr-hero .tr-h { max-width: 12ch; }
.tr-range { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; margin: 2rem 0 0; padding: 0; }
.tr-range li { min-width: 0; }
.tr-range a { display: block; height: 100%; color: var(--cream); text-decoration: none; border-radius: 14px; }
.tr-range picture { display: block; }
.tr-range img { display: block; width: 100%; height: auto; aspect-ratio: 20 / 27; object-fit: contain; border-radius: 14px; }
.tr-range span { display: block; padding: .65rem .15rem 0; font: 700 1rem/1.3 var(--font-display); text-align: center; text-wrap: balance; }
.tr-range a:hover span { text-decoration: underline; text-underline-offset: .2em; }
.tr-range a:focus-visible { outline: 3px solid var(--sun); outline-offset: 5px; }
@media (min-width: 600px) and (max-width: 899px) {
  .tr-range { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tr-range li:last-child { grid-column: 2; }
}
@media (min-width: 900px) {
  .tr-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
  .tr-range { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 2.5rem; }
  .tr-range span { font-size: 1.1rem; }
}

/* 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; }
/* Three a row from 560 px while each card keeps 10rem; with enlarged text they drop to one a row. */
@media (min-width: 560px) { .tr-formats { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(10rem, 33.33% - 1rem)), 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; }
}
/* When the list is narrower than 16rem (enlarged text on a phone), the pack sits above its facts instead of beside them.
   A container query in rem follows both the browser's text size and the page's own font size. */
.tr-formats { container-type: inline-size; }
@container (max-width: 15.99rem) {
  .tr-format { grid-template-columns: minmax(0, 1fr); overflow-wrap: break-word; }
  .tr-format-art { grid-row: auto; width: min(6.6rem, 100%); margin-bottom: .7rem; }
}

/* 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%; } }
/* A button row narrower than 10rem (enlarged text on a small phone) lets a label's glued size note break. */
.ss-ctas { container-type: inline-size; }
@container (max-width: 9.99rem) { .ss-ctas .btn { max-width: 100%; overflow-wrap: anywhere; } }
.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; }

/* A quiet buyer entry alongside the consumer campaign; no product-stage changes. */
.home-buyer-route { background: var(--cream); color: var(--ink); padding: 1rem 0; border-bottom: 1px solid rgba(58,28,101,.15); }
.home-buyer-route .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.6rem; }
.home-buyer-route p { margin: 0; flex: 1 1 22rem; }
.home-buyer-route a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: .25em; }
.campus-hero h1 { max-width: 21ch; font-size: clamp(2.2rem, 4.5vw, 4.8rem); line-height: 1.04; text-wrap: balance; }
.campus-hero .wx-lede { max-width: 58ch; }
.campus-hero .tx-avail { max-width: 70ch; }
.campus-pack-facts { margin: 1.5rem 0; }
.campus-cups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(1rem,3vw,3rem); max-width: 1100px; margin: 2rem auto 0; }
.campus-cup { min-width: 0; border: 1px solid rgba(251,241,228,.3); border-radius: var(--radius-lg); padding: clamp(1rem,2.5vw,2rem); }
.campus-cup > a:first-child { text-decoration: none; }
.campus-cup img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.campus-cup h2 { font-size: clamp(1.4rem,2.4vw,2.2rem); margin: .75rem 0 1rem; }
.campus-cup dl { font-size: .95rem; margin: 0 0 1.2rem; }
.campus-cup dl div { display: flex; flex-wrap: wrap; gap: .3rem 1rem; justify-content: space-between; padding: .35rem 0; }
.campus-cup dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.campus-details { display: block; margin-top: 1rem; text-underline-offset: .25em; }
.campus-planning { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(2rem,5vw,5rem); }
.campus-steps { padding-left: 1.4rem; }
.campus-steps li { padding-left: .3rem; margin: 0 0 1.2rem; }
@media(max-width: 599px) { .campus-cups, .campus-planning { grid-template-columns: minmax(0,1fr); } }

/* 26 Oct 2026 (Ray: premium pass items 1 and 3). One main action per buyer hero: the second action is a text link.
   The campus hero shows the two first planned cups beside the copy. */
.wx-ctas, .fo-ctas, .tr-ctas { align-items: center; }
.hero-text-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .15rem; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--cream); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em; }
.hero-text-link::after { content: "\2192"; margin-left: .4rem; display: inline-block; transition: transform .2s var(--ease-out); }
.hero-text-link:hover { color: var(--white); }
.hero-text-link:hover::after { transform: translateX(3px); }
.hero-text-link:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .hero-text-link::after { transition: none; } }
.campus-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 3rem; align-items: center; }
.campus-hero-pair { margin: 0; display: flex; justify-content: center; align-items: flex-end; max-width: 600px; width: 100%; justify-self: center; }
/* The renders carry wide transparent bands above and below the cup (alpha box y 329–976 of 1250): crop them. */
.campus-hero-cup { width: 56%; height: auto; aspect-ratio: 1000 / 760; object-fit: cover; object-position: 50% 60%; filter: drop-shadow(0 18px 22px rgba(15, 4, 30, .45)); }
.campus-hero-cup-os { position: relative; z-index: 1; margin-right: -10%; transform: translateY(-6%); }
.campus-hero-cup-mg { position: relative; z-index: 2; }
@media (min-width: 960px) { .campus-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); } }
@media (max-width: 559px) { .campus-hero-pair { max-width: 340px; } }

/* Premium pass item 4: the launch note keeps every fact but stops being the loudest thing in the opening screen.
   One quiet paragraph: no yellow headline line, smaller type, a thin rule. */
.tx-avail, .fo-avail { padding-left: .8rem; border-left-width: 2px; border-left-color: rgba(220, 255, 112, .55); font-size: .9rem; line-height: 1.5; color: rgba(251, 241, 228, .78); }
.tx-avail strong, .fo-avail strong { display: inline; color: var(--cream); font-weight: 600; }
/* Trade: the two business routes follow the headline and actions instead of preceding them. */
.tr-hero .business-routes { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }
/* Premium pass item 9: each cup card's action is a text link, so the cup and its item numbers carry the card;
   the shared "Ask about your cup program" button below the cards stays the one solid action. */
.campus-cup .campus-enquire { min-height: 44px; }
.campus-cup .campus-details { margin-top: .35rem; }

/* Premium item 7 (D192): on Trade and Campus the purple stays for the opening band only; the flavor tiles and the
   first-cup cards now sit on the warm cream used below the hero on every buyer page. */
.tr-range-band, .campus-cups-band { background: var(--cream); color: var(--ink); padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.tr-range-band .tr-range { margin-top: 0; }
.tr-range-band .tr-range a { color: var(--ink); }
.tr-range-band .tr-range a:focus-visible, .campus-cups-band a:focus-visible { outline-color: var(--acai); }
.campus-cups-band .tx-avail { color: rgba(31, 11, 61, .8); border-left-color: var(--acai); }
.campus-cups-band .tx-avail strong { color: var(--ink); }
.campus-cups-band .campus-cups { margin-top: 1.5rem; }
.campus-cups-band .campus-cup { border-color: rgba(31, 11, 61, .16); background: #fff; }
.campus-cups-band .campus-cup a, .campus-cups-band .hero-text-link { color: var(--acai); }
.campus-cups-band .campus-cup > a:first-child, .campus-cups-band .campus-cup h2 { color: var(--ink); }

/* Trade, "Set up at Vistar" (27 Oct): one bucket with a legible label instead of four identical-looking
   white pails at thumbnail size. */
.tr-bucket-solo { margin: 0; }
.tr-bucket-solo img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--white); }
.tr-bucket-solo figcaption { margin-top: .7rem; font-size: .9rem; color: var(--muted); }

/* Reserve (27 Oct): the page opens with the same purple page-head as Contact and the other business pages;
   "How it works" becomes a subheading over a brand-marked list instead of a second display headline. */
.rs-body { padding-top: clamp(2rem, 4vw, 3.25rem); }
.rs-how-h { font-size: clamp(1.45rem, 1.15rem + 1vw, 1.9rem); margin: 0 0 .9rem; }
.rs-how { margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); padding-left: 1.25rem; }
.rs-how li::marker { color: var(--pink-deep); font-size: 1.1em; }
.rs-how li + li { margin-top: .45rem; }

/* ---- src/css/87-blog.css ---- */
/* v38: blog posts (blog/*.html). The hero's pack-artwork note sits right under the lede. */

/* 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; }
/* With enlarged text the hero column may shrink to the screen, and a title keeps the reader's size,
   breaking a long word only when it cannot fit. */
.post-photo { grid-template-columns: minmax(0, 1fr); }
.post-photo-copy, .post-hero .hf-copy { min-width: 0; }
.post-hero h1 { overflow-wrap: break-word; }
.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); }

/* Premium pass item 6: the article opening reads as one unit. On desktop the field panel is sized closer to its
   content, so the first paragraph starts sooner; on phones the pack picture's empty floor is trimmed (every pack ends
   above 72% of its height, as on Home), so the headline sits in the first screen. */
@media (min-width: 960px) { .post-hero .hf-wrap { min-height: min(62svh, 580px, 46vw); padding-bottom: clamp(2rem, 4vw, 3.5rem); } }
@media (max-width: 639px) {
  .post-hero .hf-media { aspect-ratio: 1600 / 1720; overflow: hidden; }
  .post-hero .hf-media picture { display: block; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%); }
}

/* Post details (27 Oct): list markers in the brand pink instead of the browser's black disc (::marker
   keeps list semantics, unlike list-style:none), and the closing "All posts / Where to buy" buttons get
   a real gap instead of a single space between them. */
.post .prose ul > li::marker { color: var(--pink-deep); font-size: 1.15em; }
.post .prose ol > li::marker { color: var(--pink-deep); font-weight: 700; }
.post .prose li + li { margin-top: .35rem; }
.post .post-body > p:has(> .btn + .btn) { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---- 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; }
/* The yellow button keeps dark text, so its ring is drawn in yellow to show on the dark band (WCAG 2.4.7). */
.home-foodservice-links>a.btn:focus-visible { outline-color:var(--sun); }
/* With enlarged text the foodservice links stay inside the row; a button label wraps only when it cannot fit. */
.home-foodservice-links>a { max-width:100%; }
.home-foodservice-links>a.btn { white-space:normal; text-wrap:balance; }
.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; }
/* Two bowls a row while each has 8rem; otherwise one (enlarged text on a phone). */
.signature-menu { grid-template-columns:repeat(auto-fill, minmax(min(100%, max(8rem, 50% - 1rem)), 1fr)); }
.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:minmax(0,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:minmax(0,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 keep the secondary canvas actions out of the way. The Home viewer's
   explicit Expand action is restored below for a usable close/focus-managed view. */
@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-ar-help { position: static; order:-1; flex: 0 1 auto; max-width: calc(100% - 100px); }
  .pack3d:not(.p3-full) .p3-ar-help > summary { padding: .45rem .65rem; font-size: .72rem; }
  .pack3d:not(.p3-full) .p3-ar-help-panel { left: 8px; right: 8px; top: auto; bottom: 72px; width: auto; max-height:min(260px, calc(100vh - 180px)); overflow:auto; }
  .pack3d:not(.p3-full) .p3-reset { min-width: 84px; }
  .page-home .hx-model .pack3d:not(.p3-full) .p3-open { bottom: 76px; display: inline-flex; }
}

/* Buyer pages with enlarged text: a long word in a heading, card or link breaks only when it cannot fit. */
.wx-h, .fo-h, .buyer-resource-grid a, .buyer-faq a, .signature-menu, .signature-photo figcaption, .page-foodservice main h1, .page-foodservice main h2 { overflow-wrap:break-word; }
.buyer-resource-grid a, .signature-copy, .signature-photo { min-width:0; }
/* A narrow resource list (under 14rem: enlarged text on a phone) gives the words more room. */
.buyer-resource-grid { container-type:inline-size; }
@container (max-width:13.99rem) { .buyer-resource-grid a { padding:1rem .75rem; } }

/* Foodservice hero: the bucket with a real bowl from our Sydney café, captioned as a serving suggestion.
   The bowl overlaps only the bucket's left edge and the sticker sits on the lid, so the label stays readable.
   The caption is in normal flow under the picture, so with enlarged text it wraps instead of being clipped. */
.fo-art.fo-art-pair { aspect-ratio: auto; }
.fo-art-stage { position: relative; display: block; aspect-ratio: 1 / .84; }
.fo-art-pair .fo-tile { width: 72%; max-width: none; margin: 0 0 0 auto; }
.fo-art-pair .fo-bowl { z-index: 1; left: 0; bottom: 0; width: 44%; box-shadow: 0 0 0 6px #2C1252, 0 22px 40px -18px rgba(0, 0, 0, .6); }
.fo-art-pair .fo-bowl picture { display: block; height: 100%; }
.fo-art-pair .fo-bowl img { transform: none; object-position: 50% 74%; }
.fo-art-pair .fo-art-cap { position: static; width: auto; max-width: 100%; margin: .75rem 0 0; text-align: left; overflow-wrap: break-word; }
.fo-art-pair .fo-sticker { right: 0; top: -4%; bottom: auto; }

/* ---- src/css/95-desktop-presentation.css ---- */
/* Owner desktop presentation: readable scale and wider approved imagery. */
@media (min-width: 960px) {
  html { font-size: clamp(18px, 1.25vw, 20px); }
  :root { --max: clamp(1232px, 92vw, 1760px); --gutter: clamp(28px, 2.5vw, 48px); --header-h: 96px; }

  /* Give navigation and actions the same comfortable scale as the page. */
  .brand img { width: 112px; height: 70px; }
  .site-nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; }
  .site-nav .btn { min-height: 48px; font-size: 1rem; }
  .btn { min-height: 52px; }
  .btn-lg { min-height: 60px; }
  .btn-small { min-height: 48px; font-size: .95rem; }
  .flight-launch { font-size: .8rem; }
  .cat-flight-link { min-height: 48px; font-size: 1rem; }

  /* Keep the original compositions, with room to read them on a monitor. */
  .page-home .hx-scene:not(.is-solo) { max-width: min(clamp(480px, 38vw, 600px), max(480px, calc((100svh - var(--header-h) - 44px) * .8))); }
  .page-home .hx-scene.is-solo { max-width: clamp(720px, 48vw, 900px); }
  /* The solo starts below the "Back to the campaign" slot, so more comes off its height (2rem, which
     grows with enlarged text, as the name row and slot do);
     otherwise the name row lands on the fold when the 3-D view opens. The name row may be wider
     than the tub, so it stays one line instead of wrapping and taking height from the model. */
  .page-home .hx-scene.is-solo .hx-solo { max-height: max(16rem, calc(100svh - var(--header-h) - 44px - 2rem)); grid-template-columns: minmax(0, 1fr); }
  /* Keep the model the same height for every flavor, so switching flavors doesn't resize the 3-D
     canvas: the Zero Sugar note line is reserved for all flavors, and when the scene is too narrow
     for the longest name row on one line (about 33rem), every name takes its own line. */
  .page-home .hx-scene.is-solo { container-type: inline-size; }
  .page-home .hx-scene.is-solo .hx-solo-info { justify-self: center; width: max-content; max-width: 100cqw; }
  .page-home .hx-scene.is-solo .hx-solo-note { min-height: 1lh; }
  @container (max-width: 34rem) { .page-home .hx-scene.is-solo .hx-solo-info [data-hero-name] { flex-basis: 100%; text-align: center; } }
  .page-home .fs-art { max-width: 640px; }
  .page-home .home-place-grid { grid-template-columns: min(42%, 560px) minmax(0, 1fr); }
  .ph-art { max-width: min(640px, 44vw); }
  .pt-fruit { max-width: 640px; }
  .fo-art { max-width: 640px; }
  .fo-art .fo-tile { max-width: 600px; }
  .wx-brand-packs { max-width: 720px; }
  .cafe-page .ch-grid { max-width: var(--max); }

  /* Small captions and factual labels should still be comfortable to read. */
  .hx-lede { font-size: var(--t-lede); }
  .eyebrow, .hx-kicker, .ph-eyebrow, .cat-kicker, .wb-kicker, .fs-kicker,
  .cafe-kicker, .ft-kicker { font-size: .82rem; }
  .page-home .hx-modes button, .page-home .hx-deck-top p,
  .page-home .hx-deck-top button, .page-home .hx-solo-info { font-size: .95rem; }
  .page-home .hx-scene .hx-note, .hx-solo-note, .hc-lineup-head > span,
  .hc-count, .hc-qualifier, .home-place-photo figcaption,
  .cat-line, .cat-tag, .cat-avail,
  .fo-glance-list dt, .wx-glance-list dt, .pt-facts dt,
  .signature-photo figcaption, .signature-allergens,
  .cafe-page .ch .sv-note, .cafe-place-grid figcaption,
  .cafe-film-link, .cafe-visit-films p, .signature-source-link,
  .signature-menu-note, .ft-h2, .footer-h { font-size: max(14px, .8rem); }
  .hc-format-label, .cat-key,
  .ph .crumbs, .ph-jump, .buyer-resource-grid span { font-size: .9rem; }
  .buyer-h1 { font-size: clamp(1.2rem, 1rem + .6vw, 1.6rem); }
  .page-home .hx-pick-name { font-size: 1rem; }
  .chips-wrap .chip img { width: clamp(48px, 3vw, 56px); height: clamp(48px, 3vw, 56px); }
  .cafe-page .store, .cafe-page .cafe-menu { max-width: 1176px; margin-inline: auto; }

  @media (min-width: 1280px) {
    .page-home .hx-pick { min-height: 190px; }
    .page-home .hx-pick picture, .page-home .hx-pick img { max-width: 140px; }
  }
  @media (max-height: 760px) {
    .page-home .hx-grid { align-items: start; }
    .page-home .hx-copy { padding-top: .75rem; }
  }
}
/* End owner desktop presentation. */

/* Desktop Home inline 3-D: the four view buttons and Reset/Expand stay inside the pack on narrow
   desktop windows and with enlarged text. Below about 21.5rem (where one row no longer fits) the pill becomes a 2 × 2 grid, so all
   four buttons show without a third row covering the tub. Normal text at 1024 px and wider is
   unchanged (the rem terms stay under their px floors at an 18–20 px root). */
@media (min-width: 960px) {
  .page-home .hx-model .pack3d:not(.p3-full) .p3-views { bottom: max(74px, 3.7rem); }
  .page-home .hx-model .pack3d:not(.p3-full) model-viewer { top: max(0px, calc((100% - min(max(140px, 6rem), 50%) - 100cqw) / 2)); height: min(calc(100% - min(max(140px, 6rem), 50%)), 100cqw); }
  @container (max-width: 21.5rem) {
    .page-home .hx-model .pack3d:not(.p3-full) .p3-views { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; border-radius: 1.5rem; bottom: max(74px, 3rem); }
    .page-home .hx-model .pack3d:not(.p3-full) model-viewer { top: max(0px, calc((100% - min(max(180px, 8.25rem), 50%) - 100cqw) / 2)); height: min(calc(100% - min(max(180px, 8.25rem), 50%)), 100cqw); }
  }
  @container (max-width: 15rem) {
    .page-home .hx-model .pack3d:not(.p3-full) .p3-reset, .page-home .hx-model .pack3d:not(.p3-full) .p3-open { padding-inline: .6rem; }
  }
}

/* ---- src/css/96-first-visit.css ---- */
/* First-visit draft: clear destinations, deliberate actions, original imagery. */
.site-nav .nav-secondary { margin-top:1rem; gap:.65rem; }
.site-nav .nav-secondary a:not(.btn) { font-size:1rem; border:0; min-height:44px; display:inline-flex; align-items:center; }
.site-nav .nav-secondary .nav-cta { margin:0; }
.hx-ctas { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem; }
.hx-mode-slot { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:.2rem .8rem; }
.business-routes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin:1.25rem 0 2rem; }
.business-routes a { display:flex; flex-direction:column; gap:.35rem; padding:1rem 1.1rem; border:1px solid #fbf1e45c; border-radius:12px; color:#fbf1e4; text-decoration:none; }
.business-routes a[aria-current] { background:#fbf1e414; }
.business-routes strong { font:700 1.05rem var(--font-display); }
.business-routes a > span { font-size:.85rem; line-height:1.5; }
.business-routes a:hover { border-color:#dcff70; }
.business-routes a:focus-visible { outline:3px solid #dcff70; outline-offset:4px; }
@media(max-width:959px) {
 .page-home .hx-grid { padding-top:1.5rem; }
 .page-home .hx-copy { display:block; order:0; padding:0 0 1.5rem; }
 .page-home .hx-kicker { margin:0 0 .8rem; }
 .page-home .hx-h { font-size:clamp(2.7rem,10vw,5rem); }
 .page-home .hx-lede { margin:.85rem 0 0; max-width:35ch; }
 .page-home .hx-ctas { margin:1.1rem 0 0; gap:.75rem; }
 .page-home .hx-scene { order:1; }
 .site-nav .nav-secondary { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem; }
 .site-nav .nav-secondary a:not(.btn) { padding:.35rem .1rem; }
}
@media(max-width:599px) { .business-routes { grid-template-columns:1fr; } }
@media(min-width:960px) {
 .site-nav { display:flex; align-items:center; gap:1.5rem; }
 .site-nav .nav-secondary { margin:0; gap:1rem; padding-left:1.5rem; border-left:1px solid #fbf1e440; }
}
@media(min-width:960px) and (max-width:1199px) {
 .site-nav { gap:.85rem; }
 .site-nav .nav-primary { gap:.85rem; }
 .site-nav .nav-secondary { gap:.75rem; padding-left:.85rem; }
 .site-nav a:not(.btn),.site-nav .nav-secondary a:not(.btn),.site-nav .btn { font-size:.88rem; }
 .site-nav .btn { padding-inline:.8rem; }
}

/* ---- src/css/97-availability-editorial.css ---- */
/* D182 draft: authentic serving photograph, restrained US availability signup.
   Scoped to this section; original media, form behavior and other pages stay intact. */
.wb-editorial { background:var(--acai); }
.wb-editorial .wb-join { box-shadow:none; border-radius:18px; }
.wb-editorial .wb-art { width:100%; max-width:420px; margin:1.5rem 0 0; aspect-ratio:auto; }
.wb-editorial-photo picture { display:block; overflow:hidden; border-radius:12px; }
.wb-editorial-photo img { display:block; width:100%; height:auto; }
.wb-editorial-photo figcaption { margin:.8rem 0 0; color:var(--cream); font-size:.8rem; line-height:1.5; letter-spacing:.015em; }
.wb-editorial-photo figcaption span { margin:0 .35em; }
@media (min-width:960px) {
 .wb-editorial .wb-hero-grid { align-items:start; gap:clamp(3rem,6vw,6rem); }
 .wb-editorial .wb-art { max-width:360px; margin-top:2rem; }
 .wb-editorial .wb-join { margin-top:2.5rem; }
}

/* ---- src/css/98-launch-editorial.css ---- */
/* Scoped launch editorial; existing art remains unmodified. */
.wb-when-grid.wb-launch-grid{grid-template-columns:minmax(0,1fr);gap:2rem}
.launch-edition{min-width:0;color:var(--ink)}
.launch-edition p{margin:0}.launch-edition a{color:inherit;text-underline-offset:.25em}
.launch-edition a:focus-visible{outline:3px solid currentColor;outline-offset:5px}
.launch-kicker{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid currentColor;padding:1.1rem 0 2rem;font-size:.85rem;letter-spacing:.04em}
.launch-kicker strong{font-weight:700}.launch-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,3rem)}
.launch-folio{min-width:0}.launch-folio h4{font-family:var(--font-display);font-size:clamp(2rem,4vw,4rem);line-height:.97;letter-spacing:-.04em;margin:0 0 1.25rem;font-weight:800}
.launch-folio .launch-number{font-size:.75rem;display:block;margin-bottom:.7rem;font-weight:600;letter-spacing:.13em}
.launch-art{display:block;overflow:hidden}.launch-art img{display:block;width:100%;height:auto;filter:none;transform:none}
.launch-caption{padding:1.25rem 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.launch-caption a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.launch-spec{font-size:.9rem;line-height:1.6;max-width:35rem;margin-top:2rem!important}
.launch-format-links{display:flex;gap:1.5rem;flex-wrap:wrap}
@media(max-width:599px){.launch-duo{grid-template-columns:1fr;gap:2.5rem}.launch-folio h4{font-size:2.45rem}.launch-kicker{font-size:.8rem;padding-bottom:1.5rem}.launch-spec{margin-top:1.5rem!important}}

/* ---- src/css/99-home-cafe-refinement.css ---- */
/* Home: one still brand hero, quiet editorial links and a compact flavor stage.
   Café: process films first, Jeep and Wild Press as a secondary band. */

/* Brand body and navigation type (Variant B review candidate): Apfel Grotezk by Collletttivo, SIL OFL 1.1
   (assets/fonts/apfel-grotezk/Apfel-OFL.txt), served as the supplied OTF files, unmodified. Funtastic is not
   licensed here, so headings keep the existing display face (Bricolage Grotesque) as a documented fallback. */
@font-face { font-family:"Apfel Grotezk"; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/apfel-grotezk/ApfelGrotezk-Regular.woff2) format("woff2"); }
@font-face { font-family:"Apfel Grotezk"; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/apfel-grotezk/ApfelGrotezk-Mittel.woff2) format("woff2"); }
@font-face { font-family:"Apfel Grotezk"; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/apfel-grotezk/ApfelGrotezk-Fett.woff2) format("woff2"); }
/* Metric-matched Apfel fallbacks (letter-frequency width and vertical metrics measured against Arial / Liberation
   Sans from the font files), so text barely moves when Apfel swaps in; same method as the DM Sans fallbacks. */
@font-face { font-family:"Apfel Grotezk Fallback"; src:local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans-Regular"); font-weight:100 449; size-adjust:96.5%; ascent-override:96.6%; descent-override:29%; line-gap-override:7.3%; }
@font-face { font-family:"Apfel Grotezk Fallback"; src:local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans-Regular"); font-weight:450 599; size-adjust:97.3%; ascent-override:95.7%; descent-override:28.8%; line-gap-override:7.2%; }
@font-face { font-family:"Apfel Grotezk Fallback"; src:local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); font-weight:600 900; size-adjust:91.1%; ascent-override:102.3%; descent-override:30.7%; line-gap-override:7.7%; }
:root { --font-body:"Apfel Grotezk", "Apfel Grotezk Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body, .site-nav, .site-header .site-nav a:not(.btn), .site-nav .btn, .nav-toggle, .btn { font-family:var(--font-body); }

/* The campaign hero: the approved 1672×941 image as one plane with the copy, not a card. The section
   takes the image's own purple; on desktop the picture sits flush with the hero's right and bottom edges
   at no more than 836×470.5 CSS px, half the 1672×941 source, so every 2× screen gets native pixels, and
   its left and top edges fade into the purple (CSS masks; the file is unchanged). The hero hugs its copy
   and is never shorter than the image. object-position 100 % keeps the
   woman, her spoonful and the bowl in view at every width. The 3D studio keeps its place: the still
   hero has a lightweight opt-in entry, the flavor section retains its /?view=3d…#tubs deep link,
   and no model downloads until either is deliberately activated. */
.hx { --hx-bg:#50034e; position:relative; overflow:hidden; }
.hx-scene .hx-still { position:relative; overflow:hidden; background:#50034e; }
.hx-scene .hx-still picture { display:block; position:static; aspect-ratio:auto; width:100%; height:100%; }
.hx-still-img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:100% 50%; }
.hx-scene:not(.is-solo) .hx-mode-slot { position:absolute; right:1rem; bottom:1rem; z-index:2; display:flex; justify-content:flex-end; min-height:0; max-width:calc(100% - 2rem); }
.hx-scene:not(.is-solo) .hx-modes { margin:0; border-color:rgba(251,241,228,.68); background:rgba(31,11,61,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.hx-scene:not(.is-solo) .hx-modes button { min-height:48px; padding:.65rem 1rem; text-align:center; }
/* A deep-linked 3D visitor can scroll the model while the site header stays fixed. The slot keeps
   a reserved control footprint; only the existing exit is pinned, so loading and closing never move
   the studio. The runtime removes the pin when this studio itself leaves the viewport. */
.hx-scene.is-solo .hx-mode-slot { position:relative; z-index:31; }
.hx-scene.is-solo [data-hero-range] { min-height:44px; padding:.65rem 1rem; border:1px solid rgba(31,11,61,.25); border-radius:999px; background:var(--cream); color:var(--ink); box-shadow:0 8px 24px -12px rgba(0,0,0,.65); -webkit-tap-highlight-color:transparent; }
.hx-scene.is-solo [data-hero-range]:hover { background:var(--cream); color:var(--ink); box-shadow:0 8px 24px -12px rgba(0,0,0,.65); text-decoration:underline; text-underline-offset:.2em; }
@media (max-width:959px) {
  .hx-scene.is-solo .hx-mode-slot { min-height:max(44px, 3.5rem); }
  .hx-scene.is-solo [data-hero-range].is-pinned { position:fixed; top:var(--hx-exit-top, calc(max(var(--header-h), var(--header-live, 0px)) + env(safe-area-inset-top, 0px) + 8px)); left:max(var(--gutter), calc((100vw - 560px) / 2 + var(--gutter))); z-index:31; }
}
@media (min-width:960px) {
  .page-home .hx-grid { grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); min-height:470.5px; }
  .page-home .hx-grid:has(.hx-scene.is-solo) { min-height:clamp(480px, 38vw, 560px); }   /* 3D mode keeps its studio height */
  .page-home .hx-grid:not(:has(.hx-scene.is-solo)) { position:static; }   /* the hero section, not a grid row, frames the image plane */
  .hx-copy { position:relative; z-index:1; }
  .page-home .hx-scene:not(.is-solo) { position:absolute; top:auto; right:0; bottom:0; width:min(56vw, 836px); height:min(100%, 470.5px); max-width:none; margin:0; }
  .hx-scene:not(.is-solo) .hx-still { height:100%; -webkit-mask-image:linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to bottom, transparent 0, #000 14%); mask-image:linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to bottom, transparent 0, #000 14%); -webkit-mask-composite:source-in; mask-composite:intersect; }
}
@media (max-width:959px) {
  .hx-scene .hx-still { aspect-ratio:1.1 / 1; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14%); mask-image:linear-gradient(to bottom, transparent 0, #000 14%); }
  .hx-scene:not(.is-solo) { width:auto; max-width:none; margin:.5rem calc(-1 * var(--gutter, 16px)) 0; }
  .hx .hx-h { font-size:clamp(2.1rem, 10.5vw, 2.8rem); line-height:.95; margin-bottom:.6rem; }
  .hx .hx-lede { font-size:.95rem; line-height:1.45; margin-bottom:1rem; }
  /* Side by side wherever both buttons fit (about 350 px and up); they wrap rather than clip at 320 px or with larger text (WCAG 1.4.10 / 1.4.4). */
  .hx .hx-ctas { flex-wrap:wrap; gap:.6rem; }
  /* The row wraps before a button shrinks, so a label only breaks when its button alone is wider than the row
     (very large text on a narrow screen). */
  .hx .hx-ctas .btn { padding:.7rem 1rem; font-size:.95rem; min-height:48px; max-width:100%; text-wrap:balance; }
  .page-home .hx-grid { padding-bottom:0; }
  .hx-scene:not(.is-solo) .hx-mode-slot { right:.75rem; bottom:.75rem; max-width:calc(100% - 1.5rem); padding:0; }
}

/* Hero actions: Explore flavors leads; the US business route sits beside it in cream outline. */
.hx-ctas { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem; }
.hx .hx-business { color:#fbf1e4; border-color:rgba(251,241,228,.7); }
.hx .hx-business:hover { background:#fbf1e4; color:#251039; border-color:#fbf1e4; }
@media (min-width:960px) { .hx .hx-lede { max-width:28rem; } }
@media (max-width:959px) { .hx-copy { order:1; } .hx-scene { order:2; } }

/* Quiet editorial links in place of the moving banner. */
.hx-editorial { padding:1.75rem 0 2rem; background:#1f0b3d; color:#fbf1e4; border-top:1px solid rgba(251,241,228,.14); }
.hx-editorial-h { margin:0 0 .75rem; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#cff177; }
.hx-editorial-list { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.25rem 2rem; margin:0; padding:0; list-style:none; }
.hx-editorial-list a { display:block; padding:.6rem 0; color:inherit; text-decoration:none; border-bottom:1px solid rgba(251,241,228,.14); }
.hx-editorial-list .hx-path-t { text-transform:none; letter-spacing:0; font-size:1rem; font-weight:700; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.hx-editorial-list .hx-path-d { display:block; margin-top:.15rem; font-size:.82rem; color:#d7cce0; }
.hx-editorial-list a:hover .hx-path-t { text-decoration-thickness:2px; }
.hx-editorial-list a:focus-visible { outline:3px solid #cff177; outline-offset:2px; border-radius:4px; }
@media (max-width:959px) { .hx-editorial-list { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 1.25rem; } }
@media (max-width:599px) { .hx-editorial-list { grid-template-columns:minmax(0, 1fr); } }

/* Compact flavor stage: one primary action, quieter secondary links, a smaller pack. */
@media (min-width:960px) {
  .page-home .fs .fs-stage { grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); }
  .page-home .fs .fs-art { max-width:340px; }
}
@media (max-width:959px) { .page-home .fs .fs-art { max-width:280px; } }
.fs-ctas { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem 1.25rem; }
.fs-ctas .fs-build { margin-top:0; }

/* Café: Jeep and Wild Press sit side by side as a quieter secondary band. */
.cafe-page .cafe-more { padding:2.5rem 0 1rem; background:#f6ead8; }
.cafe-page .cafe-more-label { margin:0 auto 1rem; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#501765; }
.cafe-page .cafe-more-grid { display:grid; grid-template-columns:minmax(0, 1fr); gap:1rem; }
@media (min-width:900px) { .cafe-page .cafe-more-grid { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:start; } }
.cafe-page .cafe-more-grid > section { margin:0; padding:1.5rem; border-radius:20px; overflow:hidden; }
.cafe-page .cafe-more-grid > section > .wrap { width:auto; max-width:none; padding:0; margin:0; }
.cafe-page .cafe-more .cafe-jeep-grid { grid-template-columns:minmax(0, 1fr) minmax(0, 150px); gap:1rem; max-width:none; }
.cafe-page .cafe-more .cafe-jeep-copy h2, .cafe-page .cafe-more .wild-press h2 { font-size:clamp(1.7rem, 3vw, 2.3rem); margin:.4rem 0 .6rem; }
.cafe-page .cafe-more .cafe-jeep figure { max-width:150px; }
.cafe-page .cafe-more .wp-wordmark { font-size:clamp(2rem, 4.5vw, 3rem); margin:.2rem 0 .6rem; }
.cafe-page .cafe-more .wp-description { margin-bottom:1rem; }
.cafe-page .cafe-more .wp-flavors { grid-template-columns:repeat(auto-fit, minmax(6.25rem, 1fr)); gap:.4rem; }
.cafe-page .cafe-more .wp-flavors li { min-height:0; aspect-ratio:auto; padding:.7rem .75rem; }
.cafe-page .cafe-more .wp-flavors h3 { font-size:1rem; overflow-wrap:anywhere; }
@media (max-width:699px) { .cafe-page .cafe-more .cafe-jeep-grid { grid-template-columns:minmax(0, 1fr) 120px; } .cafe-page .cafe-more .cafe-jeep figure { max-width:120px; } }

/* Cafe page with enlarged text. Headings keep the reader's size and break a long word only when it cannot fit;
   columns may shrink below their content; side-by-side rows stack when their container is narrower than 14rem
   (rem container queries follow both the browser's text size and the page's own font size). */
main.cafe-page h1, main.cafe-page h2, main.cafe-page .cafe-cap { overflow-wrap: break-word; }
main.cafe-page .ch-copy, main.cafe-page .cafe-visit-row > *, main.cafe-page .cafe-coffee-grid > *, main.cafe-page .cafe-partner-row > *, main.cafe-page .cafe-menu > li { min-width: 0; }
main.cafe-page .ch-copy { max-width: 100%; }
main.cafe-page .cafe-visit-actions .btn { max-width: 100%; }
main.cafe-page .cafe-more-grid > section, main.cafe-page .cafe-us > li { container-type: inline-size; }
@media (max-width: 699px) {
  main.cafe-page .cafe-coffee-grid, main.cafe-page .cafe-partner-row { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 13.99rem) {
  main.cafe-page .cafe-more .cafe-jeep-grid { grid-template-columns: minmax(0, 1fr); }
  main.cafe-page .cafe-more .cafe-jeep figure { max-width: 100%; }
  main.cafe-page .cafe-us > li > a { grid-template-columns: minmax(0, 1fr); }
}
/* Proof strip under the hero (D194): the checkable facts a shopper or buyer looks for first, each traced to
   the ingredient statements and the certifications on /trade. Lime, like the brand's accent arc. */
.hx-proof { background:#dcff70; color:#1f0b3d; }
.hx-proof .wrap { display:flex; align-items:center; gap:1rem 2rem; padding-block:1rem; }
.hx-proof-list { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.75rem 1.5rem; flex:1; margin:0; padding:0; list-style:none; }
.hx-proof-list li { padding-left:1.4rem; position:relative; font-size:.82rem; line-height:1.35; }
.hx-proof-list li::before { content:""; position:absolute; left:0; top:.2em; width:.9rem; height:.9rem; border-radius:50%; background:#1f0b3d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23dcff70' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; }
.hx-proof-list strong { display:block; font-size:.92rem; }
.hx-proof-more { flex:none; font-size:.85rem; font-weight:700; color:inherit; text-underline-offset:3px; }
@media (max-width:959px) {
  .hx-proof .wrap { flex-direction:column; align-items:stretch; gap:.75rem; padding-block:1.1rem; }
  .hx-proof-list { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.9rem 1rem; }
}
/* Real café proof on Home (D194): three owner-supplied photos of the Chatswood store under the café copy. */
.home-place-strip { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.6rem; max-width:540px; margin:1.25rem 0 1rem; padding:0; list-style:none; }
.home-place-strip img { display:block; width:100%; aspect-ratio:4 / 3; height:auto; object-fit:cover; border-radius:12px; }

/* ---- src/css/99z-headline-air.css ---- */
/* Premium pass item 5: the large display headlines get a little air (letters no longer touch at large sizes).
   Same font and sizes; tracking eases from -.045/-.055em to -.03em and leading opens slightly.
   Home: Ray approved this one change as an exception to the Home hold (26 Oct, D192). Only tracking changes there;
   Home's leading and layout stay as approved. */
.fo-h, .ab-h, .wx-h, .page-head .tr-h, .ph-h, .cat-h, .wb-h, .page-404 .nf-h { letter-spacing: -.03em; }
.fo-h, .ab-h, .cat-h, .wb-h, .page-404 .nf-h { line-height: .97; }
.wx-h, .page-head .tr-h { line-height: .98; }
.ph-h { line-height: 1; }
.hx-h, .lx-h, .fs-h { letter-spacing: -.03em; }