/* ============================================================
   RAPID ORGANIC — Homepage
   Earthy-editorial · warm cream · brand greens + spice accents
   ============================================================ */

/* ---------- Fonts ---------- */
/* Google Fonts are loaded with <link> in each page's <head> (faster than @import) */

/* ---------- Tokens ---------- */
:root{
  /* canvas */
  --cream:        #FAF4E7;
  --cream-2:      #F3E9D3;
  --cream-3:      #EDE0C4;
  --paper:        #FFFDF7;
  --ink:          #1B2417;
  --ink-soft:     #43503B;
  --hair:         rgba(27,36,23,.12);

  /* brand greens (from logo) */
  --forest:       #1C6B33;
  --forest-deep:  #134D24;
  --leaf:         #7DB832;
  --leaf-bright:  #8DC63F;

  /* spice accents */
  --turmeric:     #E0A019;
  --paprika:      #C24A2A;
  --cumin:        #8A5A2B;
  --clove:        #6E3B1E;

  /* type */
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body:    'Hanken Grotesk', system-ui, sans-serif;
  --hand:    'Caveat', cursive;

  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
::selection{ background:var(--leaf-bright); color:var(--forest-deep); }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:32px; }
section{ position:relative; }

.eyebrow{
  font-family:var(--body);
  font-weight:700; font-size:.74rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--forest);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--turmeric); display:inline-block;
}
.hand{
  font-family:var(--hand); font-weight:700; color:var(--paprika);
  font-size:1.5em; line-height:.9; transform:rotate(-4deg); display:inline-block;
}

h1,h2,h3{ font-family:var(--display); font-weight:700; line-height:1.02; letter-spacing:-.02em; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--body); font-weight:600; font-size:.98rem;
  padding:.92em 1.5em; border-radius:999px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  white-space:nowrap;
}
.btn svg{ width:1.05em; height:1.05em; transition:transform .35s var(--ease); }
.btn-primary{ background:var(--forest); color:#fff; box-shadow:0 10px 24px -12px var(--forest); }
.btn-primary:hover{ background:var(--forest-deep); transform:translateY(-2px); box-shadow:0 16px 30px -12px var(--forest); }
.btn-primary:hover svg{ transform:translateX(4px); }
.btn-ghost{ color:var(--ink); border:1.5px solid var(--hair); background:var(--paper); }
.btn-ghost:hover{ border-color:var(--forest); color:var(--forest); transform:translateY(-2px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.nav.scrolled{
  background:rgba(250,244,231,.86);
  backdrop-filter:blur(12px) saturate(1.1);
  box-shadow:0 1px 0 var(--hair);
  padding:12px 32px;
}
.nav-logo{ display:flex; align-items:center; flex-shrink:0; }
.nav-logo img{ height:80px; width:auto; transition:height .4s var(--ease); }
.nav.scrolled .nav-logo img{ height:64px; }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links > a,
.nav-dd-toggle{
  font-weight:500; font-size:.92rem; color:var(--ink-soft); position:relative; padding:4px 0;
  background:none; border:0; cursor:pointer; font-family:inherit; line-height:inherit;
}
.nav-links > a::after,
.nav-dd-toggle::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--turmeric);
  transition:width .3s var(--ease);
}
.nav-links > a:hover,
.nav-dd-toggle:hover,
.nav-dd-wrap:hover .nav-dd-toggle,
.nav-dd-wrap.is-open .nav-dd-toggle{ color:var(--ink); }
.nav-links > a:hover::after,
.nav-dd-toggle:hover::after,
.nav-dd-wrap:hover .nav-dd-toggle::after,
.nav-dd-wrap.is-open .nav-dd-toggle::after{ width:100%; }
.nav-links .mobile-cta{ display:none; }

/* Products dropdown */
.nav-dd-wrap{
  position:relative; display:flex; align-items:center;
  /* Extra hit area so mouse Products → menu gap ma hover break na thay */
  padding-bottom:14px; margin-bottom:-14px;
}
.nav-dd-toggle{
  display:inline-flex; align-items:center; gap:6px;
}
.nav-dd-toggle svg{
  width:11px; height:11px; flex-shrink:0;
  transition:transform .25s var(--ease);
}
.nav-dd-wrap:hover .nav-dd-toggle svg,
.nav-dd-wrap.is-open .nav-dd-toggle svg{ transform:rotate(180deg); }
.nav-dd{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  min-width:168px; padding:8px; margin-top:8px;
  background:var(--cream); border:1.5px solid var(--hair); border-radius:14px;
  box-shadow:0 16px 40px -18px rgba(28,42,28,.35);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s var(--ease), visibility .18s;
  z-index:80;
}
/* Invisible hover bridge — mouse Products → menu par jay tyare dropdown bandh na thay */
.nav-dd::before{
  content:""; position:absolute; left:0; right:0; top:-14px; height:14px;
}
@media (min-width:1280px){
  .nav-dd-wrap:hover .nav-dd,
  .nav-dd-wrap.is-open .nav-dd{
    opacity:1; visibility:visible; pointer-events:auto;
  }
}
.nav-dd a{
  display:block; padding:10px 14px; border-radius:10px;
  font-weight:600; font-size:.9rem; color:var(--ink-soft);
  white-space:nowrap;
}
.nav-dd a:hover{ background:var(--paper); color:var(--forest); }
.nav-dd a.is-active{ color:var(--forest); background:rgba(45,90,39,.08); }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-burger{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding:160px 0 90px;
  position:relative; overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center;
}
.hero-copy{ position:relative; z-index:2; }
.hero h1{
  font-size:clamp(3rem, 6.4vw, 5.6rem);
  letter-spacing:-.03em;
}
.hero h1 .accent{ color:var(--forest); position:relative; white-space:nowrap; }
.hero h1 em{ font-style:normal; color:var(--leaf); }
.hero-lead{
  font-size:1.18rem; color:var(--ink-soft); max-width:33ch; margin:26px 0 32px;
}
.hero-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hero-note{ margin-top:22px; font-size:.86rem; color:var(--ink-soft); display:flex; align-items:center; gap:10px; }
.hero-note b{ color:var(--forest); }

/* hero visual */
.hero-visual{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
}
/* Circular hero image (client request); the phone size comes from the 880px rule below */
.hero-img{
  width:100%; max-width:480px; height:auto;
  aspect-ratio:1 / 1;
  display:block;
  border-radius:50%;
  border:1.5px solid var(--hair);
  box-shadow:0 32px 64px -36px rgba(27,36,23,.38);
  object-fit:cover; object-position:center;
}

/* floating spice scatter (decorative) */
.scatter{ position:absolute; pointer-events:none; z-index:0; opacity:.9; }
.scatter.s1{ top:12%; left:-30px; width:120px; }
.scatter.s2{ bottom:4%; right:34%; width:96px; }
.float{ animation:float 7s ease-in-out infinite; }
.float.d1{ animation-delay:-2s; }
.float.d2{ animation-delay:-4s; }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-14px) rotate(4deg); } }

/* ============================================================
   MARQUEE / TRUST STRIP
   ============================================================ */
.strip{
  background:var(--forest-deep); color:#EAF3DC; overflow:hidden;
  padding:18px 0; border-top:3px solid var(--leaf); border-bottom:3px solid var(--leaf);
}
.marquee{ display:flex; gap:48px; width:max-content; animation:scroll 28s linear infinite; }
.marquee span{
  font-family:var(--display); font-weight:600; font-size:1.05rem; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:48px; white-space:nowrap; opacity:.92;
}
.marquee span::after{ content:"✶"; color:var(--turmeric); font-size:.9em; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* ============================================================
   STATS
   ============================================================ */
.stats{ padding:96px 0 84px; }
.stats-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:54px; flex-wrap:wrap; }
.stats-head h2{ font-size:clamp(2rem,3.6vw,3.1rem); max-width:16ch; }
.stats-head p{ color:var(--ink-soft); max-width:38ch; }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1.5px solid var(--hair); }
.stat{
  padding:38px 30px 34px; border-right:1.5px solid var(--hair); position:relative;
}
.stat:last-child{ border-right:none; }
.stat .big{ font-family:var(--display); font-weight:800; font-size:clamp(2.8rem,5vw,4.2rem); color:var(--forest); line-height:.95; letter-spacing:-.03em; }
.stat .suffix{ color:var(--turmeric); }
.stat h3{ font-size:1.05rem; margin:14px 0 8px; font-family:var(--body); font-weight:700; }
.stat p{ font-size:.92rem; color:var(--ink-soft); }

/* ============================================================
   PRODUCTS
   ============================================================ */
.products{ padding:30px 0 100px; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
.section-head h2{ font-size:clamp(2.2rem,4.4vw,3.6rem); margin:18px 0 14px; }
.section-head p{ color:var(--ink-soft); font-size:1.06rem; }

.prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:start; }
.card{
  position:relative; background:var(--paper); border:1.5px solid var(--hair);
  border-radius:22px; overflow:hidden;
  grid-column:span 1;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
  display:flex; flex-direction:column;
  will-change:transform;
}
.card:not(.card-cta):hover,
.card:not(.card-cta).is-expanded{
  z-index:3;
  transform:translateY(-5px);
  box-shadow:0 20px 44px -22px rgba(27,36,23,.32);
  border-color:transparent;
}
.card-cta:hover{ transform:translateY(-5px); box-shadow:0 20px 44px -22px rgba(27,36,23,.32); }

/* media band (drop a photo / illustration here) */
.card-media{
  position:relative; height:158px; overflow:hidden; border-bottom:1.5px solid var(--hair);
  background:
    radial-gradient(120% 120% at 50% 18%,
      color-mix(in srgb, var(--c,var(--leaf)) 24%, var(--paper)),
      color-mix(in srgb, var(--c,var(--leaf)) 8%,  var(--paper)));
}
.card-media image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.card-media .card-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.card-media .motif{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.card-media .motif svg{ width:86px; height:86px; color:var(--c,var(--leaf)); opacity:.5;
  transition:transform .5s var(--ease); }
.card-media .motif .tag{ position:absolute; left:0; right:0; bottom:12px; text-align:center;
  font-size:.64rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:color-mix(in srgb, var(--c,var(--leaf)) 64%, var(--ink)); opacity:.65; }
.card-media image-slot[data-filled] + .motif,
.card-media .card-img + .motif{ display:none; }
.card:hover .card-media .motif svg,
.card.is-expanded .card-media .motif svg{ transform:scale(1.05) rotate(-4deg); }
.card-media--illus{
  background:
    radial-gradient(ellipse 95% 85% at 50% 36%,
      color-mix(in srgb, var(--c,var(--leaf)) 10%, var(--paper)),
      var(--cream-2));
}
.card-media--illus image-slot{
  padding:10px 14px 6px;
  box-sizing:border-box;
}

.card-pad{ position:relative; padding:16px 22px 22px; display:flex; flex-direction:column; flex:1; min-width:0; }
.card-desc{
  height:0; overflow:hidden; margin:0;
  font-size:.92rem; color:var(--ink-soft); line-height:1.5;
  opacity:0; transform:translateY(4px);
  transition:opacity .22s ease, transform .22s ease;
}
.card:not(.card-cta):hover .card-desc,
.card:not(.card-cta).is-expanded .card-desc{
  height:auto; opacity:1; transform:none; margin-top:10px;
}
.card h3{ font-size:1.4rem; margin:2px 0 4px; position:relative; z-index:2; }
.card .latin{ font-family:var(--hand); color:var(--cumin); font-size:1.12rem; position:relative; z-index:2; }
.card .meta{ margin-top:auto; padding-top:16px; font-size:.82rem; color:var(--ink-soft);
  display:flex; align-items:center; gap:8px; position:relative; z-index:2; }
.card .meta .dot{ width:7px; height:7px; border-radius:50%; background:var(--leaf); }
.card .arrow{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; z-index:4;
  border:1.5px solid var(--hair); background:rgba(255,253,247,.82); backdrop-filter:blur(4px);
  display:grid; place-items:center; color:var(--ink-soft);
  transition:all .4s var(--ease);
}
.card:hover .arrow,
.card.is-expanded .arrow{ background:var(--forest); color:#fff; border-color:var(--forest); transform:rotate(-45deg); }

/* catalogue CTA card */
.card-cta{ grid-column:span 2; flex-direction:row; align-items:center; gap:0; }
.card-cta .card-cta-body{ flex:1; padding:30px 32px; display:flex; flex-direction:column; }

/* ============================================================
   SOURCING
   ============================================================ */
.sourcing{ background:var(--forest-deep); color:#EAF3DC; padding:104px 0; position:relative; overflow:hidden; }
.sourcing .eyebrow{ color:var(--leaf-bright); }
.sourcing .eyebrow::before{ background:var(--turmeric); }
.src-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; position:relative; z-index:2; }
.sourcing h2{ font-size:clamp(2.2rem,4.2vw,3.4rem); color:#fff; margin:16px 0 18px; }
.sourcing h2 em{ font-style:normal; color:var(--leaf-bright); }
.sourcing .lead{ color:#C9D9B6; font-size:1.08rem; max-width:44ch; }
.region-list{ margin-top:34px; display:flex; flex-direction:column; gap:2px; }
.region{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 4px; border-top:1px solid rgba(234,243,220,.16);
  transition:padding .4s var(--ease);
}
.region:last-child{ border-bottom:1px solid rgba(234,243,220,.16); }
.region:hover{ padding-left:14px; }
.region .name{ font-family:var(--display); font-weight:600; font-size:1.22rem; display:flex; align-items:center; gap:14px; }
.region .name .pin{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.region .name .pin--primary{ background:#1a5a1a; box-shadow:0 0 0 3px rgba(124,199,64,.35); border:1.5px solid #7cc740; }
.region .name .pin--specialty{ background:#6ab84a; box-shadow:0 0 0 3px rgba(106,184,74,.28); border:1.5px solid #4a9830; }
.region .crop{ font-size:.84rem; color:#A9BE92; }
.region-list .region{ cursor:pointer; }
.src-map{ position:relative; }
.map-card{
  display:flex; flex-direction:column; gap:10px;
  border-radius:24px; overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  background:#ede6d0;
  padding:18px 18px 16px;
  box-shadow:0 24px 48px -32px rgba(0,0,0,.22);
}
.map-title{
  font-family:var(--display); font-weight:700; font-size:1rem;
  color:#2a5a1a; text-align:center; margin:0;
}
.map-sub{
  font-size:.72rem; color:#6a8a5a; text-align:center; font-style:italic; margin:0 0 4px;
}
.map-viz{
  position:relative; width:100%; aspect-ratio:520/580;
  border-radius:12px; overflow:visible;
  background:#ede6d0;
}
.map-viz .india-map{
  width:100%; height:100%; display:block;
}
.map-viz path{
  cursor:pointer;
  transition:opacity .15s var(--ease), stroke .15s var(--ease), stroke-width .15s var(--ease);
}
.map-viz .map-hq{ pointer-events:none; }
.map-hq-pulse{ animation:map-hq-pulse 2s ease-in-out infinite; }
@keyframes map-hq-pulse{
  0%,100%{ opacity:.22; }
  50%{ opacity:.06; }
}
.map-tip{
  position:absolute; z-index:20; pointer-events:none;
  background:#162f16; color:#f0ead8; border-radius:8px;
  padding:8px 12px; font-size:.72rem; min-width:110px;
  border:1px solid rgba(124,199,64,.35);
  transition:opacity .15s var(--ease);
}
.map-tip-name{ font-weight:600; color:#7cc740; font-size:.8rem; margin-bottom:2px; }
.map-tip-crops{ color:#8fb870; font-size:.7rem; }
.map-legend{
  display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:center;
  padding:6px 4px 2px;
}
.map-legend-item{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; color:#4a6a3a; letter-spacing:.02em;
}
.map-legend .swatch{
  width:10px; height:10px; border-radius:2px; flex-shrink:0;
}
.swatch-primary{ background:#1a5a1a; }
.swatch-specialty{ background:#6ab84a; }
.swatch-other{ background:#c8b890; }
.sourcing .map-legend-item{ color:#4a6a3a; }
.swatch-hq{
  border-radius:50%; background:#c8a84b;
}
.region-list .region.is-active{
  padding-left:14px;
  background:rgba(124,199,64,.12);
  border-radius:8px;
}
.region-list .region.is-active .pin--primary,
.region-list .region.is-active .pin--specialty{
  box-shadow:0 0 0 5px rgba(224,160,25,.35);
}

/* ============================================================
   SUSTAINABILITY (split features)
   ============================================================ */
.sustain{ padding:104px 0; }
.sus-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.sus-feature{
  border:1.5px solid var(--hair); border-radius:24px; padding:40px 38px;
  background:var(--paper); position:relative; overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.sus-feature:hover{ transform:translateY(-6px); box-shadow:0 28px 60px -34px rgba(27,36,23,.4); }
.sus-feature.tall{ grid-row:span 2; display:flex; flex-direction:column; }
.sus-feature .ic{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background:var(--cream-2); color:var(--forest); margin-bottom:22px; }
.sus-feature h3{ font-size:1.6rem; margin-bottom:10px; }
.sus-feature p{ color:var(--ink-soft); }
.sus-feature .tag{ display:inline-block; margin-top:18px; font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--paprika); }
.sus-stat{ margin-top:auto; padding-top:26px; }
.sus-stat .n{ font-family:var(--display); font-weight:800; font-size:3rem; color:var(--forest); line-height:1; }

/* ============================================================
   CTA
   ============================================================ */
.cta{ padding:40px 0 110px; }
.cta-card{
  background:var(--forest); color:#fff; border-radius:34px; padding:72px 64px;
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center;
}
.cta-card h2{ font-size:clamp(2.2rem,4vw,3.4rem); color:#fff; }
.cta-card h2 em{ font-style:normal; color:var(--leaf-bright); }
.cta-card p{ color:#D5E6C2; margin:16px 0 0; max-width:40ch; }
.cta-actions{ display:flex; flex-direction:row; flex-wrap:wrap; gap:12px; align-items:center; }
.cta .btn-primary{ background:var(--turmeric); color:var(--forest-deep); box-shadow:0 14px 30px -14px rgba(0,0,0,.5); }
.cta .btn-primary:hover{ background:#F2B530; }
.cta .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.cta .btn-ghost:hover{ border-color:#fff; color:#fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(141,198,63,.08), transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, #141C10 100%);
  color:#C7CFBF;
  padding:64px 0 32px;
  border-top:3px solid var(--leaf);
}
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.1); }
.foot-brand img{ height:108px; width:auto; opacity:.98; margin-bottom:18px; }
.foot-brand p{ font-size:.92rem; max-width:34ch; color:#9AA593; }
.foot-col h4{ font-family:var(--body); font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin-bottom:16px; }
.foot-col a{ display:block; padding:6px 0; font-size:.94rem; color:#9AA593; transition:color .25s, padding-left .25s; }
.foot-col a:hover{ color:var(--leaf-bright); padding-left:5px; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:26px; font-size:.84rem; color:#7E8A77; flex-wrap:wrap; }
.foot-bottom a{ color:#9AA593; transition:color .25s; }
.foot-bottom a:hover{ color:var(--leaf-bright); }

/* Compact footer — logo + contact only */
.footer--compact{ padding:56px 0 28px; }
.footer--compact .foot-main{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:32px; padding-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer--compact .foot-brand img{
  height:100px; width:auto; margin-bottom:0;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.25));
}
.footer--compact .foot-contact{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:nowrap; justify-content:center; align-items:center;
  gap:14px 40px; max-width:none; width:100%;
}
.footer--compact .foot-contact-item{
  display:flex; align-items:center; gap:12px;
  font-size:.92rem; color:#B5BFB0; line-height:1.4;
}
.footer--compact .foot-contact-item strong{ color:#fff; font-weight:600; }
.footer--compact .foot-contact-item a{
  color:#D8E0D0; text-decoration:none;
  transition:color .25s;
}
.footer--compact .foot-contact-item a:hover{ color:var(--leaf-bright); }
.footer--compact .foot-ic{
  flex-shrink:0; width:38px; height:38px;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(141,198,63,.12);
  border:1px solid rgba(141,198,63,.22);
  color:var(--leaf-bright);
}
.footer--compact .foot-ic svg{ width:17px; height:17px; }
.footer--compact .foot-social{
  display:flex; align-items:center; justify-content:center;
  gap:14px; margin-top:6px;
}
.footer--compact .foot-social-link{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:#D8E0D0;
  transition:all .3s var(--ease);
  text-decoration:none;
}
.footer--compact .foot-social-link svg{ width:18px; height:18px; }
.footer--compact .foot-social-link:hover{
  background:rgba(141,198,63,.18);
  border-color:var(--leaf-bright);
  color:var(--leaf-bright);
  transform:translateY(-3px);
  box-shadow:0 8px 20px -6px rgba(141,198,63,.35);
}
.footer--compact .foot-bottom{
  justify-content:center; text-align:center;
  flex-direction:column; gap:10px; padding-top:22px;
}
.footer--compact .foot-tagline{ font-size:1.15rem; color:var(--leaf-bright); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }

/* Hero entrance — pure CSS, no JS/observer dependency (never blank) */
.rise{ animation:rise .9s var(--ease) both; }
.rise.d1{ animation-delay:.10s; }
.rise.d2{ animation-delay:.20s; }
.rise.d3{ animation-delay:.30s; }
.rise.d4{ animation-delay:.40s; }
@keyframes rise{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .card-cta{ grid-column:span 2; }
  .partner-grid{ grid-template-columns:repeat(2,1fr); }
  .partner-item:last-child{ grid-column:1 / -1; max-width:420px; justify-self:center; width:100%; }
  .footer--compact .foot-contact{
    flex-wrap:wrap; gap:16px 36px;
  }
  /* Keep email + phone on the same row when address wraps */
  .footer--compact .foot-contact-item:first-child{
    flex:1 0 100%;
    justify-content:center;
  }
}
@media (max-width:880px){
  .hero-grid,.src-grid,.cta-card,.sus-grid,.stats-head{ grid-template-columns:1fr; }
  .src-map{ max-width:min(100%,420px); margin:28px auto 0; }
  .hero-visual{ order:-1; }
  .hero-img{ max-width:min(100%,340px); margin:0 auto; }
  .hero-badge.b1{ right:2%; }
  .hero-badge.b2{ left:2%; }
  .stat-grid{ grid-template-columns:1fr; }
  .stat{ border-right:none; border-bottom:1.5px solid var(--hair); }
  .sus-feature.tall{ grid-row:auto; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .cta-card{ padding:48px 34px; }
}
@media (max-width:560px){
  .wrap{ padding-inline:20px; }
  .nav{ padding:14px 20px; }
  .partner{ padding:50px 0 60px; }
  .partner-grid{ grid-template-columns:1fr; }
  .partner-item:last-child{ grid-column:auto; max-width:none; }
  .prod-grid{ grid-template-columns:1fr; }
  .card:not(.card-cta) .card-desc,
  .card:not(.card-cta):hover .card-desc,
  .card:not(.card-cta).is-expanded .card-desc{
    height:auto; opacity:1; transform:none; margin-top:10px;
  }
  .card-cta{ grid-column:span 1; flex-direction:column; align-items:stretch; }
  .foot-grid{ grid-template-columns:1fr; }
  .footer--compact .foot-contact{ flex-direction:column; align-items:flex-start; gap:16px; }
  .footer--compact .foot-contact-item:first-child{ flex:none; justify-content:flex-start; }
  .footer--compact .foot-main{ align-items:flex-start; text-align:left; }
}

/* ============================================================
   HAND-DRAWN INK SPICE DECORATIONS
   ============================================================ */
.ink{ position:absolute; pointer-events:none; z-index:0; user-select:none; }
.ink img{ width:100%; height:auto; display:block; }
.ink.soft{ opacity:.10; }
.ink.med{ opacity:.18; }
.ink.full{ opacity:.92; }
/* Decorative drawings collide with headings on small phones */
@media (max-width:600px){ .ink{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .hero-img{ animation:none; }
}
.float.d3{ animation-delay:-1s; }
.float.d4{ animation-delay:-3.5s; }

/* section divider with centred ink spice */
.divider{ display:flex; align-items:center; justify-content:center; gap:24px; padding:8px 0 0; }
.divider .line{ height:1.5px; width:min(180px,22vw); background:var(--hair); }
.divider img{ width:64px; height:auto; opacity:.85; }

/* ============================================================
   ABOUT
   ============================================================ */
.about{ padding:104px 0 90px; position:relative; overflow:hidden; }
.about-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; position:relative; z-index:2; }
.about h2{ font-size:clamp(2rem,4vw,3.2rem); margin:16px 0 20px; max-width:18ch; }
.about h2 em{ font-style:normal; color:var(--forest); }
.about p{ color:var(--ink-soft); font-size:1.06rem; max-width:50ch; }
.about p + p{ margin-top:16px; }
.about .sig{ margin-top:24px; display:flex; align-items:center; gap:14px; }
.about .sig .who{ font-family:var(--body); }
.about .sig .who b{ display:block; color:var(--ink); font-size:1rem; }
.about .sig .who span{ font-size:.84rem; color:var(--ink-soft); }
.about-card{
  position:relative; border-radius:26px; padding:44px 40px;
  background:var(--paper); border:1.5px solid var(--hair);
  box-shadow:0 40px 80px -50px rgba(27,36,23,.5); overflow:hidden;
}
.about-card .quote{ font-family:var(--display); font-weight:600; font-size:1.5rem; line-height:1.25; color:var(--ink); letter-spacing:-.01em; }
.about-card .quote .mark{ color:var(--leaf); font-size:2.4rem; line-height:0; }
.about-card .ink{ right:-30px; bottom:-30px; width:200px; opacity:.14; }

/* founder photo variant */
.about-card.photo{ padding:0; aspect-ratio:4/5; }
.about-card.photo .founder{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:78% 50%;
  transition:transform 1.2s var(--ease);
}
.about-card.photo:hover .founder{ transform:scale(1.05); }
.about-card .founder-cap{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:64px 36px 30px;
  background:linear-gradient(to top, rgba(19,40,18,.92) 12%, rgba(19,40,18,.6) 55%, transparent);
}
.about-card .founder-cap .quote{ color:#fff; font-size:1.5rem; }
.about-card .founder-cap .quote .mark{ color:var(--leaf-bright); }
.about-card .founder-cap .who{ margin-top:14px; display:flex; flex-direction:column; }
.about-card .founder-cap .who b{ color:#fff; font-size:1.05rem; font-family:var(--display); }
.about-card .founder-cap .who span{ color:#C9D9B6; font-size:.85rem; }

/* why partner */
.partner{
  padding:70px 0 80px;
  background:
    radial-gradient(ellipse 70% 50% at 0% 20%, rgba(141,198,63,.06), transparent 60%),
    var(--cream);
  border-top:1.5px solid var(--hair);
  border-bottom:1.5px solid var(--hair);
}
.partner-head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.partner-banner{
  display:inline-flex; align-items:center; gap:14px;
  background:var(--paprika); color:#fff;
  padding:14px 28px; border-radius:6px;
  box-shadow:0 12px 30px -16px rgba(122,31,31,.45);
}
.partner-banner h2{
  margin:0; font-size:clamp(1.35rem,2.6vw,1.85rem); color:#fff; letter-spacing:-.01em;
}
.partner-accent{
  width:18px; height:18px; flex-shrink:0;
  background:linear-gradient(135deg, var(--leaf-bright) 50%, transparent 50%);
  transform:rotate(45deg); opacity:.9;
}
.partner-sub{
  margin:18px 0 0; font-size:1.06rem; color:var(--ink-soft); line-height:1.5;
}
.partner-grid{
  display:grid; gap:18px;
}
/* 5 across on wide screens only; the 1080px / 560px rules above handle tablet and phone */
@media (min-width:1081px){
  .partner-grid{ grid-template-columns:repeat(5,1fr); }
}
.partner-item{
  text-align:center; padding:28px 18px 24px;
  background:var(--paper); border:1.5px solid var(--hair); border-radius:20px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.partner-item:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 48px -26px rgba(27,36,23,.28);
}
.partner-ic{
  width:56px; height:56px; margin:0 auto 16px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--cream-2); color:var(--forest);
  border:1.5px solid var(--hair);
}
.partner-ic svg{ width:28px; height:28px; }
.partner-item p{
  margin:0; font-size:.9rem; color:var(--ink-soft); line-height:1.55;
}

/* global presence — coded copy + map image */
.global-presence{
  background:#fff;
  padding:64px 0 56px;
  border-top:1.5px solid var(--hair);
}
.gp-wrap{
  width:100%;
  max-width:1080px;
  margin:0 auto;
  padding:0 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
}
.gp-head{
  text-align:center;
  max-width:40rem;
}
.gp-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:0 0 14px;
  font-family:var(--body);
  font-size:clamp(1.55rem, 3.4vw, 2.2rem);
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--forest-deep);
  line-height:1.1;
}
.gp-title span{ display:inline-block; }
.gp-leaf{
  width:22px;
  height:30px;
  color:var(--forest);
  flex:0 0 auto;
  opacity:.9;
}
.gp-leaf--flip{ transform:scaleX(-1); }
.gp-tagline{
  margin:0 0 12px;
  font-family:var(--body);
  font-size:clamp(1.05rem, 2.1vw, 1.28rem);
  font-weight:600;
  letter-spacing:.01em;
  color:#2f3a2a;
}
.gp-desc{
  margin:0 auto;
  max-width:38rem;
  font-size:clamp(.92rem, 1.5vw, 1.02rem);
  line-height:1.65;
  color:var(--ink-soft);
  font-weight:400;
}
.gp-map{
  width:100%;
  max-width:980px;
  line-height:0;
  margin-top:4px;
}
.gp-banner{
  width:100%;
  height:auto;
  display:block;
}
.gp-stats{
  list-style:none;
  margin:4px 0 0;
  padding:6px 4px;
  width:100%;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  border:1.5px solid rgba(27,36,23,.14);
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 28px -22px rgba(27,36,23,.35);
}
.gp-stats li{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:78px;
  padding:16px 14px;
  border-right:1.5px solid rgba(27,36,23,.1);
}
.gp-stats li:last-child{ border-right:none; }
.gp-stat-ic{
  width:42px;
  height:42px;
  border-radius:50%;
  background:linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
  color:#fff;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  box-shadow:0 6px 14px -8px rgba(19,77,36,.55);
}
.gp-stat-ic svg{ width:20px; height:20px; }
.gp-stat-txt{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.045em;
  text-transform:uppercase;
  color:var(--forest-deep);
  line-height:1.35;
}
.gp-slogan{
  margin:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:16px 24px;
  border-radius:14px;
  background:linear-gradient(90deg, #E4F0D4 0%, #EEF6E4 50%, #E4F0D4 100%);
  color:var(--forest-deep);
  font-family:var(--body);
  font-size:clamp(1rem, 2vw, 1.18rem);
  font-weight:700;
  letter-spacing:.01em;
  text-align:center;
  border:1px solid rgba(125,184,50,.22);
}
.gp-slogan .gp-leaf{
  width:18px;
  height:24px;
  color:var(--leaf);
}
@media (max-width:880px){
  .gp-stats{ grid-template-columns:1fr 1fr; }
  .gp-stats li:nth-child(2){ border-right:none; }
  .gp-stats li:nth-child(1),
  .gp-stats li:nth-child(2){ border-bottom:1.5px solid rgba(27,36,23,.1); }
  .gp-stats li:nth-child(3){ border-right:1.5px solid rgba(27,36,23,.1); }
  .gp-stat-txt{ font-size:.7rem; }
}
@media (max-width:560px){
  .global-presence{ padding:44px 0 40px; }
  .gp-wrap{ gap:22px; padding:0 16px; }
  .gp-title{ gap:8px; margin-bottom:10px; }
  .gp-leaf{ width:16px; height:22px; }
  .gp-tagline{ margin-bottom:8px; }
  .gp-stats{
    grid-template-columns:1fr;
    padding:4px;
    border-radius:14px;
  }
  .gp-stats li{
    border-right:none;
    border-bottom:1.5px solid rgba(27,36,23,.1);
    min-height:0;
    padding:14px 12px;
  }
  .gp-stats li:last-child{ border-bottom:none; }
  .gp-stats li:nth-child(1),
  .gp-stats li:nth-child(2),
  .gp-stats li:nth-child(3){ border-bottom:1.5px solid rgba(27,36,23,.1); }
  .gp-stat-txt{ font-size:.74rem; letter-spacing:.03em; }
  .gp-slogan{
    flex-wrap:wrap;
    gap:8px;
    padding:14px 16px;
    font-size:.95rem;
  }
  .gp-slogan .gp-leaf{ width:14px; height:18px; }
}

/* pillars row */
.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:60px; position:relative; z-index:2; }
.pillar{ padding:26px 22px; border-radius:18px; background:var(--paper); border:1.5px solid var(--hair); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.pillar:hover{ transform:translateY(-5px); box-shadow:0 24px 50px -32px rgba(27,36,23,.4); }
.pillar .ic{ width:46px; height:46px; border-radius:12px; background:var(--cream-2); color:var(--forest); display:grid; place-items:center; margin-bottom:16px; }
.pillar h4{ font-family:var(--body); font-weight:700; font-size:1.02rem; margin-bottom:6px; }
.pillar p{ font-size:.88rem; color:var(--ink-soft); }

/* ============================================================
   NEWS & MEDIA / ACHIEVEMENTS
   ============================================================ */
.news{ padding:30px 0 100px; position:relative; }
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.award{
  position:relative; background:var(--paper); border:1.5px solid var(--hair); border-radius:22px;
  padding:30px 28px 28px; overflow:hidden; min-height:230px; display:flex; flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.award:hover{ transform:translateY(-8px); box-shadow:0 30px 60px -34px rgba(27,36,23,.4); }
.award .yr{ font-family:var(--hand); font-size:1.4rem; color:var(--paprika); }
.award h3{ font-size:1.35rem; margin:6px 0 10px; line-height:1.1; }
.award p{ font-size:.92rem; color:var(--ink-soft); }
.award .badge{ width:48px; height:48px; border-radius:50%; background:var(--cream-2); color:var(--turmeric); display:grid; place-items:center; margin-bottom:auto; }
.award .ink{ right:-24px; bottom:-20px; width:150px; opacity:.12; }
.award.dark{ background:var(--forest-deep); border-color:transparent; color:#EAF3DC; }
.award.dark h3{ color:#fff; } .award.dark p{ color:#C9D9B6; } .award.dark .yr{ color:var(--turmeric); }
.award.dark .badge{ background:rgba(255,255,255,.08); color:var(--leaf-bright); }
.award.has-photo{ padding:0; min-height:0; overflow:hidden; }
.award-photo{ aspect-ratio:16/10; overflow:hidden; background:var(--cream-2); }
.award-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.award.has-photo .award-body{ padding:22px 24px 26px; }
.news-teaser-cta{ text-align:center; margin-top:36px; }

/* certifications strip */
.certs{ margin-top:46px; padding:38px 40px; border-radius:24px; background:var(--cream-2); display:flex; flex-direction:column; gap:28px; }
.cert-group{ display:flex; flex-direction:column; gap:18px; }
.cert-group + .cert-group{ border-top:1.5px solid rgba(27,36,23,.10); padding-top:26px; }
.certs .lbl{ font-family:var(--body); font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.certs .logos{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; justify-content:center; }
.certs .logo{ width:80px; height:80px; display:grid; place-items:center; transition:transform .35s var(--ease); }
.certs .logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.certs .logo:hover{ transform:translateY(-4px) scale(1.06); }
@media (max-width:560px){
  .certs{ padding:28px 24px; }
  .certs .logo{ width:64px; height:64px; }
}

@media (max-width:1080px){
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .stat{ border-bottom:1.5px solid var(--hair); }
  .stat:nth-child(odd){ border-right:1.5px solid var(--hair); }
  .stat:nth-child(even){ border-right:none; }
  .about-grid{ grid-template-columns:1fr; gap:40px; }
  .pillars{ grid-template-columns:repeat(2,1fr); }
  .news-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .pillars{ grid-template-columns:1fr; }
  .news-grid{ grid-template-columns:1fr; }
  .certs{ gap:18px; }
}

/* ============================================================
   EXPORT — built for importers
   ============================================================ */
.export{ background:var(--forest-deep); color:#EAF3DC; padding:96px 0; position:relative; overflow:hidden; }
.export .eyebrow{ color:var(--leaf-bright); }
.export .eyebrow::before{ background:var(--turmeric); }
.export-head{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; margin-bottom:54px; }
.export-head h2{ font-size:clamp(2rem,3.8vw,3rem); color:#fff; margin-top:16px; max-width:18ch; }
.export-head h2 em{ font-style:normal; color:var(--leaf-bright); }
.export-head p{ color:#C9D9B6; font-size:1.05rem; max-width:46ch; }
.exp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid rgba(234,243,220,.18); }
.exp-item{ padding:34px 26px 30px; border-right:1px solid rgba(234,243,220,.14); position:relative; }
.exp-item:last-child{ border-right:none; }
.exp-item .ic{ width:48px; height:48px; border-radius:13px; background:rgba(255,255,255,.07); color:var(--leaf-bright); display:grid; place-items:center; margin-bottom:20px; }
.exp-item h3{ font-family:var(--body); font-weight:700; font-size:1.08rem; color:#fff; margin-bottom:8px; }
.exp-item p{ font-size:.9rem; color:#A9BE92; }
.export-foot{ margin-top:40px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:.95rem; color:#C9D9B6; }
.export-foot .pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid rgba(234,243,220,.22); border-radius:999px; }
.export-foot .pill b{ color:#fff; }

@media (max-width:1080px){
  .export-head{ grid-template-columns:1fr; gap:18px; }
  .exp-grid{ grid-template-columns:1fr 1fr; }
  .exp-item:nth-child(odd){ border-right:1px solid rgba(234,243,220,.14); }
  .exp-item:nth-child(even){ border-right:none; }
  .exp-item{ border-bottom:1px solid rgba(234,243,220,.14); }
}
@media (max-width:560px){
  .exp-grid{ grid-template-columns:1fr; }
  .exp-item{ border-right:none; }
}

/* ============================================================
   WhatsApp Floating Button
   ============================================================ */
.wa-fab{
  position:fixed; bottom:24px; right:24px; z-index:55;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,.4), 0 4px 8px rgba(0,0,0,.15);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  cursor:pointer; text-decoration:none;
}
.wa-fab:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 12px 32px rgba(37,211,102,.55), 0 6px 12px rgba(0,0,0,.2);
}
.wa-fab svg{ width:32px; height:32px; }
.wa-fab::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:2px solid #25D366; opacity:.6;
  animation:wa-pulse 2s ease-out infinite;
}
@keyframes wa-pulse{
  0%{ transform:scale(1); opacity:.6; }
  100%{ transform:scale(1.4); opacity:0; }
}
.wa-tip{
  position:absolute; right:72px; top:50%; transform:translateY(-50%);
  background:var(--ink); color:#fff; padding:8px 14px; border-radius:8px;
  font-size:.85rem; font-weight:600; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s;
}
.wa-fab:hover .wa-tip{ opacity:1; transform:translateY(-50%) translateX(-4px); }

@media (max-width:560px){
  .wa-fab{ bottom:16px; right:16px; width:54px; height:54px; }
  .wa-fab svg{ width:28px; height:28px; }
  .wa-tip{ display:none; }
}

/* ============================================================
   MOBILE BURGER MENU
   ============================================================ */
.nav-burger{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  background:transparent; border:1.5px solid var(--hair);
  cursor:pointer; transition:background .25s var(--ease);
}
.nav-burger:hover{ background:var(--paper); }
.nav-burger span{
  display:block; width:20px; height:2px; background:var(--ink);
  position:relative; transition:transform .3s var(--ease), background .3s;
}
.nav-burger span::before,
.nav-burger span::after{
  content:""; position:absolute; left:0; width:20px; height:2px;
  background:var(--ink); transition:transform .3s var(--ease), top .3s var(--ease);
}
.nav-burger span::before{ top:-6px; }
.nav-burger span::after{ top:6px; }
.nav-burger[aria-expanded="true"] span{ background:transparent; }
.nav-burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* Mobile menu drawer — also used up to 1279px, where the full menu no longer fits on one line */
@media (max-width:880px){
  .nav-cta .btn{ display:none; }
}
@media (max-width:1279.98px){
  .nav-burger{ display:flex; }

  .nav-links{
    display:none;
    position:fixed; inset:74px 0 0 0;
    flex-direction:column; align-items:flex-start;
    background:var(--cream); padding:40px 32px;
    gap:22px; z-index:50;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .35s var(--ease), opacity .25s var(--ease);
    border-top:1.5px solid var(--hair);
    overflow-y:auto;
  }
  .nav-links.open{
    display:flex; transform:none; opacity:1; pointer-events:auto;
  }
  .nav-links > a,
  .nav-dd-toggle{
    font-size:1.25rem; font-weight:600; color:var(--ink);
    padding:8px 0; width:100%;
  }
  .nav-links > a::after,
  .nav-dd-toggle::after{ display:none; }

  .nav-dd-wrap{
    flex-direction:column; align-items:stretch; width:100%; gap:0;
    padding-bottom:0; margin-bottom:0;
  }
  .nav-dd-toggle{ justify-content:space-between; }
  .nav-dd{
    position:static; transform:none; left:auto;
    min-width:0; width:100%; margin:4px 0 8px;
    padding:4px 0 4px 14px; border:0; border-left:2px solid var(--hair);
    border-radius:0; box-shadow:none; background:transparent;
    opacity:1; visibility:visible; pointer-events:none;
    max-height:0; overflow:hidden; transition:max-height .3s var(--ease);
  }
  .nav-dd::before{ display:none; }
  .nav-dd-wrap.is-open .nav-dd{
    max-height:120px; pointer-events:auto;
  }
  .nav-dd a{ font-size:1.05rem; padding:10px 8px; }

  /* Mobile CTA in drawer */
  .nav-links .mobile-cta{
    display:inline-flex; align-items:center; gap:10px;
    margin-top:14px; padding:14px 28px;
    background:var(--forest); color:#fff !important;
    border-radius:999px; font-size:1rem !important;
    box-shadow:0 8px 22px -10px var(--forest);
  }

  body.menu-open{ overflow:hidden; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
/* Skip-to-content link */
.skip-link{
  position:absolute; top:-44px; left:8px; z-index:100;
  background:var(--forest); color:#fff;
  padding:10px 18px; border-radius:8px; font-weight:600;
  text-decoration:none; transition:top .25s var(--ease);
}
.skip-link:focus{ top:8px; }

/* Visible focus rings on all interactive elements */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--forest);
  outline-offset:2px;
  border-radius:6px;
}

/* Honor reduced motion preference */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .marquee, .wa-fab::after, .float{ animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* Screen-reader only utility */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============================================================
   QUALITY-OF-LIFE UPGRADES (2026-10-24)
   ============================================================ */
/* Soft cross-fade between pages (Chrome, Edge, Safari 18+); other browsers simply navigate as before */
@view-transition{ navigation:auto; }
::view-transition-old(root),
::view-transition-new(root){ animation-duration:.28s; animation-timing-function:var(--ease); }
/* The header stays put while the page content fades */
.nav{ view-transition-name:site-nav; }

/* In-page links (#products, #directors…) stop below the fixed header instead of under it */
html{ scroll-padding-top:110px; }

@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation:none; }
  html{ scroll-behavior:auto; }
}

/* Home product cards: the whole card opens the catalogue (cards already lift on hover like links) */
.card-link{ position:absolute; inset:0; z-index:5; border-radius:inherit; }
.card-link:focus-visible{ outline:3px solid var(--forest); outline-offset:-3px; }

/* Bigger tap area for footer links without moving anything */
.footer--compact .foot-contact-item a,
.foot-bottom a{ display:inline-block; padding:6px 0; margin:-6px 0; }