/* =========================================================
   Rudraksh Enterprises - Global Stylesheet
   Sections: 1 Tokens  2 Reset  3 Utilities  4 Buttons
             5 Header/Nav  6 Hero  7 Products  8 Why Choose
             9 Process  10 Bulk CTA  11 Testimonials  12 Footer
             13 Inner pages  14 Forms  15 Responsive
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  --green-900:#1B2E0F;
  --green-800:#25400F;
  --green-700:#33551A;
  --green-600:#456F22;
  --green-500:#5C8F33;
  --green-100:#EAF0E0;

  --gold-600:#B8901F;
  --gold-500:#C9A227;
  --gold-400:#DDBB57;
  --gold-200:#F0DFAE;

  --brown-800:#3F2A12;
  --brown-600:#5A3D1C;

  --cream-50:#FDFBF4;
  --cream-100:#F9F5E9;
  --cream-200:#F2EBD9;
  --line:#E4DCC6;

  --ink:#26261E;
  --body:#5A5A4E;
  --white:#fff;

  --ff-head:'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-body:'Inter', 'Segoe UI', Roboto, Arial, sans-serif;

  --container:1200px;
  --gutter:24px;
  --radius:14px;
  --radius-lg:22px;

  --shadow-sm:0 2px 10px rgba(38,38,30,.06);
  --shadow-md:0 10px 30px rgba(38,38,30,.09);
  --shadow-lg:0 18px 50px rgba(38,38,30,.14);

  --header-h:70px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px)}
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.7;
  color:var(--body);
  background:var(--cream-50);
  /* `hidden` would make body a scroll container and silently break position:sticky.
     `clip` clips the same overflow without creating one. First line is the fallback. */
  overflow-x:hidden;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--ff-head);color:var(--green-800);line-height:1.22;font-weight:700}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px;border-radius:4px}

.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1em;height:1em;fill:none;flex:none}

/* visible to screen readers only - used for form labels the design hides */
.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
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--green-800);color:#fff;padding:12px 20px;border-radius:0 0 8px 0
}
.skip-link:focus{left:0}

/* ---------- 3. UTILITIES ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding:88px 0}
.section-head{text-align:center;max-width:760px;margin:0 auto 52px}
.section-title{font-size:clamp(1.9rem,3.4vw,2.65rem);color:var(--brown-800)}
.section-title.light{color:#fff}
.section-sub{margin-top:12px;font-size:1.02rem;color:var(--body)}
.section-title.ornament{
  display:inline-flex;align-items:center;gap:22px;justify-content:center;flex-wrap:nowrap
}
.section-title.ornament::before,
.section-title.ornament::after{
  content:"";width:clamp(40px,7vw,86px);height:8px;flex:none;
  background:
    linear-gradient(var(--gold-500),var(--gold-500)) left center/100% 1.5px no-repeat;
  position:relative
}
.section-title.ornament::before{transform:scaleX(-1)}
.section-title.ornament::before,.section-title.ornament::after{
  background-image:
    radial-gradient(circle at right, var(--green-600) 2.6px, transparent 3px),
    linear-gradient(var(--gold-500),var(--gold-500));
  background-size:100% 100%,100% 1.5px;
  background-position:right center,left center;
  background-repeat:no-repeat
}
.section-sub.arrowed{display:inline-flex;align-items:center;gap:14px}
.section-sub.arrowed::before,.section-sub.arrowed::after{
  content:"";width:clamp(26px,4vw,48px);height:1.5px;background:var(--gold-500)
}
.rule{display:block;width:74px;height:2px;background:var(--gold-400);margin:22px 0}

/* scroll reveal - only hidden when JS is available, so content never disappears without it */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- 4. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:999px;
  font-size:.94rem;font-weight:600;letter-spacing:.2px;
  transition:background .28s var(--ease),color .28s var(--ease),
             transform .28s var(--ease),box-shadow .28s var(--ease);
  white-space:nowrap
}
.btn .ic{width:17px;height:17px;transition:transform .28s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .ic{transform:translateX(4px)}
.btn-sm{padding:11px 20px;font-size:.87rem}

.btn-primary{background:var(--green-800);color:#fff;box-shadow:0 6px 18px rgba(37,64,15,.22)}
.btn-primary:hover{background:var(--green-700);box-shadow:0 12px 26px rgba(37,64,15,.3)}

.btn-gold{background:var(--gold-400);color:var(--green-900);box-shadow:0 6px 18px rgba(184,144,31,.25)}
.btn-gold:hover{background:var(--gold-500);color:#fff;box-shadow:0 12px 26px rgba(184,144,31,.35)}

.btn-outline{border:1.6px solid var(--green-700);color:var(--green-800)}
.btn-outline:hover{background:var(--green-800);color:#fff}

/* ---------- 5. HEADER / NAV ---------- */
/* No backdrop-filter here on purpose: it creates a containing block for fixed
   descendants, which would anchor the mobile nav shell to the header box instead
   of the viewport. The background is near-opaque anyway, so the blur added nothing. */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(253,251,244,.97);
  border-bottom:1px solid rgba(228,220,198,.9);
  transition:box-shadow .3s var(--ease),background .3s var(--ease)
}
.site-header.scrolled{box-shadow:0 6px 24px rgba(38,38,30,.09);background:var(--cream-50)}
.header-inner{display:flex;align-items:center;gap:22px;min-height:var(--header-h)}

.brand{flex:none;display:block}
.brand img{width:168px;height:auto;transition:width .3s var(--ease)}
.site-header.scrolled .brand img{width:150px}

/* on desktop the shell is transparent to layout - the nav sits in the header flex row */
.nav-shell{display:contents}
.main-nav{margin-left:auto}
.nav-list{display:flex;align-items:center;gap:4px}
.nav-link{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  padding:8px 13px;font-size:.9rem;font-weight:500;color:var(--brown-800);
  transition:color .25s var(--ease)
}
.nav-link::after{
  content:"";position:absolute;left:13px;right:13px;bottom:0;height:2px;
  background:var(--gold-500);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease)
}
.nav-link:hover,.nav-link.active{color:var(--green-700)}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.drop-btn{display:inline-flex;padding:0;pointer-events:none}
.drop-btn .ic{width:14px;height:14px;transition:transform .3s var(--ease)}

.has-dropdown{position:relative}
.dropdown{
  position:absolute;top:calc(100% + 6px);left:0;min-width:262px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-md);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:none}
.has-dropdown:hover .drop-btn .ic{transform:rotate(180deg)}
.dropdown a{
  display:block;padding:10px 14px;border-radius:8px;
  font-size:.9rem;color:var(--brown-800);
  transition:background .22s var(--ease),color .22s var(--ease),padding-left .22s var(--ease)
}
.dropdown a:hover{background:var(--cream-100);color:var(--green-700);padding-left:20px}

/* only exists inside the mobile drawer */
.nav-close{display:none}

.header-cta{flex:none;padding:9px 18px;font-size:.85rem;gap:8px}
.header-cta .ic{width:15px;height:15px}
/* leading icon - don't slide it into the label on hover */
.header-cta:hover .ic,.nav-cta-mobile:hover .ic{transform:none}
.nav-cta-mobile{display:none}

.nav-toggle{display:none;flex-direction:column;gap:5px;padding:10px;margin-left:auto}
.nav-toggle span{display:block;width:26px;height:2.4px;background:var(--green-800);border-radius:2px;transition:transform .3s var(--ease),opacity .25s var(--ease)}
.nav-toggle.open span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}

.nav-overlay{position:fixed;inset:0;background:rgba(27,46,15,.45);z-index:98;opacity:0;transition:opacity .3s var(--ease)}
.nav-overlay.show{opacity:1}

/* ---------- 6. HERO SLIDER ---------- */
.hero{background:var(--cream-100)}
.slider{position:relative;overflow:hidden}
.slider-track{display:flex;transition:transform .75s var(--ease);will-change:transform}
.slide{flex:0 0 100%;min-width:100%}
.slide picture{display:block}
.slide img{width:100%;height:auto;object-fit:cover}

.slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(253,251,244,.82);color:var(--green-800);
  box-shadow:var(--shadow-sm);
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)
}
.slider-arrow .ic{width:22px;height:22px}
.slider-arrow:hover{background:var(--green-800);color:#fff}
.slider-arrow.prev{left:22px}
.slider-arrow.next{right:22px}

.slider-dots{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  display:flex;gap:9px
}
.slider-dots button{
  width:11px;height:11px;border-radius:50%;
  background:rgba(253,251,244,.6);border:1.5px solid rgba(37,64,15,.35);
  transition:width .3s var(--ease),background .3s var(--ease)
}
.slider-dots button.active{width:30px;border-radius:999px;background:var(--gold-500);border-color:var(--gold-500)}

/* ---------- 7. PRODUCTS ---------- */
.products-section{background:var(--cream-100)}
/* slider shell - --pv is the single source of truth for cards per view */
.p-slider{position:relative;--pv:4}
.p-viewport{overflow:hidden;padding:6px 0 4px}
.p-track{display:flex;transition:transform .65s var(--ease);will-change:transform}
.p-slide{
  flex:0 0 calc(100% / var(--pv));max-width:calc(100% / var(--pv));
  padding:0 12px;display:flex
}
.p-slide .product-card{width:100%}

.p-arrow{
  position:absolute;top:38%;transform:translateY(-50%);z-index:4;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--green-800);
  box-shadow:var(--shadow-sm);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)
}
.p-arrow .ic{width:20px;height:20px}
.p-arrow:hover{background:var(--green-800);color:#fff;border-color:var(--green-800)}
.p-arrow.prev{left:-20px}
.p-arrow.next{right:-20px}

.p-dots{display:flex;justify-content:center;gap:9px;margin-top:30px}
.p-dots button{
  width:10px;height:10px;border-radius:50%;
  background:transparent;border:1.5px solid var(--green-600);opacity:.45;
  transition:width .3s var(--ease),background .3s var(--ease),opacity .3s var(--ease)
}
.p-dots button.active{width:28px;border-radius:999px;background:var(--gold-500);border-color:var(--gold-500);opacity:1}

.product-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)
}
.product-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:var(--gold-400)}
.pc-media{aspect-ratio:4/3;overflow:hidden;background:var(--cream-200)}
.pc-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.product-card:hover .pc-media img{transform:scale(1.07)}
.pc-body{padding:22px 20px 24px;text-align:center;display:flex;flex-direction:column;flex:1}
.pc-title{font-size:1.12rem;color:var(--brown-800)}
.pc-title::after{
  content:"";display:block;width:46px;height:1.5px;
  background:var(--gold-400);margin:12px auto 0
}
.pc-body p{margin:14px 0 20px;font-size:.87rem;line-height:1.65;flex:1}
.pc-body .btn{align-self:center}

/* ---------- 8. WHY CHOOSE ---------- */
.why-section{
  background:var(--green-800) url("why-choose-bg.png") center/cover no-repeat;
  position:relative
}
.why-section::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(27,46,15,.9) 0%,rgba(27,46,15,.74) 55%,rgba(27,46,15,.82) 100%)}
.why-grid{position:relative;display:grid;grid-template-columns:.95fr 1.35fr;gap:56px;align-items:center}
.why-intro p{color:rgba(255,255,255,.82);font-size:.96rem;margin-bottom:28px;max-width:420px}
.why-features{
  display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px;
  border-left:1px solid rgba(240,223,174,.22);padding-left:56px
}
.wf-item{text-align:center;color:#fff}
.wf-icon{
  display:grid;place-items:center;width:56px;height:56px;margin:0 auto 14px;
  border-radius:50%;border:1.5px solid rgba(240,223,174,.45);color:var(--gold-200);
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)
}
.wf-icon .ic{width:26px;height:26px}
.wf-item:hover .wf-icon{background:var(--gold-400);color:var(--green-900);transform:translateY(-4px)}
.wf-item h3{font-size:1rem;color:#fff;margin-bottom:6px}
.wf-item p{font-size:.81rem;color:rgba(255,255,255,.7);line-height:1.55}

/* ---------- 9. PROCESS ---------- */
.process-section{background:var(--cream-50)}
.process-list{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;
  max-width:1040px;margin-inline:auto
}
.process-step{position:relative;text-align:center;padding:0 6px}
.process-step:not(:last-child)::after{
  content:"";position:absolute;top:47px;left:calc(50% + 58px);right:calc(-50% + 58px);
  height:1.5px;
  background:repeating-linear-gradient(90deg,var(--gold-400) 0 6px,transparent 6px 12px)
}
.process-step:not(:last-child)::before{
  content:"";position:absolute;top:42px;right:calc(-50% + 52px);z-index:2;
  border-left:7px solid var(--gold-500);
  border-top:5px solid transparent;border-bottom:5px solid transparent
}
.ps-circle{
  position:relative;z-index:3;
  display:grid;place-items:center;width:94px;height:94px;margin:0 auto 18px;
  border-radius:50%;background:#fff;border:1.5px solid var(--line);
  color:var(--green-700);box-shadow:var(--shadow-sm);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)
}
.ps-circle .ic{width:40px;height:40px}
.process-step:hover .ps-circle{background:var(--green-800);color:var(--gold-200);border-color:var(--green-800);transform:translateY(-6px)}
.process-step h3{font-size:.95rem;color:var(--brown-800);font-family:var(--ff-body);font-weight:600;line-height:1.5}

/* ---------- 10. BULK CTA ---------- */
.bulk-section{
  position:relative;
  background:var(--green-800) url("bulk-supply-banner.png") right center/cover no-repeat;
  padding:84px 0
}
/* stays solid behind the copy, then clears the right side so the truck reads */
.bulk-section::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(27,46,15,.94) 0%,
    rgba(27,46,15,.9)  38%,
    rgba(27,46,15,.6)  62%,
    rgba(27,46,15,.18) 82%,
    rgba(27,46,15,.06) 100%)
}
.bulk-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.bulk-copy p{color:rgba(255,255,255,.85);margin:18px 0 26px;max-width:400px}
.bulk-points{display:grid;gap:18px;max-width:300px}
.bulk-points li{display:flex;align-items:center;gap:16px;color:#fff}
.bp-icon{
  flex:none;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  background:rgba(240,223,174,.14);border:1px solid rgba(240,223,174,.4);color:var(--gold-200)
}
.bp-icon .ic{width:23px;height:23px}
.bulk-points strong{display:block;font-family:var(--ff-head);font-size:1.05rem}
.bulk-points span{display:block;font-size:.83rem;color:rgba(255,255,255,.75)}

/* ---------- 11. TESTIMONIALS ---------- */
.testimonial-section{background:var(--cream-100)}
.t-slider{position:relative;display:flex;align-items:center;gap:18px}
.t-viewport{overflow:hidden;flex:1}
.t-track{display:flex;transition:transform .6s var(--ease)}
.t-card{
  position:relative;flex:0 0 33.3333%;min-width:33.3333%;
  padding:0 12px
}
/* card surface (inset so the gap between cards stays clean) */
.t-card::before{
  content:"";position:absolute;inset:0 12px;
  background:var(--cream-50);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease)
}
.t-card:hover::before{box-shadow:var(--shadow-md);border-color:var(--gold-400)}
.t-card > *{position:relative;z-index:1}
.t-quote{display:inline-grid;color:var(--green-700);opacity:.5;margin:28px 0 8px 28px}
.t-quote .ic{width:30px;height:30px}
.t-card p{padding:0 28px;font-size:.9rem;line-height:1.75;color:var(--body);margin-bottom:18px}
.t-card footer{padding:0 28px 28px}
.t-card footer strong{display:block;font-family:var(--ff-head);font-size:1rem;color:var(--brown-800)}
.t-card footer span{font-size:.8rem;color:var(--body)}

.t-arrow{
  flex:none;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--green-800);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)
}
.t-arrow .ic{width:20px;height:20px}
.t-arrow:hover{background:var(--green-800);color:#fff;border-color:var(--green-800)}
.t-arrow:disabled{opacity:.35;cursor:not-allowed}

/* ---------- 12. FOOTER ---------- */
.site-footer{background:var(--green-900);color:rgba(255,255,255,.72);padding-top:66px}
.footer-grid{display:grid;grid-template-columns:1.35fr .8fr 1.15fr 1.2fr;gap:44px;padding-bottom:52px}
/* logo.png has a light background, so knock it out to a clean white mark on the dark footer */
.f-brand img{width:216px;margin-bottom:18px;filter:brightness(0) invert(1)}
.f-brand p{font-size:.87rem;line-height:1.7;max-width:320px}
.socials{display:flex;gap:10px;margin-top:20px}
.socials a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#fff;
  transition:background .25s var(--ease),transform .25s var(--ease)
}
.socials .ic{width:18px;height:18px}
.socials a:hover{background:var(--gold-500);transform:translateY(-3px)}

.site-footer h3{
  font-size:1.05rem;color:#fff;margin-bottom:20px;padding-bottom:12px;position:relative
}
.site-footer h3::after{content:"";position:absolute;left:0;bottom:0;width:38px;height:2px;background:var(--gold-500)}
.f-col ul li{margin-bottom:11px}
.f-col a{font-size:.87rem;transition:color .22s var(--ease),padding-left .22s var(--ease)}
.f-col a:hover{color:var(--gold-400);padding-left:5px}
.f-contact ul li{display:flex;gap:11px;align-items:flex-start;font-size:.87rem;line-height:1.6}
.f-contact .ic{width:17px;height:17px;color:var(--gold-400);margin-top:4px}
.f-contact .btn{margin-top:18px}

.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 0}
.footer-bottom .container{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer-bottom p{font-size:.81rem;margin:0}
.fb-links a:hover{color:var(--gold-400)}

/* WhatsApp sticky - always on, so back-to-top stacks above it */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:91;
  display:flex;align-items:center;gap:0;
  height:56px;padding:0 16px;border-radius:999px;
  background:#25D366;color:#fff;
  box-shadow:0 6px 20px rgba(37,211,102,.42);
  transition:gap .32s var(--ease),padding .32s var(--ease),
             transform .28s var(--ease),box-shadow .28s var(--ease)
}
.wa-float .ic{width:28px;height:28px;flex:none}
.wa-label{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-size:.9rem;font-weight:600;
  transition:max-width .32s var(--ease)
}
.wa-float:hover,.wa-float:focus-visible{
  gap:10px;transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(37,211,102,.5)
}
.wa-float:hover .wa-label,.wa-float:focus-visible .wa-label{max-width:140px}

/* back to top */
.to-top{
  position:fixed;right:22px;bottom:90px;z-index:90;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--green-800);color:#fff;box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,background .25s var(--ease)
}
.to-top .ic{width:20px;height:20px;transform:rotate(180deg)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--gold-500)}

/* ---------- 13. INNER PAGES (shared, used by other pages) ---------- */
.page-hero{
  position:relative;padding:76px 0;
  background:var(--green-800) url("why-choose-bg.png") center/cover no-repeat;
  text-align:center
}
.page-hero::before{content:"";position:absolute;inset:0;background:rgba(27,46,15,.82)}
.page-hero .container{position:relative}
.page-hero h1{font-size:clamp(2rem,4vw,3rem);color:#fff}
.breadcrumb{display:flex;justify-content:center;gap:10px;margin-top:14px;font-size:.87rem;color:rgba(255,255,255,.72)}
.breadcrumb a:hover{color:var(--gold-400)}
.breadcrumb li+li::before{content:"/";margin-right:10px;color:rgba(240,223,174,.55)}
.breadcrumb li{display:flex;gap:10px}

/* ===== ABOUT PAGE ===== */

/* hero - artwork sits on the right, copy sits in the image's empty left area */
.page-hero-lg{
  position:relative;
  background:var(--cream-100) url("page-hero-bg.png") right center/cover no-repeat;
  min-height:520px;display:flex;align-items:center
}
.page-hero-lg::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(253,251,244,.96) 0%,
    rgba(253,251,244,.9)  26%,
    rgba(253,251,244,.55) 44%,
    rgba(253,251,244,.12) 58%,
    rgba(253,251,244,0)   70%)
}
.page-hero-lg .container{position:relative}
.ph-copy{max-width:470px;padding:72px 0}
.ph-copy h1{font-size:clamp(2.2rem,4.6vw,3.3rem);color:var(--brown-800)}
.ph-lead{margin-top:18px;font-size:1.05rem;color:var(--brown-600)}
.ph-lead b{color:var(--green-700);font-weight:700}
.ph-copy p.ph-text{margin-top:14px;font-size:.94rem;max-width:400px}
.ph-marks{display:flex;gap:30px;margin-top:32px;flex-wrap:wrap}
.ph-mark{text-align:center;width:96px}
.ph-mark span{
  display:grid;place-items:center;width:54px;height:54px;margin:0 auto 10px;
  border-radius:50%;border:1.5px solid var(--gold-400);color:var(--green-700);
  background:rgba(255,255,255,.6)
}
.ph-mark span .ic{width:25px;height:25px}
.ph-mark b{display:block;font-size:.79rem;font-weight:600;color:var(--brown-800);line-height:1.4}

/* our story */
.story-section{background:var(--cream-100)}
/* media sits on the right and stretches to match the copy column's height */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:stretch}
.story-copy{order:1;align-self:center}
.story-media{order:2;min-height:100%}
.story-media img{
  width:100%;height:100%;min-height:380px;object-fit:cover;object-position:right;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--line)
}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.8rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold-600);margin-bottom:14px
}
.eyebrow .ic{width:17px;height:17px}
.story-copy h2{font-size:clamp(1.7rem,3vw,2.3rem);color:var(--brown-800);margin-bottom:18px}
.story-copy p{font-size:.94rem;margin-bottom:14px}
.story-copy .btn{margin-top:12px}

/* core values */
.values-section{
  position:relative;
  background:var(--green-800) url("why-choose-bg.png") center/cover no-repeat
}
.values-section::before{content:"";position:absolute;inset:0;background:rgba(27,46,15,.87)}
.values-section .container{position:relative}
.values-section .section-title{color:#fff}
.values-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.value-item{text-align:center;color:#fff;padding:0 18px;position:relative}
.value-item+.value-item::before{
  content:"";position:absolute;left:0;top:8%;height:84%;width:1px;background:rgba(240,223,174,.22)
}
.value-item span{
  display:grid;place-items:center;width:56px;height:56px;margin:0 auto 15px;
  border-radius:50%;border:1.5px solid rgba(240,223,174,.45);color:var(--gold-200);
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)
}
.value-item span .ic{width:26px;height:26px}
.value-item:hover span{background:var(--gold-400);color:var(--green-900);transform:translateY(-4px)}
.value-item h3{font-size:1rem;color:#fff;margin-bottom:7px}
.value-item p{font-size:.81rem;color:rgba(255,255,255,.7);line-height:1.55}

/* stats */
.stats-section{background:var(--cream-50)}
.stats-grid{display:grid;grid-template-columns:.85fr 1.4fr;gap:52px;align-items:center}
.stats-copy h2{font-size:clamp(1.7rem,3vw,2.3rem);color:var(--brown-800)}
.stats-copy p{font-size:.94rem;margin:20px 0 26px;max-width:340px}
.stats-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stat-tile{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 16px;text-align:center;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)
}
.stat-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--gold-400)}
.stat-tile .ic{width:30px;height:30px;color:var(--green-700);margin:0 auto 12px}
.stat-tile b{
  display:block;font-family:var(--ff-head);font-size:clamp(1.7rem,3vw,2.2rem);
  color:var(--brown-800);line-height:1.15
}
.stat-tile span{display:block;margin-top:6px;font-size:.82rem;color:var(--body)}

/* products we deal in */
.deal-section{background:var(--cream-100)}
.deal-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:26px}
.deal-item{text-align:center}
.deal-item a{display:block}
.deal-thumb{
  width:150px;height:150px;margin:0 auto 16px;border-radius:50%;overflow:hidden;
  border:3px solid #fff;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)
}
.deal-thumb img{width:100%;height:100%;object-fit:cover}
.deal-item a:hover .deal-thumb{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--gold-400)}
.deal-item b{
  display:block;font-family:var(--ff-head);font-size:.97rem;
  color:var(--brown-800);line-height:1.45
}

/* facilities + assurance */
.facility-section{background:var(--cream-50)}
.facility-panel{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;
  background:var(--cream-200);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:46px 48px
}
.facility-panel h2{font-size:1.5rem;color:var(--brown-800);margin-bottom:24px}
.fac-list li{display:flex;gap:16px;margin-bottom:22px}
.fac-list li:last-child{margin-bottom:0}
.fac-list span{
  flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:#fff;border:1px solid var(--line);color:var(--green-700)
}
.fac-list span .ic{width:21px;height:21px}
.fac-list strong{display:block;font-size:.95rem;color:var(--brown-800);margin-bottom:3px}
.fac-list p{font-size:.85rem;line-height:1.6}

/* commitment band */
.commit-section{
  position:relative;
  background:var(--green-900) url("dry-cow-dung-powder.png") center/cover no-repeat;
  padding:76px 0
}
.commit-section::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(27,46,15,.95) 0%,rgba(27,46,15,.85) 50%,rgba(27,46,15,.5) 100%)
}
.commit-section .container{position:relative}
.commit-section h2{font-size:clamp(1.7rem,3vw,2.3rem);color:#fff;margin-bottom:16px}
.commit-section p{color:rgba(255,255,255,.85);max-width:540px;margin-bottom:26px}

/* ===== PRODUCTS PAGE ===== */
.catalogue-section{background:var(--cream-100)}
.catalogue-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.cat-card{
  background:var(--cream-50);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;text-align:center;
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)
}
.cat-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:var(--gold-400)}
.cat-media{aspect-ratio:16/11;overflow:hidden;background:var(--cream-200);margin:12px 12px 0;border-radius:10px}
.cat-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cat-card:hover .cat-media img{transform:scale(1.07)}
.cat-body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1;align-items:center}
.cat-body h3{font-size:1.14rem;color:var(--brown-800)}
.cat-body p{margin:12px 0 20px;font-size:.87rem;line-height:1.65;flex:1}
.cat-go{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1.5px solid var(--gold-400);color:var(--green-700);
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)
}
.cat-go .ic{width:19px;height:19px}
.cat-card:hover .cat-go{background:var(--green-800);border-color:var(--green-800);color:#fff;transform:translateX(4px)}

/* bulk supply panel */
.bulk-panel-section{background:var(--cream-50)}
.bulk-panel{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--cream-200) url("bulk-supply-banner.png") right center/cover no-repeat;
  box-shadow:var(--shadow-sm)
}
.bulk-panel::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    var(--cream-200) 0%,
    rgba(242,235,217,.96) 34%,
    rgba(242,235,217,.6)  50%,
    rgba(242,235,217,.1)  64%,
    rgba(242,235,217,0)   76%)
}
.bulk-panel-copy{position:relative;padding:64px 56px;max-width:470px}
.bulk-panel-copy h2{font-size:clamp(1.7rem,3.2vw,2.4rem);color:var(--brown-800)}
.bulk-panel-copy p{margin:20px 0 26px;font-size:.94rem;max-width:340px}

/* ===== PRODUCT DETAIL PAGE ===== */
.crumb-bar{background:var(--green-800);padding:13px 0}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:.85rem;color:rgba(255,255,255,.72)}
.crumb li{display:flex;align-items:center;gap:9px}
.crumb li+li::before{content:"›";color:rgba(240,223,174,.6);font-size:1.05rem;line-height:1}
.crumb .ic{width:15px;height:15px;color:var(--gold-400)}
.crumb a{transition:color .22s var(--ease)}
.crumb a:hover{color:var(--gold-400)}
.crumb [aria-current]{color:#fff}

.pdp-section{padding:44px 0 66px;background:var(--cream-50)}
.pdp-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
/* image holds its place while the details column scrolls past */
.pdp-media{
  position:sticky;top:calc(var(--header-h) + 24px);
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--cream-200);box-shadow:var(--shadow-sm)
}
.pdp-media img{width:100%;aspect-ratio:4/3;object-fit:cover}

.pdp-title{font-size:clamp(1.8rem,3.6vw,2.5rem);color:var(--brown-800)}
.pdp-intro{margin-top:18px;font-size:.98rem;color:var(--body)}

.pdp-badges{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin:26px 0;padding:20px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.pdp-badge{text-align:center}
.pdp-badge span{
  display:grid;place-items:center;width:46px;height:46px;margin:0 auto 9px;
  border-radius:50%;border:1.5px solid var(--gold-400);color:var(--green-700)
}
.pdp-badge span .ic{width:21px;height:21px}
.pdp-badge b{display:block;font-size:.78rem;font-weight:600;color:var(--brown-800);line-height:1.4}

.pdp-facts li{display:grid;grid-template-columns:22px 132px 1fr;gap:10px;align-items:start;margin-bottom:12px}
.pdp-facts .ic{width:19px;height:19px;color:var(--green-700);margin-top:4px}
.pdp-facts dt,.pdp-facts b{font-size:.9rem;font-weight:600;color:var(--brown-800)}
.pdp-facts span{font-size:.9rem;color:var(--body)}
.pdp-facts span::before{content:": ";color:var(--body)}

.pdp-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* benefits strip */
.benefit-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--cream-200);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px 10px
}
.benefit-item{display:flex;gap:14px;padding:4px 22px;position:relative}
.benefit-item+.benefit-item::before{
  content:"";position:absolute;left:0;top:6%;height:88%;width:1px;background:var(--line)
}
.benefit-item > .ic{width:32px;height:32px;flex:none;color:var(--green-600);margin-top:2px}
.benefit-item h3{font-size:.98rem;color:var(--brown-800);margin-bottom:6px}
.benefit-item p{font-size:.83rem;line-height:1.6}

/* description + specs */
.detail-section{background:var(--cream-100)}
.detail-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px}
.detail-copy{border-right:1px solid var(--line);padding-right:56px}
.detail-grid h2{font-size:1.5rem;color:var(--brown-800)}
.detail-grid h2 + .rule{margin:14px 0 22px}
.detail-copy p{font-size:.92rem;margin-bottom:16px}
.detail-tags{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.detail-tags li{display:flex;align-items:center;gap:11px;font-size:.85rem;color:var(--brown-800)}
.detail-tags span{
  flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--gold-400);color:var(--green-700)
}
.detail-tags span .ic{width:17px;height:17px}

.spec-table{width:100%;border-collapse:collapse;font-size:.89rem}
.spec-table th,.spec-table td{padding:12px 18px;text-align:left;border:1px solid var(--line)}
.spec-table th{width:38%;font-weight:600;color:var(--brown-800);background:var(--cream-200)}
.spec-table td{color:var(--body);background:#fff}
.spec-table tr:nth-child(even) th{background:var(--cream-100)}
.spec-table tr:nth-child(even) td{background:var(--cream-50)}
.spec-note{margin-top:14px;font-size:.79rem;color:var(--body);font-style:italic}

/* related products */
.related-section{background:var(--cream-50)}

/* ===== CONTACT PAGE ===== */
.contact-section{background:var(--cream-100)}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}

.form-card{
  position:relative;overflow:hidden;
  background:var(--cream-200);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:42px 40px
}
.form-card h2{font-size:clamp(1.5rem,2.6vw,1.9rem);color:var(--brown-800)}
.form-card > p{margin:16px 0 26px;font-size:.92rem}
.form-card .btn{margin-top:6px}

.info-col h2{font-size:clamp(1.5rem,2.6vw,1.9rem);color:var(--brown-800)}
.info-col > .rule{margin:14px 0 26px}
.info-list{display:grid;gap:16px}
.info-card{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--cream-50);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 24px;
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)
}
.info-card:hover{box-shadow:var(--shadow-md);border-color:var(--gold-400);transform:translateY(-3px)}
.info-icon{
  flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  background:var(--green-800);color:var(--gold-200)
}
.info-icon .ic{width:23px;height:23px}
.info-card h3{font-size:1rem;color:var(--brown-800);margin-bottom:7px}
.info-card p,.info-card a{display:block;font-size:.88rem;line-height:1.65;color:var(--body)}
.info-card a{transition:color .22s var(--ease)}
.info-card a:hover{color:var(--green-700)}

/* bulk band */
.bulk-band{
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--green-800),var(--green-700));
  border-radius:var(--radius-lg);padding:34px 40px;
  box-shadow:var(--shadow-md)
}
.bulk-band-icon{
  flex:none;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;
  border:1.5px solid rgba(240,223,174,.5);color:var(--gold-200)
}
.bulk-band-icon .ic{width:32px;height:32px}
.bulk-band-copy{flex:1;min-width:240px}
.bulk-band h2{font-size:1.4rem;color:#fff;margin-bottom:8px}
.bulk-band p{font-size:.9rem;color:rgba(255,255,255,.82)}

/* map */
.map-embed{line-height:0;background:var(--cream-200)}
.map-embed iframe{width:100%;height:400px;border:0;display:block;filter:saturate(.9)}

/* ===== SITEMAP PAGE ===== */
.sitemap-section{background:var(--cream-50)}
.sm-tree{position:relative}

.sm-root{display:flex;justify-content:center;position:relative;padding-bottom:34px}
.sm-root::after{
  content:"";position:absolute;left:50%;bottom:0;width:1.5px;height:34px;background:var(--gold-400)
}
.sm-root a{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--green-800);color:#fff;
  padding:16px 40px;border-radius:12px;
  font-family:var(--ff-head);font-size:1.2rem;font-weight:700;
  box-shadow:var(--shadow-md);
  transition:background .28s var(--ease),transform .28s var(--ease)
}
.sm-root a .ic{width:24px;height:24px;color:var(--gold-400)}
.sm-root a:hover{background:var(--green-700);transform:translateY(-3px)}

.sm-branches{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding-top:44px
}
/* horizontal bus joining the branch drops. Inset must equal half a column:
   with N columns and N-1 gaps, that is (100% - (N-1)*gap) / (2N). */
.sm-branches{--sm-gap:26px;--sm-cols:4}
.sm-branches::before{
  content:"";position:absolute;top:0;height:1.5px;background:var(--gold-400);
  left:calc((100% - (var(--sm-cols) - 1) * var(--sm-gap)) / (var(--sm-cols) * 2));
  right:calc((100% - (var(--sm-cols) - 1) * var(--sm-gap)) / (var(--sm-cols) * 2))
}
.sm-branch{position:relative}
.sm-branch::before{
  content:"";position:absolute;top:-44px;left:50%;width:1.5px;height:44px;background:var(--gold-400)
}

.sm-head{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  background:var(--cream-200);border:1px solid var(--gold-400);border-radius:12px;
  padding:22px 14px;
  transition:background .28s var(--ease),transform .28s var(--ease),box-shadow .28s var(--ease)
}
.sm-head .ic{width:28px;height:28px;color:var(--green-700)}
.sm-head b{font-family:var(--ff-head);font-size:1.02rem;color:var(--brown-800)}
.sm-head:hover{background:var(--green-800);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.sm-head:hover .ic{color:var(--gold-400)}
.sm-head:hover b{color:#fff}

.sm-sub{position:relative;margin-top:26px}
/* vertical spine behind the stacked cards - visible only in the gaps */
.sm-sub::before{
  content:"";position:absolute;left:50%;top:-26px;bottom:22px;width:1.5px;background:var(--gold-400)
}
.sm-sub li{position:relative;z-index:1;margin-bottom:10px}
.sm-sub li:last-child{margin-bottom:0}
.sm-sub a{
  display:block;text-align:center;
  background:var(--cream-50);border:1px solid var(--line);border-radius:9px;
  padding:11px 12px;font-size:.85rem;color:var(--brown-800);
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)
}
.sm-sub a:hover{
  border-color:var(--gold-400);background:var(--cream-200);
  color:var(--green-700);transform:translateY(-2px)
}

/* ---------- 14. FORMS ---------- */
.field{margin-bottom:18px}
.field label{display:block;font-size:.85rem;font-weight:600;color:var(--brown-800);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 16px;font:inherit;font-size:.92rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:10px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--green-600);box-shadow:0 0 0 3px rgba(92,143,51,.15)
}
.field .error{display:none;margin-top:6px;font-size:.79rem;color:#B3261E}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#B3261E}
.field.invalid .error{display:block}
.form-note{margin-top:14px;padding:13px 16px;border-radius:10px;font-size:.87rem;display:none}
.form-note.ok{display:block;background:var(--green-100);color:var(--green-800)}
.form-note.err{display:block;background:#FBE9E7;color:#B3261E}

/* ---------- 15. RESPONSIVE ---------- */
@media (max-width:1200px){
  .why-features{padding-left:40px;gap:28px 22px}
  .p-slide{padding:0 9px}
  .p-arrow.prev{left:-8px}
  .p-arrow.next{right:-8px}
}

@media (max-width:1080px){
  :root{--header-h:64px}
  .nav-list{gap:0}
  .nav-link{padding:10px 10px;font-size:.88rem}
  .brand img{width:180px}
  .header-cta{padding:12px 20px;font-size:.86rem}
  .p-slider{--pv:3}
  .why-grid{grid-template-columns:1fr;gap:40px}
  .why-features{border-left:0;padding-left:0;border-top:1px solid rgba(240,223,174,.22);padding-top:36px}
  .values-grid{grid-template-columns:repeat(3,1fr);row-gap:36px}
  .value-item:nth-child(4)::before{display:none}
  .stats-grid{grid-template-columns:1fr;gap:34px}
  .stats-copy p{max-width:520px}
  .deal-grid{grid-template-columns:repeat(3,1fr);row-gap:32px}
  .catalogue-grid{grid-template-columns:repeat(2,1fr)}
  .bulk-panel-copy{padding:52px 40px}
  .pdp-grid{gap:36px}
  .benefit-strip{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .benefit-item:nth-child(3)::before{display:none}
  .detail-grid{grid-template-columns:1fr;gap:40px}
  .detail-copy{border-right:0;padding-right:0;border-bottom:1px solid var(--line);padding-bottom:34px}
  .facility-panel{gap:40px;padding:38px 34px}
  .process-list{grid-template-columns:repeat(3,1fr);gap:36px 16px;max-width:680px}
  .process-step:nth-child(3)::after,.process-step:nth-child(3)::before{display:none}
  .t-card{flex:0 0 50%;min-width:50%}
}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  .bulk-grid{grid-template-columns:1fr;gap:36px}
  /* stacked: image goes first, back to a normal banner ratio */
  /* stacked layout - nothing to scroll past, so drop the sticky */
  .pdp-grid{grid-template-columns:1fr;gap:30px}
  .pdp-media{position:static}
  /* two columns - the single bus line no longer describes the layout, so drop it */
  .sm-branches{grid-template-columns:repeat(2,1fr);row-gap:44px;padding-top:34px;--sm-cols:2}
  .sm-branch::before{top:-34px;height:34px}
  .sm-branch:nth-child(n+3)::before{display:none}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .form-card{padding:34px 26px}
  .bulk-band{padding:28px 26px;gap:20px}
  .map-embed iframe{height:320px}
  .story-grid{grid-template-columns:1fr;gap:36px}
  .story-copy{order:2}
  .story-media{order:1;min-height:0}
  .story-media img{height:auto;min-height:0;aspect-ratio:16/9}
  .facility-panel{grid-template-columns:1fr;gap:34px}
  /* artwork can't sit beside the copy any more - wash the whole panel instead */
  .bulk-panel{background-position:right bottom;background-size:170% auto}
  .bulk-panel::before{
    background:linear-gradient(180deg,
      var(--cream-200) 0%,rgba(242,235,217,.95) 46%,
      rgba(242,235,217,.72) 64%,rgba(242,235,217,.15) 88%,rgba(242,235,217,0) 100%)
  }
  .bulk-panel-copy{max-width:none;padding:46px 34px 200px}
  /* the artwork can no longer sit beside the copy - fade the whole panel instead */
  .page-hero-lg{min-height:0;background-position:right bottom;background-size:150% auto}
  /* stays opaque behind the copy (ends ~70% down), then clears for the artwork */
  .page-hero-lg::before{
    background:linear-gradient(180deg,
      rgba(253,251,244,.97) 0%,
      rgba(253,251,244,.94) 52%,
      rgba(253,251,244,.88) 68%,
      rgba(253,251,244,.4)  84%,
      rgba(253,251,244,.1)  100%)
  }
  .ph-copy{max-width:none;padding:52px 0 200px}
  .ph-copy p.ph-text{max-width:520px}
  .bulk-section::before{background:linear-gradient(180deg,rgba(27,46,15,.9),rgba(27,46,15,.78))}
}

@media (max-width:860px){
  .header-cta{display:none}
  .nav-toggle{display:flex}
  /* The shell is fixed and exactly viewport-sized, so it can never widen the page.
     The drawer is absolute INSIDE it and parked off-screen, where the shell's
     overflow clips it. A fixed drawer on its own is not clipped by any ancestor
     overflow (its containing block is the viewport), which is what let it show
     on the right and create horizontal scroll on mobile. */
  .nav-shell{
    display:block;position:fixed;inset:0;z-index:99;
    overflow:hidden;pointer-events:none
  }
  .main-nav{
    position:absolute;top:0;right:0;
    width:min(340px,86vw);height:100%;
    background:var(--cream-50);
    padding:96px 24px 32px;
    overflow-y:auto;overscroll-behavior:contain;
    box-shadow:-10px 0 40px rgba(38,38,30,.16);
    transform:translateX(100%);
    transition:transform .38s var(--ease);
    margin-left:0;
    pointer-events:auto
  }
  .main-nav.open{transform:none}
  /* the hamburger sits behind the open drawer, so the drawer carries its own close button */
  .nav-close{
    display:grid;place-items:center;
    position:absolute;top:22px;right:20px;
    width:42px;height:42px;border-radius:50%;
    background:var(--cream-200);border:1px solid var(--line);color:var(--brown-800);
    transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)
  }
  .nav-close .ic{width:20px;height:20px}
  .nav-close:hover{background:var(--green-800);border-color:var(--green-800);color:#fff;transform:rotate(90deg)}

  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  /* flex, not inline-flex, so the row and its underline span the drawer */
  .nav-link{
    display:flex;width:100%;
    padding:14px 4px;font-size:1rem;
    border-bottom:1px solid var(--line);justify-content:space-between
  }
  .nav-link::after{display:none}
  .has-dropdown{display:block}
  .dropdown{
    position:static;opacity:1;visibility:visible;transform:none;
    border:0;box-shadow:none;background:var(--cream-100);border-radius:10px;
    max-height:0;overflow:hidden;padding:0 8px;margin-top:0;
    transition:max-height .35s var(--ease),padding .35s var(--ease),margin .35s var(--ease)
  }
  .has-dropdown.open .dropdown{max-height:340px;padding:8px;margin:8px 0}
  .has-dropdown.open .drop-btn .ic{transform:rotate(180deg)}
  .nav-cta-mobile{display:inline-flex;margin-top:26px;width:100%;justify-content:center}
  .section{padding:64px 0}
  .slider-arrow{width:40px;height:40px}
  .slider-arrow.prev{left:12px}
  .slider-arrow.next{right:12px}
  .slider-dots{bottom:16px}
}

@media (max-width:768px){
  .p-slider{--pv:2}
  .why-features{grid-template-columns:repeat(2,1fr)}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .value-item::before{display:none!important}
  .stats-tiles{grid-template-columns:repeat(3,1fr);gap:14px}
  .deal-grid{grid-template-columns:repeat(2,1fr)}
  .deal-thumb{width:128px;height:128px}
  /* card takes the full width, arrows drop below it instead of eating side space */
  .t-slider{flex-wrap:wrap;justify-content:center}
  .t-viewport{flex:0 0 100%;width:100%;order:0}
  .t-arrow{order:1;margin-top:22px}
  .t-card{flex:0 0 100%;min-width:100%;padding:0}
  .t-card::before{inset:0}
  .section-head{margin-bottom:38px}
}

@media (max-width:620px){
  :root{--gutter:18px}
  .section-title.ornament::before,.section-title.ornament::after{width:32px}
  .section-title.ornament{gap:12px}
  .process-list{grid-template-columns:repeat(2,1fr);max-width:420px}
  .process-step::after,.process-step::before{display:none!important}

  /* no carousel on phones - every product stacked, one per row.
     --pv-mode is read by the slider script so autoplay stops as well. */
  .p-slider{--pv:1;--pv-mode:static}
  .p-viewport{overflow:visible;padding:0}
  .p-track{display:block;transform:none!important;transition:none!important}
  .p-slide{max-width:none;padding:0;margin-bottom:20px}
  .p-slide:last-child{margin-bottom:0}
  .p-slide.is-clone{display:none}
  .p-arrow,.p-dots{display:none}

  /* Quick Links and Our Products share a row; brand and contact span full width */
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px 24px}
  .f-brand,.f-contact{grid-column:1 / -1}
  .footer-bottom .container{justify-content:center;text-align:center}
  /* tighter corner on phones, and the label would never fit */
  .wa-float{right:16px;bottom:16px;height:52px;padding:0 12px}
  .wa-float .ic{width:26px;height:26px}
  .wa-label{display:none}
  .to-top{right:16px;bottom:80px;width:42px;height:42px}
  .slider-dots{bottom:10px}
  .slider-dots button{width:9px;height:9px}
  .slider-dots button.active{width:24px}
}

@media (max-width:460px){
  .p-slider{--pv:1}
  .why-features{grid-template-columns:1fr;gap:24px}
  .values-grid{grid-template-columns:1fr;row-gap:28px}
  .value-item{display:flex;align-items:center;gap:16px;text-align:left;padding:0}
  .value-item span{margin:0}
  .stats-tiles{grid-template-columns:1fr;gap:14px}
  .stat-tile{display:flex;align-items:center;gap:16px;text-align:left;padding:20px}
  .stat-tile .ic{margin:0}
  .deal-grid{grid-template-columns:repeat(2,1fr);gap:22px 14px}
  .deal-thumb{width:118px;height:118px}
  .deal-item b{font-size:.86rem}
  /* single column - connectors would just be clutter */
  .sm-branches{grid-template-columns:1fr;row-gap:34px;padding-top:0}
  .sm-branches::before,.sm-branch::before{display:none}
  .sm-root{padding-bottom:0}
  .sm-root::after{display:none}
  .sm-sub{margin-top:14px}
  .sm-sub::before{display:none}
  .catalogue-grid{grid-template-columns:1fr}
  .bulk-panel-copy{padding:38px 22px 170px}
  .form-card{padding:28px 20px}
  .bulk-band{padding:26px 20px;text-align:center;justify-content:center}
  .bulk-band-icon{margin:0 auto}
  .map-embed iframe{height:260px}
  .pdp-badges{grid-template-columns:repeat(2,1fr);row-gap:18px}
  .benefit-strip{grid-template-columns:1fr;row-gap:22px;padding:24px 6px}
  .benefit-item::before{display:none!important}
  .pdp-facts li{grid-template-columns:22px 1fr;row-gap:2px}
  .pdp-facts span{grid-column:2}
  .pdp-facts span::before{content:""}
  .detail-tags{grid-template-columns:1fr}
  .pdp-actions .btn{flex:1;justify-content:center}
  .spec-table th,.spec-table td{padding:10px 12px}
  .facility-panel{padding:30px 22px}
  .ph-marks{gap:18px}
  .wf-item{display:flex;align-items:center;gap:16px;text-align:left}
  .wf-icon{margin:0}
  .process-list{grid-template-columns:1fr;max-width:320px;gap:28px}
  .process-step{display:flex;align-items:center;gap:18px;text-align:left}
  .ps-circle{margin:0;width:76px;height:76px}
  .ps-circle .ic{width:32px;height:32px}
  .brand img{width:150px}
  .site-header.scrolled .brand img{width:140px}
}

/* ---------- MOTION PREFERENCE ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
}