/* ==========================================================================
   Hero sections — fit the first screen below the fixed 88px header
   Applies to Home, About and the three service pages. Loads last.

   Visible hero height = window height − header, capped at 860px. Heights
   are min-heights: if a short screen can't fit the content legibly, the
   hero grows instead of clipping anything.
   ========================================================================== */
:root {
  --header-h: 88px;
  --hero-visible: min(calc(100svh - var(--header-h)), 860px);
}

/* ---------- Home (slideshow): sits behind the header, so it adds the
   header height on top and centres the copy in the visible part ---------- */
.hero {
  box-sizing: border-box;
  min-height: calc(var(--header-h) + var(--hero-visible));
  padding-top: var(--header-h);
  /* room for the slide dots + arrows at the bottom */
  padding-bottom: clamp(70px, 11vh, 110px)
}

.hero-content {
  padding-top: clamp(12px, 3vh, 32px);
  padding-bottom: 0
}

.hero .eyebrow {
  margin-bottom: clamp(10px, 1.8vh, 17px)
}

.hero h1 {
  font-size: max(2.125rem, min(var(--fs-display), 8.4vh))
}

.hero-copy {
  margin-top: clamp(14px, 2.6vh, 28px)
}

.hero-actions {
  margin-top: clamp(18px, 3.4vh, 34px)
}

.hero-indicators {
  bottom: clamp(28px, 6vh, 58px)
}

.hero-arrows {
  bottom: clamp(16px, 4.4vh, 42px)
}

/* ---------- About: also sits behind the header ---------- */
.about-hero {
  box-sizing: border-box;
  min-height: calc(var(--header-h) + var(--hero-visible));
  align-items: end;
  /* keep the presenter (centre of the photo) in view at every width */
  background-position: center, 50% 30%
}

.about-hero .container {
  padding-top: calc(var(--header-h) + clamp(20px, 4vh, 48px));
  padding-bottom: clamp(28px, 8vh, 76px)
}

.about-hero .eyebrow {
  margin-bottom: clamp(10px, 1.8vh, 18px)
}

.about-hero h1 {
  font-size: max(2rem, min(var(--fs-h1), 7.4vh))
}

.about-hero p:not(.eyebrow) {
  margin-top: clamp(12px, 2.4vh, 22px)
}

/* ---------- Service pages: already start below the header ---------- */
.research-hero-content,
.renovation-hero-content,
.inspection-hero {
  min-height: var(--hero-visible);
  /* keep eyebrow, heading, text and button together instead of spreading
     them across the taller hero */
  align-content: end;
  padding-top: clamp(28px, 6vh, 64px);
  padding-bottom: clamp(28px, 8vh, 90px)
}

.research-hero-content .eyebrow,
.renovation-hero-content .eyebrow,
.inspection-hero-content .eyebrow {
  margin-bottom: clamp(10px, 1.8vh, 18px)
}

.research-hero-content h1,
.renovation-hero-content h1,
.inspection-hero-content h1 {
  font-size: max(2rem, min(var(--fs-h1), 7vh))
}

.research-hero-content .hero-intro,
.renovation-hero-content .hero-intro,
.inspection-hero-content p:not(.eyebrow) {
  margin: clamp(12px, 2.6vh, 28px) 0 clamp(16px, 3.6vh, 36px)
}

/* ---------- Tablets and phones ---------- */
@media (max-width: 850px) {

  .research-hero-content,
  .renovation-hero-content,
  .inspection-hero {
    padding: clamp(24px, 5vh, 64px) 24px clamp(24px, 6vh, 72px)
  }
}

@media (max-width: 820px) {
  .hero {
    padding-bottom: clamp(84px, 13vh, 110px)
  }

  .hero h1 {
    font-size: max(2rem, min(var(--fs-display), 6.4vh))
  }
}

@media (max-width: 700px) {

  .about-hero h1,
  .research-hero-content h1,
  .renovation-hero-content h1,
  .inspection-hero-content h1 {
    font-size: max(1.75rem, min(var(--fs-h1), 6vh))
  }
}