/* Kisaka & Company — Insights hub and the insight articles. */
.login .form
   {
      margin-top: 30px;
   }

.login .form button
   {
      border: none;
   }

.login .form .btn
   {
      display: inline-block;
      margin-right: 10px;
      color: #fff;
      line-height: 20px;
      width: 100%;
   }

.login .form .btn:hover
   {
      background: #CB1F34;
      color: #fff;
   }

.kisaka-insights-page
   {
      background: #fafbfc;
   }

.kisaka-insights-hub
   {
      padding-bottom: 0;
   }

/* —— Insights stage (Scholtz-inspired framed hero) —— */
.kisaka-insights-stage
   {
      --kisaka-stage-ink: #f3ede6;
      --kisaka-stage-line: rgba(243, 237, 230, 0.38);
      --kisaka-stage-radius: clamp(18px, 2.2vw, 28px);
      --kisaka-stage-gutter: clamp(16px, 2.4vw, 28px);
      --scene-base: #042831;
      --scene-mid: #034354;
      --scene-bloom: #fba571;
      --scene-bg: radial-gradient(ellipse 90% 75% at 80% 88%, var(--scene-bloom) 0%, transparent 56%), radial-gradient(ellipse 75% 60% at 16% 22%, var(--scene-mid) 0%, transparent 50%), linear-gradient(232deg, #042831 8%, #034354 33%, #fba571 96%);
      box-sizing: border-box;
      position: relative;
      isolation: isolate;
      height: 100svh;
      max-height: 100svh;
      overflow: hidden;
      color: var(--kisaka-stage-ink);
      background-color: var(--scene-base);
   }

/* Oversized wash: peach and teal masses travel across the frame.
   Linear — this is constant motion, not a parked ease. */
.kisaka-insights-stage::before, .kisaka-insights-case::before
   {
      content: "";
      position: absolute;
      inset: -55%;
      z-index: 0;
      background: var(--scene-bg);
      pointer-events: none;
      transform: translate3d(8%, 6%, 0) rotate(2deg) scale(1.2);
      animation: kisaka-insights-wash-drift 24s linear infinite;
   }

html.kisaka-scenes .kisaka-insights-case:not(.is-current)::before
   {
      animation-play-state: paused;
   }

.kisaka-insights-stage__shell
   {
      box-sizing: border-box;
      position: relative;
      z-index: 1;
      display: flex;
      height: 100%;
      min-height: 0;
      padding: var(--kisaka-stage-gutter);
      padding-top: calc(var(--kisaka-stage-gutter) + var(--kisaka-header-h, 72px));
      padding-left: var(--kisaka-logo-inset);
   }

.kisaka-insights-stage__frame
   {
      --frame-rail: var(--kisaka-stage-radius);
      --frame-cap: 0.75rem;
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      grid-template-rows: auto minmax(0, 1fr) auto;
      grid-template-areas: "brand brand" "copy portrait" "foot foot";
      column-gap: clamp(16px, 3.2svh, 56px);
      row-gap: clamp(18px, 3svh, 36px);
      align-items: stretch;
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
      padding: 0 var(--frame-rail) 0 0;
      border: 0;
      border-radius: 0;
   }

.kisaka-insights-stage__copy
   {
      grid-area: copy;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: clamp(12px, 2.2svh, 48px);
      min-width: 0;
      min-height: 0;
      padding-bottom: 4px;
   }

.kisaka-insights-stage__brand
   {
      grid-area: brand;
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 14px;
      min-width: 0;
      width: auto;
      min-height: 1.5rem;
      margin-right: calc(-1 * var(--frame-rail));
   }

.kisaka-insights-stage__eyebrow
   {
      margin: 0;
      flex: 0 0 auto;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      line-height: 1;
      text-transform: uppercase;
      color: var(--kisaka-stage-ink);
      white-space: nowrap;
   }

.kisaka-insights-stage__rule
   {
      flex: 1 1 auto;
      height: 1px;
      min-width: 48px;
      margin-right: var(--frame-rail);
      background: var(--kisaka-stage-line);
   }

.kisaka-insights-stage__title
   {
      display: flex;
      flex-wrap: wrap;
      column-gap: clamp(0.45rem, 1.1vw, 1.05rem);
      row-gap: 0.02em;
      margin: 0;
      max-width: 13ch;
      color: #fff;
      font-family: "Newsreader", Georgia, "Times New Roman", serif;
      font-optical-sizing: auto;
      font-size: clamp(1.85rem, 6.4svh, 5.1rem);
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1.02;
   }

.kisaka-insights-stage__word
   {
      display: inline-block;
      opacity: 0;
      transform: translate3d(0, 0.55em, 0) rotateX(28deg);
      transform-origin: 50% 80%;
      animation: kisaka-insights-word-in 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      animation-delay: calc(0.08s + (var(--i, 0) * 0.045s));
   }

.kisaka-insights-stage__word--accent
   {
      font-style: italic;
      font-weight: 650;
   }

/* Typewriter headline (js/kisaka-insights-typer.js). Every phrase is stacked invisibly in one
   grid cell so the block keeps the height of the longest phrase while text is typed and deleted. */
.kisaka-insights-stage__title.is-typer
   {
      display: block;
   }

.kisaka-insights-typer
   {
      display: grid;
   }

.kisaka-insights-typer__sizer, .kisaka-insights-typer__live
   {
      grid-area: 1 / 1;
   }

.kisaka-insights-typer__sizer
   {
      visibility: hidden;
   }

.kisaka-insights-typer__live
   {
      align-self: start;
   }

.kisaka-insights-typer__caret
   {
      display: inline-block;
      width: 0.07em;
      height: 0.82em;
      margin-left: 0.06em;
      vertical-align: -0.04em;
      background: var(--kisaka-red);
      animation: kisaka-insights-caret 1.06s step-end infinite;
   }

.kisaka-insights-typer__caret.is-busy
   {
      animation: none;
   }

.kisaka-insights-stage__lead
   {
      margin: 0;
      max-width: min(34rem, 100%);
      font-family: var(--kisaka-font-accent), sans-serif;
      font-size: clamp(14px, 2svh, 17px);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.92);
      opacity: 0;
      transform: translateY(12px);
      animation: kisaka-insights-fade-up 0.7s ease forwards 0.55s;
   }

.kisaka-insights-stage__foot
   {
      grid-area: foot;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 14px;
      min-height: 1.5rem;
      min-width: 0;
      margin-right: calc(-1 * var(--frame-rail));
   }

.kisaka-insights-stage__meta
   {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
      margin: 0;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--kisaka-stage-ink);
      opacity: 0;
      animation: kisaka-insights-fade-up 0.65s ease forwards 0.75s;
   }

.kisaka-insights-stage__floor
   {
      flex: 1 1 auto;
      height: 1px;
      min-width: 48px;
      margin-right: var(--frame-rail);
      background: var(--kisaka-stage-line);
   }

/* Scroll cue: sits where the slides' "01 / 05" counter sits, so the pager takes over from it. */
.kisaka-insights-stage__floor:has( + .kisaka-insights-stage__cue)
   {
      margin-right: 0;
   }

.kisaka-insights-stage__cue-count
   {
      color: var(--kisaka-stage-ink);
   }

.kisaka-insights-stage__cue-sep
   {
      opacity: 0.7;
   }

.kisaka-insights-stage__cue-track
   {
      position: relative;
      width: 1px;
      height: 18px;
      margin-right: 4px;
      overflow: hidden;
      background: rgba(243, 237, 230, 0.22);
   }

.kisaka-insights-stage__cue-track::after
   {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 1px;
      height: 45%;
      background: var(--kisaka-red);
      transform: translateY(-100%);
      animation: kisaka-insights-cue 2s cubic-bezier(0.65, 0, 0.35, 1) infinite 1.6s;
   }

.kisaka-insights-stage__cue:focus-visible
   {
      outline: 1px solid rgba(255, 255, 255, 0.76);
      outline-offset: 6px;
      border-radius: 2px;
   }

@media (hover: hover) and (pointer: fine)
   {
      .kisaka-insights-stage__cue:hover
         {
            color: #fff;
         }

      .kisaka-insights-stage__cue:hover .kisaka-insights-stage__cue-count
         {
            color: #fff;
         }
   }

.kisaka-insights-skip:focus-visible
   {
      outline: 1px solid rgba(255, 255, 255, 0.76);
      outline-offset: 6px;
      border-radius: 2px;
   }

.kisaka-insights-skip:active
   {
      transform: scale(0.97);
   }

@media (hover: hover) and (pointer: fine)
   {
      .kisaka-insights-skip:hover
         {
            color: #fff;
         }

      .kisaka-insights-skip:hover::after
         {
            opacity: 1;
         }
   }

@media (prefers-reduced-motion: reduce)
   {
      .kisaka-insights-skip:active
         {
            transform: none;
         }
   }

.kisaka-insights-stage__portrait
   {
      grid-area: portrait;
      position: relative;
      margin: 0;
      min-height: 0;
      height: 100%;
      border-radius: calc(var(--kisaka-stage-radius) - 6px);
      overflow: hidden;
      background: #053f4d;
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
      opacity: 0;
      transform: translateY(18px) scale(0.985);
      animation: kisaka-insights-portrait-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.2s;
   }

/* Open Scholtz rail: no left stroke, rounded right corners, gaps for the label and year. */
.kisaka-insights-stage__frame::before, .kisaka-insights-case__frame::before
   {
      content: "";
      position: absolute;
      top: var(--frame-cap, 0.75rem);
      right: 0;
      bottom: var(--frame-cap, 0.75rem);
      width: var(--frame-rail, var(--kisaka-stage-radius));
      box-sizing: border-box;
      border: 1px solid var(--kisaka-stage-line);
      border-left: 0;
      border-radius: 0 var(--frame-rail, var(--kisaka-stage-radius)) var(--frame-rail, var(--kisaka-stage-radius)) 0;
      pointer-events: none;
      z-index: 2;
   }

@media (prefers-reduced-motion: reduce)
   {
      .kisaka-insights-stage::before, .kisaka-insights-case::before
         {
            inset: 0;
            transform: none;
            animation: none;
         }

      .kisaka-insights-stage__word,
      .kisaka-insights-stage__lead,
      .kisaka-insights-stage__cue,
      .kisaka-insights-stage__meta,
      .kisaka-insights-stage__portrait
         {
            opacity: 1;
            transform: none;
            animation: none;
         }

      .kisaka-insights-stage__cue-track::after
         {
            height: 100%;
            transform: none;
            animation: none;
         }

      .kisaka-insights-case__cta,
      .kisaka-insights-case__cta:active,
      html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__cta:active
         {
            transform: none;
         }
   }

@media (max-width: 991px)
   {
      .kisaka-insights-stage__shell, .kisaka-insights-case__shell
         {
            padding-left: var(--kisaka-stage-gutter);
         }

      .kisaka-insights-stage__frame
         {
            grid-template-columns: 1fr;
            grid-template-rows: auto minmax(0, 1fr) minmax(34%, 0.95fr) auto;
            grid-template-areas: "brand" "copy" "portrait" "foot";
         }

      .kisaka-insights-stage__title
         {
            max-width: none;
            font-size: clamp(1.55rem, 5svh, 3.2rem);
         }

      .kisaka-insights-stage__portrait
         {
            min-height: 0;
            height: 100%;
            max-height: none;
         }

      .kisaka-insights-stage__copy
         {
            gap: clamp(8px, 1.5svh, 16px);
            flex: 0 1 auto;
            min-height: 0;
         }

      .kisaka-insights-stage__lead
         {
            display: none;
         }
   }

.kisaka-insights-filters
   {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 4px 8px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      max-width: 100%;
      flex: 1 1 280px;
      padding-bottom: 4px;
   }

.kisaka-insights-filters::-webkit-scrollbar
   {
      display: none;
   }

.kisaka-insights-filters__btn:hover
   {
      color: #12131a;
   }

.kisaka-insights-filters__btn.is-active
   {
      color: #cb1f34;
   }

.kisaka-insights-filters__btn.is-active::after
   {
      background: #cb1f34;
   }

.kisaka-insights-filters__btn.is-active .kisaka-insights-filters__count
   {
      background: #cb1f34;
      color: #fff;
   }

.kisaka-article-page__back:hover, .kisaka-article-page__back:focus-visible
   {
      color: var(--kisaka-red);
   }

.kisaka-article-page__back:hover .kisaka-article-page__arrow,
.kisaka-article-page__back:focus-visible .kisaka-article-page__arrow,
.kisaka-article-page__pager-link--prev:hover .kisaka-article-page__arrow
   {
      transform: translateX(-3px);
   }

.kisaka-article-page__cat
   {
      margin: 0 0 16px;
      font-family: var(--kisaka-font-accent), "Google Sans Flex", sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--kisaka-red);
   }

.kisaka-article-share
   {
      display: flex;
      align-items: center;
      gap: 12px;
   }

.kisaka-article-share__label
   {
      margin: 0;
      font-size: 12px;
      color: var(--kisaka-article-quiet);
   }

.kisaka-article-share__icons
   {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      gap: 4px;
   }

.kisaka-article-share__btn svg
   {
      width: 14px;
      height: 14px;
   }

.kisaka-article-share__btn:hover, .kisaka-article-share__btn:focus-visible
   {
      color: var(--kisaka-red);
      background: transparent;
   }

.kisaka-article-share__btn:focus-visible
   {
      outline: 2px solid var(--kisaka-red);
      outline-offset: 2px;
   }

.kisaka-article-share__btn:active
   {
      color: var(--kisaka-red-700);
      transform: scale(0.97);
   }

/* Photograph: portrait beside the headline, a landscape band when stacked */
.kisaka-article-page__hero-figure
   {
      margin: 0;
      aspect-ratio: 3 / 2;
      overflow: hidden;
      border-radius: 4px;
      background: #eceef1;
   }

@media (min-width: 992px)
   {
      .kisaka-article-page__hero-figure
         {
            aspect-ratio: 4 / 5;
            max-height: calc(100vh - var(--kisaka-header-h) - 120px);
            min-height: 420px;
            width: 100%;
         }
   }

@media (max-width: 575px)
   {
      .kisaka-article-page__hero
         {
            margin: 0 -15px;
         }
   }

/* Phones and the split head: the icons carry their own labels */
@media (max-width: 575px), (min-width: 992px)
   {
      .kisaka-article-share__label
         {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
         }

      .kisaka-article-share
         {
            margin-right: -10px;
         }
   }

@media (max-width: 575px)
   {
      .kisaka-article-page__hero-figure
         {
            aspect-ratio: 4 / 3;
            border-radius: 0;
         }
   }

.kisaka-article__steps, .kisaka-article__list--numbered
   {
      counter-reset: kisaka-step;
   }

.kisaka-article__steps li, .kisaka-article__list--numbered li
   {
      counter-increment: kisaka-step;
      padding: 0.75em 0 0.75em 2.4em;
      margin: 0;
      border-top: 1px solid var(--kisaka-article-line);
   }

.kisaka-article__steps li:last-child, .kisaka-article__list--numbered li:last-child
   {
      border-bottom: 1px solid var(--kisaka-article-line);
   }

.kisaka-article__steps li::before, .kisaka-article__list--numbered li::before
   {
      content: counter(kisaka-step, decimal-leading-zero);
      left: 0;
      top: 0.75em;

      /* One line of the item's text tall, so the number shares its baseline */
      line-height: 2.025;
      width: auto;
      height: auto;
      background: none;
      font-family: var(--kisaka-font-accent);
      font-size: 0.8em;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--kisaka-red);
      font-variant-numeric: tabular-nums;
   }

.kisaka-article__prose #article-intro
   {
      scroll-margin-top: calc(var(--kisaka-header-h) + 32px);
   }

/* End of article: back to the index, or on to the next note */
.kisaka-article-page__pager
   {
      position: relative;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: end;
      gap: 24px;
      margin-top: clamp(40px, 5vw, 64px);
      padding-top: 24px;
      border-top: 1px solid var(--kisaka-article-ink);
   }

/* End of the read: the closing rule draws across once, then the next arrow nudges.
   js/main.js adds .is-waiting only when motion is allowed, so the rule is never missing. */
@media (prefers-reduced-motion: no-preference)
   {
      .kisaka-article-page__pager.is-waiting
         {
            border-top-color: transparent;
         }

      .kisaka-article-page__pager.is-waiting::before
         {
            content: "";
            position: absolute;
            top: -1px;
            left: 0;
            right: 0;
            height: 1px;
            background: var(--kisaka-article-ink);
            transform: scaleX(0);
            transform-origin: left center;
         }

      .kisaka-article-page__pager.is-waiting.is-drawn::before
         {
            transform: scaleX(1);
            transition: transform 900ms var(--kisaka-ease-out-expo);
         }

      .kisaka-article-page__pager.is-drawn .kisaka-article-page__pager-link--next .kisaka-article-page__arrow
         {
            animation: kisaka-article-next-nudge 480ms var(--kisaka-ease-out) 1020ms;
         }
   }

.kisaka-article-page__pager-link:active
   {
      transform: scale(0.97);
   }

.kisaka-article-page__pager-link:hover
   {
      color: var(--kisaka-article-ink);
   }

.kisaka-article-page__pager-link--next
   {
      justify-self: end;
      text-align: right;
   }

.kisaka-article-page__pager-link--next .kisaka-article-page__arrow
   {
      color: var(--kisaka-red);
   }

.kisaka-article-page__pager-link--next:hover
   {
      color: var(--kisaka-red);
   }

.kisaka-article-page__pager-link--next:hover .kisaka-article-page__arrow
   {
      transform: translateX(3px);
   }

@media (max-width: 575px)
   {
      .kisaka-article-page__pager
         {
            grid-template-columns: minmax(0, 1fr);
         }

      .kisaka-article-page__pager-link--next
         {
            grid-row: 1;
            justify-self: start;
            text-align: left;
         }
   }

@media (prefers-reduced-motion: no-preference)
   {
      body.kisaka-article-intro-ready .kisaka-article-page__hero-figure
         {
            opacity: 1;
            clip-path: inset(0 0 100% 0);
         }

      body.kisaka-article-intro-ready .kisaka-article-page__hero-figure img
         {
            transform: scale(1.04);
         }

      body.kisaka-article-intro-playing .kisaka-article-page__cat
         {
            --kisaka-article-intro-delay: var(--kisaka-article-intro-lead);
         }

      body.kisaka-article-intro-playing .kisaka-article-page__hero-figure
         {
            clip-path: inset(0);
            transition: clip-path 1100ms var(--kisaka-ease-out-expo) var(--kisaka-article-intro-lead);
         }

      body.kisaka-article-intro-playing .kisaka-article-page__hero-figure img
         {
            transform: none;
            transition: transform 1600ms var(--kisaka-ease-out-expo) var(--kisaka-article-intro-lead);
         }
   }

/* ==========================================================================
   Insights — horizontal article shelf (pinned section, scroll drives sideways)
   Markup: insights.html [data-kisaka-insights-rail]; behaviour: js/kisaka-insights-rail.js
   ========================================================================== */
.kisaka-insights-rail
   {
      --scene-bg: #0b1016;
      --rail-ink: #f3ede6;
      --rail-muted: rgba(243, 237, 230, 0.6);
      --rail-line: rgba(243, 237, 230, 0.14);
      --rail-inset: clamp(20px, 5vw, 76px);
      --rail-gutter: clamp(20px, 1.8vw, 30px);
      position: relative;
      isolation: isolate;
      background: var(--scene-bg);
      color: var(--rail-ink);
      scroll-margin-top: calc(var(--kisaka-header-h, 72px) + 8px);
   }

.kisaka-insights-rail::before
   {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(90% 70% at 100% 100%, rgba(40, 62, 84, 0.42) 0%, rgba(11, 16, 22, 0) 60%);
      pointer-events: none;
   }

.kisaka-insights-rail__pin
   {
      position: sticky;
      z-index: 1;
      top: 0;
      height: 100vh;
      height: 100svh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: calc(var(--kisaka-header-h) + 28px) 0 26px;
      box-sizing: border-box;
   }

/* Head: the slides' eyebrow and rule, then the title with the topics on the same line. */
.kisaka-insights-rail__head
   {
      position: relative;
      z-index: 2;
      flex: 0 0 auto;
      padding: 0 var(--rail-inset);
   }

.kisaka-insights-rail__brand
   {
      display: flex;
      align-items: center;
      gap: 14px;
   }

.kisaka-insights-rail__eyebrow
   {
      margin: 0;
      flex: 0 0 auto;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      line-height: 1;
      text-transform: uppercase;
      color: var(--rail-ink);
   }

.kisaka-insights-rail__rule
   {
      flex: 1 1 auto;
      height: 1px;
      background: var(--rail-line);
   }

.kisaka-insights-rail__headline
   {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px 32px;
      margin-top: clamp(16px, 2.6svh, 24px);
   }

.kisaka-insights-rail__title
   {
      margin: 0;
      font-family: var(--kisaka-font-family), var(--kisaka-font-accent), sans-serif;
      font-size: clamp(1.5rem, 2.4vw, 2rem);
      font-weight: 600;
      letter-spacing: -0.025em;
      line-height: 1;
      color: #fff;
   }

/* Topics read as a line of type, not a row of chips. Red marks the active one only. */
.kisaka-insights-rail .kisaka-insights-rail__filters
   {
      flex: 0 1 auto;
      gap: clamp(18px, 2vw, 28px);
      padding: 0;
   }

.kisaka-insights-rail .kisaka-insights-filters__btn
   {
      padding: 6px 0;
      border: 0;
      border-radius: 0;
      background: none;
      font-family: var(--kisaka-font-accent), sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.12em;
      line-height: 1;
      text-transform: uppercase;
      color: var(--rail-muted);
      transition: color 0.2s ease;
   }

.kisaka-insights-rail .kisaka-insights-filters__btn::after
   {
      left: 0;
      right: 0;
      height: 1px;
      border-radius: 0;
      background: var(--kisaka-red);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 280ms var(--kisaka-ease-out);
   }

.kisaka-insights-rail .kisaka-insights-filters__btn:hover,
.kisaka-insights-rail .kisaka-insights-filters__btn.is-active
   {
      color: #fff;
   }

.kisaka-insights-rail .kisaka-insights-filters__btn.is-active::after
   {
      background: var(--kisaka-red);
      transform: none;
   }

.kisaka-insights-rail .kisaka-insights-filters__btn:focus-visible
   {
      outline: 1px solid rgba(255, 255, 255, 0.7);
      outline-offset: 4px;
   }

/* Topics and search sit together: narrowing by topic and by words are one task. */
.kisaka-insights-rail__tools
   {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 14px clamp(20px, 2.4vw, 36px);
      min-width: 0;
   }

/* Search sits on the same line of type as the topics: no capsule, just a hairline to write on.
   Focus draws the red rule in from the left, the way the active topic is underlined. */
.kisaka-insights-rail__search
   {
      position: relative;
      display: flex;
      align-items: center;
      width: clamp(180px, 15vw, 224px);
      height: 32px;
      box-shadow: inset 0 -1px 0 var(--rail-line);
      transition: box-shadow 200ms var(--kisaka-ease-out);
   }

.kisaka-insights-rail__search::after
   {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: var(--kisaka-red);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 280ms var(--kisaka-ease-out);
      pointer-events: none;
   }

.kisaka-insights-rail__search:hover
   {
      box-shadow: inset 0 -1px 0 rgba(243, 237, 230, 0.34);
   }

.kisaka-insights-rail__search:focus-within::after
   {
      transform: none;
   }

.kisaka-insights-rail__search-icon
   {
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -7px;
      color: var(--rail-muted);
      pointer-events: none;
      transition: color 200ms ease;
   }

.kisaka-insights-rail__search:focus-within .kisaka-insights-rail__search-icon
   {
      color: #fff;
   }

/* Scoped twice to outrank normalize.css input[type="search"] and its :focus state. */
.kisaka-insights-rail .kisaka-insights-rail__search-input,
.kisaka-insights-rail .kisaka-insights-rail__search-input:focus
   {
      -webkit-appearance: none;
      appearance: none;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0 24px 0 24px;
      border: 0;
      border-radius: 0;
      outline: none;
      background: transparent;
      font-family: var(--kisaka-font-accent), sans-serif;
      font-size: 14px;
      letter-spacing: 0;
      color: #fff;
      caret-color: var(--kisaka-red);
   }

.kisaka-insights-rail__search-input::placeholder
   {
      color: var(--rail-muted);
      opacity: 1;
   }

.kisaka-insights-rail__search-input::-webkit-search-cancel-button,
.kisaka-insights-rail__search-input::-webkit-search-decoration
   {
      -webkit-appearance: none;
      appearance: none;
   }

.kisaka-insights-rail__search-key, .kisaka-insights-rail__search-clear
   {
      position: absolute;
      right: 0;
      top: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      margin-top: -10px;
      padding: 0;
      transition: opacity 160ms var(--kisaka-ease-out), color 160ms ease;
   }

/* The shortcut is a hint in the type, not a keycap. */
.kisaka-insights-rail__search-key
   {
      border: 0;
      background: none;
      box-shadow: none;
      font-family: var(--kisaka-font-accent), sans-serif;
      font-size: 13px;
      font-weight: 500;
      line-height: 1;
      color: rgba(243, 237, 230, 0.4);
      pointer-events: none;
   }

.kisaka-insights-rail__search-input:focus ~ .kisaka-insights-rail__search-key,
.kisaka-insights-rail__search-input:not(:placeholder-shown) ~ .kisaka-insights-rail__search-key
   {
      opacity: 0;
   }

.kisaka-insights-rail__search-clear
   {
      border: 0;
      border-radius: 0;
      background: none;
      color: var(--rail-muted);
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
   }

.kisaka-insights-rail__search-input:not(:placeholder-shown) ~ .kisaka-insights-rail__search-clear
   {
      opacity: 1;
      pointer-events: auto;
   }

.kisaka-insights-rail__search-clear:hover
   {
      color: #fff;
   }

.kisaka-insights-rail__search-clear:focus-visible
   {
      outline: 1px solid rgba(255, 255, 255, 0.7);
      outline-offset: 2px;
      color: #fff;
   }

/* No keyboard, no shortcut to advertise. */
@media (hover: none)
   {
      .kisaka-insights-rail__search-key
         {
            display: none;
         }
   }

.kisaka-insights-rail__viewport
   {
      position: relative;
      z-index: 1;
      flex: 1 1 auto;
      display: flex;
      align-items: stretch;
      min-height: 0;
      margin-top: clamp(20px, 4svh, 40px);
      overflow: hidden;
   }

/* Cards carry their own gutter and a hairline on the left, so the track starts one gutter
   early — the first photograph then lines up with the title above it. */
.kisaka-insights-rail__track
   {
      display: flex;
      align-items: stretch;
      height: 100%;
      box-sizing: border-box;
      padding: 0 var(--rail-inset) 0 max(0px, calc(var(--rail-inset) - var(--rail-gutter)));
      will-change: transform;
   }

.kisaka-insights-rail__card[hidden]
   {
      display: none !important;
   }

.kisaka-insights-rail__card
   {
      box-sizing: border-box;
      flex: 0 0 clamp(300px, 27vw, 400px);
      width: clamp(300px, 27vw, 400px);
      display: flex;
      padding: 0 var(--rail-gutter);
      border-left: 1px solid var(--rail-line);
      transition: opacity 300ms var(--kisaka-ease-out);
   }

.kisaka-insights-rail__card:first-child
   {
      border-left-color: transparent;
   }

.kisaka-insights-rail__card.is-entering
   {
      opacity: 0;
      transition: none;
   }

.kisaka-insights-rail__hit
   {
      display: flex;
      flex-direction: column;
      width: 100%;
      color: inherit;
      text-decoration: none;
   }

.kisaka-insights-rail__hit:hover, .kisaka-insights-rail__hit:focus-visible
   {
      color: inherit;
      text-decoration: none;
   }

.kisaka-insights-rail__hit:focus-visible
   {
      outline: 1px solid rgba(255, 255, 255, 0.7);
      outline-offset: 10px;
   }

.kisaka-insights-rail__media
   {
      display: block;
      flex: 0 1 auto;
      min-height: 0;
      aspect-ratio: 3 / 4;
      overflow: hidden;
      border-radius: 10px;
      background: #151b22;
   }

.kisaka-insights-rail__media img
   {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 600ms var(--kisaka-ease-out);
   }

.kisaka-insights-rail__meta
   {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      gap: 10px;
      margin-top: 20px;
      font-family: var(--kisaka-font-accent), sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.12em;
      font-variant-numeric: tabular-nums;
      line-height: 1;
      text-transform: uppercase;
      color: var(--rail-muted);
   }

.kisaka-insights-rail__num
   {
      color: #fff;
   }

.kisaka-insights-rail__cat::before
   {
      content: "\00b7";
      margin-right: 10px;
   }

/* Titles always take two lines and are cut short with an ellipsis past that, so every
   photograph on the shelf is the same size. The summary gives up the room: one line. */
.kisaka-insights-rail__name
   {
      flex: 0 0 auto;
      display: -webkit-box;
      height: calc(2 * 1.25em);
      margin: 12px 0 8px;
      overflow: hidden;
      font-family: var(--kisaka-font-accent), sans-serif;
      font-optical-sizing: auto;
      font-size: clamp(1.125rem, 1.3vw, 1.3125rem);
      font-weight: 500;
      line-height: 1.25;
      letter-spacing: -0.012em;
      color: #fff;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
   }

.kisaka-insights-rail__excerpt
   {
      flex: 0 0 auto;
      margin: 0;
      overflow: hidden;
      font-family: var(--kisaka-font-accent), sans-serif;
      font-size: 14px;
      line-height: 1.55;
      color: var(--rail-muted);
      white-space: nowrap;
      text-overflow: ellipsis;
   }

/* Pointing at one piece quiets the rest; the photograph leans in a touch. Nothing lifts. */
@media (hover: hover) and (pointer: fine)
   {
      .kisaka-insights-rail__track:has(.kisaka-insights-rail__hit:hover) .kisaka-insights-rail__card:not(:hover)
         {
            opacity: 0.5;
         }

      .kisaka-insights-rail__hit:hover .kisaka-insights-rail__media img
         {
            transform: scale(1.03);
         }
   }

.kisaka-insights-rail__hit:active .kisaka-insights-rail__media img
   {
      transform: scale(1.01);
      transition-duration: 120ms;
   }

/* The shelf ends on a line of type, not another card. */
.kisaka-insights-rail__card--end
   {
      flex-basis: clamp(240px, 20vw, 300px);
      width: clamp(240px, 20vw, 300px);
   }

.kisaka-insights-rail__end
   {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 18px;
      padding-top: 4px;
   }

.kisaka-insights-rail__end-title
   {
      margin: 0;
      font-family: var(--kisaka-font-accent), sans-serif;
      font-size: 1.125rem;
      line-height: 1.4;
      color: #fff;
      text-wrap: balance;
   }

.kisaka-insights-rail__end-link
   {
      padding-bottom: 4px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.35);
      font-family: var(--kisaka-font-accent), sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #fff;
      text-decoration: none;
      transition: border-color 0.2s ease;
   }

.kisaka-insights-rail__end-link:hover, .kisaka-insights-rail__end-link:focus-visible
   {
      border-bottom-color: #fff;
      color: #fff;
      text-decoration: none;
   }

.kisaka-insights-rail__empty
   {
      position: absolute;
      left: var(--rail-inset);
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
   }

.kisaka-insights-rail__empty[hidden]
   {
      display: none;
   }

/* With nothing on the shelf there is nothing to count. */
.kisaka-insights-rail__pin:has(.kisaka-insights-rail__empty:not([hidden])) .kisaka-insights-rail__foot
   {
      visibility: hidden;
   }

.kisaka-insights-rail__empty-text
   {
      margin: 0;
      font-family: var(--kisaka-font-accent), sans-serif;
      font-size: 1.125rem;
      line-height: 1.4;
      color: #fff;
   }

.kisaka-insights-rail__empty-reset
   {
      padding: 0 0 4px;
      border: 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.35);
      border-radius: 0;
      background: none;
      font-family: var(--kisaka-font-accent), sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #fff;
      cursor: pointer;
      transition: border-color 0.2s ease;
   }

.kisaka-insights-rail__empty-reset:hover, .kisaka-insights-rail__empty-reset:focus-visible
   {
      border-bottom-color: #fff;
   }

.kisaka-insights-rail__foot
   {
      position: relative;
      z-index: 2;
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 20px;
      padding: clamp(20px, 3.4svh, 32px) var(--rail-inset) 0;
   }

.kisaka-insights-rail__counter
   {
      margin: 0;
      font-family: var(--kisaka-font-accent), sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.12em;
      font-variant-numeric: tabular-nums;
      color: var(--rail-muted);
      white-space: nowrap;
   }

.kisaka-insights-rail__counter-sep
   {
      margin: 0 6px;
      color: rgba(255, 255, 255, 0.32);
   }

.kisaka-insights-rail__progress
   {
      flex: 1 1 auto;
      height: 1px;
      background: var(--rail-line);
      overflow: hidden;
   }

.kisaka-insights-rail__bar
   {
      display: block;
      height: 100%;
      background: var(--kisaka-red);
      transform: scaleX(0);
      transform-origin: left center;
   }

/* Below the pin breakpoint (and for reduced motion) the shelf becomes a plain swipe row. */
@media (max-width: 991px)
   {
      .kisaka-insights-rail__pin
         {
            position: static;
            height: auto;
            padding: 56px 0 44px;
         }

      .kisaka-insights-rail__viewport
         {
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            margin-top: 26px;
            scrollbar-width: none;
         }

      .kisaka-insights-rail__viewport::-webkit-scrollbar
         {
            display: none;
         }

      .kisaka-insights-rail__track
         {
            transform: none !important;
         }

      .kisaka-insights-rail__card
         {
            flex-basis: min(78vw, 340px);
            width: min(78vw, 340px);
            transform: none;
            scroll-snap-align: center;
         }

      .kisaka-insights-rail__empty
         {
            position: static;
            transform: none;
            padding: 24px var(--rail-inset);
         }

      .kisaka-insights-rail__tools
         {
            width: 100%;
            flex-direction: column-reverse;
            align-items: stretch;
         }

      .kisaka-insights-rail__search
         {
            width: 100%;
            height: 40px;
         }

      /* 16px keeps iOS from zooming the page when the field takes focus. */
      .kisaka-insights-rail .kisaka-insights-rail__search-input
         {
            font-size: 16px;
         }
   }

@media (prefers-reduced-motion: reduce)
   {
      .kisaka-insights-rail__pin
         {
            position: static;
            height: auto;
            padding: 56px 0 44px;
         }

      .kisaka-insights-rail__viewport
         {
            overflow-x: auto;
         }

      .kisaka-insights-rail__track
         {
            transform: none !important;
         }

      .kisaka-insights-rail__card
         {
            transform: none;
         }
   }

/* —— Insight slides: full-screen scenes in the hero's frame, image and copy alternate sides —— */
.kisaka-insights-case
   {
      --kisaka-stage-ink: #f3ede6;
      --kisaka-stage-line: rgba(243, 237, 230, 0.38);
      --kisaka-stage-radius: clamp(18px, 2.2vw, 28px);
      --kisaka-stage-gutter: clamp(16px, 2.4vw, 28px);
      --case-ease: cubic-bezier(0.22, 1, 0.36, 1);
      --scene-base: #041f26;
      --scene-mid: #0a3a45;
      --scene-bloom: #7a4a35;
      --scene-bg: radial-gradient(ellipse 90% 75% at 80% 88%, var(--scene-bloom) 0%, transparent 56%), radial-gradient(ellipse 75% 60% at 16% 22%, var(--scene-mid) 0%, transparent 50%), linear-gradient(237deg, #041f26 0%, #0a3a45 46%, #7a4a35 100%);
      box-sizing: border-box;
      position: relative;
      isolation: isolate;
      height: 100vh;
      height: 100svh;
      overflow: hidden;
      color: var(--kisaka-stage-ink);
      background-color: var(--scene-base);
   }

.kisaka-insights-case--2
   {
      --scene-base: #10181f;
      --scene-mid: #2b3a44;
      --scene-bloom: #5d6b73;
      --scene-bg: radial-gradient(ellipse 90% 75% at 80% 88%, var(--scene-bloom) 0%, transparent 56%), radial-gradient(ellipse 75% 60% at 16% 22%, var(--scene-mid) 0%, transparent 50%), linear-gradient(237deg, #10181f 0%, #2b3a44 52%, #5d6b73 100%);
   }

.kisaka-insights-case--3
   {
      --scene-base: #0a1116;
      --scene-mid: #2a161c;
      --scene-bloom: #7a1f2c;
      --scene-bg: radial-gradient(ellipse 90% 75% at 80% 88%, var(--scene-bloom) 0%, transparent 56%), radial-gradient(ellipse 75% 60% at 16% 22%, var(--scene-mid) 0%, transparent 50%), linear-gradient(237deg, #0a1116 0%, #2a161c 52%, #7a1f2c 100%);
   }

.kisaka-insights-case--4
   {
      --scene-base: #0c1819;
      --scene-mid: #1d3636;
      --scene-bloom: #56705e;
      --scene-bg: radial-gradient(ellipse 90% 75% at 80% 88%, var(--scene-bloom) 0%, transparent 56%), radial-gradient(ellipse 75% 60% at 16% 22%, var(--scene-mid) 0%, transparent 50%), linear-gradient(237deg, #0c1819 0%, #1d3636 52%, #56705e 100%);
   }

.kisaka-insights-case--5
   {
      --scene-base: #120f0d;
      --scene-mid: #3a2a1f;
      --scene-bloom: #b8784f;
      --scene-bg: radial-gradient(ellipse 90% 75% at 80% 88%, var(--scene-bloom) 0%, transparent 56%), radial-gradient(ellipse 75% 60% at 16% 22%, var(--scene-mid) 0%, transparent 50%), linear-gradient(237deg, #120f0d 0%, #3a2a1f 50%, #b8784f 100%);
   }

.kisaka-insights-case__shell
   {
      box-sizing: border-box;
      position: relative;
      z-index: 1;
      display: flex;
      height: 100%;
      padding: var(--kisaka-stage-gutter);
      padding-top: calc(var(--kisaka-stage-gutter) + var(--kisaka-header-h, 72px));
      padding-left: var(--kisaka-logo-inset);
   }

.kisaka-insights-case__frame
   {
      --frame-rail: var(--kisaka-stage-radius);
      --frame-cap: 0.75rem;
      position: relative;
      flex: 1 1 auto;
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
      grid-template-rows: auto minmax(0, 1fr) auto;
      grid-template-areas: "brand brand" "media copy" "foot foot";
      column-gap: clamp(32px, 6vw, 112px);
      row-gap: clamp(18px, 3svh, 36px);
      min-height: 0;
      min-width: 0;
      padding: 0 var(--frame-rail) 0 0;
      border: 0;
      border-radius: 0;
   }

.kisaka-insights-case--flip .kisaka-insights-case__frame
   {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      grid-template-areas: "brand brand" "copy media" "foot foot";
   }

.kisaka-insights-case__brand
   {
      grid-area: brand;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
      min-height: 1.5rem;
      margin-right: calc(-1 * var(--frame-rail));
   }

.kisaka-insights-case__eyebrow
   {
      margin: 0;
      flex: 0 0 auto;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      line-height: 1;
      text-transform: uppercase;
      color: var(--kisaka-stage-ink);
      white-space: nowrap;
   }

.kisaka-insights-case__rule
   {
      flex: 1 1 auto;
      height: 1px;
      min-width: 48px;
      margin-right: var(--frame-rail);
      background: var(--kisaka-stage-line);
   }

.kisaka-insights-case__media
   {
      grid-area: media;
      align-self: stretch;
      justify-self: stretch;
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 0;
      margin: 0;
      overflow: hidden;
      border-radius: calc(var(--kisaka-stage-radius) - 6px);
      background: #053f4d;
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
   }

.kisaka-insights-case__media img
   {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 28%;
   }

.kisaka-insights-case__copy
   {
      grid-area: copy;
      align-self: center;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 18px;
      max-width: 36rem;
      min-width: 0;
      margin-inline: clamp(0px, 3vw, 56px);
      overflow: visible;
   }

.kisaka-insights-case__kicker
   {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      column-gap: 0.4em;
      margin: 0;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      line-height: 1;
      text-transform: uppercase;
      color: var(--kisaka-stage-ink);
   }

.kisaka-insights-case__kicker-sep, .kisaka-insights-case__kicker-time
   {
      color: rgba(243, 237, 230, 0.62);
      font-weight: 500;
   }

/* The slide counter owns the bottom-right corner; the back-to-top button would sit on it.
   The button stands down while a slide fills the screen (js/kisaka-insights-scenes.js). */
html.kisaka-insights-on-case #scrollUp
   {
      opacity: 0 !important;
      visibility: hidden;
      pointer-events: none;
   }

/* Insights read as a publication: an editorial serif carries the titles, the sans keeps
   the kicker, deck and buttons. Newsreader's optical size sharpens it at display sizes. */
.kisaka-insights-case__title
   {
      margin: 0;
      color: #fff;
      font-family: "Newsreader", Georgia, "Times New Roman", serif;
      font-optical-sizing: auto;
      font-size: clamp(2rem, 6.6svh, 3.75rem);
      font-weight: 450;
      letter-spacing: -0.015em;
      line-height: 1.04;
      text-wrap: balance;
   }

.kisaka-insights-case__deck
   {
      margin: 0;
      max-width: 34rem;
      font-family: var(--kisaka-font-accent), sans-serif;
      font-optical-sizing: auto;
      font-size: clamp(15px, 2.2svh, 18px);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.86);
   }

.kisaka-insights-case__cta, .kisaka-insights-case__cta:visited
   {
      align-self: flex-start;
      z-index: 3;
      margin-top: 8px;
      border: 0.5px solid #fff;
      background: transparent;
      color: #fff;
      font-family: var(--kisaka-font-accent), sans-serif;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.12em;
      line-height: 1.2;
      text-transform: uppercase;
   }

.kisaka-insights-case__cta > span:first-child
   {
      white-space: nowrap;
   }

.kisaka-insights-case__cta:hover, .kisaka-insights-case__cta:focus-visible
   {
      background: #fff;
      border-color: #fff;
      color: #041f26;
      text-decoration: none;
   }

.kisaka-insights-case__cta:focus-visible
   {
      outline: 2px solid #fff;
      outline-offset: 4px;
   }

.kisaka-insights-case__cta:active
   {
      transform: scale(0.97);
   }

.kisaka-insights-case__foot
   {
      grid-area: foot;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 14px;
      min-height: 1.5rem;
      min-width: 0;
      margin-right: calc(-1 * var(--frame-rail));
   }

.kisaka-insights-case__meta, .kisaka-insights-case__count
   {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0;
      font-family: var(--kisaka-font-accent, sans-serif);
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      font-variant-numeric: tabular-nums;
      color: var(--kisaka-stage-ink);
   }

.kisaka-insights-case__meta
   {
      flex: 0 0 auto;
   }

.kisaka-insights-case__floor
   {
      flex: 1 1 auto;
      height: 1px;
      min-width: 48px;
      background: var(--kisaka-stage-line);
   }

.kisaka-insights-case__count
   {
      flex: 0 0 auto;
      margin-right: var(--frame-rail);
      color: rgba(243, 237, 230, 0.6);
   }

.kisaka-insights-case__count span
   {
      color: var(--kisaka-red);
   }

/* Scene mode (js/kisaka-insights-scenes.js), after the home testimonials: the slide's
   words sit in masks and rise line by line; leaving, they slip out the way the page is
   heading. Between two slides the frame (eyebrow, rule, meta) holds still and only
   the content changes. The CTA un-draws from the right and redraws, so it does not teleport. */
/* Title words sharpen into focus one after another; kicker and deck arrive as blocks.
   The slide counter keeps its rolling mask (a ticker, not prose). */
html.kisaka-scenes .kisaka-insights-case__count .kisaka-insights-case__clip
   {
      display: inline-block;
      overflow: hidden;
      vertical-align: bottom;
      padding-bottom: 0.1em;
      margin-bottom: -0.1em;
   }

html.kisaka-scenes .kisaka-insights-case__count .kisaka-insights-case__word
   {
      display: inline-block;
      transform: translate3d(0, 115%, 0);
      transition: transform 720ms var(--kisaka-ease-out);
   }

html.kisaka-scenes .kisaka-insights-case.is-from-above .kisaka-insights-case__count .kisaka-insights-case__word
   {
      transform: translate3d(0, -115%, 0);
   }

html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__count .kisaka-insights-case__word
   {
      transform: none;
      transition-delay: var(--case-line-delay, 0.3s);
   }

html.kisaka-scenes .kisaka-insights-case__title .kisaka-insights-case__clip
   {
      display: inline;
      overflow: visible;
   }

html.kisaka-scenes .kisaka-insights-case__title .kisaka-insights-case__word
   {
      --case-from: 0.25em;
      --case-to: -0.15em;
      display: inline-block;
      white-space: nowrap;
      opacity: 0;
      filter: blur(10px);
      transform: translate3d(0, var(--case-from), 0);
      transition: opacity 440ms var(--kisaka-ease-out), filter 440ms var(--kisaka-ease-out), transform 600ms var(--kisaka-ease-out-expo);
   }

html.kisaka-scenes .kisaka-insights-case.is-from-above .kisaka-insights-case__title .kisaka-insights-case__word
   {
      --case-from: -0.25em;
   }

html.kisaka-scenes .kisaka-insights-case.is-leaving--back .kisaka-insights-case__title .kisaka-insights-case__word
   {
      --case-to: 0.15em;
   }

html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__title .kisaka-insights-case__word
   {
      opacity: 1;
      filter: blur(0);
      transform: none;
      transition-delay: var(--case-word-delay, 0.12s);
   }

html.kisaka-scenes .kisaka-insights-case__kicker, html.kisaka-scenes .kisaka-insights-case__deck
   {
      --case-block-from: 8px;
      opacity: 0;
      transform: translate3d(0, var(--case-block-from), 0);
      transition: opacity var(--kisaka-dur-reveal) var(--kisaka-ease-out), transform var(--kisaka-dur-reveal) var(--kisaka-ease-out);
   }

html.kisaka-scenes .kisaka-insights-case.is-from-above .kisaka-insights-case__kicker,
html.kisaka-scenes .kisaka-insights-case.is-from-above .kisaka-insights-case__deck
   {
      --case-block-from: -8px;
   }

html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__kicker,
html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__deck
   {
      opacity: 1;
      transform: none;
   }

html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__kicker
   {
      transition-delay: 0.06s;
   }

html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__deck
   {
      transition-delay: var(--case-deck-delay, 0.5s);
   }

/* The picture changes with each slide, so it fades through rather than holding. */
html.kisaka-scenes .kisaka-insights-case__media
   {
      opacity: 0;
      transform: scale(0.97);
      transition: opacity var(--kisaka-dur-reveal) var(--kisaka-ease-out), transform 720ms var(--kisaka-ease-out);
   }

html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__media
   {
      opacity: 1;
      transform: none;
      transition-delay: 0.06s;
   }

/* The frame. The top rule draws from the label; the right rail grows down; the floor draws in from the corner. */
html.kisaka-scenes .kisaka-insights-case__eyebrow,
html.kisaka-scenes .kisaka-insights-case__meta,
html.kisaka-scenes .kisaka-insights-case__count
   {
      opacity: 0;
      transform: translate3d(0, 12px, 0);
      transition: opacity var(--kisaka-dur-reveal) var(--kisaka-ease-out), transform var(--kisaka-dur-reveal) var(--kisaka-ease-out), background-color 0.2s ease, color 0.2s ease;
   }

html.kisaka-scenes .kisaka-insights-case__rule
   {
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 720ms var(--kisaka-ease-out);
   }

html.kisaka-scenes .kisaka-insights-case__floor
   {
      transform: scaleX(0);
      transform-origin: right center;
      transition: transform 720ms var(--kisaka-ease-out);
   }

html.kisaka-scenes .kisaka-insights-case__frame::before
   {
      clip-path: inset(0 0 100% 0);
      opacity: 1;
      transition: clip-path 720ms var(--kisaka-ease-out), opacity 320ms var(--kisaka-ease-out);
   }

html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__eyebrow,
html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__meta,
html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__count
   {
      opacity: 1;
      transform: none;
   }

html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__cta:active
   {
      transform: scale(0.97);
   }

html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__rule
   {
      transform: none;
      transition-delay: 0.06s;
   }

html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__frame::before
   {
      clip-path: inset(0);
      transition-delay: 0.12s, 0s;
   }

html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__floor
   {
      transform: none;
      transition-delay: 0.22s;
   }

html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__meta
   {
      transition-delay: 0.24s, 0.24s, 0s, 0s;
   }

html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__count
   {
      transition-delay: 0.28s, 0.28s, 0s, 0s;
   }

html.kisaka-scenes .kisaka-insights-case.is-frame-held .kisaka-insights-case__eyebrow,
html.kisaka-scenes .kisaka-insights-case.is-frame-held .kisaka-insights-case__rule,
html.kisaka-scenes .kisaka-insights-case.is-frame-held .kisaka-insights-case__floor,
html.kisaka-scenes .kisaka-insights-case.is-frame-held .kisaka-insights-case__meta,
html.kisaka-scenes .kisaka-insights-case.is-frame-held .kisaka-insights-case__count
   {
      transition-property: background-color, color;
   }

/* Line drawing: a pen at the clip edge un-draws the button from the right, then redraws it. */
html.kisaka-scenes .kisaka-insights-case__cta
   {
      clip-path: inset(0 100% 0 0);
      transition: clip-path 320ms var(--kisaka-ease-out), border-color 200ms ease, color 200ms ease, background-color 200ms ease, transform 100ms var(--kisaka-ease-out);
   }

html.kisaka-scenes .kisaka-insights-case__cta::after
   {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(to right, #fff 0, #fff 2px, transparent 2px);
      opacity: 0;
      transform: translate3d(0, 0, 0);
      transition: transform 320ms var(--kisaka-ease-out), opacity 160ms var(--kisaka-ease-out);
   }

html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__cta
   {
      clip-path: inset(0 0 0 0);
   }

html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__cta::after
   {
      opacity: 1;
      transform: translate3d(calc(100% - 2px), 0, 0);
   }

html.kisaka-scenes .kisaka-insights-case.is-current:not(.is-leaving) .kisaka-insights-case__cta::after
   {
      animation: kisaka-cta-pen-rest 160ms var(--kisaka-ease-out) 320ms forwards;
   }

html.kisaka-scenes .kisaka-insights-case.is-current.is-leaving .kisaka-insights-case__cta
   {
      clip-path: inset(0 100% 0 0);
      transition-delay: 0s;
   }

html.kisaka-scenes .kisaka-insights-case.is-current.is-leaving .kisaka-insights-case__cta::after
   {
      animation: none;
      opacity: 1;
      transform: translate3d(0, 0, 0);
   }

html.kisaka-scenes .kisaka-insights-case.is-frame-held .kisaka-insights-case__frame::before
   {
      clip-path: inset(0);
      opacity: 1;
      transition: none;
   }

/* Leaving: everything clears at once, quickly, so the next scene isn't kept waiting. */
html.kisaka-scenes .kisaka-insights-case.is-current.is-leaving .kisaka-insights-case__title .kisaka-insights-case__word
   {
      opacity: 0;
      filter: blur(6px);
      transform: translate3d(0, var(--case-to), 0);
      transition-duration: 280ms;
      transition-delay: 0s;
   }

html.kisaka-scenes .kisaka-insights-case.is-current.is-leaving .kisaka-insights-case__kicker,
html.kisaka-scenes .kisaka-insights-case.is-current.is-leaving .kisaka-insights-case__deck
   {
      opacity: 0;
      transition-duration: 280ms;
      transition-delay: 0s;
   }

html.kisaka-scenes .kisaka-insights-case.is-current.is-leaving .kisaka-insights-case__count .kisaka-insights-case__word
   {
      transform: translate3d(0, -115%, 0);
      transition-duration: 320ms;
      transition-delay: 0s;
   }

html.kisaka-scenes .kisaka-insights-case.is-current.is-leaving--back .kisaka-insights-case__count .kisaka-insights-case__word
   {
      transform: translate3d(0, 115%, 0);
   }

html.kisaka-scenes .kisaka-insights-case.is-current.is-leaving .kisaka-insights-case__media
   {
      opacity: 0;
      transition-duration: 320ms;
      transition-delay: 0s;
   }

html.kisaka-scenes .kisaka-insights-case.is-current.is-leaving--frame .kisaka-insights-case__eyebrow,
html.kisaka-scenes .kisaka-insights-case.is-current.is-leaving--frame .kisaka-insights-case__meta,
html.kisaka-scenes .kisaka-insights-case.is-current.is-leaving--frame .kisaka-insights-case__count,
html.kisaka-scenes .kisaka-insights-case.is-current.is-leaving--frame .kisaka-insights-case__rule,
html.kisaka-scenes .kisaka-insights-case.is-current.is-leaving--frame .kisaka-insights-case__floor,
html.kisaka-scenes .kisaka-insights-case.is-current.is-leaving--frame .kisaka-insights-case__frame::before
   {
      opacity: 0;
      transition: opacity 320ms var(--kisaka-ease-out);
   }

/* Hero fades its content out and back in around the jump; the shelf stages its own (below). */
html.kisaka-scenes .kisaka-insights-stage__shell
   {
      z-index: 1;
      transition: opacity 480ms var(--kisaka-ease-out);
   }

html.kisaka-scenes .kisaka-insights-stage.is-scene-out .kisaka-insights-stage__shell
   {
      opacity: 0;
      transition-duration: 320ms;
   }

/* Shelf entrance, after About's "What we stand for" (.kisaka-about-stand): the rule
   draws, the title inks in letter by letter, cards glide in from the right in
   on-screen order, the counter last. is-scene-out is the held-blank state;
   is-arriving carries the entrance timings (js/kisaka-insights-scenes.js land()).
   Leaving (is-leaving) is quieter and goes with the page, below. */
.kisaka-insights-rail__char
   {
      display: inline-block;
   }

html.kisaka-scenes .kisaka-insights-rail__rule
   {
      transform-origin: left center;
   }

/* Held blank: set instantly inside snap() before the jump, and where the exit fades to. */
html.kisaka-scenes .kisaka-insights-rail.is-scene-out .kisaka-insights-rail__eyebrow,
html.kisaka-scenes .kisaka-insights-rail.is-scene-out .kisaka-insights-rail__tools,
html.kisaka-scenes .kisaka-insights-rail.is-scene-out .kisaka-insights-rail__foot
   {
      opacity: 0;
   }

html.kisaka-scenes .kisaka-insights-rail.is-scene-out .kisaka-insights-rail__rule
   {
      transform: scaleX(0);
   }

html.kisaka-scenes .kisaka-insights-rail.is-scene-out .kisaka-insights-rail__char
   {
      color: rgba(255, 255, 255, 0.14);
   }

html.kisaka-scenes .kisaka-insights-rail.is-scene-out .kisaka-insights-rail__card
   {
      opacity: 0;
      transform: translate3d(32vw, 0, 0);
   }

/* Arrival timings. */
html.kisaka-scenes .kisaka-insights-rail.is-arriving .kisaka-insights-rail__eyebrow
   {
      transition: opacity 0.6s linear;
   }

html.kisaka-scenes .kisaka-insights-rail.is-arriving .kisaka-insights-rail__rule
   {
      transition: transform 0.9s var(--kisaka-ease-out-expo) 0.1s;
   }

html.kisaka-scenes .kisaka-insights-rail.is-arriving .kisaka-insights-rail__char
   {
      transition: color 0.55s var(--kisaka-ease-out);
      transition-delay: calc(var(--i, 0) * 22ms);
   }

html.kisaka-scenes .kisaka-insights-rail.is-arriving .kisaka-insights-rail__tools
   {
      transition: opacity 0.6s linear 0.25s;
   }

html.kisaka-scenes .kisaka-insights-rail.is-arriving .kisaka-insights-rail__card
   {
      transition: opacity 0.45s linear, transform 1.25s var(--kisaka-ease-out-expo);
      transition-delay: calc(var(--rail-enter, 0) * 70ms + 0.05s);
   }

html.kisaka-scenes .kisaka-insights-rail.is-arriving .kisaka-insights-rail__foot
   {
      transition: opacity 0.6s linear 0.6s;
   }

/* Leaving back up to the slides: the whole shelf clears at once inside LEAVE_MS,
   cards slipping a little down with the page (as the slides' words do going back),
   never sideways against the page's travel. */
html.kisaka-scenes .kisaka-insights-rail.is-leaving .kisaka-insights-rail__eyebrow,
html.kisaka-scenes .kisaka-insights-rail.is-leaving .kisaka-insights-rail__tools,
html.kisaka-scenes .kisaka-insights-rail.is-leaving .kisaka-insights-rail__foot
   {
      transition: opacity 200ms var(--kisaka-ease-out);
   }

html.kisaka-scenes .kisaka-insights-rail.is-leaving .kisaka-insights-rail__rule
   {
      transition: transform 200ms var(--kisaka-ease-out);
   }

html.kisaka-scenes .kisaka-insights-rail.is-leaving .kisaka-insights-rail__char
   {
      transition: color 200ms var(--kisaka-ease-out);
   }

html.kisaka-scenes .kisaka-insights-rail.is-scene-out.is-leaving .kisaka-insights-rail__card
   {
      transform: translate3d(0, 12px, 0);
      transition: opacity 200ms var(--kisaka-ease-out), transform 240ms var(--kisaka-ease-out);
   }

/* Previous scene's wash sits on the incoming one, then fades so the colour
   drifts instead of cutting at the jump. Gradients don't interpolate. */
html.kisaka-scenes .kisaka-insights-stage::after,
html.kisaka-scenes .kisaka-insights-case::after,
html.kisaka-scenes .kisaka-insights-rail::after
   {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background: var(--scene-bg-prev, none);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--kisaka-dur-reveal) var(--kisaka-ease-in-out);
   }

html.kisaka-scenes .kisaka-insights-stage.is-bg-handoff::after,
html.kisaka-scenes .kisaka-insights-case.is-bg-handoff::after,
html.kisaka-scenes .kisaka-insights-rail.is-bg-handoff::after
   {
      opacity: 1;
   }

/* Re-arming a scene on the side it will rise from happens without animating there. */
html.kisaka-scenes .is-snap,
html.kisaka-scenes .is-snap *,
html.kisaka-scenes .is-snap::after,
html.kisaka-scenes .is-snap::before,
html.kisaka-scenes .is-snap *::before,
html.kisaka-scenes .is-snap *::after
   {
      transition: none !important;
      animation: none !important;
   }

@media (prefers-reduced-motion: reduce)
   {
      html.kisaka-scenes .kisaka-insights-stage::after,
      html.kisaka-scenes .kisaka-insights-case::after,
      html.kisaka-scenes .kisaka-insights-rail::after
         {
            transition: none;
         }

      html.kisaka-scenes .kisaka-insights-case__cta
         {
            clip-path: none;
            opacity: 0;
            transition: opacity 200ms var(--kisaka-ease-out);
         }

      html.kisaka-scenes .kisaka-insights-case.is-current .kisaka-insights-case__cta
         {
            opacity: 1;
         }

      html.kisaka-scenes .kisaka-insights-case.is-current.is-leaving .kisaka-insights-case__cta
         {
            opacity: 0;
         }

      html.kisaka-scenes .kisaka-insights-case__cta::after
         {
            content: none;
            transform: none;
            animation: none;
         }
   }

@media (max-width: 991px)
   {
      .kisaka-insights-case
         {
            height: auto;
            min-height: 100svh;
         }

      .kisaka-insights-case__frame, .kisaka-insights-case--flip .kisaka-insights-case__frame
         {
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: auto minmax(34%, 0.95fr) auto auto;
            grid-template-areas: "brand" "media" "copy" "foot";
            row-gap: 24px;
         }

      .kisaka-insights-case__eyebrow
         {
            white-space: normal;
         }

      .kisaka-insights-case__floor
         {
            margin-right: var(--frame-rail);
         }

      .kisaka-insights-case__media
         {
            width: 100%;
            height: 100%;
            max-width: none;
         }

      .kisaka-insights-case__count
         {
            display: none;
         }
   }