/* Add the fourth discipline while retaining the established visual language. */
.hero-four-directions h1 { white-space: normal; }
.hero-four-directions h1 em { display: inline-block; }
.hero-four-directions h1 br { display: initial; }
.hero-four-directions h1 em::before { content: none; }
.hero-four-directions .hero-gallery-card:nth-child(1) { animation: hero-four-one 28s cubic-bezier(.45, 0, .2, 1) infinite; }
.hero-four-directions .hero-gallery-card:nth-child(2) { animation: hero-four-two 28s cubic-bezier(.45, 0, .2, 1) infinite; }
.hero-four-directions .hero-gallery-card:nth-child(3) { animation: hero-four-three 28s cubic-bezier(.45, 0, .2, 1) infinite; }
.hero-four-directions .hero-gallery-card:nth-child(4) { animation: hero-four-four 28s cubic-bezier(.45, 0, .2, 1) infinite; }
.hero-four-directions .hero-gallery::before { animation: hero-four-glass-a 28s ease-in-out infinite; }
.hero-four-directions .hero-gallery::after { animation: hero-four-glass-b 28s ease-in-out infinite; }

@keyframes hero-four-one {
  0%, 21% { opacity: 1; transform: scale(1); }
  27%, 96% { opacity: 0; transform: scale(1.045); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes hero-four-two {
  0%, 21% { opacity: 0; transform: scale(1.045); }
  27%, 46% { opacity: 1; transform: scale(1); }
  52%, 100% { opacity: 0; transform: scale(1.045); }
}
@keyframes hero-four-three {
  0%, 46% { opacity: 0; transform: scale(1.045); }
  52%, 71% { opacity: 1; transform: scale(1); }
  77%, 100% { opacity: 0; transform: scale(1.045); }
}
@keyframes hero-four-four {
  0%, 71% { opacity: 0; transform: scale(1.045); }
  77%, 96% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.045); }
}
@keyframes hero-four-glass-a {
  0%, 20%, 29%, 45%, 54%, 70%, 79%, 95%, 100% { opacity: 0; transform: translate3d(-30%, 130%, 0) rotate(-12deg); }
  23%, 48%, 73%, 97% { opacity: .72; transform: translate3d(245%, 45%, 0) rotate(11deg); }
  27%, 52%, 77%, 99% { opacity: 0; transform: translate3d(330%, -5%, 0) rotate(18deg); }
}
@keyframes hero-four-glass-b {
  0%, 20%, 29%, 45%, 54%, 70%, 79%, 95%, 100% { opacity: 0; transform: translate3d(710%, 310%, 0) rotate(14deg); }
  23%, 48%, 73%, 97% { opacity: .6; transform: translate3d(290%, 120%, 0) rotate(-8deg); }
  27%, 52%, 77%, 99% { opacity: 0; transform: translate3d(115%, 16%, 0) rotate(-16deg); }
}

@media (min-width: 1200px) {
  .discipline-list-four { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1280px; gap: 18px; }
  .discipline-list-four .discipline h3 { font-size: clamp(1.5rem, 2vw, 2rem); }
  .discipline-list-four .discipline > a { grid-template-rows: 210px auto 82px 1fr auto; height: 100%; }
  .discipline-list-four .discipline > a > img { height: 210px; }
}
@media (min-width: 961px) and (max-width: 1199px) {
  .discipline-list-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .hero-four-directions h1 { font-size: clamp(2rem, 8.2vw, 3.3rem); letter-spacing: -.065em; line-height: 1.08; }
  .hero-four-directions { min-height: 880px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-four-directions .hero-gallery-card:nth-child(n) { animation: none; opacity: 0; transform: none; }
  .hero-four-directions .hero-gallery-card:first-child { opacity: 1; }
  .hero-four-directions .hero-gallery::before, .hero-four-directions .hero-gallery::after { animation: none; }
}