/* ==========================================================================
   Kisaka fraud, reviews & valuations page
   Paper, ink, one red. A magnifying glass you can pick up, a file that
   builds itself as you scroll, a fan of four mandates, a stack of limits.
   Brand tokens (fonts, red, easings) come from kisaka-base.css :root.
   Used by: fraud-investigation-reviews-valuations.html
   ========================================================================== */
.kisaka-fraud-page
   {
      --fx-paper: #f3f2ef;
      --fx-paper-deep: #e9e7e2;
      --fx-ink: #171214;
      --fx-body: #4b4346;
      --fx-muted: #7b7376;
      --fx-faint: #b8b1b3;
      --fx-line: #ddd8d4;
      --fx-line-strong: #c6bfbb;
      --fx-panel: #ffffff;
      --fx-red: var(--kisaka-red, #cb1f34);
      --fx-red-glow: var(--kisaka-red-glow, #e8485c);
      --fx-red-wash: rgba(203, 31, 52, 0.08);
      --fx-dark: #000000;
      --fx-dark-2: #0a0b0c;
      --fx-display: var(--kisaka-font-family, 'Zalando Sans Expanded', sans-serif);
      --fx-text: var(--kisaka-font-accent, 'Google Sans Flex', sans-serif);
      --fx-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
      --fx-ease: var(--kisaka-ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
      --fx-ease-soft: var(--kisaka-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
      --fx-gutter: clamp(20px, 5vw, 72px);
      --fx-max: 1440px;
      --fx-header: var(--kisaka-header-h, 72px);
      background: var(--fx-paper);
      color: var(--fx-ink);
      font-family: var(--fx-text);
   }

/* The nav sits on the paper at rest and only goes white once it is stuck. */
.kisaka-fraud-page .header, .kisaka-fraud-page .header .header-inner
   {
      background: var(--fx-paper);
      border-bottom-color: transparent;
   }

.kisaka-fraud-page .header.sticky .header-inner
   {
      background: #ffffff;
      border-bottom-color: #e8eaef;
   }

.fx
   {
      position: relative;
      overflow-x: clip;
   }

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

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

.fx h1, .fx h2, .fx h3
   {
      font-family: var(--fx-display);
      color: var(--fx-ink);
      margin: 0;
   }

.fx p
   {
      margin: 0;
   }

.fx a
   {
      color: inherit;
   }

.fx a:focus-visible, .fx button:focus-visible
   {
      outline: 2px solid var(--fx-red);
      outline-offset: 4px;
   }

.fx-mono
   {
      font-family: var(--fx-mono);
      font-size: 12px;
      letter-spacing: 0.01em;
      color: var(--fx-muted);
   }

/* --------------------------------------------------------------------------
   Rulers and the section rail
   -------------------------------------------------------------------------- */
.fx-ruler
   {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 14px;
      pointer-events: none;
      background-image: repeating-linear-gradient(to bottom, var(--fx-line-strong) 0 1px, transparent 1px 8px), repeating-linear-gradient(to bottom, var(--fx-line-strong) 0 1px, transparent 1px 64px);
      background-size: 6px 100%, 14px 100%;
      background-repeat: no-repeat;
      opacity: 0.8;
   }

.fx-ruler--left
   {
      left: 0;
      background-position: left top, left top;
   }

.fx-ruler--right
   {
      right: 0;
      background-position: right top, right top;
   }

.fx-rail
   {
      position: fixed;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 20;
      display: flex;
      align-items: center;
      gap: 8px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 320ms ease;
   }

.fx-rail.is-on
   {
      opacity: 1;
   }

.fx-rail__chip
   {
      font-family: var(--fx-mono);
      font-size: 11.5px;
      color: var(--fx-ink);
      background: var(--fx-panel);
      border: 1px solid var(--fx-line);
      border-radius: 4px;
      padding: 3px 8px;
   }

.fx-rail__dot
   {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--fx-red-glow);
   }

/* --------------------------------------------------------------------------
   Buttons and links
   The site's outlined button from the services page: tracked uppercase
   label, 8px corners, the arrow pair that flies out and back in on hover.
   The arrow box and its two SVGs are styled in kisaka-base.css.
   -------------------------------------------------------------------------- */
.fx .fx-btn
   {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 13.5rem;
      padding: 15px 30px;
      border: 1px solid var(--fx-line-strong);
      border-radius: var(--kisaka-btn-radius, 8px);
      font-family: var(--fx-text);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      line-height: 1.4;
      color: var(--fx-ink);
      background: transparent;
      text-decoration: none;
      white-space: nowrap;
      transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease, transform 100ms ease-out;
   }

.fx .fx-btn:hover, .fx .fx-btn:focus-visible
   {
      color: var(--fx-paper);
      background: var(--fx-ink);
      border-color: var(--fx-ink);
      text-decoration: none;
   }

.fx .fx-btn:active
   {
      transform: scale(0.985);
   }

.fx .fx-btn--ink
   {
      color: #fff;
      background: var(--fx-ink);
      border-color: var(--fx-ink);
   }

.fx .fx-btn--ink:hover, .fx .fx-btn--ink:focus-visible
   {
      color: #fff;
      background: var(--fx-red);
      border-color: var(--fx-red);
   }

.fx .fx-link
   {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      color: var(--fx-ink);
   }

.fx .fx-link:hover, .fx .fx-link:focus-visible
   {
      color: var(--fx-ink);
      text-decoration: none;
   }

.fx .fx-link .kisaka-home-launch__btn-arrow-box
   {
      width: 1em;
      height: 1em;
   }

.fx-btn:hover .kisaka-home-launch__btn-arrow, .fx-btn:focus-visible .kisaka-home-launch__btn-arrow,
.fx-link:hover .kisaka-home-launch__btn-arrow, .fx-link:focus-visible .kisaka-home-launch__btn-arrow
   {
      transform: translate(115%, -115%);
   }

.fx-btn:hover .kisaka-home-launch__btn-arrow--ghost, .fx-btn:focus-visible .kisaka-home-launch__btn-arrow--ghost,
.fx-link:hover .kisaka-home-launch__btn-arrow--ghost, .fx-link:focus-visible .kisaka-home-launch__btn-arrow--ghost
   {
      transform: translate(0, 0);
   }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.fx-hero
   {
      position: relative;
      min-height: 100vh;
      min-height: 100dvh;
      padding-top: calc(var(--fx-header) + clamp(20px, 3.6vh, 40px));
      padding-bottom: 64px;
      display: flex;
      flex-direction: column;
   }

/* Two bands, both kept clear of the loupe on the right. The name sits at
   the top like the IT page; the lead and buttons rest at the bottom so the
   hero uses its height instead of bunching in one corner. */
.fx-hero__grid
   {
      flex: 1 1 auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr);
      row-gap: clamp(32px, 6vh, 64px);
      align-items: start;
      position: relative;
   }

.fx-hero__head
   {
      position: relative;
      max-width: 62%;
   }

.fx-hero__stage
   {
      position: relative;
      align-self: end;
      max-width: 56%;
   }

/* Kicker: the services / page trail the IT page uses, on paper. */
.fx-kicker
   {
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 0 0 20px;
      font-family: var(--fx-text);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--fx-muted);
   }

.fx-kicker__path
   {
      min-width: 0;
   }

.fx-kicker__back
   {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 10px 0;
      margin: -10px -0.12em -10px 0;
      color: var(--fx-ink);
      text-decoration: none;
      transition: color 100ms ease-out, transform 100ms ease-out;
   }

.fx-kicker__back:hover, .fx-kicker__back:focus-visible
   {
      color: var(--fx-red);
   }

.fx-kicker__back:active
   {
      color: var(--fx-red);
      transform: scale(0.97);
   }

.fx-kicker__sep
   {
      color: var(--fx-faint);
   }

.fx-kicker__leaf
   {
      color: var(--fx-red);
   }

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

.is-in .fx-kicker__rule
   {
      transform: scaleX(1);
   }

/* Title: thin line over a bold line, same ink fill as the IT page. An
   outlined copy sits under a solid copy masked by a raking gradient, and
   --ink walks that gradient across the glyphs so the name draws itself. */
@property --ink
   {
      syntax: "<number>";
      inherits: false;
      initial-value: -12;
   }

.fx-hero__title
   {
      position: relative;
      line-height: 0.88;
      letter-spacing: -0.045em;
      text-transform: uppercase;
   }

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

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

.fx-hero__ghost
   {
      color: transparent;
      -webkit-text-stroke: 1px var(--fx-line-strong);
      text-stroke: 1px var(--fx-line-strong);
   }

.fx-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 cubic-bezier(0.645, 0.045, 0.355, 1) var(--fx-delay, 0ms);
      will-change: --ink;
   }

.is-in .fx-hero__ink
   {
      --ink: 112;
   }

.fx-hero__line--thin .fx-hero__ghost, .fx-hero__line--thin .fx-hero__ink
   {
      font-size: clamp(2rem, 3.85vw, 3.85rem);
      font-weight: 200;
   }

.fx-hero__line--thin .fx-hero__ink
   {
      color: var(--fx-body);
   }

.fx-hero__line--bold .fx-hero__ghost, .fx-hero__line--bold .fx-hero__ink
   {
      font-size: clamp(2.7rem, 6.45vw, 6.1rem);
      font-weight: 800;
   }

.fx-hero__line--bold .fx-hero__ink
   {
      color: var(--fx-ink);
   }

.fx-hero__line--end .fx-hero__ghost::after, .fx-hero__line--end .fx-hero__ink::after
   {
      content: ".";
   }

.fx-hero__line--end .fx-hero__ink::after
   {
      color: var(--fx-red);
   }

/* Marks that only show through the glass. The clone inside the lens gets
   .is-under-lens, the page itself never does. */
.fx-mark
   {
      position: absolute;
      font-family: var(--fx-mono);
      font-size: 13px;
      line-height: 1.35;
      color: var(--fx-red);
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
   }

.fx-mark::before
   {
      content: "";
      position: absolute;
      left: -12px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--fx-red);
   }

.fx-mark--1
   {
      left: 2%;
      top: 8%;
   }

.fx-mark--2
   {
      left: 48%;
      top: 22%;
   }

.fx-mark--3
   {
      left: 18%;
      bottom: -18%;
   }

.is-under-lens .fx-mark
   {
      opacity: 1;
   }

/* Under the paper. A ghost of the file sits in the hero's white space and
   only reads through the glass: ledger rows, a copy stamp, a redacted payee
   and the investigator's red notes. Positions are percentages of the hero
   grid, set inline with --ux and --uy; --ur is a small tilt. */
.fx-under
   {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
      opacity: 0;
      font-family: var(--fx-mono);
      font-size: 12px;
      line-height: 1.4;
      color: var(--fx-muted);
   }

.is-under-lens .fx-under
   {
      opacity: 1;
   }

.fx-under > *
   {
      position: absolute;
      left: var(--ux, 0);
      top: var(--uy, 0);
      white-space: nowrap;
      rotate: var(--ur, 0deg);
   }

.fx-under__ledger
   {
      width: 44%;
      min-width: 520px;
      display: grid;
      row-gap: 4px;
   }

.fx-under__row
   {
      display: grid;
      grid-template-columns: 9ch 8ch minmax(0, 1fr) 13ch;
      column-gap: 20px;
      padding: 3px 0;
      border-bottom: 1px solid var(--fx-line);
   }

.fx-under__row i
   {
      font-style: normal;
      overflow: hidden;
      text-overflow: ellipsis;
   }

.fx-under__row b
   {
      font-weight: 400;
      text-align: right;
      font-variant-numeric: tabular-nums;
   }

.fx-under__row.is-flag
   {
      color: var(--fx-ink);
      border-bottom: 2px solid var(--fx-red);
   }

.fx-under__row.is-flag b
   {
      color: var(--fx-red);
   }

.fx-under__note
   {
      font-family: var(--fx-text);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--fx-red);
   }

.fx-under__stamp
   {
      padding: 7px 14px;
      border: 2px solid var(--fx-red);
      border-radius: 3px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--fx-red);
      opacity: 0.85;
   }

.fx-under__stamp--small
   {
      padding: 5px 10px;
      font-size: 11px;
   }

.fx-under__redact
   {
      color: var(--fx-ink);
   }

.fx-under__redact s
   {
      display: inline-block;
      width: 11ch;
      height: 0.95em;
      vertical-align: -0.12em;
      background: var(--fx-ink);
      text-decoration: none;
   }

.fx-hero__lead
   {
      font-size: clamp(17px, 1.4vw, 21px);
      line-height: 1.45;
      color: var(--fx-body);
      max-width: 40ch;
   }

.fx-hero__actions
   {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
   }

/* The loupe. A Three.js glass on a fixed layer, a 2D canvas under it for the
   shadow, and a clone of the page scaled 1.6 behind a circular clip for the
   magnified view. The home anchor in the hero only tells the loupe where to
   rest. Layers bottom to top: view 69, glass rim 69, paper 70, WebGL 71,
   hit 72. The header sits above all of them. */
.fx-loupe-home
   {
      position: absolute;
      right: 3%;
      top: calc(var(--fx-header) + 0.5rem);
      z-index: 0;
      width: min(44vw, 600px);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      pointer-events: none;
   }

/* The poster is a still of the same glass. It covers the first paint and
   stays up when WebGL is not available. --lx, --ly and --lr come from the
   loupe script: lens centre and radius inside the anchor. */
.fx-loupe-poster
   {
      position: absolute;
      left: calc(var(--lx, 42%) - var(--lr, 150px) * 1.55);
      top: calc(var(--ly, 42%) - var(--lr, 150px) * 1.45);
      width: calc(var(--lr, 150px) * 3.8);
      max-width: none;
      height: auto;
      pointer-events: none;
      transition: opacity 450ms var(--fx-ease-soft);
      animation: fx-loupe-float 6s ease-in-out infinite;
   }

html.fx-loupe-live .fx-loupe-poster
   {
      opacity: 0;
      animation: none;
   }

@keyframes fx-loupe-float
   {
      50%
         {
            translate: 0 -0.35%;
         }
   }

/* Secret ink only reads through the glass. The script sets --sx, --sy and
   --sr relative to the element's own box. */
.fx-secret
   {
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-mask-image: radial-gradient(circle var(--sr, 0px) at var(--sx, -9999px) var(--sy, -9999px), #000 97%, transparent 100%);
      mask-image: radial-gradient(circle var(--sr, 0px) at var(--sx, -9999px) var(--sy, -9999px), #000 97%, transparent 100%);
   }

.fx-secret:not(.is-lit)
   {
      visibility: hidden;
   }

.fx-loupe-note
   {
      font-family: var(--fx-text);
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 0.95;
      color: #ff3e3e;
      white-space: nowrap;
   }

.fx-loupe-invite
   {
      position: absolute;
      left: var(--lx, 42%);
      top: var(--ly, 42%);
      font-size: clamp(13px, calc(var(--lr, 150px) * 0.162), 26px);
   }

.fx-loupe-invite--text
   {
      text-align: center;
      transform: translate(-50%, calc(-100% - 0.45em));
   }

.fx-loupe-invite--text span
   {
      display: block;
   }

.fx-loupe-invite--arrow
   {
      transform: translate(0.3em, 0.35em);
   }

.fx-loupe-invite--arrow svg
   {
      display: block;
      width: 0.9em;
      height: 0.9em;
   }

/* The magnified page: a clone of main and footer, plus a clone of the header
   that does not scroll, both scaled 1.6 about the lens centre. */
.fx-loupe-view
   {
      position: fixed;
      inset: 0;
      z-index: 69;
      pointer-events: none;
      opacity: 0;
      background: var(--fx-paper);
      contain: strict;
      overflow: hidden;
   }

.fx-loupe-page, .fx-loupe-fixed
   {
      position: absolute;
      left: 0;
      top: 0;
      transform-origin: 0 0;
      will-change: transform;
   }

.fx-loupe-fixed
   {
      width: 100%;
      height: 100%;
   }

.fx-loupe-clone *, .fx-loupe-clone *::before, .fx-loupe-clone *::after
   {
      transition: none !important;
      animation: none !important;
   }

.fx-loupe-clone .fx-secret
   {
      visibility: visible !important;
      -webkit-mask-image: none !important;
      mask-image: none !important;
   }

.fx-loupe-glass
   {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 69;
      pointer-events: none;
      border-radius: 50%;
      transform-origin: 50% 50%;
      will-change: transform;
      transition: opacity 400ms var(--fx-ease-soft);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 0 22px rgba(18, 18, 20, 0.1);
   }

.fx-loupe-paper
   {
      position: fixed;
      inset: 0;
      z-index: 70;
      pointer-events: none;
      transition: opacity 400ms var(--fx-ease-soft);
   }

.fx-loupe-layer
   {
      position: fixed;
      inset: 0;
      z-index: 71;
      pointer-events: none;
      transition: opacity 400ms var(--fx-ease-soft);
   }

.fx-loupe-layer canvas
   {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      max-width: none;
   }

.fx-loupe-hit
   {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 72;
      border-radius: 50%;
      cursor: grab;
      touch-action: none;
      will-change: transform;
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition: opacity 400ms var(--fx-ease-soft);
   }

.fx-loupe-hit.is-held, html.fx-loupe-held
   {
      cursor: grabbing;
   }

.fx-loupe-handle
   {
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: 0 0;
      border-radius: 999px;
   }

/* No loupe on phones. The script does not start there either. */
@media (max-width: 768px)
   {
      .fx-under, .fx-loupe-home, .fx-loupe-view, .fx-loupe-glass, .fx-loupe-paper, .fx-loupe-layer, .fx-loupe-hit
         {
            display: none;
         }
   }

@media (prefers-reduced-motion: reduce)
   {
      .fx-loupe-poster
         {
            animation: none;
         }
   }

@media print
   {
      .fx-loupe-view, .fx-loupe-glass, .fx-loupe-paper, .fx-loupe-layer, .fx-loupe-hit
         {
            display: none;
         }
   }

/* --------------------------------------------------------------------------
   The build: a pinned stage, the file drawing itself as you scroll
   -------------------------------------------------------------------------- */
.fx-build
   {
      position: relative;
      --fx-steps: 5;
      height: calc(var(--fx-steps) * 100vh + 60vh);
      background-image: radial-gradient(var(--fx-line-strong) 0.8px, transparent 0.9px);
      background-size: 22px 22px;
      background-position: center;
   }

.fx-build__stage
   {
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
   }

.fx-build__frame
   {
      position: relative;
      height: 100%;
      padding-top: calc(var(--fx-header) + 24px);
      padding-bottom: 36px;
   }

.fx-build__label
   {
      position: absolute;
      left: var(--fx-gutter);
      top: calc(var(--fx-header) + 24px);
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-family: var(--fx-mono);
      font-size: 12.5px;
   }

.fx-build__label span:first-child
   {
      color: var(--fx-muted);
   }

.fx-build__progress
   {
      position: absolute;
      right: var(--fx-gutter);
      top: calc(var(--fx-header) + 24px);
      text-align: right;
      font-family: var(--fx-mono);
      font-size: 12.5px;
      color: var(--fx-muted);
   }

.fx-build__progress strong
   {
      display: block;
      margin-top: 2px;
      font-family: var(--fx-text);
      font-size: clamp(40px, 5vw, 76px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -0.04em;
      color: var(--fx-line-strong);
      font-variant-numeric: tabular-nums;
   }

.fx-build__progress small
   {
      font-size: 0.42em;
      margin-left: 2px;
   }

.fx-build__canvas
   {
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(920px, 62vw);
      transform: translate(-50%, -54%);
   }

.fx-build__canvas svg
   {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
   }

.fx-build__button
   {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(0.92);
      opacity: 0;
      pointer-events: none;
      transition: opacity 480ms ease, transform 700ms var(--fx-ease);
   }

.fx-build__handles
   {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 236px;
      height: 68px;
      transform: translate(-50%, -50%);
      border: 1px solid var(--fx-red-glow);
      opacity: 0;
      pointer-events: none;
      transition: opacity 480ms ease 120ms;
   }

.fx-build__handles i
   {
      position: absolute;
      width: 7px;
      height: 7px;
      background: var(--fx-paper);
      border: 1px solid var(--fx-red-glow);
   }

.fx-build__handles i:nth-child(1)
   {
      left: -4px;
      top: -4px;
   }

.fx-build__handles i:nth-child(2)
   {
      right: -4px;
      top: -4px;
   }

.fx-build__handles i:nth-child(3)
   {
      left: -4px;
      bottom: -4px;
   }

.fx-build__handles i:nth-child(4)
   {
      right: -4px;
      bottom: -4px;
   }

.fx-build__handles span
   {
      position: absolute;
      left: -1px;
      top: calc(100% + 8px);
      font-family: var(--fx-mono);
      font-size: 11.5px;
      color: var(--fx-red);
      white-space: nowrap;
   }

.fx-build[data-step="5"] .fx-build__button
   {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
      pointer-events: auto;
   }

.fx-build[data-step="5"] .fx-build__handles
   {
      opacity: 1;
   }

/* Captions: all five live bottom-left and crossfade. */
.fx-build__caps
   {
      position: absolute;
      left: var(--fx-gutter);
      bottom: 40px;
      width: min(480px, 60vw);
      list-style: none;
      margin: 0;
      padding: 0;
   }

.fx-build__cap
   {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 420ms ease, transform 640ms var(--fx-ease);
      pointer-events: none;
   }

.fx-build__cap.is-on
   {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
   }

.fx-build__n
   {
      display: block;
      font-family: var(--fx-mono);
      font-size: 12.5px;
      color: var(--fx-muted);
      margin-bottom: 14px;
   }

.fx-build__n em
   {
      font-style: normal;
      color: var(--fx-red);
   }

.fx-build__cap h2
   {
      font-size: clamp(30px, 3vw, 42px);
      font-weight: 500;
      letter-spacing: -0.03em;
      line-height: 1;
      margin-bottom: 14px;
   }

.fx-build__cap p
   {
      font-size: 18px;
      line-height: 1.5;
      color: var(--fx-body);
      max-width: 42ch;
   }

.fx .fx-build__skip
   {
      position: absolute;
      right: var(--fx-gutter);
      bottom: 44px;
      font-family: var(--fx-mono);
      font-size: 13px;
      color: var(--fx-ink);
      text-decoration: none;
   }

.fx .fx-build__skip:hover
   {
      color: var(--fx-red);
      text-decoration: none;
   }

/* The drawing. Each step owns a group that comes in on its turn and goes
   when the file moves on. */
.fx-draw
   {
      --fx-draw-ease: var(--fx-ease);
   }

.fx-draw line, .fx-draw path, .fx-draw rect, .fx-draw circle, .fx-draw text
   {
      transition: opacity 560ms ease, stroke-dashoffset 1100ms var(--fx-draw-ease), transform 800ms var(--fx-draw-ease);
   }

.fx-draw .fx-s
   {
      opacity: 0;
   }

.fx-draw .fx-s--line
   {
      stroke-dasharray: 1200;
      stroke-dashoffset: 1200;
   }

.fx-draw text
   {
      font-family: var(--fx-mono);
      font-size: 12px;
      fill: var(--fx-muted);
   }

.fx-draw text.fx-red
   {
      fill: var(--fx-red);
   }

.fx-draw text.fx-h
   {
      font-family: var(--fx-display);
      font-size: 22px;
      font-weight: 500;
      fill: var(--fx-ink);
      letter-spacing: -0.02em;
   }

.fx-build[data-step="1"] .fx-s-1, .fx-build[data-step="2"] .fx-s-1, .fx-build[data-step="3"] .fx-s-1,
.fx-build[data-step="2"] .fx-s-2, .fx-build[data-step="3"] .fx-s-2,
.fx-build[data-step="3"] .fx-s-3,
.fx-build[data-step="4"] .fx-s-4
   {
      opacity: 1;
      stroke-dashoffset: 0;
   }

.fx-build[data-step="1"] .fx-page, .fx-build[data-step="2"] .fx-page, .fx-build[data-step="3"] .fx-page, .fx-build[data-step="4"] .fx-page
   {
      opacity: 1;
      stroke-dashoffset: 0;
   }

.fx-build[data-step="2"] .fx-s-1-fade, .fx-build[data-step="3"] .fx-s-1-fade
   {
      opacity: 0.18;
   }

.fx-build[data-step="4"] .fx-s-1-fade, .fx-build[data-step="4"] .fx-s-2
   {
      opacity: 0;
   }

/* --------------------------------------------------------------------------
   Stance: one statement that darkens as you read, then four columns
   -------------------------------------------------------------------------- */
.fx-stance
   {
      padding: clamp(120px, 18vh, 220px) 0 clamp(96px, 12vh, 160px);
   }

.fx-stance__statement
   {
      font-family: var(--fx-display);
      font-size: clamp(32px, 4.5vw, 66px);
      font-weight: 500;
      letter-spacing: -0.035em;
      line-height: 1.02;
      max-width: 17ch;
      color: var(--fx-ink);
   }

.fx-stance__statement .fx-w
   {
      color: var(--fx-faint);
      transition: color 360ms ease;
   }

.fx-stance__statement .fx-w.is-read
   {
      color: var(--fx-ink);
   }

.fx-stance__cols
   {
      list-style: none;
      margin: clamp(64px, 9vh, 112px) 0 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 40px;
   }

.fx-stance__cols li
   {
      border-top: 1px solid var(--fx-line-strong);
      padding-top: 26px;
   }

.fx-stance__cols h2
   {
      font-size: 22px;
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1.15;
      margin-bottom: 14px;
   }

.fx-stance__cols p
   {
      font-size: 16px;
      line-height: 1.55;
      color: var(--fx-body);
   }

/* --------------------------------------------------------------------------
   The fan: four mandates, the one you point at opens
   -------------------------------------------------------------------------- */
.fx-fan
   {
      padding: clamp(80px, 12vh, 160px) 0;
   }

.fx-fan__title
   {
      font-size: clamp(40px, 5.4vw, 80px);
      font-weight: 500;
      letter-spacing: -0.035em;
      line-height: 1;
      max-width: 14ch;
      margin-bottom: clamp(40px, 6vh, 72px);
   }

.fx-fan__list
   {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      gap: 10px;
      height: 540px;
   }

.fx-fan__card
   {
      position: relative;
      flex: 1 1 0;
      min-width: 0;
      border: 1px solid var(--fx-line);
      border-radius: 10px;
      background: var(--fx-panel);
      overflow: hidden;
      transition: flex 700ms var(--fx-ease), border-color 300ms ease;
      cursor: pointer;
   }

.fx-fan__card.is-open
   {
      flex: 3.4 1 0;
      border-color: var(--fx-line-strong);
   }

.fx-fan__n
   {
      position: absolute;
      left: 20px;
      top: 22px;
      font-family: var(--fx-mono);
      font-size: 12.5px;
      color: var(--fx-muted);
      z-index: 2;
   }

.fx-fan__spine
   {
      position: absolute;
      left: 16px;
      bottom: 22px;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-family: var(--fx-display);
      font-size: 22px;
      font-weight: 500;
      letter-spacing: -0.02em;
      color: var(--fx-ink);
      white-space: nowrap;
      transition: opacity 240ms ease;
   }

.fx-fan__card.is-open .fx-fan__spine
   {
      opacity: 0;
   }

.fx-fan__art
   {
      position: absolute;
      inset: 0 0 auto;
      height: 52%;
      background-color: var(--fx-paper);
      background-image: repeating-linear-gradient(to bottom, transparent 0 27px, var(--fx-line) 27px 28px), linear-gradient(to right, transparent 0 48px, var(--fx-red-wash) 48px 49px, transparent 49px);
      opacity: 0.9;
      transition: opacity 360ms ease;
   }

.fx-fan__card:not(.is-open) .fx-fan__art
   {
      opacity: 0.45;
   }

.fx-fan__art::after
   {
      content: "";
      position: absolute;
      right: 12%;
      top: 28%;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 2px solid var(--fx-red);
      opacity: 0;
      transform: scale(0.6);
      transition: opacity 400ms ease 300ms, transform 700ms var(--fx-ease) 300ms;
   }

.fx-fan__card.is-open .fx-fan__art::after
   {
      opacity: 1;
      transform: scale(1);
   }

.fx-fan__body
   {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 48%;
      padding: 26px 28px 28px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 360ms ease, transform 700ms var(--fx-ease);
      min-width: 320px;
   }

.fx-fan__card.is-open .fx-fan__body
   {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 160ms;
   }

.fx-fan__body h3
   {
      font-size: 24px;
      font-weight: 500;
      letter-spacing: -0.02em;
   }

.fx-fan__tag
   {
      font-size: 18px;
      color: var(--fx-body);
   }

.fx-fan__text
   {
      font-size: 14.5px;
      line-height: 1.5;
      color: var(--fx-muted);
      max-width: 56ch;
   }

.fx-fan__foot
   {
      margin-top: auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 22px;
   }

.fx-fan__gets
   {
      font-family: var(--fx-mono);
      font-size: 12px;
      color: var(--fx-muted);
   }

/* --------------------------------------------------------------------------
   Limits: four cards that stack as you scroll
   -------------------------------------------------------------------------- */
.fx-limits
   {
      padding: clamp(80px, 12vh, 160px) 0;
   }

.fx-limits__head, .fx-journal__head
   {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: clamp(40px, 6vh, 72px);
   }

.fx-limits__head h2, .fx-journal__head h2
   {
      font-size: clamp(40px, 5.4vw, 80px);
      font-weight: 500;
      letter-spacing: -0.035em;
      line-height: 1;
   }

.fx-limits__stack
   {
      list-style: none;
      margin: 0;
      padding: 0;
   }

.fx-limits__card
   {
      position: sticky;
      top: calc(var(--fx-header) + 24px + var(--i, 0) * 16px);
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
      min-height: min(520px, 68vh);
      margin-bottom: 28px;
      border: 1px solid var(--fx-line);
      border-radius: 12px;
      background: var(--fx-panel);
      overflow: hidden;
      box-shadow: 0 -8px 30px rgba(23, 18, 20, 0.05);
   }

.fx-limits__copy
   {
      padding: clamp(28px, 4vw, 48px);
      display: flex;
      flex-direction: column;
   }

.fx-limits__kicker
   {
      font-family: var(--fx-mono);
      font-size: 12.5px;
      color: var(--fx-muted);
      margin-bottom: 26px;
   }

.fx-limits__copy h3
   {
      font-size: clamp(28px, 2.8vw, 40px);
      font-weight: 500;
      letter-spacing: -0.03em;
      line-height: 1.05;
      margin-bottom: 18px;
   }

.fx-limits__copy p
   {
      font-size: 18px;
      line-height: 1.5;
      color: var(--fx-body);
      max-width: 40ch;
   }

.fx-limits__plate
   {
      position: relative;
      background: var(--fx-paper);
      border-left: 1px solid var(--fx-line);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
   }

.fx-limits__plate span
   {
      font-family: var(--fx-display);
      font-size: clamp(36px, 5vw, 72px);
      font-weight: 500;
      letter-spacing: -0.04em;
      color: var(--fx-line-strong);
      transform: rotate(-6deg);
      white-space: nowrap;
   }

.fx-limits__plate span::after
   {
      content: ".";
      color: var(--fx-red);
   }

/* --------------------------------------------------------------------------
   From the insights
   -------------------------------------------------------------------------- */
.fx-journal
   {
      padding: clamp(80px, 12vh, 160px) 0;
   }

.fx-journal__grid
   {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 28px;
   }

.fx .fx-journal__grid a
   {
      display: block;
      text-decoration: none;
      color: inherit;
   }

.fx-journal__grid a:hover
   {
      text-decoration: none;
   }

.fx-journal__art
   {
      aspect-ratio: 4 / 3;
      border-radius: 10px;
      border: 1px solid var(--fx-line);
      background-color: var(--fx-panel);
      background-image: repeating-linear-gradient(to bottom, transparent 0 23px, var(--fx-line) 23px 24px);
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
      transition: border-color 280ms ease;
   }

.fx-journal__art::after
   {
      content: "";
      position: absolute;
      left: 12%;
      top: 36%;
      width: 34%;
      height: 3px;
      background: var(--fx-red);
      transform: scaleX(0.3);
      transform-origin: left center;
      transition: transform 700ms var(--fx-ease);
   }

.fx-journal__grid a:hover .fx-journal__art
   {
      border-color: var(--fx-line-strong);
   }

.fx-journal__grid a:hover .fx-journal__art::after
   {
      transform: scaleX(1);
   }

.fx-journal__meta
   {
      font-family: var(--fx-mono);
      font-size: 12.5px;
      color: var(--fx-muted);
      margin-bottom: 10px;
   }

.fx-journal__grid h3
   {
      font-size: 22px;
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1.15;
      margin-bottom: 10px;
   }

.fx-journal__grid p:last-child
   {
      font-size: 16px;
      line-height: 1.5;
      color: var(--fx-body);
   }

/* --------------------------------------------------------------------------
   Related services
   -------------------------------------------------------------------------- */
.fx-siblings
   {
      border-top: 1px solid var(--fx-line);
      padding: 28px 0 40px;
   }

.fx-siblings ul
   {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 10px 28px;
   }

.fx .fx-siblings a
   {
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      color: var(--fx-ink);
   }

.fx .fx-siblings a:hover
   {
      color: var(--fx-red);
      text-decoration: none;
   }

.fx-siblings .fx-mono
   {
      margin-right: 6px;
   }

/* --------------------------------------------------------------------------
   Closing CTA: same band as the IT consultancy page
   -------------------------------------------------------------------------- */
.fx-cta
   {
      background-color: var(--fx-dark);
      background-image: radial-gradient(circle, var(--fx-dark-2), var(--fx-dark));
      color: #fff;
      min-height: 100vh;
      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));
   }

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

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

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

.fx-cta__title strong::after
   {
      content: ".";
      color: var(--fx-red);
   }

.fx-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);
   }

.fx-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;
   }

.fx-cta__action:hover, .fx-cta__action:focus-visible
   {
      border-color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
   }

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

.fx .fx-cta__action-label
   {
      flex: 1 1 auto;
      padding: 18px 24px;
      font-family: var(--fx-text);
      font-size: 14px;
      font-weight: 600;
      color: #fff;
   }

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

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

/* --------------------------------------------------------------------------
   Smaller screens
   -------------------------------------------------------------------------- */
@media (max-width: 1100px)
   {
      .fx-stance__cols
         {
            grid-template-columns: repeat(2, minmax(0, 1fr));
         }

      .fx-build__canvas
         {
            width: min(920px, 78vw);
            transform: translate(-50%, -58%);
         }
   }

@media (max-width: 900px)
   {
      .fx-ruler, .fx-rail
         {
            display: none;
         }

      .fx-hero
         {
            padding-bottom: 96px;
         }

      .fx-hero__head, .fx-hero__stage
         {
            max-width: none;
         }

      .fx-hero__lead
         {
            max-width: 30ch;
         }

      .fx-build
         {
            height: calc(var(--fx-steps) * 100vh + 40vh);
         }

      .fx-build__canvas
         {
            width: 92vw;
            transform: translate(-50%, -66%);
         }

      .fx-build__caps
         {
            width: calc(100% - var(--fx-gutter) * 2);
            bottom: 28px;
         }

      .fx-build__cap p
         {
            font-size: 16px;
         }

      .fx-build__skip
         {
            display: none;
         }

      .fx-build__progress strong
         {
            font-size: 40px;
         }

      .fx-fan__list
         {
            flex-direction: column;
            height: auto;
            gap: 14px;
         }

      .fx-fan__card, .fx-fan__card.is-open
         {
            flex: none;
            min-height: 420px;
         }

      .fx-fan__spine
         {
            display: none;
         }

      .fx-fan__body, .fx-fan__card:not(.is-open) .fx-fan__body
         {
            opacity: 1;
            transform: none;
            min-width: 0;
            height: auto;
            position: relative;
            margin-top: 200px;
         }

      .fx-fan__art, .fx-fan__card:not(.is-open) .fx-fan__art
         {
            height: 200px;
            opacity: 0.9;
         }

      .fx-fan__art::after, .fx-fan__card.is-open .fx-fan__art::after
         {
            opacity: 1;
            transform: scale(1);
         }

      .fx-limits__card
         {
            position: relative;
            top: auto;
            grid-template-columns: minmax(0, 1fr);
            min-height: 0;
         }

      .fx-limits__plate
         {
            order: -1;
            min-height: 150px;
            border-left: 0;
            border-bottom: 1px solid var(--fx-line);
         }

      .fx-limits__plate span
         {
            font-size: 34px;
         }

      .fx-journal__grid
         {
            grid-template-columns: minmax(0, 1fr);
         }

      .fx-cta__grid
         {
            grid-template-columns: minmax(0, 1fr);
            align-items: start;
         }
   }

@media (max-width: 600px)
   {
      .fx-stance__cols
         {
            grid-template-columns: minmax(0, 1fr);
            gap: 28px;
         }

      .fx-hero__actions .fx-btn
         {
            width: 100%;
         }

      .fx-limits__head, .fx-journal__head
         {
            flex-direction: column;
            align-items: flex-start;
         }
   }

/* --------------------------------------------------------------------------
   Reduced motion: everything is readable with the motion off
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce)
   {
      .fx *, .fx *::before, .fx *::after
         {
            transition-duration: 1ms !important;
            animation-duration: 1ms !important;
            animation-iteration-count: 1 !important;
         }

      .fx-stance__statement .fx-w
         {
            color: var(--fx-ink);
         }
   }

/* No JS: the build unpins and lists its captions under the finished drawing. */
.fx-build:not(.is-ready)
   {
      height: auto;
      padding: 48px 0;
   }

.fx-build:not(.is-ready) .fx-build__stage
   {
      position: relative;
      height: auto;
      overflow: visible;
   }

.fx-build:not(.is-ready) .fx-build__frame
   {
      padding-top: 72px;
   }

.fx-build:not(.is-ready) .fx-build__canvas
   {
      position: relative;
      left: auto;
      top: auto;
      transform: none;
      margin: 0 auto 48px;
   }

.fx-build:not(.is-ready) .fx-build__caps
   {
      position: relative;
      left: auto;
      bottom: auto;
      width: auto;
      display: grid;
      gap: 32px;
   }

.fx-build:not(.is-ready) .fx-build__cap
   {
      position: relative;
      opacity: 1;
      transform: none;
      pointer-events: auto;
   }

.fx-build:not(.is-ready) .fx-s, .fx-build:not(.is-ready) .fx-page
   {
      opacity: 1;
      stroke-dashoffset: 0;
   }

.fx-build:not(.is-ready) .fx-build__label, .fx-build:not(.is-ready) .fx-build__progress, .fx-build:not(.is-ready) .fx-build__skip, .fx-build:not(.is-ready) .fx-build__handles
   {
      display: none;
   }