:root {
  --paper: #edf5f9;
  --ink: #102b3d;
  --muted: #607b8d;
  --line: #b8ccd8;
  --lime: #a9d8ef;
  --orange: #4f96c2;
  --blue: #78b9dc;
  --blue-pale: #d8eaf3;
  --blue-mid: #88bed8;
  --blue-deep: #276887;
  --navy: #0d3046;
  --blue-hero: #e4f0f6;
  --blue-about: #edf5f9;
  --blue-experience: #dcebf3;
  --blue-work: #e7f2f7;
  --blue-capabilities: #d7e8f1;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Manrope, Arial, sans-serif; font-size: 16px; line-height: 1.5; }
body.is-loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.mono { font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .04em; }
.cursor-dot, .cursor-ring { position: fixed; z-index: 30; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); }
.cursor-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-deep); transition: opacity .2s; }
.cursor-ring { width: 36px; height: 36px; border: 1px solid var(--ink); border-radius: 50%; transition: width .25s, height .25s, background .25s, border-color .25s, opacity .25s; }
body.has-pointer .cursor-dot, body.has-pointer .cursor-ring { opacity: 1; }
body.cursor-hover .cursor-ring { width: 62px; height: 62px; background: var(--blue-mid); border-color: transparent; mix-blend-mode: multiply; }
.scroll-progress { position: fixed; z-index: 11; top: 0; left: 0; width: 100%; height: 3px; background: transparent; }
.scroll-progress span { display: block; width: 0; height: 100%; background: var(--blue-deep); transform-origin: left; }
.page-loader { position: fixed; inset: 0; z-index: 20; display: grid; grid-template-rows: auto 1fr auto; padding: 30px 4vw 34px; background: #dcebf3; color: #496b80; transition: opacity .8s ease, visibility .8s ease; }
.page-loader.is-hidden { opacity: 0; visibility: hidden; }
.loader-top { display: flex; justify-content: space-between; width: 100%; }
.loader-count { color: #285f7c; font-size: clamp(22px, 3vw, 36px); letter-spacing: -.05em; line-height: 1; }
.loader-scene { position: relative; display: grid; place-items: center; overflow: hidden; }
.loader-welcome { position: absolute; top: 50%; left: 50%; width: max-content; transform: translate(-50%, -50%); color: rgba(55, 112, 145, .16); font-size: clamp(28px, 6vw, 86px); font-weight: 700; letter-spacing: -.08em; white-space: nowrap; }
.loader-person { position: relative; width: min(24vw, 230px); height: min(54vh, 390px); overflow: hidden; isolation: isolate; animation: person-enter 1.2s .12s both cubic-bezier(.2,.8,.2,1); }
.loader-person::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(155deg, rgba(81, 157, 198, .2), rgba(177, 213, 231, .08) 48%, rgba(73, 124, 158, .12)); mix-blend-mode: screen; pointer-events: none; }
.loader-person::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(90deg, transparent 0 18%, rgba(255,255,255,.2) 45%, transparent 70%); transform: translateX(-130%); animation: light-sweep 1.7s .35s ease-in-out infinite; pointer-events: none; }
.loader-person img { width: 165%; height: 100%; margin-left: -31%; object-fit: cover; object-position: center 18%; filter: saturate(1.12) contrast(.92); animation: person-drift 2.6s ease-in-out infinite alternate; }
.loader-color-wash { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(58, 130, 171, .15), rgba(138, 190, 215, .09) 52%, rgba(53, 105, 139, .08)); mix-blend-mode: color; pointer-events: none; }
.loader-bottom { display: flex; justify-content: center; align-items: end; position: relative; min-height: 60px; }
.loader-status { position: absolute; left: 0; bottom: 1px; color: #668395; font-size: 9px; }
@keyframes person-enter { from { opacity: 0; transform: translateY(34px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes person-drift { from { transform: translateX(-7px); } to { transform: translateX(7px); } }
@keyframes light-sweep { 0%, 20% { transform: translateX(-130%); } 75%, 100% { transform: translateX(130%); } }
.site-header { position: fixed; z-index: 10; top: 0; left: 0; right: 0; height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 5.3vw; mix-blend-mode: multiply; }
.wordmark { font-weight: 800; font-size: 17px; letter-spacing: 0; }
.wordmark span { color: var(--blue-deep); }
.desktop-nav { display: flex; gap: 28px; margin-left: auto; margin-right: 42px; }
.desktop-nav a, .language-toggle { font-family: "DM Mono", monospace; font-size: 11px; text-transform: uppercase; }
.desktop-nav a { position: relative; }
.desktop-nav a::after { content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .3s; }
.desktop-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header-tools { display: flex; align-items: center; gap: 24px; }
.language-toggle { border: 0; background: transparent; cursor: pointer; padding: 8px 0; }
.lang-label { color: var(--muted); }
.lang-label.active { color: var(--ink); font-weight: 700; }
.lang-divider { color: var(--line); margin: 0 5px; }
.menu-toggle { display: none; border: 0; background: transparent; padding: 8px 0; cursor: pointer; }
.menu-toggle span { display: block; width: 25px; height: 1px; background: var(--ink); margin: 6px 0; }
.section-pad { padding-left: 5.3vw; padding-right: 5.3vw; }
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 100px; padding-bottom: 45px; position: relative; overflow: hidden; background: var(--blue-hero); }
.hero-meta, .hero-bottom, .hero-index { position: relative; z-index: 1; }
.hero-meta { display: flex; justify-content: space-between; color: var(--muted); text-transform: uppercase; margin-bottom: 3vh; }
.hero-stage { display: grid; grid-template-columns: 1fr minmax(210px, 25vw); align-items: end; position: relative; z-index: 1; }
.hero-title-wrap { position: relative; z-index: 2; }
.eyebrow { margin: 0 0 22px; max-width: 390px; font-size: 15px; font-weight: 600; }
.hero h1 { margin: 0; font-size: clamp(72px, 12.4vw, 178px); line-height: .86; letter-spacing: -.09em; font-weight: 800; white-space: nowrap; animation: rise .9s .9s both cubic-bezier(.2,.8,.2,1); }
.hero h1 em { color: var(--blue-deep); font-style: normal; }
.hero-portrait { margin: 0 0 -4vh -5vw; position: relative; z-index: 1; animation: portraitIn 1s 1s both cubic-bezier(.2,.8,.2,1); }
.hero-portrait::before { content: ""; position: absolute; inset: -13px 13px 13px -13px; border: 1px solid var(--ink); z-index: -1; }
.hero-portrait img { display: block; width: 100%; aspect-ratio: .75; object-fit: cover; object-position: center 20%; }
.hero-portrait figcaption { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; color: var(--muted); }
@keyframes rise { from { opacity: 0; transform: translateY(35px); } to { opacity: 1; transform: translateY(0); } }
@keyframes portraitIn { from { opacity: 0; transform: translateY(25px) rotate(2deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
.hero-bottom { display: flex; align-items: end; justify-content: space-between; margin-top: 10vh; }
.hero-intro { max-width: 410px; margin: 0; font-size: 17px; line-height: 1.45; }
.scroll-cue { display: flex; align-items: center; gap: 13px; font-family: "DM Mono", monospace; font-size: 11px; text-transform: uppercase; }
.scroll-arrow { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--ink); border-radius: 50%; font-size: 18px; transition: background .3s, color .3s; }
.scroll-cue:hover .scroll-arrow { background: var(--ink); color: var(--paper); }
.hero-index { position: absolute; bottom: 45px; left: 50%; transform: translateX(-50%); color: var(--muted); }
.ruled-section { border-top: 1px solid var(--ink); }
.reveal-section > * { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal-section.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-section.is-visible .section-label { transition-delay: 0s; }
.reveal-section.is-visible .about-content, .reveal-section.is-visible .timeline, .reveal-section.is-visible .work-heading, .reveal-section.is-visible .impact-dashboard, .reveal-section.is-visible .work-grid, .reveal-section.is-visible .capability-list, .reveal-section.is-visible .tool-row, .reveal-section.is-visible .contact-content { transition-delay: .14s; }
.about, .experience, .work, .capabilities, .contact { min-height: 80vh; padding-top: 38px; padding-bottom: 110px; }
.about { background: var(--blue-about); }
.experience { background: var(--blue-experience); }
.work { background: var(--blue-work); }
.capabilities { background: var(--blue-capabilities); }
.section-label { display: flex; justify-content: space-between; color: var(--muted); }
.section-label span:first-child { color: var(--ink); }
.about-content { display: grid; grid-template-columns: 1.25fr .75fr; gap: 8vw; margin-top: 11vh; }
h2 { font-size: clamp(40px, 6.2vw, 90px); line-height: .96; letter-spacing: -.07em; margin: 0; font-weight: 700; }
.about h2 span { color: var(--muted); }
.about-copy { max-width: 430px; padding-top: 8px; }
.about-copy p { margin: 0 0 24px; font-size: 17px; line-height: 1.6; }
.skill-line, .tool-row { border-top: 1px solid var(--line); padding-top: 14px; display: grid; grid-template-columns: 110px 1fr; gap: 16px; color: var(--muted); font-size: 13px; }
.skill-line span:last-child, .tool-row span:last-child { color: var(--ink); }
.timeline { margin-top: 8vh; }
.timeline-item { display: grid; grid-template-columns: 20% 1fr auto; gap: 5vw; border-top: 1px solid var(--line); padding: 31px 0 34px; }
.timeline-item:last-child { border-bottom: 1px solid var(--line); }
.timeline-date { color: var(--muted); padding-top: 7px; }
.timeline-main h3 { margin: 0; font-size: 25px; letter-spacing: -.04em; }
.company { color: var(--muted); margin: 4px 0 18px; }
.timeline-main ul { margin: 0; padding-left: 17px; max-width: 720px; }
.timeline-main li { margin-bottom: 8px; padding-left: 5px; }
.timeline-tag { color: var(--blue-deep); padding-top: 8px; white-space: nowrap; }
.work-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin: 11vh 0 7vh; }
.work-heading h2 em { color: var(--blue-deep); font-style: normal; }
.work-heading p { max-width: 250px; margin: 0 0 3px; color: var(--muted); }
.impact-dashboard { display: grid; grid-template-columns: 1.25fr .75fr .9fr; border: 1px solid var(--ink); margin-bottom: 14px; }
.metric { min-height: 350px; padding: 23px; position: relative; overflow: hidden; }
.metric + .metric { border-left: 1px solid var(--ink); }
.metric-head { display: flex; justify-content: space-between; color: var(--muted); }
.metric-value { margin-top: 30px; font-size: clamp(72px, 9vw, 135px); line-height: .9; letter-spacing: -.08em; font-weight: 700; }
.metric-value span { color: var(--blue-deep); font-size: .55em; vertical-align: top; }
.metric p { max-width: 330px; font-size: 13px; color: var(--muted); }
.spark-bars { position: absolute; height: 95px; bottom: 0; left: 23px; right: 23px; display: flex; gap: 5px; align-items: end; }
.spark-bars i { flex: 1; background: var(--blue-mid); border-top: 1px solid var(--ink); }
.metric-ring { width: 150px; aspect-ratio: 1; border-radius: 50%; margin: 35px auto 23px; background: conic-gradient(#286d93 0 20%, #579bc0 20% 40%, #8bc5df 40% 60%, #b5d9e9 60% 80%, #153f58 80%); display: grid; place-items: center; }
.metric-ring::before { content: ""; width: 94px; aspect-ratio: 1; background: var(--paper); border-radius: 50%; }
.metric-ring span { position: absolute; font-size: 52px; font-weight: 700; letter-spacing: -.07em; }
.sector-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; font-size: 10px; text-transform: uppercase; }
.sector-key span::before { content: "·"; margin-right: 5px; }
.network-plot { position: absolute; left: 23px; right: 23px; bottom: 26px; height: 90px; }
.network-plot::before, .network-plot::after { content: ""; position: absolute; background: var(--line); }
.network-plot::before { height: 1px; width: 100%; top: 50%; }
.network-plot::after { width: 1px; height: 100%; left: 50%; }
.network-plot i { position: absolute; width: 11px; height: 11px; background: var(--blue-deep); border: 1px solid var(--ink); border-radius: 50%; }
.network-plot i:nth-child(1) { left: 4%; top: 20%; } .network-plot i:nth-child(2) { left: 15%; top: 60%; }
.network-plot i:nth-child(3) { left: 28%; top: 35%; } .network-plot i:nth-child(4) { left: 39%; top: 70%; }
.network-plot i:nth-child(5) { left: 48%; top: 12%; } .network-plot i:nth-child(6) { left: 58%; top: 53%; }
.network-plot i:nth-child(7) { left: 69%; top: 30%; } .network-plot i:nth-child(8) { left: 77%; top: 75%; }
.network-plot i:nth-child(9) { left: 87%; top: 17%; } .network-plot i:nth-child(10) { left: 94%; top: 55%; }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.work-card { min-height: 355px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; position: relative; transition: transform .35s ease; }
.work-card:hover { transform: translateY(-8px) rotate(-1deg); }
.tilt-card { will-change: transform; }
.work-card.lime { background: #b9dcec; }
.work-card.orange { background: #76b1d0; }
.work-card.blue { background: #397da2; color: #f3f9fc; }
.work-card.blue .card-kicker, .work-card.blue p:last-of-type { color: #d9ebf4; }
.card-number { font-size: 12px; }
.card-kicker { margin: 0 0 17px; }
.work-card h3 { font-size: 25px; line-height: 1.05; letter-spacing: -.05em; margin: 0 0 16px; max-width: 310px; }
.work-card p:last-of-type { font-size: 13px; max-width: 290px; margin: 0; }
.card-arrow { position: absolute; right: 22px; bottom: 15px; font-size: 28px; }
.capabilities { min-height: auto; }
.capability-list { display: grid; grid-template-columns: 1fr 1fr; margin-top: 9vh; }
.capability-list > div { display: flex; gap: 24px; align-items: baseline; border-top: 1px solid var(--line); padding: 19px 0; }
.capability-list > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.cap-index { color: var(--muted); }
.capability-list h3 { margin: 0; font-size: clamp(24px, 3vw, 43px); letter-spacing: -.06em; font-weight: 600; }
.tool-row { margin-top: 8vh; max-width: 700px; }
.contact { min-height: 86vh; background: var(--navy); color: #edf7fb; border-top-color: var(--navy); }
.contact .section-label { color: #83a7ba; }
.contact .section-label span:first-child { color: var(--paper); }
.contact-content { margin-top: 17vh; }
.contact .eyebrow { color: #91c8e1; }
.contact h2 { font-size: clamp(48px, 8.8vw, 132px); }
.contact h2 a { transition: color .3s; }
.contact h2 a:hover { color: #91c8e1; }
.contact-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 13vh; border-top: 1px solid #31566b; padding-top: 16px; color: #9ab7c6; font-size: 13px; }
.site-footer { display: flex; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; background: var(--navy); color: #6f94a7; font-size: 11px; }
@media (max-width: 760px) {
  .cursor-dot, .cursor-ring { display: none; }
  .page-loader { padding: 25px 6vw 28px; }
  .loader-welcome { width: 130vw; white-space: normal; text-align: center; font-size: 42px; line-height: .9; }
  .loader-person { width: 48vw; height: 46vh; }
  .loader-status { font-size: 8px; }
  .site-header { height: 64px; padding: 0 6vw; }
  .desktop-nav { position: fixed; inset: 64px 0 auto; display: none; flex-direction: column; gap: 0; padding: 16px 6vw 22px; background: var(--paper); border-bottom: 1px solid var(--ink); margin: 0; }
  .desktop-nav.is-open { display: flex; }
  .desktop-nav a { padding: 12px 0; }
  .menu-toggle { display: block; }
  .hero { min-height: 760px; padding: 100px 6vw 42px; }
  .hero-meta { margin-bottom: 6vh; display: block; }
  .hero-meta span { display: block; margin-bottom: 7px; }
  .hero-stage { display: block; }
  .hero h1 { font-size: clamp(63px, 20vw, 120px); white-space: normal; }
  .hero-portrait { width: 36vw; min-width: 135px; margin: -20px 3vw 0 auto; }
  .hero-portrait figcaption { display: block; }
  .hero-portrait figcaption span { display: block; margin-top: 4px; }
  .hero-bottom { display: block; margin-top: 7vh; }
  .hero-intro { font-size: 16px; max-width: 330px; }
  .scroll-cue { margin-top: 32px; }
  .hero-index { left: auto; right: 6vw; transform: none; }
  .section-pad { padding-left: 6vw; padding-right: 6vw; }
  .about, .experience, .work, .capabilities, .contact { padding-top: 26px; padding-bottom: 76px; min-height: auto; }
  .about-content, .work-heading { display: block; margin-top: 70px; }
  .about-copy { margin-top: 48px; }
  .about-copy p { font-size: 15px; }
  .skill-line, .tool-row { grid-template-columns: 1fr; gap: 5px; }
  .timeline { margin-top: 56px; }
  .timeline-item { display: block; padding: 25px 0 28px; }
  .timeline-date { margin-bottom: 15px; }
  .timeline-main h3 { font-size: 22px; }
  .timeline-main li { font-size: 14px; }
  .timeline-tag { margin-top: 17px; }
  .work-heading p { margin-top: 27px; }
  .impact-dashboard { display: block; margin-top: 44px; }
  .metric { min-height: 310px; }
  .metric + .metric { border-left: 0; border-top: 1px solid var(--ink); }
  .metric-ring { width: 135px; }
  .work-grid { display: block; margin-top: 44px; }
  .work-card { min-height: 300px; margin-bottom: 12px; }
  .capability-list { display: block; margin-top: 56px; }
  .capability-list > div:nth-last-child(-n+2) { border-bottom: 0; }
  .capability-list > div:last-child { border-bottom: 1px solid var(--line); }
  .capability-list h3 { font-size: 29px; }
  .tool-row { margin-top: 54px; }
  .contact-content { margin-top: 100px; }
  .contact-bottom { display: block; margin-top: 90px; }
  .contact-bottom .mono { display: block; margin-top: 18px; }
  .site-footer { display: block; }
  .site-footer .mono { display: block; margin-top: 8px; }
}