/* Art-directed imagery and an uninterrupted home hero. */
.page-home .site-header { position: fixed; top: 0; right: 0; left: 0; background: transparent; border-bottom-color: transparent; box-shadow: none; backdrop-filter: none; }
.page-home .site-header.is-scrolled, .page-home.nav-open .site-header { background: #fafcf8; border-bottom-color: #dce7df; box-shadow: 0 5px 24px rgba(37,84,65,.06); }
.page-home .hero { min-height: 100vh; min-height: 100svh; padding-top: 124px; padding-bottom: 80px; }
.hero-media picture { display: block; width: 100%; height: 100%; }
/* Fade the photo beneath navigation into the mint hero without a hard header edge. */
.page-home .hero-shade { background: linear-gradient(180deg,rgba(233,243,231,.96) 0,rgba(233,243,231,.9) 82px,rgba(233,243,231,.48) 130px,rgba(233,243,231,0) 210px),linear-gradient(90deg,rgba(233,243,231,.96),rgba(238,246,235,.88) 34%,rgba(238,246,235,.22) 65%,rgba(238,246,235,.04)); }
.page-hero--illustrated .page-hero__inner { display: flex; align-items: center; gap: 50px; }
.page-hero--illustrated .page-hero__inner > div { flex: 1; min-width: 0; }
.page-hero--illustrated h1 { white-space: normal; font-size: 44px; line-height: 1.28; }
.page-photo { display: block; flex: 0 0 40%; width: 40%; margin: 0; overflow: hidden; border-radius: 22px 22px 72px 22px; box-shadow: 0 18px 36px rgba(36,76,58,.1); background: #e4eee4; }
.page-photo picture, .editorial-photo picture { display: block; }
.page-photo img, .course-photo img { display: block; width: 100%; height: auto; }
.page-photo figcaption { padding: 14px 20px; color: #526a5c; font-size: 12px; }
.course-photo { margin: 0 0 38px; overflow: hidden; border-radius: 18px; }
.certificate-cover { display: block; margin: 0 0 24px; text-align: center; }
.certificate-cover picture { display: block; }
.certificate-cover img { display: block; width: 190px; height: auto; margin: 0 auto; filter: drop-shadow(0 14px 13px rgba(28,63,44,.16)); }
.certificate-card .step-no { float: right; }
.program-nav .container { display: flex; }
.program-nav a { flex: 1; min-height: 66px; }
.legacy-layout .page-home .site-header { position: fixed; }
.legacy-layout .page-home .hero { min-height: 100vh; padding-top: 150px; }
.legacy-layout .page-photo { width: 100%; max-width: 600px; margin: 30px 0 0; }
.legacy-layout .page-hero--illustrated .page-hero__inner { display: block; }
.legacy-layout .program-nav .container { display: table; width: 88%; }
.legacy-layout .program-nav a { display: table-cell; text-align: center; }
.no-flex-gap .page-photo { margin-left: 36px; }
.legacy-layout .page-photo { margin-left: 0; }
@media (max-width: 1000px) { .page-hero--illustrated h1 { font-size: 36px; } }
@media (max-width: 860px) {
  .page-home .hero { display: block; min-height: 100vh; min-height: 100svh; padding: 98px 0 70px; }
  .page-home .hero-copy { width: 100%; max-width: 560px; }
  .page-home .hero-media { background-position: center bottom; }
  .page-home .hero-media img { object-fit: contain; object-position: center bottom; }
  .page-home .hero-shade { background: linear-gradient(180deg,#e4efea 0%,#e4efea 32%,rgba(228,239,234,.92) 38%,rgba(228,239,234,0) 55%); }
  .page-home .hero h1 { font-size: 42px; line-height: 1.2; }
  .page-home .eyebrow { margin-bottom: 12px; font-size: 11px; }
  .page-home .hero-lead { margin-top: 14px; max-width: 410px; font-size: 14px; line-height: 1.7; }
  .page-home .hero-actions { margin-top: 18px; }
  .page-home .hero-meta { display: none; }
  .page-home .nav-toggle { background: rgba(245,250,245,.45); }
  .page-hero--illustrated .page-hero__inner { display: block; }
  .page-photo, .no-flex-gap .page-photo { width: 100%; max-width: 600px; margin: 30px 0 0; border-radius: 16px 16px 48px 16px; }
  .page-hero--illustrated h1 { font-size: 32px; }
  .program-nav .container { width: 100%; }
  .program-nav a { min-width: 0; font-size: 13px; gap: 8px; }
  .legacy-layout .page-home .hero { padding: 98px 0 70px; }
  .no-object-fit .page-home .hero-media { background-size: contain; background-repeat: no-repeat; }
}
@media (max-width: 380px) {
  .page-home .hero h1 { font-size: 34px; }
  .page-home .hero-lead { font-size: 13px; }
  .page-home .hero .button { min-height: 44px; font-size: 12px; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .page-home .hero { min-height: 760px; }
}