/* About hero — layered full-bleed image + green overlay; staggered reveal on load. */
.hero-about {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  color: var(--color-white);
  --hero-overlay: var(--color-land);
}
/* Per-page overlay tint (ACF "Overlay colour"). Default Land (green); e.g. About = land, Careers = clay. */
.hero-about--overlay-clay {
  --hero-overlay: var(--color-clay);
}
.hero-about--overlay-water {
  --hero-overlay: var(--color-water);
}
.hero-about--overlay-steel {
  --hero-overlay: var(--color-steel);
}
.hero-about--overlay-skyline {
  --hero-overlay: var(--color-skyline-2);
}
.hero-about__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-about__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--hero-overlay) 72%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero-about__inner {
  position: relative;
  min-height: 100vh;
  align-content: center;
  padding-block: var(--section-pad);
}
.hero-about__title {
  grid-column: 1 / 7;
  align-self: start;
  margin: 0;
  font-size: var(--text-h2);
  line-height: var(--lh-tight);
  color: var(--color-white);
}
.hero-about__inset {
  position: relative;
  grid-column: 5 / 9;
  align-self: center;
  justify-self: center;
  margin: 0;
  width: clamp(17.5rem, 16.8932rem + 2.589vw, 20rem);
  aspect-ratio: 1 / 1; /* square window at rest; the zoom grows the box to reveal the natural framing */
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.hero-about__inset-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Two gradient overlays over the inset photo (Figma: 2× linear @ 40%). */
.hero-about__inset::before,
.hero-about__inset::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
}
.hero-about__inset::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 39%);
}
.hero-about__inset::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 20%, rgba(102, 102, 102, 0.2) 100%);
}
.hero-about__statement {
  grid-column: 6 / -1;
  align-self: end;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--lh-quote);
  color: var(--color-white);
}

/* Breadcrumb — pinned bottom-left, aligned to the grid content edge. z-index 2 keeps
   it above the inset (z-index 1 during the zoom) so it stays visible once the photo
   has zoomed to fullscreen. */
.hero-about__breadcrumb {
  position: absolute;
  left: var(--container-pad);
  bottom: var(--sp-xl);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--text-h7);
  color: var(--color-white);
}
.hero-about__breadcrumb a {
  color: var(--color-white);
  opacity: 0.85;
}
.hero-about__breadcrumb a:hover {
  opacity: 1;
  text-decoration: none;
}
.hero-about__breadcrumb .ph {
  font-size: 0.85em;
  opacity: 0.7;
}

/* Staggered reveal — JS adds .is-revealed; baseline (no JS / reduced-motion) shows immediately. */
.hero-about [data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
  transition-delay: calc(var(--stagger, 0) * 140ms);
}
.hero-about__inset[data-animate] {
  transform: translateY(28px) scale(0.94);
}
.hero-about.is-revealed [data-animate] {
  opacity: 1;
  transform: none;
}

/* === Zoom-to-fullscreen variant (added by hero-zoom.js on desktop, opt-in via data-hero-zoom) ===
   Section clips overflow so the inset photo can scale up to cover the viewport without
   bleeding past the hero once the pin releases. The inset lifts above the title/statement. */
.hero-about.is-hero-zoom {
  overflow: clip;
}
.hero-about.is-hero-zoom .hero-about__inset {
  z-index: 1;
  will-change: transform;
}
/* During the zoom the photo is sized as a 16:9 window (undistorted, object-fit cover)
   centred in the square frame; hero-zoom.js counter-scales it on X so the frame can
   grow square → 16:9 fullscreen without ever stretching the image. */
.hero-about.is-hero-zoom .hero-about__inset-img {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Size from the square figure's WIDTH, then let aspect-ratio derive the height.
     Safari won't resolve a percentage height (height:100%) against a parent whose
     own height comes from aspect-ratio, so the old width:auto/height:100% combo left
     the image at its intrinsic size (photo only filling part of the frame). The
     figure is square, so 16/9 of its width == 16/9 of its height. */
  width: 177.7778%;
  height: auto;
  max-width: none;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%); /* fallback until GSAP takes over */
  will-change: transform;
}
/* GSAP owns transform + opacity here and scrubs them to scroll; the on-load reveal's
   0.8s CSS transitions would intercept and lag every change, so switch them off for a
   1:1 smooth, scroll-linked motion. */
.hero-about.is-hero-zoom [data-animate] {
  transition: none;
}

@media (max-width: 900px) {
  .hero-about__title,
  .hero-about__inset,
  .hero-about__statement {
    grid-column: 1 / -1;
  }
  .hero-about__inset {
    justify-self: center;
    max-width: 30rem;
  }
  .hero-about__statement {
    font-size: var(--text-h4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-about [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}