/* Inter, self hosted. One variable file, latin subset, 48 KB.
   No Google Fonts request, so no third party DNS + TLS round trip on load. */
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-var-latin.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}

/* =========================================================================
   Shubham Agro — design 2: soft organic
   Brand palette, taken from the Shubham Agro logo:
     #3E6631  dark green   the S
     #96BF4C  leaf lime    the leaf and AGRO
     #DAEAB9  pale mint    the board behind the mark
     #727272  grey         the tagline
   Everything else is a tint or a shade of those four. Curved section edges,
   rounded squares, floating cards, soft shadows. Inter throughout.
   ========================================================================= */

:root{
  /* greens — brand */
  --emerald:#3E6631;      /* brand dark green: buttons, links, accents */
  --emerald-dk:#2F4F25;   /* one shade down: hover, accent on pale panels */
  --forest:#24401C;       /* deep panel background */
  --forest-2:#1A2F14;     /* deepest panel */
  --lime:#96BF4C;         /* brand leaf lime: accent on dark, never text on white */
  --lime-soft:#BCD98C;
  --mint:#DAEAB9;         /* brand pale mint */
  --mint-2:#EDF4DF;       /* lighter wash of the same */
  --cream:#FAFCF5;
  --white:#FFFFFF;
  --grey:#727272;         /* brand grey, for rules and non-text use */

  /* text */
  --text:#1E2B18;
  --muted-c:#666666;      /* brand grey, one step down so it passes AA on mint */

  /* roles */
  --bg:var(--cream);
  --fg:var(--text);
  --muted:var(--muted-c);
  --accent:var(--emerald);
  --hair-d:rgba(30,43,24,.12);

  /* type */
  --display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --body:var(--display);
  --mono:var(--display);

  /* metrics */
  --gutter:clamp(18px,4.5vw,96px);
  --maxw:2100px;   /* full width: only ultra wide screens get a cap */
  --rad:28px;
  --rad-lg:40px;
  --curve:clamp(40px,7vw,110px);
  --shadow:0 18px 44px rgba(45,72,35,.10);
  --shadow-lg:0 30px 70px rgba(45,72,35,.15);
  --ease:cubic-bezier(.22,1,.28,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--body);font-size:16px;line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--lime);color:var(--forest)}

/* ---------- surfaces ---------- */
.paper{
  background:var(--mint-2);color:var(--text);
  --fg:var(--text);--muted:var(--muted-c);--accent:var(--emerald-dk);--hair-d:rgba(30,43,24,.1);
}
.deep{
  background:var(--forest);color:#fff;
  --fg:#fff;--muted:rgba(255,255,255,.76);--accent:var(--lime);--hair-d:rgba(255,255,255,.18);
}

/* curved section edges — this is the signature of design 2 */
.round-t{border-radius:var(--curve) var(--curve) 0 0}
.round-b{border-radius:0 0 var(--curve) var(--curve)}
.round{border-radius:var(--curve)}
.grainy::after{display:none}

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:700;line-height:1.06;letter-spacing:-.035em;margin:0}
.d1{font-size:clamp(2.3rem,5.2vw,4.3rem);line-height:1.04}
.d2{font-size:clamp(1.85rem,3.5vw,2.95rem);line-height:1.09}
.d3{font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.14}
.d4{font-size:clamp(1.18rem,1.7vw,1.45rem)}
.it{font-style:normal;color:var(--emerald)}
.lede{font-size:clamp(1.02rem,1.35vw,1.19rem);line-height:1.65;color:var(--muted);max-width:58ch}
p{margin:0 0 1.1em}

/* pill labels instead of hairline labels */
.lbl{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.73rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--emerald-dk);background:var(--mint);
  padding:7px 14px;border-radius:100px;
  width:fit-content;justify-self:start;align-self:start;
}
.lbl::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--emerald);flex:none}
.lbl.bare::before{display:none}
.deep .lbl,.ftr .lbl{background:rgba(150,191,76,.16);color:var(--lime)}
.num{font-size:.74rem;font-weight:700;letter-spacing:.1em;color:var(--emerald);text-transform:uppercase}

/* ---------- layout ---------- */
@media(min-width:1700px){
  .g4{grid-template-columns:repeat(5,1fr)}
  .rail>*{flex-basis:clamp(260px,18vw,340px)}
}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sec{position:relative;padding-block:clamp(60px,8vw,116px)}
.grid{display:grid;gap:clamp(22px,2.8vw,38px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g12{grid-template-columns:repeat(12,1fr)}
/* Grids step down one column at a time rather than jumping straight to one,
   so a phone still shows two product cards and a tablet shows three. */
@media(max-width:1700px){.g4{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1100px){.g4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.g2{grid-template-columns:1fr}.g3{grid-template-columns:repeat(2,1fr)}.g12{grid-template-columns:repeat(6,1fr)}}
@media(max-width:760px){.g3{grid-template-columns:1fr}.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.g4{grid-template-columns:1fr}}
@media(max-width:900px){[style*="grid-column:span"]{grid-column:1/-1!important}}
.hair{height:1px;background:var(--hair-d);border:0;margin:0}
/* grid and flex children default to min-width:auto, which lets a wide table or a
   long word push the whole page sideways. This is the fix, and it is why the
   layout never scrolls horizontally on a phone. */
.grid>*,.split>*,.proc>*,.phero-grid>*,.facts>*,.idx-inner>*,.hero-meta>*{min-width:0}
.tbl-wrap{max-width:100%}
.sec > *{position:relative;z-index:1}

/* ---------- floating pill header ---------- */
.hdr{
  position:fixed;top:14px;left:var(--gutter);right:var(--gutter);z-index:95;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:10px 12px 10px 18px;border-radius:100px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 10px 34px rgba(45,72,35,.1);color:var(--text);
  transition:box-shadow .4s var(--ease),background .4s;
}
.hdr.stuck{background:rgba(255,255,255,.95);box-shadow:0 14px 40px rgba(45,72,35,.14)}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{width:36px;height:36px;flex:none}
.brand b{font-family:var(--display);font-weight:750;font-size:1.05rem;letter-spacing:-.025em;line-height:1.1}
.brand small{display:block;font-size:.56rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{
  font-size:.86rem;font-weight:550;padding:8px 14px;border-radius:100px;
  transition:background .3s,color .3s;
}
.nav a:hover{background:var(--mint);color:var(--emerald-dk)}
.nav a[aria-current="page"]{background:var(--mint);color:var(--emerald-dk);font-weight:650}
@media(max-width:1120px){.nav{display:none}}

/* buttons — full pills */
.btn{
  display:inline-flex;align-items:center;gap:.55em;padding:.82em 1.5em;
  border:2px solid currentColor;border-radius:100px;
  font-size:.84rem;font-weight:650;white-space:nowrap;
  transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .3s;
}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translate(3px,-3px)}
.btn-fill{
  background:var(--emerald);color:#fff;border-color:var(--emerald);
  box-shadow:0 10px 24px rgba(62,102,49,.28);
}
.btn-fill:hover{background:var(--emerald-dk);border-color:var(--emerald-dk);box-shadow:0 16px 32px rgba(62,102,49,.34)}
.btn:not(.btn-fill):hover{background:var(--emerald);border-color:var(--emerald);color:#fff}
/* a third, quieter action. No border, so it reads as the option you take if
   neither of the first two is what you wanted. */
.btn-ghost{border-color:transparent;background:rgba(255,255,255,.6);color:var(--emerald-dk)}
.btn-ghost:hover{background:var(--white);border-color:transparent;color:var(--emerald-dk)}
.btn-ghost img{width:19px;height:19px;flex:none}
.deep .btn:not(.btn-fill):hover,.ftr .btn:not(.btn-fill):hover{background:var(--lime);border-color:var(--lime);color:var(--forest)}
.deep .btn-fill,.ftr .btn-fill{background:var(--lime);color:var(--forest);border-color:var(--lime);box-shadow:none}
.deep .btn-fill:hover,.ftr .btn-fill:hover{background:#fff;border-color:#fff;color:var(--forest)}
.btn-sm{padding:.62em 1.15em;font-size:.78rem;border-width:2px}

/* burger */
.burger{display:none;width:44px;height:44px;border-radius:100px;background:var(--mint);position:relative}
.burger span{position:absolute;left:13px;width:18px;height:2px;border-radius:2px;background:var(--emerald-dk);transition:transform .4s var(--ease),opacity .3s}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:24px}
body.menu-open .burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
@media(max-width:1120px){.burger{display:block}.hdr>.btn{display:none}}

/* mobile drawer ----------------------------------------------------------
   Three blocks in a fixed order: where to go, how to reach us, where we are.
   The links stay large and tappable; everything below them steps down in size
   so the panel reads as a short page rather than one long list of shouting. */
.drawer{
  position:fixed;inset:0;z-index:90;background:var(--mint-2);color:var(--text);
  clip-path:circle(0% at calc(100% - 42px) 42px);transition:clip-path .8s var(--ease);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
body.menu-open .drawer{clip-path:circle(160% at calc(100% - 42px) 42px)}
.dw-scroll{
  min-height:100%;display:flex;flex-direction:column;
  padding:clamp(84px,12vh,116px) var(--gutter) 34px;gap:0;
}
.dw-lbl{
  margin:0 0 14px;font-size:.64rem;font-weight:750;letter-spacing:.16em;
  text-transform:uppercase;color:var(--emerald-dk);opacity:.75;
}
.dw-lbl + *{margin-top:0}
.dw-links{display:flex;flex-direction:column}
.dw-links a{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.28rem,4.2vw,1.65rem);line-height:1.34;letter-spacing:-.03em;
  display:flex;align-items:baseline;gap:13px;
  padding-block:3px;min-height:44px;
  opacity:0;transform:translateY(16px);
  transition:opacity .45s var(--ease),transform .5s var(--ease),color .25s;
}
.dw-links a i{
  font-size:.6rem;font-style:normal;font-weight:750;letter-spacing:.12em;
  color:var(--emerald);flex:none;width:1.6em;
}
.dw-links a[aria-current]{color:var(--emerald)}
body.menu-open .dw-links a{opacity:1;transform:none}

.drawer hr,.dw-actions{margin-top:30px}
.dw-actions{display:flex;flex-direction:column;gap:9px;margin-bottom:26px}
.dw-actions + .dw-lbl{margin-top:4px}
.dw-lbl:nth-of-type(2){margin-top:28px}

/* the WhatsApp button is the primary action on a phone, so it is the only
   filled thing in the panel */
.dw-wa,.dw-row{
  display:flex;align-items:center;gap:14px;
  border-radius:18px;padding:14px 16px;min-height:56px;
  transition:transform .3s var(--ease),box-shadow .3s,background .3s;
}
.dw-wa{background:var(--emerald);color:#fff;box-shadow:0 12px 26px rgba(62,102,49,.28)}
.dw-wa:active{transform:scale(.985)}
.dw-row{background:var(--white);color:var(--text);box-shadow:0 6px 16px rgba(45,72,35,.06)}
.dw-wa span,.dw-row span{display:flex;flex-direction:column;min-width:0;flex:1}
.dw-wa b,.dw-row b{font-size:.98rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.dw-wa small{font-size:.84rem;font-weight:500;color:rgba(255,255,255,.85);overflow-wrap:anywhere}
.dw-row small{font-size:.84rem;font-weight:500;color:var(--muted);overflow-wrap:anywhere}
.dw-wa .ar{font-style:normal;font-size:1rem;opacity:.8;flex:none}
.ico-wa,.ico-dw{width:24px;height:24px;flex:none}
/* on the filled green button the icon needs a light plate or it disappears
   into the background; on the white rows it sits on the card itself */
.dw-wa .ico-wa{
  width:38px;height:38px;padding:4px;border-radius:12px;
  background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.dw-row .ico-dw{color:var(--emerald-dk)}

.dw-foot{
  display:flex;gap:13px;align-items:flex-start;margin-top:auto;padding-top:22px;
  border-top:1px solid var(--hair-d);color:var(--muted);
}
.dw-foot .ico-dw{color:var(--emerald-dk);margin-top:1px}
.dw-foot address{font-style:normal;font-size:.88rem;line-height:1.7}
.dw-hours{margin:12px 0 0;font-size:.82rem;color:var(--muted)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-l{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease)}
.rv-l.in{clip-path:inset(0 0 0 0)}
[data-stagger]>*{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .7s var(--ease),transform .8s var(--ease)}
[data-stagger].in>*{opacity:1;transform:none}
/* the mask clips the reveal, and at display sizes it was also clipping the
   descenders on p, g and y. Extra room below, pulled back with a negative
   margin so the spacing between lines does not change. */
.line-mask{display:block;overflow:hidden;padding-block:.05em .18em;margin-bottom:-.13em}
.line-mask>span{display:block;transform:translateY(110%);transition:transform 1s var(--ease)}
.in .line-mask>span,.line-mask.in>span{transform:none}
@media (prefers-reduced-motion:reduce){
  .rv,[data-stagger]>*{opacity:1!important;transform:none!important}
  .rv-l{clip-path:none!important}
  .line-mask>span{transform:none!important}
}

/* ---------- image slots ---------- */
.slot{
  position:relative;overflow:hidden;border-radius:var(--rad-lg);isolation:isolate;
  box-shadow:var(--shadow);
  background-color:var(--mint);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%230E7A4A' stroke-opacity='.24' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M150 42c30 26 44 52 44 76s-16 50-44 70c-28-20-44-46-44-70s14-50 44-76Z'/%3E%3Cpath d='M150 42v146'/%3E%3Cpath d='M108 100c16 7 30 18 42 32m42-32c-16 7-30 18-42 32'/%3E%3Cpath d='M40 240q37-30 74 0t74 0 72 0'/%3E%3C/g%3E%3Cg fill='%230E7A4A' fill-opacity='.16'%3E%3Ccircle cx='56' cy='58' r='6'/%3E%3Ccircle cx='250' cy='80' r='6'/%3E%3Ccircle cx='84' cy='268' r='6'/%3E%3Ccircle cx='236' cy='258' r='6'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(120% 92% at 16% 6%,rgba(150,191,76,.55),transparent 60%),
    radial-gradient(110% 100% at 88% 88%,rgba(62,102,49,.42),transparent 58%),
    linear-gradient(150deg,#DFF3E6,#C6E9D5);
  background-repeat:no-repeat,repeat,repeat,repeat;
  background-size:min(56%,210px) auto,auto,auto,auto;
  background-position:52% 46%,center,center,center;
}
.slot picture{position:absolute;inset:0;z-index:1;display:block;border-radius:inherit;overflow:hidden}
.slot .im{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.slot .tag{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;white-space:nowrap;
  font-size:.62rem;font-weight:650;letter-spacing:.03em;
  background:rgba(255,255,255,.93);color:var(--emerald-dk);
  padding:5px 11px;border-radius:100px;box-shadow:0 4px 12px rgba(45,72,35,.12);
}
html.slots-hidden .slot .tag{display:none}
.slot.r1{aspect-ratio:1/1}
.slot.r43{aspect-ratio:4/3}
.slot.r34{aspect-ratio:3/4}
.slot.r169{aspect-ratio:16/9}
.slot.r21{aspect-ratio:2/1}
.slot.tall{aspect-ratio:5/7}
.slot.zoom .im{transition:transform 1.1s var(--ease)}
a:hover .slot.zoom .im,.card:hover .slot.zoom .im{transform:scale(1.05)}

/* Feature images are rounded squares, not blobs. One radius everywhere so the
   photos read as a set. */
.split .slot,.phero .slot,.stack-imgs>.slot{border-radius:var(--rad-lg)}

/* placeholder tokens */
.ph{
  font-size:.9em;font-weight:650;color:var(--emerald-dk);
  background:var(--lime-soft);border-radius:100px;padding:.1em .55em;white-space:normal;
}
.deep .ph,.ftr .ph{background:rgba(150,191,76,.2);color:var(--lime)}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;padding-bottom:40px;
  background:linear-gradient(170deg,var(--mint-2) 0%,var(--cream) 55%,var(--mint-2) 100%);
  border-radius:0 0 var(--curve) var(--curve);
}
.hero-bg{position:absolute;inset:0;z-index:1}
.hero-bg .glow{
  position:absolute;left:58%;top:34%;width:min(88vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:
    radial-gradient(closest-side,rgba(150,191,76,.5),transparent 70%) 20% 30%/60% 60% no-repeat,
    radial-gradient(closest-side,rgba(62,102,49,.42),transparent 70%) 78% 24%/62% 62% no-repeat,
    radial-gradient(closest-side,rgba(218,234,185,.9),transparent 70%) 46% 82%/70% 70% no-repeat;
  filter:blur(24px);opacity:.85;animation:drift 22s ease-in-out infinite;
}
@keyframes drift{0%,100%{transform:translate(-50%,-50%) rotate(0) scale(1)}50%{transform:translate(-50%,-52%) rotate(8deg) scale(1.06)}}
.hero-bg .vig{
  position:absolute;inset:0;
  background:radial-gradient(80% 60% at 50% 50%,transparent,rgba(251,253,249,.55) 88%);
}
.hero-bg .grain{
  position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(45,72,35,.07) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,transparent 40%,#000);
  mask-image:radial-gradient(70% 60% at 50% 50%,transparent 40%,#000);
}
.hero-rules{display:none}
/* A spice photograph sits behind the hero at a tenth of its strength. Low enough
   that the heading keeps its contrast, strong enough that the page is obviously
   about spices before a word is read. */
.hero-photo{position:absolute;inset:0;z-index:0;opacity:.10;overflow:hidden}
.hero-photo picture,.hero-photo img{width:100%;height:100%;display:block}
.hero-photo img{object-fit:cover;object-position:center}
/* the crop is tighter on a phone, so more of the dark part of the photograph
   fills the frame — it needs to sit back further to keep the text readable */
@media(max-width:700px){.hero-photo{opacity:.07}}
.hero-plant{position:absolute;right:-4%;top:7%;width:min(44vw,560px);z-index:1;opacity:.75;animation:float 17s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(2deg)}}
.hero-inner{position:relative;z-index:2;width:100%;padding-top:clamp(110px,13vh,150px)}
.hero h1{max-width:16ch}
.hero .lede{margin-top:22px}

/* The hero used to put every fact inside one wide white card, and it read as a
   wall of text you had to work through. The pieces stand apart now: the buttons
   on their own line, then one small rounded box per fact, which is what a
   visitor actually scans before deciding whether to keep reading. */
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(26px,3.4vw,38px)}
.hero-stats{
  list-style:none;margin:clamp(30px,4.4vw,52px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px);
}
.hero-stats li{
  background:rgba(255,255,255,.82);backdrop-filter:blur(10px);
  border-radius:22px;padding:clamp(16px,1.9vw,24px) clamp(14px,1.6vw,22px);
  box-shadow:0 10px 26px rgba(45,72,35,.08);
  display:flex;flex-direction:column;gap:7px;min-width:0;
}
.hero-stats b{
  font-family:var(--display);font-weight:750;letter-spacing:-.03em;line-height:1;
  font-size:clamp(1.5rem,2.5vw,2.1rem);color:var(--text);font-variant-numeric:tabular-nums;
}
.hero-stats span{
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);line-height:1.35;
}
@media(max-width:820px){.hero-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:380px){.hero-stats b{font-size:1.35rem}.hero-stats span{font-size:.6rem}}

/* centred hero */
.hero-mid .hero-inner{text-align:center}
.hero-mid h1{max-width:22ch;margin-inline:auto}
.hero-mid .lede{margin-inline:auto}
.hero-mid .lbl{justify-content:center}
.hero-mid .hero-cta{justify-content:center}
.hero-mid .hero-stats{max-width:1020px;margin-inline:auto}
.hero-mid .hero-stats li{align-items:center;text-align:center}
.hero-mid .scroll-cue{justify-content:center}

/* the 404 page still uses the original single card */
.hero-meta{
  display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,40px);align-items:center;justify-content:space-between;
  margin-top:clamp(30px,5vw,52px);padding:22px clamp(18px,2.4vw,30px);
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px);
  border-radius:var(--rad);box-shadow:var(--shadow);
}
.hero-meta dl{margin:0;display:flex;gap:clamp(18px,3vw,42px);flex-wrap:wrap}
.hero-meta dt{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--emerald-dk);margin-bottom:5px}
.hero-meta dd{margin:0;font-size:.92rem;max-width:22ch;color:var(--text)}
.scroll-cue{display:flex;align-items:center;gap:10px;font-size:.68rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.scroll-cue .bar{width:48px;height:3px;border-radius:3px;background:var(--mint);position:relative;overflow:hidden}
.scroll-cue .bar::after{content:"";position:absolute;inset:0;background:var(--emerald);animation:sweep 2.4s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@media(max-width:900px){.hero-plant{width:74vw;right:-20%;top:auto;bottom:34%;opacity:.3}}

/* inner page hero — light mint pillow with a deep curve */
.phero{
  position:relative;overflow:hidden;
  padding-top:clamp(126px,15vh,180px);padding-bottom:clamp(52px,7vw,86px);
  background:linear-gradient(160deg,var(--mint) 0%,var(--mint-2) 58%,#F2FAF5 100%);
  border-radius:0 0 var(--curve) var(--curve);
}
.phero::before{
  content:"";position:absolute;right:-8%;top:-45%;width:min(64vw,720px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(150,191,76,.45),transparent 72%);filter:blur(20px);
}
.phero::after{
  content:"";position:absolute;left:-14%;bottom:-40%;width:min(50vw,560px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(62,102,49,.22),transparent 72%);filter:blur(20px);
}
.phero>*{position:relative;z-index:1}
.phero .crumb{font-size:.78rem;font-weight:550;color:var(--muted);margin-bottom:20px}
.phero .crumb a:hover{color:var(--emerald)}
.phero h1{max-width:19ch}
.phero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,5vw,60px);align-items:end}
@media(max-width:900px){.phero-grid{grid-template-columns:1fr}}

/* ---------- marquee as chips ---------- */
.marq{overflow:hidden;background:transparent;padding-block:26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marq .track{display:flex;gap:12px;width:max-content;animation:marq 44s linear infinite}
.marq:hover .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marq span{
  font-size:.92rem;font-weight:650;padding:11px 22px;border-radius:100px;
  background:var(--white);box-shadow:var(--shadow);color:var(--text);
  display:flex;align-items:center;gap:.6em;white-space:nowrap;
}
.marq span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime)}
.marq span:nth-child(even){background:var(--mint);box-shadow:none}
.marq span:nth-child(even)::after{background:var(--emerald)}

/* ---------- certification marks, on a loop ----------
   The track holds the same list twice and slides exactly half its width, so the
   loop closes with nothing visible happening. Duration scales with the number of
   marks rather than being fixed, so adding a seventh logo does not speed it up.
   It pauses on hover and on keyboard focus, and stops completely for anyone who
   has asked their system to reduce motion — a strip that never stops is the kind
   of thing that makes a page unreadable for some people. */
.certband{padding-block:clamp(34px,5vw,64px)}
.certband-head{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.certband-note{margin-top:24px;max-width:78ch}
.certmarq{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.ctrack{
  list-style:none;margin:0;padding:8px 0;
  display:flex;gap:clamp(12px,1.5vw,20px);width:max-content;
  animation:ctrack 34s linear infinite;
}
@keyframes ctrack{to{transform:translateX(-50%)}}
.certmarq:hover .ctrack,.certmarq:focus-within .ctrack{animation-play-state:paused}
.ctrack li{
  flex:none;width:clamp(150px,17vw,196px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:var(--white);border-radius:22px;padding:22px 18px;
  box-shadow:0 8px 22px rgba(45,72,35,.07);
}
.ctrack img{
  width:100%;max-width:132px;height:74px;object-fit:contain;
  /* the marks arrive in six different palettes; a light touch of desaturation
     stops the strip looking like a sticker sheet without altering any mark */
  filter:saturate(.92);
}
.ctrack span{
  font-size:.7rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-align:center;line-height:1.3;
}
.deep .ctrack li,.ftr .ctrack li{background:rgba(255,255,255,.92)}
@media (prefers-reduced-motion:reduce){
  .ctrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .ctrack li:nth-child(n+7){display:none}
  .certmarq{-webkit-mask-image:none;mask-image:none}
}

/* ---------- cards / rail ---------- */
/* The rail drifts on its own (see site.js), so snapping is off: mandatory snap
   fights a scroll position that moves a fraction of a pixel at a time and the
   result judders. Swiping still feels right without it. */
.rail{display:flex;gap:clamp(14px,1.6vw,22px);overflow-x:auto;padding:6px 0 20px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{flex:0 0 clamp(230px,25vw,304px)}
/* the second printing of the nine cards, there only so the loop closes */
.rail-dupe{opacity:1}
@media (prefers-reduced-motion:reduce){.rail>.rail-dupe{display:none}}
.card{
  display:block;position:relative;background:var(--white);border-radius:var(--rad);
  padding:14px;box-shadow:var(--shadow);transition:transform .45s var(--ease),box-shadow .45s;
}
.paper .card{background:var(--white)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card .slot{margin-bottom:14px;border-radius:20px;box-shadow:none}
.card h3{font-family:var(--display);font-weight:700;font-size:1.16rem;margin:0 0 4px;letter-spacing:-.025em;padding-inline:6px}
.card .lat{font-size:.76rem;color:var(--muted);padding-inline:6px;display:block}
.card .meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding:12px 6px 4px;border-top:1px solid var(--hair-d)}
.card .meta em{font-style:normal;font-size:.75rem;font-weight:650;color:var(--emerald-dk)}
.card:hover .go{transform:translate(3px,-3px);color:var(--emerald)}
.go{transition:transform .35s var(--ease),color .35s}
.rail-nav{display:flex;gap:8px}
.rail-nav button{width:46px;height:46px;border-radius:100px;background:var(--white);box-shadow:var(--shadow);display:grid;place-items:center;transition:.3s}
.rail-nav button:hover{background:var(--emerald);color:#fff}

/* feature tiles */
.tile{
  background:var(--white);border-radius:var(--rad);padding:clamp(22px,2.5vw,30px);
  box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s;
}
.deep .tile,.ftr .tile{background:rgba(255,255,255,.07);box-shadow:none}
.tile::after{
  content:"";position:absolute;right:-38px;top:-38px;width:110px;height:110px;border-radius:50%;
  background:var(--lime-soft);opacity:.55;transition:transform .55s var(--ease);
}
.tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.tile:hover::after{transform:scale(1.35)}
.tile>*{position:relative;z-index:1}
.tile h3{font-family:var(--display);font-weight:700;font-size:1.16rem;margin:14px 0 9px;letter-spacing:-.025em}
.tile p{color:var(--muted);font-size:.94rem;margin:0}
.tile .ico{width:44px;height:44px;padding:9px;border-radius:14px;background:var(--mint);color:var(--emerald-dk)}

/* ---------- editorial index ---------- */
.idx{display:grid;gap:12px;border:0}
.idx-row{
  background:var(--white);border:0;border-radius:22px;overflow:hidden;
  box-shadow:0 8px 22px rgba(45,72,35,.06);transition:box-shadow .4s,transform .4s var(--ease);
}
.deep .idx-row,.paper .idx-row{background:var(--white)}
.idx-row:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.idx-row.open{box-shadow:var(--shadow-lg)}
.idx-head{display:grid;grid-template-columns:62px 1fr auto;gap:clamp(10px,2vw,28px);align-items:center;width:100%;text-align:left;padding:clamp(16px,2vw,24px) clamp(16px,2.2vw,26px)}
.idx-row::before{display:none}
.idx-head h3{font-family:var(--display);font-weight:700;font-size:clamp(1.08rem,1.8vw,1.42rem);margin:0;letter-spacing:-.025em}
.idx-head .plus{width:36px;height:36px;border-radius:100px;background:var(--mint);display:grid;place-items:center;position:relative;flex:none;transition:.35s}
.idx-head .plus::before,.idx-head .plus::after{content:"";position:absolute;background:var(--emerald-dk);border-radius:2px;transition:transform .45s var(--ease),opacity .3s,background .3s}
.idx-head .plus::before{width:13px;height:2px}
.idx-head .plus::after{width:2px;height:13px}
.idx-row.open .plus{background:var(--emerald)}
.idx-row.open .plus::before,.idx-row.open .plus::after{background:#fff}
.idx-row.open .plus::after{transform:rotate(90deg);opacity:0}
.idx-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.idx-row.open .idx-body{grid-template-rows:1fr}
.idx-body>div{overflow:hidden}
.idx-inner{display:grid;grid-template-columns:62px 1fr 1fr;gap:clamp(10px,2vw,28px);padding:0 clamp(16px,2.2vw,26px) 26px}
.idx-inner p{color:var(--muted);margin:0}
.idx-inner ul{margin:0;padding-left:1.1em;color:var(--muted);font-size:.92rem}
.idx-inner li{margin-bottom:.35em}
@media(max-width:820px){
  .idx-head{grid-template-columns:38px 1fr auto}
  .idx-inner{grid-template-columns:1fr;padding-left:clamp(16px,2.2vw,26px)}
}

/* ---------- sticky process ---------- */
.proc{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4.5vw,68px);align-items:start}
.proc-sticky{position:sticky;top:120px}
.proc-steps{counter-reset:st;display:grid;gap:14px}
.proc-step{
  background:var(--white);border-radius:22px;padding:clamp(20px,2.4vw,28px);border:0;
  box-shadow:0 8px 22px rgba(45,72,35,.06);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2vw,24px);
  transition:transform .4s var(--ease),box-shadow .4s;
}
.proc-step:hover{transform:translateX(5px);box-shadow:var(--shadow)}
.proc-step:last-child{border-bottom:0}
.proc-step .n{
  counter-increment:st;font-size:.82rem;font-weight:750;color:#fff;
  width:38px;height:38px;border-radius:100px;background:var(--emerald);
  display:grid;place-items:center;
}
.proc-step .n::before{content:"0" counter(st)}
.proc-step h3{font-family:var(--display);font-weight:700;font-size:clamp(1.12rem,1.9vw,1.45rem);margin:.3em 0 8px;letter-spacing:-.025em}
.proc-step p{color:var(--muted);margin:0;max-width:52ch}
.proc-step .kv{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{
  font-size:.73rem;font-weight:650;border-radius:100px;padding:6px 13px;
  background:var(--mint);color:var(--emerald-dk);display:inline-block;
}
.deep .chip,.ftr .chip{background:rgba(150,191,76,.16);color:var(--lime)}
@media(max-width:960px){.proc{grid-template-columns:1fr}.proc-sticky{position:static}}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,76px);align-items:center}
.split.rev>*:first-child{order:2}
@media(max-width:900px){.split{grid-template-columns:1fr}.split.rev>*:first-child{order:0}}
/* the smaller image hangs off the bottom right of the larger one, so anything
   printed under the stack needs that overhang reserved or it sits behind it */
.stack-imgs{position:relative;margin-bottom:calc(8% + 10px)}
@media(max-width:600px){.stack-imgs{margin-bottom:0}}
.stack-imgs .b{position:absolute;width:46%;right:-4%;bottom:-8%}
.stack-imgs .b .slot{border-radius:24px;border:7px solid var(--white);box-shadow:var(--shadow-lg)}
@media(max-width:600px){.stack-imgs .b{position:static;width:100%;margin-top:14px}.stack-imgs .b .slot{border-width:0}}

/* ---------- fact strip as pills ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;border:0;margin:0}
.facts div{padding:clamp(18px,2.2vw,26px);background:var(--white);border-radius:22px;border:0;box-shadow:0 8px 22px rgba(45,72,35,.06)}
.paper .facts div{background:var(--white)}
.facts dt{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--emerald-dk);margin-bottom:9px}
.facts dd{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.08rem,1.6vw,1.35rem);letter-spacing:-.025em;line-height:1.25}
.facts dd .ph{font-size:.66em;line-height:1.6;display:inline-block}
@media(max-width:820px){.facts{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.facts{grid-template-columns:1fr}}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th,.tbl td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--hair-d);vertical-align:top}
.tbl thead th{background:var(--mint);font-size:.7rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--emerald-dk);border-bottom:0}
.tbl thead th:first-child{border-radius:18px 0 0 0}
.tbl thead th:last-child{border-radius:0 18px 0 0}
.tbl tbody th{font-weight:650}
.tbl tbody tr:last-child td,.tbl tbody tr:last-child th{border-bottom:0}
.tbl tr:hover td{background:rgba(150,191,76,.14)}
.tbl-wrap{overflow:hidden;overflow-x:auto;border-radius:20px;background:var(--white);box-shadow:var(--shadow)}
.deep .tbl-wrap,.ftr .tbl-wrap{background:rgba(255,255,255,.07);box-shadow:none}
.deep .tbl thead th,.ftr .tbl thead th{background:rgba(150,191,76,.16);color:var(--lime)}

/* ---------- the nine products, as one band ----------
   One row of nine on a wide screen, a 3x3 block below that. No other split is
   used, because nine only divides evenly into those two and a row of five above
   a row of four looks like a mistake rather than a choice. */
.mosaic{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,.9vw,14px)}
.mos-tile{
  display:block;position:relative;border-radius:18px;overflow:hidden;
  background:var(--white);box-shadow:0 6px 18px rgba(45,72,35,.07);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.mos-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.mos-tile .slot{border-radius:18px}
.mos-tile>span{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:26px 10px 9px;text-align:center;
  font-size:.68rem;font-weight:750;letter-spacing:.04em;line-height:1.2;color:#fff;
  background:linear-gradient(transparent,rgba(26,47,20,.82));
  overflow-wrap:anywhere;
}
@media(max-width:1000px){
  .mosaic{grid-template-columns:repeat(3,1fr)}
  .mos-tile>span{font-size:.76rem;padding:30px 12px 12px}
}
@media(max-width:520px){.mosaic{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.mos-tile>span{font-size:.7rem}}
@media (prefers-reduced-motion:reduce){.mos-tile:hover{transform:none}}

/* ---------- the nine checks, as a flow ----------
   Three across on a desktop, so nine lands as a clean 3x3 block and the eye
   reads it as one process rather than a list. The connector is a chevron on the
   right edge of every card except the last in its row; the column count changes
   at each breakpoint, so the rule that hides those chevrons changes with it. */
.qcflow{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);
  counter-reset:qc;
}
.qc-step{
  position:relative;background:var(--white);border-radius:var(--rad);
  padding:clamp(20px,2.4vw,30px);box-shadow:0 8px 22px rgba(45,72,35,.06);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.qc-step:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.qc-n{
  position:absolute;top:clamp(18px,2.2vw,26px);right:clamp(18px,2.2vw,26px);
  font-size:.68rem;font-weight:750;letter-spacing:.1em;color:var(--emerald);opacity:.5;
}
.qc-ico{
  width:44px;height:44px;padding:9px;border-radius:14px;
  background:var(--mint);color:var(--emerald-dk);display:block;
}
.qc-step h3{
  margin:16px 0 6px;font-family:var(--display);font-weight:700;
  font-size:clamp(.98rem,1.18vw,1.08rem);letter-spacing:-.02em;line-height:1.28;
}
.qc-step p{margin:0;font-size:.86rem;line-height:1.55;color:var(--muted)}
/* the arrow between one check and the next */
.qc-step::after{
  content:"";position:absolute;top:50%;right:calc(clamp(12px,1.6vw,20px) / -2);
  width:9px;height:9px;margin-top:-5px;margin-right:-4px;
  border-top:2px solid var(--lime);border-right:2px solid var(--lime);
  transform:rotate(45deg);border-radius:1px;
}
.qcflow>.qc-step:nth-child(3n)::after,.qcflow>.qc-step:last-child::after{content:none}
@media(max-width:900px){
  .qcflow{grid-template-columns:repeat(2,1fr)}
  .qcflow>.qc-step:nth-child(3n)::after{content:""}
  .qcflow>.qc-step:nth-child(2n)::after,.qcflow>.qc-step:last-child::after{content:none}
}
@media(max-width:620px){
  .qcflow{grid-template-columns:1fr}
  .qc-step{display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:start;padding:18px}
  .qc-step h3{grid-column:2;margin:0 0 4px}
  .qc-step p{grid-column:2}
  .qc-ico{grid-row:span 2}
  .qc-n{position:static;grid-column:2;order:-1;display:none}
  /* pointing down the column now, not across */
  .qcflow>.qc-step::after,.qcflow>.qc-step:nth-child(2n)::after,.qcflow>.qc-step:nth-child(3n)::after{
    content:"";top:auto;bottom:calc(clamp(12px,1.6vw,20px) / -2);left:50%;right:auto;
    margin:0 0 -4px -5px;transform:rotate(135deg);
  }
  .qcflow>.qc-step:last-child::after{content:none}
}
@media (prefers-reduced-motion:reduce){.qc-step:hover{transform:none}}

/* ---------- HS codes ----------
   The code itself is the thing a customs broker copies, so it is set tabular and
   a touch larger than the row text, and it never wraps mid-code. Where one
   product carries more than one code, the name cell spans its rows so the table
   still reads as one product per block. */
/* a code that wraps mid-number is useless, so the table keeps a floor width and
   scrolls inside its own box on a phone rather than squeezing the columns */
.tbl.hsn{min-width:600px}
.tbl.hsn td b{display:block;font-weight:700}
.tbl.hsn td .sub{display:block;font-style:normal;font-size:.78rem;color:var(--muted);margin-top:2px}
.tbl.hsn td[rowspan]{vertical-align:top;border-right:1px solid var(--hair-d)}
.mono-c{
  font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.02em;
  white-space:nowrap;color:var(--emerald-dk);
}
/* the same codes on a product page, outside a table */
.hs{display:grid;gap:10px;margin-top:14px}
.hs-row{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  background:var(--white);border-radius:14px;padding:12px 16px;
  box-shadow:0 6px 16px rgba(45,72,35,.06);
}
.hs-row b{
  font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.02em;
  white-space:nowrap;color:var(--emerald-dk);font-size:1.02rem;
}
.hs-row span{font-size:.88rem;color:var(--muted);min-width:0}
.paper .hs-row{background:var(--white)}
.deep .hs-row,.ftr .hs-row{background:rgba(255,255,255,.07);box-shadow:none}
.deep .hs-row b,.ftr .hs-row b{color:var(--lime)}

/* ---------- forms ---------- */
.form{display:grid;gap:18px}
.f2{grid-template-columns:1fr 1fr}
@media(max-width:700px){.f2{grid-template-columns:1fr}}
.field{position:relative;display:block}
.field>span{display:block;font-size:.73rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--emerald-dk);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;background:var(--white);border:2px solid transparent;border-radius:14px;
  color:inherit;font:inherit;font-size:.96rem;padding:12px 15px;
  box-shadow:0 4px 14px rgba(45,72,35,.05);
  transition:border-color .3s,box-shadow .3s;appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--emerald-dk) 50%),linear-gradient(135deg,var(--emerald-dk) 50%,transparent 50%);
  background-position:calc(100% - 20px) 23px,calc(100% - 15px) 23px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px;
}
.field textarea{min-height:124px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 4px rgba(62,102,49,.14)}
.field.err input,.field.err select,.field.err textarea{border-color:#C0503F}
.field .msg{display:none;font-size:.76rem;font-weight:550;color:#C0503F;margin-top:5px}
.field.err .msg{display:block}
.hp{position:absolute!important;left:-9999px}
.form-note{font-size:.79rem;color:var(--muted);line-height:1.6}
.form-ok{display:none;border-radius:22px;padding:22px 24px;background:var(--mint);box-shadow:var(--shadow)}
.form-ok.show{display:block}

/* ---------- accordion ---------- */
.acc{display:grid;gap:10px;border:0}
.acc-item{background:var(--white);border:0;border-radius:20px;box-shadow:0 8px 22px rgba(45,72,35,.05);overflow:hidden}
.acc-q{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;text-align:left;padding:18px 22px;font-size:1rem;font-weight:600}
.acc-q .plus{width:28px;height:28px;flex:none;position:relative;border-radius:100px;background:var(--mint);display:grid;place-items:center;transition:.3s}
.acc-q .plus::before,.acc-q .plus::after{content:"";position:absolute;background:var(--emerald-dk);border-radius:2px;transition:transform .45s var(--ease),opacity .3s,background .3s}
.acc-q .plus::before{width:11px;height:2px}
.acc-q .plus::after{width:2px;height:11px}
.acc-item.open .acc-q{color:var(--emerald-dk)}
.acc-item.open .plus{background:var(--emerald)}
.acc-item.open .plus::before{background:#fff}
.acc-item.open .plus::after{opacity:0}
.acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc-item.open .acc-a{grid-template-rows:1fr}
.acc-a>div{overflow:hidden}
.acc-a p{color:var(--muted);max-width:72ch;padding:0 22px 20px;margin:0}

/* ---------- filter pills ---------- */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{font-size:.82rem;font-weight:650;border:0;background:var(--white);box-shadow:0 6px 16px rgba(45,72,35,.06);border-radius:100px;padding:10px 18px;transition:.3s}
.pill:hover{background:var(--mint);color:var(--emerald-dk)}
.pill.on{background:var(--emerald);color:#fff;box-shadow:0 10px 22px rgba(62,102,49,.3)}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;text-align:center;padding-block:clamp(64px,9vw,116px);border-radius:var(--curve)}
.cta:not(.paper){background:var(--mint-2)}
.cta .glow{
  position:absolute;left:50%;top:50%;width:min(120vw,900px);aspect-ratio:1.6;transform:translate(-50%,-50%);
  background:
    radial-gradient(closest-side,rgba(150,191,76,.5),transparent 70%) 24% 40%/56% 70% no-repeat,
    radial-gradient(closest-side,rgba(62,102,49,.3),transparent 70%) 76% 55%/56% 70% no-repeat;
  filter:blur(26px);
}
.cta h2{max-width:18ch;margin-inline:auto}
.cta .lbl{margin-inline:auto}

/* ---------- footer ---------- */
.ftr{
  background:var(--forest);color:#fff;position:relative;overflow:hidden;
  border-radius:var(--curve) var(--curve) 0 0;margin-top:clamp(-1px,0,0px);
  padding-top:clamp(56px,7vw,92px);
  --fg:#fff;--muted:rgba(255,255,255,.74);--accent:var(--lime);--hair-d:rgba(255,255,255,.15);
}
.ftr::before{
  content:"";position:absolute;left:-10%;top:-25%;width:min(60vw,660px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(62,102,49,.4),transparent 72%);filter:blur(24px);
}
.ftr>*{position:relative;z-index:1}
.ftr-top{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:clamp(22px,3vw,44px);padding-bottom:clamp(34px,5vw,60px)}
@media(max-width:960px){.ftr-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr-top{grid-template-columns:1fr}}
.ftr h4{font-size:.7rem;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--lime);margin:0 0 15px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr ul a{font-size:.9rem;color:rgba(255,255,255,.82);transition:.3s;display:inline-block}
.ftr ul a:hover{color:var(--lime);transform:translateX(3px)}
.ftr address{font-style:normal;font-size:.9rem;color:rgba(255,255,255,.78);line-height:1.9}
.ftr .brand b{color:#fff}
.ftr .brand small{color:rgba(255,255,255,.6)}
.wordmark{
  font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,9vw,8rem);line-height:.9;
  letter-spacing:-.05em;color:rgba(255,255,255,.08);white-space:nowrap;user-select:none;overflow:hidden;
  text-align:center;
}
/* the studio credit, under the client's legal line. Quieter than everything
   above it, but the WhatsApp number is a live link — it is how the next client
   actually gets in touch. */
.ftr-credit{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-block:18px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.78rem;color:rgba(255,255,255,.55);
}
.ftr-credit b{font-weight:700;color:rgba(255,255,255,.82)}
.credit-wa{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 14px 7px 8px;border-radius:100px;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.82);
  font-weight:650;transition:background .3s,color .3s;
}
.credit-wa:hover{background:rgba(255,255,255,.16);color:#fff}
.credit-wa .ico-wa{width:24px;height:24px;flex:none}
@media(max-width:560px){.ftr-credit{justify-content:center;text-align:center}}

.ftr-btm{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-block:20px;border-top:1px solid rgba(255,255,255,.15);font-size:.8rem;color:rgba(255,255,255,.62)}
.ftr-btm a:hover{color:var(--lime)}

/* ---------- long form article ---------- */
.art article{
  max-width:74ch;margin-inline:auto;font-size:1.05rem;line-height:1.8;
  background:var(--white);border-radius:var(--rad);padding:clamp(26px,4vw,60px);box-shadow:var(--shadow);
}
.art article p{color:var(--muted);margin:0 0 1.2em}
.art article h2{
  font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.1vw,1.75rem);
  letter-spacing:-.03em;line-height:1.2;margin:1.9em 0 .6em;color:var(--text);
}
.art article h2::before{content:"";display:block;width:38px;height:4px;border-radius:4px;background:var(--lime);margin-bottom:.6em}
.art article ul{margin:0 0 1.4em;padding-left:1.15em;color:var(--muted)}
.art article li{margin-bottom:.5em}
.art article .drop{font-size:1.16rem;line-height:1.62;color:var(--text)}
.art article .drop::first-letter{
  font-family:var(--display);font-weight:800;float:left;font-size:3.1em;line-height:.84;
  padding:.05em .11em 0 0;color:var(--emerald);
}
.art article blockquote{
  margin:1.9em 0;padding:22px 26px;border:0;border-radius:20px;
  background:var(--mint-2);font-weight:600;
  font-size:clamp(1.04rem,1.5vw,1.2rem);line-height:1.5;letter-spacing:-.012em;color:var(--text);
}
.art article .note{margin-top:2em;font-size:.92rem}

/* ---------- misc ---------- */
.cursor{
  position:fixed;top:0;left:0;width:300px;height:300px;border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(closest-side,rgba(150,191,76,.22),transparent 70%);
  transform:translate(-50%,-50%);opacity:0;transition:opacity .5s;
}
body.has-cursor .cursor{opacity:1}
@media(hover:none){.cursor{display:none}}
.skip{position:absolute;left:-9999px;top:0;background:var(--emerald);color:#fff;padding:10px 18px;z-index:200;font-size:.8rem;border-radius:0 0 14px 0}
.skip:focus{left:0;top:0}
:focus-visible{outline:3px solid var(--emerald);outline-offset:3px;border-radius:8px}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.center{text-align:center}
.max60{max-width:60ch}.max48{max-width:48ch}
.op60{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.two-col{columns:2;column-gap:clamp(24px,4vw,50px)}
@media(max-width:760px){.two-col{columns:1}}
.note{border:0;border-radius:18px;background:var(--lime-soft);padding:14px 18px;color:#375B1F;font-size:.92rem}
.deep .note,.ftr .note{background:rgba(150,191,76,.14);color:rgba(255,255,255,.85)}

@media(max-width:760px){
  .card{padding:10px}
  .card h3{font-size:1.02rem}
  .card .lat{font-size:.72rem}
  .card .meta{margin-top:9px;padding-top:9px}
  .card .meta em{font-size:.7rem}
}
@media(max-width:560px){
  .brand small{display:none}
  .brand .mark{width:32px;height:32px}
  .hdr{left:12px;right:12px;padding:8px 8px 8px 14px}
  .sec{padding-block:clamp(48px,11vw,72px)}
  .hero-meta{padding:18px}
  .art article{padding:22px 18px}
  .tbl th,.tbl td{padding:11px 13px}
}

/* WhatsApp in the header. On an export site this is the button that actually
   gets used: most buyers in the Gulf, Africa and South Asia will message before
   they ever fill in a form, and the link opens their WhatsApp with the enquiry
   already written out. */
.hdr-wa{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  color:var(--emerald-dk);padding:7px 14px 7px 12px;border-radius:100px;
  transition:background .3s,color .3s;
}
.hdr-wa b{display:block;font-size:.88rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.hdr-wa small{display:block;font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:1px}
/* WhatsApp's own icon already carries its green tile, so no plate behind it */
.hdr-wa .ico-wa{
  width:34px;height:34px;padding:0;border-radius:9px;background:none;
  transition:transform .3s var(--ease);
}
.hdr-wa:hover{background:var(--mint)}
.hdr-wa:hover .ico-wa{transform:scale(1.06)}
@media(max-width:1240px){.hdr-wa small{display:none}}
@media(max-width:1060px){.hdr-wa b{display:none}.hdr-wa{padding:9px}}
@media(max-width:560px){.hdr-wa{display:none}}
/* ---------- the real logo ----------
   The lockup already says "Shubham Agro", so the header carries the logo on its
   own rather than repeating the name in set type beside it. Width is left to
   auto and height is capped, so the file's own proportions are never squashed;
   width/height on the <img> keeps the space reserved before it loads. */
.brand .logo{height:clamp(34px,3.6vw,48px);width:auto;flex:none;border-radius:0}
.brand .logo-ftr{height:clamp(44px,4.8vw,64px)}
.brand-ftr{display:inline-flex;margin-bottom:14px}
.ftr-tag{
  margin:0 0 20px;font-size:.6rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
}
@media(max-width:560px){.brand .logo{height:32px}}
/* the drawn fallback mark, used only if the logo file is ever missing */
.brand img.mark{width:36px;height:36px;object-fit:contain;border-radius:9px}