/* Ported for dev (2026-11-03): the 11 drawing rules this page uses from the homepage "realistic pass" block of
   whisk-freight.css, which is not on dev. Copied verbatim; must stay above the .tl-svg overrides below. */
.hk-real .hk-water { fill: #D3DCE9; }
.hk-real .hk-wline { stroke: #8FA8CF; stroke-width: 1.2; fill: none; }
.hk-real .hk-quay { fill: #DCE3EE; }
.hk-real .rg-bm { stroke: #5A6B82; fill: none; stroke-linecap: square; }
.hk-real .hk-truss { stroke: #EEF3FA; fill: none; opacity: .6; }
.hk-real .hk-stay { stroke: #34415A; fill: none; }
.hk-real .hk-panel { stroke: #fff; stroke-width: .8; opacity: .35; fill: none; }
.hk-real .hk-road { fill: #5F6E84; }
.hk-real .hk-lane { stroke: #fff; stroke-width: 1.2; stroke-dasharray: 7 6; fill: none; }
.hk-real .hk-bw { fill: #D3DCE9; stroke: #9FB0C8; stroke-width: 1; }
.hk-real .hk-seam { stroke: #C2CEDF; stroke-width: .8; fill: none; }

/* Transload vs Direct Drayage guide (transload2 mockup, Ray 2026-11-03): uniform hero and section spacing (jump bar removed), the two journeys
   drawn to one scale and the decision flow on the first desktop screen, ~44px section rhythm, multi-column grids,
   mobile-only collapse. Flat colour only. Backgrounds white or #EEF3FA. */

/* ---- sections ---- */

/* ---- sections ---- */
.tl-sec [id], .tl-sec[id] { scroll-margin-top: 90px; }
.tl-h2 { font-family: 'Oswald', sans-serif; font-size: clamp(32px, 3.5vw, 48px); font-weight: 700; line-height: 1.05; text-transform: uppercase; color: var(--navy); margin: 0 0 24px; max-width: 34em; }
.tl-sec p { font-size: 15.5px; line-height: 1.6; color: #0C1E3C; }
.tl-sec p + p { margin-top: 12px; }
.tl-sec .section-eyebrow { margin-bottom: 8px; }
.tl-sec h3 { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .03em; color: #002B75; font-weight: 700; }

/* ---- at a glance: the two journeys ---- */
.tl-glance { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 34px; align-items: center; }
.tl-glance .rg-intro { font-size: 15px; line-height: 1.6; margin: 0; }
.tl-j { margin: 0; container-type: inline-size; --hw: 112px; --cg: 14px; --k: calc((100cqw - var(--hw) - var(--cg)) / var(--tot)); }
.tl-row { display: grid; grid-template-columns: var(--hw) minmax(0, 1fr); gap: var(--cg); align-items: start; padding: 10px 0; }
.tl-row + .tl-row { border-top: 1px solid #D3DCE9; }
.tl-rh { padding-top: 4px; }
.tl-rh h3 { font-size: 17px; line-height: 1.1; margin: 0 0 5px; padding-top: 6px; border-top: 3px solid #003DA5; }
.tl-row-t .tl-rh h3 { border-top-color: #FF6720; }
.tl-rh p { font-size: 12.5px; line-height: 1.4; color: #5A6B82; margin: 0; }
.tl-steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; gap: calc(var(--arw) * var(--k)); }
.tl-steps li { flex: none; width: calc(var(--w) * var(--k)); position: relative; margin: 0; max-width: none; }
.tl-art { display: block; background: #EEF3FA; line-height: 0; }
.tl-art svg { display: block; width: 100%; height: auto; }
.tl-steps li:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: calc(84 * var(--k) * .5); width: calc(var(--arw) * var(--k) - 7px); margin-left: 3px; border-top: 2px dashed #FF6720; }
.tl-steps li:not(:last-child)::before { content: ""; position: absolute; left: calc(100% + var(--arw) * var(--k) - 6px); top: calc(84 * var(--k) * .5 - 4px); border-left: 6px solid #FF6720; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.tl-cap { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: 12.5px; line-height: 1.3; color: #0C1E3C; }
.tl-cap b { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #003DA5; color: #fff; font: 700 11px/1 Inter, sans-serif; }
.tl-row-t .tl-cap b { background: #FF6720; color: #0C1E3C; }
.tl-j figcaption { font-size: 12px; color: #5A6B82; margin-top: 4px; padding-left: calc(var(--hw) + var(--cg)); }
/* drawing classes (svc_art.py / home_rigs.py parts), flat fills */
.tl-svg .sva-apron{fill:#DCE3EE}.tl-svg .sva-contact{fill:#0C1E3C;opacity:.35}.tl-svg .sva-corr{fill:#0C1E3C;opacity:.09}
.tl-svg .sva-rail{fill:#C4501A}.tl-svg .sva-white{fill:url(#wf-dryvan-silver);stroke:#465A74;stroke-width:.42}.tl-svg .sva-post{stroke:#6A7C92;stroke-width:.6;fill:none}
.tl-svg .sva-rail2.sva-vanedge{fill:#465A74}.tl-svg .sva-rail2.sva-vanrib{fill:#6A7C92}
.tl-svg .sva-rail2{fill:#DCE3EE}.tl-svg .sva-skirt{fill:#5A6B82}.tl-svg .sva-inside{fill:#E4EAF3}.tl-svg .sva-floor{fill:#8A6A44}
.tl-svg .sva-palgap{fill:#5E4730}.tl-svg .sva-wrap{fill:none;stroke:#fff;stroke-width:.35;opacity:.5}.tl-svg .sva-slab{fill:#B9C6D9}
.tl-svg .sva-floorln{stroke:#5A6B82;stroke-width:.8;fill:none}.tl-svg .sva-lev{stroke:#5A6B82;stroke-width:1.2;fill:none}
.tl-svg .sva-door{fill:#5A6B82}.tl-svg .rg-wl{stroke-width:.45}.tl-svg .rg-lug{stroke-width:.4}
.tl-svg .hk-lane{stroke-width:.8;stroke-dasharray:5 4}.tl-svg .hk-bw{stroke-width:.6}

/* ---- decision flow ---- */
.tl-flow-wrap { margin-top: 22px; }
.tl-flow-h { display: flex; align-items: baseline; gap: 6px 22px; flex-wrap: wrap; margin-bottom: 12px; }
.tl-flow-h .tl-h2 { margin: 0; }
.tl-flow-h p { font-size: 14.5px; margin: 0; color: #5A6B82; max-width: none; }
.tl-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: none; }
.tl-flow > li { background: #EEF3FA; border-top: 3px solid #003DA5; padding: 12px 14px 14px; margin: 0; max-width: none; position: relative; }
.tl-flow > li:last-child { border-top-color: #FF6720; }
.tl-flow > li:not(:last-child)::after { content: ""; position: absolute; right: -10px; top: 18px; border-left: 7px solid #FF6720; border-top: 6px solid transparent; border-bottom: 6px solid transparent; z-index: 1; }
.tl-sec .tl-q { font-size: 14.5px; line-height: 1.38; font-weight: 700; color: #002B75; margin: 0 0 10px; }
.tl-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 7px; border-radius: 50%; background: #003DA5; color: #fff; font: 700 12px/1 Inter, sans-serif; vertical-align: 1px; }
.tl-yn { margin: 0; }
.tl-yn > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.tl-yn > div + div { margin-top: 8px; padding-top: 8px; border-top: 1px solid #D3DCE9; }
.tl-yn dt { font: 700 11px/1 Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 4px 0; }
.tl-y dt { background: #003DA5; color: #fff; }
.tl-no dt { border: 1px solid #5A6B82; color: #3A4A60; padding: 3px 0; }
.tl-yn dd { margin: 0; font-size: 13.5px; line-height: 1.45; color: #0C1E3C; max-width: none; }
.tl-no dd { color: #3A4A60; }

/* ---- tables ---- */
.tl-tbl { overflow-x: auto; }
.tl-fac, .tl-cube { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; line-height: 1.45; color: #0C1E3C; }
.tl-fac caption, .tl-cube caption { caption-side: bottom; text-align: left; font-size: 13px; color: #5A6B82; padding-top: 8px; }
.tl-fac thead th, .tl-cube thead th { font: 600 13px/1.2 Oswald, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #002B75; text-align: left; padding: 11px 12px 9px; border-bottom: 3px solid #002B75; background: #fff; }
.tl-fac thead .tl-hd { border-bottom-color: #003DA5; }
.tl-fac thead .tl-ht { border-bottom-color: #FF6720; }
.tl-fac td, .tl-fac tbody th, .tl-cube td, .tl-cube tbody th { padding: 9px 12px; border-bottom: 1px solid #D3DCE9; vertical-align: top; text-align: left; }
.tl-fac tbody th, .tl-cube tbody th { font-weight: 700; color: #002B75; width: 21%; }
.tl-fac td { width: 39.5%; }
.tl-fgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 26px; align-items: start; }
.tl-terms { background: #fff; border-top: 3px solid #FF6720; padding: 14px 18px 8px; }
.tl-terms h3 { font-size: 17px; margin: 0 0 8px; }
.tl-terms dl { margin: 0; }
.tl-terms dl > div { padding: 8px 0; border-top: 1px solid #D3DCE9; }
.tl-terms dt { font: 700 14px/1.2 Oswald, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #003DA5; margin-bottom: 3px; }
.tl-terms dd { margin: 0; font-size: 13.5px; line-height: 1.45; color: #0C1E3C; max-width: none; }
.tl-more { font-weight: 600; color: #003DA5; white-space: nowrap; }
.tl-cgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: start; }

/* ---- distance (500-mile guide) ---- */
.tl-callout { background: #fff; border-left: 4px solid #FF6720; padding: 14px 20px; }
.tl-callout p { margin: 0; max-width: 60em; }
.tl-mgrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 30px; margin: 20px 0 16px; }
.tl-mcol h3 { font-size: 17px; margin: 0 0 8px; }
.tl-list { margin: 0; padding-left: 18px; }
.tl-list li { font-size: 14.5px; line-height: 1.55; margin: 0 0 8px; color: #0C1E3C; }
.tl-list li::marker { color: #FF6720; }
.tl-list2 strong { color: #002B75; }
.tl-sec .tl-close { margin: 0; }

/* ---- per diem ---- */
.tl-pgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.tl-track { background: #EEF3FA; padding: 18px 20px 14px; }
.tl-trk h3 { font-size: 15px; margin: 0 0 8px; }
.tl-trk + .tl-trk { margin-top: 14px; }
.tl-trk ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
.tl-trk-t ol { width: 72%; }
.tl-trk ol::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 21px; border-top: 2px solid #003DA5; }
.tl-trk-t ol::before { border-top-color: #FF6720; }
.tl-trk li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; font-size: 13px; line-height: 1.3; color: #0C1E3C; margin: 0; max-width: none; position: relative; }
.tl-ico { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid #003DA5; display: flex; align-items: center; justify-content: center; }
.tl-trk-t .tl-ico { border-color: #FF6720; }
.tl-ico svg { width: 26px; height: 26px; fill: none; stroke: #003DA5; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.tl-sec .tl-trk-note { font-size: 13px; color: #5A6B82; margin: 12px 0 0; }

/* ---- FAQ + sources ---- */
.tl-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; align-items: stretch; }
.tl-qa { background: #fff; border-top: 3px solid #003DA5; padding: 14px 18px; }
details.tl-mc > summary { list-style: none; cursor: default; min-height: 24px; }
details.tl-mc > summary::-webkit-details-marker { display: none; }
.tl-qa h3 { font-size: 16.5px; letter-spacing: .02em; line-height: 1.3; margin: 0 0 6px; }
.tl-qa p { font-size: 14.5px; line-height: 1.55; margin: 0; }
.tl-src { columns: 3; column-gap: 30px; margin: 14px 0 0 18px; font-size: 13.5px; line-height: 1.5; }
.tl-src li { break-inside: avoid; margin: 0 0 10px; max-width: none; }
.tl-src a { overflow-wrap: anywhere; }
#sources p { font-size: 14px; }

/* ---- tablet ---- */
@media (max-width: 1100px) {
  .tl-glance { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tl-glance-t .rg-intro { max-width: 46em; }
  .tl-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tl-flow > li:nth-child(3)::after { display: none; }
  .tl-fgrid, .tl-cgrid { grid-template-columns: minmax(0, 1fr); }
  .tl-src { columns: 2; }
}
/* ---- phone: stack, keep the shared drawing scale, collapse long detail ---- */
@media (max-width: 700px) {
  .tl-j { container-type: normal; --k: 1.15px; }
  .tl-row { display: block; padding: 12px 0; }
  .tl-rh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 8px; padding: 0; border-top: 3px solid #003DA5; }
  .tl-row-t .tl-rh { border-top-color: #FF6720; }
  .tl-rh h3 { border: 0; margin: 0; }
  .tl-steps { flex-wrap: wrap; gap: 12px 10px; }
  .tl-steps li { max-width: 100%; }
  .tl-steps li::before, .tl-steps li::after { display: none; }
  .tl-j figcaption { padding-left: 0; }
  .tl-flow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tl-flow > li::after { display: none; }
  .tl-flow-h p { font-size: 14px; }
  .tl-fac thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tl-fac, .tl-fac tbody, .tl-fac tr, .tl-fac th, .tl-fac td { display: block; width: auto !important; }
  .tl-fac tr { border-top: 3px solid #002B75; margin-bottom: 10px; background: #fff; }
  .tl-fac tbody th { padding: 10px 14px 4px; border: 0; font-size: 15px; }
  .tl-fac td { padding: 6px 14px 10px; border: 0; }
  .tl-fac td + td { border-top: 1px solid #D3DCE9; }
  .tl-fac td::before { content: attr(data-label); display: block; font: 600 11.5px/1.3 Oswald, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #003DA5; margin-bottom: 2px; }
  .tl-fac td + td::before { color: #C24A0B; }
  .tl-fac caption { display: block; padding: 0 0 4px; }
  .tl-cube { font-size: 13px; }
  .tl-cube thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tl-cube, .tl-cube tbody, .tl-cube tr, .tl-cube th, .tl-cube td { display: block; width: auto !important; }
  .tl-cube tr { background: #EEF3FA; margin-bottom: 8px; padding: 8px 12px; }
  .tl-cube tbody th { border: 0; padding: 0 0 4px; }
  .tl-cube td { border: 0; padding: 2px 0; display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 8px; }
  .tl-cube td::before { content: attr(data-label); font-size: 12px; color: #5A6B82; }
  .tl-cube caption { display: block; padding: 0 0 6px; }
  .tl-mgrid, .tl-pgrid, .tl-faq { grid-template-columns: minmax(0, 1fr); }
  .tl-mgrid { gap: 10px; }
  .tl-pgrid { gap: 18px; }
  .tl-src { columns: 1; }
  details.tl-mc > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  details.tl-mc > summary::after { content: "+"; flex: 0 0 auto; font: 700 22px/1 Oswald, sans-serif; color: #FF6720; }
  details.tl-mc[open] > summary::after { content: "\2212"; }
  details.tl-mc > summary h3 { margin: 0; }
  details.tl-mc[open] > summary h3 { margin-bottom: 6px; }
  .tl-qa { padding: 4px 14px; }
  .tl-qa p { padding-bottom: 10px; }
  .tl-mcol { background: #fff; padding: 2px 14px; border-top: 3px solid #003DA5; }
  .tl-mcol .tl-list { padding-bottom: 6px; }
  .tl-terms { padding: 2px 14px; }
  .tl-trk-t ol { width: 80%; }
}
@media print {
  details.tl-mc > summary::after { display: none; }
}
/* "No" step reads as a one-line connector */
.tl-yn > div.tl-no { align-items: center; }
/* fold tightening (desktop) */
@media (min-width: 701px) {
  .tl-glance { grid-template-columns: minmax(0, 310px) minmax(0, 1fr); gap: 26px; }
  .tl-glance .rg-intro { font-size: 14px; line-height: 1.52; }
  .tl-row { padding: 7px 0; }
  .tl-steps li:not(:last-child) .tl-cap { margin-right: calc(var(--arw) * var(--k) * -1 + 2px); }
  .tl-cap { font-size: 12px; margin-top: 5px; }
  .tl-flow-wrap { margin-top: 14px; }
  .tl-flow-h { margin-bottom: 9px; }
  .tl-flow-h .tl-h2 { font-size: 22px; }
  .tl-flow-h p { font-size: 14px; }
  .tl-flow > li { padding: 10px 12px 11px; }
  .tl-sec .tl-q { font-size: 14px; line-height: 1.32; margin-bottom: 8px; }
  .tl-yn dd { font-size: 13px; line-height: 1.4; }
  .tl-yn > div + div { margin-top: 6px; padding-top: 6px; }
}
.tl-sec .tl-scale { font-size: 12.5px; line-height: 1.4; color: #5A6B82; margin-top: 8px; padding-left: 10px; border-left: 3px solid #FF6720; }
@media (min-width: 1101px) {
  .tl-flow { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr); }
  .tl-glance { grid-template-columns: minmax(0, 335px) minmax(0, 1fr); }
}
@media (min-width: 701px) {
  .tl-row { padding: 5px 0; }
  .tl-flow-wrap { margin-top: 10px; }
  .tl-flow-h { margin-bottom: 7px; }
  .tl-cap { line-height: 1.25; }
}
@media (min-width: 701px) { .tl-flow > li { padding: 9px 12px 7px; } .tl-glance { margin-bottom: 0; } }
@media (max-width: 700px) { .tl-j { --k: .9px; } .tl-steps { gap: 12px 8px; } }
@media (min-width: 701px) { .tl-flow-h { margin-bottom: 6px; } }
@media (min-width: 701px) and (max-width: 1100px) {
  .tl-glance { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tl-glance-t { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 4px 24px; }
  .tl-glance-t .tl-scale { grid-column: 2; }
}
/* tvd4: three stacked top sections (intro / full-width journeys / decision flow), uniform section spacing */
.tl-top .rg-intro { max-width: 70ch; }
.tl-jsec { background: #EEF3FA; }
.tl-jsec .tl-art { background: #FFFFFF; }
.content-section.tl-flow-wrap { margin-top: 0; }
.tl-flow-h { margin-bottom: 20px; }
.tl-flow-h .tl-h2 { margin: 0; }
@media (min-width: 701px) {
  .content-section.tl-flow-wrap { margin-top: 0; }
  .tl-flow-h { margin-bottom: 20px; }
  .tl-flow-h .tl-h2 { font-size: clamp(32px, 3.5vw, 48px); }
  .tl-flow-h p { font-size: 15.5px; }
  .tl-jsec .tl-j { --hw: 150px; --cg: 20px; }
  .tl-jsec .tl-row { padding: 18px 0; }
  .tl-jsec .tl-rh h3 { font-size: 21px; }
  .tl-jsec .tl-rh p { font-size: 14px; }
  .tl-jsec .tl-cap { font-size: 14.5px; line-height: 1.35; margin-top: 8px; gap: 8px; }
  .tl-jsec .tl-cap b { width: 22px; height: 22px; font-size: 12px; }
  .tl-jsec .tl-j figcaption { font-size: 13px; }
}

/* tvd5: navy top band with path summary, tighter connected spacing */
.content-section.tl-band { background: #003DA5; color: #FFFFFF; padding-top: 64px; padding-bottom: 56px; }
.tl-band-in { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.tl-band .tl-h2 { color: #FFFFFF; margin-bottom: 18px; }
.tl-band .tl-h2::after { content: ""; display: block; width: 64px; height: 4px; background: #FF6720; margin-top: 16px; }
.tl-band .rg-intro { color: #FFFFFF; max-width: 62ch; margin: 0; font-size: 16.5px; line-height: 1.6; }
.tl-band .rg-intro a { color: #FFFFFF; text-decoration-color: #FF6720; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tl-band .tl-rev { color: #FFFFFF; opacity: .8; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 12px; }
.tl-paths { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.tl-path { display: flex; gap: 18px; align-items: center; background: #FFFFFF; color: #0C1E3C; padding: 18px 22px; border-left: 6px solid #003DA5; margin: 0; max-width: none; }
.tl-path-t { border-left-color: #FF6720; }
.tl-path-n { flex: none; font: 700 56px/1 Oswald, sans-serif; color: #003DA5; min-width: 40px; text-align: center; }
.tl-path-t .tl-path-n { color: #C2410C; }
.tl-path-b b { display: block; font: 700 22px/1.1 Oswald, sans-serif; text-transform: uppercase; color: #003DA5; margin-bottom: 4px; }
.tl-path-b span { font-size: 15px; line-height: 1.4; }
.content-section.tl-jsec { padding-top: 48px; padding-bottom: 48px; }
.tl-jsec .tl-scale { margin: 0 0 12px; }
.content-section.tl-flow-wrap { padding-top: 64px; }
@media (min-width: 701px) { .tl-jsec .tl-j { --k: calc((100cqw - var(--hw) - var(--cg) - 96px) / var(--tot)); } .tl-jsec .tl-steps li:last-child .tl-cap { margin-right: -96px; } }
@media (max-width: 900px) { .tl-band-in { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 700px) {
  .content-section.tl-band { padding-top: 48px; padding-bottom: 40px; }
  .tl-path { padding: 14px 16px; gap: 14px; }
  .tl-path-n { font-size: 44px; }
  .tl-path-b b { font-size: 19px; }
  .content-section.tl-jsec { padding-top: 36px; padding-bottom: 36px; }
  .content-section.tl-flow-wrap { padding-top: 48px; }
  .tl-jsec .tl-cap { font-size: 14px; }
}
.tl-path-n small { display: block; font: 600 12px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }

/* tvd6: larger journeys (row labels above each row, full-width rows), new terminal step art */
.tl-svg .tl-hull{fill:#003DA5}.tl-svg .tl-boot{fill:#FF6720}.tl-svg .tl-bulw{fill:#0C1E3C}
.tl-svg .tl-cn{fill:#003DA5}.tl-svg .tl-cg{fill:#B9C6D9}.tl-svg .tl-cend{fill:#0C1E3C;opacity:.1}
.tl-svg .tl-crane{fill:#7C8BA1}.tl-svg .tl-crane-d{fill:#5A6B82}.tl-svg .tl-brace{stroke:#7C8BA1;stroke-width:2;fill:none}
.tl-svg .tl-truss{stroke:#5A6B82;stroke-width:.7;fill:none}.tl-svg .tl-stay{stroke:#7C8BA1;stroke-width:1.2;fill:none}
.tl-svg .tl-glass{fill:#D3DCE9}.tl-svg .tl-spread{fill:#5A6B82}.tl-svg .tl-cable{stroke:#0C1E3C;stroke-width:.6;fill:none}
.tl-jsec .tl-art { background: transparent; }
.tl-jsec .tl-art svg { background: #FFFFFF; }
@media (min-width: 701px) {
  .tl-jsec .tl-j { --hw: 0px; --cg: 0px; }
  .tl-jsec .tl-row { display: block; padding: 20px 0 22px; }
  .tl-jsec .tl-rh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 12px; padding: 8px 0 0; border-top: 4px solid #003DA5; }
  .tl-jsec .tl-row-t .tl-rh { border-top-color: #FF6720; }
  .tl-jsec .tl-rh h3 { font-size: 26px; border: 0; margin: 0; padding: 0; }
  .tl-jsec .tl-rh p { font-size: 15.5px; }
  .tl-jsec .tl-art { display: flex; align-items: flex-end; height: calc(var(--ph) * var(--k)); }
  .tl-jsec .tl-steps li:not(:last-child)::after { top: calc((var(--ph) - 42) * var(--k)); }
  .tl-jsec .tl-steps li:not(:last-child)::before { top: calc((var(--ph) - 42) * var(--k) - 4px); }
  .tl-jsec .tl-cap { font-size: 16px; line-height: 1.35; margin-top: 10px; }
  .tl-jsec .tl-cap b { width: 24px; height: 24px; font-size: 13px; }
}
@media (max-width: 700px) {
  .tl-jsec .tl-j { --k: 1.4px; }
  .tl-jsec .tl-steps { gap: 16px 12px; }
  .tl-jsec .tl-art { display: block; height: auto; }
  .tl-jsec .tl-rh h3 { font-size: 22px; }
}
@media (max-width: 380px) { .tl-jsec .tl-j { --k: 1.3px; } }

/* tvd7: equal tile heights in both rows, rows on one line, full width (no right reserve) */
@media (min-width: 701px) {
  .tl-jsec .tl-j { --k: calc(100cqw / var(--tot)); }
  .tl-jsec .tl-art { display: block; height: auto; }
  .tl-jsec .tl-steps { flex-wrap: nowrap; }
  .tl-jsec .tl-steps li:last-child .tl-cap { margin-right: 0; }
  .tl-jsec .tl-steps li:not(:last-child)::after { top: calc(var(--ph) * var(--k) * .5); }
  .tl-jsec .tl-steps li:not(:last-child)::before { top: calc(var(--ph) * var(--k) * .5 - 4px); }
}
@media (min-width: 701px) { .tl-jsec .tl-row-t .tl-steps li:last-child .tl-cap { margin-left: -28px; } }