/* =====================================================================================
   Brand Elite - Coming Soon page (coming-soon.php), option 1 "Launch Pad". LOCKED 28 Sep 2026.
   Loaded after css/about.css. One dark screen: copy left (label, H1, rule, lead, one button, phone + email),
   rocket on its launch tower right with soft smoke and a launch-status panel. Below 900px: scene on top, centred.
   js/system.js plays endless loops at 2.5x, so CSS durations here are 2.5x the speed seen on screen.
   ===================================================================================== */
.cs .cs-grid{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:clamp(24px,4vw,88px)}
.cs .cs-chip{display:inline-flex;align-items:center;gap:10px;margin:0 0 clamp(22px,4vh,36px);padding:6px 14px;border-radius:999px;font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.cs-chip i{width:8px;height:8px;border-radius:50%;background:#1fae6b;box-shadow:0 0 0 3px rgba(31,174,107,.25)}
.cs h1 .acc{color:#f78913}
.cs .hero-cta{margin-top:clamp(24px,4.5vh,44px)}
.cs .cs-contact{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:22px}
.cs-contact a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--fs-body);color:var(--text-on-dark);transition:color .25s}
@media (hover:hover){.cs-contact a:hover{color:#f78913}}
.cs-contact a:focus-visible{outline:2px solid #f78913;outline-offset:2px;border-radius:6px}
.cs-contact .cp-ic{width:18px;height:18px;fill:none;stroke:#f78913;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* the launch pad */
.cs-scene{display:flex;align-items:flex-end;justify-content:center;gap:clamp(18px,3vw,48px)}
.cs-pad{position:relative;display:flex;align-items:flex-end;height:clamp(200px,calc(100vh - 360px),400px);padding:0 10px}
.cs-tower{width:clamp(56px,6vw,80px);height:100%;fill:none;stroke:rgba(160,200,255,.45);stroke-width:2.2}
.cs-pad .brk{position:relative;margin-left:-18px;margin-bottom:14px;animation:none!important}
.cs-pad .brk .rk{width:clamp(84px,8.4vw,120px);height:auto}
.cs-base{position:absolute;left:-10px;right:-20px;bottom:0;height:14px;border-radius:6px;background:linear-gradient(90deg,#243d72,#101928);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.cs-smoke{position:absolute;bottom:6px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle,rgba(232,240,252,.5),rgba(232,240,252,0) 70%);animation:cspuff 7.5s ease-in-out infinite}
.cs-smoke.s1{right:18px}.cs-smoke.s2{right:62px;animation-delay:-2.5s}.cs-smoke.s3{right:-18px;animation-delay:-5s}
@keyframes cspuff{0%{opacity:0;transform:translateY(6px) scale(.6)}40%{opacity:.8}100%{opacity:0;transform:translateY(-26px) scale(1.4)}}
.cs-status{width:min(250px,42vw);margin-bottom:24px;padding:18px 20px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(232,240,252,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cs-status p{display:flex;justify-content:space-between;margin:0;font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.cs-status p span{color:#f78913}
.cs-bar{height:8px;margin:12px 0 16px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.cs-bar i{display:block;width:78%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f45c06,#f78913,#ffd08a,#f78913);background-size:200% 100%;animation:csshine 7.5s linear infinite}
@keyframes csshine{to{background-position:-200% 0}}
.cs-status ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cs-status li{display:flex;align-items:center;gap:10px;font-size:var(--fs-label);color:var(--text-on-dark-muted)}
.cs-status li::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(232,240,252,.4)}
.cs-status li.ok,.cs-status li.now{color:#fff}
.cs-status li.ok::before{background:#1fae6b;border-color:#1fae6b}
.cs-status li.now::before{background:#f78913;border-color:#f78913;animation:blinkcs 1.4s steps(1) infinite}
@keyframes blinkcs{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.cs-smoke,.cs-bar i,.cs-status li::before{animation:none!important}}

/* short laptop screens (Windows zoom): tighter gaps so it stays one screen */
@media (min-width:900px) and (max-height:700px){.cs .cs-chip{margin-bottom:14px}.cs .hero-cta{margin-top:18px}.cs .cs-contact{margin-top:6px}}
/* tablets and phones: scene on top, everything centred */
@media (max-width:899.98px){.cs .cs-grid{grid-template-columns:1fr}.cs-scene{order:-1}
  .cs-copy{text-align:center}.cs-copy .ab-rule,.cs-copy .ab-lead{margin-left:auto;margin-right:auto}.cs .hero-cta,.cs .cs-contact{justify-content:center}}
@media (max-width:899.98px){.cs-pad{height:clamp(170px,30vh,260px)}}
/* phones: shorter pad, status panel under it with the 4 steps on one line, so the heading shows in the first screen */
@media (max-width:600px){.cs-scene{flex-direction:column;align-items:center;gap:16px}.cs-status{width:min(320px,100%);margin:0;padding:14px 16px}
  .cs-status ul{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:6px 12px}.cs-bar{margin:10px 0 12px}
  .cs .cs-chip{justify-content:center;text-align:center}}