/* Continuous support — "the night-shift service hangar"
   safety yellow (#f2c14e), steel, status green (#7fd49a), warning orange (#ff9a4d). */

.cinema-page--service-continuous-support { --sup-y: #f2c14e; --sup-y-l: #ffd97a; --sup-ok: #7fd49a; --sup-warn: #ff9a4d; --sup-ink: #070708; --sup-steel: #2b3038; }

/* ---------------------------------------------------------------- hero: service hangar */
.cx-hero--sup_hangar .cx-hero__visual { width: min(100%, 560px); }
.sup-hg { position: relative; display: grid; gap: 12px; padding: 14px; border-radius: 26px; border: 1px solid rgba(242, 193, 78, .16); background: linear-gradient(180deg, #131417, #0a0b0d); box-shadow: 0 0 0 6px rgba(242, 193, 78, .03), 0 80px 120px -50px rgba(0, 0, 0, .95), 0 40px 120px -70px rgba(242, 193, 78, .35); }
.js .sup-hg { opacity: 0; transform: translateY(26px); }
.is-ready .sup-hg { opacity: 1; transform: none; transition: opacity 1.2s var(--ease-out) .2s, transform 1.6s var(--ease-out) .2s; }
.sup-hg__board { padding: 12px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .06); background: var(--sup-ink); box-shadow: inset 0 0 30px rgba(0, 0, 0, .9); }
.sup-hg__head { display: flex; justify-content: space-between; padding-bottom: 10px; direction: ltr; font-size: 10px; letter-spacing: .2em; color: var(--sup-y); }
.sup-hg__head span { display: inline-flex; align-items: center; gap: 8px; }
.sup-hg__head span:last-child { color: #77736b; }
.sup-hg__lamp { width: 7px; height: 7px; border-radius: 50%; background: var(--sup-ok); box-shadow: 0 0 8px var(--sup-ok); animation: supBlink 2.2s ease-in-out infinite; }
@keyframes supBlink { 50% { opacity: .3; } }
.sup-hg__cols, .sup-hg__rows li { display: grid; grid-template-columns: 62px minmax(0, 1fr) 84px; gap: 5px; direction: ltr; }
.sup-hg__cols { padding: 0 2px 6px; font-size: 8.5px; letter-spacing: .2em; color: #6f6a62; }
.sup-hg__rows { display: grid; gap: 5px; }
.sup-fl { position: relative; display: flex; align-items: center; height: 28px; overflow: hidden; padding: 0 8px; border-radius: 4px; background: linear-gradient(180deg, #202329 0 50%, #181a1f 50% 100%); font: 600 11px/1 var(--mono); letter-spacing: .08em; color: #f1ead8; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 0 rgba(0, 0, 0, .6); }
.sup-fl::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; z-index: 1; height: 1px; background: rgba(0, 0, 0, .8); box-shadow: 0 1px 0 rgba(255, 255, 255, .04); }
.sup-fl--id { color: var(--sup-y); }
.sup-fl--task { text-overflow: ellipsis; }
.sup-fl--st { display: block; padding: 0; }
.sup-fl__roll { display: block; animation: supRoll 12s cubic-bezier(.7, 0, .3, 1) infinite; animation-delay: calc(var(--s) * -3s - var(--r) * .45s); }
.sup-fl__s { display: flex; align-items: center; justify-content: center; height: 28px; font-weight: 700; color: #9a948a; }
.sup-fl__s--1 { color: var(--sup-y); }
.sup-fl__s--2 { color: #8fc8ff; }
.sup-fl__s--3 { color: var(--sup-ok); }
@keyframes supRoll { 0%, 22% { transform: translateY(0); } 25%, 47% { transform: translateY(-28px); } 50%, 72% { transform: translateY(-56px); } 75%, 97% { transform: translateY(-84px); } 100% { transform: translateY(-112px); } }
.sup-hg__bay { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 210px; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .05); background: radial-gradient(70% 80% at 50% 100%, rgba(242, 193, 78, .13), transparent 70%), linear-gradient(180deg, #17181b, #0d0e10); }
.sup-hg__door { position: absolute; inset: 0 8% 26px; border-radius: 0 0 4px 4px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 18px); clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 100%, 0 100%); opacity: .9; }
.sup-hg__beacon { position: absolute; top: 14px; right: 16px; z-index: 2; width: 14px; height: 12px; border-radius: 7px 7px 2px 2px; background: radial-gradient(circle at 50% 40%, #ffe7a8, #f2a52e); box-shadow: 0 0 14px #f2a52e, 0 0 30px rgba(242, 165, 46, .5); }
.sup-hg__beam { position: absolute; top: 20px; right: 23px; width: 420px; height: 420px; margin: -210px -210px 0 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(242, 193, 78, .3), rgba(242, 193, 78, 0) 10%, rgba(242, 193, 78, 0) 50%, rgba(242, 193, 78, .3) 50%, rgba(242, 193, 78, 0) 60%, rgba(242, 193, 78, 0)); -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent); mask-image: radial-gradient(closest-side, #000 10%, transparent); animation: supSpin 6s linear infinite; }
@keyframes supSpin { to { transform: rotate(360deg); } }
.sup-hg__lift { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 62%; margin-bottom: 12px; }
.sup-hg__site { width: 100%; overflow: hidden; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .12); background: #0b0c0f; box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .95); }
.sup-hg__chrome { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, .06); background: #17191d; direction: ltr; }
.sup-hg__chrome i { width: 6px; height: 6px; border-radius: 50%; background: #3a3d44; }
.sup-hg__chrome span { flex: 1; height: 8px; margin-left: 6px; border-radius: 4px; background: #24272d; }
.sup-hg__skel { position: relative; display: grid; gap: 6px; padding: 10px; direction: ltr; }
.sup-hg__skel b { height: 22px; border-radius: 5px; background: linear-gradient(90deg, #2c2721, #1d1b18); }
.sup-hg__skel i { width: var(--w); height: 6px; border-radius: 3px; background: #262930; }
.sup-hg__skel i:nth-of-type(2) { background: rgba(242, 193, 78, .6); box-shadow: 0 0 10px rgba(242, 193, 78, .45); animation: supPatch 4.5s ease-in-out infinite; }
@keyframes supPatch { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.sup-hg__skel em { position: absolute; right: 10px; bottom: 8px; padding: 1px 5px; border: 1px solid rgba(242, 193, 78, .5); border-radius: 3px; font-size: 8px; font-style: normal; letter-spacing: .16em; color: var(--sup-y); }
.sup-hg__scissor { display: block; width: 66%; height: 30px; overflow: visible; animation: supLift 10s ease-in-out infinite; }
.sup-hg__scissor path { fill: none; stroke: #737884; stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@keyframes supLift { 0%, 100% { height: 26px; } 50% { height: 54px; } }
.sup-hg__base { width: 82%; height: 8px; border-radius: 3px; background: linear-gradient(180deg, #4b4f58, #2a2d33); }
.sup-hg__sill { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: repeating-linear-gradient(-45deg, var(--sup-y) 0 10px, #111 10px 20px); opacity: .85; }
.sup-hg__uptime { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .06); background: var(--sup-ink); direction: ltr; font-size: 9.5px; letter-spacing: .18em; color: #8a857c; }
.sup-hg__bars { position: relative; flex: 1; display: flex; gap: 2px; height: 18px; overflow: hidden; }
.sup-hg__bars i { flex: 1; border-radius: 2px; background: rgba(127, 212, 154, .72); }
.sup-hg__bars i.is-warn { background: var(--sup-y); }
.sup-hg__bars::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 20%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: supShine 5s ease-in-out infinite; }
@keyframes supShine { from { transform: translateX(-120%); } 60%, to { transform: translateX(520%); } }
.sup-hg__ok { color: var(--sup-ok); }

/* ---------------------------------------------------------------- tool shadow board */
.sup-peg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 30px); margin-top: clamp(30px, 4vw, 50px); }
.sup-peg__card { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; border: 1px solid var(--line-2); background: var(--panel); transition: border-color .4s, transform .5s var(--ease-out); }
.sup-peg__card:hover { border-color: rgba(242, 193, 78, .4); transform: translateY(-3px); }
.sup-peg__board { position: relative; height: 196px; border-bottom: 1px solid rgba(0, 0, 0, .5); background: radial-gradient(circle, rgba(0, 0, 0, .6) 2.2px, transparent 2.8px) 9px 9px / 20px 20px, linear-gradient(180deg, #3b2d21, #2b2119); box-shadow: inset 0 -24px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06); }
.sup-peg__board svg { position: absolute; top: 22px; left: 10%; width: 80%; height: calc(100% - 34px); overflow: visible; }
.sup-peg__no { position: absolute; top: 10px; left: 12px; z-index: 1; padding: 2px 6px; border: 1px solid rgba(242, 193, 78, .35); border-radius: 4px; background: rgba(0, 0, 0, .3); direction: ltr; font-size: 9px; letter-spacing: .18em; color: rgba(242, 193, 78, .85); }
.sup-peg__shadow { fill: rgba(242, 193, 78, .14); stroke: rgba(242, 193, 78, .8); stroke-width: 1.1; stroke-dasharray: 3 2.4; }
.sup-peg__hang { transform-box: view-box; translate: 7px 10px; animation: supSwing 6.5s ease-in-out infinite; transition: translate .8s var(--ease-out); }
.sup-peg__card:nth-child(2) .sup-peg__hang { animation-delay: -2.2s; }
.sup-peg__card:nth-child(3) .sup-peg__hang { animation-delay: -4.1s; }
@keyframes supSwing { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
.sup-peg__tool { fill: #b9bfc8; stroke: #eef1f5; stroke-width: .5; filter: drop-shadow(0 10px 7px rgba(0, 0, 0, .6)); }
.sup-peg__hub { fill: #2b2119; stroke: #8b9099; stroke-width: 1; }
.sup-peg__vial { fill: rgba(176, 224, 110, .8); }
.sup-peg__bubble { fill: #f2ffe2; animation: supBubble 6s ease-in-out infinite; }
@keyframes supBubble { 0%, 100% { transform: translateX(-10px); } 40%, 80% { transform: translateX(0); } }
.sup-peg__marks { stroke: #2d3a1f; stroke-width: 1.2; }
.sup-peg__pin { fill: #d6d8db; stroke: #4a4d52; stroke-width: 1; }
.sup-peg__card:hover .sup-peg__hang, .sup-peg__card:focus-within .sup-peg__hang { translate: 0 0; }
.sup-peg__body { padding: 20px 22px 24px; }
.sup-peg__body h3 { font-size: 19px; font-weight: 900; line-height: 1.5; }
.sup-peg__body p { margin-top: 8px; color: var(--text-2); font-size: 15px; line-height: 2; }

/* ---------------------------------------------------------------- service bays */
.sup-bays { margin-top: clamp(30px, 4vw, 50px); }
.sup-bays__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.sup-bay { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; border: 1px solid rgba(242, 193, 78, .2); background: linear-gradient(180deg, rgba(242, 193, 78, .07), transparent 45%), #111214; transition: border-color .4s, transform .5s var(--ease-out); }
.sup-bay:hover { border-color: rgba(242, 193, 78, .45); transform: translateY(-3px); }
.sup-bay__hazard { height: 12px; background: repeating-linear-gradient(-45deg, var(--sup-y) 0 10px, #141414 10px 20px); }
.sup-bay__in { position: relative; z-index: 1; flex: 1; padding: 22px 24px 18px; }
.sup-bay__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sup-bay__code { padding: 4px 8px; border: 1px solid rgba(242, 193, 78, .35); border-radius: 6px; direction: ltr; font-size: 10px; letter-spacing: .16em; color: var(--sup-y); }
.sup-bay__stack { display: grid; gap: 4px; width: 58px; }
.sup-bay__stack i { height: 9px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 3px; background: rgba(255, 255, 255, .03); }
.sup-bay__stack i.is-on { border-color: transparent; background: linear-gradient(90deg, #f2c14e, #e8a13a); box-shadow: 0 0 12px rgba(242, 193, 78, .45); transition: background .4s, box-shadow .4s; }
.js:not(.reveal-all) .sup-bay:not(.is-in) .sup-bay__stack i.is-on { background: rgba(255, 255, 255, .03); box-shadow: none; }
.sup-bay h3 { margin-top: 24px; font-size: 21px; font-weight: 900; line-height: 1.5; }
.sup-bay p { margin-top: 8px; color: var(--text-2); font-size: 15.5px; line-height: 2; }
.sup-bay__floor { height: 46px; background: repeating-linear-gradient(90deg, rgba(242, 193, 78, .14) 0 1px, transparent 1px 30px), linear-gradient(180deg, transparent, rgba(242, 193, 78, .1)); transform: perspective(160px) rotateX(48deg); transform-origin: bottom; }
.sup-bays__note { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 16px 20px; border: 1px dashed rgba(242, 193, 78, .38); border-radius: 16px; background: rgba(242, 193, 78, .04); font-size: 15.5px; font-weight: 800; line-height: 1.9; }
.sup-bays__doc { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: rgba(242, 193, 78, .12); color: var(--sup-y); }
.sup-bays__stamp { flex: none; margin-inline-start: auto; padding: 4px 10px; border: 2px solid rgba(242, 193, 78, .6); border-radius: 6px; font-size: 10.5px; letter-spacing: .2em; color: var(--sup-y); rotate: -6deg; }

/* ---------------------------------------------------------------- job tickets on a release loop */
.sup-tks { position: relative; margin-top: clamp(30px, 4vw, 50px); padding: 24px; }
.sup-tks__loop { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sup-tks__loop rect { fill: none; stroke: rgba(242, 193, 78, .5); stroke-width: 1.5; stroke-dasharray: .45 .3; vector-effect: non-scaling-stroke; animation: supMarch 14s linear infinite; }
@keyframes supMarch { to { stroke-dashoffset: 15; } }
.sup-tks__arrow { position: absolute; bottom: -12px; left: 50%; z-index: 1; padding: 4px 14px; border: 1px solid rgba(242, 193, 78, .45); border-radius: 999px; background: #16130d; direction: ltr; font-size: 10px; letter-spacing: .2em; color: var(--sup-y); white-space: nowrap; transform: translateX(-50%); }
.sup-tks__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sup-tk { display: flex; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); background: #121316; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .9); }
.sup-tk__stub { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 46px; padding: 12px 0; border-inline-end: 2px dashed rgba(0, 0, 0, .5); background: linear-gradient(180deg, #f6cd5c, #eab43c); color: #17130a; }
.sup-tk__hole { width: 12px; height: 12px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.sup-tk__job { writing-mode: vertical-rl; direction: ltr; font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.sup-tk__bar { width: 22px; height: 44px; margin-top: auto; background: repeating-linear-gradient(0deg, #17130a 0 2px, transparent 2px 4px, #17130a 4px 5px, transparent 5px 8px); opacity: .8; }
.sup-tk__body { position: relative; flex: 1; min-width: 0; padding: 18px 18px 58px; }
.sup-tk__label { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.sup-tk h3 { margin-top: 8px; font-size: 18px; font-weight: 900; line-height: 1.55; }
.sup-tk__body > p:not(.sup-tk__label) { margin-top: 8px; color: var(--text-2); font-size: 14.5px; line-height: 2; }
.sup-tk__stamp { position: absolute; left: 16px; bottom: 16px; padding: 3px 9px; border: 2px solid currentColor; border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: .18em; color: #8fc8ff; rotate: -7deg; opacity: .9; transition: opacity .3s, scale .45s var(--ease-snap); transition-delay: calc(var(--d, 0) * 120ms + .7s); }
.sup-tk:nth-child(2) .sup-tk__stamp { color: var(--sup-y); }
.sup-tk:nth-child(3) .sup-tk__stamp { color: var(--sup-ok); }
.sup-tk:nth-child(4) .sup-tk__stamp { color: var(--sup-warn); }
.js:not(.reveal-all) .sup-tk:not(.is-in) .sup-tk__stamp { opacity: 0; scale: 1.8; }

/* ---------------------------------------------------------------- capacity bay + SLA clause */
.sup-sp { display: grid; gap: clamp(16px, 2.4vw, 26px); }
.sup-sp__case { display: grid; grid-template-columns: 1.2fr 1fr; overflow: hidden; border-radius: 26px; border: 1px solid var(--line-2); background: var(--panel); box-shadow: 0 60px 100px -60px rgba(0, 0, 0, .95); }
.sup-sp__copy { padding: clamp(26px, 3.4vw, 44px); }
.sup-sp__tag, .sup-sp__chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.sup-sp__tag { border: 1px solid rgba(242, 193, 78, .35); background: rgba(242, 193, 78, .08); color: var(--sup-y-l); }
.sup-sp__copy h3, .sup-sp__sla h3 { margin-top: 16px; font-size: clamp(19px, 1.2rem + .3vw, 23px); font-weight: 900; line-height: 1.6; }
.sup-sp__copy p:not(.sup-sp__tag), .sup-sp__sla-copy p:not(.sup-sp__chip) { margin-top: 10px; color: var(--text-2); font-size: 15.5px; line-height: 2.1; }
.sup-sp__bay { display: flex; flex-direction: column; padding: 22px; border-inline-start: 1px solid rgba(255, 255, 255, .06); background: linear-gradient(180deg, #101113, #0a0a0c); direction: ltr; }
.sup-sp__bay-h { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .2em; color: var(--sup-y); }
.sup-sp__bay-h span:last-child { color: #77736b; }
.sup-sp__hold { position: relative; flex: 1; min-height: 290px; margin-top: 14px; border: 2px solid #2d3036; border-top: 0; border-radius: 0 0 14px 14px; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 24px); }
.sup-sp__cap { position: absolute; left: -2px; right: -2px; top: 40%; z-index: 2; padding-top: 4px; border-top: 2px dashed var(--sup-warn); font-size: 9px; letter-spacing: .2em; text-align: right; color: var(--sup-warn); }
.sup-sp__jobs { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; flex-direction: column-reverse; gap: 6px; height: calc(100% - 20px); }
.sup-sp__job { position: relative; display: grid; align-content: center; gap: 4px; padding: 0 14px; border-radius: 10px; font-family: var(--mono); transition: transform .8s var(--ease-snap), opacity .5s; transition-delay: calc(var(--j) * 220ms + .4s); }
.js:not(.reveal-all) .sup-sp__case:not(.is-in) .sup-sp__job { transform: translateY(-70px); opacity: 0; }
.sup-sp__job b { position: absolute; top: 8px; right: 10px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .3); font-size: 10px; }
.sup-sp__job span { font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.sup-sp__job small { font-size: 9.5px; letter-spacing: .16em; opacity: .8; }
.sup-sp__job--1 { height: 28%; background: linear-gradient(135deg, #e8703a, #c4502a); color: #fff3e8; box-shadow: 0 12px 24px -12px rgba(232, 112, 58, .8); }
.sup-sp__job--2 { height: 25%; background: linear-gradient(135deg, #f2c14e, #d79c2c); color: #1d1608; }
.sup-sp__job--3 { height: 22%; margin-bottom: 26px; border: 2px dashed rgba(143, 200, 255, .6); background: rgba(143, 200, 255, .06); color: #cfe6ff; animation: supPending 3.2s ease-in-out infinite; }
@keyframes supPending { 50% { border-color: rgba(143, 200, 255, .25); background: rgba(143, 200, 255, .02); } }
.sup-sp__sla { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 44px); overflow: hidden; padding: clamp(24px, 3vw, 36px) clamp(30px, 3.6vw, 44px); border-radius: 26px; border: 1px solid rgba(242, 193, 78, .22); background: linear-gradient(270deg, rgba(242, 193, 78, .06), transparent 60%), #0f0f10; }
.sup-sp__sla::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 8px; background: repeating-linear-gradient(-45deg, var(--sup-y) 0 8px, #111 8px 16px); }
.sup-sp__chip { border: 1px solid rgba(255, 154, 77, .45); background: rgba(255, 154, 77, .1); color: #ffc79a; }
.sup-sp__clause { padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .08); background: #08090a; direction: ltr; }
.sup-sp__clause-h { display: flex; align-items: center; justify-content: space-between; font-size: 10px; letter-spacing: .2em; color: var(--sup-y); }
.sup-sp__seal { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid rgba(242, 193, 78, .6); border-radius: 50%; font-size: 11px; font-weight: 800; letter-spacing: .1em; rotate: -12deg; box-shadow: inset 0 0 0 4px rgba(242, 193, 78, .1); }
.sup-sp__clause ul { display: grid; gap: 11px; margin-top: 12px; }
.sup-sp__clause li { display: flex; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: .12em; color: #cfc6b6; }
.sup-sp__clause li .ico { width: 16px; height: 16px; color: var(--sup-y); }
.sup-sp__clause li span { white-space: nowrap; }
.sup-sp__clause li i { flex: 1; min-width: 12px; border-bottom: 1px dotted rgba(255, 255, 255, .25); }
.sup-sp__clause li em { padding: 2px 6px; border-radius: 4px; background: rgba(242, 193, 78, .12); font-size: 8.5px; font-style: normal; color: var(--sup-y-l); }

/* ---------------------------------------------------------------- status page */
.sup-st { margin-top: clamp(30px, 4vw, 50px); overflow: hidden; border-radius: 24px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #131417, #0c0d0f); box-shadow: 0 60px 100px -60px rgba(0, 0, 0, .95); }
.sup-st__head { display: flex; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--line); direction: ltr; font-size: 10px; letter-spacing: .2em; color: var(--sup-y); }
.sup-st__head span { display: inline-flex; align-items: center; gap: 8px; }
.sup-st__head span:last-child { color: #77736b; }
.sup-st__live { width: 8px; height: 8px; border-radius: 50%; background: var(--sup-ok); box-shadow: 0 0 0 0 rgba(127, 212, 154, .6); animation: supLive 2.4s ease-out infinite; }
@keyframes supLive { 0% { box-shadow: 0 0 0 0 rgba(127, 212, 154, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(127, 212, 154, 0); } }
.sup-st__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 128px; align-items: center; gap: clamp(14px, 2.4vw, 32px); padding: 17px 24px; border-top: 1px solid var(--line); }
.sup-st__row:first-child { border-top: 0; }
.sup-st__name { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 800; line-height: 1.8; }
.sup-st__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sup-ok); box-shadow: 0 0 0 4px rgba(127, 212, 154, .14); }
.sup-st__bars { display: flex; gap: 3px; height: 26px; direction: ltr; }
.sup-st__bars i { flex: 1; border-radius: 2px; background: rgba(127, 212, 154, .7); transform-origin: bottom; transition: transform .5s var(--ease-out); transition-delay: calc(var(--b) * 16ms + var(--d, 0) * 80ms + .3s); }
.sup-st__bars i.is-warn { background: var(--sup-y); }
.js:not(.reveal-all) .sup-st__row:not(.is-in) .sup-st__bars i { transform: scaleY(.12); }
.sup-st__row:hover .sup-st__bars i { background: rgba(127, 212, 154, .9); }
.sup-st__code { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; direction: ltr; font-size: 10px; letter-spacing: .14em; color: var(--sup-ok); white-space: nowrap; }
.sup-st__code .ico { width: 13px; height: 13px; }

/* ---------------------------------------------------------------- riveted route plates */
.sup-pl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(26px, 3vw, 40px); }
.sup-pl__plate { position: relative; display: flex; align-items: center; gap: 18px; padding: 26px 30px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px), linear-gradient(160deg, #3a3f47, #23272d 55%, #1b1e23); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -2px 0 rgba(0, 0, 0, .4), 0 30px 50px -30px rgba(0, 0, 0, .9); transition: transform .4s var(--ease-out), border-color .4s; }
.sup-pl__screws i { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d0d4da, #6d727a 70%); box-shadow: 0 1px 1px rgba(0, 0, 0, .6); transition: transform .6s var(--ease-out); }
.sup-pl__screws i::after { content: ""; position: absolute; top: 50%; left: 2px; right: 2px; height: 1.5px; margin-top: -.75px; background: #3b3f45; transform: rotate(45deg); }
.sup-pl__screws i:nth-child(1) { top: 9px; right: 9px; }
.sup-pl__screws i:nth-child(2) { top: 9px; left: 9px; }
.sup-pl__screws i:nth-child(3) { bottom: 9px; right: 9px; }
.sup-pl__screws i:nth-child(4) { bottom: 9px; left: 9px; }
.sup-pl__ico { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: #15181c; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .75), 0 1px 0 rgba(255, 255, 255, .08); color: var(--sup-y); }
.sup-pl__txt { flex: 1; display: grid; gap: 4px; }
.sup-pl__code { justify-self: start; font-size: 9.5px; letter-spacing: .2em; color: rgba(242, 193, 78, .85); }
.sup-pl__txt strong { font-size: 17.5px; font-weight: 900; color: #f4f2ee; text-shadow: 0 -1px 0 rgba(0, 0, 0, .6); }
.sup-pl__txt small { color: #c3c7cd; font-size: 14px; line-height: 1.9; }
.sup-pl__go { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); color: var(--sup-y); transition: transform .4s var(--ease-out), background .4s; }
.sup-pl__go .ico { transform: scaleX(-1); }
.sup-pl__plate:hover, .sup-pl__plate:focus-visible { transform: translateY(-3px); border-color: rgba(242, 193, 78, .45); }
.sup-pl__plate:hover .sup-pl__screws i, .sup-pl__plate:focus-visible .sup-pl__screws i { transform: rotate(90deg); }
.sup-pl__plate:hover .sup-pl__go, .sup-pl__plate:focus-visible .sup-pl__go { transform: translateX(-4px); background: rgba(242, 193, 78, .14); }

/* ---------------------------------------------------------------- CTA: service hang-tag */
.cta__visual--sup_hangtag { justify-items: center; }
.sup-ht { position: relative; width: min(100%, 290px); padding-top: 70px; filter: drop-shadow(0 50px 50px rgba(0, 0, 0, .75)); transform-origin: 50% 0; animation: supTagSwing 8s ease-in-out infinite; }
@keyframes supTagSwing { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.sup-ht__string { position: absolute; top: 0; left: 50%; width: 2px; height: 92px; margin-left: -1px; background: linear-gradient(#7d6f53, #cbb98f); }
.sup-ht__tag { position: relative; padding: 42px 22px 0; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #f7d063, #efb83c); color: #17130a; clip-path: polygon(24% 0, 76% 0, 100% 13%, 100% 100%, 0 100%, 0 13%); }
.sup-ht__hole { position: absolute; top: 14px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #0a0807; box-shadow: 0 0 0 4px #d6a42c; }
.sup-ht__band { margin: 0 -22px; padding: 8px 0; background: #17130a; color: var(--sup-y); text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .3em; }
.sup-ht__no { margin-top: 10px; direction: ltr; text-align: center; font-size: 10px; letter-spacing: .14em; }
.sup-ht__rows { display: grid; gap: 10px; margin-top: 16px; direction: ltr; }
.sup-ht__rows li { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1.5px solid rgba(23, 19, 10, .25); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.sup-ht__rows b { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid #17130a; border-radius: 4px; color: transparent; animation: supTick 9s ease-in-out infinite; animation-delay: calc(var(--i) * 1s + .8s); }
.sup-ht__rows b .ico { width: 13px; height: 13px; stroke-width: 3; }
@keyframes supTick { 0%, 92%, 100% { color: transparent; background: transparent; } 5%, 84% { color: var(--sup-y); background: #17130a; } }
.sup-ht__sign { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 16px; direction: ltr; font-size: 9px; letter-spacing: .14em; }
.sup-ht__sign b { font-size: 11px; letter-spacing: .1em; }
.sup-ht__stripes { display: block; height: 16px; margin: 16px -22px 0; background: repeating-linear-gradient(-45deg, #17130a 0 10px, transparent 10px 20px); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
	.cx-hero--sup_hangar .cx-hero__visual { position: relative; top: auto; left: auto; z-index: 1; width: min(100%, 520px); margin: 34px auto 0; opacity: 1; pointer-events: auto; }
	.sup-tks__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sup-sp__case, .sup-sp__sla { grid-template-columns: 1fr; }
	.sup-sp__bay { border-inline-start: 0; border-top: 1px solid rgba(255, 255, 255, .06); }
}
@media (max-width: 900px) {
	.sup-peg, .sup-bays__list { grid-template-columns: 1fr; }
	.sup-peg__board { height: 176px; }
	.sup-peg__board svg { left: 20%; width: 60%; }
	.sup-st__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name code" "bars bars"; row-gap: 12px; }
	.sup-st__name { grid-area: name; }
	.sup-st__bars { grid-area: bars; height: 20px; }
	.sup-st__code { grid-area: code; }
	.sup-pl { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.cx-hero--sup_hangar .cx-hero__visual { left: auto; top: auto; width: 100%; opacity: 1; }
	.sup-hg { padding: 10px; border-radius: 20px; }
	.sup-hg__board { padding: 9px; }
	.sup-hg__cols, .sup-hg__rows li { grid-template-columns: 50px minmax(0, 1fr) 70px; gap: 4px; }
	.sup-fl { padding: 0 6px; font-size: 9.5px; letter-spacing: .04em; }
	.sup-hg__bay { height: 180px; }
	.sup-hg__lift { width: 74%; }
	.sup-tks { padding: 16px 14px 26px; }
	.sup-tks__list { grid-template-columns: 1fr; }
	.sup-sp__sla { padding: 24px 22px 24px 18px; }
	.sup-sp__clause li { font-size: 9.5px; letter-spacing: .06em; }
	.sup-sp__clause li em { display: none; }
	.sup-st__head, .sup-st__row { padding-inline: 16px; }
	.sup-st__name { font-size: 15px; }
	.sup-pl__plate { padding: 24px 22px; gap: 14px; }
	.sup-pl__ico { width: 44px; height: 44px; }
	.sup-bays__note { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
	.sup-hg__lamp, .sup-fl__roll, .sup-hg__beam, .sup-hg__skel i, .sup-hg__scissor, .sup-hg__bars::after, .sup-peg__hang, .sup-peg__bubble, .sup-tks__loop rect,
	.sup-sp__job--3, .sup-st__live, .sup-ht, .sup-ht__rows b { animation: none; }
	.sup-fl__roll { transform: translateY(calc(var(--s) * -28px)); }
	.sup-hg__beam { opacity: .4; }
	.sup-peg__hang, .sup-st__bars i, .sup-sp__job, .sup-tk__stamp { transition: none; }
	.sup-ht__rows b { color: var(--sup-y); background: #17130a; }
}