/* ================================================================
   KAAPL — Home page
   Hero, stats, service grid, project grid, CTA band.
   ================================================================ */

/* ================================================================
   Hero
   ================================================================ */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 600px;
  min-height: 100svh;
  padding-top: calc(var(--navbar-height) + var(--space-16));
  padding-bottom: var(--space-16);
  overflow: hidden;
  background-color: var(--color-navy);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* <picture> is an inline box by default, so a percentage height on the <img>
   inside it resolves against nothing and the photo sits at its natural aspect
   instead of covering the hero. The wrapper has to be a sized block. */
.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim: strong enough at the bottom for AA text, clear at the top so the
   building is still the first thing you see. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--gradient-overlay);
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  color: var(--color-text-inverse);
}

.hero__title {
  margin: 0;
  color: var(--color-text-inverse);
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.hero .rule {
  width: 64px;
  height: 4px;
}

.hero__lead {
  max-width: 46ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--text-body-lg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-8) 0 0;
}

.hero__actions .btn {
  flex: 1 1 auto;
}

.hero__provenance {
  position: absolute;
  right: var(--container-pad);
  bottom: var(--space-4);
  z-index: 1;
  color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 640px) {
  .hero__actions .btn {
    flex: 0 0 auto;
  }
}

/* The hero is tall; on short landscape screens let it shrink to content. */
@media (max-height: 560px) {
  .hero {
    min-height: 0;
  }
}

/* .stats is shared with the About page and lives in components.css. */

/* ================================================================
   Grids
   ================================================================ */

/* .service-grid and .project-grid are shared with other pages and live in
   components.css. */

/* .cta is rendered by contactBand() on nearly every page and lives in
   components.css. */