/* Kombú public site.
   Layout: full-bleed colour bands, content held in a ~1200px column. The flavour section is a
   sticky stage whose background takes each bottle's label colour as the visitor scrolls.
   Separate from kombu.css on purpose: that file also styles the admin. */
:root {
  --ink: #191C1C;
  --ink-2: #4E5751;
  --paper: #F9F9F8;
  --paper-2: #EFF2EB;
  --green: #2D4B28;
  --green-deep: #1B2F18;
  --green-2: #46672B;
  --lime: #D9F99D;
  --orange: #F46C1C;
  --plum: #2E0C38;
  --cream: #FFF7ED;
  --line: rgba(25, 28, 28, 0.12);
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
/* Web Interface Guidelines (vercel-labs, 24/10): no tap delay, no grey flash on tap, anchors that
   land below the fixed header, and a skip link for keyboard users. */
a, button, .btn, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
[id] { scroll-margin-top: 76px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--green-deep); color: var(--cream); font-weight: 700; text-decoration: none; transition: top 0.2s; }
.skip:focus-visible { top: 12px; }
.marquee:hover .marquee-track { animation-play-state: paused; }
::selection { background: var(--lime); color: var(--green-deep); }
input, textarea { caret-color: var(--green); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }

/* ---------------------------------------------------------------- type */
h1, h2, h3 { font-family: var(--serif); font-weight: 700; margin: 0; text-wrap: balance; letter-spacing: -0.015em; }
.display { font-size: clamp(2.2rem, 4.2vw, 4.1rem); line-height: 1.02; }
/* Two lines at every width (owner, 24/10): each line is held together and the size follows the
   viewport, so "do Natural." never drops onto a third line. */
.display .l { display: block; white-space: nowrap; }
.display em { font-style: italic; font-weight: 600; }
h2 { font-size: clamp(1.8rem, 3.3vw, 2.9rem); line-height: 1.08; }
h3 { font-size: clamp(1.12rem, 1.6vw, 1.4rem); line-height: 1.2; }
.lead { font-size: clamp(0.98rem, 1.2vw, 1.08rem); line-height: 1.6; color: var(--ink-2); max-width: 34rem; }
.section-head { display: grid; gap: 14px; max-width: 40rem; margin: 0 auto clamp(30px, 4vw, 48px); text-align: center; justify-items: center; }
.section-head .lead { margin-inline: auto; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --bg: var(--lime); --fg: var(--green-deep);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0;
  background: var(--bg); color: var(--fg);
  font-weight: 700; font-size: 0.92rem; text-decoration: none; cursor: pointer;
  transition: transform 0.35s var(--ease), background 0.25s, color 0.25s, box-shadow 0.35s var(--ease);
  will-change: transform;
}
.btn:hover { opacity: .9; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-ghost { --bg: transparent; --fg: currentColor; border: 1.5px solid currentColor; }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-dark { --bg: var(--green); --fg: var(--cream); }
.btn-orange { --bg: var(--orange); --fg: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--cream);
  transition: transform 0.45s var(--ease), background 0.35s, color 0.35s, box-shadow 0.35s;
}
.site-header .logo { flex-shrink: 0; white-space: nowrap; }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 66px; }
.site-header.is-solid { background: var(--paper); color: var(--green-deep);  }
.site-header.is-hidden { transform: translateY(-100%); }
.logo { display: inline-flex; align-items: baseline; gap: 12px; text-decoration: none; }
.logo b { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.22em; }
.logo span { font-family: var(--serif); font-style: italic; font-size: 0.86rem; opacity: 0.75; }
.nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 28px); flex-shrink: 0; white-space: nowrap; }
.nav a { text-decoration: none; font-weight: 600; font-size: 0.86rem; opacity: 0.85; transition: opacity 0.2s; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; }
.nav .nav-buy { padding: 11px 22px; border-radius: 999px; background: var(--cream); color: var(--green-deep); opacity: 1; }
.site-header.is-solid .nav-buy { background: var(--green-deep); color: var(--cream); }
.audience { display: inline-flex; flex-shrink: 0; white-space: nowrap; padding: 4px; border-radius: 999px; border: 1.5px solid currentColor; }
.audience a { padding: 7px 14px; border-radius: 999px; font-size: .8125rem; font-weight: 700; text-decoration: none; opacity: 0.8; transition: background 0.25s, color 0.25s, opacity 0.25s; }
.audience a.is-selected { background: currentColor; opacity: 1; }
.audience a.is-selected span { color: var(--green-deep); }
.site-header.is-solid .audience a.is-selected span { color: var(--cream); }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: transparent; color: inherit; border: 1.5px solid currentColor; cursor: pointer; }
.menu-btn i { display: block; width: 18px; height: 2px; margin: 4px auto; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.2s; }
.menu-open .menu-btn i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-btn i:nth-child(2) { opacity: 0; }
.menu-open .menu-btn i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.announce { background: var(--orange); color: #fff; text-align: center; font-weight: 600; font-size: 0.88rem; padding: 9px var(--gutter); }

/* ---------------------------------------------------------------- grain */
/* The noise layer is oversized so its jitter never reveals an edge; the section must clip it. */
.grain { position: relative; isolation: isolate; overflow: clip; }
.grain::after {
  display: none;
  content: ""; position: absolute; inset: -50%; z-index: 0; pointer-events: none; opacity: 0.09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
.grain > * { position: relative; z-index: 1; }
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------------------------------------------------------------- hero */
.hero { background: var(--green-deep); color: var(--cream); overflow: hidden; }
.hero .wrap, .b2b-hero .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(24px, 4vw, 56px); min-height: min(92svh, 760px); padding-top: 86px; padding-bottom: 48px; }
.hero-copy { display: grid; gap: 20px; justify-items: start; width: 100%; min-width: 0; max-width: 34rem; }
.hero-sub { display: block; font-family: var(--serif); font-style: normal; font-weight: 600; font-size: clamp(1.1rem, 1.5vw, 1.35rem); letter-spacing: 0; color: var(--lime); line-height: 1.4; margin: 0; }
.hero .lead { color: rgba(255, 247, 237, 0.78); }
.hero .btn-ghost { color: var(--cream); }
.hero-stage { position: relative; width: 100%; height: min(68svh, 580px); padding-bottom: 34px; display: grid; place-items: center; }
@property --glow { syntax: "<color>"; inherits: true; initial-value: #7A1A2B; }
.hero-stage { transition: --glow 1.2s var(--ease); }
.bubbles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-bottle { position: relative; height: 100%; display: grid; place-items: center; animation: float 6s ease-in-out infinite; transform-style: preserve-3d; }
.hero-bottle img { position: absolute; height: 94%; width: auto; aspect-ratio: 533 / 1600; max-width: none;  opacity: 0; transform: scale(0.94) rotate(-3deg); transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); }
.hero-bottle img.is-on { opacity: 1; transform: none; }
.hero-bottle { cursor: pointer; }
.hero-arrow { position: absolute; top: calc(50% - 17px); transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 247, 237, 0.1); color: var(--cream); border: 1.5px solid rgba(255, 247, 237, 0.35); cursor: pointer; transition: background 0.25s; }
.hero-arrow:hover { background: rgba(255, 247, 237, 0.2); }
.hero-arrow svg { width: 22px; height: 22px; }
.hero-arrow.prev { left: calc(50% - min(19vw, 190px)); }
.hero-arrow.next { right: calc(50% - min(19vw, 190px)); }
.hero-now { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; white-space: nowrap; font-size: 0.86rem; font-weight: 600; }
.hero-now strong { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--lime); }
.hero-dots { display: flex; gap: 7px; }
.hero-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 247, 237, 0.32); cursor: pointer; transition: width 0.4s var(--ease), background 0.3s; }
.hero-dots button[aria-pressed="true"] { width: 26px; border-radius: 6px; background: var(--lime); }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

/* ---------------------------------------------------------------- marquee */
.marquee { background: var(--lime); color: var(--green-deep); overflow: hidden; padding: 13px 0;  }
.marquee-track { display: flex; width: max-content; animation: marq 46s linear infinite; }
.marquee span { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(1.02rem, 1.5vw, 1.22rem); padding: 0 20px; white-space: nowrap; display: inline-flex; align-items: center; gap: 44px; }
.marquee span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- sections */
.band { padding-block: clamp(60px, 7vw, 100px); }
.band.tint { background: var(--paper-2); }
.band.dark { background: var(--green-deep); color: var(--cream); }
.band.dark .lead { color: rgba(255, 247, 237, 0.75); }
.band.plum { background: var(--plum); color: var(--cream); }
.band.plum .lead { color: rgba(255, 247, 237, 0.74); }

/* what's different: read like the label on the bottle. What goes in, and what is left out. */
.ledger { display: grid; grid-template-columns: 1fr 1fr; max-width: 860px; margin: 0 auto; border-top: 2px solid var(--green); text-align: center; }
.ledger-col { padding: 28px 0 8px; min-width: 0; }
.ledger-col { padding-inline: clamp(16px, 4vw, 48px); padding-bottom: 24px; }
.ledger-col + .ledger-col {  }
.ledger h3 { font-family: var(--sans); font-size: 0.95rem; font-weight: 700; letter-spacing: 0; color: var(--ink-2); margin-bottom: 18px; }
.ledger ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ledger li { font-family: var(--serif); font-weight: 600; font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height: 1.3; color: var(--green); }
.ledger-out li { color: #9A3F12; }
.ledger-note { margin: 30px auto 0; text-align: center; padding-top: 22px;  max-width: 44rem; font-size: 0.98rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- flavour walk */
.walk-intro { padding-block: clamp(60px, 7vw, 100px) 30px; }
.walk { position: relative; }
.walk-stage {
  --c: #4A2352; --sfg: var(--cream); --sfg2: rgba(255, 247, 237, 0.78); --acc: #F4D58D;
  position: sticky; top: 0; height: 100svh; overflow: hidden; touch-action: pan-y;
  background: var(--c); color: var(--sfg);
  transition: background 0.8s var(--ease), color 0.6s;
}
.walk-stage .wrap { position: relative; height: 100%; display: grid; grid-template-columns: 1fr 0.9fr; align-items: center; gap: 28px; padding-top: 80px; padding-bottom: 80px; }
.walk-copy { display: grid; gap: 18px; min-width: 0; }
.walk-count { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.16em; color: var(--sfg2); font-variant-numeric: tabular-nums; }
.walk-family { display: inline-flex; width: fit-content; padding: 7px 14px; border-radius: 999px; font-size: 0.86rem; font-weight: 700; border: 1.5px solid var(--acc); color: var(--acc); }
.walk-name { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1; }
.walk-angle { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(1.1rem, 1.7vw, 1.4rem); color: var(--acc); margin: 0; }
.walk-desc { margin: 0; color: var(--sfg2); max-width: 32rem; }
.walk-ing { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; padding: 0; list-style: none; }
.walk-ing li { padding: 7px 13px; border-radius: 999px; background: color-mix(in srgb, var(--sfg) 12%, transparent); font-size: 0.86rem; font-weight: 600; }
/* own token names: the button keeps --fg/--bg for itself, and sharing them made it
   resolve to the stage colour on both fill and text - invisible */
/* The stage's colours use their own token names: .btn defines --bg/--fg on itself, and when the
   stage shared those names the button resolved to the stage colour for fill and text alike. */
.walk-stage .btn { --bg: var(--sfg); --fg: var(--c); width: fit-content; }
.walk-bottle { position: relative; height: 100%; display: grid; place-items: center; cursor: grab; user-select: none; -webkit-user-select: none; }
.walk-bottle.is-dragging { cursor: grabbing; }
.walk-bottle img { position: absolute; height: 86%; width: auto; max-width: none; opacity: 0; transform: translateX(calc(var(--walk-direction, 1) * 24px)) scale(0.97) rotate(calc(var(--walk-direction, 1) * 2deg)); transition: opacity 0.35s var(--ease), transform 0.5s var(--ease); }
.walk-bottle img.is-on { opacity: 1; transform: none; }
.walk-rail { position: absolute; z-index: 2; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 4px; padding: 0 var(--gutter); }
.walk-rail button { position: relative; flex: 0 1 40px; width: 40px; min-width: 0; height: 44px; padding: 0; border: 0; background: transparent; color: var(--sfg); cursor: pointer; }
.walk-rail button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--sfg); background: var(--sw); opacity: 0.7; transform: translate(-50%, -50%); transition: transform 0.35s var(--ease), opacity 0.3s; }
.walk-rail button[aria-current="true"]::before { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
.walk-progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--acc); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform 0.3s var(--ease); }
.walk-steps { position: relative; margin-top: -100svh; pointer-events: none; }
/* Each flavour holds the stage for about two-fifths of a screen. The first and last get a
   full screen: the first so it is already showing when the stage pins, the last so it is not
   cut short when the stage releases. */
.walk-step { height: 42svh; }
.walk-step:first-child, .walk-step:last-child { height: 100svh; }

/* ---------------------------------------------------------------- partners */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 26px; }
.chip { padding: 9px 16px; border-radius: 999px; border: 0; background: #fff;  font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.chip[aria-pressed="true"] { background: var(--green); color: var(--cream);  }
.partners { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.partners > * { flex: 0 1 340px; }
.partner { overflow-wrap: anywhere; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 22px; border-radius: 16px; background: #fff;  min-width: 0; }
.partner .kind { font-size: 0.9rem; font-weight: 600; color: var(--orange); }
.partner h3 { font-size: 1.35rem; }
.partner dl { margin: 0; display: grid; gap: 8px; align-content: start; }
.partner dl div { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; color: var(--ink-2); font-size: 0.88rem; }
.partner dl svg { width: 18px; height: 18px; margin-top: 3px; color: var(--green-2); }
.partner dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.partner .actions .btn { min-height: 40px; padding: 0 16px; font-size: 0.84rem; }
.partner-empty { grid-column: 1 / -1; text-align: center; padding: 50px 24px; border-radius: 22px; background: #fff; }

/* ---------------------------------------------------------------- how to buy */
.buy { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; margin: 0 auto; align-items: stretch; }
.buy article { position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr; align-content: start; justify-items: center; text-align: center; gap: 20px; padding: clamp(22px, 3vw, 30px); border-radius: 16px; min-width: 0; }
.buy article > div { width: 100%; }
.buy .order-form { justify-self: stretch; }

.buy-unit { background: var(--lime); color: var(--green-deep); }
.buy-direct { background: var(--green-deep); color: var(--cream); }
.buy-unit .btn { align-self: end; }
.buy-partners { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.buy-partners li { font-family: var(--serif); font-weight: 700; font-size: 1.02rem; line-height: 1.25; padding-top: 8px;  }
.buy-partners li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 16px) / 2); }
.buy-facts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: 0.94rem; }
.buy-facts li { display: flex; gap: 10px; align-items: baseline; }
.buy-facts li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); transform: translateY(-2px); }
.buy .big { font-family: var(--serif); font-weight: 700; font-size: clamp(2.4rem, 3.6vw, 3.2rem); line-height: 0.9; opacity: 0.9; }
.buy h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-top: 6px; }
.buy p { margin: 8px 0 0; opacity: 0.86; max-width: 26rem; font-size: 0.94rem; }
.buy-unit .btn { --bg: var(--green-deep); --fg: var(--cream); }
.buy-direct .btn { --bg: var(--lime); --fg: var(--green-deep); }
.buy-direct .field input { background: rgba(255, 247, 237, 0.96); }
.walk-copy .actions { margin-top: 4px; }
.order-fab { position: fixed; z-index: 40; right: var(--gutter-r); bottom: max(16px, env(safe-area-inset-bottom, 0px)); display: none; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; font-size: 0.92rem; border-radius: 999px; background: var(--green-deep); color: var(--lime); font-weight: 700; text-decoration: none;  transition: opacity 0.3s, transform 0.3s var(--ease); }
.order-fab.is-away { visibility: hidden; opacity: 0; transform: translateY(20px); pointer-events: none; }
@media (max-width: 1140px) { .order-fab:not([hidden]) { display: inline-flex; } }
.order-form { display: grid; gap: 10px; margin-top: 0; }
.order-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------------------------------------------------------------- forms */
.field { display: grid; gap: 7px; min-width: 0; }
.field span { font-size: 0.82rem; font-weight: 600; opacity: 0.85; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 0;
  background: rgba(255, 255, 255, 0.92); color: var(--ink); font: inherit; font-size: 1rem;
  border: 1.5px solid rgba(25, 28, 28, 0.18); transition: border-color 0.2s;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--orange); outline-offset: 2px; border-color: var(--orange); }
.form-note { font-size: 0.88rem; opacity: 0.8; margin: 0; }
.form-status { margin: 0; padding: 12px 16px; border-radius: 12px; font-weight: 600; font-size: 0.94rem; background: rgba(255, 255, 255, 0.92); color: var(--green-deep); }
.form-status[data-state="error"] { color: #9A2B12; }

/* ---------------------------------------------------------------- story */
.timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: 10px; }
.timeline article { display: grid; gap: 12px; text-align: center; justify-items: center; padding-top: 22px;  min-width: 0; }
.timeline b { font-family: var(--serif); font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1; color: #F4D58D; }
.timeline p { margin: 0; color: rgba(255, 247, 237, 0.82); font-size: 0.95rem; }
.story-close { text-align: center; margin-top: clamp(40px, 6vw, 70px); font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.2rem); color: var(--cream); }

/* ---------------------------------------------------------------- faq */
.faq { display: grid; gap: 8px; max-width: 46rem; margin: 0 auto; }
.faq details { border-radius: 14px; background: #fff;  overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 17px 22px; font-weight: 700; font-size: 0.98rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--green); font-size: 1.3rem; transition: transform 0.35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 22px 20px; color: var(--ink-2); max-width: 42rem; font-size: 0.95rem; }

/* ---------------------------------------------------------------- final cta */
.final { text-align: center; }
.final h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); max-width: 14ch; margin: 0 auto 24px; }
.final .actions { justify-content: center; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--green-deep); color: rgba(255, 247, 237, 0.85); font-size: 0.92rem; padding-block: 56px max(30px, env(safe-area-inset-bottom, 0px)); }
.site-footer .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; text-align: center; justify-items: center; }
.site-footer .logo { color: var(--cream); }
.site-footer h4 { margin: 0 0 14px; font-size: 0.95rem; font-weight: 700; color: var(--lime); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { text-decoration: none; opacity: 0.85; }
.site-footer a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .fine { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; width: 100%; padding-top: 28px;  font-size: 0.85rem; opacity: 0.7; }

/* ---------------------------------------------------------------- revenda */
.b2b-hero { background: var(--green-deep); color: var(--cream); overflow: hidden; }
.b2b-hero .display { font-size: clamp(2.2rem, 4.4vw, 4.4rem); }
.b2b-for { margin: 0; font-weight: 600; color: var(--lime); }
.b2b-hero .lead { color: rgba(255, 247, 237, 0.78); }
.b2b-hero .btn-ghost { color: var(--cream); }
.fan { width: 100%; position: relative; height: min(66svh, 560px); display: flex; justify-content: center; align-items: flex-end; }
.fan img { height: 74%; width: auto; max-width: none; margin: 0 -7%;  transform-origin: 50% 100%; transition: transform 0.7s var(--ease); }
.fan img:nth-child(1) { transform: rotate(-12deg) translateY(4%); }
.fan img:nth-child(2) { transform: rotate(-6deg); height: 84%; z-index: 1; }
.fan img:nth-child(3) { height: 96%; z-index: 2; }
.fan img:nth-child(4) { transform: rotate(6deg); height: 84%; z-index: 1; }
.fan img:nth-child(5) { transform: rotate(12deg) translateY(4%); }
.fan:hover img:nth-child(1) { transform: rotate(-17deg) translateY(4%); }
.fan:hover img:nth-child(5) { transform: rotate(17deg) translateY(4%); }
.proof { padding-block: 34px;  }
.proof .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 40px; }
.proof small { font-size: 0.95rem; font-weight: 600; color: var(--ink-2); }
.proof b { overflow-wrap: anywhere; font-family: var(--serif); font-size: clamp(1.02rem, 1.5vw, 1.22rem); color: var(--green); }
.why { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.why article { flex: 0 1 320px; }
.why article { display: grid; gap: 10px; align-content: start; padding: 24px 22px; border-radius: 16px; background: #fff;  min-width: 0; }
.why article:first-child { background: var(--green); color: var(--cream); }
.why article:first-child p { color: rgba(255, 247, 237, 0.8); }
.why p { margin: 0; color: var(--ink-2); font-size: 0.94rem; }
.why .ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--paper-2); color: var(--green); }
.why article:first-child .ic { background: rgba(217, 249, 157, 0.16); color: var(--lime); }
.why .ic svg { width: 24px; height: 24px; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.steps li { list-style: none; display: grid; gap: 12px; text-align: center; justify-items: center; padding-top: 22px; border-top: 2px solid var(--green); min-width: 0; }
.steps li::before { counter-increment: s; content: "0" counter(s); font-family: var(--serif); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--orange); }
.steps p { margin: 0; color: var(--ink-2); font-size: 0.94rem; }
.pairs-title { text-align: center; font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--ink-2); }
.pairs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pairs span { padding: 9px 16px; border-radius: 999px; background: #fff;  font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1rem; }
.lead-box { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.lead-form { display: grid; gap: 14px; padding: clamp(24px, 4vw, 40px); border-radius: 26px; background: rgba(255, 247, 237, 0.06);  }
.lead-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------------------------------------------------------------- legal */
.legal { padding-top: 140px; }
.legal article { max-width: 46rem; margin: 0 auto 60px; scroll-margin-top: 110px; }
.legal p { color: var(--ink-2); }.legal-title { max-width: 46rem; margin: 0 auto 40px; text-align: center; font-size: clamp(1.9rem, 3.6vw, 2.8rem); }

/* ---------------------------------------------------------------- blog */
.blog-index .section-head h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.06; }
.post { padding-top: 130px; padding-bottom: clamp(60px, 9vw, 110px); }
.post article { max-width: 44rem; }
.post article > h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.05; text-align: center; margin: 10px 0 22px; }
.post article > .lead { margin: 0 auto 10px; text-align: center; }
.crumbs { text-align: center; font-weight: 600; font-size: 0.95rem; }
.crumbs a { color: var(--orange); text-decoration: none; }
.post-body { margin-top: 30px; }
.post-body h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 44px 0 14px; }
.post-body p { margin: 0 0 16px; font-size: 1.02rem; line-height: 1.7; color: var(--ink-2); }
.post .actions { justify-content: center; margin-top: 40px; }
.post-more { margin-top: clamp(60px, 9vw, 100px); }
.post-more > h2 { text-align: center; font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 26px; }
.post-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.post-list li { flex: 0 1 360px; }
.post-list a { display: grid; gap: 10px; height: 100%; padding: 28px; border-radius: 16px; background: #fff;  text-decoration: none; color: inherit; text-align: center; border-radius: 16px; }
.post-list h2, .post-list h3 { font-size: 1.3rem; line-height: 1.2; }
.post-list p { margin: 0; color: var(--ink-2); font-size: 0.98rem; }
.post-list span { font-weight: 700; color: var(--orange); }
.readings { margin-top: clamp(70px, 10vw, 120px); }
.reading-list { list-style: none; margin: 0 auto; padding: 0; max-width: 44rem; display: grid; gap: 10px; }
.reading-list a { display: grid; gap: 4px; padding: 20px 24px; border-radius: 18px; background: #fff;  text-decoration: none; color: inherit; text-align: center; }
.reading-list b { font-family: var(--serif); font-size: 1.25rem; }
.reading-list span { font-size: 0.92rem; color: var(--ink-2); }
.ledger-note a, .faq a { color: inherit; font-weight: 700; }

/* ---------------------------------------------------------------- motion */
/* Content is readable even if an observer never fires; animate only when it enters. */
.js-motion [data-reveal] { opacity: 1; transform: none; }
.js-motion [data-reveal].is-in { animation: kombuReveal .6s var(--ease) both; }
@keyframes kombuReveal { from { opacity: .55; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* The hero is the one orchestrated entrance; everything below arrives without choreography. */
.js-motion .hero [data-reveal] { transition-duration: 1s; transition-delay: calc(var(--i, 0) * 120ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .js-motion [data-reveal] { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Keep the audience switch on one line and collapse before the header crowds. */
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .menu-open .nav {
    display: flex; position: fixed; inset: 0; z-index: -1; overscroll-behavior: contain; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px;
    overflow-y: auto; padding: 90px var(--gutter-r) 40px var(--gutter); background: var(--green-deep); color: var(--cream);
  }
  .menu-open .nav > a { font-family: var(--serif); font-size: 2.1rem; opacity: 1; }
  .menu-open .nav .audience a { font-size: clamp(.8125rem, 3.1vw, .95rem); padding: 11px 12px; }
  .menu-open .nav .audience { margin-top: 18px; }
  .menu-open .nav .nav-buy { margin-top: 8px; padding: 12px 26px; background: var(--lime); color: var(--green-deep); font-family: var(--sans); font-size: 1rem; }
  .menu-open { color: var(--cream); }
  .menu-open.site-header.is-solid { background: transparent; color: var(--cream);   }
  .menu-open.site-header.is-solid .audience a.is-selected span { color: var(--green-deep); }
}
/* Phones and small tablets: the same page, composed for a narrow screen rather than stretched.
   Smaller type, compact buttons, and side-by-side columns wherever the content is short enough to
   sit next to each other (owner, 24/10: "everything is very big ... it's just one full column"). */
@media (max-width: 900px) {
  body { font-size: 1rem; }
  h2 { font-size: clamp(1.75rem, 7vw, 2.4rem); }
  h3 { font-size: 1.2rem; }
  .lead { font-size: 1rem; }
  .band { padding-block: 64px; }
  .section-head { gap: 12px; margin-bottom: 30px; }
  .btn { min-height: 46px; padding: 0 20px; font-size: 0.92rem; }

  .hero .wrap, .b2b-hero .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 14px; min-height: 0; padding-top: 84px; padding-bottom: 40px; }
  .hero-copy { gap: 12px; }
  .display { font-size: clamp(1.9rem, 8.4vw, 2.8rem); }
  .b2b-hero .display { font-size: clamp(1.7rem, 7.4vw, 2.5rem); }
  .hero-sub { font-size: 0.98rem; margin-top: 8px; }
  .hero-copy .lead, .b2b-hero .lead { font-size: 0.88rem; line-height: 1.5; }
  .hero-copy .actions { gap: 10px; }
  .hero-copy .actions .btn { min-height: 42px; padding: 0 16px; font-size: 0.86rem; }
  .b2b-for { font-size: 0.86rem; }
  .hero-stage { height: min(58svh, 440px); min-height: 320px; padding-bottom: 30px; }
  .hero-bottle img { height: 88%; }
  .bubbles { display: none; }
  .hero-arrow { width: 32px; height: 32px; top: auto; bottom: 0; transform: none; }
  .hero-arrow svg { width: 15px; height: 15px; }
  .hero-arrow.prev { left: 0; }
  .hero-arrow.next { right: 0; }
  .hero-dots { display: none; }
  .hero-now { bottom: 6px; font-size: 0.74rem; flex-direction: column; gap: 0; line-height: 1.2; text-align: center; }
  .hero-now strong { display: block; font-size: 0.9rem; }
  .fan { height: min(46svh, 360px); min-height: 240px; }
  /* three whole bottles, overlapping by a fixed amount so they stay inside their column */
  .fan img:nth-child(1), .fan img:nth-child(5) { display: none; }
  .fan img { margin: 0 -26px; }
  .fan img:nth-child(2), .fan img:nth-child(4) { height: 74%; }
  .fan img:nth-child(3) { height: 88%; }

  .marquee { padding: 12px 0; }
  .marquee span { font-size: 1.05rem; gap: 30px; padding: 0 15px; }

  /* ingredients: the two lists side by side, as on a label */
  .ledger-col { padding: 20px 10px 18px; }
  .ledger h3 { font-size: 0.86rem; margin-bottom: 10px; }
  .ledger ul { gap: 2px; }
  .ledger li { font-size: 1.05rem; line-height: 1.3; }
  .ledger-note { font-size: 0.95rem; margin-top: 18px; }

  /* ordering: the direct order first; buying a single bottle as a compact row under it */
  .buy { grid-template-columns: 1fr; gap: 12px; }
  .buy article { min-height: 0; gap: 16px; padding: 22px 18px; border-radius: 16px; }
  .buy .big { font-size: 3.2rem; }
  .buy h3 { font-size: 1.5rem; }
  .buy-facts { font-size: 0.94rem; margin-top: 10px; gap: 6px; }
  .buy-unit .big { font-size: 2.4rem; }
  .buy-unit p { font-size: 0.9rem; margin-top: 4px; }
  .buy-partners li { font-size: 0.95rem; }
  .order-form { gap: 10px; margin-top: 4px; }
  .field span { font-size: 0.82rem; }
  .field input, .field select, .field textarea { min-height: 44px; padding: 10px 14px; font-size: 16px; border-radius: 12px; }

  /* flavour walk */
  .walk-intro { padding-block: 64px 24px; }
  .walk-stage .wrap { grid-template-columns: 1fr; grid-template-rows: 44% 1fr; align-items: start; gap: 4px; padding-top: 70px; padding-bottom: 56px; }
  .walk-bottle { order: -1; }
  .walk-bottle img { height: 96%; }
  .walk-copy { justify-items: center; text-align: center; gap: 10px; }
  .walk-name { font-size: clamp(2rem, 9vw, 2.8rem); }
  .walk-angle { font-size: 1.1rem; }
  .walk-desc { display: none; }
  .walk-ing { justify-content: center; }
  .walk-copy .actions { justify-content: center; }
  .walk-copy .btn-ghost { display: none; }
  .walk-step { height: 40svh; }

  /* partners: a row to swipe through instead of a tall stack */
  .filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)) 16px; padding: 2px var(--gutter); }
  .filters::-webkit-scrollbar, .partners::-webkit-scrollbar { display: none; }
  .chip { flex: none; padding: 8px 14px; font-size: 0.84rem; }
  .partners { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; gap: 12px; }
  .partners > * { flex: 0 0 82%; scroll-snap-align: center; }
  .partner { padding: 20px; gap: 10px; border-radius: 18px; }
  .partner h3 { font-size: 1.35rem; }
  .partner dl div { font-size: 0.86rem; }
  .partner .flv dd { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .partner .actions { flex-wrap: nowrap; gap: 8px; }
  .partner .actions .btn { flex: 1; padding: 0 10px; }

  /* story: one row per beat, the year beside its line */
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline article { grid-template-columns: 84px 1fr; align-items: baseline; justify-items: start; text-align: left; gap: 14px; padding: 16px 0; }
  .timeline b { font-size: 1.4rem; }
  .timeline p { font-size: 0.92rem; line-height: 1.5; }

  .faq summary { padding: 16px 18px; font-size: 0.95rem; }
  .faq summary::after { width: 28px; height: 28px; }
  .faq details p { padding: 0 18px 18px; font-size: 0.94rem; }
  .final h2 { font-size: clamp(2rem, 9vw, 2.6rem); margin-bottom: 22px; }

  /* resale */
  .proof { padding-block: 20px; }
  .proof .wrap { gap: 6px 18px; }
  .proof b { font-size: 1.02rem; }
  .why { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .why article { padding: 18px 16px; gap: 8px; border-radius: 18px; }
  .why article:first-child { grid-column: 1 / -1; }
  .why h3 { font-size: 1.08rem; }
  .why p { font-size: 0.86rem; line-height: 1.45; }
  .why .ic { width: 38px; height: 38px; border-radius: 12px; }
  .why .ic svg { width: 19px; height: 19px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 18px 12px; padding: 0; }
  .steps li { padding-top: 14px; gap: 6px; }
  .steps li::before { font-size: 1.8rem; }
  .steps h3 { font-size: 1.05rem; }
  .steps p { font-size: 0.86rem; line-height: 1.45; }
  .pairs span { padding: 8px 14px; font-size: 0.95rem; }
  .lead-box { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .lead-form { padding: 20px 16px; gap: 10px; border-radius: 20px; text-align: left; }

  .site-footer { padding-top: 48px; }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; gap: 26px; }
  .site-footer .wrap > :first-child { grid-column: 1 / -1; }
  .site-footer a { font-size: 0.92rem; }

  .post { padding-top: 100px; }
  .post-list li { flex-basis: 100%; }
  .post-list a { padding: 20px; }
  .post-list h2, .post-list h3 { font-size: 1.3rem; }
  .post-body p { font-size: 1rem; }
}
/* Phone hero (owner, 24/10): side by side, but only the headline sits next to the bottle. The
   supporting line and the two buttons run underneath at full width, all on the same left edge, so
   nothing is squeezed into half a 390px screen. hero-copy dissolves (display: contents) so its
   children can take places in the hero's own grid. */
@media (max-width: 600px) {
  .hero .wrap, .b2b-hero .wrap {
    grid-template-columns: minmax(0, 1fr) 132px;
    grid-template-areas: "title stage" "lead lead" "actions actions";
    column-gap: 16px; row-gap: 0; align-items: center; justify-items: stretch; text-align: left;
    padding-top: 84px; padding-bottom: 36px;
  }
  .b2b-hero .wrap { grid-template-areas: "for stage" "title stage" "lead lead" "actions actions"; }
  .hero-copy { display: contents; }
  .hero h1, .b2b-hero h1 { grid-area: title; align-self: center; }
  .b2b-for { grid-area: for; align-self: end; margin-bottom: 8px; font-size: 1rem; line-height: 1.4; }
  .b2b-hero h1 { align-self: start; }
  .display { font-size: clamp(1.75rem, 8vw, 2.2rem); line-height: 1.05; }
  .b2b-hero .display { font-size: clamp(1.3rem, 6vw, 1.75rem); }
  .b2b-hero .wrap { grid-template-columns: minmax(0, 1fr) 120px; }
  .hero-sub { font-size: 0.92rem; line-height: 1.3; margin-top: 10px; }
  .hero-copy .lead, .b2b-hero .lead { grid-area: lead; max-width: none; margin: 20px 0 0; font-size: 0.92rem; line-height: 1.55; }
  .hero-copy .actions { grid-area: actions; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: none; margin-top: 20px; }
  .hero-copy .actions .btn { width: 100%; min-height: 44px; padding: 0 10px; font-size: 0.88rem; }

  .hero-stage { grid-area: stage; width: 132px; height: 250px; min-height: 0; padding-bottom: 26px; justify-self: end; }
  .hero-bottle img { height: 100%; }
  .bubbles { display: none; }
  .hero-arrow { width: 30px; height: 30px; top: 42%; bottom: auto; transform: translateY(-50%); background: rgba(27, 47, 24, 0.55); }
  .hero-arrow svg { width: 14px; height: 14px; }
  .hero-arrow.prev { left: -6px; }
  .hero-arrow.next { right: -6px; }
  .hero-now { bottom: 0; width: 100%; font-size: 0.7rem; flex-direction: column; gap: 0; line-height: 1.25; white-space: normal; }
  .hero-now strong { font-size: 0.8rem; }

  /* resale: three whole bottles that fit the column instead of a clipped fan */
  .fan { grid-area: stage; width: 120px; height: 190px; min-height: 0; overflow: visible; justify-self: end; align-items: flex-end; }
  .fan img:nth-child(2), .fan img:nth-child(4) { height: 74%; margin: 0 -13px; }
  .fan img:nth-child(2) { transform: rotate(-4deg); }
  .fan img:nth-child(4) { transform: rotate(4deg); }
  .fan img:nth-child(3) { height: 100%; margin: 0; }
}
@media (max-width: 560px) {
  .logo b { font-size: 1.25rem; }
  .logo span { display: none; }
  .site-header .bar { height: 64px; }
  .menu-btn { width: 42px; height: 42px; }
  .walk-rail { gap: 6px; bottom: 18px; }
  .walk-rail button { width: 11px; height: 11px; }
  .walk-ing li { font-size: 0.78rem; padding: 6px 11px; }
}

/* Partner and creator invitations reuse Kombú's existing colour and type system. */
.partnership-invite { display:flex; align-items:center; justify-content:space-between; gap:36px; }
.partnership-invite > div { max-width:720px; }
.partnership-invite .btn { flex-shrink:0; }
.form-note, .order-form small { font-size:.85rem; line-height:1.6; }
.tasting-intro { padding-top: 124px; padding-bottom: 56px; }
.tasting-intro .section-head { margin-bottom: 32px; }
.tasting-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tasting-kit { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 12px 16px 20px; border: 2px solid transparent; border-radius: 16px; background: #fff; color: var(--green-deep); transition: border-color .2s, box-shadow .2s; }
.kit-visual { display: flex; justify-content: center; align-items: flex-end; width: 100%; height: 168px; padding: 12px 0; margin-bottom: 4px; border-radius: 10px; background: #f4f5ef; }
.kit-visual img { display: block; flex: 0 0 auto; width: 48px; height: 144px; object-fit: contain;  }
.kit-visual img + img { margin-left: -16px; }
.tasting-kit:has(.is-selected) { border-color: var(--green-deep);  background: var(--paper-2); }
.tasting-kit h2 { display: grid; gap: 4px; margin: 0; }
.tasting-kit h2 strong { font: 700 2.4rem/1 var(--serif); }
.tasting-kit h2 span { font: 500 .85rem/1.4 var(--sans); }
.tasting-kit .kit-flavors { margin: 0; font-size: .85rem; color: var(--ink-2); }
.kit-price { display: grid; gap: 4px; margin: 6px 0; }
.kit-price strong { font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
.kit-price span { font-size: .75rem; color: var(--ink-2); }
.tasting-kit .btn { width: 100%; min-height: 42px; padding: 10px 12px; font-size: .8rem; }
.tasting-note { text-align: center; margin: 20px 0 0; color: var(--ink-2); }
.tasting-footer .wrap { display:flex; flex-wrap:wrap; align-items:center; gap:32px; }
.tasting-footer nav { display:flex; flex-wrap:wrap; gap:20px; }
@media (max-width: 1000px) {
  .tasting-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tasting-custom { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 24px; padding: 16px; }
  .tasting-custom .btn { width: auto; }
  .tasting-custom .kit-visual { width: 130px; height: 118px; margin: 0; }
  .tasting-custom .kit-visual img { width: 32px; height: 96px; }
  .tasting-custom .kit-visual img + img { margin-left: -10px; }
  .tasting-custom h2 { display: flex; align-items: baseline; gap: 8px; }
  .tasting-custom h2 strong { font-size: 2rem; }
}
@media (max-width: 600px) {
  .tasting-intro { padding-top: 100px; padding-bottom: 36px; }
  .tasting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tasting-kit { padding: 10px 10px 16px; gap: 10px; }
  .kit-visual { height: 120px; padding: 12px 0; }
  .kit-visual img { width: 32px; height: 96px; }
  .kit-visual img + img { margin-left: -10px; }
  .tasting-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .tasting-custom .kit-visual { grid-column: 1; grid-row: 1 / 4; width: 100%; }
  .tasting-custom h2 { grid-column: 2; grid-row: 1; }
  .tasting-custom .kit-flavors { grid-column: 2; grid-row: 2; }
  .tasting-custom .kit-price { grid-column: 2; grid-row: 3; }
  .tasting-custom .btn { grid-column: 1 / -1; width: 100%; }
  .tasting-custom h2 { gap: 5px; }
}
@media(max-width:760px) { .partnership-invite { flex-direction:column; align-items:flex-start; } }

.kit-summary { padding:18px; border:0; border-radius:12px; }
.kit-summary p { margin:4px 0; }
#couponStatus[data-state="error"] { color:#9C271D; }

@media (min-width: 1101px) and (max-width: 1300px) { .site-header .logo span { display: none; } }

#stockSelection { border: 0; border-radius: 16px; padding: 20px; margin: 0; min-width: 0; }
#stockSelection legend { padding: 0 8px; font-weight: 600; }
#stockProducts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
#stockStatus { margin: 0 0 16px; }

.buy h2 { font-size: clamp(1.6rem, 2.5vw, 2rem); margin: 0; }
.buy h2 small { display: block; font: 500 0.9rem var(--sans); margin-top: 8px; opacity: .7; }
.buy-kit-options { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.buy-kit-options a { display: inline-flex; align-items: baseline; gap: 10px; font-weight: 600; text-decoration: none; }
.buy-kit-options a:hover { text-decoration: underline; text-underline-offset: 4px; }
.buy-kit-options small { font-size: .82em; font-weight: 400; opacity: .65; }
.buy .btn { align-self: end; }

/* Design review: the real bottles lead, while the approved audience switch remains. */
.hero .display { font-size: clamp(3.2rem, 6.1vw, 5.5rem); }
.hero-copy { gap: 22px; }
.hero-secondary { align-self: center; padding: 12px 4px; font-weight: 600; text-underline-offset: 5px; }
.hero-copy .lead { font-size: 1.125rem; line-height: 1.6; margin: 0; max-width: 34rem; color: var(--cream); }
.hero-pause { position: absolute; top: 0; right: 0; z-index: 3; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 999px; background: rgba(255,247,237,.12); color: var(--cream); cursor: pointer; font: 600 .9rem var(--sans); }
.hero-pause:hover { background: rgba(255,247,237,.2); }
.hero-dots { gap: 2px; }
.hero-dots button, .hero-dots button[aria-pressed="true"] { position: relative; width: 24px; height: 28px; background: transparent; }
.hero-dots button::after { content: ""; position: absolute; top: 10px; left: 8px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,247,237,.4); }
.hero-dots button[aria-pressed="true"]::after { background: var(--lime); }
.hero-now { flex-direction: column; gap: 2px; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.hero-arrow { width: 44px; height: 44px; }
.ledger h3, .field span, .field small { font-size: 1rem; }
.why p, .steps p, .timeline p, .faq details p, .partner dl, .post p, .hero-copy .lead { font-size: 1rem; }
.form-note, .order-form small, .kit-price span, .tasting-kit .kit-flavors, .tasting-kit h2 span, .site-footer .fine { font-size: .875rem; }
#stockStatus { font-size: 1rem; }
.checkout-section { background: var(--paper-2); }
.checkout-form.lead-form { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); align-items: start; gap: 48px; padding: 0; border-radius: 0;  background: transparent; }
.checkout-main { min-width: 0; display: grid; gap: 32px; }
.checkout-group, #stockSelection.checkout-group { min-width: 0; display: grid; gap: 16px; padding: 0; border: 0; border-radius: 0; margin: 0; }
.checkout-group legend { font: 700 1.65rem/1.2 var(--serif); color: var(--green-deep); padding: 0 0 20px; }
.checkout-group .field { margin: 0; }
.checkout-group .field span { font-size: 1rem; }
.checkout-group .row { gap: 16px; }
.checkout-group small, .checkout-summary .form-note { font-size: .875rem; line-height: 1.6; }
.checkout-summary { position: sticky; top: 90px; display: grid; gap: 20px; padding: 28px; border-radius: 16px; background: #fff; min-width: 0; }
.checkout-summary h3 { font-size: 1.65rem; }
.checkout-summary .kit-summary { padding: 0; background: transparent; border: 0; }
.checkout-summary .kit-summary p { font-size: 1rem; line-height: 1.65; }
.checkout-summary .btn { width: 100%; padding: 14px 16px; line-height: 1.5; min-height: 48px; }
.checkout-resale { color: var(--green-deep); font-weight: 600; text-underline-offset: 4px; }
#stockProducts { display: grid; grid-template-columns: 1fr; gap: 10px; }
#stockProducts .stock-option { display: grid; grid-template-columns: minmax(0, 1fr) 88px; align-items: center; gap: 16px; background: #fff; padding: 12px 16px; border-radius: 12px; }
#stockProducts .stock-option span { font-size: 1rem; overflow-wrap: anywhere; }
#stockProducts .stock-option input { text-align: center; padding-inline: 8px; }
.stock-action { justify-self: start; }
.tasting-kit .btn { min-height: 46px; font-size: .875rem; }
.tasting-intro .display { font-size: clamp(2.5rem, 5.2vw, 4.5rem); }
@media (max-width: 1000px) { .checkout-form.lead-form { gap: 28px; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); } }
@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: 1fr; padding-top: 96px; padding-bottom: 30px; gap: 18px; }
  .hero-copy { max-width: none; gap: 16px; }
  .hero .display { font-size: clamp(2.6rem, 12vw, 3.7rem); }
  .hero-sub { font-size: 1.125rem; max-width: 28ch; }
  .hero-copy .lead { font-size: 1rem; line-height: 1.55; }
  .hero-stage { height: 300px; min-height: 0; padding-bottom: 38px; }
  .hero-bottle img { height: 92%; }
  .hero-arrow { width: 44px; height: 44px; }
  .hero-arrow.prev { left: calc(50% - 116px); }
  .hero-arrow.next { right: calc(50% - 116px); }
  .hero-now { max-width: 138px; bottom: 9px; }
  .hero-now strong { font-size: .95rem; }
  .hero-pause { top: 8px; right: 8px; }
  .checkout-form.lead-form { grid-template-columns: 1fr; gap: 32px; }
  .checkout-summary { position: static; padding: 24px; }
  .checkout-group legend { font-size: 1.5rem; }
  .checkout-group .field span { font-size: 1rem; }
}

/* Reset the old dissolved phone grid before composing the mobile hero. */
@media (max-width: 760px) {
  .hero .wrap { grid-template-areas: none; grid-template-columns: minmax(0, 1fr); }
  .hero-copy { display: grid; grid-area: auto; width: 100%; min-width: 0; }
  .hero h1, .hero-copy .lead, .hero-copy .actions { grid-area: auto; }
  .hero-copy .lead { max-width: 100%; margin: 0; }
  .hero-copy .actions { display: flex; flex-wrap: wrap; margin: 0; width: 100%; }
  .hero-copy .actions .btn { width: auto; min-height: 46px; padding: 0 20px; font-size: 1rem; }
  .hero-stage { grid-area: auto; width: 100%; justify-self: center; height: 300px; padding-bottom: 42px; }
  .hero-arrow { top: auto; bottom: 0; transform: none; }
  .hero-now { width: auto; bottom: 8px; }
}
/* Partner addresses must wrap in the page, rather than being clipped off a horizontal rail. */
@media (max-width: 900px) {
  .filters { flex-wrap: wrap; overflow: visible; margin: 0 0 24px; padding: 0; justify-content: center; }
  .partners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: 16px; }
  .partners > * { width: 100%; min-width: 0; }
  .partners > :last-child:nth-child(odd) { grid-column: 1 / -1; width: min(100%, 360px); justify-self: center; }
}
@media (max-width: 600px) { .partners { grid-template-columns: 1fr; } .partners > :last-child:nth-child(odd) { width: 100%; } }
.partner .flv details { font-size: 1rem; }
.partner .flv summary { cursor: pointer; font-weight: 600; color: var(--green-deep); padding-block: 4px; }
.partner .flv p { margin: 8px 0 0; }
.partner .kind { color: var(--green-2); }
.partner .actions .btn { min-height: 44px; }
.audience a.is-selected { background: var(--cream); color: var(--green-deep); }
.site-header.is-solid .audience a.is-selected { background: var(--green-deep); color: var(--cream); }
.hero-arrow {  border: 1.5px solid rgba(255,247,237,.35); }
.ledger-col, .ledger-note { border: 0; }

/* Readable type is shared by the shopping options and the order sheet. */
.tasting-intro .lead { max-width: 40rem; }
.form-note, .order-form small, .kit-price span, .tasting-kit .kit-flavors, .tasting-kit h2 span, .checkout-group small, .checkout-summary .form-note { font-size: 1rem; }
.tasting-kit .btn { font-size: 1rem; }


/* Keep flavor chips legible and dot targets usable on phones. */
.hero-now { font-size: .875rem; }
.walk-ing li { font-size: .875rem; }
@media (max-width:560px) { .walk-rail { gap: 2px; } .walk-rail button { width: 26px; height: 44px; } }

.motion-paused [data-reveal] { animation: none !important; opacity: 1; transform: none; }

.opt { position: relative; display: grid; justify-items: center; gap: 14px; padding: 26px 18px 24px; border: 0; border-radius: 22px; cursor: pointer; text-decoration: none; text-align: center; font: inherit; background: var(--lime); color: var(--green-deep); transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); min-width: 0; }
.opt:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -24px rgba(27, 47, 24, 0.6); }
.opt-dark { background: var(--green-deep); color: var(--cream); }
.opt img { height: 150px; width: auto; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.25)); transition: transform 0.6s var(--ease); }
.opt:hover img { transform: translateY(-6px) rotate(-3deg); }
.trio { display: flex; align-items: flex-end; height: 150px; }
.trio img { height: 128px; width: auto; margin: 0 -3px; }
.trio img:nth-child(2) { height: 150px; position: relative; z-index: 1; }
.opt b { display: block; font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.15; }
.opt small { display: block; margin-top: 6px; font-size: 0.92rem; opacity: 0.8; }
@media (max-width: 560px) {
  .opt { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; padding: 16px 18px; }
  .opt img { height: 96px; }
  .trio { height: 96px; }
  .trio img { height: 78px; margin: 0 -2px; }
  .trio img:nth-child(2) { height: 96px; }
}




/* The reseller introduction needs its own mobile rows, outside the old dissolved grid. */
@media (max-width: 760px) {
  .b2b-hero .wrap { grid-template-areas: none; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 96px; padding-bottom: 36px; }
  .b2b-hero .hero-copy { display: grid; grid-template-areas: none; gap: 18px; max-width: none; }
  .b2b-hero h1, .b2b-for, .b2b-hero .lead, .b2b-hero .actions { grid-area: auto; margin: 0; }
  .b2b-for { align-self: auto; font-size: 1rem; line-height: 1.5; max-width: 34ch; }
  .b2b-hero .display { font-size: clamp(1.9rem, 8.4vw, 2.5rem); line-height: 1.1; }
  .b2b-hero .lead { font-size: 1rem; line-height: 1.6; max-width: 38rem; }
  .b2b-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .b2b-hero .actions .btn { width: auto; min-height: 46px; padding: 0 20px; font-size: 1rem; }
  .b2b-hero .fan { grid-area: auto; justify-self: center; width: 100%; height: 240px; min-height: 0; }
  .b2b-hero .fan img:nth-child(2), .b2b-hero .fan img:nth-child(4) { margin: 0 -18px; height: 84%; }
  .b2b-hero .fan img:nth-child(3) { margin: 0; height: 100%; }
}
@media (max-width: 1100px) {
  /* Short landscape windows must scroll from the first link, below the header. */
  .menu-open .nav { justify-content: safe center; }
}

/* A separate welcome document, before either audience's landing page. */
.entry-page { background: var(--paper); color: var(--green-deep); }
.entry-screen { min-height: 100svh; padding: max(28px, env(safe-area-inset-top)) var(--gutter) max(28px, env(safe-area-inset-bottom)); display: grid; grid-template-rows: auto 1fr; gap: 32px; }
.entry-brand { display: grid; justify-items: center; gap: 6px; }
.entry-brand b { font: 700 2rem/1.2 var(--serif); letter-spacing: .22em; padding-left: .22em; }
.entry-brand span { font: italic 600 1.1rem/1.4 var(--serif); }
.entry-content { align-self: center; justify-self: center; width: min(100%, 880px); display: grid; justify-items: center; gap: 28px; padding-bottom: 24px; }
.entry-content h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.15; text-align: center; }
.entry-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: 100%; }
.entry-options .opt { padding: 32px 24px; min-height: 320px; align-content: center; }
.entry-options .opt img, .entry-options .trio { height: 170px; }
.entry-options .trio img { height: 145px; }
.entry-options .trio img:nth-child(2) { height: 170px; }
.entry-options .opt b { font-size: clamp(1.4rem, 2.5vw, 1.8rem); }
.entry-note { margin: 0; font-size: 1rem; line-height: 1.6; text-align: center; color: var(--ink-2); }
@media (max-width: 560px) {
  .entry-screen { gap: 28px; }
  .entry-content { gap: 24px; padding-bottom: 0; }
  .entry-options { grid-template-columns: 1fr; gap: 14px; }
  .entry-options .opt { min-height: 140px; padding: 22px 18px; gap: 16px; }
  .entry-options .opt img, .entry-options .trio { height: 106px; }
  .entry-options .trio img { height: 90px; }
  .entry-options .trio img:nth-child(2) { height: 106px; }
  .entry-options .opt b { font-size: 1.4rem; }
}

/* Scroll Craft refinement: independent depth, native scroll, anchored controls. */
.hero-product { position: absolute; inset: 0 0 34px; translate: 0 calc(var(--hero-depth, 0px) * -.75); transform: perspective(900px) rotateY(var(--pointer-x, 0deg)) rotateX(var(--pointer-y, 0deg)); transition: transform .5s var(--ease); }
.walk-bottle { translate: 0 var(--walk-depth, 0px); }
.walk-stage { transition: background .45s var(--ease); }
.walk-stage.walk-cut { transition: none; }
@media (max-width: 760px) {
  .hero-product { bottom: 42px; }
}
.motion-paused .hero-product, .motion-paused .walk-bottle { translate: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-product, .walk-bottle { translate: none; transform: none; }
}