/* Face Scan film v2 (12 Oct 2026): a 33 second promotional film of what the free Face Scan does, drawn in the page with
   SVG, canvas and the scan's own outputs on the hero portrait. Shared by the clinic's Face Scan page and the scan site's
   home page, so the frame carries its own base styles. Sizes follow the frame (--u = 1% of its width). */
.scan-frame.film { --u: 3.2px; --ink: #1F1812; --paper: #F7F2EA; --gold: #C9A962; --gold-soft: #E5CFA8; --scan: #6db6c2; --ok: #3E8F5E;
  --ff-d: var(--font-display, var(--font-refined-display, 'Fraunces', Georgia, serif));
  --ff-b: var(--font-body, var(--font-refined-body, 'DM Sans', system-ui, sans-serif));
  position: relative; overflow: hidden; display: block; width: 100%; max-width: 320px; margin: 0 auto; aspect-ratio: 9/16; border-radius: 22px;
  background: #0b0b0b; box-shadow: 0 22px 48px -18px rgba(42,37,32,.45); cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  font-family: var(--ff-b); color: #fff; isolation: isolate; line-height: normal; text-align: left; }
.scan-frame.film::before { content: ""; display: block; padding-top: 177.78%; }
.scan-frame.film *, .scan-frame.film *::before, .scan-frame.film *::after { box-sizing: border-box; }
@supports (aspect-ratio: 1) { .scan-frame.film::before { display: none; } }
.film img { max-width: none; }
.film .scan-frame__line { position: absolute; left: 0; right: 0; top: 5%; height: 3px; z-index: 4; background: linear-gradient(90deg, transparent, #6db6c2, transparent);
  box-shadow: 0 0 14px 2px rgba(109,182,194,.7); animation: filmSweep 2.2s ease-in-out infinite; }
@keyframes filmSweep { 0% { top: 5%; } 50% { top: 62%; } 100% { top: 5%; } }
.film.paused .scan-frame__line { animation-play-state: paused; }
.film .scan-frame__c { position: absolute; z-index: 5; width: 26px; height: 26px; border: 2px solid rgba(255,255,255,.85); transition: opacity .4s ease; }
.film .scan-frame__c--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.film .scan-frame__c--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.film .scan-frame__c--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.film .scan-frame__c--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.film.ui-scene .scan-frame__c, .film.ui-scene .scan-frame__line { opacity: 0; }

.film-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; opacity: 0; visibility: hidden; transform-origin: 50% 50%; }
.film-scene.is-on { visibility: visible; }
.film-open { opacity: 1; visibility: visible; }
.film-open.is-off { visibility: hidden; }
.film-open .film-open__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 62% 45%; }

/* full-bleed photographs, always on the move */
.film-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; }
.film-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20,16,12,0) 46%, rgba(20,16,12,.38) 64%, rgba(20,16,12,.8) 100%); }
.film-scrim.top { background: linear-gradient(0deg, rgba(20,16,12,0) 48%, rgba(20,16,12,.34) 68%, rgba(20,16,12,.74) 100%); }

/* the scan's own working photo, with everything drawn on it in its own pixel space */
.film-stage { position: absolute; top: 0; bottom: 0; left: 50%; transform-origin: 50% 50%; }
.film-stage > img, .film-stage > canvas, .film-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film-stage .film-mark { opacity: 0; }
.film-after { clip-path: inset(0 0 0 100%); -webkit-clip-path: inset(0 0 0 100%); }

/* home: the button that starts the scan */
.film-pillbtn { position: absolute; left: 50%; top: 57%; display: inline-flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3.4) calc(var(--u) * 5.2) calc(var(--u) * 3.4) calc(var(--u) * 6);
  border-radius: 999px; background: var(--ink); color: #FBF8F2; font-size: calc(var(--u) * 4.1); font-weight: 600; white-space: nowrap; opacity: 0;
  box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 9) rgba(20,16,12,.38); }
.film-pillbtn svg { width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); }

/* camera screen */
.film-cam { background: #0d0b09; }
.film-mask { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.film-guides { position: absolute; left: 0; right: 0; display: flex; justify-content: center; gap: calc(var(--u) * 2); }
.film-guides span { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.5) calc(var(--u) * 3) calc(var(--u) * 1.5) calc(var(--u) * 1.6);
  border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: calc(var(--u) * 3.3); font-weight: 500; opacity: 0; }
.film-guides i { display: grid; place-items: center; width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); border-radius: 50%; border: 1.5px solid rgba(255,255,255,.6); transition: background .2s, border-color .2s; }
.film-guides i svg { width: 70%; height: 70%; color: #fff; opacity: 0; transition: opacity .2s; }
.film-guides .ok i { background: var(--ok); border-color: var(--ok); }
.film-guides .ok i svg { opacity: 1; }
.film-ready { position: absolute; display: inline-flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 3.2) calc(var(--u) * 6.4); border-radius: 999px;
  background: #2F8A55; color: #fff; font-size: calc(var(--u) * 4); font-weight: 600; white-space: nowrap; opacity: 0; box-shadow: 0 0 0 calc(var(--u) * 1.4) rgba(123,211,154,.25), 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(0,0,0,.4); }
.film-ready i { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border-radius: 50%; background: #fff; }
.film-flash { position: absolute; inset: 0; z-index: 7; background: #fff; opacity: 0; pointer-events: none; }
.film-tap { position: absolute; z-index: 3; width: calc(var(--u) * 12); height: calc(var(--u) * 12); margin: calc(var(--u) * -6) 0 0 calc(var(--u) * -6); border-radius: 50%;
  border: calc(var(--u) * .8) solid rgba(255,255,255,.95); background: rgba(255,255,255,.28); opacity: 0; pointer-events: none; }
.film-tap.dark { border-color: rgba(31,24,18,.6); background: rgba(31,24,18,.12); }

/* results: the passing scan line, the score card and the readings */
.film-sweep { position: absolute; left: 0; right: 0; top: 0; height: 3px; margin-top: -1.5px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(109,182,194,0), #6db6c2 22%, #c8f3f8 50%, #6db6c2 78%, rgba(109,182,194,0)); box-shadow: 0 0 16px 3px rgba(109,182,194,.75); }
.film-chip { position: absolute; display: inline-flex; align-items: center; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.6) calc(var(--u) * 3.2);
  border-radius: 999px; background: rgba(255,255,255,.95); color: var(--ink); font-size: calc(var(--u) * 3.6); font-weight: 500; line-height: 1.1;
  white-space: nowrap; box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 4) rgba(20,16,12,.22); opacity: 0; }
.film-chip b { font-weight: 500; color: #6B6259; }
.film-chip.edge { border-radius: calc(var(--u) * 3); border-left: calc(var(--u) * 1) solid var(--c, var(--gold)); }
.film-score { position: absolute; left: calc(var(--u) * 5); top: calc(var(--u) * 11); display: flex; align-items: center; gap: calc(var(--u) * 2.6); transform-origin: 0 50%;
  padding: calc(var(--u) * 2.2) calc(var(--u) * 3.8) calc(var(--u) * 2.2) calc(var(--u) * 2.2); border-radius: calc(var(--u) * 5); background: rgba(247,242,234,.96);
  color: var(--ink); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(20,16,12,.22); opacity: 0; }
.film-score svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); flex: 0 0 auto; }
.film-score .l { display: block; font-size: calc(var(--u) * 3.1); color: #6B6259; line-height: 1.25; }
.film-score .t { display: block; font-family: var(--ff-d); font-size: calc(var(--u) * 5.2); line-height: 1.1; }

/* before & after */
.film-split { position: absolute; top: 0; bottom: 30%; width: 2px; margin-left: -1px; background: linear-gradient(180deg, rgba(255,255,255,.95) 85%, rgba(255,255,255,0)); opacity: 0; }
.film-knob { position: absolute; width: calc(var(--u) * 11); height: calc(var(--u) * 11); margin: calc(var(--u) * -5.5) 0 0 calc(var(--u) * -5.5); border-radius: 50%;
  background: #FBF8F2; box-shadow: 0 4px 14px rgba(20,16,12,.25); display: grid; place-items: center; color: var(--ink); opacity: 0; }
.film-knob svg { width: 55%; height: 55%; }
.film-glint { position: absolute; top: -30%; bottom: -30%; left: 0; width: 30%; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,250,240,0), rgba(255,250,240,.32), rgba(255,250,240,0)); }

/* the paper screens: options, saving, the end card, with soft light drifting behind */
.film-paper { position: absolute; inset: 0; overflow: hidden; background: var(--paper); color: var(--ink); }
.film-blob { position: absolute; width: 130%; height: 70%; border-radius: 50%; pointer-events: none; }
.film-blob.a { top: -24%; left: -50%; background: radial-gradient(closest-side, rgba(229,207,168,.6), rgba(229,207,168,0)); }
.film-blob.b { bottom: -26%; right: -55%; background: radial-gradient(closest-side, rgba(245,230,224,.95), rgba(245,230,224,0)); }
.film-ui { position: absolute; left: calc(var(--u) * 5); right: calc(var(--u) * 5); top: calc(var(--u) * 53); }
.film-card { border-radius: calc(var(--u) * 4.5); background: #fff; border: 1px solid rgba(31,24,18,.12); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(31,24,18,.1); overflow: hidden; opacity: 0; }
.film-card.gold { border: calc(var(--u) * .5) solid var(--gold); }
.film-card__head { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 3) calc(var(--u) * 3.6) 0; font-size: calc(var(--u) * 3.7); font-weight: 600; }
.film-card__head i { display: grid; place-items: center; width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); border-radius: 50%; background: var(--gold); color: #fff; font-style: normal; font-size: calc(var(--u) * 3); }
.film-row { display: flex; align-items: center; gap: calc(var(--u) * 2.6); padding: calc(var(--u) * 2.8) calc(var(--u) * 3.6); opacity: 0; }
.film-row + .film-row { border-top: 1px solid rgba(31,24,18,.08); }
.film-row img { width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 50%; background: #fff; box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2.4) rgba(31,24,18,.12); flex: 0 0 auto; opacity: 0; }
.film-row p { margin: 0; flex: 1; min-width: 0; font-size: calc(var(--u) * 3.6); line-height: 1.3; }
.film-row p small { display: block; font-size: calc(var(--u) * 2.9); color: #6B6259; }
.film-btn { flex: 0 0 auto; padding: calc(var(--u) * 2) calc(var(--u) * 3.8); border-radius: 999px; background: var(--ink); color: #FBF8F2; font-size: calc(var(--u) * 3.3); font-weight: 600; }
.film-club { display: flex; align-items: center; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 3); padding: calc(var(--u) * 3.2) calc(var(--u) * 3.6);
  border-radius: calc(var(--u) * 4.5); background: #FAF8F5; border: 1px solid var(--gold-soft); opacity: 0; }
.film-club img { width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
.film-club p { margin: 0; font-size: calc(var(--u) * 3.5); line-height: 1.3; flex: 1; }
.film-club p small { display: block; color: #6B6259; font-size: calc(var(--u) * 2.9); }
.film-pill { flex: 0 0 auto; padding: calc(var(--u) * 1.2) calc(var(--u) * 2.6); border-radius: 999px; background: #F5E6E0; font-size: calc(var(--u) * 2.8); font-weight: 600; }
.film-quiet { margin-top: calc(var(--u) * 3); padding: calc(var(--u) * 3) 0; border-radius: 999px; border: 1px solid rgba(31,24,18,.35); background: rgba(255,255,255,.7);
  text-align: center; font-size: calc(var(--u) * 3.5); font-weight: 600; opacity: 0; }
.film-sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 7); border-radius: calc(var(--u) * 6) calc(var(--u) * 6) 0 0;
  background: #fff; box-shadow: 0 calc(var(--u) * -3) calc(var(--u) * 10) rgba(31,24,18,.2); transform: translateY(105%); }
.film-sheet h5 { margin: 0; font-family: var(--ff-d); font-weight: 400; font-size: calc(var(--u) * 5.6); line-height: 1.1; }
.film-sheet p { margin: calc(var(--u) * 1.2) 0 calc(var(--u) * 3); font-size: calc(var(--u) * 3.2); color: #5A4E42; }
.film-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2); }
.film-slots span { padding: calc(var(--u) * 2.2) 0; text-align: center; border-radius: calc(var(--u) * 3); border: 1px solid rgba(31,24,18,.18); font-size: calc(var(--u) * 3.3); opacity: 0; transition: background .15s, color .15s; }
.film-slots span.pick { background: var(--ink); color: #FBF8F2; border-color: var(--ink); }
.film-booked { display: flex; align-items: center; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 3.4); font-size: calc(var(--u) * 3.8); font-weight: 600; opacity: 0; }
.film-booked i { display: grid; place-items: center; width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); border-radius: 50%; background: var(--ok); color: #fff; }
.film-booked i svg, .film-dl .ok svg { width: 64%; height: 64%; }
.film-booked i svg path, .film-dl .ok svg path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }

/* saving to the phone */
.film-doc { position: absolute; left: 50%; top: calc(var(--u) * 53); width: calc(var(--u) * 74); margin-left: calc(var(--u) * -37); padding: calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 5.4);
  border-radius: calc(var(--u) * 4); background: #FBF8F2; color: var(--ink); box-shadow: 0 calc(var(--u) * 5) calc(var(--u) * 14) rgba(31,24,18,.24); opacity: 0; }
.film-doc .seal { display: flex; align-items: center; gap: calc(var(--u) * 2); font-family: var(--ff-d); font-size: calc(var(--u) * 4.4); }
.film-doc .seal img { width: calc(var(--u) * 8); height: calc(var(--u) * 8); }
.film-doc h6 { margin: calc(var(--u) * 3.4) 0 0; font-family: var(--ff-d); font-weight: 400; font-size: calc(var(--u) * 6.4); line-height: 1.1; }
.film-doc .date { margin: calc(var(--u) * .8) 0 0; font-size: calc(var(--u) * 2.9); color: #6B6259; }
.film-doc .lines { margin-top: calc(var(--u) * 3.4); display: grid; gap: calc(var(--u) * 2); }
.film-doc .lines span { display: flex; justify-content: space-between; padding-bottom: calc(var(--u) * 1.6); border-bottom: 1px solid rgba(31,24,18,.1); font-size: calc(var(--u) * 3.2); opacity: 0; }
.film-doc .open { margin-top: calc(var(--u) * 3.6); padding: calc(var(--u) * 2.8) 0; border-radius: 999px; background: var(--ink); color: #FBF8F2; text-align: center; font-size: calc(var(--u) * 3.5); font-weight: 600; }
.film-dl { position: absolute; top: calc(var(--u) * -4.5); right: calc(var(--u) * -4); width: calc(var(--u) * 13); height: calc(var(--u) * 13); opacity: 0;
  filter: drop-shadow(0 calc(var(--u) * 1.4) calc(var(--u) * 2.4) rgba(31,24,18,.2)); }
.film-dl svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-dl .i, .film-dl .ok { position: absolute; inset: 0; display: grid; place-items: center; }
.film-dl .i svg { position: static; width: 46%; height: 46%; color: var(--ink); }
.film-dl .ok { color: #fff; opacity: 0; }
.film-dl .ok svg { position: static; }
.film-dl.done > svg circle:first-child { fill: var(--ok); stroke: var(--ok); }
.film-saved { position: absolute; left: 50%; bottom: calc(var(--u) * 13); display: inline-flex; align-items: center; gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 2.6) calc(var(--u) * 4.4); border-radius: 999px; background: var(--ink); color: #FBF8F2; font-size: calc(var(--u) * 3.6); font-weight: 500; white-space: nowrap; opacity: 0;
  box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(31,24,18,.3); }
.film-saved svg { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); }

/* consultation: your results in hand */
.film-mini { position: absolute; left: calc(var(--u) * 6); bottom: calc(var(--u) * 10); display: flex; align-items: center; gap: calc(var(--u) * 2.6);
  padding: calc(var(--u) * 2.6) calc(var(--u) * 4) calc(var(--u) * 2.6) calc(var(--u) * 2.6); border-radius: calc(var(--u) * 4); background: rgba(251,248,242,.97); color: var(--ink);
  box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 9) rgba(20,16,12,.3); opacity: 0; transform-origin: 0 100%; }
.film-mini img { width: calc(var(--u) * 9); height: calc(var(--u) * 9); }
.film-mini p { margin: 0; font-family: var(--ff-d); font-size: calc(var(--u) * 4.4); line-height: 1.15; }
.film-mini p small { display: block; margin-top: calc(var(--u) * .6); font-family: var(--ff-b); font-size: calc(var(--u) * 2.9); color: #6B6259; }

/* the end card: the seal rings out, the button catches the light */
.film-end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 calc(var(--u) * 9); text-align: center; color: var(--ink); }
.film-end .film-ring { position: relative; width: calc(var(--u) * 44); height: calc(var(--u) * 44); }
.film-end .film-ring img { position: absolute; inset: calc(var(--u) * 3); width: calc(100% - var(--u) * 6); height: calc(100% - var(--u) * 6); opacity: 0; }
.film-end .film-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-end .film-ring i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; }
.film.end-on .film-end .film-ring i { animation: filmPulse 2.4s ease-out .9s infinite; }
.film.end-on .film-end .film-ring i.p2 { animation-delay: 2.1s; }
@keyframes filmPulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.9); opacity: 0; } }
.film-end h4 { margin: calc(var(--u) * 7) 0 0; font-family: var(--ff-d); font-weight: 400; font-size: calc(var(--u) * 10.2); line-height: 1.06; letter-spacing: -.01em; text-wrap: balance; }
.film-end h4 .w.em > span { font-style: italic; color: var(--accent-ink, #7A5A32); }
.film-end p { margin: calc(var(--u) * 3) 0 0; font-size: calc(var(--u) * 3.9); line-height: 1.45; color: #5A4E42; opacity: 0; }
.film-end .cta { position: relative; overflow: hidden; margin-top: calc(var(--u) * 6); display: inline-block; padding: calc(var(--u) * 3.8) calc(var(--u) * 7.4); border-radius: 999px;
  background: var(--ink); color: #FBF8F2; font-size: calc(var(--u) * 4.6); font-weight: 600; text-decoration: none; cursor: pointer; opacity: 0;
  box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 9) rgba(31,24,18,.28); }
.film-end .cta span { position: relative; z-index: 1; }
.film-end .cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; transform: skewX(-20deg);
  background: linear-gradient(90deg, rgba(229,207,168,0), rgba(229,207,168,.55), rgba(229,207,168,0)); }
.film.end-on .film-end .cta::after { animation: filmShine 2.8s ease-in-out 1.6s infinite; }
@keyframes filmShine { 0% { left: -70%; } 55%, 100% { left: 135%; } }
.film-end .replay { margin-top: calc(var(--u) * 3); padding: calc(var(--u) * 2) calc(var(--u) * 3); border: 0; background: none; color: var(--ink); font: inherit; font-size: calc(var(--u) * 3.4);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: 0; }

/* effects, the wipe and captions */
.film-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.film-wipe { position: absolute; left: 0; right: 0; top: 0; height: 3px; margin-top: -1.5px; z-index: 7; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(109,182,194,0), #6db6c2 20%, #c8f3f8 50%, #6db6c2 80%, rgba(109,182,194,0)); box-shadow: 0 0 16px 4px rgba(109,182,194,.8); }
.film .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .05em .16em; margin: 0 -.05em -.16em; }
.film .w > span { display: inline-block; transform: translateY(110%); will-change: transform; }
.film-cap { z-index: 6; position: absolute; left: calc(var(--u) * 6); right: calc(var(--u) * 6); bottom: calc(var(--u) * 9); opacity: 0; pointer-events: none; text-shadow: 0 1px 12px rgba(20,16,12,.3); }
.film-cap.top { bottom: auto; top: calc(var(--u) * 17); }
.film-cap.dark { color: var(--ink); text-shadow: none; }
.film-cap .e { display: block; margin-bottom: calc(var(--u) * 1.8); font-size: calc(var(--u) * 3); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); opacity: 0; }
.film-cap.dark .e { color: var(--accent-ink, #7A5A32); }
.film-cap .h { display: block; font-family: var(--ff-d); font-weight: 400; font-size: calc(var(--u) * 8.4); line-height: 1.06; letter-spacing: -.01em; text-wrap: balance; }
.film-cap .w.em > span { font-style: italic; color: var(--gold-soft); text-shadow: none; }
.film-cap.dark .w.em > span { color: var(--accent-ink, #7A5A32); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .film-cap .w.em > span { background-image: linear-gradient(100deg, #E5CFA8 0%, #E5CFA8 40%, #FFFFFF 50%, #E5CFA8 60%, #E5CFA8 100%); background-size: 300% 100%;
    background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .film-cap.dark .w.em > span { background-image: linear-gradient(100deg, #7A5A32 0%, #7A5A32 40%, #D2AE6A 50%, #7A5A32 60%, #7A5A32 100%); }
}
.film-cap .s { display: block; margin-top: calc(var(--u) * 2.2); font-size: calc(var(--u) * 3.8); line-height: 1.4; opacity: 0; }
.film-cap.dark .s { color: #4A4038; }

/* progress and pause */
.film-bar { position: absolute; left: calc(var(--u) * 4); right: calc(var(--u) * 4); top: calc(var(--u) * 4); display: flex; gap: calc(var(--u) * 1.2); z-index: 8; pointer-events: none; }
.film-bar i { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.42); overflow: hidden; box-shadow: 0 0 0 .5px rgba(20,16,12,.12); }
.film-bar b { display: block; height: 100%; width: 0; background: #fff; }
.film.ui-scene .film-bar i { background: rgba(31,24,18,.16); box-shadow: none; }
.film.ui-scene .film-bar b { background: var(--ink); }
.film-toggle { position: absolute; right: calc(var(--u) * 3.4); top: calc(var(--u) * 7); z-index: 9; width: calc(var(--u) * 9); height: calc(var(--u) * 9); min-width: 32px; min-height: 32px;
  border: 0; border-radius: 50%; background: rgba(20,16,12,.38); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.film.ui-scene .film-toggle { background: rgba(31,24,18,.08); color: var(--ink); }
.film-toggle svg { width: 46%; height: 46%; }
.film-start { position: absolute; left: 50%; top: 50%; z-index: 9; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px;
  border: 0; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--ink); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; box-shadow: 0 10px 30px rgba(20,16,12,.25); }
.film-start svg { width: 16px; height: 16px; }
.film:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.film-transcript { max-width: 320px; margin: 14px auto 0; font-size: 14px; color: var(--ink-soft, #5A4E42); }
.film-transcript__title { margin: 0; font-weight: 500; }
.film-transcript__toggle { display: inline-block; margin: 0; padding: 8px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }
.film-transcript__toggle:focus-visible { outline: 2px solid var(--accent-ink, #7A5A32); outline-offset: 2px; border-radius: 2px; }
.film-transcript ol { margin: 6px 0 0; padding-left: 20px; line-height: 1.6; list-style: decimal; }
.film-transcript ol[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .film .scan-frame__line { animation: none; top: 50%; }
  .film.end-on .film-end .film-ring i, .film.end-on .film-end .cta::after { animation: none; }
}
/* On phones the floating WhatsApp button (clinic) and the "More below" pill (scan site) sat over the film's captions,
   so they fade out while the film is on screen and come back as you scroll on. */
body .whatsapp-float, body [data-scroll-cue] { transition: transform .2s ease, box-shadow .2s ease, opacity .25s ease, visibility .25s; }
@media (max-width: 560px) {
  body.film-on-screen .whatsapp-float { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
}
body.film-on-screen [data-scroll-cue] { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }