/* Shared flowing page backgrounds, matching the original DGU website. */
.hero.hero--flow {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: min(820px, 80svh);
  padding: 0;
  overflow: hidden;
  background: var(--bg);
}
.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgb(var(--dgu-color-050511,5 5 17) / 0.94) 0%, rgb(var(--dgu-color-050511,5 5 17) / 0.72) 36%, rgb(var(--dgu-color-050511,5 5 17) / 0.22) 72%, rgb(var(--dgu-color-050511,5 5 17) / 0.05)),
    linear-gradient(to top, rgb(var(--dgu-color-050511,5 5 17)), rgb(var(--dgu-color-050511,5 5 17) / 0.0) 35%);
}
.hero--flow .hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: inherit;
  padding-block: 88px 96px;
}
.hero--flow .hero-copy { max-width: 760px; }
.hero--flow h1 { max-width: 760px; }
.hero--flow .lead { max-width: 620px; color: rgb(var(--dgu-color-e0e7ef,224 231 239)); }
.hero-motion-toggle {
  position: absolute;
  right: 0;
  bottom: 24px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid rgb(var(--dgu-color-465469,70 84 105));
  border-radius: 6px;
  background: rgb(var(--dgu-color-050511,5 5 17) / 0.8);
  color: rgb(var(--dgu-color-e0e7ef,224 231 239));
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.hero-motion-toggle:hover { border-color: var(--cyan); color: #fff; }
.hero-motion-toggle[hidden] { display: none; }
@media(max-width:760px) {
  .hero.hero--flow { min-height: 660px; }
  .hero--flow .hero-content { padding-block: 64px 106px; }
  .hero-backdrop img { object-position: 58% center; }
  .hero-backdrop::after {
    background: linear-gradient(to right, rgb(var(--dgu-color-050511,5 5 17) / 0.87), rgb(var(--dgu-color-050511,5 5 17) / 0.53)),
      linear-gradient(to top, rgb(var(--dgu-color-050511,5 5 17)), rgb(var(--dgu-color-050511,5 5 17) / 0.0) 38%);
  }
}
@media print {
  .hero.hero--flow { min-height: 0; background: #fff; }
  .hero--flow .hero-content { padding-block: 20px; }
  .hero-backdrop, .hero-motion-toggle { display: none; }
  .hero--flow .lead { color: #333; }
}

/* A compact flowing introduction on every tab, with text above the darkened image. */
.page-banner--flow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg);
}
.page-banner-content {
  position: relative;
  z-index: 1;
  min-height: 340px;
  display: flex;
  align-items: center;
  padding-block: 60px 90px;
}
.page-banner--flow .page-intro { padding: 0; max-width: 950px; }
.page-banner--flow .lead { color: rgb(var(--dgu-color-e0e7ef,224 231 239)); max-width: 790px; }
.page-banner--flow .hero-backdrop img { object-position: center 52%; }
.page-banner--flow .hero-backdrop::after {
  background: linear-gradient(90deg, rgb(var(--dgu-color-050511,5 5 17) / 0.949) 0%, rgb(var(--dgu-color-050511,5 5 17) / 0.8392) 38%, rgb(var(--dgu-color-050511,5 5 17) / 0.4588) 70%, rgb(var(--dgu-color-050511,5 5 17) / 0.1412)),
    linear-gradient(0deg, rgb(var(--dgu-color-050511,5 5 17)), rgb(var(--dgu-color-050511,5 5 17) / 0.0) 40%);
}
@media (max-width: 760px) {
  .page-banner-content { min-height: 320px; padding-block: 44px 88px; }
  .page-banner--flow .hero-backdrop img { object-position: 62% center; }
  .page-banner--flow .hero-backdrop::after {
    background: linear-gradient(90deg, rgb(var(--dgu-color-050511,5 5 17) / 0.9216), rgb(var(--dgu-color-050511,5 5 17) / 0.6588)),
      linear-gradient(0deg, rgb(var(--dgu-color-050511,5 5 17)), rgb(var(--dgu-color-050511,5 5 17) / 0.0) 45%);
  }
}
@media print {
  .page-banner--flow { background: #fff; }
  .page-banner-content { min-height: 0; padding-block: 20px; }
  .page-banner--flow .lead { color: #333; }
}

/* Inner-page flow follows the viewport throughout every content section. */
:is(.page-main,.home-main){position:relative;isolation:isolate}
:is(.page-main,.home-main)>.inner-page-backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden}
:is(.page-main,.home-main)>.inner-page-backdrop::after{background:linear-gradient(90deg,rgb(var(--dgu-color-050511,5 5 17) / .9),rgb(var(--dgu-color-050511,5 5 17) / .62) 60%,rgb(var(--dgu-color-050511,5 5 17) / .42))}
:is(.page-main,.home-main)>:is(.page-banner--flow,.hero--flow){background:transparent}
@media print{:is(.page-main,.home-main)>.inner-page-backdrop{display:none}}
