:root{
  --bg: #07112a;
  --surface: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.09);
  --text: #eef3ff;
  --muted: rgba(238,243,255,.72);
  --blue: #1f7aff;
  --blue-2: #0b4bb8;
  --yellow: #ffd34a;
  --yellow-2: #ffbb00;
  --stroke: rgba(255,255,255,.14);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 18px;
  --radius-2: 26px;
  --container: 1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% 5%, rgba(31,122,255,.22), transparent 55%),
              radial-gradient(1200px 800px at 80% 15%, rgba(255,211,74,.18), transparent 55%),
              linear-gradient(180deg, #050a18, var(--bg));
  line-height:1.55;
}

a{color:inherit; text-underline-offset:4px}
img{max-width:100%; height:auto}

.container{width:min(var(--container), calc(100% - 40px)); margin-inline:auto}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:12px; top:12px; z-index:1000;
  padding:10px 12px; border-radius:12px;
  background: rgba(0,0,0,.7); border:1px solid var(--stroke);
  transform: translateY(-200%); transition: transform .2s ease;
}
.skip-link:focus{transform:translateY(0)}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(5,10,24,.5);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header[data-elevated="true"]{box-shadow: 0 10px 40px rgba(0,0,0,.25)}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex; gap:12px; align-items:center; text-decoration:none}
.brand-logo{width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12)}
.brand-name{display:block; font-weight:800; letter-spacing:.5px}
.brand-sub{display:block; color:var(--muted); font-weight:600; font-size:12px; margin-top:1px}

.nav{display:flex; align-items:center; gap:14px}
.nav-menu{
  display:flex; align-items:center; gap:14px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}
.nav-menu a{
  text-decoration:none;
  padding:8px 10px;
  border-radius:999px;
  color: rgba(238,243,255,.86);
  font-weight:650;
  font-size:14px;
}
.nav-menu a:hover{background: rgba(255,255,255,.07)}
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
}
.nav-toggle-lines{
  width:18px; height:12px; position:relative; display:block;
}
.nav-toggle-lines::before,
.nav-toggle-lines::after{
  content:"";
  position:absolute; left:0; right:0;
  height:2px; background: rgba(255,255,255,.85);
  border-radius:999px;
}
.nav-toggle-lines::before{top:0}
.nav-toggle-lines::after{bottom:0}

/* Hero */
.hero{position:relative; padding:72px 0 36px; overflow:hidden}
.hero-bg{
  position:absolute; inset:-60px 0 -40px;
  background:
    radial-gradient(900px 520px at 8% 30%, rgba(31,122,255,.35), transparent 60%),
    radial-gradient(900px 520px at 85% 10%, rgba(255,211,74,.26), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 65%);
  pointer-events:none;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.35fr .85fr;
  gap:28px;
  position:relative;
}
.eyebrow{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,211,74,.12);
  border:1px solid rgba(255,211,74,.22);
  color: rgba(255,245,215,.96);
  font-weight:650;
  margin:0 0 14px;
}
.hero-title{
  font-size: clamp(32px, 4vw, 52px);
  line-height:1.05;
  margin:0 0 14px;
  letter-spacing:-.5px;
}
.hero-title-accent{
  display:block;
  margin-top:10px;
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight:700;
  color: rgba(238,243,255,.88);
}
.hero-lead{
  margin:0 0 18px;
  color: rgba(238,243,255,.78);
  font-size: 16.5px;
  max-width: 62ch;
}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px}

.hero-badges{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
.badge{
  padding:12px 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  min-width:0;
}
.badge-email{
  grid-column: 1 / -1;
}
.badge-k{display:block; color: rgba(238,243,255,.70); font-weight:650; font-size:12px}
.badge-v{
  display:block;
  margin-top:6px;
  font-weight:750;
  font-size:14px;
  line-height:1.4;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.badge-v-link{
  color: rgba(255,255,255,.94);
  text-decoration:none;
}
.badge-v-link:hover{text-decoration:underline}
.badge-email .badge-v{
  font-size: clamp(12px, 2.8vw, 14px);
}

.hero-card .card{
  border-radius: var(--radius-2);
  padding:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}
.card-top{padding:6px 6px 14px}
.card-title{margin:0; font-size:18px}
.card-sub{margin:6px 0 0; color: rgba(238,243,255,.70)}
.org-dl{margin:0; padding:0 6px; display:grid; gap:12px}
.org-dl dt{font-weight:700; color: rgba(238,243,255,.72); font-size:12px; letter-spacing:.2px}
.org-dl dd{margin:6px 0 0; font-weight:750; color: rgba(255,255,255,.94)}
.card-actions{display:flex; gap:10px; padding:16px 6px 4px; flex-wrap:wrap; align-items:center}

/* Sections */
.section{padding:56px 0}
.section-alt{
  background:
    radial-gradient(900px 480px at 0% 10%, rgba(31,122,255,.18), transparent 60%),
    radial-gradient(900px 480px at 90% 70%, rgba(255,211,74,.12), transparent 60%),
    rgba(255,255,255,.02);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.section-head{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  margin-bottom:22px;
}
.section-head h2{margin:0; font-size:28px; letter-spacing:-.3px}
.section-head p{margin:0; color: rgba(238,243,255,.78); max-width: 88ch}

.grid-3{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px}
.grid-2{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px}
.panel{
  padding:18px;
  border-radius: var(--radius-2);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}
.panel h3{margin:0 0 10px}
.panel p{margin:0; color: rgba(238,243,255,.78)}
.panel-cta{display:flex; flex-direction:column; gap:10px}

.checklist{margin:0; padding-left:18px; color: rgba(238,243,255,.80)}
.checklist li{margin:8px 0}

.cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
}
.program{
  padding:18px;
  border-radius: var(--radius-2);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
}
.program-icon{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:16px;
  background: rgba(255,211,74,.12);
  border:1px solid rgba(255,211,74,.22);
  margin-bottom:12px;
  font-size:18px;
}
.program h3{margin:0 0 8px}
.program p{margin:0; color: rgba(238,243,255,.78)}
.program-meta{margin-top:10px; color: rgba(238,243,255,.64); font-weight:650; font-size:13px}

/* Stats */
.stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
  margin:18px 0 22px;
}
.stat{
  padding:18px;
  border-radius: var(--radius-2);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}
.stat-num{
  font-size: 34px;
  font-weight: 900;
  letter-spacing:-.4px;
  color: rgba(255,255,255,.96);
}
.stat-label{margin-top:6px; color: rgba(238,243,255,.72); font-weight:650}

.story{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap:14px;
  align-items:stretch;
}
.story-media{
  border-radius: var(--radius-2);
  border:1px solid rgba(255,255,255,.12);
  min-height: 280px;
  position:relative;
  overflow:hidden;
  background: linear-gradient(135deg, rgba(31,122,255,.22), rgba(255,211,74,.14));
}
.story-img{
  width:100%;
  height:100%;
  min-height:280px;
  object-fit:cover;
  display:block;
}
.story-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,10,24,.12), rgba(5,10,24,.45));
  pointer-events:none;
}
.story-copy{
  padding:18px;
  border-radius: var(--radius-2);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}
.story-copy h3{margin:0 0 10px}
.story-copy p{margin:0; color: rgba(238,243,255,.78)}
.story-note{margin-top:10px; color: rgba(238,243,255,.62); font-size:13px}

/* Highlights (photo cards) */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
.gallery-card{
  border-radius: var(--radius-2);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.gallery-img{
  width:100%;
  height: 210px;
  object-fit: cover;
  display:block;
}
.gallery-body{
  padding:16px;
}
.gallery-body h3{margin:0 0 8px; font-size:16px}
.gallery-body p{margin:0; color: rgba(238,243,255,.78)}

/* Contact */
.contact{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.contact-info-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
.contact-card{
  padding:18px;
  border-radius: var(--radius-2);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}
.contact-card h3{margin:0 0 10px}
.contact-line{margin:10px 0; color: rgba(238,243,255,.78)}
.contact-note{margin:10px 0 0}
.muted{color: rgba(238,243,255,.70)}
.small{font-size:12px}

.contact-map-block{
  padding:18px;
  border-radius: var(--radius-2);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}
.contact-map-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.contact-map-head h3{margin:0 0 6px}
.contact-map-head p{margin:0}

.map-embed{
  border-radius: var(--radius-2);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  width:100%;
}
.map-embed iframe{
  display:block;
  width:100%;
  height: clamp(280px, 42vw, 420px);
  border:0;
}

/* Blog */
.blog-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  margin-bottom:16px;
  align-items:stretch;
}
.blog-card{
  border-radius: var(--radius-2);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
  height:100%;
}
.blog-img{
  width:100%;
  height: 205px;
  flex-shrink:0;
  object-fit: cover;
  display:block;
}
.blog-body{
  padding:16px;
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
.blog-body h3{margin:0 0 8px; font-size:16px}
.blog-body p{
  margin:0;
  color: rgba(238,243,255,.78);
  flex:1;
}
.btn-blog{
  margin-top:auto;
  align-self:flex-start;
}

.blog-posts{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
.blog-post{
  padding:18px;
  border-radius: var(--radius-2);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}
.blog-post h3{margin:0 0 10px}
.blog-post p{margin:0 0 10px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-radius: 14px;
  border:1px solid transparent;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.1px;
  transition: transform .08s ease, background .18s ease, border-color .18s ease;
  user-select:none;
}
.btn:active{transform: translateY(1px)}
.btn-primary{
  background: linear-gradient(135deg, var(--yellow), var(--yellow-2));
  border-color: rgba(255,211,74,.35);
  color:#1a1a1a;
}
.btn-primary:hover{background: linear-gradient(135deg, #ffe07a, var(--yellow-2))}
.btn-secondary{
  background: linear-gradient(135deg, rgba(31,122,255,.96), rgba(11,75,184,.96));
  border-color: rgba(31,122,255,.45);
  color: #ffffff;
}
.btn-secondary:hover{background: linear-gradient(135deg, rgba(56,145,255,.98), rgba(11,75,184,.98))}
.btn-ghost{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.94);
}
.btn-ghost:hover{background: rgba(255,255,255,.09)}
.btn-link{
  padding:10px 0;
  background:transparent;
  border-color:transparent;
  color: rgba(255,255,255,.85);
}
.btn-link:hover{text-decoration: underline}

/* Footer (site-footer) */
.site-footer{
  padding:56px 0 24px;
  border-top:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(1200px 420px at 8% 0%, rgba(31,122,255,.22), transparent 58%),
    radial-gradient(900px 360px at 92% 15%, rgba(255,211,74,.16), transparent 58%),
    linear-gradient(180deg, #0a1430, #060d1f);
}
.footer-top{
  display:grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
  gap:36px;
  align-items:start;
}
.footer-brand-block{max-width: 36ch}
.footer-logo-lg{
  width:56px;
  height:56px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.footer-tagline{
  margin:14px 0 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style:italic;
  font-size: clamp(18px, 2.2vw, 22px);
  color: rgba(255,255,255,.92);
  line-height:1.35;
}
.footer-desc{
  margin:12px 0 0;
  color: rgba(238,243,255,.72);
  line-height:1.55;
  font-size:14px;
}
.footer-social{
  margin-top:20px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.social-btn{
  width:38px;
  height:38px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
  text-decoration:none;
  transition: background .18s ease, transform .08s ease;
}
.social-btn:hover{
  background: rgba(255,255,255,.12);
  color:#fff;
}
.social-btn svg{width:18px; height:18px}
.footer-columns{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:28px;
}
.footer-col-title{
  margin:0 0 14px;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(255,255,255,.95);
  font-weight:800;
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.footer-links a{
  display:block;
  text-decoration:none;
  color: rgba(238,243,255,.78);
  padding:8px 0;
  font-weight:650;
  font-size:14px;
}
.footer-links a:hover{
  color: rgba(255,255,255,.96);
  text-decoration:underline;
}
.footer-contact-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.footer-contact-list li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  color: rgba(238,243,255,.82);
  font-size:14px;
  line-height:1.45;
  font-weight:650;
}
.footer-contact-list a{
  color: rgba(238,243,255,.86);
  text-decoration:none;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.footer-contact-list a:hover{text-decoration:underline; color:#fff}
.footer-icon{
  flex-shrink:0;
  width:22px;
  height:22px;
  margin-top:2px;
  color: rgba(255,211,74,.9);
}
.footer-icon svg{width:22px; height:22px; display:block}
.footer-bottom{
  margin-top:28px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:18px;
}
.footer-bottom-left,
.footer-bottom-right{
  line-height:1.45;
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr; gap:18px}
  .hero-badges{grid-template-columns: 1fr; }
  .grid-3{grid-template-columns: 1fr}
  .cards{grid-template-columns: 1fr}
  .stats{grid-template-columns: repeat(2, minmax(0,1fr))}
  .story{grid-template-columns: 1fr}
  .contact-info-grid{grid-template-columns: 1fr}
  .gallery-grid{grid-template-columns: 1fr}
  .blog-grid{grid-template-columns: 1fr}
  .footer-top{grid-template-columns: 1fr}
  .footer-columns{grid-template-columns: 1fr}
  .footer-bottom{flex-direction:column; align-items:flex-start}
}

@media (max-width: 760px){
  .nav-toggle{display:inline-flex}
  .nav-menu{
    position:absolute;
    right:20px;
    top:70px;
    padding:10px;
    width:min(280px, calc(100vw - 40px));
    border-radius: 18px;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    background: rgba(5,10,24,.92);
    border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 90px rgba(0,0,0,.55);
    display:none;
  }
  .nav-menu[data-open="true"]{display:flex}
  .nav-menu a{padding:10px 12px}
}