@font-face { font-family:'Khand'; src:url('../fonts/khand-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'General Sans'; src:url('../fonts/general-sans-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'General Sans'; src:url('../fonts/general-sans-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'General Sans'; src:url('../fonts/general-sans-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

:root {
  --bg:        #f6f6f8;
  --bg-tint:   #eef0f4;
  --surface:   #ffffff;
  --line:      rgba(59, 62, 94, 0.12);
  --line-2:    rgba(59, 62, 94, 0.22);

  --ink:        #3b3e5e;
  --ink-strong: #2b2d47;
  --text:       #55586d;
  --muted:      #666980;

  --accent:      #f7931e;
  --accent-deep: #e07d0c;
  --accent-ink:  #a05800;
  --accent-soft: rgba(247, 147, 30, 0.14);

  --font-display: 'Khand', 'General Sans', system-ui, sans-serif;
  --font-body:    'General Sans', system-ui, -apple-system, sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(5rem, 12vh, 9rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.07rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; padding:0; }
h1,h2,h3 { font-family:var(--font-display); color:var(--ink); font-weight:600; line-height:1.04; letter-spacing:0; text-wrap:balance; }
.section-note, .hero__lede, .pillar p { text-wrap:pretty; }

::selection { background: var(--accent); color:#fff; }

.skip-link { position:absolute; left:50%; top:-60px; transform:translateX(-50%); background:var(--accent); color:var(--ink-strong); padding:.6rem 1rem; border-radius:var(--radius-sm); z-index:200; transition:top .2s; font-weight:600; }
.skip-link:focus { top:12px; }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:2px; }

.footer :focus-visible { outline-color:#fff; }
#top-sentinel { position:absolute; top:0; height:1px; width:1px; }

.accent { color: var(--accent); }
.accent-bar { display:block; width:44px; height:4px; border-radius:2px; background:var(--accent); margin-bottom:1.25rem; }

.section-head { max-width:var(--container); margin:0 auto var(--gutter); padding-inline:var(--gutter); }
.section-title { font-size:clamp(2rem, 1.3rem + 3vw, 3.3rem); text-transform:uppercase; letter-spacing:.01em; }
.section-note { color:var(--text); margin-top:.85rem; max-width:56ch; font-size:1.08rem; }

.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 1.55rem;
  font-family:var(--font-body); font-weight:600; font-size:.96rem; letter-spacing:.01em;
  white-space:nowrap;
  border-radius:var(--radius-pill); border:1px solid transparent; cursor:pointer;
  transition: transform .12s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.btn--solid { background:var(--accent); color:var(--ink-strong); box-shadow:0 10px 24px -12px rgba(247,147,30,.7); }
.btn--solid:hover { background:var(--accent-deep); color:#fff; }
.btn--ghost { background:var(--surface); color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover { border-color:var(--accent); color:var(--accent-deep); }
.btn:active { transform:translateY(1px) scale(.985); }

.link-arrow { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color:var(--accent-ink); padding-bottom:3px; border-bottom:1px solid transparent; transition:gap .3s var(--ease), border-color .3s; }
.link-arrow::after { content:"\2192"; transition:transform .3s var(--ease); }
.link-arrow:hover { border-color:var(--accent); }
.link-arrow:hover::after { transform:translateX(4px); }

.window { border-radius:var(--radius); overflow:hidden; background:var(--surface); border:1px solid var(--line); box-shadow:0 40px 90px -40px rgba(43,45,71,.4); }
.window__bar { display:flex; gap:7px; align-items:center; padding:12px 16px; background:var(--bg-tint); border-bottom:1px solid var(--line); }
.window__bar span { width:11px; height:11px; border-radius:50%; background:var(--line-2); }
.window img { width:100%; display:block; }

.nav { position:fixed; inset:0 0 auto 0; z-index:100; transition:background .4s var(--ease), border-color .4s, backdrop-filter .4s; border-bottom:1px solid transparent; }
.nav.scrolled { background:rgba(246,246,248,.8); backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%); border-bottom-color:var(--line); }
.nav__inner { max-width:var(--container); margin:0 auto; padding:.9rem var(--gutter); display:flex; align-items:center; gap:2rem; min-height:66px; }
.nav__brand { display:flex; align-items:center; gap:.6rem; }

.nav__mark { flex:none; display:block; width:36px; height:36px; }
.nav__word { font-family:var(--font-display); font-weight:600; font-size:1.3rem; color:var(--ink); letter-spacing:.01em; }
.nav__word span { color:var(--accent); }
.nav__links { display:flex; gap:1.75rem; margin-left:auto; }
.nav__links a { color:var(--text); font-size:.96rem; font-weight:500; transition:color .25s; }
.nav__links a:hover { color:var(--accent-ink); }
.nav__cta { padding:.55rem 1.15rem; }
@media (max-width:820px){ .nav__links{display:none;} .nav__cta{margin-left:auto;} }
@media (max-width:460px){ .nav__cta{padding:.5rem .9rem; font-size:.9rem;} }

.hero { position:relative; min-height:100dvh; display:flex; align-items:center; padding:8rem 0 4rem; overflow:hidden; }
.hero::before { content:""; position:absolute; z-index:0; right:-10%; top:-10%; width:min(760px,80vw); aspect-ratio:1/1; background:radial-gradient(closest-side, var(--accent-soft), transparent 70%); pointer-events:none; }
.hero__grid { position:relative; z-index:1; max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); width:100%; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }

.hero__eyebrow { display:inline-block; color:var(--text); font-weight:600; font-size:.95rem; letter-spacing:.01em; margin-bottom:1.4rem; }
.hero__eyebrow span { color:var(--accent-ink); }
.hero__title { font-family:var(--font-display); color:var(--ink-strong); font-weight:600; text-transform:uppercase; font-size:clamp(2.7rem, 1.4rem + 5.6vw, 5.4rem); line-height:.98; letter-spacing:.005em; }
.hero__title .line { display:block; overflow:hidden; padding-bottom:.04em; }
.hero__title .line__inner { display:block; }
.hero__lede { margin-top:1.6rem; max-width:48ch; color:var(--text); font-size:clamp(1.05rem, 1rem + 0.4vw, 1.22rem); }
.hero__actions { margin-top:2.1rem; display:flex; gap:.9rem; flex-wrap:wrap; }
.hero__visual--portrait { position:relative; width:min(440px,100%); margin-inline:auto; }
.hero__visual--portrait img { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center top; border-radius:var(--radius); border:1px solid var(--line); box-shadow:0 40px 90px -40px rgba(43,45,71,.45); }
.hero__visual--portrait::after { content:""; position:absolute; inset:auto -14px -14px auto; width:96px; height:96px; border-radius:18px; background:var(--accent-soft); z-index:-1; }
@media (max-width:900px){ .hero{padding-top:7rem;} .hero__grid{grid-template-columns:1fr; gap:2.5rem;} }

.approach { padding-block:var(--section-y); }
.pillars { max-width:var(--container); margin:clamp(2.5rem,6vh,4rem) auto 0; padding-inline:var(--gutter); display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.pillar { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.75rem; transition:transform .4s var(--ease), box-shadow .3s, border-color .3s; }
.pillar:hover { transform:translateY(-4px); box-shadow:0 26px 50px -30px rgba(43,45,71,.28); border-color:var(--line-2); }
.pillar h3 { font-size:1.35rem; text-transform:uppercase; letter-spacing:.01em; margin-bottom:.5rem; }
.pillar p { color:var(--text); font-size:.96rem; }
@media (max-width:900px){ .pillars{grid-template-columns:1fr;} }

.story { max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }
.story__text { max-width:62ch; display:grid; gap:1.1rem; }
.story__text p { color:var(--text); font-size:clamp(1.05rem, 1rem + 0.35vw, 1.18rem); text-wrap:pretty; }
.section-head--tight { margin-top:clamp(3rem,7vh,4.5rem); margin-bottom:1rem; }

.section-head--tight + .pillars { margin-top:0; }
.section-eyebrow { display:block; font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:1rem; color:var(--accent-ink); }
.section-head--tight .section-eyebrow { display:flex; align-items:center; gap:.7rem; }
.section-head--tight .section-eyebrow::before { content:""; flex:none; width:24px; height:3px; border-radius:2px; background:var(--accent); }

.experience { padding-block:var(--section-y); background:var(--bg-tint); border-top:1px solid var(--line); }

.leadership { padding-block:0 var(--section-y); background:var(--bg-tint); border-bottom:1px solid var(--line); scroll-margin-top:6.5rem; }
.experience__inner { max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.timeline { display:grid; gap:0; }
.timeline__item { display:grid; gap:.15rem; padding:1.15rem 0 1.15rem 1.5rem; border-left:2px solid var(--line-2); position:relative; }
.timeline__item::before { content:""; position:absolute; left:-6px; top:1.55rem; width:10px; height:10px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-tint); }

.timeline__item:last-child { border-left-color:transparent; }
.timeline__item:last-child::after { content:""; position:absolute; left:-2px; top:0; width:2px; height:calc(1.55rem + 7px); background:var(--line-2); }
.timeline__when { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.9rem; color:var(--accent-ink); }
.timeline__what { font-family:var(--font-display); font-weight:600; font-size:1.3rem; color:var(--ink); line-height:1.15; }
.timeline__where { color:var(--muted); font-size:.95rem; }
.stack { display:grid; gap:1.5rem; }
.stack__group h3 { font-size:1.1rem; text-transform:uppercase; letter-spacing:.02em; margin-bottom:.6rem; }
@media (max-width:860px){ .experience__inner{grid-template-columns:1fr;} }

.tags { display:flex; flex-wrap:wrap; gap:.55rem; }
.tags li { font-size:.82rem; font-weight:500; color:var(--ink); padding:.35rem .85rem; border:1px solid var(--line-2); border-radius:var(--radius-pill); background:var(--surface); }

.work { padding-block:var(--section-y); }
.work__grid { max-width:var(--container); margin:clamp(2.5rem,6vh,4rem) auto 0; padding-inline:var(--gutter); display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.5rem,3vw,2.25rem); }
.work__card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .3s, border-color .3s; }
.work__card:hover { transform:translateY(-4px); box-shadow:0 30px 60px -34px rgba(43,45,71,.3); border-color:var(--line-2); }
.work__card .window { border:0; border-radius:0; box-shadow:none; }
.work__card .window img { aspect-ratio:900/579; object-fit:cover; }
.work__body { padding:1.6rem 1.75rem 1.9rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.work__meta { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.85rem; color:var(--accent-ink); }
.work__body h3 { font-size:1.45rem; text-transform:uppercase; letter-spacing:.01em; }
.work__body p { color:var(--text); font-size:.98rem; text-wrap:pretty; }
.work__body .tags { margin-top:auto; padding-top:.35rem; }
.work__body .link-arrow { align-self:flex-start; margin-top:.35rem; }

.work__card--wide { grid-column:1 / -1; display:grid; grid-template-columns:58% 1fr; }
.work__card--wide .window { display:contents; }
.work__card--wide .window__bar { grid-column:1 / -1; }

.work__card--wide .window img { grid-column:1; grid-row:2; align-self:start; }
.work__card--wide .work__body { grid-column:2; grid-row:2; justify-content:center; }
.work__card--wide .work__body .tags { margin-top:1rem; }
@media (max-width:860px){
  .work__grid { grid-template-columns:1fr; }
  .work__card--wide { display:flex; flex-direction:column; }
  .work__card--wide .window { display:block; }
}

.work__role { font-size:.94rem; color:var(--text); }
.work__role span { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; color:var(--accent-ink); margin-right:.5rem; }

.earlier { max-width:var(--container); margin:clamp(2.5rem,6vh,3.5rem) auto 0; padding-inline:var(--gutter); }
.earlier__list { margin-top:1.25rem; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,2.5vw,2rem); border-top:1px solid var(--line); padding-top:1.5rem; }
.earlier__list li { display:grid; gap:.35rem; align-content:start; }
.earlier__name { font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--ink); line-height:1.15; }
.earlier__when { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; color:var(--accent-ink); }
.earlier__list p { color:var(--text); font-size:.92rem; text-wrap:pretty; }
.earlier__tags { color:var(--muted); font-size:.85rem; }
.earlier__list .link-arrow { justify-self:start; font-size:.9rem; margin-top:.2rem; }
@media (max-width:1000px){ .earlier__list{grid-template-columns:repeat(2,1fr); gap:1.75rem;} }
@media (max-width:600px){ .earlier__list{grid-template-columns:1fr;} }

.oss { padding-block:var(--section-y); background:var(--bg-tint); border-block:1px solid var(--line); }
.oss__inner { max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }
.oss__totals { display:flex; flex-wrap:wrap; gap:clamp(1.5rem,5vw,4rem); margin-bottom:.9rem; }
.oss__scope { color:var(--muted); font-size:.92rem; margin-bottom:2.25rem; }
.oss__noscript { color:var(--muted); font-size:.92rem; }
.oss__total { display:grid; gap:.15rem; }
.oss__n { font-family:var(--font-display); font-weight:600; font-size:clamp(2.4rem, 1.8rem + 2vw, 3.4rem); color:var(--ink-strong); line-height:1; font-variant-numeric:tabular-nums; }
.oss__l { color:var(--muted); font-size:.95rem; }
.oss__list { display:grid; gap:0; border-top:1px solid var(--line); }
.oss__item a { display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto auto; gap:1.25rem; align-items:center; padding:1.05rem .25rem; border-bottom:1px solid var(--line); transition:background .25s, padding-left .3s var(--ease); }
.oss__item a:hover { background:var(--surface); padding-left:.9rem; }
.oss__name { font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:var(--ink); }
.oss__desc { color:var(--text); font-size:.94rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oss__stat { color:var(--accent-ink); font-weight:600; font-size:.9rem; white-space:nowrap; }
.oss__stars { color:var(--muted); font-size:.9rem; white-space:nowrap; }
@media (max-width:860px){
  .oss__item a { grid-template-columns:1fr auto; gap:.35rem 1rem; }
  .oss__desc { grid-column:1 / -1; white-space:normal; }
}

.contact { padding-block:var(--section-y); }
.contact__inner { max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; }
.contact__title { font-size:clamp(2.6rem, 1.6rem + 5vw, 5rem); text-transform:uppercase; line-height:.98; }
.contact__details { display:grid; gap:1.5rem; }
.contact__details li { display:grid; gap:.3rem; padding-bottom:1.5rem; border-bottom:1px solid var(--line); }
.contact__details li:last-child { border-bottom:0; padding-bottom:0; }
.contact__label { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.9rem; color:var(--accent-ink); }
.contact__details a:hover { color:var(--accent-ink); }
@media (max-width:820px){ .contact__inner{grid-template-columns:1fr;} }

.legal { max-width:var(--container); margin:0 auto; padding:clamp(4rem,10vh,7rem) var(--gutter) clamp(4rem,10vh,6rem); }
.legal__back { margin-bottom:2.5rem; }
.legal__back::after { content:""; }
.legal__back::before { content:"\2190"; transition:transform .3s var(--ease); }
.legal__back:hover::before { transform:translateX(-4px); }
.legal h2 { font-size:1.35rem; text-transform:uppercase; letter-spacing:.01em; margin:2.25rem 0 .6rem; }
.legal h1 + h2 { margin-top:1.5rem; }
.legal h3 { font-size:1.08rem; letter-spacing:.01em; color:var(--ink); margin:1.6rem 0 .5rem; }
.legal p { color:var(--text); margin-bottom:1rem; }
.legal ul, .legal ol { color:var(--text); margin:0 0 1rem 1.25rem; display:grid; gap:.35rem; }
.legal li { list-style:disc; }
.legal ol li { list-style:decimal; }
.legal li > ul, .legal li > ol { margin-top:.35rem; margin-bottom:0; }

.legal blockquote { margin:0 0 1rem; padding:.15rem 0 .15rem 1.15rem; border-left:2px solid var(--line-2); color:var(--muted); }
.legal blockquote p:last-child { margin-bottom:0; }
.legal img { max-width:100%; height:auto; }
.legal table { width:100%; border-collapse:collapse; margin:0 0 1rem; font-size:.95rem; }
.legal th, .legal td { border:1px solid var(--line); padding:.75rem; text-align:left; vertical-align:top; }
.legal a:not(.link-arrow) { color:var(--accent-ink); border-bottom:1px solid var(--line-2); }
.legal a:not(.link-arrow):hover { border-bottom-color:var(--accent); }

.footer { background:var(--ink-strong); color:#c9cbdb; padding-block:2.5rem; }
.footer__inner { max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.footer__brand { font-family:var(--font-display); font-weight:600; font-size:1.4rem; color:#fff; }
.footer__brand span { color:var(--accent); }
.footer__links { display:flex; gap:1.5rem; }
.footer__links a { color:#c9cbdb; font-size:.95rem; transition:color .25s; }
.footer__links a:hover { color:var(--accent); }
.footer__note { color:#8f92aa; font-size:.9rem; }
@media (max-width:640px){ .footer__inner{flex-direction:column; align-items:flex-start; gap:1rem;} }

.reveal { opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view { opacity:1; transform:none; }

.hero__title .line__inner { transform:translateY(108%); animation:line-rise .95s var(--ease) forwards; }
.hero__title .line:nth-child(1) .line__inner { animation-delay:.12s; }
.hero__title .line:nth-child(2) .line__inner { animation-delay:.24s; }
.hero__title .line:nth-child(3) .line__inner { animation-delay:.36s; }
@keyframes line-rise { to { transform:translateY(0); } }
.hero .reveal { animation:fade-up .9s var(--ease) forwards; opacity:0; }
.hero__eyebrow { animation-delay:.04s; }
.hero__lede    { animation-delay:.5s; }
.hero__actions { animation-delay:.62s; }
.hero__visual  { animation-delay:.4s; }
@keyframes fade-up { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;} }

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero .reveal { opacity:1 !important; transform:none !important; animation:none !important; }
  .hero__title .line__inner { transform:none !important; animation:none !important; }
  .btn, .link-arrow, .link-arrow::after, .pillar, .work__card, .oss__item a, .nav { transition:none !important; }
  .pillar:hover, .work__card:hover { transform:none; }
}