/* ==========================================================================
   DWEET FRESH — island natural design system
   Shell #F5F0E4 · Linen #ECE5D3 · Palm #1E3B2E · Forest #12261F
   Ink #23211B · Amber Oil #B9822E
   Type: Cormorant Garamond (display) · Albert Sans (body) · IBM Plex Mono (lab)
   ========================================================================== */

:root {

  /* type scale — 11 steps, anchored on the 17px body.
     Display sizes stay on clamp() and are deliberately off-scale. */
  --fs-3xs: 0.7rem;         /* 11.2px */
  --fs-2xs: 0.75rem;        /* 12px */
  --fs-xs: 0.8rem;          /* 12.8px */
  --fs-sm: 0.875rem;        /* 14px */
  --fs-md: 0.95rem;         /* 15.2px */
  --fs-base: 1.0625rem;     /* 17px */
  --fs-lg: 1.15rem;         /* 18.4px */
  --fs-xl: 1.3rem;          /* 20.8px */
  --fs-2xl: 1.6rem;         /* 25.6px */
  --fs-3xl: 1.8rem;         /* 28.8px */
  --fs-4xl: 2.3rem;         /* 36.8px */

  --shell: #f5f0e4;
  --linen: #ece5d3;
  --linen-deep: #e2d9c2;
  --palm: #1e3b2e;
  --forest: #12261f;
  --forest-edge: #1a332a;
  --fern: #4d6a57;
  --ink: #23211b;
  --ink-soft: #4d4a40;
  --amber: #b9822e;
  --amber-deep: #7d5518;
  --amber-light: #d9a94f;
  --cream-on-dark: #efe9d8;
  --cream-dim: #c9c2ad;

  --font-display: "Cormorant Garamond", "Georgia", serif;
  --font-body: "Albert Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;

  --measure: 62ch;
  --radius: 6px;
  --pad-x: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4rem, 10vw, 8rem);
}

/* ---------- base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

[id] { scroll-margin-top: 5rem; }

body {
  margin: 0;
  background: var(--shell);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

[hidden] { display: none !important; }

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--shell);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  transform: translateY(-4.5rem);
  transition: transform 200ms ease;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- shared text pieces ---------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin: 0 0 1.25rem;
}
.eyebrow-light { color: var(--amber-light); }

.section-title {
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.section-title em { font-style: italic; font-weight: 500; }

.section { padding: var(--section-y) var(--pad-x); }

.section-inner {
  max-width: 72rem;
  margin: 0 auto;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.btn:active { transform: scale(0.98); }

.btn-solid {
  background: var(--palm);
  color: var(--cream-on-dark);
}
.btn-solid:hover {
  background: var(--forest);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(18, 38, 31, 0.18);
}

.btn-ghost {
  background: transparent;
  color: var(--palm);
  border-color: rgba(30, 59, 46, 0.45);
}
.btn-ghost:hover { border-color: var(--palm); background: rgba(30, 59, 46, 0.06); }

/* makes the single primary action unmistakably the biggest thing */
.btn-lg { min-height: 54px; padding: 0.95rem 2.2rem; font-size: var(--fs-base); }

.btn-solid-light {
  background: var(--amber);
  color: #1c1408;
}
.btn-solid-light:hover { background: var(--amber-light); }

.btn-ghost-light {
  color: var(--cream-on-dark);
  border-color: rgba(239, 233, 216, 0.4);
}
.btn-ghost-light:hover { border-color: var(--cream-on-dark); background: rgba(239, 233, 216, 0.08); }

/* ---------- header / nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 240, 228, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linen-deep);
}

/* thin amber line under the nav tracks progress through the journey */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--amber);
  z-index: 60;
}

.nav {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0.85rem var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.brand-mark {
  height: 42px;
  width: auto;
}

.brand-word {
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.brand-word em { font-style: normal; font-weight: 500; color: var(--palm); }

.nav-links {
  display: flex;
  gap: 1.9rem;
}
.nav-links a {
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--ink-soft);
  padding: 0.5rem 0;
  transition: color 180ms ease;
}
.nav-cta { white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.is-current { color: var(--ink); }
.nav-links a.is-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1rem;
  height: 2px;
  background: var(--amber);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2.2rem;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.75rem;
  background: none;
  border: 1px solid var(--linen-deep);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav-toggle-bar {
  position: relative;
  flex-shrink: 0; /* at 320px the flex row squeezed the icon into the label */
  width: 18px;
  height: 2px;
  background: var(--ink);
}
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--ink);
}
.nav-toggle-bar::before { top: -6px; }
.nav-toggle-bar::after { top: 6px; }

/* ---------- hero ---------- */

.hero { overflow: hidden; }

/* editorial split: copy column against a full-bleed photograph on the right */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(var(--pad-x), 1fr) minmax(0, 38rem) minmax(0, 46%);
  align-items: center;
}

.hero-copy {
  grid-column: 2;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 5rem) clamp(3rem, 7vw, 5.5rem) 0;
}

/* page-load choreography: copy rises line by line, then the art settles in */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.hero-copy > * { animation: rise-in 700ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.hero-copy > :nth-child(1) { animation-delay: 100ms; }
.hero-copy > :nth-child(2) { animation-delay: 240ms; }
.hero-copy > :nth-child(3) { animation-delay: 380ms; }
.hero-copy > :nth-child(4) { animation-delay: 520ms; }
.hero-copy > :nth-child(5) { animation-delay: 680ms; }
.hero-copy > :nth-child(6) { animation-delay: 820ms; }
.hero-art { animation: rise-in 900ms cubic-bezier(0.2, 0.7, 0.3, 1) 640ms both; }

/* scroll invitation: a drop keeps falling down the line */
.hero-scroll {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 180ms ease;
}
.hero-scroll:hover { color: var(--ink); }
.hero-scroll-line {
  position: relative;
  width: 1px;
  height: 46px;
  background: rgba(35, 33, 27, 0.3);
  overflow: hidden;
}
.hero-scroll-line::after {
  content: "";
  position: absolute;
  left: -1.5px;
  top: -10px;
  width: 4px;
  height: 10px;
  border-radius: 2px;
  background: var(--amber);
  animation: cue-fall 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes cue-fall {
  0% { transform: translateY(0); opacity: 0; }
  18% { opacity: 1; }
  75% { transform: translateY(52px); opacity: 1; }
  100% { transform: translateY(58px); opacity: 0; }
}

.hero-title {
  font-size: clamp(2.9rem, 7vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin-bottom: 1.6rem;
}
.hero-title-accent { font-style: italic; font-weight: 500; color: var(--palm); }

.hero-lede {
  max-width: 34rem;
  font-size: var(--fs-lg);
  color: var(--ink-soft);
  margin-bottom: 2.2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.4rem;
  margin-bottom: 1.3rem;
}

/* secondary route, deliberately quieter so there is one obvious action */
.hero-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--palm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-md);
  text-decoration: underline;
  text-decoration-color: rgba(30, 59, 46, 0.35);
  text-underline-offset: 4px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}
.hero-secondary:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* the "proof" leg of the hero — honest process facts, not testimonials */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
  margin: 0 0 2.2rem;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-trust span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
}

.hero-art {
  grid-column: 3;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  background: var(--linen);
}

/* absolutely positioned so the copy column sets the hero's height
   and the photo crops itself to match */
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  /* a very slow drift keeps the photo alive without drawing attention */
  animation: photo-drift 24s ease-in-out infinite alternate;
}
@keyframes photo-drift {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

/* ---------- ticker ---------- */

.ticker {
  border-top: 1px solid var(--linen-deep);
  border-bottom: 1px solid var(--linen-deep);
  background: var(--linen);
  overflow: hidden;
  padding: 0.8rem 0;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-roll 42s linear infinite;
}
.ticker-list {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.ticker-list li {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  padding: 0 1.1rem;
}
.ticker-list li::after {
  content: "·";
  color: var(--amber);
  margin-left: 2.2rem;
}
@keyframes ticker-roll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker:hover .ticker-track { animation-play-state: paused; }

/* ---------- story ---------- */

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.story-body p { max-width: var(--measure); font-size: var(--fs-lg); color: var(--ink-soft); }
.story-body strong { color: var(--ink); }

/* the plain-language company description — sits under the section title, set a
   step down from the narrative body so it reads as orientation, not as story */
.story-lede {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  padding-top: clamp(1.2rem, 2.5vw, 1.8rem);
  border-top: 1px solid var(--linen-deep);
  max-width: 34rem;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ---------- craft ---------- */

.craft { background: var(--linen); }

.craft-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 40rem; }

.craft-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  counter-reset: craft;
}
.craft-step {
  position: relative;
  padding-top: 1.4rem;
}
/* the rule above each step draws itself in as the step appears */
.craft-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 800ms cubic-bezier(0.2, 0.7, 0.3, 1) 200ms;
}
.craft-step.is-in::before { transform: scaleX(1); }
.craft-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  color: var(--amber-deep);
}
.craft-step h3 {
  font-size: var(--fs-3xl);
  margin: 0.8rem 0 0.7rem;
}
.craft-step p { color: var(--ink-soft); margin: 0; }

.craft-cta {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  color: var(--ink-soft);
}
.craft-cta a {
  color: var(--ink);
  text-decoration-color: var(--amber);
  text-underline-offset: 4px;
  transition: color 180ms ease;
}
.craft-cta a:hover { color: var(--amber-deep); }

.craft-art {
  margin: 1.1rem 0 1.3rem;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--linen-deep);
}
.craft-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms ease;
}
/* no hover transform: .craft-step is a non-interactive <li> in an <ol>, so a
   hover response there is decoration signalling an affordance that isn't real */

/* ---------- interlude: full-bleed island band ---------- */

.interlude {
  position: relative;
  height: clamp(280px, 44vw, 460px);
  overflow: hidden;
  background: var(--forest);
}
.interlude-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.interlude-line {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 var(--pad-x);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 4.5vw, 2.9rem);
  color: var(--cream-on-dark);
  text-shadow: 0 1px 22px rgba(18, 38, 31, 0.85), 0 0 60px rgba(18, 38, 31, 0.55);
}

/* ---------- blends ---------- */

.blends-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.blend-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: stretch;
}

.blend-card {
  display: flex;
  flex-direction: column;
  background: #fbf8ef;
  border: 1px solid var(--linen-deep);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
}
/* once revealed, cards answer the cursor with a slow, quiet lift */
.blend-card.is-in {
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.blend-card.is-in:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(35, 33, 27, 0.09);
}
.blend-card-feature {
  background: var(--palm);
  color: var(--cream-on-dark);
  border-color: var(--palm);
}

.blend-flag {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber-light);
  margin-bottom: 0.9rem;
}

.blend-name { font-size: var(--fs-2xl); line-height: 1.15; }

.blend-price {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 700;
  margin: 0.4rem 0 0.9rem;
  color: var(--amber-deep);
}
.blend-card-feature .blend-price { color: var(--amber-light); }
.blend-price span { font-size: var(--fs-xl); }

/* "From" label. Higher specificity than `.blend-price span` above, which sizes
   the trailing "+" — without the two-class selector this inherits --fs-xl. */
.blend-price .blend-price-from {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.15rem;
}
.blend-card-feature .blend-price .blend-price-from { color: var(--cream-dim); }

.blend-desc { min-height: 3.2em; }
.blend-card .blend-desc { color: var(--ink-soft); }
.blend-card-feature .blend-desc { color: var(--cream-dim); }

.blend-list {
  margin: 0.4rem 0 1.8rem;
  flex-grow: 1;
}
.blend-list li {
  position: relative;
  padding: 0.34rem 0 0.34rem 1.3rem;
  font-size: var(--fs-md);
}
.blend-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
}
.blend-card-feature .blend-list li::before { background: var(--amber-light); }

.blend-cta { width: 100%; }

/* currency, stated directly under the cards. It was previously only in the
   add-ons note at the foot of the section — too far from a J$6,000 figure */
.blends-currency {
  margin: clamp(1.1rem, 2.4vw, 1.6rem) 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-deep);
}

/* ---------- add-ons ---------- */

/* risk-reversal, placed right under the prices where the doubt lives */
.blends-assurance {
  max-width: 40rem;
  margin: clamp(1.6rem, 3vw, 2.4rem) auto 0;
  text-align: center;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink-soft);
}
.blends-assurance strong { color: var(--ink); }
/* the practical terms, one quieter step below the reassurance */
.blends-assurance + .blends-terms {
  margin-top: 0.75rem;
  font-size: var(--fs-sm);
}

.addons {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--linen-deep);
  padding-top: 2.2rem;
}
.addons-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin-bottom: 1.2rem;
}
.addons-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2.4rem;
}
.addons-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 500;
}
.addons-list svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--palm);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.addons-note {
  margin: 1.3rem 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

/* ---------- from the bench ---------- */

.bench {
  background: var(--linen);
  padding-left: 0;
  padding-right: 0;
}

.bench-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 var(--pad-x);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.bench-head { max-width: 40rem; }
.bench-lede { color: var(--ink-soft); font-size: var(--fs-base); margin: 1rem 0 0; }

/* interactive selector — vanilla port of the shadcn "interactive-selector"
   React component. A row of image panels; the active one grows (flex-grow 7)
   and reveals its label while the rest collapse to an icon strip. main.js
   toggles .is-active; a staggered entrance runs when the row scrolls in. */
.selector {
  display: flex;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  box-sizing: border-box;
  height: min(64vh, 460px);
  overflow: hidden;
}

.selector-option {
  position: relative;
  flex: 1 1 0%;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background-color: var(--forest);
  background-size: auto 120%;
  background-position: center;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  outline: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateX(-60px);
  transition: flex-grow 0.7s ease, background-size 0.7s ease,
              box-shadow 0.7s ease, border-color 0.7s ease;
}
.selector-option + .selector-option { margin-left: 0.6rem; }
.selector-option:focus-visible { border-color: var(--amber-light); }

.selector-option.is-active {
  flex-grow: 7;
  background-size: auto 100%;
  border-color: var(--amber);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

/* staggered slide-in once the row scrolls into view */
.selector.is-in .selector-option { animation: selector-in 0.6s ease forwards; }
.selector.is-in .selector-option:nth-child(1) { animation-delay: 0s; }
.selector.is-in .selector-option:nth-child(2) { animation-delay: 0.11s; }
.selector.is-in .selector-option:nth-child(3) { animation-delay: 0.22s; }
.selector.is-in .selector-option:nth-child(4) { animation-delay: 0.33s; }
.selector.is-in .selector-option:nth-child(5) { animation-delay: 0.44s; }
.selector.is-in .selector-option:nth-child(6) { animation-delay: 0.55s; }
.selector.is-in .selector-option:nth-child(7) { animation-delay: 0.66s; }
.selector.is-in .selector-option:nth-child(8) { animation-delay: 0.77s; }
.selector.is-in .selector-option:nth-child(9) { animation-delay: 0.88s; }
@keyframes selector-in {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes selector-in-y {
  from { opacity: 0; transform: translateY(-28px); }
  to { opacity: 1; transform: translateY(0); }
}

.selector-shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
  opacity: 0.8;
  transition: opacity 0.7s ease;
}
.selector-option.is-active .selector-shade { opacity: 1; }

.selector-label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0 0.6rem 1.1rem;
  pointer-events: none; /* clicks fall through to the panel to expand it */
}
.selector-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(18, 38, 31, 0.72);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.22);
}
.selector-info {
  min-width: 0;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.selector-option.is-active .selector-info { opacity: 1; transform: translateX(0); }
.selector-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
.selector-sub {
  margin: 0.1rem 0 0;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.82);
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.selector-cta {
  position: relative;
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-light);
  text-decoration: none;
  border-bottom: 1px solid var(--amber-light);
  padding-bottom: 2px;
  pointer-events: auto; /* the CTA itself IS clickable */
}
/* The text box is 21px tall — under WCAG 2.2 AA's 24px minimum target. Padding
   would push the underline off the text, so the hit area is extended instead:
   no visual change, ~37px tall to the thumb. The CTA only shows on the panel
   that is already open, so the wider target cannot steal an expand tap. */
.selector-cta::after {
  content: "";
  position: absolute;
  inset: -8px -6px;
}
.selector-cta:hover { color: #fff; border-color: #fff; }

/* ---------- the scent lab ---------- */

.lab {
  background: var(--forest);
  color: var(--cream-on-dark);
}

.lab-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.lab-lede { color: var(--cream-dim); font-size: var(--fs-lg); }
.lab-meta {
  margin: 1.1rem 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--amber-light);
}

.lab-bench {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* --- form panel --- */

.lab-form {
  background: var(--forest-edge);
  border: 1px solid rgba(239, 233, 216, 0.12);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.4rem);
}

.lab-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.8rem;
}
.lab-progress-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-light);
  white-space: nowrap;
}
.lab-progress-bar {
  flex-grow: 1;
  height: 3px;
  background: rgba(239, 233, 216, 0.15);
  border-radius: 2px;
  overflow: hidden;
}
.lab-progress-fill {
  display: block;
  height: 100%;
  width: 16%;
  background: var(--amber);
  transition: width 400ms ease;
}

.lab-stage { display: none; }
.lab-stage.is-active { display: block; animation: stage-in 350ms ease both; }
@keyframes stage-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.stage-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.stage-note {
  font-size: var(--fs-md);
  color: var(--cream-dim);
  margin-bottom: 1.6rem;
}

.lab-q { margin-bottom: 1.8rem; }
.lab-q:last-child { margin-bottom: 0.6rem; }

.lab-q-label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-base);
  margin-bottom: 0.3rem;
}
.lab-q-hint {
  font-size: var(--fs-sm);
  color: var(--cream-dim);
  margin: 0 0 0.7rem;
}
.lab-req { color: var(--amber-light); }

.lab-input,
.lab-textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  background: rgba(18, 38, 31, 0.6);
  border: 1px solid rgba(239, 233, 216, 0.25);
  border-radius: var(--radius);
  color: var(--cream-on-dark);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  transition: border-color 180ms ease;
}
.lab-textarea { min-height: 96px; resize: vertical; }
.lab-input::placeholder,
.lab-textarea::placeholder { color: rgba(201, 194, 173, 0.55); }
.lab-input:focus,
.lab-textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(185, 130, 46, 0.35);
}

.lab-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.lab-opt { position: relative; }
.lab-opt input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  inset: 0;
  cursor: pointer;
}
.lab-opt span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(239, 233, 216, 0.28);
  border-radius: 999px;
  font-size: var(--fs-md);
  color: var(--cream-on-dark);
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.lab-opt input:hover + span { border-color: rgba(239, 233, 216, 0.6); }
.lab-opt input:checked + span {
  background: var(--amber);
  border-color: var(--amber);
  color: #1c1408;
  font-weight: 600;
  animation: chip-pop 240ms ease;
}
@keyframes chip-pop {
  0% { transform: scale(0.96); }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.lab-opt input:focus-visible + span {
  outline: 2px solid var(--amber-light);
  outline-offset: 2px;
}
.lab-opt input:disabled + span {
  opacity: 0.4;
  cursor: not-allowed;
}

/* wide options: tier choices carry their own description */
.lab-opt-wide { width: 100%; }
.lab-opt-wide span {
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.85rem 1.2rem;
  border-radius: var(--radius);
}
.lab-opt-wide strong { font-weight: 600; }
.lab-opt-wide small {
  font-size: var(--fs-xs);
  font-weight: 400;
  opacity: 0.85;
}

/* contact-mode toggle keeps the right keyboard under the thumb */
.contact-modes {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

/* welcome-back note when a saved blend is restored */
.lab-welcome {
  margin: 0 0 1.4rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(217, 169, 79, 0.4);
  border-radius: var(--radius);
  background: rgba(185, 130, 46, 0.12);
  font-size: var(--fs-md);
  color: var(--amber-light);
}

/* final-check review */
.review-intro {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--cream-dim);
  margin: 0 0 1.4rem;
}
.review-rows { border-top: 1px solid rgba(239, 233, 216, 0.14); }
.review-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(239, 233, 216, 0.14);
}
.review-key {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-light);
}
.review-val {
  font-size: var(--fs-md);
  color: var(--cream-on-dark);
  overflow-wrap: anywhere;
}
.review-edit {
  min-height: 44px;
  padding: 0 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 180ms ease;
}
.review-edit:hover { color: var(--cream-on-dark); }

/* consent gates — the serious part, set apart from the reviewable answers.
   Deliberately NOT the pill/chip treatment: these are statements to read, not
   options to browse, so they get real checkboxes and full running text. */
.lab-consents {
  margin-top: 2rem;
  padding: 1.4rem 1.4rem 1.5rem;
  border: 1px solid rgba(239, 233, 216, 0.16);
  border-left: 2px solid var(--amber);
  border-radius: var(--radius);
  background: rgba(239, 233, 216, 0.035);
}
.consent-title {
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-light);
}
.lab-consent + .lab-consent {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(239, 233, 216, 0.14);
}
.consent-lead {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--cream-on-dark);
}
.consent-note {
  margin: 0.7rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--cream-dim);
}
.consent-opts { margin-top: 1rem; }
/* The visible box is a real sibling element (.consent-box), not the input and
   not a pseudo-element — the same "hide the input, style the sibling" technique
   as .lab-opt. Styling an `appearance:none` checkbox directly is unreliable on
   iOS Safari, and most of these customers order from a phone. */
.consent-opt {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  align-content: center;
  min-height: 44px; /* same touch target as .lab-opt and .review-edit */
  padding: 0.5rem 0;
  cursor: pointer;
}
.consent-opt input {
  position: absolute;
  opacity: 0;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  cursor: pointer;
}
.consent-box {
  position: relative;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.08em;
  border: 1.5px solid rgba(239, 233, 216, 0.45);
  border-radius: 4px;
  background: transparent;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.consent-opt input:hover ~ .consent-box { border-color: rgba(239, 233, 216, 0.75); }
.consent-opt input:checked ~ .consent-box {
  background: var(--amber);
  border-color: var(--amber);
}
/* the tick, drawn rather than typed so it sits in the box exactly */
.consent-opt input:checked ~ .consent-box::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 0.12rem;
  width: 0.32rem;
  height: 0.66rem;
  border: solid #1c1408;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consent-opt input:focus-visible ~ .consent-box {
  outline: 2px solid var(--amber-light);
  outline-offset: 2px;
}
.consent-opt span {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--cream-on-dark);
}
.consent-opt a {
  color: var(--amber-light);
  text-underline-offset: 3px;
}

.lab-other-input {
  margin-top: 0.7rem;
  max-width: 24rem;
}

.lab-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}
.lab-nav .btn { min-width: 9rem; }
#lab-next { margin-left: auto; }

.lab-error {
  margin: 1rem 0 0;
  padding: 0.7rem 1rem;
  background: rgba(190, 84, 60, 0.18);
  border: 1px solid rgba(224, 122, 95, 0.5);
  border-radius: var(--radius);
  color: #f0b7a4;
  font-size: var(--fs-md);
}

.lab-fallback {
  margin: 1.4rem 0 0;
  font-size: var(--fs-sm);
  color: var(--cream-dim);
}
.lab-fallback a { color: var(--amber-light); }

/* --- success state --- */

.lab-success { text-align: center; padding: 2rem 0.5rem; }
.lab-success h3 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  margin-bottom: 0.8rem;
}
.lab-success p { color: var(--cream-dim); max-width: 30rem; margin: 0 auto 1rem; }
.lab-success .success-noted {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--amber-light);
}
.success-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.4rem;
}

/* --- vessel --- */

.lab-vessel {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lab-vessel svg { width: min(100%, 300px); }

/* glowing shadow behind the bottle — adapted from the shadcn "glowing-shadow"
   component into vanilla CSS. It reacts to the blend: JS sets --glow-color to
   the current liquid rgb and --glow-level (0..1) to how many drops are in. */
.vessel-stage {
  position: relative;
  width: min(100%, 300px);
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.vessel-stage svg { position: relative; z-index: 1; }

/* Phones/tablets: docked mini bottle (js/lab.js adds .is-docked). The window
   crops the 300x460 drawing to the bottle itself. It sits in the page gutter,
   overlapping the card's padding rather than its text. */
.vessel-stage.is-docked {
  position: fixed;
  top: var(--dock-top, 5.5rem);
  right: 4px;
  z-index: 40;
  width: 46px;
  height: 128px;
  margin: 0;
  overflow: hidden;
  display: block;
  pointer-events: none;
  background: rgba(18, 38, 31, 0.92);
  border: 1px solid rgba(239, 233, 216, 0.18);
  border-radius: 23px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  animation: vessel-dock-in 260ms ease-out;
}
.vessel-stage.is-docked svg {
  position: absolute;
  width: 84px;
  max-width: none;
  left: -19px;
  top: -7px;
}
.vessel-stage.is-docked .vessel-glow { display: none; }
@keyframes vessel-dock-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.vessel-glow {
  --glow-color: 200, 155, 82; /* amber default, overwritten by JS */
  --glow-level: 0;
  position: absolute;
  left: 50%;
  top: 56%;
  width: 60%;
  height: 62%;
  z-index: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(calc(0.85 + var(--glow-level) * 0.28));
  opacity: calc(0.1 + var(--glow-level) * 0.6);
  transition: opacity 800ms ease, transform 800ms ease;
}
.vessel-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(var(--glow-color), 0.85),
    rgba(var(--glow-color), 0.3) 46%,
    rgba(var(--glow-color), 0) 72%
  );
  filter: blur(30px);
  transition: background 800ms ease;
}
.vessel-glow.is-pulsing { animation: vessel-glow-pulse 720ms ease-out; }

@keyframes vessel-glow-pulse {
  0%   { opacity: calc(0.1 + var(--glow-level) * 0.6); }
  28%  { opacity: 1; }
  100% { opacity: calc(0.1 + var(--glow-level) * 0.6); }
}

.vp-stem { stroke: var(--cream-dim); stroke-width: 3; }
.vp-bulb { fill: none; stroke: var(--cream-dim); stroke-width: 2.5; }
.vp-tip { fill: var(--cream-dim); }

.vessel-drop { fill: var(--amber-light); }

/* splash when a drop lands (elements created + animated in js/lab.js) */
.splash-ring { fill: none; stroke-width: 1.3; }
.splash-bit { /* fill inherited from the .vessel-splash group (current blend) */ }

.vb-cap { fill: var(--cream-on-dark); }
.vb-neck { fill: rgba(239, 233, 216, 0.4); }
.vb-glass {
  fill: rgba(239, 233, 216, 0.07);
  stroke: rgba(239, 233, 216, 0.5);
  stroke-width: 2.5;
}

.vessel-liquid {
  /* fill comes from the JS mixer (inline style + WAAPI). Never add a CSS fill
     or a fill transition here: the fill transition wedged Chrome's paint at
     black and silently ate every colour change. */
  transition: y 700ms ease, height 700ms ease;
}

.vessel-bubble {
  fill: rgba(255, 251, 240, 0.5);
  animation: bubble-rise 4.5s ease-in infinite;
}
.vb-b2 { animation-delay: 1.6s; }
.vb-b3 { animation-delay: 3s; }
@keyframes bubble-rise {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 0.7; }
  100% { transform: translateY(-140px); opacity: 0; }
}

.vessel-ticks line { stroke: rgba(239, 233, 216, 0.35); stroke-width: 1.5; }
.vessel-ticks line.is-filled { stroke: var(--amber-light); }

.vessel-label rect { fill: var(--shell); }
.vessel-label { transition: opacity 600ms ease; }
.vl-brand {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.16em;
  fill: var(--ink-soft);
  text-anchor: middle;
}
.vl-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  fill: var(--ink);
  text-anchor: middle;
}

.vessel-caption {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* instrument readout: live summary of what's in the vessel */
.vessel-readout {
  margin: 0.5rem 0 0;
  max-width: 250px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.7;
  text-align: center;
  color: rgba(201, 194, 173, 0.75);
}

/* ---------- footer ---------- */

.footer {
  background: var(--shell);
  border-top: 1px solid var(--linen-deep);
  padding-bottom: 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}

.footer-logo {
  width: min(230px, 70%);
  height: auto;
}

.footer-label {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin-bottom: 1rem;
}

.footer-link {
  display: block;
  width: fit-content;
  padding: 0.35rem 0;
  text-decoration: none;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 180ms ease;
}
.footer-link:hover { color: var(--ink); }

.footer-note { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 0.4rem; }

.footer-base {
  max-width: 72rem;
  margin: 3rem auto 0;
  border-top: 1px solid var(--linen-deep);
  padding-top: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-base p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.motion-toggle {
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  background: none;
  border: 1px solid var(--linen-deep);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 180ms ease, border-color 180ms ease;
}
.motion-toggle:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(34px) scale(0.988);
  filter: blur(5px);
  transition: opacity 850ms ease, transform 900ms cubic-bezier(0.16, 0.84, 0.3, 1),
              filter 650ms ease;
}
.reveal.is-in { opacity: 1; transform: none; filter: none; }

/* ---------- responsive ---------- */

@media (max-width: 1023px) {
  .lab-bench { grid-template-columns: 1fr; }
  .lab-vessel {
    position: static;
    order: -1;
  }
  .lab-vessel svg { width: min(52vw, 230px); }

  /* tablets get the phone menu: at 768-1023px the full link row wrapped
     every label onto two lines and the CTA onto three */
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--shell);
    border-bottom: 1px solid var(--linen-deep);
    padding: 0.6rem var(--pad-x) 1.4rem;
  }
  .nav-menu.is-open { display: flex; }
  .nav-links { flex-direction: column; gap: 0; }
  .nav-links a {
    display: block;
    padding: 0.85rem 0;
    font-size: var(--fs-base);
    border-bottom: 1px solid var(--linen-deep);
  }
  .nav-cta { margin-top: 1.2rem; }
}

@media (max-width: 767px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy {
    grid-column: 1;
    padding: 2.75rem var(--pad-x) 0;
  }
  .hero-art {
    grid-column: 1;
    margin-top: 2.75rem;
  }
  .hero-photo {
    position: static;
    aspect-ratio: 4 / 5;
    height: auto;
  }

  .story-grid { grid-template-columns: 1fr; }
  .craft-steps { grid-template-columns: 1fr; }
  .blend-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }


  .lab-nav { flex-direction: column-reverse; }
  .lab-nav .btn { width: 100%; }

  .bench-head-row { margin-bottom: 1.8rem; }

  /* the selector can't fit 9 panels side by side on a phone — stack it and
     let the active panel grow tall instead of wide */
  .selector {
    flex-direction: column;
    height: auto;
  }
  .selector-option {
    height: 66px;
    min-width: 0;
    background-size: cover;
    transition: height 0.6s ease, background-size 0.6s ease,
                box-shadow 0.6s ease, border-color 0.6s ease;
  }
  .selector-option + .selector-option { margin-left: 0; margin-top: 0.6rem; }
  .selector-option.is-active {
    flex-grow: 0;
    height: min(56vh, 360px);
    background-size: cover;
  }
  .selector.is-in .selector-option { animation-name: selector-in-y; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .craft-steps { grid-template-columns: 1fr 1fr; }
  .blend-cards { grid-template-columns: 1fr; max-width: 34rem; }
}

/* ---------- blend card row alignment (3-across only) ---------- */

/* Only above 1024px do the three cards sit side by side; below that they stack
   and these floors would just add dead space. Side by side, the eye compares
   row against row, so a two-line tier name or a longer description must not
   push one card's bullet list out of line with its neighbours. */
@media (min-width: 1024px) {
  /* "Designer Inspiration Collection" wraps to two lines; the other two don't */
  .blend-name { min-height: 3.3em; }

  /* the longest tier description runs to five lines at card width */
  .blend-desc { min-height: 8.3em; }

  /* the feature card's "Most requested" flag pushed its whole stack down
     relative to the other two. Reserve the same strip on the plain cards. */
  .blend-card:not(.blend-card-feature)::before {
    content: "";
    display: block;
    height: calc(var(--fs-3xs) * 1.65 + 0.9rem);
  }
}

/* ---------- reduced motion ---------- */

/* Reduced motion: movement is removed, but the page still breathes with
   gentle fades. html.force-motion (?motion=on) overrides for previewing. */
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) { scroll-behavior: auto; }
  html:not(.force-motion) :is(.hero-copy > *, .hero-art, .hero-photo,
    .vessel-bubble, .hero-scroll-line::after) { animation: none; }
  html:not(.force-motion) .hero-scroll-line::after { opacity: 0.5; }
  html:not(.force-motion) .vessel-bubble { opacity: 0; }
  html:not(.force-motion) .ticker-track { animation: none; flex-wrap: wrap; }
  html:not(.force-motion) .reveal { transform: none; filter: none; transition: opacity 500ms ease; }
  /* award-layer effects are motion — strip them for reduced-motion users */
  html:not(.force-motion) .hero-fx { display: none; }
  html:not(.force-motion) .craft.is-scrub .section-inner { min-height: 0; }
  html:not(.force-motion) .craft.is-scrub .craft-step { opacity: 1; transform: none; filter: none; }
  html:not(.force-motion) .craft.is-scrub .craft-cta { display: block; }
  html:not(.force-motion) .craft-step::before { transform: scaleX(1); transition: none; }
  html:not(.force-motion) .lab-stage.is-active { animation: stage-fade 250ms ease both; }
  html:not(.force-motion) :is(.btn, .lab-opt span) {
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  html:not(.force-motion) .btn-solid:hover { transform: none; box-shadow: none; }
  html:not(.force-motion) .lab-opt input:checked + span { animation: none; }
  html:not(.force-motion) .blend-card.is-in { transition: box-shadow 300ms ease; }
  html:not(.force-motion) .blend-card.is-in:hover { transform: none; }
  /* selector: expand still works, but no slide-in or eased grow */
  html:not(.force-motion) .selector.is-in .selector-option {
    animation: none;
    opacity: 1;
    transform: none;
  }
  html:not(.force-motion) .selector-option,
  html:not(.force-motion) .selector-info { transition: none; }
  /* glow stays (still reflects the blend + drop count) but stops moving */
  html:not(.force-motion) .vessel-glow.is-pulsing { animation: none; }
  html:not(.force-motion) .vessel-stage.is-docked { animation: none; }
}
@keyframes stage-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================================
   AWARD LAYER — preloader, custom cursor, hero canvas, craft
   scrub. All gated in enhance.js (motion + capability), with
   graceful fallbacks so nothing here is load-bearing.
   ============================================================ */

/* ---------- preloader (curtain lifts on first paint) ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--forest);
  color: var(--cream-on-dark);
  animation: preloader-out 0.85s cubic-bezier(0.7, 0, 0.2, 1) 1.05s forwards;
}
.preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 1.15rem; }
.preloader-word {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.1rem);
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(12px);
  animation: preloader-word-in 0.7s ease 0.1s forwards;
}
.preloader-word em { font-style: italic; color: var(--amber-light); }
.preloader-bar {
  position: relative;
  width: min(180px, 42vw);
  height: 2px;
  background: rgba(239, 233, 216, 0.18);
  border-radius: 2px;
  overflow: hidden;
}
.preloader-bar-fill {
  position: absolute;
  inset: 0;
  background: var(--amber-light);
  transform-origin: left;
  transform: scaleX(0);
  animation: preloader-fill 1s ease 0.15s forwards;
}
@keyframes preloader-word-in { to { opacity: 1; transform: none; } }
@keyframes preloader-fill { to { transform: scaleX(1); } }
@keyframes preloader-out {
  to { opacity: 0; visibility: hidden; transform: translateY(-14px); pointer-events: none; }
}
/* returning visitors / reduced-motion: no intro wait */
.preloader.preloader--skip {
  animation: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- custom cursor (fine pointers only, added by JS) ---------- */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 190;
  opacity: 0;
  will-change: transform;
}
.cursor-dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--amber);
}
/* the ring grows via a registered custom property that enhance.js folds into the
   per-frame transform — scaling instead of animating width/height/margin keeps
   the hover response off the layout path. Falls back to a static 34px ring if
   @property is unsupported. */
@property --ring-scale {
  syntax: "<number>";
  initial-value: 1;
  inherits: false;
}
.cursor-ring {
  --ring-scale: 1;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(185, 130, 46, 0.7);
  transition: opacity 0.3s ease, --ring-scale 0.25s ease,
              background-color 0.25s ease, border-color 0.25s ease;
}
html.has-cursor.cursor-ready .cursor-dot,
html.has-cursor.cursor-ready .cursor-ring { opacity: 1; }
html.has-cursor,
html.has-cursor a,
html.has-cursor button,
html.has-cursor [role="button"],
html.has-cursor label,
html.has-cursor summary,
html.has-cursor .selector-option { cursor: none; }
html.has-cursor input,
html.has-cursor textarea { cursor: auto; }
.cursor-ring.is-hover {
  --ring-scale: 1.588; /* 34px -> 54px */
  background: rgba(185, 130, 46, 0.12);
  border-color: var(--amber);
}

/* ---------- hero reactive canvas (drifting scent motes) ---------- */
.hero-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.2s ease 0.5s;
}
.hero-fx.is-on { opacity: 1; }

/* mood scrim under the motes so the golden particles read against the photo
   (edges/foot darkened, bottle kept bright); only shown when the fx is live */
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease 0.5s;
  background:
    radial-gradient(125% 95% at 52% 38%, transparent 42%, rgba(18, 38, 31, 0.34) 100%),
    linear-gradient(to top, rgba(18, 38, 31, 0.4), transparent 46%);
}
.hero-art.fx-on::after { opacity: 1; }

/* ---------- kinetic headline (JS splits into line masks) ---------- */
.hero-title.is-kinetic { animation: none; }
/* the mask needs slack below the baseline: line-height is 0.98, so without it
   the overflow:hidden crops descenders (g, y). padding gives the glyphs room,
   the negative margin cancels it so the layout doesn't shift */
.hero-title .hl-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}
.hero-title .hl-inner { display: block; will-change: transform; }

/* ---------- craft: pinned + scrubbed sequence (desktop, JS-gated) ---------- */
@media (min-width: 1024px) {
  /* while pinned the section must fit exactly one viewport: kill the big
     .section vertical padding (it pushed the step text below the fold), let
     the inner flex column own the spacing, and size EVERY vertical consumer
     in vh so wide-but-short windows still fit (the title is vw-clamped and
     was wrapping to two huge lines on short screens) */
  .craft.is-scrub {
    padding-top: 0;
    padding-bottom: 0;
  }
  .craft.is-scrub .section-inner {
    height: 100vh;
    box-sizing: border-box;
    padding: clamp(4rem, 9vh, 6rem) 0 clamp(1.2rem, 4vh, 3rem); /* top clears the fixed header */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }
  .craft.is-scrub .craft-head {
    margin-bottom: clamp(1rem, 3.5vh, 2.5rem);
    max-width: none; /* let the title run one line */
  }
  .craft.is-scrub .section-title { font-size: clamp(1.7rem, 4.6vh, 3.4rem); }
  .craft.is-scrub .craft-step h3 { font-size: clamp(1.15rem, 2.6vh, 1.75rem); margin: 0.5rem 0 0.45rem; }
  .craft.is-scrub .craft-step p { font-size: clamp(0.85rem, 1.9vh, 1.02rem); line-height: 1.5; }
  .craft.is-scrub .craft-cta { display: none; }
  .craft.is-scrub .craft-art {
    aspect-ratio: auto;
    height: clamp(110px, 24vh, 240px);
    margin: clamp(0.5rem, 1.6vh, 1.1rem) 0 clamp(0.6rem, 1.8vh, 1.3rem);
  }
  .craft.is-scrub .craft-step {
    opacity: 0.26;
    filter: none;
    transform: scale(0.94);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .craft.is-scrub .craft-step.is-active { opacity: 1; transform: scale(1); }
  /* The active step is already carried by opacity, scale and the rule below it.
     This used to also lighten the numeral to --amber, which on the cream ground
     measured 2.66:1 — under the 4.5:1 floor, and *worse* than the inactive state.
     --amber-deep measures 5.25:1; weight does the emphasis instead. */
  .craft.is-scrub .craft-step.is-active .craft-num { font-weight: 500; }
  .craft.is-scrub .craft-step::before { transform: scaleX(0); }
  .craft.is-scrub .craft-step.is-active::before { transform: scaleX(1); }
}

/* ============================================================
   LEGAL PAGES (privacy.html)
   Deliberately JS-free: a legal page must render even if a
   script fails, so it carries no nav toggle, preloader or
   reveal classes — nothing here depends on main.js.
   ============================================================ */

.legal-page { background: var(--shell); }

.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.4rem var(--pad-x);
  border-bottom: 1px solid var(--linen-deep);
}

.legal-back {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-deep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.legal-back:hover,
.legal-back:focus-visible { color: var(--palm); }

.legal-inner { max-width: 44rem; }

.legal-title { margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }

.legal h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin: clamp(2.2rem, 4vw, 3rem) 0 0.7rem;
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--linen-deep);
}
.legal h2:first-of-type { margin-top: 0; }

.legal p {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: var(--measure);
}
.legal a { color: var(--amber-deep); }

.legal-list {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}
.legal-list + p { margin-top: 0.9rem; }
.legal-list li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.3rem;
  font-size: var(--fs-base);
  color: var(--ink-soft);
}
.legal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
}

.legal-updated {
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--linen-deep);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Print/PDF: a positioned <li> is painted as its own layer, so Chrome writes
   list text after the paragraphs around it. PDF readers that reflow or copy
   text then show lists out of order. Keep the dot in normal flow for print. */
@media print {
  .legal-list li { position: static; }
  .legal-list li::before {
    position: static;
    display: inline-block;
    vertical-align: middle;
    margin: 0 calc(1.3rem - 6px) 0.15em -1.3rem;
  }
}