/* ==========================================================================
   Kisaka service scene
   Long-form service page: kicker rules, control-plane diagrams, a stacked
   capability atlas, reading rows and a sticky section rail.
   Brand tokens (fonts, red, easings) come from style.css :root.
   Used by: information-technology-consultancy.html
   ========================================================================== */
.kisaka-scene
   {
      --scene-ink: #14151f;
      --scene-ink-soft: #33364a;
      --scene-body: #4d5160;
      --scene-muted: #6b6f7a;
      --scene-faint: #9aa0ab;
      --scene-page: #f6f7f9;
      --scene-panel: #ffffff;
      --scene-line: #e3e5eb;
      --scene-line-strong: #c9cdd6;
      --scene-accent: var(--kisaka-red, #cb1f34);
      --scene-dark: #000000;
      --scene-dark-2: #0a0b0c;
      --scene-dark-line: rgba(255, 255, 255, 0.16);
      --scene-dark-body: rgba(255, 255, 255, 0.72);
      --scene-dark-faint: rgba(255, 255, 255, 0.45);
      --scene-ease: var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
      --scene-ink-ease: cubic-bezier(0.645, 0.045, 0.355, 1);
      --scene-rise-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
      --scene-hero-stroke: rgba(255, 255, 255, 0.32);
      --scene-gutter: clamp(20px, 5vw, 72px);
      --scene-max: 1460px;
      --scene-rail-w: 216px;
      --scene-strip-h: 54px;
      --scene-hero-floor: calc(100dvh - var(--kisaka-header-h, 72px));
      --scene-top: calc(var(--kisaka-header-h, 72px) + var(--scene-strip-h) + 16px);
      background: var(--scene-page);
      color: var(--scene-ink);
   }

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

/* style.css colours bare h2/h3 globally; inside the scene every heading takes
   its colour from the surface it sits on (light panel vs dark panel). */
.kisaka-scene :where(h1, h2, h3, h4, h5, h6, dt, dd, p)
   {
      color: inherit;
   }

.scene-shell
   {
      width: 100%;
      max-width: var(--scene-max);
      margin: 0 auto;
      padding-left: var(--scene-gutter);
      padding-right: var(--scene-gutter);
   }

/* --------------------------------------------------------------------------
   Reveal primitive
   -------------------------------------------------------------------------- */
.scene-reveal
   {
      opacity: 0;
      transform: translate3d(0, 18px, 0);
      transition: opacity 620ms var(--scene-ease) var(--scene-delay, 0ms), transform 720ms var(--scene-ease) var(--scene-delay, 0ms);
      will-change: opacity, transform;
   }

.scene-reveal.is-in
   {
      opacity: 1;
      transform: none;
   }

/* --------------------------------------------------------------------------
   Shared type
   -------------------------------------------------------------------------- */
.scene-kicker
   {
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 0 0 20px;
      font-family: var(--kisaka-font-accent, inherit);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--scene-faint);
   }

.scene-kicker a
   {
      color: inherit;
      text-decoration: none;
   }

.scene-kicker a:hover, .scene-kicker a:focus-visible
   {
      color: var(--scene-ink);
   }

.scene-kicker a:active
   {
      color: var(--scene-ink);
   }

.scene-kicker__trail
   {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      min-width: 0;
   }

.scene-kicker__back
   {
      display: inline-flex;
      align-items: center;
      gap: 0.32em;
      min-height: 44px;
      padding: 10px 0;
      margin: -10px 0;
      color: var(--scene-accent);
      letter-spacing: 0.12em;
      transition: color 100ms ease-out, transform 100ms ease-out;
   }

.scene-kicker__back:hover, .scene-kicker__back:focus-visible, .scene-kicker__back:active
   {
      color: var(--kisaka-red, #cb1f34);
   }

.scene-kicker__back:active
   {
      transform: scale(0.97);
   }

/* Path stays one run; trailing tracking on the link used to shove the slash away. */
.scene-kicker__path
   {
      min-width: 0;
      letter-spacing: 0.12em;
   }

.scene-kicker__path a
   {
      margin-inline-end: -0.12em;
      color: var(--scene-accent);
      transition: color 100ms ease-out, transform 100ms ease-out;
   }

.scene-kicker__path a:hover, .scene-kicker__path a:focus-visible
   {
      color: var(--kisaka-red, #cb1f34);
   }

.scene-kicker__path a:active
   {
      color: var(--kisaka-red, #cb1f34);
      transform: scale(0.97);
   }

.scene-kicker__sep
   {
      color: color-mix(in srgb, var(--scene-accent) 55%, transparent);
   }

.scene-kicker__leaf
   {
      color: var(--scene-accent);
   }

@media (prefers-contrast: more)
   {
      .scene-kicker__back, .scene-kicker__path a
         {
            color: var(--scene-accent);
         }

      .scene-hero .scene-kicker__back, .scene-hero .scene-kicker__path a
         {
            color: #fff;
         }

      .scene-kicker__sep
         {
            color: var(--scene-accent);
         }

      .scene-hero .scene-kicker__sep
         {
            color: #fff;
         }

      .scene-hero .scene-kicker__leaf
         {
            color: var(--scene-accent);
         }
   }

.scene-kicker__rule
   {
      flex: 0 1 300px;
      height: 1px;
      background: linear-gradient(to right, var(--scene-line-strong), transparent);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 900ms var(--scene-ease) 120ms;
   }

.is-in .scene-kicker__rule, .scene-kicker.is-in .scene-kicker__rule
   {
      transform: scaleX(1);
   }

.scene-title
   {
      margin: 0;
      font-family: var(--kisaka-font-family, inherit);
      font-size: clamp(2.2rem, 5.2vw, 4.1rem);
      font-weight: 350;
      line-height: 1.02;
      letter-spacing: -0.025em;
      color: var(--scene-ink);
   }

.scene-title strong
   {
      font-weight: 700;
   }

.scene-lead
   {
      margin: 20px 0 0;
      max-width: 62ch;
      font-size: clamp(0.98rem, 1.15vw, 1.08rem);
      line-height: 1.68;
      color: var(--scene-body);
   }

.scene-section
   {
      padding: clamp(72px, 11vh, 140px) 0;
      scroll-margin-top: var(--scene-top);
   }

.scene-section--tight
   {
      padding-top: clamp(48px, 7vh, 92px);
   }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.scene-hero
   {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      min-height: 100svh;
      min-height: 100dvh;
      overflow: hidden;
      background-color: var(--scene-dark);
      background-image: radial-gradient(circle, var(--scene-dark-2), var(--scene-dark));
      color: #fff;
      padding: calc(var(--kisaka-header-h, 72px) + clamp(20px, 3.6vh, 40px)) 0 calc(clamp(24px, 4vh, 40px) + env(safe-area-inset-bottom, 0px));
   }

.scene-hero > .scene-shell
   {
      position: relative;
      z-index: 1;
      width: 100%;
   }

.scene-hero .scene-kicker
   {
      color: var(--scene-dark-faint);
   }

.scene-hero .scene-kicker__back, .scene-hero .scene-kicker__path a
   {
      color: #fff;
   }

.scene-hero .scene-kicker__back:hover,
.scene-hero .scene-kicker__back:focus-visible,
.scene-hero .scene-kicker__back:active,
.scene-hero .scene-kicker__path a:hover,
.scene-hero .scene-kicker__path a:focus-visible,
.scene-hero .scene-kicker__path a:active
   {
      color: #fff;
   }

.scene-hero .scene-kicker__sep
   {
      color: rgba(255, 255, 255, 0.42);
   }

.scene-hero .scene-kicker__leaf
   {
      color: var(--kisaka-red, #cb1f34);
   }

.scene-hero .scene-kicker__rule
   {
      background: linear-gradient(to right, var(--scene-dark-line), transparent);
      transition: transform 1000ms var(--scene-ink-ease) 100ms;
   }

.scene-hero__title
   {
      margin: clamp(8px, 1.4vh, 16px) 0 0;
      font-family: var(--kisaka-font-family, inherit);
      line-height: 0.88;
      letter-spacing: -0.045em;
      text-transform: uppercase;
   }

/* Ink fill: an outlined copy of the line sits under a solid copy that is
   masked by a raking gradient. Animating --ink walks that gradient across the
   glyphs, so the headline draws itself in rather than sliding up. */
@property --ink
   {
      syntax: "<number>";
      inherits: false;
      initial-value: -12;
   }

.scene-hero__line
   {
      position: relative;
      display: block;
   }

.scene-hero__ghost, .scene-hero__ink
   {
      display: block;
   }

.scene-hero__ghost
   {
      color: transparent;
      -webkit-text-stroke: 1px var(--scene-hero-stroke);
      text-stroke: 1px var(--scene-hero-stroke);
   }

.scene-hero__ink
   {
      --ink: -12;
      position: absolute;
      inset: 0;
      -webkit-mask-image: linear-gradient( 100deg, #000 calc(var(--ink) * 1%), transparent calc((var(--ink) + 10) * 1%) );
      mask-image: linear-gradient( 100deg, #000 calc(var(--ink) * 1%), transparent calc((var(--ink) + 10) * 1%) );
      transition: --ink 1300ms var(--scene-ink-ease) var(--scene-delay, 0ms);
      will-change: --ink;
   }

.scene-hero__title.is-in .scene-hero__ink
   {
      --ink: 112;
   }

.scene-hero__line--thin .scene-hero__ghost, .scene-hero__line--thin .scene-hero__ink
   {
      font-size: clamp(2.1rem, 6.4vw, 5.4rem);
      font-weight: 200;
   }

.scene-hero__line--thin .scene-hero__ink
   {
      color: rgba(255, 255, 255, 0.82);
   }

.scene-hero__line--bold .scene-hero__ghost, .scene-hero__line--bold .scene-hero__ink
   {
      font-size: clamp(2.6rem, 8.6vw, 7.2rem);
      font-weight: 800;
   }

.scene-hero__line--bold .scene-hero__ink
   {
      color: #fff;
   }

.scene-hero__line--bold .scene-hero__ghost::after, .scene-hero__line--bold .scene-hero__ink::after
   {
      content: ".";
   }

.scene-hero__line--bold .scene-hero__ink::after
   {
      color: var(--scene-accent);
   }

.scene-hero__lead.scene-reveal
   {
      transform: translate3d(0, 14px, 0);
      transition: opacity 800ms var(--scene-rise-ease) var(--scene-delay, 0ms), transform 800ms var(--scene-rise-ease) var(--scene-delay, 0ms);
   }

.scene-hero__lead.scene-reveal.is-in
   {
      transform: none;
   }

.scene-hero__lead
   {
      margin: clamp(28px, 4.8vh, 48px) 0 0;
      max-width: 40rem;
      font-family: var(--kisaka-font-accent, inherit);
      font-size: clamp(1.05rem, 1.55vw, 1.28rem);
      font-weight: 300;
      line-height: 1.62;
      color: rgba(255, 255, 255, 0.58);
   }

/* The hero is exactly one screen, so its floor is 100dvh less the header.
   Lift by the ticker’s own height to sit the marquee on that floor. */
.scene-hero__ticker
   {
      position: fixed;
      left: 0;
      right: 0;
      top: var(--kisaka-header-h, 72px);
      z-index: 44;
      flex: none;
      width: 100%;
      min-width: 0;
      margin: 0;
      padding: clamp(8px, 1.4vh, 14px) 0;
      overflow: hidden;
      transform: translate3d(0, calc(var(--scene-hero-floor) - 100% - clamp(24px, 4vh, 40px) + var(--scene-ticker-exit, 0px)), 0);
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--scene-gutter), #000 calc(100% - var(--scene-gutter)), transparent 100%);
      mask-image: linear-gradient(to right, transparent 0, #000 var(--scene-gutter), #000 calc(100% - var(--scene-gutter)), transparent 100%);
      pointer-events: none;

      /* Coming back onto the hero floor is an arrival and takes its time; the
         exit below is quicker, because leaving carries no information. */
      transition: opacity 320ms var(--scene-ease), transform 320ms var(--scene-ease), visibility 0s linear 0s;
   }

/* Leaves downward, through the floor it was resting on, rather than
   dissolving in place while the marquee is still running sideways. */
.kisaka-scene.is-past-hero .scene-hero__ticker
   {
      --scene-ticker-exit: 14px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 200ms var(--scene-ease), transform 200ms var(--scene-ease), visibility 0s linear 200ms;
   }

.scene-hero__track
   {
      display: flex;
      width: max-content;
      animation: scene-hero-marquee 44s linear infinite;
      will-change: transform;
   }

/* Nothing to see once the hero has gone: stop the 44s loop and hand back the
   layer it was holding for the rest of the page. */
.kisaka-scene.is-past-hero .scene-hero__track
   {
      animation-play-state: paused;
      will-change: auto;
   }

.scene-hero__group
   {
      display: flex;
      flex: none;
      margin: 0;
      padding: 0;
      list-style: none;
   }

.scene-hero__item
   {
      flex: none;
      position: relative;
      padding-left: 4.6em;
      color: rgba(255, 255, 255, 0.88);
      font-family: var(--kisaka-font-accent, inherit);
      font-size: 0.8125rem;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      white-space: nowrap;
   }

.scene-hero__item::before
   {
      content: "";
      position: absolute;
      top: 50%;
      left: 1.15em;
      width: 2.1em;
      height: 0.7em;
      transform: translateY(-50%);
      background-color: var(--scene-accent);
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16' fill='%23000'%3E%3Crect x='0' y='7' width='15' height='2'/%3E%3Cpolygon points='17,8 24,3 24,13'/%3E%3Cpolygon points='26,3 33,8 26,13'/%3E%3Crect x='35' y='7' width='13' height='2'/%3E%3C/svg%3E");
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16' fill='%23000'%3E%3Crect x='0' y='7' width='15' height='2'/%3E%3Cpolygon points='17,8 24,3 24,13'/%3E%3Cpolygon points='26,3 33,8 26,13'/%3E%3Crect x='35' y='7' width='13' height='2'/%3E%3C/svg%3E");
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-size: contain;
   }

@keyframes scene-hero-marquee
   {
      from
         {
            transform: translate3d(0, 0, 0);
         }

      to
         {
            transform: translate3d(-50%, 0, 0);
         }
   }

@media (max-width: 767px)
   {
      .scene-hero__item
         {
            padding-left: 3.6em;
            font-size: 0.75rem;
            letter-spacing: 0.06em;
         }

      .scene-hero__item::before
         {
            left: 0.85em;
            width: 1.85em;
         }
   }

.scene-hero__actions
   {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: clamp(26px, 4vh, 42px);
   }

/* Buttons ------------------------------------------------------------------ */
.scene-btn
   {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 26px;
      border: 1px solid transparent;
      border-radius: var(--kisaka-btn-radius, 8px);
      font-family: var(--kisaka-font-accent, inherit);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-decoration: none;
      transition: background-color 280ms var(--scene-ease), border-color 280ms var(--scene-ease), color 280ms var(--scene-ease), transform 280ms var(--scene-ease);
   }

.scene-btn__arrow
   {
      transition: transform 320ms var(--scene-ease);
   }

.scene-btn:hover .scene-btn__arrow, .scene-btn:focus-visible .scene-btn__arrow
   {
      transform: translate3d(3px, -3px, 0);
   }

.scene-btn--solid
   {
      background: var(--scene-accent);
      border-color: var(--scene-accent);
      color: #fff;
   }

.scene-btn--solid:hover, .scene-btn--solid:focus-visible
   {
      background: var(--kisaka-red-700, #9e1829);
      border-color: var(--kisaka-red-700, #9e1829);
      color: #fff;
   }

.scene-btn--ghost
   {
      background: transparent;
      border-color: rgba(255, 255, 255, 0.38);
      color: #fff;
   }

.scene-btn--ghost:hover, .scene-btn--ghost:focus-visible
   {
      background: rgba(255, 255, 255, 0.1);
      border-color: #fff;
      color: #fff;
   }

/* --------------------------------------------------------------------------
   Body grid + sticky section rail
   -------------------------------------------------------------------------- */
.scene-body
   {
      position: relative;
   }

.scene-rail
   {
      position: fixed;
      top: 50%;
      right: clamp(16px, 2.4vw, 40px);
      z-index: 40;
      width: var(--scene-rail-w);
      transform: translate3d(0, -50%, 0);
      opacity: 0;
      visibility: hidden;
      transition: opacity 420ms var(--scene-ease), visibility 0s linear 420ms;
   }

.scene-rail.is-visible
   {
      opacity: 1;
      visibility: visible;
      transition: opacity 420ms var(--scene-ease), visibility 0s linear 0s;
   }

.scene-rail__label
   {
      margin: 0 0 14px;
      font-family: var(--kisaka-font-accent, inherit);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--scene-faint);
   }

.scene-rail__list
   {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 11px;
   }

.scene-rail__link
   {
      display: grid;
      grid-template-columns: 26px 22px 1fr;
      align-items: start;
      gap: 10px;
      font-family: var(--kisaka-font-accent, inherit);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.14em;
      line-height: 1.5;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--scene-faint);
      transition: color 280ms var(--scene-ease);
   }

.scene-rail__dash
   {
      margin-top: 7px;
      height: 1px;
      width: 10px;
      background: var(--scene-line-strong);
      transition: width 380ms var(--scene-ease), background-color 380ms var(--scene-ease);
   }

.scene-rail__link:hover, .scene-rail__link:focus-visible
   {
      color: var(--scene-ink);
   }

.scene-rail__link.is-active
   {
      color: var(--scene-ink);
   }

.scene-rail__link.is-active .scene-rail__dash
   {
      width: 26px;
      background: var(--scene-accent);
   }

/* The rail sits over dark sections too. */
.scene-rail.is-on-dark .scene-rail__label, .scene-rail.is-on-dark .scene-rail__link
   {
      color: var(--scene-dark-faint);
   }

.scene-rail.is-on-dark .scene-rail__link.is-active
   {
      color: #fff;
   }

.scene-rail.is-on-dark .scene-rail__dash
   {
      background: var(--scene-dark-line);
   }

/* --------------------------------------------------------------------------
   01 — Contrast cards (current vs target)
   -------------------------------------------------------------------------- */
.scene-contrast__grid
   {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(18px, 2.4vw, 32px);
      margin-top: clamp(36px, 5vh, 60px);
   }

.scene-card
   {
      padding: clamp(26px, 3vw, 40px);
      border-radius: 4px;
      background: transparent;
   }

.scene-card--current
   {
      border: 1px dashed var(--scene-line-strong);
      color: var(--scene-muted);
   }

.scene-card--target
   {
      border: 1px solid var(--scene-ink);
      background: var(--scene-panel);
      box-shadow: 0 24px 60px -44px rgba(20, 21, 31, 0.55);
   }

.scene-card__tag
   {
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 18px;
      font-family: var(--kisaka-font-accent, inherit);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--scene-faint);
   }

.scene-card__mark
   {
      width: 7px;
      height: 7px;
      border: 1px solid currentColor;
   }

.scene-card--target .scene-card__tag
   {
      color: var(--scene-accent);
   }

.scene-card--target .scene-card__mark
   {
      background: var(--scene-accent);
      border-color: var(--scene-accent);
   }

.scene-card__title
   {
      color: var(--scene-ink);
      margin: 0 0 14px;
      font-size: clamp(1.4rem, 2.4vw, 1.9rem);
      font-weight: 400;
      letter-spacing: -0.018em;
      line-height: 1.16;
   }

.scene-card--current .scene-card__title
   {
      color: var(--scene-faint);
   }

.scene-card__text
   {
      margin: 0;
      font-family: var(--kisaka-font-accent, inherit);
      font-size: 0.97rem;
      font-weight: 300;
      line-height: 1.66;
      color: inherit;
   }

.scene-card--target .scene-card__text
   {
      color: var(--scene-body);
   }

/* --------------------------------------------------------------------------
   02 / 03 — Build diagram (control plane + stage flow)
   -------------------------------------------------------------------------- */
.scene-build
   {
      display: grid;
      grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
      gap: clamp(24px, 3.4vw, 56px);
      margin-top: clamp(36px, 5vh, 60px);
      align-items: start;
   }

.scene-build__steps
   {
      list-style: none;
      margin: 0;
      padding: 0 0 0 18px;
      border-left: 1px solid var(--scene-line);
      display: grid;
      gap: 26px;
   }

.scene-build__step
   {
      position: relative;
   }

.scene-build__step::before
   {
      content: "";
      position: absolute;
      left: -19px;
      top: 6px;
      width: 1px;
      height: 0;
      background: var(--scene-accent);
      transition: height 420ms var(--scene-ease);
   }

.scene-build__step.is-active::before
   {
      height: calc(100% - 4px);
   }

.scene-build__step-head
   {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin: 0 0 6px;
   }

.scene-build__step-n
   {
      font-family: var(--kisaka-font-accent, inherit);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.16em;
      color: var(--scene-faint);
      transition: color 280ms var(--scene-ease);
   }

.scene-build__step.is-active .scene-build__step-n
   {
      color: var(--scene-accent);
   }

.scene-build__step-title
   {
      margin: 0;
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--scene-ink);
   }

.scene-build__step-text
   {
      margin: 0;
      font-size: 0.87rem;
      line-height: 1.6;
      color: var(--scene-muted);
   }

.scene-build__panel
   {
      position: relative;
      padding: clamp(22px, 2.6vw, 38px);
      border: 1px solid var(--scene-line);
      border-radius: 4px;
      background: var(--scene-panel);
      overflow: hidden;
   }

.scene-build__panel-head
   {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px 20px;
      margin-bottom: clamp(20px, 3vh, 34px);
   }

.scene-build__panel-title
   {
      color: var(--scene-ink);
      margin: 0;
      font-size: clamp(1.05rem, 1.7vw, 1.35rem);
      font-weight: 600;
      letter-spacing: -0.015em;
   }

.scene-build__panel-title span
   {
      font-weight: 300;
      color: var(--scene-faint);
   }

.scene-build__legend
   {
      display: flex;
      gap: 18px;
      font-family: var(--kisaka-font-accent, inherit);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--scene-faint);
   }

.scene-build__legend span
   {
      display: inline-flex;
      align-items: center;
      gap: 7px;
   }

.scene-build__legend span::before
   {
      content: "";
      width: 6px;
      height: 6px;
      background: var(--scene-line-strong);
   }

.scene-build__legend span:first-child::before
   {
      background: var(--scene-accent);
   }

/* Control plane ------------------------------------------------------------ */
.scene-plane
   {
      position: relative;
      padding: 16px clamp(14px, 2vw, 28px) 18px;
      border: 1px dashed var(--scene-line-strong);
      border-radius: 3px;
      margin-bottom: 30px;
   }

.scene-plane__label
   {
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      padding: 0 10px;
      background: var(--scene-panel);
      font-family: var(--kisaka-font-accent, inherit);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--scene-faint);
      white-space: nowrap;
   }

.scene-plane__nodes
   {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 14px;
   }

.scene-plane__node
   {
      padding: 10px 16px;
      border: 1px solid var(--scene-line);
      border-radius: 3px;
      text-align: center;
      background: var(--scene-page);
   }

.scene-plane__node b
   {
      display: block;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--scene-ink);
   }

.scene-plane__node em
   {
      display: block;
      margin-top: 3px;
      font-family: var(--kisaka-font-accent, inherit);
      font-size: 8.5px;
      font-style: normal;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--scene-faint);
   }

/* Stage flow --------------------------------------------------------------- */
.scene-flow
   {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      align-items: stretch;
      gap: clamp(8px, 1.4vw, 22px);
   }

.scene-stage
   {
      position: relative;
      display: block;
      width: 100%;
      padding: 14px 10px 12px;
      border: 1px solid var(--scene-line);
      border-radius: 3px;
      background: var(--scene-panel);
      font: inherit;
      text-align: center;
      cursor: pointer;
      transition: border-color 320ms var(--scene-ease), background-color 320ms var(--scene-ease), transform 320ms var(--scene-ease);
   }

.scene-stage + .scene-stage::before
   {
      content: "";
      position: absolute;
      top: 50%;
      right: 100%;
      width: clamp(8px, 1.4vw, 22px);
      height: 1px;
      background: var(--scene-line-strong);
      transition: background-color 320ms var(--scene-ease);
   }

.scene-stage.is-active
   {
      border-color: var(--scene-ink);
      transform: translate3d(0, -2px, 0);
   }

.scene-stage.is-active + .scene-stage::before, .scene-stage.is-active::before
   {
      background: var(--scene-accent);
   }

.scene-stage__glyph
   {
      display: block;
      margin: 0 auto 10px;
      color: var(--scene-faint);
      transition: color 320ms var(--scene-ease);
   }

.scene-stage.is-active .scene-stage__glyph
   {
      color: var(--scene-accent);
   }

.scene-stage__name
   {
      display: block;
      font-size: 0.8rem;
      font-weight: 600;
      line-height: 1.3;
      color: var(--scene-ink);
   }

.scene-stage__meta
   {
      display: block;
      margin-top: 8px;
      padding: 4px 6px;
      background: var(--scene-page);
      font-family: var(--kisaka-font-accent, inherit);
      font-size: 8px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--scene-muted);
   }

.scene-build__foot
   {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px 24px;
      margin-top: 26px;
   }

.scene-build__caption
   {
      margin: 0;
      flex: 1 1 320px;
      min-height: 2.8em;
      font-size: 0.87rem;
      line-height: 1.6;
      color: var(--scene-muted);
      transition: opacity 260ms var(--scene-ease);
   }

.scene-build__caption.is-swapping
   {
      opacity: 0;
   }

.scene-build__caption b
   {
      color: var(--scene-ink);
      font-weight: 600;
   }

.scene-build__dots
   {
      display: flex;
      gap: 7px;
   }

.scene-build__dot
   {
      width: 16px;
      height: 1px;
      border: 0;
      padding: 0;
      background: var(--scene-line-strong);
      cursor: pointer;
      transition: width 380ms var(--scene-ease), background-color 380ms var(--scene-ease);
   }

.scene-build__dot.is-active
   {
      width: 30px;
      background: var(--scene-accent);
   }

/* --------------------------------------------------------------------------
   04 — Capability atlas (sticky stacked panels)
   -------------------------------------------------------------------------- */
.scene-atlas__stack
   {
      margin-top: clamp(36px, 5vh, 60px);
   }

.scene-atlas__panel
   {
      position: sticky;
      top: calc(var(--scene-top) + (var(--i, 0) * 42px));
      z-index: calc(1 + var(--i, 0));
      border: 1px solid var(--scene-line);
      background: var(--scene-panel);
      color: var(--scene-ink);
   }

.scene-atlas__panel--dark
   {
      border-color: rgba(255, 255, 255, 0.12);
      background: var(--scene-dark);
      color: #fff;
   }

.scene-atlas__index
   {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px clamp(20px, 2.6vw, 44px);
      border-bottom: 1px solid var(--scene-line);
      font-family: var(--kisaka-font-accent, inherit);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--scene-muted);
   }

.scene-atlas__panel--dark .scene-atlas__index
   {
      border-bottom-color: var(--scene-dark-line);
      color: var(--scene-dark-faint);
   }

.scene-atlas__index-n
   {
      color: var(--scene-accent);
      margin-right: 14px;
   }

.scene-atlas__body
   {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(24px, 3.4vw, 56px);
      padding: clamp(28px, 4vw, 54px) clamp(20px, 2.6vw, 44px) clamp(24px, 3vw, 40px);
   }

.scene-atlas__title
   {
      color: inherit;
      margin: 0 0 16px;
      font-size: clamp(1.7rem, 3.6vw, 3rem);
      font-weight: 350;
      letter-spacing: -0.03em;
      line-height: 1.04;
   }

.scene-atlas__text
   {
      margin: 0 0 18px;
      max-width: 44ch;
      font-size: 0.97rem;
      line-height: 1.68;
      color: var(--scene-body);
   }

.scene-atlas__panel--dark .scene-atlas__text
   {
      color: var(--scene-dark-body);
   }

.scene-atlas__tags
   {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 22px;
      margin: 0 0 26px;
      padding: 0;
      list-style: none;
      font-family: var(--kisaka-font-accent, inherit);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--scene-muted);
   }

.scene-atlas__panel--dark .scene-atlas__tags
   {
      color: var(--scene-dark-faint);
   }

.scene-atlas__tags li
   {
      display: inline-flex;
      align-items: center;
      gap: 7px;
   }

.scene-atlas__tags li::before
   {
      content: "";
      width: 5px;
      height: 5px;
      background: var(--scene-accent);
   }

.scene-atlas__art
   {
      display: block;
      width: 100%;
      max-width: 420px;
      height: auto;
      color: var(--scene-line-strong);
   }

.scene-atlas__panel--dark .scene-atlas__art
   {
      color: rgba(255, 255, 255, 0.34);
   }

.scene-atlas__statement
   {
      color: inherit;
      margin: 0 0 26px;
      font-size: clamp(1.1rem, 1.9vw, 1.5rem);
      font-weight: 350;
      letter-spacing: -0.018em;
      line-height: 1.28;
   }

.scene-atlas__defs
   {
      margin: 0;
      border-top: 1px solid var(--scene-line);
   }

.scene-atlas__panel--dark .scene-atlas__defs, .scene-atlas__panel--dark .scene-atlas__def
   {
      border-color: var(--scene-dark-line);
   }

.scene-atlas__def
   {
      display: grid;
      grid-template-columns: minmax(96px, 150px) minmax(0, 1fr);
      gap: 10px 24px;
      padding: 18px 0;
      border-bottom: 1px solid var(--scene-line);
   }

.scene-atlas__def dt
   {
      margin: 0;
      font-size: 0.9rem;
      font-weight: 600;
   }

.scene-atlas__def dd
   {
      margin: 0;
      font-size: 0.92rem;
      line-height: 1.62;
      color: var(--scene-body);
   }

.scene-atlas__panel--dark .scene-atlas__def dd
   {
      color: var(--scene-dark-body);
   }

.scene-atlas__next
   {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px clamp(20px, 2.6vw, 44px);
      border-top: 1px solid var(--scene-line);
      font-size: 0.84rem;
      color: var(--scene-muted);
   }

.scene-atlas__panel--dark .scene-atlas__next
   {
      border-top-color: var(--scene-dark-line);
      color: var(--scene-dark-faint);
   }

/* --------------------------------------------------------------------------
   05 — Reading rows
   -------------------------------------------------------------------------- */
.scene-rows
   {
      margin-top: clamp(32px, 4vh, 54px);
      border-top: 1px solid var(--scene-line);
   }

.scene-row
   {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 12px clamp(24px, 3.4vw, 56px);
      padding: clamp(24px, 3vh, 38px) 0;
      border-bottom: 1px solid var(--scene-line);
      transition: background-color 320ms var(--scene-ease);
   }

.scene-row__kicker
   {
      margin: 0 0 8px;
      font-family: var(--kisaka-font-accent, inherit);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--scene-faint);
   }

.scene-row__title
   {
      color: var(--scene-ink);
      margin: 0;
      font-size: clamp(1.15rem, 2.1vw, 1.6rem);
      font-weight: 400;
      letter-spacing: -0.022em;
      line-height: 1.2;
   }

.scene-row__text
   {
      margin: 0;
      font-size: 0.95rem;
      line-height: 1.68;
      color: var(--scene-body);
   }

.scene-row__link
   {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
      font-family: var(--kisaka-font-accent, inherit);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--scene-accent);
   }

.scene-row__link:hover, .scene-row__link:focus-visible
   {
      color: var(--kisaka-red-700, #9e1829);
      text-decoration: underline;
      text-underline-offset: 4px;
   }

/* --------------------------------------------------------------------------
   06 — Delivery
   -------------------------------------------------------------------------- */
.scene-delivery
   {
      background: var(--scene-panel);
      border-top: 1px solid var(--scene-line);
      border-bottom: 1px solid var(--scene-line);
   }

/* --------------------------------------------------------------------------
   Sibling services rail
   -------------------------------------------------------------------------- */
.scene-siblings
   {
      position: relative;
      padding: clamp(40px, 6vh, 72px) 0;
      border-top: 1px solid var(--scene-line);
      overflow: hidden;
   }

.scene-siblings__list
   {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 14px clamp(18px, 3vw, 46px);
   }

.scene-siblings__link
   {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--kisaka-font-accent, inherit);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--scene-faint);
      transition: color 280ms var(--scene-ease);
   }

.scene-siblings__link:hover, .scene-siblings__link:focus-visible
   {
      color: var(--scene-ink);
   }

.scene-siblings__n
   {
      color: var(--scene-line-strong);
   }

.scene-siblings__item.is-current .scene-siblings__link
   {
      color: var(--scene-ink);
      cursor: default;
   }

.scene-siblings__item.is-current .scene-siblings__n
   {
      color: var(--scene-accent);
   }

.scene-siblings__ghost
   {
      position: absolute;
      top: 50%;
      right: var(--scene-gutter);
      transform: translate3d(0, -50%, 0);
      font-size: clamp(1.4rem, 3.4vw, 2.6rem);
      font-weight: 300;
      letter-spacing: -0.03em;
      color: var(--scene-ink);
      opacity: 0;
      pointer-events: none;
      transition: opacity 320ms var(--scene-ease);
   }

.scene-siblings__ghost.is-shown
   {
      opacity: 1;
   }

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */
.scene-cta
   {
      background-color: var(--scene-dark);
      background-image: radial-gradient(circle, var(--scene-dark-2), var(--scene-dark));
      color: #fff;
      min-height: 100vh;
      min-height: 100svh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(72px, 12vh, 140px) 0 calc(clamp(56px, 8vh, 96px) + env(safe-area-inset-bottom, 0px));
   }

.scene-cta__grid
   {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
      gap: clamp(28px, 4vw, 72px);
      align-items: end;
   }

.scene-cta__title
   {
      color: #fff;
      margin: 0;
      font-size: clamp(2.2rem, 5.6vw, 4.6rem);
      font-weight: 280;
      letter-spacing: -0.04em;
      line-height: 0.98;
   }

.scene-cta__title strong
   {
      display: block;
      font-weight: 700;
   }

.scene-cta__title strong::after
   {
      content: ".";
      color: var(--scene-accent);
   }

.scene-cta__text
   {
      margin: 0 0 28px;
      max-width: 34ch;
      font-size: clamp(1.02rem, 1.3vw, 1.15rem);
      font-weight: 300;
      line-height: 1.62;
      color: rgba(255, 255, 255, 0.58);
   }

.scene-cta__action
   {
      display: flex;
      align-items: stretch;
      max-width: 22rem;
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: var(--kisaka-btn-radius, 8px);
      overflow: hidden;
      text-decoration: none;
      transition: border-color 160ms ease-out, transform 100ms ease-out;
   }

.scene-cta__action:hover, .scene-cta__action:focus-visible
   {
      border-color: rgba(255, 255, 255, 0.7);
   }

.scene-cta__action:active
   {
      transform: scale(0.985);
   }

.scene-cta__action-label
   {
      flex: 1 1 auto;
      padding: 18px 24px;
      font-family: var(--kisaka-font-accent, inherit);
      font-size: 14px;
      font-weight: 600;
      color: #fff;
   }

.scene-cta__action-icon
   {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 62px;
      background: #f1f1ef;
      color: var(--scene-ink);
      transition: background-color 280ms var(--scene-ease);
   }

.scene-cta__action:hover .scene-cta__action-icon
   {
      background: var(--scene-accent);
      color: #fff;
   }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 1400px)
   {
      /* Reserve the rail's column so it never sits over the content. */
      .scene-body .scene-shell
         {
            padding-right: calc(var(--scene-gutter) + var(--scene-rail-w) + 24px);
         }
   }

@media (max-width: 1399px)
   {
      .scene-rail
         {
            display: none;
         }
   }

@media (max-width: 991px)
   {
      .scene-contrast__grid, .scene-build, .scene-atlas__body, .scene-row, .scene-cta__grid
         {
            grid-template-columns: minmax(0, 1fr);
         }

      .scene-build__steps
         {
            gap: 20px;
         }

      .scene-atlas__panel
         {
            position: static;
            margin-bottom: 18px;
         }

      .scene-flow
         {
            grid-auto-flow: row;
            grid-auto-columns: auto;
            gap: 12px;
         }

      .scene-stage + .scene-stage::before
         {
            top: auto;
            right: auto;
            bottom: 100%;
            left: 50%;
            width: 1px;
            height: 12px;
         }

      .scene-siblings__ghost
         {
            display: none;
         }
   }

@media (max-width: 575px)
   {
      .scene-atlas__def
         {
            grid-template-columns: minmax(0, 1fr);
            gap: 6px;
         }

      .scene-kicker__path
         {
            white-space: normal;
         }
   }

@media (max-height: 520px)
   {
      .scene-hero
         {
            padding-top: calc(var(--kisaka-header-h, 72px) + 12px);
            padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
         }

      .scene-hero__lead
         {
            margin-top: 16px;
         }

      .scene-hero__ticker
         {
            display: none;
         }
   }

/* --------------------------------------------------------------------------
   Section strip

   The navbar for the numbered sections. It belongs to those sections and
   nothing else: it arrives while the hero is still leaving, taking the
   marquee's place rather than following it, and retires ahead of the closing
   CTA, so it is never over it with nothing left to point at — and does not
   come back until the CTA is off screen again.
   js/kisaka-service-scene.js owns both moments.
   -------------------------------------------------------------------------- */
.scene-strip
   {
      position: fixed;
      left: 0;
      right: 0;
      top: var(--kisaka-header-h, 72px);
      z-index: 45;
      display: flex;
      align-items: center;
      gap: clamp(14px, 2.4vw, 32px);
      height: var(--scene-strip-h);
      padding: 0 var(--scene-gutter);
      background-color: rgba(255, 255, 255, 0.92);
      -webkit-backdrop-filter: saturate(1.6) blur(14px);
      backdrop-filter: saturate(1.6) blur(14px);
      box-shadow: 0 1px 0 var(--scene-line);
      color: var(--scene-muted);

      /* Tucked up under the header it hangs from, so it enters and leaves by the
         same edge rather than fading in place. */
      opacity: 0;
      visibility: hidden;
      transform: translate3d(0, -100%, 0);
      pointer-events: none;
      transition: opacity 300ms var(--scene-ease), transform 300ms var(--scene-ease), visibility 0s linear 300ms;
   }

.scene-strip.is-visible
   {
      opacity: 1;
      visibility: visible;
      transform: translate3d(0, 0, 0);
      pointer-events: auto;
      transition: opacity 300ms var(--scene-ease), transform 300ms var(--scene-ease), visibility 0s linear 0s;
   }

.scene-strip__list
   {
      display: flex;
      align-items: center;
      gap: clamp(10px, 1.6vw, 20px);
      margin: 0;
      padding: 0;
      list-style: none;
   }

.scene-strip__link
   {
      display: flex;
      align-items: center;
      gap: 7px;
      font-family: var(--kisaka-font-accent, inherit);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-decoration: none;
      color: inherit;
      opacity: 0.55;
      transition: opacity 240ms var(--scene-ease);
   }

.scene-strip__link.is-active
   {
      opacity: 1;
      color: var(--scene-accent);
   }

@media (hover: hover) and (pointer: fine)
   {
      .scene-strip__link:hover
         {
            opacity: 1;
         }
   }

/* Each number is introduced by its own rule drawing itself in from the left.
   The box is fixed at its longest and the line is drawn with scaleX, so the
   draw, the resting length and the active length are one compositor-only
   property — and the numeral never shifts sideways underneath it. */
.scene-strip__dash
   {
      width: 20px;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 480ms var(--scene-ease) var(--scene-strip-delay, 0ms);
   }

.scene-strip.is-visible .scene-strip__dash
   {
      transform: scaleX(0.4);
   }

.scene-strip.is-visible .scene-strip__link.is-active .scene-strip__dash
   {
      transform: scaleX(1);
   }

/* Uncovered left to right behind its own line, with a soft edge rather than a
   hard wipe. mask-position 100% parks the opaque end of the gradient off the
   left of the numeral; 0% brings it across. */
.scene-strip__num
   {
      display: inline-block;
      -webkit-mask-image: linear-gradient(to right, #000 0 40%, transparent 74%);
      mask-image: linear-gradient(to right, #000 0 40%, transparent 74%);
      -webkit-mask-size: 260% 100%;
      mask-size: 260% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: 100% 0;
      mask-position: 100% 0;

      /* Behind its own line, not beside it: the numeral starts once the rule it
         belongs to is most of the way drawn. */
      transition: -webkit-mask-position 420ms var(--scene-ease) calc(var(--scene-strip-delay, 0ms) + 140ms), mask-position 420ms var(--scene-ease) calc(var(--scene-strip-delay, 0ms) + 140ms);
   }

.scene-strip.is-visible .scene-strip__num
   {
      -webkit-mask-position: 0 0;
      mask-position: 0 0;
   }

/* The cascade. It starts once the bar itself has settled, and is spaced wide
   enough to be read as five separate lines being drawn rather than as one
   blur — the whole point of holding it until the park has landed. */
.scene-strip__list > li:nth-child(1)
   {
      --scene-strip-delay: 80ms;
   }

.scene-strip__list > li:nth-child(2)
   {
      --scene-strip-delay: 150ms;
   }

.scene-strip__list > li:nth-child(3)
   {
      --scene-strip-delay: 220ms;
   }

.scene-strip__list > li:nth-child(4)
   {
      --scene-strip-delay: 290ms;
   }

.scene-strip__list > li:nth-child(5)
   {
      --scene-strip-delay: 360ms;
   }

/* Leaving, the whole bar goes at once — no point cascading something out. */
.scene-strip:not(.is-visible) .scene-strip__dash, .scene-strip:not(.is-visible) .scene-strip__num
   {
      --scene-strip-delay: 0ms;
      transition-duration: 160ms;
   }

/* Reading progress across the whole page, set per scroll frame — constant
   motion, so the scaleX carries no transition; transitioning it would make the
   bar lag the scroll. The arrival is drawn on a separate property instead. */
.scene-strip__progress
   {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: var(--scene-accent);
      transform: scaleX(var(--scene-progress, 0));
      transform-origin: left center;
      clip-path: inset(0 100% 0 0);
      transition: clip-path 720ms var(--scene-ease) 200ms;
   }

.scene-strip.is-visible .scene-strip__progress
   {
      clip-path: inset(0 0 0 0);
   }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce)
   {
      .kisaka-scene .scene-reveal
         {
            opacity: 1;
            transform: none;
            transition: none;
         }

      .kisaka-scene .scene-hero__ink
         {
            --ink: 112;
            transition: none;
         }

      .kisaka-scene .scene-kicker__rule
         {
            transform: scaleX(1);
            transition: none;
         }

      /* Arrives and leaves by fading only — no slide. */
      .scene-strip, .scene-strip.is-visible
         {
            transform: none;
            transition: opacity 300ms linear, visibility 0s linear 300ms;
         }

      .scene-strip.is-visible
         {
            transition: opacity 300ms linear, visibility 0s linear 0s;
         }

      /* No drawing, no cascade: the rules sit at their resting length and the
         numerals are legible from the first frame. */
      .scene-strip__dash, .scene-strip.is-visible .scene-strip__dash
         {
            transform: scaleX(0.4);
            transition: none;
         }

      .scene-strip.is-visible .scene-strip__link.is-active .scene-strip__dash
         {
            transform: scaleX(1);
         }

      .scene-strip__num, .scene-strip.is-visible .scene-strip__num
         {
            -webkit-mask-image: none;
            mask-image: none;
            transition: none;
         }

      .scene-strip__progress, .scene-strip.is-visible .scene-strip__progress
         {
            clip-path: none;
            transition: none;
         }

      .kisaka-scene .scene-stage,
      .kisaka-scene .scene-build__dot,
      .kisaka-scene .scene-rail__dash,
      .kisaka-scene .scene-btn__arrow
         {
            transition-duration: 1ms;
         }

      .kisaka-scene .scene-stage.is-active, .kisaka-scene .scene-cta__action
         {
            transform: none;
         }

      .scene-hero__ticker
         {
            position: relative;
            top: auto;
            z-index: 2;
            transform: none;
            padding-right: var(--scene-gutter);
            padding-left: var(--scene-gutter);
            -webkit-mask-image: none;
            mask-image: none;
            pointer-events: auto;
         }

      .kisaka-scene.is-past-hero .scene-hero__ticker
         {
            opacity: 1;
            visibility: visible;
         }

      .scene-hero__track
         {
            display: block;
            width: auto;
            animation: none;
         }

      .scene-hero__track > .scene-hero__group[aria-hidden="true"]
         {
            display: none;
         }

      .scene-hero__group
         {
            flex-wrap: wrap;
            width: 100%;
            row-gap: 0.5em;
         }

      .scene-hero__item
         {
            white-space: normal;
         }
   }