@import url('/site/typography.css');
:root {
  --v3-void: oklch(11% .012 255);
  --v3-graphite: oklch(22% .018 250);
  --v3-surface: oklch(28% .018 250);
  --v3-pearl: oklch(97% .008 260);
  --v3-fog: oklch(76% .018 250);
  --v3-line: oklch(43% .018 250);
  --v3-cyan: oklch(86% .13 210);
  --v3-rose: oklch(76% .16 10);
  --v3-lime: oklch(91% .16 125);
  --v3-pad: 30px;
  --v3-ease: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; color: var(--v3-pearl); background: var(--v3-void); font-family: var(--font-body); letter-spacing: 0; }
body.v3-menu-open { overflow: hidden; }
img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: 0; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 400; letter-spacing: 0; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--v3-cyan); outline-offset: 4px; }
.v3-skip { position: fixed; left: 12px; top: -60px; z-index: 90; padding: 12px; color: var(--v3-void); background: var(--v3-pearl); }
.v3-skip:focus { top: 12px; }
.v3-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 80; height: 2px; background: transparent; }
.v3-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--v3-cyan), var(--v3-pearl), var(--v3-rose), var(--v3-lime)); transform: scaleX(var(--progress,0)); transform-origin: left; }

.v3-nav { height: 78px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; padding-inline: var(--v3-pad); color: var(--v3-pearl); background: var(--v3-void); border-bottom: 1px solid var(--v3-line); }
.v3-brand img { width: 118px; height: 44px; object-fit: contain; object-position: left center; }
.v3-nav nav { display: flex; gap: 38px; font-size: 13px; }
.v3-nav nav a { position: relative; padding-block: 10px; }
.v3-nav nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 1px; background: linear-gradient(90deg, var(--v3-cyan), var(--v3-rose)); transform: scaleX(0); transform-origin: right; transition: transform 260ms var(--v3-ease); }
.v3-nav nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.v3-nav-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.v3-nav-actions > button:first-child { border: 0; color: var(--v3-fog); background: transparent; font-size: 11px; }
.v3-action, .v3-prism-button { position: relative; overflow: hidden; min-height: 42px; display: inline-flex; align-items: center; justify-content: space-between; gap: 34px; padding: 10px 16px; border: 1px solid var(--v3-line); border-radius: 4px; isolation: isolate; font-size: 12px; }
.v3-action::before, .v3-prism-button::before { content: ""; position: absolute; inset: -80% -35%; z-index: -1; background: linear-gradient(108deg, transparent 30%, var(--v3-cyan) 43%, var(--v3-pearl) 50%, var(--v3-rose) 57%, transparent 70%); transform: translateX(-70%) rotate(-8deg); transition: transform 620ms var(--v3-ease); opacity: .72; }
.v3-action:hover::before, .v3-prism-button:hover::before { transform: translateX(70%) rotate(-8deg); }
.v3-menu { display: none; width: 42px; height: 42px; border: 1px solid var(--v3-line); background: transparent; padding: 10px; }
.v3-menu i { display: block; height: 1px; margin: 5px 0; background: var(--v3-pearl); }

.v3-hero { position: relative; height: calc(100svh - 78px); min-height: 620px; max-height: 860px; overflow: hidden; background: var(--v3-void); }
.v3-hero-image { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: center 52%; filter: brightness(.58) saturate(.8) contrast(1.08); }
.v3-hero-veil { position: absolute; inset: 0; background: linear-gradient(90deg, oklch(8% .01 255 / .88) 0%, transparent 45%, oklch(8% .01 255 / .3) 100%); }
.v3-prism-beam { position: absolute; left: -10%; top: 42%; width: 125%; height: 21%; background: linear-gradient(102deg, transparent 25%, oklch(86% .13 210 / .02) 38%, oklch(86% .13 210 / .4) 44%, oklch(97% .008 260 / .78) 49%, oklch(76% .16 10 / .38) 54%, oklch(91% .16 125 / .08) 60%, transparent 72%); transform: rotate(-9deg); mix-blend-mode: screen; filter: blur(3px); pointer-events: none; }
.v3-prism-lens { position: absolute; right: 16%; top: 15%; width: 34%; aspect-ratio: 1.25; border: 1px solid oklch(95% .04 220 / .5); transform: translate3d(var(--lens-x,0),var(--lens-y,0),0) rotate(-5deg); transform-style: preserve-3d; backdrop-filter: blur(1px) saturate(1.35) contrast(1.08); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / .12); transition: transform 180ms var(--v3-ease); pointer-events: none; }
.v3-prism-lens::before { content: ""; position: absolute; inset: 0; background: linear-gradient(112deg, transparent 10%, oklch(86% .13 210 / .12) 34%, oklch(97% .008 260 / .28) 48%, oklch(76% .16 10 / .15) 61%, transparent 85%); mix-blend-mode: screen; }
.v3-prism-lens i { position: absolute; display: block; background: oklch(98% .02 220 / .42); }
.v3-prism-lens i:first-child { left: 22%; top: 0; bottom: 0; width: 1px; }
.v3-prism-lens i:nth-child(2) { left: 0; right: 0; top: 67%; height: 1px; }
.v3-prism-lens i:last-child { right: 18px; top: 18px; width: 8px; height: 8px; background: var(--v3-lime); box-shadow: -14px 8px 0 var(--v3-cyan), -7px 20px 0 var(--v3-rose); }
.v3-hero-copy { position: absolute; left: var(--v3-pad); bottom: 76px; z-index: 2; width: 61%; }
.v3-hero-copy > p, .v3-glass-readout > span, .v3-system-copy > span, .v3-making-copy > span, .v3-contact > p { font: 10px var(--font-utility); }
.v3-hero-copy h1 { margin: 5px 0 0; font-size: 118px; font-weight: 300; line-height: .86; }
.v3-hero-line { display: grid; grid-template-columns: 1.25fr .75fr; gap: 58px; align-items: end; margin-top: 28px; padding-top: 20px; border-top: 1px solid oklch(92% .02 240 / .45); }
.v3-hero-line h2 { margin: 0; font-size: 52px; line-height: .95; }
.v3-hero-line p { max-width: 360px; margin: 0 0 5px; color: var(--v3-fog); font-size: 16px; line-height: 1.45; }
.v3-glass-readout { position: absolute; right: var(--v3-pad); bottom: 80px; z-index: 3; width: 245px; padding: 19px; border: 1px solid oklch(93% .02 250 / .38); border-radius: 7px; background: oklch(17% .016 250 / .72); backdrop-filter: blur(16px) saturate(1.1); }
.v3-glass-readout > span { color: var(--v3-cyan); }
.v3-glass-readout > strong { display: block; margin: 18px 0 26px; font-weight: 400; }
.v3-glass-readout dl { margin: 0; }
.v3-glass-readout dl div { display: flex; justify-content: space-between; gap: 16px; padding-block: 7px; border-top: 1px solid oklch(75% .02 250 / .25); font-size: 10px; }
.v3-glass-readout dt { color: var(--v3-fog); }
.v3-glass-readout dd { margin: 0; }
.v3-hero-index { position: absolute; left: var(--v3-pad); right: var(--v3-pad); bottom: 22px; z-index: 3; display: grid; grid-template-columns: 50px 1fr auto; gap: 18px; color: var(--v3-fog); font: 9px var(--font-utility); }
.v3-hero-index b { font-weight: 400; }

.v3-intro { position: relative; min-height: 760px; overflow: hidden; padding: 120px var(--v3-pad); background: var(--v3-void); }
.v3-intro-light { position: absolute; left: -15%; right: -15%; top: 36%; height: 22%; background: linear-gradient(96deg, transparent 20%, oklch(86% .13 210 / .08), oklch(97% .008 260 / .34), oklch(76% .16 10 / .13), transparent 80%); transform: rotate(4deg); filter: blur(16px); }
.v3-intro-kicker { position: relative; z-index: 1; color: var(--v3-cyan); font: 10px var(--font-utility); }
.v3-intro h2 { position: relative; z-index: 1; max-width: 1120px; margin: 120px 0 0; font-size: 76px; line-height: .98; }
.v3-intro h2 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px var(--v3-fog); }
.v3-intro-copy { position: absolute; right: var(--v3-pad); bottom: 90px; z-index: 1; width: 31%; }
.v3-intro-copy p { color: var(--v3-fog); font-size: 17px; line-height: 1.55; }
.v3-line-link { display: flex; justify-content: space-between; gap: 24px; margin-top: 34px; padding-block: 14px; border-top: 1px solid var(--v3-line); font-size: 12px; }

.v3-systems { padding: 110px var(--v3-pad); color: var(--v3-void); background: var(--v3-pearl); }
.v3-systems > header { display: grid; grid-template-columns: .6fr 1.4fr; gap: 50px; align-items: start; margin-bottom: 70px; }
.v3-systems > header > span { font: 10px var(--font-utility); }
.v3-systems > header h2 { margin: 0; font-size: 64px; line-height: .98; }
.v3-system-switcher { display: grid; grid-template-columns: 230px minmax(0,1.5fr) minmax(260px,.55fr); min-height: 670px; border-top: 1px solid oklch(40% .015 250); border-bottom: 1px solid oklch(40% .015 250); }
.v3-system-tabs { display: flex; flex-direction: column; border-right: 1px solid oklch(70% .015 250); }
.v3-system-tabs button { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 22px 0; border: 0; border-bottom: 1px solid oklch(80% .012 250); text-align: left; background: transparent; cursor: pointer; }
.v3-system-tabs button span { font: 10px var(--font-utility); }
.v3-system-tabs button[aria-selected="true"] { color: oklch(54% .2 260); }
.v3-system-tabs button[aria-selected="true"]::after { content: ""; width: 62px; height: 2px; margin-top: 9px; background: linear-gradient(90deg, var(--v3-cyan), var(--v3-rose)); }
.v3-system-visual { position: relative; overflow: hidden; margin: 22px; background: var(--v3-void); transform: perspective(1200px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)); transition: transform 220ms var(--v3-ease); }
.v3-system-visual > img { height: 100%; object-fit: cover; transition: opacity 220ms ease, transform 700ms var(--v3-ease); }
.v3-system-visual:hover > img { transform: scale(1.018); }
.v3-image-spectrum { position: absolute; inset: 0; background: linear-gradient(112deg, transparent 28%, oklch(86% .13 210 / .28) 41%, oklch(97% .008 260 / .55) 48%, oklch(76% .16 10 / .28) 55%, transparent 69%); transform: translateX(-80%); mix-blend-mode: screen; transition: transform 820ms var(--v3-ease); }
.v3-system-visual:hover .v3-image-spectrum { transform: translateX(75%); }
.v3-system-code { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; justify-content: space-between; padding: 12px; color: var(--v3-pearl); background: oklch(13% .01 250 / .76); backdrop-filter: blur(12px); font: 9px var(--font-utility); }
.v3-system-copy { display: flex; flex-direction: column; justify-content: flex-end; padding: 30px 0 32px 26px; }
.v3-system-copy > span { color: oklch(45% .02 250); }
.v3-system-copy h3 { margin: 65px 0 18px; font-size: 42px; line-height: 1.02; }
.v3-system-copy > p { color: oklch(40% .02 250); line-height: 1.55; }
.v3-prism-button { width: max-content; margin-top: 38px; border-color: oklch(44% .02 250); }

.v3-projects { padding: 110px var(--v3-pad); background: var(--v3-graphite); }
.v3-projects > header { display: grid; grid-template-columns: .55fr 1.45fr; gap: 40px; margin-bottom: 60px; }
.v3-projects > header > p { color: var(--v3-cyan); font: 10px var(--font-utility); }
.v3-projects > header h2 { margin: 0; font-size: 68px; line-height: .95; }
.v3-project-rail { display: grid; grid-template-columns: 1.28fr .72fr; grid-template-rows: 1fr 1fr; gap: 13px; }
.v3-project { position: relative; overflow: hidden; min-height: 330px; border: 1px solid var(--v3-line); border-radius: 7px; background: var(--v3-void); }
.v3-project-main { grid-row: 1 / 3; }
.v3-project img { height: 100%; min-height: 330px; object-fit: cover; filter: saturate(.82) contrast(1.05); transition: transform 800ms var(--v3-ease), filter 350ms ease; }
.v3-project-main img { min-height: 675px; }
.v3-project > span { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; padding: 14px; background: oklch(12% .01 250 / .8); backdrop-filter: blur(12px); font-size: 11px; }
.v3-project > span b, .v3-project > span i { color: var(--v3-fog); font-style: normal; font-weight: 400; }
.v3-project:hover img { transform: scale(1.035); filter: saturate(1.08) contrast(1.06); }
.v3-project::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, oklch(86% .13 210 / .18), oklch(76% .16 10 / .12), transparent 68%); transform: translateX(-100%); mix-blend-mode: screen; transition: transform 800ms var(--v3-ease); pointer-events: none; }
.v3-project:hover::after { transform: translateX(100%); }
.v3-gallery-control { display: grid; grid-template-columns: 90px 1fr 46px 46px; align-items: center; gap: 10px; margin-top: 22px; font: 10px var(--font-utility); }
.v3-gallery-control > div { height: 1px; background: var(--v3-line); }
.v3-gallery-control > div i { display: block; width: 33%; height: 1px; background: linear-gradient(90deg,var(--v3-cyan),var(--v3-rose)); }
.v3-gallery-control button { height: 42px; border: 1px solid var(--v3-line); border-radius: 4px; background: transparent; cursor: pointer; }

.v3-making { display: grid; grid-template-columns: 1.4fr .6fr; min-height: 820px; background: var(--v3-void); }
.v3-making-media { position: relative; overflow: hidden; }
.v3-making-media > img { height: 100%; object-fit: cover; filter: grayscale(.4) brightness(.72) contrast(1.16); }
.v3-making-media > span { position: absolute; left: 24px; bottom: 22px; font: 9px var(--font-utility); }
.v3-scan-light { position: absolute; left: -20%; top: 0; width: 22%; height: 100%; background: linear-gradient(90deg, transparent, oklch(86% .13 210 / .3), oklch(97% .008 260 / .62), oklch(76% .16 10 / .25), transparent); transform: skewX(-10deg); mix-blend-mode: screen; animation: v3-scan 7s var(--v3-ease) infinite; }
@keyframes v3-scan { 0%,15% { transform: translateX(-20vw) skewX(-10deg); } 70%,100% { transform: translateX(120vw) skewX(-10deg); } }
.v3-making-copy { padding: 70px 36px; background: var(--v3-graphite); }
.v3-making-copy > span { color: var(--v3-cyan); }
.v3-making-copy h2 { margin: 90px 0 25px; font-size: 62px; line-height: .95; }
.v3-making-copy > p { color: var(--v3-fog); line-height: 1.55; }
.v3-making-copy ul { margin: 50px 0 0; padding: 0; list-style: none; }
.v3-making-copy li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding-block: 15px; border-top: 1px solid var(--v3-line); font-size: 13px; }
.v3-making-copy li b { color: var(--v3-rose); font: 10px var(--font-utility); }

.v3-contact { position: relative; min-height: 700px; overflow: hidden; padding: 95px var(--v3-pad); color: var(--v3-void); background: var(--v3-pearl); }
.v3-contact-spectrum { position: absolute; left: -15%; right: -15%; top: 27%; height: 33%; background: linear-gradient(102deg, transparent 12%, oklch(86% .13 210 / .42), oklch(97% .008 260 / .76), oklch(76% .16 10 / .4), oklch(91% .16 125 / .23), transparent 88%); transform: rotate(-5deg); filter: blur(8px); }
.v3-contact > p, .v3-contact h2, .v3-contact > div:last-child { position: relative; z-index: 1; }
.v3-contact > p { color: oklch(42% .03 250); }
.v3-contact h2 { width: 64%; margin: 95px 0 0; font-size: 82px; line-height: .92; }
.v3-contact > div:last-child { position: absolute; right: var(--v3-pad); bottom: 85px; width: 30%; }
.v3-contact > div:last-child p { line-height: 1.55; }
.v3-button-light { color: var(--v3-pearl); background: var(--v3-void); }

.v3-footer { min-height: 210px; display: grid; grid-template-columns: 2fr 1fr; gap: 28px; padding: 48px var(--v3-pad); background: var(--v3-void); }
.v3-footer strong { font-size: 36px; font-weight: 400; }
.v3-footer div { display: flex; flex-direction: column; gap: 9px; font-size: 12px; }
.v3-footer > span { color: var(--v3-fog); font: 9px var(--font-utility); }

.v3-menu-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; color: var(--v3-pearl); background: var(--v3-void); overflow: hidden; }
.v3-menu-dialog::backdrop { background: oklch(5% .01 250 / .84); }
.v3-menu-dialog[open] { animation: v3-menu-open 460ms var(--v3-ease) both; }
.v3-menu-dialog header { position: relative; z-index: 2; height: 78px; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--v3-pad); border-bottom: 1px solid var(--v3-line); }
.v3-menu-dialog header strong { font-size: 24px; font-weight: 400; }
.v3-menu-dialog header button { width: 44px; height: 44px; border: 1px solid var(--v3-line); border-radius: 4px; color: var(--v3-pearl); background: transparent; font-size: 28px; }
.v3-menu-dialog nav { position: relative; z-index: 2; display: flex; flex-direction: column; width: min(850px,calc(100% - var(--v3-pad) * 2)); margin: 10vh auto 0; }
.v3-menu-dialog nav a { display: flex; align-items: center; justify-content: space-between; padding-block: 10px; border-bottom: 1px solid var(--v3-line); font-size: 64px; font-weight: 300; }
.v3-menu-dialog nav a b { color: var(--v3-fog); font: 9px var(--font-utility); }
.v3-menu-dialog nav a span { transition: transform 280ms var(--v3-ease); }
.v3-menu-dialog nav a:hover span { transform: translateX(16px); }
.v3-menu-dialog footer { position: absolute; z-index: 2; left: var(--v3-pad); right: var(--v3-pad); bottom: 26px; display: flex; justify-content: space-between; color: var(--v3-fog); font: 9px var(--font-utility); }
.v3-menu-prism { position: absolute; inset: 0; pointer-events: none; }
.v3-menu-prism i:first-child { position: absolute; left: 40%; top: -20%; width: 30%; height: 140%; border: 1px solid oklch(95% .04 220 / .42); background: linear-gradient(110deg, transparent 24%, oklch(86% .13 210 / .18), oklch(97% .008 260 / .42), oklch(76% .16 10 / .2), transparent 72%); transform: rotate(-13deg); filter: blur(2px); }
.v3-menu-prism i:last-child { position: absolute; left: -10%; right: -10%; top: 42%; height: 20%; background: linear-gradient(100deg, transparent 20%, oklch(86% .13 210 / .13), oklch(97% .008 260 / .34), oklch(76% .16 10 / .13), transparent 80%); transform: rotate(7deg); filter: blur(12px); }
@keyframes v3-menu-open { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

@media (max-width: 980px) {
  .v3-nav { grid-template-columns: 1fr auto; }
  .v3-nav nav, .v3-nav-actions > button:first-child, .v3-nav-actions .v3-action { display: none; }
  .v3-menu { display: block; }
  .v3-hero-copy { width: 72%; }
  .v3-glass-readout { display: none; }
  .v3-system-switcher { grid-template-columns: 180px 1fr; }
  .v3-system-copy { grid-column: 1 / -1; padding: 30px 0; }
  .v3-making { grid-template-columns: 1fr; }
  .v3-making-media { min-height: 650px; }
}

@media (max-width: 700px) {
  :root { --v3-pad: 18px; }
  .v3-nav { height: 66px; }
  .v3-brand img { width: 92px; }
  .v3-hero { height: calc(100svh - 66px); min-height: 650px; }
  .v3-hero-image { object-position: 60% center; }
  .v3-hero-copy { left: 18px; bottom: 72px; width: calc(100% - 36px); }
  .v3-hero-copy h1 { font-size: 68px; }
  .v3-hero-line { grid-template-columns: 1fr; gap: 12px; }
  .v3-hero-line h2 { font-size: 38px; }
  .v3-hero-line p { display: none; }
  .v3-prism-lens { right: -15%; top: 18%; width: 70%; }
  .v3-hero-index { left: 18px; right: 18px; grid-template-columns: 30px 1fr; }
  .v3-hero-index b { display: none; }
  .v3-intro { min-height: 720px; padding-top: 80px; }
  .v3-intro h2 { margin-top: 120px; font-size: 48px; }
  .v3-intro-copy { left: 18px; right: 18px; bottom: 70px; width: auto; }
  .v3-systems { padding-block: 76px; }
  .v3-systems > header { grid-template-columns: 1fr; }
  .v3-systems > header h2 { font-size: 46px; }
  .v3-system-switcher { display: block; }
  .v3-system-tabs { display: grid; grid-template-columns: repeat(3,1fr); border-right: 0; }
  .v3-system-tabs button { display: block; min-height: 68px; padding: 12px 6px; font-size: 11px; text-align: center; }
  .v3-system-tabs button span { display: block; margin-bottom: 5px; }
  .v3-system-tabs button[aria-selected="true"]::after { width: 100%; margin-inline: auto; }
  .v3-system-visual { height: 420px; margin: 14px 0; }
  .v3-system-copy h3 { margin-top: 42px; font-size: 36px; }
  .v3-projects { padding-block: 76px; }
  .v3-projects > header { grid-template-columns: 1fr; }
  .v3-projects > header h2 { font-size: 48px; }
  .v3-project-rail { display: block; }
  .v3-project { display: block; margin-bottom: 14px; }
  .v3-project-main img, .v3-project img { min-height: 0; aspect-ratio: 4/3; }
  .v3-project > span { grid-template-columns: 1fr auto; }
  .v3-project > span b { display: none; }
  .v3-making-media { min-height: 560px; }
  .v3-making-copy { padding: 58px 18px; }
  .v3-making-copy h2 { margin-top: 60px; font-size: 48px; }
  .v3-contact { min-height: 680px; padding-top: 75px; }
  .v3-contact h2 { width: 100%; margin-top: 90px; font-size: 56px; }
  .v3-contact > div:last-child { left: 18px; right: 18px; bottom: 50px; width: auto; }
  .v3-footer { grid-template-columns: 1fr 1fr; }
  .v3-footer strong, .v3-footer > span { grid-column: 1 / -1; }
  .v3-menu-dialog header { height: 66px; }
  .v3-menu-dialog nav { margin-top: 8vh; }
  .v3-menu-dialog nav a { font-size: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .v3-prism-lens { transform: rotate(-5deg); }
}