/* =========================================================
   Visions Transport — industrial editorial
   ========================================================= */
:root {
  --ink: #0B0B0A;
  --ink-2: #131312;
  --ink-3: #1C1C1A;
  --bone: #EFECE5;
  --bone-2: #E4E0D6;
  --orange: #FF5A1F;
  --orange-2: #FF7440;
  --on-dark: #F4F2EC;
  --mute-d: #8E8B83;
  --mute-l: #66625A;
  --line-d: rgba(244, 242, 236, .12);
  --line-l: rgba(11, 11, 10, .12);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1320px;
  --gut: clamp(16px, 4vw, 40px);
  --hdr: 76px;
  --r: 18px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 8px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0; background: var(--ink); color: var(--on-dark);
  font: 400 1rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
::selection { background: var(--orange); color: var(--ink); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.mono { font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.label { color: var(--mute-d); margin-bottom: 1.5rem; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--orange); color: var(--ink); padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { top: 12px; }

/* ---------- Type ---------- */
.sec-title {
  font-family: var(--display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(2.2rem, 5.2vw, 4.6rem); line-height: .98; letter-spacing: -0.035em;
  text-wrap: balance;
}
.sec-sub { margin-top: 1.25rem; max-width: 46ch; font-size: 1.08rem; color: var(--mute-d); text-wrap: pretty; }
.sec-head { margin-bottom: clamp(48px, 7vw, 96px); }
.sec-head-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: end; }
.sec-head-row .sec-sub { margin: 0; }

/* split lines (JS) */
.split .sl { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.split .sl > span { display: block; will-change: transform; }

/* ---------- Buttons ---------- */
.btn {
  --bg: transparent; --fg: currentColor;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.4rem; border-radius: 999px; border: 1px solid transparent;
  background: var(--bg); color: var(--fg);
  font: 500 .95rem/1 var(--body); letter-spacing: -.005em; white-space: nowrap; cursor: pointer;
  overflow: hidden; isolation: isolate;
  transition: transform .5s var(--ease), background-color .3s, border-color .3s, color .3s;
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.97); transition-duration: .1s; }
/* fill sweep */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--sweep, rgba(255,255,255,.14));
  transform: translateY(101%); transition: transform .5s var(--ease);
}
.btn:hover::before { transform: none; }
.btn-sm { padding: .65rem 1.1rem; font-size: .88rem; }
.btn-lg { padding: 1.1rem 1.6rem; font-size: 1rem; }
.btn-xl { padding: 1.4rem 2.1rem; font-size: 1.15rem; }
.btn-block { width: 100%; }
.btn-accent { --bg: var(--orange); --fg: var(--ink); --sweep: #FF8A5C; font-weight: 600; }
.btn-glass { --bg: rgba(244,242,236,.08); --fg: var(--on-dark); border-color: rgba(244,242,236,.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn-glass:hover { border-color: rgba(244,242,236,.5); }
.btn-ghost { --fg: var(--on-dark); border-color: var(--line-d); }
.btn-dark { --bg: var(--ink); --fg: var(--on-dark); --sweep: #2A2A27; }
.magnetic { will-change: transform; }

/* ---------- Header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--hdr);
  transition: background-color .4s, border-color .4s, transform .5s var(--ease), backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.hdr.is-solid { background: rgba(11,11,10,.72); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-color: var(--line-d); }
.hdr.is-hidden { transform: translateY(-100%); }
.hdr-in { height: 100%; display: flex; align-items: center; gap: 2.5rem; }

.logo { display: inline-flex; align-items: center; gap: .65rem; color: var(--on-dark); }
.logo-mark { width: 32px; height: 32px; color: #1F1F1C; }
.logo-word { font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: 1.2rem; letter-spacing: -.01em; }
.logo-sub { font-family: var(--mono); font-size: .58rem; line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; color: var(--mute-d); padding-left: .65rem; border-left: 1px solid var(--line-d); }

.nav { display: flex; gap: .25rem; margin-right: auto; }
.nav a { position: relative; padding: .5rem .8rem; font-size: .92rem; color: rgba(244,242,236,.72); transition: color .25s; }
.nav a::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .3rem; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav a:hover { color: var(--on-dark); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.hdr-right { display: flex; align-items: center; gap: 1rem; }
.live { display: flex; align-items: center; gap: .6rem; padding: .45rem .8rem; border: 1px solid var(--line-d); border-radius: 999px; color: rgba(244,242,236,.8); }
.live-status { color: var(--mute-d); padding-left: .6rem; border-left: 1px solid var(--line-d); }
.live-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; flex: none; display: inline-block; }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #3DDC84; animation: ping 2s var(--ease) infinite; }
.live.is-off .live-dot { background: var(--mute-d); }
.live.is-off .live-dot::after { display: none; }
@keyframes ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }

.burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-d); background: rgba(244,242,236,.06); cursor: pointer; position: relative; }
.burger i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--on-dark); transition: transform .5s var(--ease), top .5s var(--ease); }
.burger i:first-child { top: 17px; } .burger i:last-child { top: 25px; }
.burger[aria-expanded="true"] i:first-child { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { top: 21px; transform: rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 90; background: var(--ink);
  padding: calc(var(--hdr) + 24px) var(--gut) calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-io); visibility: hidden;
}
.drawer.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.drawer-nav a { display: flex; align-items: baseline; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line-d); font-family: var(--display); font-weight: 800; font-stretch: 115%; font-size: clamp(2rem, 9vw, 3rem); letter-spacing: -.03em; line-height: 1; opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .7s var(--ease); }
.drawer-nav a .mono { color: var(--orange); }
.drawer.is-open .drawer-nav a { opacity: 1; transform: none; }
.drawer.is-open .drawer-nav a:nth-child(2) { transition-delay: .05s; }
.drawer.is-open .drawer-nav a:nth-child(3) { transition-delay: .1s; }
.drawer.is-open .drawer-nav a:nth-child(4) { transition-delay: .15s; }
.drawer.is-open .drawer-nav a:nth-child(5) { transition-delay: .2s; }
.drawer-foot { display: grid; gap: 1rem; text-align: center; }
.drawer-phone { font-family: var(--mono); color: var(--mute-d); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--hdr) + 48px) 0 96px; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -1; background: #111 url("../media/hero-poster.jpg") center/cover no-repeat; }
.hero-video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.hero-shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(11,11,10,.92) 0%, rgba(11,11,10,.7) 42%, rgba(11,11,10,.35) 100%),
  linear-gradient(0deg, rgba(11,11,10,1) 0%, rgba(11,11,10,0) 30%),
  linear-gradient(180deg, rgba(11,11,10,.6) 0%, rgba(11,11,10,0) 25%); }
.hero-grain { position: absolute; inset: -50%; opacity: .07; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(4) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(0,0)} }

.hero-grid { display: grid; grid-template-columns: 1.25fr .85fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-title { font-family: var(--display); font-weight: 900; font-stretch: 118%; font-size: clamp(3.1rem, 8.6vw, 8.2rem); line-height: .9; letter-spacing: -.045em; color: var(--on-dark); }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .05em; }
.hero-title .line > span { display: block; }
.hero-title em { font-style: normal; color: var(--orange); }
.hero-kicker { display: flex; align-items: center; gap: .6rem; font-weight: 500; letter-spacing: .06em; color: rgba(244,242,236,.75); margin-bottom: 1.6rem; line-height: 1; }
.tick { width: 22px; height: 1px; background: var(--orange); }
.hero-lead { margin-top: 1.8rem; max-width: 46ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: rgba(244,242,236,.78); text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.2rem; }

.hero-stats { display: flex; gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-d); max-width: 560px; }
.hero-stats dt { color: var(--mute-d); margin-bottom: .35rem; }
.hero-stats dd { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; letter-spacing: -.03em; }
.hero-stats small { font-size: .5em; color: var(--mute-d); margin-left: .15em; letter-spacing: 0; }
.blink { animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: .2; } }

.scroll-cue { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; justify-items: center; gap: .6rem; color: var(--mute-d); }
.scroll-cue i { width: 1px; height: 44px; background: linear-gradient(var(--orange), transparent); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--on-dark); animation: cue 2.2s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }

/* ---------- Quote form ---------- */
.quote { position: relative; }
.qform {
  position: relative; overflow: hidden;
  background: rgba(20,20,18,.62); border: 1px solid rgba(244,242,236,.14); border-radius: 24px;
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
  padding: clamp(22px, 2.4vw, 32px);
}
.qform-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.qform-step { color: var(--mute-d); flex: none; }
.qform-step span { color: var(--on-dark); }
.qform-bar { flex: 1; height: 2px; background: var(--line-d); border-radius: 2px; overflow: hidden; }
.qform-bar i { display: block; height: 100%; width: 50%; background: var(--orange); transition: width .7s var(--ease); }
.qform[data-at="2"] .qform-bar i { width: 100%; }

.qform-viewport { overflow: hidden; margin: 0 -4px; padding: 0 4px; }
.qform-track { display: flex; transition: transform .7s var(--ease); }
.qform[data-at="2"] .qform-track { transform: translateX(calc(-100% - 8px)); }
.qstep { flex: 0 0 100%; min-width: 0; border: 0; margin: 0 8px 0 0; padding: 0; transition: opacity .5s; }
.qform[data-at="1"] .qstep[data-step="2"], .qform[data-at="2"] .qstep[data-step="1"] { opacity: 0; pointer-events: none; }
.qform[data-at="1"] .qstep[data-step="2"] { visibility: hidden; transition: opacity .5s, visibility 0s .7s; }

.qtitle { font-family: var(--display); font-weight: 800; font-stretch: 110%; font-size: 1.55rem; line-height: 1.1; letter-spacing: -.025em; padding: 0; color: var(--on-dark); }
.qsub { margin-top: .4rem; font-size: .92rem; color: var(--mute-d); }
.qopts { display: grid; gap: .5rem; margin-top: 1.25rem; }
.qopt { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--line-d); border-radius: 14px; cursor: pointer; transition: border-color .3s, background-color .3s, transform .4s var(--ease); }
.qopt input { position: absolute; opacity: 0; pointer-events: none; }
.qopt span { flex: 1; display: grid; gap: .1rem; }
.qopt b { font-weight: 600; font-size: 1rem; }
.qopt small { font-size: .84rem; color: var(--mute-d); }
.qopt svg { width: 18px; height: 18px; fill: none; stroke: var(--mute-d); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease), stroke .3s; }
.qopt:hover { border-color: rgba(244,242,236,.35); background: rgba(244,242,236,.04); }
.qopt:hover svg { transform: translateX(4px); stroke: var(--on-dark); }
.qopt:active { transform: scale(.985); transition-duration: .1s; }
.qopt:has(input:checked) { border-color: var(--orange); background: rgba(255,90,31,.08); }
.qopt:has(input:checked) svg { stroke: var(--orange); }
.qopt:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }

.qback { background: none; border: 0; padding: 0; color: var(--mute-d); cursor: pointer; font-size: .92rem; }
.qback:hover { color: var(--on-dark); }
.qback [data-chosen] { color: var(--orange); }

.qfields { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1.25rem 0 1rem; }
.qf { position: relative; }
.qf-full { grid-column: 1 / -1; }
.qf input, .qf textarea {
  width: 100%; padding: 1.45rem 1rem .55rem; border-radius: 12px;
  background: rgba(244,242,236,.05); border: 1px solid var(--line-d); color: var(--on-dark);
  font: 400 1rem/1.3 var(--body); resize: none; transition: border-color .3s, background-color .3s;
}
.qf label { position: absolute; left: 1rem; top: 1.05rem; font-size: .95rem; color: var(--mute-d); pointer-events: none; transform-origin: left top; transition: transform .4s var(--ease), color .3s; }
.qf label em { font-style: normal; opacity: .7; }
.qf input:focus, .qf textarea:focus { outline: none; border-color: rgba(244,242,236,.45); background: rgba(244,242,236,.08); }
.qf input:focus + label, .qf input:not(:placeholder-shown) + label,
.qf textarea:focus + label, .qf textarea:not(:placeholder-shown) + label { transform: translateY(-.6rem) scale(.78); color: rgba(244,242,236,.7); }
.qf.is-bad input { border-color: #FF6B5B; }
.qf .err { display: block; font-size: .78rem; color: #FF8A7D; margin: .3rem 0 0 .2rem; }
.qf.is-bad { animation: shake .4s var(--ease); }
@keyframes shake { 20%,60% { transform: translateX(-4px); } 40%,80% { transform: translateX(4px); } }
.hp { position: absolute; left: -9999px; opacity: 0; }

.qdone { text-align: center; padding: 1.5rem 0 .5rem; }
.qdone svg { width: 64px; height: 64px; margin: 0 auto 1.2rem; fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.qdone circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .8s var(--ease) forwards; }
.qdone path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .5s .6s var(--ease) forwards; }
.qdone .qsub a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.qerr { margin-top: .8rem; font-size: .9rem; color: #FF8A7D; }
.qerr a { text-decoration: underline; }
.quote-foot { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 1rem; color: var(--mute-d); }

/* ---------- Marquee ---------- */
.marquee { background: var(--orange); color: var(--ink); overflow: hidden; padding: 1.1rem 0; border-block: 1px solid #E44B12; }
.marquee-track { display: flex; align-items: center; gap: 2.2rem; width: max-content; will-change: transform; }
.marquee span { font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: clamp(1.4rem, 3vw, 2.4rem); letter-spacing: -.02em; text-transform: uppercase; line-height: 1; }
.marquee b { font-size: 1.4rem; font-weight: 400; }

/* ---------- Intro ---------- */
.intro { background: var(--bone); color: var(--ink); padding-block: clamp(96px, 14vw, 200px); }
.intro .label { color: var(--mute-l); }
.intro-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; }
.intro-grid .label { grid-column: 1 / 3; }
.intro-text { grid-column: 3 / 13; font-family: var(--display); font-weight: 700; font-stretch: 105%; font-size: clamp(1.7rem, 3.6vw, 3.3rem); line-height: 1.1; letter-spacing: -.03em; text-wrap: pretty; }
.intro-text .w { opacity: .14; transition: opacity .2s; }
.no-js .intro-text .w, .reduced .intro-text .w { opacity: 1; }
.intro-fig { grid-column: 3 / 8; margin-top: clamp(48px, 7vw, 96px); aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--bone-2); }
.intro-fig img { width: 100%; height: 120%; object-fit: cover; }
.intro-for { grid-column: 9 / 13; align-self: end; display: grid; }
.intro-for li { padding: .9rem 0; border-bottom: 1px solid var(--line-l); font-family: var(--display); font-weight: 700; font-stretch: 110%; font-size: 1.15rem; letter-spacing: -.01em; display: flex; justify-content: space-between; transition: padding .5s var(--ease), color .3s; }
.intro-for li:not(.mono):hover { padding-left: .6rem; color: var(--orange); }
.intro-for li.mono { font-family: var(--mono); font-size: .75rem; font-weight: 400; color: var(--mute-l); border-color: var(--ink); }

/* ---------- Services ---------- */
.services { position: relative; padding-block: clamp(96px, 13vw, 180px); background: var(--ink); }
.svc-list { border-top: 1px solid var(--line-d); }
.svc {
  position: relative; display: grid; grid-template-columns: 80px 1.1fr 1fr 64px; gap: 1.5rem; align-items: center;
  padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--line-d); cursor: default;
}
.svc::before { content: ""; position: absolute; inset: 0 calc(var(--gut) * -1); background: var(--ink-3); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); z-index: 0; }
.svc > * { position: relative; z-index: 1; }
.svc-n { color: var(--mute-d); transition: color .3s; }
.svc h3 { font-family: var(--display); font-weight: 800; font-stretch: 115%; font-size: clamp(1.6rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -.035em; transition: transform .6s var(--ease), color .3s; }
.svc p { color: var(--mute-d); max-width: 40ch; transition: color .3s; }
.svc-thumb { display: none; }
.svc-arrow { justify-self: end; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-d); display: grid; place-items: center; transition: background-color .4s, border-color .4s, transform .6s var(--ease); }
.svc-arrow svg { width: 20px; height: 20px; fill: none; stroke: var(--on-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--ease), stroke .3s; }
@media (hover: hover) {
  .svc:hover::before { transform: scaleY(1); }
  .svc:hover .svc-n { color: var(--orange); }
  .svc:hover h3 { transform: translateX(14px); }
  .svc:hover p { color: rgba(244,242,236,.85); }
  .svc:hover .svc-arrow { background: var(--orange); border-color: var(--orange); transform: rotate(45deg); }
  .svc:hover .svc-arrow svg { stroke: var(--ink); }
}

.svc-preview { position: fixed; left: 0; top: 0; z-index: 5; width: 340px; aspect-ratio: 4 / 5; pointer-events: none; border-radius: 16px; overflow: hidden; opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.svc-preview-in { position: relative; width: 100%; height: 100%; }
.svc-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transition: clip-path .7s var(--ease); }
.svc-preview img.on { clip-path: inset(0 0 0 0); }

/* ---------- Network ---------- */
.network { background: var(--ink-2); padding-block: clamp(96px, 13vw, 180px); border-top: 1px solid var(--line-d); }
.net-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.regions { margin-top: 2.5rem; border-top: 1px solid var(--line-d); }
.region { width: 100%; display: grid; grid-template-columns: 44px 1fr; column-gap: 1rem; text-align: left; padding: 1.2rem 0; background: none; border: 0; border-bottom: 1px solid var(--line-d); cursor: pointer; font-family: var(--display); font-weight: 700; font-stretch: 110%; font-size: 1.3rem; letter-spacing: -.02em; color: var(--mute-d); transition: color .4s; position: relative; }
.region .mono { grid-row: span 2; align-self: start; padding-top: .45rem; transition: color .4s; }
.region small { grid-column: 2; display: grid; grid-template-rows: 0fr; overflow: hidden; font-family: var(--body); font-weight: 400; font-stretch: 100%; font-size: .92rem; letter-spacing: 0; color: var(--mute-d); transition: grid-template-rows .6s var(--ease), margin .6s var(--ease), opacity .4s; opacity: 0; max-height: 0; }
.region::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; }
.region:hover { color: rgba(244,242,236,.85); }
.region.is-active { color: var(--on-dark); }
.region.is-active .mono { color: var(--orange); }
.region.is-active small { opacity: 1; max-height: 6em; margin-top: .4rem; }
.region.is-active::after { animation: regionbar 4s linear forwards; }
.regions.is-paused .region.is-active::after { animation: none; transform: scaleX(1); }
@keyframes regionbar { to { transform: scaleX(1); } }

.net-map { position: relative; }
.map { width: 100%; height: auto; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line-d); background: rgba(244,242,236,.015); color: rgba(244,242,236,.09); }
.map-bay { fill: rgba(255,90,31,.04); stroke: rgba(244,242,236,.22); stroke-width: 1; stroke-dasharray: 3 4; }
.map-water { fill: rgba(244,242,236,.22); font-size: 9px; letter-spacing: .2em; }
.route { fill: none; stroke: rgba(244,242,236,.12); stroke-width: 1.2; transition: stroke .6s, stroke-width .6s; }
.route.on { stroke: var(--orange); stroke-width: 1.6; stroke-dasharray: 5 6; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -22; } }
.node circle { fill: var(--ink-2); stroke: rgba(244,242,236,.4); stroke-width: 1.2; transition: fill .5s, stroke .5s, r .5s var(--ease); }
.node text { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; fill: rgba(244,242,236,.0); text-transform: uppercase; transition: fill .5s; }
.node.on circle { fill: var(--orange); stroke: var(--orange); r: 5.5; }
.node.on text { fill: rgba(244,242,236,.9); }
.node.hub circle { fill: var(--on-dark); stroke: var(--on-dark); r: 7; }
.node.hub text { fill: var(--on-dark); font-weight: 500; }
.hub-pulse { fill: none; stroke: var(--on-dark); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: hubpulse 2.6s var(--ease) infinite; }
@keyframes hubpulse { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(3); opacity: 0; } }
.mtruck { fill: var(--orange); }
.mtruck-glow { fill: url(#glow); }
.map-legend { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.25rem; color: var(--mute-d); }
.map-legend span { display: inline-flex; align-items: center; gap: .5rem; }
.map-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lg-hub { background: var(--on-dark); } .lg-node { border: 1px solid rgba(244,242,236,.5); } .lg-truck { background: var(--orange); box-shadow: 0 0 10px var(--orange); }

/* ---------- Why ---------- */
.why { background: var(--bone); color: var(--ink); padding-block: clamp(96px, 13vw, 180px); }
.why .label { color: var(--mute-l); }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.why-card { position: relative; padding: 2rem 1.6rem 1.8rem; min-height: 340px; border-radius: var(--r); background: #F7F5F0; border: 1px solid var(--line-l); display: flex; flex-direction: column; overflow: hidden; transition: transform .6s var(--ease), background-color .5s, color .5s, border-color .5s; }
.why-card .mono { color: var(--orange); }
.why-card h3 { margin-top: auto; font-family: var(--display); font-weight: 800; font-stretch: 110%; font-size: 1.45rem; line-height: 1.05; letter-spacing: -.025em; }
.why-card p { margin-top: .9rem; font-size: .95rem; color: var(--mute-l); transition: color .5s; }
@media (hover: hover) {
  .why-card:hover { transform: translateY(-6px); background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
  .why-card:hover p { color: var(--mute-d); }
}

/* ---------- Fleet ---------- */
.fleet { background: var(--bone-2); color: var(--ink); padding-block: clamp(96px, 13vw, 180px); overflow: hidden; }
.fleet .label { color: var(--mute-l); }
.fleet .sec-sub { color: var(--mute-l); }
.road { position: relative; height: clamp(220px, 34vw, 420px); margin-bottom: clamp(48px, 6vw, 80px); }
.road::before { content: ""; position: absolute; left: 0; right: 0; bottom: 6%; height: 1px; background: rgba(11,11,10,.25); }
.road-lines { position: absolute; left: 0; right: 0; bottom: 2%; height: 3px; background: repeating-linear-gradient(90deg, var(--ink) 0 48px, transparent 48px 96px); opacity: .5; }
.truck { position: absolute; bottom: 0; left: 50%; width: min(820px, 92vw); transform: translateX(-50%); will-change: transform; }
.specs { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--ink); }
.specs div { padding: 1.4rem 1rem 0 0; }
.specs div + div { padding-left: 1rem; border-left: 1px solid var(--line-l); }
.specs dt { color: var(--mute-l); }
.specs dd { margin-top: .6rem; font-family: var(--display); font-weight: 800; font-stretch: 110%; font-size: clamp(1.3rem, 2.2vw, 2rem); letter-spacing: -.03em; line-height: 1; }

/* ---------- Process ---------- */
.process { background: var(--ink); padding-block: clamp(96px, 13vw, 180px); }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 64px); }
.steps-line { position: absolute; left: 0; right: 0; top: 28px; height: 1px; background: var(--line-d); z-index: 0; }
.steps-line i { position: absolute; inset: 0; background: var(--orange); transform: scaleX(var(--p, 0)); transform-origin: left; }
.step { position: relative; z-index: 1; }
.step-dot { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); border: 1px solid var(--line-d); margin-bottom: 2rem; transition: background-color .5s, border-color .5s, color .5s; }
.step.on .step-dot { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.step h3 { font-family: var(--display); font-weight: 800; font-stretch: 110%; font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -.03em; line-height: 1; }
.step p { margin-top: 1rem; color: var(--mute-d); max-width: 34ch; }

/* ---------- Band ---------- */
.band { position: relative; min-height: 90vh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.band-media { position: absolute; inset: -12% 0; z-index: -1; background: #111; }
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11,11,10,.85), rgba(11,11,10,.15) 60%); }
.band-in { padding-block: clamp(64px, 10vw, 140px); }
.band-quote { font-family: var(--display); font-weight: 900; font-stretch: 120%; font-size: clamp(2.8rem, 9vw, 8.5rem); line-height: .98; letter-spacing: -.045em; }
.band-quote em { font-style: normal; color: var(--orange); }

/* ---------- FAQ ---------- */
.faq { background: var(--bone); color: var(--ink); padding-block: clamp(96px, 13vw, 180px); }
.faq .label { color: var(--mute-l); }
.faq .sec-sub { color: var(--mute-l); }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq-grid > header { position: sticky; top: calc(var(--hdr) + 32px); }
.ulink { color: var(--ink); background: linear-gradient(var(--orange), var(--orange)) 0 100% / 100% 2px no-repeat; transition: background-size .4s var(--ease); padding-bottom: 1px; }
.ulink:hover { background-size: 100% 100%; }
.acc { border-top: 1px solid var(--ink); }
.acc details { border-bottom: 1px solid var(--line-l); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.6rem 0; font-family: var(--display); font-weight: 700; font-stretch: 105%; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.25; letter-spacing: -.015em; transition: color .3s; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: #3A3833; }
.acc summary i { flex: none; position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-l); transition: background-color .4s, border-color .4s, transform .6s var(--ease); }
.acc summary i::before, .acc summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .6s var(--ease), background-color .3s; }
.acc summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc details[open] summary i { background: var(--ink); border-color: var(--ink); transform: rotate(180deg); }
.acc details[open] summary i::before, .acc details[open] summary i::after { background: var(--bone); }
.acc details[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc-body { overflow: hidden; }
.acc-body p { padding: 0 3.5rem 1.8rem 0; color: var(--mute-l); max-width: 62ch; }

/* ---------- CTA ---------- */
.cta { background: var(--orange); color: var(--ink); padding-block: clamp(96px, 12vw, 170px); overflow: hidden; }
.cta .label { color: rgba(11,11,10,.6); }
.cta-title { font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: clamp(3.4rem, 11vw, 11rem); line-height: .86; letter-spacing: -.05em; text-transform: uppercase; }
.cta-title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.cta-title .line > span { display: block; }
.cta-row { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; margin-top: clamp(40px, 6vw, 72px); padding-top: 2rem; border-top: 1px solid rgba(11,11,10,.25); }
.cta-row > p { font-size: 1.2rem; line-height: 1.4; }
.cta-actions { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta-phone { display: grid; font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 1.6rem; letter-spacing: -.02em; line-height: 1.1; }
.cta-phone .mono { font-weight: 400; color: rgba(11,11,10,.6); }

/* ---------- Footer ---------- */
.ftr { background: var(--ink); padding-top: clamp(64px, 8vw, 110px); overflow: hidden; }
.ftr-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.ftr-tag { font-family: var(--display); font-weight: 700; font-stretch: 105%; font-size: 1.4rem; line-height: 1.2; letter-spacing: -.02em; max-width: 26ch; }
.ftr ul { display: grid; gap: .5rem; }
.ftr ul a, .ftr address a { position: relative; color: rgba(244,242,236,.8); transition: color .3s; }
.ftr ul a:hover, .ftr address a:hover { color: var(--orange); }
.ftr address { color: var(--mute-d); line-height: 1.9; }
.ftr-word { font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: 21.5vw; line-height: .78; letter-spacing: -.055em; text-align: center; margin-top: clamp(48px, 7vw, 96px); color: var(--ink-3); user-select: none; white-space: nowrap; }
.ftr-base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.4rem; border-top: 1px solid var(--line-d); color: var(--mute-d); }
.ftr-base a:hover { color: var(--on-dark); }

.mbar { display: none; }

/* ---------- Initial states for JS-driven reveals ---------- */
.js .fade-up { opacity: 0; transform: translateY(24px); }
.js .hero-title .line > span, .js .cta-title .line > span { transform: translateY(105%); }
.js .hero-kicker { opacity: 0; }
.js .quote { opacity: 0; transform: translateY(32px); }
.js .reveal-clip { clip-path: inset(100% 0 0 0); }
.reduced .fade-up, .reduced .quote, .reduced .hero-kicker { opacity: 1 !important; transform: none !important; }
.reduced .hero-title .line > span, .reduced .cta-title .line > span { transform: none !important; }
.reduced .reveal-clip { clip-path: none !important; }

@media (prefers-reduced-motion: reduce) {
  .hero-grain, .live-dot::after, .blink, .scroll-cue i::after, .route.on, .hub-pulse { animation: none !important; }
  .hero-video { display: none; }
  * { transition-duration: .01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .qform, .hdr.is-solid { background: var(--ink-2); backdrop-filter: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav { display: none; }
  .hdr-in { justify-content: space-between; }
  .burger { display: block; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .specs { grid-template-columns: repeat(3, 1fr); }
  .specs div:nth-child(4) { border-left: 0; padding-left: 0; }
  .specs div { padding-bottom: 1.4rem; }
}
@media (max-width: 980px) {
  .hero { min-height: auto; padding-top: calc(var(--hdr) + 40px); }
  .hero-grid, .net-grid, .faq-grid, .sec-head-row { grid-template-columns: 1fr; }
  .faq-grid > header { position: static; }
  .scroll-cue { display: none; }
  .intro-grid .label, .intro-text, .intro-fig, .intro-for { grid-column: 1 / -1; }
  .intro-fig { margin-top: 2rem; }
  .svc { grid-template-columns: 48px 1fr 52px; }
  .svc p { grid-column: 2; grid-row: 2; }
  .svc-arrow { grid-column: 3; grid-row: 1 / span 2; }
  .svc-preview { display: none; }
  .steps { grid-template-columns: 1fr; }
  .steps-line { left: 28px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .steps-line i { transform: scaleY(var(--p, 0)); transform-origin: top; }
  .step { display: grid; grid-template-columns: 56px 1fr; column-gap: 1.25rem; }
  .step-dot { grid-row: span 2; margin-bottom: 0; }
  .step p { margin-top: .6rem; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .ftr-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  :root { --hdr: 64px; }
  .live, .hdr-right > .btn { display: none; }
  .logo-sub { display: none; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-stats { gap: 1.25rem; justify-content: space-between; }
  .qfields { grid-template-columns: 1fr; }
  .svc { grid-template-columns: 1fr 44px; gap: .8rem 1rem; }
  .svc-n { grid-column: 1; }
  .svc h3 { grid-column: 1; }
  .svc p { grid-column: 1 / -1; grid-row: auto; }
  .svc-arrow { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; }
  .svc-thumb { display: block; grid-column: 1 / -1; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; }
  .why-grid { grid-template-columns: 1fr; }
  .why-card { min-height: 240px; }
  .specs { grid-template-columns: 1fr 1fr; }
  .specs div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .specs div:nth-child(4) { border-left: 1px solid var(--line-l); padding-left: 1rem; }
  .acc-body p { padding-right: 0; }
  .cta-actions { width: 100%; }
  .cta-actions .btn { flex: 1; }
  .ftr-grid { grid-template-columns: 1fr; }
  .band { min-height: 70vh; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .mbar {
    display: grid; grid-template-columns: 1fr 1.6fr; gap: .6rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    padding: .7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(11,11,10,.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--line-d);
    transform: translateY(110%); transition: transform .6s var(--ease);
  }
  .mbar.show { transform: none; }
}

/* grid children must be allowed to shrink below their content width */
.hero-grid > *, .net-grid > *, .faq-grid > *, .intro-grid > * { min-width: 0; }
@media (max-width: 640px) {
  .hero-kicker { font-size: .66rem; letter-spacing: .03em; }
  .hero-shade { background: linear-gradient(0deg, rgba(11,11,10,1) 0%, rgba(11,11,10,.75) 45%, rgba(11,11,10,.55) 100%); }
}