/* Morning Factory Studio — brand: BRANDING_V3 / IDENTITY_V2 */
@font-face { font-family: 'Diatype'; src: url('../assets/fonts/diatype-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Montreal'; src: url('../assets/fonts/neue-montreal-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --black: #000000;
  --dark: #303030;
  --white: #fafafa;
  --light: #ededed;
  --orange: #f24705;
  --pad: clamp(14px, 1.6vw, 24px);
  --font: 'Diatype', 'Montreal', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body { background: var(--black); color: var(--white); font-family: var(--font); font-weight: 500; font-size: 16px; line-height: 1.25; letter-spacing: -0.01em; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, video { display: block; width: 100%; height: 100%; object-fit: cover; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--orange); color: var(--black); }

/* ---------- Header ---------- */
.header { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: var(--pad); color: #fff; pointer-events: none; }
.header > * { pointer-events: auto; }
.home .header { mix-blend-mode: normal; color: var(--hdr, #fafafa); transition: color .25s; }
.header .logo { width: clamp(150px, 15vw, 220px); display: block; }
.header .logo svg { width: 100%; height: auto; display: block; }
.header nav { display: flex; gap: clamp(16px, 2.2vw, 32px); font-size: clamp(16px, 1.25vw, 19px); }
.header nav a { position: relative; }
.header nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.7,0,.2,1); }
.header nav a:hover::after, .header nav a.on::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Intro loader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--orange); color: var(--black); display: grid; place-items: center; transition: clip-path 1s cubic-bezier(.8,0,.2,1); clip-path: inset(0 0 0 0); }
.loader.gone { clip-path: inset(0 0 100% 0); }
.loader .m { width: min(70vw, 900px); overflow: hidden; }
.loader .m svg { width: 100%; height: auto; display: block; transform: translateY(105%); animation: rise .9s .15s cubic-bezier(.7,0,.2,1) forwards; }
.loader .count { position: absolute; left: var(--pad); bottom: var(--pad); font-size: clamp(40px, 7vw, 110px); letter-spacing: -0.05em; line-height: .8; font-variant-numeric: tabular-nums; }
.loader .early { position: absolute; right: var(--pad); top: var(--pad); font-size: clamp(18px, 1.6vw, 24px); }
@keyframes rise { to { transform: translateY(0); } }

/* ---------- Hero: mouse-driven M window onto the showreel ---------- */
.hero { --bg: #f24705; --ink: #000; position: relative; height: 340vh; background: var(--black); }
.hero .stick { position: sticky; top: 0; height: 100vh; overflow: hidden; cursor: none; }
.hero video { position: absolute; inset: 0; }
.hero #reel { opacity: 0; transition: opacity .6s; }
.hero #reel.on { opacity: 1; }
.hero .stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero #cover { fill: var(--bg); transition: fill .5s; }
.hero #guides line { stroke: var(--ink); stroke-width: 1; opacity: .22; vector-effect: non-scaling-stroke; }
.hero #guides line.x { opacity: .9; stroke: var(--ink); }
.hero #guides rect { fill: var(--bg); stroke: var(--ink); stroke-width: 1; }
.hero #guides text { fill: var(--ink); font-family: var(--font); font-size: 11px; opacity: .75; }
.hero .hud { position: absolute; color: var(--ink); transition: color .5s, opacity .3s; font-size: clamp(13px, 1vw, 16px); line-height: 1.2; pointer-events: none; }
.hero .hud.tl { left: var(--pad); top: calc(var(--pad) * 3.6); width: clamp(200px, 22vw, 340px); opacity: 0; }
.hero .hud.tl svg { width: 100%; height: auto; display: block; }
.hero .hud.bl { left: var(--pad); bottom: var(--pad); }
.hero .early { font-size: clamp(56px, 10.5vw, 190px); letter-spacing: -0.055em; line-height: .8; display: flex; }
.hero .early span { display: inline-block; transform-origin: 50% 100%; }
.hero .hud.br { right: var(--pad); bottom: var(--pad); text-align: right; }
.hero .hud .dim { opacity: .55; font-variant-numeric: tabular-nums; }
.hero #clock { font-variant-numeric: tabular-nums; }
.hero .hud.side { left: var(--pad); top: 50%; width: clamp(18px, 1.6vw, 26px); transform: translateY(-50%); }
.hero .hud.side svg { width: 100%; height: auto; display: block; transform: rotate(90deg) translateX(-50%); transform-origin: 0 0; margin-left: 100%; }
.hero .hud.hint { right: var(--pad); top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: 100% 50%; white-space: nowrap; opacity: .7; }
.hero .snd { pointer-events: auto; cursor: pointer; right: var(--pad); top: calc(var(--pad) * 3.6); padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 99px; font-size: 13px; }
.hero .snd:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 760px) { .hero .hud.br, .hero .hud.hint, .hero .hud.side { display: none; } .hero .stick { cursor: auto; } }

/* ---------- Section heads ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: end; padding: calc(var(--pad) * 4) var(--pad) var(--pad); gap: var(--pad); }
.sec-head h2 { font-size: clamp(44px, 8vw, 140px); letter-spacing: -0.055em; line-height: .85; font-weight: 500; }
.sec-head .num { font-size: clamp(16px, 1.25vw, 19px); }
.toggle { display: flex; gap: 6px; background: var(--dark); padding: 4px; border-radius: 99px; }
.toggle button { padding: 8px 16px; border-radius: 99px; font-size: 15px; transition: background .25s, color .25s; }
.toggle button.on { background: var(--white); color: var(--black); }

/* ---------- Work: visuals grid ---------- */
.work { background: var(--black); padding-bottom: calc(var(--pad) * 4); }
.work .sec-head { padding-top: var(--pad); padding-bottom: calc(var(--pad) * .75); }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pad); padding: 0 var(--pad); }
.card { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--dark); }
.card:nth-child(5n+1) { grid-column: span 2; aspect-ratio: 16 / 7.5; }
.card img, .card video { position: absolute; inset: 0; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .5s; }
.card video { opacity: 0; }
.card:hover video { opacity: 1; }
.card:hover img, .card:hover video { transform: scale(1.04); }
.card .label { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: var(--pad); font-size: clamp(18px, 1.6vw, 26px); color: var(--white); background: linear-gradient(transparent, rgba(0,0,0,.45)); }
.card .label span:last-child { opacity: .7; }
.card .big { position: absolute; left: var(--pad); top: var(--pad); font-size: clamp(40px, 7vw, 120px); letter-spacing: -0.055em; line-height: .85; color: var(--white); transform: translateY(110%); transition: transform .6s cubic-bezier(.7,0,.2,1); }
.card .clip { position: absolute; left: 0; top: 0; overflow: hidden; }
.card:hover .big { transform: translateY(0); }

/* ---------- Work: index table ---------- */
.index { padding: 0 var(--pad); display: none; }
.index.on { display: block; }
.grid.off { display: none; }
.row { display: grid; grid-template-columns: 1.1fr 1.4fr 1.6fr .4fr; gap: var(--pad); padding: 12px 0; border-top: 1px solid var(--dark); font-size: clamp(15px, 1.15vw, 18px); transition: color .2s, padding .3s; position: relative; }
.row.head { color: #8a8a8a; border-top: 0; font-size: 14px; }
.row span:last-child { text-align: right; }
.row.link { cursor: pointer; }
.row.link:hover { color: var(--orange); padding-left: 12px; }
.row:not(.link):not(.head) { color: #9a9a9a; }
.peek { position: fixed; z-index: 40; width: min(30vw, 420px); aspect-ratio: 16/10; pointer-events: none; overflow: hidden; opacity: 0; transform: translate(-50%, -50%) scale(.85); transition: opacity .25s, transform .35s cubic-bezier(.2,.7,.2,1); }
.peek.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- Studio ---------- */
.studio { background: var(--white); color: var(--black); }
.studio .sec-head .num { color: var(--black); }
.studio .lead { padding: calc(var(--pad) * 6) var(--pad) calc(var(--pad) * 4); font-size: clamp(28px, 3.6vw, 58px); letter-spacing: -0.035em; line-height: 1.02; max-width: 1500px; }
.studio .lead .w { display: inline-block; opacity: .12; transition: opacity .3s; }
.studio .lead .w.lit { opacity: 1; }
.studio .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pad); padding: 0 var(--pad) calc(var(--pad) * 4); border-top: 1px solid var(--light); padding-top: var(--pad); }
.studio .cols h3 { font-size: 15px; font-weight: 500; color: #8a8a8a; margin-bottom: 14px; }
.studio .cols p, .studio .cols li { font-size: clamp(15px, 1.15vw, 18px); list-style: none; }
.studio .cols li::before { content: '→ '; }
.venn { position: relative; height: 70vh; min-height: 420px; background: var(--black); color: var(--white); overflow: hidden; }
.venn svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.venn circle { fill: none; stroke: #6f6f6f; stroke-width: 1; }
.venn text { fill: var(--white); font-family: var(--font); font-size: 13px; text-anchor: middle; }
.venn .cap { position: absolute; left: var(--pad); bottom: var(--pad); font-size: 14px; color: #8a8a8a; }

/* ---------- Other Divisions ---------- */
.divisions { background: var(--orange); color: var(--black); padding-bottom: calc(var(--pad) * 4); }
.divisions .sec-head .num { color: var(--black); }
.div-list { padding: 0 var(--pad); }
.division { display: grid; grid-template-columns: 3rem 1fr auto; align-items: end; gap: var(--pad); padding: calc(var(--pad) * 1.2) 0; border-top: 1.5px solid var(--black); position: relative; overflow: hidden; }
.division:last-child { border-bottom: 1.5px solid var(--black); }
.division .n, .division .what { font-size: clamp(15px, 1.15vw, 18px); padding-bottom: .6em; position: relative; z-index: 1; }
.division .name { position: relative; z-index: 1; display: block; overflow: hidden; height: .9em; font-size: clamp(44px, 9vw, 160px); letter-spacing: -0.055em; line-height: .9; }
.division .name span { display: block; transition: transform .6s cubic-bezier(.7,0,.2,1); }
.division::before { content: ''; position: absolute; inset: 0; background: var(--black); transform: scaleY(0); transform-origin: bottom; transition: transform .5s cubic-bezier(.7,0,.2,1); }
.division:hover::before { transform: scaleY(1); }
.division:hover { color: var(--orange); }
.division:hover .name span { transform: translateY(-100%); }

/* ---------- Play ---------- */
.play-page { background: var(--black); overflow: hidden; }
.play-page.grid-view { overflow: auto; }
.play-page .header { mix-blend-mode: normal; color: var(--white); }
.pbar { position: fixed; z-index: 45; left: var(--pad); right: var(--pad); bottom: var(--pad); display: flex; align-items: end; justify-content: space-between; gap: var(--pad); pointer-events: none; }
.pbar > * { pointer-events: auto; }
.pbar h1 { font-size: clamp(64px, 12vw, 210px); letter-spacing: -0.06em; line-height: .78; font-weight: 500; color: var(--orange); pointer-events: none; }
.filters { display: flex; gap: 6px; background: rgba(48,48,48,.85); backdrop-filter: blur(10px); padding: 4px; border-radius: 99px; }
.filters button, .pbar .toggle button { padding: 8px 16px; border-radius: 99px; font-size: 15px; transition: background .25s, color .25s; }
.filters button.on { background: var(--orange); color: var(--black); }
.pbar .toggle { background: rgba(48,48,48,.85); backdrop-filter: blur(10px); }
.pinfo { position: fixed; z-index: 45; left: var(--pad); top: calc(var(--pad) * 3.4); display: flex; gap: 18px; font-size: 13px; color: #8a8a8a; pointer-events: none; }
.wall { position: fixed; inset: 0; overflow: hidden; cursor: grab; touch-action: none; user-select: none; }
.wall.drag { cursor: grabbing; }
.tile { position: absolute; left: 0; top: 0; margin: 0; overflow: hidden; background: var(--dark); will-change: transform, opacity; transform-origin: 50% 50%; }
.tile img, .tile video { pointer-events: none; transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s; filter: grayscale(.15) brightness(.92); }
.tile:hover img, .tile:hover video { transform: scale(1.06); filter: none; }
.tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 8px 10px; font-size: 12px; color: var(--white); background: linear-gradient(transparent, rgba(0,0,0,.6)); opacity: 0; transition: opacity .25s; text-transform: capitalize; }
.tile:hover figcaption { opacity: 1; }
.tile.t-film::after, .tile.t-motion::after, .gtile.t-film::after, .gtile.t-motion::after { content: ''; position: absolute; right: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; padding: calc(var(--pad) * 5) var(--pad) 40vh; }
.gtile { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--dark); padding: 0; }
.gtile img, .gtile video { transition: opacity .25s; }
.pgrid:hover .gtile img, .pgrid:hover .gtile video { opacity: .45; }
.pgrid .gtile:hover img, .pgrid .gtile:hover video { opacity: 1; }
.ppeek { position: fixed; z-index: 44; width: min(36vw, 520px); pointer-events: none; opacity: 0; transform: scale(.92); transform-origin: left center; transition: opacity .2s, transform .3s cubic-bezier(.2,.7,.2,1); background: var(--dark); }
.ppeek.show { opacity: 1; transform: none; }
.ppeek img, .ppeek video { height: auto; max-height: 70vh; object-fit: contain; }
.ppeek .cap { padding: 8px 10px; font-size: 13px; text-transform: capitalize; }
.lightbox { position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.96); display: grid; place-items: center; }
.lightbox[hidden] { display: none; }
.lb-media { width: min(88vw, 1500px); height: 78vh; display: grid; place-items: center; }
.lb-media img, .lb-media video { width: 100%; height: 100%; object-fit: contain; }
.lb-cap { position: absolute; left: var(--pad); right: var(--pad); bottom: var(--pad); display: flex; justify-content: space-between; font-size: 15px; text-transform: capitalize; }
.lb-close { position: absolute; right: var(--pad); top: var(--pad); padding: 8px 16px; border: 1.5px solid var(--white); border-radius: 99px; font-size: 14px; }
.lb-close:hover { background: var(--orange); border-color: var(--orange); color: var(--black); }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 40px; padding: 20px; }
.lb-prev { left: 0; } .lb-next { right: 0; }
.lb-prev:hover, .lb-next:hover { color: var(--orange); }
.lb-open .cursor { display: none; }
@media (max-width: 760px) { .pbar { flex-wrap: wrap; } .pbar h1 { width: 100%; } .ppeek, .pinfo { display: none; } .header .logo { width: 130px; } .header nav { gap: 14px; font-size: 15px; } }

/* ---------- Footer ---------- */
.footer { background: var(--black); color: var(--white); padding: calc(var(--pad) * 4) var(--pad) var(--pad); }
.footer .cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--pad); font-size: clamp(15px, 1.15vw, 18px); }
.footer h3 { font-size: 15px; font-weight: 500; color: #8a8a8a; margin-bottom: 10px; }
.footer a:hover { color: var(--orange); }
.footer .bigm { margin-top: calc(var(--pad) * 5); color: var(--white); }
.footer .bigm svg { width: 100%; height: auto; display: block; }
.footer .legal { display: flex; justify-content: space-between; margin-top: var(--pad); font-size: 13px; color: #8a8a8a; }
.footer .mail { font-size: clamp(32px, 5.5vw, 96px); letter-spacing: -0.05em; line-height: .9; display: inline-block; margin-bottom: calc(var(--pad) * 3); }
.footer .mail:hover { color: var(--orange); }

/* ---------- Cursor ---------- */
.cursor { position: fixed; z-index: 90; left: 0; top: 0; pointer-events: none; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); transform: translate(-50%, -50%); transition: width .3s, height .3s, background .3s; display: grid; place-items: center; font-size: 13px; color: var(--black); white-space: nowrap; }
.cursor span { opacity: 0; transition: opacity .2s; }
.cursor.big { width: 84px; height: 84px; }
.cursor.big span { opacity: 1; }
@media (hover: none) { .cursor, .peek { display: none; } }

/* ---------- Reveal ---------- */
.rv { opacity: 0; transform: translateY(40px); transition: opacity .9s, transform .9s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }

/* ---------- Case page ---------- */
.case-hero { position: relative; height: 100vh; background: var(--black); overflow: hidden; }
.case-hero video { position: absolute; inset: 0; }
.case-hero .title { position: absolute; left: var(--pad); bottom: var(--pad); right: var(--pad); display: flex; justify-content: space-between; align-items: end; gap: var(--pad); color: var(--white); }
.case-hero h1 { font-size: clamp(56px, 12vw, 210px); letter-spacing: -0.06em; line-height: .8; font-weight: 500; }
.case-hero .snd { font-size: 15px; padding: 10px 16px; border: 1.5px solid currentColor; border-radius: 99px; white-space: nowrap; }
.case-info { display: grid; grid-template-columns: 1fr 1fr 1fr 2fr; gap: var(--pad); padding: calc(var(--pad) * 3) var(--pad) calc(var(--pad) * 5); }
.case-info h3 { font-size: 14px; font-weight: 500; color: #8a8a8a; margin-bottom: 8px; }
.case-info p { font-size: clamp(15px, 1.15vw, 18px); }
.case-info .txt { font-size: clamp(20px, 1.9vw, 30px); letter-spacing: -0.02em; line-height: 1.12; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad); padding: 0 var(--pad); }
.gallery .it { overflow: hidden; background: var(--dark); aspect-ratio: 16/10; }
.gallery .it.wide { grid-column: span 2; aspect-ratio: 16/8; }
.gallery .it.tall { aspect-ratio: 2/3; }
.gallery .it img, .gallery .it video { transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.next { display: block; position: relative; margin-top: calc(var(--pad) * 5); height: 80vh; overflow: hidden; background: var(--orange); color: var(--black); }
.next img { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path .9s cubic-bezier(.7,0,.2,1); }
.next:hover img { clip-path: inset(0 0 0 0); }
.next .lbl { position: absolute; left: var(--pad); top: var(--pad); font-size: 15px; z-index: 2; color: #fff; }
.next .nm { position: absolute; left: var(--pad); bottom: var(--pad); z-index: 2; font-size: clamp(56px, 12vw, 210px); letter-spacing: -0.06em; line-height: .8; color: #fff; }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .grid, .gallery { grid-template-columns: 1fr; }
  .card, .card:nth-child(5n+1) { grid-column: auto; aspect-ratio: 4/5; }
  .gallery .it.wide { grid-column: auto; aspect-ratio: 16/10; }
  .row { grid-template-columns: 1fr 1.3fr .5fr; }
  .row span:nth-child(3) { display: none; }
  .studio .cols, .footer .cols, .case-info { grid-template-columns: 1fr 1fr; }
  .case-info .txt { grid-column: span 2; }
    .card .big { display: none; }
}

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- Visuals (projects view) ---------- */
.visuals { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; padding: 0 var(--pad); }
.vt { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dark); }
.vt img { transition: opacity .2s; }
.visuals:hover .vt img { opacity: .5; }
.visuals .vt:hover img { opacity: 1; }
.vpeek { position: fixed; z-index: 40; top: calc(var(--pad) * 3.5); right: var(--pad); width: min(48vw, 860px); aspect-ratio: 16 / 9; pointer-events: none; opacity: 0; transition: opacity .2s; background: var(--dark); }
.vpeek.show { opacity: 1; }
@media (max-width: 760px) { .visuals { grid-template-columns: repeat(4, 1fr); gap: 4px; } .vpeek { display: none; } }
#work, #studio { scroll-margin-top: 56px; }
.since { opacity: .6; }
.cursor span { position: relative; }
.cursor.ring span { position: absolute; inset: 0; }
.cursor.ring i { position: absolute; font-style: normal; font-size: 13px; line-height: 1; }
.cursor.ring .l0 { top: 9px; left: 50%; transform: translateX(-50%); }
.cursor.ring .l1 { right: 10px; top: 50%; transform: translateY(-50%); } /* clockwise: top, right, bottom, left */
.cursor.ring .l2 { bottom: 9px; left: 50%; transform: translateX(-50%); }
.cursor.ring .l3 { left: 10px; top: 50%; transform: translateY(-50%); }
/* case title: same breathing room at the bottom as the logo has at the top, and room for descenders (p, y) */
.case-hero .title { bottom: calc(var(--pad) + 20px); }
.case-hero h1 { line-height: 1; padding-bottom: .02em; }
.under-hdr { opacity: 0 !important; transition: opacity .3s; }
.cursor.ring i b { font-weight: inherit; }
/* no grow-from-the-middle: the circle and its letters appear at once */
.cursor { transition: none !important; }
.cursor span { transition: none !important; }
/* legal row: KvK centred, right under the middle leg of the big M */
.footer .legal { display: grid; grid-template-columns: 1fr auto 1fr; }
.footer .legal .kvk { text-align: center; }
.footer .legal span:last-child { text-align: right; }
/* studio columns: equal white space between the blocks instead of four equal boxes;
   text blocks get a comfortable reading width, lists take what they need */
@media (min-width: 761px) {
  .studio .cols { display: flex; justify-content: space-between; gap: calc(var(--pad) * 2.5); }
  .studio .cols > div { flex: 0 1 auto; }
  .studio .cols p { max-width: 27ch; }
}
/* viewer: show the original, uncropped, in its own proportions, never bigger than the screen */
#lbmedia { width: auto; height: auto; display: flex; align-items: center; justify-content: center; }
#lbmedia img, #lbmedia video { width: auto; height: auto; max-width: calc(100vw - 160px); max-height: calc(100vh - 120px); object-fit: contain; }
@media (max-width: 760px) { #lbmedia img, #lbmedia video { max-width: calc(100vw - 32px); } }
.lb-cap { display: none; }
/* intro: "Keep scrolling. Slowly but steady." bottom centre while you scroll */
.hero .keep { position: absolute; left: 50%; bottom: var(--pad); transform: translateX(-50%); font-size: clamp(14px, 1.1vw, 17px); white-space: nowrap; opacity: 0; transition: opacity .5s, color .4s; pointer-events: none; }

/* ---------- Film player (MF.player) ---------- */
.mfp-open, .mfp-open body { overflow: hidden; }
.mfp { position: fixed; inset: 0; z-index: 120; background: #000; color: var(--white); font-family: var(--font); cursor: default; }
.mfp video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.mfp.idle { cursor: none; }
.mfp-top, .mfp-ui { position: absolute; left: 0; right: 0; padding: var(--pad); transition: opacity .4s; z-index: 2; }
.mfp-top { top: 0; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(rgba(0,0,0,.6), transparent); }
.mfp-title { font-size: clamp(18px, 1.6vw, 26px); letter-spacing: -0.02em; }
.mfp-close { padding: 8px 16px; border: 1.5px solid var(--white); border-radius: 99px; font-size: 14px; }
.mfp-close:hover { background: var(--orange); border-color: var(--orange); color: var(--black); }
.mfp-ui { bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,.7)); padding-top: 60px; }
.mfp.idle .mfp-top, .mfp.idle .mfp-ui { opacity: 0; }
.mfp-bar { position: relative; height: 22px; cursor: pointer; touch-action: none; }
.mfp-bar::before, .mfp-buf, .mfp-prog { content: ''; position: absolute; left: 0; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 3px; transition: height .15s; }
.mfp-bar::before { right: 0; background: rgba(250,250,250,.2); }
.mfp-buf { background: rgba(250,250,250,.35); width: 0; }
.mfp-prog { background: var(--orange); width: 0; }
.mfp-bar:hover::before, .mfp-bar:hover .mfp-buf, .mfp-bar:hover .mfp-prog { height: 7px; }
.mfp-knob { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--orange); transform: scale(0); transition: transform .15s; }
.mfp-bar:hover .mfp-knob { transform: scale(1); }
.mfp-tip { position: absolute; bottom: 24px; transform: translateX(-50%); background: var(--white); color: var(--black); font-size: 12px; padding: 3px 7px; border-radius: 99px; opacity: 0; pointer-events: none; font-variant-numeric: tabular-nums; }
.mfp-bar:hover .mfp-tip { opacity: 1; }
.mfp-row { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.mfp-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--white); }
.mfp-btn svg, .mfp-big svg { width: 20px; height: 20px; fill: currentColor; }
.mfp-btn:hover { background: var(--orange); color: var(--black); }
.mfp-time { font-size: 14px; font-variant-numeric: tabular-nums; color: rgba(250,250,250,.7); }
.mfp-time b { font-weight: 500; color: var(--white); }
.mfp-sp { flex: 1; }
.mfp-vol { width: 90px; accent-color: var(--orange); }
.mfp-big { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; background: var(--orange); color: var(--black); display: grid; place-items: center; z-index: 2; transform: scale(.6); opacity: 0; transition: transform .3s cubic-bezier(.2,.9,.2,1.2), opacity .2s; pointer-events: none; }
.mfp-big svg { width: 38px; height: 38px; margin-left: 5px; }
.mfp.paused .mfp-big { transform: scale(1); opacity: 1; pointer-events: auto; }
/* Play-film button on the case page */
.film-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px 12px 14px; border-radius: 99px; background: var(--orange); color: var(--black); font-size: clamp(15px, 1.15vw, 18px); white-space: nowrap; transition: background .2s, transform .2s; }
.film-btn:hover { background: var(--white); transform: scale(1.04); }
.film-btn i { width: 28px; height: 28px; border-radius: 50%; background: var(--black); color: var(--orange); display: grid; place-items: center; font-style: normal; font-size: 11px; padding-left: 2px; }
.header { transition: opacity .3s, color .25s; }
.header.hdr-hide { opacity: 0; pointer-events: none; }