/* ============================================================== hero banner
 * Full-width banner with a photograph, a legibility scrim, and three layers
 * of slow drifting light. Added 2026-08-17.
 *
 * The reference study drifted clouds over a sky. Clouds over an office
 * interior read as fog, so the same three-speed parallax structure carries
 * soft luminance instead: it gives depth over any photograph rather than
 * only over sky.
 *
 * Markup a page provides:
 *   <section class="hero-banner v-benefits" style="--hero-img:url(...)">
 *     <div class="wrap hero-inner"> ...eyebrow, h1, lede, buttons... </div>
 *   </section>
 * The drifting layers are injected by assets/hero.js. A page never writes them.
 *
 * Motion is continuous and slight. It should read as atmosphere, not as
 * animation, and it stops completely under prefers-reduced-motion.
 */

.hero-banner{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  min-height:clamp(420px,46vw,560px);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--navy-deep,#0B2A57);
  isolation:isolate;
}
.hero-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--hero-img);
  background-size:cover;
  background-position:var(--hero-pos,center);
  transform:scale(1.06);
  animation:heroBreathe 26s ease-in-out infinite alternate;
  z-index:0;
}
/* Scrim. Dense on the reading side, clearing across the image so the
   photograph is still legible as a photograph. */
.hero-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,
    rgba(6,22,48,.95) 0%,
    rgba(6,22,48,.93) 40%,
    rgba(6,22,48,.84) 52%,
    rgba(6,22,48,.52) 68%,
    rgba(6,22,48,.30) 86%,
    rgba(6,22,48,.26) 100%);
  z-index:1;
}
.hero-atmos{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hero-layer{position:absolute;inset:0;will-change:transform}
.hero-layer .puff{
  position:absolute;width:26%;height:34%;border-radius:999px;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.30),rgba(255,255,255,0) 68%);
  filter:blur(18px);
}
.hero-layer.back{animation:heroDriftBack 52s linear infinite;opacity:.34}
.hero-layer.mid{animation:heroDriftMid 38s linear infinite;opacity:.26}
.hero-layer.front{animation:heroDriftFront 27s linear infinite;opacity:.18}
.hero-layer.back .puff{filter:blur(26px);transform:scale(1.25)}
.hero-layer.front .puff{filter:blur(12px);transform:scale(.7)}
.hero-glow{
  position:absolute;left:52%;top:8%;width:44%;height:64%;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 55% 40%,rgba(255,246,224,.16),transparent 64%);
  animation:heroBreatheGlow 9s ease-in-out infinite;
}
@keyframes heroDriftBack{from{transform:translate3d(0,0,0)}to{transform:translate3d(-44%,0,0)}}
@keyframes heroDriftMid{from{transform:translate3d(0,0,0)}to{transform:translate3d(-60%,0,0)}}
@keyframes heroDriftFront{from{transform:translate3d(0,0,0)}to{transform:translate3d(-76%,0,0)}}
@keyframes heroBreatheGlow{0%,100%{opacity:.42}50%{opacity:.82}}
@keyframes heroBreathe{from{transform:scale(1.06)}to{transform:scale(1.12)}}

.hero-inner{position:relative;z-index:3;padding-block:clamp(56px,7vw,84px)}
.hero-banner .hero-inner .eyebrow{color:var(--v-tint,#9FC4E8)}
.hero-banner .hero-inner h1{color:#fff;margin-top:14px;max-width:17ch;text-shadow:0 2px 18px rgba(4,14,32,.45)}
.hero-banner .hero-inner .lede{color:#DDE7F1;margin-top:20px;max-width:44ch}
.hero-banner .hero-inner .hero-note{margin-top:20px;font-size:var(--sm);color:#A9BDD2;max-width:44ch;line-height:1.6}
.hero-banner .hero-inner .btn-row{margin-top:30px}
/* background MUST be reset here. The base .btn-ghost sets background:#fff,
   so overriding only the text colour produced white on white and six
   invisible calls to action across six pages. */
.hero-banner .hero-inner .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.46)}
.hero-banner .hero-inner .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.10);color:#fff}

/* Accent per vertical. One place, so an eyebrow can never drift to grey. */
.v-benefits{--v:var(--green);--v-tint:#9AD3A4}
.v-ai{--v:var(--purple);--v-tint:#C9B6F0}
.v-staffing{--v:var(--teal);--v-tint:#8FD3D3}
.v-global{--v:var(--blue);--v-tint:#A8CBF2}
.v-deploy{--v:var(--rust);--v-tint:#EDB09F}
.v-education{--v:var(--amber);--v-tint:#F0C88C}
.v-company{--v:var(--blue);--v-tint:#A8CBF2}

@media(max-width:760px){
  .hero-banner{min-height:auto}
  .hero-banner::after{background:linear-gradient(178deg,rgba(6,22,48,.86) 0%,rgba(6,22,48,.90) 60%,rgba(6,22,48,.95) 100%)}
  .hero-inner h1,.hero-banner .hero-inner .lede{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-banner::before{animation:none;transform:none}
  .hero-layer,.hero-glow{animation:none}
  .hero-atmos{opacity:.5}
}