/* The About photograph forms one continuous first screen from navigation to promise. */
body.about-page {
  --about-masthead-end: calc(88px + 60px + clamp(650px, 61vw, 760px));
  position: relative;
}

body.about-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--about-masthead-end);
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9, 56, 113, .66) 0%, rgba(12, 75, 139, .43) 37%, rgba(19, 87, 143, .10) 69%, transparent 86%),
    linear-gradient(0deg, rgba(7, 52, 109, .49) 0%, transparent 36%),
    #5fa6d8 url('/assets/about-hero-dusk-flowers.webp') center center / cover no-repeat;
}

body.about-page > .site-header,
body.about-page > .page,
body.about-page > .contact-page { position: relative; z-index: 1; }

body.about-page .site-header {
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  background: transparent;
}

body.about-page .brand,
body.about-page .nav a,
body.about-page .lang { color: #fff; text-shadow: 0 1px 10px rgba(7, 53, 105, .16); }
body.about-page .nav a:hover,
body.about-page .nav a[aria-current=page] { color: #fff; border-color: #fff; }
body.about-page .header-cta { background: #fff; color: #15528d; }
body.about-page .header-cta:hover { background: #eaf5ff; }

body.about-page .breadcrumb {
  min-height: 60px;
  padding: 0;
  color: #f3f9ff;
  text-shadow: 0 1px 10px rgba(7, 53, 105, .16);
}
body.about-page .breadcrumb a:hover { color: #fff; text-decoration: underline; }

body.about-page .page > .about-hero {
  min-height: clamp(650px, 61vw, 760px);
  padding: clamp(38px, 5vw, 70px) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.about-page .about-hero::before { display: none; }

@media (max-width: 1050px) {
  body.about-page { --about-masthead-end: calc(136px + 60px + 650px); }
}

@media (max-width: 800px) {
  body.about-page::before {
    background:
      linear-gradient(90deg, rgba(7, 53, 109, .76), rgba(14, 76, 140, .35) 80%),
      linear-gradient(0deg, rgba(8, 52, 108, .59), transparent 41%),
      #5fa6d8 url('/assets/about-hero-dusk-flowers.webp') 63% center / cover no-repeat;
  }
  body.about-page .page > .about-hero { min-height: 650px; padding: 36px 0; }
}

@media (max-width: 600px) {
  body.about-page { --about-masthead-end: calc(136px + 52px + 690px); }
  body.about-page::before {
    background:
      linear-gradient(180deg, rgba(8, 58, 117, .75), rgba(10, 70, 135, .55) 49%, rgba(8, 51, 107, .70)),
      #5fa6d8 url('/assets/about-hero-dusk-flowers.webp') 65% center / cover no-repeat;
  }
  body.about-page .breadcrumb { min-height: 52px; }
  body.about-page .page > .about-hero { min-height: 690px; padding: 30px 0; }
  body.about-page .nav { scrollbar-color: rgba(255,255,255,.5) transparent; }
}