/* ===== FONTS: Karla served from our own server (variable font, one file covers weights 400-800) and preloaded
   in <head>, so the headline paints in Karla straight away instead of waiting on Google Fonts ===== */
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/karla-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/karla-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Karla'; font-style: italic; font-weight: 400 800; font-display: swap;
  src: url("../fonts/karla-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Karla'; font-style: italic; font-weight: 400 800; font-display: swap;
  src: url("../fonts/karla-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ===== TOKENS ===== */
:root {
  --green-900: #0b2e18;
  --green-800: #0f3d20;
  --green-700: #145228;
  --green-600: #1b6b33;
  --green-500: #23823f;
  --green-100: #e6efdd;
  --green-50:  #f0f4e8;
  --gold:      #c9a24a;
  --gold-light:#e8cf8a;
  --cream:     #faf7ef;
  --beige:     #f3eee1;
  --white:     #ffffff;
  --ink:       #1c2a20;
  --ink-2:     #56635a;
  --ink-3:     #8a958d;
  --line:      rgba(15, 61, 32, 0.12);
  --whatsapp:  #25d366;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --shadow-sm: 0 2px 10px rgba(11, 46, 24, 0.07);
  --shadow:    0 12px 34px rgba(11, 46, 24, 0.12);
  --shadow-lg: 0 24px 60px rgba(11, 46, 24, 0.2);

  --font-display: 'Karla', system-ui, sans-serif;
  --font-body:    'Karla', system-ui, sans-serif;
  --nav-h: 100px;
  /* side gutter grows with the screen: 16px on phones up to 90px on large desktops */
  --gutter: clamp(16px, 4.7vw, 90px);
}

/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); }
body {
  font-family: var(--font-body); font-size: 16px; line-height: 1.7;
  color: var(--ink); background: var(--cream); overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.container { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 72px 0; position: relative; overflow: hidden; }

/* ===== TYPE ===== */
.tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.tag::before { content: ""; width: 26px; height: 1.5px; background: var(--gold); }
.tag.center { display: flex; justify-content: center; }
.tag.center::after { content: ""; width: 26px; height: 1.5px; background: var(--gold); }
.tag.light { color: var(--gold-light); }
.tag.light::before { background: var(--gold-light); }

.title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 3.2vw, 2.55rem); line-height: 1.18;
  color: var(--green-900); margin-bottom: 18px;
}
.title.center { text-align: center; margin-bottom: 44px; }
.title.light { color: var(--white); }
.title.sm { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 22px; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 24px; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 600; font-size: 0.88rem; line-height: 1.2; white-space: nowrap;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-lg { padding: 14px 30px; font-size: 0.92rem; }
.btn-sm { padding: 8px 18px; font-size: 0.82rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--green-700); color: var(--white); box-shadow: 0 8px 20px rgba(20, 82, 40, .28); }
.btn-primary:hover { background: var(--green-900); }
.btn-outline { border-color: var(--green-900); color: var(--green-900); background: rgba(255, 255, 255, .55); }
.btn-outline:hover { background: var(--green-900); color: var(--white); }
.btn-outline-sm {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 999px;
  border: 1.5px solid var(--green-700); color: var(--green-700); font-weight: 600; font-size: 0.84rem;
  background: var(--white); transition: background .25s, color .25s;
}
.btn-outline-sm:hover { background: var(--green-700); color: var(--white); }
.btn-light { background: var(--white); color: var(--green-900); }
.btn-light:hover { background: var(--gold-light); }
.btn-whatsapp { background: var(--whatsapp); color: var(--white); }
.btn-whatsapp:hover { background: #1fbd59; }
.btn[disabled] { opacity: .7; cursor: wait; transform: none; }

/* ===== TOP BAR ===== */
.topbar { background: var(--green-900); color: rgba(255, 255, 255, .85); font-size: .78rem; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 36px; }
.topbar-left, .topbar-right { display: flex; gap: 26px; align-items: center; }
.topbar i { color: var(--gold); margin-right: 6px; }
.topbar a:hover { color: var(--gold-light); }
.topbar a, .topbar span { white-space: nowrap; }
.lang i.fa-chevron-down { font-size: .6rem; margin: 0 0 0 4px; color: inherit; }

/* ===== NAVBAR ===== */
.navbar {
  position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: box-shadow .3s ease;
}
.navbar.scrolled { box-shadow: var(--shadow-sm); }
.nav-inner { display: flex; align-items: center; gap: 28px; height: var(--nav-h); }
.brand-logo { height: 66px; width: auto; }
/* new Lakshmi logo: emblem + wordmark side by side (both cut from the client's SVG) */
.brand { display: flex; align-items: center; gap: 8px; flex: none; }
.brand-emblem { height: 66px; width: auto; }
.brand-word { height: 34px; width: auto; }
/* nav tagline under the wordmark, spaced out to the wordmark's width */
.brand-text { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.brand-tag { display: flex; justify-content: space-between; font-size: 7.5px; font-weight: 600; letter-spacing: .06em; line-height: 1; text-transform: uppercase; color: var(--green-900); white-space: nowrap; }
.brand-tag i { font-style: normal; color: var(--gold); }
/* footer: full stacked logo on a cream badge so its dark green reads on the dark footer */
.footer-badge { display: inline-block; background: var(--cream); border-radius: 18px; padding: 14px 18px; margin-bottom: 20px; box-shadow: inset 0 0 0 2px rgba(201, 162, 74, .55); }
.footer-badge .footer-logo { height: 120px; margin: 0; display: block; }
/* navbar: the same stacked logo on the same cream badge as the footer, sized to the bar */
.brand-badge { display: block; background: var(--cream); border-radius: 14px; padding: 3px 10px; box-shadow: inset 0 0 0 2px rgba(201, 162, 74, .55); }
.brand-full { display: block; height: 86px; width: auto; }
/* nav takes the space between logo and CTA and centres its links in it */
nav { flex: 1; display: flex; justify-content: center; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a:not(.btn) {
  position: relative; display: block; padding: 8px 13px;
  font-size: .88rem; font-weight: 500; color: var(--ink); transition: color .2s;
}
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 2px;
  background: var(--green-600); transform: scaleX(0); transition: transform .25s;
}
.nav-links a:not(.btn):hover, .nav-links a.active { color: var(--green-600); }
.nav-links a.active::after, .nav-links a:not(.btn):hover::after { transform: scaleX(1); }
.nav-cta-mobile { display: none; }
.hamburger { display: none; width: 44px; height: 44px; position: relative; border-radius: 10px; }
.hamburger span { position: absolute; left: 11px; width: 22px; height: 2px; background: var(--green-900); border-radius: 2px; transition: transform .3s, opacity .3s, top .3s; }
.hamburger span:nth-child(1) { top: 15px; }
.hamburger span:nth-child(2) { top: 21px; }
.hamburger span:nth-child(3) { top: 27px; }
.hamburger.active span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ===== HERO ===== */
.hero { position: relative; overflow: hidden; min-height: 560px; display: flex; align-items: center; background: var(--cream); }
/* Each slide photo (assets/images/hero/) has open sky / light space on the left.
   The cream stays solid under the whole text column (gutter + ~600px) and only
   fades out after it, so the busy photo never sits behind the copy at any width. */
.hero-bg {
  --img: url("../images/site/hero-farmer.webp");
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(250, 247, 239, .86) 0,
      rgba(250, 247, 239, .8) calc(var(--gutter) + 600px),
      rgba(250, 247, 239, .5) calc(var(--gutter) + 700px),
      rgba(250, 247, 239, 0) calc(var(--gutter) + 820px)),
    var(--img) right center / cover no-repeat;
}

/* ----- hero slider: crossfading photo layers + one text block per slide ----- */
.hero-bg--1 { --img: url("../images/hero/hero-1-grow.webp"); }
/* slides 2-5 download after the page has loaded (script.js adds .is-ready) */
.hero-slider.is-ready .hero-bg--2 { --img: url("../images/hero/hero-2-harvest.webp"); }
.hero-slider.is-ready .hero-bg--3 { --img: url("../images/hero/hero-3-sort.webp"); }
.hero-slider.is-ready .hero-bg--4 { --img: url("../images/hero/hero-4-pack.webp"); }
.hero-slider.is-ready .hero-bg--5 { --img: url("../images/hero/hero-5-ship.webp"); }
.hero-slider:not(.is-ready) .hero-bg:not(.hero-bg--1) { --img: none; }
/* z-index 0 keeps the photo layers (which stack among themselves) below the text */
.hero-layers { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* curtain wipe: the new photo opens left → right over the previous one, a gold line riding its edge */
.hero-slider .hero-bg { visibility: hidden; pointer-events: none; }
.hero-slider .hero-bg.is-prev { visibility: visible; z-index: 1; }
.hero-slider .hero-bg.is-active {
  visibility: visible; z-index: 2; pointer-events: auto;
  animation: hero-curtain .9s cubic-bezier(.77, 0, .18, 1) both, hero-zoom 5s ease-out both;
}
.hero-slider .hero-bg::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--gold) 20%, #f2d88f 50%, var(--gold) 80%, transparent);
  box-shadow: 0 0 18px 4px rgba(242, 216, 143, .55);
}
.hero-slider .hero-bg.is-active::after { animation: hero-curtain-line .9s cubic-bezier(.77, 0, .18, 1) both; }
@keyframes hero-curtain { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hero-curtain-line {
  0% { left: 0; opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% - 4px); opacity: 0; }
}
@keyframes hero-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }

/* all slides share one grid cell, so the hero keeps the height of the tallest one */
.hero-stage { display: grid; }
/* bottom-aligned, so the buttons always sit just above the features bar whatever the title length */
.hero-slide { grid-area: 1 / 1; align-self: end; visibility: hidden; }
.hero-slide.is-active { visibility: visible; }
.hero-slide > * { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .7s cubic-bezier(.22, .61, .36, 1); }
.hero-slide.is-active > * { opacity: 1; transform: none; }
.hero-slide.is-active > :nth-child(2) { transition-delay: .12s; }
.hero-slide.is-active > :nth-child(3) { transition-delay: .26s; }
.hero-slide.is-active > :nth-child(4) { transition-delay: .4s; }
.hero-slide > .hero-title.is-split { opacity: 1; transform: none; transition: none; }
.hl { display: block; overflow: hidden; padding: 0 .12em .12em 0; margin-bottom: -.12em; }
.hl-in { display: block; transform: translateY(110%); }
.hero-slide.is-active .hl-in { transform: none; transition: transform .75s cubic-bezier(.22, .61, .36, 1) .25s; }
.hero-slide.is-active .hl:nth-child(2) .hl-in { transition-delay: .37s; }
.hero-slide.is-active .hl:nth-child(3) .hl-in { transition-delay: .49s; }
.hero-slide .hero-title em {
  display: inline-block; padding-bottom: .04em;
  background: linear-gradient(90deg, var(--gold), #e8c66e) left 94% / 0 3px no-repeat;
}
.hero-slide.is-active .hero-title em { background-size: 100% 3px; transition: background-size .6s ease .95s; }
/* before JavaScript runs (or without it) the first slide simply shows */
html:not(.js) .hero-slide:first-child > * { opacity: 1; transform: none; }
/* first load: slide 1 paints at full opacity with no wipe (the logo intro covers it anyway). Content that starts
   at opacity 0 or clipped to nothing is never counted as Google's LCP, so PageSpeed reports NO_LCP.
   script.js adds .has-moved on the first slide change, so later visits to slide 1 animate as usual. */
.hero-slider:not(.has-moved) .hero-slide:first-child > *,
.hero-slider:not(.has-moved) .hero-slide:first-child .hero-title em { opacity: 1; transform: none; transition: none; }
.hero-slider:not(.has-moved) .hero-slide:first-child .hero-title em { background-size: 100% 3px; }
.hero-slider:not(.has-moved) .hero-bg--1.is-active,
.hero-slider:not(.has-moved) .hero-bg--1.is-active::after { animation: none; }

.hero-inner { position: relative; z-index: 1; padding-top: 44px; padding-bottom: 36px; width: 100%; }
.hero-copy { max-width: 760px; }
.hero-title { max-width: 560px; }
.hero-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.5rem, 4.8vw, 3.6rem); line-height: 1.12; color: var(--green-900); margin-bottom: 18px;
}
.hero-title em { color: var(--green-600); font-style: italic; }
.hero .tag, .hero-title, .hero-lead {
  text-shadow: 0 0 2px rgba(250, 247, 239, .95), 0 0 10px rgba(250, 247, 239, .9), 0 0 22px rgba(250, 247, 239, .8);
}
.hero .tag { color: #8a6a1f; }
.hero .tag::before { background: #8a6a1f; }
.hero-lead { color: var(--ink); max-width: 500px; font-size: 1rem; font-weight: 500; line-height: 1.7; margin-bottom: 28px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-features {
  display: grid; grid-template-columns: repeat(4, 1fr); max-width: 700px; padding: 18px 8px;
  background: rgba(255, 255, 255, .88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.hero-features li { text-align: center; padding: 0 12px; display: flex; flex-direction: column; align-items: center; }
.hero-features li + li { border-left: 1px solid var(--line); }
.hero-features i { font-size: 1.6rem; color: var(--green-700); margin-bottom: 10px; }
.hero-features strong { font-size: .82rem; font-weight: 600; color: var(--green-900); line-height: 1.3; }
.hero-features span { font-size: .74rem; color: var(--ink-2); }
.hero-badge {
  position: absolute; top: 56px; left: 50%; z-index: 2;
  width: 112px; height: 112px; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, var(--green-700), var(--green-900));
  border: 3px solid var(--gold); outline: 1px solid rgba(201, 162, 74, .5); outline-offset: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  color: var(--white); box-shadow: var(--shadow-lg);
}
.hero-badge i { color: var(--gold); font-size: .9rem; margin-bottom: 2px; }
.hero-badge strong { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.hero-badge span { font-size: .6rem; line-height: 1.25; opacity: .85; margin-top: 3px; }

/* ===== RIBBON ===== */
.ribbon { background: var(--green-900); color: var(--white); }
.ribbon-inner { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.ribbon span { font-size: .8rem; font-weight: 500; white-space: nowrap; }
.ribbon i { color: var(--gold); margin-right: 8px; }

/* ===== ABOUT ===== */
/* about-bg.webp: soft cream sky, misty hills along the bottom, gold line-art leaves on the right */
.about { background: var(--cream) url("../images/site/about-bg.webp") center bottom / cover no-repeat; }
/* home page: sections from the third one down are laid out only when they come near the screen. Laying out the
   whole long page before the first paint cost about a second on a mid-range phone; 1000px is a placeholder
   height until a section has been shown once (then the browser remembers its real height). */
body[data-page="home"] main > section:nth-of-type(n+3),
body[data-page="home"] footer { content-visibility: auto; contain-intrinsic-size: auto 1000px; }
/* jumping to a #section needs the real heights, so script.js switches this off before an in-page link scrolls */
html.cv-off body[data-page="home"] main > section, html.cv-off body[data-page="home"] footer { content-visibility: visible; }
/* section photos wait until script.js marks the section as near the screen (.bg-in), so phones get the first screen sooner */
html.js :is(.about, .estates, .process, .order, .faq, .giftbox, .recipe-card):not(.bg-in) { background-image: none !important; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; position: relative; z-index: 1; }
/* Collage: tall bowl on the left; flower + pods stacked on the right with matching edges */
.about-collage { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; height: 500px; position: relative; }
.about-collage img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); box-shadow: var(--shadow); }
.c-main { grid-row: 1 / 3; object-position: center 60%; }
.c-top { grid-column: 2; grid-row: 1; object-position: center 40%; }
.c-bottom { grid-column: 2; grid-row: 2; object-position: center; }
.about-copy > p { color: var(--ink-2); margin-bottom: 22px; max-width: 540px; }
.about-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.about-features li {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 14px 8px; text-align: center; font-size: .78rem; font-weight: 600; color: var(--green-900); line-height: 1.35;
  box-shadow: var(--shadow-sm);
}
.about-features .ic {
  width: 38px; height: 38px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--green-100); background: var(--green-50); color: var(--green-600);
}
.about-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.commitment {
  flex: 1; min-width: 220px; background: var(--beige); border-radius: var(--r-sm);
  padding: 12px 16px; font-size: .8rem; color: var(--ink-2); display: flex; gap: 12px; align-items: center;
}
.commitment i { color: var(--gold); font-size: 1.5rem; padding-right: 12px; border-right: 1.5px solid rgba(201, 162, 74, .45); }

/* About refresh: green curved panel with a gold edge behind the collage, gold-framed photos, gold italic accent line */
.about { position: relative; overflow: hidden; }
.about-collage::before {
  content: ""; position: absolute; z-index: -1; top: -46px; bottom: -46px; left: -100vw; right: 40%;
  background: linear-gradient(160deg, var(--green-800), var(--green-900));
  border-radius: 0 320px 320px 0; box-shadow: 7px 0 0 var(--gold);
}
.about-collage img { border: 3px solid var(--gold-light); }
@media (max-width: 900px) { .about-collage::before { top: -26px; bottom: -18px; right: 30%; } }
.about .title em { font-style: italic; color: #9a7425; }
.about-features li { border-color: rgba(201, 162, 74, .35); transition: transform .3s, box-shadow .3s; }
.about-features li:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.about-features .ic { width: 46px; height: 46px; border: 0; background: var(--green-100); color: var(--green-700); font-size: 1.05rem; }

/* ===== PRODUCTS ===== */
.products { background: linear-gradient(180deg, var(--green-50), #eaf0df); padding: 60px 0 70px; }
.products .container { position: relative; z-index: 1; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.section-head .title { margin-bottom: 0; }
/* carousel: JS moves the track one card at a time */
.products-carousel { --per-view: 4; --gap: 20px; overflow: hidden; padding: 10px 4px 16px; margin: -10px -4px 0; }
.products-track { display: flex; gap: var(--gap); transition: transform .6s cubic-bezier(.22, .61, .36, 1); will-change: transform; touch-action: pan-y; }
.carousel-nav { display: flex; gap: 10px; }
.carousel-btn {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); color: var(--green-900); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: background .25s, color .25s, transform .25s;
}
.carousel-btn:hover { background: var(--green-900); color: var(--white); transform: translateY(-2px); }
.carousel-dots { display: flex; justify-content: center; gap: 0; margin-top: 8px; }
/* 28px tap area, 8px visible dot */
.carousel-dots button { width: 18px; height: 28px; display: grid; place-items: center; transition: width .3s; }
.carousel-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: rgba(15, 61, 34, .2); transition: width .3s, background .3s; }
.carousel-dots button.active { width: 36px; }
.carousel-dots button.active::before { width: 26px; background: var(--green-700); }
.product-card {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  background: var(--white); border-radius: var(--r); padding: 10px 10px 20px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.product-img { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--beige); margin-bottom: 16px; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.product-card:hover .product-img img { transform: scale(1.07); }
.product-body { padding: 0 8px; display: flex; flex-direction: column; flex: 1; }
.product-body h3 { font-size: 1.05rem; font-weight: 700; color: var(--green-900); margin-bottom: 6px; line-height: 1.35; }
.product-body p { font-size: .84rem; color: var(--ink-2); line-height: 1.55; margin-bottom: 16px; flex: 1; }
.product-enquire {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 99px; background: var(--green-50); border: 1px solid var(--green-100);
  color: var(--green-700); font-weight: 600; font-size: .8rem; transition: gap .25s, background .25s, color .25s;
}
.product-card:hover .product-enquire { background: var(--green-700); color: var(--white); }
.product-enquire:hover { gap: 12px; }
/* breathing room between the grade description and its "Get the Quote" button */
.product-body .product-enquire { margin-top: 18px; }
/* grade cards open as a large popup card: pointer cursor + a small magnifier on the photo on hover/focus */
.products-track .product-card { cursor: pointer; }
.products-track .product-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.grade-modal {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px;
  background: rgba(5, 24, 14, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s;
}
.grade-modal[hidden] { display: none; }
.grade-modal.is-open { opacity: 1; }
.grade-modal-card {
  position: relative; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
  background: linear-gradient(180deg, #fffefa 0%, #fbf6ea 100%); border: 1px solid rgba(201, 162, 74, .6);
  border-radius: 22px; padding: 14px 14px 24px; box-shadow: inset 0 3px 0 var(--gold), 0 30px 70px -20px rgba(0, 0, 0, .6);
  transform: scale(.88) translateY(14px); transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.grade-modal.is-open .grade-modal-card { transform: none; }
.grade-modal-img { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--beige); margin-bottom: 18px; }
.grade-modal-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* name + description on the left, "Get the Quote" on the right */
.grade-modal-body { padding: 0 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; }
.grade-modal-body h3 { grid-column: 1; font-size: 1.4rem; font-weight: 700; color: var(--green-900); margin-bottom: 6px; line-height: 1.3; }
.grade-modal-body p { grid-column: 1; font-size: .95rem; color: var(--ink-2); line-height: 1.6; margin: 0; }
.grade-modal-body .product-enquire { grid-column: 2; grid-row: 1 / span 2; align-self: center; background: var(--green-700); color: var(--white); padding: 11px 20px; font-size: .88rem; white-space: nowrap; }
.grade-modal-close {
  position: absolute; top: 22px; right: 22px; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.7rem; line-height: 1; color: var(--white);
  background: rgba(5, 24, 14, .7); transition: background .2s;
}
.grade-modal-close:hover { background: var(--green-900); }

/* enquiry popup (built by script.js): same card style as the grade popup */
.enq-pop {
  position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; padding: 20px;
  background: rgba(5, 24, 14, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s;
}
.enq-pop[hidden] { display: none; }
.enq-pop.is-open { opacity: 1; }
.enq-pop-card {
  position: relative; width: min(460px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto;
  background: linear-gradient(180deg, #fffefa 0%, #fbf6ea 100%); border: 1px solid rgba(201, 162, 74, .6);
  border-radius: 22px; padding: 26px 26px 22px; box-shadow: inset 0 3px 0 var(--gold), 0 30px 70px -20px rgba(0, 0, 0, .6);
  transform: scale(.92) translateY(14px); transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.enq-pop.is-open .enq-pop-card { transform: none; }
.enq-pop-close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.5rem; line-height: 1; color: var(--green-900);
  background: var(--green-50); border: 1px solid var(--line); transition: background .2s, color .2s;
}
.enq-pop-close:hover { background: var(--green-900); color: var(--white); }
/* mascot clip across the top of the card, edge to edge */
.enq-pop-close { z-index: 2; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.enq-pop-media {
  margin: -26px -26px 18px; height: 190px; overflow: hidden; border-radius: 21px 21px 0 0;
  background: var(--green-100) url("../images/site/enquiry-mascot.webp") center 60% / cover no-repeat;
  border-bottom: 3px solid var(--gold);
}
.enq-pop-media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.enq-pop-head { display: flex; align-items: center; gap: 14px; padding-right: 36px; margin-bottom: 18px; }
.enq-pop-head img { flex: none; width: 54px; height: auto; }
/* same badge logo as the navbar and footer */
.enq-pop-head .brand-badge { flex: none; }
.enq-pop-head .brand-full { width: auto; height: 74px; }
.enq-pop-card h2 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--green-900); line-height: 1.25; margin-bottom: 4px; }
.enq-pop-head p { font-size: .84rem; color: var(--ink-2); line-height: 1.5; }
.enq-pop-form { display: grid; gap: 12px; }
.enq-pop-form[hidden] { display: none; }
.enq-f { display: grid; gap: 5px; }
.enq-f span { font-size: .76rem; font-weight: 600; color: var(--green-900); }
.enq-f input, .enq-f textarea {
  width: 100%; font: inherit; font-size: .9rem; color: var(--ink); background: var(--white);
  border: 1px solid rgba(15, 61, 32, .2); border-radius: 10px; padding: 10px 12px; transition: border-color .2s, box-shadow .2s;
}
.enq-f textarea { resize: vertical; min-height: 78px; }
.enq-f input:focus, .enq-f textarea:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(27, 107, 51, .15); }
.enq-f small { display: none; font-size: .72rem; color: #b42318; }
.enq-f.invalid input, .enq-f.invalid textarea { border-color: #b42318; }
.enq-f.invalid small { display: block; }
.enq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.enq-pop-form .btn { margin-top: 4px; }
.enq-pop-status { font-size: .78rem; color: #b42318; text-align: center; min-height: 0; }
.enq-pop-status:empty { display: none; }
.enq-pop-done { text-align: center; padding: 18px 0 6px; }
.enq-pop-done > i { font-size: 2.6rem; color: var(--green-600); margin-bottom: 10px; }
.enq-pop-done p { font-size: .9rem; color: var(--ink-2); margin-bottom: 18px; }
@media (max-width: 480px) {
  .enq-pop { padding: 12px; }
  .enq-pop-card { padding: 22px 18px 18px; }
  .enq-pop-media { margin: -22px -18px 16px; height: 150px; }
  .enq-pop-head img { width: 42px; }
  .enq-pop-head .brand-full { width: auto; height: 58px; }
  .enq-pop-card h2 { font-size: 1.12rem; }
  .enq-f input, .enq-f textarea { font-size: 16px; }   /* stops iPhone zooming in on focus */
}
@media (max-width: 480px) {
  .grade-modal { padding: 12px; }
  .grade-modal-body { column-gap: 12px; padding: 0 4px; }
  .grade-modal-body h3 { font-size: 1.1rem; }
  .grade-modal-body p { font-size: .85rem; }
  .grade-modal-body .product-enquire { padding: 9px 14px; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .grade-modal, .grade-modal-card { transition: none; } }
.product-card .product-img::before {
  content: "\f00e"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .85rem;
  position: absolute; right: 10px; bottom: 10px; z-index: 1; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--green-900); color: var(--gold-light);
  opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s; pointer-events: none;
}
.product-card:hover .product-img::before, .product-card .product-img:focus-visible::before { opacity: .92; transform: none; }
.product-card .product-img:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ===== PAGE BANNER (inner pages) ===== */
.page-hero {
  position: relative; overflow: hidden; color: var(--white);
  background:
    linear-gradient(90deg, rgba(8, 36, 18, .9) 0%, rgba(8, 36, 18, .72) 50%, rgba(8, 36, 18, .4) 100%),
    var(--ph-img, url("../images/site/estates-bg.webp")) center / cover no-repeat,
    var(--green-900);
}
.page-hero--about       { --ph-img: url("../images/site/hero-farmer.webp"); }
.page-hero--plantations { --ph-img: url("../images/site/estates-bg.webp"); }
.page-hero--products    { --ph-img: url("../images/products/8.5mm.webp"); }
.page-hero--process     { --ph-img: url("../images/farm/farm-8.webp"); }
.page-hero--prices      { --ph-img: url("../images/products/7-8mm.webp"); }
.page-hero--export      { --ph-img: url("../images/site/packaging-box.webp"); }
.page-hero--blog        { --ph-img: url("../images/site/about-pods.webp"); }
.page-hero--contact     { --ph-img: url("../images/farm/farm-9.webp"); }
.page-hero-inner { padding-top: 80px; padding-bottom: 80px; }
.breadcrumb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .8rem; color: rgba(255, 255, 255, .85); margin-bottom: 14px; }
.breadcrumb a:hover { color: var(--gold-light); }
.breadcrumb i { font-size: .6rem; color: var(--gold); }
.breadcrumb [aria-current] { color: var(--gold-light); font-weight: 600; }
.page-hero-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; max-width: 760px; margin-bottom: 14px;
}
.page-hero-lead { max-width: 620px; font-size: .98rem; line-height: 1.7; color: rgba(255, 255, 255, .92); }

/* ===== GRADE GUIDE (products page) ===== */
.grades { background: var(--white); }
.grades-wrap { max-width: 1100px; margin: 0 auto; overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.grades-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.grades-table th { background: var(--green-800); color: var(--white); text-align: left; padding: 14px 18px; font-size: .82rem; font-weight: 600; letter-spacing: .04em; }
.grades-table td { padding: 14px 18px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink); }
.grades-table tbody tr:nth-child(even) { background: var(--cream); }
.grades-table strong { color: var(--green-900); }
.grades-table td:last-child { text-align: right; }

/* ===== ESTATES ===== */
.estates {
  position: relative; overflow: hidden; color: var(--white);
  background:
    linear-gradient(90deg, rgba(8, 36, 18, .92) 0%, rgba(8, 36, 18, .7) 45%, rgba(8, 36, 18, .35) 100%),
    url("../images/site/estates-bg.webp") center / cover no-repeat;
}
.estates-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; min-height: 230px; padding-top: 40px; padding-bottom: 40px; }
.estates-copy .title { margin-bottom: 16px; }
.estates-points { display: flex; gap: 22px; flex-wrap: wrap; }
.estates-points li { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: rgba(255, 255, 255, .9); }
.estates-points i {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-500); color: var(--white); font-size: .7rem;
}
.stats-card {
  display: grid; grid-template-columns: repeat(4, auto); gap: 0;
  background: rgba(255, 255, 255, .9); color: var(--green-900);
  border-radius: var(--r); padding: 18px 8px; box-shadow: var(--shadow-lg);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.stats-card div { padding: 0 24px; }
.stats-card div + div { border-left: 1px solid var(--line); }
.stats-card strong { display: block; font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; }
.stats-card span { font-size: .72rem; color: var(--ink-2); }

/* Estates refresh: taller band, gold accent line, gold-ringed point icons, cream stat card with icons, gold wave into Products */
.estates-inner { min-height: 330px; padding-top: 64px; padding-bottom: 100px; }
.estates .title em { font-style: normal; color: var(--gold-light); }
.estates-points { gap: 16px 0; max-width: 600px; }
.estates-points { display: grid; grid-template-columns: repeat(2, max-content); gap: 16px 34px; }
.estates-points li { gap: 10px; font-weight: 500; }
.estates-points i { width: 40px; height: 40px; flex: none; background: rgba(8, 36, 18, .35); border: 1.5px solid var(--gold); color: var(--gold-light); font-size: .85rem; }
.stats-card { background: rgba(250, 247, 239, .95); border-radius: 20px; padding: 22px 10px; }
.stats-card div { text-align: center; }
.stats-card i { width: 38px; height: 38px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; background: var(--green-100); color: var(--green-700); font-size: .9rem; }
.estates-wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 70px; display: block; }
@media (max-width: 900px) {
  .estates-inner { padding-top: 50px; padding-bottom: 80px; }
  .estates-points { grid-template-columns: 1fr; }
  .estates-wave { height: 40px; }
}

/* Estates: deep forest-green with the plantation photo glowing through on the right only,
   a gentle S-wave top edge (masked, so the About photo shows above it) with a gold line,
   cardamom-sprig line-art on the right and a cream wave into Products. */
.estates {
  --estates-top: 48px;
  margin-top: calc(-1 * var(--estates-top)); padding-top: var(--estates-top);
  background:
    linear-gradient(90deg, rgba(6, 56, 36, .98) 0%, rgba(6, 56, 36, .94) 38%, rgba(8, 66, 42, .84) 62%, rgba(7, 56, 33, .76) 100%),
    linear-gradient(180deg, rgba(6, 50, 32, .4) 0%, transparent 30%, transparent 72%, rgba(6, 50, 32, .55) 100%),
    url("../images/site/estates-bg.webp") right center / cover no-repeat,
    #063c27;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 30C240 44 480 46 720 36C960 26 1200 10 1440 6V48H0Z'/%3E%3C/svg%3E") top / 100% var(--estates-top) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--estates-top) - 1px) / 100% calc(100% - var(--estates-top) + 1px) no-repeat;
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 30C240 44 480 46 720 36C960 26 1200 10 1440 6V48H0Z'/%3E%3C/svg%3E") top / 100% var(--estates-top) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--estates-top) - 1px) / 100% calc(100% - var(--estates-top) + 1px) no-repeat;
}
/* gold line along the top wave (same curve as the mask) */
.estates::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: var(--estates-top); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 30C240 44 480 46 720 36C960 26 1200 10 1440 6' fill='none' stroke='%23c9a24a' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
}
/* cardamom sprig: long lanceolate leaves alternating up an arching pseudostem, pods on a low panicle */
.estates::before {
  content: ""; position: absolute; right: -40px; bottom: 10px; width: 600px; height: 600px; pointer-events: none; opacity: .15;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23e8cf8a' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M330 400C320 300 300 200 250 90'/%3E%3Cpath d='M326 340C270 318 200 322 150 352C205 334 270 334 326 340Z'/%3E%3Cpath d='M326 340C262 328 200 332 150 352' stroke-width='.8'/%3E%3Cpath d='M318 280C345 255 375 246 398 250C378 262 350 276 318 280Z'/%3E%3Cpath d='M318 280C348 262 375 252 398 250' stroke-width='.8'/%3E%3Cpath d='M306 220C250 188 185 185 130 205C190 200 250 208 306 220Z'/%3E%3Cpath d='M306 220C250 198 188 194 130 205' stroke-width='.8'/%3E%3Cpath d='M290 165C318 132 352 118 384 116C360 136 326 156 290 165Z'/%3E%3Cpath d='M290 165C322 140 354 124 384 116' stroke-width='.8'/%3E%3Cpath d='M272 120C228 84 175 72 128 80C178 92 228 106 272 120Z'/%3E%3Cpath d='M272 120C226 96 176 82 128 80' stroke-width='.8'/%3E%3Cpath d='M250 90C246 60 238 38 222 18C244 40 254 64 250 90Z'/%3E%3Cpath d='M326 396C346 386 368 386 394 378' stroke-width='1'/%3E%3Cellipse cx='346' cy='384' rx='5' ry='9' transform='rotate(-60 346 384)'/%3E%3Cellipse cx='364' cy='381' rx='5' ry='9' transform='rotate(-70 364 381)'/%3E%3Cellipse cx='382' cy='376' rx='5' ry='9' transform='rotate(-80 382 376)'/%3E%3C/svg%3E") center / contain no-repeat;
}
.estates > .container { position: relative; z-index: 1; }
.estates .stats-card { box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .55), 0 0 0 1px rgba(232, 207, 138, .2) !important; }
/* gentle cream wave into Products with a fine gold edge */
.estates-wave { height: 44px; }
.estates-wave path:last-child { stroke: rgba(201, 162, 74, .85); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
@media (max-width: 900px) {
  .estates {
    --estates-top: 26px;
    background:
      linear-gradient(rgba(6, 56, 36, .88), rgba(6, 56, 36, .92)),
      url("../images/site/estates-bg.webp") center / cover no-repeat,
      #063c27;
  }
  .estates::before { width: 300px; height: 300px; right: -60px; bottom: 20px; opacity: .12; }
  .estates-wave { height: 24px; }
}

/* sack showcase: the cut-out sack rises out of the top of its card */
.sacks-head { margin-bottom: 0; }
.sacks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; margin: 0 auto 70px; max-width: 1080px; }
.sack-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 8px;
  margin-top: 64px; padding: 0 28px 26px 6px; border-radius: 22px;
  background: linear-gradient(160deg, var(--white) 0%, var(--white) 55%, var(--green-50) 100%); box-shadow: var(--shadow);
}
.sack-card::before {
  content: ""; position: absolute; inset: -10px; border: 1.5px dashed rgba(27, 107, 51, .4); border-radius: 28px; pointer-events: none;
}
.sack-img { margin-top: -64px; align-self: start; }
.sack-img img { width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgba(11, 46, 24, .22)); transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.sack-card:hover .sack-img img { transform: translateY(-8px) rotate(-1.5deg); }
.sack-body { padding-top: 26px; }
.sack-body h3 { font-family: var(--font-display); font-size: 1.6rem; color: var(--green-700); margin-bottom: 8px; }
.sack-body p { color: var(--ink-2); font-size: .9rem; line-height: 1.7; margin-bottom: 14px; }
.sack-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.sack-pills li { font-size: .72rem; font-weight: 600; color: var(--green-700); background: var(--green-50); border: 1px solid var(--green-100); padding: 4px 10px; border-radius: 99px; }
.sack-ribbon {
  position: absolute; top: -14px; right: 26px; z-index: 1; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--green-900); background: var(--gold-light); padding: 6px 12px; border-radius: 99px; box-shadow: var(--shadow-sm);
}
.sack-ribbon::before { content: "\f005"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 6px; color: #8a6a1f; }
/* Products refresh: gold accent words, wider sack cards with icon pills, grade header intro, slimmer grade photos */
.products .title em { font-style: normal; color: #9a7425; }
.sacks { max-width: 1120px; }
.sack-pills li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; font-size: .68rem; background: var(--white); border-color: rgba(201, 162, 74, .35); }
.sack-pills i { font-size: .68rem; color: var(--gold); }
.products .section-head { align-items: center; }
.grades-intro { flex: 1; max-width: 380px; margin: 0 auto 0 12px; padding-left: 20px; border-left: 1px solid rgba(201, 162, 74, .5); font-size: .84rem; line-height: 1.6; color: var(--ink-2); }
.product-card { padding: 8px 8px 18px; border-radius: 18px; }
.product-img { aspect-ratio: 16 / 10; border-radius: 12px; }
.product-body h3 { font-size: 1.02rem; }
@media (max-width: 900px) {
  .sacks { grid-template-columns: 1fr; max-width: 560px; gap: 26px; margin-bottom: 56px; }
  .grades-intro { order: 3; flex-basis: 100%; max-width: none; margin: 0; padding-left: 14px; }
}
@media (max-width: 480px) {
  .sack-card { grid-template-columns: 1fr; padding: 0 20px 24px; text-align: center; margin-top: 90px; }
  .sack-img { margin-top: -90px; max-width: 250px; justify-self: center; }
  .sack-body { padding-top: 0; }
  .sack-pills { justify-content: center; }
  .sack-ribbon { right: 50%; transform: translateX(50%); top: auto; bottom: -14px; }
}

/* ===== PROCESS ===== */
/* process-bg.webp: misty hills at sunrise, leaves in the top corners, cardamom bowl bottom-left */
.process {
  padding-bottom: 70px;
  background:
    linear-gradient(180deg, rgba(250, 247, 239, .3) 0%, rgba(250, 247, 239, .5) 100%),
    var(--cream) url("../images/site/process-bg.webp") center bottom / cover no-repeat;
}
.process .container { position: relative; z-index: 1; }
/* steps slide like the grade cards (JS in setupCarousel); top padding keeps the number badges and hover lift inside the clip */
.process-carousel { --per-view: 4; --gap: 22px; overflow: hidden; padding: 24px 4px 18px; margin: -24px -4px 0; }
.process-steps { display: flex; gap: var(--gap); transition: transform .6s cubic-bezier(.22, .61, .36, 1); will-change: transform; touch-action: pan-y; }
.process-steps > .step { flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view)); }
.process-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.process-nav .carousel-dots { margin-top: 0; }
.step { position: relative; }
.step:not(:last-child)::after {
  content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; right: -21px; top: 36%; font-size: .8rem; color: var(--green-900);
}
.step-img { aspect-ratio: 1 / 1.05; border-radius: var(--r); overflow: hidden; margin-bottom: 14px; box-shadow: var(--shadow); }
.step-img img { width: 100%; height: 100%; object-fit: cover; }
.step h3 { font-size: .92rem; font-weight: 600; color: var(--green-900); margin-bottom: 2px; }
.step p { font-size: .8rem; font-weight: 500; color: var(--ink); line-height: 1.5; }
/* soft cream halo so captions read over the pods and leaves without dimming the photo */
.process .tag, .process .title, .process-sub {
  text-shadow: 0 0 2px rgba(250, 247, 239, .95), 0 0 8px rgba(250, 247, 239, .9), 0 0 18px rgba(250, 247, 239, .8);
}
/* Process refresh: each step is a cream card with a number badge on top, an icon disc over the photo and gold chevrons between */
.process .title em { font-style: normal; color: #9a7425; }
.process-sub { max-width: 620px; margin: -6px auto 46px; text-align: center; color: var(--ink-2); font-size: .95rem; line-height: 1.7; }
.step {
  background: rgba(255, 253, 247, .92); border: 1px solid rgba(201, 162, 74, .3); border-radius: 18px;
  padding: 10px 10px 18px; text-align: center; box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s;
}
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.step-no {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-800); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  outline: 1.5px dashed rgba(201, 162, 74, .7); outline-offset: 3px;
}
.step-img { aspect-ratio: 1 / 1.02; border-radius: 12px; margin-bottom: 0; box-shadow: none; }
.step-ic {
  position: relative; z-index: 1; width: 46px; height: 46px; margin: -23px auto 8px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cream); border: 1.5px solid var(--gold); color: var(--green-700); font-size: .95rem; box-shadow: var(--shadow-sm);
}
.step h3 { font-family: var(--font-display); font-size: 1rem; margin-bottom: 4px; }
.step p { font-size: .76rem; color: var(--ink-2); }
/* no arrows between steps: the cards stand on their own, solid and clearly lifted off the background */
.step:not(:last-child)::after { content: none !important; display: none !important; }
.process .step {
  background: #fffdf7 !important; border: 1px solid rgba(201, 162, 74, .55) !important;
  box-shadow: 0 2px 4px rgba(11, 46, 24, .06), 0 16px 34px -14px rgba(11, 46, 24, .38) !important;
}
.process .step:hover { box-shadow: inset 0 3px 0 var(--gold), 0 4px 8px rgba(11, 46, 24, .08), 0 26px 48px -16px rgba(11, 46, 24, .45) !important; }

/* ===== HOW TO ORDER ===== */
.order { background: var(--green-50); padding: 70px 0; }
.order-sub { text-align: center; color: var(--ink-2); max-width: 560px; margin: -6px auto 44px; }
.order-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px; position: relative; }
.order-step {
  position: relative; background: var(--white); border-radius: var(--r); padding: 8px 8px 22px;
  text-align: center; box-shadow: var(--shadow-sm); border: 1px solid var(--line);
  transition: transform .3s, box-shadow .3s;
}
.order-step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* chevron connector between cards, centred in the gap at image height */
.order-step:not(:last-child)::after {
  content: ""; position: absolute; z-index: 2; top: 70px; right: -37px;
  width: 38px; height: 38px; border-radius: 50%; background: var(--white) no-repeat center / 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f3d22' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  box-shadow: var(--shadow);
}
.order-img { aspect-ratio: 16 / 10; border-radius: calc(var(--r) - 4px); overflow: hidden; margin-bottom: 18px; }
.order-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.order-step:hover .order-img img { transform: scale(1.05); }
.order-no {
  position: absolute; z-index: 1; top: -10px; left: -10px; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: var(--green-900); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  border: 3px solid var(--white); box-shadow: var(--shadow);
}
.order-step h3 { font-size: 1.05rem; font-weight: 700; color: var(--green-900); margin-bottom: 8px; padding: 0 12px; }
.order-step p { font-size: .82rem; color: var(--ink-2); line-height: 1.6; padding: 0 14px; }
.order-cta { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 36px; }

/* Order refresh: soft hills background, centred number badge, icon disc over the photo, serif titles, gold chevrons */
.order {
  position: relative; padding: 80px 0 90px;
  background: var(--cream) url("../images/site/order-bg.webp") center top / cover no-repeat;
}
.order .title em { font-style: normal; color: #9a7425; }
.order .tag, .order .title, .order-sub { text-shadow: 0 0 2px rgba(250, 247, 239, .95), 0 0 12px rgba(250, 247, 239, .9); }
.order-steps { gap: 30px; margin-top: 10px; }
.order-step { background: rgba(255, 253, 247, .96); border: 1px solid rgba(201, 162, 74, .3); border-radius: 18px; padding: 8px 8px 24px; }
.order-no {
  top: -24px; left: 50%; transform: translateX(-50%); width: 48px; height: 48px; font-size: 1.05rem;
  background: var(--green-800); border: 0; outline: 1.5px dashed rgba(201, 162, 74, .7); outline-offset: 3px;
}
.order-img { margin-bottom: 0; border-radius: 12px; }
.order-ic {
  position: relative; z-index: 1; width: 50px; height: 50px; margin: -25px auto 10px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cream); border: 1.5px solid var(--gold); color: var(--green-700); font-size: 1.05rem; box-shadow: var(--shadow-sm);
}
.order-step h3 { font-family: var(--font-display); font-size: 1.2rem; }
/* connector: a small deep-green disc sitting fully inside the gap, centred on the photos, and held still when the card lifts */
.order-steps { column-gap: 46px; }
.order-step { container-type: inline-size; }
.order-step:not(:last-child)::after {
  width: 32px; height: 32px; right: -40px; top: 82px; top: calc(8px + 100cqw * 5 / 16 - 16px);
  border: 2px solid #fffdf7; background-color: var(--green-800); background-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8cf8a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  box-shadow: 0 6px 14px -6px rgba(11, 46, 24, .55); transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.order-step:hover::after { transform: translateY(6px); }
@media (max-width: 900px) { .order-steps { row-gap: 48px; } }
/* photo slots waiting for the client's real photos */
.step-img-pending, .order-img-pending { background: linear-gradient(160deg, #f1ead6, #e4dcc4); }
.process .step-img:not(.step-img-pending) { cursor: zoom-in; }
.process .step-img:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ===== PACKAGING ===== */
.packaging { background: var(--cream); padding: 80px 0; }
.packaging-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.packaging-media { position: relative; }
.packaging-media img { width: 100%; height: 460px; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.packaging-note {
  position: absolute; right: -18px; bottom: 28px; display: flex; gap: 12px; align-items: center;
  background: var(--white); border-radius: var(--r); padding: 14px 18px; box-shadow: var(--shadow-lg);
  border-left: 4px solid var(--gold);
}
.packaging-note i { font-size: 1.4rem; color: var(--green-600); }
.packaging-note strong { display: block; font-size: .85rem; color: var(--green-900); line-height: 1.3; }
.packaging-note span { font-size: .72rem; color: var(--ink-2); }
.packaging-copy > p { color: var(--ink-2); margin-bottom: 24px; max-width: 520px; }
.pack-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 28px; }
.pack-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px 16px;
  box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s;
}
.pack-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pack-card .ic {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 12px;
  background: var(--green-50); color: var(--green-600); border: 1.5px solid var(--green-100);
}
.pack-card h3 { font-size: .88rem; font-weight: 600; color: var(--green-900); margin-bottom: 4px; }
.pack-card p { font-size: .76rem; color: var(--ink-2); line-height: 1.5; }

/* Packaging refresh: framed photo with a green-and-gold offset panel, option cards with product cut-outs */
.packaging { position: relative; overflow: hidden; }
.packaging .title em { font-style: normal; color: #9a7425; }
.packaging-media::before {
  content: ""; position: absolute; z-index: -1; inset: -22px 40px -22px -100vw;
  background: linear-gradient(160deg, var(--green-800), var(--green-900)); border-radius: 0 40px 40px 0;
  box-shadow: 6px 0 0 var(--gold);
}
.packaging-media { z-index: 0; }
.packaging-media img { border: 3px solid var(--gold-light); }
.pack-card { border-radius: 16px; border-color: rgba(201, 162, 74, .3); }
.pack-card .ic { width: 40px; height: 40px; border: 0; background: var(--green-100); color: var(--green-700); }
/* pack cards switch the packaging photo */
.packaging-media img { transition: opacity .3s; }
.packaging-media img.is-swapping { opacity: .25; }
.pack-card[data-pack-img] { cursor: pointer; }
.pack-card[data-pack-img]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pack-card[aria-pressed="true"] { border-color: var(--gold) !important; box-shadow: inset 0 3px 0 var(--gold), var(--shadow-sm) !important; }
.pack-card[aria-pressed="true"] .ic { background: var(--green-800) !important; color: var(--gold-light) !important; }

/* ===== BENEFITS ===== */
.benefits { background: linear-gradient(135deg, var(--green-900), var(--green-800) 60%, var(--green-700)); color: var(--white); padding: 80px 0; }
.benefits-grid { display: grid; grid-template-columns: 1fr 320px 1fr; gap: 40px; align-items: center; }
.benefit-list { display: flex; flex-direction: column; gap: 22px; }
.benefit { display: flex; gap: 14px; align-items: flex-start; }
.benefit-list:first-child .benefit { flex-direction: row-reverse; text-align: right; }
.benefit .ic {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); border: 1.5px solid var(--gold); color: var(--gold-light); font-size: 1.05rem;
}
.benefit h3 { font-size: .95rem; font-weight: 600; margin-bottom: 4px; }
.benefit p { font-size: .78rem; color: rgba(255, 255, 255, .75); line-height: 1.55; }
.benefits-img { aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid var(--gold); outline: 1px solid rgba(201, 162, 74, .5); outline-offset: 8px; box-shadow: var(--shadow-lg); }
.benefits-img img { width: 100%; height: 100%; object-fit: cover; }

/* ===== FAQ ===== */
.faq {
  position: relative; padding: 76px 0;
  background: var(--green-50) url("../images/site/faq-bg.webp") center bottom / cover no-repeat;
}
/* soft cream halo behind the copy so it reads over the photo without washing the photo out */
.faq-intro .tag, .faq-intro .title, .faq-intro > p {
  text-shadow: 0 0 2px rgba(250, 247, 239, .95), 0 0 10px rgba(250, 247, 239, .9), 0 0 22px rgba(250, 247, 239, .8);
}
.faq-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.faq-intro .title { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; }
.faq-intro > p { color: var(--ink); font-weight: 500; margin-bottom: 26px; max-width: 380px; font-size: 1.02rem; }
.faq-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.faq-points {
  display: flex; margin-top: 34px; max-width: 480px; padding: 18px 8px;
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.faq-points li { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 0 12px; }
.faq-points li + li { border-left: 1px solid rgba(15, 61, 34, .15); }
.faq-points span {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px;
  background: var(--green-50); color: var(--green-900); font-size: 1.15rem;
}
.faq-points strong { font-size: .82rem; font-weight: 700; color: var(--green-900); line-height: 1.3; }
.faq-points small { font-size: .72rem; color: var(--ink); }
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-sm); transition: box-shadow .3s;
}
.faq-item[open] { box-shadow: var(--shadow); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; font-size: .95rem; font-weight: 700; color: var(--green-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { flex: 1; }
.faq-ic {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-50); color: var(--green-900); font-size: 1rem;
}
.faq-item summary::after {
  content: "\f067"; font-family: "Font Awesome 6 Free"; font-weight: 900; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem;
  background: var(--green-50); color: var(--green-900); transition: background .3s, color .3s;
}
.faq-item[open] summary::after { content: "\f068"; background: var(--green-900); color: var(--white); }
.faq-item p {
  margin: 0 16px 16px; padding: 14px 18px; border-radius: var(--r-sm);
  background: var(--green-50); font-size: .86rem; color: var(--ink-2); line-height: 1.65;
}

/* ===== GALLERY ===== */
.gallery { background: var(--cream); padding: 70px 0; }
.gallery-sub { text-align: center; color: var(--ink-2); margin: -6px auto 36px; max-width: 560px; }
.gallery-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 240px 240px; gap: 14px;
  grid-template-areas:
    "a a a b b b c c c h h h"
    "a a a d d e e f f h h h";
}
.g-a { grid-area: a; } .g-b { grid-area: b; } .g-c { grid-area: c; } .g-h { grid-area: h; }
.g-d { grid-area: d; } .g-e { grid-area: e; } .g-f { grid-area: f; }
.gallery-item { position: relative; border-radius: var(--r); overflow: hidden; cursor: zoom-in; padding: 0; box-shadow: var(--shadow-sm); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.06); }
.gallery-item::before {
  content: ""; position: absolute; inset: 50% 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(transparent, rgba(11, 46, 24, .35));
}
.g-cap {
  position: absolute; z-index: 2; left: 12px; bottom: 12px; max-width: calc(100% - 24px);
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); border-radius: 99px;
  color: var(--green-900); font-size: .76rem; font-weight: 600; line-height: 1.3; text-align: left;
  box-shadow: var(--shadow-sm);
}
.g-cap i {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-900); color: var(--white); font-size: .7rem;
}
.gallery-features {
  display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 22px;
  background: var(--green-100); border-radius: var(--r); padding: 20px 10px;
}
.gallery-features li { display: flex; align-items: center; gap: 14px; padding: 4px 20px; }
.gallery-features li + li { border-left: 1px solid rgba(15, 61, 34, .15); }
.gallery-features span {
  flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); color: var(--green-900); font-size: 1.2rem; box-shadow: var(--shadow-sm);
}
.gallery-features strong { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--green-900); }
.gallery-features small { font-size: .78rem; color: var(--ink-2); }
.gallery-more { text-align: center; margin-top: 28px; }
.lightbox {
  position: fixed; inset: 0; z-index: 3000; background: rgba(5, 20, 10, .94);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; animation: fadeIn .25s ease;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(92vw, 1000px); max-height: 80vh; border-radius: var(--r); box-shadow: var(--shadow-lg); }
.lightbox p { color: var(--gold-light); font-size: .9rem; }
.lightbox-close { position: absolute; top: 14px; right: 18px; width: 48px; height: 48px; color: var(--white); font-size: 2.4rem; line-height: 1; opacity: .8; }
.lightbox-close:hover { opacity: 1; }

.estates-lead { max-width: 560px; margin-bottom: 20px; font-size: .92rem; line-height: 1.7; color: rgba(255, 255, 255, .85); }

/* ===== PRICES ===== */
.prices { background: linear-gradient(180deg, var(--green-50), #eaf0df); padding: 80px 0; }
.prices-sub { text-align: center; color: var(--ink-2); max-width: 600px; margin: -6px auto 40px; }
.prices-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; max-width: 980px; margin: 0 auto; }
.price-card { background: var(--white); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.price-card.featured { border: 2px solid var(--green-600); box-shadow: var(--shadow); }
.price-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.price-ic {
  flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-900); color: var(--white); font-size: 1.1rem;
}
.price-head h3 { font-family: var(--font-display); font-size: 1.25rem; color: var(--green-900); line-height: 1.2; }
.price-head small { font-size: .78rem; font-weight: 600; color: var(--gold); letter-spacing: .04em; text-transform: uppercase; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table th {
  text-align: left; padding: 10px 14px; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); background: var(--green-50);
}
.price-table th:first-child { border-radius: 8px 0 0 8px; }
.price-table th:last-child { border-radius: 0 8px 8px 0; text-align: right; }
.price-table td { padding: 13px 14px; border-bottom: 1px dashed var(--line); font-size: .92rem; font-weight: 600; color: var(--green-900); }
.price-table tr:last-child td { border-bottom: 0; }
.price-table td:last-child { text-align: right; font-size: 1.02rem; font-weight: 700; color: var(--green-700); white-space: nowrap; }
.price-table td small { font-size: .74rem; font-weight: 500; color: var(--ink-2); }
.price-table tbody tr { transition: background .2s; }
.price-table tbody tr:hover { background: var(--cream); }
.prices-cta { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 36px; }

/* Prices refresh (ChatGPT brief): one premium module, softer cards, header divider, taller rows, gold row hover */
.prices { padding: 76px 0; background: linear-gradient(180deg, var(--cream) 0%, #f2f5e9 100%); }
.prices-grid { max-width: 940px; gap: 24px; }
/* cardamom mascot giving a thumbs up in its own column between the two price cards */
.prices-grid { grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr); max-width: 1200px; align-items: center; }
.prices-grid .price-card { align-self: stretch; }
.prices-mascot {
  width: 100%; height: auto; justify-self: center; pointer-events: none;
  filter: drop-shadow(0 18px 22px rgba(15, 61, 32, .2)); animation: mascot-bob 3.6s ease-in-out infinite;
}
@keyframes mascot-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .prices-mascot { animation: none; } }
@media (max-width: 1100px) { .prices-grid { grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr); } }
.price-card { border-radius: 22px; padding: 28px; border: 1px solid rgba(201, 162, 74, .3); box-shadow: 0 18px 50px rgba(11, 46, 24, .08); background: #fffefa; }
.price-card.featured { border: 1px solid var(--green-700); box-shadow: 0 18px 50px rgba(11, 46, 24, .12); }
.price-head { padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid rgba(201, 162, 74, .3); }
.price-ic { width: 48px; height: 48px; flex: none; }
.price-head small { letter-spacing: .12em; font-size: .68rem; }
.price-table th { background: #f3f6ec; }
.price-table td { padding: 15px 14px; }
.price-table tbody tr:hover { background: rgba(232, 207, 138, .16); }
.price-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--gold); }

/* ===== EXPORT ===== */
.export { background: var(--cream); padding: 80px 0; }
.export-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 64px; align-items: center; }
.export-copy .title { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.15; margin-bottom: 20px; }
.export-copy > p { color: var(--ink-2); margin-bottom: 30px; max-width: 520px; line-height: 1.75; }
.export-points { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 34px; }
.export-points li {
  display: flex; gap: 14px; align-items: center; padding: 16px 18px;
  border-radius: var(--r-sm); background: #fffdf8; border: 1px solid var(--line);
  transition: border-color .25s, transform .25s;
}
.export-points li:hover { border-color: var(--green-100); transform: translateY(-2px); }
.export-points i {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-900); color: var(--white); font-size: .9rem;
}
.export-points strong { display: block; font-size: .95rem; font-weight: 700; color: var(--green-900); margin-bottom: 2px; }
.export-points span { font-size: .8rem; color: var(--ink-2); line-height: 1.45; }
.export-copy .btn { box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s, background .25s; }
.export-copy .btn i { transition: transform .25s; }
.export-copy .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.export-copy .btn:hover i { transform: translateX(4px); }

/* Asia export map card */
.export-map-card {
  position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 0; box-shadow: var(--shadow);
}
/* title sits over the pale top of the map, as in the reference */
.export-map-card h3 {
  position: absolute; z-index: 3; top: 30px; left: 34px; right: 34px; pointer-events: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.3rem, 2.1vw, 1.9rem); line-height: 1.2; color: var(--green-900);
}
.em-map { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.em-regions text { font-family: var(--font-body); font-size: 16px; font-weight: 500; letter-spacing: .14em; fill: #8d9a8f; }
.em-regions .em-india { font-size: 17px; font-weight: 700; fill: var(--white); letter-spacing: .08em; }
.em-routes path {
  fill: none; stroke: var(--green-800); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 3 7; opacity: .85;
  animation: emFlow 20s linear infinite;
}
.em-end { fill: var(--green-900); }
.em-arrowhead { fill: var(--green-900); }
.em-leaders path { fill: none; stroke: var(--green-900); stroke-width: 1.4; opacity: .55; }
@keyframes emFlow { to { stroke-dashoffset: -200; } }
.em-dot { fill: var(--green-900); stroke: var(--white); stroke-width: 3; }
.em-ring { fill: rgba(255, 255, 255, .6); stroke: var(--green-900); stroke-width: 2; }
.em-pulse { fill: var(--green-600); opacity: .25; transform-box: fill-box; transform-origin: center; animation: emPulse 2.4s ease-out infinite; }
@keyframes emPulse { from { transform: scale(.6); opacity: .35; } to { transform: scale(2.2); opacity: 0; } }
.em-origin-label { font-family: var(--font-body); font-size: 23px; font-weight: 600; fill: var(--green-900); paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 4px; }
.em-peppers circle { fill: url(#pepperGrad); }
.em-country rect { fill: var(--white); filter: url(#pillShadow); }
.em-country image { clip-path: inset(0 round 3px); }
.em-country text { font-family: var(--font-body); font-size: 24px; font-weight: 600; fill: var(--green-900); }
.em-countries-m { display: none; }
.em-pods {
  position: absolute; left: 0; bottom: 0; z-index: 2; width: 38%; height: auto; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0% 100%, #000 35%, transparent 72%);
  mask-image: radial-gradient(ellipse 100% 100% at 0% 100%, #000 35%, transparent 72%);
}
.em-leaf { position: absolute; z-index: 0; width: 130px; height: 130px; fill: none; stroke: var(--green-600); stroke-width: 1.2; stroke-linecap: round; opacity: .16; pointer-events: none; }
.em-leaf-tr { top: 10px; right: 10px; }
.em-leaf-br { bottom: 10px; right: 10px; }
/* ===== BLOG ===== */
.blog { background: var(--cream); padding: 80px 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card {
  display: flex; flex-direction: column; background: var(--white); border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: transform .3s, box-shadow .3s;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.blog-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--beige); }
.blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.blog-card:hover .blog-img img { transform: scale(1.06); }
.blog-cat {
  position: absolute; left: 14px; top: 14px; padding: 5px 12px; border-radius: 99px;
  background: var(--green-900); color: var(--white); font-size: .72rem; font-weight: 600;
}
.blog-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.blog-body time { font-size: .76rem; color: var(--gold); font-weight: 600; margin-bottom: 8px; }
.blog-body time i { margin-right: 4px; }
.blog-body h3 { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.3; color: var(--green-900); margin-bottom: 8px; }
.blog-body h3 a:hover { color: var(--green-600); }
.blog-body p { font-size: .85rem; color: var(--ink-2); line-height: 1.6; margin-bottom: 16px; flex: 1; }
.blog-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--green-700); transition: gap .25s; }
.blog-more:hover { gap: 12px; }
/* ===== CERTIFICATIONS ===== */
.certs {
  position: relative; overflow: hidden; padding: 76px 0;
  background: linear-gradient(120deg, var(--green-900) 0%, var(--green-800) 55%, var(--green-700) 100%);
}
/* soft light on the right so the band isn't a flat block of green */
.certs::before {
  content: ""; position: absolute; right: -10%; top: -40%; width: 60%; height: 180%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 207, 138, .1), transparent);
}
.certs-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.certs-copy .title { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 16px; max-width: 540px; }
.certs-copy > p { color: rgba(255, 255, 255, .78); max-width: 460px; margin-bottom: 28px; }
.cert-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.cert-card {
  display: flex; gap: 18px; align-items: flex-start; padding: 24px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r);
  transition: background .3s, border-color .3s, transform .3s;
}
.cert-card:hover { background: rgba(255, 255, 255, .1); border-color: rgba(232, 207, 138, .45); transform: translateY(-4px); }
.cert-ic {
  flex: none; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); color: var(--green-700); font-size: 1.35rem;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 0 0 5px rgba(232, 207, 138, .45);
}
.cert-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.2; color: var(--white); }
.cert-card small { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); margin: 2px 0 8px; }
.cert-card p { font-size: .85rem; line-height: 1.55; color: rgba(255, 255, 255, .75); }
/* two-column cards get narrow on small desktops: stack the icon above the text */
@media (min-width: 901px) and (max-width: 1280px) {
  .cert-card { flex-direction: column; gap: 14px; }
}
/* Export refresh (ChatGPT brief): softer benefit cards with a gold accent on hover, gold-edged map card */
.export .title em { font-style: normal; color: #9a7425; }
.export-points li { border-radius: 18px; border-color: rgba(20, 82, 40, .1); box-shadow: 0 6px 18px rgba(11, 46, 24, .05); position: relative; overflow: hidden; }
.export-points li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); transform: scaleY(0); transition: transform .25s; }
.export-points li:hover { border-color: rgba(201, 162, 74, .45); }
.export-points li:hover::before { transform: scaleY(1); }
.export-points i { background: var(--green-100); color: var(--green-800); }
.export-map-card { border-radius: 24px; border: 1px solid rgba(201, 162, 74, .45); box-shadow: 0 24px 60px rgba(11, 46, 24, .12); }

/* Certifications refresh (ChatGPT brief): cream heading, cream medallions with a gold ring, gold line-art leaves in the corner */
.certs::after {
  content: ""; position: absolute; right: -20px; bottom: -30px; width: 260px; height: 260px; opacity: .14; pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23e8cf8a' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M112 112 C96 70 62 40 10 30'/%3E%3Cpath d='M40 36 C48 50 48 66 40 78 M70 56 C58 60 50 74 52 88 M88 80 C76 82 68 94 70 106 M30 33 C38 22 52 18 64 22 M56 46 C64 34 80 30 92 36 M78 66 C86 54 100 52 110 58'/%3E%3C/svg%3E");
}
.certs-copy .title { color: #fbf6e8; }
.certs-copy .btn-light { border: 1.5px solid var(--gold-light); }
.cert-card { border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); transition: background .22s, border-color .22s, transform .22s; }
.cert-card:hover { transform: translateY(-3px); }
.cert-ic { width: 66px; height: 66px; background: var(--cream); color: var(--green-800); box-shadow: 0 0 0 3px rgba(11, 46, 24, .6), 0 0 0 4.5px var(--gold); transition: transform .22s; }
.cert-card:hover .cert-ic { transform: scale(1.04); }
.cert-card h3 { color: #fbf6e8; }

/* certificate scans on the right of the band; click opens the full certificate in the lightbox */
.cert-frames { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; max-width: 700px; justify-self: center; width: 100%; }
.cert-frame { margin: 0; text-align: center; }
.cert-zoom {
  position: relative; display: block; width: 100%; padding: 10px; border-radius: 12px; cursor: zoom-in;
  background: var(--cream); box-shadow: inset 0 0 0 2px var(--gold), 0 24px 50px rgba(0, 0, 0, .35);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s;
}
.cert-zoom img { display: block; width: 100%; height: auto; border-radius: 4px; }
.cert-frame:nth-child(1) .cert-zoom { transform: rotate(-2deg); }
.cert-frame:nth-child(2) .cert-zoom { transform: rotate(2deg) translateY(18px); }
.cert-zoom:hover, .cert-zoom:focus-visible { transform: rotate(0) scale(1.05); box-shadow: inset 0 0 0 2px var(--gold-light), 0 30px 60px rgba(0, 0, 0, .45); }
.cert-zoom-ic {
  position: absolute; right: 18px; bottom: 18px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-900); color: var(--gold-light); font-size: .95rem; box-shadow: var(--shadow); opacity: .9; transition: transform .3s;
}
.cert-zoom:hover .cert-zoom-ic { transform: scale(1.12); }
.cert-frame figcaption { margin-top: 18px; color: var(--white); }
.cert-frame:nth-child(2) figcaption { margin-top: 36px; }
.cert-frame figcaption strong { display: block; font-family: var(--font-display); font-size: 1.15rem; color: #fbf6e8; }
.cert-frame figcaption span { font-size: .78rem; color: var(--gold-light); letter-spacing: .04em; }
/* certificates open large and scroll, so the small print stays readable */
.lightbox.is-doc { overflow-y: auto; justify-content: flex-start; padding: 60px 16px 30px; }
.lightbox.is-doc .lightbox-close { position: fixed; z-index: 1; background: rgba(5, 20, 10, .7); border-radius: 50%; }
.lightbox.is-doc img { max-height: none; width: min(92vw, 860px); max-width: none; background: var(--white); }
/* cut-out cardamom pods & leaves filling the space under the copy, resting toward the section's bottom edge */
.certs-pods {
  display: block; width: min(440px, 100%); height: auto; margin: 6px 0 -50px -14px; pointer-events: none;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .45));
}
@media (max-width: 900px) { .certs-pods { width: min(320px, 80%); margin: 0 auto -20px; } }
@media (max-width: 900px) { .cert-frames { justify-self: center; } }
@media (max-width: 480px) { .cert-frames { gap: 16px; } .cert-zoom { padding: 6px; } .cert-zoom-ic { width: 32px; height: 32px; right: 12px; bottom: 12px; } }

/* India-map gift box spotlight */
.giftbox {
  position: relative; overflow: hidden; color: var(--white); padding: 76px 0;
  /* cardamom still-life photo: plain deep green on the left behind the copy, pods & leaves on the right under the box */
  background:
    linear-gradient(90deg, rgba(6, 40, 24, .55) 0%, rgba(6, 40, 24, .25) 40%, rgba(6, 40, 24, 0) 60%),
    url("../images/site/giftbox-bg.webp") right center / cover no-repeat,
    var(--green-900);
}
.giftbox-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.giftbox .title em { font-style: normal; color: var(--gold-light); }
.giftbox-copy > p { color: rgba(255, 255, 255, .84); max-width: 480px; margin-bottom: 22px; line-height: 1.75; }
.giftbox-points { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.giftbox-points li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; font-size: .82rem; background: rgba(255, 255, 255, .08); border: 1px solid rgba(232, 207, 138, .4); }
.giftbox-points i { color: var(--gold-light); font-size: .8rem; }
.giftbox-media img { display: block; width: 100%; max-width: 560px; height: auto; margin-left: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); transform: rotate(-3deg); transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.giftbox-media:hover img { transform: rotate(0) scale(1.02); }
@media (max-width: 900px) {
  .giftbox {
    padding: 64px 0;
    background:
      linear-gradient(180deg, rgba(6, 40, 24, .82) 0%, rgba(6, 40, 24, .7) 50%, rgba(6, 40, 24, .15) 100%),
      url("../images/site/giftbox-bg.webp") 70% bottom / cover no-repeat,
      var(--green-900);
  }
  .giftbox-grid { grid-template-columns: 1fr; gap: 36px; }
  .giftbox-media img { margin: 0 auto; max-width: 440px; }
}

/* ===== WHY + TESTIMONIAL ===== */
.why { background: var(--cream); padding: 50px 0 60px; }
.why-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: end; }
.why-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.why-card { background: var(--white); border-radius: var(--r-sm); padding: 20px 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: transform .3s, box-shadow .3s; }
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.why-card .ic {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-50); color: var(--green-600); border: 1.5px solid var(--green-100); margin-bottom: 16px;
}
.why-card h3 { font-size: .86rem; font-weight: 600; color: var(--green-900); line-height: 1.35; margin-bottom: 8px; }
.why-card p { font-size: .74rem; color: var(--ink-2); line-height: 1.5; }
.testimonial { background: var(--white); border-radius: var(--r); padding: 22px 24px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.testimonial h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--green-900); margin-bottom: 12px; }
.t-slide { display: none; position: relative; padding-left: 40px; }
.t-slide.active { display: block; animation: fadeIn .4s ease; }
.t-slide > i { position: absolute; left: 0; top: 2px; color: var(--gold); font-size: 1.6rem; }
.t-slide p { font-size: .8rem; color: var(--ink-2); line-height: 1.65; margin-bottom: 12px; }
.t-slide cite { font-style: normal; font-size: .78rem; font-weight: 600; color: var(--green-900); }
.t-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: -26px; }
.t-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); color: var(--green-900); font-size: .7rem; display: grid; place-items: center; transition: background .2s, color .2s; }
.t-btn:hover { background: var(--green-50); }
.t-btn.solid { background: var(--green-600); color: var(--white); border-color: var(--green-600); }
.t-btn.solid:hover { background: var(--green-800); }

/* ===== USES ===== */
.uses { background: var(--beige); padding: 30px 0; position: relative; }
.uses-grid { display: grid; grid-template-columns: 1.35fr .8fr 1fr; gap: 24px; align-items: center; }
.uses-left .title { margin-bottom: 2px; }
.uses-sub { font-size: .85rem; color: var(--ink-2); margin-bottom: 18px; }
.use-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.use-card { background: var(--white); border-radius: var(--r-sm); padding: 16px 10px; text-align: center; box-shadow: var(--shadow-sm); }
.use-card i { font-size: 1.6rem; color: var(--green-600); margin-bottom: 10px; }
.use-card h3 { font-size: .74rem; font-weight: 600; color: var(--green-900); margin-bottom: 4px; }
.use-card p { font-size: .66rem; color: var(--ink-2); line-height: 1.45; }
.uses-bowl { position: relative; align-self: stretch; min-height: 220px; }
.uses-bowl img {
  position: absolute; inset: -10px -10px; width: calc(100% + 20px); height: calc(100% + 20px); object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 52%, #000 62%, transparent 72%);
          mask-image: radial-gradient(ellipse 60% 58% at 50% 52%, #000 62%, transparent 72%);
}
.recipe-card {
  position: relative; min-height: 210px; border-radius: var(--r); overflow: hidden; color: var(--white);
  background:
    linear-gradient(90deg, rgba(58, 30, 12, .95) 0%, rgba(58, 30, 12, .75) 50%, rgba(58, 30, 12, .15) 100%),
    url("../images/site/recipe-tea.webp") right center / cover no-repeat;
  display: flex; align-items: center; box-shadow: var(--shadow);
}
.recipe-text { padding: 22px 24px; max-width: 230px; }
.recipe-tag { color: var(--gold-light); font-size: .74rem; font-weight: 600; }
.recipe-text h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; margin-bottom: 6px; }
.recipe-text p { font-size: .74rem; color: rgba(255, 255, 255, .85); margin-bottom: 14px; line-height: 1.5; }

/* Why / Uses / Benefits refresh (ChatGPT brief) */
.why { padding: 70px 0 76px; }
.why-card { border-radius: 18px; background: #fffefa; border-color: rgba(20, 82, 40, .1); padding: 22px 18px; }
.why-card:hover { transform: translateY(-2px); border-color: rgba(201, 162, 74, .5); }
.why-card .ic { width: 46px; height: 46px; border: 0; background: var(--green-100); color: var(--green-800); font-size: 1rem; }
.why-card h3 { font-size: .92rem; }
.why-card p { font-size: .78rem; }
.testimonial { border-radius: 22px; background: #fffefa; border-color: rgba(201, 162, 74, .35); padding: 26px 26px 22px; }
.t-slide > i { font-size: 2rem; }
.t-slide cite { display: block; padding-top: 10px; border-top: 1px solid rgba(201, 162, 74, .4); max-width: 60%; }
.t-btn.solid { background: var(--green-800); border-color: var(--green-800); }

/* ===== GOOGLE REVIEWS (live from Google via script.js; Admin → Google reviews cards as backup) ===== */
.reviews { background: #fffefa; }
.reviews[hidden] { display: none; }
.reviews .title.center { margin-bottom: 14px; }
/* the Shapo widget shows by default; our own cards (Admin → Google reviews) only if it doesn't load (script.js) */
.reviews.has-widget .rv-own, .reviews:not(.has-widget) .rv-shapo { display: none; }
.rv-shapo { margin-top: 18px; min-height: 120px; }
.rv-summary { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 36px; }
.rv-score { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--green-900); line-height: 1; }
.rv-summary .rv-stars { font-size: 1.05rem; margin: 0; }
.rv-source { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; color: var(--ink-2); }
.rv-source .fa-google, .rv-g { color: #4285f4; }
.rv-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 20px) / 3); column-gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  padding: 6px 2px 14px; scrollbar-width: none;
  /* matches the 2px side padding: without it the browser snaps the track 2px on load, and Chrome treats that
     scroll as the visitor scrolling, stops measuring LCP, and PageSpeed reports NO_LCP */
  scroll-padding-inline: 2px;
}
.rv-track::-webkit-scrollbar { display: none; }
.rv-card {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 20px;
  background: var(--white); border: 1px solid rgba(201, 162, 74, .35); border-radius: 20px; box-shadow: var(--shadow-sm);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.rv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(201, 162, 74, .6); }
.rv-head { display: flex; align-items: center; gap: 12px; }
.rv-avatar {
  position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--green-100); color: var(--green-800); font-weight: 700; font-size: 1.05rem;
}
.rv-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.rv-name { font-weight: 700; font-size: .92rem; color: var(--green-900); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.rv-name:hover { text-decoration: underline; }
.rv-who small { font-size: .74rem; color: var(--ink-3); }
.rv-g { font-size: 1.1rem; flex: none; }
.rv-stars { display: flex; gap: 3px; color: #f4b400; font-size: .85rem; }
.rv-text { font-size: .88rem; line-height: 1.65; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rv-more { margin-top: auto; font-size: .78rem; font-weight: 600; color: var(--green-700); text-decoration: none; }
.rv-more:hover { text-decoration: underline; }
.rv-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.rv-nav[hidden] { display: none; }
.rv-arrow {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem;
  border: 1px solid var(--line); color: var(--green-900); background: var(--white); transition: background .2s, color .2s, opacity .2s;
}
.rv-arrow:hover:not(:disabled) { background: var(--green-800); color: var(--white); border-color: var(--green-800); }
.rv-arrow:disabled { opacity: .35; cursor: default; }
.rv-dots { display: flex; gap: 8px; }
.rv-dot { width: 8px; height: 8px; border-radius: 99px; background: rgba(15, 61, 32, .2); transition: width .25s, background .25s; }
.rv-dot.active { width: 24px; background: var(--gold); }
.rv-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* Read more / less: the clamp lifts on the opened card only; while one is open the others keep their own height */
.rv-track:has(.rv-card.is-open) { align-items: start; }
.rv-who time { font-size: .74rem; color: var(--ink-3); }
.rv-card.is-open .rv-text { -webkit-line-clamp: unset; display: block; overflow: visible; }
.rv-toggle {
  align-self: flex-start; margin-top: -4px; padding: 2px 0; background: none; border: 0; cursor: pointer;
  font-size: .8rem; font-weight: 700; color: var(--green-700); text-decoration: underline; text-underline-offset: 3px;
}
.rv-toggle[hidden] { display: none; }
.rv-toggle:hover { color: var(--gold); }
.rv-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 980px) { .rv-track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 600px) {
  .rv-track { grid-auto-columns: 100%; column-gap: 14px; }
  .rv-card { padding: 18px 18px 16px; }
  .rv-actions .btn { flex: 1 1 100%; justify-content: center; }
}

.uses { padding: 56px 0; }
.use-card { border-radius: 16px; background: #fffefa; border: 1px solid rgba(20, 82, 40, .08); border-top: 3px solid var(--gold); transition: background .25s, transform .25s; }
.use-card:hover { background: var(--white); transform: translateY(-2px); }
.use-card i { transition: transform .25s; color: var(--green-700); }
.use-card:hover i { transform: none; }
.uses-bowl img { filter: drop-shadow(0 18px 22px rgba(20, 82, 40, .18)); }
.recipe-card { border-radius: 20px; isolation: isolate; }
.recipe-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: inherit; transition: transform .6s; }
.recipe-card:hover::before { transform: scale(1.03); }
.recipe-tag { letter-spacing: .1em; text-transform: uppercase; font-size: .68rem; }
.recipe-text h3 { font-size: 1.6rem; }

.benefits { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, var(--green-700) 0%, var(--green-800) 45%, var(--green-900) 100%); }
.benefits::before, .benefits::after {
  content: ""; position: absolute; width: 220px; height: 220px; opacity: .12; pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23e8cf8a' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M112 112 C96 70 62 40 10 30'/%3E%3Cpath d='M40 36 C48 50 48 66 40 78 M70 56 C58 60 50 74 52 88 M88 80 C76 82 68 94 70 106 M30 33 C38 22 52 18 64 22 M56 46 C64 34 80 30 92 36 M78 66 C86 54 100 52 110 58'/%3E%3C/svg%3E");
}
.benefits::before { left: -30px; top: -30px; transform: rotate(180deg); }
.benefits::after { right: -30px; bottom: -30px; }
.benefits .container { position: relative; z-index: 1; }
.benefits-img { border: 2px solid var(--gold); padding: 8px; background: var(--green-900); outline: 1.5px solid rgba(250, 247, 239, .55); outline-offset: -12px; box-shadow: 0 0 60px rgba(232, 207, 138, .15), var(--shadow-lg); }
.benefits-img img { border-radius: 50%; }
.benefit { transition: transform .25s; }
.benefit:hover { transform: translateX(4px); }
.benefit-list:first-child .benefit:hover { transform: translateX(-4px); }
@media (min-width: 1101px) {
  .benefit-list .benefit { position: relative; }
  .benefit-list:first-child .benefit::after, .benefit-list:last-child .benefit::after {
    content: ""; position: absolute; top: 22px; width: 26px; border-top: 1px dashed rgba(232, 207, 138, .5);
  }
  .benefit-list:first-child .benefit::after { right: -32px; }
  .benefit-list:last-child .benefit::after { left: -32px; }
}

/* Gallery / Blog refresh (ChatGPT brief) */
.gallery-item { border-radius: 20px; }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.025); }
.g-cap { background: rgba(250, 247, 239, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .3s; }
.gallery-item:hover .g-cap { transform: translateY(-2px); }
.gallery-features { border-radius: 18px; border-top: 2px solid var(--gold); }
.gallery-features span { background: #fffefa; color: var(--green-800); }
.blog-card { border-radius: 20px; background: #fffefa; border-color: rgba(20, 82, 40, .08); }
.blog-card:hover { transform: translateY(-3px); }
.blog-card:hover .blog-img img { transform: scale(1.035); }
.blog-cat { left: 16px; top: 16px; }
.blog-body time { color: var(--ink-2); font-weight: 500; }
.blog-body time i { color: var(--gold); }
.blog-body h3 { font-size: 1.32rem; }
.blog-more { padding-top: 12px; border-top: 1px solid rgba(201, 162, 74, .3); align-self: stretch; }

/* ===== CTA ===== */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(90deg, var(--green-700), var(--green-600) 50%, var(--green-700)); color: var(--white); padding: 26px 0; }
.cta-inner { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: 60px; flex-wrap: wrap; }
.cta-band h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; line-height: 1.2; }
.cta-band p { font-size: .82rem; color: rgba(255, 255, 255, .85); }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ===== CONTACT ===== */
.contact { background: var(--cream); padding: 50px 0 60px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: stretch; }
.contact-sub { font-size: .82rem; color: var(--ink-2); margin: -8px 0 16px; }
.info-list { display: flex; flex-direction: column; gap: 8px; }
.info-list li { display: flex; gap: 12px; align-items: center; background: var(--white); border-radius: var(--r-sm); padding: 10px 14px; box-shadow: var(--shadow-sm); }
.info-list .ic { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--green-600); color: var(--white); font-size: .8rem; }
.info-list strong { display: block; font-size: .8rem; color: var(--green-900); line-height: 1.3; }
.info-list span, .info-list a { font-size: .76rem; color: var(--ink-2); line-height: 1.5; }
.info-list a:hover { color: var(--green-600); }
.map-card { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); min-height: 320px; background: var(--beige); }
.map-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.embed-frame { border: 0; display: block; }
.map-link {
  position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); color: var(--green-900); padding: 9px 16px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; box-shadow: var(--shadow);
}
.map-link:hover { color: var(--green-600); }
/* ===== FOOTER ===== */
.footer { position: relative; color: rgba(255, 255, 255, .78); font-size: .88rem; }
.footer-main { position: relative; overflow: hidden; background: var(--green-900); padding: 60px 0 56px; }
.footer-main::after {
  content: ""; position: absolute; right: -60px; top: 20px; width: 360px; height: 360px; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .05), transparent 70%);
}
/* bowl photo fades into the green from the bottom-left corner */
.footer-bowl {
  position: absolute; left: 0; bottom: 0; width: 40%; max-width: 680px; height: auto; pointer-events: none;
  filter: brightness(1.12) saturate(1.15);
  -webkit-mask-image: radial-gradient(ellipse 75% 110% at 40% 100%, #000 55%, transparent 80%);
  mask-image: radial-gradient(ellipse 75% 110% at 40% 100%, #000 55%, transparent 80%);
}
.footer-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr .8fr 1fr 1.35fr; gap: 44px; }
.footer-brand { padding-bottom: 220px; }
.footer-logo { height: 64px; width: auto; margin-bottom: 20px; }
.footer-brand p { max-width: 330px; margin-bottom: 22px; line-height: 1.7; }
.social-links { display: flex; gap: 12px; }
.social-links a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(255, 255, 255, .5); color: var(--white); font-size: .9rem; transition: background .25s, color .25s, border-color .25s;
}
.social-links a:hover { background: var(--gold); border-color: var(--gold); color: var(--green-900); }
.footer-col h4 {
  position: relative; font-family: var(--font-display); color: var(--gold-light); font-size: 1.25rem; font-weight: 600;
  padding-bottom: 12px; margin-bottom: 20px;
}
.footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--gold); }
.footer-links li { margin-bottom: 10px; }
.footer-links a { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .85); transition: color .2s, gap .2s; }
.footer-links i { font-size: .6rem; }
.footer-links a:hover { color: var(--gold-light); gap: 14px; }
.footer-products li + li { margin-top: 12px; }
.footer-products a { display: flex; align-items: center; gap: 14px; }
.footer-products img { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .85); }
.footer-products strong { display: block; color: var(--white); font-weight: 600; font-size: .92rem; line-height: 1.3; }
.footer-products small { font-size: .76rem; color: rgba(255, 255, 255, .7); }
.footer-products a:hover strong { color: var(--gold-light); }
.footer-contact li { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.footer-contact a, .footer-contact span { color: rgba(255, 255, 255, .88); }
.footer-contact a:hover { color: var(--gold-light); }
.fc-ic {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .1); color: var(--white) !important; font-size: .9rem;
}
.newsletter { margin-top: 24px; padding: 20px; border-radius: var(--r); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08); }
.nl-head { display: flex; gap: 14px; margin-bottom: 16px; }
.nl-ic {
  flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: var(--gold-light); font-size: 1.1rem;
}
.nl-head h5 { font-family: var(--font-display); font-size: 1.05rem; color: var(--white); margin-bottom: 4px; }
.nl-head p { font-size: .78rem; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.nl-field { display: flex; align-items: center; background: var(--white); border-radius: 99px; padding: 4px 4px 4px 18px; }
.nl-field input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: .84rem; color: var(--ink); padding: 8px 0; }
.nl-field button {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-900); color: var(--white); transition: background .25s;
}
.nl-field button:hover { background: var(--green-600); }
.nl-field.invalid { box-shadow: 0 0 0 2px #e25b45; }
.nl-status { font-size: .78rem; color: rgba(255, 255, 255, .8); margin-top: 8px; }
.nl-status:empty { display: none; }
.footer-features { background: var(--cream); padding: 26px 0; }
.footer-features ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.footer-features li { display: flex; align-items: center; gap: 16px; padding: 4px 22px; }
.footer-features li + li { border-left: 1px solid rgba(15, 61, 34, .15); }
.footer-features span {
  flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-100); color: var(--green-900); font-size: 1.3rem;
}
.footer-features strong { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--green-900); }
.footer-features small { font-size: .8rem; color: var(--ink-2); }
.footer-bottom { background: var(--green-900); padding: 22px 0; font-size: .84rem; }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-bottom .sep { margin: 0 10px; opacity: .5; }
.footer-bottom a:hover { color: var(--gold-light); }

/* ===== FLOATING ===== */
.fab-whatsapp {
  position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; background: var(--whatsapp); color: var(--white); font-size: 1.7rem;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .45); transition: transform .25s;
}
.fab-whatsapp:hover { transform: scale(1.08); }
.back-top {
  position: fixed; right: 27px; bottom: 88px; z-index: 900; width: 44px; height: 44px; border-radius: 50%;
  background: var(--green-900); color: var(--white); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .3s, visibility .3s;
}
.back-top.visible { opacity: 1; visibility: visible; transform: none; }

/* ===== REVEAL (only when JS runs) ===== */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.visible { opacity: 1; transform: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* FAQ / CTA / Contact / Footer refresh (ChatGPT brief) */
/* fade spans the full section height so there are no unfaded strips top/bottom */
.faq::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(250, 247, 239, .78), rgba(250, 247, 239, .55) 36%, rgba(250, 247, 239, 0) 48%);
}
.faq-grid { position: relative; z-index: 1; }
.faq { overflow: hidden; }
.faq-points { background: rgba(250, 247, 239, .92); border: 1px solid rgba(201, 162, 74, .3); border-radius: 18px; }
.faq-item { border-radius: 18px; background: rgba(255, 254, 250, .95); border-color: rgba(20, 82, 40, .1); position: relative; overflow: hidden; }
.faq-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); transform: scaleY(0); transition: transform .3s; }
.faq-item[open]::before { transform: scaleY(1); }
.faq-item summary::after { background: var(--green-100); }
.faq-item[open] summary::after { background: var(--green-800); }

.cta-band { background: linear-gradient(90deg, var(--green-900), var(--green-800) 50%, var(--green-900)); padding: 32px 0; border-top: 2px solid var(--gold); }
.cta-band h2 { color: #fbf6e8; font-size: 1.85rem; }
.cta-band p { color: rgba(251, 246, 232, .78); }
.cta-actions .btn i { transition: transform .25s; }
.cta-actions .btn:hover i { transform: none; }

.info-list { gap: 0; background: #fffefa; border: 1px solid rgba(201, 162, 74, .3); border-radius: 20px; box-shadow: var(--shadow-sm); overflow: hidden; }
.info-list li { background: transparent; border-radius: 0; box-shadow: none; padding: 14px 18px; }
.info-list li + li { border-top: 1px solid rgba(20, 82, 40, .08); }
.info-list .ic { width: 44px; height: 44px; background: var(--green-100); color: var(--green-800); font-size: .9rem; }
.info-list strong { font-size: .86rem; }
.info-list span, .info-list a { font-size: .8rem; }
.map-card { border-radius: 22px; border: 1px solid rgba(201, 162, 74, .35); }

.footer-main { border-top: 2px solid var(--gold); }
.fc-ic { box-shadow: inset 0 0 0 1px rgba(232, 207, 138, .45); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1180px) {
  .products-carousel { --per-view: 3; }
  .process-carousel { --per-view: 3; }
  .order-steps { grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
  .order-step:nth-child(3n)::after { display: none; }
  .export { padding: 68px 0; }
  .export-grid { grid-template-columns: 1fr; gap: 44px; }
  .export-map-card { max-width: 760px; width: 100%; margin: 0 auto; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .uses-grid { grid-template-columns: 1fr 1fr; }
  .uses-left { grid-column: 1 / -1; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .contact-info { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { padding-bottom: 0; }
  .footer-bowl { display: none; }
  .footer-features ul { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .footer-features li:nth-child(3) { border-left: 0; }

  /* 9 nav links no longer fit beside the logo + CTA, so switch to the hamburger here */
  .hamburger { display: block; margin-left: auto; }
  .nav-cta { display: none; }
  nav { flex: 0 0 auto; }
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); padding: 10px var(--gutter) 22px; box-shadow: var(--shadow);
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
    transform: translateY(-10px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s;
  }
  .nav-links.open { transform: none; opacity: 1; visibility: visible; }
  .nav-links a:not(.btn) { padding: 13px 4px; border-bottom: 1px solid var(--line); }
  .nav-links a:not(.btn)::after { display: none; }
  .nav-cta-mobile { display: block; margin-top: 14px; }
  .nav-cta-mobile .btn { width: 100%; }
}

@media (max-width: 900px) {
  :root { --nav-h: 84px; }
  .brand-logo { height: 54px; }
  .brand-emblem { height: 56px; }
  .brand-word { height: 29px; }
  .brand-tag { font-size: 7px; }
  .brand-full { height: 72px; }
  .section { padding: 52px 0; }
  .products-carousel { --per-view: 2; }
  .process-carousel { --per-view: 2; }

  .hero { min-height: 0; }
  /* text on solid cream; the photo fills only the strip below it (the hero's bottom padding) */
  .hero-bg { background:
    linear-gradient(180deg, var(--cream) 0, var(--cream) calc(100% - 330px), rgba(250, 247, 239, 0) calc(100% - 220px)),
    var(--img) 68% 100% / auto 360px no-repeat,
    var(--cream); }
  /* the photo is only 360px tall here, so phones get the 1200px-wide copies (less than half the download) */
  .hero-bg--1 { --img: url("../images/hero/hero-1-grow-m.webp"); }
  .hero-slider.is-ready .hero-bg--2 { --img: url("../images/hero/hero-2-harvest-m.webp"); }
  .hero-slider.is-ready .hero-bg--3 { --img: url("../images/hero/hero-3-sort-m.webp"); }
  .hero-slider.is-ready .hero-bg--4 { --img: url("../images/hero/hero-4-pack-m.webp"); }
  .hero-slider.is-ready .hero-bg--5 { --img: url("../images/hero/hero-5-ship-m.webp"); }
  .hero-slider .hero-bg.is-active { animation: hero-curtain .9s cubic-bezier(.77, 0, .18, 1) both; }
  .hero-inner { padding-bottom: 260px; }
  .hero-badge { position: absolute; top: auto; right: auto; left: 24px; bottom: 28px; }
  .hero-features { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .hero-features li:nth-child(3) { border-left: 0; }

  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-collage { height: 360px; }
  .estates-inner { grid-template-columns: 1fr; }
  .certs { padding: 64px 0; }
  .certs-inner { grid-template-columns: 1fr; gap: 36px; }
  .stats-card { grid-template-columns: repeat(2, 1fr); row-gap: 16px; width: 100%; }
  .stats-card div:nth-child(3) { border-left: 0; }
  .why-cards { grid-template-columns: repeat(2, 1fr); }
  .use-cards { grid-template-columns: repeat(2, 1fr); }
  .order-steps { grid-template-columns: repeat(2, 1fr); }
  .order-steps { gap: 28px 22px; }
  .order-step:not(:last-child)::after { display: none; }
  .gallery-grid {
    grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 200px);
    grid-template-areas: "a b" "a c" "h d" "h e" "f f";
  }
  .gallery-features { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .gallery-features li:nth-child(3) { border-left: 0; }
  .packaging-grid, .faq-grid { grid-template-columns: 1fr; gap: 36px; }
  .prices-grid { grid-template-columns: 1fr; max-width: 560px; }
  .prices-mascot { width: 150px; }
  .faq { padding: 56px 0; background-image: linear-gradient(rgba(240, 244, 232, .6), rgba(240, 244, 232, .6)), url("../images/site/faq-bg.webp"); }
  .faq::before { display: none; }
  .packaging-media img { height: 340px; }
  .packaging-note { right: 14px; }
  .benefits-grid { grid-template-columns: 1fr 1fr; }
  .benefits-img { grid-column: 1 / -1; grid-row: 1; width: 240px; margin: 0 auto 10px; }
  .benefit-list:first-child .benefit { flex-direction: row; text-align: left; }
}

@media (max-width: 640px) {
  .hide-sm, .topbar .hide-sm { display: none; }   /* .topbar a's tap-target display rule would otherwise win */
  .topbar-inner { justify-content: space-between; }
  .brand-logo { height: 46px; }
  .brand-emblem { height: 48px; }
  .brand-full { height: 68px; }
  .brand-badge { padding: 3px 8px; border-radius: 12px; }
  .brand-word { height: 25px; }
  .brand-text { gap: 3px; }
  .brand-tag { font-size: 6.4px; letter-spacing: .04em; }
  .hero-actions .btn { flex: 1 1 100%; }
  .page-hero-inner { padding-top: 52px; padding-bottom: 52px; }
  .about-collage { height: 300px; gap: 10px; }
  .about-features { grid-template-columns: repeat(2, 1fr); }
  .products-carousel { --per-view: 1.6; --gap: 14px; }
  .carousel-btn { width: 40px; height: 40px; }
  .process-carousel { --per-view: 1.6; --gap: 14px; }
  .step::after { display: none; }
  .ribbon-inner { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 26px; scrollbar-width: none; }
  .ribbon-inner::-webkit-scrollbar { display: none; }
  .certs { padding: 52px 0; }
  .cert-grid { grid-template-columns: 1fr; gap: 12px; }
  .cert-card { padding: 18px; gap: 14px; }
  .cert-ic { width: 50px; height: 50px; font-size: 1.1rem; }
  .cta-band h2 { font-size: 1.4rem; }
  .order-steps { grid-template-columns: 1fr; }
  .order-cta .btn { flex: 1 1 100%; }
  .gallery-grid { grid-template-rows: repeat(5, 160px); gap: 10px; }
  .g-cap { left: 8px; bottom: 8px; max-width: calc(100% - 16px); font-size: .68rem; padding: 6px 10px; }
  .g-cap i { display: none; }
  .gallery-features { grid-template-columns: 1fr; }
  .gallery-features li + li { border-left: 0; border-top: 1px solid rgba(15, 61, 34, .15); padding-top: 14px; }
  .packaging-media img { height: 260px; }
  .pack-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .benefits-grid { grid-template-columns: 1fr; gap: 22px; }
  .benefits-img { width: 200px; }
  .faq-actions .btn { flex: 1 1 auto; }
  .faq-points li { padding: 0 6px; }
  .faq-points strong { font-size: .74rem; }
  .faq-item summary { gap: 12px; padding: 14px; font-size: .88rem; }
  .faq-ic { width: 38px; height: 38px; font-size: .9rem; }
  .export { padding: 52px 0; }
  .export-points { grid-template-columns: 1fr; }
  .export-map-card { padding: 0 0 16px; }
  /* title above the map, on the map's own land colour and fading into it, so it reads as part of the map like on desktop */
  .export-map-card { background: linear-gradient(#e4ecdd 0, #e4ecdd 110px, var(--white) 170px); }
  .export-map-card h3 { position: static; margin: 0; padding: 20px 18px 6px; }
  .em-map { margin-top: 0; }
  .em-origin-label { font-size: 34px; }
  .em-leaf, .em-reg-wide { display: none; }
  /* the map shrinks to about a third: swap in the bigger country labels and enlarge the region names */
  .em-countries { display: none; }
  .em-countries.em-countries-m { display: inline; }
  .em-countries-m text { font-size: 38px; }
  .em-regions text { font-size: 30px; letter-spacing: .1em; }
  .em-regions .em-india { font-size: 30px; }
  .em-regions .em-aus { transform: translateX(-70px); }   /* bigger text would run off the right edge */
  .blog-grid { grid-template-columns: 1fr; }
  .price-card { padding: 18px; }
  .price-table td { padding: 11px 8px; font-size: .86rem; }
  .prices-cta .btn { flex: 1 1 100%; }
  .why-cards { grid-template-columns: 1fr 1fr; }
  .uses-grid { grid-template-columns: 1fr; }
  .uses-bowl { min-height: 200px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }   /* minmax: lets the column shrink to 320px phones */
  .footer-main { padding: 50px 0 40px; }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .footer-features ul { grid-template-columns: 1fr; }
  .footer-features li { padding: 4px 0; }
  .footer-features li + li { border-left: 0; }
  .footer-bottom .container { justify-content: center; text-align: center; }
  .cta-inner { gap: 18px; text-align: center; }
  .cta-actions { justify-content: center; width: 100%; }
  .cta-actions .btn { flex: 1 1 100%; max-width: 320px; }
  .t-btn { width: 40px; height: 40px; }
  .t-nav { margin-top: 8px; }
  .hero-inner { padding-bottom: 230px; }
  .hero-badge { left: 16px; bottom: 20px; width: 96px; height: 96px; }
  .hero-badge strong { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ===== PHONE & TABLET POLISH (mobile audit, Oct 2026) =====
   Readable minimum text sizes, finger-sized tap targets (~40px), nothing cut off. */
@media (max-width: 900px) {
  /* ribbon under the hero: all six points visible in two columns instead of a hidden sideways scroll */
  .ribbon-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; overflow: visible; }
  .ribbon span { white-space: normal; font-size: .82rem; line-height: 1.35; display: flex; align-items: flex-start; }
  .ribbon i { margin-top: 3px; }

  /* small labels up to a readable size */
  .hero-badge span { font-size: .68rem; }
  .sack-pills li { font-size: .76rem; }
  .use-card h3 { font-size: .82rem; }
  .use-card p { font-size: .76rem; }
  .faq-points strong { font-size: .86rem; }
  .faq-points small { font-size: .78rem; }

  /* tap targets */
  .topbar a, .breadcrumb a { display: inline-flex; align-items: center; min-height: 36px; }
  .footer-links li { margin-bottom: 0; }
  .footer-links a { min-height: 40px; }
  .footer-contact a { display: inline-block; padding: 8px 0; }
  .footer-bottom a { display: inline-block; padding: 8px 4px; }
  .carousel-dots button { width: 26px; height: 40px; }
  .carousel-dots button.active { width: 40px; }
  .t-btn { width: 44px; height: 44px; }
  .info-list a { display: inline-block; padding: 9px 0; }
  .hero-badge span { font-size: .72rem; }
  .sack-ribbon { font-size: .74rem; }
  .price-card small, [data-edit="index-141"], [data-edit="index-157"] { font-size: .74rem; }
  .g-cap { font-size: .76rem; }
}
@media (max-width: 640px) {
  /* FAQ points: one per row instead of three squeezed columns */
  .faq-points { flex-direction: column; align-items: stretch; gap: 0; }
  .faq-points li { display: grid; grid-template-columns: 50px 1fr; column-gap: 14px; align-items: center; text-align: left; padding: 12px 4px; }
  .faq-points li > span { grid-row: span 2; margin: 0; }
  .faq-points li strong { align-self: end; }
  .faq-points li small { align-self: start; }
  .faq-points li + li { border-left: 0; border-top: 1px solid rgba(15, 61, 34, .15); }
  /* room at the very bottom so the floating WhatsApp / back-to-top buttons never cover the copyright line */
  .footer-bottom { padding-bottom: 96px; }
}

/* ===== RESPONSIVE FINE-TUNING (full 320–1920px audit, Oct 2026) ===== */
/* tablet & small laptop: the contact block spans the row, so the map does too (it sat alone in half the row) */
@media (max-width: 1180px) {
  .map-card { grid-column: 1 / -1; min-height: 360px; }
}
/* tablet: domestic and export price cards side by side instead of one narrow centred column */
@media (min-width: 700px) and (max-width: 900px) {
  .prices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 18px; }
  .prices-mascot { grid-column: 1 / -1; order: -1; }   /* two cards side by side: mascot on its own row above them */
  .price-card { padding: 20px; }
}
/* tablet: gallery tiles get narrow, so the caption drops its icon and padding instead of spilling */
@media (max-width: 1023px) {
  .g-cap { gap: 6px; padding: 6px 10px; }
  .g-cap i { display: none; }
}
/* smallest phones (320–400px): the top bar's phone number and language picker share one line */
@media (max-width: 400px) {
  .topbar-left, .topbar-right { gap: 12px; }
  .topbar i { margin-right: 4px; }
  .topbar { font-size: .74rem; }
}