/* ==========================================================================
   THE FULL LEAD - Giovani's 2026-08-12 mockup, built with Kyle's real assets.

   What the mockup carries and this build keeps: logo top-left in the nav
   (site-shell already puts it there), a left-aligned editorial fold - gold
   eyebrow, two-line serif claim with the second line's last word in italic,
   one sentence of support, a solid and an outline button - over the hero
   footage; a "Trusted by ambitious brands" strip with the marks scrolling
   automatically; and a Featured Work card rail wired to the existing
   case-study layer.

   What the mockup carries and Giovani explicitly cut: the scroll indicator
   and the "Based in Orlando / available worldwide" badge ("those things kind
   of make it look stupid"). Not built.

   The mockup's static cameraman photo is not Kyle's asset; his own reel
   footage is, so the fold keeps the self-hosted hero loop and puts a left
   gradient under the copy. No opening roll on this variant - the page loads
   straight into the fold (the deploy script never sets kls-opening).
   ========================================================================== */

/* The AUTOMATIC roll is this variant's opening now - Giovani, round three:
   "let's actually just scrap the manual scroll... the full lead version, the
   one with the automatic [roll], that's the one that we're gonna go for."
   Only the scroll build's runway stays banished. */
.is-lead .kls-roll-runway { display: none !important; }

/* No centred wordmark, at any point - round twelve's "the logo flashes in
   the center for a second, we need to remove that" stands even with the
   roll back (round thirteen): the drum plays its opening without the mark,
   and the nav-brand top-left is the only logo this build ever shows. */
.definitive-site.is-lead .floating-logo { display: none !important; }

html.kls-in-hero .definitive-site.is-lead .nav-brand {
  opacity: 1;
  pointer-events: auto;
}

/* And top-LEFT, per the mockup - the shipped nav centres the mark and puts
   the links left; here they swap columns and the links centre. The phone
   already does exactly this (the <=1024 rule), so only the desktop moves. */
@media (min-width: 1025px) {
  .definitive-site.is-lead .nav-brand {
    grid-column: 1;
    justify-self: start;
  }

  .definitive-site.is-lead .desktop-nav {
    grid-column: 2;
    justify-self: center;
  }
}

/* The fold's own meta (bottom "Watch the full reel") is replaced by the
   PLAY REEL button in the copy block. The button node stays in the DOM -
   lead.js forwards clicks to it so the reel lightbox keeps its one binding. */
.is-lead .def-hero-meta { display: none; }

/* ---- the fold ---- */

/* Round twelve: the DreamMotion-reference fold. One full viewport: the
   claim centred in it, the trusted strip living at its foot, the footage
   sinking into a bottom vignette that morphs into the next section. */
.is-lead .def-hero {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  height: 100svh;
  min-height: 38rem;
}

/* The copy sits on the footage, so the footage gives way under it: a left
   gradient, strongest at the text column, gone by mid-frame - the mockup's
   own lighting, made of CSS instead of a re-shoot. */
/* The footage itself is dimmed at the source now - round fourteen: "still
   a little bit too overbearing." Gradients shape the darkness; brightness
   sets its floor. */
.is-lead .hero-media video,
.is-lead .hero-media .hero-fallback {
  filter: brightness(0.7) saturate(1.05); /* r95r: +notch (Kyle) */
}

.is-lead .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(6 7 10 / 0.72) 0%, rgb(6 7 10 / 0.44) 26%, rgb(6 7 10 / 0.38) 55%, rgb(6 7 10 / 0.88) 86%, #06070a 100%),
    radial-gradient(ellipse 90% 70% at 50% 38%, rgb(6 7 10 / 0.52) 0%, rgb(6 7 10 / 0) 64%);
  pointer-events: none;
}

/* The reader owns the scroll from the first frame - round fifteen: "on
   mobile I can't immediately scroll once we land on the hero." The shipped
   lock (html.kls-intro-live { overflow: hidden }) holds until the intro's
   final tick; on this build a swipe should always answer. The roll is a
   fixed overlay, so an early scroll simply carries the page underneath it. */
html.kls-intro-live:has(body.is-lead) { overflow: visible; }

/* The copy waits out the opening. The shipped opener reveals the hero
   UNDER its dissolve while the centred wordmark is still on screen - on
   fold-b that's pure media, but the lead's left type was double-exposing
   against the mark for the length of the flash. The fold's footage still
   opens under the dissolve exactly as fold-b does; the words follow the
   moment the intro is done. */
/* The entrance lives on the CHILDREN, never on .lead-copy/.lead-trusted
   themselves: those two carry the scroll-driven fold-away animation, and an
   animation suppresses transitions on the properties it controls - which is
   exactly why the landing read as a pop with "no animation at all" (round
   seventeen). Children transition; containers ride the scroll. And split
   this way, the landing staggers: claim, subline, buttons, label, marks. */
html.kls-opening:not(.kls-intro-done):not(.kls-lead-landed) .definitive-site.is-lead .lead-title,
html.kls-opening:not(.kls-intro-done):not(.kls-lead-landed) .definitive-site.is-lead .lead-sub,
html.kls-opening:not(.kls-intro-done):not(.kls-lead-landed) .definitive-site.is-lead .lead-actions,
html.kls-opening:not(.kls-intro-done):not(.kls-lead-landed) .definitive-site.is-lead .lead-trusted-label,
html.kls-opening:not(.kls-intro-done):not(.kls-lead-landed) .definitive-site.is-lead .lead-marquee {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

/* The entrance keys on the LANDING clock (kls-lead-landed at ~1300ms, set
   by lead.js the moment the dissolve has the fold visibly present), with
   kls-intro-done as the fallback signal. Delays are tighter now that the
   start is synced to the landing itself. */
html.kls-lead-landed .definitive-site.is-lead .lead-title,
html.kls-lead-landed .definitive-site.is-lead .lead-sub,
html.kls-lead-landed .definitive-site.is-lead .lead-actions,
html.kls-lead-landed .definitive-site.is-lead .lead-trusted-label,
html.kls-lead-landed .definitive-site.is-lead .lead-marquee,
html.kls-intro-done .definitive-site.is-lead .lead-title,
html.kls-intro-done .definitive-site.is-lead .lead-sub,
html.kls-intro-done .definitive-site.is-lead .lead-actions,
html.kls-intro-done .definitive-site.is-lead .lead-trusted-label,
html.kls-intro-done .definitive-site.is-lead .lead-marquee {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 1050ms cubic-bezier(0.22, 0.6, 0.2, 1),
    transform 1050ms cubic-bezier(0.22, 0.6, 0.2, 1);
}

html.kls-lead-landed .definitive-site.is-lead .lead-title,
html.kls-intro-done .definitive-site.is-lead .lead-title { transition-delay: 0ms; }
html.kls-lead-landed .definitive-site.is-lead .lead-sub,
html.kls-intro-done .definitive-site.is-lead .lead-sub { transition-delay: 130ms; }
html.kls-lead-landed .definitive-site.is-lead .lead-actions,
html.kls-intro-done .definitive-site.is-lead .lead-actions { transition-delay: 260ms; }
html.kls-lead-landed .definitive-site.is-lead .lead-trusted-label,
html.kls-intro-done .definitive-site.is-lead .lead-trusted-label { transition-delay: 400ms; }
html.kls-lead-landed .definitive-site.is-lead .lead-marquee,
html.kls-intro-done .definitive-site.is-lead .lead-marquee { transition-delay: 500ms; }

.is-lead .lead-copy {
  position: relative;
  z-index: 3;
  grid-row: 1;
  align-self: center;
  max-width: 58rem;
  padding-inline: clamp(1.4rem, 5vw, 4rem);
  display: grid;
  gap: clamp(0.9rem, 1.8vh, 1.3rem);
  justify-items: center;
  text-align: center;
}

.is-lead .lead-eyebrow {
  margin: 0;
  color: rgb(var(--kls-accent-rgb) / 0.92);
  font-size: clamp(0.66rem, 0.82vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* The selector matches uniform.css's type law (main section h2:not(...),
   0-3-3) - the law was silently winning and holding this at --u-h2's 72px
   through two rounds of edits. Same trick the law itself uses for the
   galaxy claim: the display claim is exempt, by name, at equal weight,
   decided by order. */
.definitive-site.definitive-site main section h2.lead-title {
  margin: 0;
  font-family: var(--def-display);
  font-weight: 400;
  /* Sized for the galaxy claim's longer second line: two lines at every
     width, like the reference. */
  font-size: clamp(2.1rem, 4vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: -0.016em;
  color: rgb(244 241 235);
}

/* The reference's two-tone claim: line one carries the light, line two sits
   back - same face, same size, less voice. The payoff keeps the galaxy
   build's italic. */
.is-lead .lead-title .lead-title-l1 { color: rgb(244 241 235); }

/* r91 (Giovani): line two matches line one's weight — the emphasis
   belongs to the accent words alone (their orange + glow + italic).
   "In The Galaxy" no longer carries a bold it doesn't need. */
.is-lead .lead-title .lead-title-l2 {
  color: rgb(244 241 235 / 0.84);
  font-weight: 400;
}

.is-lead .lead-title em {
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.028em;
}

.is-lead .lead-sub {
  margin: 0;
  max-width: 34rem;
  text-align: center;
  color: rgb(244 241 235 / 0.72);
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  line-height: 1.55;
}

.is-lead .lead-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.is-lead .lead-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid rgb(244 241 235 / 0.34);
  border-radius: 2px;
  background: transparent;
  color: rgb(244 241 235);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms var(--def-ease), color 200ms var(--def-ease),
    border-color 200ms var(--def-ease), transform 200ms var(--def-ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.is-lead .lead-btn.is-solid {
  background: rgb(244 241 235);
  border-color: rgb(244 241 235);
  color: rgb(10 11 14);
}

/* r96b (Giovani 8/26: "they don't animate") - the header CTA's full hover,
   not a border whisper: ghost buttons fill to paper and lift, the solid one
   lifts and brightens. transform joins the transition so the lift eases. */
.is-lead .lead-btn:hover,
.is-lead .lead-btn:focus-visible {
  border-color: rgb(244 241 235);
  background: rgb(244 241 235);
  color: rgb(10 11 14);
  transform: translateY(-2px);
}
.is-lead .lead-btn.is-solid:hover,
.is-lead .lead-btn.is-solid:focus-visible {
  background: rgb(255 253 248);
  transform: translateY(-2px);
}
.is-lead .lead-btn:active { transform: translateY(1px); }

/* ---- trusted by ---- */

.is-lead .lead-trusted {
  position: relative;
  z-index: 3;
  grid-row: 2;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  width: min(74rem, 92vw);
  padding: 0 0 clamp(2.8rem, 6vh, 4.4rem);
  /* Transparent: it sits ON the vignette, per the reference - the marks
     hover over the darkened footage, not on a bar. No lines anywhere. */
  background: none;
}

/* The little line right above the marks, centred - the reference's
   "best models in one workspace" position. */
.is-lead .lead-trusted-label {
  margin: 0;
  padding: 0;
  color: rgb(244 241 235 / 0.55);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
}

/* The marks scroll on their own, in COLOUR - Giovani: "they should have
   color, and when I hover over them they should enlarge and slow down."
   Pausing dead was wrong, and a CSS animation cannot change speed without
   jumping, so lead.js drives one translate3d with a velocity that eases
   toward a slower target under the cursor. Transform-only, one write per
   frame. */
.is-lead .lead-marquee {
  overflow: hidden;
  width: 100%;
  /* Breathing room INSIDE the clip: a hovered mark grows ~16%, and the
     wrapper's edge was slicing it - "they pop out of a hidden barrier".
     The padding moves the clip boundary out; the negative margin keeps the
     layout exactly where it was. */
  padding-block: 0.9rem;
  margin-block: -0.9rem;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  /* The strip owns horizontal gestures - swipe to browse the marks. */
  touch-action: pan-y;
  cursor: grab;
}

.is-lead .lead-marquee.is-dragging { cursor: grabbing; }
.is-lead .lead-marquee.is-dragging .lead-mark { pointer-events: none; }

.is-lead .lead-marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(2.2rem, 4vw, 4rem);
  width: max-content;
  will-change: transform;
}

/* Height per MARK, not one height for all: a square badge at wordmark height
   is a dot (the too-small Minute Maid and Gatorade), a wordmark at badge
   height is a wall. Three optical tiers, set by lead.js via --mh. */
.is-lead .lead-marquee-track img {
  height: calc(var(--mh, 1.5) * 1rem);
  width: auto;
  opacity: 0.92;
  transform: scale(1);
  transition: transform 240ms var(--def-ease), opacity 240ms var(--def-ease);
  display: block;
}

.is-lead .lead-mark {
  display: block;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

a.lead-mark { cursor: pointer; }

/* The illuminated hover, final form - the same place the galaxy landed
   after its own glow attempts: the mark BRIGHTENS and gains presence, and
   nothing is emitted around it. Drop-shadows read as a light box on the
   PNG marks, whose alpha edges are rectangles, not glyphs. */
.is-lead .lead-mark:hover img {
  opacity: 1;
  transform: scale(1.16);
  filter: brightness(1.28) saturate(1.08);
}

/* A real mouse drag on an <img> starts the browser's native ghost-drag,
   which pointercancels our swipe before it begins - why the strip would
   not drag on desktop while every synthetic test passed. */
.is-lead .lead-mark,
.is-lead .lead-mark img {
  -webkit-user-drag: none;
  user-select: none;
}

/* The press answers the finger: down on tap, released on the way to the
   client's page. */
.is-lead a.lead-mark:active img { transform: scale(1.02); transition-duration: 90ms; }

/* ---- the film rail, relocated ---- */

/* Round ten, Giovani: "revert it back to this exact one" - fold-b's rail.
   Every internal override this file carried is GONE: the locked stage/card
   pair runs at the shipped size, the shipped hover lift is back, the reel
   is slide one again, the section's own scrim and padding are untouched.
   What stays is what he asked for separately: the section LIVES under the
   trusted strip (lead.js moves it), and his "Featured work." headline -
   which now sits ABOVE the section, outside its scrim, so the shipped
   overlay can never shadow it again. */
.is-lead .lead-rail-head {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  padding: clamp(2.6rem, 5vw, 4.2rem) clamp(1.4rem, 5.5vw, 5.5rem) 0;
  background: #06070a;
  text-align: center;
}

.is-lead .lead-rail-head h2 {
  margin: 0;
  font-family: var(--def-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: rgb(244 241 235);
}

.is-lead .lead-rail-head p {
  margin: 0;
  color: rgb(244 241 235 / 0.6);
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  line-height: 1.5;
}

/* ---- the phone ---- */

@media (max-width: 720px) {
  .is-lead .lead-copy { max-width: none; }

  /* lvh, the LARGEST viewport - not svh, not dvh. Both of those size to
     the area above Safari's floating bar, and iOS paints the page beneath
     the bar too: the strip rode high and the next section showed through
     the pill zone (Giovani's screenshot, round sixteen). lvh spans the
     physical screen, so the strip sits at the true bottom and nothing
     beneath the fold exists until you scroll. */
  .is-lead .def-hero {
    height: 100vh;
    height: 100lvh;
  }

  /* And the marks clear the home indicator. */
  .is-lead .lead-trusted {
    padding-bottom: calc(clamp(2.8rem, 6vh, 4.4rem) + env(safe-area-inset-bottom, 0px));
  }

}

/* ---- the footer: the interior's centred stack (round 27) ---- */
/* Giovani: "I honestly like the footer that we have on this project page a
   lot more... apply that to all the pages and the homepage." This is
   definitive-interior's footer, ported to the homepage's own markup: one
   centred column - wordmark, quiet nav row, location + email, social
   marks, copyright over back-to-top - beneath the same slow star field
   rising out of the section above. No frame, no columns, no lines. */
.definitive-site.is-lead .site-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
  margin: 0;
  padding: clamp(3.4rem, 7vh, 5rem) 1.5rem 1.4rem;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: linear-gradient(to bottom, rgb(6 7 10 / 0) 0%, rgb(6 7 10 / 0.55) 42%, rgb(6 7 10 / 0.94) 100%);
}
.definitive-site.is-lead .site-footer::before,
.definitive-site.is-lead .site-footer::after {
  content: none;
}

.definitive-site.is-lead .def-footer-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: none;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}
.definitive-site.is-lead .def-footer-logo,
.definitive-site.is-lead .site-footer .footer-logo {
  width: clamp(7.5rem, 10vw, 9.5rem);
  margin: 0;
}
.definitive-site.is-lead .def-footer-logo img,
.definitive-site.is-lead .site-footer .footer-logo img { width: 100%; height: auto; display: block; }
.definitive-site.is-lead .site-footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem 1.6rem;
  margin: 0;
  color: rgb(244 241 235);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.definitive-site.is-lead .site-footer .footer-nav a { color: inherit; }
.definitive-site.is-lead .site-footer .footer-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  text-align: center;
}
.definitive-site.is-lead .site-footer .footer-contact > span {
  color: rgb(244 241 235 / 0.62);
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  text-transform: none;
}
.definitive-site.is-lead .site-footer .footer-email {
  border: 0;
  color: rgb(244 241 235);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
.definitive-site.is-lead .site-footer .footer-email:hover { text-decoration: underline; }
.definitive-site.is-lead .site-footer .footer-social {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  margin: 0.2rem 0 0;
}
.definitive-site.is-lead .site-footer .footer-social a {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  place-items: center;
  background: transparent;
  color: rgb(244 241 235 / 0.6);
  opacity: 0.85;
  transition: color 200ms ease, opacity 200ms ease, transform 280ms ease;
}
.definitive-site.is-lead .site-footer .footer-social a svg { width: 100%; height: 100%; }
.definitive-site.is-lead .site-footer .footer-social a:hover {
  color: rgb(244 241 235);
  opacity: 1;
  transform: translateY(-0.15rem);
}
.definitive-site.is-lead .site-footer .footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  margin-top: 0.6rem;
  padding-top: 0;
  border: 0;
  color: rgb(255 255 255 / 0.6);
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.definitive-site.is-lead .site-footer .footer-bottom::before { display: none; }
.definitive-site.is-lead .site-footer .footer-bottom a { color: inherit; }
.definitive-site.is-lead .site-footer .footer-bottom a:hover { color: rgb(244 241 235); }

/* ---- each chapter's own sky (round 33) ---- */
.definitive-site.is-lead .def-close { border-top: 0; }
.definitive-site.is-lead .lead-galaxy-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Each sky melts into the ground at its own edges - the seam cannot
     exist because the canvas is never opaque where a neighbour begins. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 82%, transparent);
}
.definitive-site.is-lead .def-expertise,
.definitive-site.is-lead .def-instagram {
  position: relative;
}
.definitive-site.is-lead .def-expertise > *:not(.lead-galaxy-canvas),
.definitive-site.is-lead .def-instagram > *:not(.lead-galaxy-canvas) {
  position: relative;
  z-index: 1;
}
/* No ruled line may separate any two chapters. */
.definitive-site.is-lead main section {
  border-top: 0;
  border-bottom: 0;
}
/* The media field keeps its own absolute positioning - a blanket
   position:relative collapsed it into the top edge (round 31's "that
   section got fucked"). Only the stacking is stated. */
.definitive-site.is-lead .def-close .def-close-media { z-index: 1; }
.definitive-site.is-lead .def-close .def-close-copy { position: relative; z-index: 4; }
/* 9/2 (Giovani, on the call): the doors sat UNDER the wall's media layer -
   definitive.css lets only direct-child anchors take the pointer and the
   doors live inside .close-actions; and the copy had been dropped to the
   media's z-index. The copy rides above the wall, its doors take the pointer. */
.definitive-site.is-lead .def-close .def-close-copy .close-actions a { pointer-events: auto; }

/* ---- the theater morph (round 22) ---- */

/* Cross-document view transitions: on engines that support them, the
   fullscreen film morphs into the client's page instead of hard-cutting.
   Everything else falls back to a plain navigation. */
@view-transition { navigation: auto; }

.definitive-site.is-lead .def-film-card.is-expanded {
  view-transition-name: kls-film;
}

/* ---- the rail's dynamic light (round 21) ---- */

/* Vision Pro's trick, with the section's own media: the backdrop's ambient
   <video> already plays the ACTIVE film's self-hosted loop - the veil was
   just drowning it (0.7 alpha over a 0.42-opacity video). The veil thins,
   the video comes up saturated, and the whole light field fades in and out
   at the viewport's top and bottom so the glow never hard-cuts. The light
   IS the frame that is playing; it changes because the film does. */
.definitive-site.is-lead .def-film-backdrop {
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}

.definitive-site.is-lead .def-film-backdrop::after {
  background: rgba(5, 6, 10, 0.42);
  backdrop-filter: blur(64px) saturate(140%);
  -webkit-backdrop-filter: blur(64px) saturate(140%);
}

.definitive-site.is-lead .def-film-roll.is-ambient-ready .def-film-backdrop [data-film-ambient] {
  opacity: 0.62;
}

.definitive-site.is-lead .def-film-backdrop [data-film-ambient] {
  filter: saturate(1.4) brightness(0.95);
}

/* When only the still exists (phones skip the ambient decode), it glows a
   little harder too, so the section never reads flat. */
.definitive-site.is-lead .def-film-backdrop img {
  opacity: 0.5;
}

.definitive-site.is-lead .def-film-roll.is-ambient-ready .def-film-backdrop img { opacity: 0; }

/* ---- cinematic scroll, after bleau.framer.website ---- */

/* The reference's grammar, ported inside the smoothness bar: sections
   SETTLE in from below (one-shot, compositor-only properties), and where
   the engine has scroll-driven animations, image layers drift slower than
   the page and a section is fully lit only while it owns the frame.
   Everything degrades to a plain page under prefers-reduced-motion and on
   engines without view() timelines. */
.definitive-site.is-lead .lead-cine {
  opacity: 0.001;
  transform: translate3d(0, 44px, 0);
}

.definitive-site.is-lead .lead-cine.lead-inview {
  opacity: 1;
  /* none, not translate3d(0,0,0): an identity transform still creates a
     containing block, and the theater's fullscreen rect anchors to the
     viewport - with the section transformed, the expanded film measured
     against the SECTION and fullscreen silently broke (round 23). none
     interpolates from the entrance offset identically. */
  transform: none;
  /* r94: a touch slower - the settle should be felt, not subliminal. */
  transition:
    opacity 1350ms var(--def-ease),
    transform 1350ms var(--def-ease);
}

/* The opening owns the fold; the strip right under it settles a beat later
   so the fold's hand-off never fights it. */
.definitive-site.is-lead .lead-trusted.lead-inview { transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  .definitive-site.is-lead .lead-cine {
    opacity: 1;
    transform: none;
  }
}

/* Scroll-driven layers, where the engine has them. Transform-only, off the
   main thread by construction. */
@supports (animation-timeline: view()) {
  /* The fold takes its leave - Giovani, round twelve: "a beautiful
     fade-away animation of the above-the-fold as I scroll down." The claim
     drifts up and dissolves across the first ~85vh of scroll; the strip
     goes a touch sooner. Riding the scroll timeline, so the smoother's
     eased motion IS the animation's clock. */
  /* Round 33: "they should only blur one line at a time." Each line of
     the fold rides its own window of the scroll - headline first, its
     second line a beat later, then the subline, then the buttons - and
     each blurs as IT fades, not in chorus. The exit animations live on
     inner elements the entrance transitions never touch. */
  .definitive-site.is-lead .lead-title-l1 {
    display: inline-block;
    animation: lead-fold-away linear both;
    animation-timeline: scroll(root);
    animation-range: 0 34vh;
  }
  .definitive-site.is-lead .lead-title-l2 {
    display: inline-block;
    animation: lead-fold-away linear both;
    animation-timeline: scroll(root);
    animation-range: 6vh 42vh;
  }
  .definitive-site.is-lead .lead-sub-in {
    display: inline-block;
    animation: lead-fold-away linear both;
    animation-timeline: scroll(root);
    animation-range: 12vh 50vh;
  }
  .definitive-site.is-lead .lead-actions .lead-btn {
    animation: lead-fold-away linear both;
    animation-timeline: scroll(root);
    animation-range: 18vh 58vh;
  }

  .definitive-site.is-lead .def-hero .lead-trusted {
    animation: lead-fold-away-soft linear both;
    animation-timeline: scroll(root);
    animation-range: 22vh 88vh;
  }

  @keyframes lead-fold-away {
    to { opacity: 0; transform: translate3d(0, -30px, 0); filter: blur(12px); }
  }

  /* Round 27: "I don't want the logos to fade away until they are 3/4 of
     the way off my viewport." Opacity holds to 74% of the range and then
     falls; the drift keeps its full linear travel so nothing kinks. */
  @keyframes lead-fold-away-soft {
    74% { opacity: 1; }
    to { opacity: 0; transform: translate3d(0, -24px, 0); }
  }

  /* The rail's backdrop is NOT animated here: its richness is definitive's
     own choreography on that element, and a scroll-driven transform on the
     same node replaced it - Giovani, round eight: "the background dynamic
     lighting isn't as rich as previous builds." The backdrop belongs to the
     rail; the drift belongs to the footer. */

  /* A section is fully lit only while it owns the frame - the reference
     holds its neighbours at 0.2 opacity; ours dim more gently, brightness
     riding the section's own travel through the viewport. */
  .definitive-site.is-lead .def-expertise,
  .definitive-site.is-lead .studio-section,
  .definitive-site.is-lead .def-instagram,
  .definitive-site.is-lead .def-learn {
    animation: lead-frame-light linear both;
    animation-timeline: view();
  }

  @keyframes lead-frame-light {
    0%   { filter: brightness(0.62); }
    28%  { filter: brightness(1); }
    72%  { filter: brightness(1); }
    100% { filter: brightness(0.66); }
  }

  @media (prefers-reduced-motion: reduce) {
    .definitive-site.is-lead .lead-copy,
    .definitive-site.is-lead .def-hero .lead-trusted,
    .definitive-site.is-lead .site-footer::before,
    .definitive-site.is-lead .def-film-roll .def-film-backdrop,
    .definitive-site.is-lead .def-expertise,
    .definitive-site.is-lead .studio-section,
    .definitive-site.is-lead .def-instagram,
    .definitive-site.is-lead .def-learn {
      animation: none;
    }
  }
}

/* ---- the full film's layer (round 26) ---- */
/* The feature video sits over the card's silent loop and crossfades in
   when the film lands; deactivating fades it back to the loop. It must
   OUT-SPECIFY definitive's card-video treatment (0-4-1: the is-active
   is-video-ready opacity gate, and the 106% translate(-50%,-50%) cover
   box whose transform threw the layer off the card entirely). */
.definitive-site.definitive-site .def-film-card video.def-film-feature {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.32s ease;
  pointer-events: none;
}
.definitive-site.definitive-site .def-film-card.is-feature-live video.def-film-feature {
  opacity: 1;
  transition: opacity 0.75s ease;
}

/* The play button IS the cursor over the rail. The shipped follower
   trailed its pointer by a 280ms transform transition - it read as a
   floating chip, not a cursor. Position now tracks raw (no transition on
   transform); only the scale-in breathes, on the separate `scale`
   channel. The OS cursor hides so there is exactly one pointer. */
@media (hover: hover) and (pointer: fine) {
  .definitive-site [data-film-stage] { cursor: none; }
  .definitive-site.definitive-site .def-film-cursor {
    transform: translate3d(calc(var(--cursor-x, -10rem) - 50%), calc(var(--cursor-y, -10rem) - 50%), 0);
    transition: opacity 160ms ease, scale 260ms cubic-bezier(0.22, 0.6, 0.2, 1);
    scale: 0.7;
  }
  .definitive-site.definitive-site .def-film-cursor.is-visible { scale: 1; }
}

/* ---- the social block, after the mockup (round 28) ---- */
/* kyle-loftus-studios-mockup.vercel.app's Instagram section: everything on
   one centred axis - the avatar wearing the story ring, the kicker, the
   handle writ large, the followers line, the View-profile invitation -
   over his real grid at three rows of six. */
.definitive-site.is-lead .def-instagram { text-align: center; }
.definitive-site.is-lead .instagram-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: clamp(2.2rem, 5vh, 3.6rem);
}
.definitive-site.is-lead .ig-avatar {
  display: grid;
  place-items: center;
  width: 6.6rem;
  height: 6.6rem;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  /* The story ring: Instagram's gradient, a ground-coloured gap, then the
     picture - the ring reads as unseen stories, exactly the app's language. */
  background: conic-gradient(from 210deg, #f58529, #feda77, #dd2a7b, #8134af, #515bd4, #f58529);
  padding: 3px;
}
.definitive-site.is-lead .ig-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #06070a;
  object-fit: cover;
}
.definitive-site.is-lead .instagram-heading .def-kicker { margin: 0; }
.definitive-site.is-lead .instagram-heading h2 { margin: 0; }
.definitive-site.is-lead .instagram-heading h2 a { color: inherit; text-decoration: none; }
.definitive-site.is-lead .ig-followers {
  margin: 0;
  color: rgb(244 241 235 / 0.6);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.definitive-site.is-lead .ig-view {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
  padding: 0.72rem 1.5rem;
  border: 1px solid rgb(244 241 235 / 0.32);
  border-radius: 999px;
  color: rgb(244 241 235);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 220ms ease, color 220ms ease;
}
.definitive-site.is-lead .ig-view:hover { background: rgb(244 241 235); color: #06070a; }
/* r89 (Kyle at 23:05): "a little too cluttered and big... four or five
   rather than six." Five across; the wall is fifteen tiles now, three
   clean rows. Phone keeps its 3x3 law. */
.definitive-site.is-lead .def-instagram .instagram-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.3rem;
}
.definitive-site.is-lead .def-instagram .instagram-tile { aspect-ratio: 1; }
.definitive-site.is-lead .def-instagram .instagram-tile:nth-child(n + 9) { display: block; }
.definitive-site.is-lead .def-instagram .instagram-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease, opacity 420ms ease;
}
.definitive-site.is-lead .def-instagram .instagram-tile:hover img { transform: scale(1.045); }
.definitive-site.is-lead .ig-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.1rem;
  height: 1.1rem;
  color: rgb(255 255 255 / 0.92);
  filter: drop-shadow(0 1px 4px rgb(0 0 0 / 0.55));
  pointer-events: none;
}
.definitive-site.is-lead .ig-badge svg { width: 100%; height: 100%; }
@media (max-width: 760px) {
  .definitive-site.is-lead .def-instagram .instagram-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.22rem;
  }
}

/* ---- the rail's light (round 28 -> 9/1 PM) ----
   The light is the halo on the playing card (.def-film-card.is-active,
   below) - the SAME recipe the studio window, the expertise stage and the
   learn film carry. The blurred canvas wash that used to hang in the
   backdrop is gone (Giovani, 9/1 PM): a 1600x1237 blur at 40% behind the
   whole section was "way too big", it clipped in a hard black line at the
   section's overflow edge right under the sub-line, and it was the one
   thing that made this rail look different from the studio. The old
   ambient <video> and still stay down. */
.definitive-site.is-lead .def-film-backdrop [data-film-ambient],
.definitive-site.is-lead .def-film-backdrop img { opacity: 0 !important; }
/* Round 34: the veil was eating the light - a 0.3 wash plus 40px of
   backdrop blur turned the sampled frames to mud. The colour reads now. */
.definitive-site.is-lead .def-film-backdrop::after {
  background: rgba(5, 6, 10, 0.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---- gentler arrivals on the rail (round 30) ---- */
/* The poster's hand-off to the moving frame and the full film's rise both
   read as pops at 200ms; they breathe now. */
.definitive-site.definitive-site.is-lead .def-film-card.is-active.is-video-ready video {
  transition: opacity 720ms ease;
}
.definitive-site.definitive-site.is-lead .def-film-card.is-feature-live video.def-film-feature {
  transition: opacity 1.05s ease;
}

/* ---- round 31 ---- */
/* The header is glass over the fold and solid the moment you scroll. */
.definitive-site.is-lead .site-nav {
  transition: background-color 360ms ease, box-shadow 360ms ease;
}
.definitive-site.is-lead .site-nav.is-scrolled {
  background-color: rgb(6 7 10 / 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgb(244 241 235 / 0.05);
}

/* Section heads: one voice. The expertise sub sits left with its
   headline; Learn from Kyle centres its whole introduction. */
.definitive-site.is-lead .def-section-sub {
  margin: 0.9rem 0 0;
  max-width: 34rem;
  color: rgb(244 241 235 / 0.62);
  font-size: 1.02rem;
  line-height: 1.55;
}
.definitive-site.is-lead .def-learn-intro {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* Round 54: the kicker holds the same centre as the head under it. */
.definitive-site.definitive-site.is-lead .def-learn-intro .def-kicker {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  /* wide tracking pushes the optical centre left - absorb the last
     letter's trailing space */
  padding-left: 0.16em;
}
.definitive-site.definitive-site.is-lead .def-learn-intro h2 {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.definitive-site.is-lead .def-learn-intro .def-section-sub {
  margin-left: auto;
  margin-right: auto;
}

/* The learn cards: the pictures recede so the words lead. */
.definitive-site.is-lead .def-learn-cards a img {
  opacity: 0.52;
  transition: opacity 420ms ease, transform 700ms ease;
}
.definitive-site.is-lead .def-learn-cards a:hover img { opacity: 0.68; }

/* ---- round 34: the learn cards are squares that glow ---- */
.definitive-site.is-lead .def-learn-cards {
  max-width: 58rem;
  margin-left: auto;
  margin-right: auto;
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.definitive-site.is-lead .def-learn-cards a {
  position: relative;
  display: block;
  aspect-ratio: 1;
  /* definitive sizes these cards by HEIGHT; with a square ratio that
     height was driving width straight through the 1fr tracks. */
  height: auto;
  min-height: 0;
  border-radius: 0.8rem;
  overflow: hidden;
}
.definitive-site.is-lead .def-learn-cards a::before {
  content: "";
  position: absolute;
  inset: -9%;
  z-index: 0;
  border-radius: 1.4rem;
  background: var(--glow-img) center / cover no-repeat;
  filter: blur(32px) saturate(1.7) brightness(1.1);
  opacity: 0;
  transition: opacity 480ms ease;
  pointer-events: none;
}
.definitive-site.is-lead .def-learn-cards a:hover::before,
.definitive-site.is-lead .def-learn-cards a.is-focus::before { opacity: 0.55; }
.definitive-site.is-lead .def-learn-cards a img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.8rem;
  opacity: 0.55;
  transition: opacity 420ms ease;
  /* The shared parallax engine writes an inline scale+translate onto
     every [data-parallax] image each frame - inside a small square that
     overflowed the card into a collage. Squares hold still. */
  transform: none !important;
}
.definitive-site.is-lead .def-learn-cards a:hover img,
.definitive-site.is-lead .def-learn-cards a.is-focus img { opacity: 0.8; }
/* Round 54: the astral frame - a thin silver line that draws itself in
   from the card's edge and settles as an inner matte. Desktop hover and
   the phone's scroll-focus share it. */
.definitive-site.is-lead .def-learn-cards a {
  outline: 1px solid rgb(206 214 230 / 0);
  outline-offset: -20px;
  transition: outline-color 460ms ease, outline-offset 620ms cubic-bezier(0.22, 0.61, 0.21, 1);
}
.definitive-site.is-lead .def-learn-cards a:hover,
.definitive-site.is-lead .def-learn-cards a.is-focus {
  outline-color: rgb(208 216 232 / 0.55);
  outline-offset: -10px;
}
.definitive-site.is-lead .def-learn-cards a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 0.8rem;
  /* centred text needs a centred floor */
  background: radial-gradient(ellipse 90% 62% at 50% 50%, rgb(4 5 8 / 0.62), rgb(4 5 8 / 0.12) 78%);
  pointer-events: none;
}
.definitive-site.is-lead .def-learn-cards a span,
.definitive-site.is-lead .def-learn-cards a strong,
.definitive-site.is-lead .def-learn-cards a small {
  position: absolute;
  z-index: 3;
  left: 1.1rem;
  right: 1.1rem;
}
.definitive-site.is-lead .def-learn-cards a strong,
.definitive-site.is-lead .def-learn-cards a small { text-align: center; }
.definitive-site.is-lead .def-learn-cards a span { top: 1rem; }
/* the title and subline hold the card's true centre */
.definitive-site.is-lead .def-learn-cards a strong {
  bottom: 50%;
  margin-bottom: 0.15rem;
  line-height: 1.15;
}
.definitive-site.is-lead .def-learn-cards a small {
  top: 50%;
  margin-top: 0.35rem;
  line-height: 1.35;
}
@media (max-width: 700px) {
  .definitive-site.is-lead .def-learn-cards { max-width: 24rem; }
}

/* The studio film's native player. */
.definitive-site.is-lead .lead-story-video {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

/* 9/1: the below-fold chapters no longer skip layout offscreen.
   content-visibility:auto + contain-intrinsic-size made the document's
   height breathe as chapters entered and left (definitive.css measured it
   WORSE and excluded it), and that breathing was the "rare rubber band"
   Giovani felt - the wheel smoother's ceiling read a momentarily shorter
   page and eased the scroll back up. */

/* The reveals breathe instead of popping: a shorter rise on a longer,
   softer curve, and they begin earlier (definitive's observer margin). */
.definitive-site.is-lead [data-def-reveal] {
  transform: translateY(1.05rem);
  transition: opacity 950ms cubic-bezier(0.22, 0.61, 0.21, 1), transform 1000ms cubic-bezier(0.22, 0.61, 0.21, 1);
}

/* The studio film: the rail's shape, and the play press actually plays. */
.definitive-site.is-lead .def-about-media { aspect-ratio: 16 / 9; }
.definitive-site.is-lead .def-about-media iframe {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  border: 0;
}
.definitive-site.is-lead .def-about-media.is-playing img,
.definitive-site.is-lead .def-about-media.is-playing .story-play {
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}
.definitive-site.is-lead .def-about-media.is-playing::after { opacity: 0; }

/* The phone's fold: the strip sits lower, on black. */
@media (max-width: 700px) {
  .definitive-site.is-lead .def-hero .lead-trusted {
    margin-top: clamp(1.6rem, 5vh, 3rem);
    padding-bottom: 0.4rem;
  }
}

/* ---- round 35 ---- */
/* The header never hides and never jumps: site-shell's scroll-hide
   transform is refused; presence is constant, glass arrives on scroll. */
.definitive-site.is-lead .site-nav,
.definitive-interior .site-nav {
  transform: none !important;
}

/* The closing wall wears the marks: stills held low so the logos lead;
   hover wakes the film and the mark steps aside. */
.definitive-site.is-lead [data-close-card] img:not(.lead-close-logo) {
  filter: brightness(0.52) saturate(0.92);
  transition: filter 420ms ease; /* r95r: +notch */
}
/* The hover film fills the frame exactly like the still. definitive pins
   button > img and > iframe with !important insets but the lead build's
   <video> was never pinned - it played at its default size as a dark
   rectangle floating INSIDE the card (Giovani: "glitched asf"). */
.definitive-site.definitive-site.is-lead [data-close-card] video {
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  z-index: 1;
}
.definitive-site.is-lead [data-close-card] span { display: none; }
/* definitive pins every button > img with !important insets - the mark
   can only centre by answering in kind. */
.definitive-site.definitive-site.is-lead .lead-close-logo {
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  z-index: 2;
  /* Round 50: the marks lead the wall - bigger, and they NEVER leave.
     Hover wakes the film underneath; the mark rides the live footage,
     the same law as the archive and the More-work rolls. */
  width: 60% !important;
  height: 40% !important;
  aspect-ratio: auto !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 10px rgb(0 0 0 / 0.55));
  /* Round 57: a lifted-frame box-shadow rule for the stills also caught
     this img - box-shadow traces the RECTANGLE, not the alpha, and read
     as a faint box around every mark once the hover footage brightened.
     The drop-shadow above already carries the mark's depth. */
  box-shadow: none !important;
  outline: 0 !important;
  transition: opacity 380ms ease;
  pointer-events: none;
}
.definitive-site.is-lead [data-close-card]:hover img:not(.lead-close-logo),
.definitive-site.is-lead [data-close-card].is-previewing img:not(.lead-close-logo) {
  filter: brightness(0.85) saturate(1);
}
/* A client without a cut-out mark speaks its name instead - always on,
   never bare (Giovani: "a logo over it, or even text if we don't").
   definitive.css pins the wall's span with !important (the round-18
   landmine) - countered in kind, the house rule. */
.definitive-site.is-lead [data-close-card].lead-close-worded span {
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  left: 8% !important;
  right: 8% !important;
  bottom: auto !important;
  width: auto !important;
  opacity: 1 !important;
  transform: translateY(-50%) !important;
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.5vw, 1.5rem) !important;
  line-height: 1.25;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
  color: rgb(244 241 235 / 0.95) !important;
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.65);
  pointer-events: none;
  /* the base span is a bottom label bar - its gradient scrim and padding
     painted a dark band across the centred word's row */
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Expertise cards sit on solid ground - the sky stays outside them. */
.definitive-site.is-lead .def-service-grid article {
  background: #0a0c11;
}

/* The active frame glows with the room's own light. 9/1 (Giovani): it was
   :hover-only, so the light the sampler was writing never reached a touch
   screen at all and left the frame at rest on desktop. The playing frame
   is what carries it now - the same recipe .kls-roomlit uses, so the rail
   reads at exactly the intensity the studio window and the learn film do. */
.definitive-site.is-lead .def-film-card { transition: box-shadow 480ms ease; }
.definitive-site.is-lead .def-film-card.is-active {
  box-shadow: 0 0 110px -18px var(--kls-glow, rgb(120 140 200 / 0.4)),
              0 0 34px -10px var(--kls-glow, rgb(120 140 200 / 0.35));
}

/* The header bows out at the page's end. */
.definitive-site.is-lead .site-nav {
  transition: background-color 360ms ease, box-shadow 360ms ease, opacity 420ms ease, visibility 0s linear 0s;
}
.definitive-site.is-lead .site-nav.is-past-end {
  opacity: 0;
  visibility: hidden;
  transition: background-color 360ms ease, box-shadow 360ms ease, opacity 420ms ease, visibility 0s linear 420ms;
}

/* The footer is night, not galaxy: solid ground, a long approach, no
   line possible, and no slack under the copyright. */
.definitive-site.is-lead .site-footer {
  background: linear-gradient(to bottom, rgb(6 7 10 / 0) 0%, rgb(5 6 9 / 0.9) 22%, #040508 55%, #030406 100%);
}
.definitive-site.is-lead .def-footer-grid { min-height: 0; gap: 1.1rem; }
.definitive-site.is-lead .site-footer {
  padding-bottom: 1.1rem;
  min-height: 0 !important;
  height: auto !important;
}
/* the legacy ground plane overhung the document by ~44px of scroll */
.definitive-site.is-lead .def-ground { display: none; }
.definitive-site.is-lead .def-close .lead-galaxy-canvas {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 66%, transparent 96%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 66%, transparent 96%);
}

/* The reel room. */
.lead-reel-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  background: rgb(3 4 7 / 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms ease;
}
.lead-reel-overlay.is-open { opacity: 1; pointer-events: auto; }
.lead-reel-frame {
  width: min(76vw, 170vh * 16 / 9, 1400px);
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 2rem 6rem rgb(0 0 0 / 0.6);
}
.lead-reel-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.lead-reel-close {
  position: absolute;
  top: 1.4rem;
  right: 1.8rem;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid rgb(244 241 235 / 0.35);
  border-radius: 999px;
  background: transparent;
  color: rgb(244 241 235);
  font-size: 1rem;
  cursor: pointer;
}
@media (max-width: 900px) {
  .lead-reel-frame { width: 94vw; }
}

/* ---- round 36: the phone ---- */
@media (max-width: 700px) {
  /* the notch: the page owns the whole screen, the nav clears the bar */
  .definitive-site.is-lead .site-nav {
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.4rem);
  }

  /* Round 38b: iOS painted the unplayed reel's raw decoded frame as a
     mis-sized texture (the beige panel) - the GPU hint made its own
     layer before any styling applied. The hint is gone, and until the
     reel is truly PLAYING nothing of it may paint: the bright poster
     alone holds the fold. */
  .definitive-site.is-lead .hero-media:not(.is-reel-ready) .def-hero-reel,
  .definitive-site.is-lead .hero-media:not(.is-reel-ready) video {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  .definitive-site.is-lead .hero-media:not(.is-reel-ready) .hero-fallback {
    opacity: 1 !important;
    /* r90-call-20, Giovani's Low Power screenshot: at .94 the held poster
       met the fold's dark top as a black slab with an edge under the nav.
       Closer to the reel's own level (.62) the same vignette reads as
       lighting; .8 keeps it clearly a picture, not a dark broken video. */
    filter: brightness(0.8);
  }
  /* the header zone stays legible over the bright poster - a quiet top
     scrim, always there, so the nav never reads as glitching against it.
     r90-call-20: lighter and three times longer (22% -> 38%, .72 -> .5), so
     with the poster held it is a vignette the picture rises out of, not a
     band the picture starts under. */
  .definitive-site.is-lead .def-hero .hero-media::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 38%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to bottom, rgb(5 6 10 / 0.5) 0%, rgb(5 6 10 / 0.26) 38%, rgb(5 6 10 / 0.08) 72%, rgb(5 6 10 / 0) 100%);
  }

  /* expertise: one centred column, room at the edges */
  .definitive-site.is-lead .def-service-grid {
    grid-template-columns: 1fr;
    max-width: 20.5rem;
    margin-left: auto;
    margin-right: auto;
    gap: 1.6rem;
  }
  /* The card's inner wrapper is a start-aligned FLEX COLUMN: children
     shrink to their text and hug the left, so text-align alone could
     never centre them (the headline's own box was 116px wide). Centre
     the boxes themselves. */
  .definitive-site.is-lead .def-service-grid article,
  .definitive-site.is-lead .def-service-grid article * { text-align: center !important; }
  .definitive-site.is-lead .def-service-grid article > div {
    align-items: center !important;
    justify-items: center !important;
  }
  /* the number sits top-left over the frame, exactly like the learn cards */
  .definitive-site.is-lead .def-service-grid article { position: relative; }
  .definitive-site.is-lead .def-service-grid article > div > span {
    position: absolute;
    top: 0.85rem;
    left: 1rem;
    z-index: 2;
    margin: 0;
    text-align: left !important;
  }
  .definitive-site.is-lead .def-service-grid article a {
    display: inline-flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
  .definitive-site.is-lead .def-service-grid article span {
    display: block;
    margin: 0 auto 0.3rem;
  }
  .definitive-site.is-lead .def-service-grid article a { justify-content: center; }
  .definitive-site.is-lead .def-section-sub {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .definitive-site.is-lead .def-section-head { text-align: center; }

  /* learn: close rhythm, stacked centred cards, no swipe strip */
  .definitive-site.is-lead .def-learn-intro .def-kicker { margin-bottom: 0.45rem; }
  .definitive-site.is-lead .def-learn-intro h2 { margin-bottom: 0.55rem; }
  .definitive-site.is-lead .def-learn-intro .def-section-sub { margin-top: 0; }
  .definitive-site.is-lead .def-learn-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;   /* definitive's phone rail flows
                                         columns; the stack flows rows */
    grid-auto-columns: auto !important;
    width: 100%;
    max-width: 19rem;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    gap: 1.4rem !important;
    padding: 0 !important;
  }
  .definitive-site.is-lead .def-learn-cards a {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 !important;
  }
  .definitive-site.is-lead .def-learn-intro {
    display: block;
  }
  .definitive-site.is-lead .def-learn-intro .def-kicker { margin: 0 0 0.5rem; }
  .definitive-site.is-lead .def-learn-intro h2 { margin: 0 0 0.6rem; }
  .definitive-site.is-lead .def-learn-intro .def-section-sub { margin: 0 auto; }

  /* the closing wall becomes the rolls; the scattered frames rest */
  .definitive-site.is-lead .def-close-media { display: none; }
  .definitive-site.is-lead .def-close {
    display: block;   /* the desktop grid pins the copy to a row; the
                         phone flows: rolls, copy, rolls */
    min-height: 0;
    padding: 3rem 0 2.4rem;
  }
  /* definitive centres the copy absolutely; in the rolls layout it joins
     the flow so the rows can truly sandwich it */
  .definitive-site.is-lead .def-close .def-close-copy {
    position: relative;   /* in flow, and above the sky canvas */
    z-index: 1;
    top: auto;
    left: auto;
    transform: none;
    margin: 0 auto;
    padding: 1.4rem 1.5rem;
    max-width: none;
  }
}
@media (min-width: 701px) {
  .definitive-site.is-lead .lead-close-rolls { display: none; }
}
.lead-close-rolls {
  display: grid;
  gap: 0.7rem;
  margin: 1.6rem 0;
}
.lead-close-roll {
  overflow: hidden;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.lead-close-roll-track {
  display: flex;
  gap: 0.7rem;
  width: max-content;
  will-change: transform;
}
.lead-close-roll-card {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 46vw;
  aspect-ratio: 16 / 10;
  border-radius: 0.55rem;
  overflow: hidden;
  background: #0a0c11;
}
.lead-close-roll-card .lcr-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55); /* r95r: +notch */
}
.lead-close-roll-card .lcr-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56%;
  height: 38%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 8px rgb(0 0 0 / 0.55));
}
.lead-close-roll-card .lcr-name {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84%;
  transform: translate(-50%, -50%);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.25;
  text-align: center;
  color: rgb(244 241 235 / 0.94);
  text-transform: capitalize;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.5);
}

/* the phone's menu: one voice, even air, a solid night behind it */
@media (max-width: 1024px) {
  .definitive-site.is-lead .mobile-menu {
    /* Round 62: centred on the page, and it SCROLLS when a submenu opens
       (flex + the auto-margin spacers below: centred while short, a real
       scroll when tall - grid align-content:center clips the top on iOS). */
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    /* Round 72: the top item must CLEAR the fixed nav (z 80, over the
       menu's 70) - the r62 clamp maxed at 5rem = exactly the bar's height,
       so "Video" started life underneath it and no scroll could surface
       it. Clearance = the nav's own height expression + air. */
    padding: calc(clamp(4.5rem, 3.9rem + 1.6vw, 5rem) + 2.2rem) 1.5rem clamp(2rem, 6vh, 3rem);
    /* r90-call-20, Giovani's in-app screenshot: a link opened from Messages /
       Instagram runs in SFSafariViewController, whose bottom toolbar is a
       translucent overlay ON the page - the menu's last item ("Work With
       Us") scrolled to its end and sat under that bar. The inset is the
       toolbar's height there and 0 everywhere else; the home indicator's
       air comes with it, plus 2.75rem of fixed air because the in-app
       inset cannot be verified on the Simulator - the last item clears the
       bar either way. */
    padding-bottom: calc(clamp(2rem, 6vh, 3rem) + 2.75rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    background: rgb(4 5 8 / 0.98);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 320ms ease, transform 400ms cubic-bezier(0.22, 0.61, 0.21, 1);
  }
  .definitive-site.is-lead .mobile-menu:not([hidden]) {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .definitive-site.is-lead .mobile-menu::before,
  .definitive-site.is-lead .mobile-menu::after {
    content: "";
    margin: auto;
    flex: 0 0 0px;
  }
  .definitive-site.is-lead .mobile-menu > a,
  .definitive-site.is-lead .mm-video-toggle {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.7rem, 6.4vw, 2.1rem);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: rgb(244 241 235);
    cursor: pointer;
  }
  .definitive-site.is-lead .mm-video { width: 100%; text-align: center; }
  .definitive-site.is-lead .mm-video-toggle span {
    display: inline-block;
    font-size: 0.55em;
    vertical-align: 0.28em;
    transition: transform 260ms ease;
  }
  .definitive-site.is-lead .mm-video-toggle.is-open span { transform: rotate(180deg); }
  .definitive-site.is-lead .mm-sub {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.8rem;
    justify-items: center;
  }
  .definitive-site.is-lead .mm-sub[hidden] { display: none; }
  .definitive-site.is-lead .mm-sub a {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.05rem;
    color: rgb(244 241 235 / 0.72);
  }
}

/* ---- round 37 ---- */
/* Every page swap crossfades (Chrome/Safari take this natively). */
@view-transition { navigation: auto; }

/* ---- what clients say (round 43) ---- */
/* His real Google reviews on a slow drift - the marquee's language,
   spoken in serif. A dark chapter; the head is centred like the rest. */
.definitive-site.is-lead .lead-reviews {
  padding: clamp(4rem, 9vh, 6.5rem) 0;
  overflow: hidden;
}
.definitive-site.is-lead .lead-reviews-head {
  margin-bottom: clamp(2rem, 5vh, 3.2rem);
  text-align: center;
}
.definitive-site.is-lead .lead-reviews-head h2 { margin: 0.55rem 0 0; }
.definitive-site.is-lead .lead-reviews-rail {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.definitive-site.is-lead .lead-reviews-track {
  display: flex;
  gap: clamp(1.1rem, 2.2vw, 1.8rem);
  width: max-content;
  padding: 0 2rem;
}
/* Round 54: the drift is JS now (lead.js) - draggable, wheelable, hover
   eases it instead of freezing it. */
.definitive-site.is-lead .lead-reviews-rail { cursor: grab; touch-action: pan-y; }
.definitive-site.is-lead .lead-reviews-track { will-change: transform; }
.definitive-site.is-lead .lead-reviews-track figure {
  flex: 0 0 auto;
  width: min(30rem, 78vw);
  margin: 0;
  /* Giovani, round 50: each voice in its own quiet box, drifting slower. */
  box-sizing: border-box;
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  border: 1px solid rgb(244 241 235 / 0.09);
  border-radius: 0.75rem;
  background: rgb(244 241 235 / 0.025);
}
.definitive-site.is-lead .lead-reviews-track figure > span {
  display: block;
  margin-bottom: 0.8rem;
  color: #d9b96a;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
}
.definitive-site.is-lead .lead-reviews-track blockquote {
  margin: 0 0 0.9rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: rgb(244 241 235 / 0.92);
}
.definitive-site.is-lead .lead-reviews-track figcaption {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(244 241 235 / 0.52);
}
@media (prefers-reduced-motion: reduce) {
  .definitive-site.is-lead .lead-reviews-track { animation: none; }
}


/* Round 50: the reviews head is the door to the listing itself. */
.definitive-site.is-lead .lead-reviews-head h2 a {
  color: inherit;
  text-decoration: none;
  transition: opacity 200ms ease;
}
.definitive-site.is-lead .lead-reviews-head h2 a:hover { opacity: 0.82; }
/* 9/1 PM: the ARROW only. The word-reveal engine wraps every word of the
   headline in a span too, and the bare `span` selector was shrinking all of
   them to 0.6em - "What Clients Say" read a size smaller than every other
   section head (Giovani's phone pass). */
.definitive-site.is-lead .lead-reviews-head h2 a span[aria-hidden="true"] { font-size: 0.6em; vertical-align: 0.25em; }

/* Round 50: the studio section carries two doors - Kyle himself, and his channel. */
.definitive-site.is-lead .def-about-ctas { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; }

/* Round 54, Giovani: on the phone the Instagram wall is EXACTLY three rows
   of three - eighteen tiles in narrow columns ran on forever. Desktop keeps
   its wall. */
@media (max-width: 720px) {
  .definitive-site.is-lead .def-instagram .instagram-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .definitive-site.is-lead .def-instagram .instagram-tile:nth-child(n + 10) {
    display: none;
  }
}

/* Round 54: the claim is TWO lines at every phone width - on a real iPhone
   the second line ("visual content in the galaxy.") wrapped to a third.
   Each line holds itself whole and the size follows the viewport. */
@media (max-width: 720px) {
  .definitive-site.definitive-site main section h2.lead-title {
    font-size: min(2.1rem, 6.3vw);
  }
  .is-lead .lead-title .lead-title-l1,
  .is-lead .lead-title .lead-title-l2 {
    white-space: nowrap;
  }
}


/* Round 62: coming back to the page, iOS restores the scroll-driven fold
   animations at a stale progress - the whole fold sat blurred at the top.
   For two frames after a bfcache return the timelines are detached; they
   rebuild fresh against the real scroll position. */
html.kls-refold .definitive-site.is-lead .lead-title-l1,
html.kls-refold .definitive-site.is-lead .lead-title-l2,
html.kls-refold .definitive-site.is-lead .lead-sub-in,
html.kls-refold .definitive-site.is-lead .lead-actions .lead-btn,
html.kls-refold .definitive-site.is-lead .def-hero .lead-trusted {
  animation: none !important;
}


/* Round 72: the r66 phone twos are REVERTED (Giovani: "glitched asf") -
   the two-abreast grid fought the grid's own stagger and the cards sat
   ragged with mismatched heights. The expertise stack is single-column
   on phone again; rejected concept, logged in the registry. */


/* ---- r80: the rail's closing doors + the storytold head accent ---- */
.definitive-site.is-lead .lead-rail-head h2 em {
  font-style: italic;
  color: rgb(var(--kls-accent-rgb) / 0.95);
}
.definitive-site.is-lead .lead-rail-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.9rem;
  /* r84, Giovani: a breath below the title bar, never a canyon - the
     block mounts inside the rail after .def-film-controls (lead.js), so
     this margin IS the whole gap at every viewport. */
  margin-top: clamp(1.6rem, 2.6vh, 2.4rem);
  padding: 0 1.5rem;
  position: relative;
  z-index: 5;
}


/* ---- r88: the gold word (galaxy claim) ---- */
.definitive-site .galaxy-copy .w.w-gold { color: rgb(var(--kls-accent-rgb) / 0.95); }


/* ---- r88: ONE headline system (Giovani) ----
   Every section head on the page speaks at the rail head's size; the
   fold ramp is the only larger voice. Gold rides one chosen word per
   head, the told.-treatment: italic, gold. */
.definitive-site.is-lead .galaxy-copy,
.definitive-site.is-lead #expertise-title,
.definitive-site.is-lead #studio-story-title,
.definitive-site.is-lead #studio-title,
.definitive-site.is-lead .lead-reviews h2,
.definitive-site.is-lead #learn-title,
.definitive-site.is-lead #instagram-title,
.definitive-site.is-lead #close-title {
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.definitive-site.is-lead h2 em,
.definitive-site.is-lead .lead-title em {
  font-style: italic;
  color: rgb(var(--kls-accent-rgb) / 0.95);
}


/* ============================================================ */
/* ROUND 89 — the 8/14 call, one batched layer (see docs/       */
/* ROUND-89-BRIEF.md; timestamps are receipts into the full     */
/* audio transcript).                                            */
/* ============================================================ */

/* ---- r89: the dropdown loses its box (Kyle at 03:04 — "open
   floor plan"), r89c (Giovani): but it stays CLEAN — a near-solid
   panel, not glass; see-through read as unshippable. ---- */
.definitive-site .nav-submenu,
.definitive-interior .nav-submenu {
  border: 0;
  border-radius: 0.9rem;
  background: rgb(10 11 15 / 0.98);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1.25rem 3.5rem rgb(0 0 0 / 0.6), 0 0 0 1px rgb(244 241 235 / 0.06);
  padding: 1rem 1.35rem;
}

/* ---- r89: Kyle's name wears the accent (14:37) ---- */
.definitive-site.is-lead #studio-title { color: var(--kls-accent); }

/* ---- r89: the trust band (15:33 — real numbers only) ---- */
.definitive-site .def-stats {
  padding: clamp(1.5rem, 3.5vh, 2.75rem) var(--def-pad) clamp(2.75rem, 6vh, 4.5rem);
}
.definitive-site .def-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  max-width: 62rem;
  margin: 0 auto;
  text-align: center;
}
.definitive-site .def-stat strong {
  display: block;
  font-family: var(--def-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 4.2rem);
  line-height: 1;
  color: var(--kls-accent);
  font-variant-numeric: tabular-nums;
}
.definitive-site .def-stat .def-stat-label {
  display: block;
  margin-top: 0.7rem;
  color: var(--def-muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .definitive-site .def-stats-grid {
    grid-template-columns: 1fr;
    gap: 1.9rem;
  }
}

/* ---- r89: the rail's sides blur away (09:15, 11:34 — the
   reference's vignette; neighbours read as depth, not as competing
   frames) ---- */
.definitive-site.is-lead .def-film-card:not(.is-active) {
  filter: blur(4px) brightness(0.7) saturate(0.92); /* r95r: +notch */
  transition: filter 600ms ease;
}
/* 9/1 PM: this rule outranks the base .def-film-card transition, so the
   active card was easing its brightness and SNAPPING its halo colour -
   the one frame the light is on was the one frame it could not ease on.
   Both properties ride here now. */
.definitive-site.is-lead .def-film-card.is-active { filter: none; transition: filter 600ms ease, box-shadow 480ms ease; }
.definitive-site.is-lead .def-film-stage::before,
.definitive-site.is-lead .def-film-stage::after {
  content: "";
  position: absolute;
  top: -2%;
  bottom: -2%;
  width: clamp(3rem, 9vw, 9rem);
  z-index: 3;
  pointer-events: none;
}
.definitive-site.is-lead .def-film-stage::before {
  left: 0;
  background: linear-gradient(to right, rgb(6 7 10 / 0.92), rgb(6 7 10 / 0));
}
.definitive-site.is-lead .def-film-stage::after {
  right: 0;
  background: linear-gradient(to left, rgb(6 7 10 / 0.92), rgb(6 7 10 / 0));
}

/* ---- r89: the rail enters instead of sitting there (11:04) ---- */
.definitive-site.is-lead .def-film-roll .def-film-stage,
.definitive-site.is-lead .def-film-roll .lead-rail-actions {
  opacity: 0;
  transform: translateY(2.25rem);
  transition: opacity 900ms var(--def-ease), transform 1100ms var(--def-ease);
}
/* r93c: the controls only FADE — a transform here (even mid-entrance)
   makes this box the containing block and traps the wing arrows */
.definitive-site.is-lead .def-film-roll .def-film-controls {
  opacity: 0;
  transition: opacity 900ms var(--def-ease);
}
.definitive-site.is-lead .def-film-roll.kls-rail-in .def-film-stage { opacity: 1; transform: none; }
.definitive-site.is-lead .def-film-roll.kls-rail-in .def-film-controls {
  opacity: 1;
  transform: none;
  transition-delay: 180ms;
}
.definitive-site.is-lead .def-film-roll.kls-rail-in .lead-rail-actions {
  opacity: 1;
  transform: none;
  transition-delay: 300ms;
}
@media (prefers-reduced-motion: reduce) {
  .definitive-site.is-lead .def-film-roll .def-film-stage,
  .definitive-site.is-lead .def-film-roll .def-film-controls,
  .definitive-site.is-lead .def-film-roll .lead-rail-actions {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- r89: the arrows lose the white block (10:04 — "maybe it's
   just a negative block") ---- */
.definitive-site .def-film-controls button {
  border: 0;
  background: rgb(244 241 235 / 0.07);
  color: var(--def-paper);
}
.definitive-site .def-film-controls button:hover,
.definitive-site .def-film-controls button:focus-visible {
  background: rgb(var(--kls-accent-rgb) / 0.22);
  color: var(--def-paper);
  transform: scale(1.08);
}

/* ---- r89: the mute chip, faded in the rail's corner (12:26) ---- */
.definitive-site.is-lead .kls-rail-mute {
  position: absolute;
  right: clamp(1rem, 3vw, 2.25rem);
  bottom: clamp(4.5rem, 8vh, 6.5rem);
  z-index: 6;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(6 7 10 / 0.55);
  color: rgb(244 241 235 / 0.55);
  cursor: pointer;
  opacity: 0;
  transition: opacity 400ms ease, color 220ms ease, background 220ms ease;
}
.definitive-site.is-lead .def-film-roll.kls-rail-in .kls-rail-mute { opacity: 1; }
/* r95m: the AudioWave face - squiggle window + rolling label */
.definitive-site.is-lead .kls-rail-mute { width: auto; height: 2.2rem; border-radius: 999px; padding: 0 0.9rem; display: inline-flex; align-items: center; gap: 0.55rem; }
.definitive-site.is-lead .kls-rail-mute .krm-wave { display: block; width: 2.1rem; overflow: hidden; }
.definitive-site.is-lead .kls-rail-mute .krm-wave svg { display: block; width: 100%; height: 0.7rem; overflow: visible; }
.definitive-site.is-lead .kls-rail-mute .krm-squiggle {
  animation: krm-run 1.15s linear infinite;
  transition: opacity 320ms ease, transform 420ms var(--def-ease);
  transform-origin: center;
}
.definitive-site.is-lead .kls-rail-mute .krm-flat { opacity: 0; transition: opacity 320ms ease; }
.definitive-site.is-lead .kls-rail-mute.is-muted .krm-squiggle { opacity: 0; transform: scaleY(0.12); }
.definitive-site.is-lead .kls-rail-mute.is-muted .krm-flat { opacity: 0.55; }
@keyframes krm-run { from { transform: translateX(0); } to { transform: translateX(10px); } }
@media (prefers-reduced-motion: reduce) { .definitive-site.is-lead .kls-rail-mute .krm-squiggle { animation: none; } }
.definitive-site.is-lead .kls-rail-mute .krm-roll {
  display: block;
  height: 1em;
  overflow: hidden;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}
.definitive-site.is-lead .kls-rail-mute .krm-roll i {
  display: block;
  font-style: normal;
  height: 1em;
  transform: translateY(0);
  transition: transform 460ms var(--def-ease);
}
.definitive-site.is-lead .kls-rail-mute.is-muted .krm-roll i { transform: translateY(-1em); }
.definitive-site.is-lead .kls-rail-mute:hover {
  color: rgb(244 241 235 / 0.95);
  background: rgb(6 7 10 / 0.8);
}

/* ---- r89: reviews out of their boxes (19:25 — "what this would
   look like without the boxes"). The boxed variant stays one body
   class away for the call: body.kls-boxed-reviews. ---- */
body.definitive-site.is-lead:not(.kls-boxed-reviews) .lead-reviews-track figure {
  border: 0;
  background: transparent;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.2rem, 2.2vw, 1.7rem);
}

/* ---- r89: the reviews door brightens and grows (19:05) ---- */
.definitive-site.is-lead .lead-reviews-head h2 a {
  display: inline-block;
  transition: opacity 200ms ease, transform 320ms var(--def-ease);
}
.definitive-site.is-lead .lead-reviews-head h2 a:hover {
  opacity: 1;
  transform: scale(1.035);
}
.definitive-site.is-lead .lead-reviews-head h2 a:hover span[aria-hidden="true"] { color: var(--kls-accent); }

/* ---- r89: learn cards — frame off, numbers gone, they light up
   and come forward (21:32) ---- */
.definitive-site.is-lead .def-learn-cards a:hover,
.definitive-site.is-lead .def-learn-cards a.is-focus {
  outline-color: transparent;
  outline-offset: -20px;
}
.definitive-site.is-lead .def-learn-cards a {
  transition: transform 480ms var(--def-ease), outline-color 460ms ease, outline-offset 620ms cubic-bezier(0.22, 0.61, 0.21, 1);
}
.definitive-site.is-lead .def-learn-cards a:hover,
.definitive-site.is-lead .def-learn-cards a.is-focus { transform: scale(1.045); }
.definitive-site.is-lead .def-learn-cards a:hover img,
.definitive-site.is-lead .def-learn-cards a.is-focus img {
  opacity: 1;
  filter: saturate(1.08) brightness(1.06);
}

/* ---- r89c (Giovani): the split footer is REVERTED — the centred
   composition stands. Only the Orlando line stays gone (Kyle's ask)
   and the Ensotography credit stays (Kyle approved it). ---- */
.definitive-site .footer-credit,
.definitive-interior .footer-credit {
  color: rgb(244 241 235 / 0.38);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  transition: color 200ms ease;
}
.definitive-site .footer-credit:hover,
.definitive-interior .footer-credit:hover { color: var(--kls-accent); }

/* ---- r89: the About film runs silently once you reach it (15:07) ---- */
.definitive-site .def-about-media { position: relative; }
.definitive-site .def-about-media .kls-about-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease 350ms;
}
.definitive-site .def-about-media.kls-about-playing .kls-about-live { opacity: 1; }
.definitive-site .def-about-media .story-play { z-index: 3; }


/* ============================================================ */
/* r89c — Giovani's morning pass: composed, not just stripped.   */
/* ============================================================ */

/* ---- expertise = the gallery wall. The still is the only
   rectangle; type and spacing do the separating; a staggered
   baseline turns the row into a composition. ---- */
.definitive-site.is-lead .def-service-grid {
  column-gap: clamp(1.9rem, 3.2vw, 3.6rem);
  row-gap: clamp(2.75rem, 5vh, 4.25rem);
}
.definitive-site.is-lead .def-service-grid article {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  transition: transform 480ms var(--def-ease), opacity 420ms ease;
}
.definitive-site.is-lead .def-service-grid article:hover,
.definitive-site.is-lead .def-service-grid article:focus-within {
  border-color: transparent;
  background: transparent;
  transform: translateY(-6px);
}
.definitive-site.is-lead .def-service-grid .def-service-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0.35rem;
  box-shadow: 0 1.4rem 3.25rem rgb(0 0 0 / 0.42);
}
.definitive-site.is-lead .def-service-grid article > div {
  padding: 1.2rem 0.1rem 0;
}
.definitive-site.is-lead .def-service-grid h3 {
  margin: 0 0 0.45rem;
}
/* the lights dim around the hovered discipline — the same dialect
   as the partner wall and the More-work rolls */
.definitive-site.is-lead .def-service-grid:hover article:not(:hover) { opacity: 0.55; }
.definitive-site.is-lead .def-service-grid article:hover .def-service-cta {
  color: var(--kls-accent);
}
/* r89c4 (Giovani's law): NO DRIFT — one baseline, one measure, system
   sizes. The staggered baseline is gone; the wall aligns. */

/* ---- reviews = drifting pull-quotes. Varied measures give the
   rail a rag; a gentle baseline stagger makes the drift read as
   voices in space rather than invisible boxes in a row. ---- */
.definitive-site.is-lead .lead-reviews-track {
  gap: clamp(2.4rem, 4.2vw, 4rem);
}
body.definitive-site.is-lead:not(.kls-boxed-reviews) .lead-reviews-track figure {
  padding: 0;
}
body.definitive-site.is-lead:not(.kls-boxed-reviews) .lead-reviews-track figcaption::before {
  content: "\2014\00a0";
  color: rgb(244 241 235 / 0.85); /* 9/1 (Giovani): the dash is white, not orange */
}

/* ---- the dropdown's items arrive — a quiet staggered rise, and
   the arrow takes the accent on the hovered row ---- */
.definitive-site .nav-submenu a,
.definitive-interior .nav-submenu a {
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity 240ms ease, transform 340ms cubic-bezier(0.22, 1, 0.36, 1), color 180ms ease;
}
.definitive-site .nav-group:hover .nav-submenu a,
.definitive-site .nav-group:focus-within .nav-submenu a,
.definitive-interior .nav-group:hover .nav-submenu a,
.definitive-interior .nav-group:focus-within .nav-submenu a {
  opacity: 1;
  transform: none;
}
.definitive-site .nav-group:hover .nav-submenu a:nth-child(2),
.definitive-interior .nav-group:hover .nav-submenu a:nth-child(2) { transition-delay: 30ms; }
.definitive-site .nav-group:hover .nav-submenu a:nth-child(3),
.definitive-interior .nav-group:hover .nav-submenu a:nth-child(3) { transition-delay: 60ms; }
.definitive-site .nav-group:hover .nav-submenu a:nth-child(4),
.definitive-interior .nav-group:hover .nav-submenu a:nth-child(4) { transition-delay: 90ms; }
.definitive-site .nav-group:hover .nav-submenu a:nth-child(5),
.definitive-interior .nav-group:hover .nav-submenu a:nth-child(5) { transition-delay: 120ms; }
.definitive-site .nav-group:hover .nav-submenu a:nth-child(6),
.definitive-interior .nav-group:hover .nav-submenu a:nth-child(6) { transition-delay: 150ms; }
.definitive-site .nav-group:hover .nav-submenu a:nth-child(7),
.definitive-interior .nav-group:hover .nav-submenu a:nth-child(7) { transition-delay: 180ms; }
.definitive-site .nav-group:hover .nav-submenu a:nth-child(8),
.definitive-interior .nav-group:hover .nav-submenu a:nth-child(8) { transition-delay: 210ms; }
.definitive-site .nav-submenu a::after,
.definitive-interior .nav-submenu a::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.45rem;
  opacity: 0;
  transform: translateX(-0.3rem);
  color: var(--kls-accent);
  transition: opacity 200ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.definitive-site .nav-submenu a:hover::after,
.definitive-site .nav-submenu a:focus-visible::after,
.definitive-interior .nav-submenu a:hover::after,
.definitive-interior .nav-submenu a:focus-visible::after {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .definitive-site .nav-submenu a,
  .definitive-interior .nav-submenu a { opacity: 1; transform: none; transition: none; }
}

/* ---- r89c5: alignment, not decoration. The expertise head joins the
   page's centred voice (it was the ONLY left-aligned section head on
   the route — that misalignment was the "off"); the card lockup keeps
   one rhythm; the bio speaks in ONE paragraph voice per the no-drift
   law — Kyle's verbatim live-site text, presented evenly. ---- */
.definitive-site.is-lead .def-expertise .def-section-head {
  justify-content: center;
  text-align: center;
}
.definitive-site.is-lead .def-expertise .def-section-sub {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.definitive-site.is-lead .def-service-grid article > div p {
  margin: 0 0 1.6rem;
}
.definitive-site.is-lead .def-about-lead {
  max-width: 37rem;
  margin-bottom: 2rem;
  font-family: var(--def-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--def-muted);
}

/* ---- r89c6 (Giovani): the trust numbers live under Kyle's film,
   inside the About composition — one column, one story: the film,
   the proof, the man. Uniform sizes, same tokens, no drift. ---- */
.definitive-site.is-lead .def-about-left {
  display: grid;
  gap: clamp(1.5rem, 2.6vh, 2.1rem);
  align-content: center;
  min-width: 0;
}
.definitive-site.is-lead .def-stats-grid.is-under-film {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  max-width: none;
  text-align: center;
}
.definitive-site.is-lead .def-stats-grid.is-under-film .def-stat strong {
  display: block;
  font-family: var(--def-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 2.4vw, 2.6rem);
  line-height: 1;
  color: var(--kls-accent);
  font-variant-numeric: tabular-nums;
}
.definitive-site.is-lead .def-stats-grid.is-under-film .def-stat-label {
  display: block;
  margin-top: 0.5rem;
  color: var(--def-muted);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .definitive-site.is-lead .def-stats-grid.is-under-film {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
  }
  .definitive-site.is-lead .def-stats-grid.is-under-film .def-stat strong {
    font-size: 1.45rem;
  }
}

/* ---- r89c7: two review rows drifting opposite ways; the bio's
   proof phrases step forward; Photo joins the Work menu. ---- */
.definitive-site.is-lead .lead-reviews-track + .lead-reviews-track {
  margin-top: clamp(1.6rem, 3vh, 2.4rem);
}
.definitive-site.is-lead .def-about-copy p strong {
  color: var(--def-paper);
  font-weight: 500;
}
.definitive-site .nav-group:hover .nav-submenu a:nth-child(9),
.definitive-interior .nav-group:hover .nav-submenu a:nth-child(9) { transition-delay: 240ms; }

/* ---- r89c8: home header fixes — same three decisions as the
   interior sheet, written the same round. ---- */
.definitive-site .nav-submenu {
  width: max-content;
  min-width: 12.5rem;
  max-width: 18rem;
}
.definitive-site .nav-submenu a { white-space: nowrap; }
.definitive-site .nav-submenu {
  background:
    linear-gradient(rgb(244 241 235 / 0.05), rgb(244 241 235 / 0) 42%),
    rgb(12 13 18 / 0.84);
  -webkit-backdrop-filter: blur(30px) saturate(1.6) brightness(1.08);
  backdrop-filter: blur(30px) saturate(1.6) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgb(244 241 235 / 0.08),
    0 0 0 1px rgb(244 241 235 / 0.05),
    0 1.5rem 4rem rgb(0 0 0 / 0.55);
}

/* ---- r89c8: the film plays where it stands — the control strip
   rides the film's bottom edge; the audio chip lives ON the film
   (Giovani), under its own shadow. The lightbox blurs the wall
   behind the frame and drops the meta line. ---- */
.definitive-site.is-lead .def-film-card.is-active { cursor: pointer; }
.definitive-site.is-lead .kls-film-ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 2.2rem 1.1rem 0.85rem;
  background: linear-gradient(to top, rgb(4 5 7 / 0.78), rgb(4 5 7 / 0));
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}
.definitive-site.is-lead .kls-film-ui.is-live { opacity: 1; pointer-events: auto; }
.definitive-site.is-lead .kls-film-scrub {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 999px;
  background: rgb(244 241 235 / 0.28);
  cursor: pointer;
}
.definitive-site.is-lead .kls-film-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--kls-accent);
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.6);
}
.definitive-site.is-lead .kls-film-scrub::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--kls-accent);
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.6);
}
.definitive-site.is-lead .kls-film-time {
  color: rgb(244 241 235 / 0.85);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.7);
  white-space: nowrap;
}
.definitive-site.is-lead .kls-film-ui .kls-rail-mute {
  position: static;
  opacity: 1;
  width: auto;
  height: 2rem;
  background: rgb(6 7 10 / 0.6);
  color: rgb(244 241 235 / 0.9);
  filter: drop-shadow(0 2px 8px rgb(0 0 0 / 0.7));
}
.photo-dialog::backdrop {
  background: rgb(4 5 8 / 0.42);
  -webkit-backdrop-filter: blur(26px) saturate(1.05);
  backdrop-filter: blur(26px) saturate(1.05);
}
.photo-dialog .photo-dialog-meta { display: none; }
.photo-dialog .photo-dialog-shell { will-change: transform; touch-action: pan-y; }

/* ---- r89c9 (Giovani): the floating play-cursor is retired; the
   affordance is a centred chip on the film, hover-borne. Once the
   visitor presses play, the engagement travels — the HUD rides every
   film they swipe to. ---- */
.definitive-site .def-film-cursor { display: none !important; }
.definitive-site.is-lead .kls-film-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgb(6 7 10 / 0.55);
  color: rgb(244 241 235 / 0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 24px rgb(0 0 0 / 0.5);
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}
.definitive-site.is-lead .def-film-card.is-active:hover .kls-film-play { opacity: 1; }
/* r89c9b: hard-centred glyphs — the grid centring drifted inside the
   circle; absolute + translate cannot. The triangle takes a 1px optical
   nudge right-of-mass looks centred. */
.definitive-site.is-lead .kls-film-play svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem;
  height: 1.5rem;
  transform: translate(-50%, -50%);
}
.definitive-site.is-lead .kls-film-play .kfp-play { transform: translate(-50%, -50%); }
.definitive-site.is-lead .kls-film-play .kfp-pause { display: none; }
.definitive-site.is-lead .kls-film-play.is-playing .kfp-pause { display: block; }
.definitive-site.is-lead .kls-film-play.is-playing .kfp-play { display: none; }

/* ---- r89c9b: the centre chip stands down while the film plays; the
   HUD carries its own play/pause beside the timeline. ---- */
.definitive-site.is-lead .kls-film-play.is-playing { opacity: 0 !important; }
.definitive-site.is-lead .kls-film-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(6 7 10 / 0.6);
  color: rgb(244 241 235 / 0.9);
  cursor: pointer;
  filter: drop-shadow(0 2px 8px rgb(0 0 0 / 0.7));
  transition: color 200ms ease, background 200ms ease;
}
.definitive-site.is-lead .kls-film-toggle:hover {
  color: rgb(244 241 235);
  background: rgb(6 7 10 / 0.85);
}
.definitive-site.is-lead .kls-film-toggle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  transform: translate(-50%, -50%);
}
.definitive-site.is-lead .kls-film-toggle .kft-play { transform: translate(-50%, -50%); }
.definitive-site.is-lead .kls-film-toggle .kft-pause { display: none; }
.definitive-site.is-lead .kls-film-toggle.is-playing .kft-pause { display: block; }
.definitive-site.is-lead .kls-film-toggle.is-playing .kft-play { display: none; }

/* ---- r90b3: REAL glass. An animated-opacity element isolates its
   backdrop in Chromium and the blur silently dies — the panel now
   gates with visibility+transform (the items carry the fade), so the
   backdrop-filter always samples the page. Heavier blur, lighter
   ground: the colours bleed through, nothing behind is readable. ---- */
.definitive-site .nav-submenu {
  opacity: 1;
  visibility: hidden;
  background:
    linear-gradient(rgb(244 241 235 / 0.05), rgb(244 241 235 / 0) 42%),
    rgb(11 12 17 / 0.58);
  -webkit-backdrop-filter: blur(44px) saturate(1.7) brightness(1.1);
  backdrop-filter: blur(44px) saturate(1.7) brightness(1.1);
  transition: visibility 0s linear 220ms, transform 320ms var(--def-ease);
}
.definitive-site .nav-group:hover .nav-submenu,
.definitive-site .nav-group:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  transition: visibility 0s, transform 320ms var(--def-ease);
}

/* ---- r90e: the claim is TWO LINES at EVERY width, permanently. The
   Title Case pass widened line two past its container at large
   desktops (cap 4.1rem x 12.59em = 826px vs ~794px) and it broke to a
   third line. Each line now holds itself whole and the cap fits the
   widest line with margin. One break, like the reference, always. ---- */
.is-lead .lead-title .lead-title-l1,
.is-lead .lead-title .lead-title-l2 { white-space: nowrap; }
.definitive-site.definitive-site main section h2.lead-title {
  font-size: clamp(2.1rem, 4vw, 3.8rem);
}

/* ---- r90f: LEGIBILITY IS LAW. The glass keeps its blur where the
   engine honours it, but the panel no longer depends on it: a
   near-solid ink ground with the sheen. Nothing behind is readable,
   ever, on any engine. ---- */
/* r91 (Giovani): 0.96 was not solid enough — a 4vw white serif still
   read through the 4% bleed. The ground is fully opaque now; only the
   sheen stays translucent. */
.definitive-site .nav-submenu {
  background:
    linear-gradient(rgb(244 241 235 / 0.06), rgb(244 241 235 / 0) 45%),
    rgb(10 11 15);
}

/* ---- r90g: the accent's bloom, sitewide (Giovani) — the orange
   words carry a quiet glow so they hold against any ground. ---- */
.definitive-site.is-lead h2 em,
.definitive-site.is-lead .lead-title em,
.definitive-site .galaxy-copy .w.w-gold,
.definitive-site.is-lead .lead-rail-head h2 em,
.definitive-site .def-stat strong,
.definitive-site .def-stats-grid.is-under-film .def-stat strong,
.definitive-site.is-lead #studio-title,
.is-lead .lead-eyebrow {
  text-shadow: 0 0 20px rgb(var(--kls-accent-rgb) / 0.4);
}

/* ============================================================ */
/* r91 — Giovani's 2026-08-19 revision round.                    */
/* ============================================================ */

/* ---- 1. THE OPENING AT 1.25x (the rolls demo's Version 5 won).
   Pure CSS, every shipped timing x0.8 — compositor-native, same
   frames, faster hand-off to the fold. The done() clock in
   index.html and the landing clock in lead.js are scaled to
   match (1720 / 1040). ---- */
.definitive-site.is-lead .kls-intro-scene,
.kls-opening .definitive-site.is-lead .kls-intro-scene {
  animation: kls-intro-scene-life 1720ms linear 0ms both,
             kls-intro-approach 1200ms linear 120ms both,
             kls-intro-rush 440ms linear 880ms both;
}
.definitive-site.is-lead .kls-intro-drum,
.kls-opening .definitive-site.is-lead .kls-intro-drum {
  animation: kls-intro-spin-total 1720ms linear both;
}
html.kls-opening .definitive-site.is-lead .kls-intro {
  animation: kls-intro-out 384ms cubic-bezier(0.16, 1, 0.3, 1) 1296ms both;
}
/* the ghost trails are the slices' own pseudo-elements */
.definitive-site.is-lead .kls-intro-slice::before,
.definitive-site.is-lead .kls-intro-slice::after {
  animation-duration: 1360ms;
  animation-delay: 800ms;
}
.definitive-site.is-lead .kls-intro-flash {
  animation: kls-intro-flash-in 192ms ease-out 1200ms both;
}

/* ---- 2. EXPERTISE, RETHOUGHT: the still IS the card. Four
   cinematic panels running edge to edge; the type lives ON the
   image over its own gradient floor. No card box exists anymore,
   so no frame can ghost back on hover — the hover is the film
   waking: the frame brightens, breathes, and the action goes
   accent. ---- */
.definitive-site.is-lead .def-expertise { overflow-x: clip; }
.definitive-site.is-lead .def-service-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  margin-top: clamp(2.2rem, 4.5vw, 4rem);
  margin-left: calc(50% - 50dvw);
  margin-right: calc(50% - 50dvw);
  max-width: none;
}
.definitive-site.is-lead .def-service-grid article,
.definitive-site.is-lead .def-service-grid article:hover,
.definitive-site.is-lead .def-service-grid article:focus-within {
  position: relative;
  display: block;
  min-height: clamp(23rem, 58vh, 32rem);
  border: 0;
  border-radius: 0;
  background: #0a0c11;
  overflow: hidden;
  transform: none;
  transition: none;
}
.definitive-site.is-lead .def-service-grid .def-service-media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  background: #0a0c11;
}
/* the grade: dimmed at rest, a deep floor under the words */
.definitive-site.is-lead .def-service-grid .def-service-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(6 7 10 / 0.34), rgb(6 7 10 / 0.04) 40%,
    rgb(6 7 10 / 0.36) 68%, rgb(6 7 10 / 0.9) 100%);
}
.definitive-site.is-lead .def-service-grid img {
  filter: saturate(0.88) brightness(0.7);
}
.definitive-site.is-lead .def-service-grid article:hover img,
.definitive-site.is-lead .def-service-grid article:focus-within img {
  filter: saturate(1.05) brightness(0.94);
  transform: scale(1.045);
}
.definitive-site.is-lead .def-service-grid article > div {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1.5rem clamp(1.1rem, 1.8vw, 1.7rem) 1.45rem;
}
.definitive-site.is-lead .def-service-grid h3 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.45rem, 1.7vw, 1.9rem);
  text-shadow: 0 2px 18px rgb(6 7 10 / 0.85);
}
.definitive-site.is-lead .def-service-grid article > div p {
  margin: 0 0 1rem;
  max-width: 17rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgb(244 241 235 / 0.78);
  text-shadow: 0 1px 12px rgb(6 7 10 / 0.85);
}
.definitive-site.is-lead .def-service-grid .def-service-cta {
  text-shadow: 0 1px 12px rgb(6 7 10 / 0.85);
}
/* the lights still dim around the hovered discipline */
.definitive-site.is-lead .def-service-grid:hover article:not(:hover) img {
  filter: saturate(0.8) brightness(0.5);
}
/* phone: the panels stack full-bleed, shorter, type centred (the
   r72 law stands: a single column, never twos) */
@media (max-width: 720px) {
  .definitive-site.is-lead .def-service-grid {
    grid-template-columns: 1fr;
    max-width: none;
    gap: 3px;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
  }
  .definitive-site.is-lead .def-service-grid article {
    min-height: clamp(17rem, 44vh, 24rem);
  }
  .definitive-site.is-lead .def-service-grid article > div {
    align-items: center !important;
    padding-bottom: 1.6rem;
  }
  .definitive-site.is-lead .def-service-grid article > div p { max-width: 22rem; }
}

/* ---- r93 (Giovani, pre-call): the rail's arrows leave the meta row and
   ride the wings — bare glyphs over the blurred neighbours, no circle.
   The client name and count stay centred beneath the stage. ---- */
.definitive-site.is-lead .def-film-roll { position: relative; }
.definitive-site.is-lead .def-film-roll .def-film-controls,
.definitive-site.is-lead .def-film-controls {
  position: static;
  grid-template-columns: 1fr;
  width: min(20rem, calc(100% - 2.5rem));
}
.definitive-site.is-lead .def-film-roll .def-film-controls button,
.definitive-site.is-lead .def-film-controls button {
  position: absolute;
  /* r94f (Giovani): centred on the STAGE, not the section - lead.js
     measures the stage's middle into --kls-wing-top (the 46% is only the
     pre-measure fallback). */
  top: var(--kls-wing-top, 46%);
  transform: translateY(-50%);
  z-index: 6;
  width: auto;
  height: auto;
  padding: 0.6rem 0.8rem;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  line-height: 1;
  color: rgb(244 241 235 / 0.72);
  text-shadow: 0 2px 16px rgb(6 7 10 / 0.8);
  transition: color 220ms ease, transform 260ms var(--def-ease), opacity 220ms ease;
}
.definitive-site.is-lead .def-film-controls button:hover,
.definitive-site.is-lead .def-film-controls button:focus-visible {
  color: rgb(244 241 235);
  background: none;
  border-color: transparent;
}
.definitive-site.is-lead .def-film-roll .def-film-controls [data-film-prev],
.definitive-site.is-lead .def-film-controls [data-film-prev] { left: clamp(0.6rem, 3.5vw, 3.4rem); right: auto; }
.definitive-site.is-lead .def-film-roll .def-film-controls [data-film-next],
.definitive-site.is-lead .def-film-controls [data-film-next] { right: clamp(0.6rem, 3.5vw, 3.4rem); left: auto; }
.definitive-site.is-lead .def-film-controls [data-film-prev]:hover { transform: translateY(-50%) translateX(-3px); }
.definitive-site.is-lead .def-film-controls [data-film-next]:hover { transform: translateY(-50%) translateX(3px); }


/* ============================================================ */
/* r90-call-3 - the opening IS the fold. No plate, no mark: the  */
/* claim, subline, buttons and trusted marks rise into focus     */
/* over the reel's first frame the moment the page paints. Pure  */
/* CSS, `both` fills - it can never trap the page. Same voice    */
/* and stagger as the landing the roll used to hand to.          */
/* ============================================================ */
@keyframes kls-fold-rise {
  from { opacity: 0; transform: translate3d(0, 30px, 0); filter: blur(7px); }
  60%  { filter: blur(0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
html.kls-rise .definitive-site.is-lead .lead-title,
html.kls-rise .definitive-site.is-lead .lead-sub,
html.kls-rise .definitive-site.is-lead .lead-actions,
html.kls-rise .definitive-site.is-lead .lead-trusted-label,
html.kls-rise .definitive-site.is-lead .lead-marquee {
  animation: kls-fold-rise 980ms cubic-bezier(0.22, 0.6, 0.2, 1) both;
}
html.kls-rise .definitive-site.is-lead .lead-sub { animation-delay: 140ms; }
html.kls-rise .definitive-site.is-lead .lead-actions { animation-delay: 280ms; }
html.kls-rise .definitive-site.is-lead .lead-trusted-label { animation-delay: 430ms; }
html.kls-rise .definitive-site.is-lead .lead-marquee { animation-delay: 540ms; }

/* ---- r90-call-7: round 54's phone cap, RE-ASSERTED. r90e re-declared
   the claim's size later in the sheet at equal weight and order handed
   it the win - the min() died and the second line ran off real iPhones
   again. The cap now closes the file: at any phone width the widest
   line fits the glass with margin. ---- */
@media (max-width: 720px) {
  .definitive-site.definitive-site main section h2.lead-title {
    font-size: min(2.1rem, 6.3vw);
  }
}

/* NOTE 9/1: the quad is NO LONGER on the homepage - the switch rail
   below replaced it there. connected.html still renders it and shares
   this sheet, so the block stays. Do not delete it without checking
   that page first. */
/* ============================================================ */
/* r90-call-8 - THE QUAD. The call's pick, solidified: four      */
/* frames, the discipline dead-centre; colourless at rest, the   */
/* hover wakes the film in colour under a deep scrim, the name   */
/* glides up as the line and the accent action arrive beneath.   */
/* The frame stays dim enough that the words and the action     */
/* always win (Giovani: the film was overshadowing the CTA).     */
/* ============================================================ */
.definitive-site.is-lead .def-expertise { overflow-x: clip; }
/* r90-call-8b (Giovani): the frames were stretching into ribbons on a
   wide display - fixed height, unbounded width. Each frame is a true
   3:2 now (a square on a phone), and the grid caps at 1680px centred
   so a 5K screen never pulls them wide. */
.definitive-site.is-lead .def-quad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 9/1 (Giovani): tiles slightly apart, and NOT touching the screen
     edges - the grid sits on the section's own gutter now (the r90 full
     bleed is retired), which also makes each frame read smaller. */
  gap: clamp(0.6rem, 1.2vw, 1rem);
  margin-top: clamp(2.2rem, 4.5vw, 4rem);
  max-width: 96rem;
  margin-left: auto;
  margin-right: auto;
}
/* r90-call-10b (Giovani): NO whitespace beside the grid - full bleed at
   every width. Proportion holds through the ratio instead: 3:2 up to
   1700px, 16:9 beyond so two rows never tower. */
@media (min-width: 1700px) {
  .definitive-site.is-lead .def-quad-cell { aspect-ratio: 21 / 9; }
}
.definitive-site.is-lead .def-quad-cell {
  position: relative;
  display: block;
  /* lab/loom-round (Kyle 01:41): compressed to a widescreen band - they took
     too much vertical room on desktop */
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: #0a0c11;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.definitive-site.is-lead .def-quad-cell img,
.definitive-site.is-lead .def-quad-cell video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* lab/loom-round (Kyle 01:38): colour by default - no more B&W at rest.
     9/1 (Giovani): "it should already be colour naturally" - a touch
     brighter at rest so the colour reads, not the dim. */
  filter: brightness(0.62) saturate(1) contrast(1.02);
  transition: filter 760ms ease, opacity 700ms ease, transform 1100ms cubic-bezier(0.22, 0.61, 0.21, 1);
}
.definitive-site.is-lead .def-quad-cell video { opacity: 0; }
.definitive-site.is-lead .def-quad-cell:hover img,
.definitive-site.is-lead .def-quad-cell.is-awake img { filter: grayscale(0) brightness(0.56); transform: scale(1.035); }
.definitive-site.is-lead .def-quad-cell.is-awake video { opacity: 1; filter: grayscale(0) brightness(0.5); }
.definitive-site.is-lead .def-quad-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 76% at 50% 50%, rgb(6 7 10 / 0.22) 28%, rgb(6 7 10 / 0.72) 100%);
}
.definitive-site.is-lead .def-quad-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 1.2rem;
}
.definitive-site.is-lead .def-quad-copy h3 {
  margin: 0;
  font-family: var(--def-display);
  font-size: clamp(1.7rem, 2.6vw, 2.6rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: rgb(244 241 235);
  text-shadow: 0 2px 22px rgb(6 7 10 / 0.95), 0 1px 6px rgb(6 7 10 / 0.8);
}
/* the room beneath the name opens as a row: 0fr to 1fr, so the centred
   block grows and the name glides up by exactly half the growth */
.definitive-site.is-lead .def-quad-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 620ms cubic-bezier(0.22, 0.61, 0.21, 1);
}
.definitive-site.is-lead .def-quad-more > div {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 380ms ease, transform 520ms cubic-bezier(0.22, 0.61, 0.21, 1);
}
.definitive-site.is-lead .def-quad-cell:hover .def-quad-more,
.definitive-site.is-lead .def-quad-cell.is-awake .def-quad-more { grid-template-rows: 1fr; }
.definitive-site.is-lead .def-quad-cell:hover .def-quad-more > div,
.definitive-site.is-lead .def-quad-cell.is-awake .def-quad-more > div {
  opacity: 1;
  transform: none;
  transition-delay: 120ms;
}
.definitive-site.is-lead .def-quad-copy p {
  margin: 0.7rem 0 0;
  max-width: 22rem;
  color: rgb(244 241 235 / 0.86);
  font-size: 0.92rem;
  line-height: 1.5;
  text-shadow: 0 1px 14px rgb(6 7 10 / 0.95);
}
.definitive-site.is-lead .def-quad-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.95rem;
  padding-bottom: 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kls-accent);
  text-shadow: 0 1px 14px rgb(6 7 10 / 0.95);
}
/* touch: no hover to wake - the frame is the name and the door */
@media (hover: none) {
  .definitive-site.is-lead .def-quad-cell img { filter: brightness(0.5) saturate(0.98); }
}
@media (max-width: 720px) {
  /* 9/1 PM (Giovani): "the squares should be less big" - the phone stacks
     widescreen tiles, not full-width squares */
  .definitive-site.is-lead .def-quad { gap: 0.6rem; margin-top: clamp(1.6rem, 4vw, 2.4rem); grid-template-columns: 1fr; }
  .definitive-site.is-lead .def-quad-cell { aspect-ratio: 16 / 9; }
  .definitive-site.is-lead .def-quad-copy h3 { font-size: clamp(1.25rem, 5.4vw, 1.7rem); }
}

/* ============================================================ */
/* 9/1 - THE SWITCH RAIL. The quad is retired. One rail of      */
/* disciplines, one stage; exactly one card is live at a time.  */
/* Hover or keyboard focus hands the wake over - the line and   */
/* the door open beneath the name while the previous closes,    */
/* and the stage crossfades to that discipline's film. Text     */
/* lives entirely on the rail; the media stays clean, no scrim, */
/* no words over it. Square frames, no cards, no shadows.       */
/* layout: svc-06 (vertical-rail variant) + split-01 anatomy.   */
/* ============================================================ */
.definitive-site.is-lead .def-expertise { overflow-x: clip; }

.definitive-site.is-lead .kls-disc {
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.4vw, 4.4rem);
  align-items: start;
  margin-top: clamp(2.4rem, 5vw, 4.6rem);
  /* The stage runs off the right edge. This chapter has always been
     full-bleed; the asymmetry is the point - the rail keeps the page's
     own gutter and the film leaves the frame. */
  margin-right: calc(var(--def-pad) * -1);
}
/* r90-call-8b's law, kept: a 5K screen never pulls the pair wide. */
@media (min-width: 1700px) {
  .definitive-site.is-lead .kls-disc {
    max-width: 104rem;
    margin-right: auto;
    margin-left: auto;
  }
}

/* ---- the rail ---- */
.definitive-site.is-lead .kls-disc-rail { display: grid; }

.definitive-site.is-lead .kls-disc-card {
  position: relative;
  display: block;
  padding: clamp(1.1rem, 2.3vh, 1.75rem) 0 clamp(1.1rem, 2.3vh, 1.75rem) clamp(0.95rem, 1.5vw, 1.5rem);
  color: rgb(244 241 235 / 0.6);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
/* The hairline is a SYSTEM - every seam in the rail, nowhere else.
   No line has ever separated two chapters on this site and none does
   here either; this rules a ledger, it does not divide the page. */
.definitive-site.is-lead .kls-disc-card + .kls-disc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, rgb(244 241 235 / 0.1), transparent 82%);
}
/* the live mark: one thin accent rule, drawn top-down */
.definitive-site.is-lead .kls-disc-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 1px;
  background: var(--kls-accent, #fb5607);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.21, 1);
}
.definitive-site.is-lead .kls-disc-card.is-live::after { transform: scaleY(1); }

.definitive-site.is-lead .kls-disc-card h3 {
  margin: 0;
  font-family: var(--def-display);
  font-size: clamp(1.55rem, 2.85vw, 2.6rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: rgb(244 241 235 / 0.58);
  transition: color 320ms ease, transform 520ms cubic-bezier(0.22, 0.61, 0.21, 1);
}
.definitive-site.is-lead .kls-disc-card:hover h3 { color: rgb(244 241 235 / 0.88); }
.definitive-site.is-lead .kls-disc-card.is-live h3 {
  color: rgb(244 241 235);
  transform: translateX(0.5rem);
}
.definitive-site.is-lead .kls-disc-card:focus-visible {
  outline: 1px solid rgb(244 241 235 / 0.35);
  outline-offset: 2px;
}

/* The room beneath the name opens as a row: 0fr to 1fr, a real animated
   height. No opacity of our own in here - the site-wide reveal engine
   owns the <p>'s fade, and two stacked fades read as a flicker. */
.definitive-site.is-lead .kls-disc-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms cubic-bezier(0.22, 0.61, 0.21, 1);
}
.definitive-site.is-lead .kls-disc-more > div { overflow: hidden; min-height: 0; }
.definitive-site.is-lead .kls-disc-card.is-live .kls-disc-more { grid-template-rows: 1fr; }

/* The three-line budget: two lines of line, one line of door. The
   measure is deliberately tighter than the column so all four
   disciplines wrap to the SAME two lines at every width - a measure
   that let one card run to two lines and the rest to one made the rail
   change height as the wake moved (the no-drift law, and svc-06's
   no-jump check). One value, no per-breakpoint drift. */
.definitive-site.is-lead .kls-disc-more p {
  margin: 0.55rem 0 0 0.5rem;
  max-width: 25rem;
  color: rgb(244 241 235 / 0.62);
  font-size: 0.88rem;
  line-height: 1.55;
}
.definitive-site.is-lead .kls-disc-cta {
  display: inline-block;
  margin: 0.85rem 0 0.15rem 0.5rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(244 241 235 / 0.5);
  transition: color 300ms ease;
}
.definitive-site.is-lead .kls-disc-card.is-live .kls-disc-cta { color: var(--kls-accent, #fb5607); }

/* ---- the stage: one square frame, clean media, no overlay ---- */
.definitive-site.is-lead .kls-disc-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0b0c0f;
}
.definitive-site.is-lead .kls-disc-poster,
.definitive-site.is-lead .kls-disc-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* one treatment for the whole set */
  filter: brightness(0.9) saturate(1) contrast(1.02);
  transition: opacity 350ms ease;
}
.definitive-site.is-lead .kls-disc-poster.is-on,
.definitive-site.is-lead .kls-disc-film.is-on { opacity: 1; }
.definitive-site.is-lead .kls-disc-film { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .definitive-site.is-lead .kls-disc-more,
  .definitive-site.is-lead .kls-disc-card h3,
  .definitive-site.is-lead .kls-disc-card::after,
  .definitive-site.is-lead .kls-disc-poster,
  .definitive-site.is-lead .kls-disc-film { transition: none; }
  .definitive-site.is-lead .kls-disc-card.is-live h3 { transform: none; }
}

/* ---- stacked: the rail first, the stage directly under it ---- */
@media (max-width: 899px) {
  .definitive-site.is-lead .kls-disc {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 5vw, 2.3rem);
    margin-right: 0;
    margin-top: clamp(1.8rem, 5vw, 2.6rem);
  }
  .definitive-site.is-lead .kls-disc-rail { order: 1; }
  .definitive-site.is-lead .kls-disc-stage {
    order: 2;
    /* on a phone the film takes both edges */
    margin-left: calc(var(--def-pad) * -1);
    margin-right: calc(var(--def-pad) * -1);
  }
  .definitive-site.is-lead .kls-disc-card h3 { font-size: clamp(1.5rem, 6.6vw, 2.1rem); }
  .definitive-site.is-lead .kls-disc-more p { font-size: 0.86rem; }
}

/* ---- r90-call-10 (Giovani): two courses now, not three - the pair sits
   centred at its own size instead of hugging the left of a three-up
   grid. The phone rail below 700px keeps its own rule. ---- */
@media (min-width: 701px) {
  .definitive-site.is-lead .def-learn-cards {
    grid-template-columns: repeat(2, minmax(0, 26rem));
    justify-content: center;
  }
}

/* ============================================================ */
/* r94i (Giovani): the Learn section's LIVE variations. The     */
/* previously-shipped cards stay the default; Index and Diptych */
/* switch in place via the quiet mono tabs in the section head. */
/* No divider strokes anywhere - seams carry on the ground.     */
/* ============================================================ */
.definitive-site.is-lead .def-learn [data-lv-pane] { display: none; }
.definitive-site.is-lead .def-learn[data-lv="current"] [data-lv-pane="current"] { display: grid; }
.definitive-site.is-lead .def-learn[data-lv="index"] [data-lv-pane="index"] { display: grid; }
.definitive-site.is-lead .def-learn[data-lv="diptych"] [data-lv-pane="diptych"] { display: grid; }
/* lab/loom-round: the alternating-rows pane (Kyle 02:55) joins the switch */
.definitive-site.is-lead .def-learn[data-lv="rows"] [data-lv-pane="rows"] { display: grid; }

/* the lab's floating pill bar, mounted by lead.js; visible only while
   the Learn section is on screen so nothing else is ever obstructed */
.kls-lv-bar {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  z-index: 90;
  transform: translateX(-50%) translateY(0.6rem);
  display: flex;
  gap: 0.4rem;
  padding: 0.45rem;
  border-radius: 999px;
  background: rgb(11 12 15 / 0.92);
  box-shadow: 0 0 0 1px rgb(244 241 235 / 0.1), 0 12px 30px -12px rgb(0 0 0 / 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms ease, transform 460ms cubic-bezier(0.22, 0.61, 0.21, 1);
}
.kls-lv-bar.is-vis { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.kls-lv-bar button {
  padding: 0.5rem 0.95rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(244 241 235 / 0.55);
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease;
}
.kls-lv-bar button.is-on { background: rgb(244 241 235 / 0.12); color: rgb(244 241 235); }

/* ---- Index ---- */
.definitive-site.is-lead .def-learn-index {
  /* r95e (Kyle 8/24): the frame reads at half its old presence - the index
     rows carry the section, the image seasons it. */
  grid-template-columns: 1.6fr 0.8fr;
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: center;
  max-width: 74rem;
  margin: 0 auto;
}
.definitive-site.is-lead .dlx-rows { display: grid; }
.definitive-site.is-lead .dlx-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.2rem;
  align-items: baseline;
  padding: clamp(1.3rem, 2.6vh, 2rem) 0.4rem;
  text-decoration: none;
  color: rgb(244 241 235);
}
.definitive-site.is-lead .dlx-row + .dlx-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0.4rem;
  right: 0.4rem;
  height: 1px;
  background: linear-gradient(to right, rgb(244 241 235 / 0.13), transparent 82%);
}
.definitive-site.is-lead .dlx-row .no { font-family: "IBM Plex Mono", monospace; font-size: 0.66rem; letter-spacing: 0.16em; color: var(--kls-accent, #fb5607); }
.definitive-site.is-lead .dlx-row .nm { font-family: var(--def-display); font-size: clamp(1.5rem, 2.6vw, 2.4rem); font-weight: 400; line-height: 1.1; transition: transform 520ms var(--def-ease), color 300ms ease; }
.definitive-site.is-lead .dlx-row .mt { font-family: "IBM Plex Mono", monospace; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(244 241 235 / 0.55); transition: color 300ms ease; }
.definitive-site.is-lead .dlx-row .ln { grid-column: 2 / 4; margin-top: 0.35rem; max-width: 30rem; color: rgb(244 241 235 / 0.62); font-size: 0.9rem; line-height: 1.55; opacity: 0; transform: translateY(6px); transition: opacity 340ms ease, transform 480ms var(--def-ease); }
.definitive-site.is-lead .dlx-row:hover .nm, .definitive-site.is-lead .dlx-row.is-hot .nm { transform: translateX(0.55rem); }
.definitive-site.is-lead .dlx-row:hover .mt, .definitive-site.is-lead .dlx-row.is-hot .mt { color: var(--kls-accent, #fb5607); }
.definitive-site.is-lead .dlx-row:hover .ln, .definitive-site.is-lead .dlx-row.is-hot .ln { opacity: 1; transform: none; }
.definitive-site.is-lead .dlx-frame { position: relative; aspect-ratio: 4 / 5; max-width: 22rem; justify-self: end; border-radius: 0.4rem; overflow: hidden; background: #0b0c0f; }
.definitive-site.is-lead .dlx-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 700ms ease, transform 1400ms var(--def-ease); }
.definitive-site.is-lead .dlx-frame img.is-on { opacity: 1; transform: scale(1); }
.definitive-site.is-lead .dlx-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(6 7 10 / 0.55), transparent 45%); }
.definitive-site.is-lead .dlx-frame .tag { position: absolute; z-index: 2; left: 1.1rem; bottom: 1rem; font-family: "IBM Plex Mono", monospace; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(244 241 235 / 0.6); }

/* ---- Diptych (the Quad's language) ---- */
.definitive-site.is-lead .def-learn-dip { grid-template-columns: 1fr 1fr; gap: 2px; max-width: 80rem; margin: 0 auto; }
.definitive-site.is-lead .def-learn-dip a { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; text-decoration: none; color: rgb(244 241 235); background: #0b0c0f; }
.definitive-site.is-lead .def-learn-dip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.42) contrast(1.04); transition: filter 760ms ease, transform 1100ms var(--def-ease); }
.definitive-site.is-lead .def-learn-dip a:hover img,
.definitive-site.is-lead .def-learn-dip a.is-awake img { filter: grayscale(0) brightness(0.52); transform: scale(1.04); }
.definitive-site.is-lead .def-learn-dip a::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 90% 76% at 50% 50%, rgb(6 7 10 / 0.2) 30%, rgb(6 7 10 / 0.72) 100%); }
.definitive-site.is-lead .def-learn-dip .cp { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; text-align: center; padding: 1.2rem; }
.definitive-site.is-lead .def-learn-dip h3 { margin: 0; font-family: var(--def-display); font-size: clamp(1.6rem, 2.5vw, 2.5rem); font-weight: 400; text-shadow: 0 2px 22px rgb(6 7 10 / 0.95); }
.definitive-site.is-lead .def-learn-dip .more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 620ms var(--def-ease); }
.definitive-site.is-lead .def-learn-dip .more > div { overflow: hidden; min-height: 0; opacity: 0; transform: translateY(10px); transition: opacity 380ms ease, transform 520ms var(--def-ease); }
.definitive-site.is-lead .def-learn-dip a:hover .more,
.definitive-site.is-lead .def-learn-dip a.is-awake .more { grid-template-rows: 1fr; }
.definitive-site.is-lead .def-learn-dip a:hover .more > div,
.definitive-site.is-lead .def-learn-dip a.is-awake .more > div { opacity: 1; transform: none; transition-delay: 110ms; }
.definitive-site.is-lead .def-learn-dip .more p { margin: 0.7rem 0 0; max-width: 21rem; color: rgb(244 241 235 / 0.86); font-size: 0.92rem; line-height: 1.5; }
.definitive-site.is-lead .def-learn-dip .cta { display: inline-block; margin-top: 0.95rem; font-family: "IBM Plex Mono", monospace; font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kls-accent, #fb5607); }

@media (max-width: 860px) {
  .definitive-site.is-lead .def-learn-index { grid-template-columns: 1fr; }
  .definitive-site.is-lead .dlx-frame { display: none; }
  .definitive-site.is-lead .dlx-row .ln { opacity: 1; transform: none; }
  .definitive-site.is-lead .def-learn-dip { grid-template-columns: 1fr; }
  .definitive-site.is-lead .def-learn-dip a { aspect-ratio: 16 / 11; }
  .definitive-site.is-lead .def-learn-switch { gap: 1.2rem; }
}

/* ==== r95l: THE DEPTH ROLL - variation B of Recent Stories (Giovani 8/25,
   Framer Depth Blur Carousel reference: perspective fan, rotateY falloff,
   Z-recession, blur-with-depth). SAME engine, same vars, same audio - this
   is only a different composition of --film-x/turn/scale. The switch never
   moves the section's box, so nothing above or below ever reflows. ==== */
.definitive-site.is-lead .def-film-roll[data-rv="depth"] .def-film-stage {
  perspective: 700px;
}
.definitive-site.is-lead .def-film-roll[data-rv="depth"] .def-film-card {
  transform: translate3d(calc(-50% + var(--film-x, 0px) * 0.82), calc(-50% + var(--film-drop, 0%)), 0)
    rotateY(calc(var(--film-turn, 0deg) * 3.4))
    translateZ(calc((1 - var(--film-scale, 1)) * -640px))
    scale(calc((var(--film-scale, 1) * 0.45 + 0.55) * var(--film-hover, 1)));
}
.definitive-site.is-lead .def-film-roll[data-rv="depth"] .def-film-card:not(.is-active) {
  filter: blur(calc((1 - var(--film-scale, 1)) * 11px))
    brightness(calc(1 - (1 - var(--film-scale, 1)) * 0.95))
    saturate(0.92);
}
.definitive-site.is-lead .def-film-roll[data-rv="depth"] .def-film-card.is-active { filter: none; }
/* the swap itself: a brief morph window where transform/filter glide -
   removed right after so the engine's per-frame writes never fight it */
.definitive-site.is-lead .def-film-roll.is-morph .def-film-card {
  transition: transform 760ms var(--def-ease), filter 760ms var(--def-ease) !important;
}

/* ==== r95o: OUR IMPACT - the reference's anatomy in our shell.
   Giant uppercase Playfair display, dimmed second line, the light arc
   sweeping beneath, one door, the divided strip. Galaxy behind. ==== */
.definitive-site.is-lead .def-impact {
  position: relative;
  overflow: clip;
  padding: clamp(4.5rem, 10vh, 8rem) 0 0;
  text-align: center;
  background: #06070a;
}
.definitive-site.is-lead .def-impact > .lead-galaxy-canvas { position: absolute; inset: 0; z-index: 0; }
.definitive-site.is-lead .def-impact .di-stage {
  position: relative;
  z-index: 2;
  padding: 0 clamp(1.2rem, 5vw, 4rem);
}
.definitive-site.is-lead .def-impact .di-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(244 241 235 / 0.6);
}
.definitive-site.is-lead .def-impact .di-dia { font-size: 0.7rem; color: rgb(244 241 235 / 0.45); }
.definitive-site.is-lead .def-impact h2 {
  position: relative;
  z-index: 3;
  margin: 1.4rem auto 0;
  max-width: 64rem;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: rgb(244 241 235 / 0.96);
}
.definitive-site.is-lead .def-impact h2 .row2 { display: block; }
.definitive-site.is-lead .def-impact h2 .dim { color: rgb(244 241 235 / 0.36); }
.definitive-site.is-lead .def-impact .di-arc {
  /* the crescent: full bleed, its bowl wraps the sub + the door */
  position: absolute;
  left: 50%;
  top: clamp(8rem, 20vh, 14rem);
  transform: translateX(-50%);
  width: max(100vw, 90rem);
  height: auto;
  z-index: 1;
  pointer-events: none;
}
/* r95o: the arc DRAWS itself when the chapter arrives, then breathes */
.definitive-site.is-lead .def-impact .di-arc-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.definitive-site.is-lead .def-impact .di-arc-glow,
.definitive-site.is-lead .def-impact .di-dust { opacity: 0; transition: opacity 900ms ease 900ms; }
.definitive-site.is-lead .def-impact.is-lit .di-arc-line {
  animation: di-draw 1700ms var(--def-ease) forwards;
}
.definitive-site.is-lead .def-impact.is-lit .di-arc-glow { opacity: 1; animation: di-breathe 5.5s ease-in-out 2.6s infinite; }
.definitive-site.is-lead .def-impact.is-lit .di-dust { opacity: 1; }
@keyframes di-draw { to { stroke-dashoffset: 0; } }
@keyframes di-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .definitive-site.is-lead .def-impact .di-arc-line { stroke-dashoffset: 0; animation: none; }
  .definitive-site.is-lead .def-impact .di-arc-glow { animation: none; }
}
.definitive-site.is-lead .def-impact .di-sub {
  position: relative;
  z-index: 3;
  margin: 1.6rem auto 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgb(244 241 235 / 0.66);
}
.definitive-site.is-lead .def-impact .di-actions { position: relative; z-index: 3; margin-top: 1.8rem; }
.definitive-site.is-lead .def-impact .di-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(3.4rem, 9vh, 6rem);
  border-top: 1px solid rgb(244 241 235 / 0.12);
}
.definitive-site.is-lead .def-impact .di-stat {
  position: relative;
  padding: clamp(2rem, 4.5vh, 3rem) 0.8rem;
}
.definitive-site.is-lead .def-impact .di-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  height: 56%;
  width: 1px;
  background: rgb(244 241 235 / 0.14);
}
.definitive-site.is-lead .def-impact .di-stat:first-child::before { display: none; }
.definitive-site.is-lead .def-impact .di-stat strong {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  color: rgb(244 241 235 / 0.95);
}
.definitive-site.is-lead .def-impact .di-label {
  display: block;
  margin-top: 0.6rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(244 241 235 / 0.5);
}
@media (max-width: 760px) {
  .definitive-site.is-lead .def-impact .di-strip { grid-template-columns: 1fr 1fr; }
  .definitive-site.is-lead .def-impact .di-stat:nth-child(3) { border-left: 0; }
  .definitive-site.is-lead .def-impact .di-stat { border-top: 1px solid rgb(244 241 235 / 0.12); }
  .definitive-site.is-lead .def-impact .di-stat:nth-child(-n+2) { border-top: 0; }
  .definitive-site.is-lead .def-impact .di-arc { top: clamp(8rem, 24vh, 13rem); width: 140vw; }
}

/* r95q: the closing pair (ported from the lab - Giovani approved) */
.definitive-site.is-lead .def-close-copy .close-actions {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(1.4rem, 3vh, 2rem);
}


/* ============================================================ */
/* 9/1 (Giovani) — ONE ROOM LIGHT, EVERY FRAME THAT PLAYS.       */
/* ============================================================ */

/* lead.js samples whatever video is actually playing and writes its
   averaged colour into --kls-glow on the frame. This is the only place
   that renders it, so the rail, the studio window, the expertise stage
   and the learn film all throw light of the same shape and the same
   strength - one system, not four glows.

   Nothing paints until the sampler has spoken (.is-roomlit is added on
   the first real sample), so a frame whose video never plays never grows
   a shadow out of the fallback colour. The gates that stop the sampler
   live in lead.js; these are the same gates said in CSS, because the
   lowpower tell can land while a frame is already lit. */
.definitive-site.is-lead .kls-roomlit {
  /* 9/1 PM: 480ms, paired with lead.js writing every 2nd sample - the
     room follows a cut in under half a second instead of trailing it */
  transition: box-shadow 480ms ease;
}
.definitive-site.is-lead .kls-roomlit.is-roomlit {
  box-shadow: 0 0 110px -18px var(--kls-glow, rgb(120 140 200 / 0.4)),
              0 0 34px -10px var(--kls-glow, rgb(120 140 200 / 0.35));
}
/* the learn frame keeps its own hairline underneath the light */
.definitive-site.is-lead .lnx-lmedia.kls-roomlit.is-roomlit {
  box-shadow: 0 0 0 1px rgb(244 241 235 / 0.08),
              0 0 110px -18px var(--kls-glow, rgb(120 140 200 / 0.4)),
              0 0 34px -10px var(--kls-glow, rgb(120 140 200 / 0.35));
}

/* The gates, said again where the light is painted - the lowpower tell can
   land on a frame that is ALREADY lit, and the light has to leave without
   taking the frame's own hairline with it. */
html.kls-lowpower .definitive-site.is-lead .kls-roomlit.is-roomlit,
html.kls-lowpower .definitive-site.is-lead .def-film-card.is-active {
  box-shadow: none;
}
html.kls-lowpower .definitive-site.is-lead .lnx-lmedia.kls-roomlit.is-roomlit {
  box-shadow: 0 0 0 1px rgb(244 241 235 / 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .definitive-site.is-lead .kls-roomlit,
  .definitive-site.is-lead .def-film-card { transition: none; }
  .definitive-site.is-lead .kls-roomlit.is-roomlit,
  .definitive-site.is-lead .lnx-lmedia.kls-roomlit.is-roomlit,
  .definitive-site.is-lead .def-film-card.is-active { box-shadow: none; }
  .definitive-site.is-lead .lnx-lmedia.kls-roomlit.is-roomlit {
    box-shadow: 0 0 0 1px rgb(244 241 235 / 0.08);
  }
}

/* ---- 9/1 (Giovani): the studio headline breaks on its own accent ----
   "The Studio Behind" is the first line and "the Stories" is the second,
   at every width - the break is STRUCTURAL (the accent is a block), never
   a measure that happens to wrap there at one viewport. Size, leading and
   tracking are untouched: they belong to the is-lead role rule above
   (#studio-story-title joined that id list in 40d2bac0 and the one measure
   per role stands). */
.definitive-site.is-lead #studio-story-title em {
  display: block;
}

/* ---- 9/1 (Giovani): "the video on the right side seems too small" ----
   The columns square up: 1.08/0.92 was copy-weighted, and the frame is the
   only thing moving in this section. Equal columns hand the window ~9%
   more width (482 -> 524 at 1440) while the copy column still clears its
   own measures - the 30rem subheadline and the 2x13rem stat pair - so the
   composition stays the reference's two-column balance, not a stretch. */
.definitive-site.is-lead .kls-studio-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* The phone still stacks: this rule out-specifies lnx.css's own stack
   query, so it has to carry the stack itself. */
@media (max-width: 900px) {
  .definitive-site.is-lead .kls-studio-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ============================================================ */
/* 9/1 PM mobile pass (Giovani, 390).                            */
/* ============================================================ */
/* 7. The Learn lab is retired on phones: the rows ARE the section, no
   pill, no second pane bleeding through under it. */
@media (max-width: 900px) {
  .definitive-site.is-lead .def-learn [data-lv-pane]:not([data-lv-pane="rows"]) { display: none !important; }
  .definitive-site.is-lead .def-learn [data-lv-pane="rows"] { display: grid !important; }
  .kls-lv-bar { display: none !important; }
}
@media (max-width: 720px) {
  /* 5. One section-headline size on a phone. Two tokens were in play (the
     uniform ramp's 8.4vw and the lead sheet's clamp); every h2 takes the
     lead size now, the reviews door included (its inner link inherits). */
  /* uniform.css's section law (main section h2:not(.galaxy-copy), 0-4-1)
     outranks any scoped rule here, so the token itself is retuned on the
     lead body: the ramp's 8.4vw becomes the lead sheet's own clamp, and the
     sections that size themselves already sit on that value. */
  .definitive-site.is-lead { --u-h2: clamp(1.9rem, 7.8vw, 2.4rem); }
  .definitive-site.is-lead .lead-reviews-head h2 a { font-size: inherit; }
  /* 9. Work With Us: the pair side by side, tight under the line */
  .definitive-site.is-lead .def-close-copy p { margin-bottom: 0; }
  .definitive-site.is-lead .def-close-copy .close-actions { flex-wrap: nowrap; gap: 0.6rem; margin-top: 1rem; }
  .definitive-site.is-lead .def-close-copy .close-actions .lead-btn { flex: 1 1 0; min-width: 0; justify-content: center; padding-left: 0.7rem; padding-right: 0.7rem; white-space: nowrap; }
}

/* ---- 9/1 (Giovani): the studio film's play UI - the theatre bar's voice
   inside the frame, only while the film runs (lead.js mounts it). ---- */
.definitive-site.is-lead .kls-studio-frame { position: relative; }
.definitive-site.is-lead .kls-studio-hud {
  position: absolute;
  z-index: 4;
  right: clamp(0.8rem, 3vw, 1.6rem);
  bottom: clamp(0.8rem, 2.4vw, 1.4rem);
  left: clamp(0.8rem, 3vw, 1.6rem);
  display: flex;
  align-items: center;
  gap: clamp(0.55rem, 1.4vw, 1rem);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.definitive-site.is-lead .kls-studio-hud.is-live { opacity: 1; pointer-events: auto; transform: none; }
.definitive-site.is-lead .kls-studio-hud button {
  flex: none;
  margin: 0;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--def-line);
  border-radius: 999px;
  background: rgba(6, 7, 10, 0.72);
  color: var(--def-paper);
  font: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.definitive-site.is-lead .kls-studio-hud button:hover,
.definitive-site.is-lead .kls-studio-hud button:focus-visible {
  border-color: rgba(244, 241, 235, 0.5);
  background: rgba(244, 241, 235, 0.12);
}
.definitive-site.is-lead .kls-shud-track {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  overflow: hidden;
  background: rgba(244, 241, 235, 0.2);
  cursor: pointer;
}
.definitive-site.is-lead .kls-shud-track::before { position: absolute; inset: -0.75rem 0; content: ""; }
.definitive-site.is-lead .kls-shud-track i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--def-paper);
  transform: scaleX(0);
  transform-origin: left center;
}
.definitive-site.is-lead .kls-shud-time {
  flex: none;
  color: var(--def-muted);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .definitive-site.is-lead .kls-studio-hud { gap: 0.5rem; }
  .definitive-site.is-lead .kls-studio-hud button { padding: 0.62rem 0.75rem; font-size: 0.56rem; }
  .definitive-site.is-lead .kls-shud-time { display: none; }
}

/* the learn cards' film (lead.js): a second <video> over the loop, under
   the HUD; the loop keeps the frame's size. */
.definitive-site.is-lead .def-learn .ln-vcard { position: relative; }
/* ---- 9/2 (Giovani): one film UI everywhere - the rail's bar and chip on
   any film host (studio window, learn cards, course hero). ---- */
.definitive-site.is-lead [data-film-host] { position: relative; }
.definitive-site.is-lead [data-film-host]:hover .kls-film-play { opacity: 1; }
.definitive-site.is-lead [data-film-host] .kls-film-play.is-playing { opacity: 0 !important; }
/* 9/2 (phone audit): no hover on a touch screen, so the chip stands at rest
   on every film host and on the rail's active card - it only leaves while
   the film runs (the is-playing rule above). */
@media (hover: none) {
  .definitive-site.is-lead [data-film-host] .kls-film-play,
  .definitive-site.is-lead .def-film-card.is-active .kls-film-play { opacity: 1; }
  /* 9/2 (Giovani): "way too big" on phones - 4.4rem -> 3rem */
  .definitive-site.is-lead .kls-film-play { width: 3rem; height: 3rem; }
  .definitive-site.is-lead .kls-film-play svg { width: 1.1rem; height: 1.1rem; }
}
.definitive-site.is-lead [data-film-host] .kls-film-ui button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  aspect-ratio: auto;
  overflow: visible;
  box-shadow: none;
  transform: none;
  inset: auto;
}
.definitive-site.is-lead [data-film-host] .kls-film-ui .kls-film-toggle { width: 2.2rem; height: 2.2rem; border-radius: 50%; padding: 0; }
.definitive-site.is-lead [data-film-host] .kls-film-ui .kls-rail-mute { position: static; opacity: 1; width: auto; height: 2rem; border-radius: 999px; padding: 0 0.9rem; }
.definitive-site.is-lead [data-film-host] .kls-film-ui .kls-rail-mute:hover { transform: none; }

.definitive-site.is-lead .def-learn .ln-vcard .kls-learn-film {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  cursor: pointer;
}

/* 9/1 (Giovani: "the pepsi logo is still not fixed, the insignia should be
   coloured"): the chapter's logo track flattens every mark to white
   (definitive.css .def-logo-track img); the colour Pepsi lockup is the one
   exception - the globe keeps its red and blue. */
.definitive-site .def-logo-track img[src*="/color/pepsi"] { filter: none; }


/* ============================================================ */
/* 9/1 PM (Giovani, phone screenshot of the rail): "video UI on   */
/* mobile looks off... those arrows should not be there. They     */
/* should be on the film roll itself."                            */
/* ============================================================ */
@media (max-width: 720px) {
  /* mobile.css pulled the wings back into the meta row on phones
     (position: static) - the r93 law holds everywhere now: the arrows
     ride the stage's wings over the blurred neighbours, centred on the
     stage's middle (--kls-wing-top, measured by lead.js). */
  body.definitive-site.is-lead .def-film-roll .def-film-controls [data-film-prev],
  body.definitive-site.is-lead .def-film-roll .def-film-controls [data-film-next] {
    position: absolute;
    top: var(--kls-wing-top, 46%);
    transform: translateY(-50%);
    padding: 0.5rem 0.45rem;
    font-size: 1.55rem;
  }
  body.definitive-site.is-lead .def-film-roll .def-film-controls [data-film-prev] { left: 0.35rem; right: auto; }
  body.definitive-site.is-lead .def-film-roll .def-film-controls [data-film-next] { right: 0.35rem; left: auto; }
  body.definitive-site.is-lead .def-film-roll .def-film-controls { justify-content: center; }
  body.definitive-site.is-lead .def-film-roll .def-film-controls p { width: 100%; }
  /* the caption ("COMMERCIAL") was meant to be off on phones (definitive
     .css <=620) - an unmedia'd `> span small { display:block }` outranked
     it, and the film HUD then landed on top of the word */
  .definitive-site.is-lead .def-film-card > span small { display: none; }
  /* the film HUD in a phone's card: one tight row that fits the width -
     smaller disc, tighter gaps, the sound pill icon-only */
  .definitive-site.is-lead .kls-film-ui { gap: 0.45rem; padding: 1.5rem 0.6rem 0.55rem; }
  .definitive-site.is-lead .kls-film-toggle { width: 1.85rem; height: 1.85rem; }
  .definitive-site.is-lead .kls-film-time { font-size: 0.56rem; letter-spacing: 0.04em; }
  .definitive-site.is-lead .kls-film-ui .kls-rail-mute { height: 1.8rem; padding: 0 0.55rem; gap: 0; }
  .definitive-site.is-lead .kls-film-ui .kls-rail-mute .krm-roll { display: none; }
}