@font-face{font-family:'Oswald';font-weight:700;font-display:swap;src:url(fonts/oswald-700.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-weight:500;font-display:swap;src:url(fonts/oswald-500.woff2) format('woff2')}

.freight{--hl:#dccbaa;--stage-w:clamp(300px,30vw,390px);position:relative;margin:8px 0 0;padding:58px 0 56px;
  display:grid;grid-template-columns:1fr var(--stage-w) 1fr;grid-template-rows:auto 1fr;column-gap:clamp(28px,4.5vw,72px);
  background:radial-gradient(ellipse 55% 60% at 50% 45%,rgb(223 164 97 / .06),transparent 70%)}

/* the real overhead clip: whole frame at its own shape, never cropped */
.fx-stage{grid-column:2;grid-row:2;position:relative;z-index:1;width:100%;aspect-ratio:var(--vid-ratio,720/1288);align-self:start;margin-top:calc(-.95 * clamp(58px,7.4vw,104px));
  background:#141412;box-shadow:0 30px 80px rgb(0 0 0 / .45)}
.fx-vid{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.fx-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgb(20 20 18 / .86) 0%,rgb(20 20 18 / .5) 24%,transparent 44%,transparent 80%,rgb(32 32 29 / .92) 100%)}

.fx-title{grid-column:1 / -1;grid-row:1;position:relative;z-index:2;text-align:center}
.fx-eyebrow{margin:0 0 18px;font:500 12px/1 'Oswald',sans-serif;letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;
  color:var(--accent);text-shadow:0 1px 3px rgb(0 0 0 / .6)}
.freight .fx-headline{margin:0;font:700 clamp(58px,7.4vw,104px)/.92 'Oswald',sans-serif;letter-spacing:-.012em;word-spacing:.04em;
  text-transform:uppercase;color:var(--hl);text-shadow:0 12px 34px rgb(0 0 0 / .7)}
.fx-headline .hl{display:block;white-space:nowrap}

.fx-feature{grid-row:2;align-self:end;position:relative;max-width:330px;margin-bottom:70px}
.f-left{grid-column:1;justify-self:end;text-align:right}
.f-right{grid-column:3;justify-self:start;text-align:left}
.fx-icon{display:block;width:35px;height:38px;margin-bottom:18px}
.f-left .fx-icon{margin-left:auto;margin-right:-4px}.f-right .fx-icon{margin-right:auto;margin-left:-3px}
.freight .fx-feature h3{margin:0 0 12px;font:700 22px/1.06 'Oswald',sans-serif;letter-spacing:.01em;text-transform:uppercase;color:var(--hl)}
.fx-feature p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.fx-links{display:flex;flex-direction:column;gap:8px;margin-top:16px!important}
.f-left .fx-links{align-items:flex-end}.f-right .fx-links{align-items:flex-start}
.fx-links a,.fx-links button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;background:none;border:0;
  border-bottom:1px solid var(--line);font:500 15px/1 'DM Sans',sans-serif;color:var(--accent)}
.fx-links a:hover,.fx-links button:hover{color:var(--focus);border-bottom-color:var(--accent)}
/* credentials: quiet, inside the shipping block, where a shipper vetting a carrier looks for them */
.fx-cred{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px 16px;margin-top:20px!important;padding-top:12px;border-top:1px solid var(--line);
  font:500 11px/1.2 'Oswald',sans-serif!important;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)!important}
.freight+.info-door{border-top:1px solid var(--line)}

/* ---- entrance: one sequence when the section is reached, then still ---- */
@media (prefers-reduced-motion:no-preference){
  .freight.fx-ready:not(.fx-in) :is(.fx-stage,.fx-eyebrow,.hl,.fx-feature){opacity:0}
  .freight.fx-in .fx-stage{animation:fxWipe 1.2s cubic-bezier(.16,1,.3,1) both}
  .freight.fx-in .fx-eyebrow{animation:fxRise .55s cubic-bezier(.33,.9,.35,1) .2s both}
  .freight.fx-in .hl{animation:fxLine .9s cubic-bezier(.16,1,.3,1) both}
  .freight.fx-in .hl1{animation-delay:.32s}.freight.fx-in .hl2{animation-delay:.41s}
  .freight.fx-in .hl3{animation-delay:.5s}.freight.fx-in .hl4{animation-delay:.59s}
  .freight.fx-in .f-left{animation:fxBlockL .75s cubic-bezier(.16,1,.3,1) .95s both}
  .freight.fx-in .f-right{animation:fxBlockR .75s cubic-bezier(.16,1,.3,1) 1.03s both}
}
@keyframes fxWipe{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes fxRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fxLine{0%{opacity:0;transform:translateY(.26em);clip-path:inset(100% -30% 0% -30%)}35%{opacity:1}
  90%{clip-path:inset(0% -30% -100% -30%)}100%{opacity:1;transform:none;clip-path:inset(-80% -30% -100% -30%)}}
@keyframes fxBlockL{from{opacity:0;transform:translate(-12px,8px)}to{opacity:1;transform:none}}
@keyframes fxBlockR{from{opacity:0;transform:translate(12px,8px)}to{opacity:1;transform:none}}

/* ---- phone: the clip runs edge to edge with the headline over its top; the two blocks follow, still mirrored ---- */
@media (max-width:700px){
  .freight{grid-template-columns:100%;grid-template-rows:auto auto auto auto;padding:0 0 44px;column-gap:0;background:none}
  .fx-stage{grid-column:1;grid-row:2;width:auto;margin:calc(-.95 * clamp(46px,15vw,66px)) -20px 0;box-shadow:none}
  .fx-title{grid-column:1;grid-row:1;padding-top:40px}
  .freight .fx-headline{font-size:clamp(46px,15vw,66px)}
  .fx-eyebrow{font-size:11px;margin-bottom:14px}
  .fx-feature{grid-row:auto;max-width:none;width:100%;margin:34px 0 0}
  .f-left{grid-column:1;grid-row:3}.f-right{grid-column:1;grid-row:4}
  .fx-icon{width:31px;height:34px;margin-bottom:14px}
  .freight .fx-feature h3{font-size:20px}
  .fx-feature p{font-size:14px}
}

/* realistic highway film (Kling from a photoreal still of her approved trailer), whole frame at its own shape */
#heroVid{aspect-ratio:1280/716;object-fit:contain}