:root{
  --bg:#0b1217;
  --bg2:#0e151b;
  --card:#101a21;
  --txt:#e6f3ff;
  --muted:#9fb3c8;
  --brand:#27e0d6;
  --accent:#14c4b9;
  --border:rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;height:auto;display:block}

.topbar{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(11,18,23,.95),rgba(11,18,23,.75));backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid var(--border)}
.topbar .brand{display:flex;align-items:center;gap:10px;padding:10px 16px}
.logo{width:36px;height:36px;border-radius:8px}
.brand-name{font-weight:700;letter-spacing:.2px}
.nav{display:flex;gap:8px;align-items:center;padding:8px 16px;flex-wrap:wrap}
.nav-item{padding:8px 10px;border-radius:10px}
.nav-item:hover{background:rgba(255,255,255,.05)}
.has-dropdown{position:relative}
.has-dropdown .dropdown{position:absolute;top:100%;left:0;background:var(--bg2);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);display:none;min-width:220px;padding:6px}
.has-dropdown:hover .dropdown{display:block}
.dropdown a{display:block;padding:10px;border-radius:8px;color:var(--txt)}
.dropdown a:hover{background:rgba(255,255,255,.06)}

.hero{padding:32px 16px}
.hero-inner{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;max-width:1100px;margin:0 auto}
.hero-text{text-align:center}
.hero-name{margin:.25rem 0 0;font-size:1.6rem}
.tagline{color:var(--muted);margin:.35rem 0 0}
.hero-headshot img{width:220px;height:220px;border-radius:18px;object-fit:cover;border:1px solid var(--border);box-shadow:var(--shadow)}

.hero-links{display:flex;justify-content:center;gap:10px;margin-top:12px}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;background:var(--brand);color:#001714;font-weight:600}
.btn.outline{background:transparent;color:var(--brand);border:1px solid var(--brand)}

.chipbar{display:flex;flex-wrap:wrap;gap:8px;padding:8px 16px;justify-content:center}
.chip{background:var(--bg2);border:1px solid var(--border);color:var(--txt);padding:8px 12px;border-radius:999px;cursor:pointer}
.chip:hover{border-color:var(--accent)}

.wrap{max-width:1100px;margin:0 auto;padding:0 16px}

.section{margin:28px 0}
.section h2{margin:8px 0 14px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;min-height:120px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px}
.card small{color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.tile{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.tile .thumb{aspect-ratio:16/10;overflow:hidden}
.tile .thumb img{width:100%;height:100%;object-fit:cover}
.tile .body{padding:12px}
.tile .body h3{margin:0 0 6px;font-size:1.05rem}
.tile .body p{margin:0;color:var(--muted)}

.about-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:12px;box-shadow:var(--shadow)}
.about-photo{border:1px solid var(--border)}

.footer{margin:36px 0 24px;color:var(--muted);text-align:center}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;padding:16px}
.lightbox.open{display:flex}
.lightbox img{max-width:min(92vw,1200px);max-height:80vh;border-radius:12px}
.lightbox .caption{margin-top:10px;color:#c9d9e8;text-align:center}
.lightbox .lightbox-close{position:absolute;top:12px;right:16px;font-size:34px;background:transparent;color:#fff;border:0;cursor:pointer}

.error{color:#ff8383}
@media (max-width:800px){
  .hero-inner{grid-template-columns:1fr;gap:10px}
  .hero-text{text-align:center}
}
/* --- v6.5 Patch: Header + Hero layout --- */
.topbar{
  display:flex; align-items:center; gap:16px;
  padding:12px 20px; white-space:nowrap;
}
.topbar .brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.topbar .nav{ display:flex; align-items:center; gap:18px; flex-wrap:nowrap; margin-left:auto; }
.topbar .nav .nav-item{ display:inline-flex; align-items:center; }
@media (max-width: 880px){
  .topbar{ flex-wrap:wrap; }
  .topbar .nav{ width:100%; justify-content:flex-start; overflow-x:auto; }
}
.hero{ text-align:center; }
.hero .hero-inner{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero .hero-text{ max-width:900px; }
.hero .hero-headshot{ display:block; line-height:0; }
.hero .hero-headshot img{
  width:clamp(300px, 30vw, 460px);
  height:auto; border-radius:16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.hero .hero-links{ display:flex; gap:12px; justify-content:center; }

/* ===== v6.6 Neon-Teal Restore ===== */
:root{
  --bg-0:#0e1317;
  --bg-1:#121920;
  --line:#1f2a33;
  --text:#e7eef4;
  --muted:#9fb0be;

  --accent:#00e6d8;
  --accent-700:#00c7bb;
  --accent-900:#009e95;
  --glow: 0 0 24px rgba(0,230,216,.40), 0 0 2px rgba(0,230,216,.75);
}

body{ background: radial-gradient(1200px 800px at 15% -10%, rgba(0,230,216,.08), transparent 55%),
                   radial-gradient(900px 700px at 110% 10%, rgba(0,230,216,.05), transparent 60%),
                   var(--bg-0);
      color:var(--text); }

.topbar{ background: linear-gradient(180deg, rgba(0,230,216,.06), rgba(0,230,216,0) 60%); }
.brand-name{ color:var(--accent); text-shadow: var(--glow); }
.nav .nav-item > a{
  color:var(--text); padding:8px 8px; border-bottom:2px solid transparent;
}
.nav .nav-item > a:hover,
.nav .nav-item > a:focus-visible{
  color:var(--accent); border-color:var(--accent); box-shadow: var(--glow);
}

.btn{
  background: var(--accent); color:#041214; border:1px solid var(--accent-700);
  box-shadow: var(--glow);
}
.btn:hover{ background:var(--accent-700); border-color:var(--accent-900); }
.btn.outline{
  background: transparent; color: var(--accent);
  border:1px solid var(--accent-700); box-shadow: var(--glow);
}
.btn.outline:hover{ background: rgba(0,230,216,.10); }

.chip{
  color: var(--muted); border:1px solid #27333e; background: #171f26;
}
.chip:hover{ color:var(--accent); border-color:var(--accent-700); box-shadow: var(--glow); }
.chip.is-active{
  color:#041214; background:var(--accent); border-color:var(--accent-700);
  box-shadow: var(--glow);
}

.card{
  background: var(--bg-1);
  border:1px solid var(--line);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  position:relative;
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(0,230,216,.35);
}

.hero .hero-headshot img{
  width: clamp(360px, 34vw, 520px);
  border-radius:18px; box-shadow: var(--glow), 0 12px 28px rgba(0,0,0,.45);
}

.pill{
  border:1px solid #2a3946; background:#162028; color:#a9cbd0;
}
.pill.ok{ border-color: rgba(0,230,216,.55); color:#bff9f3; }
.pill.warn{ border-color:#856404; color:#ffd37a; }

:focus-visible{ outline:2px solid var(--accent); box-shadow: var(--glow); outline-offset:2px; }

/* ===== v6.7 Header Links Teal ===== */
.topbar .nav .nav-item > a {
  color: var(--accent) !important;
  border-bottom: 2px solid transparent;
}
.topbar .nav .nav-item > a:hover,
.topbar .nav .nav-item > a:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--glow);
}

/* ===== v6.8 Hero Teal Background Restore ===== */
.hero {
  position: relative;
  background: linear-gradient(180deg, rgba(0,230,216,0.25) 0%, rgba(0,230,216,0.08) 40%, transparent 100%);
  padding-top: 40px;
  padding-bottom: 40px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(0,230,216,0.25), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero .hero-inner {
  position: relative;
  z-index: 1;
}