/* =========================================================
   NASDAN — Supply Chain & Logistics solutions page
   Dominant visual metaphor: Physical-to-Digital Supply Chain
   (multimodal plane/ship/truck hero, control tower dashboard,
   tabbed software-we-deliver grid, category build grid)
   Extends tokens.css / main.css. Section-specific styles only.
   ========================================================= */

/* =========================================================
   1. HERO — Contact-page navy treatment (dot-grid + amber
   corner glow) with a plane / ship / truck illustration
   ========================================================= */
.sup-hero {
  position: relative;
  padding-block: var(--sp-9) var(--sp-8);
  background: linear-gradient(150deg, var(--nasdan-navy) 0%, var(--nasdan-navy-700) 100%);
  overflow: hidden;
}
.sup-hero-texture {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(150deg, rgba(0,0,0,0.9) 0%, transparent 60%);
  mask-image: linear-gradient(150deg, rgba(0,0,0,0.9) 0%, transparent 60%);
}
.sup-hero-stripe {
  position: absolute; top: -10%; right: -8%; width: 46%; aspect-ratio: 1/1; left: auto; height: auto;
  background: radial-gradient(circle, rgba(255,193,7,0.28) 0%, rgba(255,193,7,0) 70%);
  filter: blur(6px);
}
.sup-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.sup-hero-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); color: var(--nasdan-amber); }
.sup-hero-eyebrow .eyebrow-mark { background: var(--nasdan-amber); }
.sup-hero-headline {
  font-size: var(--fs-h1); font-weight: var(--fw-light); letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight); color: var(--white); margin-bottom: var(--sp-4); max-width: 13ch;
}
.sup-hero-lead { font-size: var(--fs-body); max-width: 47ch; margin-bottom: var(--sp-6); color: var(--paper-300); line-height: var(--lh-relaxed); }
.sup-hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.sup-hero-actions .btn-ghost-nasdan { color: var(--white); border-color: rgba(255,255,255,0.32); }
.sup-hero-actions .btn-ghost-nasdan:hover { background: rgba(255,255,255,0.08); border-color: var(--white); }

.sup-hero-visual { position: relative; width: 100%; max-width: 480px; margin-inline: auto; }
.sup-hero-graphic { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 34px rgba(0,0,0,0.32)); }

/* =========================================================
   2. THE MODERN SUPPLY CHAIN CHALLENGE — blind spot list
   (marker dot removed per request; item spacing tightened)
   ========================================================= */
.sup-challenge { padding-block: var(--section-pad-y); }
.sup-blind { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--sp-8); border-top: 1px solid var(--ink-200); border-left: 1px solid var(--ink-200); }
.sup-blind-item { padding: var(--sp-6); border-right: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); position: relative; }
.sup-blind-item strong { display: block; font-size: 1.0625rem; font-weight: var(--fw-medium); color: var(--ink-900); margin: 0 0 var(--sp-2) 0; }
.sup-blind-item p { color: var(--ink-500); font-size: 0.9375rem; }

/* =========================================================
   3. REAL-TIME VISIBILITY — capability list + control tower
   dashboard with an integrated shipment-journey track
   ========================================================= */
.sup-visibility { padding-block: var(--section-pad-y); }
.sup-tower-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-8); align-items: start; }

.sup-tower-capabilities { display: flex; flex-direction: column; gap: var(--sp-5); }
.sup-tower-cap-item { display: flex; gap: var(--sp-4); align-items: flex-start; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--ink-100); }
.sup-tower-cap-item:last-child { border-bottom: none; padding-bottom: 0; }
.sup-tower-cap-num {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--cloud);
  border: 1px solid var(--ink-100); display: flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; font-weight: var(--fw-semibold); color: var(--nasdan-navy);
}
.sup-tower-cap-item strong { display: block; font-size: 1rem; font-weight: var(--fw-medium); color: var(--ink-900); margin-bottom: 2px; }
.sup-tower-cap-item p { font-size: 0.875rem; color: var(--ink-500); margin: 0; line-height: var(--lh-relaxed); }

.sup-tower { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--ink-200); box-shadow: var(--shadow-lg); padding: var(--sp-5); }
.sup-tower-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--ink-100); }
.sup-tower-head span:first-child { font-size: 0.8125rem; font-weight: var(--fw-medium); color: var(--ink-900); }
.sup-tower-live { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: var(--fw-medium); color: #1a9c63; }
.sup-tower-live i { width: 7px; height: 7px; border-radius: 50%; background: #1a9c63; box-shadow: 0 0 8px rgba(26,156,99,0.6); }
.sup-tower-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.sup-tower-tile { padding: var(--sp-3); border-radius: var(--radius-sm); border: 1px solid var(--ink-100); display: flex; flex-direction: column; gap: 2px; }
.sup-tower-tile span { font-size: 0.7rem; color: var(--ink-500); }
.sup-tower-tile strong { font-size: 1.125rem; font-weight: var(--fw-medium); color: var(--ink-900); }
.sup-tower-tile small { font-size: 0.6875rem; color: var(--ink-400); }
.sup-tower-tile--amber strong { color: var(--nasdan-amber-700); }

.sup-tower-journey { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--ink-100); }
.sup-tower-journey-label { display: block; font-size: 0.7rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-400); margin-bottom: var(--sp-5); }
.sup-tower-journey-track { position: relative; display: flex; justify-content: space-between; }
.sup-tower-journey-line { position: absolute; top: 5px; left: 2%; right: 2%; height: 1px; background: var(--ink-200); z-index: 0; }
.sup-tower-journey-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.sup-tower-journey-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--white); border: 2px solid var(--nasdan-navy); }
.sup-tower-journey-stage--amber .sup-tower-journey-dot { border-color: var(--nasdan-amber-700); background: var(--nasdan-amber); }
.sup-tower-journey-stage span:last-child { font-size: 0.6875rem; color: var(--ink-500); text-align: center; white-space: nowrap; }

/* =========================================================
   4. LOGISTICS SOFTWARE WE DELIVER — tabbed panels, light bg
   ========================================================= */
.sup-solutions { padding-block: var(--section-pad-y-lg); background: var(--cloud); }

.sup-sol-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-8); border-bottom: 1px solid var(--ink-200); }
.sup-sol-tab {
  font-family: var(--font-sans); font-size: 0.9375rem; font-weight: var(--fw-medium); color: var(--ink-500);
  background: none; border: none; padding: var(--sp-3) var(--sp-4); cursor: pointer; position: relative;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur-base) var(--ease-out);
}
.sup-sol-tab:hover { color: var(--ink-900); }
.sup-sol-tab.is-active { color: var(--ink-900); border-bottom-color: var(--nasdan-amber); }

.sup-sol-panels { margin-top: var(--sp-8); }
.sup-sol-panel { display: none; }
.sup-sol-panel.is-active { display: block; animation: supSolPanelFade 0.35s var(--ease-out); }
@keyframes supSolPanelFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.sup-sol-panel-heading { font-size: 1.375rem; font-weight: var(--fw-medium); letter-spacing: var(--ls-tight); color: var(--ink-900); margin: 0 0 var(--sp-7); }
.sup-sol-item-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7) var(--sp-6); }
.sup-sol-item h4 { font-size: 1.0625rem; font-weight: var(--fw-medium); color: var(--ink-900); margin: 0 0 var(--sp-2); }
.sup-sol-item p { font-size: 0.9375rem; line-height: var(--lh-relaxed); color: var(--ink-500); margin: 0; }

/* =========================================================
   5. WHAT WE BUILD FOR SUPPLY CHAIN — category card grid
   (adapted from Startups page's "What we build" section)
   ========================================================= */
.sup-build { padding-block: var(--section-pad-y-lg); background: var(--nasdan-navy); }
.sup-build-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); margin-top: var(--sp-8); }
.sup-build-card {
  display: flex; flex-direction: column; padding: var(--sp-5);
  border-radius: var(--radius-lg); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.sup-build-card:hover { background: rgba(255,255,255,0.08); transform: translateY(-3px); }
.sup-build-card h3 { margin: 0 0 var(--sp-2); font-size: 1.0625rem; font-weight: var(--fw-medium); color: var(--white); }
.sup-build-card p { margin: 0 0 var(--sp-4); font-size: 0.875rem; line-height: var(--lh-relaxed); color: var(--ink-400); flex: 1; }
.sup-build-link {
  display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 0.8125rem; font-weight: var(--fw-medium);
  color: var(--nasdan-amber); width: fit-content;
}
.sup-build-link svg { width: 13px; height: 13px; transition: transform var(--dur-fast) var(--ease-out); }
.sup-build-card:hover .sup-build-link svg { transform: translateX(3px); }

/* =========================================================
   6. CLIENT STORIES — uses global .client-stories-section
   component from main.css; no page-specific rules needed.
   ========================================================= */

/* =========================================================
   7. FINAL CTA
   ========================================================= */
.sup-final-panel { }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1199.98px) {
  .sup-hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .sup-hero-visual { max-width: 420px; }
  .sup-blind { grid-template-columns: 1fr 1fr; }

  .sup-tower-layout { grid-template-columns: 1fr; }
  .sup-tower-capabilities { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-6); }
  .sup-tower-cap-item { border-bottom: none; padding-bottom: 0; }

  .sup-sol-item-grid { grid-template-columns: 1fr 1fr; }
  .sup-build-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
  .sup-hero { padding-block: var(--sp-8) var(--sp-6); }
  .sup-hero-headline { max-width: 100%; font-size: clamp(1.75rem, 1.5rem + 2.2vw, 2.25rem); }
  .sup-hero-actions { flex-direction: column; align-items: stretch; }
  .sup-hero-actions .btn-nasdan { white-space: normal; text-align: center; }
  .sup-hero-visual { max-width: 320px; }

  .sup-blind { grid-template-columns: 1fr; }

  .sup-tower-capabilities { grid-template-columns: 1fr; }
  .sup-tower-grid { grid-template-columns: 1fr 1fr; }
  .sup-tower-journey-stage span:last-child { font-size: 0.625rem; }

  .sup-sol-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .sup-sol-tab { white-space: nowrap; }
  .sup-sol-item-grid { grid-template-columns: 1fr; }

  .sup-build-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .sup-hero-visual { max-width: 280px; }
  .sup-tower-grid { grid-template-columns: 1fr; }
  .sup-tower-journey-track { flex-wrap: wrap; row-gap: var(--sp-4); }
  .sup-tower-journey-line { display: none; }
}