:root { color-scheme: dark; --ground: #000; --ink: #f5f5f7; --font: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --gaze-opacity: 0; --black: 0; --cue-opacity: 1; --copy-reveal: 0; }
* { box-sizing: border-box; }
html { background: var(--ground); scroll-behavior: auto; }
body { margin: 0px; background: var(--ground); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible, #gaze:focus-visible { outline: rgb(41, 151, 255) solid 2px; outline-offset: -4px; }
.skip { position: fixed; top: -80px; left: 24px; z-index: 9; background: var(--ink); color: var(--ground); padding: 16px; }
.skip:focus { top: 12px; }
.sequence { height: 500svh; }
.stage { position: sticky; top: 0px; height: 100svh; overflow: hidden; background: var(--ground); isolation: isolate; }
.poster, #film, .blackout { position: absolute; inset: 0px; width: 100%; height: 100%; }
.poster { object-fit: cover; object-position: center center; }
#film { display: block; }
.blackout { z-index: 2; background: rgb(0, 0, 0); opacity: var(--black); pointer-events: none; }
.scroll-cue { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 11px; color: var(--ink); font-size: 13px; background: rgb(29, 29, 31); border-radius: 999px; padding: 12px 19px; opacity: var(--cue-opacity); z-index: 3; pointer-events: none; }
.scroll-mark { height: 23px; width: 15px; border: 1.5px solid; border-radius: 10px; display: flex; justify-content: center; padding-top: 4px; }
.scroll-mark span { height: 5px; width: 2px; background: currentcolor; border-radius: 2px; }
.no-script { position: fixed; bottom: 0px; left: 0px; background: rgb(0, 0, 0); padding: 16px; z-index: 8; }
.poster, #film { filter: sepia(0.28) saturate(0.68) contrast(0.94) brightness(1.025); }
#grain { position: absolute; inset: 0px; width: 100%; height: 100%; z-index: 1; pointer-events: none; mix-blend-mode: soft-light; opacity: 0.36; image-rendering: pixelated; }
.camera-view { position: absolute; inset: 0px; z-index: 1; pointer-events: none; color: rgb(255, 255, 255); mix-blend-mode: difference; font-size: 14px; font-weight: 500; letter-spacing: 0.09em; font-variant-numeric: tabular-nums; }
.camera-rec { position: absolute; left: 64px; top: 40px; display: flex; align-items: center; gap: 9px; }
.camera-rec i { width: 8px; height: 8px; border-radius: 50%; background: currentcolor; }
.camera-time { position: absolute; right: 64px; top: 40px; }
.camera-format { position: absolute; bottom: 42px; left: 64px; font-size: 12px; }
.camera-battery { position: absolute; bottom: 44px; right: 64px; width: 29px; height: 14px; border: 1.5px solid; border-radius: 2px; }
.camera-battery::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 5px; background: currentcolor; }
.camera-battery i { position: absolute; inset: 2px 7px 2px 2px; background: currentcolor; }
.view-corner { position: absolute; width: 24px; height: 24px; border-color: currentcolor; border-style: solid; border-width: 0px; }
.top-left { left: 40px; top: 72px; border-top-width: 1px; border-left-width: 1px; }
.top-right { right: 40px; top: 72px; border-top-width: 1px; border-right-width: 1px; }
.bottom-left { left: 40px; bottom: 72px; border-bottom-width: 1px; border-left-width: 1px; }
.bottom-right { right: 40px; bottom: 72px; border-bottom-width: 1px; border-right-width: 1px; }
.cinematic-ended #film, .cinematic-ended .poster, .cinematic-ended #grain, .cinematic-ended .camera-view { visibility: hidden !important; }
.gaze-scene { position: absolute; inset: 0px; z-index: 3; opacity: var(--gaze-opacity); isolation: isolate; }
.gaze-scene[inert] { visibility: hidden; pointer-events: none; }
#gaze { display: block; width: 100%; height: 100%; object-fit: contain; touch-action: pan-y; }
@media (max-width: 900px) {
  .scroll-cue { bottom: 26px; }
  .camera-view { font-size: 12px; }
  .camera-rec { left: 28px; top: 28px; }
  .camera-time { right: 28px; top: 28px; }
  .camera-format { left: 28px; bottom: 94px; font-size: 11px; }
  .camera-battery { right: 28px; bottom: 96px; }
  .view-corner { width: 18px; height: 18px; }
  .top-left { left: 20px; top: 56px; }
  .top-right { right: 20px; top: 56px; }
  .bottom-left { left: 20px; bottom: 126px; }
  .bottom-right { right: 20px; bottom: 126px; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { scroll-behavior: auto !important; transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
}
.scroll-cue[aria-hidden="true"] { visibility: hidden; }
.clapper-cursor { position: fixed; left: 0px; top: 0px; width: 52px; height: 52px; z-index: 20; pointer-events: none; will-change: transform; contain: layout style; }
.clapper-cursor[hidden] { display: none; }
.clapper-motion { position: absolute; left: -8px; top: -19px; width: 52px; height: 52px; transform: rotate(-12deg); transform-origin: 14% 38%; }
.clapper-motion img { position: absolute; inset: 0px; width: 100%; height: 100%; user-select: none; }
.clapper-arm { clip-path: polygon(10% 30%, 100% 0px, 100% 30%, 25% 44%, 20% 38%); transform-origin: 12.5% 35.5%; transform: rotate(0deg); }
.clapper-base { clip-path: polygon(0px 30%, 10% 30%, 29% 42%, 100% 42%, 100% 100%, 0px 100%); }
@media (hover: hover) and (pointer: fine) {
  body.clapper-active, body.clapper-active * { cursor: none !important; }
}
.stage { background: rgb(247, 244, 236); }
.poster, #film { z-index: 1; pointer-events: none; }
.poster { mask-image: url("assets/mattes/0000.webp"); mask-size: cover; mask-position: center center; }
.portfolio-backdrop { position: absolute; inset: 0px; z-index: 0; color: rgb(17, 17, 17); pointer-events: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.portfolio-backdrop h1 { position: absolute; left: 6.2%; top: 25.5%; margin: 0px; font-size: clamp(40px, 5.5vw, 108px); font-weight: 300; line-height: 0.99; letter-spacing: -0.055em; }
.portfolio-backdrop .copy-secondary { color: rgb(87, 87, 87); }
.portfolio-intro { position: absolute; right: 5.3%; top: 30.6%; width: 20.6%; margin: 0px; font-size: clamp(15px, 1.32vw, 24px); font-weight: 300; line-height: 1.28; letter-spacing: -0.035em; }
.camera-view { z-index: 0; }
.blackout { z-index: 3; }
.gaze-scene { z-index: 4; }
.scroll-cue { z-index: 4; top: auto; bottom: 30px; }
.cinematic-ended .portfolio-backdrop { visibility: hidden; }
.copy-word { display: inline-block; white-space: nowrap; overflow: visible; vertical-align: baseline; }
.copy-letter { display: inline-block; opacity: 0; transform: translate3d(0px, 0.55em, 0px); transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) {
  .copy-letter { transform: none !important; }
}
@media (max-aspect-ratio: 1 / 1) {
  .portfolio-backdrop h1 { top: 16%; left: 5%; font-size: clamp(30px, 5.8vw, 58px); }
  .portfolio-intro { top: 25%; left: auto; right: 5%; width: 30%; font-size: clamp(14px, 2.2vw, 18px); line-height: 1.35; }
  .poster { visibility: hidden; }
}
@media (max-width: 480px) {
  .portfolio-backdrop h1 { font-size: 7.6vw; top: 16%; left: 5%; }
  .portfolio-intro { top: 27%; right: 5%; width: 42%; font-size: 14px; line-height: 1.35; }
  .scroll-cue { font-size: 11px; padding: 9px 14px; top: auto; bottom: 26px; }
}
.camera-view { opacity: 0; }
#grain { opacity: 0; }
.scroll-cue > span { opacity: 0; }
.opening-ready .camera-view { animation: 1000ms cubic-bezier(0.16, 1, 0.3, 1) 60ms 1 normal both running camera-opening; }
.opening-ready .camera-view > span, .opening-ready .camera-view:not(.scene-camera) > .brand-signature { animation: 650ms cubic-bezier(0.16, 1, 0.3, 1) 220ms 1 normal both running camera-detail; }
.opening-ready .camera-view .camera-format, .opening-ready .camera-view .camera-battery { animation-delay: 380ms; }
.opening-ready #grain { animation: 1100ms ease-out 0s 1 normal both running grain-opening; }
.opening-ready .scroll-cue > span { animation: 850ms cubic-bezier(0.16, 1, 0.3, 1) 850ms 1 normal both running cue-opening; }
.opening-ready .scroll-cue > span:last-child { animation-delay: 950ms; }
.opening-ready:not(.has-scrolled) .scroll-mark span { animation: 1600ms cubic-bezier(0.45, 0, 0.25, 1) 1700ms infinite normal none running scroll-nudge; }
@keyframes camera-opening { 
  0% { opacity: 0; transform: scale(1.035); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes camera-detail { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes grain-opening { 
  0% { opacity: 0; }
  100% { opacity: 0.36; }
}
@keyframes cue-opening { 
  0% { opacity: 0; transform: translate3d(0px, 12px, 0px); }
  100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes scroll-nudge { 
  0%, 100% { transform: translateY(0px); opacity: 1; }
  60% { transform: translateY(5px); opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .camera-view, .scroll-cue > span { opacity: 1; }
  #grain { opacity: 0.36; }
}
.intro-word { display: inline-block; opacity: 0; transform: translate3d(0px, 14px, 0px); }
@media (prefers-reduced-motion: reduce) {
  .intro-word { transform: none !important; }
}
.opening-ready:not(.has-scrolled) .scroll-cue { animation: 2600ms ease-in-out 1800ms infinite normal none running cue-breathe; }
@keyframes cue-breathe { 
  0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0px) scale(1); }
  50% { opacity: 0.55; transform: translateX(-50%) translateY(-3px) scale(1.015); }
}
.scroll-cue { background: transparent; isolation: isolate; }
.scroll-cue::before { content: ""; position: absolute; inset: 0px; z-index: -1; border-radius: inherit; background: rgb(29, 29, 31); opacity: 0; }
.opening-ready .scroll-cue::before { animation: 850ms cubic-bezier(0.16, 1, 0.3, 1) 850ms 1 normal both running cue-opening; }
.opening-ready .scroll-cue > span:last-child { animation-delay: 850ms; }
@media (prefers-reduced-motion: reduce) {
  .scroll-cue::before { opacity: 1; }
}
.gaze-content { position: absolute; inset: 0px; pointer-events: none; color: rgb(245, 245, 247); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.gaze-title { position: absolute; left: 6.5%; top: 28%; margin: 0px; font-size: clamp(42px, 4.6vw, 88px); font-weight: 300; line-height: 0.99; letter-spacing: -0.035em; opacity: 0; }
.gaze-title > span { color: rgb(150, 150, 148); }
.gaze-description { position: absolute; right: 8.2%; top: 40.5%; width: 18%; margin: 0px; color: rgb(196, 196, 196); font-size: clamp(15px, 1.25vw, 23px); font-weight: 300; line-height: 1.35; letter-spacing: -0.025em; opacity: 0; }
.gaze-options { position: absolute; left: 6%; right: 6%; bottom: 11.5%; display: flex; justify-content: space-between; gap: 8%; height: 28%; }
.portfolio-option { position: relative; display: block; width: 44.5%; height: 100%; padding: 0px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 24px; background: rgb(9, 9, 9); color: rgb(255, 255, 255); text-align: left; font: inherit; overflow: hidden; pointer-events: auto; opacity: 0; isolation: isolate; transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1), border-color 500ms, box-shadow 500ms; }
.option-photo { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1), filter 650ms; filter: brightness(0.8); }
.option-events .option-photo { object-position: 58% 50%; }
.option-services .option-photo { object-position: 68% 50%; }
.portfolio-option::after { content: ""; position: absolute; inset: 0px; z-index: 0; background: linear-gradient(90deg, rgb(5, 5, 5) 0%, rgba(5, 5, 5, 0.9) 22%, rgba(5, 5, 5, 0.3) 58%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
.option-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(18px, 2vw, 32px); height: 100%; justify-content: center; }
.option-kicker { font-size: clamp(12px, 1vw, 15px); font-weight: 400; letter-spacing: -0.01em; margin-bottom: 8px; color: rgb(210, 210, 215); }
.option-title { font-family: var(--font); font-size: clamp(30px, 3.2vw, 52px); font-weight: 600; line-height: 1.05; letter-spacing: -0.045em; }
.option-description { font-size: clamp(13px, 1.1vw, 17px); font-weight: 400; line-height: 1.3; color: rgb(222, 222, 222); margin-top: 12px; }
.option-arrow { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 50%; font-size: 22px; margin-top: 16px; transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), background 400ms, color 400ms; }
.portfolio-option:focus-visible { outline: rgb(255, 255, 255) solid 2px; outline-offset: 5px; }
@media (hover: hover) {
  .portfolio-option:hover { transform: translateY(-7px); border-color: rgba(255, 255, 255, 0.65); box-shadow: rgba(0, 0, 0, 0.533) 0px 14px 45px; }
  .portfolio-option:hover .option-photo { transform: scale(1.06); filter: brightness(1); }
  .portfolio-option:hover .option-arrow { transform: translateX(5px) rotate(45deg); background: rgb(255, 255, 255); color: rgb(17, 17, 17); }
}
.portfolio-option:active { transform: translateY(-2px) scale(0.99); }
@media (max-aspect-ratio: 1 / 1) {
  .gaze-title { top: 13%; left: 5%; font-size: clamp(34px, 6vw, 60px); }
  .gaze-description { right: 5%; top: 25%; width: 28%; font-size: clamp(14px, 2.2vw, 18px); }
  .gaze-options { left: 4%; right: 4%; bottom: 7%; height: 24%; gap: 4%; }
  .portfolio-option { width: 48%; border-radius: 18px; }
  .option-content { padding: 18px; }
  .option-description { font-size: 12px; }
  .option-arrow { width: 30px; height: 30px; font-size: 18px; margin-top: 12px; }
}
@media (max-width: 480px) {
  .gaze-title { top: 9%; font-size: 8vw; }
  .gaze-description { top: 25%; width: 41%; font-size: 13px; }
  .gaze-options { bottom: 6%; height: 23%; gap: 3%; }
  .portfolio-option { width: 48.5%; border-radius: 14px; }
  .option-content { padding: 12px; }
  .option-title { font-size: 28px; }
  .option-kicker { font-size: 8px; }
  .option-description { font-size: 11px; margin-top: 8px; }
  .option-photo { left: 0px; }
  .portfolio-option::after { background: linear-gradient(90deg, rgba(5, 5, 5, 0.93), rgba(5, 5, 5, 0.333)); }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-option, .option-photo, .option-arrow { transition: none !important; }
  .portfolio-option:hover, .portfolio-option:hover .option-photo, .portfolio-option:hover .option-arrow { transform: none; }
}
.gaze-content { font-family: var(--font); }
@media (min-aspect-ratio: 1 / 1) and (min-width: 900px) {
  .gaze-title { font-size: clamp(52px, 4.8vw, 86px); font-weight: 400; letter-spacing: -0.05em; line-height: 1.02; top: 27%; }
  .gaze-description { font-size: clamp(17px, 1.35vw, 22px); width: 21%; right: 6.5%; top: 39%; line-height: 1.4; letter-spacing: -0.02em; }
  .option-content { padding: 26px 30px; }
  .option-description { line-height: 1.4; margin-top: 10px; }
  .option-arrow { width: 34px; height: 34px; font-size: 20px; margin-top: 14px; }
  .portfolio-option { border-radius: 24px; border-color: rgba(255, 255, 255, 0.15); }
}
#gaze { opacity: 0; }
.option-arrow { flex: 0 0 auto; aspect-ratio: 1 / 1; box-sizing: border-box; line-height: 1; }
.portfolio-option:disabled { pointer-events: none; }
@media (min-width: 900px) and (min-aspect-ratio: 1 / 1) {
  .gaze-options { left: 6.5%; right: 6.5%; bottom: 10%; height: 23%; gap: 0px; }
  .portfolio-option { width: 34%; max-width: 430px; border-radius: 20px; }
  .option-content { padding: 20px 24px; }
  .option-kicker { font-size: 12px; margin-bottom: 5px; }
  .option-title { font-size: clamp(28px, 2.5vw, 40px); }
  .option-description { font-size: clamp(12px, 1vw, 15px); line-height: 1.35; margin-top: 8px; }
  .option-arrow { width: 32px; height: 32px; min-width: 32px; min-height: 32px; font-size: 19px; margin-top: 12px; }
}
.story-position { position: absolute; pointer-events: none; }
.story-position[hidden], .scene-choices[hidden], .gaze-options[hidden], .portfolio-back[hidden] { display: none !important; }
.story-left { left: 6.5%; top: 27%; width: 38%; }
.story-right { right: 6.5%; top: 29%; width: 30%; }
.story-chest { left: 0px; top: 60%; width: 100%; text-align: center; }
.story-line { margin: 0px; font-size: clamp(44px, 4.5vw, 82px); font-weight: 400; line-height: 1.02; letter-spacing: -0.05em; opacity: 0; }
.story-line span { color: rgb(150, 150, 148); }
.story-chest .story-line { font-size: clamp(40px, 4vw, 72px); text-shadow: rgba(0, 0, 0, 0.533) 0px 2px 24px; }
.scene-choices { position: absolute; left: 0px; right: 0px; bottom: 12%; display: flex; align-items: center; justify-content: center; gap: 16px; pointer-events: none; }
.scene-choice { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 50px; padding: 0px 24px; border: 1px solid transparent; border-radius: 999px; font-family: var(--font); font-size: 15px; font-weight: 500; letter-spacing: -0.025em; background: rgb(245, 245, 247); color: rgb(22, 22, 23); white-space: nowrap; transition: background 300ms, box-shadow 300ms; opacity: 0; }
.choice-contact { background: rgb(29, 29, 31); color: rgb(245, 245, 247); border-color: rgba(255, 255, 255, 0.16); }
.scene-choice > span { display: inline-block; transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1); }
.scene-choice:focus-visible, .portfolio-back:focus-visible { outline: rgb(255, 255, 255) solid 2px; outline-offset: 5px; }
.scene-choice:active { scale: 0.98; }
.choice-origin { position: absolute; left: 50%; top: 3px; height: 44px; width: 1px; background: rgb(245, 245, 247); transform-origin: center center; pointer-events: none; opacity: 0; }
.portfolio-back { position: absolute; bottom: 4.5%; left: 50%; translate: -50%; pointer-events: auto; border: 0px; background: transparent; color: rgb(189, 189, 195); font: 400 14px var(--font); padding: 8px 16px; }
.gaze-options { left: 50%; right: auto; transform: translateX(-50%); width: min(760px, 80%); bottom: 11%; height: 23%; gap: 20px; justify-content: center; }
.gaze-options .portfolio-option { width: calc(50% - 10px); max-width: 370px; }
@media (hover: hover) {
  .scene-choice:hover { background: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.07) 0px 4px 24px; }
  .choice-contact:hover { background: rgb(48, 48, 52); }
  .scene-choice:hover > span { transform: translate(3px, -3px); }
  .portfolio-back:hover { color: rgb(255, 255, 255); }
}
@media (max-aspect-ratio: 1 / 1) {
  .story-left { top: 14%; left: 5%; width: 65%; }
  .story-right { right: 5%; top: 19%; width: 58%; }
  .story-line { font-size: clamp(36px, 6vw, 60px); }
  .story-chest { top: 60%; }
  .story-chest .story-line { font-size: clamp(34px, 5vw, 52px); }
  .scene-choices { bottom: 9%; gap: 10px; }
  .scene-choice { padding: 0px 18px; font-size: 14px; }
  .gaze-options { width: 92%; bottom: 10%; height: 24%; gap: 14px; }
  .gaze-options .portfolio-option { width: calc(50% - 7px); }
}
@media (max-width: 480px) {
  .story-line { font-size: 9.1vw; }
  .story-left { top: 11%; width: 83%; }
  .story-right { top: 14%; width: 76%; }
  .story-chest { top: 56%; }
  .story-chest .story-line { font-size: 8.4vw; }
  .scene-choices { bottom: 8%; gap: 8px; padding: 0px 12px; }
  .scene-choice { font-size: 11px; padding: 0px 12px; gap: 7px; min-height: 46px; }
  .gaze-options { height: 23%; }
  .portfolio-back { bottom: 4%; }
}
.gaze-content { z-index: 3; }
.scene-camera { z-index: 2; mix-blend-mode: normal; color: rgb(238, 238, 238); opacity: 0; pointer-events: none; animation: auto ease 0s 1 normal none running none !important; }
.opening-ready .scene-camera > span { opacity: 1; animation: auto ease 0s 1 normal none running none !important; }
.scene-grain { position: absolute; inset: 0px; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
.scene-signal { position: absolute; inset: 0px; z-index: 1; pointer-events: none; opacity: 0; background: repeating-linear-gradient(0deg, transparent 0px, transparent 23px, rgba(255, 255, 255, 0.08) 24px, transparent 26px, transparent 68px, rgba(57, 217, 226, 0.1) 69px, transparent 72px); }
.scene-camera .camera-rec i { background: rgb(255, 81, 75); }
.story-chest .story-line { font-size: clamp(40px, 4vw, 72px); }
@media (max-width: 480px) {
  .story-chest { top: 55%; }
  .story-chest .story-line { font-size: 8.2vw; }
  .story-right { width: 76%; top: 13%; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-signal { display: none; }
}
.cinematic-ended .gaze-scene .scene-camera { visibility: visible !important; }
@media (max-width: 900px) {
  .scene-camera .camera-format { bottom: 28px; }
  .scene-camera .camera-battery { bottom: 30px; }
  .scene-camera .bottom-left, .scene-camera .bottom-right { bottom: 56px; }
}
.portrait-placement { position: absolute; inset: 0px; transform-origin: center bottom; transition: transform 1250ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
#gaze { filter: sepia(0.15) saturate(0.72) contrast(1.07) brightness(0.97); }
.story-chest { top: 65%; }
.story-chest .story-line { font-size: clamp(36px, 3.7vw, 66px); line-height: 1.04; }
.scene-choices { bottom: 8%; }
.scene-signal { background-size: 100% 100%; animation: 6s linear 0s infinite normal none running signal-drift; }
.scene-signal::after { content: ""; position: absolute; left: 0px; right: 0px; height: 9%; background: linear-gradient(transparent, rgba(185, 214, 215, 0.05), transparent); animation: 5s linear 0s infinite normal none running signal-scan; }
@keyframes signal-drift { 
  100% { background-position: 0px 144px; }
}
@keyframes signal-scan { 
  0% { top: -10%; }
  100% { top: 110%; }
}
.portfolio-gallery[hidden] { display: none !important; }
.portfolio-gallery { position: absolute; top: 12%; bottom: 8%; width: 53%; right: 5%; pointer-events: auto; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(68, 68, 68) transparent; padding: 0px 12px 12px; opacity: 0; }
.gallery-header { display: flex; justify-content: space-between; align-items: center; margin: 0px auto 18px; width: min(100%, -216px + 80svh); }
.gallery-header p { font-size: 13px; color: rgb(146, 146, 152); margin: 0px 0px 4px; letter-spacing: -0.02em; }
.gallery-header h2 { font-size: clamp(26px, 2.4vw, 40px); font-weight: 500; letter-spacing: -0.04em; margin: 0px; }
.gallery-close { border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 999px; padding: 9px 15px; color: rgb(238, 238, 238); background: rgb(23, 23, 25); font: 400 13px var(--font); transition: background 250ms; }
.gallery-close:hover { background: rgb(48, 48, 52); }
.gallery-close:focus-visible { outline: rgb(255, 255, 255) solid 2px; outline-offset: 3px; }
.feed-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 10px; width: min(100%, -216px + 80svh); margin: 0px auto; }
.feed-slot { aspect-ratio: 4 / 5; border: 1px solid rgba(255, 255, 255, 0.063); border-radius: 12px; background: rgb(17, 17, 19); display: flex; align-items: flex-end; justify-content: center; padding: 14px; min-width: 0px; }
.feed-slot span { font-size: 11px; color: rgb(109, 109, 116); letter-spacing: -0.01em; }
.gaze-scene[data-gallery="events"] .portrait-placement { transform: translateX(-29%) scale(0.83); }
.gaze-scene[data-gallery="services"] .portrait-placement { transform: translateX(29%) scale(0.83); }
.gaze-scene[data-gallery="services"] .portfolio-gallery { left: 5%; right: auto; }
@media (max-width: 900px) {
  .story-chest { top: 64%; }
  .story-chest .story-line { font-size: clamp(31px, 5.1vw, 48px); }
  .portfolio-gallery { top: 35%; bottom: 8%; width: 72%; right: 3%; }
  .gaze-scene[data-gallery="services"] .portfolio-gallery { left: 3%; }
  .gaze-scene[data-gallery] .portrait-placement { transform-origin: center top; }
  .gaze-scene[data-gallery="events"] .portrait-placement { transform: translate(-23%, -12%) scale(0.72); }
  .gaze-scene[data-gallery="services"] .portrait-placement { transform: translate(23%, -12%) scale(0.72); }
  .feed-grid, .gallery-header { width: 100%; }
  .feed-grid { gap: 7px; }
  .gallery-header { margin-bottom: 12px; }
  .feed-slot { border-radius: 8px; padding: 9px; }
  .feed-slot span { font-size: 9px; }
}
@media (max-width: 480px) {
  .story-chest { top: 64%; }
  .story-chest .story-line { font-size: 7.8vw; }
  .scene-choices { bottom: 7%; }
  .portfolio-gallery { top: 39%; width: 78%; }
  .gallery-header h2 { font-size: 25px; }
  .gallery-header p { font-size: 11px; }
  .gallery-close { font-size: 11px; padding: 7px 10px; }
  .gaze-scene[data-gallery="events"] .portrait-placement { transform: translate(-22%, -15%) scale(0.7); }
  .gaze-scene[data-gallery="services"] .portrait-placement { transform: translate(22%, -15%) scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .portrait-placement { transition: none; will-change: auto; }
  .scene-signal { animation: auto ease 0s 1 normal none running none; display: none; }
  .scene-signal::after { animation: auto ease 0s 1 normal none running none; }
}
.story-line span { color: inherit; }
.story-line .story-muted { color: rgb(150, 150, 148); }
.story-word { display: inline-block; white-space: nowrap; overflow: visible; }
.story-letter { display: inline-block; opacity: 0; transform: translateY(0.55em); }
.story-copy > .story-position:last-child { top: auto; bottom: calc(8% + 68px); }
.story-copy > .story-position:last-child .story-line { font-size: clamp(34px, 3.5vw, 60px); }
.gallery-actions { display: flex; gap: 8px; align-items: center; }
.quote-link, .viewer-quote { display: inline-flex; align-items: center; justify-content: center; background: rgb(245, 245, 247); color: rgb(22, 22, 23); border-radius: 999px; padding: 10px 15px; font: 500 12px var(--font); white-space: nowrap; transition: background 250ms, scale 250ms; }
.quote-link:hover, .viewer-quote:hover { background: rgb(255, 255, 255); scale: 1.025; }
.feed-slot { position: relative; overflow: hidden; padding: 0px; isolation: isolate; font: inherit; color: rgb(255, 255, 255); transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1), border-color 300ms; }
.feed-slot > img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6); transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), filter 500ms; z-index: -1; }
.feed-slot .feed-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; font-size: 11px; color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.2); padding-left: 2px; }
.feed-slot .feed-caption { padding: 12px 6px; font-size: 10px; color: rgb(229, 229, 234); background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); width: 100%; }
@media (hover: hover) {
  .feed-slot:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.314); }
  .feed-slot:hover > img { transform: scale(1.06); filter: brightness(0.85); }
}
.feed-slot:focus-visible { outline: rgb(255, 255, 255) solid 2px; outline-offset: 3px; }
.contact-panel[hidden] { display: none !important; }
.contact-panel { position: absolute; right: 8%; top: 15%; bottom: 9%; width: 39%; max-width: 470px; pointer-events: auto; overflow: auto; scrollbar-width: thin; padding: 0px 8px 20px; opacity: 0; }
.contact-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 24px; }
.contact-header p { font-size: 13px; color: rgb(146, 146, 152); margin: 0px 0px 5px; }
.contact-header h2 { font-weight: 500; font-size: clamp(28px, 2.9vw, 44px); letter-spacing: -0.045em; margin: 0px; }
.contact-back { background: transparent; color: rgb(189, 189, 195); border: 0px; font: 400 12px var(--font); padding: 10px; white-space: nowrap; }
#contact-form { display: grid; gap: 16px; }
#contact-form label { display: grid; gap: 7px; font-size: 13px; color: rgb(201, 201, 206); letter-spacing: -0.01em; }
#contact-form input, #contact-form select { width: 100%; min-height: 48px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgb(24, 24, 27); border-radius: 12px; padding: 12px 14px; color: rgb(245, 245, 247); font: 400 15px var(--font); outline: none; transition: border-color 250ms, box-shadow 250ms; }
#contact-form input::placeholder { color: rgb(119, 119, 128); }
#contact-form input:focus, #contact-form select:focus { border-color: rgb(162, 199, 255); box-shadow: rgba(41, 151, 255, 0.15) 0px 0px 0px 3px; }
.contact-submit { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; border: 0px; border-radius: 999px; background: rgb(245, 245, 247); color: rgb(22, 22, 23); font: 500 14px var(--font); margin-top: 6px; transition: opacity 250ms, transform 250ms; }
.contact-submit:disabled { opacity: 0.3; }
.contact-submit:not(:disabled):hover { transform: translateY(-2px); }
.contact-note { font-size: 11px; line-height: 1.4; color: rgb(129, 129, 137); text-align: center; margin: 0px; }
.gaze-scene[data-gallery="contact"] .portrait-placement { transform: translateX(-29%) scale(0.83); }
.portfolio-viewer { padding: 0px; border: 0px; background: transparent; color: rgb(245, 245, 247); width: min(900px, 92vw); max-width: none; max-height: 94svh; overflow: visible; }
.portfolio-viewer::backdrop { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); animation: 350ms ease-out 0s 1 normal none running viewer-backdrop; }
.viewer-shell { background: rgb(19, 19, 22); border: 1px solid rgba(255, 255, 255, 0.125); border-radius: 24px; overflow: hidden; transform-origin: center center; box-shadow: rgba(0, 0, 0, 0.533) 0px 40px 100px; }
.viewer-header { display: flex; justify-content: space-between; align-items: center; padding: 22px 26px; }
.viewer-header p { font-size: 11px; color: rgb(144, 144, 153); margin: 0px 0px 5px; }
.viewer-header h2 { font-size: 22px; font-weight: 500; letter-spacing: -0.035em; margin: 0px; }
.viewer-close { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); border: 0px; color: rgb(221, 221, 221); font-size: 16px; }
.viewer-media { display: grid; place-items: center; min-height: 200px; background: rgb(0, 0, 0); }
.viewer-media video, .viewer-media img { display: block; width: 100%; max-height: 65svh; object-fit: contain; }
.viewer-media [hidden] { display: none; }
.viewer-shell footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 26px; }
.viewer-shell footer > span { font-size: 12px; color: rgb(146, 146, 154); }
@keyframes viewer-backdrop { 
  0% { background: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); }
  100% { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); }
}
@media (max-width: 900px) {
  .contact-panel { top: 32%; bottom: 7%; right: 5%; width: 65%; max-width: 470px; }
  .gaze-scene[data-gallery="contact"] .portrait-placement { transform: translate(-23%, -12%) scale(0.72); }
  .contact-header h2 { font-size: 30px; }
  .gallery-actions { gap: 5px; }
  .quote-link { font-size: 10px; padding: 8px 10px; }
}
@media (max-width: 480px) {
  .story-copy > .story-position:last-child { bottom: calc(7% + 65px); }
  .story-copy > .story-position:last-child .story-line { font-size: 7.6vw; }
  .contact-panel { top: 35%; width: 82%; right: 4%; bottom: 7%; }
  .gaze-scene[data-gallery="contact"] .portrait-placement { transform: translate(-22%, -15%) scale(0.7); }
  .contact-header { margin-bottom: 18px; }
  .contact-header h2 { font-size: 28px; }
  #contact-form { gap: 12px; }
  .viewer-header { padding: 18px; }
  .viewer-header h2 { font-size: 18px; }
  .viewer-shell footer { padding: 16px; align-items: flex-start; }
  .viewer-shell footer > span { font-size: 10px; max-width: 46%; }
  .viewer-quote { font-size: 11px; padding: 10px 12px; }
  .feed-slot .feed-play { width: 26px; height: 26px; font-size: 9px; }
  .feed-slot .feed-caption { font-size: 8px; padding: 8px 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-letter { transform: none !important; }
  .portfolio-viewer::backdrop { animation: auto ease 0s 1 normal none running none; backdrop-filter: none; }
  .feed-slot, .feed-slot > img, .quote-link, .viewer-quote, .contact-submit { transition: none; }
}
@media(min-width:901px){.story-right{right:3.5%;width:26%}}

.quote-link,.viewer-quote{border:0}
.gaze-scene[data-gallery="contact-left"] .contact-panel{left:8%;right:auto}
.gaze-scene[data-gallery="contact-left"] .portrait-placement{transform:translateX(29%) scale(.83)}
@media(max-width:900px){.gaze-scene[data-gallery="contact-left"] .contact-panel{left:5%;right:auto}.gaze-scene[data-gallery="contact-left"] .portrait-placement{transform:translate(23%,-12%) scale(.72)}}
@media(max-width:480px){.gaze-scene[data-gallery="contact-left"] .contact-panel{left:4%;right:auto}.gaze-scene[data-gallery="contact-left"] .portrait-placement{transform:translate(22%,-15%) scale(.70)}}

.story-copy>.story-position:last-child{bottom:calc(8% + 90px)}
@media(max-width:480px){.story-copy>.story-position:last-child{bottom:calc(7% + 83px)}}
/* Phone art direction: a portrait film, generous type and thumb-friendly sheets. */
html { -webkit-text-size-adjust:100%; }
button,input,select { -webkit-tap-highlight-color:transparent; }
@media (max-width:700px) {
  :root { --mobile-edge:24px; --mobile-bottom:max(24px,env(safe-area-inset-bottom)); }
  .sequence { height:420svh; }
  .stage { height:100svh; }
  .portfolio-backdrop h1 { top:max(92px,12%); left:var(--mobile-edge); right:var(--mobile-edge); font-size:clamp(34px,10.7vw,62px); line-height:1.02; letter-spacing:-.06em; font-weight:300; }
  .portfolio-intro { top:calc(max(92px,12%) + 25vw); left:var(--mobile-edge); right:var(--mobile-edge); width:auto; max-width:420px; font-size:clamp(15px,4.1vw,18px); line-height:1.4; letter-spacing:-.025em; }
  .poster { visibility:visible; inset:auto auto 0 50%; width:210%; height:auto; max-width:none; aspect-ratio:16/9; transform:translateX(-50%); object-fit:contain; }
  .camera-view { font-size:10px; letter-spacing:.06em; }
  .camera-rec { left:24px; top:max(24px,env(safe-area-inset-top)); gap:6px; }
  .camera-rec i { width:6px; height:6px; }
  .camera-time { right:24px; top:max(24px,env(safe-area-inset-top)); }
  .view-corner { width:15px; height:15px; }
  .top-left { left:14px; top:51px; }
  .top-right { right:14px; top:51px; }
  .bottom-left,.scene-camera .bottom-left { left:14px; bottom:calc(var(--mobile-bottom) + 62px); }
  .bottom-right,.scene-camera .bottom-right { right:14px; bottom:calc(var(--mobile-bottom) + 62px); }
  .camera-format,.scene-camera .camera-format { left:24px; bottom:calc(var(--mobile-bottom) + 34px); font-size:9px; }
  .camera-battery,.scene-camera .camera-battery { right:24px; bottom:calc(var(--mobile-bottom) + 34px); width:23px; height:12px; }
  .scroll-cue { bottom:var(--mobile-bottom); min-height:44px; padding:11px 17px; gap:9px; font-size:12px; }
  .scroll-mark { width:14px; height:21px; }
  .portrait-placement { inset:8% auto auto -25%; width:150%; height:62%; transform-origin:center top; }
  .story-left,.story-right,.story-chest,.story-copy>.story-position:last-child { top:auto; bottom:calc(var(--mobile-bottom) + 158px); left:24px; right:24px; width:auto; text-align:left; }
  .story-right { text-align:right; }
  .story-line,.story-chest .story-line,.story-copy>.story-position:last-child .story-line { font-size:clamp(34px,10vw,58px); line-height:1.04; letter-spacing:-.055em; text-shadow:none; }
  .story-copy>.story-position:last-child { bottom:calc(var(--mobile-bottom) + 150px); }
  .story-copy>.story-position:last-child .story-line { font-size:clamp(32px,9.4vw,54px); }
  .scene-choices { left:24px; right:24px; bottom:calc(var(--mobile-bottom) + 6px); padding:0; display:grid; grid-template-columns:minmax(0,1fr); justify-content:stretch; gap:10px; }
  .scene-choice { width:100%; min-height:52px; padding:0 22px; justify-content:space-between; font-size:15px; font-weight:500; gap:16px; }
  .scene-choice>span { font-size:20px; }
  .choice-origin { top:50%; height:1px; width:40px; left:calc(50% - 20px); }
  .gaze-options { left:20px; right:20px; bottom:calc(var(--mobile-bottom) + 50px); width:auto; height:178px; transform:none; gap:12px; }
  .gaze-options .portfolio-option { width:calc(50% - 6px); max-width:none; border-radius:20px; }
  .option-content { padding:18px 16px; justify-content:flex-end; }
  .option-title { font-size:29px; font-weight:500; }
  .option-kicker { font-size:11px; margin-bottom:6px; }
  .option-description { display:none; }
  .option-arrow { width:36px; height:36px; min-width:36px; min-height:36px; font-size:20px; margin-top:16px; }
  .portfolio-back { bottom:var(--mobile-bottom); min-height:44px; padding:12px 24px; font-size:14px; }
  .gaze-scene[data-story-step="portfolios"] .story-copy { visibility:hidden; }
  .gaze-scene[data-gallery] .portrait-placement { transform-origin:center top; transform:translateY(-12%) scale(.70); }
  .gaze-scene[data-gallery="events"] .portrait-placement,.gaze-scene[data-gallery="services"] .portrait-placement,.gaze-scene[data-gallery="contact"] .portrait-placement,.gaze-scene[data-gallery="contact-left"] .portrait-placement { transform:translateY(-12%) scale(.70); }
  .portfolio-gallery,.contact-panel,.gaze-scene[data-gallery="services"] .portfolio-gallery,.gaze-scene[data-gallery="contact-left"] .contact-panel { top:31%; bottom:0; left:0; right:0; width:100%; max-width:none; border-radius:28px 28px 0 0; background:#101012; padding:24px 20px calc(var(--mobile-bottom) + 14px); overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .portfolio-gallery::before,.contact-panel::before { content:''; display:block; width:32px; height:4px; border-radius:4px; background:#424246; margin:-12px auto 20px; }
  .gallery-header { width:100%; display:grid; grid-template-columns:1fr auto; gap:16px 12px; margin:0 0 18px; position:sticky; top:-24px; z-index:2; background:#101012; padding:8px 0 16px; }
  .gallery-header>div:first-child { grid-row:1; grid-column:1; }
  .gallery-header p,.contact-header p { font-size:12px; margin-bottom:5px; }
  .gallery-header h2 { font-size:34px; letter-spacing:-.045em; }
  .gallery-actions { display:contents; }
  .gallery-close { grid-row:1; grid-column:2; font-size:13px; min-height:44px; padding:10px 16px; }
  .quote-link { grid-row:2; grid-column:1/-1; min-height:46px; font-size:14px; width:100%; }
  .feed-grid { width:100%; gap:8px; }
  .feed-slot { border-radius:12px; }
  .feed-slot .feed-caption { display:none; }
  .feed-slot .feed-play { width:30px; height:30px; font-size:10px; }
  .contact-panel,.gaze-scene[data-gallery="contact-left"] .contact-panel { top:28%; padding:24px 24px calc(var(--mobile-bottom) + 20px); bottom:var(--keyboard-inset,0px); }
  .contact-header { margin-bottom:24px; gap:16px; }
  .contact-header h2 { font-size:34px; line-height:1.05; }
  .contact-back { font-size:13px; padding:12px 0 12px 12px; min-height:44px; }
  #contact-form { gap:18px; }
  #contact-form label { font-size:14px; gap:8px; }
  #contact-form input,#contact-form select { min-height:54px; font-size:16px; border-radius:14px; padding:14px 16px; }
  .contact-submit { min-height:54px; font-size:14px; gap:10px; margin-top:6px; }
  .contact-note { font-size:12px; line-height:1.5; }
  .portfolio-viewer { width:calc(100vw - 24px); max-height:calc(100dvh - 32px); overflow:auto; border-radius:24px; }
  .viewer-shell { box-shadow:none; border-radius:24px; }
  .viewer-header { padding:18px; gap:12px; }
  .viewer-header p { font-size:11px; }
  .viewer-header h2 { font-size:20px; line-height:1.15; }
  .viewer-close { width:44px; height:44px; }
  .viewer-media { min-height:0; }
  .viewer-media video,.viewer-media img { max-height:52dvh; }
  .viewer-shell footer { padding:18px; display:flex; flex-direction:column-reverse; gap:12px; align-items:stretch; }
  .viewer-shell footer>span { max-width:none; font-size:11px; text-align:center; }
  .viewer-quote { width:100%; min-height:48px; font-size:14px; }
  .feed-slot:active,.portfolio-option:active { scale:.97; }
  .clapper-cursor { display:none !important; }
}
@media (max-width:359px) {
  :root { --mobile-edge:20px; }
  .portfolio-backdrop h1 { font-size:10.5vw; }
  .portfolio-intro { font-size:14px; }
  .story-line,.story-chest .story-line { font-size:32px; }
  .scene-choices { left:20px; right:20px; }
  .option-content { padding:16px 12px; }
  .option-title { font-size:26px; }
}
@media (max-width:700px) and (max-height:700px) {
  .portfolio-backdrop h1 { top:80px; font-size:9.8vw; }
  .portfolio-intro { top:calc(88px + 22vw); font-size:14px; line-height:1.35; }
  .portrait-placement { top:5%; height:60%; }
  .story-line,.story-chest .story-line,.story-copy>.story-position:last-child .story-line { font-size:clamp(30px,8.6vw,40px); }
  .story-left,.story-right,.story-chest,.story-copy>.story-position:last-child { bottom:calc(var(--mobile-bottom) + 140px); }
  .scene-choice { min-height:48px; }
  .gaze-options { height:150px; }
  .contact-panel,.gaze-scene[data-gallery="contact-left"] .contact-panel { top:22%; }
}
@media (max-height:500px) and (min-aspect-ratio:1/1) {
  .camera-rec,.camera-time { top:16px; }
  .top-left,.top-right { top:40px; }
  .portfolio-backdrop h1 { top:22%; font-size:4.8vw; }
  .portfolio-intro { top:25%; font-size:14px; }
  .scene-choices { bottom:20px; }
  .story-copy>.story-position:last-child { bottom:88px; }
  .story-line,.story-chest .story-line,.story-copy>.story-position:last-child .story-line { font-size:30px; }
  .portfolio-gallery,.contact-panel { top:12%; bottom:4%; }
  .camera-format,.camera-battery { display:none; }
}
@media (max-width:700px) {
  .scene-camera .camera-format,.scene-camera .camera-battery,.scene-camera .bottom-left,.scene-camera .bottom-right { display:none; }
}

/* Small brand signature below the recording indicator. */
.brand-signature { position:absolute; top:108px; left:64px; width:56px; height:auto; pointer-events:none; z-index:2; }
.cinematic-ended .brand-opening { visibility:hidden; }
@media(max-width:900px) { .brand-signature { top:82px; left:28px; width:48px; } }
@media(max-width:700px) { .brand-signature { top:max(72px,calc(env(safe-area-inset-top) + 46px)); left:24px; width:42px; } }
@media(max-height:500px) and (min-aspect-ratio:1/1) { .brand-signature { top:64px; } }