:root{
  --ink: #0B1F2A;
  --panel: #12303F;
  --panel-light: #1B4152;
  --alert: #FF5A4E;
  --alert-dim: #FF5A4E33;
  --paper: #F2EFEA;
  --muted: #9FB3BF;
  --pulse-green: #52D9A0;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--ink);
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,.display{
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 700;
  margin: 0;
}
a{color: inherit;}
.wrap{max-width: 980px; margin: 0 auto; padding: 0 24px;}

/* ---------- NAV ---------- */
nav{
  display:flex; align-items:center; justify-content:space-between;
  gap: 48px;
  padding: 22px 24px;
  max-width: 980px; margin: 0 auto;
}
.logo{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:800; font-size: 22px; letter-spacing: 0.02em;
  text-transform: uppercase;
  display:flex; align-items:center; gap:8px;
  text-decoration:none;
  flex-shrink: 0;
}
.logo .dot{width:10px;height:10px;border-radius:50%;background:var(--alert); display:inline-block; box-shadow: 0 0 0 4px var(--alert-dim);}
nav .cta-link{
  font-size:14px; font-weight:600; color: var(--paper);
  border: 1px solid #ffffff33; padding: 9px 18px; border-radius: 100px;
  text-decoration:none;
}
nav .cta-link:hover{border-color: var(--alert); color: var(--alert);}
.nav-links{ display:flex; align-items:center; gap: 26px; }
.nav-links a{ font-size:14px; font-weight:500; color: var(--muted); text-decoration:none; white-space:nowrap; }
.nav-links a:not(.cta-link):hover{ color: var(--paper); }
.nav-dropdown{ position:relative; }
.dropdown-trigger{
  font-size:14px; font-weight:500; color: var(--muted); white-space:nowrap;
  cursor:default; user-select:none;
}
.nav-dropdown:hover .dropdown-trigger,
.nav-dropdown:focus-within .dropdown-trigger{ color: var(--paper); }
.dropdown-menu{
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:14px; min-width:240px; z-index:20;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu{ display:block; }
.dropdown-menu a{
  display:block; background: var(--panel); border:1px solid #ffffff1c;
  padding:11px 16px; font-size:14px; color: var(--muted); text-decoration:none; white-space:nowrap;
  box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}
.dropdown-menu a:first-child{ border-radius:10px 10px 0 0; }
.dropdown-menu a:last-child{ border-radius:0 0 10px 10px; }
.dropdown-menu a + a{ border-top:none; }
.dropdown-menu a:hover{ background: var(--panel-light); color: var(--paper); }

/* ---------- MOBILE NAV (hamburger) ---------- */
.nav-toggle{ display:none; }
.mobile-menu-overlay{ display:none; }

@media (max-width: 900px){
  .nav-links{ display:none; }
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:44px; height:44px; padding:10px; margin:-10px -10px -10px 0;
    background:transparent; border:none; cursor:pointer; flex-shrink:0;
  }
  .nav-toggle-bar{ display:block; width:24px; height:2px; background: var(--paper); border-radius:2px; transition: transform .2s, opacity .2s; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

.mobile-menu-overlay:not([hidden]){
  display:flex; justify-content:flex-end;
  position: fixed; inset:0; z-index:100;
  background: rgba(4,14,20,0.6);
}
.mobile-menu{
  background: var(--panel); width: min(320px, 84vw);
  height:100%; padding: 16px 18px 32px; overflow-y:auto;
  display:flex; flex-direction:column; gap:4px;
  box-shadow: -14px 0 34px rgba(0,0,0,0.45);
}
.mobile-menu-close{
  align-self:flex-end; width:44px; height:44px; margin-bottom:4px;
  background:transparent; border:none; color: var(--paper);
  font-size:30px; line-height:1; cursor:pointer;
}
.mobile-menu-list{ display:flex; flex-direction:column; gap:2px; }
.mobile-link, .mobile-group-trigger{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding: 14px 12px; font-size:16px; color: var(--paper); text-decoration:none;
  background:transparent; border:none; border-radius:10px; text-align:left;
  font-family:'Inter', sans-serif; font-weight:500; cursor:pointer;
}
.mobile-link:hover, .mobile-group-trigger:hover,
.mobile-link:focus-visible, .mobile-group-trigger:focus-visible{ background: var(--panel-light); }
.mobile-cta{
  margin-top:12px; background: var(--alert); color: var(--ink);
  font-weight:700; justify-content:center;
}
.mobile-cta:hover, .mobile-cta:focus-visible{ background:#ff7266; }
.mobile-group-menu{ display:flex; flex-direction:column; padding: 0 0 6px 10px; }
.mobile-group-menu[hidden]{ display:none; }
.mobile-group-menu a{
  padding: 11px 12px; font-size:15px; color: var(--muted);
  text-decoration:none; border-radius:8px;
}
.mobile-group-menu a:hover, .mobile-group-menu a:focus-visible{ background: var(--panel-light); color: var(--paper); }
.mobile-group-caret{
  width:8px; height:8px; flex-shrink:0; margin-left:12px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s;
}
.mobile-group-trigger[aria-expanded="true"] .mobile-group-caret{ transform: rotate(-135deg); }

@media (min-width: 901px){
  .mobile-menu-overlay, .nav-toggle{ display:none !important; }
}

/* ---------- HERO ---------- */
.hero{ padding: 40px 0 30px; position:relative; }
.eyebrow{
  color: var(--alert); font-weight:600; font-size:13px; letter-spacing: 0.14em;
  text-transform:uppercase; margin-bottom: 18px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:26px; height:1px; background:var(--alert); display:inline-block;}
.hero h1{
  font-size: clamp(44px, 8vw, 88px);
  line-height: 0.95;
  color: var(--paper);
}
.hero h1 .accent{color: var(--alert);}
.hero p.lede{
  font-family:'Inter', sans-serif; font-weight:800; text-transform:none;
  color: var(--alert); font-size: 29px; max-width: 560px; margin-top: 22px;
}

/* ---------- HEARTBEAT SIGNATURE ---------- */
.ekg-wrap{
  margin: 38px 0 8px; border-top: 1px solid #ffffff1c; border-bottom: 1px solid #ffffff1c;
  padding: 18px 0; position:relative; overflow:hidden;
}
.ekg-wrap svg{ display:block; width:100%; height:110px; }
.ekg-line{
  fill:none; stroke: var(--pulse-green); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  filter: drop-shadow(0 0 6px #52D9A099);
}
.ekg-flat{ stroke: var(--alert); }
.ekg-caption{
  display:flex; justify-content:space-between; gap: 20px; font-size:12px; color: var(--muted);
  letter-spacing:0.08em; text-transform:uppercase; margin-top: 6px;
}
.ekg-caption .ekg-moment{
  color: var(--alert); font-weight:600; white-space:nowrap; flex-shrink:0;
}
.ekg-caption b{color: var(--paper);}
@media (max-width: 560px){
  .ekg-caption{ flex-direction: column; gap: 4px; }
}

/* ---------- STATS ---------- */
.stats{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background:#ffffff1c; margin: 46px 0; border:1px solid #ffffff1c;
}
.stat{ background: var(--ink); padding: 26px 20px; }
.stat .num{
  font-family:'Barlow Condensed', sans-serif; font-size: 52px; font-weight:800; color: var(--paper); line-height:1;
}
.stat.hot .num{color: var(--alert);}
.stat.good .num{color: var(--pulse-green);}
.stat .label{ font-size: 13px; color: var(--muted); margin-top:8px; }

/* ---------- PULL QUOTE ---------- */
.pull-quote{
  border-left: 3px solid var(--alert);
  padding: 6px 0 6px 24px;
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.3;
  color: var(--paper);
  max-width: 680px;
}

/* ---------- SECTIONS ---------- */
section{ padding: 54px 0; }
section.divider{ border-top: 1px solid #ffffff14; }
.section-head{ display:flex; align-items:baseline; gap:14px; margin-bottom: 20px;}
.section-head .idx{ color: var(--alert); font-family:'Barlow Condensed'; font-weight:700; font-size:16px; }
.section-head h1, .section-head h2{ font-size: 34px; color: var(--paper); }
p.body-text{ color: var(--muted); font-size: 17px; max-width: 640px; }
p.body-text strong{color: var(--paper);}

.cta-box{
  background: var(--panel); border:1px solid #ffffff1c; border-radius: 14px;
  padding: 34px; margin-top: 8px;
  display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap:wrap;
}
.cta-box p{margin:0; color: var(--muted); max-width: 420px;}
.btn{
  background: var(--alert); color: var(--ink); font-weight:700; text-decoration:none;
  padding: 14px 26px; border-radius: 100px; font-size:15px; white-space:nowrap;
  border:none; cursor:pointer; transition: transform .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-1px); background:#ff7266; }
.btn.secondary{ background: transparent; border:1px solid var(--paper); color: var(--paper); }
.btn.secondary:hover{ background: var(--paper); color: var(--ink); }

/* ---------- DIRECTORY PLACEHOLDER ---------- */
.directory-placeholder{
  background: var(--panel); border: 1px dashed #ffffff33; border-radius: 14px;
  padding: 40px 28px; text-align:center; color: var(--muted);
}
.directory-placeholder .badge{
  display:inline-block; font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--alert); border:1px solid var(--alert); border-radius: 100px; padding: 4px 12px; margin-bottom: 14px;
}

/* ---------- PARTNERS ---------- */
.partner-grid{ display:flex; flex-wrap:wrap; gap:20px; margin-top:24px; }
.partner-card{
  flex: 0 1 260px; max-width:100%;
  display:flex; align-items:center; justify-content:center;
  background: var(--panel); border:1px solid #ffffff1c; border-radius:14px;
  padding:26px 24px; min-height:150px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.partner-card:hover, .partner-card:focus-visible{
  transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.3);
}
.partner-card img{
  display:block; width:100%; max-width:100%; height:auto; max-height:100px; object-fit:contain;
}

/* ---------- ILLUSTRATION CARD ---------- */
.illustration-card{
  background: var(--panel); border: 1px solid #ffffff1c; border-radius: 14px;
  padding: 24px; margin: 24px auto 0; max-width: 420px;
}
.illustration-card svg{ display:block; width:100%; height:auto; border-radius: 8px; }

/* ---------- SIGNUP / CONTACT FORMS ---------- */
#ambassador form, #contact form{
  background: var(--panel); border:1px solid #ffffff1c; border-radius: 14px; padding: 30px;
  display:grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px;
}
#ambassador label, #contact label{ display:block; font-size:13px; color: var(--muted); margin-bottom:6px; }
#ambassador input, #ambassador select, #contact input, #contact textarea{
  width:100%; background: var(--ink); border:1px solid #ffffff26; border-radius: 8px;
  padding: 12px 14px; color: var(--paper); font-family:'Inter'; font-size:15px;
}
#ambassador .checkbox-label{ display:flex; margin-bottom:0; }
#ambassador .checkbox-label input[type="checkbox"]{ width:auto; }
#contact textarea{ resize: vertical; }
#ambassador input:focus, #ambassador select:focus, #contact input:focus, #contact textarea:focus{ outline:2px solid var(--alert); border-color: var(--alert); }
#ambassador .full, #contact .full{ grid-column: 1 / -1; }
#ambassador .submit-row, #contact .submit-row{ display:flex; align-items:center; gap:16px; }
.school-results{
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  margin-top: 4px; background: var(--ink);
  border: 1px solid #ffffff26; border-radius: 8px; max-height: 220px;
  overflow-y: auto; display: none;
}
.school-results.open{ display: block; }
.school-option{
  padding: 10px 14px; cursor: pointer; font-size: 14px; color: var(--paper);
  border-bottom: 1px solid #ffffff10;
}
.school-option:last-child{ border-bottom: none; }
.school-option:hover, .school-option.active{ background: var(--panel-light); }
.school-empty{ padding: 10px 14px; font-size: 13px; color: var(--muted); }
.consent-row{ margin-top: -4px; }
.checkbox-label{
  display:flex; align-items:flex-start; gap:10px; font-size:14px;
  color: var(--muted); cursor:pointer; line-height:1.5;
}
.checkbox-label input[type="checkbox"]{
  width:auto; flex-shrink:0; margin-top:3px; accent-color: var(--alert);
}
#form-status, #contact-status{ font-size:14px; }
#form-status.ok, #contact-status.ok{ color: var(--pulse-green); }
#form-status.err, #contact-status.err{ color: var(--alert); }
@media (max-width: 620px){
  #ambassador form, #contact form{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns: 1fr; }
}

.faq-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 24px; }
.faq-item h3{ font-size:18px; color: var(--paper); text-transform:none; font-family:'Inter'; font-weight:600; margin-bottom:6px; }
.faq-item p{ color: var(--muted); font-size:15px; margin:0; }
@media (max-width: 620px){ .faq-list{ grid-template-columns: 1fr; } }

/* ---------- FAQ ACCORDION ---------- */
.faq-accordion{ display:flex; flex-direction:column; gap:14px; margin-top:24px; max-width:760px; }
.faq-q{ background: var(--panel); border:1px solid #ffffff1c; border-radius:12px; }
.faq-q > summary{
  list-style:none; cursor:pointer; padding:18px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-q > summary::-webkit-details-marker{ display:none; }
.faq-question{
  font-family:'Inter', sans-serif; font-weight:600; text-transform:none;
  font-size:18px; color: var(--paper); margin:0; letter-spacing:0;
}
.faq-q > summary::after{
  content:''; width:9px; height:9px; flex-shrink:0;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s;
}
.faq-q[open] > summary::after{ transform: rotate(-135deg); }
.faq-q > summary:hover .faq-question,
.faq-q > summary:focus-visible .faq-question{ color: var(--alert); }
.faq-answer{ padding: 0 22px 20px; }
.faq-answer p{ color: var(--muted); font-size:16px; margin:0 0 12px; max-width:680px; }
.faq-answer ul, .faq-answer ol{ color: var(--muted); font-size:16px; margin:0 0 12px; padding-left:22px; max-width:680px; }
.faq-answer li{ margin-bottom:8px; line-height:1.5; }
.faq-answer li:last-child{ margin-bottom:0; }
.faq-answer p:last-child, .faq-answer ul:last-child, .faq-answer ol:last-child{ margin-bottom:0; }
.faq-answer a{ color: var(--alert); text-decoration:underline; }
.faq-answer a:hover{ color:#ff7266; }

.status-box{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
.status-box input{
  flex:1; min-width:220px; background: var(--panel); border:1px solid #ffffff26;
  border-radius: 8px; padding: 12px 14px; color: var(--paper); font-family:'Inter'; font-size:15px;
}
#statusResult{ margin-top: 20px; }
.status-msg{ font-size:15px; padding: 14px 18px; border-radius:10px; }
.status-msg.pending{ background: var(--panel); color: var(--muted); border:1px solid #ffffff1c; }
.status-msg.approved{ background: #1B4F3B; color: var(--pulse-green); border:1px solid #52D9A044; }
.status-msg.notfound{ background: var(--panel); color: var(--alert); border:1px solid #FF5A4E33; }
.email-template{
  background: var(--panel); border:1px solid #ffffff1c; border-radius: 10px;
  padding: 20px; margin-top: 14px; white-space: pre-wrap; font-size: 14px;
  color: var(--paper); font-family: 'Inter'; line-height:1.6;
}
.copy-btn{ margin-top: 10px; }

/* ---------- GUIDE LIST (HEART-SAFE) ---------- */
.guide-list{ display:flex; flex-direction:column; gap: 40px; margin-top: 24px; }
.guide-item h3{ font-size: 24px; color: var(--paper); margin-bottom: 12px; }
.guide-item p.body-text{ max-width: 720px; }
.guide-item p.body-text + p.body-text{ margin-top: 12px; }

/* ---------- ABOUT PAGE ---------- */
.about-photos{
  display:flex; gap: 24px; margin-top: 24px; flex-wrap:wrap;
}
.about-photo{
  width: 220px; height: 220px; border-radius: 14px; object-fit: cover;
  border: 1px solid #ffffff1c; flex-shrink: 0;
}
.about-bio{ margin-top: 24px; }
.about-bio + .about-bio{ margin-top: 12px; }

/* ---------- AMBASSADOR PAGE ---------- */
.ambassador-intro p{ margin:0 0 14px; }
.ambassador-intro p:last-child{ margin-bottom: 24px; }

/* ---------- AMBASSADOR DIRECTORY ---------- */
.ambassador-list{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px; margin-top: 24px; color: var(--muted);
}
.ambassador-card{
  background: var(--panel); border:1px solid #ffffff1c; border-radius: 12px;
  padding: 18px 20px; display:flex; flex-direction:column; gap:4px;
}
.ambassador-name{ font-weight:600; color: var(--paper); font-size:16px; }
.ambassador-school{ font-size:13px; color: var(--muted); }

footer{
  padding: 30px 0 50px; color: var(--muted); font-size:13px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

@media (prefers-reduced-motion: reduce){
  .ekg-path{ animation: none !important; }
}