/* Navy capsule menu and the home banner. */
:root { --r-btn: 999px; }

/* Shared hero parts */
.hx-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sky-text); }
.hx-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15.5px; font-weight: 500; color: var(--ink-2); }
.hx-facts li { display: flex; align-items: center; gap: 9px; }
.hx-facts .ico { width: 19px; height: 19px; color: var(--blue); }
.hx-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.btnx { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 56px; padding-inline: 28px; overflow: hidden; font-size: 15.5px; font-weight: 600; white-space: nowrap; color: #fff; background: var(--blue); border-radius: 999px; transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .3s; }
.btnx::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: translate3d(-130%, 0, 0); transition: transform .9s var(--ease); }
.btnx:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(31, 81, 145, .3); }
.btnx:hover::before { transform: translate3d(340%, 0, 0); }
.btnx .ico { transition: transform .4s var(--ease); }
.btnx:hover .ico { transform: translateX(4px); }
.btnx--ghost { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--mist); }
.btnx--ghost:hover { color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }

/* Slides */
.slides { position: absolute; inset: 0; display: block; }
.slide { position: absolute; inset: 0; display: block; margin: 0; overflow: hidden; opacity: 0; transition: opacity 1.7s ease; }
.slide > img { width: 100%; height: 100%; object-fit: cover; }
.slide.is-active { opacity: 1; z-index: 2; }
.slide.is-prev { z-index: 1; }
.slide.is-active > img, .slide.is-prev > img { animation: kenburns 9.5s cubic-bezier(.25, .46, .45, .94) forwards; }
.is-paused .slide > img { animation-play-state: paused; }
@keyframes kenburns { from { transform: scale(1.03); } to { transform: scale(1); } }

/* Menu */
.nd { position: fixed; z-index: 60; top: 16px; left: 0; right: 0; display: flex; justify-content: center; padding-inline: 16px; pointer-events: none; }
.nd__bar { pointer-events: auto; display: flex; align-items: center; gap: clamp(10px, 1.6vw, 26px); height: 64px; padding: 0 8px 0 26px; background: linear-gradient(100deg, #0a2650, #123f7a); border-radius: 999px; box-shadow: 0 16px 40px rgba(10, 38, 80, .28), inset 0 0 0 1px rgba(255, 255, 255, .12); transition: height .4s var(--ease), box-shadow .4s; }
.nd.is-stuck .nd__bar { height: 56px; }
.nd__logo img { width: auto; height: 30px; }
.nd__menu .menu { position: relative; gap: 0; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .92); }
.nd__menu .menu > li { position: relative; z-index: 1; }
.nd__menu .menu > li > a, .nd__menu .menu > li > button { height: 40px; padding-inline: clamp(7px, .85vw, 13px); transition: color .3s; }
.nd__menu a[aria-current], .nd__menu .has-sub:has(a[aria-current]) > button { color: #9bdcf7; }
.nd__menu .sub a[aria-current] { font-weight: 700; color: var(--blue); background: var(--ice); }
.nd__menu .nav-reg > a { font-weight: 700; color: var(--blue-deep); background: linear-gradient(100deg, #bfe9fb, #fff); border-radius: 999px; padding-inline: 18px; margin-inline: 3px; }
.nd__menu .nav-reg > a[aria-current] { background: #fff; box-shadow: 0 0 0 2px #9bdcf7; }
.nd__menu .sub { top: calc(100% + 14px); padding: 8px; color: var(--ink); background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(8, 28, 58, .2); }
.nd__menu .sub::before { content: ''; position: absolute; inset: -16px 0 auto; height: 16px; }
.nd__menu .sub a { padding: 10px 14px; font-weight: 500; border-radius: 10px; transition: background .2s, padding .35s var(--ease); }
.nd__menu .sub a:hover { background: var(--ice); padding-left: 20px; }
.nd__menu .sub a[aria-disabled='true'], .nd__menu .sub a[aria-disabled='true']:hover { padding-left: 14px; color: var(--ink-3); background: none; cursor: default; }
.nd .nav-toggle { color: #fff; }
.nd__menu .menu > li.pillbar { position: absolute; z-index: 0; left: 0; top: 50%; width: var(--pw, 0); height: 40px; margin-top: -20px; background: rgba(255, 255, 255, .15); border-radius: 999px; opacity: var(--po, 0); transform: translateX(var(--px, 0)); transition: transform .55s var(--ease), width .55s var(--ease), opacity .3s; pointer-events: none; }

/* Banner: a light page with the photos in one white mounted frame. The frame keeps the photos' 3:2 shape, so nothing is cropped, and it sits below the menu. */
.hf { position: relative; overflow: hidden; color: var(--ink); background: radial-gradient(52% 70% at 88% 30%, #d7ecf9 0%, rgba(215, 236, 249, 0) 72%), radial-gradient(40% 50% at 8% 90%, #e8f3fa 0%, rgba(232, 243, 250, 0) 72%), #fff; }
.hf__body { display: grid; grid-template-columns: minmax(0, 1fr) min(60%, calc((100svh - 190px) * 1.5), 1400px); gap: clamp(28px, 3.4vw, 56px); align-items: center; padding: 100px var(--gutter) clamp(28px, 4.4vh, 48px); }
.hf__text { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 2.1vh, 20px); min-width: 0; }
.hf__title { font: 700 min(3.7vw, 8vh)/1.07 var(--display); letter-spacing: -.03em; }
.hf__title em { font-style: normal; color: var(--sky-text); }
.hf .hx-facts { flex-direction: column; }
.hf .hx-cta { flex-wrap: nowrap; width: min(100%, 372px); }
.hf .hx-cta .btnx { flex: 1 1 auto; padding-inline: 20px; }
.hf__count { display: flex; gap: 8px; margin: 0; width: min(100%, 372px); }
.hf__count > div { flex: 1; padding: 10px 4px 8px; text-align: center; background: #fff; border-radius: 14px; box-shadow: 0 8px 24px rgba(16, 58, 100, .08), inset 0 0 0 1px var(--line); }
.hf__count dd { margin: 0; font: 700 23px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hf__count dt { margin-top: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.hf__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; isolation: isolate; background: var(--ice-2); border: 10px solid #fff; border-radius: 30px; box-shadow: 0 44px 90px -24px rgba(16, 58, 100, .36), 0 0 0 1px rgba(16, 58, 100, .07); }
.hf__media::after { content: ''; position: absolute; z-index: 2; inset: auto 0 0; height: 20%; background: linear-gradient(180deg, transparent, rgba(6, 22, 48, .4)); pointer-events: none; }
.hf__progress { position: absolute; z-index: 3; right: 18px; bottom: 12px; display: flex; gap: 5px; }
.hf__progress button { display: flex; align-items: center; width: 20px; height: 22px; }
.hf__progress i { position: relative; display: block; width: 100%; height: 3px; overflow: hidden; background: rgba(255, 255, 255, .45); border-radius: 3px; }
.hf__progress i::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.hf__progress .is-done i::after { transform: none; }
.hf__progress .is-on i::after { animation: hffill 7s linear forwards; }
.is-paused .hf__progress .is-on i::after { animation-play-state: paused; }
@keyframes hffill { to { transform: none; } }

/* Ticker */
.ticker--plain { position: relative; z-index: 3; height: 50px; padding-inline: var(--gutter) 12px; font-size: 14px; font-weight: 500; color: var(--ink); background: #fff; box-shadow: inset 0 1px 0 var(--line); }
.ticker--plain .ticker__pause { color: var(--ink-2); }
.ticker--plain .ticker__pause:hover { background: var(--ice); }

@media (max-width: 1240px) {
  .nd__menu { display: none; }
  .nd__bar { padding-right: 8px; gap: 60px; }
  .nd .nav-toggle { display: flex; }
}
@media (max-width: 1100px) {
  .hf .hx-cta { flex-wrap: wrap; }
}
@media (max-width: 960px) {
  /* Words first, then the whole photo in its frame */
  .hf__body { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 96px var(--gutter) 26px; }
  .hf__title { font-size: clamp(34px, 9vw, 60px); }
  .hf .hx-cta, .hf__count { width: 100%; }
  .hf__progress { display: none; }
  .hf__media { border-width: 7px; border-radius: 22px; }
}
@media (max-width: 720px) {
  .hx-cta, .hf .hx-cta { flex-wrap: wrap; width: 100%; }
  .btnx { flex: 1 1 100%; }
  .hx-facts { font-size: 14.5px; }
  .hx-facts li { align-items: flex-start; }
  .hx-facts .ico { margin-top: 2px; }
}