@font-face {
  font-family: "Geist";
  src: url("./fonts/geist-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("./fonts/geist-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/geist-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #fff;
  --ink: #171717;
  --muted: #858585;
  --dark: #090a08;
  --line: #dedede;
  --project-divider: #ececec;
  --project-meta: #6b6b6b;
  --page-background: var(--paper);
  --page-foreground: var(--ink);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --theme-transition: 900ms var(--ease);
  --gutter: 24px;
  --hero-top-offset: 24px;
  --menu-height: 66px;
  --hero-right-inset: calc(var(--gutter) + 5px);
  --hero-meta-bottom: calc(max(24px, env(safe-area-inset-bottom)) + 19px);
  --hero-social-bottom: calc(max(8px, env(safe-area-inset-bottom), var(--hero-meta-bottom) - 25px) + 10px);
  font-family: "Geist", Arial, sans-serif;
  font-synthesis: none;
  color: var(--page-foreground);
  background-color: var(--page-background);
  -webkit-font-smoothing: antialiased;
}

:root.is-dark-theme { --page-background: var(--dark); --page-foreground: #f7f7f7; --line: #353535; --project-divider: #303030; --project-meta: #b6b6b6; }
html.has-scroll-theme { transition: background-color var(--theme-transition), color var(--theme-transition); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hero-top-offset) + var(--menu-height) + 18px); }
html.lenis { scroll-behavior: auto; }
body { margin: 0; letter-spacing: 0; }
body.menu-open { overflow: hidden; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
img, video { display: block; width: 100%; }
h1, h2, h3, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, a { touch-action: manipulation; }
::selection { background: #dfff78; color: #171717; }
:focus-visible { outline: 2px solid #85a500; outline-offset: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 14px 18px; background: white; color: black; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.entry-loader { display: none; }
html.is-entering .entry-loader { display: grid; position: fixed; z-index: 100; inset: 0; place-items: center; background: #11161d; pointer-events: none; }
.entry-loader-content { display: grid; justify-items: center; gap: 22px; width: min(220px, 48vw); }
.entry-loader img { width: 90px; filter: invert(1); animation: entry-logo-in .45s var(--ease) both; }
.entry-loader-track { width: 100%; height: 2px; overflow: hidden; background: rgb(255 255 255 / .18); }
.entry-loader-track span { display: block; width: 100%; height: 100%; background: #fff; transform: scaleX(var(--loader-progress, .08)); transform-origin: left; transition: transform .3s var(--ease); }
html.is-ready .entry-loader-content { animation: entry-logo-out .32s ease-in both; }
html.is-ready .entry-loader { animation: entry-cover-out .64s var(--ease) .32s both; }
@keyframes entry-logo-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes entry-logo-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes entry-cover-out { from { opacity: 1; } to { opacity: 0; } }

.hero { position: relative; height: 100vh; height: 100dvh; overflow: hidden; color: white; isolation: isolate; background: #626b70; }
.hero-media { position: absolute; z-index: -2; inset: 0; }
.hero-video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; filter: saturate(.65) brightness(.81) contrast(1.045); }
.hero-media::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -12px;
  pointer-events: none;
  background: url("./assets/hero-video-noise.svg") repeat;
  background-size: 160px 160px;
  mix-blend-mode: soft-light;
  opacity: .20;
  animation: hero-video-noise .8s steps(1, end) infinite;
}
.hero-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 37% -12px auto;
  height: 12px;
  pointer-events: none;
  background:
    linear-gradient(to right, transparent 8%, rgb(111 214 232 / .24) 8% 69%, transparent 69%) 0 2px / 100% 1px no-repeat,
    linear-gradient(to right, transparent 26%, rgb(228 121 154 / .19) 26% 91%, transparent 91%) 0 7px / 100% 1px no-repeat,
    linear-gradient(to bottom, transparent, rgb(0 0 0 / .15) 50%, transparent);
  backdrop-filter: contrast(1.2) saturate(1.28);
  opacity: 0;
  animation: hero-display-glitch 11s steps(1, end) -7s infinite;
}
@keyframes hero-video-noise {
  0%, to { transform: translate(0, 0); }
  12.5% { transform: translate(-7px, 3px); }
  25% { transform: translate(4px, -8px); }
  37.5% { transform: translate(9px, 6px); }
  50% { transform: translate(-3px, -4px); }
  62.5% { transform: translate(6px, 2px); }
  75% { transform: translate(-9px, 8px); }
  87.5% { transform: translate(2px, -7px); }
}
@keyframes hero-display-glitch {
  0%, 82.8%, to { opacity: 0; }
  81% { opacity: .75; transform: translateX(9px); }
  81.7% { opacity: 0; }
  82% { opacity: .5; transform: translate(-7px, 23vh) scaleY(.65); }
}
.hero-top { position: absolute; inset: 0; font-size: 14px; line-height: 1.4; pointer-events: none; }
.hero-socials { position: absolute; left: var(--gutter); bottom: var(--hero-social-bottom); display: flex; align-items: center; gap: calc(clamp(4px, .8vw, 12px) - 3px); pointer-events: auto; }
.hero-socials a { display: grid; place-items: center; width: 34px; height: 34px; transition: transform .25s var(--ease); }
.hero-socials a:hover { transform: translateY(-1px); }
.hero-socials img { height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.hero-socials .medium-icon { width: 26px; height: 26px; filter: none; }
.hero-profile { position: absolute; top: calc(var(--hero-top-offset) - 10px); right: var(--hero-right-inset); display: flex; align-items: center; min-height: var(--menu-height); }
.local-time { display: grid; grid-template-areas: "role region" "clock clock"; grid-template-columns: 1fr auto; justify-items: end; row-gap: 4px; text-align: right; font-variant-numeric: tabular-nums; }
.profile-location { grid-area: role; text-wrap: balance; }
.profile-region { grid-area: region; display: flex; white-space: nowrap; }
.local-time time { grid-area: clock; white-space: nowrap; }
.profile-divider { order: -1; margin-inline: .35em; opacity: .6; }

.section-label { display: flex; align-items: center; align-self: start; gap: 12px; font-size: 15px; font-weight: 400; line-height: 1.4; }
.label-dot { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #eee; color: #252525; flex: 0 0 auto; padding-bottom: 5px; }
.intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 28px 0 164px; }
.intro-content { grid-column: 2; padding-inline: var(--gutter); }
.intro .section-label { position: relative; top: 20px; min-height: 30px; }
.intro .label-dot { width: 24px; height: 24px; border-radius: 6px; }
.statement { font-size: 47px; line-height: 1.15; font-weight: 400; text-wrap: pretty; }
.intro .statement { max-width: 670px; margin-top: 136px; font-size: 54px; line-height: 1.04; text-indent: min(32%, 212px); }
.intro-details { display: grid; gap: 24px; max-width: 400px; margin-top: 50px; font-size: 18px; line-height: 1.42; color: #343434; }

.work-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 44px var(--gutter); border-top: 1px solid var(--line); transition: border-color var(--theme-transition); }
.work-heading h2 { font-size: 15px; font-weight: 400; }
.work-heading > span { font-size: 13px; color: var(--project-meta); transition: color var(--theme-transition); }
.project-row { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 620px; transition: border-color var(--theme-transition); }
.project-row::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--project-divider); transition: background-color var(--theme-transition); pointer-events: none; }
.project-visual { display: block; position: relative; min-width: 0; overflow: hidden; background: #e8e8e8; }
.project-image { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform 1.2s var(--ease); }
.project-view { position: absolute; left: 27px; top: 24px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 999px; background: white; color: #151515; font-size: 13px; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.project-view-arrow { width: 16px; height: 16px; transform: translateY(-.5px); }
.project-visual:hover .project-view, .project-visual:focus-visible .project-view { opacity: 1; transform: none; }
.project-copy { display: flex; flex-direction: column; justify-content: space-between; padding: 33px calc(var(--gutter) + 5px) 33px 35px; }
.project-number { font-size: 13px; color: var(--project-meta); transition: color var(--theme-transition); }
.project-caption { max-width: 540px; width: 100%; }
.project-summary { max-width: 470px; font-size: 27px; line-height: 1.27; margin-bottom: 54px; text-wrap: pretty; }
.project-name { display: block; }
.project-name h3 { font-size: 17px; line-height: 1.3; font-weight: 400; }
.project-name p { margin-top: 4px; color: var(--project-meta); font-size: 15px; line-height: 1.4; transition: color var(--theme-transition); }
.project-row-reverse .project-visual { grid-column: 2; grid-row: 1; }
.project-row-reverse .project-copy { grid-column: 1; grid-row: 1; align-items: flex-end; padding: 33px 35px 33px calc(var(--gutter) + 5px); text-align: right; }
.project-row-reverse .project-caption { display: flex; flex-direction: column; align-items: flex-end; }
.project-row-reverse .project-name { width: 100%; }

@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .project-row { border-top: 1px solid var(--project-divider); }
  .project-visual { background: transparent; }
  .project-image { opacity: 0; transform: scale(1.04); transition: opacity .45s var(--ease), transform .85s var(--ease); }
  .project-summary { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .6s var(--ease); }
  .project-row:is(:hover, :focus-within) .project-image,
  .project-row:is(:hover, :focus-within) .project-summary,
  .project-row:is(:hover, :focus-within) .project-view { opacity: 1; transform: none; }
}

.testimonials { padding: 110px var(--gutter) 115px; background: var(--dark); color: #f7f7f7; }
html.has-scroll-theme .testimonials { background: transparent; color: inherit; }
.testimonial-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 26px; }
.testimonial-header h2 { font-size: 48px; font-weight: 400; line-height: 1.12; }
.quote-controls { display: flex; align-items: center; gap: 8px; }
.quote-position { min-width: 64px; margin-right: 6px; color: #aaa; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote-controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #515151; border-radius: 50%; background: transparent; transition: background .25s var(--ease), border-color .25s var(--ease); }
.quote-controls button:not(:disabled):hover { background: #333; border-color: #757575; }
.quote-controls button:disabled { opacity: .38; cursor: default; }
.quote-controls img { width: 20px; height: 20px; filter: invert(1); }
.has-scroll-theme:not(.is-dark-theme) .quote-position { color: #656565; }
.has-scroll-theme:not(.is-dark-theme) .quote-controls img { filter: none; }
.has-scroll-theme:not(.is-dark-theme) .quote-controls button:not(:disabled):hover { background: #e8e8e8; }
.quote-previous img { transform: rotate(180deg); }
.quotes-viewport { margin-top: 44px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.quotes-viewport::-webkit-scrollbar { display: none; }
.quotes-viewport.is-draggable { overflow: hidden; scroll-snap-type: none; touch-action: pan-y pinch-zoom; cursor: grab; user-select: none; }
.quotes-viewport.has-drag-cursor { cursor: none; }
.quotes { --quotes-per-view: 3; --quote-gap: 20px; display: flex; gap: var(--quote-gap); }
.quote { display: flex; flex: 0 0 calc((100% - (var(--quotes-per-view) - 1) * var(--quote-gap)) / var(--quotes-per-view)); min-width: 0; min-height: 320px; flex-direction: column; justify-content: space-between; gap: 40px; padding: 34px; border-radius: 20px; background: #171717; color: #f7f7f7; scroll-snap-align: start; }
.quote-cursor { position: fixed; z-index: 50; top: 0; left: 0; display: flex; align-items: center; justify-content: center; gap: 4px; width: 72px; height: 72px; border-radius: 50%; background: #edff40; pointer-events: none; opacity: 0; translate: var(--cursor-x, 0px) var(--cursor-y, 0px); transform: translate(-50%, -50%) scale(var(--cursor-scale, .45)); transition: opacity .2s var(--ease), transform .24s var(--ease); }
.quote-cursor.is-visible { opacity: 1; --cursor-scale: 1; transition: opacity .22s var(--ease), transform .46s cubic-bezier(.34, 1.5, .64, 1); }
.quote-cursor.is-grabbing { --cursor-scale: .92; }
.quote-cursor img { width: 20px; height: 20px; }
.quote-cursor img:first-child { transform: rotate(180deg); }
.quote blockquote { margin: 0; font-size: 20px; line-height: 1.45; font-weight: 400; }
.quote figcaption { display: flex; align-items: center; gap: 14px; font-size: 14px; line-height: 1.4; }
.quote-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 8px; background: #e6e6e3; color: #181818; font-size: 12px; }
.quote figcaption small { display: block; margin-top: 2px; font-size: 13px; color: #b1b1b1; }

.navigation-dock { position: fixed; z-index: 60; top: var(--hero-top-offset); left: var(--gutter); width: 300px; color: white; }
.menu-toggle, .menu-panel { background: #202020; }
.menu-toggle { --chip-height: 36px; border: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 26px 100px; align-items: center; text-align: left; gap: 12px; padding: 10px calc((var(--menu-height) - var(--chip-height)) / 2) 10px 22px; min-height: var(--menu-height); border-radius: 999px; font-size: 13px; box-shadow: 0 3px 18px rgba(0,0,0,.09); transition: background-color .3s ease, box-shadow .3s ease; }
.menu-logo { width: min(58.14px, 76.5%); height: auto; filter: invert(1); }
.menu-location { display: grid; place-items: center; min-height: var(--chip-height); background: white; color: #151515; border-radius: 999px; }
.menu-symbol { display: grid; gap: 4px; width: 21px; }
.menu-symbol i { display: block; width: 21px; height: 1px; background: #c8c8c8; transition: transform .4s var(--ease), opacity .4s var(--ease), background-color .3s ease; }
.is-over-hero .menu-toggle, .is-over-hero .menu-panel { background: rgb(255 255 255 / .05); -webkit-backdrop-filter: blur(36px); backdrop-filter: blur(36px); }
.is-over-hero .menu-toggle { box-shadow: none; }
.is-over-hero .menu-symbol i { background: #f7f7f7; }
.menu-toggle[aria-expanded="true"] .menu-symbol i:first-child { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-symbol i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-symbol i:last-child { transform: translateY(-5px) rotate(-45deg); }
.menu-panel { position: absolute; left: 0; top: calc(var(--menu-height) + 12px); width: min(300px, calc(100vw - 2 * var(--gutter))); max-height: calc(100dvh - var(--hero-top-offset) - var(--menu-height) - 32px); overflow-y: auto; padding: 26px; border-radius: 8px; transition: background-color .3s ease; animation: menu-in .4s var(--ease) both; }
.menu-panel nav { display: grid; gap: 14px; }
.menu-label { font-family: "Geist Mono", monospace; font-size: 12px; color: #aaa; margin-bottom: 6px; }
.menu-panel nav a { width: fit-content; font-size: 24px; transition: color .25s; }
.menu-panel a:hover { color: #dfff78; }
.menu-bottom { margin-top: 23px; padding-top: 27px; border-top: 1px solid rgb(255 255 255 / .2); }
.menu-bottom > div { display: flex; flex-wrap: wrap; gap: 9px 22px; margin-top: 16px; }
.menu-bottom a { font-size: 14px; }
.menu-backdrop { position: fixed; z-index: 50; inset: 0; background: rgba(0,0,0,.25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: backdrop-in .3s both; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
html.motion-enabled .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.motion-enabled .reveal.is-visible { opacity: 1; transform: none; }
html.is-entering .hero-top { opacity: 0; }
html.is-entering:not(.is-ready) .navigation-dock { visibility: hidden; }
html.is-entering.is-ready .hero-top { animation: content-in .88s var(--ease) .5s both; }
html.is-entering.is-ready .navigation-dock { animation: entry-dock-in .78s var(--ease) .42s both; }
@keyframes content-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
@keyframes entry-dock-in {
  from { opacity: 0; visibility: hidden; transform: translateY(calc(-1 * (var(--hero-top-offset) + var(--menu-height)))); }
  to { opacity: 1; visibility: visible; transform: none; }
}

@media (min-width: 1900px) {
  .project-row { min-height: 760px; }
  .statement { font-size: 54px; }
}

@media (max-width: 1440px) {
  .statement { font-size: 42px; }
  .intro .statement { font-size: 48px; }
  .project-row { min-height: 540px; }
  .project-summary { font-size: 25px; }
}

@media (max-width: 1100px) {
  .statement { font-size: 36px; }
  .intro { padding-bottom: 144px; }
  .intro .statement { margin-top: 116px; font-size: 39px; text-indent: 24%; }
  .intro-details { font-size: 17px; }
  .project-row { min-height: 440px; }
  .project-summary { font-size: 22px; margin-bottom: 40px; }
  .project-copy, .project-row-reverse .project-copy { padding: 29px; }
  .quotes { --quotes-per-view: 2; }
  .quote { padding: 28px; }
  .quote blockquote { font-size: 18px; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; --menu-height: 62px; --hero-social-bottom: max(26px, calc(env(safe-area-inset-bottom) + 8px)); }
  .hero-socials { gap: 2px; }
  .intro { grid-template-columns: minmax(0, 1fr); padding: 42px 0 110px; }
  .intro-content { grid-column: 1; }
  .statement { font-size: 32px; line-height: 1.17; }
  .intro .statement { margin-top: 84px; font-size: 34px; line-height: 1.12; text-indent: min(19%, 58px); }
  .intro-details { margin-top: 40px; gap: 22px; font-size: 16px; }
  .work-heading { padding-top: 42px; padding-bottom: 42px; }
  .work-heading > span { font-size: 11px; }
  .project-row { grid-template-columns: 1fr; min-height: 0; }
  .project-row::after { display: none; }
  .project-visual, .project-row-reverse .project-visual { grid-column: 1; grid-row: auto; aspect-ratio: 1.2; }
  .project-copy, .project-row-reverse .project-copy { grid-column: 1; grid-row: auto; text-align: left; align-items: stretch; padding: 31px calc(var(--gutter) + 5px) 51px; gap: 24px; }
  .project-row-reverse .project-caption { align-items: flex-start; }
  .project-caption { max-width: none; }
  .project-summary { font-size: 25px; margin-bottom: 32px; max-width: 560px; }
  .project-number { font-size: 11px; }
  .project-name h3 { font-size: 17px; }
  .project-view { display: none; }
  .testimonials { padding-top: 66px; padding-bottom: 70px; }
  .testimonial-header h2 { font-size: 36px; }
  .quotes-viewport { margin-top: 28px; }
  .quotes { --quotes-per-view: 1; --quote-gap: 14px; }
  .quote { min-height: 300px; padding: 24px; gap: 26px; }
  .quote blockquote { font-size: 19px; }
  .navigation-dock { width: 284px; }
}

@media (max-width: 600px) {
  :root { --mobile-menu-width: 144px; }
  .navigation-dock { width: var(--mobile-menu-width); }
  .menu-toggle { grid-template-columns: minmax(0, 1fr) 21px; gap: 8px; padding-inline: 24px; }
  .menu-logo { width: min(48.96px, 100%); }
  .menu-location { display: none; }
  .hero-profile {
    top: auto;
    bottom: max(32px, calc(env(safe-area-inset-bottom) + 22px));
    left: var(--gutter);
    right: calc(var(--hero-right-inset) + 6px);
    min-height: 0;
    justify-content: flex-end;
  }
  .local-time { grid-template-areas: "role role" "region clock"; }
  .profile-divider { order: 0; margin-inline: .6em; }
  .hero-socials { display: none; }
}

@media (max-width: 520px) {
  .hero-video { object-position: 49% center; }
  .statement { font-size: 29px; }
  .intro .statement { font-size: 30px; }
}

@media (max-width: 360px) {
  .statement { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  html.motion-enabled .reveal { opacity: 1; transform: none; }
  .hero-video { object-position: 50% 58%; }
  .hero-media::before, .hero-media::after { display: none; }
}