/* Hero composition and the scoped phone refinements requested for the site. */
@media (max-width: 360px) {
  .hero__copy > .eyebrow { font-size: 9px; letter-spacing: .15em; gap: 8px; }
}
.about__heading-line { display: block; white-space: nowrap; }
#courses > .section-heading { display: block; }
#courses .section-heading h2 { white-space: nowrap; }
#courses > .section-heading > p { max-width: none; margin: 14px 0 0; }
@media (max-width: 600px) {
  #courses .section-heading h2 { font-size: clamp(28px, 8vw, 36px); }
  #courses > .section-heading > p { text-align: center; }
  .contact__copy h2 { white-space: nowrap; font-size: clamp(26px, 8vw, 36px); }
  .contact__heading-break { display: none; }
}
@media (max-width: 600px) {
  /* Phone-only alignment and a trailing rule matching the existing eyebrow rule. */
  .hero__copy > .eyebrow,
  #courses .section-heading .eyebrow,
  .about__copy > .eyebrow { justify-content: center; text-align: center; }
  .hero__copy > .eyebrow::after,
  #courses .section-heading .eyebrow::after,
  .about__copy > .eyebrow::after { content: ""; display: block; width: 22px; height: 1px; background: currentColor; flex: 0 0 22px; }
  .hero__copy > .eyebrow > span,
  #courses .section-heading .eyebrow > span,
  .about__copy > .eyebrow > span { flex: 0 0 22px; }
  .hero .hero__copy h1 { text-align: center; font-size: clamp(31.25px, 9vw, 53.75px); }
  .hero__outcome { display: block; white-space: nowrap; }
  .hero__outcome br { display: none; }
  .hero__outcome .hero__accelerate,
  .hero__outcome .hero__heading-result { text-transform: none; }
  .hero__outcome .hero__heading-result { margin-left: .2em; }
  #courses .section-heading h2, .about__copy h2 { text-align: center; }
  /* Reuse the existing Apply control and its established gradient. */
  .nav-shell { gap: 8px; }
  .brand, .site-header.is-scrolled .brand { width: clamp(138px, 42vw, 174px); flex-shrink: 0; }
  .nav-shell .button--nav { display: inline-flex; order: 1; margin-left: auto; padding: 10px 12px; gap: 7px; font-size: 10px; min-height: 44px; }
  .nav-shell .button--nav > span { display: none; }
  #contact, #contact input, #contact textarea, .site-footer { text-align: center; }
  .contact__copy > p { margin-inline: auto; }
  .contact__copy > .eyebrow { justify-content: center; }
  .contact__copy > .eyebrow::after { content: ""; display: block; width: 22px; height: 1px; background: currentColor; }
  .contact__details { width: max-content; max-width: 100%; margin-inline: auto; text-align: left; }
  .contact__details a { display: grid; grid-template-columns: 43px minmax(0, 1fr); width: 100%; text-align: left; }
  .contact__socials { justify-content: center; }
  #contact-form > .button { display: flex; margin-inline: auto; }
  .nav-shell .menu-toggle { order: 2; margin-left: 0; padding: 8px; }
  .nav-shell .site-nav { order: 3; }
  /* Let the tile content determine its height rather than leaving a blank spacer. */
  .course-card, .course-card__inside { min-height: 0; }
  .course-card__description { margin-bottom: 12px; }
  .course-card__footer { margin-top: 12px; }
}
.hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; }
.hero__copy { min-width: 0; }
@media (min-width: 851px) {
  .hero__copy { transform: translateY(-16px); }
}
.hero h1 { font-size: clamp(36px, 4vw, 56px); line-height: 1.14; }
.hero__heading-result { white-space: nowrap; }
.hero h1 .hero__accelerate,
#courses > .section-heading h2 em,
.about__copy h2 .about__gradient {
  display: inline-block;
  color: #01617b;
  background: linear-gradient(to top right, #025a81 0%, #01617b 35%, #11a5bb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 850px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hero__copy { grid-row: 1; }
  .hero-globe { grid-row: 2; }
  .hero h1 { font-size: clamp(30px, 8.5vw, 52px); }
}
.hero-globe {
  position: relative;
  display: grid;
  align-items: center;
  width: min(100%, 490px);
  height: 560px;
  min-width: 0;
  margin: 0;
  justify-self: end;
  transform: translate(4px, -42px);
}
.hero-globe__stage { position: relative; width: 100%; aspect-ratio: 1; isolation: isolate; }
.hero-globe__poster,
.hero-globe__sphere,
.hero-globe__network { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-globe__poster { object-fit: contain; }
.hero-globe__sphere,
.hero-globe__network { visibility: hidden; pointer-events: none; }
.hero-globe.is-ready .hero-globe__poster { visibility: hidden; }
.hero-globe.is-ready .hero-globe__sphere,
.hero-globe.is-ready .hero-globe__network { visibility: visible; }
.hero-globe__toggle {
  position: absolute;
  right: 3%; bottom: 4%;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 1px solid rgba(11, 112, 133, .2);
  border-radius: 50%;
  padding: 0; background: #fff;
  color: #0b7085; font-size: 13px; line-height: 1;
  opacity: .6; cursor: pointer;
}
.hero-globe__toggle[hidden] { display: none; }
.hero-globe__toggle:hover, .hero-globe__toggle:focus-visible { opacity: 1; }
.hero-globe__toggle:focus-visible { outline: 2px solid #0499bc; outline-offset: 3px; }
@media (max-width: 850px) {
  .hero-globe { width: min(100%, 450px); height: auto; aspect-ratio: 1; justify-self: center; transform: none; }
}