/* Applies only to eligible category archives and explicitly configured page descendants.
   The site homepage has no epch-hero-active body class and remains untouched. */
body.epch-hero-active .entry-hero,
body.epch-hero-active .entry-header.page-title,
body.epch-hero-active .archive-header.page-header,
body.epch-hero-active #inner-wrap .page-header,
body.epch-hero-active header.archive-header { display: none !important; }

.epch-hero,
.epch-hero * { box-sizing: border-box; }
.epch-hero {
  --epch-navy: #103e6c;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
  width: min(100%, 2048px);
  max-width: 2048px;
  margin: 0 auto 28px;
  min-height: clamp(390px, 29vw, 589px);
  border-radius: 0;
  color: var(--epch-navy);
  background: radial-gradient(ellipse at 10% -25%, rgba(255,255,255,.94), transparent 39%), linear-gradient(160deg,#e1f0ff 3%,#edf6ff 75%,#e2f1ff 100%);
}
.epch-hero__curve {
  position: absolute;
  z-index: -1;
  top: -50%; right: -12%;
  width: 60%; height: 200%;
  border-radius: 52% 0 0 53%;
  transform: rotate(13deg);
  background: linear-gradient(160deg, #a8cfe9, #86bee7 70%, #a9d0eb);
  border-left: 6px solid rgba(43,126,191,.17);
}
.epch-hero__content {
  position: relative;
  z-index: 2;
  width: 64%;
  max-width: 1350px;
  padding: clamp(35px,5.2vw,107px);
  padding-top: 35px;
  padding-bottom: 35px;
}
.epch-hero__kicker {
  font-size: clamp(12px, 1.2vw, 22px);
  color: #096dbb;
  font-weight: 800;
  letter-spacing: .09em;
  margin: 0 0 clamp(28px,2.6vw,49px);
  line-height: 1.3;
}
.epch-hero__kicker::after {
  content: "";
  display: block;
  background: #0876cc;
  width: 70px;
  height: 5px;
  border-radius: 1px;
  margin-top: 16px;
}
.epch-hero__title {
  font-family: inherit;
  color: #0a3a68;
  font-weight: 850;
  font-size: clamp(38px, 4vw, 80px);
  letter-spacing: -.037em;
  line-height: 1.09;
  margin: 0 0 clamp(16px, 1.75vw, 31px);
  overflow-wrap: anywhere;
}
.epch-hero__description {
  font-size: clamp(16px, 1.24vw, 25px);
  font-weight: 430;
  color: #4b6275;
  line-height: 1.68;
  max-width: 1120px;
  margin: 0;
}
.epch-hero__visual { position: absolute; z-index: 1; inset: 0 0 0 auto; width: 45%; }
.epch-hero__visual picture { display: block; width: 100%; height: 100%; }
.epch-hero__image { width: 100%; height: 100%; object-fit: contain; object-position: center right; }
/* Generic square or opaque photo is faded into the blue background. */
.epch-hero:not(.epch-hero--wide) .epch-hero__image {
  -webkit-mask-image: radial-gradient(ellipse 72% 75% at 58% 50%, #000 56%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 75% at 58% 50%, #000 56%, transparent 100%);
}
/* Panoramic text-free artwork supplied with the example can span the hero. */
.epch-hero--wide .epch-hero__visual { width: 100%; inset: 0; z-index: 1; pointer-events:none; }
.epch-hero--wide .epch-hero__image { width: 100%; height: 100%; object-fit: fill; }
.epch-hero--wide .epch-hero__curve { display: none; }
.epch-hero__placeholder {
  position: absolute;
  top: 50%; left: 51%;
  transform: translate(-50%,-50%);
  width: clamp(132px, 14vw, 244px);
  aspect-ratio: 1;
  padding: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #2d739e;
  background: linear-gradient(145deg,#ecf6ff,#cbe5f7);
  box-shadow: 0 24px 65px rgba(22,94,151,.12);
}
.epch-hero__placeholder svg { width: 100%; max-width: 142px; height: auto; }
@media (min-width: 2050px) {
  .epch-hero { border-radius: 16px; }
}
@media (max-width: 1000px) and (min-width: 721px) {
  .epch-hero__content { width: 63%; padding: 38px; }
  .epch-hero__title { font-size: clamp(35px, 4.4vw, 52px); }
  .epch-hero__description { font-size: clamp(14px, 1.6vw, 19px); }
  .epch-hero__visual { width: 45%; }
}
@media (max-width: 720px) {
  .epch-hero { flex-direction: column; align-items: stretch; min-height: 0; margin: 0 auto 19px; background: linear-gradient(140deg, #e6f3ff, #f4f9ff 60%, #dbeeff); }
  .epch-hero__curve { display: none; }
  .epch-hero__content { width: 100%; max-width: none; padding: 27px 24px 21px; }
  .epch-hero__kicker { font-size: 12px; margin-bottom: 23px; }
  .epch-hero__kicker::after { width: 51px; height: 4px; margin-top: 12px; }
  .epch-hero__title { font-size: clamp(32px,9vw,45px); margin-bottom: 17px; line-height: 1.08; }
  .epch-hero__description { font-size: 16px; line-height: 1.65; }
  .epch-hero__visual { position: relative; width: 100%; height: auto; min-height: 250px; aspect-ratio: 1.55; overflow: hidden; background: linear-gradient(130deg,#c1ddf3,#93c7e9); }
  .epch-hero__visual picture { width: 100%; height: 100%; position: absolute; inset: 0; }
  .epch-hero__image, .epch-hero--wide .epch-hero__image { height: 100%; object-fit: cover; object-position: center; }
  .epch-hero--wide .epch-hero__visual { position: relative; inset: auto; z-index: 1; width:100%; }
  .epch-hero--wide .epch-hero__image { object-fit: cover; object-position: right center; }
  .epch-hero__placeholder { width: 170px; left: 50%; padding: 24px; }
}

/* Panorama artwork and real HTML text can coexist without a square card. */
.epch-hero--wide .epch-hero__content { width: 62%; }
.epch-hero--wide .epch-hero__description { max-width: 930px; }
.epch-hero--wide .epch-hero__image {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
@media (max-width: 720px) {
  .epch-hero--wide .epch-hero__content { width: 100%; }
}