:root {
  color-scheme: light;
  --paper: #fff8ee;
  --paper-warm: #ddd2c0;
  --ink: #211719;
  --ink-soft: #4f4443;
  --oxblood: #380f18;
  --oxblood-dark: #4f1722;
  --wine: #651d2c;
  --wine-deep: #371018;
  --brass: #b28a55;
  --cobalt: #702233;
  --cacao: #8e4350;
  --gewelry-red: #b91d1a;
  --line: color-mix(in srgb, var(--ink) 26%, transparent);
  --display: "Iowan Old Style", Baskerville, "Times New Roman", serif;
  /* Outfit-like UI stack: keep the editorial display face, tidy every utility label. */
  --ui: "Outfit", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: var(--ui);
  --mono: var(--ui);
  --gutter: clamp(20px, 3vw, 48px);
  --header-h: 76px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
summary {
  font: inherit;
}

button,
summary {
  color: inherit;
}

:focus-visible {
  outline: 3px solid #f6bd5f;
  outline-offset: 4px;
}

em.scientific-name {
  font-style: italic;
}

.skip-link {
  position: fixed;
  z-index: 200;
  left: 16px;
  top: 12px;
  transform: translateY(-140%);
  padding: 12px 18px;
  background: white;
  color: var(--ink);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  z-index: 80;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--header-h);
  padding: 14px var(--gutter);
  color: white;
  mix-blend-mode: normal;
  transition:
    color 0.35s ease,
    background-color 0.35s ease,
    border-color 0.35s ease,
    transform 0.35s ease;
}

.site-header::after {
  content: "";
  position: absolute;
  inset: auto var(--gutter) 0;
  height: 1px;
  background: currentColor;
  opacity: 0.24;
}

.site-header.is-scrolled {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  width: 134px;
  height: 34px;
}

.brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.site-header:not(.is-scrolled) .brand-logo {
  filter: brightness(0) invert(1);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 23px;
  line-height: 1;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3.5vw, 58px);
  font-family: var(--mono);
  font-size: clamp(12px, 0.82vw, 14px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.desktop-nav a,
.header-action {
  position: relative;
}

.brand-nav {
  position: relative;
}

.brand-nav summary {
  position: relative;
  padding-right: 14px;
  list-style: none;
  cursor: pointer;
}

.brand-nav summary::-webkit-details-marker {
  display: none;
}

.brand-nav summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  color: var(--brass);
  font-size: 12px;
  line-height: 1;
  transform: translateY(-50%);
}

.brand-nav[open] summary::after {
  content: "−";
}

.brand-nav-panel {
  position: absolute;
  z-index: 2;
  top: calc(100% + 18px);
  left: 50%;
  display: grid;
  min-width: 168px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  box-shadow: 0 18px 40px rgba(33, 23, 25, 0.14);
  color: var(--ink);
  transform: translateX(-50%);
}

.brand-nav-panel a {
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  white-space: nowrap;
}

.brand-nav-panel a:last-child {
  border-bottom: 0;
}

.inner-page .brand-nav-panel {
  background: var(--paper);
}

.desktop-nav a::after,
.header-action::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease;
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.header-action:hover::after,
.header-action:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-action {
  justify-self: end;
  min-width: 128px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-transform: uppercase;
}

.header-action::after {
  display: none;
}

.header-action span {
  display: inline-block;
  margin-left: 8px;
}

.menu-toggle,
.mobile-menu {
  display: none;
}

.mobile-brand-nav {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-brand-nav summary {
  padding: 14px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--display);
  font-size: 48px;
  line-height: 0.92;
  letter-spacing: -0.06em;
}

.mobile-brand-nav summary::-webkit-details-marker {
  display: none;
}

.mobile-brand-nav summary::after {
  content: "+";
  float: right;
  color: var(--brass);
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1;
}

.mobile-brand-nav[open] summary::after {
  content: "−";
}

.mobile-brand-nav > div {
  display: grid;
  gap: 0;
  padding: 0 0 8px 20px;
}

.mobile-brand-nav > div a {
  padding: 9px 0;
  border-bottom: 0;
  color: rgba(255, 255, 255, 0.76);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-casing {
  text-transform: none;
}

.eyebrow-dark {
  color: var(--oxblood);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  width: fit-content;
  padding: 0 24px;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-3px);
}

.button-light {
  border-color: var(--oxblood);
  color: var(--paper);
  background: var(--oxblood);
}

.button-outline {
  border-color: var(--oxblood);
  color: var(--paper);
  background: var(--oxblood);
}

.button-outline:hover,
.button-outline:focus-visible {
  color: var(--wine-deep);
  background: white;
}

.button-dark {
  color: var(--paper);
  background: var(--oxblood);
  border-color: var(--oxblood);
}

.product-buy {
  border-color: var(--oxblood) !important;
  color: var(--paper) !important;
  background: var(--oxblood) !important;
}

.product-buy:hover,
.product-buy:focus-visible,
.button-light:hover,
.button-light:focus-visible,
.button-outline:hover,
.button-outline:focus-visible {
  border-color: var(--oxblood-dark);
  color: var(--paper);
  background: var(--oxblood-dark);
}

.button-dark:hover,
.button-dark:focus-visible {
  color: var(--paper);
  background: var(--oxblood-dark);
  border-color: var(--oxblood-dark);
}

/* Hero */

.hero {
  position: relative;
  height: 220vh;
  min-height: 1400px;
  color: white;
  background: var(--ink);
}

.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
}

.hero-media,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-media {
  z-index: -4;
  display: block;
  overflow: hidden;
}

.hero-bg {
  display: block;
  width: 100%;
  height: 100%;
  z-index: -4;
  object-fit: cover;
  object-position: 50% 50%;
  will-change: transform;
}

.hero-shade {
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(20, 11, 12, 0.78) 0%, rgba(20, 11, 12, 0.52) 33%, transparent 65%),
    linear-gradient(0deg, rgba(20, 11, 12, 0.5), transparent 42%);
}

.ganoderma-orbit {
  position: absolute;
  z-index: -1;
  left: 58%;
  top: 50%;
  width: min(54vw, 780px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0.7;
  will-change: transform, opacity;
}

.ganoderma-orbit i {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--brass) 64%, transparent);
  border-radius: 50%;
}

.ganoderma-orbit i:nth-child(2) {
  inset: 12%;
}

.ganoderma-orbit i:nth-child(3) {
  inset: 25%;
}

.hero-copy {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  bottom: clamp(54px, 8vh, 95px);
  width: min(66vw, 990px);
  will-change: transform, opacity;
}

.hero-copy h1 {
  margin: 16px 0 28px;
  font-family: var(--display);
  font-size: clamp(62px, 7.4vw, 136px);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.065em;
}

.hero-copy h1 span {
  display: block;
  width: fit-content;
  will-change: transform, opacity;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.hero-actions > span {
  max-width: 190px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.hero-note {
  position: absolute;
  z-index: 4;
  right: var(--gutter);
  bottom: clamp(104px, 14vh, 150px);
  width: min(300px, 24vw);
  padding: 22px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(8px);
  will-change: transform, opacity;
}

.hero-note > .eyebrow { margin-bottom: 16px; }

.hero-format-index {
  display: block;
  margin-bottom: 6px;
  color: var(--oxblood);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.hero-note h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(40px, 3.6vw, 56px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.hero-format-copy {
  min-height: 66px;
  margin: 0 0 20px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

.hero-format-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 0 0 18px;
}

.hero-format-options button {
  min-height: 32px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: transparent;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.hero-format-options button[aria-pressed="true"],
.hero-format-options button:hover,
.hero-format-options button:focus-visible {
  color: white;
  background: var(--oxblood);
}

.hero-note a {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hero-stage[data-hero-tone="latte"] .ganoderma-orbit i { border-color: color-mix(in srgb, #c88974 76%, transparent); }
.hero-stage[data-hero-tone="cacao"] .ganoderma-orbit i { border-color: color-mix(in srgb, #c79760 76%, transparent); }

.scroll-cue {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.scroll-cue i {
  display: block;
  width: 54px;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.35);
}

.scroll-cue i::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: white;
  transform: translateX(-100%);
  animation: cue-line 2s ease-in-out infinite;
}

@keyframes cue-line {
  45%,
  100% {
    transform: translateX(100%);
  }
}

/* Collection */

.collection {
  position: relative;
  z-index: 2;
  background: var(--paper);
}

.collection-intro {
  min-height: 92vh;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 12vh var(--gutter) 9vh;
  text-align: center;
}

.collection-intro h2 {
  margin: 22px 0 0;
  color: var(--oxblood);
  font-family: var(--display);
  font-size: clamp(70px, 9.5vw, 166px);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.07em;
}

.collection-intro h2 span {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.collection-intro h2 .collection-subtitle {
  margin-top: 0.42em;
  color: var(--wine);
  font-family: var(--sans);
  font-size: clamp(20px, 2.25vw, 42px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.015em;
  text-transform: none;
}

.collection-intro > p:last-child {
  justify-self: center;
  width: min(430px, 36vw);
  margin: 58px 0 0;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.45vw, 23px);
  line-height: 1.5;
}

.collection-runway {
  position: relative;
  padding: 0 var(--gutter) 12vh;
}

.collection-sticky {
  position: relative;
  padding: 0;
}

.collection-progress {
  position: relative;
  margin-bottom: 22px;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 17%, transparent);
}

.collection-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--oxblood);
  will-change: transform, width;
}

.product-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
  width: 100%;
}

.product-card {
  width: auto;
  min-height: clamp(480px, 51vw, 650px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: #e3ddd2;
  border-radius: 20px;
  overflow: hidden;
  will-change: transform, opacity;
}

.product-card-noir {
  --product-accent: var(--oxblood-dark);
}

.product-card-latte {
  --product-accent: var(--cobalt);
}

.product-card-chocolate {
  --product-accent: var(--cacao);
}

.product-visual {
  position: relative;
  overflow: hidden;
  min-height: 0;
  background: color-mix(in srgb, var(--product-accent) 8%, var(--paper));
}

.product-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(33, 23, 25, 0.12));
}

.product-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.product-card:hover .product-visual img,
.product-card:focus-within .product-visual img {
  transform: scale(1.035);
}

.product-index {
  position: absolute;
  z-index: 2;
  left: 22px;
  top: 22px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--product-accent);
  border-radius: 50%;
  color: var(--product-accent);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  font-family: var(--mono);
  font-size: 10px;
}

.product-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 12px 18px;
  min-height: 142px;
  padding: 20px;
  border-top: 1px solid var(--line);
}

.product-meta p {
  margin: 0;
}

.product-meta > div > p {
  color: var(--product-accent);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-meta h3 {
  margin: 5px 0 0;
  font-family: var(--display);
  font-size: clamp(34px, 3vw, 52px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.product-meta > p {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.product-meta a {
  display: grid;
  gap: 8px;
  justify-items: end;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.product-meta a span {
  font-size: 22px;
}

.product-meta a.product-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 124px;
  min-height: 46px;
  padding: 11px 15px;
  border: 1px solid var(--product-accent);
  border-radius: 999px;
  color: var(--product-accent);
  background: transparent;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-decoration: none;
  transition: color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.product-meta a.product-buy:hover,
.product-meta a.product-buy:focus-visible {
  color: white;
  background: var(--product-accent);
  transform: translateY(-2px);
}

.product-meta a.product-buy span {
  font-size: 16px;
  line-height: 1;
}

/* Ganoderma split story */

.ganoderma-story {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 190vh;
  min-height: 1360px;
  color: white;
  background: var(--wine-deep);
}

.story-copy,
.story-media {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
}

.story-copy {
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 9vh 7vw;
  text-align: center;
}

.story-copy h2 {
  position: relative;
  z-index: 2;
  margin: 24px 0;
  font-family: var(--display);
  font-size: clamp(58px, 6.2vw, 112px);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.06em;
}

.story-copy > p:not(.eyebrow) {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 0 34px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  line-height: 1.65;
}

.story-copy .button {
  position: relative;
  z-index: 2;
}

.story-words {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: space-around;
  pointer-events: none;
  color: color-mix(in srgb, white 12%, transparent);
  font-size: clamp(90px, 14vw, 220px);
  font-weight: 700;
  line-height: 0.7;
  letter-spacing: -0.08em;
  transform: rotate(-8deg);
}

.story-words span {
  display: block;
  white-space: nowrap;
  will-change: transform;
}

.story-media {
  background: var(--ink);
}

.story-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform, clip-path, opacity;
}

.story-macro {
  clip-path: circle(26% at 67% 44%);
}

.story-disc {
  position: absolute;
  z-index: 3;
  left: 67%;
  top: 44%;
  width: 52%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 18px rgba(178, 138, 85, 0.15),
    0 0 0 38px rgba(178, 138, 85, 0.07);
  pointer-events: none;
  will-change: transform, opacity;
}

/* Ingredient detail prototypes: two static modules added for content placement review. */

.ingredient-module {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 82svh;
  color: white;
}

.ingredient-module-copy,
.ingredient-module-media {
  min-width: 0;
}

.ingredient-module-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 8vw, 132px) clamp(24px, 7vw, 112px);
}

.ingredient-module-copy h2 {
  max-width: 760px;
  margin: 22px 0 28px;
  font-family: var(--display);
  font-size: clamp(58px, 7vw, 126px);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.07em;
}

.ingredient-module-copy > p:not(.eyebrow) {
  max-width: 520px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.6;
}

.ingredient-module-copy .eyebrow {
  color: var(--brass);
}

.ingredient-module-media {
  min-height: 620px;
  overflow: hidden;
  background: var(--ink);
}

.ingredient-module-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(0.96);
}

.ingredient-module-ganoderma .ingredient-module-copy {
  background: var(--wine-deep);
}

.ingredient-module-ganoderma .ingredient-module-media img {
  object-position: center;
}

.ingredient-module-cordyceps .ingredient-module-copy {
  color: var(--ink);
  background: var(--paper-warm);
}

.ingredient-module-cordyceps .ingredient-module-media {
  background: var(--paper-warm);
}

.ingredient-module-cordyceps .ingredient-module-copy > p:not(.eyebrow) {
  color: var(--ink-soft);
}

.ingredient-module-cordyceps .ingredient-module-copy .eyebrow {
  color: var(--oxblood);
}

.ingredient-module-cordyceps .ingredient-module-media img {
  object-position: center;
}

.ingredient-module-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 620px;
  margin-top: 42px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.ingredient-module-facts span {
  padding-top: 14px;
  color: rgba(255, 255, 255, 0.76);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.07em;
  line-height: 1.45;
  text-transform: uppercase;
}

.ingredient-module-cordyceps .ingredient-module-facts {
  border-color: rgba(33, 23, 25, 0.22);
}

.ingredient-module-cordyceps .ingredient-module-facts span {
  color: var(--ink-soft);
}

/* Preference explorer */

.preference {
  position: relative;
  z-index: 4;
  padding: 14vh var(--gutter) 12vh;
  background: var(--paper);
}

.preference-heading {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  column-gap: 8vw;
  margin-bottom: 10vh;
}

.preference-heading .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 18px;
}

.preference-heading h2 {
  margin: 0;
  max-width: 1000px;
  font-size: clamp(62px, 7.6vw, 128px);
  font-weight: 500;
  line-height: 0.84;
  letter-spacing: -0.075em;
}

.preference-heading > p:last-child {
  align-self: end;
  margin: 0;
  max-width: 430px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
}

.preference-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* Keep the last preference control clear of the persistent desktop WhatsApp action. */
  margin-right: 132px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.preference-grid button {
  position: relative;
  min-height: 164px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 24px;
  overflow: hidden;
  color: var(--ink);
  background: transparent;
  font-family: var(--display);
  font-size: clamp(38px, 4.6vw, 78px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  cursor: pointer;
  transition: color 0.35s ease;
}

.preference-grid button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--oxblood);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.2, 0.85, 0.2, 1);
}

.preference-grid button:hover,
.preference-grid button:focus-visible,
.preference-grid button[aria-pressed="true"] {
  color: white;
}

.preference-grid button:hover::before,
.preference-grid button:focus-visible::before,
.preference-grid button[aria-pressed="true"]::before {
  transform: scaleY(1);
}

.preference-grid button:nth-child(1),
.preference-grid button:nth-child(4) {
  grid-column: span 3;
}

.preference-grid button:nth-child(2),
.preference-grid button:nth-child(3) {
  grid-column: span 4;
}

.preference-grid button:nth-child(5),
.preference-grid button:nth-child(6) {
  grid-column: span 4;
}

.preference-grid button:nth-child(4) {
  grid-column: span 4;
}

.recommendation {
  display: grid;
  grid-template-columns: auto 1fr 1fr auto;
  align-items: center;
  gap: 32px;
  min-height: 180px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.recommendation > span {
  font-family: var(--mono);
  font-size: 11px;
}

.recommendation p {
  margin: 0;
}

.recommendation > div p {
  color: var(--oxblood);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recommendation h3 {
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: clamp(44px, 5vw, 76px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.recommendation > p {
  max-width: 440px;
  color: var(--ink-soft);
}

.recommendation > a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.recommendation > a span {
  margin-left: 8px;
}

/* Quality mosaic */

.quality {
  position: relative;
  height: 230vh;
  color: white;
  background: var(--wine);
}

.quality-stage {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(26px, 5vw, 86px);
  height: 100vh;
  padding: calc(var(--header-h) + 28px) var(--gutter) 36px;
  overflow: hidden;
}

.quality-copy {
  display: grid;
  align-content: center;
  max-width: 560px;
  padding: 0;
}

.quality-copy h2 {
  margin: 22px 0 28px;
  font-family: var(--display);
  font-size: clamp(58px, 6.3vw, 110px);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.06em;
}

.quality-copy > p:not(.eyebrow) {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 17px;
  line-height: 1.65;
}

.quality-copy ul {
  display: grid;
  gap: 0;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.quality-copy li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.quality-copy li span {
  font-family: var(--mono);
  font-size: 10px;
}

.quality-bento {
  position: relative;
  min-height: 0;
  height: 100%;
}

.mosaic {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 22px;
  background: var(--wine-deep);
  box-shadow: 0 24px 65px rgba(19, 3, 7, 0.28);
  will-change: transform, opacity;
}

.quality-bento .mosaic {
  position: absolute;
}

.mosaic-source {
  left: 0;
  top: 4%;
  width: 58%;
  height: 46%;
  z-index: 2;
}

.mosaic-prep {
  right: 0;
  top: 20%;
  width: 49%;
  height: 54%;
  z-index: 3;
}

.mosaic-detail {
  left: 14%;
  bottom: 2%;
  width: 66%;
  height: 38%;
  z-index: 1;
}

.mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.07);
  will-change: transform;
}

.mosaic figcaption {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 20px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Confirmed motion-reference revision: multi-image zoom and overlapped product deck */

.collection-runway {
  height: 100svh;
  min-height: 700px;
  padding: 0;
  overflow: hidden;
}

.collection-sticky {
  position: relative;
  height: 100%;
  padding: 10vh var(--gutter) 8vh;
}

.collection-progress {
  position: absolute;
  inset: 8vh var(--gutter) auto;
  z-index: 7;
  margin: 0;
}

.product-track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.product-card {
  position: absolute;
  left: 50%;
  top: 7vh;
  width: min(18vw, 280px);
  height: min(66vh, 650px);
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(33, 23, 25, 0.28);
  transform-origin: center center;
  touch-action: pan-y;
}

.product-meta {
  min-height: 152px;
}

.collection-slider-controls {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 6vh;
  display: flex;
  align-items: center;
  gap: 18px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.collection-slider-controls span {
  display: none;
}

.collection-slider-controls button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
  font-size: 21px;
  cursor: pointer;
  transition: color 0.22s ease, background 0.22s ease;
}

.collection-slider-controls button:hover,
.collection-slider-controls button:focus-visible {
  color: white;
  background: var(--oxblood);
}

.quality {
  height: 250vh;
  color: white;
  background: #0d1010;
}

.quality-stage {
  display: block;
  height: 100svh;
  min-height: 0;
  padding: 0;
  background: #0d1010;
}

.quality-copy {
  position: absolute;
  z-index: 8;
  left: clamp(24px, 4vw, 64px);
  bottom: 7vh;
  max-width: min(28vw, 370px);
  padding: 0;
  pointer-events: none;
}

.quality-copy h2 {
  margin: 10px 0;
  font-size: clamp(36px, 3.4vw, 60px);
}

.quality-copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.quality-copy ul { display: none; }

.quality-bento {
  position: absolute;
  inset: 22px;
  height: auto;
}

.mosaic,
.quality-bento .mosaic {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 3px solid #0d1010;
  border-radius: 0;
  background: #0d1010;
  box-shadow: none;
  will-change: left, top, width, height, transform, opacity;
}

.mosaic img { transform: scale(1.04); }

.mosaic figcaption {
  left: 14px;
  bottom: 12px;
  border: 0;
  padding: 0;
}

.product-focus {
  position: relative;
  z-index: 8;
  margin-top: -100svh;
}

@media (max-width: 760px) {
  .collection-intro { min-height: 66vh; padding: 10vh 18px 5vh; }
  .collection-intro h2 { font-size: clamp(50px, 14vw, 74px); line-height: 0.82; }
  .collection-intro > p:last-child { width: min(300px, 78vw); margin: 30px 0 0; justify-self: start; font-size: 15px; }
  .collection-runway { min-height: 640px; height: 88svh; }
  .collection-sticky { padding: 8vh 0 8vh; }
  .collection-progress { inset: 6vh 18px auto; }
  .product-card { top: 11vh; width: 76vw; height: min(60vh, 560px); }
  .product-meta { min-height: 132px; padding: 16px; }
  .product-meta h3 { font-size: 40px; }
  .product-meta > p { display: none; }
  .collection-slider-controls { bottom: 4vh; gap: 14px; }
  .collection-slider-controls button { width:42px; height:42px; }
  .quality { height: 220vh; }
  .quality-bento { inset: 8px; }
  .quality-copy { left: 18px; bottom: 7vh; max-width: 270px; }
  .quality-copy h2 { font-size: 40px; }
  .product-focus { margin-top: -100svh; }
}

/* Featured product */

.product-focus {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  min-height: 100vh;
  padding: 11vh var(--gutter);
  gap: clamp(50px, 7vw, 120px);
  align-items: center;
  background: var(--paper);
}

.focus-stage {
  position: relative;
  min-height: 76vh;
  overflow: hidden;
  background: #d8cdbc;
  touch-action: pan-y;
}

.focus-images {
  position: absolute;
  inset: 0;
}

.focus-images img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(16%) scale(1.04);
  will-change: transform, opacity;
}

.focus-images img.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
}

.focus-controls {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  min-height: 66px;
  color: white;
  background: color-mix(in srgb, var(--ink) 85%, transparent);
  backdrop-filter: blur(8px);
}

.focus-controls button {
  align-self: stretch;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
  transition: background 0.25s ease;
}

.focus-controls button:hover,
.focus-controls button:focus-visible {
  background: var(--oxblood);
}

.focus-controls span {
  justify-self: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.focus-copy h2 {
  margin: 18px 0 22px;
  font-family: var(--display);
  font-size: clamp(74px, 8vw, 136px);
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: -0.075em;
}

.focus-lead {
  max-width: 600px;
  margin: 0 0 38px;
  color: var(--ink-soft);
  font-size: clamp(19px, 1.8vw, 26px);
  line-height: 1.45;
}

.focus-details {
  margin-bottom: 34px;
  border-top: 1px solid var(--line);
}

.focus-details > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 22px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.focus-details span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.focus-details strong {
  font-size: 14px;
  font-weight: 500;
}

.focus-note {
  max-width: 620px;
  margin: 20px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

/* Contact and footer */

.contact-close {
  background: var(--paper);
}

.closing-visual {
  position: relative;
  height: 90vh;
  min-height: 680px;
  overflow: hidden;
  color: white;
  background: var(--ink);
}

.closing-visual picture {
  display: block;
  width: 100%;
  height: 100%;
}

.closing-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 11, 12, 0.75), rgba(20, 11, 12, 0.05) 65%);
}

.closing-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 50%;
  transform: scale(1.06);
  will-change: transform;
}

.closing-visual > p {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  bottom: 8vh;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(70px, 10vw, 174px);
  font-weight: 400;
  line-height: 0.76;
  letter-spacing: -0.08em;
}

.closing-visual > p span,
.closing-visual > p strong {
  display: block;
  font-weight: inherit;
}

.contact-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7vw;
  padding: 12vh var(--gutter) 9vh;
}

.contact-heading h2 {
  max-width: 720px;
  margin: 20px 0 36px;
  font-family: var(--display);
  font-size: clamp(60px, 6.5vw, 112px);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.065em;
  color: var(--oxblood);
}

.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  min-height: 84px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-style: normal;
  transition: transform 0.3s ease;
}

.faq details[open] summary i {
  transform: rotate(45deg);
}

.faq details p {
  max-width: 650px;
  margin: -4px 60px 24px 0;
  color: var(--ink-soft);
  line-height: 1.65;
}

.contact-details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding-top: 8vh;
  border-top: 1px solid var(--line);
}

.contact-details > div {
  display: grid;
  align-content: start;
  gap: 7px;
}

.contact-details span {
  margin-bottom: 10px;
  color: var(--oxblood);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-details strong,
.contact-details a,
.contact-details p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.contact-close footer {
  min-height: 260px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: 40px;
  padding: 6vh var(--gutter) 5vh;
  color: white;
  background: var(--oxblood);
}

.brand-footer {
  align-self: end;
  width: 164px;
  height: 44px;
}

.brand-footer .brand-logo {
  filter: brightness(0) invert(1);
}

.contact-close footer > p {
  margin: 0;
  max-width: 460px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  line-height: 1.6;
}

.contact-close footer .footer-copy {
  display: grid;
  align-content: end;
  gap: 20px;
  min-width: 0;
}

.contact-close footer .footer-copy > p {
  margin: 0;
  max-width: 460px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  line-height: 1.6;
}

.contact-close footer nav {
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 18px 28px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-close footer .footer-social {
  justify-self: start;
  justify-content: flex-start;
  gap: 10px;
}

.contact-close footer .footer-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  color: white;
  background: rgba(255, 255, 255, 0.04);
  transition: color 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, transform 0.22s ease;
}

.contact-close footer .footer-social a:hover,
.contact-close footer .footer-social a:focus-visible {
  color: var(--oxblood);
  border-color: white;
  background: white;
  transform: translateY(-2px);
}

.contact-close footer .footer-social a:focus-visible {
  outline: 2px solid white;
  outline-offset: 3px;
}

.contact-close footer .footer-social svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.whatsapp-link {
  position: fixed;
  z-index: 70;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 48px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  color: white;
  background: var(--oxblood);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.22);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.whatsapp-link:hover,
.whatsapp-link:focus-visible {
  transform: translateY(-3px);
}

.whatsapp-link svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.whatsapp-link.is-hidden {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1100px) {
  :root {
    --header-h: 70px;
  }

  .hero-copy {
    width: 70vw;
  }

  .hero-copy h1 {
    font-size: clamp(68px, 8.2vw, 94px);
  }

  .product-card {
    width: auto;
  }

  .product-meta {
    grid-template-columns: 1fr auto;
  }

  .product-meta > p {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .preference-heading {
    grid-template-columns: 1fr;
  }

  .preference-heading > p:last-child {
    margin-top: 34px;
  }

  .preference-grid button {
    grid-column: span 4 !important;
  }

  .preference-grid {
    margin-right: 76px;
  }

  .contact-close footer {
    padding-right: calc(var(--gutter) + 76px);
  }

  .recommendation {
    grid-template-columns: auto 1fr auto;
  }

  .recommendation > p {
    grid-column: 2 / 3;
  }

  .product-focus {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    gap: 42px;
  }

  .whatsapp-link {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    padding: 11px;
    border-radius: 50%;
  }

  .whatsapp-link span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  :root {
    --header-h: 66px;
    --gutter: 20px;
  }

  .desktop-nav,
  .header-action {
    display: none;
  }

  .site-header {
    grid-template-columns: 1fr auto;
  }

  .site-header::after {
    inset-inline: 20px;
  }

  .brand {
    width: 112px;
    height: 31px;
  }

  .brand-mark {
    width: 31px;
    height: 31px;
    font-size: 20px;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    border: 1px solid currentColor;
    padding: 0 14px;
    color: inherit;
    background: transparent;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .menu-toggle i,
  .menu-toggle i::after {
    display: block;
    width: 16px;
    height: 1px;
    background: currentColor;
    transition: transform 0.3s ease;
  }

  .menu-toggle i {
    position: relative;
  }

  .menu-toggle i::after {
    content: "";
    position: absolute;
    top: 5px;
  }

  .menu-toggle[aria-expanded="true"] i {
    transform: rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] i::after {
    top: 0;
    transform: rotate(90deg);
  }

  .mobile-menu {
    position: fixed;
    z-index: -1;
    inset: 0;
    display: grid;
    align-content: center;
    gap: 0;
    padding: 100px 20px 40px;
    color: white;
    background: var(--ink);
  }

  .mobile-menu[hidden] {
    display: none;
  }

  .mobile-menu a {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-family: var(--display);
    font-size: 48px;
    line-height: 1;
    letter-spacing: -0.05em;
  }

  .site-header.is-menu-open {
    color: white;
    background: var(--ink);
  }

  .hero {
    height: 155vh;
    min-height: 1120px;
  }

  .hero-stage {
    min-height: 620px;
  }

  .hero-bg {
    object-position: 57% 50%;
  }

  .hero-shade {
    background:
      linear-gradient(0deg, rgba(20, 11, 12, 0.86) 0%, rgba(20, 11, 12, 0.16) 66%),
      linear-gradient(90deg, rgba(20, 11, 12, 0.36), transparent 70%);
  }

  .ganoderma-orbit {
    left: 65%;
    top: 36%;
    width: 110vw;
  }

  .hero-copy {
    left: 20px;
    right: 20px;
    bottom: 228px;
    width: auto;
  }

  .hero-copy h1 {
    margin: 12px 0 18px;
    font-size: clamp(52px, 16vw, 72px);
    line-height: 0.84;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .hero-actions > span {
    max-width: 240px;
  }

  .scroll-cue {
    display: none;
  }

  .collection-intro {
    min-height: 82svh;
    padding-block: 12vh 8vh;
  }

  .collection-intro h2 {
    margin-top: 18px;
    font-size: clamp(50px, 14.6vw, 68px);
    line-height: 0.79;
  }

  .collection-intro > p:last-child {
    justify-self: start;
    width: auto;
    margin: 40px 0 0;
    font-size: 17px;
  }

  .collection-runway {
    height: auto;
  }

  .collection-sticky {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 22px 0 80px 20px;
  }

  .collection-progress {
    display: none;
  }

  .product-track {
    display: flex;
    width: 100%;
    height: auto;
    gap: 14px;
    padding-right: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .product-track::-webkit-scrollbar {
    display: none;
  }

  .product-card {
    flex: 0 0 84vw;
    width: 84vw;
    height: min(72svh, 680px);
    scroll-snap-align: start;
  }

  .product-meta {
    grid-template-columns: 1fr auto;
    min-height: 176px;
    gap: 14px;
    padding: 18px;
  }

  .product-meta > p {
    font-size: 12px;
  }

  .product-meta h3 {
    font-size: 38px;
  }

  .ganoderma-story {
    display: block;
    height: auto;
    min-height: 0;
  }

  .story-copy,
  .story-media {
    position: relative;
    height: auto;
    min-height: 82svh;
  }

  .story-copy {
    padding: 90px 24px;
  }

  .story-copy h2 {
    font-size: clamp(50px, 14vw, 66px);
  }

  .story-copy > p:not(.eyebrow) {
    font-size: 15px;
  }

  .story-words {
    font-size: 25vw;
  }

  .story-media {
    min-height: 78svh;
  }

  .story-macro {
    clip-path: circle(32% at 64% 44%);
  }

  .ingredient-module {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .ingredient-module-media,
  .ingredient-module-copy {
    min-height: 0;
  }

  .ingredient-module-media {
    order: 1;
    min-height: 62svh;
  }

  .ingredient-module-copy {
    order: 2;
    padding: 76px 24px 84px;
  }

  .ingredient-module-copy h2 {
    margin: 18px 0 24px;
    font-size: clamp(50px, 14vw, 70px);
  }

  .ingredient-module-copy > p:not(.eyebrow) {
    max-width: 560px;
    font-size: 15px;
  }

  .ingredient-module-facts {
    gap: 10px;
    margin-top: 34px;
  }

  .ingredient-module-facts span {
    font-size: 8px;
  }

  .ingredient-module-cordyceps .ingredient-module-media {
    order: 1;
  }

  .ingredient-module-cordyceps .ingredient-module-copy {
    order: 2;
  }

  .preference {
    padding-block: 92px 86px;
  }

  .preference-heading {
    margin-bottom: 60px;
  }

  .preference-heading h2 {
    font-size: 54px;
  }

  .preference-heading > p:last-child {
    font-size: 15px;
  }

  .preference-grid {
    grid-template-columns: 1fr 1fr;
    margin-right: 0;
  }

  .preference-grid button {
    grid-column: span 1 !important;
    min-height: 106px;
    padding: 14px;
    font-size: 31px;
  }

  .recommendation {
    grid-template-columns: auto 1fr;
    gap: 14px 18px;
    padding-block: 24px;
  }

  .recommendation > p,
  .recommendation > a {
    grid-column: 2;
  }

  .recommendation h3 {
    font-size: 48px;
  }

  .quality {
    height: auto;
  }

  .quality-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    height: auto;
    min-height: 0;
    padding: 90px 20px 28px;
    overflow: visible;
  }

  .quality-copy {
    min-height: 0;
    padding: 0 4px;
  }

  .quality-copy h2 {
    font-size: 54px;
  }

  .quality-bento {
    height: min(118vw, 520px);
  }

  .quality-bento .mosaic {
    min-height: 0;
    border-radius: 16px;
  }

  .mosaic-source {
    width: 60%;
    height: 48%;
  }

  .mosaic-prep {
    top: 18%;
    width: 50%;
    height: 56%;
  }

  .mosaic-detail {
    left: 10%;
    width: 72%;
    height: 36%;
  }

  .product-focus {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: 88px;
    gap: 58px;
  }

  .focus-stage {
    min-height: 70svh;
  }

  .focus-copy h2 {
    font-size: clamp(72px, 20vw, 92px);
  }

  .focus-details > div {
    grid-template-columns: 92px 1fr;
  }

  .focus-copy .button {
    width: 100%;
    text-align: center;
  }

  .closing-visual {
    height: 76svh;
    min-height: 620px;
  }

  .closing-visual img {
    object-position: 46% 50%;
  }

  .closing-visual > p {
    left: 20px;
    right: 20px;
    bottom: 44px;
    font-size: clamp(54px, 16vw, 72px);
    line-height: 0.88;
    text-wrap: balance;
  }

  .closing-visual > p span,
  .closing-visual > p strong { display: inline; }

  .contact-panel {
    grid-template-columns: 1fr;
    gap: 64px;
    padding-block: 88px 70px;
  }

  .contact-heading h2 {
    font-size: 58px;
  }

  .contact-heading .button {
    width: 100%;
  }

  .contact-details {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 54px;
  }

  .contact-close footer {
    min-height: 340px;
    grid-template-columns: 1fr;
    align-content: end;
    gap: 28px;
    padding-block: 60px 28px;
  }

  .contact-close footer nav {
    justify-self: start;
    justify-content: flex-start;
  }

  .whatsapp-link {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    padding: 11px;
    border-radius: 50%;
  }

  .whatsapp-link span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .hero {
    height: 100vh;
    min-height: 680px;
  }

  .hero-stage,
  .story-copy,
  .story-media,
  .collection-sticky {
    position: relative;
  }

  .collection-runway,
  .ganoderma-story {
    height: auto;
    min-height: 0;
  }

  .collection-sticky {
    height: auto;
  }

  .product-track {
    width: 100%;
    height: auto;
    overflow-x: auto;
  }

  .product-card {
    flex: 0 0 min(84vw, 620px);
    height: 760px;
  }

  .story-macro {
    clip-path: none;
  }

}

/* Keep the confirmed motion composition intact across later legacy breakpoints. */
@media (max-width: 1100px) {
  .collection-runway { height: 100svh; min-height: 700px; }
  .collection-sticky { position: relative; height: 100%; min-height: 0; padding: 10vh var(--gutter) 8vh; }
  .collection-progress { display: block; inset: 8vh var(--gutter) auto; }
  .product-track { position: relative; display: block; width:100%; height:100%; padding:0; overflow:visible; scroll-snap-type:none; }
  .product-card { position:absolute; left:50%; top:7vh; flex:none; width:min(45vw,530px); height:min(66vh,650px); min-height:0; }
  .quality { height:250vh; }
  .quality-stage { position:sticky; top:0; display:block; height:100svh; padding:0; overflow:hidden; }
  .quality-bento { position:absolute; inset:22px; height:auto; }
  .quality-copy { position:absolute; left:clamp(24px,4vw,64px); bottom:7vh; min-height:0; padding:0; }
}

@media (max-width: 760px) {
  .collection-intro { min-height:66vh; padding:10vh 18px 5vh; }
  .collection-runway { height:88svh; min-height:640px; }
  .collection-sticky { padding:8vh 0; }
  .collection-progress { display:block; inset:6vh 18px auto; }
  .product-track { position:relative; display:block; height:100%; padding:0; overflow:visible; }
  .product-card { top:11vh; width:76vw; height:min(60vh,560px); min-height:0; }
  .product-meta { min-height:132px; padding:16px; }
  .product-meta > p { display:none; }
  .collection-slider-controls { bottom:4vh; }
  .quality { height:220vh; }
  .quality-stage { position:sticky; top:0; display:block; height:100svh; padding:0; overflow:hidden; }
  .quality-bento { position:absolute; inset:8px; height:auto; }
  .quality-copy { position:absolute; left:18px; bottom:7vh; max-width:270px; min-height:0; padding:0; }
  .product-focus { margin-top:-100svh; }
}

@media (prefers-reduced-motion: reduce) {
  .quality { height:auto; }
  .quality-stage { position:relative; display:block; height:auto; min-height:100svh; padding:108px 18px 40px; overflow:visible; }
  .quality-copy { position:relative; left:auto; bottom:auto; max-width:none; }
  .quality-bento { position:relative; inset:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; height:auto; margin-top:28px; }
  .quality-bento .mosaic { position:relative; left:auto !important; top:auto !important; width:auto !important; height:190px !important; opacity:1 !important; transform:none !important; }
  .quality-bento .mosaic-prep { grid-column:span 2; height:300px !important; }
  .product-focus { margin-top:0; }
}

/* Quality: CodePen-inspired full-frame mosaic. The whole composition scales as one camera move. */
.quality {
  height: 250vh;
  background: #080909;
}

.quality-stage {
  position: sticky;
  top: 0;
  display: block;
  height: 100svh;
  padding: 0;
  overflow: hidden;
  background: #080909;
}

.quality-copy { display: none; }

.quality-bento {
  position: absolute;
  inset: 0;
  height: auto;
  overflow: hidden;
  transform-origin: 50% 50%;
  will-change: transform;
}

.quality-bento .mosaic {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 3px solid #080909;
  border-radius: 0;
  background: #080909;
  box-shadow: none;
  opacity: 1 !important;
  will-change: auto;
}

.quality-bento .mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}

.quality-bento .mosaic-source { left: 0; top: 0; width: 33.333%; height: 50%; }
.quality-bento .mosaic-detail { left: 33.333%; top: 0; width: 33.334%; height: 25%; }
.quality-bento .mosaic-latte { left: 66.667%; top: 0; width: 33.333%; height: 50%; }
.quality-bento .mosaic-noir { left: 0; top: 50%; width: 33.333%; height: 25%; }
.quality-bento .mosaic-prep { left: 33.333%; top: 25%; width: 33.334%; height: 50%; }
.quality-bento .mosaic-macro { left: 66.667%; top: 50%; width: 33.333%; height: 50%; }
.quality-bento .mosaic-cacao { left: 0; top: 75%; width: 33.333%; height: 25%; }
.quality-bento .mosaic-pour { left: 33.333%; top: 75%; width: 33.334%; height: 25%; }

.product-focus {
  position: relative;
  z-index: 8;
  margin-top: -100svh;
}

@media (max-width: 760px) {
  .quality { height: 220vh; }
  .quality-bento { inset: 0; }
  .product-focus { margin-top: -100svh; }
}

@media (prefers-reduced-motion: reduce) {
  .quality { height: auto; }
  .quality-stage { position: relative; height: auto; min-height: 0; padding: 0; overflow: visible; }
  .quality-bento { position: relative; inset: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; height: auto; overflow: visible; transform: none !important; }
  .quality-bento .mosaic,
  .quality-bento .mosaic-prep { position: relative; left: auto !important; top: auto !important; width: auto !important; height: 190px !important; grid-column: auto; }
  .quality-bento .mosaic-prep { grid-column: span 2; height: 300px !important; }
  .product-focus { margin-top: 0; }
}

/* Customer review notes sourced from the supplied shop-review screenshots. */
.review-preview {
  overflow: hidden;
  padding: 15vh 0 12vh;
  color: var(--ink);
  background: var(--paper);
}

.certification-marquee {
  width: 100%;
  margin: 0 0 clamp(54px, 7vh, 88px);
  overflow: hidden;
}

.certification-note {
  max-width: 720px;
  margin: calc(clamp(54px, 7vh, 88px) * -0.62) auto clamp(54px, 7vh, 84px);
  padding-inline: var(--gutter);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.065em;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}

.certification-marquee-track {
  display: flex;
  width: max-content;
  animation: certification-marquee-left 32s linear infinite;
  will-change: transform;
}

.certification-marquee-group {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(32px, 5vw, 84px);
  padding: 0 clamp(16px, 3vw, 48px);
}

.certification-mark {
  display: block;
  flex: 0 0 180px;
  width: 180px;
  height: 76px;
  filter: grayscale(1) contrast(0.75) brightness(0.88);
  mix-blend-mode: multiply;
  object-fit: contain;
  object-position: center;
  opacity: 0.56;
}

.certification-mark-halal {
  box-sizing: border-box;
  padding: 4px;
}

.certification-mark-wide {
  flex-basis: 196px;
  width: 196px;
  height: 80px;
}

@keyframes certification-marquee-left {
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .certification-marquee-track { animation: none; }
}

/* 2026-08-28 client follow-up: keep the marked story headline lines clear and
   give the supplied Halal mark a small safe inset so its outer ring is not
   visually clipped at the image box edge. */
#ganoderma .story-copy h2 {
  line-height: 0.98;
}

@media (max-width: 760px) {
  #ganoderma .story-copy h2 {
    line-height: 1;
  }

  .certification-mark-halal {
    padding: 3px;
  }
}

.review-preview-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.58fr);
  gap: 48px;
  align-items: end;
  padding: 0 var(--gutter) 8vh;
}

.review-preview-heading h2 {
  grid-column: 1;
  margin: 16px 0 0;
  font-family: var(--display);
  font-size: clamp(42px, 4.2vw, 68px);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.065em;
}

.review-preview-heading > p:last-child {
  grid-column: 2;
  max-width: 420px;
  margin: 0 0 7px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.65;
}

.review-viewport { overflow: hidden; }

.review-track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding: 0 var(--gutter);
  will-change: transform;
}

.review-card {
  display: flex;
  flex: 0 0 clamp(250px, 21.4vw, 330px);
  min-height: clamp(420px, 37vw, 550px);
  flex-direction: column;
  align-items: center;
  padding: clamp(32px, 3vw, 52px) clamp(22px, 2.2vw, 38px) 30px;
  border-radius: 34px;
  background: #f5f0e8;
  text-align: center;
}

.review-moment {
  margin: 0;
  color: var(--oxblood);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.review-card h3 {
  margin: clamp(42px, 4vw, 66px) 0 20px;
  font-family: var(--display);
  font-size: clamp(30px, 2.25vw, 40px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.review-card > p:not(.review-moment) {
  max-width: 290px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.review-person {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: auto;
  color: var(--ink-soft);
  font-size: 13px;
}

.review-avatar {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 18px;
  color: white;
  background: var(--wine);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.review-controls { display: none; }

.review-controls > button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: white;
  background: var(--oxblood);
  font-size: 22px;
  cursor: pointer;
}

.review-dots { display: flex; gap: 8px; }

.review-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(112, 27, 40, 0.2);
  cursor: pointer;
}

.review-dots button[aria-current="true"] { background: var(--oxblood); }

@media (max-width: 760px) {
  .brand-footer {
    width: 136px;
    height: 38px;
  }

  .review-preview { padding-block: 94px 72px; }
  .review-preview-heading { grid-template-columns: 1fr; gap: 0; padding: 0 18px 48px; }
  .review-preview-heading h2 { grid-column: auto; font-size: 46px; line-height: 0.92; }
  .review-preview-heading > p:last-child { grid-column: auto; margin-top: 30px; font-size: 14px; }
  .review-viewport {
    overflow-x: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    touch-action: pan-y;
  }
  .review-viewport::-webkit-scrollbar { display: none; }
  .review-viewport.is-dragging { cursor: grabbing; user-select: none; }
  .review-track { gap: 12px; padding: 0 18px; }
  .review-card { flex-basis: min(78vw, 320px); min-height: 450px; border-radius: 28px; }
  .review-card.is-review-clone { display: flex; }
  .review-card h3 { font-size: 36px; }
  .review-controls {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
    padding-inline: 18px;
  }
}

@media (max-width: 760px) {
  .collection-intro > p:last-child {
    justify-self: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .review-viewport { overflow-x: auto; }
  .review-track { transform: none !important; }
  .review-card.is-review-clone { display: none; }
  .review-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 28px; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .review-viewport {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;
    touch-action: pan-x pan-y;
  }

  .review-card { scroll-snap-align: center; }
}

/*
 * Chapter handoffs must never consume the stage they are meant to reveal.
 * Only the chapters with a real held canvas get a small overlap. Quality keeps
 * its separately defined, full-screen Product Focus cover above. Reading-led
 * modules stay in normal document flow so their full content remains visible.
 */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .collection,
  .ganoderma-story {
    position: relative;
  }

  /* The Hero and Collection stages are both held long enough for this reveal. */
  .collection { z-index: 9; margin-top: -35svh; }

  /* The deck is a full viewport, so the ingredient story starts only after its controls remain usable. */
  .ganoderma-story { z-index: 12; margin-top: 0; }

  .collection-intro {
    min-height: 44svh;
    padding: calc(var(--header-h) + 24px) var(--gutter) 4vh;
  }

  .collection-intro h2 {
    font-size: clamp(62px, 7.8vw, 132px);
    line-height: 0.84;
    letter-spacing: -0.06em;
  }

  .collection-intro > p:last-child { margin-top: 22px; }

  .collection-runway {
    height: 100svh;
    min-height: 700px;
  }

  .collection-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    padding: 4vh var(--gutter) 7vh;
  }

  .collection-progress { display: none; }

  .product-card {
    top: 2vh;
    height: min(80vh, 690px);
  }

  .collection-slider-controls { bottom: 2vh; }
}

/* Mobile-only spatial correction: preserve the approved desktop composition. */
@media (max-width: 760px) {
  .hero-copy {
    bottom: 196px;
  }

  .collection-slider-controls {
    bottom: 4vh;
  }

  .ganoderma-story {
    display: flex;
    flex-direction: column;
  }

  .ganoderma-story .story-media {
    order: -1;
    min-height: 70svh;
  }

  .ganoderma-story .story-copy {
    min-height: 0;
    padding: 76px 24px 88px;
  }

  .closing-visual > p {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(calc(100% - 40px), 520px);
    transform: translate(-50%, -50%);
    text-align: center;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .collection-intro {
    min-height: 44svh;
    padding: calc(var(--header-h) + 28px) 18px 3vh;
  }

  .collection-intro h2 {
    font-size: clamp(44px, 12.4vw, 64px);
    line-height: 0.86;
    letter-spacing: -0.06em;
  }

  .collection-intro > p:last-child { margin-top: 18px; }

  .collection-runway {
    height: 100svh;
    min-height: 720px;
  }

  .collection-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    padding: 4vh 0 7vh;
  }

  .collection-progress { display: none; }

  .product-card { top: 2vh; }
  .collection-slider-controls { bottom: 3vh; }

  /* Hold the closing image at the viewport top, then let the contact panel
     arrive from below and cover it as one continuous mobile handoff. */
  .closing-visual {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 100svh;
    min-height: 100svh;
  }

  .contact-panel {
    position: relative;
    z-index: 2;
    background: var(--paper);
  }
}

/* Mobile-only refinement: preserve the approved desktop composition. */
@media (max-width: 760px) {
  /* The header's GSAP transform creates a containing block. Give its menu an
     explicit viewport-sized canvas instead of relying on `inset: 0`. */
  .mobile-menu {
    inset: auto;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100vw;
    min-height: 100svh;
    height: 100svh;
    padding: calc(var(--header-h) + 44px) 20px 44px;
  }

  /* Anchor destinations must begin below the persistent mobile header. */
  #collection,
  #ganoderma,
  #quality,
  #product-focus,
  #contact {
    scroll-margin-top: calc(var(--header-h) + 12px);
  }

  /* Keep the deck visually connected to its direct controls through release. */
  .collection-runway {
    height: 78svh;
    min-height: 600px;
  }

  .collection-sticky {
    height: 100%;
    padding: 2vh 0 2vh;
  }

  .product-card {
    top: 2vh;
    height: auto;
    grid-template-rows: auto auto;
  }

  .product-visual {
    aspect-ratio: 1 / 1;
  }

  .product-meta {
    min-height: 128px;
    padding: 14px;
  }

  .collection-slider-controls { bottom: 1vh; }

  /* Product imagery is the next panel: it should cover Quality without paper
     appearing between the held mosaic and the incoming module. */
  .product-focus { padding-top: 0; }
}

/* Local mobile refinement from the July review pass. */
@media (max-width: 760px) {
  /* Keep the mosaic tiles closer to square on narrow screens; the scroll zoom
     still treats the bento as one camera move. */
  .quality-bento {
    position: absolute;
    inset: 12px 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
    width: auto;
    height: auto;
    gap: 4px;
    overflow: visible;
  }

  .quality-bento .mosaic,
  .quality-bento .mosaic-prep {
    position: relative;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .quality-bento .mosaic-source { grid-area: 1 / 1; }
  .quality-bento .mosaic-detail { grid-area: 1 / 2; }
  .quality-bento .mosaic-latte { grid-area: 2 / 1; }
  .quality-bento .mosaic-noir { grid-area: 2 / 2; }
  .quality-bento .mosaic-prep { grid-area: 3 / 1 / 4 / 3; }
  .quality-bento .mosaic-macro { grid-area: 4 / 1; }
  .quality-bento .mosaic-cacao { grid-area: 4 / 2; }
  .quality-bento .mosaic-pour { grid-area: 5 / 1 / 6 / 3; }

  /* On mobile the product story reads first, then reveals its square image. */
  .product-focus {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 108px 18px 72px;
    /* Let the held Preparation frame finish its focus before Product Focus
       enters from below; the desktop overlap remains unchanged. */
    margin-top: -38svh;
  }

  .product-focus .focus-copy { display: contents; }
  .product-focus .focus-copy > .eyebrow { order: 1; margin-bottom: 18px; }
  .product-focus .focus-copy > h2 { order: 2; margin-bottom: 16px; }
  .product-focus .focus-copy > .focus-lead { order: 3; margin-bottom: 26px; }
  .product-focus .focus-stage {
    order: 4;
    width: 100%;
    min-height: 0;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 0 34px;
    border-radius: 16px;
  }
  .product-focus .focus-copy > .focus-details { order: 5; }
  .product-focus .focus-copy > .button { order: 6; }
  .product-focus .focus-copy > .focus-note { order: 7; }

  .product-card,
  .review-card { border-radius: 16px; }

  .product-meta > p.product-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    grid-column: 1 / -1;
    grid-row: 3;
    color: var(--product-accent);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  /* Ingredient labels sit immediately above the product title on narrow cards;
     traits follow the title instead of pushing it below the labels. */
  .product-meta > .product-ingredient-callout {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .product-meta > div:not(.product-ingredient-callout) {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  .product-meta > a.product-buy {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
  }

  .product-traits span::after { content: " ·"; }
  .product-traits span:last-child::after { content: ""; }

  /* Numbered format markers keep this guide distinct from customer testimonials. */
  .review-avatar {
    color: white;
    background: var(--wine);
    box-shadow: none;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .product-focus {
    padding-top: 86px;
  }
}

/* Final desktop product-card pass: five layered products stay readable. */
@media (min-width: 761px) {
  .hero-bg {
    object-position: 50% 68%;
  }

  .product-card {
    top: 4vh;
    width: min(20vw, 270px);
    height: auto;
    min-height: 0;
    grid-template-rows: auto 216px;
    border-radius: 20px;
  }

  .product-visual {
    aspect-ratio: 1 / 1;
  }

  .product-meta {
    min-height: 216px;
    height: 216px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .product-meta h3 {
    font-size: clamp(28px, 2.35vw, 38px);
  }

  .product-meta > p {
    font-size: 11px;
    line-height: 1.35;
  }

  .product-meta > p.product-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 0 5px;
    color: var(--product-accent);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .product-meta > p.product-traits span::after {
    content: " ·";
  }

  .product-meta > p.product-traits span:last-child::after {
    content: "";
  }

  .product-meta > p:not(.product-traits) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .product-meta a.product-buy {
    min-width: 110px;
    min-height: 42px;
    align-self: center;
    margin-top: auto;
  }

  .product-card[data-collection-slot="0"] {
    filter: none;
  }

  .product-card[data-collection-slot="-1"],
  .product-card[data-collection-slot="1"] {
    filter: blur(2px);
  }

  .product-card[data-collection-slot="-2"],
  .product-card[data-collection-slot="2"] {
    filter: blur(5px);
  }

  .collection-slider-controls {
    top: 45%;
    left: var(--gutter);
    right: var(--gutter);
    bottom: auto;
    width: auto;
    transform: none;
    justify-content: space-between;
    pointer-events: none;
  }

  .collection-slider-controls button {
    pointer-events: auto;
  }

}

/* Card references are unnecessary once the slider controls provide direction. */
.product-index {
  display: none;
}

@media (max-width: 760px) {
  .hero-bg {
    object-position: 50% 50%;
  }
}

/* The product stage is a stable square on every screen size. */
.focus-stage {
  width: 100%;
  min-height: 0;
  height: auto;
  aspect-ratio: 1 / 1;
  align-self: start;
  border-radius: 20px;
}

.focus-images img,
.focus-images img.is-active {
  transform: translateX(0) scale(1);
}

/* Buttons on image-led dark sections use the paper tone for legibility. */
.hero .button-light,
.ganoderma-story .button-outline {
  color: var(--ink);
  border-color: var(--paper);
  background: var(--paper);
}

.hero .button-light:hover,
.hero .button-light:focus-visible,
.ganoderma-story .button-outline:hover,
.ganoderma-story .button-outline:focus-visible {
  color: var(--ink);
  border-color: white;
  background: white;
}

/* Closing holds as a full-screen visual until the contact panel covers it. */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .closing-visual {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 100svh;
    min-height: 100svh;
  }

  .contact-panel,
  .contact-close footer {
    position: relative;
    z-index: 2;
    background: var(--paper);
  }

  .contact-close footer {
    background: var(--oxblood);
  }
}

@media (max-width: 760px) {
  .collection-slider-controls {
    bottom: 7vh;
  }

  .hero-copy {
    bottom: 174px;
  }

  .collection-intro h2 {
    font-size: clamp(38px, 10.8vw, 56px);
  }

  .certification-marquee-group {
    gap: 22px;
    padding-inline: 12px;
  }

  .certification-mark {
    flex-basis: 96px;
    width: 96px;
    height: 44px;
  }

  .certification-mark-wide {
    flex-basis: 112px;
    width: 112px;
    height: 46px;
  }

  .review-preview-heading {
    justify-items: center;
    text-align: center;
  }

  .review-preview-heading > p:last-child {
    max-width: 340px;
  }

  /* Keep the supplied mobile Hero art perfectly held until Collection rises
     above it. The outer section gives the held stage one full viewport for
     the handoff instead of releasing it at the natural document boundary. */
  .hero {
    z-index: 1;
    height: 200svh;
    min-height: 0;
  }

  .hero-stage {
    height: 100svh;
    min-height: 100svh;
  }

  .hero-media {
    transform: none !important;
    will-change: auto;
  }

  .collection {
    position: relative;
    z-index: 2;
    margin-top: -100svh;
  }

  /* Hold the Ganoderma canvas for one full viewport. The text starts only
     after the macro-to-pour transition has reached its final image, then
     rises as the next opaque panel above the held canvas. */
  .ganoderma-story {
    display: flex;
    flex-direction: column;
    height: 200svh;
    min-height: 0;
  }

  .ganoderma-story .story-media {
    position: sticky;
    top: 0;
    z-index: 1;
    order: -1;
    height: 100svh;
    min-height: 100svh;
  }

  .ganoderma-story .story-copy {
    position: relative;
    z-index: 2;
    min-height: 100svh;
    padding: 76px 24px 88px;
    background: var(--wine-deep);
  }

  /* The featured product reads as one centred editorial module on phones. */
  .product-focus .focus-copy > .eyebrow,
  .product-focus .focus-copy > h2,
  .product-focus .focus-copy > .focus-lead,
  .product-focus .focus-copy > .focus-details,
  .product-focus .focus-copy > .focus-note {
    width: 100%;
    text-align: center;
  }

  .product-focus .focus-copy > .focus-details > div {
    grid-template-columns: 1fr;
    gap: 8px;
    justify-items: center;
    text-align: center;
  }

  .product-focus .focus-copy > .button {
    justify-self: center;
    width: auto;
    min-width: 178px;
  }

  /* Retain the footer's breathing room while removing the oversized blank
     band above the brand and navigation on phones. */
  .contact-close footer {
    min-height: 280px;
    gap: 24px;
    padding-block: 40px 28px;
  }
}

/* Latest mobile-only review pass. Desktop layout remains unchanged. */
@media (max-width: 760px) {
  /* Move the complete Hero copy group toward the lower image area. */
  .hero-copy {
    bottom: 128px;
  }

  /* Mobile product browsing is touch-led; remove the redundant arrow controls. */
  .collection-slider-controls {
    display: none;
  }

  /* Hold the resolved second Ganoderma image before the copy chapter rises over it. */
  .ganoderma-story {
    height: 260svh;
  }

  .ganoderma-story .story-copy {
    margin-top: 60svh;
  }

  /* Mobile headline sizes requested for the Hero, ingredient story and product focus. */
  .hero-copy h1 {
    max-width: 100%;
    font-size: 50px;
    line-height: 0.86;
  }

  .hero-copy h1 span {
    display: inline;
    width: auto;
  }

  .hero-copy h1 span + span::before {
    content: " ";
  }

  .story-copy h2,
  .product-focus .focus-copy > h2 {
    font-size: 46px;
    line-height: 0.9;
  }
}

/* 2026-08-09 UI/UX round 1: ingredient chapters become image-led stories. */
.ingredient-module {
  min-height: 100svh;
  scroll-margin-top: var(--header-h);
  isolation: isolate;
}

.ingredient-module-copy {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ingredient-module-copy::before {
  position: absolute;
  z-index: -1;
  right: -0.05em;
  bottom: -0.21em;
  color: rgba(255, 255, 255, 0.045);
  font-family: var(--display);
  font-size: clamp(240px, 28vw, 520px);
  line-height: 0.7;
  letter-spacing: -0.08em;
  pointer-events: none;
}

.ingredient-module-ganoderma .ingredient-module-copy::before { content: "01"; }
.ingredient-module-cordyceps .ingredient-module-copy::before {
  content: "02";
  color: rgba(56, 15, 24, 0.045);
}

.ingredient-module-index {
  display: grid;
  grid-template-columns: auto minmax(28px, 88px) auto;
  gap: 12px;
  align-items: center;
  width: fit-content;
  margin: 0 0 clamp(40px, 7vh, 86px);
  color: rgba(255, 255, 255, 0.54);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.ingredient-module-index i {
  display: block;
  height: 1px;
  background: currentColor;
  opacity: 0.58;
}

.ingredient-module-cordyceps .ingredient-module-index { color: rgba(56, 15, 24, 0.54); }

.ingredient-module-copy h2 span {
  display: block;
  will-change: transform, opacity;
}

.ingredient-module-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: fit-content;
  min-height: 48px;
  margin-top: clamp(34px, 5vh, 58px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.42);
  color: white;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: gap 0.24s ease, border-color 0.24s ease;
}

.ingredient-module-link:hover,
.ingredient-module-link:focus-visible {
  gap: 30px;
  border-color: currentColor;
}

.ingredient-module-cordyceps .ingredient-module-link {
  color: var(--oxblood);
  border-color: rgba(56, 15, 24, 0.38);
}

.ingredient-module-media {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--ink);
}

.ingredient-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}

.ingredient-scene::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.ingredient-visual,
.ingredient-cordyceps-cutout {
  position: absolute;
  margin: 0;
  will-change: transform, opacity;
}

.ingredient-visual img,
.ingredient-cordyceps-cutout img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ingredient-visual-primary {
  z-index: 0;
  inset: 0;
}

.ingredient-visual-primary img {
  position: absolute;
  inset: 0;
  filter: saturate(0.76) contrast(0.98);
}

.ingredient-scene-ganoderma::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(17, 9, 10, 0.06), rgba(17, 9, 10, 0.62)),
    linear-gradient(90deg, rgba(17, 9, 10, 0.2), transparent 48%);
  pointer-events: none;
}

.ingredient-visual-macro {
  z-index: 2;
  top: 8%;
  right: 7%;
  width: min(43%, 430px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  box-shadow: 0 28px 70px rgba(12, 7, 8, 0.28);
}

.ingredient-visual-macro img { filter: saturate(0.9) contrast(1.04); }

.ingredient-visual-product {
  z-index: 3;
  left: 7%;
  bottom: 8%;
  width: min(24%, 230px);
  aspect-ratio: 1;
  overflow: hidden;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  background: rgba(246, 238, 226, 0.92);
  box-shadow: 0 24px 54px rgba(12, 7, 8, 0.32);
  transform: rotate(-5deg);
}

.ingredient-visual-product img {
  object-fit: contain;
  border-radius: 10px;
}

.ingredient-scene-cordyceps {
  background: var(--paper-warm);
}

.ingredient-scene-cordyceps::after {
  border: 0;
}

.ingredient-scene-cordyceps .ingredient-scene-word {
  color: rgba(56, 15, 24, 0.065);
}

.ingredient-scene-cordyceps .ingredient-cordyceps-cutout {
  filter: drop-shadow(0 30px 42px rgba(56, 15, 24, 0.2));
}

.ingredient-scene-cordyceps .ingredient-visual-latte,
.ingredient-scene-cordyceps .ingredient-visual-cocoa {
  border-color: rgba(56, 15, 24, 0.16);
  box-shadow: 0 24px 52px rgba(56, 15, 24, 0.2);
}

.ingredient-scene-word {
  position: absolute;
  z-index: 0;
  top: 13%;
  left: 50%;
  color: rgba(255, 248, 238, 0.085);
  font-family: var(--display);
  font-size: clamp(96px, 11vw, 210px);
  line-height: 0.76;
  letter-spacing: -0.08em;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.ingredient-cordyceps-cutout {
  z-index: 3;
  left: 13%;
  right: 13%;
  bottom: -10%;
  filter: drop-shadow(0 34px 48px rgba(10, 4, 5, 0.46));
}

.ingredient-cordyceps-cutout img {
  height: auto;
  object-fit: contain;
}

.ingredient-visual-latte,
.ingredient-visual-cocoa {
  z-index: 2;
  width: min(23%, 230px);
  aspect-ratio: 1;
  overflow: hidden;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  background: rgba(246, 238, 226, 0.92);
  box-shadow: 0 26px 58px rgba(10, 4, 5, 0.36);
}

.ingredient-visual-latte { top: 15%; left: 6%; transform: rotate(-7deg); }
.ingredient-visual-cocoa { right: 6%; bottom: 10%; transform: rotate(7deg); }

.ingredient-visual-latte img,
.ingredient-visual-cocoa img {
  object-fit: contain;
  border-radius: 10px;
}

.ingredient-scene-caption {
  position: absolute;
  z-index: 6;
  right: clamp(18px, 3vw, 44px);
  bottom: clamp(18px, 3vw, 40px);
  display: grid;
  gap: 5px;
  margin: 0;
  color: white;
  text-align: right;
  text-shadow: 0 2px 20px rgba(10, 4, 5, 0.48);
}

.ingredient-scene-caption span {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ingredient-scene-caption strong {
  font-family: var(--display);
  font-size: clamp(25px, 2.8vw, 42px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.ingredient-scene-cordyceps .ingredient-scene-caption {
  top: clamp(20px, 3vw, 42px);
  right: clamp(18px, 3vw, 44px);
  bottom: auto;
  color: var(--oxblood);
  text-shadow: none;
}

@media (max-width: 760px) {
  .ingredient-module {
    display: flex;
    min-height: 0;
  }

  .ingredient-module-media {
    order: 1;
    width: 100%;
    height: min(76svh, 720px);
    min-height: 520px;
  }

  .ingredient-module-copy {
    order: 2;
    min-height: 0;
    padding: 70px 24px 78px;
  }

  .ingredient-module-copy::before {
    right: -0.08em;
    bottom: -0.12em;
    font-size: 78vw;
  }

  .ingredient-module-index {
    margin-bottom: 50px;
  }

  .ingredient-module-copy h2 {
    margin: 18px 0 26px;
    font-size: clamp(48px, 13.5vw, 66px);
    line-height: 0.86;
  }

  .ingredient-module-copy > p:not(.eyebrow, .ingredient-module-index) {
    font-size: 16px;
    line-height: 1.65;
  }

  .ingredient-module-facts {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 34px;
  }

  .ingredient-module-facts span {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 9px;
  }

  .ingredient-module-cordyceps .ingredient-module-facts span {
    border-color: rgba(56, 15, 24, 0.13);
  }

  .ingredient-module-link {
    min-height: 48px;
    margin-top: 30px;
  }

  .ingredient-visual-macro {
    top: 8%;
    right: 5%;
    width: 46%;
  }

  .ingredient-visual-product {
    left: 6%;
    bottom: 7%;
    width: 31%;
  }

  .ingredient-scene-caption {
    right: 18px;
    bottom: 18px;
  }

  .ingredient-scene-caption strong { font-size: 28px; }

  .ingredient-scene-word {
    top: 13%;
    font-size: 29vw;
  }

  .ingredient-cordyceps-cutout {
    left: 4%;
    right: 4%;
    bottom: -2%;
  }

  .ingredient-visual-latte,
  .ingredient-visual-cocoa {
    width: 30%;
    padding: 6px;
  }

  .ingredient-visual-latte { top: 14%; left: 4%; }
  .ingredient-visual-cocoa { right: 4%; bottom: 9%; }
}

@media (max-width: 390px) {
  .ingredient-module-media {
    height: 70svh;
    min-height: 500px;
  }

  .ingredient-module-copy { padding-inline: 20px; }
}

@media (max-width: 760px) {
  body.ingredient-chapter-visible .whatsapp-link {
    opacity: 0.42;
    pointer-events: auto;
  }
}

/* 2026-08-11 correction: Ganoderma now uses the same ingredient-led
   cutout composition as Cordyceps, with product cards kept behind the subject. */
.ingredient-scene-ganoderma {
  background:
    radial-gradient(circle at 52% 64%, rgba(138, 67, 43, 0.46), transparent 30%),
    radial-gradient(circle at 16% 12%, rgba(178, 138, 85, 0.18), transparent 26%),
    linear-gradient(145deg, #241014 0%, #3b1119 58%, #17090d 100%);
}

.ingredient-scene-ganoderma::before {
  background:
    linear-gradient(180deg, rgba(17, 9, 10, 0.04), rgba(17, 9, 10, 0.48)),
    linear-gradient(90deg, rgba(17, 9, 10, 0.18), transparent 48%);
}

.ingredient-module-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ingredient-ganoderma-cutout {
  position: absolute;
  z-index: 3;
  left: 13%;
  right: 13%;
  bottom: -10%;
  margin: 0;
  filter: drop-shadow(0 34px 48px rgba(10, 4, 5, 0.46));
  will-change: transform, opacity;
}

.ingredient-ganoderma-cutout img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.ingredient-visual-ganoderma-noir,
.ingredient-visual-ganoderma-latte,
.ingredient-visual-ganoderma-cocoa {
  z-index: 2;
  width: min(23%, 230px);
  aspect-ratio: 1;
  overflow: hidden;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  background: rgba(246, 238, 226, 0.92);
  box-shadow: 0 26px 58px rgba(10, 4, 5, 0.36);
}

.ingredient-visual-ganoderma-noir {
  top: 14%;
  left: 6%;
  transform: rotate(-7deg);
}

.ingredient-visual-ganoderma-latte {
  top: 8%;
  right: 7%;
  transform: rotate(6deg);
}

.ingredient-visual-ganoderma-cocoa {
  right: 6%;
  bottom: 10%;
  transform: rotate(7deg);
}

.ingredient-visual-ganoderma-noir img,
.ingredient-visual-ganoderma-latte img,
.ingredient-visual-ganoderma-cocoa img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

.focus-details strong {
  min-width: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.focus-disclaimer {
  max-width: 620px;
  margin: 8px 0 0;
  color: rgba(65, 52, 51, 0.72);
  font-size: 11px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .ingredient-module-facts {
    grid-template-columns: 1fr;
  }

  .ingredient-ganoderma-cutout {
    left: 4%;
    right: 4%;
    bottom: -2%;
  }

  .ingredient-visual-ganoderma-noir,
  .ingredient-visual-ganoderma-latte,
  .ingredient-visual-ganoderma-cocoa {
    width: 30%;
    padding: 6px;
  }

  .ingredient-visual-ganoderma-noir {
    top: 14%;
    left: 4%;
  }

  .ingredient-visual-ganoderma-latte {
    top: 8%;
    right: 4%;
  }

  .ingredient-visual-ganoderma-cocoa {
    right: 4%;
    bottom: 9%;
  }

  .focus-disclaimer {
    width: 100%;
    text-align: center;
  }

  .product-focus .focus-copy > .focus-disclaimer {
    order: 8;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ingredient-module-copy h2 span,
  .ingredient-visual,
  .ingredient-cordyceps-cutout,
  .ingredient-ganoderma-cutout {
    will-change: auto;
  }
}

/* 2026-08-11 official alignment: make ingredient selling points scannable. */
.ingredient-points {
  display: grid;
  gap: 0;
  max-width: 620px;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  list-style: none;
}

.ingredient-document-section {
  max-width: 620px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(56, 15, 24, 0.16);
}

/* This full client-supplied chapter must size from its copy. The earlier
   image-chapter mask is intentionally retained for Ganoderma only. */
.ingredient-module-cordyceps .ingredient-module-copy {
  min-height: max-content;
  overflow: visible;
}

.ingredient-module-cordyceps .ingredient-module-copy::before {
  right: 0;
  bottom: 0;
}

.ingredient-reference-grid {
  display: grid;
  gap: 12px;
  max-width: 620px;
  margin-top: 24px;
}

.ingredient-reference-grid .ingredient-document-section {
  margin-top: 0;
  padding: 18px;
  border: 1px solid rgba(56, 15, 24, 0.15);
  background: rgba(255, 250, 239, 0.3);
}

.ingredient-document-section h3,
.ingredient-subheading {
  margin: 0 0 10px;
  color: var(--oxblood);
  font-family: var(--mono);
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
}

.ingredient-document-section p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.62;
}

.ingredient-document-section-cordigard {
  max-width: 620px;
  margin-top: 12px;
  padding: 22px;
  border: 1px solid rgba(56, 15, 24, 0.16);
  background: rgba(255, 250, 239, 0.42);
}

.ingredient-term-label {
  margin-top: 20px !important;
  font-family: var(--mono);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.5 !important;
  text-transform: uppercase;
}

.ingredient-term-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.ingredient-term-list li {
  padding: 8px 10px;
  border: 1px solid rgba(56, 15, 24, 0.15);
  border-radius: 999px;
  background: rgba(255, 250, 239, 0.42);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.35;
}

.ingredient-subheading {
  max-width: 620px;
  margin-top: 30px;
}

.ingredient-subheading + .ingredient-points {
  margin-top: 0;
}

@media (min-width: 1180px) {
  .ingredient-reference-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: stretch;
  }
}

@media (min-width: 900px) {
  .ingredient-module-cordyceps .ingredient-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
  }

  .ingredient-module-cordyceps .ingredient-points li {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 4px;
  }
}

.ingredient-points li {
  display: grid;
  grid-template-columns: minmax(104px, 0.32fr) minmax(0, 1fr);
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.ingredient-points span,
.ingredient-points strong {
  min-width: 0;
}

.ingredient-points span {
  color: rgba(255, 255, 255, 0.56);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
}

.ingredient-points strong {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.ingredient-module-cordyceps .ingredient-points {
  border-color: rgba(56, 15, 24, 0.22);
}

.ingredient-module-cordyceps .ingredient-points li {
  border-color: rgba(56, 15, 24, 0.13);
}

.ingredient-module-cordyceps .ingredient-points span {
  color: rgba(56, 15, 24, 0.58);
}

.ingredient-module-cordyceps .ingredient-points strong {
  color: var(--ink-soft);
}

.ingredient-claims-note {
  max-width: 620px !important;
  margin-top: 16px !important;
  color: rgba(255, 255, 255, 0.58) !important;
  font-family: var(--mono);
  font-size: 9px !important;
  letter-spacing: 0.02em;
  line-height: 1.55 !important;
}

.ingredient-module-cordyceps .ingredient-claims-note {
  color: rgba(56, 15, 24, 0.64) !important;
}

@media (max-width: 760px) {
  .ingredient-document-section {
    margin-top: 24px;
    padding-top: 20px;
  }

  .ingredient-document-section-cordigard {
    padding: 18px;
  }

  .ingredient-document-section p {
    font-size: 15px;
  }

  .ingredient-term-list li {
    font-size: 13px;
  }

  .ingredient-points {
    margin-top: 24px;
  }

  .ingredient-points li {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 12px 0;
  }

  .ingredient-points strong {
    font-size: 13px;
  }
}

/* 2026-08-12 ingredient sticky correction: keep the subject centred while
   the longer copy passes beside it, then let the next chapter cover it. */
.ingredient-module-ganoderma {
  z-index: 4;
}

.ingredient-module-cordyceps {
  z-index: 6;
}

.ingredient-module-copy {
  min-height: calc(100svh - var(--header-h));
}

.ingredient-module-media {
  position: sticky;
  z-index: 1;
  top: var(--header-h);
  align-self: start;
  height: calc(100svh - var(--header-h));
  min-height: 0;
}

.ingredient-ganoderma-cutout,
.ingredient-cordyceps-cutout {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(74%, 560px);
  transform: translate(-50%, -50%);
}

.ingredient-ganoderma-cutout img,
.ingredient-cordyceps-cutout img {
  will-change: transform;
}

.ingredient-visual-ganoderma-noir {
  top: 10%;
  right: auto;
  left: 7%;
}

.ingredient-visual-ganoderma-latte {
  top: 39%;
  right: 7%;
}

.ingredient-visual-ganoderma-cocoa {
  right: auto;
  bottom: 10%;
  left: 10%;
}

.ingredient-visual-latte {
  top: 12%;
  left: 7%;
}

.ingredient-visual-cocoa {
  right: 7%;
  bottom: 11%;
}

@media (max-width: 760px) {
  .ingredient-module-copy {
    min-height: 0;
  }

  .ingredient-module-media {
    position: relative;
    top: auto;
    align-self: stretch;
    height: min(76svh, 720px);
    min-height: 520px;
  }

  .ingredient-ganoderma-cutout,
  .ingredient-cordyceps-cutout {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 78%;
    max-width: 330px;
    transform: translate(-50%, -50%);
  }

  .ingredient-visual-ganoderma-noir {
    top: 9%;
    left: 4%;
  }

  .ingredient-visual-ganoderma-latte {
    top: 39%;
    right: 4%;
  }

  .ingredient-visual-ganoderma-cocoa {
    right: auto;
    bottom: 8%;
    left: 6%;
  }

  .ingredient-visual-latte {
    top: 12%;
    left: 4%;
  }

  .ingredient-visual-cocoa {
    right: 4%;
    bottom: 9%;
  }
}

/* 2026-08-12 axis correction: centre the ingredient vertically only.
   Keep each subject on the inner side of its split media column so the
   editorial left/right composition is not replaced by a two-axis centre. */
.ingredient-ganoderma-cutout,
.ingredient-cordyceps-cutout {
  top: 50%;
  right: auto;
  bottom: auto;
  width: min(74%, 560px);
  transform: translateY(-50%);
}

.ingredient-ganoderma-cutout {
  left: 7%;
}

.ingredient-cordyceps-cutout {
  right: 7%;
  left: auto;
}

@media (max-width: 760px) {
  .ingredient-ganoderma-cutout,
  .ingredient-cordyceps-cutout {
    top: 50%;
    width: 78%;
    max-width: 330px;
    transform: translateY(-50%);
  }

  .ingredient-ganoderma-cutout {
    left: 8%;
    right: auto;
  }

  .ingredient-cordyceps-cutout {
    right: 8%;
    left: auto;
  }
}

/* 2026-08-12 final responsive pass: the same header system now serves Home,
   product and inner pages at tablet width instead of switching layouts only
   on selected routes. */
@media (min-width: 761px) and (max-width: 1100px) {
  .desktop-nav,
  .header-action {
    display: none;
  }

  .site-header {
    grid-template-columns: 1fr auto;
  }

  .site-header::after {
    inset-inline: var(--gutter);
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid currentColor;
    color: inherit;
    background: transparent;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .menu-toggle i,
  .menu-toggle i::after {
    display: block;
    width: 16px;
    height: 1px;
    background: currentColor;
    transition: transform 0.3s ease;
  }

  .menu-toggle i { position: relative; }
  .menu-toggle i::after { content: ""; position: absolute; top: 5px; }
  .menu-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] i::after { top: 0; transform: rotate(90deg); }

  .mobile-menu {
    position: fixed;
    z-index: -1;
    inset: 0;
    display: grid;
    align-content: center;
    gap: 0;
    min-height: 100svh;
    padding: calc(var(--header-h) + 38px) var(--gutter) 42px;
    overflow-y: auto;
    color: white;
    background: var(--ink);
  }

  .mobile-menu[hidden] { display: none; }
  .mobile-menu a {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-family: var(--display);
    font-size: clamp(38px, 6.3vw, 58px);
    line-height: 0.96;
    letter-spacing: -0.05em;
  }

  .site-header.is-menu-open {
    color: white;
    background: var(--ink);
  }
}

/* High-standard ingredient chapters: concise point form beside a vertically
   centred subject, with product cards ordered left/right behind it. */
.ingredient-module-copy {
  padding: clamp(54px, 5.4vw, 92px) clamp(24px, 5.5vw, 88px);
}

.ingredient-module-copy h2 {
  margin-block: 18px 22px;
  font-size: clamp(56px, 6.1vw, 108px);
}

.ingredient-module-summary {
  max-width: 560px !important;
  font-size: clamp(15px, 1.12vw, 18px) !important;
  line-height: 1.55 !important;
}

.ingredient-points {
  margin-top: 22px;
}

.ingredient-points li {
  padding-block: 10px;
}

.ingredient-points strong b {
  color: white;
  font-weight: 700;
}

.ingredient-module-cordyceps .ingredient-points strong b {
  color: var(--oxblood);
}

.ingredient-module-facts {
  gap: 12px;
  margin-top: 26px;
}

.ingredient-module-link {
  margin-top: 28px;
}

.ingredient-ganoderma-cutout,
.ingredient-cordyceps-cutout {
  width: min(68%, 510px);
}

.ingredient-visual-ganoderma-noir,
.ingredient-visual-ganoderma-latte,
.ingredient-visual-ganoderma-cocoa,
.ingredient-visual-latte,
.ingredient-visual-cocoa {
  width: min(21%, 205px);
}

.ingredient-visual-ganoderma-noir { top: 7%; left: 5%; }
.ingredient-visual-ganoderma-latte { top: 39%; right: 5%; }
.ingredient-visual-ganoderma-cocoa { bottom: 6%; left: 8%; }
.ingredient-visual-latte { top: 9%; left: 5%; }
.ingredient-visual-cocoa { right: 5%; bottom: 7%; }

@media (max-width: 760px) {
  .ingredient-module-media {
    height: clamp(500px, 68svh, 620px);
    min-height: 500px;
  }

  .ingredient-module-copy {
    padding: 58px 20px 70px;
  }

  .ingredient-module-index {
    margin-bottom: 34px;
  }

  .ingredient-module-copy h2 {
    margin-block: 16px 20px;
    font-size: clamp(46px, 12.8vw, 60px);
    line-height: 0.88;
  }

  .ingredient-module-summary {
    font-size: 15px !important;
    line-height: 1.58 !important;
  }

  .ingredient-points {
    margin-top: 20px;
  }

  .ingredient-points li {
    gap: 4px;
    padding-block: 11px;
  }

  .ingredient-points strong {
    font-size: 14px;
    line-height: 1.5;
  }

  .ingredient-module-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    margin-top: 24px;
  }

  .ingredient-module-facts span {
    min-height: 52px;
    padding-block: 10px;
    line-height: 1.35;
  }

  .ingredient-claims-note {
    margin-top: 14px !important;
  }

  .ingredient-ganoderma-cutout,
  .ingredient-cordyceps-cutout {
    width: 72%;
    max-width: 310px;
  }

  .ingredient-visual-ganoderma-noir,
  .ingredient-visual-ganoderma-latte,
  .ingredient-visual-ganoderma-cocoa,
  .ingredient-visual-latte,
  .ingredient-visual-cocoa {
    width: 27%;
  }

  .ingredient-visual-ganoderma-noir { top: 8%; left: 4%; }
  .ingredient-visual-ganoderma-latte { top: 39%; right: 4%; }
  .ingredient-visual-ganoderma-cocoa { bottom: 7%; left: 6%; }
  .ingredient-visual-latte { top: 10%; left: 4%; }
  .ingredient-visual-cocoa { right: 4%; bottom: 8%; }

  .ingredient-scene-caption {
    right: 16px;
    bottom: 16px;
  }

  .ingredient-scene-cordyceps .ingredient-scene-caption {
    top: 16px;
    right: 16px;
  }
}

@media (max-width: 360px) {
  .ingredient-module-facts { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .mobile-menu {
    align-content: start;
    padding-top: calc(var(--header-h) + 34px);
    padding-bottom: calc(34px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-menu > a,
  .mobile-brand-nav summary {
    font-size: clamp(36px, 10.6vw, 48px);
  }
}

/* Desktop ingredient handoff: each sticky subject holds in place while the
   next opaque chapter rises over it. The overlap equals the held media height,
   so the old subject releases only when the incoming module reaches the top. */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .ingredient-module-ganoderma,
  .ingredient-module-cordyceps {
    min-height: calc(220svh - var(--header-h));
    padding-bottom: 0;
  }

  .ingredient-module-copy {
    align-self: start;
  }

  .ingredient-module-ganoderma {
    background: linear-gradient(90deg, var(--wine-deep) 0 50%, var(--ink) 50% 100%);
  }

  .ingredient-module-cordyceps {
    min-height: 0;
    margin-top: calc(-100svh + var(--header-h));
    padding-bottom: calc(100svh - var(--header-h) + 112px);
    background: var(--paper-warm);
  }

  .quality {
    z-index: 8;
    margin-top: calc(-100svh + var(--header-h));
  }

  .product-focus {
    z-index: 10;
  }
}

/* The labelled point list already carries these messages; removing the second
   chip list keeps both ingredient chapters concise and prevents repetition. */
.ingredient-module-facts {
  display: none;
}

/* 2026-08-19 readability pass: preserve the editorial scale while lifting
   information-bearing text out of decorative micro-type. Display headings,
   background words and numeric ornaments intentionally remain unchanged. */
body {
  font-size: 17px;
  line-height: 1.55;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.desktop-nav { font-size: 12px; }
.header-action { font-size: 12px; }
.menu-toggle { font-size: 11px; }
.brand-nav-panel a { font-size: 11px; }
.eyebrow { font-size: 12px; }
.button { font-size: 12px; }
.mobile-brand-nav > div a { font-size: 12px; }

.hero-actions > span,
.hero-format-index,
.hero-note a,
.scroll-cue { font-size: 11px; }

.hero-format-copy { font-size: 15px; line-height: 1.58; }
.hero-format-options button { font-size: 10px; }

/* Keep compact labels readable at normal viewing distance. */
.product-traits,
.ingredient-scene-caption span,
.certification-note,
.mosaic figcaption,
.whatsapp-link { font-size: 11px; }

.product-meta > p.product-traits,
.product-meta > p.product-traits span { font-size: 11px; }
.product-traits { line-height: 1.35; }
.ingredient-scene-caption span { line-height: 1.3; }
.focus-details div span { font-size: 11px; }

.product-index { font-size: 11px; }
.product-meta > div > p { font-size: 11px; }
.product-meta > p { font-size: 14px; line-height: 1.55; }
.product-meta a { font-size: 11px; }
.product-meta a.product-buy { font-size: 11px; }

.story-copy > p:not(.eyebrow),
.quality-copy > p:not(.eyebrow),
.preference-heading > p:last-child { font-size: 18px; }

.ingredient-module-copy > p:not(.eyebrow) {
  font-size: clamp(17px, 1.35vw, 21px);
}

.ingredient-module-facts span,
.ingredient-points span,
.ingredient-claims-note,
.quality-copy li span,
.recommendation > div p,
.recommendation > a,
.contact-details span,
.contact-close footer nav { font-size: 11px; }

.ingredient-points strong { font-size: 15px; line-height: 1.52; }
.ingredient-claims-note { font-size: 11px !important; }
.recommendation > p { font-size: 16px; line-height: 1.6; }
.contact-details strong,
.contact-details a,
.contact-details p { font-size: 15px; }
.contact-close footer > p,
.contact-close footer .footer-copy > p { font-size: 13px; }

.review-moment { font-size: 11px; }
.review-card > p:not(.review-moment) { font-size: 16px; }
.review-person { font-size: 14px; }

/* Complete product descriptions must remain visible at laptop widths. */
@media (min-width: 761px) {
  .product-card {
    grid-template-rows: auto 250px;
  }

  .product-meta {
    min-height: 250px;
    height: 250px;
  }

  .product-meta > p:not(.product-traits) {
    display: block;
    overflow: visible;
    -webkit-box-orient: initial;
    -webkit-line-clamp: unset;
  }
}

@media (max-width: 760px) {
  .menu-toggle { font-size: 11px; }
  .hero-actions > span { font-size: 11px; }
  .product-selector-progress,
  .product-selector-progress span { font-size: 11px; }
  .collection-intro > p:last-child { font-size: 16px; line-height: 1.6; }
  .story-copy > p:not(.eyebrow),
  .quality-copy > p:not(.eyebrow),
  .preference-heading > p:last-child { font-size: 16px; }
  .ingredient-module-copy > p:not(.eyebrow) { font-size: 16px; }
  .ingredient-points span,
  .ingredient-module-facts span,
  .ingredient-claims-note { font-size: 11px !important; }
  .ingredient-points strong { font-size: 15px; }
  .product-meta > div > p { font-size: 11px; }
  .product-meta > p { font-size: 14px; }
  .review-preview-heading > p:last-child { font-size: 15px; }
  .review-moment { font-size: 11px; }
  .review-card > p:not(.review-moment) { font-size: 16px; }
}

/* Demo18 client revision: shared reference footer and final UI typography. */
.site-footer:not(.site-footer-reference) {
  display: none !important;
}

.ingredient-module[hidden],
.quality[hidden],
.contact-close[hidden] {
  display: none !important;
}

[data-login-link-pending] {
  cursor: not-allowed;
  opacity: 0.78;
}

/* Demo18 client revision: align the two annotated story paragraphs and keep the Ganoderma CTA legible. */
#ganoderma .story-copy > p:not(.eyebrow),
#cordyceps .story-copy > p:not(.eyebrow) {
  text-align: justify;
}

.ganoderma-story:not(.cordyceps-story) .story-more {
  color: var(--ink);
  border-color: var(--paper);
  background: var(--paper);
}

.ganoderma-story:not(.cordyceps-story) .story-more:hover,
.ganoderma-story:not(.cordyceps-story) .story-more:focus-visible {
  color: var(--ink);
  border-color: white;
  background: white;
}

.cordyceps-story .story-more {
  color: var(--paper);
  border-color: var(--wine);
  background: var(--wine);
}

.cordyceps-story .story-more:hover,
.cordyceps-story .story-more:focus-visible {
  color: var(--paper);
  border-color: var(--oxblood);
  background: var(--oxblood);
}

.site-footer.site-footer-reference {
  position: relative;
  z-index: 2;
  display: block;
  padding: clamp(48px, 6vw, 86px) var(--gutter) 24px;
  color: var(--paper);
  background:
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--brass) 28%, transparent), transparent 30%),
    linear-gradient(135deg, var(--oxblood) 0%, var(--wine-deep) 55%, var(--oxblood-dark) 100%);
  font-family: var(--ui);
}

.site-footer-reference .site-footer-grid {
  display: grid;
  grid-template-columns: 0.88fr 0.88fr 1.4fr;
  max-width: 1500px;
  margin: 0 auto;
}

.site-footer-reference .site-footer-column {
  min-height: 270px;
  padding: 0 clamp(22px, 3.6vw, 58px);
  border-left: 1px solid color-mix(in srgb, var(--brass) 62%, var(--paper) 38%);
}

.site-footer-reference .site-footer-column:first-child {
  padding-left: 0;
  border-left: 0;
}

.site-footer-reference h2 {
  margin: 0 0 20px;
  color: var(--paper);
  font-family: var(--ui);
  font-size: clamp(18px, 1.45vw, 23px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.site-footer-reference .site-footer-follow-title {
  margin-top: 38px;
}

.site-footer-reference .site-footer-column > a,
.site-footer-reference .site-footer-column > p {
  display: block;
  max-width: 560px;
  margin: 0 0 13px;
  color: color-mix(in srgb, var(--paper) 94%, transparent);
  font-family: var(--ui);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.5;
}

.site-footer-reference .site-footer-column > a:hover,
.site-footer-reference .site-footer-column > a:focus-visible {
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer-reference .site-footer-contact > p:first-of-type {
  margin-bottom: 20px;
  font-weight: 600;
}

.site-footer-reference .footer-social {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
}

.site-footer-reference .footer-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--brass) 72%, var(--paper) 28%);
  border-radius: 50%;
  color: var(--paper);
  background: color-mix(in srgb, var(--oxblood-dark) 76%, transparent);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.site-footer-reference .footer-social a:hover,
.site-footer-reference .footer-social a:focus-visible {
  color: var(--oxblood);
  border-color: var(--brass);
  background: var(--brass);
  transform: translateY(-2px);
}

.site-footer-reference .footer-social svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.site-footer-reference .site-footer-legal {
  max-width: 1500px;
  margin: 40px auto 0;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--brass) 62%, var(--paper) 38%);
  color: color-mix(in srgb, var(--paper) 94%, transparent);
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

/* Client red-box standard: apply the detail cleanup to all five beverages.
   Supplements keep their complete fact set and supporting copy. */
.products-page .product-detail.product-detail--beverages [data-product-kicker],
.products-page .product-detail.product-detail--beverages [data-product-fact="format"],
.products-page .product-detail.product-detail--beverages [data-product-fact="highlights"],
.products-page .product-detail.product-detail--beverages [data-product-fact="ingredients"],
.products-page .product-detail.product-detail--beverages [data-product-fact="allergens"],
.products-page .product-detail.product-detail--beverages [data-product-fact="serving"],
.products-page .product-detail.product-detail--beverages [data-product-fact="standards"],
.products-page .product-detail.product-detail--beverages .product-points-block,
.products-page .product-detail.product-detail--beverages [data-product-cta-note],
.products-page .product-detail.product-detail--beverages .product-disclaimer {
  display: none;
}

@media (max-width: 760px) {
  .site-footer.site-footer-reference {
    padding: 90px 20px 64px;
  }

  .site-footer-reference .site-footer-grid {
    grid-template-columns: 1fr;
  }

  .site-footer-reference .site-footer-column,
  .site-footer-reference .site-footer-column:first-child {
    min-height: 0;
    padding: 28px 0;
    border-top: 1px solid color-mix(in srgb, var(--brass) 62%, var(--paper) 38%);
    border-left: 0;
  }

  .site-footer-reference .site-footer-column:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .site-footer-reference .site-footer-follow-title {
    margin-top: 30px;
  }

  .site-footer-reference .site-footer-legal {
    margin-top: 18px;
    font-size: 12px;
    text-align: left;
  }
}

/* Expanded HOME PPT pass: keep the five drink deck readable and prevent old
   split-scene offsets from covering the featured product section. */
.collection-intro {
  padding-bottom: clamp(72px, 9vh, 132px);
}

.product-ingredient-callout {
  position: static;
  z-index: auto;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  width: 100%;
  max-width: none;
  margin: 0 0 2px;
  grid-column: 1 / -1;
  pointer-events: none;
  overflow: hidden;
}

.product-ingredient-callout > span {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 38px;
  padding: 4px 9px 4px 5px;
  border: 1px solid color-mix(in srgb, var(--brass) 72%, var(--oxblood) 28%);
  border-radius: 999px;
  color: var(--oxblood);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  box-shadow: 0 8px 18px rgba(56, 15, 24, 0.13);
  font-family: var(--ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.product-ingredient-callout > span:only-child {
  flex: 0 1 auto;
}

.product-ingredient-callout img {
  width: 29px !important;
  height: 29px !important;
  flex: 0 0 29px;
  border-radius: 50%;
  object-fit: cover !important;
  object-position: center;
  transform: none !important;
  transition: none !important;
}

.product-card:hover .product-ingredient-callout img,
.product-card:focus-within .product-ingredient-callout img {
  transform: none !important;
}

.product-focus {
  margin-top: 0 !important;
  scroll-margin-top: calc(var(--header-h) + 20px);
}

.review-preview,
.site-footer-reference {
  position: relative;
  isolation: isolate;
  scroll-margin-top: calc(var(--header-h) + 20px);
}

.site-footer-reference .site-footer-contact > a.footer-contact-link {
  display: flex;
  align-items: center;
  gap: 9px;
}

.site-footer-reference .footer-contact-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: currentColor;
}

.site-footer-reference .footer-social-icon {
  fill: currentColor;
}

/* The defining-ingredient story is retained for HOME PPT slides 10–11;
   slides 12–13 are separate detail prototypes and remain removed. */
.ganoderma-story .story-macro {
  clip-path: circle(78% at 67% 44%);
}

.story-ingredient-notes {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(600px, 100%);
  margin: 0 0 30px;
}

.story-ingredient-notes > span {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--brass) 60%, transparent);
  border-radius: 999px;
  color: var(--paper);
  background: color-mix(in srgb, var(--oxblood-dark) 74%, transparent);
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-align: left;
}

.story-ingredient-notes img {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--paper);
}

.story-ingredient-notes strong {
  font-weight: 600;
}

@media (max-width: 760px) {
  .story-ingredient-notes {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 24px;
  }

  .story-ingredient-notes > span {
    font-size: 9px;
  }
}

@media (max-width: 760px) {
  .collection-intro {
    padding-bottom: 7vh;
  }

  .product-ingredient-callout {
    gap: 5px;
    margin-bottom: 1px;
  }

  .product-ingredient-callout > span {
    min-height: 32px;
    padding: 3px 7px 3px 4px;
    font-size: 8px;
  }

  .product-ingredient-callout img {
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px;
  }

  .product-focus {
    margin-top: 0 !important;
  }
}

/* About Us owns the supporting pages, matching the existing Brand menu. */
.about-nav {
  position: relative;
}

.about-nav summary {
  position: relative;
  padding-right: 14px;
  list-style: none;
  cursor: pointer;
}

.about-nav summary::-webkit-details-marker {
  display: none;
}

.about-nav summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  color: var(--brass);
  font-size: 12px;
  line-height: 1;
  transform: translateY(-50%);
}

.about-nav[open] summary::after {
  content: "−";
}

.about-nav-panel {
  position: absolute;
  z-index: 2;
  top: calc(100% + 18px);
  left: 50%;
  display: grid;
  min-width: 168px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  box-shadow: 0 18px 40px rgba(33, 23, 25, 0.14);
  color: var(--ink);
  transform: translateX(-50%);
}

.about-nav-panel a {
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  white-space: nowrap;
}

.about-nav-panel a:last-child {
  border-bottom: 0;
}

.inner-page .about-nav-panel {
  background: var(--paper);
}

.mobile-about-nav {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-about-nav summary {
  padding: 14px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--display);
  font-size: 48px;
  line-height: 0.92;
  letter-spacing: -0.06em;
}

.mobile-about-nav summary::-webkit-details-marker {
  display: none;
}

.mobile-about-nav summary::after {
  content: "+";
  float: right;
  color: var(--brass);
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1;
}

.mobile-about-nav[open] summary::after {
  content: "−";
}

.mobile-about-nav > div {
  display: grid;
  gap: 0;
  padding: 0 0 8px 20px;
}

.mobile-about-nav > div a {
  padding: 9px 0;
  border-bottom: 0;
  color: rgba(255, 255, 255, 0.76);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Restore the requested macro-to-product image swap on both ingredient stories. */
.ganoderma-story .story-macro {
  clip-path: circle(26% at 67% 44%);
  opacity: 1;
}

.ganoderma-story:not(.cordyceps-story) .story-media {
  background: var(--paper);
}

.ganoderma-story:not(.cordyceps-story) .story-macro {
  object-fit: contain;
  padding: 8%;
  background: var(--paper);
}

.cordyceps-story {
  color: var(--ink);
  background: var(--paper-warm);
}

.cordyceps-story .story-copy {
  order: 2;
  background: var(--paper-warm);
}

.cordyceps-story .story-media {
  order: 1;
  background: var(--paper-warm);
}

.cordyceps-story .story-copy > p:not(.eyebrow) {
  color: var(--ink-soft);
}

.cordyceps-story .story-copy > .eyebrow {
  color: var(--oxblood);
}

.cordyceps-story .story-words {
  color: color-mix(in srgb, var(--oxblood) 12%, transparent);
}

.cordyceps-story .story-macro {
  clip-path: circle(26% at 67% 44%);
  object-fit: contain;
  padding: 10%;
  background: var(--paper-warm);
}

.cordyceps-story .story-disc {
  border-color: color-mix(in srgb, var(--oxblood) 46%, transparent);
  box-shadow:
    0 0 0 18px color-mix(in srgb, var(--brass) 24%, transparent),
    0 0 0 38px color-mix(in srgb, var(--brass) 12%, transparent);
}

.cordyceps-story .story-ingredient-notes > span {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 64%, transparent);
}

/* Restore the supplied closing product visual before the shared Footer. */
.closing-visual {
  z-index: 2;
}

.closing-visual + .site-footer-reference {
  position: relative;
  z-index: 4;
}

@media (max-width: 760px) {
  .cordyceps-story .story-macro {
    clip-path: circle(32% at 64% 44%);
  }

  .cordyceps-story .story-media {
    order: -1;
  }

  .cordyceps-story .story-copy {
    order: 0;
  }

  .cordyceps-story .story-macro {
    padding: 12%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ganoderma-story .story-macro {
    clip-path: none;
  }

  .cordyceps-story .story-macro {
    clip-path: none;
  }

  .closing-visual img {
    transform: none !important;
  }
}

/* Demo18 client closeout r4: use the newly approved Ganoderma cutout and
   keep the ingredient story on the same warm paper surface as the copy. */
.ganoderma-story:not(.cordyceps-story) .story-media {
  background: #f6eee2;
}

.ganoderma-story:not(.cordyceps-story) .story-macro {
  background: transparent;
  object-fit: contain;
  padding: 6%;
}

.story-ingredient-notes {
  display: none;
}

.cordyceps-story .story-words {
  color: color-mix(in srgb, var(--oxblood) 5%, transparent);
}

.review-preview {
  background: #f6eee2;
}

/* Demo18 client revision r5: static Ganolux and Cordylux product cards. */
.supplement-preview {
  display: grid;
  grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
  padding: clamp(78px, 10vw, 150px) var(--gutter);
  border-top: 1px solid var(--line);
  color: var(--ink);
  background: var(--paper-warm);
}

.supplement-preview-copy {
  max-width: 450px;
}

.supplement-preview-copy h2 {
  margin: 16px 0 22px;
  color: var(--oxblood);
  font-family: var(--display);
  font-size: clamp(38px, 4.2vw, 64px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.supplement-preview-copy > p:last-child {
  max-width: 410px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
}

.supplement-preview-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  min-width: 0;
}

.supplement-card {
  display: grid;
  grid-template-rows: minmax(230px, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--oxblood) 16%, transparent);
  border-radius: 26px;
  color: var(--ink);
  background: #f8f1e6;
  box-shadow: 0 16px 38px rgba(56, 15, 24, 0.08);
  text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.supplement-card:hover,
.supplement-card:focus-visible {
  border-color: var(--brass);
  box-shadow: 0 20px 44px rgba(56, 15, 24, 0.14);
  transform: translateY(-3px);
}

.supplement-card:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
}

.supplement-card-media {
  display: grid;
  min-height: clamp(230px, 23vw, 360px);
  place-items: center;
  padding: clamp(18px, 2vw, 30px);
  background: #eee4d5;
}

.supplement-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: contain;
  filter: none;
  transition: transform 0.3s ease;
}

.supplement-card:hover .supplement-card-media img,
.supplement-card:focus-visible .supplement-card-media img {
  transform: scale(1.025);
}

.supplement-card-copy {
  display: grid;
  gap: 9px;
  padding: 20px 22px 23px;
  border-top: 1px solid color-mix(in srgb, var(--oxblood) 12%, transparent);
}

.supplement-card-copy p {
  margin: 0;
  color: var(--oxblood);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.065em;
  line-height: 1.45;
  text-transform: uppercase;
}

.supplement-card-copy h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.06em;
}

.supplement-card-copy h3 .lux-accent {
  color: var(--gewelry-red);
}

.supplement-card-copy > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-soft);
  font-family: var(--ui);
  font-size: 12px;
  line-height: 1.45;
}

.supplement-card-copy b {
  color: var(--oxblood);
  font-size: 17px;
  font-weight: 500;
  line-height: 0.8;
}

/* Real reviews need a calmer, more readable quote layout than product-use cards. */
.review-card {
  align-items: flex-start;
  text-align: left;
}

.review-card h3 {
  margin-top: clamp(32px, 3.2vw, 54px);
  font-size: clamp(28px, 2.1vw, 38px);
}

.review-card > p:not(.review-moment) {
  font-size: 15px;
  line-height: 1.62;
}

.review-person {
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  width: 100%;
  gap: 10px;
  text-align: left;
}

.review-avatar-image {
  display: block;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 1px solid rgba(56, 15, 24, 0.12);
  border-radius: 50%;
  object-fit: cover;
  background: #e9e1d6;
  box-shadow: 0 4px 12px rgba(56, 15, 24, 0.1);
}

.review-person > span:last-child {
  min-width: 0;
  color: var(--oxblood);
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) and (min-width: 761px) {
  .supplement-preview {
    grid-template-columns: minmax(180px, 0.52fr) minmax(0, 1.48fr);
    gap: 24px;
  }

  .supplement-card-copy { padding-inline: 17px; }
}

@media (max-width: 760px) {
  .supplement-preview {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-block: 84px 92px;
  }

  .supplement-preview-copy { max-width: 520px; }
  .supplement-preview-copy h2 { font-size: clamp(38px, 12vw, 54px); line-height: 0.9; }
  .supplement-preview-copy > p:last-child { max-width: 100%; font-size: 15px; }
  .supplement-preview-cards { gap: 12px; }
  .supplement-card { border-radius: 20px; }
  .supplement-card-media { min-height: 206px; padding: 14px; }
  .supplement-card-copy { gap: 7px; padding: 16px 15px 18px; }
  .supplement-card-copy p { font-size: 9px; }
  .supplement-card-copy h3 { font-size: 31px; }
  .supplement-card-copy > span { display: block; font-size: 11px; }
  .supplement-card-copy b { float: right; margin-left: 8px; }
  .review-card h3 { margin-top: 32px; font-size: 34px; }
}

@media (max-width: 420px) {
  .supplement-preview-cards { grid-template-columns: 1fr; }
  .supplement-card-media { min-height: 250px; }
}

/* The source folder contains more usable review entries than the first pass;
   keep the mobile review controls compact as the dot count grows. */
@media (max-width: 760px) {
  .review-dots {
    max-width: calc(100vw - 116px);
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .review-dots::-webkit-scrollbar { display: none; }

  .review-dots button {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
  }
}

/* Demo18 r5-final: make the customer notes read as review cards, not tall
   editorial feature cards. */
.review-card {
  position: relative;
  min-height: 336px;
  justify-content: flex-start;
  padding: 24px 24px 22px;
  border: 1px solid rgba(56, 15, 24, 0.13);
  border-radius: 24px;
  background: #fbf7ef;
  box-shadow: 0 12px 26px rgba(56, 15, 24, 0.08);
  overflow: hidden;
}

.review-card::before {
  content: "“";
  position: absolute;
  top: 8px;
  right: 20px;
  color: rgba(112, 27, 40, 0.12);
  font-family: var(--display);
  font-size: 72px;
  line-height: 1;
  pointer-events: none;
}

.review-card .review-person {
  order: 1;
  margin-top: 0;
}

.review-card .review-moment {
  order: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--oxblood);
}

.review-stars {
  color: #b78132;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

.review-moment-label {
  min-width: 0;
}

.review-card h3 {
  order: 3;
  margin: 18px 0 10px;
  font-size: clamp(24px, 1.8vw, 30px);
  line-height: 1.02;
}

.review-card > p:not(.review-moment) {
  order: 4;
  max-width: 30ch;
  font-size: 15px;
  line-height: 1.55;
}

.review-avatar-initial {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 248, 238, 0.58);
  border-radius: 50%;
  color: #fff8ee;
  font-family: var(--ui);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(56, 15, 24, 0.14);
}

.review-avatar-tone-1 { background: #6a2c38; }
.review-avatar-tone-2 { background: #284c63; }
.review-avatar-tone-3 { background: #b17445; }
.review-avatar-tone-4 { background: #8c6b4f; }
.review-avatar-tone-5 { background: #6c5966; }
.review-avatar-tone-6 { background: #916a37; }
.review-avatar-tone-7 { background: #3f6c63; }
.review-avatar-tone-8 { background: #6d5a47; }

@media (max-width: 760px) {
  .review-card {
    min-height: 318px;
    padding: 22px 20px 20px;
    border-radius: 22px;
  }

  .review-card h3 {
    margin-top: 16px;
    font-size: 28px;
  }

  .review-card > p:not(.review-moment) {
    font-size: 15px;
  }
}

/* 2026-08-25 client follow-up: make Home's five-product collection usable on
   touch screens and keep the ingredient labels compact with real card space. */
@media (max-width: 760px) {
  .collection-runway {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .collection-sticky {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 22px 0;
  }

  .product-track {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    height: auto;
    padding: 0 calc((100% - min(84vw, 620px)) / 2);
    overflow-x: auto;
    overflow-y: visible;
    scroll-padding-inline: calc((100% - min(84vw, 620px)) / 2);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .product-track::-webkit-scrollbar {
    display: none;
  }

  .product-card {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 min(84vw, 620px);
    width: min(84vw, 620px);
    height: 680px;
    min-height: 0;
    opacity: 1;
    visibility: visible;
    transform-origin: center;
    scroll-snap-align: center;
    touch-action: pan-x;
  }

  .product-card[data-collection-slot="0"],
  .product-card[data-collection-slot="-1"],
  .product-card[data-collection-slot="1"],
  .product-card[data-collection-slot="-2"],
  .product-card[data-collection-slot="2"] {
    filter: none;
  }

  .collection-slider-controls {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    display: flex;
    justify-content: center;
    gap: 14px;
    width: auto;
    margin: 18px auto 0;
    transform: none;
    pointer-events: auto;
  }

  .collection-slider-controls span {
    display: inline-block;
    min-width: 58px;
    align-self: center;
    text-align: center;
  }

  .collection-slider-controls button {
    width: 42px;
    height: 42px;
  }
}

/* Compact ingredient pills leave the product title and image room to breathe. */
.product-ingredient-callout {
  gap: 8px;
  margin: 0 0 8px;
  padding-inline: 2px;
}

.product-ingredient-callout > span {
  flex: 0 1 auto;
  max-width: 48%;
  min-height: 30px;
  padding: 3px 8px 3px 4px;
  gap: 5px;
  font-size: 8px;
  letter-spacing: 0.035em;
}

.product-ingredient-callout > span:only-child {
  max-width: 62%;
}

.product-ingredient-callout img {
  width: 22px !important;
  height: 22px !important;
  flex-basis: 22px;
}

.product-ingredient-callout img[src*="ingredient-cocoa"] {
  object-fit: contain !important;
}

@media (max-width: 760px) {
  .product-ingredient-callout {
    gap: 6px;
    margin-bottom: 10px;
  }

  .product-ingredient-callout > span {
    min-height: 28px;
    padding: 2px 7px 2px 3px;
    font-size: 7px;
  }

  .product-ingredient-callout img {
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px;
  }
}

/* 2026-08-25 client follow-up r7: keep every Home product CTA inside the
   card with deliberate bottom breathing, and soften the ingredient panel. */
.product-card {
  background: color-mix(in srgb, var(--paper) 84%, var(--paper-warm) 16%);
}

.product-meta {
  background: transparent;
}

.product-ingredient-callout {
  overflow: visible;
  padding-inline: 0;
}

.product-ingredient-callout > span {
  border-color: color-mix(in srgb, var(--brass) 58%, var(--paper-warm) 42%);
  background: color-mix(in srgb, var(--paper) 88%, var(--paper-warm) 12%);
  box-shadow: 0 4px 10px rgba(56, 15, 24, 0.07);
}

@media (min-width: 761px) {
  .product-card {
    grid-template-rows: auto auto;
    height: auto;
    overflow: hidden;
  }

  .product-meta {
    min-height: 278px;
    height: auto;
    padding: 18px 18px 30px;
    gap: 7px;
  }

  .product-meta a.product-buy {
    position: relative;
    z-index: 1;
    visibility: visible;
    opacity: 1;
    margin-top: auto;
    margin-bottom: 0;
  }
}

@media (max-width: 760px) {
  .product-card {
    height: auto;
    min-height: 0;
    grid-template-rows: auto auto;
    overflow: hidden;
  }

  .product-meta {
    min-height: 0;
    height: auto;
    padding: 18px 18px 30px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    align-items: start;
    gap: 10px;
  }

  .product-meta > .product-ingredient-callout {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .product-meta > div:not(.product-ingredient-callout) {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  .product-meta > a.product-buy {
    grid-column: 1;
    grid-row: 5;
    justify-self: center;
    align-self: start;
    position: relative;
    z-index: 1;
    visibility: visible;
    opacity: 1;
    margin: 2px 0 0;
  }

  .product-meta > p.product-traits {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 2px;
  }

  .product-meta > p:not(.product-traits) {
    grid-column: 1 / -1;
    grid-row: 4;
    display: block;
    overflow: visible;
    -webkit-box-orient: initial;
    -webkit-line-clamp: unset;
  }
}

/* 2026-08-25 client follow-up: the Cordyceps split story should continue the
   same light product backdrop instead of switching to the darker warm paper. */
.cordyceps-story,
.cordyceps-story .story-copy,
.cordyceps-story .story-media,
.cordyceps-story .story-macro {
  background: var(--paper);
}

/* 2026-08-27 mobile closeout: a short phone held in landscape must use the
   same touch-led interaction model as portrait mobile without changing any
   approved desktop geometry or motion values. */
@media (min-width: 761px) and (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  :root {
    --header-h: 64px;
    --gutter: 24px;
  }

  .mobile-menu {
    align-content: start;
    padding-top: calc(var(--header-h) + 22px);
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-menu > a,
  .mobile-brand-nav summary {
    padding-block: 8px;
    font-size: clamp(31px, 6.8vw, 44px);
    line-height: 0.94;
  }

  .mobile-brand-nav a {
    padding-block: 7px;
  }

  .hero {
    z-index: 1;
    height: 200svh;
    min-height: 0;
  }

  .hero-stage {
    height: 100svh;
    min-height: 100svh;
  }

  .hero-media {
    transform: none !important;
    will-change: auto;
  }

  .hero-bg {
    object-position: 50% 55%;
  }

  .hero-copy {
    left: max(24px, env(safe-area-inset-left));
    right: auto;
    bottom: max(26px, env(safe-area-inset-bottom));
    width: min(52vw, 440px);
  }

  .hero-copy h1 {
    max-width: 100%;
    margin: 8px 0 0;
    font-size: clamp(38px, 6.7vw, 58px);
    line-height: 0.84;
  }

  .hero-copy h1 span {
    display: inline;
    width: auto;
  }

  .hero-copy h1 span + span::before {
    content: " ";
  }

  .ganoderma-orbit {
    left: 76%;
    top: 49%;
    width: min(67vw, 620px);
  }

  .scroll-cue {
    display: none;
  }

  .collection {
    margin-top: -100svh;
  }

  .collection-intro {
    min-height: 100svh;
    padding: calc(var(--header-h) + 34px) var(--gutter) 42px;
  }

  .collection-intro h2 {
    font-size: clamp(48px, 9vw, 76px);
  }

  .collection-runway {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .collection-sticky {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 18px 0 22px;
  }

  .collection-progress {
    display: none;
  }

  .product-track {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    height: auto;
    padding: 0 calc((100% - min(80vw, 680px)) / 2);
    overflow-x: auto;
    overflow-y: visible;
    scroll-padding-inline: calc((100% - min(80vw, 680px)) / 2);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .product-track::-webkit-scrollbar {
    display: none;
  }

  .product-card {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 min(80vw, 680px);
    grid-template-columns: minmax(220px, 42%) minmax(0, 1fr);
    grid-template-rows: 1fr;
    width: min(80vw, 680px);
    height: min(72svh, 300px);
    min-height: 260px;
    border-radius: 18px;
    opacity: 1;
    visibility: visible;
    filter: none !important;
    scroll-snap-align: center;
    touch-action: pan-x;
  }

  .product-visual {
    height: 100%;
    aspect-ratio: auto;
  }

  .product-meta {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    align-content: center;
    align-items: start;
    min-height: 0;
    height: 100%;
    padding: 14px 16px;
    gap: 6px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .product-meta h3 {
    font-size: clamp(27px, 4.2vw, 36px);
  }

  .product-meta > p,
  .product-meta > p:not(.product-traits) {
    display: block;
    margin: 0;
    overflow: visible;
    font-size: 11px;
    line-height: 1.35;
    -webkit-line-clamp: unset;
  }

  .product-meta > p.product-traits {
    display: flex;
    flex-wrap: wrap;
    font-size: 9px;
  }

  .product-ingredient-callout {
    margin-bottom: 3px;
  }

  .product-ingredient-callout > span {
    min-height: 28px;
    padding: 2px 7px 2px 3px;
    font-size: 7px;
  }

  .product-ingredient-callout img {
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px;
  }

  .collection-slider-controls {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    display: flex;
    justify-content: center;
    gap: 14px;
    width: auto;
    margin: 14px auto 0;
    transform: none;
    pointer-events: auto;
  }

  .collection-slider-controls span {
    display: inline-block;
    min-width: 58px;
    align-self: center;
    text-align: center;
  }

  .collection-slider-controls button {
    width: 48px;
    height: 48px;
    pointer-events: auto;
  }

  .ganoderma-story,
  .cordyceps-story {
    display: flex;
    flex-direction: column;
    height: 200svh;
    min-height: 0;
    margin-top: 0;
    padding-bottom: 0;
  }

  .ganoderma-story .story-media,
  .cordyceps-story .story-media {
    position: sticky;
    top: 0;
    z-index: 1;
    order: -1;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
  }

  .ganoderma-story .story-copy,
  .cordyceps-story .story-copy {
    position: relative;
    z-index: 2;
    order: 0;
    width: 100%;
    height: auto;
    min-height: 100svh;
    margin-top: 0;
    padding: 54px max(32px, 7vw) 62px;
  }

  .story-copy h2 {
    font-size: clamp(44px, 7vw, 62px);
    line-height: 0.88;
  }

  .story-ingredient-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-viewport {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
  }

  .review-viewport::-webkit-scrollbar {
    display: none;
  }

  .review-track {
    gap: 14px;
    padding: 0 24px;
    transform: none !important;
  }

  .review-card {
    flex-basis: min(52vw, 390px);
    min-height: 300px;
    scroll-snap-align: center;
  }

  .review-card.is-review-clone {
    display: none;
  }

  .review-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-inline: 24px;
  }
}

/* Keep the visual dots compact while making every mobile dot reliably tappable. */
@media (max-width: 760px),
       (min-width: 761px) and (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .collection-slider-controls button {
    min-width: 48px;
    width: 48px;
    height: 48px;
  }

  .review-dots {
    gap: 0;
  }

  .review-dots button,
  .review-dots button[aria-current="true"] {
    position: relative;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    background: transparent;
  }

  .review-dots button::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(112, 27, 40, 0.2);
    transform: translate(-50%, -50%);
  }

  .review-dots button[aria-current="true"]::before {
    background: var(--oxblood);
  }
}

@media (max-width: 760px) {
  .review-controls {
    padding-inline: 18px 68px;
  }

  .review-dots {
    width: min(100%, 264px);
    justify-content: center;
  }

  .review-dots button,
  .review-dots button[aria-current="true"] {
    flex-basis: 17px;
    width: 17px;
  }
}

/* 2026-08-27 mobile card and story correction: keep the approved desktop
   deck untouched while removing the two hard horizontal seams on phones. */
@media (max-width: 760px) {
  .collection-runway,
  .collection-sticky {
    background: var(--paper);
  }

  .collection-sticky {
    padding: clamp(18px, 3svh, 30px) 0 clamp(28px, 4svh, 42px);
  }

  .product-track {
    align-items: flex-start;
    gap: 18px;
    padding: 10px calc((100% - min(78vw, 480px)) / 2) 16px;
    scroll-padding-inline: calc((100% - min(78vw, 480px)) / 2);
  }

  .product-card {
    flex: 0 0 min(78vw, 480px);
    width: min(78vw, 480px);
    height: auto;
    grid-template-rows: auto auto;
    gap: 0;
    border-radius: 24px;
    background: color-mix(in srgb, var(--paper) 88%, var(--paper-warm) 12%);
    box-shadow: 0 18px 46px rgba(56, 15, 24, 0.1);
  }

  .product-visual {
    aspect-ratio: 1.08 / 1;
    background: color-mix(in srgb, var(--paper) 88%, var(--paper-warm) 12%);
  }

  .product-visual::after {
    background: linear-gradient(180deg, transparent 76%, rgba(56, 15, 24, 0.035));
  }

  .product-visual img {
    display: block;
  }

  .product-meta {
    margin-top: 0;
    padding: 16px 18px 22px;
    border-top: 0;
    background: color-mix(in srgb, var(--paper) 88%, var(--paper-warm) 12%);
  }

  .collection-slider-controls {
    margin-top: 18px;
  }
}

/* Match the desktop scroll-led reveal rather than exposing the complete
   transparent cutout on the first mobile frame. JS scrubs 4% -> 84%. */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference),
       (min-width: 761px) and (max-width: 900px) and (max-height: 520px) and (orientation: landscape) and (prefers-reduced-motion: no-preference) {
  .ganoderma-story .story-macro,
  .cordyceps-story .story-macro {
    clip-path: circle(4% at 64% 44%);
  }
}

/* Mobile reviews autoplay card-by-card and remain directly draggable. The
   desktop marquee is untouched, and the compact dots stay as position cues. */
@media (max-width: 760px),
       (min-width: 761px) and (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .review-controls {
    gap: 0;
  }

  .review-controls > [data-review-direction] {
    display: none;
  }

  .review-viewport {
    cursor: grab;
    touch-action: pan-y;
  }

  .review-viewport.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
  }
}

/* 2026-08-27 client follow-up: mobile is touch-led, so remove visible arrow
   controls and decorative outbound arrows while preserving desktop controls,
   touch scrolling, review dots and the keyboard handlers. */
@media (max-width: 760px) {
  .mobile-arrow-control,
  [data-collection-direction],
  [data-review-direction],
  [data-product-direction],
  button[aria-label^="Previous"],
  button[aria-label^="Next"],
  .mobile-hide-arrow {
    display: none !important;
  }

}

/* Tablet-only collection layout. Phones keep the approved vertical cards and
   desktop keeps the layered deck; tablets use the same complete vertical-card
   reading order inside a touch-friendly horizontal rail. */
@media (min-width: 761px) and (max-width: 1100px) {
  .collection-intro {
    min-height: clamp(500px, 62svh, 680px);
    padding: calc(var(--header-h) + 48px) var(--gutter) 56px;
  }

  .collection-intro h2 {
    font-size: clamp(58px, 8vw, 82px);
    line-height: 0.84;
  }

  .collection-runway {
    height: auto;
    min-height: 0;
    padding: 0 0 72px;
    overflow: hidden;
  }

  .collection-sticky {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 30px 0 0;
  }

  .collection-progress {
    display: none;
  }

  .product-track {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    height: auto;
    padding: 10px calc((100% - min(72vw, 620px)) / 2) 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: calc((100% - min(72vw, 620px)) / 2);
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .product-track::-webkit-scrollbar {
    display: none;
  }

  .product-card {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 min(72vw, 620px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    width: min(72vw, 620px);
    height: auto;
    min-height: 0;
    border-radius: 20px;
    opacity: 1;
    visibility: visible;
    filter: none !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    touch-action: pan-x pan-y;
  }

  .product-visual {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.08 / 1;
  }

  .product-meta {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    align-content: start;
    align-items: start;
    min-height: 0;
    height: auto;
    padding: 20px 24px 28px;
    gap: 10px;
    overflow: visible;
    border-top: 1px solid var(--line);
    border-left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s ease, visibility 0.24s ease;
  }

  .product-card[data-collection-active="true"] .product-meta {
    opacity: 1;
    visibility: visible;
  }

  .product-meta h3 {
    font-size: clamp(38px, 5.2vw, 50px);
  }

  .product-meta > p,
  .product-meta > p:not(.product-traits) {
    display: block;
    margin: 0;
    overflow: visible;
    font-size: 12px;
    line-height: 1.45;
    -webkit-line-clamp: unset;
  }

  .product-meta > p.product-traits {
    display: flex;
    flex-wrap: wrap;
    font-size: 9px;
  }

  .collection-slider-controls {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    display: flex;
    justify-content: center;
    gap: 14px;
    width: auto;
    margin: 16px auto 0;
    transform: none;
    pointer-events: auto;
  }

  .collection-slider-controls span {
    display: inline-block;
    min-width: 58px;
    align-self: center;
    text-align: center;
  }

  .collection-slider-controls button {
    width: 48px;
    height: 48px;
    pointer-events: auto;
  }

  .closing-visual > p {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(calc(100% - 72px), 920px);
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: clamp(66px, 10.4vw, 106px);
    line-height: 0.84;
    text-wrap: balance;
  }

  .closing-visual > p span,
  .closing-visual > p strong {
    display: inline;
  }
}