/* Methodix Foundation — base stylesheet
   Reconstructed from token & class usage in the source HTML pages. */

:root{
  --display:'Plus Jakarta Sans','Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --teal:#3d8fa3;
  --teal-dark:#256474;
  --teal-light:#5ab0c6;
  --teal-pale:#e6f0f3;
  --teal-xpale:#f3f8fa;
  --gold:#e8b84b;
  --gold-xlight:#fbf5e6;
  --navy:#0e1f2e;
  --navy-mid:#162b3e;
  --slate:#475569;
  --mid:#8497a8;
  --off-white:#f7f6f1;
  --coral:#e07b6a;
  --r:18px;
  --r-sm:10px;
  --T:.32s cubic-bezier(.34,1,.64,1);
  --shadow:0 10px 30px rgba(14,31,46,.08);
  --shadow-lg:0 24px 60px rgba(14,31,46,.16);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--display);color:var(--slate);background:white;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:none;background:none;cursor:pointer}

/* NAV */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1rem 2.5rem;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(14,31,46,.06)}
.nav-brand{display:flex;align-items:center;gap:.75rem}
.nav-logo-wrap{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,var(--teal),var(--teal-dark));display:flex;align-items:center;justify-content:center;overflow:hidden;color:white;font-weight:800;font-size:1.1rem}
.nav-logo-wrap img{width:100%;height:100%;object-fit:cover}
.nav-logo-wrap::after{content:'M';display:none}
.nav-logo-wrap:empty::after,.nav-logo-wrap img[style*="display: none"]+::after{display:block}
.nav-brand-name{font-family:var(--display);font-weight:800;color:var(--navy);font-size:1.05rem;letter-spacing:-.01em}
.nav-brand-name span{color:var(--teal);font-weight:700}
.nav-links{display:flex;list-style:none;gap:.5rem;margin:0;padding:0;align-items:center}
@media(max-width:1080px){
  .nav-links{gap:.15rem}
  .nav-links a{padding:.55rem .7rem;font-size:.82rem}
}
.nav-links a{padding:.55rem 1rem;border-radius:100px;font-size:.88rem;font-weight:600;color:var(--slate);transition:var(--T)}
.nav-links a:hover{color:var(--navy);background:var(--teal-pale)}
.nav-links a.active{color:var(--teal-dark);background:var(--teal-pale)}
.nav-links a.nav-cta{background:var(--navy);color:white;padding:.6rem 1.25rem}
.nav-links a.nav-cta:hover{background:var(--teal-dark)}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:.5rem}
.nav-toggle span{width:24px;height:2.5px;background:var(--navy);border-radius:2px;transition:var(--T)}
.nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.nav-drawer{position:fixed;top:0;right:0;width:280px;height:100vh;background:white;z-index:99;padding:5rem 1.5rem 2rem;display:flex;flex-direction:column;gap:.4rem;transform:translateX(100%);transition:transform .35s cubic-bezier(.34,1,.64,1);box-shadow:-12px 0 40px rgba(0,0,0,.15)}
.nav-drawer.open{transform:translateX(0)}
.nav-drawer a{padding:.85rem 1rem;border-radius:10px;font-weight:600;color:var(--slate);font-size:.95rem}
.nav-drawer a.active{background:var(--teal-pale);color:var(--teal-dark)}
.nav-drawer a.nav-cta-mob{background:var(--navy);color:white;text-align:center;margin-top:.5rem}

body{padding-top:74px}

/* LAYOUT */
.container{max-width:1200px;margin:0 auto;padding:0 2rem}
.section{padding:5.5rem 0}
.section-sm{padding:3.5rem 0}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.5rem;border-radius:100px;font-weight:700;font-size:.88rem;letter-spacing:.01em;transition:var(--T);cursor:pointer;border:1.5px solid transparent;text-align:center}
.btn-lg{padding:1rem 1.75rem;font-size:.95rem}
.btn-sm{padding:.6rem 1.1rem;font-size:.8rem}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:#f0c563;transform:translateY(-2px);box-shadow:0 12px 28px rgba(232,184,75,.4)}
.btn-teal{background:var(--teal);color:white}
.btn-teal:hover{background:var(--teal-dark);transform:translateY(-2px);box-shadow:0 12px 28px rgba(61,143,163,.35)}
.btn-outline-white{border-color:rgba(255,255,255,.4);color:white}
.btn-outline-white:hover{background:white;color:var(--navy)}
.btn-outline-teal{border-color:var(--teal);color:var(--teal-dark)}
.btn-outline-teal:hover{background:var(--teal);color:white}

/* HEADINGS / TAGS */
.tag-label{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:.55rem}
.tag-label.white{color:#f5d27e}
.tag-label.gold{color:var(--gold)}
.gold-bar{width:48px;height:3px;background:var(--gold);border-radius:2px;margin-bottom:1.1rem}
.section-title{font-family:var(--display);font-size:clamp(2rem,3.2vw,2.7rem);font-weight:800;color:var(--navy);line-height:1.1;letter-spacing:-.025em;margin:0 0 1rem}
.section-title.light{color:white}
.body-text{font-size:1rem;color:var(--slate);line-height:1.78}
.body-text.light{color:rgba(255,255,255,.7)}
.body-text.wide{max-width:640px}
.info-strip{background:var(--teal-pale);border-left:3px solid var(--teal);border-radius:0 10px 10px 0;padding:1rem 1.2rem}
.info-strip strong{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--teal-dark);font-weight:800;margin-bottom:.25rem}
.info-strip p{margin:0;font-size:.92rem;color:var(--slate)}

/* PAGE HERO */
.page-hero{position:relative;height:420px;overflow:hidden;display:flex;align-items:flex-end}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(14,31,46,.85) 0%,rgba(37,100,116,.65) 100%)}
.page-hero-content{position:relative;z-index:2;padding:0 3rem 3rem;max-width:880px;color:white}
.page-hero-content .hero-tag,.hero-tag{display:inline-block;background:rgba(232,184,75,.18);border:1px solid rgba(232,184,75,.4);color:#f5d27e;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.38rem 1rem;border-radius:100px;margin-bottom:1rem}
.page-hero-content h1{font-size:clamp(2rem,4vw,3.4rem);font-weight:800;color:white;line-height:1.08;letter-spacing:-.025em;margin:0 0 .9rem}
.page-hero-content p{color:rgba(255,255,255,.78);font-size:1rem;max-width:560px;margin:0;line-height:1.7}

/* REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}
.reveal.d2{transition-delay:.24s}
.reveal.d3{transition-delay:.36s}

/* VIDEO CARDS (impact) */
.video-card{background:white;border-radius:var(--r);overflow:hidden;border:1px solid rgba(61,143,163,.1);box-shadow:var(--shadow);transition:transform var(--T),box-shadow var(--T)}
.video-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.video-thumb{position:relative;display:block;height:200px;background:linear-gradient(135deg,var(--teal-dark),var(--navy));overflow:hidden}
.vt-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.play-btn{position:absolute;left:50%;top:50%;width:56px;height:56px;background:var(--gold);border-radius:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:var(--T)}
.video-card:hover .play-btn{transform:translate(-50%,-50%) scale(1.1)}
.play-btn svg{width:24px;height:24px;fill:var(--navy);margin-left:3px}
.vm{padding:1.25rem 1.5rem 1.5rem}
.vm .vt{display:block;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--teal);margin-bottom:.4rem}
.vm h3{font-family:var(--display);font-size:1rem;font-weight:800;color:var(--navy);margin:0;line-height:1.35}

/* GALLERY */
.gallery-grid{column-count:4;column-gap:1rem}
@media(max-width:1024px){.gallery-grid{column-count:3}}
@media(max-width:640px){.gallery-grid{column-count:2}}
.gallery-item{break-inside:avoid;margin-bottom:1rem;border-radius:14px;overflow:hidden;cursor:pointer;position:relative;background:var(--teal-pale)}
.gallery-item img{width:100%;height:auto;display:block;transition:transform .5s}
.gallery-item:hover img{transform:scale(1.04)}
.gi-skeleton{width:100%;background:linear-gradient(90deg,#eef2f5,#f7f9fb,#eef2f5);background-size:200% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.gi-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,31,46,.55),transparent 60%);opacity:0;display:flex;align-items:flex-end;justify-content:flex-end;padding:.85rem;transition:opacity .25s}
.gallery-item:hover .gi-overlay{opacity:1}
.gi-zoom{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center}
.gi-zoom svg{width:18px;height:18px;fill:var(--navy)}

/* LIGHTBOX */
.lb{position:fixed;inset:0;background:rgba(8,15,22,.95);z-index:9999;display:none;align-items:center;justify-content:center;padding:2rem}
.lb.open{display:flex}
.lb-inner{max-width:90vw;max-height:85vh;display:flex;align-items:center;justify-content:center}
.lb-inner img{max-width:100%;max-height:85vh;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-close{position:absolute;top:1.25rem;right:1.5rem;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.15);color:white;font-size:1.75rem;line-height:1}
.lb-close:hover{background:rgba(255,255,255,.25)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.12);color:white;font-size:2rem;line-height:1}
.lb-nav:hover{background:rgba(255,255,255,.22)}
.lb-prev{left:1.5rem}
.lb-next{right:1.5rem}
.lb-count{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:.85rem;letter-spacing:.04em}

/* FORMS */
.form-wrap{background:white;border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden}
.form-tabs{display:flex;border-bottom:1px solid rgba(61,143,163,.12)}
.ftab{flex:1;padding:1.1rem 1rem;font-weight:700;font-size:.88rem;color:var(--mid);background:#fafbfc;transition:var(--T)}
.ftab.active{background:white;color:var(--teal-dark);box-shadow:inset 0 -3px 0 var(--teal)}
.fpanel{display:none;padding:2rem}
.fpanel.active{display:block}
.fpanel h3{font-family:var(--display);font-size:1.3rem;font-weight:800;color:var(--navy);margin:0 0 .3rem}
.form-sub{font-size:.9rem;color:var(--slate);margin:0 0 1.5rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fg{margin-bottom:1rem;display:flex;flex-direction:column}
.fg label{font-size:.78rem;font-weight:700;color:var(--navy);margin-bottom:.4rem}
.fg input,.fg select,.fg textarea{padding:.75rem 1rem;border:1.5px solid rgba(61,143,163,.18);border-radius:10px;font-family:inherit;font-size:.9rem;color:var(--navy);background:white;transition:var(--T)}
.fg textarea{min-height:110px;resize:vertical}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(61,143,163,.12)}
.fg .err{display:none;font-size:.75rem;color:#c0392b;margin-top:.3rem;font-weight:600}
.fg.error input,.fg.error select,.fg.error textarea{border-color:#e05252}
.fg.error .err{display:block}
.fsub-btn{width:100%;padding:1rem 1.5rem;border-radius:100px;font-weight:800;font-size:.92rem;color:white;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:var(--T)}
.fsub-btn.gold{background:var(--gold);color:var(--navy)}
.fsub-btn.navy{background:var(--navy);color:white}
.fsub-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.fsub-btn.loading .btn-text{opacity:.5}
.fsub-btn .btn-spinner{display:none;width:18px;height:18px;border:2.5px solid rgba(0,0,0,.2);border-top-color:currentColor;border-radius:50%;animation:spin .8s linear infinite}
.fsub-btn.loading .btn-spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.success-box{display:none;text-align:center;padding:2.5rem 1.5rem}
.success-box.show{display:block}
.success-icon{width:64px;height:64px;border-radius:50%;background:var(--teal-pale);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem}
.success-icon svg{width:32px;height:32px;fill:var(--teal-dark)}
.success-box h4{font-family:var(--display);font-size:1.25rem;color:var(--navy);font-weight:800;margin:0 0 .4rem}
.success-box p{font-size:.92rem;color:var(--slate);margin:0}

/* SOCIAL FOLLOW */
.social-follow{background:linear-gradient(135deg,var(--teal-dark),var(--navy));color:white;padding:3.5rem 2rem;text-align:center;position:relative;overflow:hidden}
.social-follow::before{content:'';position:absolute;top:-50px;right:-50px;width:240px;height:240px;border-radius:50%;background:rgba(232,184,75,.06)}
.social-follow h3{font-family:var(--display);font-size:1.6rem;font-weight:800;margin:0 0 .4rem;letter-spacing:-.01em}
.social-follow p{color:rgba(255,255,255,.65);margin:0 0 1.5rem;font-size:.95rem}
.social-row{display:inline-flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.social-btn{display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.4rem;border-radius:100px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:white;font-weight:700;font-size:.85rem;transition:var(--T)}
.social-btn:hover{background:var(--gold);color:var(--navy);border-color:var(--gold);transform:translateY(-2px)}

/* FOOTER */
.site-footer{background:var(--navy);color:rgba(255,255,255,.65);padding:4rem 3rem 1.5rem}
.footer-main{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem;max-width:1280px;margin:0 auto 2.5rem}
.footer-brand-name{font-family:var(--display);font-weight:800;color:white;font-size:1.05rem}
.footer-brand-name span{color:var(--gold)}
.footer-tagline{font-size:.88rem;line-height:1.7;margin:0 0 1.25rem;max-width:340px}
.footer-socials{display:flex;gap:.6rem}
.social-link{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);transition:var(--T)}
.social-link:hover{background:var(--gold);color:var(--navy)}
.footer-col h4{color:white;font-family:var(--display);font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin:0 0 1rem}
.footer-col a{display:block;padding:.32rem 0;font-size:.88rem;color:rgba(255,255,255,.55);transition:var(--T)}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{max-width:1280px;margin:0 auto;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;font-size:.8rem;color:rgba(255,255,255,.4);flex-wrap:wrap;gap:.5rem}
.footer-bottom .gold{color:var(--gold)}

/* RESPONSIVE */
@media(max-width:900px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .site-nav{padding:.9rem 1.25rem}
  .container{padding:0 1.25rem}
  .section{padding:3.5rem 0}
  .page-hero-content{padding:0 1.5rem 2rem}
  .form-row{grid-template-columns:1fr}
  .footer-main{grid-template-columns:1fr 1fr;gap:2rem}
  .hero-stats{grid-template-columns:repeat(2,1fr) !important}
  .who-grid,.what-grid,.fv-grid,.eyl-layout,.gi-layout,.help-grid,.video-grid,.feature-grid,.pillars-grid{grid-template-columns:1fr !important;gap:2.5rem !important}
  .alumni-strip{flex-direction:column;align-items:flex-start;padding:2rem 1.5rem;gap:1.5rem}
  .al-img{width:100%;height:200px}
  .founder-card{grid-template-columns:1fr !important;padding:1.75rem !important;gap:1.5rem !important}
  .hero-content{padding:0 1.5rem 2.5rem !important}
}
/* === Page-specific styles extracted from source HTML === */
/* --- index --- */

/* HERO */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(14,31,46,.9) 0%,rgba(37,100,116,.7) 55%,rgba(61,143,163,.3) 100%)}
.hero-shapes{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hs{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.06);animation:hsflt 9s ease-in-out infinite}
.hs1{width:600px;height:600px;top:-180px;right:-80px}
.hs2{width:380px;height:380px;top:60px;right:160px;border-color:rgba(232,184,75,.1);animation-delay:2.5s}
.hs3{width:160px;height:160px;bottom:220px;left:8%;border-color:rgba(61,143,163,.12);animation-delay:5s}
@keyframes hsflt{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.hero-content{position:relative;z-index:2;padding:0 3rem 4rem;max-width:840px}
.hero-pill{display:inline-flex;align-items:center;gap:.5rem;background:rgba(232,184,75,.15);border:1px solid rgba(232,184,75,.38);color:#f5d27e;font-family:var(--display);font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.38rem 1rem;border-radius:100px;margin-bottom:1.2rem;animation:fup .8s ease .2s both}
.hero-slogan{display:flex;flex-wrap:wrap;gap:.45em;margin:1.5rem 0 0;font-family:var(--display);font-weight:800;font-size:clamp(1rem,1.6vw,1.2rem);letter-spacing:.01em;animation:fup .8s ease .5s both}
.hero-slogan span{display:inline-block;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.hero-slogan .w1{color:#ffd166}
.hero-slogan .w2{color:#ff8fa8}
.hero-slogan .w3{color:#7ee8fa}
.hero-slogan .w4{color:#b39dff}
.hero-slogan .w5{color:#7ee787}
.hero-slogan .w6{color:#ffffff}
.hero-h1{font-size:clamp(2.8rem,5.5vw,5.2rem);font-weight:800;color:white;line-height:1.04;letter-spacing:-.035em;margin-bottom:1.3rem;animation:fup .8s ease .4s both}
.hero-h1 .acc{color:#f5d27e;display:inline-block}
.hero-h1 .acc2{color:#5ab0c6;display:inline-block}
.hero-sub{font-size:1.05rem;color:rgba(255,255,255,.7);max-width:520px;line-height:1.78;margin-bottom:2rem;animation:fup .8s ease .6s both}
.hero-btns{display:flex;gap:.9rem;flex-wrap:wrap;animation:fup .8s ease .8s both}
@keyframes fup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
/* Stats bar */
.hero-stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.08);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.1)}
.hsc{padding:1.4rem 1.5rem;text-align:center;border-right:1px solid rgba(255,255,255,.08)}
.hsc:last-child{border-right:none}
.hsc-num{font-family:var(--display);font-size:2rem;font-weight:800;color:var(--gold);display:block;line-height:1}
.hsc-lbl{font-size:.7rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;margin-top:.3rem;display:block}

/* WHO WE ARE */
.who-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.quote-card{background:linear-gradient(135deg,var(--teal-dark) 0%,#1a4a59 100%);border-radius:28px;padding:3rem;color:white;position:relative;overflow:hidden}
.quote-card::before{content:'';position:absolute;top:-60px;right:-60px;width:240px;height:240px;background:rgba(255,255,255,.04);border-radius:50%}
.quote-card::after{content:'';position:absolute;bottom:-30px;left:-30px;width:140px;height:140px;background:rgba(232,184,75,.06);border-radius:50%}
.q-mark{font-family:var(--display);font-size:6rem;color:rgba(255,255,255,.1);line-height:.8;margin-bottom:.75rem}
.quote-card blockquote{font-size:1.12rem;line-height:1.65;font-style:italic;position:relative;z-index:1;font-weight:700;font-family:var(--display)}
.who-badge{position:absolute;bottom:-24px;right:2rem;background:var(--gold);color:var(--navy);padding:.9rem 1.4rem;border-radius:14px;font-weight:700;font-size:.78rem;text-align:center;line-height:1.3;font-family:var(--display);box-shadow:0 8px 28px rgba(232,184,75,.35)}
.who-badge strong{font-size:1.5rem;display:block;font-weight:800}

/* WHAT WE DO */
.what-grid{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
.what-img{border-radius:24px;overflow:hidden;box-shadow:0 24px 64px rgba(14,31,46,.16);position:relative}
.what-img img{width:100%;height:420px;object-fit:cover;object-position:center top;display:block}
.what-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top,rgba(14,31,46,.2),transparent);pointer-events:none}
.support-list{list-style:none;margin:1.1rem 0 1.75rem}
.support-list li{padding:.55rem 0;border-bottom:1px solid var(--teal-pale);font-size:.97rem;color:var(--slate);display:flex;align-items:center;gap:.8rem;font-weight:500}
.support-list li::before{content:'';width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--gold));flex-shrink:0}
.support-list li:last-child{border-bottom:none}

/* ALUMNI STRIP */
.alumni-strip{background:linear-gradient(135deg,var(--navy-mid),var(--navy));padding:3.5rem 3rem;display:flex;align-items:center;gap:3.5rem;position:relative;overflow:hidden}
.alumni-strip::before{content:'';position:absolute;top:-40px;right:-40px;width:220px;height:220px;background:rgba(61,143,163,.08);border-radius:50%;pointer-events:none}
.al-img{flex-shrink:0;width:290px;height:220px;border-radius:20px;overflow:hidden;border:3px solid rgba(255,255,255,.12);box-shadow:0 20px 48px rgba(0,0,0,.35)}
.al-img img{width:100%;height:100%;object-fit:cover;object-position:center top}
.al-text h2{font-size:1.8rem;font-weight:800;color:white;margin-bottom:.45rem;letter-spacing:-.02em}
.al-text p{color:rgba(255,255,255,.62);font-size:.97rem;line-height:1.75}

/* FOUNDER VIDEO */
.fv-section{background:var(--navy);padding:5rem 3rem;position:relative;overflow:hidden}
.fv-section::before{content:'';position:absolute;top:-100px;left:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(61,143,163,.18) 0%,transparent 70%);pointer-events:none}
.fv-section::after{content:'';position:absolute;bottom:-80px;right:-80px;width:300px;height:300px;background:radial-gradient(circle,rgba(232,184,75,.1) 0%,transparent 70%);pointer-events:none}
.fv-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;max-width:1200px;margin:0 auto;position:relative;z-index:1}
.fv-video-wrap{border-radius:24px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.5);border:2px solid rgba(232,184,75,.2);position:relative}
.fv-video-wrap video{width:100%;display:block}
.fv-sig{display:flex;align-items:center;gap:1rem;margin-top:2rem;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.1)}
.fv-sig-img{width:56px;height:56px;border-radius:50%;overflow:hidden;border:2.5px solid var(--gold);flex-shrink:0}
.fv-sig-img img{width:100%;height:100%;object-fit:cover;object-position:center top}
.fv-sig-name{font-family:var(--display);font-weight:800;color:white;font-size:1rem}
.fv-sig-role{font-size:.78rem;color:rgba(255,255,255,.45);margin-top:.1rem;letter-spacing:.04em}

/* PULL QUOTE */
.pull-quote{background:var(--gold-xlight);border-top:4px solid var(--gold);padding:2.75rem 3rem;text-align:center;font-family:var(--display);font-size:1.35rem;color:var(--navy);line-height:1.6;font-weight:700;font-style:italic;position:relative}
.pull-quote::before{content:'“';position:absolute;left:2rem;top:.5rem;font-size:5rem;color:var(--gold);opacity:.25;line-height:1;font-family:var(--display)}

/* --- programmes --- */

.eyl-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:4.5rem;align-items:start}
.emerge-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.75rem}
.emerge-item{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.8rem 1rem;font-size:.87rem;color:rgba(255,255,255,.88);font-weight:500}
.emerge-item strong{display:block;color:#f5d27e;font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;margin-bottom:.1rem}
.curric-card{background:white;border-radius:24px;padding:2.5rem;box-shadow:0 16px 48px rgba(14,31,46,.12);border:1px solid rgba(61,143,163,.08)}
.curric-card h3{font-family:var(--display);font-size:1.15rem;font-weight:800;color:var(--teal-dark);margin-bottom:1.1rem}
.curric-list{list-style:none;margin-bottom:1.75rem}
.curric-list li{padding:.65rem 0;border-bottom:1px solid var(--teal-pale);display:flex;align-items:center;gap:.7rem;font-size:.93rem;color:var(--slate)}
.curric-list li:last-child{border-bottom:none}
.curric-list li::before{content:'';width:20px;height:2.5px;background:linear-gradient(to right,var(--teal),var(--gold));flex-shrink:0;border-radius:2px}
.benefits-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.benefit-chip{background:var(--teal-pale);border-radius:100px;padding:.6rem 1rem;font-size:.82rem;color:var(--teal-dark);font-weight:700;display:flex;align-items:center;gap:.45rem}
.benefit-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--teal);flex-shrink:0}
/* PILLARS */
.pillars-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.pillar-card{background:white;border-radius:var(--r);padding:2rem 1.75rem;border:1px solid rgba(61,143,163,.1);position:relative;overflow:hidden;transition:transform var(--T),box-shadow var(--T)}
.pillar-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.pillar-num{position:absolute;top:.5rem;right:1rem;font-family:var(--display);font-size:4.5rem;font-weight:800;color:var(--teal-pale);line-height:1;pointer-events:none}
.pillar-tag{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);margin-bottom:.4rem;display:block}
.pillar-name{font-family:var(--display);font-size:1.2rem;font-weight:800;color:var(--navy);margin-bottom:.55rem}
.pillar-desc{font-size:.87rem;color:var(--slate);line-height:1.7}
.pillar-card:nth-child(1){border-top:3px solid var(--teal)}
.pillar-card:nth-child(2){border-top:3px solid var(--gold)}
.pillar-card:nth-child(3){border-top:3px solid var(--coral)}
.pillar-card:nth-child(4){border-top:3px solid var(--teal-light)}
/* FOUNDER */
.founder-card{display:grid;grid-template-columns:340px 1fr;gap:4rem;align-items:start;background:white;border-radius:28px;padding:3rem;box-shadow:var(--shadow-lg);border:1px solid rgba(61,143,163,.1)}
.founder-photo{border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg)}
.founder-photo img{width:100%;display:block}
.founder-video-thumb{border-radius:14px;overflow:hidden;margin-top:1.25rem;box-shadow:0 12px 36px rgba(14,31,46,.15);position:relative}
.founder-video-thumb video{width:100%;display:block}
.founder-name{font-family:var(--display);font-size:1.75rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:.2rem}
.founder-role{font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--teal)}
.founder-bio{font-size:.97rem;color:var(--slate);line-height:1.82;margin-top:1rem}
.f-stats{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:1.6rem}
.fstat{background:var(--teal-pale);border-radius:12px;padding:.65rem 1rem;text-align:center}
.fstat-num{font-family:var(--display);font-size:1.1rem;font-weight:800;color:var(--teal-dark);display:block;line-height:1}
.fstat-lbl{font-size:.67rem;color:var(--mid);text-transform:uppercase;letter-spacing:.07em;margin-top:.2rem;display:block}
.vol-band{background:linear-gradient(135deg,var(--navy),var(--navy-mid));border-radius:20px;padding:2.5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-top:2.5rem;box-shadow:var(--shadow)}
.vol-band h4{font-family:var(--display);font-size:1.15rem;font-weight:800;color:white;margin-bottom:.35rem}
.vol-band p{font-size:.9rem;color:rgba(255,255,255,.6);max-width:480px;line-height:1.65}
/* EYL PHOTO */
.eyl-photo{max-width:920px;margin:0 auto;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg)}
.eyl-photo img{width:100%;display:block}

/* --- impact --- */

.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:3rem}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:4rem}
.feature-card{background:white;border-radius:var(--r);overflow:hidden;border:1px solid rgba(61,143,163,.1);display:grid;grid-template-columns:180px 1fr;transition:transform var(--T),box-shadow var(--T)}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.feature-img{overflow:hidden;background:var(--teal-pale)}
.feature-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.feature-card:hover .feature-img img{transform:scale(1.05)}
.feature-body{padding:1.5rem}
.feature-tag-sm{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--teal);margin-bottom:.45rem;display:block}
.feature-body h3{font-family:var(--display);font-size:1.05rem;font-weight:800;color:var(--navy);line-height:1.35;margin-bottom:.45rem}
.feature-body p{font-size:.87rem;color:var(--slate);line-height:1.65}
/* Gallery header with filter feel */
.gallery-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}
.gallery-count{font-size:.82rem;color:var(--mid);font-weight:600}

/* --- get-involved --- */

/* EmailJS notification */
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(80px);background:var(--navy);color:white;padding:.9rem 1.75rem;border-radius:100px;font-weight:700;font-size:.88rem;box-shadow:0 8px 32px rgba(0,0,0,.3);transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .4s;opacity:0;z-index:9999}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.success{background:var(--teal-dark)}
.toast.error{background:#c0392b}
/* HOW TO HELP */
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:4rem}
.help-card{background:white;border-radius:var(--r);overflow:hidden;border:1px solid rgba(61,143,163,.1);transition:transform var(--T),box-shadow var(--T)}
.help-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.hc-img{width:100%;height:220px;object-fit:cover;display:block;transition:transform .5s}
.help-card:hover .hc-img{transform:scale(1.04)}
.hc-img-wrap{overflow:hidden;height:220px}
.hc-body{padding:1.75rem}
.hc-body h3{font-family:var(--display);font-size:1.15rem;font-weight:800;color:var(--navy);margin-bottom:.5rem}
.hc-body p{font-size:.91rem;color:var(--slate);line-height:1.7;margin-bottom:1.25rem}
/* PARTNERS */
.partners-row{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center}
.partner-logo{width:180px;height:100px;border-radius:var(--r-sm);overflow:hidden;border:1px solid rgba(61,143,163,.12);background:white;display:flex;align-items:center;justify-content:center;padding:.75rem;transition:var(--T)}
.partner-logo:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.partner-logo img{width:100%;height:100%;object-fit:contain}
/* LAYOUT */
.gi-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:5rem;align-items:start}
.ci-block{display:flex;flex-direction:column;gap:.7rem;margin-top:2rem}
/* Character touches */
.step-num{font-family:var(--display);font-size:4rem;font-weight:800;color:var(--teal-pale);line-height:1;position:absolute;top:-1rem;right:1rem;pointer-events:none}


/* ============================================================
   FUTURE TECH LEADERS — polish layer (palette unchanged)
   ============================================================ */
:root{
  --mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,Consolas,monospace;
  --grid-line:rgba(61,143,163,.08);
  --glow-teal:0 0 0 1px rgba(61,143,163,.18), 0 18px 48px -18px rgba(61,143,163,.45);
  --glow-gold:0 0 0 1px rgba(232,184,75,.25), 0 18px 48px -18px rgba(232,184,75,.4);
}

/* Mono eyebrow + leading bracket — applied to every tag-label */
.tag-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em}
.tag-label::before{content:'// ';opacity:.6}

/* Subtle grid texture for light sections */
.section[style*="background:white"],
.section[style*="background:var(--off-white)"],
.section[style*="background:var(--teal-xpale)"]{
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px;
  background-position:-1px -1px;
}

/* Hero numeric stats: mono ticker */
.hsc-num{font-family:var(--mono);letter-spacing:-.02em}
.hsc-lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em}

/* Pillar/curric/help cards: animated edge glow on hover */
.pillar-card,.curric-card,.help-card,.feature-card,.video-card,.form-wrap{position:relative}
.pillar-card::after,.help-card::after,.feature-card::after,.video-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(61,143,163,.35),rgba(232,184,75,.25));
  opacity:0;transition:opacity .4s;mix-blend-mode:overlay;
}
.pillar-card:hover::after,.help-card:hover::after,.feature-card:hover::after,.video-card:hover::after{opacity:1}
.pillar-card:hover,.help-card:hover,.feature-card:hover{box-shadow:var(--glow-teal)}

/* Pillar number → mono outline */
.pillar-num{font-family:var(--mono);font-weight:700;color:transparent;-webkit-text-stroke:1.5px var(--teal-pale)}

/* EMERGE chips → terminal feel */
.emerge-item{font-family:var(--mono);font-size:.78rem}
.emerge-item strong{font-family:var(--mono)}

/* Hero pill → terminal prompt */
.hero-pill::before{content:'> ';font-family:var(--mono);color:var(--gold);margin-right:.2rem}
.hero-pill{font-family:var(--mono)}

/* Section titles: faint scanline accent underline using gold */
.section-title{position:relative}

/* Nav: thin top accent strip */
.site-nav::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--teal),var(--gold),var(--teal-light));
  opacity:.85;
}
.site-nav{position:fixed}

/* Buttons: shimmer pass */
.btn{position:relative;overflow:hidden}
.btn::before{
  content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s;
}
.btn:hover::before{transform:translateX(120%)}

/* Tech badge sticker reused across pages */
.tech-badge{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--teal-dark);background:var(--teal-pale);border:1px solid rgba(61,143,163,.25);padding:.35rem .75rem;border-radius:100px}
.tech-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(61,143,163,.2);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(61,143,163,0)}}

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin-top:2rem}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr}}
.blog-card{background:white;border-radius:var(--r);overflow:hidden;border:1px solid rgba(61,143,163,.12);transition:transform var(--T),box-shadow var(--T);display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--glow-teal)}
.blog-cover{height:200px;background:linear-gradient(135deg,var(--teal-dark),var(--navy));overflow:hidden;position:relative}
.blog-cover img{width:100%;height:100%;object-fit:cover;display:block}
.blog-cover .blog-cat{position:absolute;top:1rem;left:1rem;font-family:var(--mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.16em;color:var(--navy);background:var(--gold);padding:.3rem .7rem;border-radius:100px;font-weight:800}
.blog-body{padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.blog-body h3{font-family:var(--display);font-size:1.1rem;color:var(--navy);font-weight:800;line-height:1.3;margin:0}
.blog-body p{font-size:.9rem;color:var(--slate);line-height:1.65;margin:0;flex:1}
.blog-meta{font-family:var(--mono);font-size:.7rem;color:var(--mid);text-transform:uppercase;letter-spacing:.12em}
.blog-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.blog-filter{padding:.5rem 1rem;border-radius:100px;font-family:var(--mono);font-size:.75rem;font-weight:700;color:var(--slate);background:white;border:1.5px solid rgba(61,143,163,.18);cursor:pointer;transition:var(--T)}
.blog-filter:hover{border-color:var(--teal)}
.blog-filter.active{background:var(--navy);color:white;border-color:var(--navy)}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-grid{columns:3 260px;column-gap:1.25rem;margin-top:2rem}
@media(max-width:900px){.gallery-grid{columns:2 200px}}
@media(max-width:560px){.gallery-grid{columns:1}}
.gallery-tile{break-inside:avoid;margin-bottom:1.25rem;border-radius:var(--r);overflow:hidden;position:relative;cursor:zoom-in;border:1px solid rgba(61,143,163,.12);background:var(--teal-xpale);transition:transform var(--T),box-shadow var(--T);display:block;width:100%}
.gallery-tile:hover{transform:translateY(-4px);box-shadow:var(--glow-teal)}
.gallery-tile img{width:100%;display:block;height:auto}
.gallery-tile .gt-cap{position:absolute;inset:auto 0 0 0;padding:.9rem 1rem .7rem;background:linear-gradient(180deg,transparent,rgba(14,31,46,.85));color:white;font-size:.82rem;font-weight:700;opacity:0;transition:opacity var(--T);text-align:left}
.gallery-tile:hover .gt-cap{opacity:1}
.gallery-tile .gt-cat{position:absolute;top:.75rem;left:.75rem;font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:var(--navy);background:var(--gold);padding:.28rem .65rem;border-radius:100px;font-weight:800}
.gallery-lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(10,20,30,.92);padding:2rem}
.gallery-lightbox.open{display:flex}
.gallery-lightbox figure{margin:0;max-width:min(92vw,980px);max-height:90vh;display:flex;flex-direction:column;gap:.9rem}
.gallery-lightbox img{max-width:100%;max-height:76vh;object-fit:contain;border-radius:12px;display:block;margin:0 auto}
.gallery-lightbox figcaption{color:white;text-align:center;font-size:.9rem;opacity:.85}
.gallery-lightbox .gl-close{position:absolute;top:1.25rem;right:1.5rem;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:white;font-size:1.3rem;cursor:pointer;line-height:1}
.gallery-lightbox .gl-close:hover{background:rgba(255,255,255,.2)}
.gallery-empty{text-align:center;padding:4rem 0;color:var(--mid);font-family:var(--mono)}

/* Post detail */
.post-wrap{max-width:780px;margin:0 auto;padding:3rem 1.5rem}
.post-cover{width:100%;border-radius:20px;overflow:hidden;margin-bottom:2rem;box-shadow:var(--shadow-lg)}
.post-cover img{width:100%;display:block}
.post-title{font-family:var(--display);font-size:clamp(2rem,4vw,3rem);font-weight:800;color:var(--navy);line-height:1.1;letter-spacing:-.025em;margin:.5rem 0 1rem}
.post-meta{font-family:var(--mono);font-size:.78rem;color:var(--mid);text-transform:uppercase;letter-spacing:.12em;display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.post-meta .blog-cat{background:var(--gold);color:var(--navy);padding:.3rem .7rem;border-radius:100px;font-weight:800}
.post-body{font-size:1.05rem;line-height:1.85;color:var(--slate);margin-top:2rem}
.post-body h2{font-family:var(--display);color:var(--navy);font-size:1.7rem;margin:2.2rem 0 .8rem;font-weight:800;letter-spacing:-.02em}
.post-body h3{font-family:var(--display);color:var(--navy);font-size:1.3rem;margin:1.8rem 0 .6rem;font-weight:800}
.post-body p{margin:0 0 1.1rem}
.post-body a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.post-body img{border-radius:12px;margin:1.5rem 0}
.post-body blockquote{border-left:3px solid var(--gold);padding:.4rem 0 .4rem 1.2rem;color:var(--navy);font-style:italic;margin:1.5rem 0}
.post-body code{font-family:var(--mono);font-size:.92em;background:var(--teal-pale);padding:.15rem .4rem;border-radius:6px}
.post-body pre{font-family:var(--mono);background:var(--navy);color:#e6f0f3;padding:1.25rem;border-radius:12px;overflow:auto;margin:1.5rem 0}
.post-body pre code{background:transparent;padding:0;color:inherit}
.post-body ul,.post-body ol{padding-left:1.4rem;margin:0 0 1.1rem}
.post-body li{margin-bottom:.4rem}

/* ============================================================
   ADMIN
   ============================================================ */
.admin-shell{max-width:1100px;margin:0 auto;padding:2.5rem 1.5rem}
.admin-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
.admin-head h1{font-family:var(--display);font-size:1.8rem;font-weight:800;color:var(--navy);margin:0;letter-spacing:-.02em}
.admin-head .who{font-family:var(--mono);font-size:.78rem;color:var(--mid)}
.admin-card{background:white;border-radius:var(--r);border:1px solid rgba(61,143,163,.12);box-shadow:var(--shadow);padding:1.75rem;margin-bottom:1.5rem}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{padding:.9rem 1rem;text-align:left;border-bottom:1px solid rgba(61,143,163,.1);font-size:.92rem}
.admin-table th{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--mid);font-weight:700;background:var(--teal-xpale)}
.admin-table td a{color:var(--teal-dark);font-weight:700}
.admin-status{font-family:var(--mono);font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;padding:.25rem .6rem;border-radius:100px}
.admin-status.draft{background:#fbf5e6;color:#a07b1a}
.admin-status.published{background:var(--teal-pale);color:var(--teal-dark)}
.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media(max-width:900px){.editor-grid{grid-template-columns:1fr}}
.editor-grid textarea{min-height:480px;font-family:var(--mono);font-size:.88rem;line-height:1.6}
.preview-pane{background:var(--off-white);border-radius:var(--r);padding:1.5rem;border:1px solid rgba(61,143,163,.12);max-height:600px;overflow:auto}
.login-shell{max-width:420px;margin:5rem auto;padding:2.5rem;background:white;border-radius:var(--r);box-shadow:var(--shadow-lg);border:1px solid rgba(61,143,163,.12)}
.login-shell h1{font-family:var(--display);font-size:1.6rem;font-weight:800;color:var(--navy);margin:0 0 .5rem;letter-spacing:-.02em}
.login-shell .sub{font-size:.9rem;color:var(--slate);margin-bottom:1.5rem}
.btn-google{background:white;border:1.5px solid rgba(61,143,163,.2);color:var(--navy);width:100%;margin-bottom:1rem}
.btn-google:hover{border-color:var(--teal)}
.divider{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0;color:var(--mid);font-family:var(--mono);font-size:.7rem;letter-spacing:.14em}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:rgba(61,143,163,.18)}

/* ============================================================
   BENTO TECH — Future Tech Leaders module
   ============================================================ */
.bento-section{padding:6rem 0;background:var(--navy);position:relative;overflow:hidden}
.bento-section::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%)}
.bento-section::after{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(61,143,163,.25),transparent 70%);pointer-events:none}
.bento-head{position:relative;z-index:2;max-width:680px;margin:0 auto 3rem;text-align:center}
.bento-head .tech-badge{background:rgba(232,184,75,.14);border-color:rgba(232,184,75,.35);color:#f5d27e}
.bento-head h2{font-family:var(--display);font-size:clamp(2rem,4.2vw,3.4rem);font-weight:800;color:white;letter-spacing:-.03em;line-height:1.05;margin:1rem 0 1rem}
.bento-head h2 .acc{background:linear-gradient(135deg,var(--gold),#ffd97a);-webkit-background-clip:text;background-clip:text;color:transparent}
.bento-head p{color:rgba(255,255,255,.68);font-size:1.05rem;line-height:1.7;margin:0}
.bento-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(190px,auto);gap:1.1rem;max-width:1200px;margin:0 auto;padding:0 2rem}
.bento{position:relative;border-radius:22px;padding:1.6rem;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);overflow:hidden;transition:transform .4s cubic-bezier(.34,1,.64,1),border-color .4s,box-shadow .4s;display:flex;flex-direction:column;justify-content:space-between;gap:1rem}
.bento::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(61,143,163,.55),transparent 40%,rgba(232,184,75,.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.bento:hover{transform:translateY(-4px);border-color:rgba(61,143,163,.4);box-shadow:0 30px 60px -20px rgba(61,143,163,.35)}
.bento:hover::before{opacity:1}
.bento-eyebrow{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:.4rem}
.bento-eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.bento h3{font-family:var(--display);color:white;font-size:1.25rem;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.2}
.bento p{color:rgba(255,255,255,.62);font-size:.88rem;line-height:1.6;margin:0}
.bento-big{grid-column:span 2;grid-row:span 2;background:linear-gradient(155deg,rgba(61,143,163,.35),rgba(14,31,46,.4)),url('../images/eyl_leaders.jpg') center/cover}
.bento-big h3{font-size:2rem;line-height:1.05}
.bento-big p{color:rgba(255,255,255,.85);font-size:.98rem}
.bento-stat{grid-column:span 1}
.bento-stat .num{font-family:var(--mono);font-size:2.4rem;font-weight:700;color:white;letter-spacing:-.04em;line-height:1}
.bento-stat .num .unit{color:var(--gold);font-size:1.4rem;margin-left:.15rem}
.bento-wide{grid-column:span 2}
.bento-img{grid-column:span 2;grid-row:span 1;padding:0;overflow:hidden;min-height:220px}
.bento-img img{width:100%;height:100%;object-fit:cover;display:block}
.bento-img .bento-overlay{position:absolute;inset:auto 0 0 0;padding:1.2rem 1.4rem;background:linear-gradient(transparent,rgba(14,31,46,.95));display:flex;flex-direction:column;gap:.35rem}
.bento-img .bento-overlay h3{color:white;font-size:1.05rem}
.bento-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-family:var(--mono);font-weight:800;color:var(--navy);background:linear-gradient(135deg,var(--gold),#ffd97a);font-size:1.1rem;letter-spacing:-.04em}
.bento-cta{grid-column:span 2;background:linear-gradient(135deg,var(--teal),var(--teal-dark));border-color:transparent}
.bento-cta h3{font-size:1.5rem}
.bento-cta .btn{align-self:flex-start;background:white;color:var(--navy);border-color:white}
.bento-cta .btn:hover{background:var(--gold);border-color:var(--gold)}
@media(max-width:900px){
  .bento-grid{grid-template-columns:repeat(2,1fr);padding:0 1.2rem}
  .bento-big,.bento-wide,.bento-img,.bento-cta{grid-column:span 2}
  .bento-big{grid-row:auto;min-height:280px}
}
@media(max-width:560px){
  .bento-grid{grid-template-columns:1fr}
  .bento-big,.bento-wide,.bento-img,.bento-cta,.bento-stat{grid-column:span 1}
}

/* ============================================================
   INSTAGRAM LIVE FEED
   ============================================================ */
.ig-section{padding:5rem 0;background:linear-gradient(180deg,#fff,var(--teal-xpale))}
.ig-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:2.5rem}
.ig-head h2{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;color:var(--navy);letter-spacing:-.025em;margin:.5rem 0 .25rem;line-height:1.1}
.ig-head p{color:var(--slate);margin:0;font-size:.95rem}
.ig-handle{font-family:var(--mono);font-size:.85rem;color:var(--teal-dark);font-weight:700}
.ig-feed{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:900px){.ig-feed{grid-template-columns:repeat(2,1fr)}}
.ig-card{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;background:var(--navy);display:block;border:1px solid rgba(61,143,163,.15);transition:transform .35s,box-shadow .35s}
.ig-card:hover{transform:translateY(-4px);box-shadow:0 25px 50px -15px rgba(61,143,163,.4)}
.ig-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.34,1,.64,1)}
.ig-card:hover img{transform:scale(1.06)}
.ig-card .ig-tint{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(14,31,46,.85));opacity:0;transition:opacity .35s}
.ig-card:hover .ig-tint{opacity:1}
.ig-card .ig-meta{position:absolute;left:0;right:0;bottom:0;padding:1rem;color:white;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;transform:translateY(8px);opacity:0;transition:.35s}
.ig-card:hover .ig-meta{transform:none;opacity:1}
.ig-card .ig-corner{position:absolute;top:.7rem;right:.7rem;background:rgba(255,255,255,.92);color:var(--navy);width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:.85rem;font-weight:800;font-family:var(--mono)}
.ig-follow{grid-column:span 2;background:linear-gradient(135deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);border-radius:18px;padding:1.8rem;color:white;display:flex;flex-direction:column;justify-content:space-between;min-height:200px}
@media(max-width:900px){.ig-follow{grid-column:span 2}}
.ig-follow h3{font-family:var(--display);font-size:1.4rem;font-weight:800;margin:.5rem 0;letter-spacing:-.02em}
.ig-follow p{font-size:.88rem;opacity:.92;margin:0 0 1rem;line-height:1.55}
.ig-follow .btn{background:white;color:#dc2743;align-self:flex-start;border-color:white;font-weight:800}
.ig-follow .btn:hover{background:var(--navy);color:white;border-color:var(--navy)}
.ig-icon{font-family:var(--mono);font-weight:800;font-size:.7rem;letter-spacing:.18em;opacity:.85}

/* ============================================================
   DARK MODE
   ============================================================ */
:root{
  --surface:#ffffff;
  --surface-alt:var(--off-white);
  --surface-soft:var(--teal-xpale);
  --text:var(--navy);
  --text-soft:var(--slate);
  --border-soft:rgba(61,143,163,.12);
}
[data-theme="dark"]{
  --surface:#0d1a26;
  --surface-alt:#0a1620;
  --surface-soft:#102230;
  --text:#e6eef3;
  --text-soft:#9fb3c4;
  --mid:#7a8da0;
  --slate:#cbd6e0;
  --navy:#e6eef3;             /* text on dark */
  --navy-mid:#dbe6ee;
  --teal-pale:rgba(61,143,163,.16);
  --teal-xpale:#0f2230;
  --off-white:#0a1620;
  --grid-line:rgba(255,255,255,.04);
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.6);
}
[data-theme="dark"] body{background:#06101a;color:var(--text-soft)}
[data-theme="dark"] .site-nav{background:rgba(13,26,38,.85);border-bottom-color:rgba(255,255,255,.06)}
[data-theme="dark"] .nav-links a{color:#b8c8d4}
[data-theme="dark"] .nav-links a:hover,[data-theme="dark"] .nav-links a.active{color:#fff;background:rgba(61,143,163,.18)}
[data-theme="dark"] .nav-links a.nav-cta{background:var(--gold);color:#0d1a26}
[data-theme="dark"] .nav-links a.nav-cta:hover{background:#f0c563}
[data-theme="dark"] .nav-drawer{background:#0d1a26}
[data-theme="dark"] .nav-toggle span{background:#e6eef3}

[data-theme="dark"] .section[style*="background:white"],
[data-theme="dark"] .section[style*="background: white"],
[data-theme="dark"] .section[style*="background:var(--off-white)"],
[data-theme="dark"] .section[style*="background:var(--teal-xpale)"]{background:#0a1620 !important}
[data-theme="dark"] .section-title:not(.light){color:#f3f7fa}
[data-theme="dark"] .body-text:not(.light){color:#b8c8d4}
[data-theme="dark"] .info-strip{background:rgba(61,143,163,.14);color:#cfe0e8}
[data-theme="dark"] .info-strip p{color:#b8c8d4}

[data-theme="dark"] .quote-card,
[data-theme="dark"] .pillar-card,
[data-theme="dark"] .curric-card,
[data-theme="dark"] .help-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .video-card,
[data-theme="dark"] .form-wrap,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .admin-card,
[data-theme="dark"] .login-shell{background:#0f2230;border-color:rgba(255,255,255,.06);color:#cfe0e8}
[data-theme="dark"] .pillar-name,[data-theme="dark"] .blog-body h3{color:#f3f7fa}
[data-theme="dark"] .pillar-desc,[data-theme="dark"] .blog-body p,[data-theme="dark"] .pillar-card p{color:#a3b6c5}
[data-theme="dark"] .blog-cover{background:linear-gradient(135deg,#0c2230,#06101a)}
[data-theme="dark"] .benefit-chip{background:rgba(61,143,163,.14);color:#cfe0e8;border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .blog-filter{background:#0f2230;color:#b8c8d4;border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .blog-filter.active{background:var(--gold);color:#0d1a26;border-color:var(--gold)}
[data-theme="dark"] .fg input,[data-theme="dark"] .fg select,[data-theme="dark"] .fg textarea{background:#0a1620;border-color:rgba(255,255,255,.1);color:#e6eef3}
[data-theme="dark"] .ftab{background:#0a1620;color:#7a8da0}
[data-theme="dark"] .ftab.active{background:#0f2230;color:#f3f7fa}
[data-theme="dark"] .form-tabs{border-bottom-color:rgba(255,255,255,.06)}
[data-theme="dark"] .ig-section{background:linear-gradient(180deg,#0a1620,#06101a)}
[data-theme="dark"] .ig-head h2{color:#f3f7fa}
[data-theme="dark"] .ig-head p{color:#a3b6c5}
[data-theme="dark"] .pull-quote{background:#0f2230;color:#e6eef3}
[data-theme="dark"] .admin-table th{background:rgba(61,143,163,.1);color:#9fb3c4}
[data-theme="dark"] .admin-table th,[data-theme="dark"] .admin-table td{border-bottom-color:rgba(255,255,255,.06);color:#cfe0e8}
[data-theme="dark"] .preview-pane{background:#06101a;border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .btn-google{background:#0f2230;color:#e6eef3;border-color:rgba(255,255,255,.1)}

/* Theme toggle button */
.theme-toggle{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--teal-pale);color:var(--teal-dark);border:1px solid rgba(61,143,163,.2);margin-left:.5rem;transition:var(--T);cursor:pointer}
.theme-toggle:hover{background:var(--gold);color:var(--navy);border-color:var(--gold);transform:rotate(20deg)}
.theme-toggle svg{width:18px;height:18px}
[data-theme="dark"] .theme-toggle{background:rgba(232,184,75,.16);color:var(--gold);border-color:rgba(232,184,75,.35)}
[data-theme="dark"] .theme-toggle:hover{background:var(--gold);color:#0d1a26}
.theme-toggle .ico-sun{display:none}
.theme-toggle .ico-moon{display:block}
[data-theme="dark"] .theme-toggle .ico-sun{display:block}
[data-theme="dark"] .theme-toggle .ico-moon{display:none}

/* Footer admin link */
.footer-admin{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.5);padding:.4rem .8rem;border:1px solid rgba(255,255,255,.12);border-radius:100px;transition:var(--T)}
.footer-admin:hover{color:var(--gold);border-color:var(--gold)}
.footer-admin::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}

/* ============================================================
   FUTURISTIC LAYER — animated grid, scanlines, glow, HUD
   ============================================================ */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(90,176,198,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,176,198,.08) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%);
  animation:gridDrift 30s linear infinite}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0,transparent 3px,rgba(255,255,255,.025) 3px,rgba(255,255,255,.025) 4px);
  mix-blend-mode:overlay;opacity:.5}
@keyframes gridDrift{to{background-position:64px 64px,64px 64px}}

.hero-h1 .acc,.hero-h1 .acc2{position:relative;display:inline-block}
.hero-h1 .acc{background:linear-gradient(110deg,var(--gold) 20%,#fff7d6 50%,var(--gold) 80%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 4s linear infinite}
.hero-h1 .acc2{background:linear-gradient(110deg,var(--teal-light) 20%,#cfeef5 50%,var(--teal-light) 80%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 4s linear infinite .8s}
@keyframes shimmer{to{background-position:-200% 0}}

.hero-pill{position:relative;font-family:var(--mono,'JetBrains Mono',monospace);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.5rem 1rem .5rem 2rem;border:1px solid rgba(232,184,75,.45);background:rgba(14,31,46,.4);backdrop-filter:blur(8px);
  color:#f5d27e;border-radius:100px;display:inline-flex;align-items:center;gap:.5rem}
.hero-pill::before{content:"";position:absolute;left:.85rem;width:8px;height:8px;border-radius:50%;background:#27e3a4;
  box-shadow:0 0 0 0 rgba(39,227,164,.7);animation:pulseDot 1.8s ease-out infinite}
@keyframes pulseDot{70%{box-shadow:0 0 0 10px rgba(39,227,164,0)}100%{box-shadow:0 0 0 0 rgba(39,227,164,0)}}

/* Hero stat chips → terminal HUD cards */
.hsc{position:relative;overflow:hidden}
.hsc::after{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:linear-gradient(180deg,transparent,var(--gold),transparent);opacity:.6}
.hsc-num{background:linear-gradient(180deg,#fff,#cfeef5);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Bento tiles → glow border + holographic sweep */
.bento{position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.34,1,.64,1),box-shadow .4s}
.bento::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(90,176,198,.4),transparent 40%,transparent 60%,rgba(232,184,75,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.6;transition:opacity .4s}
.bento::after{content:"";position:absolute;top:-50%;left:-60%;width:60%;height:200%;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.08) 50%,transparent 65%);
  transform:translateX(0);transition:transform .9s ease;pointer-events:none}
.bento:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(61,143,163,.25)}
.bento:hover::before{opacity:1}
.bento:hover::after{transform:translateX(280%)}

/* Section eyebrows → mono tech badges everywhere */
.tag-label{font-family:var(--mono,'JetBrains Mono',monospace);font-size:.66rem;letter-spacing:.22em}
.tag-label::before{content:"// "}

/* Gold bar gets a glow */
.gold-bar{box-shadow:0 0 18px rgba(232,184,75,.55)}

/* Live ticker strip */
.live-ticker{display:flex;gap:2.5rem;align-items:center;padding:.85rem 1.25rem;
  background:linear-gradient(90deg,#0a1620,#102230,#0a1620);color:#cfe0e8;
  border-top:1px solid rgba(90,176,198,.18);border-bottom:1px solid rgba(90,176,198,.18);
  font-family:var(--mono,'JetBrains Mono',monospace);font-size:.78rem;letter-spacing:.12em;overflow:hidden;white-space:nowrap}
.live-ticker .dot{width:8px;height:8px;border-radius:50%;background:#27e3a4;box-shadow:0 0 10px #27e3a4;flex-shrink:0}
.live-ticker .track{display:inline-flex;gap:3rem;animation:tick 38s linear infinite}
.live-ticker span.t{color:#9fb3c4}.live-ticker b{color:var(--gold);font-weight:600}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Behold widget container */
.behold-wrap{border:1px solid var(--border-soft);border-radius:20px;padding:1rem;background:linear-gradient(180deg,rgba(90,176,198,.04),transparent);position:relative}
.behold-wrap::before{content:"// live.feed";position:absolute;top:-10px;left:18px;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;color:var(--teal);background:var(--surface);padding:0 .6rem}
[data-theme="dark"] .behold-wrap{background:rgba(15,34,48,.5)}
[data-theme="dark"] .behold-wrap::before{background:#06101a;color:var(--gold)}

/* Section title gets subtle gradient on dark */
[data-theme="dark"] .section-title:not(.light){background:linear-gradient(180deg,#fff,#9fb3c4);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ============================================================
   CONTRAST FIXES — readable text in both themes
   ============================================================ */
/* Light mode: force inline white/light backgrounds to use dark text */
.section[style*="background:white"] .body-text,
.section[style*="background: white"] .body-text,
.section[style*="background:var(--off-white)"] .body-text{color:#3b4856}
.section .section-title{color:var(--navy)}

/* Dark mode contrast hardening */
[data-theme="dark"] body{color:#cfdae3}
[data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] .body-text{color:#cfdae3 !important}
[data-theme="dark"] .body-text.light{color:#cfdae3 !important}
[data-theme="dark"] .section-title,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4{color:#f3f7fa !important}
[data-theme="dark"] .section-title.light{color:#f3f7fa !important}
[data-theme="dark"] a{color:#9fd6e3}
[data-theme="dark"] a:hover{color:var(--gold)}
[data-theme="dark"] .quote-card blockquote{color:#e6eef3 !important}
[data-theme="dark"] .hsc-lbl{color:#9fb3c4 !important}
[data-theme="dark"] .who-badge{background:#0f2230;color:#e6eef3;border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .who-badge strong{color:var(--gold)}
[data-theme="dark"] .support-list li{color:#cfdae3}
[data-theme="dark"] .footer-admin{color:rgba(255,255,255,.7)}
[data-theme="dark"] .tag-label{color:var(--gold)}
[data-theme="dark"] .tag-label.white{color:var(--gold)}
[data-theme="dark"] .bento h3{color:#f3f7fa}
[data-theme="dark"] .bento p{color:#a3b6c5 !important}

/* Light mode: ensure tag labels readable */
.tag-label{color:var(--teal-dark)}
.tag-label.white{color:#f5d27e}
.tag-label.gold{color:var(--gold)}

/* ============================================================
   TECH DESIGN LAYER — circuit lines, corner brackets, scan grid
   ============================================================ */
/* Corner brackets on bento + key cards */
.bento::before,
.quote-card{position:relative}
.quote-card::before,.quote-card::after{
  content:"";position:absolute;width:18px;height:18px;border:2px solid var(--gold);opacity:.7
}
.quote-card::before{top:-2px;left:-2px;border-right:none;border-bottom:none}
.quote-card::after{bottom:-2px;right:-2px;border-left:none;border-top:none}

/* Animated circuit dot trail behind sections */
.bento-section{position:relative;overflow:hidden}
.bento-section::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:radial-gradient(circle,rgba(90,176,198,.25) 1px,transparent 1.5px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 80%)
}
[data-theme="dark"] .bento-section::before{opacity:.55;background-image:radial-gradient(circle,rgba(90,176,198,.4) 1px,transparent 1.5px)}

/* Section divider tech bar */
.section, .bento-section, .ig-section, .fv-section{position:relative}
.section + .section::before, .bento-section + .section::before,
.section + .bento-section::before, .ig-section::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:120px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);
  box-shadow:0 0 12px rgba(232,184,75,.6)
}

/* Tech badge variant for in-page accents */
.tech-badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono,'JetBrains Mono',monospace);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;padding:.4rem .8rem;border-radius:6px;
  background:rgba(90,176,198,.12);border:1px solid rgba(90,176,198,.3);color:var(--teal-dark)}
.tech-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
[data-theme="dark"] .tech-badge{background:rgba(232,184,75,.1);border-color:rgba(232,184,75,.3);color:var(--gold)}

/* Subtle scanline overlay on dark mode for sci-fi feel */
[data-theme="dark"] body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(180deg,transparent 0,transparent 3px,rgba(255,255,255,.012) 3px,rgba(255,255,255,.012) 4px)
}

/* Behold widget loading skeleton when feed-id unset */
.behold-wrap behold-widget:not(:defined),
.behold-wrap behold-widget:empty{
  display:block;min-height:280px;border-radius:14px;
  background:
    linear-gradient(110deg,transparent 30%,rgba(90,176,198,.08) 50%,transparent 70%) 0 0/200% 100%,
    repeating-linear-gradient(90deg,rgba(90,176,198,.06) 0 1px,transparent 1px 38px),
    repeating-linear-gradient(0deg,rgba(90,176,198,.06) 0 1px,transparent 1px 38px);
  animation:beholdShimmer 2.4s linear infinite;
  position:relative
}
.behold-wrap behold-widget:not(:defined)::after,
.behold-wrap behold-widget:empty::after{
  content:"// connecting to instagram…";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;color:var(--mid)
}
@keyframes beholdShimmer{to{background-position:-200% 0,0 0,0 0}}

/* ============================================================
   DARK MODE TEXT VISIBILITY — FINAL OVERRIDES
   Handles inline color:white / rgba(255,255,255,...) that vanish
   when bg flips, and forces readable text everywhere.
   ============================================================ */
[data-theme="dark"]{
  color-scheme:dark;
}
/* Strip any inline white/light colors that become invisible on white bg in light mode
   — we instead key visibility on the section bg, not light hex */
[data-theme="dark"] *[style*="color:white"],
[data-theme="dark"] *[style*="color: white"],
[data-theme="dark"] *[style*="color:#fff"],
[data-theme="dark"] *[style*="color:#FFF"],
[data-theme="dark"] *[style*="color:rgba(255,255,255"]{color:#f3f7fa !important}

/* Light mode: same inline whites are intentional (sit on dark cards) — leave alone */

/* Force readable text on every text element in dark mode regardless of inline styles */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6{color:#f5f9fc !important}
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span:not(.tag-label):not(.tech-badge):not(.hero-pill):not(.acc):not(.acc2):not(.dot):not(.t):not([class*="badge"]),
[data-theme="dark"] blockquote,
[data-theme="dark"] label,
[data-theme="dark"] td{color:#d4dee6 !important}
[data-theme="dark"] strong{color:#f5f9fc !important}

/* Dark cards/CTA tiles keep their white text */
[data-theme="dark"] .bento-cta *,
[data-theme="dark"] .alumni-strip *,
[data-theme="dark"] .fv-section *,
[data-theme="dark"] .hero *,
[data-theme="dark"] .footer *,
[data-theme="dark"] .site-footer *{color:inherit}
[data-theme="dark"] .bento-cta h3,
[data-theme="dark"] .alumni-strip h2,
[data-theme="dark"] .fv-section h2,
[data-theme="dark"] .hero h1{color:#ffffff !important}
[data-theme="dark"] .bento-cta p,
[data-theme="dark"] .alumni-strip p,
[data-theme="dark"] .fv-section .body-text,
[data-theme="dark"] .hero-sub{color:rgba(255,255,255,.85) !important}

/* Light mode: make sure inline color:white still works on dark cards (no change needed,
   but ensure body text on white bg is solid dark) */
:root .section[style*="background:white"] p,
:root .section[style*="background: white"] p,
:root .section[style*="background:var(--off-white)"] p{color:#2d3a47}
:root .section[style*="background:white"] h2,
:root .section[style*="background:white"] h3{color:#0e1f2e}

/* ============================================================
   LIGHT MODE TEXT — make all body copy noticeably darker
   ============================================================ */
:root{
  --text:#0a1622;
  --text-soft:#243240;
  --slate:#1f2d3a;
  --mid:#4a5a6b;
  --navy:#0a1622;
  --navy-mid:#13202d;
}
body{color:#1a2632}
p,li,blockquote,label,td{color:#243240}
h1,h2,h3,h4,h5,h6{color:#0a1622}
strong{color:#0a1622}
.body-text{color:#243240}
.body-text.light{color:rgba(255,255,255,.92)}
.section-title{color:#0a1622}
.section-title.light{color:#ffffff}
.hsc-lbl{color:rgba(255,255,255,.78)}
.support-list li{color:#243240}
.info-strip p{color:#243240}
.info-strip strong{color:#0a1622}
.tag-label{color:#1a5f73}
.tag-label.white{color:#f5d27e}
.tag-label.gold{color:#b8881f}
/* Bento lives on dark navy section — keep light text */
.bento-section,.bento-section *{color:#e6eef5}
.bento h3,.bento-head h2,.bento-img .bento-overlay h3{color:#ffffff !important}
.bento p,.bento-head p{color:rgba(230,238,245,.78) !important}
.bento-big p{color:rgba(255,255,255,.9) !important}
.bento-eyebrow{color:#f5d27e !important}
.bento-cta h3,.bento-cta p,.bento-cta *{color:#ffffff !important}
.bento-cta .btn{color:var(--navy) !important}
.bento-icon{color:var(--navy) !important}
/* More visible card surfaces on the navy background */
.bento{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025)) !important;border:1px solid rgba(159,214,227,.14) !important;backdrop-filter:blur(8px)}
.bento-big{background:linear-gradient(155deg,rgba(61,143,163,.45),rgba(14,31,46,.55)),url('../images/eyl_leaders.jpg') center/cover !important}
.bento-cta{background:linear-gradient(135deg,var(--teal),var(--teal-dark)) !important;border-color:transparent !important}
.pillar-name,.blog-body h3{color:#0a1622}
.pillar-desc,.blog-body p{color:#3a4a5c}
.benefit-chip{color:#0a1622}
.quote-card blockquote{color:#0a1622}
.hero-sub{color:rgba(255,255,255,.92)}

/* Dark mode: keep white-on-dark cards intact, lift body text */
[data-theme="dark"] body{color:#dde6ee}
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] blockquote,
[data-theme="dark"] label,
[data-theme="dark"] td{color:#dde6ee !important}
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6{color:#ffffff !important}
[data-theme="dark"] strong{color:#ffffff !important}
[data-theme="dark"] .body-text{color:#dde6ee !important}
[data-theme="dark"] .section-title{color:#ffffff !important}
[data-theme="dark"] .tag-label{color:#f5d27e !important}
[data-theme="dark"] .bento-eyebrow{color:#9fd6e3 !important}
[data-theme="dark"] .benefit-chip{color:#dde6ee !important}

/* Restore gradient-clipped text after broad color overrides */
[data-theme="dark"] .hero-h1 .acc,
[data-theme="dark"] .hero-h1 .acc2,
.hero-h1 .acc,.hero-h1 .acc2{color:transparent !important;-webkit-text-fill-color:transparent}
[data-theme="dark"] .section-title:not(.light){
  background:linear-gradient(180deg,#fff,#9fb3c4);
  -webkit-background-clip:text;background-clip:text;
  color:transparent !important;-webkit-text-fill-color:transparent
}
[data-theme="dark"] .hsc-num{color:transparent !important;-webkit-text-fill-color:transparent}

/* Inputs / placeholders */
input,select,textarea{color:#0a1622;background:#ffffff}
input::placeholder,textarea::placeholder{color:#6b7785;opacity:1}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{color:#e6eef3 !important;background:#0a1620 !important;border-color:rgba(255,255,255,.12)}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:#7a8da0 !important}

/* Buttons: explicit text colors per variant */
.btn-gold{color:#0a1622 !important}
.btn-teal{color:#ffffff !important}
.btn-outline-white{color:#ffffff !important}
[data-theme="dark"] .btn-gold{color:#0a1622 !important}
[data-theme="dark"] .btn-teal{color:#ffffff !important}

/* Links inherit surface color; only paragraph/list links get the teal accent */
a{color:inherit}
.section p a, .section li a, .blog-card a.read-more, .info-strip a, .ig-section a{color:#1a5f73}
.section p a:hover, .section li a:hover, .info-strip a:hover{color:#b8881f}
.hero a, .fv-section a, .alumni-strip a, .bento-section a, .bento-cta a,
.page-hero-content a, .site-footer a, .footer a, .quote-card a{color:#ffffff}
.hero a:hover, .fv-section a:hover, .alumni-strip a:hover, .bento-section a:hover,
.page-hero-content a:hover, .site-footer a:hover{color:#f5d27e}
.nav-links a,.btn{color:inherit}


/* ============================================================
   TECH BACKGROUND — subtle circuit grid behind the whole site
   ============================================================ */
:root{
  --tech-grid: 
    linear-gradient(rgba(26,95,115,.055) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, rgba(26,95,115,.055) 1px, transparent 1px) 0 0/44px 44px,
    radial-gradient(circle at 20% 10%, rgba(26,95,115,.10), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(232,184,75,.10), transparent 50%);
}
[data-theme="dark"]{
  --tech-grid:
    linear-gradient(rgba(159,214,227,.06) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, rgba(159,214,227,.06) 1px, transparent 1px) 0 0/44px 44px,
    radial-gradient(circle at 15% 15%, rgba(26,95,115,.35), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(232,184,75,.18), transparent 50%);
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(rgba(26,95,115,.05) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg, rgba(26,95,115,.05) 1px, transparent 1px) 0 0/48px 48px,
    radial-gradient(900px 600px at 12% 8%, rgba(26,95,115,.10), transparent 60%),
    radial-gradient(900px 600px at 88% 92%, rgba(232,184,75,.08), transparent 60%),
    linear-gradient(180deg,#f6f9fb 0%, #eef3f6 50%, #f6f9fb 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.32;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'><g fill='none' stroke='%231a5f73' stroke-width='.7' opacity='.55'><path d='M0 60 H140 V130 H260 V30 H400 V170 H480'/><path d='M0 240 H100 V340 H220 V270 H360 V390 H480'/><path d='M0 430 H160 V370 H310 V450 H480'/><circle cx='140' cy='60' r='2.5' fill='%231a5f73'/><circle cx='260' cy='130' r='2.5' fill='%231a5f73'/><circle cx='400' cy='30' r='2.5' fill='%23e8b84b'/><circle cx='100' cy='240' r='2.5' fill='%23e8b84b'/><circle cx='220' cy='340' r='2.5' fill='%231a5f73'/><circle cx='360' cy='270' r='2.5' fill='%231a5f73'/><circle cx='160' cy='430' r='2.5' fill='%231a5f73'/><circle cx='310' cy='370' r='2.5' fill='%23e8b84b'/></g></svg>");
  background-repeat:repeat;background-size:480px 480px;
}

[data-theme="dark"] body::after{opacity:.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'><g fill='none' stroke='%239fd6e3' stroke-width='.8' opacity='.25'><path d='M0 80 H180 V160 H320 V40 H500 V200 H600'/><path d='M0 300 H120 V420 H260 V340 H440 V480 H600'/><path d='M0 540 H200 V460 H380 V560 H600'/><circle cx='180' cy='80' r='3' fill='%239fd6e3'/><circle cx='320' cy='160' r='3' fill='%239fd6e3'/><circle cx='500' cy='40' r='3' fill='%23f5d27e'/><circle cx='120' cy='300' r='3' fill='%23f5d27e'/><circle cx='260' cy='420' r='3' fill='%239fd6e3'/><circle cx='440' cy='340' r='3' fill='%239fd6e3'/><circle cx='200' cy='540' r='3' fill='%239fd6e3'/><circle cx='380' cy='460' r='3' fill='%23f5d27e'/></g></svg>");
}
/* keep sections on top of tech bg, but allow some to be translucent */
.section{position:relative;z-index:1}

/* ============================================================
   LIGHT-MODE FIX: force dark text on white/light backgrounds
   even when inline color:white or .light helper is used.
   ============================================================ */
:root .section[style*="background:white"] *,
:root .section[style*="background: white"] *,
:root .section[style*="background:#fff"] *,
:root .section[style*="background:var(--off-white)"] *{
  /* don't override gradient text */
}
:root .section[style*="background:white"] [style*="color:white"],
:root .section[style*="background:white"] [style*="color:#fff"],
:root .section[style*="background:white"] [style*="rgba(255,255,255"],
:root .section[style*="background: white"] [style*="color:white"],
:root .section[style*="background:var(--off-white)"] [style*="color:white"]{
  color:#0a1622 !important;
}
:root .section[style*="background:white"] .body-text.light,
:root .section[style*="background:white"] .section-title.light,
:root .section[style*="background:var(--off-white)"] .body-text.light,
:root .section[style*="background:var(--off-white)"] .section-title.light{
  color:#0a1622 !important;
}
/* Generic: any element whose nearest non-dark surface is light should not
   render with white-ish text in light mode. Catch common low-contrast cases. */
:root .ig-section,
:root .ig-head,
:root .ig-head p,
:root .ig-head h2{color:#0a1622}
:root .ig-head p{color:#243240}
:root .blog-meta{color:#4a5a6b}
:root .page-hero-content{color:#fff} /* hero overlay stays light */

/* Ensure the page hero overlay text remains light (it's over a dark image) */
.page-hero-content,.page-hero-content *{color:#ffffff}
.page-hero-content p{color:rgba(255,255,255,.92)}

/* ============================================================
   DARK SURFACES — keep text light in BOTH light & dark modes
   (overrides any earlier broad light-mode rules)
   ============================================================ */
.hero, .hero *,
.fv-section, .fv-section *,
.alumni-strip, .alumni-strip *,
.bento-cta, .bento-cta *,
.page-hero-content, .page-hero-content *,
.footer, .footer *,
.site-footer, .site-footer *{
  color:#ffffff;
}
.hero p, .hero .hero-sub,
.fv-section p, .fv-section .body-text,
.alumni-strip p,
.bento-cta p,
.page-hero-content p,
.footer p, .site-footer p{
  color:rgba(255,255,255,.88) !important;
}
.hero h1, .hero h2,
.fv-section h1, .fv-section h2, .fv-section h3,
.alumni-strip h1, .alumni-strip h2, .alumni-strip h3,
.bento-cta h1, .bento-cta h2, .bento-cta h3,
.page-hero-content h1, .page-hero-content h2{
  color:#ffffff !important;
}
/* preserve gradient text */
.hero-h1 .acc, .hero-h1 .acc2,
[data-theme="dark"] .hero-h1 .acc, [data-theme="dark"] .hero-h1 .acc2{
  color:transparent !important;-webkit-text-fill-color:transparent;
}
.hsc-num{color:transparent !important;-webkit-text-fill-color:transparent}

/* ============================================================
   DARK MODE — distinct palette (cooler, deeper, more electric)
   ============================================================ */
[data-theme="dark"]{
  --bg:#070d14;
  --off-white:#0b1420;
  --teal:#22d3c5;
  --teal-deep:#0e8a82;
  --gold:#f5d27e;
  --navy:#e8f1f8;
}
[data-theme="dark"] body{background:#070d14}
[data-theme="dark"] .section[style*="background:white"],
[data-theme="dark"] .section[style*="background: white"]{
  background:linear-gradient(180deg,#0b1622,#0a1320) !important;
}
[data-theme="dark"] .section[style*="background:var(--off-white)"]{
  background:#08111c !important;
}
[data-theme="dark"] .blog-card,
[data-theme="dark"] .quote-card,
[data-theme="dark"] .info-strip,
[data-theme="dark"] .who-badge,
[data-theme="dark"] .bento,
[data-theme="dark"] .pillar-card{
  background:linear-gradient(180deg,rgba(34,211,197,.06),rgba(245,210,126,.04)) !important;
  border:1px solid rgba(34,211,197,.18) !important;
  box-shadow:0 0 0 1px rgba(34,211,197,.06), 0 20px 60px -30px rgba(34,211,197,.25);
}
[data-theme="dark"] .btn-teal{
  background:linear-gradient(135deg,#22d3c5,#0e8a82) !important;
  box-shadow:0 0 0 1px rgba(34,211,197,.4), 0 10px 30px -10px rgba(34,211,197,.55);
}
[data-theme="dark"] .btn-gold{
  background:linear-gradient(135deg,#f5d27e,#c9a14a) !important;
}

/* ============================================================
   TECH-CHIP / NEURAL BRAIN BACKGROUND
   replaces the lighter grid with a richer circuit + neural map
   ============================================================ */
body::after{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'><defs><radialGradient id='n' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%231a5f73' stop-opacity='.5'/><stop offset='100%25' stop-color='%231a5f73' stop-opacity='0'/></radialGradient></defs><g fill='none' stroke='%231a5f73' stroke-width='.9' opacity='.28'><rect x='340' y='340' width='220' height='220' rx='14'/><rect x='380' y='380' width='140' height='140' rx='8' stroke='%23e8b84b' opacity='.6'/><path d='M340 380 H300 V260 H220'/><path d='M340 420 H260'/><path d='M340 460 H280 V520 H200'/><path d='M340 500 H240'/><path d='M560 380 H620 V260 H720'/><path d='M560 420 H660'/><path d='M560 460 H640 V520 H720'/><path d='M560 500 H660 V600 H760'/><path d='M380 340 V280 H300 V200'/><path d='M420 340 V240'/><path d='M460 340 V260 H540 V180'/><path d='M500 340 V220'/><path d='M380 560 V640 H280 V740'/><path d='M420 560 V680'/><path d='M460 560 V640 H560 V740'/><path d='M500 560 V700'/></g><g fill='%231a5f73' opacity='.45'><circle cx='220' cy='260' r='3'/><circle cx='260' cy='420' r='3'/><circle cx='200' cy='520' r='3'/><circle cx='240' cy='500' r='3'/><circle cx='720' cy='260' r='3'/><circle cx='660' cy='420' r='3'/><circle cx='720' cy='520' r='3'/><circle cx='760' cy='600' r='3'/><circle cx='300' cy='200' r='3'/><circle cx='420' cy='240' r='3'/><circle cx='540' cy='180' r='3'/><circle cx='500' cy='220' r='3'/><circle cx='280' cy='740' r='3'/><circle cx='420' cy='680' r='3'/><circle cx='560' cy='740' r='3'/><circle cx='500' cy='700' r='3'/></g><g fill='%23e8b84b' opacity='.55'><circle cx='450' cy='450' r='5'/><circle cx='400' cy='400' r='2.5'/><circle cx='500' cy='400' r='2.5'/><circle cx='400' cy='500' r='2.5'/><circle cx='500' cy='500' r='2.5'/></g><circle cx='450' cy='450' r='140' fill='url(%23n)'/></svg>") !important;
  background-size:780px 780px !important;
  background-position:center center !important;
  opacity:.55 !important;
}
[data-theme="dark"] body::after{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'><defs><radialGradient id='n' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%2322d3c5' stop-opacity='.5'/><stop offset='100%25' stop-color='%2322d3c5' stop-opacity='0'/></radialGradient></defs><g fill='none' stroke='%2322d3c5' stroke-width='1' opacity='.45'><rect x='340' y='340' width='220' height='220' rx='14'/><rect x='380' y='380' width='140' height='140' rx='8' stroke='%23f5d27e' opacity='.7'/><path d='M340 380 H300 V260 H220'/><path d='M340 420 H260'/><path d='M340 460 H280 V520 H200'/><path d='M340 500 H240'/><path d='M560 380 H620 V260 H720'/><path d='M560 420 H660'/><path d='M560 460 H640 V520 H720'/><path d='M560 500 H660 V600 H760'/><path d='M380 340 V280 H300 V200'/><path d='M420 340 V240'/><path d='M460 340 V260 H540 V180'/><path d='M500 340 V220'/><path d='M380 560 V640 H280 V740'/><path d='M420 560 V680'/><path d='M460 560 V640 H560 V740'/><path d='M500 560 V700'/></g><g fill='%2322d3c5' opacity='.7'><circle cx='220' cy='260' r='3.5'/><circle cx='260' cy='420' r='3.5'/><circle cx='200' cy='520' r='3.5'/><circle cx='240' cy='500' r='3.5'/><circle cx='720' cy='260' r='3.5'/><circle cx='660' cy='420' r='3.5'/><circle cx='720' cy='520' r='3.5'/><circle cx='760' cy='600' r='3.5'/><circle cx='300' cy='200' r='3.5'/><circle cx='420' cy='240' r='3.5'/><circle cx='540' cy='180' r='3.5'/><circle cx='500' cy='220' r='3.5'/><circle cx='280' cy='740' r='3.5'/><circle cx='420' cy='680' r='3.5'/><circle cx='560' cy='740' r='3.5'/><circle cx='500' cy='700' r='3.5'/></g><g fill='%23f5d27e' opacity='.8'><circle cx='450' cy='450' r='6'/><circle cx='400' cy='400' r='3'/><circle cx='500' cy='400' r='3'/><circle cx='400' cy='500' r='3'/><circle cx='500' cy='500' r='3'/></g><circle cx='450' cy='450' r='160' fill='url(%23n)'/></svg>") !important;
  opacity:.5 !important;
}

/* subtle pulse on the chip core */
@keyframes techPulse{0%,100%{opacity:.45}50%{opacity:.7}}
body::after{animation:techPulse 6s ease-in-out infinite}

/* ============================================================
   LIGHT MODE — match the dark-mode tech look (glassy cards,
   electric teal accents) but keep text near-black for contrast
   ============================================================ */
:root .blog-card,
:root .quote-card,
:root .info-strip,
:root .who-badge,
:root .bento,
:root .pillar-card{
  background:linear-gradient(180deg,rgba(34,211,197,.08),rgba(245,210,126,.05)) !important;
  border:1px solid rgba(26,95,115,.18) !important;
  box-shadow:0 0 0 1px rgba(26,95,115,.05), 0 20px 60px -30px rgba(26,95,115,.35) !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
:root .btn-teal{
  background:linear-gradient(135deg,#1a5f73,#22d3c5) !important;
  box-shadow:0 0 0 1px rgba(26,95,115,.3), 0 10px 30px -10px rgba(26,95,115,.5) !important;
  color:#ffffff !important;
}
:root .btn-gold{
  background:linear-gradient(135deg,#e8b84b,#b8881f) !important;
  color:#0a1622 !important;
}

/* DARKER TEXT in light mode — push everything toward true black */
:root body{color:#05101a !important}
:root p,:root li,:root blockquote,:root label,:root td,:root span{color:#0e1a26}
:root h1,:root h2,:root h3,:root h4,:root h5,:root h6{color:#04080d !important}
:root strong{color:#04080d !important}
:root .body-text{color:#0e1a26 !important}
:root .section-title:not(.light){color:#04080d !important}
:root .bento h3,:root .pillar-name,:root .blog-body h3,:root .quote-card blockquote{color:#04080d !important}
:root .bento p,:root .pillar-desc,:root .blog-body p,:root .support-list li,:root .info-strip p{color:#1a2632 !important}
:root .tag-label{color:#0e6478 !important;font-weight:700}
:root .bento-eyebrow{color:#0e6478 !important;font-weight:700}
:root .blog-meta{color:#2a3a4a !important}
:root .nav-links a{color:#04080d !important}
:root a{color:#0e6478}
:root a:hover{color:#8b5e0f}

/* re-protect: dark surfaces still light text in light mode */
:root .hero, :root .hero *,
:root .fv-section, :root .fv-section *,
:root .alumni-strip, :root .alumni-strip *,
:root .bento-cta, :root .bento-cta *,
:root .page-hero-content, :root .page-hero-content *,
:root .footer, :root .footer *,
:root .site-footer, :root .site-footer *{
  color:#ffffff !important;
}
:root .hero p,:root .hero .hero-sub,
:root .fv-section p,:root .fv-section .body-text,
:root .alumni-strip p,:root .bento-cta p,
:root .page-hero-content p,
:root .footer p,:root .site-footer p{
  color:rgba(255,255,255,.9) !important;
}
:root .hero-h1 .acc,:root .hero-h1 .acc2,
:root .hsc-num,
:root .section-title:not(.light)[class*="gradient"]{
  color:transparent !important;-webkit-text-fill-color:transparent;
}

/* ============================================================
   FINAL CONTRAST PASS — surface-aware text color
   Rule: text matches its surface, in BOTH themes.
   - Light surfaces (default page bg, white/off-white sections, glassy cards) → dark text
   - Dark surfaces (.hero, .fv-section, .alumni-strip, .bento-cta, .footer, .site-footer, .page-hero-content) → light text
   ============================================================ */

/* ---------- LIGHT MODE ---------- */
:root .section,
:root .bento:not(.bento-cta),
:root .blog-card,
:root .quote-card,
:root .info-strip,
:root .who-badge,
:root .pillar-card,
:root .ig-section,
:root .container{
  color:#0a1622;
}
:root .section h1,:root .section h2,:root .section h3,:root .section h4,
:root .bento:not(.bento-cta) h1,:root .bento:not(.bento-cta) h2,:root .bento:not(.bento-cta) h3,
:root .blog-card h1,:root .blog-card h2,:root .blog-card h3,
:root .pillar-card h1,:root .pillar-card h2,:root .pillar-card h3,
:root .quote-card blockquote{color:#04080d !important}
:root .section p,:root .section li,:root .section span:not(.acc):not(.acc2):not(.unit),
:root .bento:not(.bento-cta) p,
:root .blog-card p,
:root .pillar-card p,
:root .info-strip p{color:#1a2632 !important}

/* dark surfaces in light mode → light text */
:root .hero,:root .hero *,
:root .fv-section,:root .fv-section *,
:root .alumni-strip,:root .alumni-strip *,
:root .bento-cta,:root .bento-cta *,
:root .page-hero-content,:root .page-hero-content *,
:root .footer,:root .footer *,
:root .site-footer,:root .site-footer *{color:#ffffff !important}
:root .hero p,:root .hero .hero-sub,
:root .fv-section p,:root .fv-section .body-text,
:root .alumni-strip p,:root .bento-cta p,
:root .footer p,:root .site-footer p,
:root .page-hero-content p{color:rgba(255,255,255,.9) !important}

/* ---------- DARK MODE ---------- */
[data-theme="dark"] .section,
[data-theme="dark"] .bento,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .quote-card,
[data-theme="dark"] .info-strip,
[data-theme="dark"] .who-badge,
[data-theme="dark"] .pillar-card,
[data-theme="dark"] .ig-section,
[data-theme="dark"] .container{
  color:#eaf2f8;
}
[data-theme="dark"] .section h1,[data-theme="dark"] .section h2,[data-theme="dark"] .section h3,[data-theme="dark"] .section h4,
[data-theme="dark"] .bento h1,[data-theme="dark"] .bento h2,[data-theme="dark"] .bento h3,
[data-theme="dark"] .blog-card h1,[data-theme="dark"] .blog-card h2,[data-theme="dark"] .blog-card h3,
[data-theme="dark"] .pillar-card h1,[data-theme="dark"] .pillar-card h2,[data-theme="dark"] .pillar-card h3,
[data-theme="dark"] .quote-card blockquote{color:#ffffff !important}
[data-theme="dark"] .section p,[data-theme="dark"] .section li,[data-theme="dark"] .section span:not(.acc):not(.acc2):not(.unit),
[data-theme="dark"] .bento p,
[data-theme="dark"] .blog-card p,
[data-theme="dark"] .pillar-card p,
[data-theme="dark"] .info-strip p{color:#dde6ee !important}

/* keep dark-surface components fully white in dark mode too */
[data-theme="dark"] .hero,[data-theme="dark"] .hero *,
[data-theme="dark"] .fv-section,[data-theme="dark"] .fv-section *,
[data-theme="dark"] .alumni-strip,[data-theme="dark"] .alumni-strip *,
[data-theme="dark"] .bento-cta,[data-theme="dark"] .bento-cta *,
[data-theme="dark"] .page-hero-content,[data-theme="dark"] .page-hero-content *,
[data-theme="dark"] .footer,[data-theme="dark"] .footer *,
[data-theme="dark"] .site-footer,[data-theme="dark"] .site-footer *{color:#ffffff !important}

/* preserve gradient-clipped text everywhere */
.hero-h1 .acc,.hero-h1 .acc2,.hsc-num{
  color:transparent !important;-webkit-text-fill-color:transparent !important;
}

/* buttons keep their own text colors */
.btn-gold,[data-theme="dark"] .btn-gold,:root .btn-gold{color:#0a1622 !important}
.btn-teal,[data-theme="dark"] .btn-teal,:root .btn-teal,
.btn-outline-white,[data-theme="dark"] .btn-outline-white,:root .btn-outline-white{color:#ffffff !important}

/* ============================================================
   SMOOTH SECTION FLOW — gradient transitions, card translucency,
   text contrast harmonisation across the whole site.
   ============================================================ */

/* Body gets a single soft canvas so sections fade into each other
   instead of butting hard against pure white. */
:root body{ background:transparent }


/* Soft fade between any two adjacent sections (top + bottom edges) */
.section{position:relative; background:transparent}
.section + .section::before{
  content:""; position:absolute; left:0; right:0; top:-60px; height:60px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.55));
  pointer-events:none;
}

/* Light sections become softly translucent panels on the canvas */
:root .section[style*="background:white"],
:root .section[style*="background: white"],
:root .section[style*="background:#fff"],
:root .section[style*="background:var(--off-white)"],
:root .section[style*="background:var(--teal-xpale)"]{
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(247,250,252,.6)) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Dark sections get a smoother teal→navy sweep that hands off cleanly
   to the next light section. */
.hero,
.fv-section,
.alumni-strip,
.bento-section{
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(61,143,163,.28), transparent 60%),
    radial-gradient(800px 600px at 100% 100%, rgba(232,184,75,.10), transparent 65%),
    linear-gradient(170deg, #0b1b29 0%, #0e2433 55%, #112c3e 100%) !important;
}
.hero::after, .fv-section::after, .bento-section::after,
.alumni-strip::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:80px;
  background:linear-gradient(180deg, transparent, rgba(246,249,251,.85));
  pointer-events:none; z-index:1;
}

/* Footer mirrors the dark gradient direction for continuity */
.site-footer{
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(61,143,163,.22), transparent 60%),
    linear-gradient(180deg,#0b1b29,#06101a) !important;
}

/* Card translucency — unified glassy look across all card surfaces */
:root .blog-card,
:root .pillar-card,
:root .quote-card,
:root .info-strip,
:root .who-badge,
:root .feature-card,
:root .help-card,
:root .curric-card,
:root .video-card,
:root .form-wrap{
  background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(246,250,252,.78)) !important;
  border:1px solid rgba(61,143,163,.16) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -12px rgba(14,31,46,.12), 0 1px 0 rgba(255,255,255,.6) inset;
}

/* Bento cards stay glassy over the dark bento canvas */
:root .bento:not(.bento-cta){
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
:root .bento-cta{
  background:linear-gradient(135deg, #1c6d80, #0e2433) !important;
}

/* TEXT CONTRAST — unified rules */

/* On the light canvas: deep navy headings, slate body */
:root .section h1, :root .section h2, :root .section h3, :root .section h4,
:root .blog-card h2, :root .blog-card h3,
:root .pillar-card h3, :root .pillar-name{color:#0a1622 !important}

:root .section p, :root .section li,
:root .blog-card p, :root .pillar-card p, :root .pillar-desc,
:root .body-text{color:#2a3a4a !important}

:root .tag-label, :root .bento-eyebrow{color:#0e6478 !important}

/* On the dark sections: keep text white/near-white with smooth alpha */
.hero, .hero *,
.fv-section, .fv-section *,
.alumni-strip, .alumni-strip *,
.bento-section .bento-head, .bento-section .bento-head *,
.bento-cta, .bento-cta *,
.page-hero-content, .page-hero-content *,
.site-footer, .site-footer *{color:#ffffff}

.hero-sub, .fv-section p, .alumni-strip p,
.bento-section .bento-head p, .page-hero-content p,
.site-footer p, .site-footer a{color:rgba(255,255,255,.78) !important}

.bento p{color:rgba(255,255,255,.72) !important}
.bento h3, .bento-title{color:#ffffff !important}

/* Preserve gradient-clipped accents */
.hero-h1 .acc, .hero-h1 .acc2, .hsc-num,
.bento-head h2 .acc{
  color:transparent !important; -webkit-text-fill-color:transparent !important;
}

/* Buttons keep their own ink */
.btn-gold{color:#0a1622 !important}
.btn-teal, .btn-outline-white{color:#ffffff !important}

/* ===== Get Involved nav CTA: keep solid CTA styling on its own page ===== */
.nav-links a.nav-cta,
.nav-links a.nav-cta.active,
.nav-links a.nav-cta:hover{
  background:var(--navy) !important;
  color:#ffffff !important;
}
.nav-links a.nav-cta:hover,
.nav-links a.nav-cta.active{
  background:var(--teal-dark) !important;
  box-shadow:0 8px 20px -8px rgba(37,100,116,.55);
}
.nav-drawer a.nav-cta-mob,
.nav-drawer a.nav-cta-mob.active{
  background:var(--navy) !important;color:#ffffff !important;
}

/* ===== Final contrast safety net =====
   Any descendant text inside a known DARK surface is light;
   inside a LIGHT surface is dark. Overrides earlier broad rules. */
.hero, .hero h1, .hero h2, .hero h3, .hero h4, .hero p, .hero li, .hero span, .hero a,
.fv-section, .fv-section h1, .fv-section h2, .fv-section h3, .fv-section p, .fv-section li, .fv-section span, .fv-section a,
.alumni-strip, .alumni-strip h1, .alumni-strip h2, .alumni-strip h3, .alumni-strip p, .alumni-strip span, .alumni-strip a,
.bento-section .bento-head, .bento-section .bento-head h1, .bento-section .bento-head h2, .bento-section .bento-head p,
.bento-cta, .bento-cta h1, .bento-cta h2, .bento-cta h3, .bento-cta p, .bento-cta span,
.page-hero-content, .page-hero-content h1, .page-hero-content h2, .page-hero-content p,
.site-footer, .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer p, .site-footer a, .site-footer span,
.quote-card, .quote-card *{color:#ffffff !important}

.hero-sub, .fv-section p, .alumni-strip p,
.bento-section .bento-head p, .page-hero-content p,
.site-footer p, .site-footer a, .site-footer span,
.footer-tagline, .footer-col a{color:rgba(255,255,255,.78) !important}

.bento:not(.bento-cta) p{color:rgba(255,255,255,.72) !important}
.bento:not(.bento-cta) h3,
.bento:not(.bento-cta) .bento-title{color:#ffffff !important}

/* Light surfaces */
.section:not(.hero):not(.fv-section):not(.alumni-strip):not(.bento-section):not(.bento-cta) h1,
.section:not(.hero):not(.fv-section):not(.alumni-strip):not(.bento-section):not(.bento-cta) h2,
.section:not(.hero):not(.fv-section):not(.alumni-strip):not(.bento-section):not(.bento-cta) h3,
.section:not(.hero):not(.fv-section):not(.alumni-strip):not(.bento-section):not(.bento-cta) h4,
.blog-card h2, .blog-card h3, .blog-card h4,
.pillar-card h3, .pillar-card h4, .pillar-name,
.info-strip h3, .info-strip h4{color:#0a1622 !important}

.section:not(.hero):not(.fv-section):not(.alumni-strip):not(.bento-section):not(.bento-cta) p,
.section:not(.hero):not(.fv-section):not(.alumni-strip):not(.bento-section):not(.bento-cta) li,
.blog-card p, .pillar-card p, .pillar-desc,
.info-strip p, .info-strip{color:#2a3a4a !important}

.tag-label, .bento-eyebrow{color:#0e6478 !important}

/* Preserve gradient-clipped accents */
.hero-h1 .acc, .hero-h1 .acc2, .hsc-num,
.bento-head h2 .acc, .section-title .acc{
  color:transparent !important;-webkit-text-fill-color:transparent !important;
}

/* Buttons */
.btn-gold{color:#0a1622 !important}
.btn-teal,.btn-outline-white,.btn-navy{color:#ffffff !important}

/* ============================================================
   2026 TECH UI REFRESH — final surface + contrast system
   Preserves Methodix teal/gold/navy while making every section
   read as one lighter, cohesive technology interface.
   ============================================================ */
:root{
  --tech-ink:#07131f;
  --tech-ink-soft:#263848;
  --tech-on-dark:#f6fbff;
  --tech-on-dark-soft:#d7e7ef;
  --tech-cyan:#3d8fa3;
  --tech-cyan-bright:#5ab0c6;
  --tech-gold:#e8b84b;
  --tech-dark-a:#143144;
  --tech-dark-b:#1c4152;
  --tech-dark-c:#256474;
  --tech-panel:rgba(255,255,255,.82);
  --tech-panel-strong:rgba(255,255,255,.94);
  --tech-border:rgba(61,143,163,.24);
}

html{background:#eef6f8}
body{
  color:var(--tech-ink-soft) !important;
  background:
    radial-gradient(900px 520px at 8% 6%, rgba(90,176,198,.18), transparent 62%),
    radial-gradient(780px 520px at 92% 18%, rgba(232,184,75,.12), transparent 65%),
    linear-gradient(180deg,#eef8fa 0%,#f7fafb 42%,#edf5f7 100%) !important;
}
body::before{
  background:
    linear-gradient(rgba(26,95,115,.06) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg, rgba(26,95,115,.06) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05)) !important;
  opacity:1 !important;
}
body::after{opacity:.22 !important}

/* Navigation: glass console header */
.site-nav{
  background:rgba(247,252,253,.88) !important;
  border-bottom:1px solid rgba(61,143,163,.18) !important;
  box-shadow:0 18px 50px -34px rgba(14,31,46,.45);
}
.nav-logo-wrap{background:linear-gradient(135deg,var(--tech-cyan-bright),var(--tech-dark-c)) !important}
.nav-brand-name,.nav-links a{color:var(--tech-ink) !important}
.nav-links a:hover,.nav-links a.active{background:rgba(61,143,163,.14) !important;color:#123245 !important}
.nav-links a.nav-cta,.nav-links a.nav-cta.active,.nav-links a.nav-cta:hover{
  background:linear-gradient(135deg,var(--tech-dark-b),var(--tech-dark-c)) !important;
  color:#ffffff !important;
  box-shadow:0 14px 34px -18px rgba(37,100,116,.75) !important;
}

/* Light sections: translucent tech panels over one shared canvas */
.section,
.ig-section{
  background:
    linear-gradient(180deg,rgba(255,255,255,.76),rgba(242,249,251,.64)),
    linear-gradient(rgba(61,143,163,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(61,143,163,.045) 1px,transparent 1px) !important;
  background-size:auto,56px 56px,56px 56px !important;
  color:var(--tech-ink-soft) !important;
}
.section[style],.ig-section{background-color:transparent !important}
.container{color:inherit !important}
.section-title,
.section h1,.section h2,.section h3,.section h4,
.ig-head h2,
.post-title,.post-body h2,.post-body h3{
  color:var(--tech-ink) !important;
}
.body-text,
.section p,.section li,
.ig-head p,.post-body,
.support-list li{
  color:var(--tech-ink-soft) !important;
}
.tag-label,.tech-badge,.ig-handle{color:#155f70 !important}
.gold-bar{background:linear-gradient(90deg,var(--tech-gold),var(--tech-cyan-bright)) !important}

/* Dark sections: lighter tech navy, not black, with strict light text */
.hero,
.fv-section,
.alumni-strip,
.bento-section,
.social-follow,
.vol-band,
.site-footer,
.live-ticker{
  background:
    radial-gradient(900px 560px at 14% 0%, rgba(90,176,198,.34), transparent 62%),
    radial-gradient(760px 520px at 96% 92%, rgba(232,184,75,.16), transparent 66%),
    linear-gradient(135deg,var(--tech-dark-a) 0%,var(--tech-dark-b) 52%,var(--tech-dark-c) 100%) !important;
  color:var(--tech-on-dark) !important;
}
.hero-overlay{
  background:linear-gradient(155deg,rgba(14,31,46,.72),rgba(28,65,82,.58) 58%,rgba(61,143,163,.42)) !important;
}
.hero *,
.fv-section *,
.alumni-strip *,
.bento-section *,
.social-follow *,
.vol-band *,
.site-footer *,
.live-ticker *{
  color:var(--tech-on-dark) !important;
}
.hero p,.hero-sub,
.fv-section p,.fv-section .body-text,.fv-sig-role,
.alumni-strip p,
.bento-section p,.bento p,.bento-head p,
.social-follow p,.vol-band p,
.site-footer p,.site-footer a,.footer-tagline,.footer-col a,
.live-ticker .t{
  color:var(--tech-on-dark-soft) !important;
}
.hero-pill,.hero-tag,.page-hero-content .hero-tag,
.tag-label.white,.tag-label.gold,
.bento-eyebrow,.bento-head .tech-badge,
.live-ticker b{
  color:#f8d980 !important;
}

/* Cards: brighter glass on light sections, luminous glass on dark sections */
.quote-card,
.blog-card,
.pillar-card,
.feature-card,
.help-card,
.curric-card,
.video-card,
.form-wrap,
.admin-card,
.login-shell,
.info-strip,
.who-badge,
.partner-logo{
  background:linear-gradient(150deg,var(--tech-panel-strong),rgba(238,248,250,.76)) !important;
  border:1px solid var(--tech-border) !important;
  color:var(--tech-ink-soft) !important;
  box-shadow:0 22px 60px -34px rgba(14,31,46,.38), inset 0 1px 0 rgba(255,255,255,.72) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.quote-card *,.blog-card *,.pillar-card *,.feature-card *,.help-card *,.curric-card *,.video-card *,.form-wrap *,.admin-card *,.login-shell *,.info-strip *,.who-badge *{
  color:inherit !important;
}
.quote-card blockquote,
.blog-body h3,
.pillar-name,
.feature-body h3,
.hc-body h3,
.curric-card h3,
.login-shell h1,
.admin-head h1,
.success-box h4{
  color:var(--tech-ink) !important;
}
.blog-body p,.pillar-desc,.feature-body p,.hc-body p,.curric-list li,.form-sub,.success-box p,.info-strip p{color:var(--tech-ink-soft) !important}

.bento:not(.bento-cta),
.emerge-item{
  background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.055)) !important;
  border:1px solid rgba(214,239,245,.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 28px 70px -42px rgba(0,0,0,.65) !important;
}
.bento-big{
  background:linear-gradient(155deg,rgba(28,65,82,.52),rgba(20,49,68,.68)),url('../images/eyl_leaders.jpg') center/cover !important;
}
.bento-cta{background:linear-gradient(135deg,#2a8094,#1c4152) !important;border-color:rgba(255,255,255,.14) !important}
.bento-icon{background:linear-gradient(135deg,var(--tech-gold),#fff0b6) !important;color:#0a1622 !important}
.bento-cta .btn{background:#ffffff !important;color:#0a1622 !important;border-color:#ffffff !important}

/* Buttons */
.btn-teal{
  background:linear-gradient(135deg,#2d8297,#1c6d80) !important;
  color:#ffffff !important;
  box-shadow:0 18px 40px -22px rgba(37,100,116,.7) !important;
}
.btn-gold{background:linear-gradient(135deg,#f1c966,#e8b84b) !important;color:#0a1622 !important}
.btn-outline-white{border-color:rgba(255,255,255,.58) !important;color:#ffffff !important}
.btn-outline-teal{border-color:rgba(37,100,116,.42) !important;color:#123245 !important}

/* Preserve gradient clipped accents after all color safety rules */
.hero-h1 .acc,.hero-h1 .acc2,.hsc-num,.bento-head h2 .acc,.section-title .acc{
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}
.hsc-lbl{color:rgba(246,251,255,.82) !important}

@media(max-width:900px){
  .nav-drawer{background:rgba(247,252,253,.96) !important}
  .nav-drawer a{color:var(--tech-ink) !important}
  .nav-drawer a.nav-cta-mob,.nav-drawer a.nav-cta-mob.active{background:linear-gradient(135deg,var(--tech-dark-b),var(--tech-dark-c)) !important;color:#ffffff !important}
}

/* Bento contrast lock: these cards live on the dark tech canvas. */
.bento-section .bento:not(.bento-cta),
.bento-section .bento:not(.bento-cta) h3,
.bento-section .bento:not(.bento-cta) .num,
.bento-section .bento:not(.bento-cta) .unit,
.bento-section .bento-img .bento-overlay h3{
  color:#ffffff !important;
}
.bento-section .bento:not(.bento-cta) p{
  color:#d7e7ef !important;
}
.bento-section .bento:not(.bento-cta) .bento-eyebrow{
  color:#f8d980 !important;
}
.bento-section .bento:not(.bento-cta) .btn-gold,
.bento-section .bento-icon{
  color:#0a1622 !important;
}
.bento-section .bento-cta,
.bento-section .bento-cta h3,
.bento-section .bento-cta p,
.bento-section .bento-cta span{
  color:#ffffff !important;
}
.bento-section .bento-cta p{color:#e4f1f6 !important}
.bento-section .bento-cta .btn{color:#0a1622 !important}

/* === Drag & drop image upload (admin) === */
.drop-zone{position:relative;border:2px dashed rgba(61,143,163,.42);border-radius:12px;padding:.85rem;background:rgba(238,248,250,.6);transition:all .18s ease;cursor:pointer}
.drop-zone.drag{border-color:var(--tech-gold);background:rgba(255,246,215,.7);transform:scale(1.01)}
.drop-zone input[type=text],.drop-zone input:not([type=file]){width:100%;padding:.55rem .7rem;border:1px solid rgba(61,143,163,.25);border-radius:8px;background:white;font-family:var(--mono);font-size:.82rem}
.drop-zone .drop-hint{font-family:var(--mono);font-size:.72rem;color:var(--mid);margin-top:.5rem;text-align:center;pointer-events:none}
.drop-zone .drop-preview{margin-top:.6rem}
.drop-zone .drop-preview img{width:100%;max-height:180px;object-fit:cover;border-radius:8px;display:block}
#bodyInput.drag{outline:2px dashed var(--tech-gold);outline-offset:-4px;background:rgba(255,246,215,.45)}

/* === Fix EYL section: light background, dark text === */
#eyl{background:var(--off-white)}
#eyl .section-title.light,
#eyl .section-title{color:var(--navy) !important}
#eyl .body-text.light,
#eyl .body-text{color:var(--slate) !important}
#eyl .body-text.light strong,
#eyl .body-text strong{color:var(--navy) !important}
#eyl .tag-label.white{color:var(--teal-dark) !important}
#eyl .emerge-grid,
#eyl .emerge-item,
#eyl .emerge-item *{color:var(--slate) !important}
#eyl .emerge-item{background:rgba(61,143,163,.08);border-color:rgba(61,143,163,.16)}
#eyl .emerge-item strong{color:var(--teal-dark) !important}
#eyl .gold-bar{background:var(--gold)}

/* === Fix "Want to make a difference?" band: dark bg, light text === */
section .vol-band,
.vol-band{
  background:linear-gradient(135deg,#0f2a3a,#1c4152 55%,#256474) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}
#team .vol-band,
#team .vol-band > div,
#team .vol-band > div *{color:#ffffff !important}
#team .vol-band h4{color:#ffffff !important;opacity:1 !important}
#team .vol-band p{color:rgba(255,255,255,.85) !important;opacity:1 !important}
#team .vol-band .btn-gold,
#team .vol-band a.btn-gold{color:#0a1622 !important}