/* =========================================================
   Ocean Freight Logistics — shared stylesheet
   Brand: navy #051039, red #E20101, white
   ========================================================= */

:root {
  --navy: #051039;
  --navy-soft: #0a1a52;
  --navy-light: #13245e;
  --red: #e20101;
  --red-dark: #b80000;
  --white: #ffffff;
  --off-white: #f5f6f9;
  --gray-100: #f2f3f7;
  --gray-200: #e6e8ee;
  --gray-300: #cfd3dd;
  --gray-500: #8a90a0;
  --gray-700: #4a5060;
  --gray-900: #1b1f2a;
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --container: 1200px;
  --radius: 4px;
  --shadow: 0 6px 24px rgba(5, 16, 57, 0.16);
  --shadow-sm: 0 2px 10px rgba(5, 16, 57, 0.1);
  --status-info: #175cd3;
  --status-success: #067647;
  --status-warning: #b54708;
  --status-danger: #b42318;
  --status-neutral: #667085;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-locale: auto;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  line-height: 1.15;
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  font-size: 100%;
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  color: var(--gray-900);
  background: var(--white);
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 10000; transform: translateY(-160%);
  padding: 10px 14px; background: #fff; color: #062b55; border-radius: 4px; font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }
.hero-lead { max-width: 680px; color: #fff; font-size: 17px; line-height: 1.6; margin: 0 0 24px; }
.home-tracking-section { position: relative; z-index: 2; padding: 0 0 54px; background: var(--white); }
.home-tracking-panel { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.2fr); gap: 48px; align-items: center; margin-top: -38px; padding: 38px 42px; background: #fff; border-top: 5px solid var(--red); box-shadow: 0 16px 42px rgba(5, 16, 57, .16); }
.home-tracking-copy h2 { margin: 5px 0 10px; color: var(--navy); font-size: clamp(1.8rem, 3vw, 2.7rem); text-transform: uppercase; }
.home-tracking-copy > p:last-child { color: var(--gray-700); line-height: 1.6; }
.home-tracking-form label { display: block; margin-bottom: 9px; color: var(--navy); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.home-tracking-entry { display: grid; grid-template-columns: 1fr auto; }
.home-tracking-entry .tool-field { min-width: 0; border-right: 0; }
.home-tracking-entry .btn { min-width: 170px; border-radius: 0; }
.home-tracking-form .hint { margin-top: 9px; }
.service-portals { padding: 68px 0 76px; background: #fff; }
.service-portals-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.service-portal-card { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); overflow: hidden; }
.service-portal-image { position: relative; height: 280px; overflow: hidden; background: var(--navy); }
.service-portal-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,16,57,.62), transparent 55%); }
.service-portal-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.service-portal-card:hover .service-portal-image img { transform: scale(1.035); }
.service-portal-image span { position: absolute; left: 24px; bottom: 20px; z-index: 1; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.service-portal-content { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 28px; }
.service-portal-content h3 { color: var(--navy); font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.3; }
.service-portal-content p { flex: 1; margin: 13px 0 24px; color: var(--gray-700); line-height: 1.65; }
@media (max-width: 760px) { .service-portals { padding: 48px 0 56px; } .service-portals-grid { grid-template-columns: 1fr; } .service-portal-image { height: 230px; } }
@media (max-width: 820px) { .home-tracking-panel { grid-template-columns: 1fr; gap: 24px; margin-top: -24px; padding: 30px; } }
@media (max-width: 560px) { .home-tracking-section { padding-bottom: 38px; } .home-tracking-panel { padding: 26px 20px; } .home-tracking-entry { grid-template-columns: 1fr; gap: 10px; } .home-tracking-entry .tool-field { border-right: 1px solid var(--gray-300); } .home-tracking-entry .btn { width: 100%; } }
.options-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.options-grid .option-card { display: flex; flex-direction: column; }
.options-grid .option-card img { width: 100%; height: 210px; object-fit: cover; }
.option-body { padding: 22px; }
.option-body h3 { margin: 0 0 8px; }
.option-body p { color: var(--gray-700); }
@media (max-width: 820px) { .options-grid { grid-template-columns: 1fr; } }

.state-page {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: start;
  gap: 14px;
  max-width: 680px;
  margin: auto;
  padding: 40px 24px;
}
.state-page h1 { margin: 0; color: var(--navy); font-size: clamp(2.2rem, 7vw, 4.5rem); }
.state-page p { margin: 0; color: var(--gray-700); }
.state-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.connectivity-status {
  position: fixed; left: 50%; bottom: 18px; z-index: 9999;
  transform: translate(-50%, 140%); max-width: min(520px, calc(100vw - 32px));
  padding: 11px 16px; border-radius: 6px; background: #062b55; color: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,.22); transition: transform .2s ease;
  font-size: 13px; font-weight: 700;
}
.connectivity-status.show { transform: translate(-50%, 0); }

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 14px 26px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.btn-red {
  background: var(--red);
  color: var(--white);
}

.btn-red:hover {
  background: var(--red-dark);
}

.btn-navy {
  background: var(--navy);
  color: var(--white);
}

.btn-navy:hover {
  background: var(--navy-light);
}

.btn-outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}

.btn-outline:hover {
  background: var(--navy);
  color: var(--white);
}

.btn-white {
  background: var(--white);
  color: var(--navy);
}

.btn-white:hover {
  background: var(--gray-100);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: 9px 16px;
  font-size: 12px;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1600;
  background: var(--white);
  box-shadow: 0 1px 0 var(--gray-200), 0 4px 14px rgba(5, 16, 57, 0.06);
}

/* Utility bar */
.utility-bar {
  background: var(--navy);
  color: var(--white);
  font-size: 13px;
}

.utility-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 36px;
}

.utility-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.utility-links a {
  padding: 6px 10px;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.utility-links a:hover {
  opacity: 1;
  text-decoration: underline;
}

.utility-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.utility-tools button {
  background: none;
  border: none;
  color: var(--white);
  font-size: 13px;
  padding: 6px 10px;
  opacity: 0.85;
}

.utility-tools button:hover {
  opacity: 1;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lang-switch a {
  padding: 4px 6px;
  opacity: 0.7;
}

.lang-switch a.active {
  opacity: 1;
  color: var(--red);
}

/* Main bar */
.main-bar {
  background: var(--white);
  position: relative;
}

.main-bar .container {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 78px;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.logo img {
  height: 44px;
  width: auto;
}

.brand-wordmark {
  display: inline-flex;
  flex-direction: column;
  color: #062b55;
  font-family: Inter, Arial, sans-serif;
  line-height: .9;
  letter-spacing: .04em;
  white-space: nowrap;
}

.brand-wordmark strong {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.brand-wordmark small {
  margin-top: .4rem;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.brand-wordmark--light {
  color: #fff;
}

.logo img.logo-white {
  display: none;
}

/* Main navigation */
.main-nav {
  display: flex;
  align-items: stretch;
  gap: 4px;
  flex: 1;
}

.main-nav > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 28px 14px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--navy);
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.main-nav > li > a:hover,
.main-nav > li.open > a {
  color: var(--red);
  border-bottom-color: var(--red);
}

.main-nav .caret {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s;
}

.main-nav > li.open .caret {
  transform: rotate(225deg) translateY(-2px);
}

/* Full-width mega menu */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 3px solid var(--red);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}

.main-nav > li:hover .mega,
.main-nav > li.open .mega,
.main-nav > li:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px 24px;
}

.mega-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
}

.mega-col {
  min-width: 200px;
  flex: 1 1 200px;
}

.mega-title {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-200);
  width: 100%;
}

a.mega-title:hover {
  text-decoration: underline;
}

.mega-col ul li a {
  display: block;
  padding: 7px 0;
  font-size: 14px;
  color: var(--gray-900);
}

.mega-col ul li a:hover {
  color: var(--red);
}

/* Customer portal panel */
.mega-portal .mega-inner {
  display: flex;
  gap: 48px;
}

.mega-portal .mega-wrap {
  flex: 1 1 auto;
}

.mega-signin {
  flex: 0 0 340px;
  border-left: 1px solid var(--gray-200);
  padding-left: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mega-signin-action .btn {
  width: 100%;
  text-align: center;
}

.mega-signin-copy h6 {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
}

.mega-signin-copy p {
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.5;
}

.mega-discover-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--gray-200);
  padding-top: 14px;
}

.mega-discover {
  display: block;
}

.mega-discover h6 {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 6px;
}

.mega-discover h6::after {
  content: "\2192";
  color: var(--red);
  transition: transform 0.15s;
}

.mega-discover:hover h6::after {
  transform: translateX(3px);
}

.mega-discover p {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn-login {
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  padding: 11px 22px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: background 0.2s;
}

.btn-login:hover {
  background: var(--red-dark);
}

.btn-register {
  background: none;
  border: 1px solid var(--navy);
  color: var(--navy);
  border-radius: var(--radius);
  padding: 10px 18px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}

.btn-register:hover {
  background: var(--navy);
  color: var(--white);
}

.icon-btn {
  background: none;
  border: none;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.icon-btn:hover {
  color: var(--red);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  padding: 8px;
}

.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--navy);
  transition: transform 0.2s, opacity 0.2s;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(5, 16, 57, 0.94) 0%, rgba(5, 16, 57, 0.72) 42%, rgba(5, 16, 57, 0.28) 100%);
}

.hero-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 88px 24px 120px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.hero-content {
  flex: 1 1 420px;
  min-width: 0;
}

.hero-tracking-box {
  flex: 0 0 360px;
  width: 360px;
  max-width: 100%;
  background: #fff;
  color: var(--gray-900);
  border-radius: 6px;
  padding: 32px 30px;
  box-shadow: 0 20px 48px rgba(5, 16, 57, .35);
  border-top: 5px solid var(--red);
}

.hero-tracking-box h2 {
  margin: 4px 0 18px;
  color: var(--navy);
  font-size: 1.5rem;
  text-transform: uppercase;
}

.hero-tracking-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-tracking-box .hint {
  margin: 0;
  font-size: 12px;
  color: var(--gray-500);
}

@media (max-width: 900px) {
  .hero-inner { flex-direction: column; padding: 56px 20px 40px; }
  .hero-tracking-box { flex-basis: auto; width: 100%; }
}

.hero-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffd8d8;
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(34px, 4.4vw, 62px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 780px;
  margin-bottom: 18px;
}

.hero h1 .red {
  color: var(--red);
}

.hero-purpose {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--white);
  border-bottom: 2px solid var(--red);
  padding-bottom: 4px;
  margin-bottom: 44px;
  transition: color 0.2s;
}

.hero-purpose:hover {
  color: #ffd0d0;
}

.hero-purpose svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Tool card */
.tool-card {
  background: var(--white);
  color: var(--gray-900);
  border-radius: 6px;
  box-shadow: var(--shadow);
  max-width: 880px;
  overflow: hidden;
}

.tool-tabs {
  display: flex;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
}

.tool-tab {
  flex: 1;
  padding: 18px 16px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gray-700);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tool-tab svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.tool-tab:hover {
  color: var(--navy);
}

.tool-tab.active {
  background: var(--white);
  border-bottom-color: var(--red);
  color: var(--navy);
}

.tool-pane {
  display: none;
  padding: 26px 28px 28px;
}

.tool-pane.active {
  display: block;
}

.tool-pane h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.tool-pane .hint {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 10px;
}

.tool-field {
  width: 100%;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 15px;
  color: var(--gray-900);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tool-field::placeholder {
  color: var(--gray-500);
}

.tool-field:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(5, 16, 57, 0.12);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.price-note {
  font-size: 14px;
  color: var(--gray-700);
  margin-bottom: 18px;
  line-height: 1.6;
}

/* ---------- Sections ---------- */

.section {
  padding: 84px 0;
}

.section-alt {
  background: var(--off-white);
}

.section-head {
  margin-bottom: 44px;
}

.section-head.center {
  text-align: center;
}

.section-eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.1;
}

.section-sub {
  margin-top: 16px;
  font-size: 16px;
  color: var(--gray-700);
  max-width: 720px;
}

.section-head.center .section-sub {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Needs tabs (homepage) ---------- */

.needs-section {
  padding: 84px 0;
  background: var(--navy);
  color: var(--white);
}

.needs-section .section-title {
  color: var(--white);
}

.needs-section .section-sub {
  color: rgba(255, 255, 255, .72);
}

.needs-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.needs-column h3 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--red);
}

.needs-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.needs-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .05);
  transition: background 0.2s;
}

.needs-link:hover {
  background: rgba(255, 255, 255, .1);
}

.needs-link img {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.needs-link span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--white);
}

.needs-arrow {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.needs-link:hover .needs-arrow {
  transform: rotate(-45deg) translate(3px, -3px);
}

@media (max-width: 820px) {
  .needs-columns { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- Category cards ---------- */

.categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.category-head {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 3px solid var(--red);
  padding-bottom: 14px;
  margin-bottom: 22px;
}

.category-head h3 {
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--navy);
  letter-spacing: 0.02em;
}

.category-head .cat-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-500);
}

.option-card {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s, transform 0.25s;
}

.option-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.option-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.4s;
}

.option-card:hover img {
  transform: scale(1.05);
}

.option-card .opt-label {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(5, 16, 57, 0.85);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 3px;
}

.option-card .opt-body {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(5, 16, 57, 0.92));
  color: var(--white);
  padding: 46px 18px 16px;
}

.option-card .opt-body h4 {
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.option-card .opt-body p {
  font-size: 13px;
  opacity: 0.9;
  margin-top: 4px;
}

/* ---------- News ---------- */

.news-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 44px;
  align-items: start;
}

.news-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.news-card .news-thumb {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 6px;
}

.news-card .news-date {
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.05em;
}

.news-card .news-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy);
  transition: color 0.2s;
}

.news-card:hover .news-title {
  color: var(--red);
}

.news-list {
  border-top: 1px solid var(--gray-200);
}

.news-row {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-200);
  transition: background 0.2s;
}

.news-row:hover {
  background: var(--gray-100);
}

.news-row .news-date {
  flex-shrink: 0;
  width: 64px;
  text-align: center;
  border-right: 2px solid var(--red);
  padding-right: 12px;
}

.news-row .news-date .d {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}

.news-row .news-date .m {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gray-500);
}

.news-row .news-cat {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
}

.news-row .news-text {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.4;
}

.news-row-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.news-row:hover .news-text {
  color: var(--red);
}

.news-latest-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.3fr);
  gap: 44px;
  align-items: start;
}

.news-latest-main {
  display: block;
}

.news-latest-image {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
}

.news-latest-image img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.news-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #fff;
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 3px;
}

.news-latest-main time {
  display: block;
  color: var(--red);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
}

.news-latest-main h3 {
  color: var(--navy);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.news-latest-main:hover h3 {
  color: var(--red);
}

.news-latest-list {
  display: flex;
  flex-direction: column;
}

.news-latest-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--gray-200);
}

.news-latest-item:first-child {
  border-top: none;
  padding-top: 0;
}

.news-latest-item time {
  display: block;
  color: var(--red);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.news-latest-item a {
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.news-latest-item a:hover {
  color: var(--red);
}

.news-latest-item .needs-arrow {
  margin-top: 6px;
  flex-shrink: 0;
}

.news-latest-item:hover .needs-arrow {
  transform: rotate(-45deg) translate(3px, -3px);
}

@media (max-width: 820px) {
  .news-latest-grid {
    grid-template-columns: 1fr;
  }
}

.section-foot {
  margin-top: 36px;
  text-align: center;
}

/* ---------- Promo tiles ---------- */

.promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.promo {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s, transform 0.25s;
}

.promo:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.promo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 16, 57, 0.15), rgba(5, 16, 57, 0.9));
}

.promo-body {
  position: relative;
  padding: 28px;
  color: var(--white);
}

.promo-tag {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ff9b9b;
}

.promo-body h3 {
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 8px 0 10px;
}

.promo-body p {
  font-size: 14.5px;
  opacity: 0.92;
  max-width: 400px;
}

.promo-body .btn {
  margin-top: 16px;
}

/* ---------- Active nav item ---------- */

.main-nav > li > a.active {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* ---------- Sea freight page ---------- */

.quick-tools {
  position: relative;
  z-index: 5;
  background: var(--off-white);
  padding: 34px 0 60px;
}

.quick-tools .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.qtool {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--red);
  border-radius: 6px;
  padding: 26px 26px 28px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s, transform 0.25s;
}

.qtool:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.qtool-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border-radius: 50%;
  color: var(--red);
  margin-bottom: 12px;
}

.qtool-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.qtool-title {
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--navy);
}

.qtool:hover .qtool-title {
  color: var(--red);
}

.qtool-text {
  font-size: 14px;
  color: var(--gray-700);
}

/* Steps */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.step {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 26px 24px 24px;
  box-shadow: var(--shadow-sm);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 14px;
}

.step h4 {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--navy);
  margin-bottom: 8px;
}

.step p {
  font-size: 14px;
  color: var(--gray-700);
}

/* ---------- Page banner (sub-pages) ---------- */

.page-banner {
  position: relative;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}

.page-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}

.page-banner .banner-content {
  position: relative;
  padding: 64px 24px;
  max-width: var(--container);
  margin: 0 auto;
}

.page-banner h1 {
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.page-banner p {
  margin-top: 10px;
  font-size: 15px;
  opacity: 0.88;
  max-width: 640px;
}

/* ---------- Tool pages (tracking / schedule) ---------- */

.tool-page {
  padding: 56px 0 84px;
  background: var(--off-white);
}

.tool-page .tool-card {
  max-width: 920px;
  margin: 0 auto;
  border: 1px solid var(--gray-200);
}

.tool-page .tool-pane {
  display: block;
  padding: 34px;
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--gray-700);
}

.checkbox-line input[type="radio"] {
  accent-color: var(--red);
}

/* Tracking result */
.result-panel {
  margin-top: 34px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: var(--white);
  padding: 28px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.result-panel h3 {
  color: var(--navy);
  text-transform: uppercase;
  font-size: 18px;
  margin-bottom: 18px;
}

.timeline {
  position: relative;
  padding-left: 28px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--gray-200);
}

.timeline-item {
  position: relative;
  padding: 0 0 26px 0;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid var(--gray-300);
  background: var(--white);
}

.timeline-item.done::before {
  border-color: var(--red);
  background: var(--red);
}

.timeline-item .tl-date {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500);
}

.timeline-item .tl-title {
  font-weight: 700;
  color: var(--gray-900);
}

.timeline-item .tl-loc {
  font-size: 13.5px;
  color: var(--gray-700);
}

/* Live tracking result (js/tracking.js) */
.result-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--gray-200);
}
.result-status h3 {
  margin: 0;
  color: var(--navy);
  text-transform: uppercase;
  font-size: 18px;
}
.result-status .status-pill {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--navy);
  padding: 6px 14px;
  border-radius: 999px;
  text-transform: uppercase;
}
.result-status .status-pill.live {
  background: var(--red);
}
.result-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
  margin-bottom: 26px;
}
.result-map { border: 1px solid var(--gray-200); border-radius: 6px; overflow: hidden; min-height: 280px; }
#track-map { width: 100%; height: 340px; background: #b9d9e8; }
.result-details { display: flex; flex-direction: column; gap: 14px; }
.detail-block { border: 1px solid var(--gray-200); border-radius: 6px; padding: 14px 16px; }
.detail-block h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); }
.detail-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13.5px; }
.detail-row .dk { color: var(--gray-500); }
.detail-row .dv { font-weight: 700; color: var(--gray-900); text-align: right; }
.position-report { border-left: 3px solid var(--red); }
.position-report--estimated { border-left: 3px dashed var(--gray-300); background: var(--gray-100); }
.position-report--estimated h4 { font-style: italic; }
.position-disclaimer { margin: 10px 0 0; color: var(--gray-500); font-size: 11.5px; line-height: 1.5; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.vessel-marker-wrap { background: transparent; border: 0; }
.vessel-position-marker {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(5, 16, 57, .4);
  transform-origin: center;
}
.vessel-position-marker span { font-size: 15px; line-height: 1; transform: translateY(-1px); }
.port-marker-wrap { background: transparent; border: 0; }
.port-marker {
  width: 16px;
  height: 16px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.planned-route { animation: ocean-route-flow 14s linear infinite; }
@keyframes ocean-route-flow { to { stroke-dashoffset: -160; } }
@media (prefers-reduced-motion: reduce) { .planned-route { animation: none; } }
.progress-bar { background: var(--gray-200); border-radius: 999px; height: 10px; overflow: hidden; margin-top: 6px; }
.progress-bar > span { display: block; height: 100%; background: var(--red); border-radius: 999px; }
.timeline-item.current::before {
  border-color: var(--red);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(196, 30, 58, 0.2);
}
.timeline-item.delayed::before { background: var(--status-warning); box-shadow: 0 0 0 4px rgba(181,71,8,.14); }
.timeline-item.delayed .tl-title { color: var(--status-warning); }
.track-media { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.track-media figure { margin: 0; width: 190px; }
.track-media img { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; border: 1px solid var(--gray-200); }
.track-media figcaption { font-size: 12.5px; color: var(--gray-600); margin-top: 6px; }
.track-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 16px; border-radius: 6px; font-size: 14px; margin-top: 18px; }
.hint-line { font-size: 12.5px; color: var(--gray-500); margin-top: 6px; }

@media (max-width: 760px) {
  .result-body { grid-template-columns: 1fr; }
  #track-map { height: 260px; }
}

/* ---------- News page ---------- */

.news-page {
  padding: 56px 0 84px;
  background: var(--off-white);
  min-height: 60vh;
}

.news-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.news-toolbar h2 {
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--navy);
}

.filter-select {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  background: var(--white);
  color: var(--gray-900);
  min-width: 220px;
}

.news-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.news-article {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s, transform 0.25s;
}

.news-article:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.news-article img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.news-article .art-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.news-article .art-date {
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.05em;
}

.news-article .art-cat {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--gray-100);
  color: var(--navy);
  padding: 4px 10px;
  border-radius: 3px;
}

.news-article h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy);
}

.news-article a:hover h3 {
  color: var(--red);
}

.news-article .art-excerpt {
  font-size: 14px;
  color: var(--gray-700);
  flex: 1;
}

.news-article .art-more {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--red);
  letter-spacing: 0.04em;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 44px;
}

.pagination a,
.pagination span {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14px;
  color: var(--gray-700);
  background: var(--white);
}

.pagination a:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.pagination .current {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy);
  color: var(--white);
}

.footer-main {
  padding: 64px 0 40px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 40px;
}

.footer-brand .logo {
  margin-bottom: 18px;
}

.footer-col h4 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--white);
}

.footer-col li {
  margin-bottom: 10px;
}

.footer-col a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s;
}

.footer-col a:hover {
  color: var(--white);
  text-decoration: underline;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: background 0.2s;
}

.footer-social a:hover {
  background: var(--red);
}

.footer-social svg {
  width: 18px;
  height: 18px;
  fill: var(--white);
}

.footer-betterways {
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 18px 22px;
  border-radius: 6px;
  margin-top: 4px;
}

.footer-betterways p {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.footer-betterways .btn {
  font-size: 12px;
  padding: 10px 18px;
}

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 22px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.footer-legal .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-legal ul {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.footer-legal a {
  padding: 4px 8px;
}

.footer-legal a:hover {
  color: var(--white);
  text-decoration: underline;
}

.footer-version {
  font-size: 12px;
}

/* Corporate directory footer */
.footer-directory {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 54px;
  padding-top: 58px;
  padding-bottom: 50px;
}

.footer-links-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 38px 44px;
}

.footer-Title,
.footer-quick h4 {
  margin-bottom: 17px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.nav-footer-item { margin-bottom: 11px; }
.nav-footer-link { color: rgba(255, 255, 255, .7); font-size: 13px; transition: color 0.2s; }
.nav-footer-link:hover { color: #fff; text-decoration: underline; }

.content-link .separator {
  border-top: 1px solid rgba(255, 255, 255, .18);
  margin: 16px 0;
}

.footer-quick select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 0;
  padding: 0 38px 0 13px;
  background: #fff;
  color: #313746;
  font: inherit;
  font-size: 13px;
}

.footer-contact {
  border-left: 1px solid rgba(255, 255, 255, .18);
  padding-left: 38px;
}

.footer-contact-label {
  color: rgba(255, 255, 255, .68);
  font-size: 13px;
  margin-bottom: 8px;
}

.footer-phone {
  display: inline-block;
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 18px;
}

.footer-email {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 18px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.footer-email:hover { text-decoration: underline; }

.footer-contact > p:not(.footer-contact-label) {
  color: rgba(255, 255, 255, .62);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.footer-contact-button {
  display: inline-flex;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 35px;
}

.footer-contact-button:hover { background: #fff; color: var(--navy); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .16);
  background: #030b28;
  color: rgba(255, 255, 255, .55);
  font-size: 11px;
}

.footer-bottom .container {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer-bottom p + p { margin-top: 8px; }
.footer-bottom p:first-child { display: flex; gap: 9px; flex-wrap: wrap; }
.footer-bottom a { color: rgba(255, 255, 255, .72); }
.footer-bottom a:hover { color: #fff; }

.footer-back-top {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .35);
  font-size: 19px;
}

@media (max-width: 960px) {
  .footer-directory { grid-template-columns: 1fr; }
  .footer-contact { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .18); padding: 32px 0 0; }
}

@media (max-width: 680px) {
  .footer-directory { padding-top: 42px; gap: 38px; }
  .footer-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .footer-quick { grid-column: 1 / -1; }
  .footer-bottom .container { padding-top: 20px; padding-bottom: 20px; }
}

/* ---------- Shared content destinations ---------- */
.content-page { min-height: 55vh; }
.content-hero { position: relative; overflow: hidden; padding: 58px 0 68px; background: linear-gradient(125deg, var(--navy), var(--navy-light)); color: #fff; }
.content-hero::after { content: ""; position: absolute; inset: auto -8% -60% 44%; height: 310px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; transform: rotate(-8deg); pointer-events: none; }
.content-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; color: rgba(255,255,255,.7); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.content-breadcrumb a { color: #fff; text-decoration: none; }
.content-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.content-hero h1 { max-width: 800px; margin: 8px 0 16px; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1; text-transform: uppercase; }
.content-hero > .container > p:last-child { max-width: 760px; color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.65; }
.content-body { padding: 64px 0 80px; }
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.info-card { display: flex; min-height: 220px; flex-direction: column; border: 1px solid var(--gray-200); border-top: 4px solid var(--red); background: #fff; padding: 24px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.info-card:hover { transform: translateY(-3px); border-color: rgba(200,16,46,.35); box-shadow: 0 18px 42px rgba(2,29,78,.12); }
.info-card h2 { margin-bottom: 10px; color: var(--navy); font-size: 19px; }
.info-card p { color: var(--gray-700); line-height: 1.65; }
.info-card a { display: inline-block; margin-top: auto; padding-top: 18px; color: var(--red); font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.catalog-card .news-cat { align-self: flex-start; margin-bottom: 14px; padding: 6px 9px; border-radius: 999px; background: rgba(2,42,105,.08); color: var(--navy); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.catalog-card[hidden], .content-empty[hidden] { display: none !important; }
.catalog-card .hint { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gray-200); font-size: 11px; overflow-wrap: anywhere; }
.catalog-related { margin-top: 58px; padding-top: 36px; border-top: 1px solid var(--gray-200); }
.catalog-related > h2 { margin-bottom: 24px; color: var(--navy); font-size: clamp(1.5rem, 3vw, 2.3rem); }
.catalog-summary { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-200); }
.catalog-summary strong { color: var(--navy); font-size: 1.6rem; }
.content-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.content-notice, .content-empty { margin-top: 28px; padding: 22px 24px; border-left: 4px solid var(--navy); background: var(--gray-100); line-height: 1.65; }
.content-empty h2 { margin-bottom: 7px; color: var(--navy); }
.content-filters { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 28px; padding: 20px; border: 1px solid var(--gray-200); background: var(--gray-100); }
.content-filters label, .support-form label { display: grid; gap: 7px; color: var(--navy); font-size: 13px; font-weight: 700; }
.content-filters input, .content-filters select, .support-form input, .support-form select, .support-form textarea { width: 100%; min-height: 46px; border: 1px solid var(--gray-300); border-radius: 2px; padding: 12px; background: #fff; color: var(--gray-900); font: inherit; }
.content-filters input:focus, .content-filters select:focus, .support-form input:focus, .support-form select:focus, .support-form textarea:focus { outline: 3px solid rgba(200,16,46,.2); border-color: var(--red); }
.content-filters label { min-width: min(100%, 280px); }
.support-form { max-width: 900px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-wide { grid-column: 1 / -1; }
.form-privacy, .form-state { margin: 18px 0; color: var(--gray-700); font-size: 13px; line-height: 1.55; }
.form-state.success { color: #126b3a; font-weight: 700; }
.form-state.error { color: #a40000; font-weight: 700; }
.route-detail-card { padding: 28px; background: #fff; box-shadow: var(--shadow-sm); }
.route-detail-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 20px; background: var(--gray-200); }
.route-detail-card dl div { padding: 16px; background: #fff; }
.route-detail-card dt { color: var(--gray-700); font-size: 12px; text-transform: uppercase; }
.route-detail-card dd { margin-top: 5px; color: var(--navy); font-weight: 700; }
[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 820px) { .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .info-grid, .form-grid, .route-detail-card dl { grid-template-columns: 1fr; } .content-hero { padding: 38px 0 48px; } .content-breadcrumb { margin-bottom: 22px; } .content-body { padding: 38px 0 56px; } .info-card { min-height: 0; padding: 21px; } .content-filters { display: grid; padding: 16px; } .content-filters label { min-width: 0; } .catalog-summary { display: block; } .catalog-summary .hint { margin-top: 5px; } .content-actions .btn { width: 100%; justify-content: center; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .info-card { transition: none; } .info-card:hover { transform: none; } }

/* ---------- Search modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  background: rgba(5, 16, 57, 0.55);
  padding: 12vh 24px 24px;
  overflow-y: auto;
}

.modal.open {
  display: flex;
}

.modal-box {
  background: var(--white);
  border-radius: 8px;
  width: 100%;
  max-width: 720px;
  box-shadow: 0 24px 60px rgba(5, 16, 57, 0.35);
  overflow: hidden;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--gray-200);
}

.modal-head h3 {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--navy);
}

.modal-close {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--gray-500);
}

.modal-close:hover {
  color: var(--red);
}

.modal-body {
  padding: 24px;
}

.search-scope {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.search-scope .scope-btn {
  border: 1px solid var(--gray-300);
  background: var(--white);
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-700);
}

.search-scope .scope-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.search-input-row {
  display: flex;
  gap: 10px;
}

/* ---------- Misc ---------- */

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .mega-inner {
    padding: 24px 20px;
  }
  .mega-portal .mega-inner {
    flex-direction: column;
    gap: 24px;
  }
  .mega-signin {
    flex: 1 1 auto;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--gray-200);
    padding-top: 24px;
  }
  .footer-main {
    grid-template-columns: 1fr 1fr;
  }
  .news-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .quick-tools .container {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .utility-links a:not(.utility-key) {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 86vw);
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 24px 16px;
    gap: 0;
    box-shadow: -12px 0 40px rgba(5, 16, 57, 0.25);
    transform: translateX(100%);
    transition: transform 0.28s;
    overflow-y: auto;
    z-index: 1500;
  }
  .main-nav.open {
    transform: translateX(0);
  }
  .main-nav > li > a {
    padding: 16px 12px;
    border-bottom: 1px solid var(--gray-200);
    justify-content: space-between;
    font-size: 15px;
  }
  .mega {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    width: 100%;
    border: none;
    border-left: 3px solid var(--red);
    box-shadow: none;
    display: none;
  }
  .mega-inner {
    padding: 4px 0 12px 12px;
  }
  .mega-wrap {
    gap: 20px;
  }
  .mega-portal .mega-inner {
    gap: 20px;
  }
  .mega-signin {
    padding-top: 16px;
  }
  .main-nav > li.open .mega {
    display: block;
  }
  .main-nav > li:hover .mega,
  .main-nav > li:focus-within .mega {
    display: none;
  }
  .main-nav > li.open:hover .mega,
  .main-nav > li.open:focus-within .mega {
    display: block;
  }
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 16, 57, 0.5);
    z-index: 1400;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s;
  }
  .nav-backdrop.show {
    opacity: 1;
    visibility: visible;
  }
  .header-actions .btn-register,
  .header-actions .icon-btn {
    display: none;
  }
  .categories {
    grid-template-columns: 1fr;
  }
  .news-grid {
    grid-template-columns: 1fr;
  }
  .news-featured {
    grid-template-columns: 1fr;
  }
  .promo-grid {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .quick-tools .container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .container {
    padding: 0 16px;
  }
  .hero-content {
    padding: 56px 16px 80px;
  }
  .tool-tab {
    font-size: 12px;
    padding: 15px 8px;
  }
  .tool-pane {
    padding: 20px 16px;
  }
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .form-actions .btn {
    width: 100%;
  }
  .section {
    padding: 56px 0;
  }
  .footer-main {
    grid-template-columns: 1fr;
  }
  .news-list-grid {
    grid-template-columns: 1fr;
  }
  .steps-grid {
    grid-template-columns: 1fr;
  }
}
/* Regional localization */
.language-selector { display:flex; align-items:center; gap:3px; white-space:nowrap; }
.language-selector select { min-width: 152px; border:1px solid rgba(255,255,255,.45); background:var(--navy); color:#fff; border-radius:4px; padding:5px 30px 5px 9px; font:inherit; font-size:11px; font-weight:700; cursor:pointer; }
.language-selector select:hover, .language-selector select:focus-visible { border-color:#fff; outline:2px solid #fff; outline-offset:2px; }
.language-selector option { background:#fff; color:var(--navy); }
.regional-section { background:#f3f7f9; }
.regional-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.regional-grid article { background:#fff; border-top:4px solid var(--red); padding:24px; box-shadow:0 8px 28px rgba(10,35,55,.08); }
.regional-grid h3 { color:var(--navy); margin:0 0 10px; }
.service-notice { margin-top:20px; padding:18px 20px; border-left:4px solid var(--navy); background:var(--gray-100); line-height:1.55; }
@media (max-width:860px) { .regional-grid { grid-template-columns:1fr; } .utility-tools .language-selector { display:flex; } }

/* Customer-facing company, newsroom and support refinements */
.external-link-mark { margin-left: 5px; color: var(--red); font-weight: 800; }
.about-story { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,.7fr); gap:clamp(34px,6vw,90px); align-items:center; margin-bottom:56px; }
.about-story h2, .about-journey h2, .support-path h2, .guide-callout h2 { color:var(--navy); font-size:clamp(30px,3.6vw,52px); line-height:1.08; margin:8px 0 22px; }
.about-story p { max-width:760px; font-size:18px; line-height:1.75; }
.about-promise { min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; gap:14px; padding:36px; color:#fff; background:linear-gradient(145deg,#061747,#113380); border-bottom:7px solid var(--red); box-shadow:0 20px 50px rgba(5,24,72,.18); }
.about-promise strong { color:#ff2b2b; font-size:13px; letter-spacing:.15em; text-transform:uppercase; }
.about-promise span { font-size:28px; font-weight:700; line-height:1.25; }
.about-journey { margin:64px 0; padding:clamp(30px,5vw,60px); background:#f2f5fa; border-top:5px solid var(--red); }
.journey-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-top:34px; background:#dbe1eb; }
.journey-steps > div { background:#fff; padding:28px; }
.journey-steps b { color:var(--red); font-size:14px; letter-spacing:.14em; }
.journey-steps h3 { color:var(--navy); font-size:22px; margin:24px 0 10px; }
.journey-steps p { margin:0; line-height:1.6; }
.news-intro { display:flex; justify-content:space-between; gap:28px; align-items:end; padding:0 0 28px; margin-bottom:30px; border-bottom:1px solid #d9deea; }
.news-intro strong { color:var(--navy); font-size:clamp(24px,3vw,38px); }
.news-intro p { max-width:530px; margin:0; color:#5a6680; }
.news-source-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.news-card { position:relative; overflow:hidden; }
.news-card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--red); transform:scaleY(0); transform-origin:bottom; transition:transform .2s ease; }
.news-card:hover::before { transform:scaleY(1); }
.news-card-meta { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:24px; }
.news-card-meta time { color:#66738d; font-size:12px; font-weight:700; white-space:nowrap; }
.news-card h2 { font-size:23px; line-height:1.25; }
.regional-grid { gap:24px; }
.regional-card { min-height:320px; display:flex; flex-direction:column; }
.regional-card > span { color:var(--red); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.regional-card h2 { color:var(--navy); font-size:28px; line-height:1.15; margin:26px 0 16px; }
.regional-card p { color:#55627a; font-size:17px; line-height:1.65; }
.regional-card a { margin-top:auto; padding-top:24px; color:var(--navy); font-weight:800; text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:6px; }
.support-path, .guide-callout { display:flex; justify-content:space-between; align-items:center; gap:40px; margin-top:56px; padding:clamp(30px,5vw,58px); color:#fff; background:#07184d; }
.support-path h2, .guide-callout h2 { color:#fff; max-width:820px; }
.support-path p, .guide-callout p { max-width:760px; color:#dce3f4; font-size:17px; }
.support-path .content-actions, .guide-callout .content-actions { flex:0 0 auto; margin:0; }
.guide-callout { margin:0 0 42px; background:linear-gradient(120deg,#07184d,#113682); border-right:8px solid var(--red); }

@media (max-width:1000px) {
  .about-story { grid-template-columns:1fr; }
  .about-promise { min-height:220px; }
  .journey-steps, .news-source-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .support-path, .guide-callout { align-items:flex-start; flex-direction:column; }
}
@media (max-width:640px) {
  .journey-steps, .news-source-grid { grid-template-columns:1fr; }
  .news-intro { align-items:flex-start; flex-direction:column; }
  .about-promise { padding:28px; }
  .about-promise span { font-size:23px; }
}
.steps-grid--seven { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1000px) { .steps-grid--seven { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .steps-grid--seven { grid-template-columns:1fr; } }
.state-language { position:fixed; top:16px; right:16px; color:var(--navy); }
.state-language .language-selector select { border-color:currentColor; }
.demo-notice { margin:0 0 18px; padding:14px 18px; border:1px solid #d4a72c; border-left:5px solid #d4a72c; background:#fff8dc; color:#583f00; line-height:1.45; }

/* Reference-led homepage */
.home-page { color: #061b67; background: #fff; }
.home-page #main-content > :not(.home-shell) { display: none; }
.home-page .utility-bar { background: rgba(255,255,255,.94); color: var(--navy); border-bottom: 1px solid #e5e6eb; }
.home-page .utility-bar .container { justify-content: flex-end; min-height: 48px; max-width: 100%; padding: 0 3.8vw; }
.home-page .utility-links { margin-left: auto; }
.home-page .utility-links a { font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.home-page .utility-key { color: var(--navy); }
.home-page .main-bar .container { max-width: 100%; min-height: 102px; padding: 0 3.8vw; gap: 42px; }
.home-page .logo img { height: 57px; }
.home-page .main-nav { justify-content: flex-end; }
.home-page .main-nav > li { border-left: 1px solid #aaafd0; }
.home-page .main-nav > li > a { padding: 28px 25px; color: #071d6b; font-size: 16px; font-weight: 400; text-decoration: none; }
.home-page .header-actions { border-left: 1px solid #aaafd0; padding-left: 18px; }
.home-wide { width: min(92%, 1500px); margin: 0 auto; }

.home-hero { position: relative; min-height: 650px; overflow: hidden; background: #052744; }
.home-hero > img { content: url("/assets/world-map-hero.jpg"); position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(1,27,57,.62),rgba(1,27,57,.08) 62%); }
.home-hero-copy { position: absolute; left: 3.8vw; top: 50%; transform: translateY(-34%); color: #fff; }
.home-hero-copy h1 { max-width: 620px; font-size: clamp(3rem,4.6vw,5.2rem); line-height: 1.08; font-weight: 400; letter-spacing: -.045em; }
.home-hero-cta { display: inline-flex; margin-top: 38px; min-width: 235px; justify-content: center; padding: 24px 30px; background: #ed0000; color: #fff; font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.home-track-card { position: absolute; top: 75px; right: 0; width: min(510px,42vw); min-height: 410px; padding: 66px 48px 50px; background: #fff; color: #071d6b; }
.home-track-tabs { display: flex; gap: 31px; margin-bottom: 28px; text-transform: uppercase; letter-spacing: .16em; font-size: 15px; }
.home-track-tabs strong { padding-bottom: 8px; border-bottom: 3px solid #ed0000; }
.home-track-card label { display: block; margin-bottom: 8px; font-size: 14px; }
.home-track-card input { width: 100%; height: 58px; border: 1px solid #6371a6; padding: 0 18px; color: #071d6b; font: italic 17px var(--font); }
.home-track-card form p { margin: 10px 0 14px; color: #6672a3; font-size: 12px; line-height: 1.35; }
.home-track-card button { width: 100%; min-height: 67px; border: 0; background: #ed0000; color: #fff; font-size: 16px; font-weight: 700; }

.home-needs { padding: 105px 0 100px; }
.home-needs h2 { color: #092577; font-size: clamp(3rem,4.8vw,5.2rem); line-height: 1; font-weight: 400; letter-spacing: -.045em; }
.home-intro { margin: 48px 0 58px; color: #071d6b; font-size: 17px; }
.home-needs-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 44px; }
.home-need-column { padding-left: 24px; border-left: 3px solid #ed0000; }
.home-need-column h3 { margin-bottom: 28px; color: #ed0000; font-size: 18px; letter-spacing: .25em; text-transform: uppercase; }
.home-need-column > a { position: relative; display: grid; grid-template-columns: 145px 1fr; min-height: 174px; margin-bottom: 24px; overflow: hidden; background: #f4f5f8; box-shadow: 14px 18px 34px rgba(4,27,76,.09); }
.home-need-column img { width: 145px; height: 100%; min-height: 174px; object-fit: cover; }
.home-need-column span { align-self: center; padding: 25px; color: #072577; font-size: 18px; line-height: 1.4; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.home-need-column i,.home-news i { position: absolute; right: 16px; bottom: 12px; color: #ed0000; font-size: 24px; font-style: normal; }

.home-news { padding: 100px 0; background: linear-gradient(125deg,#fafbfc,#f1f3f7); }
.home-news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; }
.home-news-feature { position: relative; }
.home-news-feature > div { position: relative; }
.home-news-feature img { width: 100%; height: 410px; object-fit: cover; }
.home-news-feature > div > span { position: absolute; z-index: 1; top: 24px; left: 0; padding: 12px 30px; background: #fff; color: #071d6b; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.home-news time { display: block; margin-top: 22px; color: #ed0000; font-weight: 700; letter-spacing: .22em; }
.home-news-feature h2 { margin-top: 22px; color: #092577; font-size: clamp(1.8rem,2.6vw,3rem); line-height: 1.2; font-weight: 400; text-decoration: underline; text-underline-offset: 5px; }
.home-news-list { display: flex; flex-direction: column; }
.home-news-list a { position: relative; flex: 1; min-height: 145px; border-top: 2px solid #d9ddea; padding: 0 45px 28px 0; }
.home-news-list a:last-child { border-bottom: 2px solid #d9ddea; }
.home-news-list span { display: block; margin-top: 25px; color: #092577; font-size: clamp(1.35rem,2vw,2.15rem); line-height: 1.25; text-decoration: underline; text-underline-offset: 4px; }
.home-news-list a { overflow: hidden; overflow-wrap: anywhere; }
.home-need-column small { display: block; margin-top: 6px; color: #667085; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.home-news-source { width: min(1420px,calc(100% - 48px)); margin: 30px auto 0; color: #667085; font-size: .8rem; line-height: 1.6; }
.news-detail { max-width: 920px; }
.news-detail h2 { margin: 34px 0 16px; color: #092577; font-size: clamp(1.45rem,2vw,2rem); }
.news-fact-list { display: grid; gap: 12px; margin: 0 0 32px; padding-left: 22px; color: #344054; line-height: 1.65; }
.company-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin-bottom: 28px; background: #dce1eb; }
.company-details div { padding: 20px; background: #fff; }
.company-details dt { color: #667085; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.company-details dd { margin: 7px 0 0; color: #092577; font-weight: 700; }
.history-heading { padding: 70px 0 54px; background: #fff; text-align: center; }
.history-heading h1 { margin: 0 0 54px; color: #071b58; font-size: clamp(3rem,6vw,5rem); line-height: 1; }
.history-breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; max-width: 680px; margin: 0 auto; padding-top: 26px; border-top: 1px solid #151515; color: #8a94a8; font-weight: 700; }
.history-breadcrumb a { color: #8a94a8; text-decoration: none; }
.history-breadcrumb [aria-current="page"] { color: #071b58; }
.history-visual { height: min(56vw,680px); margin: 0; overflow: hidden; }
.history-visual img { width: 100%; height: 100%; object-fit: cover; }
.history-story { padding: 76px 0 90px; background: #f6f7fa; }
.history-lead { max-width: 1050px; margin: 0 auto 72px; color: #26344f; font-size: clamp(1.15rem,2vw,1.45rem); line-height: 1.75; }
.history-full-section { max-width: 1050px; margin: 0 auto; padding: 44px 0; border-top: 1px solid #d9deea; }
.history-full-section h2 { max-width: 920px; font-size: clamp(2rem,4vw,3.5rem); }
.history-full-section p { color: #536078; font-size: 1.06rem; line-height: 1.8; }
.history-era { max-width: none; margin: 48px 0 0; padding: 58px max(32px,calc((100% - 1050px)/2)); background: #071b58; }
.history-era h2 { margin: 0; color: #fff; }
.history-inline-image { margin: 34px 0; overflow: hidden; background: #e5e8ef; }
.history-inline-image img { display: block; width: 100%; max-height: 650px; object-fit: cover; }
.history-milestones { max-width: 1050px; margin: 60px auto 0; }
.history-milestones ol { margin: 40px 0; padding: 0; list-style: none; border-top: 1px solid #ccd3e1; }
.history-milestones li { display: grid; grid-template-columns: 110px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid #ccd3e1; }
.history-milestones strong { color: #e31b23; font-size: 1.25rem; }
.history-milestones span { color: #33415c; line-height: 1.6; }
.history-story h2 { max-width: 820px; margin: 8px 0 30px; color: #071b58; font-size: clamp(2rem,4vw,3.8rem); line-height: 1.05; }
.history-intro { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 38px; max-width: 1000px; color: #536078; font-size: 1.05rem; line-height: 1.75; }
.history-timeline { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin: 56px 0 34px; background: #dce1eb; }
.history-timeline article { padding: 30px; background: #fff; }
.history-timeline span { color: #e31b23; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.history-timeline h3 { margin: 12px 0; color: #071b58; font-size: 1.35rem; }
.history-timeline p { color: #667085; line-height: 1.65; }
.collected-section { max-width: 980px; padding: 34px 0; border-top: 1px solid #dce1eb; }
.collected-section:first-of-type { border-top: 0; }
.collected-section h2 { margin: 0 0 20px; color: #071b58; font-size: clamp(1.7rem,3vw,2.8rem); line-height: 1.12; }
.collected-section h3 { margin: 26px 0 10px; color: #092577; font-size: 1.25rem; }
.collected-section p,.collected-section li { color: #46546c; font-size: 1rem; line-height: 1.75; }
.collected-section ul { display: grid; gap: 12px; margin: 0; padding-left: 24px; }
.route-detail-card .collected-section { max-width: none; }
@media (max-width: 700px) { .history-heading { padding: 48px 0 38px; } .history-heading h1 { margin-bottom: 36px; } .history-breadcrumb { gap: 9px; padding-top: 20px; font-size: .8rem; } .history-visual { height: 62vw; min-height: 260px; } .history-story { padding: 50px 0 64px; } .history-intro,.history-timeline { grid-template-columns: 1fr; } .history-full-section { padding: 34px 0; } .history-era { margin-top: 28px; padding: 42px 20px; } .history-milestones li { grid-template-columns: 72px 1fr; gap: 14px; } }
@media (max-width: 700px) { .company-details { grid-template-columns: 1fr; } }

.home-portals { padding: 115px 0 130px; }
.home-portals-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 64px; }
.home-portals article { text-align: center; }
.home-portal-image { position: relative; }
.home-portal-image img { width: 100%; height: 470px; object-fit: cover; }
.home-portal-image span { position: absolute; left: 0; top: 28px; min-width: 300px; padding: 15px 28px; background: #ed0000; color: #fff; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; text-align: left; }
.home-portals h2 { margin: 34px auto 30px; color: #092577; font-size: clamp(1.75rem,2.5vw,2.8rem); line-height: 1.25; font-weight: 400; }
.home-red-button { display: inline-flex; min-width: 180px; justify-content: center; padding: 18px 28px; background: #ed0000; color: #fff; font-weight: 700; }

@media (max-width: 1100px) {
  .home-page .utility-bar { display: none; }
  .home-page .main-bar .container { min-height: 80px; }
  .home-page .logo img { height: 48px; }
  .home-hero { min-height: 760px; }
  .home-hero-copy { top: 18%; transform: none; }
  .home-track-card { top: auto; bottom: 0; width: min(620px,92%); min-height: 350px; padding: 44px; }
  .home-needs-grid { grid-template-columns: 1fr; }
  .home-need-column { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .home-need-column h3 { grid-column: 1/-1; }
}
@media (max-width: 760px) {
  .home-page .main-bar .container { padding: 0 18px; }
  .home-hero { min-height: 690px; }
  .home-hero-copy { left: 20px; right: 20px; top: 11%; }
  .home-hero-copy h1 { font-size: 2.7rem; }
  .home-hero-cta { margin-top: 22px; padding: 17px 22px; }
  .home-track-card { width: 100%; padding: 32px 20px; }
  .home-track-tabs { gap: 18px; font-size: 12px; }
  .home-needs,.home-news,.home-portals { padding: 65px 0; }
  .home-needs h2 { font-size: 2.75rem; }
  .home-intro { margin: 28px 0 40px; }
  .home-need-column,.home-news-grid,.home-portals-grid { grid-template-columns: 1fr; }
  .home-need-column > a { grid-template-columns: 115px 1fr; min-height: 145px; }
  .home-need-column img { width: 115px; min-height: 145px; }
  .home-need-column span { padding: 18px; font-size: 14px; }
  .home-news-grid,.home-portals-grid { gap: 54px; }
  .home-news-feature img,.home-portal-image img { height: 300px; }
  .home-portal-image span { min-width: 0; font-size: 12px; }
}

/* Reference-led shared footer */
.site-footer { background: #f2f3f6; color: #071d6b; }
.reference-footer-main { display: grid; grid-template-columns: 1.05fr 1.1fr .8fr .95fr; gap: clamp(40px,6vw,120px); min-height: 700px; padding: 70px 4.3vw 85px; }
.reference-footer-main h2 { margin: 0 0 26px; color: #07154a; font-size: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.reference-footer-brand img { width: min(100%,360px); height: auto; margin-top: 5px; }
.reference-footer-discover { max-width: 400px; }
.reference-footer-discover > a { position: relative; display: flex; align-items: center; min-height: 132px; margin-bottom: 10px; padding: 28px 46px; overflow: hidden; border: 1px solid #d8dbe2; color: #092577; font-size: 17px; line-height: 1.7; letter-spacing: .22em; text-transform: uppercase; }
.reference-footer-discover > a::after { content: attr(href); position: absolute; right: -8px; bottom: -34px; color: rgba(8,36,112,.035); font-size: 100px; letter-spacing: 0; text-transform: lowercase; }
.reference-footer-discover i { position: absolute; right: 24px; bottom: 20px; color: #ed0000; font-size: 23px; font-style: normal; }
.reference-footer-services { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.reference-footer-services h2 { margin-bottom: 0; }
.reference-footer-services a { color: #082675; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.reference-footer-services > span { width: 46px; height: 2px; margin: 8px 0 6px; background: #ed0000; }
.reference-footer-social > div { display: flex; gap: 9px; }
.reference-footer-social > div a { display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 14px; background: #092577; color: #fff; font-size: 12px; font-weight: 700; text-decoration: none; }
.reference-footer-social > div img { width: 25px; height: 25px; filter: brightness(0) invert(1); }
.reference-footer-social h3 { margin: 78px 0 28px; color: #07154a; font-size: 16px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.reference-footer-act { display: inline-grid; place-items: center; width: 104px; height: 66px; background: #ed0000; color: #fff; font-weight: 700; text-transform: uppercase; }
.reference-footer-bottom { position: relative; min-height: 205px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 38px 70px; background: #fff; color: #6672a3; }
.reference-footer-bottom nav { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; }
.reference-footer-bottom nav a { color: #082675; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.reference-footer-bottom p { font-size: 14px; }
.reference-footer-bottom .footer-back-top { position: absolute; right: 4vw; bottom: 45px; border-color: #c9cdd8; color: #092577; }
@media (max-width: 1050px) {
  .reference-footer-main { grid-template-columns: repeat(2,minmax(0,1fr)); min-height: 0; }
  .reference-footer-brand img { width: 270px; }
}
@media (max-width: 620px) {
  .reference-footer-main { grid-template-columns: 1fr; padding: 52px 22px 64px; }
  .reference-footer-discover { max-width: none; }
  .reference-footer-social h3 { margin-top: 42px; }
  .reference-footer-bottom { padding: 48px 22px 80px; text-align: center; }
  .reference-footer-bottom nav { gap: 18px 25px; }
}

/* Reference-led fixed navigation and mega-menu views */
.site-header { position: sticky; top: 0; z-index: 2000; overflow-x: clip; background: #fff; box-shadow: 0 1px 0 #e2e4ea; }
.site-header .utility-bar { display: none; }
.site-header .main-bar { background: #fff; }
.site-header .main-bar .container { max-width: 100%; min-height: 106px; padding: 0 2.7vw; gap: 38px; }
.site-header .logo img { width: 250px; height: 71px; object-fit: contain; }
.site-header .main-nav { justify-content: flex-end; gap: 0; }
.site-header .main-nav > li { list-style: none; border-left: 1px solid #aeb3d0; }
.site-header .main-nav > li:first-child { border-left: 3px solid transparent; }
.site-header .main-nav > li > a { min-height: 60px; padding: 18px 25px; border: 0; color: #092577; font-size: 17px; font-weight: 400; letter-spacing: 0; text-decoration: none; text-transform: none; }
.site-header .main-nav > li > a:hover,.site-header .main-nav > li.open > a,.site-header .main-nav > li > a[aria-current="page"] { border-left: 3px solid #ed0000; color: #092577; }
.site-header .main-nav .caret { display: none; }
.site-header .header-actions { display: none; }
.site-header .mega { position: fixed; z-index: 2100; isolation: isolate; top: 106px; left: 0; right: 0; width: 100%; min-width: 100%; min-height: 325px; border: 0; border-top: 1px solid #eceef2; box-shadow: 0 4px 5px rgba(0,0,0,.25); background: #fff; }
.site-header .mega-inner { width: 100%; max-width: none; padding: 36px 4vw 64px; }
.site-header .mega-wrap { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 48px; width: min(1450px,76vw); }
.site-header .mega-col { min-height: 145px; padding-left: 30px; border-left: 2px solid #dce0eb; }
.site-header .mega-title { display: block; margin-bottom: 22px; color: #092577; font-size: 17px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
.site-header .mega-col li { margin-bottom: 18px; }
.site-header .mega-col li a { color: #0b2b7c; font-size: 17px; line-height: 1.35; }
.site-header .mega-col li a:hover { color: #ed0000; text-decoration: none; }
.site-header .mega-portal { min-height: 720px; }
.site-header .mega-portal .mega-inner { display: grid; grid-template-columns: minmax(0,3fr) minmax(340px,1fr); gap: 50px; align-items: start; }
.site-header .mega-portal .mega-wrap { width: auto; grid-template-columns: repeat(3,minmax(210px,1fr)); gap: 70px 42px; }
.site-header .mega-signin { display: flex; flex-direction: column; gap: 25px; padding: 0; border: 0; }
.site-header .mega-signin-action .btn { width: 100%; min-height: 72px; border-radius: 0; text-transform: none; }
.site-header .mega-signin-copy,.site-header .mega-discover { padding: 30px; border-left: 3px solid #adb4d2; background: #f7f7f9; }
.site-header .mega-signin-copy h6,.site-header .mega-discover h6 { color: #092577; font-size: 22px; }
.site-header .mega-signin-copy p,.site-header .mega-discover p { margin-top: 12px; color: #092577; font-size: 15px; line-height: 1.45; }
.site-header .mega-discover-row { display: grid; gap: 25px; }
@media (max-width: 1200px) {
  .site-header .main-bar .container { min-height: 88px; }
  .site-header .logo img { width: 205px; height: 58px; }
  .site-header .main-nav > li > a { padding: 15px 14px; font-size: 14px; }
  .site-header .mega { top: 88px; }
}
@media (max-width: 860px) {
  .site-header .main-bar .container { min-height: 78px; padding: 0 18px; }
  .site-header .logo img { width: 180px; height: 51px; }
  .site-header .header-actions { display: flex; }
  .site-header .hamburger { display: flex; }
  .site-header .main-nav { top: 0; }
  .site-header .main-nav > li { border-left: 0; }
  .site-header .main-nav > li > a { min-height: 0; border-left: 0; }
  .site-header .main-nav .caret { display: block; }
  .site-header .mega { position: static; min-height: 0; width: 100%; box-shadow: none; }
  .site-header .mega-inner,.site-header .mega-portal .mega-inner { display: block; padding: 12px 0 20px 12px; }
  .site-header .mega-wrap,.site-header .mega-portal .mega-wrap { display: block; width: 100%; }
  .site-header .mega-col { min-height: 0; margin-bottom: 24px; padding-left: 18px; }
  .site-header .mega-signin { margin-top: 18px; }
}

/* Polished two-tier header */
.site-header .utility-bar { display: block; min-height: 48px; background: rgba(255,255,255,.94); color: #092577; border-bottom: 1px solid rgba(212,216,226,.9); transition: background-color .2s ease; }
.site-header .utility-bar:hover { background: #fff; }
.site-header .utility-bar .container { max-width: 100%; min-height: 48px; justify-content: flex-end; padding: 0 2.7vw; }
.site-header .utility-links { display: flex; align-items: center; gap: clamp(22px,2.4vw,46px); margin-left: auto; }
.site-header .utility-links a { color: #092577; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; transition: color .18s ease; }
.site-header .utility-links a:hover { color: #ed0000; }
.site-header .utility-tools { margin-left: 25px; }
.site-header .utility-tools button { color: #092577; }
.site-header .utility-tools button:hover { color: #ed0000; }
.site-header .main-bar { background: rgba(255,255,255,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .2s ease; }
.site-header .main-bar:hover,.site-header:has(.main-nav > li:hover) .main-bar { background: #fff; }
.site-header .main-nav > li > a:hover,.site-header .main-nav > li.open > a { color: #ed0000; }
.site-header .mega,.site-header .mega:hover { background: #fff; opacity: 1; }
.site-header .mega a:hover,.site-header .mega-title:hover { color: #ed0000; }
.home-page .site-header { position: absolute; top: 0; left: 0; right: 0; width: 100%; background: transparent; box-shadow: none; }
.home-page .site-header .utility-bar { display: block; background: rgba(255,255,255,.94); }
.home-page .site-header .utility-bar:hover { background: #fff; }
.home-page .site-header .main-bar { background: rgba(255,255,255,.68); }
.home-page .site-header .main-bar:hover,.home-page .site-header:has(.main-nav > li:hover) .main-bar { background: #fff; }
.home-page .home-hero { padding-top: 154px; }
.home-page .home-track-card { top: 229px; }
.site-header .mega { top: 154px; }
@media (max-width: 1200px) {
  .site-header .mega { top: 136px; }
  .home-page .home-hero { padding-top: 136px; }
  .home-page .home-track-card { top: auto; }
}
@media (max-width: 860px) {
  .site-header .utility-bar { display: none; }
  .home-page .site-header .utility-bar { display: none; }
  .home-page .home-hero { padding-top: 78px; }
  .site-header .mega { top: auto; }
}

/* Customer tracking workspace */
.tracking-page { background: #f4f6fa; color: #14213d; }
.tracking-page .page-banner { min-height: 315px; background: #071b58; }
.tracking-page .page-banner img { opacity: .28; object-position: center 58%; }
.tracking-page .page-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(5,16,57,.96),rgba(5,16,57,.54) 62%,rgba(5,16,57,.2)); }
.tracking-page .page-banner .banner-content { z-index: 1; max-width: 1500px; padding: 82px 34px; }
.tracking-page .page-banner h1 { max-width: 760px; font-size: clamp(2.6rem,4.3vw,4.7rem); line-height: 1; font-weight: 600; letter-spacing: -.04em; text-transform: none; }
.tracking-page .page-banner p { max-width: 740px; margin-top: 22px; font-size: 17px; line-height: 1.6; }
.tracking-page .tool-page { padding: 0 0 100px; background: #f4f6fa; }
.tracking-page .tool-page > .container { max-width: 1500px; padding: 0 34px; }
.tracking-workspace-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: 58px 0 28px; }
.tracking-workspace-head p { margin-bottom: 8px; color: #ed0000; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.tracking-workspace-head h2 { margin: 0 0 8px; color: #092577; font-size: clamp(1.8rem,3vw,2.8rem); line-height: 1.12; }
.tracking-workspace-head span { color: #667085; font-size: 15px; }
.tracking-workspace-head > a { flex: 0 0 auto; color: #092577; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.tracking-workspace-head > a:hover { color: #ed0000; }
.tracking-page .tool-page .tool-card { max-width: none; margin: 0; border: 0; border-top: 4px solid #ed0000; border-radius: 0; box-shadow: 0 18px 50px rgba(8,28,79,.12); }
.tracking-page .tool-page .tool-pane { padding: 34px 38px 38px; }
.tracking-page .tool-pane h2 { margin-bottom: 22px; color: #092577; font-size: 19px; letter-spacing: .08em; }
.tracking-page #track-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: end; }
.tracking-page #track-form .form-group { gap: 8px; }
.tracking-page #track-form label { color: #092577; font-size: 13px; letter-spacing: .08em; }
.tracking-page #track-input { height: 58px; border-radius: 0; border-color: #aeb6cd; padding: 0 19px; font-size: 17px; }
.tracking-page #track-form .hint { max-width: 880px; color: #7b8499; font-size: 11.5px; line-height: 1.45; }
.tracking-page #track-form .form-actions { margin: 0; }
.tracking-page #track-form .btn { min-width: 220px; min-height: 58px; border-radius: 0; }
.tracking-quick-tools { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin: 24px 0 0; background: #dfe3ec; border: 1px solid #dfe3ec; box-shadow: 0 10px 30px rgba(8,28,79,.06); }
.tracking-quick-tools > * { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 6px; padding: 23px 26px; border: 0; background: #fff; color: #667085; font: inherit; text-align: left; transition: background .18s,color .18s; }
.tracking-quick-tools strong { color: #092577; font-size: 15px; }
.tracking-quick-tools span { font-size: 12.5px; line-height: 1.45; }
.tracking-quick-tools > *:hover { background: #092577; color: rgba(255,255,255,.75); }
.tracking-quick-tools > *:hover strong { color: #fff; }

.tracking-page .result-panel { max-width: none; margin: 30px 0 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; }
.tracking-page .demo-notice { margin: 0 0 20px; }
.tracking-page .result-status { margin: 0; padding: 26px 30px; border: 0; background: #092577; color: #fff; }
.tracking-page .result-status h3 { color: #fff; font-size: 18px; letter-spacing: .07em; }
.tracking-page .result-status h3 span { color: #fff; font-weight: 400; }
.tracking-page .result-status .status-pill { background: #ed0000; padding: 9px 18px; border-radius: 2px; }
.result-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 13px 20px; border-bottom: 1px solid #e0e4ed; background: #fff; }
.result-actions > * { padding: 8px 13px; border: 1px solid #cfd5e2; background: #fff; color: #092577; font: inherit; font-size: 12px; font-weight: 700; }
.result-actions > *:hover { border-color: #ed0000; color: #ed0000; }
.tracking-page .result-body { grid-template-columns: minmax(0,1.25fr) minmax(430px,.85fr); gap: 24px; margin: 0; padding: 24px; background: #fff; }
.tracking-page .result-map { position: sticky; top: 178px; align-self: start; min-height: 610px; border: 0; border-radius: 0; background: #e9edf4; }
.tracking-page #track-map { height: 610px; }
.tracking-page .result-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 14px; }
.tracking-page .detail-block { min-width: 0; padding: 19px; border: 1px solid #e0e4ed; border-radius: 0; background: #fff; }
.tracking-page .detail-block:first-child { grid-column: 1/-1; border-top: 3px solid #ed0000; }
.tracking-page .detail-block h4 { margin-bottom: 12px; color: #092577; font-size: 12px; letter-spacing: .1em; }
.tracking-page .detail-row { align-items: flex-start; padding: 6px 0; border-bottom: 1px solid #f0f2f6; font-size: 12.5px; }
.tracking-page .detail-row:last-of-type { border-bottom: 0; }
.tracking-page .detail-row .dv { max-width: 62%; overflow-wrap: anywhere; color: #14213d; }
.tracking-page .position-report { border-left: 3px solid #ed0000; }
.tracking-page .position-report--estimated { border-left: 3px solid #aeb6cd; background: #f7f8fb; }
.tracking-page .progress-bar { height: 8px; border-radius: 0; }
.tracking-page .progress-bar > span { border-radius: 0; }
.tracking-page .timeline { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 0; margin-top: 24px; padding: 0; border: 1px solid #e0e4ed; background: #fff; }
.tracking-page .timeline::before { left: 0; right: 0; top: 91px; bottom: auto; width: auto; height: 2px; background: #e0e4ed; }
.tracking-section-heading { grid-column: 1/-1; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 20px 24px; border-bottom: 1px solid #e0e4ed; }
.tracking-section-heading span { color: #092577; font-size: 16px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tracking-section-heading small { color: #7b8499; }
.tracking-page .timeline-item { min-height: 155px; padding: 42px 18px 20px; border-right: 1px solid #edf0f5; }
.tracking-page .timeline-item::before { left: 18px; top: 18px; z-index: 1; }
.tracking-page .timeline-item .tl-title { color: #092577; }
.live-shipment-portal-cta { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 20px; margin-top: 14px; padding: 22px 24px; border: 1px solid #dce3ef; border-left: 4px solid #ed0000; background: linear-gradient(120deg,#fff 0%,#f5f8fd 100%); box-shadow: 0 10px 28px rgba(8,28,79,.07); }
.live-shipment-portal-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: #071b58; color: #fff; }
.live-shipment-portal-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.live-shipment-portal-cta > div:nth-child(2) > span { color: #ed0000; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.live-shipment-portal-cta h3 { margin: 4px 0; color: #071b58; font-size: 19px; }
.live-shipment-portal-cta p { margin: 0; color: #667085; font-size: 12px; line-height: 1.5; }
.live-shipment-portal-cta > a { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px; border-radius: 4px; background: #ed0000; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.live-shipment-portal-cta > a:hover { background: #071b58; color: #fff; }
.live-shipment-portal-cta > a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tracking-page .track-media { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 16px; margin-top: 24px; padding: 0 0 20px; border: 1px solid #e0e4ed; background: #fff; }
.tracking-page .track-media figure { width: auto; margin: 0 16px; }
.tracking-page .track-media img { height: 170px; border-radius: 0; }
.tracking-page .track-error { margin: 18px 0; border-radius: 0; }

@media (max-width: 1050px) {
  .tracking-page .result-body { grid-template-columns: 1fr; }
  .tracking-page .result-map { position: relative; top: auto; min-height: 460px; }
  .tracking-page #track-map { height: 460px; }
}
@media (max-width: 760px) {
  .tracking-page .page-banner { min-height: 260px; }
  .tracking-page .page-banner .banner-content { padding: 58px 20px; }
  .tracking-page .tool-page > .container { padding: 0 16px; }
  .tracking-workspace-head { align-items: flex-start; flex-direction: column; padding-top: 38px; }
  .tracking-page .tool-page .tool-pane { padding: 28px 20px; }
  .tracking-page #track-form { grid-template-columns: 1fr; }
  .tracking-page #track-form .btn { width: 100%; }
  .tracking-quick-tools { grid-template-columns: 1fr; }
  .tracking-page .result-body { padding: 14px; }
  .tracking-page .result-details { grid-template-columns: 1fr; }
  .tracking-page .detail-block:first-child { grid-column: auto; }
  .tracking-page .timeline { grid-template-columns: 1fr; margin-top: 18px; overflow: hidden; border: 0; border-radius: 12px; box-shadow: 0 8px 26px rgba(8,28,79,.08); }
  .tracking-page .timeline::before { left: 31px; right: auto; top: 94px; bottom: 24px; width: 2px; height: auto; background: #d9dfeb; }
  .tracking-page .timeline-item { min-height: 0; padding: 18px 16px 20px 58px; border-right: 0; border-bottom: 1px solid #edf0f5; background: #fff; }
  .tracking-page .timeline-item:last-child { border-bottom: 0; }
  .tracking-page .timeline-item::before { left: 24px; top: 23px; width: 13px; height: 13px; border-width: 3px; }
  .tracking-page .timeline-item .tl-date { margin-bottom: 4px; color: #7b8499; font-size: 10px; font-weight: 700; letter-spacing: .03em; }
  .tracking-page .timeline-item .tl-title { margin-bottom: 3px; font-size: 14px; line-height: 1.35; }
  .tracking-page .timeline-item .tl-loc { margin: 2px 0 0; color: #667085; font-size: 11px; line-height: 1.45; }
  .tracking-section-heading { align-items: flex-start; flex-direction: column; gap: 4px; padding: 18px 18px 17px; background: #071b58; }
  .tracking-section-heading span { color: #fff; font-size: 14px; }
  .tracking-section-heading small { color: rgba(255,255,255,.65); font-size: 10px; }
  .live-shipment-portal-cta { grid-template-columns: 44px minmax(0,1fr); gap: 12px; margin-top: 12px; padding: 18px 16px 16px; border: 0; border-top: 4px solid #ed0000; border-radius: 12px; box-shadow: 0 8px 26px rgba(8,28,79,.09); }
  .live-shipment-portal-icon { width: 44px; height: 44px; }
  .live-shipment-portal-cta h3 { font-size: 17px; }
  .live-shipment-portal-cta p { font-size: 11px; }
  .live-shipment-portal-cta > a { grid-column: 1/-1; width: 100%; min-height: 52px; margin-top: 4px; }
  .result-actions { justify-content: flex-start; overflow-x: auto; }
}
@media print {
  .tracking-page .site-header,.tracking-page .page-banner,.tracking-page .tool-card,.tracking-page .tracking-quick-tools,.tracking-page .site-footer,.tracking-page .result-actions { display: none !important; }
  .tracking-page,.tracking-page .tool-page { background: #fff; }
  .tracking-page .result-panel { display: block !important; margin: 0; }
  .tracking-page .result-map { position: static; min-height: 380px; }
  .tracking-page #track-map { height: 380px; }
}

/* Secure customer portal entry and map-first shell */
.tracking-page:not(.portal-ready) > .site-header,.tracking-page:not(.portal-ready) > main,.tracking-page:not(.portal-ready) > .site-footer { visibility: hidden; }
.portal-loader { position: fixed; z-index: 10000; inset: 0; display: grid; place-content: center; gap: 24px; background: #06194f; color: #fff; text-align: center; transition: opacity .6s ease,visibility .6s ease; }
.portal-loader.is-complete { display: none; opacity: 0; visibility: hidden; pointer-events: none; }
.portal-loader p { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.portal-sea { position: relative; width: min(520px,80vw); height: 130px; overflow: hidden; border-bottom: 2px solid rgba(255,255,255,.35); }
.portal-sea::before,.portal-sea::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -13px; height: 32px; border: 2px solid rgba(255,255,255,.22); border-radius: 50%; animation: portal-wave 2.4s linear infinite; }
.portal-sea::after { bottom: -22px; animation-delay: -1.2s; }
.portal-ship { position: absolute; left: -130px; bottom: 12px; width: 120px; color: #fff; animation: portal-sail 2.8s cubic-bezier(.3,.05,.3,1) infinite; }
.portal-ship svg { width: 100%; fill: #fff; stroke: #fff; stroke-width: 2; }
@keyframes portal-sail { 0% { transform: translateX(0) rotate(-2deg); } 50% { transform: translateX(330px) rotate(2deg); } 100% { transform: translateX(650px) rotate(-2deg); } }
@keyframes portal-wave { to { transform: translateX(60px); } }

.customer-auth-gate { position: fixed; z-index: 9000; inset: 0; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(420px,.75fr); overflow-y: auto; background: #fff; }
.customer-auth-gate[hidden] { display: none; }
.customer-login-visual { position: relative; overflow: hidden; background: #06194f; }
.customer-login-visual > img { width: 100%; height: 100%; object-fit: cover; opacity: .58; }
.customer-login-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(5,16,57,.25),rgba(5,16,57,.82)); }
.customer-login-visual > div { position: absolute; z-index: 1; left: 7vw; bottom: 10vh; color: #fff; }
.customer-login-visual > div img { width: 310px; filter: brightness(0) invert(1); }
.customer-login-visual > div p { margin-top: 25px; font-size: 20px; letter-spacing: .05em; }
.customer-login-card { display: flex; justify-content: center; flex-direction: column; padding: clamp(40px,6vw,100px); color: #14213d; }
.customer-login-kicker { margin-bottom: 12px; color: #ed0000; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.customer-login-card h1 { color: #092577; font-size: clamp(2.6rem,4vw,4.2rem); line-height: 1; }
.customer-login-card > p:not(.customer-login-kicker) { margin: 20px 0 30px; color: #667085; line-height: 1.6; }
.customer-login-card form { display: flex; flex-direction: column; }
.customer-login-card label { margin: 0 0 7px; color: #092577; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.customer-login-card input { height: 56px; margin-bottom: 20px; border: 1px solid #aeb6cd; padding: 0 16px; font: inherit; }
.customer-login-card input:focus { outline: 3px solid rgba(9,37,119,.14); border-color: #092577; }
.customer-login-card button { min-height: 60px; border: 0; background: #ed0000; color: #fff; font-size: 15px; font-weight: 700; }
.customer-login-card button:disabled { opacity: .55; }
.customer-login-error { min-height: 22px; margin-top: 12px; color: #b42318; font-size: 13px; }
.customer-signup-invite { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; padding-top: 20px; border-top: 1px solid #e1e5ed; color: #667085; font-size: 13px; }
.customer-signup-invite button { min-height: 42px; padding: 0 16px; border: 1px solid #092577; border-radius: 4px; background: #fff; color: #092577; font-size: 12px; cursor: pointer; }
.customer-signup-invite button:hover { background: #092577; color: #fff; }
.customer-login-card aside { display: flex; flex-direction: column; gap: 5px; margin-top: 28px; padding: 17px 20px; border-left: 3px solid #092577; background: #f4f6fa; }
.customer-login-card aside span { color: #667085; font-size: 12px; line-height: 1.5; }
.customer-signup-modal { position: fixed; z-index: 2; inset: 0; display: grid; place-items: center; padding: 24px; overflow-y: auto; background: rgba(5,16,57,.76); backdrop-filter: blur(5px); }
.customer-signup-modal[hidden] { display: none; }
.customer-signup-card { position: relative; box-sizing: border-box; width: min(100%,680px); max-height: calc(100dvh - 48px); overflow-y: auto; padding: clamp(28px,5vw,52px); border-radius: 16px; background: #fff; color: #14213d; box-shadow: 0 25px 90px rgba(0,0,0,.38); }
.customer-signup-close { position: absolute; top: 14px; right: 14px; display: grid; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 50%; background: #eef1f6; color: #071b58; font-size: 25px; cursor: pointer; }
.customer-signup-card h2 { margin: 6px 0 10px; color: #071b58; font-size: clamp(28px,4vw,42px); }
.customer-signup-card > p:not(.customer-login-kicker) { margin: 0 0 24px; color: #667085; line-height: 1.6; }
.customer-signup-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.customer-signup-grid label { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: #092577; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.customer-signup-grid label.wide { grid-column: 1/-1; }
.customer-signup-grid label > small { color: #7b8499; font-size: 10px; font-weight: 500; letter-spacing: 0; line-height: 1.4; text-transform: none; }
.customer-signup-grid input { box-sizing: border-box; width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid #aeb6cd; border-radius: 4px; font: 500 16px var(--font); }
.customer-signup-grid input:focus { outline: 3px solid rgba(9,37,119,.13); border-color: #092577; }
.customer-signup-consent { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0; color: #596579; font-size: 12px; line-height: 1.5; }
.customer-signup-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #092577; }
.customer-signup-consent a { color: #092577; font-weight: 800; }
.customer-signup-submit { width: 100%; min-height: 56px; border: 0; border-radius: 4px; background: #ed0000; color: #fff; font: 800 14px var(--font); cursor: pointer; }
.customer-signup-submit:disabled { opacity: .55; cursor: wait; }
.customer-signup-result { min-height: 22px; margin: 13px 0 0; color: #b42318; font-size: 12px; font-weight: 700; line-height: 1.5; }
.customer-signup-result.success { padding: 12px 14px; border-left: 3px solid #15803d; background: #f0fdf4; color: #166534; }
.signup-modal-open { overflow: hidden; }
.customer-auth-gate.shipment-login-prompt { place-items: center; grid-template-columns: 1fr; padding: clamp(18px,4vw,48px); background: linear-gradient(rgba(6,25,79,.76),rgba(6,25,79,.9)),url('/assets/world-map-hero.jpg') center/cover; }
.customer-auth-gate.shipment-login-prompt .customer-login-visual { display: none; }
.customer-auth-gate.shipment-login-prompt .customer-login-card { box-sizing: border-box; width: min(100%,520px); max-height: calc(100dvh - 36px); overflow-y: auto; padding: clamp(28px,5vw,52px); border-radius: 16px; background: #fff; box-shadow: 0 24px 80px rgba(0,0,0,.38); }
.customer-auth-gate.shipment-login-prompt .customer-login-card h1 { font-size: clamp(2rem,4vw,3rem); }
.tracking-page.portal-locked > .site-header,.tracking-page.portal-locked > main,.tracking-page.portal-locked > .site-footer { display: none; visibility: hidden; }
.tracking-page.portal-locked { overflow: hidden; }

.customer-dashbar { position: sticky; z-index: 1200; top: 154px; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 0 3vw; background: #06194f; color: #fff; box-shadow: 0 5px 18px rgba(5,16,57,.2); }
.customer-dashbar[hidden] { display: none; }
.customer-dashbar > div { display: flex; align-items: center; gap: 20px; }
.customer-dashbrand { display: flex; align-items: center; border: 0; background: transparent; }
.customer-dashbrand img { display: block; height: 32px; width: auto; filter: brightness(0) invert(1); }
.customer-dashbar > div span { color: rgba(255,255,255,.65); font-size: 12px; }
.customer-dashbar nav { display: flex; align-items: center; gap: 6px; }
.customer-dashbar nav > * { padding: 10px 14px; border: 0; background: transparent; color: rgba(255,255,255,.78); font: inherit; font-size: 12px; font-weight: 700; }
.customer-dashbar nav > *:hover { color: #fff; background: rgba(255,255,255,.1); }
.customer-dashbar #customer-logout { border-left: 1px solid rgba(255,255,255,.25); }
@media (max-width: 900px) {
  .customer-auth-gate { grid-template-columns: 1fr; }
  .customer-login-visual { display: none; }
  .customer-login-card { padding: 45px 24px; }
  .customer-dashbar { top: 78px; overflow-x: auto; }
  .customer-dashbar > div span { display: none; }
  .customer-dashbar nav { min-width: max-content; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-ship,.portal-sea::before,.portal-sea::after { animation: none; }
  .portal-ship { left: 50%; transform: translateX(-50%); }
}

/* Authenticated map-first operations dashboard */
.customer-sidebar { position: fixed; z-index: 3100; inset: 0 auto 0 0; width: 280px; display: flex; flex-direction: column; background: #06194f; color: #fff; box-shadow: 8px 0 30px rgba(5,16,57,.14); }
.customer-sidebar[hidden] { display: none; }
.customer-sidebar-logo { display: flex; align-items: center; min-height: 104px; padding: 20px 30px; border-bottom: 1px solid rgba(255,255,255,.12); }
.customer-sidebar-logo img { width: 205px; filter: brightness(0) invert(1); }
.customer-sidebar nav { display: flex; flex-direction: column; gap: 6px; padding: 30px 18px; }
.customer-sidebar nav a { display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 12px 15px; border-left: 3px solid transparent; color: rgba(255,255,255,.72); font-size: 13px; font-weight: 700; }
.customer-sidebar nav a span { display: grid; place-items: center; width: 22px; color: rgba(255,255,255,.5); font-size: 16px; }
.customer-sidebar nav a span { position: relative; }
.customer-alert-badge { position: absolute; top: -9px; right: -12px; display: grid; min-width: 18px; height: 18px; place-items: center; padding: 0 4px; border: 2px solid #06194f; border-radius: 999px; background: #ed0000; color: #fff; font: 900 9px/1 var(--font); font-style: normal; box-shadow: 0 2px 7px rgba(0,0,0,.28); }
.customer-alert-badge[hidden] { display: none; }
.customer-sidebar nav a span svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.customer-sidebar nav a b { font: inherit; }
.customer-sidebar nav a:hover,.customer-sidebar nav a.active { border-left-color: #ed0000; background: rgba(255,255,255,.09); color: #fff; }
.customer-sidebar nav a:hover span,.customer-sidebar nav a.active span { color: #ed0000; }
.customer-sidebar-foot { margin: auto 22px 25px; padding: 18px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); }
.customer-sidebar-foot p { color: rgba(255,255,255,.5); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.customer-sidebar-foot strong { display: block; margin: 7px 0 5px; font-size: 12px; }
.customer-sidebar-foot small { color: rgba(255,255,255,.55); font-size: 10px; line-height: 1.4; }

.portal-authenticated { overflow-x: hidden; background: #edf1f7; }
.portal-authenticated > .site-header,.portal-authenticated > .site-footer { display: none; }
.portal-authenticated > main { min-height: 100vh; margin-left: 280px; background: #edf1f7; }
.portal-authenticated .page-banner,.portal-authenticated .tracking-workspace-head,.portal-authenticated .tracking-quick-tools { display: none; }
.portal-authenticated .customer-dashbar { position: fixed; z-index: 3000; top: 0; left: 280px; right: 0; min-height: 72px; padding: 0 28px; background: #fff; color: #092577; border-bottom: 1px solid #dce1eb; box-shadow: 0 4px 18px rgba(8,28,79,.06); }
.portal-authenticated .customer-dashbrand img { filter: none; }
.portal-authenticated .customer-dashbar > div span { color: #7b8499; }
.portal-authenticated .customer-dashbar nav > * { color: #596579; }
.portal-authenticated .customer-dashbar nav > *:hover { color: #ed0000; background: #f5f6f9; }
.portal-authenticated .customer-dashbar #customer-logout { border-left-color: #dce1eb; color: #ed0000; }
.portal-authenticated .tool-page { min-height: 100vh; padding: 96px 24px 55px; background: #edf1f7; }
.portal-authenticated .tool-page > .container { max-width: none; padding: 0; }
.customer-dashboard { margin-bottom: 18px; }
.customer-dashboard-loading,.customer-dashboard-error{display:grid;justify-items:center;gap:9px;min-height:320px;place-content:center;padding:30px;border:1px solid #dce1eb;border-radius:10px;background:#fff;text-align:center}.customer-dashboard-loading span{width:34px;height:34px;border:4px solid #dce1eb;border-top-color:#ed0000;border-radius:50%;animation:portal-loader-spin .8s linear infinite}.customer-dashboard-loading small,.customer-dashboard-error p{color:#667085}.customer-dashboard-error h2{margin:0;color:#071b58}.customer-dashboard-error button{min-height:44px;padding:0 18px;border:0;border-radius:5px;background:#071b58;color:#fff;font-weight:800;cursor:pointer}
.customer-overview-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,.85fr);gap:18px;align-items:start}.customer-overview-main,.customer-attention-panel{min-width:0}.customer-overview-main>.customer-section-heading,.customer-attention-panel>.customer-section-heading{margin-top:0}.customer-section-heading a{color:#092577;font-size:11px;font-weight:800;text-transform:uppercase}.customer-attention-panel{padding:20px;border-top:4px solid #ed0000;border-radius:8px;background:#fff;box-shadow:0 6px 20px rgba(8,28,79,.06)}.customer-attention-list{display:grid;gap:8px}.customer-attention-list a{display:grid;gap:4px;padding:11px;border:1px solid #e1e6ef;border-radius:6px;color:#071b58;text-decoration:none}.customer-attention-list a:hover{border-color:#ed0000}.customer-attention-list span,.customer-attention-list small{color:#667085;font-size:11px}.customer-overview-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.customer-overview-actions a{display:flex;align-items:center;gap:12px;min-height:72px;padding:14px 18px;border:1px solid #dce1eb;border-radius:7px;background:#fff;color:#071b58;text-decoration:none}.customer-overview-actions strong{font-size:25px}.customer-overview-actions span{font-size:11px;font-weight:800;text-transform:uppercase}
.customer-dashboard-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 16px; }
.customer-dashboard-head h1 { margin: 0 0 5px; color: #071b58; font-size: clamp(24px,3vw,36px); }
.customer-dashboard-head p { margin: 0; color: #667085; }
.customer-dashboard-stats { display: grid; grid-template-columns: repeat(3,minmax(120px,1fr)); gap: 12px; }
.customer-stat { min-width: 130px; padding: 14px 18px; border: 1px solid #dce1eb; border-radius: 7px; background: #fff; box-shadow: 0 5px 16px rgba(8,28,79,.05); }
.customer-stat strong { display: block; color: #071b58; font-size: 24px; }
.customer-stat span { color: #7b8499; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.customer-dashboard-tabs { display: flex; gap: 4px; margin-bottom: 14px; padding: 5px; border: 1px solid #dce1eb; border-radius: 7px; background: #fff; }
.customer-dashboard-search { display: block; margin: 0 0 12px; color: #596579; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.customer-dashboard-search input { width: 100%; margin-top: 6px; }
.customer-document-list { display: grid; gap: 8px; }
.customer-document-attention{display:grid;grid-template-columns:minmax(220px,1fr) repeat(2,minmax(220px,1fr));gap:10px;margin-bottom:18px;padding:16px;border:1px solid #f3c4bb;border-left:4px solid #b42318;border-radius:7px;background:#fffafa}.customer-document-attention h2{margin:0 0 5px;color:#7f1d1d;font-size:17px}.customer-document-attention p{margin:0;color:#667085;font-size:11px;line-height:1.5}.customer-document-attention article{display:grid;gap:4px;padding:11px;border:1px solid #ead8d5;border-radius:5px;background:#fff}.customer-document-attention article span,.customer-document-attention article small{color:#667085;font-size:10px}.customer-document-attention article a{margin-top:4px;color:#092577;font-size:10px;font-weight:800;text-transform:uppercase}
.customer-document-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 16px; border: 1px solid #dce1eb; border-radius: 7px; background: #fff; text-align: left; }
.customer-document-row span { display: grid; gap: 4px; }
.customer-document-row small { color: #667085; }
.customer-document-row b { color: #e31b23; }
.customer-support-layout { display: grid; grid-template-columns: minmax(0,2fr) minmax(240px,1fr); gap: 18px; }
.customer-profile-form textarea { width: 100%; margin-top: 6px; resize: vertical; }
.customer-support-history { padding: 20px; border: 1px solid #dce1eb; border-radius: 7px; background: #fff; }
.customer-support-history h3 { margin-top: 0; }
.customer-support-history article { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid #e7eaf0; }
.customer-support-history article:first-of-type { border-top: 0; }
.customer-support-history small { color: #667085; }
.customer-dashboard-tab { padding: 10px 16px; border: 0; border-radius: 5px; background: transparent; color: #596579; font: 700 12px var(--font); cursor: pointer; }
.customer-dashboard-tab.is-active { background: #071b58; color: #fff; }
.customer-dashboard-panel[hidden] { display: none; }
.customer-shipment-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.customer-shipment-card { padding: 18px; border: 1px solid #dce1eb; border-radius: 7px; background: #fff; box-shadow: 0 6px 20px rgba(8,28,79,.05); cursor: pointer; transition: transform .18s ease,box-shadow .18s ease; }
.customer-shipment-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(8,28,79,.1); }
.customer-shipment-card header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.customer-shipment-card h3 { margin: 0; color: #071b58; font-size: 15px; }
.customer-shipment-card small,.customer-shipment-card p { color: #667085; }
.customer-shipment-card p { min-height: 38px; margin: 8px 0; font-size: 12px; }
.customer-shipment-progress { height: 7px; overflow: hidden; border-radius: 7px; background: #e5e9f1; }
.customer-shipment-progress span { display: block; height: 100%; background: #ed0000; }
.customer-alert-list { display: grid; gap: 10px; }
.customer-alert { display: flex; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid #dce1eb; border-left: 4px solid #ed0000; border-radius: 5px; background: #fff; }
.customer-alert h3 { margin: 0 0 5px; color: #071b58; font-size: 14px; }
.customer-alert p { margin: 0; color: #667085; font-size: 12px; }
.customer-profile-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; width: 100%; padding: clamp(18px,3vw,30px); border: 1px solid #dce1eb; border-radius: 7px; background: #fff; }
.customer-profile-form label { display: flex; min-width: 0; flex-direction: column; color: #596579; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.customer-profile-form input,.customer-profile-form select,.customer-profile-form textarea { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; margin-top: 7px; border: 1px solid #cbd2df; border-radius: 4px; background: #fff; color: #14213d; font: 500 14px var(--font); text-transform: none; }
.customer-profile-form input,.customer-profile-form select { min-height: 48px; padding: 0 13px; }
.customer-profile-form textarea { padding: 13px; line-height: 1.5; }
.customer-profile-form input:focus,.customer-profile-form select:focus,.customer-profile-form textarea:focus { outline: 3px solid rgba(9,37,119,.12); border-color: #092577; }
.customer-profile-form .wide,.customer-profile-form .customer-profile-wide { grid-column: 1/-1; }
.customer-profile-form > button { justify-self: start; min-height: 48px; padding: 0 22px; border: 0; border-radius: 4px; background: #ed0000; color: #fff; font: 800 12px var(--font); cursor: pointer; text-transform: uppercase; }
.customer-profile-form > button:disabled { opacity: .55; cursor: wait; }
.customer-dashboard-empty { display: grid; justify-items: center; gap: 9px; padding: clamp(30px,5vw,58px) 24px; border: 1px dashed #bac3d4; border-radius: 10px; background: #fff; color: #667085; text-align: center; }
.customer-dashboard-empty.compact { padding: 30px 22px; }
.customer-dashboard-empty h3 { margin: 0; color: #071b58; font-size: 20px; }
.customer-dashboard-empty p { max-width: 560px; margin: 0; line-height: 1.65; }
.customer-empty-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: #eef2fb; color: #ed0000; font-size: 24px; font-weight: 800; }
.customer-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.customer-empty-actions a { padding: 11px 16px; border: 1px solid #cbd2df; border-radius: 5px; background: #fff; color: #071b58; font-size: 12px; font-weight: 800; text-decoration: none; text-transform: uppercase; }
.customer-empty-actions a:first-child { border-color: #ed0000; background: #ed0000; color: #fff; }
.customer-page-heading,.shipment-detail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.customer-page-heading > div > span,.shipment-detail-head p,.customer-dashboard-head > div > span { color: #ed0000; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.customer-page-heading h1,.shipment-detail-head h1 { margin: 6px 0; color: #071b58; font-size: clamp(28px,3vw,42px); line-height: 1.05; }
.customer-page-heading p,.shipment-detail-head > div > span { margin: 0; color: #667085; line-height: 1.55; }
.customer-back-button { padding: 9px 12px; border: 1px solid #cbd2df; border-radius: 5px; background: #fff; color: #092577; font: 800 12px var(--font); cursor: pointer; white-space: nowrap; }
.customer-back-button:hover { border-color: #092577; color: #ed0000; }
.shipment-detail-head > div > .customer-back-button { margin-bottom: 12px; }
.shipment-detail-head[hidden] { display: none; }
.shipment-detail-head-actions { display: flex; gap: 10px; }
.shipment-detail-head-actions > * { min-height: 42px; padding: 11px 16px; border: 1px solid #cbd2df; border-radius: 5px; background: #fff; color: #092577; font: 800 11px var(--font); text-decoration: none; text-transform: uppercase; cursor: pointer; }
.shipment-detail-head-actions button { border-color: #ed0000; background: #ed0000; color: #fff; }
.customer-shipment-section { margin-top: 28px; }
.customer-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.customer-section-heading h2 { margin: 0 0 3px; color: #071b58; font-size: 18px; }
.customer-section-heading p { margin: 0; color: #7b8499; font-size: 12px; }
.customer-section-heading > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #071b58; color: #fff; font-size: 12px; font-weight: 800; }
.customer-shipment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.customer-shipment-card { display: flex; flex-direction: column; cursor: default; }
.customer-shipment-card:hover { transform: none; }
.customer-preview-label { color: #7b8499; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.customer-shipment-reference { color: #071b58; font-size: 18px; letter-spacing: .02em; }
.customer-shipment-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; min-height: 0; margin: 18px 0; padding: 14px; border-radius: 6px; background: #f4f6fa; color: #071b58; font-size: 13px; font-weight: 800; }
.customer-shipment-route span:last-child { text-align: right; }
.customer-shipment-route i { color: #ed0000; font-size: 18px; font-style: normal; }
.customer-shipment-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 0 0 18px; }
.customer-shipment-meta div { min-width: 0; }
.customer-shipment-meta dt { color: #8a93a6; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.customer-shipment-meta dd { margin: 4px 0 0; overflow-wrap: anywhere; color: #334155; font-size: 12px; font-weight: 700; }
.customer-progress-label { margin-top: 7px; color: #7b8499; font-size: 10px; }
.customer-open-shipment { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 13px 15px; border-radius: 5px; background: #071b58; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.customer-open-shipment:hover { background: #ed0000; color: #fff; }
.customer-alert { width: 100%; text-align: left; }
.customer-alert span { display: grid; gap: 5px; }
.customer-alert time { flex: 0 0 auto; color: #7b8499; font-size: 11px; }
.customer-document-overview { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 13px; margin-bottom: 18px; padding: 20px 24px; border-left: 4px solid #092577; border-radius: 6px; background: #fff; box-shadow: 0 5px 18px rgba(8,28,79,.05); }
.customer-document-overview strong { color: #071b58; font-size: 32px; }
.customer-document-overview span { color: #071b58; font-size: 13px; font-weight: 800; }
.customer-document-overview p { justify-self: end; margin: 0; color: #7b8499; font-size: 12px; }
.customer-document-row { display: grid; grid-template-columns: 46px minmax(0,1fr) auto auto; }
.customer-document-row > i { display: grid; width: 40px; height: 46px; place-items: center; border-radius: 4px; background: #eef2fb; color: #092577; font: 900 9px var(--font); font-style: normal; }
.customer-document-row span small { color: #ed0000; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.customer-document-row span em { color: #7b8499; font-size: 11px; font-style: normal; }
.customer-document-row time { color: #7b8499; font-size: 11px; white-space: nowrap; }
.customer-page-heading--critical > div > span { color: #b42318; }
.customer-alert-summary { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 10px 14px; border-radius: 5px; background: #fff1f0; color: #b42318; }
.customer-alert-summary strong { font-size: 22px; }
.customer-alert-summary span { font-size: 11px; font-weight: 800; text-transform: uppercase; }
.customer-alert--critical { align-items: center; border-left-width: 5px; }
.customer-alert--critical > i { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: #fff1f0; color: #b42318; font: 900 18px var(--font); font-style: normal; }
.customer-alert--critical span small { color: #b42318; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.customer-alert--critical span em { color: #667085; font-size: 12px; font-style: normal; line-height: 1.5; }
.customer-alert--critical span u{color:#092577;font-size:10px;font-weight:800;text-decoration:none;text-transform:uppercase}
.customer-alert--critical.unread { background: #fffafa; box-shadow: 0 5px 18px rgba(180,35,24,.07); }
.customer-alert--info { border-left-color: #2563eb; }
.customer-alert--info > i { background: #eff6ff; color: #1d4ed8; }
.customer-alert--info span small { color: #1d4ed8; }
.customer-alert--warning { border-left-color: #d97706; }
.customer-alert--warning > i { background: #fffbeb; color: #b45309; }
.customer-alert--warning span small { color: #b45309; }
.customer-alert-clear { border-color: #b9dec7; background: #fbfffc; }
.customer-alert-clear .customer-empty-icon { background: #e8f7ee; color: #15803d; }
.customer-support-warm { display: grid; justify-items: center; max-width: 880px; margin: 20px auto 0; padding: clamp(34px,7vw,82px); overflow: hidden; border: 1px solid #dbe4f2; border-radius: 14px; background: radial-gradient(circle at top right,rgba(237,0,0,.08),transparent 34%),linear-gradient(145deg,#fff,#f4f7fc); box-shadow: 0 18px 50px rgba(8,28,79,.09); text-align: center; }
.customer-support-symbol { display: grid; width: 70px; height: 70px; place-items: center; margin-bottom: 20px; border-radius: 50%; background: #071b58; color: #fff; font-size: 34px; }
.customer-support-warm > p { margin: 0 0 8px; color: #ed0000; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.customer-support-warm h2 { max-width: 620px; margin: 0; color: #071b58; font-size: clamp(28px,4vw,46px); line-height: 1.08; }
.customer-support-warm > span { max-width: 650px; margin: 20px 0 28px; color: #667085; line-height: 1.7; }
.customer-support-email { width: min(100%,540px); padding: 18px 20px; border: 1px solid #d7deeb; border-radius: 7px; background: #fff; }
.customer-support-email small { display: block; margin-bottom: 6px; color: #8a93a6; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.customer-support-email a { color: #071b58; font-size: clamp(14px,2vw,19px); font-weight: 800; overflow-wrap: anywhere; }
.customer-support-compose { margin-top: 18px; padding: 14px 24px; border-radius: 5px; background: #ed0000; color: #fff; font-size: 12px; font-weight: 800; text-decoration: none; text-transform: uppercase; }
.customer-support-compose:hover { background: #071b58; color: #fff; }
.customer-profile-layout { display: grid; grid-template-columns: minmax(240px,300px) minmax(0,1fr); align-items: start; gap: 20px; }
.customer-profile-summary { padding: 28px; border-radius: 9px; background: #071b58; color: #fff; box-shadow: 0 10px 30px rgba(8,28,79,.14); }
.customer-profile-avatar { display: grid; width: 72px; height: 72px; place-items: center; margin-bottom: 20px; border: 2px solid rgba(255,255,255,.35); border-radius: 50%; background: #ed0000; font-size: 24px; font-weight: 900; }
.customer-profile-summary h2 { margin: 0 0 6px; color: #fff; font-size: 22px; }
.customer-profile-summary > p { margin: 0; color: rgba(255,255,255,.65); font-size: 12px; }
.customer-profile-summary dl { display: grid; gap: 15px; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); }
.customer-profile-summary dt { color: rgba(255,255,255,.5); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.customer-profile-summary dd { margin: 5px 0 0; color: #fff; font-size: 12px; overflow-wrap: anywhere; }
.customer-profile-stack { display: grid; min-width: 0; gap: 20px; }
.profile-form-heading span,.customer-password-card > div > span { color: #ed0000; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.profile-form-heading p { margin: 5px 0 0; color: #7b8499; font-size: 12px; font-weight: 500; text-transform: none; }
.profile-field-note { margin-top: -10px; color: #7b8499; font-size: 10px; font-weight: 500; line-height: 1.5; text-transform: none; }
.customer-profile-form input[readonly] { background: #f3f5f8; color: #778196; cursor: not-allowed; }
.profile-form-result { min-height: 20px; margin: 0; color: #15803d; font-size: 12px; font-weight: 700; }
.customer-password-card { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; padding: clamp(18px,3vw,30px); border: 1px solid #dce1eb; border-radius: 7px; background: #fff; }
.customer-password-card > div { grid-column: 1/-1; }
.customer-password-card h2 { margin: 6px 0; color: #071b58; font-size: 22px; }
.customer-password-card > div p { margin: 0; color: #7b8499; font-size: 12px; }
.customer-password-card label { display: flex; min-width: 0; flex-direction: column; color: #596579; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.customer-password-card input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; margin-top: 7px; padding: 0 13px; border: 1px solid #cbd2df; border-radius: 4px; font: 500 14px var(--font); }
.customer-password-card input:focus { outline: 3px solid rgba(9,37,119,.12); border-color: #092577; }
.customer-password-card > button { justify-self: start; min-height: 48px; padding: 0 22px; border: 0; border-radius: 4px; background: #071b58; color: #fff; font: 800 12px var(--font); cursor: pointer; text-transform: uppercase; }
.customer-password-card > button:disabled { opacity: .55; cursor: wait; }
.customer-password-card > p { grid-column: 1/-1; min-height: 20px; margin: 0; color: #b42318; font-size: 12px; font-weight: 700; }
.portal-shipment-detail .result-status { border-radius: 7px 7px 0 0; }
.portal-authenticated .tool-page .tool-card { margin: 0 0 18px; border-top-width: 3px; box-shadow: 0 8px 24px rgba(8,28,79,.08); }
.portal-authenticated .tool-page .tool-pane { padding: 18px 24px 20px; }
.portal-authenticated .tool-page .tool-pane h2 { margin: 0 0 13px; font-size: 13px; }
.portal-authenticated #track-form { grid-template-columns: minmax(320px,1fr) auto; }
.portal-authenticated #track-input { height: 48px; }
.portal-authenticated #track-form .btn { min-height: 48px; }
.portal-authenticated #track-form .hint { display: none; }

.portal-authenticated .result-panel { margin: 0; overflow: visible; }
.portal-authenticated .result-status { position: relative; padding: 20px 24px; background: #071b58; }
.portal-authenticated .result-actions { padding: 10px 18px; }
.portal-authenticated .result-body { display: block; padding: 0; background: transparent; }
.portal-authenticated .result-map { position: relative; top: auto; width: 100%; min-height: 68vh; border: 1px solid #dce1eb; box-shadow: 0 10px 35px rgba(8,28,79,.1); }
.portal-authenticated #track-map { height: 68vh; min-height: 620px; }
.portal-authenticated .result-details { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 18px; }
.portal-authenticated .detail-block { min-height: 170px; padding: 22px; box-shadow: 0 6px 20px rgba(8,28,79,.05); }
.portal-authenticated .detail-block:first-child { grid-column: 1/-1; min-height: 0; display: grid; grid-template-columns: minmax(220px,.7fr) minmax(320px,1.6fr) repeat(2,minmax(170px,.6fr)); align-items: center; gap: 18px; padding: 24px 28px; border: 0; border-left: 5px solid #ed0000; }
.portal-authenticated .detail-block:first-child h4 { margin: 0; font-size: 15px; }
.portal-authenticated .detail-block:first-child .progress-bar { height: 14px; margin: 0; }
.portal-authenticated .detail-block:first-child .hint-line { margin: 0; font-size: 14px; font-weight: 700; color: #092577; }
.portal-authenticated .detail-block:first-child .detail-row { border: 0; }
.portal-authenticated .timeline { margin-top: 18px; box-shadow: 0 6px 20px rgba(8,28,79,.05); }
.portal-authenticated .track-media { box-shadow: 0 6px 20px rgba(8,28,79,.05); }
.track-document { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-height: 92px; padding: 18px; border: 1px solid #dce1eb; background: #fff; color: #092577; text-align: left; cursor: pointer; }
.track-document strong { font-size: 13px; text-transform: capitalize; }
.track-document span { color: #667085; font-size: 12px; overflow-wrap: anywhere; }
.track-document:hover { border-color: #092577; box-shadow: 0 5px 16px rgba(8,28,79,.08); }
.track-document:disabled { opacity: .55; cursor: wait; }
.checkpoint-label { border: 0 !important; border-radius: 2px !important; padding: 4px 7px !important; background: rgba(6,25,79,.88) !important; color: #fff !important; font: 700 10px var(--font) !important; box-shadow: 0 2px 7px rgba(0,0,0,.24) !important; }
.checkpoint-label::before { border-top-color: rgba(6,25,79,.88) !important; }
.customer-map-summary { max-width: 280px; padding: 12px 14px; border-radius: 6px; background: rgba(7,27,88,.94); color: #fff; box-shadow: 0 5px 18px rgba(0,0,0,.22); }
.customer-map-summary small,.customer-map-summary b,.customer-map-summary span { display: block; }
.customer-map-summary small { margin-bottom: 3px; color: rgba(255,255,255,.68); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.customer-map-summary b { font-size: 12px; }
.customer-map-summary span { margin-top: 4px; color: rgba(255,255,255,.8); font-size: 10px; }
.tracking-page .leaflet-control-layers { border: 0; border-radius: 6px; box-shadow: 0 6px 22px rgba(7,27,88,.2); font: 600 12px var(--font); }
.tracking-page .leaflet-control-layers-expanded { min-width: 210px; padding: 12px 14px; }
.tracking-page .leaflet-popup-content { line-height: 1.55; }
.map-stale { color: #b42318; }
.map-provider-fallback{position:absolute;z-index:1000;left:12px;bottom:12px;max-width:360px;padding:10px 12px;border:1px solid #f59e0b;border-radius:6px;background:#fffbeb;color:#78350f;font-size:12px;font-weight:700;box-shadow:0 5px 18px rgba(0,0,0,.16)}
.customer-map-provenance{display:grid;gap:4px;max-width:245px;margin-top:48px;padding:10px 12px;border-radius:6px;background:rgba(7,27,88,.94);color:#fff;box-shadow:0 5px 18px rgba(0,0,0,.22);font:600 10px var(--font)}.customer-map-provenance b{display:flex;align-items:center;gap:6px;font-size:11px}.customer-map-provenance span{color:rgba(255,255,255,.78)}.customer-map-provenance .freshness-stale{color:#fde68a;font-weight:800}.map-key{width:9px;height:9px;border-radius:50%;background:#14b8a6}.map-key-estimated{background:#94a3b8;border:1px dashed #fff}.map-key-provider{background:#38bdf8}
.accessible-route-summary{position:relative;z-index:2;border-top:1px solid #dce1eb;background:#fff;color:#111827}.accessible-route-summary summary{padding:12px 14px;color:#071b58;font-weight:800;cursor:pointer}.accessible-route-summary summary:focus-visible{outline:3px solid #38bdf8;outline-offset:-3px}.accessible-route-summary>p,.accessible-route-summary ol,.accessible-route-grid{margin:0 14px 14px}.accessible-route-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.accessible-route-grid p{display:grid;gap:3px;margin:0;padding:9px;background:#f5f7fa}.accessible-route-grid span,.accessible-route-summary li span{font-size:12px;color:#5b6472}.accessible-route-summary ol{display:grid;gap:7px;padding-left:32px}.accessible-route-summary li{padding-left:3px}.accessible-route-summary li b,.accessible-route-summary li span{display:block}@media(max-width:620px){.accessible-route-grid{grid-template-columns:1fr}.customer-map-provenance{max-width:190px}.map-provider-fallback{right:12px;max-width:none}}
.customer-map-nav{display:flex;gap:5px;margin-left:42px}.customer-map-nav button{min-height:34px;padding:7px 10px;border:0;border-radius:5px;background:#071b58;color:#fff;font:700 11px var(--font);box-shadow:0 3px 10px rgba(0,0,0,.2);cursor:pointer}.customer-map-nav button:focus-visible{outline:3px solid #38bdf8;outline-offset:2px}@media(max-width:620px){.customer-map-nav{margin-left:0}.customer-map-nav button{min-height:42px}}
.customer-map-route-warning { margin-top:50px;padding:9px 11px;border:1px solid rgba(251,191,36,.5);border-radius:6px;background:rgba(7,27,88,.94);color:#fde68a;font:700 11px var(--font);box-shadow:0 5px 18px rgba(0,0,0,.24); }
.nautical-area-control { margin-top:78px !important; padding:6px; border:1px solid rgba(9,37,119,.22); border-radius:5px; background:rgba(255,255,255,.96); box-shadow:0 3px 12px rgba(7,27,88,.18); }
.nautical-area-control select { max-width:210px; min-height:34px; border:1px solid #cbd5e1; border-radius:4px; background:#fff; color:#092577; font:700 11px var(--font); cursor:pointer; }

@media (max-width: 1180px) {
  .customer-sidebar { width: 230px; }
  .portal-authenticated > main { margin-left: 230px; }
  .portal-authenticated .customer-dashbar { left: 230px; }
  .portal-authenticated .result-details { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .portal-authenticated .detail-block:first-child { grid-template-columns: 1fr 1.5fr; }
  .customer-dashboard-head { align-items: flex-start; flex-direction: column; }
  .customer-shipment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .customer-profile-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .customer-support-layout { grid-template-columns: 1fr; }
  .customer-overview-grid{grid-template-columns:1fr}.customer-overview-main .customer-shipment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .customer-profile-layout { grid-template-columns: 1fr; }
  .customer-profile-summary { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 18px; }
  .customer-profile-avatar { grid-row: 1/3; margin: 0; }
  .customer-profile-summary dl { grid-column: 1/-1; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .customer-password-card { grid-template-columns: 1fr; }
  .customer-password-card > div,.customer-password-card > p { grid-column: auto; }
}
@media (max-width: 780px) {
  .customer-sidebar { inset: auto 0 0; width: auto; height: calc(68px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid rgba(255,255,255,.14); box-shadow: 0 -8px 28px rgba(5,16,57,.18); }
  .customer-sidebar-logo { display: none; }
  .customer-sidebar nav { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); flex: 1; gap: 0; padding: 0 4px; }
  .customer-sidebar nav a { position: relative; justify-content: center; flex-direction: column; gap: 4px; min-width: 0; min-height: 64px; padding: 7px 2px 5px; border: 0; border-top: 3px solid transparent; font-size: 9px; line-height: 1; text-align: center; }
  .customer-sidebar nav a span { width: 24px; font-size: 17px; }
  .customer-sidebar nav a span svg { width: 22px; height: 22px; }
  .customer-sidebar nav a b { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .customer-sidebar nav a:hover,.customer-sidebar nav a.active { border-top-color: #ed0000; border-left-color: transparent; background: rgba(255,255,255,.08); }
  .customer-sidebar-foot { display: none; }
  .portal-authenticated > main { margin-left: 0; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .portal-authenticated .customer-dashbar { left: 0; min-height: 60px; padding: 0 12px; }
  .portal-authenticated .customer-dashbar > div { min-width: 0; gap: 8px; }
  .portal-authenticated .customer-dashbrand { font-size: 11px; white-space: nowrap; }
  .portal-authenticated .customer-dashbar #customer-logout { padding: 9px 8px; border-left: 0; font-size: 10px; white-space: nowrap; }
  .portal-authenticated .customer-dashbar nav a { display: none; }
  .portal-authenticated .tool-page { padding: 76px 12px 24px; }
  .portal-authenticated #track-form { grid-template-columns: 1fr; }
  .portal-authenticated .result-details { grid-template-columns: 1fr; }
  .portal-authenticated .detail-block:first-child { grid-template-columns: 1fr; }
  .portal-authenticated #track-map { min-height: 500px; height: 66vh; }
  .customer-dashboard-stats { width: 100%; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .customer-stat { min-width: 0; padding: 12px; }
  .customer-dashboard-tabs { overflow-x: auto; }
  .customer-dashboard-tab { flex: 0 0 auto; }
  .customer-shipment-grid,.customer-profile-form { grid-template-columns: 1fr; }
  .customer-page-heading,.shipment-detail-head { align-items: flex-start; flex-direction: column; }
  .shipment-detail-head-actions { width: 100%; flex-wrap: wrap; }
  .customer-shipment-route { gap: 7px; padding: 12px 10px; font-size: 11px; }
  .customer-shipment-meta { grid-template-columns: 1fr; }
  .customer-profile-form .wide,.customer-profile-form .customer-profile-wide { grid-column: auto; }
  .customer-profile-form { gap: 14px; padding: 18px 14px; }
  .customer-profile-form input,.customer-profile-form select,.customer-profile-form textarea { font-size: 16px; }
  .customer-profile-form > button { width: 100%; justify-self: stretch; }
  .customer-document-overview { grid-template-columns: auto 1fr; padding: 17px; }
  .customer-document-attention{grid-template-columns:1fr}
  .customer-document-overview p { grid-column: 1/-1; justify-self: start; }
  .customer-document-row { grid-template-columns: 40px minmax(0,1fr); align-items: start; }
  .customer-document-row time,.customer-document-row b { grid-column: 2; justify-self: start; }
  .customer-alert--critical { display: grid; grid-template-columns: 38px minmax(0,1fr); }
  .customer-alert--critical time { grid-column: 2; }
  .customer-support-warm { padding: 34px 20px; }
  .customer-overview-actions{grid-template-columns:1fr}.customer-overview-main .customer-shipment-grid{grid-template-columns:1fr}
  .customer-profile-summary { display: block; padding: 22px; }
  .customer-profile-avatar { margin-bottom: 16px; }
  .customer-profile-summary dl { grid-template-columns: 1fr; }
  .customer-password-card { gap: 14px; padding: 18px 14px; }
  .customer-password-card input { font-size: 16px; }
  .customer-password-card > button { width: 100%; justify-self: stretch; }
  .customer-alert { flex-direction: column; }
  .customer-map-summary { max-width: 205px; padding: 9px 11px; }
  .customer-map-summary b { font-size: 10px; }
}
@media (max-width: 560px) {
  .customer-auth-gate.shipment-login-prompt { padding: 18px; }
  .customer-auth-gate.shipment-login-prompt .customer-login-card { width: min(100%,430px); padding: 26px 20px; border-radius: 14px; }
  .customer-auth-gate.shipment-login-prompt .customer-login-card h1 { font-size: 2rem; }
  .customer-auth-gate.shipment-login-prompt .customer-login-card > p:not(.customer-login-kicker) { margin: 12px 0 20px; }
  .customer-auth-gate.shipment-login-prompt .customer-login-card input { height: 50px; margin-bottom: 14px; font-size: 16px; }
  .customer-auth-gate.shipment-login-prompt .customer-login-card button { min-height: 52px; }
  .customer-auth-gate.shipment-login-prompt .customer-login-card aside { margin-top: 16px; }
  .customer-signup-modal { padding: 12px; }
  .customer-signup-card { max-height: calc(100dvh - 24px); padding: 30px 18px 22px; border-radius: 13px; }
  .customer-signup-grid { grid-template-columns: 1fr; gap: 13px; }
  .customer-signup-grid label.wide { grid-column: auto; }
  .customer-signup-invite { align-items: stretch; flex-direction: column; }
  .customer-dashboard-head h1 { font-size: 25px; }
  .customer-dashboard-stats { gap: 7px; }
  .customer-dashboard-stats strong { min-width: 0; padding: 11px 7px; font-size: 20px; }
  .customer-dashboard-stats small { font-size: 8px; }
  .customer-shipment-card { padding: 16px; }
  .customer-shipment-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .shipment-detail-head-actions > * { flex: 1; text-align: center; }
  .portal-authenticated #track-map { min-height: 420px; height: 58vh; }
}
.source-chip{display:inline-flex;align-items:center;padding:2px 6px;margin-left:5px;border:1px solid #cbd5e1;border-radius:999px;color:#475569;background:#f8fafc;font-size:9px;font-weight:800;letter-spacing:.08em;vertical-align:middle}