/* ============ Freight scroll heroes (sea · air · road · rail) ============
   Design frame 1280×800. u = min(100vh/800, 100vw/716); 800 design px = 1 viewport height. */
body.freight{background:#e2dedd}
.freight main{background:#0a0b0c}
.track{position:relative;background:#0a0b0c;--u:min(calc(100vh / 800),calc(100vw / 716))}
.scene{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:#0a0b0c}
.scene video,.scene .scene__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene__tint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.02) 28%,rgba(0,0,0,.02) 72%,rgba(0,0,0,.12) 100%)}
.content{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.content a,.content button{pointer-events:auto}

/* intro */
.fx-intro{position:absolute;top:calc(940 / 8 * 1vh);left:50%;width:calc(1280 * var(--u));max-width:100vw;transform:translateX(-50%);text-align:center;display:flex;flex-direction:column;align-items:center}
.fx-eyebrow{font-family:var(--font-ui);font-weight:700;font-size:calc(7.4 * var(--u));letter-spacing:.304em;text-transform:uppercase;color:#F7F5EF;
  text-shadow:0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.55);margin-bottom:calc(14 * var(--u))}
.fx-head{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:calc(56 * var(--u));line-height:calc(62 * var(--u));color:#F7F5EF;letter-spacing:-.005em;
  text-shadow:0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(0,0,0,.5);margin:0}
.fx-head span{display:block;white-space:nowrap}

/* features */
.fx-feat{position:absolute;width:calc(300 * var(--u));display:flex;flex-direction:column;color:#F9F9F9}
.fx-feat--l{right:calc(50% + var(--off) * var(--u));text-align:right;align-items:flex-end}
.fx-feat--r{left:calc(50% + var(--off) * var(--u));text-align:left;align-items:flex-start}
.fx-feat--c{left:50%;transform:translateX(-50%);text-align:center;align-items:center}
.fx-row1{top:calc(1500 / 8 * 1vh);--off:78}
.fx-row2{top:calc(1759 / 8 * 1vh);--off:88}
.fx-row3{top:calc(2063 / 8 * 1vh)}
.fx-ico{width:calc(34 * var(--u));height:calc(34 * var(--u));margin-bottom:calc(30 * var(--u));color:#F9F9F9;filter:drop-shadow(0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0,0,0,.5))}
.fx-ico svg{width:100%;height:100%;display:block;overflow:visible}
.fx-t{font-family:var(--font-ui);font-weight:700;text-transform:uppercase;font-size:calc(19.6 * var(--u));line-height:calc(20 * var(--u));letter-spacing:.01em;margin:0 0 calc(12 * var(--u));
  text-shadow:0 calc(4 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.55)}
.fx-b{font-family:var(--font-ui);font-weight:400;font-size:calc(12.3 * var(--u));line-height:calc(15.4 * var(--u));color:rgba(249,249,249,.88);margin:0;
  text-shadow:0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.6)}
.fx-t span,.fx-b span{display:block;white-space:nowrap}

/* portrait */
@media (max-width:609px),(orientation:portrait){
  .track{--u:min(calc(100vw / 390),1.6px)}
  .content{display:flex;flex-direction:column;align-items:center;padding:112vh max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));box-sizing:border-box}
  .fx-intro,.fx-feat{position:relative;top:auto;left:auto;right:auto;transform:none;width:min(100%,calc(330 * var(--u)))}
  .fx-intro{width:100%}
  .fx-head{font-size:clamp(34px,calc(46 * var(--u)),72px);line-height:1.08}
  .fx-head span{white-space:normal}
  .fx-eyebrow{font-size:calc(9 * var(--u))}
  .fx-feat{text-align:center;align-items:center;margin-top:16vh}
  .fx-feat.fx-first{margin-top:24vh}
  .fx-t{font-size:calc(17 * var(--u));line-height:1.15}
  .fx-b{font-size:calc(13.5 * var(--u));line-height:1.45}
  .fx-t span,.fx-b span{display:inline;white-space:normal}
  .fx-t span::after,.fx-b span::after{content:" "}
}

/* mode dock (glass tabs) */
.dock{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:58;max-width:calc(100vw - 32px);transition:transform .6s var(--ease-out),opacity .4s}
.dock .gtabs a{gap:8px;padding:0 16px}
.dock .ico{width:18px;height:18px}
.dock.is-away{transform:translate(-50%,140%);opacity:0}
@media (max-width:480px){.dock .gtabs a{padding:0 12px;font-size:.8rem}.dock .gtabs a span{display:none}}

/* after the clouds: commitments (light) */
.trust{position:relative;margin-top:-34vh;padding-top:34vh;color:#141516;
  background:linear-gradient(180deg,rgba(226,222,221,0) 0,#e2dedd 34vh,#e2dedd 100%)}
.trust__in{max-width:1120px;margin:0 auto;padding:0 64px 140px}
.trust__head{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:end;padding-bottom:36px;border-bottom:1px solid rgba(20,21,22,.16)}
.trust__h{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,4.4vw,60px);line-height:1;letter-spacing:-.01em;margin:0}
.trust__h span{display:block}
.trust__h span:last-child{color:#8f8b8a}
.trust__note{font-size:13px;line-height:1.55;color:rgba(20,21,22,.7);margin:0}
.trust__row{display:grid;grid-template-columns:260px 1fr;gap:24px;padding:44px 0;border-bottom:1px solid rgba(20,21,22,.16)}
.trust__who b{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.trust__who span{display:block;font-size:12px;color:rgba(20,21,22,.6);margin-top:4px}
.trust__q{font-family:var(--font-ui);font-weight:400;font-size:clamp(17px,1.6vw,21px);line-height:1.42;max-width:680px;margin:0}
.trust__next{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-top:56px}
.trust__next .btn--glass{color:#141516;border-color:rgba(20,21,22,.2);background:rgba(255,255,255,.45)}
.nextmode{display:inline-flex;align-items:baseline;gap:18px;color:#141516}
.nextmode small{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(20,21,22,.55)}
.nextmode b{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(30px,4vw,56px);line-height:1;transition:color .3s}
.nextmode:hover b{color:#C25200}
.nextmode .ico{width:clamp(26px,3vw,40px);height:clamp(26px,3vw,40px);transition:transform .5s var(--ease-out)}
.nextmode:hover .ico{transform:translateX(8px)}
@media (max-width:609px),(orientation:portrait){
  .trust__in{padding:0 22px 110px}
  .trust__head{grid-template-columns:1fr;gap:18px}
  .trust__row{grid-template-columns:1fr;gap:14px}
}
.freight .ftr{margin-top:0}