:root{
--bg: #fbfcfd;
--card: #ffffff;
--muted: #6b7280;
--text: #0f172a;
--accent: #0b5fff; /* change this to match your preferred color */
--radius: 14px;
--max-w: 980px;
}


/* simple reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
color:var(--text);
background:linear-gradient(180deg,var(--bg),#f6f7fb 60%);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:1.5;
}
.wrap{max-width:var(--max-w);margin:0 auto;padding:28px}
.header-grid{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;color:var(--text);text-decoration:none;font-size:1.05rem}
.brand .last{color:var(--accent)}
.nav a{color:var(--muted);text-decoration:none;margin-left:18px}


.hero{padding:36px 0}
.hero-grid{display:grid;grid-template-columns:1fr 260px;gap:28px;align-items:center}
.name{font-size:2.1rem;margin:0 0 6px}
.role{color:var(--muted);margin:0 0 14px}
.lead{margin:0 0 18px;color:var(--muted)}


.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600}
.btn{background:var(--accent);color:white}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(11,95,255,0.12)}
.btn + .btn{margin-left:10px}


.hero-headshot{width:100%;display:flex;align-items:center;justify-content:center}
.hero-headshot img{width:200px;height:200px;object-fit:cover;border-radius:50%;box-shadow:0 8px 30px rgba(15,23,42,0.08);border:4px solid rgba(255,255,255,0.6);display:block}
.headshot-fallback{display:none;width:200px;height:200px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,#fff,#f2f6ff);box-shadow:0 8px 30px rgba(15,23,42,0.06);color:var(--muted);font-weight:600}


.about{background:linear-gradient(180deg,rgba(11,95,255,0.03),transparent);border-radius:12px;margin-top:22px;padding:22px}
.about h2{margin-top:0}
.quick-list{list-style:none;padding:0;margin:10px 0 0}
.quick-list li{padding:6px 0;color:var(--muted)}


.contact{margin-top:18px;padding:18px;background:var(--card);border-radius:12px;box-shadow:0 6px 24px rgba(15,23,42,0.04)}
.contact h2{margin-top:0}
.social a{display:inline-block;margin-right:12px;text-decoration:none;color:var(--accent);font-weight:600}


.site-footer{margin-top:36px;padding:20px 0;color:var(--muted)}
.footer-grid{display:flex;align-items:center;justify-content:space-between}
.legal{font-size:0.9rem}


/* responsive */
@media (max-width:820px){
.hero-grid{grid-template-columns:1fr;grid-template-rows:auto auto;text-align:center}
.hero-headshot{margin-top:8px}
.header-grid{padding:8px 0}
.nav{display:none}
}


@media (max-width:420px){
.name{font-size:1.6rem}
.wrap{padding:18px}
}