/* =====================================================
   HERO ROOT
===================================================== */
#sk-hero {
  position: relative;
  overflow: hidden;

  min-height: 100vh;
  display: flex;
  align-items: center;
}

#sk-hero > div {
  width: 100%;
  height: 100%;
}

/* =====================================================
   HERO IMAGE – SHARP
===================================================== */
#sk-hero > div > img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  z-index: 0;
}

/* =====================================================
   SUBTLE OVERLAY
===================================================== */
#sk-hero > div > span {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.25)
  );

  z-index: 1;
}

/* =====================================================
   HERO CONTENT CONTAINER
===================================================== */
#sk-hero > div > div {
  position: relative;
  z-index: 2;

  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  width: 100%;
}

/* =====================================================
   TITLE
===================================================== */
#sk-hero h1 {
  color: #fff;
  font-size: var(--fs-800);
  margin: 0 0 var(--space-3) 0;
}

/* =====================================================
   SUBTITLE
===================================================== */
#sk-hero .sk-hero-subtitle {
  color: rgba(255,255,255,0.92);
  font-size: var(--fs-600);
  max-width: 640px;
  margin: 0;
}

/* =====================================================
   BOTTOM FADE INTO PAGE
===================================================== */
#sk-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--color-bg));
  z-index: 1;
}

/* =====================================================
   MOBILE HEADER OFFSET
===================================================== */
@media (max-width: 900px) {
  #sk-hero {
    min-height: calc(100vh - 64px);
  }
}