@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #f5f4ef;
  --surface: rgba(255,255,255,.72);
  --surface-strong: #fff;
  --text: #111216;
  --muted: #686a70;
  --line: rgba(17,18,22,.11);
  --accent: #6d4aff;
  --accent-2: #a48cff;
  --accent-soft: rgba(109,74,255,.10);
  --shadow: 0 24px 70px rgba(25,22,42,.10);
  --radius: 28px;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[data-theme='dark'] {
  --bg: #28292B;
  --surface: rgba(17,18,25,.78);
  --surface-strong: #111219;
  --text: #f5f4ef;
  --muted: #a6a7b0;
  --line: rgba(255,255,255,.12);
  --accent: #9b83ff;
  --accent-2: #c4b8ff;
  --accent-soft: rgba(155,131,255,.13);
  --shadow: 0 28px 90px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.65; overflow-x:hidden; transition:background .35s ease,color .35s ease; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }

.noise { position:fixed; inset:0; pointer-events:none; z-index:999; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); }
.section-shell { width:min(1180px, calc(100% - 48px)); margin-inline:auto; }

.site-header { position:sticky; top:0; z-index:100; height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; background:color-mix(in srgb,var(--bg) 80%,transparent); backdrop-filter:blur(18px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-.03em; }
.brand-mark { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--text); color:var(--bg); font-size:12px; }
.brand-name { font-size:14px; }
.desktop-nav { display:flex; gap:28px; margin-left:auto; margin-right:28px; }
.desktop-nav a,.mobile-menu a { color:var(--muted); font-size:13px; font-weight:700; transition:color .2s; }
.desktop-nav a:hover,.mobile-menu a:hover { color:var(--text); }
.header-actions { display:flex; align-items:center; gap:8px; }
.icon-control,.menu-toggle { border:1px solid var(--line); background:var(--surface); color:var(--text); width:38px; height:38px; border-radius:12px; cursor:pointer; display:grid; place-items:center; }
.language-button { width:auto; padding:0 12px; font-size:11px; font-family:var(--mono); }
.language-wrap { position:relative; }
.language-menu { position:absolute; top:46px; right:0; min-width:155px; padding:7px; border:1px solid var(--line); background:var(--surface-strong); box-shadow:var(--shadow); border-radius:15px; display:none; }
.language-menu.open { display:block; }
.language-menu button { display:block; width:100%; text-align:left; border:0; background:none; color:var(--text); padding:9px 10px; border-radius:9px; cursor:pointer; font-size:13px; }
.language-menu button:hover { background:var(--accent-soft); }
.menu-toggle { display:none; }
.mobile-menu { display:none; }

.hero { min-height:calc(100vh - 78px); display:grid; grid-template-columns:1.02fr .98fr; gap:40px; align-items:center; padding-top:54px; padding-bottom:80px; }
.eyebrow,.section-kicker { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.eyebrow { display:flex; align-items:center; gap:9px; }
.status-dot { width:7px; height:7px; background:#55c77b; border-radius:50%; box-shadow:0 0 0 5px rgba(85,199,123,.10); }
.hero h1 { margin:18px 0 20px; font-size:clamp(54px,6.8vw,92px); line-height:.9; letter-spacing:-.075em; font-weight:800; }
.hero h1 span { color:var(--accent); }
.hero-lede { max-width:650px; color:var(--muted); font-size:clamp(17px,1.7vw,21px); line-height:1.45; letter-spacing:-.025em; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px; border-radius:14px; border:1px solid var(--line); font-size:13px; font-weight:800; transition:transform .2s,box-shadow .2s,background .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--text); color:var(--bg); box-shadow:0 12px 30px rgba(0,0,0,.10); }
.button-ghost { background:transparent; }
.hero-links { display:flex; gap:22px; margin-top:25px; font-family:var(--mono); font-size:11px; color:var(--muted); }
.hero-links a:hover,.text-link:hover,.project-link:hover { color:var(--accent); }

.hero-visual { position:relative; min-height:620px; display:grid; place-items:center; }
.portrait-frame {
  width:min(480px,85%);
  aspect-ratio:4/5;
  position:relative;
  border:1px solid rgba(17,18,22,.11);
  border-radius:38px;
  background:linear-gradient(145deg, #ffffff, #fbfaff);
  overflow:hidden;
  box-shadow:0 24px 70px rgba(25,22,42,.10);
}

.portrait-grid {
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(17,18,22,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,18,22,.11) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(to bottom,black,transparent 80%);
  opacity:.5;
}
.portrait { position:absolute; width:105%; height:105%; object-fit:cover; object-position:50% 44%; left:-2.5%; top:-1%; filter:saturate(.94) contrast(1.02); mix-blend-mode:normal; }
.portrait-caption { position:absolute; left:22px; right:22px; bottom:20px; display:flex; justify-content:space-between; font-family:var(--mono); font-size:9px; color:var(--muted); z-index:2; }
.orb { position:absolute; border-radius:50%; filter:blur(4px); pointer-events:none; }
.orb-a { width:320px; height:320px; background:radial-gradient(circle, color-mix(in srgb,var(--accent) 38%,transparent), transparent 70%); top:8%; right:2%; }
.orb-b { width:260px; height:260px; background:radial-gradient(circle, rgba(52,145,255,.20), transparent 70%); bottom:8%; left:2%; }
 .floating-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(20, 18, 30, .08);
  font: 9px var(--mono);
  letter-spacing: .02em;
  white-space: nowrap;
  will-change: transform;
}

.chip-one {
  top: 18%;
  left: -7%;
  animation: chipDriftX 5.5s ease-in-out infinite;
}

.chip-two {
  top: 51%;
  right: -8%;
  animation: chipDriftY 6.2s ease-in-out infinite;
}

.chip-three {
  bottom: 16%;
  right: -6%;
  animation: chipDriftXReverse 5.8s ease-in-out infinite;
}

@keyframes chipDriftX {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@keyframes chipDriftY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes chipDriftXReverse {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .floating-chip {
    animation: none;
  }
}

.signal-strip { display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line); padding:26px 0; margin-bottom:140px; }
.signal-strip div { display:flex; flex-direction:column; gap:3px; padding-left:22px; border-left:1px solid var(--line); }
.signal-strip div:first-child { border-left:0; padding-left:0; }
.signal-strip strong { font-size:22px; letter-spacing:-.04em; }.signal-strip span { color:var(--muted); font-size:12px; }

section { scroll-margin-top:100px; }
.section-heading { margin-bottom:58px; }.section-heading h2 { margin:12px 0 0; max-width:820px; font-size:clamp(32px,3.8vw,48px); line-height:.98; letter-spacing:-.065em; }
.split-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; }.text-link { color:var(--muted); font-size:12px; font-weight:800; white-space:nowrap; }
.intro-section,.work-section,.experience-section,.capability-section,.now-section,.credentials-section,.personal-section,.contact-section { margin-bottom:150px; }
.about-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(250px,.75fr); gap:90px; border-top:1px solid var(--line); padding-top:35px; align-items:start; }.about-copy { max-width:760px; font-size:15px; line-height:1.75; }.about-copy p { margin:0 0 22px; }.experience-inline { font-weight:700; color:var(--text); }.about-facts { border-left:1px solid var(--line); padding-left:28px; }.about-fact { padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid var(--line); }.about-fact:last-child { margin-bottom:0; }.about-fact span { display:block; color:var(--muted); font:9px var(--mono); text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; }.about-fact strong { display:block; font-size:14px; line-height:1.45; font-weight:700; }

.featured-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.project-card { border:1px solid var(--line); border-radius:24px; background:var(--surface); overflow:hidden; transition:transform .25s,border-color .25s,box-shadow .25s; }.project-card:hover { transform:translateY(-5px); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); box-shadow:var(--shadow); }.project-card.wide { grid-column:1/-1; }
.project-art { height:280px; position:relative; overflow:hidden; background:#101117; color:#fff; }.art-streaming { background:radial-gradient(circle at 20% 20%,#5e45ff22,transparent 30%),#0d0e13; }.art-lineage { background:radial-gradient(circle at 80% 10%,#8d6bff26,transparent 32%),#0d0e13; }.art-cloud { background:linear-gradient(135deg,#171822,#0b0c10); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:18px; }.art-label { position:absolute; top:20px; left:20px; font:10px var(--mono); letter-spacing:.08em; opacity:.65; }.stream-lines { position:absolute; inset:0; }.stream-lines i { position:absolute; height:1px; background:linear-gradient(90deg,transparent,#a18dff,transparent); width:65%; left:17%; opacity:.6; }.stream-lines i:nth-child(1){top:35%;transform:rotate(12deg)}.stream-lines i:nth-child(2){top:46%;transform:rotate(-8deg)}.stream-lines i:nth-child(3){top:57%;transform:rotate(6deg)}.stream-lines i:nth-child(4){top:68%;transform:rotate(-13deg)}.stream-node { position:absolute; border:1px solid #ffffff25; background:#ffffff0b; backdrop-filter:blur(8px); padding:9px 12px; border-radius:10px; font:10px var(--mono); }.node-a{left:12%;top:30%}.node-b{left:43%;top:48%}.node-c{right:10%;top:64%}
.lineage-map { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:55px; }.lineage-map b { width:46px; height:46px; border:1px solid #ffffff24; background:#ffffff09; display:grid; place-items:center; border-radius:13px; font:13px var(--mono); position:relative; z-index:2; }.line { height:1px; background:#a38fff; position:absolute; width:90px; opacity:.65; }.l1{transform:translateX(-105px) translateY(-23px) rotate(25deg)}.l2{transform:translateX(-105px) translateY(23px) rotate(-25deg)}.l3{transform:translateX(105px) translateY(-23px) rotate(-25deg)}.l4{transform:translateX(105px) translateY(23px) rotate(25deg)}
.cloud-diagram { display:flex; align-items:center; gap:24px; font:12px var(--mono); }.cloud-diagram div { padding:20px 22px; border:1px solid #ffffff20; border-radius:16px; background:#ffffff09; }.cloud-diagram span { font-size:24px; color:#a995ff; }.art-cloud small { font:9px var(--mono); color:#a7a8b0; }
.art-placeholder { background:linear-gradient(135deg,#171822,#0d0e12); display:flex; flex-direction:column; align-items:center; justify-content:center; }.art-placeholder.alt { background:radial-gradient(circle at 50% 50%,#7458ff24,transparent 40%),#0d0e12; }.placeholder-icon { width:54px;height:54px;border:1px solid #ffffff25;border-radius:17px;display:grid;place-items:center;font-size:24px;color:#a995ff;margin-bottom:12px; }.art-placeholder strong{font-size:14px}.art-placeholder small{font:9px var(--mono);color:#8f9098;margin-top:5px}
.project-card > h3,.project-card > p,.project-card > .tag-row,.project-card > .project-link,.project-card > .project-meta { margin-left:22px; margin-right:22px; }.project-card h3 { font-size:21px; line-height:1.25; letter-spacing:-.04em; margin-top:8px; margin-bottom:9px; }.project-card p { color:var(--muted); font-size:13px; margin-top:0; }.project-meta { display:flex; justify-content:space-between; margin-top:18px; font:9px var(--mono); color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }.tag-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; margin-bottom:20px; }.tag-row span { font:9px var(--mono); border:1px solid var(--line); padding:6px 8px; border-radius:999px; color:var(--muted); }.project-link { border:0; background:none; padding:0; margin-bottom:24px; color:var(--text); font-size:12px; font-weight:800; cursor:pointer; }.project-link span { color:var(--accent); }.project-content-row { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end; padding-bottom:2px; }.project-content-row > div { min-width:0; }

.experience-list { border-top:1px solid var(--line); }
.experience-entry { padding:34px 0 38px; border-bottom:1px solid var(--line); }
.experience-date { font:10px var(--mono); color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.experience-main { max-width:900px; }
.role-company { font:20px var(--mono); text-transform:uppercase; color:var(--accent); letter-spacing:.08em; margin:0 0 6px; }
.experience-main h3 { margin:0; font-size:10px; letter-spacing:-.035em; }
.role-summary { color:var(--muted); margin:8px 0 14px; font-size:14px; max-width:760px; }
.experience-main ul { margin:0; padding-left:17px; color:var(--muted); font-size:13px; max-width:820px; }
.experience-main li { margin:6px 0; }
.experience-note { color:var(--muted); font-size:13px; margin:10px 0 0; max-width:760px; }

.capability-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }.capability-card { background:var(--bg); padding:28px; min-height:230px; }.capability-card span { font:10px var(--mono); color:var(--accent); }.capability-card h3 { margin:42px 0 10px; font-size:19px; letter-spacing:-.03em; }.capability-card p { color:var(--muted); font-size:12px; margin:0; }.tech-cloud { display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }.tech-cloud span { padding:9px 12px; border:1px solid var(--line); border-radius:999px; font:10px var(--mono); color:var(--muted); }

.now-card { border-radius:var(--radius); border:1px solid var(--line); background:linear-gradient(135deg,var(--surface-strong),color-mix(in srgb,var(--accent) 6%,var(--surface-strong))); padding:45px; box-shadow:var(--shadow); }.now-card h2 { font-size:clamp(32px,3.8vw,48px); line-height:1; letter-spacing:-.06em; max-width:760px; margin:12px 0 50px; }.now-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }.now-grid div { border-top:1px solid var(--line); padding-top:16px; }.now-grid span { font:9px var(--mono); color:var(--accent); text-transform:uppercase; }.now-grid strong { display:block; font-size:15px; margin:10px 0 5px; }.now-grid p { color:var(--muted); font-size:11px; margin:0; }

.credentials-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; }.credential-block h2 { font-size:clamp(32px,3.6vw,44px); letter-spacing:-.06em; line-height:1; margin:12px 0 40px; }.credential-list { border-top:1px solid var(--line); }.credential-list div { padding:18px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }.credential-list strong { font-size:14px; }.credential-list span { color:var(--muted); font-size:11px; }.placeholder-note { color:var(--muted); font:10px var(--mono); margin-top:20px; }

.personal-panel { min-height:460px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:grid; grid-template-columns:1fr 1fr; background:var(--surface); }.personal-copy { padding:55px; }.personal-copy h2 { font-size:clamp(34px,4.3vw,56px); line-height:.98; letter-spacing:-.065em; margin:12px 0 24px; }.personal-copy p:last-child { color:var(--muted); max-width:580px; }.personal-orbit { position:relative; min-height:460px; display:grid; place-items:center; background:radial-gradient(circle at center,color-mix(in srgb,var(--accent) 13%,transparent),transparent 55%); }.personal-orbit::before,.personal-orbit::after { content:''; position:absolute; border:1px solid var(--line); border-radius:50%; }.personal-orbit::before { width:220px;height:220px; }.personal-orbit::after { width:330px;height:330px; }.personal-orbit span { position:absolute; font:9px var(--mono); color:var(--muted); }.personal-orbit span:nth-child(1){transform:translateY(-175px)}.personal-orbit span:nth-child(2){transform:translateX(175px)}.personal-orbit span:nth-child(3){transform:translateY(175px)}.personal-orbit span:nth-child(4){transform:translateX(-175px)}


.beyond-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:18px; }
.beyond-feature { min-height:430px; padding:42px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(135deg,var(--surface-strong),color-mix(in srgb,var(--accent) 6%,var(--surface-strong))); display:flex; flex-direction:column; justify-content:space-between; }
.beyond-feature-content { max-width:680px; }
.beyond-label { font:10px var(--mono); color:var(--accent); text-transform:uppercase; letter-spacing:.08em; }
.beyond-feature h3 { margin:22px 0 18px; font-size:clamp(30px,3.4vw,48px); line-height:1.02; letter-spacing:-.055em; }
.beyond-feature p { max-width:650px; color:var(--muted); font-size:14px; }
.beyond-stat { display:flex; align-items:baseline; gap:12px; margin-top:30px; }
.beyond-stat strong { font-size:54px; line-height:1; letter-spacing:-.06em; }
.beyond-stat span { color:var(--muted); font:10px var(--mono); text-transform:uppercase; }
.beyond-side { display:grid; gap:18px; }
.beyond-card { border:1px solid var(--line); border-radius:var(--radius); padding:30px; background:var(--surface); }
.beyond-card-number { font:10px var(--mono); color:var(--accent); }
.beyond-card h4 { margin:38px 0 10px; font-size:20px; letter-spacing:-.03em; }
.beyond-card p { margin:0; color:var(--muted); font-size:13px; }


.contact-card { display:grid; grid-template-columns:1.2fr .8fr; gap:60px; align-items:end; padding:55px; border:1px solid var(--line); border-radius:var(--radius); background:var(--text); color:var(--bg); }.contact-card .section-kicker { color:color-mix(in srgb,var(--bg) 55%,transparent); }.contact-card h2 { font-size:clamp(40px,4.7vw,62px); line-height:.95; letter-spacing:-.065em; margin:12px 0 20px; }.contact-card p { max-width:650px; color:color-mix(in srgb,var(--bg) 62%,transparent); }.contact-actions { display:flex; flex-direction:column; gap:22px; align-items:flex-start; }.contact-card .button-primary { background:var(--bg); color:var(--text); }.contact-links { display:flex; gap:18px; font:10px var(--mono); color:color-mix(in srgb,var(--bg) 70%,transparent); }

.site-footer { padding:28px 0 45px; display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); color:var(--muted); font:10px var(--mono); }.site-footer a:hover{color:var(--text)}

.modal { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }.modal.open{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(8px)}.modal-panel{position:relative;width:min(680px,100%);background:var(--surface-strong);color:var(--text);border:1px solid var(--line);border-radius:26px;padding:42px;box-shadow:0 40px 120px rgba(0,0,0,.35);z-index:1}.modal-close{position:absolute;right:18px;top:16px;border:0;background:none;color:var(--muted);font-size:30px;cursor:pointer}.modal-panel h2{font-size:40px;line-height:1;letter-spacing:-.06em;margin:12px 0 18px}.modal-panel p:not(.section-kicker){color:var(--muted);font-size:14px}.modal-tags{display:flex;flex-wrap:wrap;gap:7px;margin:24px 0}.modal-tags span{font:9px var(--mono);border:1px solid var(--line);padding:7px 9px;border-radius:999px;color:var(--muted)}

.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s ease; }.reveal.is-visible { opacity:1; transform:none; }.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}

[dir='rtl'] .site-header,[dir='rtl'] .header-actions{direction:ltr}.language-menu{direction:ltr}.language-menu button{text-align:left}.hero,[dir='rtl'] .hero{direction:rtl}.hero-links,[dir='rtl'] .hero-links{direction:ltr;justify-content:flex-end}.split-heading{direction:rtl}.contact-card,.personal-panel,.credentials-grid,.intro-grid{direction:rtl}.contact-links{direction:ltr}.modal-panel{direction:rtl}

@media (max-width: 760px){
  .skills-list {
    grid-template-columns:1fr;
  }

  .skill-group {
    padding:21px 20px 22px;
  }
}

/* Qualifications navigation dropdown */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.desktop-nav .nav-dropdown-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.65;
  cursor: pointer;
  box-shadow: none;
}

.desktop-nav .nav-dropdown-toggle:hover,
.desktop-nav .nav-dropdown-toggle:focus-visible {
  color: var(--text);
}

.nav-dropdown-toggle:hover,
.nav-dropdown.open .nav-dropdown-toggle {
  color: var(--text);
}

.nav-dropdown-chevron {
  font-size: 12px;
  line-height: 1;
  transition: transform .2s ease;
}

.nav-dropdown.open .nav-dropdown-chevron {
  transform: rotate(180deg);
}

.desktop-nav .nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  min-width: 175px;
  padding: 6px;
  transform: translateX(-50%) translateY(-5px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
  box-shadow: var(--shadow);
  z-index: 120;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.desktop-nav .nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Invisible hover bridge prevents the menu from closing while moving from the trigger to the dropdown. */
.desktop-nav .nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.desktop-nav .nav-dropdown-menu a {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover {
  background: var(--accent-soft);
}

.mobile-nav-dropdown {
  display: block;
}

.mobile-nav-dropdown-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.mobile-nav-dropdown-toggle:hover {
  color: var(--text);
}

.mobile-nav-chevron {
  transition: transform .2s ease;
}

.mobile-nav-dropdown.open .mobile-nav-chevron {
  transform: rotate(180deg);
}

.mobile-nav-submenu {
  display: none;
  padding: 0 0 5px 14px;
}

.mobile-nav-dropdown.open .mobile-nav-submenu {
  display: block;
}

.mobile-nav-submenu a {
  display: block;
  padding: 10px 14px;
  color: var(--muted);
  font-size: 12px;
}

.mobile-nav-submenu a:hover {
  color: var(--text);
}

@media (max-width: 980px){
  .desktop-nav{display:none}.menu-toggle{display:grid}.mobile-menu{position:fixed;z-index:90;top:78px;left:12px;right:12px;background:var(--surface-strong);border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:var(--shadow);display:none}.mobile-menu.open{display:flex;flex-direction:column}.mobile-menu a{padding:13px 14px}.hero{grid-template-columns:1fr;padding-top:60px}.hero-visual{min-height:560px}.hero-copy{max-width:800px}.featured-grid{grid-template-columns:1fr}.project-card.wide{grid-column:auto}.capability-grid{grid-template-columns:1fr 1fr}.now-grid{grid-template-columns:1fr 1fr}.credentials-grid{grid-template-columns:1fr;gap:70px}.personal-panel{grid-template-columns:1fr}.personal-orbit{min-height:330px}.contact-card{grid-template-columns:1fr}.signal-strip{margin-bottom:110px}
}
@media (max-width: 640px){
  .section-shell{width:min(100% - 30px,1180px)}.site-header{height:68px;padding:0 15px}.mobile-menu{top:68px}.brand-name{display:none}.hero{min-height:auto;padding-top:55px;padding-bottom:70px}.hero h1{font-size:56px}.hero-lede{font-size:17px}.hero-visual{min-height:430px}.portrait-frame{width:82%;border-radius:28px}.chip-one{left:0}.chip-two{right:0}.chip-three{right:-4px}.signal-strip{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:95px}.signal-strip div:nth-child(3){border-left:0;padding-left:0}.section-heading{margin-bottom:38px}.split-heading{align-items:start;flex-direction:column}.text-link{white-space:normal}.about-layout{grid-template-columns:1fr;gap:40px}.about-facts{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:18px}.about-fact{margin:0}.intro-section,.work-section,.experience-section,.capability-section,.now-section,.credentials-section,.personal-section,.contact-section{margin-bottom:100px}.project-art{height:220px}.project-content-row{grid-template-columns:1fr}.experience-entry{padding:28px 0 32px}.experience-main h3{font-size:22px}.capability-grid{grid-template-columns:1fr}.now-card,.contact-card,.personal-copy{padding:30px}.now-grid{grid-template-columns:1fr}.personal-orbit{min-height:280px}.credentials-grid{gap:55px}.beyond-grid{grid-template-columns:1fr}.beyond-feature{min-height:360px;padding:30px}.beyond-feature h3{font-size:32px}.site-footer{flex-direction:column;gap:9px}.modal-panel{padding:30px 24px}.modal-panel h2{font-size:32px}.language-menu{right:0}.hero-links{flex-wrap:wrap}
}




/* =========================
   SECONDARY SECTIONS — CLEANER
   ========================= */

/* Keep the landing page visual language, but make the deeper sections quieter and easier to scan. */
.experience-section,
.capability-section,
.now-section,
.credentials-section,
#beyond,
.contact-section {
  margin-bottom: 120px;
}

.experience-section .section-heading,
.capability-section .section-heading,
.credentials-section .section-heading {
  margin-bottom: 34px;
}

.experience-list {
  position: relative;
  border-top: 1px solid var(--line);
}

.experience-entry {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 42px;
  padding: 38px 0 40px;
  border-bottom: 1px solid var(--line);
}

.experience-date {
  margin: 5px 0 0;
  font: 10px var(--mono);
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.experience-main {
  max-width: 860px;
}

.role-company {
  margin: 0 0 7px;
  color: var(--accent);
  font: 20px var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.experience-main h3 {
  margin: 0 0 13px;
  font-size: clamp(10px, 1.6vw, 20px);
  line-height: 1.12;
  letter-spacing: -.045em;
}

.role-summary {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  max-width: 780px;
}

.experience-featured {
  padding-top: 42px;
  padding-bottom: 46px;
}

.experience-featured .experience-main {
  max-width: 900px;
}

.experience-featured .role-summary {
  max-width: 820px;
}

.experience-compact {
  padding-bottom: 30px;
}

.experience-compact .experience-main h3 {
  margin-bottom: 0;
}

/* Skills: replace the dense four-card wall with four readable rows. */
.capability-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 0;
  border-right: 0;
  background: transparent;
}

.capability-card {
  min-height: 0;
  padding: 24px 28px 24px 0;
  background: transparent;
  border-bottom: 1px solid var(--line);
}

.capability-card:nth-child(even) {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}

.capability-card span {
  display: none;
}

.capability-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.capability-card p {
  font-size: 13px;
  line-height: 1.65;
  max-width: 520px;
}

.tech-cloud {
  gap: 7px;
  margin-top: 20px;
}

.tech-cloud span {
  padding: 7px 10px;
  font-size: 10px;
}


/* Skills: two-column technical matrix */
.skills-list {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.skill-group {
  min-width:0;
  padding:24px 28px 25px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:transparent;
  transition:background .2s ease;
}

.skill-group:hover {
  background:var(--accent-soft);
}

.skill-group h3 {
  margin:0 0 11px;
  font-size:12px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--text);
}

.skill-group p {
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}

/* Now: no oversized gradient card. */
.now-card {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 34px 0 0;
  box-shadow: none;
}

.now-card h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  margin: 0 0 36px;
  max-width: 600px;
}

.now-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 0 42px;
}

.now-grid div {
  padding: 20px 0 22px;
}

.now-grid span {
  font-size: 10px;
}

.now-grid strong {
  font-size: 16px;
  font-weight: 700;
}

.now-grid p {
  font-size: 13px;
  line-height: 1.6;
}

/* Education + certifications: simple lists instead of two oversized panels. */
.credentials-grid {
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}

.credential-block h2 {
  font-size: 30px;
  letter-spacing: -.045em;
  margin: 0 0 24px;
}

.credential-list div {
  padding: 16px 0;
}

.credential-list strong {
  font-size: 14px;
}

.credential-list span {
  font-size: 12px;
}

/* Beyond work: personal, but restrained. */
#beyond .section-heading {
  margin-bottom: 34px;
}

#beyond .section-heading h2 {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -.04em;
}

.beyond-grid {
  grid-template-columns: 1.4fr .6fr;
  gap: 32px;
}

.beyond-feature {
  min-height: 0;
  padding: 32px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.beyond-feature h3 {
  margin: 14px 0 14px;
  font-size: 30px;
  line-height: 1.08;
}

.beyond-feature p {
  font-size: 13px;
  line-height: 1.7;
}

.beyond-stat {
  margin-top: 22px;
}

.beyond-stat strong {
  font-size: 40px;
}

.beyond-side {
  gap: 0;
}

.beyond-card {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 24px 0;
  background: transparent;
}

.beyond-card:last-child {
  border-bottom: 1px solid var(--line);
}

.beyond-card h4 {
  margin: 12px 0 7px;
  font-size: 17px;
}

.beyond-card p {
  font-size: 12px;
  line-height: 1.65;
}

@media (max-width: 760px) {
  .experience-entry {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .capability-grid,
  .now-grid,
  .credentials-grid,
  .beyond-grid,
  .contact-card {
    grid-template-columns: 1fr;
  }

  .capability-card,
  .capability-card:nth-child(even) {
    padding: 22px 0;
    border-left: 0;
  }

  .now-grid {
    gap: 0;
  }

  .credentials-grid {
    gap: 55px;
  }

  .beyond-feature {
    padding: 28px 0;
  }

  .contact-card {
    gap: 28px;
  }
}


/* =========================
   CONTACT
   ========================= */

.contact-section {
  margin-bottom: 110px;
}

.contact-layout {
  display: flex;
  flex-direction: column;
  padding: 48px 0 0;
  border-top: 1px solid var(--line);
}

.contact-intro {
  display: block;
  width: 100%;
}

.contact-intro h2 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: .98;
  letter-spacing: -.065em;
  font-weight: 700;
}

/* Five main contact links on one row. */
.contact-links {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 42px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.contact-social-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(36px, 5vw, 70px);
  width: 100%;
  padding: 30px 16px;
}

.contact-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 24px;
  padding: 4px 0;
  border: 0;
  color: var(--text);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease, transform .25s ease;
}

.contact-link:hover {
  background: transparent;
  color: var(--accent);
  transform: translateY(-2px);
}

.contact-link:hover .contact-link-icon-image img {
  filter: invert(34%) sepia(96%) saturate(1971%) hue-rotate(235deg) brightness(96%) contrast(98%);
}

.contact-link:nth-child(1):hover .contact-link-icon-image img {
  content: url("../assets/logo_linkedin_hover.png");
  filter: none;
}

.contact-link:nth-child(4):hover .contact-link-icon-image img {
  content: url("../assets/logo_hackerrank_hover.png");
  filter: none;
}


.contact-link-icon {
  width: auto;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
  color: currentColor;
}

.contact-link-icon-image img {
  width: 42px;
  height: 42px;
  max-width: 42px;
  display: block;
  object-fit: contain;
  transform: none;
  transform-origin: center;
  transition: opacity .25s ease;
}


/* Keep the favicon marks visible against the dark theme. */
html[data-theme='dark'] .contact-link-icon-image img {
  filter: invert(1);
  mix-blend-mode: screen;
}

.contact-link:hover .contact-link-icon-image img {
  transform: none;
}

.contact-link-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-link-name {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.015em;
  transition: color .25s ease;
}

/* Résumé / CV gets its own centered line. */
.contact-cv {
  align-self: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 24px;
  margin: 0 0 28px;
  padding: 4px 0;
  border: 0;
  color: var(--text);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease, transform .25s ease;
}

.contact-cv:hover {
  background: transparent;
  color: var(--accent);
  transform: translateY(-2px);
}

.contact-cv-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.contact-cv-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-cv > span:last-child {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.015em;
}

/* Editorial profile details below the Résumé / CV. */
.contact-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 22px 24px 20px 0;
  border-bottom: 1px solid var(--line);
}

.contact-detail:nth-child(even) {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.contact-detail-label {
  color: var(--muted);
  font: 9px var(--mono);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.contact-detail strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.contact-detail-wide {
  grid-column: 1 / -1;
  border-bottom: 0;
}

.contact-detail-wide:nth-child(even) {
  padding-left: 0;
  border-left: 0;
}

@media (max-width: 900px) {
  .contact-layout {
    padding-top: 42px;
  }

  .contact-social-row {
    gap: 28px;
    padding-inline: 8px;
  }

  .contact-details {
    margin-top: 8px;
  }
}

@media (max-width: 620px) {
  .contact-layout {
    padding-top: 36px;
  }

  .contact-links {
    margin-top: 32px;
  }

  .contact-social-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px 28px;
    padding: 24px 4px;
  }

  .contact-link {
    flex: 0 0 auto;
  }

  .contact-link-icon {
    height: 32px;
  }

  .contact-link-icon-image img {
    width: 40px;
    height: 40px;
    max-width: 40px;
  }

  .contact-cv {
    margin-bottom: 24px;
  }

  .contact-details {
    grid-template-columns: 1fr;
    margin-top: 4px;
  }

  .contact-detail,
  .contact-detail:nth-child(even),
  .contact-detail-wide:nth-child(even) {
    padding: 18px 0;
    border-left: 0;
  }

  .contact-detail-wide {
    grid-column: auto;
    border-bottom: 0;
  }
}


/* =========================
   PROJECT CAROUSEL
   ========================= */
.project-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
}

.project-viewport {
  min-width: 0;
  overflow: hidden;
  padding: 4px 0 10px;
}

.project-track {
  display: flex;
  gap: 18px;
  will-change: transform;
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
}

.project-track .project-card {
  flex: 0 0 calc((100% - 36px) / 3);
  min-width: 0;
  border-radius: 20px;
}

.project-track .project-art {
  height: 185px;
}

.project-track .project-card > h3,
.project-track .project-card > p,
.project-track .project-card > .tag-row,
.project-track .project-card > .project-link,
.project-track .project-card > .project-meta {
  margin-left: 18px;
  margin-right: 18px;
}

.project-track .project-card h3 {
  font-size: 18px;
  line-height: 1.25;
  margin-top: 8px;
  margin-bottom: 8px;
}

.project-track .project-card p {
  font-size: 12px;
  line-height: 1.55;
  min-height: 57px;
}

.project-track .project-meta {
  margin-top: 15px;
}

.project-track .tag-row {
  gap: 6px;
  margin-top: 14px;
  margin-bottom: 17px;
}

.project-track .tag-row span {
  padding: 5px 7px;
  font-size: 8px;
}

.project-track .project-link {
  margin-bottom: 19px;
  font-size: 11px;
}

.carousel-arrow {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-strong);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 18px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.carousel-arrow:hover:not(:disabled) {
  border-color: color-mix(in srgb,var(--accent) 40%,var(--line));
  transform: translateY(-1px);
}

.carousel-arrow:disabled {
  opacity: .3;
  cursor: default;
}

@media (max-width: 980px) {
  .project-track .project-card {
    flex-basis: calc((100% - 18px) / 2);
  }
}

@media (max-width: 720px) {
  .project-carousel {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 8px;
  }
  .project-track .project-card {
    flex-basis: 100%;
  }
  .carousel-arrow {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
}


/* Projects heading + GitHub link */
.project-heading {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.project-github-link {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  text-align: center;
}

.project-github-link .text-link {
  display: inline-block;
}





/* =========================
   NAME PRONUNCIATION CONTROL
   ========================= */

.hero-name-heading {
  display: block;
}

.name-pronunciation {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-left: 12px;
  padding: 0;
  border: 1px solid var(--text);
  border-radius: 12px;
  background: var(--text);
  color: var(--bg);
  vertical-align: middle;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.name-pronunciation:hover,
.name-pronunciation:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  outline: none;
}

.name-pronunciation::after {
  content: attr(title);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 4px);
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--text);
  box-shadow: var(--shadow);
  font: 10px var(--mono);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 20;
}

.name-pronunciation:hover::after,
.name-pronunciation:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.name-pronunciation-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.name-pronunciation-icon > path:first-child {
  fill: currentColor;
  stroke: none;
}

.name-pronunciation .sound-wave {
  transform-origin: center;
  opacity: .55;
}

.name-pronunciation:not(.is-playing) {
  animation: namePronunciationAttention 2.8s ease-in-out infinite;
}

.name-pronunciation:not(.is-playing) .wave-one {
  animation: nameWaveOne 1.8s ease-in-out infinite;
}

.name-pronunciation:not(.is-playing) .wave-two {
  animation: nameWaveTwo 1.8s ease-in-out .25s infinite;
}

.name-pronunciation.is-playing {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.name-pronunciation.is-playing .wave-one {
  animation: nameWaveOne .65s ease-in-out infinite;
}

.name-pronunciation.is-playing .wave-two {
  animation: nameWaveTwo .65s ease-in-out .12s infinite;
}

@keyframes namePronunciationAttention {
  0%, 100% {
    border-color: var(--text);
    background: var(--text);
    color: var(--bg);
  }
  50% {
    border-color: #0f766e;
    background: #0f766e;
    color: #fff;
  }
}

@keyframes nameWaveOne {
  0%, 100% { opacity: .3; transform: scaleY(.72); }
  50% { opacity: 1; transform: scaleY(1.08); }
}

@keyframes nameWaveTwo {
  0%, 100% { opacity: .25; transform: scaleY(.65); }
  50% { opacity: .85; transform: scaleY(1.12); }
}

@media (max-width: 760px) {
  .name-pronunciation {
    width: 38px;
    height: 38px;
    margin-left: 8px;
  }

  .name-pronunciation-icon {
    width: 20px;
    height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .name-pronunciation:not(.is-playing),
.name-pronunciation:not(.is-playing) .sound-wave,
  .name-pronunciation.is-playing .sound-wave {
    animation: none;
  }
}

/* Continuous opposing motion for the two hero name lines */
.hero h1 .hero-name-line {
  display: inline-block;
  will-change: transform;
}

.hero-name-vijay {
  animation: heroVijayDrift 2.4s ease-in-out infinite;
}

.hero-name-rodrigues {
  animation: heroRodriguesDrift 2.4s ease-in-out infinite;
  color: var(--text) !important;
}

@keyframes heroVijayDrift {
  0%, 100% { transform: translateX(-5px); }
  50%      { transform: translateX(5px); }
}

@keyframes heroRodriguesDrift {
  0%, 100% { transform: translateX(5px); }
  50%      { transform: translateX(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 .hero-name-line {
    animation: none;
  }
}

/* =========================
   QUALIFICATIONS — EDITORIAL
   ========================= */

.qualifications-section {
  margin-bottom: 120px;
}

.qualification-block + .qualification-block {
  margin-top: 100px;
  padding-top: 88px;
  border-top: 1px solid var(--line);
}

.qualification-heading-row {
  margin-bottom: 30px;
}

.qualification-heading-row h2 {
  margin: 12px 0 0;
  max-width: 820px;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: .98;
  letter-spacing: -.065em;
  font-weight: 700;
}

/* Education: year-led editorial list */
.education-list {
  border-top: 1px solid var(--line);
}

.education-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 42px;
  align-items: start;
  padding: 28px 0 30px;
  border-bottom: 1px solid var(--line);
}

.education-year {
  padding-top: 4px;
  color: var(--muted);
  font: 10px var(--mono);
  letter-spacing: .02em;
  white-space: nowrap;
}

.education-content {
  min-width: 0;
}

.education-content h3 {
  margin: 0 0 7px;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.18;
  letter-spacing: -.04em;
  font-weight: 700;
}

.education-content p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

/* Certifications: compact technical credential register */
.certification-list {
  border-top: 1px solid var(--line);
}

.certification-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
  min-height: 82px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  transition: padding .22s ease, background .22s ease;
}

.certification-item:hover {
  padding-left: 14px;
  padding-right: 14px;
  background: var(--accent-soft);
}

.certification-index {
  color: var(--accent);
  font: 9px var(--mono);
  letter-spacing: .08em;
}


.certification-index {
  display: none;
}

.certification-content {
  min-width: 0;
}

.certification-content h3 {
  margin: 0 0 5px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -.018em;
  font-weight: 700;
}

.certification-content p {
  margin: 0;
  color: var(--muted);
  font: 10px var(--mono);
  line-height: 1.5;
  letter-spacing: .02em;
}

.certification-year {
  color: var(--muted);
  font: 10px var(--mono);
  letter-spacing: .02em;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .qualifications-section {
    margin-bottom: 100px;
  }

  .qualification-block + .qualification-block {
    margin-top: 68px;
    padding-top: 64px;
  }

  .qualification-heading-row {
    margin-bottom: 22px;
  }

  .education-item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 24px 0 26px;
  }

  .education-year {
    padding-top: 0;
  }

  .education-content h3 {
    font-size: 20px;
  }

  .certification-item {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 76px;
    padding: 17px 0;
  }

  .certification-item:hover {
    padding-left: 8px;
    padding-right: 8px;
  }

  .certification-content h3 {
    font-size: 13px;
  }

  .certification-content p {
    font-size: 10px;
  }

  .certification-year {
    font-size: 9px;
  }
}

#education, #certifications { scroll-margin-top: 110px; }

/* Keep the Qualifications control aligned with the other desktop nav items. */
@media (min-width: 981px) {
  .desktop-nav .nav-dropdown {
    flex: 0 0 auto;
  }
}

/* =========================
   ARTICLES & INSIGHTS
   ========================= */

.articles-section {
  margin-bottom: 150px;
}

.articles-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: 90px;
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: 42px;
  padding-bottom: 24px;
}

.articles-copy h2 {
  margin: 0;
  max-width: 520px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: .98;
  letter-spacing: -.065em;
}

.articles-copy p {
  margin: 20px 0 0;
  max-width: 430px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.articles-links {
  border-top: 1px solid var(--line);
}

.articles-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
  padding: 0 4px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: 620;
  letter-spacing: -.045em;
  text-decoration: none;
  transition: color .22s ease, padding-left .22s ease, background .22s ease;
}

.articles-arrow {
  display: inline-block;
  font-size: .8em;
  transition: transform .22s ease;
}

.articles-link:hover {
  color: var(--accent);
  padding-left: 14px;
  background: var(--accent-soft);
}

.articles-link:hover .articles-arrow {
  transform: translate(5px, -4px);
}

@media (max-width: 820px) {
  .articles-section {
    margin-bottom: 110px;
  }

  .articles-layout {
    grid-template-columns: 1fr;
    gap: 46px;
    padding-top: 34px;
    padding-bottom: 18px;
  }

  .articles-copy p {
    max-width: 520px;
  }

  .articles-link {
    min-height: 76px;
    font-size: 20px;
  }
}



@media (max-width: 760px) {
  .experience-entry,
  .experience-featured,
  .experience-compact {
    padding: 28px 0 32px;
  }

  .experience-main h3 {
    font-size: 12px;
  }

  .role-summary {
    font-size: 13px;
  }
}