/* ==========================================================================
   LOKA TREATS — landing page styles
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Typography & utilities
   4.  Buttons & controls
   5.  Announcement bar
   6.  Navigation & mobile menu
   7.  Hero
   8.  Ticker
   9.  Collection & product cards
   10. Flavour showcase
   11. Why / benefits
   12. Brand story
   13. Bundle
   14. Reviews slider
   15. Social gallery
   16. Newsletter
   17. Footer
   18. Cart drawer & toast
   19. Motion: reveals, page load
   20. Responsive
   21. Reduced motion
   22. Preloader, scroll progress & GSAP hand-off
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
   :root {
    /* Brand palette — pulled from the LOKA Treats logo (olive + terracotta on cream)
       and widened with bakery warmth plus two playful accents. */
    --ink:         #1E251B;   /* deep olive-black, body text */
    --ink-soft:    #4E5A48;   /* muted body text */
    --forest:      #2F3D2A;   /* primary brand green */
    --forest-deep: #161C13;
    --forest-mid:  #3E5137;
    --cream:       #FBF3E6;   /* main light surface */
    --paper:       #FFFCF5;   /* card surface */
    --sand:        #F0E5D2;   /* soft beige */
    --clay:        #C0492B;   /* terracotta — primary action */
    --clay-lt:     #DB6C48;
    --butter:      #F0B429;   /* energetic yellow */
    --teal:        #157C7B;   /* cool accent */
    --cocoa:       #4A2F22;   /* dark chocolate */
    --berry:       #A81E3C;
  
    /* Per-flavour accents (also set per card by script.js via --accent / --tint) */
    --accent: var(--clay);      /* vivid — decorative fills */
    --accent-ink: var(--clay);  /* darkened — text on cream, meets WCAG AA */
    --tint:   var(--sand);
  
    /* ---- Type: two families only ----------------------------------------
       --font-display  Fraunces — a soft "old style" serif; all headings, the
                       wordmark, prices and stats. Carries the artisan character.
       --font-sans     Plus Jakarta Sans — body, navigation, buttons, labels and
                       any mono-style caption. One sans for everything non-display.
  
       Fraunces is variable on three axes. Rather than hand-tune opsz/SOFT/WONK in
       a dozen places (the old inconsistency), motion is standardised into two
       mixins applied via `font-variation-settings`:
         --fv-display  large headings — high optical size, soft terminals
         --fv-text     small serif (prices, stats) — text optical size, readable
       WONK is left at its automatic default (on above 18px, off below). */
    --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
    --font-sans:    "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  
    /* Back-compat aliases so no rule is left pointing at a deleted token. */
    --font-body:    var(--font-sans);
    --font-mono:    var(--font-sans);
    --font-script:  "Parisienne", cursive;
  
    --fv-display: "opsz" 144, "SOFT" 40;
    --fv-text:    "opsz" 20, "SOFT" 30;
  
    /* ---- Type scale ------------------------------------------------------
       One modular scale (~1.2 minor third), fluid where it needs to breathe.
       Every font-size in the sheet references one of these — no ad-hoc values. */
    --fs-2xs:  0.72rem;                                    /* micro labels, seals */
    --fs-xs:   0.78rem;                                    /* captions, meta */
    --fs-sm:   0.875rem;                                   /* small UI, filters */
    --fs-base: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);  /* body */
    --fs-md:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* large body, nav */
    --fs-lg:   clamp(1.2rem, 1.09rem + 0.5vw, 1.45rem);   /* hero lede, lead-in */
    --fs-xl:   clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem);  /* card / cart titles */
    --fs-h3:   clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);  /* sub-headings */
    --fs-h2:   clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem);     /* section headings */
    --fs-h1:   clamp(2.9rem, 1.6rem + 6vw, 7rem);         /* hero */
  
    /* ---- Line heights ---------------------------------------------------- */
    --lh-tight:  1.05;   /* large display headings */
    --lh-snug:   1.2;    /* sub-headings, card titles */
    --lh-normal: 1.6;    /* body copy */
    --lh-relaxed:1.7;    /* small print blocks */
  
    /* ---- Letter spacing -------------------------------------------------- */
    --ls-tight:  -0.03em;  /* big display */
    --ls-snug:   -0.015em; /* medium headings */
    --ls-normal: 0;
    --ls-wide:   0.14em;   /* uppercase labels / eyebrows */
  
    /* Space */
    --gap:      clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
    --pad-sec:  clamp(4.5rem, 3rem + 6vw, 8.5rem);
    --shell:    1280px;
    --shell-pad: clamp(1.15rem, 0.6rem + 2.6vw, 3rem);
  
    /* Shape & depth */
    --r-sm:  10px;
    --r-md:  18px;
    --r-lg:  30px;
    --r-xl:  44px;
    --shadow-sm: 0 2px 10px rgba(30, 37, 27, 0.06);
    --shadow-md: 0 14px 34px -14px rgba(30, 37, 27, 0.28);
    --shadow-lg: 0 34px 70px -28px rgba(30, 37, 27, 0.42);
  
    /* Motion */
    --ease: cubic-bezier(0.22, 0.78, 0.28, 1);
    --ease-back: cubic-bezier(0.34, 1.4, 0.5, 1);
    --t-fast: 0.22s;
    --t-mid:  0.42s;
    --t-slow: 0.75s;
  
    --nav-h: 68px;
  }
  
  
  /* ==========================================================================
     2. RESET & BASE
     ========================================================================== */
  *, *::before, *::after { box-sizing: border-box; }
  
  * { margin: 0; }
  
  html {
    /* `clip` rather than `hidden`: it prevents stray horizontal overflow without
       creating a scroll container, so the sticky nav keeps working. */
    overflow-x: clip;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 20px);
    -webkit-text-size-adjust: 100%;
  }
  
  body {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--ink);
    background: var(--cream);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  
  body.is-locked { overflow: hidden; }
  
  img, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  
  ul, ol { list-style: none; padding: 0; }
  
  /* Components below set `display`, which would otherwise beat the browser
     default for [hidden]. Panels are toggled with the hidden attribute in JS. */
  [hidden] { display: none !important; }
  
  a { color: inherit; text-decoration: none; }
  
  /* Icon strokes are shared across every inline SVG icon */
  .icon-btn svg,
  .round-btn svg,
  .why__icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .why__icon svg { stroke-width: 1.5; }
  
  /* Focus: visible, on-brand, never removed */
  :focus-visible {
    outline: 3px solid var(--clay);
    outline-offset: 3px;
    border-radius: 4px;
  }
  .showcase :focus-visible,
  .bundle :focus-visible,
  .footer :focus-visible { outline-color: var(--butter); }
  
  .skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 999;
    padding: 0.7rem 1.1rem;
    background: var(--forest);
    color: var(--cream);
    border-radius: var(--r-sm);
    font-weight: 600;
    transform: translateY(-160%);
    transition: transform var(--t-fast) var(--ease);
  }
  .skip-link:focus-visible { transform: none; }
  
  
  /* ==========================================================================
     3. TYPOGRAPHY & UTILITIES
     ========================================================================== */
  .shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    /* max() keeps copy clear of the notch now that viewport-fit=cover is set */
    padding-left: max(var(--shell-pad), env(safe-area-inset-left));
    padding-right: max(var(--shell-pad), env(safe-area-inset-right));
  }
  
  .section { padding-block: var(--pad-sec); }
  
  .display {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    font-variation-settings: var(--fv-display);
    text-wrap: balance;
  }
  .display--md { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.15rem); }
  
  h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-snug);
    font-variation-settings: var(--fv-text);
  }
  
  /* Small tracked caption (class name kept for HTML compatibility). Plus Jakarta
     Sans in medium, mildly tracked — replaces the old monospaced captions. */
  .mono-xs {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: var(--fs-xs);
    letter-spacing: 0.02em;
  }
  
  .label {
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 0.55rem;
  }
  
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--ink-soft);
    margin-bottom: 1.1rem;
  }
  .eyebrow .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--clay);
    flex: none;
  }
  
  .price {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: var(--ls-snug);
    font-variation-settings: var(--fv-text);
    font-feature-settings: "tnum" 1;   /* tabular figures keep prices aligned */
  }
  .price--lg { font-size: var(--fs-xl); }
  
  .tag {
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.34rem 0.7rem;
    border-radius: 100px;
    background: var(--forest);
    color: var(--cream);
  }
  .tag--new       { background: var(--teal); }
  .tag--bestseller{ background: var(--clay); }
  .tag--popular   { background: var(--cocoa); }
  .tag--limited   { background: var(--butter); color: var(--ink); }
  
  /* Wordmark lockup — mirrors the printed logo */
  .wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.32em;
    line-height: 1;
    white-space: nowrap;
  }
  .wordmark__loka {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.16em;
    font-variation-settings: var(--fv-text);
  }
  /* "Treats" uses Parisienne — a script face — for the logo only, in the header
     and footer. Script fonts run small on the body, so the size is nudged up and
     the baseline dropped slightly to sit against the LOKA capitals. */
  .wordmark__treats {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: 1.7rem;
    letter-spacing: 0;
    color: var(--clay);
    transform: translateY(0.05em);
  }
  .wordmark--sm .wordmark__loka { font-size: 1.12rem; }
  .wordmark--sm .wordmark__treats { font-size: 1.45rem; }
  .wordmark--light .wordmark__loka { font-size: 1.55rem; }
  .wordmark--light .wordmark__treats { font-size: 2rem; color: var(--butter); }
  
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  
  /* Section headers */
  .sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gap);
    margin-bottom: clamp(2rem, 1rem + 3vw, 3.4rem);
  }
  .sec-head__note {
    max-width: 34ch;
    color: var(--ink-soft);
    padding-bottom: 0.4rem;
  }
  .sec-head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  /* Decorative crumbs & chips (shared) */
  .crumb, .chip, .spark {
    position: absolute;
    pointer-events: none;
    z-index: 2;
  }
  .crumb {
    border-radius: 46% 54% 58% 42% / 50% 44% 56% 50%;
    background: var(--cocoa);
    opacity: 0.85;
  }
  .chip {
    border-radius: 3px;
    background: var(--clay);
    transform: rotate(18deg);
  }
  .spark {
    font-size: 1.4rem;
    color: var(--butter);
    line-height: 1;
  }
  
  
  /* ==========================================================================
     4. BUTTONS & CONTROLS
     ========================================================================== */
  .btn {
    --btn-bg: var(--forest);
    --btn-fg: var(--cream);
    --btn-fill: var(--forest-mid);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.92rem 1.6rem;
    border-radius: 100px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 600;
    font-size: var(--fs-base);
    letter-spacing: 0.005em;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-mid) var(--ease);
    will-change: transform;
  }
  /* Animated fill sweeps up from the bottom on hover */
  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--btn-fill);
    transform: translateY(101%);
    transition: transform var(--t-mid) var(--ease);
  }
  .btn:hover::before,
  .btn:focus-visible::before { transform: translateY(0); }
  .btn:hover { box-shadow: var(--shadow-md); }
  .btn:active { transform: scale(0.97); }
  
  .btn__arrow {
    display: inline-block;
    transition: transform var(--t-mid) var(--ease-back);
  }
  .btn:hover .btn__arrow,
  .btn:focus-visible .btn__arrow { transform: translateX(5px); }
  
  .btn--clay   { --btn-bg: var(--clay);   --btn-fg: #FFF6EE; --btn-fill: var(--clay-lt); }
  .btn--ink    { --btn-bg: var(--forest); --btn-fg: var(--cream); --btn-fill: var(--forest-mid); }
  .btn--butter { --btn-bg: var(--butter); --btn-fg: var(--ink); --btn-fill: #FFD066; }
  .btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-fill: var(--ink);
    border: 1.5px solid currentColor;
  }
  .btn--ghost:hover, .btn--ghost:focus-visible { color: var(--cream); }
  
  .btn--sm { padding: 0.6rem 1.05rem; font-size: var(--fs-sm); }
  .btn--block { width: 100%; }
  
  .link-btn {
    position: relative;
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    padding: 0.35rem 0;
  }
  .link-btn::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0.15rem;
    width: 100%; height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--t-mid) var(--ease);
  }
  .link-btn:hover::after, .link-btn:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }
  
  .icon-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    color: inherit;
    transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .icon-btn svg { width: 21px; height: 21px; }
  .icon-btn:hover { background: rgba(30, 37, 27, 0.08); transform: translateY(-2px); }
  
  .bag-count {
    position: absolute;
    top: 2px; right: 0;
    min-width: 19px; height: 19px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 100px;
    background: var(--clay);
    color: #fff;
    font-family: var(--font-sans);
    font-size: var(--fs-2xs);
    font-weight: 700;
    transition: transform var(--t-fast) var(--ease-back);
  }
  .bag-count.is-pop { transform: scale(1.45); }
  
  .round-btn {
    display: grid;
    place-items: center;
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease);
  }
  .round-btn svg { width: 22px; height: 22px; }
  .round-btn:hover { background: var(--ink); color: var(--cream); transform: translateY(-3px); }
  .showcase .round-btn:hover { background: var(--ink); color: var(--cream); }
  
  /* Language toggle — a compact two-state pill */
  .lang {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    margin-right: 0.35rem;
    border-radius: 100px;
    border: 1.5px solid rgba(30, 37, 27, 0.16);
    background: rgba(255, 252, 245, 0.5);
  }
  .lang__btn {
    padding: 0.32rem 0.62rem;
    border-radius: 100px;
    font-family: var(--font-sans);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .lang__btn:hover { color: var(--ink); }
  .lang__btn[aria-pressed="true"] {
    background: var(--forest);
    color: var(--cream);
  }
  
  /* Full-width version inside the mobile menu */
  .lang--menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    width: 100%;
    margin: 0 0 0.2rem;
    border-color: rgba(251, 243, 230, 0.3);
    background: rgba(251, 243, 230, 0.08);
  }
  .lang--menu .lang__btn {
    padding: 0.6rem 0.5rem;
    font-size: var(--fs-2xs);
    color: rgba(251, 243, 230, 0.7);
  }
  .lang--menu .lang__btn:hover { color: var(--cream); }
  .lang--menu .lang__btn[aria-pressed="true"] {
    background: var(--butter);
    color: var(--ink);
  }
  
  .burger {
    display: none;
    width: 42px; height: 42px;
    border-radius: 50%;
    padding: 11px 10px;
  }
  .burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease);
  }
  .burger span + span { margin-top: 5px; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  
  
  /* ==========================================================================
     5. ANNOUNCEMENT BAR
     ========================================================================== */
  .announce {
    position: relative;
    z-index: 60;
    background: var(--forest);
    color: var(--cream);
    overflow: hidden;
    padding-block: 0.55rem;
  }
  .announce__track {
    display: flex;
    width: max-content;
    animation: slide-left 34s linear infinite;
    will-change: transform;
  }
  .announce:hover .announce__track,
  .announce:focus-within .announce__track { animation-play-state: paused; }
  
  .announce__list {
    display: flex;
    align-items: center;
    gap: 2.6rem;
    padding-right: 2.6rem;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }
  .announce__list li:nth-child(even) { color: var(--butter); }
  
  @keyframes slide-left {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
  
  
  /* ==========================================================================
     6. NAVIGATION
     ========================================================================== */
  .nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: transparent;
    transition: background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
  }
  .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    min-height: var(--nav-h);
  }
  .nav__links ul {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 0.3rem + 1.6vw, 2.1rem);
  }
  .nav__links a {
    position: relative;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.4rem 0;
  }
  .nav__links a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: var(--clay);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--t-mid) var(--ease);
  }
  .nav__links a:hover::after,
  .nav__links a:focus-visible::after,
  .nav__links a.is-current::after { transform: scaleX(1); transform-origin: left; }
  
  .nav__actions { display: flex; align-items: center; gap: 0.15rem; }
  
  /* Solid state after scroll */
  .nav.is-stuck {
    background: rgba(251, 243, 230, 0.82);
    -webkit-backdrop-filter: blur(11px);
    backdrop-filter: blur(11px);
    box-shadow: 0 1px 0 rgba(30, 37, 27, 0.08), var(--shadow-sm);
  }
  
  /* Search bar */
  .searchbar {
    border-top: 1px solid rgba(30, 37, 27, 0.1);
    background: var(--paper);
  }
  .searchbar__inner {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding-block: 0.8rem;
  }
  .searchbar input {
    flex: 1;
    min-width: 0;
    padding: 0.8rem 1.1rem;
    border: 1.5px solid rgba(30, 37, 27, 0.16);
    border-radius: 100px;
    background: var(--cream);
  }
  .searchbar input:focus-visible { outline-offset: 1px; }
  
  /* Mobile slide-out menu */
  .menu-scrim, .cart-scrim {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(22, 28, 19, 0.5);
    opacity: 0;
    transition: opacity var(--t-mid) var(--ease);
  }
  .menu-scrim.is-open, .cart-scrim.is-open { opacity: 1; }
  
  .mobile-menu {
    position: fixed;
    top: 0; right: 0;
    z-index: 80;
    width: min(360px, 88vw);
    height: 100dvh;
    padding: 1.4rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    background: var(--forest);
    color: var(--cream);
    transform: translateX(100%);
    transition: transform var(--t-mid) var(--ease);
  }
  .mobile-menu.is-open { transform: none; }
  .mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
  }
  .mobile-menu__links { flex: 1; }
  .mobile-menu__links li + li { border-top: 1px solid rgba(251, 243, 230, 0.16); }
  .mobile-menu__links a {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    padding: 1rem 0;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 600;
    font-variation-settings: var(--fv-text);
    transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .mobile-menu__links a:hover { color: var(--butter); transform: translateX(5px); }
  .mobile-menu__links .num { color: var(--butter); opacity: 0.75; }
  .mobile-menu__foot { display: grid; gap: 0.9rem; }
  .mobile-menu__foot p { opacity: 0.7; }
  
  
  /* ==========================================================================
     7. HERO
     ========================================================================== */
  .hero {
    position: relative;
    isolation: isolate;
    padding-top: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
    padding-bottom: clamp(3rem, 1rem + 7vw, 7rem);
    overflow: hidden;
  }
  /* Soft curved wash behind the composition */
  .hero__wash {
    position: absolute;
    z-index: -1;
    top: -22%;
    right: -14%;
    width: min(78vw, 900px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, var(--sand), rgba(240, 229, 210, 0) 68%);
  }
  .hero::after {
    content: "";
    position: absolute;
    z-index: -2;
    left: 50%; bottom: -1px;
    width: 130%;
    height: clamp(60px, 8vw, 130px);
    transform: translateX(-50%);
    background: var(--paper);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  }
  
  /* Soft colour blobs — GSAP drifts these slowly */
  .hero__blob {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    /* Soft edge comes from the gradient itself rather than filter: blur(), which
       is an expensive per-frame pass while these elements are drifting. */
  }
  .hero__blob--a {
    top: 4%; right: 0%;
    width: min(46vw, 520px); aspect-ratio: 1;
    background: radial-gradient(circle at 50% 50%,
      rgba(240, 180, 41, 0.34) 0%,
      rgba(240, 180, 41, 0.16) 42%,
      rgba(240, 180, 41, 0) 70%);
  }
  .hero__blob--b {
    bottom: 2%; left: -10%;
    width: min(40vw, 440px); aspect-ratio: 1;
    background: radial-gradient(circle at 50% 50%,
      rgba(192, 73, 43, 0.22) 0%,
      rgba(192, 73, 43, 0.10) 42%,
      rgba(192, 73, 43, 0) 70%);
  }
  
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center;
    gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    min-height: min(78vh, 760px);
  }
  
  .hero__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    font-variation-settings: var(--fv-display);
    margin-bottom: 1.5rem;
  }
  .hero__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
  .hero__title .line__in { display: block; }
  /* Emphasis word: italic + colour, drawing on Fraunces' expressive italic */
  .hero__title em {
    font-style: italic;
    font-weight: 600;
    color: var(--clay);
    position: relative;
  }
  /* Hand-drawn underline under the emphasised word */
  .hero__title em::after {
    content: "";
    position: absolute;
    left: 2%; right: 2%;
    bottom: 0.06em;
    height: 0.09em;
    border-radius: 100px;
    background: var(--butter);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s var(--ease) 1.05s;
  }
  body:not(.is-loading) .hero__title em::after { transform: scaleX(1); }
  
  .hero__lede {
    /* Now a short brand paragraph rather than a single line, so it reads at body
       scale with a comfortable measure — keeps the CTAs near the fold. */
    max-width: 52ch;
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    color: var(--ink-soft);
    margin-bottom: 1.75rem;
  }
  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 2.4rem;
  }
  /* Hero trust: a five-star rating beside a single social-proof line — a
     stronger, less cluttered signal than three feature bullets. */
  .trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: var(--fs-xs);
    letter-spacing: 0.01em;
    color: var(--ink-soft);
  }
  .trust__stars {
    color: var(--butter);
    font-size: var(--fs-sm);
    letter-spacing: 0.08em;
    line-height: 1;
  }
  
  /* Layered composition */
  .hero__stage {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
  }
  /* ---- Soft radial glow: anchors the cookie without a hard frame ---------- */
  .stage__glow {
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    z-index: 0;
    background:
      radial-gradient(circle at 50% 46%,
        rgba(240, 199, 108, 0.55) 0%,
        rgba(240, 199, 108, 0.28) 34%,
        rgba(240, 199, 108, 0.08) 55%,
        rgba(240, 199, 108, 0) 72%);
  }
  
  /* ---- The cookie floats free on its own soft shadow --------------------- */
  .stage__cookie {
    position: absolute;
    inset: 8%;
    z-index: 2;
    display: grid;
    place-items: center;
    will-change: transform;
  }
  .stage__cookie img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* A grounded drop shadow gives real depth without a container */
    filter: drop-shadow(0 26px 34px rgba(74, 47, 34, 0.28));
    transition: transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease);
  }
  body:not(.is-loading) .hero__stage .stage__cookie:hover img {
    transform: scale(1.035) rotate(2deg);
    filter: drop-shadow(0 40px 52px rgba(74, 47, 34, 0.36));
  }
  
  /* ---- Meaningful trust pill (replaces the "Kuantiti Kecil" seal) -------- */
  .stage__pill {
    position: absolute;
    z-index: 4;
    bottom: 7%;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    padding: 0.6rem 1.15rem;
    border-radius: 100px;
    background: rgba(255, 252, 245, 0.86);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(30, 37, 27, 0.08);
    box-shadow: var(--shadow-md);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--ink);
  }
  .stage__pill b { color: var(--clay); font-weight: 700; }
  
  /* ---- Floating ingredients: chocolate chips + crumbs ------------------- */
  .ingredient {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    will-change: transform;
  }
  
  /* Chocolate chip: a rounded teardrop, like a real chip */
  .chip-choc {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 34% 30%, #6B4A2E, #3A2416 72%);
    border-radius: 52% 52% 52% 52% / 62% 62% 42% 42%;
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.3), 0 3px 6px rgba(58, 36, 22, 0.28);
  }
  .chip-choc--1 { top: 12%; left: 4%;  width: 24px; height: 24px; }
  .chip-choc--2 { top: 30%; right: 2%; width: 17px; height: 17px; }
  .chip-choc--3 { bottom: 20%; right: 9%; width: 21px; height: 21px; }
  
  /* Crumb: small irregular golden fleck */
  .crumb-bit {
    background: var(--clay-lt, #E0A34B);
    border-radius: 46% 54% 58% 42% / 50% 44% 56% 50%;
    box-shadow: 0 2px 4px rgba(74, 47, 34, 0.2);
  }
  .crumb-bit--1 { top: 20%; left: 0%;  width: 12px; height: 10px; }
  .crumb-bit--2 { top: 8%;  right: 20%; width: 9px;  height: 8px; background: var(--butter); }
  .crumb-bit--3 { bottom: 10%; left: 12%; width: 13px; height: 11px; }
  .crumb-bit--4 { bottom: 30%; left: 5%; width: 8px;  height: 7px; background: var(--cocoa); }
  
  
  
  /* ==========================================================================
     9. COLLECTION & PRODUCT CARDS
     ========================================================================== */
  .collection { background: var(--paper); }
  
  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: clamp(1.8rem, 1rem + 2vw, 2.8rem);
  }
  .filter {
    padding: 0.6rem 1.15rem;
    border-radius: 100px;
    border: 1.5px solid rgba(30, 37, 27, 0.16);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .filter:hover { border-color: var(--ink); transform: translateY(-2px); }
  .filter.is-active {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--cream);
  }
  
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    gap: clamp(1rem, 0.5rem + 1.6vw, 1.9rem);
  }
  .grid__empty {
    padding: 3rem 0;
    text-align: center;
    color: var(--ink-soft);
  }
  
  .card {
    --accent: var(--clay);
    --tint: var(--sand);
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
    background: var(--cream);
    border: 1px solid rgba(30, 37, 27, 0.08);
    overflow: hidden;
    transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
  }
  .card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
  
  .card__media {
    position: relative;
    aspect-ratio: 4 / 3.2;
    display: grid;
    place-items: center;
    background: var(--tint);
    overflow: hidden;
  }
  /* Accent blob expands on hover. A real element rather than ::before so GSAP
     can tween it directly. */
  .card__blob {
    position: absolute;
    left: 50%; bottom: -58%;
    width: 116%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.16;
    transform: translateX(-50%) scale(0.72);
    transition: transform var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease);
  }
  .card:hover .card__blob { transform: translateX(-50%) scale(1); opacity: 0.28; }
  
  .card__img {
    position: relative;
    z-index: 1;
    width: 63%;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--shadow-md);
    transition: transform var(--t-slow) var(--ease);
  }
  .card:hover .card__img { transform: scale(1.07) rotate(-4deg); }
  
  .card__tag { position: absolute; z-index: 2; top: 0.9rem; left: 0.9rem; }
  
  .card .crumb {
    z-index: 2;
    transition: transform var(--t-slow) var(--ease);
  }
  .card__crumb--1 { width: 15px; height: 13px; top: 20%; right: 14%; }
  .card__crumb--2 { width: 10px; height: 9px;  bottom: 16%; left: 15%; background: var(--accent); }
  .card:hover .card__crumb--1 { transform: translate(6px, -8px) rotate(24deg); }
  .card:hover .card__crumb--2 { transform: translate(-7px, 6px) rotate(-20deg); }
  
  .card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.55rem;
    padding: 1.25rem 1.3rem 1.4rem;
  }
  .card__body h3 { color: var(--ink); }
  .card__desc {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    flex: 1;
  }
  .card__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding-top: 0.2rem;
  }
  .card__price { font-size: var(--fs-md); color: var(--accent-ink, var(--accent)); }
  .card__wt { color: var(--ink-soft); }
  
  .card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-top: 0.5rem;
  }
  .card__actions .btn { flex: 1; }
  
  
  /* ==========================================================================
     10. FLAVOUR SHOWCASE
     ========================================================================== */
  .showcase {
    --sc-accent: var(--clay);
    position: relative;
    overflow: hidden;
    padding-block: var(--pad-sec);
    background: var(--tint, var(--sand));
    transition: background var(--t-slow) var(--ease);
  }
  .showcase__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.8rem, 1rem + 4vw, 4.5rem);
  }
  
  .showcase__visual { position: relative; aspect-ratio: 1; max-width: 540px; width: 100%; margin-inline: auto; }
  .showcase__halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--sc-accent);
    opacity: 0.14;
    transition: background var(--t-slow) var(--ease);
  }
  .showcase__disc {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform var(--t-slow) var(--ease);
  }
  .showcase__disc img { width: 100%; height: 100%; object-fit: cover; }
  .showcase__disc.is-swap { animation: swap-in 0.62s var(--ease); }
  @keyframes swap-in {
    0%   { transform: scale(0.86) rotate(-10deg); opacity: 0.25; }
    60%  { transform: scale(1.03) rotate(3deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
  }
  .crumb--s1 { width: 26px; height: 23px; top: 4%; left: 4%; background: var(--sc-accent); }
  .crumb--s2 { width: 17px; height: 15px; bottom: 8%; right: 2%; background: var(--cocoa); }
  
  .showcase__panel { max-width: 34rem; }
  .showcase__panel .display { margin-bottom: 0.9rem; }
  .showcase__desc {
    font-size: var(--fs-lg);
    color: var(--ink-soft);
    margin-bottom: 1.8rem;
    max-width: 40ch;
  }
  .showcase__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem 2.6rem;
    padding-block: 1.4rem;
    border-block: 1px solid rgba(30, 37, 27, 0.14);
    margin-bottom: 1.8rem;
  }
  .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .chips li {
    padding: 0.3rem 0.75rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(30, 37, 27, 0.1);
    font-size: var(--fs-xs);
  }
  .price--lg { color: var(--sc-ink, var(--sc-accent)); }
  
  .showcase__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.8rem;
  }
  .stepper-nav { display: flex; gap: 0.55rem; }
  
  .showcase__dots { display: flex; flex-wrap: wrap; gap: 0.45rem; }
  .showcase__dots button {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(30, 37, 27, 0.22);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .showcase__dots button:hover { transform: translateY(-3px); border-color: var(--ink); }
  .showcase__dots button[aria-current="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--cream);
  }
  
  /* Text swap transition */
  .is-fading { opacity: 0; transform: translateY(10px); }
  [data-showcase-name], [data-showcase-desc], [data-showcase-ings], [data-showcase-price] {
    transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
  }
  
  
  /* ==========================================================================
     11. WHY / BENEFITS
     ========================================================================== */
  .why { background: var(--paper); }
  .why__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: clamp(0.9rem, 0.4rem + 1.4vw, 1.5rem);
  }
  .why__card {
    padding: 2rem 1.6rem 1.8rem;
    border-radius: var(--r-lg);
    background: var(--cream);
    border: 1px solid rgba(30, 37, 27, 0.08);
    transition: transform var(--t-mid) var(--ease), background var(--t-mid) var(--ease),
                box-shadow var(--t-mid) var(--ease);
  }
  .why__card:hover {
    transform: translateY(-7px);
    background: var(--sand);
    box-shadow: var(--shadow-md);
  }
  .why__icon {
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    margin-bottom: 1.1rem;
    border-radius: 50%;
    background: var(--forest);
    color: var(--butter);
    transition: transform var(--t-mid) var(--ease-back);
  }
  .why__icon svg { width: 30px; height: 30px; }
  .why__card:hover .why__icon { transform: rotate(-9deg) scale(1.08); }
  .why__card h3 { margin-bottom: 0.45rem; }
  .why__card p { font-size: var(--fs-sm); color: var(--ink-soft); }
  
  
  /* ==========================================================================
     12. BRAND STORY
     ========================================================================== */
  .story { background: var(--cream); overflow: hidden; }
  .story__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 5vw, 5rem);
  }
  
  .story__media {
    position: relative;
    aspect-ratio: 1 / 1.02;
    min-height: 380px;
  }
  .story__frame {
    position: absolute;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform var(--t-slow) var(--ease);
    will-change: transform;
  }
  .story__frame img { width: 100%; height: 100%; object-fit: cover; }
  .story__frame--a {
    top: 0; left: 0;
    width: 66%; height: 74%;
    rotate: -3.5deg;
  }
  .story__frame--b {
    right: 0; bottom: 0;
    width: 52%; height: 58%;
    rotate: 4.5deg;
    border: 6px solid var(--paper);
  }
  .story__frame--a:hover, .story__frame--b:hover { rotate: 0deg; }
  
  .story__seal {
    position: absolute;
    z-index: 3;
    left: 46%;
    top: 52%;
    width: clamp(96px, 15vw, 138px);
    height: auto;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    animation: bob 7s ease-in-out infinite;
  }
  @keyframes bob {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-12px) rotate(4deg); }
  }
  
  .story__copy p { color: var(--ink-soft); max-width: 46ch; }
  .story__copy p + p { margin-top: 1rem; }
  .story__copy .display { margin-bottom: 1.3rem; }
  
  .stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem 2.4rem;
    margin-block: 2.2rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(30, 37, 27, 0.14);
  }
  .stat dt { color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.1em; }
  .stat__n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.7rem);
    line-height: 1;
    letter-spacing: var(--ls-tight);
    font-variation-settings: var(--fv-display);
    font-feature-settings: "tnum" 1;
    color: var(--clay);
    margin-top: 0.3rem;
  }
  
  
  /* ==========================================================================
     13. BUNDLE
     ========================================================================== */
  .bundle {
    position: relative;
    overflow: hidden;
    padding-block: var(--pad-sec);
    background: var(--forest);
    color: var(--cream);
  }
  .bundle::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 82% 26%, rgba(240, 180, 41, 0.22), transparent 46%),
      radial-gradient(circle at 8% 84%, rgba(192, 73, 43, 0.26), transparent 44%);
    pointer-events: none;
  }
  .bundle__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  }
  .bundle__copy .display { margin: 0.9rem 0 0.8rem; }
  .bundle__lede { font-size: var(--fs-lg); opacity: 0.86; max-width: 34ch; }
  .bundle__list {
    display: grid;
    gap: 0.6rem;
    margin: 1.8rem 0;
    max-width: 40ch;
  }
  .bundle__list li {
    position: relative;
    padding-left: 1.7rem;
    opacity: 0.9;
  }
  .bundle__list li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.62em;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--butter);
  }
  .bundle__buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 0.9rem;
  }
  .bundle__price { display: flex; align-items: baseline; gap: 0.7rem; }
  .price-was {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    opacity: 0.55;
    text-decoration: line-through;
  }
  .price-now {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
    line-height: 1;
    letter-spacing: var(--ls-tight);
    font-variation-settings: var(--fv-display);
    font-feature-settings: "tnum" 1;
    color: var(--butter);
  }
  .bundle__save { opacity: 0.6; }
  
  .bundle__media { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; margin-inline: auto; }
  .bundle__disc {
    position: absolute;
    inset: 4%;
    border-radius: var(--r-xl);
    overflow: hidden;
    rotate: -3deg;
    box-shadow: var(--shadow-lg);
    transition: rotate var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
    will-change: transform;
  }
  .bundle__disc img { width: 100%; height: 100%; object-fit: cover; }
  .bundle__disc:hover { rotate: 0deg; }
  .bundle__badge {
    position: absolute;
    z-index: 3;
    top: -2%; right: 0;
    display: grid;
    place-items: center;
    width: clamp(80px, 11vw, 106px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--butter);
    color: var(--ink);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--fs-2xs);
    line-height: 1.35;
    box-shadow: var(--shadow-md);
    animation: bob 6s ease-in-out infinite;
  }
  .bundle__badge b { display: block; font-size: var(--fs-sm); letter-spacing: -0.01em; }
  .crumb--b1 { width: 26px; height: 22px; top: 12%; left: -2%; background: var(--butter); }
  .crumb--b2 { width: 16px; height: 14px; bottom: 6%; right: 12%; background: var(--clay-lt); }
  
  
  /* ==========================================================================
     14. REVIEWS SLIDER
     ========================================================================== */
  .reviews { background: var(--paper); }
  .slider-nav { display: flex; gap: 0.55rem; }
  
  .slider { overflow: hidden; }
  .slider__track {
    display: flex;
    transition: transform var(--t-slow) var(--ease);
    will-change: transform;
  }
  .slide {
    flex: 0 0 100%;
    min-width: 0;
    padding-right: 1px; /* keeps sub-pixel rounding from clipping */
  }
  .slide__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.2rem, 0.6rem + 2vw, 2.4rem);
    padding: clamp(1.6rem, 1rem + 2vw, 2.8rem);
    border-radius: var(--r-lg);
    background: var(--cream);
    border: 1px solid rgba(30, 37, 27, 0.08);
  }
  .slide__avatar {
    display: grid;
    place-items: center;
    width: clamp(58px, 8vw, 82px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent, var(--clay));
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-xl);
    font-variation-settings: var(--fv-text);
  }
  .slide__stars { color: var(--butter); letter-spacing: 0.16em; font-size: var(--fs-md); margin-bottom: 0.7rem; }
  .slide__stars .dim { opacity: 0.26; }
  .slide__quote {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-xl);
    line-height: 1.4;
    letter-spacing: var(--ls-snug);
    font-variation-settings: var(--fv-text);
    margin-bottom: 1.1rem;
    text-wrap: pretty;
  }
  .slide__who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
  .slide__name { font-weight: 600; }
  .slide__bought {
    font-family: var(--font-sans);
    font-size: var(--fs-2xs);
    padding: 0.28rem 0.7rem;
    border-radius: 100px;
    background: var(--tint, var(--sand));
    color: var(--ink);
  }
  
  .dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.8rem;
  }
  .dots button {
    width: 34px; height: 6px;
    border-radius: 100px;
    background: rgba(30, 37, 27, 0.18);
    transition: background var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
  }
  .dots button[aria-current="true"] { background: var(--clay); width: 52px; }
  
  
  /* ==========================================================================
     15. SOCIAL GALLERY
     ========================================================================== */
  .social { background: var(--cream); }
  .social__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(150px, auto);
    gap: clamp(0.6rem, 0.3rem + 1vw, 1rem);
  }
  .social__cell { position: relative; }
  .social__cell--tall { grid-row: span 2; }
  .social__cell--wide { grid-column: span 2; }
  
  .social__cell a {
    position: relative;
    display: block;
    height: 100%;
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .social__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
  }
  .social__cell a:hover img,
  .social__cell a:focus-visible img { transform: scale(1.08); }
  
  .social__over {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    background: rgba(22, 28, 19, 0.55);
    color: var(--cream);
    font-weight: 600;
    font-size: var(--fs-sm);
    opacity: 0;
    transition: opacity var(--t-mid) var(--ease);
  }
  .social__cell a:hover .social__over,
  .social__cell a:focus-visible .social__over { opacity: 1; }
  
  /* Instagram glyph drawn in CSS */
  .ig {
    width: 20px; height: 20px;
    border: 2px solid currentColor;
    border-radius: 6px;
    position: relative;
    flex: none;
  }
  .ig::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 2px solid currentColor;
    border-radius: 50%;
  }
  .ig::after {
    content: "";
    position: absolute;
    top: 1.5px; right: 1.5px;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: currentColor;
  }
  .ig--lg { width: 24px; height: 24px; }
  
  
  /* ==========================================================================
     16. NEWSLETTER
     ========================================================================== */
  .news {
    background: var(--butter);
    color: var(--ink);
    padding-block: var(--pad-sec);
  }
  .news__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.6rem, 1rem + 3vw, 4rem);
  }
  .news__copy p { max-width: 40ch; margin-top: 0.9rem; opacity: 0.78; }
  
  .field {
    display: flex;
    gap: 0.5rem;
    padding: 0.4rem;
    background: var(--paper);
    border-radius: 100px;
    border: 2px solid transparent;
    transition: border-color var(--t-fast) var(--ease);
  }
  .field:focus-within { border-color: var(--ink); }
  .news__form { position: relative; }
  .news__burst {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    overflow: visible;
  }
  .news__burst b {
    position: absolute;
    display: block;
    border-radius: 46% 54% 58% 42% / 50% 44% 56% 50%;
    will-change: transform;
  }
  .field input {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1.2rem;
    border: 0;
    background: none;
  }
  .field input:focus { outline: none; }
  .news__form.is-error .field { border-color: var(--clay); }
  
  .news__hint { margin-top: 0.75rem; opacity: 0.62; }
  .news__msg {
    min-height: 1.4rem;
    margin-top: 0.4rem;
    font-weight: 600;
    font-size: var(--fs-sm);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
  }
  .news__msg.is-shown { opacity: 1; transform: none; }
  .news__msg.is-error { color: #7A1F12; }
  .news__msg.is-ok    { color: var(--forest); }
  
  
  /* ==========================================================================
     17. FOOTER
     ========================================================================== */
  .footer {
    background: var(--forest-deep);
    color: var(--cream);
    padding-top: clamp(3.5rem, 2rem + 4vw, 5.5rem);
    padding-bottom: 1.6rem;
  }
  .footer__grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: clamp(1.8rem, 1rem + 3vw, 3.5rem);
    padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  }
  .footer__brand p { margin: 1rem 0 1.4rem; max-width: 34ch; opacity: 0.7; font-size: var(--fs-sm); }
  .footer__col ul { display: grid; gap: 0.6rem; }
  .footer__col a, .footer__contact li {
    font-size: var(--fs-sm);
    opacity: 0.72;
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .footer__col a { display: inline-block; }
  .footer__col a:hover, .footer__col a:focus-visible { opacity: 1; transform: translateX(4px); color: var(--butter); }
  .footer .label { color: var(--butter); opacity: 0.9; }
  
  .socials { display: flex; gap: 0.6rem; }
  .socials a {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(251, 243, 230, 0.25);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }
  .socials a:hover, .socials a:focus-visible {
    background: var(--butter);
    border-color: var(--butter);
    color: var(--ink);
    transform: translateY(-3px);
  }
  .socials .sm { font-weight: 700; font-size: var(--fs-2xs); }
  
  .footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(251, 243, 230, 0.14);
    text-align: center;
  }
  .footer__bar p { opacity: 0.55; }
  /* Floating back-to-top. Hidden (and unfocusable) until the visitor scrolls;
     GSAP animates it in, and the .is-shown class is the no-GSAP fallback. */
  .to-top {
    position: fixed;
    z-index: 85;
    right: clamp(1rem, 2vw, 2rem);
    bottom: calc(clamp(1rem, 2vw, 2rem) + env(safe-area-inset-bottom));
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--forest);
    color: var(--cream);
    box-shadow: var(--shadow-lg);
    visibility: hidden;
    opacity: 0;
    /* Removes the 300ms double-tap-zoom wait on touch, and stops iOS showing a
       grey flash box over the button when it is tapped. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: opacity var(--t-mid) var(--ease), visibility var(--t-mid) var(--ease),
                background var(--t-fast) var(--ease);
  }
  .to-top svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .to-top:hover { background: var(--clay); }
  .to-top.is-shown { visibility: visible; opacity: 1; }
  
  
  /* ==========================================================================
     18. CART DRAWER & TOAST
     ========================================================================== */
  .cart {
    position: fixed;
    top: 0; right: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    width: min(430px, 100vw);
    height: 100dvh;
    background: var(--paper);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--t-mid) var(--ease);
  }
  .cart.is-open { transform: none; }
  
  .cart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem 1.3rem 1rem;
    border-bottom: 1px solid rgba(30, 37, 27, 0.1);
  }
  .cart__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    font-variation-settings: var(--fv-text);
  }
  .cart__title span { color: var(--ink-soft); }
  
  .cart__ship {
    padding: 0.8rem 1.3rem;
    background: var(--sand);
    color: var(--ink);
    text-align: center;
  }
  
  .cart__items {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem 1.3rem;
  }
  .cart__items li {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 0.9rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(30, 37, 27, 0.08);
  }
  .cart__thumb {
    width: 74px; height: 74px;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: var(--sand);
  }
  .cart__info { display: grid; gap: 0.35rem; align-content: start; }
  .cart__name { font-weight: 600; font-size: var(--fs-base); line-height: 1.25; }
  .cart__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.2rem;
  }
  
  .qty {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid rgba(30, 37, 27, 0.18);
    border-radius: 100px;
    overflow: hidden;
  }
  .qty button {
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    line-height: 1;
    transition: background var(--t-fast) var(--ease);
  }
  .qty button:hover { background: var(--sand); }
  .qty output {
    min-width: 26px;
    text-align: center;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
  }
  
  .cart__remove {
    font-size: var(--fs-xs);
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--ink-soft);
    transition: color var(--t-fast) var(--ease);
  }
  .cart__remove:hover { color: var(--clay); }
  
  .cart__empty {
    flex: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
    color: var(--ink-soft);
  }
  .cart__empty-mark { font-size: 3rem; color: var(--sand); line-height: 1; }
  
  .cart__foot {
    padding: 1.2rem 1.3rem calc(1.3rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(30, 37, 27, 0.1);
    background: var(--cream);
  }
  .cart__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: var(--fs-md);
    font-weight: 600;
    margin-bottom: 0.25rem;
  }
  .cart__row .price { font-size: var(--fs-xl); }
  .cart__note { color: var(--ink-soft); margin-bottom: 1rem; }
  
  /* Toast */
  .toast {
    position: fixed;
    z-index: 95;
    left: 50%;
    /* Sits above the floating button rather than under it */
    bottom: calc(92px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.3rem;
    border-radius: 100px;
    background: var(--forest);
    color: var(--cream);
    font-size: var(--fs-sm);
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    transform: translate(-50%, 26px);
    opacity: 0;
    transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
    max-width: calc(100vw - 2rem);
  }
  .toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
  
  
  /* ==========================================================================
     19. MOTION — page load + scroll reveals
     ========================================================================== */
  
  /* Reusable reveal classes, driven by Intersection Observer in script.js */
  .reveal {
    opacity: 0;
    transition: opacity var(--t-slow) var(--ease),
                translate var(--t-slow) var(--ease),
                scale var(--t-slow) var(--ease);
    will-change: translate, opacity;
  }
  .reveal[data-reveal="up"]    { translate: 0 30px; }
  .reveal[data-reveal="left"]  { translate: -38px 0; }
  .reveal[data-reveal="right"] { translate: 38px 0; }
  .reveal[data-reveal="scale"] { scale: 0.93; }
  
  .reveal.is-in {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    will-change: auto;
  }
  
  /* Stagger steps */
  .reveal[data-delay="1"] { transition-delay: 0.09s; }
  .reveal[data-delay="2"] { transition-delay: 0.18s; }
  .reveal[data-delay="3"] { transition-delay: 0.27s; }
  .reveal[data-delay="4"] { transition-delay: 0.36s; }
  .reveal[data-delay="5"] { transition-delay: 0.45s; }
  .reveal[data-delay="6"] { transition-delay: 0.54s; }
  
  /* Hero page-load sequence */
  .hero__title .line__in {
    transform: translateY(105%);
    transition: transform 0.95s var(--ease);
  }
  .hero__title .line:nth-child(1) .line__in { transition-delay: 0.12s; }
  .hero__title .line:nth-child(2) .line__in { transition-delay: 0.26s; }
  body:not(.is-loading) .hero__title .line__in { transform: none; }
  
  .hero__stage .stage__cookie {
    opacity: 0;
    transform: scale(0.86) translateY(12px);
    transition: opacity 1s var(--ease) 0.25s, transform 1.1s var(--ease-back) 0.25s;
  }
  body:not(.is-loading) .hero__stage .stage__cookie { opacity: 1; transform: none; }
  
  .hero__stage .stage__glow,
  .hero__stage .stage__pill {
    opacity: 0;
    transition: opacity 0.8s var(--ease) 0.65s;
  }
  body:not(.is-loading) .hero__stage .stage__glow,
  body:not(.is-loading) .hero__stage .stage__pill { opacity: 1; }
  
  .hero__stage .ingredient {
    opacity: 0;
    transition: opacity 0.7s var(--ease) 0.85s;
  }
  body:not(.is-loading) .hero__stage .ingredient { opacity: 1; }
  
  /* Hero copy reveals immediately on load rather than on scroll */
  body:not(.is-loading) .hero .reveal { opacity: 1; translate: 0 0; scale: 1; }
  .hero .reveal { transition-delay: 0.3s; }
  .hero .reveal[data-delay="1"] { transition-delay: 0.4s; }
  .hero .reveal[data-delay="2"] { transition-delay: 0.5s; }
  .hero .reveal[data-delay="3"] { transition-delay: 0.6s; }
  
  /* Parallax + mouse drift. `translate` is used rather than `transform` so these
     values compose with the hover/rotate transforms already on the same elements. */
  [data-parallax], [data-crumb] {
    translate: var(--px, 0px) var(--py, 0px);
  }
  
  
  /* ==========================================================================
     20. RESPONSIVE
     ========================================================================== */
  
  /* Hover-capable pointers only: magnetic buttons + card action reveal */
  @media (hover: hover) and (pointer: fine) {
    .card__actions {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
    }
    .card:hover .card__actions,
    .card:focus-within .card__actions { opacity: 1; transform: none; }
  }
  
  @media (max-width: 1080px) {
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .footer__brand { grid-column: 1 / -1; }
  }
  
  @media (max-width: 960px) {
    :root { --nav-h: 62px; }
  
    .nav__links { display: none; }
    .burger { display: block; }
  
    .hero__inner {
      grid-template-columns: 1fr;
      min-height: 0;
      text-align: left;
    }
    .hero__stage { order: -1; max-width: 440px; }
    .hero__wash { top: -8%; right: -30%; width: 110vw; }
  
    .showcase__inner,
    .story__inner,
    .bundle__inner,
    .news__inner { grid-template-columns: 1fr; }
  
    .showcase__visual { max-width: 400px; }
    .bundle__media { order: -1; max-width: 400px; }
    .story__media { order: -1; max-width: 480px; margin-inline: auto; min-height: 340px; }
    .showcase__panel { max-width: none; }
  
    .slide__inner { grid-template-columns: 1fr; }
  }
  
  @media (max-width: 620px) {
    /* Nav gets tight — the language toggle lives in the mobile menu instead */
    .nav__actions .lang { display: none; }
  }
  
  @media (max-width: 680px) {
    /* backdrop-filter is the single most expensive thing on a phone GPU;
       an opaque bar reads the same and costs nothing. */
    .nav.is-stuck {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background: var(--cream);
    }
    html.gsap-ready .nav.is-stuck { background: var(--cream); }
  
    .sec-head { flex-direction: column; align-items: flex-start; }
    .sec-head__note { padding-bottom: 0; }
  
    .social__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(140px, auto); }
    .social__cell--tall { grid-row: span 1; }
    .social__cell--wide { grid-column: span 2; }
  
    .stats { gap: 1.2rem 1.8rem; }
    .filters { gap: 0.4rem; }
    .filter { padding: 0.55rem 0.9rem; font-size: var(--fs-xs); }
  
    /* Simplify decoration on small screens */
    .spark, .crumb--b2, .crumb--s2 { display: none; }
    /* Thin out the floating ingredients so the cookie stays the focus on mobile */
    .chip-choc--2, .crumb-bit--2, .crumb-bit--4 { display: none; }
  
    .cart { width: 100vw; }
    .footer__grid { grid-template-columns: 1fr; }
  
    /* Mobile browser chrome (Safari's bottom bar) floats over the viewport, so
       the button is lifted clear of it rather than shrunk. Tap target stays 54px. */
    .to-top {
      right: 1rem;
      bottom: calc(1.35rem + env(safe-area-inset-bottom));
    }
  }
  
  @media (max-width: 400px) {
    :root { --shell-pad: 1rem; }
  
    .grid { grid-template-columns: 1fr; }
    .hero__cta { flex-direction: column; align-items: stretch; }
    .hero__cta .btn { width: 100%; }
    .btn { padding: 0.85rem 1.2rem; font-size: var(--fs-sm); }
    .showcase__dots button { width: 38px; height: 38px; }
    .cart__items li { grid-template-columns: 60px minmax(0, 1fr); }
    .cart__thumb { width: 60px; height: 60px; }
    .toast { left: 1rem; right: 1rem; transform: translate(0, 26px); max-width: none; }
    .toast.is-shown { transform: translate(0, 0); }
  }
  
  
  /* ==========================================================================
     22. PRELOADER, SCROLL PROGRESS & GSAP HAND-OFF
     ========================================================================== */
  
  /* --- Preloader --------------------------------------------------------- */
  .preloader {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background: var(--cream);
  }
  .preloader__inner {
    display: grid;
    justify-items: center;
    gap: 1.4rem;
    width: min(280px, 76vw);
    text-align: center;
  }
  
  .pre-cookie { overflow: visible; }
  .pre-cookie__body { fill: #D9A65A; }
  .pre-cookie__chip { fill: var(--cocoa); }
  .pre-cookie__bite { transform-box: fill-box; transform-origin: center; }
  
  .preloader__status {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-soft);
    min-height: 1.2em;
  }
  
  .preloader__bar {
    width: 100%;
    height: 3px;
    border-radius: 100px;
    background: rgba(30, 37, 27, 0.12);
    overflow: hidden;
  }
  .preloader__bar span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--clay), var(--butter));
    transform: scaleX(0);
    transform-origin: left;
  }
  
  /* --- Scroll progress --------------------------------------------------- */
  .scroll-progress {
    position: fixed;
    top: 0; left: 0;
    z-index: 100;
    width: 100%;
    height: 3px;
    pointer-events: none;
  }
  .scroll-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--clay), var(--butter) 70%, var(--teal));
    transform: scaleX(0);
    transform-origin: left;
  }
  
  /* --- Button glow ------------------------------------------------------- */
  .btn--magnetic { will-change: transform; }
  .btn__glow {
    position: absolute;
    inset: -40%;
    z-index: -2;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.55), transparent 62%);
    opacity: 0;
    pointer-events: none;
  }
  
  /* --- GSAP hand-off ------------------------------------------------------
     When animations.js boots successfully it puts `gsap-ready` on <html>.
     Everything below hands motion that GSAP now owns back from CSS, so the two
     never animate the same property. Without GSAP the CSS versions still run,
     which keeps the page fully animated as a fallback.
     ----------------------------------------------------------------------- */
  html.gsap-ready { scroll-behavior: auto; }
  
  html.gsap-ready .announce__track,
  html.gsap-ready .story__seal,
  html.gsap-ready .bundle__badge { animation: none; }
  
  /* GSAP writes to `transform`, so the CSS `translate`/`scale` reveal offsets are
     cleared. Opacity stays at 0 so nothing flashes before the timeline builds. */
  html.gsap-ready .reveal { translate: none; scale: none; }
  
  /* Nav background and shadow are scrubbed by ScrollTrigger; CSS keeps the blur */
  html.gsap-ready .nav.is-stuck { background: transparent; box-shadow: none; }
  
  /* GSAP writes inline transforms; CSS transitions would fight them */
  html.gsap-ready .reveal,
  html.gsap-ready .hero__title .line__in,
  html.gsap-ready .hero__stage .stage__cookie,
  html.gsap-ready .hero__stage .stage__glow,
  html.gsap-ready .hero__stage .stage__pill,
  html.gsap-ready .hero__stage .ingredient,
  html.gsap-ready .card,
  html.gsap-ready .card__img,
  html.gsap-ready .card__blob,
  html.gsap-ready .card__actions,
  html.gsap-ready .card .crumb,
  html.gsap-ready .card__tag,
  html.gsap-ready .showcase__disc,
  html.gsap-ready .slider__track,
  html.gsap-ready .socials a,
  html.gsap-ready .to-top__arrow { transition: none; }
  
  /* Hover states GSAP takes over */
  html.gsap-ready .card:hover { transform: none; }
  html.gsap-ready .card:hover .card__img { transform: none; }
  html.gsap-ready .card:hover .card__blob { transform: translateX(-50%) scale(0.72); opacity: 0.16; }
  html.gsap-ready .card:hover .card__crumb--1,
  html.gsap-ready .card:hover .card__crumb--2 { transform: none; }
  html.gsap-ready .socials a:hover,
  html.gsap-ready .to-top:hover .to-top__arrow { transform: none; }
  
  /* GSAP sets these itself; the page-load CSS rules would double up */
  html.gsap-ready .showcase__disc.is-swap { animation: none; }
  html.gsap-ready .is-fading { opacity: 1; transform: none; }
  
  /* Card actions stay hidden until GSAP reveals them on hover */
  @media (hover: hover) and (pointer: fine) {
    html.gsap-ready .card:hover .card__actions,
    html.gsap-ready .card:focus-within .card__actions { opacity: 1; }
  }
  
  /* Parallax is driven by GSAP quickSetter instead of the CSS custom properties */
  html.gsap-ready [data-parallax],
  html.gsap-ready [data-crumb] { translate: none; }
  
  
  /* ==========================================================================
     21. REDUCED MOTION
     Content stays visible; only non-essential motion is removed.
     ========================================================================== */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      transition-delay: 0ms !important;
      scroll-behavior: auto !important;
    }
  
    .announce__track,
    .story__seal,
    .bundle__badge { animation: none !important; }
  
    /* Everything is immediately visible and un-transformed */
    .reveal,
    .hero__title .line__in,
    .hero__stage .stage__cookie,
    .hero__stage .stage__glow,
    .hero__stage .stage__pill,
    .hero__stage .ingredient,
    .news__msg,
    .card__actions {
      opacity: 1 !important;
      transform: none !important;
      translate: none !important;
      scale: none !important;
    }
  
    .hero__title em::after { transform: scaleX(1) !important; }
  
    [data-parallax], [data-crumb] { translate: none !important; }
  
    /* Preloader collapses to a single static frame */
    .preloader { display: none !important; }
    .scroll-progress { display: none !important; }
    .hero__blob { display: none !important; }
    .announce__track, .stage__cookie { will-change: auto !important; }
    .btn__glow { display: none !important; }
    .to-top { visibility: visible !important; opacity: 1 !important; }
  }