/* =========================================================
   Rangaa Roots — editorial theme
   Large Cormorant Garamond type, flat fields of the brand colours,
   photographs at uneven sizes. Depth comes from scale and colour,
   not from shadows. Colours are the official logo palette and are
   fixed: every value below is unchanged from the original site.
   Motion lives in js/motion.js (GSAP + ScrollTrigger, synced to
   Lenis in js/scroll.js).
   ========================================================= */
/* ---------- Fonts: Cormorant Garamond + Manrope (Google Fonts, SIL OFL), self-hosted Latin subsets ---------- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/cormorant-garamond-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("../fonts/cormorant-garamond-italic-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/manrope-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* logo palette */
  --forest: #143823;
  --forest-2: #1f4a30;
  --leaf: #388e3c;
  --lotus: #d84473;
  --lotus-deep: #c22956;
  --gold: #c59b27;
  --cream: #fcfaf7;

  /* paper materials */
  --desk: #f2ede4;           /* page surface */
  --paper: #fffdf8;          /* sheet */
  --kraft: #e9dfcd;          /* card stock */
  --kraft-2: #dccfb6;
  --ink: #1b2a21;
  --ink-soft: #55635a;
  --line: rgba(27, 42, 33, .1);
  --gold-text: #7a5a10;      /* AA-safe gold on paper */

  /* existing one-off brand values, unchanged, now named */
  --forest-ink: #0b2216;     /* pressed edge under forest buttons */
  --forest-deep: #0f2c1b;    /* footer */
  --leaf-text: #23662a;      /* verified status text */
  --tint-leaf: #e8f3e8;
  --tint-lotus: #fcebf0;
  --tint-gold: #f8f0d8;
  --tint-kraft: #f6efdc;
  --fold: #e8e0d0;
  --white: #fff;

  --font-display: "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --nav-h: 74px;
}

*, *::before, *::after { box-sizing: border-box; }
/* No CSS smooth scrolling: Lenis owns the scroll (scroll.js). scroll-padding still offsets native anchor jumps. */
html { scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--desk);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
::selection { background: rgba(197, 155, 39, .3); color: var(--forest); }
:focus-visible { outline: 2.5px solid var(--lotus-deep); outline-offset: 3px; border-radius: 8px; }

.container { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 300; background: var(--forest); color: var(--white); padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- Type + layout scale ---------- */
:root {
  --gutter: clamp(16px, 4vw, 56px);
  --fs-h1: clamp(2rem, (100vw - 2 * var(--gutter)) / 8.4, 5.75rem);   /* each hero line (~7.8em) stays on one line */
  --fs-h2: clamp(2.25rem, 1.55rem + 2.8vw, 4.25rem);
  --fs-h3: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  --fs-quote: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-label: .8125rem;
  --ease-lux: cubic-bezier(.16, 1, .3, 1);   /* expo-out: long, soft landing */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);   /* strong ease-in-out: things moving on screen */
}
.eyebrow {
  display: inline-flex; align-items: flex-start; gap: 12px; line-height: 1.6;
  margin: 0 0 20px;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lotus-deep);
}
.eyebrow--light { color: var(--gold); }
.eyebrow .dot { flex-shrink: 0; margin-top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--lotus); box-shadow: 0 0 0 4px rgba(216, 68, 115, .16); }
.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -.012em;
  color: var(--forest);
  text-wrap: balance;
}

/* ---------- Buttons — a fill rises on hover ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 13px 26px;
  border: 0; border-radius: 999px;
  font-weight: 600; font-size: 15px; letter-spacing: .02em;
  translate: var(--mx, 0px) var(--my, 0px);   /* magnetic */
  transition: translate 600ms var(--ease-lux), color 500ms var(--ease-lux), box-shadow 500ms var(--ease-lux), scale 200ms var(--ease-lux);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--fill, var(--forest-2));
  transform: translateY(101%);
  transition: transform 650ms var(--ease-lux);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn .ic { transition: transform 600ms var(--ease-lux); }
.btn:hover .ic:last-child:not(:first-child) { transform: translateX(4px); }
.btn:active { scale: .97; }
.btn--lg { min-height: 56px; padding: 15px 30px; font-size: 15.5px; }
.btn--sm { min-height: 44px; padding: 9px 18px; font-size: 14px; }
.btn--primary { background: var(--forest); color: var(--white); --fill: var(--gold); }
.btn--primary:hover, .btn--primary:focus-visible { color: var(--forest); }
.btn--paper { background: transparent; color: var(--forest); box-shadow: inset 0 0 0 1.5px rgba(20, 56, 35, .3); --fill: var(--forest); }
.btn--paper:hover, .btn--paper:focus-visible { color: var(--white); box-shadow: inset 0 0 0 1.5px var(--forest); }
.btn--light { background: var(--paper); color: var(--forest); --fill: var(--gold); }

.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; transition: background-color 300ms; }
.icon-btn:hover { background: rgba(233, 223, 205, .7); }

/* ---------- Scroll progress ---------- */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 120; background: linear-gradient(90deg, var(--gold), var(--lotus)); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h); transition: background-color 500ms var(--ease-lux), box-shadow 500ms var(--ease-lux); }
.nav.is-solid { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { border-radius: 50%; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__text b { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: .12em; color: var(--forest); }
.brand__text small { margin-top: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-text); }
.nav__links { position: relative; display: flex; gap: 2px; font-size: 14.5px; font-weight: 500; }
.nav__links a { padding: 10px 14px; color: var(--ink-soft); transition: color 400ms var(--ease-lux); }
.nav__links a:hover, .nav__links a.is-active { color: var(--forest); }
/* one gold underline slides to the section in view (transform only) */
.nav__ink {
  position: absolute; left: 0; bottom: 2px; width: 1px; height: 1.5px; background: var(--gold);
  transform-origin: 0 50%; transform: translateX(var(--x, 0px)) scaleX(var(--w, 0));
  opacity: var(--o, 0);
  transition: transform 800ms var(--ease-lux), opacity 400ms;
}
.nav__actions { display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; }
.menu-btn .ic--close { display: none; }
.nav.menu-open .menu-btn .ic--menu { display: none; }
.nav.menu-open .menu-btn .ic--close { display: block; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: max(720px, 100svh);
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 56px) 0 104px;
  overflow: hidden;
  background: var(--desk);
}
/* The temple: image, framing, tint and fade are exactly as before. Motion only scales and drifts the layer:
   the entrance runs on .hero__bg (CSS, from first paint), the scroll parallax on its wrapper (GSAP). */
.hero__media { position: absolute; inset: 0; z-index: -3; will-change: transform; }
.hero__bg {
  position: absolute; inset: 0; z-index: -3;
  background: url("../img/gopuram.jpg") right -2% top 24% / auto 115% no-repeat;
  background-image: image-set(url("../img/gopuram.webp") type("image/webp"), url("../img/gopuram.jpg") type("image/jpeg"));
  filter: sepia(.2) saturate(.9);
  -webkit-mask-image: linear-gradient(90deg, transparent 28%, rgba(0, 0, 0, .6) 50%, #000 72%);
  mask-image: linear-gradient(90deg, transparent 28%, rgba(0, 0, 0, .6) 50%, #000 72%);
  transform-origin: 78% 40%;
}
.hero__veil {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, var(--desk) 0%, rgba(242, 237, 228, .93) 34%, rgba(242, 237, 228, .42) 62%, rgba(242, 237, 228, .2) 100%),
    linear-gradient(180deg, rgba(242, 237, 228, .65) 0%, transparent 20%);
}
.hero__inner { position: relative; }
.hero__copy { max-width: 50rem; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--forest);
  margin: 0;
}
.hero__title .line { display: block; overflow: hidden; padding: 0 .12em .1em 0; margin-bottom: -.1em; }
.hero__title .line__i { display: inline-block; }
.hero__title em { font-style: italic; font-weight: 500; color: var(--lotus-deep); }
.hero__lead { max-width: 36rem; margin: 30px 0 38px; font-size: var(--fs-lead); line-height: 1.7; color: var(--ink); }
.hero__lead strong { color: var(--forest); font-weight: 600; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__stats { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); margin: 64px 0 0; }
.stat dt { font-family: var(--font-display); font-size: clamp(2.25rem, 1.7rem + 1.8vw, 3.25rem); font-weight: 500; line-height: 1; color: var(--forest); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.stat dd { margin: 10px 0 0; font-size: var(--fs-small); color: var(--ink-soft); }
/* count-up: an invisible copy of the final value holds the width, so nothing shifts */
.count { display: inline-grid; }
.count > * { grid-area: 1 / 1; }
.count__ghost { visibility: hidden; }

/* ---------- Marquee — forest ribbon ---------- */
.marquee { position: relative; z-index: 2; overflow: hidden; padding: 22px 0; background: var(--forest); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; gap: 44px; padding-right: 44px; }
.marquee span { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); font-style: italic; color: var(--paper); white-space: nowrap; }
.marquee i { width: 7px; height: 7px; background: var(--gold); rotate: 45deg; flex-shrink: 0; }
/* the drift is a CSS loop (compositor-only); with GSAP, motion.js eases its rate on scroll and hover */
.marquee__track { animation: marquee 55s linear infinite; }
html:not(.motion) .marquee:hover .marquee__track { animation-play-state: paused; }

@media (max-width: 920px) {
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 0; z-index: -1;
    flex-direction: column; justify-content: center; gap: 2px;
    padding: 24px var(--gutter) 72px;
    background: var(--forest);
    opacity: 0; visibility: hidden;
    transition: opacity 500ms var(--ease-lux), visibility 500ms;
  }
  .nav__links a {
    font-family: var(--font-display); font-size: clamp(2.25rem, 9vw, 3.25rem); font-weight: 500; line-height: 1.2;
    padding: 6px 0; color: var(--paper);
    opacity: 0; translate: 0 28px;
    transition: opacity 600ms var(--ease-lux), translate 900ms var(--ease-lux), color 300ms;
  }
  .nav__links a:hover, .nav__links a.is-active { color: var(--gold); }
  .nav.menu-open { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
  .nav.menu-open .nav__links { opacity: 1; visibility: visible; }
  .nav.menu-open .nav__links a { opacity: 1; translate: 0 0; transition-delay: calc(120ms + var(--i) * 70ms); }
  .nav__ink { display: none; }
  .menu-btn { display: grid; }
  .hero { min-height: auto; padding: calc(var(--nav-h) + 48px) 0 88px; }
  .hero__bg { background-image: image-set(url("../img/gopuram-1080.webp") type("image/webp"), url("../img/gopuram.jpg") type("image/jpeg")); background-position: 50% 0; background-size: cover; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 60%, transparent 100%); transform-origin: 50% 20%; }
  .hero__veil { background: linear-gradient(180deg, rgba(242, 237, 228, .8) 0%, rgba(242, 237, 228, .88) 45%, var(--desk) 78%); }
}
@media (max-width: 600px) {
  .hide-sm { display: none; }
  .brand__text small { display: none; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 12px; margin-top: 48px; }
  .stat dt { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .stat dd { font-size: 13px; line-height: 1.4; }
}

/* hero entrance: pure CSS so it starts on the first paint, without waiting for scripts */
html.motion .hero__bg { animation: heroBg 2.6s cubic-bezier(.25, .46, .45, .94) both; }
html.motion .hero .eyebrow { animation: heroUp 1.1s var(--ease-lux) .25s both; }
html.motion .hero__title .line__i { animation: heroLine 1.4s var(--ease-lux) .35s both; }
html.motion .hero__title .line + .line .line__i { animation-delay: .51s; }
html.motion .hero__lead { --from: 30px; animation: heroUp 1.3s var(--ease-lux) .85s both; }
html.motion .hero__cta .btn { animation: heroPop 1.2s var(--ease-lux) 1.05s both; }
html.motion .hero__cta .btn + .btn { animation-delay: 1.17s; }
html.motion .hero__stats .stat { animation: heroUp 1.2s var(--ease-lux) 1.25s both; }
html.motion .hero__stats .stat:nth-child(2) { animation-delay: 1.37s; }
html.motion .hero__stats .stat:nth-child(3) { animation-delay: 1.49s; }
@keyframes heroBg { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes heroUp { from { opacity: 0; transform: translateY(var(--from, 22px)); } to { opacity: 1; transform: none; } }
@keyframes heroLine { from { transform: translateY(110%); } to { transform: none; } }
@keyframes heroPop { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }

/* ---------- Sections ---------- */
.section { padding: clamp(72px, 11vw, 168px) 0; position: relative; }
.section__head { max-width: 680px; margin-bottom: clamp(48px, 6vw, 80px); }
.section__head p:not(.eyebrow) { margin: 22px 0 0; font-size: var(--fs-lead); line-height: 1.7; color: var(--ink); max-width: 56ch; }

/* ---------- Ghee — two prints at uneven sizes ---------- */
.ghee__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(48px, 8vw, 120px); align-items: center; }
.ghee__media { position: relative; }
.ghee__frame { position: relative; margin: 0; }
.ghee__img { overflow: hidden; }
.ghee__img img { width: 100%; object-fit: cover; }
/* slow golden light: opacity-only, swells once on entry then breathes */
.ghee__frame::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  box-shadow: 0 40px 90px -30px rgba(197, 155, 39, .75), 0 0 60px -10px rgba(197, 155, 39, .35);
  opacity: 0; transition: opacity 2.6s var(--ease-lux);
}
.ghee__frame.is-glowing::after { opacity: 1; animation: breathe 6s ease-in-out 2.6s infinite alternate; }
html:not(.motion) .ghee__frame::after { opacity: .8; }
.ghee__seal {
  position: absolute; left: -5%; top: -18%; z-index: 2;   /* above the film's on-screen text */
  width: 124px; height: 124px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lotus-deep); color: var(--white);
  box-shadow: inset 0 0 0 5px var(--lotus-deep), inset 0 0 0 6px rgba(255, 255, 255, .5);
}
.ghee__seal > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 40s linear infinite; }
.ghee__seal text { font-size: 10px; letter-spacing: .2em; font-weight: 700; fill: var(--white); font-family: var(--font-body); }
.ghee__seal .ic { width: 28px; height: 28px; }
.ghee__sub { margin: 22px 0 0; font-size: var(--fs-lead); line-height: 1.7; color: var(--ink); }
.checks { list-style: none; padding: 0; margin: 36px 0 40px; display: grid; gap: 18px; }
.checks li { display: flex; gap: 16px; align-items: flex-start; font-size: var(--fs-body); color: var(--ink); }
.checks li .ic { color: var(--leaf); margin-top: 3px; }
.fact { display: flex; gap: 24px; align-items: center; margin-top: 48px; padding: 4px 0 4px 24px; border-left: 2px solid var(--gold); color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.65; }
.fact b { font-family: var(--font-display); font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem); font-weight: 500; line-height: 1; color: var(--forest); white-space: nowrap; font-variant-numeric: lining-nums; }
@keyframes breathe { from { opacity: 1; } to { opacity: .55; } }

/* ---------- Films: muted, looping brand videos ----------
   motion.js plays each one only while it is on screen. Under reduced motion or data saver
   the poster stays still and the button starts it. */
.film { position: relative; aspect-ratio: 848 / 478; overflow: hidden; background: var(--kraft); }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film .film__toggle {
  position: absolute; left: 12px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgba(11, 34, 22, .55); color: var(--paper);
  transition: transform 160ms ease-out, background-color 200ms ease;
}
.film__toggle .ic { width: 18px; height: 18px; }
.film__toggle:active { transform: scale(.97); }
.film__toggle[data-state="playing"] .film__play, .film__toggle[data-state="paused"] .film__pause { display: none; }
@media (hover: hover) and (pointer: fine) { .film__toggle:hover { background: rgba(11, 34, 22, .8); } }

/* ---------- Intro film: plays once a session, then carries on into the hero ----------
   The video ends mid push-in on cream, the same family as the hero's surface. intro.js keeps
   that push going while the layer dissolves, and the hero arrives moving the same way. */
.intro { display: none; }
/* the page stays scrollable behind the film (Lenis ignores input, the overlay takes touch), so the
   scrollbar is already there and nothing shifts when the film lets go. The html state class is
   intro-on, not intro: .intro { display: none } above would otherwise hide the whole document. */
html.intro-on.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: visible; }
.intro { touch-action: none; }
html.intro-on .intro, .intro.is-leaving { display: block; position: fixed; inset: 0; z-index: 400; overflow: hidden; background: #e8e1cf; }
.intro__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* tall screens: cropping a wide film would cut the logo, so it floats, feathered into the cream */
@media (max-aspect-ratio: 1/1) {
  .intro__video {
    inset: 50% auto auto 50%; width: 190vw; height: auto; aspect-ratio: 848 / 478; translate: -50% -50%;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  }
}
.intro__skip {
  position: absolute; right: var(--gutter); bottom: 24px; min-height: 44px; padding: 8px 18px; border: 0; border-radius: 999px;
  background: rgba(20, 56, 35, .1); color: var(--forest); font-size: 14px; font-weight: 600;
  transition: transform 160ms ease-out, background-color 200ms ease;
  animation: introSkip 400ms ease-out 800ms both;
}
.intro__skip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .intro__skip:hover { background: rgba(20, 56, 35, .18); } }
.intro.is-leaving .intro__skip { display: none; }
@keyframes introSkip { from { opacity: 0; } }
/* the hero waits behind the film, then comes forward with the camera */
html.intro-on :is(.hero__bg, .hero .eyebrow, .hero__title .line__i, .hero__lead, .hero__cta .btn, .hero__stats .stat) { animation-play-state: paused; }
html.motion.intro-through .hero__bg { animation-name: heroBgThrough; }
@keyframes heroBgThrough { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 920px) {
  .ghee__grid { grid-template-columns: 1fr; }
  .ghee__media { max-width: 560px; width: 100%; margin-inline: auto; }
}
@media (max-width: 600px) {
  .ghee__seal { width: 92px; height: 92px; left: -2%; }
  .ghee__seal text { font-size: 11.5px; }
  .fact { flex-direction: column; align-items: flex-start; gap: 10px; }
}
html.motion [data-curtain] { opacity: 0; }

[data-curtain] > * { display: block; }
/* ---------- Process — a gold line through five stages (pinned on desktop) ---------- */
.process { background: var(--forest); color: var(--paper); }
.process .h2 { color: var(--paper); }
.process__head { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(56px, 7vw, 96px); }
.process__head p:not(.eyebrow) { margin: 0; font-size: var(--fs-lead); line-height: 1.7; color: rgba(252, 250, 247, .88); max-width: 46ch; }
.process__track { position: relative; padding-top: 52px; }
.process__line { position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: rgba(252, 250, 247, .16); }
.process__fill { position: absolute; inset: 0; background: var(--gold); transform-origin: 0 50%; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(20px, 2.6vw, 40px); }
.step { position: relative; }
.step__dot { position: absolute; top: -52px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--forest); box-shadow: inset 0 0 0 2px rgba(252, 250, 247, .35); }
.step__dot i { position: absolute; inset: -3px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(197, 155, 39, .2); }
.step__n { display: block; margin-bottom: 18px; font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--gold); font-variant-numeric: lining-nums; }
.step > .ic { display: block; width: 40px; height: 40px; stroke-width: 1.4; color: var(--gold); margin-bottom: 20px; }
.step h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; line-height: 1.15; color: var(--paper); margin-bottom: 10px; }
.step p { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(252, 250, 247, .74); }

/* pinned desktop: the whole section fits the screen under the header */
@media (min-width: 1081px) and (min-height: 640px) {
  .process.is-pinnable { min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; padding: clamp(48px, 7vh, 88px) 0; }
}

/* tablet + phone: the line runs down the left edge */
@media (max-width: 1080px) {
  .process__head { grid-template-columns: 1fr; gap: 22px; }
  .process__track { padding: 0 0 0 44px; }
  .process__line { top: 0; bottom: 0; left: 6px; right: auto; width: 2px; height: auto; }
  .process__fill { transform-origin: 50% 0; }
  .steps { grid-template-columns: 1fr; row-gap: 52px; max-width: 620px; }
  .step__dot { top: 4px; left: -44px; }
}
@media (max-width: 600px) {
  .steps { row-gap: 40px; }
  .step { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: baseline; }
  .step__n { grid-row: 1; margin: 0; }
  .step > .ic { display: none; }
  .step h3, .step p { grid-column: 2; }
}

/* ---------- Products — the pantry ---------- */
.shop { background: var(--paper); }
.search { position: relative; display: flex; align-items: center; flex: 1 1 280px; max-width: 380px; }
.search .ic { position: absolute; left: 20px; color: var(--ink-soft); pointer-events: none; }
.search input {
  width: 100%; min-height: 52px; padding: 12px 22px 12px 52px;
  border: 0; border-radius: 999px; background: var(--desk);
  box-shadow: inset 0 0 0 1px var(--line);
  font: inherit; font-size: 15px; color: var(--ink);
  transition: box-shadow 400ms var(--ease-lux), background-color 400ms var(--ease-lux);
}
.search input::placeholder { color: var(--ink-soft); }
.search input:hover { box-shadow: inset 0 0 0 1px rgba(20, 56, 35, .25); }
.search input:focus { outline: none; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--forest), 0 0 0 4px rgba(20, 56, 35, .12); }
/* category tabs: a forest pill slides under the active one */
.tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(40px, 4.5vw, 64px); }
.chips {
  position: relative; display: inline-flex; gap: 2px; max-width: 100%;
  padding: 5px; border-radius: 999px; background: var(--desk);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chips__indicator {
  position: absolute; left: 0; top: 0; border-radius: 999px;
  background: var(--forest);
  transition: transform 650ms var(--ease-lux), width 650ms var(--ease-lux), height 650ms var(--ease-lux);
}
.chip { position: relative; z-index: 1; flex-shrink: 0; min-height: 44px; padding: 8px 20px; border: 0; border-radius: 999px; background: transparent; font-size: 14px; font-weight: 600; color: var(--ink-soft); transition: color 450ms var(--ease-lux); }
.chip:hover { color: var(--forest); }
.chip[aria-selected="true"] { color: var(--paper); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(20px, 2.4vw, 32px); }
.card { position: relative; display: flex; flex-direction: column; }
.card[hidden] { display: none; }
/* one heading per product family, spanning the whole row */
.shelf { grid-column: 1 / -1; scroll-margin-top: calc(var(--nav-h) + 24px); padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: calc(-1 * clamp(12px, 2vw, 24px)); }
.shelf:not(:first-child) { margin-top: clamp(16px, 2.5vw, 32px); }
.shelf[hidden] { display: none; }
.shelf__name { font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); font-weight: 500; line-height: 1.1; color: var(--forest); }
.shelf__name span { font-family: var(--font-body, inherit); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gold-text); vertical-align: middle; margin-left: 6px; }
.shelf__blurb { margin: 6px 0 0; color: var(--ink-soft); font-size: var(--fs-small); max-width: 60ch; }
/* a shelf with a film: heading on one side, the film explaining the range on the other */
.shelf--film { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
@media (max-width: 760px) { .shelf--film { grid-template-columns: minmax(0, 1fr); } }
.card__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--desk); }
.card__img picture, .card__img img { width: 100%; height: 100%; }
.card__img img { object-fit: cover; transition: transform 1100ms var(--ease-lux); }
.card:hover .card__img img, .card:focus-within .card__img img { transform: scale(1.06); }
.card__body { display: flex; flex-direction: column; gap: 6px; padding: 22px 0 0; flex: 1; }
.card__size { align-self: flex-start; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
.card h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; line-height: 1.15; color: var(--forest); }
.card__note { margin: 0 0 16px; font-size: var(--fs-small); color: var(--ink-soft); }
.enquire {
  position: relative; display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; margin-top: auto;
  min-height: 44px; padding: 10px 0;
  color: var(--forest); font-size: 14.5px; font-weight: 600;
}
.enquire::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1.5px; background: var(--gold); transform: scaleX(.18); transform-origin: 0 50%; transition: transform 700ms var(--ease-lux); }
.enquire .ic { width: 17px; height: 17px; }
.enquire .ic--arrow { transition: transform 600ms var(--ease-lux); }
.card:hover .enquire::after, .enquire:focus-visible::after { transform: scaleX(1); }
.card:hover .enquire .ic--arrow, .enquire:focus-visible .ic--arrow { transform: translateX(5px); }
.empty { text-align: center; padding: 40px 0; color: var(--ink-soft); }

/* ---------- Why — one forest field beside four plain notes ---------- */
.why { background: var(--kraft); }
.why__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 64px); align-items: start; }
.why__card { padding: 0; }
.why__card .ic { width: 30px; height: 30px; stroke-width: 1.5; color: var(--lotus-deep); margin-bottom: 18px; }
.why__card:nth-child(odd) .ic { color: var(--leaf); }
.why__card h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; color: var(--forest); margin-bottom: 8px; }
.why__card p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
.why__card--lg {
  grid-row: span 2; align-self: stretch;
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px;
  padding: clamp(32px, 4vw, 48px);
  background: var(--forest); color: var(--paper);
}
.why__card.why__card--lg .ic { width: 52px; height: 52px; color: var(--gold); margin-bottom: auto; }
.why__card--lg h3 { color: var(--paper); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); margin-top: 48px; }
.why__card--lg p { color: rgba(252, 250, 247, .82); font-size: var(--fs-body); max-width: 34ch; }

@media (max-width: 1080px) {
  .why__grid { grid-template-columns: 1fr 1fr; }
  .why__card--lg { grid-row: auto; grid-column: span 2; min-height: 300px; }
}
/* every category stays visible: the tabs wrap instead of scrolling out of sight */
@media (max-width: 1000px) {
  .chips { flex-wrap: wrap; overflow: visible; border-radius: 26px; }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 32px 14px; }
  .card h3 { font-size: 1.2rem; }
  .card__note { font-size: 13px; }
  .why__grid { grid-template-columns: 1fr; }
  .why__card--lg { grid-column: auto; min-height: 280px; }
}

/* ---------- Reviews — quotes on forest ---------- */
.reviews { background: var(--forest); color: var(--paper); }
.reviews .h2 { color: var(--paper); }
.reviews__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(48px, 6vw, 88px) clamp(40px, 6vw, 96px); }
.review { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.review .stars { display: inline-flex; gap: 2px; color: var(--gold); }
.review .stars .ic { width: 15px; height: 15px; }
.review h3 { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); line-height: 1.5; }
.review p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(1.375rem, 1.15rem + .7vw, 1.75rem); line-height: 1.4; color: var(--paper); }
.review footer { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: 13.5px; color: rgba(252, 250, 247, .7); }
.review .avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--gold); box-shadow: inset 0 0 0 1px rgba(197, 155, 39, .6); }
.review footer b { display: block; color: var(--paper); font-size: 14.5px; font-weight: 600; }

/* ---------- Story — the founder ---------- */
.story__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(48px, 8vw, 128px); align-items: center; }
.story__photo { margin: 0; }
.story__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--kraft); }
.story__frame picture { position: absolute; inset: 0; }
/* the photo file has ~8% white margins left and right: scale past them; the extra height leaves room for the parallax drift */
/* 119% wide gives a height of 151% of the frame's width, i.e. 121% of its 4:5 height: centre it with top -10.5% (GSAP owns transform) */
.story__frame img { position: absolute; left: -9.5%; top: -10.5%; width: 119%; max-width: none; height: auto; }
.story__photo figcaption { margin-top: 16px; font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--ink-soft); }
.story__quote { margin: 0 0 32px; font-family: var(--font-display); font-size: var(--fs-quote); font-style: italic; font-weight: 400; line-height: 1.3; color: var(--forest); text-wrap: pretty; }
[data-lines] .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
[data-lines] .ln__i { display: inline-block; }
html.motion [data-lines]:not([data-split]) { opacity: 0; }
.story__by { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 22px; }
.story__by b { font-size: 16px; color: var(--lotus-deep); }
.story__note { margin: 0; padding-left: 20px; border-left: 2px solid var(--gold); color: var(--ink); max-width: 52ch; }

@media (max-width: 920px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__photo { max-width: 380px; }
}
@media (max-width: 600px) {
  .reviews__row { grid-template-columns: 1fr; }
}
@keyframes drawY { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- CTA — the closing field ---------- */
.cta { background: var(--forest); color: var(--paper); padding: clamp(80px, 12vw, 176px) 0; text-align: center; }
.cta__inner { display: flex; flex-direction: column; align-items: center; }
.cta__logo { margin: 0 0 28px; border-radius: 50%; }
.cta h2 { max-width: 16ch; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; line-height: 1.04; letter-spacing: -.012em; text-wrap: balance; }
.cta p { margin: 22px auto 40px; max-width: 46ch; font-size: var(--fs-lead); color: rgba(252, 250, 247, .8); }

/* ---------- Footer ---------- */
.footer { background: var(--forest-deep); color: rgba(255, 255, 255, .72); padding: clamp(72px, 8vw, 104px) 0 28px; font-size: 14.5px; overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr 1fr; gap: 40px; }
.brand--light .brand__text b { color: var(--white); }
.brand--light .brand__text small { color: var(--gold); }
.footer__about { margin: 18px 0 0; max-width: 32ch; }
.footer h3 { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a { position: relative; transition: color 400ms var(--ease-lux); }
.footer li a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform 600ms var(--ease-lux); }
.footer a:hover { color: var(--white); }
.footer li a:hover::after, .footer li a:focus-visible::after { transform: scaleX(1); }
.footer address { font-style: normal; line-height: 1.75; }
/* the name returns at full width, tone on tone (drawn from data-mark: decoration, not text) */
.footer__mark::before { content: attr(data-mark); }
.footer__mark {
  margin: clamp(56px, 7vw, 96px) auto 0;
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .06em;
  font-size: min(10.6vw, 9.1rem); line-height: .8; white-space: nowrap; text-align: center;
  color: var(--forest);
  user-select: none;
}
.footer__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 36px; font-size: 13px; }
.footer__base p { margin: 0; }
.pyp-credit { display: inline-flex; align-items: center; gap: 10px; }
.pyp-credit img { height: 48px; width: auto; }
.pyp-credit strong { font-weight: 600; color: var(--white); }
.footer__base { align-items: center; }
.credits { opacity: .85; }   /* ~5.9:1 on the footer, AA for small text */

@media (max-width: 920px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ---------- Reveal (GSAP brings these in; hidden only while html.motion is on) ----------
   opacity, not visibility: a not-yet-revealed heading stays in the accessibility tree */
html.motion [data-reveal] { opacity: 0; }

/* ---------- Keyframes ---------- */
@keyframes spin { to { rotate: 360deg; } }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .marquee__track { animation: none !important; }
}

/* link from the home shop grid to the full listing (products.html) */
.shop__all { display: flex; justify-content: center; margin: 40px 0 0; }