/* ==========================================================================
   NEXIFY STUDIO — one-screen hero
   Layout system (STUDY.md section 9):
   the reference is a 1592 x 988 artboard. One design unit --u maps one
   reference pixel to the screen, so every element below is placed at its
   measured reference coordinate as calc(N * var(--u)).
   ========================================================================== */

:root {
  /* viewport units used by the layout; svh keeps the artboard stable on mobile */
  --vw: 1vw;
  --vh: 1vh;          /* stage scale (fallback) */
  --vh-fill: 1vh;     /* hero / plate height (fallback) */
  --u: min(calc(100 * var(--vw) / 1592), calc(100 * var(--vh) / 988));

  /* palette (STUDY.md section 8) */
  --white: #fafafa;
  --ink: #111111;
  --offwhite: #f0eeec;
  --grey-body: #c6c5c5;
  --grey-contact: #cecece;
  --grey-rating: #bdbdbd;
  --rule: #8e8e8e;
  --hairline: rgba(255, 255, 255, 0.11);

  /* families (picked by specimen tests) */
  --font-display-light: "Lexend Tera", "Lexend", system-ui, sans-serif;   /* "hard" */
  --font-display-heavy: "Lexend Zetta", "Lexend", system-ui, sans-serif;  /* "part" */
  --font-headline: "Lexend Giga", "Lexend", system-ui, sans-serif;        /* headline */
  --font-ui: "Outfit", system-ui, sans-serif;                             /* UI + body */
  --font-mono: "Google Sans Code", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

@supports (height: 1svh) {
  :root { --vh: 1svh; }
}
@supports (height: 1dvh) {
  :root { --vh-fill: 1dvh; }
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  background: #030303;
  overflow-x: hidden;   /* fallback for old browsers */
  overflow-x: clip;     /* no sideways scroll, and unlike hidden it keeps position: sticky working */
}

body {
  color: var(--white);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Hero: full viewport, plate covers it, stage centred inside
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  width: 100%;
  height: calc(100 * var(--vh-fill));
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* z0 — background plate */
.plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 0;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* the 1592 x 988 artboard */
.stage {
  position: relative;
  z-index: 1;
  width: calc(1592 * var(--u));
  height: calc(988 * var(--u));
  overflow: hidden;              /* clips the "p" descender at the bottom edge */
}

.stage > *,
.header > * { position: absolute; margin: 0; }

/* --------------------------------------------------------------------------
   Giant words (z1 "hard", z3 "part")
   Each word box covers the whole stage so the light gradients can be written
   in stage coordinates; the text is clipped out of the gradient.
   -------------------------------------------------------------------------- */
.giant {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 1;
  white-space: nowrap;
  font-kerning: none;
  font-synthesis: none;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  user-select: none;
  pointer-events: none;
}

/* "hard": Light, dark warm grey, lit by the spotlight cone (apex above the
   top edge on the beam axis, so the lit band widens towards the baseline) */
.giant--hard {
  z-index: 1;
  font-family: var(--font-display-light);
  font-weight: 300;
  font-size: calc(389.19 * var(--u));
  padding-left: calc(7.25 * var(--u));    /* ink: h starts at x 79 */
  padding-top: calc(144.46 * var(--u));   /* baseline y 484, ascender top y 196 */
  background-image: conic-gradient(
    from 146deg at calc(705 * var(--u)) calc(-75 * var(--u)),
    #353231 0deg,
    #3d3b3a 5deg,
    #4a4847 9deg,
    #605e5d 13deg,
    #6e6c6b 17deg,
    #82807f 22deg,
    #9a9897 29deg,
    #a5a3a2 34deg,
    #9a9897 39deg,
    #82807f 46deg,
    #6e6c6b 51deg,
    #605e5d 55deg,
    #4a4847 59deg,
    #3d3b3a 63deg,
    #353231 68deg,
    #353231 360deg
  );
}
.giant--hard .g-h { letter-spacing: -0.2422em; }
.giant--hard .g-a { letter-spacing: -0.2993em; }
.giant--hard .g-r { letter-spacing: -0.1799em; }

/* "part": Black, tight tracking; the "p" catches the pool of light under the
   chair and the word falls off to dark towards the "t" */
.giant--part {
  z-index: 3;
  font-family: var(--font-display-heavy);
  font-weight: 900;
  font-size: calc(288.57 * var(--u));
  padding-left: calc(817 * var(--u));     /* ink: p stem starts at x 875 */
  padding-top: calc(676.5 * var(--u));    /* baseline y 929, t top y 727 */
  background-image: radial-gradient(
    circle at calc(895 * var(--u)) calc(845 * var(--u)),
    #868584 0,
    #7a7877 calc(56 * var(--u)),
    #6c6a69 calc(100 * var(--u)),
    #5d5b5a calc(160 * var(--u)),
    #4e4c4b calc(215 * var(--u)),
    #393736 calc(290 * var(--u)),
    #2d2b2a calc(370 * var(--u)),
    #282625 calc(440 * var(--u))
  );
}
.giant--part .g-p { letter-spacing: -0.2426em; }
.giant--part .g-a { letter-spacing: -0.3708em; }
.giant--part .g-r { letter-spacing: -0.4123em; }

/* --------------------------------------------------------------------------
   z2 — the chair. Measured bounding box: x 565-946, y 371-893.
   Tune left / top / width here once the asset is final.
   -------------------------------------------------------------------------- */
.chair {
  z-index: 2;
  left: calc(565 * var(--u));
  top: calc(371 * var(--u));
  width: calc(381 * var(--u));
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   z4 — interface
   -------------------------------------------------------------------------- */
.header,
.contact,
.headline,
.intro,
.btn,
.rating { z-index: 4; }

.header {
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100 * var(--u));
}

/* logo: slash x 63-94 / y 39-58, wordmark x 119-250 / cap y 40-54 */
.logo {
  left: calc(62 * var(--u));
  top: calc(36 * var(--u));
  width: calc(190 * var(--u));
  height: calc(24 * var(--u));
}
.logo > * { position: absolute; }
.logo__slash {
  left: 0;
  top: calc(2 * var(--u));
  width: calc(34 * var(--u));
  height: calc(22 * var(--u));
  overflow: visible;
}
.logo__slash line {
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
}
.logo__text {
  left: calc(55 * var(--u));
  top: calc(1.36 * var(--u));
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: calc(21.43 * var(--u));
  line-height: 1;
  letter-spacing: 0.1108em;
  color: #fff;
  white-space: nowrap;
}

/* nav pill: x 584-1040, y 24-79 */
.nav {
  left: calc(584 * var(--u));
  top: calc(24 * var(--u));
  width: calc(457 * var(--u));
  height: calc(56 * var(--u));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: calc(18.87 * var(--u)) calc(26.8 * var(--u)) 0 calc(26 * var(--u));
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.35);
}
.nav a {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(17.39 * var(--u));
  line-height: 1;
  letter-spacing: 0.025em;
  color: var(--white);
  white-space: nowrap;
}
/* "Gallery" is set without tracking in the reference (its G and y run wide) */
.nav a:nth-child(2) { letter-spacing: 0; }

/* Book pill: x 1390-1530, y 25-78 */
.book {
  left: calc(1390 * var(--u));
  top: calc(25 * var(--u));
  width: calc(141 * var(--u));
  height: calc(54 * var(--u));
  border-radius: 999px;
  background: var(--offwhite);
  color: var(--ink);
}
.book__label {
  position: absolute;
  left: calc(26 * var(--u));
  top: calc(17.96 * var(--u));
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: calc(17.86 * var(--u));
  line-height: 1;
  letter-spacing: 0.056em;
  white-space: nowrap;
}
.book__icon {
  position: absolute;
  left: calc(90 * var(--u));
  top: calc(5.5 * var(--u));
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  border-radius: 50%;
  background: #000;
}
.book__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

/* contact line: dot x 1225, phone x 1252, rule x 1364, hours x 1388-1530 */
.contact {
  left: calc(1225 * var(--u));
  top: calc(118 * var(--u));
  width: calc(306 * var(--u));
  height: calc(20 * var(--u));
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: calc(15.94 * var(--u));
  line-height: 1;
  letter-spacing: -0.037em;
  color: var(--grey-contact);
  white-space: nowrap;
}
.contact > * { position: absolute; }
.contact__dot {
  left: calc(0.75 * var(--u));
  top: calc(5.25 * var(--u));
  width: calc(8.5 * var(--u));
  height: calc(8.5 * var(--u));
  border-radius: 50%;
  background: #f4f4f4;
}
.contact__phone { left: calc(27 * var(--u)); top: calc(2.13 * var(--u)); }
.contact__divider {
  left: calc(139 * var(--u));
  top: calc(1 * var(--u));
  width: max(1px, calc(1 * var(--u)));
  height: calc(18 * var(--u));
  background: var(--rule);
}
.contact__hours { left: calc(163 * var(--u)); top: calc(2.13 * var(--u)); }

/* headline: baselines y 139 / 174 */
.headline {
  left: calc(62 * var(--u));
  top: calc(109.71 * var(--u));
  font-family: var(--font-headline);
  font-size: calc(31.43 * var(--u));
  line-height: calc(35 * var(--u));
  font-weight: 300;
  color: #fbfbfb;
  white-space: nowrap;
}
.headline__light,
.headline__bold { display: block; }
.headline__light { font-weight: 300; letter-spacing: -0.1233em; }
.headline__bold { position: relative; top: calc(1 * var(--u)); font-weight: 800; letter-spacing: -0.1114em; color: #fff; }

/* body copy: baselines y 728 / 755 */
.intro {
  left: calc(62.5 * var(--u));
  top: calc(707.26 * var(--u));
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: calc(19.57 * var(--u));
  line-height: calc(27 * var(--u));
  color: var(--grey-body);
  white-space: nowrap;
  text-indent: calc(-1 * var(--u));
}
.intro strong {
  margin-left: calc(-2 * var(--u));
  font-weight: 500;
  letter-spacing: -0.0135em;
  color: #fcfcfc;
}

/* buttons */
.btn {
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
/* primary: x 63-278, y 799-857; label ink from x 88, arrow x 245-258.
   Flex keeps the arrow after the label even when small sizes render wider. */
.btn--primary {
  left: calc(63 * var(--u));
  top: calc(799 * var(--u));
  width: calc(216 * var(--u));
  height: calc(59 * var(--u));
  display: flex;
  align-items: flex-start;
  gap: calc(7.2 * var(--u));
  padding: calc(22.83 * var(--u)) 0 0 calc(24 * var(--u));
  background: var(--offwhite);
  color: var(--ink);
}
.btn--primary .btn__label {
  font-size: calc(15.71 * var(--u));
  letter-spacing: -0.0141em;
}
.btn__arrow {
  flex: none;
  margin-top: calc(-0.33 * var(--u));
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* ghost: x 294-437, y 798.5-858.5 */
.btn--ghost {
  left: calc(294 * var(--u));
  top: calc(798.5 * var(--u));
  width: calc(143 * var(--u));
  height: calc(60 * var(--u));
  border: max(1px, calc(1.5 * var(--u))) solid #c0c0bf;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: calc(20.71 * var(--u)) 0 0 calc(2.3 * var(--u));   /* label ink x 329, cap top y 823 */
}
.btn--ghost .btn__label {
  font-size: calc(16.43 * var(--u));
  letter-spacing: 0.0068em;
}

/* rating line: y 887-902 */
.rating {
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  color: var(--grey-rating);
  white-space: nowrap;
}
.rating > * { position: absolute; }
.rating__stars {
  left: calc(63 * var(--u));
  top: calc(888.5 * var(--u));
  width: calc(91 * var(--u));
  height: calc(12 * var(--u));
  fill: #f7f7f6;
}
.rating__score {
  left: calc(172 * var(--u));
  top: calc(888.39 * var(--u));
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: calc(14.49 * var(--u));
  line-height: 1;
  letter-spacing: 0.046em;
}
.rating__divider {
  left: calc(230 * var(--u));
  top: calc(888 * var(--u));
  width: max(1px, calc(1 * var(--u)));
  height: calc(15 * var(--u));
  background: var(--rule);
}
.rating__clients {
  left: calc(246 * var(--u));
  top: calc(889.33 * var(--u));
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: calc(13.89 * var(--u));
  line-height: 1;
  letter-spacing: 0.0296em;
  text-transform: uppercase;
}

/* ==========================================================================
   Scroll film
   Default (no JS, or prefers-reduced-motion): the static hero, then the
   chapters as plain sections. js/film.js adds .film-on to <html> to switch
   to the pinned, scroll-scrubbed film.
   ========================================================================== */

.film { display: none; }

/* nav item highlight (driven by the active chapter) */
.nav a { position: relative; z-index: 0; }
.nav a::before {
  content: "";
  position: absolute;
  inset: calc(-10 * var(--u)) calc(-15 * var(--u));
  border-radius: 999px;
  background: rgba(240, 238, 236, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}
.nav a.is-active::before { opacity: 1; }
.nav a.is-active { color: #fff; }

/* ---- chapters as plain sections (default) ------------------------------- */
.chapters {
  position: relative;
  background: #030303;
  padding: 6vh 0 12vh;
}
.chapter {
  width: min(100% - 10vw, 46rem);
  margin: 0 auto;
  padding: 10vh 0;
  border-top: 1px solid var(--hairline);
}
.chapter__eyebrow {
  margin: 0 0 1.2em;
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 0.9vw, 0.9rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-rating);
}
.chapter__title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.11em;
  color: #fbfbfb;
}
.chapter__light { display: block; font-weight: 300; }
.chapter__bold { display: block; font-weight: 800; color: #fff; }
.chapter__body {
  margin: 1.1em 0 0;
  max-width: 30em;
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 1.25vw, 1.2rem);
  line-height: 1.42;
  color: var(--grey-body);
}
.chapter__body a { color: #fcfcfc; }
.chapter__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 1.6em;
  padding: 1.15em 1.6em;
  border-radius: 999px;
  background: var(--offwhite);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(0.85rem, 1vw, 1rem);
  line-height: 1;
}
.chapter__cta svg {
  width: 0.9em;
  height: 0.9em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- film on ------------------------------------------------------------- */
.film-on .film-track {
  position: relative;
  /* scroll length: the 15 s film and the HARD / PART slide-in (520vh), a short
     hold on the finished composition (40vh), then the services section slides
     up over the pinned hero (the last 100vh plus the pin) */
  height: 760vh;
}
/* the content sections overlap the end of the pinned hero; as they cover it,
   the hero recedes a touch and falls into the dark (js/film.js: --hero-exit) */
.film-on .sections {
  margin-top: calc(-100 * var(--vh-fill));
  z-index: 3;
}
.film-on .hero {
  scale: calc(1 - 0.05 * var(--hero-exit, 0));
  transform-origin: 50% 35%;
}
.film-on .pin::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #030303;
  opacity: calc(0.78 * var(--hero-exit, 0));
  pointer-events: none;
}
.mo-reduce .hero { scale: none; }
.film-on .pin {
  position: sticky;
  top: 0;
  height: calc(100 * var(--vh-fill));
  overflow: hidden;
}

/* The start frame was captured from a 1920x1080 window, where the 1592-unit
   stage is 1740 px wide. So the film box is 1756.6 x 988 units (16:9), centred
   on the stage: frame 0 lands exactly on the static scene at any window size. */
.film-on .film {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(1756.6 * var(--u));
  height: calc(988 * var(--u));
  /* The film's LAST frame was rendered to the site's composition (end image).
     Image registration of that frame against the composition gives the small
     correction below (offset in reference units, scale), so the film's final
     chair sits exactly under the layered chair cut-out.
     hero-film-1080.mp4 last frame vs the end image: scale 1.018, +16 / +16 px
     of the 1080-px frame = 14.64 / 14.64 units (988 units = 1080 px). */
  --film-s: 1.018;
  --film-dx: 14.64;
  --film-dy: 14.64;
  transform: translate(-50%, -50%) translate(calc(var(--film-dx, 0) * var(--u)), calc(var(--film-dy, 0) * var(--u))) scale(var(--film-s, 1));
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  /* soft edges so the film melts into the plate behind it (the plate is the
     backdrop, so the top seam left by the alignment offset blends, not darkens) */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5%, #000 98.5%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 2.5%, #000 98.5%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 1.5%, #000 98.5%, transparent 100%),
              linear-gradient(to bottom, transparent 0, #000 2.5%, #000 98.5%, transparent 100%);
  mask-composite: intersect;
}
/* the plate stays behind the film as a backdrop, so the few pixels the
   alignment offset uncovers (top edge) show the same spotlight, not black */
.film-on .hero {
  background: #030303 url("../assets/plate.jpg") 50% 50% / cover no-repeat;
}

/* Scroll timeline (values driven by js/film.js; the defaults are the entrance
   state, so nothing reading the brand can flash before the script runs):
   only the film's back-of-chair frame shows, then HARD slides in from the left,
   PART from the right, the layered chair and the interface fade in at the end. */
.film-on {
  --hard-x: -200vw;
  --part-x: 200vw;
  --chair-o: 0;
  --ui: 0;
}
.film-on .stage { overflow-x: visible; overflow-y: clip; }   /* words slide in from beyond the stage; descender still clipped */
.film-on .plate { visibility: hidden; }                       /* the film is the background */
.film-on .giant--hard { transform: translate3d(var(--hard-x), 0, 0); will-change: transform; }
.film-on .giant--part { transform: translate3d(var(--part-x), 0, 0); will-change: transform; }
.film-on .chair {
  opacity: var(--chair-o);
  /* after the sequence the chair looks toward the cursor (js/film.js: --chair-ry):
     a horizontal turn about its pedestal only, no tilt, no shift; at rest
     (--chair-ry 0, the whole scroll sequence) this is an identity transform */
  transform: perspective(calc(1600 * var(--u))) rotateY(calc(var(--chair-ry, 0) * 1deg));
  transform-origin: 58% 60%;
}
/* the film cross-fades to the identical chair-free plate behind it once the
   chair is free to turn, and comes straight back when scrolling into the sequence */
.film-on .film { transition: opacity 0.3s ease; }
.film-on.hero-live .film { opacity: 0; transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1); }
.film-on .contact,
.film-on .headline,
.film-on .intro,
.film-on .btn,
.film-on .rating,
.film-on .logo__text { opacity: var(--ui); }
.film-on.ui-off .contact,
.film-on.ui-off .headline,
.film-on.ui-off .intro,
.film-on.ui-off .btn,
.film-on.ui-off .rating { visibility: hidden; }
/* the old film's chapter overlays are not part of this sequence */
.film-on .chapters { display: none !important; }

/* chapters overlay the pinned film, in the headline's place, in its type */
.film-on .chapters {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 0;
  background: none;
  pointer-events: none;
}
.film-on .chapter {
  position: absolute;
  left: calc((100% - 1592 * var(--u)) / 2 + 62 * var(--u));
  top: calc((100% - 988 * var(--u)) / 2 + 112 * var(--u));
  width: max(calc(430 * var(--u)), 15rem);
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform;
}
.film-on .chapter.is-active { pointer-events: auto; }
.film-on .chapter__eyebrow {
  margin-bottom: calc(14 * var(--u));
  font-size: max(calc(13.89 * var(--u)), 0.7rem);
  letter-spacing: 0.06em;
}
.film-on .chapter__title {
  font-size: max(calc(31.43 * var(--u)), 1.25rem);
  line-height: 1.11;
  letter-spacing: -0.1em;
}

/* portrait windows: the 16:9 film is letterboxed, so the chapters sit in the
   free band below it instead of over the chair */
@media (max-aspect-ratio: 4/5) {
  .film-on .chapter {
    left: 6vw;
    top: calc((100% + 988 * var(--u)) / 2 + 4vh);
    width: 88vw;
  }
}
.film-on .chapter__body {
  margin-top: calc(16 * var(--u));
  max-width: none;
  font-size: max(calc(17.5 * var(--u)), 0.85rem);
  line-height: 1.42;
}
.film-on .chapter__cta {
  margin-top: calc(22 * var(--u));
  padding: max(calc(21 * var(--u)), 0.9rem) max(calc(24 * var(--u)), 1.1rem);
  font-size: max(calc(15.71 * var(--u)), 0.8rem);
}

/* ==========================================================================
   Phones: no film (index.html / js/film.js leave .film-on off on portrait or
   small touch screens). The hero is the still final page, re-laid on a tall
   390 x 844 artboard that fills the screen (--pu = one artboard px). The
   spotlight plate covers the whole screen behind it. Inside the artboard the
   giant words keep their own gold lighting: each word box keeps its desktop
   size in --u and moves as one piece, so text and light stay together.
   ========================================================================== */
@media (max-aspect-ratio: 4/5) {
  html:not(.film-on) .stage {
    --pu: min(calc(100 * var(--vw) / 390), calc(100 * var(--vh) / 844));
    --u: calc(0.392 * var(--pu));            /* NEXIFY ink = 351 of the 390 px width */
    width: calc(390 * var(--pu));
    height: calc(844 * var(--pu));
  }
  html:not(.film-on) .giant { width: calc(1592 * var(--u)); height: calc(988 * var(--u)); }
  /* NEXIFY: ink x 20-370, cap top y 196 */
  html:not(.film-on) .giant--hard { left: calc(-11.6 * var(--pu)); top: calc(119 * var(--pu)); }
  /* STUDIO: in front of the chair's base, ink right edge x 370, cap top y 540 */
  html:not(.film-on) .giant--part { left: calc(-238.3 * var(--pu)); top: calc(255 * var(--pu)); }
  /* the chair, centred between the two words */
  html:not(.film-on) .chair { left: calc(64 * var(--pu)); top: calc(236 * var(--pu)); width: calc(262 * var(--pu)); }

  html:not(.film-on) .headline {
    left: calc(20 * var(--pu)); top: calc(98 * var(--pu));
    font-size: calc(27 * var(--pu)); line-height: calc(30 * var(--pu));
  }
  html:not(.film-on) .contact {
    left: calc(20 * var(--pu)); top: calc(168 * var(--pu));
    width: calc(330 * var(--pu)); height: calc(16 * var(--pu));
    font-size: calc(13.5 * var(--pu));
  }
  html:not(.film-on) .contact__dot { left: calc(0.6 * var(--pu)); top: calc(4 * var(--pu)); width: calc(7.3 * var(--pu)); height: calc(7.3 * var(--pu)); }
  html:not(.film-on) .contact__phone { left: calc(20 * var(--pu)); top: calc(1.5 * var(--pu)); }
  html:not(.film-on) .contact__divider { left: calc(125 * var(--pu)); top: calc(0.5 * var(--pu)); height: calc(15 * var(--pu)); }
  html:not(.film-on) .contact__hours { left: calc(140 * var(--pu)); top: calc(1.5 * var(--pu)); }

  html:not(.film-on) .intro {
    left: calc(20 * var(--pu)); top: calc(648 * var(--pu)); width: calc(350 * var(--pu));
    font-size: calc(15 * var(--pu)); line-height: calc(21.5 * var(--pu));
    white-space: normal; text-indent: 0;
  }
  html:not(.film-on) .intro br { display: none; }

  html:not(.film-on) .btn--primary {
    left: calc(20 * var(--pu)); top: calc(728 * var(--pu));
    width: calc(206 * var(--pu)); height: calc(50 * var(--pu));
    gap: calc(7 * var(--pu)); padding: calc(18 * var(--pu)) 0 0 calc(20 * var(--pu));
  }
  html:not(.film-on) .btn--primary .btn__label { font-size: calc(14.5 * var(--pu)); }
  html:not(.film-on) .btn__arrow { width: calc(12.5 * var(--pu)); height: calc(12.5 * var(--pu)); }
  html:not(.film-on) .btn--ghost {
    left: calc(238 * var(--pu)); top: calc(728 * var(--pu));
    width: calc(132 * var(--pu)); height: calc(50 * var(--pu));
    border-width: max(1px, calc(1.3 * var(--pu))); padding: calc(17 * var(--pu)) 0 0;
  }
  html:not(.film-on) .btn--ghost .btn__label { font-size: calc(15 * var(--pu)); }

  html:not(.film-on) .rating__stars { left: calc(20 * var(--pu)); top: calc(801 * var(--pu)); width: calc(78 * var(--pu)); height: calc(10.3 * var(--pu)); }
  html:not(.film-on) .rating__score { left: calc(112 * var(--pu)); top: calc(800 * var(--pu)); font-size: calc(13 * var(--pu)); }
  html:not(.film-on) .rating__divider { left: calc(160 * var(--pu)); top: calc(799 * var(--pu)); height: calc(14 * var(--pu)); }
  html:not(.film-on) .rating__clients { left: calc(174 * var(--pu)); top: calc(801 * var(--pu)); font-size: calc(12 * var(--pu)); }
}