/* ============================================================
   Company dark hero (.co-hero) — components/CompanyHero.astro.
   The ONE dark centered hero (Sofia, 2026-07-27 unification):
   /about/ · /careers/ · /contact-us/ · /technology/. Replaces the
   four per-page twins (.ab-hero / .cr-hero / .cu-hero / .tech-hero).
   Centered column on the brand Atmospheric 09 gradient: kicker ·
   balanced 2-line title · sub · optional CTA row · optional extra
   (careers' stats strip).
   ============================================================ */

.co-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* the next section rides over the cover with the 20/32px rounded
     curtain — the hero extends by exactly that overlap so the curtain
     edge sits AT the fold and only appears on scroll (Sofia, 2026-07-30;
     one rule for every co-hero page) */
  min-height: calc(100svh + 20px);
  text-align: center;
  background: var(--color-black) url("/gradients/brand-atmospheric-09.webp") center bottom / cover no-repeat;
  color: var(--color-grey-50);
}
@media (min-width: 768px) {
  .co-hero { min-height: calc(100svh + 32px); }
}

.co-hero__inner {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  max-width: 980px;
  padding: 140px 20px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.co-hero__title {
  margin-top: 24px;
  /* 17ch holds every family title balanced on two lines */
  max-width: 17ch;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: var(--track-tightest);
  color: var(--color-white);
}
@media (min-width: 640px) { .co-hero__title { font-size: 48px; } }
@media (min-width: 768px) { .co-hero__title { font-size: 60px; } }
@media (min-width: 1024px) { .co-hero__title { font-size: 72px; } }

/* wideTitle prop: titles past ~34 chars (awards' 49) balance on two
   lines at 26ch; the default 17ch would force a third */
.co-hero__title--wide { max-width: 26ch; }

.co-hero__sub {
  margin-top: 24px;
  /* two lines max (Sofia, 2026-07-27): 620px forced a third line */
  max-width: 760px;
  font-size: var(--fs-xl);
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.78);
}

.co-hero__ctas {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}