:root{
  --navy:#13233f; --navy-2:#1c3054; --cream:#f6f1e7; --stone:#e7e0d2; --grey:#eceae6;
  --ink:#1d2433; --muted:#5a6272; --cognac:#9a5b2e; --gold:#b08d57; --line:#d9d1c1;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--cream);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--cognac)}
h1,h2,h3{font-family:var(--serif);color:var(--navy);font-weight:600;line-height:1.15;margin:0}
.container{max-width:var(--max);margin:0 auto;padding:0 32px}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(246,241,231,.96);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy)}
.brand-mark{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--navy);font-family:var(--serif);font-weight:700;font-size:16px;letter-spacing:.06em;color:var(--navy)}
.brand-mark.small{width:30px;height:30px;font-size:13px;border-color:var(--gold);color:var(--gold)}
.brand-name{font-family:var(--serif);font-size:22px;font-weight:600}
.nav{display:flex;gap:32px}
.nav a{text-decoration:none;color:var(--navy);font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.nav a:hover{color:var(--cognac)}

/* Hero */
.hero{padding:96px 0 104px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:72px;align-items:center}
.eyebrow{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--cognac);font-weight:600;margin:0 0 22px}
.star{color:var(--gold);margin-right:6px}
h1{font-size:76px;font-weight:600;letter-spacing:-.01em}
.post-nominals{display:block;font-size:26px;font-family:var(--sans);font-weight:500;letter-spacing:.22em;color:var(--gold);margin-top:14px}
.lede{font-size:20px;color:var(--muted);max-width:34ch;margin:28px 0 36px;line-height:1.6}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:1px solid var(--navy);cursor:pointer;font-family:var(--sans);transition:background .2s,color .2s}
.btn-primary{background:var(--navy);color:var(--cream)}
.btn-primary:hover{background:var(--navy-2)}
.btn-ghost{color:var(--navy);background:transparent}
.btn-ghost:hover{background:var(--navy);color:var(--cream)}
.btn-accent{background:var(--cognac);border-color:var(--cognac);color:#fff}
.btn-accent:hover{background:#874e26}

.hero-portrait{display:flex;justify-content:center}
.portrait-frame{padding:14px;border:1px solid var(--gold);width:100%;max-width:380px}
.portrait-placeholder{aspect-ratio:4/5;background:var(--stone);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative;overflow:hidden}
.portrait-placeholder svg{width:78%;fill:#c9bfac}
.placeholder-label{position:absolute;top:18px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* Sections */
.section{padding:112px 0}
.section-alt{background:#fbf8f2;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-navy{background:var(--navy);color:#e9e4d8}
.section-navy h2{color:var(--cream)}
.kicker{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--cognac);font-weight:600;margin:0 0 14px}
.kicker.light{color:var(--gold)}
h2{font-size:46px}
.section-head{position:relative}
.section-head h2::after{content:"";display:block;width:56px;height:2px;background:var(--gold);margin-top:22px}
.section-head.center{text-align:center;margin-bottom:56px}
.section-head.center h2::after{margin-left:auto;margin-right:auto}
.two-col{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:start}
.prose p{margin:0 0 20px;font-size:18px}
.prose p:first-child{font-size:20px;color:var(--navy)}

/* Cards */
.cards{display:grid;gap:24px}
.cards.four{grid-template-columns:repeat(4,1fr)}
.cards.two{grid-template-columns:repeat(2,1fr);max-width:960px;margin:0 auto}
.card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);padding:32px 28px}
.card h3{font-size:25px;margin:12px 0 12px}
.card p{margin:0;color:var(--muted);font-size:16px}
.card-num{font-family:var(--serif);font-size:20px;color:var(--gold);font-weight:700}
.post{border-top-color:var(--cognac);padding:36px 34px}
.post h3{font-size:28px}
.badge{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--cognac);border:1px solid var(--cognac);padding:4px 10px}

/* Credentials */
.cred-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cred-list li{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--line);align-items:baseline}
.cred-tag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cognac);font-weight:600}
.cred-list h3{font-size:26px}
.cred-list p{margin:4px 0 0;color:var(--muted);font-size:16px}
.placeholder-text{font-style:italic;color:var(--cognac)!important}

/* Contact */
.contact-copy{margin-top:28px;font-size:17px;color:#d6d0c2;max-width:36ch}
.contact-copy a{color:var(--gold)}
.contact-form{display:grid;gap:20px;background:var(--navy-2);padding:40px;border:1px solid rgba(176,141,87,.35)}
.contact-form label span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold);margin-bottom:8px}
.contact-form input,.contact-form textarea{width:100%;padding:13px 14px;font:inherit;font-size:16px;color:var(--ink);background:var(--cream);border:1px solid transparent;border-radius:0}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.contact-form .btn{justify-self:start}

/* Footer */
.site-footer{background:#0e1a30;color:#b9b3a6;padding:28px 0}
.footer-inner{display:flex;align-items:center;gap:18px;font-size:14px}
.footer-inner p{margin:0;flex:1}
.footer-inner a{color:var(--gold);text-decoration:none}

/* Responsive */
@media (max-width:1024px){
  .cards.four{grid-template-columns:repeat(2,1fr)}
  h1{font-size:62px}
  .two-col{gap:48px}
}
@media (max-width:820px){
  .nav{display:none}
  .hero{padding:56px 0 72px}
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-portrait{order:-1;justify-content:flex-start}
  .portrait-frame{max-width:240px;padding:10px}
  .two-col{grid-template-columns:1fr;gap:36px}
  .section{padding:76px 0}
  h2{font-size:38px}
  .cards.two{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .container{padding:0 22px}
  h1{font-size:48px}
  .post-nominals{font-size:18px}
  .lede{font-size:18px}
  .cards.four{grid-template-columns:1fr}
  .cred-list li{grid-template-columns:1fr;gap:6px}
  .contact-form{padding:26px}
  .brand-name{font-size:20px}
  .section-head.center{margin-bottom:40px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* Polish */
@media (min-width:821px){ .two-col .section-head{position:sticky;top:110px} }
@media (max-width:820px){
  .header-inner{height:auto;flex-wrap:wrap;padding-top:14px;padding-bottom:10px;gap:10px}
  .nav{display:flex;width:100%;gap:20px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{font-size:12px;white-space:nowrap}
}
@media (max-width:560px){
  .eyebrow{letter-spacing:.12em;font-size:12px}
  .post h3{font-size:24px}
  .post{padding:30px 24px}
}
@media (max-width:560px){ .nav{gap:14px;justify-content:space-between} .nav a{font-size:11px;letter-spacing:.05em} }
@media (max-width:560px){ .nav{gap:10px} .nav a{font-size:10.5px;letter-spacing:.03em} }

/* Photos */
.portrait-frame picture,.service-frame picture{display:block}
.portrait-img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;background:var(--stone)}
.service-photo{margin:44px 0 0;max-width:300px}
.service-frame{padding:10px;border:1px solid var(--gold)}
.service-frame img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;background:var(--stone)}
.service-photo figcaption{margin-top:14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.6;font-weight:500}
.cred-list li > div:only-child{grid-column:1/-1}
@media (max-width:820px){ .service-photo{max-width:240px;margin-top:32px} }

/* v3: experience, facts, cert grid */
.cards.three{grid-template-columns:repeat(3,1fr)}
.facts{list-style:none;margin:36px 0 0;padding:28px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.facts li{font-size:14px;line-height:1.5;color:var(--muted)}
.facts span{display:block;font-family:var(--serif);font-size:44px;line-height:1;color:var(--navy);font-weight:600;margin-bottom:8px}
.timeline{list-style:none;margin:0 auto;padding:0;max-width:900px;position:relative}
.timeline::before{content:"";position:absolute;left:180px;top:8px;bottom:8px;width:1px;background:var(--gold)}
.timeline li{display:grid;grid-template-columns:180px 1fr;gap:0;padding:0 0 44px}
.timeline li:last-child{padding-bottom:0}
.tl-date{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--cognac);padding-top:6px;padding-right:28px;text-align:right}
.tl-body{padding-left:40px;position:relative}
.tl-body::before{content:"";position:absolute;left:-6px;top:10px;width:11px;height:11px;background:var(--cream);border:2px solid var(--navy);transform:rotate(45deg)}
.tl-body h3{font-size:27px;margin-bottom:10px}
.tl-body p{margin:0;color:var(--muted);font-size:16px}
.resume-note{text-align:center;margin:56px 0 0;font-size:15px;color:var(--muted)}
.list-title{font-family:var(--sans);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);font-weight:600;margin:0 0 14px}
.list-title:not(:first-child){margin-top:48px}
.cert-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cert-grid li{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);padding:14px 18px}
.cert-grid strong{display:block;font-family:var(--serif);font-size:21px;color:var(--navy);font-weight:600;line-height:1.2}
.cert-grid span{font-size:14px;color:var(--muted)}
@media (max-width:1024px){ .cards.three{grid-template-columns:repeat(2,1fr)} }
@media (max-width:820px){
  .timeline::before{left:6px}
  .timeline li{grid-template-columns:1fr;padding-left:32px}
  .tl-date{text-align:left;padding:0 0 6px}
  .tl-body{padding-left:0}
  .tl-body::before{left:-32px;top:-22px}
}
@media (max-width:560px){
  .cards.three{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr;gap:18px}
  .facts li{display:flex;align-items:baseline;gap:14px}
  .facts span{font-size:36px;margin:0;min-width:64px}
  .cert-grid{grid-template-columns:1fr}
  .tl-body h3{font-size:24px}
}
h1,h2,h3,.facts span,.cert-grid strong{font-variant-numeric:lining-nums}
.star-end{margin-right:0;margin-left:6px}

/* Auto dark mode */
@media (prefers-color-scheme: dark){
:root{--bg:#13233f;--bg-alt:#172a4b;--panel:#1c3054;--deep:#0e1a30;--text:#e9e2d2;--soft:#b9b3a6;--rule:rgba(176,141,87,.28)}
body{background:var(--bg);color:var(--text)}
a{color:var(--gold)}
h1,h2,h3{color:var(--cream)}
.site-header{background:rgba(19,35,63,.96);border-bottom-color:var(--rule)}
.brand,.brand-name{color:var(--cream)}
.brand-mark{border-color:var(--gold);color:var(--gold)}
.nav a{color:var(--cream)}
.nav a:hover{color:var(--gold)}
.hero{border-bottom-color:var(--rule)}
.eyebrow,.kicker,.cred-tag,.tl-date,.badge{color:var(--gold)}
.badge{border-color:var(--gold)}
.lede,.card p,.cred-list p,.tl-body p,.facts li,.cert-grid span,.resume-note,.service-photo figcaption{color:var(--soft)}
.prose p:first-child{color:var(--cream)}
.btn{border-color:var(--gold)}
.btn-primary{background:var(--gold);color:var(--navy)}
.btn-primary:hover{background:#c4a26b}
.btn-ghost{color:var(--cream);border-color:var(--cream)}
.btn-ghost:hover{background:var(--cream);color:var(--navy)}
.btn-accent{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.btn-accent:hover{background:#c4a26b}
.section-alt{background:var(--bg-alt);border-color:var(--rule)}
.section-navy{background:var(--deep)}
.contact-form{background:var(--panel)}
.card{background:var(--panel);border-color:var(--rule);border-top-color:var(--gold)}
.post{border-top-color:var(--gold)}
.cred-list,.cred-list li,.facts{border-color:var(--rule)}
.facts span,.cert-grid strong,.list-title{color:var(--cream)}
.cert-grid li{background:var(--panel);border-color:var(--rule);border-left-color:var(--gold)}
.tl-body::before{background:var(--bg);border-color:var(--gold)}
.placeholder-text{color:var(--gold)!important}
.site-footer{background:#0a1426}
}
.nowrap{white-space:nowrap}
@media (max-width:440px){.eyebrow{font-size:11px;letter-spacing:.08em}}
.disclaimer{display:block;font-size:12px;opacity:.75;margin-top:4px;line-height:1.5}

/* Mobile fit (mob1): nav wraps instead of scrolling; nothing clipped */
@media (max-width:820px){
  .nav{flex-wrap:wrap;overflow:visible;column-gap:22px;row-gap:8px;padding-bottom:2px}
}
@media (max-width:560px){
  .header-inner{gap:12px;padding-bottom:12px}
  .nav{column-gap:20px;row-gap:2px;justify-content:flex-start}
  .nav a{font-size:11.5px;letter-spacing:.08em;line-height:1.9}
  /* tidy 3 + 2 split: About · Experience · Expertise / Credentials · Contact */
  .nav a:nth-child(n+4){order:2}
  .nav::after{content:"";flex-basis:100%;height:0;order:1}
}
@media (max-width:380px){
  .nav{column-gap:16px}
  .nav a{font-size:11px;letter-spacing:.06em}
  h1{font-size:44px}
  .eyebrow{font-size:10.5px;letter-spacing:.05em}
  .eyebrow .star{margin-right:4px}
  .eyebrow .star-end{margin-right:0;margin-left:4px}
}
h1,h2,h3{overflow-wrap:break-word}
/* Mobile hero (mob1): centered headshot + centered hero text for balance */
@media (max-width:820px){
  .hero-portrait{justify-content:center}
  .hero-text{text-align:center}
  .hero .lede{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hero .post-nominals{padding-left:.22em}
}