/* Fonts — two families, self-hosted from 'self' (the CSP allows nothing else).
   Hind sets Latin and Devanagari in one family; Barlow Condensed is Latin-only
   display. Each face is split by unicode-range, so an English page never
   downloads Devanagari and a Hindi page downloads it only for Devanagari text.
   Files are Google Fonts' own subsets, OFL — licences beside them. */

@font-face {
  font-family: "Hind";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/hind-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Hind";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/hind-400-devanagari.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

@font-face {
  font-family: "Hind";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/hind-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Hind";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/hind-600-devanagari.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Design tokens — the single place colour and type are defined.
   Palette: docs/redesign-plan.md §6.1. Forest green carries the page; magenta
   and cyan are the logo colours and stay accents — magenta for the primary
   action only, cyan for category chips only. Neutrals are green-tinted, never
   the mauve greys of the Stitch export's DESIGN.md.

   Nothing below this block contains a raw colour, so swapping the palette
   stays a one-file change. scripts/images.mjs reads --surface from this block
   (the first :root) for the share-card background. */

:root {
  /* Palette */
  --forest-900: #0f291e;
  --forest-700: #1c3e2f;
  --forest-300: #a3c2b3;
  --forest-100: #d8e9df;
  --ink-900: #0f1f16;
  --mint-100: #ebfeef;
  --mint-50: #f0fdf4;
  --paper: #f8faf8;
  --white: #ffffff;
  --magenta-600: #e5007d;
  --magenta-700: #b90064;
  --green-700: #006d0b;
  --green-600: #098915;
  --cyan-500: #00a5e3;

  /* Green-tinted neutrals */
  --sage-700: #3d5246;
  --sage-500: #6b8175;
  --sage-300: #c3d4c9;
  --sage-200: #dde8e0;
  --sage-100: #eaf2ec;

  /* Supporting — WhatsApp green is a brand requirement, not a palette choice */
  --whatsapp: #1ebe5d;
  --whatsapp-ink: #04240f;
  --danger: #b42318;
  --danger-soft: #fdecea;

  /* Semantic */
  --bg: var(--paper);
  --surface: var(--white);
  --surface-alt: var(--mint-50);
  --surface-tint: var(--mint-100);
  --surface-sunk: var(--sage-100);
  --border: var(--sage-200);
  --border-strong: var(--sage-300);
  --text: var(--ink-900);
  --text-muted: var(--sage-700);
  --text-faint: var(--sage-500);
  --heading: var(--forest-900);
  --link: var(--green-700);
  --accent: var(--green-600);
  --accent-strong: var(--green-700);
  --primary: var(--magenta-600);
  --primary-hover: var(--magenta-700);
  --primary-contrast: var(--white);
  --chip: var(--cyan-500);
  --band: var(--forest-900);
  --band-raised: var(--forest-700);
  --on-band: var(--forest-100);
  --on-band-muted: var(--forest-300);
  --on-band-strong: var(--white);
  --focus: var(--green-700);

  /* Type — two families. Every stack ends in faces the target devices already
     have, so a failed webfont load degrades rather than breaks. Barlow has no
     Devanagari, so Hindi in a heading falls through to Hind per glyph. */
  --font-display: "Barlow Condensed", "Hind", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Hind", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* No webfont: for the one Devanagari word on an English page (the language
     switch), so English pages never download the Devanagari file. */
  --font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Devanagari", "Nirmala UI", sans-serif;

  /* Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgb(15 41 30 / 6%), 0 10px 28px rgb(15 41 30 / 10%);
  --shadow-sm: 0 1px 2px rgb(15 41 30 / 8%);
  --shadow-edge: rgb(15 41 30 / 10%);
  --shadow-pack: rgb(15 41 30 / 22%);
  --scrim: rgb(15 41 30 / 45%);
  --container: 1200px;
  --tap: 44px;          /* minimum touch target */
  --gutter: var(--space-3);
  --header-h: 64px;
  --utility-h: 36px;

  /* Motion — docs/redesign-plan.md §6.4 */
  --reveal-rise: 20px;
  --reveal-scale: 0.985;
  --reveal-duration: 360ms;
  --reveal-stagger: 45ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Type rhythm. Devanagari needs more leading and a slightly larger face than
     Latin at the same nominal size — see the :lang(hi) block. */
  --leading: 1.6;
  --leading-tight: 1.1;
  --scale-body: 1rem;
  --scale-lead: 1.0625rem;
}

:lang(hi) {
  --leading: 1.8;
  --leading-tight: 1.35;
  --scale-body: 1.0625rem;
  --scale-lead: 1.125rem;
}

/* ============================================================================
   Everything below uses var(--…) only. No raw colour values.
   Mobile-first: the base rules target a 360px screen on a slow connection,
   and the media queries add to them. That is the common case here, not the
   edge case.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--scale-body);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--heading);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

p { margin: 0 0 var(--space-3); }
img { max-width: 100%; height: auto; }
a { color: var(--link); }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

.sprite { display: none; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.25em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* One visible focus treatment everywhere. Dark bands redefine --focus. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: calc(var(--space-3) * -4);
  z-index: 20;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.skip-link:focus { top: var(--space-3); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- header ------------------------------------------------------------- */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  text-decoration: none;
  color: var(--heading);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-inline-end: auto;
}

.brand__mark { width: 36px; height: 36px; object-fit: contain; }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--tap);
  padding-inline: var(--space-2);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--link);
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
}

/* The link reads "हिन्दी" on English pages. Setting it in the system face
   keeps English pages from downloading Hind's Devanagari file for one word. */
html[lang="en"] .lang-switch { font-family: var(--font-system); }

.lang-switch:hover { background: var(--surface-tint); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--heading);
  cursor: pointer;
}

.nav-toggle__close { display: none; }

/* With JavaScript off the toggle can never be pressed, so it is hidden and
   the nav stays visible. data-js is set by boot.js before first paint. */
html:not([data-js]) .nav-toggle { display: none; }

.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.nav__link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--space-3);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 600;
}

.nav__link:hover { background: var(--surface-tint); color: var(--heading); }

.nav__link--current {
  color: var(--heading);
  box-shadow: inset 0 -3px 0 var(--accent);
}

/* Drawer, only when JavaScript is available to open and close it. */
@media (max-width: 47.99em) {
  html[data-js] .nav {
    position: fixed;
    inset: 100% 0 auto 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: var(--space-2) var(--gutter) var(--space-4);
    transform: translateY(-120%);
    visibility: hidden;
    /* visibility is a discrete property: a plain duration flips it midway
       through the slide, so the drawer is still computed hidden when the
       toggle tries to move focus into it, and focus() silently does nothing.
       Flip it instantly on open, and only delay it on close so the slide-up
       stays visible. */
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
    box-shadow: var(--shadow);
  }

  html[data-js] .nav[data-open] {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.2s ease, visibility 0s linear 0s;
  }

  html[data-js] .nav__list { flex-direction: column; }
  html[data-js] .nav__link { min-height: var(--tap); padding-inline: var(--space-2); }

  html[data-js] .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
  html[data-js] .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

  /* No JavaScript: a plain wrapped row under the brand. */
  html:not([data-js]) .nav {
    order: 3;
    flex-basis: 100%;
    padding-bottom: var(--space-2);
  }
  html:not([data-js]) .nav__list { gap: 0; }
  html:not([data-js]) .nav__link { padding-inline: var(--space-2); }
  html:not([data-js]) .header__inner { flex-wrap: wrap; }
}

.nav-scrim {
  position: fixed;
  inset: 0;
  background: var(--ink-900);
  opacity: 0.4;
  z-index: 9;
}

@media (min-width: 48em) {
  :root { --header-h: 76px; }
  .header__inner { gap: var(--space-4); }
  .brand { font-size: 1.625rem; }
  .brand__mark { width: 44px; height: 44px; }
  .nav-toggle { display: none; }
  .nav-scrim { display: none; }
}

/* ---- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--heading);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.btn:hover { border-color: var(--accent); }

.btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-contrast);
}

.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

.btn--ghost { background: transparent; border-color: var(--accent-strong); color: var(--accent-strong); }
.btn--ghost:hover { background: var(--surface-tint); }

.btn--whatsapp {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: var(--whatsapp-ink);
}

.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

/* ---- form controls ------------------------------------------------------ */

.input, .select {
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  /* 16px minimum stops iOS zooming the viewport on focus. */
  font-size: max(1rem, var(--scale-body));
}

.input[readonly] { background: var(--surface-sunk); color: var(--text-muted); }

textarea.input { min-height: 7rem; resize: vertical; line-height: var(--leading); }

.input-icon { position: relative; display: flex; align-items: center; }
.input-icon__icon { width: 1.25rem; height: 1.25rem; position: absolute; inset-inline-start: var(--space-3); color: var(--text-faint); }
.input-icon .input { padding-inline-start: calc(var(--space-3) * 2.75); }

.form__row { margin-bottom: var(--space-3); }

.form__label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 600;
  font-size: 0.9375rem;
}

.form__req { color: var(--danger); }

.form__error {
  margin: var(--space-1) 0 0;
  color: var(--danger);
  font-size: 0.875rem;
  font-weight: 600;
}

.input[aria-invalid="true"] { border-color: var(--danger); }

.form__status {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-sunk);
  font-weight: 600;
}

.form__status[data-state="ok"] { background: var(--surface-tint); border-color: var(--accent); }
.form__status[data-state="error"] { background: var(--danger-soft); border-color: var(--danger); }

/* ---- sections ----------------------------------------------------------- */

.section { padding-block: var(--space-5); }
.section__head { margin-bottom: var(--space-4); }

.section__title {
  font-size: 2rem;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.section__title--sm { font-size: 1.625rem; }

.section__intro {
  color: var(--text-muted);
  font-size: var(--scale-lead);
  max-width: 62ch;
  margin: 0;
}

.section__more { margin-top: var(--space-4); }

@media (min-width: 48em) {
  .section { padding-block: var(--space-6); }
  .section__title { font-size: 2.75rem; }
  .section__title--sm { font-size: 2rem; }
}

/* ---- utility bar -------------------------------------------------------- */

.utility {
  --focus: var(--mint-100);
  background: var(--band);
  color: var(--on-band);
  font-size: 0.875rem;
}

.utility__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-4);
  min-height: 36px;
}

.utility__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  color: var(--on-band);
  text-decoration: none;
}

a.utility__item:hover { color: var(--on-band-strong); text-decoration: underline; }
.utility__item .icon { width: 1rem; height: 1rem; color: var(--on-band-muted); }

/* The header's primary action. Only where the row has room for it; below
   that, Contact is one tap away in the nav. */
.header__cta { display: none; }

@media (min-width: 64em) {
  .header__cta { display: inline-flex; }
}

/* ---- hero --------------------------------------------------------------- */

/* The hero: the light mint of the rest of the site, the name large, the pack
   badge's promise in the brand pink, the company's own figures at its foot.
   It sends visitors down the page — the new launch and the scroll cue both
   lead to #explore — rather than out of it. */
.hero {
  position: relative;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-5) var(--space-4);
  /* The fan's rotated corners may pass the viewport edge; they must never
     cause horizontal scroll. */
  overflow-x: clip;
}

.hero.screen { justify-content: flex-start; }

.hero__inner {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  margin-block: auto;
}

.hero__title {
  font-size: clamp(3.25rem, 15vw, 6.5rem);
  line-height: 0.92;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  color: var(--heading);
}

.hero__sub { font-size: var(--scale-lead); font-weight: 600; color: var(--heading); max-width: 34ch; margin-top: var(--space-4); }

/* The pack badge's words, under the name: the brand's promise, set apart. */
.hero__tagline {
  margin: calc(var(--space-2) * -1) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 5vw, 2rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

/* Letter-spacing breaks Devanagari's joined letters; Hindi has no case. */
:lang(hi) .hero__tagline { letter-spacing: 0; text-transform: none; }
.hero__intro { color: var(--text-muted); max-width: 56ch; }

/* The new launch, teased: a pill that leads down the page to its tile. */
.hero__launch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  min-height: var(--tap);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--heading);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  text-decoration: none;
}

.hero__launch .badge { align-self: center; }
.hero__launch:hover { background: var(--surface-tint); }
.hero__launch-icon { width: 1rem; height: 1rem; transform: rotate(90deg); }

/* The scroll cue: the one thing on the first screen that moves, gently. */
.hero__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  align-self: center;
  margin-top: var(--space-4);
  min-height: var(--tap);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

:lang(hi) .hero__scroll { letter-spacing: 0; }
.hero__scroll-icon { width: 1.5rem; height: 1.5rem; transform: rotate(90deg); animation: hero-nudge 1.8s var(--ease-out) infinite; }

@keyframes hero-nudge {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 6px; }
}

/* Seven important varieties arranged as one product family. Sona King leads
   from the centre; three packs step out on either side at matching depths. */
.fan {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  aspect-ratio: 1 / 1.08;
}

.fan__pack {
  position: absolute;
  display: block;
  width: 28%;
  filter: drop-shadow(0 10px 14px var(--shadow-pack));
  animation: hero-float 6s ease-in-out infinite;
}

.fan__pack .media { background: none; border-radius: 0; }
.fan__pack--0 { left: 31%; top: 18%; width: 38%; z-index: 5; }
.fan__pack--1 { left: 4%; top: 3%; width: 34%; z-index: 4; transform: rotate(-5deg); }
.fan__pack--2 { left: 0; top: 37%; width: 30%; z-index: 3; transform: rotate(-8deg); animation-delay: -2s; }
.fan__pack--3 { left: 13%; top: 68%; width: 27%; z-index: 2; transform: rotate(-4deg); animation-delay: -4s; }
.fan__pack--4 { left: 62%; top: 3%; width: 34%; z-index: 4; transform: rotate(5deg); }
.fan__pack--5 { left: 70%; top: 37%; width: 30%; z-index: 3; transform: rotate(8deg); animation-delay: -2s; }
.fan__pack--6 { left: 60%; top: 68%; width: 27%; z-index: 2; transform: rotate(4deg); animation-delay: -4s; }

@keyframes hero-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

.fan__pack:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }

@media (min-width: 56em) {
  .hero { padding-block: var(--space-6) var(--space-4); }
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
  .fan { max-width: none; aspect-ratio: 1.3 / 1; }
  .fan__pack--0 { left: 34%; top: 14%; width: 32%; }
  .fan__pack--1 { left: 15%; top: 2%; width: 27%; }
  .fan__pack--2 { left: 2%; top: 29%; width: 24%; }
  .fan__pack--3 { left: 15%; top: 56%; width: 22%; }
  .fan__pack--4 { left: 58%; top: 2%; width: 27%; }
  .fan__pack--5 { left: 74%; top: 29%; width: 24%; }
  .fan__pack--6 { left: 63%; top: 56%; width: 22%; }
}

/* ---- arrival intro ------------------------------------------------------
   The build writes the intro into the home page, hidden. boot.js sets
   html[data-intro] before first paint on an arrival from outside the site,
   so it shows with the page's first frame; its packs rise in, it holds, then
   data-intro="out" fades and lifts it away. Transform and opacity only. */
.intro {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 210;
  place-items: center;
  overflow: hidden;
  padding: var(--space-4) var(--space-3);
  background: var(--surface-alt);
  cursor: pointer;
  transition: opacity 0.6s var(--ease-out);
}

html[data-intro] .intro { display: grid; }
html[data-intro="out"] .intro { opacity: 0; pointer-events: none; }

.intro__inner {
  width: 100%;
  max-width: 60rem;
  text-align: center;
  transition: transform 0.6s var(--ease-out);
}

html[data-intro="out"] .intro__inner { transform: scale(1.04); }

.intro__kicker {
  margin: 0;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.intro__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.intro__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

html[data-intro] .intro__kicker,
html[data-intro] .intro__item { animation: intro-rise 0.6s var(--ease-out) both; }
html[data-intro] .intro__item { animation-delay: 0.1s; }
html[data-intro] .intro__item + .intro__item { animation-delay: 0.25s; }

@keyframes intro-rise {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
}

.intro__item .media {
  width: min(100%, 33svh);
  background: none;
  border-radius: 0;
  filter: drop-shadow(0 14px 20px var(--shadow-pack));
}

.intro__caption { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }

.intro__name {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 4vw, 2.25rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.intro__tagline { color: var(--text-muted); font-weight: 600; }

.intro__features {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

@media (min-width: 56em) {
  .intro__grid { gap: var(--space-6); }
  .intro__features { font-size: 1rem; }
}

/* ---- stat strip ---------------------------------------------------------
   Plain numbers counted by the build. No counters: they imply a precision
   this catalogue does not claim. */

/* The company's own figures and qualities, at the foot of the hero: each
   its own dark card, two to a row on a phone, three from 40em, all six in a
   row from 64em. */
.stats-wrap { margin-top: var(--space-5); }

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 7rem;
  padding: var(--space-3) var(--space-2);
  text-align: center;
  background: var(--band);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.stat__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 2.75rem);
  line-height: 1;
  color: var(--on-band-strong);
}

.stat__icon { width: 3rem; height: 3rem; color: var(--on-band-strong); }
.stat__label { font-weight: 600; color: var(--on-band); font-size: 0.875rem; line-height: 1.3; }

@media (min-width: 40em) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
}

@media (min-width: 64em) {
  .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stat__label { font-size: 0.9375rem; }
}

/* ---- section helpers ---------------------------------------------------- */

.section--alt { background: var(--surface-alt); border-block: 1px solid var(--border); }

.section__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}

.section__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap);
  font-weight: 600;
  text-decoration: none;
}

/* Category chip — the only place logo cyan appears. */
.chip {
  display: inline-flex;
  min-height: 1.75rem;
  align-self: flex-start;
  align-items: center;
  padding: 0.125rem var(--space-2);
  border: 1px solid var(--chip);
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip) 12%, var(--surface));
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
}

a.chip--link { min-height: var(--tap); text-decoration: none; }
a.chip--link:hover { background: color-mix(in srgb, var(--chip) 24%, var(--surface)); }

/* ---- category cards ----------------------------------------------------- */

/* Two to a row even on a 360px phone: the packs on a card never show wider
   than 110px, so a narrow card loses nothing, and the browse section stays
   close to one screen. */
.cat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: var(--space-3);
}

.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
}

.cat-card__packs {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: var(--space-3) var(--space-3) 0;
  background: var(--surface-tint);
  min-height: 150px;
}

.cat-card__pack { width: 42%; max-width: 110px; background: none; border-radius: 0; }
.cat-card__packs--2 .cat-card__pack:first-child { transform: rotate(-6deg) translateX(8%); z-index: 1; }
.cat-card__packs--2 .cat-card__pack:last-child { transform: rotate(6deg) translateX(-8%); }

.cat-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  flex: 1;
}

.cat-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--heading);
}

.cat-card__summary { color: var(--text-muted); font-size: 0.9375rem; flex: 1; }

/* ---- why Tapasya Seeds: a bento grid ------------------------------------
   One column on a phone; two from 40em; four from 64em, where the range card
   takes a 2x2 block. Areas are named so the order in the markup can stay the
   reading order. */

.trust { background: var(--surface); }

.bento { display: grid; gap: var(--space-3); }

.bento__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.bento__tag {
  padding: 0.125rem var(--space-2);
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bento__icon {
  width: 3rem;
  height: 3rem;
  padding: 0.7rem;
  border-radius: var(--radius);
  background: var(--surface-tint);
  color: var(--accent-strong);
}

.bento__title { margin: 0; font-size: 1.375rem; color: var(--heading); }
.bento__text { margin: 0; color: var(--text-muted); overflow-wrap: anywhere; }

/* The range: the one big number, the types, and the packs themselves. */
.bento__card--range { background: var(--surface-tint); border-color: var(--border-strong); }
.bento__headline { margin: var(--space-1) 0 0; font-size: 2.5rem; line-height: 1; text-transform: uppercase; color: var(--heading); }

.bento__types { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 0; padding: 0; list-style: none; }

.bento__types li {
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--heading);
}


.bento__packs { display: flex; align-items: flex-end; margin: var(--space-3) 0 var(--space-1); padding-inline-start: var(--space-2); }
.bento__pack { width: 22%; max-width: 110px; margin-inline-start: -4%; background: none; border-radius: 0; filter: drop-shadow(0 6px 10px var(--shadow-pack)); }
.bento__pack:nth-child(odd) { transform: rotate(-4deg); }
.bento__pack:nth-child(even) { transform: rotate(4deg) translateY(-6%); }

.bento__link { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: auto; font-weight: 600; color: var(--link); }
.bento__link .icon { width: 1rem; height: 1rem; }

/* Talk to us: the dark card, the number large enough to read from across a shop. */
.bento__card--talk { --focus: var(--mint-100); background: var(--band); border-color: var(--band); color: var(--on-band); }
.bento__card--talk .bento__tag { background: var(--band-raised); border-color: var(--band-raised); color: var(--on-band); }
.bento__card--talk .bento__title { color: var(--on-band-strong); }
.bento__phone { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 2.25rem; line-height: 1.1; }
.bento__phone a { color: var(--on-band-strong); text-decoration: none; }
.bento__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: auto 0 0; }

/* Dealers: the brand colour, the client's own dealer sentence. */
.bento__card--dealer { --focus: var(--mint-100); background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.bento__card--dealer .bento__tag { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-contrast); }
.bento__card--dealer .bento__title,
.bento__card--dealer .bento__text { color: var(--primary-contrast); }
.bento__card--dealer .btn { margin-top: auto; }

.btn--light { background: var(--surface); border-color: var(--surface); color: var(--heading); }
.btn--light:hover { background: var(--surface-tint); }

@media (min-width: 40em) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "range range"
      "pack shield"
      "talk talk"
      "globe dealer";
  }
}

@media (min-width: 64em) {
  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "range range pack shield"
      "range range talk talk"
      "globe dealer dealer dealer";
  }
  .bento__headline { font-size: 3.5rem; }
}

@media (min-width: 40em) {
  .bento__card--range { grid-area: range; }
  .bento__card--pack { grid-area: pack; }
  .bento__card--shield { grid-area: shield; }
  .bento__card--talk { grid-area: talk; }
  .bento__card--globe { grid-area: globe; }
  .bento__card--dealer { grid-area: dealer; }
}

/* ---- about strip and company facts -------------------------------------- */

.about-strip { background: var(--surface-alt); }

/* The home page's About: the paragraph on the left, the company's details as
   a 3x2 table of cards on the right; stacked on a phone. */
.about { display: grid; gap: var(--space-5); align-items: center; }
.about__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.about__text .section__title { margin: 0; }
.about__lead { margin: 0; font-size: var(--scale-lead); line-height: 1.7; color: var(--text); max-width: 60ch; }

.about-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.about-table__cell { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); background: var(--surface); }
.about-table__cell:nth-child(4n + 1),
.about-table__cell:nth-child(4n + 4) { background: var(--surface-alt); }

.about-table dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.about-table dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--heading);
  overflow-wrap: anywhere;
}

.about-table dd a { color: var(--link); text-decoration-thickness: 1px; }

@media (min-width: 56em) {
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
}

/* ---- browse: the new launch, the categories and the whole range --------
   One grid. On a phone: the launch across both columns, then the five
   categories and the range tile two to a row. From 64em: five columns, the
   launch two columns by two rows — exactly two rows in all. Without a launch,
   the six tiles sit three to a row. */

.browse__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.browse__launch { grid-column: 1 / -1; }

@media (min-width: 64em) {
  .browse__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .browse__grid--launch { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .browse__launch { grid-column: span 2; grid-row: span 2; }
}

/* The launch: the one tile in the brand colour's frame. */
.launch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42%;
  gap: var(--space-3);
  align-items: center;
  height: 100%;
  padding: var(--space-4);
  background: var(--surface-tint);
  border: 1px solid var(--border-strong);
  border-inline-start: 6px solid var(--primary);
  border-radius: var(--radius-lg);
}

.launch__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.launch__name { margin: 0; font-size: 2rem; line-height: 1; text-transform: uppercase; }
.launch__name a { color: var(--heading); text-decoration: none; }
.launch__tagline { margin: 0; font-weight: 600; color: var(--accent-strong); }
.launch__features { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.launch__features li { display: flex; gap: var(--space-2); align-items: flex-start; }
.launch__icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.15em; color: var(--accent); }
.launch__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 0; }
.launch__media .media { background: none; border-radius: 0; filter: drop-shadow(0 12px 18px var(--shadow-pack)); }

@media (min-width: 64em) {
  .launch { padding: var(--space-5) var(--space-4); }
  .launch__name { font-size: 2.5rem; }
}

/* The whole range: the count, the types, the way in. */
.all-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-4) var(--space-3);
  background: var(--band);
  border-radius: var(--radius-lg);
  color: var(--on-band);
  --focus: var(--mint-100);
}

.all-card__title { margin: 0; font-size: 1.75rem; line-height: 1.05; text-transform: uppercase; color: var(--on-band-strong); }
.all-card__text { margin: 0; color: var(--on-band); font-size: 0.9375rem; }
.all-card__types { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.all-card__types .chip { background: var(--band-raised); border-color: var(--band-raised); color: var(--on-band-strong); }
.all-card__types a.chip--link:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.all-card__link { margin-top: var(--space-1); }

/* ---- full-screen sections ----------------------------------------------
   Each home section fills at least the screen below the sticky header, its
   content centred in it: one idea per screen as the visitor scrolls. The
   hero also makes room for the utility bar above the header. svh, so a
   phone's collapsing address bar does not make the sections jump. */
.screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}

.screen > .container { width: 100%; }

.hero.screen {
  min-height: calc(100vh - var(--header-h) - var(--utility-h));
  min-height: calc(100svh - var(--header-h) - var(--utility-h));
}

.facts {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.facts__row {
  display: grid;
  gap: 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
}

.facts__row + .facts__row { border-top: 1px solid var(--border); }
.facts dt { font-weight: 600; color: var(--text-muted); font-size: 0.875rem; }
.facts dd { margin: 0; }

@media (min-width: 40em) {
  .facts__row { grid-template-columns: 11rem minmax(0, 1fr); padding: var(--space-3); }
}

.prose .facts { margin-top: var(--space-4); }

/* ---- badges ------------------------------------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.2rem var(--space-2);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge--new { background: var(--primary); color: var(--primary-contrast); }

.card__badge { position: absolute; top: var(--space-2); inset-inline-start: var(--space-2); z-index: 1; }

/* ---- media slots --------------------------------------------------------
   Every image slot reserves its box whether or not an image exists, so
   nothing shifts as images land. lib/render.mjs sets --media-ratio from the
   image's real shape when the build knows it, and 4:5 (a packet) when it
   does not. contain, never cover: cover on a mismatched box crops the
   variety name off the pack. */

.media {
  position: relative;
  aspect-ratio: var(--media-ratio, 4 / 5);
  overflow: hidden;
  border-radius: var(--radius);
}

.media__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.media--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--text-faint);
  background: var(--surface-sunk);
}

.media__glyph { width: 2.5rem; height: 2.5rem; }

.media__note {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  padding-inline: var(--space-2);
}

/* ---- product cards ------------------------------------------------------ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--space-3);
}



.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.card__media {
  border-radius: 0;
  background: var(--surface-alt);
  padding: var(--space-3);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  flex: 1;
  border-top: 1px solid var(--border);
}

.card__name {
  font-size: 1.375rem;
  margin: 0;
}

.card__tagline {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
  flex: 1;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-1) 0 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem var(--space-2);
  border-radius: 999px;
  background: var(--surface-tint);
  color: var(--accent-strong);
  font-size: 0.8125rem;
  font-weight: 600;
}

.tag--quiet { background: var(--surface-sunk); color: var(--text-muted); }
.tag .icon { width: 0.875rem; height: 0.875rem; }

/* ---- filters ------------------------------------------------------------ */

.filters {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.filters__label {
  display: block;
  margin: 0 0 var(--space-1);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
}

.filters__group { min-width: 0; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Filter chips change state instantly — no transition, it reads as faster
   (plan §6.4). */
.chip--filter {
  min-height: var(--tap);
  padding: var(--space-1) var(--space-3);
  gap: var(--space-2);
  background: var(--surface);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: none;
}

.chip--filter:hover { background: color-mix(in srgb, var(--chip) 12%, var(--surface)); }

.chip--filter[aria-current="true"] {
  background: var(--heading);
  border-color: var(--heading);
  color: var(--on-band-strong);
}

.chip__count {
  min-width: 1.5em;
  padding-inline: 0.35em;
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--text-muted);
  font-size: 0.8125rem;
  text-align: center;
}

.chip--filter[aria-current="true"] .chip__count { background: var(--band-raised); color: var(--on-band); }

/* On a phone each chip row scrolls sideways inside the panel — never the
   page — so the filters stay short and the first card stays near the top. */
@media (max-width: 47.99em) {
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--space-3) * -1);
    padding-inline: var(--space-3);
    padding-bottom: var(--space-1);
    scrollbar-width: none;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chips > li { flex: none; }
}

/* Search needs JavaScript; without it the chips are plain links to the
   category and type pages, and they work. */
html:not([data-js]) .filters__search { display: none; }

@media (min-width: 64em) {
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
  .filters__search { grid-column: 1 / -1; max-width: 32rem; }
}

.results__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}

.results__count { color: var(--text-muted); font-size: 0.9375rem; margin: 0; }

.results__clear {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 600;
}

.empty .btn { margin-top: var(--space-2); }

/* boot.js sets data-filtering when a /products URL carries filters: the
   pre-rendered full list stays hidden until app.js has applied them. If the
   script never runs, the list appears after 1.5s anyway. */
html[data-filtering] [data-product-results] {
  visibility: hidden;
  animation: filtering-fallback 0s linear 1.5s forwards;
}

@keyframes filtering-fallback {
  to { visibility: visible; }
}

/* ---- product detail ----------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.crumbs a { color: var(--link); }

.product__layout { display: grid; gap: var(--space-4); }

.product__media .media {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.product__title { font-size: 2.25rem; margin-bottom: var(--space-2); }

.product__tagline {
  font-size: var(--scale-lead);
  color: var(--accent-strong);
  font-weight: 600;
}

.product__desc { max-width: 65ch; }

.traits { margin-bottom: var(--space-4); }

.traits__title {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.traits__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Key features from the company's leaflets: a plain list, so a sentence
   never masquerades as a chip printed on the pack. */
.features { margin-bottom: var(--space-4); }
.features__title { font-size: 1.25rem; margin: 0 0 var(--space-2); }
.features__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.feature { display: flex; gap: var(--space-2); align-items: flex-start; }
.feature__icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15em; color: var(--accent); }

.trait {
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--surface-tint);
  border: 1px solid var(--border-strong);
  color: var(--accent-strong);
  font-weight: 600;
  font-size: 0.9375rem;
}

.specs {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.specs__row { border-bottom: 1px solid var(--border); }
.specs__row:last-child { border-bottom: 0; }

.specs__label,
.specs__value {
  padding: var(--space-2) var(--space-3);
  text-align: start;
  vertical-align: top;
}

.specs__label {
  font-weight: 600;
  color: var(--text-muted);
  width: 45%;
  background: var(--surface-alt);
}

/* Below 400px a two-column table crushes long Devanagari values, so the rows
   stack instead. */
@media (max-width: 24.99em) {
  .specs, .specs tbody, .specs__row, .specs__label, .specs__value { display: block; width: auto; }
  .specs__label { background: transparent; padding-bottom: 0; }
  .specs__value { padding-top: var(--space-1); }
  .specs__row { padding-block: var(--space-2); }
}

.packs { display: grid; gap: var(--space-3); }
.packs__set { border: 0; margin: 0; padding: 0; min-width: 0; }

.packs__title, .grower-note__title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
  padding: 0;
}

.packs__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.pack { position: relative; }
.pack input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }

.pack span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 600;
  font-size: 0.9375rem;
}

.pack input:checked + span { background: var(--heading); border-color: var(--heading); color: var(--on-band-strong); }
.pack input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.grower-note {
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--surface-alt);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius);
}

.grower-note p { margin: 0; }

.product__cta { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); }

@media (min-width: 48em) {
  .product__layout { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-5); align-items: start; }
  .product__title { font-size: 3rem; }
}

/* ---- about -------------------------------------------------------------- */

.prose { max-width: 70ch; }

.legal__body h2 { font-size: 1.375rem; margin-top: var(--space-5); }
.legal__body ul { padding-left: 1.25rem; display: grid; gap: var(--space-2); }
.legal__body a { color: var(--link); overflow-wrap: anywhere; }
.legal__contact { list-style: none; padding-left: 0; }

/* ---- 404 ----------------------------------------------------------------
   One file for every missing path: the English block shows unless boot.js
   marked a /hi/ address. */
.not-found__lang[data-lang="hi"] { display: none; }
html[data-path-lang="hi"] .not-found__lang[data-lang="hi"] { display: block; }
html[data-path-lang="hi"] .not-found__lang[data-lang="en"] { display: none; }

.not-found {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}

.not-found__inner {
  display: grid;
  align-items: center;
  gap: var(--space-5);
  min-height: calc(70svh - var(--header-h));
}

.not-found__code {
  margin: 0;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 24vw, 10rem);
  line-height: 0.85;
}

.not-found__title {
  margin: var(--space-3) 0 0;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 3.25rem);
  line-height: 1;
  text-transform: uppercase;
}

:lang(hi) .not-found__title { font-family: var(--font-body); text-transform: none; }

.not-found__lead {
  max-width: 34rem;
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: 1.125rem;
}

.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.not-found__search {
  display: flex;
  gap: var(--space-2);
  max-width: 30rem;
  margin-top: var(--space-4);
}

.not-found__input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.not-found__submit { flex: none; padding-inline: var(--space-3); }

.not-found__art { display: grid; place-items: center; }

.not-found__illustration {
  width: min(56vw, 16rem);
  height: auto;
  aspect-ratio: 1;
  padding: var(--space-5);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--accent-strong);
}

@media (min-width: 56em) {
  .not-found__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .not-found__illustration { width: 22rem; }
}
.prose__lead { font-size: var(--scale-lead); color: var(--text-muted); }
.prose__meta { color: var(--text-muted); font-size: 0.9375rem; }

.highlights { display: grid; gap: var(--space-3); margin: var(--space-4) 0; }

.highlight {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.highlight .icon { color: var(--accent); margin-top: 0.2em; }

/* ---- page hero: About and Dealers --------------------------------------
   The same light mint as the home page's hero: the page's name, its promise
   and a row of real packs. */
.page-hero {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  overflow-x: clip;
}

.page-hero__inner { display: grid; gap: var(--space-5); align-items: center; }
.page-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.page-hero__kicker { margin: 0; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }
.page-hero__title { margin: 0; font-size: clamp(2.5rem, 10vw, 4.5rem); line-height: 0.95; text-transform: uppercase; color: var(--heading); }
.page-hero__tagline { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }
:lang(hi) .page-hero__tagline,
:lang(hi) .page-hero__kicker { letter-spacing: 0; }
.page-hero__lead { margin: 0; font-size: var(--scale-lead); line-height: 1.7; max-width: 60ch; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 0; }

.page-hero__packs { display: flex; justify-content: center; align-items: flex-end; padding-inline: var(--space-3); }
.page-hero__packs-pack {
  width: 24%;
  max-width: 150px;
  margin-inline: -3%;
  background: none;
  border-radius: 0;
  filter: drop-shadow(0 12px 16px var(--shadow-pack));
  animation: hero-float 6s ease-in-out infinite;
}
.page-hero__packs-pack:nth-child(odd) { transform: rotate(-6deg); }
.page-hero__packs-pack:nth-child(even) { transform: rotate(6deg) translateY(-8%); animation-delay: -3s; }
.page-hero__packs-pack:nth-child(3) { z-index: 1; width: 30%; transform: none; }

@media (min-width: 56em) {
  .page-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---- mission ------------------------------------------------------------ */
.mission { background: var(--band); color: var(--on-band); --focus: var(--mint-100); }
.mission__inner { max-width: 60rem; text-align: center; }
.mission__label { margin: 0 0 var(--space-3); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-band-muted); }
.mission__quote { margin: 0; }
.mission__quote p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: 1.15;
  color: var(--on-band-strong);
}
:lang(hi) .mission__quote p { font-family: var(--font-body); font-weight: 600; line-height: 1.5; }

/* ---- values ------------------------------------------------------------- */
.values__grid { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

.value-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.value-card__icon { width: 3.25rem; height: 3.25rem; color: var(--accent-strong); }
.value-card__title { margin: 0; font-size: 1.5rem; color: var(--heading); }
.value-card__text { margin: 0; color: var(--text-muted); }

@media (min-width: 40em) { .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .values__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- journey: a timeline down a line of the brand green ----------------- */
.timeline { position: relative; display: grid; gap: var(--space-4); margin: 0; padding: 0 0 0 var(--space-5); list-style: none; }

.timeline::before {
  content: "";
  position: absolute;
  inset-block: var(--space-2);
  inset-inline-start: 0.6rem;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.timeline__item { position: relative; display: grid; gap: var(--space-2); }

.timeline__item::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  inset-inline-start: calc(var(--space-5) * -1 + 0.2rem);
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--surface);
  border: 4px solid var(--primary);
}

.timeline__when { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--primary); }
.timeline__card { padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.timeline__title { margin: 0 0 var(--space-1); font-size: 1.375rem; color: var(--heading); }
.timeline__text { margin: 0; color: var(--text-muted); }

@media (min-width: 48em) {
  .timeline__item { grid-template-columns: 8rem minmax(0, 1fr); align-items: start; gap: var(--space-4); }
}

/* ---- company details ---------------------------------------------------- */
.details__inner { display: grid; gap: var(--space-4); align-items: start; }
.details__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.details__text .section__title { margin: 0; }
@media (min-width: 56em) { .details__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-5); } }

/* ---- dealers: promises, steps, and the closing band --------------------- */
.benefits { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

.benefit {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--band);
  border-radius: var(--radius-lg);
  color: var(--on-band);
  box-shadow: var(--shadow);
}

.benefit__icon { width: 3.25rem; height: 3.25rem; color: var(--on-band-strong); }
.benefit__title { margin: 0; font-size: 1.5rem; color: var(--on-band-strong); }
.benefit__text { margin: 0; color: var(--on-band); }

@media (min-width: 40em) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.steps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; counter-reset: step; }

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.step__number {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-contrast);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
}

.step__title { margin: 0; font-size: 1.375rem; color: var(--heading); }
.step__text { margin: 0; color: var(--text-muted); }

@media (min-width: 40em) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.dealer-cta { --focus: var(--mint-100); background: var(--band); color: var(--on-band); padding-block: var(--space-6); }
.dealer-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.dealer-cta__title { color: var(--on-band-strong); font-size: clamp(2rem, 6vw, 3rem); text-transform: uppercase; margin-bottom: var(--space-2); }
.dealer-cta__text { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 2rem; }
.dealer-cta__text a { color: var(--on-band-strong); text-decoration: none; }

/* ---- videos -------------------------------------------------------------
   Cards are posters that become the YouTube player when tapped (app.js).
   A card takes its video's shape: 9:16 for phone video, 16:9 for "wide".
   Home: one swipeable row straight after the hero, arrows from 56em.
   /videos: the same cards wrapped, grouped by topic. */
.videos-home { overflow: hidden; }

.videos-home__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

.videos-home__foot { margin-top: var(--space-3); }

.rail__nav:not([hidden]) { display: none; }

.rail__btn {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.rail__btn:disabled { opacity: 0.4; cursor: default; }
.rail__btn--prev .rail__icon { transform: rotate(180deg); }

.video-rail {
  --video-h: clamp(21rem, 56svh, 29rem);
  --rail-inset: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0 var(--rail-inset) var(--space-2);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-inset);
  scrollbar-width: none;
}

.video-rail::-webkit-scrollbar { display: none; }

.video-wall {
  --video-h: 18.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4) var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.video-card {
  flex: none;
  width: calc(var(--video-h) * 9 / 16);
  scroll-snap-align: start;
  transition: opacity 0.3s var(--ease-out);
}

/* While one video plays, the rest step back; a pointer brings one forward. */
.has-playing > .video-card:not(.video-card--playing) { opacity: 0.35; }
/* …at once, not after the scroll reveal's stagger delay. */
html[data-js] .has-playing > .video-card.reveal { transition: opacity 0.3s var(--ease-out); }
.has-playing > .video-card:not(.video-card--playing):hover,
.has-playing > .video-card:not(.video-card--playing):focus-within { opacity: 1; }

.video-card--wide { width: min(calc(100vw - 2 * var(--gutter)), calc(var(--video-h) * 16 / 9)); }

.video-card__link {
  display: block;
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
}

.video-card__frame {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--band);
  box-shadow: var(--shadow);
}

.video-card--wide .video-card__frame { aspect-ratio: 16 / 9; }

.video-card__frame .media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
}

.video-card__frame .media__img,
.video-card__thumb,
.video-card__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin: -2rem 0 0 -2rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-contrast);
  box-shadow: var(--shadow);
  transition: transform 0.2s var(--ease-out);
}

.video-card__link:hover .video-card__play,
.video-card__link:focus-visible .video-card__play { transform: scale(1.1); }

.video-card__play-icon { width: 1.75rem; height: 1.75rem; margin-left: 0.2rem; }

.video-card__topic {
  margin: var(--space-2) 0 0;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:lang(hi) .video-card__topic { letter-spacing: 0; }

.video-card__title {
  margin: var(--space-1) 0 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

/* On /videos the group heading already names the topic. */
.video-wall .video-card__topic { display: none; }

.videos-page__group + .videos-page__group { margin-top: var(--space-5); }

.videos-page__topic {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-transform: uppercase;
}

@media (min-width: 40em) {
  .video-wall { --video-h: 26rem; }
}

@media (min-width: 56em) {
  .rail__nav:not([hidden]) { display: flex; gap: var(--space-2); }
}

/* ---- contact: one page, a farmer's form or a dealer's --------------------
   Two in-page links switch the form by :target, so it works without
   JavaScript: /contact shows the farmer's form, /contact#dealer the dealer's. */
.enquiry { display: flex; flex-direction: column; gap: var(--space-3); }

.enquiry__switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--surface-sunk);
  border-radius: 999px;
}

.enquiry__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  color: var(--text-muted);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

/* A jump to #dealer lands with the switch still in view above the form. */
.enquiry__panel { scroll-margin-top: calc(var(--header-h) + var(--tap) + var(--space-5)); }
.enquiry__panel--dealer { display: none; }
.enquiry:has(#dealer:target) .enquiry__panel--farmer { display: none; }
.enquiry:has(#dealer:target) .enquiry__panel--dealer { display: block; }

.enquiry:not(:has(#dealer:target)) .enquiry__tab--farmer,
.enquiry:has(#dealer:target) .enquiry__tab--dealer {
  background: var(--surface);
  color: var(--heading);
  box-shadow: var(--shadow-sm);
}

/* ---- contact ------------------------------------------------------------ */

.contact__layout { display: grid; gap: var(--space-4); }

.contact-form {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.contact__details {
  padding: var(--space-4);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  height: max-content;
}

.contact__title { font-size: 1.5rem; }

.contact__details .footer__link { color: var(--link); }
.contact__details .footer__text { color: var(--text); }
.contact__details .icon { color: var(--accent); }
.contact__details .btn { margin-top: var(--space-3); }

@media (min-width: 48em) {
  .contact__layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}

/* ---- empty states ------------------------------------------------------- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}

.empty__icon { width: 2.5rem; height: 2.5rem; color: var(--text-faint); }
.empty__title { font-weight: 600; margin: 0; }
.empty__text { color: var(--text-muted); margin: 0; max-width: 40ch; }

/* ---- footer ------------------------------------------------------------- */

.site-footer {
  --focus: var(--mint-100);
  border-top: 1px solid var(--band-raised);
  background: var(--band);
  color: var(--on-band);
  padding-block: var(--space-5) var(--space-3);
}

.site-footer .brand,
.footer__title { color: var(--on-band-strong); }

.site-footer .brand { margin-inline-end: 0; margin-bottom: var(--space-3); }

/* The mark's green seed disappears on forest, so it sits on a light chip. */
.brand__chip {
  display: inline-flex;
  padding: var(--space-1);
  border-radius: var(--radius);
  background: var(--surface);
}

.footer__grid { display: grid; gap: var(--space-5); }

.footer__title {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.footer__about { color: var(--on-band-muted); font-size: 0.9375rem; max-width: 40ch; }
.footer__entity { color: var(--on-band); font-size: 0.9375rem; max-width: 40ch; overflow-wrap: anywhere; }
.footer__label { display: block; color: var(--on-band-muted); font-size: 0.8125rem; }

.footer__list { display: grid; gap: var(--space-1); }

.footer__item { display: flex; align-items: center; gap: var(--space-2); }
.footer__item:has(.footer__label) { align-items: flex-start; padding-block: var(--space-1); }
.footer__item .icon { color: var(--on-band-muted); }

.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--on-band);
  text-decoration: none;
}

.footer__link:hover { color: var(--on-band-strong); text-decoration: underline; }

/* Each icon sits centred in a full tap target; pull the row back by the
   difference so the first icon lines up with the icons above it. */
.footer__social { gap: var(--space-1); margin-inline-start: calc((1.5rem - var(--tap)) / 2); }
.footer__social-link { justify-content: center; min-width: var(--tap); }
.footer__social .icon { width: 1.5rem; height: 1.5rem; color: inherit; }
.footer__text { color: var(--on-band); font-size: 0.9375rem; }

.footer__partner {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--band-raised);
}

.footer__partner-label {
  color: var(--on-band-muted);
  font-size: 0.8125rem;
  margin: 0;
}

.footer__partner-chip {
  display: inline-flex;
  max-width: 100%;
  padding: var(--space-1);
  border-radius: var(--radius);
  background: var(--surface);
}

.footer__partner-image {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
}

.footer__partner-link { font-size: 0.9375rem; }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--band-raised);
}

.footer__partner + .footer__bottom { margin-top: var(--space-3); }

.footer__copy { color: var(--on-band-muted); font-size: 0.875rem; margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.footer__legal .footer__link { font-size: 0.875rem; }

@media (min-width: 48em) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--space-4); }
  .footer__partner {
    grid-template-columns: auto auto 1fr;
    align-items: center;
    column-gap: var(--space-3);
  }
  .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---- motion ------------------------------------------------------------
   Plan §6.4. transform and opacity only; nothing animates height, top or
   width. No parallax, no number counters. The hero's packs are never faded
   in: the first one is the LCP. prefers-reduced-motion: reduce turns all of
   it off, and app.js then never holds anything back to reveal. */

/* Scroll reveal: app.js marks only below-the-fold elements pending. */
html[data-js] .reveal[data-reveal="pending"] {
  opacity: 0;
  transform: translateY(var(--reveal-rise)) scale(var(--reveal-scale));
}

html[data-js] .reveal[data-reveal="shown"] {
  transition:
    opacity var(--reveal-duration) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--reveal-duration) var(--ease-out) var(--reveal-delay, 0ms);
}

/* The header condenses past 80px by sliding up, not by resizing. It always
   carries a transform so it is the containing block for the mobile drawer,
   which then opens directly under it wherever the header sits. */
.scroll-sentinel {
  position: absolute;
  top: 80px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.site-header {
  transform: translateY(0);
  transition: transform 200ms var(--ease-out);
}

.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 -12px;
  height: 12px;
  background: linear-gradient(var(--shadow-edge), transparent);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
  pointer-events: none;
}

.site-header[data-condensed] { transform: translateY(-10px); }
.site-header[data-condensed]::after { opacity: 1; }

/* Card lift: only where there is a real hover, never on touch. The deeper
   shadow is a pseudo-element faded in, so only opacity animates. */
.card, .cat-card { transition: transform 200ms var(--ease-out); }

.card::after, .cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
  pointer-events: none;
}

@media (hover: hover) {
  .card:hover, .cat-card:hover { transform: translateY(-4px); }
  .card:hover::after, .cat-card:hover::after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .site-header[data-condensed] { transform: translateY(0); }

  @media (hover: hover) {
    .card:hover, .cat-card:hover { transform: none; }
  }

  html[data-js] .reveal[data-reveal="pending"] { opacity: 1; transform: none; }
}