/* ============================================================
   NATURE'S SOUL — Landing Page Styles
   Botanical Editorial • Cream paper, terracotta clay, neem leaf
   ============================================================ */

:root{
  --ns-cream:        #F4EFE6;
  --ns-bone:         #EBE4D6;
  --ns-soil:         #1F1A14;
  --ns-ink:          #2E2A22;
  /* primary accent — now sourced from the Nature's Soul brand green */
  --ns-brand:        #A4C540;   /* bright logo green — big fills, hero chip, "now" card */
  --ns-terracotta:   #5F8B23;   /* deep brand-leaf — buttons, key accents (readable on cream) */
  --ns-terracotta-d: #4A6E18;   /* hover */
  --ns-saffron:      #E0A03A;   /* warm secondary — glyphs, the occasional spark */
  --ns-leaf:         #3F5D3A;   /* botanical illustrations */
  --ns-moss:         #6A7A4A;
  --ns-blush:        #E8C9B0;
  --ns-stone:        #A89F8E;
  --ns-pure:         #FBF9F4;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Instrument Sans', 'Söhne', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-deva: 'Mukta', sans-serif;

  --col-gap: 24px;
  --pad-x: clamp(24px, 6vw, 96px);
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  background:var(--ns-cream);
  color:var(--ns-ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.625;
  letter-spacing:-0.005em;
  overflow-x:hidden;
  cursor:none;
}
@media (hover: none){ body{ cursor:auto; } }

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:none}
@media (hover:none){ button{cursor:pointer;} }

/* paper-grain overlay */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0 0.07  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.06;mix-blend-mode:multiply;
}

::selection{background:var(--ns-terracotta);color:var(--ns-cream)}

/* utility classes ============================================ */
.mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.18em;font-weight:500;font-size:11px}
.eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:600;color:var(--ns-ink)}
.eyebrow .num{color:var(--ns-terracotta);margin-right:8px}
.serif{font-family:var(--font-display)}
.italic{font-style:italic}
.deva{font-family:var(--font-deva);font-size:.9em}

.section{padding:clamp(96px,12vw,160px) var(--pad-x);position:relative}
.section-head{display:flex;flex-direction:column;gap:18px;margin-bottom:64px}
.section-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(36px,4.4vw,68px);
  line-height:1.02;
  letter-spacing:-0.025em;
  color:var(--ns-soil);
  max-width:18ch;
  text-wrap:balance;
}
.section-lede{
  font-size:clamp(17px,1.4vw,20px);
  line-height:1.55;
  color:var(--ns-ink);
  max-width:54ch;
  font-weight:300;
}

/* reveal-on-scroll primitive */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in{opacity:1;transform:none}
.reveal-mask{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.1s var(--ease);
}
.reveal-mask.in{clip-path:inset(0 0 0 0)}

/* ============================================================
   CURSOR
   ============================================================ */
.cursor{
  position:fixed;top:0;left:0;width:12px;height:12px;
  border-radius:99px;background:var(--ns-brand);
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease), height .35s var(--ease), background .35s var(--ease), border-radius .35s var(--ease);
  mix-blend-mode:normal;
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:transparent;font-weight:600;
}
.cursor.big{
  width:72px;height:72px;color:var(--ns-soil);background:var(--ns-brand);
}
.cursor.ring{
  background:transparent;border:1.5px solid var(--ns-soil);
  width:36px;height:36px;
}
.cursor-dot{
  position:fixed;top:0;left:0;width:4px;height:4px;border-radius:99px;
  background:var(--ns-soil);pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:opacity .2s var(--ease);
}
@media (hover:none){ .cursor,.cursor-dot{display:none} }

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce{
  background:var(--ns-soil);color:var(--ns-cream);
  height:36px;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad-x);position:relative;z-index:50;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
}
.announce-stage{position:relative;overflow:hidden;height:36px;flex:1;display:flex;align-items:center}
.announce-msg{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transform:translateY(100%);transition:transform .6s var(--ease), opacity .6s var(--ease)}
.announce-msg.in{opacity:1;transform:translateY(0)}
.announce-msg.out{opacity:0;transform:translateY(-100%)}
.announce-right{display:flex;gap:18px;align-items:center;color:var(--ns-cream);opacity:.7}
.announce-right span{display:flex;gap:6px;align-items:center}
.announce-right .sep{opacity:.4}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:sticky;top:0;z-index:40;
  padding:24px var(--pad-x);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  background:transparent;
  transition:padding .4s var(--ease), background .4s var(--ease), backdrop-filter .4s var(--ease);
}
.header.scrolled{
  padding:14px var(--pad-x);
  background:rgba(244,239,230,.82);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid rgba(31,26,20,.06);
}
.header-left{display:flex;gap:32px;align-items:center}
.header-right{display:flex;gap:28px;align-items:center;justify-content:flex-end}
.h-link{display:inline-flex;gap:8px;align-items:center;color:var(--ns-soil);font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;position:relative;padding:6px 0}
.h-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ns-soil);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.h-link:hover::after{transform:scaleX(1)}

.wordmark{
  font-family:var(--font-display);
  font-weight:400;
  font-size:24px;
  letter-spacing:-0.01em;
  display:inline-flex;align-items:center;gap:10px;color:var(--ns-soil);
}
.wordmark .monogram{
  width:44px;height:44px;flex:0 0 auto;
  object-fit:contain;
}
.wordmark-text{display:flex;flex-direction:column;line-height:1;gap:2px}
.wordmark-text .mt{font-size:20px;letter-spacing:-0.015em}
.wordmark-text .mb{font-family:var(--font-mono);font-size:8px;letter-spacing:.22em;color:var(--ns-stone)}

.icon-btn{
  width:40px;height:40px;border-radius:99px;
  display:grid;place-items:center;
  color:var(--ns-soil);position:relative;
  transition:background .3s var(--ease);
}
.icon-btn:hover{background:rgba(31,26,20,.06)}
.icon-btn .count{
  position:absolute;top:2px;right:2px;
  background:var(--ns-terracotta);color:var(--ns-cream);
  font-family:var(--font-mono);font-size:9px;font-weight:600;
  min-width:16px;height:16px;border-radius:99px;
  display:grid;place-items:center;padding:0 4px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding:48px var(--pad-x) 96px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--col-gap);
  min-height:calc(100vh - 100px);
  align-items:center;
}
.hero-text{grid-column:1 / span 7;position:relative;z-index:2;display:flex;flex-direction:column;gap:32px}
.hero-eyebrow{display:flex;gap:14px;align-items:center;color:var(--ns-soil);opacity:.85}
.hero-eyebrow .dot{width:5px;height:5px;border-radius:99px;background:var(--ns-terracotta)}
.hero-headline{
  font-family:var(--font-display);
  font-weight:350;
  font-size:clamp(64px, 11vw, 184px);
  line-height:0.92;
  letter-spacing:-0.035em;
  color:var(--ns-soil);
  position:relative;
}
.hero-headline .line{display:block;overflow:hidden}
.hero-headline .word{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.hero-headline.in .word{transform:translateY(0)}
.hero-headline .word:nth-child(2){transition-delay:.08s}
.hero-headline .word:nth-child(3){transition-delay:.16s}

.kinetic{
  font-style:italic;
  color:var(--ns-soil);
  font-variation-settings:"opsz" 144, "SOFT" 0, "wght" 350;
  animation:morph 9s var(--ease-in-out) infinite;
  display:inline-block;
}
@keyframes morph{
  0%,100%{font-variation-settings:"opsz" 144, "SOFT" 0, "wght" 350;font-style:italic}
  50%   {font-variation-settings:"opsz" 144, "SOFT" 100, "wght" 420;font-style:normal}
}
@media (prefers-reduced-motion: reduce){
  .kinetic{animation:none}
}

.hero-body{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:300;
  font-size:clamp(19px, 1.65vw, 24px);
  line-height:1.5;
  color:var(--ns-ink);
  max-width:34ch;
  letter-spacing:-0.01em;
}

.hero-ctas{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:8px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;transition:transform .4s var(--ease)}
.btn-primary{
  background:var(--ns-terracotta);color:var(--ns-cream);
  height:58px;padding:0 30px;border-radius:99px;
  position:relative;overflow:hidden;
  transition:background .35s var(--ease);
}
.btn-primary:hover{background:var(--ns-terracotta-d)}
.btn-primary .arrow{transition:transform .45s var(--ease)}
.btn-primary:hover .arrow{transform:translateX(6px)}
.btn-secondary{position:relative;color:var(--ns-soil);padding:8px 0}
.btn-secondary::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ns-soil);transform:scaleX(.4);transform-origin:left;transition:transform .5s var(--ease)}
.btn-secondary:hover::after{transform:scaleX(1)}
.btn-ghost{
  border:1px solid var(--ns-soil);height:50px;padding:0 26px;border-radius:99px;background:transparent;color:var(--ns-soil);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.btn-ghost:hover{background:var(--ns-soil);color:var(--ns-cream)}

/* hero image stack */
.hero-art{grid-column:9 / span 5;position:relative;align-self:stretch;min-height:600px}
.hero-img-main{
  position:absolute;inset:0;
  background:var(--ns-blush) center/cover no-repeat;
  border-radius:48% 52% 38% 62% / 56% 44% 56% 44%;
  overflow:hidden;
  box-shadow:0 36px 80px -24px rgba(31,26,20,.28);
  animation:blob 18s ease-in-out infinite;
}
.hero-img-main img{width:100%;height:100%;object-fit:cover;transition:transform 8s var(--ease-in-out);transform:scale(1.08)}
.hero-img-main.in img{transform:scale(1)}

@keyframes blob{
  0%,100%{border-radius:48% 52% 38% 62% / 56% 44% 56% 44%}
  50%    {border-radius:54% 46% 60% 40% / 42% 60% 40% 58%}
}

.hero-img-small{
  position:absolute;width:42%;aspect-ratio:1/1;right:-4%;top:-6%;
  border-radius:50%;overflow:hidden;
  background:var(--ns-bone);
  box-shadow:0 18px 40px -16px rgba(31,26,20,.32);
  border:8px solid var(--ns-cream);
  z-index:2;
}
.hero-img-small img{width:100%;height:100%;object-fit:cover}

/* hero floating sprig */
.hero-sprig{
  position:absolute;
  left:42%;top:18%;
  width:280px;
  color:var(--ns-leaf);opacity:.32;
  z-index:1;pointer-events:none;
  animation:sway 14s ease-in-out infinite;
  transform-origin:bottom center;
}
@keyframes sway{
  0%,100%{transform:rotate(-3deg)}
  50%{transform:rotate(6deg)}
}

/* hero tag chip floating */
.hero-chip{
  position:absolute;left:-2%;bottom:6%;
  background:var(--ns-cream);
  border:1px solid rgba(31,26,20,.08);
  border-radius:99px;padding:10px 16px 10px 12px;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 14px 30px -14px rgba(31,26,20,.18);
  z-index:3;
}
.hero-chip .avatar{
  width:28px;height:28px;border-radius:99px;background:var(--ns-brand);
  display:grid;place-items:center;color:var(--ns-soil);font-size:12px;
}
.hero-chip .label{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ns-ink)}
.hero-chip .label b{color:var(--ns-terracotta);font-weight:600}

/* as featured strip */
.featured{
  padding:0 var(--pad-x) 96px;
  display:flex;align-items:center;gap:48px;
  border-top:1px solid rgba(31,26,20,.08);
  padding-top:36px;
  margin:0 var(--pad-x);
}
.featured-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ns-stone);flex:0 0 auto;font-weight:600}
.featured-marks{display:flex;gap:56px;align-items:center;flex-wrap:wrap;flex:1}
.featured-marks .mark{font-family:var(--font-display);font-size:22px;font-weight:400;color:var(--ns-stone);opacity:.6;letter-spacing:-0.02em;transition:color .4s var(--ease), opacity .4s var(--ease);font-style:italic}
.featured-marks .mark:hover{color:var(--ns-soil);opacity:1}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-block{
  background:var(--ns-soil);color:var(--ns-cream);
  padding:64px 0;
  position:relative;
  overflow:hidden;
}
.marquee{
  display:flex;gap:48px;align-items:center;
  white-space:nowrap;
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.18em;
  font-weight:500;
  width:max-content;
  animation:marquee-l 60s linear infinite;
  padding:14px 0;
}
.marquee.reverse{animation:marquee-r 70s linear infinite}
.marquee.size-lg{font-size:28px}
.marquee.size-md{font-size:18px;opacity:.7}
.marquee .glyph{color:var(--ns-saffron);font-size:.7em}
.marquee-block:hover .marquee{animation-play-state:paused}
@keyframes marquee-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ============================================================
   CATEGORY GRID
   ============================================================ */
.cats{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:240px;
  gap:18px;
}
.cat{
  position:relative;overflow:hidden;
  background:var(--ns-bone);
  display:flex;align-items:flex-end;padding:32px;
  color:var(--ns-cream);
  transition:transform .6s var(--ease);
}
.cat .cat-img{position:absolute;inset:0;background:center/cover no-repeat;transition:transform 1.2s var(--ease)}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(31,26,20,0) 30%, rgba(31,26,20,.78) 100%);transition:opacity .4s var(--ease)}
.cat:hover .cat-img{transform:scale(1.06)}
.cat-content{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;width:100%}
.cat-subs{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:rgba(244,239,230,.85);line-height:1.8;max-width:90%}
.cat-title{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,2.6vw,40px);line-height:1;letter-spacing:-0.02em;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.cat-arrow{width:44px;height:44px;border-radius:99px;background:var(--ns-terracotta);display:grid;place-items:center;color:var(--ns-cream);flex:0 0 auto;transition:transform .4s var(--ease), width .4s var(--ease)}
.cat:hover .cat-arrow{transform:rotate(-45deg)}
.cat-border{position:absolute;inset:14px;border:1px solid rgba(244,239,230,.5);opacity:0;transform:scale(1.02);transition:opacity .4s var(--ease), transform .6s var(--ease);pointer-events:none}
.cat:hover .cat-border{opacity:1;transform:scale(1)}

.cat-fruits     {grid-column:1 / span 4; grid-row:1 / span 2}
.cat-veg        {grid-column:5 / span 4; grid-row:1 / span 1}
.cat-dairy      {grid-column:9 / span 4; grid-row:1 / span 1}
.cat-grocery    {grid-column:5 / span 8; grid-row:2 / span 1}
.cat-fresh      {grid-column:1 / span 8; grid-row:3 / span 1}
.cat-vegan      {grid-column:9 / span 4; grid-row:3 / span 1}
.cat-home       {grid-column:1 / span 12; grid-row:4 / span 1;background:var(--ns-leaf);color:var(--ns-cream);padding:24px 32px}
.cat-home::after{display:none}
.cat-home .cat-content{flex-direction:row;align-items:center;justify-content:space-between}
.cat-home .cat-title{font-size:24px;display:flex;gap:16px;align-items:center}
.cat-home .cat-subs{flex:1;color:rgba(244,239,230,.7)}

/* ============================================================
   NS FRESH CAROUSEL
   ============================================================ */
.fresh{background:var(--ns-pure)}
.fresh-head{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;margin-bottom:64px}
.fresh-nav{display:flex;gap:12px}
.car-btn{
  width:54px;height:54px;border-radius:99px;border:1px solid var(--ns-soil);
  display:grid;place-items:center;color:var(--ns-soil);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.car-btn:hover{background:var(--ns-soil);color:var(--ns-cream)}
.car-btn:disabled{opacity:.25}

.car-track{
  display:flex;gap:24px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:0 var(--pad-x) 16px;
  margin:0 calc(-1 * var(--pad-x));
  scrollbar-width:none;
}
.car-track::-webkit-scrollbar{display:none}

.fresh-card{
  flex:0 0 360px;
  scroll-snap-align:start;
  background:var(--ns-cream);
  display:flex;flex-direction:column;
  border:1px solid rgba(31,26,20,.06);
  transition:transform .5s var(--ease);
}
.fresh-card:hover{transform:translateY(-6px)}
.fresh-img{aspect-ratio:1/1.05;background:var(--ns-bone) center/cover no-repeat;position:relative;overflow:hidden}
.fresh-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.fresh-card:hover .fresh-img img{transform:scale(1.05)}
.fresh-meta{display:flex;justify-content:space-between;padding:18px 22px 8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ns-stone)}
.fresh-meta .new{color:var(--ns-terracotta)}
.fresh-name{font-family:var(--font-display);font-size:26px;font-weight:400;line-height:1.05;letter-spacing:-0.02em;padding:0 22px;color:var(--ns-soil)}
.fresh-name small{display:block;color:var(--ns-moss);font-size:18px;font-style:italic}
.fresh-foot{display:flex;justify-content:space-between;align-items:center;padding:18px 22px 22px;margin-top:16px}
.fresh-price{display:flex;flex-direction:column;gap:2px}
.fresh-price .wt{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ns-stone)}
.fresh-price .px{font-family:var(--font-display);font-size:20px;color:var(--ns-soil)}
.add-btn{
  width:48px;height:48px;border-radius:99px;background:var(--ns-soil);color:var(--ns-cream);
  display:grid;place-items:center;font-size:20px;
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.add-btn:hover{background:var(--ns-terracotta);transform:rotate(90deg)}

.fresh-progress{
  height:1px;background:rgba(31,26,20,.1);
  margin:24px var(--pad-x) 0;position:relative;overflow:hidden;
}
.fresh-progress span{position:absolute;left:0;top:0;height:100%;background:var(--ns-terracotta);width:18%;transition:width .3s var(--ease)}

/* ============================================================
   BRAND STORY — sticky scroll
   ============================================================ */
.story{
  background:var(--ns-cream);
  display:grid;grid-template-columns:6fr 5fr;gap:96px;
  padding:clamp(96px,12vw,160px) var(--pad-x);
  position:relative;
  align-items:start;
}
.story-img{
  position:sticky;top:96px;
  aspect-ratio:4/5.4;
  background:var(--ns-bone) center/cover no-repeat;
  overflow:hidden;
}
.story-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.story-cap{
  position:absolute;left:24px;bottom:24px;
  background:rgba(244,239,230,.92);backdrop-filter:blur(8px);
  padding:14px 18px;
  font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--ns-soil);
  max-width:280px;line-height:1.7;
}
.story-cap b{display:block;color:var(--ns-terracotta);margin-bottom:6px}

.story-col{position:relative;padding-top:8px}
.story-rail{position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(31,26,20,.08)}
.story-rail span{position:absolute;left:-1px;top:0;width:3px;background:var(--ns-terracotta);transition:height .3s var(--ease), top .3s var(--ease)}
.story-blocks{display:flex;flex-direction:column;gap:140px;padding-left:32px;padding-bottom:80px}
.story-blk{display:flex;flex-direction:column;gap:18px;transition:opacity .5s var(--ease), color .5s var(--ease)}
.story-blk:not(.active){opacity:.28}
.story-blk h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ns-terracotta);display:flex;gap:14px;align-items:center;font-weight:600}
.story-blk h3 svg{flex:0 0 auto}
.story-blk p{font-family:var(--font-display);font-weight:300;font-size:clamp(24px,2vw,32px);line-height:1.3;letter-spacing:-0.02em;color:var(--ns-soil)}

/* ============================================================
   BESTSELLERS
   ============================================================ */
.best-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:48px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:48px}
.chip{
  padding:10px 18px;border-radius:99px;border:1px solid rgba(31,26,20,.18);
  background:transparent;color:var(--ns-soil);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.chip.active, .chip:hover{background:var(--ns-soil);color:var(--ns-cream);border-color:var(--ns-soil)}

.products{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.prod{
  display:flex;flex-direction:column;gap:16px;
  background:var(--ns-pure);padding:18px 18px 24px;
  position:relative;
}
.prod-img{aspect-ratio:4/5;background:var(--ns-bone) center/cover no-repeat;position:relative;overflow:hidden;display:grid;place-items:center}
/* fallback painted card shown when <img> fails to load */
.prod-img.fallback, .fresh-img.fallback{
  background:linear-gradient(160deg, var(--ns-blush) 0%, var(--ns-bone) 60%, var(--ns-cream) 100%);
}
.prod-img.fallback::before, .fresh-img.fallback::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240' fill='none' stroke='%233F5D3A' stroke-width='1' stroke-linecap='round' opacity='.32'><path d='M100 220 V 40'/><path d='M100 180 C 70 175 50 158 44 134 M100 180 C 130 175 150 158 156 134'/><path d='M100 140 C 76 137 64 120 60 102 M100 140 C 124 137 136 120 140 102'/><path d='M100 100 C 82 98 74 86 72 74 M100 100 C 118 98 126 86 128 74'/><ellipse cx='40' cy='130' rx='9' ry='5' transform='rotate(-30 40 130)'/><ellipse cx='160' cy='130' rx='9' ry='5' transform='rotate(30 160 130)'/><ellipse cx='56' cy='98' rx='8' ry='4.5' transform='rotate(-25 56 98)'/><ellipse cx='144' cy='98' rx='8' ry='4.5' transform='rotate(25 144 98)'/><ellipse cx='100' cy='40' rx='13' ry='9'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:60% auto;
}
.prod-img.fallback::after, .fresh-img.fallback::after{
  content:attr(data-fallback);
  position:absolute;left:24px;right:24px;bottom:20px;
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:18px;line-height:1.15;letter-spacing:-0.01em;color:var(--ns-soil);
  text-align:center;
}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.prod:hover .prod-img img{transform:scale(1.06)}
.prod-tags{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;z-index:2}
.tag{
  font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.18em;font-weight:600;
  padding:5px 10px;border-radius:99px;background:var(--ns-cream);color:var(--ns-soil);
}
.tag.organic{color:var(--ns-leaf);display:inline-flex;gap:6px;align-items:center}
.tag.vegan{color:var(--ns-moss)}
.prod-eyebrow{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--ns-stone);font-weight:600}
.prod-name{font-family:var(--font-display);font-size:22px;font-weight:400;line-height:1.1;letter-spacing:-0.015em;color:var(--ns-soil);min-height:48px}
.prod-name .dev{font-family:var(--font-deva);font-style:normal;color:var(--ns-moss);font-size:18px;display:block;margin-top:2px;letter-spacing:0}
.prod-row{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px}
.prod-row .wt-px{display:flex;flex-direction:column;gap:2px}
.prod-row .wt-px .wt{font-family:var(--font-mono);font-size:10px;color:var(--ns-stone);letter-spacing:.18em;text-transform:uppercase}
.prod-row .wt-px .px{font-family:var(--font-display);font-size:18px;color:var(--ns-soil)}
.prod .add-btn{width:42px;height:42px}

/* ============================================================
   SEASONAL CALENDAR
   ============================================================ */
.cal{background:var(--ns-bone)}
.cal-strip{
  display:flex;gap:14px;overflow-x:auto;padding:0 var(--pad-x) 12px;margin:0 calc(-1 * var(--pad-x));
  scrollbar-width:none;
}
.cal-strip::-webkit-scrollbar{display:none}
.month{
  flex:0 0 200px;
  aspect-ratio:1/1.25;
  background:var(--ns-cream);
  padding:18px;
  display:flex;flex-direction:column;gap:14px;
  border:1px solid rgba(31,26,20,.06);
  position:relative;
  transition:transform .5s var(--ease);
}
.month-name{font-family:var(--font-display);font-style:italic;font-size:24px;color:var(--ns-soil)}
.month-num{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--ns-stone);text-transform:uppercase}
.month-art{flex:1;display:grid;place-items:center;color:var(--ns-leaf);opacity:.7}
.month-cap{font-family:var(--font-display);font-style:italic;font-size:13px;color:var(--ns-ink);line-height:1.3}
.month.now{
  flex:0 0 260px;
  background:var(--ns-brand);color:var(--ns-soil);
  transform:scale(1.04);
  box-shadow:0 24px 56px -16px rgba(164,197,64,.55);
}
.month.now .month-name, .month.now .month-cap{color:var(--ns-soil)}
.month.now .month-art{color:var(--ns-soil);opacity:.85}
.month.now .month-num{color:rgba(31,26,20,.55)}
.month.now .now-badge{
  position:absolute;top:14px;right:14px;
  background:var(--ns-soil);color:var(--ns-brand);
  padding:4px 10px;border-radius:99px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;font-weight:600;
}

.cal-readout{
  margin-top:32px;
  font-family:var(--font-display);font-style:italic;font-weight:300;
  font-size:clamp(20px,2vw,28px);line-height:1.4;color:var(--ns-soil);
  max-width:60ch;
}
.cal-readout b{font-style:normal;font-weight:500;color:var(--ns-terracotta-d)}

/* ============================================================
   VALUES STRIP
   ============================================================ */
.values{
  background:var(--ns-soil);color:var(--ns-cream);
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:80px var(--pad-x);
  gap:48px;
}
.value{display:flex;flex-direction:column;gap:18px}
.value-icon{width:48px;height:48px;color:var(--ns-saffron);transition:transform .6s var(--ease)}
.value:hover .value-icon{transform:rotate(12deg) scale(1.1)}
.value-title{font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ns-cream);font-weight:600}
.value-body{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:18px;line-height:1.5;color:rgba(244,239,230,.78)}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi{background:var(--ns-cream)}
.testi-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:24px;
}
.testi-card{
  background:var(--ns-pure);
  padding:36px;
  border:1px solid rgba(31,26,20,.06);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.testi-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -16px rgba(31,26,20,.12)}
.testi-quote{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:24px;line-height:1.4;letter-spacing:-0.015em;color:var(--ns-soil);margin-bottom:24px}
.testi-meta{display:flex;flex-direction:column;gap:4px;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ns-stone)}
.testi-meta b{color:var(--ns-soil);font-weight:600}
.testi-1{grid-column:1 / span 5;grid-row:1 / span 2}
.testi-2{grid-column:6 / span 4}
.testi-3{grid-column:10 / span 3}
.testi-press{grid-column:6 / span 3;background:var(--ns-soil);color:var(--ns-cream);display:flex;flex-direction:column;justify-content:space-between;min-height:200px}
.testi-press .pq{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:18px;line-height:1.4;color:var(--ns-cream)}
.testi-press .pl{font-family:var(--font-display);font-size:18px;color:var(--ns-saffron);font-style:italic;letter-spacing:-0.01em}
.testi-img{grid-column:9 / span 4;background:var(--ns-bone) center/cover no-repeat;min-height:200px;padding:0}
.testi-img::after{display:none}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.news{
  background:var(--ns-bone);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px;
}
.news-sprig{color:var(--ns-leaf);opacity:.7;margin-bottom:8px}
.news-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ns-terracotta);font-weight:600}
.news-title{font-family:var(--font-display);font-weight:350;font-size:clamp(40px,5vw,76px);line-height:1.02;letter-spacing:-0.025em;color:var(--ns-soil);max-width:18ch;font-style:italic}
.news-body{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:19px;line-height:1.55;color:var(--ns-ink);max-width:48ch}
.news-form{display:flex;gap:18px;align-items:end;max-width:560px;width:100%;margin-top:16px;border-bottom:1px solid rgba(31,26,20,.25);padding-bottom:14px}
.news-form input{
  flex:1;background:transparent;border:none;outline:none;
  font-family:var(--font-display);font-size:22px;color:var(--ns-soil);padding:8px 0;
  font-style:italic;font-weight:300;
}
.news-form input::placeholder{color:var(--ns-stone)}
.news-form button{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--ns-soil);display:inline-flex;gap:8px;align-items:center;padding:8px 0;
}
.news-meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ns-stone);font-weight:500;margin-top:18px}
.news-meta::before{content:"— ";color:var(--ns-terracotta)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  background:var(--ns-cream);
  padding:128px var(--pad-x) 0;
}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding-bottom:96px}
.foot-col h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ns-stone);font-weight:600;margin-bottom:24px}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.foot-col li{font-family:var(--font-display);font-weight:300;font-size:18px;color:var(--ns-soil);font-style:italic;letter-spacing:-0.01em}
.foot-col li a{transition:color .3s var(--ease)}
.foot-col li a:hover{color:var(--ns-terracotta)}
.foot-brand .wordmark{font-size:32px}
.foot-brand p{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:20px;line-height:1.4;color:var(--ns-ink);max-width:24ch;margin:18px 0 32px}
.foot-contact{display:flex;flex-direction:column;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ns-soil);font-weight:500}
.foot-contact span{color:var(--ns-stone)}

.foot-sig{
  border-top:1px solid rgba(31,26,20,.12);padding:32px 0;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.foot-pays{display:flex;gap:18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ns-stone)}
.foot-pays span{padding:6px 12px;border:1px solid rgba(31,26,20,.12);border-radius:6px;font-weight:600}
.foot-social{display:flex;gap:14px}
.foot-social a{width:38px;height:38px;border-radius:99px;border:1px solid rgba(31,26,20,.15);display:grid;place-items:center;color:var(--ns-soil);transition:background .3s var(--ease),color .3s var(--ease)}
.foot-social a:hover{background:var(--ns-soil);color:var(--ns-cream)}

.foot-mega{
  font-family:var(--font-display);font-weight:200;
  font-size:18vw;line-height:.85;letter-spacing:-0.05em;
  color:transparent;-webkit-text-stroke:1px var(--ns-soil);
  white-space:nowrap;overflow:hidden;padding:48px 0 0;text-align:center;font-style:italic;
}

.foot-bottom{
  background:var(--ns-soil);color:var(--ns-cream);
  margin:0 calc(-1 * var(--pad-x));
  padding:18px var(--pad-x);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  opacity:.85;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px){
  .hero{grid-template-columns:1fr;gap:48px;padding-top:24px}
  .hero-text{grid-column:1}
  .hero-art{grid-column:1;min-height:520px}
  .hero-sprig{width:200px;left:auto;right:8%;top:8%}
  .story{grid-template-columns:1fr;gap:48px}
  .products{grid-template-columns:repeat(2,1fr)}
  .values{grid-template-columns:repeat(2,1fr)}
  .testi-1, .testi-2, .testi-3, .testi-press, .testi-img{grid-column:span 12;grid-row:auto}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
  .cats{grid-auto-rows:200px}
}
@media (max-width: 720px){
  :root{--pad-x:24px}
  .header-left .h-link:not(:first-child), .h-link.hide-sm{display:none}
  .hero-headline{font-size:clamp(56px,16vw,96px)}
  .hero-sprig{display:none}
  .cats{display:flex;flex-direction:column;grid-auto-rows:auto}
  .cat{height:280px}
  .cat-home{height:auto}
  .cat-home .cat-content{flex-direction:column;align-items:flex-start;gap:12px}
  .products{grid-template-columns:1fr 1fr}
  .values{grid-template-columns:1fr;gap:32px}
  .featured{flex-direction:column;align-items:flex-start;gap:18px}
  .featured-marks{gap:28px}
  .featured-marks .mark{font-size:18px}
  .fresh-card{flex:0 0 84vw}
  .month{flex:0 0 160px}
  .month.now{flex:0 0 200px}
  .foot-grid{grid-template-columns:1fr;gap:48px}
  .foot-sig{flex-direction:column;align-items:flex-start}
  .news-form{flex-direction:column;align-items:stretch;gap:14px;border:none}
  .news-form input{border-bottom:1px solid rgba(31,26,20,.25);padding-bottom:10px}
  .news-form button{justify-content:center;background:var(--ns-terracotta);color:var(--ns-cream);padding:18px;border-radius:99px}
  .testi-quote{font-size:20px}
  .marquee.size-lg{font-size:22px}
  .story-blocks{padding-left:24px;gap:64px}
  .story-blk p{font-size:22px}
}

/* prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important}
  .reveal,.reveal-mask{opacity:1;transform:none;clip-path:none}
}