/* Native engineering illustration: real vector layers rather than a moving poster. */
.motion-hero { overflow: hidden; background: #fafcf9; padding: 64px 0 26px; }
.motion-heading { width: calc(100% - 112px); max-width: 1680px; display: grid; grid-template-columns: 1.55fr 1fr; align-items: end; gap: 70px; margin-bottom: 50px; }
.motion-heading .eyebrow { color: #9d462f; margin-bottom: 19px; }
.motion-heading h1 { font-size: clamp(54px, 6.7vw, 112px); letter-spacing: -.065em; line-height: 1.03; }
.motion-heading h1 em { color: #267e6d; }
.motion-heading h1 > span { display: block; animation: headline-arrive 1.1s cubic-bezier(.2,.7,.2,1) both; }
.motion-copy { padding-bottom: 5px; animation: headline-arrive 1.1s .15s both; }
.motion-copy p { color: #526d76; font-size: 15px; line-height: 1.85; max-width: 470px; margin-bottom: 23px; }
.engineering-stage { width: calc(100% - 48px); margin-inline: auto; border: 1px solid #cbdcd8; border-radius: 20px; background: #fff; box-shadow: 0 18px 70px #2c625214; overflow: hidden; animation: stage-arrive 1.3s .15s cubic-bezier(.2,.7,.2,1) both; }
.stage-toolbar { min-height: 66px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 28px; border-bottom: 1px solid #dce7e3; background: #ffffffed; }
.stage-brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.stage-brand img { object-fit: contain; }
.stage-brand b { font-size: 14px; letter-spacing: -.03em; }
.concept-pill { font-size: 9px; background: #edf4ef; border: 1px solid #d4e3da; padding: 5px 8px; color: #4a6f61; margin-inline-start: 8px; }
.stage-actions { display: flex; align-items: center; gap: 6px; }
.layer-button { display: flex; gap: 7px; align-items: center; background: transparent; border: 1px solid transparent; padding: 10px 14px; color: #5f757b; font-size: 11px; border-radius: 7px; }
.layer-button.selected { background: #e7f2ed; border-color: #bdd8cb; color: #1c594d; }
.layer-button:hover { background: #f0f5f2; }
.layer-dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: #359d82; }
.layer-dot.egress { background: #4986ab; }.layer-dot.coordination { background: #e58160; }
.motion-toggle { width: 34px; height: 34px; margin-inline-start: 12px; border-radius: 50%; border: 1px solid #c8d8d2; background: white; color: #315c55; font-size: 12px; }
.stage-canvas { position: relative; height: clamp(390px, 37vw, 650px); display: grid; place-items: center; perspective: 1500px; background: radial-gradient(ellipse at 50% 45%, #d4e8de 0, #edf4ef 53%, #f7faf6 85%); overflow: hidden; }
.stage-canvas::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#94b7aa18 1px, transparent 1px), linear-gradient(90deg,#94b7aa18 1px,transparent 1px); background-size: 44px 44px; }
.engineering-board { width: min(78%, 1220px); position: relative; transform: translateY(var(--scene-shift, 0px)) rotateX(var(--scene-tilt, 18deg)) rotateZ(-5deg); transform-style: preserve-3d; filter: drop-shadow(0 30px 20px #336b5628); transition: transform .18s linear; }
.engineering-board svg { width: 100%; height: auto; overflow: visible; }
.plan-walls { stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw-walls 2.5s cubic-bezier(.2,.6,.2,1) both; }
.device { transform-box: fill-box; transform-origin: center; }
.coverage { fill: #56bd9917; stroke: #5aa78f; stroke-width: 1; stroke-dasharray: 3 4; animation: coverage-breathe 3.6s ease-in-out infinite; }
.device-ring { fill: #fff; stroke: #26846d; stroke-width: 2; }
.device-core { fill: #26846d; }
.device-1 .coverage,.device-5 .coverage { animation-delay: -.5s; }
.device-2 .coverage,.device-6 .coverage { animation-delay: -1s; }
.device-3 .coverage,.device-7 .coverage { animation-delay: -1.5s; }
.engineering-board .layer-coverage,.engineering-board .layer-egress,.engineering-board .layer-coordination { transition: opacity .55s ease; }
.engineering-board .layer-egress,.engineering-board .layer-coordination { opacity: 0; }
.layer-egress .egress-trace { stroke-dasharray: 1; stroke-dashoffset: 0; }
.layer-egress .travel-point { opacity: 0; }
.layer-egress .travel-point { offset-path: path('M745 132V260H160V440'); offset-distance: 0%; cx: 0; cy: 0; }
.layer-egress .egress-trace { animation: draw-route 4s ease-in-out infinite; }
.layer-egress .travel-point { animation: travel-route 4s linear infinite; }
.layer-egress .device-core { fill: #4986ab; }
.layer-egress .device-ring { stroke: #4986ab; }
.engineering-stage.layer-egress .layer-egress { opacity: 1; }
.engineering-stage.layer-egress .layer-coverage { opacity: .16; }
.engineering-stage.layer-coordination .layer-coordination { opacity: 1; }
.engineering-stage.layer-coordination .layer-coverage { opacity: .32; }
.coordination-route { animation: route-flow 2s linear infinite; }
.floating-note { position: absolute; z-index: 2; display: flex; gap: 12px; align-items: center; padding: 17px 21px; background: #ffffffed; border: 1px solid #d4e4dd; border-radius: 12px; box-shadow: 0 10px 35px #305e4912; animation: note-float 5s ease-in-out infinite; }
.note-top { top: 15%; inset-inline-end: 7%; }.note-bottom { bottom: 13%; inset-inline-start: 7%; animation-delay: -2.5s; }
.note-symbol { color: #25866e; font-size: 29px; }.note-symbol.coral { color: #d86c4b; }
.floating-note strong { display: block; font-size: 12px; font-weight: 650; }.floating-note small { display: block; font-size: 10px; color: #6b8388; margin-top: 5px; }
.stage-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 28px; font-size: 9px; color: #59767b; background: #fff; border-top: 1px solid #dce7e3; letter-spacing: .04em; }
.scroll-cue { display: flex; align-items: center; justify-content: center; gap: 15px; padding: 24px 0 2px; font-size: 11px; color: #54766c; }.scroll-cue span:last-child { animation: cue-down 2s ease infinite; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.visual-reference { border-block: 1px solid var(--line); background: #f1f6f0; }
.visual-reference > summary { padding-block: 26px; font-size: 13px; }.visual-reference .slideshow { border-top: 1px solid var(--line); }
[dir=rtl] .motion-heading h1 { letter-spacing: -.04em; line-height: 1.25; font-size: clamp(47px, 5.8vw, 98px); }
@keyframes headline-arrive { from { opacity: 0; transform: translateY(30px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes stage-arrive { from { opacity: 0; transform: translateY(60px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes draw-walls { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes coverage-breathe { 0%,100% { fill-opacity: .5; stroke-opacity: .45; stroke-dashoffset: 0; } 50% { fill-opacity: 1; stroke-opacity: 1; stroke-dashoffset: 14; } }
@keyframes draw-route { 0% { stroke-dashoffset: 1; } 65%,100% { stroke-dashoffset: 0; } }
@keyframes travel-route { 0% { opacity: 0; offset-distance: 0%; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; offset-distance: 100%; } }
@keyframes route-flow { to { stroke-dashoffset: -28; } }
@keyframes note-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes cue-down { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media(max-width: 1000px) {
  .motion-heading { gap: 35px; width: calc(100% - 64px); }.motion-heading h1 { font-size: 65px; }.motion-copy p { font-size: 13px; }
  .floating-note { padding: 13px; }.floating-note strong { font-size: 10px; }.floating-note small { font-size: 9px; }
  .concept-pill { display: none; }.engineering-board { width: 88%; }
}
@media(max-width: 760px) {
  .motion-hero { padding-top: 36px; }.motion-heading { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 23px; margin-bottom: 30px; }
  .motion-heading h1 { font-size: clamp(43px, 9.5vw, 65px); }.motion-copy p { font-size: 14px; max-width: 550px; margin-bottom: 18px; }.motion-heading .eyebrow { margin-bottom: 17px; }
  .engineering-stage { width: calc(100% - 20px); border-radius: 12px; }.stage-toolbar { padding: 13px 14px; flex-wrap: wrap; gap: 12px; }.stage-brand { width: 100%; }.stage-actions { width: 100%; justify-content: space-between; gap: 3px; }
  .layer-button { font-size: 10px; padding: 9px 8px; gap: 5px; }.motion-toggle { margin-inline-start: auto; flex-shrink: 0; }.concept-pill { display: inline-block; }
  .stage-canvas { height: 340px; }.engineering-board { width: 122%; flex-shrink: 0; }.engineering-board svg { width: 100%; }.floating-note { padding: 10px; border-radius: 8px; }.note-top { top: 7%; inset-inline-end: 5%; }.note-bottom { bottom: 6%; inset-inline-start: 5%; }
  .floating-note strong { font-size: 9px; }.floating-note small { font-size: 8px; }.note-symbol { font-size: 22px; }.stage-footer { padding: 12px 14px; font-size: 8px; flex-wrap: wrap; gap: 7px; }
  [dir=rtl] .motion-heading h1 { font-size: clamp(38px, 8.5vw, 57px); }.scroll-cue { padding-top: 18px; }
}
@media(prefers-reduced-motion: reduce) {
  .motion-hero *, .motion-hero *::before { animation: none !important; transition: none !important; }
  .engineering-board { transform: none !important; }.layer-egress .travel-point { display: none; }
}

/* Full-width image hero; the engineering scene remains the next section. */
.banner-hero { width: 100%; background: #f1f6f3; }
.banner-hero .slideshow { width: 100%; aspect-ratio: 1672 / 941; padding-bottom: 86px; box-sizing: content-box; overflow: hidden; isolation: isolate; }
.banner-hero .slide { display: block; position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 1s cubic-bezier(.22,.61,.36,1), visibility 1s; }
.banner-hero .slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.banner-hero .slide-artwork { position: absolute; inset: 0 0 86px; width: 100%; height: calc(100% - 86px); object-fit: cover; aspect-ratio: auto; }
.banner-hero .slide.is-active .slide-artwork { animation: banner-settle 1s cubic-bezier(.22,.61,.36,1) both; }
.banner-hero .slide figcaption { position: absolute; inset-inline: 0; bottom: 0; height: 86px; }
.banner-hero .slide-controls { z-index: 3; }
.banner-timeline { position: absolute; z-index: 4; bottom: 0; inset-inline: 0; height: 3px; background: #b9d2c533; }
.banner-timeline span { display: block; width: 0; height: 100%; background: #d66a4a; }
.banner-timing .banner-timeline span { animation: banner-time 7s linear forwards; }
.reading-progress { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 100; pointer-events: none; }
.reading-progress span { display: block; height: 100%; background: #277d69; transform: scaleX(0); transform-origin: left; }
[dir=rtl] .reading-progress span { transform-origin: right; }
.desktop a { position: relative; padding-block: 7px; }
.desktop a::after { content: ''; position: absolute; height: 1px; background: #2a7f6b; bottom: 0; inset-inline: 0; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.desktop a:hover::after, .desktop a.is-current::after { transform: scaleX(1); }
.desktop a.is-current { color: #216e5c; }
.button > span { transition: transform .25s ease; }
.button:hover > span { transform: translate(3px,-3px); }
[dir=rtl] .button:hover > span { transform: translate(-3px,-3px); }
.faq details { transition: background-color .25s ease; }
.faq details[open] { background: #edf4ef; padding-inline: 18px; }
@keyframes banner-settle { from { opacity: .6; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes banner-time { from { width: 0; } to { width: 100%; } }
@media (max-width: 760px) {
  .banner-hero .slideshow { padding-bottom: 132px; }
  .banner-hero .slide-artwork { inset-block-end: 132px; height: calc(100% - 132px); }
  .banner-hero .slide figcaption { height: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .banner-hero *, .banner-hero *::after { animation: none !important; transition: none !important; }
  .desktop a::after, .button > span { transition: none !important; }
}