:root{
  --navy:#003057;
  --navy-deep:#001c33;
  --gold:#B3A369;
  --gold-bright:#EAAA00;
  --white:#ffffff;
  --grey:#54585A;
  --pi-mile:#D6DBD4;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--navy-deep);
  background: var(--white);
  line-height:1.55;
}
a{color:inherit;}

.stripe{
  height:6px;
  background: repeating-linear-gradient(
    90deg,
    var(--gold) 0px, var(--gold) 40px,
    var(--gold-bright) 40px, var(--gold-bright) 80px
  );
}

header{
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
  padding: 5rem 1.5rem 6rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}
header::after{
  content:"";
  position:absolute;
  right:-120px;
  top:-120px;
  width:320px;
  height:320px;
  border-radius:50%;
  background: radial-gradient(circle at center, rgba(179,163,105,0.35), rgba(179,163,105,0) 70%);
}
header::before{
  content:"";
  position:absolute;
  left:-100px;
  bottom:-140px;
  width:280px;
  height:280px;
  border-radius:50%;
  background: radial-gradient(circle at center, rgba(179,163,105,0.25), rgba(179,163,105,0) 70%);
}
header.compact{ padding: 3.2rem 1.5rem 3.6rem; }
.eyebrow{
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.78rem;
  color: var(--gold);
  font-weight:700;
  margin-bottom:1rem;
}
h1{
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  margin:0 0 .6rem;
  font-weight:800;
  letter-spacing:-.01em;
}
header.compact h1{ font-size:clamp(1.9rem, 4.5vw, 2.8rem); }
.subtitle{
  font-size:1.15rem;
  color: var(--pi-mile);
  max-width:36rem;
  margin:0 auto;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:2rem;
  padding:.55rem 1.1rem;
  border:1px solid rgba(234,170,0,0.5);
  border-radius:999px;
  background: rgba(255,255,255,0.06);
  font-size:.85rem;
  color: var(--white);
}
.badge .dot{
  position:relative;
  width:8px;height:8px;border-radius:50%;
  background: var(--gold-bright);
  box-shadow:0 0 0 4px rgba(234,170,0,0.18);
}
.badge .dot::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  background: var(--gold-bright);
  opacity:.55;
  animation: dot-pulse 2s ease-out infinite;
}
@keyframes dot-pulse{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(2.4); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .badge .dot::before{ animation:none; }
}

main{
  max-width: 860px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 5rem;
}
section{margin-bottom:3.2rem;}
h2{
  font-size:1.5rem;
  color: var(--navy);
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  gap:.6rem;
}
h2::before{
  content:"";
  width:22px;height:4px;border-radius:2px;
  background: var(--gold-bright);
  display:inline-block;
}
p{color:var(--grey); font-size:1.02rem;}

.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:1.1rem;
}
.card{
  border:1px solid #e7e5df;
  border-radius:14px;
  padding:1.4rem;
  background: linear-gradient(180deg, #fff, #fbfaf7);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,48,87,0.08); }
.card h3{
  margin:0 0 .4rem;
  font-size:1.02rem;
  color:var(--navy);
}
.card p{margin:0; font-size:.94rem;}
.card .tag{
  display:inline-block;
  margin-top:.8rem;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--navy);
  background: var(--pi-mile);
  padding:.25rem .55rem;
  border-radius:6px;
}
.card .tags{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:.9rem;
}
.card .tags .tag{ margin-top:0; }
.card .project-link{
  display:inline-block;
  margin-top:1.1rem;
  font-size:.85rem;
  font-weight:700;
  color: var(--navy);
  text-decoration:none;
}
.card .project-link:hover{ color: var(--gold-bright); }

.timeline{
  border-left:2px solid var(--pi-mile);
  padding-left:1.4rem;
}
.timeline .item{
  position:relative;
  margin-bottom:1.4rem;
}
.timeline .item:last-child{ margin-bottom:0; }
.timeline .item::before{
  content:"";
  position:absolute;
  left:-1.62rem;
  top:.3rem;
  width:11px;height:11px;
  border-radius:50%;
  background: var(--gold-bright);
  border:2px solid var(--white);
  box-shadow:0 0 0 2px var(--gold-bright);
}
.timeline .when{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: var(--gold-bright);
  font-weight:700;
}
.timeline .what{ color: var(--navy-deep); font-weight:600; margin:.15rem 0 .2rem;}
.timeline .desc{ margin:0; color:var(--grey); font-size:.94rem;}

.contact{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
}
.contact a{
  text-decoration:none;
  border:1px solid var(--navy);
  color: var(--navy);
  padding:.7rem 1.2rem;
  border-radius:10px;
  font-weight:600;
  font-size:.92rem;
  transition: background .15s ease, color .15s ease;
}
.contact a:hover{
  background: var(--navy);
  color: var(--white);
}
.contact a.primary{
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--navy-deep);
}
.contact a.primary:hover{
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

footer{
  text-align:center;
  padding:2rem 1.5rem 3rem;
  color:#8a8f91;
  font-size:.82rem;
}
footer .gt{
  color: var(--gold-bright);
  font-weight:700;
}

/* ---- Shared across secondary pages (resume, etc.) ---- */

.back-link{
  display:inline-block;
  color: var(--pi-mile);
  font-size:.85rem;
  text-decoration:none;
  margin-bottom:1.2rem;
}
.back-link:hover{ color: var(--white); }
.back-link.on-light{ color: var(--navy); margin-top: 0; }
.back-link.on-light:hover{ color: var(--gold-bright); }

.contact-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
  margin-top:1.6rem;
}
.contact-links a,
.contact-links span{
  display:inline-flex;
  align-items:center;
  font-size:.85rem;
  padding:.45rem .9rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.35);
  color: var(--white);
  text-decoration:none;
  background: rgba(255,255,255,0.06);
}
.contact-links a:hover{
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.6);
}

.simple-list{
  margin:0;
  padding-left:1.2rem;
  color: var(--grey);
  font-size:.98rem;
}
.simple-list li{ margin-bottom:.5rem; }
.simple-list li:last-child{ margin-bottom:0; }

.lede{
  font-size:1.02rem;
  color: var(--grey);
  max-width:56rem;
}

/* Grouped company / role entries (multiple titles under one employer) */
.company{ margin-bottom:2.2rem; }
.company:last-child{ margin-bottom:0; }
.company-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.4rem .8rem;
  margin-bottom:.9rem;
}
.company-head h3{
  margin:0;
  font-size:1.15rem;
  color: var(--navy);
}
.company-head .meta{
  font-size:.8rem;
  color:#8a8f91;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:600;
  white-space:nowrap;
}

.roles{
  border-left:2px solid var(--pi-mile);
  padding-left:1.4rem;
}
.role{ position:relative; margin-bottom:1.6rem; }
.role:last-child{ margin-bottom:0; }
.role::before{
  content:"";
  position:absolute;
  left:-1.62rem;
  top:.3rem;
  width:11px;height:11px;
  border-radius:50%;
  background: var(--gold-bright);
  border:2px solid var(--white);
  box-shadow:0 0 0 2px var(--gold-bright);
}
.role-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.3rem .8rem;
  margin-bottom:.15rem;
}
.role-title{ font-weight:700; color: var(--navy-deep); font-size:.98rem; }
.role-dates{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color: var(--gold-bright);
  font-weight:700;
  white-space:nowrap;
}
.role-loc{
  display:block;
  font-size:.8rem;
  color:#8a8f91;
  margin-bottom:.4rem;
}
.role p{ margin:.4rem 0; font-size:.94rem; }
.role .simple-list{ margin-top:.5rem; font-size:.94rem; }
.role .timeline{ margin-top:.8rem; }

.muted{ color:#8a8f91; font-weight:400; }
.subhead{
  margin:1.1rem 0 .6rem;
  font-weight:700;
  color: var(--navy);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.top-skills{ margin-top:1rem; font-size:.95rem; color:var(--grey); }
.top-skills strong{ color:var(--navy); }
.card .simple-list{ margin-top:.9rem; font-size:.94rem; }
.cards.stacked{ grid-template-columns:1fr; gap:1.4rem; }