/*
 * HOME V2 — scroll-driven product story.
 * Companion to page-home-v2.php, js/home-v2.js (page motion + Lenis),
 * js/hero-3d.js (capability gate) and js/hero-scene.js (Three.js story).
 *
 * Motion contract: `opacity: 0` only ever appears under `.ttc-anim`, which the
 * inline script sets when JS runs without reduced motion and a watchdog strips
 * if home-v2.js never reports ready. `html.ttc-story3d` is set only once the
 * WebGL scene has compiled; until then (and on every fallback path) the static
 * stills show and every chapter reads complete.
 *
 * The Elementor kit styles bare h1/h2/a/button at (0,1,1); everything here is
 * prefixed .ttc-home to win without !important.
 */

/* ---------- THE STORY: sticky stage + scrolling chapters ---------- */

.ttc-story {
  --story-bg: var(--ttc-deep);
  position: relative;
  background: var(--story-bg);
  transition: background-color 0.7s ease;
}
.ttc-story[data-chapter-active="hero"] { --story-bg: var(--ttc-deep); }
.ttc-story[data-chapter-active="made-with"] { --story-bg: var(--ttc-alt); }
.ttc-story[data-chapter-active="drop"] { --story-bg: var(--ttc-alt); }
.ttc-story[data-chapter-active="word"] { --story-bg: var(--ttc-cream); }

.ttc-story__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  z-index: 0;
  background: var(--story-bg);
  transition: background-color 0.7s ease;
}

/* The hero ground, in the why band's language: a clay light top-left and a gold light right over a lighter deep, with a
   warm spot behind the wordmark that follows the pointer (home-v2.js sets --glow-x/--glow-y). The drop keeps chapter 2's
   paper and only gains a soft spot and a shaded floor for the jar to stand on. */
.ttc-story__stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 46% at 8% 10%, rgba(var(--ttc-clay-rgb), 0.30), transparent 70%), radial-gradient(42% 42% at 92% 30%, rgba(var(--ttc-gold-rgb), 0.16), transparent 70%), radial-gradient(ellipse 70% 62% at var(--glow-x, 50%) var(--glow-y, 42%), var(--ttc-deep-light) 0%, var(--ttc-deep-mid) 46%, var(--ttc-deep-edge) 100%); opacity: 0; transition: opacity 0.7s ease; pointer-events: none; }
.ttc-story[data-chapter-active="hero"] .ttc-story__stage::before { opacity: 1; }
.ttc-story__spot { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; pointer-events: none; background:
  linear-gradient(180deg, rgba(var(--ttc-terracotta-rgb), 0) 68%, rgba(var(--ttc-terracotta-rgb), 0.14) 100%),
  radial-gradient(ellipse 72% 66% at 50% 40%, var(--ttc-paper) 0%, var(--ttc-cream) 40%, rgba(var(--ttc-alt-rgb), 0) 78%); }
.ttc-story[data-chapter-active="drop"] .ttc-story__spot { opacity: 1; }
.ttc-story__stage::after { content: ""; position: absolute; left: 50%; top: 42%; width: min(30vw, 380px); aspect-ratio: 1; transform: translate(-44%, -40%); border-radius: 50%; background: radial-gradient(circle, rgba(var(--ttc-shadow-rgb), 0.5), rgba(var(--ttc-shadow-rgb), 0) 66%); z-index: 1; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.ttc-story[data-chapter-active="hero"] .ttc-story__stage::after { opacity: 1; }
.ttc-story__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.9s ease; touch-action: pan-y; z-index: 2; }
html.ttc-story3d .ttc-story__canvas { opacity: 1; }
.ttc-story__canvas.is-interactive { pointer-events: auto; cursor: grab; }
.ttc-story__canvas.is-grabbing { cursor: grabbing; user-select: none; }

.ttc-story__stills { position: absolute; inset: 0; z-index: 2; }
.ttc-story__still { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
.ttc-story__still img { width: 100%; height: 100%; object-fit: cover; }
.ttc-story__still.is-active { opacity: 1; }
/* Only the chapter's own still is in the layout (so the others, lazy, are not fetched before they are needed). */
.ttc-story__still:not(.is-active) { display: none; }
html.ttc-story3d .ttc-story__stills { display: none; }

/* The chapter layer sits over the canvas; only its links, buttons and the card row take pointer events,
   so the parked jar underneath stays draggable. */
.ttc-story__chapters { position: relative; z-index: 1; margin-top: -100svh; pointer-events: none; }

.ttc-chapter { position: relative; pointer-events: none; --chapter-bg: var(--ttc-deep); }
.ttc-chapter--hero { height: calc(var(--ch-hero, 100) * 1svh); min-height: 560px; }
.ttc-chapter--made { --chapter-bg: var(--ttc-alt); }
.ttc-chapter--drop { --chapter-bg: var(--ttc-alt); }
/* Heights set how long each chapter's copy stays pinned (height minus one viewport); the
   3D timeline in hero-scene.js is timed to these fractions of the 800svh total. */
.ttc-chapter--made { height: calc(var(--ch-made, 150) * 1svh); }
.ttc-chapter--drop { height: calc(var(--ch-drop, 300) * 1svh); }
.ttc-chapter--word { height: calc(var(--ch-word, 180) * 1svh); }
.ttc-chapter a, .ttc-chapter button, .ttc-chapter .ttc-range { pointer-events: auto; }

.ttc-chapter__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  padding: clamp(104px, 14svh, 140px) var(--ttc-gutter) clamp(28px, 5svh, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-content: center;
}

/* Reveal states: chapters get .is-in from JS as the timeline enters them. */
.ttc-anim .ttc-chapter [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ttc-ease), transform 0.8s var(--ttc-ease); transition-delay: calc(var(--i, 0) * 60ms); }
.ttc-anim .ttc-chapter.is-in [data-reveal] { opacity: 1; transform: none; }
/* The hero's copy rises in by itself at first paint (it is the page's largest text, so it must not wait for a script). */
@keyframes ttc-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.ttc-anim .ttc-chapter--hero [data-reveal] { opacity: 1; transform: none; transition: none; animation: ttc-rise 0.8s var(--ttc-ease) both; animation-delay: calc(0.1s + var(--i, 0) * 60ms); }
html.ttc-loading .ttc-chapter--hero [data-reveal] { animation: none; }
.ttc-anim .ttc-chapter.is-out [data-reveal] { opacity: 0; transform: translateY(-18px); transition-duration: 0.45s; transition-delay: 0s; }

/* 1. Hero: the wordmark sits in the stage behind the transparent canvas; the 3D thekua floats in its gap. */
.ttc-chapter--hero .ttc-chapter__pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-content: stretch; justify-items: center; text-align: center; padding-top: calc(clamp(92px, 12svh, 120px) + var(--ttc-bar-h, 0px)); }
.ttc-hero__top { align-self: start; }
.ttc-home .ttc-hero__top .ttc-eyebrow { margin: 0; }
.ttc-hero__copy { grid-row: 3; align-self: end; max-width: 640px; }
.ttc-home .ttc-hero__word {
  position: absolute;
  left: 50%;
  top: 41%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 0;
  font-family: var(--ttc-display);
  font-weight: 600;
  font-size: clamp(84px, 16.5vw, 240px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ttc-cream);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.ttc-home .ttc-hero__word-part { display: inline-flex; will-change: transform, opacity; }
.ttc-hero__thekua { display: none; }
.ttc-home .ttc-hero__letter { display: inline-block; text-shadow: 0 18px 40px rgba(var(--ttc-shadow-rgb), 0.35); }
/* Optical kerning the face lacks between these capitals: U/A and K/U pull in a touch. */
.ttc-home .ttc-hero__letter[data-ch="A"] { margin-left: -0.06em; }
.ttc-home .ttc-hero__letter[data-ch="U"] { margin-left: -0.015em; }
.ttc-anim .ttc-hero__letter { opacity: 0; transform: translateY(0.18em); animation: ttc-letter 1.1s var(--ttc-ease) forwards; animation-delay: calc(0.15s + var(--i, 0) * 70ms); }
@keyframes ttc-letter { to { opacity: 1; transform: none; } }
@keyframes ttc-lift { from { transform: translateY(0.18em); } to { transform: none; } }
@keyframes ttc-lift-copy { from { transform: translateY(26px); } to { transform: none; } }
@keyframes ttc-k-drop { 0% { transform: translateY(-46vh) rotate(-200deg) scale(0.5); } 72% { transform: translateY(8px) rotate(6deg) scale(1.03); } 100% { transform: none; } }
@keyframes ttc-k-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ttc-spin-hint { 0%, 55% { transform: rotate(0deg); } 85%, 100% { transform: rotate(360deg); } }
@keyframes ttc-k-settle { 0%, 100% { transform: none; } 40% { transform: translateY(4px) scale(0.97); } }

/* The arrival. While html.ttc-loading (first paint, once per session, motion allowed) the stage's own dark ground is the
   loader: header covered, wordmark, copy and still held back, the vignette breathing. The thekua flies in on the canvas;
   as it lands home-v2.js swaps to html.ttc-loaded and everything else appears around it. */
.ttc-veil { position: fixed; left: 0; right: 0; top: 0; height: var(--ttc-header-h, 95px); z-index: 10000; display: none; pointer-events: none; background: radial-gradient(55% 46% at 8% calc(var(--ttc-header-h, 95px) + 10svh), rgba(var(--ttc-clay-rgb), 0.30), transparent 70%), radial-gradient(42% 42% at 92% calc(var(--ttc-header-h, 95px) + 30svh), rgba(var(--ttc-gold-rgb), 0.16), transparent 70%), radial-gradient(ellipse 70% 62% at 50% calc(var(--ttc-header-h, 95px) + 42svh), var(--ttc-deep-light) 0%, var(--ttc-deep-mid) 46%, var(--ttc-deep-edge) 100%) fixed; }
html.ttc-loading .ttc-veil, html.ttc-loaded .ttc-veil { display: none; } /* the page's own header hides itself while loading */
html.ttc-loaded .ttc-veil { opacity: 0; transition: opacity 0.6s ease; }
/* While loading, the wordmark and the hero copy are painted but kept out of sight UNDER the opaque ground (the wordmark
   behind the stage's ::before, the chapters layer behind the stage), not hidden with opacity: the page's first paint then
   already holds its largest text (the LCP), and the loader looks exactly as before. They animate in as it lifts. */
html.ttc-loading .ttc-hero__letter { animation: none; opacity: 1; transform: none; }
html.ttc-loading .ttc-hero__word { z-index: -1; }
html.ttc-loading .ttc-story__chapters { z-index: -1; }
html.ttc-loading .ttc-story__stills { opacity: 0; }
html.ttc-loading .ttc-story__canvas { transition: none; }
html.ttc-loading .ttc-story__stage::before { animation: ttc-breathe 2.6s ease-in-out infinite alternate; }
@keyframes ttc-breathe { from { opacity: 0.82; } to { opacity: 1; } }
/* Without the scroll timeline (no JS motion) the wordmark still leaves with its chapter. */
html:not(.ttc-anim) .ttc-story:not([data-chapter-active="hero"]) .ttc-hero__word { opacity: 0; }
.ttc-home .ttc-hero__title { margin: 0 auto; max-width: 22em; font: 500 clamp(2rem, 2.9vw, 2.625rem)/1.12 var(--ttc-display); letter-spacing: -0.005em; color: var(--ttc-cream); text-wrap: balance; }
.ttc-home .ttc-hero__rating { margin-top: 1rem; font: 0.88rem/1.4 var(--ttc-body); font-variant-numeric: lining-nums; color: rgba(var(--ttc-cream-rgb), 0.82); }
.ttc-home .ttc-hero__rating > span { color: var(--ttc-gold); }
.ttc-home .ttc-hero__lede { margin: 0.8rem auto 0; max-width: 58ch; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.75; color: rgba(var(--ttc-cream-rgb), 0.82); }
.ttc-home .ttc-hero__cta { margin-top: 1.7rem; }
.ttc-home .ttc-hero__cta .ttc-actions { justify-content: center; }
.ttc-home .ttc-hero__trust { margin-top: 1.5rem; font: 0.8rem/1.8 var(--ttc-accent); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ttc-gold); }

/* 2. What's in it: a symmetric spec layout. The thekua sits in the centre column at a known screen circle
   (--spec-x/--spec-y/--spec-r match the 3D layout in hero-scene.js); JS draws each callout's leader line to it. */
.ttc-chapter--made .ttc-chapter__pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-content: start; row-gap: clamp(8px, 1.4svh, 18px); padding-top: clamp(84px, 11svh, 108px); --spec-x: 50%; --spec-y: 56%; --spec-r: 13.5svh; }
.ttc-chapter__head { text-align: center; justify-self: center; }
.ttc-home .ttc-chapter__head .ttc-h2 { margin-inline: auto; }
.ttc-home .ttc-chapter--made .ttc-chapter__head .ttc-h2 { max-width: none; margin-bottom: 0.6rem; font-size: clamp(2rem, 3.4vw, 3.1rem); }
.ttc-home .ttc-chapter--made .ttc-chapter__head .ttc-lede { max-width: 64ch; font-size: clamp(0.98rem, 1.3vw, 1.08rem); }
.ttc-home .ttc-chapter__head .ttc-lede { margin-inline: auto; }
.ttc-chapter__head--left { text-align: left; justify-self: start; }

.ttc-spec { position: relative; min-height: 0; }
/* The phone ingredient sequence's wrappers (page-home-v2.php): no boxes of their own anywhere else. */
.ttc-ing__track, .ttc-ing__pin { display: contents; }
.ttc-ing__steps { display: none; }
.ttc-spec__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* Ink, not draughting: each leader is two strokes (a soft wide one under a thin dark one) through a light turbulence
   filter, so it reads as a pen line on paper, and it is drawn on as the chapter enters. */
.ttc-spec__lines path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ttc-spec__lines .ttc-spec__under { stroke: var(--ttc-clay); stroke-width: 2.6; opacity: 0.22; }
.ttc-spec__lines .ttc-spec__ink { stroke: var(--ttc-clay-text); stroke-width: 1.15; opacity: 0.9; }
/* The leaders draw only once the thekua has settled in its place: the chapter takes .is-landed from the story timeline
   (home-v2.js, at the beat hero-scene.js finishes the glide), not from the chapter merely entering. */
.ttc-anim .ttc-spec__lines path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: calc(var(--i, 0) * 110ms); }
.ttc-anim .ttc-chapter.is-in.is-landed .ttc-spec__lines path { stroke-dashoffset: 0; }
html:not(.ttc-anim) .ttc-spec__lines path { stroke-dashoffset: 0; }

.ttc-callouts { display: grid; height: 100%; grid-template-columns: minmax(0, 1fr) clamp(300px, 36vw, 500px) minmax(0, 1fr); grid-template-rows: 1fr 1fr; column-gap: clamp(20px, 3vw, 48px); row-gap: clamp(20px, 4svh, 48px); align-items: start; }
.ttc-callout { position: relative; max-width: 34ch; }
.ttc-callout--1 { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }
.ttc-callout--2 { grid-column: 3; grid-row: 1; justify-self: start; text-align: left; }
.ttc-callout--3 { grid-column: 1; grid-row: 2; justify-self: end; text-align: right; align-self: end; }
.ttc-callout--4 { grid-column: 3; grid-row: 2; justify-self: start; text-align: left; align-self: end; }
.ttc-callout__icon { display: block; width: 34px; height: 34px; color: var(--ttc-clay-text); margin-bottom: 0.5rem; }
.ttc-callout--1 .ttc-callout__icon, .ttc-callout--3 .ttc-callout__icon { margin-left: auto; }
@media (max-width: 1024px) { .ttc-callout .ttc-callout__icon { margin-left: 0; width: 30px; height: 30px; } }
.ttc-callout__icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ttc-anim .ttc-callout__icon svg * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s ease calc(0.2s + var(--i, 0) * 110ms); }
.ttc-anim .ttc-chapter.is-in .ttc-callout__icon svg * { stroke-dashoffset: 0; }
.ttc-home .ttc-callout__title { font-family: var(--ttc-display); font-size: clamp(1.35rem, 1.9vw, 1.8rem); font-weight: 600; line-height: 1.12; color: var(--ttc-deep); margin: 0 0 0.45rem; }
.ttc-home .ttc-callout__body { font-size: 0.92rem; line-height: 1.66; color: var(--ttc-muted); }

.ttc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ttc-line); border-bottom: 1px solid var(--ttc-line); }
.ttc-stat { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: clamp(10px, 1.6svh, 16px) clamp(14px, 2vw, 28px); border-left: 1px solid var(--ttc-line); }
.ttc-stat:first-child { border-left: 0; }
.ttc-home .ttc-stat__num { font-family: var(--ttc-body); font-weight: 500; font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1; color: var(--ttc-deep); font-variant-numeric: tabular-nums lining-nums; min-width: 1.2ch; }
.ttc-home .ttc-stat--word .ttc-stat__num, .ttc-home .ttc-stat__num[data-stat] { font-family: var(--ttc-display); font-size: clamp(1.5rem, 2.3vw, 2.1rem); }
.ttc-home .ttc-stats__note { margin-top: 8px; font: 0.8rem/1.4 var(--ttc-body); color: var(--ttc-muted); }
.ttc-home .ttc-ing__chips { justify-content: center; margin-top: 0.9rem; }
.ttc-home .ttc-callout__state { margin-top: 10px; font: 500 0.8rem/1.3 var(--ttc-accent); letter-spacing: 0.04em; color: var(--ttc-muted); }
.ttc-callout__on { display: none; align-items: center; gap: 6px; color: var(--ttc-clay-text); }
.ttc-callout__on svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ttc-chapter--made[data-variant$="dry-fruits"] .ttc-callout__on { display: inline-flex; }
.ttc-chapter--made[data-variant$="dry-fruits"] .ttc-callout__off { display: none; }
/* A chip swaps the sweetener line in place: it dips out, the text changes, it comes back. */
.ttc-callout--gur .ttc-callout__title, .ttc-callout--gur .ttc-callout__body, .ttc-stat__num[data-stat] { transition: opacity 0.22s ease; }
.ttc-chapter--made.is-swapping :is(.ttc-callout--gur .ttc-callout__title, .ttc-callout--gur .ttc-callout__body, .ttc-stat__num[data-stat]) { opacity: 0; }
.ttc-home .ttc-stat__label { font: 0.78rem/1.35 var(--ttc-accent); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ttc-muted); }

/* 3. The drop: the Mithila story reads on the left, the jar fills in the centre column, the four facts sit on the right
   with Madhubani-style line icons that draw on with the reveal. */
.ttc-chapter--drop .ttc-chapter__pin { grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 380px) minmax(0, 1fr); align-items: center; column-gap: clamp(16px, 2.5vw, 48px); }
.ttc-drop__copy { grid-column: 1; max-width: 40ch; }
.ttc-home .ttc-drop__title { font-size: clamp(1.9rem, 3.2vw, 3rem); max-width: 14ch; margin-bottom: 0.9rem; }
.ttc-home .ttc-drop__body { font-size: clamp(0.96rem, 1.2vw, 1.05rem); line-height: 1.7; max-width: 46ch; }
.ttc-drop__facts { grid-column: 3; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 2svh, 22px); justify-self: start; max-width: 300px; }
.ttc-drop__fact { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; align-items: start; padding-top: 12px; border-top: 1px solid var(--ttc-line); }
.ttc-drop__icon { grid-row: span 2; width: 46px; height: 46px; color: var(--ttc-clay); }
.ttc-drop__icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* The drop chapter's copy is revealed one item at a time by the scroll itself (home-v2.js), in place: no slide, and the
   icons draw on with their fact. Without the animation class everything is simply visible. */
.ttc-anim .ttc-drop__icon svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ttc-anim .ttc-drop__title .ttc-w__in { transform: none; transition: none; }
.ttc-anim .ttc-chapter.is-out [data-step], .ttc-anim .ttc-chapter.is-out .ttc-drop__title { opacity: 0 !important; transition: opacity 0.45s ease; }
.ttc-home .ttc-drop__fact strong { display: block; font-family: var(--ttc-display); font-size: 1.3rem; font-weight: 500; color: var(--ttc-ink); line-height: 1.2; }
.ttc-home .ttc-drop__n { margin-right: 10px; font: 500 0.78rem/1 var(--ttc-accent); letter-spacing: 0.08em; color: var(--ttc-clay-text); vertical-align: 0.2em; font-variant-numeric: lining-nums; }
.ttc-home .ttc-drop__copy .ttc-btn { margin-top: 1.4rem; }
.ttc-drop__fact span:not(.ttc-drop__icon) { font-size: 0.84rem; line-height: 1.55; color: var(--ttc-muted); }
/* Aripan under the jar: laid in perspective at the jar's foot in the stage. One ink at hairline weight, a faint wash in
   the lotus, gold only on the inner dot ring — engraved, not sketched. The scroll draws it (home-v2.js). */
.ttc-story__aripan { position: absolute; left: 50%; top: var(--aripan-y, 84%); width: min(46vw, 660px); transform: translate(-50%, -50%); overflow: visible; --ink: var(--ttc-terracotta); }
/* Ink weights: .o outlines heavy, .i inner work fine, .f solid-inked shapes, dots placed. */
.ttc-story__aripan path { fill: none; stroke: var(--ink); stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; opacity: 0.68; }
.ttc-story__aripan path.o { stroke-width: 1.5; }
.ttc-story__aripan path.i { stroke-width: 0.7; opacity: 0.6; }
.ttc-story__aripan path.f { fill: var(--ink); fill-opacity: 0.6; }
.ttc-story__aripan circle { fill: var(--ink); opacity: 0.68; }
/* The scroll draws each band through two custom properties set by home-v2.js (strokes share pathLength=1). */
.ttc-anim .ttc-story__aripan [data-aripan-step] path { stroke-dasharray: 1; stroke-dashoffset: var(--draw, 0); }
.ttc-anim .ttc-story__aripan [data-aripan-step] path.f { fill-opacity: calc(0.6 * var(--pop, 1)); }
.ttc-anim .ttc-story__aripan [data-aripan-step] circle { transform-box: fill-box; transform-origin: center; transform: scale(var(--pop, 1)); }

/* 6. The range: a deep section outside the story that rides up over the sticky stage (negative top margin, above it in
   z-order) on a gentle sweep with a gold hairline. Abstract ground (aripan-like rings over warm glows), the standard
   heading, then the four sweetener pack cards. */
.ttc-range-sec { position: relative; z-index: 4; margin-top: -60svh; background: var(--ttc-deep); color: var(--ttc-cream); padding-block: clamp(80px, 10vw, 140px) clamp(56px, 6vw, 88px); }
/* The edge: one gentle sweep across the full width, deep over cream, with a gold hairline riding just above it.
   (SVG data URIs cannot read custom properties: the fill is --ttc-deep and the stroke --ttc-gold, by hand.) */
.ttc-range-sec::before { content: ""; position: absolute; left: 0; right: 0; top: calc(1px - clamp(36px, 6vw, 84px)); height: clamp(36px, 6vw, 84px); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V54C360 12 1080 12 1440 54V80Z' fill='%232e1c14'/%3E%3Cpath d='M0 46C360 4 1080 4 1440 46' fill='none' stroke='%23c99a2e' stroke-width='1.5' vector-effect='non-scaling-stroke' opacity='.85'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.ttc-range-sec__head { position: relative; margin-bottom: clamp(32px, 4vw, 56px); }
.ttc-range-sec .ttc-shell { position: relative; }
/* The ground: warm glows low in the section (so the top edge stays the sweep's flat deep) under big cane and gur
   motifs in gold hairline. */
.ttc-range-sec::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 42% at 10% 84%, rgba(var(--ttc-clay-rgb), 0.2), transparent 70%), radial-gradient(50% 42% at 94% 90%, rgba(var(--ttc-gold-rgb), 0.14), transparent 70%); }
.ttc-range-sec__bgwrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ttc-range-sec__bg { position: absolute; inset: -6% 0; width: 100%; height: 112%; fill: none; stroke: var(--ttc-gold); stroke-linecap: round; stroke-linejoin: round; opacity: 0.14; }
/* The packs: four sweetener cards, cream frame round a tinted panel (gur family dark, sugar family light), hand-ink
   ingredient art in the corners and the live jar over it all on one shared canvas (range-scene.js, html.ttc-range3d).
   No hover lift: the jar turning is the hover. "+" opens "Pick a pack" over the panel, one tap adds the variation. */
.ttc-packs { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 16px); }
.ttc-range__canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; display: block; opacity: 0; transition: opacity 0.5s ease; }
html.ttc-range3d .ttc-range__canvas { opacity: 1; }
.ttc-pack { --pack-tint: var(--ttc-tint-jaggery); --pack-ink: rgba(var(--ttc-cream-rgb), 0.55); --pack-ink-rest: rgba(var(--ttc-deep-rgb), 0.2); position: relative; background: var(--ttc-cream); color: var(--ttc-ink); border: 1px solid rgba(var(--ttc-gold-rgb), 0.45); border-radius: 2px; padding: 8px 8px 0; display: flex; flex-direction: column; transition: border-color 0.4s ease; }
.ttc-pack--jaggery-with-dry-fruits { --pack-tint: var(--ttc-tint-jaggery-dry); }
.ttc-pack--sugar { --pack-tint: var(--ttc-tint-sugar); --pack-ink: rgba(var(--ttc-deep-rgb), 0.36); }
.ttc-pack--sugar-with-dry-fruits { --pack-tint: var(--ttc-tint-sugar-dry); --pack-ink: rgba(var(--ttc-deep-rgb), 0.38); }
.ttc-pack:is(:hover, :focus-within), .ttc-pack.is-open { border-color: var(--ttc-gold); }
/* At rest every panel is the same quiet paper with the art in deep; pointing at a card blooms its sweetener's tint and
   the art draws itself again in that family's ink. */
.ttc-pack__media { position: relative; aspect-ratio: 4 / 5; border-radius: 2px; background: var(--ttc-alt); overflow: hidden; cursor: pointer; transition: background-color 0.8s ease; }
.ttc-pack:is(:hover, .is-open, .is-lit) .ttc-pack__media { background: var(--pack-tint); }
.ttc-pack__art { position: absolute; color: var(--pack-ink-rest); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; pointer-events: none; transition: color 0.6s ease, transform 0.8s var(--ttc-ease); }
.ttc-pack__art--a { width: 42%; aspect-ratio: 1; top: -4%; left: -8%; }
.ttc-pack__art--b { width: 32%; aspect-ratio: 1; right: -5%; bottom: -2%; transform: rotate(18deg); }
@keyframes ttc-pack-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ttc-pack:is(:hover, .is-open, .is-lit) .ttc-pack__art { color: var(--pack-ink); animation: ttc-pack-draw 1.1s var(--ttc-ease) both; }
.ttc-pack:is(:hover, .is-open, .is-lit) .ttc-pack__art--a { transform: translate(-1%, -1%) rotate(-3deg) scale(1.08); }
.ttc-pack:is(:hover, .is-open, .is-lit) .ttc-pack__art--b { transform: translate(1%, 1%) rotate(22deg) scale(1.08); animation-delay: 0.2s; }
.ttc-pack__still { position: absolute; left: 50%; top: 50%; width: 82%; height: auto; transform: translate(-50%, -50%); transition: opacity 0.5s ease; pointer-events: none; }
html.ttc-range3d .ttc-pack__still { opacity: 0; }
/* The card body under the jar: name, one-line descriptor, the picked size's rating, size chips, price, Add to cart. */
.ttc-home .ttc-pack__media { display: block; }
/* The body is a column whose last row (price + button) is pushed to the foot, so all four buttons share one line. */
.ttc-pack__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 8px 14px; }
.ttc-home .ttc-pack__name { margin: 0; font: 500 1.7rem/1.1 var(--ttc-display); letter-spacing: 0; color: var(--ttc-ink); }
.ttc-home .ttc-pack__name a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.ttc-home .ttc-pack__name a:hover { color: var(--ttc-clay-text); }
/* Two lines reserved, so one- and two-line descriptors keep the chips on one line across the row. */
.ttc-home .ttc-pack__desc { margin-top: -6px; min-height: 3em; font: 0.92rem/1.5 var(--ttc-body); color: var(--ttc-muted); }
.ttc-home .ttc-pack__rating { min-height: 1.3em; font: 0.84rem/1.3 var(--ttc-body); font-variant-numeric: lining-nums; color: var(--ttc-muted); }
.ttc-home .ttc-pack__rating > span:first-child { color: var(--ttc-clay-text); }
.ttc-home .ttc-pack__rating.is-empty > span:first-child { color: var(--ttc-rule); }
.ttc-pack__buy { display: grid; gap: 12px; margin-top: auto; padding-top: 6px; }
.ttc-home .ttc-pack__price { display: flex; align-items: baseline; gap: 6px; font-family: var(--ttc-body); font-variant-numeric: lining-nums proportional-nums; letter-spacing: -0.01em; white-space: nowrap; }
.ttc-home .ttc-pack__price ins { font-size: 1.3rem; text-decoration: none; background: none; color: var(--ttc-ink); }
.ttc-home .ttc-pack__price del { font-size: 0.86rem; color: rgba(var(--ttc-ink-rgb), 0.5); }
.ttc-home .ttc-pack__add, .ttc-home .ttc-pack__notify { width: 100%; min-height: 48px; padding: 0.8em 1.2em; font-size: 0.92rem; }
.ttc-home .ttc-pack__add { position: relative; overflow: hidden; }
/* Card buttons sit on cream, so their hover deepens the terracotta (the espresso-ground cream flip would vanish here). */
.ttc-home .ttc-pack .ttc-btn--primary:hover { background: var(--ttc-clay-hover); color: var(--ttc-white); }
/* "Adding… / Added" sit over the label, so the label keeps the site-wide letter slide. */
.ttc-pack__add-state { position: absolute; inset: 0; display: grid; place-items: center; background: inherit; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.ttc-pack__add:is(.is-busy, .is-added) .ttc-pack__add-state { opacity: 1; }
.ttc-home .ttc-pack__add.is-busy { pointer-events: none; }
/* The rare add-to-cart error (Adding… / Added show inside the button) hangs just below the card, on the espresso
   ground, so it never changes the card's size. It stays in the layout (empty) so screen readers announce it. */
.ttc-home .ttc-pack__state { position: absolute; left: 0; right: 0; top: calc(100% + 10px); margin: 0; text-align: center; font: 500 0.82rem/1.3 var(--ttc-accent); letter-spacing: 0.02em; color: var(--ttc-error-light); pointer-events: none; }
/* Under the grid: the four facts every order shares, on a rule. */
.ttc-home .ttc-trust { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px 32px; margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--ttc-rule-dark); }
.ttc-home .ttc-trust__k { display: block; margin-bottom: 8px; font: 600 0.78rem/1 var(--ttc-accent); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ttc-gold); }
.ttc-home .ttc-trust__v { font: 0.92rem/1.5 var(--ttc-body); color: rgba(var(--ttc-cream-rgb), 0.82); }

/* The size picker: four boxes in a row on a small gap; the picked one fills deep terracotta. Arrow keys move along. */
.ttc-seg { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 6px; }
.ttc-home .ttc-seg__opt { display: grid; place-items: center; gap: 2px; min-height: 44px; margin: 0; padding: 6px 2px; border: 1px solid var(--ttc-rule); border-radius: 2px; background: var(--ttc-paper); box-shadow: none; color: var(--ttc-ink); text-transform: none; letter-spacing: 0; cursor: pointer; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
.ttc-home .ttc-seg__opt:hover, .ttc-home .ttc-seg__opt:focus { background: var(--ttc-paper); border-color: var(--ttc-clay); color: var(--ttc-clay-text); box-shadow: none; }
.ttc-home .ttc-seg__opt[aria-checked="true"], .ttc-home .ttc-seg__opt[aria-checked="true"]:hover { background: var(--ttc-pick); border-color: var(--ttc-pick); color: var(--ttc-white); }
.ttc-home .ttc-seg__opt:focus-visible { outline: 2px solid var(--ttc-clay); outline-offset: 2px; }
.ttc-home .ttc-seg__size { font: 600 0.92rem/1.1 var(--ttc-body); font-variant-numeric: lining-nums; }
.ttc-home .ttc-seg__price { font: 0.66rem/1.1 var(--ttc-accent); letter-spacing: 0.04em; opacity: 0.8; }
.ttc-home .ttc-seg__opt[data-stock="0"] .ttc-seg__size { text-decoration: line-through; opacity: 0.55; }
.ttc-home .ttc-pack__add { gap: 10px; }
.ttc-pack__cart-ico { width: 18px; height: 18px; margin: 0 !important; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ttc-home .ttc-btn:hover .ttc-pack__cart-ico { transform: none; }

/* ---------- Shared: section heads, text links, chips ---------- */

.ttc-sec__head { position: relative; margin-bottom: clamp(32px, 4vw, 56px); }
.ttc-sec__head--row { display: flex; justify-content: space-between; align-items: end; gap: 24px 48px; }
.ttc-sec__head--split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 16px clamp(32px, 5vw, 80px); align-items: end; }
.ttc-home .ttc-sec__head .ttc-h2 { margin-bottom: 0; }
.ttc-home .ttc-sec__head .ttc-lede { margin-top: 1rem; }
.ttc-home .ttc-sec__head--split .ttc-lede { margin-top: 0; }
.ttc-home .ttc-h2--wide { max-width: 24ch; }
.ttc-home .ttc-lede--light, .ttc-home .ttc-body--light { color: rgba(var(--ttc-cream-rgb), 0.8); }
.ttc-home .ttc-link { display: inline-flex; align-items: center; gap: 8px; padding: 12px 0 4px; font: 500 0.92rem/1 var(--ttc-accent); color: var(--ttc-clay-text); text-decoration: none; white-space: nowrap; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: color 0.2s ease; }
.ttc-home .ttc-link:hover { color: var(--ttc-ink); }
.ttc-home .ttc-link--light { color: var(--ttc-gold); }
.ttc-home .ttc-link--light:hover { color: var(--ttc-cream); }
.ttc-home .ttc-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ttc-ease); }
.ttc-home .ttc-link:hover svg { transform: translateX(4px); }

/* Chips: a radiogroup of small square options (the variant on S2, the jar size on the cards). */
.ttc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ttc-home .ttc-chip { min-height: 44px; margin: 0; padding: 0 16px; border: 1px solid var(--ttc-rule); border-radius: 2px; background: transparent; box-shadow: none; color: var(--ttc-ink); font: 500 0.78rem/1 var(--ttc-accent); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.ttc-home .ttc-chip:hover, .ttc-home .ttc-chip:focus { background: transparent; border-color: var(--ttc-clay); color: var(--ttc-clay-text); box-shadow: none; }
.ttc-home .ttc-chip[aria-checked="true"], .ttc-home .ttc-chip[aria-checked="true"]:hover { background: var(--ttc-ink); border-color: var(--ttc-ink); color: var(--ttc-cream); }
.ttc-home .ttc-chip:focus-visible { outline: 2px solid var(--ttc-clay); outline-offset: 2px; }
/* Size chips carry their pack colour as a strip along the foot. */
.ttc-home .ttc-chip--size { --sz: transparent; min-width: 52px; padding: 0 10px; font: 500 0.86rem/1 var(--ttc-body); letter-spacing: 0; text-transform: none; font-variant-numeric: lining-nums; box-shadow: inset 0 -3px 0 var(--sz); }
.ttc-home .ttc-chip--size:hover, .ttc-home .ttc-chip--size:focus, .ttc-home .ttc-chip--size[aria-checked="true"] { box-shadow: inset 0 -3px 0 var(--sz); }
.ttc-chip--size[data-size="250g"] { --sz: var(--ttc-size-250g); }
.ttc-chip--size[data-size="500g"] { --sz: var(--ttc-size-500g); }
.ttc-chip--size[data-size="1kg"] { --sz: var(--ttc-size-1kg); }
.ttc-chip--size[data-size="2kg"] { --sz: var(--ttc-size-2kg); }
.ttc-home .ttc-chip--size[data-stock="0"] { color: rgba(var(--ttc-ink-rgb), 0.45); text-decoration: line-through; }

/* ---------- S5. Your Tuesday meetha: tabs ---------- */

.ttc-meetha { background: var(--ttc-cream); }
.ttc-meetha__grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: stretch; overflow: hidden; border: 1px solid rgba(var(--ttc-rule-rgb), 0.55); border-radius: 2px; background: var(--ttc-alt); box-shadow: 0 30px 60px -44px rgba(var(--ttc-shadow-rgb), 0.45); }
/* The photo sits flush in the panel and takes the panel's height (no tall empty column beside it). */
.ttc-meetha__media { position: relative; margin: 0; min-height: 460px; overflow: hidden; background: var(--ttc-deep); }
.ttc-meetha__img { position: absolute; inset: 0; width: 100%; height: 100% !important; max-width: none; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 0.35s ease, transform 0.9s var(--ttc-ease); }
.ttc-meetha__img.is-active { opacity: 1; transform: none; }
.ttc-home .ttc-meetha__tag { position: absolute; left: 16px; bottom: 16px; padding: 9px 12px; border-radius: 2px; background: var(--ttc-ink); color: var(--ttc-cream); font: 500 0.78rem/1 var(--ttc-accent); letter-spacing: 0.04em; }
.ttc-meetha__side { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 4vw, 56px); overflow: hidden; }
.ttc-meetha__tabs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 24px; border-bottom: 1px solid var(--ttc-line); }
.ttc-home .ttc-meetha__tab { min-height: 44px; margin: 0; padding: 0 18px; border: 1px solid var(--ttc-line); border-radius: 2px; background: var(--ttc-cream); box-shadow: none; color: var(--ttc-ink); font: 500 0.8rem/1 var(--ttc-accent); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.ttc-home .ttc-meetha__tab:hover, .ttc-home .ttc-meetha__tab:focus { background: var(--ttc-cream); border-color: var(--ttc-clay); color: var(--ttc-clay-text); box-shadow: none; }
.ttc-home .ttc-meetha__tab[aria-selected="true"], .ttc-home .ttc-meetha__tab[aria-selected="true"]:hover { background: var(--ttc-ink); border-color: var(--ttc-ink); color: var(--ttc-cream); }
.ttc-home .ttc-meetha__tab:focus-visible, .ttc-meetha__panel:focus-visible { outline: 2px solid var(--ttc-clay); outline-offset: 3px; }
.ttc-meetha__panel { padding-top: 28px; animation: ttc-fade 0.3s ease both; }
.ttc-meetha__panel > :not(.ttc-meetha__num) { position: relative; z-index: 1; }
@keyframes ttc-fade { from { opacity: 0; } to { opacity: 1; } }
/* The occasion number, set huge in outline behind the copy; it changes with the tab. */
.ttc-home .ttc-meetha__num { position: absolute; right: clamp(20px, 3vw, 44px); top: clamp(4px, 1vw, 16px); z-index: 0; font: 600 clamp(120px, 12vw, 190px)/1 var(--ttc-display); letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px rgba(var(--ttc-clay-rgb), 0.28); pointer-events: none; user-select: none; font-variant-numeric: lining-nums; }
.ttc-home .ttc-meetha__when { margin-bottom: 10px; font: 600 0.78rem/1 var(--ttc-accent); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ttc-clay-text); }
.ttc-home .ttc-meetha__title { margin: 0 0 14px; font: 500 clamp(2rem, 3.2vw, 2.875rem)/1.1 var(--ttc-display); color: var(--ttc-ink); }
.ttc-home .ttc-meetha__body { margin: 0 0 28px; min-height: 5.1em; max-width: 44ch; font-size: 1.08rem; line-height: 1.7; color: var(--ttc-muted); }
/* The jar it suggests, with its live price, beside the button: the CTA says what it costs. */
.ttc-meetha__pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; max-width: 560px; padding-top: 22px; border-top: 1px solid var(--ttc-line); }
.ttc-home .ttc-meetha__jar { display: grid; gap: 6px; }
.ttc-home .ttc-meetha__jar-k { font: 500 0.78rem/1 var(--ttc-accent); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ttc-muted); }
.ttc-home .ttc-meetha__jar-v { display: inline-flex; align-items: baseline; gap: 10px; font: 500 1.4rem/1.1 var(--ttc-display); color: var(--ttc-ink); }
.ttc-home .ttc-meetha__jar-v b { font: 500 1.1rem/1 var(--ttc-body); font-variant-numeric: lining-nums tabular-nums; color: var(--ttc-ink); }

/* ---------- S6. Texture and order to doorstep ---------- */

.ttc-texture { color: var(--ttc-cream); background: radial-gradient(55% 42% at 6% 8%, rgba(var(--ttc-clay-rgb), 0.18), transparent 70%), var(--ttc-deep); }
.ttc-texture__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.ttc-texture__media { position: relative; margin: 0; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 2px; box-shadow: 0 34px 60px -36px rgba(var(--ttc-shadow-rgb), 0.8); }
.ttc-texture__media img { width: 100%; height: 100% !important; max-width: none; object-fit: cover; }
.ttc-home .ttc-texture__copy .ttc-h2 { max-width: 14ch; margin-inline: 0; }
.ttc-home .ttc-texture__copy .ttc-body { max-width: 46ch; }
.ttc-texture__steps { margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--ttc-rule-dark); }
.ttc-home .ttc-steps { --p: 0; --gap: 32px; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--gap); margin-top: 20px; }
/* One track from the first mark's centre to the last; the gold fill grows along it with the scroll (--p, 0 → 1, set by
   home-v2.js), reaching each mark as that step turns active. */
.ttc-steps::before, .ttc-steps::after { content: ""; position: absolute; top: 22px; left: 22px; right: calc((100% - 3 * var(--gap)) / 4 - 22px); height: 1px; background: var(--ttc-rule-dark); pointer-events: none; }
.ttc-steps::after { height: 2px; margin-top: -0.5px; background: var(--ttc-gold); transform: scaleX(var(--p)); transform-origin: left; transition: transform 0.15s linear; }
.ttc-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.ttc-step__n { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 22px; border: 1px solid rgba(var(--ttc-gold-rgb), 0.45); border-radius: 50%; background: var(--ttc-deep); color: rgba(var(--ttc-cream-rgb), 0.6); font: 500 0.92rem/1 var(--ttc-accent); font-variant-numeric: lining-nums; transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s var(--ttc-ease); }
.ttc-step.is-active .ttc-step__n { border-color: var(--ttc-gold); background: var(--ttc-gold); color: var(--ttc-deep); }
.ttc-step.is-current .ttc-step__n { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(var(--ttc-gold-rgb), 0.16); }
.ttc-home .ttc-step__title { margin: 0 0 6px; font: 500 1.5rem/1.15 var(--ttc-display); color: var(--ttc-cream); }
.ttc-home .ttc-step__body { max-width: 26ch; font: 0.98rem/1.6 var(--ttc-body); color: rgba(var(--ttc-cream-rgb), 0.78); }
/* Steps not reached yet sit back; the reached ones come up to full strength. */
.ttc-step__title, .ttc-step__body { transition: opacity 0.35s ease; }
.ttc-step:not(.is-active) :is(.ttc-step__title, .ttc-step__body) { opacity: 0.4; }
/* Without the script every step reads as reached. */
html:not(.ttc-js) .ttc-step .ttc-step__n { border-color: var(--ttc-gold); background: var(--ttc-gold); color: var(--ttc-deep); }
html:not(.ttc-js) .ttc-step :is(.ttc-step__title, .ttc-step__body) { opacity: 1; }
html:not(.ttc-js) .ttc-steps::after { transform: none; }
@media (max-width: 1024px) {
  /* S6 on phones (audit): one column, every step showing, the marks on a vertical line; the last is gold. */
  .ttc-home .ttc-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 18px; }
  .ttc-steps::before, .ttc-steps::after { display: none; }
  .ttc-step { grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; }
  .ttc-step__n { grid-row: span 2; margin: 0; }
  .ttc-step:not(:last-child)::before { content: ""; position: absolute; left: 22px; top: 44px; bottom: -28px; width: 1px; background: var(--ttc-rule-dark); }
  .ttc-home .ttc-step__title { margin: 8px 0 4px; font-size: 1.45rem; }
  .ttc-home .ttc-step__body { max-width: none; }
  .ttc-step .ttc-step__n { border-color: var(--ttc-gold); background: var(--ttc-deep); color: var(--ttc-gold); }
  .ttc-step--last .ttc-step__n { background: var(--ttc-gold); color: var(--ttc-deep); }
  .ttc-step :is(.ttc-step__title, .ttc-step__body) { opacity: 1 !important; }
  /* copy first, then the photo, then the steps */
  .ttc-texture__copy { order: -1; }
}

/* The pin: with JS and motion, the section holds on screen while the scroll walks the steps (home-v2.js reads the progress
   from the stage). Desktop only: on phones the section reads as a plain column (audit, mobile frame). */
@media (min-width: 1025px) { html.ttc-js .ttc-texture { padding-block: 0; } }
@media (min-width: 1025px) and (min-height: 700px) {
  html.ttc-js .ttc-texture__stage { height: calc(100svh + 140svh); }
  html.ttc-js .ttc-texture__pin { position: sticky; top: var(--ttc-header-h, 72px); display: flex; flex-direction: column; justify-content: center; height: calc(100svh - var(--ttc-header-h, 72px)); }
}
@media (min-width: 1025px) and (max-height: 699px) { html.ttc-js .ttc-texture { padding-block: clamp(64px, 9vw, 120px); } }
@media (prefers-reduced-motion: reduce) {
  html.ttc-js .ttc-texture { padding-block: clamp(64px, 9vw, 120px); }
  html.ttc-js .ttc-texture__stage, html.ttc-js .ttc-texture__track { height: auto !important; }
  html.ttc-js .ttc-texture__pin, html.ttc-js .ttc-texture__steps { position: static !important; height: auto !important; }
}

/* Phone-only pieces of the static story (the stills and the closing link); desktop has the 3D. */
/* (.ttc-home img is display:block at 0,1,1, so these need the .ttc-home prefix too) */
.ttc-home .ttc-ing__still, .ttc-home .ttc-drop__jar, .ttc-home .ttc-drop__more, .ttc-drop__jarbox { display: none; }

/* The sticky add-to-cart bar (phones, after the hero): the first jar one tap from the cart. */
.ttc-home .ttc-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8000; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: var(--ttc-deep); border-top: 1px solid var(--ttc-rule-dark); box-shadow: 0 -10px 24px -16px rgba(var(--ttc-shadow-rgb), 0.6); transform: translateY(110%); transition: transform 0.35s var(--ttc-ease); }
.ttc-home .ttc-sticky.is-on { transform: none; }
.ttc-home .ttc-sticky__label { font: 500 0.9rem/1.3 var(--ttc-accent); color: var(--ttc-cream); }
.ttc-home .ttc-sticky__label b { margin-left: 6px; font: 500 1rem/1 var(--ttc-body); color: var(--ttc-gold); font-variant-numeric: lining-nums; }
.ttc-home .ttc-sticky__add { min-height: 44px; padding: 0.6em 1.4em; font-size: 0.88rem; }
.ttc-home .ttc-sticky__add.is-busy { pointer-events: none; opacity: 0.8; }
/* the floating WhatsApp / chat buttons step up while the bar is showing */
html.ttc-sticky-on .wa-float, html.ttc-sticky-on #chat-widget { transform: translateY(-68px); transition: transform 0.35s var(--ttc-ease); }

/* ---------- S7. Reviews: the wall ---------- */

.ttc-reviews { background: var(--ttc-alt); overflow: hidden; }
.ttc-reviews__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.ttc-home .ttc-reviews__avg { font: 1rem/1.5 var(--ttc-body); color: var(--ttc-muted); font-variant-numeric: lining-nums; white-space: nowrap; }
.ttc-reviews__avg > span:first-child { color: var(--ttc-clay-text); }
/* A card: stars, the review as written, then the reviewer with an initial in place of a photo. */
.ttc-review { display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid rgba(var(--ttc-rule-rgb), 0.45); border-radius: 2px; background: var(--ttc-cream); box-shadow: 0 8px 20px -18px rgba(var(--ttc-shadow-rgb), 0.28); transition: transform 0.35s var(--ttc-ease), box-shadow 0.35s ease, border-color 0.35s ease; }
.ttc-review:hover { transform: translateY(-3px); border-color: rgba(var(--ttc-clay-rgb), 0.4); box-shadow: 0 12px 26px -18px rgba(var(--ttc-shadow-rgb), 0.34); }
.ttc-home .ttc-review__stars { font-size: 1rem; letter-spacing: 0.12em; color: var(--ttc-clay-text); }
.ttc-home .ttc-review__text { margin: 0; padding: 0; border: 0; font: 400 1.05rem/1.65 var(--ttc-body); font-style: normal; color: var(--ttc-ink); }
.ttc-home .ttc-review__text p + p { margin-top: 0.8em; }
.ttc-review__by { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(var(--ttc-rule-rgb), 0.5); }
.ttc-home .ttc-review__initial { flex: 0 0 40px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ttc-clay); color: var(--ttc-white); font: 500 1.15rem/1 var(--ttc-display); }
.ttc-review__who { display: grid; gap: 2px; min-width: 0; }
.ttc-home .ttc-review__who cite { font: 600 0.92rem/1.3 var(--ttc-accent); font-style: normal; color: var(--ttc-ink); }
.ttc-home .ttc-review__who span { font: 0.82rem/1.3 var(--ttc-body); color: var(--ttc-muted); }

/* Static (no JS, reduced motion): the plain list as a masonry of columns. */
.ttc-reviews__list { columns: 3 300px; column-gap: 16px; }
.ttc-reviews__list .ttc-review { break-inside: avoid; margin-bottom: 16px; }
.ttc-reviews__cols { display: none; }
/* Moving: the list stays for screen readers and search (visually hidden); copies drift up in columns at slightly
   different speeds, faded out at the top and bottom edges. Each track holds its cards twice and moves exactly half its
   height, so the loop is seamless. */
.ttc-reviews__wall.is-moving .ttc-reviews__list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ttc-reviews__wall.is-moving .ttc-reviews__cols { display: flex; gap: 16px; cursor: grab; touch-action: pan-y; user-select: none; max-height: 720px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, var(--ttc-ink) 12%, var(--ttc-ink) 88%, transparent); mask-image: linear-gradient(to bottom, transparent, var(--ttc-ink) 12%, var(--ttc-ink) 88%, transparent); }
.ttc-reviews__col { flex: 1; min-width: 0; }
/* In the moving wall a card shows at most 8 lines, so one long review can't fill a column; the full text is in the list. */
.ttc-reviews__cols .ttc-review__text { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.ttc-reviews__cols .ttc-review__text p { display: inline; }
.ttc-reviews__cols .ttc-review__text p + p::before { content: " "; }
.ttc-reviews__wall.is-dragging .ttc-reviews__cols { cursor: grabbing; }
/* The column in hand reads as lifted: its cards sharpen while the others stay as they are. */
.ttc-reviews__col.is-dragging .ttc-review { border-color: rgba(var(--ttc-clay-rgb), 0.35); }
/* The tracks are moved by home-v2.js (time, page scroll and drag all add to one offset, wrapped at half the height). */
.ttc-reviews__track { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; will-change: transform; }
.ttc-reviews__col:nth-child(2) { padding-top: 56px; }
/* Read more / Read less on long cards in the wall (every copy of that review opens together, so the loop stays even). */
.ttc-reviews__cols .ttc-review.is-open .ttc-review__text { display: block; -webkit-line-clamp: unset; overflow: visible; }
.ttc-reviews__cols .ttc-review.is-open .ttc-review__text p { display: block; }
.ttc-reviews__cols .ttc-review.is-open .ttc-review__text p + p::before { content: none; }
.ttc-home .ttc-review__more, .ttc-home .ttc-review__more:hover, .ttc-home .ttc-review__more:focus { align-self: start; margin: -6px 0 0; padding: 4px 0; min-height: 0; border: 0; background: none; box-shadow: none; color: var(--ttc-clay-text); font: 500 0.84rem/1.2 var(--ttc-accent); letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- S8. Who makes it ---------- */

.ttc-makers { background: var(--ttc-cream); }
.ttc-makers__inner { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: clamp(40px, 7vw, 90px); align-items: center; }
.ttc-makers__media { margin: 0; aspect-ratio: 6 / 5; overflow: hidden; border-radius: 2px; background: var(--ttc-alt); }
.ttc-makers__media img { width: 100%; height: 100% !important; max-width: none; object-fit: cover; }
.ttc-home .ttc-makers__copy .ttc-body { margin-bottom: 28px; }
.ttc-home .ttc-makers .ttc-actions { gap: 16px 28px; }

/* ---------- S9. Questions ---------- */

.ttc-faq { background: var(--ttc-alt); }
.ttc-faq__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
/* The product page's FAQ, matched: an eyebrow, "Still / Wondering?", a line of intro, then the questions on hairlines. */
.ttc-faq__head { position: sticky; top: calc(var(--ttc-header-h, 72px) + 32px); }
.ttc-home .ttc-faq__eyebrow { margin-bottom: 18px; font: 500 0.875rem/1.1 var(--ttc-accent); text-transform: uppercase; color: var(--ttc-clay-text); }
.ttc-home .ttc-faq__title { margin-bottom: 28px; font-size: clamp(2.6rem, 4.2vw, 3.5rem); line-height: 1.2; }
.ttc-home .ttc-faq__intro { max-width: 34ch; font: 1.125rem/1.55 var(--ttc-body); color: var(--ttc-ink); }
.ttc-home .ttc-faq__intro a { color: var(--ttc-clay-text); text-decoration: underline; text-underline-offset: 3px; }
.ttc-faq__item { border-top: 1px solid var(--ttc-rule); }
.ttc-faq__item:last-child { border-bottom: 1px solid var(--ttc-rule); }
.ttc-home .ttc-faq__q { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 44px; padding: 20px; list-style: none; cursor: pointer; }
.ttc-faq__q::-webkit-details-marker { display: none; }
.ttc-home .ttc-faq__qt { font: 400 1.25rem/1.3 var(--ttc-body); color: var(--ttc-ink); transition: color 0.2s ease; }
.ttc-faq__chev { flex: 0 0 15px; width: 15px; height: 15px; fill: currentColor; color: var(--ttc-ink); transition: transform 0.35s var(--ttc-ease), color 0.2s ease; }
.ttc-home .ttc-faq__q:hover .ttc-faq__qt, .ttc-faq__item[open] .ttc-faq__qt, .ttc-faq__q:hover .ttc-faq__chev, .ttc-faq__item[open] .ttc-faq__chev { color: var(--ttc-clay-text); }
.ttc-faq__item[open] .ttc-faq__chev { transform: rotate(180deg); }
.ttc-home .ttc-faq__q:focus-visible { outline: 2px solid var(--ttc-clay); outline-offset: -2px; border-radius: 2px; }
/* The answer: home-v2.js animates the body's height; the text fades and settles a beat behind it. */
.ttc-faq__body { overflow: hidden; }
.ttc-home .ttc-faq__a { padding: 0 30px 20px 20px; font: 1.125rem/1.55 var(--ttc-body); color: var(--ttc-ink); transition: opacity 0.35s ease 0.08s, transform 0.45s var(--ttc-ease) 0.08s; }
.ttc-faq__item.is-closing .ttc-faq__a, .ttc-faq__item.is-opening .ttc-faq__a { opacity: 0; transform: translateY(-6px); transition-delay: 0s; }

/* The phone rule that centres the story chapters' headings must not reach the left-aligned sections below them. */
.ttc-home .ttc-sec .ttc-h2 { margin-inline: 0; }

/* ---------- S10. Journal ---------- */

.ttc-journal { background: var(--ttc-cream); }
.ttc-journal__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(240px, 21vw, 300px)); gap: 16px; }
/* Every post is a photo tile with its words on a warm fade at the foot, so the five line up on one fixed grid: the newest
   takes a 2x2 block on the left, the other four fill equal tiles. Titles are clamped so no tile can grow. */
.ttc-post { min-width: 0; }
.ttc-home .ttc-post__link { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; overflow: hidden; border-radius: 2px; background: var(--ttc-deep); color: var(--ttc-cream); text-decoration: none; isolation: isolate; }
.ttc-home .ttc-post__link:focus-visible { outline: 2px solid var(--ttc-clay); outline-offset: 4px; }
.ttc-post__media { position: absolute; inset: 0; z-index: -1; display: block; }
.ttc-post__media img { width: 100%; height: 100% !important; max-width: none; object-fit: cover; transition: transform 1.2s var(--ttc-ease); }
.ttc-post__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--ttc-deep-dark-rgb), 0.92) 0%, rgba(var(--ttc-deep-dark-rgb), 0.6) 42%, rgba(var(--ttc-deep-dark-rgb), 0) 72%); transition: opacity 0.4s ease; }
.ttc-post__link:hover .ttc-post__media img { transform: scale(1.05); }
.ttc-post__text { display: grid; gap: 6px; padding: 18px 20px; }
.ttc-home .ttc-post__cat { font: 600 0.72rem/1 var(--ttc-accent); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ttc-gold); }
.ttc-home .ttc-post__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: 500 1.25rem/1.2 var(--ttc-display); color: var(--ttc-cream); text-wrap: balance; }
.ttc-home .ttc-post__by { font: 0.8rem/1.4 var(--ttc-body); font-variant-numeric: lining-nums; color: rgba(var(--ttc-cream-rgb), 0.75); }
.ttc-post:not(.ttc-post--lead) .ttc-post__author, .ttc-post:not(.ttc-post--lead) .ttc-post__mins { display: none; }
/* The lead: the bigger type, two lines of excerpt and the full byline. */
.ttc-post--lead { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.ttc-post--lead .ttc-post__text { gap: 12px; padding: clamp(24px, 3vw, 40px); }
.ttc-home .ttc-post--lead .ttc-post__title { -webkit-line-clamp: 3; max-width: 20ch; font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1.12; }
.ttc-home .ttc-post__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 52ch; font: 1rem/1.6 var(--ttc-body); color: rgba(var(--ttc-cream-rgb), 0.85); }

/* ---------- Motion opt-in for the lower sections ---------- */

.ttc-anim [data-anim] { opacity: 0; }
.ttc-anim [data-anim="up"] { transform: translateY(26px); }

/* CSS smooth scrolling makes programmatic scrolls asynchronous, which breaks ScrollTrigger's measurements (it scrolls to 0
   to measure, then back): a page refreshed part-way down ends up with every trigger offset by the restored scroll.
   Lenis provides the smoothing on this page instead. */
html { scroll-behavior: auto !important; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  /* Phones and tablets (audit, mobile frame): no 3D and no pinning (hero-3d.js keeps the scene off at this width).
     The story becomes plain sections: the hero over its static poster, the ingredients as a stacked list under a still of
     the thekua, how it is made around a still of the sealed jar. */
  .ttc-story { background: none; }
  /* The hero is at least 784px tall on phones so the wordmark, the thekua and the copy never meet on a short screen; on
     most phones that is exactly one screen. --k-top is the wordmark's top, --k-f its size, --k-h the thekua's height (it
     grows with the screen, smaller on short ones). */
  .ttc-story { --k-top: calc(var(--ttc-bar-h, 0px) + 128px); --k-f: clamp(56px, 22.5vw, 120px); --k-h: clamp(88px, calc(max(784px, 100svh) - 694px), 210px); }
  .ttc-story__stage { position: absolute; top: 0; left: 0; right: 0; height: max(784px, 100svh); }
  .ttc-chapter--hero, .ttc-chapter--hero .ttc-chapter__pin { min-height: 784px; }
  .ttc-story__canvas, .ttc-story__spot, .ttc-story__aripan, .ttc-story__word { display: none !important; }
  .ttc-story .ttc-story__stills { display: none !important; } /* the hero's thekua is .ttc-hero__thekua here */
  .ttc-story__still:not([data-still="hero"]) { display: none; }
  .ttc-story__still[data-still="hero"] { opacity: 1; }
  .ttc-story__stage::before, .ttc-story__stage::after { opacity: 1 !important; }
  .ttc-story__chapters { margin-top: 0; pointer-events: auto; }
  .ttc-chapter { pointer-events: auto; }
  .ttc-chapter--made, .ttc-chapter--drop { height: auto !important; }
  .ttc-chapter--word { display: none; }
  .ttc-chapter:not(.ttc-chapter--hero) .ttc-chapter__pin { position: static; display: block; height: auto; min-height: 0; padding: 64px max(20px, env(safe-area-inset-left)) 72px; text-align: left; }
  .ttc-chapter--made { background: var(--ttc-alt); }
  .ttc-chapter--drop { background: linear-gradient(180deg, var(--ttc-cream), var(--ttc-alt)); }
  /* Everything in these chapters simply shows: their scroll reveals belong to the pinned desktop story. */
  .ttc-anim .ttc-chapter:not(.ttc-chapter--hero) :is([data-reveal], [data-step], .ttc-chapter__head, .ttc-drop__copy, .ttc-w__in) { opacity: 1 !important; transform: none !important; }
  .ttc-anim .ttc-chapter:not(.ttc-chapter--hero) .ttc-chapter__pin { opacity: 1 !important; transform: none !important; }
  .ttc-anim .ttc-chapter:not(.ttc-chapter--hero) svg * { stroke-dashoffset: 0 !important; }

  /* Phones: no scroll-driven text motion. Section copy is simply there (no fade/rise), split headings do not slide in,
     and the doorstep steps do not fade up. */
  .ttc-anim [data-anim] { opacity: 1 !important; transform: none !important; }
  .ttc-anim .ttc-w__in { transform: none !important; transition: none !important; }
  .ttc-anim .ttc-step { opacity: 1 !important; transform: none !important; }
  /* The hero arrives by a rise alone, never a fade: the wordmark (the LCP) and the copy are painted at first paint, so a
     main thread held by the tracking scripts cannot push the LCP back to the end of a fade (PageSpeed: 5s). */
  .ttc-anim .ttc-hero__letter { opacity: 1; animation-name: ttc-lift; }
  .ttc-anim .ttc-chapter--hero [data-reveal] { animation-name: ttc-lift-copy; }
  .ttc-chapter--hero [data-reveal], .ttc-home .ttc-hero__word { translate: 0 var(--hy, 0px); } /* the scroll exit's lift (home-v2.js) */
  /* Not the desktop chapter-out fade, which took the whole hero at once: here each line leaves on its own (above). */
  .ttc-anim .ttc-chapter--hero.is-out [data-reveal] { opacity: 1; transition: none; }
  /* Order to doorstep (home-v2.js marks the list live): each mark fills gold as it reaches the upper third of the screen,
     and the line to the next one fills behind it. Without JS every mark stays lit. */
  .ttc-steps.is-live .ttc-step .ttc-step__n { background: var(--ttc-deep); color: var(--ttc-gold); transition: background-color 0.4s ease, color 0.4s ease, transform 0.4s var(--ttc-ease); }
  .ttc-steps.is-live .ttc-step.is-active .ttc-step__n { background: var(--ttc-gold); color: var(--ttc-deep); transform: scale(1.06); }
  .ttc-steps.is-live .ttc-step:not(:last-child)::after { content: ""; position: absolute; left: 22px; top: 44px; bottom: -28px; width: 1px; background: var(--ttc-gold); transform: scaleY(0); transform-origin: top; transition: transform 0.6s var(--ttc-ease); }
  .ttc-steps.is-live .ttc-step:has(+ .ttc-step.is-active)::after { transform: scaleY(1); }
  /* Floating WhatsApp and chat wait until the hero has gone (home-v2.js), so they never cover its buttons. */
  :is(.wa-float, #chat-widget) { transition: opacity 0.3s ease, visibility 0s linear 0s; }
  html:is(.ttc-floats-off, .ttc-floats-quiet) :is(.wa-float, #chat-widget) { opacity: 0 !important; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }

  /* S1. Hero: the wordmark over the still thekua, the copy at the foot. */
  .ttc-chapter--hero .ttc-chapter__pin { grid-template-columns: minmax(0, 1fr); align-items: end; padding: calc(var(--ttc-bar-h, 0px) + 74px) max(20px, env(safe-area-inset-left)) 40px; } /* header (bar + 60px) and a gap */
  .ttc-hero__copy { max-width: 400px; margin-inline: auto; }
  /* S1. Hero: the wordmark on top, the thekua under it, the copy at the foot. The thekua is the story's child, not the
     stage's, and sits over the chapters: home-v2.js carries it down to the ingredients chapter's thekua as the page scrolls. */
  .ttc-home .ttc-hero__thekua { position: absolute; left: 50%; top: calc(var(--k-top) + var(--k-f) + 6px); z-index: 2; display: block; width: calc(var(--k-h) * 0.795); height: var(--k-h); margin-left: calc(var(--k-h) * -0.3975); filter: drop-shadow(0 18px 22px rgba(var(--ttc-shadow-rgb), 0.55)); pointer-events: none; }
  .ttc-hero__thekua img { display: block; width: 100%; height: 100%; }
  .ttc-home .ttc-hero__word { font-size: var(--k-f); top: calc(var(--k-top) + 0.5em); letter-spacing: -0.02em; }
  /* While the hero's thekua is carried (html.ttc-k-fly), the ingredients chapter's own still waits for it to land. */
  .ttc-k-fly .ttc-story:not(.is-k-landed) .ttc-ing__still { visibility: hidden; }
  .ttc-k-fly .ttc-story.is-k-landed .ttc-hero__thekua { visibility: hidden; }
  /* On landing the chapter's thekua gives a little: it starts exactly where the flight ended, so only the settle shows. */
  .ttc-k-fly .ttc-story.is-k-landed .ttc-ing__still { animation: ttc-k-settle 0.5s var(--ttc-ease); }
  /* The arrival (html.ttc-arrive, first view of a session): the thekua drops in turning and lands with a small give, the
     way the 3D one flies in on desktop; then the wordmark and the copy rise into place. The wordmark is painted from the
     first frame (it is the LCP), only lowered until its turn. */
  .ttc-arrive .ttc-hero__thekua { animation: ttc-k-drop 1.15s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .ttc-arrive.ttc-anim .ttc-hero__letter { animation-delay: calc(0.7s + var(--i, 0) * 70ms); animation-fill-mode: both; }
  .ttc-arrive.ttc-anim .ttc-chapter--hero [data-reveal] { animation-delay: calc(0.95s + var(--i, 0) * 60ms); }
  .ttc-arrive .ttc-hdr { animation: ttc-k-fade 0.5s ease 0.8s both; }
  .ttc-home .ttc-hero__title { font-size: 2rem; }
  .ttc-story__stage::after { top: calc(var(--k-top) + var(--k-f) + var(--k-h) * 0.3); width: min(52vw, 260px); }
  .ttc-home .ttc-hero__cta { margin-top: 1.1rem; }
  .ttc-home .ttc-hero__title, .ttc-home .ttc-hero__lede, .ttc-home .ttc-hero__trust { margin-inline: auto; }
  .ttc-home .ttc-hero__lede { margin-top: 0.7rem; font-size: 0.95rem; line-height: 1.55; }
  .ttc-home .ttc-hero__trust { margin-top: 1rem; font-size: 0.68rem; line-height: 1.7; }
  .ttc-home .ttc-hero__cta .ttc-actions { justify-content: center; }

  /* S2. What goes in: heading, lede and chips (a scrolling row), the thekua, then the ingredients as a stacked list
     and the stats two by two. */
  .ttc-chapter--made .ttc-chapter__head { width: auto; max-width: 100%; min-width: 0; margin: 0; text-align: left; padding: 0; }
  .ttc-home .ttc-chapter--made .ttc-chapter__head .ttc-h2 { margin: 0 0 14px; max-width: none; font-size: 2.1rem; }
  .ttc-home .ttc-chapter--made .ttc-chapter__head .ttc-lede { margin: 0; max-width: none; font-size: 1rem; line-height: 1.65; }
  .ttc-home .ttc-ing__chips { display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 17px -20px -5px; padding: 5px 20px; scrollbar-width: none; } /* 5px each way: room for the focus ring, which the scroller clips */
  .ttc-chapter--made.is-seq .ttc-ing__pin > .ttc-ing__chips { margin-top: 0; }
  .ttc-ing__chips::-webkit-scrollbar { display: none; }
  .ttc-home .ttc-ing__chips .ttc-chip { flex: 0 0 auto; }
  .ttc-home .ttc-ing__still { display: block; width: min(210px, 54vw); height: auto; margin: 36px auto 28px; filter: drop-shadow(0 22px 18px rgba(var(--ttc-shadow-rgb), 0.22)); }
  .ttc-spec__lines { display: none; }
  .ttc-callouts { display: block; height: auto; min-height: 0; }
  .ttc-callout, .ttc-callout--1, .ttc-callout--2, .ttc-callout--3, .ttc-callout--4 { display: block; max-width: none; margin: 0; padding: 22px 0; border: 0; border-top: 1px solid var(--ttc-line); text-align: left; }
  .ttc-callout .ttc-callout__icon, .ttc-callout--1 .ttc-callout__icon, .ttc-callout--3 .ttc-callout__icon { margin: 0 0 10px; width: 30px; height: 30px; }
  .ttc-home .ttc-callout__title { font-size: 1.5rem; }
  .ttc-home .ttc-callout__body { font-size: 1rem; line-height: 1.6; }
  .ttc-chapter--made .ttc-stats-wrap { margin-top: 4px; }
  .ttc-chapter--made .ttc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 0; }
  .ttc-chapter--made .ttc-stat { padding: 20px 12px 20px 0; border-left: 0; border-bottom: 1px solid var(--ttc-line); }
  .ttc-chapter--made .ttc-stat:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--ttc-line); }
  .ttc-home .ttc-stat__num { font-size: 2rem; }
  .ttc-home .ttc-stat__label { font-size: 0.74rem; letter-spacing: 0.12em; }
  .ttc-home .ttc-stats__note { margin-top: 14px; }
  /* The shop's promises (made after you order, free shipping, pay your way): a swipe row of tiles on phones, each about
     70% wide so the next one shows at the edge, snapping one at a time; edge to edge, the first tile on the text line. */
  .ttc-home .ttc-trust { display: flex; gap: 10px; margin-inline: -20px; padding: 24px 20px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; border-top: 0; overscroll-behavior-x: contain; }
  .ttc-trust::-webkit-scrollbar { display: none; }
  /* The ticker (home-v2.js): the row itself slides, so it does not scroll; the page clips it at the screen edges. */
  .ttc-home .ttc-trust.is-marquee { overflow: visible; scroll-snap-type: none; touch-action: pan-y; will-change: transform; transform: translate3d(var(--tx, 0px), 0, 0); }
  .ttc-anim .ttc-trust.is-marquee[data-anim] { transform: translate3d(var(--tx, 0px), 0, 0) !important; } /* outranks the phones' still [data-anim] rule */
  .ttc-home .ttc-trust__item { flex: 0 0 72%; scroll-snap-align: start; padding: 16px 16px 18px; border: 1px solid var(--ttc-rule-dark); border-radius: 2px; background: rgba(var(--ttc-cream-rgb), 0.04); }
  /* The ingredient sequence (home-v2.js adds .is-seq; reduced motion and no JS keep the plain list above). The thekua and
     one ingredient at a time hold under the header while the track's extra height scrolls by; the four marks under the
     card show where the reader is and take a tap to go to any of them. The outgoing card lifts away, the next rises in. */
  .ttc-chapter--made.is-seq .ttc-ing__track { display: block; }
  .ttc-chapter--made.is-seq .ttc-ing__track::after { content: ""; display: block; height: 150svh; } /* a box, not padding: sticky only travels inside the parent's content */
  .ttc-chapter--made.is-seq .ttc-ing__pin { display: block; position: sticky; top: var(--ing-top); }
  .ttc-chapter--made.is-seq { --ing-top: max(72px, calc(50svh - 380px)); } /* the panel (chips to stats, about 720px) fills the screen under the header */
  .ttc-chapter--made.is-seq .ttc-ing__still { width: auto; height: clamp(130px, 24svh, 230px); margin: 14px auto 4px; }
  .ttc-chapter--made.is-seq .ttc-callouts { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .ttc-chapter--made.is-seq .ttc-callout { grid-area: 1 / 1; padding: 16px 0 0; border-top: 0; transition: opacity 0.4s ease, transform 0.5s var(--ttc-ease); }
  .ttc-chapter--made.is-seq .ttc-callout[data-reveal]:not(.is-on) { opacity: 0 !important; transform: translateY(18px) !important; pointer-events: none; transition-duration: 0.25s, 0.3s; }
  .ttc-chapter--made.is-seq .ttc-callout[data-reveal].is-past:not(.is-on) { transform: translateY(-14px) !important; }
  .ttc-chapter--made.is-seq .ttc-ing__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
  .ttc-home .ttc-ing__step { display: flex; flex-direction: column; gap: 9px; min-height: 44px; margin: 0; padding: 10px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ttc-muted); font: 600 0.64rem/1 var(--ttc-accent); letter-spacing: 0.16em; text-transform: uppercase; text-align: left; cursor: pointer; }
  .ttc-ing__step::before { content: ""; display: block; height: 2px; background: var(--ttc-line); transition: background-color 0.3s ease; }
  .ttc-home .ttc-ing__step:hover, .ttc-home .ttc-ing__step:focus { background: none; color: var(--ttc-clay-text); box-shadow: none; }
  .ttc-home .ttc-ing__step:focus-visible { outline: 2px solid var(--ttc-clay); outline-offset: 2px; }
  .ttc-ing__step.is-done::before { background: rgba(var(--ttc-clay-rgb), 0.45); }
  .ttc-home .ttc-ing__step.is-on { color: var(--ttc-clay-text); }
  .ttc-ing__step.is-on::before { background: var(--ttc-clay); }
  /* The stats inside the panel (home-v2.js moves them in when they fit): the same 2 x 2 grid, tighter. */
  .ttc-chapter--made.is-seq .ttc-ing__pin > .ttc-stats-wrap { margin-top: 14px; }
  .ttc-chapter--made.is-seq .ttc-ing__pin .ttc-stat { gap: 4px; padding: 11px 10px 11px 0; }
  .ttc-chapter--made.is-seq .ttc-ing__pin .ttc-stat:nth-child(even) { padding-left: 16px; }
  .ttc-chapter--made.is-seq .ttc-ing__pin .ttc-stat__num { font-size: 1.55rem; }
  .ttc-chapter--made.is-seq .ttc-ing__pin .ttc-stat__label { font-size: 0.66rem; }
  .ttc-chapter--made.is-seq .ttc-ing__pin .ttc-stats__note { margin-top: 8px; font-size: 0.74rem; }

  /* S3. How it is made: copy, the sealed jar, the four numbered rows, the link. */
  .ttc-drop__copy { max-width: none; margin: 0; }
  .ttc-home .ttc-drop__title { margin: 0 0 14px; max-width: none; font-size: 2.1rem; }
  .ttc-home .ttc-drop__body { display: block; font-size: 1rem; line-height: 1.65; }
  .ttc-home .ttc-drop__copy .ttc-btn { display: none; }
  .ttc-drop__jarbox { position: relative; z-index: 3; display: block; width: min(230px, 60vw); margin: 36px auto 8px; }
  .ttc-home .ttc-drop__jar { display: block; width: 100%; height: auto; margin: 0; filter: drop-shadow(0 24px 20px rgba(var(--ttc-shadow-rgb), 0.2)); }
  /* The jar's 360 (home-v2.js): a sideways drag turns it, a vertical swipe still scrolls the page. The hint says it is a
     model you can turn, and goes once it has been turned by hand. */
  .ttc-drop__jarbox.is-spin { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
  .ttc-drop__jarbox.is-spin:active { cursor: grabbing; }
  .ttc-home .ttc-drop__spinhint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; font: 600 0.66rem/1 var(--ttc-accent); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ttc-clay-text); transition: opacity 0.4s ease; }
  .ttc-drop__spinhint[hidden] { display: none; }
  .ttc-drop__spinhint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: ttc-spin-hint 2.4s var(--ttc-ease) infinite; }
  .ttc-drop__jarbox.is-turned .ttc-drop__spinhint, .ttc-drop__jarbox.is-flying .ttc-drop__spinhint { opacity: 0; }
  /* The jar's hand-over to the first shop card (home-v2.js, html.ttc-jar-fly): the card's own jar waits until it lands. */
  .ttc-jar-fly:not(.is-jar-landed) [data-pack="0"] .ttc-pack__still { visibility: hidden; }
  .ttc-jar-fly:is(.is-jar-landed, .is-jar-flying) :is(.ttc-drop__jar, .ttc-drop__spincanvas) { visibility: hidden; }
  /* The 360's canvas lies exactly over the still (which keeps the box and the measurements) once the frames are in. */
  .ttc-drop__spincanvas { position: absolute; left: 0; top: 0; display: none; width: 100%; aspect-ratio: 600 / 786; filter: drop-shadow(0 24px 20px rgba(var(--ttc-shadow-rgb), 0.2)); pointer-events: none; }
  .ttc-drop__jarbox.is-canvas .ttc-drop__spincanvas { display: block; }
  .ttc-drop__jarbox.is-canvas .ttc-drop__jar { opacity: 0; }
  .ttc-jarfly { position: fixed; z-index: 7990; display: none; pointer-events: none; filter: drop-shadow(0 24px 20px rgba(var(--ttc-shadow-rgb), 0.22)); } /* under the sticky bar and the header */
  .is-jar-flying .ttc-jarfly { display: block; }
  /* The four steps (home-v2.js marks the list live): as each reaches the reading line its icon is inked in and the rule
     above it fills clay from the left. Copy never moves. */
  .ttc-drop__facts.is-live .ttc-drop__fact { position: relative; }
  .ttc-drop__facts.is-live .ttc-drop__fact::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ttc-clay); transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ttc-ease); }
  .ttc-drop__facts.is-live .ttc-drop__fact.is-active::before { transform: scaleX(1); }
  .ttc-drop__facts.is-live .ttc-drop__icon svg * { transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; }
  .ttc-anim .ttc-drop__facts.is-live .ttc-drop__fact:not(.is-active) .ttc-drop__icon svg * { stroke-dashoffset: 1 !important; }
  /* Phones: copy, then the four steps, then the jar, which leads into the shop (home-v2.js carries it into the first card). */
  .ttc-chapter.ttc-chapter--drop .ttc-chapter__pin { display: flex; flex-direction: column; } /* beats the phone rule that blocks every chapter pin */
  .ttc-drop__copy { order: 1; }
  .ttc-drop__facts { order: 2; }
  .ttc-home .ttc-drop__more { order: 3; align-self: flex-start; }
  .ttc-drop__jarbox { order: 4; }
  /* The four steps as a 2 x 2 of tiles on hairlines: icon, number, title, one line. */
  .ttc-drop__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; margin: 28px 0 0; gap: 0; border-top: 1px solid var(--ttc-line); }
  .ttc-drop__fact { grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: 6px; padding: 18px 14px 20px 0; border-top: 0; border-bottom: 1px solid var(--ttc-line); }
  .ttc-drop__fact:nth-child(even) { padding: 18px 0 20px 16px; border-left: 1px solid var(--ttc-line); }
  .ttc-drop__icon { grid-row: auto; width: 34px; height: 34px; margin-bottom: 6px; }
  .ttc-home .ttc-drop__fact strong { font-size: 1.15rem; line-height: 1.2; }
  .ttc-home .ttc-drop__n { display: block; margin: 0 0 6px; }
  .ttc-drop__fact span:not(.ttc-drop__icon):not(.ttc-drop__n) { font-size: 0.82rem; line-height: 1.5; }
  .ttc-home .ttc-drop__more { display: inline-flex; margin-top: 24px; }
  /* The site's floating widgets: the header already has the cart, so Modern Cart's own launcher is hidden here (the
     header button still opens its drawer); the chat keeps its button but not the "May I help you?" pill, which sat over
     buttons and copy all the way down the page. WhatsApp sits just above the chat button. */
  body .moderncart-floating-cart-button, body .moderncart-toggle-slide-out { visibility: hidden !important; pointer-events: none !important; }
  body #chat-teaser { display: none !important; }
  .ttc-range-sec { margin-top: 0; }
  /* S4. Shop: the four jars one below the other, full width; size chips tap in place; the sticky bar carries the first
     jar once the hero has gone. */
  .ttc-packs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ttc-home .ttc-sticky { display: flex; }
  .ttc-pack { padding: 6px 6px 0; }
  .ttc-pack__media { aspect-ratio: 4 / 3; }
  .ttc-pack__still { width: auto; height: 92% !important; }
  .ttc-pack__body { gap: 10px; padding: 16px 10px 16px; }
  .ttc-home .ttc-pack__name { font-size: 1.6rem; }
  .ttc-home .ttc-pack__desc { margin-top: -4px; min-height: 0; font-size: 0.95rem; }
  .ttc-seg { gap: 8px; }
  .ttc-home .ttc-seg__opt { min-height: 44px; }
  .ttc-home .ttc-seg__size { font-size: 0.92rem; }
  .ttc-home .ttc-pack__state { position: static; margin-top: 2px; text-align: left; color: var(--ttc-error); }
  .ttc-sec__head--row, .ttc-sec__head--split { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; justify-items: start; gap: 12px; }
  .ttc-meetha__grid, .ttc-texture__top, .ttc-makers__inner, .ttc-faq__inner { grid-template-columns: minmax(0, 1fr); }
  .ttc-meetha__media { min-height: 0; aspect-ratio: 5 / 4; } /* landscape on phones: the photo leads without taking the whole screen */
  .ttc-meetha__side { padding: 24px 20px 28px; }
  .ttc-home .ttc-meetha__num { display: none; }
  .ttc-home .ttc-meetha__body { min-height: 0; }
  .ttc-meetha__pick { display: grid; justify-content: stretch; }
  .ttc-meetha__tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; }
  .ttc-meetha__tabs::-webkit-scrollbar { display: none; }
  .ttc-home .ttc-meetha__tab { flex: 0 0 auto; }
  .ttc-meetha__panel { padding-top: 22px; }
  .ttc-home .ttc-meetha__body { font-size: 1rem; margin-bottom: 20px; }
  .ttc-meetha__panel .ttc-btn { width: 100%; }
  .ttc-reviews__meta { align-items: flex-start; }
  .ttc-review { padding: 22px; }
  .ttc-home .ttc-review__text { font-size: 1rem; }
  /* S7. Reviews: a swipe row, 1.15 cards in view (the moving wall is desktop only); long ones open in place. */
  .ttc-reviews__list { display: flex; align-items: flex-start; gap: 12px; columns: auto; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding: 0 20px 6px; scroll-padding-inline: 20px; scrollbar-width: none; }
  .ttc-reviews__list::-webkit-scrollbar { display: none; }
  .ttc-reviews__list .ttc-review { flex: 0 0 calc((100vw - 40px) / 1.15); margin: 0; scroll-snap-align: start; }
  .ttc-reviews__list .ttc-review:not(.is-open) .ttc-review__text { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
  /* Phones: the lead stays a big photo tile; the other four become a compact list (square thumb left, words right). */
  .ttc-journal__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 0; }
  /* The lead story: a square card, the title two or three lines, the excerpt two. */
  .ttc-post--lead { grid-column: auto; grid-row: auto; height: auto; aspect-ratio: 1; margin-bottom: 6px; }
  .ttc-post--lead .ttc-post__text { gap: 8px; padding: 22px 20px; }
  .ttc-home .ttc-post--lead .ttc-post__title { font-size: 1.65rem; line-height: 1.14; max-width: none; }
  .ttc-home .ttc-post--lead .ttc-post__excerpt { font-size: 0.92rem; line-height: 1.55; }
  .ttc-post:not(.ttc-post--lead) { padding: 14px 0; border-bottom: 1px solid var(--ttc-line); }
  .ttc-post:last-child { border-bottom: 0; }
  .ttc-home .ttc-post:not(.ttc-post--lead) .ttc-post__link { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; overflow: visible; background: none; color: var(--ttc-ink); }
  .ttc-post:not(.ttc-post--lead) .ttc-post__media { position: relative; z-index: auto; aspect-ratio: 1; overflow: hidden; border-radius: 2px; }
  .ttc-post:not(.ttc-post--lead) .ttc-post__media::after { display: none; }
  .ttc-post:not(.ttc-post--lead) .ttc-post__text { gap: 6px; padding: 0; }
  .ttc-home .ttc-post:not(.ttc-post--lead) .ttc-post__cat { color: var(--ttc-clay-text); }
  .ttc-home .ttc-post:not(.ttc-post--lead) .ttc-post__title { -webkit-line-clamp: 2; font-size: 1.1rem; line-height: 1.2; color: var(--ttc-ink); }
  .ttc-home .ttc-post:not(.ttc-post--lead) .ttc-post__cat { font-size: 0.64rem; }
  .ttc-home .ttc-post:not(.ttc-post--lead) .ttc-post__by { font-size: 0.78rem; }
  .ttc-home .ttc-post:not(.ttc-post--lead) .ttc-post__by { color: var(--ttc-muted); }
  .ttc-faq__head { position: static; }
  .ttc-home .ttc-faq__q { padding: 18px 4px; }
  .ttc-home .ttc-faq__qt { font-size: 1.125rem; }
  .ttc-home .ttc-faq__a { padding: 0 4px 18px; font-size: 1rem; }
  .ttc-home .ttc-faq__title { margin-bottom: 16px; }
  .ttc-faq__head { margin-bottom: 8px; }
  .ttc-reviews__avg { white-space: normal; }
}
/* Touch: a press answers at once with a small give (no hover on these screens). */
@media (hover: none) {
  .ttc-home :is(.ttc-btn, .ttc-chip, .ttc-pack__media, .ttc-post__link, .ttc-seg__opt) { -webkit-tap-highlight-color: transparent; }
  .ttc-home :is(.ttc-btn, .ttc-chip, .ttc-pack__media, .ttc-post__link, .ttc-seg__opt):active { transform: scale(0.97); }
}


@media (max-width: 640px) {
  .ttc-home .ttc-hero__cta .ttc-actions { flex-direction: column; align-items: stretch; }
  .ttc-home .ttc-hero__cta .ttc-btn { width: 100%; }
}

/* ---------- Reduced motion: fully static, fully readable ---------- */

@media (prefers-reduced-motion: reduce) {
  .ttc-foot__word span { animation: none !important; clip-path: none !important; }
  .ttc-pack__art, .ttc-pack__media, .ttc-meetha__panel { transition: none !important; animation: none !important; }
  [data-anim], .ttc-chapter [data-reveal] { opacity: 1 !important; transform: none !important; }
  .ttc-story__stills { display: grid !important; }
  .ttc-hero__letter { opacity: 1 !important; transform: none !important; animation: none !important; }
  .ttc-home *, .ttc-home *::before, .ttc-home *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}