/* =========================
   GLOBAL / BASE STYLES
   ========================= */

/* STEP 1 — Stabilize Hero Container */
.hero {
  position: relative;
  min-height: 70vh;
  max-height: 900px;
  overflow: hidden;
}
:root{--navy:#0D1B2A;--navy-mid:#1A2E45;--navy-light:#243C57;--gold:#C8922A;--off-white:#F5F2ED;--muted:#8A9BB0;--border:rgba(200,146,42,0.22);--green:#4ade80;--green-bg:rgba(74,222,128,0.08);--green-border:rgba(74,222,128,0.25);--teal:#2DD4BF;--teal-bg:rgba(45,212,191,0.08);--teal-border:rgba(45,212,191,0.25);}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;background:var(--navy);color:var(--off-white);line-height:1.6;}
a{text-decoration:none;color:inherit;}

/* =========================
   NAVIGATION
   ========================= */
/* NAV */
.nav {
  display:flex;
  ...
}

/* NAV */
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 40px;border-bottom:0.5px solid var(--border);background:var(--navy);position:sticky;top:0;z-index:100;}
.brand{display:flex;flex-direction:column;line-height:1;}
.brand-main{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:2px;color:var(--off-white);}
.brand-sub{font-size:10px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;margin-top:2px;}
.nav-links{display:flex;gap:24px;list-style:none;align-items:center;}
.nav-links a{font-size:13px;color:var(--muted);}
.nav-links a:hover{color:var(--off-white);}
.nav-cta{background:var(--gold);color:var(--navy) !important;padding:8px 16px;border-radius:4px;font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;}

/* COMMUNITY INVESTMENT BAR — replaces cert bar */
.community-bar{background:var(--navy-mid);border-bottom:0.5px solid var(--border);padding:18px 40px;}
.community-bar-inner{max-width:1100px;margin:0 auto;display:flex;gap:20px;align-items:flex-start;}
.community-eyebrow{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);white-space:nowrap;margin-top:3px;padding-right:20px;border-right:0.5px solid var(--border);}
.community-text{font-size:13px;color:var(--muted);line-height:1.75;}
.community-text strong{color:var(--off-white);font-weight:500;}
.community-text em{color:var(--gold);font-style:normal;font-weight:500;}

/* =========================
   HERO
   ========================= */
/* HERO */
.hero {
  position: relative;
  width: 100%;
  min-height: 70vh;
  max-height: 900px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.hero-image-wrap {
  position: absolute;
  inset: 0;
}
.hero-image-wrap img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;}
.hero-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13,27,42,0.15) 0%,
    rgba(13,27,42,0.65) 100%
  );
}

.hero-image-text {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1100px;
  padding: 56px 40px;
  z-index: 2;
}
.hero-eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:10px;}
.hero-eyebrow::before{content:'';display:block;width:30px;height:1px;background:var(--gold);}
.hero-image-text h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(42px,5.5vw,72px);line-height:0.95;letter-spacing:2px;margin-bottom:16px;}
.hero-image-text h1 em{font-style:normal;color:var(--gold);}
.hero-image-text p{font-size:15px;color:rgba(245,242,237,0.85);max-width:560px;line-height:1.75;margin-bottom:26px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.btn-primary{background:var(--gold);color:var(--navy);padding:13px 28px;border-radius:4px;font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;display:inline-block;}
.btn-outline{background:transparent;color:var(--off-white);padding:13px 28px;border-radius:4px;font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;border:0.5px solid rgba(245,242,237,0.4);display:inline-block;}
.btn-primary:hover{background:#b8821f;}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);}

/* =========================
   SHARED SECTIONS & COMPONENTS
   ========================= */
/* STAT ROW */
.stat-row{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--border);border-top:0.5px solid var(--border);}
.stat-cell{background:var(--navy-mid);padding:20px;text-align:center;}
.stat-num{font-family:'Bebas Neue',sans-serif;font-size:36px;color:var(--gold);line-height:1;margin-bottom:4px;}
.stat-lbl{font-size:11px;color:var(--muted);line-height:1.4;}
.stat-cell.green .stat-num{color:var(--green);}
.stat-cell.teal .stat-num{color:var(--teal);font-size:17px;padding-top:10px;line-height:1.3;}
.stat-cell.demo .stat-num{font-size:17px;padding-top:10px;line-height:1.3;}

/* RYAN QUOTE */
.ryan-quote{background:rgba(200,146,42,0.06);border-top:0.5px solid var(--gold);border-bottom:0.5px solid var(--gold);padding:36px 40px;}
.ryan-inner{max-width:1100px;margin:0 auto;display:flex;gap:24px;align-items:flex-start;}
.ryan-icon{font-family:'Bebas Neue',sans-serif;font-size:60px;color:rgba(200,146,42,0.25);line-height:0.8;flex-shrink:0;}
.ryan-text{font-size:16px;color:var(--off-white);line-height:1.8;font-style:italic;max-width:800px;}
.ryan-credit{font-size:12px;color:var(--gold);margin-top:10px;font-style:normal;}

/* SECTIONS */
.divider{height:0.5px;background:var(--border);margin:0 40px;}
.section{padding:52px 40px;max-width:1100px;margin:0 auto;}
.sec-label{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:flex;align-items:center;gap:10px;}
.sec-label::after{content:'';flex:1;height:0.5px;background:var(--border);}
.sec-h2{font-family:'Bebas Neue',sans-serif;font-size:40px;letter-spacing:1px;line-height:1.05;margin-bottom:14px;}

/* AUDIENCE */
.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px;}
.audience-card{background:var(--navy-mid);border:0.5px solid var(--border);border-radius:8px;padding:28px;}
.audience-card:hover{border-color:var(--gold);}
.a-icon{width:38px;height:38px;border-radius:6px;background:rgba(200,146,42,0.1);display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--gold);font-weight:600;font-size:16px;}
.audience-card h3{font-size:15px;font-weight:500;margin-bottom:8px;}
.audience-card p{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:16px;}
.audience-card a{font-size:12px;color:var(--gold);letter-spacing:0.5px;}

/* PORTFOLIO */
.portfolio-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px;}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.project-card{background:var(--navy-mid);border:0.5px solid var(--border);border-radius:8px;overflow:hidden;transition:border-color 0.2s,transform 0.2s;display:flex;flex-direction:column;}
.project-card:hover{border-color:var(--gold);transform:translateY(-2px);}
.project-card.featured{grid-column:1/-1;display:grid;grid-template-columns:220px 1fr;}
.card-label-bar{height:72px;background:linear-gradient(135deg,var(--navy-mid),rgba(200,146,42,0.1));display:flex;align-items:center;justify-content:center;border-bottom:0.5px solid var(--border);}
.project-card.featured .card-label-bar{height:auto;border-bottom:none;border-right:0.5px solid var(--border);}
.prog-abbr{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:3px;color:rgba(200,146,42,0.3);}
.card-body{padding:18px;flex:1;display:flex;flex-direction:column;}
.project-card.featured .card-body{padding:28px;}
.card-tag{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.active-dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;}
.card-body h3{font-size:14px;font-weight:500;margin-bottom:8px;line-height:1.4;flex:1;}
.card-body p{font-size:12px;color:var(--muted);line-height:1.7;margin-bottom:14px;}
.card-meta{display:flex;gap:10px;padding-top:12px;border-top:0.5px solid var(--border);flex-wrap:wrap;}
.mpill{font-size:11px;color:var(--muted);}
.mpill strong{color:var(--off-white);font-weight:500;margin-left:3px;}
.conv{display:inline-block;background:var(--green-bg);color:var(--green);border:0.5px solid var(--green-border);font-size:10px;padding:1px 6px;border-radius:3px;margin-left:6px;}

/* SIGN UP */
.signup-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;}
.signup-card{border-radius:10px;padding:36px;display:flex;flex-direction:column;gap:16px;}
.signup-card.candidate{background:rgba(200,146,42,0.06);border:0.5px solid var(--gold);}
.signup-card.employer{background:var(--green-bg);border:0.5px solid var(--green-border);}
.signup-card h3{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:1px;line-height:1.1;}
.signup-card h3 em{font-style:normal;color:var(--gold);}
.signup-card.employer h3 em{color:var(--green);}
.signup-card p{font-size:13px;color:var(--muted);line-height:1.8;}
.signup-card ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
.signup-card ul li{font-size:13px;color:var(--muted);display:flex;align-items:flex-start;gap:8px;line-height:1.6;}
.signup-card ul li::before{content:'→';color:var(--gold);flex-shrink:0;margin-top:1px;}
.signup-card.employer ul li::before{color:var(--green);}
.signup-btn{display:inline-block;padding:14px 28px;border-radius:4px;font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;text-align:center;margin-top:4px;}
.signup-btn.gold{background:var(--gold);color:var(--navy);}
.signup-btn.green{background:var(--green);color:var(--navy);}
.signup-btn:hover{opacity:0.9;}

/* DOL FRAMEWORK */
.dol-inner{background:var(--navy-mid);border:0.5px solid var(--border);border-radius:12px;padding:36px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.dol-inner h2{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:1px;line-height:1.1;margin-bottom:14px;}
.dol-inner p{font-size:13px;color:var(--muted);line-height:1.8;margin-bottom:14px;}
.framework-pills{display:flex;flex-wrap:wrap;gap:8px;}
.fpill{background:rgba(200,146,42,0.08);border:0.5px solid var(--border);color:var(--off-white);font-size:11px;padding:5px 10px;border-radius:4px;}
.fpill-label{font-size:11px;color:var(--muted);margin-bottom:10px;letter-spacing:0.5px;}

/* CREDENTIALS DIVIDER — above footer */
.cred-divider{background:var(--navy-mid);border-top:0.5px solid var(--border);border-bottom:0.5px solid var(--border);padding:14px 40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:52px;}
.cred-divider-left{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:2px;color:var(--off-white);}
.cred-pills{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.cpill{background:rgba(200,146,42,0.1);border:0.5px solid var(--border);padding:3px 10px;border-radius:3px;color:var(--gold);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;}

/* FOOTER */
.site-footer{padding:32px 40px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);flex-wrap:wrap;gap:20px;}
.footer-brand{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;color:var(--off-white);}
.footer-links{display:flex;gap:20px;flex-wrap:wrap;}
.footer-links a{color:var(--muted);font-size:12px;}
.footer-links a:hover{color:var(--gold);}

/* =========================
   PROGRAM PAGES
   ========================= */
/* Python • COBOL • UX/UI • Agile • Future Programs */

/* =========================
   RESPONSIVE / MEDIA QUERIES
   ========================= */

@media(max-width:900px){
  .nav{padding:12px 20px;}
  .nav-links{display:none;}
  .hero-image-wrap{height:300px;}
  .stat-row{grid-template-columns:repeat(3,1fr);}
  .audience-grid,.portfolio-grid,.signup-grid,.dol-inner{grid-template-columns:1fr;}
  .project-card.featured{grid-template-columns:1fr;}
  .section{padding:40px 20px;}
  .community-bar-inner{flex-direction:column;gap:10px;}
  .community-eyebrow{border-right:none;padding-right:0;border-bottom:0.5px solid var(--border);padding-bottom:10px;}
}
/* STEP 4 — Mobile HERO tuning */
@media (max-width: 768px) {

  .hero {
    min-height: 85vh;
  }

  .hero-image-text {
    padding: 40px 24px;
  }

  .hero-image-text h1 {
    font-size: 42px;
    line-height: 1.05;
  }

  .hero-image-text p {
    font-size: 14px;
  }

  .hero-actions {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

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

}