/* 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}
.hero-light h1{color:var(--green-700);text-wrap:initial;
  font-size:clamp(1.45rem,3.4vw,3.15rem)}
@media(max-width:820px){
  /* At a phone's width the whole frame is only ~260px tall, far too little to set
     three lines of display type inside. The photograph runs full width and the line
     sits under it on the cream, so neither has to give way to the other. */
  .hero-light .hero-media{max-width:100%}
  .hero-light .hero-bg{width:100%;max-height:none}
  .hero-light .hero-media::after{content:none}
  .hero-light .wrap{position:static;padding-block:clamp(1.75rem,7vw,2.5rem) clamp(2rem,8vw,3rem);
    justify-content:flex-start}
  .hero-light h1{font-size:clamp(1.35rem,6vw,2.1rem)}
}
/* 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}
.badges--three{grid-template-columns:repeat(3,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}
.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;color:#8B8E84}
.f-addr{font-style:normal;line-height:1.75}
.tbc{color:var(--gold-400)}
.site-footer p.tbc{white-space:nowrap}

/* ---------- 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 frame is ~545px tall and shrinking: there is no type size that
   is both legible and small enough to fit beside the ginger. So the copy leaves
   the photograph and becomes a normal block beneath it. */
@media(max-width:820px){
  .band-hold .wrap{position:static;display:block}
  .band-copy{width:auto;margin:0;padding:clamp(1.3rem,4.5vw,2rem) 0 clamp(.4rem,2vw,1rem)}
  .band-copy h2{font-size:clamp(1.25rem,4.6vw,1.75rem)}
  .band-range{max-width:26rem;gap:.35rem 1.6rem;margin-top:1.1rem}
  .band-range h3{font-size:.64rem}
  .band-range li{font-size:.94rem}
}

/* ---------- 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)}}