:root{
  --bg:#0B0F14;
  --panel:#10161D;
  --text:#F2F6FA;
  --muted:#A6B7C9;
  --brand:#4C89FF;
  --brand-2:#2FD180;
  --card:#131B23;
  --border:#1E2C3A;
  --focus:#FFD166;
}
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: linear-gradient(180deg, #0b0f14, #0d131a 35%, #0b0f14);
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1100px, 92vw);margin-inline:auto}
.section{padding:3rem 0}
.band{padding:3rem 0;background:var(--panel);border-block:1px solid var(--border)}
h1,h2,h3{line-height:1.2;margin:0 0 .5rem}
p{margin:0 0 1rem;color:var(--text)}
ul{padding-left:1rem}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;background:#000;color:#fff;padding:.5rem 1rem;z-index:999}

/* Header & Nav */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(11,15,20,.8);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.brand{display:flex;gap:.5rem;align-items:center;color:var(--text);font-weight:700}
.logo{width:28px;height:28px}
.site-menu ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.site-menu a{color:var(--text)}
.nav-toggle{
  display:none;background:none;border:1px solid var(--border);color:var(--text);
  padding:.6rem .7rem;border-radius:.6rem;line-height:1
}

/* Buttons */
.btn,.btn-secondary{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1rem;border-radius:.8rem;font-weight:600;
  border:1px solid transparent;transition:transform .2s ease;
}
.btn{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
.btn:hover{transform:translateY(-1px)}
.btn-secondary{border-color:var(--border);color:var(--text);background:transparent}

/* Hero */
.hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding:3rem 0
}
.hero-media img{border-radius:1.25rem;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.hero .hero-ctas{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}

/* Section header */
.section-header{display:grid;gap:.5rem;margin-bottom:1rem}

/* Cards / grid (general) */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.cards .card{
  background:var(--card);border:1px solid var(--border);
  border-radius:1rem;overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease
}
.cards .card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.card-body{padding:1rem}
.card-kicker{color:var(--muted);font-size:.9rem;margin:.25rem 0}
.card-desc{margin:.4rem 0 .6rem}
.meta{display:flex;gap:1rem;color:var(--muted);font-size:.9rem;list-style:none;padding:0;margin:0}

/* Legacy testimonials list (not used now) */
.testimonials .quotes{display:grid;grid-template-columns:1fr 1fr;gap:1rem;list-style:none;padding:0;margin:1rem 0 0}
blockquote{margin:0;padding:1rem;background:#0e141b;border:1px solid var(--border);border-radius:1rem}

/* Article generic */
.article .hero-image img{border-radius:1rem}
.pill-meta{display:flex;gap:.5rem;flex-wrap:wrap;list-style:none;padding:0;margin:.5rem 0 0}
.pill-meta li{background:var(--card);border:1px solid var(--border);padding:.25rem .6rem;border-radius:999px;color:var(--muted);font-size:.9rem}

/* Generic carousel card (if used elsewhere) */
.carousel{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:1rem;padding:1.25rem;margin-top:.5rem}
.carousel blockquote{font-size:1.1rem;margin:0}
.carousel .muted{color:var(--muted);display:block;margin-top:.5rem}
.carousel-controls{position:absolute;right:.5rem;top:.5rem;display:flex;gap:.25rem}
.carousel-controls button{
  background:var(--card);border:1px solid var(--border);color:var(--text);
  border-radius:.6rem;padding:.35rem .6rem;cursor:pointer
}

/* === Testimonials: single card that swaps content === */
.testimonials .section-header{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  position:relative;
}
.testimonials .carousel-controls{display:flex;gap:.5rem}
.testimonials .car-btn{
  background:var(--panel);color:var(--muted);border:1px solid var(--border);
  border-radius:.6rem;padding:.35rem .65rem;cursor:pointer
}
.testimonials .car-btn:hover{color:var(--brand);border-color:var(--brand)}
.quote-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.25rem;
  margin-top:.75rem;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.quote-card .context{color:var(--muted);font-size:1rem;margin:0 0 .4rem}
.quote-card blockquote{margin:0;font-size:1.08rem;line-height:1.55}
.quote-card .attribution{margin:.7rem 0 0;color:var(--muted);font-size:.98rem}

/* Screen-reader-only helper */
.sr-only{
  position:absolute !important;height:1px;width:1px;overflow:hidden;
  clip:rect(1px, 1px, 1px, 1px);white-space:nowrap;
}

/* CTA + Footer */
.cta{text-align:center}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.25rem 0;border-top:1px solid var(--border)
}
.footer-inner a{color:var(--muted)}

/* About page hero image sizing */
.about-page .hero-image img {
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: 1.25rem;
  display: block;
  margin: 2rem auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* Major accomplishments stats grid */
.stats-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:1rem;
  list-style:none;
  padding:0;
  margin:1rem 0 0;
}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:1rem;padding:1rem;text-align:center}
.stat-num{display:block;font-size:1.8rem;font-weight:800;line-height:1;margin-bottom:.25rem}
.stat-label{display:block;color:var(--muted);font-size:.95rem}

/* Feature (flagship) two-column panel */
.feature{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:1.25rem;
  align-items:center;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.25rem;
}
.feature-media img{border-radius:1rem; box-shadow:0 10px 24px rgba(0,0,0,.35)}
.feature h3{margin:0 0 .5rem}
.feature .kicker{color:var(--muted);font-size:.95rem;margin:.25rem 0}
.feature ul{margin:.5rem 0 0}
.feature .meta{margin-top:.5rem}

/* Impact strip as stat tiles */
.band .stats-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1rem;
  list-style:none;
  padding:0;
  margin:1rem 0 0;
}
.band .stat{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1rem;
  text-align:center;
}
.band .stat-num{display:block;font-size:1.6rem;font-weight:800;line-height:1;margin-bottom:.25rem}
.band .stat-label{display:block;color:var(--muted);font-size:.95rem}

/* About page: two-column hero mimic + 50% sized image */
.about-page main.hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:2rem;align-items:center}
.about-page .hero-media img{max-width:190px} /* ~50% of home hero visual */

/* Extra space before "Education & Credentials" on About */
.about-page h2:nth-of-type(2) { margin-top: 2rem; }

/* Footer link separators */
.site-footer nav a {
  position: relative;
  padding: 0 .75rem;
}
.site-footer nav a:not(:last-child)::after {
  content: "|";
  position: absolute;
  right: 0;
  color: var(--muted);
  opacity: .6;
}

/* =========================
   Responsive tweaks
   ========================= */

/* <= 900px tablet/phone */
@media (max-width: 900px){
  .grid{grid-template-columns:1fr 1fr}
  .hero{grid-template-columns:1fr; text-align:center}
  .hero-media{order:-1}
  .hero .hero-ctas{justify-content:center}

  .feature{grid-template-columns:1fr}
  .stats-grid{grid-template-columns: 1fr 1fr}

  /* Mobile menu */
  .site-menu ul{display:none}
  .nav-toggle{display:block}
  .site-menu[ data-open="true" ] ul{
    display:flex;flex-direction:column;gap:.75rem;
    position:absolute;right:1rem;top:60px;z-index:25;
    background:#0b0f14;border:1px solid var(--border);border-radius:.8rem;
    padding:1rem;min-width:220px;box-shadow:0 10px 24px rgba(0,0,0,.5)
  }

  /* Testimonials card spacing */
  .quote-card{padding:1rem;margin-top:.6rem}
  .quote-card blockquote{font-size:1.02rem;line-height:1.5}
  .quote-card .attribution{font-size:.95rem}
}

/* <= 600px phone: tighter spacing & readable sizes */
@media (max-width: 600px){
  .section{padding:2.25rem 0}
  .container{width:min(1100px, 94vw)}
  h1{font-size:1.6rem}
  h2{font-size:1.25rem}
  p{font-size:1rem}

  .btn,.btn-secondary{padding:.7rem .9rem}

  .grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
  .band .stats-grid{grid-template-columns:1fr}

  .hero-media img{max-width:86%;margin-inline:auto}
  .feature{padding:1rem}
  .feature-media img{max-width:92%;margin-inline:auto}

  .carousel-controls button{padding:.45rem .7rem}
  .testimonials .car-btn{padding:.45rem .7rem}

  .footer-inner{flex-direction:column;gap:.5rem}
  .site-footer nav a{padding:.5rem .6rem}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
  .btn{transition:none}
}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
