/* ══════════════════════════════════════════════
   REBOX BIO PACKAGING — Design System v9
   Clean Light Natural • Premium Eco Brand
   ══════════════════════════════════════════════ */
:root {
  --bg-primary:#FAFAF7;
  --bg-section-alt:#F2EDE6;
  --text-primary:#1a1a1a;
  --text-secondary:#4a4a4a;
  --accent-green:#2d5a27;
  --accent-green-light:#4a7c42;
  --accent-green-muted:#8aab84;
  --lightbox-overlay:rgba(0,0,0,0.88);
  --card-bg:transparent;
  --border:none;
  /* Green scale */
  --g900:#1a3d16;--g800:#2d5a27;--g700:#2d5a27;--g600:#4a7c42;--g500:#4a7c42;
  --g400:#6a9e64;--g300:#8aab84;--g200:#b8d4b4;--g100:rgba(45,90,39,0.08);--g50:rgba(45,90,39,0.04);
  /* Map purple to green for legacy classes */
  --p800:#1a3d16;--p700:#2d5a27;--p600:#4a7c42;--p500:#4a7c42;
  --p400:#8aab84;--p300:#b8d4b4;--p200:rgba(45,90,39,0.08);--p100:rgba(45,90,39,0.04);--p50:#FAFAF7;
  /* Text scale */
  --t900:#1a1a1a;--t700:#2a2a2a;--t500:#4a4a4a;--t300:#8a9080;
  /* Neutrals */
  --white:#ffffff;--off:#FAFAF7;--cream:#F2EDE6;
  --w100:rgba(0,0,0,0.06);--w200:rgba(0,0,0,0.10);--w300:rgba(0,0,0,0.16);
  /* Shadows */
  --sh-sm:0 2px 12px rgba(0,0,0,.06);--sh-md:0 8px 32px rgba(0,0,0,.10);--sh-lg:0 20px 60px rgba(0,0,0,.14);
  /* Typography */
  --font-d:'Playfair Display',Georgia,serif;--font-s:'Inter',system-ui,sans-serif;
  /* Layout */
  --r:4px;--ease:.3s cubic-bezier(.4,0,.2,1);
  --sec-y:clamp(56px,8vw,110px);--pad-x:clamp(16px,5vw,64px);--max:1320px;
  --divider:rgba(0,0,0,0.06);
  /* Legacy compat */
  --bg-dark:#FAFAF7;--card-bg-green:rgba(45,90,39,0.04);--card-bg-purple:rgba(45,90,39,0.04);
  --border-subtle:rgba(0,0,0,0.08);--border-green:rgba(45,90,39,0.15);--border-purple:rgba(45,90,39,0.15);
  --scroll-label-color:#2d5a27;--badge-bg:rgba(45,90,39,0.08);--badge-border:rgba(45,90,39,0.25);
  --accent-muted:#8aab84;--bg-section-purple:#F2EDE6;
  --accent-green-bright:#4a7c42;--accent-purple:#4a7c42;--accent-purple-muted:#8aab84;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-s);background:#fff;color:var(--text-primary);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:var(--font-s);cursor:pointer;border:none;background:none}

/* ── TYPOGRAPHY ── */
.d-xl{font-family:var(--font-d);font-size:clamp(2.4rem,7vw,6rem);font-weight:300;line-height:1.07;letter-spacing:-.02em}
.d-lg{font-family:var(--font-d);font-size:clamp(1.9rem,4.5vw,4rem);font-weight:400;line-height:1.1;letter-spacing:-.01em}
.d-md{font-family:var(--font-d);font-size:clamp(1.5rem,3vw,2.6rem);font-weight:400;line-height:1.15}
.d-sm{font-family:var(--font-d);font-size:clamp(1.2rem,2.2vw,1.8rem);font-weight:500;line-height:1.25}
.eyebrow{font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:22px;height:1.5px;background:currentColor;flex-shrink:0;display:block}
.body-lg{font-size:clamp(.95rem,2vw,1.05rem);line-height:1.82}
.body-md{font-size:clamp(.88rem,1.8vw,.95rem);line-height:1.75}
.body-sm{font-size:.82rem;line-height:1.68}
.label{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}

/* ── LAYOUT ── */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad-x)}
.sec{padding:var(--sec-y) var(--pad-x);max-width:100%}
.sec-center{text-align:center}.sec-center .eyebrow{justify-content:center}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 26px;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r);border:2px solid transparent;transition:var(--ease);cursor:pointer;white-space:nowrap}
.btn-green{background:var(--accent-green);color:#fff;border-color:var(--accent-green)}
.btn-green:hover{background:var(--g900);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-white{background:#fff;color:var(--accent-green);border-color:rgba(0,0,0,.12)}
.btn-white:hover{background:var(--cream);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.btn-outline-w{background:transparent;color:var(--accent-green);border-color:rgba(45,90,39,.35)}
.btn-outline-w:hover{background:rgba(45,90,39,.06);border-color:var(--accent-green)}
.btn-outline-g{background:transparent;color:var(--accent-green);border-color:var(--accent-green)}
.btn-outline-g:hover{background:var(--accent-green);color:#fff}
.btn-cream{background:var(--cream);color:var(--accent-green);border-color:var(--cream)}
.btn-cream:hover{background:#fff;box-shadow:var(--sh-md);transform:translateY(-2px)}
.btn-lg{padding:16px 36px;font-size:.78rem}
.btn-sm{padding:9px 18px;font-size:.68rem}

/* ── PROGRESS BAR ── */
#progress-bar{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--accent-green);z-index:9999;pointer-events:none;transform:scaleX(0);transform-origin:left;transition:transform .08s linear}

/* ── NAV ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 var(--pad-x);transition:background var(--ease),box-shadow var(--ease)}
.nav.solid{background:rgba(255,255,255,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.nav-inner{max-width:var(--max);margin:0 auto;height:80px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-logo{display:flex;align-items:center;flex-shrink:0}
.nav-logo-img{height:62px;width:auto;max-width:180px;object-fit:contain;border-radius:6px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.1));transition:transform var(--ease)}
.nav-logo:hover .nav-logo-img{transform:scale(1.02)}
.nav-menu{display:flex;align-items:center;gap:2px;list-style:none}
.nav-menu a{display:block;padding:8px 13px;font-size:.74rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--text-secondary);transition:color var(--ease);position:relative}
.nav-menu a::after{content:'';position:absolute;bottom:3px;left:13px;right:13px;height:1.5px;background:var(--accent-green);transform:scaleX(0);transform-origin:left;transition:transform var(--ease)}
.nav-menu a:hover::after,.nav-menu a.active::after{transform:scaleX(1)}
.nav-menu a:hover,.nav.solid .nav-menu a:hover{color:var(--accent-green)}
.nav.solid .nav-menu a{color:var(--text-secondary)}
.nav-cta{margin-left:6px;padding:10px 20px!important;background:var(--accent-green);color:#fff!important;border-radius:var(--r);font-weight:700!important}
.nav-cta::after{display:none!important}
.nav-cta:hover{background:var(--g900)!important}
/* Hamburger */
.ham{display:none;flex-direction:column;gap:5px;padding:6px;cursor:pointer}
.ham span{display:block;width:24px;height:2px;border-radius:2px;background:var(--text-primary);transition:all var(--ease)}
.ham.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.ham.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.ham.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
/* Mobile drawer */
.mobile-drawer{position:fixed;top:80px;left:0;right:0;background:#fff;z-index:999;padding:8px var(--pad-x) 20px;display:flex;flex-direction:column;transform:translateY(-100%);opacity:0;transition:transform var(--ease),opacity var(--ease);box-shadow:var(--sh-lg);pointer-events:none;border-top:1px solid var(--w100)}
.mobile-drawer.open{transform:translateY(0);opacity:1;pointer-events:all}
.mobile-drawer a{padding:14px 0;font-size:.95rem;font-weight:500;color:var(--text-secondary);border-bottom:1px solid var(--w100);display:flex;align-items:center;justify-content:space-between}
.mobile-drawer a::after{content:'→';opacity:.4}
.mobile-drawer a:last-child{margin-top:10px;background:var(--accent-green);color:#fff;padding:14px 20px;border-radius:var(--r);justify-content:center;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:none}
.mobile-drawer a:last-child::after{display:none}

/* ── HERO ── */
.hero{min-height:100vh;min-height:100svh;position:relative;display:flex;align-items:center;overflow:hidden;background:#fff}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 5% 50%,rgba(45,90,39,0.07),transparent 55%),radial-gradient(ellipse 50% 80% at 95% 10%,rgba(45,90,39,0.04),transparent 55%)}
.hero-noise{display:none}
.hero-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.hero-orb-1{width:500px;height:500px;background:rgba(45,90,39,0.06);top:-10%;left:-5%;animation:orbFloat1 12s ease-in-out infinite}
.hero-orb-2{width:400px;height:400px;background:rgba(45,90,39,0.04);top:10%;right:-5%;animation:orbFloat2 15s ease-in-out infinite}
.hero-orb-3{width:300px;height:300px;background:rgba(45,90,39,0.03);bottom:5%;left:30%;animation:orbFloat3 18s ease-in-out infinite}
@keyframes orbFloat1{0%,100%{transform:translate(0,0)}33%{transform:translate(30px,-40px)}66%{transform:translate(-20px,30px)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0)}40%{transform:translate(-40px,30px)}70%{transform:translate(20px,-20px)}}
@keyframes orbFloat3{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}
.hero-content{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:clamp(100px,13vw,140px) var(--pad-x) clamp(56px,7vw,80px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,72px);align-items:center}
.hero-eyebrow{color:var(--accent-green);margin-bottom:18px}
.hero h1{color:var(--text-primary);margin-bottom:22px}
.hero h1 em{font-style:italic;color:var(--accent-green)}
.hero-sub{color:var(--text-secondary);max-width:480px;margin-bottom:36px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-trust{display:flex;align-items:center;gap:14px;margin-top:32px;padding-top:28px;border-top:1px solid rgba(0,0,0,.08)}
.trust-avatars{display:flex}
.trust-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--g200),rgba(45,90,39,0.12));border:2px solid rgba(45,90,39,.15);margin-right:-8px;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:.78rem;color:var(--accent-green);font-weight:600;flex-shrink:0}
.trust-text{font-size:.76rem;color:var(--text-secondary);line-height:1.5}
.trust-text strong{color:var(--text-primary);display:block;margin-bottom:2px}
.hero-visual{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:6px}
.hero-visual-item{border-radius:6px;overflow:hidden;background:rgba(45,90,39,.04);position:relative}
.hero-visual-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.hero-visual-item:hover img{transform:scale(1.05)}
.hero-visual-item:nth-child(1){grid-row:span 2}
.hero-visual-tag{position:absolute;bottom:8px;left:8px;right:8px;background:rgba(250,250,247,.88);backdrop-filter:blur(8px);padding:6px 10px;border-radius:3px;font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-green)}
.hero-scroll{position:absolute;bottom:24px;left:var(--pad-x);z-index:2;display:flex;align-items:center;gap:10px;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.scroll-bar{width:1px;height:44px;background:linear-gradient(to bottom,var(--accent-green-muted),transparent);animation:scrollAnim 2.5s ease-in-out infinite}
@keyframes scrollAnim{0%,100%{opacity:.4;transform:scaleY(1)}50%{opacity:.12;transform:scaleY(.4)}}

/* ── WHATSAPP FLOAT ── */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:900;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.4);transition:transform var(--ease);animation:waPulse 3s ease-in-out infinite;text-decoration:none}
.wa-float:hover{transform:scale(1.1);animation:none}
.wa-float svg{width:28px;height:28px}
@keyframes waPulse{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.4)}50%{box-shadow:0 4px 30px rgba(37,211,102,.6),0 0 0 6px rgba(37,211,102,.1)}}

/* ── TICKER ── */
.ticker{background:var(--accent-green);padding:12px 0;overflow:hidden}
.ticker-track{display:flex;width:max-content;animation:tickerRun 40s linear infinite}
.ticker-track:hover{animation-play-state:paused}
.ticker-item{display:flex;align-items:center;gap:12px;padding:0 36px;font-size:.63rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap}
.ticker-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.5);flex-shrink:0}
@keyframes tickerRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── NUMBERS BAR ── */
.numbers-bar{background:var(--bg-section-alt);padding:clamp(36px,5vw,56px) var(--pad-x)}
.numbers-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.nb{padding:clamp(20px,3vw,32px) 16px;text-align:center;background:rgba(45,90,39,.04);border:1px solid rgba(45,90,39,.08);transition:background var(--ease)}
.nb:hover{background:rgba(45,90,39,.09)}
.nb-num{font-family:var(--font-d);font-size:clamp(2rem,4vw,3rem);font-weight:300;color:var(--accent-green);line-height:1;margin-bottom:7px}
.nb-label{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}

/* ── ABOUT SPLIT ── */
.about-split{display:grid;grid-template-columns:1fr 1fr;min-height:520px}
.about-split-img{overflow:hidden;position:relative}
.about-split-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.about-split-content{padding:clamp(40px,6vw,80px) clamp(28px,4vw,64px);display:flex;flex-direction:column;justify-content:center;background:var(--cream)}

/* ── STATS 2×2 ── */
.stats-2x2{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:32px}
.stat-tile{padding:clamp(18px,2.5vw,24px) clamp(14px,2vw,20px);text-align:center}
.stat-tile:nth-child(odd){background:var(--g50)}
.stat-tile:nth-child(even){background:var(--cream)}
.stat-tile-num{font-family:var(--font-d);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:300;line-height:1;margin-bottom:5px;color:var(--accent-green)}
.stat-tile-label{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}

/* ── CATEGORY GRID ── */
.cat-section{background:var(--bg-section-alt);padding:var(--sec-y) var(--pad-x)}
.cat-section .sh .eyebrow,.sh .eyebrow{color:var(--accent-green)}
.cat-section .sh h2,.sh h2{color:var(--text-primary)}
.cat-section .sh h2 em,.sh h2 em{color:var(--accent-green);font-style:italic}
.cat-section .sh p,.sh p{color:var(--text-secondary);max-width:560px;margin-top:13px}
.sh{margin-bottom:clamp(32px,5vw,56px)}
.sh .eyebrow{margin-bottom:13px}
.sh-split{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(32px,5vw,56px)}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cat-card{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;aspect-ratio:3/4;border:1px solid rgba(0,0,0,.06);transition:transform var(--ease),box-shadow var(--ease)}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.cat-card:hover .cat-img{transform:scale(1.05)}
.cat-img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.cat-glow{display:none}
.cat-fade{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,26,26,.82) 0%,rgba(26,26,26,.1) 55%,transparent 100%)}
.cat-body{position:absolute;bottom:0;left:0;right:0;padding:clamp(16px,2.5vw,24px)}
.cat-tag{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:6px}
.cat-name{font-family:var(--font-d);font-size:clamp(1.1rem,2.5vw,1.4rem);font-weight:400;color:#fff;line-height:1.2;margin-bottom:4px}
.cat-count{font-size:.7rem;color:rgba(255,255,255,.5)}
.cat-arrow{position:absolute;top:14px;right:14px;width:32px;height:32px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);font-size:.8rem;transition:var(--ease)}
.cat-card:hover .cat-arrow{background:var(--accent-green);border-color:var(--accent-green);color:#fff;transform:rotate(45deg)}

/* ── WHY GRID ── */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:clamp(36px,5vw,52px)}
.wc{padding:clamp(28px,3.5vw,40px) clamp(22px,3vw,36px);background:#fff;position:relative;overflow:hidden;transition:background var(--ease),transform var(--ease)}
.wc::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--accent-green);transform:scaleX(0);transform-origin:left;transition:transform var(--ease)}
.wc:hover::before{transform:scaleX(1)}
.wc:hover{background:var(--cream);box-shadow:var(--sh-sm)}
.wc-num{font-family:var(--font-d);font-size:2.8rem;font-weight:300;color:rgba(0,0,0,.07);line-height:1;margin-bottom:14px}
.wc-icon{font-size:1.5rem;margin-bottom:12px}
.wc-title{font-family:var(--font-d);font-size:1.18rem;font-weight:500;color:var(--text-primary);margin-bottom:9px;line-height:1.3}
.wc-desc{color:var(--text-secondary);font-size:.87rem;line-height:1.75}

/* ── SUSTAIN / DARK BAND ── */
.sustain{background:var(--accent-green);padding:var(--sec-y) var(--pad-x);position:relative;overflow:hidden}
.sustain::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 25% 50%,rgba(255,255,255,.06),transparent 60%)}
.sustain-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,7vw,80px);align-items:center;position:relative;z-index:1}
.sustain h2{color:#fff}.sustain h2 em{color:rgba(255,255,255,.8);font-style:italic}
.sustain p{color:rgba(255,255,255,.75)}
.sustain .eyebrow{color:rgba(255,255,255,.65)}
.sustain-pillars{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:24px}
.sp{background:rgba(255,255,255,.1);padding:clamp(16px,2.5vw,22px) clamp(14px,2vw,18px);border:1px solid rgba(255,255,255,.1);transition:background var(--ease)}
.sp:hover{background:rgba(255,255,255,.15)}
.sp-icon{font-size:1.2rem;margin-bottom:7px}
.sp-title{font-size:.78rem;font-weight:600;color:#fff;margin-bottom:4px}
.sp-desc{font-size:.72rem;color:rgba(255,255,255,.6);line-height:1.6}
.sustain-imgs{display:grid;grid-template-columns:1fr 1fr;gap:4px;border-radius:8px;overflow:hidden}
.si{aspect-ratio:1;object-fit:cover;transition:transform .5s ease}
.si:hover{transform:scale(1.04)}

/* ── TESTIMONIALS ── */
.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:clamp(36px,5vw,52px)}
.tc{background:#fff;padding:clamp(24px,3.5vw,38px);border-radius:8px;border:1px solid rgba(0,0,0,.05);transition:transform var(--ease),box-shadow var(--ease)}
.tc:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.tc-stars{color:var(--accent-green);font-size:.82rem;letter-spacing:3px;margin-bottom:16px}
.tc-quote{font-family:var(--font-d);font-size:clamp(.98rem,2vw,1.08rem);font-weight:400;line-height:1.7;color:var(--text-primary);font-style:italic;margin-bottom:22px;padding-left:16px;position:relative}
.tc-quote::before{content:'\201C';position:absolute;left:0;top:-4px;font-size:2.2rem;color:rgba(45,90,39,.18);line-height:1}
.tc-author{display:flex;align-items:center;gap:11px}
.tc-av{width:40px;height:40px;min-width:40px;border-radius:50%;background:linear-gradient(135deg,var(--g200),rgba(45,90,39,.1));display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:.95rem;font-weight:600;color:var(--accent-green)}
.tc-name{font-size:.78rem;font-weight:600;color:var(--text-primary)}
.tc-role{font-size:.7rem;color:var(--text-secondary);margin-top:2px}

/* ── CTA BAND ── */
.cta-band{background:var(--accent-green);padding:clamp(52px,7vw,80px) var(--pad-x);position:relative;overflow:hidden}
.cta-band::after{display:none}
.cta-band-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;position:relative;z-index:1}
.cta-band h2{color:#fff}.cta-band h2 em{color:rgba(255,255,255,.8);font-style:italic}
.cta-band p{color:rgba(255,255,255,.72);margin-top:9px;max-width:520px}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}

/* ── PAGE HERO ── */
.ph{background:var(--bg-primary);padding:clamp(120px,14vw,155px) var(--pad-x) clamp(52px,7vw,72px);position:relative;overflow:hidden}
.ph-inner{max-width:var(--max);margin:0 auto;position:relative;z-index:1}
.ph .eyebrow{color:var(--accent-green);margin-bottom:16px}
.ph h1{color:var(--text-primary);margin-bottom:12px}
.ph h1 em{color:var(--accent-green);font-style:italic}
.ph p{color:var(--text-secondary);max-width:580px;font-size:clamp(.9rem,2vw,1.02rem);line-height:1.78}
.ph-orb{display:none}

/* ── FILTER BAR ── */
.filter-bar{display:flex;gap:7px;flex-wrap:nowrap;overflow-x:auto;margin-top:16px;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}
.filter-bar::-webkit-scrollbar{display:none}
.fb{padding:7px 16px;background:transparent;border:1.5px solid rgba(45,90,39,.22);color:var(--text-secondary);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:40px;transition:var(--ease)}
.fb:hover{border-color:var(--accent-green);color:var(--accent-green)}
.fb.active{background:var(--accent-green);border-color:var(--accent-green);color:#fff}

/* ── LEGACY PRODUCT CARDS (Raw Materials uses .pc) ── */
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pc{border-radius:8px;overflow:hidden;cursor:pointer;transition:transform var(--ease),box-shadow var(--ease);position:relative;border:1px solid rgba(0,0,0,.06);background:#fff}
.pc:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.pc:hover .pc-overlay{opacity:1}
.pc:hover .pc-img{transform:scale(1.06)}
.pc-img-wrap{aspect-ratio:1;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;background:var(--cream)}
.pc-img{width:100%;height:100%;transition:transform .6s ease}
.pc-badge{position:absolute;top:9px;left:9px;padding:3px 9px;font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:40px;background:rgba(45,90,39,.1);color:var(--accent-green);z-index:1}
.pc-overlay{position:absolute;inset:0;background:rgba(26,26,26,.75);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;padding:16px;opacity:0;transition:opacity var(--ease)}
.pc-body{padding:clamp(11px,1.5vw,14px) clamp(12px,1.8vw,16px) clamp(14px,2vw,18px)}
.pc-cat{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px;color:var(--accent-green)}
.pc-name{font-family:var(--font-d);font-size:.98rem;font-weight:500;line-height:1.3;margin-bottom:2px;color:var(--text-primary)}
.pc-detail{font-size:.72rem;color:var(--text-secondary)}

/* ── FORMS ── */
.form-g{margin-bottom:15px}
.form-l{display:block;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:6px}
.form-i,.form-s,.form-t{width:100%;padding:12px 14px;background:#fff;border:1.5px solid rgba(0,0,0,.12);border-radius:var(--r);font-family:var(--font-s);font-size:.9rem;color:var(--text-primary);outline:none;transition:border-color var(--ease),box-shadow var(--ease)}
.form-i:focus,.form-s:focus,.form-t:focus{border-color:var(--accent-green);box-shadow:0 0 0 3px rgba(45,90,39,.1)}
.form-t{height:110px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-sub{width:100%;padding:14px;background:var(--accent-green);color:#fff;border:none;border-radius:var(--r);font-family:var(--font-s);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:background var(--ease),transform var(--ease);cursor:pointer}
.form-sub:hover{background:var(--g900);transform:translateY(-1px)}

/* ── MODAL ── */
.modal-bg{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--ease);padding:16px}
.modal-bg.open{opacity:1;pointer-events:all}
.modal{background:#fff;max-width:500px;width:100%;border-radius:12px;padding:clamp(28px,5vw,44px);position:relative;transform:translateY(20px) scale(.98);transition:transform var(--ease);max-height:90vh;overflow-y:auto}
.modal-bg.open .modal{transform:translateY(0) scale(1)}
.modal-x{position:absolute;top:13px;right:13px;width:28px;height:28px;background:var(--cream);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:.82rem;transition:background var(--ease);cursor:pointer}
.modal-x:hover{background:rgba(0,0,0,.1)}
.modal h3{font-family:var(--font-d);font-size:1.65rem;font-weight:400;color:var(--text-primary);margin-bottom:4px}
.modal-sub{color:var(--text-secondary);font-size:.82rem;margin-bottom:22px}

/* ── FOOTER ── */
.footer{background:var(--bg-section-alt);padding:clamp(52px,7vw,72px) var(--pad-x) clamp(28px,4vw,36px);border-top:1px solid rgba(0,0,0,.07)}
.footer-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,52px);padding-bottom:clamp(36px,5vw,52px);border-bottom:1px solid rgba(0,0,0,.08);margin-bottom:28px}
.footer-logo-wrap{margin-bottom:14px}
.footer-logo-img{height:62px;width:auto;max-width:200px;object-fit:contain;border-radius:5px}
.footer-tag{color:var(--text-secondary);font-size:.84rem;line-height:1.72;max-width:260px;margin-bottom:20px}
.footer-soc{display:flex;gap:8px}
.soc-btn{width:33px;height:33px;background:rgba(45,90,39,.08);border:1px solid rgba(45,90,39,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent-green);font-size:.7rem;font-weight:700;transition:var(--ease);cursor:pointer;text-decoration:none}
.soc-btn:hover{background:var(--accent-green);color:#fff;border-color:var(--accent-green)}
.footer-col h5{font-size:.63rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-green);margin-bottom:16px}
.footer-col a{display:block;font-size:.83rem;color:var(--text-secondary);margin-bottom:8px;transition:color var(--ease)}
.footer-col a:hover{color:var(--text-primary)}
.fci{display:flex;gap:9px;align-items:flex-start;margin-bottom:12px;font-size:.82rem;color:var(--text-secondary);line-height:1.5}
.fci span:first-child{font-size:.85rem;flex-shrink:0;margin-top:1px}
.footer-bottom{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.7rem;color:var(--text-secondary)}

/* ── REVEAL ANIMATIONS ── */
.reveal{opacity:0;transition:opacity .65s ease,transform .65s ease}
.reveal.up{transform:translateY(28px)}.reveal.left{transform:translateX(-28px)}.reveal.right{transform:translateX(28px)}.reveal.scale{transform:scale(.96)}
.reveal.visible{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}
[data-fade-up]{opacity:0;transform:translateY(20px);transition:opacity 500ms ease,transform 500ms ease}
[data-fade-up].in-view{opacity:1;transform:none}

/* ═══════════════════════════════════════════════════
   PRODUCT SECTIONS — Clean Light Floating Design
   ═══════════════════════════════════════════════════ */
[id]{scroll-margin-top:90px}

.prod-sec{
  padding:clamp(56px,7vw,96px) 0;
  scroll-margin-top:80px;
  position:relative;
  border-top:none;
}
.prod-sec::before{display:none}
/* Alternating backgrounds — all light */
.prod-sec.sec-dark,.prod-sec.bg-dark{background:#fff!important}
.prod-sec.sec-green,.prod-sec.bg-alt{background:#fff!important}
.prod-sec.sec-purple{background:#fff!important}
/* All sections white — seamless */
section.prod-sec:nth-of-type(even){background:#fff!important}
section.prod-sec:nth-of-type(odd){background:#fff!important}

.prod-sec-inner{max-width:var(--max);margin:0 auto;padding:0 clamp(24px,5vw,80px)}

/* ── Section hero layout ── */
.prod-sec-hero{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  column-gap:clamp(28px,5vw,64px);
  align-items:start;
  margin-bottom:clamp(28px,4vw,48px);
}
.prod-sec-head{
  grid-column:1;
  padding-top:8px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

/* ── Section title ── */
.prod-sec-h2{
  font-family:'Playfair Display',Georgia,serif!important;
  font-style:italic!important;
  font-weight:700!important;
  font-size:clamp(32px,4vw,56px)!important;
  line-height:1.08!important;
  color:#1a1a1a!important;
  margin-bottom:16px!important;
  letter-spacing:-.01em!important;
}

/* ── Section description ── */
.prod-sec-desc{
  font-family:'Inter',system-ui,sans-serif!important;
  font-size:16px!important;
  line-height:1.8!important;
  color:#4a4a4a!important;
  max-width:560px;
  margin-bottom:0;
}

/* ── Customisation line ── */
.prod-sec-custom{
  font-family:'Inter',system-ui,sans-serif;
  font-style:italic;
  font-size:13px;
  margin-top:20px;
  color:var(--accent-green-muted);
  display:block;
}

/* ── Badge pills ── */
.sec-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.sec-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 12px;
  border-radius:20px;
  font-family:'Inter',system-ui,sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1.4;
}
.sec-badge-green,.sec-badge-purple{
  background:rgba(45,90,39,0.08)!important;
  border:1px solid rgba(45,90,39,0.25)!important;
  color:#2d5a27!important;
}

/* ── Section image — single tall cinematic image ── */
.prod-sec-imgs{
  grid-column:2;
  grid-row:1;
  display:block;
  align-self:stretch;
}
.prod-sec-img-box{
  width:100%;
  height:400px;
  overflow:hidden;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  border-radius:0!important;
  position:relative;
}
.prod-sec-img-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s ease;
  -webkit-mask-image:linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image:linear-gradient(to bottom, black 60%, transparent 100%);
}
.prod-sec-img-box:hover img{transform:scale(1.04)}

/* ── Scroll blocks ── */
.scroll-block{margin-bottom:clamp(16px,2.5vw,24px)}
.scroll-block:last-child{margin-bottom:0}
.scroll-block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}

/* ── Row labels ── */
.scroll-label{
  font-family:'Inter',system-ui,sans-serif!important;
  font-size:11px!important;
  font-weight:600!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  color:#2d5a27!important;
  border-left:none!important;
  padding-left:0!important;
}
.sec-dark .scroll-label,
.sec-green .scroll-label,
.sec-purple .scroll-label{color:#2d5a27!important;border-left:none!important}
.dark-section .scroll-label{color:#2d5a27!important;border-left:none!important}

/* ── Navigation arrows — flex layout, inline SVG ── */
.scroll-block{overflow:visible}

/* Flex row: [arrow][scroll-row][arrow] */
.scroll-wrapper{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
}

.scroll-btn{
  flex-shrink:0;
  width:56px;
  height:56px;
  background:none!important;
  border:none!important;
  box-shadow:none!important;
  cursor:pointer;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:1;
  z-index:10;
  transition:opacity .2s ease;
}
.scroll-btn:hover polyline{stroke:#1a3d16}
.scroll-btn.hidden{
  opacity:0!important;
  pointer-events:none!important;
  visibility:hidden!important;
}

/* Scroll row inside wrapper gets flex:1 to fill space */
.scroll-row{
  flex:1;
  min-width:0;
}

/* ── Scroll track — hidden scrollbar ── */
.prod-sec .prod-scroll-row,.scroll-row{
  display:flex;
  align-items:stretch;
  gap:24px;
  overflow-x:auto;
  overflow-y:visible;
  padding:16px 0;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.prod-sec .prod-scroll-row::-webkit-scrollbar,.scroll-row::-webkit-scrollbar{display:none}

/* ── Product card — floating image ── */
.pc-new{
  flex:0 0 180px!important;
  width:180px!important;
  height:180px!important;
  display:flex!important;
  flex-direction:column!important;
  scroll-snap-align:start;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  border-radius:0!important;
  cursor:pointer;
  transition:transform 200ms ease;
  overflow:visible!important;
  padding:0;
}
.pc-new:hover{transform:scale(1.05)!important;box-shadow:none!important}
.pc-new .pc-img-wrap{
  flex:0 0 180px!important;
  width:180px!important;
  height:180px!important;
  aspect-ratio:unset!important;
  overflow:visible!important;
  background:#fff!important;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  border-radius:0!important;
  border:none!important;
  box-shadow:none!important;
}
.pc-new .pc-img{
  width:180px!important;
  height:180px!important;
  object-fit:contain!important;
  transition:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  border:none!important;
  outline:none!important;
  box-shadow:none!important;
  background:#fff!important;
}
.pc-new:hover .pc-img{transform:none!important}
.pc-new .pc-lbl{display:none!important}
.pc-new .pc-overlay{display:none!important}
.pc-new .pc-badge{display:none!important}
.pc-new .pc-body{display:none!important}
.pc-new .pc-placeholder{width:180px;height:180px;background:transparent}

/* ── Placeholder card ── */
.pc-ph{
  flex:0 0 180px!important;
  width:180px!important;
  height:180px!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px;
  box-sizing:border-box;
  scroll-snap-align:start;
  border-radius:12px!important;
  border:1.5px dashed rgba(45,90,39,0.2)!important;
  background:transparent!important;
  font-family:'Inter',system-ui,sans-serif;
  font-size:12px;
  font-weight:500;
  color:var(--accent-green-muted);
  cursor:pointer;
  flex-shrink:0;
  transition:border-color .2s ease;
}
.pc-ph:hover{border-color:rgba(45,90,39,0.45)!important}
.sec-dark .pc-ph,.sec-green .pc-ph,.sec-purple .pc-ph{background:transparent!important;border:1.5px dashed rgba(45,90,39,0.2)!important;color:var(--accent-green-muted)!important}

/* ── Scroll row (for cat-row-wrap context — raw materials, unchanged) ── */
.cat-row-wrap{padding:10px var(--pad-x) 36px;max-width:100%}
.cat-row-inner{max-width:var(--max);margin:0 auto}
.sub-row-pill{display:inline-flex;align-items:center;gap:8px;font-size:.63rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;margin-bottom:14px;padding:5px 0 5px 12px;border-left:2.5px solid var(--accent-green);color:var(--accent-green)}
.prod-scroll-row{display:flex;gap:14px;overflow-x:auto;overflow-y:visible;padding:6px 2px 20px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scroll-padding-left:2px;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.12) transparent}
.prod-scroll-row::-webkit-scrollbar{height:4px}
.prod-scroll-row::-webkit-scrollbar-track{background:transparent}
.prod-scroll-row::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:4px}

/* ── Section description bar ── */
.sec-desc-bar{padding:0}
.sec-desc-p{font-size:.9rem;line-height:1.82;max-width:780px;margin-bottom:14px;padding-top:24px;color:var(--text-secondary)}
.sec-desc-bar.dark .sec-desc-p,.sec-desc-bar.light .sec-desc-p{color:var(--text-secondary)}
.sec-benefits-wrap{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.sec-benefit{font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:4px 12px;border-radius:40px}
.sec-benefit.dark,.sec-benefit.light{background:rgba(45,90,39,.08);border:1px solid rgba(45,90,39,.2);color:var(--accent-green)}
.sec-custom-note{font-size:.74rem;font-style:italic;padding-bottom:24px;border-bottom:1px solid rgba(0,0,0,.06);color:var(--text-secondary)}

/* ── Section dividers ── */
.sec-divider{padding:28px var(--pad-x) 0}
.sec-divider-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid rgba(0,0,0,.08)}
.sdi-icon{width:40px;height:40px;min-width:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.sdi-label{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:3px;color:var(--accent-green)}
.sdi-title{font-family:var(--font-d);font-size:1.35rem;font-weight:400;color:var(--text-primary)}

/* ══════════════════════════════
   LIGHTBOX
   ══════════════════════════════ */
#lb{
  position:fixed;inset:0;z-index:5000;
  background:var(--lightbox-overlay);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity 200ms ease;
  padding:24px;
}
#lb.open{opacity:1;pointer-events:all}
#lb-body{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:80vw}
#lb-img{max-width:80vw;max-height:72vh;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
#lb-name{font-family:'Inter',system-ui,sans-serif;font-size:18px;font-weight:400;color:rgba(255,255,255,.9);text-align:center;letter-spacing:.01em}
#lb-close{position:fixed;top:18px;right:22px;background:none;border:none;color:#fff;font-size:34px;cursor:pointer;line-height:1;padding:4px 8px;opacity:.75;transition:opacity .2s;font-weight:300}
#lb-close:hover{opacity:1}
.lb-arrow{position:fixed;top:50%;transform:translateY(-50%);background:none;border:none;color:#fff;font-size:52px;cursor:pointer;line-height:1;padding:8px 18px;opacity:.55;transition:opacity .2s ease;z-index:5001;font-weight:300}
.lb-arrow:hover{opacity:1}
#lb-prev{left:12px}
#lb-next{right:12px}
@media(max-width:768px){

/* ══ GLOBAL — targeted, not wildcard ══ */
html,body{overflow-x:hidden;width:100%}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}
section,.prod-sec,.sec,.cat-row-wrap{width:100%;max-width:100%}

/* Fix text overflow — only on text elements, not containers */
p,li,h1,h2,h3,h4,span:not(.scroll-label):not(.fb):not(.sec-badge){
  word-break:break-word;overflow-wrap:break-word;white-space:normal
}

/* ══ NAVIGATION ══ */
.nav-inner{height:64px}
.nav-logo-img{height:40px;max-width:130px}
.nav-menu{display:none}
.ham{display:flex;color:#2d5a27}
.ham span{background:#2d5a27}
.mobile-drawer{top:64px;background:#FAFAF7;padding:24px 20px 32px}
.mobile-drawer a{font-size:20px;padding:14px 0;color:#1a1a1a;justify-content:center;text-align:center;border-bottom:1px solid rgba(45,90,39,0.08)}
.mobile-drawer a::after{display:none}
.mobile-drawer a:last-child{margin-top:12px;font-size:14px;padding:14px 20px}

/* ══ TYPOGRAPHY ══ */
h1{font-size:clamp(28px,8vw,48px)!important}
h2{font-size:clamp(22px,6vw,36px)!important}
h3{font-size:clamp(16px,4vw,24px)!important}
p,li{font-size:15px;line-height:1.65}

/* ══ HOMEPAGE HERO ══ */
.hero-content{grid-template-columns:1fr;padding-top:88px;padding-bottom:40px;gap:20px}
.hero-visual{display:flex;flex-direction:row;gap:8px;height:160px}
.hero-visual-item{flex:1;height:160px;min-width:0;border-radius:8px;overflow:hidden}
.hero-visual-item:nth-child(1){grid-row:auto}
.hero h1{font-size:clamp(28px,7vw,42px)!important;max-width:100%}
.hero-sub{max-width:100%}
.hero-btns{flex-direction:column;gap:10px}
.hero-btns .btn{width:100%;min-height:52px;font-size:16px;justify-content:center}
.hero-trust{flex-wrap:wrap}

/* ══ INDEX PAGE SECTIONS ══ */
.sec{padding:40px 16px!important}
.numbers-inner{grid-template-columns:repeat(2,1fr);gap:12px}
.about-split{grid-template-columns:1fr}
.about-split-img{min-height:220px;max-height:260px}
.about-split-content{padding:24px 16px}
.products-grid{grid-template-columns:repeat(2,1fr);gap:8px}
.cat-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.why-grid{grid-template-columns:1fr 1fr;gap:8px}
.sustain-inner{grid-template-columns:1fr;gap:20px}
.cta-band-inner{flex-direction:column;align-items:flex-start;gap:20px}
.cta-btns{flex-direction:column;width:100%}
.cta-btns .btn{width:100%;min-height:52px;font-size:16px;justify-content:center}
.footer-grid{grid-template-columns:1fr;gap:24px;text-align:center}
.footer-social{justify-content:center}
.sh-split{flex-direction:column;align-items:flex-start;gap:16px}
.form-row{grid-template-columns:1fr}
.ph{padding-top:100px;padding-bottom:40px}
.btn{min-height:44px}

/* ══ TESTIMONIALS — horizontal scroll, 280px min card ══ */
.testi-grid{
  display:flex!important;flex-direction:row!important;
  overflow-x:auto!important;gap:12px!important;
  padding-bottom:12px;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;flex-wrap:nowrap!important
}
.tc{
  min-width:280px!important;max-width:85vw!important;flex-shrink:0;
  white-space:normal!important;word-break:normal!important;
  padding:20px!important;scroll-snap-align:start
}
.tc *{white-space:normal!important;word-break:normal!important}

/* ══ WHY GRID (wc cards) ══ */
.wc{white-space:normal!important;word-break:normal!important;min-width:0}
.wc *{white-space:normal!important}

/* ══ FILTER BAR — horizontal scroll, no wrapping ══ */
.filter-bar{
  display:flex!important;flex-direction:row!important;
  flex-wrap:nowrap!important;overflow-x:auto!important;
  gap:8px!important;padding-bottom:8px!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:none!important;-ms-overflow-style:none!important;
  width:100%
}
.filter-bar::-webkit-scrollbar{display:none}
.fb{
  flex-shrink:0!important;white-space:nowrap!important;
  padding:8px 16px!important;font-size:11px!important;
  letter-spacing:0.05em!important;min-height:36px
}

/* ══ PRODUCTS PAGE HERO — single column ══ */
.prod-sec{padding:40px 0;border-bottom:1px solid rgba(45,90,39,0.1)}
.prod-sec-inner{padding:0 16px}
.prod-sec-hero{
  display:flex!important;flex-direction:column!important;
  gap:0;width:100%;max-width:100%
}
.prod-sec-head{
  width:100%!important;float:none!important;
  display:block!important;padding-top:0
}
.prod-sec-h2{font-size:26px!important;font-style:italic!important;margin-bottom:10px!important}
.prod-sec-desc{
  font-size:14px!important;line-height:1.8!important;
  width:100%!important;max-width:100%!important;
  float:none!important;display:block!important;
  white-space:normal!important;word-break:normal!important;
  overflow-wrap:break-word!important;margin-bottom:14px!important
}
.prod-sec-custom{font-size:12px}
.sec-badges{gap:6px;flex-wrap:wrap;margin-bottom:14px}
.sec-badge{
  font-size:10px;padding:3px 10px;
  white-space:nowrap!important;word-break:normal!important
}

/* ══ PRODUCTS HERO IMAGE — below text, centred ══ */
.prod-sec-imgs{
  width:100%!important;max-width:260px!important;
  margin:16px auto 24px!important;
  float:none!important;display:block!important
}
.prod-sec-img-box{height:200px}
.prod-sec-img-box img{
  -webkit-mask-image:linear-gradient(to bottom,black 70%,transparent 100%);
  mask-image:linear-gradient(to bottom,black 70%,transparent 100%)
}

/* ══ SCROLL ROW LABELS ══ */
.scroll-block{margin-bottom:20px;overflow:visible}
.scroll-block-head{margin:20px 0 10px}
.scroll-label{
  font-size:10px!important;letter-spacing:0.12em!important;
  white-space:nowrap!important
}

/* ══ SCROLL WRAPPER — arrows hidden on mobile, row goes full width ══ */
.scroll-wrapper{display:block!important;width:100%}
.scroll-btn{display:none!important}

/* ══ PRODUCT SCROLL ROW — 2-column grid on mobile ══ */
.prod-sec .prod-scroll-row,.scroll-row{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  overflow-x:unset!important;
  padding:8px 0 16px!important;
  scroll-snap-type:none!important
}

/* ══ PRODUCT CARDS ══ */
.pc-new{
  flex:unset!important;width:100%!important;height:auto!important;
  aspect-ratio:1;scroll-snap-align:unset
}
.pc-new .pc-img-wrap{
  flex:unset!important;width:100%!important;height:100%!important
}
.pc-new .pc-img{width:100%!important;height:100%!important;object-fit:contain!important}
.pc-ph{flex:unset!important;width:100%!important;height:auto!important;aspect-ratio:1;font-size:10px;padding:8px}

/* ══ RAW MATERIALS CARDS — fix text, keep structure ══ */
.pc-name{
  font-size:.85rem!important;white-space:normal!important;
  word-break:normal!important;overflow-wrap:break-word!important;
  line-height:1.3!important
}
.pc-body{padding:10px 12px 12px!important}
.pc-cat{font-size:.6rem!important;white-space:nowrap!important}
.pc-detail{font-size:.68rem!important;white-space:normal!important;word-break:normal!important}

/* ══ BADGE PILLS ══ */
.badge,.pill,[class*="badge"]{
  white-space:nowrap!important;font-size:10px!important;padding:4px 10px!important
}

/* ══ LIGHTBOX ══ */
#lb{padding:0;background:rgba(0,0,0,0.92)}
#lb-body{max-width:100vw;height:100vh;justify-content:center}
#lb-img{max-width:90vw;max-height:80vh;object-fit:contain}
#lb-close{top:0;right:0;width:44px;height:44px;font-size:28px;display:flex;align-items:center;justify-content:center;opacity:1;z-index:5002}
.lb-arrow{font-size:36px;padding:8px 10px;opacity:.9}
#lb-prev{left:0}#lb-next{right:0}

/* ══ WHATSAPP ══ */
.wa-float{bottom:20px!important;right:16px!important;width:52px!important;height:52px!important;z-index:999}
}
@media(max-width:520px){
  .nav-inner{height:58px}
  .nav-logo-img{height:36px;max-width:120px}
  .mobile-drawer{top:58px}
  .cat-grid{grid-template-columns:1fr}
  .cat-card{aspect-ratio:4/3}
  .products-grid{grid-template-columns:repeat(2,1fr);gap:7px}
  .why-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .numbers-inner{grid-template-columns:repeat(2,1fr)}
  .wa-float{width:52px;height:52px}
  .wa-float svg{width:26px;height:26px}
  .prod-sec-inner{padding:0 16px}
  .prod-sec-img-box{height:200px}
  .pc-new{flex:0 0 120px!important;width:120px!important;height:120px!important}
  .pc-new .pc-img-wrap{flex:0 0 120px!important;width:120px!important;height:120px!important}
  .pc-new .pc-img{width:120px!important;height:120px!important}
  .pc-ph{flex:0 0 120px!important;width:120px!important;height:120px!important}
}
@media(max-width:380px){
  .nav-logo-img{height:40px;max-width:120px}
  .nav-inner{height:60px}
  .mobile-drawer{top:60px}
  .hero h1{font-size:2rem}
}

/* ═══════════════════════════════════════════════════
   MOBILE OVERHAUL — Appended block (max-width 768px)
   Overrides and supplements existing mobile rules
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { overflow-x: hidden; }
  .container, section, .section-inner {
    width: 100% !important; max-width: 100% !important;
    padding-left: 16px !important; padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  .section-header, .category-header {
    display: flex !important; flex-direction: column !important; align-items: flex-start !important;
  }
  .section-hero-image, .hero-img, [class*="hero"] img {
    float: none !important; display: block !important;
    width: 100% !important; max-width: 260px !important; margin: 16px auto 0 !important;
  }
  .section-description, .category-desc, section p, .intro-text {
    width: 100% !important; max-width: 100% !important; float: none !important;
    display: block !important; white-space: normal !important; word-break: normal !important;
    overflow-wrap: break-word !important; line-height: 1.65 !important;
  }
  /* Filter pills */
  .filter-pills, .filter-row, .filter-bar {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    overflow-x: auto !important; gap: 8px !important; padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important;
  }
  .filter-pills::-webkit-scrollbar, .filter-bar::-webkit-scrollbar { display: none; }
  .filter-pill, .filter-btn, .fb {
    flex-shrink: 0 !important; white-space: nowrap !important;
    padding: 8px 16px !important; font-size: 11px !important;
    letter-spacing: 0.05em !important;
    writing-mode: horizontal-tb !important; text-orientation: mixed !important;
  }
  /* Scroll rows */
  .scroll-row, .prod-scroll-row {
    display: flex !important; flex-direction: row !important;
    overflow-x: auto !important; gap: 12px !important;
    padding-bottom: 12px !important; -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; grid-template-columns: unset !important;
  }
  .scroll-row::-webkit-scrollbar, .prod-scroll-row::-webkit-scrollbar { display: none; }
  .product-card, .pc-new, .pc-ph {
    min-width: 130px !important; max-width: 130px !important;
    width: 130px !important; height: 130px !important;
    flex-shrink: 0 !important; white-space: normal !important; word-break: normal !important;
  }
  .pc-new .pc-img-wrap { width: 130px !important; height: 130px !important; flex: none !important; }
  .pc-new .pc-img { width: 130px !important; height: 130px !important; object-fit: contain !important; }
  .product-card img { width: 100% !important; height: 120px !important; object-fit: contain !important; }
  /* Hide arrows — cards scroll natively */
  .scroll-btn, .scroll-arrow, .chevron-btn, .arrow-left, .arrow-right { display: none !important; }
  .scroll-wrapper { display: block !important; }
  /* Testimonials */
  .reviews-row, .testimonials-row, .testi-grid {
    display: flex !important; flex-direction: row !important;
    overflow-x: auto !important; gap: 12px !important;
    -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important;
    flex-wrap: nowrap !important; scroll-snap-type: x mandatory;
  }
  .reviews-row::-webkit-scrollbar, .testi-grid::-webkit-scrollbar { display: none; }
  .review-card, .testimonial-card, .tc {
    min-width: 280px !important; max-width: 85vw !important; flex-shrink: 0 !important;
    white-space: normal !important; word-break: normal !important;
    overflow-wrap: break-word !important; padding: 20px !important;
    scroll-snap-align: start;
  }
  /* Badge pills */
  .badges-row, .sec-badges { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  .badge, .pill, .sec-badge, .fb {
    white-space: nowrap !important; font-size: 10px !important; padding: 4px 10px !important;
  }
  /* Typography */
  h1 { font-size: clamp(28px, 8vw, 48px) !important; }
  h2 { font-size: clamp(22px, 6vw, 36px) !important; }
  h3 { font-size: clamp(16px, 4vw, 24px) !important; }
  p, li { font-size: 15px !important; line-height: 1.65 !important; }
  /* WhatsApp float */
  .wa-float { bottom: 20px !important; right: 16px !important; width: 52px !important; height: 52px !important; }
}