*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; }
    body {
      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      color: #0A2540; background: #FDFBF7; overflow-x: hidden; line-height: 1.6;
    }
    img { max-width: 100%; display: block; }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    button { cursor: pointer; border: none; font-family: inherit; }

    :root {
      --navy: #0A2540;
      --navy-mid: #15365A;
      --navy-deep: #061629;
      --gold: #C5A572;
      --gold-light: #DAC39C;
      --gold-dark: #BA7517;
      --white: #FFFFFF;
      --cream: #FDFBF7;
      --cream-2: #F5EEE0;
      --light-gray: #F5EEE0;
      --dark-text: #0A2540;
      --text-muted: #6B7685;
      --body-text: #3A4A5F;
      --success: #2F7A4F;
      --success-bg: #E6F0E9;
      --danger: #9B2C2C;
      --danger-bg: #F6E3E3;
      --font-headline: 'Playfair Display', Georgia, serif;
      --font-body: 'DM Sans', sans-serif;
      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      --shadow-sm: 0 1px 3px rgba(10,37,64,0.06);
      --shadow-md: 0 4px 12px rgba(10,37,64,0.08);
      --shadow-lg: 0 12px 40px rgba(10,37,64,0.12);
      --radius: 12px;
      --radius-sm: 8px;
      --container: 1200px;
    }

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

    /* ======================================
       NAV — dark navy bg at rest, matches other public static pages
       ====================================== */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      background: rgba(10, 37, 64, 0.97);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(197, 165, 114, 0.15);
      transition: var(--transition);
      color: var(--cream);
    }
    .nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.3); }
    .nav-inner {
      max-width: var(--container); margin: 0 auto; padding: 0 24px;
      display: flex; align-items: center; justify-content: space-between; height: 72px;
    }
    .nav-links { display: flex; align-items: center; gap: 28px; }
    .nav-links a {
      color: rgba(251, 247, 240, 0.90); font-size: 0.9rem; font-weight: 500;
      letter-spacing: 0.3px; transition: color 0.2s ease;
    }
    .nav-links a:hover, .nav-links a.active { color: var(--gold-light); }

    .hamburger {
      display: none; flex-direction: column; gap: 5px;
      background: none; padding: 4px;
    }
    .hamburger span {
      width: 24px; height: 2px; background: var(--white);
      transition: var(--transition); border-radius: 2px;
    }

    /* Mobile chrome elements injected by chrome-injector — hidden at
       desktop widths, shown when hamburger fires .open. Matches the
       pattern in contact.css / shippers.css / index.css. */
    .mobile-menu, .mobile-overlay {
      display: none;
    }

    /* ======================================
       HERO — cream canvas with search card
       ====================================== */
    .hero {
      background: var(--cream);
      padding: 160px 0 80px; text-align: center; position: relative; overflow: hidden;
    }
    .hero::before {
      content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(186,117,23,0.05) 0%, transparent 70%);
      border-radius: 50%; pointer-events: none;
    }
    .hero-badge {
      display: inline-block;
      padding: 5px 14px;
      border-radius: 20px;
      background: rgba(197, 165, 114, 0.15);
      color: var(--gold-dark);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 18px;
      position: relative;
    }
    .hero h1 {
      font-family: var(--font-headline);
      font-weight: 400;
      font-size: clamp(2.2rem, 5vw, 3.5rem);
      color: var(--navy);
      margin-bottom: 16px;
      line-height: 1.2;
      letter-spacing: -0.5px;
      position: relative;
    }
    .hero h1 .gold-line { color: var(--gold-dark); }
    .hero-sub {
      color: var(--body-text);
      font-size: 1.15rem;
      max-width: 600px;
      margin: 0 auto 40px;
      position: relative;
    }

    /* Search card */
    .search-card {
      max-width: 640px;
      margin: 0 auto;
      background: var(--white);
      border: 1px solid rgba(10, 37, 64, 0.10);
      border-radius: 16px;
      box-shadow: var(--shadow-md);
      padding: 28px;
      position: relative;
    }
    .search-tabs {
      display: flex;
      gap: 4px;
      justify-content: center;
      margin-bottom: 20px;
    }
    .search-tab {
      padding: 8px 16px;
      font-size: 14px;
      color: var(--text-muted);
      background: transparent;
      border-bottom: 2px solid transparent;
      transition: var(--transition);
    }
    .search-tab.active {
      color: var(--navy);
      font-weight: 600;
      border-bottom-color: var(--gold-dark);
    }
    .search-tab:hover { color: var(--navy); }
    .search-row {
      display: flex;
      gap: 8px;
    }
    .search-input-wrap {
      position: relative;
      flex: 1;
    }
    .search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      color: var(--text-muted);
      pointer-events: none;
    }
    .search-input {
      width: 100%;
      padding: 12px 14px 12px 40px;
      background: var(--cream);
      border: 1px solid rgba(10, 37, 64, 0.15);
      border-radius: 8px;
      color: var(--navy);
      font-size: 14px;
      font-family: inherit;
      transition: var(--transition);
    }
    .search-input::placeholder { color: var(--text-muted); }
    .search-input:focus {
      outline: none;
      border-color: var(--gold-dark);
      box-shadow: 0 0 0 3px rgba(186, 117, 23, 0.15);
    }
    .search-btn {
      padding: 12px 24px;
      background: var(--gold-dark);
      color: var(--cream);
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      transition: var(--transition);
    }
    .search-btn:hover:not(:disabled) {
      background: #854F0B;
      transform: translateY(-1px);
    }
    .search-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* Loading state */
    .loading-msg {
      margin-top: 24px;
      color: var(--body-text);
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .loading-spinner {
      width: 16px;
      height: 16px;
      border: 2px solid rgba(10, 37, 64, 0.15);
      border-top-color: var(--gold-dark);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Error state */
    .error-card {
      max-width: 640px;
      margin: 24px auto 0;
      background: var(--white);
      border: 1px solid rgba(155, 44, 44, 0.30);
      border-radius: 12px;
      padding: 16px 20px;
      text-align: left;
    }
    .error-msg { color: var(--danger); font-size: 14px; }
    .error-link { display: block; margin-top: 8px; color: var(--gold-dark); font-size: 13px; }
    .error-link:hover { text-decoration: underline; }

    /* ======================================
       EXPLAINER — illustration + how-it-works steps
       Shown when no result is loaded; hidden via .hidden once a fetch fires.
       Same cream canvas as the hero so the page reads as one continuous
       surface; illustration anchors visual interest, copy provides operational
       specifics ("BOL number from your shipping document", "last known
       location ping").
       ====================================== */
    .explainer-section {
      background: var(--cream);
      padding: 40px 0 80px;
    }
    .explainer-container {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 56px;
      align-items: center;
    }
    .explainer-illustration {
      position: relative;
    }
    .explainer-illustration img,
    .explainer-illustration svg {
      width: 100%;
      height: auto;
      max-width: 560px;
      display: block;
    }
    .explainer-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--gold-dark);
      font-weight: 700;
      margin-bottom: 12px;
    }
    .explainer-text h2 {
      font-family: var(--font-headline);
      font-weight: 400;
      font-size: clamp(1.7rem, 3.2vw, 2.2rem);
      color: var(--navy);
      line-height: 1.25;
      margin-bottom: 24px;
      letter-spacing: -0.3px;
    }
    .explainer-steps {
      list-style: none;
      padding: 0;
      margin: 0 0 24px 0;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .explainer-steps li {
      display: grid;
      grid-template-columns: 32px 1fr;
      gap: 14px;
      align-items: start;
    }
    .step-num {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--gold-dark);
      color: var(--cream);
      font-family: var(--font-headline);
      font-weight: 600;
      font-size: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    .explainer-steps li > div {
      font-size: 14px;
      color: var(--body-text);
      line-height: 1.7;
    }
    .explainer-steps strong {
      color: var(--navy);
      font-weight: 600;
      display: block;
      margin-bottom: 2px;
    }
    .explainer-fineprint {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.7;
      padding-top: 16px;
      border-top: 1px solid rgba(10, 37, 64, 0.08);
    }
    .explainer-intro {
      font-size: 14px;
      color: var(--body-text);
      line-height: 1.75;
      margin-bottom: 20px;
    }
    .explainer-sources {
      list-style: none;
      padding: 0;
      margin: 0 0 24px 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .explainer-sources li {
      font-size: 13px;
      color: var(--body-text);
      line-height: 1.6;
      padding-left: 14px;
      position: relative;
    }
    .explainer-sources li::before {
      content: '\203A';
      position: absolute;
      left: 0;
      top: 0;
      color: var(--gold-dark);
      font-weight: 700;
      font-size: 14px;
    }
    .explainer-sources strong {
      color: var(--navy);
      font-weight: 600;
    }

    /* ======================================
       RESULT PANEL
       ====================================== */
    .result-section {
      padding: 24px 0 80px;
    }
    .result-card {
      max-width: 800px;
      margin: 0 auto;
      background: var(--white);
      border: 1px solid rgba(10, 37, 64, 0.10);
      border-radius: 16px;
      box-shadow: var(--shadow-md);
      padding: 32px;
    }
    .result-header {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 28px;
    }
    .result-ref-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-muted);
      margin-bottom: 4px;
    }
    .result-ref-value {
      font-family: var(--font-headline);
      font-size: 1.5rem;
      color: var(--navy);
      font-weight: 600;
    }
    .status-pills { display: flex; gap: 8px; flex-wrap: wrap; }
    .status-pill {
      padding: 5px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
    }
    .status-pill.primary { background: rgba(186, 117, 23, 0.12); color: var(--gold-dark); }
    .status-pill.success { background: var(--success-bg); color: var(--success); }

    /* Route bar */
    .route-bar { margin-bottom: 28px; }
    .route-endpoints {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: var(--navy);
      margin-bottom: 8px;
      font-weight: 500;
    }
    .route-track {
      position: relative;
      height: 4px;
      background: rgba(10, 37, 64, 0.10);
      border-radius: 4px;
    }
    .route-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background: var(--gold-dark);
      border-radius: 4px;
      transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .route-marker {
      position: absolute;
      top: 50%;
      width: 16px;
      height: 16px;
      transform: translate(-50%, -50%);
      background: var(--gold-dark);
      border: 2px solid var(--white);
      border-radius: 50%;
      box-shadow: 0 2px 6px rgba(10, 37, 64, 0.20);
      transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .last-known {
      margin-top: 12px;
      font-size: 12px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    /* Step bar (4 stages) */
    .step-bar {
      display: flex;
      justify-content: space-between;
      margin-bottom: 28px;
      position: relative;
    }
    .step {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
    .step-line {
      position: absolute;
      top: 12px;
      right: 50%;
      left: -50%;
      height: 2px;
      background: rgba(10, 37, 64, 0.10);
      z-index: 1;
    }
    .step:first-child .step-line { display: none; }
    .step.done .step-line { background: var(--gold-dark); }
    .step-icon {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid rgba(10, 37, 64, 0.20);
      background: var(--white);
      position: relative;
      z-index: 2;
    }
    .step.done .step-icon {
      background: var(--gold-dark);
      border-color: var(--gold-dark);
    }
    .step.done .step-icon::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -55%) rotate(45deg);
      width: 5px;
      height: 9px;
      border-right: 2px solid var(--white);
      border-bottom: 2px solid var(--white);
    }
    .step-label {
      margin-top: 8px;
      font-size: 11px;
      color: var(--body-text);
      text-align: center;
    }
    .step.done .step-label { color: var(--navy); font-weight: 500; }

    /* Detail grid */
    .detail-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px 24px;
      padding-top: 24px;
      border-top: 1px solid rgba(10, 37, 64, 0.08);
    }
    .detail-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-muted);
      margin-bottom: 2px;
    }
    .detail-value { color: var(--navy); font-size: 14px; }

    /* Delivery-confirmation notice (public surface — POD download is
       portal-gated for PII / business-sensitivity reasons; see track.html
       for the architectural note next to this block) */
    .pod-notice {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-top: 24px;
      padding: 14px 18px;
      background: rgba(47, 122, 79, 0.06);
      border: 1px solid rgba(47, 122, 79, 0.25);
      border-radius: 10px;
    }
    .pod-notice-icon {
      flex-shrink: 0;
      color: var(--success);
      margin-top: 2px;
    }
    .pod-notice-text {
      font-size: 13px;
      color: var(--body-text);
      line-height: 1.6;
    }
    .pod-notice-text strong {
      color: var(--navy);
      font-weight: 600;
      margin-right: 6px;
    }
    .pod-notice-text a {
      color: var(--gold-dark);
      font-weight: 500;
    }
    .pod-notice-text a:hover { text-decoration: underline; }

    /* Contact strip */
    .contact-strip {
      max-width: 800px;
      margin: 24px auto 0;
      text-align: center;
      font-size: 14px;
      color: var(--body-text);
    }
    .contact-strip-row {
      display: flex;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
    }
    .contact-strip-row a {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: color 0.2s;
    }
    .contact-strip-row a:hover { color: var(--navy); }
    .contact-strip-bottom { margin-top: 12px; }
    .contact-strip-bottom a { color: var(--gold-dark); }
    .contact-strip-bottom a:hover { text-decoration: underline; }

    /* hidden utility */
    .hidden { display: none !important; }

    /* Spacer pushes footer down */
    .spacer { flex: 1; }

    body { display: flex; flex-direction: column; min-height: 100vh; }
    main { flex: 1; }

    /* ======================================
       FOOTER — canonical dark-navy chrome
       (mirrors contact.css / shippers.css / carriers.css patterns)
       ====================================== */
    .footer {
      background: var(--navy);
      color: rgba(255,255,255,0.7);
      padding: 60px 0 0;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 40px;
      padding-bottom: 40px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .footer-logo {
      display: flex; align-items: center; gap: 10px;
      font-weight: 700; font-size: 0.95rem;
      color: var(--white); margin-bottom: 16px;
    }
    .footer-brand p {
      font-size: 0.9rem;
      line-height: 1.7;
      margin-bottom: 20px;
    }
    .footer-brand .srl-tagline {
      font-family: Georgia, 'Times New Roman', serif;
      font-style: italic;
      color: var(--gold-light);
      font-size: 0.95rem;
    }
    .footer-brand a {
      color: rgba(255,255,255,0.7);
      transition: color 0.2s;
    }
    .footer-brand a:hover { color: var(--gold-light); }
    .footer-col h5 {
      color: var(--white);
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 16px;
    }
    .footer-col a {
      display: block;
      color: rgba(255,255,255,0.6);
      font-size: 0.9rem;
      padding: 4px 0;
      transition: color 0.2s;
    }
    .footer-col a:hover { color: var(--gold-light); }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 0;
      font-size: 0.8rem;
      color: rgba(255,255,255,0.4);
    }
    .footer-bottom-links { display: flex; gap: 24px; }
    .footer-bottom-links a {
      color: rgba(255,255,255,0.4);
      transition: color 0.2s;
    }
    .footer-bottom-links a:hover { color: var(--gold-light); }

    /* ======================================
       RESPONSIVE
       ====================================== */
    @media (max-width: 900px) {
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .nav-links { display: none; }
      .hamburger { display: flex; }
      .hero { padding: 130px 0 60px; }
      .search-card { padding: 20px; }
      .detail-grid { grid-template-columns: 1fr; gap: 12px; }
      .result-card { padding: 20px; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
      .explainer-container {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
      }
      .explainer-steps { text-align: left; }
      .explainer-illustration img,
      .explainer-illustration svg { margin: 0 auto; }
    }
    @media (max-width: 480px) {
      .container { padding: 0 16px; }
      .search-row { flex-direction: column; }
      .search-btn { width: 100%; }
      .step-label { font-size: 10px; }
    }