:root {
  --sand: #d7c39b;
  --deep: #17130d;
  --cream: #f8f1e3;
  --gold: #a98445;
  --blue: #315f67;
  --glass: rgba(255,255,255,0.12);
  --paper: #ffffff;
  --paper-edge: #e7e1d8;
  --ink: #20170e;
  --muted-ink: rgba(32,23,14,.66);
  --clay: #8f6b3d;
  --sea: #7d9da0;
  --brand-blue: #758592;
  --brand-beige: #c5b9ac;
  --factsheet-heading: var(--brand-blue);
  --body-copy-size: 16px;
  --body-copy-line: 1.58;
}

@font-face {
  font-family: 'Lorenza';
  src: url('assets/fonts/Lorenza-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Lorenza';
  src: url('assets/fonts/Lorenza-Medium.otf') format('opentype');
  font-weight: 600;
}

@font-face {
  font-family: 'MarmaricaInk';
  src: url('assets/fonts/Marmarica-HHHH.ttf') format('truetype');
}

@font-face {
  font-family: 'CFRemington';
  src: url('assets/fonts/CFRemington-Typewriter.ttf') format('truetype');
}

@font-face {
  font-family: 'Signature';
  src: url('assets/fonts/BSSignature-Demo.ttf') format('truetype');
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; font-family: Inter, Arial, sans-serif; background: var(--deep); color: var(--cream); }
button { font: inherit; cursor: pointer; border: 0; }
.intro-stage { cursor: pointer; }
.experience { width: 100vw; height: 100vh; position: relative; overflow: hidden; }
.screen { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform: scale(1.03); transition: opacity 760ms ease, transform 1200ms ease; }
.screen.active { opacity: 1; pointer-events: auto; transform: scale(1); }
.intro.active { z-index: 3; }
.collective.active, .collective.warming { z-index: 2; opacity: 1; transform: scale(1); }

.intro {
  background: #17130d;
  display: grid;
  place-items: center;
}
.logo-video, .masyaf-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo-video, .masyaf-video { object-fit: cover; filter: contrast(1.08) saturate(0.9); }
.intro-reveal-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
  opacity: 1;
  transform: scale(1.035);
  backface-visibility: hidden;
  will-change: transform;
  filter: contrast(1.02) saturate(.92);
  transition: transform 2400ms cubic-bezier(.45,0,.2,1) 700ms;
}
.intro.collective-reveal .intro-reveal-video {
  transform: scale(1);
}
.intro-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 0;
  overflow: hidden;
  background: transparent;
  color: transparent;
  backface-visibility: hidden;
  transform: translateZ(0) scale(1);
  will-change: transform;
  transition: transform 2300ms cubic-bezier(.45,0,.2,1);
}
.intro-stage.is-opening {
  transform: translateZ(0) scale(1.015);
}
.intro-layer {
  position: absolute;
  z-index: 2;
  display: block;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 26px 44px rgba(23,19,13,.18));
  transition:
    transform 1800ms cubic-bezier(.45,0,.2,1),
    opacity 420ms ease,
    filter 900ms ease;
  will-change: transform, opacity;
}
.intro-linen {
  width: 122vw;
  height: auto;
  object-fit: cover;
  opacity: .9;
  mix-blend-mode: multiply;
  filter: contrast(1.04) saturate(.82) drop-shadow(0 18px 38px rgba(23,19,13,.1));
}
.intro-linen-top {
  top: -12vh;
  left: -11vw;
  transform: rotate(-2deg) scale(1.02);
  transition-delay: 1150ms;
}
.intro-linen-bottom {
  right: -12vw;
  bottom: -20vh;
  transform: rotate(178deg) scale(1.03);
  opacity: .78;
  transition-delay: 1280ms;
}
.intro-grass-shadow {
  inset: -12vh -10vw auto -10vw;
  z-index: 30;
  width: 120vw;
  height: 120vh;
  object-fit: cover;
  opacity: .92;
  mix-blend-mode: multiply;
  transform: translate3d(-1.5%, -1%, 0) scale(1.04) rotate(-1deg);
  transform-origin: 50% 22%;
  filter: contrast(1.28) saturate(1.04);
  animation: none;
  transition-delay: 0ms;
}
.intro-grass-shadow-left {
  transition-delay: 0ms;
}
.intro-grass-shadow-mirror {
  transform: translate3d(1.5%, -1%, 0) scaleX(-1) scale(1.04) rotate(1deg);
  transform-origin: 50% 22%;
  opacity: .88;
  animation: none;
}
.intro-grass-shadow-right {
  transition-delay: 460ms;
}
.intro-stage.is-opening .intro-linen-top {
  transform: translate3d(0, -168vh, 0) rotate(-3deg) scale(1.04);
  opacity: .9;
  filter: contrast(1.03) saturate(.8);
}
.intro-stage.is-opening .intro-linen-bottom {
  transform: translate3d(0, -176vh, 0) rotate(178deg) scale(1.05);
  opacity: .78;
  filter: contrast(1.02) saturate(.78);
}
.intro-stage.is-opening .intro-grass-shadow {
  transform: translate3d(-178vw, -4vh, 0) scale(1.08) rotate(-4deg);
  opacity: .92;
  filter: contrast(1.3) saturate(1.05);
}
.intro-stage.is-opening .intro-grass-shadow-mirror {
  transform: translate3d(178vw, -4vh, 0) scaleX(-1) scale(1.08) rotate(4deg);
  opacity: .88;
}
.intro-stage.intro-clear .intro-grass-shadow {
  opacity: 0;
}
.intro-stage.intro-clear .intro-linen {
  opacity: 0;
}
.intro-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  transform: translate(-50%, -50%);
  display: block;
  width: min(66vw, 860px);
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 18px 48px rgba(23,19,13,.18)) drop-shadow(0 0 30px rgba(255,253,248,.62));
  opacity: 1;
  transition: opacity 700ms ease 820ms, transform 1200ms cubic-bezier(.45,0,.2,1) 720ms, filter 820ms ease 720ms;
}
.intro-stage.is-opening .intro-logo {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.06);
  filter: brightness(0) invert(1) drop-shadow(0 18px 48px rgba(23,19,13,.08));
}
.intro-stage > span:not(.intro-logo) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.masyaf-logo {
  position: relative; z-index: 3; width: min(70vw, 980px); height: 210px; background: transparent; color: white;
  font-size: clamp(54px, 11vw, 150px); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  mix-blend-mode: screen; transition: transform 1200ms cubic-bezier(.16,1,.3,1), opacity 800ms ease;
}
.masyaf-logo span { display: block; text-shadow: 0 16px 45px rgba(0,0,0,.35); }
.masyaf-logo.zoomed { transform: scale(9); opacity: 0; pointer-events: none; }
.story-layer, .brand-layer {
  position: absolute; left: 8vw; bottom: 9vh; z-index: 4; max-width: 650px; opacity: 0; transform: translateY(24px);
  transition: opacity 900ms ease 500ms, transform 900ms ease 500ms;
}
.story-layer.visible, .brand-layer.visible { opacity: 1; transform: translateY(0); }
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.hero-facts span {
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(248,241,227,.86);
  border: 1px solid rgba(197,185,172,.42);
  color: rgba(32,23,14,.68);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.hero-facts strong {
  color: var(--brand-blue);
  margin-right: 5px;
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(58px, 10vw, 140px); letter-spacing: -.06em; line-height: .88; }
h2 { font-size: clamp(32px, 5.5vw, 78px); letter-spacing: -.05em; line-height: .9; }
h3 { font-size: 36px; letter-spacing: -.04em; }
p { font-size: var(--body-copy-size); line-height: var(--body-copy-line); color: rgba(244,239,229,.82); }
.primary-btn, .secondary-btn { margin-top: 28px; padding: 15px 24px; border-radius: 999px; background: var(--cream); color: var(--deep); font-weight: 700; box-shadow: 0 14px 34px rgba(23,19,13,.18); }
.primary-btn:hover, .primary-btn:focus-visible { background: #fff8ea; color: var(--clay); }
.secondary-btn { background: transparent; color: var(--cream); border: 1px solid rgba(248,241,227,.42); box-shadow: none; }
.full-video, .drone-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: linear-gradient(135deg,#173a3d,#d7c39b); }
.full-video { z-index: 1; }
.final-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}
.drone.final-ready .final-frame {
  opacity: 1;
}
.drone-fallback { z-index: 0; }
.collective { background: var(--brand-blue); }
.video-shade {
  display: none;
}
.collective .story-layer {
  z-index: 4;
  left: clamp(36px, 7vw, 104px);
  bottom: clamp(44px, 8vh, 92px);
  max-width: min(660px, 48vw);
  color: var(--ink);
  text-shadow: none;
}
.collective .story-layer h1 {
  color: #fffdf8;
  font-family: 'CFRemington', 'Lorenza', Georgia, serif;
  font-size: clamp(58px, 8.4vw, 126px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: .92;
}
.collective .story-layer p {
  width: min(560px, 100%);
  margin-top: 18px;
  color: rgba(255,253,248,.86);
  font-family: 'Lorenza', Georgia, serif;
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.5;
}
.collective .primary-btn {
  background: #fffdf8;
  color: var(--brand-blue);
  border: 1px solid rgba(255,253,248,.48);
  border-radius: 2px;
  box-shadow: 0 18px 42px rgba(49,95,103,.2);
  font-family: 'CFRemington', 'Lorenza', Georgia, serif;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.collective .primary-btn:hover,
.collective .primary-btn:focus-visible {
  background: var(--brand-blue);
  color: #fffdf8;
}
.sound-toggle { position: absolute; top: 28px; right: 28px; z-index: 10; display: flex; gap: 10px; }
.sound-toggle button { border-radius: 999px; padding: 12px 18px; background: rgba(23,19,13,.42); color: var(--cream); backdrop-filter: blur(14px); border: 1px solid rgba(248,241,227,.22); }
.drone-points {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}
.drone.points-visible .drone-points {
  opacity: 1;
  pointer-events: auto;
}
.drone.points-visible .sound-toggle {
  opacity: 0;
  pointer-events: none;
}

.drone .detail-panel {
  display: none;
}

.map-hotspots {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 520ms ease;
}

.drone.points-visible .map-hotspots {
  opacity: 1;
  pointer-events: auto;
}

.drone.paper-open .map-hotspots {
  opacity: 0;
  pointer-events: none;
}

.film-panel {
  position: absolute;
  top: 1vh;
  left: 50%;
  right: auto;
  bottom: 1vh;
  z-index: 6;
  width: min(88vw, 1280px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 38px) scale(.96);
  transition: opacity 780ms ease 160ms, transform 900ms cubic-bezier(.16,1,.3,1) 160ms;
  perspective: 1800px;
  transform-style: preserve-3d;
}

.drone.paper-open .film-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.film-panel::before,
.film-panel::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -7px;
  height: 32px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(23,19,13,.24);
  filter: blur(18px);
  opacity: .72;
  pointer-events: none;
}

.film-panel::after {
  left: 42px;
  right: 42px;
  bottom: -13px;
  height: 18px;
  opacity: .34;
  filter: blur(12px);
}

.film-panel.is-turning .paper-menu,
.film-panel.is-turning .paper-side-btn {
  pointer-events: none;
}

.paper-turn-curl {
  display: none;
}

.paper-turn-curl::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 50%, rgba(255,255,255,.72), transparent 36%),
    linear-gradient(90deg, rgba(32,23,14,.16), transparent 18%, transparent 72%, rgba(32,23,14,.2));
  opacity: .78;
}

.paper-turn-curl::after {
  content: "";
  position: absolute;
  top: -8%;
  bottom: -8%;
  right: clamp(10px, 3vw, 42px);
  width: clamp(28px, 5vw, 72px);
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(255,255,255,.62), rgba(32,23,14,.12), transparent);
  filter: blur(8px);
  transform: rotate(2deg);
}

.film-panel.turn-next .paper-turn-curl {
  animation: none;
}

.film-panel.turn-prev .paper-turn-curl {
  animation: none;
}

.film-panel.is-turning .film-window {
  pointer-events: none;
}

.film-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-right: 22px;
}

.paper-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 2vw, 30px);
  padding: 0 clamp(16px, 4vw, 54px) 10px;
  min-height: 48px;
}

.paper-menu button {
  position: relative;
  padding: 8px 10px 6px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.78);
  font-family: 'CFRemington', 'Lorenza', Georgia, serif;
  font-size: clamp(16px, 1.35vw, 25px);
  line-height: 1;
  text-shadow:
    0 0 8px rgba(255,255,255,.72),
    0 0 22px rgba(255,248,234,.48),
    0 8px 24px rgba(0,0,0,.36);
  transition: color 220ms ease, transform 220ms ease, text-shadow 220ms ease;
}

.paper-menu button::before {
  content: "";
  position: absolute;
  inset: -10px -18px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 48%, rgba(255,248,234,.34), rgba(197,185,172,.16) 44%, transparent 74%);
  filter: blur(8px);
  opacity: .45;
  transform: scale(.86);
  transition: opacity 220ms ease, transform 220ms ease;
}

.paper-menu button:hover,
.paper-menu button:focus-visible,
.paper-menu button.active {
  color: #fffdf8;
  transform: translateY(-1px);
  outline: none;
  text-shadow:
    0 0 12px rgba(255,255,255,.95),
    0 0 34px rgba(255,248,234,.84),
    0 0 72px rgba(197,185,172,.54);
}

.paper-menu button:hover::before,
.paper-menu button:focus-visible::before,
.paper-menu button.active::before {
  opacity: .72;
  transform: scale(.98);
}

.film-controls button {
  min-width: 72px;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(248,241,227,.94);
  border: 1px solid rgba(143,107,61,.28);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  font-weight: 800;
}

#filmPrev,
#filmToggle,
#filmNext {
  display: none;
}

.paper-side-btn {
  position: absolute;
  top: 50%;
  z-index: 9;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(143,107,61,.28);
  border-radius: 50%;
  background: rgba(248,241,227,.95);
  color: rgba(32,23,14,.74);
  box-shadow: 0 12px 30px rgba(23,19,13,.16), inset 0 1px 0 rgba(255,255,255,.76);
  font-family: Georgia, serif;
  font-size: 30px;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
  transition: transform 220ms ease, background 220ms ease, color 220ms ease, opacity 220ms ease;
}

.paper-side-btn:hover,
.paper-side-btn:focus-visible {
  background: #fff8ea;
  color: var(--ink);
  transform: translateY(-50%) scale(1.08);
  outline: none;
}

.paper-side-left {
  left: -54px;
}

.paper-side-right {
  right: -54px;
}

.film-window {
  position: relative;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 0 0 42vh;
  border-radius: 3px;
  background:
    linear-gradient(135deg, #ffffff, var(--paper) 32%, #f5f2ed),
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.92), transparent 32%);
  border: 1px solid rgba(231,225,216,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(143,107,61,.1),
    inset 16px 0 18px rgba(143,107,61,.035),
    inset -18px 0 22px rgba(32,23,14,.052),
    0 28px 86px rgba(23,19,13,.27);
  color: var(--ink);
  transform-style: preserve-3d;
  transform-origin: var(--paper-origin, 100% 50%);
  backface-visibility: hidden;
  will-change: transform, filter, box-shadow;
  --paper-top-alpha: 1;
  --paper-top-soft: 0%;
  --paper-top-solid: 0%;
  --paper-bottom-solid: 88%;
  --paper-bottom-soft: 94%;
  --paper-bottom-alpha: 0;
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0,0,0,var(--paper-top-alpha)) 0%,
    rgba(0,0,0,.72) var(--paper-top-soft),
    #000 var(--paper-top-solid),
    #000 var(--paper-bottom-solid),
    rgba(0,0,0,.72) var(--paper-bottom-soft),
    rgba(0,0,0,var(--paper-bottom-alpha)) 100%
  );
  mask-image: linear-gradient(
    180deg,
    rgba(0,0,0,var(--paper-top-alpha)) 0%,
    rgba(0,0,0,.72) var(--paper-top-soft),
    #000 var(--paper-top-solid),
    #000 var(--paper-bottom-solid),
    rgba(0,0,0,.72) var(--paper-bottom-soft),
    rgba(0,0,0,var(--paper-bottom-alpha)) 100%
  );
}

.film-window::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, rgba(22,19,15,.022) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(92deg, rgba(143,107,61,.018) 0 1px, transparent 1px 11px),
    radial-gradient(circle at 92% 16%, rgba(183,154,98,.12), transparent 32%),
    radial-gradient(circle at 12% 78%, rgba(49,95,103,.035), transparent 26%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.film-window::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: clamp(22px, 3vw, 46px);
  background:
    linear-gradient(90deg, transparent, rgba(143,107,61,.07) 48%, rgba(32,23,14,.13)),
    radial-gradient(ellipse at 100% 0%, rgba(255,255,255,.74), transparent 40%),
    radial-gradient(ellipse at 100% 100%, rgba(32,23,14,.1), transparent 42%);
  pointer-events: none;
  opacity: .78;
}

.film-window::-webkit-scrollbar {
  display: none;
}

.film-strip {
  display: grid;
  gap: 0;
  position: relative;
  z-index: 1;
}

.film-strip::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(18px, 3vw, 48px);
  z-index: 2;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(143,107,61,.12) 12%, rgba(143,107,61,.07) 88%, transparent);
  box-shadow: 1px 0 0 rgba(255,255,255,.42);
  pointer-events: none;
  opacity: .68;
}

.film-frame {
  position: relative;
  width: 100%;
  min-height: min(820px, 86vh);
  display: grid;
  align-items: center;
  padding: 0 clamp(38px, 6vw, 96px);
  margin: 0;
  text-align: left;
  color: var(--ink);
  cursor: default;
  background: transparent;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  transform: translateY(0);
  contain: layout paint style;
}

.film-window.paper-turn-next {
  animation: paperPageFromRight 620ms cubic-bezier(.16,1,.3,1) both;
  -webkit-mask-image: none;
  mask-image: none;
}

.film-window.paper-turn-prev {
  animation: paperPageFromLeft 620ms cubic-bezier(.16,1,.3,1) both;
  -webkit-mask-image: none;
  mask-image: none;
}

.film-window.paper-exit-left {
  animation: paperPageExitLeft 360ms cubic-bezier(.7,0,.84,0) both;
}

.film-window.paper-exit-right {
  animation: paperPageExitRight 360ms cubic-bezier(.7,0,.84,0) both;
}

.film-window.paper-turn-out-next {
  animation: premiumPaperOutNext 360ms cubic-bezier(.55,0,.78,.35) both;
  -webkit-mask-image: none;
  mask-image: none;
}

.film-window.paper-turn-in-next {
  animation: premiumPaperInNext 620ms cubic-bezier(.16,1,.3,1) both;
  -webkit-mask-image: none;
  mask-image: none;
}

.film-window.paper-turn-out-prev {
  animation: premiumPaperOutPrev 360ms cubic-bezier(.55,0,.78,.35) both;
  -webkit-mask-image: none;
  mask-image: none;
}

.film-window.paper-turn-in-prev {
  animation: premiumPaperInPrev 620ms cubic-bezier(.16,1,.3,1) both;
  -webkit-mask-image: none;
  mask-image: none;
}

.paper-video-wrap {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: auto;
  right: 0;
  width: calc(50% + clamp(38px, 6vw, 96px));
  height: auto;
  opacity: 1;
  overflow: hidden;
  border-radius: 0;
  clip-path: none;
  filter: saturate(.86) sepia(.16) contrast(.98);
  transform: none;
  box-shadow: none;
}

.paper-video-wrap::after {
  display: none;
}

.paper-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  border-radius: 0;
  transform: none;
  backface-visibility: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 11%, rgba(0,0,0,.3) 24%, rgba(0,0,0,.68) 40%, #000 60%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 11%, rgba(0,0,0,.3) 24%, rgba(0,0,0,.68) 40%, #000 60%, #000 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

.film-frame:nth-child(2n) .paper-video-wrap {
  left: auto;
  right: 0;
  width: calc(50% + clamp(38px, 6vw, 96px));
  height: auto;
  border-radius: 0;
  transform: none;
}

.film-frame.media-right .paper-video-wrap {
  left: auto;
  right: 0;
  width: calc(50% + clamp(38px, 6vw, 96px));
  height: auto;
  border-radius: 0;
  transform: none;
}

.film-frame:nth-child(2n) .paper-video {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 11%, rgba(0,0,0,.3) 24%, rgba(0,0,0,.68) 40%, #000 60%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 11%, rgba(0,0,0,.3) 24%, rgba(0,0,0,.68) 40%, #000 60%, #000 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.film-frame.media-right .paper-video {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 11%, rgba(0,0,0,.3) 24%, rgba(0,0,0,.68) 40%, #000 60%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 11%, rgba(0,0,0,.3) 24%, rgba(0,0,0,.68) 40%, #000 60%, #000 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.film-frame:nth-child(3n) .paper-video-wrap {
  left: auto;
  right: 0;
  width: calc(50% + clamp(38px, 6vw, 96px));
  height: auto;
  border-radius: 0;
  transform: none;
}

.film-frame:nth-child(3n) .paper-video {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 11%, rgba(0,0,0,.3) 24%, rgba(0,0,0,.68) 40%, #000 60%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 11%, rgba(0,0,0,.3) 24%, rgba(0,0,0,.68) 40%, #000 60%, #000 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.film-frame:nth-child(4n) .paper-video-wrap {
  left: auto;
  right: 0;
  width: calc(50% + clamp(38px, 6vw, 96px));
  height: auto;
  border-radius: 0;
  transform: none;
}

.film-frame:nth-child(4n) .paper-video {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 10%, rgba(0,0,0,.3) 24%, rgba(0,0,0,.66) 40%, #000 59%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 10%, rgba(0,0,0,.3) 24%, rgba(0,0,0,.66) 40%, #000 59%, #000 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.drone.points-visible .film-frame {
  animation: paperSectionIn 720ms cubic-bezier(.16,1,.3,1) var(--frame-delay, 0ms) both;
}

.drone.paper-open.points-visible .film-frame {
  animation: none;
}

.film-frame:hover,
.film-frame:focus-visible,
.film-frame.active {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

.film-number {
  display: none;
  position: static;
  padding: 0 0 12px;
  background: transparent;
  color: rgba(22,19,15,.42);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.film-image {
  position: relative;
  min-height: 132px;
  border-radius: 2px;
  background-position: var(--media-x, 50%) center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: sepia(.14) contrast(1.04) saturate(.86);
  box-shadow: inset 0 0 0 1px rgba(22,19,15,.18), 0 12px 28px rgba(22,19,15,.12);
  overflow: hidden;
}

.film-image b {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 1;
  color: white;
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.film-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.42));
}

.film-copy,
.film-media-row,
.film-stats,
.film-items,
.film-stats span,
.film-items em {
  display: flex;
}

.film-copy {
  position: relative;
  z-index: 2;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  width: min(46vw, 760px);
  max-width: 48%;
  margin-left: 0;
  margin-right: auto;
  padding-block: clamp(42px, 8vh, 86px);
  align-items: flex-start;
  text-align: left;
}

.film-frame:nth-child(2n) .film-copy,
.film-frame:nth-child(4n) .film-copy,
.film-frame.media-right .film-copy {
  margin-left: 0;
  margin-right: auto;
}

.film-frame.no-video {
  padding-inline: clamp(52px, 10vw, 160px);
}

.film-frame.no-video .film-copy {
  width: min(760px, 72%);
  max-width: 72%;
  margin-left: 0;
  margin-right: auto;
}

.film-frame.has-gallery .film-copy {
  width: min(1040px, 88%);
  max-width: 88%;
}

.film-frame:not(:first-child) {
  padding-inline: clamp(48px, 7vw, 120px);
}

.film-frame:not(:first-child) .film-copy {
  width: min(520px, 46%);
  max-width: 46%;
}

.film-frame:not(:first-child) .film-text {
  max-width: min(560px, 100%);
}

.film-frame:not(:first-child):nth-child(odd) .film-copy {
  margin-left: 0;
  margin-right: auto;
}

.film-frame:not(:first-child):nth-child(even) .film-copy {
  margin-left: auto;
  margin-right: 0;
}

.film-frame:not(:first-child):nth-child(even) .paper-video-wrap {
  left: 0;
  right: auto;
}

.film-frame:not(:first-child):nth-child(even) .paper-video {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,.68) 60%, rgba(0,0,0,.3) 76%, rgba(0,0,0,.06) 89%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,.68) 60%, rgba(0,0,0,.3) 76%, rgba(0,0,0,.06) 89%, transparent 100%);
}

.film-frame.has-gallery {
  min-height: auto;
  padding-block: clamp(58px, 9vh, 120px) clamp(110px, 18vh, 210px);
}

.film-frame.has-gallery .film-copy {
  width: 100%;
  max-width: 100%;
}

.film-frame.has-gallery .film-copy > strong,
.film-frame.has-gallery .film-text {
  width: min(520px, 46%);
  max-width: min(560px, 46%);
}

.film-frame.has-gallery:nth-child(odd) .film-copy > strong,
.film-frame.has-gallery:nth-child(odd) .film-text {
  align-self: flex-start;
}

.film-frame.has-gallery:nth-child(even) .film-copy > strong,
.film-frame.has-gallery:nth-child(even) .film-text {
  align-self: flex-end;
}

.film-frame.has-gallery .film-media-row {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: clamp(26px, 5vh, 64px);
  margin-top: clamp(34px, 7vh, 86px);
}

.film-frame.has-gallery .film-image {
  width: min(58%, 680px);
  min-height: clamp(210px, 38vh, 430px);
}

.film-frame.has-gallery .film-image:nth-child(odd) {
  align-self: flex-start;
  transform: none;
}

.film-frame.has-gallery .film-image:nth-child(even) {
  align-self: flex-end;
  transform: translateY(clamp(8px, 2vh, 26px));
}

.film-title-row {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  width: min(620px, 100%);
}

.film-title-row strong {
  flex: 1 1 auto;
}

.film-title-image {
  position: relative;
  flex: 0 0 clamp(92px, 12vw, 150px);
  width: clamp(92px, 12vw, 150px);
  aspect-ratio: 1 / .78;
  overflow: hidden;
  border-radius: 2px;
  background-position: center;
  background-size: cover;
  filter: sepia(.12) saturate(.9) contrast(1.04);
  box-shadow: inset 0 0 0 1px rgba(22,19,15,.16), 0 12px 26px rgba(22,19,15,.12);
}

.film-title-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.38));
}

.film-title-image b {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 8px;
  z-index: 1;
  color: white;
  font-family: Inter, Arial, sans-serif;
  font-size: 9px;
  line-height: 1.1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.film-frame:not(:first-child):nth-child(even) .film-title-row {
  flex-direction: row-reverse;
}

.film-frame:not(:first-child):nth-child(even) .film-title-row,
.film-frame:not(:first-child):nth-child(even) .film-text {
  align-self: flex-end;
}

.film-media-row {
  display: none;
}

.film-frame.has-gallery {
  padding-bottom: clamp(42px, 7vh, 92px);
}

.film-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(120px, 16vw, 210px);
  align-items: stretch;
  column-gap: clamp(18px, 3vw, 42px);
}

.film-frame:first-child .film-copy {
  display: flex;
}

.film-text-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.film-side-image {
  position: relative;
  display: block;
  min-height: 100%;
  overflow: hidden;
  border-radius: 2px;
  background-position: center;
  background-size: cover;
  filter: sepia(.12) saturate(.9) contrast(1.04);
  box-shadow: inset 0 0 0 1px rgba(22,19,15,.16), 0 12px 26px rgba(22,19,15,.12);
}

.film-side-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.36));
}

.film-side-image b {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 8px;
  z-index: 1;
  color: white;
  font-family: Inter, Arial, sans-serif;
  font-size: 9px;
  line-height: 1.1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.film-frame:not(:first-child):nth-child(even) .film-copy {
  grid-template-columns: clamp(120px, 16vw, 210px) minmax(0, 1fr);
}

.film-frame:not(:first-child):nth-child(even) .film-text-block {
  grid-column: 2;
}

.film-frame:not(:first-child):nth-child(even) .film-side-image {
  grid-column: 1;
  grid-row: 1;
}

.film-title-image,
.film-title-row {
  display: none;
}

.film-frame.no-video .film-text {
  font-size: var(--body-copy-size);
  line-height: var(--body-copy-line);
}

.film-frame:not(:first-child) {
  min-height: auto;
  align-items: start;
  padding-block: clamp(42px, 7vh, 92px);
}

.film-frame:not(:first-child) .film-copy {
  width: min(760px, 74%);
  max-width: 74%;
  gap: 10px;
  padding-block: 0;
}

.film-frame:not(:first-child) .film-copy strong {
  font-size: clamp(22px, 2.35vw, 38px);
  line-height: 1.08;
}

.film-frame:not(:first-child) .film-text {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.58;
}

.film-eyebrow {
  display: none;
  color: rgba(22,19,15,.5);
  font-family: Inter, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 10px;
  font-weight: 800;
}

.film-copy strong {
  position: relative;
  z-index: 2;
  max-width: 100%;
  font-family: 'CFRemington', 'Lorenza', Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 74px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--factsheet-heading);
  text-shadow: 0 1px 0 rgba(255,248,234,.5);
}

.film-media-row {
  display: none;
  width: min(900px, 100%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.film-frame.has-gallery .film-media-row {
  display: grid;
  width: 100%;
  grid-template-columns: 1.08fr .86fr 1fr;
  gap: clamp(14px, 2vw, 30px);
  align-items: stretch;
  margin-top: clamp(24px, 4vh, 52px);
}

.film-frame.has-gallery {
  padding-bottom: clamp(86px, 14vh, 170px);
}

.film-frame.has-gallery .film-image {
  min-height: clamp(180px, 28vh, 340px);
}

.film-frame.has-gallery .film-image:nth-child(2) {
  transform: translateY(clamp(24px, 5vh, 62px));
}

.film-frame.has-gallery .film-image:nth-child(3) {
  transform: translateY(clamp(-16px, -2vh, -6px));
}

.film-text {
  position: relative;
  z-index: 2;
  max-width: 100%;
  color: #756b63;
  font-family: 'Lorenza', Georgia, serif;
  font-size: var(--body-copy-size);
  line-height: var(--body-copy-line);
  white-space: pre-line;
}

.film-frame:not(:first-child) .film-copy {
  width: min(760px, 74%);
  max-width: 74%;
  gap: 10px;
  padding-block: 0;
}

.film-frame:not(:first-child) .film-copy strong {
  font-size: clamp(22px, 2.35vw, 38px);
  line-height: 1.08;
}

.film-frame:not(:first-child) .film-text {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.58;
}

.film-frame.has-gallery .film-copy {
  width: min(1040px, 88%);
  max-width: 88%;
}

.film-frame:not(:first-child) {
  padding-inline: clamp(48px, 7vw, 120px);
}

.film-frame:not(:first-child) .film-copy {
  width: min(520px, 46%);
  max-width: 46%;
}

.film-frame:not(:first-child):nth-child(odd) .film-copy {
  margin-left: 0;
  margin-right: auto;
}

.film-frame:not(:first-child):nth-child(even) .film-copy {
  margin-left: auto;
  margin-right: 0;
}

.film-frame:not(:first-child):nth-child(even) .paper-video-wrap {
  left: 0;
  right: auto;
}

.film-frame:not(:first-child):nth-child(even) .paper-video {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,.68) 60%, rgba(0,0,0,.3) 76%, rgba(0,0,0,.06) 89%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,.68) 60%, rgba(0,0,0,.3) 76%, rgba(0,0,0,.06) 89%, transparent 100%);
}

.film-frame.has-gallery {
  min-height: auto;
  padding-block: clamp(58px, 9vh, 120px) clamp(110px, 18vh, 210px);
}

.film-frame.has-gallery .film-copy {
  width: 100%;
  max-width: 100%;
}

.film-frame.has-gallery .film-copy > strong,
.film-frame.has-gallery .film-text {
  width: min(520px, 46%);
  max-width: min(560px, 46%);
}

.film-frame.has-gallery:nth-child(odd) .film-copy > strong,
.film-frame.has-gallery:nth-child(odd) .film-text {
  align-self: flex-start;
}

.film-frame.has-gallery:nth-child(even) .film-copy > strong,
.film-frame.has-gallery:nth-child(even) .film-text {
  align-self: flex-end;
}

.film-frame.has-gallery .film-media-row {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: clamp(26px, 5vh, 64px);
  margin-top: clamp(34px, 7vh, 86px);
}

.film-frame.has-gallery .film-image {
  width: min(58%, 680px);
  min-height: clamp(210px, 38vh, 430px);
}

.film-frame.has-gallery .film-image:nth-child(odd) {
  align-self: flex-start;
  transform: none;
}

.film-frame.has-gallery .film-image:nth-child(even) {
  align-self: flex-end;
  transform: translateY(clamp(8px, 2vh, 26px));
}

.film-stats {
  display: none;
  gap: 8px;
  flex-wrap: wrap;
}

.film-stats span {
  flex-direction: column;
  gap: 3px;
  min-width: 88px;
  padding: 9px 10px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid rgba(22,19,15,.18);
  color: rgba(22,19,15,.54);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.film-stats b {
  color: var(--ink);
  font-size: 15px;
  letter-spacing: 0;
}

.film-items {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
}

.film-items em {
  align-items: center;
  min-height: 25px;
  padding: 6px 8px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(22,19,15,.16);
  color: rgba(22,19,15,.7);
  font-style: normal;
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.map-screen { background: #17130d; }
.top-view-bg { position: absolute; inset: 0; background: url('assets/images/marmarica-top-view.jpg') center/cover no-repeat, radial-gradient(circle at 50% 40%, #d7c39b, #315f67 60%, #17130d); transition: transform 1200ms cubic-bezier(.16,1,.3,1); }
.map-vignette { position: absolute; inset: 0; background: radial-gradient(circle, transparent 35%, rgba(0,0,0,.58)); }
.map-title { position: absolute; left: 5vw; top: 6vh; z-index: 2; }
.map-title p, .pool-content p, .brand-layer p { text-transform: uppercase; letter-spacing: .24em; font-size: 12px; color: rgba(255,255,255,.62); margin-bottom: 12px; }
.hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  width: auto;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  color: white;
  background: transparent;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.35);
  display: flex;
  align-items: center;
  gap: 10px;
}
.drone.points-visible .hotspot {
  animation: flareIn 620ms cubic-bezier(.16,1,.3,1) var(--delay, 0ms) forwards;
}
.hotspot::before,
.hotspot::after {
  content: "";
  position: absolute;
  inset: 50%;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.hotspot::before {
  width: 34px;
  height: 34px;
  background: radial-gradient(circle, rgba(255,248,234,.95) 0 8%, rgba(215,195,155,.64) 9% 26%, rgba(169,132,69,.28) 27% 48%, transparent 62%);
  box-shadow: 0 0 22px rgba(215,195,155,.72), 0 0 54px rgba(169,132,69,.48);
}
.hotspot::after {
  width: 9px;
  height: 9px;
  background: #fff8ea;
  box-shadow: 0 0 12px rgba(255,255,255,.85), 0 0 24px rgba(215,195,155,.85);
}
.hotspot span {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 62%);
  opacity: .75;
}
.hotspot b {
  position: relative;
  min-width: max-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.map-hotspots .hotspot {
  height: 54px;
  gap: 14px;
}

.map-hotspots .hotspot::before {
  width: 68px;
  height: 68px;
  background:
    radial-gradient(circle, rgba(255,255,255,.98) 0 7%, rgba(255,248,234,.88) 8% 20%, rgba(197,185,172,.56) 21% 42%, rgba(117,133,146,.28) 43% 62%, transparent 76%);
  box-shadow:
    0 0 22px rgba(255,248,234,.92),
    0 0 58px rgba(197,185,172,.72),
    0 0 92px rgba(117,133,146,.44);
}

.map-hotspots .hotspot::after {
  width: 15px;
  height: 15px;
  background: #fffdf8;
  box-shadow:
    0 0 14px rgba(255,255,255,.95),
    0 0 34px rgba(255,248,234,.9),
    0 0 62px rgba(197,185,172,.64);
}

.map-hotspots .hotspot span {
  width: 58px;
  height: 58px;
  flex-basis: 58px;
  background: radial-gradient(circle, rgba(255,255,255,.24), rgba(255,248,234,.13) 38%, transparent 70%);
  opacity: 1;
}

.map-hotspots .hotspot b {
  padding: 10px 14px 9px;
  background: rgba(8,9,8,.28);
  border-color: rgba(255,255,255,.28);
  color: rgba(255,255,255,.96);
  font-family: 'CFRemington', 'Lorenza', Georgia, serif;
  font-size: clamp(16px, 1.6vw, 25px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: .95;
  text-transform: none;
  text-shadow: 0 0 14px rgba(255,248,234,.42);
}

.map-hotspots .hotspot {
  height: auto;
  gap: 0;
}

.map-hotspots .hotspot span,
.map-hotspots .hotspot::before,
.map-hotspots .hotspot::after {
  display: none;
}

.map-hotspots .hotspot b {
  padding: 10px 16px 8px;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  color: rgba(255,255,255,.97);
  font-size: clamp(25px, 2.8vw, 48px);
  line-height: .95;
  text-shadow:
    0 0 10px rgba(255,255,255,.92),
    0 0 28px rgba(255,248,234,.82),
    0 0 58px rgba(197,185,172,.58),
    0 0 92px rgba(117,133,146,.34),
    0 12px 34px rgba(0,0,0,.42);
}

.map-hotspots .hotspot b::before {
  content: "";
  position: absolute;
  inset: -14px -24px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 48%, rgba(255,248,234,.4), rgba(197,185,172,.22) 42%, transparent 72%);
  filter: blur(8px);
  opacity: .9;
  transform: scale(.9);
  transition: opacity 260ms ease, transform 260ms ease;
}

.map-hotspots .hotspot:hover b::before,
.map-hotspots .hotspot:focus-visible b::before {
  opacity: .78;
  transform: scale(.98);
}

.film-frame:not(:first-child) {
  padding-block: clamp(92px, 14vh, 178px);
  column-gap: clamp(10px, 1.8vw, 28px);
}

.film-frame:not(:first-child) .film-card-stack {
  align-self: center;
}

.film-frame:not(:first-child) .film-text-block {
  align-self: center;
}

.film-frame:not(:first-child):nth-child(odd) .film-text-block {
  justify-self: end;
  margin-right: clamp(6px, 1.2vw, 18px);
}

.film-frame:not(:first-child):nth-child(odd) .film-card-stack {
  justify-self: start;
  margin-left: clamp(6px, 1.2vw, 18px);
}

.film-frame:not(:first-child):nth-child(even) .film-text-block {
  justify-self: start;
  margin-left: clamp(6px, 1.2vw, 18px);
}

.film-frame:not(:first-child):nth-child(even) .film-card-stack {
  justify-self: end;
  margin-right: clamp(6px, 1.2vw, 18px);
}

.room-icon-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 14px;
  width: min(680px, 100%);
  margin-top: 14px;
}

.room-icon-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6e665f;
  font-family: 'Lorenza', Georgia, serif;
  font-size: 12px;
  line-height: 1.15;
}

.room-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--brand-blue);
  border: 0;
  background: transparent;
}

.room-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.film-frame:not(:first-child):nth-child(odd) {
  column-gap: clamp(2px, .8vw, 14px);
}

.film-frame:not(:first-child):nth-child(odd) .film-text-block {
  transform: translateX(clamp(18px, 3vw, 46px));
  margin-right: 0;
}

.film-frame:not(:first-child):nth-child(odd) .film-card-stack {
  margin-left: 0;
}
.detail-panel {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(320px, .85fr) minmax(420px, 1.15fr);
  gap: 34px;
  padding: clamp(34px, 5vw, 72px);
  background: rgba(8,9,8,.42);
  backdrop-filter: blur(22px);
  opacity: 0;
  pointer-events: none;
  transform: scale(1.025);
  transition: opacity 620ms ease, transform 760ms cubic-bezier(.16,1,.3,1);
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100vh;
  align-content: start;
  scroll-behavior: smooth;
  padding-bottom: max(72px, 8vh);
}
.detail-panel.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.detail-bg {
  position: absolute;
  inset: -30px;
  z-index: 0;
  background: center/cover no-repeat;
  filter: blur(28px) saturate(.9) brightness(.55);
  transform: scale(1.08);
  opacity: .82;
}
.detail-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.22) 52%, rgba(0,0,0,.54));
  pointer-events: none;
}
.close-btn {
  position: absolute;
  top: 28px;
  right: 28px;
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: white;
  font-size: 28px;
  border: 1px solid rgba(255,255,255,.22);
}
.detail-copy,
.detail-media,
.detail-stats,
.detail-gallery {
  position: relative;
  z-index: 2;
}
.detail-copy {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: end;
  max-width: 650px;
  min-height: 0;
  padding-right: 8px;
}
.detail-copy p:first-child {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 14px;
}
.detail-copy h3 {
  margin-bottom: 18px;
  font-size: clamp(46px, 7vw, 92px);
  line-height: .86;
}
.detail-copy > p:last-of-type {
  max-width: 560px;
  font-size: var(--body-copy-size);
  line-height: var(--body-copy-line);
  color: rgba(255,255,255,.78);
}
.detail-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  padding-right: 4px;
}
.detail-items span {
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.detail-media {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  min-height: 42vh;
  border-radius: 8px;
  background: center/cover no-repeat linear-gradient(135deg,#8e9f9e,#d6c196);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
}
.detail-stats {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.detail-stats div {
  padding: 16px;
  border-radius: 8px;
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.16);
}
.detail-stats strong,
.detail-stats span {
  display: block;
}
.detail-stats strong {
  color: white;
  font-size: 20px;
}
.detail-stats span {
  margin-top: 4px;
  color: rgba(255,255,255,.58);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.detail-gallery {
  grid-column: 2;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.detail-gallery div {
  min-height: 120px;
  border-radius: 8px;
  background-position: calc(50% + var(--gallery-offset, 0%)) center;
  background-size: cover;
  border: 1px solid rgba(255,255,255,.16);
  overflow: hidden;
  position: relative;
}
.detail-gallery div::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.62));
}
.detail-gallery span {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 1;
  color: white;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.pool-scene { background: #315f67; }
.water-bg { position: absolute; inset: 0; background: url('assets/images/pool-water.jpg') center/cover no-repeat, radial-gradient(circle at 40% 35%,#7d9da0,#315f67 70%); transform: scale(1.08); }
.pool-content { position: absolute; inset: auto 7vw 8vh 7vw; z-index: 2; }
.data-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
.data-grid div { padding: 22px; border-radius: 20px; background: rgba(255,255,255,.12); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.14); }
.data-grid strong, .data-grid span { display: block; }
.data-grid span { margin-top: 8px; color: rgba(255,255,255,.72); }
.masyaf-scene { background: #d7c39b; display: grid; place-items: center; }
.brand-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.brand-tags span { padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18); }
.rotate-notice { display: none; position: fixed; inset: 0; z-index: 999; background: var(--deep); color: var(--cream); place-items: center; text-align: center; padding: 32px; }

@keyframes logoLight {
  from { transform: translate3d(-8%, -3%, 0) scale(1.02); }
  to { transform: translate3d(8%, 4%, 0) scale(1.08); }
}

@keyframes tropicalShadowWave {
  0% { transform: translate3d(-1.5%, -1%, 0) scale(1.04) rotate(-1deg); opacity: .28; }
  45% { transform: translate3d(1.8%, .7%, 0) scale(1.065) rotate(.8deg); opacity: .38; }
  100% { transform: translate3d(-.4%, 1.4%, 0) scale(1.05) rotate(-.35deg); opacity: .32; }
}

@keyframes flareIn {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.35); }
  68% { opacity: 1; transform: translate(-50%,-50%) scale(1.04); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

@keyframes floatingPoint {
  0%, 100% { transform: translate(-50%,-50%) translate3d(0, 0, 0) scale(1); }
  35% { transform: translate(-50%,-50%) translate3d(0, -4px, 0) scale(1.006); }
  70% { transform: translate(-50%,-50%) translate3d(3px, 2px, 0) scale(.998); }
}

@keyframes filmFrameIn {
  0% { opacity: 0; transform: translateY(34px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes paperSectionIn {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes paperPageFromRight {
  0% { opacity: 0; transform: translateX(72px) scale(.985); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes paperPageFromLeft {
  0% { opacity: 0; transform: translateX(-72px) scale(.985); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes paperPageExitLeft {
  0% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(-86px) scale(.975); }
}

@keyframes paperPageExitRight {
  0% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(86px) scale(.975); }
}

@keyframes flexiblePageNext {
  0% {
    width: 0%;
    opacity: 0;
    transform: translate3d(0,0,30px) skewY(0deg) scaleX(.24);
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 0);
  }
  18% {
    width: 34%;
    opacity: 1;
    transform: translate3d(-2%,0,34px) skewY(-1deg) scaleX(.88);
    clip-path: polygon(20% 0, 100% 0, 92% 100%, 4% 100%);
  }
  52% {
    width: 72%;
    opacity: 1;
    transform: translate3d(-12%,0,38px) skewY(.7deg) scaleX(1.02);
    clip-path: polygon(0 0, 96% 0, 100% 100%, 8% 100%);
  }
  76% {
    width: 46%;
    opacity: .92;
    transform: translate3d(-72%,0,34px) skewY(1.2deg) scaleX(.9);
    clip-path: polygon(0 0, 86% 0, 100% 100%, 18% 100%);
  }
  100% {
    width: 0%;
    opacity: 0;
    transform: translate3d(-110%,0,30px) skewY(0deg) scaleX(.22);
    clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
  }
}

@keyframes flexiblePagePrev {
  0% {
    width: 0%;
    opacity: 0;
    transform: translate3d(0,0,30px) skewY(0deg) scaleX(.24);
    clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
  }
  18% {
    width: 34%;
    opacity: 1;
    transform: translate3d(2%,0,34px) skewY(1deg) scaleX(.88);
    clip-path: polygon(0 0, 80% 0, 96% 100%, 8% 100%);
  }
  52% {
    width: 72%;
    opacity: 1;
    transform: translate3d(12%,0,38px) skewY(-.7deg) scaleX(1.02);
    clip-path: polygon(4% 0, 100% 0, 92% 100%, 0 100%);
  }
  76% {
    width: 46%;
    opacity: .92;
    transform: translate3d(72%,0,34px) skewY(-1.2deg) scaleX(.9);
    clip-path: polygon(14% 0, 100% 0, 82% 100%, 0 100%);
  }
  100% {
    width: 0%;
    opacity: 0;
    transform: translate3d(110%,0,30px) skewY(0deg) scaleX(.22);
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 0);
  }
}

@keyframes paperUnderPageOut {
  0% { filter: brightness(1); }
  100% { filter: brightness(.965); }
}

@keyframes paperUnderPageIn {
  0% { filter: brightness(.965); }
  100% { filter: brightness(1); }
}

@keyframes premiumPaperOutNext {
  0% { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0) brightness(1); }
  100% { opacity: 0; transform: translate3d(-34px,0,0) scale(.992); filter: blur(6px) brightness(.98); }
}

@keyframes premiumPaperInNext {
  0% { opacity: 0; transform: translate3d(38px,0,0) scale(.992); filter: blur(8px) brightness(1.03); }
  58% { opacity: 1; filter: blur(1px) brightness(1.01); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0) brightness(1); }
}

@keyframes premiumPaperOutPrev {
  0% { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0) brightness(1); }
  100% { opacity: 0; transform: translate3d(34px,0,0) scale(.992); filter: blur(6px) brightness(.98); }
}

@keyframes premiumPaperInPrev {
  0% { opacity: 0; transform: translate3d(-38px,0,0) scale(.992); filter: blur(8px) brightness(1.03); }
  58% { opacity: 1; filter: blur(1px) brightness(1.01); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0) brightness(1); }
}

.film-frame:not(:first-child) {
  grid-template-columns: minmax(0, .95fr) minmax(140px, .62fr);
  column-gap: clamp(26px, 5vw, 76px);
  align-items: stretch;
}

.film-frame:not(:first-child) .film-copy {
  display: contents;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.film-frame:not(:first-child) .film-text-block {
  position: relative;
  z-index: 2;
  grid-column: 1;
  align-self: center;
  justify-self: start;
  width: min(540px, 100%);
  max-width: 100%;
}

.film-frame:not(:first-child) .film-side-image {
  position: relative;
  z-index: 2;
  grid-column: 2;
  align-self: stretch;
  justify-self: end;
  width: min(360px, 100%);
  height: auto;
  min-height: 0;
}

.film-frame:not(:first-child):nth-child(even) {
  grid-template-columns: minmax(140px, .62fr) minmax(0, .95fr);
}

.film-frame:not(:first-child):nth-child(even) .film-text-block {
  grid-column: 2;
  justify-self: end;
}

.film-frame:not(:first-child):nth-child(even) .film-side-image {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.film-frame:not(:first-child) {
  grid-template-columns: minmax(0, .82fr) minmax(190px, .7fr);
  column-gap: clamp(34px, 6vw, 92px);
}

.film-frame:not(:first-child) .film-text-block {
  width: min(430px, 100%);
  gap: 12px;
  align-items: flex-start;
  text-align: left;
}

.film-frame:not(:first-child) .film-text {
  align-self: flex-start;
  max-width: 36ch;
}

.film-frame:not(:first-child) .film-text-block strong {
  width: 100%;
}

.film-frame:not(:first-child):nth-child(even) .film-text {
  align-self: flex-start;
}

.film-card-stack {
  position: relative;
  z-index: 2;
  grid-column: 2;
  align-self: stretch;
  justify-self: end;
  width: min(420px, 100%);
  min-height: clamp(190px, 33vh, 360px);
  display: block;
  perspective: 900px;
}

.film-image-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(150px, 18vw, 230px);
  height: clamp(190px, 34vh, 340px);
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid rgba(22,19,15,.2);
  background-position: center;
  background-size: cover;
  box-shadow: 0 18px 38px rgba(22,19,15,.18), inset 0 0 0 1px rgba(255,255,255,.2);
  filter: sepia(.12) saturate(.9) contrast(1.04);
  opacity: 1;
  transform: translate(-50%, -50%) rotate(var(--card-rotate, 0deg)) translateX(var(--card-x, 0)) translateY(var(--card-y, 0));
  animation: none;
  transition: transform 340ms cubic-bezier(.16,1,.3,1), box-shadow 260ms ease, filter 260ms ease, z-index 0ms linear;
}

.film-image-card:nth-child(1) {
  --card-rotate: -8deg;
  --card-x: -28px;
  --card-y: 8px;
  z-index: 1;
}

.film-image-card:nth-child(2) {
  --card-rotate: 1deg;
  --card-x: 0;
  --card-y: 0;
  z-index: 2;
}

.film-image-card:nth-child(3) {
  --card-rotate: 8deg;
  --card-x: 28px;
  --card-y: 10px;
  z-index: 3;
}

.film-card-stack:hover .film-image-card:nth-child(1),
.film-card-stack:focus-within .film-image-card:nth-child(1) {
  --card-rotate: -13deg;
  --card-x: -118px;
  --card-y: 10px;
}

.film-card-stack:hover .film-image-card:nth-child(2),
.film-card-stack:focus-within .film-image-card:nth-child(2) {
  --card-rotate: 0deg;
  --card-x: 0;
  --card-y: -10px;
}

.film-card-stack:hover .film-image-card:nth-child(3),
.film-card-stack:focus-within .film-image-card:nth-child(3) {
  --card-rotate: 13deg;
  --card-x: 118px;
  --card-y: 10px;
}

.film-image-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(0,0,0,.46));
}

.film-image-card b {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 8px;
  z-index: 1;
  color: white;
  font-family: Inter, Arial, sans-serif;
  font-size: 9px;
  line-height: 1.1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.film-image-card:hover,
.film-image-card:focus-visible {
  outline: none;
  transform: translate(-50%, -50%) rotate(var(--card-rotate, 0deg)) translateX(var(--card-x, 0)) translateY(calc(var(--card-y, 0) - 10px)) scale(1.045);
  z-index: 5;
  filter: sepia(.04) saturate(1.02) contrast(1.06);
  box-shadow: 0 20px 42px rgba(22,19,15,.18), inset 0 0 0 1px rgba(255,255,255,.22);
}

.film-frame:not(:first-child):nth-child(even) {
  grid-template-columns: minmax(190px, .7fr) minmax(0, .82fr);
}

.film-frame:not(:first-child):nth-child(even) .film-card-stack {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.film-frame:not(:first-child) {
  grid-template-columns: minmax(0, .9fr) minmax(210px, .58fr);
  column-gap: clamp(18px, 3.2vw, 46px);
  padding-block: clamp(70px, 11vh, 142px);
}

.film-frame:not(:first-child):nth-child(even) {
  grid-template-columns: minmax(210px, .58fr) minmax(0, .9fr);
}

.film-frame:not(:first-child) .film-text-block {
  width: min(510px, 100%);
}

.film-frame:not(:first-child) .film-text {
  max-width: 43ch;
}

.film-card-stack {
  width: min(360px, 100%);
  min-height: clamp(230px, 38vh, 420px);
}

.film-image-card {
  width: clamp(140px, 16vw, 210px);
  height: clamp(220px, 40vh, 390px);
}

.film-image-card b {
  display: none;
}

.film-image-card::after {
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.08));
}

.film-card-stack:hover .film-image-card:nth-child(1),
.film-card-stack:focus-within .film-image-card:nth-child(1) {
  --card-x: -96px;
}

.film-card-stack:hover .film-image-card:nth-child(3),
.film-card-stack:focus-within .film-image-card:nth-child(3) {
  --card-x: 96px;
}

.film-frame:not(:first-child) {
  grid-template-columns: minmax(0, 1fr) minmax(210px, .62fr);
  column-gap: clamp(8px, 1.5vw, 24px);
}

.film-frame:not(:first-child) .film-text-block {
  justify-self: end;
  margin-right: clamp(4px, 1vw, 14px);
}

.film-frame:not(:first-child) .film-card-stack {
  justify-self: start;
  margin-left: clamp(4px, 1vw, 14px);
}

.film-frame:not(:first-child):nth-child(even) {
  grid-template-columns: minmax(210px, .62fr) minmax(0, 1fr);
}

.film-frame:not(:first-child):nth-child(even) .film-text-block {
  justify-self: start;
  margin-left: clamp(4px, 1vw, 14px);
  margin-right: 0;
}

.film-frame:not(:first-child):nth-child(even) .film-card-stack {
  justify-self: end;
  margin-right: clamp(4px, 1vw, 14px);
  margin-left: 0;
}

.film-side-image {
  display: none;
}

.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 72px);
  background: rgba(10,9,7,.72);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.image-viewer.visible {
  opacity: 1;
  pointer-events: auto;
}

.image-viewer-media {
  width: min(82vw, 980px);
  height: min(72vh, 680px);
  background-position: center;
  background-size: cover;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 32px 90px rgba(0,0,0,.42);
}

.image-viewer-close {
  position: absolute;
  top: 26px;
  right: 28px;
  padding: 10px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.image-viewer-title {
  position: absolute;
  left: clamp(28px, 5vw, 72px);
  bottom: 26px;
  color: white;
  font-family: 'Lorenza', Georgia, serif;
}

@keyframes cardRise {
  to { opacity: 1; }
}

@media (max-width: 900px) and (orientation: portrait) { .rotate-notice { display: grid; } .experience { display: none; } }
@media (max-width: 1024px) and (orientation: landscape) {
  .intro-logo { width: min(48vw, 430px); }
  .intro-linen { width: 132vw; }
  .intro-linen-top { top: -24vh; left: -15vw; }
  .intro-linen-bottom { right: -16vw; bottom: -42vh; }
  .intro-grass-shadow { inset: -18vh -16vw auto -16vw; width: 132vw; height: 136vh; }
  .intro-stage.is-opening .intro-linen-top { transform: translate3d(0, -190vh, 0) rotate(-3deg) scale(1.04); }
  .intro-stage.is-opening .intro-linen-bottom { transform: translate3d(0, -198vh, 0) rotate(178deg) scale(1.05); }
  .intro-stage.is-opening .intro-grass-shadow { transform: translate3d(-190vw, -3vh, 0) scale(1.08) rotate(-4deg); }
  .intro-stage.is-opening .intro-grass-shadow-mirror { transform: translate3d(190vw, -3vh, 0) scaleX(-1) scale(1.08) rotate(4deg); }

  .collective .story-layer { left: 6vw; bottom: 7vh; max-width: 48vw; }
  .collective .story-layer h1 { font-size: clamp(40px, 8vw, 72px); line-height: .92; }
  .collective .story-layer p { width: min(380px, 100%); margin-top: 10px; font-size: clamp(12px, 1.8vw, 15px); line-height: 1.36; }
  .collective .primary-btn { margin-top: 14px; padding: 10px 14px; font-size: 11px; }
  .sound-toggle { top: 12px; right: 12px; gap: 6px; }
  .sound-toggle button { padding: 8px 11px; font-size: 11px; }

  .film-panel { left: 7vw; right: 7vw; top: .75vh; bottom: .75vh; width: auto; transform: translateY(30px) scale(.97); gap: 6px; }
  .drone.paper-open .film-panel { transform: translateY(0) scale(1); }
  .paper-menu { gap: 8px; min-height: 30px; padding: 0 24px 4px; overflow-x: auto; scrollbar-width: none; justify-content: center; }
  .paper-menu::-webkit-scrollbar { display: none; }
  .paper-menu button { font-size: clamp(12px, 2vw, 15px); padding: 5px 7px 4px; white-space: nowrap; }
  .paper-side-btn { width: 30px; height: 30px; font-size: 24px; background: rgba(255,253,248,.9); }
  .paper-side-left { left: -36px; }
  .paper-side-right { right: -36px; }
  .film-window { padding: 0 0 26vh; border-radius: 2px; }
  .film-frame { min-height: 84vh; padding: 0 30px; margin-bottom: 0; }
  .film-frame:not(:first-child) { min-height: auto; padding: 36px 30px; }
  .paper-video-wrap { width: calc(50% + 30px); height: auto; left: auto; right: 0; opacity: 1; }
  .film-frame:nth-child(2n) .paper-video-wrap,
  .film-frame:nth-child(4n) .paper-video-wrap,
  .film-frame.media-right .paper-video-wrap { left: auto; right: 0; }
  .film-copy { width: 48%; max-width: 48%; margin-left: 0; margin-right: auto; padding-block: 34px; }
  .film-frame:not(:first-child) .film-copy { width: 74%; max-width: 74%; padding-block: 0; }
  .film-frame:not(:first-child):nth-child(even) .film-copy,
  .film-frame:not(:first-child):nth-child(odd) .film-copy { margin-left: 0; margin-right: auto; }
  .film-frame:not(:first-child) .film-copy strong { font-size: 24px; }
  .film-frame:not(:first-child) .film-text { font-size: 12px; line-height: 1.48; }
  .film-frame:nth-child(2n) .film-copy,
  .film-frame:nth-child(4n) .film-copy,
  .film-frame.media-right .film-copy { margin-left: 0; margin-right: auto; }
  .film-frame.no-video { padding-inline: 30px; }
  .film-frame.no-video .film-copy { width: 70%; max-width: 70%; }
  .film-media-row { display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .film-frame.has-gallery .film-media-row { display: flex; gap: 18px; }
  .film-frame.has-gallery .film-copy { width: 100%; max-width: 100%; }
  .film-frame.has-gallery .film-copy > strong,
  .film-frame.has-gallery .film-text { width: 74%; max-width: 74%; align-self: flex-start; }
  .film-frame.has-gallery { padding-bottom: 56px; }
  .film-image { min-height: 92px; }
  .film-frame.has-gallery .film-image { width: 72%; min-height: 112px; transform: none; }
  .film-frame.has-gallery .film-image:nth-child(even) { align-self: flex-end; transform: none; }
  .film-title-row { width: 74%; gap: 10px; }
  .film-title-image { flex-basis: 72px; width: 72px; }
  .film-title-image b { display: none; }
  .film-copy { grid-template-columns: minmax(0, 1fr) 78px; column-gap: 12px; }
  .film-frame:first-child .film-copy { display: flex; }
  .film-frame:not(:first-child):nth-child(even) .film-copy { grid-template-columns: 78px minmax(0, 1fr); }
  .film-frame:not(:first-child),
  .film-frame:not(:first-child):nth-child(even) { grid-template-columns: minmax(0, 1fr) 84px; column-gap: 12px; }
  .film-frame:not(:first-child) .film-copy { display: contents; }
  .film-frame:not(:first-child) .film-text-block { grid-column: 1; justify-self: start; width: 100%; }
  .film-frame:not(:first-child) .film-side-image { grid-column: 2; justify-self: end; width: 84px; }
  .film-frame:not(:first-child):nth-child(even) .film-text-block { grid-column: 2; justify-self: end; }
  .film-frame:not(:first-child):nth-child(even) .film-side-image { grid-column: 1; justify-self: start; }
  .film-frame:not(:first-child),
  .film-frame:not(:first-child):nth-child(even) { grid-template-columns: minmax(0, 1fr) 108px; column-gap: 10px; padding-block: 54px; }
  .film-frame:not(:first-child) .film-text-block { justify-self: end; margin-right: 0; }
  .film-frame:not(:first-child) .film-card-stack { justify-self: start; margin-left: 0; }
  .film-frame:not(:first-child):nth-child(even) .film-text-block { grid-column: 2; justify-self: start; margin-left: 0; }
  .film-frame:not(:first-child):nth-child(even) .film-card-stack { grid-column: 1; justify-self: end; margin-right: 0; }
  .film-frame:not(:first-child):nth-child(odd) .film-text-block { transform: translateX(8px); }
  .film-card-stack { grid-column: 2; width: 108px; min-height: 132px; }
  .film-image-card { width: 68px; height: 120px; }
  .film-card-stack:hover .film-image-card:nth-child(1),
  .film-card-stack:focus-within .film-image-card:nth-child(1) { --card-x: -42px; --card-rotate: -12deg; }
  .film-card-stack:hover .film-image-card:nth-child(3),
  .film-card-stack:focus-within .film-image-card:nth-child(3) { --card-x: 42px; --card-rotate: 12deg; }
  .film-image-card b { display: none; }
  .image-viewer-media { width: 82vw; height: 72vh; }
  .film-side-image b { display: none; }
  .film-frame:not(:first-child):nth-child(even) .film-title-row,
  .film-frame:not(:first-child):nth-child(even) .film-text { align-self: flex-start; }
  .film-frame:not(:first-child) .film-text-block { align-items: flex-start; text-align: left; }
  .map-hotspots .hotspot { height: 42px; gap: 9px; }
  .map-hotspots .hotspot::before { width: 46px; height: 46px; }
  .map-hotspots .hotspot::after { width: 11px; height: 11px; }
  .map-hotspots .hotspot span { width: 42px; height: 42px; flex-basis: 42px; }
  .map-hotspots .hotspot b { font-size: 15px; padding: 8px 10px 7px; }
  .map-hotspots .hotspot span,
  .map-hotspots .hotspot::before,
  .map-hotspots .hotspot::after { display: none; }
  .map-hotspots .hotspot b { padding: 7px 10px 6px; background: transparent; border: 0; font-size: clamp(16px, 3.2vw, 26px); }
  .map-hotspots .hotspot:nth-child(1) { --x: 50%; --y: 57%; }
  .map-hotspots .hotspot:nth-child(2) { --x: 52%; --y: 28%; }
  .map-hotspots .hotspot:nth-child(3) { --x: 78%; --y: 73%; }
  .map-hotspots .hotspot:nth-child(4) { --x: 24%; --y: 42%; }
  .map-hotspots .hotspot:nth-child(5) { --x: 20%; --y: 24%; }
  .room-icon-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 8px; }
  .room-icon-item { grid-template-columns: 16px minmax(0, 1fr); min-height: 22px; padding: 0; font-size: 9px; }
  .room-icon { width: 16px; height: 16px; }
  .room-icon svg { width: 13px; height: 13px; }
  .film-copy strong { font-size: clamp(28px, 4.8vw, 38px); }
  .film-text { font-size: 12px; line-height: 1.46; }
  .detail-panel { grid-template-columns: .9fr 1.1fr; gap: 18px; padding: 24px; }
  .detail-copy h3 { font-size: 38px; }
  .detail-media { min-height: 34vh; }
  .detail-gallery div { min-height: 78px; }
  h2 { font-size: 42px; }
  .data-grid { grid-template-columns: repeat(4, 1fr); }
  .data-grid div { padding: 14px; }
}

@media (max-width: 760px) and (orientation: landscape) {
  .collective .story-layer { max-width: 54vw; }
  .collective .story-layer h1 { font-size: clamp(34px, 7.5vw, 54px); }
  .collective .story-layer p { font-size: 11px; line-height: 1.32; }
  .film-panel { left: 8vw; right: 8vw; }
  .paper-side-left { left: -32px; }
  .paper-side-right { right: -32px; }
  .paper-menu { justify-content: flex-start; }
  .film-frame { padding-inline: 24px; }
  .film-frame:not(:first-child),
  .film-frame:not(:first-child):nth-child(even) { grid-template-columns: minmax(0, 1fr) 92px; column-gap: 8px; }
  .film-card-stack { width: 92px; min-height: 118px; }
  .film-image-card { width: 58px; height: 104px; }
  .map-hotspots .hotspot b { font-size: clamp(14px, 3.4vw, 22px); }
}