/* The entire opening is a single animated engineering plate. */
.journey {
  --construction: 1; --drawing: 1; --commission: 1; --service: 1;
  --inspection-0: 1; --inspection-1: 1; --inspection-2: 1; --rotor: 0deg;
  position: relative; isolation: isolate; min-height: 680px;
  height: calc(100svh - 82px); overflow: hidden; color: #eff8fc;
  background: #081f31; scroll-margin-top: 0;
}
.journey-visual, .journey-shade { position: absolute; inset: 0; pointer-events: none; }
.journey-visual { z-index: -2; background: radial-gradient(ellipse at 73% 43%, #143d51 0, #0a2335 49%, #061725 100%); }
.journey-scene { display: block; width: 100%; height: 100%; overflow: visible; }
.journey-shade { z-index: -1; background: linear-gradient(90deg, #071d2de6, #071d2d90 26%, transparent 53%), linear-gradient(0deg, #061724 0%, #061724e8 13%, transparent 33%, transparent 85%, #071c2caa); }
.journey-overline { position: absolute; top: 29px; left: 4.5%; right: 4.5%; display: flex; justify-content: space-between; gap: 24px; font: .75rem var(--mono); letter-spacing: .11em; text-transform: uppercase; color: #9bbed0; }
.journey-discipline::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--lime); margin-right: 12px; vertical-align: middle; }
.journey-drawing-note { color: #85a9bc; letter-spacing: .05em; }
.journey-copy { position: absolute; left: 4.5%; top: 13%; max-width: 730px; }
.journey h1 { margin: 0; font-size: clamp(2.7rem, 4.65vw, 5.5rem); font-weight: 600; line-height: 1.08; letter-spacing: -.065em; }
.journey h1 em { color: #d1f759; font-style: normal; }
.journey-intro { color: #b6cdda; font-size: 1rem; margin: 21px 0 27px; max-width: 365px; line-height: 1.65; }
.journey-copy .button { padding: 13px 18px; font-size: .875rem; }
.journey-chapter-copy { position: absolute; left: 4.5%; top: 57%; width: 300px; }
.journey-chapter-number { font: .75rem var(--mono); color: #92bccd; letter-spacing: .14em; margin: 0 0 13px; }
.journey-chapter-copy h2 { font-size: 1.5rem; letter-spacing: -.035em; font-weight: 500; line-height: 1.22; margin: 0 0 12px; }
.journey-chapter-copy > p:last-child { color: #acc6d4; font-size: 1rem; line-height: 1.7; margin: 0; }
.journey-service-notes { position: absolute; right: 4.5%; top: 15%; display: flex; gap: 20px; opacity: var(--service); transition: opacity .3s; color: #d1f759; font: .75rem var(--mono); }
.journey-service-notes span::before { content: '✓'; margin-right: 7px; }
.journey-service-notes span:nth-child(1) { opacity: var(--inspection-0); }
.journey-service-notes span:nth-child(2) { opacity: var(--inspection-1); }
.journey-service-notes span:nth-child(3) { opacity: var(--inspection-2); }
.journey-bottom { position: absolute; left: 4.5%; right: 4.5%; bottom: 56px; display: flex; align-items: flex-end; gap: clamp(30px, 6vw, 100px); }
.journey-chapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 27px; flex: 1; max-width: 800px; }
.journey-chapter { position: relative; padding: 0; border: 0; background: transparent; text-align: left; color: #82a0b0; cursor: pointer; font-family: var(--sans); }
.chapter-track { display: block; width: 100%; height: 2px; background: #7ea8b133; margin-bottom: 18px; overflow: hidden; }
.chapter-track i { display: block; height: 100%; background: #c8f23b; transform: scaleX(var(--chapter-progress,0)); transform-origin: left; }
.chapter-label { display: flex; gap: 13px; align-items: baseline; }
.chapter-label b { font: .75rem var(--mono); }
.chapter-label strong { font-size: 1rem; font-weight: 500; }
.chapter-detail { display: block; margin-top: 7px; margin-left: 29px; font-size: .875rem; color: #7998aa; }
.journey-chapter.is-current { color: #edf7f9; }
.journey-chapter.is-current .chapter-label b { color: #c8f23b; }
.journey-chapter:hover { color: #d1f759; }
.journey-transport { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; padding-bottom: 2px; }
.journey-transport button, .journey-transport a { border: 0; padding: 0; background: none; color: #c4dae3; font: .875rem var(--mono); cursor: pointer; text-decoration: none; white-space: nowrap; }
.journey-transport button { color: #d1f759; }
.journey-transport button span:first-child { display: inline-block; width: 23px; }
.journey-transport a span { color: #d1f759; margin-left: 6px; }
.journey-markets { position: absolute; bottom: 15px; left: 4.5%; right: 4.5%; display: flex; justify-content: space-between; margin: 0; font: .75rem var(--mono); color: #86a6b8; letter-spacing: .04em; }
.journey :focus-visible { outline: 2px solid #d1f759; outline-offset: 6px; }

/* CAD layers become the surfaces and moving components of the same installation. */
.coordinate-marks { fill: #7ba7b8; stroke: #7ba7b8; stroke-width: 1; opacity: .5; font: 12px var(--mono); }
.coordinate-marks text { stroke: none; }
.floor-grid { fill: none; stroke: #6995a8; stroke-width: .7; opacity: .12; }
.equipment-shadow { fill: #020b15; opacity: calc(var(--construction) * .5); }
.cad-line, .duct-seam, .coil-fin, .filter-fin, .coil-manifold { fill: none; stroke: #78adbf; stroke-width: 1.3; stroke-linejoin: round; }
/* SVG calc() must resolve to a length; unitless results are rejected by Firefox. */
.cad-line, .duct-seam { stroke-dasharray: 1; stroke-dashoffset: calc(1px - var(--drawing) * 1px); }
.design-dimensions { opacity: calc(.68 - var(--construction) * .43); fill: none; stroke: #7fbcd1; stroke-width: .9; }
.design-dimensions text { stroke: none; fill: #97c3d4; font: 11px var(--mono); letter-spacing: 1.5px; }
.design-dimensions .datum { stroke-dasharray: 3 8; opacity: .35; }
.dimension-line { stroke-dasharray: 1; stroke-dashoffset: calc(1px - var(--drawing) * 1px); }
.assembly { transform: translateY(calc((1 - var(--construction)) * var(--part,0) * -13px)); }
.metal-front { fill: url(#metal-front); opacity: var(--construction); }
.metal-top { fill: url(#metal-top); opacity: var(--construction); }
.metal-side { fill: url(#metal-side); opacity: var(--construction); }
.access-window { fill: #061a28; stroke: #618c9c; stroke-width: 1.2; fill-opacity: calc(var(--construction) * .8); opacity: var(--drawing); }
.filter-bed { fill: #527274; fill-opacity: calc(var(--construction) * .32); }
.filter-fin { stroke: #a2bfae; opacity: var(--drawing); }
.filter-assembly { transform: translateX(var(--filter-shift, 0px)); }
.coil-bed { fill: #284e60; fill-opacity: var(--construction); stroke: #75b6c5; stroke-width: 1; }
.coil-fin { stroke: #9bbcc6; stroke-width: 2; opacity: var(--drawing); }
.coil-manifold { stroke: #b5cfcc; stroke-width: 4; opacity: var(--drawing); }
.fan-housing { fill: none; stroke: #9fbac8; stroke-width: 1.3; opacity: var(--drawing); }
.fan-rotor { transform: rotate(var(--rotor)); transform-origin: 855px 465px; fill: #436574; fill-opacity: var(--construction); }
.fan-hub { fill: #152e3d; }
.mounting-foot { fill: #25414d; stroke: #74919d; opacity: var(--drawing); }
.bolt { fill: #9ab2ba; opacity: var(--construction); }
.handle { stroke: #b5c7cb; stroke-width: 3; opacity: var(--construction); }
.pipe-shadow { stroke: #020f19; stroke-width: 17; opacity: calc(var(--construction) * .55); fill: none; }
.supply-pipe, .return-pipe { fill: none; stroke: #77b7c9; stroke-width: calc(1.6px + var(--construction) * 8px); stroke-linecap: square; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1px - var(--drawing) * 1px); }
.supply-pipe { stroke: #74c8d7; }
.return-pipe { stroke: #d3ad72; }
.pipe-highlight { fill: none; stroke: #d7eeee; stroke-width: 1.2; opacity: calc(var(--construction) * .5); }
.flange { fill: none; stroke: #9abcca; stroke-width: 2; opacity: var(--construction); }
.valve { fill: #1d4554; stroke: #a2d9d7; stroke-width: 1.5; opacity: var(--drawing); }
.valve ellipse { fill: #b8d94f; stroke: #cfef73; }
.pump { fill: none; stroke: #9dcad2; stroke-width: 1.8; opacity: var(--drawing); }
.pump-casing { fill: #1c5367; fill-opacity: var(--construction); }
.pump-base { fill: #344b57; }
.pump-impeller { fill: #9bc4c9; fill-opacity: var(--construction); }
.sensors { fill: #15364a; stroke: #c0d7d8; stroke-width: 1.5; opacity: var(--construction); }
.cabinet-inset { fill: #05131e; fill-opacity: calc(var(--construction) * .93); stroke: #53798d; stroke-width: 1.2; opacity: var(--drawing); }
.controller { fill: #395e6d; stroke: #7eabb9; stroke-width: 1; opacity: var(--construction); }
.controller-display { fill: #b4d781; opacity: calc(var(--commission) * .85); }
.screen-trace { fill: none; stroke: #294835; stroke-width: 1.5; opacity: var(--commission); }
.breakers { fill: #9daeb2; stroke: #39545e; stroke-width: 1; opacity: var(--construction); }
.breakers path { stroke: #192d38; stroke-width: 3; }
.din-rail { stroke: #7898a4; stroke-width: 3; opacity: var(--construction); }
.terminal-blocks { fill: #c8b983; stroke: #c8b983; stroke-width: 1; opacity: var(--construction); }
.panel-wire { fill: none; stroke: #d6b77c; stroke-width: 1.1; opacity: var(--construction); }
.relay-bank { fill: #365a6a; stroke: #83a7b7; stroke-width: 1; opacity: var(--construction); }
.relay-bank circle, .cabinet-power { fill: #cbf65b; opacity: var(--commission); }
.cabinet-door { fill: #294855; fill-opacity: calc(var(--construction) * .7); stroke: #7698a5; stroke-width: 1.2; opacity: var(--construction); transform-origin: 1255px 365px; transform: scaleX(calc(.1 + var(--construction) * .9)); }
.cabinet-glands { fill: none; stroke: #9bb4bb; stroke-width: 6; opacity: var(--construction); }
.signal-wire { fill: none; stroke: #d0e9b0; stroke-width: 1.1; stroke-dasharray: .012 .008; opacity: calc(.25 * var(--drawing) + .6 * var(--construction)); }
.air-stream { fill: none; stroke: #bdedf0; stroke-width: 2; stroke-dasharray: .02 .05; stroke-dashoffset: var(--flow,0); opacity: calc(var(--commission) * .5); }
.water-stream { fill: none; stroke: #e1f7bf; stroke-width: 2.3; stroke-dasharray: .012 .075; stroke-dashoffset: var(--flow,0); opacity: calc(var(--commission) * .8); }
.scene-tag { fill: #b9d4df; font: 12px var(--mono); letter-spacing: 1px; opacity: var(--drawing); }
.scene-tag circle { fill: #102b3e; stroke: #6796ac; stroke-width: 1; }
.scene-tag .tag-number { font-size: 10px; fill: #c7f457; }
.scene-tag .tag-sub { font-size: 10px; fill: #7297aa; letter-spacing: .9px; }
.callout-line { fill: none; stroke: #83b2c2; stroke-width: .9; opacity: .65; }
.installation-crosshairs { fill: none; stroke: #b9d7dc; opacity: calc(var(--drawing) * .4); }
.maintenance-overlay { opacity: var(--service); }
.inspection-point { opacity: var(--inspection-0); }
.inspection-pump { opacity: var(--inspection-1); }
.inspection-controls { opacity: var(--inspection-2); }
.inspection-aura { fill: url(#inspection-glow); }
.inspection-ring { fill: none; stroke: #d0f76a; stroke-width: 1.5; stroke-dasharray: 7 8; }
.inspection-tick { fill: none; stroke: #d0f76a; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.inspection-link { fill: none; stroke: #bede69; stroke-width: 1; stroke-dasharray: 2 8; opacity: .5; }
.journey:not(.journey-ready) .journey-chapters { pointer-events: none; }
.journey:not(.journey-ready) .journey-transport button { display: none; }
.journey:not(.journey-ready) .chapter-track i { transform: scaleX(1); }
.journey.is-playing .journey-chapter-copy { animation: none; }

/* Use a single offset for the persistent navigation. */
section[id] { scroll-margin-top: 0; }
body:not(.js-enabled) .site-header { position: static; }
.form-panel :focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.footer-top nav a, .footer-contact a { font-size: .875rem; }
@media (min-width: 1600px) { .journey-copy { top: 15%; } .journey-chapter-copy { top: 57%; width: 350px; } }
@media (max-width: 1100px) {
  .journey-copy { max-width: 620px; }
  .journey-chapter-copy { width: 265px; top: 54%; }
  .journey-chapter-copy h2 { font-size: 1.35rem; }
  .journey-chapter-copy > p:last-child { font-size: 1rem; }
  .journey-bottom { gap: 35px; }
  .journey-drawing-note { max-width: 230px; text-align: right; line-height: 1.5; }
  .journey-service-notes { display: none; }
  .chapter-detail { font-size: .8125rem; }
}
@media (max-width: 900px) {
  .journey { height: auto; min-height: 1080px; }
  .journey-overline { top: 25px; }
  .journey-drawing-note { display: none; }
  .journey-copy { top: 82px; left: 6%; }
  .journey h1 { font-size: clamp(2.8rem, 6.4vw, 4rem); }
  .journey-intro { max-width: 400px; }
  .journey-visual { top: 250px; height: 625px; left: -53%; right: -12%; }
  .journey-shade { background: linear-gradient(180deg,#071d2dd9 0,transparent 32%,transparent 68%,#061724 88%); }
  .journey-chapter-copy { top: 792px; width: auto; right: 6%; left: 6%; }
  .journey-chapter-copy h2 { font-size: 1.5rem; }
  .journey-chapter-copy > p:last-child { font-size: 1rem; max-width: 490px; }
  .journey-chapter-number { position: absolute; right: 0; top: 5px; }
  .journey-bottom { bottom: 70px; display: block; left: 6%; right: 6%; }
  .journey-chapters { gap: 18px; max-width: none; }
  .journey-transport { flex-direction: row; justify-content: space-between; margin-top: 24px; }
  .chapter-track { margin-bottom: 13px; }
  .chapter-detail { display: none; }
  .journey-markets { left: 6%; right: 6%; bottom: 20px; }
}
@media (max-width: 560px) {
  .journey { min-height: 1020px; }
  .journey-overline { left: 6%; right: 6%; font-size: .75rem; letter-spacing: .025em; }
  .journey-copy { top: 67px; right: 6%; }
  .journey h1 { font-size: clamp(2.05rem, 7.8vw, 2.85rem); line-height: 1.13; }
  .journey-intro { font-size: 1rem; margin: 19px 0 22px; max-width: 310px; }
  .journey-visual { top: 246px; height: 390px; left: -42%; right: -3%; }
  .journey-scene { overflow: visible; }
  .journey-chapter-copy { top: 610px; }
  .journey-chapter-number { position: static; margin-bottom: 10px; }
  .journey-chapter-copy h2 { font-size: 1.35rem; }
  .journey-chapter-copy > p:last-child { line-height: 1.55; }
  .journey-bottom { bottom: 100px; }
  .journey-chapters { gap: 11px; }
  .chapter-label { gap: 6px; display: block; }
  .chapter-label b { display: block; margin-bottom: 5px; }
  .chapter-label strong { font-size: .875rem; }
  .journey-transport { margin-top: 22px; }
  .journey-transport a { font-size: .8125rem; }
  .journey-markets { font-size: .75rem; line-height: 1.6; display: block; }
  .journey-markets span { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .journey *, .journey *::before, .journey *::after { animation: none !important; transition: none !important; }
}