/* ===== THEME VARIABLES ===== */
:root{
  --color-bg:#ffffff;
  --color-surface:#f3f6fb;
  --color-text:#0c1326;
  --color-muted:#475569;
  --color-primary:#6366f1;
  --color-primary-contrast:#ffffff;
  --color-dark:#0b0f1e;

  --font-heading: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --fs-base:16px;
  --fs-h1: clamp(2.0rem, 1.2rem + 2.8vw, 2.8rem);
  --fs-h2: clamp(1.6rem, 1.1rem + 1.4vw, 2.0rem);
  --fs-h3: clamp(1.1rem, 0.95rem + .7vw, 1.25rem);

  --container-max:1140px;
  --radius:14px;
  --shadow:0 10px 25px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-text);font:400 var(--fs-base)/1.65 var(--font-body)}

.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:clamp(16px,4vw,28px)}

h1,h2,h3{font-family:var(--font-heading);line-height:1.2;margin:0 0 12px}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{margin:0 0 10px;color:var(--color-muted)}

/* ===== NAV / HEADER ===== */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #e5e7eb}
.nav{position:relative;display:flex;align-items:center;gap:16px;min-height:64px}
.brand{font-weight:700;text-decoration:none;color:var(--color-text)}

/* Desktop menu */
.menu{display:flex;list-style:none;gap:6px;padding:0;margin:0 0 0 auto;position:relative}
.nav-link{position:relative;display:block;padding:10px 14px;border-radius:10px;text-decoration:none;color:var(--color-text);z-index:2}
.nav-link.active{color:var(--color-primary-contrast)}
.active-pill{
  position:absolute; top:0; left:0;
  height:100%;
  border-radius:8px;
  background:var(--color-primary);
  transform:translate3d(0,0,0);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), width .2s;
  z-index:1; pointer-events:none;
}

/* Hamburger (hidden on desktop; shown in mobile media query) */
.nav-toggle{margin-left:auto;display:none;background:transparent;border:1px solid #e5e7eb;border-radius:10px;padding:6px 10px;cursor:pointer}

/* ===== SECTIONS ===== */
.section{padding-block:84px}
.section.alt{background:var(--color-surface)}
.hero{display:grid;place-items:center;text-align:center;background:linear-gradient(180deg,#f7f9ff 0%,#fff 60%);padding-block:110px 90px}
.subheadline{max-width:60ch;margin-inline:auto}
.btn{display:inline-block;margin-top:16px;padding:12px 18px;background:var(--color-primary);color:#fff;text-decoration:none;border-radius:999px;box-shadow:var(--shadow)}
.btn-outline{background:transparent;color:var(--color-primary-contrast);border:1px solid #a3b4ff}
.btn.small{padding:10px 14px}

/* About */
.about-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat{background:#131c38;border:1px solid #e5e7eb;border-radius:var(--radius);padding:16px;text-align:center;box-shadow:var(--shadow)}
.stat .num{display:block;font-weight:800;font-size:1.25rem; color:var(--color-surface)}
.stat .lab{display:block;font-size:.9rem;color:var(--color-surface)}

/* Services */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.mini-icon{width:28px;height:28px;border-radius:8px;background:#e8edff;color:#1f4fd1;display:grid;place-items:center;margin-bottom:8px;font-weight:700}

/* Reach */
.reach-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center}
.reach-list{columns:2;padding-left:18px;margin:8px 0 0}
.reach-figure img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)}

/* Products */
.chip-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.chip{background:#131c38;border:1px solid #e5e7eb;border-radius:999px;padding:8px 14px; color: var(--color-surface);}

/* Values */
.values-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.value{background:#fff;border:1px solid #e5e7eb;border-radius:var(--radius);padding:16px;text-align:center;box-shadow:var(--shadow)}
.bubble{width:42px;height:42px;border-radius:999px;background:#e8edff;display:grid;place-items:center;margin:0 auto 8px}

/* Dark CTA (Trade Partner) */
.dark-cta{
  background:#0d142e;
  color:#dce3ff;
  padding-block:96px;
  position:relative;
  overflow:hidden;
}
.dark-cta-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; }
.dark-art{ position:relative; min-height:360px; }
.dark-art .angle{
  position:absolute; inset:0;
  background:linear-gradient(135deg,#223a8c 0%,#0d142e 50%,#0d142e 100%);
  clip-path:polygon(0 0,70% 0,45% 100%,0% 100%);
}
.dark-art .phone{
  position:absolute; right: clamp(8px,6vw,6%); bottom: 0;
  width: min(360px, 42vw); max-width: 100%;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));
}
@media (max-width:1100px){ .dark-cta-inner{ grid-template-columns:1fr; } }
@media (max-width:520px){
  .dark-art{ min-height:260px; }
  .dark-art .phone{ width:min(260px,80vw); right:0; }
}

/* Market strip */
.market{background:#0e0e11;color:#e9e9f3;padding-block:72px}
.market-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.market-card{background:#11121a;border:1px solid #1f2330;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.market-card .eyebrow{letter-spacing:.12em;text-transform:uppercase;color:#9aa5ff;font-weight:700;font-size:.78rem}
.market-card h3{color:#fff;margin:6px 0 8px}
.market-card p{color:#c7c9d3}
.market-img{width:100%;max-width:460px;justify-self:end}

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.contact-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 32px rgba(2,6,23,.08);
  align-content: center;
}
.contact-card .row{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  padding-block: 14px;
  border-bottom: 1px solid #f1f5f9;
}
.contact-card .row:first-child{ padding-top: 2px; }
.contact-card .row:last-child{ border-bottom:none; padding-bottom: 2px; }
.ci{
  width: 52px; height: 52px;
  border-radius: 14px; background: #e8edff;
  display: grid; place-items: center; flex: 0 0 auto;
  box-shadow: 0 4px 16px rgba(31,79,209,.12);
}
.ci img{ width: 26px; height: 26px; object-fit: contain; }
.contact-card h3{ margin: 0 0 6px 0; font-size: clamp(1.05rem, .95rem + .4vw, 1.2rem); }
.contact-card p{ margin:0; color: var(--color-muted); }

/* Map */
.map-wrap a{ display:block; border-radius: 16px; overflow: hidden; }
.map-wrap img{
  width:100%; height:auto; display:block;
  border:1px solid #e5e7eb; border-radius:16px;
  box-shadow: 0 12px 32px rgba(2,6,23,.08);
  transition: transform .25s ease;
  aspect-ratio: 16 / 11; object-fit: cover;
}
.map-wrap a:hover img{ transform: scale(1.01); }

/* Footer */
.pro-footer{
  background:#0b1a3a;
  color:#cbd5e1;
  padding-block:28px 18px;
  margin-top:48px;
}
.footer-wrap{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:24px; padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.foot-brand{
  font-weight:800; letter-spacing:.2px;
  font-size:clamp(1.1rem, 1rem + .5vw, 1.3rem); color:#fff;
}
.foot-sub{ color:#a9b8e8; margin-top:4px; font-size:.95rem; }
.foot-nav{
  list-style:none; margin:0; padding:0;
  display:flex; gap:clamp(10px, 2.6vw, 22px); flex-wrap:wrap; justify-content:flex-end;
}
.foot-nav a{ color:#cdd8ff; text-decoration:none; padding:6px 0; }
.foot-nav a:hover{ text-decoration:underline; }
.foot-copy{
  text-align:center; color:#cdd8ff; /* requested color */
  font-size:.92rem; padding-top:12px;
}

/* Responsive core layouts */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .values-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-wrap,.reach-grid,.dark-cta-inner,.market-inner{grid-template-columns:1fr}
  .reach-list{columns:1}
  .market-img{justify-self:center}
}
@media (max-width:960px){
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .footer-wrap{
    grid-template-columns:1fr;
    text-align:center; justify-items:center;
  }
  .foot-nav{ justify-content:center; }
}

/* Adjust CSS icons for Values */
.bubble{
  width:52px; height:52px; border-radius:999px; background:#e8edff;
  display:grid; place-items:center; margin:0 auto 12px;
}
.bubble img{ width:26px; height:26px; object-fit:contain; }

/* ===== Dark Hero (reference layout) ===== */
.hero.hero-dark{
  min-height:100vh;
  padding-block:110px 90px;
  position:relative;
  color:#fff;
  background: radial-gradient(ellipse at top left, #1e2a4a 0%, #0d142e 50%, #0d142e 100%);
  overflow:hidden; /* prevent wedge overflow causing horizontal scroll */
}
/* wide diagonal wedge */
.hero.hero-dark::after{
  content:"";
  position:absolute; inset:0;
  width:60vw; right:-6vw; left:auto;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02) 35%, rgba(255,255,255,0) 100%);
  transform: skewX(-22deg);
  transform-origin: right center;
  pointer-events:none;
}
/* grid & columns */
.hero-wrap{
  display:grid; grid-template-columns:1.1fr .9fr;
  align-items:start; gap:0; max-width:1400px;
}
/* left copy */
.hero-copy{ max-width:680px; padding-right:40px; text-align:left; }
.hero.hero-dark h1{
  font-family:var(--font-heading); font-weight:800; letter-spacing:-0.025em;
  line-height:0.95; margin:0 0 28px; color:#fff;
  font-size: clamp(2.4rem, 3.4vw + 1rem, 4.6rem);
}
.hero.hero-dark .subheadline{
  color:#9aa4c7; font-size:17px; line-height:1.65;
  margin:0 0 32px; max-width:560px;
}
.hero-cta{
  border-radius:8px; padding:12px 22px;
  background:#6366f1; box-shadow:0 6px 18px rgba(99,102,241,.28);
}
/* right art */
.hero-art{
  position:relative; display:flex; justify-content:flex-end; align-items:center;
  padding-left:40px; z-index:1; margin-top:clamp(18px,3vw,48px); /* slightly lower than title */
}
.hero-image{
  width:min(540px, 44vw); aspect-ratio:4/3; object-fit:cover;
  border-radius:18px; border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 24px 48px rgba(0,0,0,.35);
}
/* remove old thin-line decorations if present */
.hero-art::before,.hero-art::after{ content:none !important; }
.hero-art .extra-line{ display:none !important; }
/* Responsive hero */
@media (max-width:1200px){
  .hero.hero-dark h1{ font-size: clamp(2rem, 2.6vw + 1rem, 3.6rem); }
}
@media (max-width:980px){
  .hero-wrap{ grid-template-columns:1fr; gap:56px; }
  .hero-copy{ padding-right:0; max-width:100%; }
  .hero-art{ justify-content:center; padding-left:0; margin-top:0; }
  .hero-image{ width:min(520px, 86vw); }
  .hero.hero-dark::after{ right:-12vw; width:90vw; }
}
@media (max-width:640px){
  .hero.hero-dark{ padding-block:88px 72px; }
  .hero.hero-dark h1{ font-size:40px; line-height:1.0; }
  .hero.hero-dark .subheadline{ font-size:16px; }
  .hero-image{ width:min(420px,92vw); border-radius:16px; }
}
/* partner subheading color tweak */
.partnerSubheading{ color:#dce3ff !important; }

/* ====== SERVICES single-column on phones ====== */
@media (max-width:760px){
  .services .cards{ grid-template-columns:1fr; gap:12px; }
  .services .card{ padding:16px; }
}

/* ====== REACH full-bleed image on phones ====== */
@media (max-width:760px){
  .reach .reach-grid{ grid-template-columns:1fr; gap:18px; }
  .reach .reach-figure{ margin:0; }
  .reach .reach-figure img{
    display:block; width:100vw; max-width:100vw;
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    border-radius:0; box-shadow:none;
  }
}

/* ====== VALUES single-column on phones ====== */
@media (max-width:760px){
  .values .values-grid{ grid-template-columns:1fr; gap:12px; }
  .values .value{ padding:16px; }
}

/* ====== Hide right images on phones ====== */
@media (max-width:760px){
  /* Trade Partner */
  .dark-cta .dark-art{ display:none !important; }
  .dark-cta-inner{ grid-template-columns:1fr; }

  /* National Market Coverage */
  .market-inner{ grid-template-columns:1fr; }
  .market .market-img{ display:none !important; }
}

/* ===================================================================== */
/* ===== Mobile Drawer — single source of truth (replaces old dropdown) = */
/* ===================================================================== */

/* drawer theme */
:root{
  --drawer-bg:#0d142e;
  --drawer-fg:#f3f6fb;
}

/* overlay */
.drawer-overlay{
  position:fixed; inset:0;
  background:rgba(13,20,46,.48);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
  z-index:4000;
}
.drawer-overlay.show{ opacity:1; visibility:visible; pointer-events:auto; }

/* hide drawer-only header on desktop */
.menu-header, .menu-close{ display:none; }

/* mobile drawer rules */
@media (max-width:760px){
  .nav-toggle{ display:block; }          /* show hamburger on mobile */
  .active-pill{ display:none; }          /* hide active pill on mobile */
  .site-header{ z-index:5000; }
  .nav-toggle{ position:relative; z-index:5001; }

  /* drawer panel */
  .menu{
    position:fixed; top:0; right:0;
    height:100vh; width:min(280px,85vw);
    background:var(--drawer-bg); color:var(--drawer-fg);
    border-left:0; box-shadow:-24px 0 60px rgba(0,0,0,.28);
    padding:16px 18px;
    display:flex; flex-direction:column; gap:6px;

    transform:translate3d(100%,0,0);
    opacity:0; visibility:hidden; pointer-events:none;

    transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .2s, visibility .2s;
    z-index:5002;
    contain:paint;
    will-change:transform;
  }
  .menu.open{
    transform:translate3d(0,0,0);
    opacity:1; visibility:visible; pointer-events:auto;
  }

  /* drawer header row */
  .menu-header{
    display:flex; align-items:center; justify-content:space-between;
    list-style:none; margin:0 0 8px 0; padding:6px 2px 12px 2px;
    border-bottom:1px solid rgba(255,255,255,.18);
    position:sticky; top:0; background:var(--drawer-bg); z-index:1;
  }
  .menu-title{
    color:var(--drawer-fg); font-weight:800; letter-spacing:.2px; font-size:1.15rem;
  }
  .menu-close{
    display:grid; place-items:center;
    width:36px; height:36px; background:transparent; color:var(--drawer-fg);
    border:1px solid rgba(255,255,255,.28); border-radius:10px; cursor:pointer;
    font-size:20px; line-height:1;
    transition:background .2s, border-color .2s, transform .05s;
  }
  .menu-close:hover{ background:rgba(255,255,255,.08); }
  .menu-close:active{ transform:scale(.98); }

  /* mobile link spacing */
  .menu li{ margin:0; }
  .menu .nav-link{ color:var(--drawer-fg); padding:8px 8px; line-height:1.2; }

  /* clamp horizontal overflow while drawer layout is active */
  @supports (overflow-x: clip){
    html, body{ overflow-x:clip; }
  }
  @supports not (overflow-x: clip){
    html, body{ overflow-x:hidden; }
  }
}

/* Hamburger icon (animated look — color handled via JS state class) */
.nav-toggle{
  position:relative;
  width:40px;height:32px;
  border:0;background:transparent;cursor:pointer;
}
.nav-toggle .bar{
  position:absolute; left:6px; right:6px; height:2px; border-radius:2px;
  background:var(--color-text);
  transition:transform .25s ease, opacity .2s ease, top .25s ease, background .2s ease;
}
.nav-toggle .bar:nth-child(1){ top:8px; }
.nav-toggle .bar:nth-child(2){ top:15px; }
.nav-toggle .bar:nth-child(3){ top:22px; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ top:15px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ top:15px; transform:rotate(-45deg); }
/* bars turn light when open (contrast) */
.nav-toggle[aria-expanded="true"] .bar{ background:var(--drawer-fg); }