/* =============================================================================
   Navarro Express — Section & page-specific styles
   ============================================================================= */

/* -------------------------------------------------- Hero */
.hero {
  position: relative; overflow: hidden;
  background: var(--grad-navy); color: var(--white);
  padding-block: var(--sp-9);
}
.hero--photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
.hero::before { /* subtle dotted texture over the film */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1.5px, transparent 1.5px);
  background-size: 26px 26px; opacity: 0.5; pointer-events: none;
}
.hero-inner { position: relative; display: block; }
.hero-copy { max-width: 720px; }
@media (min-width: 768px) { .hero { padding-block: 6.5rem; } }
.hero h1 { color: var(--white); margin-bottom: var(--sp-4); }
.hero h1 .accent { color: var(--teal-600); }
.hero .lede { font-size: var(--fs-md); color: rgba(255,255,255,0.86); max-width: 56ch; margin-bottom: var(--sp-6); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.hero-trust { display: inline-flex; }
.hero-trust .icon { color: var(--orange-600); }

/* hero illustration: isometric container stack + route arcs */
.hero-art {
  position: relative; aspect-ratio: 5 / 4; width: 100%;
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(0,168,168,0.16), rgba(0,87,184,0.08));
  border: 1px solid rgba(255,255,255,0.12);
  display: grid; place-items: center; overflow: hidden;
}
.hero-art svg { width: 92%; height: auto; }
.hero-art--photo { padding: 0; background: none; }
.hero-art--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* -------------------------------------------------- Metrics */
.metrics { background: var(--white); border-bottom: 1px solid var(--color-border); }
.metrics-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .metrics-grid { grid-template-columns: repeat(4, 1fr); } }
.metric { text-align: center; padding: var(--sp-4); }
.metric .metric-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: var(--ocean-100); color: var(--ocean-600); margin-bottom: var(--sp-3);
}
.metric .metric-value {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem); color: var(--navy);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.metric .metric-label { margin-top: var(--sp-2); color: var(--color-text-muted); font-weight: var(--fw-medium); }

/* -------------------------------------------------- Network map */
.map-wrap {
  position: relative; background: var(--grad-navy); border-radius: var(--r-xl);
  padding: var(--sp-5); overflow: hidden; box-shadow: var(--sh-lg);
}
.map-canvas { position: relative; width: 100%; aspect-ratio: 2 / 1; }
.map-canvas svg { width: 100%; height: 100%; }

/* Live Mapbox canvas */
.map-canvas--live { aspect-ratio: 2 / 1; min-height: 360px; border-radius: var(--r-lg); overflow: hidden; }
.map-canvas--live .mapboxgl-map { border-radius: var(--r-lg); }
.np-marker {
  width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
  background: var(--orange-600); border: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(255,122,0,0.25), 0 2px 6px rgba(0,0,0,0.4);
  transition: transform var(--dur-fast) var(--ease);
}
.np-marker.is-hub { background: var(--teal-600); box-shadow: 0 0 0 4px rgba(0,168,168,0.25), 0 2px 6px rgba(0,0,0,0.4); }
.np-marker:hover { transform: scale(1.25); }
.mapboxgl-popup-content { font-family: var(--font-body); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); box-shadow: var(--sh-md); }
.mapboxgl-popup-content strong { display: block; color: var(--navy); font-size: var(--fs-sm); }
.mapboxgl-popup-content span { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* Sender / receiver parties (public tracking) */
.parties { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-bottom: var(--sp-5); }
@media (min-width: 640px) { .parties { grid-template-columns: 1fr 1fr; } }
.party { background: var(--gray-50); border: 1px solid var(--color-border); border-radius: var(--r-md); padding: var(--sp-4); }
.party-head { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); font-weight: var(--fw-semibold); margin-bottom: var(--sp-2); }
.party-name { font-weight: var(--fw-semibold); color: var(--navy); }
.party-co { color: var(--color-text-muted); font-size: var(--fs-sm); }
.party-addr { display: flex; align-items: flex-start; gap: 6px; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--color-text); }
.party-addr .icon { color: var(--teal-600); flex: none; margin-top: 2px; }

/* Cargo photos (public tracking) */
.cargo-photos { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--color-border); }
.cargo-photos__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); margin-bottom: var(--sp-4); }
.cargo-photos__title .icon { color: var(--teal-600); }
.cargo-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.cargo-tile { margin: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--color-border); background: var(--gray-100); box-shadow: var(--sh-sm); }
.cargo-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform var(--dur-base) var(--ease); }
.cargo-tile:hover img { transform: scale(1.05); }
.cargo-tile figcaption { font-size: var(--fs-xs); color: var(--color-text-muted); padding: var(--sp-2) var(--sp-3); background: var(--white); }

/* Shipment journey map (tracking page) */
.journey-map { width: 100%; height: 340px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--color-border); margin-bottom: var(--sp-5); box-shadow: var(--sh-sm); }
.jr-cargo { position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--navy); border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(10,37,64,0.18), 0 2px 6px rgba(0,0,0,0.35); }
.jr-cargo::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--teal-600); animation: jr-pulse 1.8s ease-out infinite;
}
@keyframes jr-pulse { 0% { transform: scale(0.8); opacity: 0.7; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .jr-cargo::after { animation: none; } }
.map-land { fill: rgba(255,255,255,0.07); stroke: rgba(255,255,255,0.12); stroke-width: 0.4; }
.map-route { fill: none; stroke: var(--teal-600); stroke-width: 0.6; stroke-dasharray: 4 3; opacity: 0.7; }
.map-route.animate { animation: dash 2.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -28; } }
.map-node { cursor: pointer; }
.map-node .node-dot { fill: var(--orange-600); transition: r var(--dur-fast) var(--ease); }
.map-node.hub .node-dot { fill: var(--teal-600); }
.map-node .node-ring { fill: none; stroke: var(--orange-600); stroke-width: 0.5; opacity: 0; }
.map-node.hub .node-ring { stroke: var(--teal-600); }
.map-node:hover .node-dot, .map-node:focus-visible .node-dot { r: 1.6; }
.map-node .node-pulse { fill: var(--orange-600); opacity: 0.35; animation: pulse 2.4s ease-out infinite; }
.map-node.hub .node-pulse { fill: var(--teal-600); }
@keyframes pulse { 0% { r: 1; opacity: 0.5; } 100% { r: 4; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .map-route.animate, .map-node .node-pulse { animation: none; }
  .map-node .node-pulse { display: none; }
}
.map-tooltip {
  position: absolute; z-index: 5; transform: translate(-50%, -130%);
  background: var(--white); color: var(--navy); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md); box-shadow: var(--sh-md); font-size: var(--fs-sm);
  pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease);
  white-space: nowrap; max-width: 220px;
}
.map-tooltip.is-visible { opacity: 1; }
.map-tooltip strong { display: block; font-size: var(--fs-sm); }
.map-tooltip span { font-size: var(--fs-xs); color: var(--color-text-muted); white-space: normal; }
.map-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-4); color: rgba(255,255,255,0.85); font-size: var(--fs-sm); }
.map-legend .key { display: inline-flex; align-items: center; gap: var(--sp-2); }
.map-legend .dot { width: 12px; height: 12px; border-radius: 50%; }
.map-legend .dot.hub { background: var(--teal-600); }
.map-legend .dot.port { background: var(--orange-600); }
.map-legend .dot.route { background: transparent; border: 2px dashed var(--teal-600); }

/* -------------------------------------------------- Tracking */
.track-panel {
  background: var(--white); border: 1px solid var(--color-border);
  border-radius: var(--r-xl); box-shadow: var(--sh-md); overflow: hidden;
}
.track-form {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-5);
  background: var(--gray-50); border-bottom: 1px solid var(--color-border);
}
.track-form .input { flex: 1 1 240px; }
.track-result { padding: var(--sp-5); }
.track-meta { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); margin-bottom: var(--sp-5); }
@media (min-width: 768px) { .track-meta { grid-template-columns: repeat(4, 1fr); } }
.track-meta .label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.track-meta .value { font-weight: var(--fw-semibold); color: var(--navy); margin-top: 2px; }
.track-status { display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--ocean-100); color: var(--ocean-700); font-weight: var(--fw-semibold);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); font-size: var(--fs-sm); }
.track-progress { height: 8px; border-radius: var(--r-full); background: var(--gray-200); overflow: hidden; margin-bottom: var(--sp-5); }
.track-progress > span { display: block; height: 100%; background: var(--grad-teal); border-radius: var(--r-full); transition: width var(--dur-slow) var(--ease); }

/* timeline */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--gray-200); }
.timeline li { position: relative; padding: 0 0 var(--sp-4) var(--sp-6); }
.timeline li:last-child { padding-bottom: 0; }
.timeline .node {
  position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--gray-300);
  display: grid; place-items: center;
}
.timeline li.done .node { background: var(--teal-600); border-color: var(--teal-600); color: var(--white); }
.timeline li.current .node { background: var(--orange-600); border-color: var(--orange-600); color: var(--white); }
.timeline li.current .node::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--orange-600); opacity: 0.4; animation: pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .timeline li.current .node::after { animation: none; } }
.timeline .t-label { font-weight: var(--fw-semibold); color: var(--navy); }
.timeline .t-meta { font-size: var(--fs-sm); color: var(--color-text-muted); }
.track-docs { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--color-border); }

/* -------------------------------------------------- Quote engine */
.quote-panel {
  background: var(--white); border-radius: var(--r-xl);
  box-shadow: var(--sh-lg); padding: var(--sp-6);
}
.quote-result {
  display: none; margin-top: var(--sp-5); padding: var(--sp-5);
  background: var(--gray-50); border: 1px solid var(--color-border); border-radius: var(--r-lg);
}
.quote-result.is-visible { display: block; }

/* -------------------------------------------------- Case studies */
.case-card { display: flex; flex-direction: column; }
.case-card .case-tag { align-self: flex-start; }
.case-block { margin-top: var(--sp-4); }
.case-block h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal-600); margin-bottom: 4px; }
.case-block p { font-size: var(--fs-sm); color: var(--color-text-muted); }
.case-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--color-border); }
.case-results .r-val { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--ocean-600); }
.case-results .r-lab { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* -------------------------------------------------- Testimonials */
.testi-card { display: flex; flex-direction: column; gap: var(--sp-4); }
.stars { display: inline-flex; gap: 2px; color: var(--orange-600); }
.stars .icon { width: 18px; height: 18px; fill: var(--orange-600); }
.testi-quote { font-size: var(--fs-md); color: var(--navy); line-height: var(--lh-snug); }
.testi-person { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; }
.testi-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: var(--grad-teal); color: var(--white);
  display: grid; place-items: center; font-weight: var(--fw-bold); font-family: var(--font-heading);
}
.testi-person .name { font-weight: var(--fw-semibold); color: var(--navy); }
.testi-person .role { font-size: var(--fs-sm); color: var(--color-text-muted); }
.testi-video {
  position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ocean-600);
}
.testi-video .play {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ocean-100); color: var(--ocean-600);
}
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-6); margin-top: var(--sp-7); opacity: 0.75; }
.logo-strip .logo-chip { font-family: var(--font-heading); font-weight: var(--fw-bold); color: var(--gray-500); font-size: var(--fs-md); letter-spacing: -0.01em; }

/* -------------------------------------------------- Certifications */
.cert-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .cert-grid { grid-template-columns: repeat(4, 1fr); } }
.cert { text-align: center; padding: var(--sp-5) var(--sp-4); }
.cert .cert-icon { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 50%; background: var(--teal-100); color: var(--teal-600); margin-bottom: var(--sp-3); }
.cert .cert-name { font-family: var(--font-heading); font-weight: var(--fw-bold); color: var(--navy); }
.cert .cert-desc { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* -------------------------------------------------- Resources */
.resource-card { display: flex; flex-direction: column; }
.resource-card .res-type { align-self: flex-start; margin-bottom: var(--sp-3); }
.resource-card h3 { font-size: var(--fs-md); }

/* -------------------------------------------------- Contact */
.contact-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8); } }
.contact-info .info-item { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.contact-info .info-item .icon { color: var(--teal-600); flex: none; }
.contact-info .info-item .label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.contact-info .info-item .value { font-weight: var(--fw-semibold); color: var(--navy); }
.office-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.office { padding: var(--sp-4); background: var(--white); border: 1px solid var(--color-border); border-radius: var(--r-md); }
.office .city { font-weight: var(--fw-semibold); color: var(--navy); }
.office .addr { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* -------------------------------------------------- About story */
.about-story { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) { .about-story { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8); } }
.about-media img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--sh-lg); }

/* -------------------------------------------------- Page hero (inner pages) */
.page-hero { background: var(--grad-navy); color: var(--white); padding-block: var(--sp-7); position: relative; overflow: hidden; }
.page-hero--photo { background-size: cover; background-position: center; }
.page-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.07) 1.5px, transparent 1.5px); background-size: 24px 24px; opacity: 0.5; }
.page-hero h1 { color: var(--white); position: relative; }
.page-hero p { color: rgba(255,255,255,0.85); max-width: 60ch; margin-top: var(--sp-3); position: relative; font-size: var(--fs-md); }
.breadcrumb { position: relative; display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); color: rgba(255,255,255,0.7); margin-bottom: var(--sp-3); }
.breadcrumb a { color: rgba(255,255,255,0.7); }
.breadcrumb a:hover { color: var(--white); }

/* -------------------------------------------------- CTA band */
.cta-band { background: var(--grad-teal); color: var(--white); border-radius: var(--r-xl); padding: var(--sp-7); text-align: center; }
.cta-band h2 { color: var(--white); margin-bottom: var(--sp-3); }
.cta-band p { color: rgba(255,255,255,0.9); max-width: 52ch; margin: 0 auto var(--sp-5); }
.cta-band .hero-cta { justify-content: center; margin-bottom: 0; }

/* coming-soon note */
.soon-note { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: var(--sp-4); }
.soon-note .badge { background: var(--orange-100); color: var(--orange-700); }