*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --g:    #2c4e38;
  --gd:   #1e3628;
  --gold: #c49a2a;
  --gold2:#d4ab3a;
  --cream:#f0ebe0;
  --txt:  #222;
  --txt2: #555;
  --txt3: #888;
  --brown:   #3a2510;
  --brownd:  #2a1a0a;
--card1: #ece2d8;   /* cashew — faint warm sand */
--card2: #e7e3db;   /* coffee — faint cool linen */
--card3: #eadfd1;   /* cacao  — faint warm beige */
}

/* ── PAGE SHELL ─────────────────────────────── */
html, body {
  height: 100%;
  overflow: hidden;
}
body {
  font-family:'Montserrat',sans-serif;
  color:var(--txt);
  background:var(--cream);
  display: flex;
  flex-direction: column;
}

/* ── NAVBAR ─────────────────────────────────── */
.nav {
  flex: 0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(24px, 3.6vw, 64px);
  height: clamp(64px, 9vh, 100px);
  background:var(--cream);
  border-bottom:1px solid rgba(0,0,0,0.08);
  z-index: 200;
}

.nav-brand { display:flex; align-items:center; gap:0; text-decoration:none; }

.nav-logo {
  width: clamp(52px, 7vh, 88px);
  height: clamp(52px, 7vh, 88px);
  object-fit:contain; display:block;
  mix-blend-mode:multiply;
}
.nav-logo-fallback {
  width: clamp(52px, 7vh, 88px);
  height: clamp(52px, 7vh, 88px);
  display:none;
}

.nav-brand-text {
  padding-left: clamp(8px, 0.8vw, 16px);
  margin-left: 2px;
  line-height: 1.1;
}
.nbt-top {
  font-size: clamp(9px, 0.7vw, 12px); font-weight:700; letter-spacing:0.2em;
  text-transform:uppercase; color:#333; display:block;
}
.nbt-main {
  font-size: clamp(16px, 1.5vw, 24px); font-weight:900; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--g);
  display:block; line-height:1.05;
}
.nbt-sub {
  font-size: clamp(8px, 0.6vw, 10px); font-weight:600; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:5px; margin-top:3px;
}
.nbt-sub::before, .nbt-sub::after {
  content:''; flex:1; height:1px; background:var(--gold); opacity:0.55; display:block;
}

.nav-links {
  display:flex; align-items:center;
  gap: clamp(24px, 3vw, 52px);
  list-style:none;
}
.nav-links a {
   font-size: clamp(12px, 1vw, 15px); font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:#444; text-decoration:none;
  transition:color .2s; white-space:nowrap;
}
.nav-links a:hover { color:var(--g); }
.nav-links a.active { color:#111; position:relative; padding-bottom:3px; }
.nav-links a.active::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px; background:#111;
}
.nav-links .has-drop::after { content:' ▾'; font-size:9px; }

.nav-right { display:flex; align-items:center; gap:14px; flex-shrink:0; }

.nav-cta {
  display:inline-flex; align-items:center; gap:10px;
  padding: clamp(9px, 1.1vh, 14px) clamp(16px, 1.7vw, 26px);
  background:var(--g); color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size: clamp(9px, 0.72vw, 12px); font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  border:none; cursor:pointer; white-space:nowrap;
  transition:background .2s;
}
.nav-cta:hover { background:var(--gd); }
.nav-lang { font-size: clamp(10px, 0.8vw, 13px); font-weight:600; color:#555; cursor:pointer; white-space:nowrap; }

/* ── HAMBURGER ──────────────────────────────── */
.nav-hamburger {
  display:none; flex-direction:column;
  justify-content:center; gap:5px;
  width:36px; height:36px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.nav-hamburger span { display:block; height:2px; width:100%; background:#333; transition:all .25s; }
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── HERO ───────────────────────────────────── */
.hero {
  flex: 3 1 0;
  position:relative;
  display:flex; align-items:center;
  overflow:hidden;
  min-height: 0;
}
.hero-bg {
  position:absolute; inset:0;
  background:
    linear-gradient(105deg,
      rgba(18,34,22,0.97) 0%,
      rgba(18,34,22,0.97) 46%,
      rgba(18,34,22,0.97) 48%,
      transparent        50%),
    url('sources/carrossel_cashew_coffee_cacau.png') center/cover no-repeat;
}
.hero-bg::before {
  content:''; position:absolute;
  top:0; left:0; bottom:0; width:60%;
  clip-path:polygon(0 0, 88% 0, 100% 100%, 0 100%);
  background-image:url('sources/map.png');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:0.15; pointer-events:none;
}

.hero-wm {
  position:absolute; z-index:1;
  right:12%; top:50%; transform:translateY(-50%);
  width: clamp(160px, 18vw, 300px);
  height: clamp(160px, 18vw, 300px);
  opacity:0.16; pointer-events:none;
}

.hero-body {
  position:relative; z-index:2;
  padding: clamp(16px, 2vh, 36px) clamp(28px, 5.5vw, 96px) clamp(60px, 9vh, 110px);
  max-width: clamp(360px, 52vw, 780px);
  align-self: center;
  overflow: hidden;
  max-height: 100%;
}
.hero-eyebrow {
  font-size: clamp(9px, 0.7vw, 11px); font-weight:700; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--gold2);
  margin-bottom: clamp(8px, 1.2vh, 18px);
}
.hero h1 {
  font-size: clamp(28px, 3.8vw, 58px);
  font-weight:800; line-height:1.06; color:#fff;
}
.hero h1 .gld { color:var(--gold2); }
.hero-desc {
  font-size: clamp(12px, 0.95vw, 15px); line-height:1.7; color:rgba(255,255,255,0.7);
  margin: clamp(10px, 1.4vh, 22px) 0 clamp(14px, 1.8vh, 28px); max-width:400px;
}
.hero-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding: clamp(10px, 1.4vh, 15px) clamp(16px, 1.8vw, 28px);
  background:var(--g); color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size: clamp(9px, 0.72vw, 12px); font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  border:none; cursor:pointer; transition:background .2s;
}
.hero-btn:hover { background:var(--gd); }

.hero-strip {
  position:absolute; bottom:0; left:0; right:0; z-index:3;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:rgba(10,22,14,0.70);
}
.hfeat {
  display:flex; align-items:center;
  gap: clamp(10px, 1.2vw, 20px);
  padding: clamp(10px, 1.4vh, 18px) clamp(20px, 3vw, 52px);
  border-right:1px solid rgba(255,255,255,0.1);
}
.hfeat:last-child { border-right:none; }
.hfeat svg { width: clamp(22px, 2.2vw, 34px); height: clamp(22px, 2.2vw, 34px); flex-shrink:0; color:rgba(255,255,255,0.5); }
.hfeat-lbl { font-size: clamp(9px, 0.75vw, 12px); font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#fff; line-height:1.35; }

/* ── SECTION HEADING ────────────────────────── */
.sec-head {
  flex: 0 0 auto;
  display:flex; align-items:center; justify-content:center;
  gap:18px;
  padding: clamp(10px, 1.6vh, 30px) 0 clamp(8px, 1.2vh, 20px);
}
.sec-head::before, .sec-head::after { content:''; display:block; width:80px; height:1.5px; background:var(--gold); }
.sec-head span { font-size: clamp(14px, 1.4vw, 22px); font-weight:700; letter-spacing:0.3em; text-transform:uppercase; color:#1e3628; }
/* ── PRODUCT CARDS ──────────────────────────── */
.products {
  flex: 2 1 0;
  display:grid; grid-template-columns:repeat(3,1fr); align-content:stretch;
  gap: clamp(8px, 1vw, 18px);
  padding: 0 clamp(24px, 3vw, 52px) clamp(8px, 1.2vh, 20px);
  max-width:100%; width:100%;
  min-height: 0;
}

.pcard {
  background:var(--cream); display:flex; overflow:hidden;
  transition: transform .2s ease, box-shadow .25s ease;
  min-height:0;
  cursor: pointer;
}
.pcard:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 36px rgba(0,0,0,0.15);
}

.pcard--cashew { background: var(--card1); }
.pcard--coffee { background: var(--card2); }
.pcard--cacao  { background: var(--card3); }
.pcard-text {
  flex:1; min-width:0;
  padding: clamp(14px, 1.8vh, 28px) clamp(14px, 1.4vw, 26px);
  display:flex; flex-direction:column;
}
.pcard-name { font-size: clamp(13px, 1.15vw, 18px); font-weight:800; text-transform:uppercase; letter-spacing:0.04em; color:#1b2e22; margin-bottom: clamp(4px, 0.6vh, 10px); }
.pcard-desc { font-size: clamp(11px, 0.85vw, 14px); line-height:1.6; color:var(--txt2); flex:1; margin-bottom: clamp(8px, 1.1vh, 16px);  display: none;}
.pcard-link {
  margin-top: auto;
  display:inline-flex; align-items:center; gap:7px;
  font-size: clamp(9px, 0.72vw, 12px); font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--txt);
  text-decoration:none; background:none; border:none; cursor:pointer; transition:color .2s;
}
.pcard-link:hover { color:var(--g); }

.pcard-img { width: clamp(100px, 11vw, 170px); flex-shrink:0; overflow:hidden; }
.pcard-img img { width:100%; height:100%; object-fit:cover; display:block; }
.pcard--cashew .pcard-text {
  background: none;
}

/* ── ABOUT + STATS ──────────────────────────── */
.bottom {
  flex: 2 1 0;
  display:grid; grid-template-columns:1fr 1fr; align-content:stretch;
  gap: clamp(8px, 1vw, 18px);
  padding: 0 clamp(24px, 3vw, 52px) clamp(4px, 0.6vh, 10px);
  max-width:100%; width:100%;
  min-height: 0;
}

.about-left { display:flex; flex-direction:column; min-height:0; gap: clamp(4px, 0.7vh, 10px); overflow:hidden; }

.about-img {
  flex: 1;
  transition: transform .2s ease, box-shadow .25s ease;
}

.about-img:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 36px rgba(0,0,0,0.15);
}

.about-text {
  display: none;
}

.about-img {
  flex: 1;        /* take all available space instead of fixed height */
}
.about-ey { font-size: clamp(8px, 0.65vw, 11px); font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom: clamp(5px, 0.8vh, 12px); }
.about-h2 { font-size: clamp(16px, 1.7vw, 26px); font-weight:800; line-height:1.2; color:#1b2e22; margin-bottom: clamp(5px, 0.8vh, 12px); }
.about-p { font-size: clamp(11px, 0.85vw, 14px); line-height:1.7; color:var(--txt2); }

.about-img img { width:100%; height:100%; object-fit:cover; display:block; }

/* 2×2 stat grid */
.stats {
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  gap:2px; background:rgba(0,0,0,0.1); min-height:0; overflow:hidden;
}
.stat {
  background:var(--g);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: clamp(6px, 1.2vh, 20px) clamp(10px, 1.4vw, 22px);
  gap: clamp(2px, 0.4vh, 6px); text-align:center; overflow:hidden;
}
.stat svg { width: clamp(20px, 2.4vw, 40px); height: clamp(20px, 2.4vw, 40px); color:rgba(255,255,255,0.42); flex-shrink:0; }
.stat-num { font-size: clamp(20px, 2.5vw, 42px); font-weight:800; color:#fff; line-height:1; }
.stat-big { font-size: clamp(10px, 1.1vw, 17px); font-weight:700; color:#fff; line-height:1.2; }
.stat-lbl { font-size: clamp(8px, 0.62vw, 11px); font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.52); line-height:1.3; }

/* ── FOOTER ─────────────────────────────────── */
.footer {
  flex: 0 0 auto;
  background:var(--brown); color:rgba(255,255,255,0.9);
  display:flex; align-items:center; justify-content:space-between;
  padding: clamp(10px, 1.3vh, 18px) clamp(24px, 3.6vw, 60px);
  font-size: clamp(10px, 0.8vw, 13px);
}
.footer-left { display:flex; align-items:center; }
.fi {
  display:flex; align-items:center; gap:8px;
  padding: 0 clamp(10px, 1.5vw, 24px);
  border-right:1px solid rgba(255,255,255,0.1);
}
.fi:first-child { padding-left:0; }
.fi:last-child { border-right:none; }
.fi svg { width:14px; height:14px; flex-shrink:0; opacity:0.55; }
.footer-right { display:flex; align-items:center; gap:10px; }
.f-icon {
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(255,255,255,0.25); color:rgba(255,255,255,0.9);
  text-decoration:none; font-size:12px; font-weight:700;
  transition:border-color .2s, color .2s;
}
.f-icon:hover { border-color:#fff; color:#fff; }

.lang-switcher { position: relative; }

.lang-current {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
  font-size: clamp(10px, 0.8vw, 13px); font-weight: 600; color: #555;
  padding: 4px 6px;
  user-select: none;
}
.lang-arrow { font-size: 9px; transition: transform .2s; }
.lang-switcher.open .lang-arrow { transform: rotate(180deg); }

.lang-dropdown {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--cream);
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  min-width: 90px;
  z-index: 500;
}
.lang-switcher.open .lang-dropdown { display: block; }

.lang-option {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 12px; font-weight: 600; color: #444;
  transition: background .15s;
}
.lang-option:hover { background: rgba(0,0,0,0.05); }

/* ════════════════════════════════════════════════
   TABLET (≤ 1024px) — restore normal scroll
   ════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .nav { flex:none; padding:0 28px; height:72px; position:sticky; top:0; z-index:200; }

  .nav-links {
  display:none; position:absolute;
  top:72px; left:0; right:0;
  flex-direction:column; align-items:flex-start; gap:0;
  background:var(--cream);
  border-top:1px solid rgba(0,0,0,0.08);
  box-shadow:0 8px 24px rgba(0,0,0,0.1);
  z-index:300; padding:8px 0;
}
  .nav-links.open { display:flex; }
  .nav-links li { width:100%; }
  .nav-links a { display:block; padding:13px 28px; font-size:13px; border-bottom:1px solid rgba(0,0,0,0.05); }
  .nav-links a.active::after { display:none; }
  .nav-hamburger { display:flex; }

  .hero-bg {
    background:
      linear-gradient(105deg, rgba(18,34,22,0.97) 0%, rgba(18,34,22,0.97) 55%, transparent 70%),
      url('sources/carrossel_cashew_coffee_cacau.png') center/cover no-repeat;
  }

  .products { grid-template-columns:1fr 1fr; }
  .stats { grid-template-columns:repeat(4,1fr); grid-template-rows:1fr; }
  .about-img { flex:0 0 180px; }
}