:root {
  --ink: #080808;
  --paper: #f2f1ed;
  --white: #fff;
  --accent: #a4a49f;
  --danger: #c15b47;
  --hover-light: #b8b8b3;
  --hover-dark: #3f3f3d;
  --tracking-display: -.067em;
  --tracking-title: -.052em;
  --tracking-label: .12em;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: 260ms;
  --normal: 620ms;
  --slow: 1200ms;
  --gutter: clamp(1.25rem, 3.35vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; overflow-x: clip; }
body { max-width: 100%; margin: 0; overflow-x: clip; background: var(--ink); color: var(--white); font: 16px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; font-kerning: normal; font-feature-settings: "kern" 1,"liga" 1,"calt" 1; font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.external-mark { position: relative; display: inline-block; flex: 0 0 auto; width: .82em; height: .82em; vertical-align: -.04em; }
.external-mark::before { content: ""; position: absolute; left: .08em; bottom: .08em; width: .92em; height: 1px; background: currentColor; transform: rotate(-45deg); transform-origin: left center; }
.external-mark::after { content: ""; position: absolute; top: 0; right: 0; width: .42em; height: .42em; border-top: 1px solid currentColor; border-right: 1px solid currentColor; }

.opening { position: fixed; z-index: 100; inset: 0; background: #000; animation: opening-out .7s var(--ease) .18s forwards; }
@keyframes opening-out { to { opacity: 0; visibility: hidden; } }

.grain-canvas { position: fixed; z-index: 45; inset: -2.5%; width: 105%; height: 105%; opacity: 0; pointer-events: none; mix-blend-mode: soft-light; image-rendering: pixelated; }
.cursor-focus { --focus-strength: 0; position: fixed; z-index: 21; left: 0; top: 0; width: clamp(8rem,12vw,13.5rem); aspect-ratio: 1; overflow: visible; opacity: 0; pointer-events: none; contain: layout style; will-change: transform,opacity; }
.cursor-focus .focus-frame, .cursor-focus .focus-cross, .cursor-focus .focus-point { position: absolute; z-index: 2; display: block; pointer-events: none; }
.cursor-focus .focus-frame { inset: 0; background: linear-gradient(rgba(248,248,248,.72) 0 0) left top/22% 1px no-repeat,linear-gradient(rgba(248,248,248,.72) 0 0) left top/1px 22% no-repeat,linear-gradient(rgba(248,248,248,.72) 0 0) right top/22% 1px no-repeat,linear-gradient(rgba(248,248,248,.72) 0 0) right top/1px 22% no-repeat,linear-gradient(rgba(248,248,248,.72) 0 0) left bottom/22% 1px no-repeat,linear-gradient(rgba(248,248,248,.72) 0 0) left bottom/1px 22% no-repeat,linear-gradient(rgba(248,248,248,.72) 0 0) right bottom/22% 1px no-repeat,linear-gradient(rgba(248,248,248,.72) 0 0) right bottom/1px 22% no-repeat; opacity: calc(.3 + var(--focus-strength) * .34); filter: drop-shadow(0 1px 2px rgba(0,0,0,.42)); }
.cursor-focus .focus-cross { left: 50%; top: 50%; width: 24%; height: 24%; transform: translate(-50%,-50%); opacity: calc(.22 + var(--focus-strength) * .3); }
.cursor-focus .focus-cross::before, .cursor-focus .focus-cross::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(248,248,248,.78); box-shadow: 0 1px 2px rgba(0,0,0,.36); transform: translate(-50%,-50%); }
.cursor-focus .focus-cross::before { width: 100%; height: 1px; }
.cursor-focus .focus-cross::after { width: 1px; height: 100%; }
.cursor-focus .focus-point { width: 14%; aspect-ratio: 1; background: linear-gradient(rgba(248,248,248,.7) 0 0) left top/45% 1px no-repeat,linear-gradient(rgba(248,248,248,.7) 0 0) left top/1px 45% no-repeat,linear-gradient(rgba(248,248,248,.7) 0 0) right bottom/45% 1px no-repeat,linear-gradient(rgba(248,248,248,.7) 0 0) right bottom/1px 45% no-repeat; opacity: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.cursor-focus .focus-point-a { left: -12%; top: 31%; }
.cursor-focus .focus-point-b { right: -10%; top: 3%; }
.cursor-focus .focus-point-c { right: -12%; bottom: 24%; }
.cursor-focus .focus-point-d { left: 7%; bottom: -12%; }
.cursor-focus .focus-point-e { left: 45%; top: -12%; }
.cursor-focus.is-active .focus-frame { animation: focus-lock 1.7s cubic-bezier(.22,1,.36,1) infinite; }
.cursor-focus.is-active .focus-cross { animation: focus-cross-lock 1.7s ease-in-out infinite; }
.cursor-focus.is-active .focus-point { animation: focus-hunt 1.7s ease-in-out infinite; }
.cursor-focus.is-active .focus-point-b { animation-delay: -.28s; }
.cursor-focus.is-active .focus-point-c { animation-delay: -.56s; }
.cursor-focus.is-active .focus-point-d { animation-delay: -.84s; }
.cursor-focus.is-active .focus-point-e { animation-delay: -1.12s; }
@keyframes focus-lock { 0% { transform: scale(1.34); filter: blur(1.3px) drop-shadow(0 1px 2px rgba(0,0,0,.42)); } 28% { transform: scale(.94); filter: blur(0) drop-shadow(0 1px 2px rgba(0,0,0,.42)); } 45%,68% { transform: scale(1); filter: blur(0) drop-shadow(0 1px 2px rgba(0,0,0,.42)); } 82% { transform: translate3d(2px,-1px,0) scale(1.08); } 100% { transform: scale(1.28); filter: blur(.8px) drop-shadow(0 1px 2px rgba(0,0,0,.42)); } }
@keyframes focus-cross-lock { 0%,100% { transform: translate(-50%,-50%) scale(1.45); filter: blur(.8px); } 34%,67% { transform: translate(-50%,-50%) scale(.82); filter: blur(0); } 48% { transform: translate(-50%,-50%) scale(1); } }
@keyframes focus-hunt { 0%,100% { opacity: .05; transform: translate3d(-5px,4px,0) scale(1.55); filter: blur(1px) drop-shadow(0 1px 2px rgba(0,0,0,.45)); } 32% { opacity: .58; transform: translate3d(3px,-2px,0) scale(.82); filter: blur(0) drop-shadow(0 1px 2px rgba(0,0,0,.45)); } 48%,64% { opacity: .32; transform: translate3d(0,0,0) scale(1); filter: blur(0) drop-shadow(0 1px 2px rgba(0,0,0,.45)); } 82% { opacity: .12; transform: translate3d(4px,3px,0) scale(1.28); } }
.particle-canvas { position: fixed; z-index: 18; inset: 0; width: 100%; height: 100%; opacity: .78; pointer-events: none; mix-blend-mode: difference; contain: strict; }
.site-header { position: fixed; z-index: 30; top: 0; left: 0; width: 100%; height: 5rem; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto; align-items: center; color: #fff; mix-blend-mode: difference; opacity: 0; animation: interface-in .9s var(--ease) 4.65s forwards; }
@keyframes interface-in { from { opacity: 0; transform: translateY(-.8rem); } to { opacity: 1; transform: none; } }
.brand-cluster { display: flex; align-items: baseline; gap: clamp(.65rem,1.2vw,1.2rem); width: max-content; }
.wordmark { position: relative; font-size: .9rem; font-weight: 700; letter-spacing: -.03em; transform-origin: left center; transition: transform .45s var(--ease), letter-spacing .45s var(--ease); }
.wordmark span { font-weight: 400; }
.wordmark:hover { color: var(--hover-light); transform: translateX(.12rem) scale(1.035); letter-spacing: -.01em; }
.corporate-header-link { display: inline-flex; align-items: center; gap: .35em; color: rgba(255,255,255,.58); font-size: .56rem; letter-spacing: .11em; text-transform: uppercase; transition: color .3s ease, transform .45s var(--ease); }
.corporate-header-link .external-mark { width: .7em; height: .7em; }
.corporate-header-link:hover { color: #fff; transform: translateX(.16rem); }
.header-index { font-size: .7rem; letter-spacing: .14em; }
.header-index sup { font-size: .5rem; }
.menu-toggle { position: relative; justify-self: end; display: flex; align-items: center; gap: .7rem; padding: 0; border: 0; background: none; cursor: pointer; font-size: .7rem; letter-spacing: .16em; transform-origin: right center; transition: transform .45s var(--ease), letter-spacing .45s var(--ease); }
.menu-toggle i { width: .48rem; height: .48rem; border: 1px solid currentColor; transition: transform var(--normal) var(--ease), background var(--fast); }
.menu-toggle:hover { color: var(--hover-light); transform: translateX(-.12rem) scale(1.035); letter-spacing: .18em; }
.menu-toggle:not([aria-expanded="true"]):hover i { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] i { transform: rotate(135deg); background: currentColor; }
.menu-toggle::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.38rem; height: 1px; background: currentColor; opacity: 0; transform: scaleX(0); }
.menu-toggle::after { transform-origin: right; }
.site-header.is-nav-intro .wordmark { animation: nav-intro-left 1.45s var(--ease) both; }
.site-header.is-nav-intro .menu-toggle { animation: nav-intro-right 1.45s var(--ease) .12s both; }
.site-header.is-nav-intro .menu-toggle::after { animation: nav-line 1.45s var(--ease) both; }
.wordmark.is-nav-pulse, .menu-toggle.is-nav-pulse { animation: nav-pulse 1.15s var(--ease); }
.menu-toggle.is-nav-pulse::after { animation: nav-line 1.15s var(--ease); }
@keyframes nav-intro-left { 0%,100% { transform: scale(1); } 34% { transform: scale(1.62) translateX(.08rem); letter-spacing: .015em; } }
@keyframes nav-intro-right { 0%,100% { transform: scale(1); } 34% { transform: scale(1.62) translateX(-.08rem); letter-spacing: .22em; } }
@keyframes nav-pulse { 0%,100% { transform: scale(1); } 42% { transform: scale(1.18); } }
@keyframes nav-line { 0%,100% { opacity: 0; transform: scaleX(0); } 28%,58% { opacity: .85; transform: scaleX(1); } }
.menu { position: fixed; z-index: 25; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: var(--gutter); background: rgba(8,8,8,.97); transform: translateY(-100%); transition: transform var(--slow) var(--ease); }
.menu.is-open { transform: translateY(0); }
.menu a { width: max-content; font-size: clamp(3.6rem, 10vw, 9rem); line-height: .9; letter-spacing: var(--tracking-display); text-wrap: balance; transition: color var(--normal), transform var(--normal) var(--ease), letter-spacing var(--normal) var(--ease); }
.menu a:hover { color: var(--hover-light); transform: translateX(1vw); letter-spacing: var(--tracking-title); }
.menu sup { font-size: .12em; vertical-align: top; }
.tilt-toggle { display: none; }
.contact-dock { position: fixed; z-index: 28; left: var(--gutter); bottom: 1.25rem; display: flex; align-items: center; gap: 1rem; padding: .55rem .75rem; border: 1px solid rgba(255,255,255,.38); background: rgba(8,8,8,.7); color: #fff; backdrop-filter: blur(10px); opacity: 0; animation: dock-in .8s var(--ease) 4.95s forwards; }
.contact-dock > span { color: #999; font-size: .61rem; letter-spacing: .16em; }
.contact-dock a { display: flex; align-items: center; gap: .55rem; font-size: .72rem; letter-spacing: .1em; transition: color .25s, transform .45s var(--ease); }
.contact-dock a + a { padding-left: 1rem; border-left: 1px solid #555; color: #aaa; font-size: .62rem; letter-spacing: .14em; }
.contact-dock a:hover { color: var(--hover-light); transform: translateY(-2px); }
.contact-dock .external-mark { color: var(--accent); }
@keyframes dock-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

.hero, [data-project] { --pointer-x: 0; --pointer-y: 0; --film-x: 0px; --film-y: 0px; --type-x: 0px; --type-y: 0px; --identity-x: 0px; --identity-y: 0px; --identity-skew: 0deg; --identity-scale: 1; --identity-blur: 0px; --motion-x: 0px; --motion-x-neg: 0px; --motion-x-soft: 0px; --motion-x-strong: 0px; --motion-x-strong-neg: 0px; --motion-y: 0px; --motion-y-neg: 0px; --motion-y-soft: 0px; --warp-skew: 0deg; --warp-skew-inverse: 0deg; --warp-skew-strong-inverse: 0deg; --grid-reveal: 58%; --band-scale: 1; --field-opacity: .28; --field-contrast: 1; --field-tracking: .2em; --fx-blur: .8px; --fx-scale: 0; --velocity: 0; --scroll-progress: 0; }
.hero, [data-project] { --transition-x: 0px; --transition-y: 0px; --transition-opacity: .1; --transition-wipe: 50%; }
.fx-defs { position: absolute; overflow: hidden; pointer-events: none; }
.hero { position: relative; height: 100vh; height: 100svh; min-height: 42rem; overflow: hidden; isolation: isolate; background: #050505; }
.film-layer, .work-film { position: absolute; inset: 0; overflow: hidden; background: #111; }
.film-layer iframe, .work-film iframe { position: absolute; inset: -2%; width: 104%; height: 104%; border: 0; pointer-events: none; }
.film-layer iframe { opacity: 0; transition: opacity .55s var(--ease); }
.film-layer iframe.is-active { opacity: 1; }
.film-layer { inset: -2%; opacity: 0; animation: film-in 1.35s var(--ease) .22s forwards; transform: translate3d(var(--film-x), var(--film-y), 0) scale(1.035); transition: transform 1.1s var(--ease), filter var(--normal) var(--ease); }
@keyframes film-in { to { opacity: 1; } }
.film-shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.16), transparent 45%, rgba(0,0,0,.44)); }
.hero-grid, .work-grid { position: absolute; z-index: 2; inset: 0; pointer-events: none; background-image: linear-gradient(90deg, transparent calc(100% - 1px), rgba(255,255,255,.08) 0); background-size: 8.333vw 100%; background-position: var(--gutter) 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); opacity: .28; transform: translateX(var(--fine-x)); transition: transform 1.1s var(--ease), opacity .45s; }
.hero-copy { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); top: 50%; transform: translate3d(var(--type-x), calc(-50% + var(--type-y) + var(--scroll-offset, 0px)), 0); transition: transform 1.05s var(--ease); }
.hero-kicker, .hero-note { margin: 0; font-size: clamp(.72rem, .8vw, .85rem); letter-spacing: .16em; opacity: 0; animation: hero-detail-in .9s var(--ease) 4.75s forwards; }
.hero-kicker { margin: 0 0 clamp(1.2rem, 3vh, 2.5rem) .4vw; }
.hero-copy h1 { max-width: 11ch; margin: 0; font-size: clamp(4.7rem, 11.2vw, 13.5rem); font-weight: 700; line-height: .79; letter-spacing: var(--tracking-display); text-wrap: balance; text-transform: uppercase; }
.hero-copy h1 span { display: block; opacity: 0; transform: translateY(82%) scaleY(1.32); filter: blur(12px); animation: title-in 1.25s var(--ease) 4s forwards; transition: letter-spacing .7s var(--ease), transform .9s var(--ease); }
.hero-copy h1 span:nth-child(2) { padding-left: 7.8vw; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.82); animation-delay: 4.14s; }
.hero.is-reacting .hero-copy h1 span:first-child { letter-spacing: -.058em; }
.hero.is-reacting .hero-copy h1 span:nth-child(2) { letter-spacing: -.074em; filter: url(#unt-warp); }
.hero.is-velocity-accent .hero-copy h1 span:nth-child(2) { translate: var(--type-rx) var(--type-ry); text-shadow: -3px 0 rgba(230,230,226,.3),3px 0 rgba(45,45,43,.48); }
@keyframes title-in { 58% { opacity: 1; filter: blur(0); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes hero-detail-in { from { opacity: 0; transform: translateY(.8rem); } to { opacity: 1; transform: none; } }
.hero-note { margin-top: clamp(1.5rem, 4vh, 3.2rem); text-align: right; }
.motion-object { position: absolute; z-index: 5; opacity: 0; pointer-events: none; animation: hero-detail-in .9s var(--ease) 4.55s forwards; transition: transform 1.1s var(--ease), opacity .5s; }
.object-axis { left: 7%; bottom: 21%; width: clamp(4rem, 7vw, 7rem); height: 1px; background: rgba(255,255,255,.8); transform: translateX(var(--type-x)); }
.object-axis span { position: absolute; top: -3px; left: calc(50% + var(--identity-x)); width: 7px; height: 7px; background: var(--accent); transition: left 1s var(--ease); }
.object-code { top: 23%; left: 54%; font-size: .65rem; line-height: 1.35; letter-spacing: .18em; transform: translate(var(--type-x), var(--type-ry)); }
.object-frame { width: clamp(4rem, 7vw, 7.5rem); height: clamp(5.2rem, 9vw, 9.2rem); right: 20%; bottom: 19%; border: 1px solid rgba(255,255,255,.6); transform: translate(var(--fine-x), var(--type-y)); }
.object-rec { left: 25%; top: 23%; display: flex; align-items: center; gap: .4rem; font-size: .62rem; letter-spacing: .12em; transform: translate(var(--fine-x), var(--type-y)); }
.object-rec i { width: .4rem; height: .4rem; background: var(--accent); animation: blink 1.7s steps(1) infinite; }
@keyframes blink { 50% { opacity: .18; } }
.hero-identity, .project-identity { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.hero-identity { opacity: 0; animation: hero-detail-in 1s var(--ease) 4.35s forwards; }
.hero-identity strong, .project-identity strong { position: absolute; left: 50%; top: 50%; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.56); font-size: clamp(8rem, 24vw, 29rem); font-weight: 700; line-height: .68; letter-spacing: -.12em; white-space: nowrap; opacity: .34; transform: translate3d(calc(-50% + var(--identity-x)), calc(-50% + var(--identity-y)), 0) skewX(var(--identity-skew)) scaleX(var(--identity-scale)); transition: transform .62s var(--ease), opacity .42s, filter .18s; }
.hero-identity strong::before, .hero-identity strong::after, .project-identity strong::before, .project-identity strong::after { content: attr(data-label); position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.72); opacity: 0; pointer-events: none; transition: transform .48s var(--ease), opacity .35s var(--ease), clip-path .52s var(--ease), filter .35s var(--ease); }
[data-transition="push"].is-reacting .hero-identity strong::before, [data-transition="push"].is-reacting .project-identity strong::before { clip-path: inset(0 0 52%); opacity: var(--transition-opacity); transform: translate3d(var(--transition-x),0,0); }
[data-transition="push"].is-reacting .hero-identity strong::after, [data-transition="push"].is-reacting .project-identity strong::after { clip-path: inset(52% 0 0); opacity: var(--transition-opacity); transform: translate3d(var(--motion-x-neg),0,0); }
[data-transition="wipe"].is-reacting .hero-identity strong::before, [data-transition="wipe"].is-reacting .project-identity strong::before { clip-path: inset(0 calc(100% - var(--transition-wipe)) 0 0); opacity: var(--transition-opacity); transform: translate3d(var(--transition-x),0,0); }
[data-transition="wipe"].is-reacting .hero-identity strong::after, [data-transition="wipe"].is-reacting .project-identity strong::after { clip-path: inset(0 0 0 var(--transition-wipe)); opacity: var(--transition-opacity); transform: translate3d(var(--motion-x-neg),0,0); }
[data-transition="slide"].is-reacting .hero-identity strong::before, [data-transition="slide"].is-reacting .project-identity strong::before { clip-path: inset(14% 0 57%); opacity: var(--transition-opacity); transform: translate3d(var(--transition-x),var(--transition-y),0); }
[data-transition="slide"].is-reacting .hero-identity strong::after, [data-transition="slide"].is-reacting .project-identity strong::after { clip-path: inset(61% 0 12%); opacity: var(--transition-opacity); transform: translate3d(var(--motion-x-neg),var(--motion-y-neg),0); }
[data-transition="cross-dissolve"].is-reacting .hero-identity strong::before, [data-transition="cross-dissolve"].is-reacting .project-identity strong::before { opacity: var(--transition-opacity); transform: translate3d(var(--transition-x),var(--transition-y),0) scale(1.015); filter: blur(var(--fx-blur)); }
[data-transition="cross-dissolve"].is-reacting .hero-identity strong::after, [data-transition="cross-dissolve"].is-reacting .project-identity strong::after { opacity: var(--transition-opacity); transform: translate3d(var(--motion-x-neg),var(--motion-y-neg),0); filter: blur(.8px); }
[data-transition="zoom"].is-reacting .hero-identity strong::before, [data-transition="zoom"].is-reacting .project-identity strong::before { opacity: var(--transition-opacity); transform: scale(1.09) translate3d(var(--motion-x-soft),var(--motion-y-soft),0); filter: blur(var(--fx-blur)); }
[data-transition="zoom"].is-reacting .hero-identity strong::after, [data-transition="zoom"].is-reacting .project-identity strong::after { opacity: var(--transition-opacity); transform: scale(.93) translate3d(var(--motion-x-neg),var(--motion-y-neg),0); }
[data-transition="iris"].is-reacting .hero-identity strong::before, [data-transition="iris"].is-reacting .project-identity strong::before { clip-path: circle(var(--transition-wipe) at var(--focus-x) var(--focus-y)); opacity: var(--transition-opacity); transform: scale(1.04); }
[data-transition="iris"].is-reacting .hero-identity strong::after, [data-transition="iris"].is-reacting .project-identity strong::after { clip-path: circle(24% at var(--focus-x) var(--focus-y)); opacity: var(--transition-opacity); transform: translate3d(var(--transition-x),var(--transition-y),0) scale(1.12); filter: blur(1px); }
[data-transition="shutter"].is-reacting .hero-identity strong::before, [data-transition="shutter"].is-reacting .project-identity strong::before { clip-path: polygon(0 0,100% 0,100% 16%,0 16%,0 34%,100% 34%,100% 50%,0 50%,0 68%,100% 68%,100% 84%,0 84%); opacity: var(--transition-opacity); transform: translate3d(var(--transition-x),var(--motion-y-soft),0); }
[data-transition="shutter"].is-reacting .hero-identity strong::after, [data-transition="shutter"].is-reacting .project-identity strong::after { clip-path: polygon(0 17%,100% 17%,100% 33%,0 33%,0 51%,100% 51%,100% 67%,0 67%,0 85%,100% 85%,100% 100%,0 100%); opacity: var(--transition-opacity); transform: translate3d(var(--motion-x-neg),var(--motion-y-neg),0); }
[data-transition="page-peel"].is-reacting .hero-identity strong::before, [data-transition="page-peel"].is-reacting .project-identity strong::before { clip-path: polygon(0 0,74% 0,54% 100%,0 100%); opacity: var(--transition-opacity); transform: translate3d(var(--transition-x),var(--transition-y),0) skewX(-8deg) rotate(-1deg); }
[data-transition="page-peel"].is-reacting .hero-identity strong::after, [data-transition="page-peel"].is-reacting .project-identity strong::after { clip-path: polygon(74% 0,100% 0,100% 100%,54% 100%); opacity: var(--transition-opacity); transform: translate3d(var(--motion-x-neg),var(--motion-y-neg),0) skewX(9deg) scaleX(.92); filter: blur(.7px); }
[data-transition="pixel-scan"].is-reacting .hero-identity strong::before, [data-transition="pixel-scan"].is-reacting .project-identity strong::before { clip-path: polygon(0 5%,100% 5%,100% 12%,0 12%,0 27%,100% 27%,100% 36%,0 36%,0 53%,100% 53%,100% 61%,0 61%,0 78%,100% 78%,100% 88%,0 88%); opacity: var(--transition-opacity); transform: translate3d(var(--motion-x-strong),0,0); filter: contrast(1.45); }
[data-transition="pixel-scan"].is-reacting .hero-identity strong::after, [data-transition="pixel-scan"].is-reacting .project-identity strong::after { clip-path: polygon(0 13%,100% 13%,100% 26%,0 26%,0 37%,100% 37%,100% 52%,0 52%,0 62%,100% 62%,100% 77%,0 77%,0 89%,100% 89%,100% 100%,0 100%); opacity: var(--transition-opacity); transform: translate3d(var(--motion-x-strong-neg),var(--motion-y-soft),0); filter: blur(1px); }
[data-transition="split"].is-reacting .hero-identity strong::before, [data-transition="split"].is-reacting .project-identity strong::before { clip-path: inset(0 50% 0 0); opacity: var(--transition-opacity); transform: translate3d(var(--transition-x),var(--motion-y-neg),0) skewY(2deg); }
[data-transition="split"].is-reacting .hero-identity strong::after, [data-transition="split"].is-reacting .project-identity strong::after { clip-path: inset(0 0 0 50%); opacity: var(--transition-opacity); transform: translate3d(var(--motion-x-neg),var(--transition-y),0) skewY(-2deg); }
.hero-identity i, .hero-identity b, .hero-identity span, .project-identity i, .project-identity b { position: absolute; display: block; opacity: .24; transition: transform 1s var(--ease), opacity .35s; }
.hero-identity i, .project-identity i { top: 0; left: calc(50% + var(--fine-x)); width: 1px; height: 100%; background: linear-gradient(transparent, rgba(255,255,255,.5), transparent); }
.hero-identity b, .project-identity b { top: calc(50% + var(--fine-y)); left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.hero-identity span { inset: 15% var(--gutter); border: 1px solid rgba(255,255,255,.13); transform: translate(var(--type-x), var(--type-y)); }
.hero.is-reacting .hero-identity strong, [data-project].is-reacting .project-identity strong { opacity: .78; filter: url(#unt-warp) blur(var(--identity-blur)); }
.hero.is-velocity-accent .hero-identity strong, [data-project].is-velocity-accent .project-identity strong { clip-path: polygon(0 0,100% 0,100% 34%,60% 34%,60% 40%,100% 40%,100% 70%,28% 70%,28% 76%,100% 76%,100% 100%,0 100%); filter: url(#unt-warp) blur(var(--identity-blur)) contrast(1.35); }
.hero.is-velocity-accent .film-layer { filter: contrast(1.04) saturate(1.04); }
.hero-footer { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: 1.7rem; display: grid; grid-template-columns: 1fr 1fr 1fr; font-size: .7rem; letter-spacing: var(--tracking-label); opacity: 0; animation: hero-detail-in .9s var(--ease) 4.9s forwards; }
.hero-footer a { justify-self: center; }
.hero-footer b { display: inline-block; margin-left: .5rem; animation: nudge 1.6s var(--ease) infinite; }
.hero-footer span:last-child { justify-self: end; }
@keyframes nudge { 50% { transform: translateY(.3rem); } }

.work { position: relative; padding: clamp(5.5rem,7vw,8rem) var(--gutter) clamp(6.5rem,8vw,9rem); overflow: hidden; background: var(--paper); color: var(--ink); }
.work-head { display: flex; justify-content: space-between; gap: 2rem; padding-bottom: .35rem; border: 0; font-size: .72rem; letter-spacing: var(--tracking-label); }
.work-head p { margin: 0; }
.work-head span { color: #777; transition: transform var(--normal) var(--ease); }
.work.is-reacting .work-head span { display: inline-block; transform: translateX(5px); }
.work-stage { position: relative; height: min(72vw, 79vh); min-height: 32rem; margin-top: 1.35rem; overflow: hidden; background: #101010; color: #fff; clip-path: inset(0 0 100%); transition: clip-path 1.2s var(--ease), transform 1s var(--ease); }
.work.is-visible .work-stage { clip-path: inset(0); }
.work-film { opacity: .94; transform: translate3d(var(--film-x), var(--film-y), 0) scale(calc(var(--scroll-scale,1.04) + var(--fx-scale))) skewX(var(--warp-skew)); filter: saturate(.36) contrast(1.24) brightness(.82) blur(.35px); transition: transform .72s var(--ease), filter .55s var(--ease), opacity .45s, clip-path .32s var(--ease); will-change: transform, filter; }
.work-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, transparent 52%, rgba(0,0,0,.24)); }
.work-mark { position: absolute; z-index: 3; font-size: .72rem; letter-spacing: .18em; transition: transform .8s var(--ease), letter-spacing .55s var(--ease); }
.work-mark-a { left: 1.5rem; top: 1.5rem; transform: translateX(var(--type-x)); }
.work-mark-b { right: 1.5rem; top: 1.5rem; transform: translateX(var(--type-rx)); }
.work.is-reacting .work-mark { letter-spacing: .21em; }
.play-control { position: absolute; z-index: 6; right: 1.5rem; bottom: 1.5rem; width: 10rem; padding: .9rem .8rem; display: flex; justify-content: space-between; border: 0; border-block: 1px solid rgba(255,255,255,.82); background: rgba(8,8,8,.68); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; font-size: .7rem; letter-spacing: .14em; text-align: left; text-shadow: 0 1px 3px rgba(0,0,0,.75); transition: background .35s var(--ease), color .35s var(--ease); }
.play-control .external-mark { transition: transform var(--fast) var(--ease); }
.play-control:hover { background: rgba(255,255,255,.9); color: #080808; text-shadow: none; }
.play-control:hover .external-mark { transform: translate(.2rem,-.2rem); }
.work-title-row { display: grid; grid-template-columns: 1fr 7fr 2fr; gap: 1rem; align-items: end; margin-top: 2rem; }
.featured-title { margin-top: clamp(1.4rem,2.6vw,2.8rem); margin-bottom: clamp(.75rem,1.2vw,1.2rem); }
.work-title-row.featured-title { grid-template-columns: minmax(0,1fr); }
.work-number { align-self: start; margin: .45rem 0 0; font-size: .72rem; letter-spacing: .15em; transition: transform .7s var(--ease); }
.work-number { display: none; }
.is-reacting .work-number { transform: translateX(var(--type-rx)); }
.work h2, .more-project h3 { transition: transform .9s var(--ease), letter-spacing .65s var(--ease); }
.work h2:hover, .more-project h3:hover { color: #555552; letter-spacing: -.042em; }
.work-title-row h2 { max-width: 17ch; margin: 0; font-size: clamp(3rem,6.4vw,7.4rem); font-weight: 700; line-height: .89; letter-spacing: var(--tracking-title); text-wrap: balance; transform: translate3d(var(--type-x), var(--type-y), 0); }
.work-title-row.featured-title + .work-stage { margin-top: 0; }
.work-one-meta { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 1.15rem; }
.work-meta { padding-bottom: .3rem; }
.work-meta p { display: grid; grid-template-columns: 4.2rem 1fr; margin: .55rem 0; font-size: .7rem; letter-spacing: .12em; }
.work-meta span { color: #555; }
.project-signature { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin: 1rem 0 0; padding-top: .35rem; border: 0; font-size: .64rem; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; }
.project-signature > span { flex: 0 0 auto; color: #777; }
.project-signature ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem 1rem; margin: 0; padding: 0; list-style: none; }
.project-signature li { display: flex; gap: .42rem; white-space: nowrap; }
.project-signature b { color: #777; font-size: .92em; font-weight: 500; }
.project-signature strong { font-weight: 500; transition: letter-spacing .6s var(--ease), opacity .4s; }
[data-project]:hover > .project-signature strong, .more-project:hover .project-signature strong { color: #555552; letter-spacing: .14em; }
.creative-type { position: absolute; z-index: 4; inset: 0; overflow: hidden; pointer-events: none; color: #fff; mix-blend-mode: difference; transform: translate3d(var(--motion-x-neg),var(--motion-y-soft),0); transition: transform .82s var(--ease), opacity .45s var(--ease); }
.creative-type strong { position: absolute; left: -2.5%; top: 50%; color: transparent; -webkit-text-stroke: clamp(1px,.085vw,2px) rgba(255,255,255,.88); font-size: clamp(7rem,16vw,20rem); font-weight: 700; line-height: .72; letter-spacing: var(--tracking-display); white-space: nowrap; transform: translateY(-50%) scaleX(.98); transform-origin: center; opacity: .68; transition: letter-spacing .55s var(--ease), filter .28s, opacity .5s, -webkit-text-stroke-width .25s; }
.creative-type p { position: absolute; left: 1.4rem; bottom: 1.25rem; margin: 0; padding-left: 3.5rem; font-size: clamp(.58rem,.65vw,.72rem); letter-spacing: .22em; line-height: 1.4; white-space: nowrap; transform: translate3d(var(--motion-x-soft),var(--motion-y-neg),0); transition: transform .9s var(--ease), letter-spacing .55s var(--ease); }
.creative-type p::before { content: ""; position: absolute; left: 0; top: .55em; width: 2.6rem; height: 1px; background: currentColor; }
[data-project].is-reacting .creative-type strong { opacity: .94; letter-spacing: -.055em; filter: url(#unt-warp); }
[data-project].is-reacting .creative-type p { letter-spacing: .28em; }
[data-project].is-velocity-accent .creative-type strong { animation: type-vibrate .34s steps(4,end) 1; text-shadow: -4px 0 rgba(225,225,220,.34),4px 0 rgba(35,35,33,.54); }
@keyframes type-vibrate {
  0%,100% { translate: 0 0; -webkit-text-stroke-width: 1px; }
  25% { translate: -4px 2px; -webkit-text-stroke-width: 2px; }
  50% { translate: 3px -1px; -webkit-text-stroke-width: 1px; }
  75% { translate: -2px -2px; -webkit-text-stroke-width: 2px; }
}

/* Quiet typography lets luxury, portrait and craft films retain visual authority. */
[data-project="2"] .creative-type strong,
[data-project="6"] .creative-type strong,
[data-project="8"] .creative-type strong,
[data-project="16"] .creative-type strong { left: 6%; top: 10%; font-size: clamp(2.8rem,6vw,7rem); line-height: .85; letter-spacing: -.055em; transform: none; opacity: .52; }
[data-project="2"] .creative-type p,
[data-project="6"] .creative-type p,
[data-project="8"] .creative-type p,
[data-project="16"] .creative-type p { left: auto; right: 1.5rem; bottom: 4.75rem; }
[data-project="3"] .creative-type strong,
[data-project="18"] .creative-type strong { font-family: Georgia,serif; font-style: italic; font-weight: 400; }
[data-project="4"] .creative-type strong,
[data-project="17"] .creative-type strong { left: 18%; top: 42%; font-size: clamp(6.5rem,13vw,16rem); }
[data-project="5"] .creative-type strong { left: -8%; top: 46%; font-size: clamp(10rem,24vw,29rem); -webkit-text-stroke-color: rgba(255,255,255,.94); }
[data-project="7"] .creative-type strong { left: -14%; top: 18%; font-size: clamp(7rem,18vw,22rem); transform: rotate(-7deg); transform-origin: left top; }
[data-project="9"] .creative-type strong { left: 38%; top: 50%; font-size: clamp(7rem,17vw,20rem); transform: translateY(-50%) rotate(90deg); transform-origin: center; }
[data-project="10"] .creative-type strong { left: 24%; top: 54%; font-size: clamp(9rem,21vw,25rem); }
.bvlgari-layout > .project-signature { grid-column: 1; grid-row: 2; margin-top: -5rem; }
.bvlgari-layout > .project-signature > span, .bvlgari-layout > .project-signature b { color: #999; }
.bvlgari-layout > .bvlgari-type { grid-row: 1 / span 2; }
[data-reveal] { opacity: 0; transform: translateY(1.5rem); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
.section-label, .section-top { font-size: .75rem; letter-spacing: .15em; }

[data-interaction="precision"].is-velocity-accent .project-identity strong { text-shadow: -4px 0 rgba(225,225,220,.22), 4px 0 rgba(35,35,33,.4); }
[data-interaction="precision"].is-reacting .work-grid { opacity: .5; }
[data-interaction="architectural"] .bvlgari-film { transform: translate3d(var(--film-x), var(--film-y), 0); transition: transform 1.35s var(--ease); }
[data-interaction="architectural"] .project-identity strong { transform: translate3d(calc(-50% + var(--identity-x)), calc(-50% + var(--identity-y)), 0) skewX(var(--identity-skew)) scaleX(var(--identity-scale)); }
[data-interaction="beauty"] .project-identity strong { opacity: .091; filter: blur(3px); font-family: Georgia, serif; font-style: italic; }
[data-interaction="beauty"].is-reacting .work-film { filter: saturate(1.025) brightness(1.015); }
[data-interaction="editorial"] .technical-grid { transform: translate(var(--type-rx), var(--type-ry)); }
[data-interaction="music"].is-velocity-accent .project-identity strong { text-shadow: -5px 0 rgba(225,225,220,.28), 6px 0 rgba(35,35,33,.46); }
[data-interaction="music"].is-velocity-accent .work-film { filter: contrast(1.06) saturate(1.04); }
[data-interaction="outdoor-energy"] .more-film { transform: rotate(var(--tilt)); transition: transform .75s var(--ease); }
[data-interaction="outdoor-organic"] .project-identity { background: repeating-radial-gradient(ellipse at var(--focus-x,50%) var(--focus-y,50%), transparent 0 21px, rgba(255,255,255,.1) 22px, transparent 23px); opacity: .65; }
[data-interaction="cinema"] .project-identity::after { content: ""; position: absolute; inset: 7%; border: 1px solid rgba(255,255,255,.42); opacity: .5; }
[data-interaction="precision-craft"] .project-identity { background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.25) 50%, transparent calc(50% + 1px)); }
[data-interaction="precision-craft"] .project-identity strong { transform: translate3d(calc(-50% + var(--identity-x)), calc(-50% + var(--identity-y)), 0) skewX(var(--identity-skew)) scaleX(var(--identity-scale)); }
[data-interaction="camera"].is-velocity-accent .project-identity::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.28); animation: shutter .22s steps(1) 1; }
[data-interaction="culture"] .project-identity strong { opacity: .091; transform: translate3d(calc(-50% + var(--fine-x)), calc(-50% + var(--fine-y)), 0) scaleX(.9); }
[data-interaction="structural-life"] .project-identity::after { content: ""; position: absolute; inset: 8%; border-block: 1px solid rgba(255,255,255,.24); transform: translateY(var(--fine-y)); transition: transform 1s var(--ease); }
[data-interaction="craft-life"] .project-identity strong { font-family: Georgia, serif; font-style: italic; opacity: .104; }
[data-interaction="craft-life"].is-reacting .work-film { filter: saturate(.96) contrast(1.015); }

/* Film previews stay restrained at rest and reveal their colour under the pointer. */
[data-project] .work-film { filter: saturate(.36) contrast(1.24) brightness(.82) blur(.35px); }
[data-project].is-reacting .work-film { opacity: 1; filter: saturate(1.12) contrast(1.18) brightness(.94) blur(.08px); }
[data-project].is-velocity-accent .work-film {
  filter: saturate(1.28) contrast(1.38) brightness(.86) blur(var(--fx-blur));
  clip-path: polygon(0 0,100% 0,100% 26%,94% 26%,94% 37%,100% 37%,100% 61%,5% 61%,5% 72%,100% 72%,100% 100%,0 100%);
}

.motion-field { position: absolute; z-index: 3; inset: 0; overflow: hidden; opacity: .12; pointer-events: none; mix-blend-mode: difference; transition: opacity .5s var(--ease), filter .45s var(--ease); }
.motion-field i, .motion-field b, .motion-field span { position: absolute; display: block; transition: transform .78s var(--ease), opacity .42s var(--ease), clip-path .45s var(--ease); }
.motion-field i { top: -16%; left: 34%; width: 24%; height: 132%; border-inline: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.045); transform: translate3d(var(--motion-x),0,0) skewX(var(--warp-skew-inverse)); }
.motion-field b { top: var(--focus-y,50%); left: -12%; width: 124%; height: clamp(2.5rem,9vw,9rem); border-block: 1px solid rgba(255,255,255,.72); background: repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0 1px,transparent 1px 5px); transform: translate3d(var(--motion-x-neg),var(--motion-y),0) scaleY(var(--band-scale,1)); }
.motion-field span { inset: 8%; background-image: linear-gradient(rgba(255,255,255,.36) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.36) 1px,transparent 1px); background-size: clamp(2rem,7vw,8rem) clamp(2rem,7vw,8rem); opacity: .25; clip-path: inset(0 var(--grid-reveal,58%) 0 0); transform: translate3d(var(--motion-x-soft),var(--motion-y-neg),0); }
.motion-field em { position: absolute; right: 1.25rem; top: calc(var(--focus-y,50%) - 1rem); font-size: .6rem; font-style: normal; letter-spacing: .2em; opacity: .55; transform: translate3d(var(--motion-x-neg),var(--motion-y-soft),0); transition: transform .65s var(--ease), letter-spacing .32s, opacity .32s; }
[data-project].is-reacting .motion-field { opacity: var(--field-opacity,.28); filter: contrast(var(--field-contrast,1)); }
[data-project].is-reacting .motion-field em { letter-spacing: var(--field-tracking,.2em); opacity: .9; }
[data-project].is-velocity-accent .motion-field { opacity: .92; animation: field-pulse .34s steps(3,end) 1; }
[data-project].is-velocity-accent .motion-field i { clip-path: polygon(0 0,100% 0,100% 18%,48% 18%,48% 32%,100% 32%,100% 58%,15% 58%,15% 72%,100% 72%,100% 100%,0 100%); transform: translate3d(var(--motion-x-strong),0,0) skewX(var(--warp-skew-strong-inverse)) scaleX(1.35); }
[data-project].is-velocity-accent .motion-field b { transform: translate3d(var(--motion-x-strong-neg),var(--motion-y),0) scaleY(2.2); }
[data-interaction="architectural"] .motion-field i, [data-interaction="precision-craft"] .motion-field i { width: 12%; background: transparent; }
[data-interaction="beauty"] .motion-field { mix-blend-mode: soft-light; }
[data-interaction="beauty"] .motion-field b { height: 24%; background: rgba(255,255,255,.18); border: 0; filter: blur(8px); }
[data-interaction="music"] .motion-field i { width: 42%; left: 18%; }
[data-interaction="music"].is-velocity-accent .motion-field { mix-blend-mode: exclusion; }
[data-interaction="outdoor-organic"] .motion-field span { transform: translate3d(var(--motion-x),var(--motion-y),0) rotate(2deg); }
[data-interaction="camera"] .motion-field i { width: 34%; left: 50%; border-width: 2px; }
@keyframes field-pulse { 33% { transform: translateX(8px); } 66% { transform: translateX(-5px); } }
@keyframes shutter { 50% { opacity: 0; } }

.work-two { padding-bottom: clamp(7rem,9vw,10rem); background: #080808; color: #fff; }
.work-two .work-head span, .work-two .work-meta span { color: #aaa; }
.bvlgari-title h2 { max-width: 15ch; margin: 0; font-size: clamp(3rem,6.4vw,7.4rem); font-weight: 400; line-height: .88; letter-spacing: -.065em; transform: translate3d(var(--type-x), var(--type-y), 0); }
.bvlgari-layout { display: grid; grid-template-columns: minmax(0,7fr) minmax(17rem,4fr); gap: clamp(2.5rem,6vw,8rem); align-items: stretch; min-height: 0; padding-top: 0; }
.bvlgari-film { position: relative; height: min(72vh,52vw); overflow: hidden; background: #111; }
.corner { position: absolute; z-index: 4; width: 1rem; height: 1rem; border-color: rgba(255,255,255,.75); }
.corner.top-left { top: 1rem; left: 1rem; border-top: 1px solid; border-left: 1px solid; }
.corner.top-right { top: 1rem; right: 1rem; border-top: 1px solid; border-right: 1px solid; }
.corner.bottom-left { bottom: 1rem; left: 1rem; border-bottom: 1px solid; border-left: 1px solid; }
.corner.bottom-right { right: 1rem; bottom: 1rem; border-right: 1px solid; border-bottom: 1px solid; }
.bvlgari-type { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 1.5rem; }
.bvlgari-type .work-number { position: absolute; top: 0; right: 0; }
.vertical-label { position: absolute; top: 0; left: 0; margin: 0; font-size: .7rem; letter-spacing: .16em; writing-mode: vertical-rl; }

.work-three { padding-top: clamp(5.5rem,7vw,8rem); }
.lunasol-intro { position: relative; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr); align-content: end; overflow: hidden; }
.lunasol-intro h2 { position: relative; z-index: 2; max-width: 16ch; margin: 0; font-size: clamp(3rem,6.4vw,7.4rem); font-weight: 400; line-height: .88; letter-spacing: -.07em; transform: translate3d(var(--type-x), var(--type-y), 0); }
.lunasol-word { position: absolute; right: 0; bottom: 4%; margin: 0; color: rgba(8,8,8,.06); font: italic clamp(5rem,17vw,18rem)/.6 Georgia, serif; letter-spacing: -.07em; transform: translateX(var(--type-rx)); transition: transform 1.2s var(--ease); }
.lunasol-film { position: relative; width: 78%; height: min(74vh,53vw); margin-left: auto; overflow: hidden; background: #ddd; }
.lunasol-film::after { content: none; }
.lunasol-meta { width: 78%; margin: 1.5rem 0 0 auto; display: grid; grid-template-columns: repeat(3,1fr); }
.work-three > .project-signature { width: 78%; margin-left: auto; }

.work-five { padding-block: clamp(6rem,8vw,9rem) clamp(7rem,9vw,10rem); overflow: hidden; }
.chakra-title { position: relative; display: grid; grid-template-columns: minmax(0,1fr); align-items: end; min-height: 0; }
.chakra-title h2 { position: relative; z-index: 2; max-width: none; margin: 0; font: italic 400 clamp(2.8rem,5.6vw,6.5rem)/1 Georgia,serif; letter-spacing: -.065em; white-space: nowrap; transform: translate3d(var(--type-x), var(--type-y), 0); }
.chakra-title > span { position: absolute; right: 0; top: 10%; color: rgba(0,0,0,.06); font-size: clamp(5rem,15vw,18rem); font-weight: 700; white-space: nowrap; transform: translateX(var(--type-rx)); }
.chakra-stage { width: 82%; height: auto; min-height: 0; aspect-ratio: 16/9; margin: 0 0 0 auto; transform: rotate(-.5deg); }
.chakra-meta { width: 76%; margin: 1.5rem 0 0 auto; }
.work-five > .project-signature { width: 76%; margin-left: auto; }

.manifesto { padding: clamp(8rem,15vw,18rem) var(--gutter) clamp(8rem,12vw,14rem); overflow: hidden; background: #0a0a0a; color: #fff; }
.manifesto .section-label { margin: 0 0 12vh; }
.manifesto h2 { margin: 0; font-size: clamp(4.5rem,10.5vw,12rem); font-weight: 700; line-height: .82; letter-spacing: var(--tracking-display); text-wrap: balance; transform: translateY(var(--scroll-lift,0px)); transition: transform .18s linear; }
.manifesto h2 span { display: block; }
.manifesto h2 span:nth-child(2) { padding-left: 7vw; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.82); }
.manifesto h2 span:nth-child(3) { text-align: right; }
.manifesto-foot { display: grid; grid-template-columns: 2fr 5fr; gap: 2rem; align-items: end; margin-top: 11vh; padding-top: 1rem; border-top: 1px solid #555; }
.manifesto-foot p { margin: 0; font-size: .75rem; line-height: 1.8; letter-spacing: .08em; }
.manifesto-foot p:nth-child(2) { justify-self: center; }
.ambition-line { display: block; max-width: 25rem; margin-top: 1.2rem; color: #777; font-size: .58rem; font-weight: 400; letter-spacing: .18em; }

.more-works { padding: 10rem var(--gutter) 13rem; background: var(--paper); color: var(--ink); }
.more-heading { display: grid; grid-template-columns: minmax(9rem,1fr) minmax(0,3fr); gap: clamp(2rem,5vw,6rem); align-items: end; margin-bottom: clamp(7rem,10vw,11rem); }
.more-heading h2 { max-width: 12ch; margin: 0; font-size: clamp(4rem,8.5vw,9rem); line-height: .87; letter-spacing: var(--tracking-display); text-wrap: balance; }
.more-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(3.5rem,7vw,8rem) 1.5rem; align-items: start; }
.more-project { position: relative; min-width: 0; }
.more-film { position: relative; width: 100%; height: auto; aspect-ratio: 16/9; overflow: hidden; background: #151515; }
.more-title { padding-bottom: clamp(.7rem,1vw,1rem); }
.more-info { padding-top: .75rem; }
.more-info > span, .more-info > p { font-size: .7rem; letter-spacing: .14em; }
.more-info > span { display: none; }
.more-title h3 { max-width: 19ch; margin: 0; overflow-wrap: anywhere; font-size: clamp(2rem,4vw,4.8rem); line-height: .94; letter-spacing: -.045em; text-wrap: balance; transform: translate3d(var(--type-x), var(--type-y), 0); }
.has-japanese-title .more-title h3 { max-width: 100%; font-size: clamp(2rem,3.5vw,4.2rem); line-height: 1.16; letter-spacing: -.025em; overflow-wrap: normal; word-break: keep-all; }
.has-japanese-title .more-title h3 a { display: inline-block; max-width: 100%; }
.more-info p { margin: 0; }
.more-link { position: absolute; z-index: 4; right: 1.5rem; bottom: 1rem; width: 8rem; padding: .7rem .65rem; display: flex; justify-content: space-between; border: 0; border-bottom: 1px solid rgba(255,255,255,.82); background: rgba(8,8,8,.68); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; font-size: .7rem; letter-spacing: .14em; text-shadow: 0 1px 3px rgba(0,0,0,.75); transition: background .35s var(--ease), color .35s var(--ease); }
.more-link:hover { background: rgba(255,255,255,.9); color: #080808; text-shadow: none; }
.project-06 { grid-column: 1/9; }
.project-07 { grid-column: 6/13; margin-top: 12vw; }
.project-08 { grid-column: 1/9; }
.project-09 { grid-column: 5/13; margin-top: 8vw; }
.project-10 { grid-column: 2/12; }
.project-11 { grid-column: 1/9; }
.project-12 { grid-column: 6/13; margin-top: 9vw; }
.project-13 { grid-column: 2/11; }
.project-14 { grid-column: 5/13; margin-top: 8vw; }
.project-15 { grid-column: 1/9; }
.project-16 { grid-column: 4/12; margin-top: 10vw; }
.project-17 { grid-column: 1/9; }
.project-18 { grid-column: 6/13; margin-top: 7vw; }
.more-project:nth-child(6n + 1) { grid-column: 1/9; margin-top: 0; }
.more-project:nth-child(6n + 2) { grid-column: 6/13; margin-top: 12vw; }
.more-project:nth-child(6n + 3) { grid-column: 1/9; margin-top: 0; }
.more-project:nth-child(6n + 4) { grid-column: 5/13; margin-top: 8vw; }
.more-project:nth-child(6n + 5) { grid-column: 2/12; margin-top: 0; }
.more-project:nth-child(6n) { grid-column: 1/9; margin-top: 0; }

.people { position: relative; padding: 10rem var(--gutter) 12rem; overflow: hidden; background: #0a0a0a; }
.section-top { display: flex; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid #444; }
.section-top p { margin: 0; }
.people > h2 { position: relative; z-index: 2; max-width: 11ch; margin: 5rem 0 8rem; font-size: clamp(4.5rem,10vw,11rem); line-height: .82; letter-spacing: var(--tracking-display); text-wrap: balance; transform: translateY(var(--scroll-offset,0px)); }
.people-unt { position: absolute; z-index: 0; top: 19rem; right: -3vw; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.1); font-size: clamp(14rem,34vw,42rem); font-weight: 700; line-height: .7; letter-spacing: -.11em; pointer-events: none; transform: translateY(var(--scroll-drift,0px)); }
.people-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(7rem,11vw,13rem) 1.5rem; align-items: start; }
.person { min-width: 0; padding-bottom: 1.5rem; }
.person:nth-child(1) { grid-column: 1 / 5; }
.person:nth-child(2) { grid-column: 8 / 12; margin-top: 9rem; }
.person:nth-child(3) { grid-column: 3 / 7; }
.person:nth-child(4) { grid-column: 8 / 12; margin-top: 7rem; }
.person:nth-child(5) { grid-column: 1 / 5; }
.person:nth-child(6) { grid-column: 7 / 11; margin-top: 5rem; }
.portrait { position: relative; width: 80%; aspect-ratio: 4/5; margin: 0 0 1.5rem; overflow: hidden; background: #151515; isolation: isolate; }
.portrait-slices { position: absolute; inset: 0; overflow: hidden; transition: transform 1.1s var(--ease), filter .3s; }
.portrait img { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; object-position: 50% 45%; filter: grayscale(1) contrast(1.04); transition: transform 1.05s var(--ease), filter .8s var(--ease), opacity .45s; will-change: transform; }
.portrait-base { z-index: 1; transform: translate3d(var(--portrait-x,0),var(--portrait-y,0),0) scale(1.02); }
.portrait-slice { z-index: 2; opacity: 0; pointer-events: none; }
.slice-a { clip-path: inset(18% 0 56%); transform: translateX(var(--slice-a-x,0)); }
.slice-b { clip-path: inset(58% 0 18%); transform: translateX(var(--slice-b-x,0)); }
.person.is-portrait-active .portrait-base { filter: grayscale(.55) contrast(1.06); }
.person.is-portrait-active .portrait-slice { opacity: .2; }
.person.is-portrait-accent .portrait-slice { opacity: .68; filter: grayscale(1) contrast(1.12); }
.person.is-portrait-accent .slice-a { filter: drop-shadow(3px 0 rgba(230,230,225,.28)); }
.person.is-portrait-accent .slice-b { filter: drop-shadow(-3px 0 rgba(45,45,43,.45)); }
.portrait figcaption { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.portrait figcaption span { position: absolute; left: 1rem; top: 1rem; font-size: .7rem; letter-spacing: .15em; }
.portrait figcaption i { position: absolute; right: 1rem; bottom: 1rem; width: 2rem; height: 1px; background: rgba(255,255,255,.65); }
.person-word { position: absolute; z-index: 4; left: -4%; top: 50%; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.78); font-size: clamp(3.2rem,6.5vw,7.5rem); font-weight: 700; line-height: .72; letter-spacing: -.075em; white-space: nowrap; pointer-events: none; transform: translate3d(var(--slice-b-x,0),-50%,0); opacity: .64; mix-blend-mode: difference; transition: transform .8s var(--ease), opacity .35s, letter-spacing .5s var(--ease), filter .25s; }
.person-word.is-changing { animation: person-word-in .48s var(--ease); }
.person:hover .person-word { opacity: .88; letter-spacing: -.042em; filter: url(#unt-warp); }
.person.is-portrait-accent .person-word { text-shadow: -3px 0 rgba(225,225,220,.32),3px 0 rgba(42,42,40,.5); }
@keyframes person-word-in { from { opacity: 0; translate: 0 .8rem; filter: blur(5px); } }
.people-grid h3 { display: flex; flex-direction: column; gap: .25rem; margin: 0 0 .8rem; font-size: clamp(1rem,1.25vw,1.2rem); font-weight: 400; letter-spacing: -.02em; transition: letter-spacing .55s var(--ease), transform .65s var(--ease); }
.person:hover h3 { color: var(--hover-light); letter-spacing: 0; transform: translateX(3px); }
.people-grid h3 span { font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; font-size: .76em; letter-spacing: .04em; }
.people-grid p { margin: 0; color: #888; font-size: .72rem; letter-spacing: .11em; line-height: 1.6; text-transform: uppercase; }
.person-works { display: grid; gap: .42rem; margin: .85rem 0 0; padding: 0; list-style: none; }
.person-works li { overflow: hidden; margin: 0; padding: 0; border: 0; }
.person-works a { display: grid; grid-template-columns: minmax(4.8rem,.72fr) minmax(0,1.8fr); gap: .65rem; align-items: baseline; color: #aaa; font-size: .68rem; line-height: 1.32; letter-spacing: .035em; transition: color .2s, transform .45s var(--ease), opacity .25s; }
.person-work-client { color: #666; font-size: .59rem; letter-spacing: .09em; overflow-wrap: anywhere; text-transform: uppercase; }
.person-work-title { min-width: 0; }
.person-works a:hover { color: #fff; opacity: 1; transform: translateX(.28rem); }

.clients { padding: 9rem var(--gutter) 10rem; background: var(--paper); color: var(--ink); }
.clients .section-top { border-color: #aaa; }
.client-list { display: flex; flex-wrap: wrap; gap: .08em .25em; margin-top: 7rem; font-size: clamp(3.5rem,8.6vw,9.5rem); font-weight: 700; line-height: .9; letter-spacing: -.055em; text-transform: uppercase; }
.client-list span { transition: color .25s, transform .55s var(--ease); }
.client-list span:hover { color: var(--hover-dark); transform: translateY(-.04em); }
.client-list span::after { content: "/"; margin-left: .2em; color: #aaa; font-weight: 400; }

.expertise { position: relative; padding: clamp(7rem,12vw,13rem) var(--gutter); overflow: clip; background: #0b0b0b; color: #fff; }
.expertise .section-top { border-color: #353535; }
.expertise-intro { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(16rem,.45fr); gap: clamp(3rem,8vw,10rem); align-items: end; margin: clamp(6rem,10vw,12rem) 0 clamp(7rem,12vw,14rem); }
.expertise-intro h2 { margin: 0; font-size: clamp(5rem,11.5vw,14rem); line-height: .79; letter-spacing: var(--tracking-display); text-wrap: balance; }
.expertise-intro h2 span { display: block; }
.expertise-intro h2 span:last-child { padding-left: .42em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.75); }
.expertise-jp-title { margin: 0 0 .5rem; font-family: "Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; font-size: clamp(1.2rem,2vw,2.35rem); font-weight: 500; line-height: 1.45; letter-spacing: -.045em; }
.expertise-lead { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(22rem,.85fr); gap: clamp(4rem,9vw,11rem); align-items: start; margin-bottom: clamp(9rem,15vw,18rem); }
.expertise-statement { position: sticky; top: 9rem; margin: 0; font-size: clamp(2.2rem,4.25vw,5.2rem); font-weight: 600; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.expertise-body { display: grid; gap: clamp(3rem,5vw,6rem); }
.expertise-body p { margin: 0 0 1.4rem; color: #b7b7b7; font-size: clamp(.84rem,1vw,1rem); line-height: 2.05; line-break: strict; overflow-wrap: normal; text-wrap: pretty; word-break: normal; }
.expertise-body .lead-jp { color: #fff; font-size: clamp(1.2rem,1.65vw,1.8rem); font-weight: 500; line-height: 1.65; letter-spacing: -.025em; }
.expertise-body-en { max-width: 34rem; padding-left: 18%; }
.expertise-body-en p { color: #767676; font-size: clamp(.72rem,.85vw,.88rem); line-height: 1.85; hyphens: none; text-wrap: pretty; }
.service-grid { display: block; }
.service-grid article { position: relative; display: grid; grid-template-columns: minmax(5rem,1fr) minmax(0,5fr) minmax(15rem,2.2fr); grid-template-rows: auto auto 1fr auto; gap: 1.4rem clamp(2rem,5vw,7rem); min-height: min(78vh,50rem); padding: clamp(4rem,7vw,8rem) 0; align-content: center; }
.service-grid article::after { content: ""; position: absolute; left: 0; top: 50%; width: clamp(8rem,22vw,24rem); height: clamp(8rem,22vw,24rem); border: 1px solid rgba(255,255,255,.06); border-radius: 50%; transform: translate(-35%,-50%) scale(calc(.75 + var(--scroll-progress,0) * .08)); pointer-events: none; }
.service-grid article > span { grid-column: 1; grid-row: 1; color: #717171; font-size: .62rem; letter-spacing: .17em; }
.service-grid h3 { grid-column: 2 / -1; grid-row: 1; max-width: 13ch; margin: 0; font-size: clamp(3.5rem,8.2vw,10rem); line-height: .84; letter-spacing: var(--tracking-display); text-wrap: balance; transform: translate3d(0,var(--scroll-offset,0),0); }
.service-jp-lead { grid-column: 2; grid-row: 2; margin: 0; color: #fff; font-family: "Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; font-size: clamp(1.05rem,1.75vw,2rem); font-weight: 500; line-height: 1.55; letter-spacing: -.03em; line-break: strict; text-wrap: pretty; word-break: normal; }
.service-copy { grid-column: 2; grid-row: 3 / 5; max-width: 39rem; }
.service-grid .service-copy p { margin: 0 0 1rem; color: #aaa; font-size: clamp(.8rem,.92vw,.94rem); line-height: 1.95; line-break: strict; overflow-wrap: normal; text-wrap: pretty; word-break: normal; }
.service-grid .service-copy strong { color: #fff; font-weight: 500; }
.jp-phrase { font-weight: inherit; white-space: nowrap; }
.service-en-label { grid-column: 3; grid-row: 2; align-self: end; margin: 0; color: #fff; font-size: .64rem; line-height: 1.5; letter-spacing: .14em; text-wrap: balance; text-transform: uppercase; }
.service-en { grid-column: 3; grid-row: 3; max-width: 28rem; margin: 0; color: #777; font-size: .74rem; line-height: 1.85; hyphens: none; text-wrap: pretty; }
.service-grid article:nth-child(even) h3 { padding-left: 6vw; }
.production-faq { display: grid; grid-template-columns: minmax(16rem,.75fr) minmax(0,1.25fr); gap: clamp(4rem,9vw,12rem); margin-top: clamp(10rem,16vw,20rem); padding-top: clamp(4rem,7vw,8rem); }
.faq-heading { position: sticky; top: 8rem; align-self: start; }
.faq-heading h2 { margin: 0; font-size: clamp(3.5rem,7vw,8.5rem); line-height: .84; letter-spacing: var(--tracking-display); }
.faq-heading p { margin: 3rem 0 0; color: #aaa; font-family: "Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; font-size: clamp(.86rem,1vw,1rem); line-height: 1.8; }
.faq-list { min-width: 0; }
.production-faq details { position: relative; padding: clamp(2rem,3.2vw,3.8rem) 0; }
.production-faq summary { position: relative; padding: 0 clamp(3rem,5vw,6rem) 0 0; cursor: pointer; list-style: none; }
.production-faq summary::-webkit-details-marker { display: none; }
.production-faq summary::after { content: ""; position: absolute; right: .3rem; top: .55rem; width: 1.3rem; height: 1.3rem; border-right: 1px solid #666; border-bottom: 1px solid #666; transform: rotate(45deg); transition: transform .55s var(--ease),border-color .3s; }
.production-faq details[open] summary::after { border-color: var(--hover-light); transform: translateY(.55rem) rotate(225deg); }
.production-faq summary span { display: block; max-width: 24ch; font-family: "Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; font-size: clamp(1.35rem,2.25vw,2.8rem); font-weight: 500; line-height: 1.35; letter-spacing: -.045em; line-break: strict; text-wrap: pretty; word-break: normal; }
.production-faq summary small { display: block; margin-top: .85rem; color: #707070; font-size: .64rem; font-weight: 400; letter-spacing: .08em; }
.faq-answer { max-width: 42rem; padding: 2.2rem 8% 0 15%; }
.production-faq details p { margin: 0 0 1rem; color: #aaa; font-size: clamp(.78rem,.92vw,.94rem); line-height: 1.95; }
.production-faq details p:first-child { color: #fff; font-size: 1rem; }
.production-faq details strong { color: #fff; font-weight: 500; }

.contact { min-height: 100vh; padding: 4rem var(--gutter) 2rem; display: flex; flex-direction: column; background: #080808; color: #fff; }
.contact > .section-label { margin: 0; }
.contact-link { margin: 0; padding: clamp(8rem,15vh,12rem) 0; display: block; }
.contact-link > span { display: block; margin-bottom: 2rem; font-size: .75rem; letter-spacing: .16em; }
.contact-link strong { display: block; max-width: 12ch; font-size: clamp(4.7rem,10.6vw,12rem); line-height: .82; letter-spacing: var(--tracking-display); text-wrap: balance; transition: color var(--normal), transform .8s var(--ease), letter-spacing .8s var(--ease); }
.contact-link:hover strong { color: var(--hover-light); letter-spacing: -.057em; transform: translateX(.45vw); }
.contact-link em { display: block; width: max-content; margin-top: 3rem; padding-bottom: .7rem; border-bottom: 1px solid; font-size: .8rem; font-style: normal; letter-spacing: .15em; transition: padding-right .5s var(--ease); }
.contact-link:hover em { padding-right: 2rem; }
.contact-link small { display: block; width: max-content; margin-top: 1.4rem; color: #aaa; font-size: .72rem; letter-spacing: .16em; transition: color .3s; }
.contact-link:hover small { color: #fff; }
.contact-location { display: grid; grid-template-columns: minmax(14rem,1fr) minmax(0,2.2fr); gap: clamp(2rem,6vw,7rem); align-items: stretch; margin: 0 0 clamp(7rem,12vw,12rem); padding-top: 1rem; border-top: 1px solid #444; }
.location-copy { display: flex; flex-direction: column; align-items: flex-start; }
.location-copy p { margin: 0 0 2.5rem; color: #777; font-size: .7rem; letter-spacing: .16em; }
.location-copy strong { font-size: clamp(1.65rem,2.8vw,3.4rem); line-height: 1.03; letter-spacing: -.065em; }
.location-copy strong span { display: block; margin-top: .4em; font-size: .56em; letter-spacing: -.025em; }
.location-copy address { margin: auto 0 2rem; color: #aaa; font-size: .76rem; font-style: normal; line-height: 1.8; letter-spacing: .08em; }
.location-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; }
.location-actions a { padding-bottom: .45rem; border-bottom: 1px solid #777; font-size: .67rem; letter-spacing: .14em; }
.map-frame { position: relative; min-height: clamp(19rem,35vw,34rem); overflow: hidden; background: #061326; isolation: isolate; }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) sepia(.42) hue-rotate(165deg) saturate(1.45) brightness(.64) contrast(1.12); transition: filter .65s var(--ease); }
.map-frame:hover iframe, .map-frame:focus-within iframe { filter: none; }
.map-frame::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(147,178,214,.2); background: rgba(4,23,50,.2); pointer-events: none; transition: opacity .65s var(--ease); }
.map-frame:hover::after, .map-frame:focus-within::after { opacity: 0; }
.map-route { position: absolute; z-index: 2; top: 1rem; right: 1rem; padding: .7rem .85rem; background: #101010; color: #fff; font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-decoration: none; transition: background .2s ease; }
.map-route:hover, .map-route:focus-visible { background: #3b3b39; }
.contact footer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; padding-top: 1.5rem; border-top: 1px solid #444; font-size: .7rem; line-height: 1.6; letter-spacing: .13em; }
.contact footer p { margin: 0; }
.contact footer p:nth-child(2) { justify-self: center; }
.contact footer a { justify-self: end; }
.contact footer .corporate-link { display: inline-flex; align-items: center; gap: .5rem; justify-self: auto; color: #fff; }
.corporate-link .external-mark { color: var(--accent); }

.film-dialog { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: var(--gutter); border: 0; background: #050505; color: #fff; }
.film-dialog::backdrop { background: #050505; }
.dialog-frame { position: absolute; inset: 8vh var(--gutter); }
.dialog-frame iframe { width: 100%; height: 100%; border: 0; }
.dialog-close { position: absolute; z-index: 2; top: 1.5rem; right: var(--gutter); padding: .5rem 0; border: 0; border-bottom: 1px solid; background: transparent; cursor: pointer; font-size: .72rem; letter-spacing: .15em; }
.dialog-title { position: absolute; left: var(--gutter); bottom: 1.5rem; margin: 0; font-size: .72rem; letter-spacing: .15em; }
.film-dialog.is-protected .dialog-frame { overflow: hidden; }
.protected-preview { position: absolute; inset: -2%; width: 104% !important; height: 104% !important; filter: saturate(.28) brightness(.5) contrast(1.05); pointer-events: none; }
.protected-message { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(42rem,calc(100% - 2rem)); transform: translate(-50%,-50%); text-align: center; }
.protected-message p { margin: 0 0 1.1rem; font-size: clamp(.72rem,1vw,.9rem); line-height: 1.8; letter-spacing: .04em; }
.protected-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.protected-actions button, .protected-actions a { padding: .8rem 1rem; border: 1px solid rgba(255,255,255,.62); background: rgba(8,8,8,.7); color: #fff; font: inherit; font-size: .68rem; letter-spacing: .12em; cursor: pointer; backdrop-filter: blur(8px); transition: background .25s,color .25s,transform .35s var(--ease); }
.protected-actions button:hover, .protected-actions a:hover { background: #fff; color: #080808; transform: translateY(-2px); }

@media (max-width: 700px) {
  :root { --gutter: 1.25rem; }
  .particle-canvas { opacity: .68; }
  .site-header { height: 4.5rem; grid-template-columns: 1fr 1fr; }
  .header-index { display: none; }
  .contact-dock { left: 1rem; right: auto; bottom: max(1rem,env(safe-area-inset-bottom)); max-width: calc(100% - 7rem); gap: .55rem; padding: .55rem .65rem; }
  .contact-dock > span { display: none; }
  .contact-dock a { font-size: .62rem; }
  .contact-dock a + a { padding-left: .55rem; font-size: 0; }
  .contact-dock a + a::before { content: "IG"; font-size: .62rem; }
  .hero { min-height: 38rem; }
  .hero-copy { top: 47%; }
  .hero-copy { right: .75rem; overflow: hidden; }
  .hero-copy h1 { max-width: 100%; font-size: clamp(3rem,14vw,5.2rem); line-height: .79; }
  .hero-copy h1 span { max-width: 100%; overflow: hidden; }
  .hero-copy h1 span:nth-child(2) { padding-left: 0; }
  .hero-note { max-width: 16rem; text-align: left; }
  .object-code, .object-frame { display: none; }
  .object-rec { left: auto; right: 6%; top: 24%; }
  .object-axis { left: 8%; bottom: 19%; }
  .hero-footer { grid-template-columns: minmax(0,1fr) auto; gap: 1rem; font-size: .58rem; }
  .hero-footer > span:first-child { display: none; }
  .hero-footer a { width: 1rem; overflow: visible; justify-self: end; white-space: nowrap; font-size: 0; }
  .hero-footer a b { margin: 0; font-size: .7rem; }
  .hero-footer span:last-child { display: none; }
  .menu a { font-size: 16vw; }
  .work { padding-block: 4.5rem 5rem; }
  .work-head p:last-child { display: none; }
  .work-stage { min-height: 24rem; height: 68vh; }
  .creative-type strong { left: -7%; font-size: clamp(5rem,25vw,9rem); -webkit-text-stroke-width: 1px; }
  .creative-type p { left: 1rem; bottom: 1rem; max-width: calc(100% - 7rem); padding-left: 2.5rem; font-size: .52rem; letter-spacing: .16em; white-space: normal; }
  .creative-type p::before { width: 1.8rem; }
  [data-project="2"] .creative-type strong,
  [data-project="6"] .creative-type strong,
  [data-project="8"] .creative-type strong,
  [data-project="16"] .creative-type strong { left: 7%; top: 8%; font-size: clamp(2.5rem,12vw,4.6rem); }
  [data-project="2"] .creative-type p,
  [data-project="6"] .creative-type p,
  [data-project="8"] .creative-type p,
  [data-project="16"] .creative-type p { right: 1rem; bottom: 4.5rem; }
  [data-project="5"] .creative-type strong { font-size: clamp(8rem,37vw,14rem); }
  [data-project="7"] .creative-type strong { left: -20%; font-size: clamp(7rem,30vw,11rem); }
  [data-project="9"] .creative-type strong { left: 26%; font-size: clamp(7rem,28vw,11rem); }
  [data-project="10"] .creative-type strong { left: 12%; font-size: clamp(7rem,32vw,12rem); }
  .featured-title { margin-top: 1.2rem; margin-bottom: .65rem; }
  .work-title-row { grid-template-columns: 1fr; }
  .work-title-row h2, .bvlgari-title h2 { max-width: 100%; font-size: clamp(2.2rem,10.8vw,4.2rem); line-height: .9; overflow-wrap: anywhere; }
  .work-meta { grid-column: auto; margin-top: 1rem; }
  .work-one-meta { grid-template-columns: 1fr; }
  .bvlgari-layout { display: block; min-height: auto; padding-top: 0; }
  .bvlgari-film { height: 65vh; }
  .bvlgari-type { min-height: 0; padding: 1rem 0 0; }
  .vertical-label { position: static; margin-bottom: .8rem; writing-mode: horizontal-tb; }
  .lunasol-intro { min-height: 0; grid-template-columns: 1fr; }
  .lunasol-intro h2 { max-width: 100%; font-size: clamp(2.2rem,10.8vw,4.2rem); line-height: .9; }
  .lunasol-film, .lunasol-meta { width: calc(100% - 2rem); }
  .work-three > .project-signature { width: calc(100% - 2rem); }
  .lunasol-film { height: 62vh; }
  .lunasol-meta { grid-template-columns: 1fr; }
  .chakra-stage { width: 100%; height: 62vh; min-height: 27rem; margin: 4rem 0 0; transform: none; }
  .work-five > .project-signature { width: 100%; }
  .chakra-meta { width: 100%; grid-template-columns: 1fr; margin-left: 0; }
  .chakra-title { min-height: 0; grid-template-columns: 1fr; }
  .chakra-title h2 { max-width: none; font-size: clamp(1.62rem,7.1vw,3rem); line-height: 1; letter-spacing: -.075em; white-space: nowrap; }
  .chakra-stage { margin-top: 0; }
  .manifesto h2 { font-size: 15vw; }
  .manifesto h2 span:nth-child(2) { padding-left: 0; }
  .manifesto h2 span:nth-child(3) { text-align: left; }
  .manifesto-foot { grid-template-columns: 1fr; }
  .manifesto-foot p:nth-child(2) { grid-column: 1/-1; grid-row: 2; justify-self: start; }
  .more-heading { display: block; margin-bottom: 7rem; }
  .more-heading h2 { margin-top: 3rem; font-size: 15vw; }
  .more-grid { display: block; }
  .more-project { width: 100%; margin: 0 0 5.5rem; }
  .more-project .more-film { height: auto; min-height: 0; aspect-ratio: 16/9; }
  .more-title h3 { max-width: 100%; font-size: clamp(2rem,9vw,3.5rem); line-height: .94; }
  .has-japanese-title .more-title h3 { font-size: clamp(2rem,8vw,3.4rem); line-height: 1.1; }
  .people > h2 { margin: 4rem 0 6rem; font-size: 15vw; }
  .people-grid { grid-template-columns: 1fr 1fr; gap: 5rem 1rem; }
  .person:nth-child(n) { grid-column: auto; margin-top: 0; }
  .person:nth-child(even) { margin-top: 4rem; }
  .person-word { font-size: clamp(2.3rem,12vw,4rem); }
  .project-signature { align-items: flex-start; flex-direction: column; gap: .35rem; font-size: .57rem; }
  .project-signature ul { justify-content: flex-start; gap: .3rem .8rem; }
  .bvlgari-layout > .project-signature { margin-top: .8rem; }
  .portrait { width: 100%; aspect-ratio: 4/5; }
  .client-list { font-size: 12vw; }
  .expertise-intro { grid-template-columns: 1fr; gap: 3rem; margin-block: 5rem 8rem; }
  .expertise-intro h2 { font-size: 22vw; }
  .expertise-intro h2 span:last-child { padding-left: 0; }
  .expertise-jp-title { font-size: 1.25rem; }
  .expertise-lead { grid-template-columns: 1fr; gap: 4rem; margin-bottom: 8rem; }
  .expertise-statement { position: static; font-size: 10.5vw; }
  .expertise-body-en { padding-left: 12%; }
  .service-grid article { display: block; min-height: 0; padding: 6.5rem 0; }
  .service-grid article::after { top: 5rem; width: 11rem; height: 11rem; }
  .service-grid article > span { display: block; margin-bottom: 3rem; }
  .service-grid h3, .service-grid article:nth-child(even) h3 { max-width: 9ch; margin: 0 0 1.8rem; padding-left: 0; font-size: 17vw; transform: none; }
  .service-jp-lead { margin-bottom: 2.5rem; font-size: 1.15rem; }
  .service-copy { max-width: 31rem; }
  .service-en-label { margin-top: 3rem; }
  .service-en { margin-top: .85rem; }
  .production-faq { grid-template-columns: 1fr; gap: 6rem; margin-top: 9rem; }
  .faq-heading { position: static; }
  .faq-heading h2 { font-size: 19vw; }
  .production-faq details { padding: 2.4rem 0; }
  .production-faq summary span { font-size: 1.35rem; }
  .faq-answer { padding: 2rem 0 0 10%; }
  .contact-link strong { font-size: 14vw; }
  .contact-location { grid-template-columns: 1fr; gap: 3rem; margin-bottom: 6rem; }
  .location-copy address { margin: 3rem 0 2rem; }
  .map-frame { min-height: 16rem; }
  .contact footer { grid-template-columns: 1fr auto; }
  .contact footer p:nth-child(2) { display: none; }
  .hero-identity strong, .project-identity strong { font-size: 30vw; opacity: .21; }
}

@media (pointer: coarse) {
  .grain-canvas, .motion-field { display: none; }
  .cursor-focus { z-index: 20; width: clamp(5.5rem,26.4vw,8.4rem); }
  .hero-identity i, .hero-identity b, .project-identity i, .project-identity b { opacity: .12; }
  .portrait-slice { display: none; }
  .work-film { transform: translate3d(var(--film-x),calc(var(--scroll-offset,0px) + var(--film-y)),0) scale(calc(1.035 + var(--fx-scale))) skewX(var(--warp-skew)); filter: saturate(.5) contrast(1.15) brightness(.86); will-change: auto; }
  .portrait img { will-change: auto; }
  .contact-dock, .play-control, .more-link, .tilt-toggle { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tilt-toggle { position: fixed; z-index: 29; right: max(1rem,env(safe-area-inset-right)); bottom: max(1rem,env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border: 1px solid rgba(255,255,255,.72); border-radius: 0; background: rgba(8,8,8,.9); color: #fff; font-size: .875rem; letter-spacing: .12em; }
  .tilt-toggle b { color: var(--accent); font-weight: 700; }
  .tilt-toggle[data-state="on"] { background: var(--accent); border-color: var(--accent); }
  .tilt-toggle[data-state="on"] b { color: #080808; }
  .is-mobile-motion .film-layer, .is-mobile-motion .work-film, .is-mobile-motion .hero-copy, .is-mobile-motion h2, .is-mobile-motion h3, .is-mobile-motion .hero-identity strong, .is-mobile-motion .project-identity strong, .is-mobile-motion .creative-type, .is-mobile-motion .creative-type p, .is-mobile-motion .motion-field i, .is-mobile-motion .motion-field b, .is-mobile-motion .motion-field span { transition-duration: .16s; transition-timing-function: linear; }
  .is-mobile-motion .hero-copy, [data-project].is-mobile-motion h2, [data-project].is-mobile-motion h3 { filter: drop-shadow(var(--type-rx) var(--type-ry) 0 rgba(255,255,255,.12)); }
  .is-mobile-motion .hero-footer, [data-project].is-mobile-motion .work-head, [data-project].is-mobile-motion .work-meta, [data-project].is-mobile-motion .more-info, [data-project].is-mobile-motion .project-signature { transform: translate3d(var(--type-rx),var(--type-ry),0); transition: transform .16s linear; }
  .is-mobile-motion .hero-grid, [data-project].is-mobile-motion .work-grid { opacity: .62; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .opening, .grain-canvas, .particle-canvas, .cursor-focus, .hero-identity, .project-identity, .motion-field { display: none; }
  .tilt-toggle { display: none !important; }
  .site-header, .contact-dock, .hero-kicker, .hero-note, .motion-object, .hero-footer, .hero-copy h1 span { opacity: 1 !important; animation: none !important; }
  .film-layer { opacity: 1 !important; }
  .film-layer, .hero-copy, .hero-copy h1 span, [data-project] h2, [data-project] h3, .creative-type, .creative-type strong, .creative-type p { transform: none !important; translate: none !important; filter: none !important; }
  .work-film { transform: none !important; filter: saturate(.55) contrast(1.2) brightness(.85) !important; }
}