/* ============================================================
   Solar Fruits — styles.css
   Locked direction (design-system.md v4): TWO-TONE UI.
   One warm cream ground + one deep pine-green ink. Every other value
   is a tint/shade of those two. All colour comes from the photography.
   No accent colour. The logo is the only colour exception.
   ============================================================ */

/* ===== §2 Colour · §3 Type · §4 Spacing · §5 Layout · §6 Radii (verbatim) ===== */
:root{
  /* Background tones (warm neutral) */
  --bg:            #F6F1E8;
  --surface:       #EFE8DB;
  --surface-deep:  #E7DECD;

  /* Ink tones (deep pine green, from the wordmark) */
  --ink:           #1C3B2E;
  --ink-soft:      #4A5A50;
  --ink-faint:     #5C6A5F;  /* AA: 5.07:1 on --bg cream (was #8A9389 = 2.8:1, failed) */

  /* Lines */
  --hairline:      #E2D9C8;

  /* CTA */
  --cta-bg:        var(--ink);
  --cta-text:      #F6F1E8;
  --cta-bg-hover:  #25503D;

  /* Type */
  --font-display: "Spectral", Georgia, serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --fs-display:  clamp(2.5rem, 1.5rem + 4.5vw, 4.5rem);
  --fs-h1:       clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-h2:       clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-h3:       clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-body-lg:  clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-body:     1.0625rem;
  --fs-small:    0.875rem;
  --fs-caption:  0.75rem;
  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-body:     1.6;

  /* Spacing (8px base) */
  --space-1:  0.25rem; --space-2:  0.5rem;  --space-3:  0.75rem; --space-4:  1rem;
  --space-6:  1.5rem;  --space-8:  2rem;     --space-12: 3rem;    --space-16: 4rem;
  --space-24: 6rem;    --space-32: 8rem;

  /* Layout */
  --container:        1200px;
  --container-narrow: 720px;
  --gutter:           clamp(1rem, 4vw, 4rem);

  /* Radii + the one shadow */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-pill: 999px;
  --shadow-soft: 0 8px 30px rgba(28, 59, 46, 0.08);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== Reset / base ===== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink-soft);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--font-display); font-weight:500; color:var(--ink);
  line-height:var(--lh-snug); letter-spacing:-0.015em; margin:0 0 var(--space-4); }
p{ margin:0 0 var(--space-4); }
p:last-child{ margin-bottom:0; }
::selection{ background:var(--ink); color:var(--cta-text); }

/* ===== Type helpers ===== */
.display{ font-family:var(--font-display); font-weight:500; color:var(--ink);
  font-size:var(--fs-display); line-height:var(--lh-tight); letter-spacing:-0.02em; }
.h1{ font-size:var(--fs-h1); }
.h2{ font-size:var(--fs-h2); }
.lead{ font-size:var(--fs-body-lg); color:var(--ink-soft); line-height:1.5; }
.eyebrow{ font-family:var(--font-body); font-weight:600; font-size:var(--fs-caption);
  letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint);
  margin:0 0 var(--space-4); }
.measure{ max-width:60ch; }

/* ===== Layout ===== */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }
.container-narrow{ width:100%; max-width:var(--container-narrow); margin:0 auto; padding-inline:var(--gutter); }
section{ padding-block:var(--space-16); }
@media (min-width:768px){ section{ padding-block:var(--space-24); } }
.bg{ background:var(--bg); }
.surface{ background:var(--surface); }
.section-head{ max-width:46ch; margin-bottom:var(--space-12); }

/* ===== §7 Buttons ===== */
.btn-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:var(--space-3) var(--space-6); min-height:48px;
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-body); line-height:1;
  color:var(--cta-text); background:var(--cta-bg); border:1px solid transparent;
  border-radius:var(--radius-pill); text-decoration:none; cursor:pointer;
  transition:background-color .24s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease);
}
.btn-cta:hover{ background:var(--cta-bg-hover); transform:translateY(-1px); box-shadow:var(--shadow-soft); }
.btn-cta:active{ transform:translateY(0); }
.btn-cta .wa-glyph{ width:18px; height:18px; flex:none; }

.btn-text{
  display:inline-flex; align-items:center; min-height:48px;
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-body);
  color:var(--ink); text-decoration:none; background:none; border:0; cursor:pointer;
}
.btn-text span{ box-shadow:inset 0 -1px 0 transparent; transition:box-shadow .2s var(--ease); }
.btn-text:hover span{ box-shadow:inset 0 -1px 0 var(--ink); }

.btn-row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); margin-top:var(--space-8); }

/* Focus (§11): visible --ink outline on everything interactive */
a:focus-visible, button:focus-visible, .btn-cta:focus-visible, .acc__q:focus-visible{
  outline:2px solid var(--ink); outline-offset:3px; border-radius:var(--radius-sm);
}

/* ===== §8 Header / nav ===== */
.nav{ position:sticky; top:0; z-index:50; background:var(--bg);
  border-bottom:1px solid transparent; transition:border-color .24s var(--ease), box-shadow .24s var(--ease); }
.nav.is-scrolled{ border-bottom-color:var(--hairline); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-6);
  height:72px; }
.nav__logo{ display:inline-flex; align-items:center; line-height:0; }
.nav__logo img{ height:40px; width:auto; }
.nav__links{ display:none; gap:var(--space-8); list-style:none; margin:0; padding:0; }
.nav__links a{ font-weight:500; font-size:var(--fs-small); color:var(--ink); text-decoration:none; }
.nav__links a:hover{ color:var(--ink-soft); }
.nav__right{ display:flex; align-items:center; gap:var(--space-4); }
.nav__cta{ display:none; }
.nav__toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  background:none; border:1px solid var(--hairline); border-radius:var(--radius-sm); color:var(--ink); cursor:pointer; }
.nav__toggle svg{ width:22px; height:22px; }
.nav__menu{ display:none; list-style:none; margin:0; padding:var(--space-2) 0 var(--space-4);
  border-top:1px solid var(--hairline); }
.nav__menu.is-open{ display:block; }
.nav__menu a{ display:block; padding:var(--space-3) 0; color:var(--ink); text-decoration:none; font-weight:500; }
@media (min-width:768px){
  .nav__links{ display:flex; }
  .nav__cta{ display:inline-flex; }
  .nav__toggle{ display:none; }
  .nav__menu{ display:none !important; }
}

/* ===== §8 Hero (full-bleed, text right; mobile stacks below) ===== */
.hero{ background:var(--bg); }
.hero__img{ width:100%; aspect-ratio:3/2; object-fit:cover; object-position:center; }
.hero__scrim{ display:none; }
.hero__inner{ padding-block:var(--space-12); }
.hero__title{ margin:var(--space-2) 0 var(--space-4); }
.hero__subhead{ max-width:42ch; }
@media (min-width:768px){
  .hero{ position:relative; }
  .hero__img{ position:absolute; inset:0; height:100%; aspect-ratio:auto; object-position:left center; }
  /* Cream-to-transparent scrim so the right-hand text always reads cleanly over
     the photo (design-system.md §8). Soft fade left, near-solid cream under the text. */
  .hero__scrim{ display:block; position:absolute; inset:0; left:0;
    background:linear-gradient(90deg,
      rgba(246,241,232,0) 0%,
      rgba(246,241,232,0) 24%,
      rgba(246,241,232,0.55) 42%,
      rgba(246,241,232,0.92) 56%,
      rgba(246,241,232,0.98) 72%); }
  .hero__inner{ position:relative; display:grid; grid-template-columns:1fr 1fr;
    align-items:center; min-height:clamp(540px, 74vh, 780px); padding-block:var(--space-16); }
  .hero__copy{ grid-column:2; }
}
@media (min-width:1024px){ .hero__copy{ grid-column:2; padding-left:var(--space-8); } }

/* ===== §8 Leave-out credibility row (the six trust items) ===== */
.trust{ border-block:1px solid var(--hairline); }
.trust__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr;
  gap:var(--space-4) var(--space-6); }
.trust__list li{ display:flex; align-items:center; gap:var(--space-2);
  font-size:var(--fs-small); font-weight:500; color:var(--ink); }
.trust__list svg{ width:18px; height:18px; flex:none; color:var(--ink-soft); }
@media (min-width:768px){
  .trust__list{ grid-template-columns:repeat(6,auto); justify-content:space-between; gap:var(--space-6); }
}

/* ===== §8 Product cards (photo-led, dissolve into --bg) ===== */
.fruit__head{ text-align:left; }
.product-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-16); margin-top:var(--space-12); }
@media (min-width:768px){ .product-grid{ grid-template-columns:repeat(3,1fr); gap:var(--space-8); } }
.product{ display:flex; flex-direction:column; }
.product__media{ border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); }
.product__media img{ width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform .4s var(--ease); }
.product:hover .product__media img{ transform:scale(1.03); }
.product__name{ font-family:var(--font-body); font-weight:600; font-size:var(--fs-h3);
  color:var(--ink); margin:var(--space-4) 0 var(--space-1); line-height:var(--lh-snug); }
.product__micro{ font-size:var(--fs-small); color:var(--ink-faint); margin:0 0 var(--space-3); }
.product__desc{ color:var(--ink-soft); margin:0 0 var(--space-3); }
.product__in{ font-size:var(--fs-small); color:var(--ink-soft); margin:0 0 var(--space-4); }
.product__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4); flex-wrap:wrap; }
.product__price{ font-weight:600; color:var(--ink); font-size:var(--fs-body-lg); }

/* ===== §8 Trial-pack feature block ===== */
.trial{ }
.trial__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:center; }
@media (min-width:768px){ .trial__grid{ grid-template-columns:1.05fr 1fr; gap:var(--space-16); } }
.trial__media{ border-radius:var(--radius-lg); overflow:hidden; }
.trial__media img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.trial__price{ font-weight:600; color:var(--ink); font-size:var(--fs-body-lg); margin:var(--space-4) 0 0; }
.trial__note{ color:var(--ink-faint); font-size:var(--fs-small); margin-top:var(--space-2); }

/* ===== §8 How it's made + ingredient panel ===== */
.made__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-12); }
@media (min-width:768px){ .made__grid{ grid-template-columns:1fr 1fr; gap:var(--space-16); align-items:center; } }
.ingredient{ }
.ingredient__label{ font-size:var(--fs-small); letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 var(--space-2); }
.ingredient__word{ font-family:var(--font-display); font-weight:500; color:var(--ink);
  font-size:var(--fs-display); line-height:1; letter-spacing:-0.02em; margin:0; }
.made__texture{ border-radius:var(--radius-lg); overflow:hidden; }
/* Favour the dried-mango side of the texture shot; crop out most of the
   dried-orange (a fruit we don't sell) so the section stays on-brand. */
.made__texture img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:left center; }

/* Three one-word ingredient lists — proof that each fruit is a single ingredient */
.ingredient-row{ display:grid; grid-template-columns:1fr; gap:var(--space-8);
  margin-top:var(--space-16); padding-top:var(--space-12); border-top:1px solid var(--hairline); }
@media (min-width:768px){ .ingredient-row{ grid-template-columns:repeat(3,1fr); gap:var(--space-12); } }
.ingredient-row .ingredient__word{ font-size:var(--fs-h1); }

/* ===== §8 What we leave out (big, calm, on --surface) ===== */
.leaveout__list{ list-style:none; margin:var(--space-8) 0 0; padding:0; }
.leaveout__list li{ font-family:var(--font-display); font-weight:400; color:var(--ink);
  font-size:var(--fs-h2); line-height:1.35; padding:var(--space-3) 0; border-bottom:1px solid var(--hairline); }
.leaveout__list li:last-child{ border-bottom:0; }

/* ===== §8 The difference + colour-proof (signature) ===== */
.difference__intro{ max-width:60ch; }
.proof{ margin-top:var(--space-16); }
.proof__frame{ max-width:var(--container); margin:0 auto; border-radius:var(--radius-lg);
  overflow:hidden; background:var(--surface); }
.proof__frame img{ width:100%; height:auto; display:block; }
.proof__caption{ max-width:60ch; margin:var(--space-6) auto 0; text-align:center;
  color:var(--ink-soft); font-size:var(--fs-small); }

/* ===== §8 Why you can trust it ===== */
.why__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-12); }
@media (min-width:768px){ .why__grid{ grid-template-columns:1fr 1fr; gap:var(--space-16); } }
.why__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-3); }
.why__list li{ display:flex; gap:var(--space-3); align-items:flex-start; color:var(--ink); }
.why__list svg{ width:20px; height:20px; flex:none; color:var(--ink-soft); margin-top:2px; }
.why__darker .h2{ margin-bottom:var(--space-3); }

/* ===== §8 The family (text only, narrow) ===== */
.family p{ font-size:var(--fs-body-lg); color:var(--ink-soft); }

/* ===== §8 Founding offer ===== */
.offer{ text-align:center; }
.offer .container-narrow > *{ margin-inline:auto; }
.offer__tag{ display:inline-block; font-size:var(--fs-small); font-weight:600; letter-spacing:0.04em;
  color:var(--ink); border:1px solid var(--hairline); border-radius:var(--radius-pill);
  padding:var(--space-2) var(--space-4); margin-bottom:var(--space-6); }
.offer__risk{ color:var(--ink-faint); font-style:italic; margin-top:var(--space-4); }
.offer .btn-row{ justify-content:center; }

/* ===== Closing line ===== */
.closing{ text-align:center; }
.closing .display{ max-width:18ch; margin-inline:auto; font-size:var(--fs-h1); }
.closing .btn-row{ justify-content:center; }

/* ===== §8 FAQ accordion ===== */
.acc{ margin-top:var(--space-8); border-top:1px solid var(--hairline); }
.acc__item{ border-bottom:1px solid var(--hairline); }
.acc__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  text-align:left; background:none; border:0; cursor:pointer; color:var(--ink);
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-body-lg);
  padding:var(--space-6) 0; }
.acc__q svg{ width:20px; height:20px; flex:none; color:var(--ink); transition:transform .24s var(--ease); }
.acc__q[aria-expanded="true"] svg{ transform:rotate(180deg); }
.acc__a{ overflow:hidden; height:0; transition:height .24s var(--ease); }
.acc__a-inner{ padding:0 0 var(--space-6); color:var(--ink-soft); max-width:60ch; }

/* ===== §8 Footer ===== */
.footer{ background:var(--surface); border-top:1px solid var(--hairline); }
.footer__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-12); }
@media (min-width:768px){ .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.footer__logo img{ height:46px; width:auto; }
.footer__tagline{ color:var(--ink-soft); margin-top:var(--space-4); max-width:34ch; }
.footer h4{ font-family:var(--font-body); font-weight:600; font-size:var(--fs-small);
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 var(--space-4); }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-3); }
.footer a{ color:var(--ink-soft); text-decoration:none; }
.footer a:hover{ color:var(--ink); }
.footer__cta{ margin-top:var(--space-6); }
.footer__legal{ margin-top:var(--space-12); padding-top:var(--space-6); border-top:1px solid var(--hairline);
  color:var(--ink-faint); font-size:var(--fs-small); display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-6); }
.footer__legal p{ margin:0; }

/* ===== Sticky mobile WhatsApp CTA (Phase 2) ===== */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:var(--space-3) var(--gutter); padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom));
  background:var(--bg); border-top:1px solid var(--hairline); box-shadow:var(--shadow-soft); }
.sticky-cta .btn-cta{ width:100%; }
@media (min-width:768px){ .sticky-cta{ display:none; } }
@media (max-width:767px){ body{ padding-bottom:84px; } }

/* ===== Image empty-state placeholder (quiet, not a coloured block) ===== */
.ph{ position:relative; }
.ph img.is-missing{ display:none; }
.ph__note{ display:none; }
.ph.is-empty{ display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--hairline); }
.ph.is-empty .ph__note{ display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
  color:var(--ink-faint); font-size:var(--fs-small); letter-spacing:0.08em; text-transform:uppercase;
  padding:var(--space-12); text-align:center; }
.ph.is-empty .ph__note svg{ width:30px; height:30px; opacity:.7; }
.proof__frame.ph.is-empty{ aspect-ratio:16/9; }

/* ============================================================
   SUPPORTING PAGES (story / how-we-make-it / faq / order / wholesale)
   ============================================================ */
.page-head{ }
.prose > p{ font-size:var(--fs-body-lg); color:var(--ink-soft); margin:0 0 var(--space-6); }
.prose > p:last-child{ margin-bottom:0; }
.prose h2{ font-size:var(--fs-h2); margin:var(--space-12) 0 var(--space-4); }
.prose h2:first-child{ margin-top:0; }

.steps{ list-style:none; counter-reset:step; margin:var(--space-8) 0 0; padding:0; display:grid; gap:var(--space-8); }
.steps li{ position:relative; padding-left:calc(var(--space-16) + var(--space-4)); counter-increment:step; }
.steps li::before{ content:counter(step); position:absolute; left:0; top:0; width:var(--space-12); height:var(--space-12);
  border-radius:50%; background:var(--ink); color:var(--cta-text); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:500; font-size:1.25rem; }
.steps strong{ display:block; color:var(--ink); font-weight:600; margin-bottom:var(--space-1); }
.steps span{ color:var(--ink-soft); }

.subblock{ margin-top:var(--space-12); padding-top:var(--space-8); border-top:1px solid var(--hairline); }
.subblock h2, .subblock h3{ margin-bottom:var(--space-3); }
.subblock p{ color:var(--ink-soft); }

.contact-lines{ list-style:none; margin:var(--space-6) 0 0; padding:0; display:grid; gap:var(--space-3); color:var(--ink-soft); }
.contact-lines strong{ color:var(--ink); font-weight:600; }
.contact-lines a{ color:var(--ink); text-decoration:none; }
.contact-lines a:hover{ text-decoration:underline; }

.editor-note{ margin:var(--space-6) 0; padding:var(--space-4) var(--space-6); border-left:3px solid var(--ink);
  background:var(--surface); color:var(--ink-soft); font-style:italic; border-radius:0 var(--radius-md) var(--radius-md) 0; }
.surface .editor-note{ background:var(--bg); }

/* ============================================================
   §11 Motion layer (GSAP + ScrollTrigger + Lenis, in js/motion.js)
   Content is visible by DEFAULT — js/motion.js hides+animates at runtime,
   so no-JS / reduced-motion / CDN-failure always shows everything.
   ============================================================ */

/* Lenis smooth scroll base (recommended) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Only the above-the-fold hero copy is pre-hidden (to avoid a flash); an inline
   <head> script adds .motion, and a fallback timer removes it if motion never inits. */
html.motion .hero__copy { opacity: 0; }

/* Slim scroll-progress bar */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:100;
  background:var(--ink); transform:scaleX(0); transform-origin:left; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .scroll-progress{ display:none; } }

/* Hero needs to clip the parallax/scale of its image */
.hero{ overflow:hidden; }
.hero__img{ will-change:transform; }

/* "What we leave out" — each line rises from behind a mask */
.leaveout__list li{ overflow:hidden; }
.lo-line{ display:block; will-change:transform; }

/* product photo parallax happens inside the rounded frame */
.product__media{ overflow:hidden; }

/* ===== Mango "sun-drying" first-load loader ===== */
#preloader{ position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--space-5); background:var(--bg);
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
  /* Fail-safe: fade out after 3s even if JS never runs, so content is never trapped. */
  animation:preloader-safety 0s linear 3s forwards; }
#preloader.is-done{ opacity:0; visibility:hidden; }
@keyframes preloader-safety{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.mango-load{ width:92px; height:92px; transform-origin:center;
  animation:mango-scale 3.4s ease-in-out infinite; }
.mango-load .mango-body{ animation:mango-fill 3.4s ease-in-out infinite; }
.mango-load .mango-wrinkle{ opacity:0; animation:mango-wrinkle 3.4s ease-in-out infinite; }
.preloader-label{ font-family:var(--font-body); font-weight:500; font-size:var(--fs-caption);
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin:0; }
@keyframes mango-fill{ 0%,100%{ fill:#F3C23D; } 50%{ fill:#A4502B; } }
@keyframes mango-scale{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(.9) rotate(-2deg); } }
@keyframes mango-wrinkle{ 0%,100%{ opacity:0; } 55%{ opacity:.5; } }
@media (prefers-reduced-motion: reduce){ #preloader{ display:none; } }

/* ============================================================
   WOW LAYER — loud signature moments (by request; pushes past the
   design-system's "restraint" rule on purpose). Cream + green only.
   ============================================================ */

/* --- Kinetic marquee (replaces the static trust row) --- */
.marquee{ background:var(--ink); color:var(--cta-text); overflow:hidden;
  padding:var(--space-5) 0; }
.marquee__track{ display:flex; width:max-content; will-change:transform; }
@media (prefers-reduced-motion: no-preference){ .marquee__track{ animation:marquee 38s linear infinite; } }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__group{ display:flex; align-items:center; flex:0 0 auto; }
.marquee__item{ display:inline-flex; align-items:center; gap:var(--space-6); padding-right:var(--space-6);
  font-family:var(--font-display); font-weight:500; font-size:clamp(1.5rem, 3.4vw, 2.4rem);
  letter-spacing:-0.01em; white-space:nowrap; }
.marquee__item::before{ content:""; width:9px; height:9px; border-radius:50%;
  background:var(--cta-text); opacity:.5; flex:0 0 auto; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* --- Horizontal pinned product showcase --- */
.showcase{ background:var(--bg); }
.showcase__track{ display:flex; }
.showcase__panel{ display:flex; align-items:center; gap:clamp(var(--space-8), 5vw, var(--space-24)); }
.showcase__media{ border-radius:var(--radius-lg); overflow:hidden; flex:1 1 50%; background:var(--surface); }
.showcase__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.showcase__body{ flex:1 1 50%; }
.showcase__index{ font-family:var(--font-display); font-size:var(--fs-small); color:var(--ink-faint); letter-spacing:.22em; }
.showcase__name{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-display); line-height:1.02;
  letter-spacing:-0.025em; color:var(--ink); margin:var(--space-3) 0 var(--space-3); }
.showcase__micro{ font-size:var(--fs-small); color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; margin:0; }
.showcase__desc{ font-size:var(--fs-body-lg); color:var(--ink-soft); max-width:46ch; margin:var(--space-5) 0; }
.showcase__in{ font-size:var(--fs-small); color:var(--ink-faint); margin:0 0 var(--space-5); }
.showcase__price{ font-family:var(--font-display); font-size:var(--fs-h2); color:var(--ink); margin:0 0 var(--space-5);
  font-variant-numeric:tabular-nums; }
@media (min-width:768px){
  .showcase__viewport{ height:100vh; overflow:hidden; }
  .showcase__track{ height:100%; }
  .showcase__panel{ flex:0 0 100vw; height:100%; padding:0 var(--gutter); }
  .showcase__media{ height:66vh; flex:1 1 52%; }
  .showcase__panel:nth-child(even) .showcase__media{ order:2; } /* alternate image side */
}
@media (max-width:767px){
  .showcase__track{ flex-direction:column; gap:var(--space-16); }
  .showcase__panel{ flex-direction:column; align-items:stretch; padding:0 var(--gutter); }
  .showcase__media{ aspect-ratio:1/1; }
  .showcase__name{ font-size:var(--fs-h1); }
}

/* --- Hero kinetic word reveal --- */
.word-mask{ display:inline-block; overflow:hidden; vertical-align:top; }
.word{ display:inline-block; }

/* --- Drama beat: one section inverted to solid deep green --- */
.section--ink{ background:var(--ink); color:var(--cta-text); }
.section--ink h1, .section--ink h2, .section--ink h3,
.section--ink .display, .section--ink .h1, .section--ink .h2{ color:var(--cta-text); }
.section--ink p, .section--ink .lead{ color:rgba(246,241,232,.78); }
.section--ink .eyebrow{ color:rgba(246,241,232,.6); }
.section--ink .offer__tag{ color:var(--cta-text); border-color:rgba(246,241,232,.34); }
.section--ink .offer__risk{ color:rgba(246,241,232,.62); }
/* inverted CTA so the deep-green button stays visible on the deep-green ground */
.section--ink .btn-cta{ background:var(--cta-text); color:var(--ink); }
.section--ink .btn-cta:hover{ background:#fff; }

/* --- Showcase panel hover life (desktop, pointer) --- */
.showcase__media img{ transition:transform .7s cubic-bezier(.2,.7,.3,1); }
.showcase__name{ position:relative; }
.showcase__name::after{ content:""; position:absolute; left:0; bottom:-.14em; height:2px; width:2.4em;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .55s cubic-bezier(.2,.7,.3,1); }
@media (hover:hover) and (min-width:768px){
  .showcase__panel:hover .showcase__media img{ transform:scale(1.06); }
  .showcase__panel:hover .showcase__name::after{ transform:scaleX(1); }
}

/* --- Custom cursor (created by motion.js on desktop + fine pointer) --- */
.cursor{ position:fixed; left:0; top:0; width:30px; height:30px; border:1.5px solid #fff;
  border-radius:50%; pointer-events:none; z-index:9999; mix-blend-mode:difference;
  opacity:0; will-change:transform; }
body.has-cursor{ cursor:none; }
body.has-cursor a, body.has-cursor button, body.has-cursor [role="button"], body.has-cursor input{ cursor:none; }
@media (hover:none){ .cursor{ display:none; } }