.tunnel-hero{padding:155px max(24px,calc((100vw - 1280px)/2)) 48px;background:radial-gradient(ellipse at 80% 15%,#4c95f2,transparent 65%),#0755d7;color:white;display:grid;grid-template-columns:1fr 1fr;column-gap:65px;align-items:center;overflow:hidden}.tunnel-back{display:inline-block;font-size:12px;margin-bottom:28px;color:#d8ecff}.tunnel-hero h1{font-size:clamp(58px,6.7vw,96px);line-height:.98}.tunnel-hero em{color:#b7eaff}.tunnel-hero p{font-size:16px;line-height:1.7;margin:25px 0 30px}.tunnel-hero svg,.tunnel-points svg,.tunnel-closing svg,.tunnel-video-section a svg{width:21px;height:21px;flex-shrink:0}.tunnel-hero__photo{position:relative;transform:rotate(3deg);border-radius:28px;overflow:hidden;box-shadow:0 25px 65px #00295e44}.tunnel-hero__photo img{width:100%;height:430px;object-fit:cover}.tunnel-hero__photo:after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(transparent,#052e76b8)}.tunnel-hero__photo>span{position:absolute;bottom:26px;left:26px;right:26px;font:600 29px/1.1 Outfit,sans-serif;z-index:1}.tunnel-specs{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);margin-top:64px;border-top:1px solid #ffffff4a;padding-top:32px}.tunnel-specs>div{padding-inline:25px;border-left:1px solid #ffffff3d}.tunnel-specs>div:first-child{padding-left:0;border:0}.tunnel-specs strong{font:600 47px/1.1 Outfit,sans-serif;letter-spacing:-.04em}.tunnel-specs small{font:600 17px Inter,sans-serif;letter-spacing:0}.tunnel-specs span{display:block;font-size:12px;color:#daebff;margin-top:8px}.tunnel-explained{padding:100px max(24px,calc((100vw - 1280px)/2));background:#c9e0ff}.tunnel-section-heading{max-width:900px;margin-bottom:50px}.tunnel-section-heading h2{font-size:clamp(38px,4.7vw,66px)}.tunnel-points{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.tunnel-points article{padding:35px;background:#e9f3ffb8;border:1px solid #ffffff9e;border-radius:24px}.tunnel-symbol{display:block;color:var(--blue);font:400 46px/1 Inter,sans-serif;margin-bottom:24px}.tunnel-points h3{font-size:31px;font-weight:600}.tunnel-points p{font-size:15px;line-height:1.85;color:#365675;margin-top:20px}.tunnel-points a{display:flex;align-items:center;gap:20px;font-size:13px;font-weight:600;color:var(--deep);margin-top:23px}.tunnel-video-section{padding:100px max(24px,calc((100vw - 1280px)/2));display:grid;grid-template-columns:.8fr 1.2fr;column-gap:65px;align-items:center;background:#073b9e;color:white}.tunnel-video-section h2{font-size:clamp(40px,4.6vw,66px)}.tunnel-video-section>div>p{font-size:15px;line-height:1.8;margin-top:24px;max-width:420px}.tunnel-video-section a{display:inline-flex;align-items:center;gap:15px;font-size:13px;border-bottom:1px solid #fff7;padding-bottom:7px;margin-top:25px}.tunnel-video{position:relative;aspect-ratio:16/10;border:1px solid #ffffff55;border-radius:26px;overflow:hidden;background:#082b65}.tunnel-video button{width:100%;height:100%;padding:0;display:block;text-align:left}.tunnel-video img{width:100%;height:100%;object-fit:cover;opacity:.7;transition:transform .4s}.tunnel-video button:hover img{transform:scale(1.035)}.tunnel-video__play:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,#06285bd9);pointer-events:none}.tunnel-play-icon{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);width:75px;height:75px;border:1px solid #fff9;border-radius:50%;background:#e7f2ff30;backdrop-filter:blur(16px);display:grid;place-items:center;z-index:1}.tunnel-play-icon svg{width:38px;height:38px}.tunnel-video__caption{position:absolute;left:27px;bottom:24px;right:20px;z-index:1}.tunnel-video__caption strong{font:600 25px/1.15 Outfit,sans-serif}.tunnel-video__caption small{display:block;font-size:11px;margin-top:8px;color:#d6e9ff}.tunnel-video iframe{width:100%;height:100%;border:0;display:block}.tunnel-video-note{grid-column:2;font-size:11px;color:#c2d9ff;margin-top:14px}.tunnel-closing{padding:100px max(24px,calc((100vw - 1280px)/2));background:linear-gradient(135deg,#095bec,#4087f0);color:white}.tunnel-closing h2{font-size:clamp(44px,5vw,76px)}.tunnel-closing p{font-size:16px;line-height:1.7;margin:25px 0 30px}.windkanal-page .technology{scroll-margin-top:100px}
@media(max-width:800px){.tunnel-hero{gap:30px;padding-top:125px}.tunnel-hero h1{font-size:60px}.tunnel-hero__photo img{height:360px}.tunnel-hero__photo>span{font-size:24px}.tunnel-video-section{gap:30px;grid-template-columns:1fr}.tunnel-video{margin-top:20px}.tunnel-video-note{grid-column:1}.tunnel-video-section>div>p{max-width:600px}}
@media(max-width:600px){.tunnel-hero{grid-template-columns:1fr;padding-top:115px;padding-bottom:32px}.tunnel-hero h1{font-size:67px}.tunnel-hero p{font-size:14px}.tunnel-hero__photo{margin:12px 4px 0}.tunnel-hero__photo img{height:270px}.tunnel-specs{margin-top:23px;padding-top:24px;gap:12px}.tunnel-specs>div{padding-inline:12px 0}.tunnel-specs strong{font-size:32px}.tunnel-specs small{font-size:11px}.tunnel-specs span{font-size:10px;line-height:1.5}.tunnel-explained,.tunnel-video-section,.tunnel-closing{padding-block:65px}.tunnel-points{grid-template-columns:1fr;gap:15px}.tunnel-points article{padding:28px}.tunnel-points h3{font-size:28px}.tunnel-points p{font-size:14px}.tunnel-symbol{margin-bottom:18px}.tunnel-video{border-radius:21px}.tunnel-video__caption{left:20px;bottom:20px}.tunnel-video__caption strong{font-size:22px}.tunnel-video__caption small{font-size:10px}.tunnel-play-icon{width:60px;height:60px;top:38%}.tunnel-video-note{font-size:10px}.tunnel-closing .button{font-size:12px}.tunnel-closing h2{font-size:45px}}
/* A single viewport scene: arrival, reveal, then the four-part air circuit. */
.tunnel-hero{min-height:100svh}
.tunnel-journey.is-animated{height:580svh;position:relative;overflow:clip;overflow-clip-margin:0}
.tunnel-journey.is-animated .tunnel-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:#d7e9ff}
.tunnel-journey.is-animated .tunnel-hero{position:absolute;inset:0;z-index:3;height:100%;min-height:0;padding-top:140px;padding-bottom:36px;grid-template-rows:minmax(0,1fr) auto;row-gap:25px;align-content:stretch;will-change:opacity}
.is-animated .tunnel-hero__photo img{height:clamp(240px,45svh,480px)}
.is-animated .tunnel-specs{margin-top:0;padding-top:25px}
.is-animated .tunnel-hero__copy,.is-animated .tunnel-hero__photo,.is-animated .tunnel-specs{will-change:transform,opacity}
.tunnel-journey.is-animated .technology{position:absolute;inset:0;opacity:0;visibility:hidden;padding:120px max(24px,calc((100vw - 1280px)/2)) 25px;background:#d7e9ff;display:flex;flex-direction:column}
.is-animated .tech-header-shield{display:none}
.is-animated .tech-heading{flex:none;margin:0 0 5px}
.is-animated .tech-heading .eyebrow{font-size:10px;margin-bottom:8px}
.is-animated .tech-heading h2{font-size:clamp(29px,3vw,43px);line-height:1.05}
.is-animated .tech-heading h2 br{display:none}
.is-animated .tech-heading h2 em{margin-inline-start:.2em}
.is-animated .tech-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:45px;flex:1;min-height:0;align-items:stretch}
.tunnel-journey.is-animated .tech-visual{position:relative;top:auto;margin:0;height:100%;min-height:0;max-height:none;width:100%;background:transparent;padding:0;box-shadow:none;z-index:0}
.is-animated .tech-steps{position:relative;margin:0;padding:0;display:block;direction:inherit}
.tunnel-journey.is-animated .tech-step,.tunnel-journey.is-animated .tech-step:last-child{position:absolute;inset:0;min-height:0;padding:20px 0;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;transform:none;background:none;border:0;box-shadow:none}
.is-animated .tech-step h3{max-width:430px;font-size:clamp(32px,3.8vw,55px)}
.is-animated .tech-step .step-number{font-size:65px;margin-bottom:15px}
.is-animated .tech-step p{font-size:15px;max-width:370px;line-height:1.65}
.is-animated .tech-step p+p{font-size:12px}
.is-animated .tech-callouts{font-size:10px}
@media(max-width:800px){
 .tunnel-journey.is-animated{height:520svh}
 .tunnel-journey.is-animated .tunnel-hero{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:15px;padding:100px 24px 24px}
 .is-animated .tunnel-back{margin-bottom:14px;font-size:10px}
 .is-animated .tunnel-hero .eyebrow{margin-bottom:10px}
 .is-animated .tunnel-hero h1{font-size:clamp(38px,7.4svh,65px)}
 .is-animated .tunnel-hero p{font-size:13px;line-height:1.5;margin:14px 0}
 .is-animated .tunnel-hero .button{font-size:12px;min-height:44px;padding:12px 18px}
 .is-animated .tunnel-hero__photo{height:100%;margin:0 4px;min-height:0;border-radius:20px;align-self:stretch}
 .is-animated .tunnel-hero__photo img{height:100%}
 .is-animated .tunnel-hero__photo>span{font-size:19px;bottom:17px;left:18px}
 .is-animated .tunnel-specs{margin:0;padding-top:17px;gap:8px}
 .is-animated .tunnel-specs strong{font-size:28px}
 .is-animated .tunnel-specs small{font-size:10px}
 .is-animated .tunnel-specs span{font-size:9px;line-height:1.45}
 .tunnel-journey.is-animated .technology{padding:100px 22px 20px}
 .is-animated .tech-heading h2{font-size:28px}
 .is-animated .tech-heading h2 br{display:block}
 .is-animated .tech-heading h2 em{margin:0}
 .is-animated .tech-layout{grid-template-columns:1fr;grid-template-rows:minmax(180px,1fr) minmax(225px,.8fr);gap:6px}
 .tunnel-journey.is-animated .tech-step,.tunnel-journey.is-animated .tech-step:last-child{padding:14px 4px;justify-content:flex-start}
 .is-animated .tech-step .step-number{position:absolute;right:0;top:8px;font-size:43px;margin:0;opacity:.3}
 .is-animated .tech-step h3{font-size:30px;max-width:280px}
 .is-animated .tech-step .eyebrow{font-size:10px;margin:0 0 8px;padding-right:50px}
 .is-animated .tech-step p{font-size:12px;margin-top:12px;max-width:360px}
 .is-animated .tech-step p+p{font-size:10px;margin-top:9px}
 .is-animated .tech-callouts{display:none}
 .is-animated .diagram-note{font-size:8px}
}
.is-animated .tech-steps{overflow:hidden}
.is-animated .tech-step{transition:none;will-change:transform,opacity}
@media(max-width:800px){
 .tunnel-journey.is-animated .tunnel-hero{padding-bottom:82px}
 .is-animated .tunnel-hero h1{font-size:clamp(38px,6.2svh,58px)}
}
@media(min-width:801px){.is-animated #tech-canvas,.is-animated .tech-fallback{height:calc(100% - 24px)}}

/* Mobile keeps the complete hero-to-circuit journey in one pinned viewport. */
@media(max-width:800px){
 .tunnel-journey.is-animated{height:470svh}
 .tunnel-journey.is-animated .tunnel-stage{contain:paint}
 .is-animated .tunnel-hero__photo{box-shadow:none;backface-visibility:hidden}
 .tunnel-journey.is-animated .technology{padding:96px 20px 78px}
 .is-animated .tech-layout{grid-template-rows:minmax(180px,1fr) minmax(235px,.9fr);gap:14px}
 .is-animated #tech-canvas,.is-animated .tech-fallback{inset:0 0 auto;height:calc(100% - 60px)}
 .is-animated .tech-callouts{position:absolute;inset:auto 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;height:auto;z-index:4}
 .is-animated .tech-callouts span,.is-animated .tech-visual[data-step='3'] .tech-callouts span{position:relative;inset:auto;display:grid;place-items:center;min-height:45px;padding:7px 8px;border-radius:12px;font:600 11px/1.3 Inter,sans-serif;text-align:center;opacity:1;transform:none}
 .is-animated .diagram-note{display:none}
 .is-animated .tech-steps{border-radius:18px;isolation:isolate}
 .tunnel-journey.is-animated .tech-step,.tunnel-journey.is-animated .tech-step:last-child{inset:0 0 auto;min-height:0;padding:18px 18px 20px;border:1px solid #ffffffc7;border-radius:18px;background:#ffffffc9;box-shadow:none;justify-content:flex-start}
 .is-animated .tech-step .step-number{right:16px;top:17px;font-size:35px;line-height:1}
 .is-animated .tech-step h3{font-size:29px;max-width:none;line-height:1.08}
 .is-animated .tech-step .eyebrow{margin-bottom:12px;font-size:10px;min-height:15px;padding-right:48px}
 .is-animated .tech-step p{font-size:13px;line-height:1.5;margin-top:12px;max-width:none}
 .is-animated .tech-step p+p{font-size:11px;line-height:1.45;margin-top:10px}
}

/* Mobile R9: the heading exits before the text rail starts. The canvas keeps
   a fixed, larger render size; only its composited transform changes. */
@media(max-width:800px){
 .tunnel-journey.is-animated{height:500svh;view-timeline-name:--tunnel;view-timeline-axis:block;view-timeline-inset:0}
 .tunnel-journey.is-animated .technology{padding:92px 18px 76px}
 .is-animated .tech-heading{position:absolute;top:98px;left:20px;right:20px;z-index:2;will-change:transform,opacity}
 .is-animated .tech-layout{grid-template-rows:minmax(0,1fr) 225px;gap:10px}
 .is-animated #tech-canvas,.is-animated .tech-fallback{height:100%;inset:0}
 .is-animated .tech-visual{transform-origin:center bottom;will-change:transform}
 .is-animated .tech-callouts{display:none}
 .is-animated .tunnel-hero__photo{transform:rotate(3deg)}
 .is-animated .tunnel-hero__copy,.is-animated .tunnel-specs{backface-visibility:hidden}
 .is-animated .tech-step h3{font-size:28px}
 .is-animated .tech-step p{font-size:12px;line-height:1.5}
 .is-animated .tech-step p+p{font-size:10px;line-height:1.45}
}
/* Native scroll timelines keep touch scrolling and the hero on the same
   compositor clock, including when the browser's address bar moves. */
@supports (animation-timeline:view()){
 @media(max-width:800px){
  .tunnel-journey.is-native-scroll .tunnel-hero__copy{animation:tunnel-copy-out linear both;animation-timeline:--tunnel;animation-range:contain 0% contain 13%}
  .tunnel-journey.is-native-scroll .tunnel-hero__photo{animation:tunnel-photo-out linear both;animation-timeline:--tunnel;animation-range:contain 0% contain 13%}
  .tunnel-journey.is-native-scroll .tunnel-specs{animation:tunnel-specs-out linear both;animation-timeline:--tunnel;animation-range:contain 0% contain 13%}
  .tunnel-journey.is-native-scroll .tunnel-hero{animation:tunnel-fade-out linear both;animation-timeline:--tunnel;animation-range:contain 4% contain 14%}
  .tunnel-journey.is-native-scroll .technology{animation:tunnel-fade-in linear both;animation-timeline:--tunnel;animation-range:contain 4% contain 14%;visibility:visible}
  .tunnel-journey.is-native-scroll .tech-heading{animation:tunnel-heading-out linear both;animation-timeline:--tunnel;animation-range:contain 14% contain 24%}
  .tunnel-journey.is-native-scroll .tech-visual{animation:tunnel-model-in linear both;animation-timeline:--tunnel;animation-range:contain 14% contain 24%}
 }
}
@keyframes tunnel-copy-out{to{transform:translate3d(-35vw,0,0)}}
@keyframes tunnel-photo-out{from{transform:translate3d(0,0,0) rotate(3deg)}to{transform:translate3d(38vw,-16px,0) rotate(3deg)}}
@keyframes tunnel-specs-out{to{transform:translate3d(0,65px,0)}}
@keyframes tunnel-fade-out{from{opacity:1}to{opacity:0}}
@keyframes tunnel-fade-in{from{opacity:0}to{opacity:1}}
@keyframes tunnel-heading-out{from{transform:translate3d(0,0,0);opacity:1}to{transform:translate3d(0,-115px,0);opacity:0}}
@keyframes tunnel-model-in{from{transform:scale(.72)}to{transform:scale(1)}}

/* R10: mobile begins with a full-size model; no extra heading/zoom phase. */
@media(max-width:800px){
 .tunnel-journey.is-animated{height:470svh}
 .tunnel-journey.is-animated .tech-heading{display:none}
 .tunnel-journey.is-animated .tech-visual{animation:none!important;transform:none!important;will-change:auto}
 .tunnel-journey.is-animated .tunnel-stage{contain:layout paint}
}