/* ═══════════════════════════════════════════════════════════
   DGL — main.css  |  Dacosa Global Logistics
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Variables ──────────────────────────────────────── */
:root {
  --burgundy:     #7A1228;
  --burgundy-deep:#4E0B1A;
  --charcoal:     #232023;
  --ink:          #120D0E;
  --gold:         #B68A4E;
  --gold-light:   #D4A96A;
  --paper:        #F7F4F0;
  --mist:         #E7E1DA;
  --white:        #FFFFFF;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: var(--charcoal); background: #fff; overflow-x: hidden; }
img  { max-width: 100%; display: block; }
a    { color: inherit; }

/* ── Typography ─────────────────────────────────────────── */
.display {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.h1 { font-family:'Fraunces',serif; font-size:clamp(1.875rem,4vw,3rem); font-weight:300; line-height:1.15; }
.h2 { font-family:'Fraunces',serif; font-size:clamp(1.5rem,3vw,2.25rem); font-weight:300; line-height:1.2; }
.h3 { font-family:'Fraunces',serif; font-size:1.25rem; font-weight:400; color:var(--charcoal); line-height:1.35; }
.eyebrow { font-size:.75rem; text-transform:uppercase; letter-spacing:.2em; color:var(--gold); font-weight:600; }
.data-fig { font-family:'IBM Plex Mono', monospace; }

/* ── Layout ─────────────────────────────────────────────── */
.container { width:100%; max-width:1280px; margin:0 auto; padding:0 1.5rem; }
.section    { padding:6rem 0; }
.section-lg { padding:9rem 0; }
.section-paper { background:var(--paper); }
.section-dark  { background:var(--charcoal); }

/* ── Grids ───────────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr; gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:1fr; gap:1.5rem; }
.grid-4 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(min-width:640px)  { .grid-2{grid-template-columns:repeat(2,1fr);} }
@media(min-width:768px)  { .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} }
@media(min-width:640px)  { .form-2col{grid-template-columns:1fr 1fr;} }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.875rem 2rem; background:var(--burgundy); color:#fff;
  border:none; border-radius:3px; font-size:.9rem; font-weight:600;
  font-family:inherit; text-decoration:none; cursor:pointer;
  transition:background .2s, transform .15s; min-height:44px;
  letter-spacing:.02em;
}
.btn-primary:hover { background:var(--burgundy-deep); transform:translateY(-1px); }
.btn-outline {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.875rem 2rem; background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.45); border-radius:3px;
  font-size:.9rem; font-weight:500; font-family:inherit;
  text-decoration:none; cursor:pointer; transition:all .2s; min-height:44px;
}
.btn-outline:hover { background:rgba(255,255,255,.1); border-color:#fff; }
.btn-gold {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.875rem 2rem; background:var(--gold); color:var(--ink);
  border:none; border-radius:3px; font-size:.9rem; font-weight:600;
  font-family:inherit; text-decoration:none; cursor:pointer;
  transition:all .2s; min-height:44px;
}
.btn-gold:hover { background:var(--gold-light); }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background:#fff; border:1px solid var(--mist); border-radius:16px;
  overflow:hidden; transition:box-shadow .3s, transform .3s;
}
.card:hover { box-shadow:0 16px 56px rgba(35,32,35,.1); transform:translateY(-3px); }
.card:hover img { transform:scale(1.05); }
.card img { transition:transform .6s ease; }
.card-dark {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; overflow:hidden; transition:border-color .2s;
}
.card-dark:hover { border-color:rgba(182,138,78,.3); }
.card-dark:hover img { transform:scale(1.05); }
.card-dark img { transition:transform .6s ease; }
.card-accent { width:32px; height:2px; background:var(--burgundy); border-radius:1px; margin-bottom:1rem; }
.division-pill {
  display:inline-block; padding:.25rem .875rem; border-radius:99px;
  font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  background:rgba(182,138,78,.12); color:var(--gold); border:1px solid rgba(182,138,78,.25);
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position:relative; display:flex; align-items:flex-end;
  min-height:90svh; overflow:hidden;
}
.hero .container { position:relative; z-index:2; padding-bottom:8rem; width:100%; }

/* ═══════════════════════════════════════════════════════════
   STATS SECTION — Luxury redesign
   ═══════════════════════════════════════════════════════════ */
.stats-section {
  background: var(--ink);
  padding: 0;
  position: relative;
  overflow: hidden;
}
.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(122,18,40,.18) 0%, transparent 70%);
  pointer-events: none;
}
.stats-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
  z-index: 1;
}
@media(min-width:768px) { .stats-inner { grid-template-columns: repeat(4, 1fr); } }
.stat-item {
  padding: 3.5rem 2rem;
  text-align: center;
  position: relative;
}
.stat-item + .stat-item::before {
  content: '';
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(182,138,78,.3), transparent);
}
@media(max-width:767px) {
  .stat-item:nth-child(even)::before {
    content: '';
    position: absolute; left:0; top:25%; bottom:25%;
    width:1px; background:linear-gradient(to bottom,transparent,rgba(182,138,78,.3),transparent);
  }
  .stat-item:nth-child(3)::before,
  .stat-item:nth-child(4)::before {
    top: 0; bottom: auto; height: 1px; width: 25%; left: 37.5%;
    background: linear-gradient(to right,transparent,rgba(182,138,78,.3),transparent);
  }
}
.stat-number {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1;
  margin-bottom: .625rem;
  letter-spacing: -.02em;
}
.stat-number em {
  font-style: normal;
  color: var(--gold);
}
.stat-divider {
  width: 24px; height: 1px;
  background: var(--gold);
  margin: .875rem auto;
  opacity: .5;
}
.stat-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(255,255,255,.4);
  font-weight: 500;
  line-height: 1.5;
}

/* ── Header ─────────────────────────────────────────────── */
#site-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .3s, backdrop-filter .3s;
}
#site-header.scrolled {
  background:rgba(18,13,14,.94);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.nav-link {
  font-size:.875rem; font-weight:500; color:rgba(255,255,255,.8);
  text-decoration:none; transition:color .2s;
}
.nav-link:hover { color:#fff; }

/* ── Service/inner page hero top padding (fixes header overlap) ── */
.page-hero {
  padding-top: calc(80px + 5rem);
  padding-bottom: 5rem;
  position: relative;
  overflow: hidden;
}
.page-hero-lg {
  padding-top: calc(80px + 7rem);
  padding-bottom: 6rem;
  position: relative;
  overflow: hidden;
}

/* ── Nav dropdown ────────────────────────────────────────── */
.nav-dropdown {
  display:none; position:absolute; top:calc(100% + 8px); left:50%;
  transform:translateX(-50%); min-width:300px;
  background:rgba(18,13,14,.98); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:.75rem; box-shadow:0 24px 64px rgba(0,0,0,.5);
}
.nav-dropdown-parent:hover .nav-dropdown,
.nav-dropdown-parent:focus-within .nav-dropdown { display:block; }
.nav-dropdown a { display:block; padding:.75rem 1rem; border-radius:8px; text-decoration:none; transition:background .15s; }
.nav-dropdown a:hover { background:rgba(255,255,255,.06); }
.dd-title { display:block; font-size:.875rem; font-weight:500; color:rgba(255,255,255,.9); }
.dd-sub   { display:block; font-size:.75rem; color:rgba(255,255,255,.4); margin-top:.2rem; }
.glass { background:rgba(18,13,14,.96); backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.07); }

/* ── Forms ───────────────────────────────────────────────── */
.form-input {
  width:100%; padding:.875rem 1rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  border-radius:4px; color:#fff; font-size:max(16px,1rem); font-family:inherit;
  transition:border-color .2s;
}
.form-input:focus { outline:none; border-color:var(--gold); }
.form-input-light {
  width:100%; padding:.875rem 1rem;
  background:#fff; border:1px solid var(--mist);
  border-radius:6px; color:var(--charcoal); font-size:max(16px,1rem); font-family:inherit;
  transition:border-color .2s;
}
.form-input-light:focus { outline:none; border-color:var(--burgundy); }
.form-label       { display:block; font-size:.8rem; font-weight:600; color:rgba(255,255,255,.55); margin-bottom:.375rem; }
.form-label-light { display:block; font-size:.8rem; font-weight:600; color:rgba(35,32,35,.6); margin-bottom:.375rem; }
.form-2col { display:grid; grid-template-columns:1fr; gap:1.125rem; }

/* ── Reveal animations ───────────────────────────────────── */
[data-reveal], [data-reveal-group] > * {
  opacity:0; transform:translateY(28px);
  transition:opacity .75s ease, transform .75s ease;
}
[data-reveal].revealed, [data-reveal-group] > *.revealed { opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce) {
  [data-reveal],[data-reveal-group]>*{opacity:1!important;transform:none!important;transition:none!important;}
}

/* ── Swiper customisations ───────────────────────────────── */
.swiper-fleet { padding-bottom:.5rem; }
.swiper-fleet .swiper-slide { width:340px; height:auto; }
@media(min-width:1024px){.swiper-fleet .swiper-slide{width:380px;}}
.swiper-testimonials-pagination .swiper-pagination-bullet { background:rgba(182,138,78,.3);opacity:1; }
.swiper-testimonials-pagination .swiper-pagination-bullet-active { background:var(--gold); }

/* ── WhatsApp float ──────────────────────────────────────── */
.wa-float {
  position:fixed; bottom:5.5rem; right:1.5rem; z-index:999;
  width:54px; height:54px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.35); text-decoration:none;
  transition:transform .2s, box-shadow .2s;
}
.wa-float:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(37,211,102,.5); }

/* ── iOS zoom prevention ─────────────────────────────────── */
input,select,textarea { font-size:max(16px,1rem)!important; }
.btn-primary,.btn-outline,.btn-gold,.nav-link { min-height:44px; }

/* ── Mobile responsive ───────────────────────────────────── */
@media(max-width:639px) {
  .container { padding:0 1rem; }
  .section    { padding:3.5rem 0; }
  .section-lg { padding:5rem 0; }
  .display    { font-size:clamp(2rem,8vw,3rem)!important; }
  .hero .btn-primary,.hero .btn-outline { width:100%; justify-content:center; }
}

/* ── Footer ──────────────────────────────────────────────── */
.footer-link { font-size:.875rem;color:rgba(255,255,255,.5);text-decoration:none;transition:color .2s; }
.footer-link:hover { color:var(--white); }
.footer-contact-link { display:flex;align-items:center;gap:.625rem;font-size:.875rem;color:rgba(255,255,255,.5);text-decoration:none;transition:color .2s; }
.footer-contact-link:hover { color:var(--white); }
.social-icon { display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.12);border-radius:50%;font-size:.7rem;color:rgba(255,255,255,.5);text-decoration:none;transition:all .2s; }
.social-icon:hover { border-color:var(--gold);color:var(--gold); }
.footer-input { flex:1 1 160px;padding:.75rem 1rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:4px;color:var(--white);font-size:max(16px,1rem);font-family:inherit;min-width:0; }
.footer-input:focus { outline:none;border-color:var(--gold); }

/* ── Overflow tables ─────────────────────────────────────── */
.table-wrap { overflow-x:auto; }