@font-face { font-family: Geist; src: url('../assets/fonts/Geist-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: Geist; src: url('../assets/fonts/Geist-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: Geist; src: url('../assets/fonts/Geist-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--color-bg); -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); text-transform: uppercase; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.navigation { position: absolute; inset: 0 0 auto; z-index: 5; padding: 16px var(--page-inset); }
.navigation nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.navigation a { font-size: 15px; font-weight: 500; line-height: 24px; color: var(--color-nav); }
.navigation a { font-kerning: none; white-space: nowrap; }
.nav-char { display: inline-block; position: relative; --opa: 0; }
.nav-char::after { content: ''; position: absolute; top: 0; left: 0; width: 1ch; height: 100%; background: currentColor; opacity: var(--opa); }
.theme-toggle { padding: 0; width: 24px; height: 24px; border: 0; background: none; cursor: pointer; position: relative; }
.theme-toggle::before { content: ''; position: absolute; inset: -10px; }
.theme-toggle img { display: block; opacity: 1; transition: opacity 250ms ease; }
@media (hover: hover) {
  .theme-toggle:hover img { opacity: .5; }
}
.brand { position: fixed; z-index: 4; top: calc(50svh - 12.59px); }
.brand-left { left: var(--page-inset); }
.brand-right { right: calc(var(--page-inset) + .4643px); top: calc(50svh - 12.06px); }
.brand-motion { display: block; transform-origin: center; }
.brand img { display: block; transform-origin: 0 0; }
.brand-mask, .text-mask { display: block; overflow: hidden; }
.brand-mask { overflow: visible; clip-path: inset(0 -12px -3px); }
.hero-line { display: block; white-space: nowrap; transform-origin: 0 0; }
.hero { min-height: 100svh; position: relative; isolation: isolate; overflow: clip; }
.hero-title { position: absolute; top: calc(50svh - 45px); left: 50%; transform: translateX(-50%); width: min(598px, calc(100% - 180px)); margin: 0; font-size: 24px; font-weight: 300; line-height: 1.25; letter-spacing: -.48px; text-align: center; }
html[data-theme='light'] .brand img, html[data-theme='light'] .theme-toggle img { filter: invert(1); }
.is-intro-locked { overflow: hidden; }
@media (max-width: 767px) {
  .navigation nav { gap: 12px; flex-wrap: wrap; }
  .hero-title { width: calc(100% - 112px); font-size: 20px; line-height: 1.25; letter-spacing: -.4px; top: 50svh; transform: translate(-50%,-50%); }
  .brand-left { left: var(--page-inset); }
  .brand-right { right: var(--page-inset); }
  .brand-left > .brand-motion { zoom: .65; }
  .brand-right > .brand-motion { zoom: .65; }
}


.intro-pending .navigation, .intro-pending .brand-rails, .intro-pending .hero-title { visibility: hidden; }

/* Circular root-snapshot reveal for theme changes. */
::view-transition-group(root) { animation-duration: 0s; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-transition-active::view-transition-old(root) { z-index: 1; }
html.theme-transition-active::view-transition-new(root) {
  z-index: 2;
  animation: theme-reveal-cinematic .9s cubic-bezier(1, 0, 0, 1) both;
}
@keyframes theme-reveal-cinematic {
  from {
    clip-path: circle(0 at var(--theme-transition-x) var(--theme-transition-y));
    filter: brightness(1.08) saturate(1.01) blur(.4px);
  }
  to {
    clip-path: circle(var(--theme-transition-radius) at var(--theme-transition-x) var(--theme-transition-y));
    filter: brightness(1) saturate(1) blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle img { transition: none; }
  html.theme-transition-active::view-transition-new(root) { animation: none; }
}

/* Home V2.0 — Figma 2816:5374, 1920 × 1080. */
@font-face { font-family: Geist; src: url('../assets/fonts/Geist-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Geist; src: url('../assets/fonts/Geist-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
.navigation { inset: auto 0 0; }
.navigation a { letter-spacing: -.34px; }
.hero-title { top: 20px; right: var(--page-inset); left: auto; transform: none; width: 346px; max-width: calc(100% - 48px); font-size: 12px; font-weight: 500; line-height: 20px; letter-spacing: 6.08px; text-align: right; }
.hero-title-copy { display: block; }
.hero-heading { position: absolute; left: var(--page-inset); right: var(--page-inset); bottom: 18px; margin: 0; font-weight: 600; font-size: 10.677083333vw; line-height: 1.23902439; letter-spacing: -.05em; white-space: nowrap; overflow: hidden; }
.hero-heading-line { display: block; width: max-content; transform-origin: 0 0; }
.hero-media { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-video { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.hero-media.is-ready .video-dark { opacity: 1; }
html[data-theme='light'] .hero-media.is-ready .video-dark { opacity: 0; }
html[data-theme='light'] .hero-media.is-ready .video-light { opacity: 1; }
.intro-pending .hero-heading { visibility: hidden; }
@media (max-width: 767px) {
  .hero-title { width: min(346px, calc(100% - 48px)); font-size: 12px; line-height: 18px; letter-spacing: 3px; }
  .hero-heading { font-size: 10.3vw; bottom: 74px; }
}




/* White foreground blended against the actual background pixels. */
.hero { background: var(--color-bg); }
.navigation, .brand, .hero-title, .hero-heading { mix-blend-mode: difference; color: #fff; }
.navigation a { color: #fff; }
html[data-theme='light'] .brand img, html[data-theme='light'] .theme-toggle img { filter: none; }
.hero-media { opacity: 1; }
.hero-video-curtain { position: absolute; inset: 0; background: var(--color-bg); opacity: 1; }

.slideshow-viewport { position: absolute; inset: 0; overflow: hidden; }
.slideshow-stage { position: absolute; top: 50%; left: 50%; transform-origin: center; }
.slideshow-card { position: absolute; top: 0; left: 0; overflow: hidden; background: var(--color-bg); }
.slideshow-card img, .slideshow-card video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* Natural page scroll; cards stay inside the hero. */
main { min-height: 220svh; }
.hero { position: relative; height: 100svh; }
.navigation { position: sticky; inset: 0 auto auto; margin-top: calc(-1 * var(--navigation-height, 56px)); }
@media (prefers-reduced-motion: reduce) { main { min-height: 100svh; } }

/* Split hero title; biography follows the hero in normal page flow. */
.hero-heading { inset: 0; overflow: visible; pointer-events: none; }
.hero-heading-part { position: absolute; overflow: visible; clip-path: inset(-.08em -.15em); }
.hero-heading-creative { top: max(-22px, calc(16px - .25em)); right: var(--page-inset); }
.hero-heading-designer { bottom: max(18px, calc(var(--navigation-height, 56px) + 12px - .25em)); left: var(--page-inset); }
.introduction { min-height: 100svh; display: grid; place-items: center; padding: 80px var(--page-inset); }
.introduction .hero-title { position: static; transform: none; text-align: center; }

/* Each menu label rises through its own mask, in reading order. */
.navigation a { overflow: hidden; }
.navigation a > span { display: block; }

/* Keep every mobile navigation control in an intentional, touchable row. */
@media (max-width: 480px) {
 .navigation nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 12px; }
 .navigation a { min-height: 32px; display: flex; align-items: center; }
 .navigation a:nth-child(3n + 2) { justify-self: center; }
 .navigation a:nth-child(3n) { justify-self: end; }
 .navigation .theme-toggle { justify-self: end; }
}

.mobile-menu-button,.mobile-menu-panel,.mobile-menu-bar { display:none; }
@media(max-width:767px) {
 .navigation { display:block; z-index:31; }
 .navigation > nav { display:none; }
 .mobile-menu-bar { display:flex; height:24px; align-items:center; justify-content:space-between; }
 .mobile-menu-button { display:block; position:relative; margin-right:-10px; width:44px; height:44px; padding:0; border:0; background:none; z-index:31; cursor:pointer; }
 .mobile-menu-bar .theme-toggle { position:relative; flex-shrink:0; display:grid; place-items:center; width:44px; height:44px; margin-left:-10px; }
 .mobile-menu-bar .theme-toggle::before { inset:0; }
 .mobile-menu-bar .theme-toggle img { width:24px; height:24px; }
 .mobile-menu-button,.mobile-menu-bar .theme-toggle { -webkit-tap-highlight-color:transparent; -webkit-appearance:none; appearance:none; }
 .mobile-menu-button:focus:not(:focus-visible),.mobile-menu-bar .theme-toggle:focus:not(:focus-visible) { outline:none; }
 .mobile-menu-panel:not([hidden]) { display:block; position:fixed; inset:0; z-index:20; color:#fff; }
 .mobile-menu-blur { position:absolute; inset:0; background:rgba(0,0,0,0); }
 .mobile-menu-content { position:relative; height:100%; overflow-y:auto; overscroll-behavior:contain; padding: max(76px,19vh) 24px 40px; text-align:left; }
 .mobile-menu-links { display:flex; flex-direction:column; align-items:flex-start; }
 .mobile-menu-links a { display:block; overflow:hidden; padding-right:.2em; margin-right:-.2em; font-size:15vw; font-weight:500; line-height:1; letter-spacing:-.055em; }
 .mobile-menu-links span { display:block; }
 .mobile-menu-contact { margin-top:9vh; }
 .mobile-menu-socials { margin-top:24px; }
 .mobile-menu-contact a,.mobile-menu-socials a { display:block; font-size:12px; line-height:1.9; }
 .mobile-menu-open { overflow:hidden; }
 .intro-pending .mobile-menu-button { visibility:hidden; }
}



.mobile-menu-contact a,.mobile-menu-socials a { overflow:hidden; }
.mobile-menu-contact a > span,.mobile-menu-socials a > span { display:block; }

/* Mobile side marks belong to the hero and scroll away with the page. */
@media (max-width: 767px) { .brand { position: absolute; } }

.mobile-burger-icon { display:block; width:100%; height:100%; }
@media(max-width:767px) { .mobile-menu-button,.mobile-menu-bar .theme-toggle { overflow:hidden; } }

@media(max-width:767px) { .mobile-menu-button { touch-action:manipulation; } }

.mobile-menu-panel a > span { position:relative; }
.mobile-menu-panel .menu-char-mask { display:inline-block; overflow:hidden; vertical-align:top; padding-inline:.18em; margin-inline:-.18em; }
.mobile-menu-panel .menu-char { display:block; position:relative; }
.mobile-menu-panel .menu-char::after { content:attr(data-roll-text); position:absolute; left:0; top:100%; white-space:pre; pointer-events:none; }

@media(max-width:767px) {
 .mobile-menu-bar.pointer-interaction button:focus,
 .mobile-menu-bar.pointer-interaction button:focus-visible { outline:none; box-shadow:none; }
}

.mobile-burger-icon { position:relative; }
.mobile-burger-line { position:absolute; left:10px; top:21px; width:24px; height:2px; background:currentColor; transform-origin:center; }
.mobile-menu-button { color:inherit; }


@media(max-width:767px) {
 .mobile-theme-placeholder { flex:0 0 44px; height:44px; margin-left:-10px; }
 .mobile-theme-covered { position:fixed; z-index:19; width:44px; height:44px; margin:0; display:grid; place-items:center; pointer-events:none; mix-blend-mode:difference; }
 .mobile-theme-covered img { width:24px; height:24px; }
}

/* Decorative letter shuffling must never replace the click target. */
.navigation a > span, .navigation a .nav-char { pointer-events: none; }