/* ==========================================================================
   KOBIL — Company — Section: Hero
   Figma: D-Company header 5882:51070 (background 6047:112519, 1440x1032 —
   full-bleed, no card inset) · M-Company 5882:51385 (393x758).
   The gradient fades out into white at the bottom; the white content card
   (.page-surface--flush) is pulled up over it by 434 / 328.
   ========================================================================== */

.sec-company-hero {
  position: relative;
  /* Pulled up under the floating header pill (20px float + 80px bar) so the
     pill sits ON the gradient, the way D-Company puts nav/desktop at y=30
     inside the hero frame — same technique as css/sections/hero.css. */
  margin-top: calc(-1 * var(--w100));
  isolation: isolate;
  height: var(--w1032);
  overflow: clip;
}

/* ---- Background: baked-in gradient (Figma blur vectors → WebP) ---- */

.co-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
}

.co-hero__bg-img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}

/* ---- Centered title block (Figma: 813-wide title frame at y=273) ---- */

.co-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--w19);
  padding: var(--w273) var(--w24) 0;
  text-align: center;
}

.co-hero__title {
  font-family: var(--font-serif);
  font-size: var(--w64);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--white);
}

.co-hero__sub {
  max-width: var(--w781);
  font-family: var(--font-sans);
  font-size: var(--w20);
  font-weight: 400;
  line-height: var(--w26);
  color: rgba(255, 255, 255, 0.8);
}

/* ---- Phone (Figma M-Company 5882:51385/51395: 393x758, title at y=147,
   inner column 321 wide, H1 36/40, body 18/26) ---- */

@media (max-width: 768px) {
  .sec-company-hero {
    /* phone pill: 16px float + 52px bar, same value css/sections/hero.css uses */
    margin-top: calc(-1 * var(--m68));
    height: var(--m758);
  }

  .co-hero__content {
    gap: var(--m16);
    padding: var(--m147) var(--m36) 0;
  }

  .co-hero__title {
    font-size: var(--m36);
    line-height: var(--m40);
  }

  .co-hero__sub {
    max-width: var(--m321);
    font-size: var(--m18);
    line-height: var(--m26);
  }
}