/* ============================================================
   DIRECTION 3A — HORIZONTAL STORYTELLING
   Loaded AFTER styles.css. Pinned horizontal track, parallax,
   continuous maroon→black gradient panels, all-dark / light type.
   ============================================================ */

.hzx{ position:relative; background:#0e0708; }
.hzx-sticky{ position:sticky; top:0; height:100vh; width:100%; overflow:hidden; }
.hzx-track{
  display:flex; height:100%; width:max-content;
  will-change:transform;
}

/* ---- panel shell ---- */
.hzx-panel{
  position:relative; flex:0 0 100vw; width:100vw; height:100vh;
  overflow:hidden; color:#fff;
  display:flex; align-items:center;
  padding:clamp(72px,10vh,120px) clamp(28px,6vw,110px) clamp(96px,12vh,140px);
}
.hzx-panel .panel-inner{ position:relative; z-index:3; width:100%; max-width:var(--maxw); margin:0 auto;
  opacity:calc(.18 + .82*var(--vis,1)); transition:opacity .2s linear; }
.hzx-grain{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 100% at 18% 0%, rgba(255,255,255,.06), transparent 55%),
            radial-gradient(120% 120% at 100% 100%, rgba(0,0,0,.45), transparent 60%);
  box-shadow:inset 0 0 240px 40px rgba(0,0,0,.40); }
.hzx-index{ position:absolute; right:clamp(24px,4vw,64px); top:clamp(28px,5vh,56px); z-index:4;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; color:rgba(255,255,255,.5); }
.hzx-index span{ color:var(--maroon-3); font-weight:700; }

/* ---- shared type ---- */
.hzx-eyebrow{ font-family:var(--font-mono); font-size:clamp(11px,.85vw,13px); letter-spacing:.22em;
  text-transform:uppercase; color:var(--maroon-3); display:inline-flex; align-items:center; gap:12px; margin-bottom:22px; }
.hzx-eyebrow i{ width:30px; height:1px; background:var(--maroon-3); display:inline-block; }
.hzx-h1{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; letter-spacing:-0.02em;
  line-height:0.9; font-size:clamp(48px,7.4vw,120px); color:#fff; }
.hzx-h1 em{ color:var(--maroon-3); font-style:normal; }
.hzx-h2{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-0.02em;
  line-height:0.94; font-size:clamp(32px,4.4vw,66px); color:#fff; }
.hzx-lead{ margin-top:28px; max-width:54ch; font-size:clamp(16px,1.4vw,21px); line-height:1.55; color:rgba(255,255,255,.82); font-weight:500; }
.hzx-sub{ margin-top:22px; max-width:44ch; font-size:clamp(15px,1.2vw,18px); line-height:1.6; color:rgba(255,255,255,.74); font-weight:500; }
.hzx-sub b{ color:#fff; }

/* entrance — children rise as panel becomes active */
.hzx-panel .layer-mid,
.hzx-panel .layer-fore,
.hzx-panel .layer-back{ transition:transform .5s var(--ease), opacity .7s var(--ease); }
.hzx-panel .layer-fore{ opacity:0; transform:translateY(34px); }
.hzx-panel[data-active] .layer-fore{ opacity:1; transform:none; }
.hzx-panel .layer-mid{ opacity:0; transform:translateY(20px); }
.hzx-panel[data-active] .layer-mid{ opacity:1; transform:none; }

/* parallax drift driven by --n (panel centre offset, -1..1) */
.hzx-panel[data-active] .layer-back{ transform:translate3d(calc(var(--n,0) * -54px),0,0); }
.hzx-panel[data-active] .layer-mid{  transform:translate3d(calc(var(--n,0) * -26px),0,0); }
.hzx-panel[data-active] .layer-fore{ transform:translate3d(calc(var(--n,0) *  30px),0,0); }

/* ---- 0 intro ---- */
.hzx-intro{ align-items:center; }
.hzx-watermark{ position:absolute; left:-2vw; bottom:-12vh; z-index:0;
  font-family:var(--font-display); font-weight:900; font-size:62vh; line-height:.7;
  color:rgba(255,255,255,.05); user-select:none; }
.intro-mid{ position:relative; z-index:3; }
.hzx-scrollhint{ margin-top:46px; display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#fff; }
.hzx-scrollhint .ln{ width:64px; height:1px; background:linear-gradient(90deg, transparent, var(--maroon-3)); }
.hzx-scrollhint .arrow{ animation:hzxnudge 1.6s var(--ease) infinite; }
@keyframes hzxnudge{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(7px);} }

/* ---- column heading + content panels share a 2-row layout ---- */
.hzx-services .panel-inner,
.hzx-numbers .panel-inner,
.hzx-process .panel-inner,
.hzx-lanes .panel-inner{ display:flex; flex-direction:column; gap:clamp(20px,3vh,44px); justify-content:center; }
.hzx-colhead{ max-width:38ch; }

/* services */
.svc-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.hzx-svc{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:16px;
  padding:clamp(16px,1.6vw,24px); transition:transform .45s var(--ease), border-color .45s, background .45s; }
.hzx-svc:hover{ transform:translateY(-5px); border-color:var(--maroon-3); background:rgba(255,255,255,.08); }
.hzx-svc .ico{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in oklab, var(--maroon) 40%, transparent); margin-bottom:16px; }
.hzx-svc .ico svg{ width:24px; height:24px; stroke:var(--maroon-3); }
.hzx-svc:hover .ico svg{ stroke:#fff; }
.hzx-svc h3{ font-size:clamp(17px,1.4vw,21px); text-transform:none; letter-spacing:-0.01em; margin-bottom:8px; }
.hzx-svc p{ font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.68); font-weight:500; }
.hzx-svc .tag{ display:inline-block; margin-top:14px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--maroon-3); }

/* numbers */
.num-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:hidden; }
.hzx-num{ background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18)); padding:clamp(26px,2.6vw,42px); }
.hzx-num .big{ font-family:var(--font-display); font-weight:800; font-size:clamp(46px,5.4vw,86px); line-height:.9; letter-spacing:-0.02em; color:#fff; }
.hzx-num .big .u{ color:var(--maroon-3); }
.hzx-num .lbl{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-top:16px; }
.hzx-num .note{ font-size:13px; color:rgba(255,255,255,.5); margin-top:8px; line-height:1.4; }

/* story — full-height background video band on the left third (rule of thirds) */
.hzx-story .panel-inner{ display:grid; grid-template-columns:30% 1fr; align-items:center; gap:clamp(36px,5vw,84px); }
.story-body{ grid-column:2; max-width:60ch; }
.story-vid{ position:absolute; left:0; top:0; bottom:0; width:33.333vw; z-index:0; }
.story-vid video{ width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block; }
/* the clip box crops the oversized iframe to the band; it's separate from .story-vid so
   the ::after fade can extend past the video edges without being clipped with it */
.story-clip{ position:absolute; inset:0; overflow:hidden; }
/* Vimeo iframe can't object-fit — oversize it to cover the band and center-crop.
   The file is a 3:2 frame, but the footage is a vertical phone clip pillarboxed in the
   centre ~31% of that frame (black bars baked into the video). Scale so the footage
   strip alone covers the band: width ≥ 100%/0.31 ≈ 325% pushes the bars outside the
   crop, and ≥ 150vh keeps the 3:2 frame at least 100vh tall. */
.story-clip iframe{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:max(325%, 150vh); aspect-ratio:3/2; border:0; pointer-events:none; }
/* panel gradient bleeds onto the video: soft edge fades + a slight overall tint,
   right edge dissolves fully into the panel colour at the 1/3 line */
.story-vid::after{ content:""; position:absolute; inset:0 -10px; pointer-events:none;
  background:
    linear-gradient(90deg, oklch(0.205 0.078 26 / .45) 0%, transparent 22%, transparent 50%, oklch(0.183 0.068 27 / .82) 84%, oklch(0.183 0.068 27) 100%),
    linear-gradient(180deg, oklch(0.205 0.078 26 / .38) 0%, transparent 24%, transparent 68%, oklch(0.150 0.052 28 / .55) 100%),
    oklch(0.195 0.072 26.5 / .15);
}
.story-vid .imgtag{ position:absolute; left:18px; bottom:18px; z-index:2; background:rgba(14,7,8,.7); backdrop-filter:blur(10px);
  padding:11px 15px; border-radius:11px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:#fff; }
.story-vid .imgtag b{ color:var(--maroon-3); }
.hzx-quote{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-0.02em;
  font-size:clamp(20px,2.1vw,32px); line-height:1.04; margin:26px 0; color:#fff; }
.hzx-quote em{ color:var(--maroon-3); font-style:normal; }
.story-facts{ display:flex; gap:34px; flex-wrap:wrap; margin-top:8px; }
.story-facts .k{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--maroon-3); }
.story-facts .v{ display:block; font-family:var(--font-display); font-weight:800; font-size:24px; text-transform:uppercase; margin-top:6px; }

/* process */
.proc-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; }
.hzx-step{ position:relative; padding:0 22px; }
.hzx-step:first-child{ padding-left:0; }
.hzx-step .k{ font-family:var(--font-mono); font-size:13px; letter-spacing:.2em; color:var(--maroon-3); }
.hzx-step .dot{ display:block; width:13px; height:13px; border-radius:50%; background:var(--maroon-3);
  margin:18px 0; box-shadow:0 0 0 6px color-mix(in oklab, var(--maroon) 30%, transparent); }
.hzx-step::after{ content:""; position:absolute; left:6.5px; top:calc(13px + 18px + 6.5px); width:calc(100% - 22px); height:1px;
  background:linear-gradient(90deg, var(--maroon-3), rgba(255,255,255,.12)); }
.hzx-step:last-child::after{ display:none; }
.hzx-step h3{ font-size:clamp(18px,1.5vw,24px); text-transform:none; letter-spacing:-0.01em; margin-bottom:10px; }
.hzx-step p{ font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.68); font-weight:500; }

/* lanes */
.lane-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.hzx-lane{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:18px;
  padding:clamp(20px,2vw,30px); display:flex; flex-direction:column; transition:transform .45s var(--ease), border-color .45s, background .45s; }
.hzx-lane:hover{ transform:translateY(-5px); border-color:var(--maroon-3); background:rgba(255,255,255,.08); }
.lane-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; }
.lane-top .mi{ color:var(--maroon-3); font-weight:700; }
.lane-top .com{ color:rgba(255,255,255,.6); }
.hzx-lane h3{ font-size:clamp(18px,1.5vw,23px); text-transform:none; letter-spacing:-0.01em; line-height:1.1; }
.hzx-lane p{ font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.68); font-weight:500; margin-top:12px; }
.hzx-lane .lane-line{ margin-top:auto; padding-top:20px; }
.hzx-lane .lane-line span{ display:block; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--maroon-3),transparent); }
.lane-cta{ background:linear-gradient(160deg, color-mix(in oklab,var(--maroon) 60%, transparent), rgba(0,0,0,.25)); border-color:color-mix(in oklab,var(--maroon-3) 40%, transparent); justify-content:center; }
.lane-cta p{ margin-bottom:22px; }
.lane-cta .btn{ align-self:flex-start; }

/* ---- progress chrome ---- */
.hzx-progress{ position:absolute; left:clamp(28px,6vw,110px); right:clamp(28px,6vw,110px); bottom:clamp(34px,5vh,54px); z-index:6; }
.hzx-prog-track{ height:2px; background:rgba(255,255,255,.16); border-radius:2px; overflow:hidden; }
.hzx-prog-track span{ display:block; height:100%; width:100%; background:var(--maroon-3); transform-origin:left; transform:scaleX(0); }
.hzx-prog-labels{ display:flex; justify-content:space-between; margin-top:12px; }
.hzx-prog-labels .lab{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.hzx-cue{ position:absolute; right:clamp(28px,6vw,110px); bottom:clamp(74px,11vh,108px); z-index:6;
  display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.7);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; transition:opacity .4s; }
.hzx-cue i{ width:30px; height:30px; border-radius:50%; border:1.5px solid rgba(255,255,255,.4); position:relative; }
.hzx-cue i::after{ content:""; position:absolute; top:50%; left:50%; width:7px; height:7px; border-top:1.5px solid #fff; border-right:1.5px solid #fff;
  transform:translate(-60%,-50%) rotate(45deg); animation:hzxnudge 1.6s var(--ease) infinite; }

/* ---- telematics HUD (bespoke detail: live reefer set-point readout) ----
   sits bottom-left, mirroring the bottom-right scroll cue, above the progress bar —
   an instrument cluster, and clear of the fixed nav up top */
.hzx-hud{ position:absolute; left:clamp(28px,6vw,110px); bottom:clamp(74px,11vh,108px); z-index:6;
  display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 12px;
  border:1px solid rgba(255,255,255,.10); border-radius:999px; background:rgba(14,7,8,.42);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.hzx-hud-dot{ position:relative; width:7px; height:7px; border-radius:50%; background:var(--maroon-3); flex:none; }
/* the ring pulses via transform+opacity only — compositor-friendly, no per-frame paint */
.hzx-hud-dot::after{ content:""; position:absolute; inset:-3px; border-radius:50%; border:1px solid var(--maroon-3);
  opacity:.6; animation:hudring 2.6s var(--ease) infinite; }
@keyframes hudring{ 0%{ transform:scale(.55); opacity:.6; } 70%{ transform:scale(2.3); opacity:0; } 100%{ transform:scale(2.3); opacity:0; } }
.hzx-hud-k{ color:rgba(255,255,255,.42); }
.hzx-hud-v{ color:rgba(255,255,255,.62); letter-spacing:.08em; }
.hzx-hud-v b{ color:var(--maroon-3); font-weight:700; font-variant-numeric:tabular-nums; }

/* ============================================================
   MOBILE — stack panels vertically (no scroll-jack under 721px)
   ============================================================ */
@media (max-width:720px){
  .hzx{ height:auto !important; }
  .hzx-sticky{ position:static; height:auto; }
  .hzx-track{ flex-direction:column; width:100%; transform:none !important; height:auto; }
  .hzx-panel{ flex:none; width:100%; height:auto; min-height:auto; padding:clamp(64px,12vh,96px) var(--pad); }
  .hzx-panel .panel-inner{ opacity:1 !important; }
  .hzx-panel .layer-fore,
  .hzx-panel .layer-mid,
  .hzx-panel .layer-back{ opacity:1 !important; transform:none !important; }
  .hzx-watermark{ display:none; }
  .svc-row{ grid-template-columns:1fr; }
  .num-row{ grid-template-columns:1fr 1fr; }
  .hzx-story{ flex-direction:column; align-items:stretch; gap:26px; }
  .hzx-story .panel-inner{ grid-template-columns:1fr; }
  .story-body{ grid-column:1; }
  /* 64/45 = 16/9 made 25% taller, to show more of the vertical footage */
  .story-vid{ position:relative; width:100%; height:auto; aspect-ratio:64/45; border-radius:16px; overflow:hidden; }
  /* same pillarbox crop as desktop: footage strip (~31% of the 3:2 frame) covers the box */
  .story-clip iframe{ width:325%; }
  .story-vid::after{ background:linear-gradient(180deg, transparent 55%, oklch(0.150 0.052 28 / .5) 100%), oklch(0.195 0.072 26.5 / .14); }
  .proc-row{ grid-template-columns:1fr; gap:8px; }
  .hzx-step{ padding:0 0 22px 26px; }
  .hzx-step::after{ left:6px; top:30px; width:1px; height:calc(100% - 22px); background:linear-gradient(180deg,var(--maroon-3),rgba(255,255,255,.12)); }
  .lane-row{ grid-template-columns:1fr; }
  .hzx-progress, .hzx-cue, .hzx-index, .hzx-hud{ display:none; }
}
/* tablet (721–1080): structure holds; just tighten spacing so columns don't crowd */
@media (max-width:1080px) and (min-width:721px){
  .svc-row{ grid-template-columns:repeat(3,1fr); gap:12px; }
  .lane-row{ grid-template-columns:repeat(2,1fr); }
  .hzx-step{ padding:0 14px; }
  .num-row .hzx-num{ padding:clamp(20px,2.4vw,34px); }
}
/* short viewports (landscape laptops/tablets): scale type + padding so a full panel's
   content always fits within 100vh rather than being clipped by overflow:hidden */
@media (min-width:721px) and (max-height:760px){
  .hzx-panel{ padding-top:clamp(52px,8vh,84px); padding-bottom:clamp(60px,9vh,104px); }
  .hzx-h1{ font-size:clamp(38px,5.6vw,78px); }
  .hzx-h2{ font-size:clamp(26px,3.4vw,48px); }
  .hzx-lead{ margin-top:16px; }
  .hzx-sub{ margin-top:14px; }
  .hzx-services .panel-inner, .hzx-numbers .panel-inner,
  .hzx-process .panel-inner, .hzx-lanes .panel-inner{ gap:clamp(14px,2.4vh,28px); }
  .svc-row{ gap:12px; }
  .hzx-svc{ padding:clamp(12px,1.4vw,18px); }
  .hzx-svc h3{ margin-bottom:6px; }
  .num-row .hzx-num{ padding:clamp(16px,2vh,28px); }
}

@media (prefers-reduced-motion: reduce){
  .hzx{ height:auto !important; }
  .hzx-sticky{ position:static; height:auto; }
  .hzx-track{ flex-direction:column; width:100%; transform:none !important; height:auto; }
  .hzx-panel{ flex:none; width:100%; height:auto; min-height:80vh; }
  .hzx-panel .panel-inner, .hzx-panel .layer-fore, .hzx-panel .layer-mid, .hzx-panel .layer-back{ opacity:1 !important; transform:none !important; }
  .hzx-progress, .hzx-cue, .hzx-hud{ display:none; }
}