/* ================= Hero sizing (uniform across pages) =================
 * The hero stays at ~60% of viewport height across every resolution. Floors
 * keep it readable on tiny screens, the upper cap only kicks in past ~30"
 * monitors so heroes don't feel disproportionately small on 4K/5K.
 *
 *   - 440px floor on tiny portrait viewports
 *   - 60vh through the bulk of viewport sizes (488px at 720p, 648px at 1080p,
 *     864px at 1440p, 1296px at 4K — soft cap at 1100px past that)
 *   - Padding scales similarly so the inner content keeps the same air ratio.
 *
 * Page-level rules can still override font sizes, layout grids, colors.       */
.hero,
.hww-hero,
.solutions-hero,
.contact-hero,
.partners-hero,
.press-hero,
.mk-hero {
  min-height: clamp(440px, 60vh, 1100px) !important;
  padding: clamp(72px, 9vh, 160px) 0 clamp(64px, 8vh, 140px) !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

/* Lift the headline ceiling so the hero copy keeps scaling on big monitors
 * instead of looking lost in negative space. Page-level h1 rules previously
 * capped near ~104-124px and felt tiny on 2560/4K displays.                 */
.hero h1,
.hww-hero h1,
.solutions-hero h1,
.contact-hero h1,
.partners-hero h1,
.press-hero h1,
.mk-hero h1 {
  font-size: clamp(48px, 5.5vw, 160px) !important;
}

@media (max-width: 768px) {
  .hero h1,
  .hww-hero h1,
  .solutions-hero h1,
  .contact-hero h1,
  .partners-hero h1,
  .press-hero h1,
  .mk-hero h1 {
    font-size: clamp(40px, 9vw, 72px) !important;
  }
}

@media (max-width: 768px) {
  .hero,
  .hww-hero,
  .solutions-hero,
  .contact-hero,
  .partners-hero,
  .press-hero,
  .mk-hero {
    min-height: clamp(360px, 56vh, 640px) !important;
    padding: clamp(56px, 10vh, 96px) 0 clamp(48px, 8vh, 80px) !important;
  }
}

/* ================= Hero photo treatment =================
 * Two patterns:
 *  1. .hero-photo--bleed — full-section background with scrim (single-col heroes)
 *  2. .hero-photo--inline — fits inside an existing grid column (home hero)
 */

/* ---- Full-bleed photo background ---- */
.hero-photo--bleed {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-photo--bleed img,
.hero-photo--bleed picture,
.hero-photo--bleed picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-photo-pos, center);
  /* Default tone-down: match the dark brand so daylight imagery doesn't shout. */
  filter: var(--hero-photo-filter, brightness(0.7) saturate(0.78));
}

/* Scrim — sits above the photo, below content. Direction picks where the
 * darkest band lands so headline copy is always legible.            */
.hero-photo--bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(
    --hero-photo-scrim,
    linear-gradient(
      90deg,
      rgba(8, 12, 18, 0.78) 0%,
      rgba(8, 12, 18, 0.62) 35%,
      rgba(8, 12, 18, 0.35) 70%,
      rgba(8, 12, 18, 0.20) 100%
    )
  );
  pointer-events: none;
}

/* Per-page scrim direction overrides */
.hww-hero,
.solutions-hero,
.contact-hero,
.press-hero,
.partners-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hww-hero > .container,
.solutions-hero > .container,
.contact-hero > .container,
.press-hero > .container,
.partners-hero > .container,
.hww-hero > .container.inner,
.solutions-hero > .container.inner,
.contact-hero > .container.inner {
  position: relative;
  z-index: 2;
}

.hww-hero > .grid-bg,
.solutions-hero > .grid-bg,
.contact-hero > .grid-bg {
  z-index: 1;
}

.solutions-hero > .orb {
  z-index: 1;
}

/* Photo defaults to subtle warm contrast — overridable per page via
 * --hero-photo-pos and --hero-photo-scrim CSS variables on the section.   */

/* ---- Inline photo (home hero right column) ---- */
.hero-photo--inline {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
    0 24px 60px -28px rgba(0, 0, 0, 0.55),
    0 8px 24px -12px rgba(0, 0, 0, 0.4);
  background: #060b12;
}

.hero-photo--inline img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-photo-pos, left center);
  /* Slight cooling so the bright lightbox panel feels part of the dark brand. */
  filter: var(--hero-photo-filter, brightness(0.86) saturate(0.92));
}

/* Soft brand accent edge */
.hero-photo--inline::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(126, 233, 199, 0.10) inset;
}

@media (max-width: 960px) {
  .hero-photo--inline {
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo--bleed,
  .hero-photo--inline {
    transition: none;
  }
}

/* Mobile bleed overrides — small viewports show the photo full-width with
 * the subject closer to center, so the headline-side scrim needs more weight
 * and a vertical (top-heavy) component so copy sits over a dark band.        */
@media (max-width: 640px) {
  .contact-hero {
    --hero-photo-pos: center !important;
    --hero-photo-scrim: linear-gradient(
      180deg,
      rgba(6, 11, 18, 0.92) 0%,
      rgba(6, 11, 18, 0.78) 40%,
      rgba(6, 11, 18, 0.50) 75%,
      rgba(6, 11, 18, 0.30) 100%
    ) !important;
  }

  .solutions-hero {
    --hero-photo-pos: center !important;
    --hero-photo-scrim: linear-gradient(
      180deg,
      rgba(6, 11, 18, 0.78) 0%,
      rgba(6, 11, 18, 0.55) 45%,
      rgba(6, 11, 18, 0.85) 100%
    ) !important;
  }

  .hww-hero {
    --hero-photo-scrim: linear-gradient(
      180deg,
      rgba(8, 12, 18, 0.82) 0%,
      rgba(8, 12, 18, 0.62) 50%,
      rgba(8, 12, 18, 0.82) 100%
    ) !important;
  }
}