/* CDDsystem's own monochrome 1—10 navigation layer. */
.airbag10 { --a10-bg:#e7e7e5; --a10-ink:#11110f; --a10-muted:#666661; --a10-line:#bdbdb8; background:#e7e7e5; color:var(--a10-ink); }
.airbag10-stage { position:relative; height:min(100svh, 920px); min-height:650px; overflow:hidden; isolation:isolate; touch-action:none; }
.airbag10-stage::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 50% 48%,#f7f7f5 0,transparent 55%),linear-gradient(135deg,#d5d5d2,#efefed 56%,#c9c9c6); opacity:.68; transition:background .7s ease; }
.airbag10-stage::after { content:""; position:absolute; inset:7.5% 4.2%; border:1px solid rgba(17,17,15,.11); pointer-events:none; }
.airbag10-particle-field { position:absolute; z-index:0; inset:0; width:100%; height:100%; pointer-events:none; opacity:.82; mix-blend-mode:multiply; }
.airbag10-motion { position:absolute; z-index:0; inset:-18%; overflow:hidden; pointer-events:none; filter:grayscale(1); opacity:.78; }
.motion-cloud,.motion-grid { position:absolute; display:block; pointer-events:none; }
.motion-cloud { width:62vmax; height:62vmax; border-radius:46% 54% 62% 38%; filter:blur(34px); mix-blend-mode:multiply; opacity:.3; background:radial-gradient(ellipse at 35% 35%,rgba(255,255,255,.95) 0 18%,rgba(208,208,205,.72) 43%,rgba(108,108,105,.28) 70%,transparent 76%); animation:motionDriftA 18s ease-in-out infinite alternate; }
.motion-cloud-a { left:4%; top:5%; transform:rotate(18deg); }
.motion-cloud-b { right:0; top:25%; width:54vmax; height:54vmax; opacity:.24; background:radial-gradient(ellipse at 65% 38%,rgba(255,255,255,.8) 0 16%,rgba(175,175,171,.6) 46%,rgba(52,52,49,.24) 72%,transparent 78%); animation:motionDriftB 23s ease-in-out infinite alternate; }
.motion-cloud-c { left:25%; bottom:-24%; width:48vmax; height:48vmax; opacity:.2; background:radial-gradient(ellipse at 50% 50%,rgba(30,30,28,.4),rgba(150,150,146,.22) 48%,transparent 74%); animation:motionDriftC 20s ease-in-out infinite alternate; }
.motion-grid { inset:0; opacity:.22; background:linear-gradient(115deg,transparent 0 42%,rgba(255,255,255,.55) 49%,transparent 57%),linear-gradient(25deg,transparent 0 45%,rgba(30,30,28,.18) 50%,transparent 56%); background-size:180% 180%; animation:motionGrid 16s linear infinite; }
@keyframes motionDriftA { from { transform:translate3d(-7%,-5%,0) rotate(8deg) scale(.9); } to { transform:translate3d(15%,11%,0) rotate(31deg) scale(1.12); } }
@keyframes motionDriftB { from { transform:translate3d(10%,-8%,0) rotate(-25deg) scale(1.08); } to { transform:translate3d(-16%,14%,0) rotate(16deg) scale(.88); } }
@keyframes motionDriftC { from { transform:translate3d(-18%,10%,0) rotate(0) scale(.85); } to { transform:translate3d(18%,-16%,0) rotate(28deg) scale(1.1); } }
@keyframes motionGrid { from { background-position:0 0,100% 100%; } to { background-position:180% -120%, -80% 220%; } }
.airbag10-topline { position:absolute; z-index:4; top:22px; left:4.2%; right:4.2%; display:flex; justify-content:space-between; gap:20px; color:var(--a10-muted); font:10px var(--latin-font); letter-spacing:.1em; }
.airbag10-topline span:first-child { display:flex; align-items:center; gap:9px; }
.airbag10-topline i { width:6px; height:6px; border-radius:50%; background:#2a2a27; }
.airbag10-slides { position:absolute; inset:0; }
.airbag10-geometry { position:absolute; z-index:1; inset:0; pointer-events:none; overflow:hidden; --geometry-rotate:0deg; --geometry-scale:1; --geometry-shift:0px; }
.geometry-orbit,.geometry-frame,.geometry-axis,.geometry-node { position:absolute; display:block; }
.geometry-orbit { left:50%; top:47%; width:min(54vw,610px); aspect-ratio:1; border:1px solid rgba(17,17,15,.18); border-radius:50%; transform:translate(-50%,-50%) rotate(var(--geometry-rotate)) scale(var(--geometry-scale)); transition:transform .86s cubic-bezier(.22,1,.36,1),border-radius .86s,opacity .5s; }
.geometry-orbit-a { border-right-color:rgba(17,17,15,.55); border-bottom-color:transparent; }
.geometry-orbit-b { width:min(39vw,430px); border-left-color:rgba(17,17,15,.08); border-top-color:rgba(17,17,15,.45); transform:translate(-50%,-50%) rotate(calc(var(--geometry-rotate) * -1)) scale(calc(var(--geometry-scale) * .86)); }
.geometry-frame { left:50%; top:47%; width:min(28vw,360px); aspect-ratio:1; border:1px solid rgba(17,17,15,.3); transform:translate(-50%,-50%) rotate(calc(45deg + var(--geometry-rotate))) scale(var(--geometry-scale)); transition:transform .86s cubic-bezier(.22,1,.36,1),border-radius .86s,opacity .5s; }
.geometry-frame-a { border-radius:2%; }
.geometry-frame-b { width:min(18vw,230px); border-style:dashed; transform:translate(-50%,-50%) rotate(calc(-22deg + var(--geometry-rotate))) scale(calc(var(--geometry-scale) * .78)); }
.geometry-axis { left:50%; top:47%; width:min(58vw,700px); height:1px; background:rgba(17,17,15,.12); transform:translate(-50%,-50%) rotate(var(--geometry-rotate)); transition:transform .86s cubic-bezier(.22,1,.36,1); }
.geometry-axis-y { transform:translate(-50%,-50%) rotate(calc(90deg + var(--geometry-rotate))); }
.geometry-node { left:50%; top:47%; width:10px; height:10px; border:1px solid #11110f; border-radius:50%; background:#e7e7e5; transform:translate(calc(-50% + var(--geometry-shift)), -50%) rotate(var(--geometry-rotate)) translateX(min(21vw,250px)); transition:transform .86s cubic-bezier(.22,1,.36,1),background .45s; }
.geometry-node-b { transform:translate(calc(-50% + var(--geometry-shift)), -50%) rotate(calc(120deg + var(--geometry-rotate))) translateX(min(18vw,210px)); }
.geometry-node-c { transform:translate(calc(-50% + var(--geometry-shift)), -50%) rotate(calc(240deg + var(--geometry-rotate))) translateX(min(16vw,185px)); }
.geometry-readout { position:absolute; left:50%; top:47%; transform:translate(14px,18px); color:rgba(17,17,15,.45); font:8px var(--latin-font); letter-spacing:.1em; transition:transform .86s cubic-bezier(.22,1,.36,1); }
.geometry-readout b { font-weight:400; }
.airbag10-geometry[data-item="2"] .geometry-frame-a { border-radius:50%; }
.airbag10-geometry[data-item="3"] .geometry-frame-a { border-radius:18% 52% 12% 44%; }
.airbag10-geometry[data-item="4"] .geometry-frame-a { transform:translate(-50%,-50%) rotate(calc(90deg + var(--geometry-rotate))) scale(var(--geometry-scale)); }
.airbag10-geometry[data-item="5"] .geometry-frame-b { border-radius:50%; transform:translate(-50%,-50%) rotate(calc(18deg + var(--geometry-rotate))) scale(calc(var(--geometry-scale) * .62)); }
.airbag10-geometry[data-item="6"] .geometry-orbit-a { border-radius:14% 50% 38% 62%; }
.airbag10-geometry[data-item="7"] .geometry-orbit-b { border-radius:0; transform:translate(-50%,-50%) rotate(calc(var(--geometry-rotate) + 35deg)) scale(calc(var(--geometry-scale) * .72)); }
.airbag10-geometry[data-item="8"] .geometry-frame-a { border-style:dashed; transform:translate(-50%,-50%) rotate(calc(-35deg + var(--geometry-rotate))) scale(calc(var(--geometry-scale) * 1.1)); }
.airbag10-geometry[data-item="9"] .geometry-axis { opacity:.55; }
.airbag10-geometry[data-item="10"] .geometry-frame-a { border-radius:0; transform:translate(-50%,-50%) rotate(var(--geometry-rotate)) scale(calc(var(--geometry-scale) * 1.18)); }
.airbag10-stage.is-transitioning .geometry-orbit-a { animation:geometryPulse .86s cubic-bezier(.22,1,.36,1); }
.airbag10-stage.is-transitioning .geometry-frame-a { animation:geometryFrame .86s cubic-bezier(.22,1,.36,1); }
@keyframes geometryPulse { 0% { opacity:.12; } 35% { opacity:.72; } 100% { opacity:.32; } }
@keyframes geometryFrame { 0% { border-radius:50%; } 45% { border-radius:0; } 100% { border-radius:2%; } }
.airbag10-slide { position:absolute; inset:0; display:grid; place-items:center; padding:90px 25% 205px 15%; opacity:0; transform:translate3d(0,30px,0) scale(.97); pointer-events:none; clip-path:inset(8% 0 0); transition:opacity .72s ease,transform .86s cubic-bezier(.22,1,.36,1),clip-path .86s cubic-bezier(.22,1,.36,1); }
.airbag10-slide.is-active { opacity:1; transform:none; pointer-events:auto; clip-path:inset(0); }
.airbag10-slide.is-leaving { opacity:0; transform:translate3d(calc(var(--a10-direction, 1) * -8%),0,0) scale(.94); clip-path:inset(0 8% 0 0); }
.airbag10-copy { width:min(100%,820px); text-align:left; }
.airbag10-kicker { margin:0 0 20px; color:var(--a10-muted); font:10px var(--latin-font); letter-spacing:.14em; }
.airbag10-copy h1 { margin:0; font:400 clamp(76px,11vw,170px)/.88 var(--latin-font); letter-spacing:-.09em; }
.airbag10-copy h1 em { display:block; font-style:normal; font-weight:300; }
.airbag10-copy > p:not(.airbag10-kicker) { width:min(100%,380px); margin:30px 0 0; color:#595954; font-size:15px; line-height:1.8; }
.airbag10-copy a { display:inline-flex; align-items:center; gap:32px; margin-top:29px; padding:10px 17px; border:1px solid #75756f; border-radius:24px; color:inherit; font-size:13px; transition:background .25s,color .25s; }
.airbag10-copy a b { font:400 19px var(--latin-font); transition:transform .35s; }
.airbag10-copy a:hover { background:#151513; color:#fff; }
.airbag10-copy a:hover b { transform:translate(3px,-3px); }
.airbag10-preview { position:absolute; z-index:5; right:4.2%; bottom:34px; width:clamp(150px,15vw,220px); color:inherit; }
.airbag10-preview-image { position:relative; display:block; aspect-ratio:1; overflow:hidden; border-radius:50%; background:#b7b7b2; transition:border-radius .55s cubic-bezier(.22,1,.36,1),transform .55s; }
.airbag10-preview-image img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08); transform:scale(1.06); transition:transform .8s; }
.airbag10-preview-image > span { position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.35); color:#fff; font:10px var(--latin-font); letter-spacing:.08em; opacity:0; transition:opacity .3s; }
.airbag10-preview:hover .airbag10-preview-image { border-radius:30%; transform:translateY(-8px) rotate(-3deg); }
.airbag10-preview:hover img { transform:scale(1.18); }
.airbag10-preview:hover .airbag10-preview-image > span { opacity:1; }
.airbag10-preview small { display:flex; justify-content:space-between; margin-top:10px; color:var(--a10-muted); font-size:10px; }
.airbag10-preview small b { font:400 10px var(--latin-font); }
.airbag10-counter { position:absolute; z-index:5; left:4.2%; bottom:29px; width:190px; height:190px; border:1px solid #aaa9a2; border-radius:50%; }
.airbag10-counter::before { content:""; position:absolute; left:50%; top:18px; bottom:18px; width:1px; background:#c2c2bd; transform:rotate(45deg); }
.airbag10-counter-label { position:absolute; top:27px; left:0; right:0; text-align:center; color:var(--a10-muted); font:10px var(--latin-font); letter-spacing:.05em; }
.airbag10-counter strong { position:absolute; font:300 42px/1 var(--latin-font); letter-spacing:-.08em; }
.airbag10-counter strong:nth-of-type(1) { top:55px; left:67px; }
.airbag10-counter strong:nth-of-type(2) { right:63px; bottom:50px; }
.airbag10-counter i { position:absolute; right:0; top:0; width:50%; height:50%; border-top:1px solid #22221f; border-right:1px solid #22221f; border-radius:0 100% 0 0; transform:rotate(0deg); transition:transform .5s; }
.airbag10-arrow { position:absolute; top:81px; width:40px; height:30px; border:0; background:none; color:inherit; font:25px var(--latin-font); cursor:pointer; }
.airbag10-arrow:hover { color:#666; }
.airbag10-prev { left:10px; }.airbag10-next { right:10px; }
.airbag10-arrow:disabled { opacity:.2; cursor:default; }
.airbag10-tabs { position:absolute; z-index:5; left:50%; bottom:30px; display:flex; align-items:flex-end; gap:clamp(7px,1.3vw,22px); transform:translateX(-50%); }
.airbag10-tabs button { min-width:35px; padding:8px 0 10px; border:0; border-bottom:1px solid transparent; background:none; color:#777772; text-align:left; font:12px var(--ui-font); cursor:pointer; transition:color .2s,border-color .2s; }
.airbag10-tabs button span { display:block; margin-bottom:3px; font:9px var(--latin-font); }
.airbag10-tabs button[aria-selected=true] { color:#161613; border-color:#161613; }
.airbag10-scroll { position:absolute; z-index:5; left:50%; bottom:14px; display:flex; align-items:center; gap:17px; transform:translateX(-50%); color:#72726c; font:9px var(--latin-font); letter-spacing:.06em; white-space:nowrap; }
.airbag10-scroll span { font-size:19px; transition:transform .3s; }.airbag10-scroll:hover span { transform:translateY(4px); }
.airbag10-stage.is-transitioning .airbag10-copy h1 { animation:a10TitleIn .72s cubic-bezier(.22,1,.36,1); }
@keyframes a10TitleIn { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
@media (max-width:1100px) { .airbag10-slide { padding-left:17%; padding-right:28%; }.airbag10-copy h1 { font-size:clamp(68px,10vw,130px); }.airbag10-counter { width:160px;height:160px; }.airbag10-counter strong:nth-of-type(1){top:47px;left:55px}.airbag10-counter strong:nth-of-type(2){right:52px;bottom:43px}.airbag10-arrow{top:67px}.airbag10-preview{width:170px} }
@media (max-width:820px) { .airbag10-stage{height:max(710px,calc(100svh - var(--header-height)));min-height:710px}.airbag10-topline{top:15px;left:22px;right:22px;font-size:8px}.airbag10-topline span:last-child{display:none}.airbag10-slide{padding:75px 24px 275px;align-items:center}.airbag10-copy{text-align:center}.airbag10-kicker{font-size:8px;margin-bottom:18px}.airbag10-copy h1{font-size:clamp(62px,17vw,95px);line-height:.9}.airbag10-copy > p:not(.airbag10-kicker){margin:20px auto 0;font-size:13px;line-height:1.65}.airbag10-copy a{margin-top:21px;font-size:12px}.airbag10-counter{left:22px;bottom:82px;width:142px;height:142px}.airbag10-counter-label{top:20px;font-size:8px}.airbag10-counter strong:nth-of-type(1){top:42px;left:48px;font-size:31px}.airbag10-counter strong:nth-of-type(2){right:45px;bottom:37px;font-size:31px}.airbag10-arrow{top:59px;width:34px;font-size:20px}.airbag10-preview{right:22px;bottom:80px;width:145px}.airbag10-preview small{font-size:9px}.airbag10-tabs{left:50%;bottom:37px;gap:clamp(5px,2vw,13px);width:calc(100% - 34px);justify-content:center}.airbag10-tabs button{min-width:24px;font-size:10px}.airbag10-scroll{bottom:12px;font-size:8px}.airbag10-geometry{opacity:.72}.geometry-orbit{width:90vw}.geometry-orbit-b{width:67vw}.geometry-frame{width:55vw}.geometry-frame-b{width:38vw}.geometry-axis{width:100vw}.geometry-node{width:8px;height:8px}.geometry-readout{font-size:7px} }
@media (max-width:420px) { .airbag10-slide{padding-left:17px;padding-right:17px}.airbag10-counter{left:17px;width:128px;height:128px}.airbag10-counter strong:nth-of-type(1){left:43px}.airbag10-counter strong:nth-of-type(2){right:40px}.airbag10-preview{right:17px;width:128px}.airbag10-tabs{gap:3px}.airbag10-tabs button{min-width:22px}.airbag10-tabs button:not([aria-selected=true]){font-size:0}.airbag10-tabs button:not([aria-selected=true]) span{font-size:8px} }
@media (prefers-reduced-motion:reduce) { .airbag10-slide,.airbag10-stage::before,.airbag10-preview-image,.airbag10-preview-image img,.airbag10-copy a,.airbag10-preview-image>span{transition:none}.airbag10-stage.is-transitioning .airbag10-copy h1{animation:none}.airbag10-preview:hover .airbag10-preview-image{transform:none;border-radius:50%}.airbag10-preview:hover img{transform:scale(1.06)} }
@media (prefers-reduced-motion:reduce) { .airbag10-motion,.motion-cloud,.motion-grid { animation:none !important; } }
@media print { .airbag10{display:none} }