:root{
  --navy:#0b1b33;
  --navy2:#10284a;
  --blue:#1f4ea8;
  --blue2:#2f6ad0;
  --white:#ffffff;
  --bg:#e9f0ff;
  --card:#ffffff;
  --stroke: rgba(10,20,40,0.14);
  --muted: rgba(11,18,32,0.72);
  --red:#c8102e;

  --radius: 18px;
  --radius2: 22px;
  --shadow: 0 18px 42px rgba(10,20,40,0.18);
  --shadow2: 0 10px 22px rgba(10,20,40,0.12);

  --max: 1280px;
  --wide: 1440px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background: 
    radial-gradient(1200px 700px at 20% 10%, rgba(37,99,235,.22), transparent 60%),
    radial-gradient(900px 600px at 85% 35%, rgba(236,72,153,.14), transparent 55%),
    linear-gradient(180deg, #0a152b 0%, #081223 50%, #07101f 100%);
  color: #eaf2ff;
  min-height: 100vh;
}

/* Match login + portal pages to the main dark theme */
body[data-page="login"],
body[data-page="portal"]{
  background: radial-gradient(circle at 30% 30%, #2b3a66, #0b1220 60%, #070b14 100%);
  color: #eaf2ff;
}

a{ color: inherit; }

.skip-link{
  position:absolute;
  left: 12px; top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
  font-weight: 900;
  text-decoration:none;
  transform: translateY(-150%);
  transition: transform 160ms ease;
  z-index: 9999;
}
.skip-link:focus{ transform: translateY(0); }

/* HEADER (blue like original vibe) */
.header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(90deg, var(--navy), var(--navy2));
  border-bottom: 3px solid rgba(200,16,46,0.55);
}
.header-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  gap: 14px;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: #fff;
  min-width: 240px;
}
.brand-logo{
  width: 75px;
  height: 75px;
  object-fit: contain;
  margin-right: 10px;
  background: transparent;
}

.brand-mark{
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(200,16,46,0.20);
}
.brand-text{ display:flex; flex-direction:column; line-height: 1.05; }
.brand-title{ font-weight: 950; letter-spacing: 0.2px; }
.brand-subtitle{ font-size: 0.88rem; color: rgba(255,255,255,0.80); font-weight: 650; }

/* Nav */
.nav{
  margin-left:auto;
  display:flex;
  gap: 8px;
  align-items:center;
}
.nav-link{
  color: rgba(255,255,255,0.88);
  text-decoration:none;
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 999px;
  transition: background 160ms ease, color 160ms ease;
}
.nav-link:hover{ background: rgba(255,255,255,0.12); }
.nav-link.is-active{
  background: rgba(255,255,255,0.14);
  box-shadow: inset 0 -3px 0 var(--red);
}

/* Mobile menu */
.menu-btn{
  display:none;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  width: 44px;
  height: 40px;
  border-radius: 14px;
  cursor:pointer;
}
.menu-icon{
  display:block;
  width: 18px;
  height: 2px;
  background: #fff;
  margin: 0 auto;
  border-radius: 2px;
  position: relative;
}
.menu-icon::before,
.menu-icon::after{
  content:"";
  position:absolute;
  left:0;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  
}
.menu-icon::before{ top: -6px; }
.menu-icon::after{ top: 6px; }

/* HERO */
.hero{
  position:relative;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(11,27,51,0.82) 0%, rgba(11,27,51,0.50) 40%, rgba(11,27,51,0.15) 70%, rgba(11,27,51,0.00) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.20)),
    url("assets/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  
  filter: saturate(1.06) contrast(1.03);
}
.hero-inner{
  max-width: var(--max);
  margin: 0 auto;
  position:relative;
  padding: 68px 16px 30px;
  min-height: 620px;
  display:grid;
  grid-template-columns: 2fr 0.7fr;
  gap: 22px;
  align-items:end;
}

.hero-left{ 
  justify-self:start;
  width: 100%;
  max-width: calc(var(--max) * 0.6); /* Relative to container max-width */
}
.hero-strip{
  max-width: 720px;
  padding: 18px 18px 14px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  /* Use calc to position box consistently on left across all screen sizes */
  /* Adjusted to have some spacing from the left edge */
  margin-left: calc(-18vw);
  
}

.tag{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
  font-weight: 850;
}

.hero-title{
  margin-top: 14px;
  font-size: clamp(2.25rem, 4vw, 3.65rem);
  line-height: 1.05;
  letter-spacing: 0.2px;
  color: #fff;
  text-shadow: 0 10px 30px rgba(0,0,0,0.28);
}

.hero-lead{
  margin-top: 12px;
  color: rgba(255,255,255,0.88);
  font-size: 1.05rem;
  line-height: 1.65;
  font-weight: 650;
  max-width: 62ch;
}

.hero-actions{
  margin-top: 18px;
  display:flex;
  flex-wrap:wrap;
  gap: 12px; /* more spacing */
}

/* Buttons: blue primary, red accent only */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 950;
  border: 1px solid transparent;
  transition: transform 160ms ease, filter 160ms ease, background 160ms ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); filter: brightness(1.03); }

.btn-primary{
  background: var(--blue);
  color: #fff;
  border-color: rgba(255,255,255,0.14);
}
.btn-outline{
  background: rgba(255,255,255,0.10);
  color: #fff;
  border-color: rgba(255,255,255,0.26);
}
.btn-secondary{
  width:100%;
  background: var(--blue);
  color:#fff;
}
.btn-secondary:hover{ filter: brightness(1.05); }

.hero-facts{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.fact{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
}
.fact-k{
  font-weight: 900;
  color: rgba(255,255,255,0.88);
  font-size: 0.95rem;
}
.fact-v{
  margin-top: 4px;
  font-weight: 750;
  color: rgba(255,255,255,0.92);
}


.info-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.info-title{
  font-size: 1.2rem;
  font-weight: 950;
  color: var(--navy);
}
.badge{
  font-weight: 950;
  padding: 8px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--red);
  
}
.info-text{
  margin-top: 10px;
  color: rgba(11,18,32,0.78);
  line-height: 1.6;
  font-weight: 650;
}
.info-list{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.info-item{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(11,18,32,0.78);
  font-weight: 650;
  line-height: 1.5;
}
.dot{
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--red);
  flex: 0 0 auto;
}
.info-foot{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(10,20,40,0.10);
}
.social{
  display:inline-block;
  color: var(--blue);
  font-weight: 900;
  text-decoration:none;
}
.social:hover{ text-decoration: underline; }

/* NAVY BAND SECTION (original-site style) */
.band{
  background: linear-gradient(180deg, var(--navy), var(--navy2));
  border-top: 3px solid rgba(200,16,46,0.55);
  border-bottom: 3px solid rgba(200,16,46,0.55);
}
.band-inner{
  max-width: var(--wide);
  margin: 0 auto;
  padding: 28px 16px 80px;
}
.band-head{
  max-width: var(--max);
  margin: 0 auto 42px;
  text-align: center;
}
.section-kicker{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(96,165,250,1);
  margin-bottom: 12px;
}
.band-title{
  color: #fff;
  font-weight: 950;
  font-size: 2.25rem;
  letter-spacing: 0.2px;
  margin-bottom: 12px;
}
.band-sub{
  margin-top: 6px;
  color: rgba(255,255,255,0.82);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* BIG tiles (bigger than before) */
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.tile{
  border-radius: var(--radius2);
  overflow:hidden;
  text-decoration:none;
  color: #0b1220;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 40px rgba(0,0,0,0.26);
  transition: transform 180ms ease, filter 180ms ease;
}
.tile:hover{ transform: translateY(-8px); filter: brightness(1.02); }
.tile-media{
  height: 360px; /* BIG */
  background-size: cover;
  background-position: center;
  position: relative;
}
.tile-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.42));
}
.tile-caption{
  padding: 14px 16px 16px;
}
.tile-title{
  font-weight: 950;
  color: var(--navy);
  font-size: 1.15rem;
}
.tile-text{
  margin-top: 6px;
  color: rgba(11,18,32,0.72);
  font-weight: 650;
  line-height: 1.5;
}

/* images */
.tile-media[data-img="aviation"]{
  background-image: url("assets/styles/aviation.png");
}
.tile-media[data-img="adventure"]{
  background-image: url("assets/styles/adventure.png");
}
.tile-media[data-img="stem"]{
  background-image: url("assets/styles/stem.png");
}
.tile-media[data-img="sports"]{
  background-image: url("assets/styles/sports.png");
}
.tile-media[data-img="camps"]{
  background-image: url("assets/styles/events.png");
}
.tile-media[data-img="contact"]{
  background-image: url("assets/styles/contact.png");
}
.tile-media[data-img="band"]{
  background-image: url("assets/styles/band.png");
}
.tile-media[data-img="drill"]{
  background-image: url("assets/styles/drill.png");
}
.tile-media[data-img="badges"]{
  background-image: url("assets/styles/badges.png");
}

/* Sections */
.section{
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 16px;
}
.section-head{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin-bottom: 14px;
}
.section-title{
  font-size: 1.75rem;
  letter-spacing: 0.2px;
  font-weight: 950;
  color: rgba(255,255,255,0.96) !important;
}
.section-sub{
  color: rgba(255,255,255,0.80) !important;
  font-weight: 650;
  line-height: 1.6;
}

/* Larger screens - fine tune hero strip positioning */
@media (min-width: 1400px){
  .hero-strip{
    margin-left: calc(-15vw);
  }
}

@media (min-width: 1600px){
  .hero-strip{
    margin-left: calc(-13vw);
  }
}

/* Steps */
.steps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

@media (max-width: 768px){
  .steps{
    grid-template-columns: 1fr;
  }
}
.step{
  border-radius: var(--radius2);
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.3) !important;
  padding: 14px;
  display:flex;
  gap: 12px;
  transition: all 0.2s ease;
}
.step:hover{
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(37,99,235,0.4) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4) !important;
}
.step-num{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(37,99,235,0.85) !important;
  color: #fff !important;
  font-weight: 950;
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}
.step-title{ 
  font-weight: 950; 
  color: rgba(255,255,255,0.96) !important; 
}
.step-text{ 
  margin-top: 6px; 
  color: rgba(255,255,255,0.78) !important; 
  font-weight: 650; 
  line-height: 1.55; 
}

.cta-row{
  margin-top: 16px;
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
}

/* Contact */
.contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}

@media (max-width: 768px){
  .contact{
    grid-template-columns: 1fr;
  }
}
.contact-card{
  border-radius: var(--radius2);
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.3) !important;
  padding: 16px;
  transition: all 0.2s ease;
}
.contact-card:hover{
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(37,99,235,0.4) !important;
  transform: translateY(-2px);
}
.contact-title{ 
  font-weight: 950; 
  font-size: 1.15rem; 
  color: rgba(255,255,255,0.96) !important; 
}
.contact-text{ 
  margin-top: 10px; 
  color: rgba(255,255,255,0.78) !important; 
  font-weight: 650; 
  line-height: 1.6; 
}

.contact-email{
  display:inline-block;
  margin-top: 10px;
  color: rgba(96,165,250,1);
  font-weight: 950;
  text-decoration:none;
  
}
.contact-email:hover{ 
  text-decoration: underline;
  color: rgba(147,197,253,1);
}

.contact-row{ margin-top: 12px; display:flex; gap: 10px; flex-wrap:wrap; }
.social-btn{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(96,165,250,0.3);
  background: rgba(37,99,235,0.15);
  color: rgba(255,255,255,0.90);
  transition: all 0.2s ease;
}
.social-btn:hover{
  background: rgba(37,99,235,0.25);
  border-color: rgba(96,165,250,0.5);
}

.map-box{
  margin-top: 12px;
  border-radius: 16px;
  border: 1px dashed rgba(10,20,40,0.28);
  padding: 18px;
  color: rgba(11,18,32,0.70);
  font-weight: 650;
  background: #f7faff;
}

/* Footer (navy like original) */
.footer{
  margin-top: 14px;
  background: linear-gradient(90deg, var(--navy), var(--navy2));
  border-top: 3px solid rgba(200,16,46,0.55);
  color: #fff;
}
.footer-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.footer-brand{
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-logo{
  width: 50px;
  height: 50px;
  object-fit: contain;
}
.footer-brand-text{
  display: flex;
  flex-direction: column;
}
.footer-title{ font-weight: 950; }
.footer-sub{ color: rgba(255,255,255,0.78); font-weight: 650; margin-top: 4px; }

.footer-right{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
}
.footer-link{
  color: rgba(255,255,255,0.88);
  text-decoration:none;
  font-weight: 850;
}
.footer-link:hover{ text-decoration: underline; }

.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.14);
  padding: 10px 16px;
  text-align:center;
  color: rgba(255,255,255,0.76);
  font-weight: 650;
}

/* =========================
   MOBILE / TABLET FIXES
   ========================= */

@media (max-width: 900px){

  /* HERO SECTION */
  .hero{
    padding-top: 10px;
  }

  .hero-inner{
    grid-template-columns: 1fr;      /* stack hero left + right */
    padding: 32px 14px 24px;
    min-height: auto;
    gap: 16px;
    align-items: start;
  }

  .hero-left,
  .hero-right{
    justify-self: center;
    margin: 0 auto;
    width: 100%;
  }

  .hero-strip{
    max-width: 100%;
    padding: 16px;
    margin-left: 0;
  }

  .hero-title{
    font-size: clamp(1.9rem, 6vw, 2.6rem);
    line-height: 1.15;
  }

  .hero-sub{
    font-size: 0.95rem;
  }

  /* BUTTONS */
  .hero-actions{
    flex-wrap: wrap;
    gap: 10px;
  }

  .hero-actions a{
    width: 100%;
    text-align: center;
  }

  /* ACTIVITY ICON BUTTONS */
  .hero-icons{
    gap: 10px;
  }

  .hero-icons a{
    padding: 10px 12px;
    font-size: 0.85rem;
  }

  /* NAV BAR (optional tidy) */
  .nav{
    padding: 10px 14px;
  }

}



@media (max-width: 720px){
  .menu-btn{ display:block; margin-left:auto; }
  .nav{
    position:absolute;
    right: 16px;
    top: 58px;
    display:none;
    flex-direction:column;
    width: min(320px, calc(100vw - 32px));
    background: linear-gradient(180deg, var(--navy), var(--navy2));
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 18px;
    padding: 10px;
    gap: 6px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  }
  .nav.is-open{ display:flex; }
  
  /* Hide search bar in mobile menu */
  .header-search{ display:none !important; }
  
  /* Make nav-links display as column in mobile menu */
  .nav-links{
    display:flex !important;
    flex-direction:column;
    gap: 6px;
    width: 100%;
  }
  
  .nav-btn{
    display:block;
    width: 100%;
    text-align: center;
    padding: 12px 16px;
  }
  
  .grid{ grid-template-columns: 1fr; }
  .tile-media{ height: 360px; }
}

.map-container{
  margin-top: 16px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 10px 28px rgba(0,0,0,0.3);
}

.map-container iframe{
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}

.map-link{
  margin: 10px;
  font-weight: 700;
}

.map-link a{
  color: rgba(96,165,250,1);
  text-decoration: none;
}

.map-link a:hover{
  text-decoration: underline;
  color: rgba(147,197,253,1);
}
/* =======================
   ABOUT US (DROP-IN)
   ======================= */
.about-us{
  padding: 64px 16px;
  background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%);
}

.about-us__container{
  max-width: 1200px;
  margin: 0 auto;
}

.about-us__head{
  max-width: 900px;
}

.about-us__title{
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  letter-spacing: 0.2px;
}

.about-us__lead{
  margin-top: 10px;
  color: rgba(10, 20, 40, 0.72);
  line-height: 1.6;
  font-weight: 600;
}

.about-us__grid{
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.about-us__card{
  background: #ffffff;
  border: 1px solid rgba(10, 20, 40, 0.10);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(10, 20, 40, 0.08);
}

.about-us__card h3{
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.about-us__card p{
  margin: 0;
  color: rgba(10, 20, 40, 0.78);
  line-height: 1.6;
  font-weight: 600;
}

.about-us__muted{
  margin-top: 10px;
  color: rgba(10, 20, 40, 0.60);
}

.about-us__list{
  margin: 0;
  padding-left: 18px;
  color: rgba(10, 20, 40, 0.78);
  line-height: 1.7;
  font-weight: 600;
}

.about-us__card--highlight{
  border-left: 6px solid #c8102e;
}

.about-us__big{
  font-size: 1.05rem;
  margin-top: 2px;
}

.about-us__cta{
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(90deg, #0b1b33 0%, #10284a 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(255,255,255,0.14);
}

.about-us__cta h3{
  margin: 0 0 6px;
}

.about-us__cta p{
  margin: 0;
  color: rgba(255,255,255,0.84);
  line-height: 1.6;
  font-weight: 600;
}

.about-us__ctaBtns{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.about-us__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.about-us__btn--primary{
  background: #1f4ea8;
  color: #fff;
}

.about-us__btn--ghost{
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
}

/* Responsive */
@media (max-width: 980px){
  .about-us__grid{
    grid-template-columns: 1fr;
  }
  .about-us__cta{
    flex-direction: column;
    align-items: stretch;
  }
  .about-us__ctaBtns{
    justify-content: flex-start;
  }
  .about-us__btn{
    width: 100%;
  }
}
/* ===== Header search ===== */
.header-search{
  position: relative;
  max-width: 420px;
  width: min(420px, 40vw);
  margin: 0 18px;
}

.search-wrap{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
}

.search-icon{
  opacity: 0.85;
  font-size: 14px;
}

/* Search input
   - index/about use .search-input
   - login/portal use class="search" + type="search"
   Style both to avoid a white inner field.
*/
.search-input,
.search{
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: 0;
}

.search-input:focus,
.search:focus,
.search-input:active,
.search:active{
  outline: none;
  border: none;
  box-shadow: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Remove default WebKit search decorations */
.search::-webkit-search-decoration,
.search::-webkit-search-cancel-button,
.search::-webkit-search-results-button,
.search::-webkit-search-results-decoration,
.search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-results-button,
.search-input::-webkit-search-results-decoration{
  -webkit-appearance: none;
  display: none;
}

.search-input::placeholder{
  color: rgba(255,255,255,0.70);
}

.search::placeholder{
  color: rgba(255,255,255,0.70);
}

.search-clear{
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  display: none;
}

.search-suggest{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  display: none;
  background: rgba(12,16,28,0.95);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  z-index: 9999;
}

.search-suggest .s-item{
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  color: rgba(255,255,255,0.92);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.search-suggest .s-item:first-child{ border-top: none; }

.search-suggest .s-item:hover,
.search-suggest .s-item.active{
  background: rgba(255,255,255,0.08);
}

.search-suggest .s-title{
  font-weight: 700;
  font-size: 13px;
}

.search-suggest .s-meta{
  font-size: 12px;
  opacity: 0.78;
  margin-top: 2px;
}

.search-suggest .s-tag{
  margin-left: auto;
  font-size: 11px;
  opacity: 0.7;
  align-self: center;
}

/* Mobile: hide search if header gets tight (or make it full width) */
@media (max-width: 820px){
  .header-search{
    width: 100%;
    max-width: none;
    margin: 10px 0 0;
  }
}
/* ===== Back to Top ===== */
.back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(15, 25, 45, 0.85);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
  z-index: 9999;
}

.back-to-top:hover{
  background: rgba(30, 55, 110, 0.92);
}

.back-to-top.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* ===== Header nav: force consistent button styling everywhere ===== */
.site-header .brand { text-decoration: none; color: inherit; }

.site-header .nav-links a{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;
  border-radius: 999px;

  font-weight: 600;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);

  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

/* Apply the same pill/button styling to headers using class="header" */
.header .nav-links{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
}

.header .nav-links a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  text-decoration:none !important;

  padding:10px 14px !important;
  border-radius:999px !important;

  color:#eaf2ff !important;
  background:rgba(255,255,255,0.08) !important;
  border:1px solid rgba(255,255,255,0.14) !important;

  transition:transform 140ms ease, background 140ms ease, border-color 140ms ease !important;
}

.header .nav-links a:hover{
  background:rgba(255,255,255,0.12) !important;
  border-color:rgba(255,255,255,0.22) !important;
  transform:translateY(-1px) !important;
}

.header .nav-links a.is-active{
  background:rgba(255,255,255,0.16) !important;
  border-color:rgba(255,255,255,0.28) !important;
}

.header .nav-links a.nav-btn--primary{
  background:#2563eb !important;
  border-color:rgba(37,99,235,0.45) !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(37,99,235,0.35) !important;
}

/* =======================
   Login / Cadet sign-in
   ======================= */

.auth-wrap{
  max-width: 1100px;
  margin: 120px auto 64px;
  padding: 0 20px;
}

.auth-card{
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 24px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
}

.auth-card h1{
  margin: 0 0 6px;
  font-size: 28px;
  color: #fff;
}

.auth-card p{
  margin: 0 0 18px;
  color: rgba(234,242,255,0.8);
}

.auth-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

.auth-form label{
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 600;
  color: rgba(234,242,255,0.88);
}

.auth-form input,
.auth-form select{
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  color: #fff;
  outline: none;
}

.auth-form input:focus,
.auth-form select:focus{
  border-color: rgba(37,99,235,0.65);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.18);
}

.auth-actions{
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}

.auth-actions .btn{
  border-radius: 999px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: #eaf2ff;
  font-weight: 700;
  cursor: pointer;
}

.auth-actions .btn:hover{
  background: rgba(255,255,255,0.12);
}

@media (max-width: 700px){
  .auth-wrap{ margin-top: 96px; }
  .auth-form{ grid-template-columns: 1fr; }
  .auth-card{ padding: 18px; }
}

.auth-actions .btn-primary{
  background: #2563eb;
  border-color: rgba(37,99,235,0.45);
  color: #fff;
  box-shadow: 0 6px 18px rgba(37,99,235,0.35);
}

.auth-note{
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(234,242,255,0.78);
}

@media (max-width: 720px){
  .auth-form{ grid-template-columns: 1fr; }
  .auth-wrap{ margin-top: 100px; }
}

.site-header .nav-links a:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}

.site-header .nav-links a:active{
  transform: translateY(0);
}

/* Optional: highlight current page link if you add class="active" */
.site-header .nav-links a.active{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.30);
}
.nav-btn {
  padding: 8px 14px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.nav-btn:hover {
  background: rgba(255,255,255,0.12);
}

.nav-btn-primary {
  background: #2563eb;
}

.nav-btn-primary:hover {
  background: #1d4ed8;
}
/* Portal header layout */
.nav-portal {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}

/* Center badge */
.portal-center {
  display: flex;
  justify-content: center;
}

.portal-badge {
  padding: 10px 26px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 6px 18px rgba(37,99,235,0.35);
  letter-spacing: 0.3px;
}
/* ===== FORCE NAV BUTTON LOOK (PATCH) ===== */
.site-header .nav-links{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:nowrap !important;     /* stops wrapping */
}

.site-header .nav-links a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;   /* stops "Contact us" splitting */
  text-decoration:none !important;

  padding:10px 14px !important;
  border-radius:999px !important;

  color:#eaf2ff !important;
  font-weight:800 !important;
  font-size:14px !important;

  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.08) !important;
}

.site-header .nav-links a:hover{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.30) !important;
  transform:translateY(-1px);
}

.site-header .nav-links a.nav-btn{
  border-color: rgba(255,255,255,.28) !important; /* NOT blue */
  background: rgba(255,255,255,.10) !important;
}

/* If your header is too tight, let the middle section shrink */
.site-header .nav-inner{
  display:flex;
  align-items:center;
  gap:16px;
}

.site-header .nav-center{
  flex:1;
  min-width: 180px;
}

/* If still wrapping on smaller screens */
@media (max-width: 980px){
  .site-header .nav-links{
    flex-wrap:wrap !important;     /* allow wrap on small screens only */
    justify-content:center;
  }
}

/* --- Login page form controls (match site theme) --- */
.login-page .form label{
  display: block;
  font-weight: 600;
  color: rgba(255,255,255,.90);
}

.login-page .form input,
.login-page .form select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.95);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.login-page .form input::placeholder{
  color: rgba(255,255,255,.55);
}

.login-page .form input:focus,
.login-page .form select:focus{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.10);
}

.login-page .form select{
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%),
                    linear-gradient(135deg, rgba(255,255,255,.6) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}



/* ===== Header search (global) ===== */
.header-search{ position:relative; min-width: 280px; max-width: 520px; width: 100%; }
.header-search input[type="search"], .header-search input#siteSearch{
  width:100%;
  padding: 10px 14px 10px 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  outline: none;
  backdrop-filter: blur(8px);
}
.header-search input::placeholder{ color: rgba(255,255,255,.55); }
.header-search::before{
  content:"";
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity:.75;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>') center/contain no-repeat;
  color: rgba(255,255,255,.8);
}

/* ===== Search suggestions dropdown ===== */
#suggestBox{
  position:absolute;
  left:0; right:0;
  top: calc(100% + 10px);
  padding: 10px;
  border-radius: 16px;
  background: rgba(10, 20, 35, .92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
  display:none;
  z-index: 60;
}
#suggestBox.open{ display:block; }
#suggestBox .suggest-item{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.92);
  cursor:pointer;
  text-align:left;
}
#suggestBox .suggest-item:hover,
#suggestBox .suggest-item.active{
  background: rgba(255,255,255,.08);
}
#suggestBox .suggest-title{ font-weight: 800; }
#suggestBox .suggest-sub{ font-size: 12px; opacity: .65; }
/* === FIX: make INDEX search look like LOGIN search (single pill) === */

/* Stop the "extra casing" coming from the input itself */
.header-search input[type="search"],
.header-search input#siteSearch,
.header-search .search-input{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,.92) !important;
  -webkit-appearance: none;
  appearance: none;
}

/* If you still have the old pseudo-icon applied, disable it */
.header-search::before{
  content: none !important;
}

/* Because we removed the pseudo-icon padding, make sure the wrapper still looks right */
.header-search .search-wrap{
  padding: 10px 14px !important;
}

/* Keep placeholder consistent */
.header-search .search-input::placeholder,
.header-search input::placeholder{
  color: rgba(255,255,255,.70) !important;
}

/* Optional: remove webkit search decorations */
.header-search input::-webkit-search-decoration,
.header-search input::-webkit-search-cancel-button,
.header-search input::-webkit-search-results-button,
.header-search input::-webkit-search-results-decoration{
  -webkit-appearance: none;
}


/* =========================
   Wide Gallery card (Index)
   ========================= */
.gallery-wide{
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}

.gallery-wide__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.gallery-wide__eyebrow{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
  margin-bottom: 6px;
}

.gallery-wide__title{
  margin: 0 0 6px 0;
  font-size: 26px;
  line-height: 1.15;
}

.gallery-wide__sub{
  margin: 0;
  color: rgba(255,255,255,.78);
  max-width: 62ch;
}

.gallery-wide__actions .btn{
  white-space: nowrap;
}

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.gallery-item{
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
}

.gallery-item::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), transparent 55%);
  opacity: .9;
}

.gallery-item span{
  position:absolute;
  left:12px;
  bottom:10px;
  z-index:1;
  font-weight:700;
  font-size: 12px;
  color: rgba(255,255,255,.82);
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.gallery-wide__foot{
  margin-top: 12px;
}

@media (max-width: 1100px){
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .gallery-wide__head{ flex-direction: column; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}


/* --- Clickable wide gallery card (index) --- */
.gallery-wide.is-clickable{ cursor:pointer; }
.gallery-wide.is-clickable:focus{ outline:2px solid rgba(255,255,255,.28); outline-offset:4px; }
.gallery-wide.is-clickable:hover{ transform: translateY(-1px); }

/* --- Full Gallery page --- */
.gallery-page{
  padding: 34px 22px 60px;
}
.gallery-page .wrap{
  max-width: 1160px;
  margin: 0 auto;
}
.gallery-hero{
  border-radius: 22px;
  padding: 28px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.30);
}
.gallery-hero h1{ margin: 6px 0 8px; font-size: clamp(28px, 4vw, 44px); }
.gallery-hero p{ margin: 0; color: rgba(255,255,255,.78); max-width: 70ch; }
.gallery-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 16px 0 0;
}
.gallery-tabs a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 700;
  color: rgba(255,255,255,.90);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.gallery-tabs a.active{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
}
.gallery-section{
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.gallery-section h2{ margin: 4px 0 10px; font-size: 22px; }
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .gallery-grid{ grid-template-columns: 1fr; }
}
.gallery-tile{
  border-radius: 18px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  aspect-ratio: 16 / 10;
  position: relative;
}
.gallery-tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  opacity: .92;
  transform: scale(1.02);
}
.gallery-tile .cap{
  position:absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10,20,35,.72);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 12px;
  backdrop-filter: blur(10px);
}
.gallery-note{
  margin-top: 10px;
  color: rgba(255,255,255,.72);
  font-size: 14px;
}
/* ===== Gallery preview thumbnails (homepage) ===== */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1100px){
  .gallery-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 650px){
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gallery-item{
  position: relative;
  display: block;
  height: 110px;                 /* box height */
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  text-decoration: none;
}

.gallery-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;             /* keeps image inside box */
  display: block;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.02);
}

.gallery-item span{
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
}

.gallery-item:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
}


/* Gallery preview grid responsive */
.gallery-preview-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

@media (max-width: 900px) {
  .gallery-preview-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .gallery-preview-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .gallery-preview-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}


/* Mobile text improvements */
@media (max-width: 768px) {
  /* Hero section - prevent text overflow */
  .hero-title {
    font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
    line-height: 1.2 !important;
    word-wrap: break-word;
  }
  
  .hero-lead {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }
  
  .hero-strip {
    padding: 12px !important;
  }
  
  .hero-facts {
    gap: 10px;
  }
  
  .fact-k, .fact-v {
    font-size: 0.85rem !important;
  }
  
  /* Section titles */
  .section-title {
    font-size: 1.75rem;
  }
  
  /* Activity tiles - fix cramped text */
  .tile-title {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }
  
  .tile-text {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }
  
  .tile-caption {
    padding: 12px 14px 14px !important;
  }
  
  .tile-media {
    height: 280px !important;
  }
  
  /* Step cards */
  .step-title {
    font-size: 1rem;
  }
  
  .step-text {
    font-size: 0.9rem;
  }
  
  .step {
    padding: 12px !important;
  }
  
  /* Gallery preview */
  .gallery-preview {
    padding: 20px 16px !important;
    margin-top: 32px !important;
  }
  
  .gallery-preview h3 {
    font-size: 22px !important;
  }
  
  .gallery-preview p {
    font-size: 14px !important;
  }
  
  /* Buttons */
  .btn {
    font-size: 0.9rem !important;
    padding: 12px 24px !important;
  }
  
  /* General container padding */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  .section {
    padding: 20px 12px !important;
  }
}

/* Extra small phones */
@media (max-width: 480px) {
  .hero-title {
    font-size: 1.5rem !important;
  }
  
  .tile-media {
    height: 220px !important;
  }
  
  .gallery-preview-grid {
    gap: 10px !important;
  }
}