/* Shivnath Spices – site styles
   Palette comes from the logo; product colours come from each pack (see js/data.js). */

/* fallbacks sized to Hind's width, so text (and the navbar) doesn't jump when the web font arrives */
@font-face { font-family: 'Hind Fallback'; src: local('Segoe UI'); size-adjust: 99.2%; }
@font-face { font-family: 'Hind Fallback Arial'; src: local('Arial'); size-adjust: 97.4%; }

:root {
  --forest: #02360E;
  --forest-deep: #01250A;
  --leaf: #7A9635;
  --leaf-soft: #A9BF6A;
  --brown: #854204;
  --sprout: #D76306;
  --saffron: #B04B00;          /* button colour: white text passes AA */
  --cream: #F7F1E3;
  --paper: #FCF9F1;
  --ink: #1D1A12;
  --ink-soft: #4A4536;
  --line: rgba(2, 54, 14, .16);
  --line-light: rgba(247, 241, 227, .22);

  --font-display: 'Young Serif', 'Rozha One', Georgia, serif;
  --font-body: 'Hind', 'Hind Fallback', 'Hind Fallback Arial', system-ui, sans-serif;

  --step--1: .875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --step-4: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
  --step-5: clamp(2.6rem, 1.3rem + 5.4vw, 5.25rem);

  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 80px;
  --radius-s: 6px;
  --radius-m: 14px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

html[lang="hi"] {
  --font-display: 'Rozha One', 'Young Serif', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  overflow-x: clip;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
html[lang="hi"] body { line-height: 1.8; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3 { line-height: 1.3; letter-spacing: 0; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; }
.lead { font-size: var(--step-1); color: var(--ink-soft); }

:focus-visible { outline: 3px solid var(--sprout); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--cream); color: var(--forest); padding: .6rem 1rem; border-radius: var(--radius-s);
}
.skip:focus { top: 1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .7em 1.4em;
  border-radius: 999px; border: 2px solid transparent;
  font-weight: 600; font-size: var(--step-0); line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn--primary { background: var(--saffron); color: #fff; }
.btn--primary:hover { background: #923E00; }
.btn--ghost { border-color: currentColor; background: transparent; }
.btn--ghost:hover { background: rgba(255, 255, 255, .1); }
.btn--cream { background: var(--cream); color: var(--forest); }
.btn--cream:hover { background: #fff; }

/* ---------- Header: floating glass bar ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 12px 0 0; color: var(--cream); pointer-events: none;
}
.site-header__bar {
  position: relative; pointer-events: auto;
  display: flex; align-items: center; gap: 1rem; min-height: 62px;
  width: min(100% - 2 * var(--gutter), var(--wrap) + 2.5rem);
  padding: .4rem .45rem .4rem 1.1rem; border-radius: 999px;
  background: rgba(1, 37, 10, .42);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(247, 241, 227, .16);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .35);
  transition: background-color .4s ease, box-shadow .4s ease, width .5s var(--ease-out), min-height .4s var(--ease-out);
}
.site-header.is-scrolled .site-header__bar {
  background: rgba(1, 37, 10, .86); min-height: 56px;
  width: min(100% - 2 * var(--gutter), var(--wrap));
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
}
.site-header__logo { flex: none; display: flex; align-items: center; }
.site-header__logo img { height: 40px; width: auto; transition: transform .4s var(--ease-out); }
.site-header__logo:hover img { transform: rotate(-3deg) scale(1.04); }

.site-nav { margin-left: auto; }
.site-nav ul { position: relative; display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  position: relative; z-index: 1; display: block; padding: .55rem 1rem; border-radius: 999px;
  text-decoration: none; font-weight: 500; color: var(--cream); transition: color .25s ease;
}
.site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: .28rem; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--sprout);
}
/* hover pill that slides between links (positioned by JS) */
.nav-pill {
  position: absolute; z-index: 0; top: 0; left: 0; height: 100%; width: 0; border-radius: 999px;
  background: rgba(247, 241, 227, .14); opacity: 0; pointer-events: none;
  transition: transform .35s var(--ease-out), width .35s var(--ease-out), opacity .2s ease;
}
.site-nav ul:hover .nav-pill, .site-nav ul:focus-within .nav-pill { opacity: 1; }

.site-header__actions { display: flex; align-items: center; gap: .4rem; }
.lang-toggle {
  min-height: 44px; min-width: 44px; padding: .4rem .9rem; border-radius: 999px;
  border: 1px solid rgba(247, 241, 227, .28); background: transparent; color: var(--cream);
  cursor: pointer; font-weight: 600; transition: background-color .2s ease, border-color .2s ease;
}
.lang-toggle:hover { background: rgba(247, 241, 227, .12); border-color: var(--cream); }
.site-header .btn { min-height: 46px; padding: .5em 1.2em; }
.site-header .btn--primary { box-shadow: 0 6px 18px -6px rgba(176, 75, 0, .8); }
.menu-toggle {
  display: none; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; min-width: 44px; padding: 0 .9rem; border-radius: 999px;
  border: 1px solid rgba(247, 241, 227, .28); background: transparent; color: var(--cream); cursor: pointer; font-weight: 600;
}
.menu-toggle__icon { position: relative; width: 16px; height: 10px; }
.menu-toggle__icon::before, .menu-toggle__icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .3s var(--ease-out), top .3s var(--ease-out);
}
.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon::after { top: 8px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { top: 4px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { top: 4px; transform: rotate(-45deg); }

/* content starts under the floating bar */
.showcase { padding-top: var(--header-h); min-height: max(680px, 100svh) !important; }
.page-head { padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)) !important; }

@media (max-width: 960px) {
  .site-header__bar { gap: .4rem; padding-left: .9rem; border-radius: 28px; flex-wrap: wrap; }
  .site-header__logo img { height: 32px; }
  .site-header__actions { margin-left: auto; }
  .menu-toggle { display: inline-flex; order: 3; }
  .menu-toggle__label { display: none; }
  .lang-toggle { padding: .4rem .7rem; }
  .site-header .btn--primary { padding: .5em .8em; }
  .site-header .btn--primary span { display: none; }
  .site-nav { order: 10; width: 100%; margin: 0; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
  .site-nav > ul { overflow: hidden; min-height: 0; }
  .site-nav.is-open { grid-template-rows: 1fr; }
  .site-header:has(.site-nav.is-open) .site-header__bar { background: rgba(1, 37, 10, .95); }
  .site-nav ul { flex-direction: column; gap: 0; padding: 0 .25rem; }
  .site-nav.is-open ul { padding: .5rem .25rem .75rem; }
  .site-nav li + li { border-top: 1px solid rgba(247, 241, 227, .12); }
  .site-nav a { padding: .95rem .6rem; border-radius: 0; font-family: var(--font-display); font-size: var(--step-2); }
  .site-nav a[aria-current="page"]::after { left: auto; right: .8rem; top: 50%; bottom: auto; margin: -2.5px 0 0; }
  .nav-pill { display: none; }
  .site-nav li.nav-pill + li { border-top: 0; }
}

/* ---------- Size picker (shared) ---------- */
.sizes { border: 0; margin: 1.5rem 0 0; padding: 0; }
.sizes legend { float: left; width: 100%; font-weight: 600; margin: 0 0 .6rem; padding: 0; }
.sizes__title { font-weight: 600; margin: 0 0 .35rem; }
.sizes__note { margin: 0; padding: .7rem .9rem; border: 1px dashed currentColor; border-radius: .8rem; opacity: .85; }
.sizes__list { clear: both; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.sizes input { position: absolute; opacity: 0; pointer-events: none; }
.sizes label {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .35rem .25rem;
  border-radius: 999px; border: 1.5px solid currentColor; cursor: pointer; white-space: nowrap; font-size: .95rem;
  font-weight: 500; font-variant-numeric: tabular-nums; opacity: .85;
  transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.sizes label:hover { opacity: 1; }
.sizes input:checked + label { opacity: 1; background: var(--chip-bg); border-color: var(--chip-bg); color: var(--chip-fg); }
.sizes input:focus-visible + label { outline: 3px solid var(--sprout); outline-offset: 3px; }
.price { margin: .9rem 0 1.4rem; font-weight: 600; font-size: var(--step-1); min-height: 1.6em; }

/* ---------- Process ---------- */
.section { padding: clamp(4rem, 9vw, 7rem) 0; }
.section--cream { background: var(--cream); color: var(--forest); }
.section--cream .lead { color: var(--ink-soft); }
.steps {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  counter-reset: step; border-top: 2px solid var(--forest);
}
.steps li { counter-increment: step; padding: 1.5rem 1.25rem 0 0; position: relative; }
.steps li + li { border-left: 1px solid var(--line); padding-left: 1.25rem; }
.steps li::before {
  content: counter(step); display: block;
  font-family: var(--font-display); font-size: var(--step-4); line-height: 1; color: var(--leaf); margin-bottom: .75rem;
}
.steps h3 { font-size: var(--step-2); margin-bottom: .35rem; }
.steps p { font-size: var(--step-0); color: var(--ink-soft); margin: 0; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; border-top: 0; }
  .steps li, .steps li + li { border-left: 0; border-top: 1px solid var(--line); padding: 1.25rem 0 1.25rem 4.25rem; }
  .steps li::before { position: absolute; left: 0; top: 1.1rem; }
}
.quality { margin-top: clamp(3rem, 7vw, 5rem); display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.quality h3 { font-size: var(--step-3); margin: 0; }
.quality ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.quality li + li { border-left: 1px solid var(--line); padding-left: 1.25rem; }
.quality li { padding-top: 1rem; }
.quality li { font-family: var(--font-display); font-size: var(--step-4); line-height: 1.1; color: var(--brown); }
.quality__fssai { grid-column: 1 / -1; font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
@media (max-width: 760px) {
  .quality ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality li:nth-child(3) { border-left: 0; padding-left: 0; }
  .quality li:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 1rem; }
}

/* ---------- Family ---------- */
.family { background: var(--forest); color: var(--cream); }
.family .lead { color: rgba(247, 241, 227, .82); }
.family__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: end; }
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: 3rem; max-width: 820px; }
.person { margin: 0; }
.person__photo {
  aspect-ratio: 4 / 5; border-radius: var(--radius-m); overflow: hidden; background: var(--forest-deep);
  display: grid; place-items: center;
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.person__placeholder { text-align: center; color: rgba(247, 241, 227, .7); font-size: var(--step--1); }
.person__placeholder img { width: 38%; height: auto; margin: 0 auto 1rem; opacity: .9; }
.person figcaption { margin-top: 1rem; }
.person strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); }
.person span { color: rgba(247, 241, 227, .75); }
@media (max-width: 760px) { .family__head { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .people { grid-template-columns: 1fr; max-width: 360px; } }

/* ---------- Partner band ---------- */

/* ---------- Inner pages ---------- */
.page-head { background: var(--forest); color: var(--cream); padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.page-head .lead { color: rgba(247, 241, 227, .82); }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 2rem; }
.filters span { font-weight: 600; margin-right: .5rem; }
.filters button {
  min-height: 44px; padding: .4rem 1.1rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--forest); background: transparent; color: var(--forest); font-weight: 500;
}
.filters button[aria-pressed="true"] { background: var(--forest); color: var(--cream); }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.card {
  --c: var(--forest);
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border-radius: var(--radius-m); overflow: hidden;
  border: 1px solid var(--line);
}
.card__media { background: var(--c); padding: 1.25rem 1.25rem 0; display: grid; place-items: end center; }
.card__media img { width: 72%; margin-bottom: -6%; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .3)); }
.card__body { padding: 2rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; color: var(--forest); --chip-bg: var(--forest); --chip-fg: #fff; }
.card__type { font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 .25rem; }
.card__name { font-size: var(--step-3); margin-bottom: .1em; }
.card__alt { font-family: 'Rozha One', var(--font-display); font-size: var(--step-1); color: var(--brown); margin: 0 0 .75rem; }
html[lang="hi"] .card__alt { font-family: 'Young Serif', serif; }
.card__desc { color: var(--ink-soft); margin-bottom: 0; }
.card .sizes { margin-top: auto; padding-top: 1.25rem; }
.card .btn { width: 100%; }
.card .price { color: var(--ink); }
.card[hidden] { display: none; }
.note { margin-top: 2.5rem; padding: 1.25rem 1.5rem; border-left: 4px solid var(--leaf); background: var(--cream); max-width: 70ch; }

.prose { max-width: 64ch; }
.prose p { font-size: var(--step-1); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.about-grid img { border-radius: var(--radius-m); }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.5rem; }
.contact-list h2 { font-family: var(--font-body); font-size: var(--step-0); font-weight: 600; margin: 0 0 .2rem; letter-spacing: 0; color: var(--ink-soft); }
.contact-list p, .contact-list a { font-size: clamp(1.2rem, 1rem + 1vw, 1.5625rem); font-family: var(--font-display); margin: 0; color: var(--forest); line-height: 1.3; }
.contact-list .small { font-family: var(--font-body); font-size: var(--step-0); }

.form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); padding: clamp(1.5rem, 4vw, 2.5rem); }
.form h2 { font-size: var(--step-3); }
.field { margin-bottom: 1.1rem; }
.field label, .field legend { display: block; font-weight: 600; margin-bottom: .35rem; padding: 0; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .6rem .85rem; border-radius: var(--radius-s);
  border: 1.5px solid rgba(2, 54, 14, .35); background: var(--paper);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--forest); outline: 3px solid rgba(215, 99, 6, .35); outline-offset: 0; }
.field .hint { font-size: var(--step--1); color: var(--ink-soft); margin: .3rem 0 0; }
.field .error { color: #A1160F; font-size: var(--step--1); margin: .35rem 0 0; font-weight: 500; }
.field [aria-invalid="true"] { border-color: #A1160F; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.partner-box { margin-top: 2rem; padding: 1.75rem; border-radius: var(--radius-m); background: var(--brown); color: var(--cream); }
.partner-box h2 { font-size: var(--step-3); }
.partner-box p { color: rgba(247, 241, 227, .88); }
.partner-box__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.faq { max-width: 820px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.2rem 2.5rem 1.2rem 0; position: relative;
  font-family: var(--font-display); font-size: var(--step-2); color: var(--forest); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: .5rem; top: 50%; width: 12px; height: 12px;
  border-right: 2px solid var(--forest); border-bottom: 2px solid var(--forest);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding-bottom: 1.2rem; margin: 0; color: var(--ink-soft); }

/* ---------- Splash ---------- */
.splash {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--cream);
}
.splash[hidden] { display: none; }
.splash svg { width: min(58vw, 44vh); height: auto; overflow: visible; }
.splash__skip {
  position: absolute; bottom: 1.5rem; right: 1.5rem; min-height: 44px; padding: .4rem 1rem;
  border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--forest); cursor: pointer;
}
.splash svg g, .splash svg path { transform-box: fill-box; }

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

/* ---------- Splash animation (logo parts from assets/logo/shivnath-spices-logo-animated.svg) ---------- */
html.splash-on { overflow: hidden; }
html.no-splash .splash { display: none; }
.splash { transition: transform 1s var(--ease-out), border-radius 1s var(--ease-out); }
.splash.is-leaving { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 12% 12%; }
.splash .ss-s1 path, .splash .ss-s2 path {
  fill-opacity: 0; stroke: var(--forest); stroke-width: 10;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
}
.splash.play .ss-s1 path { animation: ss-draw 1.1s var(--ease-out) forwards, ss-fill .5s ease .8s forwards; }
.splash.play .ss-s2 path { animation: ss-draw 1.1s var(--ease-out) .18s forwards, ss-fill .5s ease .98s forwards; }
.splash .ss-leaf { transform-origin: 100% 100%; transform: rotate(-38deg) scale(.4); opacity: 0; }
.splash.play .ss-leaf { animation: ss-in .8s cubic-bezier(.34, 1.56, .64, 1) 1.05s forwards; }
.splash .ss-sprout path { transform-origin: 50% 100%; transform: scale(0); }
.splash.play .ss-sprout path { animation: ss-in .55s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.splash .ss-wordmark path { opacity: 0; transform: translateY(40%); }
.splash.play .ss-wordmark path { animation: ss-in .7s var(--ease-out) forwards; }
.splash .ss-rules path { transform: scaleX(0); }
.splash.play .ss-rules path { animation: ss-in .6s var(--ease-out) 2.45s forwards; }
.splash .ss-tagline path { opacity: 0; transform: translateY(25%); }
.splash.play .ss-tagline path { animation: ss-in .5s var(--ease-out) forwards; }
@keyframes ss-draw { to { stroke-dashoffset: 0; } }
@keyframes ss-fill { to { fill-opacity: 1; stroke-width: 0; } }
@keyframes ss-in { to { transform: none; opacity: 1; } }


/* =====================================================================
   HOME – showcase carousel
   ===================================================================== */
.showcase {
  --c: #C40A0C;
  position: relative; overflow: hidden; isolation: isolate;
  min-height: max(640px, calc(100svh - var(--header-h)));
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  color: var(--cream);
  touch-action: pan-y;
}
.showcase[data-ink="dark"] { color: var(--ink); }
.showcase__bg { position: absolute; inset: 0; z-index: -3; background: rgb(244, 216, 209); } /* = tint of the first spice (red chilli), so nothing flashes before JS runs */
.showcase__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 50% 55%, rgba(255, 255, 255, .22), transparent 70%),
              radial-gradient(120% 80% at 50% 120%, rgba(0, 0, 0, .28), transparent 60%);
}
.showcase__mandala {
  position: absolute; z-index: -2; left: 50%; top: 55%;
  width: min(120vh, 110vw); max-width: none; aspect-ratio: 1; translate: -50% -50%;
  opacity: .16; animation: ss-spin 90s linear infinite;
}
.showcase[data-ink="dark"] .showcase__mandala { filter: brightness(0) saturate(100%); opacity: .1; }
@keyframes ss-spin { to { rotate: 360deg; } }
.showcase__dust { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

.showcase__top { padding-top: clamp(1.25rem, 3vw, 2rem); text-align: center; z-index: 2; }
.showcase__title {
  font-family: var(--font-body); font-weight: 500; font-size: var(--step-1); line-height: 1.35;
  letter-spacing: 0; max-width: 34ch; margin: 0 auto; opacity: .92;
}
html[lang="hi"] .showcase__title { font-family: var(--font-body); }

.showcase__name {
  position: relative; z-index: 2; margin: clamp(.25rem, 1.5vh, 1rem) auto 0; width: 100%; max-width: none;
  padding-inline: 3vw; text-align: center; white-space: nowrap;
  font-family: var(--font-display); font-size: min(9vw, 15vh, 9.5rem); line-height: 1.02;
  letter-spacing: -0.02em; pointer-events: none;
  text-shadow: 0 .04em .12em rgba(0, 0, 0, .18);
}
.showcase[data-ink="dark"] .showcase__name { text-shadow: none; }
html[lang="hi"] .showcase__name { line-height: 1.25; letter-spacing: 0; }
.showcase__name .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .03em .1em; }
.showcase__name .ch { display: inline-block; will-change: transform; }

.showcase__stage { position: relative; z-index: 1; perspective: 1200px; min-height: 260px; }
.showcase__pack {
  position: absolute; left: 50%; top: 50%;
  --pw: clamp(150px, min(22vw, 27vh), 300px);
  width: var(--pw); margin-left: calc(var(--pw) / -2);
  transform-style: preserve-3d; will-change: transform, opacity;
  cursor: pointer;
}
.showcase__pack img { width: 100%; filter: drop-shadow(0 40px 45px rgba(0, 0, 0, .38)); pointer-events: none; user-select: none; -webkit-user-drag: none; }

.showcase__bottom {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 1.5rem;
  padding-bottom: clamp(1.25rem, 3vw, 2.25rem);
}
.showcase__info p { margin: 0; }
.showcase__info { display: contents; }
.showcase__alt { grid-column: 1; grid-row: 1; align-self: end; }
.showcase__desc { grid-column: 1; grid-row: 2; }
.showcase__actions { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.showcase__count { grid-column: 3; grid-row: 1 / 3; justify-self: end; align-self: center; }
@media (min-width: 861px) { .showcase__bottom { row-gap: .3rem; } }
.showcase__count { font-size: var(--step--1); font-weight: 500; opacity: .85; font-variant-numeric: tabular-nums; }
.showcase__alt { font-family: "Rozha One", var(--font-display); font-size: var(--step-3); line-height: 1.25; }
html[lang="hi"] .showcase__alt { font-family: "Young Serif", serif; }
.showcase__desc { max-width: 34ch; opacity: .9; }
.showcase__actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.showcase[data-ink="dark"] .btn--primary { background: var(--forest); }
.showcase[data-ink="dark"] .btn--primary:hover { background: var(--forest-deep); }

@media (max-width: 860px) {
  .showcase__name { font-size: clamp(2.4rem, 11vw, 4.5rem); white-space: normal; padding-inline: 1rem; }
  .showcase__pack { --pw: clamp(150px, min(44vw, 30vh), 240px); }
  .showcase__bottom { grid-template-columns: 1fr; grid-template-rows: none; text-align: center; gap: 1rem; }
  .showcase__info { display: block; }
  .showcase__actions { grid-column: auto; grid-row: auto; }
  .showcase__actions .btn { flex: 1 1 0; min-width: min(100%, 15rem); }
  .showcase__desc { margin-inline: auto !important; }
}

/* ---------- Ticker ---------- */
.ticker { background: var(--forest-deep); color: var(--cream); overflow: hidden; border-block: 1px solid var(--line-light); }
.ticker__track { display: flex; width: max-content; animation: ss-ticker 48s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { display: inline-flex; align-items: center; gap: 1.25rem; padding: 1.05rem 1.25rem; white-space: nowrap; font-family: var(--font-display); font-size: var(--step-2); line-height: 1.2; }
.ticker__item[lang="hi"] { font-family: "Rozha One", serif; }
.ticker__dot { width: .6em; height: .6em; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 2px rgba(247, 241, 227, .5); flex: none; }
@keyframes ss-ticker { to { transform: translateX(-50%); } }

/* card upgrade: mandala + lift */
.card__media { position: relative; overflow: hidden; isolation: isolate; }
.card__media::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 55%; width: 150%; aspect-ratio: 1;
  translate: -50% -50%; background: url("../assets/ui/mandala.svg") center / contain no-repeat;
  opacity: .2; transition: rotate 1.2s var(--ease-out);
}
.card__media::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(60% 60% at 50% 60%, rgba(255, 255, 255, .22), transparent 70%);
}
.card__media img { transition: transform .5s var(--ease-out); }
.card:hover .card__media img, .card:focus-within .card__media img { transform: translateY(-8px) rotate(-2deg) scale(1.03); }
.card:hover .card__media::before { rotate: 45deg; }
.card { box-shadow: 0 1px 0 rgba(2, 54, 14, .06), 0 18px 40px -24px rgba(2, 54, 14, .35); }

/* ---------- Process scrub ---------- */
.steps__progress { height: 3px; background: var(--line); margin-top: 3rem; border-radius: 3px; overflow: hidden; display: none; }
.steps__progress span { display: block; height: 100%; background: var(--leaf); transform-origin: 0 50%; }
.process.is-scrub .steps__progress { display: block; }
.process.is-scrub .steps { margin-top: 0; border-top: 0; }

/* ---------- Quality words fill ---------- */
.quality li.fill {
  background: linear-gradient(90deg, var(--brown) 0 50%, rgba(133, 66, 4, .18) 50% 100%);
  background-size: 200% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Floating WhatsApp button ---------- */
.fab {
  position: fixed; right: clamp(1rem, 2.5vw, 1.75rem); bottom: clamp(1rem, 2.5vw, 1.75rem); z-index: 60;
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 6px 1.25rem 6px 6px; border-radius: 999px;
  background: var(--forest); color: var(--cream); text-decoration: none;
  font-weight: 600; font-size: .95rem; letter-spacing: .01em; white-space: nowrap;
  border: 1px solid rgba(247, 241, 227, .14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 14px 34px -12px rgba(1, 37, 10, .55), 0 4px 10px -4px rgba(1, 37, 10, .3);
  transition: transform .3s var(--ease-out), background-color .2s ease, box-shadow .3s var(--ease-out), opacity .4s ease;
}
/* icon sits in its own WhatsApp-green disc */
.fab svg {
  position: relative; flex: none; width: 46px; height: 46px; padding: 11px; border-radius: 50%;
  background: #25D366; color: #fff; box-sizing: border-box;
  transition: transform .4s var(--ease-out);
}
/* soft "we're online" ring around the icon */
.fab::before {
  content: ""; position: absolute; left: 6px; top: 50%; width: 46px; height: 46px; margin-top: -23px;
  border-radius: 50%; box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
  animation: fab-ring 2.8s ease-out infinite; pointer-events: none;
}
@keyframes fab-ring {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
  70%, 100% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
}
.fab:hover { transform: translateY(-3px); background: var(--forest-deep); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 20px 40px -12px rgba(1, 37, 10, .6), 0 6px 14px -4px rgba(1, 37, 10, .35); }
.fab:hover svg { transform: rotate(-12deg) scale(1.05); }
.fab:active { transform: translateY(-1px) scale(.98); }
.fab:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }
html.splash-on .fab { opacity: 0; transform: translateY(12px); }

/* mobile: icon only, so it never covers content */
@media (max-width: 640px) {
  .fab { padding: 6px; }
  .fab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fab svg { width: 52px; height: 52px; padding: 13px; }
  .fab::before { width: 52px; height: 52px; margin-top: -26px; }
}
@media (prefers-reduced-motion: reduce) {
  .fab::before { animation: none; }
  .fab, .fab svg { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase__mandala, .ticker__track { animation: none; }
}

/* =====================================================================
   Rail – spice posters on a moving shelf
   ===================================================================== */
.rail {
  --rail-c: #C40A0C;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--paper); padding-top: clamp(4rem, 8vw, 6rem);
}
.rail__track > li, .card { position: relative; }
.rail__glow {
  position: absolute; z-index: -1; left: -12vw; top: 50%; width: 60vw; aspect-ratio: 1; translate: 0 -50%;
  border-radius: 50%; background: #C40A0C; opacity: .14; filter: blur(90px); pointer-events: none;
}
.rail__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: end; margin-bottom: 2.5rem; color: var(--forest); }
.rail__head h2 { margin: 0; max-width: 12ch; font-size: var(--step-4); line-height: 1.05; }
.rail__head .lead { margin: 0; max-width: 34ch; }
.rail__intro { display: grid; gap: 1.25rem; justify-items: start; }
.rail__meter { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .5rem 1rem; width: min(100%, 320px); }
.rail__now { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15; overflow: hidden; }
.rail__now > span { display: inline-block; }
.rail__now { padding: 6px; margin: -6px; } /* room for the swatch ring inside the clip */
.rail__swatch { width: .7em; height: .7em; border-radius: 50%; background: var(--rail-c); flex: none; transition: background-color .5s ease; box-shadow: 0 0 0 4px color-mix(in srgb, var(--rail-c) 22%, transparent); }
.rail__count { font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rail__bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rail__bar i { display: block; height: 100%; background: var(--rail-c); transform-origin: 0 50%; transform: scaleX(0); transition: background-color .5s ease; }
.rail:not(.is-pinned) .rail__meter { display: none; }
.btn--ghost-dark { border-color: var(--forest); color: var(--forest); }
.btn--ghost-dark:hover { background: var(--forest); color: var(--cream); }

.rail__viewport { position: relative; padding-bottom: clamp(4rem, 8vw, 6rem); }
.rail__ghost {
  position: absolute; z-index: -1; left: 0; top: 50%; translate: 0 -50%; margin: 0; max-width: none;
  display: flex; gap: .4em; white-space: nowrap; pointer-events: none;
  font-family: var(--font-display); font-size: clamp(6rem, 17vw, 16rem); line-height: 1; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(2, 54, 14, .1);
}
.rail:not(.is-pinned) .rail__ghost { display: none; }
.rail__track {
  display: flex; gap: 1.5rem; list-style: none; margin: 0;
  padding: .5rem max(var(--gutter), calc((100vw - var(--wrap)) / 2)) 1.5rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > li { flex: 0 0 clamp(270px, 78vw, 330px); scroll-snap-align: center; }

.rail.is-pinned {
  display: grid; grid-template-columns: calc(max(var(--gutter), (100vw - var(--wrap)) / 2) + 360px) minmax(0, 1fr); align-items: center;
  height: 100vh; padding: var(--header-h) 0 0;
}
.rail.is-pinned .rail__head {
  width: auto; margin: 0; align-self: stretch; position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; gap: 1.75rem;
  padding: 2rem 3rem 2rem max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  background: var(--paper);
}
.rail.is-pinned .rail__head::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 90px; pointer-events: none;
  background: linear-gradient(90deg, var(--paper), rgba(252, 249, 241, 0));
}
.rail.is-pinned .rail__viewport { padding: 0; overflow: visible; align-self: stretch; display: flex; align-items: center; }
.rail.is-pinned .rail__track { overflow: visible; scroll-snap-type: none; will-change: transform; width: max-content; padding: 4.5rem calc(50% - 150px) 1.5rem; }
.rail.is-pinned .rail__track > li { flex-basis: 300px; }
.rail.is-pinned .card__desc { display: none; }
@media (max-width: 760px) { .rail__head { grid-template-columns: 1fr; } }

/* poster cards (rail only) */
.rail .card {
  background: var(--c); color: var(--cream); border: 0; border-radius: 26px; overflow: hidden;
  box-shadow: 0 34px 60px -34px color-mix(in srgb, var(--c) 70%, #000), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.rail .card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .18), transparent 38%, rgba(0, 0, 0, .22));
}
.rail .card[data-ink="dark"] { color: var(--ink); }
.rail .card__media { background: transparent; padding: 1.25rem 1.25rem 0; }
.rail .card__media::before { opacity: .22; top: 60%; }
.rail .card[data-ink="dark"] .card__media::before { filter: brightness(0); opacity: .1; }
.rail .card__media img { width: 58%; margin-bottom: -4%; filter: drop-shadow(0 24px 22px rgba(0, 0, 0, .4)); }
.rail .card__body { position: relative; z-index: 1; color: inherit; padding: 1.25rem 1.4rem 1.4rem; --chip-bg: var(--cream); --chip-fg: var(--c); }
.rail .card[data-ink="dark"] .card__body { --chip-bg: var(--forest); --chip-fg: var(--cream); }
.rail .card__type {
  align-self: flex-start; color: inherit; opacity: .9; margin-bottom: .6rem;
  padding: .1rem .7rem; border-radius: 999px; border: 1px solid currentColor; font-weight: 500;
}
.rail .card__name { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.05; }
.rail .card__alt { color: inherit; opacity: .8; margin-bottom: .25rem; }
.rail .card__desc { color: inherit; opacity: .85; }
.rail .sizes { padding-top: 1rem; }
.rail .sizes legend { font-size: var(--step--1); opacity: .85; }
.rail .sizes label { min-height: 40px; padding: .2rem .2rem; font-size: .9rem; border-color: color-mix(in srgb, currentColor 55%, transparent); }
.rail .card .price { color: inherit; margin: .8rem 0 1rem; }
.rail .card .btn--primary { background: var(--cream); color: var(--forest); }
.rail .card .btn--primary:hover { background: #fff; }
.rail .card[data-ink="dark"] .btn--primary { background: var(--forest); color: var(--cream); }

/* =====================================================================
   Closer – partner call with fanned packs
   ===================================================================== */
.closer {
  position: relative; isolation: isolate; overflow: hidden; color: var(--cream);
  background:
    radial-gradient(70% 90% at 85% 50%, rgba(215, 99, 6, .55), transparent 65%),
    radial-gradient(60% 80% at 0% 100%, rgba(2, 54, 14, .55), transparent 70%),
    var(--brown);
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
}
.closer__mandala {
  position: absolute; z-index: -1; right: -18vw; top: 50%; width: min(95vw, 1100px); max-width: none; aspect-ratio: 1;
  translate: 0 -50%; opacity: .14; pointer-events: none;
}
.closer__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.closer h2 { font-size: var(--step-5); line-height: 1.02; max-width: 11ch; margin-bottom: .35em; }
.closer__lead { font-size: var(--step-1); color: rgba(247, 241, 227, .88); max-width: 38ch; margin: 0 0 1.75rem; }
.closer__facts { list-style: none; margin: 0 0 2.25rem; padding: 0; display: grid; max-width: 30rem; }
.closer__facts li {
  display: flex; align-items: center; gap: .85rem; padding: .8rem 0;
  border-bottom: 1px solid rgba(247, 241, 227, .22); font-size: var(--step-1); font-weight: 500;
}
.closer__facts li::before {
  content: ""; width: .7rem; height: .7rem; flex: none; border-radius: 50%;
  background: var(--sprout); box-shadow: 0 0 0 4px rgba(247, 241, 227, .18);
}
.closer__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.closer__actions .btn svg { width: 20px; height: 20px; }
.closer__fan { position: relative; height: clamp(300px, 36vw, 460px); }
.closer__fan img {
  position: absolute; left: 50%; bottom: 0; width: clamp(140px, 15vw, 210px); margin-left: calc(clamp(140px, 15vw, 210px) / -2);
  transform-origin: 50% 100%; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .4));
}
.closer__fan img:nth-child(3) { z-index: 3; }
.closer__fan img:nth-child(2), .closer__fan img:nth-child(4) { z-index: 2; }
@media (max-width: 860px) {
  .closer__inner { grid-template-columns: 1fr; }
  .closer__fan { order: -1; height: 260px; }
}
/* reduced motion: show the fan without the scroll animation */
@media (prefers-reduced-motion: reduce) {
  .closer__fan img:nth-child(1) { rotate: -18deg; translate: -40% 30px; }
  .closer__fan img:nth-child(2) { rotate: -9deg; translate: -20% 10px; }
  .closer__fan img:nth-child(4) { rotate: 9deg; translate: 20% 10px; }
  .closer__fan img:nth-child(5) { rotate: 18deg; translate: 40% 30px; }
}

/* rail spotlight shelf */
.rail .card {
  overflow: visible;
  background: url("../assets/ui/mandala.svg") 50% 18% / 125% auto no-repeat, var(--c);
}
.rail .card[data-ink="dark"] { background-image: none; }
.rail .card__media { overflow: visible; }
.rail .card__media::before, .rail .card__media::after { display: none; }
.rail .card__media img { position: relative; z-index: 2; transform-origin: 50% 90%; }
.rail .card .btn { white-space: nowrap; font-size: .95rem; padding-inline: 1rem; gap: .5rem; }
.rail.is-pinned .card { transition: box-shadow .4s ease; }
.rail.is-pinned .card.is-active { box-shadow: 0 50px 80px -40px color-mix(in srgb, var(--c) 85%, #000), inset 0 0 0 1px rgba(255, 255, 255, .2); }
.rail__meter { grid-template-columns: 1fr; }
.rail__count { order: -1; }
.rail__now { font-size: var(--step-1); min-height: 2.6em; align-items: flex-start; }
.rail__swatch { margin-top: .35em; }
.rail .card, .rail .card[data-ink="dark"] { background: var(--c); }
.rail .card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: url("../assets/ui/mandala.svg") 50% 16% / 120% auto no-repeat; opacity: .16;
  -webkit-mask-image: linear-gradient(#000 35%, transparent 62%); mask-image: linear-gradient(#000 35%, transparent 62%);
}
.rail .card[data-ink="dark"]::before { filter: brightness(0); opacity: .1; }
.rail .card__media { position: relative; z-index: 1; }
.process.is-scrub { padding-top: calc(var(--header-h) + clamp(2.5rem, 5vw, 4rem)); }

/* ---------- Home family section: light and warm ---------- */
.family--home {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(55% 70% at 88% 40%, rgba(122, 150, 53, .22), transparent 70%),
    radial-gradient(40% 60% at 0% 100%, rgba(215, 99, 6, .12), transparent 70%),
    var(--cream);
  color: var(--forest);
}
.family__mandala {
  position: absolute; z-index: -1; right: -14vw; top: 50%; width: min(80vw, 900px); max-width: none; aspect-ratio: 1;
  translate: 0 -50%; filter: brightness(0); opacity: .05; pointer-events: none;
}
.family--home .lead { color: var(--ink-soft); margin: 0 0 1.75rem; max-width: 36ch; }
.family__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.family--home .family__head { display: block; }
.family--home h2 { font-size: var(--step-5); line-height: 1.02; max-width: 10ch; margin-bottom: .4em; }
.family--home .people { margin: 0; max-width: none; gap: clamp(1.5rem, 3vw, 2.5rem); padding-right: 14px; }
.family--home .person__photo {
  position: relative; border-radius: 24px; background: var(--leaf);
  box-shadow: 14px 14px 0 0 var(--c, var(--sprout)), 0 30px 50px -30px rgba(2, 54, 14, .5);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.family--home .person:nth-child(1) .person__photo { --c: var(--leaf-soft); }
.family--home .person:nth-child(2) .person__photo { --c: var(--sprout); }
.family--home .person:hover .person__photo { transform: translate(-4px, -6px) rotate(-1deg); box-shadow: 20px 22px 0 0 var(--c), 0 40px 60px -30px rgba(2, 54, 14, .55); }
.family--home .person__placeholder { color: rgba(247, 241, 227, .92); }
.family--home .person figcaption { margin-top: 1.5rem; }
.family--home .person strong { color: var(--forest); }
.family--home .person figcaption span { color: var(--brown); font-weight: 500; }
@media (max-width: 860px) {
  .family__grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .family--home .people { grid-template-columns: 1fr 1fr; }
  .family--home .person strong { font-size: 1.05rem; }
  .family--home .person figcaption span { font-size: var(--step--1); }
}


/* =====================================================================
   Light theme pass: dark green / brown only for text, buttons and accents
   ===================================================================== */
:root {
  --leaf-wash: #EEF1DE;
  --turmeric-wash: #FCEFD3;
}

/* header: light frosted bar */
.site-header { color: var(--forest); }
.site-header__bar {
  background: rgba(252, 249, 241, .9);
  border-color: rgba(2, 54, 14, .1);
  box-shadow: 0 10px 30px -16px rgba(2, 54, 14, .35);
}
.site-header.is-scrolled .site-header__bar { background: rgba(252, 249, 241, .96); box-shadow: 0 16px 36px -18px rgba(2, 54, 14, .4); }
.site-nav a { color: var(--forest); }
.nav-pill { background: rgba(2, 54, 14, .08); }
.lang-toggle, .menu-toggle { color: var(--forest); border-color: rgba(2, 54, 14, .22); }
.lang-toggle:hover { background: rgba(2, 54, 14, .06); border-color: var(--forest); }
@media (max-width: 960px) {
  .site-header:has(.site-nav.is-open) .site-header__bar { background: rgba(252, 249, 241, .97); }
  .site-nav li + li { border-top-color: rgba(2, 54, 14, .1); }
}

/* ticker: light leaf band */
.ticker { background: var(--leaf-wash); color: var(--forest); border-block: 1px solid rgba(2, 54, 14, .1); }
.ticker__dot { box-shadow: 0 0 0 3px rgba(255, 255, 255, .8); }

/* inner page headers */
.page-head {
  position: relative; isolation: isolate; overflow: hidden; color: var(--forest);
  background:
    radial-gradient(50% 90% at 92% 30%, rgba(122, 150, 53, .25), transparent 70%),
    radial-gradient(35% 70% at 0% 100%, rgba(215, 99, 6, .12), transparent 70%),
    var(--cream);
}
.page-head::after {
  content: ""; position: absolute; z-index: -1; right: -10vw; top: 50%; width: min(70vw, 760px); aspect-ratio: 1; translate: 0 -50%;
  background: url("../assets/ui/mandala.svg") center / contain no-repeat; filter: brightness(0); opacity: .05;
}
.page-head .lead { color: var(--ink-soft); }

/* family (about page) */
.family { background: var(--leaf-wash); color: var(--forest); }
.family .lead { color: var(--ink-soft); }
.family .btn--ghost { color: var(--forest); border-color: var(--forest); }
.family .btn--ghost:hover { background: var(--forest); color: var(--cream); }
.person__photo { background: var(--leaf); }
.person strong { color: var(--forest); }
.person figcaption span { color: var(--brown); }

/* partner closer: warm turmeric wash */
.closer {
  color: var(--forest);
  background:
    radial-gradient(60% 90% at 85% 50%, rgba(244, 166, 8, .38), transparent 68%),
    radial-gradient(50% 80% at 0% 100%, rgba(122, 150, 53, .2), transparent 70%),
    var(--turmeric-wash);
}
.closer__mandala { filter: brightness(0); opacity: .06; }
.closer__lead { color: var(--ink-soft); }
.closer__facts li { border-bottom-color: rgba(2, 54, 14, .14); }
.closer__facts li::before { box-shadow: 0 0 0 4px rgba(215, 99, 6, .18); }
.closer__fan img { filter: drop-shadow(0 28px 26px rgba(90, 50, 0, .32)); }

/* contact page partner box */
.partner-box { background: var(--turmeric-wash); color: var(--forest); border: 1px solid rgba(176, 75, 0, .18); }
.partner-box p { color: var(--ink-soft); }

/* rail: glow sits behind the shelf, left panel covers the full height */
.rail.is-pinned { padding: 0; }
.rail.is-pinned .rail__head { padding-top: calc(var(--header-h) + 2rem); }
.rail.is-pinned .rail__viewport { padding-top: var(--header-h); }
.rail.is-pinned .rail__glow {
  left: auto; right: 0; top: calc(50% + var(--header-h) / 2);
  width: min(62vw, 980px); translate: 15% -50%; opacity: .16; filter: blur(110px);
}
.rail.is-pinned .rail__head::after { width: 160px; background: linear-gradient(90deg, var(--paper) 10%, rgba(252, 249, 241, .6) 50%, rgba(252, 249, 241, 0)); }


/* =====================================================================
   Hero polish: depth, grounding, calmer type and controls
   ===================================================================== */
.showcase__bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.showcase__bg::after {
  background:
    radial-gradient(34% 42% at 50% 60%, rgba(255, 255, 255, .26), transparent 70%),
    radial-gradient(130% 95% at 50% 45%, transparent 52%, rgba(0, 0, 0, .34) 100%),
    linear-gradient(to top, rgba(0, 0, 0, .22), transparent 32%);
}
.showcase[data-ink="dark"] .showcase__bg::after {
  background:
    radial-gradient(34% 42% at 50% 60%, rgba(255, 255, 255, .34), transparent 70%),
    radial-gradient(130% 95% at 50% 45%, transparent 55%, rgba(90, 40, 0, .3) 100%);
}
/* mandala becomes a halo ring behind the front pack */
.showcase__mandala { width: min(86vh, 74vw); top: 60%; opacity: .11; }
.showcase[data-ink="dark"] .showcase__mandala { opacity: .08; }

/* name: tonal, no drop shadow */
.showcase__name { text-shadow: none; letter-spacing: -0.03em; }
.showcase__name .ch {
  background: linear-gradient(180deg, rgba(255, 250, 240, .97) 30%, rgba(255, 250, 240, .6) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  padding-bottom: .06em;
}
.showcase[data-ink="dark"] .showcase__name .ch { background-image: linear-gradient(180deg, rgba(45, 24, 0, .92) 30%, rgba(45, 24, 0, .55) 100%); }

/* packs: grounded with a soft contact shadow, the front one floats gently */
.showcase__pack img { filter: drop-shadow(0 26px 24px rgba(0, 0, 0, .3)); }
.showcase__pack::after {
  content: ""; position: absolute; left: 50%; bottom: -5%; width: 74%; height: 7%; translate: -50% 0;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .42), transparent); filter: blur(4px);
  z-index: -1; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .showcase__pack.is-front img { animation: ss-float 5.5s ease-in-out infinite; }
  .showcase__pack.is-front::after { animation: ss-float-shadow 5.5s ease-in-out infinite; }
}
@keyframes ss-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes ss-float-shadow { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .9; opacity: .75; } }
/* loose spices (open sack) are squatter than the packs: grow them from the base so they carry the same weight */
.showcase__pack.is-loose img { scale: 1.18; transform-origin: 50% 100%; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .22)); }
.showcase__pack.is-loose::after { width: 90%; bottom: -3%; }

/* bottom row: a clean strip */
.showcase__bottom {
  border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 1.1rem; margin-top: .5rem;
  align-items: center;
}
.showcase[data-ink="dark"] .showcase__bottom { border-top-color: rgba(45, 24, 0, .18); }
.showcase__count { display: inline-flex; align-items: center; gap: .6rem; letter-spacing: .02em; }
.showcase__count::before { content: ""; width: 1.5rem; height: 1.5px; background: currentColor; opacity: .7; }
.showcase__alt { font-size: var(--step-2); line-height: 1.2; margin: .25rem 0 .15rem !important; }
.showcase__desc { font-size: var(--step--1); line-height: 1.5; opacity: .85; }
.showcase .btn { min-height: 48px; }
.showcase .btn--primary { background: var(--cream); color: var(--forest); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
.showcase .btn--primary:hover { background: #fff; }
.showcase[data-ink="dark"] .btn--primary { background: var(--forest); color: var(--cream); }
.showcase[data-ink="dark"] .btn--primary:hover { background: var(--forest-deep); }
.showcase .btn--ghost { border: 1.5px solid rgba(255, 255, 255, .55); }
.showcase .btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: currentColor; }
.showcase[data-ink="dark"] .btn--ghost { border-color: rgba(45, 24, 0, .45); }
.showcase__mandala {
  --mw: min(86vh, 74vw);
  width: var(--mw); translate: none; margin: calc(var(--mw) / -2) 0 0 calc(var(--mw) / -2);
}

/* light hero: a soft wash of the pack colour, dark text (like a printed label) */
.showcase { color: var(--forest); }
.showcase__bg::before { opacity: .05; mix-blend-mode: multiply; }
.showcase__bg::after,
.showcase[data-ink="dark"] .showcase__bg::after {
  background:
    radial-gradient(38% 46% at 50% 60%, rgba(255, 255, 255, .65), transparent 70%),
    radial-gradient(140% 100% at 50% 45%, transparent 60%, rgba(60, 40, 0, .06) 100%);
}
.showcase__mandala, .showcase[data-ink="dark"] .showcase__mandala { filter: brightness(0); opacity: .05; }
.showcase__name .ch, .showcase[data-ink="dark"] .showcase__name .ch {
  background: none; color: var(--tone, var(--forest)); -webkit-text-fill-color: var(--tone, var(--forest));
  transition: color .6s ease, -webkit-text-fill-color .6s ease;
}
.showcase__title, .showcase__desc { color: var(--ink-soft); opacity: 1; }
.showcase__alt { color: var(--tone, var(--forest)); }
.showcase__pack img { filter: drop-shadow(0 24px 22px rgba(60, 35, 0, .22)); }
.showcase__pack::after { background: radial-gradient(closest-side, rgba(60, 35, 0, .28), transparent); }
.showcase__bottom, .showcase[data-ink="dark"] .showcase__bottom { border-top-color: rgba(2, 54, 14, .12); }
.showcase .btn--ghost, .showcase[data-ink="dark"] .btn--ghost { border-color: rgba(2, 54, 14, .35); color: var(--forest); }
.showcase .btn--ghost:hover { background: rgba(2, 54, 14, .06); border-color: var(--forest); }



/* =====================================================================
   Home – numbers + how to order (light bento between family and partner)
   ===================================================================== */
.numbers {
  position: relative; isolation: isolate; overflow: hidden; color: var(--forest);
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  background:
    radial-gradient(40% 60% at 95% 0%, rgba(244, 166, 8, .18), transparent 70%),
    linear-gradient(170deg, #EDF1DA 0%, #DFE7C2 100%);
}
.numbers__mandala {
  position: absolute; z-index: -1; left: -14rem; bottom: -18rem; width: 40rem; opacity: .05;
  filter: brightness(0); pointer-events: none;
}
.numbers .wrap {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem);
  grid-template-areas: "head stats" "steps steps"; align-items: center;
}

/* left: heading */
.numbers__head { grid-area: head; display: block; margin: 0; }
.numbers__eyebrow {
  margin: 0 0 .8rem; font-size: var(--step--1); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brown);
}
.numbers h2 { font-size: var(--step-4); line-height: 1.04; max-width: 13ch; margin: 0 0 .5em; color: var(--forest); }
.numbers__lead { margin: 0 0 1.75rem; max-width: 36ch; color: var(--ink-soft); font-size: var(--step-1); }

/* right: 2 x 2 number tiles */
.numbers__stats {
  grid-area: stats; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.1rem);
}
.numbers__stats li {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: .75rem;
  min-height: clamp(150px, 14vw, 190px); padding: clamp(1.2rem, 2.2vw, 1.6rem);
  border-radius: 24px; background: #fff; border: 1px solid rgba(2, 54, 14, .08);
  box-shadow: 0 22px 44px -32px rgba(2, 54, 14, .5);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.numbers__stats li:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 30px 54px -30px rgba(2, 54, 14, .55); }
.numbers__stats li:nth-child(1) { background: var(--forest); color: var(--cream); border-color: transparent; }
.numbers__stats li:nth-child(4) { background: var(--sprout); color: #fff; border-color: transparent; }
.numbers__stats li:nth-child(2), .numbers__stats li:nth-child(3) { margin-top: 0; }
.numbers__stats li::after { /* soft ring decoration */
  content: ""; position: absolute; right: -34px; top: -34px; width: 110px; height: 110px; border-radius: 50%;
  border: 16px solid currentColor; opacity: .06; pointer-events: none;
}
.numbers__stats strong {
  font-family: var(--font-display); font-weight: 400; line-height: .9; color: inherit;
  font-size: clamp(2.8rem, 1.6rem + 3.6vw, 4.75rem); font-variant-numeric: lining-nums tabular-nums;
}
.numbers__stats li:nth-child(2) strong, .numbers__stats li:nth-child(3) strong { color: var(--forest); }
.numbers__stats strong small { font-size: .5em; vertical-align: .6em; margin-right: .05em; color: inherit; opacity: .85; }
.numbers__stats li > span { font-size: var(--step--1); font-weight: 500; line-height: 1.45; max-width: 20ch; color: var(--ink-soft); }
.numbers__stats li:nth-child(1) > span { color: rgba(247, 241, 227, .8); }
.numbers__stats li:nth-child(4) > span { color: rgba(255, 255, 255, .9); }

/* bottom: the three order steps */
.numbers__steps {
  grid-area: steps; list-style: none; margin: clamp(1rem, 2vw, 1.5rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.1rem);
}
.numbers__steps li {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 1rem; align-items: start; align-content: start;
  padding: 1.25rem 1.35rem; border-radius: 20px;
  background: rgba(255, 255, 255, .6); border: 1px dashed rgba(2, 54, 14, .2);
  transition: background-color .3s ease, border-color .3s ease, transform .4s var(--ease-out);
}
.numbers__steps li:hover { background: #fff; border-style: solid; border-color: rgba(215, 99, 6, .4); transform: translateY(-3px); }
.numbers__steps li::after { display: none; }
.numbers__n {
  grid-row: span 2; display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0; border-radius: 12px;
  background: var(--forest); color: var(--cream); font-weight: 700; font-size: .8rem; letter-spacing: .04em;
  transition: background-color .3s ease, transform .4s var(--ease-out);
}
.numbers__steps li:hover .numbers__n { background: var(--sprout); transform: rotate(-8deg); }
.numbers__steps h3 { font-size: var(--step-1); color: var(--forest); margin: .1rem 0 .25rem; }
.numbers__steps p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; }

@media (max-width: 960px) {
  .numbers .wrap { grid-template-columns: 1fr; grid-template-areas: "head" "stats" "steps"; }
  .numbers__steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .numbers__stats li, .numbers__steps li, .numbers__n { transition: none; }
  .numbers__stats li:hover, .numbers__steps li:hover { transform: none; }
}

/* =====================================================================
   Contact page
   ===================================================================== */
.eyebrow {
  margin: 0 0 .8rem; font-size: var(--step--1); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sprout);
}

/* hero: copy left, a small fan of packs right */
.contact-head { padding-bottom: clamp(7rem, 12vw, 9rem) !important; }
.contact-head__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 2rem; }
.contact-head h1 { font-size: var(--step-5); line-height: 1; margin: 0 0 .35em; }
.contact-head .lead { max-width: 34ch; margin: 0 0 2rem; }
.contact-head__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.contact-head__packs { position: relative; height: clamp(260px, 30vw, 380px); }
.contact-head__packs img {
  position: absolute; left: 50%; bottom: 0; width: clamp(130px, 14vw, 190px); height: auto;
  filter: drop-shadow(0 26px 24px rgba(40, 30, 0, .28));
  transition: transform .6s var(--ease-out);
}
.contact-head__packs img:nth-child(1) { transform: translateX(-125%) rotate(-11deg) scale(.86); }
.contact-head__packs img:nth-child(2) { transform: translateX(-50%) translateY(-14px); z-index: 2; }
.contact-head__packs img:nth-child(3) { transform: translateX(25%) rotate(11deg) scale(.86); }
.contact-head__packs:hover img:nth-child(1) { transform: translateX(-140%) rotate(-15deg) scale(.86); }
.contact-head__packs:hover img:nth-child(2) { transform: translateX(-50%) translateY(-26px); }
.contact-head__packs:hover img:nth-child(3) { transform: translateX(40%) rotate(15deg) scale(.86); }

/* three quick-contact cards overlapping the hero */
.contact-cards { position: relative; z-index: 2; margin-top: clamp(-5.5rem, -8vw, -4rem); }
.contact-cards__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 1.5rem); }
.ccard {
  position: relative; display: flex; flex-direction: column; gap: .35rem;
  padding: 1.6rem 1.6rem 1.5rem; border-radius: 22px; background: #fff; color: var(--forest);
  border: 1px solid var(--line); box-shadow: 0 24px 50px -30px rgba(2, 54, 14, .35);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.ccard:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -28px rgba(2, 54, 14, .45); }
.ccard__icon {
  display: inline-grid; place-items: center; width: 50px; height: 50px; margin-bottom: .9rem; border-radius: 15px;
  background: var(--leaf-wash); color: var(--forest);
}
.ccard__icon svg { width: 24px; height: 24px; }
.ccard h2 { font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.ccard__value { font-family: var(--font-display); font-size: var(--step-2); color: var(--forest); text-decoration: none; line-height: 1.25; overflow-wrap: anywhere; }
.ccard__value--sm { font-size: var(--step-1); }
.ccard__value::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole card is the link */
.ccard p { margin: .25rem 0 0; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; }
.ccard .ccard__addr { font-family: var(--font-display); font-size: var(--step-1); color: var(--forest); line-height: 1.35; }
.ccard__link { margin-top: auto; padding-top: .75rem; font-weight: 600; color: var(--saffron); }
.ccard__go {
  position: absolute; top: 1.6rem; right: 1.6rem; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); font-size: 1.1rem; transition: transform .3s var(--ease-out), background-color .3s ease;
}
.ccard:hover .ccard__go { transform: rotate(-45deg); background: var(--leaf-wash); }
.ccard--wa { background: var(--forest); color: var(--cream); border-color: transparent; }
.ccard--wa .ccard__icon { background: #25D366; color: #fff; }
.ccard--wa h2 { color: #D4A85A; }
.ccard--wa .ccard__value { color: var(--cream); }
.ccard--wa p { color: rgba(247, 241, 227, .75); }
.ccard--wa .ccard__go { border-color: rgba(247, 241, 227, .25); color: var(--cream); }
.ccard--wa:hover .ccard__go { background: rgba(247, 241, 227, .12); }
.ccard a:focus-visible { outline: none; }
.ccard:has(a:focus-visible) { outline: 3px solid var(--saffron); outline-offset: 3px; }

/* form + aside */
.contact-main { padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.contact-main .contact-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
.contact-main .form {
  border-radius: 26px; border: 1px solid var(--line); padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: 0 30px 60px -40px rgba(2, 54, 14, .35);
}
.contact-main .form h2 { font-size: var(--step-4); line-height: 1.05; margin: 0 0 .35em; }
.form__lead { color: var(--ink-soft); margin: 0 0 2rem; }
.contact-main .field input, .contact-main .field textarea {
  border-radius: 12px; background: var(--paper); border: 1.5px solid transparent; box-shadow: inset 0 0 0 1px var(--line);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.contact-main .field input:hover, .contact-main .field textarea:hover { box-shadow: inset 0 0 0 1px rgba(2, 54, 14, .32); }
.contact-main .field input:focus, .contact-main .field textarea:focus {
  background: #fff; border-color: var(--forest); box-shadow: 0 0 0 4px rgba(122, 150, 53, .2); outline: none;
}
.contact-main .field textarea { min-height: 140px; }
.contact-main .field [aria-invalid="true"] { border-color: #A1160F; }
.form__send { width: 100%; justify-content: center; min-height: 56px; margin-top: .5rem; font-size: var(--step-1); }

/* "I am a" as pills */
.choice { border: 0; margin: 0 0 1.5rem; padding: 0; min-width: 0; }
.choice__list { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; }
.choice input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.choice label {
  margin: 0; padding: .65rem 1.2rem; border-radius: 999px; cursor: pointer; font-weight: 600;
  border: 1.5px solid var(--line); background: var(--paper); color: var(--forest);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.choice label:hover { border-color: var(--forest); }
.choice input:checked + label { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.choice input:focus-visible + label { outline: 3px solid var(--saffron); outline-offset: 2px; }

.contact-aside { display: grid; grid-template-rows: minmax(260px, 1fr) auto; gap: clamp(1rem, 2vw, 1.5rem); }
.map-card { overflow: hidden; border-radius: 26px; border: 1px solid var(--line); background: var(--leaf-wash); min-height: 260px; }
.map-card iframe { display: block; width: 100%; height: 100%; min-height: 260px; border: 0; filter: saturate(.85); }

.contact-main .partner-box {
  position: relative; overflow: hidden; isolation: isolate; margin: 0;
  padding: clamp(1.75rem, 3.5vw, 2.5rem); padding-right: clamp(7rem, 14vw, 10rem);
  border-radius: 26px; border: 0; background: var(--forest); color: var(--cream);
}
.contact-main .partner-box::before {
  content: ""; position: absolute; z-index: -1; right: -20%; top: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: var(--sprout); opacity: .25; filter: blur(70px);
}
.contact-main .partner-box .eyebrow { color: #D4A85A; }
.contact-main .partner-box h2 { font-size: var(--step-3); color: var(--cream); margin: 0 0 .5rem; }
.contact-main .partner-box p { color: rgba(247, 241, 227, .8); }
.partner-box__pack {
  position: absolute; z-index: -1; right: -1.5rem; bottom: -3.5rem; width: clamp(120px, 13vw, 170px); height: auto;
  rotate: 12deg; filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .35)); transition: rotate .5s var(--ease-out), translate .5s var(--ease-out);
}
.partner-box:hover .partner-box__pack { rotate: 6deg; translate: 0 -10px; }
.contact-main .partner-box .btn--ghost { color: var(--cream); }

/* FAQ: heading left, questions right */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.faq-grid__head { position: sticky; top: calc(var(--header-h) + 2rem); }
.faq-grid__head h2 { font-size: var(--step-4); line-height: 1.05; }
.faq-grid__head .lead { margin: 0 0 1.75rem; }
.faq-grid .faq { max-width: none; display: grid; gap: .75rem; }
.faq-grid .faq details {
  border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 0 1.5rem;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.faq-grid .faq details:last-child { border-bottom: 1px solid var(--line); }
.faq-grid .faq details[open] { border-color: rgba(2, 54, 14, .3); box-shadow: 0 20px 40px -30px rgba(2, 54, 14, .35); }

@media (max-width: 960px) {
  .contact-cards__list { grid-template-columns: 1fr; }
  .contact-main .contact-grid, .faq-grid { grid-template-columns: 1fr; }
  .faq-grid__head { position: static; }
}
@media (max-width: 760px) {
  .contact-head__grid { grid-template-columns: 1fr; }
  .contact-head__packs { height: 230px; margin-top: .5rem; }
  .contact-head__packs img { width: 125px; }
  .ccard__value--sm { font-size: 1.02rem; overflow-wrap: normal; }
  .contact-main .partner-box { padding-right: clamp(1.75rem, 3.5vw, 2.5rem); padding-bottom: 7.5rem; }
  .partner-box__pack { width: 110px; bottom: -2.5rem; right: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ccard, .ccard__go, .contact-head__packs img, .partner-box__pack { transition: none; }
}

/* =====================================================================
   Spices page
   ===================================================================== */
.products-head__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 2rem; }
.products-head h1 { font-size: var(--step-5); line-height: 1; margin: 0 0 .35em; }
.products-head .lead { max-width: 40ch; margin: 0; }

/* five packs, scaled by pack size */
.size-ladder { display: flex; align-items: flex-end; justify-content: flex-end; gap: clamp(.4rem, 1.2vw, 1rem); height: clamp(200px, 22vw, 290px); }
.size-ladder figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.size-ladder img {
  width: calc(clamp(70px, 8vw, 112px) * var(--s)); height: auto;
  filter: drop-shadow(0 16px 16px rgba(40, 30, 0, .25));
  transition: transform .45s var(--ease-out);
}
.size-ladder figure:hover img { transform: translateY(-10px) rotate(-3deg); }
.size-ladder figcaption {
  font-weight: 700; font-size: var(--step--1); padding: .2rem .6rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--forest); white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
.size-ladder figure:hover figcaption { background: var(--forest); color: var(--cream); }

/* filter: segmented switch with a sliding pill, sticks below the header */
.filters-bar {
  position: sticky; top: calc(var(--nav-b, 70px) + 8px); z-index: 20; /* just under the navbar (height measured in JS) */
  display: flex; margin-bottom: 2.25rem; pointer-events: none;
  transition: top .45s var(--ease-out);
}
html.nav-away .filters-bar { top: 12px; } /* navbar tucked away: filter takes its place */
.filters-bar .filters { transition: padding .3s ease, box-shadow .3s ease; }
.filters-bar.is-stuck .filters { padding: 4px; box-shadow: 0 1px 0 rgba(2, 54, 14, .04), 0 14px 30px -14px rgba(2, 54, 14, .45); }
.filters-bar.is-stuck .filters button { min-height: 38px; }
.filters-bar.is-stuck .filters__glider { top: 4px; bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .filters-bar { transition: none; } }
.filters-bar .filters {
  position: relative; display: inline-flex; flex-wrap: nowrap; align-items: stretch; gap: 0; margin: 0; padding: 5px;
  border-radius: 999px; pointer-events: auto;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(2, 54, 14, .04), 0 16px 34px -22px rgba(2, 54, 14, .45);
}
.filters-bar .filters > span#filter-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.filters__glider {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px;
  background: var(--forest); box-shadow: 0 6px 14px -6px rgba(2, 54, 14, .6);
  transition: transform .45s var(--ease-out), width .45s var(--ease-out);
}
.filters-bar .filters button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .4rem 1.2rem; border: 0; border-radius: 999px; background: transparent;
  color: var(--forest); font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: color .3s ease;
}
.filters-bar .filters button:hover { color: var(--saffron); }
.filters-bar .filters button[aria-pressed="true"], .filters-bar .filters button[aria-pressed="true"]:hover { color: var(--cream); }
.filters-bar .filters em {
  font-style: normal; font-size: .8rem; font-weight: 600; opacity: .55; font-variant-numeric: tabular-nums;
}
.filters-bar .filters button[aria-pressed="true"] em { opacity: .8; }
.filters-bar .filters button:focus-visible { outline: 3px solid var(--saffron); outline-offset: 1px; }
/* no JS / before measuring: plain filled active state */
.filters:not(.has-glider) button[aria-pressed="true"] { background: var(--forest); }

/* cards: lift with a glow in the spice colour */
.products-main .card { border-radius: 22px; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.products-main .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1px 0 rgba(2, 54, 14, .06), 0 34px 60px -30px color-mix(in srgb, var(--c) 70%, transparent);
}
.products-main .card .btn { transition: background-color .2s ease, transform .2s var(--ease-out); }

/* price strip under the grid */
.price-strip {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.5rem); border-radius: 24px;
  background: var(--forest); color: var(--cream); position: relative; overflow: hidden; isolation: isolate;
}
.price-strip::before {
  content: ""; position: absolute; z-index: -1; left: -10%; top: -80%; width: 45%; aspect-ratio: 1; border-radius: 50%;
  background: var(--sprout); opacity: .22; filter: blur(70px);
}
.price-strip__copy { max-width: 62ch; }
.price-strip .eyebrow { color: #D4A85A; margin-bottom: .4rem; }
.price-strip p:last-child { margin: 0; color: rgba(247, 241, 227, .85); }

@media (max-width: 860px) {
  .products-head__grid { grid-template-columns: 1fr; }
  .size-ladder { justify-content: flex-start; height: 190px; }
  .filters-bar { justify-content: center; }
  .filters-bar .filters button { padding: .35rem .9rem; font-size: .95rem; }
  .size-ladder { height: 160px; }
}

/* =====================================================================
   About page
   ===================================================================== */
.about-head h1 { font-size: var(--step-5); line-height: 1.02; max-width: 16ch; margin: 0 0 .6em; }
.about-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.about-badges li {
  display: flex; align-items: baseline; gap: .6rem; padding: .8rem 1.25rem; border-radius: 999px;
  background: rgba(255, 255, 255, .7); border: 1px solid var(--line);
  transition: transform .3s var(--ease-out), background-color .3s ease;
}
.about-badges li:hover { transform: translateY(-3px); background: #fff; }
.about-badges strong { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1; color: var(--forest); }
.about-badges span { color: var(--ink-soft); font-size: var(--step--1); }

/* endless shelf of packs */
.pack-marquee { overflow: hidden; padding: 2.5rem 0 1rem; background: var(--paper); }
.pack-marquee__track { display: flex; gap: clamp(1rem, 2.5vw, 2rem); width: max-content; animation: pack-roll 50s linear infinite; }
.pack-marquee:hover .pack-marquee__track { animation-play-state: paused; }
.pack-marquee img {
  width: clamp(110px, 11vw, 160px); height: auto; filter: drop-shadow(0 18px 18px rgba(40, 30, 0, .22));
  transition: transform .4s var(--ease-out);
}
.pack-marquee img:nth-child(odd) { margin-top: 1.5rem; }
.pack-marquee img:hover { transform: translateY(-12px) rotate(-4deg) scale(1.05); }
@keyframes pack-roll { to { transform: translateX(calc(-50% - clamp(.5rem, 1.25vw, 1rem))); } }

/* story timeline */
.story__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.story__head { position: sticky; top: calc(var(--header-h) + 2rem); }
.story__head h2 { font-size: var(--step-5); line-height: 1.02; max-width: 9ch; margin-bottom: .5em; }
.timeline { --fill: 1; list-style: none; margin: 0; padding: 0 0 0 2.75rem; position: relative; display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; }
.timeline::before { background: var(--line); }
.timeline::after { background: var(--sprout); transform-origin: 50% 0; transform: scaleY(var(--fill)); }
.timeline li {
  position: relative; padding: 1.6rem 1.75rem; border-radius: 22px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 24px 50px -36px rgba(2, 54, 14, .4);
  transition: transform .5s var(--ease-out), opacity .5s ease, border-color .3s ease;
}
.timeline li::before { /* dot on the line */
  content: ""; position: absolute; left: calc(-2.75rem + 4px); top: 1.9rem; width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--sprout); transition: background-color .3s ease, transform .3s var(--ease-out);
}
.timeline li:hover { border-color: rgba(215, 99, 6, .4); }
.timeline__tag {
  display: inline-block; margin-bottom: .75rem; padding: .25rem .75rem; border-radius: 999px;
  background: var(--turmeric-wash); color: var(--brown); font-weight: 700; font-size: var(--step--1);
}
.timeline h3 { font-size: var(--step-3); margin: 0 0 .5rem; }
.timeline p { margin: 0; color: var(--ink-soft); font-size: var(--step-1); line-height: 1.6; }
.timeline.is-live li { opacity: .35; transform: translateX(16px); }
.timeline.is-live li.is-on { opacity: 1; transform: none; }
.timeline.is-live li.is-on::before { background: var(--sprout); transform: scale(1.15); }

/* family on the about page reuses the home layout */
.family--about h2 { max-width: 12ch; }

@media (max-width: 960px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__head { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .pack-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .pack-marquee img:nth-child(n + 10) { display: none; }
  .pack-marquee__track { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
  .pack-marquee img:nth-child(odd) { margin-top: 0; }
  .pack-marquee__track { flex-wrap: nowrap; }
  .pack-marquee img { flex: 1 1 0; min-width: 0; width: auto; max-width: 140px; }
  @media (max-width: 640px) {
    .pack-marquee__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
    .pack-marquee img { width: 100%; }
  }
  .timeline li, .about-badges li, .size-ladder img, .products-main .card { transition: none; }
}

.fab.is-away { opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none; }


/* =====================================================================
   Navbar v2
   ===================================================================== */
.site-header { transition: transform .45s var(--ease-out); }
.site-header.is-hidden { transform: translateY(calc(-100% - 16px)); }
.site-header__bar { overflow: visible; }
.site-header__logo img { height: 42px; }

/* links */
.site-nav__inner { display: contents; }
.site-nav__cta { display: none; }
.site-nav a { font-weight: 500; letter-spacing: .005em; }
.site-nav a[aria-current="page"] { font-weight: 700; }
.site-nav a[aria-current="page"]::after { display: none; }
.nav-pill { background: var(--leaf-wash); box-shadow: inset 0 0 0 1px rgba(122, 150, 53, .25); }
.nav-pill.is-set { opacity: 1; }
.site-nav a:hover { color: var(--forest); }

/* EN / हिं switch */
.lang-switch {
  position: relative; display: inline-flex; align-items: center; gap: 0; padding: 3px !important; min-height: 44px;
  background: rgba(2, 54, 14, .05) !important; border-color: rgba(2, 54, 14, .14) !important;
}
.lang-switch span {
  position: relative; z-index: 1; display: grid; place-items: center; min-width: 38px; height: 36px; padding: 0 .55rem;
  border-radius: 999px; font-size: .9rem; font-weight: 700; color: var(--ink-soft);
  transition: color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.lang-switch span[lang="hi"] { font-family: 'Hind', var(--font-body); }
html[lang="en"] .lang-switch span[lang="en"],
html:not([lang="hi"]) .lang-switch span[lang="en"],
html[lang="hi"] .lang-switch span[lang="hi"] {
  background: var(--forest); color: var(--cream); box-shadow: 0 4px 10px -4px rgba(2, 54, 14, .6);
}
html[lang="hi"] .lang-switch span[lang="en"] { background: transparent; color: var(--ink-soft); box-shadow: none; }
.lang-switch:hover span:not([lang]) { color: var(--forest); }
.lang-switch:hover { border-color: var(--forest) !important; }

/* WhatsApp button in the bar */
.site-header .site-header__actions .btn--primary { transition: background-color .2s ease, transform .3s var(--ease-out), box-shadow .3s ease; }
.site-header .site-header__actions .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(176, 75, 0, .85); }

/* reading progress along the bottom of the bar */
.site-header__progress {
  position: absolute; left: 1.75rem; right: 1.75rem; bottom: -1px; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--leaf), var(--sprout));
  transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: 0; transition: opacity .3s ease;
}
.site-header.is-scrolled .site-header__progress { opacity: 1; }

@media (max-width: 960px) {
  .site-header__logo img { height: 34px; }
  .lang-switch span { min-width: 34px; height: 34px; padding: 0 .4rem; font-size: .82rem; }

  /* the drop-down */
  .site-nav__inner { display: block; overflow: hidden; min-height: 0; }
  .site-nav > ul { overflow: visible; }
  .site-nav ul { padding: 0 .25rem; counter-reset: nav; }
  .site-nav.is-open .site-nav__inner { padding-bottom: .5rem; }
  .site-nav.is-open ul { padding: .75rem .25rem .5rem; }
  .site-nav li + li { border-top: 1px solid rgba(2, 54, 14, .08); }
  .site-nav li:not(.nav-pill) { counter-increment: nav; }
  .site-nav ul a {
    display: flex; align-items: center; gap: .9rem; padding: .9rem .75rem; border-radius: 16px;
    transition: background-color .25s ease, color .25s ease;
  }
  .site-nav ul a::before {
    content: counter(nav, decimal-leading-zero); font-family: var(--font-body); font-size: .75rem; font-weight: 700;
    color: var(--sprout); letter-spacing: .06em; min-width: 1.6em;
  }
  .site-nav ul a::after {
    content: "\2192" !important; display: block !important; position: static !important; margin-left: auto !important;
    width: auto !important; height: auto !important; background: none !important; border-radius: 0 !important;
    font-family: var(--font-body); font-size: 1.1rem; color: rgba(2, 54, 14, .35); transition: transform .3s var(--ease-out), color .25s ease;
  }
  .site-nav ul a:hover::after, .site-nav ul a[aria-current="page"]::after { transform: translateX(3px); color: var(--sprout); }
  .site-nav ul a[aria-current="page"] { background: var(--leaf-wash); }
  .site-nav ul a:active { background: rgba(2, 54, 14, .06); }

  /* links slide in one after another */
  .site-nav li:not(.nav-pill) { opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .4s var(--ease-out); }
  .site-nav.is-open li:not(.nav-pill) { opacity: 1; transform: none; }
  .site-nav.is-open li:nth-child(2) { transition-delay: .06s; }
  .site-nav.is-open li:nth-child(3) { transition-delay: .11s; }
  .site-nav.is-open li:nth-child(4) { transition-delay: .16s; }
  .site-nav.is-open li:nth-child(5) { transition-delay: .21s; }

  .site-nav__cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
    margin: 0 .25rem; padding: 1rem .75rem .5rem; border-top: 1px solid rgba(2, 54, 14, .1);
    opacity: 0; transition: opacity .3s ease .2s;
  }
  .site-nav.is-open .site-nav__cta { opacity: 1; }
  .site-header .site-nav__cta .btn--primary { flex: 1 1 100%; justify-content: center; min-height: 50px; }
  .site-header .site-nav__cta .btn--primary span { display: inline; }
  .site-nav .site-nav__cta a { font-family: var(--font-body); font-size: var(--step-0); border-radius: 999px; }
  .site-nav .site-nav__cta a::before, .site-nav .site-nav__cta a::after { content: none; }
  .site-header .site-nav__cta .btn--primary { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .6rem 1.2rem; color: #fff; }
  .site-nav .site-nav__phone { margin: 0 auto; padding: .4rem .8rem; font-weight: 600; color: var(--forest); text-decoration: none; }

  /* dim the page behind the open menu */
  .site-header::before {
    content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(1, 37, 10, .28);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity .35s ease;
  }
  .site-header:has(.site-nav.is-open)::before { opacity: 1; pointer-events: auto; }
  .site-header:has(.site-nav.is-open) .site-header__bar { box-shadow: 0 30px 60px -20px rgba(1, 37, 10, .5); }
  .site-header__progress { left: 1.25rem; right: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-nav li:not(.nav-pill), .site-nav__cta { transition: none !important; }
  .site-header.is-hidden { transform: none; }
}
body:has(.site-nav.is-open) .fab { opacity: 0; pointer-events: none; }

/* ---------- Symmetry: paired buttons share a width on phones ---------- */
@media (max-width: 520px) {
  .contact-head__actions, .closer__actions, .partner-box__actions { display: grid; grid-template-columns: 1fr; }
  .contact-head__actions .btn, .closer__actions .btn, .partner-box__actions .btn { width: 100%; }
}

/* ---------- Consistency: every heading on light paper uses the brand green ---------- */
.story__head h2, .timeline h3, .form h2 { color: var(--forest); }

/* Hindi sizes ("500 ग्राम") are wider: number above unit so five still fit in one row */
html[lang="hi"] .sizes label { white-space: normal; text-align: center; line-height: 1.1; font-size: .82rem; border-radius: 14px; padding: .3rem .15rem; }

/* ---------- Navbar: no jumps while a page loads ---------- */
/* the WhatsApp icon is injected by JS; hold its space from the first paint so nothing shifts */
[data-wa-icon]:not(:has(svg))::before { content: ""; flex: none; width: 1.2em; height: 1.2em; }
.fab[data-wa-icon]:not(:has(svg))::before { width: 46px; height: 46px; }
/* current page shows its pill straight away; the sliding pill takes over once JS has placed it */
.site-nav ul:not(:has(.nav-pill.is-set)) a[aria-current="page"] { background: var(--leaf-wash); box-shadow: inset 0 0 0 1px rgba(122, 150, 53, .25); }
/* arriving already scrolled (e.g. contact.html#partner): settle the bar without animating */
html.nav-init .site-header__bar, html.nav-init .nav-pill { transition: none !important; }

/* =====================================================================
   Footer – "Good food. Great spices."
   ===================================================================== */
.site-footer {
  --ft-gold: #EBCB8B; --ft-amber: #F39A1E; --ft-rule: rgba(235, 203, 139, .28);
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(160deg, #0B3F1C 0%, var(--forest) 55%, #022B0B 100%);
  color: rgba(247, 241, 227, .86); padding: clamp(3.5rem, 7vw, 5.5rem) 0 0;
}
/* soft leaf-green corners */
.site-footer::before, .site-footer::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(122, 150, 53, .32), rgba(122, 150, 53, 0));
}
.site-footer::before { width: 46vw; aspect-ratio: 1; top: -28vw; right: -20vw; }
.site-footer::after { width: 40vw; aspect-ratio: 1; bottom: -24vw; left: -18vw; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer h2 { font-family: var(--font-body); font-size: var(--step-1); font-weight: 600; letter-spacing: 0; color: var(--ft-gold); margin: 0 0 1.25rem; }

/* top band */
.ft-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.05fr); align-items: center;
  gap: clamp(1.5rem, 3.5vw, 3rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem); border-bottom: 1px solid var(--ft-rule);
}
.ft-hero__title {
  margin: 0; max-width: none; font-family: 'Baloo 2', var(--font-body); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.4rem, 1rem + 3.3vw, 4.25rem); line-height: .98; letter-spacing: -.01em; color: var(--cream);
}
html[lang="hi"] .ft-hero__title { line-height: 1.2; }
.ft-hero__line { display: block; white-space: nowrap; }
.ft-hero__accent { position: relative; display: inline-block; font-style: normal; color: var(--ft-amber); }
.ft-hero__swoosh { position: absolute; left: 22%; right: -2%; bottom: -.32em; width: 80%; height: .26em; color: var(--sprout); }
.ft-hero__copy { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-left: clamp(1.5rem, 3vw, 2.5rem); border-left: 1px solid var(--ft-rule); }
.ft-hero__copy p { margin: 0 0 1.5rem; max-width: 30ch; font-size: var(--step-1); line-height: 1.45; color: var(--cream); }
.ft-hero__actions { display: grid; grid-template-columns: minmax(0, 15rem); gap: .7rem; }
.ft-hero__actions .btn--primary { box-shadow: 0 14px 30px -14px rgba(243, 154, 30, .7); }
.site-footer .btn--ghost { color: var(--cream); border-color: rgba(247, 241, 227, .45); }
.site-footer .btn--ghost:hover { background: var(--cream); color: var(--forest); border-color: var(--cream); }
.ft-base__sep { margin: 0 .4rem; color: var(--ft-amber); }
.ft-hero__art { margin: -1.5rem -1rem -1.5rem 0; }
.ft-hero__art img { width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .35)); }

/* four columns */
.ft-cols {
  display: grid; grid-template-columns: 1.1fr 1fr 1.3fr 1.15fr;
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
}
.ft-col { padding-inline: clamp(1.25rem, 2.5vw, 2.25rem); }
.ft-col:first-child { padding-left: 0; }
.ft-col:last-child { padding-right: 0; }
.ft-col + .ft-col { border-left: 1px solid var(--ft-rule); }
.ft-brand img { width: auto; height: 110px; margin: 0 0 1.25rem; }
.ft-brand p { margin: 0; max-width: 30ch; color: rgba(247, 241, 227, .86); }
.ft-links, .ft-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ft-links a { white-space: nowrap; display: inline-flex; align-items: center; gap: .9rem; transition: color .2s ease, transform .3s var(--ease-out); }
.ft-links svg { width: 18px; height: 18px; flex: none; color: var(--ft-amber); }
.ft-links a:hover { color: #fff; transform: translateX(4px); }
.ft-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: .9rem; align-items: start; }
.ft-ico { display: grid; place-items: center; width: 26px; height: 26px; color: var(--ft-amber); }
.ft-ico svg { width: 24px; height: 24px; }
.ft-ico--wa { color: var(--cream); }
.ft-list a, .ft-list address { font-style: normal; line-height: 1.5; padding-top: .05rem; overflow-wrap: anywhere; }
.ft-list a:hover { color: #fff; }
.ft-list a[data-email] { overflow-wrap: normal; white-space: nowrap; font-size: .97em; }
.ft-underline { justify-self: start; padding-bottom: .2rem; background: linear-gradient(var(--ft-amber), var(--ft-amber)) 0 100% / 100% 2px no-repeat; transition: background-size .35s var(--ease-out); }
.ft-underline:hover { background-size: 40% 2px; }

/* bottom bar */
.ft-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding: 1.5rem 0 clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--ft-rule);
}
.ft-base p { margin: 0; max-width: none; color: rgba(247, 241, 227, .82); }
.ft-credit { display: block; margin-top: .35rem; font-size: .85em; color: rgba(247, 241, 227, .62); }
.ft-credit a { color: var(--cream); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ft-gold); text-underline-offset: .2em; transition: color .2s ease; }
.ft-credit a:hover { color: var(--ft-gold); }
.ft-social { display: flex; align-items: center; gap: .9rem; }
.ft-social__label { font-weight: 600; color: var(--cream); margin-right: .4rem; }
.ft-social__link {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--ft-gold); color: var(--cream);
  transition: background-color .25s ease, color .25s ease, transform .3s var(--ease-out);
}
.ft-social__link svg { width: 22px; height: 22px; }
.ft-social__link:hover { background: var(--ft-gold); color: var(--forest); transform: translateY(-3px); }
.ft-social__link[hidden] { display: none; }

@media (max-width: 1080px) {
  .ft-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ft-hero__title { grid-column: 1 / -1; }
  .ft-hero__copy { padding-left: 0; border-left: 0; }
  .ft-hero__art { margin: 0; }
  .ft-cols { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .ft-col:nth-child(3) { border-left: 0; padding-left: 0; }
  .ft-col:nth-child(2) { padding-right: 0; }
}
@media (max-width: 640px) {
  .ft-hero { grid-template-columns: 1fr; }
  .ft-hero__title { font-size: clamp(2rem, 9.4vw, 3.2rem); }
  .ft-hero__actions { grid-template-columns: 1fr; }
  .ft-base__sep { display: none; }
  .ft-base p span[data-i18n="footer.reserved"] { display: block; }
  .ft-cols { grid-template-columns: 1fr; row-gap: 0; padding-top: 1rem; }
  .ft-col, .ft-col:nth-child(n) { padding: 1.75rem 0; border-left: 0; }
  .ft-col + .ft-col { border-top: 1px solid var(--ft-rule); }
  .ft-brand img { height: 92px; }
  .ft-base { flex-direction: column-reverse; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-links a, .ft-underline, .ft-social__link { transition: none; }
}


/* ---------- Family: Jaswani Enterprises | Rupesh | Shivnath Spices ---------- */
.family--home .people--trio {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center; gap: clamp(1rem, 2.2vw, 1.75rem); padding-right: 14px;
}
.family--home .family__grid:has(.people--trio) { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
.family--home .person--lead .person__photo { --c: var(--sprout); }
.family--home .person--lead figcaption { text-align: center; }
.org {
  position: relative; overflow: hidden; margin: 0;
  min-height: clamp(13rem, 19vw, 16.5rem); border-radius: 22px; padding: clamp(.9rem, 1.4vw, 1.25rem);
  display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem;
  color: var(--cream); box-shadow: 0 30px 50px -30px rgba(2, 54, 14, .55);
  transition: transform .5s var(--ease-out);
}
.org:hover { transform: translateY(-6px); }
.org--je { background: var(--leaf); }
.org--ss { background: var(--forest); }
.org::after {
  content: ""; position: absolute; inset: auto -30% -40% auto; width: 90%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(247, 241, 227, .18); pointer-events: none;
}
.org__mono {
  margin-bottom: auto; width: 2.75rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(247, 241, 227, .7); font-family: var(--font-display); font-size: 1rem; letter-spacing: .02em;
}
.org__mark { margin-bottom: auto; width: 2.9rem; height: auto; }
.org__tag { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
html[lang="hi"] .org__tag { letter-spacing: 0; font-size: .85rem; }
.org__name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, .85rem + .45vw, 1.35rem); line-height: 1.12; color: inherit; overflow-wrap: break-word; }
.org__note { margin: 0; font-size: var(--step--1); line-height: 1.45; opacity: .88; }
@media (max-width: 520px) {
  .family--home .people--trio { grid-template-columns: 1fr 1fr; grid-template-areas: "lead lead" "je ss"; gap: 1.25rem 1rem; }
  .family--home .people--trio .person--lead { grid-area: lead; width: min(78%, 300px); justify-self: center; }
  .org--je { grid-area: je; } .org--ss { grid-area: ss; }
  .org { min-height: 200px; }
}


/* ---------- Products page: hover a card to see the original printed pack ---------- */
.card__orig { display: none; }
.products-main .card__orig {
  display: block; position: absolute; z-index: 3; left: 50%; top: 52%; width: 66%; height: auto;
  border-radius: 10px; filter: none; box-shadow: 0 26px 40px -18px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .25);
  translate: -50% -50%; opacity: 0; transform: translateY(18px) rotate(2deg) scale(.94);
  transition: opacity .35s ease, transform .55s var(--ease-out); pointer-events: none;
}
.products-main .card__media:has(.card__orig) { cursor: pointer; }
.products-main .card__media .card__pack { transition: transform .5s var(--ease-out), opacity .35s ease; }
@media (hover: hover) {
  .products-main .card:hover .card__orig { opacity: 1; transform: none; }
  .products-main .card:hover .card__media:has(.card__orig) .card__pack { opacity: 0; transform: translateY(20px) scale(.92); }
}
.products-main .card.show-orig .card__orig { opacity: 1; transform: none; }
.products-main .card.show-orig .card__pack { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .products-main .card__orig, .products-main .card__media .card__pack { transition: opacity .2s ease; transform: none !important; }
}