/* ============================================================
   SITE HERO — unified banner component
   Base = the why-atomic-manufacturing hero, exactly.
   Modifiers may only change: background image, accent colour.
   Nothing else varies.

   Usage: <section class="site-hero site-hero--{variant}">
            <div class="wrap">
              <div class="eyebrow">...</div>
              <h1>...</h1>
              <p>...</p>
            </div>
          </section>
   ============================================================ */

.site-hero {
  position: relative;
  min-height: 760px;
  padding: 120px 0 var(--space-20);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: #04101b;
  margin-top: -88px;
}

.site-hero::before,
.site-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.site-hero::before {
  background-color: rgba(5, 10, 17, .16);
  background-blend-mode: multiply;
}

.site-hero .wrap { position: relative; z-index: 2; width: 100%; }

.site-hero .eyebrow { color: var(--cyan); }

.site-hero h1 {
  font-size: var(--fs-hero);
  letter-spacing: -.05em;
  line-height: .92;
  max-width: 1050px;
  margin: var(--space-4) 0 30px;
}

.site-hero p {
  max-width: 710px;
  font-size: var(--fs-body-lg);
  font-weight: 300;
}

/* Proof pills — optional slot, not required on every page */
.hero-proof { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: 34px; }
.proof-pill {
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.05);
  font-size: var(--fs-label);
  color: rgba(255,255,255,.75);
}

/* ============================================================
   PER-PAGE BACKGROUND MODIFIERS
   ::before = background image + gradient overlay
   ::after  = radial accent glow + bottom fade (omit with content:none)
   These are the ONLY things that differ between pages.
   ============================================================ */

/* WHY ATOMIC MANUFACTURING */
.site-hero--why::before {
  background-image: linear-gradient(90deg, rgba(6, 10, 15, .3), rgba(6, 10, 15, .12)), url('../images/hero-c6-photoreal.jpg');
  background-position: 70% 45%;
  background-size: cover;
  background-repeat: no-repeat;
}
.site-hero--why::after { content: none; }

/* WORK WITH US */
.site-hero--work::before {
  background-image: linear-gradient(90deg, rgba(6, 10, 15, .3), rgba(6, 10, 15, .12)), url('../images/banner-5.jpg');
  background-position: 70% 24%;
  background-size: cover;
  background-repeat: no-repeat;
}
.site-hero--work::after { content: none; }
.site-hero--work .btn { margin-top: var(--space-8); }

/* CONFERENCES — cyan accent instead of blue */
.site-hero--conference { background: #040b12; }
.site-hero--conference::before {
  background-image: linear-gradient(90deg, rgba(6, 10, 15, .3), rgba(6, 10, 15, .12)), url('../images/banner-9.jpg');
  background-position: 72% 45%;
  background-size: cover;
  background-repeat: no-repeat;
}
.site-hero--conference::after { content: none; }
.site-hero--conference .eyebrow { color: var(--cyan); }

.site-hero--news::before {
  background-image: linear-gradient(90deg, rgba(6, 10, 15, .3), rgba(6, 10, 15, .12)), url('../images/banner-7.jpg');
  background-position: center 35%;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ABOUT / CONTACT / NEWS */
.site-hero--about::before,
.site-hero--contact::before{
  background-image: linear-gradient(90deg, rgba(6, 10, 15, .3), rgba(6, 10, 15, .12)), url('../images/banner-2.jpg');
  background-position: center 35%;
  background-size: cover;
  background-repeat: no-repeat;
}
.site-hero--about::after,
.site-hero--contact::after,
.site-hero--news::after { content: none; }

/* CAREERS */
.site-hero--careers::before {
  background-image: linear-gradient(90deg, rgba(6, 10, 15, .3), rgba(6, 10, 15, .12)), url('../images/Molecular-Workstation-CBN-Scientist.jpg');
  background-position: center 22%;
  background-size: cover;
  background-repeat: no-repeat;
}
.site-hero--careers::after { content: none; }

/* OUR TECHNOLOGY — full image, readable left-side text */
.site-hero--technology::before {
  background-image: linear-gradient(90deg, rgba(6, 10, 15, .3), rgba(6, 10, 15, .12)), url('../images/banner-3.jpg');
  background-position: center 35%;
  background-size: cover;
  background-repeat: no-repeat;
}
.site-hero--technology::after { content: none; }

/* PUBLICATIONS — crimson palette */
.site-hero--publications { background: #0d0304; }
.site-hero--publications::before {
  background-image: linear-gradient(90deg, rgba(15, 3, 5, .3), rgba(15, 3, 5, .12)), url('../images/x-c2-crimson.jpg');
  background-position: center 40%;
  background-size: cover;
  background-repeat: no-repeat;
}
.site-hero--publications::after { content: none; }

/* LEGAL */
.site-hero--legal::before {
  background-image: linear-gradient(90deg, rgba(6, 10, 15, .3), rgba(6, 10, 15, .12)), url('../images/lab-workstation-band.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.site-hero--legal::after { content: none; }

/* ============================================================
   HOME — genuinely different: full-viewport, centre-aligned,
   animated .hero-bg div instead of ::before/::after
   ============================================================ */

.site-hero--home {
  min-height: 760px;
  padding: 120px 0 var(--space-20);
  background: #06101f;
}
.site-hero--home::before,
.site-hero--home::after { content: none; }
.site-hero--home .eyebrow { color: #fff; opacity: .9; }
.site-hero--home h1 {
  color: #fff;
  font-size: var(--fs-hero);
  letter-spacing: -.05em;
  line-height: .92;
  max-width: 1050px;
  margin: var(--space-4) 0 30px;
}
.site-hero--home h1 em { color: var(--quantum); font-style: normal; }
.site-hero--home p.lede {
  color: rgba(255,255,255,.86);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  font-weight: 300;
  max-width: 600px;
  margin-bottom: 34px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:1024px) {
  .site-hero { min-height: 540px; padding: 110px 0 60px; }
}

@media(max-width:768px) {
  .site-hero { min-height: 480px; padding: 100px 0 52px; }
}