:root { --mist:#F1F4EC; --canopy:#1F3D2B; --leaf:#3E7C4F; --moss:#7FA469; --lichen:#DDE6CC; --bark:#6B5138; --card:#FAFBF6; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Karla','Segoe UI',sans-serif; background:var(--mist); color:var(--canopy); font-size:16.5px; line-height:1.55; }
.bri { font-family:'Bricolage Grotesque',Georgia,serif; }
.tamil { font-family:'Anek Tamil','Segoe UI',sans-serif; }
.container { max-width:1140px; margin:0 auto; padding:0 28px; }
a { color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible { outline:3px solid var(--leaf); outline-offset:2px; }
section { padding:92px 0; }
section[id] { scroll-margin-top:80px; }
.eyebrow { font-size:12px; letter-spacing:2.5px; font-weight:800; color:#2F6640; text-transform:uppercase; }
h2.sec { font-family:'Bricolage Grotesque',serif; font-size:clamp(30px,4vw,42px); font-weight:600; letter-spacing:-0.5px; line-height:1.12; margin-top:10px; }
.sub { margin-top:14px; font-size:17px; color:#48604F; max-width:640px; }
.btn { display:inline-block; background:var(--canopy); color:var(--mist); font-weight:800; font-size:15px; padding:14px 30px; border-radius:100px; border:2px solid var(--canopy); }
.btn:hover { background:var(--leaf); border-color:var(--leaf); }
.btn.ghost { background:transparent; color:var(--canopy); }
.btn.ghost:hover { background:var(--canopy); color:var(--mist); }

/* nav */
nav { background:rgba(241,244,236,.92); backdrop-filter:blur(8px); position:sticky; top:0; z-index:50; border-bottom:1px solid #DCE3D2; }
nav .row { display:flex; align-items:center; justify-content:space-between; height:66px; }
.logo { display:flex; align-items:center; gap:10px; font-family:'Bricolage Grotesque',serif; font-weight:700; font-size:23px; letter-spacing:-0.3px; }
.logo .mark { display:block; }
nav .links { display:flex; gap:26px; align-items:center; font-weight:700; font-size:14.5px; }
nav .links a.link:hover,
nav .links a.link.active { color:var(--leaf); }
nav .links .btn { padding:10px 22px; font-size:14px; }
.nav-toggle { display:none; width:44px; height:44px; padding:0; border:none; background:transparent; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; }
.nav-toggle span { display:block; width:24px; height:2.5px; margin:0 auto; border-radius:2px; background:var(--canopy); transition:transform .25s ease, opacity .2s ease; }
nav.open .nav-toggle span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
nav.open .nav-toggle span:nth-child(2) { opacity:0; }
nav.open .nav-toggle span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

/* hero */
.hero { padding:96px 0 84px; position:relative; overflow:hidden; }
.hero .grid { display:flex; gap:48px; align-items:center; flex-wrap:wrap; }
.hero .hl { flex:1.3; min-width:320px; }
.hero .hr { flex:1; min-width:280px; text-align:center; position:relative; }
.hero h1 { font-family:'Bricolage Grotesque',serif; font-size:clamp(38px,5.6vw,64px); font-weight:650; letter-spacing:-1px; line-height:1.05; }
.hero h1 em { font-style:normal; color:var(--leaf); }
.hero .cta { margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.hero-mark { width:100%; max-width:300px; height:auto; }
.leaf-float { position:absolute; opacity:.5; animation:drift 9s ease-in-out infinite; }
.leaf-float.l2 { animation-delay:3s; animation-duration:11s; }
.leaf-float.l3 { animation-delay:6s; animation-duration:13s; }
@keyframes drift {
  0%,100% { transform:translate(0,0) rotate(0deg); }
  40% { transform:translate(-6px,12px) rotate(7deg); }
  70% { transform:translate(5px,20px) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .leaf-float { animation:none; }
}

/* impact strip */
.impact { background:var(--canopy); color:var(--mist); padding:52px 0; }
.impact .row { display:flex; gap:20px; flex-wrap:wrap; text-align:center; }
.impact .i { flex:1; min-width:190px; }
.impact .v { font-family:'Bricolage Grotesque',serif; font-size:clamp(32px,4.5vw,50px); font-weight:650; color:#CFE3B8; }
.impact .k { font-size:12.5px; letter-spacing:2px; text-transform:uppercase; margin-top:6px; color:#9FB894; }

/* origin trio */
.trio { display:flex; gap:20px; flex-wrap:wrap; margin-top:40px; }
.tcard { flex:1; min-width:260px; background:var(--card); border-radius:22px; padding:30px 28px; border:1px solid #E2E8D6; }
.tcard.hero-card { background:var(--lichen); border-color:var(--lichen); border-left:4px solid var(--bark); }
.tcard .tag { font-size:11.5px; letter-spacing:2px; font-weight:800; text-transform:uppercase; color:#5F7057; }
.tcard.hero-card .tag { color:#2F6640; }
.tcard h3 { font-family:'Bricolage Grotesque',serif; font-size:22px; font-weight:650; margin:12px 0 8px; }
.tcard p { font-size:15px; color:#48604F; }

/* cycle */
.cycle-wrap { display:flex; gap:52px; align-items:center; flex-wrap:wrap; margin-top:30px; }
.cycle-wrap .cl { flex:1; min-width:300px; text-align:center; overflow:visible; }
.cycle-wrap .cr { flex:1; min-width:300px; }
.cycle-diagram { width:100%; max-width:400px; height:auto; }
.stage { display:flex; gap:16px; padding:15px 0; border-bottom:1px solid #DCE3D2; align-items:baseline; }
.stage:last-child { border-bottom:none; }
.stage .n { font-family:'Bricolage Grotesque',serif; font-weight:700; color:#2F6640; font-size:18px; min-width:34px; }
.stage b { font-size:16.5px; }
.stage span { color:#48604F; font-size:14.5px; }

/* products */
.pgrid { display:flex; gap:22px; flex-wrap:wrap; margin-top:40px; }
.pcard { flex:1; min-width:240px; background:var(--card); border-radius:22px; overflow:hidden; border:1px solid #E2E8D6; display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s; }
.pcard:hover { transform:translateY(-5px); box-shadow:0 16px 34px rgba(31,61,43,.12); }
.pcard .ph { height:190px; position:relative; background:linear-gradient(160deg,#2E5238,#1F3D2B); display:flex; align-items:center; justify-content:center; }
.pcard .ph svg { position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.pcard .ph .tag { position:absolute; top:12px; left:12px; z-index:1; background:var(--lichen); color:var(--canopy); font-size:11px; font-weight:800; letter-spacing:1.5px; padding:3px 10px; border-radius:20px; text-transform:uppercase; }
.pcard .ph span { font-size:11px; letter-spacing:2px; color:#9FB894; font-weight:800; }
.pcard .body { padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.pcard h3 { font-family:'Bricolage Grotesque',serif; font-size:20px; font-weight:650; min-height:52px; }
.pcard p { font-size:14px; color:#48604F; margin-top:6px; }
.pcard .cta { margin-top:auto; padding-top:16px; font-weight:800; color:#2F6640; font-size:15px; }
.pcard .cta:hover { text-decoration:underline; }

/* gallery carousel */
.gal { position:relative; margin-top:36px; height:410px; overflow:hidden; }
.gcard { position:absolute; top:0; left:50%; width:min(560px,82vw); height:372px; margin-left:calc(min(560px,82vw)/-2);
         border-radius:16px; border:1px solid #E2E8D6; overflow:hidden; background:var(--card); cursor:pointer;
         transition:transform .55s ease, filter .55s ease, opacity .55s ease; }
.gcard .gph { height:300px; display:flex; align-items:center; justify-content:center; }
.gcard .gcap { padding:13px 18px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.gcard .gcap b { font-size:16px; font-family:'Bricolage Grotesque',serif; font-weight:650; }
.gcard .gcap .chip { flex:none; font-size:9.5px; letter-spacing:1.6px; font-weight:800; background:var(--lichen); color:var(--canopy); border-radius:20px; padding:3px 10px; text-transform:uppercase; }
.g-cur  { transform:translateX(0) scale(1); z-index:3; filter:none; opacity:1; }
.g-prev { transform:translateX(-86%) scale(.86); z-index:2; filter:blur(4px); opacity:.55; }
.g-next { transform:translateX(86%) scale(.86); z-index:2; filter:blur(4px); opacity:.55; }
.g-hide { transform:translateX(0) scale(.7); opacity:0; pointer-events:none; z-index:1; }
.gbtn { position:absolute; top:150px; z-index:4; width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
        background:var(--canopy); color:var(--mist); font-size:20px; line-height:1; box-shadow:0 6px 18px rgba(31,61,43,.25); }
.gbtn:hover { background:var(--leaf); }
.gbtn.gl { left:calc(50% - min(280px,41vw) - 70px); }
.gbtn.gr { right:calc(50% - min(280px,41vw) - 70px); }
@media (max-width:700px){ .gbtn.gl{left:8px} .gbtn.gr{right:8px} }

/* proof */
.prgrid { display:flex; gap:18px; flex-wrap:wrap; margin-top:36px; }
.prcard { flex:1; min-width:220px; background:var(--card); border:1px solid #E2E8D6; border-radius:18px; padding:20px 22px; }
.prcard .ring { width:38px; height:38px; border-radius:50%; border:2.5px solid var(--leaf); display:flex; align-items:center; justify-content:center; color:var(--leaf); font-weight:800; }
.prcard .ring.open { border-style:dashed; border-color:#5F7057; }
.prcard .status { font-size:11px; letter-spacing:1.2px; font-weight:800; color:#5F7057; }
.prcard .status a { color:#2F6640; }
.prcard h3 { font-family:'Bricolage Grotesque',serif; font-size:18px; font-weight:650; margin:12px 0 4px; }
.prcard p { font-size:13.5px; color:#48604F; }
.prcard a { color:#2F6640; text-decoration:underline; }

/* trade */
.trade { background:var(--canopy); color:var(--mist); }
.trade h2.sec, .trade .eyebrow { color:var(--mist); }
.trade .eyebrow { color:#AFCB9A; }
.trade .sub { color:#C2D2BC; }
.tcols { display:flex; gap:20px; flex-wrap:wrap; margin-top:36px; }
.tcol { flex:1; min-width:250px; background:#2A4A35; border-radius:22px; padding:26px; display:flex; flex-direction:column; align-items:flex-start; }
.tcol h3 { font-family:'Bricolage Grotesque',serif; font-size:20px; font-weight:650; color:#CFE3B8; }
.tcol p { font-size:14.5px; color:#C2D2BC; margin:8px 0 18px; }
.tcol .btn { margin-top:auto; background:var(--mist); color:var(--canopy); border-color:var(--mist); font-size:14px; padding:11px 24px; }
.tcol .btn:hover { background:#CFE3B8; border-color:#CFE3B8; }
.trade .moq { margin-top:26px; font-size:13px; letter-spacing:1.5px; color:#9FB894; text-transform:uppercase; }
.trade a:focus-visible, footer a:focus-visible { outline-color:#CFE3B8; }

/* footer */
.fcol { display:flex; flex-direction:column; gap:9px; min-width:150px; }
.fcol h4 { font-family:'Bricolage Grotesque',serif; font-size:15px; font-weight:650; color:#CFE3B8; margin-bottom:4px; }
.fcol a { font-size:14px; color:#C2D2BC; letter-spacing:0.3px; }
.fcol a:hover { color:var(--mist); text-decoration:underline; }
footer { background:var(--canopy); color:#9FB894; border-top:1px solid #2A4A35; padding:34px 0 40px; }
footer .row { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; letter-spacing:1px; }
footer .tag { font-family:'Bricolage Grotesque',serif; color:#CFE3B8; font-size:15px; }
.footer-top { display:flex; gap:48px; flex-wrap:wrap; justify-content:space-between; }
.footer-brand { max-width:360px; }
.footer-brand .brandrow { display:flex; align-items:center; gap:12px; }
.footer-brand p { margin-top:14px; font-size:14px; color:#C2D2BC; line-height:1.6; letter-spacing:0.3px; }
.footer-cols { display:flex; gap:56px; flex-wrap:wrap; }
.footer-bottom { margin-top:34px; padding-top:20px; border-top:1px solid #2A4A35; }

/* --- responsive --- */
body { overflow-x:hidden; }

/* tablet / mobile nav: collapse links into a hamburger dropdown */
@media (max-width:860px){
  .nav-toggle { display:flex; }
  nav .links {
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--mist); border-bottom:1px solid #DCE3D2;
    padding:8px 0; box-shadow:0 14px 26px rgba(31,61,43,.10);
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition:max-height .3s ease, opacity .2s ease;
  }
  nav.open .links { max-height:min(80vh,460px); opacity:1; pointer-events:auto; }
  nav .links a.link { padding:13px 28px; font-size:16px; }
  nav .links .btn { margin:10px 24px 6px; text-align:center; }
}

@media (max-width:640px){
  .container { padding:0 20px; }
  section { padding:64px 0; }
  .hero { padding:56px 0 48px; }
  h2.sec br { display:none; }
  /* two-column layouts: force a full-width stack (prevents any horizontal scroll) */
  .hero .grid { gap:32px; }
  .hero .hl, .hero .hr,
  .cycle-wrap .cl, .cycle-wrap .cr { flex-basis:100%; min-width:0; }
  .cycle-wrap { gap:32px; }
  .impact .i { min-width:120px; }
  .footer-top { gap:28px; }
  .footer-cols { gap:32px; }
  footer .row { flex-direction:column; gap:10px; }
}