/* Self-hosted so first paint never waits on a third party. Latin subsets: the six
   characters the site uses that Plus Jakarta Sans has never carried (≤ ≥ ≈ → ⁴ ⁵)
   fall back exactly as they did when the fonts came from Google. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/jakarta-300.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/jakarta-400.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/jakarta-500.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/jakarta-600.woff2) format("woff2")}
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/dmserif-400.woff2) format("woff2")}

/* Metric-matched stand-ins. Swapping a webfont in over a fallback of a different width
   re-wraps the text and scores as layout shift; these give the stand-in the same average
   advance AND the same line box as the real face, so the swap moves nothing.

   size-adjust is solved from the measured width ratio of the real face to the stand-in
   over a corpus of the site's own headings and body copy; the ascent and descent
   overrides are then scaled to reproduce the real face's line box at that adjusted em.
   The serif figure was previously tuned on vertical metrics alone, which held the line
   height but left the stand-in 8.5% narrow — long headings wrapped to a different number
   of lines and the whole page moved when the webfont arrived.

   Each src lists the metric clones alongside the originals: Liberation Sans and Arimo
   carry Arial's metrics, Liberation Serif and Tinos carry Times New Roman's, so the
   match still holds on Linux and Android, where the originals are absent. Times leads
   the serif list rather than Georgia because these figures are Times metrics. */
@font-face{font-family:"Jakarta Fallback";
  src:local("Arial"),local("Liberation Sans"),local("Arimo"),local("Helvetica Neue"),local("Helvetica");
  size-adjust:104.2%;ascent-override:99.7%;descent-override:21.3%;line-gap-override:0%}
@font-face{font-family:"DM Serif Fallback";
  src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Times");
  size-adjust:109.0%;ascent-override:95.8%;descent-override:30.9%;line-gap-override:0%}

/* ==========================================================================
   Vimovi Enterprises Pvt Ltd — B2B spice export
   Palette derived from the Vimovi wordmark (#243B1E green, #8F6531 gold)
   ========================================================================== */

:root{
  --green-900:#12210E;
  --green-800:#1A2E15;
  --green-700:#243B1E;   /* logo green — primary */
  --green-600:#2E5D3B;   /* group green */
  --green-300:#7E9070;
  --gold:#8A6130;
  --gold-400:#B98F52;
  --gold-100:#E9DCC6;
  --cream:#FAF7F0;
  --cream-warm:#E8DDC4;   /* text on dark grounds, per zoemexports */
  --btn-bg:#38714B;       /* one button colour, reads the same on cream and on dark */
  --btn-bg-hover:#2E5D3B;
  --btn-fg:#F4EFE2;
  --sand:#F2ECE0;
  --sand-2:#EAE2D2;
  --line:#DED5C3;
  --ink:#1C1F1A;
  --muted:#65695E;

  --ff-display:"DM Serif Display","DM Serif Fallback","Iowan Old Style",Georgia,"Times New Roman",serif;
  --ff-body:"Plus Jakarta Sans","Jakarta Fallback","Helvetica Neue",Arial,system-ui,sans-serif;

  --wrap:1200px;
  --measure:760px;
  --gut:clamp(20px,5vw,56px);
  --r:2px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--ff-body);font-size:17px;line-height:1.62;
  font-weight:300;letter-spacing:.005em;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:400;line-height:1.15;letter-spacing:-.01em;
  margin:0 0 .34em;text-wrap:balance}
h1{font-size:clamp(2.5rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.85rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
h4,h3.mini,.f-head{font-size:1.02rem;font-family:var(--ff-body);font-weight:600;letter-spacing:.005em;
  line-height:1.4;margin-bottom:.7em;text-wrap:initial}
p{margin:0 0 1.05em;max-width:var(--measure)}
.lead{font-size:clamp(1.12rem,1.5vw,1.4rem);line-height:1.36;letter-spacing:.005em;
  font-weight:300;color:#31352C;max-width:var(--measure)}
.muted{color:var(--muted)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:calc(var(--measure) + var(--gut) * 2);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- eyebrow / rules ---------- */
.eyebrow{
  font-size:.7rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1.15rem;display:flex;align-items:center;gap:.85rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:120px}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{display:none}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(250,247,240,.975);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;
  max-width:var(--wrap);margin-inline:auto;padding:.85rem var(--gut)}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{height:46px;width:auto;display:block}
@media(max-width:520px){.brand img{height:38px}}
/* seven nav items plus the CTA do not fit a 1120px header at a fixed 1.7rem gap,
   so the rhythm tightens with the viewport instead of overflowing */
.nav{display:flex;align-items:center;gap:clamp(.62rem,.95vw,1.7rem)}
.nav>a{flex:0 0 auto}
.nav a{
  text-decoration:none;font-size:clamp(.76rem,.63vw,.82rem);font-weight:500;
  letter-spacing:clamp(.05em,.06vw,.08em);
  text-transform:uppercase;color:#2A2E27;padding:.4rem 0;border-bottom:1px solid transparent;
  transition:color .18s,border-color .18s;white-space:nowrap;
}
.nav a:hover{color:var(--green-700);border-bottom-color:var(--gold)}
.nav a[aria-current="page"]{color:var(--green-700);border-bottom-color:var(--green-700)}
.nav a.nav-cta{padding-inline:clamp(.8rem,1.05vw,1.7rem)}
.nav a.nav-cta,.nav-cta{
  display:inline-block;text-decoration:none;background:var(--btn-bg);color:var(--btn-fg);
  padding:.85rem 1.7rem;font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border-radius:var(--r);border:1px solid var(--btn-bg);line-height:1.62;
  transition:background .18s,border-color .18s;
}
.nav a.nav-cta:hover,.nav-cta:hover{
  background:var(--btn-bg-hover);border-color:var(--btn-bg-hover);color:var(--btn-fg)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);
  padding:.5rem .7rem;cursor:pointer;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}

/* seven items plus the CTA stop fitting a one-line header below ~1150px, so the
   menu collapses there rather than being squeezed until it overflows */
@media(max-width:1010px){
  .nav-toggle{display:block}
  .nav{
    position:absolute;top:100%;left:0;right:0;background:var(--cream);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    gap:0;padding:.5rem var(--gut) 1.5rem;display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:.85rem 0;border-bottom:1px solid var(--line)}
  .nav-cta{margin-top:1rem;text-align:center}
}

/* Form controls do not inherit the page font, so a <button class="btn"> was rendering
   in the UA default beside an identically styled <a class="btn"> in Plus Jakarta Sans.
   Family only - sizes stay wherever each control already set them. */
button,input,select,textarea{font-family:inherit}

/* ---------- buttons ---------- */
.btn,.btn-ghost,.btn-light{
  display:inline-block;text-decoration:none;padding:.85rem 1.7rem;border-radius:var(--r);
  font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--btn-bg);background:var(--btn-bg);color:var(--btn-fg);
  cursor:pointer;transition:background .18s,border-color .18s;
}
.btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-bg-hover);color:var(--btn-fg)}
/* Secondary. One filled button and one outlined reads as a hierarchy; two filled
   buttons read as indecision, which is what the site had. */
.btn-ghost{background:transparent;color:var(--green-700);border-color:var(--line)}
.btn-ghost:hover{background:transparent;border-color:var(--green-700);color:var(--green-700)}
.btn-light{background:transparent;color:var(--cream-warm);border-color:rgba(232,221,196,.42)}
.btn-light:hover{background:transparent;border-color:var(--cream-warm);color:var(--cream-warm)}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin:0}
.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--green-700);
  border-bottom:1px solid var(--gold-100);padding-bottom:.3rem;transition:border-color .18s,gap .18s;
}
.link-arrow:hover{border-bottom-color:var(--gold);gap:.85rem}
.link-arrow::after{content:"→";font-size:.95rem;line-height:1}

/* ---------- sections ---------- */
section{padding:clamp(3.25rem,6vw,5rem) 0}
section.tight{padding:clamp(2.75rem,5vw,4.25rem) 0}
.bg-sand{background:var(--sand)}
.bg-dark{background:var(--green-900);color:var(--cream-warm)}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4{color:var(--cream-warm)}
.bg-dark .eyebrow{color:var(--gold-400)}
.bg-dark .eyebrow::after{background:rgba(255,255,255,.18)}
.bg-dark .lead,.bg-dark p{color:rgba(232,221,196,.82)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- hero ---------- */
.hero{
  position:relative;isolation:isolate;background:var(--green-900);color:var(--cream);
  overflow:hidden;display:flex;align-items:center;
  min-height:clamp(540px,76vh,860px);
  padding:clamp(5.5rem,12vw,9.5rem) 0 clamp(4.5rem,9vw,7.5rem);
}
.hero-bg{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  /* the frame carries more clear table above the spice border than below it, so a
     centred crop clips the bottom row while the top row sits complete */
  object-fit:cover;object-position:50% 56%;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(98deg,
    rgba(15,28,12,.95) 0%, rgba(15,28,12,.90) 38%,
    rgba(15,28,12,.62) 66%, rgba(15,28,12,.34) 100%);
}
.hero .wrap{position:relative;z-index:1;width:100%;max-width:none;
  padding-inline:clamp(1.5rem,5vw,4.5rem)}
.hero h1{color:var(--cream-warm);max-width:none;text-wrap:initial;
  font-size:clamp(1.83rem,4.16vw,3.83rem)}
.hero h1 .brk{display:inline}
@media(max-width:700px){.hero h1 .brk{display:none}
  .hero h1{text-wrap:balance;max-width:19ch}}
.hero .lead{color:rgba(232,221,196,.88);max-width:var(--measure)}
.hero-copy{max-width:1010px}
.hero-copy .lead{max-width:var(--measure)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.4rem}
@media(max-width:820px){
  .hero{min-height:auto;padding:clamp(5.5rem,16vw,7rem) 0 clamp(3.5rem,9vw,5rem)}
  .hero::before{background:linear-gradient(180deg,
    rgba(15,28,12,.93) 0%, rgba(15,28,12,.88) 55%, rgba(15,28,12,.80) 100%)}
}

/* ---------- light hero -------------------------------------------------------
   The photograph is composed as a frame: spices around all four edges, the table left
   clear in the middle. So the line is set in that clear centre instead of over a scrim
   at one side, and the ground is the photograph's own near-white rather than green.

   The veil is what makes it safe. object-fit:cover shifts the clear centre as the
   viewport changes shape, and at a phone's aspect the side spices crop away entirely;
   an elliptical white wash pinned to the middle guarantees the line always has a clean
   ground under it while leaving the spice border at full strength. */
/* The whole frame, never cropped, scaled to fit the screen.

   The photograph is a block element at its own 3:2 and the line is laid over its clear
   middle. Left at full width it is 2/3 of the viewport tall on a laptop, which puts
   everything below it off-screen, so the height is capped and the width follows - the
   whole frame still shows, on the cream ground, at a size that leaves room for the page.

   Once the height cap binds, the frame is about 1.5 times its height wide, so the
   heading takes whichever of the two limits is doing the work - vw while the viewport
   is narrow enough to set the width, vh once the cap does. Sizing it on vw alone would
   let the type outgrow the clear centre on a wide, short window. */
.hero-light{background:var(--cream);color:var(--ink);
  min-height:0;padding:0;display:block}
.hero-light .hero-media{position:relative}
.hero-light picture{display:block}
.hero-light img{width:100%;height:auto;display:block}
.hero-light::before{content:none}
.hero-light .hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 52% 46% at 50% 50%,
    rgba(250,247,240,.94) 0%, rgba(250,247,240,.88) 42%,
    rgba(250,247,240,.62) 66%, rgba(250,247,240,.24) 84%,
    rgba(250,247,240,0) 100%);
}
.hero-light .wrap{position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center}
/* the line breaks in the markup set the three lines, so this only has to be wide enough
   for the longest of them - a ch cap here would resolve against the wrapper's body font,
   not the display face the heading is actually set in */
/* The block is centred in the frame's clear middle, but the lines are set flush left
   against each other rather than centred on one another. */
.hero-light .hero-copy{max-width:min(46rem,100%);text-align:left}
/* The eyebrow's trailing rule is dropped here: over a photograph it reads as a scratch
   on the table rather than a typographic device. Sized in vw like the headline beneath
   it, so the whole block scales with the frame instead of drifting out of proportion. */
.hero-eyebrow{color:var(--gold);margin:0 0 clamp(.5rem,1vw,.9rem);
  font-size:clamp(.62rem,1.05vw,.82rem);letter-spacing:.2em}
.hero-eyebrow::after{display:none}
.hero-light h1{color:var(--green-700);text-wrap:initial;
  font-size:clamp(1.45rem,3.4vw,3.15rem)}
/* Below 820px the composition is the same as the desktop one - the line is set inside
   the frame's clear centre - but three things have to give, because the uncropped 3:2
   photograph is only about 260px tall at a phone's width:

   1. the veil grows. At this aspect the clear table shows as a wide, shallow band, so
      the ellipse is widened and flattened to match it and carried nearer to full
      opacity in the middle. The spice border is outside it either way.
   2. the type is set on the frame's own height (vw, which at a fixed 3:2 is the same
      thing) rather than a fixed ramp, so the block scales with the photograph instead
      of overflowing it on the narrowest handsets.
   3. the button shrinks to match, and the gap above it closes up.

   The photograph itself is untouched - full width, full frame, no crop. */
@media(max-width:820px){
  .hero-light .hero-media{max-width:100%}
  .hero-light .hero-bg{width:100%;max-height:none}
  .hero-light .hero-media::after{
    background:radial-gradient(ellipse 74% 42% at 50% 49%,
      rgba(250,247,240,.97) 0%, rgba(250,247,240,.95) 46%,
      rgba(250,247,240,.72) 70%, rgba(250,247,240,.3) 87%,
      rgba(250,247,240,0) 100%);
  }
  .hero-light .hero-copy{max-width:none;text-align:center}
  .hero-light .wrap{padding-inline:clamp(.75rem,3vw,1.25rem)}
  /* Proportion is not the only constraint here. Scaled purely off the frame this landed
     at 8px, which is legible in a screenshot and not on a phone, so it takes a floor of
     .6rem and a ceiling at the value the desktop rule resolves to. The block has ~59px
     of clear frame above and below it at this width, so the extra height is free. */
  .hero-eyebrow{justify-content:center;letter-spacing:.18em;
    font-size:clamp(.6rem,2.7vw,.82rem);margin-bottom:clamp(.35rem,1.8vw,.7rem)}
  .hero-light h1{font-size:4.35vw;line-height:1.1;margin-bottom:0}
  .hero-light .btn-row{justify-content:center;margin-top:2.4vw}
  .hero-light .btn{padding:1.5vw 3.4vw;font-size:2.05vw;letter-spacing:.1em}
}
/* the three written lines hold on a phone too - letting them reflow split the second
   sentence across two lines and left an orphan */
@media(max-width:700px){.hero-light h1{max-width:none}
  .hero-light h1 .brk{display:inline}}

/* ---------- breadcrumb strip (replaces the old dark page banner) ---------- */
.crumb-bar{padding:clamp(1.5rem,3vw,2.25rem) 0 0}
.crumb-bar h1{margin:.9rem 0 0;font-size:clamp(2rem,3.6vw,3rem);max-width:20ch}
.crumb-bar h1.sr-only{margin:0}
.crumbs{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0}
.crumbs a{text-decoration:none;color:var(--green-700);display:inline-block;padding-block:.3rem}
.crumbs a:hover{color:var(--gold)}
.crumb-bar + section,.crumb-bar + .pd-hero{padding-top:clamp(1.5rem,3vw,2.25rem)}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.stat{background:var(--cream);padding:clamp(1.6rem,3vw,2.4rem) clamp(1.1rem,2vw,1.8rem)}
.stat .n{font-family:var(--ff-display);font-size:clamp(1.8rem,3vw,2.5rem);line-height:1;color:var(--green-700)}
/* a worded figure rather than a numeral - set a size down so it holds the same
   optical weight as the numbers beside it and still fits one line at 210px */
.stat .n.n-word{font-size:clamp(1.35rem,2.1vw,1.85rem);white-space:nowrap}
.stat .l{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-top:.7rem;font-weight:500}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}
  /* 3 stats in a 2-column grid left a phantom empty tile — let the last one span */
  .stats .stat:last-child{grid-column:1 / -1}}

/* ---------- generic grids ---------- */
.grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split>*,.grid>*{min-width:0}
.split.left-narrow{grid-template-columns:.85fr 1.15fr}
@media(max-width:900px){.split,.split.left-narrow{grid-template-columns:1fr}}

/* ---------- product cards ---------- */
.p-card{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--cream);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.p-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 18px 40px rgba(18,33,14,.10)}
/* 2:3 matches the product plates exactly, so the card shows the whole photograph.
   The old 4:5 box cut the top off every one of them. */
.p-card figure{margin:0;aspect-ratio:2/3;overflow:hidden;background:var(--sand-2)}
.p-card figure img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .5s ease}
.p-card:hover figure img{transform:scale(1.035)}
.p-card .body{padding:1.35rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.p-card .kicker{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.p-card h3{margin:0;font-size:1.32rem}
.p-card .bot{font-size:.84rem;letter-spacing:.02em;color:var(--muted);margin:0;font-weight:400}
.p-card .meta{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-700);
  display:flex;justify-content:space-between;gap:1rem}

/* ---------- feature cards ---------- */
.f-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.6rem,3vw,2.1rem)}
.bg-sand .f-card{background:var(--cream)}
.f-card .num{font-family:var(--ff-display);font-size:1.05rem;color:var(--gold);margin-bottom:1rem;
  display:block;letter-spacing:.06em}
.f-card h3{font-size:1.22rem}
.f-card p:last-child{margin-bottom:0}
.f-card ul{margin:0;padding-left:1.1rem;color:var(--muted);font-size:.94rem;font-weight:300}
.f-card ul li{margin-bottom:.4rem}

/* ---------- spec tables ---------- */
.spec{width:100%;border-collapse:collapse;font-size:.94rem;margin:0 0 1.5rem}
.spec caption{
  text-align:left;font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);padding-bottom:.9rem;font-weight:600;
}
.spec th,.spec td{text-align:left;padding:.72rem .85rem;border-bottom:1px solid var(--line);vertical-align:top}
.spec thead th{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:600;border-bottom:1px solid var(--green-700);background:transparent;
}
.spec tbody th{font-weight:500;color:#2A2E27;width:44%}
.spec td,.spec th{letter-spacing:.005em}
.spec-grades{table-layout:fixed}
.spec-grades tbody th{width:25%}
.spec-grades td:last-child{width:18%;color:var(--green-700);font-weight:500}
.spec-params{table-layout:fixed}
.spec-params tbody th{width:36%}
.spec-params td:last-child{width:24%}
.spec-pack{table-layout:fixed}
.spec-pack tbody th{width:22%}
.spec-pack td:last-child{width:30%}
.spec tbody td{color:var(--muted)}
.spec tbody tr:hover{background:rgba(242,236,224,.55)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1.6rem;
  /* fade the right edge only while the table actually overflows */
  background:linear-gradient(90deg,var(--cream) 30%,rgba(250,247,240,0)) left center /26px 100% no-repeat,
             linear-gradient(90deg,rgba(250,247,240,0),var(--cream) 70%) right center/26px 100% no-repeat,
             radial-gradient(farthest-side at 0 50%,rgba(28,31,26,.14),transparent) left center/12px 100% no-repeat,
             radial-gradient(farthest-side at 100% 50%,rgba(28,31,26,.14),transparent) right center/12px 100% no-repeat;
  background-attachment:local,local,scroll,scroll}
.bg-sand .table-scroll{background-image:
  linear-gradient(90deg,var(--sand) 30%,rgba(242,236,224,0)),
  linear-gradient(90deg,rgba(242,236,224,0),var(--sand) 70%),
  radial-gradient(farthest-side at 0 50%,rgba(28,31,26,.14),transparent),
  radial-gradient(farthest-side at 100% 50%,rgba(28,31,26,.14),transparent)}
/* Below ~700px a table-layout:fixed grid squeezes columns until cell text is
   clipped instead of scrolling. Give the table a floor so the scroller does its job. */
@media(max-width:700px){
  .table-scroll .spec{min-width:560px}
  .table-scroll{margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
}

/* ---------- product detail layout ---------- */
.pd-hero{padding:clamp(2.5rem,5vw,4rem) 0 0}
.pd-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.pd-grid>*{min-width:0}
@media(max-width:900px){.pd-grid{grid-template-columns:1fr}}
.pd-gallery{position:sticky;top:96px;display:grid;gap:.65rem}
@media(max-width:900px){.pd-gallery{position:static}}
.pd-figure{border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--sand-2)}
.pd-figure img{width:100%;height:auto;display:block}
.pd-thumbs{list-style:none;margin:0;padding:0;max-width:none;
  display:flex;gap:.65rem}
.pd-thumbs li{margin:0;flex:1 1 0;min-width:0}
.pd-thumbs .thumb{display:block;width:100%;aspect-ratio:1;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:calc(var(--r) * .7);overflow:hidden;
  background:var(--sand-2);transition:border-color .2s ease}
/* contain, not cover: a square thumbnail of a 2:3 plate would otherwise cut the top
   and bottom off the very shot the thumbnail is there to identify */
.pd-thumbs .thumb img{width:100%;height:100%;object-fit:contain;display:block}
.pd-thumbs .thumb:hover{border-color:var(--gold)}
.pd-thumbs .thumb.is-active{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.pd-thumbs .thumb:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pill-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem;padding:0;list-style:none}
.pill{
  font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--green-700);
  border:1px solid var(--line);border-radius:100px;padding:.4rem .85rem;background:var(--cream);
}
.keyfacts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 2rem}
.keyfacts div{background:var(--cream);padding:1rem 1.1rem}
.keyfacts dt{font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.keyfacts dd{margin:0;font-size:.98rem;color:var(--ink)}
@media(max-width:520px){.keyfacts{grid-template-columns:1fr}}

.side-figure{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--sand-2)}
.side-figure img{width:100%;height:100%;min-height:340px;object-fit:cover;display:block}
@media(max-width:900px){.side-figure img{min-height:0}}

/* Text with an inset photograph. Body copy is capped at the reading measure, which
   leaves the right of the wrap empty on a wide screen; the photograph fills it at a
   modest size rather than competing with the text, and drops under the copy at full
   column width below 900px. */
.with-fig{display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,30%,380px);
  gap:clamp(2rem,4vw,3.5rem);align-items:start}
.with-fig>div>p:last-child{margin-bottom:0}
.inset-fig{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--sand-2)}
.inset-fig img{width:100%;height:auto;display:block}
.inset-fig figcaption{font-size:.82rem;line-height:1.5;color:var(--muted);
  padding:.75rem .95rem;border-top:1px solid var(--line)}
@media(max-width:900px){
  .with-fig{grid-template-columns:1fr}
  .inset-fig{max-width:520px}
}
/* Shown whole. Stretching the figure to the text column's height meant cropping the
   photograph to whatever shape that column happened to be; the figure now takes the
   photograph's own shape and sits at the top of the row instead. */
.side-figure.natural{align-self:start;position:static;background:var(--sand-2)}
.split:has(.side-figure.natural)>div>p:last-of-type{margin-bottom:0}
.side-figure.natural img{position:static;
  width:100%;height:auto;min-height:0;object-fit:fill}

.chain{list-style:none;margin:2.6rem 0 0;padding:0;max-width:560px;
  counter-reset:ch;border-top:1px solid var(--line)}
.chain li{counter-increment:ch;display:grid;grid-template-columns:2.2rem 1fr;
  gap:1rem;align-items:baseline;margin:0;padding:.8rem 0;
  border-bottom:1px solid var(--line)}
.chain li::before{content:counter(ch,decimal-leading-zero);font-family:var(--ff-display);
  font-size:.94rem;color:var(--gold);line-height:1.45}
.chain span{font-size:.95rem;color:var(--ink);line-height:1.45}
@media(max-width:520px){.chain li{grid-template-columns:2.1rem 1fr;gap:.8rem;padding:.72rem 0}
  .chain span{font-size:.9rem}}

/* ---------- notes / callouts ---------- */
.note{
  border-left:2px solid var(--gold);background:var(--sand);padding:1.1rem 1.3rem;
  font-size:.9rem;color:var(--muted);border-radius:0 var(--r) var(--r) 0;margin:0 0 1.6rem;
}
.note strong{color:var(--ink)}

/* ---------- certification badges ---------- */
/* Seven registrations in threes left the last one alone on its own row. Four columns
   fill as 4 + 3, so every row carries weight; the three unit certifications below keep
   their own row of three via the modifier. */
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
/* Named for the count it was written to hold. With FSSAI removed from the partner
   group it carries two, so the track count follows the content rather than leaving a
   third of the row empty. */
.badges--three{grid-template-columns:repeat(2,1fr)}
@media(max-width:1240px){.badges{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1000px){.badges,.badges--three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.badges{grid-template-columns:1fr}
  /* the empty mark slot exists only to keep titles on one baseline across a row;
     in a single column there is no row to align to, so it is just a blank band */
  .badge-logo--none{display:none}}
.badge{background:var(--cream);padding:1.35rem 1.3rem;border:1px solid var(--line);
  border-radius:var(--r);display:flex;flex-direction:column;gap:.2rem}
.badge-logo{width:100px;height:60px;object-fit:contain;margin-bottom:.9rem;display:block}
.badge .s{flex:1}
.badge .t{font-weight:500;font-size:.98rem;margin-bottom:.3rem;font-family:var(--ff-display);
  letter-spacing:-.005em}
.badge .s{font-size:.78rem;color:var(--muted);line-height:1.5}
.badge .st{display:inline-block;align-self:flex-start;margin-top:.9rem;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.22rem .55rem;border-radius:100px;border:1px solid var(--line);color:var(--muted)}
.badge .st.ok{color:var(--green-600);border-color:rgba(46,93,59,.35)}
.badge .st.pending{color:var(--gold);border-color:rgba(143,101,49,.35)}

/* ---------- certification groups ---------- */
.cert-group + .cert-group{margin-top:clamp(2.4rem,5vw,3.4rem)}
.cert-head{font-family:var(--ff-display);font-weight:400;font-size:1.24rem;
  letter-spacing:-.005em;margin:0 0 .35rem}
.cert-note{font-size:.9rem;max-width:74ch;margin:0 0 1.4rem}
/* keeps the title baseline identical across cards with and without a mark */
.badge-logo--none{display:block;height:60px;margin-bottom:.9rem}
/* Pending: the authority's mark goes monochrome so the card cannot be skim-read as
   granted, and the amber status sits under the copy where the certificate link would be. */
.badge--pending .badge-logo{filter:grayscale(1);opacity:.5}
.badge--pending{border-style:dashed}   /* no mark held, so no empty slot */
.badge-ref{font-family:var(--ff-body);font-size:.74rem;letter-spacing:.08em;color:var(--gold);
  margin:-.1rem 0 .5rem;word-break:break-all}
.badge-doc{display:inline-block;margin-top:.9rem;font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--green-700);text-decoration:none;
  border-bottom:1px solid var(--gold-100);padding-block:.25rem}
.badge-doc:hover{border-bottom-color:var(--gold)}
.cert-list{list-style:none;margin:0;padding:0;max-width:none;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 2.2rem;
  border-top:1px solid var(--line)}
.cert-list.wide{grid-template-columns:1fr;max-width:var(--measure)}
@media(max-width:760px){.cert-list{grid-template-columns:1fr}}
.cert-list li{margin:0;padding:.8rem 0;border-bottom:1px solid var(--line);
  font-size:.9rem;color:var(--muted);line-height:1.5}
.cert-list b{color:var(--ink);font-weight:600}
.cert-marks{list-style:none;margin:0;padding:0;max-width:none;
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(1rem,3vw,2.4rem);align-items:center}
@media(max-width:820px){.cert-marks{grid-template-columns:repeat(3,1fr);gap:1.6rem}}
.cert-marks li{margin:0}
.cert-marks img{width:100%;height:auto;max-height:72px;object-fit:contain;display:block}

/* ---------- process steps ---------- */
.steps{counter-reset:s;display:grid;gap:0;border-top:1px solid var(--line)}
.step{counter-increment:s;display:grid;grid-template-columns:74px 1fr;gap:1.5rem;
  padding:1.8rem 0;border-bottom:1px solid var(--line)}
.step::before{content:counter(s,decimal-leading-zero);font-family:var(--ff-display);
  font-size:1.5rem;color:var(--gold);line-height:1.2}
.step h3{font-size:1.18rem;margin-bottom:.35rem}
.step p{margin:0;color:var(--muted);font-size:.96rem;max-width:70ch}
@media(max-width:600px){.step{grid-template-columns:52px 1fr;gap:1rem}}

/* ---------- forms ---------- */
.form{display:grid;gap:1.15rem}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media(max-width:640px){.form .row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:.97rem;color:var(--ink);background:var(--cream);
  border:1px solid var(--line);border-radius:var(--r);padding:.8rem .9rem;width:100%;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green-700);box-shadow:0 0 0 3px rgba(36,59,30,.09)}
.form-note{font-size:.82rem;color:var(--muted)}
.form-note a{color:var(--green-700)}
.fallback{border:1px solid var(--gold);border-radius:var(--r);background:var(--sand);
  padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.9rem}
.fallback p{margin:0;font-size:.92rem;color:var(--muted);max-width:none}
.fallback strong{color:var(--ink)}
.fallback a{color:var(--green-700)}
.fallback textarea{font-family:inherit;font-size:.88rem;width:100%;resize:vertical;
  border:1px solid var(--line);border-radius:var(--r);padding:.7rem .8rem;background:var(--cream)}
.fallback .btn{align-self:flex-start}
/* [hidden] is set by the form script; without this the .fallback display
   rule outranks the UA stylesheet and the panel shows before submit. */
.fallback[hidden]{display:none}

.sent{border:1px solid var(--btn-bg);border-radius:var(--r);background:#EDF3EE;
  padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.6rem}
.sent[hidden]{display:none}
.sent p{margin:0;font-size:.95rem;color:var(--ink);max-width:none}
.sent strong{color:var(--green-700)}
.sent .muted{font-size:.86rem;color:var(--muted)}

/* ---------- footer ---------- */
.site-footer{background:#0D1A0A;color:rgba(232,221,196,.72);
  border-top:1px solid rgba(232,221,196,.13);padding:clamp(3.5rem,6vw,5rem) 0 2rem;font-size:.9rem;
  position:relative;isolation:isolate;overflow:hidden}
/* The photograph, then the footer's own ground laid back over it at .93. That is the
   number where the cardamom still reads as texture and the body text stays above 7:1
   against it - the footer sets links and the address at 72% cream, which has no
   contrast to spare. The solid background above is the fallback: if the image never
   arrives the footer is exactly what it was before. */
.footer-bg{position:absolute;inset:0;z-index:-1}
.footer-bg picture,.footer-bg img{display:block;width:100%;height:100%}
.footer-bg img{object-fit:cover;object-position:70% 50%}
.footer-bg::after{content:"";position:absolute;inset:0;background:rgba(13,26,10,.93)}
@media(prefers-reduced-transparency:reduce){.footer-bg::after{background:#0D1A0A}}
.site-footer a{color:rgba(232,221,196,.72);text-decoration:none;
  display:inline-block;padding-block:.25rem}
.site-footer a:hover{color:var(--cream-warm)}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(1.8rem,4vw,3rem)}
@media(max-width:900px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}}
.site-footer img.f-logo{height:42px;width:auto;margin-bottom:1.3rem}
.site-footer h4{color:var(--cream-warm);font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;
  margin-bottom:1.1rem;font-weight:600}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.6rem}
.f-bottom{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.11);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.8rem;
  /* Was #8B8E84. Against the flat footer that measured 5.39:1, but the photograph's
     brightest point takes it to 4.56:1 - technically still AA for this size, with no
     margin left. Lifted to hold 6.25:1 at the worst point on the image. */
  color:#A3A89C}
.f-addr{font-style:normal;line-height:1.75}
/* .tbc held the footer tagline, removed at the client's request. */

/* ---------- misc ---------- */
.center{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.sec-head{max-width:var(--measure);margin-bottom:clamp(1.75rem,3.5vw,2.5rem)}
.sec-head.wide{max-width:none}
.sec-head.wide h2{max-width:none;text-wrap:nowrap}
/* headings that must hold one line inside a column, not the full page width */
.h2-line{text-wrap:nowrap;max-width:none;font-size:clamp(1.45rem,2.35vw,2rem)}
@media(max-width:860px){.h2-line{text-wrap:balance}}
.sec-head.wide p{max-width:var(--measure)}
.sec-head.wide p.lede-wide{max-width:none}
@media(max-width:1000px){.sec-head.wide p.lede-wide br{display:none}}
@media(max-width:820px){.sec-head.wide h2{text-wrap:balance}}
.sec-head.center{margin-inline:auto;text-align:center}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* screen-reader-only headings restore the h1 -> h2 -> h3 outline without changing the design */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--btn-bg);
  color:var(--btn-fg);padding:.8rem 1.4rem;border-radius:var(--r);font-size:.78rem;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.skip-link:focus{left:1rem;top:1rem}
picture{display:contents}
@media print{.site-header,.site-footer{display:none}}

/* Email and phone links sit inline in copy: vertical padding on an inline element
   grows the touch area without changing the line box, so layout is untouched. */
a[href^="mailto:"],a[href^="tel:"]{padding-block:.3rem}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .p-card:hover{transform:none}
  .p-card:hover figure img{transform:none}
}

/* ---------- WhatsApp ---------- */
:root{--wa:#25D366;--wa-dark:#1DA851}

/* footer link */
.f-wa{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.1rem;
  padding:.55rem .95rem;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  color:var(--cream-warm);text-decoration:none;font-size:.85rem;line-height:1;
  transition:background-color .2s ease,border-color .2s ease}
.f-wa:hover{background:rgba(37,211,102,.14);border-color:rgba(37,211,102,.55);color:#fff}
.f-wa .wa-ico{color:var(--wa);flex:none}

/* contact-page button */
.wa-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.72rem 1.25rem;
  border-radius:999px;background:var(--wa);color:#0B2416;text-decoration:none;
  font-weight:600;font-size:.92rem;line-height:1;
  transition:background-color .2s ease,transform .2s ease}
.wa-btn:hover{background:var(--wa-dark);color:#fff;transform:translateY(-1px)}
.wa-btn .wa-ico{flex:none}

/* floating connect button */
.wa-float{position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);z-index:120;
  display:inline-flex;align-items:center;gap:.55rem;height:52px;padding:0 1.05rem;
  border-radius:999px;background:var(--wa);color:#0B2416;text-decoration:none;
  font-weight:600;font-size:.9rem;line-height:1;white-space:nowrap;
  box-shadow:0 6px 20px rgba(11,36,22,.28);
  transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease}
.wa-float:hover{background:var(--wa-dark);color:#fff;transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(11,36,22,.34)}
.wa-float .wa-ico{width:24px;height:24px;flex:none}
@media(max-width:600px){
  .wa-float{width:52px;padding:0;justify-content:center}
  .wa-float-label{display:none}
}
@media print{.wa-float{display:none}}
/* the fixed button sits over the last ~70px of the page; give every page that much
   clearance so it never covers a thumbnail, a field or a link */
.site-footer{padding-bottom:calc(clamp(2.5rem,5vw,3.5rem) + 76px)}
/* the contact page carries its own WhatsApp button — one is enough */
body.has-wa-inline .wa-float{display:none}

/* certification note that must hold a single line on desktop */
.cert-note.one-line{max-width:none;text-wrap:nowrap}
@media(max-width:1080px){.cert-note.one-line{text-wrap:balance;max-width:70ch}}

/* ---------- page photograph ----------------------------------------------------
   Shown whole, scaled to fit. The figure has no height of its own and the image keeps
   its own aspect ratio, so nothing is ever trimmed at display time; the height cap is
   what stops a 3:2 photograph filling the screen on a laptop and pushing the page's
   first words below the fold. Width follows from the cap, so on a wide monitor the
   photograph sits centred on the cream ground rather than being upscaled to the edges.

   On a phone the frame is short enough already, so the cap never engages and the
   photograph runs edge to edge as before. */
/* No full-width rule under it any more: the photograph no longer reaches the edges,
   so a line spanning the viewport read as a leftover from the strip it used to be.
   A little air underneath does the separating instead. */
.photo-band{margin:0 0 clamp(.5rem,2vw,1.5rem);width:100%;background:var(--cream)}
.photo-band picture{display:block}
.photo-band img{width:100%;height:auto;display:block}
@media print{.photo-band{display:none}}

/* ---------- a band carrying copy in the clear half of its frame ----------------
   .wrap is centred at a fixed max-width, so its own 50% always lands on the
   viewport's 50% - which is where the white table in Band_Products begins. The
   copy therefore sits in the clear half at every desktop width without any
   per-breakpoint nudging, and the photograph underneath is never cropped or
   dimmed to make room for it. Type is sized in vw because the frame's height is
   itself a function of viewport width (a 3:2 photograph at 100vw), so the copy
   and the space it sits in grow and shrink together. */
.band-hold{position:relative}
.band-hold .wrap{position:absolute;inset:0;z-index:1;display:flex;align-items:center}
/* 52%: the headline is set on one line, so the block has to be wide enough to
   hold it at full size. The photograph's clear area starts at ~44% of the frame,
   so the block can reach left of the halfway mark without touching the turmeric. */
.band-copy{margin-left:auto;width:min(52%,34rem)}
.band-copy .eyebrow{margin:0 0 clamp(.3rem,.8vw,.6rem)}
.band-copy h2{margin:0;color:var(--green-700);
  font-size:clamp(1rem,2.25vw,2.05rem);line-height:1.18;text-wrap:balance}
.band-range{display:grid;grid-template-columns:1fr 1fr;
  gap:.35rem clamp(.9rem,2.4vw,2.5rem);margin-top:clamp(.7rem,1.7vw,1.4rem)}
.band-range h3{font-family:var(--ff-body);font-weight:600;color:var(--gold);
  font-size:clamp(.56rem,.82vw,.7rem);letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 clamp(.25rem,.6vw,.45rem);padding-bottom:clamp(.2rem,.5vw,.4rem);
  border-bottom:1px solid var(--line)}
.band-range ul{list-style:none;margin:0;padding:0}
.band-range li{color:var(--green-700);line-height:1.7;
  font-size:clamp(.72rem,1.18vw,1.02rem)}

/* Under 820px the copy stays in the clear half rather than dropping below the
   photograph. The frame keeps its 3:2 and is never cropped, so its height is a fixed
   fraction of its width - which is why every size in here is set in vw. The block and
   the space it occupies then shrink together, and the fit that holds at 820px holds at
   360px too. The eyebrow's trailing rule is dropped: at this width it is competing for
   room with the words it is meant to introduce. */
@media(max-width:820px){
  .band-copy{width:58%;padding-left:clamp(.5rem,1.6vw,1rem)}
  /* vw so the block tracks the frame, but each size is capped at the value the desktop
     rule resolves to, so nothing jumps when the breakpoint is crossed at 820px. */
  .band-copy .eyebrow{font-size:clamp(.56rem,3vw,.7rem);letter-spacing:.15em;gap:0;
    margin-bottom:clamp(.3rem,2vw,.6rem)}
  .band-copy .eyebrow::after{display:none}
  .band-copy h2{font-size:clamp(1rem,4.4vw,2.05rem);line-height:1.16}
  /* Two equal halves split "Green Cardamom" across two lines and broke the row
     alignment between the columns. Each column is sized to its own longest item
     instead, which at this width costs less room than the wrap did. */
  .band-range{grid-template-columns:max-content max-content;justify-content:start;
    gap:.2rem clamp(.9rem,3.4vw,2.5rem);margin-top:clamp(.7rem,3vw,1.4rem)}
  .band-range h3{font-size:clamp(.56rem,2.7vw,.7rem);letter-spacing:.13em;
    margin-bottom:clamp(.25rem,1.4vw,.45rem);padding-bottom:clamp(.2rem,1.1vw,.4rem)}
  .band-range li{font-size:clamp(.7rem,3.15vw,1.02rem);line-height:1.62}
}

/* ---------- closing photograph -------------------------------------------------
   The whole frame, like everywhere else on the site, and fitted the same way - by a
   height cap rather than by a crop. Nothing follows it, so the cap is looser than the
   one on .photo-band: this is the page's last word and is allowed to be the largest
   image on it, just not larger than the screen. */
.chapter{margin:clamp(3rem,6vw,5rem) 0 0;width:100%;background:var(--cream)}
.chapter picture{display:block}
.chapter img{width:100%;height:auto;display:block}
/* the caption sits on the page's own left margin, not centred under the photograph -
   an inner span carries the reading measure so the box can keep the content grid */
.chapter figcaption{width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(.9rem,2vw,1.3rem) var(--gut) clamp(2rem,4vw,3rem);
  font-size:.88rem;line-height:1.55;color:var(--muted)}
.chapter figcaption span{display:block;max-width:62ch}
/* uncaptioned: the figcaption's bottom padding was what held the page open under the
   photograph, so the figure has to carry that gap itself */
.chapter--bare{margin-bottom:clamp(2rem,4vw,3rem)}
@media print{.chapter{display:none}}

/* ---------- crop calendar ---------- */
.cal-key{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin:0 0 1.2rem;padding:0;
  font-size:.84rem;color:var(--muted)}
.cal-key li{display:flex;align-items:center;gap:.5rem}
.cal-sw{width:22px;height:12px;border-radius:2px;border:1px solid var(--line);flex:none;
  background-image:repeating-linear-gradient(135deg,#F4F0E6 0 4px,#EEE9DC 4px 8px)}
.cal-sw.is-harvest{background-image:none;background-color:#C7D3BE;border-color:#B2C1A6}
.cal-sw.is-arrive{background-image:none;background-color:#8FA97E;border-color:#7B9669}
.cal-sw.is-peak{background-image:none;background-color:var(--green-700);border-color:var(--green-700)}

/* The calendar always fits its container: table-layout:fixed with the line column on a
   percentage, so the twelve months divide whatever is left. The earlier version set a
   640px minimum and lived in a horizontal scroller, which needed contain:paint to stop
   it inflating the page's scrollWidth - and that pairing left the coloured cells blank
   during momentum scrolling on iOS. No scroller, no containment, no blank cells. */
table.cal{width:100%;table-layout:fixed;border-collapse:collapse;
  background:var(--cream);font-size:.86rem}
table.cal thead th{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding:.3rem 0;text-align:center;background:none}
table.cal thead th:first-child{text-align:left;padding-left:.2rem;letter-spacing:.14em}
table.cal th:first-child{width:24%}
table.cal tbody th{text-align:left;font-weight:500;padding:0 .9rem 0 .2rem;background:none;
  /* break-word, not anywhere: the line names may wrap between words on a narrow screen,
     but "Cardamom" should never be split down the middle */
  overflow-wrap:break-word}
table.cal tbody th a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
  display:inline-block;padding-block:.42rem;line-height:1.25}
table.cal tbody th a:hover{color:var(--green-700);border-bottom-color:var(--gold)}
.cal-c{height:30px;padding:2px;background-clip:content-box;border-radius:3px;
  background-image:repeating-linear-gradient(135deg,#F4F0E6 0 4px,#EEE9DC 4px 8px)}
.cal-c.is-harvest{background-image:none;background-color:#C7D3BE}
.cal-c.is-arrive{background-image:none;background-color:#8FA97E}
.cal-c.is-peak{background-image:none;background-color:var(--green-700)}
.m-short{display:none}
@media(max-width:820px){
  .m-long{display:none}.m-short{display:inline}
  table.cal{font-size:.78rem}
  table.cal th:first-child{width:26%}
  table.cal tbody th{padding-right:.5rem}
  .cal-c{height:26px;padding:1px}
}
@media(max-width:420px){
  table.cal{font-size:.72rem}
  table.cal th:first-child{width:30%}
  table.cal tbody th a{padding-block:.34rem}
  .cal-c{height:22px}
}

.cal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
  gap:clamp(1rem,2.5vw,1.6rem)}
.cal-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.1rem,2.2vw,1.5rem);display:flex;flex-direction:column;min-width:0}
.cal-card-head{border-bottom:1px solid var(--line);padding-bottom:.8rem;margin-bottom:.9rem}
.cal-card h3{margin:0 0 .3rem;font-size:1.15rem}
.cal-card h3{line-height:1.3}
.cal-card h3 a{color:var(--green-700);text-decoration:none;
  display:inline-block;padding-block:.18rem}
.cal-card h3 a:hover{color:var(--gold)}
.cal-belts{margin:0;font-size:.8rem;color:var(--muted);line-height:1.6}
.cal-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1rem;margin:0 0 1rem}
.cal-facts div{min-width:0}
.cal-facts dt{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);
  margin-bottom:.15rem}
.cal-facts dd{margin:0;font-size:.92rem;color:var(--ink)}
.cal-note{margin:0;font-size:.9rem;color:var(--muted);line-height:1.7}
@media(max-width:420px){.cal-facts{grid-template-columns:1fr}}

/* spec sheet download button on the product pages */
.pd-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.4rem}
.dl-spec{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.15rem;
  border:1px solid var(--green-700);border-radius:999px;color:var(--green-700);
  text-decoration:none;font-size:.88rem;font-weight:600;line-height:1;
  transition:background-color .2s ease,color .2s ease}
.dl-spec:hover{background:var(--green-700);color:var(--btn-fg)}
.dl-spec svg{flex:none}
.dl-spec .dl-meta{font-weight:400;opacity:.75;font-size:.8rem}

/* ==========================================================================
   HOMEPAGE — proof strip and the origin→testing sequence
   ========================================================================== */

/* ---------- hero call to action ----------
   The hero photograph is a frame with a clear centre; the heading sits in it and the
   buttons sit directly under the heading, inside the same clear area. Sized in vw for
   the same reason the heading is: the frame's height is a function of window width. */
.hero-copy .btn-row{margin-top:clamp(1rem,2.2vw,2rem)}
.hero-light .btn,.hero-light .btn-ghost{
  padding:clamp(.6rem,1.05vw,.9rem) clamp(1rem,1.9vw,1.9rem);
  font-size:clamp(.6rem,.78vw,.76rem)}
@media(max-width:820px){
  .hero-copy .btn-row{margin-top:1.25rem}
  .hero-light .btn,.hero-light .btn-ghost{padding:.8rem 1.5rem;font-size:.72rem}
}

/* ---------- proof strip ----------
   Four claims, not four cards. The only structure is a hairline between columns and
   one above and below the band, which is what keeps it reading as a statement of
   position rather than a feature grid. Replaces the three big numerals that used to
   sit here: a figure set at 2.5rem reads as marketing, the same fact inside a
   sentence reads as a specification. */
.proof-band{border-block:1px solid var(--line);background:var(--cream)}
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.proof>div{padding:clamp(1.8rem,3.2vw,2.9rem) clamp(1.1rem,2vw,2.1rem);
  border-left:1px solid var(--line)}
.proof>div:first-child{border-left:0;padding-left:0}
.proof>div:last-child{padding-right:0}
.proof h3{font-family:var(--ff-body);font-size:.68rem;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .75rem;line-height:1.4}
.proof p{font-size:.9rem;line-height:1.62;color:var(--muted);margin:0;max-width:36ch}
@media(max-width:980px){
  .proof{grid-template-columns:1fr 1fr}
  .proof>div:nth-child(odd){border-left:0;padding-left:0}
  .proof>div:nth-child(even){padding-right:0}
  .proof>div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:560px){
  .proof{grid-template-columns:1fr}
  .proof>div{border-left:0;border-top:1px solid var(--line);padding-inline:0}
  .proof>div:first-child{border-top:0}
}

/* ---------- origin → testing ----------
   Four steps, each with a real photograph of that step. The sequence stops at testing
   because that is the last stage the site has photography for; a fifth frame would
   have to be invented, and an invented frame in a sequence about traceability would
   undo the section it sits in. */
.journey{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.2vw,1.9rem)}
.journey-step figure{margin:0 0 clamp(.9rem,1.8vw,1.3rem);aspect-ratio:4/3;overflow:hidden;
  background:var(--green-800);border-radius:var(--r)}
.journey-step img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.journey-step:hover img{transform:scale(1.045)}
.journey-num{display:block;font-family:var(--ff-body);font-size:.66rem;font-weight:600;
  letter-spacing:.2em;color:var(--gold-400);margin-bottom:.5rem}
.journey-step h3{font-family:var(--ff-body);font-size:.79rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream-warm);margin:0 0 .55rem;line-height:1.4}
.journey-step p{font-size:.88rem;line-height:1.62;margin:0;color:rgba(232,221,196,.74);max-width:34ch}
@media(max-width:900px){.journey{grid-template-columns:1fr 1fr}}
@media(max-width:520px){
  /* Four tall images stacked is a lot of scrolling for a sequence whose point is the
     order of the steps, so on a phone each step becomes a row: small square frame,
     copy beside it, the sequence readable in one screen. */
  .journey{grid-template-columns:1fr;gap:1.6rem}
  /* The step has four children, so in a two-column grid they auto-place one per cell
     and the number, heading and copy scatter around the image. The frame is pinned to
     column one across all three rows and the text is pinned to column two, which is
     what makes this a row rather than a two-by-two. */
  .journey-step{display:grid;grid-template-columns:92px 1fr;
    gap:.1rem 1.1rem;align-items:start}
  .journey-step figure{grid-column:1;grid-row:1/span 3;margin:0;aspect-ratio:1}
  .journey-step .journey-num,.journey-step h3,.journey-step p{grid-column:2}
  .journey-step h3{margin-bottom:.4rem}
}
@media(prefers-reduced-motion:reduce){
  .journey-step img{transition:none}
  .journey-step:hover img{transform:none}
}

/* ---------- signature statement ----------
   The strongest sentence the company owns, set as type rather than buried in a
   paragraph. Used where a section needs a visual anchor and a photograph would
   either repeat one already on the page or add nothing. */
.pullquote{margin:0;align-self:center;max-width:22ch}
.pullquote::before{content:"";display:block;width:56px;height:2px;
  background:var(--gold-400);margin-bottom:clamp(1.1rem,2.2vw,1.7rem)}
.pullquote blockquote{margin:0;font-family:var(--ff-display);font-weight:400;
  font-size:clamp(1.55rem,2.7vw,2.4rem);line-height:1.18;letter-spacing:-.012em;
  color:var(--green-700);text-wrap:balance}
.pullquote .attr{margin:clamp(1rem,2vw,1.5rem) 0 0;font-size:.68rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold);line-height:1.5}
.bg-dark .pullquote blockquote{color:var(--cream-warm)}
@media(max-width:900px){.pullquote{max-width:none}}
/* Full-bleed variant: the statement runs the width of the measure on one line, which
   is the whole point of setting it as a statement rather than a sentence in a
   paragraph. Sized in vw so it tracks the column it has to fit inside; below roughly
   600px no size is both readable and short enough, so there it wraps. */
.pullquote--wide{max-width:none;align-self:stretch;
  margin:0 0 clamp(2rem,4vw,3.2rem)}
/* The eyebrow sits directly above this variant and already carries a rule, so the
   quote's own one just stacked a second hairline under the first. */
.pullquote--wide::before{display:none}
.pullquote--wide blockquote{font-size:clamp(1.45rem,4.05vw,3.7rem);line-height:1.1;
  letter-spacing:-.018em;text-wrap:initial}
.pullquote--wide .attr{margin-top:clamp(.9rem,1.8vw,1.4rem)}
/* Body copy under the statement: two columns on a wide screen so the section does not
   run as one long ragged measure beside a lot of empty sand. */
.about-body{columns:2;column-gap:clamp(2rem,4vw,4rem);max-width:none}
.about-body p{max-width:none;break-inside:avoid}
.about-body p:last-child{margin-top:.4rem}
@media(max-width:820px){.about-body{columns:1;max-width:var(--measure)}}