/* ============================================================
   BRITISH CANNABIS — editorial / motion-led homepage
   Layout system: 1rem = 1px at 1920w (root font scales with vw)
   ============================================================ */

:root {
  --ink: #331b0f;            /* warm editorial ink */
  --ink-soft: #6b5547;
  --blush: #d08c81;          /* big number accent */
  --blush-light: #e8c5c1;    /* step number accent */
  --brand-green: #0d6726;    /* step numbering */
  --white: #ffffff;
  --beige: #f3ede4;          /* organic blob shapes */
  --amber: #c2761b;          /* CBD oil */
  --amber-deep: #7a4710;
  --green-deep: #0f1d15;     /* footer / preloader */
  --cream: #f7f5ef;
  --soft-grey: #f3f3f3;

  --font-sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;  /* Degular stand-in */
  --font-display: "Metropolis", "Hanken Grotesk", sans-serif;
  --font-serif: "Fraunces", Georgia, serif;

  --ease: cubic-bezier(0.11, 0.82, 0.39, 0.92);  /* site-wide easing */
  --header-h: 90rem;
  --gutter: 50rem;
}

html { font-size: 0.0520834vw; }                /* 1rem = 1px @1920 */
@media (max-width: 1024px) { html { font-size: 16px; } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--ink);
  font-size: 18rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
main { position: relative; z-index: 1; }

::selection { background: var(--blush); color: var(--white); }

/* ---------- shared ---------- */
.section-head { text-align: center; padding: 0 var(--gutter); position: relative; z-index: 2; }
.section-label {
  font-size: 14rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-block;
}
.section-label--light { color: rgba(255, 255, 255, 0.85); }

[data-split] .split-line { display: block; overflow: hidden; }
[data-split] .split-line > span { display: block; will-change: transform; }

/* roll-hover label (per-character, JS-driven) */
[data-roll] { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
[data-roll] .roll-line { display: block; white-space: pre; }
[data-roll] .roll-line--clone { position: absolute; left: 0; top: 0; }
[data-roll] .roll-char { display: inline-block; will-change: transform; }

/* organic background blobs */
.blob { position: absolute; z-index: 0; pointer-events: none; }
.blob svg { width: 100%; height: auto; }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--soft-grey);
  overflow: hidden;
}
.preloader.is-done { pointer-events: none; }
.loader__canvas {
  position: absolute; inset: 0;
  width: 100vw;
  height: 100vh;
  min-width: 0;
  min-height: 0;
  z-index: 2;
}
.loader__glow {
  position: absolute; left: 50%; top: 50%;
  width: 520rem; height: 520rem; min-width: 300px; min-height: 300px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 38%, rgba(255, 250, 238, 0.92) 0 18%, rgba(243, 226, 188, 0.25) 44%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle, rgba(214, 178, 110, 0.10), rgba(255, 255, 255, 0) 66%);
  filter: blur(18rem);
  pointer-events: none;
  z-index: 0;
}
.loader__shadow {
  position: absolute; left: 50%; top: 58%;
  width: 500rem; height: 108rem; min-width: 280px;
  transform: translate(-50%, 0);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(122, 71, 16, 0.20) 0, rgba(150, 110, 60, 0.10) 38%, rgba(255, 255, 255, 0) 72%);
  filter: blur(22rem);
  pointer-events: none;
  z-index: 1;
}
.loader__counter {
  position: absolute; left: 50%; bottom: 20rem;
  transform: translateX(-50%);
  display: inline-flex; align-items: flex-start; justify-content: center;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 24rem; font-weight: 400; line-height: 1.05;
  pointer-events: none;
  z-index: 4;
}
.loader__digit {
  display: inline-block;
  height: 1.05em; width: 0.55em;
  overflow: hidden;
  transition: width 0.25s ease, opacity 0.25s ease;
}
.loader__digit.is-hidden { opacity: 0; width: 0; }
.loader__column {
  display: flex; flex-direction: column;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.loader__percent { display: block; height: 1.05em; margin-left: 0.04em; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--white);
  transition: box-shadow 0.5s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(51, 27, 15, 0.08); }

.site-nav {
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
}
.site-nav__group { display: flex; gap: 44rem; align-items: center; }
.site-nav__group li { display: flex; align-items: center; line-height: 1; }
.site-nav__group--right { justify-content: flex-end; }

.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 8rem;
  font-size: 14rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500;
  line-height: 1;
}
.nav-link--cart {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
}
.nav-link--cart .nav-link__label { display: block; line-height: 1; }
.cart-count {
  font-style: normal; font-size: 11rem;
  min-width: 20rem; height: 20rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid currentColor; border-radius: 50%;
  transition: transform 0.3s var(--ease), background 0.3s, color 0.3s;
}
.cart-count[hidden] { display: none; }
.cart-count.is-bumped { background: var(--ink); color: var(--white); transform: scale(1.18); }

.site-logo {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 0 20rem;
  width: 180rem;
}
.site-logo__img { height: auto; width: 100%; margin: 0 auto; }

.site-nav__mobile-actions { display: none; }
.site-nav__mobile-icon {
  align-items: center;
  color: var(--ink);
  display: flex;
  justify-content: center;
}
.site-nav__mobile-icon svg { display: block; height: 100%; width: 100%; }
.site-nav__mobile-icon--account { height: 18px; width: 18px; }
.site-nav__mobile-icon--cart { height: 24px; width: 24px; }

.nav-burger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  height: 20px;
  margin-left: 10px;
  padding: 0;
  position: relative;
  width: 25px;
}
.nav-burger span {
  background: var(--ink);
  display: block;
  height: 2px;
  position: absolute;
  right: 0;
  top: 0;
  transition: width 0.8s cubic-bezier(0.11, 0.82, 0.39, 0.92);
  width: 100%;
}
.nav-burger span:first-child { top: 5px; transition-delay: 0.1s; }
.nav-burger span:nth-child(2) { top: 50%; width: 60%; }
.nav-burger span:nth-child(3) { top: 15px; transition-delay: 0.2s; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  margin-top: var(--header-h);
  height: calc(100svh - var(--header-h));
  min-height: 540px;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; will-change: transform; }
.hero__video { width: 100%; height: 112%; object-fit: cover; }
.hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15, 29, 21, 0.6) 0%, rgba(15, 29, 21, 0.1) 45%, rgba(15, 29, 21, 0.18) 100%);
}
.hero__content {
  position: absolute; left: 0; right: 0; bottom: 50rem;
  text-align: center; color: var(--white);
  padding: 0 var(--gutter);
  z-index: 10;
}
.hero__eyebrow {
  font-size: 13rem; letter-spacing: 0.34em; text-transform: uppercase;
  margin-bottom: 18rem; color: rgba(255, 255, 255, 0.82);
}
.hero__title { font-weight: 400; }
.hero__line { display: block; overflow: hidden; padding: 0.05em 0; }
.hero__line-inner { display: block; will-change: transform; }
.hero__line-inner--caps {
  font-family: var(--font-display);
  font-size: 70rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 20rem;
}
.hero__line-inner--low {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 50rem;
  text-transform: lowercase;
  line-height: 1;
}
.hero__scrollcue {
  position: absolute; bottom: 24rem; right: var(--gutter);
  display: flex; align-items: center; gap: 10rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 11rem; letter-spacing: 0.3em; text-transform: uppercase;
  z-index: 10;
}
.hero__scrollcue-arrow { display: inline-block; animation: cue-bounce 1.8s var(--ease) infinite; }
@keyframes cue-bounce {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(4px); }
}

/* ============================================================
   COLLECTION
   ============================================================ */
.collection {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(110rem, 12vh, 170rem) 0 clamp(70rem, 8vh, 120rem);
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.collection__head { max-width: 1860rem; margin: 0 auto; padding: 0 var(--gutter); }
.dot-label {
  display: inline-flex; align-items: center; gap: 22rem;
  font-family: var(--font-display);
  font-size: 40rem; font-weight: 400; line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink);
  position: relative; z-index: 2;
}
.dot-label i {
  width: 10rem; height: 10rem; border-radius: 50%;
  background: var(--ink); flex-shrink: 0;
}
.dot-label--center { display: flex; width: max-content; margin: 0 auto; }
.collection .dot-label { color: var(--brand-green); }
.collection .dot-label i { background: var(--brand-green); }

.collection__wrapper {
  position: relative; z-index: 2;
  max-width: 1860rem; margin: 0 auto;
  display: flex; justify-content: space-between; gap: 75rem;
  padding: clamp(60rem, 8vh, 100rem) var(--gutter) 0;
}

.card { width: 390rem; max-width: 100%; display: block; }
.card__img {
  position: relative;
  height: 512rem;
  overflow: hidden;
  background: #e9e7e4;
}
.card__img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.8s var(--ease);
}
.card:hover .card__img img { transform: scale(1.06); }
.card--leaf { pointer-events: none; }
@media (min-width: 1025px) {
  .card--leaf { transform: translateY(220rem); }
}
.card--leaf .card__img {
  background: transparent;
}
.card--leaf .card__img img {
  object-fit: contain;
  transform: none;
}
.card--leaf:hover .card__img img { transform: none; }

.card__img .button {
  position: absolute; bottom: 20rem; left: 50%;
  transform: translateX(-50%);
  width: 90%;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  z-index: 3;
}
.card:hover .card__img .button { opacity: 1; }

.button {
  border: 1rem solid var(--ink);
  background: var(--white);
  color: #202020;
  display: block;
  font-size: 18rem; font-weight: 400;
  line-height: 1.1;
  padding: 10rem 39rem;
  text-align: center; text-transform: uppercase;
  overflow: hidden; position: relative;
  cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.button:hover { background: var(--ink); color: var(--white); }

.card h3 {
  font-family: var(--font-display);
  font-size: 22rem; font-weight: 500; line-height: 1;
  margin: 32rem 0 16rem;
  overflow: hidden;
  text-transform: uppercase;
  position: relative;
}
.card h3 span { display: block; transition: transform 0.6s var(--ease); }
.card h3 span:nth-child(2) { position: absolute; left: 0; top: 0; transform: translateY(-100%); }
.card:hover h3 span:first-child { transform: translateY(100%); }
.card:hover h3 span:nth-child(2) { transform: translateY(0); }
.card__price { font-size: 18rem; color: var(--ink); }

.card--shop .card__img--shop {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14rem;
  background: linear-gradient(165deg, #f0eeeb 0%, #e5e2de 100%);
  transition: background 0.5s var(--ease);
}
.card--shop__eyebrow {
  font-size: 14rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink-soft);
}
.card--shop__title {
  font-family: var(--font-display);
  font-size: 64rem; font-weight: 500; line-height: 1.05;
  text-transform: uppercase; text-align: center;
  color: var(--ink);
}
.card--shop__arrow {
  font-size: 40rem; line-height: 1; color: var(--ink);
  transition: transform 0.5s var(--ease);
}
.card--shop:hover .card__img--shop { background: linear-gradient(165deg, #ebe8e4 0%, #ddd9d4 100%); }
.card--shop:hover .card--shop__arrow { transform: translateX(14rem); }

/* ============================================================
   text-link with line wipe (button-link)
   ============================================================ */
.button-link {
  position: relative;
  display: inline-flex; align-items: center;
  color: #2d1c14;
  font-size: 18rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding-bottom: 6rem;
  overflow: hidden;
}
.button-link::before,
.button-link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1rem; min-height: 1px;
  background: currentColor;
  transition: transform 0.7s var(--ease);
}
.button-link::after { transform: translateX(-101%); }
.button-link:hover::before { transform: translateX(101%); }
.button-link:hover::after { transform: translateX(0); transition-delay: 0.3s; }

/* ============================================================
   PHILOSOPHY
   ============================================================ */
.philosophy {
  position: relative;
  padding: 0;
  overflow: clip;
  background: var(--white);
}

.philosophy__intro {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--soft-grey);
  padding: var(--header-h) var(--gutter) 90rem;
}

.philosophy__title {
  font-family: var(--font-display);
  font-size: 80rem; font-weight: 500;
  line-height: 1.2;
  margin: 34rem auto 0;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  width: 80%;
  z-index: 2;
}

.philosophy__diagram {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 640px;
  background: var(--white);
  z-index: 2;
}

/* ---------- oil drop ---------- */
.drop { position: absolute; width: 420rem; aspect-ratio: 1; will-change: transform; }
.drop__inner { position: absolute; inset: 0; will-change: transform; }
.drop__ball {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 244, 214, 0.45) 14%, rgba(255, 220, 140, 0) 34%),
    radial-gradient(circle at 68% 82%, rgba(255, 214, 130, 0.85) 0%, rgba(231, 166, 64, 0.4) 26%, rgba(160, 96, 22, 0) 52%),
    radial-gradient(circle at 50% 45%, #e9a83e 0%, #d18a22 38%, #a3611a 68%, #6e3d0d 92%);
  box-shadow:
    inset -18rem -26rem 60rem rgba(255, 226, 160, 0.5),
    inset 14rem 20rem 48rem rgba(122, 71, 16, 0.45),
    0 40rem 70rem rgba(122, 71, 16, 0.28);
  animation: drop-float 7s ease-in-out infinite;
}
.drop__ball::after {
  content: "";
  position: absolute; left: 16%; top: 9%;
  width: 30%; height: 18%;
  border-radius: 50%;
  background: linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0));
  transform: rotate(-28deg);
  filter: blur(2px);
}
.drop__ball::before {
  content: "";
  position: absolute; right: 12%; bottom: 14%;
  width: 22%; height: 12%;
  border-radius: 50%;
  background: radial-gradient(rgba(255, 232, 170, 0.85), rgba(255, 232, 170, 0));
  filter: blur(3px);
}
.drop__shadow {
  position: absolute; left: 50%; bottom: -7%;
  width: 64%; height: 9%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(rgba(122, 71, 16, 0.32), rgba(122, 71, 16, 0) 70%);
  animation: drop-shadow-float 7s ease-in-out infinite;
}
@keyframes drop-float {
  0%, 100% { transform: translateY(-12px); }
  50% { transform: translateY(14px); }
}
@keyframes drop-shadow-float {
  0%, 100% { transform: translateX(-50%) scale(1.06); opacity: 0.8; }
  50% { transform: translateX(-50%) scale(0.92); opacity: 1; }
}

.philosophy__sphere-wrap {
  position: absolute; inset: 0;
  background: var(--white);
  z-index: 2;
}
.philosophy__sphere-wrap canvas {
  display: block;
  width: 100%; height: 100%;
  touch-action: none;
}

/* ---------- callouts (annotations) ---------- */
.callout,
.philosophy__annotation {
  position: absolute;
  z-index: 3;
  overflow: visible;
  pointer-events: none;
}
.callout__title,
.philosophy__annotation-title {
  color: var(--ink);
  display: block;
  font-family: var(--font-sans);
  font-size: 50rem;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
}
.callout__desc,
.philosophy__annotation-desc {
  color: var(--ink);
  display: block;
  font-family: var(--font-sans);
  font-size: 32rem;
  font-weight: 400;
  line-height: 1;
  margin-top: 8rem;
}
.philosophy__line {
  overflow: visible;
  pointer-events: none;
  position: absolute;
}
.philosophy__line polyline {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.philosophy__line circle {
  transform-box: fill-box;
  transform-origin: center;
}
.philosophy__annotation--supporting { right: 210rem; top: 130rem; }
.philosophy__annotation--recover { left: 370rem; top: 450rem; }
.philosophy__annotation--maintain { right: 200rem; top: 700rem; }
.philosophy__line--supporting {
  bottom: 0;
  height: 320rem;
  left: -330rem;
  width: 330rem;
}
.philosophy__line--recover {
  height: 60rem;
  right: -10rem;
  top: 50%;
  transform: translateY(-50%);
  width: 360rem;
}
.philosophy__line--maintain {
  height: 310rem;
  left: -340rem;
  top: -310rem;
  width: 340rem;
}

.philosophy__cta {
  position: absolute;
  left: 50%;
  bottom: 72rem;
  z-index: 4;
  margin-top: 0;
  text-align: center;
  transform: translateX(-50%);
}

/* ============================================================
   SYSTEM INTRO
   ============================================================ */
.system-intro {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 480px;
  overflow: clip;
  display: flex; align-items: center;
}
.system-intro__media { position: absolute; inset: 0; }
.system-intro__media img { width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.system-intro__shade {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(15, 29, 21, 0.55) 8%, rgba(15, 29, 21, 0.08) 64%);
}
.system-intro__title {
  position: relative;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 76rem;
  line-height: 1.08;
  text-transform: uppercase;
  padding: 0 var(--gutter);
}

/* ============================================================
   STEPS
   ============================================================ */
.steps { position: relative; overflow: clip; padding: 150rem 0 30dvh; }
.steps .blob { opacity: 0.34; }
.steps .blob path { fill: #f5f2eb; }
.blob--steps-1 { top: -720rem; right: -980rem; width: 2500rem; transform: rotate(8deg); }
.blob--steps-2 { top: 18%; left: -1180rem; width: 2850rem; transform: rotate(-12deg) scale(1.08); opacity: 0.18; }

.steps__title {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 230rem;
  padding: 0 var(--gutter);
}
.steps__title_number {
  height: 350rem; margin-right: 50rem;
  overflow: hidden;
}
.steps__title_number div {
  color: var(--brand-green);
  font-family: var(--font-display);
  font-size: 376.88rem;
  font-style: italic; font-weight: 400;
  line-height: 0.93;
  will-change: transform;
}
.steps__title_wrap { text-align: left; }
.steps__title_title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 106rem; font-weight: 500;
  line-height: 1.1; text-transform: uppercase;
}
.steps__title_descr {
  font-size: 32rem; font-weight: 400; line-height: 1.25;
  margin-top: 18rem;
  color: var(--ink);
}

.steps__main {
  position: relative;
  z-index: 2;
  padding-bottom: 14dvh;
}

.steps-blob {
  position: absolute;
  top: -30vh;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
.steps-blob__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.steps-blob__canvas,
.steps-blob__memories {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.steps-blob__canvas {
  z-index: 2;
  touch-action: none;
}
.steps-blob__memories {
  z-index: 1;
  display: none;
}
.steps-blob__memory {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(180px, 21vw, 330px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 50% 52%, rgba(255, 245, 206, 0.14), rgba(255, 255, 255, 0.05) 72%, rgba(90, 58, 16, 0.16) 100%);
  opacity: 0;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  filter: saturate(0.9) contrast(0.96);
  -webkit-mask-image: radial-gradient(circle, #000 0 74%, rgba(0, 0, 0, 0.88) 84%, transparent 98%);
          mask-image: radial-gradient(circle, #000 0 74%, rgba(0, 0, 0, 0.88) 84%, transparent 98%);
}
.steps-blob__memory::before,
.steps-blob__memory::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.steps-blob__memory::before {
  box-shadow:
    inset 0 0 28rem rgba(255, 255, 255, 0.62),
    inset 0 -20rem 34rem rgba(80, 58, 24, 0.12);
  z-index: 2;
}
.steps-blob__memory::after {
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 72% 74%, rgba(255, 217, 76, 0.16), rgba(255, 255, 255, 0) 28%);
  mix-blend-mode: screen;
  z-index: 3;
}
.steps-blob__memory img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0.62;
  filter: sepia(0.08) saturate(0.86) contrast(0.92);
}
.steps-blob__memory:nth-child(1) img { object-position: 50% 54%; }
.steps-blob__memory:nth-child(2) img { object-position: 50% 48%; }
.steps-blob__memory:nth-child(3) img { object-position: 48% 50%; }
.steps-blob__memory:nth-child(4) img { object-position: 54% 44%; }
.steps-blob__memory:nth-child(5) img { object-position: 55% 46%; }
.steps-blob__memory.is-active { opacity: 1; }

.steps-block {
  display: flex; align-items: flex-start;
  width: 640rem; max-width: 100%;
  position: relative; z-index: 3;
  box-sizing: border-box;
}
/* reference rhythm: content-height blocks ~12.5vw apart, two steps in view */
.steps-block:nth-child(odd of .steps-block) { margin: 0 180rem 240rem auto; }
.steps-block:nth-child(even of .steps-block) { margin: 0 250rem 240rem auto; }
.steps-block:last-child { margin-bottom: 0; }

.steps-block__number {
  color: var(--brand-green);
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 122rem;
  font-style: italic; font-weight: 200;
  line-height: 1;
  margin-right: 30rem;
}
.steps-block__wrapper { min-width: 0; width: 100%; padding-top: 26rem; }
.steps-block__title {
  font-family: var(--font-display);
  font-size: 40rem; font-weight: 500;
  line-height: 1; margin-bottom: 15rem;
  text-transform: uppercase;
}
.steps-block__subtitle {
  color: var(--brand-green);
  font-size: 20rem;
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 24rem;
}
.steps-block__text { font-size: 20rem; line-height: 1.45; color: var(--ink); }
.steps-block__cue {
  margin-top: 34rem;
  display: flex; align-items: center; gap: 10rem;
  font-size: 12rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* ============================================================
   TRUST
   ============================================================ */
.trust {
  position: relative;
  padding: 180rem 0 110rem;
  color: var(--white);
  overflow: clip;
}
.trust__media { position: absolute; inset: 0; }
.trust__media img { width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.trust__shade { position: absolute; inset: 0; background: rgba(15, 29, 21, 0.72); }
.trust__content { position: relative; text-align: center; padding: 0 var(--gutter); }
.trust__title {
  margin-top: 18rem;
  font-family: var(--font-serif); font-weight: 360;
  font-size: 56rem;
  line-height: 1.12;
}
.trust__marquee {
  position: relative;
  margin-top: 90rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.trust__track { display: flex; width: max-content; will-change: transform; }
.trust__items { display: flex; gap: 90rem; padding-right: 90rem; }
.review { width: 380rem; flex-shrink: 0; }
.review__stars { color: #e0b35c; font-size: 15rem; letter-spacing: 0.3em; }
.review p { margin-top: 12rem; font-family: var(--font-serif); font-weight: 340; font-size: 21rem; line-height: 1.4; }
.review cite { display: block; margin-top: 10rem; font-style: normal; font-size: 12rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.6); }

/* ============================================================
   JOURNAL
   ============================================================ */
.journal { padding: 150rem var(--gutter); }
.journal .section-head { margin-bottom: 70rem; }
.journal__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 48rem;
  max-width: 1380rem; margin: 0 auto;
}
.journal-card { display: block; }
.journal-card__media { overflow: hidden; aspect-ratio: 1.42; }
.journal-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.journal-card:hover .journal-card__media img { transform: scale(1.06); }
.journal-card__date {
  margin-top: 20rem;
  font-size: 12rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink-soft);
}
.journal-card__title {
  margin-top: 8rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: 24rem;
  line-height: 1.25;
  max-width: 26ch;
}
.journal-card__more {
  display: inline-block; margin-top: 16rem;
  font-size: 12rem; letter-spacing: 0.22em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 3rem;
}

/* ============================================================
   FINALE
   ============================================================ */
.finale {
  position: relative;
  padding: 170rem var(--gutter) 190rem;
  display: flex; flex-direction: column; align-items: center;
  overflow: clip;
}
.blob--finale { top: 10%; left: 50%; width: 1500rem; transform: translateX(-50%) rotate(-6deg); }

.orb { position: relative; width: 560rem; aspect-ratio: 1; }
.orb__sphere {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.3) 22%, rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 70% 78%, rgba(255, 240, 200, 0.6) 0%, rgba(255, 240, 200, 0) 36%),
    radial-gradient(circle at 50% 50%, rgba(255, 250, 240, 0.2) 56%, rgba(216, 188, 140, 0.38) 86%, rgba(160, 120, 70, 0.46) 99%);
  box-shadow:
    inset 0 -18rem 42rem rgba(255, 244, 214, 0.55),
    inset 0 14rem 34rem rgba(255, 255, 255, 0.32),
    0 30rem 60rem rgba(122, 71, 16, 0.16);
  animation: drop-float 7s ease-in-out infinite;
}
.orb__sphere::after {
  content: "";
  position: absolute; left: 14%; top: 8%;
  width: 34%; height: 22%;
  border-radius: 50%;
  background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0));
  transform: rotate(-28deg);
  filter: blur(2px);
}
.orb__product {
  position: absolute; inset: 22%;
  width: 56%; height: 56%;
  object-fit: contain;
  filter: drop-shadow(0 16rem 26rem rgba(51, 27, 15, 0.22));
}
.finale__cta { margin-top: 64rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative; z-index: 2;
  background: var(--green-deep);
  color: var(--cream);
  padding: 92rem var(--gutter) 0;
  overflow: clip;
}
.site-footer__brand {
  display: grid;
  grid-template-columns: minmax(240rem, 380rem) minmax(320rem, 1fr) minmax(300rem, 360rem);
  align-items: center;
  gap: 56rem;
  max-width: 1820rem; margin: 0 auto;
  min-width: 0;
}
.site-footer__identity {
  display: inline-flex;
  width: min(320rem, 100%);
}
.site-footer__logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14rem 28rem rgba(0, 0, 0, 0.18));
}
.site-footer__promise {
  max-width: 720rem;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: 34rem;
  font-weight: 360;
  line-height: 1.22;
  color: rgba(247, 245, 239, 0.86);
}
.site-footer__newsletter { max-width: 360rem; justify-self: end; min-width: 0; }
.site-footer__nl-label { font-size: 12rem; letter-spacing: 0.26em; text-transform: uppercase; margin-bottom: 16rem; }
.site-footer__nl-row { display: flex; gap: 12rem; align-items: center; min-width: 0; }
.site-footer__nl-row input {
  flex: 1;
  min-width: 0;
  background: none; border: 0; border-bottom: 1px solid rgba(247, 245, 239, 0.45);
  color: var(--cream);
  font: inherit; font-size: 14rem;
  padding: 8rem 2rem;
  outline: none;
}
.site-footer__nl-row input::placeholder { color: rgba(247, 245, 239, 0.45); }
.site-footer__nl-row .btn { border-color: var(--cream); color: var(--cream); flex: 0 0 auto; }
.site-footer__nl-row .btn:hover { background: var(--cream); color: var(--ink); }
.site-footer__nl-note { margin-top: 10rem; font-size: 13rem; color: var(--blush-light); min-height: 1em; }

.btn {
  display: inline-block;
  padding: 14rem 38rem;
  font-size: 12rem; letter-spacing: 0.26em; text-transform: uppercase;
  border: 1px solid var(--ink);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
  overflow: hidden;
  cursor: pointer;
}
.btn--outline:hover { background: var(--ink); color: var(--cream); }
.btn--solid { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--solid:hover { background: var(--ink-soft); }
.btn--small { padding: 10rem 22rem; }
.btn--block { display: block; width: 100%; text-align: center; }

.site-footer__nav {
  max-width: 1820rem;
  margin: 76rem auto 0;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20rem;
  padding-bottom: 60rem;
}
.site-footer__nav ul { display: flex; flex-wrap: wrap; gap: 40rem; }
.site-footer__nav a {
  font-size: 13rem; letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.85; transition: opacity 0.3s;
}
.site-footer__nav a:hover { opacity: 1; }
.site-footer__follow { font-size: 13rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; }
.site-footer__follow a { text-decoration: underline; text-underline-offset: 4px; margin-left: 12rem; }

.site-footer__legal {
  border-top: 1px solid rgba(247, 245, 239, 0.16);
  margin: 0 calc(-1 * var(--gutter));
  padding: 22rem var(--gutter) 26rem;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14rem;
  font-size: 12rem; color: rgba(247, 245, 239, 0.55);
}
.site-footer__disclaimer { max-width: 560rem; }
.site-footer__legal ul { display: flex; gap: 22rem; }
.site-footer__legal a:hover { color: var(--cream); }

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart-overlay {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(15, 29, 21, 0.4);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
body[data-cart-open="true"] .cart-overlay { opacity: 1; pointer-events: auto; }

.cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 150;
  width: min(430px, 92vw);
  background: var(--white);
  display: flex; flex-direction: column;
  transform: translateX(102%);
  transition: transform 0.7s var(--ease);
  box-shadow: -20px 0 60px rgba(51, 27, 15, 0.18);
}
body[data-cart-open="true"] .cart { transform: translateX(0); }

.cart__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 26px 28px;
  border-bottom: 1px solid rgba(51, 27, 15, 0.12);
}
.cart__head h2 { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500; }
.cart__close { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; }

.cart__items { flex: 1; overflow-y: auto; padding: 10px 28px; }
.cart-item {
  display: grid; grid-template-columns: 72px 1fr auto;
  gap: 16px; align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(51, 27, 15, 0.08);
}
.cart-item__thumb { width: 72px; height: 72px; background: #f1efec; }
.cart-item__thumb img { width: 100%; height: 100%; object-fit: contain; }
.cart-item__name { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.cart-item__qty { display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; }
.cart-item__qty button {
  width: 22px; height: 22px; border: 1px solid rgba(51, 27, 15, 0.3); border-radius: 50%;
  font-size: 12px; line-height: 1;
  transition: background 0.25s, color 0.25s;
}
.cart-item__qty button:hover { background: #f0e9e9; }
.cart-item__price { font-size: 13px; }
.cart-item__price-group {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: max-content;
  text-align: right;
}
.cart-item__price-original {
  color: #087139;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.25;
  text-decoration-color: #087139;
  text-decoration-thickness: 1.5px;
}
.cart-item__price-current {
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}
.cart-item__saving {
  color: #087139;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
}
.cart-item__remove { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); text-decoration: underline; margin-top: 8px; }

.cart__empty { padding: 40px 28px; font-size: 14px; color: var(--ink-soft); display: none; }
.cart.is-empty .cart__empty { display: block; }
.cart.is-empty .cart__foot { display: none; }

.cart__foot { padding: 22px 28px 28px; border-top: 1px solid rgba(51, 27, 15, 0.12); }
.cart__total-row {
  display: flex; justify-content: space-between;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 12px;
}
.cart__savings-row {
  align-items: center;
  background: rgba(8, 113, 57, 0.07);
  border-radius: 3px;
  color: #087139;
  display: flex;
  font-size: 12px;
  font-weight: 650;
  justify-content: space-between;
  margin: -2px 0 14px;
  padding: 10px 12px;
}
.cart__savings-row[hidden] { display: none; }
.cart__savings-row strong { font-size: 13px; font-weight: 750; }
.cart__note { font-size: 12px; color: var(--ink-soft); margin-bottom: 18px; }
.cart .btn { font-size: 12px; padding: 14px 38px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  :root { --header-h: 56px; --gutter: 20px; }
  body { font-size: 16px; }
  .section-label { font-size: 11px; }

  .site-header {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background: transparent;
  }
  .site-nav {
    align-items: center;
    background: rgba(255, 255, 255, 0.82);
    display: flex;
    height: var(--header-h);
    justify-content: space-between;
    min-height: 0;
    overflow: hidden;
    padding: 7px 15px;
    position: relative;
  }
  .site-nav__group { display: none; }
  .site-nav__mobile-actions {
    align-items: center;
    display: flex;
    gap: 16px;
  }
  .site-logo {
    align-items: center;
    display: flex;
    grid-column: auto;
    justify-content: center;
    padding: 0;
    width: 95px;
  }
  .site-logo__img {
    display: block;
    height: auto;
    margin: 0;
    object-fit: contain;
    width: 100%;
  }
  .nav-burger { display: block; }

  .hero__content { bottom: 40px; }
  .hero__eyebrow { font-size: 10px; margin-bottom: 10px; }
  .hero__line-inner--caps { font-size: 30px; margin-bottom: 6px; line-height: 1.1; }
  .hero__line-inner--low { font-size: 24px; }
  .hero__scrollcue { font-size: 9px; right: var(--gutter); bottom: 14px; }

  .collection {
    display: block;
    justify-content: normal;
    min-height: 0;
    padding: 50px 0 70px;
  }
  .collection__head { padding: 0; text-align: center; }
  .collection .dot-label {
    justify-content: center;
    margin: 0 auto;
    width: max-content;
  }
  .collection__wrapper {
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-around;
    margin: 0 15px;
    padding: 50px 0 20px;
  }
  .collection .card { width: 300px; max-width: 100%; margin: 0 auto; }
  .card__img { height: 300px; }
  .dot-label { font-size: 20px; gap: 10px; }
  .dot-label i { width: 6px; height: 6px; }
  .card--shop .card__img--shop { gap: 8px; }
  .card--shop__eyebrow { font-size: 11px; }
  .card--shop__title { font-size: 36px; }
  .card--shop__arrow { font-size: 24px; }
  .card__img .button { display: none; }
  .button { font-size: 13px; padding: 12px 20px; }
  .card h3 { font-size: 20px; margin: 12px 0 5px; overflow: visible; white-space: nowrap; }
  .card h3 span { font-size: 20px; }
  .card h3 span:nth-child(2) { display: none; }
  .card:hover h3 span:first-child { transform: none; }
  .card__price { font-size: 16px; line-height: 1; text-transform: uppercase; }
  .blob { display: none; }

  .philosophy { padding: 0; }
  .philosophy__intro {
    min-height: 100vh;
    min-height: 100svh;
    padding: 76px var(--gutter) 64px;
  }
  .philosophy__title { font-size: 30px; width: 92%; margin: 24px auto 0; }
  .philosophy__diagram {
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 70px var(--gutter);
  }
  .philosophy__sphere-wrap { position: relative; inset: auto; width: 100%; height: 320px; }
  .loader__counter { font-size: 16px; bottom: 14px; }
  .loader__glow { filter: blur(16px); }
  .loader__shadow { filter: blur(18px); height: 70px; width: 300px; }
  .callout,
  .philosophy__annotation { position: relative; inset: auto !important; text-align: center; }
  .callout__title { font-size: 22px; }
  .callout__desc { font-size: 15px; }
  .philosophy__line { display: none; }
  .philosophy__cta {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    margin-top: 0;
    transform: none;
  }
  .button-link { font-size: 14px; border: 1px solid #202020; padding: 12px 0; width: 100%; justify-content: center; }
  .button-link::before, .button-link::after { display: none; }

  .system-intro { height: 100vh; height: 100svh; }
  .system-intro__title { font-size: 32px; }

  .steps { padding: 60px 0 12vh; }
  .steps__title { margin-bottom: 90px; flex-direction: row; }
  .steps__title_number { height: 130px; margin-right: 20px; }
  .steps__title_number div { font-size: 155px; }
  .steps__title_title { font-size: 28px; }
  .steps__title_descr { font-size: 16px; }
  .steps__main { min-height: 0; padding-bottom: 8vh; }
  /* mobile keeps the liquid: the bubble rides centred in the clearing that
     each block's top padding carves out above its text (reference behaviour) */
  .steps-block { width: auto; min-height: 0; padding: 350px var(--gutter) 0; }
  .steps-block:nth-child(odd of .steps-block),
  .steps-block:nth-child(even of .steps-block) { margin: 0 0 70px; }
  .steps-block__number { font-size: 70px; line-height: 0.9; margin-right: 20px; }
  .steps-block__title { font-size: 22px; margin-bottom: 5px; }
  .steps-block__subtitle { font-size: 15px; line-height: 1.3; margin-bottom: 12px; }
  .steps-block__text { font-size: 15px; }
  .steps-block__wrapper { padding-top: 10px; }

  .trust { padding: 80px 0 60px; }
  .trust__title { font-size: 26px; }
  .trust__marquee { margin-top: 44px; }
  .trust__items { gap: 36px; padding-right: 36px; }
  .review { width: 280px; }
  .review p { font-size: 17px; }
  .review__stars { font-size: 12px; }
  .review cite { font-size: 10px; }

  .journal { padding: 70px var(--gutter); }
  .journal .section-head { margin-bottom: 36px; }
  .journal__grid { grid-template-columns: 1fr; gap: 36px; }
  .journal-card__date { font-size: 10px; margin-top: 14px; }
  .journal-card__title { font-size: 19px; }
  .journal-card__more { font-size: 11px; }

  .finale { padding: 80px var(--gutter) 100px; }
  .orb { width: min(420px, 86vw); }
  .finale__cta { margin-top: 40px; }
  .button-link { max-width: 320px; }

  .site-footer { padding: 54px var(--gutter) 0; }
  .site-footer__brand { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .site-footer__identity { width: 188px; }
  .site-footer__logo { filter: drop-shadow(0 9px 18px rgba(0, 0, 0, 0.18)); }
  .site-footer__promise { max-width: none; font-size: 20px; line-height: 1.3; }
  .site-footer__newsletter { justify-self: stretch; max-width: none; padding-bottom: 0; }
  .site-footer__nl-label { font-size: 11px; margin-bottom: 12px; }
  .site-footer__nl-row input { font-size: 13px; padding: 8px 2px; }
  .site-footer__nl-note { font-size: 12px; margin-top: 8px; }
  .btn { font-size: 11px; padding: 10px 22px; }
  .site-footer__nav { margin-top: 42px; padding-bottom: 30px; gap: 20px; align-items: flex-start; flex-direction: column; }
  .site-footer__nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; width: 100%; }
  .site-footer__nav a, .site-footer__follow { font-size: 11px; }
  .site-footer__follow { display: flex; flex-wrap: wrap; gap: 8px 12px; }
  .site-footer__follow a { margin-left: 0; }
  .site-footer__legal { flex-direction: column; align-items: flex-start; padding: 18px var(--gutter) 22px; font-size: 11px; gap: 10px; }

  /* rem-leak overrides */
  .site-nav__group { gap: 16px; }
  .nav-link { gap: 6px; }
  .site-logo { padding: 0; }
  .hero__scrollcue { gap: 8px; }
  .button { border-width: 1px; }
  .drop__ball { box-shadow: inset -8px -12px 26px rgba(255, 226, 160, 0.5), inset 6px 9px 20px rgba(122, 71, 16, 0.45), 0 18px 30px rgba(122, 71, 16, 0.28); }
  .orb__sphere { box-shadow: inset 0 -8px 18px rgba(255, 244, 214, 0.55), inset 0 6px 15px rgba(255, 255, 255, 0.32), 0 14px 26px rgba(122, 71, 16, 0.16); }
  .callout__desc { margin-top: 4px; }
  .steps__title_descr { margin-top: 8px; }
  .steps-block__cue { margin-top: 18px; gap: 8px; font-size: 10px; }
  .trust__title { margin-top: 10px; }
  .review p { margin-top: 8px; }
  .review cite { margin-top: 6px; }
  .journal-card__title { margin-top: 6px; }
  .journal-card__more { margin-top: 10px; padding-bottom: 3px; }
  .site-footer__disclaimer { max-width: none; }
  .site-footer__legal ul { gap: 14px; }
  .orb__product { filter: drop-shadow(0 8px 14px rgba(51, 27, 15, 0.22)); }
}

@media (max-width: 500px) {
  .collection .card { width: 80%; }
}

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.product-page .site-header {
  box-shadow: 0 1px 0 rgba(51, 27, 15, 0.08);
}

.product-page main {
  background: var(--white);
  overflow: visible;
}

/* ---------- commerce hero ---------- */
.product-shell {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(360rem, 1fr);
  gap: clamp(48rem, 5vw, 86rem);
  max-width: 1680rem;
  margin: 0 auto;
  padding: calc(var(--header-h) + 34rem) var(--gutter) 118rem;
  align-items: start;
}

.product-hero {
  grid-column: 1;
  min-width: 0;
}

.product-gallery {
  align-self: start;
  padding-top: 18rem;
}

.product-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10rem;
  margin-bottom: 24rem;
  color: var(--ink-soft);
  font-size: 12rem;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.product-breadcrumb a {
  transition: color 0.25s ease;
}

.product-breadcrumb a:hover {
  color: var(--ink);
}

.product-slider-dot:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
}

.product-gallery__stage {
  position: relative;
  display: grid;
  place-items: center;
  height: min(760rem, calc(100svh - var(--header-h) - 108rem));
  min-height: 560rem;
  overflow: hidden;
  background: var(--white);
}

.product-gallery__stage > img {
  position: relative;
  z-index: 1;
  width: min(88%, 740rem);
  max-height: calc(100% - 24rem);
  height: auto;
  object-fit: contain;
  transition: opacity 0.22s var(--ease), transform 0.7s var(--ease);
}

.product-gallery__stage:hover > img {
  transform: translateY(-8rem) scale(1.015);
}

.product-slider-dots {
  position: absolute;
  left: 50%;
  bottom: 22rem;
  z-index: 2;
  display: inline-flex;
  gap: 8rem;
  transform: translateX(-50%);
}

.product-slider-dot {
  width: 26rem;
  height: 3rem;
  border-radius: 3rem;
  background: rgba(51, 27, 15, 0.16);
  transition: background 0.3s var(--ease), width 0.3s var(--ease);
}

.product-slider-dot.is-active,
.product-slider-dot:hover {
  width: 40rem;
  background: var(--ink);
}

/* ---------- buy rail ---------- */
.product-buy {
  position: sticky;
  top: calc(var(--header-h) + 24rem);
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  height: calc(100svh - var(--header-h) - 48rem);
  overflow-y: auto;
  min-width: 0;
  padding: 6rem 0 32rem 42rem;
  border-left: 1px solid rgba(51, 27, 15, 0.1);
  scrollbar-width: thin;
}

.product-eyebrow {
  color: var(--brand-green);
  font-size: 12rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.product-buy h1 {
  margin-top: 14rem;
  font-family: var(--font-display);
  font-size: clamp(40rem, 2.9vw, 54rem);
  font-weight: 500;
  line-height: 1.02;
  text-transform: uppercase;
}

.product-title-meta {
  margin-top: 12rem;
  color: var(--ink-soft);
  font-size: 13rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.product-summary {
  max-width: 30ch;
  margin-top: 18rem;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 21rem;
  font-weight: 360;
  line-height: 1.42;
}

.product-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10rem;
  margin-top: 18rem;
  padding-bottom: 24rem;
  border-bottom: 1px solid rgba(51, 27, 15, 0.12);
  color: var(--ink-soft);
  font-size: 13rem;
}

.product-rating span {
  color: var(--amber);
  font-size: 13rem;
  letter-spacing: 0.15em;
}

.product-rating strong {
  color: var(--ink);
  font-size: 13rem;
  font-weight: 600;
}

.product-rating a {
  border-bottom: 1px solid rgba(51, 27, 15, 0.32);
  padding-bottom: 2rem;
  transition: color 0.25s ease;
}

.product-rating a:hover {
  color: var(--ink);
}

.product-price-stock {
  display: grid;
  gap: 8rem;
  margin-top: 24rem;
}

.product-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8rem 12rem;
  font-family: var(--font-display);
  line-height: 1;
}

.product-price strong {
  color: var(--ink);
  font-size: 40rem;
  font-weight: 500;
}

.product-price s {
  color: rgba(107, 85, 71, 0.6);
  font-size: 20rem;
  font-weight: 400;
  text-decoration-thickness: 1.5px;
}

.product-price__save {
  align-self: center;
  padding: 6rem 10rem;
  background: #f3f7ef;
  color: var(--brand-green);
  font-family: var(--font-sans);
  font-size: 11rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.product-sale {
  color: var(--ink-soft);
  font-size: 12rem;
  line-height: 1.2;
}

.product-sale strong {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.product-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 26rem;
  border: 1px solid rgba(51, 27, 15, 0.12);
}

.product-facts > div {
  padding: 16rem 18rem 14rem;
}

.product-facts > div + div {
  border-left: 1px solid rgba(51, 27, 15, 0.12);
}

.product-facts dt {
  font-family: var(--font-display);
  font-size: 23rem;
  font-weight: 500;
  line-height: 1;
}

.product-facts dd {
  margin-top: 7rem;
  color: var(--ink-soft);
  font-size: 11rem;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.product-form {
  margin-top: 26rem;
}

.product-qty-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.product-form__row {
  display: grid;
  grid-template-columns: 132rem minmax(0, 1fr);
  gap: 10rem;
  align-items: stretch;
}

.product-qty {
  display: grid;
  grid-template-columns: 40rem 1fr 40rem;
  min-height: 56rem;
  border: 1px solid rgba(51, 27, 15, 0.25);
  background: var(--white);
}

.product-qty button {
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  font-size: 18rem;
  transition: color 0.2s ease;
}

.product-qty button:hover {
  color: var(--ink);
}

.product-qty input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16rem;
  text-align: center;
  -moz-appearance: textfield;
}

.product-qty input::-webkit-outer-spin-button,
.product-qty input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.product-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56rem;
  width: 100%;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  font-size: 12rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.product-add:hover {
  background: var(--brand-green);
  border-color: var(--brand-green);
}

.product-add:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
}

.product-delivery {
  margin-top: 16rem;
  border: 1px solid rgba(15, 103, 38, 0.16);
  background: #f6faf3;
  color: var(--ink);
  font-size: 14rem;
  line-height: 1.45;
  padding: 13rem 16rem;
}

.product-delivery strong {
  font-weight: 600;
}

.product-delivery a {
  border-bottom: 1px solid currentColor;
  color: var(--brand-green);
}

.payment-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 8rem;
  margin-top: 18rem;
}

.payment-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  height: 30rem;
  min-width: 54rem;
  padding: 0 12rem;
  border: 1px solid rgba(51, 27, 15, 0.14);
  border-radius: 4rem;
  background: var(--white);
  color: var(--ink);
  font-size: 12rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

.payment-mark svg {
  display: block;
  flex: 0 0 auto;
}

.payment-mark--apple {
  background: #0b0b0b;
  border-color: #0b0b0b;
  color: var(--white);
  font-weight: 500;
}

.payment-mark--apple svg {
  width: 14rem;
  height: 14rem;
  margin-top: -2rem;
}

.payment-mark--google {
  color: #5f6368;
  font-weight: 500;
}

.payment-mark--google svg {
  width: 13rem;
  height: 13rem;
}

.payment-mark--visa {
  color: #1a1f71;
  font-size: 13rem;
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.payment-mark--mastercard i {
  position: relative;
  display: block;
  width: 29rem;
  height: 18rem;
}

.payment-mark--mastercard i::before,
.payment-mark--mastercard i::after {
  content: "";
  position: absolute;
  top: 0;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
}

.payment-mark--mastercard i::before {
  left: 0;
  background: #eb001b;
}

.payment-mark--mastercard i::after {
  right: 0;
  background: rgba(247, 158, 27, 0.9);
}

.payment-mark--paypal {
  color: #009cde;
  font-style: italic;
  font-weight: 700;
}

.payment-mark--paypal b {
  color: #003087;
  font-weight: 700;
}

.product-trust-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10rem 12rem;
  margin-top: 22rem;
  padding-top: 20rem;
  border-top: 1px solid rgba(51, 27, 15, 0.12);
}

.product-trust-list li {
  position: relative;
  padding-left: 18rem;
  color: var(--ink-soft);
  font-size: 11rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.product-trust-list li::before {
  content: "";
  position: absolute;
  top: 4rem;
  left: 0;
  width: 7rem;
  height: 7rem;
  border: 1px solid var(--brand-green);
  background: #f3f7ef;
  transform: rotate(45deg);
}

.mobile-buy-bar {
  display: none;
}

/* ---------- editorial flow (narrow column beside the sticky rail) ---------- */
.product-detail-flow {
  position: relative;
  grid-column: 1;
  min-width: 0;
}

.product-detail-flow .product-story {
  padding: 116rem 0 0;
  background: transparent;
}

.product-detail-flow .product-story__grid {
  grid-template-columns: minmax(0, 0.85fr) minmax(360rem, 1fr);
  gap: 56rem;
  max-width: none;
  margin: 0;
}

.product-detail-flow .product-details {
  padding: 116rem 0 0;
}

.product-detail-flow .product-details__inner {
  display: block;
  max-width: none;
}

.product-detail-flow .product-details__list {
  margin-top: 44rem;
}

.product-detail-flow .terpene-section {
  display: block;
  max-width: none;
  padding: 116rem 0;
}

.product-detail-flow .terpene-list {
  margin-top: 44rem;
}

.product-detail-flow .product-ritual {
  padding: 96rem 56rem;
  margin-bottom: 116rem;
}

.product-detail-flow .product-ritual__grid {
  max-width: none;
}

.product-detail-flow .product-lab {
  grid-template-columns: minmax(0, 0.95fr) minmax(340rem, 0.74fr);
  min-height: 560rem;
}

.product-detail-flow .product-lab__copy {
  padding: 56rem;
}

.product-detail-flow .product-statement {
  padding: 116rem 0;
}

.product-detail-flow .blob--statement {
  width: 900rem;
}

.product-detail-flow .product-reviews {
  padding: 0;
  background: transparent;
}

.product-detail-flow .product-reviews .section-head {
  max-width: none;
}

.product-detail-flow .review-grid {
  max-width: none;
}

.product-story__copy h2,
.product-details__intro h2,
.terpene-section__intro h2,
.product-lab__copy h2,
.product-ritual__title,
.product-reviews__title,
.related-products__title {
  font-family: var(--font-display);
  font-size: 54rem;
  font-weight: 500;
  line-height: 1.08;
  margin-top: 20rem;
  text-transform: uppercase;
}

/* story */
.product-story {
  padding: 130rem var(--gutter);
  background: var(--soft-grey);
}

.product-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(520rem, 1fr);
  gap: 96rem;
  align-items: start;
  max-width: 1500rem;
  margin: 0 auto;
}

.product-story__copy .dot-label,
.product-details__intro .dot-label {
  color: var(--brand-green);
}

.product-story__copy .dot-label i,
.product-details__intro .dot-label i {
  background: var(--brand-green);
}

.product-story__copy p:not(.dot-label) {
  max-width: 56ch;
  margin-top: 24rem;
  color: var(--ink);
  font-size: 20rem;
  line-height: 1.5;
}

.product-story__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(51, 27, 15, 0.12);
}

.product-stat {
  min-height: 240rem;
  padding: 28rem;
  background: var(--white);
}

.product-stat span {
  display: block;
  color: var(--brand-green);
  font-family: var(--font-display);
  font-size: 40rem;
  font-style: italic;
  line-height: 1;
}

.product-stat strong {
  display: block;
  margin-top: 46rem;
  font-size: 16rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.product-stat p {
  margin-top: 12rem;
  color: var(--ink-soft);
  font-size: 16rem;
  line-height: 1.45;
}

/* details accordions */
.product-details {
  padding: 130rem var(--gutter);
  background: var(--white);
}

.product-details__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(480rem, 1fr);
  gap: 96rem;
  align-items: start;
  max-width: 1500rem;
  margin: 0 auto;
}

.product-details__list {
  border-top: 1px solid rgba(51, 27, 15, 0.16);
}

.product-acc {
  border-bottom: 1px solid rgba(51, 27, 15, 0.16);
}

.product-acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20rem;
  padding: 26rem 2rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 19rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

.product-acc summary:hover {
  color: var(--brand-green);
}

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

.product-acc summary::after {
  content: "";
  flex: 0 0 auto;
  width: 12rem;
  height: 12rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform 0.4s var(--ease);
}

.product-acc[open] summary::after {
  transform: rotate(45deg);
}

.product-acc__body {
  padding: 0 44rem 30rem 2rem;
}

.product-acc__body p {
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: 17rem;
  line-height: 1.55;
}

.product-acc__body a {
  border-bottom: 1px solid rgba(51, 27, 15, 0.3);
  transition: color 0.2s ease;
}

.product-acc__body a:hover {
  color: var(--brand-green);
}

/* terpenes */
.terpene-section {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(560rem, 1fr);
  gap: 92rem;
  align-items: center;
  max-width: 1600rem;
  margin: 0 auto;
  padding: 10rem var(--gutter) 140rem;
}

.terpene-section__intro p:not(.section-label) {
  max-width: 40ch;
  margin-top: 22rem;
  color: var(--ink-soft);
  font-size: 19rem;
  line-height: 1.5;
}

.terpene-list {
  display: grid;
  gap: 24rem;
  align-self: center;
}

.terpene-row {
  display: grid;
  grid-template-columns: 200rem 1fr 210rem;
  gap: 24rem;
  align-items: center;
}

.terpene-row span {
  font-size: 13rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.terpene-row i {
  position: relative;
  height: 6rem;
  overflow: hidden;
  background: #eae4da;
}

.terpene-row i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--level) * 6.666%);
  background: linear-gradient(90deg, var(--brand-green), var(--amber));
}

.terpene-row em {
  color: var(--ink-soft);
  font-size: 14rem;
  font-style: normal;
  line-height: 1.3;
}

/* ritual */
.product-ritual {
  padding: 130rem var(--gutter);
  background: var(--cream);
}

.product-ritual .section-head {
  padding: 0;
}

.product-ritual__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  max-width: 1500rem;
  margin: 64rem auto 0;
  border: 1px solid rgba(51, 27, 15, 0.12);
  background: rgba(51, 27, 15, 0.12);
}

.ritual-step {
  padding: 34rem 32rem 38rem;
  background: var(--white);
}

.ritual-step span {
  display: block;
  color: var(--brand-green);
  font-family: var(--font-display);
  font-size: 40rem;
  font-style: italic;
  line-height: 1;
}

.ritual-step strong {
  display: block;
  margin-top: 44rem;
  font-size: 16rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ritual-step p {
  margin-top: 12rem;
  color: var(--ink-soft);
  font-size: 16rem;
  line-height: 1.5;
}

.product-ritual__note {
  max-width: 740rem;
  margin: 28rem auto 0;
  color: var(--ink-soft);
  font-size: 13rem;
  line-height: 1.5;
  text-align: center;
}

/* lab */
.product-lab {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(440rem, 0.85fr);
  min-height: 640rem;
  background: var(--green-deep);
  color: var(--cream);
}

.product-lab__media {
  overflow: hidden;
}

.product-lab__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-lab__copy {
  align-self: center;
  padding: 90rem clamp(48rem, 6vw, 120rem);
}

.product-lab__copy p:not(.section-label) {
  max-width: 46ch;
  margin-top: 24rem;
  color: rgba(247, 245, 239, 0.72);
  font-size: 19rem;
  line-height: 1.55;
}

.product-lab__link {
  margin-top: 36rem;
  color: var(--cream);
}

/* extraction statement */
.product-statement {
  position: relative;
  padding: 170rem var(--gutter);
  text-align: center;
  overflow: clip;
}

.blob--statement {
  top: 50%;
  left: 50%;
  width: 1100rem;
  transform: translate(-50%, -50%) rotate(-8deg);
  opacity: 0.55;
}

.product-statement .section-label,
.product-statement h2,
.product-statement p {
  position: relative;
  z-index: 1;
}

.product-statement h2 {
  max-width: 16ch;
  margin: 24rem auto 0;
  font-family: var(--font-serif);
  font-size: 64rem;
  font-weight: 360;
  line-height: 1.08;
}

.product-statement p {
  max-width: 58ch;
  margin: 26rem auto 0;
  color: var(--ink-soft);
  font-size: 19rem;
  line-height: 1.55;
}

/* reviews */
.product-reviews {
  padding: 140rem var(--gutter);
  background: #f8f6f1;
}

.product-reviews .section-head {
  max-width: 900rem;
  margin: 0 auto 64rem;
  padding: 0;
}

.product-reviews__note {
  max-width: 56ch;
  margin: 22rem auto 0;
  color: var(--ink-soft);
  font-size: 18rem;
  line-height: 1.5;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rem;
  max-width: 1500rem;
  margin: 0 auto;
}

.product-review-card {
  display: flex;
  flex-direction: column;
  min-height: 260rem;
  padding: 30rem;
  border: 1px solid rgba(51, 27, 15, 0.1);
  background: var(--white);
}

.product-review-card span {
  color: var(--amber);
  font-size: 13rem;
  letter-spacing: 0.22em;
}

.product-review-card p {
  margin-top: 20rem;
  font-family: var(--font-serif);
  font-size: 22rem;
  font-weight: 340;
  line-height: 1.4;
}

.product-review-card cite {
  display: block;
  margin-top: auto;
  padding-top: 22rem;
  color: var(--ink-soft);
  font-size: 11rem;
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.product-review-card--empty {
  border: 1px dashed rgba(51, 27, 15, 0.28);
  background: transparent;
}

.product-review-card--empty strong {
  font-family: var(--font-display);
  font-size: 19rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-review-card--empty p {
  margin-top: 12rem;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 15rem;
  line-height: 1.5;
}

.product-review-card--empty .button-link {
  align-self: flex-start;
  margin-top: auto;
}

/* related */
.related-products {
  padding: 0 var(--gutter) 150rem;
}

.related-products .section-head {
  margin-bottom: 68rem;
}

.related-products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 52rem;
  max-width: 1500rem;
  margin: 0 auto;
}

.related-products__grid .card {
  width: auto;
}

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .product-shell {
    display: block;
    max-width: none;
    padding: calc(var(--header-h) + 26px) var(--gutter) 0;
  }

  .product-breadcrumb {
    gap: 7px;
    margin-bottom: 14px;
    font-size: 10px;
  }

  .product-gallery {
    padding-top: 0;
  }

  .product-gallery__stage {
    height: 340px;
    min-height: 0;
  }

  .product-gallery__stage > img {
    width: min(88%, 420px);
    max-height: calc(100% - 18px);
  }

  .product-slider-dots {
    bottom: 13px;
    gap: 6px;
  }

  .product-slider-dot {
    width: 24px;
    height: 3px;
    border-radius: 999px;
  }

  .product-slider-dot.is-active,
  .product-slider-dot:hover {
    width: 36px;
  }

  .product-buy {
    position: static;
    height: auto;
    overflow: visible;
    max-width: 560px;
    padding: 38px 0 0;
    border-left: 0;
  }

  .product-eyebrow {
    font-size: 11px;
  }

  .product-buy h1 {
    margin-top: 10px;
    font-size: 38px;
    line-height: 1.05;
  }

  .product-title-meta {
    margin-top: 9px;
    font-size: 12px;
  }

  .product-summary {
    margin-top: 14px;
    font-size: 19px;
  }

  .product-rating {
    gap: 9px;
    margin-top: 16px;
    padding-bottom: 20px;
    font-size: 12px;
  }

  .product-rating span,
  .product-rating strong {
    font-size: 12px;
  }

  .product-rating a {
    padding-bottom: 2px;
  }

  .product-price-stock {
    gap: 7px;
    margin-top: 20px;
  }

  .product-price {
    gap: 6px 10px;
  }

  .product-price strong {
    font-size: 34px;
  }

  .product-price s {
    font-size: 18px;
  }

  .product-price__save {
    padding: 5px 8px;
    font-size: 10px;
  }

  .product-sale {
    font-size: 11px;
  }

  .product-facts {
    margin-top: 22px;
  }

  .product-facts > div {
    padding: 12px 14px 11px;
  }

  .product-facts dt {
    font-size: 20px;
  }

  .product-facts dd {
    margin-top: 6px;
    font-size: 10px;
  }

  .product-form {
    margin-top: 22px;
  }

  .product-form__row {
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 10px;
  }

  .product-qty {
    grid-template-columns: 40px 1fr 40px;
    min-height: 52px;
  }

  .product-qty button {
    font-size: 18px;
  }

  .product-qty input {
    font-size: 16px;
  }

  .product-add {
    min-height: 52px;
    font-size: 11px;
  }

  .product-delivery {
    margin-top: 14px;
    padding: 12px 14px;
    font-size: 14px;
  }

  .payment-marks {
    gap: 6px;
    margin-top: 14px;
  }

  .payment-mark {
    gap: 4px;
    height: 28px;
    min-width: 48px;
    padding: 0 10px;
    border-radius: 4px;
    font-size: 11px;
  }

  .payment-mark--apple svg {
    width: 13px;
    height: 13px;
    margin-top: -2px;
  }

  .payment-mark--google svg {
    width: 12px;
    height: 12px;
  }

  .payment-mark--visa {
    font-size: 12px;
  }

  .payment-mark--mastercard i {
    width: 26px;
    height: 16px;
  }

  .payment-mark--mastercard i::before,
  .payment-mark--mastercard i::after {
    width: 16px;
    height: 16px;
  }

  .product-trust-list {
    gap: 8px 10px;
    margin-top: 18px;
    padding-top: 16px;
  }

  .product-trust-list li {
    padding-left: 16px;
    font-size: 10px;
  }

  .product-trust-list li::before {
    top: 3px;
    width: 7px;
    height: 7px;
  }

  .product-story__copy h2,
  .product-details__intro h2,
  .terpene-section__intro h2,
  .product-lab__copy h2,
  .product-ritual__title,
  .product-reviews__title,
  .related-products__title {
    margin-top: 14px;
    font-size: 30px;
  }

  .product-story {
    padding: 70px var(--gutter);
  }

  .product-story__grid {
    display: block;
    max-width: none;
  }

  .product-story__copy p:not(.dot-label) {
    margin-top: 16px;
    font-size: 16px;
  }

  .product-story__stats {
    grid-template-columns: 1fr 1fr;
    margin-top: 34px;
  }

  .product-stat {
    min-height: 0;
    padding: 22px;
  }

  .product-stat span {
    font-size: 32px;
  }

  .product-stat strong {
    margin-top: 28px;
    font-size: 13px;
  }

  .product-stat p {
    margin-top: 10px;
    font-size: 14px;
  }

  .product-details {
    padding: 70px var(--gutter);
  }

  .product-details__inner {
    display: block;
    max-width: none;
  }

  .product-details__list {
    margin-top: 30px;
  }

  .product-acc summary {
    gap: 12px;
    padding: 18px 2px;
    font-size: 15px;
  }

  .product-acc summary::after {
    width: 11px;
    height: 11px;
  }

  .product-acc__body {
    padding: 0 30px 22px 2px;
  }

  .product-acc__body p {
    font-size: 15px;
  }

  .terpene-section {
    display: block;
    max-width: none;
    padding: 0 var(--gutter) 70px;
  }

  .terpene-section__intro p:not(.section-label) {
    margin-top: 16px;
    font-size: 16px;
  }

  .terpene-list {
    gap: 18px;
    margin-top: 34px;
  }

  .terpene-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .terpene-row span {
    font-size: 12px;
  }

  .terpene-row i {
    height: 6px;
  }

  .terpene-row em {
    font-size: 13px;
  }

  .product-ritual {
    padding: 70px var(--gutter);
  }

  .product-ritual__grid {
    grid-template-columns: 1fr;
    margin-top: 34px;
  }

  .ritual-step {
    padding: 24px 22px 26px;
  }

  .ritual-step span {
    font-size: 32px;
  }

  .ritual-step strong {
    margin-top: 26px;
    font-size: 13px;
  }

  .ritual-step p {
    margin-top: 10px;
    font-size: 14px;
  }

  .product-ritual__note {
    max-width: none;
    margin-top: 22px;
    font-size: 12px;
  }

  .product-lab {
    display: block;
    min-height: 0;
  }

  .product-lab__media {
    aspect-ratio: 1.3;
  }

  .product-lab__copy {
    padding: 54px var(--gutter);
  }

  .product-lab__copy p:not(.section-label) {
    margin-top: 16px;
    font-size: 16px;
  }

  .product-lab__link {
    margin-top: 26px;
    border-color: var(--cream);
    color: var(--cream);
  }

  .product-statement {
    padding: 90px var(--gutter);
  }

  .blob--statement {
    width: 640px;
  }

  .product-statement h2 {
    margin-top: 16px;
    font-size: 36px;
  }

  .product-statement p {
    margin-top: 18px;
    font-size: 16px;
  }

  .product-reviews {
    padding: 70px var(--gutter);
  }

  .product-reviews .section-head {
    max-width: none;
    margin-bottom: 34px;
  }

  .product-reviews__note {
    margin-top: 16px;
    font-size: 16px;
  }

  .review-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: none;
  }

  .product-review-card {
    min-height: 0;
    padding: 24px;
  }

  .product-review-card span {
    font-size: 12px;
  }

  .product-review-card p {
    margin-top: 14px;
    font-size: 18px;
  }

  .product-review-card cite {
    padding-top: 18px;
    font-size: 10px;
  }

  .product-review-card--empty strong {
    font-size: 16px;
  }

  .product-review-card--empty p {
    font-size: 14px;
  }

  .product-review-card--empty .button-link {
    margin-top: 18px;
  }

  .related-products {
    padding: 70px var(--gutter) 90px;
  }

  .related-products .section-head {
    margin-bottom: 34px;
  }

  .related-products__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: none;
  }

  .product-detail-flow .product-story,
  .product-detail-flow .product-details {
    padding: 70px 0 0;
  }

  .product-detail-flow .product-statement {
    padding: 70px 0;
  }

  .product-detail-flow .product-story__grid,
  .product-detail-flow .product-details__inner {
    display: block;
  }

  .product-detail-flow .product-details__list,
  .product-detail-flow .terpene-list {
    margin-top: 30px;
  }

  .product-detail-flow .terpene-section {
    padding: 70px 0;
  }

  .product-detail-flow .product-ritual {
    padding: 50px 22px;
    margin-bottom: 70px;
  }

  .product-detail-flow .product-lab {
    display: block;
    min-height: 0;
  }

  .product-detail-flow .product-lab__copy {
    padding: 58px var(--gutter);
  }

  .product-detail-flow .blob--statement {
    width: 640px;
  }

  .product-detail-flow .product-reviews {
    padding: 40px 0 0;
  }
}

/* ---------- phone additions (base sheet styles live in the shared 768 block) ---------- */
@media (max-width: 768px) {
  .product-eyebrow,
  .product-facts,
  .product-price__save {
    display: none;
  }

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

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body:not(.content-page):not(.product-page) {
    overflow-x: visible;
  }

  .product-page {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  .product-shell {
    width: 100%;
    max-width: 100%;
    min-height: 100svh;
    overflow-x: clip;
    padding: calc(var(--header-h) + 10px) var(--gutter) 0;
  }

  .product-detail-flow,
  .product-page main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .site-header,
  .cart-overlay {
    right: auto;
    width: 100vw;
    max-width: 100vw;
  }

  .cart {
    max-width: calc(100vw - 24px);
  }

  body[data-cart-open="false"] .cart {
    visibility: hidden;
  }

  body[data-cart-open="true"] .cart {
    visibility: visible;
  }

  .product-hero {
    min-height: 0;
    padding-bottom: 0;
  }

  .product-breadcrumb {
    display: none;
  }

  .product-gallery__stage {
    height: min(52svh, 440px);
    margin: 0 calc(-1 * var(--gutter));
  }

  .product-gallery__stage img {
    width: min(92%, 360px);
    max-height: calc(100% - 20px);
  }

  .product-slider-dots {
    bottom: 13px;
    gap: 6px;
  }

  .product-slider-dot {
    width: 24px;
    height: 3px;
    border-radius: 999px;
  }

  .product-slider-dot.is-active,
  .product-slider-dot:hover {
    width: 36px;
  }

  .product-buy {
    position: fixed;
    top: auto;
    left: 0;
    right: auto;
    bottom: 0;
    z-index: 130;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: clamp(315px, 40svh, 370px);
    max-width: 100vw;
    margin: 0 auto;
    overflow: hidden;
    padding: 20px 20px calc(16px + env(safe-area-inset-bottom));
    border: 1px solid rgba(51, 27, 15, 0.1);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -18px 54px rgba(51, 27, 15, 0.18);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition:
      height 0.42s cubic-bezier(0.18, 0.9, 0.22, 1),
      padding 0.42s cubic-bezier(0.18, 0.9, 0.22, 1),
      border-radius 0.42s cubic-bezier(0.18, 0.9, 0.22, 1),
      box-shadow 0.42s var(--ease);
  }

  .product-buy::before {
    content: "";
    align-self: center;
    width: 46px;
    height: 4px;
    margin: -8px 0 12px;
    border-radius: 999px;
    background: rgba(51, 27, 15, 0.14);
  }

  .product-buy h1 {
    min-width: 0;
    max-width: none;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 1.08;
    transform-origin: left center;
    transition:
      font-size 0.42s cubic-bezier(0.18, 0.9, 0.22, 1),
      letter-spacing 0.42s cubic-bezier(0.18, 0.9, 0.22, 1),
      transform 0.42s cubic-bezier(0.18, 0.9, 0.22, 1);
    will-change: transform;
  }

  .product-title-meta {
    min-width: 0;
    max-width: 340px;
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.28;
  }

  .product-title-meta,
  .product-summary,
  .product-rating,
  .product-price-stock,
  .product-sale,
  .product-delivery,
  .product-form {
    transform-origin: left center;
    will-change: opacity, transform;
  }

  .product-tags,
  .payment-marks,
  .product-trust-list {
    display: none;
  }

  .product-form {
    display: block;
    margin-top: 10px;
    padding-top: 0;
    order: 8;
  }

  .product-form__row {
    display: block;
  }

  .product-form .product-qty-label,
  .product-qty {
    display: none;
  }

  .product-add {
    min-height: 42px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .product-rating {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .product-rating span {
    flex: 0 0 auto;
    font-size: 11px;
    letter-spacing: 0.12em;
  }

  .product-rating strong,
  .product-rating a {
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 1.2;
  }

  .product-price {
    gap: 6px 10px;
    font-size: 28px;
  }

  .product-price s {
    font-size: 17px;
  }

  .product-price strong {
    font-size: 28px;
  }

  .product-price-stock {
    gap: 4px;
    margin-top: 10px;
  }

  .product-sale {
    display: block;
    font-size: 11px;
  }

  .product-summary {
    min-width: 0;
    max-width: none;
    margin-top: 8px;
    padding-top: 0;
    font-size: 14px;
    line-height: 1.35;
  }

  .product-delivery {
    margin-top: 10px;
    padding: 9px 10px;
    font-size: 10px;
    line-height: 1.3;
  }

  .product-detail-flow .product-story {
    padding-top: 82px;
  }

  .review-grid,
  .ingredient-grid,
  .related-products__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-review-card,
  .ingredient-card,
  .related-products__grid .card,
  .button-link {
    min-width: 0;
    max-width: 100%;
  }

  .product-review-card,
  .product-review-card *,
  .product-story,
  .product-story *,
  .science-section,
  .science-section * {
    overflow-wrap: anywhere;
  }

  .product-sheet-collapsed .product-buy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 112px;
    gap: 10px;
    align-items: center;
    height: clamp(74px, 10svh, 92px);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 38px rgba(51, 27, 15, 0.16);
  }

  .product-sheet-collapsed .product-buy::before,
  .product-sheet-collapsed .product-title-meta,
  .product-sheet-collapsed .product-summary,
  .product-sheet-collapsed .product-tags,
  .product-sheet-collapsed .product-rating,
  .product-sheet-collapsed .product-sale,
  .product-sheet-collapsed .product-delivery,
  .product-sheet-collapsed .payment-marks,
  .product-sheet-collapsed .product-trust-list,
  .product-sheet-collapsed .product-price s,
  .product-sheet-collapsed .product-form .product-qty-label,
  .product-sheet-collapsed .product-qty {
    display: none;
  }

  .product-sheet-collapsed .product-buy h1 {
    overflow: hidden;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-overflow: ellipsis;
    transform: translateY(1px) scale(0.98);
    white-space: nowrap;
  }

  .product-sheet-collapsed .product-price-stock,
  .product-sheet-collapsed .product-price,
  .product-sheet-collapsed .product-form {
    margin: 0;
    padding: 0;
  }

  .product-sheet-collapsed .product-price strong {
    font-size: 20px;
    line-height: 1;
  }

  .product-sheet-collapsed .product-form__row {
    display: block;
  }

  .product-sheet-collapsed .product-add {
    min-height: 50px;
    font-size: 10px;
  }

  .product-sheet-collapsing .product-title-meta,
  .product-sheet-collapsing .product-summary,
  .product-sheet-collapsing .product-rating,
  .product-sheet-collapsing .product-sale,
  .product-sheet-collapsing .product-delivery {
    animation: sheet-line-out 0.26s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  .product-sheet-collapsing .product-delivery { animation-delay: 0ms; }
  .product-sheet-collapsing .product-sale { animation-delay: 35ms; }
  .product-sheet-collapsing .product-rating { animation-delay: 70ms; }
  .product-sheet-collapsing .product-summary { animation-delay: 105ms; }
  .product-sheet-collapsing .product-title-meta { animation-delay: 140ms; }

  .product-sheet-collapsing .product-price-stock {
    transition: transform 0.3s cubic-bezier(0.18, 0.9, 0.22, 1), opacity 0.3s var(--ease);
    transform: translateY(-2px) scale(0.96);
  }

  .product-sheet-expanding .product-title-meta,
  .product-sheet-expanding .product-summary,
  .product-sheet-expanding .product-rating,
  .product-sheet-expanding .product-sale,
  .product-sheet-expanding .product-delivery,
  .product-sheet-expanding .product-form {
    animation: sheet-line-in 0.48s cubic-bezier(0.11, 0.82, 0.39, 0.92) both;
  }

  .product-sheet-expanding .product-title-meta { animation-delay: 80ms; }
  .product-sheet-expanding .product-summary { animation-delay: 120ms; }
  .product-sheet-expanding .product-rating { animation-delay: 160ms; }
  .product-sheet-expanding .product-sale { animation-delay: 200ms; }
  .product-sheet-expanding .product-delivery { animation-delay: 240ms; }
  .product-sheet-expanding .product-form { animation-delay: 280ms; }

  @keyframes sheet-line-out {
    0% {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
    100% {
      opacity: 0;
      transform: translateY(10px) scale(0.94);
      filter: blur(2px);
    }
  }

  @keyframes sheet-line-in {
    0% {
      opacity: 0;
      transform: translateY(14px) scale(0.96);
      filter: blur(2px);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
  }

  .mobile-buy-bar {
    display: none;
  }

  .mobile-buy-bar__info {
    min-width: 0;
  }

  .mobile-buy-bar__info span {
    display: block;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 10px;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mobile-buy-bar__info strong {
    display: block;
    margin-top: 4px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
  }

  .mobile-buy-bar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
  }

  .mobile-buy-bar button:first-of-type {
    border: 1px solid rgba(51, 27, 15, 0.18);
    background: #f7f5ef;
    color: var(--ink);
  }

  .mobile-buy-bar button:last-of-type {
    background: var(--ink);
    color: var(--white);
  }
}

@media (max-width: 420px) {
  .mobile-buy-bar {
    grid-template-columns: minmax(0, 1fr) 86px 76px;
  }

  .mobile-buy-bar button {
    font-size: 9px;
  }
}

@media (max-width: 768px) and (max-height: 740px) {
  .product-buy {
    height: clamp(300px, 45svh, 330px);
    padding: 18px 14px 12px;
  }

  .product-buy::before {
    margin-bottom: 9px;
  }

  .product-buy h1 {
    font-size: 16px;
  }

  .product-title-meta {
    margin-top: 4px;
    font-size: 9px;
  }

  .product-summary {
    display: -webkit-box;
    margin-top: 7px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .product-rating {
    margin-top: 10px;
  }

  .product-price-stock {
    margin-top: 7px;
  }

  .product-price s {
    font-size: 15px;
  }

  .product-price strong {
    font-size: 25px;
  }

  .product-sale {
    font-size: 10px;
  }

  .product-delivery {
    margin-top: 8px;
    padding: 8px;
    font-size: 9px;
  }

  .product-form {
    margin-top: 8px;
  }

  .product-add {
    min-height: 39px;
  }
}

/* ============================================================
   CONTENT PAGES
   ============================================================ */
.content-page .site-header {
  box-shadow: 0 1px 0 rgba(51, 27, 15, 0.08);
}

.content-main {
  background: var(--white);
  overflow: clip;
  padding-top: var(--header-h);
}

.page-section-title {
  font-family: var(--font-display);
  font-size: 58rem;
  font-weight: 500;
  line-height: 1.08;
  margin-top: 18rem;
  text-transform: uppercase;
}

.brand-hero,
.manufacturing-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(520rem, 1fr);
  gap: 72rem;
  min-height: calc(100svh - var(--header-h));
  padding: 42rem var(--gutter) 120rem;
  align-items: center;
}

.brand-hero__copy,
.manufacturing-hero__copy {
  min-width: 0;
}

.brand-hero h1,
.manufacturing-hero h1,
.strain-library__head h2,
.manufacturing-flow__intro h2,
.manufacturing-lab__copy h2 {
  font-family: var(--font-display);
  font-size: clamp(68rem, 6.8vw, 128rem);
  font-weight: 500;
  line-height: 0.94;
  margin-top: 22rem;
  text-transform: uppercase;
}

.brand-hero__lead,
.manufacturing-hero__copy p:not(.section-label) {
  max-width: 680rem;
  margin-top: 26rem;
  color: var(--ink-soft);
  font-size: 24rem;
  line-height: 1.38;
}

.brand-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 28rem;
  margin-top: 42rem;
}

.brand-hero__secondary {
  color: var(--brand-green);
}

.brand-hero__media,
.manufacturing-hero__media {
  min-height: 640rem;
  overflow: hidden;
  background: #f4f1ec;
}

.brand-hero__media {
  display: grid;
  place-items: center;
}

.brand-hero__media img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}

.manufacturing-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-proof,
.manufacturing-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1680rem;
  margin: 0 auto;
  padding: 0 var(--gutter) 126rem;
}

.manufacturing-metrics {
  grid-template-columns: repeat(3, 1fr);
}

.brand-proof__item,
.manufacturing-metrics div {
  min-height: 250rem;
  padding: 30rem;
  border-top: 1px solid rgba(51, 27, 15, 0.14);
  border-right: 1px solid rgba(51, 27, 15, 0.12);
}

.brand-proof__item:first-child,
.manufacturing-metrics div:first-child {
  border-left: 1px solid rgba(51, 27, 15, 0.12);
}

.brand-proof__item span,
.manufacturing-metrics span,
.manufacturing-flow__steps span {
  display: block;
  color: var(--brand-green);
  font-family: var(--font-display);
  font-size: 48rem;
  font-style: italic;
  line-height: 1;
}

.brand-proof__item strong {
  display: block;
  margin-top: 64rem;
  font-size: 15rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.brand-proof__item p,
.manufacturing-metrics p {
  margin-top: 14rem;
  color: var(--ink-soft);
  font-size: 16rem;
  line-height: 1.42;
}

.brand-story,
.manufacturing-flow {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(520rem, 1fr);
  gap: 92rem;
  padding: 126rem var(--gutter);
  background: #f8f6f1;
}

.brand-story__intro h2,
.manufacturing-flow__intro h2 {
  font-family: var(--font-display);
  font-size: 62rem;
  font-weight: 500;
  line-height: 1.08;
  margin-top: 20rem;
  text-transform: uppercase;
}

.brand-story__copy {
  display: grid;
  gap: 24rem;
  color: var(--ink);
  font-size: 22rem;
  line-height: 1.46;
}

.category-products,
.strain-library,
.capability-section {
  padding: 132rem var(--gutter);
}

.category-products .section-head,
.capability-section .section-head {
  margin-bottom: 70rem;
}

.category-product {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420rem, 0.78fr);
  gap: 1px;
  max-width: 1500rem;
  margin: 0 auto;
  background: rgba(51, 27, 15, 0.14);
}

.category-product__media,
.category-product__copy {
  background: var(--white);
}

.category-product__media {
  display: grid;
  min-height: 620rem;
  place-items: center;
  overflow: hidden;
}

.category-product__media img {
  width: min(78%, 720rem);
  height: auto;
  transition: transform 0.8s var(--ease);
}

.category-product:hover .category-product__media img {
  transform: translateY(-10rem) scale(1.02);
}

.category-product__copy {
  padding: 58rem;
  align-self: stretch;
}

.category-product__copy h3 {
  margin-top: 18rem;
  font-family: var(--font-display);
  font-size: 54rem;
  font-weight: 500;
  line-height: 1.02;
  text-transform: uppercase;
}

.category-product__copy p:not(.section-label) {
  margin-top: 22rem;
  color: var(--ink-soft);
  font-size: 19rem;
  line-height: 1.46;
}

.category-product__facts {
  display: grid;
  gap: 1px;
  margin: 40rem 0;
  background: rgba(51, 27, 15, 0.12);
}

.category-product__facts div {
  display: grid;
  grid-template-columns: 140rem 1fr;
  gap: 22rem;
  padding: 16rem 0;
  background: var(--white);
}

.category-product__facts dt {
  color: var(--brand-green);
  font-size: 12rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.category-product__facts dd {
  color: var(--ink);
  font-size: 16rem;
}

.strain-library {
  background: var(--green-deep);
  color: var(--cream);
}

.strain-library__head {
  max-width: 1040rem;
  margin: 0 auto 72rem;
  text-align: center;
}

.strain-library__head p:not(.section-label) {
  margin: 24rem auto 0;
  max-width: 760rem;
  color: rgba(247, 245, 239, 0.7);
  font-size: 20rem;
  line-height: 1.45;
}

.strain-grid,
.capability-grid,
.manufacturing-flow__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  max-width: 1500rem;
  margin: 0 auto;
  background: rgba(247, 245, 239, 0.18);
}

.strain-card,
.capability-card,
.manufacturing-flow__steps article {
  min-height: 285rem;
  padding: 30rem;
  background: #fbfaf7;
}

.strain-card {
  background: rgba(247, 245, 239, 0.06);
  color: var(--cream);
}

.strain-card--featured {
  background: var(--cream);
  color: var(--ink);
}

.strain-card span,
.capability-card span {
  display: block;
  color: var(--brand-green);
  font-size: 11rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
}

.strain-card:not(.strain-card--featured) span {
  color: var(--blush-light);
}

.strain-card h3,
.capability-card h3,
.manufacturing-flow__steps h3 {
  margin-top: 74rem;
  font-family: var(--font-display);
  font-size: 30rem;
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
}

.strain-card p,
.capability-card p,
.manufacturing-flow__steps p {
  margin-top: 16rem;
  color: rgba(247, 245, 239, 0.72);
  font-size: 16rem;
  line-height: 1.42;
}

.strain-card--featured p,
.capability-card p,
.manufacturing-flow__steps p {
  color: var(--ink-soft);
}

.strain-card a {
  display: inline-block;
  margin-top: 22rem;
  border-bottom: 1px solid currentColor;
  color: var(--brand-green);
  font-size: 12rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.brand-quality,
.manufacturing-lab {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420rem, 0.74fr);
  min-height: 700rem;
  background: var(--green-deep);
  color: var(--cream);
}

.manufacturing-lab {
  grid-template-columns: minmax(420rem, 0.78fr) minmax(0, 0.95fr);
}

.brand-quality__media,
.manufacturing-lab__media {
  overflow: hidden;
}

.brand-quality__media img,
.manufacturing-lab__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-quality__copy,
.manufacturing-lab__copy {
  align-self: center;
  padding: 74rem var(--gutter);
}

.brand-quality__copy h2 {
  margin-top: 20rem;
  font-family: var(--font-display);
  font-size: 64rem;
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
}

.brand-quality__copy p:not(.section-label),
.manufacturing-lab__copy p:not(.section-label) {
  margin-top: 24rem;
  color: rgba(247, 245, 239, 0.74);
  font-size: 20rem;
  line-height: 1.48;
}

.brand-quality__link,
.manufacturing-lab__link {
  margin-top: 34rem;
  color: var(--cream);
}

.manufacturing-flow__steps {
  grid-template-columns: repeat(2, 1fr);
  max-width: none;
  background: rgba(51, 27, 15, 0.12);
}

.manufacturing-flow__steps article {
  background: var(--white);
}

.manufacturing-flow__steps h3 {
  margin-top: 56rem;
}

.capability-grid {
  grid-template-columns: repeat(3, 1fr);
  background: rgba(51, 27, 15, 0.12);
}

.article-shell {
  background: var(--white);
}

.article-hero {
  padding: 0 var(--gutter) 112rem;
  background: #f8f6f1;
}

.article-hero__media {
  height: min(650rem, 64svh);
  min-height: 500rem;
  overflow: hidden;
}

.article-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-hero__copy {
  max-width: 1260rem;
  margin: 58rem auto 0;
}

.article-date {
  margin-top: 18rem;
  color: var(--brand-green);
  font-size: 12rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.article-hero h1 {
  max-width: 1180rem;
  margin-top: 18rem;
  font-family: var(--font-display);
  font-size: clamp(62rem, 6vw, 116rem);
  font-weight: 500;
  line-height: 0.96;
  text-transform: uppercase;
}

.article-hero__copy > p:not(.article-date) {
  max-width: 760rem;
  margin-top: 24rem;
  color: var(--ink-soft);
  font-size: 24rem;
  line-height: 1.38;
}

.article-layout {
  display: grid;
  grid-template-columns: 250rem minmax(0, 860rem);
  gap: 118rem;
  max-width: 1320rem;
  margin: 0 auto;
  padding: 118rem var(--gutter) 132rem;
}

.article-rail {
  position: sticky;
  top: calc(var(--header-h) + 34rem);
  align-self: start;
  display: grid;
  gap: 16rem;
}

.article-rail span {
  color: var(--brand-green);
  font-size: 12rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.article-rail a {
  width: max-content;
  border-bottom: 1px solid rgba(51, 27, 15, 0.2);
  color: var(--ink-soft);
  font-size: 13rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.article-rail a:hover {
  border-color: currentColor;
  color: var(--ink);
}

.article-body {
  display: grid;
  gap: 74rem;
  min-width: 0;
}

.article-body h2 {
  font-family: var(--font-display);
  font-size: 48rem;
  font-weight: 500;
  line-height: 1.08;
  text-transform: uppercase;
}

.article-body p {
  margin-top: 22rem;
  color: var(--ink);
  font-size: 22rem;
  line-height: 1.52;
}

.article-checklist {
  margin-top: 34rem;
  padding: 28rem;
  background: #f8f6f1;
}

.article-checklist span {
  display: block;
  color: var(--brand-green);
  font-size: 12rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.article-checklist ul {
  display: grid;
  gap: 12rem;
  margin-top: 18rem;
}

.article-checklist li {
  position: relative;
  padding-left: 22rem;
  color: var(--ink-soft);
  font-size: 18rem;
  line-height: 1.42;
}

.article-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8rem;
  height: 8rem;
  border: 1px solid var(--brand-green);
  transform: rotate(45deg);
}

.article-comparison {
  padding: 46rem;
  background: var(--green-deep);
  color: var(--cream);
}

.article-comparison h2 {
  color: var(--cream);
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 34rem;
  background: rgba(247, 245, 239, 0.18);
}

.comparison-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

.comparison-grid div {
  min-height: 210rem;
  padding: 28rem;
  background: rgba(247, 245, 239, 0.06);
}

.comparison-grid h3 {
  color: var(--blush-light);
  font-size: 12rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.comparison-grid p {
  color: rgba(247, 245, 239, 0.72);
  font-size: 17rem;
  line-height: 1.45;
}

.article-callout {
  padding: 52rem 0 0;
  border-top: 1px solid rgba(51, 27, 15, 0.16);
}

.article-callout p {
  color: var(--ink-soft);
}

.article-more {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  padding: 0 var(--gutter) 132rem;
  background: rgba(51, 27, 15, 0.12);
}

.article-more a {
  display: grid;
  min-height: 160rem;
  place-items: center;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 22rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.12;
  padding: 30rem;
  text-align: center;
  text-transform: uppercase;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.article-more a:hover {
  background: var(--ink);
  color: var(--cream);
}

@media (max-width: 1024px) {
  .content-main {
    padding-top: var(--header-h);
  }

  .page-section-title {
    font-size: 36px;
  }

  .brand-hero,
  .manufacturing-hero {
    grid-template-columns: 1fr;
    gap: 34px;
    min-height: auto;
    padding: 26px var(--gutter) 72px;
  }

  .brand-hero h1,
  .manufacturing-hero h1,
  .strain-library__head h2,
  .manufacturing-flow__intro h2,
  .manufacturing-lab__copy h2 {
    font-size: clamp(44px, 11vw, 78px);
    line-height: 0.96;
    margin-top: 16px;
  }

  .brand-hero__lead,
  .manufacturing-hero__copy p:not(.section-label) {
    margin-top: 18px;
    font-size: 18px;
    line-height: 1.45;
  }

  .brand-hero__actions {
    gap: 18px;
    margin-top: 28px;
  }

  .brand-hero__media,
  .manufacturing-hero__media {
    min-height: 0;
    aspect-ratio: 1.08;
  }

  .brand-proof,
  .manufacturing-metrics {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 var(--gutter) 70px;
  }

  .brand-proof__item,
  .manufacturing-metrics div {
    min-height: 190px;
    padding: 22px;
  }

  .brand-proof__item span,
  .manufacturing-metrics span,
  .manufacturing-flow__steps span {
    font-size: 36px;
  }

  .brand-proof__item strong {
    margin-top: 44px;
    font-size: 12px;
  }

  .brand-proof__item p,
  .manufacturing-metrics p {
    font-size: 14px;
  }

  .brand-story,
  .manufacturing-flow {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 70px var(--gutter);
  }

  .brand-story__intro h2,
  .manufacturing-flow__intro h2 {
    font-size: 36px;
  }

  .brand-story__copy {
    gap: 18px;
    font-size: 18px;
  }

  .category-products,
  .strain-library,
  .capability-section {
    padding: 70px var(--gutter);
  }

  .category-products .section-head,
  .capability-section .section-head {
    margin-bottom: 36px;
  }

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

  .category-product__media {
    min-height: 0;
    aspect-ratio: 1.14;
  }

  .category-product__copy {
    padding: 28px;
  }

  .category-product__copy h3 {
    font-size: 34px;
  }

  .category-product__copy p:not(.section-label) {
    font-size: 16px;
  }

  .category-product__facts {
    margin: 28px 0;
  }

  .category-product__facts div {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 0;
  }

  .category-product__facts dt {
    font-size: 10px;
  }

  .category-product__facts dd {
    font-size: 14px;
  }

  .strain-library__head {
    margin-bottom: 36px;
  }

  .strain-library__head p:not(.section-label) {
    font-size: 16px;
  }

  .strain-grid,
  .capability-grid,
  .manufacturing-flow__steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .strain-card,
  .capability-card,
  .manufacturing-flow__steps article {
    min-height: 230px;
    padding: 22px;
  }

  .strain-card h3,
  .capability-card h3,
  .manufacturing-flow__steps h3 {
    margin-top: 54px;
    font-size: 24px;
  }

  .strain-card p,
  .capability-card p,
  .manufacturing-flow__steps p {
    font-size: 14px;
  }

  .brand-quality,
  .manufacturing-lab {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .brand-quality__media,
  .manufacturing-lab__media {
    aspect-ratio: 1.36;
  }

  .manufacturing-lab__media {
    order: -1;
  }

  .brand-quality__copy,
  .manufacturing-lab__copy {
    padding: 52px var(--gutter) 60px;
  }

  .brand-quality__copy h2 {
    font-size: 38px;
  }

  .brand-quality__copy p:not(.section-label),
  .manufacturing-lab__copy p:not(.section-label) {
    font-size: 16px;
  }

  .article-hero {
    padding: 0 var(--gutter) 60px;
  }

  .article-hero__media {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.16;
  }

  .article-hero__copy {
    margin-top: 34px;
  }

  .article-date {
    font-size: 10px;
  }

  .article-hero h1 {
    font-size: clamp(38px, 10vw, 68px);
    line-height: 0.98;
  }

  .article-hero__copy > p:not(.article-date) {
    font-size: 18px;
  }

  .article-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 64px var(--gutter) 76px;
  }

  .article-rail {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
  }

  .article-rail span {
    width: 100%;
    font-size: 10px;
  }

  .article-rail a {
    font-size: 10px;
  }

  .article-body {
    gap: 48px;
  }

  .article-body h2 {
    font-size: 30px;
  }

  .article-body p {
    margin-top: 16px;
    font-size: 17px;
  }

  .article-checklist {
    margin-top: 24px;
    padding: 22px;
  }

  .article-checklist li {
    font-size: 15px;
  }

  .article-comparison {
    padding: 28px;
  }

  .comparison-grid,
  .comparison-grid--three {
    grid-template-columns: 1fr;
  }

  .comparison-grid div {
    min-height: 0;
    padding: 22px;
  }

  .comparison-grid p {
    font-size: 15px;
  }

  .article-more {
    grid-template-columns: 1fr;
    padding: 0 var(--gutter) 70px;
  }

  .article-more a {
    min-height: 108px;
    font-size: 18px;
  }
}

@media (max-width: 560px) {
  .brand-proof,
  .manufacturing-metrics,
  .strain-grid,
  .capability-grid,
  .manufacturing-flow__steps {
    grid-template-columns: 1fr;
  }

  .brand-hero h1,
  .manufacturing-hero h1,
  .strain-library__head h2,
  .manufacturing-flow__intro h2,
  .manufacturing-lab__copy h2 {
    font-size: clamp(38px, 15vw, 58px);
  }

  .page-section-title,
  .brand-story__intro h2,
  .manufacturing-flow__intro h2,
  .brand-quality__copy h2 {
    font-size: 30px;
  }

  .brand-hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .category-product__copy h3,
  .article-body h2 {
    font-size: 27px;
  }
}

/* ============================================================
   JOURNAL POST FOUNDATION
   ============================================================ */
.journal-post-page {
  background: #f8f6f1;
}

.journal-main {
  background: #f8f6f1;
}

.journal-post {
  background: #f8f6f1;
  color: var(--ink);
}

.journal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: calc(100svh - var(--header-h));
}

.journal-hero__media {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  overflow: hidden;
  background: #e7e2d9;
}

.journal-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.015);
  transition:
    opacity 2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.journal-hero__media.is-visible img {
  opacity: 0.96;
  transform: scale(1);
}

.journal-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100svh - var(--header-h));
  padding: 70rem var(--gutter) 78rem 70rem;
}

.journal-crumb {
  margin-bottom: auto;
}

.journal-date {
  color: var(--brand-green);
  font-size: 12rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  line-height: 1;
  text-transform: uppercase;
}

.journal-hero h1 {
  max-width: 760rem;
  margin-top: 24rem;
  font-family: var(--font-serif);
  font-size: clamp(62rem, 5vw, 86rem);
  font-weight: 420;
  letter-spacing: 0.01em;
  line-height: 1.04;
  text-transform: none;
}

.journal-standfirst {
  max-width: 660rem;
  margin-top: 24rem;
  color: var(--ink-soft);
  font-size: 24rem;
  line-height: 1.35;
}

.journal-meta-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18rem;
  padding: 26rem var(--gutter);
  border-top: 1px solid rgba(51, 27, 15, 0.1);
  border-bottom: 1px solid rgba(51, 27, 15, 0.1);
  color: rgba(51, 27, 15, 0.48);
  font-size: 12rem;
  letter-spacing: 0.22em;
  line-height: 1.35;
  text-transform: uppercase;
}

.journal-body {
  display: grid;
  gap: 84rem;
  padding: 108rem 0 126rem;
}

.journal-copy {
  max-width: 610rem;
  padding: 0 var(--gutter);
}

.journal-copy--right {
  margin-left: 50%;
  padding-left: 70rem;
}

.journal-copy p {
  color: var(--ink);
  font-size: 22rem;
  line-height: 1.78;
}

.journal-copy p + p {
  margin-top: 30rem;
}

.journal-media-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 82rem;
  align-items: start;
  padding: 0 var(--gutter);
}

.journal-media-text .journal-copy {
  padding: 0 70rem 0 0;
}

.journal-media {
  display: grid;
  gap: 16rem;
}

.journal-media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.018);
  transition:
    opacity 1.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.journal-media.is-visible img {
  opacity: 1;
  transform: scale(1);
}

.journal-media--portrait {
  max-width: 540rem;
}

.journal-media--portrait img {
  aspect-ratio: 4 / 5;
}

.journal-media--wide {
  max-width: 1180rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.journal-media--wide img {
  aspect-ratio: 1.62;
}

.journal-media figcaption {
  max-width: 520rem;
  color: rgba(51, 27, 15, 0.5);
  font-size: 13rem;
  letter-spacing: 0.04em;
  line-height: 1.48;
}

.journal-quote {
  max-width: 880rem;
  margin: 0 auto;
  padding: 28rem var(--gutter) 8rem;
}

.journal-quote p {
  font-family: var(--font-serif);
  font-size: 56rem;
  font-weight: 420;
  letter-spacing: 0.01em;
  line-height: 1.12;
  text-align: center;
}

.journal-next {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  padding: 0 var(--gutter) 126rem;
  background: rgba(51, 27, 15, 0.12);
}

.journal-next a {
  display: grid;
  min-width: 0;
  min-height: 158rem;
  place-items: center;
  background: #f8f6f1;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 28rem;
  font-weight: 420;
  line-height: 1.1;
  padding: 28rem;
  text-align: center;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}

.journal-next a:hover {
  background: var(--ink);
  color: var(--cream);
}

[data-journal-reveal] {
  opacity: 0;
  transform: translateY(32rem);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--journal-delay, 0s);
}

[data-journal-reveal="image"] {
  opacity: 1;
  transform: none;
}

[data-journal-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1024px) {
  .journal-hero {
    display: block;
    min-height: auto;
  }

  .journal-hero__media {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .journal-hero__copy {
    display: block;
    min-height: auto;
    padding: 34px var(--gutter) 64px;
  }

  .journal-crumb {
    margin-bottom: 52px;
  }

  .journal-date {
    font-size: 10px;
  }

  .journal-hero h1 {
    max-width: 100%;
    margin-top: 16px;
    font-size: clamp(38px, 10.6vw, 58px);
    line-height: 1.08;
  }

  .journal-standfirst {
    margin-top: 18px;
    font-size: 19px;
    line-height: 1.36;
  }

  .journal-meta-strip {
    padding: 18px var(--gutter);
    font-size: 10px;
  }

  .journal-body {
    gap: 58px;
    padding: 72px 0 82px;
  }

  .journal-copy,
  .journal-copy--right {
    max-width: none;
    margin-left: 0;
    padding: 0 var(--gutter);
  }

  .journal-copy p {
    font-size: 18px;
    line-height: 1.85;
  }

  .journal-copy p + p {
    margin-top: 24px;
  }

  .journal-media-text {
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 0 var(--gutter);
  }

  .journal-media-text .journal-copy {
    padding: 0;
  }

  .journal-media--portrait,
  .journal-media--wide {
    max-width: none;
    padding: 0 var(--gutter);
  }

  .journal-media-text .journal-media--portrait {
    padding: 0;
  }

  .journal-media--wide img {
    aspect-ratio: 4 / 5;
  }

  .journal-media figcaption {
    font-size: 12px;
  }

  .journal-quote {
    padding: 14px var(--gutter) 0;
  }

  .journal-quote p {
    font-size: clamp(30px, 8vw, 42px);
  }

  .journal-next {
    grid-template-columns: 1fr;
    padding: 0 var(--gutter) 78px;
  }

  .journal-next a {
    min-height: 104px;
    font-size: 22px;
    padding: 26px;
  }

  [data-journal-reveal]:not([data-journal-reveal="image"]):not(.is-visible) {
    transform: translateY(24px);
  }
}

@media (max-width: 560px) {
  .journal-hero__copy {
    padding-bottom: 54px;
  }

  .journal-meta-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.journal-slide-post {
  background: #f8f6f1;
}

.journal-slide {
  position: relative;
  display: grid;
  --slide-fit: 1;
  height: var(--journal-slide-h, calc(100svh - var(--header-h)));
  min-height: var(--journal-slide-h, calc(100svh - var(--header-h)));
  overflow: hidden;
  place-items: center;
  padding: clamp(34px, 5svh, 72px) var(--gutter);
  border-bottom: 1px solid rgba(51, 27, 15, 0.1);
  background: #f8f6f1;
  isolation: isolate;
}

.journal-slide--hero {
  padding: 0;
  place-items: stretch;
}

.journal-slide__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(44px, 6vw, 96px);
  align-items: center;
  height: auto;
  max-height: 100%;
  min-height: 0;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  transform-origin: 50% 50%;
}

.journal-slide__grid--reverse .journal-slide__media {
  order: 2;
}

.journal-slide__grid--reverse .journal-slide__copy {
  order: 1;
}

.journal-slide__grid--hero {
  height: var(--journal-slide-h, calc(100svh - var(--header-h)));
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  gap: 0;
}

.journal-slide__grid--hero .journal-slide__media {
  align-self: stretch;
  height: var(--journal-slide-h, calc(100svh - var(--header-h)));
  margin: 0;
}

.journal-slide--image-split {
  padding: 0;
  place-items: stretch;
}

.journal-slide--image-split .journal-slide__grid {
  --image-column: 50%;
  align-items: stretch;
  gap: 0;
  height: var(--journal-slide-h, calc(100svh - var(--header-h)));
  max-width: none;
}

.journal-slide__grid--image-half {
  grid-template-columns: minmax(0, var(--image-column)) minmax(0, 1fr);
}

.journal-slide__grid--image-right {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--image-column));
}

.journal-slide__grid--image-third {
  --image-column: 33.333%;
}

.journal-slide--image-split .journal-slide__grid--image-third {
  --image-column: 33.333%;
}

.journal-slide--image-split .journal-slide__copy {
  align-self: center;
  justify-self: center;
  width: min(100%, 680px);
  padding: clamp(42px, 5.5vw, 86px);
}

.journal-slide__copy {
  position: relative;
  z-index: 2;
  max-width: 640px;
  min-height: 0;
  transform-origin: 50% 50%;
}

.journal-slide__copy--hero {
  align-self: center;
  max-width: 860px;
  padding: clamp(34px, 5svh, 72px) clamp(42px, 5vw, 78px);
}

.journal-slide__copy--center {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.journal-slide__eyebrow,
.journal-slide__standfirst,
.journal-slide__copy p,
.journal-slide__copy h1,
.journal-slide__copy h2,
.journal-slide__copy h3,
.journal-slide__copy dl,
.journal-slide__copy ul,
.journal-slide__copy .journal-slide__actions,
.journal-slide__copy .journal-source-list,
.journal-crumb {
  will-change: opacity, transform;
}

.journal-slide__eyebrow {
  color: var(--brand-green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  line-height: 1.2;
  margin-bottom: 24px;
  text-transform: uppercase;
}

.journal-slide__copy h1,
.journal-slide__copy h2 {
  font-family: var(--font-serif);
  font-size: clamp(38px, 5.9svh, 68px);
  font-weight: 420;
  letter-spacing: 0;
  line-height: 1.02;
  text-transform: none;
}

.journal-slide__copy h2 {
  font-size: clamp(32px, 5.2svh, 58px);
}

.journal-slide__standfirst,
.journal-slide__copy > p {
  color: rgba(51, 27, 15, 0.72);
  font-size: clamp(17px, 2.3svh, 21px);
  line-height: 1.48;
}

.journal-slide__standfirst {
  max-width: 680px;
  margin-top: clamp(14px, 2.4svh, 24px);
}

.journal-slide__copy > p {
  max-width: 610px;
  margin-top: clamp(14px, 2.5svh, 24px);
}

.journal-slide--hero .journal-slide__copy--hero,
.journal-slide:not(.journal-slide--hero) > .journal-slide__grid,
.journal-slide__frame {
  transform: scale(var(--slide-fit));
  transform-origin: 50% 50%;
}

@media (min-width: 1025px) {
  .journal-slide.journal-slide--image-split > .journal-slide__grid {
    transform: none;
  }

  .journal-slide--image-split .journal-slide__copy {
    transform: scale(var(--slide-fit));
    transform-origin: 50% 50%;
  }

  .journal-slide--image-split .journal-slide__media--portrait-diagram {
    height: var(--journal-slide-h, calc(100svh - var(--header-h)));
  }
}

.journal-slide__frame {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.journal-slide__copy--center > p {
  margin-left: auto;
  margin-right: auto;
}

.journal-slide__rail {
  position: absolute;
  top: clamp(26px, 4vw, 54px);
  left: var(--gutter);
  z-index: 3;
  color: rgba(51, 27, 15, 0.38);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
}

.journal-slide__media,
.journal-slide__visual,
.journal-answer-cards,
.journal-compare,
.journal-faq-list {
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 58%;
  will-change: opacity, transform;
}

.journal-slide__media {
  position: relative;
  display: grid;
  height: min(56svh, 600px);
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: #ece8df;
}

.journal-slide__media img {
  display: block;
}

.journal-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.journal-slide__media--cover {
  height: var(--journal-slide-h, calc(100svh - var(--header-h)));
  min-height: 0;
  background: #dcd8cf;
}

.journal-slide__media--cover img {
  opacity: 0.94;
}

.article-page--eu-reset .journal-slide--hero .journal-slide__media--cover img {
  object-position: 66% center;
}

.journal-slide__media--bleed {
  align-self: stretch;
  height: var(--journal-slide-h, calc(100svh - var(--header-h)));
  margin: 0;
  min-height: 0;
}

.journal-slide__media--bleed img {
  height: 100%;
  object-fit: cover;
}

.journal-slide__media--diagram {
  place-items: center;
  padding: clamp(18px, 3vw, 42px);
  background: #f8f6f1;
}

.journal-slide__media--diagram img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.journal-slide__media--portrait-diagram {
  height: min(68svh, 760px);
}

.journal-slide__media--portrait-diagram img {
  object-fit: contain;
}

.journal-slide__media-title {
  display: none;
}

.journal-slide__media--product {
  height: min(48svh, 500px);
  min-height: 0;
  place-items: center;
  padding: clamp(28px, 5vw, 64px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.2)),
    #ede8de;
}

.journal-slide__media--product img {
  width: min(100%, 620px);
  height: auto;
  max-height: min(38svh, 440px);
  object-fit: contain;
  filter: drop-shadow(0 28px 36px rgba(51, 27, 15, 0.14));
}

.journal-slide__visual {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(24px, 4vw, 48px);
  height: min(48svh, 500px);
  min-height: 0;
  overflow: hidden;
  padding: clamp(28px, 5vw, 64px);
  background:
    radial-gradient(circle at 18% 18%, rgba(13, 103, 38, 0.12), transparent 30%),
    radial-gradient(circle at 82% 76%, rgba(194, 118, 27, 0.13), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(237, 232, 222, 0.76)),
    #ede8de;
}

.journal-slide__visual::before,
.journal-slide__visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.journal-slide__visual::before {
  inset: 24px;
  border: 1px solid rgba(51, 27, 15, 0.12);
}

.journal-slide__visual::after {
  width: 72%;
  height: 1px;
  background: rgba(51, 27, 15, 0.14);
}

.journal-slide__visual figcaption {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
  max-width: 360px;
  color: rgba(51, 27, 15, 0.66);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}

.journal-slide__visual figcaption strong {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 420;
  line-height: 1;
}

.journal-slide__visual--image {
  display: block;
  padding: 0;
  background: #e9e4da;
}

.journal-slide__visual--image::before {
  inset: 0;
  z-index: 2;
  border-color: rgba(248, 246, 241, 0.44);
}

.journal-slide__visual--image::after {
  display: none;
}

.journal-slide__visual--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.journal-slide__visual--image figcaption {
  position: absolute;
  right: clamp(16px, 2vw, 26px);
  bottom: clamp(16px, 2vw, 26px);
  left: clamp(16px, 2vw, 26px);
  z-index: 3;
  max-width: min(76%, 430px);
  padding: clamp(14px, 1.7vw, 22px);
  background: rgba(248, 246, 241, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  text-align: left;
}

.journal-slide__visual--image figcaption strong {
  font-size: clamp(23px, 2.3vw, 34px);
}

.journal-device-sketch {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(52%, 220px);
  aspect-ratio: 0.46 / 1;
  border: 2px solid rgba(51, 27, 15, 0.72);
  border-radius: 48px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(51, 27, 15, 0.04));
  box-shadow: 28px 28px 0 rgba(13, 103, 38, 0.1);
}

.journal-device-sketch::before {
  content: "";
  position: absolute;
  top: 16%;
  width: 48%;
  height: 22%;
  border: 1px solid rgba(51, 27, 15, 0.42);
  border-radius: 14px;
  background: rgba(194, 118, 27, 0.16);
}

.journal-device-sketch::after {
  content: "";
  position: absolute;
  bottom: 10%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(51, 27, 15, 0.36);
}

.journal-device-sketch span {
  width: 58%;
  height: 2px;
  background: rgba(51, 27, 15, 0.22);
}

.journal-terpene-orbit,
.journal-compatibility-map {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(70%, 340px);
  aspect-ratio: 1;
  border: 1px solid rgba(51, 27, 15, 0.16);
  border-radius: 50%;
}

.journal-terpene-orbit::before,
.journal-compatibility-map::before {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, rgba(13, 103, 38, 0.24), transparent 40%),
    rgba(255, 255, 255, 0.36);
}

.journal-terpene-orbit span,
.journal-compatibility-map span {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  min-height: 38px;
  border: 1px solid rgba(51, 27, 15, 0.13);
  background: rgba(248, 246, 241, 0.86);
  color: rgba(51, 27, 15, 0.72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  padding: 0 12px;
  text-transform: uppercase;
}

.journal-terpene-orbit span:nth-child(1),
.journal-compatibility-map span:nth-child(1) {
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
}

.journal-terpene-orbit span:nth-child(2),
.journal-compatibility-map span:nth-child(2) {
  top: 42%;
  right: -7%;
}

.journal-terpene-orbit span:nth-child(3),
.journal-compatibility-map span:nth-child(3) {
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
}

.journal-terpene-orbit span:nth-child(4),
.journal-compatibility-map span:nth-child(4) {
  top: 42%;
  left: -7%;
}

.journal-compatibility-map {
  border-radius: 24px;
}

.journal-compatibility-map::before {
  border-radius: 18px;
  background:
    linear-gradient(90deg, transparent 48%, rgba(51, 27, 15, 0.16) 48% 52%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(51, 27, 15, 0.16) 48% 52%, transparent 52%),
    rgba(255, 255, 255, 0.36);
}

.journal-answer-cards,
.journal-compare,
.journal-faq-list {
  display: grid;
  gap: 1px;
  max-height: 100%;
  background: rgba(51, 27, 15, 0.14);
}

.journal-answer-cards div,
.journal-compare article,
.journal-faq-list details {
  background: #f8f6f1;
  padding: clamp(24px, 3vw, 38px);
}

.journal-answer-cards span {
  display: block;
  color: rgba(51, 27, 15, 0.5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.journal-answer-cards strong,
.journal-compare h3 {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 420;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.journal-answer-cards p,
.journal-compare p,
.journal-faq-list p {
  color: rgba(51, 27, 15, 0.68);
  font-size: 17px;
  line-height: 1.65;
  margin-top: 16px;
}

.journal-faq-list details[open] p {
  animation: journalFaqAnswerIn 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes journalFaqAnswerIn {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.journal-compare {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 1120px);
  margin: clamp(42px, 6vw, 78px) auto 0;
}

.journal-slide__note {
  width: min(100%, 780px);
  margin: clamp(30px, 5vw, 54px) auto 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(31px, 3.6vw, 54px);
  line-height: 1.16;
  text-align: center;
}

.journal-slide--long {
  height: auto;
  min-height: var(--journal-slide-h, calc(100svh - var(--header-h)));
  padding: clamp(70px, 8vw, 108px) var(--gutter);
}

.journal-product-table {
  width: min(100%, 1180px);
  margin: clamp(32px, 5vw, 58px) auto 0;
  overflow-x: auto;
  background: rgba(51, 27, 15, 0.14);
}

.journal-product-table table {
  width: 100%;
  min-width: 1160px;
  border-collapse: collapse;
  background: #f8f6f1;
}

.journal-product-table th,
.journal-product-table td {
  border: 1px solid rgba(51, 27, 15, 0.14);
  padding: 16px 18px;
  color: rgba(51, 27, 15, 0.76);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
}

.journal-product-table th {
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.journal-product-table a {
  color: var(--ink);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.journal-method-grid,
.journal-product-grid {
  display: grid;
  width: min(100%, 1180px);
  margin: clamp(34px, 5vw, 62px) auto 0;
  gap: 1px;
  background: rgba(51, 27, 15, 0.14);
}

.journal-method-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.journal-product-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.journal-product-grid--vape {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.journal-method-card,
.journal-product-card {
  display: grid;
  align-content: start;
  gap: 14px;
  background: #f8f6f1;
  padding: clamp(20px, 2vw, 30px);
}

.journal-product-card {
  grid-template-rows: auto auto 1fr auto;
}

.journal-product-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
}

.journal-method-card span,
.journal-product-card span {
  color: rgba(51, 27, 15, 0.5);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.journal-method-card h3,
.journal-product-card h3 {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.1vw, 34px);
  font-weight: 420;
  line-height: 1.05;
}

.journal-method-card p,
.journal-product-card p {
  color: rgba(51, 27, 15, 0.68);
  font-size: 15px;
  line-height: 1.55;
}

.journal-product-card__check {
  color: rgba(51, 27, 15, 0.58);
  font-size: 13px;
}

.journal-product-card__check strong {
  color: var(--ink);
  font-weight: 800;
}

.journal-product-card a {
  align-self: end;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.journal-source-note {
  width: min(100%, 920px);
  margin: clamp(28px, 4vw, 46px) auto 0;
  color: rgba(51, 27, 15, 0.64);
  font-size: 14px;
  line-height: 1.65;
  text-align: center;
}

.journal-spec-list {
  display: grid;
  gap: 1px;
  max-width: 620px;
  margin-top: 34px;
  background: rgba(51, 27, 15, 0.14);
}

.journal-spec-list div {
  display: grid;
  grid-template-columns: 0.45fr 1fr;
  gap: 22px;
  background: #f8f6f1;
  padding: 18px 0;
}

.journal-spec-list dt {
  color: rgba(51, 27, 15, 0.5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.journal-spec-list dd {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.4;
}

.journal-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.journal-pill-list li {
  border: 1px solid rgba(51, 27, 15, 0.16);
  color: rgba(51, 27, 15, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  padding: 12px 14px;
  text-transform: uppercase;
}

.journal-faq-list {
  align-self: center;
}

.journal-faq-list details {
  min-height: 112px;
}

.journal-faq-list summary {
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.14;
  list-style: none;
}

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

.journal-slide__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

.journal-source-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  max-width: 760px;
  margin: 34px auto 0;
  color: rgba(51, 27, 15, 0.5);
  font-size: 12px;
  line-height: 1.5;
}

.journal-source-list span {
  color: rgba(51, 27, 15, 0.7);
  font-weight: 700;
}

.journal-source-list a {
  color: rgba(51, 27, 15, 0.66);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.authority-link,
a[data-authority-link="true"] {
  color: var(--ink);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.journal-scenes-ready [data-scene-text],
.journal-scenes-ready [data-scene-media] {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity 800ms cubic-bezier(0.16, 1, 0.3, 1) var(--scene-delay, 0ms),
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1) var(--scene-delay, 0ms);
  will-change: opacity, transform;
}

.journal-scenes-ready [data-scene-text].is-scene-visible,
.journal-scenes-ready [data-scene-media].is-scene-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 1024px) {
  .journal-slide {
    height: var(--journal-slide-h, calc(100svh - var(--header-h)));
    min-height: var(--journal-slide-h, calc(100svh - var(--header-h)));
    padding: 54px var(--gutter) 62px;
    background: #f8f6f1;
  }

  .journal-slide--hero {
    padding: 0;
  }

  .journal-slide__grid,
  .journal-slide__grid--reverse {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .journal-slide:not(.journal-slide--hero) .journal-slide__copy {
    order: 1;
  }

  .journal-slide:not(.journal-slide--hero) .journal-slide__media,
  .journal-slide:not(.journal-slide--hero) .journal-slide__visual,
  .journal-slide:not(.journal-slide--hero) .journal-answer-cards,
  .journal-slide:not(.journal-slide--hero) .journal-compare,
  .journal-slide:not(.journal-slide--hero) .journal-faq-list {
    order: 2;
  }

  .journal-slide__grid--hero {
    align-content: start;
    gap: 0;
    height: var(--journal-slide-h, calc(100svh - var(--header-h)));
    min-height: 0;
    margin: 0;
  }

  .journal-slide__grid--hero .journal-slide__media {
    height: 42svh;
  }

  .journal-slide--image-split {
    padding: 0;
    place-items: stretch;
  }

  .journal-slide--image-split .journal-slide__grid {
    align-items: start;
    gap: 0;
    grid-template-columns: 1fr;
    height: 100%;
    max-height: none;
    max-width: none;
    transform: none;
    transform-origin: 50% 0;
  }

  .journal-slide.journal-slide--image-split > .journal-slide__grid {
    transform: none;
  }

  .journal-slide.journal-slide--image-split .journal-slide__copy {
    align-self: auto;
    justify-self: start;
    order: 2;
    padding: clamp(24px, 4svh, 36px) clamp(26px, 6vw, 56px) 0;
    transform: scale(var(--slide-fit));
    transform-origin: 50% 0;
    width: 100%;
  }

  .journal-slide.journal-slide--image-split .journal-slide__media--bleed {
    height: clamp(250px, 36svh, 330px);
    order: 1;
    width: 100%;
  }

  .journal-slide.journal-slide--image-split .journal-slide__media--bleed::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 2;
    height: min(44%, 160px);
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0));
  }

  .journal-slide.journal-slide--image-split .journal-slide__rail {
    top: clamp(22px, 4.8svh, 36px);
    left: clamp(22px, 6vw, 56px);
    z-index: 6;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
  }

  .journal-slide.journal-slide--photo-title .journal-slide__media-title {
    position: absolute;
    right: clamp(22px, 6vw, 56px);
    bottom: clamp(20px, 4svh, 42px);
    left: clamp(22px, 6vw, 56px);
    z-index: 5;
    display: grid;
    gap: 8px;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
  }

  .journal-slide.journal-slide--photo-title .journal-slide__media-title span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.24em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .journal-slide.journal-slide--photo-title .journal-slide__media-title strong {
    max-width: 12ch;
    font-family: var(--font-serif);
    font-size: clamp(30px, 7.4vw, 46px);
    font-weight: 420;
    letter-spacing: 0;
    line-height: 1.04;
  }

  .journal-slide.journal-slide--photo-title .journal-slide__copy .journal-slide__eyebrow,
  .journal-slide.journal-slide--photo-title .journal-slide__copy h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .journal-slide--image-split .journal-spec-list {
    margin-top: clamp(14px, 2.2svh, 22px);
  }

  .journal-slide__copy--hero {
    align-self: start;
    padding: 34px var(--gutter) 64px;
  }

  .journal-slide__copy h1,
  .journal-slide__copy h2 {
    font-size: clamp(34px, 8.8vw, 52px);
    line-height: 1.08;
  }

  .journal-slide__standfirst,
  .journal-slide__copy > p {
    font-size: 16px;
    line-height: 1.55;
  }

  .journal-slide__media,
  .journal-slide__media--product,
  .journal-slide__visual {
    height: min(34svh, 310px);
    min-height: 0;
  }

  .journal-slide__media--portrait-diagram {
    height: min(48svh, 460px);
  }

  .article-page--cbd-patches [aria-labelledby="patches-placement"] {
    height: auto;
    max-height: none;
    min-height: var(--journal-slide-h, calc(100svh - var(--header-h)));
    padding: 0 0 48px;
  }

  .article-page--cbd-patches [aria-labelledby="patches-placement"] .journal-slide__grid {
    height: auto;
    max-height: none;
  }

  .article-page--cbd-patches [aria-labelledby="patches-placement"] .journal-slide__media--portrait-diagram {
    order: 1;
  }

  .article-page--cbd-patches [aria-labelledby="patches-placement"] .journal-slide__media--portrait-diagram img {
    width: auto;
    max-width: 100%;
    height: min(48svh, 460px);
    max-height: 100%;
    object-fit: contain;
  }

  .article-page--cbd-patches [aria-labelledby="patches-placement"] .journal-slide__copy {
    order: 2;
    margin-top: 42px;
    padding: 28px var(--gutter) 0;
  }

  .journal-slide__media--cover {
    height: 42svh;
    aspect-ratio: 4 / 5;
    min-height: 0;
  }

  .journal-compare {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .journal-slide__rail {
    position: absolute;
    margin-bottom: 0;
  }

  .journal-spec-list div {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .journal-slide {
    padding: 24px 20px 28px;
  }

  .journal-slide--hero {
    padding: 0;
  }

  .journal-slide__grid--hero {
    margin: 0;
  }

  .journal-slide__grid--hero .journal-slide__media {
    height: 37svh;
  }

  .journal-slide__media--cover {
    height: 37svh;
    aspect-ratio: 1.1 / 1;
  }

  .journal-slide--image-split {
    padding: 0 0 22px;
  }

  .journal-slide.journal-slide--image-split .journal-slide__grid {
    gap: 0;
  }

  .journal-slide.journal-slide--image-split .journal-slide__media--bleed {
    height: clamp(224px, 32svh, 270px);
  }

  .journal-slide.journal-slide--photo-title .journal-slide__media-title {
    right: 22px;
    bottom: clamp(18px, 3svh, 28px);
    left: 22px;
  }

  .journal-slide.journal-slide--photo-title .journal-slide__media-title strong {
    max-width: 11ch;
    font-size: clamp(28px, 8vw, 38px);
  }

  .journal-slide.journal-slide--image-split .journal-slide__copy {
    padding: 18px 22px 0;
  }

  .journal-slide.journal-slide--image-split .journal-slide__copy > p {
    margin-top: 10px;
  }

  .journal-slide.journal-slide--image-split .journal-spec-list {
    margin-top: 12px;
  }

  .journal-slide__copy--hero {
    padding: 22px 20px 28px;
  }

  .journal-slide__copy h1,
  .journal-slide__copy h2 {
    font-size: clamp(30px, 9.8vw, 46px);
  }

  .journal-slide__eyebrow {
    font-size: 10px;
    line-height: 1.45;
    margin-bottom: 10px;
  }

  .journal-slide__standfirst {
    margin-top: 12px;
  }

  .journal-slide__copy > p {
    margin-top: 12px;
  }

  .journal-slide__media,
  .journal-slide__media--product,
  .journal-slide__visual {
    height: min(28svh, 230px);
  }

  .journal-slide__media--portrait-diagram {
    height: min(46svh, 390px);
  }

  .article-page--cbd-patches [aria-labelledby="patches-placement"] .journal-slide__media--portrait-diagram {
    height: min(52svh, 430px);
  }

  .article-page--cbd-patches [aria-labelledby="patches-placement"] .journal-slide__media--portrait-diagram img {
    height: min(52svh, 430px);
  }

  .journal-answer-cards div,
  .journal-compare article,
  .journal-faq-list details {
    padding: 12px 14px;
  }

  .journal-answer-cards span {
    font-size: 9px;
    margin-bottom: 7px;
  }

  .journal-answer-cards strong,
  .journal-compare h3 {
    font-size: 21px;
  }

  .journal-answer-cards p,
  .journal-compare p,
  .journal-faq-list p {
    font-size: 13px;
    line-height: 1.42;
    margin-top: 8px;
  }

  .journal-slide__note {
    font-size: 24px;
    margin-top: 14px;
  }

  .journal-spec-list {
    margin-top: 14px;
  }

  .journal-spec-list div {
    padding: 7px 0;
  }

  .journal-spec-list dt {
    font-size: 9px;
  }

  .journal-spec-list dd {
    font-size: 13px;
  }

  .journal-pill-list {
    gap: 6px;
    margin-top: 14px;
  }

  .journal-pill-list li {
    font-size: 9px;
    padding: 8px 9px;
  }

  .journal-slide__media--product {
    padding: 18px;
  }

  .journal-slide__visual {
    gap: 12px;
    padding: 18px;
  }

  .journal-slide__visual::before {
    inset: 12px;
  }

  .journal-slide__visual figcaption {
    gap: 5px;
    font-size: 12px;
    line-height: 1.35;
  }

  .journal-slide__visual figcaption strong {
    font-size: 22px;
  }

  .journal-slide__visual--image figcaption {
    right: 12px;
    bottom: 12px;
    left: 12px;
    max-width: calc(100% - 24px);
    padding: 10px 12px;
  }

  .journal-slide__visual--image figcaption span {
    display: none;
  }

  .journal-slide__visual--image figcaption strong {
    font-size: 19px;
  }

  .journal-device-sketch {
    width: min(38%, 118px);
  }

  .journal-terpene-orbit,
  .journal-compatibility-map {
    width: min(58%, 150px);
  }

  .journal-terpene-orbit span,
  .journal-compatibility-map span {
    min-width: 58px;
    min-height: 26px;
    font-size: 8px;
    padding: 0 7px;
  }

  .journal-slide__actions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 18px;
  }

  .journal-source-list {
    gap: 6px 10px;
    margin-top: 16px;
    font-size: 10px;
  }
}

@media (max-width: 1180px) {
  .journal-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .journal-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .journal-slide--long {
    padding: 58px var(--gutter);
  }

  .journal-product-grid,
  .journal-method-grid {
    grid-template-columns: 1fr;
  }

  .journal-product-card {
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto auto auto;
    gap: 10px 16px;
  }

  .journal-product-card img {
    grid-row: 1 / 4;
  }

  .journal-product-card a {
    align-self: start;
  }

  .journal-product-table th,
  .journal-product-table td {
    padding: 12px 14px;
    font-size: 12px;
  }
}

.article-page--best-vape .journal-product-grid {
  gap: 16px;
  background: transparent;
}

.article-page--best-vape .journal-product-card {
  min-height: 100%;
  border: 1px solid rgba(51, 27, 15, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 42px rgba(51, 27, 15, 0.055);
  grid-template-rows: 190px auto auto 1fr auto auto;
}

.article-page--best-vape .journal-product-card img {
  height: 190px;
  padding: 14px;
  border-radius: 6px;
  object-fit: contain;
  background: #f8f6f1;
}

.article-page--best-vape .journal-method-grid {
  gap: 16px;
  background: transparent;
}

.article-page--best-vape .journal-method-card {
  border: 1px solid rgba(51, 27, 15, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 42px rgba(51, 27, 15, 0.055);
}

@media (max-width: 1180px) {
  .article-page--best-vape .journal-product-grid--vape {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .article-page--best-vape .journal-product-grid--vape,
  .article-page--best-vape .journal-method-grid--vape {
    grid-template-columns: 1fr;
  }

  .article-page--best-vape .journal-product-card {
    grid-template-columns: 112px 1fr;
    grid-template-rows: auto auto 1fr auto auto;
  }

  .article-page--best-vape .journal-product-card img {
    grid-row: 1 / 6;
    width: 112px;
    height: 112px;
    padding: 10px;
  }

  .article-page--best-vape .journal-slide--long {
    height: auto;
    min-height: 0;
    overflow: visible;
    place-items: stretch;
    padding: 44px 20px;
  }

  .article-page--best-vape .journal-slide--long .journal-slide__rail {
    position: static;
    margin: 0 0 18px;
  }

  .article-page--best-vape .journal-slide--long .journal-slide__frame {
    transform: none;
  }

  .article-page--best-vape .journal-product-table {
    overflow: visible;
    background: transparent;
  }

  .article-page--best-vape .journal-product-table table,
  .article-page--best-vape .journal-product-table tbody,
  .article-page--best-vape .journal-product-table tr,
  .article-page--best-vape .journal-product-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .article-page--best-vape .journal-product-table thead {
    display: none;
  }

  .article-page--best-vape .journal-product-table tr {
    margin-bottom: 12px;
    border: 1px solid rgba(51, 27, 15, 0.12);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(51, 27, 15, 0.045);
    overflow: hidden;
  }

  .article-page--best-vape .journal-product-table td {
    border: 0;
    border-bottom: 1px solid rgba(51, 27, 15, 0.09);
    padding: 13px 15px;
    font-size: 13px;
  }

  .article-page--best-vape .journal-product-table td:last-child {
    border-bottom: 0;
  }

  .article-page--best-vape .journal-product-table td::before {
    display: block;
    margin-bottom: 5px;
    color: rgba(51, 27, 15, 0.48);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .article-page--best-vape .journal-product-table td:nth-child(1)::before {
    content: "Pick";
  }

  .article-page--best-vape .journal-product-table td:nth-child(2)::before {
    content: "Best for";
  }

  .article-page--best-vape .journal-product-table td:nth-child(3)::before {
    content: "CBD / format";
  }

  .article-page--best-vape .journal-product-table td:nth-child(4)::before {
    content: "Price note";
  }

  .article-page--best-vape .journal-product-table td:nth-child(5)::before {
    content: "Product route";
  }

  .article-page--best-vape .journal-product-table td:nth-child(6)::before {
    content: "Evidence to check";
  }

  .article-page--best-vape .journal-product-table td:nth-child(7)::before {
    content: "Not best for";
  }

  .article-page--best-vape .journal-product-table td:nth-child(8)::before {
    content: "Buy route";
  }
}

/* Buyer-guide article override: best CBD oil needs comparison density over slide drama. */
.article-page--best-oil .journal-slide {
  height: auto;
  min-height: 0;
  overflow: visible;
  place-items: stretch;
  padding: clamp(58px, 7vw, 96px) var(--gutter);
}

.article-page--best-oil .journal-slide--hero {
  padding: 0 var(--gutter) clamp(58px, 7vw, 92px);
}

.article-page--best-oil .journal-slide--hero .journal-slide__grid--hero {
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
  height: auto;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: clamp(78px, 8vw, 118px);
}

.article-page--best-oil .journal-slide--hero .journal-slide__media {
  height: clamp(360px, 43vw, 590px);
  border-radius: 8px;
}

.article-page--best-oil .journal-slide__copy--hero {
  padding: 0;
}

.article-page--best-oil .journal-slide__copy h1 {
  font-size: clamp(46px, 5.3vw, 76px);
}

.article-page--best-oil .journal-slide__standfirst {
  max-width: 620px;
  font-size: clamp(18px, 1.75vw, 22px);
}

.article-page--best-oil .journal-slide__rail {
  position: static;
  margin: 0 0 clamp(22px, 3vw, 34px);
}

.article-page--best-oil .journal-slide:not(.journal-slide--hero) > .journal-slide__grid,
.article-page--best-oil .journal-slide__frame,
.article-page--best-oil .journal-slide--hero .journal-slide__copy--hero {
  transform: none;
}

.article-page--best-oil .journal-slide--answer .journal-slide__grid,
.article-page--best-oil .journal-slide--faq .journal-slide__grid {
  grid-template-columns: minmax(0, 0.85fr) minmax(360px, 0.9fr);
  align-items: start;
}

.article-page--best-oil .journal-slide__frame {
  max-width: 1240px;
}

.article-page--best-oil .journal-slide__copy--center {
  max-width: 780px;
}

.article-page--best-oil .journal-product-table {
  border: 1px solid rgba(51, 27, 15, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 56px rgba(51, 27, 15, 0.06);
}

.article-page--best-oil .journal-product-table table {
  background: #fff;
}

.article-page--best-oil .journal-method-grid,
.article-page--best-oil .journal-product-grid {
  gap: 16px;
  background: transparent;
}

.article-page--best-oil .journal-product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.article-page--best-oil .journal-method-card,
.article-page--best-oil .journal-product-card {
  border: 1px solid rgba(51, 27, 15, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 42px rgba(51, 27, 15, 0.055);
}

.article-page--best-oil .journal-product-card {
  min-height: 100%;
  grid-template-rows: 190px auto auto 1fr auto auto;
}

.article-page--best-oil .journal-product-card img {
  height: 190px;
  padding: 16px;
  border-radius: 6px;
  object-fit: contain;
  background: #f8f6f1;
}

.article-page--best-oil .journal-product-card h3 {
  font-size: clamp(24px, 1.85vw, 32px);
}

.article-page--best-oil .journal-slide--image-split {
  padding: clamp(58px, 7vw, 96px) var(--gutter);
  place-items: center;
}

.article-page--best-oil .journal-slide--image-split .journal-slide__grid {
  height: auto;
  max-width: 1240px;
  overflow: hidden;
  border: 1px solid rgba(51, 27, 15, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 56px rgba(51, 27, 15, 0.055);
}

.article-page--best-oil .journal-slide--image-split .journal-slide__copy {
  width: 100%;
  padding: clamp(42px, 5vw, 74px);
  transform: none;
}

.article-page--best-oil .journal-slide.journal-slide--image-split .journal-slide__media--bleed {
  height: auto;
  min-height: clamp(360px, 42vw, 520px);
}

.article-page--best-oil .journal-slide__media--bleed img {
  height: 100%;
}

.article-page--best-oil .journal-faq-list details,
.article-page--best-oil .journal-answer-cards div {
  border-color: rgba(51, 27, 15, 0.12);
  background: #fff;
}

.article-page--best-oil .journal-faq-list details {
  min-height: 0;
  padding: clamp(20px, 2.2vw, 28px);
}

.article-page--capsules .journal-slide__frame {
  max-width: 1240px;
}

.article-page--capsules .journal-slide__copy--center {
  max-width: 780px;
}

.article-page--capsules .journal-method-grid,
.article-page--capsules .journal-product-grid {
  gap: 16px;
  background: transparent;
}

.article-page--capsules .journal-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.article-page--capsules .journal-method-card,
.article-page--capsules .journal-product-card {
  border: 1px solid rgba(51, 27, 15, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 42px rgba(51, 27, 15, 0.055);
}

.article-page--capsules .journal-product-card {
  min-height: 100%;
  grid-template-rows: 220px auto auto 1fr auto auto;
}

.article-page--capsules .journal-product-card img {
  height: 220px;
  padding: 18px;
  border-radius: 6px;
  object-fit: contain;
  background: #f8f6f1;
}

@media (max-width: 1180px) {
  .article-page--best-oil .journal-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .article-page--best-oil .journal-slide--hero .journal-slide__grid--hero,
  .article-page--best-oil .journal-slide--answer .journal-slide__grid,
  .article-page--best-oil .journal-slide--faq .journal-slide__grid {
    grid-template-columns: 1fr;
  }

  .article-page--best-oil .journal-slide--hero .journal-slide__grid--hero {
    padding-top: clamp(62px, 12vw, 92px);
  }

  .article-page--best-oil .journal-slide--hero .journal-slide__media {
    height: clamp(260px, 48vw, 390px);
  }

  .article-page--best-oil .journal-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .article-page--capsules .journal-product-grid,
  .article-page--capsules .journal-method-grid {
    grid-template-columns: 1fr;
  }

  .article-page--capsules .journal-product-card {
    grid-template-columns: 112px 1fr;
    grid-template-rows: auto auto 1fr auto auto;
  }

  .article-page--capsules .journal-product-card img {
    grid-row: 1 / 6;
    width: 112px;
    height: 112px;
    padding: 10px;
  }

  .article-page--best-oil .journal-slide--image-split .journal-slide__grid,
  .article-page--best-oil .journal-slide__grid--image-right {
    grid-template-columns: 1fr;
  }

  .article-page--best-oil .journal-slide.journal-slide--image-split .journal-slide__media--bleed {
    min-height: clamp(250px, 44vw, 360px);
  }

  .article-page--best-oil .journal-slide.journal-slide--photo-title .journal-slide__copy .journal-slide__eyebrow,
  .article-page--best-oil .journal-slide.journal-slide--photo-title .journal-slide__copy h2 {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 14px;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .article-page--best-oil .journal-slide {
    padding: 44px 20px;
  }

  .article-page--best-oil .journal-slide--hero {
    padding: 0 20px 44px;
  }

  .article-page--best-oil .journal-slide__copy h1 {
    font-size: clamp(38px, 10vw, 48px);
  }

  .article-page--best-oil .journal-product-grid,
  .article-page--best-oil .journal-method-grid {
    grid-template-columns: 1fr;
  }

  .article-page--best-oil .journal-product-card {
    grid-template-columns: 112px 1fr;
    grid-template-rows: auto auto 1fr auto auto;
  }

  .article-page--best-oil .journal-product-card img {
    grid-row: 1 / 6;
    width: 112px;
    height: 112px;
    padding: 10px;
  }

  .article-page--best-oil .journal-product-card h3 {
    font-size: 24px;
  }

  .article-page--best-oil .journal-slide--image-split {
    padding: 44px 20px;
  }

  .article-page--best-oil .journal-slide--image-split .journal-slide__copy {
    padding: 26px 22px 30px;
  }

  .article-page--best-oil .journal-product-table {
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .article-page--best-oil .journal-product-table table,
  .article-page--best-oil .journal-product-table tbody,
  .article-page--best-oil .journal-product-table tr,
  .article-page--best-oil .journal-product-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .article-page--best-oil .journal-product-table thead {
    display: none;
  }

  .article-page--best-oil .journal-product-table tr {
    margin-bottom: 12px;
    border: 1px solid rgba(51, 27, 15, 0.12);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(51, 27, 15, 0.045);
    overflow: hidden;
  }

  .article-page--best-oil .journal-product-table td {
    border: 0;
    border-bottom: 1px solid rgba(51, 27, 15, 0.09);
    padding: 13px 15px;
    font-size: 13px;
  }

  .article-page--best-oil .journal-product-table td:last-child {
    border-bottom: 0;
  }

  .article-page--best-oil .journal-product-table td::before {
    display: block;
    margin-bottom: 5px;
    color: rgba(51, 27, 15, 0.48);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .article-page--best-oil .journal-product-table td:nth-child(1)::before {
    content: "Pick";
  }

  .article-page--best-oil .journal-product-table td:nth-child(2)::before {
    content: "Best for";
  }

  .article-page--best-oil .journal-product-table td:nth-child(3)::before {
    content: "CBD strength";
  }

  .article-page--best-oil .journal-product-table td:nth-child(4)::before {
    content: "Price/source note";
  }

  .article-page--best-oil .journal-product-table td:nth-child(5)::before {
    content: "Extract/flavour";
  }

  .article-page--best-oil .journal-product-table td:nth-child(6)::before {
    content: "Evidence to check";
  }

  .article-page--best-oil .journal-product-table td:nth-child(7)::before {
    content: "Not best for";
  }

  .article-page--best-oil .journal-product-table td:nth-child(8)::before {
    content: "Buy route";
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}