/* Sala46 Films LAB: white ground, editorial (base since 2026-09-25; the dark "screening room" is frozen in lab-dark.css).
   Images are never covered by text or filters. --white keeps its old role, "strongest ink", so it is black here. */
@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url(/assets/fonts/roboto-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url(/assets/fonts/roboto-400-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap; src: url(/assets/fonts/roboto-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap; src: url(/assets/fonts/roboto-700-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Barlow"; font-weight: 300; font-display: swap; src: url(/assets/fonts/barlow-300.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Barlow"; font-weight: 300; font-display: swap; src: url(/assets/fonts/barlow-300-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(/assets/fonts/barlow-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(/assets/fonts/barlow-500-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }

:root {
  --bg: #fff;
  --panel: #f4f4f4;
  --line: #dcdcdc;
  --pill-line: #c6c6c6;   /* outline of pill-shaped fields and buttons */
  --text: #111;
  --muted: #6e6e6e;
  --white: #000;          /* strongest ink */
  --gap: 4px;
  --pad: clamp(16px, 3.6vw, 56px);
  --hd: 68px;
  --h1: clamp(24px, 2.6vw, 38px);   /* one page-title size for every page */
  --head: "Roboto", Arial, sans-serif;
  --body: "Barlow", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hd) + 12px); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-weight: 300; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; line-height: 1.15; }
p { margin: 0 0 1em; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; background: #fff; color: #000; padding: 8px 12px; z-index: 200; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.wrap { max-width: 1480px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.k { font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.k a { text-decoration: none; } .k a:hover { color: var(--white); }
.sec { padding-top: clamp(80px, 10vw, 150px); }
.sh { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.sh .k { grid-column: 1 / -1; }
.sh h2 { font-size: clamp(20px, 2vw, 30px); }
.more { font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.more:hover { text-decoration: underline; text-underline-offset: 5px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.cap { font-family: var(--head); font-weight: 700; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin: 12px 0 0; }

/* ---------- pills */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 22px; border: 1.5px solid var(--white); border-radius: 999px; background: transparent;
  font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.pill:hover, .pill-solid { background: var(--white); color: #fff; }
.pill-solid:hover { background: transparent; color: var(--white); }
.pill-ghost { border-color: var(--pill-line); }
.pill-ghost:hover { border-color: var(--white); background: transparent; color: var(--white); }
.link { background: none; border: 0; padding: 0; font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; color: var(--muted); }
.link:hover { color: var(--white); }
.x { background: none; border: 0; font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; color: var(--muted); padding: 8px; }
.x:hover { color: var(--white); }

/* request toggle, shared look */
.add { cursor: pointer; }
.add-i { width: 14px; height: 14px; position: relative; display: inline-block; flex-shrink: 0; }
.add-i::before, .add-i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .2s; }
.add-i::after { transform: translate(-50%, -50%) rotate(90deg); }
.add[aria-pressed="true"] .add-i::before { width: 6px; transform: translate(-95%, 0) rotate(45deg); }
.add[aria-pressed="true"] .add-i::after { width: 11px; transform: translate(-30%, -50%) rotate(-50deg); }
.add-pill { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border: 1.5px solid var(--white); border-radius: 999px; background: var(--white); color: #fff;
  font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.add-pill[aria-pressed="true"] { background: transparent; color: var(--white); }
.add-card { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; border: 0;
  background: #fff; color: #000; font-family: var(--head); font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; }
.add-card .add-i { width: 10px; height: 10px; } .add-card .add-i::before, .add-card .add-i::after { width: 9px; }
.card:hover .add-card, .add-card:focus-visible, .add-card[aria-pressed="true"] { opacity: 1; transform: none; }
.add-card[aria-pressed="true"] { background: #000; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.add-card[aria-pressed="true"] .add-l::after { content: "ed"; }
@media (hover: none) { .add-card { opacity: 1; transform: none; } }

/* ---------- header */
.hd { position: sticky; top: 0; z-index: 60; height: var(--hd); display: flex; align-items: center; gap: 28px; padding: 0 var(--pad); background: rgba(255,255,255,.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.hd-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; }
.hd-brand img { width: 84px; }
.hd-nav { display: flex; align-items: center; flex: 1; }
.hd-nav > ul:first-child { margin: 0 auto; }
.hd-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(16px, 2vw, 32px); align-items: center; }
.hd-nav a { font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: #000; transition: color .2s; }
.hd-nav a:hover, .hd-nav a[aria-current] { color: var(--muted); }   /* black links, grey on hover and on the current page */
.hd-icons { margin-left: 28px !important; gap: 14px !important; }
.hd-icons img { height: 18px; width: auto; } .hd-icons a:hover img { opacity: .55; }
.hd-search { position: relative; width: clamp(160px, 18vw, 260px); }
.hd-search input { width: 100%; height: 38px; border: 1px solid var(--pill-line); border-radius: 999px; background: var(--panel); padding: 0 40px 0 16px; font-family: var(--body); font-weight: 500; font-size: 14px; outline: none; }
.hd-search input:focus { border-color: var(--white); }
.hd-search input::placeholder { color: var(--muted); }
.hd-search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--head); font-size: 11px; color: var(--muted); border: 1px solid var(--pill-line); border-radius: 4px; padding: 1px 6px; }
.hd-req { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--white); background: none; cursor: pointer;
  font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.hd-req:hover { background: var(--white); color: #fff; }
.hd-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: var(--white); color: #fff; font-size: 11px; padding: 0 6px; }
.hd-req:hover .hd-count { background: #fff; color: #000; }
.hd-count[hidden] { display: none; }
.hd-menu { display: none; background: none; border: 0; width: 40px; height: 40px; position: relative; cursor: pointer; }
.hd-menu span:not(.sr) { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--white); transition: transform .25s, top .25s; }
.hd-menu span:nth-child(1) { top: 16px; } .hd-menu span:nth-child(2) { top: 24px; }
.hd-menu[aria-expanded="true"] span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.hd-menu[aria-expanded="true"] span:nth-child(2) { top: 20px; transform: rotate(-45deg); }

/* ---------- footer */
.ft { border-top: 1px solid var(--line); margin-top: clamp(100px, 12vw, 180px); padding: 48px var(--pad) 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.ft-brand { display: block; align-self: center; }
.ft-brand img { width: 84px; }   /* same size as the header logo */
.home .ft { margin-top: 0; }
.home .cta + .light { margin-top: 0; }
.cta { background: var(--bg); color: var(--text); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; padding: clamp(72px, 9vw, 130px) var(--pad); }
.cta .k { color: var(--muted); }
.cta h2 { max-width: 860px; margin: 0 auto 20px; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: .14em; line-height: 1.3; }
.cta p:not(.k):not(.row) { max-width: 620px; margin: 0 auto 36px; font-size: 17px; color: #2b2b2b; }
.cta .row { justify-content: center; }
/* licensing | programming: two answers under the same question */
.cta-cols { display: grid; grid-template-columns: 1fr 1fr; max-width: 1000px; margin: 40px auto 0; }
.cta-cols > div { display: flex; flex-direction: column; align-items: center; padding: 0 clamp(24px, 4vw, 56px); }
.cta-cols > div + div { border-left: 1px solid var(--line); }
.cta-cols h3 { font-size: 15px; letter-spacing: .18em; margin-bottom: 14px; }
.cta .cta-cols p:not(.k):not(.row) { margin: 0 auto 28px; font-size: 16px; text-align: justify; hyphens: auto; }
.cta-cols .row { margin-top: auto; }
@media (max-width: 640px) {
  .cta-cols { grid-template-columns: 1fr; gap: 36px; }
  .cta-cols > div + div { border-left: 0; border-top: 1px solid var(--line); padding-top: 36px; }
}
/* company subtitle next to the logo, header and footer: 15% smaller than before, same 13 px line spacing */
.tagline { display: block; margin: 0; line-height: 13px; font-family: var(--head); font-weight: 700; font-size: 7.7px; letter-spacing: .22em; text-transform: uppercase; color: var(--white); white-space: nowrap; }
.ft-line { margin-left: -26px; }   /* sits close to the logo */
.ft-nav { display: flex; gap: 24px; flex-wrap: wrap; }
.ft-nav a, .ft-legal a { text-decoration: none; font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ft-legal a:hover { text-decoration: underline; }
/* footer menu mirrors the header one: grey, white on hover */
.ft-nav a { color: var(--muted); transition: color .2s; }
.ft-nav a:hover { color: var(--white); }
.ft-legal { flex: 1; justify-content: center; margin: 0; display: flex; flex-wrap: wrap; align-items: center; color: var(--muted);
  font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ft-sep { font-size: 20px; line-height: 0; margin: 0 14px; position: relative; top: -1px; }

/* ---------- home: frame sequence */
/* 16:9 box = the stills' own ratio, so nobody is cropped; if the window is shorter, only the bottom is trimmed (top anchored) */
.show { position: relative; height: min(calc(100vh - var(--hd)), 56.25vw); background: #000; overflow: hidden; }
.sl { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s ease; }
.sl.on { opacity: 1; }
.sl img { width: 100%; height: 100%; object-fit: cover; object-position: center var(--fy, top); }
/* film caption on home stills: same type as the catalogue cards (white, no box, no shadow) */
.still-cap { position: absolute; z-index: 2; right: var(--pad); bottom: 40px; margin: 0; text-align: right; color: #fff; font-family: var(--head); font-weight: 700; text-transform: uppercase; }
.still-cap .card-t { font-size: clamp(14px, 1.2vw, 18px); text-decoration: none; }
.still-cap a.card-t:hover { text-decoration: underline; text-underline-offset: 4px; }
/* projector effect over the frame sequence (settings approved in the demo: grain .275, weave 50%) */
.show-frames { position: absolute; inset: -4px; will-change: transform; }
.film-grain { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; mix-blend-mode: overlay; opacity: .19; pointer-events: none; image-rendering: pixelated; }
.film-flicker { position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0; pointer-events: none; }
.film-fx { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.film-fx .scratch { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.55); }
.film-fx .dust { position: absolute; border-radius: 50%; background: rgba(255,255,255,.7); }
.show-dots { z-index: 2; }
.show-dots { position: absolute; right: var(--pad); bottom: 36px; display: flex; gap: 8px; }
.show-dots button { width: 28px; height: 3px; padding: 0; border: 0; background: rgba(255,255,255,.35); cursor: pointer; }
.show-dots button[aria-current] { background: #fff; }
.intro { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px 80px; align-items: start; padding-top: clamp(56px, 7vw, 100px); }
.intro h1 { font-size: clamp(18px, 1.7vw, 26px); letter-spacing: .16em; margin-bottom: 22px; }
.intro p { font-size: 18px; color: #2b2b2b; }
.big-search { display: flex; gap: 10px; margin: 0 0 36px; }
.big-search input { flex: 1; min-width: 0; height: 52px; border: 1px solid var(--pill-line); border-radius: 999px; background: var(--panel); padding: 0 22px; font-weight: 500; font-size: 16px; outline: none; }
.big-search input:focus { border-color: var(--white); }
.big-search .pill { height: 52px; }

/* intro on the frame sequence: solid panel, no veil over the still */
.show-intro { position: absolute; z-index: 2; left: var(--pad); top: 50%; transform: translateY(-50%); width: min(560px, calc(100% - 2 * var(--pad)));
  background: #fff; padding: clamp(24px, 2.6vw, 40px); }
.show-intro h1 { font-size: clamp(17px, 1.5vw, 23px); letter-spacing: .18em; margin-bottom: 18px; }
.show-intro p { margin: 0; font-size: 16px; line-height: 1.6; color: #2b2b2b; text-align: justify; }
.show-intro strong { color: #000; font-weight: 500; }
.show-caps { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.show-caps .still-cap { bottom: 64px; opacity: 0; transition: opacity 1.4s ease; }
.show-caps .still-cap.on { opacity: 1; pointer-events: auto; }

/* finder under the sequence, full width */
.finder { padding-top: clamp(44px, 5vw, 72px); }
.finder .big-search { margin-bottom: 40px; }
.finder-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: start; }
.finder .tl-legend { margin-bottom: 0; }
/* rule between the search block and Collections, centred in the gap (same grey as the Collections page) */
.home .finder + .sec { padding-top: clamp(40px, 5vw, 75px); }
.home .finder + .sec::before { content: ""; display: block; border-top: 1px solid #c6c6c6; margin-bottom: clamp(40px, 5vw, 75px); }

/* finder: timeline by decade + genres */
.finder .k { margin-top: 4px; }
.finder .chips { margin-top: 0; }
.tl { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-bottom: 12px; }
.tl-seg { display: flex; flex-direction: column; text-decoration: none; }
.tl-bar { height: 18px; background: var(--c); box-shadow: inset 0 0 0 1px var(--muted); transition: height .2s, transform .2s; transform-origin: bottom; }
.tl-y { font-family: var(--head); font-weight: 700; font-size: 13px; letter-spacing: .06em; margin-top: 10px; }
.tl-n { font-size: 12px; color: var(--muted); }
.tl-seg:hover .tl-bar, .tl-seg:focus-visible .tl-bar { transform: scaleY(1.6); }
.tl-seg:hover .tl-y { text-decoration: underline; text-underline-offset: 4px; }
.tl-legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 32px; }
.tl-key { width: 22px; height: 8px; background: var(--c); box-shadow: inset 0 0 0 1px var(--muted); display: inline-block; }   /* outline: the busiest decade is white */
.tl-key + .tl-key, .tl-legend .tl-key:nth-of-type(2) { margin-left: 14px; }

/* programmes on the home: illustration, name, description */
.progs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.prog { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 26px 26px; background: transparent; text-decoration: none; }
.prog-frame { display: block; width: 100%; max-width: 230px; margin-bottom: 26px; }
.prog-frame img { width: 100%; height: auto; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.prog:hover .prog-frame img, .prog:focus-visible .prog-frame img { transform: scale(1.06); }
.prog h3 { font-size: clamp(16px, 1.3vw, 19px); margin-bottom: 12px; }
.prog p { font-size: 15px; color: #2b2b2b; margin-bottom: 22px; text-align: justify; hyphens: auto; }
.prog .more { margin-top: auto; }
.prog h3, .prog p, .prog .more { transition: color .25s; }
.prog:hover :is(h3, p, .more), .prog:focus-visible :is(h3, p, .more) { color: var(--muted); }

/* collections as film-strip spreads */
.coll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding: clamp(28px, 3vw, 40px) 0; border-top: 1px solid var(--line); }
.coll-rev .coll-img { order: 2; }
.coll-img { display: block; overflow: hidden; background: #000; }
.coll-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.coll-ill { width: 200px; height: auto; margin: 6px 0 22px; }
.coll h3 { font-size: clamp(20px, 2vw, 28px); margin-bottom: 14px; }
.coll h3 a { text-decoration: none; }
/* same hover as the home programmes: the negative grows, the text turns grey */
.coll-ill { transition: transform .6s cubic-bezier(.2,.7,.2,1); transform-origin: left center; }
.coll h3, .coll p:not(.row) { transition: color .25s; }
.coll:hover .coll-ill { transform: scale(1.06); }
.coll:hover :is(h3, h3 a, p:not(.row)) { color: var(--muted); }

.coll p:not(.k):not(.row) { color: #2b2b2b; text-align: justify; hyphens: auto; }
.coll-list { list-style: none; margin: 20px 0 26px; padding: 0; columns: 2; column-gap: 24px; }
.coll-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); break-inside: avoid; font-size: 14px; }
.coll-list a { text-decoration: none; font-weight: 500; } .coll-list a:hover { text-decoration: underline; }
.coll-list span { color: var(--muted); font-size: 12px; }

.decs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--gap); }
.dec { position: relative; display: block; text-decoration: none; }
.dec img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.dec-y { display: block; font-family: var(--head); font-weight: 700; font-size: clamp(18px, 1.8vw, 26px); letter-spacing: .06em; padding: 12px 0 0; order: 2; }
.dec { display: flex; flex-direction: column-reverse; }
.dec:hover .dec-y { text-decoration: underline; text-underline-offset: 5px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chip { height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--pill-line); border-radius: 999px; font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.chip:hover { border-color: var(--white); }

.feat { position: relative; margin-top: clamp(64px, 8vw, 120px); background: #000; }
.feat > img { width: 100%; height: clamp(460px, 62vw, 860px); object-fit: cover; }
.feat-panel { position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%); width: min(520px, calc(100% - 2 * var(--pad))); background: #fff; padding: clamp(24px, 2.6vw, 40px); }
.feat-panel h2 { font-size: clamp(18px, 1.7vw, 25px); margin-bottom: 16px; }
.feat-panel p:not(.k) { margin: 0; font-size: 16px; line-height: 1.6; color: #2b2b2b; text-align: justify; }

.light { background: #fff; color: #111; margin-top: clamp(80px, 10vw, 150px); padding: clamp(60px, 7vw, 100px) 0; }
.light .k { color: #666; }
.light-row { padding: clamp(32px, 3.5vw, 48px) 0; }
.trust { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px 40px; }
.trust .k { margin: 0; white-space: nowrap; }
.logos-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px clamp(12px, 2vw, 32px); align-items: center; }
.logos-row img { width: 100%; max-width: 96px; margin: 0 auto; aspect-ratio: 1; object-fit: contain; }
.light .more { color: #111; }
.light .more:hover { color: #666; text-decoration: none; }
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.logos li { display: grid; place-items: center; padding: clamp(10px, 2vw, 26px); }
.logos img { width: 100%; max-width: 150px; aspect-ratio: 1; object-fit: contain; }

/* ---------- cards & grids: title, director and year inside the still (no shadow, no veil) */
.grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: calc(var(--gap) * 2); }   /* 8 px: catalogue, collections, related films */
.card { position: relative; }
.card a { display: block; position: relative; text-decoration: none; background: #000; }
.card-img { display: block; overflow: hidden; }
.card-img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.card-txt { position: absolute; left: 8%; right: 8%; bottom: 8%; color: #fff; font-family: var(--head); font-weight: 700; text-transform: uppercase;
  pointer-events: none; }
.card-t { display: block; font-size: clamp(13px, 1.15vw, 17px); letter-spacing: .05em; line-height: 1.2; }
.card-m { display: block; margin-top: 6px; font-size: clamp(10px, .75vw, 11px); letter-spacing: .14em; }
.card-img img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.card a:hover .card-img img, .card a:focus-visible .card-img img { transform: scale(1.05); }
.card mark { background: #fff; color: #000; }

/* ---------- page heads & covers */
.ph { padding-top: clamp(56px, 7vw, 100px); padding-bottom: clamp(32px, 4vw, 56px); max-width: 1480px; }
.ph h1 { font-size: var(--h1); letter-spacing: .12em; margin-bottom: 20px; }
.ph p:not(.k) { max-width: 760px; font-size: 18px; color: #2b2b2b; text-align: justify; hyphens: auto; }
.ph .big { font-family: var(--head); font-weight: 400; font-size: clamp(18px, 1.8vw, 26px); line-height: 1.4; text-transform: uppercase; letter-spacing: .04em; color: var(--text); max-width: 1000px; }
.ph-tight { padding-top: clamp(28px, 3vw, 44px); padding-bottom: clamp(20px, 2.4vw, 32px); }
.collpage .ft { margin-top: clamp(40px, 5vw, 64px); }
.collpage .coll:last-child { padding-bottom: 0; }
/* two groups on the Collections page: the 2027 programmes, then the permanent collections */
.coll-group + .coll-group { padding-top: clamp(64px, 8vw, 120px); }
.coll-group .sh { margin-bottom: clamp(16px, 2vw, 28px); }
.collpage .coll { border-top-color: #c6c6c6; }   /* divider between collections */
/* Collections page: nothing moves or greys on hover; you enter through "Open collection" or the large still */
.collpage .coll:hover .coll-ill { transform: none; }
.collpage .coll:hover :is(h3, h3 a) { color: var(--text); }
.collpage .coll:hover p:not(.k):not(.row) { color: #2b2b2b; }
.collpage .coll:hover p.k { color: var(--muted); }
.collpage .coll h3 a { pointer-events: none; cursor: default; }
.ph-coll { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 20px 60px; align-items: center; }
.ph-ill { width: 100%; max-width: 340px; }
.cover { background: #000; }
.cover > img { width: 100%; height: clamp(340px, 58vh, 680px); object-fit: cover; }
.cover .cap { padding-top: 0; }
.others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.other { display: flex; align-items: center; gap: 20px; padding: 24px; background: var(--panel); text-decoration: none; font-family: var(--head); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.other img { width: 110px; height: auto; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.other { transition: color .25s; }
.other:hover { color: var(--muted); }
.other:hover img { transform: scale(1.06); }

/* ---------- catalogue: toolbar on top */
.cat-top { padding-top: clamp(28px, 3vw, 44px); }
.cat-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 20px; }
.cat-head h1 { font-size: var(--h1); letter-spacing: .12em; }
.cat-n { margin: 0; font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.cat-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.cat-q { flex: 1; min-width: 240px; height: 46px; border: 1px solid var(--pill-line); border-radius: 999px; background: var(--panel); padding: 0 20px; font-weight: 500; font-size: 15px; outline: none; }
.cat-q:focus { border-color: var(--white); }
.cat select { height: 46px; border: 1px solid var(--pill-line); border-radius: 999px; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center;
  appearance: none; -webkit-appearance: none; padding: 0 40px 0 18px; font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.cat select:focus { outline: none; border-color: var(--white); }
.cat-row-2 { justify-content: space-between; margin-top: 16px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.tab { background: none; border: 0; padding: 6px 0; font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.tab:hover { color: var(--white); }
.tab[aria-pressed="true"] { color: var(--white); border-color: var(--white); }
.cat-ctrl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cat-ctrl select { height: 34px; }
.seg { display: flex; border: 1px solid var(--pill-line); border-radius: 999px; overflow: hidden; }
.seg[hidden] { display: none; }
.seg button { min-width: 36px; height: 32px; padding: 0 12px; border: 0; background: none; font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--white); color: #fff; }
.cat-main { padding-top: 24px; }
.none { padding: 80px 0; font-size: 18px; }
.cat .grid { --cols: 4; }
.cat[data-size="s"] .grid { --cols: 6; }
.cat[data-size="l"] .grid { --cols: 3; }
.list { width: 100%; border-collapse: collapse; }
.list th { text-align: left; font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); padding: 0 12px 10px 0; border-bottom: 1px solid var(--white); }
.list td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 15px; color: #2b2b2b; }
.list td.l-img { width: 72px; } .list td.l-img img { width: 56px; height: 56px; object-fit: cover; }
.list td.l-t a { font-family: var(--head); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--white); }
.list td.l-t a:hover { text-decoration: underline; }
.list td.l-t small { display: block; font-size: 13px; color: var(--muted); }
.list td.l-add { width: 120px; text-align: right; padding-right: 0; }
.list .add-card { position: static; opacity: 1; transform: none; }
.list mark { background: #000; color: #fff; }

/* ---------- quick view */
.qv { position: fixed; inset: 0; z-index: 120; background: rgba(255,255,255,.96); display: grid; place-items: center; padding: 24px; }
.qv[hidden] { display: none; }
.qv-in { position: relative; width: min(1180px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--panel); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.qv-img { background: #000; display: grid; place-items: center; min-height: 100%; }
.qv-img img { width: 100%; height: 100%; max-height: 80vh; object-fit: contain; }
.qv-body { padding: clamp(28px, 3vw, 48px); display: flex; flex-direction: column; }
.qv-body h2 { font-size: clamp(22px, 2.2vw, 32px); margin-bottom: 8px; }
.qv-o { color: var(--muted); margin: 0 0 4px; }
.qv-m { font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px; }
.qv-s { color: #cfcfcf; font-size: 16px; text-align: justify; hyphens: auto; }
.qv-act { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 16px; }
.qv-nav { display: flex; justify-content: space-between; margin: 24px 0 0; }
.qv-x { position: absolute; top: 10px; right: 12px; z-index: 2; }
/* the quick view is a black card, so the black bands of letterboxed stills melt into it: dark palette inside */
.qv-in { --panel: #000; --line: #2a2a2a; --pill-line: #474747; --text: #ededed; --muted: #8d8d8d; --white: #fff; background: #000; color: var(--text); }
.qv-in .pill { color: var(--white); }
.qv-in .pill:hover, .qv-in .add-pill { color: #000; }
.qv-in .add-pill[aria-pressed="true"] { color: var(--white); }
.qv-in .qv-x { background: #000; border-radius: 999px; }

/* ---------- drawer */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 110; width: min(440px, 100%); background: var(--panel); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .3s ease; }
.drawer.open { transform: none; }
.drawer[hidden] { display: block; visibility: hidden; }
.drawer.open[hidden] { visibility: visible; }
.drawer-in { height: 100%; display: flex; flex-direction: column; padding: 22px 26px; }
.drawer-hd { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.drawer-hd .k { margin: 0; color: var(--white); }
.drawer-list { list-style: none; margin: 0; padding: 0; flex: 1; overflow: auto; }
.drawer-list li { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.drawer-list img { width: 56px; height: 56px; object-fit: cover; }
.drawer-list b { display: block; font-family: var(--head); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.25; }
.drawer-list a { text-decoration: none; } .drawer-list a:hover b { text-decoration: underline; }
.drawer-list small { color: var(--muted); font-size: 13px; }
.drawer-empty { color: var(--muted); padding: 20px 0; flex: 1; }
.drawer-ft { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.scrim { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.25); }
.scrim[hidden] { display: none; }

/* ---------- film page */
.cover-film > img { height: clamp(360px, 70vh, 820px); }
.film-hd { padding: clamp(28px, 3vw, 44px) 0 clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.film-hd h1 { font-size: clamp(30px, 5vw, 76px); letter-spacing: .08em; line-height: 1.05; }
.film-o { font-size: clamp(18px, 1.6vw, 24px); color: var(--muted); margin: 12px 0 0; }
.film-m { font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; margin: 22px 0 0; }
.film-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); padding-top: clamp(36px, 4vw, 60px); }
.film-side { position: sticky; top: calc(var(--hd) + 24px); align-self: start; }
.film-poster { display: block; cursor: zoom-in; }
.film-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 14px; }
.film-note { font-size: 13px; color: var(--muted); }
.film-main section { margin-bottom: 52px; }
.film-main p:not(.k) { color: #2b2b2b; }
/* synopsis and critique: same size (midway between the old 23 px lead and 17 px body), justified */
.film-main section:nth-child(-n+2) p:not(.k) { color: #000; font-size: 20px; line-height: 1.55; text-align: justify; hyphens: auto; }
.lead { font-weight: 300; }
.spec { margin: 0; }
.spec div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.spec dd { margin: 0; font-weight: 500; }
.offer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
.offer ul { list-style: none; margin: 0; padding: 0; }
.offer li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500; }
.gal { padding-top: clamp(40px, 5vw, 72px); }
.gal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.gal-grid a { display: block; background: #000; cursor: zoom-in; }
.gal-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pn { display: flex; justify-content: space-between; gap: 20px; margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.pn a { text-decoration: none; } .pn a:hover { text-decoration: underline; }

.lightbox { position: fixed; inset: 0; z-index: 130; background: #000; display: flex; align-items: center; justify-content: center; padding: 56px 64px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; font-family: var(--head); font-weight: 700; }
.lb-close { top: 16px; right: 20px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 8px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 48px; padding: 16px; line-height: 1; }
.lb-prev { left: 4px; } .lb-next { right: 4px; }

/* ---------- request: light grey band, two columns (instructions | form) */
.req-band { background: var(--bg); color: var(--text); padding: clamp(28px, 3vw, 44px) 0 clamp(48px, 6vw, 90px); }
.reqpage .ft { margin-top: 0; }
.req-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
.req-side { }
.req-band .k { color: var(--muted); }
.req-side h1 { font-size: var(--h1); letter-spacing: .12em; line-height: 1.3; margin-bottom: 22px; }
.req-intro { font-weight: 500; font-size: 16px; color: var(--muted); text-align: justify; hyphens: auto; line-height: 1.55; margin-bottom: 30px; }
.steps { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 500; font-size: 15px; line-height: 1.45; color: var(--muted); }
.steps b { display: block; font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--white); margin-bottom: 2px; }
.step-n { font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .1em; padding-top: 1px; color: var(--white); }
/* curation & programming, under the steps */
.req-prog { margin: 0 0 30px; }
.req-prog-t { font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--white); margin: 0 0 8px; }
.req-prog p:not(.req-prog-t) { font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--muted); text-align: justify; hyphens: auto; margin: 0; }
.req-prog a { color: var(--white); text-underline-offset: 3px; }
.req-prog a:hover { color: var(--muted); }
.req-contact { font-weight: 500; font-size: 14px; line-height: 1.6; color: var(--muted); }
.req-contact b { color: var(--white); font-weight: 500; }
.req-contact a { color: var(--muted); text-decoration: none; transition: color .2s; }
.req-contact a:hover { color: var(--white); }
.req { min-width: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.req-form input:not([type=checkbox]), .req-form textarea, .req-form select, .picker input {
  width: 100%; display: block; margin: 0 0 10px; height: 46px; padding: 0 20px; background: #fff; color: #111; border: 1px solid #cfcfcf; border-radius: 999px; outline: none;
  font-family: var(--body); font-weight: 500; font-size: 15px; }
.req-form select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 48px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 20px center; }
.req-form textarea { border-color: #bdbdbd; height: auto; padding: 14px 20px; border-radius: 23px; resize: vertical; min-height: 96px; line-height: 1.45; }
/* type of screening: clearly a dropdown (visible label, dark border, chevron button) */
.dd { margin: 6px 0 10px; }
.dd-l { display: block; font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--white); margin-bottom: 8px; }
.req-form .dd select { margin: 0; border: 1.5px solid #111; padding-right: 60px; font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23111'/%3E%3Cpath d='M10 13l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 7px center; }
.req-form .dd select:hover { background-color: #f4f4f4; }
.req-form ::placeholder { color: #777; opacity: 1; }
.req-form :is(input, textarea, select):focus { border-color: #111; }
.req-form .invalid { border-color: #b3261e; }
.sel-box { background: #fff; border: 1px solid #bdbdbd; border-radius: 23px; padding: 18px 20px 10px; margin-bottom: 16px; }
.sel-box { color: #111; }
.sel-label { font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 10px; color: #111; }
.sel { list-style: none; margin: 0 0 8px; padding: 0; }
.sel li { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 8px 0; border-top: 1px solid #eee; }
.sel img { width: 48px; height: 48px; object-fit: cover; }
.s-t { font-family: var(--head); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.25; }
.s-t a { text-decoration: none; }
.s-m { display: block; font-family: var(--body); font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none; color: #666; }
.sel button { background: none; border: 0; font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; color: #666; padding: 6px; }
.sel button:hover { color: #111; }
.sel-empty { font-size: 14px; font-weight: 500; margin: 0 0 10px; color: #444; }
.picker { position: relative; }
.picker input { border-color: #111; }
.pick-list { position: absolute; left: 0; right: 0; top: calc(100% - 4px); z-index: 5; list-style: none; margin: 0; padding: 6px 0; background: #fff; border: 1px solid #111; border-radius: 18px; max-height: 300px; overflow: auto; }
.pick-list li { padding: 8px 20px; cursor: pointer; font-family: var(--head); font-weight: 700; font-size: 13px; text-transform: uppercase; color: #111; }
.pick-list li small { font-family: var(--body); font-weight: 500; font-size: 12px; text-transform: none; color: #666; margin-left: 8px; }
.pick-list li[aria-selected="true"], .pick-list li:hover { background: #f0f0f0; }
/* predictive search in the header and on the home: same list as the request picker, below the field */
.big-search { position: relative; }
.sugg { right: auto; top: calc(100% + 6px); z-index: 70; text-align: left; }
.check a { color: var(--muted); }
.check a:hover { color: var(--white); }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; font-weight: 500; font-size: 13px; line-height: 1.45; color: var(--muted); }
.check input { margin-top: 2px; width: 16px; height: 16px; accent-color: #000; flex-shrink: 0; }
.hp { position: absolute !important; left: -9999px; }
.form-error { font-weight: 500; font-size: 14px; color: #b3261e; }
.send { display: flex; justify-content: flex-end; }

.req-done { text-align: center; padding: 40px 0; }
.req-done h2 { font-size: 21px; margin-bottom: 16px; }
.sent .req-form { display: none; }

/* ---------- about */
.strip { display: grid; grid-template-columns: repeat(16, 1fr); gap: var(--gap); }
.strip img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 80px); padding-top: clamp(48px, 6vw, 88px); }
.about p { color: #2b2b2b; text-align: justify; hyphens: auto; margin-bottom: 1.4em; }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 32px clamp(32px, 5vw, 80px); }
.contact .k + p { margin-bottom: 28px; }
.aboutpage .contact { padding-top: clamp(32px, 3.5vw, 52px); }
/* contact: black labels, grey content, e-mails turn black on hover */
.aboutpage .contact .k { color: #000; }
.aboutpage .contact p:not(.k) { color: var(--muted); }
.aboutpage .contact a { color: var(--muted); text-decoration: none; transition: color .2s; }
.aboutpage .contact a:hover { color: #000; }
.aboutpage .contact p:not(.k) { text-align: justify; hyphens: auto; }
/* two-line lead, then a rule like the ones above the contact blocks */
.about-lead { max-width: none !important; font-size: clamp(14px, 1.45vw, 21px) !important; }
.about-lead span { display: block; }
@media (min-width: 961px) { .about-lead span { white-space: nowrap; } }
@media (max-width: 960px) { .about-lead span { display: inline; } }   /* the two-line split only makes sense on a wide screen */
.aboutpage .about { margin-top: 8px; }
.aboutpage .about > div { border-top: 1px solid var(--line); padding-top: clamp(28px, 3vw, 40px); }   /* same rule as above the contact blocks */
.aboutpage .about { padding-top: clamp(20px, 2.4vw, 32px); }
.aboutpage .ft, .aboutpage .light { margin-bottom: 0; }
.aboutpage .ft { margin-top: 0; }
.aboutpage .light { margin-top: clamp(56px, 6vw, 90px); }
/* rule between the contact blocks and Trusted by, inside the existing gap (the band's top padding moves below the rule) */
.aboutpage .light { padding-top: 0; }
.aboutpage .light > .wrap::before { content: ""; display: block; border-top: 1px solid #c6c6c6; margin-bottom: clamp(60px, 7vw, 100px); }
.contact > div { border-top: 1px solid var(--line); padding-top: 20px; }
.contact p:not(.k) { color: #2b2b2b; }

/* ---------- back to top (catalogue) */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 90; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: #000; cursor: pointer; line-height: 0;
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .3s, transform .3s; }
.to-top svg { display: block; }
.to-top.show { opacity: .75; transform: none; pointer-events: auto; }
.to-top:hover, .to-top:focus-visible { opacity: 1; }

/* ---------- toast (site.js) */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 140; transform: translate(-50%, 20px); opacity: 0; transition: all .25s; background: #111; color: #fff; border-radius: 24px;
  padding: 12px 22px; font-family: var(--head); font-size: 13px; display: flex; gap: 16px; align-items: center; pointer-events: none; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast em { font-style: normal; font-weight: 700; }
.toast a { font-weight: 700; font-size: 12px; text-transform: uppercase; white-space: nowrap; }

/* ---------- responsive */
@media (max-width: 1200px) {
  .hd-icons { display: none !important; }
  .cat .grid { --cols: 3; } .cat[data-size="s"] .grid { --cols: 5; } .cat[data-size="l"] .grid { --cols: 2; }
  .decs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hd { gap: 12px; }
  .hd-menu { display: block; }
  .hd-nav { position: fixed; inset: var(--hd) 0 0 0; background: var(--bg); flex-direction: column; align-items: stretch; padding: 16px var(--pad); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
  .hd-nav.open { opacity: 1; visibility: visible; }
  /* the header's backdrop-filter makes it the containing block of this fixed panel: give the panel its own height */
  .hd-nav { bottom: auto; height: calc(100vh - var(--hd)); height: calc(100dvh - var(--hd)); overflow-y: auto; }
  .hd-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .hd-nav li { border-bottom: 1px solid var(--line); }
  .hd-nav a { display: block; padding: 18px 0; font-size: 18px; }
  .hd-icons { display: flex !important; flex-direction: row !important; justify-content: center; margin: 24px 0 0 !important; }
  .hd-icons li { border: 0 !important; }
  .hd-search { flex: 1; width: auto; }
  .hd-search kbd { display: none; }
  .hd-brand { margin-right: auto; }
  .progs { grid-template-columns: 1fr 1fr; }
  .finder-row { grid-template-columns: 1fr; }
  /* narrow screens: the still stays whole (16:9) and the introduction sits below it instead of covering it */
  .show { height: auto; }
  .show-frames { position: relative; inset: auto; aspect-ratio: 16 / 9; }
  .film-grain, .film-flicker, .film-fx { bottom: auto; height: 56.25vw; }
  .show-dots { top: calc(56.25vw - 20px); bottom: auto; }
  .show-intro { position: relative; top: auto; left: auto; transform: none; width: auto; padding: 24px var(--pad) 8px; }
  .feat-panel { position: static; transform: none; width: auto; }
  .feat-cap { display: none; }
  .show-caps { display: none; }
  .intro, .coll, .feat-txt, .film-grid, .req-wrap, .ph-coll { grid-template-columns: 1fr; }
  .coll-rev .coll-img { order: 0; }
  .film-side, .req-side { position: static; }
  .film-poster { max-width: 360px; }
  .list .l-c, .list .l-r { display: none; }
  .others, .contact, .about { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust { grid-template-columns: 1fr; }
  .logos-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .strip { grid-template-columns: repeat(8, 1fr); }
  .strip img:nth-child(n+9) { display: none; }
  .qv-in { grid-template-columns: 1fr; }
  .qv-img { min-height: 0; }
  .qv-img img { height: auto; max-height: 46vh; }   /* height: 100% squeezed the image row and the title slid over the still */
  .qv-x { background: var(--panel); border-radius: 999px; padding: 8px 12px; }   /* readable over light stills */
}
@media (max-width: 640px) {
  .hd-brand img { width: 64px; }
  .hd-req { padding: 0 12px; }
  .hd-search { display: none; }
  .grid, .cat .grid { --cols: 2; }
  .cat[data-size="s"] .grid { --cols: 3; }
  .cat[data-size="l"] .grid { --cols: 1; }   /* S / M / L = 3 / 2 / 1 columns on a phone */
  .cat-row-2 { flex-direction: column; align-items: flex-start; }
  .list .l-img { display: none; }
  .progs { grid-template-columns: 1fr; }
  .tl { gap: 2px; } .tl-y { font-size: 11px; letter-spacing: 0; }
  .coll-list { columns: 1; }
  .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer, .two { grid-template-columns: 1fr; }
  .spec div { grid-template-columns: 1fr; gap: 2px; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh { grid-template-columns: 1fr; gap: 12px; } .sh .more { justify-self: start; }
  .big-search { flex-direction: column; }
  .big-search input { flex: none; }   /* in a column, flex: 1 collapsed the field height */

  .ft { flex-direction: column; align-items: flex-start; }
  .ft-line { margin-left: 0; }
  .ft-brand { align-self: flex-start; }
  .ft-legal { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ft-sep { display: none; }
  .lightbox { padding: 48px 8px; }
}
/* audit fixes (fase 2, 2026-09-25) */
.show-dots { align-items: center; }
.show-dots .show-pause { width: 20px; height: 20px; background: none; display: grid; place-items: center; }
.show-pause span { display: block; width: 9px; height: 11px; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.show-pause[aria-pressed="true"] span { width: 0; height: 0; border-right: 0; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@media (max-width: 640px) {
  .cta-cols > div { padding-left: 0; padding-right: 0; }
  .cta-cols .pill { white-space: normal; height: auto; min-height: 42px; padding: 10px 22px; text-align: center; line-height: 1.3; }
  .ft-nav a, .ft-legal a { display: inline-block; padding: 7px 0; }
  .hd-brand { min-height: 44px; }
}
/* legal pages and 404 (published site) */
.legal { max-width: 860px; padding-bottom: 20px; }
.legal h2 { font-size: 13px; letter-spacing: .16em; margin: 36px 0 12px; }
.legal p { color: #2b2b2b; text-align: justify; hyphens: auto; }
.nf .row { margin-top: 28px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }