:root{
  --bg:#0a1c2b; --ink:#e6f1ff; --muted:#a7bed0; --brand:#1f6eb8; --accent:#5cc3ff; --card:#10283a;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Inter',sans-serif;line-height:1.5}
a{color:var(--accent);text-decoration:none}
.btn{display:inline-block;padding:.75rem 1rem;border-radius:10px;border:1px solid transparent;font-weight:600}
.btn-primary{background:linear-gradient(150deg,var(--brand),var(--accent));color:#001018;box-shadow:var(--shadow)}
.btn-secondary{border-color:#204055;color:var(--ink);background:#0d2130}
.btn-lg{padding:1rem 1.25rem;font-size:1.05rem}
.top-marquee{border-bottom:1px solid #12354d;background:#0c2234;overflow:hidden}
.brand-track{display:flex;gap:32px;white-space:nowrap;animation:scroll 45s linear infinite;padding:8px 20px;color:#bcd1e1}
@keyframes scroll{to{transform:translateX(-50%)}}
.site-header{position:sticky;top:0;backdrop-filter:saturate(1.5) blur(8px);background:rgba(10,28,43,.7);border-bottom:1px solid #12354d;display:flex;align-items:center;gap:24px;padding:10px 20px;z-index:100}
.logo img{height:60px;max-height:60px}
.nav{display:flex;gap:14px;margin-left:auto;align-items:center}
.nav a,.dropbtn{padding:.55rem .75rem;border-radius:8px;background:transparent;border:1px solid transparent;color:var(--ink);cursor:pointer}
.menu-item.dropdown{position:relative}
.dropdown-content{display:none;position:absolute;left:0;top:calc(100% + 8px);background:#0f2a44;border:1px solid #164266;border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.dropdown-content.mega{display:grid;grid-template-columns:repeat(4, minmax(180px, 1fr));gap:18px;min-width:760px}
/* hover open rule removed in v2.6 */
.hero{position:relative;overflow:hidden;min-height:56vh;display:grid;place-items:center;padding:60px 20px}
.hero.slim{min-height:46vh}
.hero-bg{position:absolute;inset:0;background:url('/assets/img/hero-ship.webp') center/cover no-repeat, linear-gradient(#0a1c2b,#081a2a)}
.hero-content{position:relative;max-width:960px;text-align:center;background:rgba(10,28,43,.35);border:1px solid #12354d;border-radius:16px;padding:22px}
.hero h1{font-size:clamp(30px,4.8vw,54px);line-height:1.1;margin:0 0 12px}
.hero p{margin:0 0 16px;color:var(--muted);font-size:1.125rem}
.supply-matrix{padding:30px 20px}
.matrix{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;max-width:1100px;margin:0 auto}
.mcard{background:var(--card);border:1px solid #163b58;border-radius:14px;padding:16px}
.page{max-width:1100px;margin:0 auto;padding:28px 20px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.tiles .tile{background:var(--card);border:1px solid #163b58;border-radius:14px;padding:18px}
.bullets{display:grid;gap:8px;padding-left:18px}
.brand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.brand-pill{background:#0c2234;border:1px solid #163b58;border-radius:999px;padding:.5rem .75rem;color:#cfe3f5;text-align:center}
.quote-form form{background:#0c2234;border:1px solid #163b58;padding:18px;border-radius:14px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.grid-2 .span-2{grid-column:1/-1}
input,textarea{background:#0d2130;border:1px solid #15354a;border-radius:10px;padding:.75rem;color:var(--ink);outline:none}
.site-footer{border-top:1px solid #12354d;background:#0c2234;padding:30px 20px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;max-width:1100px;margin:0 auto;align-items:start}
.footer-logo{height:36px;margin-bottom:8px}
@media (max-width:900px){.brand-track{animation-duration:70s}.grid-2{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}}


/* --- v2.1 stability fixes --- */
html,body{max-width:100%; overflow-x:hidden}
img,svg,video{max-width:100%; height:auto; display:block}
.brand-track{align-items:center; display:flex; line-height:1; font-size:.95rem}
.brand-pill{white-space:nowrap}
.site-header, .top-marquee{position:relative; z-index:50}
/* Ensure dropdown never overflows viewport on small screens */
@media (max-width: 920px){
  .dropdown-content.mega{min-width:calc(100vw - 24px); left:12px; right:12px; grid-template-columns:1fr 1fr}
  .logo img{height:48px; max-height:48px}
  .nav{gap:8px}
}
/* Hero background robustness */
.hero-bg{background: url('/assets/img/hero-ship.webp') center/cover no-repeat, linear-gradient(#0a1c2b,#081a2a); filter: saturate(1.05)}
/* Cards min heights to avoid jumpiness */
.mcard, .tile{min-height:120px}
/* Reduce marquee speed if many brands */
@media (max-width: 600px){ .brand-track{animation-duration:85s} }



/* --- v2.2 visual polish based on screenshot --- */
html,body{font-size:17px}
.top-marquee{height:40px; display:flex; align-items:center; position:sticky; top:0; z-index:120}
.brand-track{animation-duration:55s}
.brand-track:hover{animation-play-state:paused}
.site-header{top:0; z-index:130; box-shadow:0 6px 18px rgba(0,0,0,.25)}
.hero{margin-top:8px}
.hero-content{background:rgba(10,28,43,.55); backdrop-filter:blur(6px); border:1px solid rgba(92,195,255,.25)}
/* Mega menu readability */
.dropdown-content{backdrop-filter:blur(8px); background:rgba(15,42,68,.9)}
.dropdown-content.mega{padding:18px 18px 14px; gap:22px}
.mega-col a{margin:.1rem 0}
/* Tighter cards */
.mcard,.tile{min-height:120px}
.matrix{gap:16px}
.value-columns .col{min-height:120px}
/* Avoid watermark/logo overlap in hero images */
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,28,43,.45), rgba(10,28,43,.15) 30%, rgba(10,28,43,.45) 100%);
}
/* Footer readability */
.site-footer{box-shadow:0 -6px 18px rgba(0,0,0,.25)}



/* --- v2.3 mega-menu stability --- */
.menu-item.dropdown{position:relative}
.dropdown-content.mega{
  display:grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 24px;
  min-width: 980px;
  padding: 20px;
  align-items:start;
}
.mega-col{min-width:180px}
.mega-col h4{
  margin: 0 0 8px 0;
  font-size: .95rem;
  color: #e8f2fb;
  white-space:nowrap;
}
.mega-col a{
  display:block;
  padding:.35rem .45rem;
  margin: 2px 0;
  line-height:1.2;
  white-space:nowrap;
  border-radius:8px;
}
.mega-col a:hover{background:#123a58}
/* Keep menu from touching hero */
.site-header{margin-bottom:6px}
/* Responsive: collapse to 2 columns on tablets, 1 on phones */
@media (max-width: 1200px){
  .dropdown-content.mega{min-width: 720px; grid-template-columns: repeat(3, minmax(180px, 1fr));}
}
@media (max-width: 920px){
  .dropdown-content.mega{position:fixed; left:12px; right:12px; top:68px; min-width:auto; grid-template-columns: repeat(2, minmax(150px,1fr)); max-height:65vh; overflow:auto;}
}
@media (max-width: 560px){
  .dropdown-content.mega{grid-template-columns: 1fr;}
}



/* --- v2.4: fix mega-menu overflow + hero overlay placement --- */

/* Constrain mega menu to viewport on desktop too */
.dropdown-content.mega{
  position: absolute;
  left: auto;              /* don't anchor to the left of the trigger */
  right: 12px;             /* keep 12px from viewport edge */
  max-width: min(1120px, calc(100vw - 24px));
  grid-template-columns: repeat(5, minmax(160px,1fr));
  gap: 22px;
  padding: 18px 18px 14px;
}

/* Prevent submenus from wrapping too tight */
.mega-col{min-width:160px}

/* Hero overlay: left-aligned, narrower, more transparent */
.hero{min-height:60vh}
.hero-content{
  text-align:left;
  max-width: 820px;
  margin-left: clamp(16px, 6vw, 120px);
  background: rgba(10,28,43,.45);
  border: 1px solid rgba(92,195,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.hero h1{font-size:clamp(28px,4.4vw,50px)}
.hero p{max-width: 70ch}

/* Slightly stronger gradient mask on hero to keep photo readable but visible */
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,28,43,.50), rgba(10,28,43,.12) 35%, rgba(10,28,43,.55) 100%);
}

/* Tablet & down: center hero content again */
@media (max-width: 980px){
  .dropdown-content.mega{right: 12px; left: 12px; max-width: calc(100vw - 24px); grid-template-columns: repeat(3, minmax(150px,1fr));}
  .hero-content{margin-left: 16px; margin-right: 16px; max-width: none; text-align:center}
}
@media (max-width: 640px){
  .dropdown-content.mega{grid-template-columns: repeat(2, minmax(150px,1fr));}
  .hero{min-height:52vh}
}
@media (max-width: 460px){
  .dropdown-content.mega{grid-template-columns: 1fr;}
}


/* --- v2.6 dropdown behavior: closed by default, click to open --- */
.dropdown-content{
  display:none;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.dropdown-content.open{
  display:grid;
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
/* Optional: open on hover only on devices that support it */
@media (hover:hover){
  .menu-item.dropdown:hover .dropdown-content{ display:grid; opacity:1; transform:none; pointer-events:auto; }
}


/* --- v2.7: logo badge + hero tuning + CTA emphasis --- */
/* Logo badge with subtle metallic pill */
.site-header .logo{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 10px; border-radius:14px;
  background:linear-gradient(180deg,#f8fbff 0%, #eef4f9 30%, #dfe8ef 100%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow: 0 6px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.5);
}
.logo img{ height:72px; max-height:72px }
@media (max-width: 900px){
  .logo img{ height:56px; max-height:56px }
  .site-header .logo{ padding:4px 8px; border-radius:12px }
}

/* Hero overlay narrower & lighter; reduce bottom gap */
.hero{ min-height:52vh; padding:50px 20px 36px }
.hero-content{
  max-width: 760px;
  background: rgba(10,28,43,.38);
  border: 1px solid rgba(92,195,255,.16);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.hero h1{ font-size: clamp(28px, 4.2vw, 48px) }
.hero p{ max-width: 70ch }
@media (max-width: 980px){
  .hero{ min-height:48vh; padding:44px 16px 28px }
  .hero-content{ margin-left: 16px; margin-right: 16px; }
}

/* Give the primary CTA more visual weight */
.btn.btn-primary.btn-lg{ padding:1.05rem 1.3rem; font-weight:700 }
.btn.btn-secondary.btn-lg{ padding:1.05rem 1.3rem }

/* Tighten space before next section slightly */
.supply-matrix{ padding-top: 20px }



/* --- v2.8: clean header logo & no hero overlay on home --- */
.site-header .logo{ background:none !important; border:none !important; box-shadow:none !important; padding:0 !important }
.logo img{ height:60px; max-height:60px }
@media (max-width:900px){ .logo img{ height:50px; max-height:50px } }