.page-hero {
  position: relative;
  min-height: 640px;
}

/* Employee Engagement hero: default centre crop cut off the faces along the
   top of the frame, so shift the crop window up. */
#block-freeportinmycommunity-proudlycreatingbetterfutures .page-hero__media img {
  object-position: center 20%;
}

.page-hero__media {
  position: absolute;
  inset: 0;
}

.page-hero__media--mobile {
  display: none;
}

.page-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero__card {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  left: 3%;
  width: 760px;
  max-width: calc(100% - 48px);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 20px;
  padding: 56px 52px;
  color: #1a1a1a;
}
.page-hero__heading {
  font-family: 'Crimson Text', serif;
  font-weight: 400;
  font-size: 90px;
  line-height: 1.1;
  margin: 0 0 18px;
}

.page-hero__body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.page-hero__body+.page-hero__button {
  margin-top: 24px;
}

.page-hero__button a {
  display: inline-block;
  background: #ffffff;
  color: #005E81;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #005E81;
  border-radius: 24px;
  padding: 11px 26px;
  transition: background 0.2s ease, color 0.2s ease;
}

.page-hero__button a:hover {
  background: #005E81;
  color: #ffffff;
}

.page-hero__shape {
  position: absolute;
  z-index: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.20);
  pointer-events: none;
}

.page-hero__shape--1 {
  width: 75px;
  height: 75px;
  right: 250px;
  bottom: 60px;
}

.page-hero__shape--2 {
  width: 180px;
  height: 110px;
  right: 70px;
  bottom: -50px;
  background: rgba(2, 175, 239, 0.20);
}

/* Wide card variant (Funding hero) — wider card = copy fits fewer lines = shorter card */
.page-hero__card--wide {
  width: 960px;
}

/* ---- Centered variant (Resources) ------------------------------------
   Image fills the band, heading sits centred over it, no card chrome.
   The base .page-hero__card is absolutely positioned with top/left/transform,
   so all three must be explicitly unwound — an over-constrained box silently
   keeps the base values and ignores the ones you meant to win.            */
.page-hero--centered {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-hero--centered .page-hero__card {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  width: auto;
  max-width: 100%;
  padding: 0 24px;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  text-align: center;
  color: #2E2E2E;
}

.page-hero--centered .page-hero__heading {
  margin: 0;
  color: #2E2E2E;
}

.page-hero--centered .page-hero__media img {
  opacity: 0.1;
}

@media (max-width: 1024px) {

  /* Card sits in flow so the section grows to fit long copy.
     Absolute positioning couldn't push the hero taller, so overflowing
     text spilled out of both ends (Grievance). Media stays absolute. */
  .page-hero {
    min-height: 420px;
    display: flex;
    align-items: center;
    padding: 48px 0;
  }

    .page-hero--has-mobile-image .page-hero__media--desktop {
      display: none;
    }

    .page-hero--has-mobile-image .page-hero__media--mobile {
      display: block;
    }

  .page-hero__card {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: auto;
    max-width: none;
    margin: 0 16px;
    padding: 32px 24px;
  }

  .page-hero__heading {
    font-size: 55px;
  }

  /* Centered variant (Resources): no card chrome, so no side margin —
     its own padding does the insetting. */
  .page-hero--centered {
    min-height: 300px;
    padding: 32px 0;
  }

  .page-hero--centered .page-hero__card {
    margin: 0;
    padding: 0 16px;
  }

  .page-hero__shape--1 {
    width: 44px;
    height: 44px;
    right: 130px;
    bottom: 30px;
  }

  .page-hero__shape--2 {
    width: 100px;
    height: 64px;
    right: 36px;
    bottom: -20px;
  }

  .page-hero__shape--1.page-hero__shape--pos-raised {
    bottom: 90px;
  }

  .page-hero__shape--2.page-hero__shape--pos-raised {
    bottom: 40px;
  }

  #block-freeportinmycommunity-universitypartnerships-2 .page-hero__shape--1.page-hero__shape--pos-raised {
  bottom: 50px;
}

#block-freeportinmycommunity-universitypartnerships-2 .page-hero__shape--2.page-hero__shape--pos-raised {
  bottom: 0px;
}
}