/* Big Lift Media — palette from the 2024 brand guidelines */
:root {
  --black: #232323;      /* core black — matches the logo animation's background */
  --black-deep: #1a1a1a;
  --cream: #fffcf4;      /* core white */
  --blue: #477aff;       /* brand "teal" */
  --purple: #3f20ff;
  --green: #ccd789;     /* Pantone 12-0435 TCX Daiquiri Green */
  --muted: #9b988f;
  --dim: #6f6c66;
  --line: #3a3936;
  --wrap: 1440px;
  --gutter: clamp(16px, 3vw, 40px);
  --font: 'Inter Tight', 'Roboto', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--green); color: var(--black); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rule { border-top: 1px solid var(--line); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--black) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 14px; padding-bottom: 14px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand img { width: 52px; height: 52px; margin: -6px 0; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.brand:hover img { transform: rotate(-8deg) scale(1.06); }
.brand span { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
/* Links sit on the right, next to the CTA */
.nav { display: flex; gap: 32px; margin-left: auto; margin-right: 20px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.nav a { color: var(--muted); transition: color .2s; }
.nav a:hover, .nav a[aria-current] { color: var(--cream); }
.pill {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  transition: background .25s, color .25s, border-color .25s;
}
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.pill:hover { background: var(--cream); color: var(--black); border-color: var(--cream); }
@media (max-width: 760px) {
  .nav { display: none; }
  .brand span { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: clamp(24px, 4vw, 48px); }
.hero > .wrap { container-type: inline-size; }
.hero-top { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; }
.hero-tag {
  margin: 0; color: var(--green); font-weight: 500;
  font-size: clamp(36px, 5.2vw, 76px); line-height: .98; letter-spacing: -.04em;
}
.hero-intro { max-width: 380px; margin: 28px 0 0; color: #c9c6be; font-size: 17px; }
/* Sized by width *and* height: the rest of the hero needs ~500px, so the photo (4:5) gets what's left
   and the wordmark stays above the fold */
.hero-photo { position: relative; width: clamp(200px, min(26vw, (100svh - 500px) * .8), 360px); }
@media (max-height: 820px) and (min-width: 641px) {
  .hero { padding-top: 16px; }
  .hero-services { margin-top: 20px; }
}
.hero-photo .shot { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 62% center; border-radius: 6px; }
.hero-photo .cloud {
  position: absolute; left: -24%; bottom: -8%; width: 56%; height: auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}
.hero-services {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: clamp(28px, 4vw, 56px); padding: 14px 0;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.hero-word {
  margin: 0; padding: .06em 0 .02em;
  color: var(--blue); font-weight: 600; white-space: nowrap;
  /* Sized to the column, not the window: the word is ~5.01em wide, so 19.8cqi fills the column
     with a sliver to spare at any screen width (the vw value is a fallback for old browsers) */
  font-size: clamp(56px, 18.4vw, 270px); font-size: 19.8cqi; line-height: .82; letter-spacing: -.075em;
  margin-left: -.04em;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hero-word span { display: inline-block; }
.hero-meta {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 0 0 clamp(0px, 24vw, 360px);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 640px) {
  .hero-top { grid-template-columns: 1fr; }
  .hero-photo { width: 72%; justify-self: end; }
  .hero-word { white-space: normal; font-size: 23vw; line-height: .84; }
  .hero-meta { padding-left: 0; }
  .cloud-floor .cloud-eyes { min-width: 96px; }
  .cloud-floor .cloud-eyes:nth-child(n+5) { display: none; }
}

/* ---------- Marquee ---------- */
.marquee { background: var(--green); color: var(--black); overflow: hidden; margin-top: clamp(40px, 6vw, 80px); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee-track span {
  padding: 12px 0; white-space: nowrap; font-weight: 500;
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
}
.marquee-track i { font-style: normal; padding: 0 22px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Section heading ---------- */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 20px; }

/* ---------- Work: film "windows" ---------- */
/* Each card is a window scrolling normally; the still behind it lags (parallax), and the frame
   opens to full width as it reaches the middle of the screen. main.js sets --win and --plx. */
/* Each card sits in a .film-slot, which the scroll-driven parallax below measures against */
.film-stack { --top: 84px; display: flex; flex-direction: column; gap: 28px; }
.film-card {
  position: relative;
  height: calc(100svh - var(--top) - 64px); min-height: 520px; max-height: 900px;
  border-radius: 18px; overflow: hidden; scroll-margin-top: var(--top);
  background: var(--black-deep); isolation: isolate;
  scale: var(--ws, 1); will-change: scale;
}
/* Overscanned 22% top and bottom so the parallax drift (±20% of the card) never shows an edge. */
.film-card-bg {
  position: absolute; left: 0; top: -22%; width: 100%; height: 144%; object-fit: cover; z-index: -2;
  translate: 0 var(--plx, 0px); will-change: translate;
}
/* Where supported, drive the window effects from the scroll itself (runs in step with scrolling,
   so fast flicks can't make it lag or jump). main.js only does this by hand as a fallback.
   Parallax: ±13.5% of the image (≈ ±20% of the card, inside the 22% overscan).
   Framing: the window is slightly smaller as it enters and leaves, full size in the middle. */
@keyframes film-plx { from { translate: 0 -13.5%; } to { translate: 0 13.5%; } }
@keyframes film-win { from { scale: .94; } 32%, 68% { scale: 1; } to { scale: .94; } }
@supports (animation-timeline: view()) {
  .film-slot { view-timeline: --slot block; }
  .film-card-bg { animation: film-plx linear both; animation-timeline: --slot; }
  .film-card { animation: film-win linear both; animation-timeline: --slot; }
}
.film-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(17,17,17,.88), rgba(17,17,17,0) 55%),
    linear-gradient(to bottom, rgba(17,17,17,.55), rgba(17,17,17,0) 30%),
    radial-gradient(ellipse at center, rgba(17,17,17,0) 45%, rgba(17,17,17,.55));
}
.film-card-inner {
  height: 100%; padding: clamp(20px, 3.4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); grid-template-rows: 1fr auto; gap: 24px 48px;
}
.film-card-inner > :first-child { grid-column: 1; grid-row: 1; align-self: start; }
.film-card-title { grid-column: 1; grid-row: 2; }
.film-card-side { grid-column: 2; grid-row: 2; align-self: end; display: flex; flex-direction: column; gap: 18px; }

.laurels { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.laurel { display: inline-flex; align-items: center; gap: 4px; color: var(--cream); }
.laurel img { width: auto; height: 84px; }
.laurel .r { transform: scaleX(-1); }
.laurel p { margin: 0; text-align: center; font-size: 12px; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; }
.laurel b { display: block; font-size: 22px; font-weight: 500; letter-spacing: -.01em; margin-bottom: 2px; }

.film-card-title .eyebrow { margin: 0 0 10px; color: var(--cream); opacity: .8; }
.film-card-title h3 {
  margin: 0; max-width: 11ch; font-weight: 600; text-transform: uppercase;
  font-size: clamp(44px, 7.4vw, 124px); line-height: .88; letter-spacing: -.045em;
}
.film-card-title h3 a { transition: color .25s; }
.film-card-title h3 a:hover { color: var(--green); }
.credits { display: grid; grid-template-columns: auto 1fr; max-width: 440px; margin: 22px 0 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.credits dt, .credits dd { margin: 0; padding: 7px 0; border-top: 1px solid rgba(255,252,244,.4); }
.credits dt { padding-right: 28px; opacity: .7; }
.credits dd:last-of-type, .credits dt:last-of-type { border-bottom: 1px solid rgba(255,252,244,.4); }

.film-card-side p { margin: 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; font-weight: 500; text-transform: uppercase; letter-spacing: -.01em; }
.film-card-side .eyebrow { color: var(--cream); opacity: .7; }
.explore {
  align-self: flex-start; display: inline-flex; align-items: stretch; min-height: 44px;
  border: 1px solid rgba(255,252,244,.7); border-radius: 8px; overflow: hidden;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.explore { padding-left: 18px; gap: 18px; align-items: center; }
.explore span { display: grid; place-items: center; align-self: stretch; width: 44px; border-left: 1px solid rgba(255,252,244,.7); font-size: 16px; transition: background .25s, color .25s; }
.explore:hover span { background: var(--green); color: var(--black); }

@media (max-width: 760px) {
  .film-stack { --top: 76px; gap: 18px; }
  .film-card { min-height: 0; height: calc(100svh - var(--top) - 120px); border-radius: 14px; }
  .film-card-inner { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; gap: 16px; }
  .film-card-title { grid-row: 3; }
  .film-card-side { grid-column: 1; grid-row: 4; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .film-card-side p, .film-card-side .eyebrow { display: none; }
  .credits { margin-top: 14px; }
  .laurel img { width: auto; height: 64px; }
  .laurel b { font-size: 18px; }
}

/* Card text intro — staggered by each element's --d; plays once when the card arrives (main.js adds .in-view) */
.film-card-title h3 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; margin-bottom: -.04em; }
.film-card-title h3 .w > span { display: inline-block; }
.js .film-card [data-a] { opacity: 0; transform: translateY(16px); }
.js .film-card .laurel[data-a] { transform: scale(.85); }
.js .film-card h3 .w > span { transform: translateY(105%); }
.js .film-card [data-a], .js .film-card h3 .w > span {
  transition: opacity .7s ease, transform 1s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(120ms + var(--d, 0) * 70ms);
}
.js .film-card.in-view [data-a], .js .film-card.in-view h3 .w > span { opacity: 1; transform: none; }

/* ---------- Film index (dark pill) ---------- */
.ticket {
  position: fixed; z-index: 40; top: 96px; right: calc(var(--gutter) + 20px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; color: var(--cream);
  opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .35s, transform .35s;
}
.ticket.on { opacity: 1; transform: none; pointer-events: auto; }
.ticket-head, .ticket-list {
  background: rgba(35,35,35,.74); border: 1px solid rgba(255,252,244,.22);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
}
.ticket-head {
  display: flex; align-items: center; gap: 12px; height: 46px; max-width: 380px; padding: 0 7px 0 18px;
  border-radius: 999px; cursor: pointer; color: inherit;
  font: 500 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
  transition: border-color .25s;
}
.ticket-head:hover { border-color: rgba(255,252,244,.5); }
.ticket-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.ticket-no { flex: none; color: var(--muted); }
.ticket-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-chev {
  flex: none; position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,252,244,.22);
}
.ticket-chev::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -5px 0 0 -3px;
  border-right: 1.4px solid; border-bottom: 1.4px solid; transform: rotate(45deg); transition: transform .3s, margin .3s;
}
.ticket.open .ticket-chev::after { transform: rotate(-135deg); margin-top: -1px; }
.ticket-list {
  list-style: none; margin: 0; padding: 4px 18px; width: 340px; border-radius: 16px;
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; visibility: hidden;
  transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s .3s;
}
.ticket.open .ticket-list { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.ticket-list li + li { border-top: 1px solid var(--line); }
.ticket-list a { display: grid; grid-template-columns: 28px 1fr auto; align-items: baseline; gap: 10px; padding: 10px 0; color: var(--dim); transition: color .2s, padding-left .3s cubic-bezier(.2,.8,.2,1); }
.ticket-list a:hover { color: var(--cream); padding-left: 6px; }
.ticket-list .n { font-size: 11px; }
.ticket-list .t { font-size: 15px; letter-spacing: -.01em; }
.ticket-list .p { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.ticket-list a[aria-current] { color: var(--cream); }
.ticket-list a[aria-current] .n { color: var(--green); }
@media (max-width: 760px) {
  .ticket { top: auto; bottom: 14px; left: var(--gutter); right: var(--gutter); flex-direction: column-reverse; align-items: stretch; }
  .ticket-head { max-width: none; }
  .ticket-chev { margin-left: auto; }
  .ticket-chev::after { transform: rotate(-135deg); margin-top: -1px; }
  .ticket.open .ticket-chev::after { transform: rotate(45deg); margin-top: -5px; }
  .ticket-list { width: auto; max-height: 60svh; overflow: auto; transform-origin: bottom center; }
}

/* ---------- Services ---------- */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; }
.service { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line); }
.service h3 { margin: 0; font-weight: 400; font-size: 34px; letter-spacing: -.035em; }
.service p { margin: 0; color: #c9c6be; font-size: 16px; line-height: 1.6; }
.services-wrap { position: relative; }
.services-cloud { position: absolute; right: var(--gutter); top: -96px; width: 140px; height: auto; }
@media (max-width: 760px) { .services-cloud { width: 96px; top: -72px; } }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; border-radius: 6px; filter: grayscale(1) contrast(1.05); }
.about-lede { margin: 0; font-weight: 400; font-size: clamp(30px, 3.3vw, 50px); line-height: 1.1; letter-spacing: -.03em; }
.about-lede em { font-style: normal; color: var(--blue); }
.about-body { margin: 28px 0 0; color: #c9c6be; max-width: 560px; }
.about-body p { margin: 0 0 14px; }
.about .pill { margin-top: 20px; }
.awards { list-style: none; margin: 40px 0 0; padding: 0; }
.awards li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 16px; }
.awards li span:first-child { color: var(--muted); font-size: 13px; letter-spacing: .1em; padding-top: 2px; }
.awards b { font-weight: 500; }
@media (max-width: 820px) { .about { grid-template-columns: 1fr; } .about-photo { max-width: 460px; } }

/* ---------- About Rose page (/rose-corr/) ---------- */
.rose-hero { padding: clamp(32px, 5vw, 72px) 0 clamp(56px, 8vw, 112px); }
.rose-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: end; }
.rose-intro .eyebrow { margin: 0 0 28px; }
.rose-name { margin: 0; }
.rose-name img { width: min(100%, 620px); height: auto; }
.rose-lede { margin: 40px 0 0; max-width: 660px; font-size: clamp(24px, 2.5vw, 36px); line-height: 1.2; letter-spacing: -.025em; }
.rose-portrait { position: relative; margin: 0; }
.rose-portrait > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; border-radius: 6px; filter: grayscale(1) contrast(1.05); }
.rose-portrait .cloud { position: absolute; left: -20%; bottom: -7%; width: 46%; filter: drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
.rose-body, .rose-links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 24px 48px; align-items: start; }
.rose-body > .eyebrow, .rose-links > .eyebrow { margin: 0; padding-top: 6px; }
.rose-copy p { margin: 0 0 24px; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.45; }
.rose-copy p:last-child { margin-bottom: 0; }
.rose-links div { display: flex; flex-wrap: wrap; gap: 12px; }
.credit-list { list-style: none; margin: 0; padding: 0; }
.credit-list li:last-child a { border-bottom: 1px solid var(--line); }
.credit-list a {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 120px; align-items: baseline; gap: 24px;
  padding: 16px 0; border-top: 1px solid var(--line);
  transition: color .25s, padding-left .35s cubic-bezier(.2,.8,.2,1);
}
.credit-list .n { font-size: 12px; color: var(--dim); }
.credit-list .t { font-size: clamp(22px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -.03em; }
.credit-list .r, .credit-list .y { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.credit-list .y { text-align: right; }
.credit-list a:hover { padding-left: 14px; color: var(--green); }
.about-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.about-links .pill { margin-top: 0; }
.pill.ghost::before { background: var(--blue); }
@media (max-width: 820px) {
  .rose-hero-grid, .rose-body, .rose-links { grid-template-columns: 1fr; }
  .rose-portrait { max-width: 460px; justify-self: end; width: 84%; }
  .credit-list a { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; }
  .credit-list .n { display: none; }
  .credit-list .r { grid-column: 1; grid-row: 2; }
  .credit-list .y { grid-row: 1 / span 2; align-self: center; }
}

/* ---------- Collaborators (endless strip) ---------- */
.clients-marquee {
  overflow: hidden; padding: 6px 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Two copies of the list; sliding from -50% to 0 moves it left → right and loops seamlessly */
.clients-track { display: flex; width: max-content; animation: clients-drift calc(var(--n, 9) * 4.5s) linear infinite; }
/* main.js takes over the motion (hover slows it, mouse sweeps and drags push it) and switches the CSS animation off */
.clients-marquee.js-drift { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.clients-marquee.dragging { cursor: grabbing; }
.clients-marquee.js-drift .clients-track { animation: none; will-change: transform; }
@keyframes clients-drift { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.clients { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0 16px 0 0; }
.clients li { display: block; }
.client {
  display: grid; place-items: center; width: clamp(200px, 19vw, 280px); aspect-ratio: 1 / .66; padding: 20px; text-align: center;
  font-weight: 600; font-size: 22px; letter-spacing: -.01em; line-height: 1.1;
  -webkit-user-drag: none;
}
/* Logos are masks filled with the text colour, so every brand sits in the same cream */
.client-logo {
  width: var(--lw, 62%); height: var(--lh, 36%);
  background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}
.client-small { --lw: 48%; --lh: 26%; }
.client-large { --lw: 78%; --lh: 46%; }

/* ---------- Field notes ---------- */
.field { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.field figure { margin: 0; }
.field img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; }
.field figure:nth-child(even) { margin-top: 56px; }
@media (max-width: 760px) { .field { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Logo animation band ---------- */
.reel { display: grid; place-items: center; padding: 24px 0; }
.reel video { width: min(900px, 100%); aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- Cloud eyes (follow the cursor; see main.js) ---------- */
.cloud-eyes { display: block; isolation: isolate; }
.cloud-eyes > img { position: relative; z-index: 1; width: 100%; height: auto; }
.eyeball, .pupil { position: absolute; border-radius: 50%; }
.eyeball { background: #fff; transform: translate(-50%, -50%); }
.pupil {
  aspect-ratio: 1; background: #000;
  transform: translate(calc(-50% + var(--px, 0) * 100%), calc(-50% + var(--py, 0) * 100%));
  transition: transform .18s ease-out;
}

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.site-footer > .wrap { padding-top: clamp(64px, 9vw, 112px); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px; margin-top: 20px; }
.footer-mail { font-size: clamp(30px, 5.4vw, 80px); letter-spacing: -.045em; line-height: 1; transition: color .25s; overflow-wrap: anywhere; }
.footer-mail:hover { color: var(--blue); }
.footer-links { display: flex; gap: 28px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.footer-links a { color: var(--muted); } .footer-links a:hover { color: var(--cream); }
.cloud-floor { position: relative; height: clamp(180px, 22vw, 320px); margin-top: 40px; }
.cloud-floor .cloud-eyes { position: absolute; bottom: -12%; transition: transform .6s cubic-bezier(.3,1.6,.5,1); }
.cloud-floor .cloud-eyes:hover { transform: translateY(-14px) rotate(var(--r, 0deg)) !important; }
.cloud-floor small { position: absolute; right: 0; top: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- Film page ---------- */
.film-hero { position: relative; }
.film-hero img { width: 100%; height: min(78vh, 760px); object-fit: cover; }
.film-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--black) 2%, rgba(35,35,35,.2) 45%, transparent 70%); }
.film-title { position: relative; z-index: 1; margin: -0.62em 0 0; font-weight: 500; font-size: clamp(52px, 9.5vw, 156px); line-height: .88; letter-spacing: -.06em; }
.film-logline { margin: 24px 0 0; max-width: 720px; font-size: clamp(20px, 2vw, 26px); line-height: 1.35; color: #c9c6be; }
.film-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.film-meta div { border-top: 1px solid var(--line); padding-top: 14px; }
.film-meta dt { margin-bottom: 8px; }
.film-meta dd { margin: 0; font-size: 18px; }
.film-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; }
.film-body .copy p { margin: 0 0 18px; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.45; }
.film-awards { list-style: none; margin: 0; padding: 0; }
.film-awards li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.film-awards li::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 9px; border-radius: 50%; background: var(--green); }
.film-awards .none { color: var(--muted); }
.film-awards .none::before { background: var(--line); }
.back { display: inline-flex; gap: 10px; align-items: center; padding: 28px 0 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.back:hover { color: var(--cream); }
.next-film { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--line); }
.next-film .t { display: block; margin-top: 10px; font-size: clamp(36px, 6vw, 96px); line-height: .95; letter-spacing: -.05em; transition: color .25s; }
.next-film:hover .t { color: var(--blue); }
.next-film img { width: clamp(120px, 20vw, 280px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; transition: transform .5s ease; }
.next-film:hover img { transform: rotate(-2deg) scale(1.03); }
@media (max-width: 760px) {
  .film-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .film-body { grid-template-columns: 1fr; }
}

/* ---------- Motion ---------- */
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
.float { animation: float 9s ease-in-out infinite; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.hero-word span { transform: translateY(40%); opacity: 0; animation: rise 1s cubic-bezier(.2,.8,.2,1) forwards; }
.hero-word span:nth-child(2) { animation-delay: .08s; }
.hero-word span:nth-child(3) { animation-delay: .16s; }
@keyframes rise { to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .float, .marquee-track { animation: none; }
  .clients-track { animation: none; }
  .clients-marquee { overflow-x: auto; }
  .clients[aria-hidden] { display: none; }
  .hero-word span { animation: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .film-card, .film-card-bg { animation: none !important; scale: none; }
  .js .film-card [data-a], .js .film-card h3 .w > span { opacity: 1; transform: none; transition: none; }
  .film-card-bg { translate: none; }
  .film-card-bg, .cloud-floor .cloud-eyes, .pupil, .ticket, .ticket-list, .ticket-chev::after { transition: none; }
}