:root{--bg: #04236b;--bg-2:#07267a;--panel:#0f1d34;--panel-2:#13264a;--text:#edf4ff;--muted:#d7e3ff;--accent:#f3b23b;--accent-2:#4cc9f0;--accent-3:#8b5cf6;--line:rgba(255,255,255,.10);--shadow:0 24px 70px rgba(0,0,0,.34)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,sans-serif;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);color:var(--text)}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.site-header{position:sticky;top:0;z-index:20;background:rgba(16, 57, 145, 0.78);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);box-shadow:0 10px 35px rgba(0,0,0,.2)}.topbar{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;padding:.7rem 1rem;font-size:.86rem;color:var(--muted);border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.03))}.nav{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem}.brand{display:flex;align-items:center;gap:.85rem}.brand__logo{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.28))}.brand__text{display:flex;flex-direction:column;line-height:1.05}.brand__text strong{font-size:1.03rem;letter-spacing:.12em;text-transform:uppercase}.brand__text small{color:var(--muted);font-size:.88rem}.nav__toggle{display:none;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));color:var(--text);padding:.82rem 1rem;border-radius:999px;box-shadow:0 10px 24px rgba(0,0,0,.18)}.nav__links{display:flex;align-items:center;gap:1rem;font-weight:700;color:var(--text)}.nav-item,.nav-link--simple{position:relative}.nav-link{border:0;background:transparent;color:inherit;font:inherit;font-weight:700;padding:.55rem .35rem;cursor:pointer}.nav-link--pill{padding:.75rem 1rem;border-radius:999px;background:linear-gradient(135deg,rgba(76,201,240,.18),rgba(243,178,59,.16));border:1px solid var(--line)}.nav-link--simple{padding:.55rem .35rem}.nav-item{display:flex;align-items:center}.dropdown{position:absolute;top:calc(100% + .6rem);left:0;display:none;min-width:230px;padding:.6rem;background:rgba(10,16,29,.96);border:1px solid var(--line);border-radius:1rem;box-shadow:var(--shadow);backdrop-filter:blur(16px);z-index:30}.dropdown--right{left:auto;right:0}.nav-item--open .dropdown{display:grid}.dropdown a{padding:.7rem .8rem;border-radius:.7rem;color:var(--text);font-weight:600}.dropdown a:hover{background:rgba(223,6,6,.904)}.nav__links a:after,.nav-link--simple:after{content:"";position:absolute;left:.35rem;bottom:.15rem;width:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .25s ease}.nav__links a:hover:after,.nav-link--simple:hover:after{width:calc(100% - .7rem)}.hero{max-width:1180px;margin:0 auto;padding:4.2rem 1.25rem 2rem;display:grid;grid-template-columns:1.05fr .95fr;gap:2.2rem;align-items:center;min-height:calc(100vh - 110px)}.eyebrow,.section__eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2)}.hero h1,.section__heading h2,.cta-panel h2{font-family:"Merriweather",Georgia,serif;line-height:1.02;margin:.9rem 0 1rem;color:var(--text)}.hero__title{font-size:clamp(2.9rem,5.6vw,5.6rem);max-width:7.6ch;letter-spacing:-.05em}.hero__title span{display:block}.hero__title span:nth-child(3){color:#58b8ff}.hero p,.section__heading p,.life-item p,.program-card p,.feature-card p,.cta-panel p{color:var(--muted);line-height:1.8;font-size:1rem}.hero__actions{display:flex;gap:1rem;flex-wrap:wrap;margin:2rem 0}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.95rem 1.35rem;border-radius:999px;font-weight:800;border:1px solid transparent;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.btn:hover{transform:translateY(-2px)}.btn--primary{background:linear-gradient(135deg,var(--accent),#ffd479);color:#161b25;box-shadow:0 14px 30px rgba(243,178,59,.26)}.btn--ghost{border-color:var(--line);background:rgba(255,255,255,.04);color:var(--text)}.hero__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}.stat,.feature-card,.program-card,.life-item,.cta-panel{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(14px)}.stat{padding:1rem 1.1rem;border-radius:1.2rem}.stat strong,.contact-grid strong{display:block;font-size:1rem;margin-bottom:.35rem;color:var(--text)}.stat span,.contact-grid span{color:var(--muted);font-size:.92rem}.hero__visual{position:relative;min-height:560px}.hero__card{border-radius:2rem;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}.hero__card--main{position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}.hero__image{width:100%;height:100%;object-fit:cover}.hero__card--floating{position:absolute;right:-1rem;bottom:1.5rem;display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;border-radius:1.4rem;background:rgba(8,16,29,.88);max-width:320px;border:1px solid var(--line)}.hero__badge{width:60px;height:60px;object-fit:contain}.hero__card--floating p{margin:.2rem 0 0;color:var(--muted);font-size:.9rem}.section{max-width:1180px;margin:0 auto;padding:4.5rem 1.25rem}.section__heading{max-width:760px;margin-bottom:2rem}.section__heading--left{margin-left:0}.section__heading h2,.cta-panel h2{font-size:clamp(1.9rem,3.4vw,3rem);letter-spacing:-.03em}.feature-grid,.cards-grid,.life-grid{display:grid;gap:1.1rem}.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.life-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.feature-card,.program-card,.life-item{border-radius:1.35rem;padding:1.3rem}.feature-card h3,.program-card h3,.life-item h3{margin:.4rem 0 .8rem;font-size:1.15rem}.program-card__index{display:inline-flex;width:2.3rem;height:2.3rem;border-radius:.8rem;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(243,178,59,.18),rgba(76,201,240,.16));color:var(--accent);font-weight:800;margin-bottom:1rem}.section--highlight{padding-top:2rem}.gallery-showcase{padding-top:1rem}.slideshow {
  position: relative;
  border-radius: 2rem;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  padding: 1rem;
}
.slideshow {
  position: relative;
  max-width: 980px;
  margin: 2rem auto;
  border-radius: 2.5rem;
  overflow: hidden;
  padding: 1.25rem;
  background: rgba(15, 29, 52, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 30px 60px rgba(0, 0, 0, 0.4),
    0 0 80px rgba(76, 201, 240, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  transform: perspective(1200px) rotateX(3deg);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.6s ease;
}

.slideshow:hover {
  transform: perspective(1200px) rotateX(0deg) translateY(-10px);
  box-shadow: 
    0 40px 80px rgba(0, 0, 0, 0.5),
    0 0 120px rgba(76, 201, 240, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.slideshow__viewport {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 1.8rem;
  overflow: hidden;
  background: #050a12;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.9), 0 15px 35px rgba(0,0,0,0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.15) rotateY(12deg);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
  padding: 0;
}

.slide.is-active {
  opacity: 1;
  transform: scale(1) rotateY(0deg);
  pointer-events: auto;
  z-index: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: transparent;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6));
}

.slideshow__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.8rem;
  height: 3.8rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 3;
  display: grid;
  place-items: center;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.slideshow__btn:hover {
  background: var(--accent-2);
  color: #000;
  transform: translateY(-50%) scale(1.15);
  box-shadow: 0 0 35px var(--accent-2);
  border-color: transparent;
}

.slideshow__btn--prev {
  left: 1.5rem;
}

.slideshow__btn--next {
  right: 1.5rem;
}

.slideshow__dots {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.8rem;
  z-index: 3;
  padding: 0.7rem 1.4rem;
  background: rgba(0,0,0,0.5);
  border-radius: 999px;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.slideshow__dots button {
  width: 2.2rem;
  height: 0.4rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  padding: 0;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.slideshow__dots button:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: scaleY(1.2);
}

.slideshow__dots button.is-active {
  background: var(--accent-2);
  width: 4rem;
  box-shadow: 0 0 18px var(--accent-2);
}

.section--cta {
  padding-bottom: 5.5rem;
}

.cta-panel {
  border-radius: 2rem;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1.5rem;
}

.contact-grid {
  display: grid;
  gap: 1rem;
}

.contact-grid div {
  padding: 1rem 1.05rem;
  border-radius: 1rem;
  background: rgba(233, 34, 34, 0.04);
  border: 1px solid var(--line);
}

.site-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 2px solid var(--line);
}

.site-footer strong {
  color: var(--text);
}

/* --- Responsive Media Queries --- */

@media (max-width: 980px) {
  .hero,
  .cta-panel {
    grid-template-columns: 1fr;
  }
  
  .hero {
    padding-top: 2rem;
  }
  
  .hero__visual {
    min-height: 420px;
  }
  
  /* .slideshow__viewport min-height removed */
  
  .feature-grid,
  .cards-grid,
  .life-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .site-footer {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .nav {
    flex-wrap: wrap;
  }
  
  .nav__toggle {
    display: inline-flex;
  }
  
  .nav__links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 0 0;
  }
  
  .nav__links--open {
    display: flex;
  }
  
  .nav-item {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .dropdown {
    position: static;
    display: none;
    width: 100%;
    margin-top: 0.5rem;
  }
  
  .nav-item--open .dropdown {
    display: grid;
  }
  
  .hero__stats,
  .feature-grid,
  .cards-grid,
  .life-grid {
    grid-template-columns: 1fr;
  }
  
  .hero {
    padding-top: 1rem;
  }
  
  .hero__visual {
    min-height: 360px;
  }
  
  .hero__card--floating {
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
  
  /* .slideshow__viewport min-height removed */
  
  .slideshow__btn {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.4rem;
  }
  
  .topbar {
    display: none;
  }
  
  .site-footer {
    font-size: 0.95rem;
  }
}
.video-stage {
  width: 60%;
  max-width: 1140px;      /* Keeps the elegant boundary aligned with your layout grid */
  margin: 3rem auto 0 auto;
  perspective: 1200px;    /* Preserves the premium 3D depth backdrop */
}

.video-3d-card {
  position: relative;
  width: 60%;
  border-radius: 2rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #071530;
  
  /* Retains the clean 3D tilting baseline perspective plane */
  transform: rotateX(6deg) translateY(5px);
  transform-style: preserve-3d;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.4),
    0 30px 60px rgba(4, 35, 107, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.6s ease;
}

.documentary-video {
  display: block;
  width: 100%;
  height: auto;           /* CRITICAL: Allows height to adapt automatically to the video file */
  max-height: 75vh;       /* Prevents vertical videos from overflowing down past your screen */
  object-fit: contain;    /* Prevents any pixel distortion or squishing */
  background: #000;       /* Adds clean presentation borders if needed */
  z-index: 1;
}

/* --- 3D CINEMATIC VIDEO SECTION STYLES --- */

/* Subtle glassmorphism ambient light reflection overlay layer */
.video-3d-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.08) 0%, 
    rgba(255, 255, 255, 0) 50%, 
    rgba(0, 0, 0, 0.15) 100%
  );
  transition: opacity 0.5s ease;
}

/* --- Interactive Hover Effects --- */

/* On hovering the video container, it glides forward up the 3D plane */
.video-stage:hover .video-3d-card {
  transform: rotateX(0deg) translateY(-8px) scale(1.02);
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.5),
    0 40px 80px rgba(88, 184, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.video-stage:hover .video-3d-overlay {
  opacity: 0.4;
}

/* Mobile Responsiveness adjustment */
@media (max-width: 720px) {
  .video-3d-card {
    /* Flatten 3D angles slightly on smaller display viewport ratios */
    transform: rotateX(3deg) translateY(0);
    border-radius: 1.25rem;
  }
  .video-stage:hover .video-3d-card {
    transform: rotateX(0deg) translateY(-3px) scale(1.01);
  }

  /* Insane Slideshow Mobile Fixes */
  .slideshow {
    padding: 0.75rem;
    border-radius: 1.5rem;
    transform: perspective(1000px) rotateX(0deg); /* Flatten on mobile for clarity */
    margin: 1rem 0;
  }
  .slideshow:hover {
    transform: perspective(1000px) rotateX(0deg) translateY(-2px);
  }
  .slideshow__viewport {
    aspect-ratio: 1 / 1; /* Taller ratio for posters so they aren't tiny */
    border-radius: 1rem;
  }
  .slideshow__btn {
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.2rem;
  }
  .slideshow__btn--prev { left: 0.5rem; }
  .slideshow__btn--next { right: 0.5rem; }
  .slideshow__dots {
    bottom: 0.8rem;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
  }
  .slideshow__dots button {
    width: 1.5rem;
  }
  .slideshow__dots button.is-active {
    width: 2.5rem;
  }
}