/* ==========================================================
   Theme: deep navy + signal orange
   Change colors here only.
   ========================================================== */
:root {
  --navy: #0a2342;
  --navy-2: #123a66;
  --navy-deep: #06162b;
  --orange: #f47b20;
  --orange-dark: #d9650e;
  --ink: #1d2a3a;
  --line: #dfe5ec;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  --font-head: "Barlow Semi Condensed", "Barlow", system-ui, "Microsoft YaHei", sans-serif;
}

body { font-family: var(--font-body); color: var(--ink); font-size: 1.2625rem; }
h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: var(--font-head); font-weight: 700; color: var(--navy); }
a { color: var(--navy-2); }
a:hover { color: var(--orange-dark); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ---------- Utilities ---------- */
.bg-navy { background: var(--navy) !important; }
.text-orange { color: var(--orange) !important; }
.btn-orange {
  --bs-btn-color: #fff; --bs-btn-bg: var(--orange); --bs-btn-border-color: var(--orange);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--orange-dark); --bs-btn-hover-border-color: var(--orange-dark);
  --bs-btn-active-bg: var(--orange-dark); --bs-btn-active-border-color: var(--orange-dark);
  font-weight: 600;
}
.btn-navy {
  --bs-btn-color: #fff; --bs-btn-bg: var(--navy); --bs-btn-border-color: var(--navy);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--navy-deep); --bs-btn-hover-border-color: var(--navy-deep);
  font-weight: 600;
}
.btn-outline-navy {
  --bs-btn-color: var(--navy); --bs-btn-border-color: var(--navy);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--navy); --bs-btn-hover-border-color: var(--navy);
  font-weight: 600;
}

/* ---------- Header ---------- */
.topbar { background: var(--navy-deep); color: rgba(255,255,255,.7); font-size: .875rem; }
.topbar a { color: rgba(255,255,255,.8); text-decoration: none; }
.topbar a:hover { color: #fff; }
.navbar { padding-top: .75rem; padding-bottom: .75rem; }
.navbar-brand { color: #fff !important; font-size: 1.9rem; display: flex; align-items: center; }
.brand-mark {                                  /* container-door stripes */
  width: 22px; height: 22px; margin-right: .55rem; flex-shrink: 0;
  background: repeating-linear-gradient(90deg, var(--orange) 0 4px, transparent 4px 6px);
}
.navbar-dark .nav-link { color: rgba(255,255,255,.85); font-weight: 500; }
.navbar-dark .nav-link.active, .navbar-dark .nav-link:hover { color: #fff; box-shadow: inset 0 -2px 0 var(--orange); }
.dropdown-item.active, .dropdown-item:active { background: var(--navy); }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff; padding: 7rem 0 6rem;
  background:
    linear-gradient(100deg, rgba(10,35,66,.97) 35%, rgba(10,35,66,.7)),
    var(--hero-img, none) center / cover no-repeat,
    var(--navy);
  border-bottom: 6px solid var(--orange);
}
.hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.08; margin-bottom: 1.25rem; }
.hero .lead { color: rgba(255,255,255,.85); max-width: 38em; margin-bottom: 2rem; }

/* ---------- Sections ---------- */
.block { padding: 4.5rem 0; }
.block-head { max-width: 40rem; margin-bottom: 2.5rem; }
.block-head h2 { font-size: 2.1rem; margin-bottom: .35rem; }
.block-head p { color: #5b6878; margin: 0; }
.rich-content img { max-width: 100%; height: auto; }
.rich-content ul { padding-left: 1.2rem; }
.rich-content li::marker { color: var(--orange); }

/* business lines: one bordered strip, not floating cards */
.pillars { border: 1px solid var(--line); }
.pillars > div + div .pillar { border-left: 1px solid var(--line); }
.pillar { display: block; height: 100%; padding: 2rem; text-decoration: none; color: var(--ink); }
.pillar:hover { background: #f6f8fb; color: var(--ink); }
.pillar i { font-size: 2rem; color: var(--orange); }
.pillar h3 { font-size: 1.5rem; margin: .75rem 0 .5rem; }
@media (max-width: 767.98px) {
  .pillars > div + div .pillar { border-left: 0; border-top: 1px solid var(--line); }
}

/* warehouse highlight */
.highlight { background: var(--navy); color: rgba(255,255,255,.88); }
.highlight h2 { color: #fff; font-size: 2.2rem; }
.highlight-img { border-left: 6px solid var(--orange); }
.highlight-placeholder {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  background: var(--navy-2); border-left: 6px solid var(--orange);
}
.highlight-placeholder i { font-size: 6rem; color: rgba(255,255,255,.25); }

/* service cards */
.service-card {
  display: block; height: 100%; padding: 1.75rem; background: #fff; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-top: 4px solid var(--navy);
}
.service-card:hover { border-top-color: var(--orange); color: var(--ink); }
.service-card i { font-size: 1.8rem; color: var(--orange); }
.service-card h3 { font-size: 1.3rem; margin: .75rem 0 .4rem; }
.service-card p { color: #5b6878; margin-bottom: .75rem; }
.service-card .more { font-weight: 600; color: var(--navy-2); font-size: .95rem; }

/* CTA */
.cta-band { background: var(--orange); color: #fff; }
.cta-band h2 { color: #fff; margin-bottom: .25rem; }

/* ---------- Inner pages ---------- */
.page-banner { background: var(--navy); color: rgba(255,255,255,.85); padding: 3.5rem 0; border-bottom: 6px solid var(--orange); }
.page-banner h1 { color: #fff; font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: .35rem; }
.page-banner p { margin: 0; max-width: 40em; }
.banner-crumb { color: var(--orange); text-decoration: none; font-weight: 600; }
.cat-block { scroll-margin-top: 80px; }
.cat-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 2rem; max-width: 44rem; }
.cat-head i { font-size: 2.4rem; color: var(--orange); line-height: 1; }
.side-box { border: 1px solid var(--line); padding: 1.5rem; background: #fff; }
.side-box li { padding: .35rem 0; }
.side-box li a { text-decoration: none; }
.side-cta { background: var(--navy); color: rgba(255,255,255,.85); border: 0; }
.side-cta h5 { color: #fff; }
.contact-list li { display: flex; gap: .75rem; margin-bottom: .9rem; }
.contact-list i { color: var(--orange); }
.map-wrap iframe { display: block; width: 100%; height: 380px; border: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.7); font-size: .95rem; }
.site-footer h6 { color: #fff; font-family: var(--font-head); font-size: 1.1rem; margin-bottom: 1rem; }
.site-footer a { color: rgba(255,255,255,.75); text-decoration: none; }
.site-footer a:hover { color: var(--orange); }
.site-footer li { margin-bottom: .45rem; }
.footer-brand { color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; display: flex; align-items: center; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); }
.wa-float {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030; width: 52px; height: 52px; border-radius: 50%;
  background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.wa-float:hover { color: #fff; background: #1ebe5b; }