/* ===== Tokens ===== */
:root{
  --navy:#10263e;
  --navy-deep:#0a1828;
  --steel:#3a6b8a;
  --steel-light:#6fa3c2;
  --paper:#f6f4ef;
  --ink:#1b2430;
  --muted:#637184;
  --gold:#c9a14a;
  --radius:2px;
  --maxw:1180px;
  --serif:'Georgia','Times New Roman',serif;
  --sans:'Helvetica Neue',Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{overflow-x:hidden; background:var(--navy-deep);}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--ink);
  line-height:1.55;
}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}
.eyebrow{
  text-align:center;
  letter-spacing:.25em;
  font-size:.75rem;
  color:var(--muted);
  margin-bottom:.5rem;
  font-weight:600;
}
.eyebrow-light{color:rgba(255,255,255,.65); text-align:left;}
.section-title{
  text-align:center;
  font-family:var(--serif);
  font-size:2.1rem;
  letter-spacing:.04em;
  margin-bottom:3rem;
  color:var(--navy);
}

/* ===== Navbar ===== */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(246,244,239,.96);
  border-bottom:1px solid rgba(16,38,62,.08);
  backdrop-filter:blur(6px);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 1.5rem;
}
.brand{display:flex; align-items:center; gap:.6rem;}
.brand-mark{
  width:34px; height:34px; border-radius:50%;
  background:var(--navy); color:#fff; font-family:var(--serif);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.brand-text{font-family:var(--serif); font-size:.95rem; letter-spacing:.05em; color:var(--navy); line-height:1.2;}
.brand-text small{font-family:var(--sans); font-size:.62rem; letter-spacing:.12em; color:var(--muted); font-weight:600;}
.nav-links{display:flex; gap:1.8rem;}
.nav-links a{
  font-size:.8rem; letter-spacing:.08em; font-weight:600; color:var(--navy);
  position:relative; padding-bottom:4px;
}
.nav-links a:after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--gold);
  transition:width .25s ease;
}
.nav-links a:hover:after{width:100%;}
.resume-btn{
  background:var(--steel); color:#fff; font-size:.78rem; font-weight:700;
  letter-spacing:.08em; padding:.65rem 1.3rem; border-radius:var(--radius);
  transition:background .2s ease;
}
.resume-btn:hover{background:var(--navy);}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer;}
.burger span{width:24px; height:2px; background:var(--navy);}

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex; align-items:center;
  padding:7rem 6vw 4rem;
  background:linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 60%, var(--steel) 130%);
  overflow:hidden;
}

/* City skyline SVG background */
.hero-city-bg {
  position:absolute; inset:0; z-index:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%230a1828'/%3E%3Cstop offset='100%25' stop-color='%2310263e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23sky)' width='1440' height='600'/%3E%3C!-- Background buildings far --%3E%3Crect x='800' y='180' width='60' height='420' fill='%23162d45' opacity='0.7'/%3E%3Crect x='870' y='140' width='45' height='460' fill='%231a3350' opacity='0.7'/%3E%3Crect x='925' y='200' width='80' height='400' fill='%23162d45' opacity='0.7'/%3E%3Crect x='1010' y='120' width='55' height='480' fill='%231e3a5a' opacity='0.8'/%3E%3Crect x='1070' y='160' width='70' height='440' fill='%23162d45' opacity='0.7'/%3E%3Crect x='1150' y='100' width='50' height='500' fill='%231a3350' opacity='0.8'/%3E%3Crect x='1210' y='180' width='90' height='420' fill='%23162d45' opacity='0.7'/%3E%3Crect x='1310' y='140' width='60' height='460' fill='%231e3a5a' opacity='0.8'/%3E%3Crect x='1380' y='200' width='60' height='400' fill='%23162d45' opacity='0.7'/%3E%3C!-- Mid buildings --%3E%3Crect x='820' y='250' width='40' height='350' fill='%23243d56'/%3E%3Crect x='880' y='220' width='35' height='380' fill='%232a4460'/%3E%3Crect x='940' y='270' width='55' height='330' fill='%23243d56'/%3E%3Crect x='1020' y='200' width='40' height='400' fill='%232a4460'/%3E%3Crect x='1080' y='240' width='60' height='360' fill='%23243d56'/%3E%3Crect x='1160' y='180' width='40' height='420' fill='%232a4460'/%3E%3Crect x='1220' y='260' width='70' height='340' fill='%23243d56'/%3E%3Crect x='1320' y='220' width='50' height='380' fill='%232a4460'/%3E%3C!-- Building windows --%3E%3Crect x='828' y='260' width='6' height='6' fill='%23c9a14a' opacity='0.8'/%3E%3Crect x='840' y='260' width='6' height='6' fill='%23c9a14a' opacity='0.5'/%3E%3Crect x='828' y='275' width='6' height='6' fill='%23c9a14a' opacity='0.3'/%3E%3Crect x='840' y='275' width='6' height='6' fill='%23c9a14a' opacity='0.7'/%3E%3Crect x='828' y='290' width='6' height='6' fill='%23c9a14a' opacity='0.6'/%3E%3Crect x='1030' y='210' width='6' height='6' fill='%236fa3c2' opacity='0.8'/%3E%3Crect x='1042' y='210' width='6' height='6' fill='%236fa3c2' opacity='0.4'/%3E%3Crect x='1030' y='225' width='6' height='6' fill='%236fa3c2' opacity='0.6'/%3E%3Crect x='1042' y='225' width='6' height='6' fill='%236fa3c2' opacity='0.9'/%3E%3Crect x='1168' y='190' width='6' height='6' fill='%23c9a14a' opacity='0.7'/%3E%3Crect x='1180' y='190' width='6' height='6' fill='%23c9a14a' opacity='0.4'/%3E%3Crect x='1168' y='205' width='6' height='6' fill='%23c9a14a' opacity='0.8'/%3E%3Crect x='1330' y='230' width='6' height='6' fill='%236fa3c2' opacity='0.6'/%3E%3Crect x='1342' y='230' width='6' height='6' fill='%236fa3c2' opacity='0.9'/%3E%3Crect x='1330' y='245' width='6' height='6' fill='%236fa3c2' opacity='0.4'/%3E%3C!-- Ground line --%3E%3Crect x='0' y='590' width='1440' height='10' fill='%230a1828'/%3E%3C/svg%3E");
  background-size:cover;
  background-position:right center;
  opacity:0.85;
}

.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(10,24,40,0.95) 35%, rgba(10,24,40,0.5) 65%, rgba(10,24,40,0.1) 100%);
}
.hero-content{position:relative; z-index:2; max-width:620px; color:#fff;}
.hero-eyebrow{
  font-size:.72rem; letter-spacing:.22em; color:var(--gold); font-weight:700; margin-bottom:1rem;
}
.hero-content h1{
  font-family:var(--serif); font-size:clamp(2.2rem,5vw,3.4rem);
  letter-spacing:.04em; line-height:1.15; margin-bottom:1.4rem;
}
.hero-content p{
  font-size:1.02rem; color:rgba(255,255,255,.82); max-width:520px; margin-bottom:2.2rem;
}
.hero-buttons{display:flex; gap:1rem; flex-wrap:wrap;}
.btn{
  padding:.85rem 1.6rem; font-size:.82rem; font-weight:700; letter-spacing:.08em;
  border-radius:var(--radius); display:inline-block; transition:all .2s ease;
}
.btn-primary{background:var(--gold); color:var(--navy-deep);}
.btn-primary:hover{background:#e0bc6a;}
.btn-ghost{border:1px solid rgba(255,255,255,.5); color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.1);}
.hero-photo{
  position:absolute; right:6vw; bottom:0; width:340px; z-index:2;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.55));
}
.hero-photo img{width:100%;}
.scroll-cue{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  color:#ffffff; font-size:1.8rem; animation:bounce 2s infinite;
  cursor:pointer; background:none; border:none; z-index:3;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
  text-shadow: 0 0 10px rgba(255,255,255,0.5);
}
@keyframes bounce{0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,8px);}}

/* ===== Tech strip — brand logo style ===== */
.strip{padding:4rem 6vw 3.5rem; background:#fff;}
.skills-categories{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-direction:column; gap:2rem;
}
.skills-category{}
.skills-cat-label{
  font-size:.68rem; letter-spacing:.18em; color:var(--muted); font-weight:700;
  margin-bottom:.9rem; text-transform:uppercase;
}
.logo-row{
  display:flex; flex-wrap:wrap; gap:.65rem;
}
.logo-brand{
  display:flex; align-items:center; gap:.45rem;
  padding:.55rem 1rem;
  border:1px solid rgba(16,38,62,.1);
  border-radius:5px;
  background:#fff;
  transition:all .2s ease;
  cursor:default;
}
.logo-brand:hover{
  border-color:var(--gold);
  box-shadow:0 3px 12px rgba(16,38,62,.08);
  transform:translateY(-2px);
}
.brand-icon{font-size:1rem; line-height:1;}
.brand-name{
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  color:var(--navy); letter-spacing:.01em; white-space:nowrap;
}

/* ===== Connect / Social Icons ===== */
.featured{padding:4rem 6vw 3.5rem; background:var(--paper); text-align:center;}
.social-icons-row{
  display:flex; justify-content:center; align-items:flex-start;
  gap:3rem; flex-wrap:wrap;
  max-width:700px; margin:2.5rem auto 0;
}
.social-icon-item{
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  text-decoration:none; transition:transform .2s ease;
}
.social-icon-item:hover{ transform:translateY(-5px); }
.social-circle{
  width:72px; height:72px; border-radius:50%;
  background:rgba(var(--sc-rgb, 27,36,48), 0.1);
  border:2px solid var(--sc);
  display:flex; align-items:center; justify-content:center;
  color:var(--sc);
  transition:all .2s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.social-icon-item:hover .social-circle{
  background:var(--sc);
  color:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,0.18);
}
.social-circle svg{ width:32px; height:32px; }
.social-name{
  font-size:.78rem; font-weight:700; letter-spacing:.08em;
  color:var(--navy); text-transform:uppercase;
}

/* ===== Projects (perks) ===== */
.perks{padding:5rem 6vw; background:#fff;}
.perks-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;
  max-width:var(--maxw); margin:0 auto;
}
.perk-card{
  border:1px solid rgba(16,38,62,.1); padding:0 0 2rem; transition:transform .2s ease, box-shadow .2s ease, opacity .4s ease;
  display:flex; flex-direction:column; overflow:hidden;
}
.perk-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(16,38,62,.1);}
.perk-img-wrap{
  width:100%; height:290px; overflow:hidden; background:#f2f4f7; margin-bottom:1rem;
}
.perk-img{
  width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease;
}
.perk-card:hover .perk-img{transform:scale(1.06);}
.perk-card > .perk-icon,
.perk-card > h3,
.perk-card > p,
.perk-card > .perk-tags,
.perk-card > .perk-links{
  padding-left:1.7rem; padding-right:1.7rem;
}
.perk-icon{font-size:1.7rem; margin-top:1.4rem; margin-bottom:1rem;}
.perk-card h3{font-size:1.02rem; color:var(--navy); margin-bottom:.6rem; letter-spacing:.02em;}
.perk-card p{font-size:.88rem; color:var(--muted); margin-bottom:1rem; flex:1;}
.perk-tags{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem;}
.perk-tags span{
  font-size:.68rem; letter-spacing:.04em; color:var(--black);  background:#ffe066; border:1px solid rgba(58,107,138,.3);  font-weight:700;
  padding:.2rem .5rem; border-radius:20px;
}
.perk-links{display:flex; justify-content:space-between; align-items:center; font-size:.8rem; font-weight:800; margin-top:auto;}
.perk-links a{color:var(--navy);}
.perk-links a:hover{color:var(--gold);}
.perk-links a:last-child{color:var(--steel);}
.perk-links a:last-child:hover{color:var(--gold);}

/* ===== Why hire me — stats version ===== */
.why{
  display:grid; grid-template-columns:1fr 1.15fr;
  background:var(--navy);
}
.why-visual{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:4rem 3vw; gap:2.5rem;
  background:linear-gradient(135deg, var(--navy-deep) 0%, var(--steel) 100%);
  position:relative; overflow:hidden;
}
.why-visual::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 40%, rgba(201,161,74,.15), transparent 60%),
             radial-gradient(circle at 70% 70%, rgba(111,163,194,.1), transparent 50%);
}
.why-stat-block{
  display:flex; gap:2rem; flex-wrap:wrap; justify-content:center; position:relative; z-index:1;
}
.why-stat{
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  padding:1.2rem 1.6rem; border-radius:8px; min-width:110px;
  backdrop-filter:blur(4px);
}
.stat-num{
  font-family:var(--serif); font-size:2.2rem; color:var(--gold); font-weight:700; line-height:1;
}
.stat-label{
  font-size:.7rem; letter-spacing:.06em; color:rgba(255,255,255,.7); text-align:center; line-height:1.4;
}
.why-stack-icons{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; position:relative; z-index:1; max-width:300px;
}
.stack-badge{
  font-size:.72rem; font-weight:700; letter-spacing:.06em;
  padding:.35rem .8rem; border-radius:20px;
  border:1px solid rgba(201,161,74,.4); color:var(--gold);
  background:rgba(201,161,74,.08);
}
.why-content{padding:4rem 5vw; color:#fff;}
.why-item{padding:1.3rem 0; border-bottom:1px solid rgba(255,255,255,.12);}
.why-item:last-child{border-bottom:none;}
.why-item h3{font-size:1rem; letter-spacing:.06em; margin-bottom:.5rem; color:var(--gold);}
.why-item p{font-size:.92rem; color:rgba(255,255,255,.78);}

/* ===== Education + Training dual timeline ===== */
.education{padding:5rem 6vw; background:var(--paper);}
.dual-timeline{
  display:grid; grid-template-columns:1fr 2px 1fr; gap:0 2rem;
  max-width:var(--maxw); margin:0 auto;
}
.timeline-col{}
.timeline-col-title{
  font-family:var(--serif); font-size:1.2rem; color:var(--navy);
  margin-bottom:1.8rem; letter-spacing:.03em; padding-bottom:.6rem;
  border-bottom:2px solid var(--gold);
}
.timeline-divider{background:rgba(16,38,62,.12);}
.timeline{position:relative; padding-left:2rem; border-left:2px solid rgba(16,38,62,.15);}
.tl-item{position:relative; padding-bottom:2.4rem;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:""; position:absolute; left:-2.46rem; top:4px; width:12px; height:12px; border-radius:50%;
  background:var(--gold); border:3px solid var(--paper); box-shadow:0 0 0 2px rgba(16,38,62,.15);
}
.tl-year{font-size:.78rem; letter-spacing:.08em; color:var(--steel); font-weight:700; margin-bottom:.3rem;}
.tl-item h3{font-size:1.05rem; color:var(--navy); margin-bottom:.2rem;}
.tl-item p{font-size:.88rem; color:var(--muted);}
.tl-grade{
  display:inline-block; margin-top:.4rem; font-size:.72rem; font-weight:700;
  letter-spacing:.06em; color:var(--gold); background:rgba(201,161,74,.1);
  border:1px solid rgba(201,161,74,.3); padding:.2rem .6rem; border-radius:20px;
}

/* ===== Contact / footer ===== */
.contact{background:var(--navy-deep); color:#fff; padding:4rem 6vw 1.5rem;}
.contact-inner{
  max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between;
  align-items:flex-end; flex-wrap:wrap; gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.12);
}
.contact h2{font-family:var(--serif); font-size:1.9rem; margin-bottom:.6rem; letter-spacing:.03em;}
.contact-inner > div:first-child p{color:rgba(255,255,255,.7); max-width:380px;}
.contact-links{display:flex; flex-wrap:wrap; gap:.9rem;}
.contact-pill{
  border:1px solid rgba(255,255,255,.25); padding:.65rem 1.1rem; font-size:.82rem; border-radius:30px;
  transition:all .2s ease;
}
.contact-pill:hover{background:var(--gold); color:var(--navy-deep); border-color:var(--gold);}
.footer-bottom{
  max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between;
  font-size:.75rem; color:rgba(255,255,255,.5); padding-top:1.2rem; flex-wrap:wrap; gap:.5rem;
}

/* ===== Certificates Slider ===== */
.certificates-section{
  padding:5rem 6vw 4rem;
  background:var(--navy);
  position:relative;
  overflow:hidden;
}
.certificates-section::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 20% 50%, rgba(201,161,74,.07), transparent 55%),
             radial-gradient(circle at 80% 30%, rgba(111,163,194,.07), transparent 55%);
  pointer-events:none;
}
.certificates-section .section-title{
  color:#fff;
  margin-bottom:2.8rem;
}

/* Wrapper holds arrows + track */
.cert-slider-wrapper{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:1rem;
}

/* Arrow buttons */
.cert-arrow{
  flex-shrink:0;
  width:46px; height:46px;
  border-radius:50%;
  border:2px solid rgba(201,161,74,.45);
  background:rgba(201,161,74,.08);
  color:var(--gold);
  font-size:1.3rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .22s ease;
  z-index:2;
}
.cert-arrow:hover{
  background:var(--gold);
  color:var(--navy-deep);
  border-color:var(--gold);
  box-shadow:0 4px 18px rgba(201,161,74,.35);
}

/* Outer clips overflow */
.cert-track-outer{
  overflow:hidden;
  flex:1;
}

/* Inner sliding track */
.cert-track{
  display:flex;
  gap:1.4rem;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}

/* Each certificate card */
.cert-card{
  flex-shrink:0;
  width:calc((100% - 2.8rem) / 3); /* 3 visible */
  background:rgba(255,255,255,.04);
  border:1px solid rgba(201,161,74,.2);
  border-radius:10px;
  overflow:hidden;
  position:relative;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cert-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  border-color:rgba(201,161,74,.65);
}

/* Image fills top portion */
.cert-card-img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.cert-card:hover .cert-card-img{
  transform:scale(1.03);
}

/* Image container clips the zoom */
.cert-img-wrap{
  overflow:hidden;
  width:100%;
  aspect-ratio:16/10;
}

/* Card bottom info */
.cert-card-info{
  padding:.9rem 1.1rem 1rem;
}
.cert-card-title{
  font-size:.92rem; font-weight:700;
  color:#fff; letter-spacing:.03em;
  margin-bottom:.25rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cert-card-issuer{
  font-size:.75rem; color:var(--gold);
  letter-spacing:.06em; font-weight:600;
  text-transform:uppercase;
}
.cert-card-year{
  font-size:.72rem; color:rgba(255,255,255,.45);
  margin-top:.2rem;
}

/* Dots */
.cert-dots{
  display:flex; gap:.5rem; justify-content:center; margin-top:1.8rem;
}
.cert-dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.2); border:none; cursor:pointer;
  transition:all .2s ease; padding:0;
}
.cert-dot.active{
  background:var(--gold); width:22px; border-radius:4px;
}

/* Lightbox overlay for fullscreen view */
.cert-lightbox{
  display:none;
  position:fixed; inset:0; z-index:999;
  background:rgba(0,0,0,.88);
  align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}
.cert-lightbox.open{ display:flex; }
.cert-lightbox-img{
  max-width:88vw; max-height:88vh;
  border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
  animation:lbIn .25s ease;
}
@keyframes lbIn{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);}}
.cert-lightbox-close{
  position:absolute; top:1.5rem; right:1.8rem;
  font-size:2rem; color:#fff; background:none; border:none;
  cursor:pointer; line-height:1; opacity:.75; transition:opacity .15s;
}
.cert-lightbox-close:hover{opacity:1;}
.cert-lightbox-caption{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.8); font-size:.88rem; letter-spacing:.06em;
  text-align:center;
}

/* Responsive: 2 visible on tablet, 1 on mobile */
@media (max-width:920px){
  .cert-card{ width:calc((100% - 1.4rem) / 2); }
}
@media (max-width:580px){
  .cert-card{ width:100%; }
  .cert-arrow{ width:38px; height:38px; font-size:1rem; }
}


.reveal{opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease;}
.reveal.visible{opacity:1; transform:translateY(0);}

/* ===== Responsive ===== */
@media (max-width:920px){
  .perks-grid{grid-template-columns:repeat(2,1fr);}
  .why{grid-template-columns:1fr;}
  .why-visual{padding:3rem 6vw;}
  .hero-photo{width:240px; opacity:.5;}
  .dual-timeline{grid-template-columns:1fr; gap:3rem 0;}
  .timeline-divider{display:none;}
}
@media (max-width:680px){
  .nav-links{display:none;}
  .burger{display:flex;}
  .resume-btn{display:none;}
  .perks-grid{grid-template-columns:1fr;}
  .hero{padding:7rem 6vw 5rem;}
  .hero-photo{display:none;}
  .feat-slide{flex-direction:column; text-align:center;}
  .contact-inner{align-items:flex-start;}
}

/* mobile nav open state */
.navbar.open .nav-links{
  display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
  background:var(--paper); padding:1.2rem 1.5rem; gap:1rem; border-bottom:1px solid rgba(16,38,62,.1);
}