:root {
  --navy: #06192c;
  --navy-soft: #0a223a;
  --cream: #faf7f0;
  --red: #ef3f37;
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --body: Inter, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; background: var(--navy); }
body { color: white; font-family: var(--body); }
a:focus-visible { outline: 3px solid var(--cream); outline-offset: -6px; }
img { display: block; max-width: 100%; }

.portal {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: 100%;
  min-height: 100dvh;
  padding: calc(22px + env(safe-area-inset-top)) clamp(18px, 3vw, 52px) calc(18px + env(safe-area-inset-bottom));
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 14%, rgba(34, 76, 110, .46), transparent 34%),
    var(--navy);
  isolation: isolate;
}

.portal::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  opacity: .09;
  background-image:
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(110deg, black, transparent 72%);
}

.portal__texture {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.18);
  animation: enter-down 650ms cubic-bezier(.22,1,.36,1) both;
}

.portal-header img { width: clamp(180px, 19vw, 285px); }
.schedule-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 17px;
  color: white;
  background: var(--red);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 220ms ease, transform 220ms ease;
}
.schedule-button span { font-size: .9rem; line-height: 1; transition: transform 220ms ease; }
.schedule-button:hover { background: #ff5149; transform: translateY(-2px); }
.schedule-button:hover span { transform: translate(2px, -2px); }
.schedule-button:active { transform: translateY(0); }

.portal-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 22px;
  padding: clamp(24px, 4vh, 46px) 0 clamp(22px, 3.2vh, 38px);
}

.portal-intro > p:first-child {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: rgba(255,255,255,.67);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  animation: enter-up 650ms 80ms cubic-bezier(.22,1,.36,1) both;
}

.portal-intro > p:first-child span { width: 28px; height: 5px; background: var(--red); }
.portal-intro h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.5rem, 9.6vw, 9.5rem);
  font-weight: 900;
  letter-spacing: .012em;
  line-height: .74;
  text-transform: uppercase;
  animation: enter-up 750ms 130ms cubic-bezier(.22,1,.36,1) both;
}
.portal-intro h1 em { color: var(--red); font-style: normal; }
.portal-intro__copy {
  max-width: 250px;
  margin: 0 0 3px;
  color: rgba(255,255,255,.65);
  font-size: .78rem;
  line-height: 1.5;
  animation: enter-up 650ms 210ms cubic-bezier(.22,1,.36,1) both;
}

.experience-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.experience-link {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  color: white;
  border: 1px solid rgba(255,255,255,.22);
  text-decoration: none;
  isolation: isolate;
}
.experience-link + .experience-link { border-left: 0; }
.experience-link > img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.76) contrast(1.04);
  transform: scale(1.025);
  transition: transform 700ms cubic-bezier(.22,1,.36,1), filter 450ms ease;
}
.experience-link__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(6,25,44,.95), rgba(6,25,44,.58) 60%, rgba(6,25,44,.25)); transition: background 350ms ease; }
.experience-link--training .experience-link__shade { background: linear-gradient(90deg, rgba(6,25,44,.92), rgba(6,25,44,.55) 64%, rgba(6,25,44,.29)); }
.experience-link::after { position: absolute; inset: 0; z-index: -1; content: ""; background: var(--red); opacity: 0; transition: opacity 300ms ease; }
.experience-link:hover > img { filter: saturate(1) contrast(1.08); transform: scale(1.07); }
.experience-link:hover::after { opacity: .1; }
.experience-link:active { transform: scale(.995); }
.experience-link__number { position: absolute; top: 17px; right: 19px; color: rgba(255,255,255,.5); font-family: var(--display); font-size: 1.25rem; font-weight: 800; }
.experience-link__content { position: absolute; top: 50%; right: 24px; left: 24px; display: grid; transform: translateY(-52%); }
.experience-link__content small { margin-bottom: 10px; color: rgba(255,255,255,.64); font-size: .58rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.experience-link__content strong { font-family: var(--display); font-size: clamp(2.8rem, 5vw, 5.6rem); font-weight: 900; letter-spacing: .012em; line-height: .79; text-transform: uppercase; }
.experience-link__content > span { max-width: 300px; margin-top: 15px; color: rgba(255,255,255,.72); font-size: .68rem; line-height: 1.45; }
.experience-link > b { position: absolute; right: 20px; bottom: 16px; left: 20px; display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.32); font-size: .68rem; text-transform: uppercase; }
.experience-link > b i { color: var(--red); font-size: 1rem; font-style: normal; transition: transform 250ms ease; }
.experience-link:hover > b i { transform: translate(3px,-3px); }
.experience-link--website { animation: enter-up 750ms 250ms cubic-bezier(.22,1,.36,1) both; }
.experience-link--training { animation: enter-up 750ms 330ms cubic-bezier(.22,1,.36,1) both; }

.portal-footer { display: flex; justify-content: space-between; gap: 22px; padding-top: 15px; color: rgba(255,255,255,.42); font-size: .54rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; animation: enter-up 650ms 400ms cubic-bezier(.22,1,.36,1) both; }

@keyframes enter-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes enter-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 700px) {
  .portal { grid-template-rows: auto auto 1fr auto; padding-right: 16px; padding-left: 16px; overflow: auto; }
  .portal-header { padding-bottom: 14px; }
  .portal-header img { width: min(185px, 48vw); }
  .schedule-button { min-height: 40px; padding: 0 12px; font-size: .55rem; letter-spacing: .08em; white-space: nowrap; }
  .portal-intro { display: block; padding: 24px 0 20px; }
  .portal-intro h1 { margin-top: 20px; font-size: clamp(3.75rem, 18vw, 5.5rem); }
  .portal-intro__copy { max-width: none; margin-top: 15px; }
  .experience-grid { grid-template-columns: 1fr; }
  .experience-link { min-height: clamp(218px, 28dvh, 280px); }
  .experience-link + .experience-link { border-top: 0; border-left: 1px solid rgba(255,255,255,.22); }
  .experience-link__content { right: 18px; left: 18px; }
  .experience-link__content strong { font-size: clamp(2.75rem, 13vw, 4rem); }
  .experience-link__content > span { margin-top: 9px; font-size: .63rem; }
  .experience-link > b { right: 16px; bottom: 13px; left: 16px; padding-top: 10px; }
  .portal-footer { padding-bottom: 4px; line-height: 1.45; }
  .portal-footer span:last-child { text-align: right; }
}

@media (max-height: 740px) and (max-width: 700px) {
  .portal-intro { padding: 18px 0 16px; }
  .portal-intro h1 { margin-top: 14px; font-size: 3.6rem; }
  .portal-intro__copy { display: none; }
  .experience-link { min-height: 205px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}