@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@1,6..72,400&display=swap');
:root { --ink:#07111b; --ink2:#0b1d2a; --paper:#eef0eb; --white:#fafbf9; --muted:#84949d; --line:rgba(185,205,215,.18); --accent:#d7ff62; --mono:"DM Mono",monospace; --sans:"Manrope",sans-serif; --serif:"Newsreader",serif; --max:1380px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--ink); color:var(--white); font:16px/1.68 var(--sans); }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.skip { position:fixed; z-index:100; top:-5rem; left:1rem; padding:.75rem 1rem; background:var(--accent); color:var(--ink); }
.skip:focus { top:1rem; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.progress { position:fixed; z-index:90; inset:0 0 auto; height:3px; }
.progress i { display:block; width:0; height:100%; background:var(--accent); }
.cursor { position:fixed; z-index:95; width:24px; height:24px; pointer-events:none; border:1px solid var(--accent); border-radius:50%; opacity:0; transform:translate(-50%,-50%); transition:.2s; }
.cursor span { position:absolute; inset:0; display:grid; place-items:center; opacity:0; color:var(--ink); font:500 .75rem var(--mono); }
.cursor.active { width:82px; height:82px; background:var(--accent); }
.cursor.active span { opacity:1; }
.header { position:fixed; z-index:70; inset:0 0 auto; height:90px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 max(24px,calc((100vw - var(--max))/2)); border-bottom:1px solid rgba(255,255,255,.13); background:rgba(7,17,27,.42); backdrop-filter:blur(18px); transition:.3s; }
.header.scrolled { height:70px; background:rgba(7,17,27,.96); }
.brand { display:flex; align-items:center; gap:.8rem; width:max-content; }
.brand-mark { width:46px; height:46px; overflow:hidden; background:white; }
.brand-mark img { width:100%; height:100%; object-fit:contain; }
.brand b { font-size:.78rem; line-height:1.2; letter-spacing:.13em; }
.brand small { display:block; margin-top:.28rem; color:#80919b; font-size:.75rem; letter-spacing:.08em; }
.header nav { display:flex; gap:2rem; }
.header nav a { color:#aab8bf; font-size:.82rem; font-weight:600; }
.header nav a:hover { color:var(--accent); }
.header-cta { justify-self:end; display:flex; align-items:center; gap:1.2rem; padding:.55rem .55rem .55rem 1.1rem; border:1px solid #50616c; border-radius:999px; font-size:.8rem; font-weight:700; }
.header-cta span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:var(--ink); }
.menu { display:none; border:0; background:none; color:white; }
.menu i { display:block; width:27px; height:1px; margin:7px 0; background:white; }
.menu span { position:absolute; width:1px; height:1px; overflow:hidden; }

.profile-hero { position:relative; min-height:100svh; display:grid; grid-template-columns:.86fr 1.14fr; overflow:hidden; background:linear-gradient(125deg,#07111b,#0d2432); }
#profile-field,.hero-grid { position:absolute; inset:0; width:100%; height:100%; }
#profile-field { z-index:1; opacity:.55; }
.hero-grid { background-image:linear-gradient(rgba(103,151,170,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(103,151,170,.1) 1px,transparent 1px); background-size:70px 70px; mask-image:linear-gradient(90deg,#000,transparent 88%); }
.portrait { position:relative; z-index:2; align-self:end; height:calc(100vh - 90px); overflow:hidden; background:linear-gradient(145deg,#d9dcd6,#adb8b5); }
.portrait img { width:100%; height:100%; object-fit:cover; object-position:center top; filter:saturate(.72) contrast(1.04); }
.portrait>div { position:absolute; inset:0; background:linear-gradient(0deg,rgba(7,17,27,.7),transparent 42%); }
.portrait>span { position:absolute; left:1.5rem; bottom:1.5rem; font:500 .75rem var(--mono); }
.hero-copy { position:relative; z-index:3; align-self:end; padding:145px max(24px,calc((100vw - var(--max))/2)) 55px 6vw; }
.hero-copy>p { display:flex; justify-content:space-between; color:#7f929c; font:500 .75rem var(--mono); }
.hero-copy>p span { color:var(--accent); }
.hero-copy h1 { margin:2rem 0 1rem; font-size:clamp(4.5rem,8vw,9rem); line-height:.82; letter-spacing:-.075em; font-weight:500; }
.hero-copy h2 { margin:0; color:var(--accent); font:500 .82rem var(--mono); letter-spacing:.07em; }
.hero-copy blockquote { max-width:720px; margin:4rem 0 3rem; font-size:clamp(1.7rem,2.5vw,2.8rem); line-height:1.2; letter-spacing:-.035em; }
.scroll-link { display:inline-flex; align-items:center; gap:2rem; padding-bottom:.4rem; border-bottom:1px solid #61727c; font-size:.84rem; }
.scroll-link span { color:var(--accent); }
.hero-side { position:absolute; z-index:4; right:24px; top:120px; display:flex; align-items:center; gap:10px; writing-mode:vertical-rl; color:#71858f; font:500 .75rem var(--mono); }
.hero-side i { width:1px; height:80px; background:#516773; }
.hero-side b { color:var(--accent); }

.section { max-width:var(--max); margin:auto; padding:9rem 24px; }
.section-code { display:grid; grid-template-columns:42px 1fr auto; gap:1rem; align-items:center; color:#85959e; font:500 .75rem var(--mono); letter-spacing:.06em; }
.section-code span { width:34px; height:34px; display:grid; place-items:center; border:1px solid #435762; border-radius:50%; color:var(--accent); }
.section-code b { color:#c6d0d5; }
.section-code i { color:#5f727d; font-style:normal; }
.overview-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:8vw; align-items:start; margin-top:5rem; }
.overview h2 { margin:0; font-size:clamp(3rem,5vw,5.7rem); line-height:.99; letter-spacing:-.055em; font-weight:500; }
.body-copy { color:#86959d; }
.body-copy p:first-child { color:#c1ccd1; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); margin-top:6rem; border:1px solid var(--line); }
.stats article { min-height:250px; padding:1.4rem; border-right:1px solid var(--line); }
.stats article:last-child { border:0; }
.stats strong { display:block; color:var(--accent); font-size:clamp(3.5rem,6vw,6.7rem); line-height:1; letter-spacing:-.07em; font-weight:500; }
.stats p { margin-top:6rem; color:#84949d; font-size:.85rem; }
.focus-band { overflow:hidden; background:var(--accent); color:var(--ink); }
.focus-band>div { width:max-content; display:flex; align-items:center; gap:5rem; padding:2rem max(24px,calc((100vw - var(--max))/2)); animation:focus-shift 12s ease-in-out infinite alternate; }
.focus-band span { font:500 .75rem var(--mono); white-space:nowrap; }
.focus-band p { width:min(900px,70vw); margin:0; font-size:clamp(1.8rem,3vw,3.4rem); line-height:1.15; letter-spacing:-.04em; }

.career { background:var(--paper); color:#0a1720; max-width:none; padding-left:max(24px,calc((100vw - var(--max))/2)); padding-right:max(24px,calc((100vw - var(--max))/2)); }
.career .section-code,.education .section-code { color:#5f6d72; }
.career .section-code span,.education .section-code span { border-color:#aeb4af; color:#16727a; }
.career .section-code b,.education .section-code b { color:#152229; }
.career-layout { display:grid; grid-template-columns:.72fr 1.28fr; gap:7vw; margin-top:5rem; }
.career h2,.expertise h2 { position:sticky; top:120px; margin:0; font-size:clamp(3.2rem,5vw,5.8rem); line-height:.96; letter-spacing:-.06em; font-weight:500; }
.career h2 em,.expertise h2 em { color:#17737b; font-family:var(--serif); font-weight:400; }
.career-row { display:grid; grid-template-columns:48px 1fr auto; gap:1.2rem; padding:2rem 0; border-top:1px solid #b9beba; }
.career-row:last-child { border-bottom:1px solid #b9beba; }
.career-row>span { color:#17737b; font:500 .75rem var(--mono); }
.career-row h3 { margin:0; font-size:1.5rem; }
.career-row b { display:block; margin:.4rem 0 1.5rem; color:#17737b; font:500 .75rem var(--mono); }
.career-row p { max-width:580px; margin:0; color:#667278; }
.career-row>i { font-style:normal; font-size:1.3rem; }

.education { max-width:none; padding-left:max(24px,calc((100vw - var(--max))/2)); padding-right:max(24px,calc((100vw - var(--max))/2)); background:#e2e6df; color:#0a1720; }
.education-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:5rem; }
.education-card { position:relative; min-height:390px; padding:1.5rem; overflow:hidden; border:1px solid rgba(10,23,32,.16); background:#edf0ea; }
.education-card::before { content:""; position:absolute; inset:0; background:radial-gradient(450px circle at var(--x,50%) var(--y,50%),color-mix(in srgb,var(--accent) 28%,transparent),transparent 42%); opacity:0; transition:.3s; }
.education-card:hover::before { opacity:1; }
.education-card>* { position:relative; z-index:1; }
.education-card>span { color:#17737b; font:500 .75rem var(--mono); }
.education-card>b { display:block; margin-top:5rem; color:#5e6b71; font:500 .75rem var(--mono); }
.education-card h3 { margin:1rem 0; font-size:clamp(1.8rem,2.8vw,3rem); line-height:1.05; letter-spacing:-.04em; }
.education-card p { position:absolute; left:1.5rem; bottom:1.5rem; margin:0; color:#68757a; }

.expertise-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:8vw; margin-top:5rem; }
.expertise-grid>div:first-child { position:relative; min-height:550px; }
.signal-orbit { position:absolute; left:0; bottom:0; width:280px; height:280px; display:grid; place-items:center; border:1px solid #2d4655; border-radius:50%; animation:spin 24s linear infinite; }
.signal-orbit::before,.signal-orbit i { content:""; position:absolute; border:1px solid #293f4d; border-radius:50%; }
.signal-orbit::before { inset:18%; }
.signal-orbit i:first-child { inset:-1px; border:1px dashed var(--accent); }
.signal-orbit i:nth-child(2) { inset:36%; background:var(--accent); }
.signal-orbit b { z-index:1; color:var(--ink); font:500 .8rem var(--mono); }
.skills { align-self:center; }
.skill { padding:1.7rem 0; border-top:1px solid var(--line); }
.skill:last-child { border-bottom:1px solid var(--line); }
.skill>div { display:flex; justify-content:space-between; gap:2rem; margin-bottom:1rem; }
.skill span { color:#bcc7cc; }
.skill b { color:var(--accent); font:500 .8rem var(--mono); }
.skill>i { display:block; height:3px; overflow:hidden; background:#263845; }
.skill em { display:block; width:0; height:100%; background:var(--accent); transition:width 1.2s cubic-bezier(.2,.8,.2,1); }

.quote { position:relative; min-height:100vh; display:grid; place-items:center; overflow:hidden; background:var(--accent); color:var(--ink); }
.quote-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(7,17,27,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(7,17,27,.12) 1px,transparent 1px); background-size:68px 68px; mask-image:radial-gradient(circle,#000,transparent 72%); }
.quote-copy { position:relative; z-index:1; width:min(1180px,calc(100% - 48px)); text-align:center; }
.quote-copy span { font:500 .75rem var(--mono); }
.quote blockquote { margin:2rem 0 0; font-size:clamp(3.8rem,7.5vw,8.3rem); line-height:.9; letter-spacing:-.07em; }
.profile-nav { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; min-height:230px; border-bottom:1px solid var(--line); }
.profile-nav>a:not(.directory-link) { display:flex; flex-direction:column; justify-content:center; gap:1rem; padding:2rem max(24px,calc((100vw - var(--max))/2)); transition:background .3s,color .3s; }
.profile-nav>a:last-child { align-items:flex-end; text-align:right; }
.profile-nav>a:not(.directory-link):hover { background:var(--accent); color:var(--ink); }
.profile-nav span { color:#7d8f98; font:500 .75rem var(--mono); }
.profile-nav b { font-size:clamp(1.5rem,2.5vw,2.7rem); }
.directory-link { width:120px; display:grid; grid-template-columns:repeat(2,8px); place-content:center; gap:6px; border-left:1px solid var(--line); border-right:1px solid var(--line); }
.directory-link i { width:8px; height:8px; background:var(--accent); }
footer { max-width:var(--max); margin:auto; display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:2rem; align-items:end; padding:3rem 24px; color:#71818b; font-size:.75rem; }
footer>p { margin:0; text-align:center; }
footer>div { display:flex; justify-content:flex-end; gap:1.5rem; }
.reveal { opacity:0; transform:translateY(30px); transition:opacity .85s,transform .85s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity:1; transform:none; }

.directory { min-height:100vh; padding:145px max(24px,calc((100vw - var(--max))/2)) 7rem; }
.directory-head p { color:var(--accent); font:500 .75rem var(--mono); }
.directory-head h1 { max-width:1000px; margin:2rem 0 5rem; font-size:clamp(4rem,8vw,9rem); line-height:.86; letter-spacing:-.075em; font-weight:500; }
.directory-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.directory-card { position:relative; min-height:520px; overflow:hidden; background:#102331; }
.directory-card:first-child { grid-column:span 2; }
.directory-card img { width:100%; height:100%; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.06); transition:.55s; }
.directory-card:hover img { filter:grayscale(0); transform:scale(1.025); }
.directory-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,15,24,.95),transparent 62%); }
.directory-card>div { position:absolute; z-index:2; left:1.3rem; right:1.3rem; bottom:1.3rem; }
.directory-card span { color:var(--accent); font:500 .75rem var(--mono); }
.directory-card h2 { margin:.7rem 0 .3rem; font-size:1.55rem; line-height:1.05; }
.directory-card p { margin:0; color:#93a2aa; font-size:.8rem; }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes focus-shift { to { transform:translateX(6vw); } }

@media(max-width:1050px) {
  .header { grid-template-columns:1fr auto; }
  .header nav { position:fixed; inset:70px 0 auto; display:grid; padding:1rem 24px 2rem; background:#07111b; transform:translateY(-140%); transition:.3s; }
  .header nav.open { transform:none; }
  .header nav a { padding:1rem 0; border-bottom:1px solid var(--line); }
  .header-cta { display:none; }
  .menu { display:block; }
  .profile-hero { grid-template-columns:.72fr 1.28fr; }
  .overview-grid,.career-layout,.expertise-grid { grid-template-columns:1fr; }
  .career h2,.expertise h2 { position:relative; top:auto; }
  .expertise-grid>div:first-child { min-height:430px; }
  .directory-grid { grid-template-columns:repeat(3,1fr); }
}

/* Profile content remains readable even when enhancement scripts are delayed. */
.section-code{grid-template-columns:1fr auto}
.section-code>span{display:none}
.reveal{opacity:1;transform:none}
@media(max-width:720px){.section-code{grid-template-columns:1fr}}

@media(max-width:720px){
  .overview-grid>*{min-width:0}
  .overview h2,.body-copy{overflow-wrap:anywhere}
}

@media(max-width:720px) {
  .cursor { display:none; }
  .header { height:72px; padding:0 18px; }
  .brand-mark { width:42px; height:42px; }
  .brand small { display:none; }
  .profile-hero { display:flex; flex-direction:column; min-height:auto; padding-top:72px; }
  .portrait { order:2; width:100%; height:68vh; min-height:500px; }
  .hero-copy { order:1; padding:5rem 18px 3rem; }
  .hero-copy h1 { font-size:clamp(4rem,17vw,6.5rem); }
  .hero-copy blockquote { margin-top:3rem; }
  .hero-side { display:none; }
  .section { padding:6.5rem 18px; }
  .section-code { grid-template-columns:38px 1fr; }
  .section-code i { display:none; }
  .overview h2,.career h2,.expertise h2 { font-size:clamp(3rem,12vw,4.6rem); }
  .stats { grid-template-columns:1fr; }
  .stats article { min-height:190px; border-right:0; border-bottom:1px solid var(--line); }
  .stats p { margin-top:3rem; }
  .focus-band>div { gap:2rem; }
  .focus-band p { width:78vw; font-size:1.5rem; }
  .education-grid { grid-template-columns:1fr; }
  .education-card { min-height:350px; }
  .profile-nav { grid-template-columns:1fr 74px 1fr; min-height:190px; }
  .profile-nav>a:not(.directory-link) { padding:1rem; }
  .profile-nav b { font-size:1rem; }
  .profile-nav span { font-size:.65rem; }
  .directory-link { width:74px; }
  footer { grid-template-columns:1fr; align-items:start; }
  footer>p { text-align:left; }
  footer>div { justify-content:space-between; flex-wrap:wrap; }
  .directory { padding:120px 18px 5rem; }
  .directory-grid { grid-template-columns:1fr 1fr; }
  .directory-card:first-child { grid-column:1/-1; }
  .directory-card { min-height:470px; }
}

@media(max-width:430px) {
  .hero-copy>p b { display:none; }
  .directory-grid { grid-template-columns:1fr; }
  .directory-card:first-child { grid-column:auto; }
}

@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .reveal { opacity:1; transform:none; }
}

/* Mobile QA: leadership focus is meaningful content, not a desktop ticker. */
@media(max-width:720px) {
  /* Content must never depend on a scroll observer on mobile browsers. */
  .reveal { opacity:1; transform:none; }
  .focus-band>div {
    width:100%;
    display:grid;
    gap:1rem;
    padding:1.6rem 18px 1.8rem;
    animation:none;
    transform:none;
  }
  .focus-band p {
    width:auto;
    max-width:none;
    font-size:1.35rem;
    line-height:1.3;
    overflow-wrap:anywhere;
  }
}

/* Final profile-content safeguards. */
.section-code{grid-template-columns:1fr auto}
.section-code>span{display:none}
.reveal{opacity:1;transform:none}
@media(max-width:720px){.section-code{grid-template-columns:1fr}}