/* Prototype 04 homepage presentation. Shared P03 styles remain authoritative for internal pages and behavior. */
.p04 {
  --p04-ink: #172c30;
  --p04-green: #064c3d;
  --p04-deep: #07362e;
  --p04-muted: #506065;
  --p04-mint: #e3f3ed;
  --p04-line: #e4e9e6;
  --p04-copy: 0.98rem;
  --p04-support: 0.94rem;
  --p04-small: 0.86rem;
  --p04-label: 0.84rem;
  --p04-action: 0.94rem;
  background: #fff;
  color: var(--p04-ink);
  line-height: 1.55;
}
.p04 .container { max-width: 1320px; width: calc(100% - 104px); }
.p04 p { color: var(--p04-muted); }
.p04 section { padding: 0; }
.p04 h1, .p04 h2, .p04 h3 { color: var(--p04-ink); letter-spacing: -0.045em; }
.p04 .btn { min-height: 51px; border-radius: 100px; padding: 0.8rem 1.45rem; gap: 1.55rem; font-size: var(--p04-action); }
.p04 .btn--primary { color: #fff; background: var(--p04-green); }
.p04 .btn--outline { color: var(--p04-deep); border-color: #83b8a8; background: #fff; }
.p04 .btn--outline-light { color: #fff; border-color: #d5eee6; background: transparent; }
.p04 .text-link { color: var(--p04-green); font-weight: 700; font-size: var(--p04-action); text-decoration-color: currentColor; }
.p04 .section-label { align-items: center; gap: 1rem; margin-bottom: 1.1rem; color: var(--p04-green); font-size: var(--p04-label); font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.p04 .section-label > span { color: var(--p04-green); font-weight: 700; }
.p04 .section-label::after { content: ""; width: 36px; height: 1px; background: #a6c3b8; }

/* Dense institutional navigation. */
.p04 .header--home { background: var(--p04-deep); border: 0; }
.p04 .header__container { min-height: 86px; gap: 2.3rem; }
.p04 .header__logo { display: inline-flex; align-items: center; gap: 0.55rem; color: #fff; }
.p04 .header__logo-text { font-size: 1rem; line-height: 1.2; letter-spacing: -0.04em; }
.p04 .nav { margin-left: clamp(4rem, 10vw, 9rem); margin-right: auto; }
.p04 .nav__list { gap: clamp(1rem, 1.6vw, 1.8rem); }
.p04 .nav__link { font-size: 0.9rem; font-weight: 500; }
.p04 .header__cta { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 45px; padding: 0.58rem 1.25rem; border-radius: 100px; background: #fff; color: var(--p04-deep); text-decoration: none; font-size: 0.9rem; font-weight: 700; white-space: nowrap; }
.p04 .header__cta span { font-size: 1.2rem; line-height: 1; }
.p04 .header--home.is-scrolled { background: var(--p04-deep); }

/* Hero photograph shares a single plane with the editorial text. */
.p04 .hero { position: relative; min-height: 548px; overflow: hidden; background: #fff; color: var(--p04-ink); }
.p04 .hero__container { position: relative; min-height: 548px; display: flex; align-items: center; width: 100%; max-width: none; padding-inline: max(52px, calc((100% - 1320px) / 2)); }
.p04 .hero__media { --hero-right-gutter: max(52px, calc((100% - 1320px) / 2)); position: absolute; inset: 0 var(--hero-right-gutter) 0 min(39%, calc(50% - var(--hero-right-gutter) - 2px)); width: auto; height: 100%; margin: 0; overflow: hidden; border-radius: 0; }
.p04 .hero__image { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 56% 50%; filter: saturate(0.78); }
.p04 .hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(270deg, #fff 0%, rgb(255 255 255 / 64%) 2%, rgb(255 255 255 / 0%) 8%), linear-gradient(90deg, #fff 0%, rgb(255 255 255 / 94%) 7%, rgb(255 255 255 / 54%) 29%, rgb(255 255 255 / 0%) 53%); }
.p04 .hero__content { position: relative; z-index: 2; width: min(570px, 53%); padding: 2.3rem 0 3rem; }
.p04 .hero__eyebrow { color: #416965; font-size: var(--p04-label); font-weight: 700; letter-spacing: 0.12em; margin: 0 0 1.4rem; text-transform: uppercase; }
.p04 .hero__eyebrow span { padding-inline: 0.35rem; }
.p04 .hero h1 { max-width: 12ch; margin-bottom: 1.25rem; color: var(--p04-ink); font-size: clamp(3.2rem, 4.55vw, 4.45rem); font-weight: 700; line-height: 1.09; letter-spacing: -0.065em; }
.p04 .hero__tagline { max-width: 28rem; margin: 0 0 0.8rem; color: var(--p04-green); font-size: 1.2rem; font-weight: 700; line-height: 1.45; }
.p04 .hero__support { max-width: 33rem; margin: 0 0 1.55rem; color: #435055; font-size: var(--p04-copy); line-height: 1.65; }
.p04 .hero .actions { gap: 0.85rem; }
.p04 .hero__note { position: absolute; z-index: 2; right: 1.5rem; bottom: 1.35rem; display: flex; align-items: center; gap: 0.9rem; width: 285px; padding: 0.9rem 1.1rem; border-radius: 16px; background: #fff; color: var(--p04-ink); box-shadow: 0 12px 25px rgb(6 40 32 / 12%); font-size: var(--p04-small); line-height: 1.5; }
.p04 .hero__note strong { font-weight: 700; }
.p04 .hero__note-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--p04-mint); color: var(--p04-green); font-size: 1.35rem; }

/* Benefit strip is part of the Hero composition, without another numbered section. */
.p04 .benefits { position: relative; z-index: 3; background: #fff; box-shadow: 0 7px 22px rgb(16 48 41 / 4%); }
.p04 .benefits__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 132px; align-items: center; }
.p04 .benefit { display: flex; align-items: center; gap: 1rem; min-width: 0; padding: 1rem 1.05rem; border-right: 1px solid #dce3df; }
.p04 .benefit:first-child { padding-left: 0; }
.p04 .benefit:last-child { border: 0; padding-right: 0; }
.p04 .benefit__icon { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: #e2f1ec; color: var(--p04-deep); font-size: 1.9rem; line-height: 1; }
.p04 .benefit strong { display: block; color: var(--p04-ink); font-size: 0.94rem; line-height: 1.4; }
.p04 .benefit p { margin: 0.2rem 0 0; font-size: var(--p04-small); line-height: 1.5; }

/* Profile image, soft geometry, and factual floating panel. */
.p04 .profile { padding: 3.5rem 0 2.35rem; background: #fff; }
.p04 .profile__grid { align-items: center; gap: 2rem; }
.p04 .profile__content { grid-column: 1 / 6; max-width: 440px; }
.p04 .profile__content h2 { max-width: 13ch; margin: 0 0 1.1rem; font: 700 clamp(2.5rem, 3.35vw, 3.5rem)/1.06 Georgia, serif; letter-spacing: -0.05em; }
.p04 .profile__content p { margin: 0 0 0.85rem; font-size: var(--p04-copy); line-height: 1.65; }
.p04 .profile__visual { grid-column: 6 / -1; position: relative; padding: 0 1rem 1.9rem 0; }
.p04 .profile__visual::before, .p04 .profile__visual::after { content: ""; position: absolute; z-index: 0; background: #e6f5ef; border-radius: 20px; }
.p04 .profile__visual::before { width: 36%; height: 56%; right: 0; top: -0.95rem; }
.p04 .profile__visual::after { width: 33%; height: 54%; left: -1.4rem; bottom: 0; opacity: 0.7; }
.p04 .profile__visual .media-frame { position: relative; z-index: 1; border-radius: 15px; }
.p04 .profile__visual img { width: 100%; height: 316px; aspect-ratio: auto; object-fit: cover; object-position: center 46%; }
.p04 .profile__panel { position: absolute; z-index: 2; right: -0.4rem; bottom: 0.1rem; display: flex; align-items: center; gap: 0.8rem; min-width: 274px; padding: 1rem 1.25rem; border-radius: 14px; background: var(--p04-green); color: #fff; box-shadow: 0 12px 25px rgb(4 60 47 / 15%); }
.p04 .profile__panel span { font-size: 1.65rem; line-height: 1; }
.p04 .profile__panel p { margin: 0; color: #fff; font-size: var(--p04-small); line-height: 1.45; }

/* Three compact photographic cards. */
.p04 .pillars { padding: 1.5rem 0 4.2rem; background: #fff; }
.p04 .pillars > .container { padding-top: 0; border: 0; }
.motion-ready .p04 .pillars > .container::before { display: none; }
.p04 .pillars__heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: end; gap: 4rem; margin-bottom: 1.7rem; }
.p04 .pillars__heading h2 { max-width: 690px; margin: 0; font-size: clamp(2.35rem, 3vw, 3.4rem); line-height: 1.07; }
.p04 .pillars__heading > div:last-child { justify-self: end; max-width: 400px; }
.p04 .pillars__heading p:not(.section-label) { margin-bottom: 0.3rem; font-size: var(--p04-support); line-height: 1.55; }
.p04 .pillars__heading .text-link { float: right; }
.p04 .pillars__grid { gap: 1.25rem; }
.p04 .pillar { position: relative; min-width: 0; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgb(20 44 38 / 10%); }
.p04 .pillar .media-frame { height: 206px; border-radius: 16px 16px 0 0; }
.p04 .pillar img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.p04 .pillar__body { position: relative; z-index: 1; min-height: 190px; margin-top: -20px; padding: 1.45rem 1.55rem 1.4rem; border-radius: 15px; background: #fff; }
.p04 .pillar__badge { position: absolute; left: 1.4rem; top: -1.35rem; display: grid; place-items: center; width: 49px; height: 49px; border: 5px solid #fff; border-radius: 50%; background: var(--p04-mint); color: var(--p04-deep); font-size: 1.45rem; }
.p04 .pillar__number { margin: 0 0 0.28rem; padding: 0; color: #64837a; font-size: 0.7rem; }
.p04 .pillar h3 { margin: 0 0 0.45rem; font-size: 1.22rem; line-height: 1.25; }
.p04 .pillar__body > p:last-child { margin: 0; color: var(--p04-muted); font-size: var(--p04-support); line-height: 1.5; }

/* Signature story and authentic evidence. */
.p04 .technology { padding: 4.5rem 0 4.7rem; background: var(--p04-deep); }
.p04 .technology .section-label, .p04 .technology .section-label > span { color: #bfeadd; }
.p04 .technology h2 { margin-bottom: 2.4rem; color: #fff; font-size: clamp(2.8rem, 4.5vw, 4.7rem); }
.p04 .technology__cross { color: #9bdad1; }
.p04 .technology__grid { align-items: center; gap: 3rem; }
.p04 .technology__grid > .media-frame { grid-column: 1 / 8; border-radius: 16px; }
.p04 .technology__grid img { aspect-ratio: 16 / 10; }
.p04 .technology__content { grid-column: 8 / -1; }
.p04 .technology__content p { color: #deebe5; font-size: var(--p04-copy); line-height: 1.65; }
.p04 .technology__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; margin: 1.3rem 0 0; }
.p04 .technology__points li { color: #ecf8f2; font-size: var(--p04-support); }
.p04 .evidence { position: relative; min-height: 317px; padding: 3.4rem 0; background: linear-gradient(90deg, rgb(3 44 37 / 96%), rgb(3 44 37 / 84%)), url('../assets/images/p03/1000213703-1080.webp') center 48% / cover; background-color: #032c25; color: #fff; }
.p04 .evidence__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.8fr) minmax(0, 1fr); align-items: center; gap: 3rem; }
.p04 .evidence .section-label, .p04 .evidence .section-label > span { color: #c1e9dd; }
.p04 .evidence__intro h2 { margin: 0 0 0.7rem; color: #fff; font-size: clamp(2rem, 2.7vw, 3rem); line-height: 1.1; }
.p04 .evidence__intro > p:not(.section-label) { max-width: 22rem; margin: 0 0 1rem; color: #e2eee9; font-size: var(--p04-support); }
.p04 .evidence__metric { grid-column: auto; text-align: center; }
.p04 .evidence__value { margin: 0; color: #fff; font-size: clamp(4.7rem, 7vw, 7rem); font-weight: 700; line-height: 1; }
.p04 .evidence__label { max-width: 16rem; margin: 0.45rem auto 0; color: #fff; font-size: 1.01rem; line-height: 1.45; }
.p04 .evidence__copy { grid-column: auto; margin: 0; padding-left: 2rem; border-left: 1px solid #8db6a8; color: #eaf5ef; font-size: var(--p04-support); line-height: 1.7; }

/* Everyday life keeps the approved mosaic and captions. */
.p04 .life { padding: 4.5rem 0 4.7rem; background: #f8fbf9; }
.p04 .life .section-intro { align-items: end; margin-bottom: 2rem; }
.p04 .life .section-intro > :first-child { grid-column: 1 / 7; }
.p04 .life .section-intro > p { grid-column: 8 / -1; font-size: var(--p04-copy); }
.p04 .life h2 { max-width: 15ch; margin-bottom: 0; font-size: clamp(2.5rem, 3.5vw, 3.6rem); }
.p04 .life__mosaic { row-gap: 1.3rem; }
.p04 .life__mosaic .media-frame { border-radius: 14px; }
.p04 .life__outdoors { margin-top: 2.5rem; }
.p04 .life__group img { aspect-ratio: 16 / 8.7; }
.p04 .life__learning img { aspect-ratio: 4 / 2.8; }
.p04 .life__archive img { aspect-ratio: 3 / 1.9; }
.p04 .life figcaption { padding-top: 0.6rem; color: #41594d; font-size: var(--p04-small); }

/* Clean enrollment close and compact institutional footer. */
.p04 .ppdb { padding: 3.8rem 0 4.2rem; background: #fff; color: var(--p04-ink); }
.p04 .ppdb__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3rem; }
.p04 .ppdb__content { grid-column: 1; }
.p04 .ppdb .section-label, .p04 .ppdb .section-label > span { color: var(--p04-green); }
.p04 .ppdb__kicker { margin: 0 0 0.3rem; color: var(--p04-green); font-size: 0.96rem; font-weight: 700; }
.p04 .ppdb h2 { margin: 0 0 0.7rem; font-size: clamp(2.25rem, 3vw, 3.3rem); }
.p04 .ppdb__content > p:not(.section-label):not(.ppdb__kicker) { max-width: 780px; margin: 0 0 0.4rem; color: var(--p04-muted); font-size: var(--p04-support); line-height: 1.55; }
.p04 .ppdb .actions { grid-column: 2; display: flex; flex-direction: column; align-items: stretch; min-width: 236px; margin: 0; gap: 0.7rem; }
.p04 .footer--home { padding: 3.4rem 0 1.3rem; background: var(--p04-deep); }
.p04 .footer__grid { gap: 2rem; }
.p04 .footer__name { display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; font-weight: 700; line-height: 1.2; }
.p04 .footer p { color: #c4d9d0; }
.p04 .footer__copyright { margin-top: 2rem; }

@media (max-width: 1100px) {
  .p04 .container { width: calc(100% - 72px); }
  .p04 .header__container { gap: 1.2rem; }
  .p04 .nav { margin-left: 1.5rem; }
  .p04 .nav__list { gap: 0.9rem; }
  .p04 .hero__content { width: 57%; }
  .p04 .hero h1 { font-size: clamp(2.8rem, 4.8vw, 3.9rem); }
  .p04 .hero__media { --hero-right-gutter: 0px; left: 42%; }
  .p04 .benefit { gap: 0.7rem; padding-inline: 0.6rem; }
  .p04 .benefit__icon { width: 43px; height: 43px; font-size: 1.45rem; }
  .p04 .profile__content { grid-column: 1 / 4; }
  .p04 .profile__visual { grid-column: 4 / -1; }
  .p04 .profile__content h2 { font-size: 2.6rem; }
  .p04 .pillars { padding-bottom: 3.85rem; }
  .p04 .technology__grid > .media-frame { grid-column: 1 / 4; }
  .p04 .technology__content { grid-column: 4 / -1; }
}
@media (max-width: 1100px) and (min-width: 961px) {
  .p04 .hero__media { left: 24%; }
  .p04 .hero__media::after { background: linear-gradient(270deg, #fff 0%, rgb(255 255 255 / 64%) 2%, rgb(255 255 255 / 0%) 8%), linear-gradient(90deg, #fff 0%, #fff 12%, rgb(255 255 255 / 95%) 30%, rgb(255 255 255 / 70%) 53%, rgb(255 255 255 / 0%) 72%); }
}
@media (max-width: 960px) and (min-width: 761px) {
  .p04 .header__cta { display: none; }
  .p04 .benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 0.8rem; }
  .p04 .benefit:nth-child(2) { border-right: 0; }
  .p04 .profile__visual img { height: 250px; }
  .p04 .pillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p04 .pillar:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p04 .pillar:last-child .media-frame { height: 100%; min-height: 230px; border-radius: 16px 0 0 16px; }
  .p04 .pillar:last-child .pillar__body { display: flex; flex-direction: column; justify-content: center; min-height: 0; margin: 0; }
  .p04 .pillar:last-child .pillar__badge { left: -1.35rem; top: 1rem; }
}
@media (max-width: 760px) {
  .p04 .container { width: calc(100% - 48px); }
  .p04 .header__container { min-height: 70px; }
  .p04 .header__cta { display: none; }
  .p04 .nav { margin: 0; }
  .p04 .hero, .p04 .hero__container { min-height: 0; }
  .p04 .hero__container { display: block; width: calc(100% - 48px); padding: 3rem 0 0; }
  .p04 .hero__content { width: 100%; max-width: 600px; padding: 0 0 1.8rem; }
  .p04 .hero h1 { max-width: 15ch; font-size: clamp(2.65rem, 7.2vw, 4rem); }
  .p04 .hero__media { position: relative; inset: auto; width: calc(100% + 48px); height: 360px; margin-inline: -24px; }
  .p04 .hero__media::after { background: linear-gradient(180deg, #fff 0%, transparent 26%); }
  .p04 .hero__note { right: calc(1rem + 24px); bottom: 1rem; }
  .p04 .benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 1rem; }
  .p04 .benefit:nth-child(2) { border-right: 0; }
  .p04 .benefit { padding: 0.8rem; }
  .p04 .profile { padding: 3.7rem 0 3rem; }
  .p04 .profile__grid { display: block; }
  .p04 .profile__content { max-width: 600px; }
  .p04 .profile__content h2 { max-width: 16ch; }
  .p04 .profile__visual { margin-top: 1.8rem; }
  .p04 .pillars { padding: 0 0 3.8rem; }
  .p04 .pillars__heading { grid-template-columns: 1fr; gap: 0.6rem; }
  .p04 .pillars__heading > div:last-child { justify-self: start; max-width: 650px; }
  .p04 .pillars__heading .text-link { float: none; }
  .p04 .pillars__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .p04 .pillar .media-frame { height: 260px; }
  .p04 .pillar__body { min-height: 0; }
  .p04 .technology { padding: 3.6rem 0; }
  .p04 .technology__grid { display: block; }
  .p04 .technology__content { margin-top: 1.7rem; }
  .p04 .evidence__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .p04 .evidence__copy { grid-column: 1 / -1; padding: 1rem 0 0; border-left: 0; border-top: 1px solid #8db6a8; }
  .p04 .life .section-intro > :first-child, .p04 .life .section-intro > p { grid-column: 1 / -1; }
  .p04 .ppdb__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .p04 .ppdb .actions { grid-column: 1; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .p04 { --p04-copy: 0.94rem; --p04-support: 0.9rem; --p04-small: 0.8rem; --p04-label: 0.76rem; --p04-action: 0.88rem; }
  .p04 .hero__eyebrow { font-size: 0.72rem; letter-spacing: 0.07em; }
  .p04 .hero h1 { font-size: clamp(2.35rem, 10vw, 3.4rem); }
  .p04 .hero__tagline { font-size: 1.07rem; }
  .p04 .hero .actions { align-items: stretch; }
  .p04 .hero .btn { min-height: 48px; }
  .p04 .hero__media { height: 275px; }
  .p04 .hero__note { width: 240px; font-size: 0.76rem; }
  .p04 .benefits__grid { gap: 0; }
  .p04 .benefit { align-items: flex-start; flex-direction: column; border: 0; padding: 0.8rem 0.5rem; }
  .p04 .benefit__icon { width: 40px; height: 40px; }
  .p04 .benefit strong { font-size: 0.82rem; }
  .p04 .benefit p { font-size: 0.77rem; }
  .p04 .profile__content h2 { font-size: 2.35rem; }
  .p04 .profile__visual img { height: 250px; }
  .p04 .profile__panel { min-width: 230px; }
  .p04 .pillars__heading h2, .p04 .life h2 { font-size: 2.35rem; }
  .p04 .pillar .media-frame { height: 210px; }
  .p04 .technology h2 { font-size: 2.5rem; }
  .p04 .technology__points { grid-template-columns: 1fr; }
  .p04 .evidence__grid { grid-template-columns: 1fr; }
  .p04 .evidence__metric { text-align: left; }
  .p04 .evidence__label { margin-inline: 0; }
  .p04 .life { padding-block: 3.5rem; }
  .p04 .life__mosaic .life__archive { display: block; }
  .p04 .life__mosaic .life__outdoors { grid-column: 1 / -1; }
  .p04 .life__mosaic > figure { margin: 0; }
  .p04 .ppdb { padding-block: 3.4rem; }
  .p04 .ppdb h2 { font-size: 2.1rem; }
  .p04 .ppdb .actions { flex-direction: column; align-items: stretch; }
}
@media (max-width: 350px) {
  .p04 .container { width: calc(100% - 36px); }
  .p04 .hero__media { width: calc(100% + 36px); margin-inline: -18px; }
  .p04 .hero__note { right: calc(1rem + 18px); }
  .p04 .hero h1 { font-size: 2.16rem; }
  .p04 .benefit { padding-inline: 0.25rem; }
  .p04 .benefit strong { font-size: 0.78rem; }
  .p04 .profile__panel { right: -0.1rem; }
}

/* Expressive Motion v0.2. Static P04 above remains the default. */
.p04 {
  --p04-arrival: cubic-bezier(.16, 1, .3, 1);
  --p04-glide: cubic-bezier(.22, .61, .36, 1);
  --p04-response: cubic-bezier(.2, 0, 0, 1);
}
.p04 .header { transition: background-color 280ms var(--p04-response), border-color 280ms var(--p04-response); }
.p04 .nav__link::after { transition-duration: 220ms; transition-timing-function: var(--p04-response); }
.p04 .header__cta { transition: background-color 220ms var(--p04-response), color 220ms var(--p04-response); }
.p04 .header__cta span { display: inline-block; transition: transform 220ms var(--p04-response); }
.p04 .header__cta:focus-visible span { transform: translateX(5px); }
.p04 .btn, .p04 .text-link { transition-duration: 220ms; transition-timing-function: var(--p04-response); }
.p04 .btn span[aria-hidden], .p04 .text-link span[aria-hidden] { transition-duration: 220ms; transition-timing-function: var(--p04-response); }
.p04 .btn:focus-visible span[aria-hidden], .p04 .text-link:focus-visible span[aria-hidden] { transform: translateX(5px); }
@media (hover: hover) and (pointer: fine) {
  .p04 .header__cta:hover { background: #e3f3ed; }
  .p04 .header__cta:hover span, .p04 .btn:hover span[aria-hidden], .p04 .text-link:hover span[aria-hidden] { transform: translateX(5px); }
  .p04 .media-frame:hover:not(.is-pending):not(.is-entering) img { transition-duration: 340ms; transition-timing-function: var(--p04-response); }
  .p04 .media-frame.is-revealing:hover img { transform: none; }
}

/* The observer alone applies is-pending; all final coordinates are the original P04 coordinates. */
.motion-ready .p04 [data-motion] {
  transition: opacity var(--p04-duration, 760ms) var(--p04-ease, var(--p04-arrival)) var(--p04-delay, 0ms),
              transform var(--p04-duration, 760ms) var(--p04-ease, var(--p04-arrival)) var(--p04-delay, 0ms);
}
.motion-ready .p04 .is-pending[data-motion] {
  opacity: var(--p04-pending-opacity, 0);
  transform: translate3d(var(--p04-x, 0px), var(--p04-y, 0px), 0);
  transition: none;
}
.motion-ready .p04 .media-frame[data-motion] {
  clip-path: inset(0);
  transition: opacity var(--p04-duration, 950ms) var(--p04-glide) var(--p04-delay, 0ms),
              transform var(--p04-duration, 950ms) var(--p04-glide) var(--p04-delay, 0ms),
              clip-path var(--p04-duration, 950ms) var(--p04-glide) var(--p04-delay, 0ms);
}
.motion-ready .p04 .media-frame.is-pending[data-motion] {
  opacity: 1;
  transform: none;
  clip-path: var(--p04-start-clip, inset(0));
  transition: none;
}
.p04 .media-frame[data-motion] img { transition: transform 340ms var(--p04-response); }
.motion-ready .p04 .media-frame.is-revealing[data-motion] img {
  transition: transform var(--p04-duration, 950ms) var(--p04-glide) var(--p04-delay, 0ms);
}
.motion-ready .p04 .media-frame.is-pending[data-motion] img {
  transform: translate3d(var(--p04-x, 0px), var(--p04-y, 0px), 0) scale(var(--p04-photo-scale, 1.025));
  transition: none;
}
.motion-ready .p04 .media-frame.reveal-immediate[data-motion],
.motion-ready .p04 .media-frame.reveal-immediate[data-motion] img { transition: none; }

/* Hero layers have a finite CSS entrance only on an early top-of-page load. */
@keyframes p04-hero-arrive {
  from { opacity: 0; transform: translate3d(var(--p04-x, 0px), var(--p04-y, 0px), 0); clip-path: var(--p04-start-clip, inset(0)); }
  to { opacity: 1; transform: none; clip-path: inset(0); }
}
@keyframes p04-hero-photo {
  from { opacity: 1; clip-path: var(--p04-start-clip, inset(0 0 0 100%)); }
  to { opacity: 1; clip-path: inset(0); }
}
@keyframes p04-photo-settle { from { transform: translate3d(var(--p04-x, 60px), var(--p04-y, 0px), 0) scale(1.035); } to { transform: none; } }
.motion-ready .p04 .is-entering[data-hero] {
  animation: p04-hero-arrive var(--p04-duration) var(--p04-ease, var(--p04-arrival)) var(--p04-hero-delay, 0ms) backwards;
}
.motion-ready .p04 .hero__media.is-entering {
  animation-name: p04-hero-photo;
  clip-path: inset(0);
}
.motion-ready .p04 .hero__media.is-entering img {
  animation: p04-photo-settle var(--p04-duration) var(--p04-glide) var(--p04-hero-delay) backwards;
}
[data-motion="hero-eyebrow"] { --p04-x: -32px; --p04-duration: 650ms; --p04-hero-delay: 0ms; }
[data-motion="hero-title"] { --p04-y: 56px; --p04-duration: 950ms; --p04-hero-delay: 80ms; }
[data-motion="hero-tagline"] { --p04-y: 38px; --p04-duration: 760ms; --p04-hero-delay: 250ms; }
[data-motion="hero-copy"] { --p04-y: 38px; --p04-duration: 760ms; --p04-hero-delay: 300ms; }
[data-motion="hero-actions"] { --p04-y: 38px; --p04-duration: 740ms; --p04-hero-delay: 400ms; }
[data-motion="hero-photo"] { --p04-x: 60px; --p04-duration: 1100ms; --p04-hero-delay: 180ms; --p04-start-clip: inset(0 0 0 70%); }
[data-motion="hero-note"] { --p04-y: 24px; --p04-duration: 620ms; --p04-hero-delay: 760ms; }

/* Profile and pillars share the grid but use opposing photo/text directions. */
[data-motion="profile-label"] { --p04-x: -28px; --p04-duration: 680ms; }
[data-motion="profile-copy"] { --p04-x: -48px; --p04-duration: 850ms; --p04-delay: 65ms; }
[data-motion="profile-photo"] { --p04-x: 52px; --p04-duration: 1000ms; --p04-delay: 120ms; --p04-start-clip: inset(0 0 0 100%); }
[data-motion="profile-panel"] { --p04-y: 26px; --p04-duration: 650ms; --p04-delay: 390ms; }
[data-motion="pillars-heading"] { --p04-x: -40px; --p04-duration: 800ms; }
.p04 .pillar:nth-child(2) { --p04-card-delay: 120ms; }
.p04 .pillar:nth-child(3) { --p04-card-delay: 240ms; }
[data-motion="pillar-photo"] { --p04-y: 54px; --p04-duration: 950ms; --p04-delay: var(--p04-card-delay, 0ms); --p04-start-clip: inset(100% 0 0); }
[data-motion="pillar-number"] { --p04-y: 30px; --p04-duration: 700ms; --p04-delay: calc(var(--p04-card-delay, 0ms) + 170ms); }
[data-motion="pillar-title"] { --p04-y: 30px; --p04-duration: 700ms; --p04-delay: calc(var(--p04-card-delay, 0ms) + 210ms); }
[data-motion="pillar-copy"] { --p04-y: 30px; --p04-duration: 700ms; --p04-delay: calc(var(--p04-card-delay, 0ms) + 280ms); }

/* Signature dark section, literal Tahfizh evidence, and independent life photographs. */
[data-motion="technology-label"] { --p04-y: 26px; --p04-duration: 700ms; }
[data-motion="technology-title"] { --p04-y: 44px; --p04-duration: 920ms; --p04-delay: 80ms; }
[data-motion="technology-photo"] { --p04-x: -72px; --p04-duration: 1150ms; --p04-delay: 180ms; --p04-start-clip: inset(0 100% 0 0); }
[data-motion="technology-copy"] { --p04-x: 48px; --p04-duration: 850ms; --p04-delay: 180ms; }
.p04 .technology__content > p:nth-child(2) { --p04-delay: 260ms; }
[data-motion="technology-rule"] { --p04-duration: 700ms; --p04-delay: 310ms; --p04-pending-opacity: 1; }
[data-motion="technology-row"] { --p04-x: -30px; --p04-duration: 620ms; --p04-delay: calc(390ms + var(--p04-row-delay, 0ms)); }
.p04 .technology__points li:nth-child(2) { --p04-row-delay: 75ms; }
.p04 .technology__points li:nth-child(3) { --p04-row-delay: 150ms; }
.p04 .technology__points li:nth-child(4) { --p04-row-delay: 225ms; }
[data-motion="evidence-label"] { --p04-x: -24px; --p04-duration: 620ms; }
[data-motion="evidence-title"] { --p04-x: -34px; --p04-duration: 700ms; --p04-delay: 50ms; }
[data-motion="evidence-intro"] { --p04-x: -34px; --p04-duration: 700ms; --p04-delay: 100ms; }
[data-motion="evidence-action"] { --p04-y: 22px; --p04-duration: 620ms; --p04-delay: 160ms; }
[data-motion="evidence-value"] { --p04-y: 64px; --p04-duration: 1000ms; --p04-delay: 160ms; }
[data-motion="evidence-metric-label"] { --p04-y: 28px; --p04-duration: 700ms; --p04-delay: 250ms; }
[data-motion="evidence-copy"] { --p04-x: 38px; --p04-duration: 800ms; --p04-delay: 250ms; }
.motion-ready .p04 [data-motion="evidence-value"] { clip-path: inset(0); transition: opacity var(--p04-duration) var(--p04-arrival) var(--p04-delay), transform var(--p04-duration) var(--p04-arrival) var(--p04-delay), clip-path var(--p04-duration) var(--p04-arrival) var(--p04-delay); }
.motion-ready .p04 .is-pending[data-motion="evidence-value"] { clip-path: inset(96% 0 0); transition: none; }
[data-motion="life-intro"] { --p04-x: -40px; --p04-duration: 800ms; }
[data-motion="life-caption"] { --p04-y: 18px; --p04-duration: 520ms; --p04-delay: 180ms; }
.p04 .life__group [data-motion="life-photo"] { --p04-x: -64px; --p04-duration: 1000ms; --p04-start-clip: inset(0 100% 0 0); }
.p04 .life__outdoors [data-motion="life-photo"] { --p04-x: 48px; --p04-duration: 900ms; --p04-delay: 100ms; --p04-start-clip: inset(0 0 0 100%); }
.p04 .life__learning [data-motion="life-photo"] { --p04-y: 50px; --p04-duration: 850ms; --p04-start-clip: inset(100% 0 0); }
.p04 .life__archive [data-motion="life-photo"] { --p04-x: -48px; --p04-duration: 850ms; --p04-start-clip: inset(0 100% 0 0); }

/* The closing action and institutional footer settle without moving their boxes. */
[data-motion="ppdb-kicker"] { --p04-x: -30px; --p04-duration: 680ms; }
.p04 .ppdb__kicker[data-motion] { --p04-delay: 55ms; }
[data-motion="ppdb-title"] { --p04-x: -48px; --p04-duration: 850ms; --p04-delay: 90ms; }
[data-motion="ppdb-copy"] { --p04-y: 30px; --p04-duration: 700ms; --p04-delay: 180ms; }
.p04 .ppdb__content > p:nth-last-child(1) { --p04-delay: 240ms; }
[data-motion="ppdb-actions"] { --p04-x: 34px; --p04-duration: 750ms; --p04-delay: 240ms; }
[data-motion="footer-identity"] { --p04-y: 28px; --p04-duration: 650ms; }
[data-motion="footer-column"] { --p04-y: 20px; --p04-duration: 600ms; --p04-delay: 60ms; }
.p04 .footer__contact[data-motion] { --p04-delay: 120ms; }
[data-motion="footer-rule"] { --p04-duration: 650ms; --p04-delay: 140ms; --p04-pending-opacity: 1; }

/* Animate existing rules without fading their associated content. */
.motion-ready .p04 .technology__points[data-motion]::before,
.motion-ready .p04 .footer__copyright[data-motion]::before { transition-duration: var(--p04-duration); transition-timing-function: var(--p04-arrival); transition-delay: var(--p04-delay); }

.p04 .photo-lightbox { --motion-instant: 140ms; transition: opacity 140ms var(--p04-response); }
.p04 .photo-lightbox::backdrop { transition: opacity 140ms var(--p04-response); }
.p04 .photo-lightbox.is-open, .p04 .photo-lightbox.is-open::backdrop { transition-duration: 240ms; transition-timing-function: var(--p04-response); }
.p04 .photo-lightbox__image { transform: translateY(20px) scale(.98); transition: transform 360ms var(--p04-glide); }
.p04 .photo-lightbox.is-open .photo-lightbox__image { transform: none; }

@media (max-width: 760px) {
  .p04 .nav__list.active { animation-duration: 240ms; animation-timing-function: var(--p04-response); }
  .p04 .nav__list.active > li { animation-name: p04-menu-item; animation-duration: 200ms; animation-timing-function: var(--p04-response); animation-delay: calc(var(--menu-step, 0) * 25ms); }
  .p04 .nav__list.is-closing { animation-duration: 120ms; }
  @keyframes p04-menu-item { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .p04 .pillar:nth-child(n) { --p04-card-delay: 0ms; }
  [data-motion="hero-eyebrow"] { --p04-x: -16px; --p04-duration: 560ms; }
  [data-motion="hero-title"] { --p04-y: 34px; --p04-duration: 760ms; }
  [data-motion="hero-tagline"], [data-motion="hero-copy"], [data-motion="hero-actions"] { --p04-y: 24px; --p04-duration: 680ms; }
  [data-motion="hero-tagline"] { --p04-hero-delay: 140ms; }
  [data-motion="hero-copy"] { --p04-hero-delay: 190ms; }
  [data-motion="hero-actions"] { --p04-hero-delay: 260ms; }
  [data-motion="hero-photo"] { --p04-x: 0px; --p04-y: 40px; --p04-duration: 850ms; --p04-hero-delay: 550ms; --p04-start-clip: inset(70% 0 0); }
  [data-motion="hero-note"] { --p04-y: 16px; --p04-duration: 500ms; --p04-hero-delay: 900ms; }
  [data-motion="profile-label"], [data-motion="profile-copy"] { --p04-x: 0px; --p04-y: 30px; --p04-duration: 760ms; }
  [data-motion="profile-photo"] { --p04-x: 0px; --p04-y: 36px; --p04-duration: 820ms; --p04-start-clip: inset(100% 0 0); }
  [data-motion="profile-panel"] { --p04-y: 24px; --p04-duration: 600ms; }
  [data-motion="pillars-heading"] { --p04-x: 0px; --p04-y: 30px; --p04-duration: 720ms; }
  [data-motion="pillar-photo"] { --p04-y: 36px; --p04-duration: 760ms; }
  [data-motion="pillar-number"], [data-motion="pillar-title"], [data-motion="pillar-copy"] { --p04-y: 22px; --p04-duration: 600ms; }
  [data-motion="technology-label"], [data-motion="technology-title"] { --p04-y: 32px; --p04-duration: 800ms; }
  [data-motion="technology-photo"] { --p04-x: 0px; --p04-y: 40px; --p04-duration: 900ms; --p04-start-clip: inset(100% 0 0); }
  [data-motion="technology-copy"], [data-motion="technology-row"] { --p04-x: 0px; --p04-y: 28px; --p04-duration: 720ms; }
  [data-motion="technology-row"] { --p04-delay: calc(180ms + var(--p04-row-delay, 0ms)); }
  .p04 .technology__points li:nth-child(2) { --p04-row-delay: 55ms; }
  .p04 .technology__points li:nth-child(3) { --p04-row-delay: 110ms; }
  .p04 .technology__points li:nth-child(4) { --p04-row-delay: 165ms; }
  [data-motion="evidence-label"], [data-motion="evidence-title"], [data-motion="evidence-intro"], [data-motion="evidence-action"] { --p04-x: 0px; --p04-y: 24px; --p04-duration: 700ms; }
  [data-motion="evidence-value"] { --p04-y: 36px; --p04-duration: 820ms; }
  [data-motion="evidence-metric-label"], [data-motion="evidence-copy"] { --p04-x: 0px; --p04-y: 24px; --p04-duration: 700ms; }
  [data-motion="life-intro"] { --p04-x: 0px; --p04-y: 30px; --p04-duration: 760ms; }
  .p04 .life__mosaic [data-motion="life-photo"] { --p04-x: 0px; --p04-y: 36px; --p04-duration: 820ms; --p04-delay: 0ms; --p04-start-clip: inset(100% 0 0); }
  [data-motion="ppdb-kicker"], [data-motion="ppdb-title"], [data-motion="ppdb-copy"], [data-motion="ppdb-actions"] { --p04-x: 0px; --p04-y: 28px; --p04-duration: 720ms; }
  [data-motion="footer-identity"], [data-motion="footer-column"] { --p04-y: 16px; --p04-duration: 560ms; }
  .p04 .photo-lightbox__image { transform: translateY(10px) scale(.99); transition-duration: 280ms; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  [data-motion="profile-copy"], [data-motion="pillars-heading"], [data-motion="life-intro"],
  [data-motion="ppdb-title"] { --p04-x: -30px; }
  [data-motion="technology-copy"], [data-motion="evidence-copy"],
  [data-motion="ppdb-actions"] { --p04-x: 30px; }
}
@media (min-width: 761px) and (max-width: 960px) {
  [data-motion="ppdb-actions"] { --p04-x: 0px; --p04-y: 28px; }
}
@media (max-width: 600px) {
  [data-motion="hero-photo"] { --p04-y: 32px; }
  .p04 .life__mosaic [data-motion="life-photo"] { --p04-y: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .p04 [data-motion], .p04 .media-frame[data-motion], .p04 .media-frame[data-motion] img { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; transition: none !important; }
  .p04 .technology__points[data-motion]::before, .p04 .footer__copyright[data-motion]::before { transform: none !important; transition: none !important; }
  .p04 .nav__list.active > li, .p04 .header__cta span, .p04 .btn span[aria-hidden], .p04 .text-link span[aria-hidden] { transform: none !important; animation: none !important; transition: none !important; }
}
@media print {
  .p04 [data-motion], .p04 .media-frame[data-motion] { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }
}