/* ===================================================================
   FLOATING NAV — two independent pills, always visible (Wolverine-style)
   =================================================================== */
.nav-logo-pill,.nav-menu-pill{
  position:fixed;top:var(--space-4);z-index:var(--z-nav);
  display:flex;align-items:center;gap:.5rem;
  background:rgba(12,33,24,.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-nav);
  transition:background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.nav-logo-pill{left:var(--space-4);padding:.4rem .9rem .4rem .5rem}
.nav-menu-pill{right:var(--space-4)}
@media(min-width:768px){
  .nav-logo-pill{left:var(--space-6)}
  .nav-menu-pill{right:var(--space-6)}
}
.nav-logo-pill img{width:34px;height:34px;border-radius:50%;background:var(--cream-100);object-fit:cover}
.nav-logo-pill span{
  font-family:var(--font-accent);color:var(--white);font-weight:700;font-size:.95rem;letter-spacing:.02em;
  white-space:nowrap;
}
.nav-menu-btn{
  display:flex;align-items:center;gap:.6rem;
  padding:.7rem .55rem .7rem 1.1rem;color:var(--white);
  font-family:var(--font-accent);font-weight:600;font-size:.9rem;letter-spacing:.02em;
  min-height:44px;border-radius:var(--radius-pill);
}
.nav-menu-btn .burger{
  display:flex;flex-direction:column;gap:4px;width:20px;
}
.nav-menu-btn .burger span{
  display:block;height:2px;width:100%;background:var(--white);border-radius:2px;
  transition:transform var(--dur-base) var(--ease-in-out), opacity var(--dur-base) var(--ease-in-out);
}
.nav-cart-count{
  background:var(--gold-500);color:var(--forest-950);font-family:var(--font-accent);
  font-size:.7rem;font-weight:700;min-width:20px;height:20px;border-radius:50%;
  display:none;align-items:center;justify-content:center;padding-inline:2px;
}
.nav-cart-count.show{display:inline-flex}

body.menu-open .nav-menu-btn .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .nav-menu-btn .burger span:nth-child(2){opacity:0}
body.menu-open .nav-menu-btn .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Nav pills subtly shrink/solidify once scrolled, but never disappear */
.nav-logo-pill.scrolled,.nav-menu-pill.scrolled{box-shadow:var(--shadow-lg)}

/* ===================================================================
   FULL-SCREEN OVERLAY MENU (For-Living inspired, brand palette)
   =================================================================== */
.menu-overlay{
  position:fixed;inset:0;z-index:var(--z-overlay);
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(224,151,42,.22), transparent 60%),
    linear-gradient(160deg, rgba(6,17,12,.92) 0%, rgba(10,27,19,.94) 55%, rgba(6,17,12,.96) 100%);
  backdrop-filter:blur(22px) saturate(1.1);
  -webkit-backdrop-filter:blur(22px) saturate(1.1);
  color:var(--cream-50);
  display:flex;flex-direction:column;
  visibility:hidden;opacity:0;
  transition:opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
  overflow-y:auto;
}
body.menu-open .menu-overlay{visibility:visible;opacity:1;transition-delay:0s}
.menu-overlay-inner{
  position:relative;z-index:1;
  flex:1;display:flex;flex-direction:column;justify-content:center;
  max-width:var(--container-max);width:100%;margin-inline:auto;
  padding:calc(var(--space-7) + 36px) var(--space-5) var(--space-5);
}
.menu-close{z-index:5}
.menu-brand{
  display:flex;align-items:center;gap:.65rem;margin-bottom:var(--space-4);
  padding-bottom:var(--space-3);border-bottom:1px solid rgba(247,239,220,.12);
}
.menu-brand img{border-radius:50%;flex-shrink:0;width:34px;height:34px}
.menu-brand-name{display:block;font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--cream-50)}
.menu-brand-tagline{display:block;font-size:.72rem;color:var(--cream-100);opacity:.6;max-width:46ch;line-height:1.35;margin-top:.1rem}
.menu-links{
  display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-4);
}
.menu-links a{
  font-family:var(--font-display);font-size:clamp(1.05rem,4.2vw,1.35rem);font-weight:600;
  color:var(--cream-100);padding:.5em 0;border-bottom:1px solid rgba(247,239,220,.1);
  position:relative;overflow:hidden;
  transform:translateY(16px);opacity:0;
  transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), color var(--dur-fast);
}
body.menu-open .menu-links a{transform:translateY(0);opacity:1}
.menu-links a:nth-child(1){transition-delay:.03s}
.menu-links a:nth-child(2){transition-delay:.06s}
.menu-links a:nth-child(3){transition-delay:.09s}
.menu-links a:nth-child(4){transition-delay:.12s}
.menu-links a:nth-child(5){transition-delay:.15s}
.menu-links a:nth-child(6){transition-delay:.18s}
.menu-links a:nth-child(7){transition-delay:.21s}
.menu-links a:nth-child(8){transition-delay:.24s}
.menu-links a:nth-child(9){transition-delay:.27s}
.menu-links a:nth-child(10){transition-delay:.3s}
.menu-links a:hover{color:var(--gold-400)}
.menu-links a.is-active{color:var(--gold-400)}
.menu-links a.is-active::after{content:'●';font-size:.5em;margin-left:.6em;vertical-align:middle}

.menu-foot{
  display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between;
  margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid rgba(247,239,220,.12);
}
.menu-foot .btn{padding:.65rem 1.1rem;font-size:.85rem}
.menu-socials{display:flex;gap:.6rem}
.menu-socials a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(247,239,220,.35);
  display:flex;align-items:center;justify-content:center;color:var(--cream-100);
  transition:background var(--dur-fast),border-color var(--dur-fast);
}
.menu-socials a:hover{background:rgba(247,239,220,.12);border-color:var(--gold-400)}

.menu-close{
  position:absolute;top:var(--space-4);right:var(--space-4);z-index:5;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  color:var(--cream-100);
}
@media(min-width:768px){.menu-close{top:var(--space-6);right:var(--space-6)}}
@media(max-width:340px){
  .menu-links{grid-template-columns:1fr} /* very narrow phones: single column, still compact font */
}
@media(min-height:750px){
  .menu-brand-tagline{opacity:.65}
  .menu-links a{padding:.65em 0}
}

/* ===================================================================
   WHATSAPP FLOATER — persistent, every page
   =================================================================== */
.wa-floater{
  position:fixed;right:var(--space-4);bottom:var(--space-4);z-index:var(--z-floater);
  display:flex;align-items:center;gap:.6rem;
  background:#25D366;color:#052e16;
  padding:.9rem;border-radius:var(--radius-pill);
  box-shadow:0 10px 30px rgba(37,211,102,.45);
  min-height:56px;min-width:56px;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), padding var(--dur-base);
}
.wa-floater:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 36px rgba(37,211,102,.55)}
.wa-floater svg{width:26px;height:26px;flex-shrink:0}
.wa-floater .wa-label{
  font-family:var(--font-accent);font-weight:700;font-size:.9rem;
  max-width:0;overflow:hidden;white-space:nowrap;transition:max-width var(--dur-base) var(--ease-out);
}
@media(min-width:768px){
  .wa-floater:hover .wa-label{max-width:160px;margin-right:.2rem}
}
.wa-floater .wa-pulse{
  position:absolute;inset:0;border-radius:var(--radius-pill);
  box-shadow:0 0 0 0 rgba(37,211,102,.6);
  animation:wa-pulse 2.6s ease-out infinite;
}
@keyframes wa-pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
@media (prefers-reduced-motion: reduce){.wa-floater .wa-pulse{animation:none}}

/* Cart floater — stacks above the WhatsApp floater, only shown once the
   cart has items, always jumps straight to the cart drawer */
.cart-floater{
  position:fixed;right:var(--space-4);bottom:calc(var(--space-4) + 68px);z-index:var(--z-floater);
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--gold-500);color:var(--ink-950);border:0;cursor:pointer;
  box-shadow:0 10px 26px rgba(224,151,42,.45);
  transform:scale(0);opacity:0;pointer-events:none;
  transition:transform .3s var(--ease-out),opacity .3s var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.cart-floater.is-visible{transform:scale(1);opacity:1;pointer-events:auto}
.cart-floater:hover{transform:scale(1.06) translateY(-2px);box-shadow:0 14px 32px rgba(224,151,42,.55)}
.cart-floater-count{
  position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  background:var(--meat-600);color:#fff;border-radius:var(--radius-pill);
  font-family:var(--font-accent);font-size:.7rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px var(--cream-50);
}

/* ===================================================================
   TRADING-HOURS BADGE (Neoconda-derived angular widget, brand colour)
   =================================================================== */
.hours-badge{
  display:inline-flex;align-items:center;gap:.7rem;
  background:var(--forest-950);color:var(--cream-50);
  padding:.7rem 1.1rem;
  clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px);
  font-family:var(--font-accent);font-size:.85rem;
}
.hours-badge .dot{width:9px;height:9px;border-radius:50%;background:var(--gold-400);flex-shrink:0}
.hours-badge.is-open .dot{background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.25)}
.hours-badge.is-closed .dot{background:#f87171}
.hours-badge b{color:var(--gold-300)}

/* ===================================================================
   SLIDESHOW HERO — full-bleed crossfading background (Cryox-derived)
   =================================================================== */
.slideshow-hero{
  position:relative;overflow:hidden;
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;
  background:var(--ink-950);
}
.slideshow-bg{position:absolute;inset:0;z-index:0}
.slideshow-bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.6s ease-in-out;
}
.slideshow-bg img.is-active{opacity:1}
.slideshow-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(11,15,13,.35) 0%, rgba(11,15,13,.55) 55%, rgba(11,15,13,.92) 100%);
}
.slideshow-content{
  position:relative;z-index:2;padding-top:calc(var(--space-9) + 40px);
  will-change:transform, opacity;
}
.slideshow-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--gold-400);font-family:var(--font-accent);font-weight:700;
  font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:var(--space-4);
}
.slideshow-headline{
  color:var(--white);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.4rem,7vw,5rem);line-height:1.02;letter-spacing:-.01em;
  max-width:16ch;margin-bottom:var(--space-6);
}
.slideshow-hero .btn-lg{padding:1.05rem 2.2rem;font-size:1rem}
.slideshow-dots{
  position:absolute;left:50%;bottom:var(--space-5);z-index:2;
  transform:translateX(-50%);display:flex;gap:.5rem;
}
.slideshow-dots .dot{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);
  transition:background .3s var(--ease-out), transform .3s var(--ease-out);
}
.slideshow-dots .dot.is-active{background:var(--gold-400);transform:scale(1.3)}
@media (prefers-reduced-motion: reduce){
  .slideshow-bg img{transition:none}
}

/* Page-hero-sized variant (Our Farm) — same crossfade mechanic, shorter,
   content anchored at the bottom like the standard .page-hero */
.slideshow-hero--page{
  min-height:56vh;min-height:56dvh;align-items:flex-end;
  border-radius:0 0 var(--radius-xl) var(--radius-xl);
}
.slideshow-hero--page .slideshow-content{padding-bottom:var(--space-8);padding-top:calc(var(--space-9) + 40px)}
.slideshow-hero--page .slideshow-headline,
.slideshow-hero--page h1{color:var(--white)}

/* ===================================================================
   HERO — fanned / drifting photos (rabbit.tech-derived motion)
   =================================================================== */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--cream-50) 0%,var(--forest-50) 100%);
  color:var(--color-text);
  padding-top:calc(var(--space-9) + 40px);
  padding-bottom:var(--space-9);
  min-height:min(92vh,900px); /* fallback for browsers without dvh support */
  min-height:min(92dvh,900px);
  display:flex;align-items:center;
}
.hero-grid{
  display:grid;gap:var(--space-7);align-items:center;
  grid-template-columns:1fr;
}
@media(min-width:960px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.hero-copy .eyebrow{color:var(--forest-600)}
.hero-copy h1{color:var(--forest-900);margin-block:var(--space-4)}
.hero-copy .lede{color:var(--color-text-muted);opacity:1}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}

.hero-fan{
  position:relative;height:340px;
  transition:transform .35s var(--ease-out); /* JS mouse-parallax targets this */
}
@media(min-width:600px){.hero-fan{height:420px}}
@media(min-width:960px){.hero-fan{height:520px}}

/* Each image: independent float (own duration/amplitude/phase so the
   cluster drifts out of sync, not as one mechanical wave) + a staggered
   settle-in entrance instead of just appearing already floating. */
.hero-fan img{
  position:absolute;border-radius:var(--radius-lg);object-fit:cover;
  box-shadow:var(--shadow-lg);
  will-change:transform;
  opacity:0;transform:translateY(28px) scale(.94) rotate(var(--r,0deg));
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay:var(--enter-delay,0s);
}
.hero-fan.is-in img{opacity:1;transform:rotate(var(--r,0deg))}
@keyframes hero-fan-float{
  0%,100%{transform:translateY(0) rotate(var(--r,0deg))}
  50%{transform:translateY(-14px) rotate(var(--r,0deg))}
}
@media (prefers-reduced-motion: no-preference){
  .hero-fan.is-in img{
    animation:hero-fan-float var(--float-dur,6s) ease-in-out infinite;
    animation-delay:var(--float-delay,0s);
  }
}
.hero-fan img:nth-child(1){width:46%;aspect-ratio:3/4;top:2%;left:6%;--r:-9deg;--enter-delay:.05s;--float-dur:5.5s;--float-delay:-.3s;z-index:3}
.hero-fan img:nth-child(2){width:42%;aspect-ratio:1/1;top:18%;right:2%;--r:7deg;--enter-delay:.18s;--float-dur:6.5s;--float-delay:-2.1s;z-index:2}
.hero-fan img:nth-child(3){width:40%;aspect-ratio:4/5;bottom:0;left:22%;--r:4deg;--enter-delay:.3s;--float-dur:5s;--float-delay:-1.4s;z-index:4}
.hero-fan img:nth-child(4){width:34%;aspect-ratio:1/1;bottom:6%;right:14%;--r:-6deg;--enter-delay:.42s;--float-dur:7s;--float-delay:-3.2s;z-index:1}
.hero-fan img:nth-child(5){width:30%;aspect-ratio:3/4;top:38%;left:36%;--r:-2deg;--enter-delay:.54s;--float-dur:6s;--float-delay:-.8s;z-index:5}
@media (prefers-reduced-motion: reduce){
  .hero-fan{transition:none}
  .hero-fan img{transition:opacity .3s linear;transform:rotate(var(--r,0deg))}
  .hero-fan.is-in img{opacity:1}
}
@media(max-width:600px){
  .hero-fan img:nth-child(4){display:none}
}

/* Page header hero (About/Our Farm/Meat/Who We Supply) — bold headline over photo */
.page-hero{
  position:relative;min-height:56vh;min-height:56dvh;display:flex;align-items:flex-end;
  color:var(--white);padding-top:calc(var(--space-9) + 40px);
  border-radius:0 0 var(--radius-xl) var(--radius-xl);overflow:hidden;
}
.page-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(12,33,24,.15) 0%, rgba(12,33,24,.85) 100%);
  z-index:1;
}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-hero-content{position:relative;z-index:2;padding-bottom:var(--space-8);width:100%}
.page-hero h1{color:var(--white)}

/* Split two-column page-hero (About) — light background, no full-bleed */
.page-hero-split{
  background:var(--forest-50);
  padding-top:calc(var(--space-9) + 56px);padding-bottom:var(--space-8);
}
.page-hero-split-grid{
  display:grid;grid-template-columns:1fr;gap:var(--space-6);align-items:center;
}
@media(min-width:860px){
  .page-hero-split-grid{grid-template-columns:1.1fr .9fr;gap:var(--space-8)}
}
.page-hero-split h1{margin:.3em 0 .5em;font-size:clamp(1.9rem,4vw,var(--fs-h1))}

/* Text-forward page-hero (Who We Supply) — dark, bold headline led,
   small supporting image rather than a full-bleed photo */
.page-hero-text{
  background:linear-gradient(160deg, var(--forest-950) 0%, var(--forest-900) 60%, #0a1b13 100%);
  padding-top:calc(var(--space-9) + 56px);padding-bottom:var(--space-8);
  border-radius:0 0 var(--radius-xl) var(--radius-xl);overflow:hidden;
}
.page-hero-text-grid{
  display:grid;grid-template-columns:1fr;gap:var(--space-6);align-items:center;
}
@media(min-width:860px){.page-hero-text-grid{grid-template-columns:1.2fr .8fr}}
.page-hero-text h1{font-size:clamp(1.9rem,4vw,var(--fs-h1));margin:.3em 0 .6em}
.page-hero-text-stat{
  font-family:var(--font-accent);font-weight:700;color:var(--gold-400);
  font-size:1.1rem;
}
.page-hero-text-stat span{font-size:1.6rem;font-variant-numeric:tabular-nums}
.page-hero-text-image{
  aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);
}
.page-hero-text-image img{width:100%;height:100%;object-fit:cover}

/* Editorial magazine-style page-hero (Stay Healthy) — cream background,
   italic serif headline, offset framed photo like a clipped magazine spread */
.page-hero-editorial{
  background:var(--gold-50,var(--cream-50));
  padding-top:calc(var(--space-9) + 56px);padding-bottom:var(--space-8);
}
.page-hero-editorial-grid{
  display:grid;grid-template-columns:1fr;gap:var(--space-6);align-items:center;
}
@media(min-width:860px){.page-hero-editorial-grid{grid-template-columns:1.1fr .9fr}}
.page-hero-editorial-headline{
  font-style:italic;font-weight:500;color:var(--color-text);
  font-size:clamp(2rem,4.4vw,3.4rem);
}
.page-hero-editorial-photo{
  aspect-ratio:5/4;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);transform:rotate(2deg);
  border:8px solid var(--white);margin:0;
}
.page-hero-editorial-photo img{width:100%;height:100%;object-fit:cover}
@media(min-width:860px){.page-hero-editorial-photo{margin-left:var(--space-4)}}

/* Rounded hero image card variant */
.hero-card-photo{
  border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);
  aspect-ratio:4/3;
}
.hero-card-photo img{width:100%;height:100%;object-fit:cover}

/* ===================================================================
   BOLD CTA CARD (Creativeglu-inspired)
   =================================================================== */
.cta-card{
  background:var(--forest-950);color:var(--cream-50);
  border-radius:var(--radius-xl);padding:var(--space-8) var(--space-6);
  text-align:center;position:relative;overflow:hidden;
}
.cta-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(60% 80% at 15% 0%, rgba(224,151,42,.25),transparent 60%),
             radial-gradient(50% 70% at 100% 100%, rgba(45,122,89,.35),transparent 60%);
}
.cta-card>*{position:relative;z-index:1}
.cta-card h2{color:var(--cream-50);max-width:20ch;margin-inline:auto}
.cta-card .btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-top:var(--space-6)}

/* ===================================================================
   PHOTO CAPTION — caption slides/fades in as the photo scrolls into
   view. Reuses the existing .reveal observer: put class="reveal" on
   .photo-caption itself, no extra JS needed.
   =================================================================== */
.photo-caption{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.photo-caption img{display:block;width:100%;height:100%;object-fit:cover}
.photo-caption .caption{
  position:absolute;left:0;right:0;bottom:0;padding:var(--space-6) var(--space-5) var(--space-5);
  background:linear-gradient(180deg,transparent,rgba(11,15,13,.88) 70%);
  color:var(--white);
  transform:translateY(24px);opacity:0;
  transition:transform .7s var(--ease-out), opacity .7s var(--ease-out);
  transition-delay:.15s;
}
.photo-caption.is-visible .caption{transform:translateY(0);opacity:1}
.photo-caption .caption h4{color:var(--white);margin-bottom:.25rem}
.photo-caption .caption p{color:var(--cream-100);opacity:.9;font-size:.92rem;margin:0}
@media (prefers-reduced-motion: reduce){
  .photo-caption .caption{transition:opacity .3s linear;transform:none}
}

/* ===================================================================
   PULL QUOTE — editorial statement, replaces generic card grids
   =================================================================== */
.pull-quote{max-width:56ch;margin-inline:auto;text-align:center;padding-block:var(--space-4)}
.pull-quote-mark{
  display:block;font-family:var(--font-display);font-size:5rem;line-height:.5;
  color:var(--gold-500);margin-bottom:var(--space-3);
}
.pull-quote p{
  font-family:var(--font-display);font-size:var(--fs-h3);font-weight:500;
  font-style:italic;line-height:1.3;color:var(--color-text);
}
.pull-quote-links{
  display:flex;gap:var(--space-6);justify-content:center;flex-wrap:wrap;
  margin-top:var(--space-6);font-family:var(--font-accent);font-weight:600;font-size:.9rem;
}

/* ===================================================================
   NUMBERED SERIF STORY / STEPS (FMRG Studio-derived)
   =================================================================== */
.story-steps{display:flex;flex-direction:column}
.story-step{
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);
  padding-block:var(--space-6);border-top:1px solid var(--color-border);
}
.story-step:last-child{border-bottom:1px solid var(--color-border)}
.story-step .num{
  font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4rem);
  color:var(--gold-500);line-height:1;font-weight:600;
}
.story-step h3{margin-bottom:.4rem}

/* ===================================================================
   DARK 2-COLUMN CARD GRID (rabbit.tech-derived) — sectors/categories
   =================================================================== */
.dark-grid{
  background:var(--forest-950);border-radius:var(--radius-xl);
  padding:var(--space-7) var(--space-5);
}
.dark-grid-cards{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
@media(min-width:640px){.dark-grid-cards{grid-template-columns:1fr 1fr}}
.dark-grid-card{
  background:var(--cream-50);color:var(--ink-950);border-radius:var(--radius-md);
  padding:var(--space-5);display:flex;align-items:center;gap:var(--space-4);
  transition:transform var(--dur-base) var(--ease-out);
}
.dark-grid-card:hover{transform:translateY(-3px)}
.dark-grid-card .icon{
  width:48px;height:48px;border-radius:50%;background:var(--forest-100);color:var(--forest-700);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.dark-grid-card .icon svg{width:24px;height:24px}

/* Expandable variant — sector cards on Who We Supply */
.dark-grid-card.is-expandable{
  flex-direction:column;align-items:stretch;text-align:left;
  border:0;font:inherit;cursor:pointer;width:100%;
}
.dark-grid-card-head{display:flex;align-items:center;gap:var(--space-4);width:100%}
.dark-grid-card-head > span:not(.icon):not(.chevron){flex:1;font-weight:600}
.dark-grid-card .chevron{
  flex-shrink:0;color:var(--ink-400);transition:transform .3s var(--ease-out);
}
.dark-grid-card.is-expandable[aria-expanded="true"] .chevron{transform:rotate(180deg)}
.dark-grid-card-detail{
  display:block;font-size:.9rem;color:var(--ink-600);line-height:1.5;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .4s var(--ease-out), opacity .3s var(--ease-out), margin-top .4s var(--ease-out);
  margin-top:0;
}
.dark-grid-card.is-expandable[aria-expanded="true"] .dark-grid-card-detail{
  max-height:120px;opacity:1;margin-top:var(--space-3);
}
@media (prefers-reduced-motion: reduce){
  .dark-grid-card-detail{transition:opacity .2s linear}
}

/* FAQ accordion (light variant — Stay Healthy, etc.) */
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--color-border)}
.faq-item{
  display:flex;flex-direction:column;align-items:stretch;text-align:left;
  border:0;border-bottom:1px solid var(--color-border);background:none;font:inherit;
  cursor:pointer;width:100%;padding:var(--space-4) 0;
}
.faq-item-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);font-weight:600}
.faq-item .chevron{flex-shrink:0;color:var(--color-text-muted);transition:transform .3s var(--ease-out)}
.faq-item[aria-expanded="true"] .chevron{transform:rotate(180deg)}
.faq-item-detail{
  display:block;font-size:.92rem;color:var(--color-text-muted);line-height:1.55;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .4s var(--ease-out), opacity .3s var(--ease-out), margin-top .4s var(--ease-out);
  margin-top:0;
}
.faq-item[aria-expanded="true"] .faq-item-detail{max-height:140px;opacity:1;margin-top:var(--space-3)}
@media (prefers-reduced-motion: reduce){
  .faq-item-detail{transition:opacity .2s linear}
}

/* ===================================================================
   PRODUCT / CATALOG
   =================================================================== */
.category-tabs{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;-webkit-overflow-scrolling:touch}
.category-tabs::-webkit-scrollbar{height:6px}
.category-tabs::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}
.category-tab{
  flex-shrink:0;padding:.6rem 1.1rem;border-radius:var(--radius-pill);
  background:var(--color-surface);border:1px solid var(--color-border);
  font-family:var(--font-accent);font-size:.85rem;font-weight:600;min-height:44px;
  transition:background var(--dur-fast),color var(--dur-fast);
}
.category-tab.is-active{background:var(--forest-700);color:var(--white);border-color:var(--forest-700)}
.category-tab.is-active.meat{background:var(--meat-600);border-color:var(--meat-600)}

.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
@media(min-width:600px){.product-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--space-5)}}
.product-card{
  background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:box-shadow var(--dur-base),transform var(--dur-base);
}
.product-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.product-media{position:relative;aspect-ratio:4/3;background:var(--forest-50)}
.product-media img{width:100%;height:100%;object-fit:cover}
.product-code{
  position:absolute;top:.6rem;left:.6rem;background:rgba(12,33,24,.75);color:var(--cream-50);
  font-family:var(--font-accent);font-size:.7rem;padding:.25rem .55rem;border-radius:var(--radius-pill);
  letter-spacing:.04em;
}
.product-promo-tag{
  position:absolute;top:.6rem;right:.6rem;background:var(--gold-500);color:var(--forest-950);
  font-family:var(--font-accent);font-weight:700;font-size:.7rem;padding:.25rem .55rem;border-radius:var(--radius-pill);
}
.product-body{padding:var(--space-4);display:flex;flex-direction:column;gap:.4rem;flex:1}
.product-body h4{font-size:1.02rem}
.product-desc{font-size:.85rem;color:var(--color-text-muted);flex:1}
.product-price-row{display:flex;align-items:baseline;gap:.5rem;font-family:var(--font-accent)}
.price{font-weight:700;font-size:1.1rem;color:var(--color-primary)}
.price-strike{text-decoration:line-through;color:var(--ink-300);font-size:.9rem}
.stock-note{font-size:.75rem;color:var(--color-text-muted)}
.stock-note.low{color:var(--gold-600);font-weight:600}
.stock-note.out{color:var(--color-danger);font-weight:600}
.qty-row{display:flex;align-items:center;gap:.5rem;margin-top:.3rem}
.qty-btn{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--color-border);
  display:flex;align-items:center;justify-content:center;font-weight:700;
}
.qty-value{min-width:2ch;text-align:center;font-family:var(--font-accent);font-weight:700}
.add-to-cart-btn{margin-top:.5rem}

.empty-state{
  text-align:center;padding:var(--space-8) var(--space-5);color:var(--color-text-muted);
}
.empty-state svg{width:64px;height:64px;margin-inline:auto;margin-bottom:var(--space-4);opacity:.5}

/* Compact card content for the 2-up mobile grid — narrower cards need
   tighter padding/type so nothing wraps awkwardly or gets cramped */
@media(max-width:599px){
  .product-body{padding:var(--space-3);gap:.3rem}
  .product-body h4{font-size:.88rem;line-height:1.25}
  .product-desc{font-size:.76rem}
  .product-card .product-desc{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .price{font-size:.95rem}
  .price-strike{font-size:.78rem}
  .qty-btn{width:28px;height:28px}
  .add-to-cart-btn{font-size:.78rem;padding:.55rem .5rem}
  .product-code,.product-promo-tag{font-size:.62rem;padding:.2rem .45rem}
}

/* ===================================================================
   CART DRAWER
   =================================================================== */
.cart-toggle{position:relative}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);
  background:var(--color-surface);z-index:250;
  box-shadow:-16px 0 40px rgba(12,33,24,.25);
  transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-out);
  display:flex;flex-direction:column;
}
.cart-drawer.is-open{transform:translateX(0)}
.cart-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-5);border-bottom:1px solid var(--color-border);
}
.cart-drawer-body{flex:1;overflow-y:auto;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}
.cart-division-label{
  font-family:var(--font-accent);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-text-muted);margin-top:var(--space-3);
}
.cart-line{display:flex;gap:var(--space-3);align-items:center}
.cart-line img{width:56px;height:56px;object-fit:cover;border-radius:var(--radius-sm);flex-shrink:0}
.cart-line-info{flex:1;min-width:0}
.cart-line-info h5{font-size:.9rem;font-weight:700;margin:0 0 .2rem}
.cart-line-remove{color:var(--color-danger);font-size:.75rem;text-decoration:underline}
.cart-drawer-foot{padding:var(--space-5);border-top:1px solid var(--color-border)}
.cart-total-row{display:flex;justify-content:space-between;font-family:var(--font-accent);font-weight:700;margin-bottom:var(--space-4);font-size:1.1rem}
.cart-scrim{position:fixed;inset:0;background:rgba(12,33,24,.5);z-index:240;opacity:0;visibility:hidden;transition:opacity var(--dur-base)}
.cart-scrim.is-open{opacity:1;visibility:visible}

/* ===================================================================
   FORMS
   =================================================================== */
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:var(--space-5)}
.field label{font-family:var(--font-accent);font-size:.85rem;font-weight:600}
.field .req{color:var(--color-danger)}
.field input,.field select,.field textarea{
  padding:.85rem 1rem;border-radius:var(--radius-sm);border:1.5px solid var(--color-border);
  background:var(--color-surface);min-height:48px;
  transition:border-color var(--dur-fast);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--forest-500)}
.field textarea{min-height:120px;resize:vertical}
.field-hint{font-size:.8rem;color:var(--color-text-muted)}
.field-error{font-size:.8rem;color:var(--color-danger);display:none}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--color-danger)}
.field.has-error .field-error{display:block}
.form-success{
  background:var(--forest-50);border:1px solid var(--forest-400);color:var(--forest-800);
  padding:var(--space-5);border-radius:var(--radius-md);display:none;
}
.form-success.show{display:block}

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer{background:var(--forest-950);color:var(--cream-100);padding-block:var(--space-8) var(--space-6)}
.footer-grid{display:grid;gap:var(--space-6);grid-template-columns:1fr}
@media(min-width:768px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.footer-grid h5{font-family:var(--font-accent);color:var(--gold-400);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--space-3)}
.footer-grid a{opacity:.85;transition:opacity var(--dur-fast)}
.footer-grid a:hover{opacity:1;color:var(--gold-300)}
.footer-links{display:flex;flex-direction:column;gap:.6rem}
.footer-bottom{
  margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid rgba(247,239,220,.12);
  display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;font-size:.85rem;opacity:.7;
}

/* ===================================================================
   GALLERY
   =================================================================== */
.gallery-grid{
  columns:2;column-gap:var(--space-4);
}
@media(min-width:640px){.gallery-grid{columns:3}}
@media(min-width:1024px){.gallery-grid{columns:4}}
.gallery-grid figure{break-inside:avoid;margin:0 0 var(--space-4);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.gallery-grid button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gallery-grid img{width:100%;transition:transform var(--dur-slow) var(--ease-out)}
.gallery-grid figure:hover img{transform:scale(1.05)}

/* ===================================================================
   LIGHTBOX
   =================================================================== */
.lightbox{
  position:fixed;inset:0;z-index:400;background:rgba(11,15,13,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease-out);
  padding:var(--space-6);
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:min(1100px,90vw);max-height:85vh;border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}
.lightbox-close{position:absolute;top:var(--space-4);right:var(--space-4);color:var(--cream-50);width:48px;height:48px}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);color:var(--cream-50);
  width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease-out);
}
.lightbox-nav:hover{background:rgba(255,255,255,.18)}
.lightbox-prev{left:var(--space-4)}
.lightbox-next{right:var(--space-4)}
@media(max-width:600px){.lightbox-nav{width:44px;height:44px}}

/* ===================================================================
   ARTICLE / STAY HEALTHY
   =================================================================== */
.article-card{display:flex;flex-direction:column;gap:.6rem;padding:var(--space-5)}
.article-source{font-family:var(--font-accent);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--color-accent)}
.article-card h4{line-height:1.35}
.article-card .read-more{font-family:var(--font-accent);font-weight:700;font-size:.85rem;color:var(--forest-600)}

/* ===================================================================
   MICRO-INTERACTIONS
   =================================================================== */

/* Magnetic hover: JS sets transform, CSS supplies the smoothing */
.magnetic{transition:transform .25s var(--ease-out)}

/* Cursor-glow on dark surfaces — applied automatically to every
   dark-grid / cta-card / menu-overlay, no per-page markup needed.
   Uses ::after so it layers on top of each surface's own ::before
   (the cta-card's static ambient gradient stays put underneath). */
.dark-grid,.cta-card,.page-hero-text{position:relative;isolation:isolate}
.menu-overlay{isolation:isolate} /* already position:fixed — don't override that here */
.dark-grid::after,.cta-card::after,.menu-overlay::after,.page-hero-text::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(224,151,42,.22), transparent 65%);
  transition:opacity .4s var(--ease-out);
}
.dark-grid.glow-active::after,.cta-card.glow-active::after,.menu-overlay.glow-active::after,.page-hero-text.glow-active::after{opacity:1}
.dark-grid>*{position:relative;z-index:1}

/* Underline-draw link hover */
.link-draw{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .3s var(--ease-out);
  padding-bottom:.05em;
}
.link-draw:hover{background-size:100% 1px}

/* Tactile press (extends .btn:active in base.css) */
.btn:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.15)}
.dark-grid-card:active,.product-card:active,.card:active{transform:scale(.985)}

/* Staggered header reveal: wrap eyebrow+h2+lede in .reveal-group */
.reveal-group > *{
  opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
}
.reveal-group.is-visible > *{opacity:1;transform:translateY(0)}
.reveal-group.is-visible > *:nth-child(1){transition-delay:0s}
.reveal-group.is-visible > *:nth-child(2){transition-delay:.08s}
.reveal-group.is-visible > *:nth-child(3){transition-delay:.16s}
@media (prefers-reduced-motion: reduce){
  .reveal-group > *{opacity:1;transform:none}
}

/* Count-up numbers: tabular figures so width doesn't jitter while counting */
[data-count-to]{font-variant-numeric:tabular-nums}

/* Cart badge bump */
@keyframes cart-bump{
  0%{transform:scale(1)}
  40%{transform:scale(1.35)}
  100%{transform:scale(1)}
}
.nav-cart-count.bump{animation:cart-bump .4s var(--ease-out)}

/* Add-to-cart button success morph */
.add-to-cart-btn.is-added{background:var(--forest-800)}

/* ===================================================================
   TOAST
   =================================================================== */
.toast{
  position:fixed;left:50%;bottom:var(--space-6);transform:translate(-50%,20px);
  background:var(--forest-950);color:var(--cream-50);padding:.9rem 1.4rem;border-radius:var(--radius-pill);
  font-family:var(--font-accent);font-size:.9rem;z-index:var(--z-toast);
  opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
  box-shadow:var(--shadow-lg);
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}