/* A centered, sculpted surface: 10% of the viewport is left open on each side. */
body {
  background: #3d7577;
  padding-block: clamp(30px, 4.2vw, 72px) clamp(65px, 7vw, 120px);
}
.site-frame {
  width: 80%;
  margin-inline: auto;
  container: page / inline-size;
}
main { display: grid; gap: clamp(30px, 3.8cqw, 58px); }
main > section, footer {
  border-radius: clamp(24px, 3.4cqw, 50px);
  border: 1px solid #e5e5e570;
  background-clip: padding-box;
  box-shadow:
    0 5px 0 -2px #3d757780,
    -9px 16px 24px #12223540,
    -18px 28px 42px #1222354d;
}
main > section::after, footer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid #e5e5e52b;
  border-top-color: #ffffff73;
  border-left-color: #e5e5e54d;
  box-shadow:
    inset 1px 1px 2px #ffffff38,
    inset -1px -2px 3px #14213d33;
  pointer-events: none;
  z-index: 15;
}
main > .pale::after {
  border-top-color: #ffffff8c;
  box-shadow: inset 1px 1px 2px #ffffff4d, inset -1px -2px 3px #12223529;
}
.edge { bottom: 0; filter: none; }
.journey-nav {
  right: calc(10% + 12px);
  border: 1px solid #e5e5e566;
  background: #3d757742;
  box-shadow: inset 2px 2px 3px #ffffff55,
    inset -2px -3px 4px #14213d55, -3px 6px 12px #14213d33;
}
.journey-nav > a { box-shadow: inset 1px 1px 2px #ffffff80, 0 2px 3px #14213d77; }
.journey-nav > a.active { box-shadow: inset 0 1px 2px #ffffff88, 0 0 0 4px #fba31133, 0 2px 4px #14213d80; }
.header { padding-top: 5px; }
.nav-cta, .menu-toggle {
  background: #3d757754;
  border-color: #e5e5e587;
  border-bottom-color: #3d757799;
  box-shadow: inset 2px 3px 5px #ffffff40,
    inset -2px -4px 5px #14213d4d,
    0 4px 0 #14213d80, -3px 8px 14px #14213d33;
}
.button {
  border: 1px solid #fba311;
  border-bottom-color: #fba311;
  box-shadow: inset 2px 3px 5px #fba31178,
    inset -2px -4px 5px #f69e0959,
    0 6px 0 #f69e09, -4px 11px 17px #14213d66;
  transition: transform .2s, box-shadow .2s;
}
.button:hover {
  transform: translateY(-3px);
  box-shadow: inset 2px 3px 5px #fba3118c,
    inset -2px -4px 5px #f69e0959,
    0 9px 0 #f69e09, -5px 15px 20px #14213d66;
}
.button:active {
  transform: translateY(4px);
  box-shadow: inset 1px 2px 5px #f69e0970, 0 2px 0 #f69e09, -2px 4px 8px #14213d40;
}
.method-glass, .school-glass, .resources-glass, .closing-caption {
  border: 1px solid #e5e5e58c;
  border-bottom-color: #3d757780;
  box-shadow: inset 2px 3px 6px #ffffff4d,
    inset -2px -4px 7px #12223533,
    0 5px 0 -2px #3d757766,
    -8px 15px 22px #14213d33;
  backdrop-filter: blur(18px);
}
.school-glass { background: #3d75775c; }
.resources-glass { background: #122235c9; }
.method-tabs button span {
  background: #e5e5e5;
  border-color: #ffffff;
  box-shadow: inset 1px 1px 2px #ffffffe6, inset -1px -2px 2px #3d757766, 0 3px 3px #3d757733;
}
.method-tabs button[aria-selected=true] span {
  border-color: #fba311;
  color: #540101;
  box-shadow: inset 0 1px 2px #ffffff99, inset 0 -1px 2px #fba31155, 0 3px 0 #fba31166;
}
.method .text-link {
  padding: 11px 16px;
  border: 1px solid #ffffffc7;
  border-radius: 25px;
  background: #e5e5e5db;
  backdrop-filter: blur(12px);
  box-shadow: inset 1px 2px 3px #ffffffd9, inset -1px -3px 4px #bdbebf66,
    0 4px 0 #3d757780, -3px 7px 10px #14213d29;
}
.school-tabs button {
  background: #bdbebf3d;
  border-color: #e5e5e599;
  box-shadow: inset 1px 2px 3px #ffffff33, inset -1px -2px 3px #12223555, 0 3px 0 #12223566, -2px 6px 9px #12223533;
  transition: transform .2s, box-shadow .2s;
}
.school-tabs button:hover { transform: translateY(-2px); }
.school-tabs button[aria-selected=true] {
  background: #e5e5e5;
  box-shadow: inset 1px 2px 3px #ffffffd9, inset -1px -3px 4px #bdbebf80, 0 4px 0 #3d7577, -2px 7px 10px #14213d40;
}
.resource-number {
  width: 23px; height: 23px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 50%;
  background: #3d75776b; border: 1px solid #bdbebf4d;
  box-shadow: inset 1px 1px 2px #e5e5e555, inset -1px -2px 2px #14213d88, 0 3px 4px #14213d55;
}
.resource-list i, .discover span, .news-arrow, .top-link {
  border-radius: 50%;
  border: 1px solid #e5e5e580;
  background: #3d75774d;
  box-shadow: inset 2px 2px 3px #bdbebf66, inset -2px -3px 4px #12223566,
    0 3px 0 #12223580, -3px 7px 10px #14213d33;
}
.resource-list i { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; font-size: 19px; }
.news-arrow { background: #e5e5e5; color: var(--petrol); border-color: #ffffffa6; }
.closing-caption { background: #e5e5e5d9; }
footer {
  position: relative; overflow: hidden;
  margin-top: clamp(30px, 3.8cqw, 58px);
  padding-block: 15px 26px;
}
.footer-top { position: relative; border-top: 0; }
dialog {
  box-shadow: inset 2px 3px 5px #ffffffc7, inset -3px -5px 7px #3d757766,
    0 8px 0 -2px #3d7577, -18px 35px 70px #14213d88;
}

@container page (max-width:1250px) {
  .journey-nav { right: calc(10% + 10px); }
}
@container page (min-width:801px) and (max-width:1050px) {
  .wrap { width: calc(100% - 88px); }
  .logo img { width: 190px; }
  .main-nav { gap: 16px; font-size: 12px; }
  .nav-cta { padding: 10px 15px; gap: 10px; }
  .header { gap: 20px; }
  .hero-copy h1 { font-size: 51px; }
  .hero .intro { max-width: 290px; }
  .hero .button { gap: 16px; padding-inline: 18px; font-size: 13px; }
  .hero .scene-content { padding-top: 110px; }
  .method-tabs button { font-size: 11px; gap: 5px; }
  .resources-glass { padding-inline: 15px; }
  .resources-glass .resource-list button { gap: 9px; }
  .resources-glass .resource-list strong { font-size: 16px; }
  .resources-glass .resource-list small { font-size: 10px; }
  .resources-glass .text-link { font-size: 10px; gap: 6px; }
  .resource-list i { width: 25px; height: 25px; font-size: 17px; }
  .resource-number { width: 20px; height: 20px; font-size: 9px; }
}
@container page (max-width:800px) {
  .journey-nav { display: none; }
  .hero .impact { position: relative; inset: auto; margin-top: 30px; }
  .hero .scene-art { margin-top: -5px; }
  .closing-art { max-width: 520px; }
  .footer-top { gap: 24px; }
}
@container page (max-width:480px) {
  .wrap, .header { width: calc(100% - 44px); }
  .logo img { width: clamp(120px, 47cqw, 200px); }
  .header { min-height: 100px; gap: 12px; }
  .main-nav { top: 92px; padding: 20px; font-size: 16px; gap: 20px; }
  .hero-copy h1 { font-size: clamp(31px, 11.3cqw, 49px); letter-spacing: -1px; }
  .hero .eyebrow { font-size: 7px; letter-spacing: 1px; gap: 8px; }
  .hero .intro, .intro, .method .intro, .school .intro, .resources .intro,
  .news-copy .intro, .closing-layout .intro { font-size: 16px; line-height: 1.45; }
  .hero .button, .closing-layout .button { font-size: 13px; gap: 13px; padding: 14px 17px; }
  h2, .method h2, .school h2, .resources h2, .news-copy h2, .closing-layout h2 {
    font-size: clamp(29px, 10cqw, 42px); letter-spacing: -.8px;
  }
  .method-tabs { column-gap: 6px; }
  .method-tabs button { font-size: 12px; gap: 6px; }
  .school-tabs { gap: 5px; }
  .school-tabs button { font-size: 12px; padding: 8px 10px; }
  .resources-glass { padding-inline: 15px; }
  .resources-glass .resource-list strong { font-size: 18px; }
  .resources-glass .resource-list small { font-size: 12px; }
  .resources-glass .resource-list button { gap: 10px; }
  .resources-glass .text-link { font-size: 12px; }
  .resource-list i { width: 25px; height: 25px; font-size: 17px; }
  .news-objects .rocket { left: 22%; width: 67cqw; height: 62cqw; }
  .news-objects .globe { width: 34cqw; height: 31cqw; left: 0; top: 44cqw; }
  .news-objects .sculpted-ball { left: auto; right: 4%; top: 60cqw; }
  .news-objects { height: 80cqw; }
  .news-list { padding-inline: 17px; }
  .news-list h3 { font-size: 23px; }
  .news-list .eyebrow { line-height: 1.6; }
  .news-arrow { width: 27px; height: 27px; }
  .closing-caption { font-size: 11px; padding: 12px 15px; }
  .closing-layout .eyebrow { font-size: 7px; }
  .contact-email { font-size: 13px; }
  .footer-top .top-link { right: 0; top: 35px; }
}
@container page (max-width:360px) {
  .wrap, .header { width: calc(100% - 36px); }
  .header { min-height: 85px; gap: 8px; }
  .main-nav { top: 80px; padding: 18px; }
  .hero .scene-content { padding-top: 30px; }
  .hero .eyebrow { font-size: 6px; letter-spacing: .7px; }
  .eyebrow { font-size: 8px; letter-spacing: 1px; }
  .hero .intro, .intro, .method .intro, .school .intro, .resources .intro,
  .news-copy .intro, .closing-layout .intro { font-size: 15px; }
  .hero .button, .closing-layout .button { width: 100%; font-size: 12px; padding-inline: 12px; gap: 8px; }
  .hero .button span, .closing-layout .button span { font-size: 19px; }
  .discover { font-size: 10px; gap: 12px; }
  .impact { gap: 15px; }
  .impact p + p { padding-left: 15px; }
  .impact strong { font-size: 25px; }
  .impact span { font-size: 9px; }
  .method-glass, .school-glass { padding: 16px; }
  .method-tabs { grid-template-columns: 1fr; row-gap: 11px; }
  .method-tabs button { font-size: 13px; gap: 10px; }
  .method-panel { min-height: 0; }
  .method-panel h3, .school-glass h3 { font-size: 22px; }
  .method-panel p, .school-glass p { font-size: 14px; }
  .panel-label { font-size: 6px; }
  .school-tabs { flex-wrap: wrap; gap: 10px 7px; }
  .school-tabs button { font-size: 12px; padding-inline: 10px; }
  .school .text-link, .method .text-link { font-size: 12px; gap: 9px; }
  .resource-number { display: none; }
  .resources-glass .resource-list strong { font-size: 19px; }
  .resource-list i { width: 23px; height: 23px; font-size: 16px; }
  .hero .scene-art { height: 300px; }
  .method .scene-art { height: 280px; }
  .school .scene-art { height: 315px; }
  .resources .scene-art { height: 305px; }
  .scene-note, .school .scene-note { font-size: 6px; }
  .news-list h3 { font-size: 21px; }
  .news-list p:not(.eyebrow) { font-size: 14px; }
  .news-list .eyebrow { font-size: 7px; letter-spacing: .5px; }
  .news-list > a.course-link { font-size: 14px; }
  .closing-caption { right: 0; padding: 10px; font-size: 10px; }
  .closing-layout .eyebrow { font-size: 6px; letter-spacing: .8px; }
}
@media(max-width:480px) {
  body { padding-block: 26px 65px; }
  dialog { padding: 35px 23px; border-radius: 24px; }
  dialog h2 { font-size: 32px; }
  dialog > p:not(.eyebrow) { font-size: 16px; }
  dialog .button { font-size: 14px; gap: 15px; padding-inline: 15px; }
  .dialog-phone { font-size: 15px; }
}

/* More breathing room in the opening, measured inside the 80% page frame. */
@container page (min-width:801px) {
  .hero .scene-content.wrap { width: calc(100% - 144px); }
  .hero .header { min-height: 148px; }
  .hero .scene-content { padding-top: 142px; padding-bottom: 76px; }
  .hero .impact { margin-top: 30px; }
  .hero .discover { margin-top: 25px; }
  .hero .scene-note { right: 8%; bottom: 100px; }
}
@container page (min-width:801px) and (max-width:1050px) {
  .hero-copy h1 { font-size: 47px; }
  .hero .intro { font-size: 16px; max-width: 290px; margin-block: 23px 27px; }
  .hero .eyebrow { font-size: 7px; letter-spacing: 1.4px; }
  .hero .logo img { width: 174px; }
  .hero .main-nav { font-size: 11px; gap: 14px; }
  .hero .nav-cta { padding: 10px 12px; gap: 8px; }
  .hero .copy { width: 46%; }
}
@container page (max-width:800px) {
  .hero .wrap, .hero .header { width: calc(100% - 72px); }
  .hero .scene-content { padding-top: 50px; }
  .hero .impact { margin-bottom: 18px; }
}
@container page (max-width:480px) {
  .hero .wrap, .hero .header { width: calc(100% - 56px); }
  .hero .scene-content { padding-top: 38px; }
  .hero .logo img { width: clamp(112px, 44cqw, 190px); }
  .hero-copy h1 { font-size: clamp(29px, 10.7cqw, 47px); }
}