:root {
  color-scheme: dark;
  --bg: #080d11;
  --ink: #f6f4f1;
  --faint: #a6a9a8;
  --line: rgba(236,240,240,.23);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); overflow-x: hidden; scrollbar-width: none; }
body::-webkit-scrollbar { width: 0; height: 0; }
body.dialog-open { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
::selection { background: #dbb79b; color: #141414; }

/* A real 1672 x 922 design-space. The screenshot, crop positions, and hit areas
   align to the exact pixel coordinates of the supplied reference. */
.reference-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  isolation: isolate;
  background: #080c10;
}
.artboard {
  position: absolute;
  left: 0; top: 0;
  width: 1672px; height: 922px;
  transform-origin: 0 0;
  overflow: hidden;
  user-select: none;
}
.reference-image {
  position: absolute; inset: 0;
  width: 1672px; height: 922px;
  object-fit: fill; pointer-events: none;
  filter: grayscale(.16) saturate(.83) brightness(.9) contrast(1.02);
}
.reference-image--day {
  filter: grayscale(.08) saturate(.88) brightness(.98) contrast(1.01);
}
.reference-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(77,82,87,.14), rgba(56,61,65,.1) 38%, rgba(38,41,45,.12) 100%);
  mix-blend-mode: lighten;
  opacity: .72;
}
.artboard { z-index: 3; }
.mobile-layout { position: relative; z-index: 3; }
.hit { position: absolute; z-index: 5; padding: 0; margin: 0; background: transparent; border: 0; cursor: pointer; display: block; }
.hit::after { content: ''; position: absolute; inset: 0; }
.hit-menu { left: 34px; top: 34px; width: 47px; height: 52px; }
.hit-menu:hover::after { background: rgba(255,255,255,.07); border-radius: 2px; }
.hit-nav { top: 28px; height: 45px; }
.hit-nav-work { left: 1321px; width: 65px; }
.hit-nav-studio { left: 1425px; width: 79px; }
.hit-nav-contact { left: 1540px; width: 104px; }
.hit-nav::after { top: auto; height: 1px; width: 0; left: 12%; background: #fff; transition: width .3s ease; }
.hit-nav:hover::after { width: 76%; }

.thumb-hit { overflow: visible; transition: filter .25s ease; }
.thumb-hit > img { width: 100%; height: 100%; object-fit: fill; display: block; opacity: 0; transform: scale(.985); transition: opacity .36s, transform .55s cubic-bezier(.2,.8,.2,1), filter .4s; }
.thumb-hit:hover, .thumb-hit:focus-visible { z-index: 9; }
.thumb-hit:hover > img, .thumb-hit:focus-visible > img { opacity: 1; transform: scale(1.045); box-shadow: 0 15px 35px rgba(0,0,0,.4); filter: brightness(1.13) saturate(1.06); }
.thumb-hover-label { pointer-events: none; position: absolute; top: 11px; right: 12px; opacity: 0; font-size: 9px; letter-spacing: .22em; font-weight: 600; text-shadow: 0 2px 7px #000; transition: opacity .35s, transform .35s; transform: translateY(8px); }
.thumb-hover-label span { font-size: 13px; }
.thumb-hit:hover .thumb-hover-label, .thumb-hit:focus-visible .thumb-hover-label { opacity: 1; transform: translateY(0); }
.left-beauty { left: 100px; top: 248px; width: 287px; height: 154px; }
.left-auto { left: 100px; top: 415px; width: 289px; height: 157px; }
.left-nature { left: 100px; top: 583px; width: 288px; height: 150px; }
.right-life { left: 1282px; top: 246px; width: 286px; height: 159px; }
.right-brand { left: 1282px; top: 415px; width: 285px; height: 155px; }
.right-film { left: 1281px; top: 578px; width: 287px; height: 152px; }

/* The replacement is hidden for the reference's original mountain frame.
   A selected film replaces only the main slot; side references remain visible. */
.hero-replacement { position: absolute; z-index: 3; top: 254px; left: 411px; width: 849px; height: 445px; overflow: hidden; opacity: 0; visibility: hidden; transform: scale(.98); transition: opacity .6s ease, transform .7s ease, visibility 0s linear .65s; background: #0a0e11; }
.hero-replacement.is-visible { opacity: 1; visibility: visible; transform: scale(1); transition-delay: 0s; }
.hero-replacement > img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.9) contrast(1.07); }
.hero-replacement-shade { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 42%,rgba(0,0,0,.63) 100%); pointer-events: none; }
.hero-eyebrow { position: absolute; top: 28px; left: 31px; letter-spacing: .3em; font-size: 9px; font-weight: 600; margin: 0; opacity: .8; }
.hero-project-name { position: absolute; left: 31px; bottom: 68px; font-size: 24px; letter-spacing: .18em; font-weight: 300; margin: 0; text-shadow: 0 3px 14px rgba(0,0,0,.5); }
.hero-control-mark { width: 96px; height: 96px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.88); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 25px rgba(255,255,255,.12), inset 0 0 25px rgba(255,255,255,.06); backdrop-filter: blur(3px); }
.triangle { width: 0; height: 0; margin-left: 7px; border-top: 17px solid transparent; border-bottom: 17px solid transparent; border-left: 26px solid #fff; filter: drop-shadow(0 2px 5px #000); }
.hero-bottom-controls { position: absolute; left: 30px; right: 31px; bottom: 25px; display: flex; gap: 22px; align-items: center; font-size: 12px; letter-spacing: .17em; }
.progress-line { display: block; flex: 1; height: 2px; background: rgba(255,255,255,.5); }
.progress-line i { display: block; background: #fff; width: 4%; height: 100%; }
/* In-slot MP4 playback; stays invisible until a real file has loaded. */
.inline-video { position: absolute; z-index: 7; top: 254px; left: 411px; width: 849px; height: 445px; display: none; object-fit: contain; background: #000; }
.inline-video.is-playing { display: block; }
.inline-close { position: absolute; z-index: 9; top: 268px; left: 1210px; width: 35px; height: 35px; border: 1px solid #fff9; background: #0009; color: #fff; font-size: 26px; cursor: pointer; display: none; }
.inline-close.is-visible { display: block; }
.hero-hit { z-index: 6; top: 253px; left: 409px; width: 847px; height: 441px; }
.hero-hit:hover::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.main-fullscreen-hit { z-index: 7; top: 644px; left: 1201px; width: 42px; height: 40px; }
.arrow-left { left: 31px; top: 441px; width: 47px; height: 75px; }
.arrow-right { left: 1592px; top: 441px; width: 47px; height: 75px; }
.arrow-hit:hover::after { background: rgba(255,255,255,.08); border-radius: 3px; }
.scroll-hit { left: 788px; top: 775px; width: 97px; height: 130px; }
.scroll-hit:hover::after { background: radial-gradient(circle at 50% 50%,rgba(255,255,255,.05),transparent 65%); }

/* Semantically composed mobile layout. */
.mobile-layout { display: none; }

/* Secondary sections remain BELOW the exact reference, never over it. */
.below { position: relative; z-index: 1; background: #0a1014; }
.section-container { max-width: 1430px; padding: 90px 50px 110px; margin: 0 auto; }
.section-topline { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; font-size: 10px; letter-spacing: .3em; color: #c3c7c7; }
.below h1, .below h2 { margin: 75px 0 38px; font-size: clamp(64px,10vw,157px); line-height: .95; font-weight: 250; letter-spacing: -.055em; }
.below h1 em, .below h2 em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.07em; }
.section-description { margin: 0 0 70px auto; max-width: 440px; color: #aeb2b4; font-weight: 300; font-size: 19px; line-height: 1.6; }
.work-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 48px 24px; }
.work-grid button { display: block; text-align: left; background: transparent; border: 0; padding: 0; cursor: pointer; min-width: 0; }
.work-grid img { display: block; width: 100%; aspect-ratio: 1.9; object-fit: cover; filter: saturate(.86); transition: filter .4s, transform .4s; }
.work-grid button:hover img { filter: saturate(1.15); transform: translateY(-5px); }
.work-grid button span { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 19px 2px; font-size: 11px; letter-spacing: .24em; }
.work-grid button b { font-size: 18px; font-weight: 300; }
.studio-section { background: #e9e7e2; color: #121619; }
.studio-section .section-topline { border-color: rgba(0,0,0,.25); color: #2e3539; }
.studio-section h2 { margin-bottom: 30px; }
.studio-copy { margin-left: auto; width: min(500px,100%); font-size: 20px; line-height: 1.6; font-weight: 300; }
.studio-copy p { margin: 0 0 22px; }
.footer-section { background: #10181d; }
.footer-section h2 { margin-bottom: 70px; }
.contact-button { display: inline-flex; align-items: center; justify-content: space-between; min-width: 350px; padding: 20px 10px 20px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.6); background: transparent; cursor: pointer; text-align: left; font-size: 14px; letter-spacing: .24em; }
.contact-button span:last-child { font-size: 27px; }
.footer-end { display: flex; align-items: center; justify-content: space-between; margin-top: 130px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 10px; letter-spacing: .2em; color: #afb7b9; }
.footer-end a:hover { color: #fff; }

/* Fullscreen nav & film modals */
.menu-overlay, .player-overlay { position: fixed; z-index: 40; inset: 0; background: rgba(5,10,13,.95); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, visibility 0s linear .45s; }
.menu-overlay.is-open, .player-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .45s ease, visibility 0s; }
.menu-overlay::before { content:''; position: absolute; inset: 0; opacity: .18; background: url('assets/scene-clean.jpg') center center / cover no-repeat; filter: blur(33px); transform: scale(1.13); pointer-events: none; }
.overlay-close { position: absolute; z-index: 2; right: 5vw; top: 30px; background: none; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; width: 55px; height: 55px; color: #fff; font-size: 34px; font-weight: 200; cursor: pointer; line-height: 1; transition: transform .3s, background .3s; }
.overlay-close:hover { transform: rotate(90deg); background: rgba(255,255,255,.13); }
.menu-inner { position: relative; width: min(1000px,88vw); min-height: 100%; margin: auto; display: flex; flex-direction: column; justify-content: center; padding: 75px 0; }
.overlay-kicker { color: #9fa6a7; font-size: 11px; letter-spacing: .32em; margin-bottom: 42px; }
.menu-inner > a { border-top: 1px solid rgba(255,255,255,.3); display: flex; align-items: baseline; gap: 24px; font-weight: 250; line-height: 1.16; font-size: clamp(55px,8vw,125px); letter-spacing: -.045em; transition: padding .3s, color .3s; }
.menu-inner > a:hover { padding-left: 19px; color: #e6bda2; }
.menu-inner > a:nth-last-of-type(1) { border-bottom: 1px solid rgba(255,255,255,.3); }
.menu-inner > a small { font-size: 12px; color: #9ba2a5; letter-spacing: .05em; }
.menu-inner > a span:last-child { font-size: 29px; margin-left: auto; }
.menu-inner > p { margin: 45px 0 0; font-size: 10px; letter-spacing: .22em; color: #b4b7b7; }
.player-overlay { background: rgba(4,8,11,.96); }
.player-inner { width: min(1280px,90vw); margin: 0 auto; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.player-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; margin-bottom: 19px; letter-spacing: .21em; font-size: 11px; }
.player-heading strong { font-size: 21px; letter-spacing: .19em; font-weight: 300; }
.player-screen { width: 100%; aspect-ratio: 16 / 8.65; max-height: 70vh; position: relative; background: #0f1214; overflow: hidden; }
.player-screen img, .player-screen video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player-screen video { opacity: 0; visibility: hidden; z-index: 1; background: #050505; }
.player-screen video.is-ready { opacity: 1; visibility: visible; }
.video-not-ready { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; text-align: center; font-size: 16px; background: rgba(0,0,0,.49); backdrop-filter: blur(4px); padding: 30px; }
.video-not-ready[hidden] { display: none; }
.video-not-ready .missing-icon { font-size: 48px; opacity: .85; font-weight: 100; }
.video-not-ready small { color: #bac2c4; font-size: 12px; letter-spacing: .07em; }
.player-footnote { display: flex; justify-content: space-between; align-items: center; margin-top: 19px; color: #b9bfc2; font-size: 10px; letter-spacing: .26em; }
.player-footnote button { color: #fff; background: transparent; border: none; font-size: 11px; letter-spacing: .2em; cursor: pointer; padding: 14px 0 14px 25px; }
.player-footnote button:hover { color: #deb79c; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 28px; transform: translate(-50%,20px); opacity: 0; pointer-events: none; background: #e7e4dd; color: #141819; padding: 14px 23px; max-width: min(90vw,590px); box-shadow: 0 12px 40px #0008; transition: opacity .3s, transform .3s; font-size: 13px; text-align: center; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 1100px), (max-aspect-ratio: 4/3) {
  .reference-stage { height: auto; min-height: 100svh; overflow: hidden; padding-bottom: 0; background: radial-gradient(ellipse 90% 33% at 50% 53%,#32302e55,transparent 90%),#0a1013; }
  .reference-stage::before { content: ''; position: absolute; inset: -70px; z-index: -1; background: url('assets/scene-clean.jpg') 51% 15% / auto 950px no-repeat; filter: blur(45px) brightness(.27); opacity: .95; }
  .artboard { display: none; }
  .mobile-layout { display: flex; flex-direction: column; width: 100%; min-height: 100svh; padding: 22px 18px 25px; }
  .mobile-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-height: 91px; }
  .mobile-menu-button { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 38px; height: 39px; margin-top: 6px; padding: 7px 3px; background: transparent; border: 0; cursor: pointer; }
  .mobile-menu-button span { width: 24px; height: 1px; background: #f7f5f3; }
  .mobile-wordmark { text-align: center; display: flex; flex-direction: column; align-items: center; padding-top: 1px; text-shadow: 0 3px 10px rgba(0,0,0,.4); }
  .mobile-wordmark > span { font-size: clamp(24px,8vw,43px); font-weight: 200; letter-spacing: .35em; transform: translateX(.15em); white-space: nowrap; }
  .mobile-wordmark small { margin-top: 8px; font-size: 13px; letter-spacing: .67em; transform: translateX(.35em); font-weight: 300; }
  .header-balance { width: 38px; }
  .mobile-tagline { margin: 0 0 27px; font-size: 8px; letter-spacing: .21em; font-weight: 500; text-align: center; white-space: nowrap; }
  .mobile-tagline b { font-weight: 300; color: #979b9c; padding: 0 5px; }
  .mobile-feature { width: 100%; position: relative; aspect-ratio: 1.88; background: #151b1e; box-shadow: 0 12px 44px #0008; }
  .mobile-feature > img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .mobile-feature-play { position: absolute; border: 0; cursor: pointer; inset: 0; background: transparent; width: 100%; height: 100%; }
  .mobile-feature-play:focus-visible { outline-offset: 3px; }
  .mobile-current-info { display: flex; justify-content: space-between; margin: 22px 1px 28px; font-size: 11px; letter-spacing: .26em; }
  .mobile-current-info span:last-child { color: #a2a5a6; letter-spacing: .15em; }
  .mobile-gallery { display: flex; gap: 12px; width: calc(100% + 18px); overflow-x: auto; padding: 4px 18px 18px 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .mobile-gallery::-webkit-scrollbar { display: none; }
  .mobile-card { position: relative; display: block; flex: 0 0 min(52vw,230px); aspect-ratio: 1.67; border: 0; padding: 0; background: #202529; cursor: pointer; scroll-snap-align: start; overflow: hidden; box-shadow: 0 8px 18px #0008; }
  .mobile-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mobile-card span { display: none; /* captions are already integrated into the supplied photo crop */ }
  .mobile-card.is-selected { outline: 1px solid rgba(255,255,255,.75); outline-offset: -1px; }
  .mobile-bottom-caption { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 22px; border-top: 1px solid #ffffff26; color: #a6aaa9; font-size: 9px; letter-spacing: .2em; }
.mobile-scroll-trigger { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: .24em; padding: 6px 0; cursor: pointer; }
.mobile-scroll-trigger:hover { color: #ece9e3; }
.mobile-scroll-trigger:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
  .section-container { padding: 65px 22px 75px; }
  .section-topline { font-size: 9px; letter-spacing: .13em; }
  .below h1, .below h2 { font-size: clamp(55px,13.5vw,95px); letter-spacing: -.058em; margin-top: 61px; }
  .section-description { font-size: 17px; margin: 0 0 45px; }
  .work-grid { grid-template-columns: repeat(2,1fr); gap: 30px 13px; }
  .work-grid button span { font-size: 9px; padding: 14px 1px; letter-spacing: .13em; }
  .studio-copy { font-size: 17px; }
  .contact-button { min-width: 260px; }
  .footer-end { margin-top: 90px; gap: 16px; flex-wrap: wrap; line-height: 1.8; }
  .menu-inner { width: 86vw; }
  .menu-inner > a { font-size: 50px; padding: 14px 0; }
  .menu-inner > a span { font-size: 24px; }
  .overlay-close { right: 23px; top: 20px; width: 45px; height: 45px; }
  .player-inner { width: 95vw; }
  .player-heading span { font-size: 8px; }
  .player-heading strong { font-size: 13px; }
  .player-screen { aspect-ratio: 16 / 10; }
  .player-footnote { font-size: 8px; letter-spacing: .16em; }
}
@media (max-width: 375px) {
  .mobile-layout { padding-inline: 12px; }
  .mobile-wordmark > span { font-size: 26px; letter-spacing: .26em; }
  .mobile-tagline { font-size: 7px; letter-spacing: .12em; }
  .mobile-tagline b { padding: 0 2px; }
  .work-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (max-width: 1100px), (max-aspect-ratio: 4/3) {
  .mobile-feature-play.has-alternate::before {
    content: ''; position: absolute; width: 68px; height: 68px; left: 50%; top: 50%;
    transform: translate(-50%, -50%); border: 1px solid #fff; border-radius: 50%;
    background: rgba(0,0,0,.16); box-shadow: 0 0 21px #ffffff4a;
  }
  .mobile-feature-play.has-alternate::after {
    content: ''; position: absolute; left: calc(50% - 6px); top: calc(50% - 12px);
    width: 0; height: 0; border-top: 12px solid transparent;
    border-bottom: 12px solid transparent; border-left: 20px solid #fff;
  }
}


/* ==============================================================
   FURORE 3D CINEMA v2 — real moving project planes
   The existing decorative screenshot no longer contains the films;
   only seven independently animated DOM cards occupy those slots.
   ============================================================== */
.thumb-hit, .hero-replacement { display: none !important; }
.cinema-gallery {
  position: absolute;
  z-index: 4;
  inset: 0;
  perspective: 1900px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  pointer-events: none;
  contain: layout style;
}
.cinema-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 850px;
  height: 445px;
  padding: 0;
  border: none;
  margin: 0;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  background: #080d11;
  box-shadow: 0 17px 54px #0008, inset 0 0 0 1px #ffffff12;
  color: #fff;
  transform-origin: left top;
  transform-style: preserve-3d;
  transform: translate3d(-950px, 400px, -300px) scale(.32);
  opacity: 0;
  pointer-events: auto;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition:
    transform 1250ms cubic-bezier(.18,.74,.14,1),
    opacity 780ms cubic-bezier(.25,.7,.3,1),
    box-shadow 550ms ease;
}
.cinema-gallery:not(.is-ready) .cinema-card { transition: none; }
.cinema-card:hover:not(.is-current) {
  box-shadow: 0 29px 75px #000c, 0 0 0 2px #ffffff55;
}
.cinema-card.is-current { cursor: pointer; box-shadow: 0 17px 58px #000a; }
.cinema-card:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.cinema-card-media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #0b1014;
}
.cinema-card-media > img,
.cinema-card-media > video {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
  pointer-events: none;
}
.cinema-card-media > img {
  filter: saturate(.95) contrast(1.04);
  transform: scale(1.003);
  animation: poster-breathe 24s ease-in-out infinite alternate;
  transition: filter 520ms ease;
}
@keyframes poster-breathe {
  from { transform: scale(1.003) translate3d(-.25%, 0, 0); }
  to { transform: scale(1.07) translate3d(.35%, -.5%, 0); }
}
.cinema-card:not(.is-current):hover .cinema-card-media > img { filter: saturate(1.2) brightness(1.15); }
.cinema-preview { opacity: 0; transition: opacity 550ms ease; }
.cinema-preview.is-playing { opacity: 1; }
.cinema-card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 6%, #ffffff12 39%, transparent 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 650ms ease;
}
.cinema-card:not(.is-current):hover .cinema-card-shine { opacity: .8; }
.cinema-film-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
}
.cinema-card.is-current:not(.is-mountain) .cinema-film-controls { opacity: 1; }
.cinema-play-icon {
  position: absolute;
  width: 96px;
  height: 96px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #fffdf2c9;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0002;
  box-shadow: 0 0 32px #ffffff2a, inset 0 0 32px #ffffff11;
  backdrop-filter: blur(3px);
}
.cinema-play-icon span { display: block; width: 0; height: 0; margin-left: 7px; border-top: 17px solid transparent; border-bottom: 17px solid transparent; border-left: 28px solid #fff; }
.cinema-timeline {
  position: absolute;
  bottom: 27px;
  left: 27px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 12px;
  letter-spacing: .13em;
  text-shadow: 0 2px 6px #000;
}
.cinema-timeline i { height: 2px; background: #ffffff92; flex: 1; position: relative; }
.cinema-timeline i::before { content:''; position:absolute; height:4px; width:25px; background:white; top:-1px; left:0; }
/* Only the real central media zone should capture the play click. */
.hero-hit { z-index: 6; }
.main-fullscreen-hit { z-index: 7; }
.arrow-hit { z-index: 12; }
.inline-video { z-index: 13; }
.inline-close { z-index: 14; }
/* Reflect gently under the flying cards in the black glossy floor. */
.cinema-gallery::after {
  content: '';
  display: block;
  position: absolute;
  left: 350px; top: 710px; width: 970px; height: 48px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #e1a87f45 0%, #60717b1c 47%, transparent 74%);
  filter: blur(24px);
  pointer-events: none;
}
@media (max-width: 1100px), (max-aspect-ratio: 4/3) {
  .cinema-gallery { display: none; }
  /* Keep the more natural mobile layout and allow sliding between films. */
  .mobile-feature > img { transition: opacity .4s ease; }
  .mobile-card { transition: transform .45s ease, filter .45s ease; }
  .mobile-card:hover { transform: translateY(-4px); filter: brightness(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-card, .cinema-card-media > img { animation: none !important; transition-duration: .01ms !important; }
}

/* Separate untouched angled thumbnails from clean, large central hero frames. */
.cinema-card-media > img.cinema-poster-side,
.cinema-card-media > img.cinema-poster-hero { transition: opacity 600ms ease, filter 520ms ease; }
.cinema-card-media > img.cinema-poster-side { opacity: 1; }
.cinema-card-media > img.cinema-poster-hero { opacity: 0; }
.cinema-card.is-current .cinema-card-media > img.cinema-poster-side { opacity: 0; }
.cinema-card.is-current .cinema-card-media > img.cinema-poster-hero { opacity: 1; }


/* ====================================================================
   FURORE | NIGHT / DAY · one click, two atmospheres, same 3D positions
   The daytime backdrop is a separately graded high-key version of the
   supplied stage; never invert/filter the actual film thumbnails.
   ==================================================================== */
html { color-scheme: dark; }
html[data-theme="day"] {
  color-scheme: light;
  --bg: #eeece5;
  --ink: #222629;
  --faint: #616363;
  --line: rgba(33,38,38,.2);
}
body, .reference-stage, .below, .studio-section, .footer-section,
.section-topline, .section-description, .studio-copy, .footer-end,
.menu-overlay, .player-overlay, .overlay-close, .player-footnote {
  transition: background-color 950ms ease, color 800ms ease,
              border-color 800ms ease;
}
.reference-image--night, .reference-image--day {
  transition: opacity 1250ms cubic-bezier(.23,.67,.25,1);
}
.reference-image--night { opacity: 1; }
.reference-image--day { opacity: 0; }
html[data-theme="day"] .reference-image--night { opacity: 0; }
html[data-theme="day"] .reference-image--day { opacity: 1; }
html[data-theme="day"] .reference-stage { background-color: #ebe9e3; }
html[data-theme="day"] .reference-stage::after { background: linear-gradient(180deg, rgba(151,151,151,.08), rgba(120,120,120,.06) 42%, rgba(96,96,96,.08) 100%); opacity: .6; }

/* Minimal icon right next to the menu on desktop, on mobile at upper right. */
.theme-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 50%;
  background: rgba(12,18,20,.09);
  color: #ecece9;
  cursor: pointer;
  padding: 0;
  transition: background-color 450ms ease, border-color 450ms ease,
              color 450ms ease, transform 400ms ease, box-shadow 400ms ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.76);
  box-shadow: 0 0 0 5px rgba(255,255,255,.035);
}
.theme-toggle:active { transform: scale(.92); }
.theme-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.desktop-theme-toggle { position: absolute; z-index: 20; left: 92px; top: 38px; }
.theme-svg {
  position: absolute; width: 19px; height: 19px;
  transition: opacity 480ms ease, transform 680ms cubic-bezier(.2,.7,.2,1);
}
.theme-svg--moon { opacity: 1; transform: rotate(0) scale(1); }
.theme-svg--sun { opacity: 0; transform: rotate(-80deg) scale(.4); }
html[data-theme="day"] .theme-toggle {
  color: #252729;
  border-color: rgba(37,39,41,.3);
  background: rgba(255,255,255,.42);
}
html[data-theme="day"] .theme-toggle:hover {
  border-color: rgba(37,39,41,.72);
  background: rgba(255,255,255,.7);
  box-shadow: 0 0 0 5px rgba(33,37,38,.035);
}
html[data-theme="day"] .theme-svg--moon { opacity: 0; transform: rotate(80deg) scale(.4); }
html[data-theme="day"] .theme-svg--sun { opacity: 1; transform: rotate(0) scale(1); }
.mobile-theme-toggle { display: none; }

/* Luminous, warm editorial layout below the hero. */
html[data-theme="day"] .below { background: #f2f0e9; color: #222629; }
html[data-theme="day"] .studio-section { background: #e3ddd3; color: #212527; }
html[data-theme="day"] .footer-section { background: #e9e5dd; color: #222629; }
html[data-theme="day"] .section-topline { border-color: rgba(33,38,38,.2); color: #515456; }
html[data-theme="day"] .section-description { color: #626568; }
html[data-theme="day"] .work-grid button span { border-color: rgba(33,38,38,.24); }
html[data-theme="day"] .work-grid img { box-shadow: 0 12px 28px rgba(52,45,32,.12); }
html[data-theme="day"] .footer-end { color: #5d6162; }
html[data-theme="day"] .footer-end a:hover { color: #a17652; }
html[data-theme="day"] .contact-button { border-color: rgba(30,33,35,.65); }
html[data-theme="day"] .hit-nav::after { background: #272a2b; }
html[data-theme="day"] .hit-menu:hover::after,
html[data-theme="day"] .arrow-hit:hover::after { background: rgba(0,0,0,.045); }
html[data-theme="day"] .scroll-hit:hover::after {
  background: radial-gradient(circle at 50% 50%,rgba(0,0,0,.045),transparent 65%);
}
html[data-theme="day"] .cinema-card {
  box-shadow: 0 17px 50px rgba(46,38,31,.26), 0 0 0 1px rgba(31,28,26,.14);
}
html[data-theme="day"] .cinema-card.is-current {
  box-shadow: 0 22px 65px rgba(46,38,31,.3);
}
html[data-theme="day"] .cinema-card:not(.is-current):hover {
  box-shadow: 0 25px 65px rgba(46,38,31,.34), 0 0 0 2px #fff9;
}
html[data-theme="day"] .cinema-gallery::after {
  background: radial-gradient(ellipse, #ab896747 0%, #8f8a7f15 47%, transparent 74%);
}

/* The navigation overlay follows the theme; the video stays cinematic. */
html[data-theme="day"] .menu-overlay { background: rgba(242,239,231,.98); }
html[data-theme="day"] .menu-overlay::before {
  background-image: url('assets/scene-day.jpg'); opacity: .2; filter: blur(33px);
}
html[data-theme="day"] .overlay-kicker,
html[data-theme="day"] .menu-inner > a small,
html[data-theme="day"] .menu-inner > p { color: #67696a; }
html[data-theme="day"] .menu-inner > a { border-color: #32363845; }
html[data-theme="day"] .menu-inner > a:hover { color: #946a4b; }
html[data-theme="day"] .overlay-close { border-color: #32363866; color: #25292b; }
html[data-theme="day"] .overlay-close:hover { background: #34353712; }
html[data-theme="day"] .player-overlay { background: rgba(238,235,228,.98); }
html[data-theme="day"] .player-footnote { color: #616466; }
html[data-theme="day"] .player-footnote button { color: #212527; }
html[data-theme="day"] .video-not-ready { color: #f6f6f5; }

@media (max-width: 1100px), (max-aspect-ratio: 4/3) {
  .mobile-theme-toggle { display: grid; margin-top: 6px; }
  html[data-theme="day"] .reference-stage {
    background: radial-gradient(ellipse 92% 46% at 50% 49%, #e6ddd0, #f0ede5 74%, #efebe4);
  }
  html[data-theme="day"] .reference-stage::before {
    background-image: url('assets/scene-day.jpg');
    filter: blur(48px) brightness(1.02);
    opacity: .57;
  }
  html[data-theme="day"] .mobile-menu-button span { background: #242729; }
  html[data-theme="day"] .mobile-wordmark { text-shadow: none; }
  html[data-theme="day"] .mobile-tagline b { color: #85817c; }
  html[data-theme="day"] .mobile-feature { box-shadow: 0 14px 42px #50443829; }
  html[data-theme="day"] .mobile-card { box-shadow: 0 10px 25px #544a3b2e; }
  html[data-theme="day"] .mobile-card.is-selected { outline-color: rgba(30,34,35,.7); }
  html[data-theme="day"] .mobile-current-info span:last-child,
  html[data-theme="day"] .mobile-bottom-caption { color: #616466; }
  html[data-theme="day"] .mobile-bottom-caption { border-color: rgba(37,39,41,.23); }
html[data-theme="day"] .mobile-scroll-trigger:hover { color: #313536; }
}
@media (prefers-reduced-motion: reduce) {
  .reference-image--night, .reference-image--day,
  .theme-svg, .theme-toggle { transition-duration: .01ms !important; }
}

/* ============================================================
   Project metadata · subtle glass caption beneath the main film.
   Text is driven exclusively by projects.json on live hosting.
   ============================================================ */
.project-meta--desktop {
  position: absolute;
  z-index: 17;
  left: 410px;
  top: 714px;
  width: 845px;
  height: 62px;
  padding: 10px 20px 10px 22px;
  pointer-events: none;
  background: linear-gradient(92deg,rgba(9,16,20,.76),rgba(9,16,20,.43) 80%,rgba(9,16,20,.18));
  border-left: 1px solid rgba(240,225,213,.32);
  border-top: 1px solid rgba(255,255,255,.16);
  color: #f8f6f2;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  text-shadow: 0 2px 9px rgba(0,0,0,.58);
}
.project-meta-heading {
  display: flex; justify-content: space-between;
  text-transform: uppercase;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: .22em;
  color: #d0c9c1;
}
.project-meta-main {
  display: flex; align-items: baseline; gap: 19px;
  margin-top: 9px;
}
.project-meta-main strong {
  font-size: 15px; line-height: 1.15; letter-spacing: .22em;
  font-weight: 420; white-space: nowrap;
}
.project-meta-main > span {
  font-size: 12px; line-height: 1.3; font-weight: 300;
  letter-spacing: .045em; opacity: .89;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-meta--mobile { display: none; }
.project-meta.meta-animate { animation: metaArrival .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes metaArrival { from { opacity: .3; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
html[data-theme="day"] .project-meta--desktop {
  background: linear-gradient(90deg,rgba(245,242,233,.91),rgba(243,239,230,.78) 78%,rgba(243,239,230,.5));
  border-color: rgba(53,46,37,.23);
  color: #222628;
  text-shadow: none;
}
html[data-theme="day"] .project-meta-heading { color: #625a52; }
.work-grid-details {
  display: block;
  margin-top: 10px;
  color: #aeb1b2;
  font-weight: 450;
  line-height: 1.55;
  font-size: 10px;
  letter-spacing: .17em;
  text-transform: uppercase;
}
html[data-theme="day"] .work-grid-details { color: #6d6d6b; }
.player-project-description {
  margin: 17px 0 2px; color: #d2d2d1;
  font-size: 13px; font-weight: 300;
  letter-spacing: .04em;
}
html[data-theme="day"] .player-project-description { color: #51565a; }
@media (max-width: 1100px), (max-aspect-ratio: 4/3) {
  .project-meta--desktop { display: none; }
  .mobile-current-info { margin: 20px 1px 10px; }
  .project-meta--mobile {
    display: block;
    border-left: 1px solid #dcc3a869;
    margin: 0 0 22px;
    padding: 1px 0 0 12px;
    min-height: 44px;
  }
  .project-meta-mobile-category {
    display: block;
    font-size: 9px; font-weight: 500; letter-spacing: .19em;
    color: #bdb7b1;
  }
  .project-meta--mobile p {
    margin: 9px 0 0;
    font-size: 13px; font-weight: 300;
    line-height: 1.5; letter-spacing: .02em;
    color: #e6e3de;
  }
  .project-meta-extras {
    display: flex; flex-wrap: wrap; gap: 5px 13px;
    margin-top: 9px;
    font-size: 9px; letter-spacing: .12em;
    color: #b4b5b6;
  }
  .project-meta-extras[hidden] { display: none; }
  html[data-theme="day"] .project-meta--mobile { border-color: #87796d66; }
  html[data-theme="day"] .project-meta-mobile-category { color: #666766; }
  html[data-theme="day"] .project-meta--mobile p { color: #363c3c; }
  html[data-theme="day"] .project-meta-extras { color: #626565; }
  .player-project-description { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-meta.meta-animate { animation: none !important; }
}

.project-meta-main > span { min-width: 0; }
.project-meta-main > small:not([hidden]) {
  margin-left: auto; max-width: 25%; flex: 0 0 auto;
  font-size: 9px; font-weight: 450;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .09em; opacity: .8;
}

/* ============================================================
   FURORE GOLD BRANDING — transparent overlay, true source logo
   ============================================================ */
.desktop-logo {
  position: absolute;
  left: 630px;
  top: 27px;
  width: 412px;
  height: 148px;
  display: block;
  z-index: 18;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 2px 11px rgba(230,237,246,.13));
}
.desktop-logo img { width:100%; height:100%; object-fit:contain; display:block; }
.desktop-logo:hover { filter: drop-shadow(0 2px 15px rgba(237,241,248,.26)); }
.desktop-logo:focus-visible { outline:1px solid #e6be78; outline-offset:4px; }
@media (max-width: 1100px), (max-aspect-ratio: 4/3) {
  .desktop-logo { display: none; }
  .mobile-header { align-items:center; }
  .mobile-wordmark {
    flex: 0 1 auto;
    width: min(280px, calc(100vw - 150px));
    max-width: 100%;
    padding: 0;
    line-height: 0;
    transform: none;
    margin: 0 auto;
    text-shadow: none;
  }
  .mobile-wordmark img {
    display:block;
    width:100%;
    height:auto;
    object-fit: contain;
    filter:drop-shadow(0 0 5px rgba(235,239,246,.10));
  }
  .mobile-tagline { white-space: normal; line-height: 1.55; }
}
@media (max-width: 380px) {
  .mobile-header { gap: 5px; }
  .mobile-wordmark { width: calc(100vw - 130px); }
  .mobile-layout { padding-inline: 12px; }
  .mobile-header { min-height: 86px; }
}

/* Final desktop framing: preserve the complete artwork on 16:10 monitors. */
@media (min-width: 1101px) and (min-aspect-ratio: 4/3) {
  .reference-stage { background-image: radial-gradient(ellipse 70% 60% at 50% 48%, #27282a 0%, #12171b 65%, #070b0e 100%); background-size: cover; background-position: center; }
  html[data-theme="day"] .reference-stage { background-image: radial-gradient(ellipse 70% 60% at 50% 48%, #d9d7d3 0%, #e7e6e3 65%, #f0efed 100%); }
}
@media (max-width: 1100px), (max-aspect-ratio: 4/3) {
  .reference-stage { background-image: none; }
  .mobile-header { min-height: 100px; }
  .mobile-wordmark { width: min(280px, calc(100vw - 150px)); }
}

/* Contrast-preserving version of the same transparent gold logo on light backgrounds. */
html[data-theme="day"] .desktop-logo { filter: brightness(.83) contrast(1.23) drop-shadow(0 2px 4px rgba(71,78,91,.12)); }
html[data-theme="day"] .mobile-wordmark img { filter: brightness(.83) contrast(1.2) drop-shadow(0 2px 5px rgba(71,78,91,.13)); }


/* Original FURORE photographic scene, rebuilt directly from first user reference.
   Only static JPEG images serve as hero backgrounds. No camera zoom, WebGL or SVG background. */
.reference-stage { background-image: none !important; }
.reference-stage::after {
  pointer-events:none; z-index:2; mix-blend-mode:normal;
  background:linear-gradient(to bottom, rgba(4,7,11,.05), rgba(5,7,11,0) 67%, rgba(7,10,13,.16));
  opacity:1;
}
html[data-theme="day"] .reference-stage::after { opacity:.15; }
.cinematic-backdrop { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:#15191d; }
.original-photo-frame { position:absolute; inset:0; }
.original-photo {
  position:absolute; inset:0; display:block; width:100%; height:100%;
  object-fit:cover; object-position:center center;
  pointer-events:none; user-select:none;
  transition: opacity 1100ms ease;
}
.original-photo--night { opacity:1; filter:grayscale(.08) saturate(.94); }
.original-photo--day { opacity:0; filter:grayscale(.08) saturate(.90); }
html[data-theme="day"] .original-photo--night { opacity:0; }
html[data-theme="day"] .original-photo--day { opacity:1; }
.cinematic-stage-labels {position:absolute; inset:0; color:#f4f2ef; font-size:12px; letter-spacing:.28em; line-height:1; z-index:2; pointer-events:none;}
.cinematic-stage-labels p {margin:0;}
.cinematic-tagline {position:absolute; top:193px; width:100%; text-align:center; font-size:12px; letter-spacing:.24em; font-weight:500;}
.cinematic-location {position:absolute; left:42px; bottom:38px; font-size:10px; letter-spacing:.26em; color:#c1bec0;}
.cinematic-ending {position:absolute; right:42px; bottom:38px; font-size:10px; letter-spacing:.26em; color:#c5bdb8;}
.cinematic-side-rule {position:absolute; top:105px; left:54px; height:135px; width:1px; background:rgba(232,232,229,.23);}
.hit-menu::before {content:''; position:absolute; width:27px; height:26px; top:7px; left:8px; background:linear-gradient(to bottom, #edece9 0 1px, transparent 1px 12px,#edece9 12px 13px,transparent 13px 24px,#edece9 24px 25px,transparent 25px); z-index:2;}
.hit-nav {display:flex; align-items:center; justify-content:center; font-size:12px; letter-spacing:.23em; font-weight:550; color:#f3f1ef; text-shadow:0 1px 8px #0007;}
.arrow-hit {color:#f5f2ee; display:flex; align-items:center; justify-content:center; font:300 54px/1 Georgia,serif; text-shadow:0 2px 10px #0007;}
.arrow-hit span {display:block; transform:translateY(-4px);}
.scroll-hit {color:#eee8e3; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:15px; padding-bottom:33px;}
.cinematic-scroll-ring {display:block; width:35px; height:35px; border-radius:50%; border:1px solid currentColor; position:relative; opacity:.9; transition:transform .4s, box-shadow .4s;}
.cinematic-scroll-ring::before {content:''; position:absolute; width:1px; height:58px; bottom:calc(100% - 3px); left:50%; background:currentColor; opacity:.65;}
.cinematic-scroll-ring::after {content:''; width:4px; height:4px; background:currentColor; border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.cinematic-scroll-text {font-size:10px; letter-spacing:.3em; font-weight:500; line-height:1;}
.scroll-hit:hover .cinematic-scroll-ring {transform:translateY(5px); box-shadow:0 0 25px #ffffff22;}
html[data-theme="day"] .cinematic-stage-labels, html[data-theme="day"] .hit-nav,html[data-theme="day"] .arrow-hit,html[data-theme="day"] .scroll-hit {color:#242728; text-shadow:none;}
html[data-theme="day"] .cinematic-stage-labels .cinematic-location,html[data-theme="day"] .cinematic-stage-labels .cinematic-ending {color:#353536;}
html[data-theme="day"] .hit-menu::before {background:linear-gradient(to bottom, #242628 0 1px, transparent 1px 12px,#242628 12px 13px,transparent 13px 24px,#242628 24px 25px,transparent 25px);}
html[data-theme="day"] .cinematic-side-rule {background:rgba(48,48,48,.35);}
@media (max-width:1100px),(max-aspect-ratio:4/3) {
  .reference-stage::before {display:none !important;}
  html[data-theme="day"] .reference-stage::before {display:none !important;}
}
@media (prefers-reduced-motion:reduce) {
  .original-photo {transition-duration:.01ms !important;}
}

/* Accessible, integrated contact sheet; preserves cinematic typographic rhythm. */
.contact-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(4,6,8,.86);backdrop-filter:blur(17px);z-index:150;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility .35s}
.contact-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}.contact-modal-inner{position:relative;width:min(660px,100%);max-height:95vh;overflow-y:auto;padding:clamp(24px,4vw,54px);background:#15191b;border:1px solid #c9b08862;box-shadow:0 30px 100px #000b;color:#f2efeb}
.contact-modal-close{position:absolute;right:18px;top:12px;font:300 35px/1 Arial;background:none;color:inherit;border:0;cursor:pointer}.contact-modal-eyebrow{font-size:10px;letter-spacing:.32em;color:#ccb899}.contact-modal h2{font-size:clamp(30px,5vw,55px);font-weight:300;letter-spacing:-.05em;margin:26px 0}.contact-modal h2 em{font-family:Georgia,serif;font-weight:300}
.contact-modal form{display:grid;gap:17px}.contact-modal label{font-size:10px;letter-spacing:.24em;display:grid;gap:8px;color:#c9cdd0}.contact-modal input,.contact-modal textarea{display:block;width:100%;background:#252b2d;border:1px solid #555d5f;border-radius:0;color:#fff;font:16px/1.5 Arial,sans-serif;letter-spacing:normal;padding:11px 13px}.contact-modal textarea{resize:vertical}.contact-modal input:focus,.contact-modal textarea:focus{outline:2px solid #ceb082;outline-offset:1px}.contact-trap{position:absolute!important;left:-9999px!important;opacity:0}.contact-modal button[type=submit]{margin-top:5px;background:#d8c3a6;border:0;color:#1d1d1d;padding:14px 22px;font-size:12px;letter-spacing:.24em;cursor:pointer}.contact-modal button:disabled{opacity:.5;cursor:wait}.contact-feedback{color:#acb0af;font-size:12px;line-height:1.6;margin:0}.contact-feedback a{text-decoration:underline;text-underline-offset:3px}html[data-theme="day"] .contact-modal{background:rgba(28,25,22,.65)}

/* Same-size playback: 849 × 445 in the 1672 × 922 desktop artboard. */
.inline-video { z-index:16 !important; top:254px; left:411px; width:849px; height:445px; }
.inline-actions[hidden],.mobile-inline-actions[hidden],.inline-info-screen[hidden],.mobile-inline-info[hidden] { display:none !important; }
.inline-actions { position:absolute; display:flex; align-items:center; gap:8px; z-index:19; top:269px; right:427px; color:#fff; }
.inline-icon { width:42px;height:42px; display:flex; justify-content:center; align-items:center; border:1px solid #ffffff80; border-radius:50%; background:#080b0bc5; color:#fff; font:300 27px/1 Arial,sans-serif; cursor:pointer; box-shadow:0 5px 22px #0008; backdrop-filter:blur(8px); transition:background .25s,transform .25s; }
.inline-icon:hover { background:#3e3b35de; transform:translateY(-2px); }
.inline-icon svg {width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.inline-close {position:static;display:flex;font-size:26px;width:42px;height:42px;z-index:auto;}
.inline-info-screen { position:absolute; left:411px;top:254px;width:849px;height:445px;z-index:18;box-sizing:border-box; padding:50px 65px; background:linear-gradient(120deg,#0c1115f5,#161a1bf2); color:#f5f3f0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;backdrop-filter:blur(12px);}
.inline-info-screen small,.mobile-inline-info small { letter-spacing:.25em; font-size:11px; color:#c7b392; }
.inline-info-screen h3,.mobile-inline-info h3 { font-size:clamp(24px,2.8vw,42px);letter-spacing:.12em;font-weight:300;margin:20px 0 11px; }
.inline-info-screen p,.mobile-inline-info p {font-size:16px;line-height:1.65;color:#d6d5d1;max-width:650px;margin:0 0 10px;}
.inline-info-screen .inline-info-credits,.mobile-inline-info .inline-info-credits{font-size:11px;letter-spacing:.12em;color:#c3aa85;margin-top:12px;}
.inline-info-back {position:absolute;top:22px;left:45px;background:none;color:#f7f3ed;border:none;padding:9px 0;font-size:11px;letter-spacing:.15em;cursor:pointer;}
.mobile-inline-video {position:absolute;inset:0;z-index:4;width:100%;height:100%;object-fit:contain;background:#000;display:none;}
.mobile-inline-video.is-playing {display:block;}
.mobile-inline-actions {position:absolute;right:10px;top:10px;z-index:7;display:flex;gap:5px;}
.mobile-inline-actions .inline-icon {width:34px;height:34px;font-size:23px;}
.mobile-inline-actions .inline-icon svg {width:17px;height:17px;}
.mobile-inline-info {position:absolute;inset:0;z-index:6;padding:38px 23px 15px;background:#101518f7;display:flex;flex-direction:column;justify-content:center;overflow:auto;color:white;}
.mobile-inline-info .inline-info-back {top:7px;left:23px;font-size:9px;}
.mobile-inline-info small{font-size:8px;}
.mobile-inline-info h3 {font-size:clamp(15px,5vw,26px);margin:6px 0;}
.mobile-inline-info p {font-size:clamp(11px,2.8vw,14px);line-height:1.4;}
.mobile-inline-info .inline-info-credits {font-size:9px;margin-top:3px;}
@media(max-width:1100px),(max-aspect-ratio:4/3) { .inline-actions,.inline-info-screen {display:none !important;} }
@media(max-width:440px){.mobile-inline-info{padding:38px 14px 8px}.mobile-inline-info .inline-info-back{left:14px;} }

/* A pre-play fake fullscreen icon is part of the reference poster; the real action is only shown in the inline player. */
.main-fullscreen-hit { display:none !important; }

/* Static editorial subtitle: this is text, not navigation, and never filters projects. */
.project-subtitle {
  color:#f3efeb; text-align:center; white-space:nowrap;
  font:500 12px/1.45 'Helvetica Neue',Helvetica,Arial,sans-serif;
  letter-spacing:.22em; text-shadow:0 1px 10px rgba(0,0,0,.42);
  user-select:text; pointer-events:none; margin:0;
}
.project-subtitle span {font-weight:300; opacity:.66; padding:0 1.1em;}
.project-subtitle--desktop {position:absolute;left:0;top:189px;width:100%;}
.project-subtitle--mobile {display:none;}
html[data-theme="day"] .project-subtitle {color:#29292a;text-shadow:none;}

/* Original photographic background for desktop and mobile. */
.original-picture {position:absolute;inset:0;width:100%;height:100%;display:block;}
.original-picture .original-photo {width:100%;height:100%;object-fit:cover;}
@media (max-width:1100px), (max-aspect-ratio:4/3) {
  .project-subtitle--desktop {display:none;}
  .project-subtitle--mobile {
    display:block; align-self:center; width:100%; max-width:590px;
    margin:4px 0 27px; padding:11px 0 8px;
    font-size:clamp(7.1px,1.97vw,11.7px);
    letter-spacing:clamp(.025em,.13vw,.13em); line-height:1.35;
  }
  .project-subtitle--mobile span {padding:0 .7em;}
  .reference-stage .cinematic-backdrop {
    display:block !important;position:absolute;inset:0;
    background:transparent;pointer-events:none;z-index:0;
  }
  .reference-stage .original-photo-frame{position:absolute;inset:0;}
  .reference-stage .original-photo {object-fit:cover;object-position:center center;}
  .reference-stage::before{display:none !important;}
  .mobile-layout {position:relative;z-index:3;}
}
@media (max-width:375px) {
  .project-subtitle--mobile {font-size:7px;letter-spacing:.015em;}
  .project-subtitle--mobile span {padding:0 .48em;}
}

/* VIDEO-PERF-1: render on the first decoded frame, not at .play() time.
   The poster remains in exactly the same video box while the decoder buffers. */
.inline-video.is-starting,.mobile-inline-video.is-starting {display:block;opacity:0;pointer-events:none;}
.inline-video.is-playing,.mobile-inline-video.is-playing {display:block;opacity:1;pointer-events:auto;}
.player-screen video:not(.is-ready) {opacity:0;visibility:hidden;}

/* FURORE: Originales Header-Raster wiederhergestellt.
   Das breite neue Logo wird in der vorhandenen Original-Logo-Box
   (412 × 148 Desktop) proportional mit object-fit: contain angezeigt.
   Mobile Breite und Untertitel-Position folgen wieder den ursprünglichen Regeln. */

/* Only the decorative location text under the hero reel was removed.
   Keep mobile scroll button right-aligned with no empty location placeholder. */
.mobile-bottom-caption { justify-content: flex-end; }

/* FURORE cleanup: retain a natural breathing space after removal of the WORK slogan. */
#work .section-description { margin-top: 64px; }
@media (max-width:1100px), (max-aspect-ratio:4/3) { #work .section-description { margin-top: 45px; } }


/* FURORE · unobtrusive brand hover (no link) & left-aligned work introduction */
.desktop-logo, .mobile-wordmark { cursor: default; user-select: none; }
.desktop-logo img, .mobile-wordmark img { transition: filter 360ms ease-in-out; }
/* Preserve the desktop's existing gentle normal logo shadow. */
@media (hover: hover) and (pointer: fine) {
  .desktop-logo:hover { filter: drop-shadow(0 2px 13px rgba(237,241,248,.19)); }
  .desktop-logo:hover img { filter: brightness(1.13) contrast(1.025) drop-shadow(0 0 6px rgba(255,255,255,.10)); }
  .mobile-wordmark:hover img { filter: brightness(1.13) contrast(1.025) drop-shadow(0 0 7px rgba(255,255,255,.12)); }
  html[data-theme="day"] .desktop-logo:hover img { filter: brightness(1.13) contrast(1.025); }
  html[data-theme="day"] .mobile-wordmark:hover img { filter: brightness(.95) contrast(1.2) drop-shadow(0 0 7px rgba(255,255,255,.14)); }
}
#work .section-description {
  margin-left: 0;
  margin-right: auto;
  max-width: 540px;
  text-align: left;
}
@media (prefers-reduced-motion: reduce) {
  .desktop-logo img, .mobile-wordmark img { transition: none; }
}


/* FURORE VR CINEMA — precise inward-facing 3D preview walls.
   Seven independent HTML video/poster planes; central film remains flat.
   The reference's trapezoid geometry is encoded in the JS matrix3d transforms. */
.cinema-gallery { perspective: none; perspective-origin: center center; }
.cinema-card {
  overflow: visible;
  transform-origin: 0 0;
  box-shadow: 0 18px 56px rgba(0,0,0,.62);
}
.cinema-card-media {
  box-shadow: inset 0 0 0 3px rgba(234,200,164,.30);
  border: 1px solid rgba(240,222,193,.48);
}
.cinema-card:not(.is-current)::before {
  content: '';
  position: absolute;
  inset: -12px -12px -13px -12px;
  pointer-events: none;
  background: linear-gradient(135deg,rgba(255,216,169,.45),rgba(26,29,34,.9) 27%,rgba(118,82,50,.85) 72%,rgba(255,222,184,.45));
  border: 1px solid rgba(234,197,158,.53);
  box-shadow: 0 22px 72px rgba(0,0,0,.66), 0 0 25px rgba(227,169,103,.12);
}
.cinema-card:not(.is-current)::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255,217,178,.45);
  box-shadow: inset 0 0 18px rgba(0,0,0,.38), 0 0 21px rgba(228,159,86,.11);
  pointer-events: none;
}
.cinema-card:not(.is-current):hover::after,
.cinema-card:not(.is-current):focus-visible::after {
  border-color: rgba(255,234,210,.86);
  box-shadow: inset 0 0 18px rgba(0,0,0,.25), 0 0 32px rgba(235,190,142,.33);
}
.cinema-card.is-current {
  overflow: hidden;
  box-shadow: 0 25px 66px rgba(0,0,0,.56);
}
.cinema-card-caption {
  position: absolute;
  z-index: 2;
  left: 35px;
  bottom: 32px;
  max-width: calc(100% - 70px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-shadow: 0 2px 13px #000, 0 1px 6px #000;
  pointer-events: none;
  transition: opacity 500ms ease;
}
.cinema-card-title {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 35px;
  font-weight: 550;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cinema-card-duration { font-size: 30px; line-height: 1.1; letter-spacing: .12em; }
.cinema-card-duration[hidden] { display: none; }
.cinema-card.is-current .cinema-card-caption { opacity: 0; visibility: hidden; }
.cinema-card:not(.is-current) .cinema-card-media::after {
  content: '';
  position: absolute;
  inset: 54% 0 0;
  background: linear-gradient(transparent,rgba(0,0,0,.54));
  pointer-events: none;
}
.cinema-card.is-current .cinema-card-media { border: 0; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .cinema-card, .cinema-card-caption { transition-duration: .01ms !important; }
}