:root{
  --bg:#F5F5F1;
  --panel:#FFFFFF;
  --ink:#14151A;
  --ink-soft:#4C505A;
  --muted:#6B6F77;
  --line:#DADBD4;
  --accent:#55739E;
  --accent-deep:#374F72;
  --accent-soft:#E8ECF2;
  --white:#FFFFFF;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  margin:0;
  color:var(--ink);
  letter-spacing:-0.01em;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1080px;margin:0 auto;padding:0 32px;}

/* Nav */
header.nav{
  position:sticky;top:0;z-index:20;
  background:rgba(245,245,241,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1080px;margin:0 auto;padding:18px 32px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:-0.01em;}
.nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0;}
.nav-links a{font-size:0.92rem;text-decoration:none;color:var(--muted);transition:color .15s ease;}
.nav-links a:hover{color:var(--accent);}
.nav-cta{
  font-size:0.88rem;font-weight:600;text-decoration:none;
  color:var(--white);background:var(--ink);
  padding:10px 20px;border-radius:0;
  white-space:nowrap;
  transition:background .15s ease;
}
.nav-cta:hover{background:var(--accent);}

/* Hero */
.hero{padding:92px 0 68px;position:relative;}
.hero-grid{
  display:grid;
  grid-template-columns:1.25fr 0.9fr;
  gap:56px;
  align-items:center;
}
.kicker{
  font-size:0.92rem;color:var(--accent);font-weight:600;
  margin:0 0 18px;
}
.hero h1{
  font-size:clamp(2.6rem,4.8vw,3.9rem);
  line-height:1.03;
  letter-spacing:-0.02em;
}
.hero .role{
  margin-top:20px;font-size:1.18rem;color:var(--ink-soft);
  max-width:46ch;
  font-weight:400;
}
.hero-meta{
  margin-top:30px;display:flex;flex-wrap:wrap;gap:10px 22px;
  font-size:0.94rem;color:var(--muted);
}
.hero-meta span{white-space:nowrap;}
.hero-actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;}
.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:0.95rem;
  padding:14px 28px;border-radius:0;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn-primary{background:var(--ink);color:var(--white);}
.btn-primary:hover{background:var(--accent);}
.btn-outline{border:1.5px solid var(--ink);color:var(--ink);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);}

.portrait{
  position:relative;
  border:1px solid var(--line);
  background:var(--panel);
  padding:0;
}
.portrait img{width:100%;height:auto;object-fit:cover;}
.portrait .tag{
  position:absolute;bottom:0;left:0;
  background:var(--accent);color:var(--white);
  font-size:0.8rem;font-weight:600;
  padding:10px 18px;
  font-family:'Space Grotesk',sans-serif;
}

/* Clients / brands */
.clients{
  background:var(--ink);
  padding:56px 0;
}
.clients-kicker{
  margin:0 0 22px;
  font-size:0.88rem;
  color:var(--accent);
  font-weight:600;
}
.clients-grid{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:0 48px;
}
.clients-grid li{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:clamp(1.125rem,2.55vw,1.725rem);
  color:var(--white);
  line-height:1.3;
  letter-spacing:-0.01em;
  position:relative;
  padding-right:48px;
}
.clients-grid li::after{
  content:"/";
  position:absolute;
  right:-28px;
  color:var(--accent);
}
.clients-grid li:last-child{padding-right:0;}
.clients-grid li:last-child::after{content:"";}

/* Stats strip */
.stats{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--panel);
}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.stat{
  padding:36px 28px;
  border-right:1px solid var(--line);
}
.stat:last-child{border-right:none;}
.stat .num{
  font-family:'Space Grotesk',sans-serif;
  font-size:2.3rem;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.stat .label{font-size:0.88rem;color:var(--muted);margin-top:6px;}

/* Section shell */
section{padding:80px 0;}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:40px;
  border-bottom:1px solid var(--line);
  padding-bottom:18px;
}
.section-head h2{font-size:1.75rem;}
.section-head .num{font-family:'Space Grotesk',sans-serif;color:var(--accent);font-size:1rem;font-weight:600;}

/* About */
.about-body{max-width:72ch;font-size:1.06rem;color:var(--ink-soft);}
.about-body p + p{margin-top:18px;}

/* Experience timeline */
.timeline{position:relative;}
.timeline::before{
  content:"";position:absolute;left:126px;top:6px;bottom:6px;width:1px;background:var(--line);
}
.role-item{
  display:grid;grid-template-columns:110px 1fr;gap:32px;
  padding:30px 0;border-bottom:1px solid var(--line);
  position:relative;
}
.role-item:first-child{padding-top:0;}
.role-item::before{
  content:"";position:absolute;left:123px;top:36px;width:7px;height:7px;
  background:var(--accent);border:2px solid var(--bg);
}
.role-dates{
  font-family:'Space Grotesk',sans-serif;
  font-size:0.86rem;color:var(--muted);padding-top:4px;font-weight:500;
}
.role-org{font-size:0.92rem;color:var(--accent);font-weight:600;margin-bottom:4px;}
.role-title{font-family:'Space Grotesk',sans-serif;font-size:1.22rem;font-weight:600;}
.role-loc{font-size:0.86rem;color:var(--muted);margin-top:2px;margin-bottom:12px;}
.role-item ul{margin:0;padding-left:20px;color:var(--ink-soft);font-size:0.97rem;}
.role-item li + li{margin-top:8px;}
.role-item p.role-blurb{margin:0 0 12px;font-size:0.92rem;color:var(--muted);}

/* Achievements */
.achieve-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.achieve{background:var(--panel);padding:28px 28px;}
.achieve .mark{color:var(--accent);font-family:'Space Grotesk',sans-serif;font-size:1.4rem;font-weight:700;}
.achieve p{margin:10px 0 0;font-size:0.96rem;color:var(--ink-soft);}

/* Competencies */
.comp-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  margin-bottom:48px;
}
.comp{background:var(--panel);padding:26px 26px;}
.comp h3{font-size:0.95rem;color:var(--accent);margin-bottom:10px;font-family:'Space Grotesk',sans-serif;}
.comp p{margin:0;font-size:0.9rem;color:var(--ink-soft);}

/* Skills */
.skills-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:36px 48px;
}
.skill-group h3{font-size:1rem;letter-spacing:-0.005em;margin-bottom:12px;}
.skill-tags{display:flex;flex-wrap:wrap;gap:8px;}
.skill-tags span{
  font-size:0.86rem;border:1px solid var(--line);padding:7px 13px;color:var(--ink-soft);background:var(--panel);
}

/* Education + certs */
.edu-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.edu-item{border-bottom:1px solid var(--line);padding:18px 0;}
.edu-item:first-child{padding-top:0;}
.edu-school{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:600;}
.edu-detail{font-size:0.92rem;color:var(--muted);margin-top:4px;}
.cert-note{font-size:0.92rem;color:var(--muted);margin-bottom:16px;}
.cert-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;font-size:0.9rem;}
.cert-list li{list-style:none;padding:7px 0;border-bottom:1px dotted var(--line);color:var(--ink-soft);}
.cert-list code{
  font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--accent-deep);margin-right:8px;
}

/* Languages */
.lang-row{display:flex;gap:40px;margin-top:8px;}
.lang-row div span{display:block;font-size:0.86rem;color:var(--muted);margin-top:2px;}

/* Contact / footer */
footer{
  background:var(--ink);color:var(--bg);
  padding:72px 0 40px;
}
footer h2{color:var(--white);font-size:2rem;max-width:16ch;}
.contact-grid{
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;margin-top:36px;
}
.contact-list{list-style:none;margin:0;padding:0;}
.contact-list li{padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.14);}
.contact-list a{text-decoration:none;color:var(--bg);font-size:1rem;transition:color .15s ease;}
.contact-list a:hover{color:var(--accent);}
.contact-list .label{display:block;font-size:0.78rem;color:#9398A0;margin-bottom:3px;}
.footer-note{margin-top:48px;font-size:0.82rem;color:#9398A0;border-top:1px solid rgba(255,255,255,0.14);padding-top:22px;}

@media (max-width:860px){
  .clients-grid{gap:0 28px;}
  .clients-grid li{padding-right:28px;}
  .clients-grid li::after{right:-16px;}
  .hero-grid{grid-template-columns:1fr;}
  .portrait{max-width:320px;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .stat{border-bottom:1px solid var(--line);}
  .stat:nth-child(2n){border-right:none;}
  .achieve-grid{grid-template-columns:1fr;}
  .comp-grid{grid-template-columns:1fr;}
  .skills-grid{grid-template-columns:1fr;}
  .edu-grid{grid-template-columns:1fr;}
  .cert-list{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .nav-links{display:none;}
  .role-item{grid-template-columns:1fr;gap:8px;}
  .timeline::before{display:none;}
  .role-item::before{display:none;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}