/**
 * Rising Tide — dark page hero shell (join, acknowledgements, …)
 * Background: site.css :root --rt-hero-distinct-bg / --rt-hero-distinct-image (same stack as FAQ + contact).
 * Eyebrow/hed/sub colors: page-header-about-typography.css with rt-header-about-typography--dark.
 *
 * Optional :root (page inline <style>, after this link):
 *   --dark-hero-pad-x, --dark-hero-pad-bottom, --dark-hero-after-x
 *   --dark-hero-mobile-padding, --dark-hero-mobile-after-x
 * Defaults match join.html.
 */

/* Nav shell + CTA: nav.rt-site-nav in site.css (135° marketing gradient + Get in touch). */

.page-header{
  position:relative;
  padding-top:clamp(6rem,14vw,8.5rem);
  padding-bottom:var(--dark-hero-pad-bottom,4rem);
  padding-left:var(--dark-hero-pad-x,5rem);
  padding-right:var(--dark-hero-pad-x,5rem);
  background-color:var(--rt-hero-distinct-bg,#121a24);
  background-image:var(--rt-hero-distinct-image);
  box-shadow:0 1px 0 rgba(0,0,0,0.2);
  overflow:hidden;
}
.page-header::after{
  content:'';
  position:absolute;
  inset:auto var(--dark-hero-after-x,5rem) 0 var(--dark-hero-after-x,5rem);
  height:1px;
  background:linear-gradient(90deg,rgba(210,137,54,0.25) 0%,rgba(27,155,175,0.32) 55%,transparent 100%);
}

.page-header-eyebrow{
  opacity:0;
  animation:fadeUp 0.7s 0.2s forwards;
  display:block;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:768px){
  .page-header{
    padding:var(--dark-hero-mobile-padding,7.75rem 1.5rem 3rem);
    box-shadow:0 1px 0 rgba(0,0,0,0.2);
  }
  .page-header::after{
    inset:auto var(--dark-hero-mobile-after-x,1.5rem) 0 var(--dark-hero-mobile-after-x,1.5rem);
  }
}