/* ============================================================
   SCAPEX v2 — navy / blue / grey re-skin
   Layer over site.css. Changes nothing in the markup's meaning:
   overrides the design tokens, then restyles the existing hooks
   (.hdr, .hero, .ticker, .sect, .stats, .feature, .card, .step).
   Palette sampled from the logo: #004A9E blue, #FDA035 sunburst.
   ============================================================ */

/* ---------- tokens: one fixed brand look in every theme ---------- */
:root,
:root[data-theme="light"],
:root[data-theme="dark"]{
  --ground:#021B33; --panel:#08263F; --panel-2:#0C2E4B; --rule:#1B3A58;
  --ink:#FFFFFF; --ink-2:#C6D3E0; --ink-3:#94A8BC;
  --blue:#5AA9F5; --blue-deep:#004A9E; --blue-tint:#0A2E4E; --blue-wash:#072542;
  --orange:#FDA035; --orange-deep:#E8871E;
  --dark-ground:#021B33; --on-dark:#FFFFFF; --on-dark-2:#C6D3E0; --on-dark-3:#94A8BC;
  --dark-rule:#1B3A58; --focus:#5AA9F5;
  --mist:#F3F6FA; --mist-2:#E4EAF2; --mist-rule:#CBD5E1;
  --on-mist:#06233F; --on-mist-2:#465A72; --on-mist-3:#3D5573;
  --display:Archivo,"Sequel Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font:"Instrument Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --r-lg:22px; --r-md:18px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#021B33; --panel:#08263F; --rule:#1B3A58;
    --ink:#FFFFFF; --ink-2:#C6D3E0; --ink-3:#94A8BC;
    --blue:#5AA9F5; --blue-deep:#004A9E; --blue-tint:#0A2E4E; --blue-wash:#072542;
    --focus:#5AA9F5;
  }
}

html{color-scheme:dark}
body{font-family:var(--font);background:var(--ground);color:var(--ink)}

/* ---------- typography: heavy, tight display ---------- */
.display,.h1,.h2,.h3,.statement,.stat b,.step h3,.card h3,.feature .h3{
  font-family:var(--display);
}
.display{font-size:clamp(3rem,7.6vw,6.9rem);line-height:.93;font-weight:800;letter-spacing:-.045em}
.h2{font-size:clamp(2rem,4.2vw,3.85rem);line-height:1.02;font-weight:800;letter-spacing:-.04em}
.h3{font-weight:700;letter-spacing:-.028em;line-height:1.16}
.statement{font-size:clamp(1.35rem,2.5vw,2.05rem);line-height:1.3;font-weight:700;
  letter-spacing:-.028em;max-width:24ch}
.ital{font-style:italic;color:var(--blue)}

.eyebrow{display:flex;align-items:center;gap:14px;font-size:.75rem;letter-spacing:.22em;
  font-weight:600;color:var(--ink-3);text-transform:uppercase}
.eyebrow::before{content:"";width:40px;height:1px;background:var(--blue);flex:0 0 40px}

/* ---------- header: floating pill ---------- */
.hdr{background:transparent;border-bottom:0;padding:14px var(--pad) 0;top:14px}
.hdr-in{height:auto;min-height:72px;padding:10px 12px 10px 26px;gap:26px;
  background:rgba(8,38,63,.92);border:1px solid var(--rule);border-radius:var(--r-pill);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hdr .mark img{height:30px;width:auto}
.nav{flex:1;justify-content:center}
.nav a{color:var(--ink-2);border-bottom-color:transparent}
.nav a:hover{color:var(--blue);border-bottom-color:transparent}
.theme-btn{display:none}
.hdr .pill{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;font-weight:600}
.hdr .pill .chip{background:#fff;color:var(--blue-deep)}
.mnav{background:var(--panel);border-top:1px solid var(--rule)}

/* ---------- hero ---------- */
.hero{background:var(--dark-ground);color:var(--on-dark)}
.hero-in{padding-block:clamp(120px,15vw,200px) clamp(72px,9vw,120px)}
.hero-sub{color:var(--ink-2);font-size:1.15rem;line-height:1.55;max-width:34ch}
.hero .pill.on-dark{background:#fff;border-color:#fff;color:#021B33;font-weight:700}
.hero .pill.on-dark .chip{background:var(--blue-deep);color:#fff}
.hero .pill.on-dark:nth-of-type(2){background:transparent;border-color:var(--rule);color:#fff}
.hero .pill.on-dark:nth-of-type(2) .chip{background:var(--panel);color:#fff}

/* ticker strip — the one place the logo's sunburst orange survives */
.hero-foot{background:var(--mist);border-top:0}
.ticker span{color:var(--on-mist-3);font-size:.8rem;letter-spacing:.18em;font-weight:600;
  text-transform:uppercase}
.ticker i{background:var(--orange)}

/* ---------- section rhythm: navy, then light, alternating ---------- */
main > section{background:var(--ground);color:var(--ink)}
main > section.rule-top{border-top:1px solid var(--rule)}

main > section:nth-of-type(even){
  --ground:var(--mist); --panel:var(--mist-2); --rule:var(--mist-rule);
  --ink:var(--on-mist); --ink-2:var(--on-mist-2); --ink-3:var(--on-mist-3);
  --blue:var(--blue-deep); --blue-wash:var(--mist-2); --blue-tint:#DCE6F2;
  --dark-ground:var(--mist-2); --on-dark:var(--on-mist); --on-dark-2:var(--on-mist-2);
  background:var(--mist); color:var(--on-mist); border-top:0;
}
main > section:nth-of-type(even) .eyebrow::before{background:var(--blue-deep)}

/* ---------- cards and panels ---------- */
.feature{background:var(--panel);border:1px solid var(--rule);color:var(--ink);min-height:460px}
.feature:hover{border-color:var(--blue)}
/* deepen the scrim so the copy clears the artwork at every card height */
.feature::after{background:linear-gradient(180deg,rgba(2,27,51,0) 20%,rgba(2,27,51,.80) 52%,rgba(2,27,51,.97) 78%)}
.feature .h3{color:#fff}
.feature p{color:var(--on-dark-2)}
.feature .tag{color:var(--blue);letter-spacing:.2em;font-weight:700;font-size:.75rem}
.card{background:var(--panel);border:1px solid var(--rule)}
.card:hover{border-color:var(--blue);transform:none}
.card .n{color:var(--blue);letter-spacing:.16em;font-weight:700;font-size:.75rem}
.card .kw{color:var(--ink-3);font-size:.8rem;letter-spacing:.04em}
.step{background:var(--panel)}
.step b{color:var(--blue);letter-spacing:.18em;font-weight:700;font-size:.75rem}

.stats{border-radius:var(--r-lg)}
.stat{background:var(--panel);padding:34px 28px}
.stat b{color:var(--blue);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(2.2rem,3.8vw,3rem)}
.stat span{color:var(--ink-2)}
.stat em{color:var(--ink-3);font-style:normal;letter-spacing:.14em;font-size:.75rem;
  text-transform:uppercase;font-weight:600}

.notice{background:transparent;border:0;border-left:3px solid var(--blue);
  border-radius:0;padding:4px 0 4px 22px}
.notice p{color:var(--ink-2)}
.notice strong{color:var(--ink)}

/* ---------- ghost word behind the services grid ---------- */
#services{position:relative;overflow:hidden}
#services::before{content:"SERVICES";position:absolute;left:calc(var(--pad) - 6px);top:28px;
  font-family:var(--display);font-weight:800;line-height:1;pointer-events:none;user-select:none;
  font-size:clamp(78px,15vw,210px);letter-spacing:-.05em;color:rgba(255,255,255,.04)}
#services > .wrap{position:relative}

/* ---------- pills on light ground ---------- */
main > section:nth-of-type(even) .pill{background:#fff;border-color:var(--mist-rule);color:var(--on-mist)}
main > section:nth-of-type(even) .pill .chip{background:var(--blue-deep);color:#fff}
main > section:nth-of-type(even) .pill:hover{border-color:var(--blue-deep)}

/* ---------- closing CTA: solid logo blue ---------- */
main > section#contact{
  --ground:var(--blue-deep); --panel:var(--blue-deep); --rule:rgba(255,255,255,.3);
  --ink:#FFFFFF; --ink-2:#C9DDF5; --ink-3:#AFCDEF; --blue:#FFFFFF;
  background:var(--blue-deep); color:#fff; border-top:0;
}
main > section#contact .eyebrow::before{background:rgba(255,255,255,.7)}
main > section#contact .pill{background:#fff;border-color:#fff;color:var(--blue-deep);font-weight:700}
main > section#contact .pill .chip{background:var(--blue-deep);color:#fff}

/* ---------- footer ---------- */
.ftr{background:#011527;border-top:1px solid var(--rule)}
.ftr a:hover{color:var(--blue)}
.ftr-h{color:var(--ink-3);letter-spacing:.18em;font-size:.75rem;font-weight:700;
  text-transform:uppercase}

/* ---------- focus visibility ---------- */
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hdr{padding:10px var(--pad) 0;top:10px}
  .hdr-in{min-height:58px;padding:8px 8px 8px 18px}
  .hdr .mark img{height:24px}
  .statement{max-width:none}
  #services::before{left:8px;top:16px}
}

/* ---------- contact form on the blue band ---------- */
main > section#contact input,
main > section#contact select,
main > section#contact textarea{
  background:#FFFFFF;color:#06233F;border:1px solid rgba(255,255,255,.55);
}
main > section#contact input::placeholder,
main > section#contact textarea::placeholder{color:#5B7391;opacity:1}
main > section#contact input:focus,
main > section#contact select:focus,
main > section#contact textarea:focus{outline:2px solid #fff;outline-offset:2px;border-color:#fff}
main > section#contact label{color:#DCE9F8}