:root {
  --paper:#f6f6f4;
  --surface:#ffffff;
  --surface-soft:#efefed;
  --ink:#151515;
  --muted:#777873;
  --line:#dededb;
  --accent:#f47d9f;
  --shadow:0 22px 70px rgba(17,18,20,.08);
  --font:"Manrope","Avenir Next",Arial,sans-serif;
  color-scheme:light dark;
}
@media(prefers-color-scheme:dark) {
  :root {
    --paper:#111213;
    --surface:#1b1c1d;
    --surface-soft:#242526;
    --ink:#f4f4f1;
    --muted:#a5a6a2;
    --line:#333436;
    --accent:#ff91ad;
    --shadow:0 24px 72px rgba(0,0,0,.28);
  }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:92px; }
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.65 var(--font);
  letter-spacing:-.025em;
  -webkit-font-smoothing:antialiased;
  transition:background-color .45s ease,color .45s ease;
}
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
:where(a,button):focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.icon { display:block; width:19px; height:19px; flex:0 0 auto; stroke-width:1.8; }
.icon-small { width:15px; height:15px; }
.page-shell { width:min(1220px,calc(100% - 96px)); margin-inline:auto; }
.topbar {
  height:78px;
  padding-inline:max(48px,calc((100vw - 1220px)/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  background:color-mix(in srgb,var(--paper) 84%,transparent);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.brand,.footer-brand { display:inline-flex; align-items:center; gap:11px; font-size:13px; font-weight:800; letter-spacing:.12em; }
.nav { display:flex; align-items:center; gap:34px; font-size:14px; font-weight:600; }
.nav>a:not(.nav-contact),.footer a:not(.footer-brand) { position:relative; transition:color .25s ease; }
.nav>a:not(.nav-contact)::after,.footer a:not(.footer-brand)::after {
  content:""; position:absolute; left:0; right:100%; bottom:-5px; height:1px; background:var(--accent); transition:right .3s cubic-bezier(.2,.8,.2,1);
}
.nav>a:not(.nav-contact):hover::after,.footer a:not(.footer-brand):hover::after { right:0; }
.nav>a:not(.nav-contact):hover,.footer a:not(.footer-brand):hover { color:var(--accent); }
.nav-contact,.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-size:14px; font-weight:700; }
.nav-contact { min-height:42px; padding:0 17px; border:1px solid var(--line); border-radius:999px; transition:background .3s,color .3s,border-color .3s,transform .3s; }
.nav-contact:hover { border-color:var(--ink); background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.nav-contact .icon { transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.nav-contact:hover .icon { transform:translate(3px,-3px); }
.menu-toggle { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:transparent; cursor:pointer; transition:background .3s,border-color .3s; }
.menu-toggle:hover { background:var(--surface-soft); border-color:var(--muted); }
.menu-toggle { display:none; position:relative; }
.menu-toggle .icon { position:absolute; transform-origin:50% 50%; transition:opacity .22s,transform .32s cubic-bezier(.2,.8,.2,1); }
.menu-open { opacity:1; transform:rotate(0deg) scale(1); }
.menu-close { opacity:0; transform:rotate(-90deg) scale(.7); }
.menu-toggle[aria-expanded="true"] .menu-open { opacity:0; transform:rotate(90deg) scale(.7); }
.menu-toggle[aria-expanded="true"] .menu-close { opacity:1; transform:rotate(0deg) scale(1); }
.hero { min-height:min(810px,calc(100svh - 78px)); display:flex; align-items:center; position:relative; padding-block:86px 108px; }
.hero::before {
  content:""; position:absolute; z-index:-1; width:min(620px,56vw); aspect-ratio:1; right:-4%; top:2%; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 68%);
  filter:blur(5px); opacity:.85; pointer-events:none;
}
.hero-copy { width:100%; position:relative; }
.eyebrow { margin:0; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.16em; line-height:1.5; }
.hero .eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:30px; }
.eyebrow-separator { color:var(--accent); }
.hero h1 { margin:0; font-size:clamp(78px,10.5vw,138px); line-height:.98; letter-spacing:-.025em; font-weight:700; }
.hero h1 span { color:color-mix(in srgb,var(--ink) 76%,var(--muted)); }
.hero-bottom { margin-top:45px; display:flex; align-items:flex-end; justify-content:space-between; gap:48px; }
.hero-role { margin:0 0 13px; font-size:clamp(25px,3.1vw,40px); line-height:1.22; letter-spacing:-.055em; font-weight:600; }
.hero-description { max-width:530px; margin:0; color:var(--muted); font-size:17px; line-height:1.65; }
.hero-actions { width:260px; display:flex; flex-direction:column; align-items:stretch; gap:11px; flex:0 0 auto; padding-bottom:4px; }
.button { min-height:56px; padding:0 22px; border-radius:999px; gap:16px; transition:background .3s,color .3s,transform .3s,box-shadow .3s; }
.hero-actions .button { width:100%; justify-content:space-between; }
.button .icon { transition:transform .32s cubic-bezier(.2,.8,.2,1); }
.button:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.button:hover .icon { transform:translate(4px,-3px); }
.button-dark { background:var(--ink); color:var(--paper); }
.button-dark:hover { background:var(--accent); color:#151515; }
.button-dark .icon { color:var(--accent); }
.button-dark:hover .icon { color:#151515; }
.button-outline { border:1px solid var(--line); background:transparent; color:var(--ink); }
.button-outline:hover { border-color:var(--ink); background:var(--surface); }
.section-space { padding-block:148px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:50px; }
.section-heading .eyebrow { margin-bottom:18px; }
.section-heading h2 { margin:0; font-size:clamp(42px,6vw,76px); line-height:1.03; letter-spacing:-.075em; font-weight:650; }
.work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.work-card { min-width:0; overflow:hidden; border-radius:26px; background:var(--surface); border:1px solid color-mix(in srgb,var(--line) 75%,transparent); transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .3s,background-color .4s; }
.work-card-feature { display:flex; flex-direction:column; }
a.work-card { cursor:pointer; }
.work-card-feature:hover,.work-card-feature:focus-visible { transform:translateY(-6px); border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); box-shadow:var(--shadow); }
.work-copy { min-height:328px; padding:34px 34px 30px; display:flex; flex-direction:column; align-items:flex-start; }
.work-kicker { width:100%; min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.status-pill { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:12px; line-height:1.3; white-space:nowrap; }
.status-pill>span { width:7px; height:7px; border-radius:50%; background:#6ba783; box-shadow:0 0 0 3px color-mix(in srgb,#6ba783 15%,transparent); }
.project-number { color:var(--muted); font-size:12px; letter-spacing:.12em; font-weight:700; }
.work-title-row { width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:24px; }
.work-title-row h3,.work-card-compact h3 { margin:0; font-size:clamp(28px,2.7vw,35px); line-height:1.16; letter-spacing:-.045em; font-weight:650; }
.circle-link { width:42px; height:42px; flex:0 0 42px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; transition:background .3s,color .3s,transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s; }
a.work-card:hover .circle-link { background:var(--ink); color:var(--paper); border-color:var(--ink); transform:rotate(45deg); }
.circle-link-static { color:var(--muted); }
.work-card p { max-width:500px; margin:17px 0 20px; color:var(--muted); font-size:16px; line-height:1.65; }
.work-tags { margin-top:auto; color:var(--muted); font-size:13px; font-weight:600; }
.work-tags i { color:var(--accent); font-style:normal; padding-inline:4px; }
.work-card-compact { grid-column:1/-1; min-height:208px; padding:35px 40px; display:flex; flex-direction:column; justify-content:center; position:relative; background:var(--surface-soft); }
.work-card-compact::after { content:""; position:absolute; width:280px; height:280px; right:7%; top:50%; transform:translateY(-50%); border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 15%,transparent),transparent 70%); transition:transform .6s; }
.work-card-compact:hover::after { transform:translateY(-50%) scale(1.12); }
.work-card-compact .project-number,.work-card-compact h3,.work-card-compact p,.compact-bottom { position:relative; z-index:1; }
.work-card-compact h3 { margin-top:18px; }
.work-card-compact p { max-width:760px; margin:12px 0 17px; }
.compact-bottom { display:flex; justify-content:space-between; align-items:center; }
.compact-icon { width:24px; height:24px; color:var(--accent); }
.work-note { display:grid; grid-template-columns:1fr 2fr auto; align-items:center; gap:24px; padding:27px 8px 0; margin-top:22px; border-top:1px solid var(--line); }
.work-note>span { color:var(--muted); font-size:14px; }
.work-note p { margin:0; font-size:15px; }
.work-note a { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; transition:color .25s; }
.work-note a:hover { color:var(--accent); }
.work-note a .icon { transition:transform .3s; }
.work-note a:hover .icon { transform:translate(3px,-3px); }
.experience-section { background:var(--surface-soft); transition:background-color .4s; }
.experience-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:85px; }
.experience-layout .section-heading { align-self:start; margin:0; }
.experience-layout .section-heading h2 { font-size:clamp(42px,5.2vw,68px); }
.experience-list { border-top:1px solid var(--line); }
.experience-row { display:grid; grid-template-columns:120px minmax(0,1fr); column-gap:28px; row-gap:8px; padding:30px 0; border-bottom:1px solid var(--line); }
.experience-date { grid-row:span 2; color:var(--muted); font-size:14px; line-height:1.6; }
.company { margin:0 0 7px; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.11em; }
.experience-detail h3 { margin:0; font-size:25px; line-height:1.2; letter-spacing:-.05em; }
.experience-detail>p:last-child { max-width:630px; margin:12px 0 0; color:var(--muted); font-size:16px; line-height:1.65; }
.experience-place { grid-column:2; margin-top:8px; color:var(--muted); font-size:13px; }
.about-section .section-heading { margin-bottom:55px; }
.about-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:100px; align-items:start; }
.about-lead { margin:0; max-width:620px; font-size:clamp(26px,3.4vw,42px); line-height:1.28; letter-spacing:-.055em; font-weight:550; }
.about-side>p { max-width:500px; margin:4px 0 34px; color:var(--muted); font-size:16px; line-height:1.75; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding-top:22px; border-top:1px solid var(--line); }
.metrics div { display:flex; flex-direction:column; gap:5px; }
.metrics strong { font-size:31px; line-height:1.1; font-weight:650; letter-spacing:-.07em; }
.metrics span { color:var(--muted); font-size:13px; line-height:1.4; }
.expertise { display:grid; grid-template-columns:repeat(4,1fr); margin-top:105px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.expertise>div { padding:24px 20px 27px 0; }
.expertise>div+div { border-left:1px solid var(--line); padding-left:25px; }
.expertise>div>span { color:var(--accent); font-size:12px; font-weight:700; }
.expertise h3 { margin:17px 0 7px; font-size:18px; font-weight:650; letter-spacing:-.04em; }
.expertise p { margin:0; color:var(--muted); font-size:14px; }
.contact-section { min-height:440px; padding:90px 48px; margin-bottom:80px; overflow:hidden; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-radius:32px; background:#171819; color:#f6f6f4; }
.contact-section .eyebrow,.contact-section>h2,.contact-section>p,.contact-section>.button { position:relative; z-index:1; }
.contact-section .eyebrow { color:#aeb0ae; }
.contact-section>h2 { max-width:800px; margin:22px 0 12px; font-size:clamp(42px,7vw,82px); line-height:1.02; letter-spacing:-.075em; }
.contact-section>p:not(.eyebrow) { margin:0 0 28px; color:#b3b5b3; font-size:17px; }
.button-light { background:#f6f6f4; color:#161718; }
.button-light:hover { background:var(--accent); color:#141414; }
.contact-orbit { position:absolute; border-radius:50%; pointer-events:none; filter:blur(2px); transition:transform .9s cubic-bezier(.2,.8,.2,1); }
.orbit-one { width:390px; height:390px; right:-80px; top:-170px; background:radial-gradient(circle at 38% 60%,rgba(244,125,159,.24),transparent 69%); }
.orbit-two { width:300px; height:300px; left:-100px; bottom:-180px; background:radial-gradient(circle at 60% 35%,rgba(255,255,255,.09),transparent 70%); }
.contact-section:hover .orbit-one { transform:translate(-20px,18px) scale(1.08); }
.contact-section:hover .orbit-two { transform:translate(20px,-12px) scale(1.06); }
.footer { min-height:100px; padding-block:26px; display:flex; align-items:center; justify-content:space-between; gap:22px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.footer-brand { color:var(--ink); font-size:12px; }
.footer>div { display:flex; gap:22px; }
.footer a:not(.footer-brand) { color:var(--ink); }
body.is-ready .hero .eyebrow { animation:hero-enter .7s .06s both cubic-bezier(.2,.8,.2,1); }
body.is-ready .hero h1 { animation:hero-enter .85s .13s both cubic-bezier(.2,.8,.2,1); }
body.is-ready .hero-bottom { animation:hero-enter .85s .24s both cubic-bezier(.2,.8,.2,1); }
.motion-ready .reveal { opacity:0; transform:translateY(24px); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1); transition-delay:var(--reveal-delay,0ms); }
.motion-ready .reveal.is-visible { opacity:1; transform:translateY(0); }
@keyframes hero-enter { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:900px) {
  .page-shell { width:calc(100% - 56px); max-width:720px; }
  .topbar { padding-inline:28px; }
  .hero { min-height:720px; min-height:min(760px,calc(100svh - 78px)); }
  .hero h1 { font-size:clamp(76px,12vw,118px); }
  .hero-bottom { align-items:flex-start; flex-direction:column; gap:29px; }
  .section-space { padding-block:115px; }
  .work-copy { min-height:295px; padding:27px 26px 24px; }
  .experience-layout { grid-template-columns:1fr; gap:48px; }
  .experience-layout .section-heading h2 br { display:none; }
  .about-layout { gap:54px; }
  .expertise { grid-template-columns:repeat(2,1fr); }
  .expertise>div:nth-child(3) { border-left:0; padding-left:0; border-top:1px solid var(--line); }
  .expertise>div:nth-child(4) { border-top:1px solid var(--line); }
  .contact-section { min-height:380px; }
}
@media(max-width:640px) {
  html { scroll-padding-top:76px; }
  body { font-size:15px; }
  .page-shell { width:calc(100% - 40px); }
  .topbar { height:68px; padding-inline:20px; }
  .brand { font-size:12px; }
  .menu-toggle { display:grid; width:40px; height:40px; }
  .nav { position:absolute; top:calc(100% + 8px); left:16px; right:16px; padding:20px; display:flex; flex-direction:column; align-items:stretch; gap:0; border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:var(--shadow); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-9px) scale(.985); transform-origin:top right; transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1),visibility .3s; }
  .nav.is-open { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); }
  .nav>a:not(.nav-contact) { padding:13px 5px; border-bottom:1px solid var(--line); font-size:16px; }
  .nav-contact { justify-content:center; margin-top:16px; min-height:48px; }
  .hero { min-height:calc(100svh - 68px); padding-block:92px 84px; align-items:center; }
  .hero::before { width:min(100%,380px); right:0; top:4%; }
  .hero .eyebrow { margin-bottom:25px; font-size:11px; }
  .hero h1 { font-size:clamp(68px,15vw,96px); letter-spacing:-.015em; }
  .hero-bottom { margin-top:35px; gap:27px; }
  .hero-role { font-size:27px; }
  .hero-description { font-size:16px; }
  .hero-actions { width:min(100%,290px); align-items:stretch; gap:10px; }
  .button { min-height:52px; font-size:14px; }
  .section-space { padding-block:88px; }
  .section-heading { margin-bottom:30px; }
  .section-heading .eyebrow { margin-bottom:13px; }
  .section-heading h2 { font-size:clamp(39px,10vw,56px); }
  .work-grid { grid-template-columns:1fr; gap:14px; }
  .work-card { border-radius:22px; }
  .work-copy { min-height:280px; padding:24px 22px 22px; }
  .project-number { font-size:11px; }
  .work-title-row { margin-top:18px; }
  .work-title-row h3,.work-card-compact h3 { font-size:29px; }
  .circle-link { width:38px; height:38px; flex-basis:38px; }
  .work-card p { margin:13px 0 18px; font-size:15px; }
  .work-tags { font-size:12px; }
  .work-card-compact { grid-column:auto; min-height:0; padding:25px 22px; }
  .work-card-compact::after { right:-12%; }
  .compact-icon { width:20px; height:20px; }
  .work-note { grid-template-columns:1fr auto; gap:8px 15px; padding:22px 2px 0; }
  .work-note>span { font-size:13px; }
  .work-note p { grid-column:1/-1; grid-row:2; font-size:14px; }
  .work-note a { grid-column:2; grid-row:1; }
  .experience-layout { gap:30px; }
  .experience-layout .section-heading h2 { font-size:43px; }
  .experience-row { grid-template-columns:86px minmax(0,1fr); gap:8px 15px; padding:25px 0; }
  .experience-date { font-size:13px; }
  .company { font-size:10px; letter-spacing:.09em; }
  .experience-detail h3 { font-size:21px; }
  .experience-detail>p:last-child { margin-top:9px; font-size:14px; }
  .experience-place { font-size:12px; }
  .about-section .section-heading { margin-bottom:33px; }
  .about-layout { grid-template-columns:1fr; gap:25px; }
  .about-lead { font-size:30px; }
  .about-side>p { margin:0 0 27px; font-size:15px; }
  .metrics { gap:12px; padding-top:17px; }
  .metrics strong { font-size:26px; }
  .metrics span { font-size:11px; }
  .expertise { margin-top:60px; }
  .expertise>div { padding:18px 10px 21px 0; }
  .expertise>div+div { padding-left:15px; }
  .expertise>div:nth-child(3) { padding-left:0; }
  .expertise h3 { margin-top:12px; font-size:16px; }
  .expertise p { font-size:12px; }
  .contact-section { width:calc(100% - 24px); min-height:360px; padding:65px 23px; margin-bottom:48px; border-radius:26px; }
  .contact-section .eyebrow { font-size:10px; }
  .contact-section>h2 { margin-top:18px; font-size:clamp(42px,11vw,60px); }
  .contact-section>p:not(.eyebrow) { max-width:320px; font-size:15px; }
  .footer { min-height:unset; padding-block:23px; display:grid; grid-template-columns:1fr auto; gap:14px; font-size:11px; }
  .footer-brand { font-size:10px; }
  .footer>span { grid-column:1; grid-row:2; font-size:10px; }
  .footer>div { grid-column:2; grid-row:1/3; flex-direction:column; align-items:flex-end; gap:5px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .motion-ready .reveal { opacity:1; transform:none; }
}
