/*
  About page. Scoped to body.page-about.
  Reel photography hero, intro split, three-card dark band, light CTA.
*/

.page-about {
  --pd-hero-min: clamp(460px, 40vw, 560px);
  --pd-h1: clamp(38px, 4.8vw, 70px);
}

/* Line up the card titles so rules and copy start at the same height */
@media (min-width: 1000px) {
  .page-about .about-values h3 { display: flex; align-items: flex-end; min-height: 66px; }
}

.page-about main > .hero.about-hero {
  background: #06192b url("about-reels.webp") center / cover;
}

.page-about main > .hero.about-hero h1 { max-width: 760px; }

@media (max-width: 760px) {
  .page-about main > .hero.about-hero { background-position: 58% center; }
}

/* Reinforce photo contrast while keeping the reels visible. */
.page-about main > .hero.about-hero::after { opacity: 0; }
.page-about main > .hero.about-hero .hero-inner::before { background: linear-gradient(90deg, #03121b40, #03121b26); }
.page-about main > .hero.about-hero .hero-headline span { color: #fff; }
.page-about main > .hero.about-hero h1 { font-size: clamp(36px, 4.1vw, 62px); }
@media (max-width: 760px) {
  .page-about main > .hero.about-hero .hero-inner::before { background: #03121b9e; }
  .page-about main > .hero.about-hero h1 { font-size: clamp(30px, 8vw, 46px); }
}

.page-about main > .hero.about-hero .hero-copy { color: #fff; }

.page-about main > .hero.about-hero .hero-headline .hero-line-third { color: var(--teal); }

/* Desktop video keeps the existing reel photo for mobile and reduced motion. */
.about-video{display:none}
@media(min-width:761px){
.page-about main > .hero.about-hero{isolation:isolate}
.about-video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:0;transition:opacity .3s linear}
.about-video.is-playing{opacity:1}
.page-about main > .hero.about-hero::after{opacity:.3}
.page-about main > .hero.about-hero .hero-inner::before{background:linear-gradient(90deg,#03121bcc 0%,#03121b99 38%,#03121b33 70%,#03121b22)}
}
@media(prefers-reduced-motion:reduce){.about-video{display:none}}

/* Match the desktop loading image to the first video frame. */
@media(min-width:761px) and (prefers-reduced-motion:no-preference){
.page-about main > .hero.about-hero{background-image:url("about-warehouse-poster.webp")}
}