:root {
  --navy: #071326; --navy-2: #0d1c34; --panel: #10223c; --ink: #f5f7fb;
  --muted: #a8b6ca; --line: rgba(203, 216, 235, .18); --gold: #e5b54c;
  --serif: "Playfair Display", Georgia, serif; --sans: "DM Sans", -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--navy); color: var(--ink); font-family: var(--sans); line-height: 1.65; }
a { color: inherit; }
.site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 18px clamp(22px, 5vw, 76px); background: rgba(7,19,38,.93); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.wordmark { text-decoration: none; font: 600 24px var(--serif); white-space: nowrap; letter-spacing: -.04em; }
.wordmark span { color: var(--gold); }
nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: clamp(12px, 2vw, 28px); }
nav a { text-decoration: none; color: var(--muted); font-size: 13px; transition: color .2s; }
nav a:hover, .hero-links a:hover, .footer a:hover { color: var(--gold); }
nav .nav-contact { color: var(--ink); border: 1px solid var(--line); border-radius: 99px; padding: 8px 15px; }
.menu-toggle { display: none; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 20px; padding: 8px 13px; }
.section-wrap { padding-left: clamp(24px, 7vw, 110px); padding-right: clamp(24px, 7vw, 110px); }
.hero { min-height: 600px; padding-top: 88px; padding-bottom: 78px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(170px, .45fr); align-items: center; gap: 60px; background: radial-gradient(ellipse at 82% 20%, #172d4d 0%, transparent 40%); }
.eyebrow, .section-kicker { color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.hero h1 { font: 500 clamp(58px, 9vw, 112px)/.99 var(--serif); letter-spacing: -.055em; margin: 25px 0 24px; }
.hero h1 em, .contact-section h2 em { color: #b8c9e2; font-weight: 500; }
.hero-subtitle { max-width: 760px; color: #dce5f1; font-size: clamp(17px, 2vw, 22px); font-weight: 600; line-height: 1.5; }
.ivy-line { white-space: nowrap; }
.fellow { color: var(--gold); font-size: 14px; font-weight: 700; }
.hero-intro { max-width: 740px; margin-top: 26px; color: #bdc9d9; font: 19px/1.8 var(--serif); }
.hero-links { display: flex; flex-wrap: wrap; gap: 12px 23px; margin-top: 30px; color: #dce5f1; font-size: 13px; }
.hero-links a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hero-aside { border-left: 1px solid var(--line); padding-left: 30px; color: var(--muted); font: 17px/1.6 var(--serif); }
.hero-portrait { display: block; width: min(100%, 300px); aspect-ratio: 1 / 1; object-fit: cover; object-position: center 25%; border-radius: 50%; border: 1px solid rgba(229,181,76,.55); box-shadow: 0 20px 60px rgba(0,0,0,.28); }
.verification-card { display: grid; grid-template-columns: 1fr minmax(170px, 260px); align-items: center; gap: 28px; border: 1px solid var(--line); padding: 22px; background: rgba(255,255,255,.02); }
.verification-card p:not(.role-meta) { color: #c4cfde; font: 15px/1.75 var(--serif); }
.verification-preview { display: block; border: 1px solid var(--line); background: white; padding: 6px; }
.verification-preview img { display: block; width: 100%; height: auto; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-top: 20px; padding-bottom: 70px; }
.metric-feature { grid-column: span 2; border-left: 3px solid var(--gold); padding: 4px 20px 10px; }
.metric-feature strong { display: block; font-size: clamp(36px, 5vw, 58px); line-height: 1.2; letter-spacing: -.05em; }
.metric-feature p { max-width: 300px; color: var(--muted); margin: 10px 0 0; font: 16px/1.6 var(--serif); }
.metric-small { grid-column: span 2; padding: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.metric-small strong { font-size: 32px; line-height: 1.2; }
.metric-small p { color: var(--muted); margin: 8px 0 0; font-size: 13px; }
.content-section { padding-top: 78px; padding-bottom: 82px; border-top: 1px solid var(--line); }
.section-kicker { margin: 0 0 12px; }
h2 { margin: 0 0 34px; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.04em; line-height: 1.15; }
h3 { margin: 0 0 8px; line-height: 1.35; font-size: 19px; }
p { margin-top: 0; }
.two-col { display: grid; grid-template-columns: .85fr 1.15fr; gap: 9%; }
.two-col p { color: #c4cfde; font: 17px/1.85 var(--serif); }
.timeline { display: grid; gap: 42px; }
.role { display: grid; grid-template-columns: 180px 1fr; gap: 32px; }
.role-date { color: var(--gold); font-size: 11px; letter-spacing: .1em; font-weight: 700; padding-top: 6px; }
.role > div:last-child { border-left: 1px solid var(--line); padding-left: 28px; }
.role-meta { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
ul { padding-left: 20px; color: #c4cfde; }
li { margin: 0 0 10px; padding-left: 3px; }
.chart-card { border: 1px solid var(--line); padding: 24px 26px 18px; margin: 18px 0; background: rgba(255,255,255,.02); }
.chart-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; }
.chart-heading h3 { font-size: 16px; }
.chart-heading span, .bar-item span { color: var(--muted); font-size: 11px; }
.bar-chart { height: 240px; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 15px; padding: 25px 0 0; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0, transparent 47px, rgba(203,216,235,.08) 48px); }
.bar-item { display: flex; height: 100%; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; text-align: center; font-size: 11px; }
.bar { width: min(42px, 70%); height: var(--height); min-height: 12px; background: linear-gradient(180deg, #e5b54c, #9d7930); border-radius: 4px 4px 0 0; margin-bottom: 5px; box-shadow: 0 0 25px rgba(229,181,76,.08); }
.bar-item strong { font-size: 11px; }
.team-chart { grid-template-columns: repeat(7, 1fr); }
.note { color: var(--muted); font-size: 12px; margin-top: 22px; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.case-card, .principle { position: relative; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); padding: 28px; }
.case-number { color: var(--gold); font-size: 11px; letter-spacing: .15em; }
.case-card h3 { margin-top: 18px; font-size: 21px; }
.case-metric { display: block; color: var(--gold); font-size: clamp(23px, 3vw, 32px); line-height: 1.25; letter-spacing: -.04em; margin: 12px 0 2px; }
.case-label { color: var(--muted); font-size: 12px; }
.case-card p, .principle p, .governance-card p { color: #c4cfde; font: 15px/1.75 var(--serif); }
.case-card p b { color: var(--ink); font-family: var(--sans); font-size: 12px; }
.leadership-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.principle h3 { margin-bottom: 14px; }
.governance-card { display: grid; grid-template-columns: 4px 1fr; gap: 25px; border: 1px solid var(--line); padding: 24px; background: rgba(255,255,255,.02); }
.gold-line { background: var(--gold); }
.education-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.education-row p { color: var(--muted); margin-bottom: 0; }
.tag, .tags span { display: inline-block; border: 1px solid var(--line); border-radius: 30px; padding: 7px 12px; font-size: 12px; color: #d7e0ed; }
.tags { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 22px; }
.contact-section { padding-top: 85px; padding-bottom: 90px; background: radial-gradient(ellipse at 80% 50%, #172d4d, transparent 55%), #0b1a30; border-top: 1px solid var(--line); }
.contact-section h2 { font: 500 clamp(38px, 6vw, 70px)/1.1 var(--serif); margin-bottom: 18px; }
.contact-section > p:not(.section-kicker) { color: var(--muted); }
.contact-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-block; padding: 12px 18px; border-radius: 30px; text-decoration: none; font-size: 13px; font-weight: 600; }
.button-light { background: var(--ink); color: var(--navy); }
.button-outline { border: 1px solid var(--line); color: var(--ink); }
.footer { display: flex; justify-content: space-between; padding-top: 25px; padding-bottom: 25px; color: var(--muted); font-size: 12px; }
.footer a { text-decoration: none; }
.footer-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .site-header { align-items: flex-start; }
  .menu-toggle { display: block; margin-left: auto; }
  nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 20px 24px; background: var(--navy-2); border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; }
  nav.open { display: flex; }
  .hero { grid-template-columns: 1fr; gap: 30px; padding-top: 60px; }
  .hero-aside { display: flex; align-items: center; gap: 20px; border-left: 0; border-top: 1px solid var(--line); padding: 22px 0 0; }
  .hero-portrait { width: min(42vw, 180px); aspect-ratio: 1 / 1; flex: 0 0 auto; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric-feature { grid-column: span 1; }
  .two-col { grid-template-columns: 1fr; gap: 5px; }
  .leadership-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hero h1 { font-size: 62px; }
  .hero-intro { font-size: 17px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric-feature { grid-column: span 2; }
  .metric-small { padding: 15px; }
  .role { grid-template-columns: 1fr; gap: 7px; }
  .role > div:last-child { padding-left: 18px; }
  .card-grid { grid-template-columns: 1fr; }
  .chart-card { padding: 18px 12px 14px; }
  .bar-chart { gap: 5px; height: 205px; }
  .bar-item span { font-size: 9px; }
  .bar-item strong { font-size: 10px; }
  .education-row { align-items: flex-start; flex-direction: column; }
  .ivy-line { white-space: normal; }
  .verification-card { grid-template-columns: 1fr; }
  .verification-preview { max-width: 260px; }
  .footer { gap: 20px; flex-wrap: wrap; }
  .footer-links { gap: 14px; }
}

/* Employment-letter request / lead-capture form */
.verification-card { grid-template-columns: minmax(0, 1fr) minmax(170px, 230px); gap: 32px; }
.verification-copy h3 { margin-top: 8px; }
.document-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(229,181,76,.12); color: var(--gold); font-size: 27px; }
.request-welcome { margin: 10px 0 18px; color: var(--ink) !important; font-family: var(--sans) !important; font-weight: 600; }
.verification-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.button-primary { cursor: pointer; border: 1px solid #e5b54c; background: var(--gold); color: #071326; font: 600 13px var(--sans); }
.button-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.request-note { margin: 12px 0 0; color: var(--muted) !important; font: 12px/1.5 var(--sans) !important; }
.verification-preview { position: relative; text-decoration: none; }
.verification-preview span { display: block; text-align: center; padding: 8px 4px 2px; color: #33445d; font: 11px var(--sans); }
.request-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 22px; }
.request-modal.is-open { display: flex; }
.request-backdrop { position: absolute; inset: 0; background: rgba(1,8,19,.78); backdrop-filter: blur(7px); }
.request-dialog { position: relative; z-index: 1; width: min(100%, 520px); max-height: min(90vh, 850px); overflow: auto; padding: clamp(24px, 5vw, 38px); border: 1px solid var(--line); border-radius: 18px; background: #10223c; box-shadow: 0 25px 90px rgba(0,0,0,.45); }
.request-close { position: absolute; top: 13px; right: 16px; border: 0; background: transparent; color: var(--muted); font-size: 29px; cursor: pointer; }
.request-dialog h2 { margin: 0 28px 12px 0; font-size: clamp(28px, 4vw, 38px); }
.request-intro { color: var(--muted); font: 15px/1.65 var(--serif); margin-bottom: 22px; }
#request-form { display: grid; gap: 8px; }
#request-form label { margin-top: 6px; font-size: 12px; font-weight: 700; }
#request-form label span { color: var(--gold); }
#request-form label small { color: var(--muted); font-weight: 400; }
#request-form input, #request-form select, #request-form textarea { width: 100%; padding: 12px 13px; border: 1px solid rgba(203,216,235,.28); border-radius: 8px; background: #09182c; color: var(--ink); font: 14px var(--sans); }
#request-form input::placeholder, #request-form textarea::placeholder { color: #8292a9; }
#request-form select:invalid { color: #8292a9; }
#request-form textarea { resize: vertical; }
.request-submit { margin-top: 12px; padding: 14px 18px; border-radius: 9px; }
.request-privacy { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 5px 0 0; }
body.modal-open { overflow: hidden; }
@media (max-width: 600px) {
  .verification-card { grid-template-columns: 1fr; }
  .verification-preview { max-width: 250px; }
  .verification-actions .button { text-align: center; }
  .request-dialog { padding: 26px 20px; }
  .ivy-line { white-space: normal; }
}

/* Refined light executive theme: warm ivory, deep ink and muted sage/gold accents */
:root {
  --navy: #f7f6f2;
  --navy-2: #ffffff;
  --panel: #ffffff;
  --ink: #172638;
  --muted: #667386;
  --line: rgba(33, 52, 73, .15);
  --gold: #a87924;
}
body { background: #f7f6f2; color: #172638; }
.site-header { background: rgba(250,249,246,.94); box-shadow: 0 4px 24px rgba(22,38,56,.035); }
nav a { color: #596779; }
nav a:hover, .hero-links a:hover, .footer a:hover { color: #93671c; }
nav .nav-contact { color: #172638; border-color: rgba(33,52,73,.22); }
.menu-toggle { color: #172638; border-color: rgba(33,52,73,.22); }
.hero { background: radial-gradient(ellipse at 83% 18%, #e9eee9 0%, transparent 42%); }
.hero h1 em, .contact-section h2 em { color: inherit; font-style: normal; font-weight: inherit; }
.hero-subtitle { color: #34465a; }
.fellow, .eyebrow, .section-kicker, .role-date { color: #93671c; }
.hero-intro { color: #4f5e70; }
.hero-links { color: #34465a; }
.hero-aside { color: #667386; }
.hero-portrait { border-color: rgba(168,121,36,.62); box-shadow: 0 18px 48px rgba(31,48,65,.13); }
.metric-feature p, .metric-small p, .role-meta, .chart-heading span, .bar-item span, .note, .education-row p { color: #667386; }
.metric-small, .chart-card, .governance-card { background: rgba(255,255,255,.78); }
.two-col p, ul, .case-card p, .principle p, .governance-card p { color: #4f5e70; }
.role > div:last-child { border-left-color: rgba(33,52,73,.16); }
.case-card, .principle { background: #fff; box-shadow: 0 8px 26px rgba(25,42,61,.035); }
.case-card p b { color: #172638; }
.case-metric { color: #93671c; }
.tag, .tags span { color: #435366; background: rgba(255,255,255,.8); }
.contact-section { background: linear-gradient(125deg, #e8eee9, #f1eee5); }
.contact-section > p:not(.section-kicker) { color: #596779; }
.button-light { background: #172638; color: #fff; }
.button-outline { border-color: rgba(33,52,73,.24); color: #172638; }
.button-primary { border-color: #a87924; background: #a87924; color: #fff; }
.document-icon { background: #f2ead9; color: #93671c; }
.verification-card { background: #fff; border-color: rgba(33,52,73,.15); box-shadow: 0 8px 26px rgba(25,42,61,.035); }
.verification-card p:not(.role-meta) { color: #4f5e70; }
.request-welcome { color: #172638 !important; }
.request-dialog { background: #fff; border-color: rgba(33,52,73,.18); box-shadow: 0 25px 90px rgba(20,35,52,.22); }
.request-close { color: #667386; }
.request-intro, .request-privacy { color: #667386; }
#request-form label { color: #24374b; }
#request-form label span { color: #93671c; }
#request-form label small { color: #667386; }
#request-form input, #request-form select, #request-form textarea { border-color: rgba(33,52,73,.2); background: #fbfaf7; color: #172638; }
#request-form input::placeholder, #request-form textarea::placeholder, #request-form select:invalid { color: #8792a0; }
@media (max-width: 900px) {
  nav { background: #fff; border-bottom-color: rgba(33,52,73,.15); box-shadow: 0 12px 20px rgba(22,38,56,.06); }
}


/* Light executive portfolio theme */
:root {
  --navy: #f7f5ef;
  --navy-2: #fffdf8;
  --panel: #ffffff;
  --ink: #17253b;
  --muted: #687386;
  --line: rgba(23, 37, 59, .14);
  --gold: #a98235;
}
body { background: #f7f5ef; color: #17253b; }
.site-header { background: rgba(255,253,248,.94); box-shadow: 0 1px 0 rgba(23,37,59,.06); }
nav a { color: #596579; }
nav .nav-contact { color: #17253b; }
.hero { background: radial-gradient(ellipse at 82% 20%, #eee8d9 0%, transparent 42%); }
.hero h1 em, .contact-section h2 em { color: #a98235; }
.hero-subtitle { color: #354258; }
.fellow { color: #8b6829; }
.hero-intro { color: #4d596b; }
.hero-links { color: #354258; }
.hero-aside { color: #687386; }
.verification-card { background: rgba(255,255,255,.68); }
.verification-card p:not(.role-meta) { color: #4d596b; }
.metric-feature, .metric-small, .chart-card, .case-card, .principle, .governance-card {
  background: rgba(255,255,255,.68);
}
.metric-feature p, .metric-small p, .two-col p, li, .case-card p, .principle p, .governance-card p {
  color: #4d596b;
}
.bar-chart { background: repeating-linear-gradient(to top, transparent 0, transparent 47px, rgba(23,37,59,.07) 48px); }
.case-card p b { color: #17253b; }
.tag, .tags span { color: #354258; }
.contact-section {
  background: radial-gradient(ellipse at 80% 50%, #eee8d9, transparent 55%), #f0ede5;
}
.contact-section > p:not(.section-kicker) { color: #596579; }
.button-light { background: #17253b; color: #fffdf8; }
.button-outline { border-color: rgba(23,37,59,.3); color: #17253b; }
.footer { color: #687386; }
@media (max-width: 900px) {
  nav { background: #fffdf8; }
}


/* Headline refinement: exact positioning statement, with clean mobile wrapping */
.hero-subtitle {
  max-width: 760px;
  margin-top: 0;
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.4;
  letter-spacing: -.015em;
  text-wrap: balance;
}
@media (max-width: 600px) {
  .hero-subtitle {
    max-width: 22ch;
    font-size: 20px;
    line-height: 1.4;
    overflow-wrap: normal;
  }
}


@media (max-width: 600px) {
  .hero-aside {
    order: -1;
    border-top: 0;
    padding: 0;
    margin-bottom: -8px;
    gap: 14px;
    font-size: 14px;
    line-height: 1.4;
  }
  .hero-portrait {
    width: 92px;
    max-width: 92px;
  }
}