/* ==========================================================================
   Home hero + the header over it. Loaded only on /.

   Unlayered, so it wins over the layered component rules in app.css without
   needing extra specificity. Appearance only: the markup, copy, figures and
   photographs all come from sections/hero.php and the admin.

   Depth: interactions.js writes the pointer position to --mx / --my (−0.5 to
   0.5) on the section. Each decorative layer turns that into a few pixels of
   `translate` — a property separate from `transform`, so it composes with the
   reveal and float animations instead of fighting them.
   ========================================================================== */

.ndi-hero {
  --h-navy: #021b41;
  --h-deep: #03285b;
  --h-royal: #0757a6;
  --h-cyan: #16d9ff;
  --h-electric: #149bff;
  --h-soft: #eaf4ff;
  --h-gold: #ffd84d;
  --h-gold-deep: #d9a900;
  --h-green: #19c37d;
  --h-ink: #13254a;
  --h-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 1. HEADER ================================================================ */

.site-nav.is-home { animation: ndi-nav-in 700ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
@keyframes ndi-nav-in {
  from { opacity: 0; transform: translateY(-14px); }
}
.site-nav.is-home:not(.is-scrolled)::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(120 190 255 / 0.06), rgb(120 200 255 / 0.2) 30%, rgb(22 217 255 / 0.28) 70%, rgb(120 190 255 / 0.06));
}
.site-nav.is-home:not(.is-scrolled) [data-navbar-inner] > a img {
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 2px rgb(22 217 255 / 0.35), 0 0 22px rgb(22 217 255 / 0.25);
}
.site-nav.is-home:not(.is-scrolled) [data-navbar-inner] > a .font-display,
.site-nav.is-home:not(.is-scrolled) [data-navbar-inner] > a .uppercase { color: #fff; }
.site-nav.is-home:not(.is-scrolled) .nav-link { color: #fff; font-weight: 500; transition: color 250ms ease; }
.site-nav.is-home:not(.is-scrolled) .nav-link:hover,
.site-nav.is-home:not(.is-scrolled) .nav-link[aria-expanded="true"] { color: #9fe9ff; }
.site-nav.is-home:not(.is-scrolled) .nav-link.is-active { color: #16d9ff; }
.site-nav.is-home:not(.is-scrolled) .nav-link.is-active::after {
  left: 50%;
  right: auto;
  width: 2.25rem;
  height: 3px;
  margin-left: -1.125rem;
  border-radius: 999px;
  background: #16d9ff;
  box-shadow: 0 0 12px rgb(22 217 255 / 0.8);
}
.site-nav.is-home:not(.is-scrolled) .icon-btn {
  color: #fff;
  border: 1px solid rgb(22 217 255 / 0.55);
  background: rgb(7 87 166 / 0.18);
  box-shadow: 0 0 18px rgb(22 217 255 / 0.18), inset 0 0 12px rgb(22 217 255 / 0.1);
}
.site-nav.is-home:not(.is-scrolled) .icon-btn:hover { background: rgb(22 217 255 / 0.16); }
.site-nav.is-home:not(.is-scrolled) .btn--primary {
  background: linear-gradient(90deg, #16d9ff, #149bff);
  box-shadow: 0 10px 30px -6px rgb(22 190 255 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.4);
}

@media (min-width: 1280px) {
  .site-nav.is-home:not(.is-scrolled) .nav-shell {
    width: min(calc(100vw - 2.5rem), max(89vw, 1240px), 1540px);
    max-width: none;
    padding: 0;
  }
  .site-nav.is-home:not(.is-scrolled) [data-navbar-inner] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4.85rem;
    gap: 1rem;
  }
  .site-nav.is-home:not(.is-scrolled) [data-navbar-inner] > a { flex: 0 0 auto; align-items: center; gap: 0.85rem; }
  .site-nav.is-home:not(.is-scrolled) .nav-brand-sub {
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
    margin-top: 0.4rem;
    font-size: 12px;
    color: #c9d7ec;
  }
  .site-nav.is-home:not(.is-scrolled) nav[aria-label="Main"] {
    flex: 0 1 auto;
    min-width: 0;
    justify-content: center;
    gap: 0;
  }
  .site-nav.is-home:not(.is-scrolled) .nav-link {
    display: inline-flex;
    align-items: center;
    height: 2.6rem;
    padding: 0 clamp(0.45rem, 1.5vw - 0.8rem, 1rem);
    font-size: 15px;
    line-height: 1;
  }
  .site-nav.is-home:not(.is-scrolled) .nav-link.is-active::after { bottom: -0.35rem; }
  .site-nav.is-home:not(.is-scrolled) [data-navbar-inner] > div:last-child {
    flex: 0 0 auto;
    align-items: center;
    gap: 0.8rem;
  }
  .site-nav.is-home:not(.is-scrolled) [data-navbar-inner] > a img { width: 3.2rem; height: 3.2rem; }
  .site-nav.is-home:not(.is-scrolled) [data-navbar-inner] > a .font-display { font-size: 1.55rem; letter-spacing: -0.02em; }
  .site-nav.is-home:not(.is-scrolled) [data-navbar-inner] > a .uppercase { font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; }
  .site-nav.is-home:not(.is-scrolled) .icon-btn { width: 2.9rem; height: 2.9rem; }
  .site-nav.is-home:not(.is-scrolled) .btn--primary {
    min-height: 2.9rem;
    min-width: 0;
    padding-inline: 1.4rem;
    font-size: 0.95rem;
  }
}
@media (min-width: 1536px) {
  .site-nav.is-home:not(.is-scrolled) .nav-link { font-size: 16px; }
  .site-nav.is-home:not(.is-scrolled) [data-navbar-inner] > a img { width: 3.6rem; height: 3.6rem; }
  .site-nav.is-home:not(.is-scrolled) [data-navbar-inner] > a .font-display { font-size: 1.8rem; }
  .site-nav.is-home:not(.is-scrolled) [data-navbar-inner] > a .uppercase { font-size: 13px; }
  .site-nav.is-home:not(.is-scrolled) .nav-brand-sub { font-size: 13px; }
  .site-nav.is-home:not(.is-scrolled) .icon-btn { width: 3.2rem; height: 3.2rem; }
  .site-nav.is-home:not(.is-scrolled) .btn--primary { min-height: 3.2rem; padding-inline: 1.6rem; font-size: 1rem; }
}

/* Below the desktop bar the header floats as a pill; over the navy hero it
   takes a dark glass so the white wordmark keeps its contrast. */
@media (max-width: 1279px) {
  .site-nav.is-home:not(.is-scrolled) .nav-shell {
    border: 1px solid rgb(22 217 255 / 0.22);
    background: rgb(2 27 65 / 0.55);
    box-shadow: 0 10px 30px -12px rgb(0 8 30 / 0.6);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .site-nav.is-home:not(.is-scrolled) .icon-btn { color: #fff; }
}

/* 2. GROUND ================================================================ */

.hero.ndi-hero {
  display: block;
  min-height: 0;
  color: #fff;
  background:
    radial-gradient(52rem 38rem at 74% 44%, rgb(20 155 255 / 0.3), transparent 62%),
    radial-gradient(34rem 26rem at 96% 8%, rgb(22 217 255 / 0.2), transparent 62%),
    radial-gradient(40rem 26rem at 4% 104%, rgb(22 217 255 / 0.14), transparent 60%),
    radial-gradient(30rem 24rem at 20% 20%, rgb(7 87 166 / 0.35), transparent 70%),
    linear-gradient(158deg, #021b41 0%, #03285b 46%, #063c78 76%, #0757a6 100%);
}

/* Soft glow that trails the pointer a little. */
.ndi-hero .hero-cursor-glow {
  left: 70%;
  top: 44%;
  width: 34rem;
  height: 34rem;
  margin: -17rem 0 0 -17rem;
  background: radial-gradient(circle, rgb(22 217 255 / 0.2), transparent 66%);
  transform: none;
  translate: calc(var(--mx, 0) * 24px) calc(var(--my, 0) * 18px);
}

/* Two hairline diagonals of light across the right half. */
.hero-streaks {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, transparent 57.9%, rgb(140 220 255 / 0.12) 58%, transparent 58.35%),
    linear-gradient(118deg, transparent 71.9%, rgb(140 220 255 / 0.08) 72%, transparent 72.25%),
    linear-gradient(118deg, transparent 40%, rgb(22 217 255 / 0.05) 52%, transparent 64%);
}

.ndi-hero .hero-floor {
  left: -14%;
  width: 60%;
  bottom: -30%;
  height: 44%;
  opacity: 0.55;
}

/* The academy in line-art, fading toward the composition. */
.ndi-hero__watermark {
  position: absolute;
  right: -2.5rem;
  top: 24%;
  width: clamp(16rem, 24vw, 30rem);
  height: auto;
  color: #7fdcff;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 100%);
  mask-image: linear-gradient(to left, #000 45%, transparent 100%);
}

/* Glass prisms. Solid enough to read as glass, quiet enough to stay behind. */
.ndi-hero .hero-gem-cube i {
  border-radius: 5px;
  border: 1px solid rgb(190 240 255 / 0.75);
  background: linear-gradient(145deg, rgb(120 225 255 / 0.55), rgb(20 155 255 / 0.32) 48%, rgb(7 60 150 / 0.5));
  box-shadow: inset 0 0 18px rgb(170 235 255 / 0.4);
}
.ndi-hero .hero-gem { translate: calc(var(--mx, 0) * 24px) calc(var(--my, 0) * 18px); }
.ndi-hero .hero-gem--mid { left: -1.6rem; top: 30%; }
.ndi-hero .hero-gem--mid .hero-gem-cube { --s: 4.4rem; animation-duration: 30s; }
.ndi-hero .hero-gem--lg { left: -2.5rem; bottom: 3%; opacity: 0.6; filter: blur(3px) drop-shadow(0 0 22px rgb(22 217 255 / 0.35)); }
.ndi-hero .hero-gem--sm { left: 47.5%; bottom: 10%; }
.ndi-hero .hero-gem--sm .hero-gem-cube { --s: 2.8rem; }

/* The light wave the section rests on: low on the left, rising right. */
.ndi-hero .hero-curve {
  position: absolute;
  bottom: -1px;
  pointer-events: none;
  left: -4%;
  right: -4%;
  z-index: 4;
  height: clamp(44px, 7vw, 104px);
  border-radius: 100% 0 0 0 / 100% 0 0 0;
  background: linear-gradient(180deg, #eef7ff, #fff 60%);
  box-shadow: 0 -10px 40px rgb(22 217 255 / 0.35), 0 -2px 10px rgb(190 240 255 / 0.5);
}

/* 3. LAYOUT ================================================================ */

.ndi-hero .hero-layout {
  display: flex;
  flex-direction: column;
  width: calc(100% - 2.5rem);
  max-width: 40rem;
  margin-inline: auto;
  gap: 0;
  padding: 6.5rem 0 calc(clamp(44px, 7vw, 104px) + 2.5rem);
}

@media (min-width: 1024px) {
  .hero.ndi-hero { display: flex; align-items: center; min-height: clamp(760px, 100svh, 960px); }
  .ndi-hero .hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    width: min(calc(100% - 4rem), 80vw + 6rem, 1400px);
    max-width: none;
    column-gap: 2rem;
    padding: calc(4.85rem + 2.75rem) 0 calc(clamp(44px, 7vw, 104px) + 2.25rem);
  }
}
@media (min-width: 1280px) {
  .ndi-hero .hero-layout { width: min(calc(100% - 5rem), 82vw, 1400px); }
}

/* 4. WORDS ================================================================= */

.ndi-hero .hero-kicker,
.ndi-hero .hero-open { min-height: 2.5rem; }
.ndi-hero .hero-kicker {
  gap: 0.7rem;
  padding: 0.35rem 1.25rem 0.35rem 0.35rem;
  font-size: clamp(10px, 0.45rem + 0.2vw, 12px);
  letter-spacing: 0.18em;
  background: linear-gradient(180deg, rgb(22 217 255 / 0.16), rgb(7 87 166 / 0.14));
  border: 1px solid rgb(22 217 255 / 0.7);
  box-shadow: 0 0 0 4px rgb(22 217 255 / 0.06), 0 0 24px rgb(22 217 255 / 0.25), inset 0 1px 0 rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.ndi-hero .hero-kicker-icon {
  width: 1.8rem;
  height: 1.8rem;
  background: linear-gradient(180deg, #16d9ff, #149bff);
  box-shadow: 0 0 14px rgb(22 217 255 / 0.6);
}
.ndi-hero .hero-open {
  gap: 0.6rem;
  padding: 0.35rem 1rem;
  background: rgb(234 244 255 / 0.1);
  border: 1px solid rgb(234 244 255 / 0.14);
  font-size: 13px;
  font-weight: 500;
  color: #e2ecf8;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.ndi-hero .hero-open .live-dot { background: #19c37d; box-shadow: 0 0 10px rgb(25 195 125 / 0.9); }

.ndi-hero .hero-title {
  margin-top: 1.5rem;
  font-size: clamp(2.35rem, 9.6vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: #fff;
  max-width: none;
}
.ndi-hero .hero-title .overflow-hidden:has(.hero-accent) { overflow: visible; padding-bottom: 0.3em; }
.ndi-hero .hero-accent { padding-bottom: 0.08em; }
.ndi-hero .hero-accent-text {
  background: linear-gradient(90deg, #16d9ff 0%, #2ccfff 52%, #8fe0c0 70%, #ffd84d 86%, #ffc93a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgb(22 217 255 / 0.35));
}
/* Hand-drawn underline: tapering ends, a slight lift, drawn in once. */
.ndi-hero .hero-accent::after {
  left: 0.03em;
  right: 0.35em;
  bottom: -0.12em;
  height: 0.07em;
  min-height: 4px;
  max-height: 6px;
  border-radius: 50%;
  background: linear-gradient(90deg, #7fa8ff 0%, #9fe6ff 30%, #e9f3c9 60%, #ffd84d 82%, #ffb627 100%);
  box-shadow: 0 0 14px rgb(22 217 255 / 0.35);
  transform: rotate(-0.8deg) scaleX(0);
  animation: ndi-underline 900ms cubic-bezier(0.22, 1, 0.36, 1) 700ms forwards;
}
@keyframes ndi-underline { to { transform: rotate(-0.8deg) scaleX(1); } }

.ndi-hero .hero-lead {
  margin-top: 1.5rem;
  max-width: 36.5rem;
  font-size: clamp(1rem, 0.62rem + 0.55vw, 1.15rem);
  font-weight: 400;
  line-height: 1.7;
  color: #c9d7ec;
}

.ndi-hero .hero-cta { min-height: 3.35rem; padding-inline: 1.9rem; font-size: 1rem; font-weight: 700; }
.ndi-hero .hero-cta.btn--primary {
  background: linear-gradient(90deg, #16d9ff, #149bff);
  box-shadow: 0 16px 36px -12px rgb(22 190 255 / 0.85), 0 0 24px rgb(22 217 255 / 0.25), inset 0 1px 0 rgb(255 255 255 / 0.45);
}
/* One pass of the shine shortly after the page settles; hover repeats it. */
.ndi-hero .hero-cta.btn--primary::after { animation: ndi-shine 1400ms cubic-bezier(0.22, 1, 0.36, 1) 1600ms; }
@keyframes ndi-shine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.ndi-hero .hero-cta-outline {
  color: #fff;
  border: 1.5px solid rgb(22 217 255 / 0.6);
  background: rgb(234 244 255 / 0.04);
  box-shadow: inset 0 0 18px rgb(22 217 255 / 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 300ms var(--h-ease), background-color 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}
.ndi-hero .hero-cta-ico { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .ndi-hero .hero-cta-outline:hover {
    transform: translateY(-2px);
    border-color: #16d9ff;
    background: rgb(22 217 255 / 0.12);
    box-shadow: 0 0 26px rgb(22 217 255 / 0.3), inset 0 0 18px rgb(22 217 255 / 0.12);
  }
  .ndi-hero .hero-cta.btn--primary:hover {
    box-shadow: 0 20px 40px -12px rgb(22 190 255 / 0.95), 0 0 32px rgb(22 217 255 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.45);
  }
}

/* Brochure download: a quieter third action under the two main calls to
   action — a glass pill with a gold-ringed icon. */
.ndi-hero .hero-brochure-row { margin-top: 1.1rem; }
.ndi-hero .hero-brochure {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.9rem;
  padding: 0.35rem 1.35rem 0.35rem 0.4rem;
  border: 1px solid rgb(234 244 255 / 0.18);
  border-radius: 999px;
  background: rgb(234 244 255 / 0.06);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 300ms var(--h-ease), background-color 300ms ease, border-color 300ms ease;
}
.ndi-hero .hero-brochure-ico {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  color: #ffd98a;
  background: rgb(214 168 79 / 0.16);
  box-shadow: inset 0 0 0 1px rgb(214 168 79 / 0.55);
}
@media (hover: hover) and (pointer: fine) {
  .ndi-hero .hero-brochure:hover {
    transform: translateY(-2px);
    background: rgb(234 244 255 / 0.12);
    border-color: rgb(214 168 79 / 0.6);
  }
  .ndi-hero .hero-brochure:hover .hero-brochure-ico { background: rgb(214 168 79 / 0.28); }
}
.ndi-hero .hero-brochure:focus-visible { outline: 2px solid #16d9ff; outline-offset: 3px; }
@media (max-width: 639px) {
  .ndi-hero .hero-brochure { display: flex; width: 100%; justify-content: center; }
}
@media (min-width: 1024px) {
  .ndi-hero .hero-brochure-row { margin-top: 1.25rem; }
}

/* Trust points: icon beside a two-line label, hairlines between. */
.ndi-hero .hero-trust {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin-top: 2.25rem;
  padding-top: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: #c9d7ec;
}
.ndi-hero .hero-trust li {
  gap: 0.8rem;
  max-width: none;
  padding: 0.15rem 1.6rem;
}
.ndi-hero .hero-trust li:first-child { padding-left: 0; }
.ndi-hero .hero-trust li + li { border-left: 1px solid rgb(234 244 255 / 0.2); }
.ndi-hero .hero-trust-text { max-width: 6.5rem; text-wrap: balance; }
.ndi-hero .hero-trust-ico { color: #e2ecf8; }
.ndi-hero .hero-trust-ico svg { width: 2rem; height: 2rem; stroke-width: 1.5; }

@media (min-width: 1024px) {
  .ndi-hero .ndi-hero__content > div:first-child { flex-wrap: nowrap; }
  .ndi-hero .hero-kicker, .ndi-hero .hero-open { white-space: nowrap; }
  .ndi-hero .hero-title { margin-top: 2rem; font-size: clamp(3.1rem, 4.35vw, 5rem); }
  .ndi-hero .hero-lead { margin-top: 1.75rem; }
  .ndi-hero .hero-cta { min-height: 3.5rem; padding-inline: 2.1rem; font-size: 1.05rem; }
  .ndi-hero .hero-trust { margin-top: 2.2rem; }
}

/* 5. STAGE ================================================================= */

/* --hf is the main frame's width; every other piece is placed from it, so
   the composition keeps its proportions from a laptop up to 1920 px. */
.ndi-hero .hero-visual { --hf: min(100%, 30rem); order: 2; width: 100%; max-width: 30rem; margin-top: 3rem; }
.ndi-hero .hero-stage { width: 100%; }
.ndi-hero .hero-photo-wrap { position: relative; width: 100%; margin: 0; }
.ndi-hero .hero-visual::after { display: none; }

.ndi-hero .hero-photo {
  position: relative;
  padding: 7px;
  border-radius: 30px;
  border: 1px solid rgb(255 255 255 / 0.7);
  background: linear-gradient(160deg, rgb(255 255 255 / 0.5), rgb(160 220 255 / 0.2) 40%, rgb(255 255 255 / 0.32));
  box-shadow:
    0 0 0 1px rgb(22 217 255 / 0.25),
    0 0 44px rgb(22 217 255 / 0.35),
    0 40px 80px -30px rgb(0 8 30 / 0.75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ndi-hero .hero-photo-frame {
  aspect-ratio: 10 / 11;
  max-height: none;
  border-radius: 23px;
  overflow: hidden;
}
.ndi-hero .hero-photo img,
.ndi-hero .hero-photo-img { object-fit: cover; object-position: center 40%; }
.ndi-hero .hero-photo-shade {
  background: linear-gradient(180deg, transparent 44%, rgb(2 20 55 / 0.5) 66%, rgb(2 20 55 / 0.92) 100%);
}
.ndi-hero .hero-photo-copy { padding: 0 1.5rem 1.6rem; }
.ndi-hero .hero-photo-kicker { font-size: 11px; letter-spacing: 0.16em; color: rgb(255 255 255 / 0.92); }
.ndi-hero .hero-photo-caption {
  margin-top: 0.45rem;
  font-size: clamp(1.4rem, 0.6rem + 1.35vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.ndi-hero .hero-photo-caption span { color: #ffd84d; }
.ndi-hero .hero-photo-caption::after {
  width: 6.5rem;
  height: 4px;
  margin-top: 0.75rem;
  background: linear-gradient(90deg, #16d9ff 0 62%, #ffd84d 62% 100%);
  box-shadow: 0 0 12px rgb(22 217 255 / 0.5);
}

/* The photograph tilted behind. Hidden on narrow screens, where it would only
   crowd the frame. */
.ndi-hero .hero-back { display: none; }
.ndi-hero .hero-back-frame {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 22px;
  border: 2px solid rgb(234 244 255 / 0.75);
  transform: rotate(-8deg);
  box-shadow: 0 0 0 1px rgb(22 217 255 / 0.3), 0 0 30px rgb(22 217 255 / 0.3), 0 24px 50px -16px rgb(0 10 40 / 0.6);
}
/* Its slides cross-fade in step with the poster, a beat softer. */
.ndi-hero .hero-back-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1000ms var(--h-ease), transform 1800ms var(--h-ease);
}
.ndi-hero .hero-back-slide[data-active="true"] { opacity: 1; transform: none; }
.ndi-hero .hero-back-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(7 87 166 / 0.05), rgb(2 27 65 / 0.35));
}
@media (min-width: 640px) {
  /* Layered at 0 under a lifted poster rather than at −1: a composited
     negative layer is painted beneath the section's own background. */
  .ndi-hero .hero-back {
    display: block;
    z-index: 0;
    left: -18%;
    top: -7%;
    width: 58%;
    height: 72%;
  }
}

/* Carousel indicators, small and out of the way at the top of the frame. */
.ndi-hero .hero-controls {
  top: 1.1rem;
  left: 1.1rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: rgb(2 27 65 / 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ndi-hero .hero-ctrl { width: 1.75rem; height: 1.75rem; border-color: rgb(255 255 255 / 0.25); background: transparent; }
.ndi-hero .hero-dot { background: rgb(255 255 255 / 0.45); }
.ndi-hero .hero-dot[aria-current="true"] { background: #16d9ff; }

/* Admissions badge. */
.ndi-hero .hero-badge-slot { top: 0.9rem; right: 0.9rem; z-index: 30; }
.ndi-hero .hero-badge {
  gap: 0.55rem;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  border-radius: 18px;
  background: linear-gradient(160deg, #ffe97a, #ffd84d 45%, #f2bd12);
  color: #0f1f45;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.55) inset, 0 12px 28px -8px rgb(217 169 0 / 0.65), 0 0 26px rgb(255 216 77 / 0.35);
  text-align: left;
  animation: ndi-hover 6s ease-in-out 1.6s infinite;
}
@keyframes ndi-hover { 50% { translate: 0 -5px; } }
.ndi-hero .hero-badge-mark { width: auto; height: auto; background: none; color: #0b2a6b; }
.ndi-hero .hero-badge-mark svg { width: 1.45rem; height: 1.45rem; }
.ndi-hero .hero-badge-kicker { font-size: 9px; letter-spacing: 0.16em; color: #3d4a66; }
.ndi-hero .hero-badge-year { margin-top: 0.2rem; font-size: 1.05rem; color: #0b1b3f; }

/* Figures: glass tiles. On small screens they sit in a row under the frame. */
.ndi-hero .hero-photo-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0.55rem;
  padding-inline: 0.5rem;
}
.ndi-hero .hero-poster-enter { z-index: 1; grid-column: 1 / -1; margin-inline: -0.5rem; }
.ndi-hero .hero-chip-slot { position: relative; inset: auto; z-index: 20; margin-top: -1.6rem; }
.ndi-hero .hero-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
  padding: 0.85rem 0.4rem 0.8rem;
  border-radius: 20px;
  text-align: center;
  background: rgb(255 255 255 / 0.88);
  border: 1px solid rgb(255 255 255 / 0.9);
  box-shadow: 0 0 0 1px rgb(22 217 255 / 0.18), 0 18px 40px -14px rgb(2 20 60 / 0.6), 0 0 28px rgb(22 217 255 / 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  transition: translate 400ms var(--h-ease), box-shadow 400ms ease;
}
.ndi-hero .hero-chip-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 13px;
  background: linear-gradient(145deg, #1a82e8, #0a3f9a);
  box-shadow: 0 8px 18px -6px rgb(7 60 150 / 0.65), inset 0 1px 0 rgb(255 255 255 / 0.25);
}
.ndi-hero .hero-chip-slot--a .hero-chip-icon { background: linear-gradient(145deg, #1fc1f5, #0b74cf); }
.ndi-hero .hero-chip-icon svg { width: 1.2rem; height: 1.2rem; }
.ndi-hero .hero-chip-copy { align-items: center; min-width: 0; }
.ndi-hero .hero-chip-value { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; color: var(--h-ink); }
.ndi-hero .hero-chip-label { margin-top: 0.25rem; font-size: 11.5px; font-weight: 500; line-height: 1.2; color: #62748f; }
.ndi-hero .hero-chip-go { display: none; }

@media (hover: hover) and (pointer: fine) {
  .ndi-hero .hero-chip:hover {
    translate: 0 -4px;
    box-shadow: 0 0 0 1px rgb(22 217 255 / 0.35), 0 26px 48px -14px rgb(2 20 60 / 0.65), 0 0 36px rgb(22 217 255 / 0.28);
  }
}

@media (min-width: 640px) {
  .ndi-hero .hero-visual { max-width: 34rem; margin-inline: auto; padding-left: 3.5rem; }
}

/* 6. DESKTOP COMPOSITION =================================================== */

@media (min-width: 1024px) {
  .ndi-hero .hero-visual {
    --hf: clamp(22rem, 31vw, 35rem);
    --hm: clamp(0.75rem, 3vw - 1.5rem, 2.75rem);
    order: 0;
    max-width: none;
    height: calc(var(--hf) * 1.1 + 4rem);
    margin: 0;
    padding: 0;
  }
  .ndi-hero .hero-stage { height: 100%; }
  .ndi-hero .hero-photo-wrap {
    display: block;
    padding: 0;
    width: var(--hf);
    margin: 2rem var(--hm) 0 auto;
  }
  .ndi-hero .hero-photo { padding: 8px; border-radius: 32px; }
  .ndi-hero .hero-photo-frame { aspect-ratio: auto; height: calc(var(--hf) * 1.1 - 16px); border-radius: 24px; }
  .ndi-hero .hero-photo-copy { padding: 0 1.75rem 1.4rem; }
  .ndi-hero .hero-photo-kicker { font-size: 12px; }

  .ndi-hero .hero-back {
    left: -27%;
    top: -12%;
    width: 60%;
    height: 78%;
    translate: calc(var(--mx, 0) * -20px) calc(var(--my, 0) * -14px);
  }

  .ndi-hero .hero-controls { top: 1.25rem; left: 1.25rem; }
  .ndi-hero .hero-controls .hero-ctrl { display: none; }

  .ndi-hero .hero-badge-slot { top: -1.6rem; right: -1.1rem; }
  .ndi-hero .hero-badge { padding: 0.6rem 1.25rem 0.6rem 0.9rem; border-radius: 22px; }
  .ndi-hero .hero-badge-mark svg { width: 1.7rem; height: 1.7rem; }
  .ndi-hero .hero-badge-kicker { font-size: 10px; }
  .ndi-hero .hero-badge-year { font-size: 1.15rem; }

  /* Chip slots sit inside the frame wrapper, so they are placed from the
     frame's own box (--hf wide), overlapping its edges as in a poster. */
  .ndi-hero .hero-chip-slot {
    position: absolute;
    margin: 0;
    translate: calc(var(--mx, 0) * 14px) calc(var(--my, 0) * 10px);
  }
  .ndi-hero .hero-chip-slot--a { top: calc(var(--hf) * 0.215); left: calc(var(--hf) * -0.12); right: auto; }
  .ndi-hero .hero-chip-slot--b { top: calc(var(--hf) * 0.46); right: calc(var(--hf) * -0.05); left: auto; }
  .ndi-hero .hero-chip-slot--c { top: calc(var(--hf) * 0.6); left: calc(var(--hf) * -0.155); right: auto; bottom: auto; }
  .ndi-hero .hero-chip-slot--b { translate: calc(var(--mx, 0) * -12px) calc(var(--my, 0) * -9px); }

  .ndi-hero .hero-chip {
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
    width: auto;
    min-width: calc(var(--hf) * 0.42);
    padding: 0.8rem 1.1rem 0.8rem 0.8rem;
    border-radius: 22px;
    text-align: left;
  }
  .ndi-hero .hero-chip-icon { width: 3rem; height: 3rem; border-radius: 15px; }
  .ndi-hero .hero-chip-icon svg { width: 1.45rem; height: 1.45rem; }
  .ndi-hero .hero-chip-copy { align-items: flex-start; }
  .ndi-hero .hero-chip-value { font-size: clamp(1.45rem, 0.6rem + 1vw, 1.85rem); }
  .ndi-hero .hero-chip-label { font-size: 13px; white-space: nowrap; }
  .ndi-hero .hero-chip-go { display: inline-flex; margin-left: auto; padding-left: 0.75rem; color: var(--h-ink); }
}

/* Laptops: the same composition, tightened so the badges stay on one line,
   both calls to action sit side by side and the figures clear the caption. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .ndi-hero .hero-kicker { letter-spacing: 0.13em; padding-right: 1rem; }
  .ndi-hero .hero-open { font-size: 12.5px; padding-inline: 0.85rem; }
  .ndi-hero .hero-chip { gap: 0.7rem; padding: 0.65rem 0.9rem 0.65rem 0.65rem; border-radius: 18px; }
  .ndi-hero .hero-chip-icon { width: 2.6rem; height: 2.6rem; border-radius: 13px; }
  .ndi-hero .hero-chip-label { font-size: 12px; }
  .ndi-hero .hero-photo-copy { padding: 0 1.4rem 1.2rem; }
  .ndi-hero .hero-photo-kicker { font-size: 10.5px; }
  .ndi-hero .hero-trust { font-size: 14px; }
  .ndi-hero .hero-trust li { gap: 0.6rem; padding-inline: 0.9rem; }
  .ndi-hero .hero-trust li:first-child { padding-left: 0; }
  .ndi-hero .hero-trust-ico svg { width: 1.65rem; height: 1.65rem; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .ndi-hero .hero-layout { column-gap: 1.25rem; }
  .ndi-hero .hero-kicker { font-size: 9.5px; letter-spacing: 0.1em; }
  .ndi-hero .hero-open { font-size: 12px; }
  .ndi-hero .hero-cta { padding-inline: 1.4rem; font-size: 0.98rem; }
  .ndi-hero .hero-gem--sm { display: none; }
  .ndi-hero .hero-chip-slot--a { top: calc(var(--hf) * 0.18); }
  .ndi-hero .hero-chip-slot--c { top: calc(var(--hf) * 0.54); }
  .ndi-hero .hero-chip-value { font-size: 1.35rem; }
}

/* 7. SMALL SCREENS ========================================================= */

@media (max-width: 1023px) {
  /* The words column opens up so its pieces and the stage share one flow:
     message, actions, then the photograph and figures, then the trust row. */
  .ndi-hero .ndi-hero__content { display: contents; }
  .ndi-hero .hero-trust { order: 3; }
  .ndi-hero .hero-gem--sm { display: none; }
  .ndi-hero .hero-gem--mid { display: block; top: 16%; left: auto; right: -2.2rem; opacity: 0.55; }
  .ndi-hero .hero-gem--mid .hero-gem-cube { --s: 3.4rem; }
  .ndi-hero__watermark { display: none; }
  /* A row of tiles has to stay level; the bob is for the floating layout. */
  .ndi-hero .hero-chip { animation: none; }
}

@media (max-width: 639px) {
  .ndi-hero .hero-layout { padding-top: 6.25rem; }
  .ndi-hero .hero-kicker { padding-right: 0.95rem; letter-spacing: 0.14em; }
  .ndi-hero .hero-open { font-size: 13px; }
  .ndi-hero .hero-lead { margin-top: 1.25rem; }
  .ndi-hero .hero-visual { margin-top: 2.5rem; }
  .ndi-hero .hero-photo-frame { aspect-ratio: 10 / 11.5; }
  .ndi-hero .hero-photo-copy { padding: 0 1.25rem 2.6rem; }
  .ndi-hero .hero-badge { padding: 0.4rem 0.75rem 0.4rem 0.55rem; border-radius: 14px; }
  .ndi-hero .hero-badge-year { font-size: 0.9rem; }
  .ndi-hero .hero-badge-mark svg { width: 1.2rem; height: 1.2rem; }

  /* Trust points as three equal columns, icon over label. */
  .ndi-hero .hero-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 2rem;
    font-size: 12.5px;
    text-align: center;
  }
  .ndi-hero .hero-trust li {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    height: 100%;
    padding: 0.1rem 0.4rem;
  }
  .ndi-hero .hero-trust li:first-child { padding-left: 0.4rem; }
  .ndi-hero .hero-trust-text { max-width: none; }
  .ndi-hero .hero-trust-ico svg { width: 1.7rem; height: 1.7rem; }
}

/* 8. THE ASSISTANT AND WHATSAPP OVER THE HERO ============================== */
/* The launchers keep their behaviour; on the home page they pick up the
   hero's cyan so they read as part of the same scene. */
.ndi-asst-launcher {
  border-color: rgb(22 217 255 / 0.7);
  background: linear-gradient(180deg, rgb(7 40 92 / 0.94), rgb(2 27 65 / 0.94));
  box-shadow: 0 0 0 1px rgb(22 217 255 / 0.18), 0 0 26px rgb(22 217 255 / 0.3), 0 16px 34px -14px rgb(0 0 0 / 0.7);
  font-size: 15px;
  font-weight: 700;
}
.ndi-asst-launcher:hover { border-color: #16d9ff; box-shadow: 0 0 0 1px rgb(22 217 255 / 0.3), 0 0 32px rgb(22 217 255 / 0.45), 0 16px 34px -14px rgb(0 0 0 / 0.7); }
.ndi-asst-launcher-icon { background: #eaf4ff; color: #149bff; box-shadow: 0 0 14px rgb(22 217 255 / 0.4); }

/* 9. MOTION PREFERENCES ==================================================== */

@media (prefers-reduced-motion: reduce) {
  .site-nav.is-home,
  .ndi-hero .hero-badge,
  .ndi-hero .hero-cta.btn--primary::after { animation: none; }
  .ndi-hero .hero-accent::after { animation: none; transform: rotate(-0.8deg); }
  .ndi-hero .hero-back-slide { transform: none; transition: opacity 200ms linear; }
  .ndi-hero .hero-gem,
  .ndi-hero .hero-back,
  .ndi-hero .hero-chip-slot,
  .ndi-hero .hero-cursor-glow { translate: none; }
}

/* ==========================================================================
   VIDEO HERO (sections/hero-video.php) — only when Admin → Home hero video
   has a video. Full screen under the transparent header; the usual hero
   follows as the second section (.ndi-hero--second).
   ========================================================================== */
.hv {
  position: relative; isolation: isolate; display: flex; align-items: flex-end;
  min-height: 100svh; min-height: max(36rem, 100svh); overflow: hidden;
  background: #021b41; color: #fff;
}
.hv-video { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
/* Legibility: deep at the bottom and left where the words sit, open above. */
.hv-shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(2 27 65 / 0.55) 0%, rgb(2 27 65 / 0.05) 26%, rgb(2 27 65 / 0.15) 52%, rgb(2 27 65 / 0.88) 100%),
    linear-gradient(90deg, rgb(2 27 65 / 0.7) 0%, rgb(2 27 65 / 0.25) 45%, rgb(2 27 65 / 0) 70%);
}
.hv-grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background: radial-gradient(60rem 30rem at 15% 110%, rgb(22 217 255 / 0.22), transparent 60%);
}
.hv-inner {
  width: min(calc(100% - 2.5rem), 1400px); margin: 0 auto;
  padding: 7rem 0 clamp(6.5rem, 12vh, 8.5rem);
}
@media (min-width: 1024px) { .hv-inner { width: min(calc(100% - 5rem), 82vw, 1400px); } }
.hv-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.5rem 1rem 0.5rem 0.8rem;
  border: 1px solid rgb(255 216 77 / 0.45); border-radius: 999px; background: rgb(2 27 65 / 0.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #ffe38a;
}
.hv-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #ffd84d; box-shadow: 0 0 0 4px rgb(255 216 77 / 0.2); }
.hv-title {
  max-width: 16ch; margin: 1.25rem 0 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 1.4rem + 5vw, 5.6rem); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance;
  text-shadow: 0 8px 40px rgb(2 27 65 / 0.45);
}
.hv-sub { max-width: 42rem; margin: 1.25rem 0 0; font-size: clamp(1.02rem, 0.92rem + 0.45vw, 1.3rem); line-height: 1.6; color: rgb(234 244 255 / 0.88); }
.hv-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
/* Whatever line comes first (the admin can switch the others off) sits flush. */
.hv-inner > :not(.sr-only):first-child, .hv-inner > .sr-only:first-child + * { margin-top: 0; }
.hv-ghost {
  display: inline-flex; align-items: center; gap: 0.55rem; border-color: rgb(255 255 255 / 0.45) !important; color: #fff !important;
  background: rgb(255 255 255 / 0.08) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hv-ghost:hover { background: rgb(255 255 255 / 0.16) !important; }

/* Controls: always reachable (pause is required for moving video). */
/* Bottom left, in line with the text — the bottom right belongs to the floating Ask NDI / WhatsApp buttons. */
.hv-controls { position: absolute; left: calc((100% - min(100% - 2.5rem, 1400px)) / 2); bottom: clamp(1.25rem, 4vh, 2.25rem); z-index: 2; display: flex; gap: 0.5rem; }
@media (min-width: 1024px) { .hv-controls { left: calc((100% - min(100% - 5rem, 82vw, 1400px)) / 2); } }
.hv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; height: 2.75rem; min-width: 2.75rem; padding: 0 0.85rem;
  border: 1px solid rgb(255 255 255 / 0.35); border-radius: 999px; background: rgb(2 27 65 / 0.55); color: #fff; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 600 0.82rem/1 var(--font-sans, inherit);
  transition: background-color 200ms ease, border-color 200ms ease;
}
.hv-btn:hover { background: rgb(2 27 65 / 0.8); border-color: rgb(255 255 255 / 0.6); }
.hv-btn:focus-visible { outline: 3px solid #16d9ff; outline-offset: 3px; }
.hv-ico { width: 1.05rem; height: 1.05rem; }
.hv-ico-play, .hv.is-paused .hv-ico-pause, .hv-ico-sound, .hv.is-sound .hv-ico-muted { display: none; }
.hv.is-paused .hv-ico-play, .hv.is-sound .hv-ico-sound { display: block; }
.hv.is-sound .hv-btn--sound { border-color: #ffd84d; color: #ffe38a; }

/* Scroll cue */
.hv-scroll {
  position: absolute; left: 50%; bottom: 1.25rem; z-index: 2; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 0.5rem; color: rgb(234 244 255 / 0.8); text-decoration: none;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
}
.hv-scroll-line { position: relative; width: 1px; height: 2.6rem; overflow: hidden; background: rgb(255 255 255 / 0.25); }
.hv-scroll-line::after { content: ""; position: absolute; inset: 0 0 auto; height: 40%; background: #ffd84d; animation: hv-drop 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes hv-drop { 0% { transform: translateY(-100%); } 70%, 100% { transform: translateY(260%); } }
.hv-scroll:hover { color: #fff; }

@media (max-width: 640px) {
  .hv { align-items: flex-end; }
  .hv-inner { padding-bottom: 7.5rem; }
  .hv-actions { flex-direction: column; }
  .hv-actions > * { justify-content: center; width: 100%; }
  .hv-scroll { display: none; }
  /* The mobile bottom bar sits over the last few rem. */
  .hv-controls { bottom: calc(var(--mobile-bar, 4.25rem) + 1rem + env(safe-area-inset-bottom)); }
  .hv-inner { padding-bottom: calc(var(--mobile-bar, 4.25rem) + 5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .hv-scroll-line::after { animation: none; }
}

/* The usual hero as the second section: the header no longer overlays it. */
@media (min-width: 1024px) {
  .ndi-hero--second .hero-layout { padding-top: 4.5rem; }
  .hero.ndi-hero.ndi-hero--second { min-height: clamp(700px, 92svh, 900px); }
}
.ndi-hero--second .hero-layout { padding-top: 4rem; }