/* =========================================================
   PAGE BANNERS (inner pages)
   Team-photo hero banners (img/banner/hm-*.jpg).
   Imported at the top of css/style.css.
   ========================================================= */

/* ---------------------------------------------------------
   Hero banner (.hm-hero): a dark plum panel on the left with
   eyebrow, headline, intro, four feature icons and a CTA; the
   page photo fills the right and fades into the panel. On
   tablets and phones the photo sits above the text instead.
   --------------------------------------------------------- */

.hm-hero {
  --hh-ink: #170a13;
  --hh-ink-0: rgba(23, 10, 19, 0);
  --hh-pink: #c73689;
  --hh-pink-soft: #f28cc3;
  --hh-pink-grad: linear-gradient(110deg, #c73689 0%, #e85aa8 50%, #c73689 100%);
  --hh-pearl: #f7f0f4;
  --hh-pearl-80: rgba(247, 240, 244, .8);
  --hh-ease: cubic-bezier(.2, .7, .2, 1);
  /* the site header is absolutely positioned over the top of the page */
  --hh-head: 148px;
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(720px, 96vh, 900px);
  padding: calc(var(--hh-head) + 48px) 0 72px;
  background: var(--hh-ink);
  overflow: hidden;
  isolation: isolate;
}

.hm-hero__media {
  position: absolute;
  top: var(--hh-head);
  right: 0;
  bottom: 0;
  width: 70%;
  z-index: -1;
  overflow: hidden;
  /* fade the photo in from its left edge so it melts into the panel without a seam.
     A page can push the fade further in (--hh-fade-from/-to) and zoom the photo towards
     the right edge (--hh-zoom) to sink busy parts of it into the panel. The mask sits
     here rather than on the img so the zoom moves the photo under a fixed fade. */
  -webkit-mask-image: linear-gradient(90deg, transparent var(--hh-fade-from, 0%), #000 var(--hh-fade-to, 45%));
  mask-image: linear-gradient(90deg, transparent var(--hh-fade-from, 0%), #000 var(--hh-fade-to, 45%));
}

.hm-hero .hm-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 40% center;
  scale: var(--hh-zoom, 1);
  transform-origin: right center;
}

/* --hh-shade/-mid: how dark the photo's left side gets behind the text */
.hm-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(23, 10, 19, var(--hh-shade, .7)) 0%, rgba(23, 10, 19, var(--hh-shade-mid, .3)) 50%, var(--hh-ink-0) 78%),
    linear-gradient(0deg, rgba(23, 10, 19, .55) 0%, var(--hh-ink-0) 35%);
}

.hm-hero__content {
  max-width: 600px;
  color: var(--hh-pearl);
}

.hm-hero__eyebrow {
  position: relative;
  display: inline-block;
  margin-bottom: 22px;
  padding-bottom: 14px;
  font-family: var(--hm-body-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--hh-pearl-80);
}

.hm-hero__eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--hh-pink);
}

.hm-hero .hm-hero__title {
  margin: 0 0 22px;
  font-size: clamp(44px, 5.2vw, 76px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.015em;
  color: #fff;
}

.hm-hero .hm-hero__title em {
  color: var(--hh-pink-soft);
}

.hm-hero .hm-hero__text {
  max-width: 520px;
  margin: 0 0 34px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--hh-pearl-80);
}

.hm-hero__features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 520px;
  margin: 0 0 38px;
  padding: 0;
  list-style: none;
}

.hm-hero__features li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--hm-body-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: #fff;
}

.hm-hero__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1.5px solid rgba(242, 140, 195, .55);
  border-radius: 50%;
  background: rgba(199, 54, 137, .16);
  color: var(--hh-pink-soft);
}

.hm-hero__icon svg {
  width: 26px;
  height: 26px;
}

.hm-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  border-radius: 999px;
  background: var(--hh-pink-grad);
  background-size: 200% 100%;
  box-shadow: 0 12px 30px -10px rgba(199, 54, 137, .7);
  font-family: var(--hm-body-font);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  transition: background-position .5s var(--hh-ease), transform .25s var(--hh-ease), box-shadow .25s var(--hh-ease);
}

/* style.css turns every hovered link #b33f86 with !important */
.hm-hero__cta:hover,
.hm-hero__cta:focus {
  color: #fff !important;
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -10px rgba(199, 54, 137, .85);
}

.hm-hero__cta:focus-visible {
  outline: 2px solid var(--hh-pearl);
  outline-offset: 3px;
}

.hm-hero__cta svg {
  width: 20px;
  height: 20px;
  transition: transform .25s var(--hh-ease);
}

.hm-hero__cta:hover svg {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: no-preference) {
  /* backwards, not both: a held end state would block the CTA's hover lift */
  .hm-hero__content > * {
    animation: hm-hero-rise .8s var(--hh-ease) backwards;
  }

  .hm-hero__content > :nth-child(2) { animation-delay: .08s; }
  .hm-hero__content > :nth-child(3) { animation-delay: .16s; }
  .hm-hero__content > :nth-child(4) { animation-delay: .24s; }
  .hm-hero__content > :nth-child(5) { animation-delay: .32s; }

  .hm-hero .hm-hero__media img {
    animation: hm-hero-settle 1.8s var(--hh-ease) backwards;
  }
}

@keyframes hm-hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes hm-hero-settle {
  from { transform: scale(1.06); }
  to { transform: none; }
}

/* the menu wraps onto a second row here, so the header is taller */
@media (max-width: 1199px) {
  .hm-hero {
    --hh-head: 220px;
  }
}

@media (max-width: 991px) {
  .hm-hero {
    --hh-head: 128px;
    display: block;
    min-height: 0;
    padding: var(--hh-head) 0 56px;
  }

  /* the photo sits above the text here, so it fades out downwards instead, unzoomed */
  .hm-hero__media {
    position: relative;
    top: auto;
    width: 100%;
    height: clamp(240px, 56vw, 440px);
    z-index: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
  }

  .hm-hero .hm-hero__media img {
    scale: 1;
  }

  .hm-hero__media::after {
    background: linear-gradient(180deg, var(--hh-ink-0) 40%, rgba(23, 10, 19, .6) 100%);
  }

  .hm-hero__content {
    position: relative;
    margin-top: -24px;
  }
}

@media (max-width: 575px) {
  /* keeps the longer two-line headlines on two lines down to 360px */
  .hm-hero .hm-hero__title {
    font-size: clamp(34px, 10.4vw, 44px);
  }

  .hm-hero .hm-hero__text {
    font-size: 16px;
  }

  .hm-hero__features {
    gap: 8px;
  }

  .hm-hero__features li {
    font-size: 12px;
  }

  .hm-hero__icon {
    width: 50px;
    height: 50px;
  }

  .hm-hero__icon svg {
    width: 22px;
    height: 22px;
  }

  .hm-hero__cta {
    padding: 14px 24px;
    font-size: 15px;
  }
}

/* ---------------------------------------------------------
   Split hero (.hm-hero--split): the text never covers the
   photo. On wide screens the text has its own column and the
   photo fills the rest from where that column ends; below
   1280px that leaves the photo too narrow, so the whole photo
   sits above the text instead.
   --------------------------------------------------------- */

@media (min-width: 1280px) {
  .hm-hero--split {
    /* left edge of the container's content box, and the text column plus a gap */
    --hh-edge: calc(max(0px, (100% - 1280px) / 2) + 15px);
    --hh-col: 520px;
    min-height: 0;
  }

  .hm-hero--split .hm-hero__content {
    max-width: calc(var(--hh-col) - 40px);
  }

  .hm-hero--split .hm-hero__title {
    font-size: clamp(44px, 4.2vw, 64px);
  }

  .hm-hero--split .hm-hero__media {
    left: calc(var(--hh-edge) + var(--hh-col));
    width: auto;
  }
}

/* laptops: a narrower, shorter text column leaves the photo wide enough to stay whole */
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .hm-hero--split {
    --hh-col: 460px;
  }

  .hm-hero--split .hm-hero__title {
    font-size: clamp(40px, 4vw, 58px);
  }

  .hm-hero--split .hm-hero__text {
    margin-bottom: 26px;
    font-size: 16px;
  }

  .hm-hero--split .hm-hero__features {
    margin-bottom: 28px;
  }

  .hm-hero--split .hm-hero__icon {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 1279.98px) {
  .hm-hero--split {
    display: block;
    min-height: 0;
    padding: var(--hh-head) 0 56px;
  }

  .hm-hero--split .hm-hero__media {
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    z-index: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* the whole photo at its own shape, no fade, text starting below it */
  .hm-hero--split .hm-hero__media img {
    height: auto;
    scale: 1;
  }

  .hm-hero--split .hm-hero__media::after {
    content: none;
  }

  .hm-hero--split .hm-hero__content {
    position: relative;
    margin-top: 36px;
  }
}

/* ---------------------------------------------------------
   Hero as a home page slide (.hm-hero--slide): fills its
   slide instead of setting its own height. The slider's
   wrapper starts 50px down, so the header covers 50px less
   of it, and the slide's last 50px are clipped. On tablets
   and phones the slides are only 500px tall, so the hero
   shrinks to eyebrow, headline and button over the photo.
   Kept last so it overrides the responsive rules above.
   --------------------------------------------------------- */

.hm-hero--slide {
  --hh-head: 99px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: calc(var(--hh-head) + 32px) 0 82px;
}

@media (max-width: 1199px) {
  .hm-hero--slide {
    --hh-head: 170px;
  }
}

/* the slider is only as tall as the window, so tighten up on short laptop screens */
@media (min-width: 992px) and (max-height: 800px) {
  .hm-hero--slide {
    padding: calc(var(--hh-head) + 16px) 0 66px;
  }

  .hm-hero--slide .hm-hero__eyebrow {
    margin-bottom: 14px;
  }

  .hm-hero--slide .hm-hero__title {
    margin-bottom: 14px;
    font-size: clamp(40px, 7.5vh, 64px);
  }

  .hm-hero--slide .hm-hero__text {
    margin-bottom: 20px;
    font-size: 16px;
  }

  .hm-hero--slide .hm-hero__features {
    margin-bottom: 22px;
  }
}

@media (min-width: 992px) and (max-height: 660px) {
  .hm-hero--slide .hm-hero__features {
    display: none;
  }
}

@media (max-width: 991px) {
  .hm-hero--slide {
    --hh-head: 78px;
    display: flex;
    align-items: flex-end;
    padding: var(--hh-head) 0 74px;
  }

  .hm-hero--slide .hm-hero__media {
    position: absolute;
    top: var(--hh-head);
    bottom: 0;
    height: auto;
    z-index: -1;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hm-hero--slide .hm-hero__media::after {
    background: linear-gradient(0deg, rgba(23, 10, 19, .94) 0%, rgba(23, 10, 19, .76) 48%, rgba(23, 10, 19, .25) 78%, var(--hh-ink-0) 92%);
  }

  .hm-hero--slide .hm-hero__content {
    margin-top: 0;
  }

  .hm-hero--slide .hm-hero__text,
  .hm-hero--slide .hm-hero__features {
    display: none;
  }
}

/* ---------------------------------------------------------
   Team photo banner (.hm-team-banner, our-team.html): the
   wide group photo from the careers page, shown whole below
   the header instead of cropped to a tall slide. Phones get
   the careers page's tighter crop via <picture>.
   --------------------------------------------------------- */

.hm-team-banner {
  /* the site header is absolutely positioned over the top of the page */
  padding-top: 148px;
  background: #fff;
}

.hm-team-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* the menu wraps onto a second row here, so the header is taller */
@media (max-width: 1199px) {
  .hm-team-banner {
    padding-top: 220px;
  }
}

@media (max-width: 991px) {
  .hm-team-banner {
    padding-top: 128px;
  }
}