/* CrewHire "Mission control" look (user's pick, 2026-10-29). Brand colours only (tokens.css): navy, blue-teal, teal, white, surface.
   Dark "control room" sections for the story; light sections for reading. Loaded on every page after the other styles. */

/* ---------- shared bits ---------- */
.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(97,196,202,.6);animation:live 1.8s ease-out infinite;vertical-align:middle}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(97,196,202,.55)}100%{box-shadow:0 0 0 10px rgba(97,196,202,0)}}
.floor{position:absolute;left:-25%;right:-25%;bottom:-6%;height:52%;pointer-events:none;
 background-image:linear-gradient(rgba(97,196,202,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(97,196,202,.22) 1px,transparent 1px);background-size:64px 64px;
 transform:perspective(620px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(transparent,#000 75%);mask-image:linear-gradient(transparent,#000 75%);animation:floor 7s linear infinite}
@keyframes floor{to{background-position:0 64px}}
.mcgrid{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px}

/* ---------- hero ---------- */
.hero.mc{display:block;min-height:auto;padding:104px 0 60px;text-align:center;
 background:radial-gradient(1100px 520px at 50% 108%,rgba(97,196,202,.30),transparent 62%),radial-gradient(700px 400px at 85% 10%,rgba(44,153,183,.22),transparent 60%),var(--brand)}
.hero.mc:before{display:none}
.hcen{position:relative;z-index:2}
.hero.mc .eyebrow{display:inline-flex;gap:10px;align-items:center;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.hero.mc h1{font-size:clamp(2.4rem,5vw,4.3rem);max-width:20ch;margin:16px auto 0;line-height:1.02}
.hero.mc p.lead{margin:14px auto 0;max-width:60ch}
.hero.mc .cta{margin-top:22px}
.hero .btn.gl,.hero .btn.gl:hover{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.38)}
.hero .btn.gl:hover{border-color:#fff}
.hero.mc .cta{justify-content:center}
.hero.mc .scrollhint{bottom:14px}

.mstage{position:relative;width:min(1000px,100%);height:380px;margin:30px auto 0}
.mboard{position:absolute;left:50%;top:50%;width:min(600px,72%);transform:translate(-50%,-50%);z-index:3;text-align:left;
 border-radius:20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
 box-shadow:0 40px 100px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);overflow:hidden}
.mb-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.12);font-size:.78rem;color:rgba(255,255,255,.72)}
.mb-bar>i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28)}
.mb-bar span{margin-left:6px}
.live-t{margin-left:auto;display:inline-flex;gap:7px;align-items:center;font-size:.72rem;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
.mb-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:12px}
.mb-col{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:9px;min-height:170px;display:flex;flex-direction:column;gap:7px}
.mb-col h5{margin:0 0 3px;font-size:.74rem;color:#fff;display:flex;justify-content:space-between}
.mb-col h5 em{font-style:normal;color:var(--accent)}
.mb-row{height:22px;border-radius:7px;background:linear-gradient(90deg,rgba(97,196,202,.38),rgba(97,196,202,.16));position:relative}
.mb-row:before{content:"";position:absolute;left:5px;top:5px;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.55)}
.mb-row.s{width:70%}
.mb-row.wait{height:auto;padding:7px 8px 7px 24px;font-size:.66rem;font-weight:700;color:#fff;background:rgba(97,196,202,.22);border:1px dashed var(--accent)}
.hold{border-color:rgba(97,196,202,.35)}
.mb-dot{position:absolute;left:8%;top:62%;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 20px 4px rgba(97,196,202,.7);animation:mbrun 6s cubic-bezier(.6,0,.3,1) infinite}
@keyframes mbrun{0%{left:8%;opacity:0}6%{opacity:1}28%{left:33%}52%{left:58%}76%{left:83%;opacity:1}92%,100%{left:86%;opacity:0}}

/* bots on the ellipse (positions from home.js; --z = 0 back … 1 front) */
.mstage .orbit{position:absolute;inset:0}
.mstage .hc{position:absolute;width:76px;margin:-52px 0 0 -38px;transform:scale(calc(.7 + var(--z,.5) * .38));opacity:calc(.5 + var(--z,.5) * .5);transition:none}
.mstage .hc .char{width:76px;height:96px;aspect-ratio:auto}
.mstage .hc:hover{transform:scale(1.15);opacity:1;z-index:9!important}
.mstage .hc .nm{bottom:-14px}
.chip{position:absolute;z-index:5;display:flex;flex-direction:column;align-items:flex-start;padding:9px 13px;border-radius:14px;background:#fff;color:var(--muted);font-size:.72rem;font-weight:600;box-shadow:0 16px 36px rgba(0,0,0,.28);animation:chipbob 5s ease-in-out infinite;text-align:left}
.chip b{font-size:1.15rem;color:var(--ink);line-height:1.1}
.chip.c1{left:2%;top:12%}.chip.c2{right:1%;top:58%;animation-delay:-1.6s}.chip.c3{left:6%;bottom:2%;animation-delay:-3.2s}
@keyframes chipbob{50%{transform:translateY(-10px)}}

/* hero scroll-out: copy drifts up, the stage sinks a little (motion.js sets --hp) */
.m .hcen>*:not(.mstage){transform:translateY(calc(var(--hp,0)*-60px));opacity:calc(1 - var(--hp,0)*1.3)}
.m .mstage{transform:translateY(calc(var(--hp,0)*40px)) scale(calc(1 - var(--hp,0)*.05))}

/* ---------- live ticker ---------- */
.mq{display:flex;align-items:center;background:#18324f;border-top:1px solid rgba(97,196,202,.25);border-bottom:1px solid rgba(97,196,202,.12)}
.mq-tag{flex:none;position:relative;z-index:2;display:inline-flex;gap:8px;align-items:center;padding:6px 16px;margin-right:6px;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);background:#18324f;box-shadow:12px 0 18px #18324f}

/* ---------- dark control-room sections: team + numbers ---------- */
.crew{color:rgba(255,255,255,.8);background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(180deg,#18324f,var(--brand) 40%);background-size:56px 56px,56px 56px,auto}
.crew .h2{color:#fff}.crew .sub{color:rgba(255,255,255,.72)}.crew .kick{color:var(--accent)}
.crew .tc-f{border-color:rgba(255,255,255,.18);box-shadow:0 24px 60px rgba(0,0,0,.3)}
.storywrap{background:var(--brand)}
#numbers{background:linear-gradient(180deg,var(--brand),#18324f);color:rgba(255,255,255,.8)}
#numbers .h2{color:#fff}#numbers .sub{color:rgba(255,255,255,.72)}#numbers .kick{color:var(--accent)}
#numbers .nk{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none}
#numbers .nk b{color:#fff}#numbers .nk span{color:rgba(255,255,255,.7)}#numbers .nk em{color:var(--accent)}
#numbers .nk:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 20px 40px rgba(0,0,0,.25)}

/* ---------- big statement: a quiet light "briefing" between dark rooms ---------- */
.lit{position:relative;overflow:hidden}
.lit:before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 20% 50%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 20% 50%,#000,transparent 70%);opacity:.7}
.lit .wrap{position:relative}

/* ---------- inner pages: the page title sits in a small mission-control band ---------- */
.phead{position:relative;overflow:hidden;background:radial-gradient(800px 300px at 50% 120%,rgba(97,196,202,.28),transparent 65%),var(--brand);border-bottom:0;padding:130px 0 70px}
.phead .floor{height:80%;opacity:.8}
.phead .wrap{position:relative;z-index:2}
.phead h1{color:#fff}.phead .sub{color:rgba(255,255,255,.75)}.phead .kick{color:var(--accent)}
body.inner header:not(.open) .nv{background:rgba(255,255,255,.86)}

/* ---------- final call to action gets the floor too ---------- */
.cta2{overflow:hidden}
.cta2>*{position:relative;z-index:1}

/* ---------- phones ---------- */
@media (max-width:820px){
 .hero.mc{padding:110px 0 50px}
 .mstage{height:330px;margin-top:40px}
 .mboard{width:86%}
 .mb-cols{gap:6px;padding:8px}.mb-col{min-height:130px;padding:6px}.mb-col h5{font-size:.62rem}.mb-row{height:16px}.mb-row:before{width:8px;height:8px;top:4px}
 .mb-bar span{display:none}
 .mstage .hc{width:52px;margin:-36px 0 0 -26px}.mstage .hc .char{width:52px;height:66px}
 .chip{padding:6px 9px;font-size:.62rem}.chip b{font-size:.9rem}.chip.c3{display:none}
}
@media (prefers-reduced-motion:reduce){.floor,.mb-dot,.chip,.live{animation:none}}