/* ScrollFilm — the scroll-scrubbed delivery sequence.

   Two coordinate systems. The OUTER one is the page: a tall wrapper with a
   sticky child, which is the whole pinning mechanic. The INNER one is a fixed
   1920x1080 stage scaled to fit that sticky box, so every rule below can use
   flat pixel values from the storyboard and never has to think about the
   viewport. See inc/components/scroll-film.php for what was cut and why.

   The script writes transforms and opacity onto the [data-film-*] hooks and
   nothing else. Everything here is the resting state — which is also the
   finished state, because without the script the section is the closing frame
   held still. */

.kssk-film {
  --film-orange: #F57202;
  --film-orange-dark: #D96502;
  --film-navy: #262932;
  --film-green: #3A5A40;
  --film-grey: #6b7078;
  --film-face: #FEFEFE;
  --film-well: #F5F5F5;
  --film-rule: #ECEDF1;

  position: relative;
  background: var(--film-navy);
}

/* Height is the film's runtime, and it is the pace control.
   500vh over 14.6s was 34vh of scroll per second of film, which the client
   found far too fast. 900vh over the 20s the opening beat and the longer
   closing hold bring it to is 45vh/s - half again the distance for every beat,
   in nine screens rather than the twelve a true doubling wanted, which is a
   fairer commitment to ask before the cars.

   The two numbers are tied together: the closing reveals finish at t=17.25,
   and the next section starts climbing at 700/800 of the scroll. 17.25/20 is
   0.86, which lands before 0.875, so the frame is finished and held before
   anything covers it. Shortening the film without shortening this would bury
   the closing button, which is exactly what 900vh over 18s did. */
.kssk-film__scroll { height: 900vh; }

/* The band this film absorbed was navy over the system's one texture, and the
   join has to be invisible, so the pin carries the same surface. */
.kssk-film__pin {
  position: sticky;
  /* Below the sticky header, not under it. At top: 0 the header's 133px sat on
     the film at every scroll position: the frame's usable area was short by
     that much, its contents were centred 66px too high, and the top lines of
     the headline were simply behind the logo. The script measures the header
     because its height changes with the breakpoint and the language strip. */
  top: var(--film-top, 0px);
  height: calc(100vh - var(--film-top, 0px));
  height: calc(100svh - var(--film-top, 0px));
  overflow: hidden;
  background-color: var(--kssk-navy, var(--film-navy));
  background-image: var(--kssk-grid-texture, none);
  background-size: cover;
  background-position: center;
}

.kssk-film__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  margin: -540px 0 0 -960px;
  transform-origin: 50% 50%;
  overflow: hidden;
}

/* ---- Backdrop ---- */

.kssk-film__sky,
.kssk-film__vignette,
.kssk-film__glow { position: absolute; inset: 0; }

/* Deliberately paints nothing. It used to be an opaque gradient, which meant
   the section had its own backdrop instead of the navy grid the band it
   absorbed was built on - the pin's surface never showed through. The element
   stays as the stage's base layer; the surface is now the pin's. */
.kssk-film__sky { background: none; }
/* Atmosphere, not surface: both fade in as the film takes over, so the opening
   frame is the same flat navy grid the trust band was. */
.kssk-film__vignette { background: radial-gradient(ellipse at 50% 42%, rgb(0 0 0 / 0) 45%, rgb(0 0 0 / 0.4) 100%); opacity: 0; }
/* Starts dark, like the vignette. The script drives this up from 0 on the
   first frame, but the stylesheet loads first, and with no resting value the
   glow painted at full strength until then - an orange wash over the navy grid
   for as long as the script took to arrive, which is not what the opening
   frame is meant to look like. */
.kssk-film__glow { background: radial-gradient(ellipse 1050px 660px at 50% 56%, rgb(245 114 2 / 0.17), rgb(245 114 2 / 0.055) 45%, rgb(245 114 2 / 0) 72%); opacity: 0; }

/* The camera. Everything it flies through is inside; the closing frame is not,
   because the camera dives into that. */
/* perspective here, not on the site itself: the rotateX on the lift only reads
   as depth if its PARENT owns the vanishing point. */
.kssk-film__world { position: absolute; inset: 0; transform-origin: 0 0; perspective: 1700px; }

/* ---- Shared chrome ---- */

.kssk-film__chrome {
  height: 32px;
  background: var(--film-rule);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
}

.kssk-film__chrome > span { width: 8px; height: 8px; border-radius: 50%; background: #c9ccd4; }

.kssk-film__omnibox {
  flex: 1;
  max-width: 230px;
  height: 18px;
  margin: 0 auto;
  border-radius: 9px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 10px;
  color: #9aa0a8;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Beat 1: the laptop ---- */

.kssk-film__laptop { position: absolute; inset: 0; }

.kssk-film__lid {
  position: absolute;
  left: 610px;
  top: 398px;
  width: 700px;
  height: 444px;
  background: #14161c;
  border: 2px solid #3a3f4c;
  border-radius: 16px;
  padding: 12px;
}

.kssk-film__browser { width: 100%; height: 100%; border-radius: 7px; overflow: hidden; background: #fff; }

.kssk-film__page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 74px;
  gap: 18px;
}

.kssk-film__searchpill {
  width: 460px;
  height: 46px;
  border-radius: 23px;
  background: var(--film-well);
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--film-navy);
  white-space: pre;
}

.kssk-film__caret { width: 2px; height: 20px; background: var(--film-orange); margin-left: 2px; }

.kssk-film__result {
  width: 460px;
  box-sizing: border-box;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--film-rule);
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  opacity: 0;
}

.kssk-film__result b { display: block; font-family: var(--font-body); font-weight: 700; font-size: 12.5px; color: var(--film-navy); line-height: 1.3; }
.kssk-film__result span { display: block; font-family: var(--font-body); font-size: 10.5px; color: var(--film-grey); margin-top: 2px; }

.kssk-film__base {
  position: absolute;
  left: 530px;
  top: 844px;
  width: 860px;
  height: 22px;
  background: #171a21;
  border: 2px solid #3a3f4c;
  border-radius: 11px;
}

.kssk-film__base i { display: block; width: 130px; height: 7px; margin: 0 auto; background: #2a2e38; border-radius: 0 0 6px 6px; }

/* ---- Beat 2: the site, cropped to the booking flow ---- */

.kssk-film__site {
  position: absolute;
  left: 510px;
  top: 284px;
  width: 900px;
  height: 372px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transform-origin: 50% 60%;
  opacity: 0;
}

.kssk-film__site .kssk-film__chrome { height: 30px; background: #E9EAEE; }
.kssk-film__site .kssk-film__omnibox { max-width: 190px; height: 17px; border-radius: 4px; font-size: 9.5px; color: var(--film-grey); }

.kssk-film__nav { height: 48px; background: #fff; display: flex; align-items: center; padding: 0 24px; gap: 16px; }
.kssk-film__nav > div { display: flex; gap: 16px; margin-left: auto; }
.kssk-film__nav b { font-family: var(--font-body); font-weight: 700; font-size: 9.5px; letter-spacing: 1px; color: var(--film-navy); }
.kssk-film__nav b.is-on { color: var(--film-orange); }

.kssk-film__banner { position: relative; height: 250px; }
.kssk-film__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kssk-film__bannerhead {
  position: absolute;
  left: 32px;
  top: 34px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 29px;
  line-height: 1.12;
  color: #fff;
}

.kssk-film__capsule {
  position: absolute;
  right: 20px;
  bottom: 58px;
  margin: 0;
  background: rgb(0 0 0 / 0.125);
  backdrop-filter: blur(20px);
  padding: 7px 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  color: #fff;
}

.kssk-film__panel {
  position: absolute;
  left: 32px;
  top: 214px;
  width: 836px;
  height: 112px;
  box-sizing: border-box;
  background: #FCFCFC;
  border-radius: 4px;
  box-shadow: 0 4px 14.3px rgb(0 0 0 / 0.1);
  padding: 12px 16px;
}

.kssk-film__panelhead { margin: 0; font-family: var(--font-display); font-size: 16px; color: var(--film-navy); }
.kssk-film__fields { display: flex; gap: 10px; margin-top: 8px; align-items: center; }

.kssk-film__field {
  flex: 1;
  background: var(--film-well);
  border-radius: 4px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.kssk-film__field--wide { flex: 1.6; }
.kssk-film__field b { font-family: var(--font-body); font-weight: 700; font-size: 7.5px; letter-spacing: 1px; color: var(--film-grey); }
.kssk-film__field span { font-family: var(--font-body); font-size: 10.5px; color: var(--film-navy); line-height: 1; }

.kssk-film__book {
  width: 130px;
  height: 40px;
  flex: none;
  border-radius: 4px;
  background: var(--film-orange);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Beat 3: the car card ---- */

.kssk-film__card {
  position: absolute;
  left: 745px;
  top: 290px;
  width: 430px;
  height: 480px;
  box-sizing: border-box;
  background: var(--film-face);
  border-radius: 10px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  opacity: 0;
}

.kssk-film__cardcar { width: 100%; height: 205px; object-fit: contain; display: block; }
.kssk-film__cardname { margin: 10px 0 0; font-family: var(--font-display); font-size: 27px; color: var(--film-navy); }
.kssk-film__cardspec { margin: 5px 0 0; font-family: var(--font-body); font-size: 13px; color: var(--film-grey); }
.kssk-film__cardprice { display: flex; align-items: baseline; justify-content: space-between; margin-top: 18px; }
.kssk-film__cardprice b { font-family: var(--font-body); font-weight: 700; font-size: 21px; color: var(--film-navy); }
.kssk-film__cardprice span { font-family: var(--font-body); font-size: 11.5px; color: var(--film-grey); }

.kssk-film__cardbook {
  margin-top: auto;
  height: 54px;
  border-radius: 5px;
  background: var(--film-orange);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Beat 4: verification ---- */

.kssk-film__verify {
  position: absolute;
  left: 700px;
  top: 310px;
  width: 520px;
  height: 390px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 18px 55px rgb(0 0 0 / 0.3);
  padding: 36px;
  opacity: 0;
}

.kssk-film__verifyhead { margin: 0; font-family: var(--font-display); font-size: 28px; color: var(--film-navy); }
.kssk-film__verifybody { margin: 10px 0 0; font-family: var(--font-body); font-size: 12.5px; line-height: 1.55; color: var(--film-grey); }
.kssk-film__docs { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }

.kssk-film__doc {
  height: 62px;
  background: var(--film-well);
  border-radius: 4px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.kssk-film__doc > div { flex: 1; }
.kssk-film__doc b { display: block; font-family: var(--font-body); font-weight: 700; font-size: 13.5px; color: var(--film-navy); }
.kssk-film__doc span { display: block; font-family: var(--font-body); font-size: 10.5px; color: var(--film-grey); margin-top: 2px; }

.kssk-film__check {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--film-green);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.kssk-film__progresshead { display: flex; justify-content: space-between; margin-top: 26px; font-family: var(--font-body); }
.kssk-film__progresshead span { font-size: 12.5px; color: var(--film-navy); }
.kssk-film__progresshead b { font-weight: 700; font-size: 13px; color: var(--film-navy); font-variant-numeric: tabular-nums; }

.kssk-film__track { height: 8px; border-radius: 4px; background: var(--film-rule); margin-top: 9px; overflow: hidden; }
.kssk-film__track i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--film-orange); }

.kssk-film__confirm { margin: 14px 0 0; font-family: var(--font-body); font-size: 11.5px; line-height: 1.5; color: var(--film-grey); opacity: 0; }

.kssk-film__seal {
  position: absolute;
  left: 182px;
  top: 117px;
  width: 156px;
  height: 156px;
  border-radius: 50%;
  background: var(--film-green);
  box-shadow: 0 0 0 12px rgb(58 90 64 / 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
}

.kssk-film__seal b { font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: 0.5px; color: #fff; }

/* Ground shadows. Elliptical, blurred, sitting under whatever is floating. */
.kssk-film__siteshadow,
.kssk-film__cardshadow,
.kssk-film__verifyshadow {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0;
  background: radial-gradient(ellipse, rgb(0 0 0 / 0.42) 0%, rgb(0 0 0 / 0) 68%);
}

/* ---- The cursor ---- */

.kssk-film__cursor { position: absolute; left: 0; top: 0; opacity: 0; filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.4)); }
.kssk-film__cursor svg { display: block; }

.kssk-film__ripple {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid var(--film-orange);
  opacity: 0;
}

/* ---- The opening frame ----

   The trust band's words, keeping the placement they had when this was a
   section of its own. It lives in the pin, not the 1920x1080 board, because it
   is ordinary responsive copy and because it has to survive on a phone where
   the board never runs. */

.kssk-film__open {
  position: absolute;
  inset: 0;
  display: flex;
  /* Safe, not plain, centring. The frame is the viewport minus the header, and
     on a short window that is not much: at 1092x503 the pin is 370px and this
     column is 539, so it overflowed by 169 and, being centred, lost 85 off the
     TOP - the headline cut through the middle while the button below it sat in
     clear space. Safe centring aligns to the start when the content does not
     fit, so what goes is the tail and never the headline. */
  align-items: safe center;
  /* The band wrapper that used to supply this is gone, and band__inner only
     centres within a max-width - so on a phone the copy ran to both edges. */
  padding-inline: var(--page-gutter);
  z-index: 2;
  /* The film underneath is not interactive, but the one real link in here is. */
  pointer-events: none;
}

.kssk-film__open .kssk-trust__cta { pointer-events: auto; }

/* stretch, not the split's usual start: the dock has no content of its own, and
   the script measures its CENTRE to place the laptop. Left to collapse it would
   be a zero-height box at the top of the row and the laptop would dock there. */
.kssk-film__opengrid { width: 100%; align-items: stretch; }

/* Empty: the laptop plays here. Kept in the DOM because the script measures it. */
.kssk-film__dock { min-height: min(58vh, 520px); }

/* The opening column answers to the pin's HEIGHT as well as its width, which
   the trust band never had to do because it was a band in the flow and could
   be as tall as it liked. Every clamp reaches its design value at 900svh and
   only tightens below that, so a 1440x900 screen or larger renders exactly as
   it did; a 1366x650 laptop, or a window zoomed to 175%, gets a column that
   fits the frame instead of one cropped by it.

   Width-guarded to 900 because none of it applies below that: the film is a
   still there, the frame is as tall as its contents, and nothing is pinned. */
@media (min-width: 900px) {
  .kssk-film__open .kssk-trust { gap: clamp(18px, 8svh, var(--space-72)); }
  .kssk-film__open .kssk-trust__lede { gap: clamp(8px, 2.4svh, var(--space-21)); }
  .kssk-film__open .kssk-trust__stats { gap: clamp(24px, 8svh, var(--space-74)); }
  .kssk-film__open .kssk-trust__heading {
    font-size: min(var(--text-9xl), 9.5svh);
    line-height: min(var(--leading-69), 1.14em);
  }
}

/* Two columns whenever the film actually runs. .kssk-split drops to one column
   below 1024, which is right for a band in the flow and wrong for this frame:
   between 900 and 1023 the film is live, so the copy took the full width and
   the dock - the box the laptop flies into - went underneath it and off the
   bottom of the pin. Scoped to .is-live rather than a width query so the still
   fallback, which hides the dock, keeps the full width it is built for. */
.kssk-film.is-live .kssk-film__opengrid { grid-template-columns: 1fr 1fr; }

/* Below 720px of viewport the clamps above are not enough on their own. At
   1092x503 - a 1920 screen at 175% zoom - the pin is 370px and even a fully
   tightened stack is 456, so the frame top-aligned the column and cut the
   Learn more button off the bottom, with the headline hard against the header.

   So the stacked rhythm gives way to a compact one: the lede keeps the full
   width and the stats and the button share the row beneath it. That recovers a
   gap and the button's 48px, and it is the arrangement the space actually
   wants - at this height the column is wider than it is tall.

   nowrap on the stats matters. Left to wrap they stack in the narrower grid
   column and the row grows by a whole stat, which is 100px and the reason a
   first attempt at this measured worse than the stacked version it replaced. */
@media (min-width: 900px) and (max-height: 720px) {
  .kssk-film__open .kssk-trust {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: start;
    align-items: center;
    column-gap: var(--space-40);
    row-gap: clamp(14px, 4svh, var(--space-40));
    max-width: none;
  }

  .kssk-film__open .kssk-trust__lede { grid-column: 1 / -1; max-width: 560px; }
  .kssk-film__open .kssk-trust__stats { flex-wrap: nowrap; gap: clamp(20px, 5svh, 48px); }
  /* flex-start was for the stacked column; on this row it would hang the
     button off the top of the taller stat block. */
  .kssk-film__open .kssk-trust__cta { align-self: center; }
  .kssk-film__open .kssk-trust__heading { font-size: min(var(--text-9xl), 8svh); }
  .kssk-film__open .kssk-trust__body { font-size: 15px; line-height: 21px; }
}

/* ---- The closing frame ---- */

/* Anchored in the pin now, not the stage, so the origin is a fraction of the
   viewport rather than a coordinate in the 1920x1080 composition. */
.kssk-film__disc {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 0;
  height: 0;
  margin: 0;
  border-radius: 50%;
  background: var(--film-green);
}

.kssk-film__end { position: absolute; inset: 0; }
/* The supplied frame is square and the stage is not, so cover throws away a
   horizontal band and WHICH band depends on the aspect ratio. At 68% the keys
   sat in the upper third of a 16:9 screen but ran off the top of a wide, short
   one - a 2.6:1 window crops 1156px out of a square and the subject went with
   it. 58% holds them between roughly 37% and 45% of the frame height from
   16:9 out to 2.6:1, which clears the closing type either way. */
.kssk-film__endphoto { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; display: block; }
/* Weighted to the bottom, because that is where the words are. The top stays
   light enough to read the photograph the whole beat is built around. */
.kssk-film__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(38 41 50 / 0.24) 0%, rgb(38 41 50 / 0.10) 26%, rgb(38 41 50 / 0.58) 60%, rgb(38 41 50 / 0.88) 100%); }

.kssk-film__endinner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Landscape centres the block outright. It used to sit below centre so the
     keys owned the upper half, but 28svh of padding moves centred content down
     by half of it, which put the block's midpoint at 66% of the frame: 279px
     of empty photograph above it and 35 below at 1871x870, and only 23 below
     at 1280x720. That reads as shoved to the bottom, not placed. At 0 the
     midpoint is 50% and the space is 157 either side. The headline clears the
     keys; the logo now sits over the fob, which is the cost of centring a
     423px block in a 737px frame whose subject is in the upper third.

     Portrait still needs the offset - see the orientation query - because a
     square photograph cropped to a tall box shows the whole key at 26% to 53%
     of the frame, and a centred block would cover it. */
  padding-top: var(--film-end-drop, 0px);
  text-align: center;
  padding-inline: 24px;
}

.kssk-film__endhead {
  margin: 26px 0 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.27vw, 82px);
  line-height: 1.14;
  color: #fff;
  font-weight: 400;
}

/* Kinetic type: each line rides up out of its own overflow box. */
.kssk-film__mask { display: block; overflow: hidden; }
.kssk-film__mask > span { display: block; }

.kssk-film__endbody { margin: clamp(12px, 1.04vw, 20px) 0 0; font-family: var(--font-body); font-size: clamp(14px, 0.885vw, 17px); color: rgb(255 255 255 / 0.82); }
.kssk-film__endcta { margin: clamp(20px, 1.56vw, 30px) 0 0; }
.kssk-film__endlogo { height: clamp(28px, 2.19vw, 42px); width: auto; }

.kssk-film__endbutton {
  display: inline-block;
  background: var(--film-orange);
  border-radius: 4px;
  padding: clamp(14px, 0.94vw, 18px) clamp(26px, 2.19vw, 42px);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(13px, 0.78vw, 15px);
  letter-spacing: 1.2px;
  text-decoration: none;
}

.kssk-film__endbutton:hover { background: var(--film-orange-dark); color: #fff; }
.kssk-film__endbutton:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.kssk-film__endnote { margin: clamp(10px, 0.83vw, 16px) 0 0; font-family: var(--font-body); font-size: clamp(11px, 0.625vw, 12px); color: rgb(255 255 255 / 0.62); }

/* ---- Live vs still ----

   Without the script the section is the closing frame and nothing else: one
   screen tall, no pinning, no film layers. The script adds is-live, which is
   the only thing that turns the scroll mechanic on. A reader who asked their
   system not to animate keeps this state on purpose. */

.kssk-film:not(.is-live) .kssk-film__scroll { height: auto; }
.kssk-film:not(.is-live) .kssk-film__pin { position: static; height: auto; overflow: visible; }
.kssk-film:not(.is-live) .kssk-film__stage { display: none; }

/* The words become a normal band and the closing photograph a normal screen,
   stacked. A phone loses the film, not the content. */
.kssk-film:not(.is-live) .kssk-film__open {
  position: static;
  display: block;
  padding-block: var(--space-104, 104px);
  opacity: 1 !important;
  pointer-events: auto;
}
.kssk-film:not(.is-live) .kssk-film__dock { display: none; }
.kssk-film:not(.is-live) .kssk-film__end {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
}
.kssk-film:not(.is-live) .kssk-film__world,
.kssk-film:not(.is-live) .kssk-film__disc,
.kssk-film:not(.is-live) .kssk-film__glow { display: none; }

.kssk-film.is-live .kssk-film__end { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .kssk-film .kssk-film__scroll { height: auto; }
  .kssk-film .kssk-film__pin { position: static; height: auto; overflow: visible; }
  .kssk-film .kssk-film__stage { display: none; }
  .kssk-film .kssk-film__open {
    position: static;
    display: block;
    padding-block: var(--space-104, 104px);
    opacity: 1 !important;
    pointer-events: auto;
  }
  .kssk-film .kssk-film__dock { display: none; }
  .kssk-film .kssk-film__end {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
  }
  .kssk-film .kssk-film__world,
  .kssk-film .kssk-film__disc,
  .kssk-film .kssk-film__glow { display: none; }
  .kssk-film .kssk-film__end { opacity: 1 !important; }
  .kssk-film .kssk-film__endphoto { transform: none !important; }
  .kssk-film .kssk-film__end > *,
  .kssk-film .kssk-film__endinner > * { opacity: 1 !important; transform: none !important; }
  .kssk-film .kssk-film__mask > span { transform: none !important; opacity: 1 !important; }
}

/* Portrait is a different crop, not a smaller one. Cover on a tall box trims
   the sides instead of the top and bottom, so object-position stops moving the
   keys and they sit at the vertical centre. The words drop below them, and the
   headline can be larger than a width-based clamp would allow because it has a
   whole portrait screen to sit in. */
@media (orientation: portrait) {
  /* CENTRED OUTRIGHT, on the client's instruction.

     This offset has been walked down twice. 46svh put the block's midpoint at
     73% of the frame - 469px of empty photograph above it and 81px below,
     which read as shoved to the bottom rather than placed. 30svh sat it at
     65%: clear of the keys, but still visibly low, which is what the client
     was looking at when they asked for the words and the mark to be centred
     on a phone.

     At 0 the midpoint is the frame's own, and the block reads as placed rather
     than parked. The cost is the one the landscape rule above already accepts
     and names: a centred block on a portrait crop sits over the fob, because
     the photograph's subject is in the upper half and the words are taller
     than the space left under it. Centred is what was asked for, and the
     scrim under the block is what keeps the type readable across it. */
  .kssk-film__endinner { --film-end-drop: 0px; }
  .kssk-film__endhead { font-size: clamp(34px, 8.4vw, 66px); }
  .kssk-film__endbody { font-size: clamp(15px, 2.2vw, 19px); }
  .kssk-film__endbutton { font-size: clamp(13px, 1.7vw, 16px); padding: 16px 34px; }
  .kssk-film__endnote { font-size: clamp(11px, 1.4vw, 13px); }
  .kssk-film__endlogo { height: clamp(30px, 4.6vw, 44px); }
}


/* ---- Handing the page back ----

   The film does not scroll away at the end; it holds, and the page slides up
   over it. The pin is still stuck through the last screen of the scroll
   container, so pulling the following section up by one screen makes it climb
   over a held frame rather than shove it off the top.

   Scoped to is-live: with the film off, the section is two ordinary stacked
   blocks and an overlap would simply eat the closing photograph. */
/* EVERY following section is lifted, not just the next one, and the film is
   left alone. Giving the film its own stacking context was the wrong way round:
   a positioned element paints above static ones, so the held frame showed
   through the gap between two later bands. */
.kssk-film.is-live ~ * {
  position: relative;
  z-index: 1;
}

/* Only the section directly after it climbs over the held frame, and it is
   pulled up by exactly the PIN's height - not a whole viewport. Once the pin
   started below the header those two stopped being the same number, and
   over-pulling made the next band start covering the closing frame before its
   headline had finished revealing. */
.kssk-film.is-live + * {
  margin-top: calc((100vh - var(--film-top, 0px)) * -1);
  margin-top: calc((100svh - var(--film-top, 0px)) * -1);
}