/* =================================================
   RESET & BASE
================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* =================================================
   IMPROVED HERO TEXT LEGIBILITY
   -------------------------------------------------
   Many of the decorative hero images used on client
   pages are light and detailed. To ensure that
   headings and descriptions remain readable against
   these backgrounds, apply a soft drop shadow to
   hero text. This subtle shadow darkens the area
   immediately around each letter without obscuring
   the imagery. Placing this rule near the end of
   the stylesheet ensures it overrides previous font
   declarations when necessary.
*/
.hero-text h1,
.hero-text h2,
.hero-text p {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.45);
}

/* Apply a translucent backdrop behind hero text on
   client pages for improved legibility. This dark
   container sits directly behind the heading and
   description, ensuring sufficient contrast on
   brightly coloured hero illustrations. The
   backdrop blur subtly softens whatever appears
   underneath without obscuring the background art. */
.client-hero-curved .hero-text {
  background: rgba(0, 0, 0, 0.35);
  padding: 24px;
  border-radius: 12px;
  display: inline-block;
  backdrop-filter: blur(4px);
}

/* =================================================
   COST COMPARISON TABLE
   -------------------------------------------------
   The cost comparison table on the savings page
   conveys how much users can save by shipping
   through 4Ward. These styles ensure the table is
   easy to read, responsive and visually integrated
   with the overall design. The alternating row
   colours help differentiate entries, while the
   header uses a subtle tint to stand out. */
.comparison-table {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-collapse: collapse;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  overflow: hidden;
}
.comparison-table th,
.comparison-table td {
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
  color: #0b1f3a;
  text-align: left;
  vertical-align: top;
}
.comparison-table th {
  background: #f0f4ff;
  font-weight: 600;
}
.comparison-table td:first-child {
  font-weight: 600;
  background: #f9fbff;
  width: 28%;
}
.comparison-table tr:last-child td {
  border-bottom: none;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(
      1200px 600px at top center,
      #ffffff 0%,
      #f6f8fc 60%
    );
  color: #0b1f3a;
  line-height: 1.5;
  /* Improve readability on large displays by slightly increasing base font size */
  font-size: 15px;
  
}

:root {
  --brand-navy: #0b1f3a;
  --brand-blue: #1e4fd8;
  --brand-light: #f6f8fc;
  --text-dark: #1f2937;
  --text-muted: #6b7280;
}

/* =================================================
   IMMERSIVE SECTIONS
================================================= */
/* These sections are used on the landing and index pages to pair rich imagery
   with explanatory text. They utilise a flexible layout that stacks on
   smaller screens and displays side‑by‑side on larger ones. */
.immersive-section {
  margin: 60px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.immersive-section img {
  flex: 1 1 320px;
  max-width: 480px;
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

.immersive-section .content {
  flex: 1 1 320px;
  max-width: 600px;
  min-width: 280px;
}

.immersive-section .content h3 {
  margin-top: 0;
  font-size: 28px;
  line-height: 1.3;
  color: #0b1f3a;
}

.immersive-section .content p {
  font-size: 15px;
  color: #444;
  margin-top: 12px;
  line-height: 1.7;
}

/* =================================================
   SEA SHAPE FOR MAP
================================================= */
/* A subtle irregular blue shape used on the post container map to
   emphasise the 'at sea' portion of the route. Positioned absolutely
   behind the route and nodes. */
.post-container-page .sea-shape{
  opacity: 0.12;
  filter: blur(60px);
}



/* =================================================
   GLOBAL LINKS & BUTTONS
================================================= */
a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

/* Primary button */
.primary-btn {
  background: #1e4fd8;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.primary-btn:hover {
  background: #163bb3;
}

/* =================================================
   TOP NAV
================================================= */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 64px;
  width: 100%;
  background: #0a1e3a;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 36px;
  z-index: 1000;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.nav-left {
  position: absolute;
  left: 36px;
}

.brand {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-links a {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  opacity: 0.9;
}

.nav-links a:hover {
  opacity: 1;
}

/* =================================================
   PAGE LAYOUT
================================================= */
.page-content {
  padding-top: 100px;
  width: 100%;
  display: block;   /* 👈 critical */
}

/* =================================================
   HERO / LANDING
================================================= */
.hero-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
  display: flex;
  align-items: center;
  gap: 64px;
  /* Center hero content horizontally for a balanced layout */
  justify-content: center;
}

.hero-text {
  flex: 1;
  /* Center align hero text and center within its container */
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.hero-tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(30,79,216,0.12);
  color: #1e4fd8;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 14px;
}

.hero-text h1 {
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 18px;
  color: #0b1f3a;
}

.hero-text p {
  font-size: 16px;
  color: #444;
  /* Increase text width and center paragraphs for better balance */
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-btn {
  margin-top: 28px;
  padding: 14px 28px;
  border-radius: 10px;
  background: #1e4fd8;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

.cta-btn:hover {
  background: #163bb3;
}

/* Hero visual placeholder */
.hero-visual {
  flex: 1;
  display: flex;
  justify-content: center;
}

.visual-box {
  width: 100%;
  max-width: 420px;
  height: 320px;
  border-radius: 26px;
  background: linear-gradient(135deg, #f5f8ff, #e6ecff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e4fd8;
  font-weight: 700;
  box-shadow: 0 20px 45px rgba(0,0,0,0.18);
}

/* =================================================
   CARDS
================================================= */
.container {
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/*
 * Order card styles for the courier orders page. These cards present
 * detailed information about each booking, including cargo details
 * and proof documents. The appearance borrows from the existing
 * container cards but uses a slightly lighter shadow and tighter
 * padding to suit lists of variable height.
 */
.order-card {
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  overflow: hidden;
}

.order-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.order-header {
  margin: -20px -20px 12px;
  padding: 12px 16px;
  background: #eef3ff;
  border-radius: 12px 12px 0 0;
  font-weight: 600;
  font-size: 14px;
  color: #243b5a;
}

.order-details p {
  margin: 4px 0;
  font-size: 14px;
  color: #475569;
  line-height: 1.4;
}

.order-status {
  display: flex;
  align-items: center;
  margin-top: 16px;
}

.order-status select {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  font-size: 14px;
}

.container:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
}

.card-header {
  margin: -20px -20px 16px;
  padding: 12px 16px;
  background: #f0f4ff;
  border-radius: 12px 12px 0 0;
  font-weight: 600;
  font-size: 14px;
}

/* =================================================
   DASHBOARD / PANELS
================================================= */
.dashboard-panel {
  background: #ffffff;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(0,0,0,0.2);
}

.hero.small {
  background: #f5f8ff;
  padding: 40px;
  border-radius: 16px;
  margin-bottom: 30px;
}

.hero.small h2 {
  margin-top: 0;
  color: #0b1f3a;
}

.hero.small p {
  color: #444;
}

/* =================================================
   FORMS
================================================= */
.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 6px;
}

.field input,
.field select {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
}

/* =================================================
   AUTH (LOGIN / SIGNUP)
================================================= */
.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  background-image:
    linear-gradient(rgba(10, 20, 40, 0.58), rgba(10, 20, 40, 0.72)),
    url("parallax-bg.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;

  padding: 24px;
}

.auth-box {
  background: rgba(255, 255, 255, 0.96);
  width: 380px;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(0,0,0,0.35);
  text-align: center;
  position: relative;
  backdrop-filter: blur(6px);
}

.auth-box h1 {
  margin: 0 0 6px;
  color: #0b1f3a;
}

.auth-box .subtitle {
  font-size: 14px;
  color: #555;
  margin-bottom: 24px;
}

.auth-box input {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.auth-box button {
  width: 100%;
  padding: 12px;
  background: #1e4fd8;
  color: #ffffff;
  border-radius: 8px;
  border: none;
  font-weight: 700;
  cursor: pointer;
}

.auth-box button:hover {
  background: #163bb3;
}

.auth-box .switch {
  margin-top: 16px;
  font-size: 13px;
}

.auth-box .switch a {
  color: #1e4fd8;
}

.auth-box .note {
  font-size: 12px;
  color: #b00020;
  margin-top: 10px;
}

/* =================================================
   OVERLAY
================================================= */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

/* =================================================
   BADGES & WARNINGS
================================================= */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.badge.pending {
  background: #f39c12;
  color: #ffffff;
}

.badge.approved {
  background: #2ecc71;
  color: #ffffff;
}

.warn {
  background: rgba(176,0,32,0.08);
  border-left: 4px solid #b00020;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: #b00020;
}

/* =================================================
   GRIDS
================================================= */
#container-grid,
#etaGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

/* =========================================================
   COURIER PAGES — PREMIUM MOBILE ONLY LAYOUT
   Applies to courier pages (body.courier-page) only.
   Desktop remains unchanged.
========================================================= */

@media (max-width: 600px) {
  /* Darken overall background for courier pages */
  body.courier-page {
    background:
      radial-gradient(circle at top left, rgba(30, 79, 216, 0.24), transparent 36%),
      linear-gradient(180deg, #07182b 0%, #0b1f3a 100%);
    color: #ffffff;
  }

  /* Remove default page padding and apply dark backdrop */
  .courier-page .page-content {
    padding-top: 0 !important;
    background:
      radial-gradient(circle at top left, rgba(30, 79, 216, 0.24), transparent 36%),
      linear-gradient(180deg, #07182b 0%, #0b1f3a 100%);
  }

  /* Mobile navigation styling: dark background with dropdown menu */
  .courier-page .top-nav {
    justify-content: space-between !important;
    padding: 0 16px !important;
    height: 64px !important;
    background: #03101f !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  .courier-page .nav-left {
    position: static !important;
    left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .courier-page .nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 22px !important;
    cursor: pointer !important;
    padding: 4px 6px !important;
  }

  .courier-page .nav-links {
    display: none;
    position: absolute;
    top: 64px;
    right: 12px;
    width: min(260px, calc(100vw - 24px));
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: #0b1f3a;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.28);
    z-index: 1001;
  }

  .courier-page .top-nav.menu-open .nav-links {
    display: flex;
  }

  .courier-page .nav-links a {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    color: #ffffff;
    opacity: 0.92;
  }

  .courier-page .nav-links a:hover {
    background: rgba(255,255,255,0.08);
    opacity: 1;
  }

  /* Hero and parallax sections on courier pages */
  .courier-page .parallax-section,
  .courier-page .hero.small,
  .courier-page .hero-parallax-top,
  .courier-page .dashboard-parallax,
  .courier-page .home-parallax {
    height: 430px !important;
    min-height: 430px !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background:
      radial-gradient(circle at top right, rgba(30, 79, 216, 0.35), transparent 40%),
      linear-gradient(180deg, #03101f 0%, #07182b 100%) !important;
  }

  /* Wrap hero content in a blurred translucent card */
  .courier-page .parallax-section .cta,
  .courier-page .hero.small {
    margin: 0 !important;
    max-width: 330px;
    width: 100%;
    background: rgba(0,0,0,0.30);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 22px;
    padding: 26px 20px;
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
  }

  .courier-page .parallax-section .cta h2,
  .courier-page .hero.small h2 {
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #ffffff;
  }

  .courier-page .parallax-section .cta p,
  .courier-page .hero.small p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    color: rgba(255,255,255,0.88);
  }

  .courier-page .hero-tag {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(30,79,216,0.18);
    color: #7fb0ff;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 14px;
  }

  /* Ensure the wrapper width fills the viewport */
  .courier-page .dashboard-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 14px !important;
    margin: 0 auto !important;
  }

  /* Dark glassy cards for panels and content blocks */
  .courier-page .dashboard-panel,
  .courier-page .container,
  .courier-page .white-card,
  .courier-page .orders-section .container-content,
  .courier-page .earnings-grid,
  .courier-page .guide-block,
  .courier-page .pc-left,
  .courier-page .pc-right,
  .courier-page .earnings-left,
  .courier-page .earnings-right {
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 22px;
    padding: 22px 16px;
    margin-bottom: 16px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.18);
    backdrop-filter: blur(12px);
    color: #ffffff;
  }

  .courier-page .card-header,
  .courier-page .order-header {
    background: transparent;
    color: #ffffff;
    font-size: 16px;
    margin: 0 0 12px;
  }

  /* Order cards */
  .courier-page .order-card {
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 22px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.18);
    backdrop-filter: blur(12px);
    color: #ffffff;
  }

  .courier-page .order-details p {
    color: rgba(255,255,255,0.78);
    font-size: 13px;
    line-height: 1.5;
  }

  .courier-page .order-status select {
    background: rgba(255,255,255,0.95);
    color: #0b1f3a;
    border: none;
    border-radius: 10px;
    padding: 6px 8px;
  }

  /* Field labels and inputs */
  .courier-page .field label {
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }

  .courier-page .field input,
  .courier-page .field select {
    background: rgba(255,255,255,0.96);
    color: #0b1f3a;
    border: none;
    border-radius: 14px;
    padding: 12px;
    font-size: 14px;
    width: 100%;
  }

  /* Value strip lists become stacked on mobile */
  .courier-page .value-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 16px;
  }

  .courier-page .value-strip span {
    color: #ffffff;
    font-size: 13px;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 8px;
    text-align: left;
  }

  /* Guide blocks layout */
  .courier-page .guide-block {
    display: grid !important;
    grid-template-columns: 100px 1fr !important;
    gap: 14px;
  }

  .courier-page .guide-block img {
    width: 100%;
    max-width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  }

  .courier-page .guide-content h3 {
    color: #ffffff;
    font-size: 18px;
    margin: 0 0 6px;
  }

  .courier-page .guide-content p {
    color: rgba(255,255,255,0.78);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 10px;
  }

  /* Immersive sections stack vertically and darken */
  .courier-page .immersive-section {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 16px !important;
  }

  .courier-page .immersive-section img {
    width: 100% !important;
    height: 190px !important;
    object-fit: cover !important;
    border-radius: 18px !important;
    box-shadow: none !important;
  }

  .courier-page .immersive-section .content h3 {
    color: #ffffff !important;
    font-size: 17px !important;
    margin: 0 0 6px !important;
  }

  .courier-page .immersive-section .content p {
    color: rgba(255,255,255,0.76) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin: 0 0 10px !important;
  }

  /* Earnings grid restructure for mobile */
  .courier-page .earnings-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Earnings summary and route details text colours */
  #earningsSummary h3,
  #earningsSummary p,
  #earningsSummary small,
  #routeDetails h3,
  #routeDetails p {
    color: #ffffff !important;
  }

  /* Bar charts and tables remain light for legibility */
  #earningsTable,
  #earningsTable th,
  #earningsTable td {
    background: rgba(255,255,255,0.96) !important;
    color: #0b1f3a !important;
  }

  #earningsTable {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    border-radius: 16px !important;
  }

  /* CTA component */
  .courier-page .how-cta-short {
    width: calc(100% - 28px) !important;
    margin: 18px auto 28px !important;
    background:
      radial-gradient(circle at top right, rgba(30, 79, 216, 0.4), transparent 45%),
      linear-gradient(180deg, #0c2444 0%, #061426 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 22px !important;
    padding: 28px 18px !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.25) !important;
    text-align: center !important;
  }

  .courier-page .how-cta-short h3 {
    color: #ffffff !important;
    font-size: 24px !important;
    margin: 0 0 10px !important;
  }

  .courier-page .how-cta-short p {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin: 0 0 18px !important;
  }

  .courier-page .how-cta-short .primary-btn {
    width: 100% !important;
    max-width: 250px !important;
    background: #1e4fd8 !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    padding: 13px 18px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }
}

#container-grid .container {
  width: 280px;
}

#etaGrid .container {
  width: 320px;
}
/* ===============================
   CLIENT BROWSE – ROBLOX STYLE RAIL
================================ */

.client-browse #container-grid {
  display: grid;
  grid-auto-flow: column;                 /* horizontal overflow */
  grid-template-rows: repeat(2, auto);    /* only 2 rows */
  grid-auto-columns: 280px;

  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;

  justify-content: start;                 /* override center */
  padding-bottom: 20px;
  scroll-behavior: smooth;
}
/* Keep rows aligned on browse page only */
.client-browse #container-grid .container {
  height: 100%;
  max-height: 360px; /* tweak if your cards grow */
}
/* Rail wrapper */
.client-browse .container-rail {
  position: relative;
}

/* Right-side fade hint */
.client-browse .rail-fade {
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 100%;

  background: linear-gradient(
    to left,
    rgba(255,255,255,1),
    rgba(255,255,255,0)
  );

  pointer-events: none;
}
.client-browse .rail-more {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);

  background: #1e4fd8;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
}

/* =================================================
   TIMELINE
================================================= */
.timeline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 14px 0 18px;
}

.timeline span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.35;
}

.timeline span.active {
  background: rgba(30,79,216,0.15);
  color: #1e4fd8;
  opacity: 1;
}

/* =================================================
   CLIENT ORDERS ENHANCEMENTS
=================================================
Add summary counters to the orders hero and an animated ship
that sails across the top of the page. The counters display
the number of active shipments, those currently in transit and
those delivered. The ship animation uses a keyframe
transition to move an icon continuously across the viewport. */
.orders-summary {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.summary-item {
  background: rgba(255,255,255,0.85);
  padding: 12px 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.summary-count {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--brand-blue);
}
.summary-label {
  display: block;
  font-size: 13px;
  color: #444;
}
.ship-animation {
  position: absolute;
  /* Position the ship about halfway down the hero to maximise contrast
     against the illustration behind.  Setting a greater top value
     keeps the ship from being lost in white space near the top of the hero. */
  top: 180px;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  overflow: visible;
  /* Ensure the animated ship sits above the hero background image
     but below the overlay text and summary counters.  A higher
     z-index brings the ship forward so it is not hidden behind
     decorative waves or background layers. */
  /* Place the ship above the hero background but below the overlay */
  z-index: 6;

  /* Layer the ship between the hero background and overlay text */
  z-index: 6;
}
.ship-animation img {
  position: absolute;
  top: 0;
  left: -120px;
  width: 120px;
  height: auto;
  /* Show the original navy icon with a slight drop shadow so it contrasts
     against light backgrounds. */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  opacity: 0.9;
  animation: sail 20s linear infinite;
}
@keyframes sail {
  0% { transform: translateX(-80px); }
  100% { transform: translateX(calc(100vw + 80px)); }
}

/* Order cards styling */
.order-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 20px;
  margin-bottom: 24px;
  overflow: hidden;
}

/*
 * Page-specific hero adjustments
 * -----------------------------
 * The orders page uses the standard client-hero-curved component
 * but the default height of 100vh in the base class resulted in
 * an oversized header and the background image not always
 * appearing on smaller screens.  To align with the more compact
 * heroes used on the home and how-it-works pages, we override
 * the height and minimum height specifically for the orders
 * variant.  The hero overlay is also given a higher z-index
 * than the animated ship so the text and counters remain
 * visible.
 */
.orders-hero {
  height: 60vh;
  min-height: 420px;
}
.orders-hero .hero-bg {
  background-size: cover;
  background-position: center;
}
.orders-hero .hero-overlay {
  /* Position the overlay over the illustration and style it as a card
     so the text remains legible on top of the artwork. */
  position: absolute;
  top: 35%;
  left: 5%;
  transform: translateY(-50%);
  z-index: 8;
  width: 42%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.75);
  padding: 24px;
  border-radius: 16px;
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Ensure the orders hero uses its specified illustration.  Other
   pages set a default photograph on the .hero-bg element, so we
   override it here to guarantee the illustrated background shows
   through. */
.orders-hero .hero-bg {
  background-image: url("orders-hero.png") !important;
  opacity: 1;
  filter: none;
  background-size: cover;
  background-position: center;
}


/* Typography and summary styling specific to the orders hero */
.orders-hero .hero-overlay .hero-text h1,
.orders-hero .hero-overlay .hero-text p {
  color: #0b2545;
}
/* Position the orders summary at the bottom centre of the hero.
   It floats above the animated ship and curve for a clean layout. */
/*
 * Override summary positioning on the orders hero.
 * Instead of absolutely positioning the summary bar, allow it to flow
 * naturally in the document order beneath the hero overlay.  This
 * ensures the counters do not overlap the navigation or hero text on
 * smaller screens.  The bar remains centred and evenly spaced thanks
 * to the global .orders-summary rules defined earlier.
 */
/*
 * Position the summary counters over the hero illustration.  The bar is
 * absolutely positioned relative to the hero container, floating near
 * the bottom and centred horizontally.  This keeps it clearly
 * separated from the hero headline while remaining prominent.
 */
.orders-hero .orders-summary {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
  z-index: 8;
}
.orders-hero .summary-item {
  background: rgba(255,255,255,0.9);
  padding: 12px 18px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.orders-hero .summary-count {
  font-size: 24px;
  font-weight: 700;
  color: #1e4fd8;
}
.orders-hero .summary-label {
  font-size: 13px;
  color: #475569;
}

/*
 * Moving ship marquee
 * -------------------
 * The orders page hero now features a subtle line of motion by
 * animating a ship icon across the bottom of the header.  Placing
 * this element inside the overlay ensures it stays above the
 * background image but behind the summary counters.  The ship
 * resets to the left once it exits the right edge.
 */
.ship-marquee {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  height: 50px;
  pointer-events: none;
  overflow: hidden;
  /* Ensure the ship animation appears above the hero background but
     below the summary counters and overlay. Without a z-index, the
     image can be hidden behind the illustration. */
  z-index: 7;
}
.ship-marquee img {
  position: absolute;
  bottom: 0;
  left: -100px;
  width: 80px;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  opacity: 0.9;
  animation: shipMarquee 20s linear infinite;
}
@keyframes shipMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(100% + 200px)); }
}
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.order-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.order-meta {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}
.order-timeline {
  margin-top: 12px;
}
.order-timeline ul {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0;
  margin: 20px 0 10px;
  list-style: none;
}
.order-timeline li {
  text-align: center;
  flex: 1;
  position: relative;
  font-size: 11px;
  color: #666;
}
.order-timeline li::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e5e7eb;
  display: block;
  margin: 0 auto 6px;
}
.order-timeline li.active::before {
  background: var(--brand-blue);
}
.order-timeline li::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #e5e7eb;
  z-index: -1;
}
.order-timeline li:last-child::after {
  display: none;
}
.order-breakdown {
  margin-top: 12px;
  display: none;
  background: #f9fbff;
  border-radius: 12px;
  padding: 12px;
  font-size: 13px;
  color: #333;
}
.breakdown-toggle {
  margin-top: 8px;
  font-size: 13px;
  color: var(--brand-blue);
  cursor: pointer;
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
}
.breakdown-toggle:focus { outline: none; }
.breakdown-toggle::after {
  content: '▼';
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.3s ease;
}
.breakdown-toggle.expanded::after {
  transform: rotate(180deg);
}

/* =================================================
   SUPPORT PAGE ENHANCEMENTS
================================================= */
.support-pillar-section {
  margin-top: 40px;
}
.pillar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}
.pillar-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
  padding: 24px;
  flex: 1 1 280px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.pillar-card h3 {
  margin-top: 0;
  font-size: 20px;
  color: var(--brand-navy);
}
.pillar-card p {
  font-size: 14px;
  color: #555;
}
.pillar-content {
  display: none;
  margin-top: 12px;
  font-size: 14px;
  color: #444;
}
.pillar-card.active .pillar-content {
  display: block;
}
.pillar-card.active {
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* Accordion for FAQs */
.accordion {
  margin-top: 20px;
}
.accordion-item {
  border-bottom: 1px solid #e5e7eb;
}
.accordion-header {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-navy);
  cursor: pointer;
  position: relative;
}
.accordion-header::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  transition: transform 0.3s ease;
}
.accordion-header.active::after {
  content: '-';
}
.accordion-content {
  display: none;
  padding: 0 0 14px;
  font-size: 14px;
  color: #555;
}
.accordion-content.open {
  display: block;
}

/* Chat simulation block */
.chat-sim {
  margin-top: 40px;
  background: #f0f4ff;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}
.chat-sim h3 {
  margin: 0 0 12px;
  font-size: 20px;
  color: var(--brand-navy);
}
.chat-stats p {
  margin: 6px 0;
  font-size: 14px;
  color: #333;
}

/* =================================================
   PRICING PAGE ENHANCEMENTS
================================================= */
.calculator-section {
  margin-top: 40px;
  background: #f9fbff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}
.calculator-section h2 {
  margin-top: 0;
  font-size: 22px;
}
.calculator-form {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}
.calculator-form .form-group {
  flex: 1 1 180px;
}
.calculator-form label {
  font-size: 12px;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
  color: var(--brand-navy);
}
.calculator-form input,
.calculator-form select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
}
.calc-result {
  margin-top: 24px;
  font-size: 15px;
  color: #333;
  line-height: 1.6;
}
.calc-result strong {
  color: var(--brand-navy);
}
.comparison-section {
  margin-top: 60px;
}
.comparison-table-simple {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  border-collapse: collapse;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}
.comparison-table-simple th,
.comparison-table-simple td {
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
  text-align: left;
}
.comparison-table-simple th {
  background: #f0f4ff;
  font-weight: 600;
  color: var(--brand-navy);
}
.comparison-table-simple td:first-child {
  font-weight: 600;
}
.comparison-table-simple tr:last-child td {
  border-bottom: none;
}
.breakdown-section {
  margin-top: 60px;
  text-align: center;
}
.breakdown-section img {
  max-width: 450px;
  width: 100%;
  margin: 20px auto;
  display: block;
}

/* =================================================
   SAVINGS PAGE ENHANCEMENTS
================================================= */
.scenario-section {
  margin-top: 40px;
  background: #f9fbff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}
.scenario-section h3 {
  margin-top: 0;
  font-size: 20px;
}
.scenario-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.scenario-table th,
.scenario-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 13px;
  text-align: left;
}
.scenario-table th {
  background: #f0f4ff;
  font-weight: 600;
}
.scenario-table td:first-child {
  font-weight: 600;
}
.scenario-table tr:last-child td {
  border-bottom: none;
}
.curve-section {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
}
.curve-chart {
  width: 100%;
  max-width: 600px;
  height: 300px;
  margin: 0 auto;
}
.environment-section {
  margin-top: 40px;
  background: #f9fbff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}
.environment-section h3 {
  margin-top: 0;
  font-size: 20px;
}
.environment-section ul {
  padding-left: 20px;
}
.environment-section li {
  margin-bottom: 8px;
  font-size: 14px;
}

/* =================================================
   ABOUT PAGE ENHANCEMENTS
================================================= */
.origin-story,
.marketplace-model,
.future-vision {
  margin-top: 40px;
  padding: 20px;
}
.origin-story h2,
.marketplace-model h2,
.future-vision h2 {
  font-size: 24px;
  margin-bottom: 12px;
  color: var(--brand-navy);
}
.origin-story p,
.marketplace-model p,
.future-vision p,
.future-vision li {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
}
.model-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.flow-item {
  flex: 1 1 120px;
  text-align: center;
}
.flow-item .icon-box {
  width: 60px;
  height: 60px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: #f0f4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue);
  font-size: 26px;
  font-weight: 700;
}
.model-flow .arrow {
  flex: 0 0 40px;
  font-size: 20px;
  color: var(--brand-blue);
  text-align: center;
}
.future-vision ul {
  padding-left: 20px;
}
.future-vision li {
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .orders-summary {
    flex-direction: column;
    align-items: center;
  }
  .model-flow {
    flex-direction: column;
  }
}

/*
 * Orders page mobile tweaks
 * -------------------------
 * On smaller screens the hero layout must adapt so that the overlay
 * and summary counters remain readable.  The overlay expands to
 * occupy more horizontal space and sits closer to the vertical centre,
 * while the summary bar stacks vertically and shifts slightly
 * upward.  These overrides apply only when the viewport is less than
 * or equal to 768px wide.
 */
@media (max-width: 768px) {
  .orders-hero .hero-overlay {
    left: 10%;
    top: 40%;
    width: 80%;
    max-width: none;
    transform: translateY(-50%);
  }
  .orders-hero .orders-summary {
    bottom: 60px;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .orders-hero .summary-item {
    padding: 8px 14px;
  }
}

/* ===============================
   PUBLISH GRID
================================ */
.publish-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 30px;
  align-items: flex-start;
}

/* ===============================
   ROUTE PANEL
================================ */
.route-panel {
  background: #ffffff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

.route-panel h3 {
  margin: 0 0 4px;
}

.route-sub {
  font-size: 13px;
  color: #555;
  margin-bottom: 14px;
}

/* ===============================
   MAP CANVAS
================================ */
.post-container-page .map-canvas {
  position: relative;
  height: 380px;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #f6f8fc 0%,
    #eef3ff 100%
  );
}


/* ===============================
   MAP NODES
================================ */
.post-container-page .node {
  position: absolute;
  padding: 10px 14px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.4s ease;
}

.post-container-page .node span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #555;
}
.post-container-page .node.active {
  opacity: 1;
  transform: scale(1);
}
/* Positions */
.origin { top: 60px; left: 40px; }
.port { top: 190px; left: 190px; }
.warehouse { top: 320px; left: 320px; }

/* ===============================
   ROUTE PATH
================================ */
.post-container-page .path {
  position: absolute;
  top: 50%;
  left: 8%;
  width: 84%;
  height: 3px;
  background: repeating-linear-gradient(
    to right,
    #1e4fd8,
    #1e4fd8 10px,
    transparent 10px,
    transparent 18px
  );
  opacity: 0.85;
}


/* ===============================
   ROUTE MILESTONES (TIME / STATUS)
================================ */

.post-container-page .route-milestone {
  position: absolute;
  top: calc(50% - 28px);
  transform: translateX(-50%);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #1e4fd8;
}

.post-container-page .route-milestone span {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #445;
}

/* ===============================
   ROUTE STATUS
================================ */
.post-container-page .route-status {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: #1e4fd8;
}

/* ===============================
   POST CONTAINER – OPS ROW
================================ */

.post-container-page .pc-ops-row{
  display: flex;
  justify-content: flex-end; /* 👈 push to right */
  gap: 20px;
  margin-top: 24px;
}

/* =================================================
   EARNINGS / PROFIT PAGE
================================================= */
/* Chart container to visualise earnings per container. Bars scale relative to
   the maximum revenue value. */
#earningsChart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

#earningsChart .bar {
  position: relative;
  height: 26px;
  background: linear-gradient(90deg, #1e4fd8 0%, #6aa9ff 100%);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 13px;
  padding-left: 10px;
  transition: width 0.3s ease;
}

#earningsChart .bar span {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #fff;
  font-weight: 700;
  pointer-events: none;
}

/* Earnings summary styling */
#earningsSummary h3 {
  margin: 0;
  font-size: 20px;
  color: #0b1f3a;
}

#earningsSummary p {
  margin: 4px 0 0;
  font-size: 32px;
  color: #1e4fd8;
  font-weight: 700;
}

/* Earnings table */
#earningsTable {
  width: 100%;
  margin-top: 40px;
  border-collapse: collapse;
}

#earningsTable th,
#earningsTable td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid #eceff5;
  font-size: 13px;
  color: #333;
}

#earningsTable th {
  background: #f5f8ff;
  color: #0b1f3a;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
}


/* ===============================
   POST CONTAINER PAGE ONLY
   =============================== */

.post-container-page {
  min-height: calc(100vh - 90px);
  display: flex;
}

.dashboard-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;        /* ✅ THIS IS THE FIX */
  padding: 0 24px;
}



.pc-grid {
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: stretch;
  min-height: calc(100vh - 120px);
  gap: 24px;
}




.post-container-page .pc-ops {
  background: #ffffff;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
}

.post-container-page .pc-ops h3{
  font-size: clamp(16px, 2vw, 20px);
}

.post-container-page .pc-ops p{
  font-size: clamp(13px, 1.4vw, 14px);
}

.post-container-page .pc-ops img{
  max-height: clamp(100px, 20vw, 140px);
}


/* ===============================
   POST CONTAINER – OPS CARD SIZE OVERRIDE
================================ */

/* Make ops card small & right-side friendly */
.post-container-page .pc-ops{
  width: 100%;
  max-width: 820px;        /* desktop cap */
  padding: clamp(14px, 2vw, 20px);
  border-radius: 18px;
}


/* Scale image down for compact card */
.post-container-page .pc-ops img{
  max-height: 140px;
  object-fit: contain;
  opacity: 0.9;
}



@media (max-width: 900px) {
  .post-container-page .pc-grid {
    grid-template-columns: 1fr;
  }
}

/* =================================================
   PARALLAX SECTION
================================================= */
/* A dramatic full‑width section with a fixed background that
   creates a parallax effect as the user scrolls. It includes
   a dark overlay and call‑to‑action area. Suitable for
   emphasising sign‑up and login prompts on the landing page. */
.parallax-section {
  position: relative;
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  /* Decorative image representing global trade routes; placed in root */
  background-image: url('parallax-bg.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
}

.parallax-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.parallax-section .cta {
  position: relative;
  z-index: 1;
  max-width: 600px;
  padding: 20px;
}

.parallax-section .cta h2 {
  font-size: 36px;
  margin-bottom: 14px;
  color: #ffffff;
}

.parallax-section .cta p {
  font-size: 16px;
  margin-bottom: 24px;
  color: #e2e8f5;
}

.parallax-section .cta .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.parallax-section .cta .cta-buttons a,
.parallax-section .cta .cta-buttons button {
  padding: 14px 26px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.parallax-section .cta .cta-buttons .primary {
  background: #1e4fd8;
  color: #ffffff;
  border: none;
}

.parallax-section .cta .cta-buttons .primary:hover {
  background: #163bb3;
}

.parallax-section .cta .cta-buttons .secondary {
  background: rgba(255, 255, 255, 0.9);
  color: #1e4fd8;
  border: none;
}

.parallax-section .cta .cta-buttons .secondary:hover {
  background: #ffffff;
}

/* =================================================
   HERO PARALLAX (TOP VERSION)
================================================= */

.hero-parallax-top {
  min-height: 100vh;
  background-position: center top;
  background-attachment: fixed;
}

/* Ensure hero content is above overlay */
.hero-parallax-top .hero-wrap {
  position: relative;
  z-index: 2;
}

/* Improve contrast for hero text */
.hero-parallax-top h1,
.hero-parallax-top p,
.hero-parallax-top .hero-tag {
  color: #0b1f3a;
}
/* =================================================
   HERO TEXT OVERRIDE — PARALLAX TOP ONLY
================================================= */

.hero-parallax-top .hero-text h1 {
  color: #ffffff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.hero-parallax-top .hero-text p {
  color: #d6deee;
}

.hero-parallax-top .hero-tag {
  background: rgba(255, 255, 255, 0.18);
  color: #eaf0ff;
  backdrop-filter: blur(6px);
}

/* =================================================
   POST CONTAINER – FULL PARALLAX BACKGROUND
================================================= */

.post-parallax {
  position: relative;
  min-height: 100vh;
  background-image: url("parallax-bg.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  /* 👇 critical fix for sticky */
  overflow-x: hidden;
  overflow-y: visible;
}


/* Dark cinematic overlay */
.post-parallax-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(10, 30, 58, 0.55),
    rgba(10, 30, 58, 0.35)
  );
  z-index: 0;
}

/* Ensure content floats above background */
.post-parallax .page-content {
  position: relative;
  z-index: 2;
}

.post-container-page {
  margin-top: -100px;
}

.pc-left {
  margin-top: 100px;
}

/* ===============================
   HOW IT WORKS – PARALLAX FILL
   (fills space under how-hero)
================================ */



/* =================================================
   POST CONTAINER – FORM INTRO & SECTIONS
================================================= */

.form-intro {
  margin-bottom: 32px;
}

.form-intro h2 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 800;
  color: #0b1f3a;
}

.form-intro .subtitle {
  font-size: 15px;
  color: #445;
  max-width: 520px;
  line-height: 1.6;
}

.form-section {
  margin: 36px 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: #1e4fd8;
}

/* ===============================
   POST CONTAINER – FORM PANEL
================================ */

.pc-left {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 22px;
  padding: 36px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  max-height: calc(160vh - 120px);
  overflow: hidden;
}

.pc-left-top {
  overflow-y: auto;
  padding-right: 12px;
}

/* ===============================
   POST CONTAINER – MAP CARD (STEP 3)
================================ */

/* ===============================
   POST CONTAINER – RIGHT SIDE
================================ */

.pc-right {
  display: flex;
  flex-direction: column;
  height: 100%;
}


/* Map fills the entire top-right area */
.post-container-page .pc-map {
  flex: 1;
  width: 100%;
  position: relative;

  /* grows with screen height, not fixed */
  min-height: calc(100vh - 1220px);
  margin-top: 100px;

  background:transparent;

  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
  overflow: hidden;
}


/* Ops stays below the map */
.post-container-page .pc-ops {
  margin-top: 24px;
}

.post-container-page .dashboard-wrapper {
  max-width: none;
  width: 100%;
}

/* Shared */
.map-silhouette{
  position: absolute;
  z-index: 1;
  opacity: 0.9;
  pointer-events: none;
}

/* 🇨🇳 China — pulled toward centre */
.map-silhouette.china {
  top: 220px;
  left: 20px;
  width: 600px;
}


/* 🇦🇺 Australia — closer + balanced */
.map-silhouette.australia {
  top: 520px;
  left: 720px;
  width: 540px;
}

.step-port { background: #f0f6ff; }
.step-sea { background: #e8f3ff; }
.step-wh { background: #f9f9f9; }

/* ===============================
   EARNINGS PAGE – COMPACT HERO
================================ */

/* ===============================
   EARNINGS – FULL WIDTH HEADER
================================ */

.earnings-hero {
  position: relative;
  width: 100vw;                /* 🔥 full screen width */
  margin-left: calc(50% - 50vw); /* escape wrapper */
  min-height: 280px;           /* 🔥 short height */
  height: 280px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.earnings-hero .parallax-bg {
  position: absolute;
  inset: 0;
  background: url("parallax-bg.png") center / cover no-repeat;
  transform: scale(1.1);
  will-change: transform;
}

.earnings-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(7,16,32,.55),
    rgba(7,16,32,.75)
  );
}

.earnings-hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  color: #fff;
}

/* ===============================
   EARNINGS – DUAL IMAGE EXPLAINER
================================ */

.earnings-explain {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 60px;
}

.earnings-explain .image-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.explain-img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

.earnings-explain .content {
  max-width: 900px;
}

.earnings-split {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 48px;
  align-items: start;
  margin: 80px 0;
}

.earnings-split img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  margin-bottom: 24px;
}

.earnings-split .content h3 {
  margin-top: 0;
}

/* ================= EARNINGS BACKGROUND FILL ================= */

.earnings-bg-fill {
  position: relative;
  width: 100%;
  min-height: 100vh; /* fills the screen */
  background-image: url("revenue-bg.png"); /* your new chart image */
  background-size: cover;
  background-position: bottom right; /* growth scale lives here */
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}

.earnings-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.85) 45%,
    rgba(255,255,255,0.2) 100%
  );
  z-index: 1;
}

.earnings-bg-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 100px 6%;
}

/* ===============================
   HOME – COMPACT PARALLAX
================================ */

/* ===============================
   HOME PARALLAX (SMALL + FULL WIDTH)
================================ */

.home-parallax {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: 0;

  min-height: 280px;           /* smaller than signup */
  display: flex;
  align-items: center;

  background-image:
    linear-gradient(
      rgba(10, 20, 40, 0.55),
      rgba(10, 20, 40, 0.55)
    ),
    url("parallax-bg.png");   /* use your existing image */

  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.home-parallax .cta {
  max-width: 1100px;
  padding: 0 32px;
}

/* ===============================
   HOME SPLIT SECTION (40 / 60)
================================ */

.home-split {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 48px;
  align-items: center;
}

.home-split img {
  width: 100%;
  border-radius: 18px;
}

.home-split .content {
  margin-top: 18px;
}

.home-split-left,
.home-split-right {
  display: flex;
  flex-direction: column;
}

.earnings-grid {
  display: grid;
  grid-template-columns: 65% 35%;
  gap: 24px;
  margin-top: 24px;
}

.earnings-side {
  background: rgba(255,255,255,0.9);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

.route-container {
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}

.route-container a {
  color: #1e4fd8;
  font-weight: 600;
  text-decoration: none;
}

/* Mobile fallback */
@media (max-width: 900px) {
  .home-split {
    grid-template-columns: 1fr;
  }
}



@media (max-width: 900px) {
  .earnings-split {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 900px) {
  .earnings-explain .image-pair {
    grid-template-columns: 1fr;
  }
}

/* ===============================
   COURIER DASHBOARD PARALLAX
================================ */
.dashboard-parallax {
  min-height: 260px;            /* smaller than earnings */
  background-image:
    linear-gradient(
      rgba(10,20,40,.65),
      rgba(10,20,40,.85)
    ),
    url("parallax-bg.png");     /* reuse existing bg */
  background-size: cover;
  background-position: center top;
  display: flex;
  align-items: center;
}

.dashboard-parallax .cta {
  max-width: 720px;
}

/* ===============================
   COURIER DASHBOARD GUIDE
================================ */

.dashboard-guide {
  background: var(--brand-light);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 80px 6vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  background: #f6f8fc;
}

.guide-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin: 120px 0;
}

.guide-image {
  width: 100%;
  max-width: 520px;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(11, 31, 58, 0.18);
}


/* placeholder look for now */
.guide-image.placeholder {
  background:
    linear-gradient(135deg, #dbe2f2, #eef2fb);
}

.guide-content h3 {
  margin: 0;
  font-size: 22px;
  color: var(--brand-navy);
}

.guide-content p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);

}

/* Responsive */
@media (max-width: 900px) {
  .dashboard-guide {
    grid-template-columns: 1fr;
    padding: 60px 20px;
  }
}



/* Disable fixed attachment on small screens to improve
   performance and compatibility on mobile devices. On narrow
   viewports the background scrolls normally instead of
   using a parallax effect. */
@media (max-width: 1100px) {
  .map-silhouette {
    transform: translate(-100px, -80px);
  }
}

@media (max-width: 900px) {
  .map-silhouette {
    transform: translate(-140px, -110px);
  }
}

/* ===============================
   SNAKE ANIMATION
================================ */
#snakePath {
  stroke-dasharray: 14 12;
  stroke-dashoffset: 0;      /* 🔥 REQUIRED */
  animation: dashFlow 18s linear infinite;
}

@keyframes dashFlow {
  to {
    stroke-dashoffset: -1000;
  }
}

/* ===============================
   Client-side Enhancements
   New components for information icon, chat icon,
   orders empty state, support contact cards and responsive tweaks
================================ */

/* Client Home info icon and tooltip */
.client-info-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--brand-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
  z-index: 1000;
}

.client-info-icon:hover {
  transform: scale(1.1);
}

.client-info-icon .tooltip {
  display: none;
  position: absolute;
  top: -10px;
  right: 50px;
  padding: 10px 14px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  font-size: 14px;
  width: max-content;
  max-width: 240px;
  background-color: #ffffff;
  color: var(--text-dark);
  border: 1px solid #e5e7eb;
}

.client-info-icon:hover .tooltip {
  display: block;
}

/* Floating chat icon with tooltip */
.chat-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--brand-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.chat-icon .tooltip {
  display: none;
  position: absolute;
  right: 70px;
  bottom: 16px;
  padding: 12px 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  font-size: 14px;
  max-width: 240px;
    background-color: #ffffff;
  color: var(--text-dark);
  border: 1px solid #e5e7eb;
}

.chat-icon:hover .tooltip {
  display: block;
}

/* Orders empty state styling */
.orders-empty {
  text-align: center;
  padding: 60px 20px;
  max-width: 600px;
  margin: 0 auto;
}

.orders-empty img {
  max-width: 280px;
  width: 100%;
  margin: 0 auto 30px;
  display: block;
}

.orders-empty h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.orders-empty p {
  font-size: 16px;
  margin-bottom: 20px;
  color: #555;
}

.orders-empty .cta {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.orders-empty .cta:hover {
  background-color: #0056b3;
}

/* Support contact cards */
.support-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
}

.support-card {
  flex: 1 1 250px;
  border-radius: 8px;
  padding: 24px;
  display: flex;
    background-color: #ffffff;
  box-shadow: 0 8px 24px rgba(11, 31, 58, 0.08);
  align-items: center;
  gap: 16px;
  transition: transform 0.2s ease;
}

.support-card:hover {
  transform: translateY(-4px);
}

.support-card i {
  font-size: 32px;
  color: var(--brand-blue);
}

.support-card h4 {
    color: var(--brand-blue);
  margin: 0 0 6px 0;
  font-size: 18px;
  font-weight: 600;
}

.support-card p {
  margin: 0;
  font-size: 14px;
  color: var(--brand-blue);
}

/* Responsive tweaks for client pages */
@media (max-width: 768px) {
  .client-hero {
    padding: 60px 20px;
    text-align: center;
  }
  .client-hero h1 {
    font-size: 32px;
  }
  .features .cards {
    flex-direction: column;
  }
  .support-cards {
    flex-direction: column;
  }
  .chat-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

}

/* Client hero base styling */
.client-hero {
  position: relative;
  padding: 120px 20px;
  color: #fff;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
}

.client-hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

.client-hero h1,
.client-hero p {
  position: relative;
  z-index: 1;
}

/* ===== New interactive client features ===== */
/* Parallax section with immersive background that moves with your mouse */
.parallax-section {
  position: relative;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  color: #fff;
  text-align: center;
  padding: 100px 20px;
  overflow: hidden;
}

.parallax-section h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.parallax-section p {
  font-size: 1.125rem;
  max-width: 700px;
  margin: 0 auto 20px;
  line-height: 1.6;
}

.parallax-section .cta {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 32px;
  background: var(--primary, #007aff);
  color: #fff;
  border-radius: 8px;
  transition: transform 0.2s ease;
  text-decoration: none;
  font-weight: 600;
}

.parallax-section .cta:hover {
  transform: translateY(-3px);
}

/* Info icon and tooltip used throughout client pages */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  cursor: pointer;
  border-radius: 50%;
  background: #edf2f7;
  color: var(--primary, #007aff);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.tooltip {
  display: none;
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 0;
  background: #ffffff;
  color: #4a5568;
  border: 1px solid #e2e8f0;
  padding: 12px;
  border-radius: 6px;
  width: 250px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  font-size: 0.875rem;
  text-align: left;
}

.tooltip.show {
  display: block;
}

/* ===============================
   SIGNUP OVERLAY
================================ */

.signup-shell {
  display: grid;
  grid-template-columns: 1fr 420px;
  max-width: 960px;
  border-radius: 22px;
  overflow: hidden;
}

.signup-info {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: white;
  padding: 48px;
  background: #0b1f3a;
}

.signup-form {
  padding: 48px;
  background: white;
  position: relative;
  z-index: 2;
}

.role-picker button.active {
  outline: 3px solid #1e4fd8;
}

.change-role {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #9fb7ff;
  background: none;
  border: none;
  cursor: pointer;
}

.change-role:hover {
  color: #fff;
  text-decoration: underline;
}

.parallax-bg {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

.info-content {
  position: relative;
  z-index: 2;
}

.client-bg {
  background-image: url("client-map.png");
}

.courier-bg {
  background-image: url("courier-ship.png");
}


/* CLIENT HERO CURVE */
/* ===============================
   HERO WITH TEXT INSIDE IMAGE
================================ */

.client-hero-curved {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 520px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: transparent;
}

/* IMAGE LAYER */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 5;

  background-image: url("A_digital_photograph_captures_a_large_container_sh.png");
  background-repeat: no-repeat;

  /* 🔑 EXACTLY like clouds */
  background-size: 100% 100%;
  background-position: center top;
}
.hero-bg img {
  width: 100vw;
  height: 100%;
  object-position: 85% 10%;
    z-index: 5;

  /* 🔥 THIS is the real fix */
  transform: translateY(20px);
}

/* ===== FORCE HOW HERO UP (OVERRIDES MOBILE + ANIMATION) ===== */
.how-hero .hero-bg{
  animation: none !important;                 /* stop animation overriding position */
  background-position: center -120px !important;
  z-index:4;
}

/* mobile tweak */
@media (max-width: 768px){
  .how-hero .hero-bg{
    background-position: center -1200px !important;
  }
}

/* =========================================
   HOW HERO – PARALLAX EXTENSION (UNDERLAY)
========================================= */

/* ===============================
   HOW IT WORKS – PARALLAX UNDERLAY
   (same logic as signup)
================================ */

.how-parallax-under { 
  width: 100vw; 
  margin-left: calc(50% - 50vw); 
  min-height: 20; /* controls coverage */ 
  margin-top: -260px; /* tucks under hero curve */ 
  background-image: url("parallax-bg.png"); 
  background-size: transparent; background-position: center bottom; 
  background-attachment: fixed; 
  z-index: 1; 
} /* soften transition into clouds */ 
.how-parallax-under::after { 
  content: ""; 
  position: absolute; 
  inset: 0; 
} 

@media (max-width: 768px) {
   .how-parallax-under {
     min-height: 40vh; 
     margin-top: -80px; 
     background-attachment: scroll; 
    } }





/* TEXT LAYER */
.hero-overlay {
  position: relative;
  width: 50%;
    z-index: 5;
}

.hero-text {
  max-width: 700px;
  margin-left: clamp(40px, 7vw, 120px);
  color: #ffffff;
    z-index: 5;

}

.hero-text h1 {
    color: #ffffff;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
    z-index: 5;
}

.hero-text p {
  color: rgba(255, 255, 255, 0.9);
  margin: 18px 0 28px;
  font-size: 18px;
  opacity: 0.95;
    z-index: 5;
}
/* ===============================
   CLOUD BACKGROUND SECTION
================================ */

.cloud-section {
  position: relative;
  width: 100vw;
  margin-top: -500px;
  margin-left: calc(50% - 50vw); /* full bleed */
    padding-top: 300px;
  padding-bottom: 380px;
  background-image: url("clouds.png");
background-size: 100% 100%;
background-position: center -40px;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 4;
  
}

/* soft fade so clouds don’t overpower cards */
.cloud-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.7) 50%,
    rgba(255,255,255,0.3) 100%
  );
  z-index: 4;
}

/* content above clouds */
.container-content {
  position: relative;
  z-index: 4;
  max-width: 1200px;
  margin: 0 auto;
}

/* headings stay dark & readable */
.cloud-section h2 {
  font-size: 32px;
  margin-bottom: 8px;
  color: #0b1f3a;
}

.cloud-section p {
  margin-bottom: 40px;
  color: #475569;
}

.available-containers {
  padding: 120px 6vw;
  background: #f6f8fc;
}

.cloud-section .container-content{
  position: relative;
  z-index: 5;          /* ABOVE clouds.png */
}

/* ===============================
   WHY BOOK WITH 4WARD
================================ */

.why-4ward {
  position: relative;
  margin-top: -600px;
  padding-bottom: 820px;

  /* ⬆️ THIS is what gives clouds more vertical room */
  padding: 80px;

  min-height: 1400px;

  width: 100vw;
  margin-left: calc(50% - 50vw);

  background-image: url("clouds-2.png");
  background-repeat: no-repeat;

  /* ⬇️ key change */
  background-size: 100% 100%;
  background-position: center bottom;
  background-color: transparent;
  text-align: center;
  overflow:hidden;
  margin-bottom: -320px;
  z-index: 3;
}
.why-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;

  /* 🎛️ THIS IS YOUR HEIGHT SLIDER */
  padding-top: 360px;   /* ↓ lower = cards go UP */
  padding-bottom: 120px;
}
.why-4ward h2 {
  font-size: 34px;
  margin-bottom: 20px; /* was 60px */
  color: #0b1f3a;
  z-index: 3;
}

.why-grid {
  margin: -40px auto 0; /* top | left-right | bottom */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 3;
}

.why-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 32px 26px 36px;
  box-shadow: 0 14px 40px rgba(11, 31, 58, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  z-index: 3;
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(11, 31, 58, 0.18);
  z-index: 3;
}

.why-card img {
  max-width: 220px;
  width: 100%;
  height: auto;
  margin: 0 auto 22px;
  display: block;
  z-index: 3;
}

.why-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #0b1f3a;
  z-index: 3;
}

.why-card p {
  font-size: 15px;
  line-height: 1.6;
  color: #475569;
  margin: 0;
  z-index: 3;
}

/* ===============================
   HOW IT WORKS – SHIPPING JOURNEY
================================ */

.how-it-works{
  position: relative;
  z-index: 3;          /* above the wave */
  background: transparent;
  text-align: center;

  /* keep normal spacing, then lift ONLY the content */
  margin: 0;
  padding: 120px 6vw 160px;

  transform: translateY(260px);  /* <-- “cards move up slider” */
}

.how-it-works h2 {
  font-size: 34px;
  margin-bottom: 60px;
  color: #0b1f3a;
  z-index: 3;
  padding-top: 180px;
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  align-items: stretch;
  max-width: 1600px;
  margin: 0 auto;
}

.how-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 24px 22px 30px;
  box-shadow: 0 14px 40px rgba(11, 31, 58, 0.12);
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  z-index: 3;
}

.how-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(11, 31, 58, 0.18);
  z-index: 3;
}

/* Step number */
.step-badge {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ff7a18;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 3;
}

/* Images */
.how-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 18px;
  z-index: 3;
}

/* Titles */
.how-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #0b1f3a;
  z-index: 3;
}

/* Text */
.how-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #475569;
  z-index: 3;
}

/* Make In-Transit wider */
.how-card.wide {
  grid-column: auto; /* REMOVE span */
}

.client-browse {
  background: #ffffff;
}

.sea-section{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);

  /* overlap under clouds-2 */
  margin-top: -520px;

  /* IMPORTANT: don't paint the wave on the wrapper anymore */
  background: transparent;

  /* space for your content + bottom curve area */
  padding: 0 0 140px;

  z-index: 2;
}

/* the wave layer (independent of the cards) */
.sea-bg{
  position: absolute;
  top: 120px;                 /* leave this at 0 unless you want the wave itself to shift */
  left: 0;
  width: 100%;
  height: 1800px;          /* <-- “wave height slider” (make bigger if needed) */

  background-image: url("seawave.png");
  background-size: cover;
background-position: center;
  background-repeat: no-repeat;

  z-index: 2;
  pointer-events: none;
}

/* ===============================
   BOTTOM HERO (FOOTER ANCHOR)
================================ */

/* ===============================
   BOTTOM HERO — AT SHORE
================================ */

.bottom-hero{
  position: relative;
  width: 100vw;
  min-height: 90vh;   /* was 140vh */
  height: 72vh;
  margin-left: calc(50% - 50vw);

  display: flex;
  align-items: flex-start;
  justify-content: center;

  background: #ffffff;
  z-index: 1;
  overflow: hidden;
  padding-top: 70px;
}

/* swap background image */
.bottom-hero .hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;

  background-image: url("atShore.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

/* soft fade so it blends into page */
.bottom-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 78%,
    rgba(255,255,255,0.92) 94%,
    rgba(255,255,255,1) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* content above image */
.bottom-hero .hero-overlay{
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.bottom-hero .hero-text{
  position: relative;
  z-index: 2;
  margin: 0;
  margin-top: 500px;
}

/* center CTA nicely */
.bottom-hero .hero-overlay{
  width: 100%;
  display: flex;
  justify-content: center;
}
/* ==================================================
   MOBILE STACKING RESET — FINAL & SAFE
   (ONLY affects <= 768px)
================================================== */
/* ==================================================
   MOBILE HERO + WHITE SPACE FIX (FINAL)
================================================== */

@media (max-width: 768px) {

  /* ===============================
     TOP HERO (CLIENT HERO CURVED)
  =============================== */

    .top-nav{
    position: relative;
  }

  /* Hide links by default on mobile */
  .nav-links{
    position: absolute;
    top: 100%;
    right: 0;
    width: 220px;

    background: #0b1f3a;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);

    display: none;
    flex-direction: column;
    padding: 12px;
    z-index: 999;
  }

  .nav-links a{
    padding: 12px 14px;
    font-size: 14px;
    color: #fff;
    border-radius: 8px;
  }

  .nav-links a:hover{
    background: rgba(255,255,255,0.1);
  }

  /* Hamburger button */
  .nav-toggle{
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;

    margin-left: auto;
  }

  /* Show menu when active */
  .top-nav.menu-open .nav-links{
    display: flex;
  }

  .how-it-works-page .client-hero-curved {
  height: auto;
  min-height: 100px; /* keeps desktop beauty */
  padding-bottom: 250px; /* space for cards */
  overflow: visible; /* IMPORTANT */
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center top;
  z-index:3;
}

.how-it-works-page .hero-overlay,
.how-it-works-page .hero-content {
  overflow: visible;
}


  .hero-overlay {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .hero-text {
    margin: 0;
    max-width: 340px;
    text-align: center;
  }

  .hero-text h1 {
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 12px;
  }

  .hero-text p {
    font-size: 12.5px;
    margin-bottom: 16px;
  }

  .primary-btn {
    font-size: 13px;
    padding: 10px 14px;
  }

  /* Prevent hero image from pushing content down */
  .hero-bg {
        background-size: cover;
    background-position: center bottom;
  }

  /* ===============================
     AVAILABLE CONTAINERS SECTION
  =============================== */

  .cloud-section {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);

    margin-top: -140px;        /* overlap hero */   /* overlap why */

    min-height: 200vh;

    padding-top: 80px;        /* text higher */

    background-image: url("clouds.png");
    background-size: 100% 100%; /* smaller, no hard edge */
    background-position: top bottom;

    overflow: transparent;
    z-index: 4;
  }



  .cloud-section h2 {
    margin-top: 120px;
    font-size: 18px;
    margin-bottom: 6px;
  }

  .cloud-section p {
    font-size: 12px;
    margin-bottom: 16px;
  }
  .container-content {
  padding-top: 0;
}

.cloud-section .container-content {
    position: relative;
    top: -200px;
    padding-top: 80px;   /* 🔧 adjust 80–160px to taste */
  }

  /* ===============================
     BOTTOM HERO (AT SHORE)
  =============================== */

  .bottom-hero {
    min-height: 200px;
    padding: 40px 16px;
    align-items: center;
    margin-top: -20px;
    
  }

  .bottom-hero .hero-bg {
    background-position: center 70%;
  }

  /* Kill fake white space */
  .bottom-hero::after {
     display: none;
  }
  .container-content {
    margin-top: 0;
  }

.why-inner {
    padding-top: 260px;      /* 🔥 pushes text INTO cloud area */
    position: relative;
    z-index: 6;
  }

  .how-it-works{
  /* Push the whole "How it works" section DOWN so it doesn't sit under clouds-2.png */
  transform: none !important;
  margin-top: 140px;          /* increase if you want even lower */
  padding-top: 80px;          /* breathing room above cards */
}

}

@media (max-width: 768px) {

  .cloud-section{
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);

    /* keep your sizing */
    min-height: 140vh;
    padding-top: 120px;
    padding-bottom: 520px;

    /* overlap depth */
    margin-bottom: -180px;

    background-image: url("clouds.png");
    background-repeat: no-repeat;
    background-size: 100% 120%;

    /* ✅ THIS is the important change */
    background-position: bottom center;

    overflow: hidden;
    z-index: 4;
  }

  /* pull clouds-2 up behind the transparent curve so it fills it */
  .why-4ward{
    margin-top: -420px;
    padding-top: 160px;

    /* don’t shrink it or you create empty space */
    background-size: 100% 100%;
    background-position: center top;
  }
  .why-4ward .why-inner{
  padding-top: 220px;  /* 👈 pushes text below cloud curve */
}

.sea-bg{
    top: -200px;      /* 👈 adjust if needed */
  }
  .how-it-works{
    transform: none !important;   /* kill desktop lift */
    margin-top: 280px;
    padding-top: 520px;           /* 🔥 THIS is the real slider */
    padding-bottom: 160px;
  }

}
/* ==================================================
   IPHONE EXTRA TIGHT PASS
================================================== */

@media (max-width: 430px) {

  .client-hero-curved {
    min-height: 65vh;
  }

  .hero-text h1 {
    font-size: 20px;
  }

  .hero-text p {
    font-size: 12px;
  }

  .primary-btn {
    font-size: 12.5px;
    padding: 9px 12px;
  }

  .bottom-hero {
    min-height: 140vh;
  }
  .bottom-hero .hero-bg{
    background-position: center top;
  }
}

/* ==================================================
   IPHONE — FINAL COMPRESSION PASS (<= 430px)
================================================== */

@media (max-width: 430px) {

  /* ===============================
     GLOBAL SCALE
  =============================== */

  body {
    font-size: 12px;
    line-height: 1.35;
  }

  h1 { font-size: 20px; }
  h2 { font-size: 17px; }
  h3 { font-size: 13px; }
  p  { font-size: 12px; }

  /* ===============================
     WHY 4WARD
  =============================== */

  .why-4ward {
    padding: 24px 12px 40px;
  }

  .why-4ward h2 {
    margin-bottom: 16px;
  }

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

  .why-card {
    padding: 10px;
    border-radius: 14px;
  }

  .why-card img {
    max-width: 64px;
    margin-bottom: 6px;
  }

  .why-card h3 {
    font-size: 12.5px;
    margin-bottom: 4px;
  }

  .why-card p {
    font-size: 11.5px;
    line-height: 1.3;
  }


  /* ===============================
     HOW IT WORKS
  =============================== */

  .how-it-works {
    padding: 28px 12px 40px;
  }

  .how-it-works h2 {
    margin-bottom: 16px;
  }

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

  .how-card {
    padding: 10px;
    border-radius: 14px;
  }

  .how-card img {
    height: 64px;
    margin-bottom: 6px;
    border-radius: 10px;
  }

  .step-badge {
    width: 20px;
    height: 20px;
    font-size: 11px;
    top: -10px;
    left: -10px;
  }

  .how-card h3 {
    font-size: 12.5px;
    margin-bottom: 4px;
  }

  .how-card p {
    font-size: 11.5px;
    line-height: 1.3;
  }

  /* ===============================
     KILL EXTRA SPACING SOURCES
  =============================== */

  .why-inner,
  .container-content {
    margin: 0;
    padding: 0;
    z-index:6;
  }

/*
 * Mobile enhancements for client pages
 *
 * On smaller screens the desktop navigation and multi‑column sections can
 * overflow the viewport and become difficult to read.  This block adds
 * sensible defaults for screens narrower than 768px.  Navigation links
 * wrap into two columns and receive their own backgrounds, while the
 * "Why book with 4Ward?" and "How it Works" grids stack their cards
 * vertically for improved legibility.  Padding is reduced slightly on
 * cards so they remain comfortable on compact displays.  A media query
 * at the end of the stylesheet ensures these rules override any
 * previous declarations when necessary.
 */

@media (max-width: 768px) {
  /* Stack nav links into two columns and give each link a tap target */
  .top-nav .nav-links {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
  }
  .top-nav .nav-links a {
    flex: 1 1 calc(50% - 8px);
    margin: 4px 0;
    padding: 8px 6px;
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    font-size: 13px;
  }
  /* Hide the unused menu toggle on mobile since the links wrap */
  .nav-left .nav-toggle {
    display: none;
  }

  /* Collapse multi‑column grids into a single column on home page */
  .client-browse .why-grid,
  .client-browse .how-grid {
    grid-template-columns: 1fr;
  }
  .client-browse .why-card,
  .client-browse .how-card {
    padding: 16px;
    margin: 0 auto;
  }
  /* Tighten images and badges on home grid cards */
  .client-browse .how-card img {
    height: 120px;
  }
  .client-browse .step-badge {
    width: 28px;
    height: 28px;
    font-size: 12px;
    top: -12px;
    left: -12px;
  }
}

  .cloud-section,
  .sea-section {
    padding-bottom: 24px;
  }

  /* ===============================
     PREVENT BOTTOM SCROLL FEEL
  =============================== */

  .how-card,
  .why-card {
    min-height: unset;
  }
}

@media (max-width: 430px){

  /* Sea / ship image */
  .sea-bg{
    background-size: cover !important;
    background-position: center bottom;
  }

  /* Bottom hero (atShore.png) */
  .bottom-hero .hero-bg{
    background-size: cover !important;
    background-position: center top;
  }

  /* Cloud layers */
  .cloud-section{
    background-size: cover !important;
    background-position: center -200px;
  }

  .why-4ward{
    background-size: cover !important;
    background-position: center top;
  }

}

/* =================================================
   HERO BACKGROUND ANIMATION
   ------------------------------------------------
   Adds a gentle vertical movement to hero background images to
   create a parallax‑like effect. The animation shifts the
   background position up and down over time, making the page
   feel more dynamic without distracting from the content.
================================================= */

/* Apply the animation to each of the client hero variants */
.how-hero .hero-bg,
.orders-hero .hero-bg,
.support-hero .hero-bg,
.about-hero .hero-bg,
.pricing-hero .hero-bg,
.savings-hero .hero-bg {
  animation: heroMove 28s linear infinite;
}

/* ===========================================================================
   HOW IT WORKS PAGE ENHANCEMENTS
   --------------------------------------------------------------------------
   These rules improve readability and consistency on smaller screens for the
   dedicated "How it works" page. The grid collapses into a single column,
   cards gain additional spacing, and a call‑to‑action panel adopts the same
   styling found on the home page.
========================================================================== */

/* Stack the process cards vertically on screens narrower than 700px.  A
   single column ensures each step has room to breathe, preventing the
   cramped appearance seen when five cards squeeze into a narrow row. */
@media (max-width: 700px) {
  .how-it-works-page .how-grid {
    grid-template-columns: 1fr;
    max-width: 540px;
    margin: 0 auto;
    gap: 16px;
  }

  /* Increase spacing within cards for small screens and allow text to wrap
     gracefully. */
  .how-it-works-page .how-card {
    padding: 18px 16px 22px;
  }

  .how-it-works-page .how-card img {
    height: 120px;
    margin-bottom: 14px;
  }

  .how-it-works-page .step-badge {
    width: 28px;
    height: 28px;
    font-size: 12px;
    top: -12px;
    left: -12px;
  }

  .how-it-works-page .how-card h3 {
    font-size: 16px;
    margin-bottom: 6px;
  }

  .how-it-works-page .how-card p {
    font-size: 13px;
    line-height: 1.4;
  }

  /* Increase button size for the call‑to‑action on mobile */
  .how-it-works-page .how-cta .primary-btn {
    font-size: 14px;
    padding: 12px 20px;
  }
}

/* Style the call‑to‑action panel on the how page to match the home page’s
   polished cards. A subtle shadow, rounded corners, and pale background tie
   it into the rest of the client experience. */
.how-it-works-page .how-cta {
  background: rgba(255, 255, 255, 0.9);
  padding: 32px 24px;
  margin-top: 40px;
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.how-it-works-page .how-cta h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 24px;
  color: #0b2545;
}
.how-it-works-page .how-cta p {
  font-size: 15px;
  color: #475569;
  margin-bottom: 20px;
}


/* When the viewport is very narrow (<=430px), further reduce the CTA’s font
   sizes and padding to prevent overflow. */
@media (max-width: 430px) {
  .how-it-works-page .how-cta {
    padding: 20px 16px;
  }
  .how-it-works-page .how-cta h3 {
    font-size: 20px;
  }
  .how-it-works-page .how-cta p {
    font-size: 13.5px;
  }
}

/* ===========================================================================
   ORDERS PAGE MOBILE IMPROVEMENTS
   --------------------------------------------------------------------------
   These rules optimise the orders page for small devices. The hero overlay
   becomes centred and wider, the summary counters stack vertically, and
   timeline elements allow horizontal scrolling to preserve space.
========================================================================== */

/* =================================================
   MOBILE FIX ONLY (does NOT affect desktop)
================================================= */


/* On very small screens (<=430px), allow timeline to scroll horizontally to
   avoid text wrapping or shrinking beyond readability. */
@media (max-width: 430px) {
  .order-timeline ul {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: 4px;
    scrollbar-width: none; /* Hide scrollbar in Firefox */
  }
  .order-timeline ul::-webkit-scrollbar {
    display: none; /* Hide scrollbar in WebKit browsers */
  }
  .order-timeline li {
    flex: 0 0 auto;
    min-width: 80px;
    font-size: 10px;
  }
}

/* ===========================================================================
   COURIER DASHBOARD VISUAL ENHANCEMENTS
   --------------------------------------------------------------------------
   Bring courier pages closer to the polished look of the client interface.
   Guide blocks now resemble cards with rounded corners and shadows.  On
   mobile, the images and text stack vertically for readability.
========================================================================== */

.dashboard-guide {
  padding: 40px 20px;
}

.guide-block {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  padding: 24px;
}
.guide-block .guide-image {
  max-width: 40%;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.guide-block .guide-content h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 22px;
  color: #0b2545;
}
.guide-block .guide-content p {
  margin: 0 0 10px;
  font-size: 15px;
  color: #475569;
  line-height: 1.5;
}

/* Stack guide blocks vertically on narrow screens and enlarge image width. */
@media (max-width: 768px) {
  .guide-block {
    flex-direction: column;
    text-align: center;
  }
  .guide-block .guide-image {
    max-width: 100%;
    margin-bottom: 16px;
  }
}

/* =========================================
   ORDERS HERO — CLEAN MOBILE STACK
   (DOES NOT TOUCH DESKTOP)
========================================= */

/* ================================
   ORDERS SUMMARY DISPLAY SWITCH
   Desktop = floating bar
   Mobile = inside hero card under title
================================= */

/* ================================
   ORDERS SUMMARY DISPLAY SWITCH
   Desktop = floating bar
   Mobile  = inside hero-card under title
================================= */

.desktop-only { display: flex; }
.mobile-only  { display: none; }

/* Desktop floating bar (your old look) */
.orders-hero .orders-summary.desktop-only{
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  gap: 24px;
  z-index: 8;
}

/* Keep the title readable above everything */
.orders-hero .hero-card{
  display: flex;
  flex-direction: column;
}
.orders-hero .hero-text{
  position: relative;
  z-index: 2;
}

/* Mobile only: show the in-card 3 boxes UNDER the title */
@media (max-width: 600px){
  .desktop-only{ display: none !important; }
  .mobile-only { display: grid !important; }

  .orders-hero .orders-summary.mobile-only{
    position: relative !important;
    margin-top: 18px;
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    z-index: 1;
  }

  .orders-hero .summary-item{
    padding: 12px 8px;
    border-radius: 14px;
  }

  .orders-hero .summary-count{ font-size: 18px; }
  .orders-hero .summary-label{ font-size: 11px; }
}


/* Make the summary sit UNDER the title (not over it) */
.orders-hero .hero-card {
  display: flex;
  flex-direction: column;
}

.orders-hero .hero-text {
  position: relative;
  z-index: 3;
}

/* the mobile summary inside the card */
.orders-hero .orders-summary.mobile-only {
  position: relative;
  z-index: 2;

  width: 100%;
  margin-top: 18px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;

  /* this guarantees it can’t overlap */
  clear: both;
}

.orders-hero .orders-summary.mobile-only {
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
}

/* Hide the in-card summary on desktop */
.orders-hero .orders-summary.mobile-only {
  display: none !important;
}

/* Show it only on iPhone/small screens */
@media (max-width: 600px) {
  .orders-hero .orders-summary.mobile-only {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    margin-top: 18px;
  }
}




/* ==========================================================================
   ORDERS OVERVIEW SECTION STYLING
   --------------------------------------------------------------------------
   Provide a light backdrop and consistent spacing for the orders listing on
   the client orders page.  Avoid the large negative margins of the
   home page’s cloud-section while still evoking the airy feel through a
   subtle gradient.
========================================================================== */

.orders-section {
  background: linear-gradient(180deg, #f5f9ff 0%, #eef5fc 100%);
  width: 100%;
  padding: 80px 0;
}
.orders-section .container-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* =================================================
   ORDERS EMPTY STATE — make it breathe + wider image
================================================= */

/* Make the whole section feel less “tiny in the middle” */
.orders-section .container-content{
  max-width: 980px;
  margin: 0 auto;
  padding: 26px 18px;
}

/* Headline + intro text: slightly smaller + cleaner */
.orders-section .container-content h2{
  font-size: 22px;
  margin: 0 0 10px;
}
.orders-section .container-content p{
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 18px;
}

/* Empty state block (overrides your inline styles) */
.orders-empty{
  padding: 28px 18px !important;
  max-width: 980px;
  margin: 0 auto;
}

/* Make the “You haven’t shipped yet.” not massive */
.orders-empty h2{
  font-size: 22px !important;
  line-height: 1.2 !important;
  margin: 10px 0 10px !important;
}

/* Make the paragraph less squeezed */
.orders-empty p{
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  margin: 0 auto 18px !important;
  max-width: 520px;
}

/* Fix CTA button clipping + make it look premium */
.orders-empty .cta-btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 18px;
  border-radius: 12px;
  min-width: 220px;
  max-width: 90vw;
  box-shadow: 0 10px 24px rgba(30,79,216,0.25);
}

/* ---------- Mobile ---------- */
@media (max-width: 600px){
  .orders-section .container-content{
    padding: 22px 14px;
  }

  .orders-section .container-content h2{
    font-size: 18px;
  }

  .orders-section .container-content p{
    font-size: 13.5px;
  }

  .orders-empty{
    padding: 20px 14px !important;
  }

  .orders-empty img{
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px;
  }

  .orders-empty h2{
    font-size: 20px !important;
  }

  .orders-empty p{
    font-size: 13.5px !important;
  }
}

/* =================================================
   ORDERS EMPTY STATE — MAKE IT HUGE (DESKTOP DEFAULT)
================================================= */

.orders-empty .empty-wrap{
  max-width: 1400px;
}

.orders-empty .empty-card{
  padding: 28px;
  border-radius: 26px;
}

.orders-empty .empty-card img{
  height: 420px;          /* BIG images */
  border-radius: 20px;
}

.orders-empty .empty-head h2{
  font-size: 38px;
  margin-bottom: 12px;
}

.orders-empty .empty-head p{
  font-size: 18px;
  max-width: 860px;
  margin-bottom: 40px;
}

.orders-empty .empty-card figcaption{
  font-size: 16px;
  line-height: 1.65;
}

.orders-empty .empty-card figcaption strong{
  font-size: 18px;
  margin-bottom: 8px;
}

.orders-empty .empty-cta{
  min-width: 300px;
  padding: 16px 26px;
  border-radius: 16px;
  font-size: 15px;
}

/* =================================================
   EMPTY STATE GRID — CLEAN FINAL (NO CONFLICTS)
================================================= */

.orders-empty{
  padding: 40px 18px !important;
  max-width: none;
}

.orders-empty .empty-wrap{
  max-width: 1500px;
  margin: 0 auto;
  text-align: center;
}

.orders-empty .empty-grid{
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 28px;
  margin-bottom: 40px;
}

.orders-empty .empty-card{
  background: rgba(255,255,255,0.92);
  border-radius: 26px;
  padding: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.08);
}

.orders-empty .empty-card img{
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  margin: 0;
}

.orders-empty .empty-card.main img{
  height: 420px; /* bigger centre image */
}

.orders-empty .empty-card figcaption{
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.65;
  color: #475569;
  text-align: center;
}

.orders-empty .empty-card figcaption strong{
  display: block;
  font-size: 18px;
  color: #0b1f3a;
  margin-bottom: 8px;
}

/* Mobile stays clean */
@media (max-width: 600px){
  .orders-empty .empty-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .orders-empty .empty-card img{
    height: 220px;
  }

  .orders-empty .empty-card.main img{
    height: 260px;
  }
}

/* =================================================
   EMPTY STATE CARDS — RESPONSIVE (BIG DESKTOP + WIDE MOBILE)
   Paste at VERY BOTTOM of styles.css
================================================= */

.orders-empty{
  padding: 60px 24px !important;
}

.orders-empty .empty-wrap{
  max-width: 1500px;
  margin: 0 auto;
}

/* 3 cols desktop, but stop the “thin phone card” look */
.orders-empty .empty-grid{
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: clamp(18px, 2.4vw, 42px);
  align-items: stretch;
  margin-top: 34px;
  margin-bottom: 48px;
}

/* Make cards wider + less tall */
.orders-empty .empty-card{
  max-width: none;
  padding: clamp(18px, 1.6vw, 28px);
  border-radius: 28px;
  text-align: center;
}

/* BIGGER images on desktop, scale down with viewport */
.orders-empty .empty-card img{
  width: 100%;
  height: clamp(260px, 28vw, 520px);   /* scales with screen */
  object-fit: cover;
  border-radius: 22px;
}

/* Center card gets a bit more height (premium look) */
.orders-empty .empty-card.main img{
  height: clamp(320px, 34vw, 620px);
}

/* Text: less cramped */
.orders-empty .empty-card figcaption{
  max-width: 520px;
  margin: 16px auto 0;
  font-size: 15.5px;
  line-height: 1.65;
}
.orders-empty .empty-card figcaption strong{
  font-size: 19px;
}

/* =========================
   RESPONSIVE BREAKPOINTS
========================= */

/* When window gets smaller, go 2 columns instead of staying thin */
@media (max-width: 1100px){
  .orders-empty .empty-grid{
    grid-template-columns: 1fr 1fr;
  }
  .orders-empty .empty-card.main{
    grid-column: 1 / -1; /* center card spans full width */
  }
}

/* Mobile: full width cards, NOT skinny */
@media (max-width: 600px){
  .orders-empty{
    padding: 34px 14px !important;
  }

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

  .orders-empty .empty-card{
    width: 100%;
    border-radius: 22px;
    padding: 18px;
  }

  .orders-empty .empty-card img{
    height: 240px;
    border-radius: 18px;
  }

  .orders-empty .empty-card.main img{
    height: 280px;
  }

  .orders-empty .empty-card figcaption{
    font-size: 14px;
  }
  .orders-empty .empty-card figcaption strong{
    font-size: 17px;
  }
}

/* =================================================
   EMPTY STATE — BIG SQUARE CARDS (DESKTOP) + FIT WHOLE IMAGE
================================================= */

.orders-empty .empty-wrap{
  max-width: 1650px;
  margin: 0 auto;
}

.orders-empty .empty-grid{
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr; /* still 3 columns */
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}

/* Make the cards larger and more square */
.orders-empty .empty-card{
  padding: 30px;
  border-radius: 28px;
  min-height: 520px;        /* forces bigger “tile” */
  text-align: center;
}

/* BIG square-ish image area, but show ENTIRE image */
.orders-empty .empty-card img{
  width: 100%;
  height: 360px;            /* makes it feel square, not tall-thin */
  object-fit: contain;      /* ✅ shows whole image */
  background: rgba(255,255,255,0.65); /* nice fill behind transparent areas */
  border-radius: 22px;
  display: block;
  padding: 14px;            /* gives the contain image breathing room */
}

/* Center card slightly larger */
.orders-empty .empty-card.main{
  min-height: 580px;
}
.orders-empty .empty-card.main img{
  height: 430px;
}

/* Text spacing */
.orders-empty .empty-card figcaption{
  margin-top: 18px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  line-height: 1.65;
}
.orders-empty .empty-card figcaption strong{
  font-size: 20px;
}

/* =========================================================
   ORDERS EMPTY STATE — FINAL OVERRIDE (WIDE DESKTOP + CLEAN MOBILE)
   Put this at VERY BOTTOM of styles.css
========================================================= */

/* 1) Break out of the parent max-width constraint */
#ordersList .orders-empty{
  width: 100vw;
  margin-left: calc(50% - 50vw); /* full-bleed */
  padding: 70px 40px !important;
}

/* Keep the internal content nicely bounded */
#ordersList .orders-empty .empty-wrap{
  max-width: 1650px;
  margin: 0 auto;
  text-align: center;
}

/* 2) DESKTOP GRID: big, wide, squarer cards */
#ordersList .orders-empty .empty-grid{
  display: grid !important;
  grid-template-columns: 1fr 1.35fr 1fr; /* centre bigger */
  gap: 60px;
  align-items: stretch;
  justify-items: stretch;
  margin: 44px auto 54px;
}

/* Big tiles (not phone-thin) */
#ordersList .orders-empty .empty-card{
  width: 100%;
  padding: 34px;
  border-radius: 30px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 26px 90px rgba(0,0,0,0.10);
  min-height: 560px; /* forces squarer feel */
}

/* Image areas: show FULL image for illustrations, no cropping */
#ordersList .orders-empty .empty-card img{
  width: 100%;
  height: 360px;

  display: block;
  margin: 0 auto;

  object-fit: contain;        /* show whole PNG */
  object-position: center;    /* ✅ center it inside the box */

  border-radius: 22px;
  background: rgba(245,249,255,0.85);
  padding: 16px;
}


/* Make the middle (cargo photo) look premium: fill the frame */
#ordersList .orders-empty .empty-card.main img{
  height: 440px;
  object-fit: cover;      /* photo should fill */
  padding: 0;
  background: transparent;
}

/* Caption typography */
#ordersList .orders-empty .empty-card figcaption{
  margin-top: 18px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  line-height: 1.7;
  color: #475569;
}
#ordersList .orders-empty .empty-card figcaption strong{
  display: block;
  font-size: 21px;
  color: #0b1f3a;
  margin-bottom: 10px;
}

/* CTA */
#ordersList .orders-empty .empty-cta{
  min-width: 340px;
  padding: 16px 30px;
  border-radius: 16px;
  font-size: 15px;
}


/* 3) RESPONSIVE: stop going skinny as window shrinks */
@media (max-width: 1250px){
  #ordersList .orders-empty .empty-grid{
    grid-template-columns: 1fr 1fr; /* 2 cols */
    gap: 26px;
  }
  #ordersList .orders-empty .empty-card.main{
    grid-column: 1 / -1; /* centre card spans full width */
    min-height: auto;
  }
}

/* Mobile: full width cards, perfectly centered */
@media (max-width: 600px){
  #ordersList .orders-empty{
    padding: 34px 16px !important;
  }

  #ordersList .orders-empty .empty-grid{
    grid-template-columns: 1fr !important;
    gap: 16px;
    margin: 22px auto 26px;
  }

  #ordersList .orders-empty .empty-card{
    padding: 18px;
    min-height: auto;
  }

  #ordersList .orders-empty .empty-card img{
    height: 240px;
    padding: 12px;
      object-position: center;

  }

  #ordersList .orders-empty .empty-card.main img{
    height: 280px;
    padding: 0;
  }

  #ordersList .orders-empty .empty-card figcaption{
    font-size: 14px;
  }
  #ordersList .orders-empty .empty-card figcaption strong{
    font-size: 18px;
  }

  #ordersList .orders-empty .empty-cta{
    width: 100%;
    max-width: 420px;
  }
}

/* Savings page: stop sea-section from floating/overlapping */
.no-sea-bg{
  margin-top: 0 !important;
  padding-top: 70px !important;   /* gives breathing room */
  padding-bottom: 70px !important;
  position: relative;
  z-index: 1;
}

/* If your sea-section used a transform to lift, kill it here */
.no-sea-bg{
  transform: none !important;
}

/* Also make sure it doesn't overlap the section above */
.immersive-section{
  position: relative;
  z-index: 2;
}

/* Savings page: make "How to Use 4Ward" section feel full-width, not centered-narrow */
.savings-hero ~ .page-content .how-it-works{
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  text-align: left;
}

/* Keep the title centered if you want, but the cards should look wider */
.savings-hero ~ .page-content .how-it-works h2{
  text-align: center;
}

/* Make the grid fill the available width + look less “stuck in middle” */
.savings-hero ~ .page-content .how-it-works .how-grid{
  max-width: 1200px;
  margin: 24px auto 0;
  justify-content: stretch;
}

/* ===============================
   FORWARDER TERMS PAGE
=============================== */

.terms-page {
  background: #f9fafc;
  padding: 60px 20px;
}

.terms-container {
  max-width: 900px;
  margin: auto;
  background: white;
  padding: 50px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

.terms-container h1 {
  margin-bottom: 20px;
}

.terms-container h2 {
  margin-top: 30px;
  font-size: 20px;
}

.terms-container p,
.terms-container li {
  line-height: 1.6;
  color: #444;
}

.restrictions-box{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:12px 14px;
  line-height:1.5;
  color:#333;
}

.dims-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
@media(max-width:700px){ .dims-grid{grid-template-columns:1fr;} }

/* =========================================
   MOBILE TOP NAV — SHARED CLIENT + COURIER
========================================= */

/* Keep nav-left aligned nicely when hamburger exists */
.nav-left{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Hide hamburger on desktop */
.nav-toggle{
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}

@media (max-width: 768px) {
  .auth-body {
    background-attachment: scroll;
    padding: 16px;
  }

  .auth-box {
    width: 100%;
    max-width: 380px;
  }
}
/* Mobile nav */
@media (max-width: 768px){
  .top-nav{
    justify-content: space-between;
    padding: 0 16px;
    height: 64px;
  }

  .nav-left{
    position: static;
    left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1002;
  }

  .nav-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-links{
    display: none;
    position: absolute;
    top: 64px;
    right: 12px;
    width: min(260px, calc(100vw - 24px));
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: #0b1f3a;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.28);
    z-index: 1001;
  }

  .top-nav.menu-open .nav-links{
    display: flex;
  }

  .nav-links a{
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
  }

  .nav-links a:hover{
    background: rgba(255,255,255,0.08);
  }
}

.info-panel {
  display: none;
}

.info-panel.active {
  display: block;
}

.promise-content {
  display: none;
}

.promise-item.active .promise-content {
  display: block;
}

@media (max-width: 600px) {
  .client-browse .how-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
    align-items: stretch;
  }

  .client-browse .how-card {
    padding: 12px;
    border-radius: 14px;
    margin: 0;
  }

  .client-browse .how-card img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 8px;
  }

  .client-browse .how-card h3 {
    font-size: 13px;
    line-height: 1.25;
    margin-bottom: 6px;
  }

  .client-browse .how-card p {
    font-size: 11.5px;
    line-height: 1.35;
    margin: 0;
  }

  .client-browse .step-badge {
    width: 24px;
    height: 24px;
    font-size: 11px;
    top: -10px;
    left: -10px;
  }

  .client-browse .how-it-works {
    padding-left: 12px;
    padding-right: 12px;
  }

  .client-browse .how-it-works h2 {
    font-size: 17px;
    line-height: 1.2;
    margin-bottom: 18px;
    padding-top: 0;
  }
}

/* =================================================
   COURIER ORDERS MOBILE TEXT FIX
   Fixes white text on light order cards
================================================= */

@media (max-width: 600px) {
  body.courier-page .orders-section .container-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  body.courier-page .orders-section h3,
  body.courier-page .orders-section .container-content > p {
    color: #ffffff !important;
  }

  body.courier-page .order-card {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(11, 31, 58, 0.08) !important;
    color: #0b1f3a !important;
  }

  body.courier-page .order-card,
  body.courier-page .order-card *:not(button):not(select):not(option):not(a) {
    color: #0b1f3a !important;
  }

  body.courier-page .order-header {
    background: #eef3ff !important;
    color: #0b1f3a !important;
    border-radius: 14px !important;
    padding: 12px !important;
    margin: 0 0 12px !important;
    display: block !important;
  }

  body.courier-page .order-details p,
  body.courier-page .order-details strong,
  body.courier-page .order-details small {
    color: #243b5a !important;
  }

  body.courier-page .order-card a {
    color: #1e4fd8 !important;
    font-weight: 700 !important;
  }

  body.courier-page .order-status {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    margin-top: 16px !important;
  }

  body.courier-page .order-status label {
    color: #0b1f3a !important;
    width: 100% !important;
  }

  body.courier-page .order-status select {
    flex: 1 1 160px !important;
    background: #ffffff !important;
    color: #0b1f3a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    height: 46px !important;
  }

  body.courier-page .order-status .cta-btn {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    height: 46px !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    background: #1e4fd8 !important;
  }
}

/* =================================================
   FINAL COURIER MOBILE CLEANUP
   Profit text black, home hero stacked, contact text white
================================================= */

@media (max-width: 600px) {

  /* ===============================
     1. PROFIT.HTML — MAKE EXPLAINER TEXT BLACK
  =============================== */

  .earnings-page .earnings-left,
  .earnings-page .earnings-right {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(11, 31, 58, 0.08) !important;
  }

  .earnings-page .earnings-left .content h3,
  .earnings-page .earnings-right .content h3 {
    color: #0b1f3a !important;
    text-shadow: none !important;
  }

  .earnings-page .earnings-left .content p,
  .earnings-page .earnings-right .content p,
  .earnings-page .earnings-left .content strong,
  .earnings-page .earnings-right .content strong {
    color: #243b5a !important;
    text-shadow: none !important;
  }


  /* ===============================
     2. COURIER HOME — HEADING TOP, PARAGRAPHS UNDER
  =============================== */

  .home-parallax + .dashboard-wrapper .hero.small {
    height: auto !important;
    min-height: auto !important;
    display: block !important;
    text-align: left !important;
    padding: 26px 20px !important;
    background:
      radial-gradient(circle at top right, rgba(30, 79, 216, 0.28), transparent 42%),
      linear-gradient(180deg, #081a31 0%, #061426 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 22px !important;
  }

  .home-parallax + .dashboard-wrapper .hero.small h2 {
    display: block !important;
    width: 100% !important;
    color: #ffffff !important;
    font-size: 28px !important;
    line-height: 1.12 !important;
    margin: 0 0 14px !important;
    text-align: left !important;
  }

  .home-parallax + .dashboard-wrapper .hero.small p {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin: 0 0 10px !important;
    text-align: left !important;
  }


  /* ===============================
     3. CONTACT.HTML — MAKE CARD WRITING WHITE
  =============================== */

  body:has(a[href="contact.html"]) .dashboard-panel,
  body:has(a[href="contact.html"]) .dashboard-panel .container {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    color: #ffffff !important;
  }

  body:has(a[href="contact.html"]) .dashboard-panel .card-header,
  body:has(a[href="contact.html"]) .dashboard-panel p,
  body:has(a[href="contact.html"]) .dashboard-panel strong,
  body:has(a[href="contact.html"]) .dashboard-panel li {
    color: #ffffff !important;
  }

  body:has(a[href="contact.html"]) .dashboard-panel ul {
    color: rgba(255, 255, 255, 0.82) !important;
  }

  body:has(a[href="contact.html"]) .dashboard-panel a {
    color: #7fb0ff !important;
    font-weight: 700 !important;
  }

  body:has(a[href="contact.html"]) .dashboard-panel hr {
    border-color: rgba(255, 255, 255, 0.25) !important;
  }
}