/* ==========================================================================
   GLOBAL TOKENS & RESET
   ========================================================================== */
:root{
  --nav-h: 54px;
  --glass-bg: rgba(255,255,255,0.10);
  --glass-stroke: rgba(255,255,255,0.22);
  --text: #ffffff;
  --page-max: 1000px;
  --page-pad: 0px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior: smooth; }
html, body{ margin:0; padding:0; width:100%; height:100%; overflow-x:hidden; }

body{
  font-family: "Exo", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue";
  color: var(--text);
  /* Fixed gradient background, covers full viewport height */
  background: linear-gradient(65deg, #325081 0%, #7d2f2f 100%) fixed no-repeat;
  background-size: cover;
  min-height: 100vh;
  display: flex; flex-direction: column;
  line-height: 1.4;
}

/* When the mobile menu is open, prevent background scrolling */
body.menu-open{ overflow: hidden; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

/* === Local fonts ========================================================= */
/* Self-hosted Exo with swap to avoid FOIT */
@font-face{
  font-family: "Exo";
  src: url("content/fonts/Exo-Regular.woff2") format("woff2"),
       url("content/fonts/Exo-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Exo";
  src: url("content/fonts/Exo-Bold.woff2") format("woff2"),
       url("content/fonts/Exo-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h);
  background:var(--glass-bg);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--glass-stroke);
  z-index:1000;
}

.nav-inner{
  max-width: var(--page-max);
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--page-pad);
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:16px;
}

/* Brand (logo + wordmark text) */
.brand{ justify-self:start; display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text); height:100%; padding:4px 6px; }

.logo-img{ height:35px; width:auto; object-fit:contain; display:block; }

/* Wordmark text replacing a secondary logo */
.brand-text{
  display:block;
  position:relative;
  top:6px;
  margin-left:-6px;
  font-weight:500; /* 400=regular, 500=medium, 700=bold */
  font-size:20px;
  line-height:1;
  white-space:nowrap;
  user-select:none;
}

.nav-center{ grid-column:2; display:flex; justify-content:center; }
.nav-center .nav-list{ display:flex; gap:28px; list-style:none; margin:0; padding:0; }

.nav-actions{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:12px; }

.navlink{ color:var(--text); text-decoration:none; padding:4px 6px; border-radius:6px; font-size:17px; }
.navlink:hover{ background:rgba(255,255,255,.12); }

.navlink.nav-icon{ display:flex; align-items:center; padding:4px; }
.nav-icon img{ width:30px; height:30px; display:block; filter:brightness(0) invert(1); transition:transform .2s ease, opacity .2s ease; }
.nav-icon img:hover{ transform:scale(1.1); opacity:.85; }

/* Keyboard focus visibility */
.navlink:focus-visible,
.nav-toggle-label:focus-visible {
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 2px;
  border-radius: 6px;
}

.spacer{ height: var(--nav-h); }

/* ==========================================================================
   MOBILE NAVBAR
   - Checkbox-driven; menu scales open.
   - We keep the checkbox in the DOM but visually hidden.
   ========================================================================== */
.nav-toggle, .nav-toggle-label, .nav-menu{ display:none; }

@media (max-width:640px){
  .nav-center, .nav-actions{ display:none; }
  .nav-inner{ grid-template-columns:auto 1fr auto; padding:0 12px; }

  .nav-toggle{ position:absolute; opacity:0; pointer-events:none; }
  .nav-toggle-label{
    grid-column:3; justify-self:end;
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    width:44px; height:44px; cursor:pointer; border-radius:10px;
    background:rgba(255,255,255,.12); border:1px solid var(--glass-stroke);
  }
  .nav-toggle-label span{ display:block; width:22px; height:2px; margin:0 auto; background:#fff; border-radius:2px; }

  .nav-menu{
    display:block;
    position:fixed;
    top:var(--nav-h); left:0; right:0;
    background: rgba(20,28,40,0.50);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top:1px solid var(--glass-stroke);
    z-index:999;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
    transition: transform .28s ease, opacity .28s ease;
  }
  .nav-inner > .nav-toggle:checked ~ .nav-menu{
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-menu-inner{
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 16px var(--page-pad);
  }

  .nav-menu .nav-list{
    flex-direction:column;
    gap:12px;
    align-items:center;
    justify-content:center;
    list-style:none; margin:0; padding:0;
    text-align:center;
  }
  .nav-menu .nav-list li{ width:100%; display:flex; justify-content:center; }
  .nav-menu .navlink{ padding:10px 12px; font-size:16px; }

  .nav-menu .nav-icon img{
    width:28px; height:28px;
    margin:6px auto 0;
    filter:brightness(0) invert(1);
  }
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
section{
  min-height: 73vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:24px 20px;
  scroll-margin-top: var(--nav-h);
}
#main { min-height: 90vh; } /* Hero is full-height-ish */

.content{ max-width:800px; margin-inline:auto; }

h1{ font-size:clamp(32px,6vw,56px); margin:0 0 20px; }
h2{ font-size:clamp(24px,5vw,42px); margin:0 0 18px; }
p { line-height:1.6; font-size:clamp(16px,2vw,18px); margin: 0 0 12px; }

@media (max-width:640px){
  section{ min-height: 64vh; padding:18px 16px; }
}

/* Contact is intentionally compact */
#contact{
  min-height: 0vh;
  padding: 10px 10px;
  display:block;
}

/* Error card for partial load failures */
.error{
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.3);
  border-radius:10px; padding:12px;
  max-width: 800px; margin: 12px auto;
}

/* ==========================================================================
   SOCIAL ICON ROW (legacy pattern)
   - Keep for backward-compat with existing partials.
   ========================================================================== */
.social-links{
  display:flex; gap:30px; justify-content:center; align-items:center;
  margin-top: 28px; flex-wrap:wrap;
}
.social-links a{
  display:flex; flex-direction:column; align-items:center; text-decoration:none;
  color:var(--text); font-size:16px; transition: transform .2s ease, color .2s ease;
}
.social-links a:hover{ transform: translateY(-5px); color: #ffcc66; }
.social-links img{ width:40px; height:40px; object-fit:contain; display:block; }

@media (max-width:640px){
  .social-links{ gap:18px; }
  .social-links img{ width:34px; height:34px; }
  .social-links a{ font-size:14px; }
}

/* ==========================================================================
   TEAM / ABOUT
   ========================================================================== */
.about-wrap{
  max-width:1000px; margin:0 auto; padding:60px 20px; text-align:center;
}
.about-lead{
  max-width:800px; margin:0 auto 40px; font-size:clamp(15px,2.2vw,18px);
  line-height:1.6; opacity:.9;
}
.team-panel{
  max-width:900px; margin:0 auto; padding:24px 16px;
  display:flex; flex-direction:column; row-gap:28px;
}

.member{
  display:grid; grid-template-columns: minmax(260px,1fr) 80px 90px;
  align-items:center; column-gap:22px;
}
.member-text{ text-align: left; }
.member-name{ font-size:clamp(18px,2.6vw,22px); font-weight:600; }
.member-role{ font-size:clamp(14px,2vw,16px); opacity:.85; margin-top:4px; }
.avatar{
  width:72px; height:72px; border-radius:50%;
  object-fit:cover; display:block; justify-self:center; border:none;
}
.social{
  display:flex; gap:12px; justify-self:start; align-items:center; min-width:70px;
}
.social img{
  width:26px; height:26px; object-fit:contain; display:block;
  opacity:.9; transition: transform .15s ease, opacity .15s ease;
}
.social a:hover img{ transform: translateY(-2px) scale(1.05); opacity:1; }

@media (max-width: 640px){
  .member{ grid-template-columns: 1fr; row-gap: 10px; }
  .avatar{ justify-self: center; }
  .social{ justify-self: center; justify-content: center; }
  .member-text{ text-align: center; }
}

/* ==========================================================================
   PARTNER BANNER
   ========================================================================== */
.partner-title{
  font-size:1.6rem; font-weight:500; color:#fff; margin:0 0 12px; text-align:center;
}
.partner-banner{
  text-align:center; padding: 32px 0;
  background:transparent; scroll-margin-top: var(--nav-h);
}
.partner-banner img{
  max-height:60px; width:auto; display:block; margin:0 auto; object-fit:contain;
  transition: transform .25s ease, opacity .25s ease; cursor:pointer;
}
.partner-banner img:hover{ transform: scale(1.08); opacity:.9; }

@media (max-width:640px){
  .partner-title{ font-size:1rem; }
  .partner-banner{ padding: 20px 0; }
  .partner-banner img{ max-height:40px; }
}

/* ==========================================================================
   LEGAL CARD
   ========================================================================== */
.card{
  width:min(900px,100%); background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.25); border-radius:14px;
  padding:24px; line-height:1.6; box-shadow:0 10px 30px rgba(0,0,0,.2);
  text-align:left;
}
.card h1{ text-align:center; }
@media (max-width:640px){ .card{ padding:18px; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{ margin-top:auto; }
.footer-links{ padding:16px 20px; display:flex; justify-content:center; gap:22px; flex-wrap:nowrap; overflow-x:auto; }
.footer-links a{ color:#fff; text-decoration:none; white-space:nowrap; }
.footer-links a:hover{ text-decoration:underline; }
.footer-rule{ width:100%; height:1px; border:0; margin:0; background:rgba(255,255,255,.75); }
.footer-bottom{ background:rgba(0,0,0,.25); text-align:center; padding:14px 12px; font-size:14px; }

/* ==========================================================================
   UTILITIES & ANIMATIONS
   ========================================================================== */
.visually-hidden{
  position:absolute !important; clip:rect(1px,1px,1px,1px);
  padding:0 !important; border:0 !important; height:1px !important; width:1px !important;
  overflow:hidden;
}

/* Fade-up animation: triggered once when JS adds .reveal */
@keyframes fadeUp{
  0%{ opacity:0; transform:translateY(40px); }
  100%{ opacity:1; transform:translateY(0); }
}
.fade-up{
  opacity:0;
  transform: translateY(40px);
}
.fade-up.reveal{
  animation: fadeUp 1s ease-out forwards;
}
.fade-up.reveal.delay{ animation-delay: .5s; }
.fade-up.reveal.delay2 { animation-delay: 1s; }

/* Larger paragraph sizing for the Vision copy */
.vision-text {
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto 22px auto;
}
.vision-text:last-of-type { margin-bottom: 0; }

/* Vision feature cards (glassy style) */
.vision-boxes {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.vision-card {
  flex: 1 1 250px;
  max-width: 300px;
  padding: 24px;
  border-radius: 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform .25s ease, background .25s ease;
}
.vision-card:hover { transform: translateY(-6px); background: rgba(255,255,255,0.12); }
.vision-card h3 { margin: 0 0 12px; font-size: 1.4rem; }
.vision-card p { margin: 0; font-size: 1rem; opacity: 0.9; }

/* Accent links (blue) with accessible hover contrast */
.highlight-link {
  color: #3399FF;
  text-decoration: none;
  font-weight: 600;
  transition: color .2s ease;
}
.highlight-link:hover {
  color: #66BFFF;
  text-decoration: underline;
}

/* ==========================================================================
   CONTACT (tight grid)
   ========================================================================== */
.contact-layout{
  display:grid;
  grid-template-columns: repeat(3, auto);
  justify-content:center;
  justify-items:center;
  row-gap:60px;
  column-gap:36px;
  margin-top:28px;
  text-align:center;
}

/* Mail centered in the first row */
.contact-mail{ grid-column:2; }
.contact-mail a{
  display:flex; flex-direction:column; align-items:center;
  text-decoration:none; color:var(--text); font-size:16px;
  transition: transform .2s ease, color .2s ease;
}
.contact-mail a:hover{ transform: translateY(-5px); color:#ffcc66; }
.contact-mail img{ width:50px; height:50px; object-fit:contain; margin-bottom:8px; }

/* Socials centered in the second row */
.contact-socials{
  grid-column: 1 / -1;  
  display:flex;
  justify-content:center;
  gap:36px;
  flex-wrap:wrap;
}
.contact-socials a{
  display:flex; flex-direction:column; align-items:center;
  text-decoration:none; color:var(--text); font-size:16px;
  transition: transform .2s ease, color .2s ease;
}
.contact-socials a:hover{ transform: translateY(-5px); color:#ffcc66; }
.contact-socials img{ width:40px; height:40px; object-fit:contain; margin-bottom:6px; }

@media (max-width:640px){
  .contact-layout{ column-gap:26px; }
  .contact-socials img{ width:34px; height:34px; }
  .contact-mail img{ width:44px; height:44px; }
}