/* V4: one cargo studio, then an expansive European road experience. */

/* Keep the model in view while choosing the service beside it. */
.cinematic .service-lab {
  display:grid;
  grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);
  align-items:start;
  gap:26px;
  min-width:0;
}
.cinematic .service-viewer {
  --cargo-fill:1;
  position:sticky;
  top:110px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto auto auto;
  align-self:start;
  height:min(690px,calc(100svh - 132px));
  min-height:560px;
  min-width:0;
  overflow:hidden;
  isolation:isolate;
  color:#eef4f3;
  background:radial-gradient(ellipse at 52% 40%,#173e64 0%,#102b45 37%,#0a1827 72%);
  border:1px solid #425f7359;
  box-shadow:0 24px 50px #10233416;
}
.cinematic .service-viewer::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.32;
  background-image:linear-gradient(#89b2d30c 1px,transparent 1px),linear-gradient(90deg,#89b2d30c 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(transparent,#000 24%,#000 70%,transparent);
}
.cinematic .service-viewer[data-status=unavailable] {height:auto;min-height:0;grid-template-rows:auto auto auto auto auto}
.service-viewer[data-status=unavailable] .cargo-tabs {margin-top:28px}
.service-viewer-top {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-width:0;
  padding:23px 25px 0;
}
.cargo-live-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#c5ddeb;
  font:500 8px/1.5 var(--body);
  letter-spacing:.15em;
}
.cargo-live-badge::before {
  content:'';
  flex:none;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#65a9ff;
  box-shadow:0 0 12px #458cff8c;
}
.cargo-view-index {color:#819db2;font:400 8px/1.5 var(--body);letter-spacing:.1em;white-space:nowrap}
#service-canvas {display:block;width:100%;height:100%;min-width:0;min-height:0;outline:none;touch-action:pan-y}
.cargo-tabs {
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin:0 24px;
}
.cargo-tabs>button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  min-height:49px;
  padding:8px 15px;
  border:1px solid #7997ac4a;
  color:#b8d1e2;
  background:#09172580;
  font:700 italic 29px/1 var(--display);
  letter-spacing:.01em;
  transition:background .2s,color .2s,border-color .2s;
}
.cargo-tabs>button>span {font:500 8px/1 var(--body);color:inherit;opacity:.64}
.cargo-tabs>button:hover {color:#f4f5ec;background:#173c60;border-color:#6e9cbe}
.cargo-tabs>button[aria-pressed=true] {color:#0a1b2a;background:#ff854f;border-color:#ff854f}
.cargo-tabs>button:focus-visible {outline:2px solid #e6f1fa;outline-offset:3px}
.cargo-current {min-width:0;padding:22px 25px 18px}
#cargo-service-tag {display:block;color:#f0a780;font:500 7px/1.6 var(--body);letter-spacing:.13em}
#cargo-service-title {display:block;margin-top:7px;color:#f1f4ee;font:500 clamp(22px,2.1vw,31px)/1.15 var(--heading);letter-spacing:-.045em}
#cargo-service-description {margin-top:9px;max-width:470px;color:#a9c1d1;font:400 11px/1.75 var(--body)}
.cargo-meter {height:2px;margin-inline:25px;background:#47637b66;overflow:hidden}
.cargo-meter>i {display:block;width:100%;height:100%;background:linear-gradient(90deg,#2a7ff3,#75acff);transform:scaleX(var(--cargo-fill,1));transform-origin:left;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.cargo-view-footer {display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 25px 18px;min-width:0}
.cargo-dimensions {color:#d0dee5;font:500 11px/1.5 var(--body);white-space:nowrap}
.cargo-dimensions>span {margin-left:6px;color:#829eaf;font-size:9px;font-weight:400}
.cargo-view-note {max-width:150px;text-align:right;color:#8ba5b7;font:400 8px/1.6 var(--body)}
.service-lab-controls {min-width:0}
.cinematic .service-lab .service-list.service-cards {display:grid;grid-template-columns:minmax(0,1fr);gap:15px;min-width:0}

/* Compact, consistently readable service cards; selection updates the studio. */
.cinematic .services .service-card,
.cinematic .services .service-card:is(:hover,:focus-visible,:focus-within) {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  min-width:0;
  min-height:0;
  height:auto;
  padding:23px 25px 21px;
  color:#162e3e;
  background:#f5f6ef;
  border:1px solid #b8c7c9;
  transform:none;
  box-shadow:none;
  transition:background .25s,border-color .25s,box-shadow .25s;
}
.cinematic .services .service-card:is(:hover,:focus-within) {background:#fffef7;border-color:#6f8a9c;box-shadow:0 8px 23px #162d4010}
.cinematic .services .service-card.is-active,
.cinematic .services .service-card.is-active:is(:hover,:focus-within) {background:#fffef7;border-color:#ed7546;box-shadow:inset 3px 0 0 #ed7546}
.cinematic .services .service-card::before,
.cinematic .services .service-card:is(:hover,:focus-visible)::before {height:2px;background:#2d79cb;transform:scaleX(0)}
.cinematic .services .service-card.is-active::before {transform:scaleX(1)}
.cinematic .services .service-card .service-card-top {min-height:64px;justify-content:flex-start;align-items:flex-start;gap:20px;padding-right:125px}
.cinematic .services .service-card .service-code,
.cinematic .services .service-card:is(:hover,:focus-visible,:focus-within) .service-code {font:700 italic 73px/.86 var(--display);letter-spacing:-.025em;color:#173a51}
.cinematic .services .service-card.is-active .service-code {color:#1a69bd}
.cinematic .services .service-card .service-number {padding-top:3px;font-size:8px;letter-spacing:.08em;color:#7a8c95}
.cinematic .services .service-card .service-visual {position:absolute;right:22px;top:22px;width:130px;height:77px;min-width:0;padding:0;margin:0;pointer-events:none}
.cinematic .services .service-card .load-diagram {width:100%;height:100%;object-fit:contain;overflow:visible}
.cinematic .services .service-card .service-micro,
.cinematic .services .service-card:is(:hover,:focus-visible,:focus-within) .service-micro {min-height:0;margin:12px 0 12px;color:#92553c;font:600 7px/1.6 var(--body);letter-spacing:.12em}
.cinematic .services .service-card .service-copy {flex:initial;gap:9px;min-width:0}
.cinematic .services .service-card .service-copy strong {min-height:0;max-width:none;color:#183143;font:500 clamp(20px,1.85vw,25px)/1.17 var(--heading);letter-spacing:-.045em}
.cinematic .services .service-card .service-copy>span,
.cinematic .services .service-card:is(:hover,:focus-visible,:focus-within) .service-copy>span {max-width:none;color:#526976;font:400 11px/1.8 var(--body)}
.service-features {display:flex;flex-wrap:wrap;gap:6px;margin-top:17px;min-width:0}
.service-features>span {display:inline-block;max-width:100%;padding:4px 7px;border:1px solid #cbd5d4;background:#e9efeb70;color:#4b6676;font:500 8px/1.5 var(--body)}
.cinematic .services .service-card .service-card-bottom {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;margin-top:19px;padding-top:15px;border-top:1px solid #c4cfce;font-size:10px}
.service-select {display:inline-flex;align-items:center;justify-content:space-between;gap:19px;min-height:40px;padding:10px 12px;background:#193b52;color:#f4f6ed;font:500 10px/1.4 var(--body);border:1px solid #193b52;transition:background .2s,color .2s,border-color .2s}
.service-select:hover {background:#215d90;border-color:#215d90}
.service-select[aria-pressed=true] {background:#ff854f;border-color:#ff854f;color:#142c3b}
.service-select>span:last-child {font-size:17px;line-height:1}
.service-detail-button {display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:5px 0;background:transparent;color:#2c4e63;font:500 10px/1.4 var(--body);border-bottom:1px solid #809aab66;transition:color .2s,border-color .2s}
.service-detail-button>span:last-child {font-size:19px;line-height:1;color:#4c7490}
.service-detail-button:hover {color:#075b9e;border-bottom-color:#075b9e}
.cinematic .services .service-card:is(:hover,:focus-visible,:focus-within) .diagram-outline {stroke:#617c8b}
.cinematic .services .service-card:is(:hover,:focus-visible,:focus-within) .diagram-chassis {stroke:#385c74}
.cinematic .services .service-card:is(:hover,:focus-visible,:focus-within) .diagram-wheels circle {fill:#f8faf4;stroke:#385c74}
.cinematic .services .service-card:is(:hover,:focus-visible,:focus-within) .diagram-road {stroke:#aab9bc}
.cinematic .services .service-card:is(:hover,:focus-visible,:focus-within) .diagram-road-dashes {stroke:#8eaaad}

/* A wide, quiet stage for the map; country choices stay above the experience. */
.cinematic .routes {padding-block:96px 78px;background:#081522;overflow:visible}
.cinematic .routes .route-layout {display:block;width:min(1440px,calc(100% - 96px));min-width:0}
.cinematic .route-content {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end;gap:60px;min-width:0}
.cinematic .route-content>div {min-width:0}
.cinematic .route-content h2 {margin-top:27px;font-size:clamp(43px,5.3vw,77px);line-height:1.02;letter-spacing:-.065em;color:#eff3ed}
.route-introduction {padding-bottom:5px;max-width:390px;justify-self:end}
.cinematic .route-introduction .route-description {max-width:none;margin:0;color:#b1c5d4;font-size:13px;line-height:1.85}
.route-interaction-note {display:block;margin-top:25px;font:500 8px/1.6 var(--body);letter-spacing:.14em;color:#83a2b9}
.cinematic .routes .country-list {position:sticky;top:76px;z-index:21;display:flex;flex-wrap:nowrap;align-items:stretch;gap:7px;width:100%;max-width:100%;margin:26px 0 14px;padding-block:8px;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:#466c89 #081522;background:#081522;box-shadow:0 10px 16px #06121c85}
.cinematic .routes .country-list::-webkit-scrollbar {height:3px}
.cinematic .routes .country-list::-webkit-scrollbar-track {background:#081522}
.cinematic .routes .country-list::-webkit-scrollbar-thumb {background:#466c89}
.cinematic .routes .country-list button {position:relative;display:flex;flex:1 0 auto;align-items:center;justify-content:center;gap:9px;min-width:0;min-height:46px;padding:8px 12px;border:1px solid #55758d6b;color:#81a8c5;background:#102438;font:600 italic 22px/1 var(--display);letter-spacing:.02em;transform:none;transition:background .2s,border-color .2s,color .2s}
.cinematic .routes .country-list button>span {min-width:0;color:#c2d4df;font:400 10px/1.5 var(--body);letter-spacing:0;white-space:nowrap}
.cinematic .routes .country-list button::after {display:none}
.cinematic .routes .country-list button:hover {transform:none;background:#173650;border-color:#86a9c2;color:#e3eff7}
.cinematic .routes .country-list button:hover>span {color:#e3eff7}
.cinematic .routes .country-list button[aria-pressed=true] {background:#ff854f;border-color:#ff854f;color:#102538}
.cinematic .routes .country-list button[aria-pressed=true]>span {color:#102538;font-weight:600}
/* Added to the document's 110px scroll padding, this clears header and chips. */
.route-experience {min-width:0;scroll-margin-top:40px}
.cinematic .route-experience .map-panel {position:relative;min-width:0;padding:0;border:1px solid #698ca149;background:#0b1c2c;box-shadow:0 30px 65px #00000025;overflow:hidden}
.cinematic .route-experience .map-tools {position:relative;z-index:5;display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 20px;margin:0;padding:16px 21px;border-bottom:1px solid #81a7c02b;background:#0e2031}
.route-data-tag {font-size:8px;line-height:1.6;letter-spacing:.16em;color:#90b2cb}
.map-view-controls {display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.cinematic .route-experience .map-tools button {display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:38px;padding:8px 12px;background:#0c1d2c;border:1px solid #6688a35c;color:#bdd1e0;font:500 10px/1.5 var(--body);transition:background .2s,border-color .2s,color .2s}
.cinematic .route-experience .map-tools button:hover {background:#1b3d5b;border-color:#719dbf;color:#f0f6f5}
.cinematic .route-experience .map-tools button[aria-pressed=true] {background:#286bc8;border-color:#5297f6;color:#fff}
.cinematic .route-experience #europe-map {position:relative;min-width:0;height:clamp(420px,calc(100svh - 270px),680px);min-height:0;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 48% 38%,#173b5a,#0b1c2e 70%)}
.cinematic .route-experience #europe-map::after {content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,#06142422,transparent 27%,transparent 62%,#05142170);pointer-events:none}
#europe-3d {display:block;position:absolute;inset:0;width:100%;height:100%;outline:none;touch-action:pan-y}
#europe-map:not(.is-3d) #europe-3d {visibility:hidden}
.cinematic .route-experience .map-panel #europe-map>svg,
.cinematic .route-experience .map-panel:hover #europe-map>svg {position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;transform:none;filter:none;overflow:hidden}
.cinematic .route-experience .map-panel #europe-map.is-3d>svg {display:none}
.map-hud {position:absolute;z-index:3;left:25px;bottom:26px;display:flex;align-items:flex-end;gap:20px;max-width:calc(100% - 50px);pointer-events:none}
.map-hud .route-detail {min-width:0;margin:0;padding:17px 21px 18px;border:1px solid #7299b043;background:#081827df;box-shadow:0 14px 35px #0003;backdrop-filter:blur(12px)}
.map-hud .route-detail-label {font:500 7px/1.6 var(--body);letter-spacing:.14em;color:#91adc1}
.map-hud .route-detail strong {margin-top:7px;font:500 clamp(21px,2vw,30px)/1.15 var(--heading);letter-spacing:-.045em;color:#e9f2f3;overflow-wrap:anywhere}
.map-hud #route-distance {margin-top:9px;color:#ff9b6e;font:600 italic 39px/1 var(--display);letter-spacing:-.025em;white-space:nowrap}
.map-view-stage {display:flex;align-items:center;gap:7px;max-width:230px;margin-bottom:4px;padding:9px 12px;border:1px solid #6b93ad40;background:#071929bd;backdrop-filter:blur(10px);color:#b4cfdf;font:400 9px/1.6 var(--body)}
.route-stage-dot {display:block;width:5px;height:5px;flex:none;border-radius:50%;background:#78a9ec}
.map-coordinate {position:absolute;z-index:3;top:24px;right:24px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;color:#8cabc1;font:400 8px/1.5 var(--body);letter-spacing:.11em;pointer-events:none;text-shadow:0 1px 7px #001120}
.map-coordinate>span {font-size:6px;letter-spacing:.17em;color:#5f87a5}
.route-progress-track {position:absolute;z-index:4;left:0;right:0;bottom:0;height:3px;background:#4167863d;overflow:hidden;pointer-events:none}
.route-progress-track>i {display:block;width:var(--route-progress,0%);height:100%;background:#ff854f;box-shadow:0 0 14px #ff854f60}
.cinematic .route-experience .map-legend {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 20px;margin:0;padding:13px 22px;border-top:1px solid #678aa01f;background:#0b1d2d;color:#8eacc2;font-size:9px}
.cinematic .route-experience .map-legend i {background:#5585b8}
.cinematic .route-experience .map-legend i.orange {background:#ff854f}
.route-footer {display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:0 38px;min-width:0;margin-top:21px}
.cinematic .route-footer .selected-route {max-width:none;margin:0;padding:14px 0;font-size:12px;line-height:1.6;border-top:0;border-bottom:1px solid #718fa133;color:#d5e3e8;min-width:0}
.cinematic .route-footer .selected-route>span:not(.route-dot) {overflow-wrap:anywhere}
.cinematic .route-footer .selected-route button {display:grid;place-items:center;flex:none;width:37px;height:37px;border:1px solid #7795a861;background:transparent;color:#ff9a6c;transition:background .2s,border-color .2s}
.cinematic .route-footer .selected-route button:hover {transform:none;border-color:#ff9a6c;background:#ff854f12}
.cinematic .route-footer .route-fine {max-width:450px;margin:0;justify-self:end;font-size:11px;line-height:1.85;color:#9fb6c8}
.route-footer .route-map-foot {grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:7px 24px;margin-top:23px;padding-top:16px;border-color:#7799af27;font-size:9px;line-height:1.8;color:#7e9bb0}
.route-footer .route-map-foot>p {max-width:660px}
.route-footer .map-attribution {font-size:9px;color:#91abbe}
.cinematic .journey-service-options button[aria-pressed=true],
.cinematic .journey-service-options button[aria-pressed=true]:is(:hover,:focus-visible) {background:#225eae;border-color:#73aaff;color:#f4f8ff;box-shadow:0 0 24px #266dcc24}
.cinematic .journey-service-options button[aria-pressed=true]>span {color:#c2dcff}

@media(min-width:1600px) {
  .cinematic .service-lab {gap:34px}
  .cinematic .service-viewer {height:min(730px,calc(100svh - 140px))}
}
@media(max-width:1180px) {
  .cinematic .service-lab {grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:21px}
  .cinematic .service-viewer {top:99px;min-height:540px;height:min(650px,calc(100svh - 120px))}
  .cinematic .services .service-card,
  .cinematic .services .service-card:is(:hover,:focus-visible,:focus-within) {padding:22px 21px 20px}
  .cinematic .services .service-card .service-card-top {padding-right:108px;gap:12px}
  .cinematic .services .service-card .service-visual {right:17px;width:115px}
  .cinematic .services .service-card .service-code {font-size:69px}
  .cargo-current {padding-inline:21px}
  .cargo-tabs {margin-inline:20px;gap:5px}
  .cargo-tabs>button {padding-inline:12px}
  .service-viewer-top {padding-inline:21px}
  .cargo-meter {margin-inline:21px}
  .cargo-view-footer {padding-inline:21px;gap:8px}
  .cargo-dimensions>span {font-size:8px;margin-left:3px}
  .cargo-view-note {font-size:7px;max-width:108px}
  .cinematic .routes .route-layout {width:calc(100% - 72px)}
  .cinematic .route-content {gap:35px}
}
@media(max-width:900px) {
  .cinematic .service-lab {grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:17px}
  .cinematic .services .service-card .service-card-top {padding-right:65px;gap:12px;min-height:58px}
  .cinematic .services .service-card .service-visual {width:86px;height:61px;top:20px;right:13px}
  .cinematic .services .service-card .service-code {font-size:65px}
  .cinematic .services .service-card .service-number {display:none}
  .cinematic .services .service-card .service-copy strong {font-size:21px}
  .cinematic .services .service-card .service-copy>span {font-size:11px}
  .cinematic .services .service-card .service-card-bottom {gap:8px}
  .service-select {font-size:9px;gap:10px;padding-inline:10px}
  .service-detail-button {font-size:9px;gap:9px}
  .cargo-view-footer {flex-wrap:wrap;gap:5px 12px}
  .cargo-view-note {max-width:none;text-align:left}
  .cinematic .route-content {grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:30px}
  .cinematic .route-content h2 {font-size:54px}
  .cinematic .route-introduction .route-description {font-size:12px}
  .cinematic .routes .country-list button {flex:1 0 auto}
  .map-hud {gap:12px;left:20px;bottom:22px;max-width:calc(100% - 40px)}
  .map-hud .route-detail {padding:15px 18px}
  .map-view-stage {max-width:170px;font-size:8px}
}
@media(max-width:700px) {
  .cinematic .services {padding:65px 20px 70px}
  .cinematic .service-lab {display:grid;grid-template-columns:minmax(0,1fr);gap:17px}
  .cinematic .service-viewer {top:67px;z-index:8;height:342px;min-height:0;grid-template-rows:auto minmax(0,1fr) auto auto auto auto;box-shadow:0 15px 30px #12263533}
  .service-viewer-top {padding:13px 16px 0;gap:12px}
  .cargo-live-badge {font-size:6px;letter-spacing:.13em;gap:6px}
  .cargo-view-index {font-size:6px;letter-spacing:.1em}
  .cargo-tabs {margin-inline:15px;gap:5px}
  .cargo-tabs>button {min-height:43px;padding:7px 12px;font-size:27px}
  .cargo-tabs>button>span {font-size:7px}
  .cargo-current {display:flex;align-items:center;min-height:43px;padding:10px 16px 9px}
  #cargo-service-tag,#cargo-service-description {display:none}
  #cargo-service-title {margin:0;max-width:none;font-size:18px;line-height:1.2;letter-spacing:-.035em}
  .cargo-meter {margin-inline:16px}
  .cargo-view-footer {flex-wrap:nowrap;gap:9px;padding:8px 16px 11px}
  .cargo-dimensions {font-size:10px}
  .cargo-dimensions>span {margin-left:4px;font-size:7px}
  .cargo-view-note {max-width:110px;text-align:right;font-size:6px;line-height:1.5}
  .cinematic .service-lab .service-list.service-cards {gap:14px}
  .cinematic .services .service-card,
  .cinematic .services .service-card:is(:hover,:focus-visible,:focus-within) {padding:22px 22px 20px;min-height:0;scroll-margin-top:430px}
  .cinematic .services .service-card .service-card-top {min-height:59px;padding-right:130px;gap:15px}
  .cinematic .services .service-card .service-code,
  .cinematic .services .service-card:is(:hover,:focus-visible,:focus-within) .service-code {font-size:70px;line-height:.86}
  .cinematic .services .service-card .service-number {display:block;font-size:8px}
  .cinematic .services .service-card .service-visual {top:19px;right:17px;width:128px;height:76px}
  .cinematic .services .service-card .service-micro {margin-top:14px;margin-bottom:11px;font-size:7px;letter-spacing:.1em}
  .cinematic .services .service-card .service-copy {gap:9px}
  .cinematic .services .service-card .service-copy strong {font-size:24px;line-height:1.15;max-width:295px;min-height:0}
  .cinematic .services .service-card .service-copy>span {font-size:11px;line-height:1.8;max-width:none}
  .service-features {margin-top:15px;gap:5px}
  .service-features>span {font-size:8px;padding:4px 6px}
  .cinematic .services .service-card .service-card-bottom {margin-top:17px;padding-top:13px;gap:10px}
  .service-select {font-size:10px;min-height:42px;padding-inline:12px;gap:13px}
  .service-detail-button {font-size:10px;min-height:42px;gap:12px}
  .cinematic .routes {padding-block:62px 54px}
  .cinematic .routes .route-layout {width:calc(100% - 40px)}
  .cinematic .route-content {grid-template-columns:minmax(0,1fr);gap:22px}
  .cinematic .route-content h2 {margin-top:23px;font-size:clamp(41px,11vw,57px);line-height:1.04}
  .route-introduction {max-width:360px;justify-self:start;padding:0}
  .cinematic .route-introduction .route-description {max-width:330px;font-size:12px;line-height:1.8}
  .route-interaction-note {margin-top:17px;font-size:7px;letter-spacing:.11em}
  .cinematic .routes .country-list {top:67px;gap:6px;margin:19px 0 12px;padding-block:8px;scroll-padding-inline:2px}
  .cinematic .routes .country-list button {flex:0 0 auto;min-width:99px;min-height:44px;padding:9px 12px;gap:7px;font-size:21px}
  .cinematic .routes .country-list button>span {font-size:9px}
  /* 50px + the document's mobile 85px scroll padding clears the sticky row. */
  .route-experience {scroll-margin-top:50px}
  .cinematic .route-experience .map-panel {overflow:hidden}
  .cinematic .route-experience .map-tools {flex-direction:column;align-items:stretch;gap:10px;padding:13px 13px 12px}
  .route-data-tag {font-size:6px;letter-spacing:.14em}
  .map-view-controls {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .cinematic .route-experience .map-tools button {min-width:0;min-height:43px;padding:7px 6px;gap:4px;font-size:8px;line-height:1.45;text-align:center}
  .cinematic .route-experience .map-tools button>span {min-width:0}
  .cinematic .route-experience #europe-map {height:420px;min-height:0}
  .map-coordinate {top:16px;right:15px;gap:4px;font-size:6px;letter-spacing:.08em}
  .map-coordinate>span {font-size:5px;letter-spacing:.13em}
  .map-hud {left:14px;right:14px;bottom:19px;display:flex;align-items:flex-start;flex-direction:column;gap:7px;max-width:none}
  .map-hud .route-detail {max-width:100%;padding:12px 14px 13px;background:#071a29e8}
  .map-hud .route-detail-label {font-size:6px;letter-spacing:.1em}
  .map-hud .route-detail strong {margin-top:6px;font-size:22px;line-height:1.14}
  .map-hud #route-distance {margin-top:7px;font-size:32px}
  .map-view-stage {max-width:100%;margin:0;padding:6px 9px;font-size:7px;gap:6px}
  .route-stage-dot {width:4px;height:4px}
  .cinematic .route-experience .map-legend {padding:12px 13px;gap:10px 12px;font-size:7px}
  .cinematic .route-experience .map-legend>span {gap:6px}
  .route-footer {grid-template-columns:minmax(0,1fr);gap:14px;margin-top:14px}
  .cinematic .route-footer .selected-route {padding:8px 0 14px;font-size:12px}
  .cinematic .route-footer .route-fine {justify-self:start;max-width:340px;font-size:10px;line-height:1.85}
  .route-footer .route-map-foot {display:block;margin-top:3px;padding-top:14px;font-size:9px;line-height:1.8}
  .route-footer .map-attribution {font-size:8px;margin-top:9px;gap:0 4px}
}
@media(max-width:360px) {
  .cinematic .services .service-card,
  .cinematic .services .service-card:is(:hover,:focus-visible,:focus-within) {padding-inline:18px}
  .cinematic .services .service-card .service-visual {width:108px;right:13px}
  .cinematic .services .service-card .service-card-top {padding-right:110px}
  .cinematic .services .service-card .service-number {display:none}
  .cargo-dimensions>span {font-size:6px}
  .cargo-view-note {max-width:95px;font-size:6px}
  .cinematic .routes .country-list button {gap:5px;padding-inline:5px}
  .cinematic .routes .country-list button>span {font-size:8px}
}
@media(max-width:700px) and (max-height:700px) {
  .cinematic .service-viewer {height:294px}
  .cinematic .services .service-card {scroll-margin-top:380px}
  .cargo-current {min-height:38px;padding-block:8px}
  #cargo-service-title {font-size:16px}
  .cargo-tabs>button {min-height:40px}
  .cargo-view-footer {padding-block:7px 9px}
}
@media(min-width:701px) and (max-height:650px) {
  .cinematic .service-viewer {position:relative;top:0;height:540px;min-height:0}
}
.motion-paused .cargo-meter>i,
.motion-paused .cargo-tabs>button,
.motion-paused .service-select,
.motion-paused .service-detail-button,
.motion-paused .country-list button,
.motion-paused .map-tools button {transition:none!important}
@media(prefers-reduced-motion:reduce) {
  .cargo-meter>i,.cargo-tabs>button,.service-select,.service-detail-button,
  .country-list button,.map-tools button {transition:none!important;animation:none!important}
}