/* Dame Digital, Film (c1-film), the built concept. The house: Sofia Sans Condensed for display and
   Sofia Sans for text, one superfamily, self-hosted. Each reel keeps its own venture's faces and
   colours, read from that venture's own files. One theme, dark (Vince, feedback 3, 2026-10-21: "This
   is clearly a dark-oriented direction"; PRD A-04); nothing follows the device. The motion layer (the pinned film) is on only with script and without reduced motion
   (html.js[data-film="on"], set by film.js); everything else is a plain, whole document. */

@font-face { font-family: "Sofia Sans Condensed"; src: url("fonts/sofia-sans-condensed-latin-wght-normal.woff2") format("woff2"); font-weight: 1 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sofia Sans Condensed"; src: url("fonts/sofia-sans-condensed-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 1 1000; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sofia Sans"; src: url("fonts/sofia-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 1 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sofia Sans"; src: url("fonts/sofia-sans-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 1 1000; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* The ventures' own faces */
@font-face { font-family: "Manrope"; src: url("fonts/manrope-variable.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Cabin Sketch"; src: url("fonts/CabinSketch-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/Caveat-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- The house ---------- */
html {
  --display: "Sofia Sans Condensed", "Sofia Sans", sans-serif;
  --text: "Sofia Sans", "Sofia Sans Condensed", sans-serif;
  --pad: clamp(1.25rem, 4.4vw, 4rem);
  --film-ink: #F4F6F8;
  --stage: #0E1116; --paper: #E7EBF0;
  --ground: #0E1116; --panel: #1A1F27; --ink: #E7EBF0; --soft: #B9C1CC; --muted: #A3ACB8; --line: #2A313B;
  --blue: #4A8FE0; --link: #9CC4F2; --bar-ground: #07090C; --field: #7A8390;
  color-scheme: dark;
}
html { background: var(--ground); scrollbar-color: var(--line) var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--text); font-size: 1.125rem; line-height: 1.5; overflow-x: clip; -webkit-font-smoothing: antialiased; }
h1, h2, p, dl, dd { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

.skip { position: absolute; left: var(--pad); top: -5rem; z-index: 30; padding: 0.75rem 1rem; background: var(--ink); color: var(--ground); font-weight: 600; }
.skip:focus { top: 1rem; }

/* The header sits over the film. */
.top { position: absolute; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 2.4vw, 2rem) var(--pad); }
.mark { flex: none; display: inline-flex; align-items: center; min-height: 44px; }
.mark img { width: clamp(132px, 15vw, 210px); height: auto; aspect-ratio: 396 / 76; }
.nav-wide { display: flex; gap: clamp(0.25rem, 2vw, 2rem); }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.4rem; text-decoration: none; font-size: 1.0625rem; letter-spacing: 0.01em; color: var(--film-ink); }
@media (hover: hover) { .top nav a:hover { text-decoration: underline; } }
/* The phone menu: one Menu button opening the same three links */
.menu { display: none; position: relative; }
.menu summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; list-style: none; cursor: pointer; color: var(--film-ink); font-size: 1.0625rem; font-weight: 600; border: 1px solid rgb(244 246 248 / 0.55); border-radius: 999px; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--film-ink); color: #0E1116; }
.menu nav { position: absolute; right: 0; top: calc(100% + 0.5rem); display: grid; min-width: 13rem; padding: 0.5rem; background: #0E1116; border: 1px solid #2A313B; border-radius: 12px; }
.menu nav a { min-height: 48px; padding: 0 1rem; font-size: 1.125rem; }
@media (max-width: 640px) { .nav-wide { display: none; } .menu { display: block; } }
/* The header is always on the dark film, so its ink and focus ring stay light. */
.top-end { display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 1.5rem); }
.top :focus-visible { outline-color: var(--film-ink); }
@media (max-width: 359px) { .mark img { width: 118px; } }

/* ---------- The film: hero ---------- */
/* The pin carries the starter's .stage class, whose pointer-events: none would leave every reel's links dead
   without the film (no script, reduced motion); the moving film switches each reel on and off itself. */
.film .stage { display: block; padding: 0; place-items: initial; pointer-events: auto; }
/* Until film.js has turned the film on (and whenever it is off), the film scene is a plain stack: the
   starter's pin would otherwise hold five reels inside one clipped viewport. */
html:not(.js[data-film="on"]) .film[data-span] { height: auto; }
html:not(.js[data-film="on"]) .film > .pin { position: relative; height: auto; overflow: visible; }
.layer-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: clip; background: #05070A; color: var(--film-ink); }
.hero-film { position: absolute; inset: 0; transform-origin: 62% 45%; }
.hero-film img, .hero-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The portrait clip is wider than a phone: crop mostly from its left, where the frame is empty, so the
   mark keeps air on both sides and the D's curve stays whole on the right. */
@media (max-aspect-ratio: 4/5) { .hero-film img, .hero-film video { object-position: 80% 50%; } }
/* A near-square window (a tablet, a small laptop) shows the wide clip's middle half: keep the mark and
   its slit in frame, right of the headline, and the D's curve whole. */
@media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 3/2) { .hero-film img, .hero-film video { object-position: 84% 50%; } }
/* The clip dissolves in over the poster, its own frame at 1 s. */
.hero-film video { opacity: 0; transition: opacity 0.8s ease-in-out; }
.hero-film video.playing { opacity: 1; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(5 7 10 / 0.72) 0%, rgb(5 7 10 / 0.4) 9%, rgb(5 7 10 / 0) 18%), linear-gradient(20deg, rgb(5 7 10 / 0.78) 0%, rgb(5 7 10 / 0.4) 34%, rgb(5 7 10 / 0) 62%); }
.hero-copy { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(2rem, 7svh, 5rem); z-index: 2; }
.hero-copy h1 { font-family: var(--display); font-weight: 600; font-size: clamp(3.4rem, 19vw, 11.5rem); line-height: 0.86; letter-spacing: -0.012em; color: var(--film-ink); }
.hero-copy h1 .line { display: block; }
/* The line under the headline: one plain line of copy (Vince, feedback 3), in the house's display
   face so it reads as the headline's second voice, not as body text. */
.hero-sub { margin-top: clamp(1rem, 2.4vh, 1.75rem); max-width: 30ch; font-family: var(--display); font-weight: 520; font-size: clamp(1.375rem, 2vw, 2rem); line-height: 1.3; letter-spacing: 0.003em; color: #DCE1E8; text-wrap: balance; }
@media (max-width: 760px) {
  /* Compact enough that the headline stays under the mark's glass at 375 by 812, where the copy is
     read against the clip's brightest part (R-11's hand read found "Modern" at 2.76:1 there). */
  .hero-copy { bottom: clamp(1.5rem, 5svh, 5rem); }
  .hero-sub { font-size: 1.3125rem; }
}
@media (min-width: 761px) { .hero-copy h1 { font-size: clamp(5rem, min(12.6vw, 21vh), 13rem); } }

/* The bars, the slit and the flash exist only for the moving film. */
.bars { display: none; }

/* ---------- The reels ---------- */
/* Each reel is a title card: the scope bars (the venture's own ground) above and below, the picture
   filling the frame between them edge to edge, the name set large over it in the venture's own face,
   the slate small in a corner. Without the film every reel stands one screen tall, the same card. */
.reel {
  --bar: clamp(2.25rem, 7vh, 5rem);
  --fh: max(24rem, calc(100vh - 2 * var(--bar)));
  --r-ground: var(--ground);
  --ink-on: #F4F6F8; --soft-on: #DCE1E8;
  --r-display: var(--display); --r-text: var(--text);
  --go-bg: #F4F6F8; --go-ink: #0E1116;
  background: var(--r-ground); font-family: var(--r-text);
  display: grid; grid-template-rows: var(--bar) var(--fh) var(--bar);
}
@supports (height: 100svh) { .reel { --bar: clamp(2.25rem, 7svh, 5rem); --fh: max(24rem, calc(100svh - 2 * var(--bar))); } }
.frame { grid-row: 2; position: relative; height: var(--fh); overflow: clip; background: #000; color: var(--ink-on); }
.frame .still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame .shade { position: absolute; inset: 0; }
.frame::before, .frame::after { content: ""; display: none; }
.slate { position: absolute; z-index: 2; top: clamp(1rem, 3vh, 2rem); left: var(--pad); right: var(--pad); display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; font-family: var(--text); font-size: 1.0625rem; letter-spacing: 0.02em; color: var(--soft-on); }
.slate span:first-child { color: var(--ink-on); font-weight: 600; }
.card, .act { position: absolute; z-index: 2; display: grid; gap: 0.6rem; justify-items: start; }
.r-name { font-family: var(--r-display); line-height: 0.88; color: var(--ink-on); margin: 0; }
.r-tag { font-family: var(--r-display); font-size: clamp(1.375rem, 2.3vw, 2.25rem); line-height: 1.32; color: var(--ink-on); }
.r-copy { max-width: 40ch; font-size: 1.125rem; line-height: 1.45; color: var(--soft-on); }
.go { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.5rem; margin-top: 0.4rem; text-decoration: none; font-weight: 600; font-size: 1.0625rem; background: var(--go-bg); color: var(--go-ink); white-space: nowrap; }
@media (hover: hover) { .go:hover { text-decoration: underline; } }

/* Dame, in the new Dame brand: Manrope over Figtree, action green, chrome ink. The title stands
   bottom right over a shade from the right; the counter's light stays open at left. */
.reel-dame { --r-display: "Manrope", var(--text); --r-text: "Figtree", var(--text); --ink-on: #F5F5EE; --soft-on: #E4E8E2; --go-bg: #1E6B57; --go-ink: #FFFFFF; --r-ground: #1C2A2E; }
.reel-dame .still { object-position: 30% 55%; }
.reel-dame .shade { background: linear-gradient(270deg, rgb(20 30 33 / 0.9) 0%, rgb(20 30 33 / 0.72) 36%, rgb(20 30 33 / 0) 66%), linear-gradient(0deg, rgb(20 30 33 / 0.55), rgb(20 30 33 / 0) 40%), linear-gradient(180deg, rgb(20 30 33 / 0.82) 0%, rgb(20 30 33 / 0.5) 10%, rgb(20 30 33 / 0) 20%); }
.reel-dame .card { right: var(--pad); bottom: clamp(1.5rem, 5vh, 3.5rem); justify-items: end; text-align: right; max-width: 44rem; }
.reel-dame .r-name { font-weight: 800; letter-spacing: -0.045em; font-size: clamp(6rem, min(17vw, 34vh), 17rem); }
.reel-dame .r-tag { font-weight: 700; letter-spacing: -0.02em; }
.reel-dame .go { border-radius: 999px; }
.reel-dame .slate { justify-content: flex-start; }

/* Wild Rose Rates: quartz and slate, brass; its own system face. The title runs across the top in
   the low sun; the action sits bottom right on the oak. */
.reel-wrr { --r-display: "Segoe UI Variable Display", "Segoe UI", var(--text); --r-text: "Segoe UI Variable Text", "Segoe UI", var(--text); --ink-on: #F8F7F4; --soft-on: #EDE6DA; --go-bg: #D2AE66; --go-ink: #191E24; --r-ground: #191E24; }
.reel-wrr .still { object-position: 60% 70%; }
.reel-wrr .shade { background: linear-gradient(180deg, rgb(25 30 36 / 0.88) 0%, rgb(25 30 36 / 0.6) 34%, rgb(25 30 36 / 0) 58%), linear-gradient(315deg, rgb(25 30 36 / 0.85) 0%, rgb(25 30 36 / 0.5) 26%, rgb(25 30 36 / 0) 46%); }
.reel-wrr .slate { justify-content: flex-end; }
.reel-wrr .card { left: var(--pad); right: var(--pad); top: clamp(3.75rem, 10vh, 6rem); }
.reel-wrr .r-name { font-weight: 650; letter-spacing: -0.035em; font-size: clamp(3.75rem, min(9.6vw, 20vh), 10rem); }
.reel-wrr .r-tag { font-weight: 600; color: #E6C27A; }
.reel-wrr .act { right: var(--pad); bottom: clamp(1.5rem, 5vh, 3.5rem); justify-items: end; text-align: right; }
.reel-wrr .r-copy { max-width: 26ch; color: var(--ink-on); }
.reel-wrr .go { border-radius: 6px; }

/* 3DP YYC: monochrome, Instrument Sans, tracked wide as its own wordmark is. The title is centred on
   the dark ground above the parts; the action sits bottom left on the bare surface. */
.reel-tdp { --r-display: "Instrument Sans", var(--text); --r-text: "Instrument Sans", var(--text); --ink-on: #EBEBE8; --soft-on: #D6D6D2; --go-bg: #EBEBE8; --go-ink: #121212; --r-ground: #121212; }
.reel-tdp .still { object-position: 50% 80%; }
.reel-tdp .shade { background: linear-gradient(180deg, rgb(18 18 18 / 0.86) 0%, rgb(18 18 18 / 0.66) 40%, rgb(18 18 18 / 0) 60%), linear-gradient(45deg, rgb(18 18 18 / 0.85) 0%, rgb(18 18 18 / 0.45) 28%, rgb(18 18 18 / 0) 46%); }
.reel-tdp .card { left: var(--pad); right: var(--pad); top: clamp(3.75rem, 10vh, 6rem); justify-items: center; text-align: center; }
.reel-tdp .r-name { font-weight: 700; letter-spacing: 0.12em; margin-right: -0.12em; font-size: clamp(4rem, min(13vw, 24vh), 13rem); }
.reel-tdp .r-tag { font-weight: 450; }
.reel-tdp .act { left: var(--pad); bottom: clamp(1.5rem, 5vh, 3.5rem); }
.reel-tdp .r-copy { max-width: 34ch; }
.reel-tdp .slate { justify-content: space-between; }

/* Design Studio: chalk on board. The title is chalked bottom left on the bare slate,
   the hand line under it; the slate top left, clear of the monitor's light. */
.reel-ds { --r-display: "Cabin Sketch", var(--display); --r-text: "Atkinson Hyperlegible", var(--text); --r-ground: #0E1116; --ink-on: #E7EBF0; --soft-on: #CBD1DA; --go-bg: #D2C2FF; --go-ink: #0E1116; }
.reel-ds .still { object-position: 70% 50%; }
.reel-ds .shade { background: linear-gradient(60deg, rgb(14 17 22 / 0.92) 0%, rgb(14 17 22 / 0.66) 34%, rgb(14 17 22 / 0) 60%); }
.reel-ds .slate { justify-content: flex-start; }
.reel-ds .card { left: var(--pad); bottom: clamp(1.5rem, 5vh, 3.5rem); max-width: 60rem; }
.reel-ds .r-name { font-weight: 700; font-size: clamp(4rem, min(11vw, 22vh), 11rem); line-height: 0.92; }
.reel-ds .r-hand { font-family: "Caveat", cursive; font-weight: 600; font-size: clamp(1.9rem, 3.2vw, 3rem); color: #7CF3FF; }
.reel-ds .go { border-radius: 10px; }

/* Kylo: no colours of its own yet, so it borrows the house's. Everything sits in the frame's middle
   band, so the held, part-open frame still shows the whole card over a lit picture. */
.reel-kylo { --r-display: var(--display); --r-text: var(--text); --go-bg: transparent; --go-ink: #F4F6F8; --r-ground: #0E1116; }
.reel-kylo .still { object-position: 50% 45%; filter: saturate(0.9) brightness(1.08); }
.reel-kylo .shade { background: linear-gradient(90deg, rgb(10 14 22 / 0.35) 0%, rgb(10 14 22 / 0.78) 50%, rgb(10 14 22 / 0.35) 100%); }
.reel-kylo .card { inset: 0; place-content: center; justify-items: center; text-align: center; padding: 0 var(--pad); }
.reel-kylo .slate { position: static; justify-content: center; }
.reel-kylo .r-name { font-weight: 600; font-size: clamp(6rem, min(17vw, 26vh), 17rem); letter-spacing: -0.01em; }
.reel-kylo .go { box-shadow: inset 0 0 0 1px rgb(244 246 248 / 0.7); }

/* The phone: the frame is portrait, so each picture is cropped to its subject, the card stands at the
   foot over a shade from below, and the titles keep title-card scale. */
@media (max-width: 760px) {
  .reel { --bar: clamp(2rem, 5vh, 3rem); }
  @supports (height: 100svh) { .reel { --bar: clamp(2rem, 5svh, 3rem); } }
  .slate { flex-direction: column; gap: 0.1rem; }
  .reel .slate { justify-content: flex-start; }
  .reel-dame .card, .reel-ds .card, .reel .act { left: var(--pad); right: var(--pad); top: auto; bottom: clamp(1.25rem, 4vh, 2rem); justify-items: start; text-align: left; max-width: none; }
  .reel-wrr .card, .reel-tdp .card { left: var(--pad); right: var(--pad); bottom: auto; justify-items: start; text-align: left; }
  .reel-wrr .card, .reel-tdp .card { top: clamp(6.5rem, 18vh, 9rem); }
  .reel-wrr .act, .reel-tdp .act { justify-items: start; text-align: left; }
  .reel-dame .shade, .reel-ds .shade { background: linear-gradient(0deg, rgb(14 17 22 / 0.92) 0%, rgb(14 17 22 / 0.75) 40%, rgb(14 17 22 / 0) 72%), linear-gradient(180deg, rgb(14 17 22 / 0.85) 0%, rgb(14 17 22 / 0.55) 12%, rgb(14 17 22 / 0) 22%); }
  .reel-wrr .shade, .reel-tdp .shade { background: linear-gradient(180deg, rgb(20 22 26 / 0.88) 0%, rgb(20 22 26 / 0.78) 50%, rgb(20 22 26 / 0) 70%), linear-gradient(0deg, rgb(20 22 26 / 0.9) 0%, rgb(20 22 26 / 0.74) 34%, rgb(20 22 26 / 0) 52%); }
  .reel-dame .still { object-position: 38% 50%; }
  .reel-wrr .still { object-position: 62% 50%; }
  .reel-tdp .still { object-position: 44% 50%; }
  .reel-ds .still { object-position: 34% 50%; }
  .reel-kylo .still { object-position: 30% 50%; }
  .reel-kylo .shade { background: rgb(10 14 22 / 0.72); }
  .reel-dame .r-name { font-size: 30vw; }
  .reel-wrr .r-name { font-size: 15vw; }
  .reel-tdp .r-name { font-size: 16vw; letter-spacing: 0.08em; margin-right: 0; }
  .reel-ds .r-name { font-size: 16vw; }
  .reel-kylo .r-name { font-size: 30vw; }
  .reel-wrr .r-copy, .reel-tdp .r-copy { max-width: none; }
  .r-copy { font-size: 1.0625rem; }
}

/* ---------- The moving film (script on, motion allowed) ---------- */
/* The ground around the frame is the stage's, one colour film.js fades (--film-ground) from the bars'
   to each venture's and on to the next across every blink; the reels themselves are clear, so their
   switch at the cut never changes the colour on screen. */
html.js[data-film="on"] .film .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; background: var(--film-ground, var(--bar-ground)); }
html.js[data-film="on"] .layer-hero,
html.js[data-film="on"] .reel { position: absolute; inset: 0; height: auto; min-height: 0; }
html.js[data-film="on"] .reel { padding: 0; grid-template-rows: 1fr var(--fh) 1fr; opacity: 0; pointer-events: none; background: transparent; }
html.js[data-film="on"] .reel.on { opacity: 1; pointer-events: auto; }
html.js[data-film="on"] .reel.near:focus-within { opacity: 1; }
html.js[data-film="on"] .layer-hero.off { visibility: hidden; }
html.js[data-film="on"] .bars { display: block; position: absolute; inset: 0; z-index: 6; pointer-events: none; }
html.js[data-film="on"] .bars.off { display: none; }
.bar { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--film-ground, var(--bar-ground)); transform: scaleY(0); }
.bar-t { top: 0; transform-origin: 50% 0; }
.bar-b { bottom: 0; transform-origin: 50% 100%; }
.slit { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; opacity: 0; background: linear-gradient(90deg, rgb(74 143 224 / 0), #8FC0FF 22%, #FFFFFF 50%, #8FC0FF 78%, rgb(74 143 224 / 0)); }
.flash { position: absolute; inset: 0; opacity: 0; background: #CFE3FF; }
/* The hero's move into the first blink: the camera pushes in on the mark's line of light (its lit slot) (film.js
   moves .hero-film from its top left corner), the room darkens under the veil, and the line of light
   (.beam, drawn over the mark's own) swings flat to become the slit. One line, laid out once at the
   screen's width and moved only by transform and opacity. */
html.js[data-film="on"] .hero-film { transform-origin: 0 0; }
.veil { position: absolute; inset: 0; opacity: 0; background: #05070A; }
.beam { position: absolute; left: 0; top: 0; width: 100%; height: 3px; margin-top: -1.5px; opacity: 0; transform-origin: 50% 50%; background: linear-gradient(90deg, rgb(74 143 224 / 0), #8FC0FF 22%, #FFFFFF 50%, #8FC0FF 78%, rgb(74 143 224 / 0)); }
html.js[data-film="on"] .bars .flash.cut { z-index: 7; }
/* A reel opens out of the slit and closes back into it: the frame's clip runs from a line at its
   middle to the whole frame (--o, 0 to 1, written by film.js), and two lines of light ride its edges. */
html.js[data-film="on"] .frame { clip-path: inset(calc((1 - var(--o, 1)) * 50%) 0); }
html.js[data-film="on"] .frame .still { transform: scale(calc(1.07 - var(--k, 1) * 0.07)); }
html.js[data-film="on"] .frame::before, html.js[data-film="on"] .frame::after {
  display: block; position: absolute; left: 0; right: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, rgb(74 143 224 / 0), #8FC0FF 22%, #FFFFFF 50%, #8FC0FF 78%, rgb(74 143 224 / 0));
  opacity: var(--l, clamp(0, (1 - var(--o, 1)) * 1.6, 1));
}
/* Reel to reel (film.js FILM.steps): the blink is the stage's one set of bars (.bar-t, .bar-b, moved by
   translate) with a line of light on each one's inner edge (.edge-t, .edge-b, 2px, moved by translate,
   faded by opacity), never a reel's own frame, which stays whole (--o 1) with its lines out (--l 0).
   Under and between those bars the card is moved whole (the .reel's transform: pushed back, then slid
   off left), the leaving card drawn above the arriving one, with a depth shadow under the frame (--d,
   its strength), a box of its own since the frame's clip would cut a shadow of the frame's. */
.edge { position: absolute; left: 0; right: 0; height: 2px; opacity: 0; background: linear-gradient(90deg, rgb(74 143 224 / 0), #8FC0FF 22%, #FFFFFF 50%, #8FC0FF 78%, rgb(74 143 224 / 0)); }
.edge-t { top: 0; }
.edge-b { bottom: 0; }
html.js[data-film="on"] .reel.drawn { opacity: 1; }
html.js[data-film="on"] .reel.leaving { z-index: 1; }
html.js[data-film="on"] .reel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--fh); margin-top: calc(var(--fh) / -2);
  opacity: var(--d, 0); pointer-events: none;
  box-shadow: 0 3vh 9vh rgb(0 0 0 / 0.7), 0 1vh 2.5vh rgb(0 0 0 / 0.45);
}
/* Pushed back, the card stays full width and dims instead (--d, 0 to 1, written by film.js). */
html.js[data-film="on"] .reel.drawn .frame { filter: brightness(calc(1 - var(--d, 0) * 0.32)); }
/* Through the blink only the title stays (film.js KEEP, FILM.keepMargin): everything else on the card fades
   (--f, 1 by default), hidden outright once gone (.bare) so no faded link takes focus, and the name and the
   line under it move up or down only (--ky, a translateY) to stay inside the band between the lines. Both
   are written only while the card is drawn in a reel-to-reel window, so a card at rest is untouched. */
html.js[data-film="on"] .reel .slate, html.js[data-film="on"] .reel .r-copy, html.js[data-film="on"] .reel .acts { opacity: var(--f, 1); }
html.js[data-film="on"] .reel.bare .slate, html.js[data-film="on"] .reel.bare .r-copy, html.js[data-film="on"] .reel.bare .acts { visibility: hidden; }
/* A link that already holds focus keeps it: focusing into a reel takes the page there (film.js), and the film
   passes through the blink on its way, which would otherwise hide the link and drop the focus. */
html.js[data-film="on"] .reel.bare .acts a:focus { visibility: visible; }
html.js[data-film="on"] .reel.drawn .r-name, html.js[data-film="on"] .reel.drawn .r-tag { transform: translateY(var(--ky, 0px)); }
html.js[data-film="on"] .frame::before { top: 0; transform: translateY(calc((1 - var(--o, 1)) * var(--fh) / 2)); }
html.js[data-film="on"] .frame::after { bottom: 0; transform: translateY(calc((1 - var(--o, 1)) * var(--fh) / -2)); }
/* Each reel's title enters in its own venture's manner (--c, 0 to 1, written by film.js; 1 by default,
   so every title is whole without the film). */
html.js[data-film="on"] .reel-dame .r-name { translate: calc((1 - var(--c, 1)) * 3rem) 0; opacity: var(--c, 1); }
html.js[data-film="on"] .reel-dame .r-tag { opacity: var(--c, 1); }
html.js[data-film="on"] .reel-wrr .r-name { filter: blur(calc((1 - var(--c, 1)) * 14px)); opacity: calc(0.15 + var(--c, 1) * 0.85); }
html.js[data-film="on"] .reel-tdp .r-name, html.js[data-film="on"] .reel-tdp .r-tag { clip-path: inset(-0.2em calc((1 - var(--c, 1)) * 100%) -0.3em 0); }
html.js[data-film="on"] .reel-ds .r-hand { clip-path: inset(-0.3em calc((1 - var(--c, 1)) * 100%) -0.4em 0); }
html.js[data-film="on"] .reel-ds .r-name { opacity: calc(0.15 + var(--c, 1) * 0.85); }
html.js[data-film="on"] .reel-kylo .r-name { letter-spacing: calc(0.12em - var(--c, 1) * 0.13em); opacity: calc(0.3 + var(--c, 1) * 0.7); }

/* ---------- End credits ---------- */
.credits { padding: clamp(6rem, 14vh, 10rem) var(--pad) clamp(5rem, 10vw, 9rem); text-align: center; overflow: clip; }
.credits h2 { font-family: var(--display); font-weight: 520; font-size: clamp(2.5rem, 5vw, 4.75rem); letter-spacing: -0.01em; line-height: 1; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.roll { display: grid; gap: clamp(1.4rem, 3vh, 2.1rem); max-width: 58rem; margin: 0 auto; }
.roll > div { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: baseline; }
.roll dt { text-align: right; color: var(--muted); font-size: 1.125rem; letter-spacing: 0.02em; }
.roll dd { text-align: left; display: grid; gap: 0.15rem; }
.roll dd a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-family: var(--display); font-weight: 540; font-size: clamp(1.75rem, 2.6vw, 2.375rem); line-height: 1.3; text-decoration: none; justify-self: start; }
@media (hover: hover) { .roll dd a:hover { text-decoration: underline; } }
.roll dd span { color: var(--muted); font-size: 1.0625rem; }
.wink { margin-top: clamp(3rem, 7vh, 4.5rem); color: var(--muted); font-size: 1.125rem; }
html.js[data-film="on"] .roll { transform: translateY(calc((0.5 - var(--p, 0.5)) * 14vh)); }
@media (max-width: 760px) {
  .credits { text-align: left; }
  .roll > div { grid-template-columns: 1fr; gap: 0.2rem; }
  .roll dt { text-align: left; }
}

/* ---------- Contact: the closing title card ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 7rem); padding: clamp(5rem, 10vw, 9rem) var(--pad); max-width: 100rem; margin: 0 auto; }
.contact h2 { font-family: var(--display); font-weight: 560; font-size: clamp(2.75rem, 5.6vw, 5.5rem); line-height: 0.95; letter-spacing: -0.01em; margin-bottom: 1.5rem; }
.contact-intro p { color: var(--soft); max-width: 30rem; line-height: 1.5; }
.mail { color: var(--ink); }
.enquiry { display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: 1.0625rem; color: var(--ink); }
.field input, .field textarea { width: 100%; box-sizing: border-box; min-height: 52px; padding: 0.8rem 1rem; background: var(--panel); color: var(--ink); border: 1px solid var(--field); border-radius: 4px; font: inherit; font-size: 1.0625rem; }
.field textarea { resize: vertical; line-height: 1.45; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; border-color: var(--link); }
.enquiry button { justify-self: start; min-height: 52px; padding: 0 1.75rem; border: 0; border-radius: 4px; background: var(--ink); color: var(--ground); font: inherit; font-weight: 600; font-size: 1.0625rem; cursor: pointer; }
@media (hover: hover) { .enquiry button:hover { text-decoration: underline; } }
.privacy { color: var(--soft); font-size: 1rem; }
.privacy a { color: var(--ink); }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.foot { display: grid; gap: 1.25rem; padding: clamp(3rem, 6vw, 4.5rem) var(--pad); border-top: 1px solid var(--line); }
.foot img { width: 180px; height: auto; }
.foot p { color: var(--soft); max-width: 44rem; font-size: 1.0625rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }