/* Shared by all three demos. Colors come from each site's own tokens. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped, html.ia-locked { overflow: hidden; }
body { margin: 0; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 3px; }

/* A video box: poster underneath, the video fades in once it is really playing */
.clip { position: relative; overflow: hidden; display: block; }
.clip > img, .clip > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip > video { opacity: 0; transition: opacity .45s ease; }
.clip.is-live > video { opacity: 1; }

/* Back to the chooser */
.ia-back {
  position: fixed; bottom: 16px; inset-inline-end: 16px; z-index: 70;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; line-height: 1.2;
  background: rgba(10, 10, 10, .72); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .18); transition: background .25s;
}
.ia-back:hover { background: #000; }

.ia-toast {
  position: fixed; bottom: 64px; left: 50%; z-index: 120; transform: translate(-50%, 16px);
  max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 12px; font-size: 15px;
  background: #111; color: #fff; border: 1px solid rgba(255, 255, 255, .18);
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
}
.ia-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Lightbox */
.ia-lb { position: fixed; inset: 0; z-index: 110; background: #000; color: #fff; }
.ia-lb video { width: 100%; height: 100%; object-fit: contain; }
.ia-lb-info { position: absolute; bottom: 24px; inset-inline-start: 24px; display: grid; gap: 2px; text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
.ia-lb-info b { font-size: clamp(20px, 3vw, 32px); font-weight: 700; }
.ia-lb-info small { font-size: 14px; opacity: .8; }
.ia-lb-x, .ia-lb-nav {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 18px;
  background: rgba(255, 255, 255, .12); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s;
}
.ia-lb-x:hover, .ia-lb-nav:hover { background: rgba(255, 255, 255, .28); }
.ia-lb-x { top: 16px; inset-inline-end: 16px; }
.ia-lb-nav { top: 50%; margin-top: -24px; }
.ia-lb-nav.prev { right: 16px; }
.ia-lb-nav.next { left: 16px; }

.demo-note { font-size: 13px; opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
:root {
  --bg: #110d14; --surface: #1d1722; --line: rgba(255, 240, 235, .16); --ink: #f8f1ea; --muted: #a89fa8; --hot: #ff4f6d; --focus: #ff4f6d;
  --display: 'Secular One', 'Assistant', sans-serif; --body: 'Assistant', system-ui, sans-serif;
  --gutter: clamp(16px, 3vw, 40px); --ease: cubic-bezier(.2, .8, .2, 1);
}
body { background: var(--bg); color: var(--ink); font: 400 18px/1.5 var(--body); }
::selection { background: var(--hot); color: var(--bg); }

.top { position: absolute; top: 0; inset-inline: 0; z-index: 10; display: flex; justify-content: flex-end; gap: 24px; padding: 20px var(--gutter); color: #fff; font-weight: 500; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.top a { transition: opacity .2s; }
.top .top-book { margin-inline-end: auto; color: #fff; }
.top a:hover { opacity: .65; }

/* Hero */
.hero { position: relative; height: 100svh; overflow: hidden; background: #000; }
.hero video { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 45%), linear-gradient(to bottom, rgba(0, 0, 0, .35), transparent 20%); pointer-events: none; }
.title { position: absolute; z-index: 2; bottom: clamp(16px, 4vh, 36px); inset-inline: var(--gutter); margin: 0; font: 400 min(19vw, 34svh)/1 var(--display); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.title .wd { display: inline-block; }
.title .ch-w { display: inline-block; overflow: hidden; vertical-align: top; }
.title .ch { display: inline-block; }

/* Moving strip of category names */
.marquee { overflow: hidden; padding-block: clamp(10px, 2vh, 20px); border-bottom: 1px solid var(--line); direction: ltr; }
.marquee-track { display: inline-flex; white-space: nowrap; font: 400 clamp(36px, 5vw, 78px)/1.2 var(--display); will-change: transform; }
.marquee-track span { padding-inline: .3em; direction: rtl; }
.marquee-track span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px var(--ink); }

/* Sticky category bar */
.cats { position: sticky; top: 0; z-index: 30; display: flex; gap: 22px; padding: 14px var(--gutter); background: rgba(17, 13, 20, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.cats::-webkit-scrollbar { display: none; }
.cats a { flex: none; padding-bottom: 2px; color: var(--muted); border-bottom: 2px solid transparent; font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; transition: color .25s, border-color .25s; }
.cats a:hover { color: var(--ink); }
.cats a.on { color: var(--ink); border-bottom-color: var(--hot); }
.cats .cats-book { margin-inline-start: auto; color: var(--hot); font-weight: 600; }

/* Category sections */
.cat { padding: clamp(64px, 12vh, 130px) var(--gutter) 0; scroll-margin-top: 0; }
.cat-name { margin: 0 0 clamp(16px, 3vh, 30px); font: 400 clamp(58px, 10vw, 170px)/1.08 var(--display); letter-spacing: -.02em; overflow: hidden; }
.cat-name span { display: inline-block; }
.mosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(150px, 19vw, 310px); grid-auto-flow: dense; gap: 8px; }
.tile { position: relative; grid-column: span 4; padding: 0; overflow: hidden; display: block; width: 100%; height: 100%; background: var(--surface); }
.tile .clip { position: absolute; inset: 0; }
.tile .clip > img, .tile .clip > video { transition: transform 1.1s var(--ease), opacity .45s ease; }
.tile:hover .clip > img, .tile:hover .clip > video { transform: scale(1.05); }
.tile.large { grid-column: span 8; grid-row: span 2; }
.cat.flip .tile.large { grid-column: 5 / span 8; }
.tile.half { grid-column: span 6; grid-row: span 2; }
.tile.full { grid-column: span 12; grid-row: span 2; }

/* Full-screen moments between categories */
.film { margin-top: clamp(64px, 12vh, 130px); height: 100svh; }
.film > div { height: 100%; will-change: clip-path; background: var(--surface); }

/* Booking */
.book { margin-top: clamp(64px, 12vh, 130px); padding: 0 var(--gutter); scroll-margin-top: 70px; color-scheme: dark; }
.book-title { margin: 0 0 clamp(24px, 5vh, 48px); max-width: 11em; font: 400 clamp(46px, 7.2vw, 122px)/1.08 var(--display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 980px; }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field.full, .kinds, .send, .done { grid-column: 1 / -1; }
.field span, .kinds legend { font-size: 15px; color: var(--muted); }
.field input, .field textarea { width: 100%; min-width: 0; min-height: 52px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 13px 14px; color: var(--ink); font: inherit; font-size: 17px; transition: border-color .2s; }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--hot); }
.field.bad input { border-color: #ff5a4f; }
.kinds { border: 0; margin: 0; padding: 0; min-width: 0; }
.kinds legend { padding: 0; margin-bottom: 8px; }
.kinds.bad legend { color: #ff5a4f; }
#kindList { display: flex; flex-wrap: wrap; gap: 8px; }
#kindList label { position: relative; cursor: pointer; }
#kindList input { position: absolute; opacity: 0; }
#kindList span { display: block; padding: 11px 18px; border: 1px solid var(--line); border-radius: 6px; transition: background .2s, color .2s, border-color .2s; }
#kindList label:hover span { border-color: var(--ink); }
#kindList input:checked + span { background: var(--hot); border-color: var(--hot); color: var(--bg); font-weight: 600; }
#kindList input:focus-visible + span { outline: 2px solid var(--hot); outline-offset: 2px; }
.send { justify-self: start; min-height: 56px; padding: 14px 38px; border-radius: 6px; background: var(--hot); color: var(--bg); font-weight: 600; font-size: 19px; transition: background .2s, transform .25s var(--ease); }
.send:hover { background: var(--ink); transform: translateY(-2px); }
.done { margin: 0; padding: 14px 16px; border-inline-start: 3px solid var(--hot); background: var(--surface); }
.done.bad { border-inline-start-color: #ff5a4f; }
.send:disabled { opacity: .6; cursor: default; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Contact */
.contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(32px, 7vw, 110px); padding: clamp(90px, 18vh, 190px) var(--gutter) clamp(56px, 10vh, 110px); }
.contact a { font: 400 clamp(46px, 8.4vw, 140px)/1.15 var(--display); letter-spacing: -.02em; transition: color .25s, transform .4s var(--ease); }
.contact a:hover { color: var(--hot); transform: translateY(-6px); }

.foot { padding: 0 var(--gutter) 24px; text-align: center; font-size: 15px; color: var(--muted); }
.foot p { margin: 0 0 4px; }
.foot a { color: var(--ink); font-weight: 600; direction: ltr; unicode-bidi: isolate; border-bottom: 1px solid var(--hot); transition: color .2s; }
.foot a:hover { color: var(--hot); }

.wa-float { position: fixed; bottom: 18px; left: 18px; z-index: 40; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; opacity: 0; pointer-events: none; transform: translateY(14px); transition: opacity .3s, transform .3s var(--ease); }
.wa-float.on { opacity: 1; pointer-events: auto; transform: none; }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 27px; height: 27px; fill: currentColor; }

/* Clips play without titles or counters here */
.ia-lb-info { display: none; }

@media (max-width: 760px) {
  .title { font-size: 19.5vw; }
  .cat-name { font-size: 17vw; }
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 31vw; gap: 6px; }
  .tile, .tile.half { grid-column: span 1; grid-row: span 1; }
  .tile.large, .cat.flip .tile.large, .tile.full { grid-column: span 2; grid-row: span 2; }
  .tile:last-child:nth-child(even) { grid-column: span 2; grid-row: span 2; }
  .film { height: 72svh; }
  .book-title { font-size: 13.5vw; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .send { justify-self: stretch; }
}