* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:76px;overflow: auto; }
body { font-family:'Archivo',sans-serif; color:#16202e; background:#f5f2ec; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:#0e2138; text-decoration:none; }
a:hover { color:#c6a04e; }
img { max-width:100%; display:block; }
::selection { background:#c6a04e; color:#0a1826; }

.container { max-width:1240px; margin:0 auto; padding:0 clamp(20px,4vw,48px); }

/* placeholder images (swap with real photography) */
.placeholder-img {
  position:relative;
  width:100%; height:100%;
  background:
    linear-gradient(135deg, rgba(198,160,78,0.14) 0%, rgba(198,160,78,0) 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 14px),
    #142334;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.placeholder-img::before {
  content:"";
  width:46px; height:46px;
  border:1.5px solid rgba(198,160,78,0.55);
  border-radius:50%;
}
.placeholder-img::after {
  content: attr(data-label);
  position:absolute; left:14px; right:14px; bottom:12px;
  color:rgba(255,255,255,0.55);
  font-size:11px; letter-spacing:.3px; line-height:1.4; text-align:center;
}
.product-img.placeholder-img { background-color:#eee9df; }
.product-img.placeholder-img::before { border-color:rgba(176,141,62,0.4); }
.product-img.placeholder-img::after { color:#8a8271; }

/* hero placeholder sits behind the stats bar — keep its caption pinned to
   the icon (mid-height) instead of the bottom edge, so it never collides
   with the stats bar regardless of viewport width */
.hero-bg.placeholder-img { flex-direction:column; gap:14px; }
.hero-bg.placeholder-img::after { position:static; }

/* ===== HEADER ===== */
.site-header { position:sticky; top:0; z-index:100; background:#0a1826; border-bottom:1px solid rgba(255,255,255,0.08); }
.header-inner { max-width:1240px; margin:0 auto; padding:0 clamp(20px,4vw,48px); height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:42px; height:42px; border:1.5px solid #c6a04e; display:flex; align-items:center; justify-content:center; color:#c6a04e; font-family:'Newsreader',serif; font-size:19px; letter-spacing:1px; flex:none; }
.brand-mark-footer { width:40px; height:40px; font-size:18px; }
.brand-text { line-height:1.05; }
.brand-name { color:#fff; font-weight:700; font-size:17px; letter-spacing:3px; }
.brand-sub { color:#8b96a5; font-size:9.5px; letter-spacing:2.5px; text-transform:uppercase; margin-top:1px; }

.nav-desktop { display:flex; align-items:center; gap:30px; }
.nav-desktop a { color:#d7dde4; font-size:13.5px; font-weight:500; letter-spacing:.3px; }
.nav-desktop a:hover { color:#c6a04e; }

.menu-btn { display:none; background:none; border:none; cursor:pointer; padding:8px; flex-direction:column; gap:5px; }
.menu-btn span { display:block; width:24px; height:2px; background:#fff; }

.nav-mobile { display:none; background:#0a1826; border-top:1px solid rgba(255,255,255,0.08); padding:12px clamp(20px,4vw,48px) 22px; flex-direction:column; }
.nav-mobile.open { display:flex; }
.nav-mobile a { color:#d7dde4; font-size:16px; font-weight:500; padding:13px 0; border-bottom:1px solid rgba(255,255,255,0.06); }
.nav-mobile-cta { margin-top:18px !important; background:#c6a04e; color:#0a1826 !important; text-align:center; font-weight:600; padding:14px !important; border-radius:2px; border-bottom:none !important; }

@media (max-width: 900px) {
  .nav-desktop { display:none; }
  .menu-btn { display:flex; }
}

/* ===== HERO ===== */
.hero { position:relative; background:#0a1826; min-height:clamp(560px,88vh,860px); display:flex; align-items:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; overflow:hidden; }
.hero-bg-img { width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,24,38,0.94) 0%, rgba(10,24,38,0.82) 42%, rgba(10,24,38,0.45) 100%); pointer-events:none; }
.hero-inner { position:relative; max-width:1240px; margin:0 auto; padding:120px clamp(20px,4vw,48px) 110px; width:100%; }
.hero-content { max-width:760px; }
.eyebrow { color:#b08d3e; font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase; margin-bottom:18px; }
.eyebrow-light { display:inline-flex; align-items:center; gap:10px; color:#c6a04e; font-size:12px; font-weight:600; letter-spacing:3px; text-transform:uppercase; margin-bottom:26px; }
.eyebrow-gold { color:#c6a04e; }
.eyebrow-center { text-align:center; margin-bottom:44px; }
.eyebrow-line { width:28px; height:1px; background:#c6a04e; display:inline-block; }
.hero-title { font-family:'Newsreader',serif; color:#fff; font-weight:500; font-size:clamp(38px,6vw,68px); line-height:1.06; letter-spacing:-0.5px; }
.hero-desc { color:#c3cbd5; font-size:clamp(16px,2vw,19px); line-height:1.65; margin-top:26px; max-width:620px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; }

.btn { font-weight:600; font-size:15px; letter-spacing:.3px; padding:16px 30px; border-radius:2px; display:inline-block; }
.btn-gold { background:#c6a04e; color:#0a1826; }
.btn-gold:hover { background:#d8bd7e; color:#0a1826; }
.btn-outline { border:1px solid rgba(255,255,255,0.35); color:#fff; font-weight:500; }
.btn-outline:hover { border-color:#c6a04e; color:#c6a04e; }

.hero-stats-bar { position:absolute; bottom:0; left:0; right:0; background:rgba(255,255,255,0.04); border-top:1px solid rgba(255,255,255,0.08); }
.hero-stats { max-width:1240px; margin:0 auto; padding:22px clamp(20px,4vw,48px); display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:20px; }
.stat-v { color:#c6a04e; font-family:'Newsreader',serif; font-size:26px; }
.stat-l { color:#8b96a5; font-size:12px; letter-spacing:.5px; margin-top:2px; }

@media (max-width: 640px) {
  /* let height follow content instead of forcing a tall, fixed hero;
     switch off flex-row so the stats bar stacks below the content
     instead of sitting beside it as a second flex item */
  .hero { display:block; min-height:0; }
  .hero-inner { padding:96px clamp(20px,4vw,48px) 40px; }
  .eyebrow-light { flex-wrap:wrap; row-gap:6px; }
  /* stats bar flows normally below the content instead of being pinned
     absolute over it (that pinning is what caused the overlap) */
  .hero-stats-bar { position:static; margin-top:8px; }
  .hero-stats { grid-template-columns:repeat(3, 1fr); gap:10px; padding:20px clamp(20px,4vw,48px); }
  .stat-v { font-size:20px; }
  .stat-l { font-size:10.5px; }
}

/* ===== SECTIONS ===== */
.section { padding:clamp(70px,9vw,120px) 0; }
.section-cream { background:#f5f2ec; }
.section-white { background:#fff; }
.section-navy { background:#0a1826; color:#fff; }
.section-border-top { border-top:1px solid #ece6da; }
.section-head { max-width:640px; margin-bottom:clamp(40px,5vw,64px); }

.h2 { font-family:'Newsreader',serif; font-weight:500; font-size:clamp(30px,4vw,46px); line-height:1.12; color:#0e2138; letter-spacing:-0.5px; }
.h2-light { color:#fff; }
.h2-sm { font-size:clamp(28px,3.4vw,40px); line-height:1.14; margin-bottom:30px; }
.body-text { color:#4a5566; font-size:16.5px; line-height:1.75; margin-top:26px; }
.body-text-light { color:#aeb8c4; font-size:16px; line-height:1.75; margin-top:24px; }

.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(40px,5vw,80px); align-items:start; }
.grid-2-tight { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(40px,5vw,72px); }

/* ===== ABOUT ===== */
.col-stack { display:flex; flex-direction:column; gap:18px; }
.activity-card { background:#fff; border:1px solid #e6e0d4; border-left:3px solid #c6a04e; padding:26px 28px; }
.activity-title { font-family:'Newsreader',serif; font-size:21px; color:#0e2138; }
.activity-desc { color:#5a6472; font-size:14.5px; line-height:1.6; margin-top:8px; }
.mission-card { background:#0e2138; padding:28px; color:#fff; }
.mission-label { color:#c6a04e; font-size:12px; letter-spacing:2px; text-transform:uppercase; margin-bottom:14px; }
.mission-text { font-family:'Newsreader',serif; font-size:19px; line-height:1.5; color:#eef1f4; }

/* ===== PRODUCTS ===== */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px; }
.product-card { border:1px solid #e6e0d4; background:#fff; display:flex; flex-direction:column; transition:border-color .2s; }
.product-card:hover { border-color:#c6a04e; }
.product-img { aspect-ratio:16/10; background:#eee9df; overflow:hidden; }
.product-img img { width:100%; height:100%; object-fit:cover; }
.product-body { padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.product-title { font-family:'Newsreader',serif; font-size:23px; color:#0e2138; line-height:1.2; }
.product-desc { color:#5a6472; font-size:14.5px; line-height:1.65; margin-top:11px; flex:1; }
.tag-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.tag { background:#f5f2ec; border:1px solid #e6e0d4; color:#5a6472; font-size:12px; padding:5px 10px; border-radius:20px; }

/* ===== LOGISTICS ===== */
.routes-box { margin-top:32px; background:rgba(198,160,78,0.1); border:1px solid rgba(198,160,78,0.3); padding:24px 26px; }
.routes-label { color:#c6a04e; font-size:12px; letter-spacing:2px; text-transform:uppercase; margin-bottom:10px; }
.routes-text { color:#dbe1e8; font-size:15px; line-height:1.65; }
.transport-list { display:grid; grid-template-columns:1fr; gap:1px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.08); }
.transport-row { background:#0a1826; padding:20px 24px; display:flex; gap:16px; align-items:baseline; }
.transport-n { color:#c6a04e; font-family:'Newsreader',serif; font-size:17px; min-width:26px; }
.transport-t { color:#fff; font-size:15.5px; font-weight:600; }
.transport-d { color:#9aa5b2; font-size:13.5px; line-height:1.5; margin-top:3px; }

/* ===== SOURCING ===== */
.sourcing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:26px; }
.sourcing-card { background:#fff; border:1px solid #e6e0d4; padding:34px 30px; }
.sourcing-mark { width:44px; height:44px; border:1.5px solid #c6a04e; display:flex; align-items:center; justify-content:center; color:#c6a04e; font-family:'Newsreader',serif; font-size:20px; margin-bottom:22px; }
.sourcing-title { font-family:'Newsreader',serif; font-size:22px; color:#0e2138; }
.sourcing-desc { color:#5a6472; font-size:14.5px; line-height:1.7; margin-top:12px; }

/* ===== MARKETS ===== */
.region-list { display:flex; flex-direction:column; }
.region-row { display:flex; justify-content:space-between; gap:20px; padding:17px 0; border-bottom:1px solid #ece6da; }
.region-name { color:#0e2138; font-weight:600; font-size:15px; flex:1; min-width:0; }
.region-countries { color:#7a8494; font-size:14px; text-align:right; flex:1; min-width:0; overflow-wrap:break-word; }

@media (max-width: 640px) {
  /* stack label/value instead of squeezing them side by side — right-aligned
     text that wraps under a narrow column reads as broken, left-aligned
     stacked text stays readable at any width down to 320px */
  .region-row { flex-direction:column; gap:4px; }
  .region-countries { text-align:left; line-height:1.5; }
}
.buyers-card { background:#0e2138; padding:clamp(30px,4vw,46px); color:#fff; align-self:start; }
.buyers-title { font-family:'Newsreader',serif; font-weight:500; font-size:clamp(24px,3vw,32px); margin-bottom:8px; }
.buyers-desc { color:#aeb8c4; font-size:14.5px; line-height:1.6; margin-bottom:26px; }
.buyers-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px; }
.buyer-chip { border:1px solid rgba(255,255,255,0.14); padding:16px 16px; font-size:14.5px; color:#eef1f4; }

/* ===== WHY US ===== */
.feature-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:#e6e0d4; border:1px solid #e6e0d4; }
@media (max-width: 900px) { .feature-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns:1fr; } }
.feature-card { background:#f5f2ec; padding:32px 30px; }
.feature-n { color:#c6a04e; font-family:'Newsreader',serif; font-size:15px; letter-spacing:1px; margin-bottom:16px; }
.feature-t { font-size:18px; font-weight:700; color:#0e2138; }
.feature-d { color:#5a6472; font-size:14.5px; line-height:1.7; margin-top:10px; }

/* ===== TESTIMONIALS CAROUSEL ===== */
.testimonials .container { position:relative; }
.carousel { display:flex; align-items:stretch; gap:clamp(12px,2vw,22px); }
.carousel-btn { flex:none; align-self:center; width:48px; height:48px; border:1px solid rgba(255,255,255,0.25); background:rgba(255,255,255,0.03); color:#c6a04e; cursor:pointer; border-radius:50%; font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; transition:border-color .2s, background .2s; }
.carousel-btn:hover { border-color:#c6a04e; background:rgba(198,160,78,0.12); }
.carousel-btn:disabled { opacity:.35; cursor:default; }

/* native scroll-snap carousel: each testimonial is its own full-width
   "slide", the browser handles snapping precisely on every viewport size
   and zoom level — no JS pixel math, so nothing can land mid-card. */
.carousel-viewport {
  flex:1; min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.carousel-viewport::-webkit-scrollbar { display:none; }
.carousel-track { display:flex; }
.testimonial-card {
  flex:0 0 100%;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  border:1px solid rgba(255,255,255,0.12);
  padding:32px 30px;
  display:flex;
  flex-direction:column;
  /* fixed height so the block never resizes when sliding */
  height:280px;
}
.quote-mark { color:#c6a04e; font-family:'Newsreader',serif; font-size:44px; line-height:.6; height:24px; flex:none; }
.quote-text {
  font-family:'Newsreader',serif; font-size:18px; line-height:1.55; color:#eef1f4; margin-top:14px;
  flex:1; min-width:0; overflow:hidden; overflow-wrap:break-word;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
}
.quote-name { color:#9aa5b2; font-size:13.5px; margin-top:20px; letter-spacing:.3px; flex:none; overflow-wrap:break-word; }

.carousel-dots { display:flex; justify-content:center; gap:9px; margin-top:34px; }
.carousel-dots button { width:9px; height:9px; padding:0; border:none; border-radius:50%; cursor:pointer; background:rgba(255,255,255,0.25); }
.carousel-dots button.active { background:#c6a04e; }

@media (max-width: 900px) {
  /* smaller type + a taller card: at the old 18px font and 260px height,
     a 5-line quote plus a 2-line name needed more room than was available,
     so the line-clamp was cutting text off mid-sentence instead of fitting */
  .testimonial-card { height:320px; padding:26px 22px; }
  .quote-mark { font-size:34px; height:20px; }
  .quote-text { font-size:15.5px; line-height:1.5; margin-top:12px; -webkit-line-clamp:6; }
  .quote-name { font-size:12.5px; margin-top:14px; }
}

/* ===== CONTACT ===== */
.contact-rows { margin-top:34px; display:flex; flex-direction:column; }
.contact-row { display:flex; gap:18px; padding:16px 0; border-bottom:1px solid #ece6da; align-items:baseline; }
.contact-k { color:#b08d3e; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; width:150px; flex:none; white-space:nowrap; }
.contact-v { color:#0e2138; font-size:15.5px; line-height:1.5; flex:1; min-width:0; overflow-wrap:anywhere; }

@media (max-width: 640px) {
  /* same fix as the region rows: stack label above value and drop the
     fixed-width label column instead of squeezing both into one line */
  .contact-row { flex-direction:column; align-items:flex-start; gap:6px; }
  .contact-k { width:auto; white-space:nowrap; }
  .quote-text { font-size:12.5px; line-height:1.2; margin-top:10px; }
}
.map-wrap { margin-top:0; aspect-ratio:16/9; border:1px solid #e6e0d4; overflow:hidden; }

@media (max-width: 340px) {
.map-wrap {max-width: max-content;}
.contact-v { font-size:12.5px;}
.buyers-card {width: auto;}
}
@media (min-width: 900px) {
  .map-wrap { align-self:stretch; height:100%; aspect-ratio:auto; }
}

/* ===== FOOTER ===== */
.footer { background:#0a1826; color:#fff; padding:clamp(56px,7vw,84px) 0 34px; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.1); }
.footer-brand { max-width:340px; }
.footer-brand-row { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.footer-desc { color:#9aa5b2; font-size:14px; line-height:1.7; }
.footer-label { color:#c6a04e; font-size:12px; letter-spacing:2px; text-transform:uppercase; margin-bottom:18px; }
.footer-links { display:flex; flex-direction:column; gap:11px; }
.footer-links a { color:#c3cbd5; font-size:14px; }
.footer-links a:hover { color:#c6a04e; }
.footer-contact { display:flex; flex-direction:column; gap:11px; color:#c3cbd5; font-size:14px; line-height:1.55; }
.footer-contact a { color:#c3cbd5; }
.footer-contact a:hover { color:#c6a04e; }
.footer-bottom { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; padding-top:26px; color:#7a8494; font-size:12.5px; }