/* pages.css — page-specific styles (twocol pages, category film roll, works grid + modal, project page, 404, legal) */

/* ===== Two-column pages (stories, contact) ===== */
.twocol-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
}
@media (max-width: 991px) {
  .twocol-grid { grid-template-columns: 1fr; }
}
.twocol-grid .media {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.twocol-grid .col-copy {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  padding: 20px;
  background-color: var(--bg-base);
  box-shadow: 0 0 12px 28px #0d0d0d;
}
.twocol-grid .media > img,
.twocol-grid .media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
}
@media (max-width: 575.98px) {
  body.page-contact .contactF { margin: 0px 0px 30px 0px !important; }
}

/* ===== Category pages (commercial / weddings): sticky film roll ===== */
body.page-category #about .about-hd { margin: 20px; }
.panel--roll { isolation: isolate; }
.roll-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
}
@media (max-width: 991px) {
  .roll-grid { grid-template-columns: 1fr; }
}
.roll-viewport { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.roll-track { margin: 0; padding: 0; list-style: none; }
.roll-item { margin-bottom: clamp(16px, 2.5vw, 28px); }
#about.panel--roll .media {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: transparent !important;
  box-shadow: none !important;
}
#about.panel--roll .media > img,
#about.panel--roll .media > video {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  display: block;
}
.roll-grid.cursor-area { position: relative; }
.pin-spacer:has(#about.panel--roll) { z-index: 5; isolation: isolate; }
#about-roll-spacer { width: 100%; }
body.page-category .hero-title { font-size: clamp(2.6rem, 8vw, 6.5rem); }
body.page-category .contactF a,
body.page-work .contactF a { color: #ffffffff !important; }

/* ===== Works grid + modal ===== */
body.page-works .ypad { padding-top: 1rem; padding-bottom: 1rem; }
body.page-works .pt9 { padding-top: 11vh; }
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(12px, 1.8vw, 18px);
  padding: clamp(12px, 3vw, 28px);
}
.work-tile {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #111;
  aspect-ratio: 1/1;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  transform: translateZ(0);
}
.work-tile .tile-media { position: absolute; inset: 0; transition: all ease .8s; }
.work-tile img, .work-tile video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1);
}
.work-tile .tile-poster { filter: grayscale(1); }
.tile-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
}
.tile-play-icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  opacity: 0.7; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; z-index: 2;
}
.work-tile:hover .tile-play-icon { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
.js-lazy-image:not([src]), .js-lazy-poster:not([src]) {
  background: linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.work-tile .tile-meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
  color: #fff; pointer-events: none; z-index: 3;
}
.work-tile .tile-meta .ucat { opacity: .8; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.work-tile .tile-meta .ttl { margin: .2rem 0 0; font-size: clamp(14px, 2vw, 18px); }
.work-tile.is-ghost .tile-media { opacity: 0; }
@keyframes tilePulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.01) } }
.work-tile.is-loading { animation: tilePulse 2s ease-in-out infinite; }
.work-tile.is-loaded { animation: none; }
@media (hover:hover) {
  .work-tile:hover .tile-media { transform: translateY(-2px); transition: transform .2s ease; }
}
.wm.hidden { display: none; }
.wm { position: fixed; inset: 0; z-index: 9990; }
.wm-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0); backdrop-filter: none; }
.wm-stage {
  position: absolute; inset: 0; display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(16px, 3vw, 36px); padding: clamp(16px, 4vw, 48px); align-items: center; pointer-events: none;
}
@media (max-width: 900px) {
  .wm-stage { grid-template-columns: 1fr; align-content: center; }
}
.wm-media {
  position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); z-index: 2; background: #111;
}
.wm-media img, .wm-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wm-info { color: #fff; z-index: 2; pointer-events: auto; }
.wm-type { opacity: .85; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px; }
.wm-title { margin: .2rem 0 .6rem; font-size: clamp(22px, 3.2vw, 34px); }
.wm-desc { opacity: .95; line-height: 1.5; }
.wm-link { display: inline-block; margin-top: .8rem; text-decoration: none; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.wm-close {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 42px; height: 42px; border-radius: 999px; border: none;
  cursor: pointer; background: rgba(255, 255, 255, .08); color: #fff; font-size: 28px; line-height: 42px;
  backdrop-filter: blur(6px) saturate(115%);
}

/* ===== Project detail page ===== */
body.page-work {
  --hero-min-h: 100dvh;
  --overlay-bg: rgba(0, 0, 0, .35);
  --overlay-bg-strong: rgba(0, 0, 0, .55);
  --btn-bg: rgba(24, 24, 24, .55);
  --btn-bg-hover: rgba(24, 24, 24, .85);
  --btn-br: 999px;
  --text-color: #fff;
}
#projectHero { position: relative; min-height: var(--hero-min-h); overflow: hidden; background: #000; }
#projectHero .hero-media { position: absolute; inset: 0; }
.hero-media .mb-controls { display: none !important; }
.media-block { position: relative; width: 100%; height: 100%; overflow: hidden; }
.media-block:hover span.posterTitle { opacity: 1; }
span.posterTitle {
  position: absolute; z-index: 9999; color: white; top: 100%; left: 50%; transform: translate(-50%, -100%);
  text-transform: uppercase; transition: ease all .4s; opacity: 0;
}
.hero-media .mb-img, .hero-media .mb-video { object-fit: cover; }
.mb-img, .mb-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: #080808;
}
.media-block[style] { height: auto; }
.media-block:not(.hero-media) { position: relative; }
.media-block:not(.hero-media)::before { content: ""; display: block; width: 100%; aspect-ratio: var(--ar, 16/9); }
.media-block:not(.hero-media) > .mb-img,
.media-block:not(.hero-media) > .mb-video { position: absolute; inset: 0; }
#projectHero .hero-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; color: var(--text-color); pointer-events: none; min-height: 100dvh;
}
#projectHero .hero-title { font-size: 43px; mix-blend-mode: normal; }
#projectHero .hero-controls {
  position: absolute; left: 50%; bottom: 38%; transform: translateX(-50%); display: flex; gap: 5px;
  pointer-events: auto; padding: 6px 10px; border-radius: 16px;
}
#projectHero .mb-mute { display: none; }
.mb-controls {
  position: absolute; right: 10px; bottom: 10px; display: flex; gap: 8px; background: var(--overlay-bg);
  padding: 6px; border-radius: 14px; backdrop-filter: blur(6px) saturate(115%);
}
.mb-btn {
  display: grid; place-items: center; width: 36px; height: 36px; border: none; border-radius: var(--btn-br);
  background: transparent; color: #fff; cursor: pointer;
}
.mb-btn:hover { background: var(--btn-bg-hover); }
.mb-video-badge {
  position: absolute; left: 10px; bottom: 10px; width: 26px; height: 26px; border-radius: 999px; display: grid;
  place-items: center; background: rgba(0, 0, 0, .28); backdrop-filter: blur(4px) saturate(115%);
  -webkit-backdrop-filter: blur(4px) saturate(115%); color: #fff; z-index: 6; opacity: .38;
  transition: opacity .18s ease, transform .18s ease, background .18s ease; pointer-events: none;
}
.mb-video-badge i { font-size: .95rem; line-height: 1; }
.media-block:hover .mb-video-badge, .media-block:focus-within .mb-video-badge {
  opacity: .85; background: rgba(0, 0, 0, .42); transform: translateY(-1px);
}
.hero-media .mb-video-badge { display: none; }
@media (hover:none) { .mb-video-badge { opacity: .55; } }
.intro-grid { display: grid; gap: clamp(16px, 3vw, 32px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 992px) { .intro-grid { grid-template-columns: 6fr 6fr; } }
.intro-title {
  color: var(--text-color); text-transform: uppercase; font-weight: 800; letter-spacing: .03em;
  font-size: clamp(20px, 3vw, 32px); margin: 0 0 12px 0;
}
.intro-media { margin-top: 8px; }
.intro-copy, .intro-copy p { color: var(--text-color); }
.gallery-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }
body.page-work .notice { mix-blend-mode: normal; }
.mb-play-center {
  position: absolute; inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px;
  border: 0; border-radius: 999px; display: grid; place-items: center; cursor: pointer; background: rgba(0, 0, 0, .28);
  backdrop-filter: blur(4px) saturate(120%); color: #fff; opacity: .85; transition: opacity .2s, transform .2s; pointer-events: auto;
}
.mb-play-center:hover { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
.mb-play-center i { font-size: 22px; line-height: 1; }
#projectHero .hero-title, #projectHero .hero-controls { transition: opacity .25s ease, transform .25s ease; }
#projectHero.is-idle .hero-title, #projectHero.is-idle .hero-controls { opacity: 0; transform: translateY(8px); pointer-events: none; }
.fs-video-abs { filter: none; }
.fs-ghost { background: transparent; }
body.pvfs-lock { overflow: hidden; }

/* ===== 404 ===== */
body.page-404, body.page-404 a, body.page-404 button { cursor: crosshair !important; }
body.page-404 {
  --nf-text: #fff; --nf-muted: rgba(255, 255, 255, .78); --nf-bg: #000; --nf-br: 18px;
  --nf-card-bg: #0f0f0f; --nf-card-bd: rgba(255, 255, 255, .08);
}
.nf-viewport {
  min-height: 100dvh; width: 100%; display: grid; grid-template-rows: auto 1fr auto; align-items: start; justify-items: center;
  gap: clamp(14px, 2.4vw, 26px); padding: clamp(12px, 2vw, 24px);
  background: radial-gradient(60% 60% at 50% 10%, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, .38) 50%, rgba(0, 0, 0, .78) 100%), #000;
}
.nf-frame {
  width: min(980px, 78vw); aspect-ratio: 16/9; margin: 0; border-radius: 16px; overflow: hidden; background: var(--nf-card-bg);
  border: 1px solid var(--nf-card-bd); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 2px 0 rgba(255, 255, 255, .04) inset;
  position: relative; isolation: isolate;
}
@media (max-width: 768px) { .nf-frame { width: min(560px, 92vw); aspect-ratio: 16/9; } }
.nf-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); display: block; }
.nf-content {
  max-width: min(980px, 78vw); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin-inline: auto; padding: clamp(8px, 2vw, 18px);
}
.nf-eyebrow { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--nf-muted); margin-bottom: .2rem; }
.nf-title { font-size: clamp(28px, 4.8vw, 54px); font-weight: 800; letter-spacing: .02em; margin: .2rem 0 .4rem 0; }
.nf-sub { color: var(--nf-muted); font-size: clamp(14px, 2.1vw, 18px); margin: 0 0 1.1rem 0; max-width: 760px; }
.nf-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.nf-btn {
  display: inline-flex; align-items: center; justify-content: center; padding: .74rem 1.05rem; border-radius: 999px; text-decoration: none;
  color: #fff; border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px) saturate(115%); -webkit-backdrop-filter: blur(6px) saturate(115%);
  transition: transform .18s ease, background .18s ease, border-color .18s ease; font-weight: 700; font-size: .94rem;
}
.nf-btn:hover { transform: translateY(-1px); }
.nf-btn-ghost { background: rgba(0, 0, 0, .35); }
.nf-btn-ghost:hover { background: rgba(0, 0, 0, .55); border-color: rgba(255, 255, 255, .28); }
.nf-btn-solid { background: rgba(255, 255, 255, .12); }
.nf-btn-solid:hover { background: rgba(255, 255, 255, .2); }
.nf-hint { margin-top: 1rem; font-size: .82rem; color: var(--nf-muted); }
.nf-made { font-size: .8rem; color: var(--nf-muted); padding-bottom: 6px; }

/* ===== Legal / text pages ===== */
.legal-page { padding-top: 120px; padding-bottom: 60px; }
.legal-page h3 { font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.legal-page h4.Subtitle { font-size: 1.1rem; font-weight: 700; margin-top: 1.6rem; }
.legal-page p { color: #d8d8d8; max-width: 80ch; }

/* ===== Fixes 17.09. (Bug-Report) ===== */
/* 1: photo cloud — quote never blocks the canvas; on small screens it sits above the cloud */
.absPar { pointer-events: none; }
.absPar a, .absPar button { pointer-events: auto; }
@media (max-width: 991.98px) {
  .absPar { position: static; max-width: none; margin: 60px 0 10px; padding: 0; mix-blend-mode: normal; }
  .absPar p { font-size: 15px; line-height: 1.4; }
  #imageCloud { height: 72dvh !important; }
}
/* 3: category heroes on phones — solid scrim, no difference blend on the title */
@media (max-width: 767.98px) {
  body.page-category .hero-title, body.page-category .hero-blurb, body.page-home .hero-title, body.page-home .hero-blurb { mix-blend-mode: normal; }
  body.page-category .hero-scrim, body.page-home .hero-scrim { background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.8) 100%); }
  body.page-category #hero .excl, body.page-home #hero .excl { mix-blend-mode: normal; }
}
/* 12: footer photo on phones — darker overlay */
@media (max-width: 575.98px) {
  body.page-home .bfooter .overlay, .dcross .overlay { background-color: #000000a6; }
}
/* 13: category film roll on phones — plain stacked photos, no sticky viewport */
@media (max-width: 991.98px) {
  .roll-viewport { position: static !important; height: auto !important; overflow: visible !important; }
  #about-roll-spacer { display: none; }
}
/* 14: pages without hero must clear the fixed mobile header */
@media (max-width: 991.98px) {
  body.page-works .pt9 { padding-top: 96px !important; }
  body.page-404 .nf-viewport { padding-top: 96px; }
  body.page-legal .legal-page { padding-top: 96px; }
}
/* 16: two-column pages on phones — no shadow eating the media */
@media (max-width: 991.98px) {
  .twocol-grid .col-copy { box-shadow: none; }
}
/* 21: stories title arrow stays on the line */
.mtitle sup.ttl-arrow { white-space: nowrap; margin-left: .25em; }
/* 22: 9:16 intro reels on desktop keep reel width */
@media (min-width: 992px) {
  .intro-media[style*="9/16"], .grid-media[style*="9/16"] { max-width: 440px; }
}
/* 25: keyboard focus visible again */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px; opacity: 1 !important; }
/* 31: language switch legible */
#desktopTopbar .lang-switch { font-size: .76rem; }
#desktopTopbar .lang-switch a { opacity: .6; padding: 2px 1px; }
/* 37: hero cue never overlaps the title on short viewports */
@media (max-height: 640px) { .scroll-cue { display: none; } }
/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pre-tile.is-pulsing { animation: none; }
  .scroll-cue.icon-only { animation: none; opacity: 1; }
}