/* ============================================
   ILS — International Logistics Services
   Hero + Navbar
   ============================================ */

:root {
  --color-primary: #1a56db;          /* main blue (accent) */
  --color-primary-dark: #0b3b8c;     /* deep brand blue */
  --color-primary-darker: #06234f;
  --heading: #06234f;                /* heading text — flips light in dark mode */
  --color-text: #0a1a3a;
  --color-text-soft: #4b5a72;
  --color-muted: #8a96ab;
  --color-bg: #eef3fb;
  --color-bg-soft: #f5f8fd;
  --color-white: #ffffff;
  --color-border: #d8e1ee;

  --surface: #ffffff;                /* card / panel surface */
  --surface-2: #f6f9fd;              /* recessed surface (inputs etc.) */

  /* page background gradient + hero/section overlay tint (light) */
  --page-bg: linear-gradient(180deg, #eef3fb 0%, #dde8f7 60%, #cddff3 100%);
  --overlay-rgb: 238, 243, 251;
  --hero-overlay-rgb: 8, 26, 58;     /* dark navy scrim for page heroes */
  --navbar-scrolled-bg: rgba(255, 255, 255, 0.96);

  --radius-pill: 999px;
  --radius-md: 12px;

  --shadow-sm: 0 4px 14px rgba(10, 26, 58, 0.08);
}


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

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--color-text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

ul {
  list-style: none;
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 22px 0;
  background: transparent;
  box-shadow: none;
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease, backdrop-filter 0.3s ease;
}

.navbar.is-scrolled {
  background: var(--navbar-scrolled-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px rgba(11, 59, 140, 0.12);
  padding: 14px 0;
}

.navbar.is-scrolled .nav-logo img {
  height: 44px;
  transition: height 0.3s ease;
}

.nav-logo img {
  transition: height 0.3s ease;
}

.nav-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.nav-logo img {
  height: 52px;
  width: auto;
  display: block;
}

.nav-menu {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.nav-menu ul {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-menu a {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

.nav-menu a:hover {
  color: var(--color-primary);
}

.nav-menu .caret {
  font-size: 10px;
  transform: rotate(90deg);
  display: inline-block;
  color: var(--color-muted);
  transition: transform 0.2s ease;
}

.nav-menu a:hover .caret {
  color: var(--color-primary);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 6px 18px rgba(26, 86, 219, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.nav-cta:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(26, 86, 219, 0.45);
}

.nav-cta .arrow {
  font-size: 18px;
  line-height: 1;
}

.nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.nav-burger span {
  width: 24px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
}

/* ============================================
   NAVBAR DROPDOWNS (Destinations / Company)
   ============================================ */
.nav-menu li.has-submenu {
  position: relative;
}

.nav-menu li.has-submenu > a .caret {
  transition: transform 0.25s ease, color 0.25s ease;
}

.nav-menu li.has-submenu:hover > a .caret,
.nav-menu li.has-submenu:focus-within > a .caret {
  transform: rotate(90deg) translateX(2px);
  color: var(--color-primary);
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  padding-top: 18px;     /* invisible hover-bridge to parent link */
}

.submenu-inner {
  background: var(--surface);
  border-radius: 18px;
  border: 1px solid var(--color-border);
  box-shadow: 0 22px 60px rgba(11, 59, 140, 0.18);
  padding: 14px;
  min-width: 260px;
}

.nav-menu li.has-submenu:hover > .submenu,
.nav-menu li.has-submenu:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* generic submenu link row */
.submenu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--color-text);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.submenu-item:hover {
  background: rgba(26, 86, 219, 0.08);
  color: var(--color-primary);
  transform: translateX(2px);
}

.submenu-item .submenu-arrow {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}

.submenu-item:hover .submenu-arrow {
  color: var(--color-primary);
  transform: translateX(4px);
}

/* destinations submenu — 2-column grid with icons */
.submenu-destinations .submenu-inner {
  min-width: 520px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 16px;
}

.submenu-destinations .submenu-item {
  padding: 12px;
}

.submenu-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(26, 86, 219, 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.submenu-icon svg {
  width: 18px;
  height: 18px;
}

.submenu-item:hover .submenu-icon {
  background: var(--color-primary);
  color: #ffffff;
  transform: rotate(-4deg) scale(1.05);
}

.submenu-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.submenu-label {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.005em;
}

.submenu-item:hover .submenu-label {
  color: var(--color-primary);
}

.submenu-sub {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-muted);
  margin-top: 2px;
  letter-spacing: 0.01em;
}

/* company submenu — single column */
.submenu-company .submenu-inner {
  min-width: 220px;
}

/* solutions submenu — 2-column grid like destinations */
.submenu-solutions .submenu-inner {
  min-width: 520px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 16px;
}

.submenu-solutions .submenu-item {
  padding: 12px;
}

/* services submenu — 2-column grid (4 items) */
.submenu-services .submenu-inner {
  min-width: 520px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 16px;
}

.submenu-services .submenu-item {
  padding: 12px;
}

/* anchor the right-most dropdown to right edge so it doesn't overflow viewport */
.nav-menu li.has-submenu.align-right > .submenu {
  left: auto;
  right: 0;
}

/* small-screen tweak — drop the wide grids to 1 column */
@media (max-width: 980px) {
  .submenu-destinations .submenu-inner,
  .submenu-solutions .submenu-inner,
  .submenu-services .submenu-inner {
    grid-template-columns: 1fr;
    min-width: 280px;
  }
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  /* center the content so the whole hero fits within one screen */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 128px;
  padding-bottom: 72px;
  overflow: hidden;
  background-color: #eef3fb;
}

/* slide stack — each slide holds a single background image */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  will-change: opacity;
}

.hero-slide.is-active {
  opacity: 1;
}

/* soft white-to-transparent overlay so left-side text stays readable */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(var(--overlay-rgb), 0.96) 0%,
    rgba(var(--overlay-rgb), 0.88) 34%,
    rgba(var(--overlay-rgb), 0.58) 50%,
    rgba(var(--overlay-rgb), 0.18) 68%,
    rgba(var(--overlay-rgb), 0) 82%
  );
  z-index: 1;
  pointer-events: none;
}

.hero-container {
  position: relative;
  z-index: 3;
  width: 100%;          /* span full width so text stays left-aligned (not centered by flex parent) */
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  align-items: center;
}

/* left content */
.hero-content {
  position: relative;
  z-index: 3;
  max-width: 560px;
  margin-top: 40px;
}

/* text slides — stacked in same grid cell, fade between */
.hero-texts {
  display: grid;
  margin-bottom: 56px;   /* extra gap so the CTA buttons aren't cramped under the copy */
}

.hero-text {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.9s ease, transform 0.9s ease, visibility 0s linear 0.9s;
}

.hero-text.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.9s ease, transform 0.9s ease, visibility 0s linear 0s;
}

.hero-title {
  font-size: clamp(40px, 5vw, 76px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--heading);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85), 0 0 12px rgba(255, 255, 255, 0.55);
}

.hero-title .line {
  display: block;
  white-space: nowrap;
}

.hero-title .line.accent {
  color: var(--color-primary-dark);
}

.hero-divider {
  display: block;
  width: 56px;
  height: 4px;
  background: var(--color-primary);
  border-radius: 4px;
  margin: 26px 0 26px;
}

.hero-subtitle {
  font-size: 17px;
  line-height: 1.55;
  color: #2c3a52;
  font-weight: 500;
  max-width: 480px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 72px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: none;
  font-family: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 22px rgba(26, 86, 219, 0.4);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(26, 86, 219, 0.5);
}

.btn-primary .arrow {
  font-size: 18px;
}

.btn-ghost {
  color: var(--color-text);
  padding: 8px 4px;
}

.btn-ghost .play-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(10, 26, 58, 0.12);
  transition: transform 0.2s ease;
}

.btn-ghost:hover {
  color: var(--color-primary);
}

.btn-ghost:hover .play-icon {
  transform: scale(1.08);
}

/* feature badges row */
.hero-features {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 36px;
  align-items: flex-start;
  padding-top: 32px;
  border-top: 1px solid rgba(10, 26, 58, 0.08);
}

/* ---------- Leadership trust badge (hero) ---------- */
.hero-leaders {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  padding: 14px 20px 14px 16px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(26, 86, 219, 0.14);
  border-radius: 60px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 22px rgba(11, 59, 140, 0.08);
  width: fit-content;
  max-width: 100%;
}
.hero-leaders-avatars {
  display: flex;
  flex-shrink: 0;
}
.hero-leader-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-size: cover;
  background-position: center 12%;
  background-repeat: no-repeat;
  border: 3px solid #ffffff;
  box-shadow: 0 3px 10px rgba(11, 59, 140, 0.18);
  display: inline-block;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s linear 0.3s;
}
.hero-leader-avatar + .hero-leader-avatar {
  margin-left: -14px;
}
.hero-leader-avatar:nth-child(1) { z-index: 3; }
.hero-leader-avatar:nth-child(2) { z-index: 2; }
.hero-leader-avatar:nth-child(3) { z-index: 1; }
.hero-leader-avatar:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 18px rgba(11, 59, 140, 0.28);
  z-index: 10;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero-leaders-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hero-leaders-text strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--heading);
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.hero-leaders-text span {
  font-size: 12.5px;
  color: var(--color-muted);
  line-height: 1.35;
}

@media (max-width: 720px) {
  .hero-leaders { gap: 14px; padding: 12px 16px 12px 12px; }
  .hero-leader-avatar { width: 40px; height: 40px; border-width: 2px; }
  .hero-leader-avatar + .hero-leader-avatar { margin-left: -12px; }
  .hero-leaders-text strong { font-size: 13px; }
  .hero-leaders-text span { font-size: 12px; }
}

.feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.feature-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  background: rgba(26, 86, 219, 0.08);
}

.feature-icon svg {
  width: 22px;
  height: 22px;
}

.feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.feature-text strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.feature-text span {
  font-size: 12.5px;
  color: var(--color-text-soft);
  line-height: 1.45;
}


/* slide indicator dots — bottom-right of hero */
.hero-dots {
  position: absolute;
  bottom: 100px;
  right: 60px;
  display: flex;
  gap: 10px;
  z-index: 4;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(11, 59, 140, 0.25);
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
}

.hero-dot:hover {
  background: rgba(11, 59, 140, 0.5);
}

.hero-dot.is-active {
  background: var(--color-primary);
  width: 28px;
  border-radius: 6px;
}

/* ============================================
   SERVICES SECTION (white) — straight flat top
   with soft blue gradient + dot grid at top
   ============================================ */
.services-section {
  position: relative;
  background: var(--surface);
  padding: 140px 0 120px;
  z-index: 2;
  overflow: hidden;
}

/* soft blue gradient fade at the top */
.services-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 360px;
  background: linear-gradient(
    180deg,
    rgba(218, 231, 247, 0.7) 0%,
    rgba(238, 243, 251, 0.35) 45%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* subtle dotted grid overlay — fades out as it goes down */
.services-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 420px;
  background-image: radial-gradient(circle, rgba(26, 86, 219, 0.12) 1px, transparent 1.5px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

.services-container {
  position: relative;
  z-index: 1;
}

.services-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 60px;
}

.services-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}

.services-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.services-title {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin-bottom: 18px;
}

.services-title .accent {
  color: var(--color-primary);
}

.services-subtitle {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-soft);
}

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

.service-card {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 32px 28px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(11, 59, 140, 0.10);
  border-color: rgba(26, 86, 219, 0.3);
}

.service-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(26, 86, 219, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 22px;
}

.service-icon svg {
  width: 28px;
  height: 28px;
}

.service-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.service-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-soft);
}

/* ============================================
   SCOOPED CUT SECTION (under services)
   Rounded top with a circular dip in the middle
   where the ILS globe icon sits — overlaps the
   white services section above so its rounded
   corners reveal the "white cutting".
   ============================================ */
.cut-wrap {
  position: relative;
  margin-top: 0;
  background: var(--surface);
  z-index: 2;
}

.cut-globe {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: auto;
  object-fit: contain;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 14px 30px rgba(11, 59, 140, 0.28));
}

.cut-section {
  position: relative;
  background: var(--color-primary-darker);
  color: var(--color-white);
  padding: 170px 0 120px;
  border-radius: 80px 80px 0 0;
  -webkit-mask-image: radial-gradient(circle 110px at 50% 0, transparent 110px, #000 111px);
          mask-image: radial-gradient(circle 110px at 50% 0, transparent 110px, #000 111px);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

.cut-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 60px;
  text-align: center;
}

.cut-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6fa0ff;
  margin-bottom: 18px;
}

.cut-title {
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}

.cut-title .accent {
  color: #6fa0ff;
}

.cut-subtitle {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.75);
  max-width: 680px;
  margin: 0 auto;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1180px) {
  .nav-container,
  .hero-container {
    padding: 0 32px;
  }

  .nav-menu ul {
    gap: 26px;
  }
}

@media (max-width: 980px) {
  .nav-menu {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .nav-burger {
    display: flex;
  }

  .hero {
    padding-top: 140px;
    background-position: center;
  }

  /* Reduce whitewash so images actually show on tablet */
  .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(var(--overlay-rgb), 0.82) 0%,
      rgba(var(--overlay-rgb), 0.70) 35%,
      rgba(var(--overlay-rgb), 0.45) 65%,
      rgba(var(--overlay-rgb), 0.22) 100%
    );
  }

  /* Show subject-matter (truck, plane, etc.) better — center-ish focal point */
  .hero-slide {
    background-position: center 55%;
  }

  .hero-dots {
    bottom: 90px;
    right: 32px;
  }

  .services-section {
    padding: 100px 0 100px;
  }

  .services-container {
    padding: 0 32px;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .services-header {
    margin-bottom: 48px;
  }

  .cut-wrap {
    margin-top: 0;
  }

  .cut-globe {
    width: 110px;
    height: auto;
    top: -45px;
  }

  .cut-section {
    padding: 130px 0 90px;
    border-radius: 60px 60px 0 0;
    -webkit-mask-image: radial-gradient(circle 85px at 50% 0, transparent 85px, #000 86px);
            mask-image: radial-gradient(circle 85px at 50% 0, transparent 85px, #000 86px);
  }

  .cut-container {
    padding: 0 32px;
  }
}

@media (max-width: 640px) {
  .nav-container,
  .hero-container {
    padding: 0 20px;
  }

  .nav-logo img {
    height: 42px;
  }

  /* ---- Hero mobile image improvements ---- */

  /* Even lighter overlay on phones — content card provides readability */
  .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(var(--overlay-rgb), 0.55) 0%,
      rgba(var(--overlay-rgb), 0.38) 40%,
      rgba(var(--overlay-rgb), 0.18) 70%,
      rgba(var(--overlay-rgb), 0.06) 100%
    );
  }

  /* Show lower half of images (where trucks/planes/subjects sit) */
  .hero-slide {
    background-position: center 65%;
  }

  /* Frosted-glass card so text stays readable over the now-visible image */
  .hero-content {
    background: rgba(255, 255, 255, 0.60);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(26, 86, 219, 0.10);
    border-radius: 20px;
    padding: 24px 20px 20px;
    max-width: 100%;
    margin-top: 0;
    /* Prevents inactive-slide ghost text from rendering outside this layer */
    isolation: isolate;
  }

  /* Prevent inactive slide text ghosting inside the card */
  .hero-texts {
    isolation: isolate;
    overflow: hidden;
  }

  /* Tighten spacing inside the card on mobile */
  .hero-divider { margin: 16px 0; }
  .hero-subtitle { max-width: 100%; }

  /* ---- end hero mobile ---- */

  .hero-features {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hero-actions {
    gap: 18px;
    margin-bottom: 50px;
  }

  .btn-primary {
    padding: 14px 24px;
  }

  .hero-dots {
    bottom: 80px;
    right: 20px;
  }

  .services-section {
    padding: 80px 0 80px;
  }

  .services-container {
    padding: 0 20px;
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .service-card {
    padding: 26px 24px;
  }

  .cut-wrap {
    margin-top: 0;
  }

  .cut-globe {
    width: 90px;
    height: auto;
    top: -38px;
  }

  .cut-section {
    padding: 100px 0 70px;
    border-radius: 40px 40px 0 0;
    -webkit-mask-image: radial-gradient(circle 65px at 50% 0, transparent 65px, #000 66px);
            mask-image: radial-gradient(circle 65px at 50% 0, transparent 65px, #000 66px);
  }

  .cut-container {
    padding: 0 20px;
  }
}

/* ============================================================
   ==                                                        ==
   ==  INNER PAGES (Services / Solutions / etc.)             ==
   ==                                                        ==
   ============================================================ */

/* shared container */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 60px;
}

/* shared section header */
.section-header {
  max-width: 760px;
  margin: 0 auto 64px;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.eyebrow-light {
  color: #7eb3ff;
}

.section-title {
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin-bottom: 20px;
}

.section-title .accent {
  color: var(--color-primary);
}

.section-subtitle {
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text-soft);
}

/* ============================================
   PAGE HERO (Services / Solutions)
   ============================================ */
.page-hero {
  position: relative;
  min-height: 88vh;
  padding: 180px 0 220px;
  overflow: hidden;
  background-color: #eef3fb;
  display: flex;
  align-items: center;
}

.page-hero-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  z-index: 0;
  animation: heroZoom 18s ease-in-out infinite alternate;
}

@keyframes heroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  /* White-to-transparent fade — same style as the home hero. Light on the
     left where the copy sits, clearing to the right so the photo shows. */
  background: linear-gradient(
    90deg,
    rgba(var(--overlay-rgb), 0.96) 0%,
    rgba(var(--overlay-rgb), 0.88) 34%,
    rgba(var(--overlay-rgb), 0.58) 50%,
    rgba(var(--overlay-rgb), 0.18) 68%,
    rgba(var(--overlay-rgb), 0) 82%
  );
  z-index: 1;
  pointer-events: none;
}

.page-hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 880px;
  /* left edge aligned to the logo / page content gutter (1280 base;
     widened to match the navbar at large breakpoints below) */
  margin: 0 auto 0 max(60px, calc((100% - 1280px) / 2 + 60px));
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  /* No card — copy sits directly on the left-to-right white fade, like home */
}

.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 28px;
  color: var(--color-text-soft);
}

.breadcrumb a {
  color: var(--color-text-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.breadcrumb-divider {
  color: var(--color-muted);
}

.breadcrumb-current {
  color: var(--color-primary);
}

.page-hero-title {
  font-size: clamp(38px, 4.2vw, 60px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--heading);
  max-width: 100%;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85), 0 0 12px rgba(255, 255, 255, 0.55);
}

.page-hero-title .accent {
  color: var(--color-primary-dark);
}

.page-hero-divider {
  display: block;
  width: 64px;
  height: 4px;
  background: var(--color-primary);
  border-radius: 4px;
  margin: 28px 0;
}

.page-hero-subtitle {
  font-size: 17px;
  line-height: 1.65;
  color: #2c3a52;
  font-weight: 500;
  max-width: 100%;
  margin-bottom: 24px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

.page-hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 20px;   /* breathing room above the buttons */
}

/* Secondary hero action — outlined navy pill on the light glass card */
.page-hero .btn-ghost {
  color: var(--color-primary-dark);
  border: 1.5px solid rgba(26, 86, 219, 0.35);
  border-radius: var(--radius-pill);
  padding: 13px 26px;
}
.page-hero .btn-ghost:hover {
  color: var(--color-primary);
  background: rgba(26, 86, 219, 0.08);
  border-color: var(--color-primary);
}

/* Centered hero variant — content centered horizontally */
.page-hero--centered {
  align-items: flex-start;
  min-height: 100vh;
  height: 100vh;
  padding-top: 170px;
  padding-bottom: 120px;
  text-align: center;
}
.page-hero--centered .page-hero-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 880px;
  /* margin inherited from .page-hero-container so it tracks the logo gutter */
}
/* Narrow variant — Organization pages (Introduction, Network, Team): keep the
   hero copy to a comfortable, readable line length */
.page-hero--narrow .page-hero-container { max-width: 600px; }

.page-hero--centered .breadcrumb { justify-content: flex-start; }
.page-hero--centered .page-hero-title { max-width: 100%; margin: 0; }
.page-hero--centered .page-hero-divider { margin: 28px 0; }
.page-hero--centered .page-hero-subtitle { max-width: 100%; margin: 0; }
.page-hero--centered .page-hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(var(--overlay-rgb), 0.96) 0%,
    rgba(var(--overlay-rgb), 0.88) 34%,
    rgba(var(--overlay-rgb), 0.58) 50%,
    rgba(var(--overlay-rgb), 0.18) 68%,
    rgba(var(--overlay-rgb), 0) 82%
  );
}

/* Bottom-anchored variant — content sits at bottom over a bottom-only gradient,
   keeping the hero image fully visible up top */
.page-hero--bottom {
  align-items: flex-end;
  padding-top: 140px;
  padding-bottom: 40px;
}
.page-hero--bottom .page-hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(var(--overlay-rgb), 0.96) 0%,
    rgba(var(--overlay-rgb), 0.88) 34%,
    rgba(var(--overlay-rgb), 0.58) 50%,
    rgba(var(--overlay-rgb), 0.18) 68%,
    rgba(var(--overlay-rgb), 0) 82%
  );
}

/* Mid-anchored variant — content vertically centered over a uniform white
   wash so the navy title stays readable across the whole hero image
   (used on the Organization pages: Introduction, Network, Management) */
.page-hero--mid {
  align-items: center;
  padding-top: 170px;
  padding-bottom: 120px;
}
.page-hero--mid .page-hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(var(--overlay-rgb), 0.96) 0%,
    rgba(var(--overlay-rgb), 0.88) 34%,
    rgba(var(--overlay-rgb), 0.58) 50%,
    rgba(var(--overlay-rgb), 0.18) 68%,
    rgba(var(--overlay-rgb), 0) 82%
  );
}

@media (max-width: 980px) {
  .page-hero--centered { padding-top: 160px; padding-bottom: 90px; min-height: 100vh; height: 100vh; }
  .page-hero--bottom { padding-top: 160px; padding-bottom: 28px; }
}

/* floating quick stats over page hero bottom */
.page-hero-stats {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--surface);
  border-radius: 24px;
  box-shadow: 0 22px 60px rgba(11, 59, 140, 0.16);
  padding: 36px 20px;
  width: calc(100% - 120px);
  max-width: 1160px;
}

/* Three-stat variant (e.g. Services hero) */
.page-hero-stats--3 {
  grid-template-columns: repeat(3, 1fr);
}
.page-hero-stats--3 .hero-stat:nth-child(3) { border-right: none; }

/* The stats card is centred with `transform: translate(-50%, 50%)`. It also
   carries the `.reveal` scroll-in class, whose generic rules (translateY(36px)
   → none) would otherwise clobber that transform and shove the card off the
   right edge. Re-assert the centring transform for both reveal states so the
   card stays put while it animates in. Higher specificity wins over .reveal. */
.page-hero-stats.reveal { transform: translate(-50%, calc(50% + 36px)); }
.page-hero-stats.reveal.is-visible { transform: translate(-50%, 50%); }

.hero-stat {
  text-align: center;
  padding: 0 24px;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-stat:last-child {
  border-right: none;
}

.hero-stat-num {
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 800;
  color: var(--heading);
  line-height: 1;
  letter-spacing: -0.02em;
  display: inline-block;
}

.hero-stat-suffix {
  display: inline-block;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  color: var(--color-primary);
  margin-left: 2px;
  vertical-align: top;
}

.hero-stat-label {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-soft);
  text-transform: uppercase;
}

/* ============================================
   SERVICES OVERVIEW (6-card grid)
   ============================================ */
.services-overview {
  padding: 200px 0 120px;
  background: var(--surface);
}

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

.overview-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 38px 32px;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease, border-color 0.4s ease;
  overflow: hidden;
}

.overview-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.overview-card > * {
  position: relative;
  z-index: 1;
  transition: color 0.4s ease;
}

.overview-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(11, 59, 140, 0.18);
  border-color: transparent;
}

.overview-card:hover::before {
  opacity: 1;
}

.overview-card:hover .overview-card-title,
.overview-card:hover .overview-card-desc,
.overview-card:hover .overview-card-link {
  color: #ffffff;
}

.overview-card:hover .overview-card-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.overview-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(26, 86, 219, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 26px;
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.overview-card:hover .overview-card-icon {
  transform: scale(1.08) rotate(-4deg);
}

.overview-card-icon svg {
  width: 30px;
  height: 30px;
}

.overview-card-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.overview-card-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-soft);
  margin-bottom: 22px;
}

.overview-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.overview-card-link .arrow {
  transition: transform 0.3s ease;
}

.overview-card:hover .overview-card-link .arrow {
  transform: translateX(6px);
}

/* ============================================
   SERVICE / SOLUTION DETAIL SECTIONS
   ============================================ */
.service-detail {
  padding: 110px 0;
}

.service-detail-light {
  background: var(--surface);
}

.service-detail-tint {
  background: #f5f8fd;
}

.service-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.service-detail-grid.reverse .service-detail-media {
  order: 2;
}

.service-detail-grid.reverse .service-detail-content {
  order: 1;
}

.service-detail-media {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(11, 59, 140, 0.18);
  transition: transform 0.6s ease;
}

.service-detail-media:hover {
  transform: translateY(-6px);
}

.service-detail-media img {
  display: block;
  width: 100%;
  height: 460px;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.service-detail-media:hover img {
  transform: scale(1.05);
}

.service-detail-badge {
  position: absolute;
  top: 24px;
  left: 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 12px 20px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.badge-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.badge-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-soft);
}

.service-detail-content .eyebrow {
  margin-bottom: 14px;
}

.service-detail-title {
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin-bottom: 22px;
}

.service-detail-title .accent {
  color: var(--color-primary);
}

.service-detail-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-soft);
  margin-bottom: 28px;
}

.feature-list {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-text);
}

.feature-list .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(26, 86, 219, 0.12);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================
   PROCESS SECTION — STEP-ANIMATION STYLE
   Connected stepper with gradient-filled numbered
   circles, a glowing progress line behind them,
   and a pulse on hover.
   ============================================ */
.process-section {
  padding: 130px 0;
  background: var(--color-bg-soft);
  position: relative;
  overflow: hidden;
}

.process-section::before {
  content: '';
  position: absolute;
  top: -120px;
  left: -120px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(26, 86, 219, 0.10) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.process-section .container,
.process-section .section-header { position: relative; z-index: 1; }

.process-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding-top: 24px;
}

/* horizontal connector line behind the circles */
.process-grid::before {
  content: '';
  position: absolute;
  top: 64px;            /* aligns with circle center */
  left: 12.5%;
  right: 12.5%;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(26, 86, 219, 0.20) 0%,
    rgba(26, 86, 219, 0.55) 50%,
    rgba(26, 86, 219, 0.20) 100%);
  border-radius: 999px;
  z-index: 0;
}

/* animated progress sheen — sweeps along the line */
.process-grid::after {
  content: '';
  position: absolute;
  top: 64px;
  left: 12.5%;
  width: 14%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%);
  border-radius: 999px;
  z-index: 1;
  animation: process-sheen 6s ease-in-out infinite;
}

@keyframes process-sheen {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(530%); opacity: 0; }
}

.process-step {
  position: relative;
  z-index: 2;
  background: transparent;
  border: none;
  padding: 0 12px;
  text-align: center;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}

.process-step:hover {
  transform: translateY(-8px);
  box-shadow: none;
}

/* numbered circle — sits ON the line, white border so the line is hidden behind */
.process-num {
  position: relative;
  width: 86px;
  height: 86px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  box-shadow: 0 14px 30px rgba(26, 86, 219, 0.32),
              0 0 0 8px var(--color-bg-soft);     /* white halo erases line behind */
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease;
  opacity: 0.92;
}

.process-step:hover .process-num {
  opacity: 1;
  transform: scale(1.08);
  animation: process-pulse 1.6s ease-out;
}

@keyframes process-pulse {
  0%   { box-shadow: 0 14px 30px rgba(26, 86, 219, 0.32), 0 0 0 8px var(--color-bg-soft), 0 0 0 8px rgba(26, 86, 219, 0.45); }
  100% { box-shadow: 0 14px 30px rgba(26, 86, 219, 0.32), 0 0 0 8px var(--color-bg-soft), 0 0 0 32px rgba(26, 86, 219, 0); }
}

/* per-step entrance: number scales in, then a tiny bounce */
.process-step.reveal .process-num {
  transform: scale(0.4);
  transition: transform 0.7s cubic-bezier(.34, 1.56, .64, 1);
}

.process-step.reveal.is-visible .process-num {
  transform: scale(1);
}

.process-step:hover.reveal.is-visible .process-num {
  transform: scale(1.08);
}

.process-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--heading);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}

.process-step:hover .process-title {
  color: var(--color-primary);
}

.process-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-soft);
  max-width: 240px;
  margin: 0 auto;
}

/* ============================================
   CTA SECTION (dark navy)
   ============================================ */
.cta-section {
  position: relative;
  background: linear-gradient(135deg, var(--color-primary-darker) 0%, var(--color-primary-dark) 100%);
  color: #ffffff;
  padding: 130px 0;
  overflow: hidden;
}

/* ---------- Animated logistics network backdrop ---------- */
.cta-network {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.cta-network::after {
  /* Subtle radial fade so the network is denser around the headline area */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 70% 50%,
    rgba(6, 35, 79, 0) 0%,
    rgba(6, 35, 79, 0) 35%,
    rgba(6, 35, 79, 0.65) 100%
  );
  pointer-events: none;
}
.cta-network-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Faint static guide line so arcs are always faintly visible */
.cta-arc-guide {
  fill: none;
  stroke: rgba(120, 180, 255, 0.12);
  stroke-width: 1;
}

/* Bright animated arc that draws then erases on a loop */
.cta-arc {
  fill: none;
  stroke: rgba(160, 205, 255, 0.85);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  filter: drop-shadow(0 0 4px rgba(160, 205, 255, 0.6));
  animation: ctaArcDraw 5s linear infinite;
}
@keyframes ctaArcDraw {
  0%   { stroke-dashoffset: 600; opacity: 0; }
  10%  { opacity: 1; }
  55%  { stroke-dashoffset: 0; opacity: 1; }
  85%  { stroke-dashoffset: -600; opacity: 0.55; }
  100% { stroke-dashoffset: -600; opacity: 0; }
}

/* Travelling dot following the arc */
.cta-traveler {
  fill: #ffffff;
  filter: drop-shadow(0 0 6px rgba(180, 215, 255, 0.95))
          drop-shadow(0 0 12px rgba(120, 180, 255, 0.7));
}

/* Hub nodes */
.cta-hub {
  transform-box: fill-box;
  transform-origin: center;
  animation: ctaHubBreathe 3.4s ease-in-out infinite;
}
.cta-hub--primary { animation-duration: 2.2s; }

.cta-hub-glow {
  opacity: 0.55;
}
.cta-hub-dot {
  fill: #ffffff;
  filter: drop-shadow(0 0 6px rgba(180, 215, 255, 0.9));
}
.cta-hub--primary .cta-hub-dot {
  fill: #a8d0ff;
  filter: drop-shadow(0 0 8px rgba(168, 208, 255, 1))
          drop-shadow(0 0 18px rgba(120, 180, 255, 0.8));
}

@keyframes ctaHubBreathe {
  0%, 100% { opacity: 0.65; transform: translateZ(0) scale(1); }
  50%      { opacity: 1; transform: translateZ(0) scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .cta-arc,
  .cta-hub,
  .cta-bg-globe { animation: none !important; }
  .cta-traveler { display: none; }
  .cta-arc { stroke-dashoffset: 0; opacity: 0.4; }
}

.cta-bg-globe {
  display: none; /* legacy logo watermark — replaced by animated world map */
}

.cta-bg-globe img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes cta-spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

.cta-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  text-align: left;
}

.cta-title {
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}

.accent-light {
  color: #7eb3ff;
}

.cta-subtitle {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 38px;
  max-width: 580px;
}

.cta-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.btn-ghost-light {
  color: #ffffff;
  padding: 14px 28px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-pill);
  background: transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: #0a1a3a;
  color: rgba(255, 255, 255, 0.7);
  padding: 90px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* When the footer has a 5th column (Solutions added), redistribute evenly */
.footer-grid:has(.footer-col:nth-child(5)) {
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
  gap: 48px;
}

.footer-logo {
  height: 48px;
  width: auto;
  margin-bottom: 22px;
  display: block;
}

.footer-tagline {
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 360px;
}

.footer-col h4 {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 20px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.footer-col a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 14.5px;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: #ffffff;
}

.footer-info {
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 14px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-bottom-links {
  display: flex;
  gap: 28px;
}

.footer-bottom-links a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-bottom-links a:hover {
  color: #ffffff;
}

/* active nav link */
.nav-menu a.is-active {
  color: var(--color-primary);
}

/* ============================================
   SOLUTIONS PAGE (industries grid)
   ============================================ */
.industries-section {
  padding: 200px 0 130px;
  background: var(--surface);
}

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

.industry-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 12px 30px rgba(11, 59, 140, 0.10);
}

.industry-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(11, 59, 140, 0.22);
}

.industry-card-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-darker));
  z-index: 0;
}

.industry-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.75) 100%);
}

.industry-card-icon {
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: transform 0.4s ease, background 0.4s ease;
}

.industry-card:hover .industry-card-icon {
  transform: scale(1.1) rotate(-6deg);
  background: rgba(255, 255, 255, 0.28);
}

.industry-card-icon svg {
  width: 28px;
  height: 28px;
}

.industry-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 32px;
  color: #ffffff;
}

.industry-card-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  transition: transform 0.4s ease;
}

.industry-card-desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease, margin 0.5s ease;
}

.industry-card:hover .industry-card-desc {
  max-height: 120px;
  opacity: 1;
  margin-top: 6px;
}

.industry-card:hover .industry-card-title {
  transform: translateY(-2px);
}

/* tech / capability feature grid for Solutions */
.tech-section {
  padding: 130px 0;
  background: var(--color-bg-soft);
}

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

.tech-card {
  background: var(--surface);
  border-radius: 18px;
  padding: 36px 28px;
  border: 1px solid var(--color-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.tech-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(11, 59, 140, 0.14);
}

.tech-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-bottom: 22px;
}

.tech-icon svg {
  width: 28px;
  height: 28px;
}

.tech-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.tech-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-soft);
}

/* ============================================
   ANIMATIONS (scroll reveal)
   ============================================ */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(.2,.8,.2,1), transform 0.9s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

.reveal       { transform: translateY(36px); }
.reveal-left  { transform: translateX(-48px); }
.reveal-right { transform: translateX(48px); }
.reveal-scale { transform: scale(0.92); }

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.16s; }
.stagger-3 { transition-delay: 0.24s; }
.stagger-4 { transition-delay: 0.32s; }
.stagger-5 { transition-delay: 0.40s; }
.stagger-6 { transition-delay: 0.48s; }
.stagger-7 { transition-delay: 0.56s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale,
  .page-hero-image, .cta-bg-globe {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ============================================
   INNER PAGE RESPONSIVE
   ============================================ */
@media (max-width: 1180px) {
  .container { padding: 0 32px; }
  .page-hero-stats { width: calc(100% - 64px); }
}

@media (max-width: 980px) {
  .page-hero {
    padding: 180px 0 200px;
    min-height: auto;
  }
  .page-hero-title { font-size: 48px; }
  .page-hero-image { background-position: center; }
  .page-hero-container {
    max-width: 720px;
    margin-left: 24px;
    margin-right: auto;
    padding: 0;
  }
  /* On phones the hero copy sits full-width over the photo, so switch every
     hero variant to a strong top-to-bottom white wash. Without this the
     --centered / --mid / --bottom variants keep their desktop 90° (left→right)
     gradient — which clears on the right — and the subtitle washes out over
     busy images (e.g. Introduction, Network). */
  .page-hero-overlay,
  .page-hero--centered .page-hero-overlay,
  .page-hero--mid .page-hero-overlay,
  .page-hero--bottom .page-hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(var(--overlay-rgb), 0.96) 0%,
      rgba(var(--overlay-rgb), 0.9) 45%,
      rgba(var(--overlay-rgb), 0.8) 72%,
      rgba(var(--overlay-rgb), 0.84) 100%
    );
  }
  .page-hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 0;
    padding: 28px 16px;
  }
  .hero-stat {
    padding: 12px 18px;
  }
  .hero-stat:nth-child(2) { border-right: none; }
  .hero-stat:nth-child(3),
  .hero-stat:nth-child(4) { border-top: 1px solid var(--color-border); padding-top: 24px; }
  .hero-stat:nth-child(3) { border-right: 1px solid var(--color-border); }

  .services-overview { padding: 160px 0 80px; }
  .services-overview-grid { grid-template-columns: repeat(2, 1fr); }

  .industries-section { padding: 160px 0 90px; }
  .industries-grid { grid-template-columns: repeat(2, 1fr); }

  .service-detail { padding: 80px 0; }
  .service-detail-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .service-detail-grid.reverse .service-detail-media { order: 1; }
  .service-detail-grid.reverse .service-detail-content { order: 2; }
  .service-detail-media img { height: 360px; }

  .process-section { padding: 90px 0; }
  .process-grid { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .process-grid::before,
  .process-grid::after { display: none; }
  .process-num { box-shadow: 0 14px 30px rgba(26, 86, 219, 0.32); }

  .tech-section { padding: 90px 0; }
  .tech-grid { grid-template-columns: repeat(2, 1fr); }

  .cta-section { padding: 90px 0; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .page-hero-container {
    max-width: none;
    width: auto;
    margin: 0 20px;
    padding: 0;
  }
  .page-hero--centered .page-hero-container { margin: 0 20px; }
  .page-hero { padding: 200px 0 220px; }
  .page-hero-title { font-size: 40px; }
  .page-hero-stats {
    grid-template-columns: 1fr 1fr;
    width: calc(100% - 32px);
    border-radius: 18px;
  }

  .services-overview-grid,
  .industries-grid,
  .tech-grid,
  .process-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================
   DESTINATIONS PAGE
   ============================================ */

/* Destinations hero: no glass card — copy sits straight on the white-fade
   image, just like the home hero. */
.dest-hero .page-hero-container {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  padding: 0;
  /* keep the hero copy to a comfortable, readable line length */
  max-width: 600px;
}

/* hero image cross-fade when destination is switched */
.dest-hero-image {
  transition: opacity 0.5s ease;
  /* Region photos are tall city portraits — centre them so the crop
     stays balanced as a wide hero background on large screens. */
  background-position: center center;
}

.dest-hero-image.is-fading {
  opacity: 0;
}

/* hero title/subtitle fade-swap */
.dest-hero #destHeroTitle,
.dest-hero #destHeroSubtitle,
.dest-hero #breadcrumbCountry {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.dest-hero.is-swapping #destHeroTitle,
.dest-hero.is-swapping #destHeroSubtitle,
.dest-hero.is-swapping #breadcrumbCountry {
  opacity: 0;
  transform: translateY(8px);
}

/* destination dropdown selector inside hero */
.dest-selector {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 32px;
}

.dest-selector-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.dest-select-wrap {
  position: relative;
  display: inline-block;
}

.dest-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 14px 56px 14px 24px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  min-width: 280px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(11, 59, 140, 0.10);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dest-select:hover {
  border-color: var(--color-primary);
  box-shadow: 0 12px 28px rgba(26, 86, 219, 0.18);
}

.dest-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(26, 86, 219, 0.18);
}

.dest-select-caret {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-primary);
  font-size: 14px;
  pointer-events: none;
  font-weight: 800;
}

/* Floating destination picker — lives BETWEEN the hero section and the
   detail section in normal flow, pulled up by a negative margin so it
   visually overlaps the hero. Lives outside the hero (.page-hero has
   `overflow: hidden`, which would clip the picker if it were a child). */
.dest-floating-picker {
  position: relative;
  z-index: 3;
  width: calc(100% - 120px);
  max-width: 1280px;
  margin: -120px auto 0;
  background: var(--surface);
  border-radius: 24px;
  box-shadow: 0 22px 60px rgba(11, 59, 140, 0.16);
  padding: 28px 28px 24px;
}

.dest-floating-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 6px 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}

.dest-floating-eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.dest-floating-hint {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-soft);
}

.dest-buttons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.dest-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 24px 16px;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  color: var(--color-text);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease, color 0.35s ease;
  overflow: hidden;
}

.dest-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.dest-btn > * {
  position: relative;
  z-index: 1;
}

.dest-btn:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(11, 59, 140, 0.18);
  border-color: transparent;
}

.dest-btn:hover::before {
  opacity: 1;
}

.dest-btn:hover,
.dest-btn:hover .dest-btn-sub {
  color: #ffffff;
}

.dest-btn-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(26, 86, 219, 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease;
  margin-bottom: 4px;
}

.dest-btn:hover .dest-btn-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  transform: scale(1.08) rotate(-4deg);
}

.dest-btn-icon svg {
  width: 22px;
  height: 22px;
}

.dest-btn-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.dest-btn-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-soft);
  letter-spacing: 0.02em;
  transition: color 0.4s ease;
}

/* active state — locked-in look */
.dest-btn.is-active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 18px 40px rgba(26, 86, 219, 0.35);
  transform: translateY(-4px);
}

.dest-btn.is-active::before {
  opacity: 1;
}

.dest-btn.is-active .dest-btn-icon {
  background: rgba(255, 255, 255, 0.20);
  color: #ffffff;
}

.dest-btn.is-active .dest-btn-sub {
  color: rgba(255, 255, 255, 0.85);
}

/* country detail section — fade swap when destination changes */
.dest-detail .service-detail-content > *,
.dest-detail .service-detail-media img {
  transition: opacity 0.3s ease;
}

.dest-detail.is-swapping .service-detail-content > *,
.dest-detail.is-swapping .service-detail-media img {
  opacity: 0;
}

.dest-detail-subhead {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 4px 0 14px;
}

/* transport mode chips */
.dest-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.dest-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: rgba(26, 86, 219, 0.08);
  color: var(--color-primary);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.dest-mode:hover {
  transform: translateY(-2px);
}

.dest-mode-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

.dest-mode-icon svg {
  width: 100%;
  height: 100%;
}

.dest-mode.is-off {
  background: rgba(138, 150, 171, 0.10);
  color: var(--color-muted);
  opacity: 0.5;
}

/* trade lanes section */
.dest-lanes-section {
  padding: 110px 0 130px;
  background: var(--color-bg-soft);
}

.dest-lanes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.dest-lane-card {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 28px 26px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.dest-lane-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(11, 59, 140, 0.14);
  border-color: transparent;
}

.dest-lane-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.dest-lane-mode-dot {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(26, 86, 219, 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.dest-lane-mode-dot svg {
  width: 16px;
  height: 16px;
}

.dest-lane-route {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.dest-lane-transit {
  font-size: 14px;
  color: var(--color-text-soft);
  line-height: 1.55;
}

.dest-lane-transit strong {
  color: var(--heading);
  font-weight: 700;
}

/* responsive — destinations page */
@media (max-width: 1180px) {
  .dest-floating-picker { width: calc(100% - 64px); }
  .dest-buttons { grid-template-columns: repeat(3, 1fr); }
  .dest-lanes-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .dest-lanes-section { padding: 80px 0 100px; }
  .dest-floating-picker { padding: 22px 18px 18px; margin-top: -80px; }
  .dest-floating-header { flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 14px; margin-bottom: 14px; }
  .dest-buttons { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dest-btn { padding: 18px 12px; }
  .dest-select { min-width: 100%; }
  .dest-selector { display: flex; width: 100%; }
}

@media (max-width: 640px) {
  .dest-floating-picker { width: calc(100% - 32px); border-radius: 18px; margin-top: -60px; }
  .dest-buttons { grid-template-columns: 1fr 1fr; }
  .dest-lanes-grid { grid-template-columns: 1fr; }
}

/* ============================================
   HOME PAGE — BY THE NUMBERS (stats)
   ============================================ */
.home-stats {
  padding: 130px 0;
  background: linear-gradient(180deg, var(--surface) 0%, var(--color-bg-soft) 100%);
}

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

.home-stat {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 40px 28px 36px;
  text-align: center;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.5s ease, border-color 0.5s ease;
  overflow: hidden;
}

.home-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.home-stat > * { position: relative; z-index: 1; }

.home-stat:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(11, 59, 140, 0.20);
  border-color: transparent;
}

.home-stat:hover::before { opacity: 1; }

.home-stat:hover .home-stat-icon {
  background: rgba(255, 255, 255, 0.20);
  color: #ffffff;
  transform: rotate(-6deg) scale(1.08);
}

.home-stat:hover .home-stat-num,
.home-stat:hover .home-stat-suffix,
.home-stat:hover .home-stat-label { color: #ffffff; }

.home-stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(26, 86, 219, 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 22px;
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.home-stat-icon svg { width: 26px; height: 26px; }

.home-stat-figure {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  margin-bottom: 14px;
}

.home-stat-num {
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 800;
  color: var(--heading);
  letter-spacing: -0.03em;
  line-height: 1;
  transition: color 0.4s ease;
}

.home-stat-suffix {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  transition: color 0.4s ease;
}

.home-stat-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  transition: color 0.4s ease;
}

/* ============================================
   HOME PAGE — DESTINATIONS PREVIEW
   ============================================ */
.home-destinations {
  padding: 130px 0;
  background: var(--surface);
}

.home-destinations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}

.home-dest-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  display: block;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 14px 36px rgba(11, 59, 140, 0.12);
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1), box-shadow 0.6s ease;
}

.home-dest-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 32px 64px rgba(11, 59, 140, 0.26);
}

.home-dest-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right bottom;
  transition: transform 1s cubic-bezier(.2,.8,.2,1);
  z-index: 0;
}

.home-dest-card:hover .home-dest-bg {
  transform: scale(1.10);
}

/* Overlay is now just a soft black bottom-fade for text legibility.
   No blue tint — images stay true-to-photo. */
.home-dest-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(0, 0, 0, 0.78) 100%);
  z-index: 1;
  transition: background 0.5s ease;
}

.home-dest-card:hover .home-dest-overlay {
  background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.85) 100%);
}

.home-dest-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}

.home-dest-tag {
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--color-primary);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: auto;
  box-shadow: 0 6px 16px rgba(26, 86, 219, 0.45);
  transition: background 0.3s ease, transform 0.3s ease;
}

.home-dest-card:hover .home-dest-tag {
  background: var(--color-primary-darker);
  transform: translateY(-2px);
}

.home-dest-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.home-dest-sub {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.home-dest-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffffff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.home-dest-arrow .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.home-dest-card:hover .home-dest-arrow {
  opacity: 1;
  transform: translateY(0);
}

.home-dest-card:hover .home-dest-arrow .arrow {
  transform: translateX(6px);
}

.home-destinations-cta {
  text-align: center;
}

/* ============================================
   HOME PAGE — TRUSTED PARTNERS / CLIENTS MARQUEE
   ============================================ */
.home-clients {
  padding: 90px 0 110px;
  background: var(--surface);
  overflow: hidden;
}

.home-clients-header {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}

.home-clients-marquee {
  position: relative;
  overflow: hidden;
  /* fade out edges so logos blend into the page */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.home-clients-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 32px;
  animation: clients-scroll 45s linear infinite;
  padding: 8px 16px;
}

.home-clients-marquee:hover .home-clients-track {
  animation-play-state: paused;
}

@keyframes clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.home-client-logo {
  flex: 0 0 auto;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 22px 32px;
  height: 110px;
  min-width: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, filter 0.35s ease;
  filter: grayscale(20%);
}

.home-client-logo:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(11, 59, 140, 0.14);
  border-color: rgba(26, 86, 219, 0.30);
  filter: grayscale(0%);
}

.home-client-logo img {
  max-height: 60px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Square "badge" marks (FIATA, IATA, NAFL) sit smaller at the shared
   60px height cap, so give them more room to match the visual weight
   of the wider wordmark logos. */
.home-client-logo--badge {
  padding: 12px 32px;
}

.home-client-logo--badge img {
  max-height: 86px;
  max-width: 110px;
}

.hcl-mark {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--heading);
  line-height: 1.1;
}

.hcl-sub {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ============================================
   HOME PAGE — TESTIMONIALS
   ============================================ */
.home-testimonials {
  padding: 130px 0;
  background: var(--color-bg-soft);
  position: relative;
  overflow: hidden;
}

.home-testimonials::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(26, 86, 219, 0.10) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.home-testimonials .container { position: relative; z-index: 1; }

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

.home-testimonial {
  position: relative;
  background: var(--surface);
  border-radius: 22px;
  padding: 36px 32px;
  border: 1px solid var(--color-border);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.5s ease, border-color 0.5s ease;
}

.home-testimonial:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 56px rgba(11, 59, 140, 0.16);
  border-color: rgba(26, 86, 219, 0.30);
}

.home-testimonial-quote-mark {
  position: absolute;
  top: 20px;
  right: 28px;
  font-family: 'Georgia', serif;
  font-size: 100px;
  line-height: 0.8;
  color: var(--color-primary);
  opacity: 0.10;
  font-weight: 700;
  pointer-events: none;
}

.home-testimonial-stars {
  color: #f5a623;
  font-size: 15px;
  letter-spacing: 4px;
  margin-bottom: 18px;
}

.home-testimonial-quote {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--color-text);
  margin-bottom: 28px;
  font-weight: 500;
}

.home-testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.home-testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.home-testimonial-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.home-testimonial-meta strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--heading);
}

.home-testimonial-meta span {
  font-size: 12.5px;
  color: var(--color-text-soft);
  margin-top: 3px;
}

/* ============================================
   FOOTER SOCIAL ICONS
   ============================================ */
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.footer-social a:hover {
  background: var(--color-primary);
  color: #ffffff;
  transform: translateY(-3px);
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

/* ============================================
   HOME PAGE RESPONSIVE
   ============================================ */
@media (max-width: 1180px) {
  .home-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .home-destinations-grid { grid-template-columns: repeat(2, 1fr); }
  .home-testimonials-grid { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .home-stats { padding: 90px 0; }
  .home-destinations { padding: 90px 0; }
  .home-testimonials { padding: 90px 0; }
}

@media (max-width: 640px) {
  .home-stats-grid { grid-template-columns: 1fr; }
  .home-destinations-grid { grid-template-columns: 1fr; }
  .home-dest-card { aspect-ratio: 16 / 10; }
}

/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-hero {
  min-height: 100vh;
  height: 100vh;
  padding: 160px 0 120px;
}

.contact-section {
  padding: 90px 0 130px;
  background: var(--color-bg-soft);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: stretch;
}

/* form wrapper */
.contact-form-wrap {
  background: var(--surface);
  border-radius: 24px;
  border: 1px solid var(--color-border);
  padding: 48px 44px;
  box-shadow: 0 22px 50px rgba(11, 59, 140, 0.10);
}

.contact-form-title {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin: 14px 0 14px;
}

.contact-form-title .accent { color: var(--color-primary); }

.contact-form-intro {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-soft);
  margin-bottom: 32px;
}

/* form layout */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field.full { grid-column: 1 / -1; }

.form-field label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text);
}

.form-field .req { color: var(--color-primary); }
.form-field .optional { color: var(--color-muted); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 12px; margin-left: 4px; }

.form-field input,
.form-field textarea,
.form-field select {
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text);
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 13px 16px;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-muted);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(26, 86, 219, 0.15);
}

.form-field textarea {
  resize: vertical;
  min-height: 110px;
  font-family: inherit;
}

/* select with caret */
.select-wrap {
  position: relative;
}

.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 46px;
  cursor: pointer;
}

.select-caret {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-primary);
  font-size: 14px;
  pointer-events: none;
  font-weight: 800;
}

/* consent + submit */
.form-consent {
  margin-top: 6px;
}

.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-soft);
  line-height: 1.5;
  cursor: pointer;
}

.consent-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.consent-label a { color: var(--color-primary); text-decoration: underline; }

.form-submit {
  align-self: flex-start;
  margin-top: 8px;
}

.form-status {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 18px;
  border-radius: 12px;
  display: none;
}

.form-status.is-success {
  display: block;
  background: rgba(34, 197, 94, 0.10);
  color: #16803c;
  border: 1px solid rgba(34, 197, 94, 0.30);
}

.form-status.is-error {
  display: block;
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.30);
}

/* contact info side panel */
.contact-info {
  display: flex;
}

.contact-info-card {
  background: linear-gradient(160deg, var(--color-primary-darker) 0%, var(--color-primary-dark) 100%);
  color: #ffffff;
  border-radius: 24px;
  padding: 44px 38px;
  width: 100%;
  box-shadow: 0 22px 50px rgba(11, 59, 140, 0.22);
  position: relative;
  overflow: hidden;
}

.contact-info-card::before {
  content: '';
  position: absolute;
  top: -180px;
  right: -180px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(126, 179, 255, 0.18) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.contact-info-card > * { position: relative; z-index: 1; }

.contact-info-card .eyebrow-light { color: #7eb3ff; }

.contact-info-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 14px 0 14px;
}

.contact-info-intro {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 30px;
}

/* contact channels list */
.contact-channels {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  gap: 22px;
}

.contact-channels li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contact-channel-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.contact-channels li:hover .contact-channel-icon {
  background: rgba(126, 179, 255, 0.30);
  transform: rotate(-4deg);
}

.contact-channel-icon svg { width: 20px; height: 20px; }

.contact-channels li > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-channel-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.contact-channel-value {
  font-size: 14.5px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s ease;
}

a.contact-channel-value:hover { color: #7eb3ff; }

/* embedded location map inside the contact info card */
/* office locator tabs (UAE / Germany / Pakistan / Afghanistan) */
.contact-office-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.office-tab {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.office-tab:hover {
  border-color: #7eb3ff;
  color: #ffffff;
}

.office-tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.contact-map {
  margin: 14px 0 28px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  position: relative;
}

/* blink ring shown when the map switches to a new office */
.contact-map::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid #7eb3ff;
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.contact-map.is-blinking::after {
  animation: contactMapBlink 0.45s ease-in-out 3;
}

@keyframes contactMapBlink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; box-shadow: 0 0 18px rgba(126, 179, 255, 0.7) inset; }
}

.contact-map iframe {
  display: block;
  width: 100%;
  /* invert + hue-rotate produces a dark-mode look that matches the navy card */
  filter: invert(0.92) hue-rotate(180deg) brightness(1.05) contrast(0.90) saturate(0.85);
}

/* Animated location beacon — pulsing glow loop pinpoints the active office on the
   map. The embed centres the queried place, so the beacon sits at the map centre.
   Clicking the pin opens the office directly in Google Maps. */
.contact-map-beacon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 3;
  pointer-events: none; /* container never blocks map panning/zoom */
}

.contact-map-beacon-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126, 179, 255, 0.5) 0%, rgba(126, 179, 255, 0) 70%);
  box-shadow: 0 0 0 2px rgba(126, 179, 255, 0.5);
  pointer-events: none;
  animation: contactBeaconPulse 2.2s ease-out infinite;
}

.contact-map-beacon-ring--2 {
  animation-delay: 1.1s;
}

@keyframes contactBeaconPulse {
  0%   { transform: scale(0.5); opacity: 0.9; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

.contact-map-beacon-pin {
  position: absolute;
  top: 0;
  left: 0;
  /* anchor the pin tip on the map centre */
  width: 28px;
  height: 28px;
  margin: -28px 0 0 -14px;
  color: #ff5a5f;
  pointer-events: auto; /* only the pin itself is clickable */
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  animation: contactBeaconBob 2.2s ease-in-out infinite;
}

.contact-map-beacon-pin svg {
  width: 28px;
  height: 28px;
  display: block;
  transition: transform 0.2s ease;
}

.contact-map-beacon:hover .contact-map-beacon-pin svg {
  transform: scale(1.15);
}

@keyframes contactBeaconBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .contact-map-beacon-ring { animation: none; opacity: 0.6; }
  .contact-map-beacon-pin { animation: none; }
}

.contact-map-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 0.25s ease, color 0.25s ease;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.contact-map-link:hover {
  background: rgba(126, 179, 255, 0.20);
  color: #7eb3ff;
}

/* social row inside contact info */
.contact-social {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-social-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.contact-social-icons {
  display: flex;
  gap: 12px;
}

.contact-social-icons a {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.contact-social-icons a:hover {
  background: #7eb3ff;
  color: var(--heading);
  transform: translateY(-3px);
}

.contact-social-icons svg { width: 18px; height: 18px; }

/* active state on nav CTA when on contact page */
.nav-cta.is-active {
  background: var(--color-primary-darker);
}

/* responsive — contact page */
@media (max-width: 980px) {
  .contact-section { padding: 60px 0 90px; }
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-form-wrap { padding: 32px 24px; }
  .contact-info-card { padding: 32px 24px; }
  .form-row { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 640px) {
  .contact-hero { padding: 130px 0 80px; min-height: 100vh; height: 100vh; }
}

/* ============================================
   ABOUT PAGE — Leadership Team
   ============================================ */
.about-leadership {
  padding: 200px 0 140px;
  background: var(--surface);
  position: relative;
  overflow: hidden;
}

.about-leadership::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 86, 219, 0.08) 0%, rgba(26, 86, 219, 0) 70%);
  z-index: 0;
}

.about-leadership .container { position: relative; z-index: 1; }
.about-leadership .section-header { margin-bottom: 70px; }

.leadership-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: stretch;
}

.leader-card {
  position: relative;
  background: var(--surface);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(10, 26, 58, 0.08);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.45s ease,
              border-color 0.3s ease;
}

.leader-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px rgba(11, 59, 140, 0.18);
  border-color: rgba(26, 86, 219, 0.35);
}

/* Chairman card — elevated, with brand border + ribbon */
.leader-card--featured {
  transform: translateY(-16px);
  box-shadow: 0 22px 50px rgba(11, 59, 140, 0.18);
  border: 2px solid var(--color-primary);
}
.leader-card--featured:hover {
  transform: translateY(-24px);
  box-shadow: 0 36px 72px rgba(11, 59, 140, 0.26);
}
.leader-card--featured::before {
  content: "Chairman";
  position: absolute;
  top: 22px;
  right: -38px;
  transform: rotate(35deg);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  padding: 7px 44px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 3;
  box-shadow: 0 8px 18px rgba(11, 59, 140, 0.35);
}

.leader-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(180deg, #0a1a3a 0%, #0b3b8c 100%);
}

.leader-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
              filter 0.5s ease;
}

.leader-card:hover .leader-photo img {
  transform: scale(1.06);
  filter: brightness(1.04);
}

/* Soft gradient sweep on hover */
.leader-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(6, 35, 79, 0.55) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.leader-card:hover .leader-photo::after { opacity: 1; }

.leader-info {
  padding: 28px 28px 32px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.leader-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  line-height: 1.25;
}

.leader-role {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 14px;
}
.leader-role::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.leader-card:hover .leader-role::after { width: 64px; }

.leader-bio {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-text-soft);
  margin: 0;
}

@media (max-width: 980px) {
  .about-leadership { padding: 140px 0 80px; }
  .leadership-grid { grid-template-columns: 1fr; gap: 28px; max-width: 460px; margin: 0 auto; }
  .leader-card--featured { transform: none; }
  .leader-card--featured:hover { transform: translateY(-10px); }
}

/* values */
.about-values {
  padding: 130px 0;
  background: var(--surface);
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Management page has three values — center them as a 3-up grid */
#management .about-values-grid {
  grid-template-columns: repeat(3, 1fr);
  max-width: 920px;
  margin: 0 auto;
}

.about-value {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: 36px 28px;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease, border-color 0.4s ease;
  overflow: hidden;
}

.about-value::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.about-value > * { position: relative; z-index: 1; }

.about-value:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(11, 59, 140, 0.18);
  border-color: transparent;
}

.about-value:hover::before { opacity: 1; }

.about-value:hover .about-value-title,
.about-value:hover .about-value-desc,
.about-value:hover .about-value-num { color: #ffffff; }

.about-value:hover .about-value-icon {
  background: rgba(255, 255, 255, 0.20);
  color: #ffffff;
}

.about-value-num {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin-bottom: 22px;
  transition: color 0.4s ease;
}

.about-value-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(26, 86, 219, 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 22px;
  transition: background 0.4s ease, color 0.4s ease;
}

.about-value-icon svg { width: 26px; height: 26px; }

.about-value-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  transition: color 0.4s ease;
}

.about-value-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-soft);
  transition: color 0.4s ease;
}

/* timeline */
.about-timeline-section {
  padding: 130px 0;
  background: var(--color-bg-soft);
}

.about-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}

.about-timeline::before {
  content: '';
  position: absolute;
  left: 80px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--color-primary), rgba(26, 86, 219, 0.20));
}

.about-timeline-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  margin-bottom: 32px;
  align-items: flex-start;
  position: relative;
}

.about-timeline-item::before {
  content: '';
  position: absolute;
  left: 73px;
  top: 18px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 4px solid var(--color-bg-soft);
  z-index: 2;
}

.about-timeline-year {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.01em;
  padding-top: 14px;
  text-align: right;
  padding-right: 24px;
}

.about-timeline-card {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 24px 28px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.about-timeline-card:hover {
  transform: translateX(6px);
  box-shadow: 0 14px 30px rgba(11, 59, 140, 0.12);
}

.about-timeline-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.about-timeline-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-soft);
}

/* ============================================
   INDUSTRIES PAGE
   ============================================ */
.industries-page-grid {
  padding: 200px 0 120px;
  background: var(--surface);
}

.ind-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.ind-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 32px 28px;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease, border-color 0.4s ease;
  overflow: hidden;
}

.ind-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}

.ind-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 56px rgba(11, 59, 140, 0.16);
  border-color: rgba(26, 86, 219, 0.30);
}

.ind-card:hover::before { transform: scaleX(1); }

.ind-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(26, 86, 219, 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 20px;
  transition: background 0.4s ease, transform 0.4s ease;
}

.ind-card:hover .ind-card-icon {
  background: var(--color-primary);
  color: #ffffff;
  transform: rotate(-6deg) scale(1.08);
}

.ind-card-icon svg { width: 24px; height: 24px; }

.ind-card-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.ind-card-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-soft);
  margin-bottom: 18px;
}

.ind-card-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.ind-card-bullets li {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-primary);
  padding-left: 18px;
  position: relative;
}

.ind-card-bullets li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
  font-weight: 700;
}

/* compliance */
.ind-compliance {
  padding: 130px 0;
  background: var(--color-bg-soft);
}

.ind-compliance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.ind-compliance-card {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 36px 28px;
  text-align: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.ind-compliance-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(11, 59, 140, 0.15);
}

.ind-compliance-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0 auto 20px;
  box-shadow: 0 12px 28px rgba(26, 86, 219, 0.30);
}

.ind-compliance-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.ind-compliance-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-soft);
}

/* ============================================
   RESOURCES PAGE
   ============================================ */
.res-featured {
  padding: 200px 0 120px;
  background: var(--surface);
}

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

.res-card {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 32px 28px;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.res-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(11, 59, 140, 0.16);
  border-color: rgba(26, 86, 219, 0.30);
}

.res-card-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
  color: #ffffff;
}

.tag-air      { background: #2563eb; }
.tag-sea      { background: #0e9488; }
.tag-land     { background: #d97706; }
.tag-customs  { background: #7c3aed; }
.tag-ops      { background: #475569; }
.tag-trade    { background: #1a56db; }
.tag-news     { background: #be185d; }
.tag-market   { background: #059669; }

.res-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 12px;
}

.res-card-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-soft);
  margin-bottom: 22px;
}

.res-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-text-soft);
}

.res-card-link {
  font-weight: 700;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.3s ease;
}

.res-card:hover .res-card-link { gap: 10px; }

/* tools */
.res-tools {
  padding: 130px 0;
  background: var(--color-bg-soft);
}

.res-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.res-tool {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 32px 26px;
  text-align: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.res-tool:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(11, 59, 140, 0.14);
}

.res-tool-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: rgba(26, 86, 219, 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin: 0 auto 18px;
  transition: transform 0.4s ease;
}

.res-tool:hover .res-tool-icon { transform: rotate(-6deg) scale(1.08); }

.res-tool-icon svg { width: 26px; height: 26px; }

.res-tool h3 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.res-tool p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-soft);
  margin-bottom: 18px;
}

.res-tool-link {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.3s ease;
}

.res-tool:hover .res-tool-link { gap: 10px; }

/* FAQ */
.res-faq {
  padding: 130px 0;
  background: var(--surface);
}

.res-faq-list {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.res-faq-item {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 0;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.res-faq-item[open] {
  background: var(--surface);
  border-color: rgba(26, 86, 219, 0.30);
  box-shadow: 0 12px 28px rgba(11, 59, 140, 0.10);
}

.res-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 26px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.res-faq-item summary::-webkit-details-marker { display: none; }

.res-faq-item summary::after {
  content: '+';
  font-size: 24px;
  font-weight: 600;
  color: var(--color-primary);
  margin-left: 16px;
  transition: transform 0.3s ease;
  line-height: 1;
}

.res-faq-item[open] summary::after {
  transform: rotate(45deg);
}

.res-faq-item p {
  padding: 0 26px 22px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text-soft);
}

/* ============================================
   BLOG PAGE
   ============================================ */
.blog-featured {
  padding: 200px 0 60px;
  background: var(--surface);
}

.blog-featured-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  background: var(--color-bg-soft);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.blog-featured-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(11, 59, 140, 0.16);
}

.blog-featured-media {
  position: relative;
  min-height: 380px;
}

.blog-featured-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s ease;
}

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

.blog-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  color: #ffffff;
}

.blog-featured-content {
  padding: 44px 40px 44px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-soft);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.blog-meta-dot { color: var(--color-muted); }

.blog-featured-title {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--heading);
  margin-bottom: 18px;
}

.blog-featured-excerpt {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-soft);
  margin-bottom: 28px;
}

.blog-featured-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.blog-author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.blog-author-meta {
  display: flex;
  flex-direction: column;
}

.blog-author-meta strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--heading);
}

.blog-author-meta span {
  font-size: 12.5px;
  color: var(--color-text-soft);
}

.blog-featured-link {
  align-self: flex-start;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s ease;
}

.blog-featured-link:hover { gap: 12px; }

/* filters */
.blog-filter-section {
  padding: 40px 0 20px;
  background: var(--surface);
}

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.blog-filter {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-soft);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.blog-filter:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.blog-filter.is-active {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 6px 16px rgba(26, 86, 219, 0.30);
}

/* article grid */
.blog-grid-section {
  padding: 50px 0 130px;
  background: var(--surface);
}

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

.blog-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.5s ease, border-color 0.5s ease;
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 56px rgba(11, 59, 140, 0.16);
  border-color: rgba(26, 86, 219, 0.25);
}

.blog-card-img {
  height: 200px;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s ease;
}

.blog-card:hover .blog-card-img { transform: scale(1.06); }

.blog-card-body {
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 10px;
}

.blog-card-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-soft);
  margin-bottom: 18px;
  flex: 1;
}

.blog-card-link {
  align-self: flex-start;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.3s ease;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
button.blog-featured-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.blog-card:hover .blog-card-link { gap: 10px; }

.blog-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--color-muted);
  font-size: 15px;
}

/* ---------- Blog preview modal ---------- */
.blog-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.blog-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.blog-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 35, 79, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.blog-modal-dialog {
  position: relative;
  background: var(--surface);
  border-radius: 22px;
  width: 100%;
  max-width: 760px;
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(11, 59, 140, 0.4);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.blog-modal.is-open .blog-modal-dialog {
  transform: translateY(0) scale(1);
}
.blog-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  color: var(--heading);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(11, 59, 140, 0.25);
  transition: transform 0.2s ease;
}
.blog-modal-close:hover { transform: scale(1.08); }
.blog-modal-hero {
  width: 100%;
  height: 220px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  background-color: var(--color-bg-soft);
}
.blog-modal-body {
  padding: 24px 32px 28px;
  overflow-y: auto;
}
.blog-modal-body .blog-tag {
  position: static;
  display: inline-block;
  margin-bottom: 14px;
}
.blog-modal-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--color-muted);
  font-size: 13px;
  margin-bottom: 10px;
}
.blog-modal-title {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--heading);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.blog-modal-content {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text);
}
.blog-modal-content p { margin: 0 0 14px; }
.blog-modal-content a {
  color: var(--color-primary);
  font-weight: 600;
}
.blog-modal-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(10, 26, 58, 0.08);
}

@media (max-width: 560px) {
  .blog-modal-hero { height: 160px; }
  .blog-modal-body { padding: 20px 22px 24px; }
  .blog-modal-title { font-size: 21px; }
  .blog-modal-actions .btn { width: 100%; justify-content: center; }
}

.blog-load-more {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

/* newsletter form */
.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 560px;
  align-items: center;
}

.newsletter-form input {
  flex: 1;
  min-width: 240px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--radius-pill);
  padding: 14px 22px;
  font-family: inherit;
  font-size: 15px;
  color: #ffffff;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.55); }

.newsletter-form input:focus {
  outline: none;
  border-color: #7eb3ff;
  background: rgba(255, 255, 255, 0.15);
}

.newsletter-success {
  width: 100%;
  display: none;
  font-size: 14px;
  font-weight: 600;
  color: #a7f3d0;
  margin-top: 4px;
}

/* responsive */
@media (max-width: 1180px) {
  .about-values-grid { grid-template-columns: repeat(2, 1fr); }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .ind-compliance-grid { grid-template-columns: repeat(2, 1fr); }
  .res-grid { grid-template-columns: repeat(2, 1fr); }
  .res-tools-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .industries-page-grid,
  .res-featured,
  .blog-featured { padding: 140px 0 80px; }
  .about-values,
  .about-timeline-section,
  .ind-compliance,
  .res-tools,
  .res-faq { padding: 90px 0; }
  .blog-featured-card { grid-template-columns: 1fr; gap: 40px; }
  .about-timeline::before { left: 12px; }
  .about-timeline-item { grid-template-columns: 60px 1fr; gap: 14px; }
  .about-timeline-item::before { left: 5px; top: 18px; }
  .about-timeline-year { text-align: left; padding-right: 0; padding-left: 28px; padding-top: 0; }
  .blog-featured-content { padding: 32px 24px; }
}

@media (max-width: 640px) {
  .about-values-grid,
  .ind-grid,
  .ind-compliance-grid,
  .res-grid,
  .res-tools-grid,
  .blog-grid { grid-template-columns: 1fr; }
  .newsletter-form input { width: 100%; }
}

/* ============================================
   SOLUTION DETAIL PAGES (freight-forwarding,
   project-cargo, customs-compliance, supply-chain)
   ============================================ */
.sol-capabilities {
  padding: 130px 0;
  background: var(--surface);
}

.sol-cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.sol-cap {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: 38px 34px;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease, border-color 0.45s ease;
  overflow: hidden;
}

.sol-cap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
}

.sol-cap:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 56px rgba(11, 59, 140, 0.16);
  border-color: rgba(26, 86, 219, 0.30);
}

.sol-cap:hover::before { transform: scaleY(1); }

.sol-cap-icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: rgba(26, 86, 219, 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 22px;
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.sol-cap:hover .sol-cap-icon {
  background: var(--color-primary);
  color: #ffffff;
  transform: rotate(-6deg) scale(1.08);
}

.sol-cap-icon svg { width: 28px; height: 28px; }

.sol-cap h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.sol-cap > p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-soft);
  margin-bottom: 20px;
}

.sol-cap ul {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sol-cap ul li {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  padding-left: 22px;
  position: relative;
}

.sol-cap ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
  font-weight: 800;
}

/* Use cases / examples */
.sol-cases {
  padding: 130px 0;
  background: var(--color-bg-soft);
}

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

.sol-case {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: 36px 32px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.sol-case:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(11, 59, 140, 0.14);
  border-color: rgba(26, 86, 219, 0.25);
}

.sol-case-pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #ffffff;
  margin-bottom: 18px;
  box-shadow: 0 6px 14px rgba(26, 86, 219, 0.28);
}

.sol-case h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.sol-case p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-soft);
}

/* responsive */
@media (max-width: 980px) {
  .sol-capabilities,
  .sol-cases { padding: 90px 0; }
  .sol-cap-grid { grid-template-columns: 1fr; }
  .sol-cases-grid { grid-template-columns: 1fr; }
}


/* ============================================
   Reach / Difficult-terrain band (Solutions)
   ============================================ */
.sol-reach {
  padding: 120px 0;
  background: var(--color-bg-soft);
}

.sol-reach-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}

.sol-reach-media {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 28px 60px rgba(11, 59, 140, 0.22);
}

.sol-reach-img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  background-image: url('asset/container%20truck%20-A1.png');
  background-size: cover;
  /* On desktop: show road & truck in lower-center area */
  background-position: center 55%;
}

.sol-reach-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: rgba(6, 35, 79, 0.78);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 20px rgba(6, 35, 79, 0.3);
}

.sol-reach-badge svg { width: 16px; height: 16px; color: #6ea8ff; }

.sol-reach-content .eyebrow { margin-bottom: 14px; }
.sol-reach-content .section-title { text-align: left; }

.sol-reach-lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-soft);
  margin: 18px 0 26px;
}

.sol-reach-points {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.sol-reach-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-soft);
}

.sol-reach-points li strong { color: var(--color-text); font-weight: 700; }

.sol-reach-points svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  padding: 3px;
  border-radius: 50%;
  color: var(--color-primary);
  background: rgba(26, 86, 219, 0.1);
}

.sol-reach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (max-width: 980px) {
  .sol-reach { padding: 80px 0; }
  .sol-reach-grid { grid-template-columns: 1fr; gap: 36px; }
  .sol-reach-img { min-height: 300px; }
}

@media (max-width: 640px) {
  .sol-reach { padding: 60px 0; }
  /* On mobile use a shorter container (less than landscape image ratio = ~196px)
     so background-position Y has overflow to work with and can target the truck */
  .sol-reach-img {
    min-height: 190px;
    /* Truck is at ~55% from top; this puts it in center of the visible crop */
    background-position: center 55%;
  }
  .sol-reach-actions {
    flex-direction: column;
  }
  .sol-reach-actions .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================
   Floating Widgets — WhatsApp + Get Quote
   ============================================ */

.ils-floating-widgets {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
}

.ils-fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.2px;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(10, 26, 58, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease, width 0.35s ease, padding 0.35s ease;
  overflow: hidden;
  white-space: nowrap;
}

.ils-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(10, 26, 58, 0.32); }
.ils-fab:focus-visible { outline: 3px solid rgba(26, 86, 219, 0.45); outline-offset: 3px; }

.ils-fab .ils-fab-icon {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ils-fab .ils-fab-icon svg { width: 26px; height: 26px; }

.ils-fab .ils-fab-label {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  padding-right: 0;
  transition: opacity 0.25s ease, max-width 0.35s ease, padding-right 0.35s ease;
}

.ils-fab:hover { width: auto; padding-right: 22px; }
.ils-fab:hover .ils-fab-label { opacity: 1; max-width: 220px; padding-right: 4px; }

/* WhatsApp — green */
.ils-fab--whatsapp { background: #25D366; }
.ils-fab--whatsapp:hover { background: #1ebe5b; }

/* Get Quote — blue with echo pulse */
.ils-fab--quote {
  background: linear-gradient(135deg, #1a56db 0%, #0b3b8c 100%);
}
.ils-fab--quote::before,
.ils-fab--quote::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(26, 86, 219, 0.55);
  pointer-events: none;
  animation: ilsEcho 2.4s ease-out infinite;
}
.ils-fab--quote::after { animation-delay: 1.2s; }

@keyframes ilsEcho {
  0%   { transform: scale(1);    opacity: 0.75; }
  70%  { transform: scale(1.7);  opacity: 0;    }
  100% { transform: scale(1.7);  opacity: 0;    }
}

@media (prefers-reduced-motion: reduce) {
  .ils-fab--quote::before,
  .ils-fab--quote::after { animation: none; display: none; }
}

/* Alert badge on the Get Quote button */
.ils-fab--quote .ils-fab-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff4f4f;
  border: 2px solid #fff;
  box-shadow: 0 0 0 0 rgba(255, 79, 79, 0.7);
  animation: ilsBadgePulse 1.8s ease-out infinite;
}
@keyframes ilsBadgePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 79, 79, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 79, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 79, 79, 0); }
}

/* ============================================
   Quote Modal
   ============================================ */

.ils-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ils-modal.is-open { display: flex; }

.ils-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 18, 44, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ilsFadeIn 0.25s ease;
}

.ils-modal-dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(6, 18, 44, 0.35);
  animation: ilsSlideUp 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes ilsFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ilsSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ils-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--color-border);
}
.ils-modal-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1a56db 0%, #0b3b8c 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
}
.ils-modal-header-icon svg { width: 22px; height: 22px; }
.ils-modal-title { font-size: 19px; font-weight: 800; color: var(--color-text); }
.ils-modal-subtitle { font-size: 13.5px; color: var(--color-text-soft); margin-top: 2px; }

.ils-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #eef3fb;
  color: var(--color-text);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ils-modal-close:hover { background: #dbe6f6; }

.ils-quote-form { padding: 22px 26px 26px; display: grid; gap: 14px; }
.ils-quote-form .ils-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ils-quote-form label { font-size: 13px; font-weight: 600; color: var(--color-text); display: block; margin-bottom: 6px; }
.ils-quote-form input,
.ils-quote-form select,
.ils-quote-form textarea {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  background: #f6f9fd;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ils-quote-form input:focus,
.ils-quote-form select:focus,
.ils-quote-form textarea:focus {
  border-color: var(--color-primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15);
}
.ils-quote-form textarea { min-height: 90px; resize: vertical; }

.ils-quote-submit {
  margin-top: 4px;
  padding: 13px 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #1a56db 0%, #0b3b8c 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ils-quote-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(11, 59, 140, 0.3); }

.ils-quote-note { font-size: 12.5px; color: var(--color-muted); text-align: center; margin-top: 2px; }

@media (max-width: 560px) {
  .ils-floating-widgets { right: 14px; bottom: 14px; gap: 12px; }
  .ils-fab { width: 54px; height: 54px; }
  .ils-fab .ils-fab-icon { flex: 0 0 54px; width: 54px; height: 54px; }
  .ils-quote-form .ils-field-row { grid-template-columns: 1fr; }
  .ils-modal-dialog { border-radius: 14px; }
}


/* ============================================
   Left-side Cargo FAB — brand-blue logistics style
   ============================================ */
.ils-cargo-fab {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9997;
  display: flex;
  align-items: stretch;
  pointer-events: none;
}
.ils-cargo-fab > * { pointer-events: auto; }

/* ---------- Trigger: small circle that expands on hover ---------- */
.ils-cargo-trigger {
  position: relative;
  width: 54px;
  height: 54px;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 14px;
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(11, 59, 140, 0.45),
              0 0 0 1px rgba(255, 255, 255, 0.22),
              0 0 22px rgba(26, 86, 219, 0.5);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  font-family: inherit;
  white-space: nowrap;
  transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-radius 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.3s ease,
              box-shadow 0.3s ease,
              padding 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ils-cargo-trigger:hover,
.ils-cargo-trigger:focus-visible,
.ils-cargo-fab[data-state="open"] .ils-cargo-trigger {
  width: 160px;
  border-radius: 30px;
  padding: 0 18px 0 0;
  transform: translateX(2px);
  box-shadow: 0 14px 38px rgba(11, 59, 140, 0.55),
              0 0 0 1px rgba(255, 255, 255, 0.4),
              0 0 30px rgba(26, 86, 219, 0.65);
}
.ils-cargo-trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* Echo / ripple alert rings — radiate out continuously to draw attention */
.ils-cargo-trigger-echo {
  position: absolute;
  left: 27px;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  border: 2px solid rgba(26, 86, 219, 0.7);
  pointer-events: none;
  z-index: -1;
  animation: ilsCargoEcho 2.4s cubic-bezier(0.25, 0.5, 0.35, 1) infinite;
}
.ils-cargo-trigger-echo--2 {
  animation-delay: 1.2s;
}
@keyframes ilsCargoEcho {
  0%   { transform: scale(1);   opacity: 0.85; border-width: 2px; }
  70%  { transform: scale(2.1); opacity: 0;    border-width: 1px; }
  100% { transform: scale(2.1); opacity: 0;    border-width: 1px; }
}
.ils-cargo-fab[data-state="open"] .ils-cargo-trigger-echo {
  animation: none;
  opacity: 0;
}

/* Cargo box icon — fixed in the circle area, gentle sway */
.ils-cargo-trigger-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  color: #ffffff;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  animation: ilsCargoSway 4.5s ease-in-out infinite;
}
.ils-cargo-trigger-icon svg { width: 26px; height: 26px; }
@keyframes ilsCargoSway {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-2px) rotate(2deg); }
}

/* Label — hidden until hover/open */
.ils-cargo-trigger-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.32em;
  color: #ffffff;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease 0.1s, transform 0.35s ease 0.1s;
}
.ils-cargo-trigger:hover .ils-cargo-trigger-label,
.ils-cargo-trigger:focus-visible .ils-cargo-trigger-label,
.ils-cargo-fab[data-state="open"] .ils-cargo-trigger-label {
  opacity: 1;
  transform: translateX(0);
}

/* ---------- Expanded panel ---------- */
.ils-cargo-panel {
  position: relative;
  width: 320px;
  margin-left: 12px;
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #ffffff;
  padding: 22px 22px 18px;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(11, 59, 140, 0.55),
              inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-24px);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
              opacity 0.35s ease,
              visibility 0s linear 0.35s;
}

.ils-cargo-fab[data-state="open"] .ils-cargo-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0s, 0s, 0s;
}

/* Soft brand-blue radial glow behind the content */
.ils-cargo-panel-grid {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 86, 219, 0.35) 0%, rgba(26, 86, 219, 0) 65%);
  pointer-events: none;
  opacity: 0.9;
}

/* Static brand-blue inner frame (no spin) */
.ils-cargo-panel-frame {
  position: absolute;
  inset: 6px;
  border-radius: 14px;
  border: 1px solid rgba(26, 86, 219, 0.28);
  pointer-events: none;
}

/* Horizontal "route" progress bar that fills left-to-right and resets */
.ils-cargo-panel-scan {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 2px;
  background: rgba(26, 86, 219, 0.18);
  border-radius: 2px;
  pointer-events: none;
  overflow: hidden;
}
.ils-cargo-panel-scan::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 30%;
  background: linear-gradient(90deg,
    rgba(26, 86, 219, 0) 0%,
    rgba(160, 200, 255, 1) 50%,
    rgba(26, 86, 219, 0) 100%);
  box-shadow: 0 0 12px rgba(160, 200, 255, 0.8);
  animation: ilsCargoRoute 3.4s ease-in-out infinite;
}
@keyframes ilsCargoRoute {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

.ils-cargo-panel-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(26, 86, 219, 0.28);
}
.ils-cargo-panel-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a8c2f5;
  margin-bottom: 6px;
}
.ils-cargo-panel-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: #ffffff;
  margin: 0;
  line-height: 1.25;
}

.ils-cargo-panel-close {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(26, 86, 219, 0.5);
  background: rgba(26, 86, 219, 0.15);
  color: #ffffff;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ils-cargo-panel-close:hover {
  background: rgba(26, 86, 219, 0.32);
  transform: rotate(90deg);
}

/* ---------- Options ---------- */
.ils-cargo-options {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ils-cargo-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(26, 86, 219, 0.30);
  border-radius: 12px;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  text-align: left;
  overflow: hidden;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.ils-cargo-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(160, 200, 255, 0.8);
  transform: translateX(4px);
}
.ils-cargo-option:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.ils-cargo-option-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(26, 86, 219, 0.22) 0%,
    rgba(26, 86, 219, 0) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.ils-cargo-option:hover .ils-cargo-option-glow { opacity: 1; }

.ils-cargo-option-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border: 1px solid rgba(26, 86, 219, 0.55);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
}
.ils-cargo-option:hover .ils-cargo-option-icon {
  transform: scale(1.06) rotate(-4deg);
}
.ils-cargo-option-icon svg { width: 22px; height: 22px; }

.ils-cargo-option-text {
  flex: 1;
  min-width: 0;
}
.ils-cargo-option-label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #ffffff;
  margin-bottom: 3px;
}
.ils-cargo-option-label span { color: #a8c2f5; }
.ils-cargo-option-sub {
  display: block;
  font-size: 12.5px;
  color: rgba(232, 240, 255, 0.7);
}

.ils-cargo-option-arrow {
  color: #a8c2f5;
  font-size: 18px;
  opacity: 0.5;
  transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
.ils-cargo-option:hover .ils-cargo-option-arrow {
  opacity: 1;
  color: #ffffff;
  transform: translateX(4px);
}

/* Stagger reveal of options on open */
.ils-cargo-option { opacity: 0; transform: translateY(8px); }
.ils-cargo-fab[data-state="open"] .ils-cargo-option {
  animation: ilsCargoOptionIn 0.45s ease forwards;
}
.ils-cargo-fab[data-state="open"] .ils-cargo-option:nth-child(1) { animation-delay: 0.18s; }
.ils-cargo-fab[data-state="open"] .ils-cargo-option:nth-child(2) { animation-delay: 0.28s; }
.ils-cargo-fab[data-state="open"] .ils-cargo-option:nth-child(3) { animation-delay: 0.38s; }
@keyframes ilsCargoOptionIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Footer ---------- */
.ils-cargo-panel-footer {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(26, 86, 219, 0.28);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 240, 255, 0.7);
}
.ils-cargo-panel-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ils-cargo-panel-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ecf6f;
  box-shadow: 0 0 8px #2ecf6f;
  animation: ilsCargoLed 1.6s ease-in-out infinite;
}
@keyframes ilsCargoLed {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.85); }
}
.ils-cargo-panel-stamp { color: #a8c2f5; }

@media (prefers-reduced-motion: reduce) {
  .ils-cargo-trigger-scan,
  .ils-cargo-trigger-icon,
  .ils-cargo-trigger-icon::after,
  .ils-cargo-trigger-dot,
  .ils-cargo-panel-scan::before,
  .ils-cargo-panel-led { animation: none !important; }
  .ils-cargo-fab[data-state="open"] .ils-cargo-option { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .ils-cargo-trigger { width: 50px; min-height: 170px; }
  .ils-cargo-trigger-icon svg { width: 24px; height: 24px; }
  .ils-cargo-panel { width: min(290px, calc(100vw - 56px)); }
}


/* ============================================
   Guide Modal (Resources page — "Read guide")
   ============================================ */
.ils-modal--guide .ils-guide-dialog {
  width: min(620px, 100%);
  padding: 56px 44px 38px;
  text-align: center;
  position: relative;
  background: var(--surface);
  border-radius: 22px;
  overflow: hidden;
}

/* Decorative top-corner glow */
.ils-modal--guide .ils-guide-dialog::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 86, 219, 0.16) 0%, rgba(26, 86, 219, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.ils-modal--guide .ils-guide-dialog > * { position: relative; z-index: 1; }

.ils-modal--guide .ils-modal-close {
  z-index: 4;
}

/* ---------- Animated icon ---------- */
.ils-guide-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(135deg, #1a56db 0%, #0b3b8c 100%);
  color: #fff;
  position: relative;
  box-shadow: 0 14px 34px rgba(11, 59, 140, 0.32);
}
.ils-guide-icon svg { width: 32px; height: 32px; }
.ils-guide-icon::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 28px;
  border: 2px solid rgba(26, 86, 219, 0.45);
  pointer-events: none;
  opacity: 0;
}
.ils-modal--guide.is-open .ils-guide-icon::after {
  animation: ilsGuidePulse 2.4s ease-out infinite 0.6s;
}
@keyframes ilsGuidePulse {
  0%   { transform: scale(1);   opacity: 0.65; }
  80%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* ---------- Tag chip ---------- */
.ils-guide-tag {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #fff;
  background: var(--color-primary);
  margin-bottom: 16px;
}
.ils-guide-tag.tag-air     { background: linear-gradient(135deg, #1a56db 0%, #0b3b8c 100%); }
.ils-guide-tag.tag-sea     { background: linear-gradient(135deg, #0d9488 0%, #064e4a 100%); }
.ils-guide-tag.tag-land    { background: linear-gradient(135deg, #f97316 0%, #b34915 100%); }
.ils-guide-tag.tag-customs { background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%); }

/* ---------- Title + meta ---------- */
.ils-guide-title {
  font-size: clamp(24px, 3.4vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 14px;
}

.ils-guide-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 22px;
}
.ils-guide-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-muted);
}

.ils-guide-desc {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--color-text-soft);
  margin: 0 auto 28px;
  max-width: 480px;
}

/* ---------- Bullets ---------- */
.ils-guide-body {
  text-align: left;
  background: linear-gradient(135deg, #f6f9fd 0%, #eef3fb 100%);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 22px 26px 24px;
  margin-bottom: 26px;
}

.ils-guide-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 14px;
}
.ils-guide-section-dot {
  width: 22px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

.ils-guide-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ils-guide-bullets li {
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-text);
}
.ils-guide-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  display: inline-block;
}
.ils-guide-bullets li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 11px;
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* ---------- CTAs ---------- */
.ils-guide-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.ils-guide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.2s ease, border-color 0.2s ease;
  min-width: 180px;
}

.ils-guide-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #1a56db 0%, #0b3b8c 100%);
  box-shadow: 0 10px 26px rgba(11, 59, 140, 0.28);
}
.ils-guide-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(11, 59, 140, 0.36);
}

.ils-guide-btn--ghost {
  color: var(--color-primary);
  background: var(--surface);
  border-color: var(--color-border);
}
.ils-guide-btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  background: rgba(26, 86, 219, 0.06);
}

/* ============================================
   Guide Modal — entrance animations
   (Triggered on .is-open by reseting class to restart)
   ============================================ */
.ils-modal--guide .ils-guide-icon,
.ils-modal--guide .ils-guide-tag,
.ils-modal--guide .ils-guide-title,
.ils-modal--guide .ils-guide-meta,
.ils-modal--guide .ils-guide-desc,
.ils-modal--guide .ils-guide-body,
.ils-modal--guide .ils-guide-cta {
  opacity: 0;
}

.ils-modal--guide.is-open .ils-guide-icon {
  animation: ilsGuideIconIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.05s;
}
.ils-modal--guide.is-open .ils-guide-tag {
  animation: ilsGuideFadeUp 0.45s ease forwards 0.22s;
}
.ils-modal--guide.is-open .ils-guide-title {
  animation: ilsGuideFadeUp 0.5s ease forwards 0.30s;
}
.ils-modal--guide.is-open .ils-guide-meta {
  animation: ilsGuideFadeUp 0.45s ease forwards 0.38s;
}
.ils-modal--guide.is-open .ils-guide-desc {
  animation: ilsGuideFadeUp 0.5s ease forwards 0.44s;
}
.ils-modal--guide.is-open .ils-guide-body {
  animation: ilsGuideFadeUp 0.5s ease forwards 0.52s;
}
.ils-modal--guide.is-open .ils-guide-cta {
  animation: ilsGuideFadeUp 0.5s ease forwards 0.92s;
}

.ils-modal--guide.is-open .ils-guide-bullets li {
  opacity: 0;
  transform: translateX(-12px);
  animation: ilsGuideBulletIn 0.4s ease forwards;
  animation-delay: calc(0.62s + var(--i, 0) * 0.06s);
}

@keyframes ilsGuideIconIn {
  0%   { opacity: 0; transform: scale(0.5) rotate(-12deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes ilsGuideFadeUp {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes ilsGuideBulletIn {
  0%   { opacity: 0; transform: translateX(-12px); }
  100% { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ils-modal--guide .ils-guide-icon,
  .ils-modal--guide .ils-guide-tag,
  .ils-modal--guide .ils-guide-title,
  .ils-modal--guide .ils-guide-meta,
  .ils-modal--guide .ils-guide-desc,
  .ils-modal--guide .ils-guide-body,
  .ils-modal--guide .ils-guide-cta,
  .ils-modal--guide .ils-guide-bullets li { opacity: 1 !important; transform: none !important; animation: none !important; }
  .ils-modal--guide.is-open .ils-guide-icon::after { animation: none !important; }
}

/* Make the existing read-guide link feel like a real button */
.res-card-link {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* Entire resource card is clickable */
.res-card--clickable { outline: none; }
.res-card--clickable:focus-visible {
  outline: 3px solid rgba(26, 86, 219, 0.45);
  outline-offset: 4px;
}


/* ============================================
   Policy pages (Privacy / Terms / Cookies)
   ============================================ */
.policy-hero {
  min-height: auto;
  padding: 200px 0 90px;
  /* No hero photo on policy pages — soft light backdrop to match the
     white-fade heroes (navy copy on top). */
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(26, 86, 219, 0.10), transparent 60%),
    linear-gradient(180deg, #eef3fb 0%, #dde8f7 100%);
}
.policy-hero .page-hero-title { max-width: 100%; }
.policy-hero .page-hero-subtitle { max-width: 100%; }
.policy-hero .page-hero-container { max-width: 900px; }

.policy-updated {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 16px;
}

.policy-section {
  padding: 60px 0 130px;
  background: var(--color-bg-soft);
}

.policy-container {
  max-width: 880px !important;
}

.policy-content {
  background: var(--surface);
  padding: 56px 64px;
  border-radius: 22px;
  border: 1px solid var(--color-border);
  box-shadow: 0 12px 36px rgba(10, 26, 58, 0.06);
}

.policy-content h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 36px 0 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border);
}
.policy-content h2:first-child { margin-top: 0; }

.policy-content p,
.policy-content ul,
.policy-content ol {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--color-text-soft);
  margin: 0 0 16px;
}

.policy-content strong { color: var(--color-text); }

.policy-content ul,
.policy-content ol {
  padding-left: 22px;
}
.policy-content li { margin-bottom: 8px; }

.policy-content a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(26, 86, 219, 0.3);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.policy-content a:hover {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary);
}

.policy-contact {
  background: var(--color-bg);
  padding: 18px 22px;
  border-radius: 12px;
  border-left: 3px solid var(--color-primary);
  margin-top: 10px;
}

.policy-table {
  overflow-x: auto;
  margin: 16px 0 24px;
}
.policy-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.policy-table th,
.policy-table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-soft);
}
.policy-table th {
  background: var(--color-bg);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text);
}
.policy-table tr:last-child td { border-bottom: none; }

@media (max-width: 760px) {
  .policy-hero { padding: 150px 0 60px; }
  .policy-section { padding: 40px 0 90px; }
  .policy-content { padding: 36px 24px; border-radius: 16px; }
  .policy-content h2 { font-size: 19px; margin-top: 28px; }
  .policy-table th, .policy-table td { padding: 10px 12px; font-size: 13.5px; }
}

@media (max-width: 560px) {
  .ils-modal--guide .ils-guide-dialog { padding: 44px 24px 28px; }
  .ils-guide-btn { width: 100%; min-width: 0; }
}

/* ============================================
   Home page loading splash — 3-second corporate intro
   ============================================ */
html.ils-splash-locked,
html.ils-splash-locked body {
  overflow: hidden;
}

.ils-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(26, 86, 219, 0.65) 0%, rgba(26, 86, 219, 0) 55%),
    radial-gradient(circle at 80% 80%, rgba(11, 59, 140, 0.7) 0%, rgba(11, 59, 140, 0) 60%),
    linear-gradient(135deg, var(--color-primary-darker) 0%, var(--color-primary-dark) 55%, var(--color-primary) 100%);
  opacity: 1;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.ils-splash::before,
.ils-splash::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* faint grid lines for "global ops" feel */
.ils-splash::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.6;
}
/* soft vignette */
.ils-splash::after {
  background: radial-gradient(circle, transparent 50%, rgba(0, 0, 0, 0.35) 100%);
}
.ils-splash.is-leaving {
  opacity: 0;
  visibility: hidden;
}

.ils-splash-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 0 28px;
  max-width: 520px;
  width: 100%;
  text-align: center;
  animation: ilsSplashFadeUp 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes ilsSplashFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ils-splash-logo img {
  width: 220px;
  height: auto;
  max-width: 70vw;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.35));
  animation: ilsSplashLogo 2.6s ease-in-out infinite;
}
@keyframes ilsSplashLogo {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

.ils-splash-route {
  width: 100%;
  max-width: 420px;
  height: 90px;
  position: relative;
}
.ils-splash-route svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ils-splash-plane {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}

.ils-splash-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #ffffff;
}
.ils-splash-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.42em;
  color: rgba(255, 255, 255, 0.7);
}
.ils-splash-tag {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
}

.ils-splash-bar {
  position: relative;
  width: 240px;
  max-width: 70vw;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
}
.ils-splash-bar-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), #ffffff);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
  animation: ilsSplashFill 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes ilsSplashFill {
  from { width: 0; }
  to   { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ils-splash-logo img,
  .ils-splash-plane,
  .ils-splash-stage { animation: none; }
}

/* ============================================
   Top contact banner — above the navbar
   ============================================ */
.ils-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  background: linear-gradient(90deg, var(--color-primary-darker) 0%, var(--color-primary-dark) 45%, var(--color-primary) 100%);
  color: #ffffff;
  font-size: 13.5px;
  line-height: 1.3;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 18px rgba(11, 59, 140, 0.25);
}
.ils-topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ils-topbar-tagline {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ils-topbar-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  flex-shrink: 0;
  animation: ilsTopbarPulse 1.8s ease-out infinite;
}
@keyframes ilsTopbarPulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.ils-topbar-tagline-text {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.ils-topbar-tagline-text strong {
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ils-topbar-tagline-sub {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ils-topbar-contact {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.ils-topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color 0.2s ease, transform 0.2s ease;
}
.ils-topbar-link:hover {
  color: #bfdbfe;
  transform: translateY(-1px);
}
.ils-topbar-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.ils-topbar-link--wa svg { color: #4ade80; }
.ils-topbar-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.25);
}
.ils-topbar-social {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ils-topbar-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.ils-topbar-social-link:hover {
  background: #ffffff;
  color: var(--color-primary-dark);
  transform: translateY(-1px);
}
.ils-topbar-social-link svg {
  width: 15px;
  height: 15px;
}

/* Push navbar down so it sits flush below the banner (no gap) */
.navbar {
  top: var(--ils-topbar-height, 0px);
}

@media (max-width: 960px) {
  .ils-topbar-inner { padding: 9px 28px; gap: 16px; }
  .ils-topbar-tagline-sub { display: none; }
  .ils-topbar-contact { gap: 14px; }
  .ils-topbar-link span { display: none; }
  .ils-topbar-link svg { width: 18px; height: 18px; }
  .ils-topbar-sep { display: none; }
  /* Socials live in the navbar/footer too — drop them from the utility bar so
     the tagline and the three quick-contact icons never crowd each other. */
  .ils-topbar-social { display: none; }
  /* Let the tagline take the space that's left and truncate with an ellipsis
     instead of overrunning the contact icons on narrow screens. */
  .ils-topbar-tagline { flex: 1 1 auto; overflow: hidden; }
  .ils-topbar-tagline-text { overflow: hidden; }
  .ils-topbar-tagline-text strong { overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 560px) {
  .ils-topbar { font-size: 12.5px; }
  .ils-topbar-inner { padding: 8px 16px; gap: 12px; }
  .ils-topbar-tagline-text strong { font-size: 12.5px; }
  .ils-topbar-pulse { width: 8px; height: 8px; }
}

/* ============================================================
   COMPREHENSIVE RESPONSIVE OVERRIDES — tablet + mobile polish
   ============================================================ */

/* --- Mobile menu drawer (≤ 980px) --- */
@media (max-width: 980px) {
  /* Make the burger render as a clean animated X when active */
  .nav-burger {
    display: flex;
    z-index: 1300;
    position: relative;
  }
  .nav-burger span {
    transition: transform 0.3s ease, opacity 0.2s ease;
    transform-origin: center;
  }
  .nav-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.is-active span:nth-child(2) { opacity: 0; }
  .nav-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* When body has the open class, slide the nav-menu in as a full drawer */
  body.is-mobile-nav-open {
    overflow: hidden;
  }
  body.is-mobile-nav-open .nav-menu {
    display: block !important;
    position: fixed;
    top: var(--ils-topbar-height, 0px);
    right: 0;
    bottom: 0;
    width: min(86vw, 360px);
    background: var(--surface);
    box-shadow: -16px 0 40px rgba(11, 59, 140, 0.18);
    z-index: 1200;
    overflow-y: auto;
    padding: 24px 24px 80px;
    animation: ilsMobileNavIn 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  @keyframes ilsMobileNavIn {
    from { transform: translateX(100%); opacity: 0.4; }
    to   { transform: translateX(0);    opacity: 1;   }
  }
  body.is-mobile-nav-open::after {
    content: "";
    position: fixed;
    top: var(--ils-topbar-height, 0px);
    left: 0; right: 0; bottom: 0;
    background: rgba(6, 35, 79, 0.4);
    z-index: 1150;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  body.is-mobile-nav-open .nav-menu ul {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  body.is-mobile-nav-open .nav-menu > ul > li {
    border-bottom: 1px solid rgba(10, 26, 58, 0.08);
  }
  body.is-mobile-nav-open .nav-menu a {
    padding: 14px 4px;
    font-size: 15px;
    width: 100%;
    justify-content: space-between;
  }
  /* Submenus collapsed by default in mobile, expand on .is-expanded */
  body.is-mobile-nav-open .nav-menu .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    pointer-events: auto;
    background: transparent;
    padding: 0 0 12px 4px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }
  body.is-mobile-nav-open .nav-menu .has-submenu.is-expanded > .submenu {
    max-height: 800px;
  }
  body.is-mobile-nav-open .nav-menu .submenu-inner {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 8px 0;
    min-width: 0;
  }
  body.is-mobile-nav-open .nav-menu .submenu-item {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13.5px;
  }
  body.is-mobile-nav-open .nav-menu .caret {
    transition: transform 0.3s ease;
  }
  body.is-mobile-nav-open .nav-menu .has-submenu.is-expanded > a .caret {
    transform: rotate(90deg);
  }

  /* Mobile-only CTA inside drawer */
  body.is-mobile-nav-open .nav-menu::after {
    content: "";
    display: block;
    height: 1px;
    margin: 16px 0;
  }
}

/* --- Tablet (≤ 980px) general --- */
@media (max-width: 980px) {
  /* Grids */
  .home-services-grid,
  .home-destinations-grid,
  .home-testimonials-grid,
  .footer-grid,
  .industries-grid,
  .resources-grid,
  .solutions-grid,
  .blog-grid,
  .service-features,
  .service-process,
  .service-usecases,
  .leadership-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px !important;
  }
  .blog-grid { gap: 24px !important; }

  /* Hero typography */
  .hero-title,
  .page-hero-title { font-size: clamp(34px, 6vw, 52px); }

  /* Section titles */
  .section-title,
  .cta-title { font-size: clamp(28px, 4.5vw, 40px); }

  /* Container padding */
  .container,
  .nav-container {
    padding-left: 28px;
    padding-right: 28px;
  }

  /* Featured blog stacks */
  .blog-featured-card {
    grid-template-columns: 1fr !important;
  }
  .blog-featured-media { min-height: 240px; }

  /* Leadership trust badge wraps */
  .hero-leaders { flex-wrap: wrap; }
}

/* --- Mobile (≤ 640px) --- */
@media (max-width: 640px) {
  /* Stack all multi-column grids */
  .home-services-grid,
  .home-destinations-grid,
  .home-testimonials-grid,
  .footer-grid,
  .industries-grid,
  .resources-grid,
  .solutions-grid,
  .blog-grid,
  .service-features,
  .service-process,
  .service-usecases,
  .leadership-grid,
  .hero-features,
  .home-stats-grid,
  .destinations-grid,
  .policy-table {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Container compact padding */
  .container,
  .nav-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Hero text */
  .hero-title,
  .page-hero-title { font-size: clamp(28px, 8vw, 42px); line-height: 1.1; }
  .hero-subtitle,
  .page-hero-subtitle { font-size: 15px; }
  .hero-actions,
  .page-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn,
  .page-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Section headings */
  .section-title,
  .cta-title { font-size: clamp(24px, 6.5vw, 34px); }
  .section-subtitle,
  .cta-subtitle { font-size: 14.5px; }

  /* Reduce vertical padding on big sections */
  .home-services,
  .home-destinations,
  .home-clients,
  .home-testimonials,
  .home-stats,
  .blog-featured,
  .blog-grid-section,
  .cta-section,
  section[class*="-section"] {
    padding-top: clamp(60px, 12vw, 90px) !important;
    padding-bottom: clamp(60px, 12vw, 90px) !important;
  }

  /* Page hero adjustments — keep enough top room to clear the fixed
     topbar + navbar (~131px) so the glass card never tucks under it. */
  .page-hero { min-height: auto; padding: 150px 0 70px; }
  .page-hero--centered { min-height: 70vh; }

  /* Newsletter */
  .newsletter-form {
    flex-direction: column;
    gap: 10px;
  }
  .newsletter-form input,
  .newsletter-form button {
    width: 100%;
  }

  /* Filter scroll on overflow */
  .blog-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .blog-filter { flex-shrink: 0; }

  /* Service cards on detail pages */
  .service-feature-card,
  .service-process-step,
  .service-usecase-card {
    padding: 22px 20px;
  }

  /* Stats cards */
  .home-stat { padding: 22px 18px; }
  .home-stat-value { font-size: clamp(34px, 9vw, 52px); }

  /* Footer compact */
  .footer-grid { gap: 32px; }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* Hide cargo FAB on very small screens to free space; keep quote/WA */
  .ils-cargo-fab { display: none; }

  /* Make floating widgets smaller — keep them perfect circles with the icon centred */
  .ils-fab {
    width: 54px;
    height: 54px;
    padding: 0;
    font-size: 13px;
    justify-content: center;
  }
  .ils-fab .ils-fab-icon { flex: 0 0 54px; width: 54px; height: 54px; }
  /* Label stays collapsed on mobile so the button never loses its round shape */
  .ils-fab-label { display: none; }
  .ils-fab:hover { width: 54px; padding-right: 0; }
}

/* --- Small mobile (≤ 420px) --- */
@media (max-width: 420px) {
  .hero { padding-top: 110px; padding-bottom: 70px; }
  .hero-title,
  .page-hero-title { font-size: 28px; }
  .nav-logo img { height: 36px; }
  .nav-cta { padding: 8px 16px; font-size: 13px; }
  .container,
  .nav-container { padding-left: 16px; padding-right: 16px; }
}

/* --- Touch-friendly: bigger tap targets on all touch devices --- */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav-cta, .blog-filter, .submenu-item {
    min-height: 44px;
  }
}

/* =====================================================================
   ADVANCED QUOTATION MODAL — high-tech, animated, professional
   ===================================================================== */

.quote-modal {
  position: fixed; inset: 0;
  z-index: 9999;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .35s ease;
}
.quote-modal.is-open { display: flex; opacity: 1; }
html.quote-modal-locked, html.quote-modal-locked body { overflow: hidden; }

.quote-modal-backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(36,82,255,0.35), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(0,180,255,0.28), transparent 55%),
    rgba(4, 10, 30, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.quote-modal-shell {
  position: relative;
  width: min(960px, 100%);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(10,18,46,0.96), rgba(6,12,32,0.96));
  border: 1px solid rgba(120,170,255,0.22);
  box-shadow:
    0 30px 120px rgba(0, 20, 90, 0.55),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 60px rgba(60,120,255,0.25) inset;
  color: #e8efff;
  display: flex;
  flex-direction: column;
  transform: translateY(24px) scale(.96);
  opacity: 0;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}
.quote-modal.is-open .quote-modal-shell { transform: translateY(0) scale(1); opacity: 1; }

/* tech FX backdrop inside modal */
.quote-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.quote-fx-grid {
  position: absolute; inset: -20%;
  background-image:
    linear-gradient(rgba(120,170,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,170,255,0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
  animation: quoteGridDrift 22s linear infinite;
}
@keyframes quoteGridDrift {
  from { transform: translate(0,0); }
  to   { transform: translate(40px, 40px); }
}
.quote-fx-scan {
  position: absolute; left: 0; right: 0; height: 140px;
  background: linear-gradient(180deg, transparent, rgba(120,180,255,0.10) 45%, rgba(120,180,255,0.18) 50%, rgba(120,180,255,0.10) 55%, transparent);
  filter: blur(3px);
  animation: quoteScan 6s ease-in-out infinite;
}
@keyframes quoteScan {
  0%, 100% { transform: translateY(-180px); opacity: 0; }
  20%      { opacity: .9; }
  80%      { opacity: .9; }
  50%      { transform: translateY(600px); }
}
.quote-fx-orb {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: .55;
}
.quote-fx-orb-1 { width: 320px; height: 320px; background: #3463ff; top: -90px; left: -90px; animation: quoteOrb1 12s ease-in-out infinite alternate; }
.quote-fx-orb-2 { width: 260px; height: 260px; background: #00c2ff; bottom: -80px; right: -60px; animation: quoteOrb2 14s ease-in-out infinite alternate; }
@keyframes quoteOrb1 { to { transform: translate(60px, 40px) scale(1.1); } }
@keyframes quoteOrb2 { to { transform: translate(-50px, -30px) scale(1.15); } }

.quote-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s, border-color .2s;
}
.quote-modal-close:hover { background: rgba(255,255,255,0.14); transform: rotate(90deg); border-color: rgba(255,255,255,0.4); }

.quote-modal-head {
  position: relative; z-index: 2;
  padding: 34px 38px 18px;
  border-bottom: 1px solid rgba(120,170,255,0.12);
}
.quote-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .22em; font-weight: 600;
  color: #8fb1ff; text-transform: uppercase;
}
.quote-eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #36e0a3;
  box-shadow: 0 0 0 4px rgba(54, 224, 163, 0.18);
  animation: quotePulseDot 1.6s ease-in-out infinite;
}
@keyframes quotePulseDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(54, 224, 163, 0.18); }
  50%      { box-shadow: 0 0 0 9px rgba(54, 224, 163, 0); }
}
.quote-modal-title {
  margin: 10px 0 6px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}
.quote-modal-title .accent {
  background: linear-gradient(90deg, #6aa6ff, #36e0a3);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.quote-modal-subtitle { color: rgba(220,232,255,0.72); font-size: 14px; max-width: 560px; }

.quote-steps {
  display: flex; gap: 8px; margin: 20px 0 0; padding: 0;
  list-style: none; flex-wrap: wrap;
}
.quote-steps li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(220,232,255,0.5);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(120,170,255,0.16);
  background: rgba(120,170,255,0.05);
  transition: color .25s, border-color .25s, background .25s;
}
.quote-steps li span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 10px;
  background: rgba(120,170,255,0.16);
  color: #b8cdff;
}
.quote-steps li.is-active {
  color: #fff;
  border-color: rgba(106, 166, 255, 0.6);
  background: rgba(106, 166, 255, 0.15);
  box-shadow: 0 0 0 4px rgba(106, 166, 255, 0.08);
}
.quote-steps li.is-active span { background: linear-gradient(135deg, #6aa6ff, #36e0a3); color: #061025; font-weight: 700; }
.quote-steps li.is-done { color: #b8e8d6; border-color: rgba(54, 224, 163, 0.45); }
.quote-steps li.is-done span { background: rgba(54, 224, 163, 0.35); color: #061025; }

.quote-form {
  position: relative; z-index: 2;
  padding: 22px 38px 0;
  overflow-y: auto;
  flex: 1;
}

.quote-step { display: none; animation: quoteStepIn .5s cubic-bezier(.2,.8,.2,1) both; }
.quote-step.is-active { display: block; }
@keyframes quoteStepIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}
.quote-field { position: relative; display: flex; flex-direction: column; gap: 6px; }
.quote-field-full { grid-column: 1 / -1; }
.quote-label {
  font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase;
  color: #8fb1ff;
  font-weight: 600;
}
.quote-label i { color: #ff7a7a; font-style: normal; }

.quote-field input,
.quote-field select,
.quote-field textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(120,170,255,0.18);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: #f0f5ff;
  font-family: inherit;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.quote-field textarea { resize: vertical; min-height: 88px; }
.quote-field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238fb1ff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.quote-field select option { background: #0a1230; color: #f0f5ff; }
.quote-field input::placeholder,
.quote-field textarea::placeholder { color: rgba(220,232,255,0.35); }
.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus {
  outline: none;
  border-color: #6aa6ff;
  background: rgba(106, 166, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(106, 166, 255, 0.18);
}
.quote-field.is-invalid input,
.quote-field.is-invalid select,
.quote-field.is-invalid textarea {
  border-color: #ff7a7a;
  box-shadow: 0 0 0 3px rgba(255, 122, 122, 0.18);
}
.quote-field-line {
  position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #6aa6ff, #36e0a3);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  border-radius: 2px; pointer-events: none;
}
.quote-field input:focus ~ .quote-field-line,
.quote-field select:focus ~ .quote-field-line,
.quote-field textarea:focus ~ .quote-field-line { transform: scaleX(1); }

/* service cards */
.quote-service-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 22px;
}
.quote-service { position: relative; cursor: pointer; }
.quote-service input { position: absolute; opacity: 0; pointer-events: none; }
.quote-service-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 16px 10px; height: 100%;
  border-radius: 14px;
  border: 1px solid rgba(120,170,255,0.2);
  background: rgba(255,255,255,0.03);
  color: #d8e6ff;
  text-align: center;
  transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
}
.quote-service-card svg { width: 28px; height: 28px; stroke: #8fb1ff; transition: stroke .25s, transform .25s; }
.quote-service-card b { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.quote-service:hover .quote-service-card { transform: translateY(-2px); border-color: rgba(106,166,255,0.5); }
.quote-service input:checked + .quote-service-card {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(106,166,255,0.22), rgba(54,224,163,0.18));
  box-shadow: 0 0 0 1px rgba(106,166,255,0.55), 0 10px 30px rgba(0, 40, 120, 0.4);
  color: #fff;
}
.quote-service input:checked + .quote-service-card svg { stroke: #36e0a3; transform: scale(1.08); }

/* review */
.quote-review-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px;
  background: rgba(106, 166, 255, 0.08);
  border: 1px solid rgba(106, 166, 255, 0.22);
  border-radius: 14px;
  margin-bottom: 16px;
}
.quote-review-head strong { display: block; color: #fff; font-size: 15px; margin-bottom: 2px; }
.quote-review-head p { margin: 0; font-size: 13px; color: rgba(220,232,255,0.7); }
.quote-pulse {
  flex: none;
  width: 14px; height: 14px; margin-top: 4px; border-radius: 50%;
  background: #36e0a3; box-shadow: 0 0 0 6px rgba(54, 224, 163, 0.22);
  animation: quotePulseDot 1.6s ease-in-out infinite;
}
.quote-review-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px;
  margin: 0 0 18px;
}
.quote-review-list .item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(120,170,255,0.14);
  border-radius: 10px;
}
.quote-review-list dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8fb1ff; }
.quote-review-list dd { margin: 0; font-size: 14px; color: #f0f5ff; word-break: break-word; }
.quote-review-list .item.full { grid-column: 1 / -1; }

.quote-consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; color: rgba(220,232,255,0.78);
  padding: 12px 4px;
}
.quote-consent input { margin-top: 3px; accent-color: #6aa6ff; }
.quote-consent a { color: #8fb1ff; text-decoration: underline; }

/* actions */
.quote-form-actions {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 18px 38px 26px;
  border-top: 1px solid rgba(120,170,255,0.12);
  background: rgba(4, 10, 30, 0.55);
}
.quote-form-status {
  flex: 1; font-size: 12.5px; color: rgba(220,232,255,0.65);
  min-height: 16px;
}
.quote-form-status.is-error { color: #ff9a9a; }

.quote-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .25s, border-color .25s, color .25s, opacity .2s;
}
.quote-btn:disabled { opacity: .45; cursor: not-allowed; }
.quote-btn-ghost {
  background: transparent; color: #d8e6ff;
  border-color: rgba(255,255,255,0.2);
}
.quote-btn-ghost:hover:not(:disabled) { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.06); }
.quote-btn-primary {
  background: linear-gradient(120deg, #3463ff, #00b4ff 55%, #36e0a3);
  background-size: 220% 220%; background-position: 0% 50%;
  color: #fff;
  box-shadow: 0 14px 36px rgba(0, 70, 220, 0.45), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.quote-btn-primary:hover:not(:disabled) {
  background-position: 100% 50%;
  transform: translateY(-1px);
  box-shadow: 0 20px 44px rgba(0, 70, 220, 0.55), 0 0 0 1px rgba(255,255,255,0.12) inset;
}

/* success state */
.quote-success {
  position: absolute; inset: 0; z-index: 5;
  display: none; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 40px;
  background: radial-gradient(ellipse at center, rgba(10,18,46,0.96), rgba(6,12,32,0.99));
  color: #fff;
}
.quote-success.is-shown { display: flex; animation: quoteStepIn .5s ease both; }
.quote-success h3 { margin: 18px 0 8px; font-size: 26px; }
.quote-success p { color: rgba(220,232,255,0.78); max-width: 480px; font-size: 14.5px; line-height: 1.55; }
.quote-success a { color: #8fb1ff; text-decoration: underline; }
.quote-success-ring {
  width: 84px; height: 84px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(54,224,163,0.25), rgba(54,224,163,0) 70%);
}
.quote-success-ring svg {
  width: 68px; height: 68px;
  stroke: #36e0a3; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  fill: none;
}
.quote-success-ring circle {
  stroke-dasharray: 160; stroke-dashoffset: 160;
  animation: quoteRing 0.7s ease-out forwards;
}
.quote-success-ring path {
  stroke-dasharray: 50; stroke-dashoffset: 50;
  animation: quoteRing 0.5s 0.5s ease-out forwards;
}
@keyframes quoteRing { to { stroke-dashoffset: 0; } }
.quote-success .quote-btn { margin-top: 22px; }

/* Responsive */
@media (max-width: 760px) {
  .quote-modal { padding: 12px; }
  .quote-modal-shell { max-height: calc(100vh - 24px); border-radius: 18px; }
  .quote-modal-head { padding: 26px 22px 14px; }
  .quote-form { padding: 18px 22px 0; }
  .quote-form-actions { padding: 16px 22px 20px; gap: 8px; }
  .quote-grid { grid-template-columns: 1fr; gap: 14px; }
  .quote-service-row { grid-template-columns: repeat(2, 1fr); }
  .quote-review-list { grid-template-columns: 1fr; }
  .quote-steps li { padding: 6px 10px; font-size: 11px; }
  .quote-btn { padding: 10px 16px; font-size: 13px; }
  .quote-form-status { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .quote-fx-grid, .quote-fx-scan, .quote-fx-orb-1, .quote-fx-orb-2,
  .quote-eyebrow-dot, .quote-pulse, .quote-success-ring circle, .quote-success-ring path,
  .quote-modal, .quote-modal-shell, .quote-step { animation: none !important; transition: none !important; }
}

/* =====================================================================
   CORPORATE VIDEO MODAL — professional, looping, polished
   ===================================================================== */
.video-modal {
  position: fixed; inset: 0;
  z-index: 9999;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .35s ease;
}
.video-modal.is-open { display: flex; opacity: 1; }
html.video-modal-locked, html.video-modal-locked body { overflow: hidden; }

.video-modal-backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 15% 15%, rgba(36,82,255,0.32), transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(0,180,255,0.26), transparent 55%),
    rgba(2, 6, 22, 0.86);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.video-modal-shell {
  position: relative;
  width: min(1080px, 100%);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(10,18,46,0.96), rgba(6,12,32,0.96));
  border: 1px solid rgba(120,170,255,0.22);
  box-shadow:
    0 30px 120px rgba(0, 20, 90, 0.6),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 60px rgba(60,120,255,0.22) inset;
  color: #e8efff;
  display: flex;
  flex-direction: column;
  transform: translateY(24px) scale(.96);
  opacity: 0;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}
.video-modal.is-open .video-modal-shell { transform: translateY(0) scale(1); opacity: 1; }

.video-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.video-fx-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.video-fx-orb-1 { width: 320px; height: 320px; background: #3463ff; top: -110px; left: -90px; animation: quoteOrb1 12s ease-in-out infinite alternate; }
.video-fx-orb-2 { width: 280px; height: 280px; background: #00c2ff; bottom: -90px; right: -80px; animation: quoteOrb2 14s ease-in-out infinite alternate; }

.video-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.35);
  color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s, border-color .2s;
}
.video-modal-close:hover { background: rgba(255,255,255,0.16); transform: rotate(90deg); border-color: rgba(255,255,255,0.45); }

.video-modal-head {
  position: relative; z-index: 2;
  padding: 26px 36px 14px;
}
.video-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .22em; font-weight: 600;
  color: #8fb1ff; text-transform: uppercase;
}
.video-eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d;
  box-shadow: 0 0 0 4px rgba(255, 77, 77, 0.22);
  animation: quotePulseDot 1.4s ease-in-out infinite;
}
.video-modal-title {
  margin: 10px 0 0;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}
.video-modal-title .accent {
  background: linear-gradient(90deg, #6aa6ff, #36e0a3);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.video-stage {
  position: relative; z-index: 2;
  padding: 8px 36px 18px;
}
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 26px 60px rgba(0, 30, 90, 0.55),
    0 0 0 1px rgba(120, 170, 255, 0.25),
    0 0 80px rgba(60, 120, 255, 0.25) inset;
}
.video-el {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  background: #000;
}

/* corner brackets — corporate hi-tech feel */
.video-corner {
  position: absolute; width: 22px; height: 22px;
  border: 2px solid rgba(106, 166, 255, 0.85);
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(106, 166, 255, 0.6));
}
.video-corner-tl { top: 10px; left: 10px; border-right: none; border-bottom: none; border-top-left-radius: 6px; }
.video-corner-tr { top: 10px; right: 10px; border-left: none; border-bottom: none; border-top-right-radius: 6px; }
.video-corner-bl { bottom: 10px; left: 10px; border-right: none; border-top: none; border-bottom-left-radius: 6px; }
.video-corner-br { bottom: 10px; right: 10px; border-left: none; border-top: none; border-bottom-right-radius: 6px; }

.video-modal-foot {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 36px 24px;
  border-top: 1px solid rgba(120,170,255,0.12);
  background: rgba(4, 10, 30, 0.55);
  flex-wrap: wrap;
}
.video-tagline {
  margin: 0;
  font-size: 13.5px;
  color: rgba(220, 232, 255, 0.78);
  max-width: 560px;
  line-height: 1.55;
}
.video-foot-actions { display: flex; gap: 10px; }

@media (max-width: 760px) {
  .video-modal { padding: 12px; }
  .video-modal-shell { border-radius: 18px; }
  .video-modal-head { padding: 22px 20px 10px; }
  .video-stage { padding: 6px 20px 14px; }
  .video-modal-foot { padding: 14px 20px 20px; flex-direction: column; align-items: stretch; }
  .video-foot-actions { justify-content: flex-end; }
  .video-corner { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-fx-orb-1, .video-fx-orb-2, .video-eyebrow-dot,
  .video-modal, .video-modal-shell { animation: none !important; transition: none !important; }
}

/* =====================================================================
   MOBILE POLISH — hero + drawer cleanup (overrides earlier rules)
   ===================================================================== */

/* --- Drawer: wider, premium, slides over navbar; backdrop covers all --- */
@media (max-width: 980px) {
  /* Make the burger always visible against any background, with a soft pill */
  .navbar .nav-burger {
    width: 44px; height: 44px;
    padding: 0;
    align-items: center; justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 14px rgba(10, 26, 58, 0.10);
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }
  .navbar .nav-burger span {
    width: 22px;
    background: #0a1a3a;
  }
  .navbar .nav-burger.is-active {
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(10, 26, 58, 0.16);
    position: fixed;
    top: calc(var(--ils-topbar-height, 0px) + 14px);
    right: 18px;
    z-index: 1400;
  }
  .navbar .nav-burger.is-active span { background: #0a1a3a; }

  /* Drawer */
  body.is-mobile-nav-open .nav-menu {
    width: min(92vw, 400px) !important;
    padding: 84px 22px 110px !important;
    background:
      radial-gradient(ellipse at top right, rgba(26, 86, 219, 0.10), transparent 55%),
      #ffffff !important;
    box-shadow: -22px 0 60px rgba(11, 59, 140, 0.22) !important;
    border-left: 1px solid rgba(26, 86, 219, 0.08);
  }

  /* Drawer header — adds an "ILS · Menu" eyebrow inside the panel */
  body.is-mobile-nav-open .nav-menu::before {
    content: "ILS · MENU";
    position: absolute;
    top: 28px; left: 24px; right: 70px;
    font-size: 11px;
    letter-spacing: 0.22em;
    font-weight: 700;
    color: #1a56db;
    opacity: 0.85;
  }

  /* List items — bigger tap targets, clean lines, subtle hover */
  body.is-mobile-nav-open .nav-menu > ul > li {
    border-bottom: 1px solid rgba(10, 26, 58, 0.07);
    padding: 2px 0;
  }
  body.is-mobile-nav-open .nav-menu > ul > li:last-child {
    border-bottom: none;
  }
  body.is-mobile-nav-open .nav-menu a {
    padding: 16px 6px !important;
    font-size: 16px !important;
    font-weight: 600;
    color: #0a1a3a;
    border-radius: 8px;
  }
  body.is-mobile-nav-open .nav-menu a:hover {
    background: rgba(26, 86, 219, 0.06);
    color: #1a56db;
  }
  body.is-mobile-nav-open .nav-menu .caret {
    color: rgba(10, 26, 58, 0.4);
    font-size: 18px;
  }
  body.is-mobile-nav-open .nav-menu .has-submenu.is-expanded > a {
    color: #1a56db;
  }
  body.is-mobile-nav-open .nav-menu .has-submenu.is-expanded > a .caret {
    color: #1a56db;
  }

  /* Submenu items inside drawer */
  body.is-mobile-nav-open .nav-menu .submenu-item {
    padding: 10px 14px !important;
    background: rgba(238, 243, 251, 0.6);
    margin: 2px 0;
    border-radius: 10px;
  }
  body.is-mobile-nav-open .nav-menu .submenu-icon {
    width: 26px; height: 26px;
    color: #1a56db;
  }
  body.is-mobile-nav-open .nav-menu .submenu-label {
    font-size: 13.5px !important;
    font-weight: 600;
  }
  body.is-mobile-nav-open .nav-menu .submenu-sub {
    font-size: 11px !important;
    color: rgba(10, 26, 58, 0.55);
  }

  /* CTA button rendered inline at the bottom of the drawer */
  body.is-mobile-nav-open .nav-menu::after {
    content: "Need a quote? Tap the floating button to start →";
    display: block;
    margin-top: 22px;
    padding: 14px 16px;
    font-size: 12.5px;
    color: rgba(10, 26, 58, 0.7);
    background: rgba(26, 86, 219, 0.06);
    border: 1px dashed rgba(26, 86, 219, 0.25);
    border-radius: 12px;
    line-height: 1.4;
    height: auto;
    text-align: center;
  }

  /* Stronger backdrop — full-screen dim */
  body.is-mobile-nav-open::after {
    background: rgba(6, 35, 79, 0.55) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }
}

/* --- Hero polish on phones (≤640px) --- */
@media (max-width: 640px) {
  .hero {
    padding-top: 120px !important;
    padding-bottom: 140px !important;   /* room for floating chat / quote */
    min-height: auto !important;
  }
  .hero-container {
    padding: 0 20px;
    align-items: flex-start;
  }
  .hero-content {
    max-width: 100%;
    margin-top: 8px;
  }
  .hero-texts { margin-bottom: 22px; }
  .hero-title {
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.06;
  }
  .hero-title .line { white-space: normal; }
  .hero-divider { margin: 18px 0; width: 44px; height: 3px; }
  .hero-subtitle {
    font-size: 15px;
    color: #2b3a5a;        /* darker — was too faded in screenshot */
    max-width: 100%;
  }

  /* Action buttons — stack, full-width, equal weight, no oversized pill */
  .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 28px;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    font-size: 15px;
  }
  .hero-actions .btn-primary {
    padding: 14px 22px;
    box-shadow: 0 10px 24px rgba(26, 86, 219, 0.30);
  }
  .hero-actions .btn-ghost {
    padding: 12px 22px;
    background: var(--surface);
    border-radius: 999px;
    color: #0a1a3a;
    box-shadow: 0 4px 14px rgba(10, 26, 58, 0.08);
  }
  .hero-actions .btn-ghost .play-icon {
    width: 30px; height: 30px;
    background: #1a56db;
    color: #ffffff;
    box-shadow: none;
  }

  /* Features row — single column, compact */
  .hero-features {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding-top: 22px !important;
  }
  .hero-features .feature {
    display: flex; align-items: center; gap: 12px;
  }
  .hero-features .feature-icon {
    width: 36px; height: 36px;
    flex: none;
  }

  /* Leadership trust pill — pad below so floating buttons don't collide */
  .hero-leaders {
    margin-top: 22px;
    margin-bottom: 12px;
    padding: 12px 16px 12px 12px;
    gap: 12px;
  }
  .hero-leaders-text strong { font-size: 14px; }
  .hero-leaders-text span { font-size: 12.5px; line-height: 1.4; }
  .hero-leader-avatar { width: 38px; height: 38px; }

  /* Hide hero dots on phone (too tight against content) */
  .hero-dots { display: none !important; }

  /* Floating chat / quote — keep clear of the leadership pill */
  .ils-floating-widgets {
    right: 14px;
    bottom: 14px;
  }
}

/* --- Tiny phones (≤ 420px) --- */
@media (max-width: 420px) {
  .hero { padding-top: 110px !important; padding-bottom: 130px !important; }
  .hero-title { font-size: 32px !important; }
  .hero-subtitle { font-size: 14.5px; }
  .hero-leaders { border-radius: 18px; }
  .hero-leaders-text span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body.is-mobile-nav-open .nav-menu {
    width: 100vw !important;
    max-width: 100vw !important;
    border-left: none;
  }
}

/* =====================================================================
   WATCH OUR VIDEO — outlined CTA with attention-arrow animation
   ===================================================================== */
.watch-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Outlined stroke button */
.btn-watch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 13px 26px 13px 18px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* fill sweep on hover */
.btn-watch::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--color-primary), #2a6dff);
  transform: translateX(-101%);
  transition: transform .45s cubic-bezier(.6,.05,.2,1);
  z-index: -1;
}
.btn-watch:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(26, 86, 219, 0.35); }
.btn-watch:hover::before { transform: translateX(0); }
.btn-watch:focus-visible { outline: 3px solid rgba(26, 86, 219, 0.35); outline-offset: 3px; }

.watch-label { white-space: nowrap; }

/* Play icon with ripple rings */
.watch-play {
  position: relative;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-primary);
  transition: color .35s ease;
}
.btn-watch:hover .watch-play { color: #fff; }
.watch-play svg { width: 30px; height: 30px; display: block; }
.watch-play-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: watchRing 2.2s ease-out infinite;
}
.watch-play-ring-2 { animation-delay: 1.1s; }
@keyframes watchRing {
  0%   { transform: scale(0.6); opacity: 0.55; }
  80%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ---- Attention arrow ("Watch this!") drawing itself + bouncing ---- */
.watch-hint {
  position: absolute;
  left: -118px;
  top: 50%;
  transform: translateY(-90%);
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #1a56db;
  pointer-events: none;
  animation: watchHintBounce 1.8s ease-in-out infinite;
}
.watch-hint-text {
  font-family: "Caveat", "Patrick Hand", "Bradley Hand", cursive, system-ui;
  font-size: 22px;
  font-weight: 700;
  color: #ff5a36;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  transform: rotate(-6deg);
  margin-bottom: -4px;
  margin-right: 14px;
}
.watch-hint-arrow {
  width: 110px; height: 70px;
  color: #ff5a36;
  filter: drop-shadow(0 2px 4px rgba(255, 90, 54, 0.25));
}
.watch-hint-path,
.watch-hint-head {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: watchHintDraw 2.6s ease-in-out infinite;
}
.watch-hint-head { animation-delay: .35s; }
@keyframes watchHintDraw {
  0%   { stroke-dashoffset: 200; }
  35%  { stroke-dashoffset: 0; }
  78%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes watchHintBounce {
  0%, 100% { transform: translate(0, -90%); }
  50%      { transform: translate(-6px, calc(-90% - 4px)); }
}

/* Tablet — keep the hint, slightly smaller */
@media (max-width: 980px) {
  .watch-hint { left: -98px; width: 92px; }
  .watch-hint-arrow { width: 92px; height: 60px; }
  .watch-hint-text { font-size: 19px; margin-right: 10px; }
}

/* Mobile — move the hint above the button so it doesn't overlap layout */
@media (max-width: 640px) {
  .watch-wrap { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
  .watch-hint {
    position: static;
    transform: none !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-bottom: 2px;
    animation: watchHintBounceMobile 1.8s ease-in-out infinite;
  }
  .watch-hint-text { margin: 0; transform: rotate(-4deg); font-size: 18px; }
  .watch-hint-arrow {
    transform: rotate(58deg) scaleY(-1);
    width: 50px; height: 36px;
  }
  @keyframes watchHintBounceMobile {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
  }
  /* Mobile button matches outlined style + full width */
  .btn-watch {
    width: 100%;
    justify-content: center;
    padding: 13px 22px;
    font-size: 15px;
  }
}

/* Honour reduced motion */
@media (prefers-reduced-motion: reduce) {
  .watch-hint, .watch-hint-path, .watch-hint-head,
  .watch-play-ring, .watch-play-ring-2 { animation: none !important; }
  .watch-hint-path, .watch-hint-head { stroke-dashoffset: 0 !important; }
}

/* =====================================================================
   MOBILE DRAWER — stacking + visual fix
   The navbar has z-index:50 (its own stacking context), which trapped
   the drawer below the body::after backdrop. We lift the navbar above
   the backdrop only while the drawer is open, force the drawer fully
   opaque, hide the side widgets, and replace the dashed hint with a
   real Get-a-Quote button inside the drawer.
   ===================================================================== */

@media (max-width: 980px) {
  /* Lift the whole navbar above the backdrop while the drawer is open */
  body.is-mobile-nav-open .navbar {
    z-index: 1300 !important;
  }

  /* Drawer — fully opaque, no gradient, crisp shadow */
  body.is-mobile-nav-open .nav-menu {
    background: var(--surface) !important;
    box-shadow: -22px 0 60px rgba(11, 59, 140, 0.28) !important;
    border-left: 1px solid rgba(10, 26, 58, 0.08);
    padding: 78px 22px 32px !important;
    width: min(92vw, 380px) !important;
    color: #0a1a3a;
  }

  /* Drawer header — solid eyebrow + clean line */
  body.is-mobile-nav-open .nav-menu::before {
    content: "MENU";
    position: absolute;
    top: 26px; left: 24px;
    font-size: 11px;
    letter-spacing: 0.32em;
    font-weight: 800;
    color: #1a56db;
    opacity: 1;
    padding-bottom: 14px;
  }

  /* Cleaner top divider just under the eyebrow */
  body.is-mobile-nav-open .nav-menu > ul {
    border-top: 1px solid rgba(10, 26, 58, 0.08);
    margin-top: 6px;
    padding-top: 8px;
  }

  body.is-mobile-nav-open .nav-menu > ul > li > a {
    color: #0a1a3a !important;
    font-weight: 600 !important;
    font-size: 16px !important;
  }
  body.is-mobile-nav-open .nav-menu .caret {
    color: #1a56db !important;
    opacity: 1 !important;
  }
  body.is-mobile-nav-open .nav-menu .submenu-label {
    color: #0a1a3a !important;
  }
  body.is-mobile-nav-open .nav-menu .submenu-sub {
    color: rgba(10, 26, 58, 0.6) !important;
  }
  body.is-mobile-nav-open .nav-menu .submenu-icon {
    color: #1a56db !important;
  }

  /* Replace the dashed pseudo-element hint with a real CTA button */
  body.is-mobile-nav-open .nav-menu::after {
    content: none !important;
  }
  .nav-mobile-cta {
    display: none;
  }
  body.is-mobile-nav-open .nav-mobile-cta {
    display: flex;
    margin-top: 22px;
    padding: 14px 22px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #1a56db;
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 10px 24px rgba(26, 86, 219, 0.32);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  }
  body.is-mobile-nav-open .nav-mobile-cta:hover {
    background: #1346b3;
    transform: translateY(-1px);
  }
  body.is-mobile-nav-open .nav-mobile-cta .arrow { font-size: 18px; line-height: 1; }

  /* Small phone/email/whatsapp contact row inside drawer */
  .nav-mobile-contacts { display: none; }
  body.is-mobile-nav-open .nav-mobile-contacts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
  }
  body.is-mobile-nav-open .nav-mobile-contacts a {
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 10px;
    background: rgba(26, 86, 219, 0.06);
    color: #1a56db;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
  }
  body.is-mobile-nav-open .nav-mobile-contacts a svg { width: 16px; height: 16px; }
  body.is-mobile-nav-open .nav-mobile-contacts a:hover { background: rgba(26, 86, 219, 0.12); }

  /* Hide the floating WhatsApp + Quote widgets while drawer is open */
  body.is-mobile-nav-open .ils-floating-widgets {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  /* Premium close button — circular, blue ring */
  .navbar .nav-burger.is-active {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid rgba(26, 86, 219, 0.2);
    box-shadow: 0 6px 18px rgba(10, 26, 58, 0.15);
    top: calc(var(--ils-topbar-height, 0px) + 16px);
    right: 16px;
  }
  .navbar .nav-burger.is-active span {
    background: #1a56db;
  }

  /* Backdrop — keep the dim/blur but make sure it sits under the drawer */
  body.is-mobile-nav-open::after {
    z-index: 1250 !important;     /* below navbar (1300), above page */
  }
}

@media (max-width: 420px) {
  body.is-mobile-nav-open .nav-menu {
    width: 100vw !important;
    border-left: none;
  }
}

/* =====================================================================
   MOBILE DRAWER — bulletproof overrides (highest priority)
   Some FABs sit at z-index 9998+, so we have to climb above that.
   ===================================================================== */
@media (max-width: 980px) {
  html body.is-mobile-nav-open .navbar {
    z-index: 10000 !important;
  }
  html body.is-mobile-nav-open::after {
    z-index: 9990 !important;
  }
  html body.is-mobile-nav-open .nav-menu {
    z-index: 10001 !important;
    background: var(--surface) !important;
    opacity: 1 !important;
    filter: none !important;
  }
  /* Hard-hide every floating widget while drawer is open */
  html body.is-mobile-nav-open .ils-floating-widgets,
  html body.is-mobile-nav-open .ils-fab,
  html body.is-mobile-nav-open .ils-cargo-fab {
    display: none !important;
  }
  /* Make sure menu links are actually clickable (no overlay can intercept) */
  html body.is-mobile-nav-open .nav-menu,
  html body.is-mobile-nav-open .nav-menu * {
    pointer-events: auto;
  }
}

/* =====================================================================
   MOBILE DRAWER — submenu expand affordance
   ===================================================================== */
@media (max-width: 980px) {
  /* Bigger, clearly clickable caret — pinned to the right of the row */
  body.is-mobile-nav-open .nav-menu .has-submenu > a {
    position: relative;
    cursor: pointer;
  }
  body.is-mobile-nav-open .nav-menu .has-submenu > a .caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(26, 86, 219, 0.08);
    color: #1a56db !important;
    font-size: 0;                /* hide the text glyph */
    transition: background .2s ease, transform .3s ease, color .2s ease;
  }
  body.is-mobile-nav-open .nav-menu .has-submenu > a .caret::before {
    content: "";
    width: 10px; height: 10px;
    border-right: 2.4px solid currentColor;
    border-bottom: 2.4px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .3s ease;
  }
  body.is-mobile-nav-open .nav-menu .has-submenu.is-expanded > a .caret {
    background: #1a56db;
    color: #ffffff !important;
    transform: none;
  }
  body.is-mobile-nav-open .nav-menu .has-submenu.is-expanded > a .caret::before {
    transform: translateY(2px) rotate(-135deg);
  }
  body.is-mobile-nav-open .nav-menu .has-submenu.is-expanded > a {
    color: #1a56db !important;
    background: rgba(26, 86, 219, 0.04);
  }

  /* Make sure max-height of the expanded submenu is enough for all items */
  body.is-mobile-nav-open .nav-menu .has-submenu.is-expanded > .submenu {
    max-height: 1200px !important;
    padding: 6px 4px 12px 8px;
  }
  body.is-mobile-nav-open .nav-menu .submenu-inner {
    gap: 6px !important;
    padding: 4px 0 !important;
  }
}

/* =====================================================================
   Fix mobile-drawer extras leaking into desktop header
   ===================================================================== */
.nav-mobile-cta,
.nav-mobile-contacts,
.nav-mobile-consult {
  display: none !important;
}
@media (max-width: 980px) {
  html body.is-mobile-nav-open .nav-mobile-cta {
    display: inline-flex !important;
  }
  html body.is-mobile-nav-open .nav-mobile-contacts {
    display: grid !important;
  }
  html body.is-mobile-nav-open .nav-mobile-consult {
    display: inline-flex !important;
  }
}

/* =====================================================================
   Mobile drawer caret — clear DOWN chevron, rotates on expand
   (Override conflicting earlier rules with high specificity + !important)
   ===================================================================== */
@media (max-width: 980px) {
  html body.is-mobile-nav-open .nav-menu .has-submenu > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }
  html body.is-mobile-nav-open .nav-menu .has-submenu > a > .caret {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(26, 86, 219, 0.10) !important;
    color: #1a56db !important;
    font-size: 0 !important;
    flex: none;
    transform: none !important;
    transition: background .2s ease, color .2s ease;
    cursor: pointer;
  }
  /* Down chevron drawn from two borders */
  html body.is-mobile-nav-open .nav-menu .has-submenu > a > .caret::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-right: 2.4px solid currentColor;
    border-bottom: 2.4px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .3s ease;
  }
  /* Expanded — flip to UP chevron, fill the pill blue */
  html body.is-mobile-nav-open .nav-menu .has-submenu.is-expanded > a > .caret {
    background: #1a56db !important;
    color: #ffffff !important;
  }
  html body.is-mobile-nav-open .nav-menu .has-submenu.is-expanded > a > .caret::before {
    transform: translateY(2px) rotate(-135deg);
  }
  html body.is-mobile-nav-open .nav-menu .has-submenu.is-expanded > a {
    color: #1a56db !important;
  }
}

/* =====================================================================
   Push floating page-hero stats card BELOW the hero on mobile so it
   never covers the hero copy / CTAs
   ===================================================================== */
@media (max-width: 760px) {
  /* .page-hero is a row flexbox, so a static stats card would sit BESIDE the
     hero copy and overflow. Let the hero wrap and force the card onto its own
     full-width line so it drops cleanly below the copy / CTAs. */
  .page-hero { flex-wrap: wrap; }
  .page-hero-stats {
    position: static !important;
    transform: none !important;
    flex: 0 0 100% !important;
    order: 2 !important;
    width: calc(100% - 32px) !important;
    margin: 28px auto -40px !important;
    padding: 22px 14px !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 32px rgba(11, 59, 140, 0.12) !important;
  }
  /* 3-stat card reads best as an even three-across strip rather than a
     2-column grid that leaves an orphan cell. */
  .page-hero-stats--3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .page-hero-stats .hero-stat {
    padding: 8px 10px;
    border: none !important;
  }
  .page-hero-stats .hero-stat-num { font-size: clamp(24px, 7vw, 34px) !important; }
  .page-hero-stats .hero-stat-label { font-size: 11px !important; }
}

/* =====================================================================
   Dedicated X close button INSIDE the drawer (top-right of the panel)
   The animated burger sat at z-index 1400, below the drawer at 10001,
   so it kept disappearing behind the panel. This is a real button on
   the drawer itself, always visible.
   ===================================================================== */
.nav-drawer-close {
  display: none;
}
@media (max-width: 980px) {
  html body.is-mobile-nav-open .nav-drawer-close {
    display: inline-flex !important;
    position: absolute;
    top: 18px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(26, 86, 219, 0.20);
    background: var(--surface);
    color: #1a56db;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(10, 26, 58, 0.10);
    transition: background .2s ease, transform .25s ease, border-color .2s ease;
    z-index: 5;
  }
  html body.is-mobile-nav-open .nav-drawer-close:hover {
    background: #1a56db;
    color: #ffffff;
    border-color: #1a56db;
    transform: rotate(90deg);
  }
  html body.is-mobile-nav-open .nav-drawer-close svg {
    width: 18px;
    height: 18px;
  }

  /* Hide the floating burger when drawer is open — the in-drawer X
     takes over the close affordance and there's no chance of overlap */
  html body.is-mobile-nav-open .navbar .nav-burger.is-active {
    display: none !important;
  }
}

/* =====================================================================
   2026 CONTENT REFRESH — new components
   WhatsApp CTA · Trust strip · Services CTA · Case studies ·
   Service hierarchy cards · Contact cargo checklist
   ===================================================================== */

/* ---- WhatsApp CTA button ---- */
.btn-whatsapp {
  background: #25d366;
  color: #ffffff;
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35);
}
.btn-whatsapp svg { width: 20px; height: 20px; }
.btn-whatsapp:hover {
  background: #1ebe5b;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(37, 211, 102, 0.45);
}

/* ---- Trust / credibility strip ---- */
.trust-strip {
  background: var(--surface);
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--color-border);
}
.trust-strip-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}
.trust-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 18px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-bg-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.trust-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(26, 86, 219, 0.3);
}
.trust-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 86, 219, 0.1);
  color: var(--color-primary);
  margin-bottom: 4px;
}
.trust-item-icon svg { width: 24px; height: 24px; }
.trust-item strong { font-size: 15px; color: var(--color-text); }
.trust-item span { font-size: 13.5px; line-height: 1.5; color: var(--color-text-soft); }
.trust-strip-note {
  margin-top: 26px;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-soft);
}
.trust-strip-placeholder {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px dashed var(--color-muted);
  background: #fffaf0;
  color: #8a6d3b;
  font-size: 12.5px;
}

/* ---- Homepage services-section CTA row ---- */
.services-section-cta {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.services-section-cta p {
  font-size: 15px;
  color: var(--color-text-soft);
  max-width: 640px;
}
.services-section-cta strong { color: var(--color-text); }

/* ---- Case studies ---- */
.home-cases { padding: 96px 0; background: var(--color-bg-soft); }
.home-cases .section-subtitle em { color: var(--color-muted); font-style: italic; }
.home-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 52px;
}
.case-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.case-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(11, 59, 140, 0.14);
}
.case-tag {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(26, 86, 219, 0.09);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.case-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 18px;
  line-height: 1.3;
}
.case-list { margin: 0 0 20px; }
.case-list dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  margin-top: 14px;
}
.case-list dt:first-child { margin-top: 0; }
.case-list dd {
  margin: 4px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-soft);
}
.case-placeholder {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 8px;
  border: 1px dashed var(--color-muted);
  background: #fffaf0;
  color: #8a6d3b;
  font-size: 13px;
}
.case-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--color-primary);
}
.case-link .arrow { transition: transform 0.2s ease; }
.case-card:hover .case-link .arrow { transform: translateX(4px); }

/* ---- Service hierarchy cards (services.html) ---- */
.svc-group { margin-top: 64px; }
.svc-group:first-of-type { margin-top: 56px; }
.svc-group-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 18px;
  margin-bottom: 32px;
  border-bottom: 2px solid var(--color-border);
}
.svc-group-title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  color: var(--color-text);
}
.svc-group-sub { font-size: 15px; color: var(--color-text-soft); }
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.svc-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(11, 59, 140, 0.14);
  border-color: rgba(26, 86, 219, 0.3);
}
.svc-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(26, 86, 219, 0.12), rgba(11, 59, 140, 0.12));
  color: var(--color-primary);
  margin-bottom: 18px;
}
.svc-card-icon svg { width: 28px; height: 28px; }
.svc-card-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 10px;
}
.svc-card-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-soft);
  margin-bottom: 18px;
}
.svc-card-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  margin-bottom: 10px;
}
.svc-card-caps {
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.svc-card-caps li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-soft);
}
.svc-card-caps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 8px;
  border-left: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(-45deg);
}
.svc-card-best {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-soft);
  padding: 12px 14px;
  background: var(--color-bg-soft);
  border-radius: 10px;
  border-left: 3px solid var(--color-primary);
  margin-bottom: 22px;
}
.svc-card-best strong { color: var(--color-text); }
.svc-card-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.svc-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-primary);
}
.svc-card-link .arrow { transition: transform 0.2s ease; }
.svc-card:hover .svc-card-link .arrow { transform: translateX(4px); }
.svc-card-quote {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--color-white);
  background: var(--color-primary);
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  transition: background 0.2s ease, transform 0.2s ease;
}
.svc-card-quote:hover { background: var(--color-primary-dark); transform: translateY(-2px); }

/* ---- Contact cargo checklist ---- */
.cargo-checklist {
  margin: 18px 0 26px;
  padding: 18px 20px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}
.cargo-checklist-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 12px;
}
.cargo-checklist ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.cargo-checklist li {
  font-size: 13px;
  color: var(--color-primary-dark);
  background: rgba(26, 86, 219, 0.08);
  padding: 5px 12px;
  border-radius: 999px;
}

/* ---- Responsive: new components ---- */
@media (max-width: 1024px) {
  .trust-strip-grid { grid-template-columns: repeat(3, 1fr); }
  .home-cases-grid,
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .trust-strip-grid { grid-template-columns: repeat(2, 1fr); }
  .home-cases-grid,
  .svc-grid { grid-template-columns: 1fr; }
  .home-cases { padding: 64px 0; }
}
@media (max-width: 480px) {
  .trust-strip-grid { grid-template-columns: 1fr; }
}


/* ============================================
   MEDIA — Gallery grid
   ============================================ */
.gallery-section { padding: 64px 0 84px; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 36px;
}
.gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(10, 26, 58, 0.18);
}
.gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 16px 14px 12px;
  background: linear-gradient(180deg, rgba(6, 35, 79, 0), rgba(6, 35, 79, 0.88));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ============================================================
   NAVBAR — Book for Consultation button + lead-form modal
   ============================================================ */
/* Navbar action cluster — Track, theme toggle, and the CTA sit tightly together */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.nav-consult-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 13px 24px;
  border: none;
  border-radius: var(--radius-pill, 999px);
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(26, 86, 219, 0.35);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-consult-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(26, 86, 219, 0.45);
}
.nav-consult-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Hide the navbar button on mobile — handled inside the drawer instead */
@media (max-width: 980px) {
  .nav-consult-btn { display: none; }
}

/* ---- Consultation modal ---- */
.consult-modal {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.consult-modal.is-open { display: flex; }
.consult-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 35, 79, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
html.consult-modal-locked { overflow: hidden; }
.consult-dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(6, 35, 79, 0.35);
  animation: consultPop 0.28s ease;
}
@keyframes consultPop {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.consult-head {
  padding: 30px 30px 6px;
  background: linear-gradient(135deg, var(--color-primary-darker) 0%, var(--color-primary-dark) 55%, var(--color-primary) 100%);
  color: #fff;
  border-radius: 20px 20px 0 0;
}
.consult-head h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.consult-head p {
  margin-top: 6px;
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
.consult-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.consult-close:hover { background: rgba(255, 255, 255, 0.32); }
.consult-close svg { width: 18px; height: 18px; }
.consult-form {
  padding: 24px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.consult-field { display: flex; flex-direction: column; gap: 7px; }
.consult-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.consult-field label .req { color: var(--color-primary); }
.consult-field input,
.consult-field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.consult-field textarea { resize: vertical; min-height: 84px; }
.consult-field input:focus,
.consult-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15);
}
.consult-field.is-invalid input,
.consult-field.is-invalid textarea {
  border-color: #e23b3b;
  box-shadow: 0 0 0 3px rgba(226, 59, 59, 0.12);
}
.consult-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  padding: 14px 22px;
  border: none;
  border-radius: var(--radius-pill, 999px);
  background: #25d366;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.consult-submit:hover {
  background: #1ebe5b;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(37, 211, 102, 0.45);
}
.consult-submit svg { width: 20px; height: 20px; }
.consult-status {
  font-size: 13px;
  font-weight: 600;
  min-height: 18px;
  text-align: center;
}
.consult-status.is-error { color: #e23b3b; }
.consult-status.is-ok { color: #1ebe5b; }

/* Consultation entry inside the mobile drawer */
.nav-mobile-consult {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 12px;
  padding: 14px 22px;
  border: none;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-primary);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.nav-mobile-consult svg { width: 18px; height: 18px; }

/* ============================================
   WIDE SCREEN / LARGE DISPLAYS  (min-width)
   --------------------------------------------
   By default every layout container caps at 1280px,
   so on large monitors the content sits in a narrow
   centred column with big empty margins on the sides.
   This is most noticeable on Mac displays:
     • MacBook Pro 14"/16"  → 1512 / 1728 logical px
     • iMac 24" / 21.5"     → 1920 / 2048 logical px
     • Studio Display / 27" → 2560 logical px
     • Pro Display XDR       → 3008+ logical px
   These rules progressively widen the shared
   containers (the inner grids use fr units, so they
   simply grow to fill the extra space) and gently
   scale type/padding up so the page stays balanced
   rather than feeling small and floated in the middle.
   ============================================ */

/* common container selectors widened together */
@media (min-width: 1440px) {
  .nav-container,
  .hero-container,
  .services-container,
  .container,
  .dest-floating-picker,
  .ils-topbar-inner {
    max-width: 1380px;
  }
  .page-hero-container { margin-left: calc((100% - 1380px) / 2 + 60px); }
}

@media (min-width: 1600px) {
  .nav-container,
  .hero-container,
  .services-container,
  .container,
  .dest-floating-picker,
  .ils-topbar-inner {
    max-width: 1500px;
  }
  .page-hero-container { margin-left: calc((100% - 1500px) / 2 + 60px); }
  .hero-subtitle,
  .page-hero-subtitle,
  .section-subtitle { font-size: 18px; }
}

/* iMac / Studio-class displays */
@media (min-width: 1920px) {
  .nav-container,
  .hero-container,
  .services-container,
  .container,
  .dest-floating-picker,
  .ils-topbar-inner {
    max-width: 1680px;
    padding-left: 80px;
    padding-right: 80px;
  }
  .page-hero-container { margin-left: calc((100% - 1680px) / 2 + 80px); }
  .hero-title { font-size: clamp(40px, 5vw, 88px); }
  .page-hero-title { font-size: clamp(48px, 3.6vw, 66px); }
  .section-title { font-size: clamp(34px, 4.2vw, 64px); }
  .hero-subtitle,
  .page-hero-subtitle { font-size: 19px; max-width: 560px; }
  .section-subtitle { font-size: 19px; }
}

/* 5K Studio Display / Pro Display XDR */
@media (min-width: 2560px) {
  .nav-container,
  .hero-container,
  .services-container,
  .container,
  .dest-floating-picker,
  .ils-topbar-inner {
    max-width: 1920px;
    padding-left: 96px;
    padding-right: 96px;
  }
  .page-hero-container { margin-left: calc((100% - 1920px) / 2 + 96px); }
  .hero-subtitle,
  .page-hero-subtitle,
  .section-subtitle { font-size: 20px; }
}

/* ============================================
   AID & RELIEF — RESPONSE ZONE CARDS
   Image feature cards (Africa / Pakistan / Asia)
   used on the Aid & Relief Logistics page.
   ============================================ */
.aid-zones {
  padding: 120px 0;
  background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--surface) 100%);
}

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

.aid-zone {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease, border-color 0.45s ease;
}

.aid-zone:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(11, 59, 140, 0.20);
  border-color: rgba(26, 86, 219, 0.25);
}

.aid-zone-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.aid-zone-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}

.aid-zone:hover .aid-zone-media img {
  transform: scale(1.06);
}

.aid-zone-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 35, 79, 0) 35%, rgba(6, 35, 79, 0.65) 100%);
  pointer-events: none;
}

.aid-zone-tag {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 1;
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(26, 86, 219, 0.35);
}

.aid-zone-body {
  padding: 26px 26px 30px;
}

.aid-zone-body h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.aid-zone-body p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-soft);
}

@media (max-width: 980px) {
  .aid-zones { padding: 90px 0; }
  .aid-zone-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

@media (max-width: 640px) {
  .aid-zone-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
}

/* Aid & Relief hero — content centred horizontally + vertically with a
   soft white wash laid over the hero photo so the dark text stays legible. */
.aid-hero { align-items: center; }
.aid-hero .page-hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(var(--overlay-rgb), 0.96) 0%,
    rgba(var(--overlay-rgb), 0.88) 34%,
    rgba(var(--overlay-rgb), 0.58) 50%,
    rgba(var(--overlay-rgb), 0.18) 68%,
    rgba(var(--overlay-rgb), 0) 82%
  );
}

/* ============================================
   PAGE HERO — benefit points (check pills)
   ============================================ */
.page-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 30px;
  max-width: 560px;
}

.page-hero-points li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

.page-hero-points li::before {
  content: '';
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  box-shadow: 0 4px 10px rgba(26, 86, 219, 0.30);
}

/* ============================================
   NAVBAR — Track button (beside Consultation)
   ============================================ */
.nav-track-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: transparent;
  color: var(--color-primary);
  padding: 12px 20px;
  border: 1.5px solid rgba(26, 86, 219, 0.35);
  border-radius: var(--radius-pill, 999px);
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.nav-track-btn:hover {
  background: rgba(26, 86, 219, 0.08);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}
.nav-track-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* On mobile keep tracking one tap away — compact icon-only, beside burger */
@media (max-width: 980px) {
  .nav-track-btn { padding: 9px; gap: 0; }
  .nav-track-btn span { display: none; }
}

/* ============================================
   TRACKING PAGE
   ============================================ */
.track-tool { padding: 110px 0; background: var(--color-bg-soft); }

.track-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(11, 59, 140, 0.14);
  padding: 40px;
}

.track-tabs {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 5px;
  gap: 4px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.track-tab {
  border: none;
  background: transparent;
  padding: 11px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.track-tab.is-active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 6px 14px rgba(26, 86, 219, 0.30);
}

.track-field { display: flex; gap: 12px; flex-wrap: wrap; }
.track-input {
  flex: 1 1 280px;
  min-width: 0;
  padding: 16px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text);
  background: var(--surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.track-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(26, 86, 219, 0.12);
}
.track-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 16px 28px;
  border-radius: 14px;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
.track-submit:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
.track-submit svg { width: 18px; height: 18px; }

.track-hint { font-size: 13.5px; color: var(--color-text-soft); line-height: 1.6; margin-top: 16px; }

.track-carriers { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.track-carriers-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 12px;
}
.track-carriers-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.track-carriers-links a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 7px 14px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.track-carriers-links a:hover { background: rgba(26, 86, 219, 0.08); border-color: var(--color-primary); }

/* "Live Radar Map" reveal button — styled to match the site's primary buttons,
   sitting at the right of the carrier row, with a looping echo pulse. */
.lt-reveal-btn {
  position: relative;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  padding: 12px 24px;
  border: none;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--color-primary);
  box-shadow: 0 6px 18px rgba(26, 86, 219, 0.35);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.lt-reveal-btn:hover { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(26, 86, 219, 0.45); }
.lt-reveal-btn:focus-visible { outline: 3px solid rgba(26, 86, 219, 0.4); outline-offset: 3px; }

/* looping echo — two staggered rings expand and fade (matches the theme toggle) */
.lt-reveal-btn::before,
.lt-reveal-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--color-primary);
  opacity: 0;
  pointer-events: none;
  animation: lt-reveal-echo 2.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.lt-reveal-btn::after { animation-delay: 1.4s; }
@keyframes lt-reveal-echo {
  0%   { transform: scale(1);    opacity: 0.5; }
  70%  { opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
/* once opened, calm the animation down */
.lt-reveal-btn.is-open::before,
.lt-reveal-btn.is-open::after { animation: none; opacity: 0; }

/* spinning radar sweep inside the button */
.lt-reveal-radar {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(234, 246, 255, 0.7);
  overflow: hidden;
  flex: 0 0 auto;
}
.lt-reveal-radar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, rgba(234, 246, 255, 0.85), rgba(234, 246, 255, 0) 90deg);
  animation: lt-radar-sweep 1.8s linear infinite;
}
.lt-reveal-radar::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #eaf6ff;
  transform: translate(-50%, -50%);
}
@keyframes lt-radar-sweep { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .lt-reveal-btn::before, .lt-reveal-btn::after, .lt-reveal-radar::before { animation: none; opacity: 0; }
}

.track-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-text);
  color: #fff;
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10000;
  max-width: 90vw;
  text-align: center;
}
.track-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 560px) {
  .track-tool { padding: 80px 0; }
  .track-card { padding: 26px 20px; }
  .track-field { flex-direction: column; }
  .track-submit { width: 100%; justify-content: center; }
}

/* ============================================================
   NAVBAR THEME TOGGLE (sun / moon) + DARK MODE
   Toggle is injected by animations.js between Track and the
   Book-for-Consultation button. Theme is set on <html data-theme>
   and persisted in localStorage.
   ============================================================ */
.nav-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid rgba(26, 86, 219, 0.35);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.nav-theme-toggle:hover {
  background: rgba(26, 86, 219, 0.08);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}
.nav-theme-toggle svg { position: relative; z-index: 1; width: 20px; height: 20px; display: block; }

/* Looping "echo" rings — a subtle sonar pulse to draw the eye to the toggle.
   Two staggered rings expand and fade outward on a continuous loop. */
.nav-theme-toggle::before,
.nav-theme-toggle::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  animation: nav-theme-echo 3s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.nav-theme-toggle::after { animation-delay: 1.5s; }
@keyframes nav-theme-echo {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { opacity: 0; }
  100% { transform: scale(1.85); opacity: 0; }
}
/* pause the echo while the user is interacting */
.nav-theme-toggle:hover::before,
.nav-theme-toggle:hover::after,
.nav-theme-toggle:focus-visible::before,
.nav-theme-toggle:focus-visible::after { animation: none; opacity: 0; }

html[data-theme="dark"] .nav-theme-toggle::before,
html[data-theme="dark"] .nav-theme-toggle::after { border-color: rgba(207, 224, 255, 0.6); }

@media (prefers-reduced-motion: reduce) {
  .nav-theme-toggle::before, .nav-theme-toggle::after { animation: none; opacity: 0; }
}
/* show moon in light mode (click → dark), sun in dark mode (click → light) */
.nav-theme-toggle .theme-icon-sun { display: none; }
.nav-theme-toggle .theme-icon-moon { display: block; }
html[data-theme="dark"] .nav-theme-toggle .theme-icon-sun { display: block; }
html[data-theme="dark"] .nav-theme-toggle .theme-icon-moon { display: none; }

/* ---- Dark palette: flip the neutral variables (brand blues stay) ---- */
html[data-theme="dark"] {
  --color-text: #e4ecf8;
  --color-text-soft: #a4b4cd;
  --color-muted: #6f7f97;
  --color-bg: #0b1322;
  --color-bg-soft: #0f1a2e;
  --color-white: #14213a;
  --color-border: #25364f;
  --surface: #14213a;
  --surface-2: #0e1a2e;
  --page-bg: linear-gradient(180deg, #0a1220 0%, #0c1830 55%, #0a1a38 100%);
  --overlay-rgb: 8, 15, 30;
  --navbar-scrolled-bg: rgba(11, 19, 34, 0.94);
  --heading: #eef4fd;
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* logo reads light on the dark navbar/hero */
html[data-theme="dark"] .nav-logo img { filter: brightness(0) invert(1); }
html[data-theme="dark"] .nav-theme-toggle { color: #cfe0ff; border-color: rgba(207, 224, 255, 0.35); }
html[data-theme="dark"] .nav-theme-toggle:hover { background: rgba(207, 224, 255, 0.12); border-color: #cfe0ff; }

/* hero text: drop the white glow, brighten accents */
html[data-theme="dark"] .page-hero-title,
html[data-theme="dark"] .hero-title,
html[data-theme="dark"] .page-hero-subtitle,
html[data-theme="dark"] .hero-subtitle { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .page-hero-title .accent,
html[data-theme="dark"] .hero-title .line.accent { color: #7ea6ff; }

/* secondary hero button reads light on the dark fade */
html[data-theme="dark"] .page-hero .btn-ghost {
  color: #cfe0ff;
  border-color: rgba(207, 224, 255, 0.4);
}
html[data-theme="dark"] .page-hero .btn-ghost:hover {
  color: #ffffff;
  background: rgba(207, 224, 255, 0.12);
  border-color: #cfe0ff;
}

/* policy hero backdrop stays dark in dark mode */
html[data-theme="dark"] .policy-hero {
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(77, 130, 243, 0.14), transparent 60%),
    linear-gradient(180deg, #0a1220 0%, #0c1830 100%);
}

/* soften heavy shadows on dark */
html[data-theme="dark"] .navbar.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); }

/* services section: drop the light/white gradient fade so the section stays dark */
html[data-theme="dark"] .services-section::before { display: none; }

/* hero subtitle: hardcoded dark navy (#2c3a52) is unreadable over the dark
   overlay — lift it to a light tone so the strapline stays legible */
html[data-theme="dark"] .hero-subtitle { color: #c4d2ea; }

/* "Why Choose ILS" cut section is dark-navy with white text by design, but it
   inherits color: var(--color-white) which flips dark in dark mode, hiding the
   non-accent part of the title ("Logistics,"). Pin the text light. */
html[data-theme="dark"] .cut-section { color: #eef4fd; }

/* partner / affiliation logo cards: the logos are built for light backgrounds,
   so keep the cards white in dark mode instead of using the dark --surface */
html[data-theme="dark"] .home-client-logo {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.14);
}
html[data-theme="dark"] .home-client-logo:hover {
  border-color: rgba(126, 166, 255, 0.5);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}

/* inner page heroes (destinations, services, about, etc.): the subtitle is the
   same hardcoded dark navy (#2c3a52) as the home hero and disappears over the
   dark overlay — lift it to a light tone across every page that uses .page-hero */
html[data-theme="dark"] .page-hero-subtitle { color: #c4d2ea; }

/* ============================================================
   LIVE SHIPMENT TRACKER — command-center map (tracking page)
   Always dark (a "control room" look) regardless of site theme.
   ============================================================ */
.lt-root { margin-top: 34px; }
.lt-root[hidden] { display: none; }

.lt-shell {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  border-radius: 20px;
  overflow: hidden;
  background: #06122a;
  border: 1px solid rgba(56, 189, 248, 0.22);
  box-shadow: 0 30px 80px rgba(2, 10, 24, 0.45);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
.lt-root.is-live .lt-shell,
.lt-root.is-standby .lt-shell { opacity: 1; transform: none; }

.lt-map-wrap { position: relative; min-width: 0; min-height: 340px; background: #06122a; }
.lt-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Standby (idle) state — map shown immediately, panel hidden until a number is entered */
.lt-root.is-standby .lt-shell { grid-template-columns: 1fr; }
.lt-root.is-standby .lt-panel { display: none; }
.lt-root.is-standby .lt-map-wrap { aspect-ratio: 21 / 9; height: auto; }
.lt-standby-msg { display: none; }
.lt-root.is-standby .lt-standby-msg {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(90%, 420px); gap: 8px; pointer-events: none; padding: 22px;
  background: rgba(6, 18, 42, 0.55); border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 16px; backdrop-filter: blur(2px);
}
.lt-standby-msg svg { width: 30px; height: 30px; color: #38bdf8; margin-bottom: 4px; }
.lt-standby-msg strong { font-size: 16px; color: #eaf4ff; letter-spacing: .01em; }
.lt-standby-msg span { font-size: 12.5px; line-height: 1.55; color: #9fb6d6; }
.lt-standby-msg em { font-style: normal; color: #7fe0ff; font-weight: 600; }

/* HUD overlay */
.lt-hud { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lt-corner { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(56, 189, 248, 0.55); }
.lt-corner--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.lt-corner--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.lt-corner--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.lt-corner--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.lt-scan {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(56, 211, 248, 0.10) 50%, transparent 54%);
  background-size: 100% 220%;
  animation: lt-scan 5.5s linear infinite;
}
@keyframes lt-scan { 0% { background-position: 0 -60%; } 100% { background-position: 0 160%; } }
.lt-live {
  position: absolute; top: 12px; right: 16px;
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em; color: #7fe0ff;
  display: flex; align-items: center; gap: 7px;
}
.lt-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 10px #22d3ee; animation: lt-blink 1.4s infinite; }
@keyframes lt-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.lt-hud-tag { position: absolute; bottom: 14px; left: 18px; font: 600 10px/1 ui-monospace, Menlo, monospace; letter-spacing: .18em; color: rgba(125, 180, 230, 0.55); }

/* Side panel */
.lt-panel { min-width: 0; padding: 26px; background: linear-gradient(180deg, #0a1830, #081225); border-left: 1px solid rgba(56, 189, 248, 0.14); color: #cfe0f5; }
.lt-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.lt-status { font: 700 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; white-space: nowrap; }
.lt-status--cyan { color: #22d3ee; background: rgba(34, 211, 238, 0.12); border: 1px solid rgba(34, 211, 238, 0.4); }
.lt-status--green { color: #34d399; background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.4); }
.lt-status--amber { color: #f59e0b; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.4); }
.lt-id { text-align: right; display: flex; flex-direction: column; gap: 3px; }
.lt-id em { font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #6f86a8; }
.lt-id strong { font: 700 15px ui-monospace, Menlo, monospace; color: #eaf4ff; letter-spacing: .04em; }

.lt-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 20px; }
.lt-route-label { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #6f86a8; margin-bottom: 4px; }
.lt-route-port { font-weight: 700; font-size: 14px; color: #eaf4ff; line-height: 1.25; }
.lt-route-end--dest { text-align: right; }
.lt-route-line { color: rgba(56, 189, 248, 0.75); display: flex; align-items: center; justify-content: center; }
.lt-route-line span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.5)); }
.lt-route-line svg { width: 22px; height: 22px; flex: 0 0 auto; margin: 0 2px; }

.lt-progress { margin-bottom: 20px; }
.lt-progress-top { display: flex; justify-content: space-between; font-size: 12px; color: #9fb3d0; margin-bottom: 8px; }
.lt-progress-top span:last-child { color: #22d3ee; font-weight: 700; }
.lt-progress-track { height: 6px; border-radius: 999px; background: rgba(125, 160, 210, 0.16); overflow: hidden; }
.lt-progress-bar { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #22d3ee, #38bdf8); box-shadow: 0 0 12px rgba(34, 211, 238, 0.7); transition: width .8s ease; }

.lt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; padding: 16px 0; border-top: 1px solid rgba(125, 160, 210, 0.12); border-bottom: 1px solid rgba(125, 160, 210, 0.12); margin-bottom: 18px; }
.lt-cell { display: flex; flex-direction: column; gap: 3px; }
.lt-cell-k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #6f86a8; }
.lt-cell-v { font-weight: 600; font-size: 13.5px; color: #dcebff; }

.lt-timeline { list-style: none; margin: 0 0 18px; padding: 0; }
.lt-step { position: relative; padding: 0 0 16px 24px; }
.lt-step:last-child { padding-bottom: 0; }
.lt-step::before { content: ''; position: absolute; left: 6px; top: 16px; bottom: -2px; width: 2px; background: rgba(125, 160, 210, 0.18); }
.lt-step:last-child::before { display: none; }
.lt-step-dot { position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(125, 160, 210, 0.4); background: #0a1830; }
.lt-step-body strong { display: block; font-size: 13px; color: #aebbd0; font-weight: 600; }
.lt-step-body em { font-style: normal; font-size: 11.5px; color: #6f86a8; }
.lt-step.is-done .lt-step-dot { border-color: #34d399; background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.6); }
.lt-step.is-done .lt-step-body strong { color: #dcebff; }
.lt-step.is-current .lt-step-dot { border-color: #22d3ee; background: #22d3ee; box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18), 0 0 12px rgba(34, 211, 238, 0.9); animation: lt-blink 1.4s infinite; }
.lt-step.is-current .lt-step-body strong { color: #7fe0ff; }

.lt-verify { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #22d3ee; }
.lt-verify svg { width: 15px; height: 15px; }
.lt-verify:hover { color: #7fe0ff; }
.lt-note { margin-top: 10px; font-size: 11px; line-height: 1.55; color: #6f86a8; }

@media (max-width: 860px) {
  .lt-shell { grid-template-columns: 1fr; }
  .lt-map-wrap { aspect-ratio: 3 / 2; height: auto; }
  .lt-panel { border-left: none; border-top: 1px solid rgba(56, 189, 248, 0.14); }
}
@media (max-width: 540px) {
  .lt-panel-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .lt-id { text-align: left; }
}