/* ============================================================
   Prime Agro Food Processing Pvt. Ltd. — Website Stylesheet
   Palette: Tomato · Turmeric Gold · Basil Green
   Supports light (default) and dark themes via [data-theme]
   ============================================================ */

/* ---------- Design tokens : LIGHT (default) ---------- */
:root {
  /* --- Tomato : the primary action colour --- */
  --tomato-700: #9e1618;
  --tomato-600: #c2211f;
  --tomato-500: #e4302f;   /* sampled from the Prime logo */
  --tomato-400: #ef5a52;
  --tomato-200: #f9c3bf;
  --tomato-100: #fde2e0;
  --tomato-50:  #fff5f4;

  /* --- Turmeric gold : the accent --- */
  --turmeric: #d9a441;      /* the gold ring on the logo */
  --turmeric-dark: #a87a1c;
  --turmeric-100: #f8edd4;
  --turmeric-50:  #fdf8ee;

  /* --- Deep maroon / terracotta : the ink & grounding colour ---
     (variable names kept as --green-* so every existing rule keeps
     working; the values are warm, not green.) --- */
  --green-900: #3d1a10;   /* darkest — headings */
  --green-800: #5c2612;   /* deep maroon */
  --green-700: #a8391a;   /* terracotta — icons, secondary */
  --green-600: #c2521f;   /* burnt orange */
  --green-100: #fbe0d2;   /* soft terracotta tint */
  --green-50:  #fdf1e9;   /* faintest warm tint */

  --chili: #c2410c;
  --maroon: #7a1f0c;
  --temple: #b8341a;

  /* --- Surfaces --- */
  --cream: #fdf8f2;
  --cream-dark: #f7ede1;
  --sand: #ecdfcd;
  --white: #ffffff;
  --card: #ffffff;

  /* --- Text --- */
  --ink: #1a1512;
  --ink-soft: #463c35;
  --muted: #7d6f66;
  --line: rgba(26, 21, 18, 0.10);
  --line-strong: rgba(26, 21, 18, 0.16);

  /* --- Radii --- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* --- Shadows (warm-tinted) --- */
  --shadow-sm: 0 1px 2px rgba(80, 30, 15, .06), 0 2px 8px rgba(80, 30, 15, .05);
  --shadow: 0 4px 12px rgba(80, 30, 15, .07), 0 12px 32px rgba(80, 30, 15, .09);
  --shadow-lg: 0 8px 24px rgba(80, 30, 15, .10), 0 24px 64px rgba(80, 30, 15, .13);
  --shadow-tomato: 0 6px 20px rgba(228, 48, 47, .30);

  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;

  --wrap: 1180px;
  --nav-h: 76px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.46, .64, 1);

  color-scheme: light;
}

/* ---------- Design tokens : DARK ---------- */
[data-theme="dark"] {
  --tomato-700: #ff8a70;
  --tomato-600: #ff7057;
  --tomato-500: #ff5c3d;
  --tomato-400: #ff8062;
  --tomato-200: rgba(255, 92, 61, .30);
  --tomato-100: rgba(255, 92, 61, .16);
  --tomato-50:  rgba(255, 92, 61, .08);

  --turmeric: #ffc147;
  --turmeric-dark: #ffd27a;
  --turmeric-100: rgba(255, 193, 71, .16);
  --turmeric-50:  rgba(255, 193, 71, .08);

  --green-900: #f6efe6;          /* headings become light in dark mode */
  --green-800: #e8ddd0;
  --green-700: #f08c5a;          /* warm terracotta, lifted for dark bg */
  --green-600: #f5a173;
  --green-100: rgba(240, 140, 90, .16);
  --green-50:  rgba(240, 140, 90, .08);

  --chili: #ff8a70;
  --maroon: #8a2a12;
  --temple: #d1502c;

  --cream: #14110f;
  --cream-dark: #1b1715;
  --sand: #26201c;
  --white: #1f1a17;
  --card: #1e1а17;
  --card: #1e1a17;

  --ink: #f6f1ea;
  --ink-soft: rgba(246, 241, 234, .74);
  --muted: rgba(246, 241, 234, .50);
  --line: rgba(246, 241, 234, .11);
  --line-strong: rgba(246, 241, 234, .20);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .34), 0 2px 8px rgba(0, 0, 0, .28);
  --shadow: 0 4px 14px rgba(0, 0, 0, .40), 0 14px 36px rgba(0, 0, 0, .34);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, .46), 0 28px 70px rgba(0, 0, 0, .40);
  --shadow-tomato: 0 6px 22px rgba(255, 92, 61, .34);

  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* overflow-x lives on html, and uses clip rather than hidden.
   `hidden` on body makes body its own scroll box, so it grows a second
   vertical scrollbar inset from the page edge — which is what left the
   strip of bare page down the right of every full-bleed row.
   `clip` trims the same overflow without creating a scroll container,
   so the sticky header keeps working. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--green-900);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p + p { margin-top: 1em; }

::selection { background: var(--turmeric); color: var(--green-900); }

/* ---------- Layout helpers ---------- */
.wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(64px, 9vw, 116px) 0; }
.section--tight { padding: clamp(48px, 6vw, 76px) 0; }
.bg-cream-dark { background: var(--cream-dark); }
.bg-green { background: var(--green-900); color: rgba(255,255,255,.80); }
.bg-green h2, .bg-green h3, .bg-green h4 { color: var(--white); }
.bg-white { background: var(--white); }

.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 62ch; }
.measure-sm { max-width: 52ch; }

/* ---------- Eyebrow / section heads ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--turmeric-dark);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--turmeric);
  border-radius: 2px;
}
.eyebrow--center::after {
  content: "";
  width: 26px; height: 2px;
  background: var(--turmeric);
  border-radius: 2px;
}
.bg-green .eyebrow { color: var(--turmeric); }

.section-head { margin-bottom: clamp(36px, 5vw, 60px); }
.section-head p { color: var(--muted); margin-top: 14px; }
.bg-green .section-head p { color: rgba(255,255,255,.72); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 100px;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  overflow: hidden;
  transition: transform .22s var(--ease-spring), box-shadow .22s, background .22s, color .22s, border-color .22s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; flex: none; position: relative; z-index: 1; transition: transform .28s var(--ease-out); }
.btn > * { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg:last-child { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(.98); }

/* sweeping shine on hover */
.btn::after {
  content: ""; position: absolute; top: 0; left: -85%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform: skewX(-22deg); transition: left .65s var(--ease-out); pointer-events: none;
}
.btn:hover::after { left: 130%; }

.btn--primary { background: var(--tomato-500); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--tomato-600); box-shadow: var(--shadow-tomato); }

.btn--gold { background: var(--turmeric); color: #12301f; box-shadow: var(--shadow-sm); }
.btn--gold:hover { background: #f5b32e; box-shadow: var(--shadow); }

.btn--ghost { border: 1.5px solid var(--line-strong); color: var(--green-900); }
.btn--ghost:hover { border-color: var(--tomato-500); color: var(--tomato-600); background: var(--tomato-50); }

.btn--ghost-light { border: 1.5px solid rgba(255,255,255,.28); color: #fff; }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.10); }

.btn--sm { padding: 10px 20px; font-size: .875rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: .92rem; color: var(--tomato-600);
  position: relative;
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1.5px;
  background: var(--tomato-500); transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease-out);
}
.link-arrow:hover::after { transform: scaleX(1); transform-origin: left; }
.link-arrow svg { width: 15px; height: 15px; transition: transform .25s; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.topbar {
  background: var(--green-900);
  color: rgba(255,255,255,.72);
  font-size: .8rem;
  padding: 9px 0;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar a { transition: color .2s; }
.topbar a:hover { color: var(--turmeric); }
.topbar-contact { display: flex; gap: 24px; align-items: center; }
.topbar-contact span { display: inline-flex; align-items: center; gap: 7px; }
.topbar-contact svg { width: 14px; height: 14px; opacity: .7; }
/* Plain inline text, not flex. As a flex box, each text run became its own
   item, so on a narrow screen "2001" broke away onto a line of its own. */
.topbar-tag { display: block; line-height: 1.5; }
.topbar-tag b { color: var(--turmeric); font-weight: 600; }
@media (max-width: 920px) { .topbar-tag { text-align: center; } }
@media (max-width: 560px) { .topbar-place { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 100;
  /* Opaque. It used to be 88% alpha with a backdrop blur — where the blur is
     unsupported or disabled the page simply showed through the bar as you
     scrolled, which is what made it look broken. */
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s, border-color .3s;
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); border-bottom-color: var(--line); }

.nav { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: 24px; }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-logo {
  height: 50px; width: auto; max-width: 190px; object-fit: contain;
  transition: transform .28s var(--ease-spring);
}
.brand:hover .brand-logo { transform: scale(1.04); }
.site-footer .brand-logo {
  height: 58px; background: #fff; padding: 7px 12px; border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
}
[data-theme="dark"] .brand-logo { filter: brightness(1.06); }
@media (max-width: 700px) { .brand-logo { height: 40px; max-width: 150px; } }
.brand-mark {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(145deg, var(--green-600), var(--green-800));
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(26,107,60,.28);
  flex: none;
}
.brand-mark svg { width: 26px; height: 26px; }
.brand-text { line-height: 1.1; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.32rem; font-weight: 700; color: var(--green-900);
  letter-spacing: -.02em; display: block;
}
.brand-sub {
  font-size: .61rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > li > a {
  position: relative;
  display: block; padding: 9px 14px; border-radius: 100px;
  font-size: .92rem; font-weight: 500; color: var(--ink-soft);
  transition: color .22s, background .22s;
}
.nav-links > li > a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  border-radius: 2px; background: var(--tomato-500);
  transform: scaleX(0); transform-origin: right;
  transition: transform .34s var(--ease-out);
}
.nav-links > li > a:hover { color: var(--tomato-600); }
.nav-links > li > a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links > li > a.is-active {
  color: var(--tomato-600); font-weight: 600; background: var(--tomato-50);
}
.nav-links > li > a.is-active::after { transform: scaleX(1); }

.nav-cta { display: flex; align-items: center; gap: 10px; flex: none; }

/* ---------- Theme toggle ---------- */
/* ---------- Light / dark switch ----------
   A real sliding switch rather than a button, so the state is readable at a
   glance instead of having to work out what the icon means. The knob carries
   the icon and the two icons crossfade as it travels — showing both at once
   inside a 56px track just makes a cramped, ambiguous control.
   Track width 56 - padding 3 either side - knob 24 = 26px of travel. */
.theme-switch {
  position: relative; flex: none;
  width: 56px; height: 30px; border-radius: 100px;
  background: var(--cream-dark);
  border: 1px solid var(--line-strong);
  padding: 0; cursor: pointer;
  transition: background .35s ease, border-color .35s ease, transform .22s var(--ease-spring);
}
.theme-switch:hover { border-color: var(--tomato-500); transform: translateY(-1px); }
.theme-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--tomato-200); }
[data-theme="dark"] .theme-switch { background: #2a2320; border-color: rgba(246,241,234,.20); }
[data-theme="dark"] .theme-switch:hover { border-color: var(--tomato-500); }

.theme-switch-knob {
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.26);
  display: grid; place-items: center;
  transition: transform .38s cubic-bezier(.34,1.4,.64,1), background .35s ease;
}
[data-theme="dark"] .theme-switch-knob { transform: translateX(26px); background: #f6efe6; }

/* The knob is a light disc in both themes, so the ink is fixed dark — the
   same trap the carousel arrows had, where a themed colour turned white. */
.theme-switch svg {
  position: absolute; width: 14px; height: 14px; color: #3d1a10;
  transition: opacity .26s ease, transform .38s cubic-bezier(.34,1.4,.64,1);
}
.theme-switch .i-sun  { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-switch .i-moon { opacity: 0; transform: rotate(-80deg) scale(.55); }
[data-theme="dark"] .theme-switch .i-sun  { opacity: 0; transform: rotate(80deg) scale(.55); }
[data-theme="dark"] .theme-switch .i-moon { opacity: 1; transform: rotate(0deg) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .theme-switch, .theme-switch-knob, .theme-switch svg { transition: none; }
}

/* ---------- Scroll progress bar ---------- */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 200;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--tomato-500), var(--turmeric));
  pointer-events: none;
}

.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; place-items: center; border: 1px solid var(--line); }
.nav-toggle svg { width: 22px; height: 22px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 112px);
  background:
    radial-gradient(1100px 520px at 80% -10%, rgba(228,48,47,.13), transparent 62%),
    radial-gradient(900px 500px at 8% 105%, rgba(217,164,65,.20), transparent 60%),
    radial-gradient(700px 420px at 45% 60%, rgba(43,107,68,.07), transparent 62%),
    var(--cream);
  overflow: hidden;
}
[data-theme="dark"] .hero {
  background:
    radial-gradient(1100px 520px at 80% -10%, rgba(255,92,61,.16), transparent 62%),
    radial-gradient(900px 500px at 8% 105%, rgba(255,193,71,.11), transparent 60%),
    var(--cream);
}

/* floating spice specks */
.hero-specks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-specks i {
  position: absolute; border-radius: 50%; display: block;
  animation: speck linear infinite;
}
@keyframes speck {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10%  { opacity: .55; }
  90%  { opacity: .40; }
  100% { transform: translateY(-118vh) translateX(38px) scale(.65); opacity: 0; }
}
.hero-grid, .hero .wrap > * { position: relative; z-index: 2; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 68px); align-items: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--line);
  padding: 7px 16px 7px 8px; border-radius: 100px;
  font-size: .8rem; font-weight: 500; color: var(--ink-soft);
  box-shadow: var(--shadow-sm); margin-bottom: 24px;
}
.hero-badge b {
  background: var(--green-100); color: var(--green-800);
  padding: 3px 11px; border-radius: 100px; font-size: .72rem;
  font-weight: 700; letter-spacing: .04em;
}
.hero h1 { margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--tomato-600); position: relative; white-space: nowrap; }
.hero h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .24em;
  background: linear-gradient(90deg, rgba(228,48,47,.22), rgba(217,164,65,.34));
  border-radius: 4px; z-index: -1;
  transform: scaleX(0); transform-origin: left;
  animation: swipe .85s var(--ease-out) .75s forwards;
}
@keyframes swipe { to { transform: scaleX(1); } }

/* Odia sub-headline */
.hero-odia {
  display: block; font-family: var(--font-body); font-weight: 500;
  font-size: clamp(.95rem, 1.6vw, 1.18rem); color: var(--turmeric-dark);
  letter-spacing: 0; margin-bottom: 14px; opacity: 0;
  animation: fadeUp .8s var(--ease-out) .1s forwards;
}
[data-theme="dark"] .hero-odia { color: var(--turmeric); }

.hero-lede { font-size: clamp(1.02rem, 1.5vw, 1.14rem); color: var(--ink-soft); max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* staggered entrance for hero children */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.hero-badge, .hero h1, .hero-lede, .values, .hero-actions, .hero-stats {
  opacity: 0; animation: fadeUp .85s var(--ease-out) forwards;
}
.hero-badge   { animation-delay: .05s; }
.hero h1      { animation-delay: .16s; }
.hero-lede    { animation-delay: .28s; }
.values       { animation-delay: .36s; }
.hero-actions { animation-delay: .38s; }
.hero-stats   { animation-delay: .48s; }
.hero-art     { opacity: 0; animation: fadeUp 1s var(--ease-out) .22s forwards; }

/* four numbers, one row — as flex-wrap the fourth dropped to its own line */
.hero-stats {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: start;
  column-gap: clamp(18px, 2.8vw, 42px); row-gap: 22px;
  margin-top: 46px; padding-top: 32px; border-top: 1px solid var(--line);
}
.hero-stats div strong {
  display: block; font-family: var(--font-display);
  font-size: 2rem; color: var(--tomato-600); line-height: 1; font-weight: 700;
}
.hero-stats div span { font-size: .82rem; color: var(--muted); }

/* Hero art.
   The aspect-ratio that used to live here was for the old green panel version
   of this element, which was a <div>. The hero art is a real <img> now, and a
   forced ratio stretches the photograph — the jars were coming out 12% taller
   than they are. Shape comes from the file. */
.hero-art { position: relative; }
.hero-art-main {
  position: absolute; inset: 0;
  border-radius: var(--radius-xl);
  background: linear-gradient(150deg, var(--green-700), var(--green-900) 70%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero-art-main::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(224,160,32,.34), transparent 46%),
    radial-gradient(circle at 82% 76%, rgba(194,65,12,.30), transparent 48%);
}
.hero-art-main svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hero-float {
  position: absolute; background: var(--white);
  border-radius: var(--radius); padding: 15px 19px;
  box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 13px;
  z-index: 3;
}
.hero-float-icon {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: grid; place-items: center; background: var(--green-100);
}
.hero-float-icon svg { width: 21px; height: 21px; }
.hero-float b { display: block; font-size: .87rem; color: var(--green-900); font-weight: 700; line-height: 1.25; }
.hero-float span { font-size: .73rem; color: var(--muted); }
.hero-float--tl { top: 7%; left: -7%; animation: float 6s ease-in-out infinite; }
.hero-float--br { bottom: 9%; right: -6%; animation: float 6s ease-in-out infinite 3s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ---------- Marquee strip ---------- */
.strip {
  background: linear-gradient(100deg, var(--tomato-600), var(--tomato-500) 45%, #d8531f);
  padding: 16px 0; overflow: hidden; position: relative;
}
.strip::before, .strip::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.strip::before { left: 0;  background: linear-gradient(90deg, var(--tomato-600), transparent); }
.strip::after  { right: 0; background: linear-gradient(270deg, #d8531f, transparent); }
/* 136s, not 34s. The duration is for one full pass of the track, so it has to
   scale with the number of items or the words fly past. It was 34s for ten
   products; the list is forty now, so four times the distance needs four times
   the time to read at the same speed. Change this if the list changes length. */
.strip-track { display: flex; gap: 52px; width: max-content; animation: marquee 136s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
.strip-track span {
  display: inline-flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,.94); font-size: .84rem;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.strip-track span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--turmeric); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   PROMISE PILLARS
   Four statements under the marquee. The cards ride the site's
   existing .reveal stagger; the icon has its own entrance so it
   lands a beat after the card rather than with it.
   ============================================================ */
.pillars {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  list-style: none; padding: 0; margin: 0;
}
.pillar {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px 24px 26px;
  position: relative; overflow: hidden;
  transition: transform .3s cubic-bezier(.34,1.3,.64,1), box-shadow .3s, border-color .3s;
}
/* a warm hairline that wipes across the top on hover */
.pillar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--tomato-500), var(--turmeric));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--ease-out);
}
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--tomato-200); }
.pillar:hover::before { transform: scaleX(1); }

.pillar-ico {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 16px; margin-bottom: 18px;
  background: var(--tomato-50); color: var(--tomato-600);
  transition: transform .4s cubic-bezier(.34,1.4,.64,1), background .3s;
}
.pillar-ico svg { width: 25px; height: 25px; }
.pillar:hover .pillar-ico { transform: rotate(-8deg) scale(1.08); background: var(--tomato-100); }

.pillar h3 { font-size: 1.06rem; margin-bottom: 8px; }
.pillar p  { font-size: .9rem; color: var(--muted); line-height: 1.6; }

/* The icon pops in once the card has arrived. Only when scripting is alive —
   without it .is-in never lands and the icon would sit at scale 0 forever. */
.js .pillar.reveal .pillar-ico { opacity: 0; transform: scale(.55); }
.js .pillar.reveal.is-in .pillar-ico {
  opacity: 1; transform: scale(1);
  transition: opacity .35s ease .18s, transform .5s cubic-bezier(.34,1.5,.64,1) .18s;
}

.pillars-note {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 24px auto 0; font-size: .88rem; color: var(--muted); text-align: center;
}
.pillars-note svg { width: 17px; height: 17px; color: var(--tomato-600); flex: none; }
.pillars-note b { color: var(--ink); font-weight: 700; }

.pillars--3 { grid-template-columns: repeat(3, 1fr); }

/* the quality policy sits under the founder's words, quieter */
.quote--policy { padding-top: clamp(22px, 3vw, 32px); }
.quote--policy::before { display: none; }
.quote--policy blockquote { font-size: 1rem; margin-top: 8px; color: var(--ink-soft); }

@media (max-width: 900px) { .pillars, .pillars--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pillars, .pillars--3 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .pillar, .pillar-ico, .pillar::before { transition: none; }
  .js .pillar.reveal .pillar-ico { opacity: 1; transform: none; }
}

/* ============================================================
   CARDS & GRIDS
   ============================================================ */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  transition: transform .28s cubic-bezier(.34,1.3,.64,1), box-shadow .28s, border-color .28s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(26,107,60,.22); }
.card h3 { margin-bottom: 10px; }
.card p { font-size: .95rem; color: var(--muted); }

.card-icon {
  width: 52px; height: 52px; border-radius: 15px;
  background: var(--green-50); border: 1px solid var(--green-100);
  display: grid; place-items: center; margin-bottom: 20px;
}
.card-icon svg { width: 26px; height: 26px; }
.card-icon--gold { background: #fdf5e3; border-color: #f6e5bd; }

/* ---------- Product category cards ---------- */
.pcard {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--white); border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.34,1.3,.64,1), box-shadow .3s;
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pcard-art {
  aspect-ratio: 4 / 3; position: relative; overflow: hidden;
  display: grid; place-items: center;
}
.pcard-art svg { width: 62%; height: 62%; position: relative; z-index: 1; transition: transform .4s cubic-bezier(.34,1.3,.64,1); }
.pcard:hover .pcard-art svg { transform: scale(1.07) rotate(-3deg); }
.pcard-art--spice   { background: linear-gradient(140deg, #fbe3c0, #f0b76a); }
.pcard-art--paste   { background: linear-gradient(140deg, #dff0d4, #a8ce8c); }
.pcard-art--sauce   { background: linear-gradient(140deg, #fbd2c0, #ec8f6e); }
.pcard-art--pickle  { background: linear-gradient(140deg, #f8ecc0, #ddc35c); }
.pcard-art--snack   { background: linear-gradient(140deg, #f6e0cc, #dfae7c); }
.pcard-art--oil     { background: linear-gradient(140deg, #fdf0c4, #efc94f); }
.pcard-art--home    { background: linear-gradient(140deg, #d5eaf2, #8ec2d6); }
.pcard-art--salt    { background: linear-gradient(140deg, #ece7f5, #b6aad3); }
.pcard-body { padding: 24px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.pcard-body h3 { margin-bottom: 8px; }
.pcard-body p { font-size: .92rem; color: var(--muted); flex: 1; }
.pcard-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.tag {
  font-size: .72rem; font-weight: 600; padding: 5px 12px;
  border-radius: 100px; background: var(--cream-dark); color: var(--ink-soft);
}
/* The pill is white in BOTH themes, so its ink has to be a fixed dark value.
   It used to be var(--green-900), which the dark theme flips to #f6efe6 —
   white text on a white pill, so the product count simply disappeared. Any
   element with a hardcoded light background needs hardcoded dark ink. */
.pcard-count {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  color: #3d1a10; font-size: .72rem; font-weight: 700;
  padding: 5px 13px; border-radius: 100px;
  box-shadow: 0 1px 4px rgba(0,0,0,.14);
}
[data-theme="dark"] .pcard-count { background: rgba(255,255,255,.94); color: #3d1a10; }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split--reverse .split-media { order: 2; }
.split-media {
  border-radius: var(--radius-xl); overflow: hidden;
  aspect-ratio: 4 / 3.2; position: relative;
  box-shadow: var(--shadow);
}
.split-media--green { background: linear-gradient(150deg, var(--green-600), var(--green-900)); }
.split-media--warm  { background: linear-gradient(150deg, #f0b76a, #c2410c); }
.split-media svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.checklist { margin-top: 26px; display: grid; gap: 14px; }
.checklist li { display: flex; gap: 13px; align-items: flex-start; font-size: .96rem; }
.checklist svg { width: 21px; height: 21px; flex: none; margin-top: 2px; }
.checklist b { color: var(--green-900); font-weight: 600; }

/* ---------- Stats band ---------- */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; text-align: center; }
.stats-band div strong {
  display: block; font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.1rem); color: var(--turmeric);
  line-height: 1; font-weight: 700;
}
.stats-band div span { font-size: .85rem; color: rgba(255,255,255,.65); display: block; margin-top: 10px; }

/* ---------- Process steps ---------- */
.steps { counter-reset: step; display: grid; gap: 26px; grid-template-columns: repeat(4, 1fr); }
.step { position: relative; padding-top: 22px; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 700;
  color: rgba(26,107,60,.14); line-height: 1; display: block; margin-bottom: 12px;
}
.step::after {
  content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 3px;
  background: var(--turmeric); border-radius: 3px;
}
.step h4 { font-size: 1.08rem; margin-bottom: 8px; }
.step p { font-size: .9rem; color: var(--muted); }

/* ---------- Certifications ---------- */
.certs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.cert {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 16px; text-align: center;
  transition: transform .25s, box-shadow .25s;
}
.cert:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.cert-badge {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--green-50); border: 2px solid var(--green-100);
  display: grid; place-items: center;
}
.cert-badge svg { width: 25px; height: 25px; }
.cert b { display: block; font-size: .92rem; color: var(--green-900); font-family: var(--font-display); }
.cert span { font-size: .75rem; color: var(--muted); }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 34px; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(var(--green-600), var(--turmeric));
  border-radius: 2px;
}
.timeline li { position: relative; padding-bottom: 34px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -34px; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--green-600);
  box-shadow: 0 0 0 4px var(--cream);
}
.timeline .yr {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  color: var(--turmeric-dark); font-size: 1.05rem; margin-bottom: 4px;
}
.timeline h4 { font-size: 1.05rem; margin-bottom: 5px; }
.timeline p { font-size: .93rem; color: var(--muted); }

/* ---------- Quote / testimonial ---------- */
.quote {
  background: var(--white); border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 46px); border: 1px solid var(--line);
  position: relative;
}
.quote::before {
  content: "\201C"; position: absolute; top: 6px; left: 22px;
  font-family: var(--font-display); font-size: 5rem; color: var(--green-100); line-height: 1;
}
.quote blockquote {
  font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--green-900); line-height: 1.5; position: relative; z-index: 1;
}
.quote-by { margin-top: 22px; display: flex; align-items: center; gap: 14px; }
.quote-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: linear-gradient(145deg, var(--green-600), var(--green-800));
  display: grid; place-items: center; color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
}
.quote-by b { display: block; color: var(--green-900); font-size: .95rem; }
.quote-by span { font-size: .82rem; color: var(--muted); }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, #7a1f0c, #12301f 78%);
  border-radius: var(--radius-xl); padding: clamp(38px, 6vw, 68px);
  position: relative; overflow: hidden; text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(217,164,65,.34), transparent 48%),
    radial-gradient(circle at 88% 84%, rgba(228,48,47,.42), transparent 46%);
  animation: ctaShift 16s ease-in-out infinite alternate;
}
@keyframes ctaShift {
  from { transform: scale(1) translate(0,0); }
  to   { transform: scale(1.16) translate(-3%, 2%); }
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); margin-bottom: 14px; }
.cta-band p { color: rgba(255,255,255,.76); max-width: 56ch; margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  padding: clamp(52px, 7vw, 88px) 0 clamp(46px, 6vw, 72px);
  background:
    radial-gradient(880px 420px at 82% -20%, rgba(224,160,32,.15), transparent 62%),
    var(--cream-dark);
  border-bottom: 1px solid var(--line);
}
.crumbs { font-size: .82rem; color: var(--muted); margin-bottom: 18px; display: flex; gap: 9px; align-items: center; }
.crumbs a:hover { color: var(--green-700); }
.crumbs span { opacity: .5; }
.page-hero p { max-width: 62ch; margin-top: 16px; font-size: 1.05rem; }

/* ============================================================
   PRODUCTS PAGE
   ============================================================ */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.filter-btn {
  padding: 10px 20px; border-radius: 100px; font-size: .88rem; font-weight: 600;
  background: var(--white); border: 1px solid var(--line); color: var(--ink-soft);
  transition: all .2s;
}
.filter-btn:hover { border-color: var(--green-600); color: var(--green-800); }
.filter-btn.is-active { background: var(--green-700); border-color: var(--green-700); color: var(--white); }

.item-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.item {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .25s, box-shadow .25s;
  display: flex; flex-direction: column;
}
.item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.item.is-hidden { display: none; }
.item-art { aspect-ratio: 1 / 1; display: grid; place-items: center; position: relative; }
.item-art svg { width: 46%; height: 46%; }
.item-body { padding: 16px 18px 20px; }
.item-body h4 { font-size: 1rem; margin-bottom: 4px; color: var(--green-900); }
.item-body span { font-size: .78rem; color: var(--muted); }
.item-packs { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.pack { font-size: .69rem; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: var(--cream-dark); color: var(--ink-soft); }

/* SVG sprite icons inside product tiles */
.item-art svg, .pcard-art svg[data-sprite] {
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.pcard-art--spice,  .item-art.pcard-art--spice  { color: #8a4a12; }
.pcard-art--paste,  .item-art.pcard-art--paste  { color: #3d6b1f; }
.pcard-art--sauce,  .item-art.pcard-art--sauce  { color: #8f3410; }
.pcard-art--pickle, .item-art.pcard-art--pickle { color: #7a6410; }
.pcard-art--snack,  .item-art.pcard-art--snack  { color: #7a4a1c; }
.pcard-art--oil,    .item-art.pcard-art--oil    { color: #7a5c0c; }
.pcard-art--salt,   .item-art.pcard-art--salt   { color: #4a4066; }
.pcard-art--home,   .item-art.pcard-art--home   { color: #1e5570; }

.cat-block { scroll-margin-top: calc(var(--nav-h) + 30px); }
.cat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.cat-head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.cat-head p { font-size: .93rem; color: var(--muted); max-width: 56ch; margin-top: 6px; }
.cat-rule { height: 1px; background: var(--line); margin-bottom: 26px; }

.note-box {
  background: var(--green-50); border: 1px solid var(--green-100);
  border-left: 4px solid var(--green-600);
  border-radius: var(--radius); padding: 22px 26px;
  display: flex; gap: 16px; align-items: flex-start;
}
.note-box svg { width: 22px; height: 22px; flex: none; margin-top: 3px; }
.note-box p { font-size: .93rem; margin: 0; }
.note-box b { color: var(--green-900); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 4vw, 56px); align-items: start; }

.info-list { display: grid; gap: 22px; }
.info-item { display: flex; gap: 16px; align-items: flex-start; }
.info-icon {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  background: var(--green-50); border: 1px solid var(--green-100);
  display: grid; place-items: center;
}
.info-icon svg { width: 22px; height: 22px; }
.info-item b { display: block; color: var(--green-900); font-size: .95rem; margin-bottom: 3px; font-family: var(--font-display); }
.info-item p, .info-item a { font-size: .93rem; color: var(--muted); margin: 0; }
.info-item a:hover { color: var(--green-700); }

.form-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(26px, 3.4vw, 40px);
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .85rem; font-weight: 600; color: var(--green-900); margin-bottom: 7px; }
.field label .req { color: var(--chili); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px; font: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--cream); color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green-600); background: var(--white);
  box-shadow: 0 0 0 3px rgba(33,138,77,.13);
}
.field textarea { resize: vertical; min-height: 118px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: .8rem; color: var(--muted); margin-top: 14px; }

.form-status {
  margin-top: 16px; padding: 13px 18px; border-radius: var(--radius-sm);
  background: var(--green-50); border: 1px solid var(--green-100);
  color: var(--green-800); font-size: .9rem; font-weight: 500; display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-error { background: var(--tomato-50); border-color: var(--tomato-200); color: var(--tomato-700); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Single leader card (About) ---------- */
.leader {
  display: grid; grid-template-columns: 200px 1fr; gap: clamp(24px, 4vw, 44px); align-items: center;
  max-width: 820px; margin-inline: auto;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px, 3.6vw, 40px); box-shadow: var(--shadow-sm);
}
.leader-photo {
  position: relative; width: 200px; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: linear-gradient(145deg, var(--tomato-500), #8f2a12);
  display: grid; place-items: center;
  box-shadow: 0 0 0 6px var(--cream-dark), 0 10px 26px rgba(90,40,20,.22);
}
.leader-photo span { color: #fff; font-family: var(--font-display); font-size: 3.4rem; font-weight: 700; letter-spacing: .02em; }
.leader-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.leader-body h3 { font-size: 1.6rem; margin-bottom: 4px; }
.leader-role { color: var(--turmeric-dark); font-weight: 600; font-size: .92rem; margin-bottom: 14px; }
.leader-body p:last-child { color: var(--muted); }
@media (max-width: 640px) {
  .leader { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .leader-photo { width: 160px; }
}

/* ---------- Catalogue downloads ---------- */
.catdl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.catdl-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 18px 20px 18px 58px; position: relative;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .25s var(--ease-spring), border-color .25s, box-shadow .25s;
}
/* a small PDF page drawn in CSS, so there is no extra icon file to fetch */
.catdl-item::before {
  content: "PDF"; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 34px; border-radius: 3px;
  background: var(--tomato-50); border: 1.5px solid var(--tomato-500);
  color: var(--tomato-600); font-size: .56rem; font-weight: 800; letter-spacing: .04em;
  display: grid; place-items: end center; padding-bottom: 4px;
}
.catdl-item b { color: var(--ink); font-size: .96rem; }
.catdl-item span { color: var(--muted); font-size: .8rem; }
.catdl-item:hover { transform: translateY(-3px); border-color: var(--tomato-500); box-shadow: var(--shadow-sm); }
.catdl-item--all { grid-column: 1 / -1; background: var(--tomato-600); border-color: var(--tomato-600); }
.catdl-item--all b, .catdl-item--all span { color: #fff; }
.catdl-item--all::before { background: #fff; border-color: #fff; }
@media (max-width: 820px) { .catdl { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .catdl { grid-template-columns: 1fr; } }

/* ---------- Customer review form ---------- */
.review-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.review-intro h2 { margin: 10px 0 14px; }
.review-intro p { color: var(--muted); }
.review-form {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(22px, 3.4vw, 36px); box-shadow: var(--shadow-sm);
  display: grid; gap: 16px;
}
.review-form label { display: grid; gap: 7px; font-size: .85rem; font-weight: 600; color: var(--ink); }
.review-form input[type=text], .review-form textarea {
  width: 100%; padding: 12px 15px; font: inherit; font-size: .95rem; font-weight: 400;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--cream); color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.review-form input[type=text]:focus, .review-form textarea:focus {
  outline: none; border-color: var(--tomato-500); background: var(--white);
  box-shadow: 0 0 0 3px rgba(228,48,47,.12);
}
.review-form textarea { resize: vertical; min-height: 110px; }
.review-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.review-form .btn { justify-self: start; }
.review-form .form-status { margin-top: 0; }

/* Stars: radios in reverse order so ~ can light every star up to the one
   hovered or chosen, with no script. Keyboard arrows move through them. */
.stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; border: 0; padding: 0; margin: 0; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label { font-size: 2rem; line-height: 1; color: var(--line-strong); cursor: pointer; transition: color .15s, transform .15s var(--ease-spring); }
.stars label:hover, .stars label:hover ~ label,
.stars input:checked ~ label { color: #e8a317; }
.stars label:hover { transform: scale(1.15); }
.stars input:focus-visible + label { outline: 2px solid var(--tomato-500); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 860px) { .review-wrap { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .review-row { grid-template-columns: 1fr; } }

.map-embed {
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
  aspect-ratio: 16 / 6; background: var(--cream-dark); box-shadow: var(--shadow-sm);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- FAQ / accordion ---------- */
.faq { display: grid; gap: 12px; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq-q {
  width: 100%; text-align: left; padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  font-weight: 600; font-size: 1rem; color: var(--green-900); font-family: var(--font-display);
}
.faq-q svg { width: 20px; height: 20px; flex: none; transition: transform .25s; }
.faq-item.is-open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.faq-a p { padding: 0 24px 22px; font-size: .94rem; color: var(--muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--green-900); color: rgba(255,255,255,.62); padding-top: clamp(56px, 7vw, 86px); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: clamp(28px, 4vw, 54px); }
.site-footer h5 {
  color: var(--white); font-size: .82rem; letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: 20px; font-family: var(--font-body); font-weight: 700;
}
.site-footer .brand-name { color: var(--white); }
.site-footer .brand-sub { color: rgba(255,255,255,.45); }
.footer-about { font-size: .9rem; margin-top: 20px; max-width: 40ch; }
.footer-links { display: grid; gap: 11px; }
.footer-links a { font-size: .9rem; transition: color .2s, padding-left .2s; }
.footer-links a:hover { color: var(--turmeric); padding-left: 4px; }
.footer-contact { display: grid; gap: 15px; font-size: .9rem; }
.footer-contact div { display: flex; gap: 11px; align-items: flex-start; }
.footer-contact svg { width: 17px; height: 17px; flex: none; margin-top: 3px; opacity: .6; }
.footer-contact a:hover { color: var(--turmeric); }

.socials { display: flex; gap: 10px; margin-top: 24px; }
.socials a {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  display: grid; place-items: center; transition: all .2s;
}
.socials a:hover { background: var(--turmeric); border-color: var(--turmeric); color: var(--green-900); transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; }

.footer-bottom {
  margin-top: clamp(40px, 5vw, 62px); padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,.11);
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  font-size: .82rem;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-bottom a:hover { color: var(--turmeric); }

/* ============================================================
   DEALER & DISTRIBUTION PAGE
   ============================================================ */

/* ---------- Channel flow ---------- */
.chanflow {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; align-items: stretch; counter-reset: chan;
}
.chan {
  position: relative; text-align: center; padding: 30px 22px;
  background: var(--white); border: 1px solid var(--line);
  transition: transform .28s, box-shadow .28s, z-index 0s;
}
.chan:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.chan:last-child  { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.chan + .chan { border-left: 0; }
.chan:hover { transform: translateY(-5px); box-shadow: var(--shadow); z-index: 2; border-radius: var(--radius-lg); }
.chan::after {
  content: ""; position: absolute; top: 50%; right: -11px; z-index: 3;
  width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: var(--turmeric);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;
}
.chan:last-child::after { display: none; }
.chan-num {
  counter-increment: chan; font-family: var(--font-display);
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  color: var(--turmeric-dark); display: block; margin-bottom: 14px;
}
.chan-num::before { content: "STEP " counter(chan); }
.chan-icon {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 17px;
  background: var(--green-50); border: 1px solid var(--green-100);
  display: grid; place-items: center;
}
.chan-icon svg { width: 28px; height: 28px; }
.chan h4 { font-size: 1.05rem; margin-bottom: 7px; }
.chan p { font-size: .86rem; color: var(--muted); }
.chan--us .chan-icon { background: var(--green-700); border-color: var(--green-700); }
.chan--us .chan-icon svg { stroke: #fff; }

/* ---------- Benefit rows ---------- */
.benefit {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 28px;
  transition: transform .26s, box-shadow .26s, border-color .26s;
}
.benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(26,107,60,.22); }
.benefit-icon {
  width: 50px; height: 50px; border-radius: 15px; flex: none;
  background: linear-gradient(145deg, var(--green-600), var(--green-800));
  display: grid; place-items: center; box-shadow: 0 4px 12px rgba(26,107,60,.22);
}
.benefit-icon svg { width: 25px; height: 25px; stroke: #fff; }
.benefit-icon--gold { background: linear-gradient(145deg, var(--turmeric), var(--turmeric-dark)); box-shadow: 0 4px 12px rgba(224,160,32,.28); }
.benefit h3 { font-size: 1.1rem; margin-bottom: 7px; }
.benefit p { font-size: .93rem; color: var(--muted); }

/* ---------- Requirement spec cards ---------- */
.req-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.req-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px; position: relative; overflow: hidden;
}
.req-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--green-600), var(--turmeric));
}
.req-card h3 { display: flex; align-items: center; gap: 12px; font-size: 1.12rem; margin-bottom: 16px; }
.req-card h3 svg { width: 24px; height: 24px; flex: none; }
.req-card ul { display: grid; gap: 12px; }
.req-card li { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; }
.req-card li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--turmeric); margin-top: 9px;
}
.req-card b { color: var(--green-900); }

/* ---------- Big number callouts ---------- */
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.metric {
  text-align: center; padding: 30px 22px;
  background: var(--green-50); border: 1px solid var(--green-100);
  border-radius: var(--radius-lg);
}
.metric strong {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 4vw, 2.9rem); color: var(--green-800); line-height: 1;
}
.metric span { display: block; margin-top: 10px; font-size: .88rem; color: var(--ink-soft); }

/* ---------- Territory pills ---------- */
.terr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.terr {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px;
}
.terr-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.terr-head h4 { font-size: 1.05rem; }
.terr-status {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px;
}
.terr-status--open { background: #dcf2e4; color: #14532d; }
.terr-status--few  { background: #fdf0d0; color: #8a5a05; }
.terr-status--full { background: #f0eeec; color: #78716c; }
.terr-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.terr-pills span {
  font-size: .76rem; padding: 5px 12px; border-radius: 100px;
  background: var(--cream-dark); color: var(--ink-soft);
}

/* ---------- Checklist inside dark band ---------- */
.doc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 26px; margin-top: 24px; }
.doc-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; }
.doc-list svg { width: 19px; height: 19px; flex: none; margin-top: 3px; }

@media (max-width: 920px) {
  .chanflow { grid-template-columns: repeat(2, 1fr); }
  .chan { border-radius: var(--radius-lg) !important; border-left: 1px solid var(--line) !important; }
  .chan::after { display: none; }
  .req-grid, .terr-grid, .doc-list { grid-template-columns: 1fr; }
  .metric-row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .chanflow { grid-template-columns: 1fr; }
  .benefit { flex-direction: column; gap: 14px; }
}

/* ============================================================
   IMAGE SLOTS
   Drop a real file at the given path and it replaces the
   placeholder automatically. No code changes needed.
   ============================================================ */
.imgslot { position: relative; overflow: hidden; background: var(--cream-dark); }
.imgslot > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imgslot > img.is-missing { display: none; }

.imgslot-ph {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 20px;
  background:
    repeating-linear-gradient(45deg, rgba(26,107,60,.045) 0 12px, transparent 12px 24px),
    var(--green-50);
  border: 1.5px dashed rgba(26,107,60,.30);
  border-radius: inherit;
  color: var(--green-800);
}
.imgslot-ph.is-shown { display: flex; }
.imgslot-ph svg { width: 30px; height: 30px; opacity: .5; }
.imgslot-ph b { font-size: .82rem; font-weight: 700; font-family: var(--font-body); letter-spacing: .02em; }
.imgslot-ph code {
  font-size: .68rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: rgba(26,107,60,.10); padding: 3px 9px; border-radius: 5px;
  color: var(--green-800); word-break: break-all;
}
.imgslot-ph small { font-size: .68rem; color: var(--muted); }

/* Slot variants used inside dark/coloured surfaces */
/* These panels used to sit on a dark green block. They are on cream now, so
   the white placeholder text was invisible — it only showed in dark mode. */
.imgslot--dark .imgslot-ph {
  background: repeating-linear-gradient(45deg, rgba(90,50,26,.045) 0 12px, transparent 12px 24px), rgba(90,50,26,.04);
  border-color: rgba(90,50,26,.24); color: var(--ink-soft);
}
.imgslot--dark .imgslot-ph code { background: rgba(90,50,26,.10); color: var(--ink); }
.imgslot--dark .imgslot-ph small { color: var(--muted); }

/* ---------- Reveal on scroll ---------- */
/* Visible by default; only hidden once we know a script is running to
   reveal it again. Without this, a failed JS load leaves the page blank. */
.reveal { transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .grid-4, .item-grid { grid-template-columns: repeat(3, 1fr); }
  .certs { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  .nav-links {
    /* anchored to the header itself, not a hard-coded offset — the top bar
       above it means a fixed 76px landed in the wrong place */
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--cream); border-bottom: 1px solid var(--line);
    padding: 14px 24px 22px; box-shadow: var(--shadow);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .22s, transform .22s;
    max-height: calc(100vh - var(--nav-h) - 40px); overflow-y: auto;
  }
  .nav-links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav-links > li > a { padding: 13px 16px; border-radius: var(--radius-sm); font-size: 1rem; }
  .nav-toggle { display: grid; }
  /* Shop Online stays visible on phones and tablets — it used to be hidden
     here along with every other header button, which left mobile visitors
     (most of them) with no route to the marketplaces. It is the one button
     worth the space, so it stays, compact. */
  .nav-cta { gap: 8px; }
  .nav-cta .btn { display: inline-flex; padding: 9px 14px; font-size: .86rem; }

  /* The dropdown can't hang off a button in the middle of a 375px header —
     right-aligned it would run off the left of the screen. It drops from the
     header instead, full width with a margin. */
  .shopmenu { position: static; }
  .shopmenu-pop { left: 12px; right: 12px; width: auto; top: calc(100% + 6px); }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 460px; margin-inline: auto; order: -1; }
  .hero-float--tl { left: 2%; }
  .hero-float--br { right: 2%; }
  .hero-lede { max-width: none; }

  .split, .contact-grid { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stats-band { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .topbar-contact { display: none; }
  .topbar .wrap { justify-content: center; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 36px); }
  .grid-2, .grid-3, .grid-4, .item-grid { grid-template-columns: repeat(2, 1fr); }
  .certs { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hero-float { padding: 11px 14px; }
  .hero-float-icon { width: 33px; height: 33px; }
  .card { padding: 24px; }
}

@media (max-width: 520px) {
  .grid-2, .grid-3, .grid-4, .item-grid, .certs, .steps, .footer-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2, auto); column-gap: 34px; }
  .hero-float--tl { top: 3%; left: 0; }
  .hero-float--br { bottom: 3%; right: 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .btn { padding: 13px 22px; }
}

/* ============================================================
   OUR FACILITIES / UNITS
   ============================================================ */
.units { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.unit {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px;
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
.unit:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--tomato-200); }
.unit::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--tomato-500), var(--turmeric));
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out);
}
.unit:hover::before { transform: scaleX(1); }
.unit--main::before { transform: scaleX(1); }

.unit-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px; margin-bottom: 16px;
}
.unit-badge--main { background: var(--tomato-100); color: var(--tomato-700); }
.unit-badge--works { background: var(--green-100); color: var(--green-700); }
.unit-badge--tbc { background: var(--cream-dark); color: var(--muted); border: 1px dashed var(--line-strong); }
[data-theme="dark"] .unit-badge--main { color: var(--tomato-500); }

.unit h3 { font-size: 1.15rem; margin-bottom: 10px; }
.unit address { font-style: normal; font-size: .93rem; color: var(--muted); line-height: 1.6; }
.unit-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.unit-tags span {
  font-size: .72rem; font-weight: 600; padding: 4px 11px; border-radius: 100px;
  background: var(--cream-dark); color: var(--ink-soft);
}
.unit--tbc { border-style: dashed; background: transparent; }
.unit--tbc h3 { color: var(--muted); }

/* Coverage map / states */
.states { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.state {
  text-align: center; padding: 26px 16px; border-radius: var(--radius-lg);
  background: var(--card); border: 1px solid var(--line);
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
.state:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); border-color: var(--tomato-200); }
.state-ico {
  width: 50px; height: 50px; margin: 0 auto 14px; border-radius: 15px;
  background: var(--tomato-50); border: 1px solid var(--tomato-100);
  display: grid; place-items: center;
}
.state-ico svg { width: 24px; height: 24px; stroke: var(--tomato-500); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.state b { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--green-900); }
.state span { font-size: .78rem; color: var(--muted); }

/* ============================================================
   DARK-THEME CORRECTIONS
   CSS beats SVG presentation attributes, so hard-coded
   stroke="#1a6b3c" in the markup is overridden here.
   ============================================================ */
[data-theme="dark"] .site-header { background: rgba(20,17,15,.80); }
[data-theme="dark"] .site-header.is-stuck { background: rgba(20,17,15,.94); }
[data-theme="dark"] .nav-links { background: var(--cream-dark); }

[data-theme="dark"] .card-icon svg,
[data-theme="dark"] .info-icon svg,
[data-theme="dark"] .cert-badge svg,
[data-theme="dark"] .hero-float-icon svg,
[data-theme="dark"] .chan-icon svg,
[data-theme="dark"] .req-card h3 svg,
[data-theme="dark"] .note-box > svg { stroke: var(--green-700); }

[data-theme="dark"] .card-icon--gold svg { stroke: var(--turmeric); }
[data-theme="dark"] .checklist svg { stroke: var(--green-700); }
[data-theme="dark"] .chan--us .chan-icon { background: var(--green-700); border-color: var(--green-700); }
[data-theme="dark"] .chan--us .chan-icon svg { stroke: #14110f; }
[data-theme="dark"] .benefit-icon svg { stroke: #14110f; }
[data-theme="dark"] .quote-avatar { color: #14110f; }

[data-theme="dark"] .topbar { background: #0d0b0a; }
[data-theme="dark"] .site-footer { background: #0d0b0a; }
[data-theme="dark"] .bg-green { background: #17140f; }
[data-theme="dark"] .cta-band { background: linear-gradient(135deg, #5e1808, #101d15 78%); }
[data-theme="dark"] .hero-float { background: var(--card); border: 1px solid var(--line); }
[data-theme="dark"] .terr-status--open { background: rgba(111,206,151,.18); color: #7fd8a4; }
[data-theme="dark"] .terr-status--few  { background: rgba(255,193,71,.18); color: #ffc147; }
[data-theme="dark"] .terr-status--full { background: rgba(246,241,234,.10); color: var(--muted); }
[data-theme="dark"] .tag,
[data-theme="dark"] .pack,
[data-theme="dark"] .unit-tags span { background: rgba(246,241,234,.07); }

/* product tile art tints get gently muted so they don't glare */
[data-theme="dark"] .pcard-art, [data-theme="dark"] .item-art { filter: saturate(.82) brightness(.72); }
[data-theme="dark"] .pcard:hover .pcard-art, [data-theme="dark"] .item:hover .item-art { filter: saturate(.95) brightness(.85); }

/* ============================================================
   MOTION EXTRAS
   ============================================================ */
.card, .pcard, .item, .cert, .unit, .state, .benefit {
  will-change: transform;
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(228,48,47,.07), transparent 42%);
  opacity: 0; transition: opacity .35s;
}
.card { position: relative; }
.card:hover::after { opacity: 1; }

/* section headings slide in their eyebrow rule */
.reveal.is-in .eyebrow::before { animation: ruleGrow .6s var(--ease-out) both; }
@keyframes ruleGrow { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }

/* focus visibility — tomato ring */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--tomato-500);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (max-width: 1080px) {
  .units { grid-template-columns: repeat(2, 1fr); }
  .states { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .units, .states { grid-template-columns: 1fr; }
}

/* ============================================================
   TRADITIONAL ODIA DECORATIVE BORDER
   A repeating spiral / wave motif, drawn in SVG so it scales
   cleanly and recolours with the theme.
   ============================================================ */
.tradborder {
  height: 46px;
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='46' viewBox='0 0 220 46'%3E%3Cg fill='none' stroke='%23d9a441' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M0 26c10-16 28-16 34-4 4 8-6 14-11 9-4-4 0-10 5-7'/%3E%3Cpath d='M34 22c8-14 26-14 32-2 4 8-6 14-11 9-4-4 0-10 5-7'/%3E%3Cpath d='M72 24c9-15 27-13 33-1 4 8-6 14-11 9-4-4 0-10 5-7'/%3E%3Cpath d='M110 22c8-14 26-14 32-2 4 8-6 14-11 9-4-4 0-10 5-7'/%3E%3Cpath d='M148 24c9-15 27-13 33-1 4 8-6 14-11 9-4-4 0-10 5-7'/%3E%3Cpath d='M186 22c8-14 26-14 32-2 4 8-6 14-11 9-4-4 0-10 5-7'/%3E%3Ccircle cx='18' cy='40' r='2.4'/%3E%3Ccircle cx='55' cy='40' r='2.4'/%3E%3Ccircle cx='92' cy='40' r='2.4'/%3E%3Ccircle cx='129' cy='40' r='2.4'/%3E%3Ccircle cx='166' cy='40' r='2.4'/%3E%3Ccircle cx='203' cy='40' r='2.4'/%3E%3Cpath d='M36 40c3-4 7-4 9 0-2 3-7 3-9 0Z'/%3E%3Cpath d='M110 40c3-4 7-4 9 0-2 3-7 3-9 0Z'/%3E%3Cpath d='M184 40c3-4 7-4 9 0-2 3-7 3-9 0Z'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .9;
}
.tradborder--flip { transform: scaleY(-1); }
.tradborder--tight { height: 34px; background-size: auto 34px; }
[data-theme="dark"] .tradborder { opacity: .45; }

/* ============================================================
   TEMPLE BAND — Kalinga skyline behind the numbers
   ============================================================ */
.temple-band {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(150deg, #b8341a 0%, #d4611f 42%, #d9a441 100%);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px);
}
.temple-band::before {
  content: ""; position: absolute; inset: 0; opacity: .20;
  background-repeat: repeat-x; background-position: center bottom; background-size: auto 78%;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%22464%22%20viewBox%3D%220%20-44%201600%20464%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%220%22%20y%3D%22396%22%20width%3D%221600%22%20height%3D%2224%22%2F%3E%3Crect%20x%3D%22410%22%20y%3D%22380%22%20width%3D%22780%22%20height%3D%2216%22%2F%3E%3Cpath%20d%3D%22M705.0%20396.0%20L705.0%20340.9%20L714.4%20336.6%20L716.9%20313.3%20L721.1%20273.0%20L727.9%20226.4%20L737.2%20184.0%20L748.3%20148.0%20L758.4%20124.6%20L761.8%20116.2%20L750.0%20107.7%20L746.6%2095.0%20L755.1%2084.4%20L773.7%2078.0%20L777.1%2069.5%20L770.3%2056.8%20L772.0%2042.0%20L782.2%2031.4%20L790.7%2022.9%20L795.8%20-0.4%20L798.3%20-13.2%20L801.7%20-13.2%20L804.2%20-0.4%20L809.3%2022.9%20L817.8%2031.4%20L828.0%2042.0%20L829.7%2056.8%20L822.9%2069.5%20L826.3%2078.0%20L844.9%2084.4%20L853.4%2095.0%20L850.0%20107.7%20L838.2%20116.2%20L841.6%20124.6%20L851.7%20148.0%20L862.8%20184.0%20L872.1%20226.4%20L878.9%20273.0%20L883.1%20313.3%20L885.6%20336.6%20L895.0%20340.9%20L895.0%20396.0%20Z%22%2F%3E%3Cpath%20d%3D%22M802.1%20-8.9%20L857.2%204.9%20L802.1%2018.6%20Z%22%2F%3E%3Cpath%20d%3D%22M496.0%20396.0%20L496.0%20396.0%20L496.0%20360.0%20L510.7%20360.0%20L510.7%20324.0%20L525.3%20324.0%20L525.3%20288.0%20L540.0%20288.0%20L540.0%20252.0%20L554.7%20252.0%20L554.7%20216.0%20L569.3%20216.0%20L569.3%20180.0%20L584.0%20180.0%20L595.0%20180.0%20L599.0%20167.0%20L593.0%20161.0%20L602.0%20155.0%20L604.0%20140.0%20L612.0%20140.0%20L614.0%20155.0%20L623.0%20161.0%20L617.0%20167.0%20L621.0%20180.0%20L632.0%20180.0%20L646.7%20180.0%20L646.7%20216.0%20L661.3%20216.0%20L661.3%20252.0%20L676.0%20252.0%20L676.0%20288.0%20L690.7%20288.0%20L690.7%20324.0%20L705.3%20324.0%20L705.3%20360.0%20L720.0%20360.0%20L720.0%20396.0%20L720.0%20396.0%20Z%22%2F%3E%3Cpath%20d%3D%22M900.0%20396.0%20L900.0%20396.0%20L900.0%20366.3%20L912.7%20366.3%20L912.7%20336.7%20L925.3%20336.7%20L925.3%20307.0%20L938.0%20307.0%20L938.0%20277.3%20L950.7%20277.3%20L950.7%20247.7%20L963.3%20247.7%20L963.3%20218.0%20L976.0%20218.0%20L983.0%20218.0%20L987.0%20205.0%20L981.0%20199.0%20L990.0%20193.0%20L992.0%20178.0%20L1000.0%20178.0%20L1002.0%20193.0%20L1011.0%20199.0%20L1005.0%20205.0%20L1009.0%20218.0%20L1016.0%20218.0%20L1028.7%20218.0%20L1028.7%20247.7%20L1041.3%20247.7%20L1041.3%20277.3%20L1054.0%20277.3%20L1054.0%20307.0%20L1066.7%20307.0%20L1066.7%20336.7%20L1079.3%20336.7%20L1079.3%20366.3%20L1092.0%20366.3%20L1092.0%20396.0%20L1092.0%20396.0%20Z%22%2F%3E%3Cpath%20d%3D%22M333.7%20396.0%20L333.7%20372.1%20L338.0%20370.2%20L339.2%20360.1%20L341.2%20342.6%20L344.4%20322.4%20L348.7%20304.0%20L353.9%20288.4%20L358.6%20278.2%20L360.2%20274.6%20L354.7%20270.9%20L353.1%20265.4%20L357.0%20260.8%20L365.7%20258.0%20L367.3%20254.3%20L364.2%20248.8%20L364.9%20242.4%20L369.7%20237.8%20L373.6%20234.1%20L376.0%20224.0%20L377.2%20218.4%20L378.8%20218.4%20L380.0%20224.0%20L382.4%20234.1%20L386.3%20237.8%20L391.1%20242.4%20L391.8%20248.8%20L388.7%20254.3%20L390.3%20258.0%20L399.0%20260.8%20L402.9%20265.4%20L401.3%20270.9%20L395.8%20274.6%20L397.4%20278.2%20L402.1%20288.4%20L407.3%20304.0%20L411.6%20322.4%20L414.8%20342.6%20L416.8%20360.1%20L418.0%20370.2%20L422.3%20372.1%20L422.3%20396.0%20Z%22%2F%3E%3Cpath%20d%3D%22M1191.5%20396.0%20L1191.5%20374.2%20L1195.5%20372.5%20L1196.6%20363.2%20L1198.4%20347.3%20L1201.3%20328.8%20L1205.3%20312.0%20L1210.0%20297.7%20L1214.3%20288.5%20L1215.7%20285.1%20L1210.7%20281.8%20L1209.2%20276.7%20L1212.9%20272.5%20L1220.8%20270.0%20L1222.2%20266.6%20L1219.4%20261.6%20L1220.1%20255.7%20L1224.4%20251.5%20L1228.0%20248.2%20L1230.2%20238.9%20L1231.3%20233.9%20L1232.7%20233.9%20L1233.8%20238.9%20L1236.0%20248.2%20L1239.6%20251.5%20L1243.9%20255.7%20L1244.6%20261.6%20L1241.8%20266.6%20L1243.2%20270.0%20L1251.1%20272.5%20L1254.8%20276.7%20L1253.3%20281.8%20L1248.3%20285.1%20L1249.7%20288.5%20L1254.0%20297.7%20L1258.7%20312.0%20L1262.7%20328.8%20L1265.6%20347.3%20L1267.4%20363.2%20L1268.5%20372.5%20L1272.5%20374.2%20L1272.5%20396.0%20Z%22%2F%3E%3Cpath%20d%3D%22M136.0%20396.0%20L136.0%20396.0%20L136.0%20379.7%20L143.8%20379.7%20L143.8%20363.3%20L151.7%20363.3%20L151.7%20347.0%20L159.5%20347.0%20L159.5%20330.7%20L167.3%20330.7%20L167.3%20314.3%20L175.2%20314.3%20L175.2%20298.0%20L183.0%20298.0%20L183.0%20298.0%20L187.0%20285.0%20L181.0%20279.0%20L190.0%20273.0%20L192.0%20258.0%20L200.0%20258.0%20L202.0%20273.0%20L211.0%20279.0%20L205.0%20285.0%20L209.0%20298.0%20L209.0%20298.0%20L216.8%20298.0%20L216.8%20314.3%20L224.7%20314.3%20L224.7%20330.7%20L232.5%20330.7%20L232.5%20347.0%20L240.3%20347.0%20L240.3%20363.3%20L248.2%20363.3%20L248.2%20379.7%20L256.0%20379.7%20L256.0%20396.0%20L256.0%20396.0%20Z%22%2F%3E%3Cpath%20d%3D%22M1362.0%20396.0%20L1362.0%20396.0%20L1362.0%20381.0%20L1369.3%20381.0%20L1369.3%20366.0%20L1376.7%20366.0%20L1376.7%20351.0%20L1384.0%20351.0%20L1384.0%20336.0%20L1391.3%20336.0%20L1391.3%20321.0%20L1398.7%20321.0%20L1398.7%20306.0%20L1406.0%20306.0%20L1405.0%20306.0%20L1409.0%20293.0%20L1403.0%20287.0%20L1412.0%20281.0%20L1414.0%20266.0%20L1422.0%20266.0%20L1424.0%20281.0%20L1433.0%20287.0%20L1427.0%20293.0%20L1431.0%20306.0%20L1430.0%20306.0%20L1437.3%20306.0%20L1437.3%20321.0%20L1444.7%20321.0%20L1444.7%20336.0%20L1452.0%20336.0%20L1452.0%20351.0%20L1459.3%20351.0%20L1459.3%20366.0%20L1466.7%20366.0%20L1466.7%20381.0%20L1474.0%20381.0%20L1474.0%20396.0%20L1474.0%20396.0%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.temple-band > * { position: relative; z-index: 1; }
.temple-band .section-head h2, .temple-band .section-head p { color: #fff; }
.temple-band .section-head p { color: rgba(255,255,255,.82); }
.temple-band .eyebrow { color: #ffe9b8; }
.temple-band .eyebrow::before, .temple-band .eyebrow--center::after { background: #ffe9b8; }

.tstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tstat {
  text-align: center; padding: 30px 18px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .3s var(--ease-out), background .3s;
}
.tstat:hover { transform: translateY(-6px); background: rgba(255,255,255,.22); }
.tstat strong {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 4.2vw, 3.1rem); color: #fff; line-height: 1;
}
.tstat span { display: block; margin-top: 12px; font-size: .86rem; color: rgba(255,255,255,.90); font-weight: 500; }

/* ============================================================
   HERO CAROUSEL / POSTER
   ============================================================ */
.carousel {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  background: var(--cream-dark);
  aspect-ratio: 21 / 8;
}
.carousel-track { display: flex; height: 100%; transition: transform .7s var(--ease-out); }
.carousel-slide { flex: 0 0 100%; position: relative; height: 100%; }
.carousel-slide .imgslot { position: absolute; inset: 0; border-radius: 0; }
.carousel-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: clamp(22px, 4vw, 46px);
  background: linear-gradient(to top, rgba(61,26,16,.86), rgba(61,26,16,.34) 55%, transparent);
  color: #fff;
}
.carousel-cap h3 { color: #fff; font-size: clamp(1.3rem, 3vw, 2.2rem); margin-bottom: 6px; }
.carousel-cap p { color: rgba(255,255,255,.86); font-size: .95rem; max-width: 54ch; }

/* No disc — the poster shows straight through, so the arrow is the only
   thing drawn. Two consequences:
   1. The ink is a fixed dark brown, never var(--green-900), which the dark
      theme flips to near-white and would make the arrow disappear.
   2. It carries its own white halo, so it still reads if it happens to land
      on a dark part of a poster. Dark ink + white halo works on both. */
.carousel-nav {
  position: absolute; z-index: 4; top: 50%; margin-top: -22px;
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent; color: #3d1a10;
  box-shadow: none;
  display: grid; place-items: center;
  transition: background .22s, transform .22s var(--ease-spring),
              box-shadow .22s, filter .22s;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.95))
    drop-shadow(0 1px 3px rgba(255,255,255,.85))
    drop-shadow(0 0 7px rgba(255,255,255,.65));
}
[data-theme="dark"] .carousel-nav { background: transparent; color: #3d1a10; }

/* On hover a soft frosted disc fades in, so it still feels like a button. */
.carousel-nav:hover {
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transform: scale(1.08);
  box-shadow: 0 3px 14px rgba(0,0,0,.24);
}
[data-theme="dark"] .carousel-nav:hover { background: rgba(255,255,255,.62); }

/* Keyboard focus needs a shape of its own now that there is no disc. */
.carousel-nav:focus-visible {
  outline: none;
  background: rgba(255,255,255,.72);
  box-shadow: 0 0 0 3px var(--tomato-500);
}
.carousel-nav svg { width: 22px; height: 22px; stroke-width: 2.7; }
.carousel-nav--prev { left: 16px; }
.carousel-nav--next { right: 16px; }

.carousel-dots { position: absolute; z-index: 4; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.carousel-dots button {
  width: 9px; height: 9px; border-radius: 99px; background: rgba(255,255,255,.55);
  /* the posters are artwork edge to edge, so the dots need to read on
     whatever happens to be underneath them */
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
  transition: width .3s var(--ease-out), background .3s;
}
.carousel-dots button.is-on { width: 28px; background: #fff; }

/* ============================================================
   PRODUCT SEARCH
   ============================================================ */
.psearch { position: relative; max-width: 560px; margin: 0 auto 28px; }
.psearch input {
  width: 100%; padding: 16px 52px 16px 22px; font: inherit; font-size: .98rem;
  border: 1.5px solid var(--line-strong); border-radius: 100px;
  background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-sm); transition: border-color .22s, box-shadow .22s;
}
.psearch input:focus {
  outline: none; border-color: var(--tomato-500);
  box-shadow: 0 0 0 4px rgba(228,48,47,.13);
}
.psearch svg {
  position: absolute; right: 20px; top: 50%; margin-top: -10px;
  width: 20px; height: 20px; stroke: var(--muted); fill: none; stroke-width: 2;
  pointer-events: none;
}
.psearch-empty {
  text-align: center; padding: 46px 20px; color: var(--muted); display: none;
}
.psearch-empty.is-on { display: block; }

/* ============================================================
   FLOATING WIDGETS — chat assistant + WhatsApp
   ============================================================ */
.fabs {
  position: fixed; right: 20px; bottom: 20px; z-index: 300;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.fab {
  position: relative;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.24);
  transition: transform .26s var(--ease-spring), box-shadow .26s;
}
.fab:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.30); }
.fab svg { width: 27px; height: 27px; }
.fab--wa { background: #25d366; }
.fab--bot { background: linear-gradient(140deg, var(--tomato-500), #d9a441); }
.fab--bot .i-close { display: none; }
.fab--bot.is-open .i-bot { display: none; }
.fab--bot.is-open .i-close { display: block; }

.fab-tip {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: #fff; color: #1a1512; font-size: .82rem; font-weight: 600;
  padding: 9px 15px; border-radius: 10px; white-space: nowrap;
  box-shadow: var(--shadow); pointer-events: none;
  opacity: 0; transition: opacity .25s, transform .25s var(--ease-out);
}
.fab:hover .fab-tip { opacity: 1; transform: translateY(-50%) translateX(-3px); }
.fab-tip::after {
  content: ""; position: absolute; left: 100%; top: 50%; margin-top: -5px;
  border: 5px solid transparent; border-left-color: #fff;
}
[data-theme="dark"] .fab-tip { background: var(--card); color: var(--ink); }
[data-theme="dark"] .fab-tip::after { border-left-color: var(--card); }

.fab-pulse::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; opacity: .55; z-index: -1;
  animation: fabPulse 2.6s ease-out infinite;
}
@keyframes fabPulse {
  0%   { transform: scale(1); opacity: .5; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ---------- Chat panel ---------- */
.chat {
  position: fixed; right: 20px; bottom: 92px; z-index: 301;
  width: min(374px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 140px));
  background: var(--card); border-radius: 20px; overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.30);
  display: flex; flex-direction: column;
  transform: translateY(16px) scale(.96); opacity: 0; pointer-events: none;
  transition: opacity .26s, transform .3s var(--ease-out);
  border: 1px solid var(--line);
}
.chat.is-open { opacity: 1; transform: none; pointer-events: auto; }

.chat-head {
  background: linear-gradient(120deg, var(--tomato-600), var(--tomato-500));
  color: #fff; padding: 16px 18px; display: flex; align-items: center; gap: 12px; flex: none;
}
.chat-head-av {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.22); display: grid; place-items: center;
}
.chat-head-av svg { width: 20px; height: 20px; }
.chat-head b { font-size: 1rem; display: block; line-height: 1.2; }
.chat-head small { font-size: .74rem; opacity: .85; display: flex; align-items: center; gap: 6px; }
.chat-head small::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7ef7a4;
  box-shadow: 0 0 0 0 rgba(126,247,164,.7); animation: fabPulse 2.4s infinite;
}
.chat-close { margin-left: auto; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; transition: background .2s; }
.chat-close:hover { background: rgba(255,255,255,.18); }
.chat-close svg { width: 19px; height: 19px; }

.chat-body {
  flex: 1; overflow-y: auto; padding: 18px;
  background: var(--cream);
  display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin;
}
.msg {
  max-width: 84%; padding: 12px 15px; border-radius: 16px;
  font-size: .91rem; line-height: 1.5;
  animation: msgIn .4s var(--ease-out) both;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.msg--bot { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 5px; color: var(--ink-soft); }
.msg--me  { align-self: flex-end; background: var(--tomato-500); color: #fff; border-bottom-right-radius: 5px; }
.msg a { color: var(--tomato-600); font-weight: 600; text-decoration: underline; }
.msg--me a { color: #fff; }
.msg b { color: var(--green-900); }
.msg--me b { color: #fff; }

.typing { display: flex; gap: 4px; align-items: center; padding: 14px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); display: block; animation: typing 1.3s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes typing { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

.chat-chips {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--line); background: var(--card); flex: none;
}
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 100px; font-size: .81rem; font-weight: 600;
  background: var(--tomato-50); color: var(--tomato-700); border: 1px solid var(--tomato-100);
  transition: background .2s, transform .2s var(--ease-spring), color .2s;
}
.chip:hover { background: var(--tomato-500); color: #fff; transform: translateY(-2px); border-color: var(--tomato-500); }
.chip svg { width: 14px; height: 14px; }

.chat-input { display: flex; gap: 9px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--card); flex: none; }
.chat-input input {
  flex: 1; padding: 12px 16px; font: inherit; font-size: .9rem;
  border: 1.5px solid var(--line-strong); border-radius: 100px;
  background: var(--cream); color: var(--ink);
}
.chat-input input:focus { outline: none; border-color: var(--tomato-500); }
.chat-send {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--tomato-500); color: #fff; display: grid; place-items: center;
  transition: background .2s, transform .2s var(--ease-spring);
}
.chat-send:hover { background: var(--tomato-600); transform: scale(1.06); }
.chat-send svg { width: 18px; height: 18px; }

@media (max-width: 520px) {
  .chat { right: 12px; left: 12px; width: auto; bottom: 86px; height: min(66vh, 500px); }
  .fabs { right: 14px; bottom: 14px; }
}

/* ============================================================
   SHOP TEASER (kept off the main flow)
   ============================================================ */
.shop-teaser {
  border: 1.5px dashed var(--tomato-200); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--tomato-50), var(--turmeric-50));
  padding: clamp(24px, 3.4vw, 38px);
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
}
.shop-teaser-ico {
  width: 60px; height: 60px; border-radius: 18px; flex: none;
  background: linear-gradient(140deg, var(--tomato-500), var(--turmeric));
  display: grid; place-items: center; box-shadow: var(--shadow-tomato);
}
.shop-teaser-ico svg { width: 29px; height: 29px; stroke: #fff; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.shop-teaser-txt { flex: 1; min-width: 240px; }
.shop-teaser h3 { margin-bottom: 6px; }
.shop-teaser p { font-size: .93rem; color: var(--muted); }
.badge-soon {
  display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 11px; border-radius: 100px;
  background: var(--turmeric); color: #3d1a10; margin-left: 8px; vertical-align: middle;
}

/* ============================================================
   MAP CARDS
   ============================================================ */
.map-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.map-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .84rem; font-weight: 600; color: var(--tomato-600);
  padding: 8px 14px; border-radius: 100px;
  background: var(--tomato-50); border: 1px solid var(--tomato-100);
  transition: background .2s, transform .2s var(--ease-spring), color .2s;
}
.map-link:hover { background: var(--tomato-500); color: #fff; transform: translateY(-2px); }
.map-link svg { width: 15px; height: 15px; }

@media (max-width: 900px) { .tstats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tstats { grid-template-columns: 1fr; } .carousel { aspect-ratio: 4 / 3; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-badge, .hero h1, .hero-lede, .hero-actions, .hero-stats, .hero-art { opacity: 1; }
  .hero h1 em::after { transform: scaleX(1); }
  .hero-specks, .progress { display: none; }
  .btn::after { display: none; }
}

@media print {
  .site-header, .topbar, .strip, .site-footer, .nav-toggle,
  .progress, .hero-specks, .theme-btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   EVERYDAY ESSENTIALS — light strip on the home page
   Deliberately small: six SKUs, no images required.
   ============================================================ */
.daily { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.daily-item {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 16px; text-align: center;
  transition: transform .28s var(--ease-out), box-shadow .28s, border-color .28s;
}
.daily-item:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--tomato-200); }
.daily-item::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--tomato-500), var(--turmeric));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out);
}
.daily-item:hover::before { transform: scaleX(1); }
.daily-ico {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 16px;
  display: grid; place-items: center; background: var(--tomato-50); border: 1px solid var(--tomato-100);
  transition: transform .32s var(--ease-spring);
}
.daily-item:hover .daily-ico { transform: scale(1.08) rotate(-4deg); }
.daily-ico svg { width: 27px; height: 27px; stroke: var(--tomato-500); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.daily-item b { display: block; font-size: .92rem; color: var(--green-900); font-family: var(--font-display); font-weight: 600; }
.daily-item span { display: block; font-size: .74rem; color: var(--muted); margin-top: 3px; }

.daily-note {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin-top: 26px; font-size: .88rem; color: var(--muted);
}

@media (max-width: 900px) { .daily { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .daily { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   PWA INSTALL PROMPT
   ============================================================ */
.install-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 290;
  max-width: 460px; margin-inline: auto;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 18px; box-shadow: var(--shadow-lg);
  padding: 14px 16px; display: none; align-items: center; gap: 14px;
  animation: fadeUp .5s var(--ease-out) both;
}
.install-bar.is-on { display: flex; }
.install-bar img { width: 44px; height: 44px; border-radius: 11px; object-fit: contain; background: #fff; padding: 4px; flex: none; }
.install-bar div { flex: 1; min-width: 0; }
.install-bar b { display: block; font-size: .9rem; color: var(--green-900); }
.install-bar span { display: block; font-size: .77rem; color: var(--muted); }
.install-bar .btn { flex: none; }
.install-x { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.install-x:hover { background: var(--cream-dark); }
.install-x svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .fabs { bottom: 92px; } .install-bar.is-on + .fabs { bottom: 96px; } }

/* ---------- Traditional motif reused across the site ---------- */
.page-hero { position: relative; overflow: hidden; }
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 190px;
  pointer-events: none; opacity: .055;
  background-repeat: repeat-x; background-position: center bottom; background-size: auto 100%;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%22464%22%20viewBox%3D%220%20-44%201600%20464%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%220%22%20y%3D%22396%22%20width%3D%221600%22%20height%3D%2224%22%2F%3E%3Crect%20x%3D%22410%22%20y%3D%22380%22%20width%3D%22780%22%20height%3D%2216%22%2F%3E%3Cpath%20d%3D%22M705.0%20396.0%20L705.0%20340.9%20L714.4%20336.6%20L716.9%20313.3%20L721.1%20273.0%20L727.9%20226.4%20L737.2%20184.0%20L748.3%20148.0%20L758.4%20124.6%20L761.8%20116.2%20L750.0%20107.7%20L746.6%2095.0%20L755.1%2084.4%20L773.7%2078.0%20L777.1%2069.5%20L770.3%2056.8%20L772.0%2042.0%20L782.2%2031.4%20L790.7%2022.9%20L795.8%20-0.4%20L798.3%20-13.2%20L801.7%20-13.2%20L804.2%20-0.4%20L809.3%2022.9%20L817.8%2031.4%20L828.0%2042.0%20L829.7%2056.8%20L822.9%2069.5%20L826.3%2078.0%20L844.9%2084.4%20L853.4%2095.0%20L850.0%20107.7%20L838.2%20116.2%20L841.6%20124.6%20L851.7%20148.0%20L862.8%20184.0%20L872.1%20226.4%20L878.9%20273.0%20L883.1%20313.3%20L885.6%20336.6%20L895.0%20340.9%20L895.0%20396.0%20Z%22%2F%3E%3Cpath%20d%3D%22M802.1%20-8.9%20L857.2%204.9%20L802.1%2018.6%20Z%22%2F%3E%3Cpath%20d%3D%22M496.0%20396.0%20L496.0%20396.0%20L496.0%20360.0%20L510.7%20360.0%20L510.7%20324.0%20L525.3%20324.0%20L525.3%20288.0%20L540.0%20288.0%20L540.0%20252.0%20L554.7%20252.0%20L554.7%20216.0%20L569.3%20216.0%20L569.3%20180.0%20L584.0%20180.0%20L595.0%20180.0%20L599.0%20167.0%20L593.0%20161.0%20L602.0%20155.0%20L604.0%20140.0%20L612.0%20140.0%20L614.0%20155.0%20L623.0%20161.0%20L617.0%20167.0%20L621.0%20180.0%20L632.0%20180.0%20L646.7%20180.0%20L646.7%20216.0%20L661.3%20216.0%20L661.3%20252.0%20L676.0%20252.0%20L676.0%20288.0%20L690.7%20288.0%20L690.7%20324.0%20L705.3%20324.0%20L705.3%20360.0%20L720.0%20360.0%20L720.0%20396.0%20L720.0%20396.0%20Z%22%2F%3E%3Cpath%20d%3D%22M900.0%20396.0%20L900.0%20396.0%20L900.0%20366.3%20L912.7%20366.3%20L912.7%20336.7%20L925.3%20336.7%20L925.3%20307.0%20L938.0%20307.0%20L938.0%20277.3%20L950.7%20277.3%20L950.7%20247.7%20L963.3%20247.7%20L963.3%20218.0%20L976.0%20218.0%20L983.0%20218.0%20L987.0%20205.0%20L981.0%20199.0%20L990.0%20193.0%20L992.0%20178.0%20L1000.0%20178.0%20L1002.0%20193.0%20L1011.0%20199.0%20L1005.0%20205.0%20L1009.0%20218.0%20L1016.0%20218.0%20L1028.7%20218.0%20L1028.7%20247.7%20L1041.3%20247.7%20L1041.3%20277.3%20L1054.0%20277.3%20L1054.0%20307.0%20L1066.7%20307.0%20L1066.7%20336.7%20L1079.3%20336.7%20L1079.3%20366.3%20L1092.0%20366.3%20L1092.0%20396.0%20L1092.0%20396.0%20Z%22%2F%3E%3Cpath%20d%3D%22M333.7%20396.0%20L333.7%20372.1%20L338.0%20370.2%20L339.2%20360.1%20L341.2%20342.6%20L344.4%20322.4%20L348.7%20304.0%20L353.9%20288.4%20L358.6%20278.2%20L360.2%20274.6%20L354.7%20270.9%20L353.1%20265.4%20L357.0%20260.8%20L365.7%20258.0%20L367.3%20254.3%20L364.2%20248.8%20L364.9%20242.4%20L369.7%20237.8%20L373.6%20234.1%20L376.0%20224.0%20L377.2%20218.4%20L378.8%20218.4%20L380.0%20224.0%20L382.4%20234.1%20L386.3%20237.8%20L391.1%20242.4%20L391.8%20248.8%20L388.7%20254.3%20L390.3%20258.0%20L399.0%20260.8%20L402.9%20265.4%20L401.3%20270.9%20L395.8%20274.6%20L397.4%20278.2%20L402.1%20288.4%20L407.3%20304.0%20L411.6%20322.4%20L414.8%20342.6%20L416.8%20360.1%20L418.0%20370.2%20L422.3%20372.1%20L422.3%20396.0%20Z%22%2F%3E%3Cpath%20d%3D%22M1191.5%20396.0%20L1191.5%20374.2%20L1195.5%20372.5%20L1196.6%20363.2%20L1198.4%20347.3%20L1201.3%20328.8%20L1205.3%20312.0%20L1210.0%20297.7%20L1214.3%20288.5%20L1215.7%20285.1%20L1210.7%20281.8%20L1209.2%20276.7%20L1212.9%20272.5%20L1220.8%20270.0%20L1222.2%20266.6%20L1219.4%20261.6%20L1220.1%20255.7%20L1224.4%20251.5%20L1228.0%20248.2%20L1230.2%20238.9%20L1231.3%20233.9%20L1232.7%20233.9%20L1233.8%20238.9%20L1236.0%20248.2%20L1239.6%20251.5%20L1243.9%20255.7%20L1244.6%20261.6%20L1241.8%20266.6%20L1243.2%20270.0%20L1251.1%20272.5%20L1254.8%20276.7%20L1253.3%20281.8%20L1248.3%20285.1%20L1249.7%20288.5%20L1254.0%20297.7%20L1258.7%20312.0%20L1262.7%20328.8%20L1265.6%20347.3%20L1267.4%20363.2%20L1268.5%20372.5%20L1272.5%20374.2%20L1272.5%20396.0%20Z%22%2F%3E%3Cpath%20d%3D%22M136.0%20396.0%20L136.0%20396.0%20L136.0%20379.7%20L143.8%20379.7%20L143.8%20363.3%20L151.7%20363.3%20L151.7%20347.0%20L159.5%20347.0%20L159.5%20330.7%20L167.3%20330.7%20L167.3%20314.3%20L175.2%20314.3%20L175.2%20298.0%20L183.0%20298.0%20L183.0%20298.0%20L187.0%20285.0%20L181.0%20279.0%20L190.0%20273.0%20L192.0%20258.0%20L200.0%20258.0%20L202.0%20273.0%20L211.0%20279.0%20L205.0%20285.0%20L209.0%20298.0%20L209.0%20298.0%20L216.8%20298.0%20L216.8%20314.3%20L224.7%20314.3%20L224.7%20330.7%20L232.5%20330.7%20L232.5%20347.0%20L240.3%20347.0%20L240.3%20363.3%20L248.2%20363.3%20L248.2%20379.7%20L256.0%20379.7%20L256.0%20396.0%20L256.0%20396.0%20Z%22%2F%3E%3Cpath%20d%3D%22M1362.0%20396.0%20L1362.0%20396.0%20L1362.0%20381.0%20L1369.3%20381.0%20L1369.3%20366.0%20L1376.7%20366.0%20L1376.7%20351.0%20L1384.0%20351.0%20L1384.0%20336.0%20L1391.3%20336.0%20L1391.3%20321.0%20L1398.7%20321.0%20L1398.7%20306.0%20L1406.0%20306.0%20L1405.0%20306.0%20L1409.0%20293.0%20L1403.0%20287.0%20L1412.0%20281.0%20L1414.0%20266.0%20L1422.0%20266.0%20L1424.0%20281.0%20L1433.0%20287.0%20L1427.0%20293.0%20L1431.0%20306.0%20L1430.0%20306.0%20L1437.3%20306.0%20L1437.3%20321.0%20L1444.7%20321.0%20L1444.7%20336.0%20L1452.0%20336.0%20L1452.0%20351.0%20L1459.3%20351.0%20L1459.3%20366.0%20L1466.7%20366.0%20L1466.7%20381.0%20L1474.0%20381.0%20L1474.0%20396.0%20L1474.0%20396.0%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
[data-theme="dark"] .page-hero::after { opacity: .10; filter: invert(1); }

.cta-band::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 170px;
  pointer-events: none; opacity: .13; z-index: 0;
  background-repeat: repeat-x; background-position: center bottom; background-size: auto 100%;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%22464%22%20viewBox%3D%220%20-44%201600%20464%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%220%22%20y%3D%22396%22%20width%3D%221600%22%20height%3D%2224%22%2F%3E%3Crect%20x%3D%22410%22%20y%3D%22380%22%20width%3D%22780%22%20height%3D%2216%22%2F%3E%3Cpath%20d%3D%22M705.0%20396.0%20L705.0%20340.9%20L714.4%20336.6%20L716.9%20313.3%20L721.1%20273.0%20L727.9%20226.4%20L737.2%20184.0%20L748.3%20148.0%20L758.4%20124.6%20L761.8%20116.2%20L750.0%20107.7%20L746.6%2095.0%20L755.1%2084.4%20L773.7%2078.0%20L777.1%2069.5%20L770.3%2056.8%20L772.0%2042.0%20L782.2%2031.4%20L790.7%2022.9%20L795.8%20-0.4%20L798.3%20-13.2%20L801.7%20-13.2%20L804.2%20-0.4%20L809.3%2022.9%20L817.8%2031.4%20L828.0%2042.0%20L829.7%2056.8%20L822.9%2069.5%20L826.3%2078.0%20L844.9%2084.4%20L853.4%2095.0%20L850.0%20107.7%20L838.2%20116.2%20L841.6%20124.6%20L851.7%20148.0%20L862.8%20184.0%20L872.1%20226.4%20L878.9%20273.0%20L883.1%20313.3%20L885.6%20336.6%20L895.0%20340.9%20L895.0%20396.0%20Z%22%2F%3E%3Cpath%20d%3D%22M802.1%20-8.9%20L857.2%204.9%20L802.1%2018.6%20Z%22%2F%3E%3Cpath%20d%3D%22M496.0%20396.0%20L496.0%20396.0%20L496.0%20360.0%20L510.7%20360.0%20L510.7%20324.0%20L525.3%20324.0%20L525.3%20288.0%20L540.0%20288.0%20L540.0%20252.0%20L554.7%20252.0%20L554.7%20216.0%20L569.3%20216.0%20L569.3%20180.0%20L584.0%20180.0%20L595.0%20180.0%20L599.0%20167.0%20L593.0%20161.0%20L602.0%20155.0%20L604.0%20140.0%20L612.0%20140.0%20L614.0%20155.0%20L623.0%20161.0%20L617.0%20167.0%20L621.0%20180.0%20L632.0%20180.0%20L646.7%20180.0%20L646.7%20216.0%20L661.3%20216.0%20L661.3%20252.0%20L676.0%20252.0%20L676.0%20288.0%20L690.7%20288.0%20L690.7%20324.0%20L705.3%20324.0%20L705.3%20360.0%20L720.0%20360.0%20L720.0%20396.0%20L720.0%20396.0%20Z%22%2F%3E%3Cpath%20d%3D%22M900.0%20396.0%20L900.0%20396.0%20L900.0%20366.3%20L912.7%20366.3%20L912.7%20336.7%20L925.3%20336.7%20L925.3%20307.0%20L938.0%20307.0%20L938.0%20277.3%20L950.7%20277.3%20L950.7%20247.7%20L963.3%20247.7%20L963.3%20218.0%20L976.0%20218.0%20L983.0%20218.0%20L987.0%20205.0%20L981.0%20199.0%20L990.0%20193.0%20L992.0%20178.0%20L1000.0%20178.0%20L1002.0%20193.0%20L1011.0%20199.0%20L1005.0%20205.0%20L1009.0%20218.0%20L1016.0%20218.0%20L1028.7%20218.0%20L1028.7%20247.7%20L1041.3%20247.7%20L1041.3%20277.3%20L1054.0%20277.3%20L1054.0%20307.0%20L1066.7%20307.0%20L1066.7%20336.7%20L1079.3%20336.7%20L1079.3%20366.3%20L1092.0%20366.3%20L1092.0%20396.0%20L1092.0%20396.0%20Z%22%2F%3E%3Cpath%20d%3D%22M333.7%20396.0%20L333.7%20372.1%20L338.0%20370.2%20L339.2%20360.1%20L341.2%20342.6%20L344.4%20322.4%20L348.7%20304.0%20L353.9%20288.4%20L358.6%20278.2%20L360.2%20274.6%20L354.7%20270.9%20L353.1%20265.4%20L357.0%20260.8%20L365.7%20258.0%20L367.3%20254.3%20L364.2%20248.8%20L364.9%20242.4%20L369.7%20237.8%20L373.6%20234.1%20L376.0%20224.0%20L377.2%20218.4%20L378.8%20218.4%20L380.0%20224.0%20L382.4%20234.1%20L386.3%20237.8%20L391.1%20242.4%20L391.8%20248.8%20L388.7%20254.3%20L390.3%20258.0%20L399.0%20260.8%20L402.9%20265.4%20L401.3%20270.9%20L395.8%20274.6%20L397.4%20278.2%20L402.1%20288.4%20L407.3%20304.0%20L411.6%20322.4%20L414.8%20342.6%20L416.8%20360.1%20L418.0%20370.2%20L422.3%20372.1%20L422.3%20396.0%20Z%22%2F%3E%3Cpath%20d%3D%22M1191.5%20396.0%20L1191.5%20374.2%20L1195.5%20372.5%20L1196.6%20363.2%20L1198.4%20347.3%20L1201.3%20328.8%20L1205.3%20312.0%20L1210.0%20297.7%20L1214.3%20288.5%20L1215.7%20285.1%20L1210.7%20281.8%20L1209.2%20276.7%20L1212.9%20272.5%20L1220.8%20270.0%20L1222.2%20266.6%20L1219.4%20261.6%20L1220.1%20255.7%20L1224.4%20251.5%20L1228.0%20248.2%20L1230.2%20238.9%20L1231.3%20233.9%20L1232.7%20233.9%20L1233.8%20238.9%20L1236.0%20248.2%20L1239.6%20251.5%20L1243.9%20255.7%20L1244.6%20261.6%20L1241.8%20266.6%20L1243.2%20270.0%20L1251.1%20272.5%20L1254.8%20276.7%20L1253.3%20281.8%20L1248.3%20285.1%20L1249.7%20288.5%20L1254.0%20297.7%20L1258.7%20312.0%20L1262.7%20328.8%20L1265.6%20347.3%20L1267.4%20363.2%20L1268.5%20372.5%20L1272.5%20374.2%20L1272.5%20396.0%20Z%22%2F%3E%3Cpath%20d%3D%22M136.0%20396.0%20L136.0%20396.0%20L136.0%20379.7%20L143.8%20379.7%20L143.8%20363.3%20L151.7%20363.3%20L151.7%20347.0%20L159.5%20347.0%20L159.5%20330.7%20L167.3%20330.7%20L167.3%20314.3%20L175.2%20314.3%20L175.2%20298.0%20L183.0%20298.0%20L183.0%20298.0%20L187.0%20285.0%20L181.0%20279.0%20L190.0%20273.0%20L192.0%20258.0%20L200.0%20258.0%20L202.0%20273.0%20L211.0%20279.0%20L205.0%20285.0%20L209.0%20298.0%20L209.0%20298.0%20L216.8%20298.0%20L216.8%20314.3%20L224.7%20314.3%20L224.7%20330.7%20L232.5%20330.7%20L232.5%20347.0%20L240.3%20347.0%20L240.3%20363.3%20L248.2%20363.3%20L248.2%20379.7%20L256.0%20379.7%20L256.0%20396.0%20L256.0%20396.0%20Z%22%2F%3E%3Cpath%20d%3D%22M1362.0%20396.0%20L1362.0%20396.0%20L1362.0%20381.0%20L1369.3%20381.0%20L1369.3%20366.0%20L1376.7%20366.0%20L1376.7%20351.0%20L1384.0%20351.0%20L1384.0%20336.0%20L1391.3%20336.0%20L1391.3%20321.0%20L1398.7%20321.0%20L1398.7%20306.0%20L1406.0%20306.0%20L1405.0%20306.0%20L1409.0%20293.0%20L1403.0%20287.0%20L1412.0%20281.0%20L1414.0%20266.0%20L1422.0%20266.0%20L1424.0%20281.0%20L1433.0%20287.0%20L1427.0%20293.0%20L1431.0%20306.0%20L1430.0%20306.0%20L1437.3%20306.0%20L1437.3%20321.0%20L1444.7%20321.0%20L1444.7%20336.0%20L1452.0%20336.0%20L1452.0%20351.0%20L1459.3%20351.0%20L1459.3%20366.0%20L1466.7%20366.0%20L1466.7%20381.0%20L1474.0%20381.0%20L1474.0%20396.0%20L1474.0%20396.0%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.cta-band > * { position: relative; z-index: 1; }

.temple-band::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34px; z-index: 1;
  background-repeat: repeat-x; background-position: center; background-size: auto 34px; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='34' viewBox='0 0 220 34'%3E%3Cg fill='none' stroke='%23ffe9b8' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M0 20c10-14 28-14 34-3 4 7-6 12-11 8-4-3 0-9 5-6'/%3E%3Cpath d='M34 17c8-12 26-12 32-2 4 7-6 12-11 8-4-3 0-9 5-6'/%3E%3Cpath d='M72 19c9-13 27-11 33-1 4 7-6 12-11 8-4-3 0-9 5-6'/%3E%3Cpath d='M110 17c8-12 26-12 32-2 4 7-6 12-11 8-4-3 0-9 5-6'/%3E%3Cpath d='M148 19c9-13 27-11 33-1 4 7-6 12-11 8-4-3 0-9 5-6'/%3E%3Cpath d='M186 17c8-12 26-12 32-2 4 7-6 12-11 8-4-3 0-9 5-6'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Real product photos inside tiles ---------- */
.daily-ico { width: 76px; height: 76px; border-radius: 18px; overflow: hidden; background: #fff; padding: 5px; }
.daily-ico img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pcard-art { background: linear-gradient(150deg, var(--cream-dark), var(--sand)); }
.pcard-art > .imgslot, .pcard-art img { width: 100%; height: 100%; }
.pcard-art img { object-fit: contain; padding: 22px; mix-blend-mode: multiply; }
/* In dark mode the tile's gradient resolves to near-black while the photo
   keeps the white background it was shot on — so the photo reads as a white
   block floating on the card. Multiply can't rescue it (multiplying against
   black gives black), so the tile keeps a light plinth in dark mode instead
   and the photo's white edges disappear into it. Same trick as .item-art. */
[data-theme="dark"] .pcard-art {
  background: linear-gradient(150deg, #f7ede1, #ecdfcd);
  filter: none;
}
/* and because the plinth is light again, multiply keeps working in dark mode
   too, which is what melts the photo's white corners into the tile */
[data-theme="dark"] .pcard-art img { mix-blend-mode: multiply; }
[data-theme="dark"] .item-art { filter: none; }
.item-art { background: #fff; }
.item-art img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
[data-theme="dark"] .item-art { background: #f7f3ee; }
.carousel-slide img { object-fit: cover; }

/* ============================================================
   PRODUCT TILES — show the WHOLE pack, never crop it
   .imgslot > img defaults to object-fit:cover for photography;
   product packs must override that.
   ============================================================ */
.item-art, .pcard-art, .daily-ico { overflow: hidden; }

.item-art > img,
.item-art .imgslot > img,
.pcard-art > img,
.pcard-art .imgslot > img,
.daily-ico > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block;
}

.item-art { background: #fff; padding: 14px; }
/* The tile is square through aspect-ratio, which gives it no fixed height,
   so a percentage height on the photo did not resolve: a tall bottle kept
   its own height and the tile cut it off at the label. Pinning the photo to
   the tile's inner box makes "contain" fit the WHOLE pack, every time. */
.item-art > img {
  position: absolute !important; inset: 14px;
  width: calc(100% - 28px) !important; height: calc(100% - 28px) !important;
  padding: 0; transition: transform .35s var(--ease-out);
}
.item:hover .item-art > img { transform: scale(1.06); }

.pcard-art { padding: 20px; }
.pcard-art > img { mix-blend-mode: multiply; }
[data-theme="dark"] .pcard-art > img { mix-blend-mode: multiply; }

.daily-ico { padding: 6px; background: #fff; }

/* price line on the card */
.item-price {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.item-price b {
  font-family: var(--font-display); font-size: 1.1rem;
  color: var(--tomato-600); font-weight: 700; line-height: 1;
}
.item-price small { font-size: .72rem; color: var(--muted); }
.item-price .ask { font-family: var(--font-body); font-size: .84rem; font-weight: 600; color: var(--muted); }

/* ============================================================
   FULL-BLEED HERO CAROUSEL
   Sits directly under the header, edge to edge, zero side margin.
   ============================================================ */
.hero-carousel {
  position: relative;
  width: 100%;
  background: var(--cream-dark);
  overflow: hidden;
}

/* The posters are finished artwork: the logo sits at the very top and a
   feature strip runs along the very bottom. So the box takes the artwork's
   own shape rather than a chosen one — any other ratio crops one or the
   other off. Change this if the poster size ever changes. */
.carousel--full {
  border-radius: 0;
  box-shadow: none;
  border: 0;
  aspect-ratio: 1711 / 919;      /* the posters' own size — keep in sync */
  background: var(--cream-dark);
  /* No max-height. There used to be one, and on a laptop it shrank the box
     below the poster's ratio, which left cream bars down both sides. Full
     width at the poster's own ratio is the only setting that is both edge
     to edge and uncropped. */
}
.carousel--full .carousel-slide { background: var(--cream-dark); }
/* cover, now that the box always carries the poster's exact ratio. With the
   two ratios equal there is nothing to crop, and cover swallows the
   half-pixel rounding that contain would show as a cream hairline down one
   edge. If a poster of a different shape is ever dropped in, update the
   aspect-ratio above to match it — otherwise cover will quietly crop it. */
.carousel--full .carousel-slide > img,
.carousel--full .carousel-slide .imgslot > img {
  width: 100%; height: 100%;
  object-fit: contain !important;
  object-position: center;
  display: block;
  position: relative; z-index: 1;
}

/* ---- Whole poster above the fold ----
   At full width a 1.86:1 poster is ~1030px tall on a 1920 screen, so its
   bottom sat below the fold on every laptop. The box is now the smaller of
   (a) full width at the poster's ratio and (b) the screen height left under
   the top bar and header (~116px). On phones and tablets (a) always wins, so
   nothing changes there. On a laptop (b) wins and the poster is shown whole
   and centred — and instead of plain cream bars either side, a blurred,
   enlarged copy of the same poster fills them, so it still reads as edge to
   edge. Container units (cqw) measure the real width without the scrollbar;
   the aspect-ratio above stays as the fallback for old browsers. */
.hero-carousel { container-type: inline-size; }
@supports (height: 1cqw) {
  .carousel--full {
    aspect-ratio: auto;
    height: min(calc(100cqw * 919 / 1711), calc(100vh - 116px));
    height: min(calc(100cqw * 919 / 1711), calc(100svh - 116px));
  }
}
.carousel--full .carousel-slide { overflow: hidden; }
/* selector outranks ".carousel--full .carousel-slide > img", which would
   otherwise make the fill layer contained, relative and on top */
.carousel--full .carousel-slide > img.slide-fill {
  position: absolute; left: -40px; top: -40px;
  width: calc(100% + 80px) !important; height: calc(100% + 80px) !important;
  object-fit: cover !important; filter: blur(26px) saturate(1.15) brightness(.92);
  z-index: 0; pointer-events: none;
}
@media (prefers-reduced-transparency: reduce) { .carousel--full .slide-fill { filter: none; opacity: .35; } }

/* caption sits inside a readable column even though the image is full width */
.carousel--full .carousel-cap {
  padding: 0;
  background: linear-gradient(to top, rgba(61,26,16,.80), rgba(61,26,16,.34) 46%, transparent 78%);
  display: flex; align-items: flex-end;
  min-height: 62%;
}
.carousel--full .carousel-cap > div {
  width: min(100% - 48px, var(--wrap));
  margin-inline: auto;
  padding-bottom: clamp(26px, 5vw, 62px);
}
.carousel--full .carousel-cap h3 {
  font-size: clamp(1.5rem, 3.6vw, 3rem);
  margin-bottom: 10px; max-width: 20ch;
}
.carousel--full .carousel-cap p { font-size: clamp(.92rem, 1.4vw, 1.08rem); max-width: 56ch; }

.carousel--full .carousel-nav { width: 50px; height: 50px; margin-top: -25px; }
/* Bigger on the full-bleed banner: with no disc behind it, the arrow needs
   the size to be an obvious control rather than a stray mark. */
.carousel--full .carousel-nav svg { width: 30px; height: 30px; stroke-width: 2.5; }
.carousel--full .carousel-nav--prev { left: clamp(12px, 2.5vw, 34px); }
.carousel--full .carousel-nav--next { right: clamp(12px, 2.5vw, 34px); }
.carousel--full .carousel-dots { bottom: clamp(12px, 2vw, 22px); }

/* Same shape on every screen — full width, whole poster, no bars. It goes
   small on a phone; the fix for that is a portrait version of each poster,
   not a crop of this one. Nothing to override here any more. */

/* ============================================================
   SPICE ARTWORK — original illustrations, used as soft layers
   ============================================================ */



/* ---------- Hero without an image column ---------- */
.hero-grid--solo { grid-template-columns: 1fr; max-width: 940px; }
.hero-grid--solo .hero-lede { max-width: 62ch; }
.hero-grid--solo .hero-stats { max-width: 820px; }
.hero { padding-top: clamp(44px, 5vw, 74px); }

/* ============================================================
   PREMIUM SURFACE TREATMENT
   Depth, warmth and texture instead of flat cream.
   ============================================================ */

/* ---- 1. Fine paper grain across the whole page ---- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .40; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::before { opacity: .22; mix-blend-mode: overlay; }
body > * { position: relative; z-index: 1; }

/* ---- 2. Warm ambient light behind the page ---- */
body {
  background-image:
    radial-gradient(1200px 700px at 88% 2%, rgba(228,48,47,.055), transparent 62%),
    radial-gradient(1000px 640px at 4% 34%, rgba(217,164,65,.070), transparent 60%),
    radial-gradient(900px 620px at 72% 86%, rgba(194,33,31,.045), transparent 62%);
  background-attachment: fixed;
}
[data-theme="dark"] body {
  background-image:
    radial-gradient(1200px 700px at 88% 2%, rgba(255,92,61,.075), transparent 62%),
    radial-gradient(1000px 640px at 4% 34%, rgba(255,193,71,.055), transparent 60%);
}

/* ---- 3. Cream sections get a woven linen texture ---- */
.bg-cream-dark { position: relative; }
.bg-cream-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
  background-image:
    repeating-linear-gradient(45deg,  rgba(168,114,44,.030) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(168,114,44,.024) 0 1px, transparent 1px 9px);
}
[data-theme="dark"] .bg-cream-dark::after { opacity: .30; }
.bg-cream-dark > .wrap { position: relative; z-index: 1; }

/* ---- 4. Soft fade where sections meet ---- */
.section { position: relative; }
.bg-cream-dark::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px; z-index: 0;
  background: linear-gradient(to bottom, var(--cream), transparent);
  pointer-events: none;
}

/* ---- 5. Cards lift off the page ---- */
.card, .pcard, .item, .unit, .cert, .benefit, .req-card, .state, .daily-item, .form-card {
  box-shadow: 0 1px 2px rgba(90,40,20,.045), 0 6px 20px rgba(90,40,20,.055);
  background-image: linear-gradient(170deg, rgba(255,255,255,.9), rgba(255,255,255,0) 46%);
}
.card:hover, .pcard:hover, .item:hover, .unit:hover, .benefit:hover, .daily-item:hover {
  box-shadow: 0 4px 10px rgba(90,40,20,.08), 0 20px 46px rgba(90,40,20,.12);
}
[data-theme="dark"] .card, [data-theme="dark"] .pcard, [data-theme="dark"] .item,
[data-theme="dark"] .unit, [data-theme="dark"] .cert, [data-theme="dark"] .benefit,
[data-theme="dark"] .req-card, [data-theme="dark"] .state, [data-theme="dark"] .daily-item,
[data-theme="dark"] .form-card {
  background-image: linear-gradient(170deg, rgba(255,255,255,.045), rgba(255,255,255,0) 46%);
  box-shadow: 0 2px 6px rgba(0,0,0,.34), 0 14px 40px rgba(0,0,0,.30);
}

/* ---- 6. Carousel sits on a warm plinth with a soft inner edge ---- */
.hero-carousel {
  background: linear-gradient(180deg, var(--sand), var(--cream-dark));
  box-shadow: inset 0 -22px 40px -22px rgba(90,40,20,.28);
}
.hero-carousel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; z-index: 3;
  background: linear-gradient(90deg, var(--tomato-500), var(--turmeric), var(--tomato-500));
  background-size: 220% 100%;
  animation: sheen 9s linear infinite;
}
@keyframes sheen { to { background-position: 220% 0; } }

/* ---- 8. Section headings get a small gold rule underneath ---- */
.section-head.center h2::after {
  content: ""; display: block; width: 62px; height: 3px; border-radius: 3px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, var(--tomato-500), var(--turmeric));
}

/* ============================================================
   ACCENT ARTWORK — used in a few places only, never site-wide
   ============================================================ */

/* ---- 1. POWDER BURST — the dramatic one. Two placements max. ---- */
.burst { position: relative; overflow: hidden; }
.burst::before {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  width: 900px; height: 700px;
  background: url("../images/art/powder-burst.svg") no-repeat center / contain;
  opacity: .85;
}
.burst--tr::before { top: -90px; right: -150px; transform: scaleX(-1); }
.burst--bl::before { bottom: -120px; left: -170px; }
.burst > .wrap { position: relative; z-index: 1; }
[data-theme="dark"] .burst::before { opacity: .55; }
@media (max-width: 900px) { .burst::before { width: 620px; height: 480px; opacity: .5; } }

/* ---- 2. MANDALA CORNERS — one section header, both sides ---- */
.mandala-head { position: relative; overflow: hidden; }
.mandala-head::before,
.mandala-head::after {
  content: ""; position: absolute; top: 50%; margin-top: -150px;
  width: 300px; height: 300px; pointer-events: none; z-index: 0;
  background: url("../images/art/mandala-corner.svg") no-repeat center / contain;
  opacity: .75;
}
.mandala-head::before { left: -128px;  transform: rotate(-90deg); }
.mandala-head::after  { right: -128px; transform: rotate(90deg); }
.mandala-head > .wrap { position: relative; z-index: 1; }
[data-theme="dark"] .mandala-head::before,
[data-theme="dark"] .mandala-head::after { opacity: .42; }
@media (max-width: 820px) {
  .mandala-head::before, .mandala-head::after { width: 180px; height: 180px; margin-top: -90px; opacity: .38; }
  .mandala-head::before { left: -96px; } .mandala-head::after { right: -96px; }
}

/* ---- 3. TRADITIONAL BORDER STRIP ---- */
.tradstrip {
  height: 64px;
  background: url("../images/art/border-strip.svg") repeat-x center / auto 64px;
  opacity: .92;
}
[data-theme="dark"] .tradstrip { opacity: .48; }
.tradstrip--flip { transform: scaleY(-1); }
@media (max-width: 620px) { .tradstrip { height: 44px; background-size: auto 44px; } }

/* ============================================================
   CAREER PAGE
   ============================================================ */
.career-hero {
  position: relative; overflow: hidden;
  min-height: clamp(340px, 46vw, 520px);
  display: grid; align-items: center;
  background: linear-gradient(120deg, #c2211f, #e4302f 45%, #f0722a);
}
.career-hero .imgslot { position: absolute; inset: 0; border-radius: 0; }
.career-hero .imgslot > img { width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.career-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(120,20,14,.78), rgba(120,20,14,.30) 62%, transparent);
}
.career-hero > .wrap { position: relative; z-index: 2; padding-block: clamp(40px, 6vw, 72px); }
.career-hero h1 { color: #fff; max-width: 18ch; }
.career-hero h1 em { color: #ffd27a; font-style: normal; }
.career-hero p { color: rgba(255,255,255,.90); max-width: 52ch; margin-top: 16px; font-size: 1.06rem; }

.jobsearch {
  background: var(--card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  padding: clamp(22px, 3vw, 34px);
  margin-top: clamp(-70px, -6vw, -46px); position: relative; z-index: 3;
}
.jobsearch h3 { margin-bottom: 18px; }
.jobsearch-row { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 14px; }
.jobsearch-field { position: relative; }
.jobsearch-field svg {
  position: absolute; left: 16px; top: 50%; margin-top: -10px;
  width: 20px; height: 20px; stroke: var(--muted); fill: none; stroke-width: 2; pointer-events: none;
}
.jobsearch-field input {
  width: 100%; padding: 15px 18px 15px 46px; font: inherit; font-size: .95rem;
  border: 1.5px solid var(--line-strong); border-radius: 100px;
  background: var(--cream); color: var(--ink);
}
.jobsearch-field input:focus { outline: none; border-color: var(--tomato-500); box-shadow: 0 0 0 4px rgba(228,48,47,.12); }
@media (max-width: 780px) { .jobsearch-row { grid-template-columns: 1fr; } .jobsearch-row .btn { justify-content: center; } }

.job {
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px 26px; transition: transform .28s var(--ease-out), box-shadow .28s, border-color .28s;
}
.job:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--tomato-200); }
.job.is-hidden { display: none; }
.job h4 { font-size: 1.14rem; margin-bottom: 8px; }
.job-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.job-meta span {
  font-size: .74rem; font-weight: 600; padding: 5px 12px; border-radius: 100px;
  background: var(--cream-dark); color: var(--ink-soft);
}
.job-meta .dept { background: var(--tomato-100); color: var(--tomato-700); }
@media (max-width: 620px) { .job { grid-template-columns: 1fr; } .job .btn { justify-content: center; } }

.perk { text-align: center; padding: 30px 22px; }
.perk-ico {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 17px;
  background: var(--tomato-50); border: 1px solid var(--tomato-100);
  display: grid; place-items: center;
}
.perk-ico svg { width: 27px; height: 27px; stroke: var(--tomato-500); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }


/* ============================================================
   REAL PHOTOGRAPHY BACKGROUNDS

   The drawn spice illustrations did not read — a star anise at 15%
   opacity looks like a flower, not a spice. Everything abstract is
   switched off below and replaced with real photographs, blurred
   hard enough that they are texture rather than picture.

   How it works: each photo is pre-processed to a warm, near-white
   duotone with the centre lightened, then multiplied against the
   section's own background colour. Multiplying a near-white image
   is close to a no-op, so the page colour survives and the photo
   only ever darkens — text contrast can go up, never down.
   ============================================================ */

/* --- on: real food, real temple, softly out of focus --- */
.photobg {
  --scrim: 253, 248, 242;
  position: relative;
  background-color: var(--cream);
  background-image:
    radial-gradient(58% 46% at 50% 50%,
      rgba(var(--scrim), .88)   0%,
      rgba(var(--scrim), .86)  38%,
      rgba(var(--scrim), .68)  62%,
      rgba(var(--scrim), .34)  84%,
      rgba(var(--scrim), .12) 100%),
    var(--photo);
  background-size: 100% 100%, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.photobg.bg-cream-dark { --scrim: 247, 237, 225; background-color: var(--cream-dark); }
.photobg > .wrap       { position: relative; z-index: 1; }

.photobg--spices     { --photo: url("../images/bg/bg-spices.jpg"); }
.photobg--spiceplate { --photo: url("../images/bg/bg-spiceplate.jpg"); }
.photobg--temple     { --photo: url("../images/bg/bg-temple.jpg"); }
.photobg--bowl       { --photo: url("../images/bg/bg-bowl.jpg"); }

/* Narrow screens: the section is barely wider than the text, so the clear
   centre would swallow the photo. Shrink the scrim and let more show. */
@media (max-width: 900px) {
  .photobg { background-image:
    radial-gradient(72% 40% at 50% 50%,
      rgba(var(--scrim), .90)   0%,
      rgba(var(--scrim), .88)  46%,
      rgba(var(--scrim), .70)  70%,
      rgba(var(--scrim), .40) 100%),
    var(--photo); }
}

/* Dark theme multiplies a near-white image against near-black, which
   would erase it anyway. Drop it cleanly instead. */
[data-theme="dark"] .photobg { background-image: none; }

/* ---- Career hero: the banner carries its own artwork, show it clean ---- */
/* ---- career hero: the team photo as a blurred backdrop, not a picture ----
   The supplied banner has its own headline baked into the artwork, so it is
   blurred past legibility and used only as depth behind our own text. ---- */
.career-hero {
  background-image:
    linear-gradient(105deg, rgba(120,20,14,.88), rgba(194,33,31,.62) 50%, rgba(240,114,42,.38)),
    url("../images/career-bg.jpg");
  background-size: cover, cover;
  background-position: center, 60% 40%;
  background-repeat: no-repeat, no-repeat;
}
.career-hero::after { display: none; }
.career-hero .wrap { max-width: min(1180px, 92vw); }
.eyebrow--onred { color: #ffd9a3; }
.eyebrow--onred::before { background: #ffd9a3; }
@media (max-width: 700px) {
  .career-hero { background-position: center, 62% center; }
}

/* ============================================================
   DECORATIVE ACCENTS

   No full-bleed pictures. Real food photography sits in the empty
   margin beside the text column, at a corner, shown whole — never
   cropped by the section edge and never underneath a word. Placement
   is uneven on purpose and several sections carry nothing at all.
   ============================================================ */

/* --- off: everything that used to sit behind the words --- */
.photobg { background-image: none; }
.burst::before,
.mandala-head::before,
.mandala-head::after,
.temple-band::before,
.temple-band::after,
.page-hero::after,
body::before { content: none; }
.tradstrip, .tradborder { display: none; }

/* --- corner doodles: one per page at most, never two in a row --- */
.dood { position: relative; overflow: hidden; }
.dood > .wrap { position: relative; z-index: 1; }

/* The drawing is a real element, not a ::before on the section.
   .bg-cream-dark already uses ::before for its top fade, and that rule sets
   left:0 / top:0. Sharing the pseudo-element meant the doodle inherited
   those, ended up with left, right and width all set at once, and the
   browser resolved that by dropping `right` — which is why a
   right-anchored drawing kept appearing on the left, pinned to the top. */
.dood-art {
  position: absolute; z-index: 0; pointer-events: none;
  background-repeat: no-repeat; background-size: contain;
  --d: clamp(340px, 48vw, 820px);
  width: var(--d);
  height: min(calc(var(--d) * var(--ar)), 100%);
  opacity: .17;
}
[data-theme="dark"] .dood-art { opacity: .13; filter: invert(1) sepia(.5) saturate(2); }

.dood-art--prime  { background-image: url("../images/accent/doodle-prime.webp");  --ar: .858; }
.dood-art--odisha { background-image: url("../images/accent/doodle-odisha.webp"); --ar: .966; }

/* No mirroring — both drawings carry readable words (SATTU, TOMATO KETCHUP,
   MANGO PICKLE, a calendar) and a flip renders every one backwards. */
.dood-art--bl { left: 0;  bottom: 0; background-position: left bottom; }
.dood-art--br { right: 0; bottom: 0; background-position: right bottom; }
.dood-art--tl { left: 0;  top: 0;    background-position: left top; }
.dood-art--tr { right: 0; top: 0;    background-position: right top; }

@media (max-width: 900px) { .dood-art { --d: 300px; opacity: .13; } }
@media (max-width: 620px) { .dood-art { display: none; } }

/* --- section dividers ---
   Eight distinct rails. Every section boundary carries one, and the page
   templates cycle through them so no two touching sections share a motif. */
.ornament {
  height: 34px; pointer-events: none;
  background-repeat: repeat-x; background-position: center; background-size: auto 100%;
  background-image: url("../images/accent/orn-curl.svg");
  opacity: .78;
  margin: 0;
}
.ornament--fan     { height: 30px; background-image: url("../images/accent/orn-fan.svg");     background-position: center top; }
.ornament--tri     { height: 32px; background-image: url("../images/accent/orn-tri.svg");     background-position: center top; }
.ornament--diamond { height: 28px; background-image: url("../images/accent/orn-diamond.svg"); }
.ornament--wave    { height: 26px; background-image: url("../images/accent/orn-wave.svg"); }
.ornament--petal   { height: 30px; background-image: url("../images/accent/orn-petal.svg");   background-position: center bottom; }
.ornament--flip    { transform: scaleY(-1); }
[data-theme="dark"] .ornament { opacity: .45; }
@media (max-width: 620px) { .ornament { height: 22px !important; } }

/* --- category photography on the range cards and the Products headers --- */
.pcard-art--photo > img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center !important;
  transition: transform .5s cubic-bezier(.34,1.3,.64,1);
}
.pcard:hover .pcard-art--photo > img { transform: scale(1.05); }

/* Designed category artwork — a complete 4:3 composition with its own
   background, not a pack cut out on white. So: no padding (it fills the tile
   edge to edge, and the tile is 4:3 so nothing is cropped), and no multiply.
   Multiply exists to melt a white background into the cream plinth; on a full
   photograph it just tints everything toward the plinth colour. */
.pcard-art--poster { padding: 0 !important; background: none; }
.pcard-art--poster > img,
[data-theme="dark"] .pcard-art--poster > img {
  padding: 0 !important;
  mix-blend-mode: normal !important;
}
.pcard:hover .pcard-art--poster > img { transform: scale(1.03); }

/* Full width at the artwork's own 24:7. A shorter box at full width would
   crop the top of the PRIME logo and the bottom slogan on most banners —
   the fix for a lower banner is a wider export (2400x600), not a crop. */
.cat-banner {
  aspect-ratio: 24 / 7; overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  margin-bottom: clamp(18px, 2.4vw, 28px);
  background: var(--cream-dark);
}
.cat-banner > img { width: 100%; height: 100%; object-fit: cover !important; }
/* On a phone the box was 16:7 while the file is 24:7, so `cover` cropped the
   sides off — taking the Prime logo with them. Matching the file's own ratio
   shows the whole banner instead. A dedicated mobile crop is better still;
   see assets/images/banner/README.txt. */
@media (max-width: 700px) {
  .cat-banner { aspect-ratio: 24 / 7; }
  .cat-banner > img { object-fit: contain !important; }
  .cat-banner.has-mobile { aspect-ratio: 4 / 3; }
  .cat-banner.has-mobile > img { object-fit: cover !important; }
}

/* --- Odia culture doodle rail, used as a divider a few times ---
   Drawn as a mask rather than a coloured image so the line takes its
   colour from the theme and stays visible in dark mode. */
.doodle {
  height: clamp(54px, 6.4vw, 88px);
  pointer-events: none;
  background-color: var(--turmeric-dark);
  opacity: .42;
  -webkit-mask: url("../images/accent/doodle-strip.svg") repeat-x center / auto 100%;
          mask: url("../images/accent/doodle-strip.svg") repeat-x center / auto 100%;
}
[data-theme="dark"] .doodle { background-color: var(--turmeric); opacity: .32; }
@media (max-width: 620px) { .doodle { height: 46px; opacity: .34; } }

/* --- hero backdrop -------------------------------------------------
   The Odisha spice illustration, anchored to the right of the hero.
   It is masked with a horizontal gradient so its left edge dissolves
   into the page instead of ending on a visible vertical seam, which
   also keeps it clear of the headline and the buttons. */
.hero { overflow: hidden; }
.hero > .wrap { position: relative; z-index: 2; }
.hero-specks { z-index: 1; }

/* The artwork is a real <img>, not a CSS background.
   As a background it had three problems: the browser only starts fetching it
   after the stylesheet parses, which is the flash on reload; its size was tied
   to the hero box, which kept changing as the page settled; and the fade was a
   mask stretched across the whole hero rather than the picture, so it barely
   faded and left a visible edge.
   The fade is now baked into the file's alpha channel, so there is no straight
   edge at any size, and width/height attributes on the tag reserve the space
   before it loads — nothing shifts, nothing blinks. */
.hero-art {
  position: absolute; right: 0; bottom: 0; z-index: 0;
  width: clamp(430px, 53vw, 900px);
  height: auto;
  aspect-ratio: auto;          /* never let an old rule reshape the photo */
  pointer-events: none; user-select: none;
  max-width: none;
}
[data-theme="dark"] .hero-art { opacity: .32; }

@media (max-width: 1000px) { .hero-art { opacity: .38; } }
@media (max-width: 700px)  { .hero-art { display: none; } }

/* --- the four things the owner wants the brand to stand for --- */
.values {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 24px 0 4px;
}
.values li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 13px;
  border-radius: 100px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: .86rem; font-weight: 600; letter-spacing: .01em;
  color: var(--ink);
  transition: transform .25s cubic-bezier(.34,1.3,.64,1), box-shadow .25s, border-color .25s;
}
.values li:hover {
  transform: translateY(-2px);
  border-color: var(--tomato-200);
  box-shadow: var(--shadow);
}
.values svg { width: 19px; height: 19px; color: var(--tomato-500); flex: none; }
.values li:nth-child(2) svg { color: #2f8f5b; }
.values li:nth-child(3) svg { color: var(--turmeric-dark); }
.values li:nth-child(4) svg { color: var(--green-700); }
@media (max-width: 560px) {
  .values li { padding: 7px 13px 7px 11px; font-size: .8rem; }
  .values svg { width: 17px; height: 17px; }
}

/* The hero copy is capped so the headline, the value pills and the stats row
   all finish before the artwork begins. Left to the full wrap width, the last
   two stats sat on top of the tomatoes. */
@media (min-width: 1000px) {
  .hero-grid--solo > div { max-width: 60%; }
  .hero-stats { max-width: 100%; }
}

/* A single facility card should sit centred at a readable width rather than
   stretching across the whole grid. */
.units--single {
  display: block;
  max-width: 520px;
  margin-inline: auto;
}

/* ============================================================
   SHOP ONLINE — marketplace chooser
   Prime sells through three marketplaces, so one button cannot
   have one destination. It opens a short menu instead.
   ============================================================ */
.shopmenu { position: relative; }
.shopmenu-caret { width: 15px; height: 15px; transition: transform .22s var(--ease-out); }
.shopmenu.is-open .shopmenu-caret { transform: rotate(180deg); }

.shopmenu-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 220;
  width: 288px; padding: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
  transition: opacity .2s, transform .24s var(--ease-spring), visibility .2s;
}
.shopmenu.is-open .shopmenu-pop { opacity: 1; visibility: visible; transform: none; }

.shopmenu-head {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); padding: 8px 12px 6px;
}
.shopmenu-pop a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 11px;
  transition: background .16s;
}
.shopmenu-pop a:hover, .shopmenu-pop a:focus-visible { background: var(--cream-dark); outline: none; }
.shopmenu-pop a > svg:last-child { width: 15px; height: 15px; margin-left: auto; color: var(--muted); flex: none; }

.shopmenu-mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  font-weight: 700; font-size: 1rem; color: #fff;
}
.shopmenu-mark--fk { background: #2874f0; }
.shopmenu-mark--az { background: #232f3e; }
.shopmenu-mark--jm { background: #0a5ca8; }

.shopmenu-txt { display: flex; flex-direction: column; line-height: 1.25; }
.shopmenu-txt b { font-size: .92rem; color: var(--ink); }
.shopmenu-txt small { font-size: .74rem; color: var(--muted); }

.shopmenu-all {
  margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 11px 11px;
  font-size: .84rem; font-weight: 600; color: var(--tomato-600);
}
.shopmenu-all svg { width: 15px; height: 15px; margin-left: auto; }

@media (max-width: 560px) {
  .shop-long { display: none; }          /* "Shop" alone — "Online" won't fit */
  .nav-cta .btn { padding: 8px 12px; }
  /* logo 85 + shop 79 + switch 56 + menu 44 + gaps = 292px, which fits a
     360px Android phone (312px inside the page margins) with room to spare */
  .nav { gap: 12px; }
}

/* --- marketplace cards on the Shop page --- */
.stores {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.store {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 30px);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .3s cubic-bezier(.34,1.3,.64,1), box-shadow .3s, border-color .3s;
}
.store:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--tomato-200); }
.store-mark {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.5rem; font-weight: 700; color: #fff;
}
.store h3 { font-size: 1.22rem; }
.store p { color: var(--muted); font-size: .92rem; flex: 1; }
.store-go {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .9rem; color: var(--tomato-600);
}
.store-go svg { width: 15px; height: 15px; }

.store-direct {
  margin-top: clamp(28px, 4vw, 44px);
  background: var(--cream-dark); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 32px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.store-direct p { max-width: 46ch; color: var(--ink-soft); font-size: .95rem; }

/* --- marketplace logos ---
   Each tile holds an <img> and a letter. The img points at a logo file that
   is not in the repo; until it is dropped in, onerror removes it and the
   letter shows. Nothing to change in the markup when the real logo lands. */
.shopmenu-mark, .store-mark { position: relative; overflow: hidden; }
.shopmenu-mark img, .store-mark img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; padding: 16%;
  background: #fff;
}
.shopmenu-mark i, .store-mark i { font-style: normal; }
/* a real logo comes with its own colours, so drop the brand-coloured tile */
.shopmenu-mark:has(img), .store-mark:has(img) { background: #fff; border: 1px solid var(--line); }

/* --- "Also available on" — marketplace logos in the footer --- */
.alsoon { margin: 22px 0 18px; }
.alsoon-label {
  display: block; margin-bottom: 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.alsoon-row { display: flex; flex-wrap: wrap; gap: 10px; }
.alsoon-row a {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden;
  transition: transform .25s cubic-bezier(.34,1.3,.64,1), box-shadow .25s;
}
.alsoon-row a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.alsoon-row img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }

/* fourth marketplace tile */
.shopmenu-mark--bb { background: #84c225; }

/* --- one band, two calls to action, one background --- */
.cta-band--duo {
  display: grid; gap: clamp(30px, 4vw, 56px);
  grid-template-columns: 1fr 1fr;
  text-align: left;
  align-items: start;
}
.cta-band--duo .cta-col { position: relative; z-index: 1; }
.cta-band--duo h2 {
  color: var(--white);
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  margin-bottom: 12px;
}
.cta-band--duo p { color: rgba(255,255,255,.78); margin-inline: 0; max-width: 44ch; }
.cta-band--duo .cta-actions { justify-content: flex-start; margin-top: 24px; }
.cta-band--duo .eyebrow { margin-bottom: 12px; }

/* a divider line between the two halves on wide screens */
@media (min-width: 860px) {
  .cta-band--duo .cta-col:first-child { padding-right: clamp(28px, 3vw, 44px); border-right: 1px solid rgba(255,255,255,.16); }
}
@media (max-width: 859px) {
  .cta-band--duo { grid-template-columns: 1fr; }
  .cta-band--duo .cta-col:first-child { padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.16); }
}

/* --- scroll reveal: a little more life, still calm --- */
/* (no will-change on .reveal: on iPhone Safari, 100+ extra layers used enough
   memory to make the page reload with "A problem repeatedly occurred") */
/* headings rise a touch further than the cards under them, so a section
   assembles top-down rather than everything arriving at once */
.js .section-head.reveal { transform: translateY(30px); }
.js .section-head.reveal.is-in { transform: none; }
.js .card.reveal, .js .item.reveal, .js .pcard.reveal, .js .store.reveal, .js .job.reveal, .js .unit.reveal {
  transform: translateY(26px) scale(.985);
}
.js .card.reveal.is-in, .js .item.reveal.is-in, .js .pcard.reveal.is-in,
.js .store.reveal.is-in, .js .job.reveal.is-in, .js .unit.reveal.is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* A category whose banner already prints its own name and blurb keeps only
   the product count and the enquire link underneath. */
.cat-head--quiet {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: clamp(14px, 2vw, 22px);
}
.cat-head--quiet .eyebrow { margin-bottom: 0; }

/* ============================================================
   BACKEND-CONNECTED PARTS (live.js)
   ============================================================ */
/* hidden field that only bots fill in */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input[type=file] {
  width: 100%; padding: 11px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  background: var(--cream); font: inherit; font-size: .9rem; cursor: pointer;
}

/* careers: honest empty state, job description */
.job-none {
  text-align: center; padding: 34px 22px; color: var(--muted);
  background: var(--white); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
  max-width: 760px; margin-inline: auto;
}
.job-none b { color: var(--ink); }
.job-status { display: inline-block; vertical-align: middle; margin-left: 8px; font-family: var(--font-body, inherit); font-size: .7rem; font-weight: 700; letter-spacing: .02em; padding: 4px 10px; border-radius: 100px; }
.job-status.is-open { background: #e7f5ec; color: #1d7a3e; }
.job-status.is-closed { background: var(--cream-dark); color: var(--muted); }
[data-theme="dark"] .job-status.is-open { background: rgba(70,180,110,.16); color: #8fd8a8; }
.job--closed { opacity: .62; }
.job--closed:hover { transform: none; box-shadow: none; border-color: var(--line); }
.job-closed-note { font-size: .85rem; font-weight: 600; color: var(--muted); }
.job-desc { margin-top: 12px; font-size: .93rem; color: var(--muted); white-space: pre-line; }

/* home: approved reviews */
.review-list { margin-top: clamp(28px, 4vw, 44px); }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review-bar { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 100px; background: var(--white); }
.review-sort { border: 0; background: none; font: inherit; font-size: .9rem; font-weight: 600; color: var(--muted); padding: 8px 18px; border-radius: 100px; cursor: pointer; }
.review-sort.is-on { background: var(--tomato-500); color: #fff; }
.review-sort:focus-visible { outline: 2px solid var(--tomato-500); outline-offset: 2px; }
.review-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.review-verified { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: #1d7a3e; white-space: nowrap; }
.review-verified svg { width: 18px; height: 18px; fill: none; stroke: #22a55a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[data-theme="dark"] .review-verified { color: #e9f7ee; }
[data-theme="dark"] .review-verified svg { stroke: #4ade80; }
.review-more { display: flex; margin: 24px auto 0; }
.review-more[hidden] { display: none; }
.review-card {
  margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 22px 20px; display: grid; gap: 12px; align-content: start;
}
.review-stars { color: #e8a317; letter-spacing: 2px; font-size: 1.05rem; }
.review-card blockquote { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.review-card figcaption b { display: block; color: var(--ink); }
.review-card figcaption span { font-size: .85rem; color: var(--muted); }
@media (max-width: 900px) { .review-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .review-grid { grid-template-columns: 1fr; } }

/* gallery */
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gal-item {
  position: relative; display: block; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--cream-dark); border: 1px solid var(--line);
}
.gal-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease-out); }
.gal-item:hover img { transform: scale(1.05); }
.gal-item span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; color: #fff; font-size: .85rem; font-weight: 600;
  background: linear-gradient(to top, rgba(20,10,5,.7), transparent);
}
.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(15,8,4,.92);
  display: grid; grid-template-columns: 60px 1fr 60px; align-items: center;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 10px; padding: 20px 0; }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: 8px; }
.lightbox figcaption { color: #eee; font-size: .95rem; }
.lb-nav, .lb-close { background: none; border: 0; color: #fff; font-size: 2.6rem; cursor: pointer; line-height: 1; padding: 10px; }
.lb-close { position: absolute; top: 8px; right: 14px; }
@media (max-width: 560px) { .lightbox { grid-template-columns: 40px 1fr 40px; } .lb-nav { font-size: 2rem; } }

/* hero carousel: gentle parallax on the slider only (main.js moves it
   slower than the page; its rounded frame clips it, the category list
   beside it scrolls normally) */
.hero-shop-slider { overflow: hidden; border-radius: 18px; }
.hero-carousel .carousel--full { will-change: transform; }
@media (max-width: 980px) { .hero-shop-slider { border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { .hero-carousel .carousel--full { transform: none !important; } }

/* ============================================================
   HERO: category list beside the slider
   Desktop: list on the left, slider on the right, both the same height.
   Tablet and phone: slider first, then the categories as a row of
   swipeable chips under it.
   ============================================================ */
.hero-carousel { background: var(--cream); }
.hero-shop {
  display: grid; grid-template-columns: minmax(230px, 270px) minmax(0, 1fr); gap: 18px;
  align-items: stretch;
  padding: 16px clamp(12px, 2vw, 28px) 18px;
}
.hero-shop-slider { container-type: inline-size; min-width: 0; }
@supports (height: 1cqw) {
  .hero-shop .carousel--full {
    height: min(calc(100cqw * 919 / 1711), calc(100vh - 150px));
    height: min(calc(100cqw * 919 / 1711), calc(100svh - 150px));
  }
}
.hero-shop .carousel--full { border-radius: 18px; box-shadow: var(--shadow); }

.cat-side {
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 14px 14px; display: flex; flex-direction: column; min-height: 0;
}
.cat-side-title {
  font-family: var(--font-body, inherit); font-size: 1.02rem; font-weight: 700; color: var(--ink);
  margin: 0 6px 12px; padding-bottom: 6px; align-self: flex-start;
  border-bottom: 2px solid var(--tomato-500);
}
.cat-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; justify-content: space-between; }
.cat-side a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--cream); color: var(--ink); font-weight: 600; font-size: .92rem;
  text-decoration: none; transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.cat-side a span { flex: 1; }
.cat-side svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--tomato-600, #c2521f); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cat-side .cat-side-go { width: 16px; height: 16px; stroke: var(--muted); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.cat-side a:hover, .cat-side a:focus-visible {
  background: var(--tomato-100, #fdecea); border-color: var(--tomato-200, #f6c4bf); color: var(--tomato-700, #a3241f);
  transform: translateX(3px); outline: none;
}
.cat-side a:hover .cat-side-go, .cat-side a:focus-visible .cat-side-go { opacity: 1; transform: none; stroke: currentColor; }
[data-theme="dark"] .cat-side { background: var(--card, #2a1c17); }
[data-theme="dark"] .cat-side a { background: rgba(255,255,255,.04); }
[data-theme="dark"] .cat-side a:hover { background: rgba(228,48,47,.16); color: #ffd9d4; }

/* short laptop screens: tighter rows so the list keeps the slider's height */
@media (max-height: 760px) and (min-width: 981px) {
  .cat-side { padding: 12px 10px 10px; }
  .cat-side-title { margin-bottom: 8px; }
  .cat-side a { padding: 7px 10px; font-size: .86rem; }
  .cat-side ul { gap: 4px; }
}

@media (max-width: 980px) {
  .hero-shop { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 10px 10px 14px; }
  .hero-shop-slider { order: 1; }
  .cat-side { order: 2; padding: 12px 0 0; border: 0; background: none; }
  .cat-side-title { margin: 0 4px 10px; font-size: .95rem; }
  .cat-side ul {
    flex-direction: row; gap: 8px; overflow-x: auto; justify-content: flex-start;
    scroll-snap-type: x proximity; padding: 0 4px 6px; scrollbar-width: none;
  }
  .cat-side ul::-webkit-scrollbar { display: none; }
  .cat-side li { flex: none; scroll-snap-align: start; }
  .cat-side a { padding: 9px 14px; border-radius: 100px; background: var(--white); white-space: nowrap; font-size: .86rem; }
  .cat-side .cat-side-go { display: none; }
  .cat-side a:hover { transform: none; }
  [data-theme="dark"] .cat-side { background: none; }
  .hero-shop .carousel--full { border-radius: 14px; }
}

/* ============================================================
   MOTION: scroll and hover
   ============================================================ */
/* inner-page headers: a real factory photo, faded in from the right */
.page-hero--photo { isolation: isolate; }
.page-hero-photo {
  position: absolute; inset: -40px 0; z-index: -1; pointer-events: none;
  background-size: cover; background-position: center;
  opacity: .2; filter: saturate(.9);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 30%, #000 75%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 30%, #000 75%);
  transform: translate3d(0, var(--drift, 0px), 0) scale(1.08);
  animation: heroPhotoIn 1.6s var(--ease-out) both;
}
[data-theme="dark"] .page-hero-photo { opacity: .16; }
@keyframes heroPhotoIn { from { opacity: 0; transform: translate3d(0, 0, 0) scale(1.18); } }
@media (max-width: 700px) {
  .page-hero-photo { opacity: .13; -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.2)); mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.2)); }
}

/* photos in the split sections: wipe in when they scroll into view,
   drift on scroll, zoom softly on hover */
.split-media { overflow: hidden; }
.split-media > img { transform: translate3d(0, var(--drift, 0px), 0) scale(1.08); transition: transform .9s var(--ease-out), filter .5s; }
.split-media:hover > img { transform: translate3d(0, var(--drift, 0px), 0) scale(1.13); }
/* The wipe is on the photo inside, never on the box itself: the browser
   decides "is it on screen yet?" from the box, and a box clipped to nothing
   never counts as visible, so its photo would never appear. */
.js .split-media.reveal > img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.65,0,.25,1) .1s, transform .9s var(--ease-out), filter .5s; }
.js .split-media.reveal.is-in > img { clip-path: inset(0 0 0 0); }

/* cards: lift and tilt towards the mouse, with a soft light where it points */
.tilt { transform-style: preserve-3d; transition: transform .35s var(--ease-out), box-shadow .35s, opacity .6s ease; }
.tilt:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); box-shadow: var(--shadow-lg, 0 18px 40px rgba(60,20,10,.14)); }
.tilt { position: relative; }
.tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.35), transparent 45%);
  opacity: 0; transition: opacity .35s;
}
.tilt:hover::after { opacity: 1; }
[data-theme="dark"] .tilt::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.07), transparent 45%); }

/* product tiles: pack lifts a touch, tile glows */
.item { transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s; }
.item:hover { border-color: var(--tomato-200); }

/* gallery: photos rise in one after another, caption slides up on hover */
.gal-item { position: relative; overflow: hidden; }
.gal-item img { transition: transform .6s var(--ease-out), filter .4s; }
.gal-item:hover img { transform: scale(1.08); filter: saturate(1.1); }
.gal-item span { transition: transform .35s var(--ease-out), opacity .35s; }
@media (hover: hover) { .gal-item span { transform: translateY(100%); opacity: 0; } .gal-item:hover span, .gal-item:focus-visible span { transform: none; opacity: 1; } }

/* category list beside the slider: items slide in one by one on load */
@keyframes catIn { from { opacity: 0; transform: translateX(-14px); } }
.cat-side li { animation: catIn .55s var(--ease-out) both; }
.cat-side li:nth-child(1) { animation-delay: .05s; } .cat-side li:nth-child(2) { animation-delay: .1s; }
.cat-side li:nth-child(3) { animation-delay: .15s; } .cat-side li:nth-child(4) { animation-delay: .2s; }
.cat-side li:nth-child(5) { animation-delay: .25s; } .cat-side li:nth-child(6) { animation-delay: .3s; }
.cat-side li:nth-child(7) { animation-delay: .35s; } .cat-side li:nth-child(8) { animation-delay: .4s; }
.cat-side a:hover svg:first-child { animation: icoWiggle .5s ease; }
@keyframes icoWiggle { 30% { transform: rotate(-12deg) scale(1.12); } 60% { transform: rotate(8deg) scale(1.08); } }

/* leader photo: slow zoom on hover */
.leader-photo img { transition: transform .8s var(--ease-out); }
.leader:hover .leader-photo img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .page-hero-photo, .cat-side li { animation: none !important; }
  .split-media > img, .page-hero-photo { transform: none !important; }
  .js .split-media.reveal > img { clip-path: none !important; }
  .tilt:hover { transform: none; }
}

/* founder's photo in the Founder's Words card (initials show if it is missing) */
.quote-avatar { position: relative; overflow: hidden; }
.quote-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; border-radius: inherit; }

/* promise cards: scroll-linked "fall into line" + one flip on hover (main.js §23) */
.section--clip { overflow-x: hidden; overflow-x: clip; }
.pillars--scatter.is-scatter .pillar { transition: transform .12s linear, opacity .12s linear, box-shadow .3s, border-color .3s; will-change: transform; }
/* one slow full turn, started by the mouse passing over (main.js adds
   .is-flipping on mouseenter and removes it when the turn is done, so it
   always completes even if the mouse has already moved on) */
.pillars--scatter .pillar.is-flipping { animation: pillarFlip 3s linear both; }
/* the back face: a photo for each promise, shown while the card is turned over */
.pillar-back {
  position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  background-size: cover; background-position: 6% center; opacity: 0;
  transform: scaleX(-1);          /* the card is turned 180°, this keeps the photo readable */
}
.pillars--scatter .pillar.is-flipping .pillar-back { animation: pillarBack 3s linear both; }
.pillars--scatter .pillar.is-flipping > :not(.pillar-back) { animation: pillarFront 3s linear both; }
@keyframes pillarBack  { 0%, 17.4% { opacity: 0; } 17.5%, 82.4% { opacity: 1; } 82.5%, 100% { opacity: 0; } }
@keyframes pillarFront { 0%, 17.4% { opacity: 1; } 17.5%, 82.4% { opacity: 0; } 82.5%, 100% { opacity: 1; } }
/* turn over slowly, rest on the photo side, then turn back to the front */
@keyframes pillarFlip {
  0%   { transform: perspective(1100px) rotateY(0deg);   animation-timing-function: cubic-bezier(.45,0,.55,1); }
  35%  { transform: perspective(1100px) rotateY(180deg); animation-timing-function: linear; }
  65%  { transform: perspective(1100px) rotateY(180deg); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  100% { transform: perspective(1100px) rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) { .pillars--scatter .pillar.is-flipping { animation: none; } }

/* Founder's Words: each word flies in from off-screen, faint, and settles
   into the sentence as the quote reaches the middle of the screen (main.js §24) */
.words-fly .w { display: inline-block; white-space: pre; }
.words-fly.is-flying .w { transition: transform .1s linear, opacity .1s linear; }

/* review stars: drop in from above, one after another, slowly (live.js) */
.review-stars .st { display: inline-block; }
.review-card.stars-wait .review-stars .st { opacity: 0; transform: translateY(-140px) rotate(-30deg); }
.review-card.stars-fall .review-stars .st { animation: starFall 1.5s cubic-bezier(.25,.9,.3,1.15) both; }
.review-card.stars-fall .review-stars .st:nth-child(2) { animation-delay: .18s; }
.review-card.stars-fall .review-stars .st:nth-child(3) { animation-delay: .36s; }
.review-card.stars-fall .review-stars .st:nth-child(4) { animation-delay: .54s; }
.review-card.stars-fall .review-stars .st:nth-child(5) { animation-delay: .72s; }
@keyframes starFall {
  0%   { opacity: 0; transform: translateY(-140px) rotate(-30deg) scale(.6); }
  25%  { opacity: 1; }
  80%  { transform: translateY(4px) rotate(6deg) scale(1.15); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .review-card.stars-wait .review-stars .st { opacity: 1; transform: none; }
  .review-card.stars-fall .review-stars .st { animation: none; }
}

/* ---- Careers banner: the HR team's office as a soft, friendly backdrop ----
   Strong red only behind the words on the left; towards the right it thins
   out so the people at their desks show through. */
.career-hero {
  background-image:
    linear-gradient(100deg, rgba(120,20,14,.93) 0%, rgba(160,26,22,.82) 32%, rgba(194,33,31,.45) 62%, rgba(240,114,42,.18) 100%),
    url("../images/career-bg.jpg");
  background-size: cover, cover;
  background-position: center, 70% 35%;
  background-repeat: no-repeat, no-repeat;
}
@media (max-width: 700px) {
  .career-hero {
    background-image:
      linear-gradient(180deg, rgba(120,20,14,.90), rgba(194,33,31,.72) 70%, rgba(240,114,42,.55)),
      url("../images/career-bg.jpg");
    background-position: center, 72% center;
  }
}
/* headline on one line on desktop */
@media (min-width: 1000px) {
  .career-hero h1 { max-width: none; white-space: nowrap; font-size: clamp(2.6rem, 4.3vw, 4.3rem); }
}

/* ---- Contact map: toned to the site's warm cream, whole map is a link ---- */
.map-embed--brand { position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.map-embed--brand iframe {
  pointer-events: none;
  filter: grayscale(1) sepia(.45) saturate(1.35) hue-rotate(-12deg) brightness(1.04) contrast(.92);
  transform: scale(1.02); transition: transform 1.2s var(--ease-out), filter .6s;
}
.map-embed--brand:hover iframe { transform: scale(1.06); filter: grayscale(.4) sepia(.3) saturate(1.2) hue-rotate(-8deg) brightness(1.03); }
[data-theme="dark"] .map-embed--brand iframe { filter: invert(.92) hue-rotate(180deg) sepia(.35) saturate(1.2) brightness(.95); }
.map-cover {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  padding: clamp(14px, 2.4vw, 26px); text-decoration: none; color: inherit;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(120,40,20,.18));
}
.map-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}
.map-card img { width: 52px; height: auto; }
.map-card b { display: block; color: var(--ink); font-size: .95rem; }
.map-card small { color: var(--muted); font-size: .8rem; }
.map-open {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 100px;
  background: var(--tomato-500); color: #fff; font-weight: 700; font-size: .9rem; box-shadow: var(--shadow-tomato, var(--shadow));
  transition: transform .25s var(--ease-out), background .25s;
}
.map-open svg { width: 16px; height: 16px; }
.map-cover:hover .map-open, .map-cover:focus-visible .map-open { transform: translateY(-2px); background: var(--tomato-600); }
.map-cover:focus-visible { outline: 3px solid var(--tomato-500); outline-offset: -3px; }
[data-theme="dark"] .map-card { background: rgba(40,26,20,.92); }
@media (max-width: 620px) {
  .map-embed--brand { aspect-ratio: 4 / 3.4 !important; }
  .map-cover { flex-direction: column; align-items: stretch; }
  .map-open { justify-content: center; }
}

/* ---- cursor trail: the letters of PRIME AGRO follow the mouse (main.js §25) ---- */
.ctrail { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9999; }
.ctrail span {
  position: fixed; left: 0; top: 0; pointer-events: none;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 1;
  color: var(--tomato-500); text-shadow: 0 1px 0 #fff, 0 2px 8px rgba(194,33,31,.25);
  will-change: transform, opacity; opacity: 0; transition: opacity .35s;
}
.ctrail span.g { color: #e0a020; }
.ctrail.on span { opacity: 1; }
.ctrail.on.hush span { opacity: .22; transition: opacity .18s; }
[data-theme="dark"] .ctrail span { text-shadow: 0 2px 10px rgba(0,0,0,.6); }

/* ============================================================
   ABOUT: founder's story timeline, sourcing map, founder photo
   ============================================================ */
.story-quote {
  margin: 18px 0; padding: 14px 18px; border-left: 3px solid var(--tomato-500);
  background: var(--tomato-50, #fff4f2); border-radius: 0 12px 12px 0;
  font-family: var(--font-display); font-size: 1.08rem; color: var(--ink); line-height: 1.55;
}
.story-line { list-style: none; margin: clamp(28px, 4vw, 44px) auto 0; padding: 0; max-width: 1000px; position: relative; }
.story-line::before {
  content: ""; position: absolute; top: 6px; bottom: 6px; left: 50%; width: 2px; transform: translateX(-1px);
  background: linear-gradient(var(--tomato-500), var(--turmeric));
}
.story-line li {
  position: relative; width: calc(50% - 34px); margin-bottom: 26px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
.story-line li:nth-child(odd)  { margin-right: auto; }
.story-line li:nth-child(even) { margin-left: auto; }
.story-line li::after {
  content: ""; position: absolute; top: 24px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--white); border: 4px solid var(--tomato-500); box-shadow: 0 0 0 5px var(--cream);
}
.story-line li:nth-child(odd)::after  { right: -43px; }
.story-line li:nth-child(even)::after { left: -43px; }
.story-line li:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--tomato-200); }
.story-line .yr {
  display: inline-block; font-weight: 800; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--tomato-500); padding: 4px 11px; border-radius: 100px; margin-bottom: 10px;
}
.story-line h4 { font-size: 1.12rem; margin-bottom: 6px; }
.story-line p { color: var(--muted); font-size: .94rem; line-height: 1.65; }
.js .story-line li.reveal:nth-child(odd)  { transform: translateX(-40px); }
.js .story-line li.reveal:nth-child(even) { transform: translateX(40px); }
.js .story-line li.reveal.is-in { transform: none; }
.js .story-line li.reveal.is-in:hover { transform: translateY(-4px); }
@media (max-width: 760px) {
  .story-line::before { left: 9px; }
  .story-line li, .story-line li:nth-child(even) { width: auto; margin-left: 34px; margin-right: 0; }
  .story-line li:nth-child(odd)::after, .story-line li:nth-child(even)::after { left: -33px; right: auto; }
  .js .story-line li.reveal:nth-child(odd), .js .story-line li.reveal:nth-child(even) { transform: translateY(22px); }
}
.source-map {
  margin: clamp(34px, 5vw, 56px) auto 0; max-width: 1000px; text-align: center;
  background: var(--cream-dark); border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: clamp(22px, 3.4vw, 38px);
}
.source-map h3 { font-size: 1.3rem; }
.source-map > p { color: var(--muted); margin-top: 6px; }
.source-map ul { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.source-map li {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; text-align: left;
  min-width: 190px; transition: transform .25s var(--ease-out), border-color .25s;
}
.source-map li:hover { transform: translateY(-3px); border-color: var(--turmeric); }
.source-map li b { display: block; color: var(--ink); font-size: .95rem; }
.source-map li span { color: var(--muted); font-size: .84rem; }

/* founder photo: zooms into focus with a turning ring when it scrolls into view */
.leader-photo-wrap { position: relative; width: 200px; aspect-ratio: 1; display: grid; place-items: center; }
.leader-photo-wrap .leader-photo { width: 100%; }
.leader-ring {
  position: absolute; inset: -12px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, var(--tomato-500), var(--turmeric), transparent 40%, var(--tomato-500) 70%, var(--turmeric));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  opacity: 0; transform: rotate(-120deg) scale(.85);
  transition: opacity .8s ease .3s, transform 1.4s cubic-bezier(.2,.8,.2,1) .3s;
}
.leader.is-in .leader-ring { opacity: 1; transform: none; animation: ringSpin 9s linear 1.8s infinite; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
.js .leader.reveal .leader-photo img { transform: scale(1.35); filter: blur(6px) saturate(.6); opacity: 0; transition: transform 1.3s cubic-bezier(.2,.8,.2,1), filter 1s, opacity .8s; }
.js .leader.reveal.is-in .leader-photo img { transform: none; filter: none; opacity: 1; }
.leader:hover .leader-photo img { transform: scale(1.06) !important; }
@media (max-width: 640px) { .leader-photo-wrap { width: 160px; } }

/* Founder's Words avatar: pops in with a ring pulse */
.js .quote.reveal .quote-avatar { transform: scale(.4) rotate(-20deg); opacity: 0; transition: transform .9s cubic-bezier(.34,1.5,.64,1) .3s, opacity .5s .3s; }
.js .quote.reveal.is-in .quote-avatar { transform: none; opacity: 1; animation: avatarPulse 2.4s ease-out 1.2s 2; }
@keyframes avatarPulse { 0% { box-shadow: 0 0 0 0 rgba(228,48,47,.45); } 100% { box-shadow: 0 0 0 16px rgba(228,48,47,0); } }

@media (prefers-reduced-motion: reduce) {
  .leader-ring { opacity: 1; transform: none; animation: none !important; }
  .js .leader.reveal .leader-photo img, .js .quote.reveal .quote-avatar { transform: none; filter: none; opacity: 1; }
  .js .story-line li.reveal { transform: none !important; }
}

/* cursor: a little Prime ketchup bottle rides on the pointer */
.ctrail .bottle {
  position: fixed; left: 0; top: 0; width: 22px; height: auto; pointer-events: none;
  opacity: 0; transition: opacity .3s; filter: drop-shadow(0 3px 4px rgba(90,20,10,.3));
  transform-origin: 50% 50%;
}
.ctrail.on .bottle { opacity: 1; }
.ctrail.on.hush .bottle { opacity: .55; }

/* Products page: clear breathing room between one category's products and the next banner */
.cat-block + .cat-block { margin-top: clamp(48px, 6vw, 84px); }

/* ============================================================
   SITE SEARCH (main.js §26)
   ============================================================ */
.search-btn {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.search-btn svg { width: 19px; height: 19px; }
.search-btn:hover { background: var(--tomato-500); color: #fff; border-color: var(--tomato-500); transform: scale(1.06); }
html.sbox-open { overflow: hidden; }
.sbox {
  position: fixed; inset: 0; z-index: 10000; background: rgba(40,15,8,.45); backdrop-filter: blur(4px);
  display: flex; justify-content: center; align-items: flex-start; padding: clamp(14px, 9vh, 110px) 14px 14px;
  animation: sboxIn .2s ease;
}
.sbox[hidden] { display: none; }
@keyframes sboxIn { from { opacity: 0; } }
.sbox-panel {
  width: min(680px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column;
  background: var(--white); border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.3); overflow: hidden;
  animation: sboxDrop .28s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes sboxDrop { from { transform: translateY(-18px) scale(.98); opacity: 0; } }
.sbox-field { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.sbox-field > svg { width: 22px; height: 22px; color: var(--tomato-500); flex: none; }
.sbox-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 1.08rem; color: var(--ink); }
.sbox-x { border: 1px solid var(--line); background: var(--cream); color: var(--muted); border-radius: 8px; padding: 4px 9px; font: inherit; font-size: .78rem; cursor: pointer; }
.sbox-hints { padding: 12px 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: .86rem; }
.sbox.has-q .sbox-hints { display: none; }
.sbox-hints button { border: 1px solid var(--line); background: var(--cream); color: var(--ink); border-radius: 100px; padding: 5px 12px; font: inherit; font-size: .84rem; cursor: pointer; }
.sbox-hints button:hover { border-color: var(--tomato-500); color: var(--tomato-600); }
.sbox-res { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.sbox-res a { display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.sbox-res li.on a, .sbox-res a:hover { background: var(--tomato-50, #fff1ef); }
.sbox-res img, .sbox-ico { width: 46px; height: 46px; flex: none; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.sbox-ico { display: grid; place-items: center; color: var(--tomato-500); font-weight: 700; }
.sbox-res b { display: block; font-size: .98rem; }
.sbox-res small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.sbox-res mark { background: #ffe58a; color: inherit; border-radius: 3px; padding: 0 1px; }
.sbox-none { padding: 22px 14px; color: var(--muted); text-align: center; }
[data-theme="dark"] .sbox-panel, [data-theme="dark"] .search-btn { background: var(--card, #2a1c17); }
@media (max-width: 620px) { .search-btn { width: 38px; height: 38px; } }

/* cursor idle: the bottle tips over and pours ketchup drops that fall,
   the letters float away as bubbles, then everything grows back */
.ctrail .bottle { width: 22px; }
.ctrail.falling .bottle { opacity: 1; transition: none; }
.ctrail .kdrop {
  position: fixed; left: 0; top: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 35% 30%, #ff8a7a, #e4302f 45%, #9e1618);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: 0 2px 5px rgba(158,22,24,.35);
  transform-origin: 50% 0;
}
.ctrail .kdrop.splat { border-radius: 50%; transform-origin: 50% 100%; }
.ctrail.falling span:not(.drop) {
  display: grid; place-items: center; width: 24px; height: 24px; margin: -5px 0 0 -6px;
  border-radius: 50%; border: 1px solid rgba(228,48,47,.35); transition: none;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,.35) 40%, rgba(253,226,224,.25) 70%);
  box-shadow: inset -2px -3px 6px rgba(228,48,47,.12), 0 2px 6px rgba(0,0,0,.06);
}
.ctrail.falling span.g:not(.drop) { border-color: rgba(224,160,32,.45); }
.ctrail.gone span, .ctrail.gone .bottle { opacity: 0 !important; }
.ctrail.reform span:not(.drop), .ctrail.reform .bottle { animation: trailBack .8s cubic-bezier(.3,1.4,.5,1) both; }
.ctrail.reform span:nth-child(3) { animation-delay: .05s; } .ctrail.reform span:nth-child(4) { animation-delay: .1s; }
.ctrail.reform span:nth-child(5) { animation-delay: .15s; } .ctrail.reform span:nth-child(6) { animation-delay: .2s; }
.ctrail.reform span:nth-child(7) { animation-delay: .25s; } .ctrail.reform span:nth-child(8) { animation-delay: .3s; }
.ctrail.reform span:nth-child(9) { animation-delay: .35s; } .ctrail.reform span:nth-child(10) { animation-delay: .4s; }
@keyframes trailBack { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: none; } }

/* lighter on phones and Safari: no big blur layers behind the slider */
@media (max-width: 900px) {
  .carousel--full .carousel-slide > img.slide-fill { filter: none !important; opacity: .25; }
  .hero-carousel .carousel--full { will-change: auto; }
}

/* mobile menu open: stop the page behind it from scrolling (see main.js §2) */
html.nav-locked { overflow: hidden; }

/* ---- mobile menu: ☰ turns into ✕, and the links slide in one by one ---- */
.nav-toggle { position: relative; transition: background .25s, border-color .25s, transform .2s; }
.nav-toggle:active { transform: scale(.92); }
.nt-bars { position: relative; width: 22px; height: 16px; display: block; }
.nt-bars i {
  position: absolute; left: 0; width: 100%; height: 2.2px; border-radius: 2px; background: currentColor;
  transition: transform .35s cubic-bezier(.65,0,.35,1), opacity .2s, top .35s cubic-bezier(.65,0,.35,1), width .3s;
}
.nt-bars i:nth-child(1) { top: 0; }
.nt-bars i:nth-child(2) { top: 7px; width: 70%; left: auto; right: 0; }
.nt-bars i:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] { background: var(--tomato-500); border-color: var(--tomato-500); color: #fff; }
.nav-toggle[aria-expanded="true"] .nt-bars i:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nt-bars i:nth-child(2) { opacity: 0; transform: translateX(10px); }
.nav-toggle[aria-expanded="true"] .nt-bars i:nth-child(3) { top: 7px; transform: rotate(-45deg); }

@media (max-width: 920px) {
  .nav-links { transform-origin: top center; transform: translateY(-10px) scaleY(.96); transition: opacity .28s ease, transform .35s cubic-bezier(.2,.9,.3,1.1); }
  .nav-links.is-open { transform: none; }
  .nav-links > li { opacity: 0; transform: translateX(-18px); transition: opacity .3s ease, transform .4s cubic-bezier(.2,.9,.3,1.2); }
  .nav-links.is-open > li { opacity: 1; transform: none; }
  .nav-links.is-open > li:nth-child(1) { transition-delay: .05s; } .nav-links.is-open > li:nth-child(2) { transition-delay: .1s; }
  .nav-links.is-open > li:nth-child(3) { transition-delay: .15s; } .nav-links.is-open > li:nth-child(4) { transition-delay: .2s; }
  .nav-links.is-open > li:nth-child(5) { transition-delay: .25s; } .nav-links.is-open > li:nth-child(6) { transition-delay: .3s; }
  .nav-links.is-open > li:nth-child(7) { transition-delay: .35s; }
}
@media (prefers-reduced-motion: reduce) {
  .nt-bars i, .nav-links, .nav-links > li { transition: none !important; }
}

/* ============================================================
   CATEGORY LIST AS FLOATING BALLOONS (main.js §27)
   Each category is a glossy, see-through balloon. They bob gently,
   lean away from the mouse and drift weightless when you scroll —
   but only a few pixels, inside the box, so the order never changes.
   ============================================================ */
.cat-side { overflow: hidden; position: relative; }
.cat-side li { position: relative; }
.cat-side a.balloon {
  position: relative; border-radius: 999px; padding: 10px 16px 10px 14px; overflow: hidden;
  border: 1px solid rgba(228,48,47,.22);
  background:
    radial-gradient(120% 140% at 18% 8%, rgba(255,255,255,.95) 0 14%, rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(255,246,243,.95), rgba(253,226,224,.75));
  box-shadow: inset 0 -6px 12px rgba(228,48,47,.10), inset 0 2px 3px rgba(255,255,255,.9), 0 6px 14px rgba(150,40,20,.10);
  transform: translate3d(var(--bx, 0px), var(--by, 0px), 0) rotate(var(--br, 0deg)) skewX(var(--bk, 0deg)) scale(var(--bsx, 1), var(--bsy, 1));
  transition: background .25s, border-color .25s, color .25s, box-shadow .25s;
}
.cat-side li:nth-child(even) a.balloon {
  border-color: rgba(224,160,32,.30);
  background:
    radial-gradient(120% 140% at 18% 8%, rgba(255,255,255,.95) 0 14%, rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(255,250,236,.95), rgba(253,236,196,.75));
  box-shadow: inset 0 -6px 12px rgba(224,160,32,.12), inset 0 2px 3px rgba(255,255,255,.9), 0 6px 14px rgba(150,100,20,.10);
}
/* the shiny streak every balloon has */
.cat-side a.balloon::before {
  content: ""; position: absolute; left: 14%; top: 4px; width: 38%; height: 5px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9), rgba(255,255,255,0));
  pointer-events: none;
}
.cat-side li:nth-child(n) a.balloon:hover, .cat-side li:nth-child(n) a.balloon:focus-visible {
  background:
    radial-gradient(120% 140% at 18% 8%, rgba(255,255,255,.9) 0 12%, rgba(255,255,255,0) 36%),
    linear-gradient(180deg, #ff6b5c, #e4302f);
  color: #fff; border-color: #c2211f;
  transform: translate3d(var(--bx, 0px), calc(var(--by, 0px) - 2px), 0) rotate(var(--br, 0deg)) skewX(var(--bk, 0deg)) scale(calc(var(--bsx, 1) * 1.03), calc(var(--bsy, 1) * 1.03));
}
.cat-side li:nth-child(n) a.balloon:hover svg, .cat-side li:nth-child(n) a.balloon:focus-visible svg { stroke: #fff; }
/* dark mode: both balloon colours turn dark-glass with light text (the yellow
   ones used to keep their light background, so their light text vanished) */
[data-theme="dark"] .cat-side li:nth-child(n) a.balloon {
  color: #f5ebe4; border-color: rgba(255,120,100,.30);
  background:
    radial-gradient(120% 140% at 18% 8%, rgba(255,255,255,.18) 0 12%, rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(120,30,22,.55), rgba(60,18,14,.75));
  box-shadow: inset 0 -6px 12px rgba(0,0,0,.25), inset 0 1px 2px rgba(255,255,255,.12), 0 6px 14px rgba(0,0,0,.3);
}
[data-theme="dark"] .cat-side li:nth-child(even) a.balloon {
  border-color: rgba(240,180,60,.30);
  background:
    radial-gradient(120% 140% at 18% 8%, rgba(255,255,255,.18) 0 12%, rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(120,85,20,.55), rgba(60,42,12,.75));
}
[data-theme="dark"] .cat-side li:nth-child(n) a.balloon:hover,
[data-theme="dark"] .cat-side li:nth-child(n) a.balloon:focus-visible {
  color: #fff; border-color: #ff6b5c;
  background:
    radial-gradient(120% 140% at 18% 8%, rgba(255,255,255,.5) 0 12%, rgba(255,255,255,0) 36%),
    linear-gradient(180deg, #ff6b5c, #c2211f);
}

/* balloons: one line each, a little side room so none touch the box edge */
.cat-side ul { padding-inline: 5px; }
.cat-side a.balloon { padding: 9px 14px 9px 12px; gap: 10px; font-size: .9rem; }
.cat-side a.balloon span { white-space: nowrap; }
.cat-side a.balloon .cat-side-go { display: none; }

/* desktop: the balloons fill the box from top to bottom with an even, fixed
   small gap — taller screens make taller balloons, never bigger gaps */
@media (min-width: 981px) {
  .cat-side ul { justify-content: flex-start; gap: 8px; }
  .cat-side li { flex: 1 1 0; min-height: 0; display: flex; }
  .cat-side li > a.balloon { flex: 1; min-height: 36px; padding-block: 0; font-size: clamp(.86rem, 1.1vw, 1rem); }
}

/* ---- cursor logo (main.js §25): strips of the Prime logo that ripple ---- */
.clogo { position: fixed; left: 0; top: 0; width: 92px; height: 43px; z-index: 9999; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 4px 6px rgba(90,20,10,.28)); will-change: transform, opacity; }
.clogo i { position: absolute; top: 0; height: 43px; display: block;
  background-image: url("../images/cursor/logo.png"); background-size: 92px 43px; background-repeat: no-repeat;
  transform-origin: 50% 50%; }

/* ---- category balloon burst on click (main.js §27) ---- */
.cat-side li:nth-child(n) a.balloon.is-popping { animation: balloonPop .26s cubic-bezier(.3,0,.6,1) forwards; pointer-events: none; }
@keyframes balloonPop {
  0%   { transform: translate3d(var(--bx,0px), var(--by,0px), 0) scale(1); opacity: 1; }
  45%  { transform: translate3d(var(--bx,0px), var(--by,0px), 0) scale(1.14, 1.22); opacity: 1; }
  100% { transform: translate3d(var(--bx,0px), var(--by,0px), 0) scale(.2, .1); opacity: 0; }
}
.pop-fx { position: fixed; z-index: 10001; width: 0; height: 0; pointer-events: none; }
.pop-fx i {
  position: absolute; left: 0; top: 0; border-radius: 3px 8px 3px 8px; opacity: 1;
  animation: popShard .75s cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes popShard {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 30px)) rotate(var(--rot)) scale(.5); opacity: 0; }
}
.pop-ring {
  position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid #e4302f; transform: translate(-50%, -50%) scale(.3); opacity: .9;
  animation: popRing .45s ease-out forwards;
}
@keyframes popRing { to { transform: translate(-50%, -50%) scale(9); opacity: 0; border-width: 1px; } }

/* waiting for the published banners: soft shimmer instead of an old poster */
html.live-wait .hero-carousel .carousel-track { visibility: hidden; }
html.live-wait .hero-carousel .carousel--full {
  background: linear-gradient(100deg, var(--cream-dark) 30%, #fff6ee 50%, var(--cream-dark) 70%);
  background-size: 300% 100%; animation: liveShimmer 1.2s linear infinite;
}
@keyframes liveShimmer { to { background-position: -150% 0; } }

/* over a category balloon the pointer becomes a pin, ready to pop it */
@media (hover: hover) and (pointer: fine) {
  .cat-side a.balloon, .cat-side a.balloon * { cursor: url("../images/cursor/pin.svg") 2 30, pointer; }
}
/* the balloon wobbles nervously when the pin comes near */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cat-side li:nth-child(n) a.balloon:hover:not(.is-popping) { animation: balloonNervous .5s ease-in-out infinite; }
}
@keyframes balloonNervous {
  0%, 100% { transform: translate3d(var(--bx,0px), calc(var(--by,0px) - 2px), 0) scale(1.03); }
  50%      { transform: translate3d(var(--bx,0px), calc(var(--by,0px) - 2px), 0) scale(1.05, 1.0) rotate(.6deg); }
}

.pop-word {
  position: absolute; left: 0; top: 0; font-family: var(--font-display); font-style: normal; font-weight: 900;
  font-size: 26px; letter-spacing: .02em; -webkit-text-stroke: 1.5px #fff; paint-order: stroke;
  text-shadow: 0 3px 0 rgba(0,0,0,.15); white-space: nowrap;
  transform: translate(-50%, -50%) scale(.2) rotate(-12deg); opacity: 0;
  animation: popWord .7s cubic-bezier(.2,1.6,.4,1) forwards;
}
@keyframes popWord {
  0%   { transform: translate(-50%, -50%) scale(.2) rotate(-12deg); opacity: 0; }
  30%  { transform: translate(-50%, -80%) scale(1.25) rotate(-6deg); opacity: 1; }
  70%  { transform: translate(-50%, -95%) scale(1) rotate(-6deg); opacity: 1; }
  100% { transform: translate(-50%, -120%) scale(.9) rotate(-6deg); opacity: 0; }
}
/* the little knot that falls after the balloon is gone */
.pop-knot {
  position: absolute; top: 0; width: 8px; height: 10px; border-radius: 50% 50% 40% 40%;
  animation: popKnot .8s cubic-bezier(.4,0,.8,.6) forwards;
}
@keyframes popKnot { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(70px) rotate(220deg); opacity: 0; } }