/* Meridian art-direction layer (Claude): loaded after meridian.css. Asphalt photo hero, expanded type, a real shipping label. */

h1, h2 { font-stretch: 125%; font-weight: 800; letter-spacing: -0.02em; }
h1 { text-transform: uppercase; font-size: clamp(2.6rem, 6.2vw, 5.8rem); line-height: 0.92; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); line-height: 1; }

/* Hero: full-bleed truck photo under asphalt, white type */
[data-section="hero"] { position: relative; background: var(--asphalt, #0E1621); color: #fff; padding: clamp(2.5rem, 6vw, 5.5rem) 0; overflow: hidden; isolation: isolate; }
[data-section="hero"] .hero-media { position: absolute; inset: 0; margin: 0; z-index: -1; border-radius: 0; max-width: none; }
[data-section="hero"] .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; border-radius: 0; filter: saturate(.8) contrast(1.05); }
[data-section="hero"] .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,22,33,.96) 0%, rgba(14,22,33,.82) 45%, rgba(14,22,33,.45) 100%); border-radius: 0; }
[data-section="hero"] .hero-grid { grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
[data-section="hero"] .hero-panel { background: transparent; border: 0; box-shadow: none; padding: 0; color: #fff; }
[data-section="hero"] .eyebrow { color: var(--signal, #FFD23F); font-family: "IBM Plex Mono", monospace; letter-spacing: .12em; }
[data-section="hero"] h1 { color: #fff; }
[data-section="hero"] .lead { color: rgba(255,255,255,.78); font-size: clamp(1.05rem, 1.3vw, 1.25rem); max-width: 38ch; }
[data-section="hero"] .btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }

/* Route lane on dark: hairline with port codes */
[data-section="hero"] .route-band { background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,.18); padding: 1.2rem 0 0; margin-top: 2rem !important; }
[data-section="hero"] .route-band .eyebrow { color: rgba(255,255,255,.6); }
[data-section="hero"] .route-node { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); font-family: "IBM Plex Mono", monospace; }
[data-section="hero"] .route-line::before { background: rgba(255,255,255,.3); }

/* The waybill: a crisp white shipping label with a hazard-yellow service block */
[data-section="hero"] .waybill-card {
  background: #fff; color: #0E1621; border: 0; border-radius: 4px; padding: 1.2rem 1.3rem 1.3rem; transform: rotate(-1.5deg);
  box-shadow: 0 2px 0 rgba(0,0,0,.06), 0 30px 60px -18px rgba(0,0,0,.65); position: relative;
}
[data-section="hero"] .waybill-card::before { /* torn perforation along the top */
  content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 12px;
  background: radial-gradient(circle at 6px 0, transparent 5px, #fff 5.5px) repeat-x; background-size: 12px 12px;
}
[data-section="hero"] .waybill-card .barcode { height: 54px; }
[data-section="hero"] .service-code { font-size: 1.5rem; padding: .5rem .8rem; border-radius: 0; }
[data-section="hero"] .meta-row { border-bottom: 1px solid #D5DCE3; padding: .55rem 0; font-size: .85rem; }
[data-section="hero"] .meta-row span:last-child { font-weight: 600; }
[data-section="hero"] .waybill-card label { font-weight: 700; font-stretch: 112%; text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; }

/* Proof strip: hazard-yellow band with big mono numbers */
[data-section="proof-strip"] { background: var(--signal, #FFD23F); padding: 1.6rem 0; }
[data-section="proof-strip"] .stat { background: transparent; border: 0; border-left: 2px solid #0E1621; border-radius: 0; box-shadow: none; padding: .2rem 0 .2rem 1rem; }
[data-section="proof-strip"] .stat strong { font-family: "IBM Plex Mono", monospace; font-size: clamp(1.7rem, 3vw, 2.6rem); color: #0E1621; }
[data-section="proof-strip"] .stat .mono { color: #0E1621; text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 810px) {
  [data-section="hero"] .hero-grid { grid-template-columns: 1fr; }
  [data-section="hero"] .hero-media::after { background: linear-gradient(180deg, rgba(14,22,33,.9) 0%, rgba(14,22,33,.85) 60%, rgba(14,22,33,.95) 100%); }
  [data-section="hero"] .waybill-card { transform: none; }
}
@media (prefers-reduced-motion: reduce) { [data-section="hero"] .waybill-card { transform: none; } }

/* QA fix (Claude): the closed off-canvas nav must not widen the page or be focusable; hide it fully until opened */
html, body { overflow-x: clip; }
@media (min-width: 811px) { .site-nav [data-nav-close] { display: none; } }
@media (max-width: 810px) {
  .site-nav { visibility: hidden; transition: transform 0.3s ease, visibility 0s linear 0.3s; }
  .site-nav.is-open { visibility: visible; transition: transform 0.3s ease, visibility 0s; }
}