/* Original transparent portraits are composed in CSS; faces are never edited. */
.hero.hero-centered {
  position: relative;
  isolation: isolate;
  background: var(--navy);
  padding: 30px 0 56px;
}

.hero-scenery {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 610px;
  pointer-events: none;
}

.hero-scenery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
}

.hero-scenery::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,14,64,.8), rgba(0,14,64,.48) 25%, rgba(0,14,64,.76) 62%, #000e40 96%),
    linear-gradient(90deg, rgba(0,14,64,.76), rgba(0,14,64,.38) 34%, transparent 60%, rgba(0,14,64,.38));
}

.hero-inner { position: relative; }
.hero-brand { position: relative; z-index: 3; }

.hero-mentors {
  position: relative;
  width: min(640px, 100%);
  height: 410px;
  margin: -12px auto -24px;
}

.hero-mentors img {
  position: absolute;
  bottom: 0;
  width: auto;
  max-width: none;
  object-fit: contain;
  mask-image: linear-gradient(#000 70%, transparent 94%);
  -webkit-mask-image: linear-gradient(#000 70%, transparent 94%);
}

.hero-mentors .hero-sandro { height: 385px; left: 48px; transform: scale(1.12); transform-origin: 48% 100%; }
.hero-mentors .hero-flavia { height: 354px; right: 34px; }

.hero-mentors::after {
  display: none;
}

.hero-centered .hero-copy {
  position: relative;
  z-index: 3;
  max-width: 950px;
  padding: 0;
  margin: 0 auto;
  text-align: center;
}

.hero-centered .eyebrow {
  justify-content: center;
  margin: 0 auto 14px;
  font-size: .75rem;
  letter-spacing: .13em;
  color: var(--gold-light);
}

.hero.hero-centered h1 {
  max-width: 890px;
  margin-inline: auto;
  font-size: clamp(3.2rem, 5.1vw, 4.625rem);
  line-height: 1.04;
}

.hero-centered h1 em { display: block; }

.hero-centered .hero-description {
  max-width: 660px;
  margin: 18px auto 0;
  font-size: 1.0625rem;
  color: #c2c8d7;
}

.hero-centered .hero-outcome {
  max-width: 650px;
  margin: 16px auto 0;
  color: #c2c8d7;
}

.hero-centered .button { min-width: 300px; margin-top: 22px; }
.hero-centered .cta-caption { margin-top: 10px; font-size: .875rem; }

@media (min-width: 1600px) {
  .hero.hero-centered { padding-top: 34px; }
  .hero-mentors { height: 440px; }
  .hero-mentors .hero-sandro { height: 410px; }
  .hero-mentors .hero-flavia { height: 377px; right: 16px; }
  .hero-scenery { height: 645px; }
}

@media (max-width: 800px) {
  .hero.hero-centered { padding: 26px 0 45px; }
  .hero-mentors { width: 560px; max-width: 100%; height: 375px; margin-top: 15px; }
  .hero-mentors .hero-sandro { height: 350px; left: 25px; }
  .hero-mentors .hero-flavia { height: 322px; right: 6px; }
  .hero-scenery { height: 530px; }
  .hero.hero-centered h1 { font-size: clamp(2.7rem, 6.4vw, 3.7rem); }
  .hero-centered .eyebrow { letter-spacing: .08em; }
  .hero-centered .hero-description { max-width: 590px; font-size: 1rem; }
  .hero-centered .hero-outcome { max-width: 530px; font-size: .95rem; }
}

@media (max-width: 560px) {
  .hero.hero-centered { padding-top: 24px; }
  .hero-brand { margin-inline: auto; width: 160px; }
  .hero-brand .brand-name { font-size: 21px; }
  .hero-brand .brand-product { font-size: 12px; }
  .hero-scenery { height: 450px; }
  .hero-scenery img { object-position: 62% center; }
  .hero-scenery::after {
    background: linear-gradient(180deg, rgba(0,14,64,.8), rgba(0,14,64,.4) 29%, rgba(0,14,64,.72) 66%, var(--navy) 97%),
      linear-gradient(90deg, rgba(0,14,64,.4), transparent 45%);
  }
  .hero-mentors { width: 370px; height: 300px; margin: 18px auto -4px; }
  .hero-mentors .hero-sandro { height: 280px; left: -18px; }
  .hero-mentors .hero-flavia { height: 257px; right: -10px; }
  .hero-mentors::after { height: 75px; }
  .hero-centered .eyebrow { max-width: 300px; font-size: .75rem; letter-spacing: .07em; line-height: 1.7; margin-bottom: 18px; }
  .hero.hero-centered h1 { font-size: clamp(2.6rem, 10.5vw, 3.25rem); max-width: 440px; line-height: 1.08; }
  .hero-centered h1 em { display: inline; }
  .hero-centered .hero-description { margin-top: 23px; }
  .hero-centered .hero-outcome { margin-top: 13px; }
  .hero-centered .button { min-width: 0; width: min(340px, 100%); }
}

@media (max-width: 360px) {
  .hero-mentors { height: 264px; }
  .hero-mentors .hero-sandro { height: 246px; left: -23px; }
  .hero-mentors .hero-flavia { height: 226px; right: -30px; }
  .hero-scenery { height: 400px; }
  .hero.hero-centered h1 { font-size: 2.6rem; }
  .button { padding-inline: 16px; }
  .button span[aria-hidden="true"] { display: none; }
}

/* Original SVG outlines: white lettering and gold symbol, no background. */
.brand.brand-image {
  display: block;
  width: 262px;
  max-width: 100%;
  padding: 0;
  background: transparent;
  border-radius: 0;
  line-height: 0;
  flex-shrink: 0;
}
.brand-image img {
  width: 100%;
  height: auto;
}
.footer-main .brand-image { width: 238px; }
@media (max-width: 560px) {
  .brand.brand-image { width: 244px; }
  .footer-main .brand-image { width: 222px; }
}

/* Compact composition on shorter desktop displays; original portrait scale stays intact. */
@media (min-width: 900px) and (max-height: 800px) {
  .hero.hero-centered { padding-top: 20px; padding-bottom: 36px; }
  .hero-mentors { margin-bottom: -42px; }
  .hero-mentors img {
    mask-image: linear-gradient(#000 68%, transparent 93%);
    -webkit-mask-image: linear-gradient(#000 68%, transparent 93%);
  }
  .hero.hero-centered h1 { font-size: clamp(3.2rem, 4.6vw, 3.875rem); }
  .hero-centered .eyebrow { margin-bottom: 10px; }
  .hero-centered .hero-description { margin-top: 12px; font-size: 1rem; }
  .hero-centered .button { margin-top: 16px; }
  .hero-centered .hero-outcome { margin-top: 12px; }
}